深入理解JavaScript核心概念

小智雅汇 2018-09-14 11:18

Javascrip是Netscape推出的一种嵌入HTML文档，基于对象的脚本描述语言。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。JavaScript代码由浏览器内置的JavaScript引擎解释执行。JavaScript是广泛用于客户端，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

目录

1 JS用途

2 JS数据类型

3 内置对象

4 BOM、DOM对象模型

5 自定义对象（函数对象）

6 函数的定义与调用

7 流程控制：体现逻辑之美

8 JS嵌入方法

9 JS代码在THML中书写的方法

10 script语句什么时候被执行？

11 脚本执行的顺序

12 代码执行的次数

13 JS借助DOM对HTML进行操作

14 JS动态变更样式

JS是通过自身内建的对象和DOM对象模型所提供的对象和事件，对网页内容进行控制、对用户操作进行响应，从而实现网页的动态交互效果的。

JS与VBA一样，是基于对象的脚本语言，它们都有一个宿主，主要操作的是宿主对象的元素，所以基本上无须考虑再创建新的类或对象，而是基于现有的对象，去获取或引用，然后再操作。

1 用途

1.1 嵌入动态文本到HTML页面。

1.2 对浏览器事件做出响应。

1.3 读写HTML元素。

1.4 在数据被提交到服务器之前用正则表达式验证数据。

1.5 检测访客的浏览器信息。

1.6 控制cookies，包括创建和修改等。

1.7 基于Node.js技术进行服务器端编程。

2 JS数据类型

2.1 基本数据类型（原生对象）：字符串、数值型、布尔型；

2.2 复合数据类型

2.2.1 数组Array

构造函数：

new Array( )

new Array(size)

new Array(element0, element1, ..., elementn)

数组方法：

Array.concat( ) 连接数组

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.length 数组的大小

Array.pop( ) 删除并返回数组的最后一个元素

Array.push( ) 给数组添加元素

Array.reverse( ) 颠倒数组中元素的顺序

Array.shift( ) 将元素移出数组

Array.slice( ) 返回数组的一部分

Array.sort( ) 对数组元素进行排序

Array.splice( ) 插入、删除或替换数组的元素

Array.toLocaleString( ) 把数组转换成局部字符串

Array.toString( ) 将数组转换成一个字符串

Array.unshift( ) 在数组头部插入一个元素

2.2.2 对象Object

I 内置对象

II 宿主对象（BOM、DOM）：浏览器、文档对象模型

III 自定义对象（函数对象）：用构造函数去构造一个对象；

3 内置对象

JS提供了很多类，这些类按照不同的功能封装了一些函数和变量，用于不同的数据运算，如字符串运算、数学运算、数值转化、格式化等；这些类被包含在JS解释器中，因此，也被称为内建类。一些内建类无须实例化，可以直接调用类的方法和属性，而另外一些类则需要使用new关键字实例化才可以调用类的方法和属性；

在JavaScript提供了String（字符串）、Math（数值计算）、Date（日期）、Boolean、Function、Global、Number等对象。

JS内建的类也是某一事物的抽象，所以也必须创建实例才能使用，如Date类，首先要创建该类的新实例，然后才可使用它的方法和属性，也就是创建了类的一个新实例后，该类的所有属性和方法都会被复制到该实例中。

var currentDate=new Date()

var currentMinute=currentDate.getMinutes()

有一些类虽然也是事物的抽象，但是这些类一般不会有什么个体而言，如月亮抽象为一个类，该类有方法和属性，但是世上只有一个月亮，它是唯一的，所以也谈不上个体，也就无须实例化，JS中内建的Math类就属于这一类型，无需实例化。

4 BOM、DOM对象模型

JS中对于不同的运行环境，有着不同的内置宿主对象，这是由于JS是被作为一种扩展语言而设计的。对于通用程序设计语言，开发者必自己开发运行时的上下文环境。正因如此，那些语言才有了通用设计语言的名称。另一方面，扩展语言是在内建对象的应用程序（宿主环境）中运行程序的。宿主应用程序会在这时收到一些运行时的上下文信息。JS会以全局对象作为根节点的对象树的形式，接收这些上下文信息。在启动时，JS从宿主环境获取的对象树就被称为宿主对象。从JS代码的角度来看，全局对象在程序启动前就已经存在了，客户端JS的全局对象被称为Window对象。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器自身也被设计为一个对象集合的模型，我们可以使用这些浏览器对象来操作浏览器；

