1.3 在HTML中使用JavaScript_JavaScript+jQuery前端开发基础教程（微课版）-QQ阅读仙侠女生网

上QQ阅读APP看书，第一时间看更新

1.3 在HTML中使用JavaScript

JavaScript实现输出

通常，JavaScript脚本需要嵌入到HTML文件。可使用多种方法在HTML文件中插入JavaScript脚本。

• 使用<script>标记嵌入脚本。

• 使用<script>标记链接脚本。

• 作为事件处理程序。

• 作为URL。

1.3.1 使用<script>标记嵌入脚本

通常，HTML文件中的JavaScript脚本放在<script>和</script>标记之间。【例1-1】就采用了这种方法，其完整HTML代码如下。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        document.write("JavaScript欢迎你！")
    </script>
</body>
</html>

代码中的document.write()方法用于在页面中输出一个字符串。

通常，<script>标记放在HTML文件的<head>或<body>部分，当然也可放在其他位置。<script>标记内可包括任意多条JavaScript语句，语句按照先后顺序依次执行，语句的执行过程也是浏览器加载HTML文件过程的一部分。除了函数内部的代码外，浏览器在扫描到JavaScript语句时就会立即执行该语句。函数内部的代码在调用函数时执行。

一个HTML文件可以包含任意多个<script>标记，<script>不能嵌套和交叉。不管有多少个<script>标记，对HTML文件而言，它们包含的JavaScript语句组成一个JavaScript程序。所以，在一个<script>标记中定义的变量和函数，可在后继的<script>标记中使用。

1. 关于脚本语言

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

指定了脚本语言及其版本号后，如果浏览器不支持，则会忽略<script>标记内的脚本代码。

提示

早期的脚本语言除了JavaScript外，还有VBScript。虽然VBScript是Microsoft推出的脚本语言，但在其IE 11浏览器中已经取消了对VBScript的支持。目前，绝大多数新的浏览器不再支持VBScript。JavaScript已成为事实上的唯一客户端HTML脚本编程语言。所以在本书的所有实例中，不再在<script>标记中设置脚本语言。

2. 关于</script>

</script>标记表示一段脚本的结束。不管</script>标记出现在何处，浏览器均将其视为脚本的结束标记。

【例1-2】　在页面中输出JavaScript脚本。源文件：01\test1-2.html。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        document.write("<script>")
        document.write("document.write('页面中输出脚本')")
        document.write("</script>")
    </script>
</body>
</html>

在输入上述代码时，Visual Studio会在最后一个</script>标记处显示波浪线，提示该处有错。鼠标指针指向该处时，会显示具体的错误提示信息，如图1-15所示。

图1-15　Visual Studio提示脚本错误

要更正该错误，可将字符串中的“</script>”进行拆分。例如：

document.write("</sc"+"ript>")

或者使用转义字符“\”。例如：

document.write("<\script>")

3. defer属性

在<script>标记中使用defer属性时，文档加载完成后浏览器才执行脚本。例如：

<script defer></script>

当然，如果在脚本中有内容输出到页面，defer属性会被忽略，脚本立即执行。

1.3.2 使用<script>标记链接脚本

• 脚本代码较长，移出HTML文件后，可简化HTML文件。

• 脚本中的代码和函数需要在多个HTML文件间共享。将共享代码放在单个脚本文件中可节约磁盘空间，利于代码维护。

• 多个HTML文件共享使用单个文件中的函数时，在第1个调用函数的HTML文件加载时，该函数被缓存。后继HTML文件可直接使用缓存中的函数，加快网页加载速度。

• src属性值可以是任意的URL。这意味着可使用来自Web服务器的JavaScript脚本文件，或者是由服务器脚本动态输出的脚本。

独立的JavaScript脚本文件扩展名通常为.js，.js文件只包含JavaScript代码，没有<script>和HTML标记。浏览器会将文件中的代码插入到<script>和</script>标记之间。

【例1-3】　在HTML页面使用外部JavaScript脚本。源文件：01\test1-3.html，test1-3.js。

具体操作步骤如下。

