第11章综合实训

1、课件制作人：第11章 综合实训JavaScript是是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。用户交互并响应相应事件的动态页面。通过前面通过前面10章的学习，相信读者已经对章的学习，相信读者已经对JavaScript有了深刻的认识和掌握。本章将通过有了深刻的认识和掌握。本章将通过10

2、个实例来综个实例来综合运用和扩展前面的知识，使读者进一步掌握所学知识。合运用和扩展前面的知识，使读者进一步掌握所学知识。课件制作人：本章目录n实训实训1 JavaScript基本操作基本操作 n实训实训2 HTML文档基本操作文档基本操作 n实训实训3 JavaScript语言基础操作语言基础操作 n实训实训4 JavaScript基本语句的应用基本语句的应用 n实训实训5 函数的应用函数的应用 n实训实训6 对象编程的操作对象编程的操作 n实训实训7 事件处理的操作事件处理的操作 n实训实训8 浏览器对象的应用浏览器对象的应用 n实训实训8 浏览器对象的应用浏览器对象的应用 n实训实训10

3、Ajax技术的应用技术的应用 课件制作人：实训实训1 JavaScript1 JavaScript基本操作基本操作（1）熟练掌握）熟练掌握HTML文件中编写文件中编写JavaScript程序的基本操作。程序的基本操作。（2）基本掌握）基本掌握Dreamweaver编写工具。编写工具。【实训目的实训目的】 课件制作人：实训实训1 JavaScript1 JavaScript基本操作基本操作编写一个编写一个JavaScript程序，实现在页面上输出程序，实现在页面上输出“欢迎访问明日公司主页欢迎访问明日公司主页”，效果如图，效果如图11.1所示。所示。【实训内容实训内容】 课件制作人：实训实训1

4、JavaScript1 JavaScript基本操作基本操作（1）打开）打开Dreamweaver，在，在“创建新项目创建新项目”列中选择列中选择“HTML”。（2）自动创建）自动创建HTML模板，将模板，将标记间的内容改为标记间的内容改为“欢迎页欢迎页”。（3）在）在标记间编写如下代码，实现在页面上输出标记间编写如下代码，实现在页面上输出“欢迎访问明日公司主页欢迎访问明日公司主页”。 document.write(); document.write(欢迎访问明日公司主页); document.write();（4）选择）选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore

5、6.0”，预览网页。，预览网页。【实训步骤实训步骤】 课件制作人：实训实训2 HTML2 HTML文档基本操作文档基本操作 （1）熟练掌握）熟练掌握HTML文档中的常用标记。文档中的常用标记。（2）熟练应用框架进行网页布局。）熟练应用框架进行网页布局。【实训目的实训目的】 课件制作人：实训实训2 HTML2 HTML文档基本操作文档基本操作（1）应用）应用HTML文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。（2）在各个子页应用）在各个子页应用HTML文档中的表格标记，段落标记、文字标记、列表标记和图像标记等来文

6、档中的表格标记，段落标记、文字标记、列表标记和图像标记等来显示个人网站的显示个人网站的LOGO，图像，音乐歌词等相关信息。，图像，音乐歌词等相关信息。（3）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。（4）在线音乐网主页页面美观大方，以不同大小、不同颜色、不同样式和不同格式的网页信息展）在线音乐网主页页面美观大方，以不同大小、不同颜色、不同样式和不同格式的网页信息展现给读者。效果如图现给读者。效果如图11.2所示。所示。【实训内容实训内容】 课件制作人：实训实训2 HTML2 HTML文档基本操作文档基本

7、操作（1）打开）打开Dreamweaver，在，在“创建新项目创建新项目”列中选择列中选择“HTML”。（2）自动创建）自动创建HTML模板，将文件保存为模板，将文件保存为index.html。（3）在）在index.html页中应用框架标记实现在音乐网主页的基本框架结构。框架页分别保存为页中应用框架标记实现在音乐网主页的基本框架结构。框架页分别保存为top.html、left.html、main.html和和bottom.html，效果如图，效果如图11.3所示。所示。【实训步骤实训步骤】 课件制作人：实训实训2 HTML2 HTML文档基本操作文档基本操作首页首页index.html实现框

