《《JavaScript基础》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《JavaScript基础》PPT课件.ppt（41页珍藏版）》请在金锄头文库上搜索。
1、第第9章章 JavaScript基础基础lJavaScript语言的基本概念语言的基本概念lJavaScript核心语法核心语法lJavaScript程序控制结构程序控制结构lJavaScript函数函数本章主要内容：本章主要内容：网页设计制作基础与上机指导HTML+CSS+JavaScript 清华大学出版社9.1 JavaScript语言概述语言概述JavaScript诞生于1995年，它是由Netscape公司研发的，是一种客户端脚本语言，必须在解析器的解析下才能运行。通常JavaScript的解析器是由浏览器提供，同时它有着松散的结构和简单的语法两大特点，可以在网页中实现动态效果。9.
2、1.1 什么是什么是JavaScriptJavaScript是一种基于对象和事件驱动并具有安全性能、跨平台的解释型脚本语言，和前面学习的HTML与XHTML完全不同，HTML与XHTML只是一种标记语言，用某种结构存储数据并在设备上显示，而JavaScript基于对象和事件驱动，只是其程序代码嵌在HTML网页文件中，可以用于开发交互式的Web页面，主要用在客户端，由浏览器解析并运行。9.1.1 什么是什么是JavaScriptJavaScript采用的是小程序段的编程方式，与HTML及XHTML标识结合在一起，使用户对网页的操作更加方便，其主要特点有以下几个方面。1）安全性2）易用性3）动态交
3、互性4）跨平台性如果网页设计者只想简单显示网页的内容，那JavaScript不是必需的，但在一个完整的网站中，太多的功能需要JavaScript来完成。9.1.2 JavaScript的功能的功能JavaScript是用于检测网页中的各种事件，并作出反应，虽然是作用于客户端的脚本语言，其语法比较松散，结构也比较简单，但其功能却一点也不简单，主要包括以下几个方面。1）表单操作2）响应事件3）动态特效4）记录状态9.1.2 JavaScript的功能的功能JavaScript也存在一定的局限性，主要表现在：（1）JavaScript不能制作多用户程序。（2）JavaScript在浏览器中不允许跨域
4、操作，只能在当前域中操作才有效。（3）JavaScript不能用于安全性认证的处理。（4）JavaScript属于客户端脚本语言，只能由浏览器解析执行。（5）JavaScript不能读取客户端数据库中的数据，也不能操作其他的任何文件（引用文件除外），但服务器端数据库中的数据和文件可以读取，如果一定要读取客户端数据库中的数据和文件，那么必须通过其他组件来实现此项功能。9.2 HTML文档与文档与JavaScriptJavaScript的面世实现了在HTML文档中直接嵌入脚本，能够利用各种元素和超链接动态响应用户的互动需求，所以，将JavaScript插入到HTML代码中是实现Web开发的关键技术
5、。9.2.1 在在HTML文档中插入文档中插入JavaScriptJavaScript代码必须放在网页代码的与标签之间。当浏览器解析到标签时，计算机系统会自动调用JavaScript脚本引擎来解析代码内容，直到遇到标签为止。因为JavaScript代码是嵌入在HTML代码中的，为了使页面结构清晰，常把JavaScript部分的代码放在和标签之间，当然，也可以放在标签和标签之间，或在HTML文档中多处嵌入，但这不是推荐的方法，由于浏览器在解析HTML文档时是自上而下的顺序，设计者需要确保JavaScript代码被优先解析，所以网页开发者一般都是将JavaScript代码放在和标签之间。 9.2.
6、2 JavaScript的解析顺序的解析顺序JavaScript的解析顺序与HTML的解析顺序相同，都是按照书写顺序解析并运行的。当浏览器解析HTML文档时，一旦遇到JavaScript代码，就会停止对HTML代码的解析，转向对JavaScript代码的解析，只要在JavaScript代码解析完毕后，浏览器才会继续解析HTML的代码，9.2.3 script元素属性元素属性在网页中一般使用script元素来实现在网页中嵌入JavaScript脚本，该元素包含1个必选属性“type” 和5个可选的属性language、charset、src、defer、runat。（1）type属性：用来设置脚
7、本的类型，取值包括:application/ecmascript、application/javascript、 application/x-ecmascript、application/x-javascript、text/ecmascript、text/javascript、 text/jscript、text/livescript、text/tcl、text/x-ecmascript和text/x-javascript。 对于嵌入的JavaScript脚本来说，设置type=text/ecmascript属性值即可，如果不设置也没关系， 因为默认脚本类型也是JavaScript，即text
8、/javascript。 除了type属性之外，language也可以用来设置script包含的脚本类型。9.2.3 script元素属性元素属性（2）src属性：用于定义包含外部脚本文件的URL。 （3）charset属性：用来设置script元素包含的脚本的字符编码，默认是utf-8编码。（4）defer属性：可以延迟脚本的执行时间，直到HTML文档已经全部显示给用户为止，但该属性仅被IE浏览器支持。（5）runat属性：可以设置脚本执行的位置，默认在客户端浏览器中执行，如设置runat=server，则表示在服务器端执行。9.3.1 标识符的命名规定标识符的命名规定JavaScript的
9、标识符一般分为用户自定义标识符和关键字，其中，用户自定义标识符一般用于变量名称、函数名、关键字、对象名、常量名等标识；而关键字又叫保留字，具有特定的含义，可以完成相应的Web功能，编程人员对关键字只能使用，不能修改，也不能将它们用做程序的函数名、变量名、对象名等。一般情况下，合法标识符必须满足以下几条规定：（1）标识符必须在同一行。（2）标识符不能与关键字同名。（3）标识符的第一个字符必须是字母、下划线、美元符号，第一个字符以外的其它字符可以是字母、下划线、美元符号、数字，但不能有空格或其它字符。如：（4）JavaScript是严格区分大小写的，大写字母和小写字母所代表的意义不同。9.3.2
10、JavaScript的数据类型的数据类型1 1数值型数值型数值型是JavaScript中最基本的数据类型，JavaScript中所有的数值型数据均采用IEEE764标准定义的64位浮点格式表示，即Java、C等语言中的double类型。在JavaScript的使用过程中并不区分整数和浮点数，只要不超过其类型的数据范围，都可以获得JavaScript的正确支持，一般在网页中可以出现整型、浮点型、科学记数型、八进制和十六进制等形式进行应用。9.3.2 JavaScript的数据类型的数据类型2 2字符型字符型在JavaScript中，字符型数据又称为字符串，由零个或者多个字符组成。程序中的字符串应
11、该由单引号或双引号定界起来，使用双引号和使用单引号的效果是一样的，注意开头和结尾所使用的定界符必须保持一致。在使用字符串的过程中，如需要使用另一种定界符，正确的做法是在有双引号标记的字符串中加入使用单引号的引用字符，在有单引号标记的字符串中加入使用双引号的引用字符，如：学习JavaScript有趣吗?。在拼接字符串时，可通过加法符号拼接多个字符串，从面得到一个新字符串。如果是数值型数据和字符串进行拼接，则数值数据会被自动转换成字符串再进行拼接。若加号两边的操作数都是数字时，则进行数字的加法运算，并得出数值型数据结果。9.3.2 JavaScript的数据类型的数据类型3 3布尔型布尔型Java
12、Script中的布尔类型使用非常广泛，布尔型只含有true（真）和false（假）两个值，一般用于逻辑运算和关系运算中，代表状态或标志。4 4数组数组数组就是某类数据的集合，通过下标来标记数组中的元素，数据类型可以是整型、字符串、甚至是对象，定义数组的语法格式为：var 数组名 = new Array（元素个数）;9.3.3 变量变量变量可以用来存储或表示一个数据的名称，它代表了内存中的存储单元，其属性值在程序的运行过程中随时可以发生改变。可以把变量看作是一个容器，用于存放一些数据，需要时取出来使用，也可以再放其他的数据以替换原始数据，也就是说变量是临时存放数据的地方，在程序中可以引用变量来操
13、作其中的数据。这和计算机硬件系统的工作相似，当声明一个变量时，实际上就是向计算机系统发出申请，在内存划一块小区域存放数据，这块小区域就是变量。9.3.3 变量变量1 1变量的声明变量的声明变量在使用前必须先声明，把变量声明为合适的数据类型是提高程序效率的手段，也是很好的编程习惯。JavaScript声明变量的方法很简单，不需要指定变量的数据类型，而是统一使用关键字var来声明，其声明方法如下：var 变量名称；var 变量名称1，变量名称2，变量名称3，；var 变量名称=变量值；2 2变量的使用变量的使用变量是临时存储数据，其值在运行的过程中可以动态的改变。9.4 常用运算符常用运算符程序运
14、行时需要靠各种运算进行，运算时需要各种运算符与表达式参与。JavaScript作为一门脚本语言，与其他语言一样，也有语言本身的运算符，用于完成一些指定的操作。JavaScript语言的运算符主要分为算术运算符、逻辑运算符、比较运算符等。9.4.1 算术运算符算术运算符算术运算符包括加法（+）、减法（-）、乘法（*）、除法（/）、求余（%）、递增（+）、递减（-）、取反（-）、正号（+）。9.4.2 赋值运算符赋值运算符赋值运算符（=）的作用是将一个数据值赋给一个变量、数组元素或对象的属性等 JavaScript还支持一种带操作的赋值运算符，这种运算符是在简单赋值运算符前加双目运算符构成，主要包
15、括+=、-=、*=、/=、%=、=、&=、=、|=、=。其运算过程是用运算符左边的操作数加（减，乘，除，位与/或/异或.)运算符右边的操作数，并把结果赋值给左边的操作数。9.4.3 关系运算符关系运算符关系运算符主要包括等于（=）、不等于（!=）、大于（）、小于（=）、小于等于 (&|”。 9.4.5 条件运算符条件运算符条件运算符是一个三元运算符，其语法格式是： 操作数1？操作数2：操作数3它有3个操作数，第1个操作数的值是布尔型，通常是由一个表达式计算而来，第2操作数和第3个操作数可以是任意类型的数据或者任意类型的表达式。运算规则是：如果第1操作数的值为真，则条件表达式的值就是第2个操作数
16、的值；反之，如果第1操作数的值为假，则条件表达式的值就是第3个操作数的值。9.4.6 其它运算符其它运算符在JavaScript中，除以上介绍的常用运算符外，经常还会用到如逗号运算符(,)、新建运算符(new) 、删除运算符(delete) 、typeof运算符等。（1）逗号运算符（，）：二元运算符，其运算规则是首先计算其左边表达式的值，然后计算其右边表达式的值，最右边表达式的值就是整个表达式的属性值。如： x=（a=9*5，a+8/3）；执行过程为先计算“a=9*5”，得出a=45，再计算a+8/3，即45+8/3，结果为47，最后x的值即为47。（2）新建运算符（new）：一元运算符，该运
17、算符可以创建一个新的自定义对象或Javascript内置的对象。如：var studentArray=new Array(“Jacky”,“Tom”,“Lucy”)；表示创建了一个数组对象studentArray，其的元素有Jacky、Tom及Lucy三个。（3）删除运算符（delete）：用来删除对象、对象的属性或指定的数组和数组元素，也可以用来删除一个变量。如果删除成功，则返回true，否则返回false。（4）typeof运算符：一元运算符。该运算符可以返回一个字符串，该字符串用于显示操作数的数据类型，其操作数可以是任意类型的操作数。9.4.6 其它运算符其它运算符9.5 JavaScr
18、ipt程序程序JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，使用它的目的是与HTML超文本标记语言、Java小程序一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序。而要编写JavaScript程序完成某项任务，就必须使用语句与函数等知识，要合理设计程序的结构，还要了解JavaScript程序中有哪些基本结构，一般在程序中，基本结构主要包括顺序结构、选择结构和循环结构，在本节中主要介绍选择结构、循环结构，而顺序结构比较简单，它按照语句的先后顺序依次执行。9.5.1 语句和语句块语句和语句块使用表达式可以返回一个值，语句就是在表达式
19、后加上一个分号。如：a=x+5;JavaScript中常见的语句主要包括赋值语句、条件语句、逗号语句、选择语句、循环语句、跳转语句、异常语句和其它语句。语句块是一组花括号括起来的语句。如： if (ab) x=0； b=b+1； x=a； JavaScript会逐行执行语句块中的所有语句，除非遇到如break语句、continue语句、return语句、throw等语句才会从语句块中跳出，不执行其后的语句。JavaScript对语句块中的语句多少没有规定，一个语句是一个语句块，多个语句也是一个语句块，只要是使用花括号括起来的语句就是一个语句块。9.5.2 注释语句注释语句类似于HTML的注释，
20、JavaScript代码也有注释语句，用来对某一段代码进行说明，以提高程序可读性。编写注释是一种良好的程序设计习惯，除了方便查看，还可以给以后的维护工作带来方便。JavaScript中的注释语句可以分为两种：单行注释和多行注释。单行注释使用双斜线/开头，其后面同一行的内容就是注释的内容；多行注释以/*标记开始，以*/标记结束，中间所包含的内容都为注释内容。 9.5.3 选择语句选择语句选择语句是JavaScript中的一种基本控制语句，可以完成程序不同执行路线的判断选择，它通过判断表达式是否成立来选择要执行的语句。常见的选择语句包括if语句和switch语句两种。1 1ifif语句语句在if语
21、句中，包括简单的if语句、单分支的ifelse语句以及多分支的if语句。（1）简单if语句的基本语法如下： if（条件） 代码段 9.5.3 选择语句选择语句（2）单分支ifelse语句的基本语法如下： if（条件1） 代码段1 else 代码段2 9.5.3 选择语句选择语句（3）多分支的if语句在程序复杂时还可能需要判断多个条件表达式，这将产生更多的执行路线，有多个条件表达式的基本语法如下：if （条件1） 代码段1 else if（条件2） 代码段2 else 代码段3 9.5.3 选择语句选择语句2 2switchswitch语句语句if语句在判断条件过多时，代码格式易混乱，使得程序条
22、理性很差，JavaScript针对这种情况提供了更有效的switch语句。其语法格式如下：switch（条件表达式） case 值1:代码段1;break; case 值2:代码段2;break; case 值3:代码段3;break; case 值4:代码段4;break; default:代码段n; 9.5.4 循环语句循环语句循环是程序高效率的体现，善用循环，代码结构将得到最大的简化。 1. while1. while循环循环这是一种常用的循环，允许JavaScript多次执行同一个代码段，一般用于不知道循环的次数的情况中，其语法格式如下： while（条件表达式） 循环体 9.5.4
23、循环语句循环语句2 2dodowhilewhile循环循环dowhile循环和while循环很类似，只是把条件表达式的判断放在后面，其语法格式如下：do 循环体 while（条件表达式）;9.5.4 循环语句循环语句3 3forfor循环循环类似于while循环，for循环有一个初始化的变量作为计数器，每循环一次计数器自动增1（或自动减1），并设立一个终止循环的条件表达式。for语句的语法格式如下：for(表达式1；表达式2；表达式3) 循环体 9.5.4 循环语句循环语句4 4forforinin循环循环JavaScript还有另一种形式的for循环，即forin循环，用于循环处理JavaS
24、cript对象，如对象的属性等。关于对象的概念会在下一节中讲解。forin循环的语法格式如下： for（声明变量 in 对象） 循环体 9.6 函数函数在编写程序时，为了方便日后的维护方便以及让程序更好的结构化，通常都会把一些重复使用的代码独立出来，这种独立出来的代码块就是函数。函数是独立主程序而存在的、拥有特定功能的程序代码块，并且这个代码块可以在主程序或其他函数中根据需要而被调用。如果将代码块独立成为函数，可以让日后的维护变得方便和简洁。9.6.1 函数的定义和使用函数的定义和使用1. 1. 定义函数定义函数函数既是常见的数据类型，也是对象。可使用function语句定义函数，也可使用Fu
25、nction（）构造函数来定义函数，还可以在表达式中直接定义和使用函数。使用function语句来定义一个函数的语法代码如下所示： function 函数名(参数1,参数2) return 返回值; 使用Function()构造函数来定义函数的语法代码如下所示：var 函数名 = new Function(参数1, 参数2, 参数3, 函数体);9.6.1 函数的定义和使用函数的定义和使用2 2函数的使用函数的使用函数能简化代码，将程序划分为多个独立的功能模块，并且可代码复用（类似于CSS）。JavaScript还提供了大量内置的函数可以直接调用，如前面例题中用过的write()方法，本身就是
26、一个内置的函数，而write()的括号中的字符串即传递的参数。9.6.2 函数的参数传递函数的参数传递众多的JavaScript内置函数在使用时，几乎都需要传递参数。如window对象的alert()方法、confirm()方法等，函数将根据不同的参数通过相同的代码处理，得到设计者所期望的功能。而自定义函数同样可以传递参数，并且个数不限，定义函数时所声明的参数叫做形式参数。形式参数在函数体内参与代码的运算，而实际调用函数时须传递相应的数据给形式参数，这些数据称为实际参数。9.6.3 函数的作用域和返回值函数的作用域和返回值变量的作用域即变量在多大的范围是有效的，在主程序（函数外部）中声明的变量称为全局变量。其作用域为整个HTML文档。在函数体内部用var声明的变量为函数局部变量，只有在其直属的函数体内才有效，在函数体外该变量没有任何意义。函数返回值须使用return语句，该语句将终止函数的执行，并返回指定表达式的值。其实所有的函数都有返回值，当函数体内没有return语句时，JavaScript解释器将在末尾添加一条return语句，返回值为undefined。一般情况下，要获得函数的返回值，通常有以下几种方法：（1）将函数的返回值赋给变量、数组元素或对象属性。（2）将函数的返回值作为数据在表达式中进行运算。（3）将函数的返回值输出。
