javascript n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
JavaScript 程序设计 PowerPoint Presentation
Download Presentation
JavaScript 程序设计

Loading in 2 Seconds...

play fullscreen
1 / 153

JavaScript 程序设计 - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

JavaScript 程序设计. 第1章 JavaScript 语言概论. 1.1 JavaScript 语言概况 1.2 在 Web 页面中使用 JavaScript 1.3 编写 JavaScript 的工具 1.4 第一个 JavaScript 程序. 1.1.1 JavaScript 语言.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'JavaScript 程序设计' - boris-pena


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide3
1.1 JavaScript语言概况
  • 1.2 在Web页面中使用JavaScript
  • 1.3 编写JavaScript的工具
  • 1.4 第一个JavaScript程序
1 1 1 javascript
1.1.1 JavaScript语言

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

1 1 2 javascript
1.1.2 JavaScript可以做什么
  • 制作网页特效
    • 例如:光标动画、信息提示、动态广告面板、检测鼠标行为等。
  • 提升使用性能
    • 越是复杂的代码,越要耗费系统资源来执行它,因为大部分的JavaScript程序代码都在客户端执行,操作时完全不用服务器操心,这样,网页服务器就可以将资源用在提供客户端更多更好的服务上。
  • 窗口动态操作
    • 利用JavaScript,可以很自由地设计网页窗口的大小、窗口的打开与关闭等,甚至也可以在不同窗口文件中互相传递参数。
1 1 3 javascript java
1.1.3 JavaScript 和Java的比较
  • 基于对象和面向对象
    • Java 是一种真正的面向对象的语言,即使是开发简单的程序,也必须设计对象。 JavaScript 是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。
  • 解释和编译
    • Java的源代码在传递到客户端执行之前,必须经过编译, JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户端由浏览器解释执行。
slide7
强变量和弱变量。
    • Java采用强类型变量,即所有变量在编译之前必须作声明。 JavaScript中变量声明,采用弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型,。
  • 代码格式不一样。
  • 嵌入方式不一样。
    • JavaScript 使用<Script>和</Script>来标识,而Java使用<applet>和</applet>来标识。
1 1 4 javascript
1.1.4 JavaScript的执行平台
  • Navigator
  • IE
  • 几乎所有的浏览器
1 2 web javascript
1.2 在Web页面中使用JavaScript
  • JavaScript是内嵌在HTML中被执行的
  • 在HTML中通过标记<SCRIPT>……</SCRIPT>引入JavaScript代码,当浏览器读取到<SCRIPT>标记时,就解释执行其中的脚本。
javascript1
链接JavaScript文件
  • 如果脚本程序较长或者同一段脚本可以在若干个Web页中使用,则可以将脚本放在单独的一个.js文件里,然后链接到需要它的HTML文件,这相当于将其中的脚本填入链接处。
  • 要引用外部脚本文件,使用<SCRIPT>标记的SRC属性来指定外部脚本文件的URL。
1 3 javascript
1.3 编写JavaScript的工具
  • 使用纯文本编辑器
  • 使用专业化脚本编辑工具 ,如Frontpage、Dreamweaver等。
  • 使用Microsoft脚本编辑器 ,FrontPage 。
1 4 javascript
1.4 第一个JavaScript程序

1.4.1 关于<SCRIPT>标签

  • HTML文档中组成Javascript程序的语句包含在<SCRIPT> …</SCRIPT>标签对中
  • <SCRIPT>标签用来通知Web浏览器随后的指令由脚本引擎来解释。<SCRIPT>标签的LANGUAGE属性告诉浏览器使用的是哪种脚本语言和脚本语言的版本。
1 4 2 javascript
1.4.2 创建JavaScript源代码文件
  • JavaScript源代码文件通常使用.js扩展文件名命名,其中仅包含有JavaScript语句,它不包含HTML中的<SCRIRT>……</SCRIRT>标签对。
  • <SCRIRT>……</SCRIRT>标签对位于HTML文档中调用源代码文件的位置。
1 4 3 javascript
1.4.3 为JavaScript程序添加注释
  • JavaScript支持两种类型的注释:行注释和块注释。
  • 行注释是通过在想要用作注释的文本前加上“//”符号来创建。
  • 块注释可以跨越多行,通过在块中第一行前添加“/*”创建,在块中文本的最后加入“*/”来表示结束注释,那么位于“/*”和“*/”之间的部份将被JavaScript解释器忽略。
1 4 4 javascript
1.4.4 在不兼容的创览器中隐藏 JavaScript代码
  • 创建JavaScript源代码文件可以在不兼容的浏览器中把JavaScript代码隐藏起来。为了在不兼容的浏览器中隐藏嵌入的JavaScript代码,就需要把<SCRIPT>……</SCRIPT>标签对置于一个HTML注释块中。
  • HTML注释以<!--开始,以-->结束。所有位于注释起始标签和结束标签之间的文本都不会被浏览器提交。