（1）在Visual Studio中选择“文件\新建\文件”命令，打开“新建文件”对话框，如图1-16所示。

图1-16　新建JavaScript文件

（2）在文件类型列表中选中“JavaScript文件”，然后单击“打开”按钮，打开JavaScript脚本编辑窗口，如图1-17所示。

图1-17　JavaScript脚本编辑窗口

（3）输入下面的JavaScript语句。

document.write("使用外部JavaScript脚本")

（4）按【Ctrl+S】组合键打开“另存文件为”对话框。如图1-18所示，在“文件名”输入框中输入test1-3.js作为文件名，单击“保存”按钮完成保存操作。

图1-18　保存JavaScript脚本文件

（5）选择“文件\新建\文件”命令，新建一个HTML文件，代码如下。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="test1-3.js"></script>
</body>
</html>

（6）按【Ctrl+S】组合键保存HTML文件，文件名为test1-3.html。

（7）按【Ctrl+Shift+W】组合键，打开浏览器，查看HTML文件显示结果，如图1-19所示。

图1-19　出现中文乱码

出现中文乱码是因为在Visual Studio中，HTML文件的默认编码为UTF-8，而JavaScript文件的默认编码为GB 2312。两者虽然都支持中文，但不一致，所以出现了中文乱码。

（8）在Visual Studio中切换到test1-3.js脚本编辑窗口，再选择“文件\test1-3.js另存为”命令，打开“另存文件为”对话框。单击“保存”按钮右侧的箭头按钮，展开保存命令菜单，如图1-20所示。

图1-20　保存命令菜单

（9）选择“编码保存”命令，打开“确认另存为”对话框，如图1-21所示。

图1-21　“确认另存为”对话框

（10）单击“是”按钮，打开“高级保存选项”对话框，如图1-22所示。

图1-22　“高级保存选项”对话框

（11）在“编码”下拉列表中选中“Unicode(UTF-8带签名）-代码页65001”选项，单击“确定”按钮，完成编码保存操作。这样，就将JavaScript文件编码更改为UTF-8，与HTML文件一致。

（12）切换到浏览器，单击“刷新”按钮刷新页面，可看到中文正确显示了，如图1-23所示。

图1-23　正确显示中文

有读者可能会问：HTML文件和JavaScript文件编码不一致导致了中文乱码，为什么更改JavaScript文件编码，而不是HTML文件编码呢？

事实上，只要求HTML文件和JavaScript文件中文编码一致，即可解决中文乱码问题。所以，也可使用Visual Studio的“编码保存”功能将HTML文件编码修改为GB 2312，来匹配JavaScript文件编码。此时，需要将HTML文件中的“<meta charset="utf-8" />”修改为“<meta charset="gb2312" />”，即HTML文件保存的编码格式和charset指定的编码保持一致。

1.3.3 作为事件处理程序

JavaScript支持事件，关于事件处理的详细内容将在后面的章节中进行详细讲解。JavaScript脚本代码可直接作为事件处理程序代码。

【例1-4】　将JavaScript脚本代码作为事件处理程序代码。源文件：01\test1-4.html。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="button" value="请单击按钮" onclick="a = 1; b = 2;alert('单击按钮执行JavaScript语句弹出对话框\na+b='+(a+b))"/>
</body>
</html>

HTML按钮的onclick属性通常设置为处理事件的函数名称，本例中放置了3条JavaScript语句。在浏览器中打开页面后，单击“请单击按钮”按钮，可打开一个对话框，如图1-24所示。

图1-24　将JavaScript代码作为事件处理程序代码

1.3.4 作为URL

在HTML文件中，使用“javascript”作为协议名称，即可将JavaScript语句直接放在URL中。在访问该URL时，JavaScript语句被执行。

【例1-5】　将JavaScript脚本作为超级链接地址。源文件：01\test1-5.html。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="javascript:a = 1; b = 2;alert('单击链接执行JavaScript语句弹出对话框\na+b='+(a+b))">
        请单击此链接
    </a>
</body>
</html>

在页面中单击“请单击此链接”链接时，会打开对话框，如图1-25所示。

图1-25　将JavaScript脚本作为URL