1.什么是Javascript

1、什么是Javascript

1.1、概述

JavaScript是一门世界上最流行的脚本语言

Java、javaScript

10天~

一个合格的后端人员，必须要精通JavaScript

1.2、历史

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到了es6版本~

但是大部分浏览器还停留在支持es5代码上~

开发环境–线上环境，版本不一致

2、快速入门

2.1、引入JavaScript

1. 内部标签

   alert（‘xxx’）:弹窗

    <!--内部js-->
   <script>
           alert('hello word!')
   /*弹窗 alert*/
   </script>
   

2. 外部引入

    <script src="../JS/MW.js"></script>
   

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hnm13Jh9-1636732352338)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211010110620228.png)]

注意：Script成对出现

//不用显示定义type，也默认就是javascript
  <script type="text/javascript"></script>

2.2、基本语法入门

浏览器调试须知：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-13DR9uOi-1636732352341)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211012162248432.png)]

Elements：元素

Console：控制台

Sources：源码调试

Network：互联网抓包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkHirD2e-1636732352342)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211012162006203.png)]

    <script>
<!--script严格区分大小写！-->
     /*1、定义变量*/
    var  source=66;/*变量类型只有一个var 变量名=变量值*/
  /*    alert(source);*/
      /*2、条件控制*/
        if(source>60 && source<70){
            alert(source)
        }else if (source>70 && source<80){
            alert(source);
        }
        alert('999');
     
      // 在浏览器的控制台打印变量！
      console.log('我的宝儿！')
    script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uzmuPGdT-1636732352345)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211012163403768.png)]

2.3、数据类型

数值，文本，图形，视频，音频。。。。

变量

var _$
//变量名不能用数字开头

number
js不区分小数和整数，都用number

123//整数123
123.12//浮点数123.1
1.12e3//科学技术法=1120
-88//负数
NaN//not a number 不是一个number
Infinity //表示无限大

字符串

‘abc’ “abc”

布尔型

ture， flase

<script>
      var  a=5;
        console.log(a>4);
  </script>

逻辑运算

&&   and
||   or
!     not

比较运算符

=  //赋值
== //等于(类型不一样，值一样，会判断ture)
  ==== //等于（类型一样，值一样，判断ture）

这是js的缺陷，坚持不要使用==比较

须知

• NaN==NaN ，这个与所有的数值都不相等，包括自己

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M9uNJhzy-1636732352349)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019221458871.png)]

• 只能通过isNaN(NaN)来判断

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KhQHjJgt-1636732352350)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019221956575.png)]

• 浮点数问题

    <script>
        /*  var  a=5;*/
          console.log((1-1/3)===1/3);
  
      </script>
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NECeUUyg-1636732352352)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019222629704.png)]

  尽量避免使用浮点数运算，存在精度问题

  函数绝对值Math.abs

  使用绝对值比较

  <script>
        /*  var  a=5;*/
          console.log((Math.abs(1-2/3)===1/3)<0.00000001);
  
      </script>
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ewnuvdFG-1636732352353)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019223106756.png)]

数组

JAVA的数组必须是相同类型的对象~，JS不用这样

对象定义数组new Array

 <script>
      /*  var  a=5;*/
       /* console.log((Math.abs(1-1/3)===1/3)<0.00000001);*/
     var arr = [1,2,3,4,5,null,'hello',true]//面向程序

        new Array(1,2,4,5) //面向程序
      console.log(arr[6]);
    </script>

取数组下表如果越界会报

undefined

null和undefined

• null 表示空

• undefined 未定义

对象

对象是大括号，数组是中括号

var person ={
            name:'chengmingwei',
            age:20,
            arr:[1,2,4,5,null]
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TZNq28Li-1636732352355)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019230430627.png)]

取对象的值

person.age
>20
person.name
>'chengmingwei'

2.4、严格检查格式

//未定义 的变量 ，默认全局变量

前提是是ES6模式下

局部变量建议使用let去定义，必须写在第一行script

用严格检查格式，use strict就会报错变量未定义类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pT6T6WgA-1636732352356)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020105854965.png)]

 <script>
    /* 'use strict' 严格检查模式，防止JAVAScrip的随意性导致出现问题t*/
'use strict';
      let  i=1;
        console.log(i);
    </script>