1 4 5 head body javascript
1.4.5 在<HEAD>或<BODY>段放置JavaScript
  • JavaScript可以置于这两段中或者两段之间。
  • 当把JavaScript代码放在<HEAD>段中时,它会在被显示的HTML文档主体之前处理。
  • 如果JavaScript代码用于完成所需的后台任务,最好将代码置于<HEAD>段中,如果用于显示内容,就置于<BODY>中。
slide19
2.1 JavaScript代码的编写和执行
  • 2.2 语法规则
  • 2.3 动态生成页面内容
2 1 javascript
2.1 JavaScript代码的编写和执行
  • JavaScript是一种脚本语言,脚本语言是指在Web浏览器内由解释解释执行的编程语言。
  • 每次执行的时候解释器都会把程序代码翻译成可执行的格式。
slide21
2.2 语法规则

2.2.1 大小写

  • JavaScript是大小写敏感的,这意味着大写字母同相应的小写字母是不同的。
  • 适用于该语言的各个方面,包括关键字、运算符、变量名、事件处理器、对象属性等;
  • 所有的关键字都要小写,如if,不能键入IF;
  • 使用“驼峰”命名的传统,许多方法和属性使用混合大小写。
2 2 2
2.2.2 代码书写格式
  • 将JavaScript的程序代码放在<SCRIPT>…</SCRIPT>对中。

<script>

document.write(“Hello world!!!”);

</script>

  • 在<SCRIPT>标记中加上Language属性,指定使用哪一种语言。

<script language=“JavaScript”>

document.write(“Hello world!!!”);

</script>

slide23
在标记Language属性外再进一步指明JavaScript的版本号。

<script language=“JavaScript1.2” >

document.write(“Hello world!!!”);

</script>

  • 可以将可能重复使用的程序代码独立成一个外部文件,只要以.js为扩展名,利用SRC属性就可以将该文件的内容include进来。
slide24
为了避免客户端使用比较旧的浏览器,可以将所有的程序代码用HTML的注释标记括起来

<script language=“JavaScript”>

<!--以下程序隐藏起来,让旧的浏览器视而不见

document.write(“Hello world!!!”);

//程序代码隐藏到此为止-->

</script>

2 2 4
2.2.4 分号和语句结束符
  • JavaScript语句以分号“ ;”作为结束符 。
slide27
2.3 动态生成页面内容

2.3.1 字符串及其拼接方法

  • 所谓的“字符串常量”是由一些包含在单引号或双引号内的字符所构成的。
  • 转义字符
2 3 2 document write writeln
2.3.2 document对象write()和writeln()方法
  • JavaScript的信息输出方法:window.alert()、document.write()和document.writeln()
  • document是JavaScript中的一个对象,在它里面封装了许多很多有用的方法,write()和writeln()是用于将文本信息直接输出到浏览器窗口中的方法。
slide31
3.1 消息对话框
  • 一种特殊的窗口,在用户进行触发操作后自动弹出,起到提醒、警告或确认的作用。
  • 作用:在浏览网页时对用户进行提示,警告某种操作可能造成的后果或确认是否进行某项操作。
javascript3
JavaScript支持的消息对话框
  • 警告对话框
  • 确认对话框
  • 提示对话框
alert
显示警告对话框的alert()方法

alert( )方法的标准语法是:

window. alert("content");

或者简化为:

alert("content");

“content”为警告对话框中显示的文本内容,它的变量类型是字符类型。

confirm
显示确认消息框的confirm()方法

confirm( )方法的标准语法是:

window.confirm("content");

或者简化为:

confirm("content");

“content”是提示对话框的显示文本。

confirm( )方法返回一个布尔型的值,当用户点击“确认”时返回“true”值,否则返回“false”值。

prompt
显示提示对话框的prompt( )方法

prompt( )方法的基本语法如下:

result=window.prompt(prompt content,

default content);

prompt( )方法有两个参数,第一个是提示文本prompt content;第二个是放置在文本框中的默认提示文本default content ,通常可以省略第二个参数

slide37
4.1 变量的概念
  • 变量使用var关键字进行变量的声明:

var x;

slide38
变量初始化
  • 在声明的时候可以同时对变量进行初始化:

var y=4;

  • 如果使用同时声明多个变量的时候,可以使用逗号将多个变量隔开:

var x,y=5,z='hello';

  • 变量在不同时刻可以被赋予不同的值;
  • 使用没有声明的变量将出现错误。
4 1 2
4.1.2 变量的命名
  • 变量是一种标识符;
  • JavaScript有3种标识符:变量、函数和标签。
  • 标识符区分大小写。
  • 创建合法的变量必须满足几个规则:
    • 第一个字符是ASCII字母(大小写皆可),或者是下划线。但是不可以是数字。
    • 变量必须由字母、数字和下划线组成。
    • 变量不可以是保留字。
