第8章 JavaScript编程基础-补充案例
JavaScript程序设计基础教程课程设计
JavaScript程序设计基础教程课程设计介绍本篇文档是针对JavaScript程序设计基础教程的课程设计，旨在帮助学生更好地掌握JavaScript程序设计的基础知识。
目标通过本次课程设计，学生应该能够掌握以下内容：•了解JavaScript程序设计的基础知识•掌握JavaScript的语法和基本概念•能够运用JavaScript进行简单的编程•了解JavaScript在实际开发中的应用设计第一部分：基础知识第一部分主要介绍JavaScript的基础知识，包括变量、数据类型、运算符、流程控制等。
变量•什么是变量•变量的声明与定义•变量的命名规范数据类型•简单数据类型：数值、字符串、布尔值•复杂数据类型：数组、对象、函数运算符•算术运算符•比较运算符•逻辑运算符流程控制•if语句•switch语句•for循环•while循环第二部分：语法和基本概念第二部分主要介绍JavaScript的语法和基本概念，包括函数、变量作用域、对象、继承等。
函数•什么是函数•函数的定义和调用•函数的参数•函数的返回值变量作用域•什么是作用域•局部作用域和全局作用域•作用域链对象•什么是对象•对象的属性和方法•对象的创建和使用继承•继承的概念•原型和原型链•实现继承的方法第三部分：编程实践第三部分主要是通过编程实例进行实践，帮助学生巩固所学知识，提高编程能力。
实例1：计算器•实现一个简单的计算器•支持加、减、乘、除四种基本运算•支持连续运算和括号运算实例2：DOM操作•实现一个简单的TodoList•支持添加、删除、编辑、完成等功能•利用DOM操作实现页面效果结论本次课程设计主要是为了帮助学生掌握JavaScript程序设计的基础知识，通过基础知识、语法和基本概念以及编程实践的介绍，使学生能够对JavaScript程序设计有更深刻的认识，并通过实践巩固所学知识，提高编程能力。
JavaScript(课件)-(版)
深入浅出JavaScript引言：JavaScript是一种广泛应用于Web开发的编程语言，它为网页带来了动态效果和交互性。
本课件旨在为您提供关于JavaScript的全面概述，包括其基本概念、语法、功能和应用场景。
通过本课件的讲解，您将能够理解JavaScript的工作原理，并能够运用它来创建更加丰富和互动的Web体验。
第一部分：JavaScript概述1.1JavaScript的历史和发展1.2JavaScript的主要特点和优势1.3JavaScript在Web开发中的应用场景第二部分：JavaScript基础语法2.1变量和数据类型2.2运算符和表达式2.3控制语句和循环语句2.4函数的定义和调用第三部分：JavaScript对象和数组3.1对象的基本概念和创建方式3.2数组的基本概念和操作方法3.3内置对象和全局对象第四部分：JavaScript高级特性4.1闭包的概念和应用4.2原型链和继承4.3异步编程和回调函数4.4事件处理和事件委托第五部分：JavaScript与DOM操作5.1DOM的基本概念和结构5.2DOM的查询和操作方法5.3事件冒泡和事件捕获5.4AJAX和动态数据加载第六部分：JavaScript框架和库6.1jQuery的基本使用和优势6.2React的基本概念和组件化开发6.3Vue.js的基本概念和双向数据绑定6.4Angular的基本概念和依赖注入第七部分：JavaScript最佳实践和性能优化7.1代码规范和命名约定7.2代码压缩和合并7.3异步加载和懒加载7.4优化DOM操作和事件处理第八部分：JavaScript安全性和错误处理8.1JavaScript的安全性问题8.2错误处理和异常捕获8.3跨域请求和安全措施结论：通过本课件的学习，您已经了解了JavaScript的基本概念、语法和功能，并能够运用它来创建动态和交互式的Web页面。
JavaScript作为一种灵活和强大的编程语言，将继续在Web开发中发挥重要作用。
JavaScript教案
JavaScript最新教案第一章：JavaScript简介1.1 课程目标了解JavaScript的历史和发展掌握JavaScript的基本概念和特点理解JavaScript在Web开发中的作用1.2 教学内容JavaScript的起源和发展JavaScript的语法和特点JavaScript的核心概念JavaScript在现代Web开发中的应用1.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答1.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料1.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第二章：JavaScript基础语法2.1 课程目标掌握JavaScript的基本语法和结构理解变量、数据类型和运算符的使用学会使用控制结构和函数2.2 教学内容JavaScript的基本语法和结构变量和数据类型的定义和使用运算符的种类和功能控制结构的作用和实现函数的定义和调用2.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答2.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料2.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第三章：JavaScript对象和数组3.1 课程目标理解对象的概念和作用掌握对象的创建和属性的操作学会使用数组和字符串的处理方法3.2 教学内容对象的概念和作用创建对象和使用构造函数属性和属性的操作数组的概念和操作方法字符串的处理和操作3.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答3.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料3.5 教学评估练习题和代码实现项目评估和反馈第四章：JavaScript事件处理4.1 课程目标理解事件的概念和作用掌握事件处理的方法和技巧学会使用事件监听器和事件委托4.2 教学内容事件的概念和作用事件处理的方法和技巧事件监听器的使用和实现事件委托的原理和应用4.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答4.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料4.5 教学评估练习题和代码实现项目评估和反馈第五章：JavaScript高级应用5.1 课程目标掌握JavaScript的高级特性学会使用ES6和ES7的新特性理解模块化和组件化的开发模式5.2 教学内容JavaScript的高级特性ES6和ES7的新特性模块化的概念和实现组件化的开发模式和应用5.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答5.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料5.5 教学评估练习题和代码实现项目评估和反馈第六章：JavaScript DOM操作6.1 课程目标理解DOM的概念和结构掌握DOM的查询和修改方法学会使用DOM事件处理和动画6.2 教学内容DOM的概念和结构DOM的查询方法（getElementById, getElementsByClassName, querySelector等）DOM的修改方法（添加、删除、修改元素和属性）DOM事件处理（事件监听器、事件流、事件对象）DOM动画的实现（transition, animation等）6.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答6.4 教学资源教案和演示文稿示例代码和练习题6.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第七章：JavaScript网络请求7.1 课程目标理解网络请求的概念和原理掌握JavaScript中网络请求的实现学会使用协议和REST API7.2 教学内容网络请求的概念和原理JavaScript中的网络请求（XMLHttpRequest, Fetch API）协议的基本概念和状态码REST API的设计原则和实现7.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答7.4 教学资源教案和演示文稿示例代码和练习题7.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第八章：JavaScript模块化和打包8.1 课程目标理解模块化的概念和优势掌握JavaScript模块化的实现学会使用打包工具和构建流程8.2 教学内容模块化的概念和优势JavaScript模块化的实现（CommonJS, ES6模块）打包工具的使用（Webpack, Parcel, Rollup）构建流程和自动化（Gulp, Grunt, npm scripts）8.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答8.4 教学资源教案和演示文稿示例代码和练习题8.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第九章：JavaScript前端框架9.1 课程目标理解前端框架的概念和作用掌握常见前端框架的使用学会前端框架的原理和扩展9.2 教学内容前端框架的概念和作用常见前端框架（React, Vue, Angular）的使用和比较前端框架的原理和扩展（组件化、状态管理等）9.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答9.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料9.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈第十章：JavaScript项目实践10.1 课程目标理解项目实践的重要性掌握项目开发的流程和技巧完成一个简单的JavaScript项目10.2 教学内容项目实践的重要性项目开发的流程和技巧（需求分析、设计、编码、测试）完成一个简单的JavaScript项目（如待办事项列表、天气应用等）10.3 教学方法讲解和演示示例代码和练习互动讨论和问题解答10.4 教学资源教案和演示文稿示例代码和练习题在线资源和参考资料10.5 教学评估课堂参与和讨论练习题和代码实现项目评估和反馈重点和难点解析一、JavaScript简介1.1 重点和难点解析JavaScript的历史和发展JavaScript的基本概念和特点JavaScript在Web开发中的作用二、JavaScript基础语法2.1 重点和难点解析变量和数据类型的定义和使用运算符的种类和功能控制结构的作用和实现函数的定义和调用三、JavaScript对象和数组3.1 重点和难点解析对象的概念和作用创建对象和使用构造函数属性和属性的操作数组的概念和操作方法字符串的处理和操作四、JavaScript事件处理4.1 重点和难点解析事件的概念和作用事件处理的方法和技巧事件监听器的使用和实现事件委托的原理和应用五、JavaScript高级应用5.1 重点和难点解析JavaScript的高级特性ES6和ES7的新特性模块化的概念和实现组件化的开发模式和应用六、JavaScript DOM操作6.1 重点和难点解析DOM的概念和结构DOM的查询方法DOM的修改方法DOM事件处理和动画七、JavaScript网络请求7.1 重点和难点解析网络请求的概念和原理JavaScript中的网络请求协议和REST API八、JavaScript模块化和打包8.1 重点和难点解析模块化的概念和优势JavaScript模块化的实现打包工具和构建流程九、JavaScript前端框架9.1 重点和难点解析前端框架的概念和作用常见前端框架的使用和比较前端框架的原理和扩展十、JavaScript项目实践10.1 重点和难点解析项目实践的重要性项目开发的流程和技巧完成一个简单的JavaScript项目全文总结和概括：本文针对“JavaScript最新教案”的十个章节进行了重点和难点的解析。
学习JavaScript编程基础知识
学习JavaScript编程基础知识第一章：介绍JavaScript编程语言JavaScript是一种脚本语言，用于在网页中实现动态交互和功能。
它是一种基于对象的语言，与HTML和CSS结合使用，可以为网页添加交互性和动画效果。
JavaScript是一门强大的编程语言，可以实现各种功能，如表单验证、用户界面控制、动态内容加载等。
第二章：JavaScript语法基础在学习JavaScript编程之前，首先需要了解JavaScript的语法基础。
JavaScript使用变量来存储数据，并使用操作符来对数据进行操作。
常见的操作符包括算术操作符、比较操作符和逻辑操作符。
此外，JavaScript还有条件语句和循环语句，用于控制程序的执行流程。
第三章：JavaScript数据类型JavaScript有许多内置的数据类型，包括字符串、数字、布尔值、数组、对象等。
了解这些数据类型以及它们的特点对于编写高效的JavaScript代码至关重要。
我们可以使用typeof运算符来确定变量的数据类型，并使用相应的方法和操作符来处理不同的数据类型。
第四章：JavaScript函数函数是JavaScript编程的核心部分。
函数是一段可以重复使用的代码块，可以接受参数和返回值。
理解如何定义和调用函数，以及如何使用参数和返回值，对于编写复杂的JavaScript程序至关重要。
我们还可以在函数内部创建局部变量，并使用递归来实现循环。
第五章：JavaScript对象对象是JavaScript编程中的关键概念之一。
对象是一种复合的数据类型，可以存储多个键值对。
在JavaScript中，可以使用对象来表示现实世界中的实体和概念。
我们可以通过使用点符号或方括号来访问对象的属性和方法。
此外，JavaScript还提供了一些内置对象，如数组对象、日期对象和正则表达式对象。
第六章：JavaScript事件JavaScript事件是处理用户交互的重要机制。
2024版JavaScript基础课件完整版
数组的定义与使用
数组的定义
数组是一种特殊的对象，用于存储一 系列有序的值。在JavaScript中，数 组可以包含任意类型的值，包括数字、 字符串、布尔值、对象等。
数组的使用
可以通过索引来访问数组中的元素，使 用push()和pop()方法添加或删除元素， 使用sort()和reverse()方法对数组进行 排序或反转等操作。
DOM结构 DOM将HTML或XML文档转化为一个树形结构，文档中 的每个元素、属性和文本都被视为一个节点（Node）， 节点之间通过父子或兄弟关系形成树状结构。
节点类型
在DOM中，节点类型包括元素节点、属性节点、文本节 点、注释节点等。
访问和修改DOM元素
获取元素 修改元素内容 修改元素属性 修改元素样式
辑非等。
用于将右侧的值赋给左 侧的变量，如等于赋值、
加等于、减等于等。
控制流语句
条件语句
使用`if...else`语句根据条 件执行不同的代码块。
循环语句
使用`for`、`while`或 `do...while`语句重复执行 一段代码，直到满足特定 条件为止。
跳转语句
使用`break`或`continue` 语句在循环中提前结束或 跳过当前迭代。
常用内置对象与方法
Date对象
用于处理日期和时间，可以创建 日期实例、获取日期和时间信息、 进行日期计算等。
String对象
用于处理字符串，提供了许多字 符串操作方法，如charAt()、 indexOf()、replace()等。
Math对象
提供了一系列数学常数和函数， 如Math.PI、Math.random()、 Math.sin()等。
本地开发环境
从零开始学习JavaScript编程语言的基础知识
从零开始学习JavaScript编程语言的基础知识JavaScript是一种广泛应用于Web开发的编程语言，具有丰富的功能和灵活的语法。
对于初学者来说，从零开始学习JavaScript编程语言的基础知识可能有些困难，但只要理解了其中的核心概念和基本语法，就能够轻松入门。
第一章：引言在开始学习JavaScript之前，了解一下JavaScript的历史和应用场景是很有必要的。
JavaScript最早由网景公司的程序员Brendan Eich于1995年设计和开发，并且很快成为了Web开发的标准脚本语言。
如今，几乎所有的网页都使用JavaScript来实现交互功能和动态效果。
第二章：语言基础学习一门编程语言的基础知识是很重要的，JavaScript也不例外。
在这一章中，我们将介绍JavaScript的基本语法、数据类型、变量、运算符等基础概念。
学习这些基础知识将帮助你理解和编写简单的JavaScript代码。
第三章：控制流程控制流程是编程中非常常见和重要的概念之一，它控制了代码的执行顺序。
在JavaScript中，我们可以使用条件语句（if...else、switch）、循环语句（for、while）等实现控制流程。
这一章将详细介绍这些语句的用法，并通过实例演示如何使用它们。
第四章：函数函数是JavaScript中的重要组成部分，它能够封装一段可重复使用的代码块，并且提供了参数和返回值的功能。
在这一章中，我们将学习如何声明和调用函数，理解函数的作用域和闭包等概念。
此外，我们还将介绍一些常用的内置函数和自定义函数。
第五章：数组和对象数组和对象是JavaScript中的两种复杂数据类型，它们分别用于存储多个值和键值对。
在这一章中，我们将学习创建和操作数组、访问和修改对象属性的方法，并介绍一些高级的数组和对象操作技巧，如遍历、排序等。
第六章：DOM操作DOM（文档对象模型）是JavaScript与HTML文档交互的接口，通过操作DOM，我们可以实现网页的动态效果和交互功能。
第8章 vba编程基础
8
（2）使用Dim语句声明变量
声明变量的一般方法是用Dim语句，其格式为： Dim 变量名 [As 数据类型] 说明：省略[As 数据类型]，则默认定义的变量为 Variant数据类型。 可以使用Dim语句在一行中声明多个变量。 例： Dim strX As String Dim intX As Integer, strZ As String Dim i,j,k As Integer
逻辑运算符的优先级低于关系运算符，常用的3个逻辑运算 符之间的优先级由高到低依次为：Not→And →Or。
18
（5）对象运算符
对象运算符有“!”和“.”两种。
使用“!”运算符可以引用一个窗体、报表或窗体和报表 上的控件。
例：
运算符 Forms![学生信息] Forms![学生信息]![学号] Reports![学生成绩] 引用含义 标识打开的“学生信息”窗体 标识打开的“学生信息”窗体 上的“学号”控件 标识打开的“学生成绩”报表
注意：Type语句只能在模块的通用声明部分使用。
10
使用了Type语句声明了一个用户自定义类型后，就 可以在该声明范围内的任何位置声明该类型的变量。 可以使用Dim语句声明用户自定义类型的变量。 例：Dim x as XS =“张红” x.BirthDate=#80/10/12# x.Sex=0
21
1．注释语句
（1）Rem语句 ，语句格式：Rem 注释内容 （2）英文单引号“’”， 语句格式：’注释内容 注释语句可以添加到程序模块的任何位置，并且默认以 绿色文本显示。 例：str1=“hello” :Rem str1赋值为“hello” str2=“world” „str2赋值为“world”
JavaScript基础介绍与实例
JavaScript基础介绍与实例⼀、什么是JavaScriptJavaScript是⼀种具有⾯向对象能⼒的、解释性的程序设计语⾔。
更具体⼀点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语⾔。
因为他不需要在⼀个语⾔环境下运⾏，⽽只需要⽀持它的浏览器即可。
它的主要⽬的是：验证发往服务器端的数据的合法性、增加web互动、加强⽤户体验度等。
基于对象：JavaScript中内置了很多对象，直接调⽤对象的属性和⽅法进⾏操作，简化编程。
事件驱动：程序开始运⾏到结束，可以⼀直侦听事件。
解释性语⾔：不需要编译成计算机专门去读的⽂件，调⽤哪块解释哪块，并⾮⼀次性编译。
例如：c#就是编译性语⾔，如果要运⾏C#语⾔编写的程序，就必须先编译成exe或者dll⽂件才能运⾏。
⽽JavaScript不需要预先编译脚本语⾔：需要嵌⼊到别的语⾔之中，JS需要嵌⼊在HTML中，单独存在没有意义。
⼆、JavaScript和ECMAScript的关系ECMAScript是JavaScript的标准和基础三、JavaScript特点1、松散性（弱类型）JavaScript语⾔核⼼与C、C++、Java相似，⽐如条件判断、循环、运算符等。
但是，它却是⼀种松散类型的语⾔，也就是说，它的变量不必具有⼀个明确的类型。
（变量⽆需声明也可以使⽤，⼀个变量赋值为数字类型，还可以在赋值为字符串等其它类型）2、对象属性JavaScript中的对象把属性名映射为任意的属性值。
它的这种⽅式很像哈希表或关联数组，⽽不像C中的结构体或者C++、Java中的对象。
3、继承机制JavaScript中的⾯向对象继承机制是基于原型的（原型：最基础的基类），和C++以及Java中的继承⼤不相同（可以⼦类继承⽗类）。
4、严格区分⼤⼩写。
四、JavaScript组成部分⼀个完整的JavaScript应该由下列三个不同的部分组成：1、核⼼（ECMAScript）主要定义了JavaScript的语⾔基础部分，各个浏览器都严格遵守该规范，没有兼容性问题，ECMAScript规范由ECMA制订。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第8章补充案例【案例8-1】弹出一个警示框一、案例描述1、考核知识点alert()函数2、练习目标掌握alert()函数的应用。
3、需求分析在浏览网页时，经常会看到一些弹出的警示框，用于提醒用户当前的操作是否完成，例如，在电商网站中，当完成付款时，会弹出支付情况的警示框。
下面，本案例将通过引入JavaScript的相关知识创建一个“支付已完成！”的警示框。
4、案例分析1)效果如图8-1所示。
图8-1“支付已完成！”效果展示2)具体实现步骤如下：a)使用内嵌式引入JavaScript。
b)通过alert()函数输出字符串。
二、案例实现根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">3<html xmlns="/1999/xhtml" xml:lang="en">4<head>5<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6<title>弹出一个警示框</title>7</head>12 8 <body>9<script type="text/javascript"> 10alert("支付已完成！") 11 </script>12 </body>13 </html>保存后，在火狐浏览器中预览，效果如图8-2所示。
图8-2 “支付已完成！”效果展示【案例8-2】 简短的文字描述一、案例描述1、 考核知识点变量的声明与赋值2、 练习目标掌握变量声明与赋值的应用。
3、 需求分析网页中的文字描述是传输网页信息的重要途径，尤其是一些新闻网页，文字描述占有很大的篇幅，本案例将通过定义变量的方法引入一段文字，其中不变的内容通过字符串输出。
4、 案例分析1) 效果如图8-3所示。
图8-3 简短的文字描述2) 具体实现步骤如下：a) 设置body 的背景色，并定义文字样式。
b) 声明变量并进行赋值。
3 二、案例实现根据上面的分析，可以通过简单的JavaScript 代码来实现这一效果，具体代码如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2"/TR/xhtml1/DTD/xhtml1-transitional.dtd">3 <html xmlns="/1999/xhtml" xml:lang="en">4 <head>5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6 <title>简短的文字描述</title>7 <style type="text/css">8body{ 9background: #4bceff; 10color:#fff; 11font-weight: bold;12 } 13 </style>14 </head>15 <body><p>16<script type="text/javascript"> 17var name; //声明变量name 18name="张三"; //把字符串“张三”存储到变量name 中 19age=20; //变量age 被隐式声明，并赋值整数20 20document.write(name); //读取变量name 的值，并将它显示在页面上 21document.write("的年龄是:");//在页面上输出字符串“的年龄是：” 22document.write(age); //读取变量age 的值，并将它显示在页面上 23document.write("岁"); //输出字符串“岁” 24 </script>25 </p></body>26 </html>保存后，在火狐浏览器中预览，效果如图8-4所示。
图8-4 “文字描述”效果展示【案例8-3】手动跳转焦点图一、案例描述1、考核知识点调用函数2、练习目标掌握调用函数的方法。
能够准确修改元素样式。
了解鼠标移入事件。
3、需求分析在浏览一些电商站时经常会看到一些大的焦点图映入眼帘，不仅使整个网站看起来更加美观，还增加了网站的点击量。
本案例将通过JavaScript调用函数的方法，制作一款手动跳转的焦点图。
4、案例分析1)刚打开页面时，效果如图8-5所示。
图8-5手动跳转焦点图1当鼠标移到第二个按钮时，效果如图8-6所示。
45图8-6 手动跳转焦点图22) 具体实现步骤如下：a) 图片由<img>标记定义，按钮由无序列表<ul>定义，外部嵌套的大盒子由<div>定义。
b) 控制大盒子的宽高和外边距，并对大盒子设置相对定位。
c) 对<ul>标记设置绝对定位。
d) 定义<li>左浮动，并设置其宽高、背景颜色、外边距及文字样式。
e) 通过鼠标移入事件调用函数。
二、案例实现1、制作页面结构 新建HTML 页面，具体代码如下：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2 "/TR/xhtml1/DTD/xhtml1-transitional.dtd">3 <html xmlns="/1999/xhtml" xml:lang="en">4 <head>5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6 <title>手动跳转焦点图</title>7 </head>8 <body>9<div class="box"> 10<img src="images/1.jpg" alt="" id="pic" /> 11<ul> 12<li id="first" style="background:pink;" onmouseover="one()" >1</li> 13<li id="twice" onmouseover="two()" >2</li> <!-- 第二个事件源 --> 14</ul> 15 </div>16 </body>17 </html>2、定义CSS 样式6 对应的CSS 样式代码如下： 1 *{margin:0;padding:0;}2ul{list-style: none;}3 .box{4width: 730px; 5height: 454px; 6margin:100px auto; 7position: relative;8 }9 .box ul{10position:absolute; 11bottom:10px; 12right:10px; 13 }14 .box ul li{15float: left; 16height: 20px; 17width:20px; 18background: #ccc; 19margin:0 5px; 20text-align: center; 21font:12px/20px "宋体"; 22cursor: pointer; 23 } 保存后，在火狐浏览器中预览，效果如图8-7所示。
图8-7 CSS 效果展示7 3、添加JavaScript 效果 添加JavaScript 效果，具体代码如下：1 function two()2{ 3document.getElementById("pic").src="images/2.jpg"; 4document.getElementById("twice").style.backgroundColor="pink"; 5document.getElementById("first").style.backgroundColor=""; 6} 7 function one(){8document.getElementById("pic").src="images/1.jpg"; 9document.getElementById("first").style.backgroundColor="pink"; 10document.getElementById("twice").style.backgroundColor=""; 11 } 刷新页面后，鼠标划过按钮，按钮样式随图片一同变化。
【案例8-4】年龄计算小游戏一、案例描述1、 考核知识点节点的访问2、 练习目标掌握获取对象的方法。
了解鼠标点击事件。
3、 需求分析运用JavaScript 中的表达式可以实现很多有趣的效果，本案例将带领大家制作一款年龄计算小游戏，输入出生年份，点击“计算年龄”按钮，即可得出相应的年龄。