JavaScript实训参考.pptVIP

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模板 将 标记间的内容改为 欢迎页 3 在 标记间编写如下代码 实现在页面上输出 欢迎访问明日公司主页 document write document write 欢迎访问明日公司主页 document write 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实现框架的完整代码如下 在线音乐网 实训步骤 实训2HTML文档基本操作 4 在top html页中应用图像标记调用在线音乐网的Banner广告 代码如下 5 在bottom页中应用表格标记 换行标记输出版权信息 代码如下 我行我秀本站请使用IE6 0或以上版本1024 768为最佳分辨率 实训步骤 实训2HTML文档基本操作 6 在左侧导航页left html页中 应用标题标记 列表标记和超链接标记等实现歌曲名称超级链接 经典老歌下辈子你会爱我吗逃避你的眼神没来由的爱一生情爱没完没了我是最幸福的人我的爱天作证你是我永远的爱人 实训步骤 实训2HTML文档基本操作 为歌曲名称添加文字超级链接 单击歌曲名称 打开歌词链接文件music html 并将music html页中的内容显示在名称为 mainFrame 的框架内 在歌词信息页music html中 应用图像标记显示音乐图标 应用表格标记 段落标记 换行标记等显示歌词信息 完整代码如下 写信告诉我今天海是什么颜色夜夜陪著你的海心情又如何 为何你明明动了情却又不靠近听海哭的声音叹息著谁又被伤了心却还不清醒 说你在离开我的时候是怎样的心情 实训步骤 实训2HTML文档基本操作 7 在信息主显示页main html页中 应用表格标记 段落标记 换行标记 标题标记等显示歌词信息 写信告诉我今天海是什么颜色夜夜陪著你的海心情又如何 为何你明明动了情却又不靠近听海哭的声音叹息著谁又被伤了心却还不清醒 说你在离开我的时候是怎样的心情 8 选择 文件 在浏览器中预览 IExplore6 0 预览在线音乐网站 在主页单击歌曲名称超级链接 在mainFrame框架内显示歌词内容 实训步骤 实训3JavaScript语言基础操作 1 熟练掌握JavaScript常用的数据类型 2 熟练掌握定义变量的方法 熟悉运算符和表达式的应用 3 熟悉三目运算符的应用 实训目的 实训3JavaScript语言基础操作 编写一个JavaScript程序 通过三目运算符来返回用户输入的年份是否为闰年 如图11 4所示 实训内容 实训3JavaScript语言基础操作 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 实训步骤 实训3JavaScript语言基础操作 判断指定的年份是否为闰年请输入一个四位数的年份 4 选择 文件 在浏览器中预览 IExplore6 0 预览网页 在文本框中输入4位数的年份 单击 计算 按钮 判断指定的年份是否为闰年 实训步骤 实训4JavaScript基本语句的应用 熟练掌握JavaScript中if条件语句和for循环语句的应用 实训目的 实训4JavaScript基本语句的应用 编写一个JavaScript程序 应用JavaScript脚本中的if语句和for循环语句实现复选框的全选和反选 单击 全选 复选框可以实现快速选择当前页的所有用户信息 当 全选 反选 复选框处于选中状态时 再次单击 全选 复选框可以实现快速在原有用户选择的状态进行反项选择 效果如图11 5 图11 6所示 实训内容 实训4JavaScript基本语句的应用 1 打开Dreamweaver 在 创建新项目 列中选择 HTML 2 自动创建HTML模板 将 标记间的内容改为 应用if语句和for循环语句实现复选框的全选和反选 将文件保存为index html 3 在 标记间编写JavaScript脚本 应用if语句和for循环语句实现复选框的全选和反选 functionCheckAll elementsA elementsB varlen elementsA if len length 0 for i 0 i 实训步骤 实训4JavaScript基本语句的应用 4 在 标记间添加用户信息管理页面表单元素的HTML代码 选项用户名称密码注册时间纯净水chunjingshui6662008 11 14 实训步骤 实训4JavaScript基本语句的应用 小草xiaocao8882008 12 10城市中的狼city123452009 2 6 全选 反选 5 选择 文件 在浏览器中预览 IExplore6 0 预览网页 实训步骤 实训5函数的应用 熟练应用JavaScript脚本进行自定义函数 并掌握函数的调用方法 实训目的 实训5函数的应用 编写一个JavaScript程序 调用自定义函数来限制发送祝福的文字数量 效果如图11 7所示 实训内容 实训5函数的应用 1 打开Dreamweaver 在 创建新项目 列中选择 HTML 2 自动创建HTML模板 将 标记间的内容改为 调用自定义函数来限制发送祝福的文字数量 将文件保存为index html 3 在 标记间编写JavaScript脚本 实现用户输入文字信息字符数量的计算 其中 英文 数字 空格占1个字符 汉字占两个字符 functiontextCounter field countfield maxlimit 文本信息限制在150个字符内varStrValue field value varByteCount 0 varStrLength field value length for i 0 i 实训步骤 实训5函数的应用 4 在 标记间添加用户信息管理页面表单元素的HTML代码 您还能输入个字符的祝福信息 发送给你最想祝福的人吧 5 选择 文件 在浏览器中预览 IExplore6 0 预览网页 实训步骤 实训6对象编程的操作 1 熟练掌握JavaScript中对象的创建及使用 2 熟练应用JavaScript中的日期对象 字符串对象 数学对象和数组对象 实训目的 实训6对象编程的操作 编写一个JavaScript程序 本实例主要应用日期对象 字符串对象 数学对象和数组对象来获取指定日期的相关信息 并用Lunar对象将指定日期转换成相应的农历日期 效果如图11 8所示 实训内容 实训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对象编程的操作 JavaScript代码在表格中添加6行7列的单元格 代码如下 vargNum for i 0 i for j 0 j document write HTML代码的相关结束标记 代码如下 实训步骤 实训6对象编程的操作 4 编辑用于实现公历日历与农历日历的JavaScript代码 用数组记录日历中的相关信息 varlunarInfo newArray 0 x04bd8 0 x04ae0 0 x0a570 0 x054d5 0 x0d260 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 x092e0 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 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 x07552 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 x0d250 0 x0d520 0 x0dd45 0 x0b5a0 0 x056d0 0 x055b2 0 x049b0 0 x0a577 0 x0a4b0 0 x0aa50 0 x1b255 0 x06d20 0 x0ada0 varsolarMonth newArray 31 28 31 30 31 30 31 31 30 31 30 31 varAnimals newArray 鼠 牛 虎 兔 龙 蛇 马 羊 猴 鸡 狗 猪 varsolarTerm newArray 小寒 大寒 立春 雨水 惊蛰 春分 清明 谷雨 立夏 小满 芒种 夏至 小暑 大暑 立秋 处暑 白露 秋分 寒露 霜降 立冬 小雪 大雪 冬至 农历的节气varsTermInfo newArray 0 21208 42467 63836 85337 107014 128867 150921 173149 195551 218072 240693 263343 285989 308563 331033 353350 375494 397447 419210 440795 462224 483532 504758 varnStr1 newArray 日 一 二 三 四 五 六 七 八 九 十 varnStr2 newArray 初 十 廿 卅 实训步骤 实训6对象编程的操作 用数组保存公历的节日 varsFtv newArray 0101元旦 0214情人节 0308妇女节 0312植树节 0315消费者权益日 0401愚人节 0501劳动节 0504青年节 0512护士节 0601儿童节 0701建党节 0801建军节 0910教师节 0928孔子诞辰 1001国庆节 1006老人节 1024联合国日 1224平安夜 1225圣诞节 实训步骤 实训6对象编程的操作 用数组保存农历的节日 varlFtv newArray 0101春节 0115元宵节 0505端午节 0707七夕情人节 0715中元节 0815中秋节 0909重阳节 1208腊八节 1223小年 自定义函数lYearDays y 用于返回农历y年的总天数 functionlYearDays y vari sum 348 for i 0 x8000 i 0 x8 i 1 sum lunarInfo y 1900 实训步骤 实训6对象编程的操作 自定义函数Dianaday 用于算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期 functionDianaday objDate vari leap 0 temp 0 varbaseDate newDate 1900 0 31 varoffset 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 leap 0 实训步骤 实训6对象编程的操作 自定义函数solarDays y m 用于返回公历y年m 1月的天数 functionsolarDays y m if m 1 return y 4 0 节气 实训步骤 实训6对象编程的操作 自定义函数sTerm y n 用于返回某年的第n个节气为几日 从小寒算起 functionsTerm y n varoffDate newDate 31556925974 7 y 1900 sTermInfo n 60000 Date UTC 1900 0 6 2 5 return offDate getUTCDate 自定义函数calendar y m 用于保存y年m 1月的相关信息 varfat mat 9 vareve 0 functioncalendar y m fat mat 0 varsDObj lDObj lY lM lD 1 lL lX 0 tmp1 tmp2 varlDPOS newArray 3 varn 0 varfirstLM 0 sDObj newDate 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对象编程的操作 for vari 0 ilX sDObj newDate y m i 1 当月第一天的信息lDObj newDianaday 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 lDPOS n i lD 1 this i newcalElement y m 1 i 1 nStr1 i this firstWeek 7 lY lM lD lL if i this firstWeek 7 0 this i color red 周日颜色 节气tmp1 sTerm y m 2 1 tmp2 sTerm y m 2 1 1 this tmp1 solarTerms solarTerm m 2 this tmp2 solarTerms solarTerm m 2 1 if this firstWeek 12 7 5 黑色星期五this 12 solarFestival 黑色星期五 if y tY 今日 实训步骤 实训6对象编程的操作 自定义函数cDay 用中文显示农历的日期 functioncDay d vars switch d case10 s 初十 break case20 s 二十 break break case30 s 三十 break break default s nStr2 Math floor d 10 s nStr1 d 10 return s 实训步骤 实训6对象编程的操作 自定义函数drawCld 在表格中显示公历和农历的日期以及相关节日 varcld functiondrawCld SY SM varTF true varp1 p2 vari sD s size cld newcalendar SY SM GZ innerHTML 实训步骤 实训6对象编程的操作 for varipp 0 ipp lFtv length ipp 农历节日if parseInt lFtv ipp substr 0 2 cld sD lMonth if parseInt lFtv ipp substr 2 4 cld sD lDay lObj innerHTML lFtv ipp substr 5 Slfw lFtv ipp substr 5 if 12 cld sD lMonth 判断是否为除夕if eve cld sD lDay lObj innerHTML 除夕 Slfw 除夕 for varipp 0 ipp sFtv length ipp 公历节日if parseInt sFtv ipp substr 0 2 SM 1 if parseInt sFtv ipp substr 2 4 sD 1 lObj innerHTML sFtv ipp substr 5 Ssfw sFtv ipp substr 5 实训步骤 实训6对象编程的操作 if SM 1 5 母亲节if fat 0 if sD 1 7 Ssfw 母亲节 lObj innerHTML 母亲节 elseif fat0 s s fontcolor limegreen if s length 0 lObj innerHTML s Slfw s 节气if Slfw null 实训步骤 实训6对象编程的操作 自定义函数changeCld 在下拉列表中选择年或月时 调用自定义函数drawCld 显示公历和农历的相关信息 functionchangeCld vary m y CLD SY selectedIndex 1900 m CLD SM selectedIndex drawCld y m 用自定义变量保存当前系统中的年 月 日 varToday newDate vartY Today getFullYear vartM Today getMonth vartD Today getDate 自定义函数initial 打开页时 在下拉列表中显示当前年月 并调用自定义函数drawCld 显示公历和农历的相关信息 functioninitial CLD SY selectedIndex tY 1900 CLD SM selectedIndex tM drawCld tY tM 5 在标记的窗体载入 onLoad 事件中调用自定义函数initial 6 选择 文件 在浏览器中预览 IExplore6 0 预览网页 选择相应的年份和月份即可获取指定年月的日历相关信息 实训步骤 实训7事件处理的操作 1 熟练掌握调用事件的方法 2 熟悉掌握鼠标事件中移入移出事件的应用 实训目的 实训7事件处理的操作 编写一个JavaScript程序 实现导航条的动画效果 当用户将鼠标移动到任意一个导航按钮上时 该按钮都会突出显示 鼠标移走后 又恢复为原来位置 效果如图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 用于设置鼠标移出导航按钮上时显示的图片 代码如下