项目十二使用JavaScript设计网页特效
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript事件有很多个，常用的事件有页面载入事件、 页面卸载事件、单击事件、鼠标经过事件、鼠标离开事
件。
对象
JavaScript中的对象是由属性(properties)和方法 (methods)两个基本的元素的构成的。前者是对象在实 施其所需要行为的过程中，实现信息的装载单位，从而 与变量相关联；后者是指对象能够按照设计者的意图而 被执行，从而与特定的函数相联。
5.JavaScript基础语法
JavaScript 是 一 种 基 于 对 象 (Object) 和 事 件 驱动(Event-Driven)的脚本语言，其语法与C 语言非常相似，但有略有不同：
弱变量类型
JavaScript 是 一 种 弱 类 型 脚 本 语 言 。 所 谓 弱 类 型 指 的 是 在 JavaScript中所有数据类型的变量均用var这个关键词来声明， 这样一来，无法通过变量声明来识别该变量是何种数据类型，
random方法：返回一个介于0~1之间随机数
日期对象Date
Date对象可以存储任意一个日期和时间，并且对日期和时间进行 处理。Date对象的创建有带参数和不带参数两种，如下所示：
var d=new Date(); var d=new Date(Y，M，D) 获取日期和时间的方法
getYear(): 返回年数 getMonth():返回当月号数 getDate(): 返回当日号数 getDay():返回星期几 getHours():返回小时数 getMintes(:返回分钟数 getSeconds():返回秒数 getTime() : 返回毫秒数 设置日期和时间： setYear();设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMintes():设置分钟数 setSeconds():设置秒数 setTime ():设置毫秒数
JavaScript代码直接写入网页文档主体body标签 里
内联式运行
JavaScript代码写入网页文档头head标签里，只 有当被调用时才会执行
外联式运行
JavaScript 程 序 写 入 JavaScript 文 件 中 ， JavaScript文件后缀为.js，只有当文档调用该JS 文件时，才运行其中的JavaScript代码。
图12-1 日历预览效果
12.1.1 项目准备
1.JavaScript简介 JavaScript 是 一 种 基 于 对 象 (Object) 和 事 件 驱动(Event-Driven)并具有安全性能的脚本 语言 。
2.JavaScript特点 脚本语言 基于对象 简单性 安全性 动态性 跨平台性
3.JavaScript代码嵌入页面
JavaScript代码嵌入网页的方法与CSS相似 代码如下所示：
<script language ="javascript"> JavaScript语言代码; JavaScript 语言代码; .... </script>
4.JavaScript运行方式
直接运行
数学对象Math
Math对象没有构造函数Math()，因此Math对象的属性和 方法直接以“Math.属性”和“Math.方法”的形式调用。
方法
floor方法：对一个数进行下舍入，返回小于等于这个数 的最大整数。例如Math.floor(3.98)值为3。
round方法：对一个数进行四舍五入，返回四舍五入的 结果。例如Math.round(3.98)值为4。
只有通过赋值方可确定。
function函数
JavaScript对函数的定义代码如下： function 函数名(参数列表) {
代码段; }
函数调用 带返回值的函数
事件
JavaScript与HTML结合，用户通过浏览器访问Web页 面时，执行某个操作，触发了JavaScript程序的行为叫 做事件驱动，其中执行的操作叫做事件，通常借由鼠标 或者键盘进行，而触发的JavaScript程序称之为事件处 理程序。
常见的对象有：
1.引用JavaScript内部对象（String，Date等）； 2.由浏览器环境中提供（window等） 3.HTML DOM对象（document等）
对百度文库的应用：
关键字new来创建一个对象，并通过点号“.”获取对象的属性或方法
字符串对象String
属性 length 用法：<字符串对象>.length；返回该字符串的长 度。 方法 indexOf() 作用：从字符串对象中指定的位置搜索子字符 串 substring() 作用：返回字符串的一部分子字符串 substr() 作用：返回字符串的一部分子字符串 toLowerCase() 作用：把字符串改变为小写 toUpperCase() 作用：把字符串改变为小写
任务一 JavaScript入门
【项目描述】
日历是不少页面不可以缺 少的组成部分，如现今流 行的博客。当不同时间、 不同地区的用户打开日历 页面，所查看到的内容可 能有所不同，HTML无法 解决上述问题。 JavaScript 的 出 现 帮 助 我 们解决了这个问题，当我 们打开日历页面，出现的 是系统当前时间的日历， 并且突出显示了当前的天 数；还可以通过图片按钮， 实现日历翻阅的效果，如 图12-1所示。
项目十二 使用JavaScript设计网页特效
任务一 JavaScript入门
【知识目标】 1.了解JavaScript 2.掌握JavaScript使用方式 3.掌握JavaScript基本数据结构
任务一 JavaScript入门
【技能目标】 1.能够利用JavaScript，编辑页面 2.能够利用JavaScript，实现页面输出信息
数组对象Array
Array对象是一个变量中存储多个值。Array对象的创 建有三种方式，如下所示：
var 数组名=new Array(); var 数组名=new Array(数组个数); var 数组=new Array(数组成员); 属性 length属性：数组成员个数。示例如下： 方法 join方法：把数组的所有元素放入一个字符串。元素 通过指定的分隔符进行分隔。
件。
对象
JavaScript中的对象是由属性(properties)和方法 (methods)两个基本的元素的构成的。前者是对象在实 施其所需要行为的过程中，实现信息的装载单位，从而 与变量相关联；后者是指对象能够按照设计者的意图而 被执行，从而与特定的函数相联。
5.JavaScript基础语法
JavaScript 是 一 种 基 于 对 象 (Object) 和 事 件 驱动(Event-Driven)的脚本语言，其语法与C 语言非常相似，但有略有不同：
弱变量类型
JavaScript 是 一 种 弱 类 型 脚 本 语 言 。 所 谓 弱 类 型 指 的 是 在 JavaScript中所有数据类型的变量均用var这个关键词来声明， 这样一来，无法通过变量声明来识别该变量是何种数据类型，
random方法：返回一个介于0~1之间随机数
日期对象Date
Date对象可以存储任意一个日期和时间，并且对日期和时间进行 处理。Date对象的创建有带参数和不带参数两种，如下所示：
var d=new Date(); var d=new Date(Y，M，D) 获取日期和时间的方法
getYear(): 返回年数 getMonth():返回当月号数 getDate(): 返回当日号数 getDay():返回星期几 getHours():返回小时数 getMintes(:返回分钟数 getSeconds():返回秒数 getTime() : 返回毫秒数 设置日期和时间： setYear();设置年 setDate():设置当月号数 setMonth():设置当月份数 setHours():设置小时数 setMintes():设置分钟数 setSeconds():设置秒数 setTime ():设置毫秒数
JavaScript代码直接写入网页文档主体body标签 里
内联式运行
JavaScript代码写入网页文档头head标签里，只 有当被调用时才会执行
外联式运行
JavaScript 程 序 写 入 JavaScript 文 件 中 ， JavaScript文件后缀为.js，只有当文档调用该JS 文件时，才运行其中的JavaScript代码。
图12-1 日历预览效果
12.1.1 项目准备
1.JavaScript简介 JavaScript 是 一 种 基 于 对 象 (Object) 和 事 件 驱动(Event-Driven)并具有安全性能的脚本 语言 。
2.JavaScript特点 脚本语言 基于对象 简单性 安全性 动态性 跨平台性
3.JavaScript代码嵌入页面
JavaScript代码嵌入网页的方法与CSS相似 代码如下所示：
<script language ="javascript"> JavaScript语言代码; JavaScript 语言代码; .... </script>
4.JavaScript运行方式
直接运行
数学对象Math
Math对象没有构造函数Math()，因此Math对象的属性和 方法直接以“Math.属性”和“Math.方法”的形式调用。
方法
floor方法：对一个数进行下舍入，返回小于等于这个数 的最大整数。例如Math.floor(3.98)值为3。
round方法：对一个数进行四舍五入，返回四舍五入的 结果。例如Math.round(3.98)值为4。
只有通过赋值方可确定。
function函数
JavaScript对函数的定义代码如下： function 函数名(参数列表) {
代码段; }
函数调用 带返回值的函数
事件
JavaScript与HTML结合，用户通过浏览器访问Web页 面时，执行某个操作，触发了JavaScript程序的行为叫 做事件驱动，其中执行的操作叫做事件，通常借由鼠标 或者键盘进行，而触发的JavaScript程序称之为事件处 理程序。
常见的对象有：
1.引用JavaScript内部对象（String，Date等）； 2.由浏览器环境中提供（window等） 3.HTML DOM对象（document等）
对百度文库的应用：
关键字new来创建一个对象，并通过点号“.”获取对象的属性或方法
字符串对象String
属性 length 用法：<字符串对象>.length；返回该字符串的长 度。 方法 indexOf() 作用：从字符串对象中指定的位置搜索子字符 串 substring() 作用：返回字符串的一部分子字符串 substr() 作用：返回字符串的一部分子字符串 toLowerCase() 作用：把字符串改变为小写 toUpperCase() 作用：把字符串改变为小写
任务一 JavaScript入门
【项目描述】
日历是不少页面不可以缺 少的组成部分，如现今流 行的博客。当不同时间、 不同地区的用户打开日历 页面，所查看到的内容可 能有所不同，HTML无法 解决上述问题。 JavaScript 的 出 现 帮 助 我 们解决了这个问题，当我 们打开日历页面，出现的 是系统当前时间的日历， 并且突出显示了当前的天 数；还可以通过图片按钮， 实现日历翻阅的效果，如 图12-1所示。
项目十二 使用JavaScript设计网页特效
任务一 JavaScript入门
【知识目标】 1.了解JavaScript 2.掌握JavaScript使用方式 3.掌握JavaScript基本数据结构
任务一 JavaScript入门
【技能目标】 1.能够利用JavaScript，编辑页面 2.能够利用JavaScript，实现页面输出信息
数组对象Array
Array对象是一个变量中存储多个值。Array对象的创 建有三种方式，如下所示：
var 数组名=new Array(); var 数组名=new Array(数组个数); var 数组=new Array(数组成员); 属性 length属性：数组成员个数。示例如下： 方法 join方法：把数组的所有元素放入一个字符串。元素 通过指定的分隔符进行分隔。