一、 简介

• 动态性和交互性

1.由浏览器解释执行

2.常见的脚本语言：JavaScript和VBScript

P.S. Node.js 是使用JavaScript编写的服务器端框架。

二、 JavaScript脚本语言概述

• ECMAScript，描述了该语言的语法和基本对象
• 文档对象模型（DOM，document object model），描述处理网页内容的方法和接口
• 浏览器对象模型（BOM,browser object model），描述与浏览器进行交互的方法和接口

1.JavaScript是一种基于对象和事件驱动式的脚本语言。

2.JavaScript是一种嵌入HTML的脚本语言，它不需要编译，在客户端可以通过浏览器解释执行。

3.JavaScript的主要功能是：动态修改HTML页面内容；对浏览器事件作出响应 ；读写HTML元素；在数据被提交到服务器之前验证数据 ；检测用户的浏览器信息；控制cookies，包括创建和修改等

JavaScript和Java的关系

1.商业：JavaScript与Java名称上的近似，是当时NetScape为了营销考虑与SUN达成协议的结果。

2.使用：Java是面向对象的程序设计语言，即使是开发简单的程序，也必须从类定义开始。

JavaScript是基于对象的，本身提供了非常丰富的内部对象供设计人员使用。

3.执行方式：Java语言必须经过编译生成字节码，然后由JVM运行这些字节码。JavaScript是一种脚本语言，其源代码无需经过编译，由浏览器解释执行。

4.变量声明：Java是强类型变量语言，所有变量必须先经过声明才可以使用，所有变量都有其固定的数据类型。JavaScript是弱类型语言，其变量在使用前无需声明，而由解释器在运行时检查其数据类型。

三、 JavaScript导入

1.导入

/*Method1:使用javascript：前缀构建执行JavaScript代码的URL*/  运行JavaScript/*Method2:使用
    元素来包含JavaScript代码*/    

1. 在XHTML中导入JavaScript

3.教材中的language语句段可省略

4.其他说明

1）Javascript区分大小写

2）JavaScript中使用换行符作为一条语句的结束标志。

四、 Javascript数据类型

1.数值型数据

//Caution:十进制不要以0开始//16进制 0x13//八进制 014

2.Inifity

Infinity（无穷大，表示数值大于数值类型的最大值）和 –Infinity（负无穷，表示数值小于数值类型的最小值）。

Infinity和-infinity与其他数值进行运算时，整个算数表达式将变成另一个特殊的值NaN。但Infinity和-infinity可以进行比较运算，即Infinity等于Infinity，而-Infinity等于-Infinity

3.NaN(Not a Number)

4.浮点数——精度问题

不要直接比较。

推荐使用差值比较-判断两个浮点数是否相等，可以计算两个浮点数的差，只要差小于一个足够小的数即可认为相等

5.字符串

JavaScript字符串的第一个字符索引为0。

五、 变量

1.声明方法

/*显式定义：使用关键字“var”声明变量。*/var v1;var v1 = 3.1415;/*隐式定义：不使用关键字“var”，直接使用赋值语句声明变量（不建议使用）。*/v1 = 3.1415;

2.自动类型转换

• 让字符串变量和数值执行运算，到底是算术运算，还是字符串运算呢？

对于减号运算符，因为字符串不支持减法运算，所以系统自动将字符串转换成数值。

对于加法运算符，因为字符串可用加号作为连接运算符，所以系统自动将数值转化成字符串，并对两个字符串进行连接运算。

3.变量作用域

• 全局变量
• 局部变量

1)没有代码块的概念

function(o){    if (typeof o == "object")     {        //定义变量j，变量j的作用范围是整个函数内，而不是if块内。        var j = 5;        for(var k = 0; k < 10; k++)        {            //因为JavaScript没有代码块范围            //所以k的作用范围是整个函数内，而不是循环体内            document.write(k);        }    }//即使出了循环体，k的值依然存在alert(k + "\n" + j);}

2)局部变量undefined？

4.其他运算符

1)不短路或

2)逗号表达式

v1 = (b=5,c=6,d=57); //v1=57v2 = 7,8,9;          //v2=7

3)instanceof

instanceof 判断某个变量是否为指定类的实例。

• Javascript中所有类都是Object的子类。

六、 控制语句

1）循环语句for in

无需知道个数即可遍历所有属性

关键代码动手写一遍！！！

2）with语句

//with（对象名）{//语句段//}例：document.writerln(“hello
”);        document.writerln(“world
”);        document.writerln(“JavaScript
”);可改写为：with(document){  writerln(“hello
”);  writerln(“world
”);  writerln(“JavaScript
”);     }

• 可用于替换for in

