网页制作清华大学出版社第10章_JavaScript概述

网页制作案例教程毋建军郑宝昆郭锐编著清华大学出版社第10章Javascript概述本章学习目标（知识要点）JavaScript基本概念JavaScript基本特点及主要功能JavaScript在网页中应用的基本方式JavaScript基础语法本章学习导航JavaScript是制作网站中网页动态效果的一项基本技术，了解JavaScript的基本概念及作用并在网站中使用它可以作出普通技术无法实现页面动态效果及验证功能。本章主要从JavaScript基本概念、在网页HTML中引用方式、JavaScript基础语法方面介绍了JavaScript的基础知识。本章内容在全书知识结构中所处位置如图所示基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护10.1Javascript简介Javascript是一种解释性的，基于对象的脚本语言(aninterpreted,object-basedscriptinglanguage)。JavaScript正式的标准是ECMA-262。这个标准基于JavaScript(Netscape)和JScript(Microsoft)。标准由ECMA组织发展和维护。Javascript主要是基于客户端运行的，用户点击带有Javascript的网页，网页里的Javascript就传到浏览器，由浏览器对此作处理。目前为止，最新的JavaScript的版本是JavaScript2.1。目前支持JavaScript2.1的浏览器有Firefox2.0.x等。10.2Javascript特点及主要功能JavaScript是一种基于对象(ObjectBased)和事件驱动(EventDriven)并具有安全性能（Security）的脚本语言。1、JavaScript特点它是一种脚本编写语言基于对象的语言简单性安全性动态性2、JavaScript功能客户端应用服务器端应用3、JavaScript作用校验用户输入的内容有效地组织网页内容动态地显示网页内容弥补静态网页不能实现的功能动画显示4、JavaScript与Java的区别10.3在HTML页面中使用JavascriptJavaScript是一种解释性编程语言，其源代码在被网络传送到客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。JavaScript的代码是一种文本字符格式，可是直接嵌入HTML文档中，并且可动态装载。在JavaScript中，可以添加注释来对JavaScript进行解释，或者提高其可读性。JavaScript的注释分为两种：一种是单行注释，以//开始。一种是多行注释，/*开始，以*/结束，/**/配对使用。在HTML页面中使用JavaScript的方法有两种：一种是直接加入到HTML文件中；另外一种是引用方式。10.3.1直接加入到HTML文档中方式一个简单的JavaScript开发包含选择开发工具、编辑源代码、测试、运行四步1）选择开发工具2）编辑源代码（1）创建并写出简单的HTML页面基本结构。（2）在HTML文件head/head标签中或者body/body中任意地方添加Script/Script配对标签，JavaScript脚本代码用Script/Script配对标签进行标识，设置语言属性Language=JavaScript说明标识中是使用的何种语言代码如下：htmlheadscriptLanguage=JavaScript//JavaScript代码document.write(WelcomeToAscentTechnologies);/script/head/html3）运行程序10.3.2引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：scriptsrc＝urllanguage=Javascript/script其中的Url就是程序文件的地址。实现上述“直接插入方式”中所举例子的效果，步骤如下：1）首先创建一个Javascript源代码文件“as.js”，其内容如下：document.writeln(这是Javascript！采用引用的方法！);2）在网页中head/head中添加代码：scriptsrc＝as.jslanguage=Javascript/script。3）运行程序，双击welcome.html文件，即可打开10.4Javascript基础语法10.4.1Javascript字符集、标识符和关键字1）字符集常见的标准字符集有ASCII、ISO、LATIN-1、GBK和UNICODE。与字符集相关的需要注意的一个问题是，通常浏览器本身支持多种类型的编码器。因此作为嵌入页面文档的程序脚本，不但要考虑自身编码，还要充分考虑浏览器编码器的兼容性。对于强制指定了不支持Unicode的编码器的浏览器，JavaScript将会因为脚本代码的注释里的中文不能正确解析而导致执行失败。2）标识符标识符可以由任意顺序的大小字母、下划线（_）、美元符号（$）组成，但标识符不能以数字开始，不能是JavaScript中的保留字.3）关键字JavaScript同其他语言一样也拥有自己的关键字，即保留字，是系统定义的具有特定含义的特殊标识符，用户不能用来作为自定义标识符。JavaScript的关键字有许多，大致可分为两种类型：JavaScript保留关键字和ECMA扩展的保留字。10.4.2Javascript数据类型、变量和常量1、数据类型数值型（整数和浮点数）字符串型（用“”号或‘’括起来的字符或数值）布尔型（使True或False表示）特殊数据类型：Null（空值），Undefined2、变量JavaScript支持使用变量，变量根据使用范围的不同分为：全局变量和局部变量。全局变量可以在应用中的任何地方使用，局部变量只能在当前的函数中使用。JavaScript是一种对数据类型变量要求不太严格的语言，所以不必声明每一个变量的类型，变量声明尽管不是必须的，但在使用变量之前先进行声明是一种好的习惯。可以使用var语句来进行变量声明。声明全局变量：X=0；全局变量也可以使用var语句，但不是必须的。是在script/script之间声明的变量声明局部变量方法：局部变量在函数中定义，并带有var关键字。如：varmen=true;//men中存储的值为Boolean类型。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。3、常量整型常量实型常量布尔值字符型常量空值特殊字符10.4.3表达式和运算符１、表达式在JavaScript中表达式由常量、变量以及运算符构成，在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。２、运算符算术运算符关系运算符逻辑运算符赋值运算符10.4.4Javascript控制语句1、if条件语句基本格式if（表述式）语句段１；......else语句段２；.....if语句可以嵌套使用：if（表达式）语句１；elseif（表达式）语句２；elseif（表达式）语句３；……else语句４；2、switch语句switch语句根据条件值改变程序执行的顺序，其基本格式如下：swith(val){case1:语句1;break;case2:语句2;break;default:缺省语句;break;}说明：1）switch后面的表达式只能是整型、字符型或枚举类型。case后面的常量表达式的类型必须与其一致。2）“case常量表达式”起到语句标号的作用，各常量表达式的值必须互不相等。3）各case和default出现的次序可以任意。4）多个case可共用一组执行语句，即允许case常量表达式后无语句。5）break语句在switch语句中是可选的，它用来跳过后面的case语句，结束switch语句，从而达到分支的目的。3、for语句如果在已知循环次数的情况下，可以使用JavaScript提供的for语句，for语句能够使程序变得更为简洁，基本格式如下：for（初始表达式；条件表达式；增量表达式）{语句组；}4、while循环while语句用于当满足指定条件时需要循环执行一组语句的情况，它的语法格式如下：while（条件表达式）{语句组；}while语句执行时，首先判断表达式的值，如果表达式的值为“真”，就重复执行语句组，直到表达式的结果变为“假”为止。5、do……while循环do……while语句与while语句相似，也是用于在满足指定条件时反复执行的一组语句，但是两者之间存在着差别，该语句的基本格式如下：do{语句组；}while（条件表达式）;6、for…inJavaScript提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素，即for...in循环。其基本格式：for（变量in数组或对象）{语句组；}for…in语句在执行时，对数组或对象中的每一个元素，重复执行语句组的内容，直到处理完最后一个元素为止。7、break和continue语句使用break语句使得循环从for或while中跳出，continue使得跳过循环内剩余的语句而进入下一次循环。10.4.5Javascript函数1、函数定义和调用1）函数的定义函数一般定义在HTML文档的head部分，位于script…/script标记内部，函数可以出现在任何位置。此外，函数也可以在单独的脚本文件中定义，并保存在外部文件中，在适用的位置根据函数名和所在的外部文件名引用。定义函数的语法格式为：function函数名（形式参数1，形式参数2，…，形式参数n）{语句组；}2）函数的调用函数定义后只有调用该函数，才会实现该函数的功能，这称作函数调用。调用函数的方法非常简单，只要写上函数名，圆括号以及在圆括号中写上要传递的参数或值就可以了。调用函数的语法格式如下：函数名（实际参数1，实际参数2,…,实际参数n）说明：函数名要与定义函数时使用的名称相同。3）函数定义和使用实例2、函数的嵌套调用1）函数嵌套语法函数嵌套是指在一个函数内部定义和使用另一个或多个函数的情况。函数嵌套的语法格式为：functionfuncA(){//这里是函数funcA（）的一条或多条语句，其中包括对myfuncB（）的调用function.funcB(){//这里是函数funcB()的一条或多条语句，可以使用funcA中声明的变量}}2）函数的嵌套调用实例3、递归函数递归函数的另外一种形式是在几个函数之间循环调用，从而形参隐含递归。例如，下面的是在函数f1()中调用f2()函数，又在f2()函数中调用f1()函数，从而形成递归调用。functionf1(){……f2();……}functionf2(){……f1();……}递归函数效率很低，但递归函数的结构有利于理解和解决现实问题。有些问题用递归方法解决起来会非常简单，如求递归函数的值，汉诺塔问题等。10.5项目案例学习目标案例描述学习JavaScript的基本语法、日期函数及其格式化应用、CSS和DIV的应用以及系统函数运用等知识定义获取系统时间函数，获取的计算机系统当前时间，以格式化的格式把时间显示在