这是我参与「第四届青训营 」笔记创作活动的的第3天
在学习JS时，我们需要对JS进行全局的把控，学好JS是不容易的，而用好JS更加不容易。今天我记录了许多初始学习JS时应该注意的点，以及开始学习时应该知道的内容，更多更精彩的JS内容还需要同学们深入学习！！！
当我们在写一个好的项目时，我们应该考虑以下因素：
- HTML/CSS/JS各司其职
- 应当不必要的由js直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指web页面上抽出来一个个包含模板(HTML),功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构：插件化、模板化、抽象化
JS的书写位置
- 相应标签的对应事件里
例如：按钮的onclick(点击事件)
提交按钮的onsubmit
文本框失去焦点的事件onblur
<button onlick="alert('点击我才会出现');">点我一下</button> - 建立相应的.js文件,然后通过script引入
<script type="text/javascript" src="./01.js"></script> - 将JS代码编写到script标签里
<script type="text/javascript">alert("我是script标签里面的代码！");</script>
JS书写注意事项
- JS中严格区分大小写
- JS中每一条语句以分号(;)结尾。如果不写分号，浏览器就会自动添加，但是会消耗一些系统资源，有时也会添加错误
- JS会忽略多个空格和换行
JS数据类型
- String 字符串
- Number 数值
- Boolean 布尔值
- Null 空值(专门用来表示一个空的对象)
- Undefined 未定义
- Object 对象
JS运算符
- ++ 自增
- -- 自减 注：无论哪一种方式，原变量的值会立即自增1；不同的是a++与++a的值不同，a++的值等于原变量的值，++a的值等于原变量的新值
逻辑运算符
- ！非
- && 与
- || 或
赋值运算符
- +=
- -=
- *=
比较运算符
- != 不相等 会对变量进行自动的类型转换，如果转换后相等也会返回false;
- === 全等 用来判断两个值是否全等，与==类似，如果类型不同，直接返回false
- !== 不全等 与!=类似，不同的是两个值的类型不同，直接返回true
条件运算符(三元运算符)
语句：条件表达式？语句1：语句2;
执行顺序：条件运算符在执行时，首先对条件表达式进行求值
- 如果该值为true,则执行语句1，并返回执行结果
- 如果该值为false,则执行语句2，并返回执行结果