4 1 3
4.1.3 变量的作用域
  • 变量的作用域:变量发生作用的范围,变量在声明后,只在自己的作用域中有效,在作用域外使用变量将导致编译器报错。
  • 例:var x;

function FirstFunction()

{

var y;

}

x=y;//错误,在变量y的作用域外使用变量y

slide41
4.2 数据类型

4.2.1 数据类型

  • 字符串、数值和布尔型是JavaScript 的三种基本数据类型
  • 数组和对象是复合数据类型。
4 2 2
4.2.2 字符串型
  • 一个字符串值是排在一起的一串字母、数字和标点符号,简单的说字符串就是文本。
  • 字符串中的字母、数字和标点符号放在一对匹配的单引号或双引号中。
  • 例:

var x='Welcome to China.'

var y="Welcome to China——2008."

slide43
字符串中可以包含单引号,该单引号两边需加双引号,字符串中也可以包含双引号,该双引号两边需加单号。字符串中可以包含单引号,该单引号两边需加双引号,字符串中也可以包含双引号,该双引号两边需加单号。
  • 例:var x= " 'Welcome to China. ' "

var y=' "Welcome to China——2008. " ‘

  • 如果要输出特殊字符,需使用转义字符
4 2 3
4.2.3 数值型
  • JavaScript的数值型分整数型和浮点型两种。
  • 整数型是不带小数点的,可以是10 进制数、8 进制数或16进制数。
  • JavaScript有三个特殊的数值 :正无穷大、负无穷大和NaN(不是数)
4 2 4
4.2.4 布尔型

布尔数据类型表示一个状态的有效性,只有两个值

  • true:布尔类型变量的值为true说明该状态是成立的(真)
  • false:值为false说明该状态是不成立的(假)。
  • 例:y=(x==2009);
slide46
两种特殊的数据类型
  • 第一种是null,null的意思是空值或者是不存在的值。
  • 另一种是undefined,undefined类型的变量是没有被赋值或者无法被赋值的。
4 2 5
4.2.5 数组
  • 数组代表了一组被排列的变量,这些变量被称作元素。
  • 数组中单个元素的定位是从0开始的,这是数组的一个特性。
  • 由于数组中的元素是相互独立的,意味着相同数组中的不同元素可以拥有不同的数据类型。
slide48
数组的初始化
  • 声明数组的时候,用一列在方括号内被逗号隔开的值表示 :

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();

slide49
4.3 数据类型转换
  • 当改变存储在变量中的值时,可能会自动产生数据类型的转换,这种操作的好处是能将变量作为另一类型处理 。
  • 例:

var x="15"; //x是字符串型变量

x=15; //自动将x转换为数值型变量

slide50
4.4 表达式和运算符

4.4.1 表达式

  • 表达式是解释器能够对变量进行计算的式子,表达式主要由任何合法类型的变量和运算符组成。
  • 例:

var x=4;

x=x+4;

var y=x;

y=y+6;

slide51
分号代表一个语句的结束;
  • 使用分号可以在同一行中包括多个语句;

var x=4; x=x+4; var y=x; y=y+6;

  • 有些时候,分号可以省略

var x=4

x=x+4

var y=x

y=y+6

4 4 2
4.4.2 算术运算符和赋值运算符
  • JavaScript支持所有数学中的算术运算符,加(+)、减(-)、乘(*)、除(/)、%^(模运算符)、++(递加运算符)、--(递减运算符)。
  • 当“+”两边的变量是字符串时, “+”做连接操作, “+”也允许连接变量和字符串。
slide53
赋值运算符“=”的作用是将某个值赋给一个变量。赋值运算符“=”的作用是将某个值赋给一个变量。
  • 赋值时可以一对一,也可以一次赋值多个;
  • 例:var x=“welcome”;

var a=b=c=7;

slide56
条件运算符是JavaScript中唯一的一个三元运算符。条件运算符用符号”? ;”表示,使用方法为:

a?b:c

a,b和c是三个表达式。当表达式a成立的时候,取表达式b的值,否则取表达式c的值。

4 4 5
4.4.5 其他运算符
  • 逗号运算符
    • 将多个语句捆绑在一起按照一个语句的执行方式执行;
    • 使用逗号运算符捆绑在一起的语句返回最后一个语句的值。
slide58
typeof运算符
    • 返回一个表达式的数据类型的字符串;
    • 有6种可能的返回值,“number”、“string”、 “boolean ”、 “object ”、 “function”、“undefined”。
slide59
空运算符 void
    • 定义了没有任何返回值的表达式。
    • 使用最多的地方是在使用超链接时,为了避免加载无效的页面并且不希望超链接文本被单击时不产生任何操作,可利用如下空运算符

