JS 的组成
ECMAScript 和 DOM 和 BOM 三者共同组成
1. ES: 定义了 JS 的语法规范, 描述了 语言的基本语法和数据类型
简单来说: JS 怎么写, 需要根据 ES 的规定
2. DOM(文档对象模型)
* 有一套成熟的 操作 DOM 节点的 API, 通过 DOM 可以操作页面中的元素(其实就是标签)
比如: 增加一个 DIV
删除一个 span
修改 h1 标签的内容
3. BOM(浏览器对象模型)
* 有一套成熟的 操作 BOM 的API
比如: 弹出框
浏览器跳转
获取浏览器相关信息
获取浏览器尺寸
JS 的 三种 书写方式
1. 行内式
不推荐, 了解即可, 这种写法, 代码量多了, 不好维护
2. 内嵌式
学习阶段推荐使用, 因为代码量少, 如果代码量多, 不推荐
3. 外链式
目前公司都是外链式, 因为公司项目代码量肯定比较大
JS的 变量 是什么?
**变量 是 计算机中存储数据的一个标识符, 通过这个标识符可以找到内存中存储的数据**
大白话版:
我有一个东西需要暂时存储起来, 比如说一个数字 100, 我就可以把数字 100 存储到
某一个变量中, 当我后续需要使用的时候 可以通过这个变量 找到 这个数字 100
变量就相当于是一个容器, 内部可以存储任意类型的值, 使用变量的时候, 用的是内部存储的数据
使用变量需要用两步
1. 定义变量
语法: var 变量名
2. 赋值变量
变量名 = 值
备注: JS 中 一个等号, 叫做 赋值号
打印: console.log(要打印的值)
可以将我们想要打印的值 打印在浏览器的控制面板上
var a
var b
var c
a = 100
b = 200
c = 500
console.log(a)
console.log(b)
console.log(c)
var q = 666
var w = 888
console.log(q)
console.log(w)
变量的命名规则与规范
1. 规则 (必须遵守的, 如果不遵守会报错)
在书写变量名的时候, 只能由 数字 字母 下划线 $符号(英文的) 组成, 并且 不能以数字开头
书写时 区分大小写
书写变量名时, 不能使用关键字或者保留字作为变量名
关键字: 在 js 中具有特殊含义的 字母组合
var if for function
保留字: 在 js 中目前没有特殊含义, 但在将来的某个版本可能会用到, 所以此时也不能使用
在 ES6 还没出现之前具有的保留字
let const promise
2. 规范 (建议遵守, 如果不遵守也不会报错)
变量名具有含义, 符合见名知意
尽量不要用字母作为变量名, 除非是练习
多个单词的组合名时, 使用驼峰命名法(多个单词拼接时, 后一个单词的首字母大写)
bigbox -> bigBox
var a = 100
var a1 = 100
var a1_ = 100
var a1_$ = 100
var 6qwer = 100
var a = 100
var A = 200
console.log(a)
console.log(A)
JS 的数据类型
JS 中变量可以存储 任意类型的值
JS 中数据类型的分类(基本数据类型)
1. Number 类型
数字类型: 不区分 整数浮点数
100 200 1.1 0 -6 -999 都是数字
2. String 类型
字符串类型: 只要是引号包裹的内容, 就是字符串类型(引号不区分单双引号)
3. undefined 类型
undefined 类型: 他是一个数据, 表明未定义
变量只定义, 不赋值的时候, 默认的值就是 undefined 表明未定义
4. Boolean 类型 (后续更多的使用在 判断上)
只有两个值 一个是 true 一个 是 false
* true: 代表真, 正确的
* false: 代表假, 错误的
5. Null 类型
代表空
* 本身是一种数据类型, 只不过代表的是 空(啥也没有)
* Null 和 undefined 不同!!!
* 使用场景: 在创建 对象 的时候, 如果开始不知道对象内部有什么, 可以给一个 null
类似于在创建 变量的时候, 只定义, 不赋值默认是一个 undefined
JS 的数据类型检测
通过 一个方法 去检测 数据类型的值是什么
语法: typeof(要检测的数据类型的值)
typeof 的问题, 不能正确检测出 null 这个类型的实际类型, 检测 null 的时候打印结果为 object
null 代表的含义是 空, 也就是空对象, 所以 typeof 会把他当成一个对象去输出
JS 的数据类型转换
1. 转换为数字类型
1. Number(数据)
可以用于任何数据类型, 将其转换为 数字类型
+ 字符串转数字
如果转换的字符串是纯数字组成的, 那么直接转换为 数字
如果转换的字符串是 空字符串或者空白字符串, 那么直接转换为 数字0
其他类型的字符串(不是 空---空白---纯数字字符串) 会转换为 NaN
NaN: 表示的是一个 number 的数字, 但是没有办法通过常规的数字表明它, 所以只能使用 NaN 来代替(坏掉的数字)
+ 布尔值转数字
true 转换为 1
false 转换为 0
+ undefined 转数字
会直接转换为 NaN
+ null 转数字
会直接转换为 0
2. parseInt(数据) 转换为整数
会将数据转换为 number类型, 并且值是整数(直接忽略掉小数点以后的值, 并不是四舍五入)
在转换的时候, 如果数据是纯数字字符串或者是数字开头的字符串, 那么会转换为数字, 否则就是转换为 NaN
3. parseFloat(数据) 转换为小数
转换结果于 parseInt 类似, 但是在转换小数的时候会保留小数点后的数字
4. 扩展: 在实际开发中 我个人常用 数据 - 0
2. 转换为字符串类型
3. 转换为布尔类型
1. 字符串转数字
// 数据的类型 数据的值
// console.log(typeof(Number('100')), Number('100')) // number 100 会将 '100' 转换为 数字, 然后打印到控制台
// console.log(typeof(Number('')), Number('')) // number 0
// console.log(typeof(Number(' ')), Number(' ')) // number 0
// console.log(typeof(Number('abc')), Number('abc')) // number NaN
2. 布尔值转数字
// console.log(typeof(Number(true)), Number(true)) // number 1
// console.log(typeof(Number(false)), Number(false)) // number 0
3. undefined 转数字
// console.log(typeof(Number(undefined)), Number(undefined)) // number NaN
4. null 转数字
// console.log(typeof(Number(null)), Number(null)) // number 0
// console.log(typeof(Number('100.123456789')), Number('100.123456789')) // number 100.123456789
// console.log(typeof(parseInt('100.123456789')), parseInt('100.123456789')) // number 100
// console.log(typeof(parseInt('100')), parseInt('100')) // number 100
// console.log(typeof(parseInt('100abc')), parseInt('100abc')) // number 100
// console.log(typeof(parseInt('999abc')), parseInt('999abc')) // number 999
// console.log(typeof(parseInt('abc')), parseInt('abc')) // number NaN
// console.log(typeof(parseInt('abc666')), parseInt('abc666')) // number NaN
// console.log(typeof(parseInt('')), parseInt('')) // number NaN
// console.log(typeof(parseInt(' ')), parseInt(' ')) // number NaN
// console.log(typeof(parseInt(true)), parseInt(true)) // number NaN
// console.log(typeof(parseInt(false)), parseInt(false)) // number NaN
// console.log(typeof(parseInt(undefined)), parseInt(undefined)) // number NaN
// console.log(typeof(parseInt(null)), parseInt(null)) // number NaN
// console.log(typeof(parseFloat('100.123456789')), parseFloat('100.123456789')) // number 100.123456789
// console.log(typeof(parseFloat('100')), parseFloat('100')) // number 100
// console.log(typeof(parseFloat('100abc')), parseFloat('100abc')) // number 100
// console.log(typeof(parseFloat('999abc')), parseFloat('999abc')) // number 999
// console.log(typeof(parseFloat('abc')), parseFloat('abc')) // number NaN
// console.log(typeof(parseFloat('abc666')), parseFloat('abc666')) // number NaN
// console.log(typeof(parseFloat('')), parseFloat('')) // number NaN
// console.log(typeof(parseFloat(' ')), parseFloat(' ')) // number NaN
// console.log(typeof(parseFloat(true)), parseFloat(true)) // number NaN
// console.log(typeof(parseFloat(false)), parseFloat(false)) // number NaN
// console.log(typeof(parseFloat(undefined)), parseFloat(undefined)) // number NaN
// console.log(typeof(parseFloat(null)), parseFloat(null)) // number NaN
console.log(typeof('100'), '100') // string 100
console.log(typeof('100' - 0), '100' - 0) // number 100
console.log(typeof('100.99' - 0), '100.99' - 0) // number 100
