JavaScript教程 名师编写 祝你完成网站的轻松编写

1、1,1.1 什么是JavaScript,JavaScript是由一种基于对象(Object)和基于事件驱动(Event Driver)并具有安全性能的脚本语言。它是通过嵌入在标准的HTML语言中实现的。它的出现弥补了HTML语言的不足，它是Java与HTML的折衷。它的开发环境简单，不需要Java编译器(事实上Java与JavaScript之间没有任何关系)，而是直接运行在Web浏览器中，也就是客户端的脚本言语，因而使用它与HTML超文本标记语言结合在一起，来实现一个Web页面与浏览者交互作用，从而可以开发客户端的应用程序。 JavaScript程序本身不能独立存在，它是依附于某个web页面，

2、在浏览器端运行的。,2,1.2JavaScript可以做什么,作为一个运行于浏览器环境中的语言，JavaScript被设计用来向web页面添加交互行为，利用它可以完成以下任务。 可以将文本动态的放入web页面。类似于这样的一段JavaScript声明可以将一段可变的文本放入HTML页面：document.write(+name+) 可以对事件做出响应。例如页面载入完成或者当用户单击某个HTML元素时，调用指定的JavaScript程序。 可以读写HTML元素。JavaScript程序可以读取及改变当前HTML页面内某个元素的内容，如文本框中的输入内容等。 可被用来验证用户输入的数据。在数据被提

3、交到服务器之前，JavaScript可被用来验证这些数据。 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。 可被用来创建cookies，用来存储和取回位于访问者的计算机中的信息。 可利用Ajax技术来完成和服务器的直接通信，无刷新的修改当前HTML页面内容。,3,1.3 JavaScript的基本语法,利用JavaScript编写的Hello World程序。如图所示。 其代码如下：, JavaScript学习 Hello World! ,通过这个简单的实例，在HTML语言中插入JavaScript脚本语言的语法格式为： ,4,1.3 JavaScript的基

4、本语法(续),script：脚本标记。它必须以开头，以结束。 JavaScript语句对大小写敏感。 Script在页面中的位置决定了什么时候装载它们，如果希望在其他所有内容之前装载脚本，就要确保脚本在head部分。 代码的位置 位于HEAD部分的脚本 如果把脚本放置到head部分，在页面载入的时候，就同时载入了代码。 通常这个区域的JavaScript代码是为body区域程序代码所调用的事件处理函数。 位于 BODY部分的脚本 当你把脚本放置于 body 部分后，在页面载入时不属于某个函数(因为函数必须经过调用才能运行)的脚本就会被执行，执行后的输出就成为页面的内容。 直接位于事件处理部分的

5、代码中 位于网页之外的单独脚本文件,5,1.3 JavaScript的基本语法(续),可以在一行中写多条语句，一条语句也可以分多行书写。 当一行中写多条语句时，语句与语句之间要用分号(;)分隔。 当一条语句多行书写时，同一个标识符中的字符必须连续书写，中间不可以有空格。 当一行只写一条语句时句未的分号可以不写。 标识符与标识符之间的多余空格会被忽略掉（这点与html语言相似）。 要将一个字符串分多行书写，每一行要做为一个单独的字符串，然后行尾要用“+”运行算符将位于不同行的字符串连接起来。 这是个html注释语句，是为了浏览器的支持问题，如果不支持将跳过这部分的执行，现在大部分浏览器都支持Ja

6、vaScript所以一般不用写。,6,1.4 数据类型,JavaScript脚本语言同其它语言一样，有它自身的基本数据类型、运算符和表达式以及程序的基本框架结构。JavaScript提供了七种基本的数据类型用来处理数据。但这种语言是一种弱类型的语言，对数据的类型要求不严格，数据的类型可以根据程序的上下文进行自动转换。,7,1.4.1 基本的数据类型,在JavaScript中数据类型： 基本数据类型 字符串型（用“ ”或 括起来的字符或数值） 数值型（整数和实数） 布尔型（使用True或False表示) 复合数据类型 Arrary数组 Object对象 特殊数据类型 空值（null） undef

7、ined 试图引用一个没有的对象属性，则反回一个undefined值 在JavaScript的基本类型中的数据可以是常量，也可以是变量。由于采用弱类型的形式，因而一个数据的变量或常量不必事先作声明，而是在使用或赋值时才确定其数据的类型。当然也可以先声明该数据的类型。,8,1.4.2 常量,JavaScript的常量主要有以下几种： 字符型常量（使用单引号或双引号括起来的一个或多个字符。如JavaScript、1234567890等 数值型常量 整型常量（又称字面常量，是不能改变的数据。可以使用十六进制(0 x)、八进制(0)和十进制表示其值） 实型常量（由整数部分加小数部分表示，如13.48、

