JavaScript第1章.ppt

《JavaScript第1章.ppt》由会员分享，可在线阅读，更多相关《JavaScript第1章.ppt（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第一章第一章JavaScript语法语法课程目标课程目标q熟悉熟悉JavaScript的数据类型：的数据类型：数值型、字符型、逻辑型、空值数值型、字符型、逻辑型、空值q掌握掌握JavaScript的表达式与运算符的表达式与运算符q掌握掌握JavaScript控制语句、内部对象控制语句、内部对象q掌握掌握JavaScript自定义对象自定义对象体验项目体验项目想知道如何在浏览器中显示早上（中午、晚上）好，想知道如何在浏览器中显示早上（中午、晚上）好，同时显示系统的当前日期和星期数吗？打开记事本或者其同时显示系统的当前日期和星期数吗？打开记事本或者其他文本编辑器，输入相关代码，将其保存为后缀是他文

2、本编辑器，输入相关代码，将其保存为后缀是“.html”的文件，通过浏览器打开该文件，就可以在浏的文件，通过浏览器打开该文件，就可以在浏览器窗口中看到如图所示的显示效果览器窗口中看到如图所示的显示效果:知识结构知识结构1.1数据类型数据类型1.2表达式与运算符表达式与运算符1.3控制语句控制语句1.4内部对象内部对象1.5自定义对象自定义对象数据类型数据类型JavaScript是一种基于客户端浏览器、是一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚面向（基于）对象、事件驱动式的网页脚本语言。本语言。JavaScript提供的脚本语言编程与提供的脚本语言编程与C+非常相似，它只是去掉了

3、非常相似，它只是去掉了C语言中有关语言中有关指针等容易产生错误的内容，并提供了功指针等容易产生错误的内容，并提供了功能强大的类库。能强大的类库。JavaScript的格式的格式JavaScript对书写格式有如下要求：对书写格式有如下要求：qJavaScript语言区分大小写。语言区分大小写。qJavaScript脚本程序须嵌入到脚本程序须嵌入到Html文件中。文件中。qJavaScript脚本程序中不能包含脚本程序中不能包含Html标记代码。标记代码。q使用使用JavaScript编写程序时，一行只能写一条语句。编写程序时，一行只能写一条语句。qJavaScript语句末尾可以加分号，此时多

4、条语句可以写在一语句末尾可以加分号，此时多条语句可以写在一行，语句中间以分号隔开。行，语句中间以分号隔开。qJavaScript脚本程序可以独立保存为一个外部文件，其中不脚本程序可以独立保存为一个外部文件，其中不包含包含标签。标签。JavaScript脚本程序的几种基本格式：脚本程序的几种基本格式：我们以在浏览器中显示我们以在浏览器中显示“HelloWorld!”为例，说明为例，说明JavaScript脚本程序的几种基本格式：脚本程序的几种基本格式：（1）document.write(HelloWorld!);（2）document.write(HelloWorld!);（3）document

5、.write(HelloWorld!);（4）document.write(HelloWorld!);（5）语句语句document.write(“HelloWorld!”)保存在一个外部文件保存在一个外部文件“hello.js”中中（6）（7）使用）使用JavaScript协议：协议：请单击请单击或：或：请单击请单击或：或：请单击请单击下面是将下面是将JavaScript脚本加入脚本加入Web文档中的例子：文档中的例子：document.write(这是清华培训基地这是清华培训基地);基本数据类型基本数据类型JavaScript的四种基本数据类型如下：的四种基本数据类型如下：数值：整数型、浮

6、点数型数值：整数型、浮点数型逻辑值：布尔型（逻辑值：布尔型（True或或False）字符串型字符串型空值空值JavaScript采用弱类型的形式，因而一个数据变量或常量采用弱类型的形式，因而一个数据变量或常量不必先做声明，而是在使用或赋值时确定其数据类型。不必先做声明，而是在使用或赋值时确定其数据类型。常量常量q整型常量整型常量其整型常量可以使用十六进制、八进制和十进制的形式表其整型常量可以使用十六进制、八进制和十进制的形式表示其值，例如：示其值，例如：3721、0007、0 xaff、（、（0Xaff）等）等q实型常量实型常量实型常量是由整数部分和小数部分组成，如实型常量是由整数部分和小数部