<a href=“javascript:void(alert(‘本链接无效!’))”>超链接</a>

slide61
5.1 条件控制语句
  • JavaScript使用控制语句控制程序的执行顺序。使之能够不按照编写的先后顺序执行。
  • JavaScript支持两种控制语句,分别是:

1、条件控制语句

2、循环控制语句。

slide62
条件控制语句
  • 条件控制语句使用逻辑方式判断语句的执行顺序,判断条件通常是一个表达式,如果表达式的值为“真”,将采用一种执行方式,如果表达式的值为“假”,将采用另外一种不同的执行方式。
  • JavaScript支持三种条件控制语句,分别是if语句、if…else语句和switch语句。
5 1 1 if
5.1.1 if语句
  • If语句是一种单一选择的语句,基本的语法规则如下:

if (expression)

Statement;

expression是一个条件表达式,这个表达式如果成立将返回结果“true”,否则将返回结果“false”。但是,当且仅当expression返回“true”时,代码Statement才会被执行。否则Statement将不会被执行。

slide64
如果需要执行多行代码,可以使用块:

if (expression)

Statement1;

Statement2;

5 1 2 if else
5.1.2 if...else语句
  • if ...else语句是两重选择语句,基本语法规则如下:

if (condition)

statement1;

else

statement2;

当if中的条件满足时,将执行statement1,否则将执行statement2。也就是说,在statement1和statement2中,必然有一个会被执行,并且只有一个能够被执行。

slide66
将Statement1和Statement2放在大括号内是一个好习惯,可以使程序结构清晰,有较高的可读性。将Statement1和Statement2放在大括号内是一个好习惯,可以使程序结构清晰,有较高的可读性。

if (condition)

{statement1;}

else

{statement2;}

5 1 3 switch
5.1.3 switch语句
  • switch语句的语法结构是定义一个条件表达式,然后一个个地检查是否能够找到匹配值。如果无法找到匹配值,就执行default条件。

switch (expression)

{

case condition 1: statement 1; break;

case condition 2: statement 2; break;

...

case condition n-1: statement n-1; break;

default: statement n;

}

5 1 4
5.1.4 条件运算符
  • 条件运算符有时也可以作为条件控制语句出现

var x=45;

alert(x%2==0?”x是一个偶数”:”x是一个奇数”)

slide69
5.2 循环语句
  • 循环控制语句的出现是为了能多次执行某些语句。
  • 在使用循环控制语句时,对循环条件的控制和对循环次数的控制是两个十分重要的要素。
  • JavaScript支持四种循环控制语句,while语句、do…while语句、for语句、for……in语句。
5 2 1 while
5.2.1 while语句
  • while语句的基本语法为:

while(expression)

{

statement(s);

}

expression是一个表达式,只要表达式的值为true,则将反复执行大括号中的内容,直到expression的值为false为止。

5 2 2 do while
5.2.2 do...while语句
  • do…while语句和while语句的功能是类似的,除了while语句对执行条件的核查是在执行循环语句前,do…while语句对执行条件的核查是在执行了循环语句后。
  • do…while语句的基本语句结构如下:

do{

statement(s);

}

while(expression);

5 2 3 for
5.2.3 for语句
  • for语句的基本语句规则如下:

for(count;testCondition;updateOperation)

{

statement(s);

}

  • 例:var i=0,sum=0;

for(i=0;i<=5;i++)

sum=sum+i;

document.write(“the sum from 1 to 5

is:”+sum”);

slide73
5.3 与对象有关的语句

5.3.1 for...in语句

  • for…in语句是一种对象循环语句,用来对某个对象的不同属性进行循环。
  • for…in语句的基本语法结构如下:

for(properties in object)

{

statement(s);

}

var obj = new Object();

obj.name=“Kate”;

obj.sex=“男”;

for(prop in obj)

window.alert(obj[prop]);

5 3 2 with
5.3.2 with语句
  • with语句是一种简便地引用对象方法。当一个对象的多个属性同时被引用的时候,with语句可以避免多次输入对象名。
  • with语句的基本语法规则如下:

with(object)

{

statement(s);

}

5 3 2 with1
5.3.2 with语句

<body>        <script type="text/javascript">        <!—            with(document){              write("您好 !");              write("<br>这个文档的标题是 : \"" + title + "\".");              write("<br>这个文档的 URL 是: " + URL);              write("<br>现在不用每次都写 document 对象的前缀了 !");           }        // -->        </script>      </body>

slide76
5.4 循环控制

JavaScript有两种循环控制语句:

  • break语句
  • continue语句。
slide78
6.1 什么是函数
  • JavaScript的函数是结构化的可重用的代码块。
  • 函数的使用方式也是多种多样。
