《网页前端技术》JavaScript任务二.ppt

JavaScript 任务二 认识JavaScript对象 案例分解 案例资讯 打印机式字符输出 页面两侧的小广告 记忆测试 很酷的日历 产生随机数 String 对象介绍 Document对象概述 Array 对象概述 Date对象概述 Math对象概述 教学目的：了解String 对象 掌握Document对象 掌握Array 对象 掌握Date对象 掌握Math对象 教学重点：掌握Document对象、掌握Array 对象 掌握Date对象、掌握Math对象 教学难点：掌握Document对象、掌握Array 对象 掌握Date对象、掌握Math对象 案例资讯 案例一 打印机式字符输出 就是在页面上显示的文字以类似于打印机的形式一个一个字依次显示出来 了解关于String对象 1.String对象概述 String对象用于处理文本（字符串） String对象的length属性声明了该字符串中的字符数 创建String对象的语法： new String(s) String(s) 案例步骤 1．打字机式字符输出创建html文件以后，我们可以在里面输入如下参考代码： Script type=text/JavaScript document.write(这个例子是让大家对Document对象有一个初步+ 了解!br/) document.title =设置文档标题等价于HTML的title标签‘ document.bgColor=#FFFF66“ document.fgColor = #FF0000“ document.linkColor = #0000CC“ document.vlinkColor = #0FFF66“ document.write(p style=font-size: 20pt; +color: #FF0066;background-color: #00FFCC;) document.write(document.write()添加文字的显示样式。) document.write(/p) /Script /Head body p 您还可以找到 a href=/fwlink/?LinkID=152368 title=“MSDN ASP.NET 文档”MSDN上有关 ASP.NET 的文档/a。 /body 案例资讯 案例二 页面两侧的小广告 网页两侧显示小广告的功能 每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。 1.Document对象概述 Document对象是Window对象的一部分，可通过window.document属性对其进行访问。 HTMLDocument接口对DOM Document接口进行了扩展，定义HTML专用的属性和方法。 案例步骤 1．页面两侧的小广告 创建html文件以后，我们可以在里面输入代码 之后会显示类似如图的结果： 案例资讯 案例三 记忆测试 本案例实现的是一个小游戏，翻开两个图片，如果匹配的话则两张图片翻开，如果不匹配则两张图片合上，计算最后把所有的图片翻开所需要的时间，图片总共是18对。 Array对象用于在单个的变量中存储多个值。 案例步骤 1．记忆测试游戏 创建html文件以后，我们可以在里面输入代码 之后会显示类似如图的结果： 游戏刚开始时运行的效果如图2-5所示： 游戏运行中如图2-6所示：（此时刚好有一对图片相匹配） 运行结束时的显示结果如图2-7所示： 案例资讯 案例四 很酷的日历 本案例实现的是一个日历，在页面上显示一个日历，上面的内容包括日期（年月日）、周几、时间（时分秒） Date对象用于处理日期和时间 Document对象概述 案例步骤 很酷的日历 创建html文件以后，我们可以在里面输入代码 之后会显示类似如图的结果： Date对象用于处理日期和时间 案例五 产生随机数 本案例实现的是产生随机数的例子，根据选择的数n（产生几个随机数）和产生随机数的范围m（输入的数位m，m为正整数，范围为0-m），点击按钮会产生，会产生n个范围为0-m的正整数，且这n个数不相同，如果选择的数n大于输入的数m则会提示操作错误信息。 案例资讯 1.Ma