function displayProp(obj){        var property;        //使用with语句访问对象obj中的所有属性        with(obj) {            document.writeln(name+" ，");            document.writeln(stunum+" ，");            document.writeln(age);            }           document.writeln("
");    }

七、JavaScript函数

7.1 匿名(Anonymous)函数

//Demo1: new//Demo2:funbtion

7.2 类和函数

1) Javascript函数的本质是一个类

2) JavaScript是一种动态语言，允许随时为对象增加属性和方法，在直接为对象某个属性赋值时，可视为给对象增加属性。

关注 s1的subject属性：undefined！

3)局部变量 实例变量 静态变量

同一个类只有一块静态属性内存.

每个对象有单独的一块内存。

• 局部变量：在函数中以普通方式声明的变量，包括以var或不加任何前缀声明的变量。局部变量只有在函数内部才可以被访问。
• 实例变量：在函数中义this前缀修饰的变量。实例变量属于单个对象，必须通过对象来访问。
• 静态变量：在函数中以函数名前缀修饰的变量。静态变量属于整个类，必须通过类（也就是函数）来访问。

敢于写空参数Undefined！！！

JavaScript会将没有传入实参的参数自动设为undefined

重点关注：

• p1.national
• p1.bb

function Person(national, age)    {        //this修饰的属性为实例属性——一个对象一片内存        this.age = age;        //Person修饰的属性为静态属性——类，静态        Person.national =national;            //以var定义的变量为局部变量——函数内部才可访问，类比私有变量        var bb = 0;        }        var p1 = new Person('中国' , 29);OUTPUT：创建第一个Person对象p1的age属性为29p1的national属性为undefined!!!通过Person访问静态national属性为中国p1的bb属性为undefined!!!

八、 JavaScript 对象和数组

8.1 数组

• 数组属于复合数据类型（复合数据类型包括对象，数组和函数）。

1) JavaScript数组的长度可以随意变化，总等于所有元素索引最大值+1(原因：数组下标从0开始)

2) 访问数组元素不会产生数组越界，访问未赋值的数组元素时，该元素的值为undefined。

8.2 数组对象

JavaScript中可以通过内置对象Array来创建数组对象。

var Students=new Array()  //创建数组对象

8.3 对象的属性赋值

Javascript中的对象本质上是一个关联数组。

KEY-VALUE

方式一：      student.name = "John"          student.stunum = "12345 "          student.age = 20方式二：   student[0] = "John"          student[1] = "12345 "          student[2] = 20方式三：   student[name] = "John"          student[stunum] = "12345 "          student[age] = 20

8.4 JavaScript的伪继承机制

• prototype 原型
  JavaScript的所有类都有一个prototype属性，在为Javascript类的prototype属性增加函数、属性时。即可视为对原有类的扩展。可以理解为：增加了prototype属性的类继承了原有的类--JavaScript的伪继承机制。

P.S.JavaScript中没有继承的概念

//将walk方法增加到Person的prototype属性上    Person.prototype.walk = function()    {        document.writeln(this.name + '正在慢慢溜达...
');    }

8.5 JavaScript创建对象的三种方式

//1.使用关键字new创建对象    var p1 = new Person('中国' , 29);//2.使用Object创建即时对象    //创建空对象    var myObj = new Object();//3.使用JSON语法创建对象    var p={    “name”:’neo’,    “gender”:’male’    }    //JSON创建对象:最后一个属性定义后不再有英文逗号。

九、 闭包

闭包的含义：就是在函数嵌套条件下，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕

• 强行延长了变量的生命周期

十、 JavaScript的事件处理

JavaScript具有事件驱动的特点。

事件就是用户对计算机所进行的相关操作，如鼠标的移动、鼠标键的点击等等。

事件驱动（Event Driver）就是鼠标或热键所引发的一系列动作。

事件以消息的形式由OS传递给浏览器，浏览器拥有BOM对象集合以及当前网页加载时所创建的DOM对象集合，根据一定的规则将这些消息与DOM或BOM对象对应起来。

10.1 JavaScript浏览器对象模型BOM(Browser Object)

就是指当用户打开浏览器时，浏览器中的JavaScript runtime engine将在内存中自动创建一组对象，用于对浏览器及HTML文档对象模型中数据的访问和操作。

document对象：是window对象的成员对象。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。

10.2HTML文档对象模型DOM(Document Object)

• 标签——>对应对象
  对于网页中的每一个标签元素，都在内存中创建一个相应的内存对象。这些对象按照树型结构组织，这就是文档对象模型DOM。

10.3 事件处理方法(Event Handler)

对事件进行处理的函数称为事件处理程序（Event Handler）或事件处理方法。

事件处理的过程可以这样表示：发生事件 - 启动事件处理程序 - 事件处理程序作出反应。

其中，要使事件处理程序能够启动，必须先告诉对象，如果发生了什么事情，要启动什么处理程序，否则这个流程就不能进行下去。