JS

介绍

跨平台、面向对象的脚本语言。用来控制网页行为，能使网页可交互

JS引入方式

  • 内部脚本：将JS代码定义在HTML页面中
    • 位于<script></script>
    • 可以放在任意地方
    • 一般会置于<body>元素的底部 可以改善速度
  • 外部脚本：将JS定义在外部JS文件中

变量（var）

  • js中var关键字来声明变量
  • 可以存放不同类型的值
  • 命名规则与java类似

数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/*第一种
                         *创建了一个空数组 new Array();
                         * */
                        var arr=new Array();
                        arr[0]=1;
                        console.log(arr);
                        
                        /*
                         *第二种
                         * 创建定长数组 new Array(5);
                         * */
                        var arr2=new Array(5);
                        arr2[0]="x";
                        arr2[4]=true;
                        console.log(arr2)
                        
                        
                        /*
                         * 第三种创建语法
                         * 创建时,直接指定元素值
                         * */
                        
                        var arr3=new Array("asdf",10,20.3,true);
                        console.log(arr3)
                        
                        
                        /*
                         *第四种语法
                         * 相当于第三种语法的简写
                         * */
                        var arr4=["asdf",10,20.3,true];
                        console.log(arr4)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr=[11,22,33];
                        console.log(arr)
                        console.log(arr[0]);
                        console.log(arr.length)
                        
                        /*
                         * JS中的数组是可以通过修改length属性来改变数组长度的
                         * */
                        arr.length=5;
                        console.log(arr)
                        /*
                         * JS的数组可以通过索引改变数组的长度
                         * */
                        arr[9]=99;
                        console.log(arr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr=[5,7,3,1,6,2,4,9,8];
                       /*
                        * 普通for循环遍历数组
                        * */
                       for(var i=0;i<arr.length;i++){
                               console.log(arr[i])
                       }
                       
                       /*
                        *foreach循环遍历数组
                        * JS 中foreach写法为  for( var i in 数组)
                        * i 不是元素  是索引
                        * */
                       for (var i in arr){
                               console.log(arr[i])
                       }

对象

JS中常见对象有Array,String,Math,Number,Date对象

  • String类

image-20240131180857418

  • Number类

image-20240131180926406

image-20240131180942860

  • Math类

image-20240131181041919

  • Data类

image-20240131181118320

自定义对象

第一种：调用系统的构造函数创建对象（Object）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
                      // 实例化对象
                      var obj =new Object();
                      // 给对象添加属性
                      obj.name="张思锐";
                      obj.age=35;
                      obj.gender="男";
                      // 给对象添加方法
                      obj.eat=function(food){
                              console.log(this.name+"正在吃"+food)	
                      }
                      
                      // 查看对象属性
                      console.log(obj.name);
                      console.log(obj.age);
                      console.log(obj.gender);
                      // 调用对象方法
                      obj.eat("蛋糕");
                      
              </script>

第二种：自定义构造函数创建对象（function）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
                      // 准备一个构造方法 
                      function Person(pname,page){
                              this.pname=pname;
                              this.page=page;
                              
                              this.eat=function(food){
                                      console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                              }	
                      }
                      
                      var p1=new Person("张思锐",10);
                      // 查看对象属性
                      console.log(p1.pname);
                      console.log(p1.page);
                      // 调用对象方法
                      p1.eat("油条");
              </script>

第三种：字面量的方式创建对象（JSON）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
                       
                       
                       /*	JSON 
                               var 对象名 ={属性名:属性值,属性名:属性值, ... ... ,方法名:方法声明,方法名:方法声明}
                       */
                       var person ={
                                       name:"晓明",
                                       gender:"男",
                                       age:10,
                                       eat:function(food){
                                               console.log(this.age+"岁的"+this.gender+"孩儿"+this.name+"正在吃"+food)
                                       }
                               };
                               
                       // 查看对象属性
                       // 调用对象方法
                       console.log(person.name)
                       console.log(person.gender)
                       console.log(person.age)
                       person.eat("馒头")
                       
               </script>

JS原型的使用

当我们用构造方法创建一个类时，在内存会预先调用构造方法创建一个对象，这个对象完美惩治为原型对象，构造方法对象中有一个prototype属性指向该对象，原型对象中有一个constructor属性指向构造方法。获得一个类的原型对象可以通过类名。prototype的方式获得。

image-20240131181946190

1
2
3
4
5
6
7
8
9
10
11
12
// 准备一个构造方法 
                        function Person(pname,page){
                                this.pname=pname;
                                this.page=page;
                                
                                this.eat=function(food){
                                        console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                                }	
                        }
                        
                        console.log(Person)// Constructor对象  构造方法对象
                        console.log(Person.prototype)

当前类对象和原型的关系

当前类的每一个对象内部有一个 _proto_的一个属性,指向他们的原型, 当我们用对象获取属性和调用方法时,如果当前对象中没有,那么会去他们所对应的原型对象中去找,也就是说,我们通过对原型的操作可以实现为一个类所有的对象添加属性和方法.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        // 准备一个构造方法 
                        function Person(pname,page){
                                this.pname=pname;
                                this.page=page;
                                
                                this.eat=function(food){
                                        console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                                }	
                        }
                        
                        console.log(Person)// Constructor对象  构造方法对象
                        console.log(Person.prototype)
                        // 给Person所有的对象增加属性和方法
                        //给Person的原型增加属性
                        Person.prototype.gender="男";
                        //给Person的原型增加一个方法
                        Person.prototype.sleep=function(){
                                console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
                        }
                        var p1=new Person("张三",10);
                        p1.eat("蛋挞")
                        p1.sleep();
                        
                        var p2=new Person("李四",8);
                        p2.eat("牛角面包")
                        p2.sleep()
                        
                        
                        console.log(p1);
                        
                        console.log(p2);
                </script>
        </head>
        <body>
        </body>
</html>

JS的原型链

一个类的原型是一个Object类的对象,也就是说,原型也有一个_proto_属性,指向Object的原型对象,那么也就是说 Person prototype中没有的属性和方法会继续向Object prototype去找,也就是说,我们在Object原型中添加的属性和方法,我们在person1和person2中也可以使用.那么这种连续的 _proto_属性指向就形成了原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        // 准备一个构造方法 
                        function Person(pname,page){
                                this.pname=pname;
                                this.page=page;
                                
                                this.eat=function(food){
                                        console.log(this.page+"岁的"+this.pname+"正在吃"+food);
                                }	
                        }
                        
                        
                        // 给所有的对象增加属性和方法
                        //给最终原型增加属性
                        Object.prototype.gender="男";
                        //给Person的原型增加一个方法
                        Object.prototype.sleep=function(){
                                console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
                        }
                        var p1=new Person("张三",10);
                        p1.eat("蛋挞")
                        p1.sleep();
                        
                        var p2=new Person("李四",8);
                        p2.eat("牛角面包")
                        p2.sleep()
                        
                        
                        console.log(p1);
                        
                        console.log(p2);
                </script>
        </head>
        <body>
        </body>
</html>

事件

  • 鼠标
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style>
                        .d1{
                                width: 100px;
                                height: 100px;
                                background-color: greenyellow;
                        }
                </style>
                <script>
                        function fun1(){
                                console.log("双击666")
                        }
                        function fun2(){
                                console.log("鼠标按下")
                        }
                        function fun3(){
                                console.log("鼠标抬起")
                        }
                        function fun4(){
                                console.log("鼠标进入")
                        }
                        function fun5(){
                                console.log("鼠标离开")
                        }
                        function fun6(){
                                console.log("鼠标移动")
                        }
                        
                        
                        
                </script>
        </head>
        <body>
                <div class="d1" 
                        ondblclick="fun1()" 
                        onmousedown="fun2()" 
                        onmouseup="fun3()" 
                        onmouseenter="fun4()" 
                        onmouseleave="fun5()" 
                        onmousemove="fun6()">
                        
                </div>
                
        </body>
</html>
  • 键盘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){
                                console.info("按钮按下")
                        }
                        function fun2(){
                                console.info("按钮抬起")
                        }
                        function fun3(){
                                console.info("按钮按下并抬起")
                        }
                </script>
        </head>
        <body>
                <input type="text" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
        </body>
