《javascript简述》ppt课件

《《javascript简述》ppt课件》由会员分享，可在线阅读，更多相关《《javascript简述》ppt课件（103页珍藏版）》请在金锄头文库上搜索。

1、第3章 JavaScript,3.1 JavaScript简介 3.2 JavaScript程序设计基础 3.3 JavaScript程序结构 3.4 JavaScript对象系统 3.5 JavaScript事件和事件处理,第3章 JavaScript,主要内容,理解JavaScript语言的作用和执行方式 掌握在网页中使用客户端脚本的方法 掌握JavaScript语言的基本语法 认识核心语言对象，使用核心语言对象的方法和属性 掌握对页面中的不同种类的事件响应编程 能够利用JavaScript语言完成对文档内容的交互 了解客户端常见JavaScript特效程序的编程 掌握JavaScript

2、程序的一般调试技术,什么是脚本,脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。 服务器端脚本：例如 ASP、JSP、PHP等 客户端脚本：例如JavaScript、VBScript等。,客户端脚本的作用,客户端脚本经常用来检测浏览器、响应用户动作、验证表单数据以及显示各种自定义内容，如特殊动画、对话框等。,3.1 JavaScript简介,Javascript是由Netscape公司开发的一种解释性的，基于对象的脚本语言(an interpreted, object-based scripting language)。 JavaScript语言的主要应用就是开发客户端的Web

3、应用程序，将客户端的JavaScript脚本嵌入或链接到HTML文件中。当用户在客户端的浏览器中读取HTML文件时，就会以Web页面方式进行显示。,3.1 JavaScript简介,1. 解释性 2. 基于对象 3. 事件驱动 4. 简单性 5. 安全性 6. 跨平台性,3.1.1 JavaScript语言特点,3.1 JavaScript简介,1. 软件环境： Netscape Navigator浏览器或Internet Explorer浏览器。 用于编辑HTML文档的字符编辑器(word、WPS、 Notepad、WordPad等)或HTML文档编辑器。 2. 硬件配置： 内存 32M。

4、CPU 233mhz以上。 显示器 256色，分辨率在640X480以上。 鼠标和其它外部设置（根据需要选用）。,3.1.2 JavaScript程序的运行环境,3.1 JavaScript简介,3.1.3 第一个JavaScript程序, 这是我的第一个JavaScript程序 document.write(“欢迎进入JavaScript学习之旅!“); 执行结果,3.2 JavaScript程序设计基础,JavaScript脚本语言的基本语法与C、C+和Java都非常的相似。所以对于已经具备了或+语言编程基础的人来说，学习JavaScript脚本语言是一件非常轻松愉快的事。同时由于Java

5、Script脚本语言的采取了简单语法的形式组织，如变量是弱变量，没有指针，无需定义类等，使得即便是没有任何计算机语言基础的的初学者也可以很快的掌握。本节主要讨论JavaScript脚本语言的变量、运算符和表达式。,3.2 JavaScript程序设计基础,3.2.1 JavaScript脚本代码的声明,JavaScript脚本语言通过标签. . . 告知浏览器其中包含的的内容为客户端程序代码，属性Language指名该客户段代码使用的何种语言，“JavaScript”表示这里使用的是JavaScript语言。,3.2.2 JavaScript放置和运行 在HTML页面中使用JavaScript

6、的方法有两种： 一种是直接加入到HTML文件中 另外一种是引用方式,3.2 JavaScript程序设计基础,代码的位置 位于HEAD部分的脚本 如果把脚本放置到head部分，在页面载入的时候，就同时载入了代码。 通常这个区域的JavaScript代码是为body区域程序代码所调用的事件处理函数。 位于 BODY部分的脚本 当你把脚本放置于 body 部分后，在页面载入时不属于某个函数的脚本就会被执行，执行后的输出就成为页面的内容。,JavaScript直接加入到HTML文件中,JavaScript直接加入到HTML文件中,位于Head部分的代码实例, 我的第一个JavaScript程序! ,

7、直接位于事件处理部分的代码中, 这是我的第一个JavaScript程序 执行结果,JavaScript直接加入到HTML文件中,引用方式,如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下： 其中的Url就是程序文件的地址。,引用方式,实现上述“直接插入方式”中所举例子的效果，步骤如下： 1）创建一个Javascript源代码文件“as.js”，其内容如下： document.writeln(“这是Javascript！采用引用的方法！“); 2） 在网页中中添加代码： 。,引用的例子,3.2.3 标识符和变量,1关于

8、命名的规定 1） 标识符 关于标识符的规定： 必须使用字母或者下划线开始； 必须使用英文字母、数字、下划线组成，但不能有空格、“”、“”、“，” 或其它符号； 不能使用JavaScript关键词与JavaScript保留字； 不能使用JavaScript语言内部的单词，比如Infinity,NaN,undefined； 大小写敏感，也就是说x和X是不一样的两个标识符。,1关于命名的规定(续),2） 关键字 关键字对于JavaScript程序有着特别的含义，它们可标识程序的结构和功能，所以，在编写代码时，不能用它们作为自定义的变量名或者函数名。表3-1列出了JavaScript的关键字。,3）