3、数据类型

3.1、字符串

1、正常字符串我们使用，单引号或者双引号包裹

2、注意转义字符\

\'
\n
\u4e2d \u####  unicode字符
\x41   ASCLL字符

3、多行字符串编写

<script>
//tab 上面的飘号
var msg=`
hello
world
英雄联盟
`
</script>

4.模板字符串

 'use strict';//严格检查格式
      let  name='chengmingwei';
      let   age=3;
      let    msg=`你好呀,${name}`;
        console.log(msg);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBWhJv1X-1636732352358)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020185316242.png)]

5、字符串长度

//str.length
var student='student';
        console.log(student.length);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJZH6cto-1636732352359)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020190705354.png)]

6、字符串的可变性，不可变

7、大小写转换

//注意，这里是方法，不是属性了
student.toupperCase()
student.toLowerCase()

8、student.lindexof(‘t’)

9、substring

[)
 student.substring(1)//从第一个字符串截取到最后一个字符串
 student.substring(1,3)//[1,3)

3.2、数组

Array可以包含任意的数据类型

//控制台打印数组
var arr=[1,2,3,4,56];
        console.log(arr);

1、长度

var arr=[1,2,3,4,56];
arr[0]=99;
arr.length=10;
  console.log(arr);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8I8Itqo-1636732352361)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020203531774.png)]

注意：加入arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失，如果过大就会用空来替补。

2.indexOf 通过元素查找索引

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7pWnUcHU-1636732352362)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020205235620.png)]

字符串的‘’1‘’和数字的1不同

3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xIU0EB0-1636732352364)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020205626544.png)]

4、push，pop //类似数据结构中的栈

push压入尾部
pop弹出尾部

5、unshift(),shift()头部

unshift压入头部
shift弹出头部

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0lp5dTq-1636732352365)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020210438424.png)]

6.排序sort

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScblfbTE-1636732352366)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020210927097.png)]

7.元素反转reverse()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2WEANLC5-1636732352368)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020211046480.png)]

8.concat()拼接

arr.concat('a','b','c')
(10) [9, 8, 7, 4, 3, 2, 1, 'a', 'b', 'c']

注意：concat()并不会修改数据，只会返回数据新的数组

9.连结符号join

打印拼接数组，使用特定的字符串连结

arr.join('-')
'9-8-7-4-3-2-1'

10.多维数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cw8VBreO-1636732352370)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020212526367.png)]

注意：多维数组打印的时候，arr[M] [N]表示M行的N个数组，只有一行的时候，看N,M可以未任意值，也可以为null

3.3、对象

若干个键对

var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值，
}
//定义一个person的对象，他有四个属性！
var person ={
  name:'chengmingwei',
  age:9,
  email:1092705638@qq.com,
  score:59
}

JS中对象，{。。。}表示一个对象，键值对描述属性xxxx：xxx,属性之间使用逗号隔开，最后一个不加逗号！

JavaScript中的所有的键都是字符串，值是任意对象！

<script>
    'use strict';
    var person={
        name:'chengmingwei',
        age:9,
        email:'[email protected]',
        score:59
    }
    console.log(person.name);

1、对象赋值

person.name='chengmingwei'
'chengmingwei'

2、动态的删除属性，通过delete删除对象属性

person
{name: 'chengmingwei', age: 9, email: '[email protected]', score: 59}
delete person.name
true

3、使用一个不存在的属性,不会报错 undefined

//person  kk
undefined

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaSAPPSO-1636732352371)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211020215649545.png)]

4、动态的添加，直接给新的属性添加值即可

person.name='chengmingwei'
'chengmingwei'

5、判断属性值是否在这个对象中

'age'in person
ture
//继承
'toString' in person
true

6、判断一个属性是否是这个对象自身拥有的hasOwnProperty

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4、流程控制

if判断

var age=3;
    if (age>3){
        alert('倔强青铜')
    }else{
        alert('最强王者')
    }

While循环

 let age=0;
        while(age<100){
            age=age+1;
            console.log(age);
        }
//do while
do{
  age=age+1;
            console.log(age);
}while(age<100);

for循环

 for (let i = 0; i <100 ; i++) {
        console.log(i)
    }

