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