但是,我们须要一个事情环境来运行我们的脚本,由于本教程是在线的,以是浏览器是一个不错的选择。
我们会尽可能少地利用浏览器特定的命令(比如 alert),以是如果你打算专注于另一个环境(比如 Node.js),你就不必多花韶光来关心这些特定指令了。
我们将在本教程的下一部分中专注于浏览器中的 Javascript

首先,让我们看看如何将脚本添加到网页上。
对付做事器端环境(如 Node.js),你只须要利用诸如 \公众node my.js\"大众 的命令行来实行它。

“script” 标签

html5怎么添加到网页若何将 JavaScript 代码添加到网页中以及 script 标签的属性 JavaScript

JavaScript 程序可以在 <script> 标签的帮助下插入到 HTML 文档的任何地方。

比如:

<!DOCTYPE HTML><html><body> <p>script 标签之前...</p> <script> alert('Hello, world!'); </script> <p>...script 标签之后</p></body></html>

<script> 标签中包裹了 JavaScript 代码,当浏览器碰着 <script> 标签,代码会自动运行。

当代的标记

<script> 标签有一些现在很少用到的属性,但是我们可以在老代码中找到它们:

type 属性:<script type=...>

在老的 HTML4 标准中,哀求 <script> 标签有 type 属性。
常日是 type=\公众text/javascript\"大众
这样的属性声明现在已经不再须要。
而且,当代 HTML 标准 —— HTML5 已经完备改变了此属性的实际含义。
现在,该属性可以被用于 JavaScript 模块。
但那是一个高等一点的话题,我们将会在此教程的其他章节中磋商 JavaScript 模块。

language 属性:<script language=...>

这个属性是为了显示脚本利用的措辞。
这个属性现在已经没有任何意义,由于措辞默认便是 JavaScript。
不再须要利用它了。

脚本前后的注释:

在非常古老的书本和指南中,你可能会在 <script> 标签里面找到注释,就像这样:

<script type=\"大众text/javascript\"大众><!-- ...//--></script>当代 JavaScript 中已经不这样利用了。
这些注释是用于不支持 <script> 标签的古老的浏览器隐蔽 JavaScript 代码的。
由于最近 15 年内发布的浏览器都没有这样的问题,因此这种注释能帮你辨认出一些老掉牙的代码。

外部脚本

如果你有大量的 JavaScript 代码,我们可以将它放入一个单独的文件。

脚本文件可以通过 src 属性添加到 HTML 文件中。

<script src=\"大众/path/to/script.js\"大众></script>

这里,/path/to/script.js 是脚本文件从站点根目录开始的绝对路径。
当然也可以供应当前页面的相对路径。
例如,src =“script.js” 表示当前文件夹中的 “script.js” 文件。

我们也可以供应一个完全的 URL 地址,例如:

<script src=\公众https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js\"大众></script>

要附加多个脚本,请利用多个标签:

<script src=\"大众/js/script1.js\"大众></script><script src=\"大众/js/script2.js\公众></script>…

请把稳:

一样平常来说,只有最大略的脚本才嵌入到 HTML 中。
更繁芜的脚本存放在单独的文件中。

利用独立文件的好处是浏览器会下载它,然后将它保存到浏览器的缓存[1]中。

之后,其他页面想要相同的脚本就会从缓存中获取,而不是下载它。
以是文件实际上只会下载一次。

这可以节省流量,并使得页面(加载)更快。

提醒:如果设置了 src 属性,script 标签内容将会被忽略。

一个单独的 <script> 标签不能同时有 src 属性和内部包裹的代码。

这将不会事情:

<script src=\"大众file.js\"大众> alert(1); // 此内容会被忽略,由于设定了 src</script>

我们必须进行选择,要么利用外部的 <script src=\"大众…\"大众>,要么利用正常包裹代码的 <script>。

为了让上面的例子事情,我们可以将它分成两个 <script> 标签。

<script src=\公众file.js\"大众></script><script> alert(1);</script>

总结

我们可以利用一个 <script> 标签将 JavaScript 代码添加到页面中。
type 和 language 属性不是必需的。
外部的脚本可以通过 <script src=\公众path/to/script.js\公众></script> 的办法插入。

有关浏览器脚本以及它们和网页的关系,还有很多可学的。
但是请记住,教程的这部分紧张是针对 JavaScript 措辞本身的,以是我们不该被浏览器特定的实现分散自己的把稳力。
我们将利用浏览器作为运行 JavaScript 的一种办法,这种办法非常便于我们在线阅读,但这只是很多种办法中的一种。

作业题

1. 显示一个提示语

主要程度:⭐️⭐️⭐️⭐️⭐️

创建一个页面,然后显示一个 “I'm JavaScript!”。

在沙箱中或者在你的硬盘上做这件事都无所谓,只要确保它能运行起来。

你可以先看一下 新窗口的演示结果[2]。

在微信"大众年夜众号「技能漫谈」后台回答 1-2-1 获取本题答案。

2. 利用外部的脚本显示一个提示语

主要程度:⭐️⭐️⭐️⭐️⭐️

打开题目 1 的答案。
将答案中脚本的内容提取到一个外部的 alert.js 文件中,放置在相同的文件夹中。

打开页面,确保它能够事情。

你可以先看一下 新窗口的演示结果[3]。

在微信公众年夜众号「技能漫谈」后台回答 1-2-1 获取本题答案。

当代 JavaScript 教程:开源的当代 JavaScript 从入门到进阶的优质教程。
React 官方文档推举,与 MDN 并列的 JavaScript 学习教程[4]。

在线免费阅读:https://zh.javascript.info/

参考资料

[1] 缓存: https://en.wikipedia.org/wiki/Web_cache

[2] 新窗口的演示结果: https://zh.js.cx/task/hello-alert/solution/

[3] 新窗口的演示结果: https://zh.js.cx/task/hello-alert/solution/

[4] React 官方文档推举,与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources

关注微信"大众年夜众号「技能漫谈」,订阅更多精彩内容。