BOM对象不仅具有属性、方法，还具有事件，在JS中通过事件处理器来处理事件。当事件发生时，事件处理器将连接到相应的事件处理代码，不同的对象具有不同的事件。

5 自定义对象（函数对象）

js中对象随处可见，却没有定义类的概念，可以使用函数来定义一种新的类型。

JS中是使用构造函数来构造一个类。

function show()

{

document.write("

  • "+ this.name + " " + this.age + "
    ");

    }

    function Student(_name,_age)

    {

    this.name = _name;

    this.age = _age;

    this.show = show;

    }

    var stu1 = new Student("Tom",20);

    var stu2 = new Student("Lily",10);

    show.call(stu1);

    stu2.show();

    /*

    Tom 20

    Lily 10

    */

    一般写成下面的格式更紧凑：

    function Student(_name,_age)

    {

    this.name = _name;

    this.age = _age;

    this.show=function()

    {

    document.write("

  • "+ this.name + " " + this.age + "
    ");

    }

    }

    var stu1 = new Student("Tom",20);

    var stu2 = new Student("Lily",10);

    //show.call(stu1);

    stu2.show();

    6 函数的定义与调用

    函数是一个单独的逻辑单元，执行一个特定任务。使用一个函数前，必须先对它定义。然后在脚本中对它进行调用。

    函数是属于延迟执行的一个指令集；函数定义后并不会自动被执行，需要在特殊位置调用时才被执行。

    函数具有对象的全部特征，多出的()表示函数本身还可以被调用；

    函数可以把重复的运算封闭在一起，有利于代码的重用，JS内建了很多预定义函数，用于处理一些常见操作。你也可以自定义函数，从而将一些重复运算的语句封装起来；

    JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。

    预定义的函数也叫全局函数,enscape()、encode()、parse Float()、Number()、String()、isFinite()、isNaN()、eval()。

    6.1 普通定义方式

    function a(x,y){

    return x+y;

    }

    var n=a(5,6);

    document.write(n);

    6.2 变量定义方式

    var varf=new Function("x","y","return x+y;");

    var i = 3;

    var j =4;

    var mul = varf(i,j);

    document.write('\n\r',mul);

    6.3 匿名函数

    函数定义时也可以省略函数名。匿名函数也是一个表达式。以下赋值表达式右侧的就是匿名函数表达式：

    var a=function(x,y){return x+y;};

    6.4 构造函数

    构造函数是用于生成对象的函数，构造函数通过new表达式来调用。

    function MyClass(x,y){

    this.x=x;

    this.y=y;}

    var obj=new MyClass(3,2);

    document.write(obj.x,",",obj.y);

    6.5 闭包closure

    闭包closure 是一种具有状态的函数；在函数声明的内部声明另一个函数，即嵌套的函数声明；

    function getsum()

    {

    ....function sum(a,b)

    ....{

    ........return a+b;

    ....}

    ....return sum;

    }

    var sumoftwo = getsum();

    var total = sumoftwo(3,8);

    document.write('\n\r',total);

    6.6 函数的执行

    调用函数就是使用当前文档中所定义的函数，或者调用另一个窗口或框架定义的函数。调用时需要用指定的参数来执行一个特殊的行为。一个函数还可以自己递归。

    6.6.1 函数的简单调用

    函数的定义语句通常放在HTML文件的段；而函数的调用语句通常放在段中；如果函数定义之前调用函数，执行将会出错。

    使用函数的返回值：变量名＝函数名();

    6.6.2 在事件响应中调用函数

    当用户单击某个按钮或某个复选框时都将触发事件，通过编写程序对事件做出反应的行为称为响应事件；onClick=""函数名();

    6.6.3 通过链接调用函数

    链接名;

    7 流程控制：体现逻辑之美；

    7.1 条件判断：if、switch;

    7.2 循环控制：while、for;

    7.3 跳转语句：continue、break;

    8 JS嵌入方法

    JS 可以放在HTML的任何地方(head或body标签内)，但以下情况例外：

    I 当我们在代码中定义了函数时，就一定要注意将函数的定义放在对该函数的调用之前；

    II 当浏览器由上到下、由左至右执行HTML代码时，遇到对函数的调用时，如果在调用函数之前，该函数已被定义，浏览器将正确执行该函数；如果函数的定义在函数调用之后，浏览器无法执行该函数；

    之间的javascript代码一般用于提前载入，以响应用户的页面动作，一般不影响HTML文档的浏览器显示格局；

    之间的javascript代码一般用于在页面载入时运行JS代碼生成頁面內容；

    8.1 利用加入到HTML中：

    8.3 直接加入到HTML标记：

    js操作

    9 JS代码在THML中书写的方法

    书写的方法不同，其执行的流程也各不相同。

    9.1 之后的元素，因为之后的元素还未构造，所以JS代码也无法取得之后的DOM元素。

    9.2 读取外部的JS文件，还可以指定defer、async属性去推迟或异步执行。

    9.3 onload:在页面读取完后再对其执行，可以操作全部DOM元素。

    window.onload=function(){alert('hello');};

    10 script语句什么时候被执行？

    决定因素是script语句在文档中的位置；

    10.1 在文档加载时；

    10.2 在文档加载后；

    10.3 根据用户的动作作出响应；

    10.4 当其它script语句调用它时；

    11 脚本执行的顺序

    11.1 按它们在文档里出现的顺序顺序执行；

    11.2 事件驱动异步执行；

    element对象上的一个重要的属性集合就是事件处理程序相关的的属性，可以在脚本中为之绑定一个函数，这个函数会在某一个事件发生时以异步的方式调用，事件处理程序可以以JS代码修改窗口文档和组成文档元素的行为，事件处理函数的属性名是以单词“on”开始，如D.onclick=function(){};

    12 代码执行的次数

    12.1 一次，即顺序执行一次，

    12.2 调用的次数；

    12.3 定时器按时间间隔执行；

    重复调用某个函数或执行某个表达式，并且对函数或表达式的调用间隔只有固定时间的延迟。

    setInterval("functionOrExpr",msecDelay [,funcarg1,…,funcargn])

    清除计算器可以使用以下语法：

    window.clearInterval(id);

    12.4 对代码延迟执行

    当你需要在将来某个时间执行一次函数或表达式时。实际应用于警告框的显示时间和状态栏的跑马灯效果、打字效果等。

    window.setTimeout("functionOrExpr",msecDelay);

    13 JS借助DOM对HTML进行操作

    13.1 节点的获取

    通过 id 查找 HTML 元素

    var x=document.getElementById("intro");

    var x=document.getElementById("main");

    var y=x.getElementsByTagName("p");

    通过类名找到 HTML 元素

    var x=document.getElementsByClassName("intro");

    13.2 节点的创建和新增

    var para=document.createElement("p");

    var node=document.createTextNode("This is new.");

    para.appendChild(node);

    var element=document.getElementById("div1");

    element.appendChild(para);

    13.3 节点的内容更改

    document.getElementById("p1").innerHTML="New text!";

    document.getElementById("image").src="landscape.jpg";

    13.4 节点的删除

    var parent=document.getElementById("div1");

    var child=document.getElementById("p1");

    parent.removeChild(child);

    13.5 改变 HTML 输出流

    JavaScript 能够创建动态的 HTML 内容：

    document.write(Date());

    14 JS动态变更样式

    14.1 通过className属性更改class名

    var child0 = document.createElement("div");

    child0.innerHTML = "child0";

    child0.className = "newDiv";

    parent.appendChild(child0);

    14.2 通过classList属性更改class名

    在html中，一个tag可以应用了多个类，如：

    ……

    通过className属性去更改其中的一个类比较麻烦。

    而使用classList属性则会很方便，如：

    obj.classList.remove('bg');

    14.3 更改style属性

    This is a sample.

    (还可以通过setInterval(匿名函数）实现动态效果；）

    14.4 直接更改样式表

    function changecss(nh) {

    CSS.href="";

    CSS.href=nh;

    }

    -End-

    • 大
    中
    小
    ↓
    ∨