slide79
6.2 定义函数和使用函数
  • JavaScript 支持两种函数:一类是内部函数,另一类是自定义函数。
  • 定义函数最常用的方法是使用关键字function,关键字后是函数名、列在括号中的参数列表和使用大括号围起来的语句块。
  • 定义函数的基本语法结构如下:

function functionName(parameter1,parameter2,...parameterN)

{

statement(s);

}

slide80
函数参数
  • 函数参数用于给函数传递信息,参数被放在函数名称后面的圆括号中。
  • 函数参数不是函数的必选内容,某些函数根本不带任何参数,或者带一个或者多个参数,参数的个数取决于如何使用该函数。
  • 如果在调用一个需要参数的函数时没有传递参数,JavaScript使用空值代替。
slide81
内部函数
  • JavaScript本身定义了丰富的内部函数,充分地利用这些内部函数可以使编写脚本相对简单。
  • 两个例子:

eval( )函数 :可以对字符串形式表示的任意有效的JavaScript表达式求值;有一个参数,该参数就是想求值的字符串表达式。

toString( )函数:返回对象的字符串表示。

slide82
6.3 函数参数的传递
  • 参数是按值传递的,也就是说,当某个变量作为参数被传递给一个函数的时候,实际上函数得到的只是这个变量值的一个副本。
  • 当参数是复合数据类型即数组或者对象时,是传递参数的一个引用。
slide83
6.4 在多个位置调用函数
  • 在事件响应中调用函数

鼠标点击事件 onclick

网页加载事件 onload

  • 通过链接调用函数 href=“javascript:fun()”

文本超链接

图形超链接

slide84
6.5 函数中变量的作用域
  • 根据是否在函数体的内部,变量被分为全局变量和局部变量两种。
  • 全局变量是在整个文档中都是可见的。
  • 局部变量只在函数体内部可见。
slide85
函数的返回值
  • 如果需要得到函数的计算结果,最好的方法是使用返回值。
  • 返回值使用return语句实现。
slide86
6.6 递归函数
  • 递归是函数调用自身的一种形式。
  • 递归函数实际上也是一种特殊的循环,只是循环体不是一个变量,而是函数本身。
slide87
函数的嵌套
  • 这里函数的嵌套指的是在函数体内部定义函数。
  • 和局部变量具有相同的特点是,在嵌套函数外部调用内部函数,就会产生错误。
  • 当被嵌套的内部函数和外部函数相同是,就成为了函数嵌套的特殊形式——递归。
slide89
7.1 对象的基本概念
  • 对象是由数据和与该数据相关的操作组成的一个整体。
  • 其中,这些数据代表的是对象的属性,而该数据相关的操作是对象的方法。
7 1 1 javascript
7.1.1 JavaScript中的对象分类
  • 内部对象
    • 包括基本数据类型有关的对象、复合数据类型相关的对象和其他一些对象。
  • 文本对象
    • 文本(document)对象是文档对象模型(DOM)的一部分,利用文本对象生成结构化的HTML和XML文档,并控制级联样式表和实现动态DHTML。
  • 浏览器对象
    • 浏览器支持的对象,主要浏览器对象包括window和Navigator
  • 自定义对象
    • 用户定义的对象,用于完成用户特定的任务。
7 1 2
7.1.2 创建和删除对象
  • 使用new关键字可以创建一个对象。创建的对象的性质由new关键字后的特定对象类型决定的,例如String()创建一个String对象,Array()创建一个Array对象。
  • 当创建对象的时候,JavaScript解释器自动给对象分配内存空间,在删除对象后,解释器将自动将分配给被删除的对象收回。这种机制成为内存回收。
7 1 3
7.1.3 对象的属性和方法
  • JavaScript对象是属性和方法的集合。
  • 属性是一个或者一组值,是对象的成员之一,方法是对象的一个函数,也是对象的成员。
slide93
对象属性
  • 对象的属性使用跟在对象后面的标识符表示,对象和标识符之间用“.”分隔,下面是对象属性的标准表示规则:

object.property

    • object是对象名,property是属性名。
    • 在定义了一个对象后,可以动态地给对象添加属性。
slide94
对象方法
  • 对象的方法也通过跟在对象后面的标识符表示,对象和标识符之间用“.”分隔,不同的是,对象的方法名后面有一对括号。下面是对象属性的标准表示规则:

object.method();

  • object是对象名,method是方法名。
7 2 math
7.2 Math对象
  • Math对象具有一系列的常量和方法,能够实现比较复杂的算术运算逻辑。
  • Math对象是由解释器自动生成的,因此在使用的时候不需要首先生成实例,而是可以直接访问。
7 4 date
7.4 Date对象
  • Date对象提供了十分灵活的操作时间和日期的方法。
  • Date对象拥有一系列属性和方法,可以用来表示任意的日期和时间,获取系统当前时间或者获取两个时间的间隔。
  • Date对象是从1970 年1 月 1 日 00:00:00.000 GMT开始计时的,并且以毫秒为单位。GMT是格林威治标准时间。
