第三弹：JavaScript 学习记录

1.1. 了解

1.1.1. 为什么学习JavaScript

1.1.2. JavaScript简介

1.1.3. JavaScript / ECMAScript

1.1.4. JavaScript使用方式

1.1.5. JavaScript输出

1.1.6. JavaScript语句

1.1.7. JavaScript注释

1.1.8. JavaScript变量及常量

1.1.9. JavaScript数据类型

1.1.10. JavaScript类型转换

1.1.11. 严格模式

1.1.12. JavaScript提升

1.2. JavaScript运算符

1.2.1. 算数运算符

1.2.2. 赋值运算符

1.2.3. 比较运算符

1.2.4. 逻辑运算符

1.2.5. 位运算符

1.2.6. 类型运算符(对象讲)

1.2.7. 运算符的优先级

1.2.8. 运算符短路

1.2.9. ES6新增运算符(讲完对象之后讲)

1.3. 流程控制

1.3.1. 1. 什么是流程控制

1.3.2. 2. 什么是流程

1.3.3. 3.流程的分类

1.3.4. 4. 顺序结构

1.3.5. 5. 分支结构

1.3.6. 6. 分支结构的分类

1.3.6.1. 1.单项分支结构

1.3.6.2. 2.双项分支结构

1.3.6.3. 3. 多项分支结构

1.3.6.4. 4. 巢状分支结构

1.1. 了解

1.1.1. 为什么学习JavaScript

JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
我们学习 JavaScript，以及 JavaScript 如何与 HTML 和 CSS 协同工作的知识。

1.1.2. JavaScript简介

JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏和显示 HTML 元素

1.1.3. JavaScript / ECMAScript

ECMA是“European Computer Manufacturers Association”的缩写，中文称欧洲计算机制造联合会。这个组织的目标是评估，开发和认可电信和计算机标准。
ECMA是标准， JavaScript是实现
- 类似HTML5是标准， IE10、Chrome、FF都是实现
- 目的是让所有前端脚本都实现ECMA
- 目前只有JavaScript实现ECMA标准， ECMAScript ≈ JS
ECMAScript简称ECMA或ES（ES6）
目前版本
- 高级浏览器支持ES6
- 低级浏览器主要支持ES3.1

时间	版本	说明
1996年		JavaScript 的创造者 Netscape 公司将 JavaScript 提交给标准化组织 ECMA
1997年	ES1	ECMA 发布 262 号标准文件（ECMA-262），规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript (ES)
1998年	ES2	内容编辑加工，没有特性修改
1999年	ES3	有较完善的修改，成为JavaScript的通行标准，得到了广泛支持
2000年	ES4	2008年终止也称作JavaScript 2，因改动太大没有通过，Harmony项目启动来跟进，ES4大部分内容被 ES6 继承. Harmony部分内容放到ES6之后
2009年	ES5(ES3.1)	新功能主要包括：JSON对象（包含parse/stringify等方法）、Array和Object增加一些方法，严格模式（use strict），函数的bind方法
2011年	ES5.1	成为 ISO 国际标准（ISO/IEC 16262:2011)，到了2012年底，主流浏览器都支持ECMAScript 5.1的全部功能
2015年	ES2015(ES6)	做了大量的更新，但向后兼容。ES6是一次重大改进。部分功能：let/const、变量的解构赋值、Promise、箭头函数…等
2016年	ES2016(ES7)	新功能主要包括：Array.prototype.includes检查数组中是否存在值；（区别ES6字符串的includes方法） Exponentiation Operator 求幂运算 (a ** b等价于Math.pow(a,b))
2017年	ES2017(ES8)	部分功能： 1.Object.values/entries/getOwnPropertyDescriptors 2.String.prototype.padStart/padEnd 3.函数参数列表和调用中的尾逗号（Trailing commas） 4.Async Functions 异步函数（async/await）
2018年	ES2018(ES9)	现在已经可用了。新增异步迭代、Promise.finally()、Rest/Spread 属性、正则表达式命名捕获组、正则表达式反向断言、非转义序列的模板字符串......

1.1.4. JavaScript使用方式

在 HTML 中，JavaScript 代码必须位于<script> 与 </script> 标签之间。
```
<script>//书写javascript代码
</script>
```

在HTMl标签中使用

<a href="javascript:alert('this is a test')">去百度</a>
<p onclick="alert(‘诶呦，我被点了一下’)">加个事件</p>

独立外部脚本使用
```
<script src="./demo.js"></script>
```
案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style></style><script src="two.js"></script><link rel="stylesheet" href=""><script>alert('1111111111111')</script></head><body><!--第一种方式--><script>window.alert('弹弹弹，弹走鱼尾纹~~~')</script><!--第二种方式--><a href="https://www.baidu.com">我想问度娘</a><!--一般只写一句javascript代码时会使用--><a href="javascript:alert('我是度娘')">我想问度娘1</a><h2 onclick="alert('欸有，我被点击了')">使用事件的方式运行js</h2></body>
</html>
<script>alert('2222222222222222')
</script>
<!--第三种方式-->
<script src="one.js"></script>

one.js文件

alert('我是one.js里面的内容')

two.js文件

alert('我是two.js文件内容')

1.1.5. JavaScript输出

JavaScript 不提供任何内建的打印或显示函数

使用 window.alert() 写入警告框

alert('this is a test')
window.alert('this is a test')

使用 document.write() 写入 HTML 输出

document.write('写入内容到浏览器')
document.write(1 + 1)

使用 innerHTML 写入 HTML 元素

<div id="box"></div>
<script>document.getElementById('#box').innerHTML = '<b>跟我学前端</b>'
</script>

使用 console.log() 写入浏览器控制台

console.log('this is a test')
console.log(1 + 1)

案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="dv">#########3</div><p onclick="document.write('111111')">this is a p</p><script>// 输出方式一alert('这是要输出的数据')window.alert('这是要输出的数据的第二条')alert(1 + 190)// 输出方式二document.write('我是第二种输出数据的方式')document.write(100 + 55)// 输出数据方式三document.getElementById('dv').innerHTML = '<b>我是第三种输出数据的方式</b>'document.getElementById('dv').innerHTML = '我不使用标签'// 输出数据方式四 输出到控制台console.log('输出到控制台')console.log(10 * 4)</script></body>
</html>