响应式网页开发基础教程（jQuery+Bootstrap）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

第2章 JavaScript基础

2.1 初识JavaScript

JavaScript诞生于1995年，它当时出现的目的是为了验证表单输入。因为在JavaScript问世之前，表单都是通过服务器端验证的，而当时是电话拨号上网的年代，服务器验证数据是一件非常痛苦的事情。经过多年的发展，JavaScript已经从一个简单的输入验证成为一门强大的编程语言。

JavaScript是一种直译式、广泛用于Web客户端的、具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并且具有相对安全性的客户端脚本语言。由于内置支持类型，JavaScript不需要在一个特定的语言环境下运行，而只需要支持它的浏览器即可，它的解释器被称为JavaScript引擎，是浏览器的一部分。JavaScript可以验证发往服务器端的数据，还能用来给HTML网页增加动态交互功能，增强用户体验度等。

2.1.1 JavaScript的组成

一个完整的JavaScript应该由以下3个不同的部分组成。

1. 核心（ECMAScript）

由ECMAScript-262定义的ECMAScript与Web浏览器没有依赖关系。ECMAScript定义的只是这门语言的基础，而在此基础之上可以构建更完美的脚本语言。我们常见的Web浏览器只是ECMAScript实现可能的宿主环境之一。它还可以在Actionscript、scriptEase等环境中寄宿。而它的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等。

2. 文档对象模型（DOM）

文档对象模型（Document Object Model，DOM）是针对XML但经过扩展用于HTML的应用程序编程接口（Application Programming Interface，API）。DOM有3个级别，每个级别都会新增很多内容模块和标准。

DOM描绘了一个层次化的节点树，运行开发人员可添加、移除和修改页面的某一部分。

3. 浏览器对象模型（BOM）

浏览器对象模型（Browser Object Model，BOM），它提供了很多对象，用于访问浏览器的功能。BOM缺少规范，每个浏览器提供商又按照自己的想法去扩展它，因此BOM本身没有通用的标准。

2.1.2 JavaScript在网页中的引用方式

那么如何在网页中插入JavaScript代码呢？我们只需一步操作——在HTML网页中使用<script>标签。<script>标签要成对出现，并要把JavaScript代码写在<script></script>之间。如图2-1所示。

图2-1　JS代码的插入

在HTML文档中嵌入JavaScript脚本代码的方式主要有以下几种。

1. 页面内嵌方式

如图2-1所示，JavaScript代码包含于<script>和</script>标签对，然后嵌入到HTML文档中。按照常规我们会把<script>标签对存放到<head>…</head>之间，但有时也会放在body之后。

最常用的方式是把<script>元素放到head部分，浏览器解析由上自下，解析到<head>部分就会执行这些JavaScript代码，然后往下才解析页面的其余部分，如【例2-1】所示。

【例2-1】

<html>
</head>
     <script type="text/javascript">
     alert('欢迎来到 JavaScript 世界！');      // alert(); 表示在页面弹出窗口显示
     </script>
</head>
<body>
</body>
</html>

2. 外部引入方式

JavaScript代码只能写在HTML文件中吗？当然不是，我们可以把HTML文件和JavaScript代码分开，并单独创建一个JavaScript文件（简称JS文件），其文件后缀通常为.js，然后直接将JavaScript代码写在JS文件中，如图2-2所示。

图2-2　外部JS文件

通过<script>标签的src属性引入JavaScript即可。做到HTML与JavaScript分开，使代码看起来更加整洁，它还具有维护性高（一次更新，多处调用）、可缓存（仅需加载一次）、便于未来扩展的特点。在网页中调用外部JS文件的代码如【例2-2】所示。

【例2-2】

<script type="text/javascript" src="xxx.js"></script>

注：xxx.js为要引用的外部JS文件。

<script>标签有以下两个常用属性。

（1）type属性：表示代码使用的脚本语言的内容类型。如type="text/javascript"。

（2）src属性：用于将外部的JavaScript文件内容嵌入到当前文档中，表示指定外部JavaScript文件的路径，一般采用相对路径。例如，src="main.js"的意思是指定到当前项目中名为main的JavaScript文件。【例2-3】引用JavaScript的方式就是通过src引入JavaScript文件。

【例2-3】

在文本编辑器中编辑如下代码并将其保存为 script.js文件：

alert("欢迎来到 JavaScript 世界！");

编辑如下html代码并保存为index.html文件：

<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>

将index.html和script.js文件放置于同一目录，双击即可运行index.html，如图2-3所示。

图2-3　html中执行外部js文件

