1、,电子商务网站设计与管理,教学单元25：JavaScript技术,主要教学环节,五、知识讲解与操作示范,一、课程引导,二、明确知识技能目标,三、展示网页浏览效果,四、分析操作任务,六、课堂模仿实践,七、疑难解析,八、归纳总结,九、布置习题,（一）课程引导,网页是用HTML语言写的，HTML语言定义了网页的结构和网页元素，能够实现网页普通格式要求。CSS样式表弥补了HTML对网页格式化功能的不足，对网页布局和网页元素的控制功能更加强大，能够实现网页中特殊格式的要求。本章所学习的JavaScript主要实现实时的、动态的、可交互性的功能，对客户操作进行响应，显示各种自定义内容。HTML、CSS、J
2、avaScript三者共同构成了丰富多彩的静态网页。,（二）明确知识技能目标,（1）掌握JavaScript的常量、变量、运算符和表式。（2）掌握JavaScript的语句、函数。（3）了解JavaScript的事件。,（三）分析操作任务,（1）在“长沙世界之窗”站点下创建文件夹“14JS技术”。（2）在文件夹“14JS技术”中创建网页14_1.html，在该网页中显示当前日期与时间，并且在每天不同时间段显示不同的问候语，还具有动态显示标题栏信息的功能。（3）在文件夹“14JS技术”中创建网页14_2.html，该网页打开时会自动弹出一个小窗口，网页中图像禁止下载。,（四）知识讲解与操作示范,
3、13.1JavaScript概述 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言一起实现网页中的动态交互功能。,（四）知识讲解与操作示范(2),13.2JavaScript的应用举例 利用JavaScript编写代码，在网页中显示当前日期 和时间。 具体实现过程如下：（1） 在“长沙世界之窗”站点下创建文件夹“14JS技术”，在“文件”面板中，将本站点根目录下“02文本操作”文件夹中的网页文档“02.html”拷贝到文件夹“14JS技术”中，且重命名为“14_1.html”。（2） 打开网页文档14_1.html 双击该文档名称打开
4、该网页，在“文档”工具栏中【代码】按钮，切换到代码视图的编辑窗口。（3） 观察代码窗口中的显示日期的代码：,（四）知识讲解与操作示范(2),13.2JavaScript的应用举例 （4）在同一位置删除原有的代码，重新输入代 码，显示当前日期和时间， （5）保存网页。,（四）知识讲解与操作示范,13.3JavaScript的基本语法13.3.1JavaScript脚本的语法格式 在网页中最常用的一种插入脚本程序的方式是使用script标记符，把脚本标记符置于网页上的HEAD部分或BODY部分，然后在其中加入脚本程序。一般语法形式如下： 通过标识指明其间是JavaScript脚本源代码。13.3.
5、2JavaScript的常量和变量,（四）知识讲解与操作示范（2）,13.3JavaScript的基本语法1常量 JavaScript有6种基本类型的常量：（1）整型常量（2）实型常量（3）布尔值（4）字符型常量（5）空值（6）特殊字符2变量 变量有4种类型：整型变量、实型变量、布尔型变量、字符串变量。,13.3JavaScript的基本语法 JavaScript变量在使用前可以使用var关键字先作声明，并可赋值。13.3.3JavaScript的运算符与表达式 运算符也称为操作符，JavaScript常用的运算符有： 算术运算符（包括+、-、*、/、+、-） 比较运算符（包括、=、=、!=）
6、 逻辑运算符（&、|、!） 赋值运算符（=） 条件运算符（? :） 表达式是运算符和操作数的组合，表达式通过求值确定表达式的值，这个值是操作数据实施运算所确定的结果。,（四）知识讲解与操作示范（2）,（四）知识讲解与操作示范（3）,13.3JavaScript的基本语法13.3.4JavaScript的语句1条件语句 （1）if语句 if语句的语法格式如下： if (表达式) 语句块若表达式的值为true，则执行该语句块，否则就跳过该语句块。 （2）if else语句 if else语句的语法格式如下： if (表达式) 语句块1 else 语句块2若表达式的值为true，则执行语句块1；否则
7、执行语句块2。,（四）知识讲解与操作示范（3）,13.3JavaScript的基本语法 2循环语句 循环语句用于在一定条件下重复执行某段代码。JavaScript中提供了多种循环语句：for语句、while语句、do while语句。（1）for语句 for语句的语法格式如下： for (表达式1 ; 表达式2 ; 表达式3 ) 循环语句块 先执行“表达式1”，完成初始化；然后判断“表达式2”的值是否为true，如果为true，则执行“循环语句块”，否则退出,（四）知识讲解与操作示范（3）,13.3JavaScript的基本语法（2）while语句while语句的语法格式如下： while (
8、表达式) 循环语句块 先计算表达式的值，如果表达式的值为true，则执行循环语句块，否则跳出循环。3其他语句 JavaScript中还包括以下语句：（1）赋值语句：使用赋值运算符构成的语句称为赋值语句。（2）数据声明语句：数据声明语句用于声明一个变量。（3）函数调用语句：函数调用语句用于调用函数。（4）return语句：用于返回函数调用的值。,（四）知识讲解与操作示范（3）,13.3JavaScript的基本语法13.3.5JavaScript函数 函数是功能相对独立的代码块，该代码块中的语句被作为一个整体执行，使用函数之前，必须选定义函数，函数的定义格式如下： Function 函数名称（参
9、数表） 函数执行部分 ; return 表达式 ; 函数定义中的return语句用于返回函数的值。 JavaScript中包含以下7个全局函数，用于完成一些常用的功,（四）知识讲解与操作示范（3）,13.3JavaScript的基本语法 能：escape()、eval()、isFinite()、isNaN()、 parseFloat()、parseInt()、unescape()。12.3.6JavaScript的事 JavaScript是一种基于对象的语言，基于对象语言的基本特征是采用事件驱动机制。 Web页面触发事件的原因主要有： （1）页面之间跳转； （2）网页的下载、表单提交； （3）
10、网页内部对象的交互，包括界面对象的选定、离开、改变等。,（四）知识讲解与操作示范（3）,13.3JavaScript的基本语法 JavaScript脚本中常用的事件有： （1）onClick事件 （2）onDblClick事件 （3）onLoad事件 （4）onMouseDown事件 （5）onMouseUp事件。 （6）onMouseOver事件 （7）onMove事件 （8）onReset事件 （9）onSubmit事件 （10）onUnload事件。,（五）课堂实践,1操作要求（1） 打开“课堂实践”网站文件“14JS技术”中的网页文档“14.html”。（2） 在HTML文档中HEAD
11、部分输入以下代码13_8，实现在浏览器的状态栏显示欢迎文本和当前的日期、时间的功能。 /JavaScript代码13_8 function doClock() window.setTimeout( doClock(), 1000 ); today = new Date(); window.status = +today.toString(); ,（五）课堂实践,2效果展示 包含三种特效的网页14.html的浏览效果如图所示。 3制作要点提示 （1）要实现在浏览器的状态栏显示欢迎文本和日期，必须在HTML文档的BODY部分的开始位置添加以下代码：. （2）要实现鼠标跟随效果，必须在HTML文档的BODY部分的开始位置添加以下代码：,（五）课堂实践,图13-4应用JavaScript技术制作的特效网页的浏览效果,(六)课外拓展实践,应用JavaScript技术实现以下网页特效： （1）创建鼠标跟随效果； （2）制作飘浮广告；,（七）本章小节,应用JavaScript语言编写脚本程序，可以实现许多网页特效，但网页特效并非是网页中的重要组成元素，对JavaScript语言只需一般了解便可以。通过本章学习要求基本掌握JavaScript语言的语法、对象和常见的利用脚本创建特效的方法。,
