JS学习笔记(day01-day07)

Day 01（js的基本语法）

一 、 JS的代码注释

        // js注释的内容   单行注释
        /* 
            多行注释
            js的注释内容
            可以写多行
        */

二 、JS的三种写法

1.行内样式

<div class="box" onclick="javascript: alert('hello world')">
        这是一个盒子
</div>

2.内部样式

<script>
        alert('男神')
</script>
//写在body内部

3.外联样式

<script src=" js文件路径"></script>

三 、变量(重点)

• 变量指的是在程序中保存数据的一个容器

• 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

• 也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他

• 语法： var 变量名 = 值 例如:var box = 15

变量的命名规则和命名规范

• 规则： 必须遵守的，不遵守就是错

1. 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成

1. 严格区分大小写

1. 不能由数字开头，不要使用中文汉字命名

1. 不能是 保留字 或者 关键字

1. 不要出现空格

• 规范： 建议遵守的（开发者默认），不遵守不会报错

1. 变量名尽量有意义（语义化）

1. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

四 、 数据类型的分类

1.基本数据类型

1. 数值类型（number）

• 一切数字都是数值类型（包括二进制，十进制，十六进制等）

• NaN（not a number），一个非数字

1. 字符串类型（string）

• 被引号包裹的所有内容（可以是单引号也可以是双引号）

1. 布尔类型（boolean）

• 只有两个（true 或者 false）

1. null类型（null）

• 只有一个，就是 null，表示空的意思

1. undefined类型（undefined）

• 只有一个，就是 undefined，表示没有值的意思

2.复杂数据类型

1.array(数组)

五 、判断数据类型

• 既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据

• 使用 typeof 关键字来进行判断

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);

// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

六 、其他数据类型转成字符串、其他类型转数值

1. 变量.toString()

• 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

'变量.tostring()'还可以转换进制.

变量.toString(2)

    	var num = 10
        console.log(num.toString())   // 默认转10进制
        console.log(num.toString(2))  // 默认转2进制  10-->转换成二进制-->转换成字符串
        console.log(num.toString(8))  // 默认转8进制  10-->转换成八进制-->转换成字符串
        console.log(num.toString(16)) // 默认转16进制  10-->转换成十六进制-->转换成字符

1. String(变量)

• 所有数据类型都可以

1. 使用加法运算

• 在 JS 里面，+ 由两个含义

• 字符串拼接： 只要 + 任意一边是字符串，就会进行字符串拼接

• 加法运算：只有 + 两边都是数字的时候，才会进行数学运算

4 、Number( )、parseInt( )、parseFloat( )

七 、 其他数据类型转成布尔

1. Boolean(变量)

• 在 js 中，只有 ''、0、null、undefined、NaN，这些是 false，其余都是 true

八 、NAN

• 意思是:not a number

• 代表数值类型的非数字

• 产生

1. 其他转数值

1. 计算

• 注意事项

1. nan和任何数做任何比较结果都是false 包括自己(nan=nan)

1. nan和任何数做任何数计算的结果都是nan (nan/nan) (nan-nan)

九 、赋值运算符

1. =

• 就是把 = 右边的赋值给等号左边的变量名

• var num = 100

• 就是把 100 赋值给 num 变量

• 那么 num 变量的值就是 100

1. +=

var a = 10;
a += 10;
console.log(a); //=> 20

• a += 10 等价于 a = a + 10

1. -=

var a = 10;
a -= 10;
console.log(a); //=> 0

• a -= 10 等价于 a = a - 10

1. *=

var a = 10;
a *= 10;
console.log(a); //=> 100

• a *= 10 等价于 a = a * 10

1. /+

var a = 10;
a /= 10;
console.log(a); //=> 1

• a /= 10 等价于 a = a / 10

1. %=

var a = 10;
a %= 10;
console.log(a); //=> 0

• a %= 10 等价于 a = a % 10

十 、比较运算符

1. ==

• 比较符号两边的值是否相等，不管数据类型

