开始之前

没想到我 🥑 也有今天，还要从 JS 基础开始看起。

JavaScript 到底是什么

是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

• 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
• 第三方 API —— 让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
• 第三方框架和库 —— 用来快速构建网站和应用。

Hello World

// 用DOM API querySelector()选中了h1标签并存储在了myHeading变量中
let myHeading = document.querySelector('h1');
// 修改h1标签中的textContent属性
myHeading.textContent = 'Hello world!';

JavaScript 快速入门

变量

变量是存储值的容器。要声明一个变量，需要使用 let 或 var 关键字，然后输入合适的变量名。

let myVariable;
var myVariable2;

变量名大小写敏感…

变量赋值、变量值的获取、变量赋值后可更改、变量可以有不同的数据类型

• String
• Number
• Boolean
• Array
• Object

行注释、块注释

运算符

• 一元运算符 取非：！

• 二元运算符 加：+ 减、乘、除：-、*、/ 赋值：= 等于：=== 不等于：!==

• 三元运算符 ? :

条件语句

if … else

函数

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。

完善实例网页

图像切换器

个性化欢迎信息

小结

上代码

// let myHeading = document.querySelector("h1");
// myHeading.textContent = "Hello world!";

document.querySelector('html').onclick = function () {
  alert('别戳我，我怕疼。');
};

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

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

function setUserName() {
  let myName = prompt('请输入你的名字。');
  if (!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.innerHTML = 'Mozilla 酷毙了，' + myName;
  }
}

if (!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla 酷毙了，' + storedName;
}

myButton.onclick = function () {
  setUserName();
};