JavaScript脚本语言.ppt

第4章JavaScript脚本语言,本章要点：JavaScript常量和变量JavaScript表达式和运算符JavaScript浏览器对象JavaScript内置对象JavaScript的事件处理,4.1一个简单的JavaScript脚本,JavaScript语言由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。核心语言部分在客户端、服务器端均可使用，包括了JavaScript的基本语法（如操作符、语句、函数）以及一些内置对象。客户端扩展部分是在JavaScript核心语言的基础上扩展了控制浏览器的对象模型DOM。这样，在客户端编写脚本时，一些基本交互的实现就不用传到服务器端进行了，用户就可以方便地对页面中的对象进行控制，完成许多功能，从而提高了客户端的效率。服务器端扩展部分是在JavaScript核心语言的基础上扩展了在服务器端运行需要的对象，这些对象同样可以与Web数据库联接，对服务器上的文件进行控制，在应用程序之间交换信息，从而实现和CGI同样的功能。JavaScript编写的程序可以直接嵌入HTML源代码中，并通过客户端的浏览器来解释执行。如何在HTML语言中植入一个JavaScript脚本，以下是一个基本的JavaScript脚本结构形式：跟VBScript使用形式相同，JavaScript代码也放置在一对标记符之中，其中Language指明了所使用的脚本语言为JavaScript语言。但现在也可以不用写该属性，因为目前大部分浏览器都将其设为默认值。,和VBScript一样，一段JavaScript代码可以放置于HTML文档中的任意部位，但多数情况下将其放于区段中。因为一些代码可能需要在页面装载起始就开始运行。但如果愿意，放置在任何位置都是可以的，甚至可以在HTML外部装入一个JavaScript程序。引入形式如下所示：这里的URL就是一个外部的JavaScript程序，在Netscape中只承认以后缀名为.js的程序，而IE对这个要求就比较宽松，只要它符合MIME格式即可。如果有很多的页面需要该段程序，只需编写一个外部程序就可以在多个页面中进行调用。,例4-1（CH4-1.htm）：一个简单的JavaScrip程序的例子document.write(欢迎学习JavaScript);document.write(这是一个简单的JavaScript程序例子！);掌握JavaScript脚本语言，丰富美化网页形式。,4.2JavaScript的语法基础,4.2.1常量和变量1常量在JavaScript中用常量（Literals）来描述数值。常量是一些固定不变的值，不像变量那样可以随着程序的运行而变化，常量大致可分为以下几种。（1）整型常量JavaScript的常量通常又称字面常量，它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。（2）数组常量一个数组常量是零或更多表达式的列表，它包含在一对方括号内。当使用数组常量来创建一个数组时，它的元素和长度即由所指定的值进行初始化。（3）布尔常量布尔类型只有两种值：true和false。它主要用来说明一种状态或标志，以说明操作流程。JavaScript与C+是不一样的，C+可以用1或0表示其状态，而JavaScript只能用true或false表示其状态。（4）浮点数常量一些浮点数组的例子就像后面给出的例子一样，如3.1415926、-3.1E11、3e11和2E-11等。指数部分是在一个数值后跟一个“e”或“E”，它可以是一个有符号的数。一个浮点数组必须包含一个数字、一个小数点或“e（E）”。,（5）整数一个整数可以是十进制、十六进制和八进制数。一个十进制常量由一串数字序列组成，它的第一个数字不能为0；如果第一个数字为0，则表示它是一个八进制数；若前两个数字为0 x，则表示它为一个十六进制数。（6）字符串常量字符串常量是零或若干封装在“”或“”内的字符。（7）特殊字符JavaScript提供了一些特殊字符，允许在字符串中包括一些无法直接键入的字符。每个字符都以反斜杠开始。反斜杠是一个转义字符。2变量变量（Variable）又称为标识符，是对应到某个值的符号。（1）变量定义在JavaScript中声明一个变量时，可以使用以下方式实现：var变量名;（2）变量的作用范围当在所有函数之外定义一个变量，那这个变量就叫做全局变量。全局变量可用于当前所有的文档。在函数内部定义的变量则叫做局部变量，它只作用于函数内部。用户可以通过指定窗口或框架的名字调用全局变量。,4.2.2表达式和运算符,1表达式表达式是运算符和操作数的组合。表达式有两种类型：一种是给变量赋一个值，另一种仅是一个简单值。（1）算术表达式。（2）字符串表达式。（3）赋值表达式。（4）逻辑表达式。2运算符（1）算术运算符算术运算符将数字值（常量或变量）作为操作对象并返回一个单一数字值。（2）逻辑运算符通常逻辑运算符返回一个布尔值（true或false），（3）比较运算符比较运算符先对操作对象进行比较，然后返回一个逻辑值。操作对象既可以是数字也可以是字符串值。字符串的比较使用Unicode值按照字母顺序进行，（4）字符串运算符字符串运算符用于连接两个字符串。（5）位操作运算符位操作运算符对操作数进行二进制数的按位运算，在比较两个值之前先将它们转化为二进制数，然后再按位进行操作。,（6）赋值运算符赋值运算符是将右边的操作数赋予左边的操作对象，如x=7，就是将7赋值给x。赋值运算符还具有各种复合赋值运算符。（7）特殊运算符JavaScript还有自己的一些特殊运算符，举两个例子如下：new运算符，用来创建对象（实例）。格式如下：对象名称=new对象类型（参数）this运算符，表示当前对象。格式如下：this.属性还有其他的特殊运算符，如delete、typeof、void、in等等。（8）运算符的优先级JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。,4.2.3语句,1.IfElse语句IfElse语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。其语法形式如下：If(;Else;功能说明：若表达式为True，则执行语句或语句组；否则执行语句或语句组。在JavaScript中，If.Else语句允许嵌套使用，其语法形式如下：If()ElseIf()Else,2.While语句JavaScript的While语句与C/C+中的while语句基本相同。While语句为JavaScript提供了构成循环的一种方法，只要某个条件为真，它就会不断地执行同一组语句，直到循环条件为假时才退出循环。其语法形式如下：While()语句或语句组；3.Do.While语句它首先执行一个语句，然后重复循环执行语句或语句组，直到条件表达式为false。其语法形式如下：DoWhile(),4.For语句For语句执行语句循环，直到条件为False为止。它的初始表达式由一个表达式构成，该表达式只在执行循环前被执行一次。条件表达式是一个布尔表达式，如果值为True，则下面的语句或语句组被执行；若为False，则循环结束。增量表达式在每次循环完后执行。其语法形式如下：For(；)5.For.In语句该语句的功能是重复执行指定对象的所有属性，其语法形式为：For(变量In对象)6.Break语句在循环结构中，它用来终止循环，并强行跳出循环。其语法格式如下：Break；,7.Continue语句Continue语句也是用来停止当前的循环，并从循环的开始处继续程序流程。比如重新开始一个While、DoWhile或For循环等，其语法格式如下：Continue；8.Switch语句：Switch语句允许程序给表达式求值，并用case标记来匹配表达式可能的值。如果匹配成立，程序将执行相应的语句。具体语法形式如下：Switch()Case:Break;Case:Break;.Default,9.几个对象处理语句在JavaScript中还提供了几个对象处理的语句，例如this、with和new等。（1）With语句With语句为一个或一组语句指定默认对象，其基本语法形式如下：With()（2）this对象This对象返回“当前”对象。在不同的地方，this代表不同的对象。如果在JavaScript的“主程序”中（不在任何function中，不在任何事件处理程序中）使用this，它就代表window对象；如果在with语句块中使用this，它就代表with所指定的对象；如果在事件处理程序中使用this，它就代表发生事件的对象。（3）new运算符使用new运算符可以创建一个新的对象。其创建对象的语法形式为：newobject=newobject(parameterstable);其中，newobject创建的新对象；object是已经存在的对象；parameterstable参数表；例如创建一个日期新对象：newdate=newdate()birthday=newdate(12,11,1988)之后就可以使newdate和birthday作为一个新的日期对象来使用了。,4.3JavaScript对象,4.3.1JavaScript内置对象1字符串对象在JavaScript中，定义一个字符串实际上就是创建一个字符串对象。其语法形式如下：字符串变量名=字符串常数,属性length表示字符串长度2数学对象（Math）内置的Math对象可以用来处理各种数学运算。其中定义了一些常用的数学常数。各种运算被定义为Math对象的内置方法，可以利用直接调用的方法13。3.时间对象用来提供一个有关日期和时间的对象，它在使用时需要事先声明。其基本语法形式如下：varMyDate=newData();4.数组对象（1）数组对象名称=newArray(元素个数)（2）数组对象名称=newArray(元素1，元素2.)（3）数组对象名称=元素1，元素2.,4.3.2JavaScript浏览器对象,浏览器对象是指文档对象模型规定的对象，例如HTML元素对象、document对象、window对象等。使用浏览器对象,可实现与HTML文档进行交互。它的作用是将相关元素组织包装起来，提供给程序设计人员使用，从而减轻编程人员的编程负担，提高设计Web页面的能力。1浏览器对象(Navigator)浏览器对象（Navigator）提供有关浏览器的信息。2窗口对象(Window)Window对象处于对象层次的最顶端，它提供了处理Navigator窗口的方法和属性。Window对象常用的事件为onLoad和onUnLoad。3位置对象(Location)Location对象用来返回或者设置文档的URL信息，它是一个静态的对象。其主要功能就是代表特定窗口的URL信息。4历史对象(History)History对象提供了与历史清单有关的信息，是window对象的一个属性，其主要功能是用来存储客户端最近访问过的网页清单。History对象常用的方法有Back、Forward和go。Back()用于回到客户端查看过的上一页。Forward()用于回到客户端查看过的下一页。Go用于前往历史记录中的某个网页。History对象属性和方法的访问形式如下：history.属性history.方法（参数）,5文档对象(Document)文件对象（Document）代表当前的HTML对象，JavaScript自动为每一个HTML文件建立一个document对象，用来显示HTML文件。Document对象的主要事件有onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp等。Document对象的主要方法有：write和getSelection()。write用于将字符串或数值写到文件中；getSelection用于取得当前选取的字符串。访问Document对象属性和方法的主要语法形式如下：document.属性document.方法,4.4JavaScript的事件处理,4.4.1事件处理概述事件处理是对象化编程的一个很重要的环节，没有了事件处理，程序就会变得很死板，缺乏灵活性。事件处理的过程可以这样表示：发生事件启动事件处理程序事件处理程序作出反应。其中，要使事件处理程序能够启动，必须先让对象知道，发生了什么事情，需要启动什么样的处理程序，否则这个流程就不能进行下去。事件的处理程序可以是任意JavaScript语句，但是大多数情况下需要使用特定的自定义函数（function）来处理事情。4.4.2指定事件处理程序的方法1在HTML标记中指定在HTML语言的标记中指定事件处理程序是最普遍的用法。其一般使用形式如下：2编写特定对象特定事件的JavaScript这种方法用得比较少，但是在某些场合还是很好用的。其具体语法形式如下：(事件处理程序代码),3直接跟在对象的后面其基本语法格式如下：.=;4.4.3事件详解1onblur事件该事件在窗口失去焦点的时候发生，主要应用于window对象，例如，当不选中含有下面代码段的网页时，就会弹出一个“离开本网页！”的信息窗口。alert(离开本网页！);2onchange事件该事件发生在文本输入区的内容被更改，并且焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性，或者立刻改变文档内容。onchange事件主要应用于Password对象、Select对象、Text对象和Textarea对象。,3onclick事件该事件发生在对象被单击的时候。单击是指鼠标停留在对象上，按下鼠标键，并且没有移动鼠标而放开鼠标键这一个完整的过程.onclick事件主要应用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象、Submit对象。4onerror事件该事件发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(ErrorHandler)，用来处理错误。应用于window对象，例如上边已经介绍过的，要忽略一切错误，就使用：functionignoreError()returntrue;window.onerror=ignoreError;5onfocus事件该事件发生在窗口得到焦点的时候，主要应用于window对象。例如，当选中含有下面代码段的网页时，就会弹出一个“欢迎访问本网页！”的信息窗口。alert(欢迎访问本网页！);,6onload事件该事件发生在文档全部下载完毕的时候。全部下载完毕意味着不但是指HTML文件，而且包含HTML文件中的图片、插件、控件以及小程序等全部内容都下载完毕。本事件是window的事件，但是在HTML中指定事件处理程序的时候，一般是把它写在标记中的，主要应用于window对象。7onmouseover事件该事件发生在鼠标进入对象范围的时候。此事件和onmouseout事件，再加上图片的预读，就可以做到当鼠标