• 1 == '1'

• 两个的值是一样的，所以得到 true

1. ===

• 比较符号两边的值和数据类型是否都相等

• 1 === '1'

• 两个值虽然一样，但是因为数据类型不一样，所以得到 false

1. !=

• 比较符号两边的值是否不等

• 1 != '1'

• 因为两边的值是相等的，所以比较他们不等的时候得到 false

1. !==

• 比较符号两边的数据类型和值是否不等

• 1 !== '1'

• 因为两边的数据类型确实不一样，所以得到 true

1. >=

• 比较左边的值是否 大于或等于 右边的值

• 1 >= 1 true

• 1 >= 0 true

• 1 >= 2 false

1. <=

• 比较左边的值是否 小于或等于 右边的值

• 1 <= 2 true

• 1 <= 1 true

• 1 <= 0 false

1. >

• 比较左边的值是否 大于 右边的值

• 1 > 0 true

• 1 > 1 false

• 1 > 2 false

1. <

• 比较左边的值是否 小于 右边的值

• 1 < 2 true

• 1 < 1 false

• 1 < 0 false

十一 、逻辑运算符

1. &&

• 进行 且 的运算

• 符号左边必须为 true 并且右边也是 true，才会返回 true

• 只要有一边不是 true，那么就会返回 false

• true && true true

• true && false false

• false && true false

• false && false false

1. ||

• 进行 或 的运算

• 符号的左边为 true 或者右边为 true，都会返回 true

• 只有两边都是 false 的时候才会返回 false

• true || true true

• true || false true

• false || true true

• false || false false

1. !

• 进行 取反 运算

• 本身是 true 的，会变成 false

• 本身是 false 的，会变成 true

• !true false

• !false true

十二 、自增自减运算符（一元运算符）

1. ++

• 进行自增运算

• 分成两种，前置++ 和 后置++

• 前置++，会先把值自动 +1，在返回

var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11

• 后置++，会先把值返回，在自动+1

var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11

1. --

• 进行自减运算

• 分成两种，前置-- 和 后置--

• 和 ++ 运算符道理一样

Day 02（循环结构）

一、程序运行的三大结构

1. 顺序结构

1. 选择结构

1. 循环结构

二、If条件分支结构

if的语句格式     
语法： if (条件) { 要执行的代码 }
例如:
	<script>
        num = 0 
        if(num==='0'){
            console.log(true);
        }
    </script>

if else的语句格式
语法： if (条件) { 条件为 true 的时候执行 } 
 	   else { 条件为 false 的时候执行 }
例如:
 	<script>
        num = 0 
        if(num==='0'){
            console.log(true);
        }else{
            console.log(false);
        }
    </script>

if ... else if ...的语句格式
 语法：if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
例如:
	<script>
        var num=prompt('请输入一个数字')
        if(num>=0){
            console.log('该数字大于0');
        }else if(num<0){
            console.log('该数字小于0');
        }
    </script>	

if else if … else 语句格式
 if (false) {
    alert('我是代码段1')
  } else if (false) {
    alert('我是代码段2')
  } else {
    alert('我是代码段3')
  }

三、switch 条件分支结构

语法：
 switch (要判断的变量) {
    case 情况1:
      情况1要执行的代码
      break
    case 情况2:
      情况2要执行的代码
      break
    case 情况3:
      情况3要执行的代码
      break
    default:
      上述情况都不满足的时候执行的代码
  }

四、三元运算（扩展）

• 三元运算，就是用 两个符号 组成一个语句

• 三元运算只是对 if else 语句的一个简写形式

• 语法： 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

var age = 18;
age >= 18 ? alert('已经成年') : alert('没有成年')

五、循环结构

• 循环结构，就是根据某些给出的条件，重复的执行同一段代码

• 循环必须要有某些固定的内容组成

1. 初始化

1. 条件判断

1. 要执行的代码

1. 自身改变

1.while循环

