【Javascript入门-3】script 标签引入js

前言

在开始学习之前，最好了解过一些Html的基础知识。因为这一章节介绍的是script标签，如果你还不了解少么是标签，还需要去了解html的基础知识。

script 标签

在 HTML 中，javaScript 代码通常插入在标签之间。

您可以在 HTML 文档中放置任意数量的脚本。脚本可以放在， 或HTML 页面的部分，或两者中。

在Html文档中可以编写任意多的script标签，编写任意多的js代码。script标签可以放在， 或中。

放在body和head的区别

这样做的原因是 HTML 从上到下加载。头部首先加载，然后是身体，然后是身体内部的所有东西。如果我们将 JavaScript 放在 head 部分，整个 JavaScript 将在加载任何 HTML 之前加载，这可能会导致一些问题：

如果JavaScript 中有代码会在 JavaScript 代码加载时立即更改 HTML，那么实际上还没有任何可用的 HTML 元素对其产生影响，因此看起来 JavaScript 代码似乎不起作用，而您可能会出错。

如果有很多 JavaScript，它会明显减慢页面的加载速度，因为它会在加载任何 HTML 之前加载所有 JavaScript。

当您将 JavaScript 放在 HTML 正文的底部时，它会在任何 JavaScript 加载之前让 HTML 有时间加载，这可以防止错误并加快网站响应时间。

让我们通过一个例子来了解更多（不要担心我使用的语法，你只需要了解我们想要做什么）。

放在head中

新建test.html

编写代码

有如下的代码,代码的逻辑是，将文本的颜色设置为绿色。

改变颜色

运行

在浏览器中运行test.html。效果如下：字体的颜色并没有变成绿色。

这里我们可以重新验证上文说的：脚本在p标签之前加载了。在加载脚本的时候，是无法找到p标签的，最终导致无法改变颜色。

放在body中

现在让我们尝试相反的方法，在 body 的底部：

改变颜色

还有一件事：虽然最好将 JavaScript 包含在 HTML 的末尾，但将 JavaScript 放在HTML 的中并不总是会导致错误。

外部 JavaScript

JavaScript 也可用于外部文件。JavaScript 文件的文件扩展名为“.js”。要使用外部脚本，请将脚本文件的名称放在脚本标记的 src 属性中。

|

外部 JavaScript 的优点：

将 JavaScript 代码放在外部 js 文件中比内联脚本有一些优势：

分离 HTML 和 JavaScript 代码将有助于更轻松地管理代码库。

设计人员可以与编码人员并行工作而不会发生代码冲突。

适用于现代源代码版本控制系统，例如 GIT。这意味着这些文件中的每一个都将维护一个历史记录，并且可以由多个程序员签入、签出。

代码和 HTML 都易于阅读。

外部 JavaScript 文件由浏览器缓存，可以加快页面加载时间。

许多流行的 JavaScript 包都托管在内容交付网络 (cdn) 上，您可以使用src 中的 URL 简单地指向它们*，*从而避免将 js 文件复制到本地文件夹。

script标签到底放在哪里

以下是浏览器加载带有

JavaScript：

// my-script.js document.addEventListener("DOMContentLoaded", function() { // this function runs when the DOM is ready, i.e. when the document has been parsed document.getElementById("user-greeting").textContent = "Welcome back, Bart"; });

因为您的浏览器不知道my-script.js在下载和执行之前不会修改文档，所以解析器停止解析。

过时的推荐

解决这个问题的旧方法是将

具有 async 属性的脚本是异步执行的。这意味着脚本在下载后立即执行，同时不会阻止浏览器。这意味着可以在脚本 1 之前下载和执行脚本 2。

根据http://caniuse.com/#feat=script-async，97.78% 的浏览器都支持这个。

延迟defer

具有 defer 属性的脚本按顺序执行（即第一个脚本 1，然后是脚本 2）。这也不会阻止浏览器。

与异步脚本不同，延迟脚本仅在整个文档加载后才执行。

根据http://caniuse.com/#feat=script-defer，97.79% 的浏览器都支持这个。98.06% 至少部分支持它。

JavaScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。