JavaScript详解【24/01/08】-CSDN博客

本文链接：https://blog.csdn.net/m0_63624484/article/details/135426943

一 js简介

---是一种运行在客户端（浏览器）的编程语言，实现人机交互

作用

1.网页特效

2.表单验证

3.数据交互

4.服务端编程（node.js）

组织构成(重要)

1.ECMAScript：javaScript基本语法

例如：数据类型，循环结构，数组，对象，选择结构...

2.DOM(核心)：文档对象模型

宗旨：一切的标签，属性，注释等内容都可以当作对象看待，可以通过这些对象去操作页面。

eg：<h3>hello</h3>h3>: 把h3标签看作一个对象，就可以去操作它的内容

3.BOM：浏览器对象模型

宗旨：一切与浏览器交换的信息都当作对象来看，例如：历史记录，浏览器分别率，url信息...

二 ECMAScript

一 JavaScript引入

1.内部

2.外部

二注释

1.单行注释：//

2.多行注释：/* */

三格式

；号表示一个语句结束，但是如果你换行了，就不需要再加上；

四输出方式

1.文档输出（HTML）：document.write("")

2.控制台输出（Console）：console.log("")

3.弹窗输出(alter): alter("")

五数据类型和变量

1.基本数据类型

number(数字型) , string(字符串) , boolean , null , undefine ,

2.引用类型

---[var]/[let]/[const] 变量名 = 值；

Object(对象类型)
array(数组对象)
function(函数)
变量定义

1. var ：修饰的变量实际上是全局变量

```javascript
<script>
    if(true){
        // 全局变量
        var age = 18 ; 
    } 
    document.write(age) ; 
</script>
```

//2. let：修饰的变量实际上是局部变量
	
	
	<script>
	    if(true){
	        // 局部变量
	        let  age = 18 ; 
	        document.write(age) ; 
	    } 
	    
	</script>



	3. const：修饰的变量表示常量
	<script>
	    if(true){
	        // const：修饰的变量表示常量 ， 同时它修饰的变量是一个局部变量
	        const  age = 18 ; 
	        
	        // 不能再重新赋值
	        // age = 20 ; 
	        document.write(age) ; 
	    }

---变量名 = 值（默认的是var）

---可以先定义，后赋值

---可以先赋值，后定义

六函数

1.typeof() : 查看数据类型

2.parseInt(String str): 转换为number

3.变量名定义规范：参照java

七运算符

1.拼接运算

大部分与java一致，但是注意以下：

     <script>
        // number之间的算数运算
        // 与java不同的是 。 Java的字符串类型只能用+做拼接 ， 而js字符串也可以做算数运算
        document.write("20"-18) ; //得到2
        //需要注意的是：如果做的是‘+’ 运算 ， 仍然和java一样十年拼接运算
        document.write("20"-18) ; //得到"2018"
     </script>

2.条件运算符

&& , || , !

3.逻辑运算符

== :只比较值

===: 除了比较值还比较数据类型

4.复合运算符

age+=18 ; //js不支持java的符合运算符

4.位运算符

1.位运算NOT（~）

2.AND(&)

3.OR(|)

4.XOR(^)

注意：

&&：左边为false右边就不会再看了

&：就算左边为false ，仍然会看右边

八选择结构和循环结构

选择结构：

1.if...else

2.switch( ) {}(支持number ， var ， boolean)

循环结构:

                      while

                   for

                   do...while

                   增强for...in循环(和java增强for循环比把：换成in ，但它是遍历下标的)

                   增强for...of循环(把 in换成了of ，而且它遍历的是值而不是索引)

九数组

一 js数组定义

1.var/let 数组名称 = [值列表] ;

eg: var value = [2,4,6,8] ;

2.var/let 数组名称 = new Array() ;

var/let 数组名称 = new Array(size) ;

var/let 数组名称 = new Array(element...) ;

二重点:

1.类型不单一

2.长度不固定

3.js数组是动态可变的

三数组API

1.concat() ：两个数组连接


javascript
    var v1 = [1,3,5]
    var v2 = [2,4,6]
    //数组链接
    v1 = v1.concat(v2)
    for(let value of v1){
      document.write(value)//1 3 5 2 4 6
    }

2.erery(): 检测每一个元素是否符合条件(自己指定条件)(整个数组里面必须所有的元素都满足这个条件才会返回true)

    //检测每一个元素是否符合条件(自己指定条件)(整个数组里面必须所有的元素都满足这个条件才会返回true)
    let result = v1.every(function(value){
    return value>2
    })
    document.write(result)//false(因为数组里面的1和2元素不满足条件)

3.filter(): 数组过滤 , 检测每一个元素并返回符合条件过滤后的数组

    //数组过滤 , 检测每一个元素并返回符合条件过滤后的数组
    let arrs = v1.filter(function(value){
        return value>3 ; 
    })
    for(let value of v1){
      document.write(value) //5 4 6（只过滤出来所有大于3的元素）
    }

4.forEach(): 遍历数组方式

     //forEach遍历数组方式
     arrs.forEach(function(value){
        document.write(value)  //5 4 6
     })

5.find(): 返回这个数组里面符合条件的第一个元素

    //返回这个数组里面符合条件的第一个元素
    var ele = v1.find(function(value){
    return value>5
    })
    document.write(ele) //6 (5,4,6里面只有6是第一个大于5的数)

6.join(): 把数组的所有元素放到一个字符串

    //把数组的所有元素放到一个字符串
    let str = arrs.join("-")//指定符号连接
    document.write(str) //5-4-6

7.lastIndexOf():搜索数组中的元素，并返回它最后出现的位置

    //lastIndexOf():搜索数组中的元素，并返回它最后出现的位置
    let lio = arrs.lastIndexOf(4) 
    document.write(lio+"<br>") //1