语法 ： while (条件) { 满足条件就执行 }
因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了
例如:
	<script>
        var n=100
        console.log('循环之前的代码')
        while(n<10){
            console.log('代码执行了', n)
            n++
        }
        console.log('循环之后的代码')
    </script>	

2.do while 循环

语法： do { 要执行的代码 } while (条件)
例如:
	<script>
        var n=100
        console.log('循环之前的代码')
        do{
            console.log('代码执行了', n)
            n++
        }while(n<10)
        console.log('循环之后的代码')
    </script>

while和do while的区别

1. while 会先进行条件判断，满足就执行，不满足直接就不执行了

1. 但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断

3.for循环

语法： for (var i = 0; i < 10; i++) { 要执行的代码 }
	<script>
        console.log('循环之前的代码')
        for(var n=0;n<10;n++){
            console.log('代码执行了', n)
        }
        console.log('循环之后的代码')
    </script>

break 终止循环

• 在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环

• 比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情

• 要终止循环，就可以直接使用 break 关键字

continue 结束本次循环

• 在循环中，把循环的本次跳过去，继续执行后续的循环

• 比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个

• 跳过本次循环，就可以使用 continue 关键字

Day 03（函数重点）

一 、函数的概念

将一段代码以命名方式存储到一个盒子里面 在要使用代码的时候可以根据这个名称找到这段代码然后执行

1.语法

- 定义函数： 存代码
```js
    function 函数名(){
        一段代码
    }
```
- 调用函数： 使用代码
```js
    函数名()
```
例如:
	<script>
        function getFunction(){
            函数体
        }
        getFunction() //调用上面的函数
    </script>	

2.函数优点

• 封装代码，使代码更加简洁

复用，在重复功能的时候直接调用就好

代码执行时机，随时可以在我们想要执行的时候执行

3.函数参数的个数关系

• 形参个数和实参相等 实参会从左往右一一给形参赋值

• 形参个数大于实参 多余的形参它的值是undefined

• 形参个数小于实参 多余的实参相当于白给了

4.函数的返回值

• 返回值: 函数在调用位置得到的结果

• 函数会有一个默认的返回值undefined

• 如果我们希望函数有一个自定义的返回值 只需要在函数中写上return 数据 这个数据就会当做函数的返回值

• 如果函数调用之后得到一个结果 我们需要拿到这个结果进行下一步运算或者判断 这时候函数就需要有返回值

二、函数定义两种方式

1. 声明式的定义

    function 函数名(){
        一段代码
    }

1. 赋值式的定义

    var 函数名 = function(){
        一段代码
    }

三、预解析 预编译 声明提前

• js代码在执行之前浏览器有一个解析的过程

• 在编译的阶段会通读整个js的代码 挑出中间某一些代码提前执行

• 提前执行

1. 所有用var声明的变量 会将定义提前,只是定义提前 不会将赋值提前

1. 所有声明式的函数会提前定义

• 影响

1. 所有用var声明的变量可以提前使用只是使用的值是undefined

1. 声明式函数可以在定义之前使用

四、作用域

• 含义： 一个变量起作用的范围

• 分类：

• 全局作用域

• 不被函数包裹区域

• 局部作用域

• 函数的内部（花括号）

• 变量分类

• 全局变量

• 在全局作用域里面定义的变量

• 全局变量它可以在任何位置使用

• 局部变量

• 在局部作用域里面定义的变量

• 局部变量只能在当前的局部作用域使用

五、函数的参数（重点）

• 我们在定义函数和调用函数的时候都出现过 ()

• 现在我们就来说一下这个 () 的作用

• 就是用来放参数的位置

• 参数分为两种 行参 和 实参

// 声明式
function fn(行参写在这里) {
  // 一段代码
}

fn(实参写在这里)

// 赋值式函数
var fn = function (行参写在这里) {
  // 一段代码
}
fn(实参写在这里)

六、行参和实参的作用

1. 行参

• 就是在函数内部可以使用的变量，在函数外部不能使用

• 每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范）