8、197.99。可以使用科学或标准方法表示：3E6、2e8等） Infinity表示无穷大，这是一个特殊的Number 类型 NaN表示非数（Not a Number），这是一个特殊的数值类型，任何数都不与他相等。 布尔常量（只有True或False两种值，主要用来说明或代表是或否状态） 空值（该变量没有保存有效的数、字符串、boolean、数组或对象） Undefined(对象属性不存在或者声明了变量但从未赋值),9,1.4.3 变量,变量是存取数据、提供存放数据的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 JavaScript中的变量命名同其他语言非常相似：

9、必须是一个有效的变量名，即变量以字母或下划线开头，中间可以出现数字如x1、y2、_x1、_y2等。除下划线外，变量名不能有空格、+、-和其他符号。 不能使用JavaScript中的关键字作为变量。JavaScript定义了50多个关键字，供内部声明用的，如Var、int、double、true等。,10,1.4.3 变量(续),11,1.4.3 变量(续),在JavaScript中，变量可以用命令Var声明： var mytest; 定义一个mytest变量，但没有赋予它的值 var mytest=“This is a test”; 定义一个mytest变量，同时赋予了它的值 在JavaScr

10、ipt中，变量也可以不作声明，而在使用时再根据数据的类型来确定其变量的类型。如： x1=200 x2=345 x3=True x4=12.34等 其中x1为整数，x2为字符串，x3为布尔型，x4为实型。,12,1.4.4. 运算符和表达式,在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量及运算符的集合。表达式可以分为算术表达式、字串表达式、赋值表达式及布尔表达式等。 运算符是完成操作的一系列符号，在JavaScript中有： 算术运算符（+、-、*、/、%等） 比较运算符（!=、=等、=、=） 逻辑运算符（! 、 语句类型 变量声明

11、语句(var test)； 变量的赋值语句(test=12)； 表达式语句(用运算符将常量或变量连接起来形成的式子)； 返回语句(return); 程序流向控制语句 对象创建语句 注释语句 选择语句 循环语句 break 语句 continue 语句,14,1.5.1 选择语句,If选择语句的使用。 语法格式为： if（条件表达式） 语句块; 功能：若条件表达式为true，则执行语句块 注：语句块就是用“”和“”封闭起来的一条或若干条语句。,15,1.5.1 选择语句(续),Ifelse选择语句 语法格式为： if（条件表达式） 语句块1; else 语句块2; 功能：若条件表达式为true，

12、则执行语句块1，否则执行语句块2。,16,1.5.1 选择语句(续),Ifelse选择语句的嵌套 格式： if(条件表达式1) 语句块1; else if(条件表达式2) 语句块2; else if(条件表达式n) 语句块n; else 语句块n+1; 功能:计算每一个条件表达式，如果结果为true则执行其后相应的语句块。该语句具有互斥性。,17,1.5.1 选择语句(续),switch分支语句，和if语句不同的是，它是用于对多种可能相等情况的判断，解决了ifelse语句使用过多，逻辑不清的弊端。 格式 switch(变量或表达式) case 常量1: 语句1; break; . case 常

13、量n: 语句n; break; default: 语句n+1; ,18,1.5.1 选择语句(续),功能：当switch的“变量或表达式”的值与某个case后面的常量相等时，就执行常量后面的语句，碰到“break”之后跳出switch分支选择语句，当所有的case后面的常量都不和“变量或表达式”相等时，执行default后面的语句n+1。,19,1.5.1 选择语句(续4),?：选择语句，有些教材也把它看作是一个运算符，叫三目运算符或条件运算符。 表达式1 ? 表达式2 : 表达式3 说明 先计算表达式1的值，如果表达式1的值为true则执行表达式2，否则执行表达式3。,20,1.5.2 循环

14、语句,for循环语句的使用，也称计数循环。 格式为： for（初值;条件;步长表达式） 语句块； 功能： 每当进行循环以前都要判断条件，条件为true时，执行语句集，否则跳出循环体，每循环一次计数变量增加或减少步长表达式的值。 初值用来设置计数变量并给它赋值。步长表达式用来说明计数变量的变化规律。三个主要语句之间，必须使用逗号分隔。 for循环是一般目的的循环。而它的一种特殊应用forin循环则用于在对象的所有成员内自动移位，其语法格式为： for（i in 对象） 语句块； ,21,1.5.2 循环语句（续）,while循环语句的使用。 格式为： while（条件） 语句块; 功能：每当进行