8、架的完整代码如下。实现框架的完整代码如下。在线音乐网 【实训步骤实训步骤】 课件制作人：实训实训2 HTML2 HTML文档基本操作文档基本操作（4）在）在top.html页中应用图像标记页中应用图像标记调用在线音乐网的调用在线音乐网的Banner广告，代码如下。广告，代码如下。 （5）在）在bottom页中应用表格标记页中应用表格标记、换行标记、换行标记输出版权信息，代码如下。输出版权信息，代码如下。 我行我秀 在线音乐网    本站请使用IE 6.0 或以上版本 1024*768为最佳分辨率 【实训步骤实训步骤】 课件制作人：实训实训2 HTML2 HTML文

9、档基本操作文档基本操作（6）在左侧导航页）在左侧导航页left.html页中，应用标题标记、列表标记和超链接标记等实现歌曲名称超级链页中，应用标题标记、列表标记和超链接标记等实现歌曲名称超级链接。接。   最新主打歌小草你是我的天使我的爱人缘没了爱依旧花儿谢了蓝色玫瑰你是我伤口永远的痛  经典老歌下辈子你会爱我吗逃避你的眼神没来由的爱一生情爱没完没了我是最幸福的人我的爱天作证你是我永远的爱人 【实训步骤实训步骤】 课件制作人：实训实训2 HTML2 HTML文档基本操作文档基本操作为歌曲名称添加文字超级链接，单击歌曲名称，打开歌词链接文件为歌曲名称添加文

10、字超级链接，单击歌曲名称，打开歌词链接文件music.html，并将，并将music.html页页中的内容显示在名称为中的内容显示在名称为“mainFrame”的框架内。的框架内。在歌词信息页在歌词信息页music.html中，应用图像标记显示音乐图标，应用表格标记、段落标记、换行标记中，应用图像标记显示音乐图标，应用表格标记、段落标记、换行标记等显示歌词信息，完整代码如下。等显示歌词信息，完整代码如下。 写信告诉我今天海是什么颜色 夜夜陪著你的海心情又如何 为何你明明动了情却又不靠近 听海哭的声音 叹息著谁又被伤了心却还不清醒 说你在离开我的时候是怎样的心情 【实训步骤实训步骤】 课件制作人

11、：实训实训2 HTML2 HTML文档基本操作文档基本操作（7）在信息主显示页）在信息主显示页main.html页中，应用表格标记、段落标记、换行标记、标题标记等显示歌页中，应用表格标记、段落标记、换行标记、标题标记等显示歌词信息。词信息。  = 音乐欣赏 = 写信告诉我今天海是什么颜色 夜夜陪著你的海心情又如何 为何你明明动了情却又不靠近 听海哭的声音 叹息著谁又被伤了心却还不清醒 说你在离开我的时候是怎样的心情 （8）选择）选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore 6.0”，预览在线音乐网站，在主页单击歌曲名，预览在线音乐网站，在

12、主页单击歌曲名称超级链接，在称超级链接，在mainFrame框架内显示歌词内容。框架内显示歌词内容。【实训步骤实训步骤】 课件制作人：实训实训3 JavaScript3 JavaScript语言基础操作语言基础操作 （1）熟练掌握）熟练掌握JavaScript常用的数据类型。常用的数据类型。（2）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。（3）熟悉三目运算符的应用。）熟悉三目运算符的应用。【实训目的实训目的】 课件制作人：实训实训3 JavaScript3 JavaScript语言基础操作语言基础操作编写一个编写一个JavaScrip

13、t程序，通过三目运算符来返回用户输入的年份是否为闰年，如图程序，通过三目运算符来返回用户输入的年份是否为闰年，如图11.4所示。所示。【实训内容实训内容】 课件制作人：实训实训3 JavaScript3 JavaScript语言基础操作语言基础操作（1）打开）打开Dreamweaver，在，在“创建新项目创建新项目”列中选择列中选择“HTML”。（2）自动创建）自动创建HTML模板，将模板，将标记间的内容改为标记间的内容改为“判断指定的年份是否为闰年判断指定的年份是否为闰年”，将文件保存为将文件保存为index.html。（3）在）在标记间编写如下代码，应用三目运算符编写判断指定年份是否为闰年

