《劳动出版社精品课件 《网页制作高级特效》 A063371模块二JavaScript高级特效》由会员分享，可在线阅读，更多相关《劳动出版社精品课件 《网页制作高级特效》 A063371模块二JavaScript高级特效（76页珍藏版）》请在金锄头文库上搜索。
1、模块二 JavaScript 高级特效,网页制作高级特效,3,1,课题 JavaScript 语言基础,2,课题 JavaScript 对象化编程,课题 制作表单验证类特效,目录,4,5,6,7,8,课题 制作层切换和层提示特效,课题 制作菜单类特效,课题 制作广告类特效,课题 制作滚动类和日期类特效,课题 制作网页辅助类特效,课题 JavaScript 语言基础,学习目标 . 了解 JavaScript 的概念，能编写简单的 JavaScript 程序。 . 了解常量、变量、函数、运算符和优先级等概念，能正确运用常量、变量、函数和运算符，能按照优先级正确书写表达式。 . 了解常用内部函数的用
2、法，能根据需要自定义函数。 . 了解数组的概念，能正确定义和引用数组。 . 掌握分支语句和循环语句的使用方法，能进行顺序结构、分支结构和循环结构程序的设计。,一、JavaScript 简介 JavaScript 是一种基于对象和事件驱动的客户端脚本语言，是目前 Web 应用程序开发者使用最为广泛的客户端脚本编程语言。 JavaScript 能通过 DOM ( Document Object Model，文档结构模型) 及自身提供的对象、操作方法实现所需的功能。 JavaScript 采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。,课题 JavaScript 语
3、言基础,二、第一个 JavaScript 程序 计算机程序是指一组指示计算机执行动作或做出判断的指令，通常用某种程序设计语言编写。一般情况下，计算机程序要编译成机器语言程序后再运行。还有一种未经编译就可运行的程序，通常称为 “ 脚本程序”。JavaScript 属于客户端脚本语言，VBScript ( 主要用于ASP) 属于服务器端脚本语言。,课题 JavaScript 语言基础,客户端脚本和服务器端脚本比较,编写 JavaScript 程序可选择普通的文本编辑器或集成开发环境。Dreamweaver 集成了JavaScript 开发环境，提供了强大的 JavaScript 支持。 JavaS
4、cript 需要嵌入 HTML 中，即 JavaScript 的存在依赖于 HTML 文档。 在 HTML 中，使用 标记引入 JavaScript ，使用 结束 JavaScript ，和 之间是 JavaScript 脚本。 可以放在 和 之间，也可以放在 和 之间。二者的区别是: ) head 部分的脚本: 需调用才执行的脚本或事件触发执行的脚本放在 HTML 的 head部分。当把脚本放在 head 部分时，可以保证脚本在任何调用之前被加载。,课题 JavaScript 语言基础,) body 部分的脚本: 当页面被加载时立即执行的脚本放在 HTML 的 body 部分。放在 body
5、 部分的脚本通常用来生成页面的内容。 标记有一个 language 属性，用于指明使用的语言，其值可以为 “JavaScript”“VBScript” 或者 “JScript”。 标记还有一个 type 属性，用于指明文本类型，其值为 “text / javascript”。,课题 JavaScript 语言基础,和 VBScript 不区分大小写不同，JavaScript 严格区分大小写。 在编写 JavaScript 脚本语句时，用 “；” 作为当前语句的结束符。语句分行后，作为语句结束符的 “；” 可省略。也可将多个语句写在同一行中，若将多个语句写在同一行中，则语句之间的 “；” 不能省
6、略。 JavaScript 中的注释采用和 Java 中类似的方式，单行注释前加 “ / / ”，多行注释放在 “ / ” 和 “ / ” 之间。,课题 JavaScript 语言基础,三、常量和变量 . 常量 常量是程序执行过程中其值保持不变的量，有数值常量和字符串常量两种。在 VBScript中，字符串常量只能使用双引号作为定界符。与 VBScript 不同，在 JavaScript 中不仅允许使用双引号和单引号作为定界符，而且允许双引号和单引号相互嵌套。,课题 JavaScript 语言基础,. 变量 变量是程序执行过程中可能发生变化的量。使用 var 关键字对变量进行显式声明，不能使用
7、 Var 和 VAR，JavaScript 对关键字的大小写敏感 (v 和 V 是不同的字符)。声明变量的语法格式如下: var 变量 值; 变量可以在声明的同时赋值，也可以在声明后使用过程中再赋值。赋值语句的语法格式如下: 变量 表达式;,课题 JavaScript 语言基础,变量的有效范围称为变量的作用域。JavaScript 有局部变量和全局变量两种变量。局部变量是指只能在本变量声明的函数内部调用的变量。全局变量是指在整个代码中都可以调用的变量。 JavaScript 中也可以隐式地使用变量，即不用声明，直接使用。注意，JavaScript 总是把隐式声明的变量当成全局变量来使用。,课题
8、 JavaScript 语言基础,四、函数 函数是指实现某一特定功能的小程序段，JavaScript 除了提供大量实用的内部函数外，还允许用户自定义函数。 . 内部函数 . 自定义函数 使用自定义函数分为两个步骤: 函数定义和函数调用。一般情况下在 和 之间定义函数，在 和 之间调用函数。,课题 JavaScript 语言基础,五、运算符和优先级 表达式是用运算符把常量、变量和函数连接起来的式子。一个表达式可以只包含一个常量或一个变量。运算符可以是四则运算符、关系运算符、逻辑运算符、复合运算符等。 在计算表达式的值时，按照运算符的优先级从高到低依次进行计算。优先级相同时，按照从左到右的顺序进行
9、计算。 使用( )可以改变计算的顺序。,课题 JavaScript 语言基础,六、数组 数组是相同类型的变量按顺序组成的一种复合数据类型，这些相同类型的变量称为数组元素。数组通过数组名加索引来使用数组的元素。 . 定义数组 var 变量 new Array (元素1，元素2， ，元素 n )； . 引用数组 数组名索引 . 遍历数组 在使用数组时，经常需要依次访问数组中的每个元素，这种操作称为数组的遍历。JavaScript 中数组遍历最简单的办法是使用 for 循环并用数组长度 “ 数组名 . length” 作为 for 循环最大限度值。除此之外也可以使用 for in 循环。,课题 Ja
10、vaScript 语言基础,七、语句 . 输入与输出语句 () 输入 () 输出 使用 document . write ( ) 方法在浏览器窗口输出，使用 alert ( ) 方法在对话框中输出。 . 选择结构语句 选择结构是按照给定的逻辑条件来决定执行的顺序，有单向选择、双向选择和多向选择之分，但是程序在执行过程中都只是执行其中的一条分支。选择语句分为 if 条件语句和 switch 语句。,课题 JavaScript 语言基础,() if 条件语句 if (条件语句) 执行语句; ,课题 JavaScript 语言基础,) if else 语句 if (条件) 语句1; else 语句2
11、; ) if else if else语句 if (条件1),课题 JavaScript 语言基础, 语句1; else if(条件2) 语句2; else 语句3; ,课题 JavaScript 语言基础,() switch 语句 在 JavaScript 中，switch 语句也是选择结构中很常用的语句，功能与 if 语句类似。switch语句用于将一个表达式同多个值进行比较，并根据比较结果选择执行语句。语法格式如下: switch(表达式) case 值1:语句组1;break; case 值2:语句组2;break; case 值 n:语句组 n;break; default:语句组
12、n 1; ,课题 JavaScript 语言基础,. 循环结构语句 循环结构可以实现将某一段代码多次重复执行，在 JavaScript 中可以使用 for 循环、for in 循环、while 循环和 do while 循环四种。 () for 循环 for 循环语句是最常用的循环语句，一般用在循环次数已知的情况下。 for (初始化表达式;循环条件;操作表达式) 循环体; ,课题 JavaScript 语言基础,() for in循环 for in 循环用于遍历数组或者对象的属性，即对数组或者对象的属性进行循环操作。 for (变量 in 对象) 循环体; ,课题 JavaScript 语言
13、基础,() while 循环 while 循环在 “循环条件” 的值为真 (true) 时执行 “循环体”，否则结束循环。 while (循环条件) 循环体; ,课题 JavaScript 语言基础,() do while 循环 do while 循环与 while 循环类似，不同的是 do while 循环在判断 “循环条件” 的值之前先执行 “循环体”，也就是说至少会执行一次 “循环体”。 do 循环体; while (循环条件);,课题 JavaScript 语言基础,课题 JavaScript 对象化编程,学习目标 . 了解浏览器对象模型和文档对象模型，掌握 JavaScript 中常
14、用的对象和事件。 . 能利用 JavaScript 中对象的属性、事件和方法，制作数字时钟特效、动态改变文本特效、打开新窗口特效、状态栏打印机特效和在状态栏设置日期时间特效。,相关知识 JavaScript是基于对象 (Object Based) 的编程语言。基于对象与面向对象 (Object Oriented) 不同，它不提供抽象、继承、重载等有关面向对象语言的功能。基于对象的编程语言仍具有一些面向对象的基本特征，可以根据需要创建自己的对象，进一步扩大语言的应用范围，编写出功能强大的 Web 文档。,课题 JavaScript 对象化编程,一、BOM 和 DOM 结构 JavaScript
15、以 BOM 和 DOM 中定义的对象模型及操作方法为基础，支持 BOM 和 DOM 提供的对象模型，根据其对象模型层次结构访问目标对象的属性并对对象施加相应的操作。 BOM 是 Browser Odject Model 的缩写，即浏览器对象模型。BOM 提供独立于页面内容而与浏览器窗口进行交互的对象。 DOM 是 Document Odject Model 的缩写，即文档对象模型。DOM 是 W3C 制定的标准。,课题 JavaScript 对象化编程,BOM 中定义了六种重要的对象: () window 对象表示浏览器中打开的窗口。 () navigator 对象包含了有关浏览器的信息。 () location 对象包含了浏览器当前的 URL 信息。 () document 对象表示浏览器中加载页面的文档对象。,课题 JavaScript 对象化编程,BOM 和 DOM 结构,课题 JavaScript 对象化编程,() history 对象包含了浏览器访问网页的历史信息。 () screen 对象包含了客户端显示屏幕的信息。 浏览器会为每一个网页自动创建 window 对象、navigater 对象、location 对象、document 对象、history 对象和 screen 对象。win