15、循环以前都要判断条件，条件为true时，执行语句集，否则跳出循环体。,22,1.5.2,循环语句（续2）: dowhile循环语句的使用。 格式为： do 语句块; while（条件） 功能： 先执行一次循环再判断条件，条件为true时，执行语句块，否则跳出循环体。 break语句、continue语句: break语句：跳出语句块。 Continue语句：可跳到语句块的第一句。,23,1.6 函数,函数为程序设计人员提供了一个非常方便的设计思想。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而使各部分充分独立，任务单一，程序清晰

16、，易懂、易读、易维护，并可以重复使用。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的动作而被调用的程序。从而实现把一个函数与事件驱动相关联。,24,1.6 函数（续）,函数的定义 function myFun(参数1,参数2,) 语句集; return 返回值 或var myFun=function(参数1,参数2,) 语句集; return 返回值 说明 定义时设置的参数为形参，用来接收调用时传递过来的数据 形参可以没有 调用 形式:myFun(参数1,参数2) 说明：可以没有参数，但必须有括号，如果没有括号，反回的是函数的代码，而不是执行的结果。,25

17、,1.6 函数(续),函数的返回值 Return 语句结束函数的运行并为函数返回一个值，做为函数的运算结果。 也可以没有返回值，但会结束函数的运行。 函数的作用域（函数内部可以再定义一个函数） 全局函数 局部函数 变量的作用域 全避变量 局部变量,26,1.7.1 事件,什么是事件:用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有你看不见的事件（如Ajax的交互进度改变）。绝大部分事件都由用户的动作所引发，如：用户按鼠标的按键，就产生click事件，若鼠标的指针在链接上移动，就产生mouseover事件等等。在JavaScript中，事件往往与事件处理程

18、序配套使用。 事件分类： 冒泡型事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。 注：由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。,27,1.7.1 常用事件的应用（续）,事件监听 IE 中的监听方法 附加事件方法：object.attachEvent(“事件名”，方法名); 分离事件方法：object.detachEvent(“事件名”，方法名); 注意：使用这种方式可以为同一元素添加多个监听函数；函数的执行顺序与函数的添加顺序相反；虽然函数有先后执行顺序，但都会同时调用。 标

19、准DOM 的监听方法 添加事件监听方法： object.addEventListener(“事件名”，方法名，事件模型 ); 移除事件监听方法： object.removeEventListener(“事件名”，方法名，事件模型 ); 注意：这里的“事件名”不能带 on ，如：click（如果是onclick 则错误！），“事件模型”为boolean 类型，通常设置为 false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）,28,1.7.2 常用事件的应用,Load和Unload事件:当页面完成下载时产生Load事件，同样，当退出页面时可以产生Unload事件，onLoad和o

20、nUnload是设置当事件发生时执行的JavaScript命令（也就是事件处理程序）。 change事件:当正在进行的动作或状态改变时产生change事件，onChange是设置当事件发生时执行的JavaScript命令。 例如:当利用text或textarea元素输入字符时，元素的值发生改变，从而产生该事件;当在select列表项中一个选项状态改变后也会产生该事件。 select选择事件，加在body里，当有文字被选中时发生 error事件：当发生错误时产生该事件，onerror是设置当事件发生时要执行的javascript命令。,29,1.7.3 常用事件的应用（续）,focus事件和bl

21、ur事件:当用户单击页面元素时产生focus事件，此时使该对象成为当前对象，成为焦点。而当元素不再拥有焦点时，则该对象退到后台，引发blur事件，它与focus事件是对应的关系。onFocus和onBlur是设置当相应事件发生时要执行的javaScript命令。 click事件:当用户单击鼠标时产生该事件，onclick是设置事件发生时要执行的javaScript命令。该事件通常在下列基本对象中产生： body button（按钮对象） checkbox（复选框）或（检查列表框） radio（单选按钮） reset button（重置按钮） submit button（提交按钮） image(

22、图象域) img(图片),30,1.7.4 常用事件的应用（续）,mouseOver事件:当我们将鼠标指针放到元素上面，则产生mouseOver事件，onMouserOver是设置事件发生时要执行的JavaScript命令。 mouseMove事件:当我们将鼠标指针放到面面元素上移动时产生该事件，onMouseMove是设置事件发生时执行的JavaScript代码。 mouseOut事件：当我们将鼠标指针从一个元素上面移到该元素的外面时产生该事件，onMouseOut是设置当该事件发生时要执行的JavaScript命令。 mouseWheel事件：当我们滚动鼠标中轮滚动时产生该事件，onMou