slide100
Date对象的主要方法
  • 第一个Date对象的方法是Date对象构造器Date();
  • 不仅能够生成当前时刻的Date对象,还能生成过去或者未来时刻的Date对象。
  • getDay()和setDay()方法将星期数用0到6的整数形式表示。
slide101
另一个重要的方法Date.parse()方法;
  • 将各种日期类型的Date对象转换为该日期与1970年1月1日00:00:00之间所间隔的毫秒数。
7 4 number
7.4 Number对象
  • Number对象是提供基本数据类型中数值型的JavaScript内置对象,Number对象还提供数值型常数。
  • 需要注意是,浮点类型的对象是要求介于±5×10-324和±1.7976×10308之间的。
  • 构造Number对象的方法
    • 构造一个空的Number对象。不为其指定值;
    • 构造Number对象的时候赋给初始值。
7 5 string
7.5 String对象
  • String对象是提供基本数据类型中字符串型的JavaScript内置对象。String对象提供的方法十分丰富。
  • 构造String对象的方法
    • 构造一个空的String对象。不为其指定值;
    • 构造String对象的时候赋给初始值。
  • String对象的惟一属性是长度属性,这个属性指出了String对象代表的字符串的长度 。
7 6 array
7.6 Array对象
  • 当创建一个数组时,实际上创建了一个Array对象。
  • 定义一个Array对象的方法
    • var firstArray=new Array();

firstArray[3] =[“red”,”green”,”blue”];

    • var secondArray=new Array (“white”,”black”,”yellow”,”orange”);
    • var thirdArray=new Array(3);

thirdArray[0]= “red”;

thirdArray[1]=“green”;

thirdArray[2]=“blue”;

array
Array对象的常用属性和方法
  • Array对象一个非常重要的属性length是其长度属性。
  • Array对象的长度属性返回数组中现有的元素个数。
  • 由于Array对象索引值从0开始的缘故,长度属性返回的值也是Array对象下一次动态增加元素的索引值。
slide112
例 var week=[“Sunday”,“Monday”,“Tuesday”,“Wednesday”,“Thursday”,“Friday”,“Saturday”];

alert(week.length);

  • 当动态地增加或删除数组中的元素时,数组的长度属性也会相应的变化。
slide114
第8章 文档对象模型和事件驱动
  • 8.1 文档对象模型
  • 8.2 事件驱动
  • 8.3 处理事件
  • 8.4 使用事件(Event)对象
8 1 1
8.1.1 文档对象模型
  • 文档对象DOM是指在网页文档里划分出来的对象。
  • 在JavaScript能够涉及的范围内有如下对象:window、document、location、navigator、screen、history。
  • 要引用某个对象,就要把父级的对象都列出来。
slide116

anchor

button

applet

checkbox

document

area

fileUpload

embed

hidden

form

option

event

image

password

window

frame

link

radio

history

reset

location

image

submit

navigator

text

link

screen

textarea

文档对象模型

8 1 2
8.1.2 引用文档对象模型中的对象
  • 在文档对象模型的层次结构中,所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性,所以引用子对象的方式,与引用对象的一般属性是相同的。
  • 例如引用document对象,使用以下的类似格式:window.document.write("Hello");
slide118
浏览器对象的分层结构

location

地址对象

window

窗口对象

http://www.google.com

浏览器对象的分层结构

document

文档对象

window.document.myform.text1

FORM

表单对象

8 2 1
8.2.1 事件驱动的基本概念
  • 通常鼠标或热键的动作我们称之为事件(Event);
  • 由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver);
  • 对事件进行处理的程序或函数,称为事件处理程序(Event Handler)
slide123
如果HTML标记或程序为某个对象设置了事件处理程序,系统会自动捕捉发生在此对象上的这种事件,并触发所定义的事件处理程序。如果HTML标记或程序为某个对象设置了事件处理程序,系统会自动捕捉发生在此对象上的这种事件,并触发所定义的事件处理程序。
8 3 1
8.3.1 使用事件的方法
  • 前面所提到的二十多种事件,每一种事件都有一个专用的事件处理过程定义方式——在前面加上on就是了。
  • 例如:事件Load的事件处理程序就是onLoad;同样地,事件Click的事件处理程序就是onClick。
slide125
常见的事件处理方法
  • 单击事件onClick
  • onChange改变事件
  • 载入文件onLoad
  • 错误处理onError
  • onMouseOver和onMouseOut
slide126
第9章 窗口、文档和表单对象
  • 9.1 窗口(Window)对象
  • 9.2 文档(document)对象
  • 9.3 表单(form)对象
9 1 window
9.1 窗口(Window)对象

