1.3 JavaScript的基本结构与使用_动态网页设计与开发：JavaScript + jQuery-QQ阅读男生玄幻网

书名：动态网页设计与开发：JavaScript + jQuery
作者名：石毅等
本章字数：2026字
更新时间：2020-08-27 12:09:40

1.3 JavaScript的基本结构与使用

通常，JavaScript代码是用<script>标签嵌入HTML文档中的。如果需要将多条JavaScript代码嵌入一个文档中，只需将每条JavaScript代码都封装在<script>标签中即可。浏览器在遇到<script>标签时，将逐行读取内容，直到遇到</script>结束标签为止。浏览器将检查JavaScript语句的语法，如果有任何错误，则会在警告框中显示；如果没有错误，则浏览器将编译并执行语句。

1.3.1 JavaScript的基本结构

JavaScript的基本结构如下：

语法

其中type是<script>标签的属性，用于指定文本使用的语言类别为text/javaScript。

注意

有的网页中用默认type=“text/javascript”，这种写法是正确的，因为在HTML5中可省略type属性，HTML5默认为text/javascript。

下面通过一个示例来深入学习JavaScript的基本结构，代码如示例1所示。

【示例1】 JavaScript的基本结构

示例1在浏览器中的运行效果如图1.3所示。

代码中，document.write()用来向页面输出可以包含HTML标签的内容，把document.write()语句包含在<script>与</script>之间，浏览器就会把它当作一条JavaScript命令来执行，这样浏览器就会向页面输出内容。

图1.3 使用JavaScript输出

提示

如果不使用<script>标签，浏览器就会将document.write("<h1>Hello，JavaScript</h1>")当作纯文本来处理，也就是说，会把这条命令本身写到页面上。

1.3.2 JavaScript的执行原理

了解了JavaScript的基本结构，下面再来深入了解JavaScript的执行原理。在JavaScript的执行过程中，浏览器客户端与应用服务器端采用请求/响应模式进行交互，如图1.4所示。现在，让我们逐步分解一下这个过程。

图1.4 JavaScript的执行原理

（1）浏览器客户端向服务器端发送请求：一个用户在浏览器的地址栏中输入要访问的页面（页面中包含JavaScript程序）。

（2）数据处理：服务器端将某个包含JavaScript的页面进行处理。

（3）发送响应：服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上至下逐条解析HTML标签和JavaScript，并将页面效果呈现给用户。

使用客户端脚本的好处有以下两点：

➢ 包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信。

➢ JavaScript程序由浏览器客户端执行，而不是由服务器端执行，因此能减轻服务器端的压力。

1.3.3 JavaScript的使用方式

JavaScript有3种使用方式：

➢ 在HTML文档中直接添加代码。

➢ 将JavaScript脚本代码写到外部的JavaScript文件中，再在HTML文档中引用该文件的路径地址。

➢ 直接在HTML标签中。

这三种使用方式的效果完全相同，可以根据使用率和代码量选择相应的开发方式。例如有多个网页文件需要引用同一段JavaScript代码时，可以写在外部文件中进行引用，以减少代码冗余。

1．内部JavaScript

JavaScript代码可以直接写在HTML页面中，只需使用<script>首尾标签嵌套即可。相关HTML代码语法格式如下：

语法

使用JavaScript代码中的alert()方法制作一段简单的示例：

该语句表示打开网页后弹出警告提示框，显示的文字内容为“Hello JavaScript！”。

【示例2】内部JavaScript的简单应用

示例2运行效果如图1.5所示。

图1.5 示例运行效果图

2．外部JavaScript

如果选择将JavaScript代码保存到外部文件中，则只需要在HTML页面的<script>标签中声明src属性即可。此时外部文件的类型必须是JavaScript类型文件（简称为JS文件），即文件后缀名为.js。相关HTML代码语法格式如下：

语法

以在本地js文件夹中的myFirstScript.js文件为例，在HTML页面中的引用方法如下：

引用语句放在<head>或<body>首尾标签中均可，与在<script>标签中直接写脚本代码的运行效果完全一样。

【示例3】外部JavaScript的简单应用

示例3运行效果如图1.6所示。

图1.6 示例运行效果图

myFirstScript.js就是外部JavaScript文件，src属性表示指定外部JavaScript文件的路径，在浏览器中运行示例3，运行结果与示例2的运行结果相同。

大家在上网查看网页源文件时，会看到许多网页中的<script>标签都放在<head>标签中，那为什么本章例子中的<script>标签都放在了<body>标签中，并且放在了<body>标签最后呢？

请大家注意，无论是使用<script>标签在网页中编写JavaScript代码，还是引用.js文件，浏览器都会按照<script>标签在页面中出现的先后顺序对它们依次进行解析，换句话说，在第一个<script>标签包含的代码解析过后，第二个<script>标签包含的代码才会被解析，然后才是第三个、第四个……这样看来，如果把<script>标签放在<head>中，那么意味着必须等到全部JavaScript代码被下载、解析和执行完成之后，才开始呈现网页内容，这样对于许多包含JavaScript代码的页面来说，无疑导致浏览器呈现页面时出现明显的延迟，而延迟期间浏览器窗口将一片空白，为了避免这个问题，现在许多网页开发者会把<script>标签放在<body>标签中，并且放在页面内容的后面。

注意

外部文件不能包含<script>标签，通常将扩展名为.js的文件放到网站目录中单独存放脚本的子目录中（一般为js），这样容易管理和维护。

3．直接在HTML标签中

有时需要在页面中加入简短的JavaScript代码实现一个简单的页面效果，如点击按钮时弹出一个提示框等，这样通常会在按钮事件中加入JavaScript处理程序。下面的例子就是点击按钮时弹出提示框。关键代码如下所示：

当点击“弹出消息框”按钮后，会弹出提示框，如图1.7所示。

图1.7 提示框

在代码中，onclick是点击的事件处理程序，当用户点击按钮时，就会执行“javascript：”后面的JavaScript命令，alert()是一个函数，类似Java中的方法，作用是向页面弹出一个提示框。

通过以上可以知道这三种方式的应用场合：

➢ 内部JavaScript文件适用于JavaScript特效代码量较少的情况，仅用于单个页面。

➢ 外部js文件则适用于代码较多的情况，可重复应用于多个页面。

➢ 直接在标签中写JavaScript则适合于极少代码情况，仅用于当前标签，但是这种方式增加了HTML代码，因此在实际开发中应用较少。