23、seWheel是设置当该事件发生时要执行的JavaScript命令。,31,1.7.5 常用事件的应用（续）,mouseDown事件，按下鼠标时产生的事件 mouseUp事件, 鼠标弹起时产生的事件 keyDown按下键盘上的某个键触发。 （一直按住某键则会持续触发） keyUp 释放某个按键时触发。 keyPress按下某个按键并产生字符时触发。（即忽略Shift 、Alt 、Ctrl 等功能键） submit 提交事件 reset 重置事件 contextmenu鼠标右键菜单事件。按下鼠标右键时发生。,32,1.8 类,现在高级编程语言的特点是面向对象，可以说对象是编程的一种思想。对象可以

24、由类来创建。要想学习类，就要先了解对象。 什么是对象：就是一个个的实体，一个东西，如一台电脑，一张桌子、一个人，这些都是对象。对象有自己的属性和功能。js支持四种类型的对象：内部对象、生成的对象、宿主给出的对象（如 Internet 浏览器中的 window 和 document）以及 ActiveX 对象（外部组件）。 什么是类：就是分类、类型。将具有相同属性和功能的对象分成一类。 类和对象的关系： 声明一个类-实例化对象（创建对象）-使用对象,33,1.8.2 自定义类,类的定义 js是基于对象的一种程序语言，但在js中并没有类的概念，但也可以有类，只不过这个类是用function模拟出来

25、的。在类中将这一类对象的共有属性和功能描述出来，就形成了类。 格式： function class_name(var1,var2,) perty_name=value; var property_name=value;/私有属性 this.method_name=function() function method_name() /私有的方法 this:指代由这个类创建的对象自身。,34,1.8.2 自定义类,类的固有属性 prototype:对原型对象的引用 原型对象：既没有属性也没有方法的对象，最原始的对象，我们可以为原型对象添加属性和方法。当通过对象来访问某个成员时，首先

26、会遍历这个对象所在的类的成员，当在类中找不到这个成员时，再向这个类的原型对象中找这个成员，这就是原型链，如果我们将另一个类中的成员，复制给这类的原型对象，那么这个类就实现了继承另一个类。 constructor:对构造函数的引用 类的固有方法 call(obj,arg1,arg2,)： apply(obj,arr)：,35,1.8.2 自定义类,创建对象：var object_name=new class_name(); 属性的访问 Object_perty_name Object_nameproperty_name 注意： 如果属性存在可以读写该属性的值，如果不存在则添加该属

27、性 私有属性在构造函数的外部不能访问 固有属性必需通过构造函数的名称访问：class_totype 方法的调用 object_name.method_name() 注意：固有方法的调用是：class_name.method_name(),36,1.8.1 类的三大特性,对象有三大特性：封装、继承、多态 封装：对于类的有些属性和方法只能在类的内部使用，而外部无法访问。 继承：用一个类（继承类）去扩展另一个类（被继承类）的功能 多态：对父类的方法进行重写，以实现不同的状态。,37,1.8.3 内置对象Golbal介绍,Global 对象，事实上JS中基本就没有这个关键字。它是一个固

28、有对象，目的是把所有全局方法集中在一个对象中。Global对象没有属性。直接调用其方法。 方法 escape(string)方法返回一个包含了 charstring 内容的字符串值（ Unicode 格式）所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替，其中 xx 等于表示该字符的十六进制数 。 eval(code)检查 JavaScript 代码并执行 isFinite()返回一个 Boolean 值,指明所提供的数字是否是有限的。 isNaN()返回一个 Boolean 值，指明提供的值是否是保留值 NaN （不是数字）。 parseFloat()返回由字符串转

29、换得到的浮点数 parseInt()返回由字符串转换得到的整数 unescape()解码用 escape 方法进行了编码的 String 对象,38,1.8.4 内置类Object的对象介绍,Object类 创建对象：var obj=new Object(value); 注：value为可选项。任意一种 JS基本数据类型（Number、Boolean、或 String）。如果value为一个对象，返回不作改动的该对象。如果value为 null、undefined，或者没有给出，则产生没有内容的对象。 原型对象就属于这类，也就是说原型对象就是由该类创建的。因此该类是其它一切类的基类。js中所有

