JavaScript实训参考.ppt

1、JavaScript 综合实训,JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。 本周实训将通过10个实例来综合运用和扩展前面的知识，使同学们进一步掌握所学知识。,实训目录,实训1 JavaScript基本操作 实训2 HTML文档基本操作 实训3 JavaScript语言基础操作 实训4 JavaScript基本语句的应用 实训5 函数的应用 实训6 对象编程的操作 实训7 事件处理的操作 实训8 浏览器对象的应用 实

2、训8 浏览器对象的应用 实训10 Ajax技术的应用,实训1 JavaScript基本操作,（1）熟练掌握HTML文件中编写JavaScript程序的基本操作。 （2）基本掌握Dreamweaver编写工具。,【实训目的】,实训1 JavaScript基本操作,编写一个JavaScript程序，实现在页面上输出“欢迎访问明日公司主页”，效果如图11.1所示。,【实训内容】,实训1 JavaScript基本操作,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将标记间的内容改为“欢迎页”。 （3）在标记间编写如下代码，实现在页面上输出“欢迎访

3、问明日公司主页”。 document.write(); document.write(欢迎访问明日公司主页); document.write(); （4）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。,【实训步骤】,实训2 HTML文档基本操作,（1）熟练掌握HTML文档中的常用标记。 （2）熟练应用框架进行网页布局。,【实训目的】,实训2 HTML文档基本操作,（1）应用HTML文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。 （2）在各个子页应用HTML文档中的表格标记，段落标记、文字标记、列表标记和图像标记等来显示个人网站的LOGO，图像，音乐

4、歌词等相关信息。 （3）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。 （4）在线音乐网主页页面美观大方，以不同大小、不同颜色、不同样式和不同格式的网页信息展现给读者。效果如图11.2所示。,【实训内容】,实训2 HTML文档基本操作,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将文件保存为index.html。 （3）在index.html页中应用框架标记实现在音乐网主页的基本框架结构。框架页分别保存为top.html、left.html、main.html和bottom.html，效果如图11.3所示。,【实训步

5、骤】,实训2 HTML文档基本操作,首页index.html实现框架的完整代码如下。 在线音乐网 ,【实训步骤】,实训2 HTML文档基本操作,（4）在top.html页中应用图像标记调用在线音乐网的Banner广告，代码如下。 （5）在bottom页中应用表格标记、换行标记输出版权信息，代码如下。 我行我秀 本站请使用IE 6.0 或以上版本 1024*768为最佳分辨率 ,【实训步骤】,实训2 HTML文档基本操作,（6）在左侧导航页left.html页中，应用标题标记、列表标记和超链接标记等实现歌曲名称超级链接。 经典老歌 下辈子你会爱我吗 逃避你的眼神 没来由的爱 一生情 爱没完没了

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

7、示页main.html页中，应用表格标记、段落标记、换行标记、标题标记等显示歌词信息。 = 写信告诉我今天海是什么颜色 夜夜陪著你的海心情又如何 为何你明明动了情却又不靠近 听海哭的声音 叹息著谁又被伤了心却还不清醒 说你在离开我的时候是怎样的心情 （8）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览在线音乐网站，在主页单击歌曲名称超级链接，在mainFrame框架内显示歌词内容。,【实训步骤】,实训3 JavaScript语言基础操作,（1）熟练掌握JavaScript常用的数据类型。 （2）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。 （3）熟悉三目运算符的应用

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