forEach循环遍历数组

 var age=[1,2,3,4,5,6,7,9,8];
   age.forEach(function (value) {
             console.log(value)
   }

for in…

3.5、Map和Set

ES6的新特性

Map

//var name=["Tom","Jack","Luse"];
    //var source=[100,80,60];

    var map=new Map([['Tom',100],['Jack',80],['Luese',60]]);
    var name=map.get('Tom');
   map.set('Admin',1234567);//增加或修改
   map.delete('Admin',1234567);//删除
    console.log(name);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-46xH0eA2-1636732352373)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021151420244.png)]

Set无序不重复的集合//去重

var set =new Set([1,2,3,3,3,3])
    console.log(set);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xh2jJEHy-1636732352374)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021151736662.png)]

set.add(11)//增加
Set(4) {1, 2, 3, '9'}
set.delete('1')//删除
false
set
Set(4) {1, 2, 3, '9'}
set.delete(1)
true
set
Set(3) {2, 3, '9'}
console.log(set.has(2))//是否包含这个元素

3.6、iterator

使用iterator来遍历迭代我们Map，Set

遍历数组

//for(var x in arr)遍历索引
//for(var x of arr)遍历数组值
var arr=[1,2,3,4,5]
    for(var x of arr){
        console.log(x);
    }

遍历Map

var map=new Map([['chengmingwei',20],['liqinglan',20]]);
    for(let x of map){
        console.log(x);
    }
//遍历结果
(2) ['chengmingwei', 20]
5、循环判断.html?_ijt=k6ght20dek5dh3oga80dunf7tn:25 (2) ['liqinglan', 20]

遍历Set

var set =new Set([1,2,3,4,5,88]);
   for (let x of set){
       console.log(x);
   }

区别：for of 不会遍历手动添加的值，而for in会

4、函数及面向对象

4.1定义函数

定义方式一

绝对值函数

function abs(x){
if(x>0){
   return x;
}else{
   return -x;
}
};

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完全也会返回结果，结果就是undefined

定义方式二

var abs=function(x){
        if(x>0){
            return x;
        }else{
            return -x;
        }
    }

function(x)（。。）这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数.

调用函数

abs(10)//10
abs(-10)//

参数问题：JavaScript可以传递任意个参数，也可以不传递任何参数

参数进来是否存在的问题？

假设不存在参数，如何规避？

var abs=function(x){
        //手动抛出异常
        if(typeof x !=='number'){
            throw 'Not a Number';
        }
        if(x>0){
            return x;
        }else{
            return -x;
        }
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftybChLi-1636732352376)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021230326261.png)]

arguments

arguments是一个js免费赠送的关键词；

代表，传递进来的所有的参数，是一个数组！

var abs=function(x){
    
    console.log('x=>'+x);
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i])
    }
  //遍历参数
    if(x>0){
        return x;
    }else{
        return -x;
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GrsvpP23-1636732352377)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021232712021.png)]

问题：arguments包含所有的参数，我们有时候想使用多余的参数进行附加操作。需要排除已有参数~

rest

Es6引入的新特性，获取除了已经定义的参数之外的所有参数。。。

function ab(a,b，...rest){
   console.log('a=>'+a);
      console.log('b=>'+b);
         console.log(rest);
}

rest参数只能写再函数的最后面 ，必须用…标识

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5q4781B-1636732352378)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211021235609616.png)]

4.2、变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数外不能使用~(闭包)

function f(x) {
        var x=1;
        x=x+1;
    }
    x=x+1;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在内部就互不影响。

function f1() {
  var x=1;
  x=x+1;
}
function f2() {
  var x=1;
  x=x+1;
}

嵌套，外部内能给内部内用，内部内不能给外部内用

function f1() {
  var x=1
  console.log('外部'+x)
  function f2() {
    var y=x+1
    console.log('内部：'+y)
  }
  f2()
  var z=x+y;
  console.log('底部'+z);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oU0QnSdZ-1636732352380)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211022220230453.png)]

假设，内部函数变量和外部函数的变量，重名~

function f1() {
    var x=1
     console.log('外部'+x)
    function f2() {
        var x=2
        console.log('内部：'+x)
    }
    f2()
 }

内部变量和外部变量重名，会由内到外查找（就近原则）,会自动屏蔽外部变量

提升变量的作用域