8.pop(): 删除数组中的最后一个元素，并返回删除的元素

    //pop(): 删除数组中的最后一个元素，并返回删除的元素
    let p = arrs.pop()
    document.write(p)//6
    document.write("<br>")
    for(let value of arrs){
        document.write(value)//5 4
    }

9.shift(): 删除并返回数组的第一个元素

10.splice(start , count , item1...itemX): 从数组中添加或者删除元素

    //splice(start , count , item1...itemX): 从数组中添加或者删除元素
    /*
    start:表示要添加删除的起始位置
    count:表示要删除的元素个数(从start位置开始删除)
    item1...itemX:表示从start开始要添加的元素(可以不写,即不添加元素)
    */
    arrs.splice(1,0,"添加的第一个元素" , "添加的第二个元素") //表示从第1个元素开始 ， 删除0个元 
    素 ， 添加两个元素
    for(let value of arrs){
        document.write(value)  //5 添加的第一个元素 添加的第二个元素 4
    }

11.sort(): 对数组的元素进行排序

    //sort(): 对数组的元素进行排序
    arrs.sort()
    for(let value of arrs){
        document.write(value)  //4 5 添加的第一个元素 添加的第二个元素
    }

12.some(): 检测数组元素中是否有元素符合指定条件

    //some(): 检测数组元素中是否有元素符合指定条件
    var so = arrs.some(function(value){
    return value>4  //检测是否有元素大于4
    })
    document.write(so+"<br>")  //true

13.push(): 向数组的末尾添加一个或更多元素，并返回新的长度

14.reverse(): 反转数组的元素顺序

15.slice(): 选取数组的一部分，并返回新的数组

十函数(function)

一函数的定义

       1.function 函数名(参数列表){

                //函数体

               //return 返回值

           }

       注意：无需返回类型!

                   参数可以是普通参数，对象参数，函数参数

<script>
    function add(a , b){
    return a+b 
    }
</script>

2.闭包函数

    //闭包函数
    var val = (function (value){
    return value+1 ; 
    })(10)//这相当于定一个函数 ， 然后又调用了它，传入参数为10
    document.write(val+"<br>")  //11

3.箭头函数

    //箭头函数(类似java的lamda表达式)
    //参数=>函数体
    //遍历函数
    var values = [1,3,5,7,9]
    values.forEach((value , index)=>{
      document.write(index+":"+value)
    })

十一对象

1.var/let 对象名称 = {对象属性}

对象属性调用：对象.属性名

对象方法调用: 对象.方法名

2.var/let 对象名称 = new Object() ;

eg: var obg = new Object() ;

obj.name = "张三" //虽然没有name属性，但是js会自动帮你创建

3.通过类创建对象

<script>
    //创建一个学生类
    class student{
        //构造方法
        constructor(name , age , sex){
            this.name = name
            this.age = age
            this.sex = sex
        }

        //学习方法
        study(){
            document.write(this.name+"好好学习")
        }
    }

    //通过类的构造方法创建对象
    var stu = new student("张三" , 18 , "男")
    stu.study() ; //张三好好学习
</script>

三 DOM文档对象模型

一 Document

1.结点获取

<script>
    //通过id获取标签吧对象
    let p = document.getElementById("a")
    // 操作标签内容
    p.innerText = "<h3>怀化学院</h3>"
    p.innerHTML="<a>哈哈</a>"

    // 操作样式
    p.style.color="yellow"

    p.setAttribute("class" , "box")  //样式类型   样式名称  -->  .box{}

    // 通过name名字获取标签对象
    let name = document.getElementsByName("like")  //因为名字不是唯一的 ， 所以得到的name是一个数组

    //通过标签名获取标签对象
    let lis = document.getElementsByTagName("li") //获取所有<li>标签对象 ， 得到的也是一个数组

    // 通过class类名来获取标签对象
    let cla = document.getElementsByClassName("age") //因为class选择器也不是唯一的 ， 所以得到的也是一个数组
</script>

2.结点创建

<script>
    // 创建元素节点
    let h3 = document.createElement("h3")
    document.write(h3.value)//节点值 undefine
    document.write(h3.nodeType)//节点类型  1
    document.write(h3.nodeName)//节点名  h3

    // 创建属性节点
    let atr = document.createAttribute("class")
    atr.value="b1" //设置属性值为b1

    //创建注释节点
    let com = document.createComment("这是一个注释")
    

    //创建文本节点
    let tex = document.createTextNode("hello ， world")
</script>

3.节点添加

1.appendChild()：末尾追加子节点

4.节点关系

1.childNodes：所有子节点（包含空格）

childs：所有子节点（不包含空格）

2.firstChile：第一个子节点

3.nextSibling：同辈节点的下一个节点

4.parentNode：父节点（只有一个）

二正则表达式

1.正则表达式定义

1./pattern/attributes

2.new RegExp(pattern , attributes)

2. 匹配模式

下面是一个判断电话号码是否正确的正则表达式示例:

<body>
    <p>电话号码: <input type="text" name="phone" id="phone"> <span id="msg"></span></p>
</body>
<script>
   
    phone.onblur = function(){
        var phone = document.getElementById("phone")
        // 验证电话号码
        // 定义电话号码正则表达式(/...(正则表达式).../m)
        let reg = /^1[3456789]\d{9}$/m
        // input输入的值是否与正则表达式reg匹配
        if(reg.test(phone.value)){
            var msg = document.getElementById("msg")
            msg.innerHTML="格式正确!"
            msg.style.color = "red"
        }else{
            var msg = document.getElementById("msg")
            msg.innerHTML="格式错误!"
            msg.style.color = "red"
        }
    }
</script>