WEB应用（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_78820467/article/details/138446032

本文介绍了JavaScript中的基本编程概念，包括for、while循环，函数的封装与调用，对象的使用，以及DOM和BOM模型在操作HTML和浏览器中的应用。通过实例演示了如何利用这些技术控制网页内容和响应用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接着上次的JS内容，望诸君继续前行

<!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>
    <script>
        // 循环:for
        // 输出1~100的值
        // for(var i=1;i<=100;i++){
        //     console.log(i);
        // }

        // 计算1~100的累加和
        // 声明一个额外的变量,来存储累加的和
        // var sum = 0;
        // for(var a=1;a<=100;a++){
        //     sum += a;
        // }
        // console.log(sum);

        
        // while循环
        // while(表达式){代码}
        // 如果表达式为true,循环执行代码
        // while(true){
        //     console.log('hello');
        // }

        // 使用while循环输出1~100的值
        // var x = 1;
        // while(x<=100){
        //     console.log(x);
        //     x++;
        // }

        // do{}while();
        // do:执行
        // 使用do{}while();输出1~100的值
        // do{代码}while(表达式);
        // 先执行一次代码,然后再进行循环判断,判断表达式是否为true
        // 如果为true,循环执行do{}中的代码
        // 如果为fasle,终止循环
        // var y = 1;
        // do{
        //     console.log(y);
        //     y++;
        // }while(y<=100);

        // do{}while();和while(){}的区别
        // while循环会先判断,再执行,如果判断的结果为false,一次都不会执行
        // do{}while();  先执行,后判断,最少会执行一次

        // break:(单词是破坏的意思) 终止循环的执行
        // continue:(单词是继续的意思) 跳出当前循环,继续进行下一次循环

        // 计算25~100之间第一个能被7整除的数字
        // for(var c=25;c<=100;c++){
        //     if(c%7==0){
        //         console.log(c);
        //         break;
        //     }
        // }

        // 输出 1~100之间所有的奇数(如果遇到偶数,就跳出当前的循环,进行下一次循环)
        for(var num=1;num<=100;num++){
            if(num%2==0){
                continue;
            }
            console.log(num);
        }
    </script>
</body>
</html>

函数：

作用就是封装和重用。

函数中的代码，只有在调用的时候才会被执行。

<!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>
    <script>
        // 函数:将具有特定功能的代码块封装,进行重复使用
        // 声明函数:function 函数名([参数1,参数2,参数3..]){代码块(函数体)}
        // function sayHi(){
        //     console.log('欢迎光临!');
        // }

        // 调用函数 函数名([参数1,参数2,参数3..]);
        // 注意:函数在声明的时候不会执行函数体
        // 函数在调用的时候才会执行函数体
        // sayHi();

        // 函数声明时()内可以进行参数的传递
        // 函数在声明时参数称之为形式参数,简称形参,起占位作用
        function sayHello(name){
            // + : +左右两侧只要有一个字符串,就是在进行字符串拼接操作
            console.log('欢迎超级VIP用户' + name + '大哥光临小店,请上二楼豪华包间!');
        }

        // 函数调用时传递的参数称之为实际参数,简称实参
        // sayHello('tony');

        // sayHello('张三');

        // sayHello('老六');


        // 函数的返回值:将函数运行的结果返回给外部调用的程序
        // return 返回值
        function getNum(){
            return 100;
        }

        // 注意:return不具有输出功能
        // 如果想要输出返回值,使用输出语句来输出
        var num = getNum();
        console.log(num);
        //函数还有匿名函数：就是没有名字的函数。（先知道，后续再来学习）
    </script>
</body>
</html>

一个小练习，更深刻的去体return 的作用。

<!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>
    <script>
        // 封装一个函数
        // 判断两个数字的大小,并且返回较大的数字
        function getMax(a,b){
            // if(a>b){
            //     return a;
            // }else{
            //     return b;
            // }
            // 三元运算符/三目运算
            // a>b 结果是true还是false
            // 如果为true,执行?后的代码
            // 如果为false,执行:后的代码
            return a>b ? a : b;
        }

        console.log(getMax(100,50));
        console.log(getMax(1,2));
        console.log(getMax(50,50));

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

