网页制作案例教程-清华大学出版社-第10章-JavaScript概述

1、 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社第10章 Javascript概述 本章学习目标（知识要点）nJavaScript基本概念nJavaScript基本特点及主要功能nJavaScript在网页中应用的基本方式nJavaScript基础语法 本章学习导航nJavaScript是制作网站中网页动态效果的一项基本技术，了解JavaScript的基本概念及作用并在网站中使用它可以作出普通技术无法实现页面动态效果及验证功能。本章主要从JavaScript基本概念、在网页HTML中引用方式、JavaScript基础语法方面介绍了JavaScript的基础知识。n本章内容在全书知

2、识结构中所处位置如图所示 基础篇HTML篇CSS篇JavaScript篇提高篇网 页 设 计 与 开 发 流 程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护10.1 Javascript简介简介 nJavascript是一种解释性的，基于对象的脚本语言(an interpreted, object-based scripting language)。 nJav

3、aScript 正式的标准是ECMA-262。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。标准由 ECMA 组织发展和维护。 nJavascript主要是基于客户端运行的，用户点击带有Javascript的网页，网页里的Javascript就传到浏览器，由浏览器对此作处理。 n目前为止，最新的JavaScript的版本是JavaScript 2.1。目前支持JavaScript 2.1的浏览器有Firefox 2.0.x等。 10.2 Javascript特点及主要功能特点及主要功能nJavaScript是一种基于对象(Object B

4、ased)和事件驱动(Event Driven)并具有安全性能（Security）的脚本语言。n1、JavaScript特点 n它是一种脚本编写语言 n基于对象的语言 n简单性 n安全性 n动态性 n 2、 JavaScript功能 n客户端应用 n服务器端应用 n3、JavaScript作用 n校验用户输入的内容n有效地组织网页内容n动态地显示网页内容n弥补静态网页不能实现的功能n动画显示n 4、JavaScript与Java的区别 10.3 在在HTML页面中使用页面中使用JavascriptnJavaScript是一种解释性编程语言，其源代码在被网络传送到客户端执行之前不需经过编译，而是

5、将文本格式的字符代码发送给客户，由浏览器解释执行。 nJavaScript的代码是一种文本字符格式，可是直接嵌入HTML文档中，并且可动态装载。 n 在JavaScript中，可以添加注释来对 JavaScript 进行解释，或者提高其可读性。nJavaScript的注释分为两种：一种是单行注释，以/开始。一种是多行注释，/* 开始，以 */结束，/* */配对使用。 n在HTML页面中使用JavaScript的方法有两种：n一种是直接加入到HTML文件中；n另外一种是引用方式。10.3.1直接加入到直接加入到HTML文档中方式文档中方式n 一个简单的JavaScript开发包含选择开发工具、

6、编辑源代码、测试、运行四步 n1）选择开发工具 n2）编辑源代码 n（1）创建并写出简单的HTML页面基本结构。 n（2）在HTML文件标签中或者中任意地方添加配对标签，JavaScript脚本代码用配对标签进行标识，设置语言属性Language =JavaScript说明标识中是使用的何种语言 代码如下：/ JavaScript代码document.write(Welcome To Ascent Technologies); n3）运行程序10.3.2 引用方式引用方式n如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式

7、如下：n 其中的Url就是程序文件的地址。 n实现上述“直接插入方式”中所举例子的效果，步骤如下： n1）首先创建一个Javascript源代码文件“as.js”，其内容如下：document.writeln(这是Javascript！采用引用的方法！);n2） 在网页中中添加代码： 。 n3）运行程序，双击welcome.html文件，即可打开 10.4 Javascript基础语法基础语法n10.4.1 Javascript字符集、标识符和关键字n1）字符集 n常见的标准字符集有ASCII、ISO、LATIN-1、GBK和UNICODE。 n与字符集相关的需要注意的一个问题是，通常浏览器本

8、身支持多种类型的编码器。因此作为嵌入页面文档的程序脚本，不但要考虑自身编码，还要充分考虑浏览器编码器的兼容性。对于强制指定了不支持Unicode的编码器的浏览器，JavaScript将会因为脚本代码的注释里的中文不能正确解析而导致执行失败。 n2）标识符 n标识符可以由任意顺序的大小字母、下划线（_）、美元符号（$）组成，但标识符不能以数字开始，不能是JavaScript中的保留字 .n3）关键字 nJavaScript同其他语言一样也拥有自己的关键字，即保留字，是系统定义的具有特定含义的特殊标识符，用户不能用来作为自定义标识符。nJavaScript的关键字有许多，大致可分为两种类型：Jav

9、aScript保留关键字和ECMA扩展的保留字。 10.4.2 Javascript数据类型、变量和常量n1、数据类型 n数值型（整数和浮点数）n字符串型（用“”号或括起来的字符或数值）n布尔型（使True或False表示）n特殊数据类型： Null（空值），Undefinedn2、变量nJavaScript 支持使用变量，变量根据使用范围的不同分为：全局变量和局部变量。全局变量可以在应用中的任何地方使用，局部变量只能在当前的函数中使用。 nJavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯

10、。可以使用 var 语句来进行变量声明。 n声明全局变量： X=0；全局变量也可以使用var语句，但不是必须的。是在之间声明的变量n声明局部变量方法：局部变量在函数中定义，并带有var关键字。如：var men = true; / men 中存储的值为 Boolean 类型。 n对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。 n3、常量n整型常量 n实型常量 n布尔值 n字符型常量 n空值 n特殊字符 10.4.3表达式和运算符表达式和运算符n、表达式 n在JavaScript中表达式由常量、变量以及运算符构成，在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作

11、 n表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。 n、运算符n算术运算符n 关系运算符 n逻辑运算符 n赋值运算符 10.4.4 Javascript控制语句n1、if条件语句 基本格式if（表述式）语句段；.else语句段；.nif语句可以嵌套使用：if（表达式）语句；else if（表达式）语句；else if（表达式）语句；else 语句； n2、switch语句 switch语句根据条件值改变程序执行的顺序，其基本格式如下：swith(val)case 1:语句1;break;case 2:语句2;break;default:缺省语句;break;n说明：1）sw

12、itch后面的表达式只能是整型、字符型或枚举类型。 case后面的常量表达式的类型必须与其一致。2） “case 常量表达式”起到语句标号的作用，各常量表达式 的值必须互不相等。3） 各case和default出现的次序可以任意。4） 多个case可共用一组执行语句，即允许case常量表达式 后无语句。5）break语句在switch语句中是可选的，它用来跳过后面的 case语句，结束switch语句，从而达到分支的目的。 n3、for语句 n如果在已知循环次数的情况下，可以使用JavaScript提供的for语句，for语句能够使程序变得更为简洁，基本格式如下：for（初始表达式；条件表达式

13、；增量表达式）语句组；n4、while循环 nwhile语句用于当满足指定条件时需要循环执行一组语句的情况，它的语法格式如下：while（条件表达式）语句组；while语句执行时，首先判断表达式的值，如果表达式的值为“真”，就重复执行语句组，直到表达式的结果变为“假”为止。 n5、do while循环ndo while语句与while语句相似，也是用于在满足指定条件时反复执行的一组语句，但是两者之间存在着差别，该语句的基本格式如下：do语句组； while（条件表达式）; n6、forin nJavaScript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素

14、，即for.in 循环。其基本格式：for（变量 in 数组或对象）语句组；forin语句在执行时，对数组或对象中的每一个元素，重复执行语句组的内容，直到处理完最后一个元素为止。 n7、break和continue语句 n使用break语句使得循环从for或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。 10.4.5 Javascript函数函数n1、函数定义和调用 n1）函数的定义n函数一般定义在HTML文档的部分，位于标记内部，函数可以出现在任何位置。此外，函数也可以在单独的脚本文件中定义，并保存在外部文件中，在适用的位置根据函数名和所在的外部文件名引用。 定

15、义函数的语法格式为：function 函数名（形式参数1，形式参数2，形式参数n）语句组；n2）函数的调用 n函数定义后只有调用该函数，才会实现该函数的功能，这称作函数调用。调用函数的方法非常简单，只要写上函数名，圆括号以及在圆括号中写上要传递的参数或值就可以了。n调用函数的语法格式如下： 函数名（实际参数1，实际参数2, 实际参数n）说明：函数名要与定义函数时使用的名称相同。n3）函数定义和使用实例n2、 函数的嵌套调用函数的嵌套调用n1）函数嵌套语法n函数嵌套是指在一个函数内部定义和使用另一个或多个函数的情况。函数嵌套的语法格式为：function funcA()/这里是函数funcA（）

16、的一条或多条语句，其中包括对myfuncB（）的调用function.funcB()/这里是函数funcB()的一条或多条语句，可以使用funcA中声明的变量n2）函数的嵌套调用实例n3、递归函数、递归函数n递归函数的另外一种形式是在几个函数之间循环调用，从而形参隐含递归。n 例如，下面的是在函数f1()中调用f2()函数，又在f2()函数中调用f1()函数，从而形成递归调用。 function f1() f2(); function f2() f1(); n递归函数效率很低，但递归函数的结构有利于理解和解决现实问题。有些问题用递归方法解决起来会非常简单，如求递归函数的值，汉诺塔问题等。 10.5 项目案例项目案例学习目标学习目标 案例描述案例描述 学习JavaScript的基本语法、日期函数及其格式化应用、CSS和DIV的应用以及系统函数运用等知识 定义获取系统时间函数，获取的计算机系统当前时间，以格式化的格式把时间显示在DIV和CSS设置的网页布局中固定位置，并动态更新时间。 案例要点案例要点 DIV和CSS设置网页布局、时间函数、Span标签使用 案例实施案例实施 1、定义格式化的日期函数，为