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 If Else语句If Else语句是JavaScript中最基本的控制语句 通过它可以改变语句的执行顺序 其语法形式如下 If Else 功能说明 若表达式为True 则执行语句或语句组 否则执行语句或语句组 在JavaScript中 If Else语句允许嵌套使用 其语法形式如下 If ElseIf 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 Do While或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事件详解1 onblur事件该事件在窗口失去焦点的时候发生 主要应用于window对象 例如 当不选中含有下面代码段的网页时 就会弹出一个 离开本网页 的信息窗口 alert 离开本网页 2 onchange事件该事件发生在文本输入区的内容被更改 并且焦点从文本输入区移走之后 捕捉此事件主要用于实时检测输入的有效性 或者立刻改变文档内容 onchange事件主要应用于Password对象 Select对象 Text对象和Textarea对象 3 onclick事件该事件发生在对象被单击的时候 单击是指鼠标停留在对象上 按下鼠标键 并且没有移动鼠标而放开鼠标键这一个完整的过程 onclick事件主要应用于Button对象 Checkbox对象 Image对象 Link对象 Radio对象 Reset对象 Submit对象 4 onerror事件该事件发生在错误发生的时候 它的事件处理程序通常就叫做 错误处理程序 ErrorHandler 用来处理错误 应用于window对象 例如上边已经介绍过的 要忽略一切错误 就使用 functionignoreError returntrue window onerror ignoreError 5 onfocus事件该事件发生在窗口得到焦点的时候 主要应用于window对象 例如 当选中含有下面代码段的网页时 就会弹出一个 欢迎访问本网页 的信息窗口 alert 欢迎访问本网页 6 onload事件该事件发生在文档全部下载完毕的时候 全部下载完毕意味着不但是指HTML文件 而且包含HTML文件中的图片 插件 控件以及小程序等全部内容都下载完毕 本事件是window的事件 但是在HTML中指定事件处理程序的时候 一般是把它写在标记中的 主要应用于window对象 7 onmouseover事件该事件发生在鼠标进入对象范围的时候 此事件和onmouseout事件 再加上图片的预读 就可以做到当鼠标移到图像连接上 图像更改的效果了 8 onmouseout事件该事件发生在鼠标离开对象的时候 参考onmouseover事件 主要应用于Link对象 9 onmouseup事件该事件发生在用户把鼠标放在对象上 鼠标键被按下 再放开鼠标键的时候 按下和放开鼠标键要在同一个对象上发生 否则本事件不会发生 该事件主要应用于Button对象和Link对象 10 onmousedown事件该事件发生在用户把鼠标放在对象上并且按下鼠标键的时候 参考onmouseup事件 该事件主要应用于Button对象和Link对象 11 onreset事件该事件发生在表单的 重置 按钮被单击 按下并放开 的时候 通过在事件处理程序中返回false值 returnfalse 可以阻止表单重置 该事件主要应用于Form表单对象 12 onresize事件该事件发生在窗口被调整大小的时候 主要应用于window对象 13 onsubmit事件该事件发生在表单的 提交 按钮被单击 按下并放开 的时候 可以使用该事件来验证表单的有效性 通过在事件处理程序中返回false值 returnfalse 可以阻止表单提交 主要应用于Form表单对象14 onunload事件该事件发生在用户退出文档 或者关闭窗口 或者到另一个页面去 的时候 与onload一样 这个事件一般写在HTML中的标记里 该事件主要应用于window对象 本章小结 本章主要讲述了一些关于JavaScript的基础知识 并通过一些实例把JavaScript语言最基本的知识加以说明 要对JavaScript语言进行更深一步的学习 就可以更好地学习后面所讲的内容