JavaScript实训参考

JavaScript综合实训JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。本周实训将通过10个实例来综合运用和扩展前面的知识，使同学们进一步掌握所学知识。√实训目录实训1JavaScript基本操作实训2HTML文档基本操作实训3JavaScript语言基础操作实训4JavaScript基本语句的应用实训5函数的应用实训6对象编程的操作实训7事件处理的操作实训8浏览器对象的应用实训8浏览器对象的应用实训10Ajax技术的应用√√√√√√√√√实训1JavaScript基本操作（1）熟练掌握HTML文件中编写JavaScript程序的基本操作。（2）基本掌握Dreamweaver编写工具。【实训目的】实训1JavaScript基本操作编写一个JavaScript程序，实现在页面上输出“欢迎访问明日公司主页”，效果如图11.1所示。【实训内容】实训1JavaScript基本操作（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。（2）自动创建HTML模板，将title…/title标记间的内容改为“欢迎页”。（3）在body…/body标记间编写如下代码，实现在页面上输出“欢迎访问明日公司主页”。scriptlanguage=javascriptdocument.write(HR);document.write(h1欢迎访问明日公司主页/h1);document.write(HR);/script（4）选择“文件”/“在浏览器中预览”/“IExplore6.0”，预览网页。【实训步骤】实训2HTML文档基本操作（1）熟练掌握HTML文档中的常用标记。（2）熟练应用框架进行网页布局。【实训目的】实训2HTML文档基本操作（1）应用HTML文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。（2）在各个子页应用HTML文档中的表格标记，段落标记、文字标记、列表标记和图像标记等来显示个人网站的LOGO，图像，音乐歌词等相关信息。（3）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。（4）在线音乐网主页页面美观大方，以不同大小、不同颜色、不同样式和不同格式的网页信息展现给读者。效果如图11.2所示。【实训内容】实训2HTML文档基本操作（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。（2）自动创建HTML模板，将文件保存为index.html。（3）在index.html页中应用框架标记实现在音乐网主页的基本框架结构。框架页分别保存为top.html、left.html、main.html和bottom.html，效果如图11.3所示。【实训步骤】实训2HTML文档基本操作首页index.html实现框架的完整代码如下。htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title在线音乐网/title/headframesetrows=220,*frameborder=noborder=0framespacing=0framesrc=top.htmlname=topFramescrolling=Nonoresize=noresizeid=topFrame/framesetrows=*,159cols=*framespacing=0frameborder=noborder=0framesetrows=*cols=430,*framespacing=0frameborder=noborder=0framesrc=left.htmlname=leftFramescrolling=Nonoresize=noresizeid=leftFrame/framesrc=main.htmlname=mainFrameid=mainFrame//framesetframesrc=bottom.htmlname=bottomFramescrolling=Nonoresize=noresizeid=bottomFrame//frameset/framesetnoframesbodybgcolor=#CCFF33/body/noframes/html【实训步骤】实训2HTML文档基本操作（4）在top.html页中应用图像标记img调用在线音乐网的Banner广告，代码如下。tablewidth=800border=0align=centercellpadding=0cellspacing=0trtdalign=centerimgsrc=images/bg.JPGwidth=768height=220//td/tr/table（5）在bottom页中应用表格标记table、换行标记br输出版权信息，代码如下。tablewidth=800border=0align=centercellpadding=0cellspacing=0trtdheight=70align=centerbgcolor=#FFCC33我行我秀 在线音乐网  本站请使用IE6.0或以上版本1024*768为最佳分辨率/td/tr/table【实训步骤】实训2HTML文档基本操作（6）在左侧导航页left.html页中，应用标题标记、列表标记和超链接标记等实现歌曲名称超级链接。tablewidth=180border=0align=rightcellpadding=0cellspacing=0trtdwidth=206height=507valign=topbgcolor=#FFFFCCbrbrh4  最新主打歌/h4ultype=circleliahref=music.htmltarget=mainFrame小草/a/liliahref=music.htmltarget=mainFrame你是我的天使/a/liliahref=music.htmltarget=mainFrame我的爱人/a/liliahref=music.htmltarget=mainFrame缘没了爱依旧/a/liliahref=music.htmltarget=mainFrame花儿谢了/a/liliahref=music.htmltarget=mainFrame蓝色玫瑰/a/liliahref=music.htmltarget=mainFrame你是我伤口永远的痛/a/li/ulbrbrh4  经典老歌/h4oltype=Astart=1liahref=music.htmltarget=mainFrame下辈子你会爱我吗/a/liliahref=music.htmltarget=mainFrame逃避你的眼神/a/liliahref=music.htmltarget=mainFrame没来由的爱/a/liliahref=music.htmltarget=mainFrame一生情/a/liliahref=music.htmltarget=mainFrame爱没完没了/a/liliahref=music.htmltarget=mainFrame我是最幸福的人/a/liliahref=music.htmltarget=mainFrame我的爱天作证/a/liliahref=music.htmltarget=mainFrame你是我永远的爱人/a/li/ol/td/tr/table【实训步骤】实训2HTML文档基本操作为歌曲名称添加文字超级链接，单击歌曲名称，打开歌词链接文件music.html，并将music.html页中的内容显示在名称为“mainFrame”的框架内。在歌词信息页music.html中，应用图像标记显示音乐图标，应用表格标记、段落标记、换行标记等显示歌词信息，完整代码如下。tablewidth=600border=0align=leftcellpadding=0cellspacing=0trtdheight=89align=centervalign=topbgcolor=#FFFFFFbr/br/h2imgsrc=images/music.JPGwidth=298height=70/br/br//h2/td/trtrtdheight=249align=centervalign=topbgcolor=#FFFFFFpclass=STYLE1写信告诉我今天海是什么颜色br/夜夜陪著你的海心情又如何br/……为何你明明动了情却又不靠近/ppclass=STYLE1听海哭的声音br/叹息著谁又被伤了心却还不清醒br/……说你在离开我的时候是怎样的心情/td/tr/table【实训步骤】实训2HTML文档基本操作（7）在信息主显示页main.html页中，应用表格标记、段落标记、换行标记、标题标记等显示歌词信息。tablewidth=600border=0align=leftcellpadding=0cellspacing=0trtdheight=89align=centervalign=topbgcolor=#EFFBA5br/br/h2 ==== 音乐欣赏 ====/h2/td/trtrtdheight=249align=centervalign=topbgcolor=#EFFBA5pclass=STYLE1写信告诉我今天海是什么颜色br/夜夜陪著你的海心情又如何br/……为何你明明动了情却又不靠近/ppclass=STYLE1听海哭的声音br/叹息著谁又被伤了心却还不清醒br/……说你在离开我的时候是怎样的心情br//td/tr/table（8）选择“文件”/“在浏览器中预览”/“IExplore6.0”，预览在线音乐网站，在主页单击歌曲名称超级链接，在mainFrame框架内显示歌词内容。【实训步骤】实训3JavaScript语言基础操作（1）熟练掌握JavaScript常用的数据类型。（2）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。（3）熟悉三目运算符的应用。【实训目的】实训3JavaScript语言基础操作编写一个JavaScript程序，通过三目运算符来返回用户输入的年份是否为闰年，如图11.4所示。【实训内容】实训3JavaScript语言基础操作（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。（2）自动创建HTML模板，将title…/title标记间的内容改为“判断指定的年份是否为闰年”，将文件保存为index.html。（3）在body…/body标记间编写如下代码，应用三目运算符编写判断指定年份是否为闰年的JavaScript代码。scriptlanguage=javascriptfunctionleapyear(){varnow=newDate();vary