7、分组成，如12.32、193.98。可以使用科学计数法或标准方法表示：可以使用科学计数法或标准方法表示：5E7、4e5、12.68等等q布尔值布尔值布尔常量只有两种状态，布尔常量只有两种状态，True或或False。它主要用来表示或。它主要用来表示或说明一种状态，用于控制操作流程说明一种状态，用于控制操作流程q字符型常量字符型常量是使用单引号（是使用单引号（）或双引号（）或双引号（“”）括起来的一个或）括起来的一个或多个字符。如多个字符。如“ThisisabookofJavaScript”、“3245”、“ewrt234234”等等字符型常量中也可以包含转义字符字符型常量中也可以包含转义字符转

8、义字符表转义字符表转义字符转义字符意义意义b退格（Backspace）f换页（Form Feed）n换行（New Line）r返回（Carriage Return）t制表符（Tab）单引号（）双引号（）反斜线（）变量变量变量的主要作用是存取数据、提供存放信息的容器。变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。及其变量的作用域。变量命名规则：变量命名规则：首字符必须是大写或小写的字母或下划线（首字符必须是大写或小写的字母或下划线（_）或美元符（）或美元符（$）。）。后续的字符可

9、以是字母、数字、下划线或美元符。后续的字符可以是字母、数字、下划线或美元符。变量名称不能是保留字。变量名称不能是保留字。长度可以是任意。长度可以是任意。区分大小写。区分大小写。约定：集中置顶。约定：集中置顶。使用局部变量。使用局部变量。易于理解：易于理解：studentId 避免混乱：避免混乱：usrname、usrName表达式与运算符表达式与运算符表达式表达式在定义完变量后，就可以对它们进行赋值、改变、运算等一系列操作在定义完变量后，就可以对它们进行赋值、改变、运算等一系列操作了，这一过程通常由表达式来完成。可以说它是变量、常量、布尔及了，这一过程通常由表达式来完成。可以说它是变量、常量、

10、布尔及运算符的集合，因此表达式可以分为算术表达式、字串表达式、赋值运算符的集合，因此表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式等。表达式以及布尔表达式等。运算符运算符运算符是完成操作的一系列符号，在运算符是完成操作的一系列符号，在JavaScript中的算术运算符有：中的算术运算符有：“+”、“-”、“*”、“/”等；比较运算符有：等；比较运算符有：“!=”、“=”等；等；布尔逻辑运算符，如：布尔逻辑运算符，如：“！”（逻辑非）、（逻辑非）、“|”（位或）、（位或）、“|”（逻辑或）；字串运算符，如：（逻辑或）；字串运算符，如：“+”、“+=”等。等。双目运算符双目运算符单

11、目运算符单目运算符操作数操作数1运算符运算符操作数操作数2运算符运算符操作数操作数操作数操作数运算符运算符算术运算符算术运算符JavaScript中的算术运算符有单目运算符和双目运算符。中的算术运算符有单目运算符和双目运算符。双目运算符：双目运算符：+（加）、（加）、-（减）、（减）、*（乘）、（乘）、/（除）、（除）、%（取模）、（取模）、|（按位或）、（按位或）、&(按位与按位与)、（右移）、（右移）、（右移，零填充）。（右移，零填充）。单目运算符单目运算符（取补）、（取补）、+（递加（递加1）、）、-（递减（递减1）比较运算符比较运算符比较运算符的基本操作过程是：首先对它的操作数进行比比

12、较运算符的基本操作过程是：首先对它的操作数进行比较，然后返回一个布尔值较，然后返回一个布尔值True或或False。（大于）、（大于）、（小于）、（小于）、=（大于等于）、（大于等于）、=（等于）、（等于）、!=（不等于）、（不等于）、=（值及类型等于）、（值及类型等于）、!=（值及类型不等于）（值及类型不等于）布尔逻辑运算符布尔逻辑运算符在在JavaScript中增加了几个布尔逻辑运算符中增加了几个布尔逻辑运算符!（逻辑非）、（逻辑非）、&=（与之后赋值）、（与之后赋值）、&（位与）、（位与）、|=（或之后赋值）、（或之后赋值）、|（位或）、（位或）、=（异或之后赋值）、（异或之后赋值）、（

