JavaScript程序设计(第2版)第6章01.事件的基本概念
合集下载
JavaScript程序设计(第2版)01.对象的基本概念
对象名["属性名"]
（3）通过循环语句。语法：
for(var 变量 in 对象变量){……对象变量[变量]……}
（4）通过With语句。语法：
with(对象变量){ ……直接使用对象属性名、方法名…… }
使用对象的方法 使用With语句或通过圆点（.）运算符就可以得到对象的方法。
对象变量.对象方法名()
例如，实例化一个字符串对象。
var newString=new String("I like JavaScript!");
//实例化一个字符串对象
在JavaScript中使用对象
使用对象的属性 使用下述几种方法可以得到对象的属性值。
（1）通过圆点（.）运算符。语法：
对象名.属性名
（2）通过属性名。语法：
JavaScript程序设计（第2版）01.对象 的基本概念
什么是对象
JavaScript是一种基于对象（Object）的语言，它支 持3种对象：内置对象、用户自定义对象和浏览器对象，其 中内置对象和浏览器对象合称为预定义对象。通过基于对 象的程序设计可以用更直观模块化和可重复使用的方式进行 程序开发。
在JavaScript中使用对象的具体应用会在下面各节中逐步进行详细讲解。
一组包含数据的属性和对属性中包含数据进行操作的方 法称为对象。例如，要在网页是输出字符串，所针对的对 象就是document，所用的属性名是write，如：
("我喜欢学JavaScript");
就是在网页上输出字符串“我喜欢学JavaScript”。
创建对象
对于已定义的对象，使用之前首先要使用JavaScript运算符 “new”对已定义的对象创建一个对象的“实例”。
（3）通过循环语句。语法：
for(var 变量 in 对象变量){……对象变量[变量]……}
（4）通过With语句。语法：
with(对象变量){ ……直接使用对象属性名、方法名…… }
使用对象的方法 使用With语句或通过圆点（.）运算符就可以得到对象的方法。
对象变量.对象方法名()
例如，实例化一个字符串对象。
var newString=new String("I like JavaScript!");
//实例化一个字符串对象
在JavaScript中使用对象
使用对象的属性 使用下述几种方法可以得到对象的属性值。
（1）通过圆点（.）运算符。语法：
对象名.属性名
（2）通过属性名。语法：
JavaScript程序设计（第2版）01.对象 的基本概念
什么是对象
JavaScript是一种基于对象（Object）的语言，它支 持3种对象：内置对象、用户自定义对象和浏览器对象，其 中内置对象和浏览器对象合称为预定义对象。通过基于对 象的程序设计可以用更直观模块化和可重复使用的方式进行 程序开发。
在JavaScript中使用对象的具体应用会在下面各节中逐步进行详细讲解。
一组包含数据的属性和对属性中包含数据进行操作的方 法称为对象。例如，要在网页是输出字符串，所针对的对 象就是document，所用的属性名是write，如：
("我喜欢学JavaScript");
就是在网页上输出字符串“我喜欢学JavaScript”。
创建对象
对于已定义的对象，使用之前首先要使用JavaScript运算符 “new”对已定义的对象创建一个对象的“实例”。
JavaScript基础PPT课件
事件类型、监听和传播方式讲解
事件类型 JavaScript中支持多种事件类型，包括鼠标事件、键盘事 件、表单事件、窗口事件等。每种事件类型都对应一个特 定的触发条件和处理方式。
事件监听 可以使用`addEventListener`方法为元素添加事件监听器， 当指定的事件发生时，会调用监听器中的回调函数处理事 件。
移动端适配与优化
探讨针对不同设备和浏பைடு நூலகம்器的 JavaScript代码适配与优化策略， 提高页面性能和用户体验。
行业发展趋势预测
ES6+新特性
01
分析ECMAScript 6及以后版本的新特性和发展趋势，如模块化、
异步编程、装饰器等。
前端框架与库
02
探讨React、Vue等前端框架以及配套库在Web开发中的应用和
和3D游戏。
移动应用开发
通过React Native、Cordova 等框架，可以使用JavaScript
开发跨平台的移动应用。
服务器端开发
Node.js使得JavaScript可以在 服务器端运行，处理HTTP请
求、数据库操作等。
02
JavaScript基础知识
变量与数据类型
变量声明
使用`var`、`let`或`const`关键字声明 变量，分别表示可变变量、块级作用 域可变变量和常量。
逻辑运算符
用于进行逻辑运算，包括`&&`、 `||`和`!`。
流程控制语句
01
02
03
条件语句
使用`if`、`else if`和`else` 关键字实现条件判断。
循环语句
包括`for`、`while`和 `do...while`循环，用于重 复执行某段代码。
JavaScript程序设计(第2版)第6章04.表单相关事件
结果如图6-18所示。
图6-18 文本框获得焦点时改变背景颜色
失去焦点修改事件
失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理 程序。该事件一般在下拉文本框中使用。 例6-11 下面的实例是在用户选择下拉文本框中的颜色时，通过onchange事件来相应的改变 文本框的字体颜色。程序代码如下。
表单相关事件
本讲大纲：
1、获得焦点与失去焦点事件 2、失去焦点修改事件 3、表单提交与重置事件
获得焦点与失去焦点事件
获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（r） 是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。 例6-10 下面的实例是在用户选择页面中的文本框时，改变文本框的背景颜色为淡蓝色，当选择其他 文本框时，将失去焦点的文本框背景颜色恢复原始状态。程序代码如下。
<form name="formname" onReset="return Funname" onsubmit="return Funname " ></form> formname：表单名称。 Funname：函数名或执行语句，如果是函数名，在该函数中必须有布尔型的返回值。
说
明
如果在onsubmit和onreset事件中调用的是自定义函数名，那么，必须在函数名的前面加return语句，否则，不论在函数 中返回的是true，还是false，当前事件所返回的值一律是true值。
例6-12 下面的实例是在提交表单时，调用check()函数判断表单元素是否为空，注意一定要将 当前表单作为参数传递到check()函数中。然后应用JavaScript编写检查表单元素是否为空的函数 check()，该函数只有一个参数Form，用于指定要进行检查的表单对象，无返回值。程序代码如
JavaScript程序设计(第2版)06.编辑事件
width="150" height="120" border="0"> </td> <td id="td2" align="center" width="165" height="136" ondragenter="DragObject(event)" ondragover="DragObject(event)" ondragleave="DragObject(event)" ondrop="DragObject(event)"> </td>
例6-18 下面通过对图片的拖曳操作，对ondragover、ondragenter、ondragleave和ondrop事 件的相关应用在窗口标题栏中进行显示。程序代码如下。
<body> <table width="330" height="136" border="1">
<tr> <td id="td1" align="center" width="165" height="136"> <input name="imageField" type="image" src="flower.jpg"
编辑事件
本讲大纲：
1、文本编辑事件 2、对象拖动事件
文本编辑事件
文本编辑事件是对浏览器中的内容进行选择、复制、剪切和粘贴时所触发的事件。 1．复制事件 复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序，复制事件有 onbeforecopy和oncopy两个事件，onbeforecopy事件是将网页内容复制到剪贴版时触发事件处 里程序，oncopy事件是在网页中复制内容时触发事件处里程序。 例如，不允许复制网页中的内容。代码如下：
例6-18 下面通过对图片的拖曳操作，对ondragover、ondragenter、ondragleave和ondrop事 件的相关应用在窗口标题栏中进行显示。程序代码如下。
<body> <table width="330" height="136" border="1">
<tr> <td id="td1" align="center" width="165" height="136"> <input name="imageField" type="image" src="flower.jpg"
编辑事件
本讲大纲：
1、文本编辑事件 2、对象拖动事件
文本编辑事件
文本编辑事件是对浏览器中的内容进行选择、复制、剪切和粘贴时所触发的事件。 1．复制事件 复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序，复制事件有 onbeforecopy和oncopy两个事件，onbeforecopy事件是将网页内容复制到剪贴版时触发事件处 里程序，oncopy事件是在网页中复制内容时触发事件处里程序。 例如，不允许复制网页中的内容。代码如下：
HTML CSS JavaScript网页制作(第2版)
04
6.4设置背 景
06
6.6设置表 格样式
05
6.5图文混 排
6.7设置表单样式
6.8使用CSS设置常 用样式修饰的综合案
例
6.9实训——制作梦 想橱柜商务安全中心 页面
习题6
7.1使用CSS设置链 接
7.2用CSS设置列表
7.3创建导航菜单
7.4使用CSS设置链 接与导航菜单综合案 例
7.5实训——梦 想商务平台技 术支持页面
习题7
8.2在网页中调用 JavaScript
8.1 JavaScript简 介
8.3常见的网页特 效
8.4实训——制 作二级纵向列 表模式的导航 菜单
习题8
9.1网站的开发流程 9.2设计首页布局
9.3首页的制作 9.4制作产品中心页
9.6制作新闻资讯 页
9.5制作产品明细 页
习题9
10.1制作后台管理 登录页面
精彩摘录
这是《HTML+CSS+JavaScript网页制作（第2版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
感谢观看
3.6实训——制作 梦想橱柜联系信息
表单
3.5换行标签<br/>
习题3
1
4.1 CSS概述
2
4.2 CSS语法 基础
3
4.3 CSS的属 性单位
4 4.4 CSS与
HTML文档的结 合方法
5
4.5 HTML文档 结构
4.7实训——制作 梦想橱柜行业资讯
页面
4.6元素类型
习题4
5.1 Web标准
5.2认识Div+CSS布 局
5.3 CSS盒模型 5.4盒子的定位
JavaScript程序设计(第2版)01.JavaScript简述
例如，在签写许愿信息时，为了让用户可以实时看到添加后字条的样式，用户每输入 一个文字，在右侧的字条预览区实时预览签写许愿字条内容的效果，如图2-3所示。
图2-3 实时预览许愿字条
动画效果 在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用JavaScript 脚本语言也可以实现动画效果，例如在页面中实现一种星星闪烁的效果，如图2-4所示 。
允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地 防止数据的丢失。
JavaScript简述
本讲大纲：
1、什么是JavaScript 2、JavaScript的作用 3、JavaScript的基本特点
格式性校验可以只发生在客户端，即在表单提交到服务器端之前完成。JavaScript能及时响应用户 的操作，对提交表单做即时的检查，无需浪费时间交由CGI验证。JavaScript常用于对于用户输入的格 式性校验。 如图2-2所示是一个要求用户输入购卡人的详细信息，它要求对用户的输入进行以下校验。 （1）学生考号、移动电话、固定电话和E-mail不能为空。 （2）学生考号必须是12位。 （3）移动电话必须由11位数字组成，且以“13”和“15”开头。 （4）固定电话必须是“3位区号-8位话号”或“4位区号-7位或8位话号”。 （5）E-mail必须包含“@”和“.”两个有效字符。 当用户输入不符合指定格式的移动电话号码时，就会在页面输出提示信息“移动电话号码的格式不正 确”，如图2-2所示。
图2-6 文字特效Leabharlann JavaScript的基本特点
JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地 应用于Internet网页制作上。JavaScript脚本语言具有以下几个基本特点。 解释性 JavaScript不同于一些编译性的程序语言，例如C、C++等，它是一种解释性的程序语言，它 的源代码不需要经过编译，而直接在浏览器中运行时被解释。 基于对象 JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能 可以来自于脚本环境中对象的方法与脚本的相互作用。 事件驱动 JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应
图2-3 实时预览许愿字条
动画效果 在浏览网页时，经常会看到一些动画效果，使页面显得更加生动。使用JavaScript 脚本语言也可以实现动画效果，例如在页面中实现一种星星闪烁的效果，如图2-4所示 。
允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地 防止数据的丢失。
JavaScript简述
本讲大纲：
1、什么是JavaScript 2、JavaScript的作用 3、JavaScript的基本特点
格式性校验可以只发生在客户端，即在表单提交到服务器端之前完成。JavaScript能及时响应用户 的操作，对提交表单做即时的检查，无需浪费时间交由CGI验证。JavaScript常用于对于用户输入的格 式性校验。 如图2-2所示是一个要求用户输入购卡人的详细信息，它要求对用户的输入进行以下校验。 （1）学生考号、移动电话、固定电话和E-mail不能为空。 （2）学生考号必须是12位。 （3）移动电话必须由11位数字组成，且以“13”和“15”开头。 （4）固定电话必须是“3位区号-8位话号”或“4位区号-7位或8位话号”。 （5）E-mail必须包含“@”和“.”两个有效字符。 当用户输入不符合指定格式的移动电话号码时，就会在页面输出提示信息“移动电话号码的格式不正 确”，如图2-2所示。
图2-6 文字特效Leabharlann JavaScript的基本特点
JavaScript是为适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地 应用于Internet网页制作上。JavaScript脚本语言具有以下几个基本特点。 解释性 JavaScript不同于一些编译性的程序语言，例如C、C++等，它是一种解释性的程序语言，它 的源代码不需要经过编译，而直接在浏览器中运行时被解释。 基于对象 JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能 可以来自于脚本环境中对象的方法与脚本的相互作用。 事件驱动 JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应
JavaScript程序设计(第2版)第6章02.鼠标键盘事件
运行结果如图6-11和图6-12所示。
图6-11 鼠标移入时获得焦点
图6-12 鼠标移出时失去焦点
鼠标移动事件
鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中 用do例6-6 下面在页面中添加一串文字及一个层，自定义函数move()，当鼠标移动到指定的语句时， 将通过层动态显示飞出来的星形标记；自定义函数out()，当鼠标移出指定的文字时，隐藏星形标记。 代码如下。 语法：
结果如图6-7和图6-8所示。
图6-7 单击按钮前的效果
图6-8 单击按钮后的效果
鼠标的按下或松开事件
鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件 用于在鼠标按下时触发事件处理程序，onmouseup事件是在鼠标松开时触发事件处理程序。在用鼠 标单击对象时，可以用这两个事件实现其动态效果。 例6-4 下面应用onmousedown和onmouseup事件将文本制作成类似于<a>（超链接）标记 的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜 色，并弹出一个空页（可以链接任意网页）。程序代码如下。
运行结果如图6-9和图6-10所示。
图6-9 按下鼠标时改变字体颜色
图6-10 松开鼠标时恢复字体颜色
鼠标的移入移出事件
鼠标的移入和移出事件分别是onmouseover和onmousemove事件。其中，onmouseover事 件在鼠标移动到对象上方时触发事件处理程序，onmousemove事件在鼠标移出对象上方时触发事 件处理程序。可以用这两个事件在指定的对象上移动鼠标时，实现其对象的动态效果。 例6-5 本示例的主要功能是鼠标在图片上移入或移出时，动态改变图片的焦点，主要是用 onmouseover和onmouseout事件来完成鼠标的移入和移出动作。程序代码如下。
JavaScript教程优质课件
使用`document.createElement()`方法可以创建一个新的元素节点，使
用`document.createTextNode()`方法可以创建一个新的文本节点。
02 03
插入节点
使用`appendChild()`方法可以将新节点添加到指定元素的子节点列表 的末尾，使用`insertBefore()`方法可以将新节点插入到指定元素子节点 列表的指定位置。
06
使用回调函数时要注意避免回调地狱（Callback Hell） ，可以通过Promise、async/await等方式来优化代码结 构。
模块化开发和ES6新特性介绍
模块化开发
模块化开发是指将一个大的程序文件分割成独立的小文件，每个小文件都是一个模块，每 个模块都有自己的作用域和对外暴露的接口。模块化开发可以提高代码的可维护性、可重 用性和可测试性。
目标
掌握JavaScript基础语法、DOM操作、事件处理、异步编程等知识点，能够独立完成 简单的Web应用开发。
内容概述
本课程将涵盖JavaScript的基本数据类型、运算符、控制语句、函数等基础知识，以及 DOM操作、事件处理、Ajax等进阶内容。同时，还将介绍ES6及以上版本的新特性和 最佳实践。通过学习本课程，学员将具备扎实的JavaScript编程基础，为后续的Web开
选择器
使用CSS选择器可以选择文档中的特定元素，如通过元素名 、类名、ID等选择器进行选择。
遍历方法
通过DOM提供的遍历方法，如`childNodes`、`firstChild`、 `lastChild`、`nextSibling`、`previousSibling`等，可以访问 节点的子节点和相邻节点。
属性值为'myClass'。
JavaScript概述.doc
第章JavaScript入门（视频讲解：20分钟）在学习JavaScript前，应该了解什么是JavaScript、JavaScriptr的特点及其编写工具和在HTML中的使用等，通过了解这些内容来增强对JavaScript语言的理解以方便以后更好地学习。
本章能够完成的主要范例（已掌握的在方框中打勾）错误!未指定书签。
应用Dreamweaver工具在HTML中直接嵌入JavaScript代码错误!未指定书签。
在index.html文件中调用外部JavaScript文件function.js 错误!未指定书签。
使用JavaScript脚本输出一个“你好JavaScript”字符串1.1 JavaScript概述JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。
它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成可以和用户交互并响应相应事件的动态页面。
1.1.1 JavaScript的发展历程JavaScript语言的前身是LiveScript语言，由美国Netscape（网景）公司的布瑞登·艾克（Brendan Eich）为即将在1995年发布的Navigator 2.0浏览器的应用而开发的脚本语言。
在与Sun（升阳）公司联手及时完成了LiveScript语言的开发后，就在Navigator 2.0即将正式发布前，Netscape公司将其改名为JavaScript，也就是最初的JavaScript 1.0版本。
虽然当时JavaScript 1.0版本还有很多缺陷，但拥有JavaScript 1.0版本的Navigator 2.0浏览器几乎主宰着整个浏览器市场。
因为JavaScript 1.0如此成功，Netscape公司在Navigator 3.0中发布了JavaScript 1.1版本。
同时，微软开始进军浏览器市场，发布了Internet Explorer 3.0并搭载了一个JavaScript的类似版本，其注册名称为JScript，这成为JavaScript语言发展过程中的重要一步。
JavaScript程序设计基础
的应用
客户端应用：将客户端的JavaScript脚本程序嵌入或链接到 HTML文件，当用户通过浏览器请求这样的HTML页面时， JavaScript的脚本程序与HTML一起被下载到客户端，由客户 端的浏览器读取HTML文件，若包含JavaScript解释执行。 浏览器发出URL请求 浏览器 服务器返回HTML文件，由浏览 器解释执行 服务器
JavaScript编程基础（续1）
赋值运算符：= 条件运算符：condition?true_result:false_ result
在JavaScript中使用对话框
警示对话框─alert( ) 举例，S04_01.htm <HTML><HEAD><TITLE>警示对话框</TITLE></HEAD> <BODY> <script language=javascript> alert("欢迎浏览本页面！"); </script> <P>警示对话框显示一些文本信息和一个“确定”按钮。</P> </BODY> </HTML>
JavaScript中的对象编程（续2） String对象的最常用对象和方法：求字符串长 度length、将字符串中的字母转换为小写字母 toLowerCase()、将字符串中的字母转换为大 写字母toUpperCase()、取子串substr (start， len) 。举例，将输入的字符串反向输出到页面 上，并且要求将其中的小写字母转换为大写字 母。实现文件S06_07.htm内容如下：
<HTML><HEAD><TITLE>显示星期几 </TITLE></HEAD><BODY> <script language=javascript> var week,today,week_i; week=new Array("星期日","星期一","星期二","星期三"," 星期四","星期五","星期六"); today=new Date(); 返回日期的字符串表示 week_i=today.getDay(); document.write(today.toLocaleString()+week[week_i]); </script> </BODY></HTML>
JavaScript程序设计(第2版)01.事件的基本概念
JavaScript的相关事件
为了便于读者查找JavaScript中的所有事件，下面以表格的形式对各事件进行说明。 如表6-1所示。
表6-1
JavaScript的相关事件
表6-1
JavaScript的相关事件
表6-1
JavaScript的相关事件
下面对JavaScript中的主要事件进行一下讲解及应用。
alert("谢谢浏览"); </script>
（3）在JavaScript中说明 该方法是在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明，不用在HTML标记中指定 要执行的事件。
语法：
<事件主角 - 对象>.<事件> = <事件处理程序>;
例如，直接在JavaScript脚本中执行按钮的单击事件，而不用在按钮的<input>标记中调用单击 事件。该例将pp()函数定义为Button按钮的onclick事件的处理过程。代码如下：
事件的基本概念
本讲大纲：
1、 什么是事件 2、事件处理程序的调用 3、JavaScript的相关事件
什么是事件
通常，我们将鼠标或键盘在网页对象上的动作称为“事件 ”，而由鼠标或键盘引发的一连串程序的动作称为“事件驱 动”，对事件进行处理的程序或函数称为“事件处理程序” 。它们之间的关系如图6-1所示。
<input type="button" name="Button" value="Button"> <script language="javascript">
function pp(){ alert("我喜欢学习JavaScript");
JavaScript前端开发程序设计JavaScript语言基础
程序设计教程（微课版）JavaScript前端开发工业和信息化“十三五”人才培养规划教材人民邮电出版社 北京程序设计教程（）JavaScript前端开发第2章JavaScript语言基础学习目的:■了解JavaScript地基本数据类型■掌握JavaScript地变量与常量地定义及使用■掌握JavaScript地运算符与表达式,并具备运用表达式解决问题地能力数据类型1变量与常量2运算符3表达式4NTS 目录数据类型1变量与常量2运算符3表达式4NTS 目录JavaScript是一种弱类型地语言,即数据（变量或常量）在定义时不必指明数据类型,其数据类型可以通过为数据赋值时根据其值来确定是什么类型。
本节将对JavaScript地数据类型进行详细地介绍。
JavaScript地数据类型分为三类,有基本数据类型,引用数据类型与特殊数据类型。
其JavaScript地基本数据类型有数值型,字符串型与布尔型;引用数据类型是指支持对象编程地类型,特殊数据类型主要包括NULL（空值）,underfined（未定义）,NaN（非数值）以及转义字符。
010203基本数据类型引用数据类型特殊数据类型1基本数据类型数值类型整数与实数Number "字符串"数据类型String"布尔"数据类型BooleanJavaScript地数值型包括整型与浮点型。
（1）整型整型也叫整数,是没有小数点地数值,它可以用十进制数,八进制数与十六进制数来表示。
十进制:用0~9地数字来表示。
如24,67,-99,-102。
八进制:用0~7地数字来表示,首位需要加0。
如023,045。
十六进制:用0~9地数字与A~F（或者a~f）来表示,前两位需要是0X或者0x。
如0x245,0x5ad,0XCD,0XEF。
（2）浮点型浮点型数值可以有小数,即浮点型数值包括整数部分与小数部分,间用小数点分开,即"整数部分.小数部分"。
JavaScript程序设计(第2版)02.表达式与运算符
在IE浏览器中运行该文件，结果如图4-3所示。
图4-3 赋值运算符的应用
4．布尔运算符 在JavaScript中增加了几个布尔逻辑运算符，JavaScript支持的常用布尔运算符如表4-6所示。
表4-6
布尔运算符
其中，三目运算符主要格式如下：
操作数?结果1：结果2
若操作数的结果为真，则表达式的结果为“结果1”，否则为“结果2”。
例如：应用new运算符来创建新对象，代码如下：
Object1 = new Object; Array2 = new Array(); Date3 = new Date("August 8 2008");
7．运算符优先级 JavaScript运算符都有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算
，结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算。结合性有向左结合和想右结合，例如表 达式 “a+b+c”，向左结合也就是先计算“a+b”，即“(a+b)+c”；而向右结合也就是先计算“b+c”，即 “a+(b+c)”。JavaScript运算符的优先级顺序及其结合性如表4-8所示。
表4-8
5.条件运算符 条件运算符是JavaScript支持的一种特殊的三目运算符，其语法格式如下：
操作数?结果1:结果2
如果“操作数”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。
6．其他运算符 （1）位操作运算符
位运算符分为两种，一种是普通位运算符，另一种是位移动运算符。在进行运算前，都先将操作数转
图4-4 优先级的使用
换为32位的二进制整数，然后再进行相关运算，最后的输出结果将以十进制表示。位操作运算符对数值 的位进行操作，如向左或向右移位等。JavaScript中常用的位操作运算符如表4-7所示。
图4-3 赋值运算符的应用
4．布尔运算符 在JavaScript中增加了几个布尔逻辑运算符，JavaScript支持的常用布尔运算符如表4-6所示。
表4-6
布尔运算符
其中，三目运算符主要格式如下：
操作数?结果1：结果2
若操作数的结果为真，则表达式的结果为“结果1”，否则为“结果2”。
例如：应用new运算符来创建新对象，代码如下：
Object1 = new Object; Array2 = new Array(); Date3 = new Date("August 8 2008");
7．运算符优先级 JavaScript运算符都有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算
，结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算。结合性有向左结合和想右结合，例如表 达式 “a+b+c”，向左结合也就是先计算“a+b”，即“(a+b)+c”；而向右结合也就是先计算“b+c”，即 “a+(b+c)”。JavaScript运算符的优先级顺序及其结合性如表4-8所示。
表4-8
5.条件运算符 条件运算符是JavaScript支持的一种特殊的三目运算符，其语法格式如下：
操作数?结果1:结果2
如果“操作数”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。
6．其他运算符 （1）位操作运算符
位运算符分为两种，一种是普通位运算符，另一种是位移动运算符。在进行运算前，都先将操作数转
图4-4 优先级的使用
换为32位的二进制整数，然后再进行相关运算，最后的输出结果将以十进制表示。位操作运算符对数值 的位进行操作，如向左或向右移位等。JavaScript中常用的位操作运算符如表4-7所示。
Javascript程序设计课程标准(完整版)
Javascript程序设计课程标准课程代码：MB010509 课程类型：理论+实践课程属性：专业课适用专业：信息工程学院软件技术专业学时：64学时学分：3.5学分课程负责人：参编人员：一、课程定位（一）课程性质《Javascript程序设计》是一门需要综合应用所学网页制作知识(HTML、CSS、JavaScript)的课程而打造的面向网页制作方向就业技能的一门重要课程。
该课程深入浅出，结合实际案例系统地讲解了使用JavaScript和jQuery进行动态网页设计的知识和技巧，它定位于WEB技术开发，是WEB前端技术开发的必备课程，为网页美工、PHP动态网页设计、C#程序设计与应用等课程的学习打下基础，在整个课程体系中具有承前启后的重要作用。
（二）课程作用《Javascript程序设计》课程任务是培养网页设计、网页美工以及WEB综合开发的初、中级专业人才，通过本课程的学习，学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。
（三）前导、后续课程它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。
本课程的前导课程：Web前端开发基础、图像处理技术。
后续课程：Javascript框架应用开发、网页美工、PHP动态网页设计、Html5高级开发等。
二、课程理念及设计思路（一）课程理念通过本课程的学习，使学生对HTML脚本、CSS代码和JavaScript特效代码等网页基本组成元素有全面和充分的认识，能熟练地使用以上代码开发出漂亮的静态网页，制作出炫酷的网页效果，并为后继的动态网页课程的学习打好基础。
使得学生能掌握JavaScript语言的基本编程思想，并能熟练利用JavaScript控制WEB页面各级元素，实现WEB前端的验证、动态展示等任务。
主要包括JavaScript的基础语法，常用开发工具和调试工具，简单的CSS知识，DOM模型及事件机制和常见事件处理等内容。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
浏览器对象
事件处理 JavaScript函数 作用在对象上的事件
用户与网页交互操作
图6-1 网页浏览器对象、事件及函数之间的关系
事件处理程序的调用
事件处理是对象化编程的一个很重要的环节，它可以使程序的逻辑结构更加清晰，使程序更具 有灵活性，提高了程序的开发效率。事件处理的过程分为3步：
l发生事件。
l启动事件处理程序。 l事件处理程序作出反应。其中，要使事件处理程序能够启动，必须通过指定的对象来调用相 应的事件，然后通过该事件调用事件处理程序。事件处理程序可以是任意JavaScript语句，但是我们 一般用特定的自定义函数（function）来对事件进行处理。
在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序， 其指定方式主要有3种方法：
JavaScript的相关事件
为了便于读者查找JavaScript中的所有事件，下面以表格的形式对各事件进行说明。 如表6-1所示。
表6-1
事件 鼠标键 onclick 盘事件 ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onkeypress onkeydown onkeyup 页面相 onabort 关事件 onbeforeunload onerror onload onresize onunload 单击鼠标时触发此事件 双击鼠标时触发此事件 按下鼠标时触发此事件 鼠标按下后松开鼠标时触发此事件 当鼠标移动到某对象范围的上方时触发此事件 鼠标移动时触发此事件 当鼠标离开某对象范围时触发此事件 当键盘上的某个按键被按下并且释放时触发此事件 当键盘上某个按键被按下时触发此事件 当键盘上某个按键被按下后松开时触发此事件 图片在下载时被用户中断时触发此事件 当前页面的内容将要被改变时触发此事件 出现错误时触发此事件 页面内容完成时触发此事件（也就是页面加载事件） 当浏览器的窗口大小被改变时触发此事件 当前页面将被改变时触发此事件
图6-3 在页面关闭后弹出提示框
例6-2 在“确定”按钮的单击事件中，用多行代码改变页面中“JavaScript很好学”文本的字体样式。 其操作过程是在页面加载后，文本会以“宋体”格式进行显示，在单击“确定”按钮后，将弹出一个输入 提示框，向该提示框的文本框中输入“红色”，单击“确定”按钮，这时，将关闭提示框，将页面中的文 本以红色的黑体文字格式进行显示。代码如下：
运行结果如图6-4、图6-5和图6-6所示。
图6-5 向输入提示框中添值
图6-4 页面载入后
图6-6 改变文本的字体样式
（2）指定特定对象的特定事件 该 方法是在JavaScript 的<script> 标记 中指定特定的对 象，以及该对 象要执 行的事件名称 ，并 在 <script>和</script>标记中编写事件处理程序代码。 语法：
<form name="form1" method="post" action=""> JavaScript很好学 </form> <form name="form2" method="post" action=""> <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色',' ','提示框');if (Sfont=='红色 '){form1.style.fontFamily='黑体';form1.style.color='red';}"> </form>
事件的基本概念
本讲大纲：
1、 什么是事件 2、事件处理程序的调用 3、JavaScript的相关事件
什么是事件
通常，我们将鼠标或键盘在网页对象上的动作称为“事件”， 而由鼠标或键盘引发的一连串程序的动作称为“事件驱动”，对 事件进行处理的程序或函数称为“事件处理程序”。它们之间的 关系如图6-1所示。
<script language="JavaScript" for="对象" event="事件"> … //事件处理程序代码 … </script>
例如，用<script>和</script>标记来完成页面加载和关闭时显示对话框。代码如下：
<script language="javascript" for="window" event="onload"> alert("欢迎进入本网页"); </script> <script language="javascript" for="window" event="onunload"> alert("谢谢浏览"); </script>
（3）在JavaScript中说明 该方法是在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明，不用在HTML标记中指定 要执行的事件。 语法：
<事件主角 - 对象>.<事件在该方法中“事件处理程序”是真正的代码，而不是字符串形式的代码。事件处理程序只能通过自定 义函数来指定，当函数无参数时，函数名后不用加“()”，如果在后面加“()”，函数会被触发，但它并 不是被指派为一个事件处理器。
（1）直接在HTML标记中指定 该方法是直接在HTML标记中指定事件处理程序，例如在<body>和<input>标记中指定。 语法：
<标记 … … 事件="事件处理程序" [事件="事件处理程序" ...]>
在以上语法中的事件处理程序可以是 JavaScript语句，也可是自定义函数，如果是JavaScript 语句，可以在语句的后面以分号（;）作为分隔符，执行多条语句。
例如，直接在JavaScript脚本中执行按钮的单击事件，而不用在按钮的<input>标记中调用单击 事件。该例将pp()函数定义为Button按钮的onclick事件的处理过程。代码如下：
<input type="button" name="Button" value="Button"> <script language="javascript"> function pp(){ alert("我喜欢学习JavaScript"); } Button.onclick=pp; </script>
例6-1 在页面加载完成后将弹出一个“欢迎进入本网页”的对话框，在用户退出页面后，弹出一 个“谢谢浏览”对话框。代码如下:
<body onLoad="alert('欢迎进入本网页')" onunLoad="alert('谢谢浏览')" >
运行结果如图6-2和图6-3所示。
图6-2 在页面加载完成后弹出提示框