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.2 JavaScript的语法基础,4.2.1 常量和变量 1常量 在JavaScript中用常量（Literals）来描述数值。常量是一些固定不变的值，不像变量那样可以随着程序的运行而变化，常量大致可分为以下几种。 （1）整型常量 JavaScript的常量通常又称字面常量，它是不能改变的数据。其整型常量可以使用十六进制、八进制和十进制表示其值。 （2）数组常量 一个数组常量是零或更多表达式的列表，它包含在一对方括号内。当使用数组常量来创建一个数组时，它的元素和长度即由所指定的值进行初始化。 （3）布尔常量 布尔类型只有两种值：true和false。它主要用来说明一种状态或标志，以说明操作流程。JavaScript与C+是不一样的，C+可以用1或0表示其状态，而JavaScript只能用true或false表示其状态。 （4）浮点数常量 一些浮点数组的例子就像后面给出的例子一样，如3.141 5926、-3.1E11、3e11和2E-11等。指数部分是在一个数值后跟一个“e”或“E”，它可以是一个有符号的数。一个浮点数组必须包含一个数字、一个小数点或“e（E）”。,（5）整数 一个整数可以是十进制、十六进制和八进制数。一个十进制常量由一串数字序列组成，它的第一个数字不能为0；如果第一个数字为0，则表示它是一个八进制数；若前两个数字为0x，则表示它为一个十六进制数。 （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() Else If() Else ,2.While语句 JavaScript的While语句与C/C+中的while语句基本相同。While语句为JavaScript提供了构成循环的一种方法，只要某个条件为真，它就会不断地执行同一组语句，直到循环条件为假时才退出循环。其语法形式如下： While () 语句或语句组； 3.Do.While语句 它首先执行一个语句，然后重复循环执行语句或语句组，直到条件表达式为false。其语法形式如下： Do While(),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=new object(parameters table); 其中，newobject创建的新对象；object是已经存在的对象；parameters table参数表；例如创建一个日期新对象： newdate = new date() birthday=new date (12, 11,1988) 之后就可以使newdate和birthday作为一个新的日期对象来使用了。,4.3 JavaScript对象,4.3.1 JavaScript内置对象 1字符串对象 在JavaScript中，定义一个字符串实际上就是创建一个字符串对象。其语法形式如下：字符串变量名=“字符串常数“ ,属性length表示字符串长度 2数学对象（Math） 内置的Math对象可以用来处理各种数学运算。其中定义了一些常用的数学常数。各种运算被定义为Math对象的内置方法，可以利用直接调用的方法13。 3.时间对象 用来提供一个有关日期和时间的对象，它在使用时需要事先声明。其基本语法形式如下：var MyDate=new Data( ); 4.数组对象 （1）数组对象名称=new Array(元素个数) （2）数组对象名称=new Array(元素1，元素2.) （3）数组对象名称=元素1，元素2.,4.3.2 JavaScript浏览器对象,浏览器对象是指文档对象模型规定的对象，例如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.4 JavaScript的事件处理,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事件 该事件发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler)，用来处理错误。应用于window对象，例如上边已经介绍过的，要忽略一切错误，就使用： function ignoreError() return true; window.onerror = ignoreError; 5onfocus事件 该事件发生在窗口得到焦点的时候，主要应用于window对象。例如，当选中含有下面代码段的网页时，就会弹出一个“欢迎访问本网页！”的信息窗口。 alert(欢迎访问本网页！); ,6onload 事件 该事件发生在文档全部下载完毕的时候。全部下载完毕意味着不但是指HTML文件，而且包含HTML文件中的图片、插件、控件以及小程序等全部内容都下载完毕。本事件是 window的事件，但是在HTML中指定事件处理程序的时候，一般是把它写在标记中的，主要应用于window对象。 7onmouseover事件 该事件发生在鼠标进入对象范围的时候。此事件和 onmouseout 事件，再加上图片的预读，就可