13、位异或）、（位异或）、?：（三目操作符）、：（三目操作符）、|（逻辑或）、（逻辑或）、=（等于）、（等于）、!=（不等于）（不等于）其中三目操作符的主要格式如下：其中三目操作符的主要格式如下：操作数？结果：结果操作数？结果：结果若操作数的结果为真，则表达式的值为结果若操作数的结果为真，则表达式的值为结果1，否则为结，否则为结果果2。控制语句控制语句JavaScript常用的程序控制结构及语句常用的程序控制结构及语句if语句的基本格式如下：语句的基本格式如下：if（表达式）（表达式）语句段；语句段；if-else语句的基本格式如下：语句的基本格式如下：if（表达式）（表达式）语句段语句段1；el

14、se语句段语句段2；若表达式的值为若表达式的值为True，则执行语句段，则执行语句段1；否则执行语句段否则执行语句段2。if-else语句是语句是JavaScript中最基本的控制中最基本的控制语句，通过它可以改变语句的执行顺序。语句，通过它可以改变语句的执行顺序。表达式中必须使用关系运算来实现判断，表达式中必须使用关系运算来实现判断，它是由一个布尔值来估算的。它将零和非它是由一个布尔值来估算的。它将零和非零的数分别转化成零的数分别转化成False和和True。若若if后的语句有多行，则必须使用花括号后的语句有多行，则必须使用花括号将其括起来。将其括起来。if语句的嵌套语句的嵌套if-else

15、-if语句的基本格式如下：语句的基本格式如下：if（表达式（表达式1）语句语句1；elseif（表达式（表达式2）语句语句2；elseif（表达式（表达式n）语句语句n；else语句语句n+1；for循环循环for循环语句的基本格式：循环语句的基本格式：for（初始化；条件；增量）（初始化；条件；增量）语句集；语句集；功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。说明：说明：初始化参数：告诉循环的开始位置，必须赋予变量的初值。初始化参数：告诉循环的开始位置，必须赋予变量的初值。条件：用于判别循环的条件。若条件满足，则

16、执行循环体，否则跳出。条件：用于判别循环的条件。若条件满足，则执行循环体，否则跳出。增量：主要定义循环控制变量在每次循环时按什么方式变化。增量：主要定义循环控制变量在每次循环时按什么方式变化。三个主要语句之间，必须使用分号分隔。三个主要语句之间，必须使用分号分隔。for(vari=5;i0;i-)document.write(i=,i,);while循环循环while循环语句的基本格式：循环语句的基本格式：while（条件）（条件）语句集；语句集；while循环语句与循环语句与for循环语句一样，当条循环语句一样，当条件为真时，重复循环，否则退出循环。件为真时，重复循环，否则退出循环。vari

17、=5;while(i0)document.write(i=,i,);i-;do.while语句语句dowhile语句的基本格式：语句的基本格式：do语句集；语句集；while（表达式）（表达式）vari=5;dodocument.write(i=,i,);i-;while(i0)break和和continue语句语句与与C+语言相同，使用语言相同，使用break语句使得循环从语句使得循环从for或或while循环中跳出，循环中跳出，continue语句使得程序跳过循环内剩余的语句而进入下一次循环。语句使得程序跳过循环内剩余的语句而进入下一次循环。下面的例子使用下面的例子使用break语句跳出循

18、环，实现在语句跳出循环，实现在while循环中只显示循环中只显示i=5、i=4，当，当i=3时跳出循环。时跳出循环。vari=5;while(i0)if(i=3)break;document.write(i=,i,);i-;下面的例子将用下面的例子将用continue语句，实现在语句，实现在while循环中显示循环中显示i=4、i=2、i=1、i=0，当，当i=3时不输出，直接进入下次的循环。时不输出，直接进入下次的循环。vari=5;while(i0)i-;if(i=3)continue;document.write(i=,i,);内部对象内部对象JavaScript是基于对象的（是基于对象

