- js组成 :BOM DOM EVENT
- BOM:bower Object Model(浏览器对象模型 - 核心是window对象=>window是浏览器内置对象,里面有操作浏览的方法)
- DOM:document Object Model(文档对象模型 - 核心是document对象=>document是浏览器内置的对象,里面有一些存储着专门用来操作元素的各种方法)
- EVENT :事件处理函数 事件对象:浏览器提供 ,一些描述这些事件的信息
一、js的引用方式
1、内联 行内 (直接在标签内写 )
<div οnclick="alert(2222)">我是div</div>
<a href="javascript:alert(3333);">链接</a>
2、内嵌式 (script标签里写js代码 一般会把script标签放在底部或者是头部)
<script> </script>
3、外链式 (外联和内嵌不能同时使用,外联会把内嵌的代码覆盖) 外链的代码在最上面
<script src="index.js"></script>
二、注释 单行注释 ctrl + / 多行注释 alt + shift + a
三、变量的命名规则
1、只能用数字,字母下划线,$符号。
2、字母区分大小写。
3、数字不能作为开头,不能纯数字。
4、命名中间不能有空格。
5、命名不能使用关键字(保留字),推荐使用小驼峰命名。
6、不能使用中文(后期很难优化)。
四、变量的赋值
var a ; ① 定义(声明)一个a变量
a = 10 ; ②给a赋一个值 为10
1、值声明 不赋值的话就报错 // undefined。
2、如果两个变量名相同的话就会后面覆盖前面。
3、 如果需要2个变量互换,那么可以用临时值存储一个变量;
var c = a; //c的值就是 10; c 就是一个临时的值 来存储a变量的值;
a = b;
b = c;
console.log("a:",a,"b:",b);
五、变量的类型
1、基本数据类型(简单数据)
① 数字 Number :一切数字 都是数字类型;定义的时候不需要加引号
②字符串 String :引号包裹的字符就是字符串;
③布尔值 Boolean :真:true 假:false
④未定义 undefined :没有值
⑤空 null :空的意思
⑥独一无二 symbol :独一无二的值
* “\”转义字符:把有功能的字符转成没有功能的字符;
* 基本数据类型可以通过 typeof 判断
* isNaN: 判断一个变量 不是一个数字 返回 false 和 true
2、复杂数据类型(引用数据)
①对象 Object
②数组 Array
③正则 RegExp
④函数 Function
数据类型之间存储的区别(重点)
- 既然我们区分了基本数据类型和复杂数据类型
- 那么他们之间就一定会存在一些区别
- 他们最大的区别就是在存储上的区别
- 我们的存储空间分成两种 **栈** 和 **堆**
- 栈: 主要存储基本数据类型的内容
- 堆: 主要存储复杂数据类型的内容
六、其他类型转数字
1、Number:装换 ,只能转纯数字 var str = "123" var num = Number(str); //123
2、paseInt:可以把字符串转成整数的数字;
①.只能转整数 ②.可以转换非纯数字 (必须以数字开头);
var str = "456.78" var num = parseInt(str); // 456
3、pareFloat:可以把字符串小数转成 数字类型;
①.只能转一个小数点
var str = "456.78" var num = parseInt(str); // 456.78
4、 非“+”号的运算
七、其他类型转化为字符串
1、.toString();函数 var 结果(字符串) = 变量.toString();
2、String: var 结果(字符串) = String(变量);
3、 通过"+"号转成字符串 ;
加号的两边都是数字的时候会做加法运算 其他情况 都会做字符串拼接 ;
八 、其他转布尔值
1、Boolean 会把非0的数字都会转成true
2、会把非空的所有字符串转成true
3、0 “” undefined null NaN 都是false
九、数学运算符
加减乘除 取余 + - * / %
十、赋值运算符
1、 = 赋值
2、+= 加等于 先加再求值
3、-= 减等于 先减再求值
4、*= 乘等于 先乘再求值
5、/= 除等于 先除再求值
十一、比较运算符
1、 == 值是否相等 只比较值
2、 === 全等于 会比较值是否相同且类型是否相同 值和类型都相同 返还true 否则就是false
3、不等于 !:非 != :只会比较值 不会比较类型
4、全不等于 !== :会比较值 且会比较类型
6、>= <=;
十二、逻辑运算符
1、&& (and、且) 两个变量都是 true 那么结果就是true
2、|| (or 、或) 有一个真 那么结果就是真
3、! (非、否、取反)
十三、自增和自减
1、自增
①++a // 先把a的值加一赋值 ,然后再输出加过后的a值。
②a++ // 先输出a的值,然后再自增赋值。
1、自减
①--a // 先把a的值减一赋值 ,然后再输出加过后的a值。
②a-- // 先输出a的值,然后再自减赋值。
十三、分支结构和条件分支
1、分支结构
- 我们的 js 代码都是顺序执行的(从上到下)
- 逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码
2、if 语句
- 通过一个 if 语句来决定代码执行与否
- 语法: `if (条件) { 要执行的代码 }`
- 通过 `()` 里面的条件是否成立来决定 `{}` 里面的代码是否执行
3、if else语句
- 通过 if 条件来决定,执行哪一个 `{}` 里面的代码
- 语法: `if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }`
- 两个 `{}` 内的代码一定有一个会执行
3、if else if ...语句
- 可以通过 if 和 else if 来设置多个条件进行判断
- 语法:`if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }`
- 会从头开始依次判断条件
- 如果第一个条件为 true 了,那么就会执行后面的 `{}` 里面的内容
- 如果第一个条件为 false,那么就会判断第二个条件,依次类推
- 多个 `{}` ,只会有一个被执行,一旦有一个条件为 true 了,后面的就不在判断了
4、SWITCH 条件分支结构
- 也是条件判断语句的一种
- 是对于某一个变量的判断
- 语法:
switch (要判断的变量) {
case 情况1:
情况1要执行的代码
break
case 情况2:
情况2要执行的代码
break
case 情况3:
情况3要执行的代码
break
default:
上述情况都不满足的时候执行的代码
}
5、三元运算
- 三元运算,就是用 **两个符号** 组成一个语句
- 三元运算只是对 **if else** 语句的一个简写形式
- 语法: `条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行`
var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')
十四、循环结构和循环条件
1、循环结构 :就是根据某些给出的条件,重复的执行同一段代码
- 循环必须要有某些固定的内容组成
①. 初始化
②. 条件判断
③. 要执行的代码
④. 自身改变
2、WHILE 循环
- `while`,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了
- 语法 `while (条件) { 满足条件就执行 }`
- 因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了
3、DO WHILE 循环
- 是一个和 `while` 循环类似的循环
- `while` 会先进行条件判断,满足就执行,不满足直接就不执行了
- 但是 `do while` 循环是,先不管条件,先执行一回,然后在开始进行条件判断
- 语法: `do { 要执行的代码 } while (条件)`
4、FOR 循环
- 和 `while` 和 `do while` 循环都不太一样的一种循环结构
- 道理是和其他两种一样的,都是循环执行代码的
- 语法: `for (var i = 0; i < 10; i++) { 要执行的代码 }`
5、BREAK 终止循环
- 在循环没有进行完毕的时候,因为我设置的条件满足,提前终止循环
- 比如:我要吃五个包子,吃到三个的时候,不能在吃了,我就停止吃包子这个事情
- 要终止循环,就可以直接使用 `break` 关键字
6、CONTINUE 结束本次循环
- 在循环中,把循环的本次跳过去,继续执行后续的循环
- 比如:吃五个包子,到第三个的时候,第三个掉地下了,不吃了,跳过第三个,继续吃第四个和第五个
- 跳过本次循环,就可以使用 `continue` 关键字
二十、字符串 ES5/String
1、严格模式
- 我们都知道 js 是一个相对不很严谨的语言
- 而且开发的时候,一些代码也不是很严格要求
- 而严格模式就是对开发的时候写的一些内容做了要求
2、开启严格模式
- 想开启严格模式,直接在代码最开始的位置写上字符串 `use strict`
<script>
'use strtic'
// 下面代码书写就要按照严格模式来书写
</script>
①.声明变量必须有 `var` 关键字
②.函数的行参不可以重复
③. 声明式函数调用的时候函数内部没有 this =>undefined
3、创建字符串的方法
①字面量 var str = 'hello'
②构造函数 var str = new String('hello')
4、字符串的常见方法
①、 - `charAt(索引)` 是找到字符串中指定索引位置的内容返回 如果没有对应的索引,那么就会返回 空字符串
②、 `charCodeAt(索引)` 就是返回对应索引位置的 unicode 编码
③、`indexOf` 就是按照字符找到对应的索引
④、 `substring` 是用来截取字符串使用的
- 语法: `substring(从哪个索引开始,到哪个索引截止)`,包含开始索引,不包含结束索引
⑤、 `substr` 也是用来截取字符串的
- 语法:`substr(从哪个索引开始,截取多少个)`
⑥、 `toLowerCase` 转换成大写
⑦、 `toLowerCase ` 转换成小写
###深拷贝
1.把数组或者对象转成json格式字符串;JSON.stringify
2.可以把 json格式的字符串 转成对象或者数组;JSON.parse
function deepCopy(arg) {
return JSON.parse(JSON.stringify(arg));
}
var obj = {
name: "张三",
obj2: {
age: 20,
height: "178cm"
}
}
var obj2 = deepCopy(obj);
obj2.obj2.age = 111;
console.log(obj);
console.log(obj2)
###倒计时定时器
- 倒计时多少时间以后执行函数
- 语法: `setTimeout(要执行的函数,多长时间以后执行)`
- 会在你设定的时间以后,执行函数
```javascript
var timerId = setTimeout(function () {
console.log('我执行了')
}, 1000)
console.log(timerId) // 1
```
- 时间是按照毫秒进行计算的,1000 毫秒就是 1秒钟
- 所以会在页面打开 1 秒钟以后执行函数
- 只执行一次,就不在执行了
- 返回值是,当前这个定时器是页面中的第几个定时器
#### 间隔定时器
- 每间隔多少时间就执行一次函数
- 语法: `setInterval(要执行的函数,间隔多少时间)`
```javascript
var timerId = setInterval(function () {
console.log('我执行了')
}, 1000)
```
- 时间和刚才一样,是按照毫秒进行计算的
- 每间隔 1 秒钟执行一次函数
- 只要不关闭,会一直执行
- 返回值是,当前这个定时器是页面中的第几个定时器
`clearTimeout` 和 `clearInterval`