<script>
		'use strict';
	  function f1(){
		  var x='x'+y;
		  console.log('x');
		  var y='y';
	  }

结果：Xundefined

当未定义y调用的时候，JS引擎会自动默认提升y的申明，但是不会提升赋值。

这个在JavaScript建立之初就存在的特性。

养成规范：所有的变量的定义都写函数头部，不要乱放，方便代码的维护。

function f1(){
  var x=1;
  var y=x+1;
//  z,v..
  //以后随便用
}

全局函数

var x=1;
function f1(){
  console.log(x);
}
f1();
console.log(x);

全局对象window

var x=1;
	    alert(x);
		window.alert(x);
		var old_alert =window.alert(123);
		//alert失效了
		var  old_alert= function (){
			
		}
		//恢复
    window.alert= old_alert;
    window.alert=old_alert(456);

JavaScript实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突——>如果能够减少冲突？

结果:ReferenceError: x is not defined

<script>
  //报错内外都没定义直接使用，找不到x
    window.alert(x);
</script>

结果：x is not defined

把自己的代码全部放入自己定义的唯一空间名中，降低全局命名的冲突问题

jQuery=$()

//定义全局变量
    var chenmingwei={};
    //添加属性
    chenmingwei.name='chengmingwei';
    chenmingwei.age=20;
    chenmingwei.add=function (a,b) {
         return(a,b);
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YTf1erxo-1636732352381)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211024220851302.png)]

Es6 let关键字，解决局部作用域的冲突问题。

function aa() {
        //建议使用let解决局部变量冲突的问题
         for (let i = 0; i <100 ; i++) {
             console.log(i)
         }
         //var全局作用冲突的作用
         console.log(i+1);
     }

建议大家都是用let去定义局部作用域的变量：

常用const

在Es6，怎么定义常量：只有用全部大写字母重命名的就是常量；建议不要修改它的值。

 var PI='3.1415';
    console.log(PI);
    PI=123;
    console.log(PI);

在Es6引入了常量关键字const

 const PI='3.1415';
    console.log(PI);
    PI=123;
    console.log(PI);

结果：Assignment to constant variable.

4.3、方法

