通过Dreamweaver_CS3学习HTML+DIV+CSS_第19章__脚本技术.ppt

第19章脚本技术 CSS样式表可以控制和美化网页的外观 是对网页的交互行为几乎无能为力 此时脚本语言提供了解决方案 所有的动态交互网页中都使用了脚本 目前流行的Ajax技术 其核心是使用了JavaScript脚本语言 那什么是脚本 脚本是一类解释性程序语言的总称 目前主要的脚本语言有两种 即JavaScript和VBScript语言 两者都可以嵌入在HTML语言中执行 而且能够对网页元素对象进行控制 例如 使用脚本检查表单的有效性 而不必将数据传送到服务端 本章将介绍脚本语言的概念及其应用 在此将针对JavaScript语言进行介绍 19 1JavaScript简介 JavaScript是由网景公司创造的一种脚本语言 最初命名为LiveScript 经过几番更改后命名为JavaScript 作为一门独立的语言 具备程序语言的基本特点和功能 主要用于联合HTML等Web语言构成动态网页 JavaScript目前在网络上应用十分广泛 几乎在所有的动态网页里都存在 目前 流行的Ajax从很大程度上也因JavaScript的存在而存在 19 1 1JavaScript的特点 JavaScript是一种解释性语言 所以其编写出的程序不需要编译就可运行 而且该语言是基于对象和事件驱动的脚本语言 JavaScript有着广泛的支持性 几乎所有浏览器都支持 例如 InternetExplorer IE Firefox Netscape Mozilla和Opera等 所以 用户不用担心JavaScript脚本不会执行 JavaScript语言的特点总结起来 有如下几点 1 基于对象的语言2 简单性3 安全性4 动态性5 跨平台性 19 1 2插入JavaScript JavaScript可以出现在HTML的任意地方 使用标记 可以在HTML文档的任意地方插入JavaScript 如果要在声明框架的网页 框架网页 中插入 就一定要在之前插入 否则会造成无法运行 其基本格式如下 19 1 3JavaScript基本语法 既然JavaScript是一门独立的程序语言 那么也有自己的语法 JavaScript程序中 其基本语句语法格式如下 其中 分号 是JavaScript语言一个语句结束的标识符 虽然现在的浏览器都允许用回车键充当结束符号 但是保持使用分号作为结束符是一个良好的习惯 其语句块的格式如下 19 1 4变量 变量就是可变的量 是用于存储某种和某些数值的存储单元 所储存的值可以是数字 字符或其他的一些东西 1 变量命名每个变量都有其自己的名称 变量的命名要求如下 只包含字母 数字和 或下划线 必须以字母开头 不能使用JavaScript保留字 19 1 4变量 2 变量声明使用变量前 应该声明该变量 如果没有声明变量 系统会进行隐式声明 声明变量格式如下 var 19 1 4变量 3 数据类型变量有多种数据类型 以表达不同类型的数据 变量可以用的数据类型如下 整型 只能储存整数 可以是正整数 0或负整数 可以是十进制 八进制和十六进制 八进制数的表示方法是在数字前加0 如0123表示八进制数123 十六进制则是加0 x 如0 xEF表示十六进制数EF 19 1 4变量 4 变量的赋值一个变量声明后 可以在任何时候对其赋值 赋值的语法格式如下 19 1 4变量 5 JavaScript常数在JavaScript中预先定义了一些特殊变量的值 其值不能更改 故称之为常数 主要常数如下 null 是一个空值常量 如变量没有定义 或定义后没有赋值 其值就是null 如果返回一个不存在的对象时 其结果也是null 19 1 4变量 6 变量范围JavaScript有两种变量范围 全局和局部 如果在任何函数定义之外声明了一个变量 则该变量为全局变量 且该变量的值在整个持续范围内都可以访问和修改 如果在函数定义内声明了一个变量 则该变量为局部变量 每次执行该函数时都会创建和释放该变量 且不能被该函数外的任何事物访问 19 1 5表达式与运算符 理解和定义变量后 需要对变量进行计算 计算方法与数学中的计算方法基本相同 也需要使用表达式与运算符 但也有细微的差别 本小节介绍具体概念和使用方法 19 1 5表达式与运算符 1 表达式表达式就是由操作符 操作对象及标点符号等连接而成 对变量等进行赋值和计算等一系列操作的式子 可以说是变量 常量 布尔及运算符的集合 主要的表达式有算术表述式 字串表达式 赋值表达式以及布尔表达式等 19 1 5表达式与运算符 2 运算符运算符是用于完成操作的一系列符号 在JavaScript中有算术运算符 如 和 等 有比较运算符 如 和 等 有逻辑布尔运算符如 取反 和 等 有字串运算如 和 等 在JavaScript中主要有双目运算符和单目运算符 19 1 6程序构成 JavaScript脚本语言的基本构成是由控制语句 函数 对象 方法和属性等来实现编程的 1 程序控制流在任何一种语言中 程序控制流都是必须的 该控制流能使整个程序结构明了 使之按一定的方式执行 JavaScript常用的程序控制流结构及语句如下 if条件语句 19 1 6程序构成 2 函数函数为程序设计人员提供了一个非常方便的功能 符合模块化结构 通常在进行一个复杂的程序设计时 总是根据所要完成的功能 将程序划分为一些相对独立的部分 每部分编写一个函数 从而使各部分充分独立 任务单一 程序清晰 易懂 易读和易维护 JavaScript函数可以封装那些在程序中可能要多次用到的模块 并可作为事件驱动的结果而调用的程序 19 1 6程序构成 3 事件驱动及事件处理JavaScript是基于对象 object based 的语言 与Java不同 Java是面向对象的语言 而基于对象的基本特征 就是采用事件驱动 event driven 该语言在图形界面的环境下 使得一切输入变得简单 通常鼠标或热键的动作称之为事件 Event 19 1 7对象编程 1 对象的基础知识对象的概念源自对真实物理世界的抽象 对象是属性和方法的集合 属性是与对象相关的一个或一组值 方法用于操作属性的函数 但与函数又有区别 属性和方法是对象的成员 JavaScript支持4种类型的对象 内部对象 自定义对象 宿主给出的对象 如Internet浏览器中的window和document 以及ActiveX对象 外部组件 19 1 7对象编程 2 JavaScript内部对象JavaScript提供了一些非常有用的常用内部对象和方法 用户不需要用脚本来实现这些功能 这正是基于对象编程的真正目的 在JavaScript中提供了String 字符串 Math 数值计算 和Date 日期 3种对象和其他一些相关的方法 从而为编程人员快速开发强大的脚本程序提供了便利条件 在JavaScript中对于对象属性和方法的引用 有两种情况 其一该对象是静态对象 即在引用 19 1 7对象编程 3 创建对象使用JavaScript可以创建自己的对象 虽然 JavaScript内部和浏览器本身的功能已十分强大 但JavaScript还是提供了创建新对象的方法 在JavaScript中创建一个新对象十分简单 首先定义一个对象 而后再为该对象创建一个实例 这个实例就是一个新对象 具有对象定义中的基本特征 19 1 7对象编程 4 创建对象实例一旦对象定义完成后 就可以为该对象创建一个实例 格式如下 NewObject newobject 19 2文档对象 前面介绍了JavaScript语言的基本语法 虽然该语法对于JavaScript脚本编写有着至关重要的作用 但是仅了解这些内容是不够的 如果要在网页中使用JavaScript脚本进行控制其中的元素 那么文档对象是必不可少的 本小节中简单介绍文档对象 19 2 1文档模型树 文档对象是指在网页文档里划分出来的对象 在JavaScript能够涉及的范围内有如下几个 大 对象 window document location navigator screen和history等 如图19 1是一个文档对象模型树 可以看到对象下包含对象的层次关系 要引用某个对象 就要把父级的对象都列出来 例如 要引用某表单applicationForm的某文字框customerName 就要用document applicationForm customerName 19 2 2Cookies的使用 Cookies其实是一个文本文件 用于存储与网站或网页的相关信息 但它的大小是有限制的 通过document的Cookie属性可以进行访问 一般来说 Cookies是通过CGI或高级的脚本程序等创建的 因此JavaScript提供了对Cookies的全面访问权 Cookies命名的限制与JavaScript的命名限制基本相同 没有不能用JavaScript关键字的限制 但是只能使用在URL编码中的字符 所谓URL编码字符是都用字母和数字 而没有其他的特殊符号 其值也必须遵循此规则 19 3Dreamweaver脚本行为 前面对JavaScript语言进行介绍 虽然该语言相对其他语言 如C 来说要简单许多 但对于初学者还是存在一定的困难 DreamweaverCS3提供了强大的脚本功能 其可以自动生成脚本代码 通过它提供的工具可以不动手编写代码便可实现多种效果 本小节将介绍Dreamweaver的脚本行为 19 3 1认识 行为 面板 Dreamweaver中的行为其实就是事件与动作的组合 事件的概念在前面已经介绍过了 动作是预先编写好用于控制元素对象的程序 从而产生需要的效果 例如交换图像动作 可以在事件驱动下改变图像 在DreamweaverCS3中内置了许多行为动作 还可以从Adobe公司网站下载更多行为动作 如果精通JavaScript程序语言则可以自己设计新行为动作 打开 行为 面板 如图19 2所示 19 3 2行为应用 简单认识了行为之后 在此使用实例进行说明 如何在网页中应用强大的行为功能 1 弹出信息2 交换图像3 调用JavaScript4 改变属性5 打开浏览器窗口6 显示 隐藏层7 效果8 检查表单9 拖动AP元素 19 4专家总结 本章介绍Ja