Download presentation
Presentation is loading. Please wait.
1
ASP动态网页设计实用教程 主讲教师： 开课单位:
2
第5章 JavaScript语言 主要内容 学习目标 新课讲授 本章小结 本章习题 返回
3
本章主要内容 本章主要介绍了JavaScript的优点，JavaScript语言基础和流程控制及函数和事件驱动，JavaScript的对象以及应用实例。 目录页
4
本章学习目标 了解JavaScript优点和运行环境。 掌握JavaScript基本语法及流程控制语句。 熟练运用函数和事件编写应用程序。
掌握对象的应用方法。 目录页
5
第5章 JavaScript语言 5．1 JavaScript简介 5．2 JavaScript语言基础 5．3 JavaScript对象
5．4 小结 目录页
6
第5章 JavaScript语言 5．1 JavaScript简介 5．1．1 什么是JavaScript
Javascript是一种通用的、基于对象的脚本语言，它的设计目标是在不占用很多系统和网络资源的情况下提供一种可以嵌入不同的应用程序的通用代码。JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。
7
5．1．1 什么是JavaScript JavaScript具有很多优点： 1. 简单性 2. 动态性 3. 跨平台性
4. 节省CGI的交互时间 5. 安全性
8
5．1．2 JavaScript运行环境 微软公司从它的Internet Explorer 3.0版开始支持JavaScript。Microsoft把自己实现的JavaScript规范叫做JScript。这个规范与Netscape Navigator浏览器中的JavaScript规范在基本功能上和语法上是一致的，但是在个别的对象实现方面还有一定的差别，这里特别需要予以注意。 JavaScript编辑也较容易，用于编辑HTML文档的字符编辑器(WS、WPS、Notepad、WordPad等)或HTML文档编辑器，都可以完成JavaScript的编写。
9
5．2 JavaScript语言基础 5．2．1 如何插入JavaScript代码 1. JavaScript基本语法
<Script Language ="JavaScript"> <!-- JavaScript语句; //--> </Script> JavaScript语句以<Script Language ="JavaScript">开头，以</Script>结束。其中分号“；”是JavaScript 语句结束的标识符。现在很多时候直接利用回车作为结束的标识符，运行结果都是一样的。 另外，也可以用用语句块来编写，即用大括号“{ }”括起来的一个或n个语句。在大括号里边是几个语句，但是在大括号外边，语句块是被当作一个语句的。语句块是可以嵌套的，也就是说，一个语句块里边可以再包含一个或多个语句块。
10
2. 插入JavaScript代码 JavaScript通过使用标记<script>…</script>，可以在HTML文档的任意地方插入JavaScript，甚至在<HTML>之前插入也不成问题。但是如果要在声明框架的网页（框架网页）中插入，就一定要在<frameset>之前插入，否则不会运行。 另外一种插入JavaScript的方法，是把JavaScript代码写到另一个文件中（此文件通常应该用“.js”作扩展名），然后用格式为“<script src="javascript.js"></script>”的标记把它嵌入到文档中。
11
5．2．2 JavaScript数据类型 JavaScript提供了以下几种基本的数据类型：
1．字符串类型：字符串是用单引号或双引号来说明的。例如"This is a string"，'But this is also a string'等。 2．数值类型：JavaScript 支持整数和浮点数。整数可以为正数、0或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项。 3．逻辑类型：此类型数据只有两个值：true或false，它们不必用引号引起来；也就是说，“false”和false不一样。主要用于说明一种状态或标志。 4．未定义（undefined）数据类型：一个为undefined的值就是指在变量被创建后，但未给该变量赋值以前所具有的值。 5．空（null）数据类型：null值就是没有任何值，什么也不表示。在应用中常将它作为一个初始变量值使用，这样可以避免变量没被初始化时程序将其置为不可预知的值而出现错误。 6．对象（Object）类型：对象也是JavaScript中的重要组成部分。如Window对象、Date对象等。
12
5．2．3 常量与变量 1. 常量 常量就是在程序运行中不能改变的数据。常用的常量类型有整形、浮点型、布尔型、字符型等。 2. 变量
变量的主要作用是充当数据或信息的存放容器，在程序运行过程中产生的临时值也可以赋予变量。
13
5．2．4 运算符 1．赋值运算符
14
2．算术运算符
15
3．比较运算符
16
4．逻辑运算符 逻辑运算符用于测试两个布尔值之间的关系。 逻辑运算符共有三种，即：逻辑与（&&），逻辑或（||），逻辑非（！）。
逻辑与（&&）：比如x&&y，当x和y都为true时才返回true否则返回false。 逻辑或（||）：比如x||y，当x和y只要一个为true或x和y都为true时返回true，否则返回false。 逻辑非（！）：比如!x，当x为true返回false，当x为false则返回true。
17
5.特殊运算符 ⑴ new运算符 在JavaScript中，new运算符用于创建对象的实例。其中，对象可以是用户自定义的对象，也可以是JavaScript中的内置对象。 New运算符的语法如下：varname=new objectType (paraml[,param2]……[,paramN]) 其中：varName： 是新对象的名称； objectType：是已存在的对象的名称； Param[1，2，……，N]：是对象的属性值。
18
5.特殊运算符 ⑵ this运算符 this运算符表示当前对象。 格式：this[.属性] ⑶ typeof运算符
⑷ 条件运算符 语法是： (condition)?expr1:expr2 如果“condition”为true，此运算返回expr1；如果“condition”为false，则返回expr2。
![5.特殊运算符 ⑵ this运算符 this运算符表示当前对象。 格式：this[.属性] ⑶ typeof运算符](http://slidesplayer.com/slide/14805234/90/images/18/5.%E7%89%B9%E6%AE%8A%E8%BF%90%E7%AE%97%E7%AC%A6+%E2%91%B5+this%E8%BF%90%E7%AE%97%E7%AC%A6+this%E8%BF%90%E7%AE%97%E7%AC%A6%E8%A1%A8%E7%A4%BA%E5%BD%93%E5%89%8D%E5%AF%B9%E8%B1%A1%E3%80%82+%E6%A0%BC%E5%BC%8F%EF%BC%9Athis%5B.%E5%B1%9E%E6%80%A7%5D+%E2%91%B6+typeof%E8%BF%90%E7%AE%97%E7%AC%A6.jpg "⑷ 条件运算符. 语法是： (condition) expr1:expr2. 如果 condition 为true，此运算返回expr1；如果 condition 为false，则返回expr2。")
19
6. 运算符优先级
20
5．2．5 JavaScript的流程控制 1.分支语句 ⑴ if语句 基本语法格式： if (条件表达式) { 执行分支语句1 }
else 执行分支语句2
21
⑵ switch语句 基本语法格式： switch (expression) { case label1: 语句串1；
... default : 语句串n； } 注意： switch后面的(expression)可以是表达式，也可以是变量。然后将表达式的值与case中的值作比较，如果与某个case相匹配，那么其后的代码就会被执行。
22
2. 循环语句 ⑴ for循环语句 基本语法格式： for (<变量>=<初始值>; <循环条件>; <变量累加方法>） { 语句集; } for语句主要功能是实现指定次数的循环，当条件成立时，执行语句集，否则跳出循环体。 注意： 初始值告诉循环的开始位置，必须赋予变量的初值； 循环条件，是用于判别循环停止时的条件。若条件满足，则执行循环体，否则跳出； 变量累加，主要定义循环控制变量在每次循环时按什么方式变化； 三个主要语句之间，必须使用分号分隔。
23
⑵ while循环语句 基本语法格式： while（<循环条件>） { 语句集； }
while循环语句与for循环语句一样，当条件为真时，重复循环，否则退出循环。 for循环与while循环主要区别是使用For循环主要处理指定次数的循环，而while循环对循环次数不做限制，只要条件为真就一直循环下去。
24
⑶ break和continue语句 有时候在循环体内，需要立即跳出循环或跳过循环体内其余代码而进行下一次循环，这时就需要break语句和continue语句。其中，break语句放在循环体内，作用是立即跳出循环；而continue语句放在循环体内，作用是中止本次循环，并执行下一次循环。如果循环的条件已经不符合，就跳出循环。
25
5．2．6 JavaScript的函数 创建函数的语法： function 函数名(参数1,参数2,…) { ... （语句块）
return[ <值>]; } 格式说明： ⑴ function这个词必须是小写的，否则JavaScript 就会出错。 ⑵ 函数名与变量名有相同的使名规则，也就是只包含字母数字下划线、字母排头、不能与保留字重复等。另外需要注意的是，JavaScript语句区分大小写。 ⑶ 参数可有可无，但括号一定要有。多个参数可用逗号分隔开来，如：a, b, c。 ⑷ “{”和“}” 定义了函数的开始和结束。大括号是不能省去的，就算整个函数只有一句。 ⑸ 函数的内部有一至多行语句，这些语句并不会立即执行，只有其它程序调用它时才执行。 ⑹ 在执行一个函数的时候，如果有return语句，函数立刻停止执行，并返回到调用它的程序中。如果return后带有<值>，则退出函数的同时返回该值。需要返回某个值的函数必须使用return语句。
26
5．2．7 JavaScript的消息框 1. 警告框 警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。 语法：alert("文本") 2. 确认框 确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false。 语法：confirm("文本")
27
3. 提示框 提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。 语法：prompt("文本","默认值")
28
5．2．8 JavaScript的事件 1. Click事件 2. Focus事件 3. Blur事件 4. Change事件
5. MouseOver事件
29
5．3 JavaScript对象 5．3．1对象的基础知识 1. 对象的基本结构 ⑴ 属性 属性是指与对象有关的值或变量。 ⑵ 方法
方法指对象可以执行的行为（或者可以完成的功能）。 2. 引用对象的途径 ⑴ 引用JavaScript内部对象； ⑵ 由浏览器环境中提供； ⑶ 创建新对象。
30
3. 对象属性的引用 ⑴ 使用点（.）运算符 ⑵ 通过对象的下标实现引用 ⑶ 通过字符串的形式实现 4. 对象的方法的引用
在JavaScript中对象方法的引用是非常简单的。 格式如下： ObjectName.methods()
31
5．3．2 常用对象的属性和方法 1. 常用对象 ⑴ 字符串对象 ① 字符串的属性 ② 字符串的方法 ⑵ math对象
⑶ 日期及时间对象 ① Date() 方法 ② 获取日期和时间方法 ③ 设置日期和时间：
32
2. JavaScript中的系统函数 ⑴ 返回字符串表达式中的值
方法名：eval(字串表达式) 例如：test=eval("8+9+5/2") ⑵ 返回字符的编码 方法名：escape (string) ⑸ 返回不同进制的数 方法名：parseInt(num , radix) 其中，radix是数的进制，num为数字。 ⑶ 返回字符串ASCI码 方法名：unescape(character) unescape()与escape()相反, 返回字符串ASCI码(返回原来的文字)。 ⑷ 返回实数 方法名：parseFloat(floustring)
33
5．3．3 创建对象 1. 对象的自定义 JavaScript对象的自定义，可以采用如下步骤来创建： ⑴ 写一个构造函数来定义对象类型
⑵ 利用new关键字建立对象实例 2. 定义对象的属性 对于创建的对象，可以为其增加属性，一种是为某一成员添加属性，如下示例： baba.aihao="打篮球"; 3. 定义对象的方法 自定义对象的方法，可以采用如下步骤来创建： ⑴ 先将方法的名称，放到对象构造函数中 ⑵ 写一个函数来叙述该对象方法的内容
34
5．3．4窗口对象和文件对象 1. 窗口对象 ⑴ 窗口对象的事件驱动 ⑵ 窗口对象中的属性 ⑶ 窗口对象的方法 ⑷ 打开窗口
35
2.文件对象 ⑴ 文件对象的属性 ① alinkcolor
设置超链接的颜色。当用户使用<a href=...> Text string </a>链接后，Textstring的颜色就会按linkcolor所指定的颜色更新。 ③ vlinkColor 该属性表示的是已被浏览存储为已浏览过的链接颜色。 ④ bgcolor 该属性是指HTML文档中的背景颜色。 ⑤ 前景颜色：fgcolor
36
2.文件对象 ⑵ 文件对象的方法 ① open() open() 打开文件以便 JavaScript 能向文件的当前位置（指插入 JavaScript 的位置）写入 ② write()、writeln()输出显示 该方法主要用来实现在Web页面上显示输出信息。数据。 ③ close() 在实现多个文件对象中，必须使用close()来关闭一个对象后，才能打开另一个文件对象。 ④ clear() 使用该方法可清除已经打开文件的内容。
37
3.其它对象 ⑴ anchor对象： anchor对象指的是<A Name=...> </A>标识在HTML源码中存在时产生的对象。 ⑵ link对象 link对象提供了可以处理<a href>标记的属性和事件。 ⑶ form对象 form 表单对象由网页中的 <form></form> 标记对创建， form 里边的元素也是由 <input> 等标记创建的。 ⑷ image对象 当文件中包含有<img>标记时，就会自动建立相对应的image对象。如果定义一个新的图像对象可以采用以下格式： new image ([宽度，][高度]) ⑸ cookie对象 cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。
38
5．4 小结 本章主要介绍了JavaScript脚本语言的语言基础，控制程序，函数，事件驱动，对象等基础内容。通过大量的示例，可以简单了解JavaScript脚本语言编写和应用，只有通过不断的读和编写及应用才能更好地掌握这部分内容。
39
第5章 JavaScript语言 The End！
Similar presentations