19、的（Object-Based），而不是面），而不是面向对象的（向对象的（Object-Oriented）。之所以说它是一门基于对）。之所以说它是一门基于对象的语言，主要是因为它没有提供抽象、继承、重载等有象的语言，主要是因为它没有提供抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。杂对象统一起来，从而形成一个非常强大的对象系统。虽然虽然JavaScript语言是一门基于对象的语言，但它还语言是一门基于对象的语言，但它还是具有一些面向对象的基本特征。它可以根据需要创建自是具有一

20、些面向对象的基本特征。它可以根据需要创建自己的对象，从而进一步扩大己的对象，从而进一步扩大JavaScript的应用范围，编写的应用范围，编写功能强大的功能强大的Web文档。文档。对象的基础知识对象的基础知识对象的基本结构对象的基本结构JavaScript中的对象是由属性（中的对象是由属性（properties）和方法（）和方法（methods）两）两个基本元素构成的。前者是对象在实施其所需要行为的过程中，实现个基本元素构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图

21、而被执行，从而与特定的函数相联。的意图而被执行，从而与特定的函数相联。引用对象的途径引用对象的途径一个对象要真正地被使用，可采用以下几种方式获得：一个对象要真正地被使用，可采用以下几种方式获得：引用引用JavaScript内部对象内部对象由浏览器环境中提供由浏览器环境中提供创建新对象创建新对象一个对象在被引用之前，这个对象必须存在，否则引用将一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。毫无意义，而出现错误信息。有关对象的操作语句有关对象的操作语句for.in语句语句with语句语句this关键字关键字new运算符运算符对象属性的引用对象属性的引用对象属性的引用可

22、由下列三种方式之一实现：对象属性的引用可由下列三种方式之一实现：使用点（使用点（.）运算符）运算符通过对象的下标实现引用通过对象的下标实现引用通过字符串的形式实现通过字符串的形式实现对象的方法的引用对象的方法的引用在在JavaScript中对象方法的引用是非常简单的，比如：中对象方法的引用是非常简单的，比如：ObjectName.methods()假如引用假如引用university对象中的对象中的showmy()方法，则可使用：方法，则可使用：document.write(university.showmy()若引用若引用Math内部对象中的内部对象中的cos()方法，则可以用：方法，则可以

23、用：with(Math)document.write(cos(35);document.write(cos(80);若不使用若不使用with则引用时相对要复杂些：则引用时相对要复杂些：document.write(Math.cos(35)document.write(Math.cos(80)自定义对象自定义对象使用使用JavaScript可以创建自己的对象。虽然可以创建自己的对象。虽然JavaScript内内部和浏览器本身的功能已十分强大，但部和浏览器本身的功能已十分强大，但JavaScript还是提供还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，了创建一个新对象的方法。使其不

24、必像超文本标识语言那样，求助于其它多媒体工具，就能完成许多复杂的工作。求助于其它多媒体工具，就能完成许多复杂的工作。对象的定义对象的定义JavaScript对象的定义，其基本格式如下：对象的定义，其基本格式如下：functionObject（属性表）（属性表）this.prop1=prop1this.prop2=prop2.this.meth=functionName1;this.meth=functionName2;.以下是一个关于以下是一个关于university对象的定义：对象的定义：functionuniversity(name,city,Url)this.name=name;this

25、.city=city;this.Url=Url;创建对象实例创建对象实例一旦对象定义完成后，就可以为该对象创建一个实例了：一旦对象定义完成后，就可以为该对象创建一个实例了：NewObject=newObject();其中其中NewObject是新的对象，是新的对象，Object是已经定义好的对象。用上面的是已经定义好的对象。用上面的university对象创建实例：对象创建实例：varU1=newuniversity(陕西省陕西省,西安市西安市,http:/);varU2=newuniversity(西安电子科技大学西安电子科技大学,西安西安,http:/);对象方法的使用对象方法的使用在对象

26、中除了使用属性外，有时还需要使用方法。对象的方法就是一个在对象中除了使用属性外，有时还需要使用方法。对象的方法就是一个函数函数FunctionName，通过它实现自己的意图。，通过它实现自己的意图。functionuniversity(name,city,Url)this.name=name;this.city=city;this.Url=Url;this.showuniversity=showuniversity;functionshowuniversity()varstr=this.name+this.city+this.Url;document.write(+str);varU1=newuniversity(陕西省陕西省,西安市西安市,http:/);varU2=newuniversity(清华清华IT,北京北京,http:/