var chenmingwei={
        name:'chenmingwei',
        birth:2000,
        age:function(){
          now=new Date().getFullYear();
          //this 指向它
         return  now-this.birth;
    }
  //属性
  chenmingwei.name
  //方法
  chengmingwei.age()

拆开写

function getAge() {
        now=new Date().getFullYear();
        return  now-this.birth;
    }
    //拆开
    var chenmingwei={
        name:'chenmingwei',
        birth:2000,
        age:getAge
    }
    //调用的方法写方法名不用写括号

直接调用getAge不会返回数据，结果NaN。因为这个方法this指向了对象chenmingwei

Apply定向指向对象

在js中可以用apply控制this的指向

getAge().apply(chenmingwei,[])

 function getAge() {
        now = new Date().getFullYear();
        return now - this.birth;
    }
    //拆开
    var chenmingwei={
        name:'chenmingwei',
        birth:2000,
        age:getAge
    }
    getAge().apply(chenmingwei,[]);//指向对象chenmingwei，参数空参

5、内部对象

标准对象

typeof '123'
'string'//字符
typeof 123
'number'//数字
typeof  []
'object'//数组
typeof  {}
'object'
typeof true
'boolean'//布尔
typeof  undefined
'undefined'//未定义
typeof  Math.abs
'function'//函数

5.1、DATE日期

基本使用

var now=new Date();
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//日
    now.getHours();//时
    now.getSeconds();//秒
    now.getMinutes()//分
    now.getDay();//星期
    now.getTime();//时间戳
    //转换成本地时间

转换

now.toDateString
now.toLocaleString();
结果：'2021/10/25 上午10:38:09'

5.2、JSON

json是什么

早期，所有数据传输习惯使用XML文件！

• JSON(JavaScript Object Notion,JS对象简朴)是一种轻量级级的数据交换格式。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效提升网络传输效率

在JavaScript一切皆是对象、任何js支持的类型都可以用JSON来表示，

• 对象用{}
• 数组用[]
• 所有的键值对都是用key.value

JSON字符串和JS对象的转化

JSON.stringify—转字符串

JSON.parse_解析

var user={
        name:'chenmingwei',
        age:20,
        sex:'男'
    }
    //对象转JSON字符串
    var jsonUser=JSON.stringify(user);
    //JSON字符串转对象   Parse解析
    var   obj=JSON.parse('{"name":"chenmingwei","age":20,"sex":"男"}')
//{name: 'chenmingwei', age: 20, sex: '男'}

JSON和对象区别

var obj={name:'chenmingwei',age:20};
var json={"name":'chenmingwei',"age":20};

5.3、Ajax

• 原生的js写法 xhr 异步请求
• JQuery封装好的方法$("#name").ajax("")
• axios请i求

6、面向对象编程

原型对象

javascript、java、c#。。。面向对象；javascript有什么区别！

类：模板 原型对象

对象：具体的实例

类是对象的抽象，对象是类的一个具体表现

在JavaScript这个需要换一下思维

原型：

xiaoming.proto = obj; //前后两个下划线

var obj={
        name:'chenmingwei',
        age:20,
        pb:function(){
           console.log(this.name+'+return')
        }
    };
    //继承obj的属性和方法
    var  xiaoming={
        name:'xiaoming'
    };

    var   Bird={
      fly:function{
      console.log(this.name+"fly")
    }
    };
    //可以继承父类全部数据，有的就替换
    //继承方法1  原型对象
   xiaoming.__proto__ = obj;  
//小明的原型是obj
   xiaoming.__proto__ = Bird;  

    //继承方法2
   Object.setPrototypeOf(xiaoming,obj);

function  student(name) {
            this.name=name;
    }
    //增加一个方法，原型继承
    student.prototype.hello=function () {
                alert('JAVA')
    }

class继承

class关键字，在ES6引入的

1、定义一个类，属性，方法

class student{
  constructor(name) {
    this.name=name;
  }
  hello(){
    alert('狂神')
  }
}
var xiaoming=new student('xiaoming')
//调用——xiaoming.hello()

2、继承

class  xiaostudent{
        constructor(name,age) {
            this.name=(name);
            this.age=function () {
                 alert('今年3岁了')
            }
        }
    }
   var xiaoming=new student('xiaoming')
    var xiaohong=new xiaostudent('xiaohong')
    //xiaohong.age()

本质：查看原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUxM6VD7-1636732352383)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211025192009259.png)]

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aIHfE1W6-1636732352384)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211025194358920.png)]

7、操作BOM对象(重要)

浏览器介绍

JavaScript和浏览器有什么关系？

JavaScript诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

• IE6~11
• Chrome
• Safari
• FireFox

三方：

• QQ浏览器
• 360浏览器

Window(重要)

window代表 浏览器窗口

window.innerHeight
406
window.innerWidth
923
window.outerHeight
419
window.outerWidth
222

Navigator

Navigator封装了浏览器的信息

Navigator.arguments

大多数时候，我们不会使用Navigator对象，因为会被人修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1536px
screen.height
864px

location(重要)

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新地址
location.assign('https://www.baidu.com')

document(内容)

document代表当前页面，HTML,DOM文档树

document.title
'百度一下，你就知道'
document.title='你是个大傻逼'
'你是个大傻逼'

获取具体的文档树节点

<dl  id="app">
    <dd>java</dd>
    <dd>C++</dd>
    <dd>C语言</dd>
</dl>
<script>
    var dl=document.getElementById(app);
</script>

获取cookie

document.cookie

劫持原理

www.taobao.com

<script src="aa.js"> </script>
//恶意人员：获取你的cookie

history

history代表浏览器的历史纪录

history.back()//后退
history.forward(//

8、操作DOM对象(重要)

核心

浏览器网页就是一个Dom树形结构！

• 更新：更新Dom节点
• 遍历dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新节点

要操作一个Dom节点，就必须要获得这个Dom节点

8.1、获得dom节点

<div  id="father">
    <h1>标题一</h1>
    <p  id="p1">段落1</p>
    <p  class="p2">段落2</p>
</div>
<script>
    'use strict';
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    //获取父节点下的全部子节点
    var children=father.children;
    var firstchidren=father.firstChild;//第一个孩子
    var lastchildren=father.lastChild;//最后一个孩子
    var p1text=p1.textContent;//下一个孩子
</script>

这是原生代码，之后我们尽量使用JQuery

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bh9KRwsy-1636732352386)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026133237990.png)]

