这是我参与「第四届青训营 」笔记创作活动的第2天。 写好JS的一些原则！

1. 各司其责（让html，，javascript职能分离）；
2. 组件封装（具备正确性，扩展性，复用性）；
3. 过程抽象（函数式编程思想）。

一、了解JavaScript

JavaScript是什么

1. what：运行在客户端（浏览器）的编程语言，实现人机交互效果；
2. 作用：①网页特效（监听用户的一些行为让网页做出对应的反馈）
3. 组成：ECMAScript及 Web APIS；ECMAScript规定了js基础语法核心知识；Web APIS分为DOM and BOM，DOM操作文档，对页面元素进行移动、大小、添加删除等操作；BOM操作浏览器，页面弹窗、检测窗口宽度、存储数据到浏览器等。 js权威网站:MDN

JavaScript书写位置

目标：知道如何向页面添加JavaScript。 JS在书写时也与CSS位置类似，如图：

1. 内部js书写在紧邻</body>的上面（因为代码是从上往下执行，所以要先有html，css等内容才能有行为）；alter弹出警示框，其中值需要加上引号（数字不需要加引号 ）。 <script> alter（'你好，js'） </script>
2. 外部js通过标签引进：

• 创建一个以.js结尾的文件，作为外部行为；
• 在html文件中引入外部行为，其格式为：
• <script src="./××.js"> </script>
• 此时script标签中间无需写代码，否则会被忽略；外部js会是代码更加有序，复用性高且html也会更加的易读；

3. 内联式js

• 首先是创建一个button，在行内写上要执行的行为；<button onclick='alter('你是大漂亮')点击</button>
• 其语义为：创建一个按钮，点击这个按钮“onclick”就会弹出我是大漂亮字样。 *在js中每一句语言写完后换行即代表分号，可以不用写分号！

JavaScript基本语法

1. 输出

• document.write（''）,同时括号里面的内容可以是标签即 document.write('<h1>大漂亮</h1>')；
• alter（'要输出的内容'）：页面弹出警示框，上面已经提到过；
• console.log(''):控制台输出语法，程序员用来调试；

2. 输入

• prompt('')：会出现可以输入文字的提示框。 字面量是计算机中描述事/物

变量

1. what：变量是计算机存储数据的“容器”。
2. 基本使用：

• 声明变量：let 变量名（let为声明变量的关键字，变量名也称为标识符）；
• 变量赋值：变量名后跟等号再跟数值，其中变量名与等号及等号与数值中间有空格！
• 更新变量
• 数组声明let arry = ['','',]:分号后面多个空格；
• 命名规则与规范：

1. 不能使用关键字做变量名（let、var、if、for）；
2. 只能用下划线、字母、数字、$组成，且数字不能开头；
3. 字母严格区分大小写；
4. 遵守小驼峰命名法：第一个单词首字母小写后面单词首字母用大写。

数据类型

基本数据类型

1.数字类型

• JavaScript中的正数、负数、小数等统称为数字类型；
• JS是弱数据类型，变量到底属于哪种类型，只有赋值之后我们才能确认；

2. 字符串类型

• 只要数值那有引号的都叫字符串，推荐使用单引号；
• 字符串拼接;

3. 模板字符串

• 作用：拼接字符串和变量，但是不用像字符串那样麻烦；
• 使用：输出的内容用反引号括起来，需要输出的变量用${}包住变量；例如：`document.write(`我叫${name}，今年${age}岁)。

4. 布尔类型（boolean） 值为ture and false；
5. 未定义类型

• 只声明变量，不赋值的情况。变量的默认值为undefined。（在传递数据中通过检测这个变量是不是undefined来判断用户是否有传值过来）；

6. 空类型（null）

• 属于对象，将来有个变量存放的是一个对象但是对象还未创建，可以先赋值为null。

检测数据类型

1. 检测台中console.log(typeof 10)：检测台中返回的是数据类型，即为number;
2. 类型转换

• 2.1 隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换；
• 规则：+号两边只要有一个是字符串，都会把另外一个转成字符串。eg：console.log(typeof （num1+'11'）)。但除了＋以外的算术运算符，比如-/*等都会把数据转成数据类型。
• 正号可以转换成number型；
• 2.2 显式转换 -（转换为数字型） 直接在括号里面写上要转换的数据类型；
• console.log(parsrint（'10'）)转换为数字型，不会四舍五入！
• number里面只能放数字类型的字符，不能放字母这样的字符。否则返回的是NAN！
• parsefloat里面可以将字符里面除数字外的过滤，例如console.log('10.01abc')；
• （转换为字符型）两种方法：1.console.log(String (10));2.console.log(变量.tostring（）)

运算符

1. 算术运算符

• 包括加减乘除取模，取模(%)开发中经常作为判断某个数字是否被整除；
• 优先级：乘除取余优先级大于加减，右括号先算括号里面的。

2. 赋值运算符

• num + = 3相当于num = num + 3 ;
• 前置自增：先自加 再使用；
• 后置自增：先使用 后自增； 3.比较运算符
• ==：判断左右两边是否相等；
• ===：判断数据类型和值是否相等；
• 在console.log（5=='5'）：只要值一样，不管数据类型；判断值是否相等，更推荐用'==='；
• 从左往右进行比较，如果是字符串使用ascii码比较；
• 注意！尽量不要比较小数，涉及到精度问题！

4. 逻辑运算符

• &&左右两边出现以下五个值都当false看：①false；②0；③' '；④undefined；⑤null，其余为真值；
• 短路的返回假，不短路返回后面的值；
• ||左右两边，左边为真就短路，得到的值是右边的值。

5. 运算符优先级

• 逻辑与比逻辑或优先级更高；
• 非的优先级与一元运算符相等。

6. 表达式和语句

• 表达式计算出一个值，但语句是控制某件事件发生
• 三大流程控制语句 ：顺序结构，分支结构，循环结构

7. if分支语句

• 单分支：if（条件）{满足条件执行的代码}(小括号中时字符型，除了空字符串为假其余都为真)
• 双分支 :if else
• 多分支：if，else if，else 8.三元运算符：判断条件?满足条件的表达式：不满足条件的表达式

循环

1. while
2. for(起始条件；退出条件；变化量)
3. 数组:按顺序保存数据的数据类型

• 增加元素：arr.push(元素1，...元素n)往数组后面添加；arr.unshift往数组前面添加
• 改：查找元素的方式重新赋值；
• 删除：arr.pop/shift（pop从后往前删，shift从前往后删）；arr.slipse（起始位置，删除个数）