注意，若使用外部引入方式需注意以下几点。

（1）使用外部引入方式时，<script>标签内就没有其他JavaScript代码了。但这时也要保证<script>标签是成对出现的，例如：

<script type="text/javascript" src="xxx.js" />；     //这样的单标签是错误的！！！

（2）不能在标签内添加任何代码。如：

<script type="text/javascript" src="demo1.js">alert('我在这，执行不到啊！')</script>

（3）还需注意外部文件（xxx.js）中不能包含<script>标签。最好把xxx.js文件都放到通常存放脚本的目录中，这样容易管理和维护。

3. 行内伪URL引入方式

在多数支持JavaScript脚本的浏览器中，可以通过行内JavaScript伪URL地址调用语句来引入JavaScript脚本代码。伪URL地址的一般格式如下：

Javascript:要执行的代码…

这种格式一般以“javascript:”开始，后面紧跟要执行的操作。下面【例2-4】的代码演示了如何使用伪URL地址来引入JavaScript代码。

【例2-4】

<p>伪 URL地址引入 JavaScript脚本代码实例： </p>
<form name="MyForm">
<input type=text name="MyText" value="鼠标点击" onclick="javascript:alert('鼠标已点击文本
框！')">
</form>

其显示效果如图2-4所示。

图2-4　伪URL引入JavaScript

2.1.3 常用的输入/输出语句

在JavaScript中，有4种常用的输入/输出语句：警告对话框alert()、提示对话框prompt()、确认对话框confirm()、输出语句document.write()。

1. 警告对话框alert()

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不单击“确定”按钮，就不能对网页做任何操作，这个小窗口就是使用alert实现的。alert()函数对于代码的测试非常方便。alert的输出内容，参数可以是字符串、变量或表达式，如【例2-5】所示。

【例2-5】

alert(' Hello！');
var myAge = 18;                         //var是定义变量的关键字
alert("我今年满" + myAge + "岁了！");      //这里的+号是连接符
alert("4+8="+(4+8));

注：语句“alert("4+8="+(4+8));”中第1个和第3个“+”是运算符加号，中间第2个“+”是连接符。连接字符串"4+8="与表达式(4+8)。

2. 提示对话框prompt()

通过prompt()方式可弹出提示对话框，这种对话框可输入信息并带有返回值，常用来提示收集用户反馈信息。其基本语法格式：

var returnvalue=prompt("提示信息", "默认信息");

默认信息可以为空，用户可以通过输入进行修改。【例2-6】是一个提示对话框使用的示例。其显示效果如图2-5所示。

【例2-6】

<script type="text/javascript">
var fruit=prompt("输入你最喜欢的水果","西瓜");
alert(fruit);                   // prompt()返回括号里的值，值被存储到变量fruit中
</script>

图2-5　提示对话框

单击“确定”按钮后，如图2-6所示。

图2-6　单击“确定”按钮后的显示效果

3. 确认对话框confirm()

confirm()方法用于显示一个带有指定消息和“OK”及“取消”按钮的对话框。如果用户单击“OK”按钮则返回true，单击“取消”按钮则返回false。

如【例2-7】所示的代码将产生一个确认对话框。

【例2-7】

<script type="text/javascript">
     var s=confirm("确定离开？");
     alert(s);
</script>

4. 输出语句document.write()

document文档是对象，write是方法，通过document.write();可在网页上直接输出相应的内容。与alert();相似，参数可以是字符串、变量或HTML标签，但与alert()不同的是，alert()仅输出在弹出框，关闭弹出框后，内容也随之关闭，而document.write()的输出一直都在网页上。

语法格式：document.write("输出内容");

（1）参数可以是常量（比如字符串），例如：

document.write("Hello World");

（2）参数也可以是变量，例如：

var myName = "Jacky";
document("大家好！我是" + myName );

效果如图2-7所示。

图2-7　参数是变量时的输出结果

（3）参数还可以是HTML标签，例如：

document.write("<h3>个人信息</h3><ul><li>姓名：李小东</li><li>班级：网站开发1班</li></ul>");

效果如图2-8所示，相当于执行了html代码的效果。

图2-8　参数是HTML标签时的输出结果

使用JavaScript时还需要注意以下事项。

（1）JavaScript中的代码和符号都要在英文状态下输入。

（2）记得在语句末尾写上分号来表示一句语句的结束。虽然分号“；”不写也不会提示语法错误，但我们要养成编程的好习惯。

（3）关于JavaScript代码注释，单行注释使用'//'，多行注释使用'/ ** /'。

上一章目录下一章