JavaScript-下篇

上篇我们学习了，一些基础语法和函数，现在我们学习下篇，主要包括,对象和事件。而对象又包括，数组Arrays，String字符串，BOM，DOM等

JS对象

Arrays数组

数组是一种特殊的对象，用于存储有序的值集合。了解数组的创建方式、遍历方式、属性和方法是掌握JavaScript的重要部分。以下是关于JavaScript数组的详细介绍。

数组的创建

JavaScript中可以使用多种方式创建数组，最常见的方法有：

数组字面量：这是创建数组的最简单和推荐的方式。通过中括号[]可以直接初始化数组。

const fruits = ['苹果', '香蕉', '橘子'];

2. Array构造函数：可以使用new Array()构造函数来创建数组，虽然不推荐这种方法，但它仍然有效。

const fruits = new Array('苹果', '香蕉', '橘子');

注意，如果只传入一个数字作为参数，则会创建一个指定长度的空数组。

const arrayLength = new Array(5); // 创建一个长度为5的空数组

3. 使用Array.of()： Array.of()方法可以创建一个新的数组实例，其参数是数组的元素。

const numbers = Array.of(1, 2, 3, 4, 5);

数组的遍历方式

遍历有好几种方法，我这里介绍常用的两种。

for循环：使用经典的for循环可以通过索引遍历数组。

const fruits = ['苹果', '香蕉', '橘子'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

2.forEach()方法： forEach()是一个数组方法，可以对数组中的每个元素执行提供的函数。

fruits.forEach(function(fruit) {
    console.log(fruit);
});

数组的属性和方法

作为后端开发者，我们不需要了解那么多方法和属性，简单了解即可，这里只介绍常用的属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 对象-Arrays</title>
</head>
<body>
    <script>
        //创建数组
        var arr = new Array(1, 2, 3, 4, 5);
        for (let i = 0; i < array.length; i++) {
            console.log(array[i]); 
        }

        var arr = [1, 2, 3, 4, 5];

        arr[10] = 50; //即使没有10这个索引，也不会报错，因为长度可以动态变化

        //访问数组元素
        console.log(arr[0]); //1
        console.log(arr[1]); //2
        console.log(arr[10]);//50
        log(arr[9]); //没有定义的索引元素是undefined

        //数组可以存储不同类型的值
        arr[8] = "hello";//为8索引位置添加字符串元素

        /* JS 中的数组与Java中的集合类似，
        可以存储不同类型的数据，可以动态添加和删除元素，可以对数组进行排序等操作。 
        */

        //数组的遍历
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]); //1 2 3 4 5 hello
        }

        //forEach方法  
       arr.forEach(function(e) {
            console.log(e); //1 2 3 4 5 hello
        });

        /* forEach方法可以对数组中的每一个元素进行操作, 如果是undefined,会跳过不会打印。
            for循环会遍历所有元素，包括undefined。
        */
        //forEach方法,ES6引入了箭头函数，和Java中lambda表达式类似，可以简化代码。
        arr.forEach(e => console.log(e)); //1 2 3 4 5 hello



        //数组的属性和方法


        arr.push(6,7,8); //在数组末尾添加元素
        arr.splice(2, 2); //在索引为2的位置开始删除2个元素
        arr.pop(); //删除数组末尾的元素
        arr.shift(); //删除数组第一个元素
        arr.unshift(0); //在数组开头添加元素
        arr.sort(); //对数组进行排序
        arr.reverse(); //对数组进行反转
        arr.join("-"); //将数组元素用-连接成字符串
        arr.slice(1, 4); //从索引1到索引3的元素组成一个新数组
        arr.map(function(e) {
            return e * 2; //对数组元素进行映射
        }); //返回一个新数组，元素是原数组元素的两倍
        arr.filter(function(e) {
            return e > 3; //返回一个新数组，元素是原数组元素大于3的元素
        }); //返回一个新数组，元素是原数组元素大于3的元素
        arr.reduce(function(pre, cur) {
            return pre + cur; //对数组元素进行求和
        }); //返回一个值，是数组元素的求和
        arr.indexOf(3); //返回元素3的索引，如果不存在返回-1
        arr.lastIndexOf(3); //返回元素3的最后一个索引，如果不存在返回-1
        arr.includes(3); //判断元素3是否存在，存在返回true，不存在返回false
        
    </script>
    
</body>
</html>

String字符串

字符串创建

在JavaScript中，可以通过多种方式创建字符串：

1.使用字符串字面量：最常见的方式是使用单引号'或双引号"括起来的字符。

var str1 = "Hello, world!";
var str2 = 'Hello, world!';

2.使用String构造函数：使用new String()来创建字符串对象，尽管这种方式不常用，因为它会生成一个字符串对象，而不是一个简单的字符串。

var str3 = new String("Hello, world!");

注意：使用构造函数创建的字符串对象和字面量字符串在某些情况下表现会不同，因此一般推荐使用字面量。

字符串的属性

length：字符串的length属性返回字符串中的字符数，包括空格和标点符号。

