《《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 . =与=的区别 “=”是赋值运算符,用来把一个值赋予一个变量,比如