您的位置:首页 > Web前端 > JavaScript

第一章 JavaScript语言概述(中)----JavaScript起步编程

2008-07-08 15:34 344 查看
1."Hello World" 程序

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<meta http-equiv=content-type contexnt="text/html; charset=gb2312">

<title>Sample Page!</title>

</head>

<body>

<center>

<script language="javascript 1.2" type="text/javascript">

document.write("Hello World!");

</script>

</center>

</body>

</html>

将上述代码保存为.html(或.htm)文件并双击打开。画面就会显示Hello World字样。

JavaScript 脚本编程一般分为如下步骤:

·选择JavaScript语言编辑器编辑脚本代码

·嵌入该JavaScript脚本代码到HTML文档中

· 选择支持JavaScript的浏览器浏览该HTML文档

· 如果错误则检查并修改源代码,重新浏览,此过程重复直至代码正确为止

· 处理不支持JavaScript脚本情况

2.如何引入JavaScript脚本代码

(1)通过<script>与</script>标记对引入

上面的例子已经可以看出,<script>与</script>标记对将JavaScript脚本代码进行了封装,并嵌入到HTML文档中。

注意:<script>标记必须成双出现,否则脚本代码不被浏览器解释执行。

下面介绍下<script>标记中的几个属性:

·language属性: 用于指定封装代码的脚本语言及版本,有的浏览器还支持perl,VBscript等,所有脚本浏览器都支持JavaScript(当然非常老的版本除外),同时language属性默认值为JavaScript。

·type属性: 指定<script>和</script>标记对之间插入的脚本代码类型。

·src 属性: 用于将外部的脚本文件内容嵌入到当前文档中,一般在较新版本的浏览器中使用,使用JavaScript脚本编写的外部脚本文件必须使用.js为扩展名,同时在<script>和</script>标记对中不包含任何内容。

注意:W3C HTML标准中不推荐使用language语法,要标记所使用的脚本类型,应设置<script>的type属性为对应脚本的MIME类型(JavaScript的MIME类型为"text/javascript")。但在该属性中可设定所使用脚本的版本,有利于根据浏览器支持的脚本版本来编写有针对性的脚本代码。

(2)通过<script>标记的src属性引入

html代码

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<meta http-equiv=content-type content="text/html; charset=gb2312">

<title>Sample Page!</title>

</head>

<body>

<script language="javascript 1.2" type="text/javascript" src="1.js">

</script>

</body>

</html>
1.js代码

document.write("Hello World!");

text.html和1.js文件放置于同一目录(当然,也可以不是同一目录,但需要指定脚本文件的路径)。

可见通过外部引入JavaScript脚本文件的方式,同样能实现。并且具有如下优点。

·将脚本程序同现有页面的逻辑结构及浏览器结果分离。通过外部脚本,可以轻易实现多个页面共用完成同一功能的脚本文件,以便通过更新一个脚本文件内容达到批量更新的目的。

·浏览器可以实现对目标脚本文件的高速缓存,避免由于引用同样功能的脚本代码而导致下载时间的增加。

(3)通过JavaScript伪URL引入

在多数支持JavaScript脚本的浏览器,可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。

格式为:JavaScript:alert("Hello World!")

一般以"JavaScript"开始,后面紧跟要执行的操作。源程序1.3如下

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<meta http-equiv=content-type content="text/html; charset=gb2312">

<title>Sample Page!</title>

</head>

<body>

<center>

<p>伪URL地址引入JavaScript脚本代码实例:</p>

<form name="MyForm">

<input type=text name="MyText" value="鼠标点击"

onclick="javascript:alert('鼠标已点击文本框!')">

</form>

</center>

</body>

</html>

程序运行后,在原始页面中单击文本框,将会弹出警示窗口。

伪URL地址可用于文档中任何地方,并触发任意数量的JavaScript函数或对象固有的方法。由于这种方式代码短而精,同时效果颇佳,在表单数据合法性验证譬如某个字段是否符合日期格式等方面应用非常广泛。

(4)通过HTML文档事件处理程序引入

在开发Web应用程序的过程中,开发者可以给HTML文档中设定不同的事件处理器,通常是设置某HTML元素的属性来引用一个脚本(可以是一个简单的动作或者函数),属性一般以on开头,如鼠标移动onmousemove()等。

源程序1.4

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<meta http-equiv=content-type content="text/html; charset=gb2312">

<title>Sample Page!</title>

<script language="javascript" type="text/javascript">

function ClickMe()

{

alert("鼠标已单击按钮");

}

</script>

</head>

<body>

<center>

<p>通过文档事件处理程序引入JavaScript脚本代码实例:</p>

<form name="MyForm">

<input type=button name="MyButton" value="鼠标单击" onclick="ClickMe()">

</form>

</center>

</body>

</html>

点击按钮"鼠标单击",跳出警示窗口。

3. 选择适合的浏览器

JavaScript脚本在客户端由浏览器解释执行并将结果更新至目标页面,由于各浏览器厂商对JavaScript版本的支持不尽相同,浏览器的版本也对JavaScript脚本的支持有很大的影响。所以编写代码时一定要考虑合适的浏览器之间的兼容性,重点在于编写符合JavaScript标准的代码以适应目标浏览器。

源程序:检查当前浏览器的版本信息。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<meta http-equiv=content-type content="text/html; charset=gb2312">

<title>Sample Page!</title>

<script language="javascript" type="text/javascript">

function PrintVersion()

{

var msg="";

msg+="浏览器名称:"+navigator.appName+"/n";

msg+="浏览器版本:"+navigator.appVersion+"/n";

msg+="浏览器代码:"+navigator.appCodeName+"/n";

alert(msg);

}

</script>

</head>

<body>

<center>