console.log(str1.length); // 输出 13

字符串的方法

JavaScript中的字符串对象提供了许多有用的方法，有Java基础的同学会觉得非常简单，因为大部分方法都是一摸一样。以下是一些常用的方法：

1.indexOf()：返回指定字符或子字符串在字符串中第一次出现的位置，未找到则返回-1。

console.log(str1.indexOf("o")); // 输出 4

2.charAt()：返回字符串中指定位置的字符。

console.log(str1.charAt(0)); // 输出 "H"

3.substring()：返回字符串的一部分。第一个参数为开始索引，第二个参数为结束索引。

console.log(str1.substring(0, 5)); // 输出 "Hello"

4.replace()：替换字符串中匹配的部分，返回替换后的新字符串。

console.log(str1.replace("world", "JavaScript")); // 输出 "Hello, JavaScript!"

5.trim()：去掉字符串两端的空格。

var str4 = "   Hello, world!   ";
console.log(str4.trim()); // 输出 "Hello, world!"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象-string</title>
</head>
<body>
    <script>
        // 字符串创建
        var str1 = "hello string";
        var str2 = new String("hello string");

        //属性
        console.log(str1.length); // 12
        console.log(str2.length); // 12

        //方法
        console.log(str1.toUpperCase()); // HELLO STRING
        console.log(str2.toUpperCase()); // HELLO STRING

        console.log(str1.toLowerCase()); // hello string
        console.log(str2.toLowerCase()); // hello string

        console.log(str1.indexOf("l")); // 2
        console.log(str2.indexOf("l")); // 2

        console.log(str1.lastIndexOf("l")); // 9
        console.log(str2.lastIndexOf("l")); // 9

        console.log(str1.charAt(2)); // l
        console.log(str2.charAt(2)); // l

        console.log(str1.substring(2, 5)); // llo
        console.log(str2.substring(2, 5)); // llo

        console.log(str1.slice(2, 5)); // llo
        console.log(str2.slice(2, 5)); // llo

        console.log(str1.replace("l", "L")); // heLLo string
        console.log(str2.replace("l", "L")); // heLLo string

        console.log(str1.trim()); // "hello string"
        console.log(str2.trim()); // "hello string"

        console.log(str1.split(" ")); // ["hello", "string"]
        console.log(str2.split(" ")); // ["hello", "string"]

        console.log(str1.concat(" world")); // "hello string world"
        console.log(str2.concat(" world")); // "hello string world"

        console.log(str1.localeCompare("hello")); // 1
        console.log(str2.localeCompare("hello")); // 1

        console.log(str1.match(/l/g)); // ["l", "l", "l", "l", "l", "l", "l", "l", "l", "l"]
        console.log(str2.match(/l/g)); // ["l", "l", "l"]

        console.log(str1.search("l")); // 2
        console.log(str2.search("l")); // 2

        console.log(str1.replace(/l/g, "L")); // heLLo stRing
        console.log(str2.replace(/l/g, "L")); // heLLo stRing

        console.log(str1.localeCompare("hello")); // 1
        console.log(str2.localeCompare("hello")); // 1

        console.log(str1.localeCompare("hello", "en", { sensitivity: "base" })); // 1
        console.log(str2.localeCompare("hello", "en", { sensitivity: "base" })); // 1

        console.log(str1.localeCompare("hello", "en", { sensitivity: "accent" })); // 1
        console.log(str2.localeCompare("hello", "en", { sensitivity: "accent" })); // 1

        console.log(str1.localeCompare("hello", "en", { sensitivity: "case" })); // 1
        console.log(str2.localeCompare("hello", "en", { sensitivity: "case" })); // 1




    </script>
    
</body>
</html>

JSON对象

自定义对象的创建

在 JavaScript 中，我们可以使用对象字面量的语法来创建自定义对象。以下是一个简单的示例：

var person = {
    name: "John",
    age: 30,
    city: "New York",
    eat: function() {
        alert("干饭！");
    }
};

在这个示例中，我们创建了一个名为 person 的对象，它有三个属性（name、age 和 city）以及一个方法（eat）。这个 eat 方法在被调用时会弹出一个消息框，显示“干饭！”。

调用自定义对象的方法

我们可以通过对象的名称加上点操作符来调用方法。例如，调用 eat 方法和输出 name 属性的值。

person.eat();            // 调用 eat 方法
alert(person.name);     // 输出 name 属性的值

这段代码将弹出“干饭！”的提示框，并且接着显示当前对象的 name 属性。

JSON 对象定义

JSON 是一种轻量级的数据交换格式，它是基于 JavaScript 对象表示法的。我们可以将 JSON 看作是字符串形式的 JavaScript 对象。以下是两种定义 JSON 对象的方式：

字符串形式的 JSON 对象

首先，我们可以使用字符串来定义 JSON 对象：

var jsonObj = '{"name": "John", "age": 30, "city": "New York"}'; // 字符串形式的 JSON 对象

这种方式使用了 JSON 格式的字符串，但这并不是一个真正的对象，而只是一个字符串