14、的标记间编写如下代码，应用三目运算符编写判断指定年份是否为闰年的JavaScript代码。代码。function leapyear()var now = new Date();var years = now.getFullYear(document.form1.txt_year.value);var str;var years = document.form1.txt_year.value;var result =(years%4=0 & years%100!=0)|(years%400=0)?years+是闰年:years+不是闰年;document.form1.txt_yearresult

15、.value = result;【实训步骤实训步骤】 课件制作人：实训实训3 JavaScript3 JavaScript语言基础操作语言基础操作 判断指定的年份是否为闰年 请输入一个四位数的年份：   （4）选择）选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore 6.0”，预览网页，在文本框中输入，预览网页，在文本框中输入4位数的年份，位数的年份，单击单击“计算计算”按钮，判断指定的年份是否为闰年。按钮，判断指定的年份是否为闰年。 【实训步骤实训步骤】 课件制作人：实训实训4 JavaScript4 JavaScript基本语句的应用基本语句的应用熟练掌握熟练

16、掌握JavaScript中中if条件语句和条件语句和for循环语句的应用。循环语句的应用。【实训目的实训目的】 课件制作人：实训实训4 JavaScript4 JavaScript基本语句的应用基本语句的应用编写一个编写一个JavaScript程序，应用程序，应用JavaScript脚本中的脚本中的if语句和语句和for循环语句实现复选框的全选和反选。循环语句实现复选框的全选和反选。单击单击“全选全选/”复选框可以实现快速选择当前页的所有用户信息；当复选框可以实现快速选择当前页的所有用户信息；当“全选全选/反选反选”复选框处于选中复选框处于选中状态时，再次单击状态时，再次单击“全选全选/”复选

17、框可以实现快速在原有用户选择的状态进行反项选择，效果如图复选框可以实现快速在原有用户选择的状态进行反项选择，效果如图11.5、图、图11.6所示。所示。【实训内容实训内容】 课件制作人：实训实训4 JavaScript4 JavaScript基本语句的应用基本语句的应用（1）打开）打开Dreamweaver，在，在“创建新项目创建新项目”列中选择列中选择“HTML”。（2）自动创建）自动创建HTML模板，将模板，将标记间的内容改为标记间的内容改为“应用应用if语句和语句和for循环语句实现循环语句实现复选框的全选和反选复选框的全选和反选”，将文件保存为，将文件保存为index.html。（3）

18、在）在标记间编写标记间编写JavaScript脚本。应用脚本。应用if语句和语句和for循环语句实现复选框的全选循环语句实现复选框的全选和反选。和反选。function CheckAll(elementsA,elementsB)var len = elementsA;if(len.length 0)for(i=0;ilen.length;i+)elementsAi.checked = true;if(elementsB.checked =false)for(j=0;jlen.length;j+)elementsAj.checked = false;elselen.checked = true;

19、if(elementsB.checked = false)len.checked = false;【实训步骤实训步骤】 课件制作人：实训实训4 JavaScript4 JavaScript基本语句的应用基本语句的应用（4）在）在标记间添加用户信息管理页面表单元素的标记间添加用户信息管理页面表单元素的HTML代码。代码。 选 项 用户名称密码注册时间 纯净水chunjingshui6662008-11-14 【实训步骤实训步骤】 课件制作人：实训实训4 JavaScript4 JavaScript基本语句的应用基本语句的应用 小草 xiaocao888 2008-12-10 城市中的狼city1

20、23452009-2-6 全选/反选（5）选择）选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore 6.0”，预览网页。，预览网页。【实训步骤实训步骤】 课件制作人：实训实训5 5 函数的应用函数的应用 熟练应用熟练应用JavaScript脚本进行自定义函数，并掌握函数的调用方法。脚本进行自定义函数，并掌握函数的调用方法。【实训目的实训目的】 课件制作人：实训实训5 5 函数的应用函数的应用编写一个编写一个JavaScript程序，调用自定义函数来限制发送祝福的文字数量，效果如图程序，调用自定义函数来限制发送祝福的文字数量，效果如图11.7所示。所示。【实训内容实训内容】

21、课件制作人：实训实训5 5 函数的应用函数的应用（1）打开）打开Dreamweaver，在，在“创建新项目创建新项目”列中选择列中选择“HTML”。（2）自动创建）自动创建HTML模板，将模板，将标记间的内容改为标记间的内容改为“调用自定义函数来限制发送祝调用自定义函数来限制发送祝福的文字数量福的文字数量”，将文件保存为，将文件保存为index.html。（3）在）在标记间编写标记间编写JavaScript脚本。实现用户输入文字信息字符数量的计算，脚本。实现用户输入文字信息字符数量的计算，其中，英文、数字、空格占其中，英文、数字、空格占1个字符，汉字占两个字符。个字符，汉字占两个字符。func

22、tion textCounter(field, countfield, maxlimit) /文本信息限制在150个字符内 var StrValue = field.value; var ByteCount = 0;var StrLength = field.value.length;for (i=0;iStrLength;i+)/计算输入的字符个数，英文数字占1个字符，汉字占两个字符ByteCount = (StrValue.charCodeAt(i)=256) ? ByteCount + 1 : ByteCount + 2;if(ByteCount=maxlimit)strtemp=Str

23、Value;countfield.value = maxlimit - ByteCount;elsedocument.getElementById(content).innerHTML = strtemp;【实训步骤实训步骤】 课件制作人：实训实训5 5 函数的应用函数的应用（4）在）在标记间添加用户信息管理页面表单元素的标记间添加用户信息管理页面表单元素的HTML代码。代码。您还能输入个字符的祝福信息，发送给你最想祝福的人吧！（5）选择）选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore 6.0”，预览网页。，预览网页。【实训步骤实训步骤】 课件制作人：实训实训6 6 对

24、象编程的操作对象编程的操作 （1）熟练掌握）熟练掌握JavaScript中对象的创建及使用。中对象的创建及使用。（2）熟练应用）熟练应用JavaScript中的日期对象、字符串对象、数学对象和数组对象。中的日期对象、字符串对象、数学对象和数组对象。【实训目的实训目的】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作编写一个编写一个JavaScript程序，本实例主要应用日期对象、字符串对象、数学对象和数组对象来获取指程序，本实例主要应用日期对象、字符串对象、数学对象和数组对象来获取指定日期的相关信息，并用定日期的相关信息，并用Lunar对象将指定日期转换成相应的农历日期。效果如图对象

25、将指定日期转换成相应的农历日期。效果如图11.8所示。所示。【实训内容实训内容】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作（1）打开）打开Dreamweaver，在，在“创建新项目创建新项目”列中选择列中选择“HTML”。（2）自动创建）自动创建HTML模板，将模板，将标记间的内容改为标记间的内容改为“带农历的日历带农历的日历”，将文件保存，将文件保存为为index.html。（3）在页面中添加一个表格，代码如下：）在页面中添加一个表格，代码如下： 公历 JavaScript代码在Menu组件中动态添加下拉菜单（年）：for(i=1900;i2050;i+) document.

26、write(+i); 年 【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作JavaScript代码在代码在Menu组件中动态添加下拉菜单（月）：组件中动态添加下拉菜单（月）：for(i=1;i13;i+) document.write(+i);在表格中添加单元格并设置单元格文本大小的HTML代码如下： 月 日 一 二 三 四 五 六【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作JavaScript代码在表格中添加代码在表格中添加6行行7列的单元格。代码如下：列的单元格。代码如下： var gNum; for(i=0;i6;i+) d

27、ocument.write(); for(j=0;j7;j+) gNum = i*7+j; document.write( ); document.write(); HTML代码的相关结束标记。代码如下：代码的相关结束标记。代码如下： 【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作（4）编辑用于实现公历日历与农历日历的）编辑用于实现公历日历与农历日历的JavaScript代码。用数组记录日历中的相关信息。代码。用数组记录日历中的相关信息。var lunarInfo=new Array(0 x04bd8,0 x04ae0,0 x0a570,0 x054d5,0 x

28、0d260,0 x0d950,0 x16554,0 x056a0,0 x09ad0,0 x055d2,0 x04ae0,0 x0a5b6,0 x0a4d0,0 x0d250,0 x1d255,0 x0b540,0 x0d6a0,0 x0ada2,0 x095b0,0 x14977,0 x04970,0 x0a4b0,0 x0b4b5,0 x06a50,0 x06d40,0 x1ab54,0 x02b60,0 x09570,0 x052f2,0 x04970,0 x06566,0 x0d4a0,0 x0ea50,0 x06e95,0 x05ad0,0 x02b60,0 x186e3,0 x092

29、e0,0 x1c8d7,0 x0c950,0 x0d4a0,0 x1d8a6,0 x0b550,0 x056a0,0 x1a5b4,0 x025d0,0 x092d0,0 x0d2b2,0 x0a950,0 x0b557,0 x06ca0,0 x0b550,0 x15355,0 x04da0,0 x0a5d0,0 x14573,0 x052d0,0 x0a9a8,0 x0e950,0 x06aa0,0 x0aea6,0 x0ab50,0 x04b60,0 x0aae4,0 x0a570,0 x05260,0 x0f263,0 x0d950,0 x05b57,0 x056a0,0 x096d0,

30、0 x04dd5,0 x04ad0,0 x0a4d0,0 x0d4d4,0 x0d250,0 x0d558,0 x0b540,0 x0b5a0,0 x195a6,0 x095b0,0 x049b0,0 x0a974,0 x0a4b0,0 x0b27a,0 x06a50,0 x06d40,0 x0af46,0 x0ab60,0 x09570,0 x04af5,0 x04970,0 x064b0,0 x074a3,0 x0ea50,0 x06b58,0 x055c0,0 x0ab60,0 x096d5,0 x092e0,0 x0c960,0 x0d954,0 x0d4a0,0 x0da50,0 x

31、07552,0 x056a0,0 x0abb7,0 x025d0,0 x092d0,0 x0cab5,0 x0a950,0 x0b4a0,0 x0baa4,0 x0ad50,0 x055d9,0 x04ba0,0 x0a5b0,0 x15176,0 x052b0,0 x0a930,0 x07954,0 x06aa0,0 x0ad50,0 x05b52,0 x04b60,0 x0a6e6,0 x0a4e0,0 x0d260,0 x0ea65,0 x0d530,0 x05aa0,0 x076a3,0 x096d0,0 x04bd7,0 x04ad0,0 x0a4d0,0 x1d0b6,0 x0d2

32、50,0 x0d520,0 x0dd45,0 x0b5a0,0 x056d0,0 x055b2,0 x049b0,0 x0a577,0 x0a4b0,0 x0aa50,0 x1b255,0 x06d20,0 x0ada0)var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);var Animals=new Array(鼠,牛,虎,兔,龙,蛇,马,羊,猴,鸡,狗,猪);var solarTerm = new Array(小寒,大寒,立春,雨水,惊蛰,春分,清明,谷雨,立夏,小满,芒种,夏至,小暑,大暑,立秋,处暑,白露,秋分,

33、寒露,霜降,立冬,小雪,大雪,冬至); /农历的节气var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);var nStr1 = new Array(日,一,二,三,四,五,六,七,八,九,十);var nStr2 = new Array(初,十,廿,卅);【实训步骤实训步骤】 课

34、件制作人：实训实训6 6 对象编程的操作对象编程的操作用数组保存公历的节日。用数组保存公历的节日。var sFtv = new Array(0101 元旦,0214 情人节,0308 妇女节,0312 植树节,0315 消费者权益日,0401 愚人节,0501 劳动节,0504 青年节,0512 护士节,0601 儿童节,0701 建党节,0801 建军节,0910 教师节,0928 孔子诞辰,1001 国庆节,1006 老人节,1024 联合国日,1224 平安夜,1225 圣诞节)【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作用数组保存农历的节日。用数组保存

35、农历的节日。var lFtv = new Array(0101 春节,0115 元宵节,0505 端午节,0707 七夕情人节,0715 中元节,0815 中秋节,0909 重阳节,1208 腊八节,1223 小年)自定义函数自定义函数lYearDays(y)，用于返回农历，用于返回农历y年的总天数。年的总天数。function lYearDays(y) var i, sum = 348; for(i=0 x8000; i0 x8; i=1)sum+=(lunarInfoy-1900&i)?1:0; return(sum+leapDays(y);自定义函数自定义函数leapDays(y)，用于

36、返回农历，用于返回农历y年闰月的天数。年闰月的天数。function leapDays(y) if(leapMonth(y) return(lunarInfoy-1900 & 0 x10000)? 30: 29); else return(0);自定义函数自定义函数leapMonth(y)，用于判断，用于判断y年的农历中哪个月是闰月年的农历中哪个月是闰月,不是闰月返回不是闰月返回0。function leapMonth(y) return(lunarInfoy-1900&0 xf);自定义函数自定义函数monthDays(y,m)，用于返回农历，用于返回农历y年年m月的总天数。月的总天数。fu

37、nction monthDays(y,m) return(lunarInfoy-1900&(0 x10000m)?30:29);【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作自定义函数自定义函数Dianaday()，用于算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期。，用于算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期。function Dianaday(objDate) var i, leap=0, temp=0; var baseDate = new Date(1900,0,31); var offset = (objDa

38、te - baseDate)/86400000; this.dayCyl = offset+40; this.monCyl = 14; for(i=1900; i0; i+) temp = lYearDays(i) offset -= temp; this.monCyl += 12; if(offset0) offset += temp; i-; this.monCyl -= 12; this.year = i; this.yearCyl=i-1864; leap = leapMonth(i); /闰哪个月 this.isLeap = false; for(i=1; i0; i+) if(le

39、ap0 & i=(leap+1) & this.isLeap=false) /闰月 -i; this.isLeap = true; temp = leapDays(this.year); else temp = monthDays(this.year, i); if(this.isLeap=true & i=(leap+1) this.isLeap = false; /解除闰月 offset -= temp; if(this.isLeap = false) this.monCyl+; if(offset=0 & leap0 & i=leap+1) if(this.isLeap) this.is

40、Leap = false; elsethis.isLeap=true;-i;-this.monCyl; if(offset0)offset+=temp;-i;-this.monCyl; this.month=i; this.day=offset+1;【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作自定义函数自定义函数solarDays(y,m)，用于返回公历，用于返回公历y年年m+1月的天数。月的天数。function solarDays(y,m) if(m=1) return(y%4=0)&(y%100!=0)|(y%400=0)?29:28); else re

41、turn(solarMonthm);自定义函数自定义函数calElement()用于记录公历和农历某天的日期。用于记录公历和农历某天的日期。function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap) this.isToday = false; /公历 this.sYear = sYear; this.sMonth = sMonth; this.sDay = sDay; this.week = week; /农历 this.lYear = lYear; this.lMonth = lMonth; this.lDay =

42、 lDay; this.isLeap = isLeap; /节日记录 this.lunarFestival = ; /农历节日 this.solarFestival = ; /公历节日 this.solarTerms = ; /节气【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作自定义函数自定义函数sTerm(y,n)用于返回某年的第用于返回某年的第n个节气为几日（从小寒算起）。个节气为几日（从小寒算起）。function sTerm(y,n) var offDate = new Date(31556925974.7*(y-1900)+sTermInfon*600

43、00)+Date.UTC(1900,0,6,2,5); return(offDate.getUTCDate()自定义函数自定义函数calendar(y,m)用于保存用于保存y年年m+1月的相关信息。月的相关信息。var fat=mat=9;var eve=0;function calendar(y,m) fat=mat=0; var sDObj,lDObj,lY,lM,lD=1,lL,lX=0,tmp1,tmp2; var lDPOS = new Array(3); var n = 0; var firstLM = 0; sDObj = new Date(y,m,1); /当月第一天的信息 t

44、his.length = solarDays(y,m); /公历当月天数 this.firstWeek = sDObj.getDay(); /公历当月1日星期几 if (m+1)=5)fat=sDObj.getDay() if (m+1)=6)mat=sDObj.getDay()【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作for(var i=0;ilX) sDObj = new Date(y,m,i+1); /当月第一天的信息 lDObj = new Dianaday(sDObj); /农历 lY = lDObj.year; /农历年 lM = lDObj.m

45、onth; /农历月 lD = lDObj.day; /农历日 lL = lDObj.isLeap; /农历是否闰月 lX = lL? leapDays(lY): monthDays(lY,lM); /农历当月最后一天 if (lM=12)eve=lX if(n=0) firstLM = lM; lDPOSn+ = i-lD+1; thisi = new calElement(y,m+1,i+1,nStr1(i+this.firstWeek)%7,lY,lM,lD+,lL); if(i+this.firstWeek)%7=0) thisi.color = red; /周日颜色 /节气 tmp1

