在网页中使用JavaScript资料

网页制作与设计陈语林梁建武周诚主编中国水利水电出版社第十一章在网页中使用JavaScriptJavaScript是一种基于对象的脚本语言，可嵌入到HTML网页中。它除了内置了一些常用对象，还可以使用浏览器提供的对象，甚至可以创建新对象。通过采用事件驱动机制，使其能在客户端（浏览器）与用户实现大量的交互、还能创建出惊人的特效。教学重点与难点事件驱动机制对象的概念和使用JavaScript内置对象浏览器对象11.1JavaScript简介JavaScript是一种简洁的、面向对象的、跨平台的描述语言，JavaScript和Java很类似，但并不相同。Java是一种比JavaScript复杂许多的语言，由SUN公司开发；而JavaScript则是简单而小巧的语言，由Netscape公司推出。一、JavaScript的特点JavaScript是一种基于对象(ObjectBased)和事件驱动(EventDriven)并具有安全性能的脚本语言。1.基于对象2.简单性3.安全性4.动态性5.跨平台二、JavaScrip运行和编辑环境三、在Html中嵌入JavaScript脚本在Html中使用JavaScript时，应将JavaScript程序放在script/script标记间。1.在Html中加入已有的JavaScript脚本文件2.考虑不支持JavaScript的浏览器可以把JavaScript源程序放在HTML的注释标记内，从而使不支持JavaScript的浏览器把它当作HTML的注释而忽略JavaScript源程序。11.2JavaScript语言结构一、数据和运算符1．数据：有六种数据类型JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。2．运算符（1）算术运算符（2）比较运算符（3）逻辑运算符（4）字符串运算符（5）位运算符（6）赋值运算符二、语句和程序控制1．一般语句（1）数据声明语句var变量名[=初始值]（2）赋值语句由赋值表达式组成的语句。（3）注释语句//：单行注释，从“//”开始到本行行尾都为注释；/*....*/：多行注释，从“/*”开始到“*/”结束为注释。2．选择结构（1）if...else语句if(条件){执行分支语句1}else{执行分支语句2}（2）switch语句switch(expression){caselabel1:语句串1；caselabel2:语句串2；caselabel3:语句串3；...default:语句串3；}3．循环结构（1）for语句for(循环变量初始化;循环变量结束条件;循环变量自增/减变化){循环体}（2）while语句while(循环条件){循环体}（3）do-while语句do{循环体}while(循环条件);（4）break语句break语句结束当前的各种循环，并执行循环语句的下一条语句。（5）continue语句：continue语句结束当前的循环，跳过本次循环并马上开始下一个循环。4．函数定义语句：function，returnfunction函数名(参数列表){函数功能的实现部分return表达式//return语句将表达式的值返回主调程序}5．书写语句的注意事项（1）多个语句可以放在同一行，只要每个语句之间用分号分开即可。（2）分号是JavaScript的分行符，但不同行之间也可不用分号。（3）较长的JavaScript语句可以由多行文本组成，不需要续行符。（4）语句前可加标号语句确定执行程序的转移点。11.3JavaScript的事件驱动一、事件任何能引起JavaScript代码运行的操作，都称为事件(event)。事件是浏览器响应用户交互操作的一种机制。事件大多数是由WEB用户触发的。普通的事件包括：页面元素上的单击(单选按钮、submit按钮、链接等)。二、事件类型ClickFocusBlurChangeMouseOverSelectSubmit三、如何监测事件具体形式为：onEvent＝“JavaScriptprogram”四、如何调用事件处理器1．函数调用AHREF＝URLonMouseOver＝myFunction(arguments)这是一个链接/A2．直接代码：通过直接在双引号间书写JavaScript代码来实现事件处理器。11.4JavaScript的对象把常用的对象封装起来提供给用户，用户可以使用JavaScript的内置对象、浏览器提供的对象、服务器提供的对象，还可以创建自己的对象扩展JavaScript的功能。一、对象的概念1．对象的基本结构由属性(properties)和方法(methods)构成。2．引用对象的途径（1）引用JavaScript内部对象；（2）引用由浏览器提供的对象；（3）创建新对象。3．对象专有的操作符和语句（1）for...in语句For(属性名in对象名)该语句用于对对象的所有属性进行操作的控制循环，而无需知道属性的个数。（2）with语句withobject{[JavaScript语句]}在该语句体内，任何对变量的引用被认为是这个对象的属性。（3）this关键词。this是对当前的引用，用于将对象指定为当前对象。（4）new运算符创建一个新的对象Newobject=NEWObject(Parameterstable);4．对象属性的引用（1）使用点运算符(.)person.Name=“李刚”（2）以数组形式访问属性person[0]=“李刚”（3）使用属性名person[Name]=“李刚”5．对象方法的引用ObjectName.methods()二、JavaScript内部对象的属性和方法1．常用内部对象（1）string：字符串对象有一个属性length和19个方法。（2）math：算术对象是静态对象，主要有8个属性和18个方法，提供除加、减、乘、除外的数值运算。（3）date：日期及时间对象动态对象，使用时必须用New运算符创建一个实例。2、JavaScript中的系统函数提供与任何对象无关的系统函数，使用这些函数不需创建任何实例，可直接调用。三、浏览器内部对象系统使用浏览器的内部对象系统，可实现与HTML文档进行交互。1．浏览器对象层次及其主要作用浏览器中提供了窗口(Window)对象以及历史(History)对象和位置(Location)对象。2．文档（Document）对象功能及其作用在浏览器中，document文档对象是核心，其主要作用是把HTML页面的基本元素(如links,anchor等)封装起来。3．窗口（Window）对象及输入输出JavaScript输出可通过文档(document)对象的方法来实现，而输入通过窗口(Window)对象来实现。（1）窗口及输入输出（2）窗口对象的事件驱动（3）窗口对象的方法（4）窗口对象中的属性4．表单（Form）对象（1）表单中的基本元素有：Text单行文本输入框、Textarea多行输入框、Select选择元素、Button按钮、CheckBox复选框、Radio单选钮、Password口令输入框、Submit提交按钮等。（2）表单对象的访问通过名称访问表单通过数组来访问表单（3）表单元素Text单行文本输入框TextArea多行输入框Select选择元素Button按钮CheckBox复选框Radio单选钮Hidden隐藏Password口令Submit提交按钮5．框架（Frames）对象（1）浏览器把框架的属性、方法和事件封装起来，作为对象提供给JavaScript使用。框架对象是窗口对象的子对象，其本身也一类窗口，它继承了窗口对象所有的属性和方法。（2）访问框架使用window对象中的Frames属性。parent.frames[Index1].docuement.forms[index2]四、创建新对象JavaScript中创建新对象很简单：首先定义一个对象，然后为该对象创建一个实例。1．对象的定义FunctionObject(属性表)This.prop1=prop1This.prop2=prop2...This.meth=FunctionName1;This.meth=FunctionName2;2．创建对象实例一旦对象定义完成后，就可以为该对象创建了一个实例：NewObject=Newobject();其中Newobjet是新的对象，Object是已经定义好的对象。3．对象方法的使用为对象定义的方法：This.meth=FunctionName对象的方法就是一个函数FunctionName，通过它实现自己的意图。4．JavaScript中的数组（1）使用New创建数组FunctionarrayName(size){This.length=Size;for(varX=;X=size;X++)this[X]=0;Returethis;}（2）内部数组11.5JavaScript实例1.在状态栏显示当前时间2.显示用户进入主页所停留的时间3.飘扬的五星红旗