第2章　在网页中使用JavaScript

最新推荐文章于 2024-08-22 10:47:09 发布

唯美清泠

最新推荐文章于 2024-08-22 10:47:09 发布

阅读量3.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43677746/article/details/109701757

版权

本文详细介绍了如何在网页中使用JavaScript，从<script>标签的使用、脚本位置的选择、延迟执行与异步响应的实现，到XHTML中脚本的处理和兼容性问题，以及JavaScript执行顺序和错误处理机制。内容涵盖了JavaScript代码的嵌入、外部文件链接、<noscript>标签的使用，以及JavaScript执行的预编译和正常执行顺序。此外，文章还讨论了错误事件、错误类型和如何记录错误，提供了JavaScript代码调试的方法，如使用控制台输出和抛出错误。

摘要由CSDN通过智能技术生成

第2章　在网页中使用JavaScript

与能够独立执行的C/C++等传统语言不同，执行JavaScript代码需要HTML网页环境。在当初开发JavaScript时，Netscape把JavaScript定位为嵌入式Web脚本语言，这种做法被保留了下来，并被正式纳入HTML规范当中。本章将详细介绍如何在网页中编写JavaScript代码并执行，同时介绍如何在浏览器中进行JavaScript代码调试和错误处理。

【学习重点】

▲　灵活使用<script>标签

▲　了解JavaScript脚本存放位置

▲　会用<script>标签

▲　了解JavaScript执行顺序

▲　了解JavaScript错误处理机制（选学）

▲　了解JavaScript代码调试方法（选学）

2.1　使用<script>标签

通常情况下，在Web页面中使用JavaScript有两种方法，一种是在页面中直接嵌入JavaScript代码，另一种是链接外部JavaScript文件。

在HTML页面中嵌入JavaScript脚本需要使用<script>标签，用户可以在<script>标签中直接编写JavaScript代码，或者单独编写JavaScript文件，然后通过<script>标签导入。

2.1.1　编写第一个JavaScript程序

下面通过示例演示如何使用<script>标签的两种方式（直接在页面中嵌入JavaScript代码和链接外部JavaScript文件）。

【示例1】直接在页面中嵌入JavaScript代码。

第1步，新建HTML文档，保存为test.html。然后在标签内插入一个<script>标签。

第2步，为<script>标签指定type属性值为"text/JavaScript"。现在的浏览器默认<script>标签的类型为JavaScript脚本，因此省略type属性，依然能够被正确执行，但是考虑到代码的兼容性，建议定义该属性。

第3步，直接在<script>标签内部输入JavaScript代码：

上面JavaScript脚本先定义了一个hi()函数，该函数被调用后会在页面中显示字符"Hello,World!"。document表示DOM网页文档对象，document.write()表示调用Document对象的write()方法，在当前网页源代码中写入HTML字符串"

Hello,World!

"。

调用hi()函数，浏览器将在页面中显示一级标题字符"Hello,World!"。

第4步，保存网页文档，在浏览器中预览，显示效果如图2-1所示。

图2-1　第一个JavaScript程序

提示：包含在<script>标签内的JavaScript代码被浏览器从上至下依次解释。

当使用<script>标签嵌入JavaScript代码时，不要在代码中的任何地方输出" script>"字符串。例如，浏览器在加载下面所示的代码时就会产生一个错误：

错误原因：当浏览器解析到字符串" script>"时，会结束JavaScript代码段的执行。

解决方法：

使用转义字符把字符串" script>“分成两部分来写就不会造成浏览器的误解。

【示例2】链接外部JavaScript文件。

第1步，新建文本文件，保存为test.js。注意，扩展名为.js，它表示该文本文件是JavaScript类型的文件。

提示：使用<script>标签包含外部JavaScript文件时，默认文件类型为JavaScript，因此.js扩展名不是必需的，浏览器不会检查包含JavaScript的文件的扩展名。在高级开发中，使用JSP、PHP或其他服务器端语言动态生成JavaScript代码时可以使用任意扩展名，如果不使用.js扩展名，用户应确保服务器能返回正确的MIME类型。

第2步，打开test.js文本文件，在其中编写下面代码，定义简单的输出函数。

在上面代码中，alert()表示Window对象的方法，调用该方法将弹出一个提示对话框，显示参数字符串"Hello,World!”。

第3步，保存JavaScript文件，注意与网页文件的位置关系。这里保存JavaScript文件位置与调用该文件的网页文件位于相同目录下。

第4步，新建HTML文档，保存为test1.html。然后在标签内插入一个<script>标签。定义src属性，设置属性值为指向外部JavaScript文件的URL字符串。代码如下：

     <script type=“text/JavaScript” src=“test.js”>
   
   script>

第5步，在上面<script>标签下一行继续插入一个<script>标签，直接在<script>标签内部输入JavaScript代码，调用外部JavaScript文件中的hi()函数。

第6步，保存网页文档，在浏览器中预览，显示效果如图2-2所示。

图2-2　调用外部函数弹出提示对话框

提示：定义src属性的<script>标签不应再包含JavaScript代码。如果嵌入了代码，则只会下载并执行外部JavaScript文件，嵌入代码会被忽略。

     <script type=“text/JavaScript” src=“http://www.sothersite.com/test.js”>
   
   script>

这些位于外部域中的代码也会被加载和解析。因此在访问自己不能控制的服务器上的JavaScript文件时要小心，防止恶意代码，或者防止恶意人员随时可能替换JavaScript文件中的代码。

【拓展】HTML为<script>定义了6个属性，简单说明如下。

☑　async：可选。表示应该立即下载脚本，但不应妨碍页面中其他操作，如下载其他资源或等待加载其他脚本。该功能只对外部JavaScript文件有效。

☑　charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此很少使用。

☑　defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。该属性只对外部JavaScript文件有效。IE 7及更早版本对嵌入的JavaScript代码也支持这个属性。

☑　language：已废弃。原来用于表示编写代码使用的脚本语言，如JavaScript、JavaScript l.2或VBScript。大多数浏览器会忽略这个属性，不建议再使用。

☑　src：可选。表示包含要执行代码的外部文件。

☑　type：可选。可以看成是language的替代属性，表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。虽然text/JavaScript和text/ecmascript已经不被推荐使用，但人们一直习惯使用text/JavaScript。服务器在传送JavaScript文件时使用的MIME类型通常是application/x-JavaScript，但在type中设置这个值可能导致脚本被忽略。另外，在非IE浏览器中还可以使用application/JavaScript和application/ecmascript。考虑到约定俗成和浏览器最大限度的兼容性，目前在客户端，type属性值一般使用text/JavaScript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/JavaScript。

2.1.2　脚本位置

所有<script>标签都会按照它们在HTML中出现的先后顺序依次被解析。在不使用defer和async属性的情况下，只有在解析完前面<script>标签中的代码之后，才会开始解析后面<script>标签中的代码。

【示例1】在默认情况下，所有<script>标签都应该放在页面头部的标签中。

这样就可以把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。但是，在文档的标签中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容。如果页面需要很多JavaScript代码，这样无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。

【示例2】为了避免延迟问题，现代Web应用程序一般都把全部JavaScript引用放在标签中页面的内容后面。

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中，同时会感到打开页面的速度加快了。