网页制作与网站建设3JavaScript脚本语言ppt课件.ppt

JavaScript脚本语言 1 3JavaScript脚本语言 学习目标通过本章的学习 了解JavaScript脚本语言编程 掌握在HTML文档中插入JavaScript代码 学会使用由JavaScript编写简单的网页特效 主要内容JavaScript的数据类型 以及JavaScript的常量 变量 函数 运算符 表达式 JavaScript的流程控制及JavaScript函数 JavaScript的对象及属性 2 3 1JavaScript的历史 JavaScript是由Netscape公司开发的一种脚本语言 结构简单 使用方便 对用户自身知识水平的要求并不高 易学易懂 Netscape将这种脚本语言命名为LiveScript 整个语法以Java为基础 但比Java要简单 同时 由于它是一种脚本语言 所以无需编译 可由浏览器直接解释运行 而不象Java那样需要经过编译 3 3 1JavaScript的历史 Netscape见LiveScript大有发展前途 而SUN也觉得可以利用LiveScript为Java的普及做铺垫 于是两家签订协议 将LiveScript改为JavaScript 造就了这个强力的WEB页开发工具 4 3 2JavaScript的特点 JavaScript是一种脚本语言语法和规则没有可编译的编程语言那样严格和复杂 主要用于格式化文本和使用以编程语言编写的已编译好的组件 JavaScript是基于对象的语言面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分 即对象 的组合体 基于对象的语言本身已具有创建完成的对象 例如 日期 对象 5 3 2JavaScript的特点 JavaScript是事件驱动的语言当你在Web主页中进行某种操作时 就产生了一个 事件 事件几乎可以是任何事情 点击一个按钮 拖动鼠标等均可视为事件 JavaScript是事件驱动的 当事件发生时 它可对之作出响应 具体如何响应某个事件取决于你的事件响应处理程序 JavaScript是安全的语言JavaScript被设计为通过浏览器来处理并显示信息 但不能修改其它文件中的内容 也就是说 它不能将数据存储在Web服务器或用户的计算机上 更不能对用户文件进行修改或删除操作 6 3 2JavaScript的特点 JavaScript是平台无关的语言对于一般的计算机程序 它们的运行与平台有关 例如 除非你使用一个仿真器来模拟Windows环境 否则不可能在Macintosh上运行一个Windows应用程序 JavaScript则并不依赖于具体的计算机平台 虽然有一些限制 它只与解释它的浏览器有关 不论你使用Macintosh还是Windows 或是UNIX版本的NetscapeNavigator JavaScript都可正常运行 7 3 2JavaScript的特点 JavaScript不是JavaJava程序被编译成为字节代码文件 JavaScript则是将字符正文传递给客户方并由客户方解释执行JavaScript是基于对象的 它自身具有已创建完毕的对象 而Java则是面向对象的 对象必须从类中创建 JavaScript的代码以字符的形式嵌入在HTML文档中 Javaapplets则是由文档引用 其代码以字节代码的形式保存在另一个独立的文件中 8 3 2JavaScript的特点 JavaScript不是Java在HTML文档中 用标识标明JavaScript脚本 而Javaapplets则用标识来标明 JavaScript采用弱类型 而Java则采用强类型 JavaScript采用动态联编 即JavaScript的对象引用在运行时进行检查 如不经编译则就无法实现对象引用的检查 而Java则采用静态联编 即Java的对象引用必须在编译时的进行 以使编译器能够实现强类型检查 9 3 3第一个JavaScript程序 例1 第一个JavaScript程序 JavaScriptAppearshere 10 3 3第一个JavaScript程序 例1 第一个JavaScript程序在标识 之间加入JavaScript脚本 另一种插入JavaScript的方法 把JavaScript代码写到另一文件中 通常应该用 js 作扩展名 然后用格式为 的标签把它嵌入到文档中 11 3 3第一个JavaScript程序 例1 第一个JavaScript程序通过标识说明 若不认识JavaScript代码的浏览器 则所有在其中的标识均被忽略 若认识 则执行其结果 使用注释这是一个好的编程习惯 它使其他人可以读懂你的语言 alert 是JavaScript的窗口对象方法 其功能是弹出一个具有OK对话框并显示 中的字符串 12 3 4JavaScript的数据类型 JavaScript支持的数据类型共有四种数值型 其中包括整型数和浮点型数 布尔型 即逻辑值 true或false 字符串型 由单个或多个文本字符组成 空值 由关键字null代表 13 3 5JavaScript的变量与表达式 创建变量varanumber 137 变量的值是一个数varanumber1 2 varastring 1 变量的值也可以是一个字符串varastring1 hello 表达式xx astring1 astring 结果是x hello1 xx anumber anumber1 结果是xx 139xx anumber astring 结果是xx 1371 14 3 6JavaScript的操作符 赋值操作符 15 3 6JavaScript的操作符 布尔操作符 x y为 HelloWorld 16 3 7JavaScript的流程控制语句 if和else if condition else for和while for 初始化表达式 条件 增值表达式 执行语句 while 条件 条件为真执行 break可以用在for或while循环中 使循环中断 跳到for或while循环结束的位置 continue用在for或while循环可以跳过循环体中剩余的语句 直接进行下一次循环 17 3 8JavaScript函数定义 Function函数名 参数 变元 函数体 Return表达式 说明 当调用函数时 所用变量或字面量均可作为变元传递 函数由关键字Function定义 通过指定函数名 实参 来调用一个函数 必须使用Return将值返回 函数名对大小写是敏感的 18 3 8JavaScript函数定义 在JavaScript中可通过arguments Length来检查参数的个数 例 Functionfunction Name exp1 exp2 exp3 exp4 Number function Name arguments length if Number 1 document wrile exp2 if Number 2 document write exp3 if Number 3 document write exp4 19 3 9JavaScript对象 JavaScript被称为是 基于对象的 而不是面向对象的 有对象的概念 数据和操作的封装 但没有继承的概念 从定义的角度看 JavaScript程序中有两种对象 JavaScript提供的内置对象 built inobject 和程序中定义的对象 20 3 9JavaScript对象 一个对象是一个由变量 其他对象或方法组成的一个集合 在一个对象中包含的其他对象和变量被称为特性 property 在一个对象内的函数 function 称为这个对象的方法 method 在一个特定的对象中的一些特性的序列称为数组 例如document对象中的image 多维数组是由含有数组特性的对象数组构造的 21 3 9JavaScript对象 对象引用当一个文档加载到浏览器后 它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存 要有一种方法让Script指出它要的是哪一个对象 这就是对象引用 JavaScript用严格的层次结构引导Script至文档的任何区域 对每个对象的引用必须包括从顶部到对象的所有层次 直至对象名 路径中各个相连的对象之间用句点分开 22 3 9JavaScript对象 对象引用变量可以写成下面的形式 父对象 属性1 索引1 属性2 最后属性 索引N 对象的方法 method 可以如此引用 对象 方法 参数组 一个含有典型属性和方法的对象的例子 document是对应一个 html文档的对象 浏览器读入文档后生成 document writeln hello 是这个对象的一个方法 输出带换行的字符串 document location是该对象的一个属性 含有它的URL 23 3 9JavaScript对象 JavaScript定义 类 函数 的语法是一样的 而且这样的函数就成了该类的构造函数 变量可以写成下面的形式 父对象 属性1 索引1 属性2 最后属性 索引N 对象的方法 method 可以如此引用 对象 方法 参数组 一个含有典型属性和方法的对象的例子 document是对应一个 html文档的对象 浏览器读入文档后生成 document writeln hello 是这个对象的一个方法 输出带换行的字符串 document location是该对象的一个属性 含有它的URL 24 3 9JavaScript对象 例2 用函数定义来定义类functionadd this result this left this right functionMyClass n this left n this right 6 this result 0 this sum add x newMyClass 4 x sum document write x result 25 3 9JavaScript对象 Array对象属性 length 它指明了数组的长度 方法 join 将数组值连接变为一个字符串 reverse 将数组值倒序 sort 将对数组值进行排序 26 3 9JavaScript对象 Array对象AAA newArray 3 AAA 0 B AAA 1 A AAA 2 C document write AAA length document write AAA join document write AAA reverse join document write AAA sort join 27 3 9JavaScript对象 String对象属性 length 表明字符串长度方法 字符串的转换 toUpperCase 将字符串所有字符转为大写 toLowerCase 将字符串所有字符转为小写 toString 将非字符串对象显示转化为字符串 字符串的处理substring 将括号中参数所指的字符串片段返回 charAt 返回括号中指定位置字符串的内容 split 根据指定的分隔符把一个字符串划分为一个字符串数组 28 3 9JavaScript对象 String对象如 newstring astring substring index1 index2 返回一个位置在index1和index2 1之间的字符串 特别是如果index2 index1 子串返回index2和index1 1之间的部分 29 3 9JavaScript对象 Date对象属性 无方法 设定日期setDay setMonth setYear setHours setMintes 获取日期getDay getMonth getYear getHours getMintes 处理时区 toGMTString 将日期时间值转换为的字符串 GMT时间 tolocaleString 将日期时间值转换为的字符串 当地时间 30 3 9JavaScript对象 Math对象属性 E 为自然对数的底 约为2 718 PI 为圆周率 约为3 14159 方法 abs 绝对值计算 pow 数的幂 sqrt 计算平方根 cos sin tan acos asin atan 31 3 10JavaScript事件 事件 用户对网页的一些特定 操作 这些操作通常直接对应鼠标的动作 和系统行为 例如加载一张网页 点击一个超链等 事件处理程序的引入 如何使一段JavaScript程序和事件的发生联系起来 on事件名 是JavaScript规定的对应事件处理程序柄 eventhandler 的名字 例如onClick onfocus onSubmit等等 32 3 10JavaScript事件 第一种引入方式 事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现 而对应的属性值是由网页编写者提供的JavaScript程序段 或事件