第11次课-使用JavaScript实现网页特效
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.1 JavaScript概念 JavaScript是由网景公司开发的一种跨平台，面向 对象(objectoriented)的网页脚本语言(它是一种解释性 语言，代码执行不需预编译 )，是目前流行的网页特效 设计语言。 JavaScript代码可直接嵌入HTML文件中，随网页一 起传送到客户端浏览器，然后通过浏览器来解释执行。
1 JavaScript概述
1.3 HTML网页中使用JavaScript的3种方法
方法1：在HTML标记中直接写入JavaScript代码 例： <html> <head> <title>在HTML标记中直接写入JavaScript代码</title> </head> <body> <p onmouseover="alert('欢迎您学习JavaScript!')"> 鼠标移过来</p> </body> </html>
1 JavaScript概述
1.4 JavaScript如何与老的浏览器打交道 那些不支持 JavaScript 的浏览器会把脚本作为 页面的内容来显示。为了防止这种情况发生，我 们可以使用这样的 HTML 注释标签： <script > <!--
……
--> </script>
Leabharlann Baidu
1 JavaScript概述
c、 注释语句 // <单行注释语句> /* <多行注释语句> */ d、return语句
2 JavaScript语法基础 2.4 JavaScript函数声明
JavaScript不区分函数和过程，它只有函数。 (1)．函数的定义 function 函数名([参数1,参数2...]) { 代码块；} (2)．函数的参数：在函数定义时确定参数，然后按 照确定的参数进行传递调用。 (3)．函数返回值：可以使用return语句返回常量、 变量，也可以是表达式等。
• JavaScript中采用弱类型变量，变量可以不做声明 和不做类型说明，而在使用或赋值时确定类型。但 为了形成良好的编程风格，变量应该采取先定义再 使用的方法。JavaScript中变量的定义用关键字var 来实现。例如，定义一个名为id的变量： var id;
2 JavaScript语法基础 2.2 JavaScript变量的定义
1 JavaScript概述
1.3 HTML网页中使用JavaScript的3种方法
方法3：将代码独立存储为以 .js 为扩展名的文件，利用在 head标签之间添加带src属性的script标签将该文件调入 例： <html> <head> <title>将JavaScript代码放入.js文件中</title> <script src=“welcome.js"></script> </head> <body> </body> welcome.js文件内容如下： </html> document.write("欢迎您学习JavaScript!");
（3）do-while语句 do{ 语句块; 计数器表达式; }while (循环条件表达式) （4）label语句 label: 代码块； （5）break语句 break;或break label; （6）continue语句 continue;或continue label;
2 JavaScript语法基础 2.3 JavaScript常用语句结构
网页特效与交互的实现
学习目标
了解JavaScript概念、基本语法及常用特效，行为的 JavaScript 概念、行为的动作（常用动作）和事件（常用事件）以及 Dreamweaver内置的主要行为；熟练掌握如何使用 Dreamweaver Dreamweaver编写JavaScript特效、创建行为；会用 Dreamweaver JavaScript JavaScript和行为制作网页特效。 JavaScript
1.5 JavaScript特效的工作原理－－事件驱动
JavaScript是基于对象（object-based）的语言。 而基于对象的基本特征，就是采用事件驱动（eventdriven）。它是在图形界面的环境下，使得一切输入变 化简单化。通常鼠标或热键的动作我们称之为事件 (Event)，而由鼠标或热键引发的一连串程序的动作，称 之为事件驱动（EventDriver）。而对事件进行处理程序 或函数，我们称之为事件处理程序（Event Handler）。
1 JavaScript概述
1.2 JavaScript可以为我们做什么
(3) JavaScript 可以对事件作出响应 (3) JavaScript 可以将 JavaScript 设置为当某事件发生时才会被执行， JavaScript 例如页面载入完成或者当用户点击某个 HTML 元素时。 HTML (4) JavaScript 可以读写 HTML 元素 (4) JavaScript HTML JavaScript 可以读取及改变 HTML 元素的内容。 JavaScript HTML (5) JavaScript 可被用来验证数据 (5) JavaScript 在数据被提交到服务器之前，JavaScript 可被用来验证 JavaScript 这些数据。 (6) JavaScript 可被用来检测访问者的浏览器 (6) JavaScript JavaScript 可被用来检测访问者的浏览器，并根据所检 JavaScript 测到的浏览器，为这个浏览器载入相应的页面。 (7) JavaScript 可被用来创建 cookies (7) JavaScript JavaScript 可被用来存储和取回位于访问者的计算机中的 JavaScript 信息。
1 JavaScript概述
1.6 JavaScript常见事件
1 JavaScript概述
1.7 第1个JavaScript特效实例
当网页载入时（事件），提示用户输入姓名，并弹出欢迎对 话框（事件处理） <html> <head> <title>第1个JavaScript特效实例</title> 1 JavaScript 特效实例 <script type="text/javascript"> function welcome(){ var input=prompt("请输入姓名", ""); alert("欢迎"+input+"光临本站！"); } </script> </head> <body onload="welcome(); "> </body>
2 JavaScript语法基础 2.6 简单网页特效举例 简单
逐行检查是否填入数据，如未填写，应提示用户填 写，如下图所示。
3 DW行为（略）
Dreamweaver 行为是一种运行在浏览器中的 JavaScript代码，设计者可以将其放置在网页文档 中，以允许浏览者与网页本身进行交互，从而以多 种方式更改页面或引起某些任务的执行。 行为由事件和该事件出发的动作组成，在浮动 面板组的行为浮动面板中，可以先指定一个动作， 然后指定触发的事件，从而将行为添加到网页中。 提示：行为是DW为了帮助我们完成简单的 JavaScript特效的一种辅助技术，因此，很多有实 际应用价值的特效必须需要我们人工来编写代码实 现。我们不能依赖于它，了解一下即可。
•a、条件语句 （1）if语句格式： if (表达式) { 语句块; }
（2）if-else语句
if (表达式) { 语句块1; } else { 语句块2; }
2 JavaScript语法基础 2.3 JavaScript常用语句结构
（3）switch语句 switch (表达式) {case 值1：语句1; break; case 值2：语句2; break; …… case 值n：语句n; break; default：语句; }
1 JavaScript概述
1.3 HTML网页中使用JavaScript的3种方法
方法2：将JavaScript代码放入<script>…</script>标签中 例： <html> <head> <title>将JavaScript代码放入script标签中</title> </head> <body> <script type="text/javascript"> alert('欢迎您学习JavaScript!'); </script> </body> </html>
2 JavaScript语法基础
2.1 JavaScript的常用数据类型
类型 字符串类型 数值类型 布尔类型 空类型（null） 对象类型 说明 用引号引起的一串字符 整数或者实数 逻辑值，有真或假两种 代表一个空值 代表JavaScript中的一些对象
2 JavaScript语法基础 2.2 JavaScript变量的定义
2 JavaScript语法基础 2.3 JavaScript常用语句结构
b、循环语句 （1）for语句 for (初始表达式；循环条件表达式；计数器表达式) { 语句块；} （2）while语句 while (循环条件表达式) { 语句块； 计数器表达式； }
2 JavaScript语法基础 2.3 JavaScript常用语句结构
• 变量的命名要遵循如下的规则： • （1）变量名不能与保留字冲突。 • （2）变量名必须以字母或者下划线（_）开头，不 能用数字或者其他非字母字符作为变量名开头。 • （3）变量名中不能包含空格。 • （4）JavaScript是区分大小写的，所以给变量命 名时要考虑大小写的问题。
2 JavaScript语法基础 2.3 JavaScript常用语句结构
2 JavaScript语法基础 2.5 window对象常用的内置函数
（3）prompt()函数 弹出一个输入对话框，等待用户输入信息。 参数：第一个参数，显示提示输入框的信息。第二个参数 ，用于显示输入框的默认值。 返回值：用户输入的值。 var str = window.prompt("请输入密码",""); alert(str); （4）close()函数 关闭窗口 （5）eval()函数 可以把一个字符串当作一个JavaScript表达式一样去执行
网页特效与交互的实现
本节重点
uJavaScript概念、基本语法及常用特效 JavaScript u行为的概念、行为的常用动作和常用事件 u使用JavaScript制作网页特效（难点） JavaScript u使用Dreamweaver内置行为制作网页特效（难点） Dreamweaver
1 JavaScript概述
2 JavaScript语法基础 2.5 window对象常用的内置函数
Window对象是JavaScript的内置对象，用于代表一个网页窗， 使用频率十分高。以下列出它的几个常用函数： （1）alert()函数 弹出一个消息对话框，并且alert消息对话框通常用于一些对 用户的提示信息。参数：提示信息 （2）confirm()函数 弹出一个确认对话框，包括OK、Cancel按钮。 参数：确认提示信息 返回值：布尔值，true或者false var flag = confirm("确认要删除此条记录吗？"); if(!flag) { return; }
注意：Java 和 JavaScript 是相同的吗？－－不相同 Java是一种功能强大的高级编程语言。 JavaScript是给浏览器解释执行的脚本语言。
1 JavaScript概述
1.2 JavaScript可以为我们做什么
（1）JavaScript 为 HTML 设计师提供了一种编程工具 JavaScript HTML HTML 创作者往往都不是程序员，但是 JavaScript HTML JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个 人都有能力将短小的代码片断放入他们的 HTML 页面 HTML 当中。 (2) JavaScript 可以将动态的文本放入 HTML 页面 (2) JavaScript HTML 类似于这样的一段 JavaScript 声明可以将一段可变 JavaScript 的文本放入 HTML 页面：document.write("<h1>" + HTML document.write name + "</h1>") name + "</h1>")
1 JavaScript概述
1.3 HTML网页中使用JavaScript的3种方法
方法1：在HTML标记中直接写入JavaScript代码 例： <html> <head> <title>在HTML标记中直接写入JavaScript代码</title> </head> <body> <p onmouseover="alert('欢迎您学习JavaScript!')"> 鼠标移过来</p> </body> </html>
1 JavaScript概述
1.4 JavaScript如何与老的浏览器打交道 那些不支持 JavaScript 的浏览器会把脚本作为 页面的内容来显示。为了防止这种情况发生，我 们可以使用这样的 HTML 注释标签： <script > <!--
……
--> </script>
Leabharlann Baidu
1 JavaScript概述
c、 注释语句 // <单行注释语句> /* <多行注释语句> */ d、return语句
2 JavaScript语法基础 2.4 JavaScript函数声明
JavaScript不区分函数和过程，它只有函数。 (1)．函数的定义 function 函数名([参数1,参数2...]) { 代码块；} (2)．函数的参数：在函数定义时确定参数，然后按 照确定的参数进行传递调用。 (3)．函数返回值：可以使用return语句返回常量、 变量，也可以是表达式等。
• JavaScript中采用弱类型变量，变量可以不做声明 和不做类型说明，而在使用或赋值时确定类型。但 为了形成良好的编程风格，变量应该采取先定义再 使用的方法。JavaScript中变量的定义用关键字var 来实现。例如，定义一个名为id的变量： var id;
2 JavaScript语法基础 2.2 JavaScript变量的定义
1 JavaScript概述
1.3 HTML网页中使用JavaScript的3种方法
方法3：将代码独立存储为以 .js 为扩展名的文件，利用在 head标签之间添加带src属性的script标签将该文件调入 例： <html> <head> <title>将JavaScript代码放入.js文件中</title> <script src=“welcome.js"></script> </head> <body> </body> welcome.js文件内容如下： </html> document.write("欢迎您学习JavaScript!");
（3）do-while语句 do{ 语句块; 计数器表达式; }while (循环条件表达式) （4）label语句 label: 代码块； （5）break语句 break;或break label; （6）continue语句 continue;或continue label;
2 JavaScript语法基础 2.3 JavaScript常用语句结构
网页特效与交互的实现
学习目标
了解JavaScript概念、基本语法及常用特效，行为的 JavaScript 概念、行为的动作（常用动作）和事件（常用事件）以及 Dreamweaver内置的主要行为；熟练掌握如何使用 Dreamweaver Dreamweaver编写JavaScript特效、创建行为；会用 Dreamweaver JavaScript JavaScript和行为制作网页特效。 JavaScript
1.5 JavaScript特效的工作原理－－事件驱动
JavaScript是基于对象（object-based）的语言。 而基于对象的基本特征，就是采用事件驱动（eventdriven）。它是在图形界面的环境下，使得一切输入变 化简单化。通常鼠标或热键的动作我们称之为事件 (Event)，而由鼠标或热键引发的一连串程序的动作，称 之为事件驱动（EventDriver）。而对事件进行处理程序 或函数，我们称之为事件处理程序（Event Handler）。
1 JavaScript概述
1.2 JavaScript可以为我们做什么
(3) JavaScript 可以对事件作出响应 (3) JavaScript 可以将 JavaScript 设置为当某事件发生时才会被执行， JavaScript 例如页面载入完成或者当用户点击某个 HTML 元素时。 HTML (4) JavaScript 可以读写 HTML 元素 (4) JavaScript HTML JavaScript 可以读取及改变 HTML 元素的内容。 JavaScript HTML (5) JavaScript 可被用来验证数据 (5) JavaScript 在数据被提交到服务器之前，JavaScript 可被用来验证 JavaScript 这些数据。 (6) JavaScript 可被用来检测访问者的浏览器 (6) JavaScript JavaScript 可被用来检测访问者的浏览器，并根据所检 JavaScript 测到的浏览器，为这个浏览器载入相应的页面。 (7) JavaScript 可被用来创建 cookies (7) JavaScript JavaScript 可被用来存储和取回位于访问者的计算机中的 JavaScript 信息。
1 JavaScript概述
1.6 JavaScript常见事件
1 JavaScript概述
1.7 第1个JavaScript特效实例
当网页载入时（事件），提示用户输入姓名，并弹出欢迎对 话框（事件处理） <html> <head> <title>第1个JavaScript特效实例</title> 1 JavaScript 特效实例 <script type="text/javascript"> function welcome(){ var input=prompt("请输入姓名", ""); alert("欢迎"+input+"光临本站！"); } </script> </head> <body onload="welcome(); "> </body>
2 JavaScript语法基础 2.6 简单网页特效举例 简单
逐行检查是否填入数据，如未填写，应提示用户填 写，如下图所示。
3 DW行为（略）
Dreamweaver 行为是一种运行在浏览器中的 JavaScript代码，设计者可以将其放置在网页文档 中，以允许浏览者与网页本身进行交互，从而以多 种方式更改页面或引起某些任务的执行。 行为由事件和该事件出发的动作组成，在浮动 面板组的行为浮动面板中，可以先指定一个动作， 然后指定触发的事件，从而将行为添加到网页中。 提示：行为是DW为了帮助我们完成简单的 JavaScript特效的一种辅助技术，因此，很多有实 际应用价值的特效必须需要我们人工来编写代码实 现。我们不能依赖于它，了解一下即可。
•a、条件语句 （1）if语句格式： if (表达式) { 语句块; }
（2）if-else语句
if (表达式) { 语句块1; } else { 语句块2; }
2 JavaScript语法基础 2.3 JavaScript常用语句结构
（3）switch语句 switch (表达式) {case 值1：语句1; break; case 值2：语句2; break; …… case 值n：语句n; break; default：语句; }
1 JavaScript概述
1.3 HTML网页中使用JavaScript的3种方法
方法2：将JavaScript代码放入<script>…</script>标签中 例： <html> <head> <title>将JavaScript代码放入script标签中</title> </head> <body> <script type="text/javascript"> alert('欢迎您学习JavaScript!'); </script> </body> </html>
2 JavaScript语法基础
2.1 JavaScript的常用数据类型
类型 字符串类型 数值类型 布尔类型 空类型（null） 对象类型 说明 用引号引起的一串字符 整数或者实数 逻辑值，有真或假两种 代表一个空值 代表JavaScript中的一些对象
2 JavaScript语法基础 2.2 JavaScript变量的定义
2 JavaScript语法基础 2.3 JavaScript常用语句结构
b、循环语句 （1）for语句 for (初始表达式；循环条件表达式；计数器表达式) { 语句块；} （2）while语句 while (循环条件表达式) { 语句块； 计数器表达式； }
2 JavaScript语法基础 2.3 JavaScript常用语句结构
• 变量的命名要遵循如下的规则： • （1）变量名不能与保留字冲突。 • （2）变量名必须以字母或者下划线（_）开头，不 能用数字或者其他非字母字符作为变量名开头。 • （3）变量名中不能包含空格。 • （4）JavaScript是区分大小写的，所以给变量命 名时要考虑大小写的问题。
2 JavaScript语法基础 2.3 JavaScript常用语句结构
2 JavaScript语法基础 2.5 window对象常用的内置函数
（3）prompt()函数 弹出一个输入对话框，等待用户输入信息。 参数：第一个参数，显示提示输入框的信息。第二个参数 ，用于显示输入框的默认值。 返回值：用户输入的值。 var str = window.prompt("请输入密码",""); alert(str); （4）close()函数 关闭窗口 （5）eval()函数 可以把一个字符串当作一个JavaScript表达式一样去执行
网页特效与交互的实现
本节重点
uJavaScript概念、基本语法及常用特效 JavaScript u行为的概念、行为的常用动作和常用事件 u使用JavaScript制作网页特效（难点） JavaScript u使用Dreamweaver内置行为制作网页特效（难点） Dreamweaver
1 JavaScript概述
2 JavaScript语法基础 2.5 window对象常用的内置函数
Window对象是JavaScript的内置对象，用于代表一个网页窗， 使用频率十分高。以下列出它的几个常用函数： （1）alert()函数 弹出一个消息对话框，并且alert消息对话框通常用于一些对 用户的提示信息。参数：提示信息 （2）confirm()函数 弹出一个确认对话框，包括OK、Cancel按钮。 参数：确认提示信息 返回值：布尔值，true或者false var flag = confirm("确认要删除此条记录吗？"); if(!flag) { return; }
注意：Java 和 JavaScript 是相同的吗？－－不相同 Java是一种功能强大的高级编程语言。 JavaScript是给浏览器解释执行的脚本语言。
1 JavaScript概述
1.2 JavaScript可以为我们做什么
（1）JavaScript 为 HTML 设计师提供了一种编程工具 JavaScript HTML HTML 创作者往往都不是程序员，但是 JavaScript HTML JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个 人都有能力将短小的代码片断放入他们的 HTML 页面 HTML 当中。 (2) JavaScript 可以将动态的文本放入 HTML 页面 (2) JavaScript HTML 类似于这样的一段 JavaScript 声明可以将一段可变 JavaScript 的文本放入 HTML 页面：document.write("<h1>" + HTML document.write name + "</h1>") name + "</h1>")