Web技术应用基础d06.ppt

1 第6章JavaScript JavaScript 2 JavaScript 了解JavaScript作用 工作机制和特点 了解Window对象构成 属性和方法掌握Window对象基本使用方法 学会JavaScript的基本语法规则熟练掌握JavaScript编程技巧 脚本 Script 应用知识点与技术要求 Script是一种介于HTML与高级编程语言 如 Java VB和C 等 之间的特殊语言 是由一组可以在Web服务器或客户端浏览器运行的命令的组合 脚本把网页对象和浏览器对象集成并组装起来 使网页具有动态效果和交互功能 3 6 1JavaScript概述 6 1 1JJavaScript运行机制脚本是一种能够完成某些功能的小程序段 这些程序段在程序运行过程中被逐行解释执行 脚本语言可嵌入HTML页面 并被浏览器解释执行 服务器端脚本 在服务器上运行的脚本程序客户端脚本 在客户机上运行的脚本程序 JavaScript 4 JavaScript是一种嵌入HTML文档中的 跨平台 基于对象和事件驱动的脚本语言 它即可以在客户端运行也可以运行在服务器上 JavaScript 5 6 1 2JavaScript特点1 JavaScript是一种脚本语言2 基于对象3 事件驱动4 动态5 安全6 与平台无关 JavaScript 6 6 1 3JavaScript应用示例 图像互换位置 JavaScript 7 1 任务要求要求页面上有两幅图像及有关图像的说明的文字 当用户用鼠标左键单击页面时 图像交换位置 例6 1 JavaScript 8 ex6 01 html代码清单JavaScript应用案例functionChangeImage vardog top dog style topvardog left dog style leftdog style top cat style topdog style left cat style leftcat style top dog topcat style left dog left JavaScript 9 请单击页面catdog JavaScript 10 代码说明 1 第16至19行 和是块容器标记 之间可以容纳多个不同的HTML标记和语言元素 id cat 指定该块容器的id值是cat 2 第3至12行 当用户单击页面时 由使用JavaScript脚本语言编写的ChangeImage 函数完成事件的处理 即图像交换位置的动作 JavaScript 11 标记位于和标记之间 在标记中的脚本段将在页面主体 即在标记中的内容 被浏览器载入之前解释执行 标记位于和标记之间时 这一段脚本程序将在HTML文档被浏览器载入过程中被解释执行 属性language是script标记的必须指定的基本属性 一般被指定为JavaScript或VBScript runat Server表示该段脚本在服务器端执行 如果省略 则表示该段脚本将发送到客户端运行 脚本代码放在HTML的注释标记之间 这样做既不影响支持脚本的浏览器正确解释执行脚本程序 也可以使不支持脚本的浏览器把这段程序当作注释而旁路掉 JavaScript 12 6 2JavaScript基本语法JavaScript是一种跨平台 基于对象 Object 事件驱动 EventDriven 脚本语言 可以在于浏览器上运行 也可以运行在服务器上 JavaScript由JavaScript核心语言 JavaScript客户端扩展和JavaScript服务器端扩展三部分组成 核心语言部分包括JavaScript的基本语法和JavaScript的内置对象 在客户端和服务器端均可运行 作用 与HTML超文本标记语言 Java小程序一起在一个Web页面中链接多个对象 与Web客户交互 JavaScript 13 6 2 1在HTML文档中调入或嵌入JavaScript1 JavaScript嵌入HTML文件语法规则 language默认值 JavaScript JavaScript 例6 2 14 例6 2JavaScript嵌入HTMLdocument write HelloWorld JavaScript 15 2 将JavaScript调入HTML文件将JavaScript代码以扩展名 js 单独存放语法 JavaScript 16 6 2 2JavaScript书写格式 区分大小写 可以没有可见行结束标志 换行符作为行终止符 也可以用 作为一行终止符 C语言 C 和Java语言中 使用分号 作一行的结束标志 如果需要把几行代码写在一行 使用分号 分开 vara 3varb 6varc 0vara 3 b 6 c 0 JavaScript 17 为了使程序清晰易读 采用缩进格式来书写 可以用两种方法进行注释 注释方法与C 相同 从注释标记 起直到行尾的字符都被忽略 在 与 之间的字符都被忽略 JavaScript 18 6 2 3基本数据类型1 数据类型 数值型 整数和浮点数 字符型 布尔型 取值为true或false 空值2 常量值保持不变的量 JavaScript 19 3 变量关键字 var 声明变量并分配存储空间 var为可选项 vara 3 声明变量 并赋初值 a 3 省略关键字var vara 声明变量后 赋值a 6三种方法等效 但不能既不用关键字 var 也不赋初置 变量名必须以字母或下划线 开始 后面的字符可以是字母 数字或下划线例 abc a 12 myvar MyVar JavaScript 20 JavaScript内部定义的保留字不能用作变量名 JavaScript区分大小写的 变量Num与变量num是两个不同的变量 JavaScript的变量采用了弱类型 Looselytyped 表达方式 变量在声明时不必显式说明它的类型 而是在使用时根据数据的类型来确定变量的类型 在函数体外声明为全局变量JavaScript提供四种类型变量 数值型 36 3 1415926 3 1E12等字符串型 Hello 逻辑型 true false空值型 null JavaScript 21 4 表达式表达式是由变量 常量和运算符按一定规则组成的集合 表达式的值可以是数字 字符串或布尔量 JavaScript有三种表达式 算术表达式 串表达式和逻辑表达式 JavaScript 22 5 运算符 对象访问 数组下标 括号 增 减 取负 位逻辑非 逻辑非 delete new Typeof this 乘 除 取模 加 减 移位 大于 大于等于 等于 不等于 位或 位异或 位与 与 逻辑或 赋值 Jscript是弱变量型的 可以重复赋值 条件运算 优先次序从前到后 JavaScript 23 6 3JavaScript控制结构和函数6 3 1JavaScript控制结构1 if elseif 条件 如果条件为true 进行处理 else 如果条件为false 进行处理 如果不需要处理false情况 可不写else语句段 例如 if 条件 如果条件为true 进行处理 JavaScript 24 2 switch语句switch 表达式 case值1 语句集1breakcase值2 语句集2break default 语句集break JavaScript 25 3 forfor循环语句设置了一个计数器计算循环次数 达到循环次数后结束循环 for 初始化表达式 条件 增量表达式 语句集 JavaScript 26 4 循环语句whilewhile循环语句不直接指明循环次数 具体循环次数由运行时情况决定 满足循环条件执行循环体语句 不满足循环条件退出循环体 语法规则 while 条件 语句段 break语句 根据条件终止循环 continue语句 根据条件 跳过循环体内剩余语句 进入下一次循环 JavaScript 27 6 3 2函数函数必须先定义 后使用 浏览器先执行HTML文档中的模块 JavaScript中常把自定义函数放在模块中 在HTML文档主体中调用函数 函数定义的规则如下 function函数名 参数列表 函数体 function 关键字 使解释程序知道后面定义函数 函数名 可以是任何合法的标识符 参数列表 函数的参数列表 多个参数用逗号分开 函数体 函数执行的运算 JavaScript 28 6 3 3JavaScript基本语法的应用案例 例6 3 例6 3 JavaScript 29 例6 3JavaScript基本语法应用案例 脚本语言是JavaScriptfunctionMyArray n 定义函数MyArraythis length nfor iin4 this i 0 JavaScript 30 MyArray newArray 4 MyArray 1 Web MyArray 2 技术 MyArray 3 应用 MyArray 4 基础 document open for varn 1 n JavaScript 31 6 4JavaScript对象6 4 1JavaScript对象概述对象具有 属性 properties 方法 methods 3种对象 JavaScript内建对象 浏览器环境提供的对象 自定义对象 JavaScript 32 6 4 2自定义对象语法 function对象名称 属性列表 this 属性1 参数1this 属性2 参数2 this 方法1 函数名1this 方法2 函数名2 JavaScript 33 创建对象实例语法 对象实例名 new对象名称 属性值列表 JavaScript 34 functionstudent id name url this id idthis name namethis url urlthis display student display JavaScript MyStudent newstudent 000001 林琳 定义学生对象 学生对象实例 35 6 4 3对象属性和方法的引用 JavaScript 1 对象属性的引用语法 对象实例名 属性成员名例 MyStudent name 林琳 36 语法 对象实例名 n 例 MyStudent 0 000001 MyStudent 1 林琳 MyStudent 2 或 MyStudent id 000001 MyStudent name 林琳 MyStudent url JavaScript 37 2 对象方法的引用语法 对象实例名 方法名称 例如 MyStudent display JavaScript 38 6 4 4对象的操作1 for in语句for in是操作对象的语句 也称遍历 遍历是指逐一通过一个对象的所有属性 它的计数值是对象中的属性个数 语法 for 变量in对象 语句段 JavaScript 39 2 with语句语法 with 对象实例名 语句段 例 with MyStudent id 000001 name 林琳 url JavaScript 40 6 this关键词用户引用当前所指的对象 格式 this 属性名 JavaScript 41 6 4 5事件驱动与事件处理onClick 鼠标左键单击对象时发生Onload 网页载入浏览器时发生onUnload 用户离开当前页面时发生onMouseOver 鼠标移到对象上时发生onMouseOut 鼠标离开对象上时发生 JavaScript 42 6 4 6例6 4 JavaScript 例6 4 43 例6 4JavaScrip对象应用functionstudent id name url this id idthis name namethis url urlthis display student display JavaScript 44 functionstudent display document writeln id this id document writeln name this name document writeln url this url MyStudent newstudent 000001 林琳 MyStudent display JavaScript 45 6 5window对象在JavaScript中的应用6 5 1window对象构成对象有用户建立的对象 也有系统提供的内建对象 Window对象是内建对象中的最顶层对象 Window对象指的是浏览器窗口对象 JavaScript 46 JavaScript 47 6 5 2window对象的属性1 window对象主要属性 JavaScript 48 6 5 3window对象的方法1 window对象的主要方法alert 创建带 确定 按钮的对话框confirm 创建带 确定 和 取消 按钮对话框close 关闭当前打开的浏览器窗口open 打开一个新浏览器窗口prompt 创建带 确定 取消 按钮及输入字符串字段对话框setTimeout 设置一个时间控制器clearTimeout 清除原来时间控制器内时间设置 JavaScript 49 2 JavaScript的接口元素 alert 提示 显示警告框 提示 是可选项 警告框中输出的内容 例 alert 对不起 用户名错误 JavaScript 50 prompt 提示 缺省值 显示提示框 等待用户输入文本 用户选择 确认 按钮 返回文本框中内容 选择 取消 按钮 返回一个空字符串 提示 和 缺省值 都是可选项 缺省值 是文本框默认值例 prompt 请输入姓名 JavaScript 51 comfirm 提示 显示确认框 等待用户选择按钮 提示 可选的 是在提示框中显示的内容 用户可以根据提示选择 确定 或 取消 按钮例 confirm MyString 你好 链接到ex07 002 html页面 JavaScript 52 6 5 4window对象的事件onLoad 网页载入浏览器时发生onUnLoad 网页从浏览器窗口中删除时发生onBeforeUnLoad 网页被关闭前发生OnResize 用户调整窗口大小时发生OnScroll 用户滚动窗口时发生OnError 载入的网页产生错误时发生 JavaScript 53 6 5 5window对象应用案例1 状态栏内容更新 JavaScript 例6 5 54 JavaScript window对象属性的应用 55 JavaScript 56 2 打开一个新窗口 JavaScript 例6 6 57 例6 6window对象的open 方法window对象的open 方法 JavaScript 58 3 客户端输入信息验证例6 67 在客户端验证用户输入数据 页面上有一个超级链接 当用户点击链接时 由prompt提示框提示用户输入姓名 然后JavaScript程序验证用户输入 如果输入正确弹出确认框confirm 若用户在确认框选择 确认 按钮 则链接到网站 如果输入错误 出现警告框alert 输出 对不起 输入错误 程序终止 例6 7 JavaScript 59 JavaScript接口元素应用 JavaScript 60 脚本应用 你好 欢迎光临tomcat 61 6 6document对象在JavaSCript中应用6 6 1document对象属性alinkColor 活动超级链接的颜色bgColor 页面背景颜色fgColor 页面前景颜色linkColor 页面中未曾访问过的超级链接的颜色vlinkColor 页面中曾经访问过的超级链接的颜色lastModified 最后一次修改页面的时间Location 页面的URL地址Title 页面的标题 JavaScript 62 6 6 2document对象方法clear 清除文件窗口内的数据close 关闭文档open 打开文档write 向当前文档写入数据 JavaScript 63 document对象鼠标事件 onClick 单击鼠标左键时发生ondblClick 双击鼠标左键时发生onMouseDown 按下鼠标左键时发生onMouseMove 移动鼠标时发生onMouseOut 鼠标离开对象时发生onMouseOver 鼠标移到对象上时发生onMouseUp 放开鼠标左键时发生onSelectStart 开始选取对象内容时发生onDragStart 以拖曳方式选取对象时发生 JavaScript 64 document对象按键事件 onKeyDown 按下按键时发生onKeyPress 按下按键时发生onKeyDown事件 然后产生onKeyPress事件onKeyUp 放开按键时发生onHelp 按下系统定义的帮助键时发生 JavaScript 65 6 5 4window对象应用案例例6 8文本框内容互换任务要求 页面上有2个文本框 用户在第1个文本框输入内容后 点击第2个文本框 将在第2个文本框内显示第1个文本框的内容 JavaScript 例6 8 66 6 7JavaScript内置对象JavaScript不是纯面向对象语言 不具备面向对象语言特性 如封装 继承和重载 JavaScript没有类功能 不能通过类来创建对象 JavaScript创建对象有属性和方法 对象被创建后 可以象使用函数一样来使用 用户除了自己创建对象外 JavaScript还提供了许多内置对象供用户使用 6 7 1String对象 JavaScript 67 6 7 2Math对象6 7 3Array对象语法 数组对象实例名 newArray 例如 vararr1 newArray vararr2 newArray 8 JavaScript 68 4 7 4 Date对象Date对象主要用于对系统日期和时间的操作 没有属性 有多种方法 语法形式 MyDate newDate 建立了一个日期变量MyDate 如果没有特别指定时间 将把系统的机内时间放入MyDate变量 表7 13列举了Date对象主要方法和他们的使用说明 JavaScript 69 6 7 5JavaScript内置对象应用案例例6 9 JavaScript 例6 9 70 JavaScript内置对象应用案例 JavaScript 71 varBooks newArray Books 0 newBook 算法与数据结构 严蔚敏陈文博 清华大学出版社 Books 1 newBook XML JSP网页编程教材 吴艾 北京希望电子出版社 Books 2 newBook 英华大字典 郑易里 商务印书馆 点击按钮查阅详细信息书名 作者 出版社 JavaScript 72 6 8JavaScripy应用案例6 8 1数字钟例6 10 制作一个页面 页面上显示 单击此处启动数字钟并统计页面持续时间 当用户单击文字时 启动数字钟 用以显示当前时刻和网页的持续时间 例6 10 JavaScript 73 例6 10启动数字钟统计页面持续时间 functionEclock varMyDate2 newDate varMyTime2 MyDate2 getTime varTimeString2 现在的时间是 MyDate2 getHours 时 MyDate2 getMinutes 分 MyDate2 getSeconds 秒 varMyHours3 0 MyMinutes3 0varMySeconds4 Math round MyTime2 MyTime1 1000 MyHours3 Math round MySeconds4 1800 3600 MyMinutes3 Math round MySeconds4 30 3600 60 JavaScript 74 if MyMinutes3 60 MyMinutes3 0MySeconds4 Math round MySeconds4 3600 MySeconds3 Math round MySeconds4 60 varTimeString3 持续时间是 MyHours3 时 MyMinutes3 分 MySeconds3 秒