• 多个单词之间以 , 分隔

// 书写一个参数
function fn(num) {
  // 在函数内部就可以使用 num 这个变量
}

var fn1 = function (num) {
 // 在函数内部就可以使用 num 这个变量
}

// 书写两个参数
function fun(num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

var fun1 = function (num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

• 如果只有行参的话，那么在函数内部使用的值个变量是没有值的，也就是 undefined

• 行参的值是在函数调用的时候由实参决定的

1. 实参

• 在函数调用的时候给行参赋值的

• 也就是说，在调用的时候是给一个实际的内容的

function fn(num) {
  // 函数内部可以使用 num 
}

// 这个函数的本次调用，书写的实参是 100
// 那么本次调用的时候函数内部的 num 就是 100
fn(100) 

// 这个函数的本次调用，书写的实参是 200
// 那么本次调用的时候函数内部的 num 就是 200
fn(200)

• 函数内部的行参的值，由函数调用的时候传递的实参决定

• 多个参数的时候，是按照顺序一一对应的

function fn(num1, num2) {
  // 函数内部可以使用 num1 和 num2
}

// 函数本次调用的时候，书写的参数是 100 和 200
// 那么本次调用的时候，函数内部的 num1 就是 100，num2 就是 200
fn(100, 200)

七、参数个数的关系

1. 行参比实参少

• 因为是按照顺序一一对应的

• 行参少就会拿不到实参给的值，所以在函数内部就没有办法用到这个值

function fn(num1, num2) {
  // 函数内部可以使用 num1 和 num2
}

// 本次调用的时候，传递了两个实参，100 200 和 300
// 100 对应了 num1，200 对应了 num2，300 没有对应的变量
// 所以在函数内部就没有办法依靠变量来使用 300 这个值
fn(100, 200, 300)

1. 行参比实参多

• 因为是按照顺序一一对应的

• 所以多出来的行参就是没有值的，就是 undefined

function fn(num1, num2, num3) {
  // 函数内部可以使用 num1 num2 和 num3
}

// 本次调用的时候，传递了两个实参，100 和 200
// 就分别对应了 num1 和 num2
// 而 num3 没有实参和其对应，那么 num3 的值就是 undefined
fn(100, 200)

八、特殊的函数

1. 匿名函数

    var 函数名 = function (){

    }

1. 自执行函数

   (function(){
    // 一段代码
   })()

1. 递归函数

    function 函数名(){
        函数名() // 在函数内部调用自己
    }
    函数名()

• 类似于循环

• 在函数内部自己调用自己 函数就会不断执行 就可以导致死递归的错误Uncaught RangeError: Maximum call stack size exceeded 最大调用栈长度溢出

• 递归函数都需要有一个结束条件

• 递归的两个过程

• 传递的过程

• 所有没有得到结果的函数会进入调用栈等待（入栈）

• 回归的过程

• 得到的结果的函数就会出调用（出栈）

• 递归就是用于解决循环无法实现的问题

九、return关键字

1. 可以让函数执行结束之后有一个返回值

1. 可以结束函数的执行

十、return和break的区别

• return只能在函数的内部使用

• break是用来结束循环和switch穿透

十二、随机数

• Math.random() [0,1)

十三、赋值规则

• 当你想给一个变量赋值的时候，那么就先要找到这个变量，在给他赋值

• 变量赋值规则：

• 先在自己作用域内部查找，有就直接赋值

• 没有就去上一级作用域内部查找，有就直接赋值

• 在没有再去上一级作用域查找，有就直接赋值

• 如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，在给他赋值

十四、递归函数

• 什么是递归函数

• 在编程世界里面，递归就是一个自己调用自己的手段

• 递归函数： 一个函数内部，调用了自己，循环往复

// 下面这个代码就是一个最简单的递归函数
// 在函数内部调用了自己，函数一执行，就调用自己一次，在调用再执行，循环往复，没有止尽
function fn() {
  fn()
}
fn()

• 其实递归函数和循环很类似

• 需要有初始化，自增，执行代码，条件判断的，不然就是一个没有尽头的递归函数，我们叫做 死递归

Day04(数组重点)

数组（js里面最重要的数据类型） Array

1、数组的类型：复杂的数据类型

2、有序的数据集合

• - 数组的有序性不是说数据往里面存放的时候会自动排序

+ 有序是体现在数组左侧的下标 索引

+ 每往数组里面放一个数据 自动生成一个下标

3、获取数组的长度

数组名.length

4、数组的长度

• + 0-数组的长度-1

5.创建一个空数组

  1. 字面量
        + var 数组名 = []
  2. 内置构造函数
        + var 数组名 = new Array()

6.往数组里面添加数据

  1.创建的时候添加初始化数据

+ var 数组名 = [11,2,23,4,5,6,67,2]
+ var 数组名 = new Array(11,2,23,4,5,6,67,2)

  2. 动态给数组添加数据
+ 数组名.push(数据)   往数组的末尾添加一个数据
+ 数组名.unshift(数据)  往数组的开头添加一个数据

  3. 通过下标的方式给数组添加数据
+ 数组名[下标] = 数据

7.获取数组里面的数据

   1. 根据下标的方式获取
        + 数组名[下标]
        + 越界访问取到的数据都是undefined 不会报错
    2. 动态获取
        + var 数据 = 数组名.pop()
        + var 数据 = 数组名.shift()
        + 这种获取方式会改变数组的长度

8.遍历数组

	- 取出数组里面所有的数据
    - 循环获取 先生成数组的下标范围 0 - 数组长度-1
    
    利用for循环
        for(var i=0;i<数组名.length;i++){
            console.log('下标', i)
            console.log('每一项', 数组名[i])
        }

	利用for..in循环
        for(var 变量名 in 数组名){
            console.log('下标', 变量名)
            console.log('每一项', 数组名[变量名])
        }

	利用for..of循环
       for(var 变量名 of 数组名){
            console.log('每一项', 变量名)
        }
  
	利用forEach
        数组名.forEach(function(item, index){
            // item 代表数组里面每一项
            // index 代表下标
        })
    	
	map方法
    将一个数组里面数据经过计算 得到一个计算后的新数组
        // map函数调用之后也会有一个返回值  返回就是计算后的数组
        var 新数组 = 数组.map(function(item, index){
            // item代表数组的每一项
            // index代表数组的索引
            // map需要返回一个数据 会把这个数据放到新数组里面
        })
        
     filter方法
     将一个数组根据某一个条件进行过滤 得到一个过滤后的新数组
      // filter方法调用之后有一个返回值 返回的是过滤后的数组
        var 新数组 = 数组.filter(function(item, index){
            // 这个函数需要有一个返回 返回的是一个条件  是一个布尔值
            // 会根据这个布尔值来决定是保留还是撇弃当前项数据
        })
        
     every方法
     判断数组里面是否每一项都符合这个条件
        var 布尔值 = 数组.every(function(item, index){
            // 需要返回值 这个返回值就是条件
        })
        
	some方法
     判断数组里面是否有符合这个条件的某一项    
        var 布尔值 = 数组.some(function(item, index){
             // 需要返回值 这个返回值就是条件
        })
   

9.删除数组里面某一项数据

   delete 数组名[下标] 会删除数据 但是不会删除长度

   数组名.splice(开始的下标, 删除个数)

10.修改数组里面某一项数据

    数组名[下标] = 数据

11.判断数组中有无这一项数据

判断数组里面是否包含某一项数据
    - 数组名.indexOf(数据)
        + 找到了这个数据 返回第一个匹配数据对应的下标
        + 没有这个数据 固定返回-1
    - 数组名.includes(数据)
        + 找到了这个数据 返回true
        + 没有找到这个数据 返回false

12.数组的去重、拼接、旋转

  代码的去重操作（思路）
  <script>
        var  list = [1,34,1, true, 54,true, 21,'哈哈', 2,'哈哈',3, undefined,42]
        // 新建一个数组 
        var newList = []
        // 取出老数组的每一项
        for(var i=0;i<list.length;i++){
            console.log('每一项', list[i])
            // 判断新数组里面有没有这一项
            if(newList.indexOf(list[i]) === -1){
                // 找不到才放进去
                newList.push(list[i])
            }
        }
        console.log(newList)
        /*  新建一个数组 
            取出老数组里面每一项 
                - 判断新数组里面是否包含这一项数据 如果不包含就放进去  包含就不放进去
        */
    </script>
 
 
 	 数组的拼接 
    	- 数组名.concat(数组01,数组02, ...)
 	 数组的反转
   	  	- 数组名.reverse()

13、数组的排序

- 冒泡排序
        + 双重for循环
        + 外层循环代表比较次数 次数=数组的长度-1
        + 内层循环代表每一次比较 每一次拿相邻的两项进行相比 如果前一项大于后一项 交换两项的位置

    - 数组名.sort()

Day05（字符串）

一、js的存储数据方式-值存储和引用存储

• 在js中有两种存储数据的方式: 栈和堆

• 在栈里面存储变量名

• 如果数据是基础数据类型 直接存在栈里面

• 如果数据是复杂数据类型 存在堆内存里面 每一次在堆内存存储一个数据都会得到一个空间地址

• 基础数据类型它的值和变量都是存储在栈里面（值存储）

• 复杂数据它的变量名是存在栈里面 在栈里面存的值是一个指向堆内存空间的地址（引用） 这个地址指向堆内存空间的数据(引用存储)

• js在查找数据的时候只会在栈里面查找

二、值传递和引用传递

• 把一个变量赋值给另一个变量 这个过程称为传递的过程

• 基础数据类型之间的赋值是把值给另一个变量， 一个变化另一个不受影响 这个赋值过程称为值传递

• 复杂数据类型之间的赋值是把地址给另一个变量， 一个变化另一个也会变化。因为他们的地址是指向同一个堆内存里面的数据 这个赋值过程称为引用传递

三、值比较和引用比较

• 两个变量比较是否相等

• 基础数据类型拿两个变量的值进行比较的

• 复杂数据类型拿两个变量的地址进行比较

四、字符串

• 凡是被单引号或者双引号包裹的

• 多个字符组成的整体

• 'hello'

• 字符串在底层存储方式和数组是一致（字符串和数组的共性）

1. 支持下标的方式访问

1. 有长度

1. 可以支持遍历

1. 支持查找

五、字符串与数组的区别

    1. 字符串不支持下标方式修改
    2. 字符串不支持用forEach去遍历
    3. 字符串不支持删除
    4. 不支持反转
    5. 排序

六、字符串和数组的相互转换

	1. 把字符串转换成数组（拆分）
        - var 数组 = 字符串.split()
    2. 把数组转换成字符串（拼接）
        - var 字符串 = 数组.join()

七、字符串的方法

	字符串.charAt(下标)
    字符串.charCodeAt(下标)

八、编码

    - ASCII码表
    - unicode码表（万国码）
    - 字符串比较
        
    - 中文编码在utf-8范围
        + u4e00-u9fa5

九、字符串转大小写常用方法

        var str = 'sdAaSdas'
        var newStr = str.toUpperCase()
        //转大写
        var newStr1 = str.toLowerCase()
        //转小写

十、字符串裁剪

 	- 字符串.substring(开始下标, 结束下标)  包含开始 不包含结束
    - 字符串.substr(开始下标,截取个数)
    - 字符串.slice(开始下标, 结束下标)  包含开始 不包含结束

十一、substring和slice的区别

	  1. slice可以支持负数
        + 传负数代表下标是从右往左数的 从-1开始
        + 裁剪的方向永远都是从左往右
        + 必须有交集才能得到结果
    2. slice既可以裁剪数组也可以裁剪字符串

Day06(对象、时间、数学函数)

一、对象的类型：是一种复杂的数据类型、、键值对的数据集合

二、创建对象

	1. 字面量
        - var 对象名 = {}
    2. 内置构造函数
        - var 对象名 = new Object()	

三、向对象中添加数据

 1.初始化添加
 var 对象名 = {
            键名: 值,
            键名: 值,
            ...
        }
 2. 动态添加数据
   1. 点语法
    对象名.键名 = 值
   2. 下标法
    对象名['键名'] = 值

四、获取对象中的数据

	 1. 点语法
        - 对象名.键名
    2. 下标法
        - 对象名['键名']

五、修改对象中的数据

	同添加
    如果key不存在就新增
    如果key存在就修改

六、删除对象中的数据

	 delete 对象名.key
     delete 对象名['key']

七、遍历对象中的数据

只能使用for ... in循环
for(var key in 对象名){
            console.log(key) // 对象的键名
            console.log(对象名.key)
        }

八、内置对象 Math的对象属性

对象属性：当对象的value是一个具体数据 称这个键值对是对象的一个属性
    + **Math.PI**
    + Math.E

九、内置对象 Math的对象方法

对象方法： 当对象的value是一个函数的时候 称这个键值对是对象的一个方法
    + Math.abs() 绝对值
    + Math.max() 获取最大值
    + Math.min() 获取最小值
    + Math.sqrt() 平方根
    + Math.pow(底数, 幂数) 求多少次方
    + 常用方法
        - **Math.random()** 随机数，最常用的
    + **取整**
        - Math.floor()  向下取整
        - Math.ceil()   向上取整
        - Math.round()  四舍五入取整

十、不定形参

调用一个函数的时候 参数的个数是不固定的 可以利用函数内部自带的arguments获取参数的信息
arguments是一个伪数组 但是可以支持遍历 因为它有长度并且可以支持下标的方式访问

十一、Date 内置构造函数

+ 和本地计算机时间相关
+ 获取年月日 时分秒 星期几
    - 创建一个日期对象
        + var riqi = new Date()
    - 利用这个日期对象获取
        + 获取年份  riqi.getFullYear()
        + 获取月份  riqi.getMonth()  从0开始的  0代表1月份
        + 获取日期  riqi.getDate()
        + 获取小时  riqi.getHours()
        + 获取分钟  riqi.getMinutes()
        + 获取秒数  riqi.getSeconds()
        + 获取星期  riqi.getDay()
+ 日期格式
    - YYYY-MM-DD hh:mm:ss
    - YYYY/MM/DD hh:mm:ss

十二、定时器

    - 间隔定时器
        + 每间隔一段时间执行代码一次
            setInterval(function(){
                // 只要写在这个函数里面的代码会间隔ms毫秒执行一次
            }, ms)
    - 延迟定时器
        + 延迟一段时间之后执行代码一次
            setTimeout(function(){
                // 只要写在这个函数里面的代码会延迟ms毫秒执行一次
            }, ms)

十三、时间计算

    - '2000-10-08 09:45:12'
    - '2022-01-16 17:53:02'
    
    - 时间戳
        + 某一个时间距离计算机初始化时间（1970-01-01 00:00:00）相差的毫秒数
        + 先要把字符串格式的转换成日期对象
            - var riqi = new Date(str)
        + 再调用getTime()就可以获取到时间戳
            - riqi.getTime()

十四、日期对象Date

new Date()传参问题
    1. 当我们没有传参 代表获取的是当前的系统时间 当前的日期对象
    2. 当我们传了一个字符串格式的日期 代表获取的是这个字符串所代表的日期对象
    3. 当我们传了一个数字 这个数字就是一个时间戳 能够获取到这个时间戳所代表的日期对象

Day07（DOM重点)

一、dom的基本介绍

+ document object model  文档对象模型
+ 将js和html css结合
+ 利用js来操作网页
    1. 操作样式
    2. 实现交互
    3. 动画

二、获取标签（元素）

1. 根据元素的id
    - document.getElementById(id名称)  返回是唯一的元素
2. 根据元素的类名
    - document.getElementsByClassName(类名称)  返回是数组 数组里面才是想要的元素
3. 根据元素的标签名
    - document.getElementsByTagName(标签名称)  返回是数组 数组里面才是想要的元素
4. 根据选择器来获取匹配的第一个
    - document.querySelector(css选择器)
5. 根据选择器来获取所有匹配的
    - document.querySelectorAll(css选择器)

三、操作元素的样式

   - 设置样式
        + 元素.style.css属性名 = css属性值
    - 获取样式
        + 元素.style.css属性名  只能获取行内样式 无法获取外部和内部的样式 默认样式
        + getComputedStyle(元素).css属性名  所有样式都能取到

四、操作元素的内容

    - 获取
        + 元素.innerHTML   包含html标签
        + 元素.innerText   纯文字
    - 设置
        + 元素.innerHTML = 内容   识别标签
        + 元素.innerText = 内容   只能识别字符串

五、操作元素的属性值

 	- 获取
        + 元素.getAttribute(属性名)
    - 设置
        + 元素.setAttribute(属性名, 属性值)
    - 移除
        + 元素.removeAttribute(属性名)

六、操作类名

    - 只要给某一个元素设置不同的类名 就会有不同的样式
    - 设置类名
        + 元素.setAttribute('class', '类名') 会覆盖元素之前的类名
        + 元素.className = '类名'  会覆盖元素之前的类名
    - 获取类名
        + 元素.getAttribute('class')
        + 元素.className
    - 添加类名
        + 元素.classList.add(类名)
    - 移除类名
        + 元素.classList.remove(类名)
    - 判断有没有这个类名
        + 元素.classList.contains(类名)

七、操作入框属性值

 	 - 获取
        + 元素.value
    - 设置
        + 元素.value = 值

八、操作元素的尺寸

   		- 尺寸
        + 元素.clientWidth    内容+padding
        + 元素.offsetWidth    内容+padding+border

九、DOM树和DOM节点

DOM树： 描述html的层级结构
+ DOM节点： html里面的内容
    - 标签   元素节点
    - 文字   文本节点
    - 标签属性 属性节点
    - 注释   注释节点
    
    、、重点
+ 爬树
    - 获取一个已知节点的所有子节点
        + 元素.childNodes   获取到所有类型的子节点
        + 元素.children  获取到元素类型子节点
    - 获取一个已知节点的父节点
        + 元素.parentNode
    - 获取一个已知节点的前一个相邻节点
        + 元素.previousSibling   前一个兄弟节点
        + 元素.previousElementSibling  前一个兄弟元素节点
    - 获取一个已知节点的后一个相邻节点
        + 元素.nextSibling
        + 元素.nextElementSibling

十、DOM节点的属性

 - **nodeType**
        + 用于区分节点的类型
        + 元素节点  1
        + 属性节点  2
        + 文本节点  3
        + 注释节点  8
    - nodeName
        + 元素节点  标签名的大写
        + tagName
    - nodeValue

十一、获取属性节点

 	- 属性节点是写在一个元素节点身上
    - 元素节点.attributes

十二、动态操作DOM-增加

+ 创建节点
        - document.createElement(标签名) 创建一个元素节点
    + 将创建的节点添加到页面
        - 往父节点添加一个子节点
            + 父节点.appendChild(子节点)  父节点最后添加一个子节点
            + 父节点.insertBefore(子节点, 已存在的节点) 父节点的某一个存在的子节点前面追加一个子节点

十三、动态操作DOM-删除

    - 修改内容
    - 替换节点
    + 父节点.replaceChild(新节点, 老节点)

十四、动态操作DOM-修改

 - 父节点.removeChild(子节点)

十五、动态操作DOM-克隆

 - 要克隆节点.cloneNode() 只会克隆当前节点
 - 要克隆节点.cloneNode(trye) 克隆当前节点和子节点

Day08(BOM)