8.2、更新节点

• id1.innerText='abc';修改文本的值
• id1.innerHTML='超链接修改文本的超文本标记语言
• id1.style.color='red'; id1.style.fontFamily='楷体'修改文本的样式

<div id="id1"></div>
<script>
    var id1=document.getElementById('id1');
    id1.innerText='abc';
    id1.innerHTML='超链接';
    id1.style.color='red';
    id1.style.fontFamily='楷体'
</script>

8.3、删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div  id="father">
<h1>标题一h1>
<p  id="p1">段落1p>
<p  class="p2">段落2p>
div>
<script>
    //通过父类删除子节点
    var self=document.getElementById('father');
    self.removeChild(p1);
    //获取子节点的父亲然后删除
    var father=p1.parentElement;
    father.removeChild(p1)
script>

//删除一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])

注意：删除多个节点的时候，children是时刻变化的，删除节点的时候一定要注意！

8.4、插入节点

我们获得了某个节点，假设这个dom节点是空的， 我们通过innerHTML就可以增加一个元素，但是这个dom节点已存在元素，就不能这干了，会覆盖

‘追加’

<p id="js">javaScriptp>
<div id="list">
    <p id="se">javasep>
    <p id="ee">javaeep>
    <p id="me">javamep>
div>
  <script>
      var js=document.getElementById('js');
      var list=document.getElementById('list');
      //追加
      list.appendChild(js);
  script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ux8DWkhX-1636732352387)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026151051777.png)]

创建一个新节点(实现插入)

<p id="js">javaScript</p>
<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>
  <script>
      var js=document.getElementById('js');
      var list=document.getElementById('list');
      //追加
      list.appendChild(js);
      //创建一个节点newP
      var newP=document.createElement('p');
      //新节点赋id选择器
      newP.id='id1';
      //修改文本
      newP.innerText='Hello,Word!';
      //追加
      list.appendChild(newP);
//创建一个标签
var  mystyle=document.createElement('style');//创建一个空style
mystyle.setAttribute('type','text/css');
mystyle.innerHTML='body{background-color: red;}'//设置标签内容
document.getElementsByTagName('head')[0].appendChild(mystyle);
  </script>

insertbefore

<p id="js">javaScript</p>
<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>
<script>
var js= document.getElementById('js');
var list= document.getElementById('list');
var ee=document.getElementById('ee');
list.insertBefore(js,ee);
</script>

9、操作表单

<form action="post">
    <span>用户名：</span><input type="text" id="usename"><br>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="man">男
        <input type="radio" name="sex" value="girl" id="girl">女
    </p>
    
</form>
<script>
    'use stricr'
    var usename     = document.getElementById('usename');
    var man_radio   = document.getElementById('man');
    var girl_radio  = document.getElementById('girl');
    //获取usename的值
    usename.value;
    //修改usename的值
    usename.value='hello  word!'
//对于单选框，多选框等等固定的值，man_radio,value只能取到当前的值
    //判断是否会选中、查看返回的结果，是否为ture，如果为ture，则选中
    man_radio.checked=ture//赋值
    girl_radio.checked
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1CKEX8y-1636732352389)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026183553819.png)]

MD5算法加密

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jVrS3i1u-1636732352390)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211026223503440.png)]

按钮-绑定事件onclick

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的验证title>
    
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">script>
head>
<body>
<form action="#" method="post" onsubmit="aa()">
<p>
    <span>UserName:span><input type="text" name="username" id="username">
p>
    <p>
    <span>PassWord:span><input type="password" name="psd" id="input_password">
    p>
    <input type="hidden" id="password">
    
<button type="submit" onclick="aa()">提交button>
form>
<script>
    function aa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input_password');
        var MD5d = document.getElementById('password');
        MD5d.value=md5(pwd.value);

        /*console.log(uname.value);
        console.log(pwd.value);
        uname.value=md5(uname.value)
        pwd.value=md5(pwd.value)*/
    }
script>
body>
html>

表单提交-绑定事件- return ‘onsubmit‘

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的验证title>
    
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">script>
head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aa()">
<p>
        <span>UserName:span><input type="text" name="username" id="username">
p>
<p>
        <span>PassWord:span><input type="password"  id="input_password">