</html>
  • 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        
                        function testFun(){
                                var in1=document.getElementById("i1");
                                var v1=in1.value;
                                console.log(v1)
                        }
                        
                </script>
        </head>
        <body onload="testFun()">
                <input type="text" value="测试文字" id="i1" />
        </body>
</html>

  • 表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){console.log("获得焦点");}
                        function fun2(){console.log("失去焦点");}
                        function fun3(){console.log("正在输入");}// 只要输入了,就会触发
                        function fun4(){console.log("内容改变");}// 内部信息发生变化的同时,要失去焦点
                        function fun5(sel){console.log("内容发生改变了"+sel.value)}
                        function fun6(){
                                alert("发生了提交事件");
                                // 做了一些运算之后 动态决定表单能否提交
                                
                                return false ;
                        }
                        function fun7(){ 
                                console.log("发生了重置事件");
                                return true;
                        }
                </script>
        </head>
        <body>
                <form method="get"  action="https://www.baidu.com" onsubmit="return fun6()" onreset="return fun7()">
                        <input name=""  value=""  type="text" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
                        <select name="city" onchange="fun5(this)">
                                <option selected>-请选择城市-</option>
                                <option value="1">北京</option>
                                <option value="2">天津</option>
                                <option value="3">上海</option>
                                <option value="4">重庆</option>
                        </select>
                        <br />
                        <input type="submit" value="提交数据" />
                        <input type="reset"  value="重置数据" />
                        
                </form>
        </body>
