Java开发工程师应该掌握的JS语法（三）_java工程师需要掌握js-CSDN博客

本文链接：https://blog.csdn.net/qq_43437122/article/details/118667005

1. 方法/函数

js中函数的语法：

// 函数的命名规则是小驼峰，首字母小写，碰到新的单词首字母大写
function 函数名(参数1, 参数2, 参数3.....){
	函数体;
}

函数的几种形式：

无参无返回值

function warn(){
	alert("无参无返回值")
}

无参有返回值

function getRes(){
	return "无参有返回值"; // 使用return关键字返回需要返回的内容, 这里返回一个字符串
}

有参无返回值

function getRes(a, b){
	alert("a + b = " + (a + b))
}

有参有返回值

function getRes(a, b){
	return a + b
}

注意：在传参的过程中我们可能会传入多于或少于参数列表的参数

// 传入参数少于参数列表
<script>
   function add(a, b){
       alert(a) // 此时a的值为1
       alert(b) // 此时b为undefined
   }
   add(1)
</script>

// 传入参数多于参数列表, js中程序并不会报错
<script>
    function add(a, b){
        alert(a) // 此时a的值为1
        alert(b) // 此时b的值为2    
    }
    add(1, 2, 3)
</script>

js中的内置函数：

alert() 无返回值
prompt() 有返回值，返回输入框中输入的内容
document.write() 无返回值
console.log() 无返回值
Number() parseInt() parseFloat() 有返回值，返回转换后的结果
confirm() 有返回值，返回true/false，点击确定按钮返回true，点击取消按钮返回false

2. 面向对象

在js中对象的类型是object，在声明对象的时候可以直接创建对象。

对象的创建方法1：

<script>
    // 使用new创建一个对象
    var person = new Object();
    // 对象的属性
    person.name = "张三"; 
    person.age = 20;
    // 对象的方法
    person.eat = function () { // 对象的方法对应一个匿名函数, 其实这个函数的函数名就是eat
        alert("今天我吃饭了")
    }

    // 查看对象的属性值
    console.log(person.name)
    console.log(person.age)
    // 调用对象的方法
    person.eat()
</script>

对象的创建方法2：

<script>
    // 直接初始化一个对象
    var person = { "name": "张三", "age": 20, "eat": function () { alert("今天我吃饭了") } }

    // 查看对象的属性
    console.log(person.name)
    // 调用对象的方法
    person.eat()
</script>

3. 数组

数组就是将一组数据同时存放在一个容器中，此容器称为数组，类似于超市的储物柜一样。

语法：

// 第一种创建数组的方式
var arr1 = new Array();
// var arr1 = new Array(1, 2, 3, 4, "hello"); 创建一个数组并添加元素
// var arr1 = new Array(2); 此时的2不再是数组中的元素，当只有一个数字时，代表此时创建的数组的长度。如果是字符串，则还是作为数组中的元素。

// 第二种创建数组的方式
var arr2 = [1, 2, 3, "hello", 2.123];

数组的属性及方法：

<script>
    var arr1 = [1, 2, 3, 4, "hello", 2.333];

    console.log(arr1.length) // 打印数组的长度
    console.log(arr1[1]) // 通过下标访问数组中的元素, 下标从0开始
    // 遍历数组
    for(var i = 0; i < arr1.length; i++){
        console.log(arr1[i])
    }
    arr1.push(100); // 往数组中追加一个元素, 返回添加元素后数组的长度
    console.log(arr1.toString()) // 将数组转为字符串
    console.log(arr1.join("-")) // 使用'-'符号将数组中的元素连接成字符串
    console.log(arr1.reverse()) // 将数组中的元素反转
</script>

4. 字符串string的常用方法

<script>
    var str = "Hello,World,你好,世界";
    console.log(str.length) // 字符串的长度, 字符的个数
    console.log(str.indexOf("el")) // 返回特定的字符串的位置, 下标从0开始, 如果找不到返回-1
    console.log(str.split(",")) // 将字符串以特定的字符串分割成数组
    console.log(str.substr(4)) // 从指定的下标位置开始, 获取到最后
    console.log(str.substrint(1, 4)) // 获取从指定索引位置开始到指定的索引位置结束
    console.log(str.toUpperCase()) // 全部转为大写
    console.log(str.toLowerCase()) // 全部转为小写
    console.log(str.replaceAll("lo", "x")) // 全部替换成另一个字符串
</script>

5. DOM对象

（1）document.getElementById(“id”) 通过id获取指定标签
（2）document.getElementsByClassName(“c1”) 通过类名查找标签，返回结果是一个标签集合

Demo1：通过id查找标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d1" class="c1">
        hello this is MengMa
        <span>Hello World!</span>
    </div>  
</body>
<script text="text/javascript">
    // 通过id获取标签
    var d = document.getElementById("d1");
    console.log([d]);
    console.log(d.className); // 获取类名
    console.log(d.innerHTML); // 获取指定标签里面的所有内容, 包括标签
    console.log(d.innerText); // 只获取指定标签中的文本内容

    d.className = "cls";
    d.innerHTML = "<h1>Hello World</h1>";
    d.innerText = "蒙码科技";
    d.style.background = "red";
    // d.hidden = true;
    d.style.display = "none";
</script>
</html>

注意： document.getElementById(id) 可以直接换成 id

document.getElementById("d1").innerHTML 等价于 d1.innerHTML

练习1：屏幕变色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: red;
        }
    </style>
    <script>
        // 屏幕变色
        var colorArr = ["green", "red", "blue", "yellow", "black"];
        var num = 0;
        function changeColor() {
            var bd = document.getElementById("bd");
            bd.style.background = colorArr[num++];
            if(num > colorArr.length - 1){
                num = 0;
            }
        }
        // 待窗口加载完成后开始执行函数体
        window.onload = function(){
            setInterval(function(){ changeColor() }, 500);
        }
    </script>
</head>
<body id="bd">
</body>
</html>

Demo2：通过类名查找标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        //找到所有的类名相同的标签
        var divs = document.getElementsByClassName("d1");
        console.log(divs);
        divs[1].style.background = "red";
    </script>
</head>
<body>
    <body>
        <div class="d1">11111111</div>
        <div class="d1">22222</div>
        <div class="d1">333333</div>
    </body>
</body>
</html>