一、什么是JavaScript

1.JavaScript是一门完备的动态编程语言。当应用于HTML文档时，可为网站提供动态交互特征。

2.JavaScript的应用场景极其广泛，简单到幻灯片，照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D动画、大型数据库驱动程序等等。

3.可运用JavaScript核心编写大量实用工具，其中包括：

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

二、"Hello World!"示例

1.先创建一个名为scripts的文件夹，然后在其中创建一个名为main.js的文件

2.下一步，在index.html文件</body>标签前的新行添加以下代码

<script src="scripts/main.js" defer></script>

3.与CSS的<link>元素类似，它将JavaScript引入页面以作用于HTML（以及CSS等页面上所有内容）

4.接下来将以下代码添加到main.js文件中:

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

5.最后，保存HTML和JavaScript文件，用浏览器打开index.heml，可以看到JavaScript把网页的标题改成了"Hello world!"

6.代码解释：首先用querySelector()函数获取标题的引用，并把它储存在myHeading变量中，之后，把myHeading变量的属性textContent（标题内容）改为"Hello world!"

三、JavaScript快速入门

1.变量

声明变量

let myVariable;

声明后赋值变量

let myVariable="李雷";

定义并赋值变量

let myVariable = "李雷";

可以通过变量名取得变量的值

myVarible;

变量在赋值后是可以更改的

let myVariable="李雷";
myVariable="韩梅梅"

2.数据类型

3.注释

单行注释

// 这是一条注释。

多行注释

/*
这里的所有内容
都是注释。
*/

4.运算符

5.条件语句

常用的条件语句是if...else

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("我最喜欢巧克力冰激淋了。");
} else {
  alert("但是巧克力才是我的最爱呀……");
}

6.函数

封装函数

let myVariable = document.querySelector("h1");

alert("hello!");

document.querySelector和alert是浏览器内置的函数，随时可用

自定义函数

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

调用自定义函数

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

7.事件

事件是为网页添加真实的交互能力。最简单的是点击事件，鼠标的点击操作会触发该事件，如下：

（1）在这里选用了<html>元素，然后调用了它的addEventListener()方法，将事件名称('click')以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用函数

document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼。");
});

（2）刚刚外面传递给addEventListener()的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种外面称之为箭头函数的写法，箭头函数使用()=>代替function():

document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼。");
});

四、完善实例网页

1.添加一个图像切换器

这里将用新的DOM API为网页添加另一张图片，并用JavaScript使图片在点击时进行切换。 1.先找到一张想要在页面上展示的图片 2.将这张图片存储在images目录下 3.将图片重命名为'firefox2.png'(去掉引号) 4.打开main.js文件，输入下面的JavaScript代码（请删除刚才的"hello world"脚本）：

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

5.保存所有文件并用浏览器打开index.heml，点击图片就可以切换了。

这里首先把<img>元素的引用放在myImage变量里，然后将这个变量的onclick事件与一个匿名函数绑定。每次点击图片时：

（1）获取这张图片的src属性值

（2）用一个条件句来判断src的值是否等于原始图像的路径：

如果是，则将src的值改为第二张图片的路径，并在<img>内加载该图片。
如果不是（意味着它已经修改过），则把src的值重新设置为原始图片的路径，即原始状态。

2.添加个性化欢迎信息

可以添加代码使用户在初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。

1.打开index.html，在<script>标签前添加以下代码，将在页面底部显示一个‘切换用户’字样的按钮：

<button>切换用户</button>

2.将以下JavaScript代码原封不动添加到main.js文件底部，将获取新按钮和标题的引用，并保存至变量中：

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

3.然后添加以下函数来设置个性化欢迎信息（函数需要在调用后生效，下文中提供了两种对该函数的调用方式）

function setUserName() {
  let myName = prompt("请输入你的名字。");
  localStorage.setItem("name", myName);
  myHeading.textContent = "Mozilla 酷毙了，" + myName;
}

首先调用了prompt()函数——与alert()类似会弹出一个对话框，需要用户输入数据
用户的输入数据存储在myName变量里
然后调用localStorageAPI,它可以将数据存储在浏览器中供后续获取，这里用localStorage的setItem()函数来创建一个'name'数据项，并把myName变量复制给它
最后将textContent属性设置一个欢迎字符串加上这个新设置的名字

4.接下来，添加以下的if...else块，称之为初始代码，因为它在页面初次读取时精选构造工作：

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

首先使用取非运算符（逻辑非，用！表示）来检测'name'数据是否存在
若不存在，即调用setUserName()创建
若存在（即用户上次访问时设置过），调用getItem()获取保存名字，像上文的setUserName()那样设置textContent

5.最后，为按钮设置onclick事件处理器。当按钮按下时即运行setUserName()函数。这样用户就可以通过按这个按钮来自由设置新名字了：

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

第一次访问网页时，页面将询问用户名并发出一段个性化的信息。可随时点击按钮来改变用户名。因为用户名是保存在localStorage里的，网页关闭后也不会丢失，因此重新打开浏览器时所设置的名字信息将依然存在

五、学习收获

1.这一节课学习了JavaScript的基础，更进一步的学习了JavaScript

2.让我感觉JavaScript会比前面的两节会难一点，更有写代码的感觉，因为有变量，条件语句，还有事件的响应等等，就是在HTML和CSS将网页内容填充和美化后的基础上，更进一步的让网页动起来，达到我们想要的效果。

3.接下来也会继续深入的学习如何写好JavaScript，加油。

三、JavaScript基础 ｜ 青训营