</html>

BOM和DOM编程

认识BOM和DOM

  • 什么是BOM

​ BOM是Browser Object Model的简写，即浏览器对象模型。

​ BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法

​ BOM没有统一的标准(每种客户端都可以自定标准)。

​ BOM的顶层是window对象

  • 什么是DOM

    DOM是Document Object Model的简写，即文档对象模型。

​ DOM用于XHTML、XML文档的应用程序接口(API)。

​ DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

​ DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

​ DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

​ DOM的顶层是document对象

DOM和BOM的关系

image-20240223151720217

红色框内是归DOM，绿色框内归BOM；也可以说DOM也是归BOM管的

BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为

DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。

image-20240223151755910

image-20240223151802674

BOM编程

Window 对象描述

Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。

除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。

简单来说，相当于java中的Object对象，直接调用

API详见开发文档

BOM其他常见对象

location对象

location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以操作地址栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){
                                console.log(location.host);// 服务器的IP+端口号
                                console.log(location.hostname);// IP 
                                console.log(location.port);// 端口号
                                console.log(location.href);// 地址栏中具体的文字
                        
                                location.href="https://www.baidu.com"
                        }
                        
                </script>
        </head>
        <body>
                <input type="button" value="测试location" onclick="fun1()" />
        </body>
</html>

history对象

history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的操作我们可以实现翻阅浏览器历史网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){
                                window.history.forward();
                                
                        }
                        function fun2(){
                                history.back();
                        }
                        function fun3(){
                                history.go(2); // 正整数 向前跳转 * 页  负整数 向后跳转*页
                        }
        
                        
                </script>
        </head>
        <body>
                <a href="a.html" target="_self">pageA</a>
                <input type="button" value="向前" onclick="fun1()"/>
                <input type="button" value="向后" onclick="fun2()"/>
                <input type="button" value="go" onclick="fun3()"/>
        </body>
</html>

screen和navigator

screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script>
                        function fun1(){
                                console.info(window.screen.width)
                                console.info(window.screen.height)
                                console.info(navigator.userAgent)
                                console.info(navigator.appName)
                        }
                </script>
        </head>
        <body onload="fun1()">
        </body>
</html>

DOM编程学习

简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

什么是document

document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

document对象如何获取

document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

DOM节点分类node

结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类

元素节点 Element 如:我的链接

属性节点 Attribute 如:href=”链接地址”

文本节点 Text 如:我的链接

DOM操作的内容

1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）

2.操作文本

3.操作属性

4.操作元素

5.操作CSS样式（一个特殊的属性style）

Vue框架引入

  • MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上