JavaScript 程序设计

JavaScript程序设计

第1章 JavaScript语言概论

1.1 JavaScript语言概况 • 1.2 在Web页面中使用JavaScript • 1.3 编写JavaScript的工具 • 1.4 第一个JavaScript程序

1.1.1 JavaScript语言 JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java小程序一起实现在一个Web页面中连接多个对象，与Web客户交互作用，从而可以开发客户端的应用程序。

1.1.2 JavaScript可以做什么 • 制作网页特效 • 例如：光标动画、信息提示、动态广告面板、检测鼠标行为等。 • 提升使用性能 • 越是复杂的代码，越要耗费系统资源来执行它，因为大部分的JavaScript程序代码都在客户端执行，操作时完全不用服务器操心，这样，网页服务器就可以将资源用在提供客户端更多更好的服务上。 • 窗口动态操作 • 利用JavaScript，可以很自由地设计网页窗口的大小、窗口的打开与关闭等，甚至也可以在不同窗口文件中互相传递参数。

1.1.3 JavaScript 和Java的比较 • 基于对象和面向对象 • Java 是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象。 JavaScript 是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。 • 解释和编译 • Java的源代码在传递到客户端执行之前，必须经过编译， JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。

强变量和弱变量。 • Java采用强类型变量，即所有变量在编译之前必须作声明。 JavaScript中变量声明，采用弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型，。 • 代码格式不一样。 • 嵌入方式不一样。 • JavaScript 使用<Script>和</Script>来标识，而Java使用<applet>和</applet>来标识。

1.1.4 JavaScript的执行平台 • Navigator • IE • 几乎所有的浏览器

1.2 在Web页面中使用JavaScript • JavaScript是内嵌在HTML中被执行的 • 在HTML中通过标记<SCRIPT>……</SCRIPT>引入JavaScript代码，当浏览器读取到<SCRIPT>标记时，就解释执行其中的脚本。

链接JavaScript文件 • 如果脚本程序较长或者同一段脚本可以在若干个Web页中使用，则可以将脚本放在单独的一个.js文件里，然后链接到需要它的HTML文件，这相当于将其中的脚本填入链接处。 • 要引用外部脚本文件，使用<SCRIPT>标记的SRC属性来指定外部脚本文件的URL。

1.3 编写JavaScript的工具 • 使用纯文本编辑器 • 使用专业化脚本编辑工具，如Frontpage、Dreamweaver等。 • 使用Microsoft脚本编辑器，FrontPage 。

1.4 第一个JavaScript程序 1.4.1 关于<SCRIPT>标签 • HTML文档中组成Javascript程序的语句包含在<SCRIPT> …</SCRIPT>标签对中 • <SCRIPT>标签用来通知Web浏览器随后的指令由脚本引擎来解释。<SCRIPT>标签的LANGUAGE属性告诉浏览器使用的是哪种脚本语言和脚本语言的版本。

1.4.2 创建JavaScript源代码文件 • JavaScript源代码文件通常使用.js扩展文件名命名，其中仅包含有JavaScript语句，它不包含HTML中的<SCRIRT>……</SCRIRT>标签对。 • <SCRIRT>……</SCRIRT>标签对位于HTML文档中调用源代码文件的位置。

下面的语句说明了如何装载位于C:\java目录下名为test1.js的JavaScript源代码文件。源程序如下： <SCRIPT LANGUAGE=”JavaScript1.2” SRC=”C:\java\test1.js”> </SCRIPT>

1.4.3 为JavaScript程序添加注释 • JavaScript支持两种类型的注释：行注释和块注释。 • 行注释是通过在想要用作注释的文本前加上“//”符号来创建。 • 块注释可以跨越多行，通过在块中第一行前添加“/*”创建，在块中文本的最后加入“*/”来表示结束注释，那么位于“/*”和“*/”之间的部份将被JavaScript解释器忽略。

