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

JavaScript快速入门：

1. 变量

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

（注意，JavaScript中不同大小写对应的是不同的变量）

变量定义后可以赋值：

myVariable = '李雷';

也可以直接初始化：

let myVariable = '李雷';

下列表格是一些不同类型的变量值的解释：

变量	解释	示例
String	字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）括起来	`let myVariable = '李雷';`
Number	数字：无需引号	`let myVariable = 10;`
Boolean	布尔值（真/假）：true/false是JS里的特殊关键字，无需引号。	`let myVariable = true;`
Array	数组：用于在单一引用中存储多个值的结构。	`let myVariable = [1, 李雷, 韩梅梅, 10];`元素引用方法：`myVariable[0]`, `myVariable[1]`...
Object	对象：JavaScript里一切皆对象，一切皆可储存在变量里。

2. 注释

JavaScript中用/* */框起来的内容为注释

单行注释也可以用//

/*这是
一个
注释*/

//这也是一个注释

3. 运算符

运算符是一类数学符号，可以根据两个值（或变量）产生结果。以下表格中介绍了一些最简单的运算符。

4. 条件语句

条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是if…else。

let iceCream = 'chocolate';

if (iceCream === 'chocolate') {

    alert('我最喜欢巧克力冰激淋了。');

} else {

    alert('但是巧克力才是我的最爱呀……');

}

5. 函数

函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。

6. 事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码作为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。

document.querySelector('html').onclick = function() {

    alert('别戳我，我怕疼。');

}

将事件与元素绑定有许多方法。在这里选用了<html>元素，把一个匿名函数（就是没有命名的函数。这里的匿名函数包含单击鼠标时要运行的代码）赋值给了html的onclick属性。

匿名函数还有另一种我们称之为箭头函数，箭头函数使用()=>代替function()

实战演练

1. 添加鼠标互动效果

2. 添加图片切换器

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

获取这张图片的src属性值。
用一个条件句来判断src属性值是否等于原始图像的路径：

如果是，则将src的值改为第二章图片的路径，并在<img>内加载该图片。
如果不是，则把src的值重新设置为原始图片的路径。

（图片源于网络）

3. 添加个性化欢迎信息

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

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

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

参考资料：

Web入门学习

Web入门4 | 青训营笔记