JavaScript程序设计案例教程

案例一 百花争妍 1 一 知识链接 2 1. JS的三种引入方式 2 2. JS的注释 3 3. 变量定义和赋值 4 4. 数组定义、初始化、遍历(for in) 4 5. 无参函数定义和调用 5 6. DOM元素 5 7. 定时器方法setTimeout和 clearTimeout 7 8. onload事件 8 9. 随机数和取整 9 10. getElementsByClassName方法 11 11. 选择结构 11 二 案例实现 12 1. 设计思路 12 2. 实现步骤 13 案例二 轮播图 18 一 知识链接 18 1. 常量、变量定义、赋值 18 2. 数组的定义与遍历(for) 19 3. 有参函数定义与调用 20 4. 对象(JSON)的定义与遍历 20 5. 定时器方法setInterval和clearInterval 21 6. onmouseout、onmouseover和 onclick事件 22 7. DOM元素的遍历 24 8. getElementsByTagName和 getElementById方法 26 二 案例实现 27 1. 设计思路 27 2. 实现步骤 28 案例三 捕鱼键盘猎手 34 一 知识链接 34 1. 对象的概念式 34 2. 对象的字面量语法和JSON数据格式 35 3. 对象成员的访问 36 4. for in和for of 36 5. 构造函数 37 6. 画布 39 7. 鼠标事件 47 8. 键盘事件 50 9. onload事件 52 10. 变量的作用域和闭包函数 55 11. 三种对话框 57 12. Ajax 58 13. 声音的播放 62 14. 函数参数的值传递和引用传递 64 二 案例实现 65 1. 背景场景的设计思路 65 2. 背景场景的设计实现 65 3. 欢迎界面的设计思路 69 4. 欢迎界面的设计实现 70 5. 游戏界面的设计思路 71 6. 游戏界面的设计实现 72 7. 排行榜界面的设计思路 82 8. 排行榜界面的设计实现 82 案例四 金额转换器 87 一 知识链接 88 1. querySelector和querySelectorAll 88 2. 事件流和事件对象 89 3. 字符串连接 96 4. 字符串查找 97 5. 字符串截取 99 6. while和do while循环 100 7. 动态修改网页的代码 102 二 案例实现 103 1. 设计思路 103 2. 实现步骤 103 案例五 音乐播放器 109 一 知识链接 109 1. 字符串大小写转换 109 2. 获取和修改DOM元素的属性值 111 3. encodeURIComponent 和 decodeURIComponent 113 4. className和classList 115 5. 数据类型转换 117 6. Audio音乐播放 119 二 案例实现 122 1. 设计思路 122 2. 实现步骤 122 案例六 表单验证 129 一 知识链接 129 1. 表单的submit事件 129 2. 表单的focus和blur事件 132 3. 正则表达式 133 4. Date对象 137 5. Math对象 139 6. BOM对象 142 二 案例实现 144 1. 设计思路 144 2. 实现步骤 145 参考文献 154