第三讲 JavaScript脚本教学内容:
一、了解 JavaScript脚本的基本概念二,JavaScript脚本语法三,JavaScript的对象编程教学重点:
一、了解 JavaScript脚本的基本知识;
二、掌握在 ASP.NET中的 JavaScript脚本;
三、掌握在客户端运用 JavaScript脚本对象编程方法 。
第一部分 JavaScript脚本基础知识一,JavaScript简介
JavaScript是网景( Netscape)公司开发的一种基于客户端浏览器、面向(基于)
对象、事件驱动式的网页脚本语言。
JavaScript语言的前身叫作 Livescript.
JavaScript的编写环境:文本编辑器
JavaScript的执行平台,Web浏览器
JavaScript的执行方式:解释执行(由上而下) 。
二,JavaScript与 Java的区别体现在:
一,它们是两个公司开发的不同的两个产品
Java是 SUN公司推出的新一代面向对象的程序设计语言,特别适合于 Internet应用程序开发;而 JavaScript是 Netscape公司的产品,其目的是为了扩展 Netscape
Navigator功能而开发的一种可以嵌入 Web
页面中的基于对象和事件驱动的解释性语言二,JavaScript是基于对象的,而 Java是面向对象的即 Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。
JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
三、两种语言在其浏览器中所执行的方式不一样。
Java的源代码在传递到客户端执行之前,
必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。 JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,由浏览器解释执行。
JavaScript的格式:
JavaScript区分大小写 ;
JavaScript脚本程序须嵌入在 HTML文件中;
JavaScript脚本程序中不能包含 HTML标记代码;
(双引号)
每行写一条脚本语句;
语句末尾可以加分号;
JavaScript脚本程序可以独立保存为一个外部文件,但其中不能包含 <script></script>标签。
JavaScript脚本程序的几种基本格式:
<script>
document.write("Hello World!!!");
</script>
<script language="JavaScript">
document.write("Hello World!!!");
</script>
<script language="JavaScript"
type="text/JavaScript">
document.write("Hello World!!!");
</script>
<script language="JavaScript1.2">
document.write("Hello World!!!");
</script>
★ <script language="JavaScript“
type="text/JavaScript">
<!--
document.write("Hello World!!!");
//-->
</script>
注意:
将 type=“text/JavaScript” 加在课本当中的例子中避免出错!
★ 使用 JavaScript脚本有两种方法,
1、加入 JavaScript脚本函数到 HTML视图中、然后调用脚本函数 ;
2、在 C#后台代码中的 Response.Write()
方法中输出 JavaScript脚本代码到客户端。
Response.Write(“<script
language=‘javascript’>alert(‘
你好!!’ )</script>”) ;
使用 Response.Write()方法
Response.Write()方法向客户端输出信息,
输出的信息可以是文本信息:当客户端接收到文本信息后,就会将其显示在浏览器的页面上;也可以是一段 JavaScript脚本代码,当客户端接收到脚本代码后,经过解释后执行这段代码,达到客户端的某种效果。若要在客户端显示一个信息框,只要使用脚本语句 alert('Message')即可,
其中 Message是需要输出的信息。
一个简单的例子:
<html>
<body>
<br>
This is a normal HTML document.
<br>
<script language="JavaScript">
<!-- hide from old browsers
document.write("This is JavaScript!")
// -->
</script>
<br>
Back in HTML again.
</body>
</html>
程序运行结果:
This is a normal HTML document.
This is JavaScript!
Back in HTML again
思考:
如果你的浏览器不支持 JavaScript,则结果会变成什么样?
三,JavaScript基本特性
JavaScript的数据类型:
1.数值:整数、浮点数;
2.逻辑值:布尔值;
3.字符串值:
4.空值:
5.未定义值:
JavaScript数据的表示:
整数:由正负号、数字构成,八进制、十进制、
十六进制;
浮点数:由正负号、数字和小数点构成,常规记数法、科学记数法;
逻辑值,true,false
字符串值:单引号、双引号
空值,null
未定义值:根本不存在的对象、已定义但没有赋值的量;
转义字符:
2)变量变量的主要作用是存取数据、提供存放信息的容器。
在 JavaScript中,变量可以用命令 var作声明,
var myTest;
由于 JavaScript是弱类型语言,因此在声明时不需要指定其类型,而在使用时再根据数据的类型来确其变量的类型。
变量命名规则:
首字符必须是大写或小写的字母或下划线( _)
或美元符( $) ;
后续的字符可以是字母、数字、下划线或美元符 ;
变量名称不能是保留字;
长度是任意;
区分大小写 ;
约定:集中置顶;
使用局部变量;
易于理解; stdId
避免混乱。 usrname usrName
3)表达式和运算符和 C语言基本相同。
四,JavaScript语句 (参见技术文档 )
五,函数通常在进行一个复杂的程序设计时,总是根据所要完成的功能,将程序划分为一些相对独立的部分,每部分编写一个函数,从而,
使各部分充分独立,任务单一,程序清晰,易懂、易读、易维护。
1,JavaScript函数定义
function 函数名 (参数 1, ) {
函数体 ;
return 表达式 ;
}
说明:
a,函数由关键字 function定义。
b,函数名对大小写是敏感的。
c,参数是传递给函数使用或操作的值,
其值可以是常量,变量或其它表达式。
d,必须使用 return将值返回。
2,函数中的形式参数在函数的定义中,我们看到函数名后有参数表,这些参数变量可能是一个或几个。 在
JavaScript中可通过 arguments,Length来检查参数的个数。如下例,
function f1(exp1,exp2,exp3,exp4) {
var Number =f1.arguments.length;
if (Number>1) document.write(exp2);
if (Number>2) document.write(exp3);
if(Number>3) document.write(exp4);
document.write(Number) ;
}
可以用以下代码获得所有参数:
for (var i=0;i<Number;i++){
document.writeln(f1.arguments[i]);
}
函数的调用:
格式:
函数名 ([参数 [,参数,..]])
例 1:
<Script>
function showName(name){
document.write ( "我是 " + name );
}
showName("黄雅玲 ");
</Script
例 2:
<Script>
function showName(name){
str="我是 " + name;
return str;
}
document.write(showName("黄雅玲 "));
</Script>
1,Window对象
2,Document对象
3,History对象
4,Navigator对象
5,Location对象第二部分 JavaScript对象编程
window
screen frames history navigator location scripts document
link anchors forms
如图所示,在最顶层的对象是 Window对象,
其他对象可以看作是 Window对象的属性 。 其中,
对于编程 最重要的属性是 Document对象 。
Document对象表示浏览器中当前 HTML文档,通过该对象能够获得关于当前文档的信息,可以检测和修改当前 HTML文档的元素,还可以响应事件 。
1,Window对象 (窗口对象 )
Window对象表示浏览器中一个打开的窗口 。 通过引用该对象的属性可以控制脚本中其他对象的属性,
进而控制整个网页的外观以及对事件的响应 。 使用
Window对象可以获得当前窗口的状态信息,文档信息,
浏览器的信息,还可以响应发生在 IE中的事件 。
通常,浏览器在打开 HTML文档时,创建 Window对象 。
在脚本程序中使用 Window对象的属性,方法,集合时,一般不必标明 Window,而直接使用 。 比如,关闭窗口时,可以用代码 Close,而不必写为:
Window.Close。 只是为了增加程序的可读性,建议用户标明 Window对象 。
下面分别介绍 Window对象常用的属性,方法和事件,
(1) Window对象的属性
Window对象有多个属性,通过这些属性可以得到客户端浏览器属性,可以控制当前窗口的 HTML文档等等 。 其主要属性见表 1-1。
表 1-1 Window对象的属性名称 说明
Document属性 返回对当前 Document对象的引用,从而能够调用 Document对象的属性、方法,事件等
Event属性 返回对 Event对象的引用,从而能够调用 Event对象的属性。只能在事件过程中使用
History属性 返回对 History对象的引用。通过该属性,可以调用 History对象的属性、方法、事件等
Location属性 返回对 Location对象的引用。通过该属性,可以调用 Location
对象的属性、方法、事件等
Navigator属性 返回对 Navigator对象的引用。通过该属性,Navigator对象的属性、方法、事件等
Self属性 返回对当前窗口的引用,为只读属性
Status属性 返回和设置浏览器中状态栏显示的信息
(2) Window对象的方法
Window对象的方法用于显示提示信息,输入信息,
控制 HTML页面外观,触发和响应事件,显示 HTML页面等 。 其常用的方法见表 1-2。
表 1-2 Window对象的常用方法名称 说明
Alert方法 用于显示一个提示框,包括信息图标、提示信息和“确定”
按钮。
Close方法 用于关闭当前浏览器窗口。父 window对象调用 Close方法时,
会关闭所有的子窗口
Confirm方法 用于显示一个对话框,包括问号图标、提示信息、“确定”
按钮和“取消”按钮
open方法 用于打开一个新的浏览器窗口,并且加载由其 URL参数指定的 HTML文档
Prompt方法 用于显示一个输入对话框,包括提示信息和输入框
SetTimeout方法 用于定时执行某个函数或命令说明:
① Alert方法有些类似于 MsgBox函数产生的对话框,只是 Alert产生的含有图标,而且对话框标题为
,Microsoft Internet Explorer” ;后者不含有图标,对话框标题为,VBScript” 。 注意,用户无法更改使用该方法产生的对话框标题 。
② Confirm方法与 Alert,MsgBox产生的对话框不同,该方法产生的对话框有 两个按钮,而且有返回值 。 单击,确定,按钮,该方法返回值为 True;单击
,取消,按钮,该方法返回值为 False。 注意,无法更改使用该方法产生的对话框标题 。
③ Prompt方法的语法如下:
Prompt([message[,inputDefault]])
其中,message是可选参数,是显示提示信息的字符串; InputDefault也是可选参数,显示缺省输入值 。 如果不指定 InputDefault参数,那么,对话框的输入框中将显示,undefined” 字样 。 该方法的返回值为用户输入的字符串 。 与 Alert,MsgBox一样,该方法产生的对话框标题无法更改 。
④ open方法的语法如下:
window = 对象名,open([URL[,name[,features
[,replace]]]])
例题见操作其中,URL参数指定了新窗口要加载的 HTML文档 。
如果不指定 URL参数,则加载一个空 HTML文档 。
name参数是可选的,用来指定新窗口的名称,以便别的 HTML文档通过超链接调用 。
Features参数是可选的,用于指定新窗口的样式,
有多个选项可以选择,各选项取值与说明见表 1-3。
表 1-3 Features参数的取值说明名称 说明
fullscreen 指定窗口是( yes)否为全屏显示,默认值 no
channelmode 指定窗口是否为舞台模式
toolbar 指定窗口是否显示工具栏控件 (包括:前进、后退、停止等按钮 )
location 指定窗口是否显示 URL输入框
directories 指定窗口是否显示“链接”工具栏
status 指定窗口底部是否显示状态栏,缺省值为 yes
scrollbar 指定窗口是否显示垂直和水平滚动条
resizable 指定窗口是否显示最大、最小化按钮
width 指定窗口显示宽度,可以设置为 >=100的数
Height 指定窗口显示高度,可以设置为 >=100的数
top 指定窗口顶部的坐标
left 指定窗口左端的坐标
replace参数也是可选的,可以设置为 yes或者 no,
用于指定加载的 URL在浏览器历史记录中,是否替换原窗口的 URL记录 。
例如,可以用如下代码打开一个窗口:
Window.Open "titile.htm"
下述代码打开一个名为 title.htm的文档,新窗口不指定名称,显示工具栏,显示,链接,工具栏:
Window.Open "titile.htm",null,"fullscreen = no,
toolbar = yes,directories = yes"
2,Document对象 (文档对象 )
Document对象代表了当前浏览器窗口中的 HTML文档,它是脚本对象模型中最为重要的对象 。 可以通过该对象检测 HTML文档中各元素的状态 ( 比如,颜色,
字体,发生的事件等 ),并且可以更改这些元素的状态 。 在 HTML文档的任何位置都可以调用该对象 。
下面分别介绍 Document对象常用的属性,方法和事件 。
(1) Document对象的属性在 Document对象的属性中,有些是用来设置当前
HTML文档的状态,有些则是用来指示当前 URL的信息 。 其常用的属性见表 6-4。
表 6-4 Document对象的属性名称 说明
alinkcolor属性 用来得到或更改当前页面中所有超链接拥有焦点时(按下鼠标左键还没有松开)的颜色
bgColor属性 用来得到或更改当前页面的背景颜色
fgColor属性 用来得到或更改当前页面所有文本的颜色
vlinkColor 用来得到或更改 访问过的超链接 的颜色
cookie属性 用来得到或更改浏览器的一个 cookie值。
title属性 用来返回在 <title>标签中编写的文本,该文本一般作为浏览器的标题出现说明:
① 上述属性的颜色可以使用 IE颜色表中的值 。 对颜色值的调用既可以通过颜色名,又可以通过相应的十六进制数 。
(2) Document对象的方法
Document对象提供了多种方法控制网页的读写以及外观,常用的方法见表 6-5。
表 6-5 Document对象的方法名称 说明
clear方法 清空当前文档中的内容,一般用于动态生成网页的操作中
close方法 关闭当前文档
open方法 打开文档以便用 write或者 writeln方法写入新的文档内容
write方法 用于在当前文档中写入新的内容,在输出字符串末尾 不包括回车标志
writeln方法 用于在当前文档中写入新内容,在输出字符串末尾 包括回车 标志说明:
① 与 window对象的 Open方法不同,Document对象的 open方法只是在当前浏览器窗口新建一个 HTML文档,
前者则新建一个浏览器窗口 。
在动态更改网页操作中,一般先调用 open方法在浏览器窗口中打开一个空的文档,然后,通过调用
write或者 writeln方法在文档中输入新的内容,然后,
调用 close方法关闭文档并显示它 。
② write方法和 writeln方法的区别在于 writeln
方法在输出字符串末尾添加了回车标志 。
3,History对象 (历史对象 )
History对象包含了用户访问过的 URL信息,通过这些信息可以使浏览器具有导航功能,使得用户可以很方便地在感兴趣的 URL之间切换 。
History对象不出现在网页上,因而没有对应的事件,只有一些属性和方法 。 以下分别介绍 History对象常用的属性,方法 。
(1) History对象的属性
History对象只有一个 Length属性 。 该属性返回用户访问过的 URL个数 。 该属性只读,在程序中不能对它进行赋值操作,使用频率并不高 。
(2) History对象的方法
History对象的方法用于在 URL历史记录中移动,
从而改变当前 URL。 它有三个方法,back方法,forward
方法和 go方法 。
back方法 。 该方法用于回溯浏览内容,等效于用户在浏览器中单击 n次,后退,按钮 。 其调用形式如下:
History.back n
其中,参数 n指定在 URL历史记录中回溯 URL的个数 。
例如:
window.history.back 1
该语句使得当前文档切换到最近一次访问过的 URL。
forward方法 。 该方法用于显示 URL历史记录表中下一个 URL的内容,等效于用户在浏览器中单击 n次
,前进,按钮 。 其调用形式如下:
History.forward n
其中,参数 n指在历史记录表中前移 URL的个数 。
go方法 。 该方法用于显示 URL历史记录表中特定
URL的内容 。 其调用形式如下:
History.go(delta | location)
其中,参数 delta是个整数,指定目标 URL的相对位置 。 参数 location是个字符串,指定目标 URL的一部分或者全部 。
说明:当参数 delta为 1时,相当于执行语句:
History.forward 1。 当参数 delta为 -1时,相当于执行语句,History.back 1。
4,Navigator对象 (浏览器信息对象 )
Navigator对象包含了客户端浏览器的信息,通过引用该对象的属性可以得到这些信息,在大多数情况下,客户端使用的浏览器类型是无法事先知道的 。
这就要求 HTML文档能够适应多种浏览器的特性,比如可能需要它同时适用于 IE和 Netscape浏览器 。 而事实上,浏览器之间的兼容性并不好 。 为此,我们可以设计两组页面,每组页面对应一种浏览器,由脚本程序判断页面是由哪种浏览器打开的,然后根据浏览器的信息打开相应的页面,以便用户获得最佳的浏览效果 。
Navigator对象不出现在网页上,因而没有对应的事件,只有一些属性和方法 。
(1) Navigator对象的属性
Navigator的属性包含了浏览器的名称,版本,
设置等 。 其中,较为常用的属性有 appCodeName、
appName,appVersion,cookieEnabled等 。
appCodeName属性 。 通过该属性可以得到浏览器类型代号 。 例如,对于 IE来说,该属性的返回值为
,Mozilla” 。
appName属性 。 通过该属性可以得到浏览器类型名称 。 例如,对于 IE来说,该属性的返回值为
,Microsoft Internet Explorer” 。
appVersion属性 。 通过该属性可以得到浏览器的版本号 。
cookieEnabled属性 。 由于 cookie可以存放一些有用的用户信息,所以,判断浏览器是否支持 cookie
很有用处 。
(2) Navigator对象的方法
Navigator对象支持两个方法,javaEnabled和
taintEnabled。 其中,前者可以用来确定浏览器是否支持 java编程语言 。 这样,脚本程序可以利用这条信息动态调整代码 。 对于不支持 java的,程序中原来用
java的部分,可以用 VBScript代码实现 。 后者可以用来确定浏览器是否支持数据 tainting。
5,Location对象 (网址对象 )
Location对象包含了当前 URL的信息 。 该对象不支持方法和事件 。 在其属性中,最常用的有 href、
pathname,search等属性 。
href属性 。 该属性用来返回或者设置当前完整的
URL。 通过该属性,能够实现网页间的少信息传递 。 同时,通过在脚本代码中改变该属性可以实现网页的动态切换 。
例如,可以用如下代码指定当前窗口的 URL:
Window.Location.href ="http://www.sohu.com"
href属性是 Location对象的缺省属性 。 也就是说,
下属代码等价:
Location = "../chap3/docExample.htm"
Location.href = "../chap3/docExample.htm"
pathname属性 。 该属性可用来设置当前文档的路径,通过它能够调用 Web根目录以外的文档 。
search属性 。 该属性用来返回 URL中嵌入的参数,
通过参数来实现网页间的信息交互 。 这种方式比起使用服务器端对象要简单一些 。 在 URL中嵌入参数的方法是在 URL后面加一个问号 (?),然后紧跟参数名称和参数值 。 例如:
http://www.SomeSite.com/cgi/UserRegister.exe?UserName="yangjing"
这 段 代 码 查 找 用 户 名 yangjing,由
UserRegister.exe返回相应结果 。