JavaScript实训参考.ppt

JavaScript实训参考.ppt

《JavaScript实训参考.ppt》由会员分享，可在线阅读，更多相关《JavaScript实训参考.ppt（53页珍藏版）》请在冰豆网上搜索。

JavaScript综合实训JavaScript是是Web页页面面中中的的一一种种脚脚本本编编程程语语言言，也也是是一一种种通通用用的的、跨跨平平台台的的、基基于于对对象象和和事事件件驱驱动动并并具具有有安安全全性性的的脚脚本本语语言言。

它它不不需需要要进进行行编编译译，而而是是直直接接嵌嵌入入在在HTML页页面面中中，把把静静态态页页面面转转变变成成支支持持用户交互并响应相应事件的动态页面。

用户交互并响应相应事件的动态页面。

本周实训将通过本周实训将通过10个实例来综合运用和扩展前面的知识，使同学们进一步掌握所学知识。

个实例来综合运用和扩展前面的知识，使同学们进一步掌握所学知识。

实训目录n实训实训1JavaScript基本操作基本操作n实训实训2HTML文档基本操作文档基本操作n实训实训3JavaScript语言基础操作语言基础操作n实训实训4JavaScript基本语句的应用基本语句的应用n实训实训5函数的应用函数的应用n实训实训6对象编程的操作对象编程的操作n实训实训7事件处理的操作事件处理的操作n实训实训8浏览器对象的应用浏览器对象的应用n实训实训8浏览器对象的应用浏览器对象的应用n实训实训10Ajax技术的应用技术的应用实训实训1JavaScript1JavaScript基本操作基本操作

（1）熟练掌握）熟练掌握HTML文件中编写文件中编写JavaScript程序的基本操作。

程序的基本操作。

（2）基本掌握）基本掌握Dreamweaver编写工具。

编写工具。

【实训目的实训目的】实训实训1JavaScript1JavaScript基本操作基本操作编写一个编写一个JavaScript程序，实现在页面上输出程序，实现在页面上输出“欢迎访问明日公司主页欢迎访问明日公司主页”，效果如图，效果如图11.1所示。

所示。

【实训内容实训内容】实训实训1JavaScript1JavaScript基本操作基本操作

（1）打开）打开Dreamweaver，在在“创建新项目创建新项目”列中选择列中选择“HTML”。

（2）自动创建自动创建HTML模板，将模板，将标记间的内容改为标记间的内容改为“欢迎页欢迎页”。

（3）在）在标记间编写如下代码，实现在页面上输出标记间编写如下代码，实现在页面上输出“欢迎访问明日公司主页欢迎访问明日公司主页”。

document.write（）;document.write（欢迎访问明日公司主页）;document.write（）;（4）选择选择“文件文件”/“在浏览器中预览在浏览器中预览”/“IExplore6.0”，预览网页。

预览网页。

【实训步骤实训步骤】实训实训2HTML2HTML文档基本操作文档基本操作

（1）熟练掌握）熟练掌握HTML文档中的常用标记。

文档中的常用标记。

（2）熟练应用框架进行网页布局。

）熟练应用框架进行网页布局。

【实训目的实训目的】实训实训2HTML2HTML文档基本操作文档基本操作

（1）应用）应用HTML文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。

文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。

（2）在在各各个个子子页页应应用用HTML文文档档中中的的表表格格标标记记，段段落落标标记记、文文字字标标记记、列列表表标标记记和和图图像像标标记记等等来来显示个人网站的显示个人网站的LOGO，图像，音乐歌词等相关信息。

图像，音乐歌词等相关信息。

（3）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。

）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。

（4）在在线线音音乐乐网网主主页页页页面面美美观观大大方方，以以不不同同大大小小、不不同同颜颜色色、不不同同样样式式和和不不同同格格式式的的网网页页信信息息展展现给读者。

效果如图现给读者。

效果如图11.2所示。

所示。

【实训内容实训内容】实训实训2HTML2HTML文档基本操作文档基本操作

（1）打开打开Dreamweaver，在在“创建新项目创建新项目”列中选择列中选择“HTML”。

（2）自动创建自动创建HTML模板，将文件保存为模板，将文件保存为index.html。

（3）在在index.html页页中中应应用用框框架架标标记记实实现现在在音音乐乐网网主主页页的的基基本本框框架架结结构构。

框框架架页页分分别别保保存存为为top.html、left.html、main.html和和bottom.html，效果如图效果如图11.3所示。

所示。

【实训步骤实训步骤】实训实训2HTML2HTML文档基本操作文档基本操作首页首页index.html实现框架的完整代码如下。

实现框架的完整代码如下。

在线音乐网【实训步骤实训步骤】实训实训2HTML2HTML文档基本操作文档基本操作（4）在）在top.html页中应用图像标记页中应用图像标记调用在线音乐网的调用在线音乐网的Banner广告，代码如下。

广告，代码如下。

（5）在）在bottom页中应用表格标记页中应用表格标记、换行标记换行标记输出版权信息，代码如下。

输出版权信息，代码如下。

我行我秀 在线音乐网  本站请使用IE6.0或以上版本1024*768为最佳分辨率【实训步骤实训步骤】实训实训2HTML2HTML文档基本操作文档基本操作（6）在在左左侧侧导导航航页页left.html页页中中，应应用用标标题题标标记记、列列表表标标记记和和超超链链接接标标记记等等实实现现歌歌曲曲名名称称超超级级链链接。