1.4.4 在不兼容的创览器中隐藏 JavaScript代码 • 创建JavaScript源代码文件可以在不兼容的浏览器中把JavaScript代码隐藏起来。为了在不兼容的浏览器中隐藏嵌入的JavaScript代码，就需要把<SCRIPT>……</SCRIPT>标签对置于一个HTML注释块中。 • HTML注释以结束。所有位于注释起始标签和结束标签之间的文本都不会被浏览器提交。

1.4.5 在<HEAD>或<BODY>段放置JavaScript • JavaScript可以置于这两段中或者两段之间。 • 当把JavaScript代码放在<HEAD>段中时，它会在被显示的HTML文档主体之前处理。 • 如果JavaScript代码用于完成所需的后台任务，最好将代码置于<HEAD>段中，如果用于显示内容，就置于<BODY>中。

第2章 JavaScript代码编写与调试

2.1 JavaScript代码的编写和执行 • 2.2 语法规则 • 2.3 动态生成页面内容

2.1 JavaScript代码的编写和执行 • JavaScript是一种脚本语言，脚本语言是指在Web浏览器内由解释解释执行的编程语言。 • 每次执行的时候解释器都会把程序代码翻译成可执行的格式。

2.2 语法规则 2.2.1 大小写 • JavaScript是大小写敏感的，这意味着大写字母同相应的小写字母是不同的。 • 适用于该语言的各个方面，包括关键字、运算符、变量名、事件处理器、对象属性等； • 所有的关键字都要小写，如if，不能键入IF； • 使用“驼峰”命名的传统，许多方法和属性使用混合大小写。

2.2.2 代码书写格式 • 将JavaScript的程序代码放在<SCRIPT>…</SCRIPT>对中。 <script> document.write(“Hello world!!!”); </script> • 在<SCRIPT>标记中加上Language属性，指定使用哪一种语言。 <script language=“JavaScript”> document.write(“Hello world!!!”); </script>

在标记Language属性外再进一步指明JavaScript的版本号。 <script language=“JavaScript1.2” > document.write(“Hello world!!!”); </script> • 可以将可能重复使用的程序代码独立成一个外部文件，只要以.js为扩展名，利用SRC属性就可以将该文件的内容include进来。

为了避免客户端使用比较旧的浏览器，可以将所有的程序代码用HTML的注释标记括起来 。 <script language=“JavaScript”>  </script>

2.2.3 保留字

2.2.4 分号和语句结束符 • JavaScript语句以分号“ ；”作为结束符。

2.3 动态生成页面内容 2.3.1 字符串及其拼接方法 • 所谓的“字符串常量”是由一些包含在单引号或双引号内的字符所构成的。 • 转义字符

JavaScript的转义字符

2.3.2 document对象write()和writeln()方法 • JavaScript的信息输出方法：window.alert()、document.write()和document.writeln() • document是JavaScript中的一个对象，在它里面封装了许多很多有用的方法，write()和writeln()是用于将文本信息直接输出到浏览器窗口中的方法。

第3章与用户交互方法

3.1 消息对话框 • 一种特殊的窗口，在用户进行触发操作后自动弹出，起到提醒、警告或确认的作用。 • 作用：在浏览网页时对用户进行提示，警告某种操作可能造成的后果或确认是否进行某项操作。

JavaScript支持的消息对话框 • 警告对话框 • 确认对话框 • 提示对话框

显示警告对话框的alert()方法 alert( )方法的标准语法是： window. alert("content"); 或者简化为： alert("content"); “content”为警告对话框中显示的文本内容，它的变量类型是字符类型。

显示确认消息框的confirm()方法 confirm( )方法的标准语法是： window.confirm("content"); 或者简化为： confirm("content"); “content”是提示对话框的显示文本。 confirm( )方法返回一个布尔型的值，当用户点击“确认”时返回“true”值，否则返回“false”值。