对象：

之前我们学习过一些对象，接下来是对于对象使用的扩展。

<!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>
    <script>
        // 声明对象
        // {属性名1:属性值1,属性名2:属性值2,方法名1:方法体1,方法名2:方法体2}
        var person = {
            name:'张三',
            age:25,
            height:180,
            sex:'男',
            sayHi:function(){
                // this:这个对象  内部调用
                console.log(this.name + '可以说hello');
            },
            sleep:function(){
                console.log(this.name + '可以睡觉');
            }
        }

        // 可以调用对象的属性,输出对象的属性值
        // 对象['属性名']
        // 对象.属性名
        console.log(person['sex']);
        console.log(person.sex);
        console.log(person['name']);
        console.log(person.name);

        // 对象调用方法:对象.方法名([参数1,参数2...])
        // . 可以理解为'的'的意思
        person.sayHi();
        person.sleep();
    </script>
</body>
</html>

到这里核心语言功能已经学完了。

什么是DOM：

全称：Document Object Model，文本对象模型。通过对象提供操作HTML文档的方法。（就是对网页进行操作）

要想操作HTML，就要先获取HTML。

<!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>
    <p id="p1">第一个p元素</p>
    <p class="a2">第二个p元素</p>
    <p>第三个p元素</p>
    <span class="a2">第一个span元素</span>
    <span>第二个span元素</span>
    <div>第一个div元素</div>
    <div class="a2">第二个div元素</div>

    <script>
        // 在JS中获取HTML元素对象
        // 1.通过id名称获取元素
        // document.getElementById('id名称');
        // document:文档对象
        // getElementById()
        // get:获取
        // Element:元素
        // By:通过
        var ele = document.getElementById('p1');
        console.log(ele);

        // 2.通过元素名称获取元素对象
        // document.getElementsByTagName('标签名')
        // getElementsByTagName()
        // get:获取
        // Elements:元素的复数形式
        // By:通过
        // Tag:标签
        // Name:名称
        // 通过p这个标签名获取页面中所有的p元素
        var ps = document.getElementsByTagName('p');
        console.log(ps);
        // 获取第2个p元素
        // HTMLCollection[下标]
        console.log(ps[1]);

        // 3.通过class类名获取元素
        // document.getElementsByClassName('class类名')
        // get:获取
        // Elements:元素的复数形式
        // By:通过
        // Class:类
        // Name:名称
        var elements = document.getElementsByClassName('a2');
        console.log(elements);
        // 获取集合中的第3个元素
        // HTMLCollection[下标]
        console.log(elements[2]);
    </script>
</body>
</html>

接下来获取HTML，并进行操作。

<!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>
    <!-- button:按钮 -->
    <button id="btn">充值</button>
    <script>
        // 点击充值按钮,能够弹窗提示'充值成功!'
        // 1.获取按钮元素
        var btn = document.getElementById('btn');
        // console.log(btn);
        // onclick : 点击事件/单击事件(鼠标左键单击了一下)
        // btn.onclick : 给按钮绑定单击事件
        // 当用户单击btn的时候,触发单击事件,
        // 并且执行=后面匿名函数体内的逻辑
        // 2.给元素绑定事件,弹窗提示:充值成功
        btn.onclick = function(){
            alert('充值成功!');
        }
    </script>
</body>
</html>

JS代码引用的方式。

<!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>
    <!-- 1.直接在html元素中绑定事件,书写Js代码 -->
    <button onclick="alert('充值成功!')">充值</button>
    <button id="login">登录</button>
    <!-- 2.使用script标签包裹Js代码 -->
    <script>
        // Js代码
    </script>
    <!-- 3.外部链接 -->
    <!-- src="外部js代码的位置" -->
    <script src="alert.js"></script>
</body>
</html>

alert.js的代码

var login = document.getElementById('login');
login.onclick=function(){
    alert('登录成功!');
}

什么是BOM：

全称：Brower Object Model ，浏览器对象模型，通过对象提供操作浏览器的方法。（比如，刷新，回退等用户的动作）BOM的核心对象是window

内容先告一段落了（后面的知识跑丢了）..........