第1章(2)_js语言基础剖析

《第1章(2)_js语言基础剖析》由会员分享，可在线阅读，更多相关《第1章(2)_js语言基础剖析（85页珍藏版）》请在金锄头文库上搜索。

1、JavaScript语言,JavaScript语言,1 JavaScript概述 2 JavaScript语言基础 3 JavaScript程序流程控制语句 4 JavaScript函数和事件处理程序 5 HTML文档对象模型 6 JavaScript内置的常用对象 7 用JavaScript脚本对HTML数据的验证,1 JavaScript概述,JavaScript 的起源和发展 1995年Netscape & Sun联合推出 JavaScript语言的前身叫作LiveScript 90年代末ECMA发布语言标准ECMA-262 ISO接受了该标准并命名为ISO-16262 JavaScri

2、pt分为三部分：核心、客户端、服务器端 本课程主要介绍客户端JavaScript。,JavaScript 的特点: 基于对象的语言：预定义对象、自定义对象 事件驱动的语言：事件响应程序 简单性：在浏览器中解释执行 动态性：直接对用户输入作出相应 跨平台性：只依赖浏览器 安全性：沙箱机制 节省交互时间：在客户端执行，无需流量,1 JavaScript概述,2 JavaScript语言基础,数据类型 基本数据类型 数值型 String字符串类型 布尔类型 复合数据类型 对象 数组,2 JavaScript语言基础,常量 数值型常量：10进制、8进制(0开头)、16进制(0x开头) 布尔常量：Tur

3、e, False 字符型常量：单引号或双引号括起来的单个字符或多个字符 特殊字符：null、控制字符（b, n, r 等）,2 JavaScript语言基础,变量 变量声明 在JavaScript中，变量声明的一般形式是： var ； 变量类型的动态变化 在声明变量时不需要也不能指定变量的类型。JavaScript解释器会根据变量的当前值以及变量的使用方法确定变量的数据类型，并完成适当的转换。,2 JavaScript语言基础,变量命名 必须遵循以下规则： a. 第一个字符必须是一个字母、或一个下划线( _ )或一个美元符号($)。 b. 后续的字符可以是字母、数值、下划线或美元符；不能有空格

4、、，或其它符号。 c. 不能使用JavaScript中的关键字作为变量。在JavaScript中定义了50多个关键字，这些关键字是JavaScript内部使用的，不能作为变量的名称。如var、int、double、true不能作为变量的名称。 变量的作用域 变量的作用域由声明变量的位置决定，决定哪些脚本语句可访问该变量。,2 JavaScript语言基础,运算符 算术运算符 双目运算符：+ 、-、 *、 /、 % 单目运算符：-、+、- 关系运算符：、=、=、!= 逻辑运算符：&、|、! 字符串连接运算符：+ 条件运算符：条件? 值1: 值2 表达式：算数、字符串、逻辑、赋值,2 JavaSc

5、ript语言基础,数组 Var array_name = new Array( ); 创建了一个名为array_name的空数组。 Var array_name = new Array(100); 创建了一个名为array_name、可以存放100个元素的数组。 Var array_name = new Array(“red“,“blue“,“green“,1,2,3); 创建了一个名为array_name、有6个元素的数组，各元素的值依此是“red“,“blue“, “green“, 1, 2, 3。,2 JavaScript语言基础,【例】创建和使用数组的范例，文件名为ex3_1.htm。

6、 编写JavaScript脚本 var week = new Array(7); /创建数组，共有7个单元，下标为06 week1=“Monday“; /将数组的1号单元赋值为“Monday“ document.write(“today is “+week1); /输出数组的1号单元的值 ,3 JavaScript程序流程控制语句,条件控制语句 1if语句 最简单的条件控制语句是假如某条件为真那么程序转 向一个特定的程序分支。其基本的语法格式如下： if (条件) 执行语句 ,3 JavaScript程序流程控制语句,2ifelse语句 在if结构中，当条件为false时不进行任何特殊处理。但

7、是假如处理必须二选一，就需要使用if.else语句。其基本语法格式如下： if (条件) 执行语句1 else 执行语句2 ,3 JavaScript程序流程控制语句,3. switch语句 switch (表达式) case 常量1: 语句组1 break； case常量2: 语句组2 break； . case常量n: 语句组n break； default: 语句组n+1 ,3 JavaScript程序流程控制语句,循环控制语句 1. for循环控制语句 for (初始化部分；条件部分；更新部分) 执行部分 2. forin循环控制语句 for(属性或数组下标 in 对象或数组) 执行部

8、分 ,3 JavaScript程序流程控制语句,3. while循环控制语句 while (条件) 执行语句 4. dowhile循环控制语句 do 执行语句 while(条件),4 JavaScript函数和事件处理程序,JavaScript函数定义 function 函数名（参数表） 语句组 return 结果 【例】编写一个网页文件ex3_8.htm，使用JavaScript定义一个函数用于计算两个整数的和。, 计算两个整数的和 ,4 JavaScript函数和事件处理程序,JavaScript事件处理程序 浏览器为了响应某个事件而进行的处理过程，叫做事件处理。 浏览器在程序运行的大部分