显示提示对话框的prompt( )方法 prompt( )方法的基本语法如下： result=window.prompt(prompt content, default content); prompt( )方法有两个参数，第一个是提示文本prompt content;第二个是放置在文本框中的默认提示文本default content ，通常可以省略第二个参数

第4章变量、数据类型和表达式

4.1 变量的概念 • 变量使用var关键字进行变量的声明： var x;

变量初始化 • 在声明的时候可以同时对变量进行初始化： var y=4; • 如果使用同时声明多个变量的时候，可以使用逗号将多个变量隔开： var x,y=5,z='hello'; • 变量在不同时刻可以被赋予不同的值； • 使用没有声明的变量将出现错误。

4.1.2 变量的命名 • 变量是一种标识符； • JavaScript有3种标识符：变量、函数和标签。 • 标识符区分大小写。 • 创建合法的变量必须满足几个规则： • 第一个字符是ASCII字母（大小写皆可），或者是下划线。但是不可以是数字。 • 变量必须由字母、数字和下划线组成。 • 变量不可以是保留字。

4.1.3 变量的作用域 • 变量的作用域：变量发生作用的范围，变量在声明后，只在自己的作用域中有效，在作用域外使用变量将导致编译器报错。 • 例：var x; function FirstFunction() { var y; } x=y;//错误，在变量y的作用域外使用变量y

4.2 数据类型 4.2.1 数据类型 • 字符串、数值和布尔型是JavaScript 的三种基本数据类型 • 数组和对象是复合数据类型。

4.2.2 字符串型 • 一个字符串值是排在一起的一串字母、数字和标点符号，简单的说字符串就是文本。 • 字符串中的字母、数字和标点符号放在一对匹配的单引号或双引号中。 • 例： var x='Welcome to China.' var y="Welcome to China——2008."

字符串中可以包含单引号，该单引号两边需加双引号，字符串中也可以包含双引号，该双引号两边需加单号。字符串中可以包含单引号，该单引号两边需加双引号，字符串中也可以包含双引号，该双引号两边需加单号。 • 例：var x= " 'Welcome to China. ' " var y=' "Welcome to China——2008. " ‘ • 如果要输出特殊字符，需使用转义字符

4.2.3 数值型 • JavaScript的数值型分整数型和浮点型两种。 • 整数型是不带小数点的，可以是10 进制数、8 进制数或16进制数。 • JavaScript有三个特殊的数值：正无穷大、负无穷大和NaN（不是数）

4.2.4 布尔型 布尔数据类型表示一个状态的有效性，只有两个值 • true：布尔类型变量的值为true说明该状态是成立的（真） • false：值为false说明该状态是不成立的（假）。 • 例：y=(x==2009);

两种特殊的数据类型 • 第一种是null，null的意思是空值或者是不存在的值。 • 另一种是undefined，undefined类型的变量是没有被赋值或者无法被赋值的。

4.2.5 数组 • 数组代表了一组被排列的变量，这些变量被称作元素。 • 数组中单个元素的定位是从0开始的，这是数组的一个特性。 • 由于数组中的元素是相互独立的，意味着相同数组中的不同元素可以拥有不同的数据类型。

数组的初始化 • 声明数组的时候，用一列在方括号内被逗号隔开的值表示： var fisrtArray=[524,65,14.2,”forteen”,NULL,TURE]; • 先定义一个空的数组，以后再赋值： var array=[ ]; array[3]="This is the last element in the array"; • JavaScript中，数组属于Array对象，也可这样声明 var arr=new Array();

4.3 数据类型转换 • 当改变存储在变量中的值时，可能会自动产生数据类型的转换，这种操作的好处是能将变量作为另一类型处理。 • 例： var x="15"; //x是字符串型变量 x=15; //自动将x转换为数值型变量

4.4 表达式和运算符 4.4.1 表达式 • 表达式是解释器能够对变量进行计算的式子，表达式主要由任何合法类型的变量和运算符组成。 • 例： var x=4; x=x+4; var y=x; y=y+6;

JavaScript 程序设计