9、保留字 除了关键字，JavaScript还有一些可能未来扩展时使用的保留字，同样不能用于标识符的定义。,1关于命名的规定(续),2 JavaScript的数据类型,JavaScript不是一种强类型的语言 JavaScript 有六种数据类型。主要的类型有 number、String、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。,1. String 字符串类型 字符串是用单引号或双引号来说明的（可以使用单引号来输入包含双引号的字符串），如“刘华”、刘华或者“刘华“。 字符串中每个字符都有特定的位置，首字符从位置 0 开始，第二个字符在位置 1，依

10、此类推。这意味着字符串中的最后一个字符的位置一定是字符串的长度减 1。,2 JavaScript的数据类型（续）,2. 数值数据类型 JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项，下面是一些关于数的表示。 正数：1、30、10.3；负数、-1、-30、-10.3 有理数：0，正数，负数统称为有理数 指数：2e3 表示2*103，5.1e4表示5.1*104 八进制数：八进制数是以0开头的数，如070代表10进制的56 十六进制数：16进制数是以0x开头的数，如

11、0x1f代表10进制的31 Infinity表示无穷大，这是一个特殊的Number 类型 NaN，表示非数（Not a Number），这是一个特殊的Number 类型,2 JavaScript的数据类型（续）,3. Boolean 类型 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。 4.undefined 数据类型 一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值之以前所具有的值。 5. null 数据类型 null 值就是没有任何值，什么也不表示。 6. object类型 除了上面提到的各种常用类型外，对象也是JavaScri

12、pt中的重要组成部分，这部分将在后面介绍。,2 JavaScript的数据类型（续）,声明变量 JavaScript规定通过关键字“var”后面加上变量的名称来声明一个变量。 基本语法： var 变量名 =初值,变量名=初值 语法说明： 变量的起名应该符合标识符的规定； 可以同时声明多个变量； 可以在声明变量时，为变量赋予初值。,3 变量,以下变量命名合法。 abc, china, a1, str_1, abc_h。,以下变量命名不合法。 123, 12.3, a.a, _abc。,声明一个变量 var test; 定义一个数值类型的变量area var area = 0; 定义一个字符串类型

13、的变量name var name = “刘华“; 定义一个逻辑类型的变量status var status = true; 将一个表达式的计算结果赋值给变量area area = a*b 用一个 var 语句定义两个或多个变量，它们的类型不必一定相同 var area = 0 , name = “张华“; 变量声明示例,3 变量（续）,2. 向变量赋值 具体在为变量赋值时，需要注意： 变量名在赋值运算符“=”符号的左边，而需要向变量赋的值在“=”的右侧； 一个变量在声明后，可以多次被赋值或使用； 向未声明的变量赋值 如果在赋值时所赋值的变量还未进行过声明，该变量会自动声明。例如： area =

14、0; name=“张华“; 等价于： var area =0;var name=“张华“;,3 变量（续）,这种事先没有声明而直接使用的情况，并不是一个优秀程序员的习惯。作为一种良好的编码规则，任何变量都应当“先声明，后使用”。,4 转义字符,转义字符 对在字符串中无法直接表示的一类字符而使用的特殊符号，例如： r表示回车，n表示换行，t表示光标移到下一个输出位。 var s = “Hello, “Mike“; 则变量s的值是：Hello, “Mike“。,JavaScript运算符包括： 算术运算符、赋值运算符、自增、自减运算符、逗号运算符、关系运算符、逻辑运算符、条件运算符、位运算符，也可

15、以根据运算符需要操作数的个数，可以把运算符分为一元运算符、二元运算符或者三元运算符。 表达式:由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子。 对应的表达式包括：算术表达式、赋值表达式、自增、自减表达式、逗号表达式、关系表达式、逻辑表达式、条件表达式、位表达式。,3.2 JavaScript程序设计基础（续）,3.2.4 运算符和表达式,1算术数运算符和表达式,基本语法： 双目运算符： 操作数1 operator 操作数2 单目运算符： 操作数 operator operator 操作数 算术运算示例 例3.4,2 关系运算符和表达式,关系运算符和表达式 关系运算符负责判断两个

16、值是否符合给定的条件，包括的运算符见书P58表3-3。 用关系运算符和运算对象(操作数)连接起来，符合规则的式子，称”关系表达式” 关系表达式返回的结果为“true”或“false”，分别代表符合给定的条件或者不符合。 关系表达式一般用于分支和循环控制语句中，根据逻辑值的真假来决定程序的执行流向。 基本语法： 操作数1 operator 操作数2,语法说明,1. 不同类型间的比较 当两个操作数的类型不同进行比较时，遵循以下规则： 无论何时比较一个数字和一个字符串，都会把字符串转换成数字，然后按照数字顺序比较它们，如果字符串不能转换成数字，则比较结果为false； 如果一个操作数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1； 如果一个操作数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串； 如果一个操作数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。,2 . =与=的区别 “=”是赋值运算符，用来把一个值赋予一个变量，比如