JavaScript 对象的表示

我们也可以直接使用 JavaScript 对象的形式来定义一个 JSON 对象：

var jsonObj = {
    "name": "John",
    "age": 30,
    "city": "New York"
};

在这里，jsonObj 是一个有效的 JavaScript 对象。

JSON 对象与字符串JSON对象的转换

转换为字符串形式的JSON

var jsonStr = JSON.stringify(jsonObj);

转换为JSON对象

var newObj = JSON.parse(jsonStr);

两者区别

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在不同的编程语言之间传输和存储数据。JSON有两种基本形式：JSON对象和JSON字符串，这两者之间存在显著的区别。

JSON对象：JSON对象是一个数据结构，可以通过“对象.属性”的方式来访问其值。在JavaScript中，JSON对象是一个键值对集合。JSON对象直接可以被程序使用，它是适合代码处理的原始数据类型。

JSON字符串：JSON字符串在存储和传输数据时使用，它提供了一种将对象序列化为文本的方式，以便在网络上传输或者存储到文件中。

BOM

BOM（浏览器对象模型）是JavaScript的一个重要组成部分，使得开发者能够通过脚本控制浏览器窗口。与DOM（文档对象模型）不同，BOM并不直接涉及HTML或CSS，而是与浏览器本身的行为及功能相关。

作为一个Java程序员，我们只需重点关注这两个，Window和Location

Window

 /* 重点了解 window 对象 和 Location 对象 */

        //获取

        Window.alert("Hello BOM!");
        alert("Hello BOM!"); 

        //方法
        confirm("你确定要删除吗？");//返回true或false

        //定时器
        var i =0;
        setInterval(
            function(){
                console.log("定时器执行"+i);
                i++;
            },1000 //每隔1秒执行一次  
        ); //周期性的执行函数

        setTimeout(
            function(){
                alert("JS");
            },2000 //2秒后执行一次      
        ); //延迟执行函数

Location

 //Location对象
        //获取当前页面的URL
        var url = window.location.href;
        console.log(url);

        location.href = "https://www.baidu.com"; //跳转到指定页面

DOM

DOM是文档对象模型的缩写，它将整个HTML或XML文档视为一个树形结构。每一个元素、属性和文本都成为这个结构中的一个节点。这样，我们就能通过JavaScript来访问和修改这些节点，从而更新网页的内容和样式，而不需要重新加载整个页面。

获取DOM元素

在JavaScript中，我们可以使用多种方法来获取DOM元素。以下是一些常用的方法：

改变元素的内容和样式

例如，我们可以通过DOM改变某个元素的颜色和背景：

element.style.color = "red";
element.style.backgroundColor = "yellow";

访问和修改元素的属性

我们可以访问元素的属性，如复选框的状态：

var checkboxes = document.getElementsByName("my_hobby");
for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
        alert(checkboxes[i].value); // 显示被选中的爱好
    }
}

DOM不仅是网页的结构框架，也是我们与网页交互的重要通道。学习如何有效使用DOM可以帮助我们开发出更动态、互动丰富的网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS对象-DOM</title>
</head>
<body>

    <img src="../web_html/images/20240604hlag8k.webp" alt=""> <br>

    <div id="bro_cat">Bro_cat</div>
    <div class="001"> JS </div>
    <div class="002"> DOM </div>

    <input type="checkbox" name="my_hobby"> 电影
    <input type="checkbox" name="my_hobby"> 音乐
    <input type="checkbox" name="my_hobby"> 旅行

    <script>
        /* DOM 文档对象模型 */
        // 获取元素

        // 通过id获取元素
        var bro_cat = document.getElementById("bro_cat");
        // 通过标签名获取元素
        var dvs = document.getElementsByTagName("div");
        for (let i = 0; i < array.length; i++) {
            alert(dvs[i]);  
        }
        //通过name属性获取元素
        var hobby = document.getElementsByName("my_hobby");
        for (let i = 0; i < hobby.length; i++) {
            alert(hobby[i].value);
        }
        // 通过类名获取元素
        var js = document.getElementsByClassName("001")[0];
        var dom = document.getElementsByClassName("002")[0];

        // 改变元素的样式
        bro_cat.style.color = "red";
        js.style.backgroundColor = "yellow";
        dom.style.fontSize = "20px";

        // 获取元素的属性
        var input_hobby = document.getElementsByName("my_hobby");
        for (var i = 0; i < input_hobby.length; i++) {
            if (input_hobby[i].checked) {
                alert(input_hobby[i].value);
            }
        }

    </script>


    
</body>
</html>

事件

事件监听

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS事件</title>
</head>
<body>

    <input type="button" id="btn1" value="按钮1" onclick="on()"> 
    <input type="button" id="btn2" value="按钮2">

    <script>

        //事件绑定

        //通过标签属性绑定事件
        function on() {
            console.log("按钮1被点击了");
        }
        //通过DOM对象绑定事件
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function() {
            console.log("按钮2被点击了");
        }

    </script>
    
</body>
</html>