《JavaScript程序设计基础教程 教学课件 PPT 作者 曾海 第11章 综合实训》由会员分享，可在线阅读，更多相关《JavaScript程序设计基础教程 教学课件 PPT 作者 曾海 第11章 综合实训（69页珍藏版）》请在金锄头文库上搜索。
1、课件制作人：,第11章 综合实训,JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。 通过前面10章的学习，相信读者已经对JavaScript有了深刻的认识和掌握。本章将通过10个实例来综合运用和扩展前面的知识，使读者进一步掌握所学知识。,课件制作人：,本章目录,实训1 JavaScript基本操作 实训2 HTML文档基本操作 实训3 JavaScript语言基础操作 实训4 JavaScript基本语句的应用 实训5
2、函数的应用 实训6 对象编程的操作 实训7 事件处理的操作 实训8 浏览器对象的应用 实训8 浏览器对象的应用 实训10 Ajax技术的应用,课件制作人：,实训1 JavaScript基本操作,（1）熟练掌握HTML文件中编写JavaScript程序的基本操作。 （2）基本掌握Dreamweaver编写工具。,【实训目的】,课件制作人：,实训1 JavaScript基本操作,编写一个JavaScript程序，实现在页面上输出“欢迎访问明日公司主页”，效果如图11.1所示。,【实训内容】,课件制作人：,实训1 JavaScript基本操作,（1）打开Dreamweaver，在“创建新项目”列中选
3、择“HTML”。 （2）自动创建HTML模板，将标记间的内容改为“欢迎页”。 （3）在标记间编写如下代码，实现在页面上输出“欢迎访问明日公司主页”。 document.write(“); document.write(“欢迎访问明日公司主页“); document.write(“); （4）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页。,【实训步骤】,课件制作人：,实训2 HTML文档基本操作,（1）熟练掌握HTML文档中的常用标记。 （2）熟练应用框架进行网页布局。,【实训目的】,课件制作人：,实训2 HTML文档基本操作,（1）应用HTML文档中的常用标记制作一
4、个在线音乐网站主页，要求主页应用框架实现。 （2）在各个子页应用HTML文档中的表格标记，段落标记、文字标记、列表标记和图像标记等来显示个人网站的LOGO，图像，音乐歌词等相关信息。 （3）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。 （4）在线音乐网主页页面美观大方，以不同大小、不同颜色、不同样式和不同格式的网页信息展现给读者。效果如图11.2所示。,【实训内容】,课件制作人：,实训2 HTML文档基本操作,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将文件保存为index.html。 （3）在index.htm
5、l页中应用框架标记实现在音乐网主页的基本框架结构。框架页分别保存为top.html、left.html、main.html和bottom.html，效果如图11.3所示。,【实训步骤】,课件制作人：,实训2 HTML文档基本操作,首页index.html实现框架的完整代码如下。 在线音乐网 ,【实训步骤】,课件制作人：,实训2 HTML文档基本操作,（4）在top.html页中应用图像标记调用在线音乐网的Banner广告，代码如下。 （5）在bottom页中应用表格标记、换行标记输出版权信息，代码如下。 我行我秀 本站请使用IE 6.0 或以上版本 1024*768为最佳分辨率 ,【实训步骤】
6、,课件制作人：,实训2 HTML文档基本操作,（6）在左侧导航页left.html页中，应用标题标记、列表标记和超链接标记等实现歌曲名称超级链接。 经典老歌 下辈子你会爱我吗 逃避你的眼神 没来由的爱 一生情 爱没完没了 我是最幸福的人 我的爱天作证 你是我永远的爱人 ,【实训步骤】,课件制作人：,实训2 HTML文档基本操作,为歌曲名称添加文字超级链接，单击歌曲名称，打开歌词链接文件music.html，并将music.html页中的内容显示在名称为“mainFrame”的框架内。 在歌词信息页music.html中，应用图像标记显示音乐图标，应用表格标记、段落标记、换行标记等显示歌词信息，
7、完整代码如下。 写信告诉我今天海是什么颜色 夜夜陪著你的海心情又如何 为何你明明动了情却又不靠近 听海哭的声音 叹息著谁又被伤了心却还不清醒 说你在离开我的时候是怎样的心情 ,【实训步骤】,课件制作人：,实训2 HTML文档基本操作,（7）在信息主显示页main.html页中，应用表格标记、段落标记、换行标记、标题标记等显示歌词信息。 = 写信告诉我今天海是什么颜色 夜夜陪著你的海心情又如何 为何你明明动了情却又不靠近 听海哭的声音 叹息著谁又被伤了心却还不清醒 说你在离开我的时候是怎样的心情 （8）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览在线音乐网站，在主页单击歌
8、曲名称超级链接，在mainFrame框架内显示歌词内容。,【实训步骤】,课件制作人：,实训3 JavaScript语言基础操作,（1）熟练掌握JavaScript常用的数据类型。 （2）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。 （3）熟悉三目运算符的应用。,【实训目的】,课件制作人：,实训3 JavaScript语言基础操作,编写一个JavaScript程序，通过三目运算符来返回用户输入的年份是否为闰年，如图11.4所示。,【实训内容】,课件制作人：,实训3 JavaScript语言基础操作,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HT
9、ML模板，将标记间的内容改为“判断指定的年份是否为闰年”，将文件保存为index.html。 （3）在标记间编写如下代码，应用三目运算符编写判断指定年份是否为闰年的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 ,【实训步骤】,课件制作人：,实训3 JavaScri
10、pt语言基础操作, 判断指定的年份是否为闰年 请输入一个四位数的年份： “ （4）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，预览网页，在文本框中输入4位数的年份，单击“计算”按钮，判断指定的年份是否为闰年。,【实训步骤】,课件制作人：,实训4 JavaScript基本语句的应用,熟练掌握JavaScript中if条件语句和for循环语句的应用。,【实训目的】,课件制作人：,实训4 JavaScript基本语句的应用,编写一个JavaScript程序，应用JavaScript脚本中的if语句和for循环语句实现复选框的全选和反选。单击“全选/”复选框可以实现快速选择当前页的
11、所有用户信息；当“全选/反选”复选框处于选中状态时，再次单击“全选/”复选框可以实现快速在原有用户选择的状态进行反项选择，效果如图11.5、图11.6所示。,【实训内容】,课件制作人：,实训4 JavaScript基本语句的应用,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将标记间的内容改为“应用if语句和for循环语句实现复选框的全选和反选”，将文件保存为index.html。 （3）在标记间编写JavaScript脚本。应用if语句和for循环语句实现复选框的全选和反选。 function CheckAll(elementsA,el
12、ementsB) var len = elementsA; if(len.length 0) for(i=0;i,【实训步骤】,课件制作人：,实训4 JavaScript基本语句的应用,（4）在标记间添加用户信息管理页面表单元素的HTML代码。 选 项 用户名称 密码 注册时间 纯净水 chunjingshui666 2008-11-14 ,【实训步骤】,课件制作人：,实训4 JavaScript基本语句的应用, 小草 xiaocao888 2008-12-10 城市中的狼 city12345 2009-2-6 全选/反选 （5）选择“文件”/“在浏览器中预览”/“IExplore 6.0”，
13、预览网页。,【实训步骤】,课件制作人：,实训5 函数的应用,熟练应用JavaScript脚本进行自定义函数，并掌握函数的调用方法。,【实训目的】,课件制作人：,实训5 函数的应用,编写一个JavaScript程序，调用自定义函数来限制发送祝福的文字数量，效果如图11.7所示。,【实训内容】,课件制作人：,实训5 函数的应用,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTML模板，将标记间的内容改为“调用自定义函数来限制发送祝福的文字数量”，将文件保存为index.html。 （3）在标记间编写JavaScript脚本。实现用户输入文字信息字符数量的
14、计算，其中，英文、数字、空格占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）在标记间添加用户信息管理页面表单元素的HTML代码。 您还能输入 个字符的祝福信息，发送给你最想祝福的人吧！ （5）选择“文件”/“在浏览器中预览”/“IExplore
15、 6.0”，预览网页。,【实训步骤】,课件制作人：,实训6 对象编程的操作,（1）熟练掌握JavaScript中对象的创建及使用。 （2）熟练应用JavaScript中的日期对象、字符串对象、数学对象和数组对象。,【实训目的】,课件制作人：,实训6 对象编程的操作,编写一个JavaScript程序，本实例主要应用日期对象、字符串对象、数学对象和数组对象来获取指定日期的相关信息，并用Lunar对象将指定日期转换成相应的农历日期。效果如图11.8所示。,【实训内容】,课件制作人：,实训6 对象编程的操作,（1）打开Dreamweaver，在“创建新项目”列中选择“HTML”。 （2）自动创建HTM
16、L模板，将标记间的内容改为“带农历的日历”，将文件保存为index.html。 （3）在页面中添加一个表格，代码如下： 公历 JavaScript代码在Menu组件中动态添加下拉菜单（年）： for(i=1900;i+i); 年 ,【实训步骤】,课件制作人：,实训6 对象编程的操作,JavaScript代码在Menu组件中动态添加下拉菜单（月）： for(i=1;i+i); 在表格中添加单元格并设置单元格文本大小的HTML代码如下： 月 日 一 二 三 四 五 六,【实训步骤】,课件制作人：,实训6 对象编程的操作,JavaScript代码在表格中添加6行7列的单元格。代码如下： var gNum; for(i=0;i);
