03_MDN前端基础学习_JS-简单的操作/获取HTM中的元素/变量/注释/运算符/函数/事件

1）是什么？

JavaScript 是一门编程语言，可为网站添加交互功能。（例如：游戏、动态样式，动画，以及在按下按钮或收到表单数据时做出的响应，等）。

2）“Hello World”示例

刚刚JS中使用的函数来源文档对象模型 (DOM)

https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

3）JavaScript 快速入门

1，浏览器开发者工具中的js控制台

JavaScript控制台是一个非常有用的工具，用于调试没有按预期运行的JavaScript。它允许您针对浏览器当前加载的页面运行JavaScript行，并报告浏览器尝试执行代码时遇到的错误。

2，变量（Variable）

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

let myVariable;

https://news.codecademy.com/your-guide-to-semicolons-in-javascript/

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_Types#变量
https://mothereff.in/js-variables

JavaScript 对大小写敏感，myVariable 和 myvariable 是不同的。如果代码出现问题了，先检查一下大小写！

接下来可以赋值，和python一样：

myVariable = '李雷';

也可以将定义、赋值操作写在同一行：
let myVariable = '李雷';

可以直接通过变量名取得变量的值：
myVariable;

变量在赋值后是可以更改的：
let myVariable = '李雷';
myVariable = '韩梅梅';

变量的一堆数据类型：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

3，注释

类似于 CSS，JavaScript 中可以添加注释。

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

如果注释只有一行，可以更简单地放在两个斜杠之后，就像这样：

// 这是一条注释。

4，运算符

运算符 是一类数学符号，可以根据两个值（或变量）产生结果。

这里说“根据两个值（或变量）产生结果”是不严谨的，计算两个变量的运算符称为“二元运算符”，
还有一元运算符和三元运算符，下表中的“取非”就是一元运算符。

完整的表达式和运算符：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators

不同类型数据之间的计算可能出现奇怪的结果，因此必须正确引用变量，才能得出预期结果。比如在控制台输入 “35” + “25”，为什么不能得到 60？因为引号将数字转换成了字符串，所以结果是连接两个字符串而不是把两个数字相加。输入 35 + 25 才能得到正确结果。

5，条件语句

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

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

js中的判断是三个 === ，alert函数在浏览器窗口内弹出一个警告框

6，函数（Function）

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

浏览器内置函数：
let myVariable = document.querySelector('h1'); 获取选定h1
alert('hello!'); 浏览器窗口内弹出警告框

自定义函数：
function multiply(num1, num2) {
	let result = num1 * num2;
	return result;
}
使用：
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

return 语句告诉浏览器当前函数返回 result 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的 作用域。（详见 变量作用域。）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope

7，事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：

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

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

等价于

let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

4）完善示例网页

1，添加一个图像切换器

这里将用新的 DOM API 为网页添加另一张图片，并用 JavaScript 使图片在点击时进行切换。

2，添加个性化欢迎信息

下面来添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化欢迎信息（即在标题中添加用户的名字）。名字信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开，仍可得到之前的信息。还会添加一个选项，可以根据需要改变用户名字以更新欢迎信息。
Web Storage API ：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API

就算关闭了浏览器，再次打开的时候，之前输入的名字还是会被保留，继续展示的，因为是保存在localStorage中的