<p>鼠标单击按钮显示当前浏览器的版本信息</p>

<form name="MyForm">

<input type=button name="MyButton" value="鼠标单击" onclick="PrintVersion()">

</form>

</center>

</body>

</html>

在确定浏览器的版本信息后,可以根据浏览器类型编写有针对性的脚本,同时可在其源程序中加入针对不同浏览器版本的脚本代码,根据浏览器的类型返回相应结果,从而克服客户端浏览器对JavaScript脚本支持程度不同的问题。

4.处理不支持JavaScript脚本的情况

(1)使用<!-->和<-->标记对直接屏蔽法

该方法将JavaScript代码进行封装,告诉浏览器如果它不支持该脚本就直接跳过,如果支持则自动跳过该标记,达到如果浏览器不支持脚本代码则将其隐藏的目的。

格式:

<script language="javascript" type="text/javascript">

<!--

//JavaScript脚本代码

-->

</script>

注意:上述方法并没有实现JavaScript脚本代码的真正隐藏,应为浏览器同样下载了该脚本,并将其作为源代码使用,只是在解释的时候忽略<!--和-->标记对之间的代码。

(2) 使用<noscript>和</noscript>标记对给出提示信息

该方法在浏览器不支持该脚本代码或者浏览器对JavaScript脚本的支持已设置为禁止的情况下,忽略<script>和</script>标记对之间脚本代码,返回<noscript>和</noscript>标记对中预设的页面提示信息。如果支持该脚本代码则解释执行<script>和</script>标记对之间的脚本代码,而忽略<noscript>和</noscript>标记对之间预设的页面提示信息。这种方法较之第一种方法更人性化。

<script language="javascript" type="text/javascript">

//脚本代码

</script>

<noscript>

//提示信息,会在HTML上显示!

Your browser does not support JavaScript!

</noscript>

目前,客户端浏览器版本很少有不支持JavaScript脚本的情况,但其禁用JavaScript脚本的情况却很常见,在编写代码时,应充分考虑不支持JavaScript脚本的情况,并采取相应的代码编写策略。

5. JavaScript的实现基础

前面已经描述过,ECMAScript是JavaScript脚本的基石,但并不是使用JavaScript脚本开发过程中应唯一特别值得关注的部分。实际上,一个完整的JavaScript脚本实现应包含如下几个部分:

·ECMAScript 核心: 为不同的宿主环境提供核心的脚本能力;

·DOM (文档对象模型) : 规定了访问HTML和XML的应用程序借口;

·BOM (浏览器对象模型) :提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。

(1) ECMAScript

ECMAScript规定了能适应于各种宿主环境的脚本核心语法规则,关于ECMAScript语言,ECMAScript-262标准描述如下:

"ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力,因此核心的脚本语言是与任何特定的宿主环境分开进行规定的......"

ECMAScript并不附属于任何浏览器,事实上,Web浏览器只是其中的一种宿主环境,但并不唯一。在其发展史上有很多宿主环境,如Microsoft的WSH,Macromedia的ActionScript,Nombas的ScriptBase和Yahoo!的Widget引擎等都可以容纳ECMAScript实现。

ECMAScript仅仅是个描述,定义了脚本语言所有的对象,属性和方法,其主要描述内容如下所示。

·语法

·数据类型

·关键字

·保留字

·运算符

·对象

·语句

支持ECMA标准的浏览器都提供自己的ECMAScript脚本接口,并按照需要扩展其内容,如对象,属性和方法等。ECMAScript标准定义了JavaScript脚本中最为黑心的内容,是JavaScript脚本的骨架,有了骨架,就可以在其基础上进行扩展,典型的扩展如DOM和BOM等。

(2) DOM

DOM定义了JavaScript可以进行操作的文档的各个功能部件的接口,提供访问文档各个功能部件(如document,form,textarea等) 的途径及操作方法。

在浏览器载入文档(HTML或XML)时,根据其支持的DOM规范级别,将整个文档规划成由节点层级构成的节点树,文档中每个部分都是一个节点,然后依据节点树层级,并根据目标节点的某个属性搜索到目标节点后,调用节点的相关处理方法,完成定位到处理的整个过程。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html140/strict.dtd">

<html>

<head>

<meta http-equiv=content-type content="text/html; charset=gb2312">

<title>Sample Page!</title>

</head>

<body>

<h1>Test!</h1>

<!--NOTE!-->

<p>Welcome to <em>DOM</em> World!</p>

<ul><li>Newer</li></ul>

</body>

</html>

浏览器载入该文档后,根据DOM中定义的结构,将其以如图所示的节点树的形式表示出来。

file="/Best4cUserFiles/20080711/17143_1215758025140";showImage();

(3) BOM

BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口,提供访问文档各个功能部件(如窗体本身,屏幕功能部件,浏览历史纪录等)的途径及操作方法。遗憾的是,BOM只是JavaScript脚本实现的一部分,没有任何相关的标准,每种浏览器都有自己的BOM实现,这可以说是BOM的软肋所在。

通常情况下,浏览器特定的JavaScript扩展都被看作BOM的一部分,主要包括以下几点。

·关闭,移动浏览器及调整浏览器窗口大小。

·弹出新的浏览器窗口。

·提供浏览器详细信息的定位对象。

·提供载入到浏览器窗口的文档详细信息的定位对象。

·提供用户屏幕分辨率详细信息的屏幕对象。

·提供对cookie的支持。

·加入ActiveXObject类扩展BOM,通过JavaScript实例化ActiveX对象。

BOM有一些事实上的标准,如窗口对象,导航对象等,但每种浏览器都为这些对象定义或扩展了属性及方法。在后续章节我们将详细介绍BOM模型中的相关对象。

——摘于《完全手册 Javascript动态网页开发详解》杨水清 编著
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: