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