9、s = now.getFullYear(document.form1.txt_year.value); var str; var years = document.form1.txt_year.value; var result =(years%4=0 ,【实训步骤】,实训3 JavaScript语言基础操作, 判断指定的年份是否为闰年 请输入一个四位数的年份： （4）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页，在文本框中输入4位数的年份，单击“计算”按钮，判断指定的年份是否为闰年。,【实训步骤】,实训4 JavaScript基本语句的应用,熟练掌握JavaScr

10、ipt中if条件语句和for循环语句的应用。,【实训目的】,实训4 JavaScript基本语句的应用,编写一个JavaScript程序，应用JavaScript脚本中的if语句和for循环语句实现复选框的全选和反选。单击“全选/”复选框可以实现快速选择当前页的所有用户信息；当“全选/反选”复选框处于选中状态时，再次单击“全选/”复选框可以实现快速在原有用户选择的状态进行反项选择，效果如图11.5、图11.6所示。,【实训内容】,实训4 JavaScript基本语句的应用,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将标记间的内容改为“

11、应用if语句和for循环语句实现复选框的全选和反选”，将文件保存为index.html。 （3）在标记间编写JavaScript脚本。应用if语句和for循环语句实现复选框的全选和反选。 function CheckAll(elementsA,elementsB) var len = elementsA; if(len.length 0) for(i=0;i,【实训步骤】,实训4 JavaScript基本语句的应用,（4）在标记间添加用户信息管理页面表单元素的HTML代码。 选 项 用户名称 密码 注册时间 纯净水 chunjingshui666 2008-11-14 ,【实训步骤】,实训4

12、JavaScript基本语句的应用, 小草 xiaocao888 2008-12-10 城市中的狼 city12345 2009-2-6 全选/反选 （5）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。,【实训步骤】,实训5 函数的应用,熟练应用JavaScript脚本进行自定义函数，并掌握函数的调用方法。,【实训目的】,实训5 函数的应用,编写一个JavaScript程序，调用自定义函数来限制发送祝福的文字数量，效果如图11.7所示。,【实训内容】,实训5 函数的应用,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML

13、模板，将标记间的内容改为“调用自定义函数来限制发送祝福的文字数量”，将文件保存为index.html。 （3）在标记间编写JavaScript脚本。实现用户输入文字信息字符数量的计算，其中，英文、数字、空格占1个字符，汉字占两个字符。 function textCounter(field, countfield, maxlimit) /文本信息限制在150个字符内 var StrValue = field.value; var ByteCount = 0; var StrLength = field.value.length; for (i=0;i,【实训步骤】,实训5 函数的应用,（4）在标

14、记间添加用户信息管理页面表单元素的HTML代码。 您还能输入 个字符的祝福信息，发送给你最想祝福的人吧！ （5）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。,【实训步骤】,实训6 对象编程的操作,（1）熟练掌握JavaScript中对象的创建及使用。 （2）熟练应用JavaScript中的日期对象、字符串对象、数学对象和数组对象。,【实训目的】,实训6 对象编程的操作,编写一个JavaScript程序，本实例主要应用日期对象、字符串对象、数学对象和数组对象来获取指定日期的相关信息，并用Lunar对象将指定日期转换成相应的农历日期。效果如图11.8所示。,【实训内容

15、】,实训6 对象编程的操作,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将标记间的内容改为“带农历的日历”，将文件保存为index.html。 （3）在页面中添加一个表格，代码如下： 公历 JavaScript代码在Menu组件中动态添加下拉菜单（年）： for(i=1900;i+i); 年 ,【实训步骤】,实训6 对象编程的操作,JavaScript代码在Menu组件中动态添加下拉菜单（月）： for(i=1;i+i); 在表格中添加单元格并设置单元格文本大小的HTML代码如下： 月 日 一 二 三 四 五 六,【实训步骤】,实训6

16、对象编程的操作,JavaScript代码在表格中添加6行7列的单元格。代码如下： var gNum; for(i=0;i); for(j=0;j ); document.write(); HTML代码的相关结束标记。代码如下： ,【实训步骤】,实训6 对象编程的操作,（4）编辑用于实现公历日历与农历日历的JavaScript代码。用数组记录日历中的相关信息。 var lunarInfo=new Array( 0 x04bd8,0 x04ae0,0 x0a570,0 x054d5,0 x0d260,0 x0d950,0 x16554,0 x056a0,0 x09ad0,0 x055d2, 0 x

17、04ae0,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 x092e0,0 x1c8d7,0 x0c950, 0 x0d4a0,0 x1d8a6,0 x0b550,0 x

18、056a0,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,0 x04dd5,0 x04ad0,0 x0a4d0,0 x0d4d4,0 x0d250,0 x

19、0d558,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 x07552,0 x056a0,0 x0abb7,0 x025d0,0 x092d0,0 x

20、0cab5, 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 x0d250,0 x0d520,0 x0dd45, 0 x0b5a0,0 x056d0,0

21、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(小寒,大寒,立春,雨水,惊蛰,春分,清明,谷雨,立夏 ,小满,芒种,夏至,小暑,大暑,立秋,处暑,白露,秋分,寒露,霜降,立冬,小雪 ,大雪,冬至); /农历的节气 var sTerm

22、Info = 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(初,十,廿,卅);,【实训步骤】,实训6 对象编程的操作,用数组保存公历的节日。 var sFtv =

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

24、715 中元节, 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 ,【实训步骤】,实训6 对象编程的操作,自定义函数Dianaday()，用于算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期。 function Dianaday(objDate) var i, leap=0, temp=0; var baseDa

25、te = new Date(1900,0,31); var offset = (objDate - baseDate)/86400000; this.dayCyl = offset+40; this.monCyl = 14; for(i=1900; i0; i+) temp = lYearDays(i) offset -= temp; this.monCyl += 12; if(offset0; i+) if(leap0 ,【实训步骤】,实训6 对象编程的操作,自定义函数solarDays(y,m)，用于返回公历y年m+1月的天数。 function solarDays(y,m) if(m=1

26、) return(y%4=0) /节气 ,【实训步骤】,实训6 对象编程的操作,自定义函数sTerm(y,n)用于返回某年的第n个节气为几日（从小寒算起）。 function sTerm(y,n) var offDate = new Date(31556925974.7*(y-1900)+sTermInfon*60000)+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)

27、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); /当月第一天的信息 this.length = solarDays(y,m); /公历当月天数 this.firstWeek = sDObj.getDay(); /公历当月1日星期几 if (m+1)=5)fat=sDObj.getDay() if (m+1)=6)mat=sDObj.getDay(),【实训步骤】,实训6 对

28、象编程的操作,for(var i=0;ilX) sDObj = new Date(y,m,i+1); /当月第一天的信息 lDObj = new Dianaday(sDObj); /农历 lY = lDObj.year; /农历年 lM = lDObj.month; /农历月 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

29、 = 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=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 +=

30、黑色星期五; if(y=tY /今日 ,【实训步骤】,实训6 对象编程的操作,自定义函数cDay()，用中文显示农历的日期。 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 对象编程的操作,自定义函数drawCld()，在表格中显示公历和农历的日期以及相

31、关节日。 var cld; function drawCld(SY,SM) var TF=true; var p1=p2=; var i,sD,s,size; cld = new calendar(SY,SM); GZ.innerHTML = ,【实训步骤】,实训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

32、.substr(5); Slfw=lFtvipp.substr(5); if (12=(cldsD.lMonth) /判断是否为除夕 if (eve=(cldsD.lDay)lObj.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); ,【实训步骤

33、】,实训6 对象编程的操作,if (SM+1)=5) /母亲节 if (fat=0) if (sD+1)=7)Ssfw=母亲节;lObj.innerHTML=母亲节 else if (fat0) s = s.fontcolor(limegreen); if(s.length0) lObj.innerHTML=s;Slfw=s; /节气 if (Slfw!=null) ,【实训步骤】,实训6 对象编程的操作,自定义函数changeCld()，在下拉列表中选择年或月时，调用自定义函数drawCld()，显示公历和农历的相关信息。 function changeCld() var y,m; y=CL

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

35、900; CLD.SM.selectedIndex=tM; drawCld(tY,tM); （5）在标记的窗体载入（onLoad）事件中调用自定义函数initial()。 （6）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页，选择相应的年份和月份即可获取指定年月的日历相关信息。,【实训步骤】,实训7 事件处理的操作,（1）熟练掌握调用事件的方法。 （2）熟悉掌握鼠标事件中移入移出事件的应用。,【实训目的】,实训7 事件处理的操作,编写一个JavaScript程序，实现导航条的动画效果。当用户将鼠标移动到任意一个导航按钮上时，该按钮都会突出显示，鼠标移走后，又恢复为原来

36、位置，效果如图11.9、图11.10所示。,【实训内容】,实训7 事件处理的操作,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将标记间的内容改为“应用鼠标事件实现导航条的动画效果”，将文件保存为index.html。 （3）准备14张图片，7张鼠标移出时显示的图片，图片的名称为“menu_0”+1至7的数字+“.gif”，7张鼠标移入时显示的图片，图片的名称为“menu_0”+1至7的数字+“_over.gif”。 （4）将过程（3）所准备的7张鼠标移出时显示的图片按顺序插入到页面中的适当位置，并设置其鼠标事件onMouseMove 和onMouseout执行的操作，这里分别调用两个不同的自定义JavaScrip函数。在标记间添加的HTML完整代码如下。 设为首页| 收藏本站| ,【实训步骤】,实训7 事件处理的操作, ,【实训步骤】,实训7 事件处理的操作, ,【实训步骤】,实训7 事件处理的操作,（5）在标记间编写自定义的JavaScript函数move()和out()。move()用于设置鼠标移入导航按钮上时显示的图片，out()用于设置鼠