本文的学习记录参考https://developer.mozilla.org/zh-CN/docs/Learn 。只记录本人不会的，并不会很详细。
JavaScript 到底是什么
JavaScript 是一门动态编程语言，可为网站添加交互功能。（例如：游戏、动态样式，动画，以及在按下按钮或收到表单数据时做出的响应，等）。
JavaScript 的应用场合极其广泛。简单到幻灯片、照片库、浮动布局和响应按钮点击。复杂到游戏、2D 和 3D 动画、大型数据库驱动程序，等等
JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：
- 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本，等等。
- 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
- 第三方框架和库 —— 用来快速构建网站和应用。
注：也可以将 <script> 放在 body 中，但要放在底部。这是因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。
<script> 若置于 head 中，必须指明 async，而置于 body 中则无需指明。
变量的不同类型
函数
函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。
document.querySelector 和 alert 是浏览器内置的函数，随时可用。
事件
事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。
HTML DOM querySelector() 方法
document.querySelector("#demo");
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
设置属性的语句有：setAttribute(), myHeading.textContent ,prompt('请输入你的名字')会弹出对话框，localStorage全局缓存
setItem(),getItem()
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute('src','images/firefox2.png');
} else {
myImage.setAttribute('src','images/firefox-icon.png');
}
};function setHeading(name) {
let myHeading = document.querySelector('h1');
myHeading.textContent = 'Mozilla 酷毙了，' + name + '！';
}function setUserName() {
let myName = prompt('请输入你的名字');
localStorage.setItem('name', myName);
setHeading(myName);
}
let storedName = localStorage.getItem('name');let myButton = document.querySelector('button');
myButton.onclick = setUserName;补充
Web Storage 概念和用法
Web Storage 包含如下两种机制：
sessionStorage为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。localStorage同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。
