Javascript教案

第1章JavaScript概述1995年Netscape公司和Sun公司联合开发出JavaScript脚本语言，并在其NetscapeNavigator2中实现了JavaScript脚本规范的第一个版本即JavaScript1.0版，不久就显示了其强大的生机和发展潜力。由于当时NetscapeNavigator主宰着Web浏览器市场，而Microsoft的IE则扮演追赶者的角色，为了跟上Netscape步伐，Microsoft在其InternetExplorer3中以JScript为名发布了一个JavaScript的克隆版本JScript1.0。1997年，为了避免无序竞争，同时解决JavaScript几个版本语法、特性等方面的混乱，JavaScript1.1作为草案提交给ECMA（欧洲计算机厂商协会），并由Netscape、Sun、Microsoft、Borland及其它一些对脚本语言比较感兴趣的公司组成的TC39（第39技术委员会：以下简称TC39）协商并推出了ECMA-262规范版本。JavaScript有何特点JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，主要用于创建具有交互性较强的动态页面。主要具有如下特点：基于对象：JavaScript是基于对象的脚本编程语言，能通过DOM（文档结构模型）及自身提供的对象及操作方法来实现所需的功能。事件驱动：JavaScript采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗事件等，并执行指定的操作。解释性语言：JavaScript是一种解释性脚本语言，无需专门编译器编译，而是在嵌入JavaScript脚本的HTML文档载入时被浏览器逐行地解释，大量节省客户端与服务器端进行数据交互的时间。实时性：JavaScript事件处理是实时的，无须经服务器就可以直接对客户端的事件做出响应，并用处理结果实时更新目标页面。动态性：JavaScript提供简单高效的语言流程，灵活处理对象的各种方法和属性，同时及时响应文档页面事件，实现页面的交互性和动态性。跨平台：JavaScript脚本的正确运行依赖于浏览器，而与具体的操作系统无关。只要客户端装有支持JavaScript脚本的浏览器，JavaScript脚本运行结果就能正确反映在客户端浏览器平台上。引入JavaScript脚本代码到HTML文档中1．通过script与/script标记对引入除了script与/script标记对之间的内容外，都是最基本的HTML代码，可见script和/script标记对将JavaScript脚本代码封装并嵌入到HTML文档中。注意：所谓标记对，就是必须成对出现的标记，否则其间的脚本代码不能被浏览器解释执行。浏览器载入嵌有JavaScript脚本的HTML文档时，能自动识别JavaScript脚本代码起始标记script和结束标记/script，并将其间的代码按照解释JavaScript脚本代码的方法加以解释，然后将解释结果返回HTML文档并在浏览器窗口显示。下面重点介绍script标记的几个属性：language属性：用于指定封装代码的脚本语言及版本，有的浏览器还支持perl、VBScript等，所有脚本浏览器都支持JavaScript(当然，非常老的版本除外)，同时language属性默认值也为JavaScript；type属性：指定script和/script标记对之间插入的脚本代码类型；src属性：用于将外部的脚本文件内容嵌入到当前文档中，一般在较新版本的浏览器中使用，使用JavaScript脚本编写的外部脚本文件必须使用.js为扩展名，同时在script和/script标记对中不包含任何内容，如下：scriptlanguage=JavaScript1.2type=text/javascriptsrc=Sample.js/script2．通过script标记的src属性引入3．通过JavaScript伪URL引入在多数支持JavaScript脚本的浏览器中，可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。伪URL地址的一般格式如下：JavaScript:alert(HelloWorld!)第2章JavaScript语言基础JavaScript脚本语言作为一门功能强大、使用范围较广的程序语言，其语言基础包括数类型、变量、运算符、函数以及核心语句等内容。2.1编程准备2.1.1脚本执行顺序JavaScript脚本解释器将按照程序代码出现的顺序来解释程序语句，因此可以将函数定义和变量声明放在head和/head之间，此时与函数体相关的操作不会被立即执行。2.1.2大小写敏感JavaScript脚本程序对大小写敏感，相同的字母，大小写不同，代表的意义也不同，如变量名name、Name和NAME代表三个不同的变量名。在JavaScript脚本程序中，变量名、函数名、运算符、关键字、对象属性等都是对大小写敏感的。同时，所有的关键字、内建函数以及对象属性等的大小写都是固定的，甚至混合大小写，因此在编写JavaScript脚本程序时，要确保输入正确，否则不能达到编写程序的目的。2.1.3分号在编写脚本语句时，用分号作为当前语句的结束符，例如：varx=25;vary=16;varz=x+y;当然，也可将多个语句写在同一行中，例如：varx=25;vary=16;varz=x+y;值得注意的是，为养成良好的编程习惯，尽量不要将多个语句写在一行中，避免降低脚本代码的可读性。2.1.4块在定义函数时，使用大括号“{}”将函数体封装起来，例如：functionmuti(m,n){varresult=m*n;returnresult;}在使用循环语句时，使用大括号“{}”将循环体封装起来，例如：if(age18){alert(对不起，您的年龄小于18岁，您无权浏览此网页);}从本质上讲，使用大括号“{}”将某段代码封装起来后，构成“块”的概念，JavaScript脚本代码中的块，即为实现特定功能的多句（也可为空或一句）脚本代码构成的整体。2.5基本数据类型变量包含多种类型，JavaScript脚本语言支持的基本数据类型包括Number型、String型、Boolean型、Undefined型、Null型和Function型，分别对应于不同的存储空间，汇总如表2.2所示：表2.2六种基本数据类型类型举例简要说明Number45,-34,32.13,3.7E-2数值型数据Stringname,'Tom'字符型数据，需加双引号或单引号Booleantrue,flase布尔型数据，不加引号，表示逻辑真或假UndefinedNullnull表示空值Function表示函数Number型Number型数据即为数值型数据，包括整数型和浮点型，整数型数制可以使用十进制、八进制以及十六进制标识，而浮点型为包含小数点的实数，且可用科学计数法来表示。一般来说，Number型数据为不在括号内的数字，例如：varmyDataA=8;varmyDataB=6.3;上述代码分别定义值为整数8的Number型变量myDataA和值为浮点数6.3的Number型变量myDataB。String型String型数据表示字符型数据。JavaScript不区分单个字符和字符串，任何字符或字符串都可以用双引号或单引号引起来。例如下列语句中定义的String型变量nameA和nameB包含相同的内容：varnameA=Tom;varnameB='Tom';Boolean型Boolean型数据表示的是布尔型数据，取值为ture或false，分别表示逻辑真和假，且任何时刻都只能使用两种状态中的一种，不能同时出现。例如下列语句分别定义Boolean变量bChooseA和bChooseB，并分别赋予初值true和false：varbChooseA=true;varbChooseB=false;null和undefinednull表示空值，它表示对象为空。typeof(null)返回object，说明是个对象类型undefined不同，表示无值，typeof(null)返回undefined组合类型JavaScript脚本支持的组合类型比基本数据类型更为复杂，包括数组Array型和对象Object型。Array型Array型即为数组，数组是包含基本和组合数据的序列。在JavaScript脚本语言中，每一种数据类型对应一种对象，数组本质上即为Array对象。考察如下定义：varscore=[56,34,23,76,45];上述语句创建数组score，中括号“[]”内的成员为数组元素。由于JavaScript是弱类型语言，因此不要求目标数组中各元素的数据类型均相同，例如：varscore=[56,34,”23”,76,”45”];由于数组本质上为Array对象，则可用运算符new来创建新的数组，例如：varscore=newArray(56,34,”23”,76,”45”);访问数组中特定元素可通过该元素的索引位置index来实现，如下列语句声明变量m返回数组score中第四个元素：varm=score[3];第3章JavaScript事件处理事件定义了用户与页面交互时产生的各种操作，例如单击超链接或按钮时，产生一个单击（click）事件，click事件触发标记中onClick事件处理。事件不仅在用户交互过程中产生，浏览器自身的一些动作也可以产生事件，例如当载入一个页面时，发生load事件，卸载一个页面时，会发生unload事件。事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。而对事件进行处理的程序或函数，称为事件处理程序（EventHandler）。事件名称属性当以下情况发生时，出现此事件支持标记onabort图像加载被中断imgonblur元素失去焦点buttoninputlabelselecttextareabodyonchange用户改变域的内容inputlabelselecttextareaonclick鼠标点击某个对象大多数ondblclick鼠标双击某个对象大多数onerror当加载文档或图像时发生某个错误imgonfocus元素获得焦点buttoninputlabelselecttextareabodyonkeydown某个键盘的键被按下表单元素，bodyonkeypress某个键盘的键被按下并释放表单元素，bodyonkeyup某个键盘的键被松开表单元素，bodyonload某个页面或图像被完成加载bodyframesetimgiframeobjectonmousedown某个鼠标按键被按下大多数onmousemove鼠标移动时大多数onmouseout鼠标从某元素移开大多数onmouseover鼠标被移到某元素之上大多数onmouseup某个鼠标按键被松开大多数onreset重置按钮被点击formonresize窗口或框架被调整尺寸bodyframesetonselect文本被选定inputtextareaonsubmit提交按钮被点击formonunload用户退出页面bodyframeset事件处理模型基本事件模型：也称0级DOM，它通过简单的属性赋值的方法将事件处理函数绑定到指定元素上。该模型比较简单，但功能较小。标准事件模型：由W3C制定，包括DOM1.0、DOM2.0和DOM3.0三个不同版本。目前大部分浏览器都能够支持DOM1.0，IE部分支持二级DOM。基本事件模型绑定事件法1，静态绑定。把JS脚本代码作为属