46、=sTerm(y,m*2)-1; tmp2=sTerm(y,m*2+1)-1; thistmp1.solarTerms = solarTermm*2; thistmp2.solarTerms = solarTermm*2+1; if(this.firstWeek+12)%7=5) /黑色星期五 this12.solarFestival += 黑色星期五; if(y=tY & m=tM) thistD-1.isToday = true; /今日【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作自定义函数自定义函数cDay( )，用中文显示农历的日期。，用中文显示农历的

47、日期。function cDay(d) var s; switch (d) case 10: s = 初十; break; case 20: s = 二十; break; break; case 30: s = 三十; break; break; default : s = nStr2Math.floor(d/10); s += nStr1d%10; return(s);【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作自定义函数自定义函数drawCld( )，在表格中显示公历和农历的日期以及相关节日。，在表格中显示公历和农历的日期以及相关节日。var cld;fu

48、nction drawCld(SY,SM) var TF=true; var p1=p2=; var i,sD,s,size; cld = new calendar(SY,SM); GZ.innerHTML =                        【+Animals(SY-4)%12+】; /生肖 for(i=0;i-1 & sDcld.length) /日

49、期内 sObj.innerHTML = sD+1; if(cldsD.isToday) sObj.style.color = #9900FF; /今日颜色 elsesObj.style.color = ; if(cldsD.lDay=1) /显示农历月 lObj.innerHTML=+(cldsD.isLeap?闰:)+cldsD.lMonth+月+(monthDays(cldsD.lYear,cldsD.lMonth)=29?小:大)+; elselObj.innerHTML = cDay(cldsD.lDay); /显示农历日 var Slfw=Ssfw=null; s=cldsD.sol

