1、第一章,JavaScript语法,课程目标,熟悉JavaScript的数据类型：数值型、字符型、逻辑型、空值掌握JavaScript的表达式与运算符掌握JavaScript控制语句、内部对象掌握JavaScript自定义对象,体验项目,想知道如何在浏览器中显示早上（中午、晚上）好，同时显示系统的当前日期和星期数吗？打开记事本或者其他文本编辑器，输入相关代码，将其保存为后缀是“.html”的文件，通过浏览器打开该文件，就可以在浏览器窗口中看到如图所示的显示效果:,知识结构,1.1 数据类型,1.2 表达式与运算符,1.3 控制语句,1.4 内部对象,1.5 自定义对象,数据类型,JavaScri
2、pt是一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript提供的脚本语言编程与C+非常相似，它只是去掉了C语言中有关指针等容易产生错误的内容，并提供了功能强大的类库。,JavaScript的格式,JavaScript对书写格式有如下要求：JavaScript语言区分大小写。JavaScript脚本程序须嵌入到Html文件中。JavaScript脚本程序中不能包含Html标记代码。使用JavaScript编写程序时，一行只能写一条语句。 JavaScript语句末尾可以加分号，此时多条语句可以写在一行，语句中间以分号隔开。 JavaScript脚本程序可以独立保
3、存为一个外部文件，其中不包含标签。,JavaScript脚本程序的几种基本格式：,我们以在浏览器中显示“Hello World!”为例，说明JavaScript脚本程序的几种基本格式： （1） document.write(“Hello World!“);（2） document.write(“Hello World!“);（3） document.write(“Hello World!“);,（4） document.write(“Hello World!“);（5） 语句document.write(“Hello World!”) 保存在一个外部文件“hello.js”中 （6） （7）使
4、用JavaScript协议：请单击 或： 请单击 或： 请单击,下面是将JavaScript脚本加入Web文档中的例子：,document.write(“这是清华培训基地“);,基本数据类型,JavaScript的四种基本数据类型如下：,数值：整数型、浮点数型逻辑值：布尔型（True或False）字符串型空值,JavaScript采用弱类型的形式，因而一个数据变量或常量不必先做声明，而是在使用或赋值时确定其数据类型。,常量,整型常量 其整型常量可以使用十六进制、八进制和十进制的形式表示其值，例如：3721、0007、0xaff、（0Xaff）等 实型常量实型常量是由整数部分和小数部分组成，如1
5、2.32、193.98。可以使用科学计数法或标准方法表示：5E7、4e5、12.68等 布尔值布尔常量只有两种状态，True或False。它主要用来表示或说明一种状态，用于控制操作流程 字符型常量是使用单引号（）或双引号（“”）括起来的一个或多个字符。如“This is a book of JavaScript”、“3245”、“ewrt234234”等,字符型常量中也可以包含转义字符,转义字符表,变量,变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 变量命名规则： 首字符必须是大写或小写的字母或下划线（_）或美元符（$）。
6、后续的字符可以是字母、数字、下划线或美元符。 变量名称不能是保留字。 长度可以是任意。 区分大小写。 约定：集中置顶。 使用局部变量。 易于理解：studentId 避免混乱：usrname、usrName,表达式与运算符,表达式在定义完变量后，就可以对它们进行赋值、改变、运算等一系列操作了，这一过程通常由表达式来完成。可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式等。 运算符运算符是完成操作的一系列符号，在JavaScript中的算术运算符有：“+”、“-”、“*”、“/”等；比较运算符有：“!=”、“= =”等；布尔逻辑运算符，
7、如：“！”（逻辑非）、“|”（位或）、“|”（逻辑或）；字串运算符，如：“+”、“+=”等。,双目运算符,单目运算符,操作数1 运算符 操作数2,运算符 操作数,操作数 运算符,算术运算符,JavaScript中的算术运算符有单目运算符和双目运算符。 双目运算符：+（加）、-（减）、*（乘）、/（除）、%（取模）、|（按位或）、&(按位与)、（右移）、（右移，零填充）。 单目运算符（取补）、+（递加1）、-（递减1）,比较运算符,比较运算符的基本操作过程是：首先对它的操作数进行比较，然后返回一个布尔值True或False。（大于）、=（大于等于）、=（等于）、!=（不等于）、=（值及类型等于）
8、、!=（值及类型不等于）,布尔逻辑运算符,在JavaScript中增加了几个布尔逻辑运算符!（逻辑非）、&=（与之后赋值）、&（位与）、|=（或之后赋值）、|（位或）、=（异或之后赋值）、（位异或）、?：（三目操作符）、|（逻辑或）、=（等于）、!=（不等于） 其中三目操作符的主要格式如下： 操作数？结果：结果 若操作数的结果为真，则表达式的值为结果1，否则为结果2。,控制语句,JavaScript常用的程序控制结构及语句if语句的基本格式如下：if（表达式）语句段； if-else语句的基本格式如下：if（表达式）语句段1；else语句段2；,若表达式的值为True，则执行语句段1；否则执行
9、语句段2。,if-else语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。表达式中必须使用关系运算来实现判断，它是由一个布尔值来估算的。它将零和非零的数分别转化成False和True。若if后的语句有多行，则必须使用花括号将其括起来。,if语句的嵌套,if-else-if语句的基本格式如下： if（表达式1）语句1； else if（表达式2）语句2； else if（表达式n）语句n； else语句n+1；,for循环,for循环语句的基本格式：for（初始化；条件；增量）语句集；功能：实现条件循环，当条件成立时，执行语句集，否则跳出循环体。 说明： 初始化参数：
10、告诉循环的开始位置，必须赋予变量的初值。 条件：用于判别循环的条件。若条件满足，则执行循环体，否则跳出。 增量：主要定义循环控制变量在每次循环时按什么方式变化。 三个主要语句之间，必须使用分号分隔。, for(var i=5;i0;i-) document.write(“i=“,i,“); ,while循环,while循环语句的基本格式：while（条件）语句集；,while循环语句与for循环语句一样，当条件为真时，重复循环，否则退出循环。,var i=5;while(i0)document.write(“i=“,i,“);i-; ,do.while语句,dowhile语句的基本格式：do语
11、句集；while（表达式）,var i=5;dodocument.write(“i=“,i,“);i-;while(i0) ,break和continue语句,与C+语言相同，使用break语句使得循环从for或while循环中跳出，continue语句使得程序跳过循环内剩余的语句而进入下一次循环。 下面的例子使用break语句跳出循环，实现在while循环中只显示i=5、i=4，当i=3时跳出循环。, var i = 5;while(i0)if(i=3)break;document.write(“i=“,i,“);i-; ,下面的例子将用continue语句，实现在while循环中显示i=4
12、、i=2、i=1、i=0，当i=3时不输出，直接进入下次的循环。, var i =5;while(i0)i-; if(i=3)continue; document.write(“i=“,i,“); ,内部对象,JavaScript是基于对象的（Object-Based），而不是面向对象的（Object-Oriented）。之所以说它是一门基于对象的语言，主要是因为它没有提供抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。虽然JavaScript语言是一门基于对象的语言，但它还是具有一些面向对象的基本特征。它可以根据需要创建自
13、己的对象，从而进一步扩大JavaScript的应用范围，编写功能强大的Web文档。,对象的基础知识,对象的基本结构 JavaScript中的对象是由属性（properties）和方法（methods）两个基本元素构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 引用对象的途径一个对象要真正地被使用，可采用以下几种方式获得：引用JavaScript内部对象由浏览器环境中提供创建新对象一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。,有关对象的操作语句,for.in语句,
14、with语句,this关键字,new运算符,对象属性的引用,对象属性的引用可由下列三种方式之一实现：,使用点（.）运算符,通过对象的下标实现引用,通过字符串的形式实现,对象的方法的引用,在JavaScript中对象方法的引用是非常简单的，比如：ObjectName.methods()假如引用university对象中的showmy()方法，则可使用：document.write(university.showmy()若引用Math内部对象中的cos()方法，则可以用：with(Math)document.write(cos(35);document.write(cos(80);若不使用with
15、则引用时相对要复杂些：document.write(Math.cos(35)document.write(Math.cos(80),自定义对象,使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。使其不必像超文本标识语言那样，求助于其它多媒体工具，就能完成许多复杂的工作。,对象的定义,JavaScript对象的定义，其基本格式如下： function Object（属性表） this.prop1=prop1 this.prop2=prop2 . this.meth=functionName1
16、; this.meth=functionName2; .,以下是一个关于university对象的定义： function university(name,city,Url) this.name=name;this.city=city;this.Url=Url; ,创建对象实例,一旦对象定义完成后，就可以为该对象创建一个实例了：NewObject=new Object();其中NewObject是新的对象，Object是已经定义好的对象。用上面的university对象创建实例：var U1=new university(“陕西省“,“西安市“,“ http:/“);var U2=new un
17、iversity(“西安电子科技大学“,“西安“,“http:/“);,对象方法的使用,在对象中除了使用属性外，有时还需要使用方法。对象的方法就是一个函数FunctionName，通过它实现自己的意图。function university(name,city,Url)this.name=name;this.city=city;this.Url=Url;this.showuniversity=showuniversity;function showuniversity()var str =this.name+“ “+this.city+“ “+this.Url;document.write(“
18、+str);var U1=new university(“陕西省“,“西安市“,“http:/ “);var U2=new university(“清华IT“,“北京“,“http:/ “);U1.showuniversity();U2.showuniversity(); ,利用对象原型（prototype）为默认对象定义属性,对象原型（prototype）的好处是可以接收变量传来的值，例如下例中将实现一个字符串的替换，其中的对象原型用于接收一个函数的返回值。String.prototype.replaceAll=strReplace;function strReplace(findText
19、,replaceText)var str=new String(this);while(str.indexOf(findText)!=-1)str=str.replace(findText,replaceText);return str;myStr=“告诉你如果你正在做WEB开发,那么“+“JavaScript“+“会让你事半功倍,功力大增.“;document.write(“原稿是：“+myStr+“);document.write(“利用replace()将你改成您：“+“+myStr.replace(你,您)+“);document.write(“利用自定义的字符串方法-全部取代“+“+
20、myStr.replaceAll(你,您)+“); ,实践项目,首先输入JavaScript标记，然后用new Date()生成一个日期对象。由于需要显示早上（中午、晚上）好，所以可以使用该对象的getHours()方法得到系统当前时间，然后用ifelse语句进行判断，如果时间属于早上，就输出“早上好”，由于需要多次判断，所以使用if的嵌套语句 。now = new Date()hour=now.getHours()if(hour,由于需要输出当前系统的日期和星期数，所以还需要使用new Date()得到一个日期对象today，然后用today.getYear()输出“年”，用today.getMonth()输出“月”，用today.getDate()输出“日”，为了输出星期数，需要一个数组initArray保存有关星期的字符串，然后再用一个循环将这些星期数分开成每个不同星期数的字符串，最后调用输出函数将年月日及星期数输出。 至此，本章实践项目的内容就全部完成了,熟悉JavaScript的数据类型：数值型、字符型、逻辑型、空值掌握JavaScript的表达式与运算符掌握JavaScript控制语句、内部对象掌握JavaScript自定义对象,