9.1.1 window对象的属性和方法

  • Window对象处于对象层次的顶端,提供了处理浏览器窗口的方法和属性;
  • Window对象的使用,主要集中在四个方面:
    • 窗口的打开和关闭;
    • 窗口状态的设置;
    • 定时执行程序;
    • 各种对话框的使用。
9 1 2
9.1.2 打开和关闭窗口
  • 通过脚本可以打开新窗口,也可以关闭窗口。
  • 打开新窗口的语法如下:

open(URL,[窗口名称[,规格参数]])

    • 第一个参数是URL,这个部份可以是完整的网址(如:http://www.baidu.com/),代表打开该网址主页;也可以是相对路径表示的文件名称(如:login.htm),代表打开该文件。如果URL是一个空字符串,将新增一个空白窗口(没有任何内容)。
slide129
第二个参数是窗口名称,可以搭配HTML语法中的FORM及A标记下的TARGET属性来使用。
  • 第三个参数是由许多由逗号隔开的参数字符所组成,统称规格参数。用以制定新窗口的外观及属性。
9 1 3
9.1.3 使用定时器
  • 定时器可以指定在某一段特定时间后执行某段程序。在Internet的应用中,这是非常有用的。
9 1 4
9.1.4 页面跳转
  • 所谓的页面跳转,就是指从当前这一页面链接到另一个页面,在HTML文档中,可以通过脚本控制窗口显示特定的页面。

window.location.href="index.jsp"; 

window.history.back(-1);

window.navigate("index.jsp");

self.location.href=index.htm;

top.location=index.jsp;

slide132

在窗口状态栏中设置文本

  • <SCRIPT language="javascript">
  • function openwindow( )
  • { window.status="系统当前状态:您正在注册用户......";
  • if (window.screen.width == 1024 && window.screen.height == 768)
  • window.open("register.html");
  • else
  • window.alert("请设置分辨率为1024x768,然后再打开"); }
  • function closewindow( )
  • { if(window.confirm("您确认要退出系统吗?"))
  • window.close( );
  • }
  • </SCRIPT>
  • <INPUT type="button" name="regButton" value=" 用户注册 "
  • onclick="openwindow( )">
  • <INPUT type="button" name="exitButton" value=" 退 出 "
  • onclick="closewindow( )">

设置窗口的高度

使用open方法打开新窗口

弹出警告对话框

弹出确认对话框

关闭当前窗口

添加单击事件

因为window是最顶层的根,所以可以省略

window.open("google.htm");

可简写为:

open("google.htm");

close( )方法也是如此。

slide133

open(”打开窗口的url”,”窗口名”,”窗口特征”)open(”打开窗口的url”,”窗口名”,”窗口特征”)

窗口的特征如下,可以任意组合:

height: 窗口高度;

width: 窗口宽度;

top: 窗口距离屏幕上方的象素值;

left:窗口距离屏幕左侧的象素值;

toolbar: 是否显示工具栏,yes为显示;

menubar,scrollbars 表示菜单栏和滚动栏。

resizable: 是否允许改变窗口大小,yes或1为允许

location: 是否显示地址栏,yes或1为允许

status:是否显示状态栏内的信息,yes或1为允许;

通过open方法打开注册页面之后的效果

我们需要预先制作好注册页面,假设为register.html,打开注册窗口的语句如下

open("register.html", "注册窗口", "toolbars=0, location=0,

statusbars=0,menubars=0,width=700,height=550,scrollbars=1");

slide134

<SCRIPT language="javascript">

  • function openwindow( ) {
  • window.status="系统当前状态:您正在注册用户......";
  • if (window.screen.width == 1024 && window.screen.height == 768)
  • open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");
  • else
  • window.alert("请设置分辨率为1024x768,然后再打开"); }
  • function closewindow( )
  • {
  • if(window.confirm("您确认要退出系统吗?"))
  • window.close( );
  • }
  • </SCRIPT>
  • <INPUT type="button" name="regButton" value=" 用户注册 " onclick="openwindow( )">
  • <INPUT type="button" name="exitButton" value=" 退 出 " onclick="closewindow( )">

使用 Open 方法

打开注册新窗口

添加单击事件

slide135

<SCRIPT language="javascript">

  • function openwindow( )
  • {
  • window.status="系统当前状态:您正在注册用户......";
  • if (window.screen.width == 1024 && window.screen.height == 768)
  • open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1");
  • else
  • window.alert("请设置分辨率为1024x768,然后再打开");
  • }
  • function closewindow( )
  • { if(window.confirm("您确认要退出系统吗?"))
  • window.close( ); }
  • </SCRIPT>
  • <H3><A href="javascript: openwindow( ) ">用户注册 </A></H3>
  • <H3><A href="javascript: closewindow( ) ">退 出</A></H3>

使用超链接调用方法来打开注册新窗口

slide136

<HTML>

  • <HEAD>
  • <META http-equiv="Content-Type" content="text/html; charset=gb2312">
  • <SCRIPT language="JavaScript" >
  • function openwindow( )
  • {
  • open("adv.htm", "广告窗口", "toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=700, height=250");
  • }
  • </SCRIPT>
  • </HEAD>
  • <BODY onLoad="openwindow( )">
  • <H2>&nbsp;</H2>
  • </BODY>
  • </HTML>

窗口完成文档加载时触发打开广告窗口

slide137
练习

编写如左图所示,具有自动打开广告窗口和在浏览器状态栏中显示“欢迎你......”信息的页面。

广告窗口

状态栏信息

9 2 document
9.2 文档(document)对象
  • DOM是”Document Object Model”(文档对象模型)的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时,就会在幕后创建一个文档对象模型。
  • DOM表示被加载到浏览器窗口里的当前页面:浏览器向我们提供了当前页面的模型,而我们可以通过JavaScript访问这个模型。
  • DOM把一份文档表示为一棵树。
9 2 document1
9.2 文档(document)对象

9.2.1 document对象的树结构

根节点

根节点

的子节点

相邻节点

使用Document Object Model

有什么办法对HTML中的内容进行动态改变呢?

9 2 2 node
9.2.2 节点(node)
  • DOM文档是由节点构成的集合,此时的节点是文档树上的树枝或者树叶。
  • DOM中节点的类型:
    • 元素节点(element node),诸如<head>、<p>、<div>等。元素节点可以包含其它的元素,唯一没有被包含在其它元素里的元素是<html>,它是根元素。
    • 属性节点(attribute node),元素或多或少地有一些属性,属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里,所以属性节点总是被包含在元素节点中。
    • 文本节点(text node),<h1>元素中包含着文本节点“Trees, trees, everywhere”。
9 2 2 node1
9.2.2 节点(node)

访问指定节点

  • 可以通过document对象中含有的集合来访问某些特定类型的节点
9 2 2 node2
9.2.2 节点(node)
  • 在文档对象中,all是一个非常特殊的属性,通过它,可以访问文档中的所有HTML元素对象。
  • 使用all属性访问HTML元素的方法有三种,即使用索引、ID和HTML标记名。

使用all属性访问HTML元素:

slide144

<html>

  • <head>
  • <script type="text/javascript">
  • function changeLink()
  • { document.getElementById('myAnchor').innerHTML="搜狐" ;
  • document.getElementById('myAnchor').href="http://www.sohu.com" ; }
  • </script>
  • </head>
  • <body>
  • <a id="myAnchor" href="http://www.taobao.com">淘宝</a>
  • <input type="button" onclick="changeLink()" value="使用DOM改变链接">
  • </body>
  • </html>

定位链接元素(对象)

修改内容

修改属性

HTML文档的每个节点都是对象,类似

WinForm中的控件,都具备属性、方法和事件

9 3 form
9.3 表单(form)对象
  • 表单对象(Form)提供一个让客户端输入文字或进行选择的功能,例如:单选取按扭、复选框、选择列表等。
form elements
举例:Form和elements的引用

<body>

<form action="" method="get" onsubmit="show(this)">

姓名:<input name="username" type="text" /><br/>

密码:<input name="password" type="password" /><br/>

<input name="submit" type="submit" value="提交" />&nbsp;&nbsp;<input name="reset" type="reset" value="重置" />

</form>

<script type="text/javascript">

function show(form)

{

for(i=0;i<form.elements.length;i++)

document.write(form.elements[i].name+"="+form.elements[i].value+"<br/>");

}

</script>

</body>

slide150
举例:页面浏览效果

点击“提交”按钮后的页面

9 3 2
9.3.2 表单处理
  • 当用户单击了表单中的提交按扭之后,用户在表单中填写或选择的内容将被传送到服务器端特定的程序中,由该程序进行具体处理。虽然最终的表单处理通常都需要服务器端的支持,但还是有一些工作可以由客户端脚本来做,最典型的一个例子就是表单验证。
9 3 3
9.3.3 表单元素对象的属性、方法和事件
  • 表单可以有很多表单元素,从对象角度来说,这些元素其实是表单对象的子对象,故称之为表单元素对象。
  • 表单元素对象可以分为文本框(Text)、文本区(TextArea)、密码(Password)、按钮(Button)、重置按钮(Reset)、提交按钮(Submit)、单选框(Radio)、复选框(Checkbox)、列表(Select)、列表选项(Option)和隐藏(Hidden)对象等。
9 3 4
9.3.4 处理表单元素示例
  • 表单元素对象的引用,类似于引用表单的通用属性。
  • 假如有一个表单名为text1的的文本输入框,对这个文本输入框的引用方式如下:
  • document.myform. text1