第五章 JavaScript语言.ppt

第五章JavaScript语言 第一节JavaScript简介 JavaScript是一种脚本语言 同时也是一种解释性语言 它不像C C VB等语言需要先编译 而是在程序运行过程中被逐行地解释 它与HTML标识结合在一起 从而弥补了HTML语言的缺陷 JavaScript程序代码在描述页面的HTML相关区域中出现 由 说明 在标识 之间就可加入JavaScript脚本 JavaScript出现在这里alert 这是第一个JavaScript例子 alert 欢迎你进入JavaScript世界 alert 今后我们将共同学习JavaScript知识 第一节JavaScript简介 第一节JavaScript简介 Demo4JavaScript能够直接写入HTML输出流中 document write 这段文字用标题1控制 document write 这时一个段落 第二节JavaScript的基本数据类型 1 基本数据类型在JavaScript中四种基本的数据类型 数值 整数和实数 字符串型 用 号或 括起来的字符或数值 布尔型 取True或False值 和空值 2 常量整型常量实型常量布尔值字符型常量空值特殊字符 第二节JavaScript的基本数据类型 3 变量 1 变量的命名JavaScript中的变量命名同其他计算机语言非常相似 这里要注意以下两点 第一 必须是一个有效的变量名 即变量名以字母开头 中间可以出现数字 第二 不能使用JavaScript中的关键字作为变量 第二节JavaScript的基本数据类型 2 变量的类型在JavaScript中 变量可以用命令var作声明 如 varmytest varmytest thisisabook 变量也以可以不作声明 而在使用时再根据数据的类型来确其变量的类型 如 X 100 Y 125 Xy true Cost 19 5 第二节JavaScript的基本数据类型 3 变量的声明及其作用域JavaScript变量可以在使用前通过var命令声明 声明变量的最大好处就是能及时发现代码中的错误 在JavaScript中同样有全局变量和局部变量 全局变量是定义在所有函数体之外 其作用范围是整个函数 局部变量是定义在函数体之内 只对其该函数是可见的 而对其它函数则是不可见的 第二节JavaScript的基本数据类型 变量声明示范 varfirstname firstname mary document write firstname document write firstname tom document write firstname 第三节表达式和运算符 1 表达式在表达式可以分为算术表述式 字串表达式 赋值表达式以及布尔表达式等 2 运算符在JavaScript中有算术运算符 比较运算符 布尔逻辑运算符 字串运算符 算术运算符双目运算符 第三节表达式和运算符 单目运算符 比较运算符比较运算符它的基本操作过程是 首先对它的操作数进行比较 尔后再返回一个true或False值 有6个比较运算符 第三节表达式和运算符 布尔逻辑运算符在JavaScript中增加了几个布尔逻辑运算符 第四节程序控制流 if条件语句基本格式if 表述式 语句段 else语句段 功能 若表达式为true 则执行语句段 否则执行语句段 第四节程序控制流 If语句示范 vard newDate vartime d getHours if time6 document write 早上好 elsedocument write 祝你快乐 第四节程序控制流 if语句的嵌套if 布尔值 语句 elseif 布尔值 语句 elseif 布尔值 语句 else语句 第四节程序控制流 For循环语句基本格式 for 初始化 条件 增量 语句集 功能 实现条件循环 当条件成立时 执行语句集 否则跳出循环体 第四节程序控制流 For语句示范 for i 0 i 第四节程序控制流 while循环基本格式while 条件 语句集 该语句与For语句一样 当条件为真时 重复循环 否则退出循环 第四节程序控制流 4 break和continue语句使用break语句使得循环从For或while中跳出 continue使得跳过循环内剩余的语句而进入下一次循环 如for i 1 i 第四节程序控制流 5 函数函数定义格式 function函数名 形参表 函数体 return表达式 通过指定函数名 实参表 来调用一个函数 函数名对大小写是敏感的 如 functionf1 return welcome document write f1 第五节事件驱动及事件处理 1 基本概念通常鼠标或热键的动作我们称之为事件 而由鼠标或热键引发的一连串程序的动作 称之为事件驱动 而对事件进行处理程序或调用函数 我们称之为事件处理程序 2 事件处理程序在JavaScript中对象事件的处理通常由函数担任 其基本格式与函数完全相同 Function事件处理名 参数表 事件处理语句集 第五节事件驱动及事件处理 3 事件驱动 1 单击事件onClick当用户单击鼠标时 产生onclick事件 同时onClick指定的事件处理程序或代码将被调用执行 单击事件通常在下列基本对象中产生 button checkbox radio reset submit 如 第五节事件驱动及事件处理 2 改变事件onChange当利用text或textarea元素输入的字符值改变时引发该事件 或者当select表格项中的一个选项状态改变后也会引发该事件 如 3 选中事件onSelect当text或textarea对象中的文字被加亮后 引发该事件 第五节事件驱动及事件处理 4 获得焦点事件onFocus当用户单击text textarea或select对象时 引发该事件 5 失去焦点onBlur当text textarea或select对象不再拥有焦点而退到后台时 引发该事件 6 载入文件onLoad当载入文件时 引发该事件 7 卸载文件onUnload当Web页面退出时引发该事件 第五节事件驱动及事件处理 OnDblclick 在页面中双击使用行为的特定元素 文本 按钮或图像 时 就会触发该事件 OnError 当浏览器下载页面或图像发生错误时触发该事件 OnKeydown 当用户在浏览网页时 按下一个键后且尚未释放该键时 就会触发该事件 该事件常与 onKeydown 与 onKeyup 事件组合使用 OnKeyup 当用户浏览网页时 按下一个键后又释放该键时 就会触发该事件 第五节事件驱动及事件处理 OnMouseDown 浏览网页时 单击网页中建立行为的元素且尚未释放鼠标之前 就会触发该事件 OnMousemove 在浏览器中 当用户将光标在使用行为的元素上移动时 就会触发该事件 OnMouseover 在浏览器中 当用户将鼠标指向一个使用行为的元素时 就会触发该事件 OnMouseout 在浏览器中 当用户将光标从建立行为的元素移出后 就会触发该事件 OnMouseup 在浏览器中 当用户在使用行为的元素上按下鼠标并释放后 就会触发该事件 在Dreamweaver中使用行为 在Dreamweaver中添加行为的3个步骤 选择对象添加动作调整事件 1 制作层特效 改变属性 1 制作层特效 显示隐藏层 1 制作层特效 拖动层注意 选中body标记 添加行为鼠标事件为onmousedown 2 制作时间轴动画 3 控制时间轴 4 弹出信息 使用弹出信息动作 在事件发生时弹出一个事先指定好的信息提示框 可以为浏览者提供信息 该提示框只有一个 确定 按钮 下面以网页中的按钮为例 单击按钮 弹出信息提示框 单击信息提示框的 确定 按钮 信息提示框关闭 具体操作步骤如下 5 打开浏览器窗口 使用打开浏览器窗口动作 可以在事件发生时打开一个新浏览器窗口 用户可以设置新窗口的各种属性 如窗口名称 大小等 注意 选择body标记作为对象 事件设置为onload 6 检查表单 在具有表单的页面中 使用检查表单动作可以验证表单域中输入数据的合法性 使用 OnBlur 事件可以将动作使用于单个文本域 当用户填写完该文本框的内容后立即进行验证 也可以使用 OnSubmit 事件将动作使用于整