接。

  最新主打歌小草你是我的天使我的爱人缘没了爱依旧花儿谢了蓝色玫瑰你是我伤口永远的痛  经典老歌下辈子你会爱我吗逃避你的眼神没来由的爱一生情爱没完没了我是最幸福的人我的爱天作证你是我永远的爱人【实训步骤实训步骤】实训实训2HTML2HTML文档基本操作文档基本操作为为歌歌曲曲名名称称添添加加文文字字超超级级链链接接，单单击击歌歌曲曲名名称称，打打开开歌歌词词链链接接文文件件music.html，并并将将music.html页页中的内容显示在名称为中的内容显示在名称为“mainFrame”的框架内。

的框架内。

在在歌歌词词信信息息页页music.html中中，应应用用图图像像标标记记显显示示音音乐乐图图标标，应应用用表表格格标标记记、段段落落标标记记、换换行行标标记记等等显示歌词信息，完整代码如下。

显示歌词信息，完整代码如下。

写信告诉我今天海是什么颜色夜夜陪著你的海心情又如何为何你明明动了情却又不靠近听海哭的声音叹息著谁又被伤了心却还不清醒说你在离开我的时候是怎样的心情【实训步骤实训步骤】实训实训2HTML2HTML文档基本操作文档基本操作（7）在在信信息息主主显显示示页页main.html页页中中，应应用用表表格格标标记记、段段落落标标记记、换换行行标标记记、标标题题标标记记等等显显示示歌歌词信息。

词信息。

 = 音乐欣赏 =写信告诉我今天海是什么颜色夜夜陪著你的海心情又如何为何你明明动了情却又不靠近听海哭的声音叹息著谁又被伤了心却还不清醒说你在离开我的时候是怎样的心情（8）选选择择“文文件件”/“在在浏浏览览器器中中预预览览”/“IExplore6.0”，预预览览在在线线音音乐乐网网站站，在在主主页页单单击击歌歌曲曲名称超级链接，在名称超级链接，在mainFrame框架内显示歌词内容。

框架内显示歌词内容。

【实训步骤实训步骤】实训实训3JavaScript3JavaScript语言基础操作语言基础操作

（1）熟练掌握）熟练掌握JavaScript常用的数据类型。

常用的数据类型。

（2）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。

）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。

（3）熟悉三目运算符的应用。

）熟悉三目运算符的应用。

【实训目的实训目的】实训实训3JavaScript3JavaScript语言基础操作语言基础操作编写一个编写一个JavaScript程序，通过三目运算符来返回用户输入的年份是否为闰年，如图程序，通过三目运算符来返回用户输入的年份是否为闰年，如图11.4所示。

所示。

【实训内容实训内容】实训实训3JavaScript3JavaScript语言基础操作语言基础操作

（1）打开打开Dreamweaver，在在“创建新项目创建新项目”列中选择列中选择“HTML”。

（2）自自动动创创建建HTML模模板板，将将标标记记间间的的内内容容改改为为“判判断断指指定定的的年年份份是是否否为为闰闰年年”，将文件保存为，将文件保存为index.html。

（3）在在标标记记间间编编写写如如下下代代码码，应应用用三三目目运运算算符符编编写写判判断断指指定定年年份份是是否否为为闰闰年年的的JavaScript代码。

代码。

functionleapyear（）varnow=newDate（）;varyears=now.getFullYear（document.form1.txt_year.value）;varstr;varyears=document.form1.txt_year.value;varresult=（years%4=0&years%100!

=0）|（years%400=0）?

years+是闰年:

years+不是闰年;document.form1.txt_yearresult.value=result;【实训步骤实训步骤】实训实训3JavaScript3JavaScript语言基础操作语言基础操作判断指定的年份是否为闰年请输入一个四位数的年份：

 （4）选选择择“文文件件”/“在在浏浏览览器器中中预预览览”/“IExplore6.0”，预预览览网网页页，在在文文本本框框中中输输入入4位位数数的的年份，单击年份，单击“计算计算”按钮，判断指定的年份是否为闰年。

按钮，判断指定的年份是否为闰年。

【实训步骤实训步骤】实训实训4JavaScript4JavaScript基本语句的应用基本语句的应用熟练掌握熟练掌握JavaScript中中if条件语句和条件语句和for循环语句的应用。

循环语句的应用。

【实训目的实训目的】实训实训4JavaScript4JavaScript基本语句的应用基本语句的应用编编写写一一个个JavaScript程程序序，应应用用JavaScript脚脚本本中中的的if语语句句和和for循循环环语语句句实实现现复复选选框框的的全全选选和和反反选选。

单单击击“全全选选/”复复选选框框可可以以实实现现快快速速选选择择当当前前页页的的所所有有用用户户信信息息；当当“全全选选/反反选选”复复选选框框处处于于选选中中状状态态时时，再再次次单单击击“全全选选/”复复选选框框可可以以实实现现快快速速在在原原有有用用户户选选择择的的状状态态进进行行反反项项选选择择，效效果果如如图图11.5、图、图11.6所示。

所示。

【实训内容实训内容】实训实训4JavaScript4JavaScript基本语句的应用基本语句的应用

（1）打开打开Dreamweaver，在在“创建新项目创建新项目”列中选择列中选择“HTML”。

（2）自自动动创创建建HTML模模板板，将将标标记记间间的的内内容容改改为为“应应用用if语语句句和和for循循环环语语句句实实现现复选框的全选和反选复选框的全选和反选”，将文件保存为，将文件保存为index.html。

（3）在在标标记记间间编编写写JavaScript脚脚本本。

应应用用if语语句句和和for循循环环语语句句实实现现复复选选框框的的全全选选和反选。

和反选。

functionCheckAll（elementsA,elementsB）varlen=elementsA;if（len.length0）for（i=0;ilen.length;i+）elementsAi.checked=true