30、类都继承该类，其它js对象都包含Object对象。我们可以通过ptototype属性来引用这个对象。,39,1.8.5 常用内置类Array的对象介绍,Array数组类 数组对象用来在单独的变量名中存储一系列的值，避免了同时声明很多变量使得程序结构变得复杂，导致难于理解和维护的问题。数组一般用在需要对一批同类的数据逐个进行一样的处理中。但由于JavaScript语言是一个弱类型的语言，JavaScript同样不检查存入数组的每个元素的类型是否一致，也就是说，可以不一样。 创建 var myArr = new Array (); 或者：var myArr = ; 数组中元素的访问:数组名下标 注

31、：下标总是从0开始且必需是一个正整数，最大为32位(二进制位)的无符号数。 属性length 取得数组元素的个数 方法 concat()连接另外一个或多个数组形成一个新的数组. join()将数组中的元素连接成一个字符串，元素与元素之间用逗号分开。,40,1.8.5 常用内置类Array的对象介绍,pop()移除数组中的最后一个元素并返回该元素。 push()将新元素添加到一个数组中作为最后一个元素。 shift()移除数组中的第一个元素并返回该元素。 unshift()将指定的元素插入数组开始位置，作为第一个元素。 slice(start,end)返回一个数组的一段,start和end都是数

32、组的下标，不包括end处的元素。 splice(start, deleteCount, item1,item2,.,itemN) 从数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。 sort()反回一个经过排序的新数组。 reverse()将数组的元素顺序反转并形成一个新的数组。 数组分一维数组，二维数组，三维数组和多维数组，也就是说数组中的元素存放的还是一个数组。 注意：该对象没有事件,41,1.8.5 常用内置类Array的对象介绍,Array 类不应该用于创建关联数组对象，关联数组是不同的数据结构，它们包含命名元素而不是编号元素。您应该使用 Obje

33、ct 类创建关联数组对象。 格式： var myObj=“key1”:value1,”key2”:value2, 访问： myObj.key1 myObjkey1,42,1.8.6 常用内置类Function的对象介绍,Function 类，创建函数对象。 创建 var myFun=new Function(argumentList,body) argumentList可选项。函数接收的参数列表。 body可选项。包含调用该函数时被执行的 JavaScript 代码块的字符串。 属性 arguments为当前执行的 function 对象返回一个arguments对象，arguments对象其

34、实就是一个数组，用来存放该函数的参数。 caller返回一个对函数的引用，该函数调用了当前函数。如果是顶层返回的是null。 调用：myFun(argumentList)在调用函数时，请确保包含了括号和必需的参数。调用函数时不用括号导致返回函数的文本而不是函数执行的结果,43,1.8.7 常用内置类String的对象介绍,String类 创建一个对象：var str=new String() 注：所有的字符串变量都可以看作是一个String对象 属性： length表示字符串中字符个数，包括所有符号。 方法 anchor(“锚点名称”)锚点，如同HTML中一样； 有关字符显示的控制方法，如bi

35、g(),small(),italics()，bold(),blink()IE不支持,fixed(),fontsize(size),strike(),等； 字体颜色fontcolor(“color”)；,44,1.8.7 常用内置类String的对象介绍,上标下标： sup() ,sub() 搜索字符indexOf(“character”)，搜索character第一次出现的位置，如果没有发现，返回-1 ； 返回子串substring(startIndex,endIndex) 反回从startIndex开始处到endIndex-1处的子字符串。 返回子串substr(startIndex,len

36、gth) 返回从startIndex处开始长度为length的子字符串。 lastIndexOf(“字符”)：可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索，如果没有发现，返回-1。 charAt(index)返回指定索引位置处的字符。,45,1.8.7 常用内置类String的对象介绍,charCodeAt(index)返回一个整数，代表指定位置上字符的 Unicode 编码。 fromCharCode()从一些 Unicode 字符值中返回一个字符串，如var test = String.fromCharCode(112, 108, 97, 105, 110)

37、。 replace(s1,s2)将字符串中的s1字符替换成s2 toLowerCase()字符串小写转换 toUpperCase()字符串大写转换 split() 把一个字符串分割成数组。 注意该对象没有事件,46,1.8.8 常用内置类RegExp的对象介绍,正则表达式对象(RegExp) 创建： var re = /pattern/flags var re = new RegExp(“pattern”,flags) 参数 Pattern：是一个正则表达式。 正则表达式:我们在用操作系统的搜索功能查找文件时常用到通配符“*”和“?”，其中“*”可以匹配任何长度的字符，“?”只能匹配一个字符。