50、arFestival;【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作for (var ipp=0;ipplFtv.length;ipp+) /农历节日 if (parseInt(lFtvipp.substr(0,2)=(cldsD.lMonth) if (parseInt(lFtvipp.substr(2,4)=(cldsD.lDay) lObj.innerHTML=lFtvipp.substr(5); Slfw=lFtvipp.substr(5); if (12=(cldsD.lMonth) /判断是否为除夕 if (eve=(cldsD.lDay)lObj.

51、innerHTML=除夕;Slfw=除夕; for (var ipp=0;ippsFtv.length;ipp+) /公历节日 if (parseInt(sFtvipp.substr(0,2)=(SM+1) if (parseInt(sFtvipp.substr(2,4)=(sD+1) lObj.innerHTML=sFtvipp.substr(5); Ssfw=sFtvipp.substr(5); 【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作 if (SM+1)=5) /母亲节 if (fat=0) if (sD+1)=7)Ssfw=母亲节;lObj.inn

52、erHTML=母亲节 else if (fat9) if (sD+1)=(7-fat)+8)Ssfw=母亲节;lObj.innerHTML=母亲节 if (SM+1)=6) /父亲节 if (mat=0) if (sD+1)=14)Ssfw=父亲节;lObj.innerHTML=父亲节 else if (mat9) if (sD+1)=(7-mat)+15)Ssfw=父亲节;lObj.innerHTML=父亲节 if (s.length0) s = s.fontcolor(limegreen); if(s.length0) lObj.innerHTML=s;Slfw=s; /节气 if (Sl

53、fw!=null)&(Ssfw!=null) lObj.innerHTML=Slfw+/+Ssfw; else /非日期 sObj.innerHTML = ; lObj.innerHTML = ; 【实训步骤实训步骤】 课件制作人：实训实训6 6 对象编程的操作对象编程的操作自定义函数自定义函数changeCld()，在下拉列表中选择年或月时，调用自定义函数，在下拉列表中选择年或月时，调用自定义函数drawCld()，显示公历和农历的相，显示公历和农历的相关信息。关信息。function changeCld() var y,m; y=CLD.SY.selectedIndex+1900; m=C

54、LD.SM.selectedIndex; drawCld(y,m);用自定义变量保存当前系统中的年、月、日。用自定义变量保存当前系统中的年、月、日。var Today = new Date();var tY = Today.getFullYear();var tM = Today.getMonth();var tD = Today.getDate();自定义函数自定义函数initial()，打开页时，在下拉列表中显示当前年月，并调用自定义函数，打开页时，在下拉列表中显示当前年月，并调用自定义函数drawCld()，显示公历和，显示公历和农历的相关信息。农历的相关信息。function init

55、ial() CLD.SY.selectedIndex=tY-1900; CLD.SM.selectedIndex=tM; drawCld(tY,tM);（5）在）在标记的窗体载入（标记的窗体载入（onLoad）事件中调用自定义函数）事件中调用自定义函数initial()。（6）选择）选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore 6.0”，预览网页，选择相应的年份和月份即可获取指定，预览网页，选择相应的年份和月份即可获取指定年月的日历相关信息。年月的日历相关信息。【实训步骤实训步骤】 课件制作人：实训实训7 7 事件处理的操作事件处理的操作 （1）熟练掌握调用事件的方法

56、。）熟练掌握调用事件的方法。（2）熟悉掌握鼠标事件中移入移出事件的应用。）熟悉掌握鼠标事件中移入移出事件的应用。【实训目的实训目的】 课件制作人：实训实训7 7 事件处理的操作事件处理的操作 编写一个编写一个JavaScript程序，实现导航条的动画效果。当用户将鼠标移动到任意一个导航按钮上时，程序，实现导航条的动画效果。当用户将鼠标移动到任意一个导航按钮上时，该按钮都会突出显示，鼠标移走后，又恢复为原来位置，效果如图该按钮都会突出显示，鼠标移走后，又恢复为原来位置，效果如图11.9、图、图11.10所示。所示。【实训内容实训内容】 课件制作人：实训实训7 7 事件处理的操作事件处理的操作（1

57、）打开）打开Dreamweaver，在，在“创建新项目创建新项目”列中选择列中选择“HTML”。（2）自动创建）自动创建HTML模板，将模板，将标记间的内容改为标记间的内容改为“应用鼠标事件实现导航条的动应用鼠标事件实现导航条的动画效果画效果”，将文件保存为，将文件保存为index.html。（3）准备）准备14张图片，张图片，7张鼠标移出时显示的图片，图片的名称为张鼠标移出时显示的图片，图片的名称为“menu_0”+1至至7的数字的数字+“.gif”，7张鼠标移入时显示的图片，图片的名称为张鼠标移入时显示的图片，图片的名称为“menu_0”+1至至7的数字的数字+“_over.gif”。（4

58、）将过程（）将过程（3）所准备的）所准备的7张鼠标移出时显示的图片按顺序插入到页面中的适当位置，并设置其张鼠标移出时显示的图片按顺序插入到页面中的适当位置，并设置其鼠标事件鼠标事件onMouseMove 和和onMouseout执行的操作，这里分别调用两个不同的自定义执行的操作，这里分别调用两个不同的自定义JavaScrip函函数。在数。在标记间添加的标记间添加的HTML完整代码如下。完整代码如下。 设 为 首 页 | 收 藏 本 站|     【实训步骤实训步骤】 课件制作人：实训实训7 7 事件处理的操作事件处理的操作 【实训步骤实训步骤】 课件制作

59、人：实训实训7 7 事件处理的操作事件处理的操作   【实训步骤实训步骤】 课件制作人：实训实训7 7 事件处理的操作事件处理的操作（5）在）在标记间编写自定义的标记间编写自定义的JavaScript函数函数move()和和out()。move()用于设置鼠标用于设置鼠标移入导航按钮上时显示的图片，移入导航按钮上时显示的图片，out()用于设置鼠标移出导航按钮上时显示的图片，代码如下。用于设置鼠标移出导航按钮上时显示的图片，代码如下。/鼠标移动效果var A_Img=new Image();function move(image,num) image.src=Images/top/m

60、enu_0+num+_over.gif;function out(image,num)image.src=Images/top/menu_0+num+.gif;（6）选择）选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore 6.0”，预览网页。，预览网页。【实训步骤实训步骤】 课件制作人：实训实训8 8 浏览器对象的应用浏览器对象的应用 熟练应用熟练应用JavaScript脚本中的窗口对象和文档对象。脚本中的窗口对象和文档对象。【实训目的实训目的】 课件制作人：实训实训8 8 浏览器对象的应用浏览器对象的应用编写一个编写一个JavaScript程序，应用程序，应用JavaS