这是我参与「第四届青训营」笔记创作活动的第4天

JavaScript

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，被广泛用于Web应用开发，通常 JavaScript 是通过嵌入在HTML中实现自身功能的。
此外，JavaScript 是一种解释型脚本语言，使用 JavaScript 编写的代码不需要编译,可以直接运行。
它和Java、c++类似，是一种基于对象的脚本语言，可以用来创建对象并操作已有对象。

在我看来，JavaScript和众多编程语言相似，都是用于编写需要的一定功能，不同的是JavaScript 作为一种脚本语言，只有和HTML、CSS互相配合，才能共同实现网页的设计开发，仅靠JavaScript 自身是无法实现想要得到的功能的。

如何向页面添加JavaScript

1. 在页面中直接嵌入，例如：

 
 <!DOCTYPE html>
<html lang="zh-Hans">
 <head>
   <meta charset="utf-8">
   <title>使用 JavaScript 的示例</title>
   <script>
   	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);
   	}
   	});
   </script>
 </head>
 <body>
   
   <button>点我呀</button>
 </body>
</html>

即在 </head> 标签结束前插入<script>和</script>，并在 <script>元素中添加 JavaScript 代码。

2. 链接外部JavaScript文件，例如：

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);
}

mental.html

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
    <script src="script.js" async></script>
  </head>
  <body>
    <button>点我呀</button>
  </body>
</html>

这样可以将JavaScript 代码放置在一个外部文件中，在HTML内部就可以链接js文件，一般会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读。

3. 内联 JavaScript 处理器

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title>使用 JavaScript 的示例</title>
  </head>
  <body> 
    <a href="javascript:alert('你好JavaScript')">测试</a> 
  </body> 
</html>

脚本调用

HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用文档对象模型 DOM），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。因此，我们采用了不同的方法来解决这一问题。

采用内部事件监听器

document.addEventListener("DOMContentLoaded", function() {
  . . .
});

外部

async

如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。

defer

如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

小结

通过今天的学习，我了解了JavaScript的特点，能够在HTML上初步编写JavaScript 脚本。这是一个很好的开始，我认为JavaScript作为一门基于对象的编程语言，有着和C++的共性，我们要触类旁通，学习其特点，运用好基础，从而让JavaScript的学习之路变得简单通畅。

初识JavaScript|青训营笔记

JavaScript

如何向页面添加JavaScript

脚本调用

小结