javascript第二章.ppt

函数和window对象 第二章 回顾与作业点评 JavaScript中BOM的作用是什么 如何使用JavaScript在页面中输出内容 如何使用JavaScript接收用户输入的信息 预习检查 在javascript中的为什么需要使用函数 Window对象常用的方法有哪些 并举例说明其用法如何能够使静止不动的时钟动起来 本章任务 制作时钟特效制作弹出广告窗口特效 演示示例 广告窗口特效 演示示例 时钟显示特效 本章目标 使用函数实现代码的重用使用window对象的open 方法制作广告窗口使用window对象的setinterval 方法实现时钟特效 什么是函数 函数的含义 类似于Java中的方法 是完成特定任务的代码语句块使用更简单 不用定义属于某个类 直接使用 如果希望单击某个按钮后在页面显示 HelloWorld 并且能够控制语句显示的次数 怎么办 演示示例 调用函数输出 HelloWorld JavaScript核心语法 系统函数自定义函数有参函数无参函数函数的调用 常用系统函数 parseInt 字符串 将字符串转换为整型数字如 parseInt 86 将字符串 86 转换为整型值86parseFloat 字符串 将字符串转换为浮点型数字如 parseFloat 34 45 将字符串 34 45 转换为浮点值34 45isNaN 用于检查其参数是否是非数字 演示示例 类型转换函数 自定义函数 创建函数无参函数有参函数 function函数名 JavaScript代码 function函数名 参数1 参数2 JavaScript代码 调用函数函数调用一般和表单元素的事件一起使用 调用格式 事件名 函数名 单击此按钮时 调用函数showHello 执行函数体中的代码 调用无参函数 调用无参函数 输出10次 HelloWorld functionshowHello for vari 0 iHelloWorld 演示示例 调用无参函数输出 HelloWorld 调用有参函数 根据输入的次数 调用有参函数 显示 HelloWorld 单击此按钮时 调用函数showHello count 执行函数体中的代码 functionshowHello count for vari 0 iHelloWorld 演示示例 调用有参函数输出 HelloWorld 练习 编写一个四则运算函数 需求说明使用prompt输入两个数和运算符号 然后计算两个数的操作结果使用switch判断运算符号调用函数计算两数的结果 完成时间 20分钟 参考代码 练习 调试给定的程序 1 训练要点使用alert 方法调试程序使用Firebug工具调试程序需求说明调试给定的程序 练习 调试给定的程序 2 实现思路使用alert 方法调试程序使用Firebug工具设置断点进行调试程序通过单步进入 单步跳过 单步退出方法进行调试 查看变量或表达式的值的方式 完成时间 20分钟 共性问题集中讲解 常见调试问题及解决办法代码规范问题 共性问题集中讲解 变量的作用域 全局变量声明在函数外 用于函数间共享局部变量声明在函数内 仅在函数内有效 varnum functionshowHello for vari 0 iHelloWorld functioncounts num prompt 请输入显示HelloWorld的次数 showHello 全局变量 局部变量 演示示例 变量的作用范围 小结 如何创建一个有参函数并实现函数调用 全局变量和局部变量的区别是什么 Window对象 常用属性常用方法常用事件 Window对象的常用属性 常用的属性 Window对象的常用方法 常用的方法 confirm 方法 confirm 与alert prompt 区别 confirm 对话框中显示的纯文本 varflag confirm 确认要删除此条信息吗 if flag true alert 删除成功 else alert 你取消了删除 open 方法 window open 弹出窗口的url 窗口名称 窗口特征 窗口特征 Window对象的常用事件 常用的事件 如何使用window对象 1 弹出窗口 弹出固定大小且无菜单栏的窗口当前页面全屏显示弹出确认消息框 如何使用window对象 2 示例完整代码 functionopen adv window open adv html functionopen fix adv window open adv html height 380 width 320 toolbar 0 scrollbars 0 location 0 status 0 menubar 0 resizable 0 functionfullscreen window open plan html fullscreen yes functionconfirm msg if confirm 你相信自己是最棒的吗 alert 有信心必定会赢 没信息一定会输 inputname con type button value 打开确认窗口 onclick confirm msg 匿名调用函数 Function函数名 javaScript代码 调用函数 onclick 函数名 网上常见匿名写法方式一 事件名 function 方式二 function JavaScript代码 直接运行函数window onload function 练习 模拟简易购物车页面 需求说明打开页面时 弹出广告页面 并且此页面可实现关闭窗口功能购物车页面可实现全屏显示提交订单页面时 弹出确认窗口 练习完整代码 完成时间 20分钟 共性问题集中讲解 常见调试问题及解决办法代码规范问题 共性问题集中讲解 演示时钟特效 如何实现如演示示例中所示的时钟效果 演示示例 时钟效果演示 由于涉及到时间的显示问题 所以要用到日期对象Date 还有时间在不停地走 因此需要不断地调用函数 所以要用到Windows的定时器setInterval 方法 Date对象 var日期对象 newDate 参数 参数格式 MMDD YYYY hh mm ss vartoday newDate 返回当前日期和时间vartdate newDate september1 2009 14 58 12 Date对象的方法 Date对象的方法 制作时钟特效 1 functiondisptime vartoday newDate 获得当前时间varhh today getHours 获得小时 分钟 秒varmm today getMinutes varss today getSeconds document getElementById myclock innerHTML hh mm ss 示例完整代码 制作时钟特效 2 制作的时钟特效示例中 时间为什么不改变 由于时间在不停地走 所以应该每隔1秒调用显示时间的方法 如何解决 使用setTimeout 方法或setInterval 定时函数 setTimeout 用法setTimeout 调用的函数 指定的时间后 setInterval 方法setInterval 调用的函数 指定的时间间隔 varmyTime setTimeout disptime 1000 varmyTime setInterval disptime 1000 setTimeout 只执行disptime 一次 如果要多次调用使用setInterval 者者让disptime 自身再次调用setTimeout 每隔1秒 1000毫秒 执行函数disptime 一次 时钟显示特效 练习 制作12小时的时钟 1 需求说明显示年 月 日显示星期几显示时钟特效 时钟为12小时进制 练习 制作12小时的时钟 2 实现思路使用getFullYear 获得当前年份使用getMonth 1获得当前月份使用getDate 获得当前日期根据getHours 获得的小时 使用if语句判断当前时间是否大于12使用getDay 获取当前表示星期几的数字 然后使用switch设置当前星期几 学员练习源代码 完成时间 20分钟 共性问题集中讲解 常见调试问题及解决办法代码规范问题 共性问题集中讲解 总结 window对象有哪些常用的方法及其含义 请列举Date对象有哪些方法 请解释setTimeout 方法与setInterval 方法的区别 及各自适用场合 请举例说明事件onload和onclick的用法 布置作业 课后作业必做教员备课时在此添加内容选做教员备课时在此添加内容提交时间 xxx提交形式 xxx预习作业背诵英文单词教员备课时在此添加内容