38、如我们要查找文件名开头为data扩展名为.txt的文件，可以在搜索框中这样写”data*.txt”，可以说这就是一个简单的正则表达式。它是一种描述字符串匹配的模式。 Flags:模式修正符,47,1.8.8 常用内置类RegExp的对象介绍,例如：/gim 正则表达式就是一组描述字符串排列特征（模式）的一种自定义语法规则。 如果可以使用字符串处理函数完成的任务，就不要使用正则 有一些复杂的操作，只能使用正则完成。 正则表达式可以在很多计算机语言中应用 正则表达式也称为一种模式表达式。 正则表达式就是通过构建具有特定规则的模式，在一个字符串中查找与这个模式相匹配的子字符串。然后再进行相应的操作，

39、例如分割、提取等,48,1.8.8 常用内置类RegExp的对象介绍,例如：/gim 什么是正则表达式 可以看作是一个字符串 由具有特殊意义的字符组成的字符串 具有一定编写规则，是一种模式 看作是一种编程语言 （是用一些特殊字符，按规则编写出的字符串，形成一种模式-正则表达式） 注意： 如果正则表达式，不和函数一起使用，则它就是一个字符串，如果将正则表达式放到某个函数中使用， 才能发挥出正则表达式的作用。,49,1.8.8 常用内置类RegExp的对象介绍,例如：/gim 正则表达式的构成 定界符 原子（普通字符） 所有的打印字符和非打印字符 非打印字符：r n f s S t v cx 使用

40、转义字符“”转义的有特殊意义的字符如 *+?. $ () | 在正则表达式中可以直接使用一些代表范围的原子 dDsSwW “”可以将有特殊意义的字符转成无特殊意义的，也可以将无特殊意义的转成有特殊意义的。 自己定义一个原子表, 可以匹配方括号中的任何一个原子 匹配偶数24680 取反24680,取一段a-zA-Z,50,1.8.8 常用内置类RegExp的对象介绍,例如：/gim 元字符 元字符是一种特殊的字符，是用来修饰原子用的，不可以单独出现。如：*？.等特殊字符。 * : 表示其前的原子可以出现 0次、1次、或多次 0, + : 表示其前的原子可以出现1次 或多次， 不能没有最少要有一个

41、 1, ? ： 表示其前面的原子可以出现0次或1次， 有只能有一次，要么没有 0,1,51,1.8.8 常用内置类RegExp的对象介绍）, : 用于自己定义前面原子出现的次数 m :m表示一个整数， 5表示前面的原子出现5次 m,n :m和n表示一个整数，2,5 m要小于n, 表示前面出现的原子，最少m次，最多n次，包括m和n次 m, :表示前面的原子最少出现m次,最多无限 . : 默认情况下，表示除换行符外任意一个字符 : 直接在一个正则表达式的第一个字符出现，则表示必须以这个正则表达式开始 $ :直接在一个正则表达式的最后一个字符出现，则表达必须以这个正则表达式结束,52,1.8.8 常

42、用内置类RegExp的对象介绍,| : 表示或的关系 , 它的优先级别是最低的， 最后考虑它的功能 b : 表示一个边界 B ： 表示一个非边界 () : 重点 () 作用： 是作为大原子使用 改变优先级,加上括号可以提高优先级别 作为子模式使用, 正则表达式不先对一个字符串匹配一次, 全部匹配作为一个大模式，放到数组的第一个元素中，每个()是一个子模式按顺序放到数组的其它元素中去。 可以取消子模式，就将（）作为大原子或改变优先级使用, 在括号中最前面使用?:就可以取消这个（）表示的子模式 反向引用， 可以在模式中直接将子模式取出来，再作为正则表达式模式的一部分。$0,$1,53,1.8.8

43、常用内置类RegExp的对象介绍,例如：/gim 元字符的运算优先级 () (?:) * + ? $ b 模式修正符 g （全文查找） i （忽略大小写） m （多行查找） 是对整个正则表达式调优使用， 也可以说是对正则表达式功能的扩展，可以组合使用，如gi。有些语言不需要模式修正符，asp就不需要。,54,1.8.8 常用内置类RegExp的对象介绍,创建正则表达式对象后，它被传递给字符串方法，或者字符串被传递给一个正则表达式方法. 创建正则表达式对象 re=new RegExp(pattern,gim) re=/pattern/gim 传递给字符串方法 str.replace(re, re

44、placeText)返回一个被替换后的新字符串 str.match(re)反回一个存放查找结果的数组。 str.search(re)返回与正则表达式查找内容匹配的第一个子字符串的位置。 正则表达式对象方法 pile(pattern, gim)把正则表达式编译为内部格式，从而执行得更快。 re.exec(str)用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。 re.test(str)返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。 注意：该对象没有事件,55,1.8.9 常用内置类Date的对象介绍,Date类，可以创建一个时间对象。 创建对象 var

