1. JS 的三大组成部分
1-1. DOM - Document Object Model 文档对象模型
一整套操作页面元素的属性和方法
1-2. BOM - Browser Object Model 浏览器对象模型
一整套操作浏览器相关内容的属性和方法
1-3. ECMAScript
js 的语法
核心: 使用 ECMAScript 的语法去操作 DOM 和 BOM 发生变化
2. JS 的三种引入方式
2-1. 行内式(墙裂不推荐)
a 标签
直接书写在 href 属性值的位置, 书写一个 javascript: 一段js代码 ;
非 a 标签
需要一个行为属性来执行 js 代码
示例(onclick), <div οnclick="js代码"></div>
2-2. 内嵌式(不推荐)
在当前页面书写一个 script 标签, 把 js 代码直接书写在 script 标签内
打开浏览器的时候, 会直接执行 script 标签内的 js 代码, 不需要任何行为
script 标签可以书写在页面任意位置, 推荐书写在 head 的末尾或者 body 的末尾
目前我们建议书写在 body 的末尾
一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行每一个标签内的 js 代码
2-3. 外链式(推荐)
把 js 代码书写在一个 .js 后缀的文件内
在当前页面使用 script 标签的 src 属性引入
注意: 当一个script 标签被当做外链式引入 js 代码以后, 不能在当做内嵌式使用, 写在标签对内的代码没有意义
script 标签可以书写在页面任意位置, 推荐书写在 head 的末尾或者 body 的末尾
目前我们建议书写在 body 的末尾
一个页面可以书写多个 script 标签, 会按照从上到下的顺序依次执行每一个标签内的 js 代码
3. 常用的三种输出方式
3-1. alert() 弹出层
3-2. console.log() 控制台打印
3-3. document.write() 页面输出
书写: () 内书写的内容
如果书写纯数字, 可以不写引号, 因为就是数字输出
如果带有其他内容, 必须要书写引号, 因为表示单纯的文本输出
如果没有引号, 表示变量输出
示例:
alert(123456)
console.log('hello')
document.write(hello)
输出的当前内存中 hello 这个变量保存的值
如果没有 hello 这个变量, 就报错 xxx is not defined
4. 定义变量
语法: var 变量名 = 值
var 定义变量关键字
变量名 你自己起的名字
等于号(=) 赋值符号
值 该变量内存储的内容
几种形式
=> var n
=> var n = 10
=> var n, m, x, y
=> var n, m = 100, x = 200, y
5. 变量名的命名规则和规范
规则: 你必须遵守, 不遵守就是错的
1. 变量名只能由 数字(0-9) 字母(a-zA-Z) 下换线(_) 美元符($) 组成
2. 变量名不能由 数字开头
3. 变量严格区分大小写
4. 不能使用关键字和保留字
=> 关键字: js 语法中正在使用的关键字 var id for ...
=> 保留字: js 语法将来可能会用到的关键字
规范: 建议你遵守
1. 变量语义化
2. 驼峰命名法
=> 大驼峰: 第二个单词开始首字母大写 userName userEmail
=> 小驼峰: 第二个单词开始中间使用下划线连接 user_name user_email
3. 不要用中文
6. 数据类型分类
6-1. 基本数据类型
=> Number 数值
整数
浮点数(小数)
科学计数法 10e5
其他进制表示的数值
+ 0b 二进制
+ 0x 十六进制
+ 0o 八进制
=>String 字符串
单引号或者双引号包裹的就是字符串
模板字符串 反引号(``)
=> Boolean 布尔
true
false
=> Undefined 空
-> undefined
-> 表示定义没有赋值
=> Null 空
-> null
-> 表示有值, 有一个空值
6-2. 复杂数据类型(地址数据类型/引用数据类型)
=> Object
7. 检测数据类型
7-1. typeof
语法:
-> typeof 数据
-> typeof(数据)
=> 示例:
-> typeof 10 + 20
-> typeof(10 + 20)
=> 返回值(结果): 一定是一个字符串类型
-> 数值: 'number'
-> 字符串: 'string'
-> 布尔: 'boolean'
-> undefined: 'undefined'
-> null: 'object'
=> typeof 只能准确的检测基本数据类型
-> 准确的检测 function
=> 当多个 typeof 连用的时候, 返回值一定是 'string'
7-2. isNaN()
=> 专门检测是否是 非数字 的方法
=> 语法: isNaN(要检测数据)
=> 返回值: 一定是一个布尔值
-> true 表示你检测的内容是一个 非数字(不是数字)
-> false 表示你检测的内容不是一个 非数字(是数字)
7-3. Object.prototpye.toString.call(你要检测的数据)
=> 返回值: 必然是一个字符串类型
-> '[object 你检测的数据类型单词]'
=> 可以准确的检测所有数据类型
- 8. 数据类型转换
8-1字符串与数字的转换规则:
①隐式转换:
a.字符串与数字相加时，(凡是通过加号连接的)结果转字符串,效果为字符串的拼接.
b.除了加号以外的运算符，比如减，乘除求余...结果全都是数字===(全是数字运算)
注意事项:
1.俩个数值字符串做了除+以外的运算，结果为数字(这些是以加号为分类的)
2.如果遇到了非数字字符串，做+以外的运算，结果为NaN，NaN也是数字类型
例如: console.log("ss"-"ss")
②显示转换(靠函数实现)
第一:字符串转数字
Number()
=> 语法: Number(你要转换的数据)
=> 返回值(结果): 转换好的数值类型
=> 转换规则: 把要转换的数据当做一个整体来看待
-> 如果可以转换成合法数字, 那么就是一个数字
-> 如果不可以转换成合法数字, 那么就是 NaN(Not a Number)
parseInt()
=> 语法: parseInt(你要转换的数据)
=> 返回值(结果): 转换好的数值类型
=> 转换规则:
-> 不管是什么数据类型, 都是一位一位看待
-> 如果第一位就不能转换成合法数字, 那么直接返回 NaN 结束转换
-> 如果第一位可以转换, 那么保留, 继续看第二位
-> 以此类推, 直到不能转换的为止
parseFloat()
=> 语法: parseFloat(你要转换的数据)
=> 返回值(结果): 转换好的数值类型
=> 转换规则:
-> 和 parseInt 一模一样
-> 只是可以识别一个 小数点
第二 :数字转字符串
String()
=> 语法: String(你要转换的数据)
=> 返回值(结果): 转换好的字符串类型
=> 所有数据都可以转换
toString()
=> 语法: 你要转换的数据.toString()
=> 返回值(结果): 转换好的字符串类型
=> undefined 和 null 不能转换
=> 注意: cannot read property(名字) of undefined(null)
-> 你一定写了一句代码是 xxx.名字()
-> 证明你的 xxx 是 undefined 或者
实际的运用
① 数字转字符串: console.log(10 + "");
② 字符串转数字: console.log("123" / 1);
8-2 进行字符串拼接
=> 使用 加号(+) 进行字符串拼接
=> 在 js 内 加号(+) 有两个作用
-> 字符串拼接: 当运算符号任意一边是字符串的时候, 会进行字符串拼接
-> 数学运算: 只有符号两边都是数值或者布尔的时候, 会进行数学运算
=> 在字符串拼接的时候, 为了不改变原始字符串
-> 一般会拼接一个 空字符串('')
8-3. 转布尔
Boolean()
=> 语法: Boolean(你要转换的数据)
=> 返回值(结果): 转换好的布尔类型
=> 在 js 中, 只有五个内容是 false, 其余全都是 true
-> 数值 0
-> 数值 NaN
-> 空字符串 ''
-> undefined
-> null
双取反(!)
9. 运算符
运算符三要素：优先级，结合方向，操作目数。
9-1. 算数运算符(数学运算符)
+
-
*
/
%
9-2. 赋值运算符
=
作用：将等号右值赋给左边的变量（自左向右结合）
注意：赋值表达式是有值的：他的值就是右值。
复合赋值运算符
+=
-=
*=
/=
%=
9-3. 比较（关系）运算符==》 通过关系运算符连接的表达式结果是布尔值==结合方向:自左向右
>
<
>=
<=
== 只比较值, 不管数据类型(逻辑等于),判断俩个值是否相等.
=== 值和数据类型都比较,必须一致,不能数据转换(严格逻辑相等)
!= 只比较值, 不管数据类型(逻辑不等)
!== 值和数据类型都比较
9-4. 逻辑运算符:是将若干个逻辑量连接，结果依然为布尔值
①&&:完成一个功能，有N个步骤，每个步骤都得实现，这个功能才能完成，每个步骤间的关系称为与
=> 同真为真, 一假则假
②|| 完成一个功能，有N个方法，每个方法都能搞定这件事，各个方法间的关系称为或
=> 一真为真, 同假则假
③ !:某个条件的对立面
=> 本身是 true 结果是 false
=> 本身是 false 结果是 true
短路表达式
=> 作用1: 用来执行一段代码
-> && 短路::短路与:当首次遇到条件为假的表达式时，后续代码不再执行
10 > 5 && console.log('hello world')
5 > 10 && console.log('hello world')
-> || 短路
+10 > 5 || console.log('hello world')
5 > 10 || console.log('hello world')
=> 作用2: 用来获取一个值
-> && 短路::短路或:当首次遇到条件为真的表达式时，后续代码不再执行
var res = 10 > 20 && 30 > 20
var res = 20 > 10 && 30 > 20
如果前面一半是 false, 那么 res 得到的就是 false
如果前面一半是 true, 那么 res 得到的一定是后面一半的结果
-> || 短路
var res = 10 > 20 || 30 > 20
var res = 20 > 10 || 30 > 20
如果前面一半是 true, 那么 res 得到的就是 true
如果前面一半是 false, 那么 res 得到的一定是后面一半的结果
9-5. 位运算(不纠结)
& 按位与
| 按位或
^ 按位非
~ 按位异或
<< 按位向左
>> 按位向右
9-6. 自增自减运算符（对自身变量进行自加一或者自减一）
++
--
示例: ++
=> 前置++: ++ 在变量前面
=> 后置++: ++ 在变量后面
=> 共同点: 都会进行 +1 运算
=> 区别: 在于参与运算的时候
-> 前置++: 先把变量的值改变, 用改变以后的值参与运算
-> 后置++: 先把变量的值参与运算, 然后在改变变量的值
9-7. 三目运算符(三元表达式)
条件 ? 成立 : 不成立
作用1: 用来执行代码
=> 20 > 10 ? console.log('你说的对') : console.log('滚犊子')
=> 10 > 20 ? console.log('你消音') : console.log('你说得对')
=> 执行一段简单的代码
作用2: 用来进行赋值
=> var sex = 1 // => 表示性别 1 男性 0 女性
=> var gender = sex === 1 ? '男' : '女'
9-8 字符串扩展
在 js 内 单引号 或者 双引号 包裹的都是字符串
在 js 内 反引号(``) 包裹的也是字符串, 起名叫做 模板字符串
从字符串的角度来说, 是没有区别的
9-9 模板字符串优势
1. 可以直接换行书写
2. 可以直接在字符串内解析变量
=> 当你需要在模板字符串内解析变量的挥手书写 ${ 变量 }
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