9、时间都等待交互事件的发生，并在事件发生时，自动调用事件处理程序，完成事件处理过程。 设置一个对象使其在某个事件发生时便执行指定的函数，需要遵循指定的语法格式。格式如下： on事件名=“事件处理代码“,4 JavaScript函数和事件处理程序,JavaScript中常见的事件,4 JavaScript函数和事件处理程序,【例】当浏览器中文档的主体部分被单击时，会产生click事件。请编写一个网页文件ex3_9.htm，使得用户单击浏览器窗口中的文档时，显示一个消息框。, 事件响应实例 请单击一下 ,5 HTML文档对象模型,JavaScript语言是基于对象的，而不是面向对象的。 之所以说它是

10、一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。,5 HTML文档对象模型,创建对象使用如下格式： Newobject=new Object(参数表) 例如，创建一个日期新对象： newDate=new Date(); 或 birthday=new Date(December 12,2006); 之后就可使newDate或birthday作为一个新的日期对象了。,5 HTML文档对象模型,HTML文档对象模型 文档对象模型(DOM)就是所有对象组成的总体，是一种为了命名所有的对象而建

11、立的命名系统。该命名系统建立在对象层次的基础之上。,5 HTML文档对象模型,5 HTML文档对象模型,window对象,history对象,location对象,document对象,window.status属性,5 HTML文档对象模型,1. window对象 window对象是最顶级的对象，它是其他对象的父对象。这种对象代表HTML文档在浏览器窗口的内容区域。在多重框架环境下，每个框架都是一个窗口。所有的动作都是在窗口内发生的，窗口是对象层次中最外部的元素，它的物理界限包含文档。,5 HTML文档对象模型,（1）window对象的常用属性及功能如下： document表示窗口中显示的当

12、前文档 history表示最近访问过的URL列表 location表示窗口中显示的当前URL status表示窗口状态栏中显示的信息,5 HTML文档对象模型,（2）window对象的常用方法及功能如下： alert()它是一个弹出对话框，用以提示用户某些注意事项。 confirm()它是一个消息框，有两个按钮“确认”和“取消”，单击确认返回true，单击取消，返回false，利用返回值可以作进一步的工作。 prompt()这是一个消息框，不过该消息框允许用户输入某种信息。该信息被当作prompt()的结果返回。 open()该方法打开一个新的浏览器窗口，原窗口不变。新打开的窗口可以定义大小、

13、有无工具栏、有无状态栏、有无地址栏、可否改变尺寸、有无滚动条。 close()关闭当前浏览的窗口。有些浏览器不支持此方法。 blur()从窗口中移走焦点。在很多系统中，该操作把窗口送往后台。 focus()使窗口获得焦点。在很多系统中，该操作把窗口送往前台。,5 HTML文档对象模型,【例】编写一个网页文件ex3_10.htm。当打开该网页时，在浏览器窗口的状态栏中从右到左滚动显示文字：“欢迎光临本购物网站”。, WINDOW范例 这里是购物网站，欢迎您的光临! msg.length) pos=0; setInterval(“scrollMsg()“,300); /定时执行函数 / ,5 HT

14、ML文档对象模型,2. document对象 窗口内的内容是document，因此它是最主要的对象之一。每个载入窗口中的HTML文档成为一个document对象。document对象几乎包含了模型中最多的其他类对象。可以这样认为：文档包括了用户想要编辑的全部内容。,document对象的常用属性及功能如下：,bgColor页面的背景色 fgColor页面的前景色，即文本的颜色l linkColor超文本链接的颜色 alinkColor鼠标指向的超链接文本的颜色 vlinkColor已经单击过的超链接文本的颜色 lastModified此页面 (HTML 文件) 最后被修改的时间 forms表单

15、(form)对象组成的数组，数组中的每一个元素对应于网页中的每一个标记，数组元素对应的顺序是在 HTML 文件代码中标记出现的先后顺序。 links超文本链接对象组成的数组，数组中的每一个元素对应于网页中的每一个标记，数组元素对应的顺序是在HTML文件代码中标记出现的先后顺序。 title当前页面的标题,5 HTML文档对象模型,document对象的常用方法 document对象最常用的方法为write()，表示在文档中写内容。 使用时的格式为： document.write(参数1，参数2，参数n),5 HTML文档对象模型,【例】编写一个网页文件ex3_11.htm。要求单击页面时可以显

16、示一个输入提示框，让用户输入一种颜色值；然后，将其设置为网页的背景色。, DOCUMENT范例 这里是购物网站，欢迎您的光临! ,5 HTML文档对象模型,3 form对象 form对象封装了标签定义的表单中的相关信息，主要用于收集用户的数据信息。用户在网页中看不见表单在何处开始和结束，只能看到它们的元素。但是表单在一个HTML文档中是很特殊的一组内容，在标记对中所有的内容都是form对象的一部分。如果是设计需要，一个文档可以包含不止一对标记。,5 HTML文档对象模型,它的几个数值属性基本是和HTML的标签中的属性相对应，有type、name、action、method、encoding、target等。 除了上面和HTML标签相对应的属性外，还有两个属性是和表单内的元素有关的，一个是elements，它是一个数组，数组中的每一个元素都是由定义的一个对象；另一个是length，它是elements数组的元素的个数。,5 H