45、myDate=new Date() Var mydate=new Date(year, month, date, hours, minutes, seconds,ms) 方法： 获取日期和时间 getFullYear() getYear() 年 getMonth()月 getDate()日 getDay()星期 getHours()小时 getMinutes()分钟 getSeconds()秒钟 getMilliseconds() 毫秒 getTime() 时间,56,1.8.9 常用内置类Date的对象介绍,设置日期和时间 setFullYear() setMonth() setDate()

46、 setHours() setMintes() setSeconds() setTime() 注意：该对对象没有事件,57,1.8.10 常用内置类Math的对象介绍,Math 对象是一个固有对象，不能用 new 运算符创建，直接使用就可以，提供基本数学函数和常数。 常数 Math.E 自然对数的底约等于 2.718 Math.LN2 2的自然对数约等于 0.693 Math. LN10 10的自然对数约等于2.302 Math.LOG2E 以2为底，e(自然对数的底)的对数约等于1.442 Math.LOG10E 以10为底，e的对数约等于0.434 Math.PI 圆的周长与其直径的比值，

47、约等于 3.141592653589793 Math.SQRT1_2 2的平方根分之一，约等于0.707 Math.SQRT2 2的平方根，约等于1.414,58,1.8.10 常用内置类Math的对象介绍,方法 Math.abs()返回数的绝对值 Math.ceil()返回不小于参数的最小整数 Math.floor()返回不大于数值参数的最大整数 Math.round()返回与给出的数值表达式最接近的整数，按四舍五入。 Math.max()返回给出的零个或多个数值表达式中较大的值 Math.min()返回给出的零个或多个数值表达式中较小的值 Math.sin()返回数的正弦值 Math.co

48、s()返回数的余弦值 Math.tan()返回数的正切值 Math.asin()返回数的反正弦值 Math.acos()返回数的反余弦值 Math.atan()返回数的反正切值 Math.atan2(x, y)返回由极坐标到 (x, y) 点的角度（以弧度为单位）。,59,1.8.10 常用内置类Math的对象介绍,Math.exp()反回e的幂 Math.log()返回数字的自然对数 Math.pow(base,exponent)返回base的exponent次幂。 Math.sqrt()返回数字的平方根。 Math.random()返回介于 0 和 1 之间的伪随机数，有可能等于0，但总小

49、于1。 注：该对象没有事件,60,1.9.1宿主给出的对象窗口对象window,window对象是窗口或框架对象，且是文档、位置及历史对象的父对象，window 对象是 JavaScript 层级中的顶层对象。这个对象会在一个页面中 或 、 出现时被自动创建，也就是一个浏览器中显示的网页会自动拥有相关的window对象。 属性 frames 确定文档中帧的集合，帧作为实现一个窗口的分隔操作，起到非常有价值的作用。 parent 指明当前窗口或帧的父窗口。 defaultstatus 默认状态，它的值显示在窗口的状态栏中。 status包含文档窗口中帧中的当前信息。 top 最顶层的窗口。 wi

50、ndow指的是当前窗口 self 引用当前窗口 Opener 执行open方法的窗口 returnValue:设置模态对话框返回的值,window.returnValue= key:aaaaa“, key1:”bbbb” ,61,1.9.1宿主给出的对象窗口对象window(续),方法 alert(“输出的内容”); prompt(“提示输入的内容”,默认值) 该方法会反回一个用户输入的内容。 confirm(“确定的内容”)弹出的窗口有“确定”和“取消”两个按钮，当用户点击确定按钮是返回的值为true，当点击取消按钮时反边的值为false open(url,名称”,top=,left=,wi

51、dth=,height=,srollbars =“yes/no”,status=,menubar=,toolbar=, resizable=, fullscreen=, location=”)打开窗口 showModalDialog(url,“”,dialogWidth:600px;dialogHeight:300px;help:no;status:no;scroll:no;center:yes; Resizable:no)打开一个模态窗口 close()关闭窗口 moveBy(x,y) 相对移动 相对于指针位置 moveTo(x,y) 绝对移动 相对于屏幕左上角,62,1.9.1宿主给出的对

