01：JS基础
一、JavaScript 介绍
- 网页的组成：结构html，样式css，行为js
- html：超文本标记语言
- css：层叠样式表
- javascript：网页的脚本语言，用来描述网页的逻辑交互行为
- 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
- javascript的组成：ECMAScript，DOM，BOM
- ECMAScript：语法，规范，标准，定义了javascript的语法规范,描述了语言的基本语法和数据类型。
- DOM（Document Object Model）：文档对象模型，document，表示网页。
- 提供了网页的相关操作，标准化组织是W3C。
- 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。
- BOM（Browser Object Model）：浏览器对象模型，window，表示浏览器。
- 提供了浏览器的相关操作，沿用了ECMAScript的标准，在此之上添加各个浏览器自身的特色功能
- 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。
- js的发展史
- 网景：livescript，与SUN合作，改名javascript
- IE：JScript
- xxxScript的标准和规定，提给了，ECMA（国际非营利组织，专门制定各种规则），由ECMA指定出网页脚本语言的语法规范，并将该规范称为：ECMAScript1.0
- ….
- JavaScript的起源、发展和组成
二、JavaScript 的书写位置
- 行内：标签内，通过行为属性执行相关js代码
<div onclick=" alert('hello div') ">可点击的元素</div>- 必须通过行为触发
- 不推荐使用，结构和行为的耦合过高
- 不利于多个标签之间的行为复用
- 内部：html文件内，使用script标签标记js代码
1
2
3
| <script>
alert("hello 行内");
</script>
|
- 自动执行
- 不太推荐使用，html和行为的耦合过高
- 可以做到多个标签之间的行为复用
- 但是不利于多个html文件之间的行为复用
- 外部：独立的js文件内，通过script标签的src属性引入，建议使用
1
| <script src="./index.js"></script>
|
- 自动执行
- 推荐使用，完全做到html和行为的解耦
- 方便html文件之间的行为复用
- 方便独立管理
- 建议：一般在开发过程中，先写内部，在内部实现功能之后，封装成外部。
- 注意：
- 错误写法，内部和外部的js不能共用一个script标签
- script标签原则上可以放在页面的任何位置，但是一般放在head标签内，或，body标签的末尾
- 一个文件可以有多个script，默认情况下，代码自上而下依次执行
三、JS 中的注释
- 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的
- 写好一个注释，有利于我们以后阅读代码
- JavaScript 支持两种形式注释语法：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
四、打印语句
- 打印：将计算机中的电子信息，显示出来，呈现给人类
- 在js编程语言中，可以使用打印语句，将程序的计算结果，呈现出来
alert(要打印的信息)
- 一次只能打印一个数据
- 打印到弹出框
- 阻塞程序执行
- 会将数据转成字符后打印
document.write(要打印的信息)
- 可以同时打印多个数据，逗号隔开
- 打印到页面
- 会将数据转成字符后打印
- 可以解析html标签
- 影响页面结构
console.log(要打印的信息) 推荐使用
- 可以同时打印多个数据，逗号隔开
- 打印到浏览器的console（控制台）
- 既不会阻塞程序，也不会影响页面，还不改变数据类型
- 静默打印
五、JavaScript 变量
- 变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）用来在计算中临时存储数据，方便数据的多次使用和修改
- 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
- 也就是说，我们向内存中存储了一个数据，要给这个数据起一个名字，方便以后再次找到他
- 声明变量
- 赋值变量
- 赋值运算符：
=
- 规则：将等号右侧的数据或变量，存储到左侧的变量中
- 语法：
变量名 = 值
- 简写：
- 声明并赋值：
var a = 10;
- 声明多个变量：
var a,b,c,d;
- 声明多个变量并逐一赋值：
var a=10,b,c=30,d=20;
- 变量的命名规则
- 必须使用字母 或 下划线 或 **$ **开头，可以包含数字
- 严格区分大小写
- 不允许使用关键字或保留字
- 尽量语义化，词必达意
- 建议：使用组合单词表示复杂的含义
- 建议：使用组合单词后，再使用驼峰式命名
- 大：从第一个单词的首字母开始大写
- 小：从第二个单词的首字母开始大写
- 小技巧：可以通过给单词加前缀，避免触发关键字和保留字
六、JavaScript 数据类型
- 数据类型指内存中存储的数据分类，为了方便数据的管理，将数据分成了不同的类型
- 通常分为两大类 基本数据类型 和 复杂数据类型（引用数据类型）
- 字符型：string：所有使用引号（’ “ `）包裹的数据都是字符，是一种原始数据
- 数值型：number：0, 1, 2, 3, 4, 5, 6, 7, 8, 9, NaN，Infinity
- 布尔型：boolean：true，false
- undefined：undefined：没有值，变量声明了，但未赋值。在内存中有这个数据的位置
- 半夜去住酒店：前台，404号，带着钥匙上楼，到四楼，有404，打开门，屋里什么都没有，空房间，undefined
- null：null，空，空值，空地址
- 半夜去住酒店：前台，404号，带着钥匙上楼，到四楼，有403，有405，没有404，null
- 对象型：object：数据的打包，是一种复杂数据。无序集合是object对象，有序集合是array对象
- object对象的基本语法：一般由键值对组成，一个对象可以存在多个键值对，键和值一一对应，成对出现，标志为{}
- array对象的基本语法：一般由多个数据组成，标志为[]
- 函数型：function：一段代码的打包，是一种复杂数据。打包之后，需要被动执行
- 数据类型的检测
typeof 要检测的数据typeof(要检测的数据)
七、数据类型的转换
- 转换方式
- 隐式数据类型转换：没有主动转，在运算过程中自动转换
- 运算过程中转换(作为其他数据类型使用)，但并没有影响原数据
- 场景（什么样的情况下会发生转换）：
- 运算符两边
+：有可能转字符-, *, /,%：有可能转数值>, >=, <, <=, ==, !=：有可能转数值||, &&, !：有可能转布尔
- if的小括号内：转布尔
- isNaN的小括号内：转数值
- 显式（强制）数据类型转换：主动转，使用特定的方法主动进行转换
- 其他转布尔：
- 其他转字符：
String( 要转换的数据 )
要转换的数据.toString()
- undefined和null不能转
- 数值、布尔、函数，直接使用时尽量将数据使用小括号包裹
要转换的数据.toFixed(n)
- 其他转数值
Number( 要转换的数据 )
parseInt( 要转换的数据 )
parseFloat( 要转换的数据 )
Math.round( 要转换的数据 )
- 转换规则
- 其他转布尔：
- 空字符为false，非空字符为true
- 0和NaN为false，其他为true
- 对象函数数组都是true
- undefined，null都是false
- 其他转字符
- 除了对象和数组之外，等同于直接套引号
- 数组等同于将中括号换成引号
- 对象固定转成
"[object Object]"
- 其他转数值
- 严格：只要出现非数字字符，直接NaN
- 非严格：从左向右依次转换，遇到非数字的字符，停止转换，返回已经转了的数字。如果第一位就是非数字，直接NaN
- 其他：
- true为1，false为0
- null为0
- 空数组为0
- 有且只有一个能严格转成数值型数据的数据的数组，转为当前数值
- 有且只有一个undefined或null的数组，转成0
- 数组的其他形式，花括号对象，函数，undefined，都是NaN
八、JavaScript 运算符
- 算术运算符：一般用来操作数值型数据：
+, -, *, /, %，**（幂运算）
- 字符的拼接：当
+号两边只要有一边出现字符时，运算规则都是字符串的拼接，得到结果必然是字符
-, *, /, %，**：不管两边是什么类型的数据，都会作为数值型数据计算
- 关系运算符（比较），一般用来运算基本类型：
>, >=, <, <=, ==, !=, ===, !==
>, >=, <, <=, ==, !=
- 两边只要能有一边是数值，就会按照数值的比较规则进行比较
- 字符的比较规则：逐位按照ASCII码比较，得到结果就停止比较
===, !==
- 逻辑运算符，一般用来运算布尔值：
||, &&, !
||：两边只要有一个为true，结果就是true&&：两边只要有一个为false，结果就是false!：取反- 逻辑运算符两边，会被转成布尔值之后，再进行逻辑运算
- 赋值运算符：
=, +=, -=, *=, /=, %=
- 赋值：将右侧的数据（表达式，变量）放在左侧的变量中
- 其他规则：参考算术运算符
- 自增自减：
++, --
- 自增：在自身的基础上+1，再赋值回去
- 自减：在自身的基础上-1，再赋值回去
