JS3 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

怎样向页面添加 JavaScript？

可以像添加 CSS 那样将 JavaScript 添加到 HTML 页面中。CSS 使用 <link> 元素链接外部样式表，使用 <style> 元素向 HTML 嵌入内部样式表，JavaScript 这里只需一个元素——<script>。我们来看看它是怎么工作的。

内部 JavaScript

1. 首先，下载示例文件 apply-javascript.html。放在一个好记的文件夹里。
2. 分别在浏览器和文本编辑器中打开这个文件。你会看到这个 HTML 文件创建了一个简单的网页，其中有一个可点击按钮。
3. 然后转到文本编辑器，在 </head> 标签结束前插入以下代码：

<script>

  // 在此编写 JavaScript 代码

</script>

1. 下面，在 <script> 元素中添加一些 JavaScript 代码，这个页面就能做一些更有趣的事。在“/ /在此编写 JavaScript 代码”一行下方添加以下代码：

document.addEventListener("DOMContentLoaded", function() {
  function createParagraph() {
    let para = document.createElement('p');
    para.textContent = '你点击了这个按钮！';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
  }
});

1. 保存文件并刷新浏览器，然后你会发现，点击按钮文档下方将会添加一个新段落。

备注： 如果示例不能正常工作，请依次检查所有步骤，并保证没有纰漏。原始文件是否以 .html 为扩展名保存到本地了？</body> 标签前是否添加了 <script> 元素？JavaScript 代码输入是否正确？ JavaScript 是区分大小写的，而且非常精确，所以你需要准确无误地输入所示的句法，否则可能会出错。

备注： 你可以在 GitHub 上查看此版本 apply-internal.html (也可在线查看)。

外部 JavaScript

这很不错，但是能不能把 JavaScript 代码放置在一个外部文件中呢？现在我们来研究一下。

1. 首先，在刚才的 HTML 文件所在的目录下创建一个名为 script.js 的新文件。请确保扩展名为 .js，只有这样才能被识别为 JavaScript 代码。
2. 将 <script> 元素替换为：

<script src="script.js" async></script>

1. 在 script.js 文件中，添加下面的脚本：

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = '你点击了这个按钮！';
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

1. 保存并刷新浏览器，你会发现二者完全一样。但是现在我们把 JavaScript 写进了一个外部文件。这样做一般会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

备注： 你可以在 GitHub 上查看这个版本 apply-external.html 以及 script.js (也可在线查看).

内联 JavaScript 处理器

注意，有时候你会遇到在 HTML 中存在着一丝真实的 JavaScript 代码。它或许看上去像这样：

function createParagraph() {
  const para = document.createElement('p');
  para.textContent = '你点击了这个按钮！';
  document.body.appendChild(para);
}

<button onclick="createParagraph()">点我呀</button>