52、象窗口对象window(续),resizeTo(x,y)把窗口设成指定宽度和高度。 resizeBy(x,y)相对于当前窗口调整窗口大小。 scrollBy(x,y)滚动相对于当前一个位置 scrollTo(x,y)滚动到指定位置 setInterval(code,delay) 设置周期性执行代码，可以返回一个对象 clearInterval(上个函数返回的对象) 停止周期性执行代码 setTimeout(code,delay) 设置延迟执行代码,63,1.9.2宿主给出的对象屏幕对象screen,screen对象，用来描述屏幕的颜色和显示信息，window对象的子对象。 属性 availHe

53、ight屏幕的实际高度 availWidth屏幕的实际宽度 colorDepth屏幕的色盘深度 height屏幕的区域高度(分辨率的第二个数) width屏幕的区域宽度（分辨率的第一个数） 方法没有 事件没有,64,1.9.3 宿主给出的对象浏览器对象navigator,navigator对象，用来取得浏览器的信息，window对象的子对象。 属性 appCodeName浏览器代码(Mozilla) appName浏览器名称(Microsoft Internet Explorer) appVersion浏览器的版本 language浏览器的语言/(IE不支持) platform 浏览器编译平台

54、 userAgent浏览器用户表头 cookieEnabled浏览器是否支持cookie,65,1.9.3 宿主给出的对象浏览器对象navigator,mimeTypes当前浏览器所支持的MIME类型信息，类似于一个数组 mimeTypes.length长度 mimeTypesi.type名称 mimeTypesi.description描述 mimeTypesi.suffixes扩展 mimeTypesi.enabledP附注 方法：javaEnabled()检测浏览器是否已经启用Java支持功能，启用则返回true否则返回false 事件没有,66,1.9.4 宿主给出

55、的对象文档对象document,document对象，管理一个文档的相关信息并提供操作文档的接口，该对象是window对象的一个子对象。每一个html标记都是文档中的一个元素或叫document对象的子对象。 属性 location 取得文档的地址(可读可写) lastModified取得文档最后修改的时间(只读) title文档的标题(可读可写) URL文档的来源(可读可写) referrer取得上一文档地址(只读) linkColor 设置未访问过的超链接的颜色 vlinkColor 设置访问过的超链接的颜色 alinkColor 设置激活状态的超链接的颜色 bgColor 设置背景的颜色

56、 fgColor 设置文本的颜色,67,1.9.4 宿主给出的对象文档对象document(续),All取得包含所有文档元素的HTML标记的数组。访问document中的各元素： document.alli document.allname document.all.tagstagName 方法 write()向页面中输出内容 getElementById()通过元素的ID号引用网页中相应的元素 getElementsByName()通过元素的名称引用网页中相应元素的名称 getElementsByTagName()通过标记来引用网页中某类元素,68,1.9.4 宿主给出的对象文档对象docu

57、ment(续),HTML标记产生的对象： 可以说每一个HTML标记都一个对象，该对象可以通过id号来获取 var obj=document.getElementById(“ID号”) HTML标记的属性可以通过“obj.属性名”的方式来读写。 样式类用：className 行内样式：obj.style.属性名 div td span p body等大部分块级元素的内容读写obj.innerHTML 滚动条滚动内容的操作。 scrollHeight:获取对象的滚动高度 scrollWidth：获取对象的滚动宽度 scrollTop：设置或获取位于对象最顶端和该对象可见内容的最顶端之间的距离。 s

58、crollLeft:设置或获取位于对象左边界和该对象可见内容的最左端之间的距离。,69,1.9.4 宿主给出的对象文档对象document(续),客户区域的相关属性 clientWidth获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。 clientHeight获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。 clientLeft获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop获取 offsetTop 属性和客户区域的实际顶端之间的距离。,70,1.9.4 宿主给出的对象文档对象document(续),相对父对象的

59、问题 offsetParent获取或设置定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 offsetWidth获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。 offsetHeight获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。 offsetLeft获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 offsetTop获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。,71,1.9.4 宿主给出的对象文档对象document(续),文档节点 文档中的每个成分都是一个节点，是这样规定的。 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 有两种特殊的文档属性可用来访问根节点： document.documentElement可返回存在于 XML 以及 HTML 文档中的文档根节点。 document.body第二个属性是对 HTML 页面的特殊扩展，提供了对 标签的直接访问。,72,1.9.4 宿主给出的对象文档对象document(续),节点属性 obj.parent