第一个JavaScript程序
你好,世界!
本教程的这一部分是关于核心 JavaScript,即语言本身。
但是我们需要一个工作环境来运行我们的脚本,而且由于本书是在线的,浏览器是一个不错的选择。我们会将特定于浏览器的命令(例如alert)的数量保持在最低限度,这样如果您打算专注于另一个环境(例如 Node.js),就不会在这些命令上花费时间。在本教程的下一部分,我们将重点介绍浏览器中的 JavaScript 。
首先,让我们看看如何将脚本附加到网页上。对于服务器端环境(如 Node.js),您可以使用类似"node my.js".
“脚本”标签
JavaScript 程序几乎可以使用<script>标签插入到 HTML 文档的任何位置。
例如:
<!DOCTYPE HTML> <html> <body> <script> alert( '你好,世界!' ); </script> </body> </html>
该<script>标签包含当浏览器处理标签,其被自动执行JavaScript代码。
现代标记
该<script>标签具有很少采用时下,但仍可以在旧代码中发现了几个属性:
该type属性:<script type=…>
旧的 HTML 标准 HTML4 要求脚本具有type. 通常是type="text/javascript"。它不再需要了。此外,现代 HTML 标准完全改变了该属性的含义。现在,它可以用于 JavaScript 模块。但这是一个高级主题,我们将在教程的另一部分讨论模块。
该language属性:<script language=…>
此属性旨在显示脚本的语言。此属性不再有意义,因为 JavaScript 是默认语言。没有必要使用它。
脚本前后的注释。
在实际编程中,您可能会在<script>标签中使用到到注释,如下所示:
<script type="text/javascript"><!-- ... //--></script>
这个技巧在现在的 JavaScript 可以不使用。这些注释对不知道如何处理<script>标签的旧浏览器隐藏了 JavaScript 代码。
外部脚本
如果我们有很多 JavaScript 代码,我们可以把它放到一个单独的文件中。
脚本文件通过以下src属性附加到 HTML :
<script src="/path/to/script.js"></script>
这里,/path/to/script.js是从站点根目录到脚本的绝对路径。还可以提供当前页面的相对路径。例如,src="script.js"就像 一样src="./script.js",表示"script.js"当前文件夹中的一个文件。
我们也可以提供完整的 URL。例如:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
要附加多个脚本,请使用多个标签:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
请注意:
通常,只将最简单的脚本放入 HTML。更复杂的文件驻留在单独的文件中。
单独文件的好处是浏览器将下载它并将其存储在其缓存中。
引用相同脚本的其他页面将从缓存中获取它而不是下载它,因此该文件实际上只下载一次。
这减少了流量并使页面更快。
如果src设置,脚本内容将被忽略。
单个<script>标签不能同时包含src属性和代码。
这样是无法运行内部程序的:
<script src="file.js"> alert(1); // the content is ignored, because src is set </script>
我们必须选择外部<script src="…">或常规<script>代码。
上面的例子可以分成两个脚本来工作:
<script src="file.js"></script> <script> alert(1); </script>
总结
我们可以使用<script>标签向页面添加 JavaScript 代码。
将type和language属性不是必需的。
外部文件中的脚本可以插入<script src="path/to/script.js"></script>