p>
    <input type="hidden" id="md5_pwd" name="password">
   <button type="submit">提交button>

form>
<script>
    function aa() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input_password');
        var md5_pwd = document.getElementById('md5_pwd');
        //pwd.value=md5(pwd.value);
        md5_pwd.value=md5(pwd.value);
        return  true;
    }
script>
body>
html>

注意：使用隐藏的标签hidden，password的name标识取消，写道的hildden里才能成功加密！

10、jQuery

javascript

jQuery库，里面存在大量的javascript

获取jQuery

URL:https://jquery.com/

CDN外部引入和本地引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wKv0UGsj-1636732352392)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211027110855632.png)]

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuerytitle>

    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">script>
  
    <script src="lib/jquery-3.6.0.js">script>
head>
<body>

body>
html>

公式：$(selector).action()

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuerytitle>

    <script src="lib/jquery-3.6.0.js">script>
head>
<body>
<a href="" id="id1">点击我跳转a>
<script>
    //var id=document.getElementById(id)
    $('#id1').click(function () {
        alert('123')
    })
script>
body>
html>

选择器

<script>
    //标签
    document.getElementsByTagName()
    //id
    document.getElementById()
    //class
    document.getElementsByClassName()
    //jQuery   css中的选择器全部能进
    $(selector).action()
    $('#id1').click()
    $('.class1').click()
</script>

工具网站：https://jquery.cuishifeng.cn/

事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdGXPJby-1636732352393)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211027171908464.png)]

通过jQuery控制鼠标的移动mousemove，获取鼠标当前的位置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件title>
    <style>
        #div{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
    style>
    <script src="lib/jquery-3.6.0.js">script>
head>
<body>
mouse：<span id="mouse">span>
<div id="div">div>
<script>
    //获取到整个文档的节点  ready载入
    /*$('document').ready(function () {
        $('#div').mousemove(function (e) {
            $('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })*/
    //等价上面
    $(function () {
        $('#div').mousemove(function (e) {
             $('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })

script>
body>
html>

自我小练习，点击出弹窗

<a href="#" id="my_a">点击我出弹窗！a>

<script>
    $(function () {
       $('#my_a').mousedown(function () {
              alert('123')
       })
    })
script>

jQuery操作Dom

<ul id="list">
    <li id="id1">javacriptli>
    <li id="id2">Phtyonli>
ul>
<script>
    $(function () {
        $('#list li[id=id1]').text()//获取当前值  
        $('#list li[id=id1]').text('12')//重新赋值
       $('#id2').html('哈哈哈')//g
        $('#id2').css("color","red");//修改样式
    })
script>

})

```

选择器

<script>
    //标签
    document.getElementsByTagName()
    //id
    document.getElementById()
    //class
    document.getElementsByClassName()
    //jQuery   css中的选择器全部能进
    $(selector).action()
    $('#id1').click()
    $('.class1').click()
</script>

工具网站：https://jquery.cuishifeng.cn/

事件

[外链图片转存中…(img-UdGXPJby-1636732352393)]

通过jQuery控制鼠标的移动mousemove，获取鼠标当前的位置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件title>
    <style>
        #div{
            width: 500px;
            height: 500px;
            border: 2px solid red;
        }
    style>
    <script src="lib/jquery-3.6.0.js">script>
head>
<body>
mouse：<span id="mouse">span>
<div id="div">div>
<script>
    //获取到整个文档的节点  ready载入
    /*$('document').ready(function () {
        $('#div').mousemove(function (e) {
            $('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })*/
    //等价上面
    $(function () {
        $('#div').mousemove(function (e) {
             $('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })

script>
body>
html>

自我小练习，点击出弹窗

<a href="#" id="my_a">点击我出弹窗！a>

<script>
    $(function () {
       $('#my_a').mousedown(function () {
              alert('123')
       })
    })
script>

jQuery操作Dom

<ul id="list">
    <li id="id1">javacriptli>
    <li id="id2">Phtyonli>
ul>
<script>
    $(function () {
        $('#list li[id=id1]').text()//获取当前值  
        $('#list li[id=id1]').text('12')//重新赋值
       $('#id2').html('哈哈哈')//g
        $('#id2').css("color","red");//修改样式
    })
script>