JavaScript脚本编程

第七章JavaScript脚本编程内容提要JavaScript概述词法规则基本数据类型运算符和表达式核心语句函数复合数据类型对象模型事件处理JavaScript概述JavaScript是由Netscape和Sun公司联合开发的基于对象和事件驱动的客户端脚本编程语言，通过它与HTML、XML、DOM、CSS、JavaApplet等技术的有机结合，可以开发出具有很强交互性的动态页面。第一个JavaScript程序htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8title实时显示时间/titlescripttype=text/javascript!--setInterval(showTime(),1000);functionshowTime(){vard,s;d=newDate();s=d.getHours()+:+d.getMinutes()+:+d.getSeconds();timetxt.innerHTML=h1当前时间：fontcolor=blue+s+/font/h1;}//--/script/headbodydivid=timetxtalign=center/div/body/html基于对象事件驱动解释性语言简单性实时性跨平台性安全性JavaScript的特点JavaScript脚本的引入方法通过script与/script标签对引入。将JavaScript脚本代码放在script与/script之间，浏览器自动识别该标签对并逐行解释其间的代码。通过script标签的src属性引入。将包含在script与/script标签对之间的代码放入扩展名为.js的脚本文件中，然后在HTML文档中通过script标签的src属性来引用该脚本文件。在网页中嵌入JavaScript脚本JavaScript脚本的引入方法通过JavaScript伪协议引入。伪协议是非标准化通信机制的统称，JavaScript伪协议的一般格式为：javascript:URL。其中“javascript:”是伪协议说明符，URL的主体可以是任意的JavaScript代码，多个语句之间使用分号进行分隔。例如：imgsrc=zzcc.jpgonClick=javascript:vard1=(newDate()).getTime();vard2=(newDate(2008,4,12)).getTime();vardays=Math.floor((d1-d2)/(1000*60*60*24));alert('距离汶川地震已过去'+days+'天!')在网页中嵌入JavaScript脚本JavaScript脚本的引入方法通过HTML的事件属性引入。HTML元素的事件属性用于指示如何处理特定的事件，方法是将脚本指定为事件属性的值，以响应系统或用户的动作。事件属性名称由事件名称加一个“on”前缀构成，如onClick，onMouseOver等。例如：scripttype=text/javascript!--functionshowMsg(){vard1=(newDate()).getTime();vard2=(newDate(2008,4,12)).getTime();vardays=Math.floor((d1-d2)/(1000*60*60*24));alert('距离汶川地震已过去'+days+'天!');}//--/scriptimgsrc=zzcc.jpgonClick=showMsg()在网页中嵌入JavaScript脚本嵌入JavaScript脚本的位置JavaScript脚本可放在HTML文档中任何需要的位置。一般来说，可以在head与/head标签对、body与/body标签对之间放置JavaScript脚本代码。放置在head与/head标签对之间的JavaScript脚本一般用于提前载入，以响应用户的页面动作，且一般不影响HTML文档的浏览器显示格局。如果需要在页面载入时动态生成页面内容，应将JavaScript脚本放置在body与/body标签对之间。在网页中嵌入JavaScript脚本标识符在JavaScript中，标识符用来命名变量和函数。标识符的第一个字符必须是字母、下划线或美元符号，后续字符可以是字母、数字、下划线或美元符号。例如：x、user_name、U571、_pswd、$money都是合法的标识符。不能使用JavaScript中的关键字作为标识符。在JavaScript中定义了20多个关键字，这些关键字是JavaScript内部使用的，如var、for、function、if等，它们都不能作为标识符使用。词法规则词法规则关键字和保留字关键字是JavaScript语法自身的一部分，具有特殊的意义，不能用作标识符。保留字是为将来的关键字而保留的单词，由于未来浏览器可能会实现这些保留字，因此它们最好也不要作为标识符使用。breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewithJavaScript的保留字词法规则大小写敏感JavaScript是一种区分大小写的脚本语言。在输入关键字、变量名、函数名以及其它所有标识符时，都必须采取一致的字符大小写形式。例如，“username”、“userName”、“UserName”代表三个不同的变量名。许多JavaScript对象的属性和它们所代表的HTML标签的属性同名，在HTML中这些标签的属性可以以任意大小写的方式输入，但是在JavaScript中它们通常都有固定的大小写格式。例如，body标签的背景颜色属性可以声明为“bgcolor”、“bgColor”或者“BGCOLOR”，但代表body标签的document对象的背景颜色属性只能声明为“bgColor”。词法规则空白字符空白字符包括空格、制表符和换行符等，在编写脚本时占据一定的空间，以增强代码的可读性，方便开发人员查看和维护。空格是使用最为频繁的空白字符，常被用作分隔符。例1：sum=3+10;≡sum=3+10;空格被忽略例2：varx=typeofJavaScript;空格作为分隔符词法规则语句结束符JavaScript使用分号作为语句结束符，多个语句可写在不同行或同一行。例如：varstr=WelcometoJavaScriptWorld!;document.write(str);也可写成：varstr=WelcometoJavaScriptWorld!;document.write(str);语句分行后，作为语句结束符的分号可以省略。例如：varstr=WelcometoJavaScriptWorld!document.write(str)注意：省略分号不是一个好的编程习惯，它可能导致程序产生一种不明确的状态。词法规则注释JavaScript有单行注释和多行注释两种形式。单行注释以“//”开头，处于“//”和一行结尾之间的任何文本都被当作注释而被浏览器忽略掉。多行注释以“/*”开头，以“*/”结尾，处于“/*”和“*/”之间的文本被当作注释，这些文本可以跨越多行，但是其中不能有嵌套的注释。例如：//这是单行注释/**这是多行注释*它是多行的*它是多行的*/基本数据类型基本数据类型定义了一组不可再分的值的集合，以及作用于该集合上的操作集。JavaScript支持的基本数据类型包括数值型、字符串型和布尔型，分别对应于不同的存储空间。基本数据类型和常量当某种基本类型的数据项直接出现在程序中时，称之为常量，即值不能被改变的量。数值型：最基本的数据类型，包括整型和浮点型整型常量：可以使用十进制、八进制或十六进制表示，如1234、0745、0x93C等。浮点型常量：可以使用小数或指数方法表示，如12.34、5.9e7、4.3e-5等。特殊的数值型常量：Infinity表示正无穷大，-Infinity表示负无穷大，NaN表示“不是一个数值”、“没有意义的运算”或“无法转换成数值类型”。如5/0的运算结果为Infinity，-5/0的运算结果为-Infinity，0/0的运算结果为NaN。基本数据类型基本数据类型和常量字符串型：表示文本的数据类型字符串常量：用或''括起来的若干个字符，如JavaScript、'ThisisabookofC++'等。转义字符：以反斜杠\开头的具有特殊功能的字符。转义字符功能说明\b退格\f换页\n换行\r回车\t制表\'单引号\双引号\\反斜线\XXXASCII字符，每一个大X是一个八进制数值，整个八进制数的范围是0~377。例如：\101表示A\xXXASCII字符，每一个大X是一个十六进制数值，整个十六进制数的范围是00~FF。例如：\x65表示e\uXXXXUnicode字符，每一个大X是一个十六进制数值。例如：\u000A表示换行，和\n结果一样基本数据类型基本数据类型和常量布尔型：表示状态的数据类型布尔常量：只有两个可能的值true和false，表示“真”和“假”两种状态。如53的运算结果为true，“Chinese”“China”的运算结果是false。变量变量是存放常量的容器，主要作用是存取数据。变量的声明：在JavaScript中，可以先通过关键字var来声明变量，然后再使用。例如：varnum;varstr,flag;num=100;str=JavaScriptLanguage;flag=true;变量的初始化：变量可以在声明的同时指定初始值。例如：varnum=100;varstr=JavaScriptLanguage,flag=true;仅用var声明但未初始化的变量获得默认初值undefined。变量的类型实际类型视变量内容而定。例如，上例中的num为数值型变量，str为字符串型变量，flag为布尔型变量。变量的类型可以根据变量内容的改变而自动更改。例如：varnum=1;//num为数值型变量num=HelloWorld!;//num为字符串型变量变量可以不经过var声明就直接使用，而在变量赋值时自动声明该变量。例如：num=100;str=JavaScriptLanguage;flag=true;好的编程风格：所有变量在第一次使用前都用var进行声明！基本数据类型运算符和表达式运算符是完成操作的一系列符号，JavaScript支持的运算符包括算术运算符、比较运算符、逻辑运算符等。表达式是由变量、常量和运算符连接起来的式子，根据运算符类型的不同，表达式可分为算术表达式、比较表达式、逻辑表达式等。算术运算符和算术表达式算术运算符算术表达式运算结果简要说明+6+1521将两个数据相加-9-72将两个数据相减*4*832将两个数据相乘/17/53.4将两个数据相除%13%61取两个数据相除的余数++x++变量x的原值加1将变量值加1----y变量y的原值减1将变量值减1运算符和表达式比较运算符和比较表达式当操作数类型不同时进行类型转换当操作数类型不同时不进行类型转换比较运算符比较表达式运算结果简要说明-6-1true小于ChinaChinesefalse大于=true=falsefalse小于或等于=12=12true大于或等于==false==0true等于!=x!='x'false不等于===true===1false恒等于!==2008!==2008true恒不等于运算符和表达式逻辑运算符和逻辑