第4章Web脚本语言JavaScript

第4章Web脚本语言JavaScript§1.JavaScript语言概述§2.JavaScript编程基础§3.JavaScript中的对象§4.JavaScript程序流程控制§5.函数§6.事件和事件过程§1.JavaScript语言概述一、JavaScript语言的特点1、什么是JavaScript？JavaScript是一种脚本语言，可直接嵌入到HTML文档中，浏览器能理解其中的JavaScript语句，并在网页下载后对JavaScript语句进行解释执行。JavaScript是在浏览器中解释执行的，具有平台无关性，不认什么操作系统，只要浏览器支持JavaScript即可。运用JavaScript可控制HTML页面，并对页面事件做出响应。2、JavaScript语言与Java语言Java是一种编译型语言，先通过Java编译器，将源程序编译成class，从而创建JavaApplet或JavaApplication，然后客户浏览器将JavaApplet下载后才能执行。JavaApplet在页面中占用了一块区域，该区域与HTML其他部分完全独立，JavaApplet在这块区域内完成它的功能。JavaScript是一种解释型语言，它将源代码直接写入HTML页面中，不需要预先编译，浏览器将HTML下载后，则浏览器进行解释执行，JavaScript并不在页面中占用空间，而是对HTML页面中的对象进行控制处理，在整个页面中完成它的功能。Java是一种强类型语言，语法十分严谨，变量必须进行声明并指定其数据类型。而JavaScript是一种弱类型的语言，比Java自由得多。3、JavaScript组成部分：由三个部分组成⑴JavaScript核心语言：包括JavaScript的基本语法：操作符、语句、函数及一些JavaScript内置的对象——Array对象、Date对象和Math对象，JavaScript核心语句中定义的是在客户端和服务器端都会用到的基本语法。⑵JavaScript客户端扩展：在JavaScript核心语言基础上，扩展了控制浏览器的对象和文本对象模型DOM(DocumentObjectModel)。在客户端脚本中，可对页面上的对象进行控制，完成许多功能，如处理鼠标点击、表单输入等。⑶JavaScript服务器端扩展：在核心语言基础上扩展了在服务器上运行需要的对象，可与数据库互联，对服务器上文件进行控制等。4、JavaScript的发展：P127二、JavaScript程序的编辑和调试在HTML代码中加入Scriptlanguage=javascript标签，也可加入SRC属性，使页面能调用写在源文件中的JavaScript函数，源文件中的函数可在多个页面间共享。如：scriptlanguage=javascriptSRC=”js/check.js”使用源文件可使用两种方式：⑴使用相对路径，SRC属性中是文件的相对路径。⑵使用URL地址，SRC属性中是文件的URL地址。使用SRC引用JavaScript源文件时，必须以.js为文件后缀名，并且在源文件中只能使用JavaScript代码而不能包含任何HTML标签。§2.JavaScript编程基础一、数据类型1、变量：有名称的单元就是变量。2、变量的定义方式：用关键字var定义变量。JavaScript没有强制要求变量必须先定义才使用。在定义变量时，可将变量的定义和初始化分开完成，也可将变量的定义的初始化在一条语句中完成。如声明一个变量但没有对其赋值，该变量存在且为undefined类型。不能在没有声明变量的情况下使用一个变量，这样会导致运行时产生错误。3、变量名称⑴定义的变量不能和保留字冲突。保留字是JavaScript中已经使用的单词或保留在以后的版本中可能使用的单词。⑵变量名必须以字母或下划线开始。⑶变量名不能包含空格。⑷JavaScript是区分大小写的。4、数据类型：JavaScript不要求预先确定变量的数据类型，但每个JavaScript变量对应一个数据类型的值。JavaScript变量的数据类型可以发生变化。⑴字符串类型的变量所代表的值是处于引号内的一组字符。⑵数值类型：既可以代表整数又可代表小数。⑶布尔类型：只有真(true)和假(false)两种取值。⑷空类型：null，意味着什么也没有。注意JavaScript区分大小写，不要将null和NULL混淆起来。⑸对象类型：JavaScript是基于对象的语言，如window等对象。这是对象类型的数据。5、变量的作用域：每个变量都作用域。要函数内声明的变量只能在声明它们的函数中使用；函数外声明的变量在同一页内的任何脚本命令均可访问和修改该变量的值。二、常量1、整型常量：又称字面常量，是不能改变的数据，可使用十六进制、八进制和十进制表示。2、实型常量：由整数部分加小数部分表示的量，可使用科学表示法或标准方法表示。3、布尔值：只有true或false。4、字符型常量：使用单引号或双引号括起来的若干个字符。5、空值：null，表示什么也没有。6、特殊字符：以反斜杠(\)开头的不可显示的特殊字符。三、运算符和表达式1、比较操作符：、=、、=、==、!=2、运算操作符：+、-、*、/、%、++、--。3、逻辑操作符：&&、||、!。4、赋值操作符：=、+=、-=、*=、/=、%=。5、其他操作符⑴条件操作：形式是：(condition)?val1:val2。⑵new操作符：为用户自定义对象类型或JavaScript内置对象类型创建一个实例，如：vartheDate=newDate()。JavaScript是一种基于对象的语言，用户可建立自定义对象类型。⑶delete操作符：可删除对象、对象的属性或数据中的元素。如：varcomputer=newArray(“mouse”,keyboard”,”cpu”,”harddisk”);deletecomputer[2];⑷this操作符：用来引用当前的对象。§3.JavaScript中的对象1、数组对象(Array)JavaScript没有数组数据类型，可使用数组对象完成数据的功能。⑴建立数组：有两种方法①建立数组的同时，将数组中的元素赋值。如：varcomputer=newArray(“mouse”,keyboard”,”cpu”,”harddisk”);②建立数组时，需定义数组的长度。如varcomputer=newArray(3);⑵访问数组中元素：通过数组下标访问数组元素。下标从0开始，而数组的长度是数组中元素的个数。⑶数组对象的属性与方法数组对象的length属性可获得数组的长度。sort()方法：将数组元素排序。reverse()方法：将数组中元素颠倒顺序，第一个元素和最后一个元素交换，第二个元素和倒数第二个元素交换，以此类推。2、字符串对象(String)JavaScript中有字符串类型数据和字符串对象，定义方法分别是：s=”hello”;和vars=newString(“hello”);但字符串变量和字符串对象在使用时没有太大区别，字符串变量可使用字符串对象的属性和方法。字符串对象的length，用来求字符串的长度。方法有：⑴toUpperCase()和toLowerCase()方法：将字符串字母全部转换成大写字母和小写字母。⑵indexOF(子字符串)方法：有一个参数“子字符串”，功能是返回子字符串在字符串对象中的位置。如字符串对象中存在子字符串，返回其位置(如在字符串对象中有多个子字符串，返回第一个所在的位置)；如不存在，返回-1。注意：位置的下标是从0开始的。⑶charAt(位置)方法：有一个参数“位置”，功能是返回字符串对象中下标位置的字母。⑷substring(位置1，位置2)方法：返回从“位置1”到“位置2”之间的字符串。注意：返回的字符串中位置2所在的字母不包括在内。3、日期对象(Date)在JavaScript中，日期对象中存储的不仅是日期数据，还包括时间数据。日期对象实际存储的是对象的时间相对1970年1月1日0时0分0秒的毫秒数，如对象代表的时间在1970年前，存储的是负数；如在1970年后，存储的是正数。⑴创建日期对象：格式为：var对象名称=newDate(参数)根据参数的不同，可有多个方法生成日期对象：①没有参数时，使日期对象获得当前的日期和时间，如：vartheDate=newDate();②创建日期对象时，指定其中的年、月、日，如：vartheDate=newDate(1999,1,1);日期对象是1999年2月1日，月份用0到11代表1月到12月。不指定时间，默认为0时0分0秒。③创建日期对象时，还可指定时间，如：varthaDate=newDate(1999,1,1,15,30,27);⑵日期对象的方法：下面的方法获得日期对象中各个部分：①getYear()：获得日期对象的年份②getMonth()：获得日期对象的月份③getDate()：获得日期对象的日期④getHours()：获得日期对象的小时数⑤getMinutes()：获得日期对象的分种数⑥getSeconds()：获得日期对象的秒数⑦getDay()：返回日期对象处于星期几，返回值为0到6，代表星期日到星期六。设置日期对象的各个部分的方法有：①setYear(年份)：设置日期对象的年份②setMonth(月份)：设置日期对象的月份③setDate(日期)：设置日期对象的日期④setHours(小时数)：设置日期对象的小时数⑤setMinutes(分钟数)：设置日期对象的分种数⑥setSeconds(秒数)：设置日期对象的秒数⑦setDay(星期几)：设置日期对象处于星期几⑶getTime()方法与setTime(毫秒数)方法getTime()方法获得从1970年1月1日0时0分0秒开始的毫秒数。SetTime()方法将毫秒数存储到日期对象中，在以后的运算中将这个日期对象各部分取出分别处理。4、数学对象(Math)：数学对象不需使用new操作符创建对象，可直接使用Math调用数学对象。数学对象的PI属性代表圆周率。方法有：⑴min(值1，值2)和max(值1，值2)方法：返回两个数中较小或较大的数。⑵round(数值)、ceil(数值)和floor(数值)方法：功能都是将参数取整。区别是round将参数四舍五入后返回，ceil返回大于等于参数的最小整数，floor返回小于等于参数的最大整数。⑶random()方法：产生0～1的随机数。产生m～n的随机整数的格式为：Math.round(Math.random()*(n-m))+m⑷sqrt(数值)方法：返回数值的平方根。⑸abs(数值)方法：返回数值的绝对值。此外，还有sin(数值)、cos(数值)、tan(数值)、asin(数值)、acos(数值)和atan(数值)等方法，获得正弦值、余弦值、正切值、反正弦值、反余弦值和反正切值。注意：这里角度的数值采用弧度进行计算。§4.JavaScript程序流程控制JavaScript中，每条语句后应以一个分号结尾，但JavaScript要求并不严格，语句后可加分号也可不加分号。一、条件控制语句1、if…else语句格式：if(条件)语句1else语句22、switch语句格式：switch(表达式){case标签1：代码块1；break；case标签2：代码块2；break；……default：缺省代码块；}二、循环控制语句1、for语句格式：for(初始表达式；循环表达式；递增表达式){代码块}2、while语句格式：while(循环条件){代码地段}3、do…while语句格式：do{代码块递增表达式}while(循环条件)4、label语句格式：label：代码块label语句只是在代码块前加上一个标识。5、break语句：跳出循环体或switch语句。Break语句还有一种使用方式：breaklabel，执行到该语句时，立即跳出la