Web前端JavaScript笔记（3）对象

在JavaScript中没有类这个概念，只有对象，在新ECMA6新版中增加了类的概念，和数组，字符串类似，对象的声明方法也有三种：

1. 通过new运算符进行传件对象

2. 省略new运算符创建对象

3. 对象常量赋值

<script>
        var obj1 = new Object();
        var obj2 = Object();
        var obj3 = {};
</script>

类的新增属性：

1. 可以给对象添加属性

2. 可以给对象添加方法

delete:

可以删除对象的属性和方法：

<script>
        let person = {};
        person.name = "Bob";
        person.age = 19;
        person.sex = "male";
        person.show = function(){
            alert("Welcome" + " " + person.name);
        };
        // 访问对象的属性
        alert(person.name + " " + person.age + " " + person.sex);
        // 访问对象方法
        person.show();
 
        // 另一种声明对象的方式
        let man = {
            name: "wang",
            age: 55,
            show: function () {
                alert("hello");
            }
        };
        delete man.age;   // delete可以删除对象的属性和方法
</script>

Math对象：

在JS中，很多关于数学运算的函数，由一个叫Math的对象提供，例如：

Math.random(),Math.max(),Math.min(),Math.floor()等，包括三角函数，以及常数。

日期对象：

日期对象的声明：

1. 直接声明，获取的是当前时间；

2. 传入参数，参数的格式：2019-03-03，2019/03/03

3. 传入毫秒数：

<script>
        let dd = new Date();    // 创建日期对象，默认输出的是当前的日期
        alert(dd);
        let dd1 = new Date("2020-01-01");
        alert(dd1)
</script>

日期对象格式化的方法：（返回新的字符串）

toDateString() 以特定的格式显示星期几，月，日和年
toTimeString() 以特定的格式显示时，分，秒和时区
toLocaleDateString() 以特定地区格式显示时，分，秒，时区
toLocaleTimeSting() 以特定地区格式显示时，分，秒和时区
toUTCString() 以特定的格式显示完整的UTC日期

定时器：

格式: setInterval(func(), time);

功能：每隔固定的时间间隔time（单位：ms）,执行依次func()函数

返回值：启动定时器时，系统分配的编号

在拿到返回值的时候，可以通过clearInterval()取消定时器。

<script>
        var i = 0;
        function showNum() {
            document.write(i++ + "<br>");
            if(i===10)
            {
                clearInterval(timer1)
            }
        }
        var timer1 = setInterval(showNum, 1000);
 
        /*匿名函数的写法*/
        var count = 0;
        var timer2 = setInterval(function () {
            document.write(count++ + "<br>");
            if(count===8){
                clearInterval(timer2);
            }
        }, 1200);
</script>

案例：在网页上实时显示时间：

tool.js文件：

 
function timeTrans(n) {    // 对时间中的数字进行补齐
    let res = "";
    if(n<10)
    {
        res += ("0" + n);
    }
    else{
        res += n;
    }
    return res;
}
 
function showTime() {
    let d = new Date();
    let year = d.getFullYear();   //获取年份
    let month = d.getMonth() + 1;  // 0~11
    let date = d.getDate();       // 日期
    let week = d.getDay();         // 一周中的某一天0~6，0代表星期天
    let hour = d.getHours();
    let minute = d.getMinutes();
    let second = d.getSeconds();
    let week_name = ["日", "一", "二", "三", "四", "五", "六"];
    let time_stamp = year + "年" + month + "月" + date + "日 星期" +
        week_name[week] + " " + timeTrans(hour) + ":" + timeTrans(minute) + ":" +
        timeTrans(second);
    return time_stamp;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        setInterval(function () {
            document.getElementById("box").innerHTML = showTime();
        }, 1000);
    </script>
    <style>
        #box{
            width: 600px;
            height: 70px;
            line-height: 70px;
            border: 2px solid black;
            margin: 30px auto;
            font-size: 25px;
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">显示时间</div>
</body>
</html>

效果如下所示：

案例：实现秒表：

要求：秒表有三个按钮，开始，暂停和复位

（补充知识）：在html文档中，JS代码一般写在head中的script标签中，但是如果在这样的代码中通过document.getElementById()来获取标签的话，得到的返回值就是null, 因为代码的执行是按照从上到下依次进行的，在没有执行后的body中的html代码的时候，当然是获取不到标签的。

解决方法：

window.onload = function(){

// 写在这里的代码，是在页面加载完后才运行的

}

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        var seconds = 0;   // 全局的总秒数
        var timer = null;   // 保存定时器的返回值
        window.onload = function () {
            $("start").onclick = function () {
                // 开始计时，设置定时器，每隔一每秒seconds+1
                timer = setInterval(function () {
                    seconds++;
                    $("second").innerHTML = timeTrans(seconds % 60);
                    $("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);
                    $("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));
                }, 100);
            };
 
            $("pause").onclick = function () {
                clearInterval(timer);      // 关闭定时器
            };
 
            $("reset").onclick = function () {
                clearInterval(timer);
                seconds = 0;
                $("second").innerHTML = timeTrans(seconds % 60);
                $("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);
                $("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));
            };
        }
    </script>
    <style>
        #box{
            width: 150px;
            height: 200px;
            border: 2px solid black;
            margin: 30px auto;
            font-size: 20px;
            background: darkorange;
        }
 
        #box div.time{
            width: 70%;
            margin: 5px auto;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            margin-bottom: 20px;
            margin-top: 20px;
        }
 
        #box div.time span{
            display: block;
        }
 
        #box div.btns{
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
 
    </style>
</head>
<body>
    <div id="box">
        <div class="time">
            <span id="hour">00</span>
            <span>:</span>
            <span id="minute">00</span>
            <span>:</span>
            <span id="second">00</span>
        </div>
 
        <div class="btns">
            <button id="start">开始</button>
            <button id="pause">暂停</button>
            <button id="reset">复位</button>
        </div>
    </div>
</body>
</html>

JS文件：

 
function timeTrans(n) {    // 对时间中的数字进行补齐
    let res = "";
    if(n<10)
    {
        res += ("0" + n);
    }
    else{
        res += n;
    }
    return res;
}
 
function showTime() {
    let d = new Date();
    let year = d.getFullYear();   //获取年份
    let month = d.getMonth() + 1;  // 0~11
    let date = d.getDate();       // 日期
    let week = d.getDay();         // 一周中的某一天0~6，0代表星期天
    let hour = d.getHours();
    let minute = d.getMinutes();
    let second = d.getSeconds();
    let week_name = ["日", "一", "二", "三", "四", "五", "六"];
    let time_stamp = year + "年" + month + "月" + date + "日 星期" +
        week_name[week] + " " + timeTrans(hour) + ":" + timeTrans(minute) + ":" +
        timeTrans(second);
    return time_stamp;
}
 
function $(id){
    return document.getElementById(id);   // 是为了简化获取标签的函数
}

定时器效果：

这种定时器存在一个问题，当连续点击两次开始按钮后，会开启两个定时器，此时秒表的计数速度会加快，且不能够暂停下来。

分析：因为前一个定时器还没有被停止，新开的定时器编号已经覆盖原来的编号，所以当点击暂停的时候，新开的定时器被关闭，而原来的定时器编号丢失，不能被关闭了。

对定时器做如下改进：

修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        var seconds = 0;   // 全局的总秒数
        var timer = null;   // 保存定时器的返回值
        var timer_state = 0;   // 定义定时器初始的状态
        window.onload = function () {
            $("start").onclick = function () {
                if(timer_state === 0)
                {
                    timer_state = 1;
                    // 开始计时，设置定时器，每隔一每秒seconds+1
                    timer = setInterval(function () {
                        seconds++;
                        $("second").innerHTML = timeTrans(seconds % 60);
                        $("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);
                        $("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));
                    }, 100);
                    $("start").innerHTML = "暂停"
                }
                else
                {
                    timer_state = 0;
                    clearInterval(timer);      // 关闭定时器
                    $("start").innerHTML = "开始"
                }
            };
 
            // $("pause").onclick = function () {
            //     clearInterval(timer);      // 关闭定时器
            // };
 
            $("reset").onclick = function () {
                clearInterval(timer);
                seconds = 0;
                $("second").innerHTML = timeTrans(seconds % 60);
                $("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);
                $("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));
            };
        }
    </script>
    <style>
        #box{
            width: 150px;
            height: 200px;
            border: 2px solid black;
            margin: 30px auto;
            font-size: 20px;
            background: darkorange;
        }
 
        #box div.time{
            width: 70%;
            margin: 5px auto;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            margin-bottom: 20px;
            margin-top: 20px;
        }
 
        #box div.time span{
            display: block;
        }
 
        #box div.btns{
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
 
    </style>
</head>
<body>
    <div id="box">
        <div class="time">
            <span id="hour">00</span>
            <span>:</span>
            <span id="minute">00</span>
            <span>:</span>
            <span id="second">00</span>
        </div>
 
        <div class="btns">
            <button id="start">开始</button>
            <button id="reset">复位</button>
        </div>
    </div>
</body>
</html>

认识BOM:

BOM：浏览器对象模型，在浏览器中，可以打开多个网页，每一个网页就是一个BOM

  • BOM提供了独立于内容而与浏览器窗口进行交互的对象
  • 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
  • BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
  • BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化）
  • BOM最初是Netscape浏览器标准的一部分

BOM结构如下所示：

BOM提供了一些访问窗口对象的一些方法，可以用这些方法移动窗口位置，改变窗口大小，打开和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的入口，document对象，以使得我们可以通过这个入口来使用DOM的强大功能。

 window对象下面的系统对话框：（方法）完成系统与用户的交互

1. alert() :  弹出窗口对话框

2. confirm(): 带确定和取消的对话框：

3. prompt()：带输入框的提示对话框: (点击确定：如果输入内容，返回的是输入内容，否则返回默认值，点击取消，返回null)

<script>
        let res = confirm("Do  want to quit?");
        alert(res);
        let res1 = prompt("Quit or not?", "nothing");  // 第二个参数是默认值
        alert(res1);
</script>

4. open(url, name) : 打开新的窗口

第一个参数表示要打开的url，

第二个参数表示给打开的网页起的别名，当再次点击按钮时，不会打开新的网页，而是表示在name页面加载打开的新窗口，所以新的网页就会继续在name页面重新加载。

第三个参数：表示打开页面的大小以及位置设置，这里的大小的单位不是px，可以控制打开窗口的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        function open_page() {
            open("https://www.baidu.com");
            open("https://www.baidu.com", "new");
            open("https://www.baidu.com", "new", "width:200,height=200,top=100, left=100");
        }
    </script>
</head>
<body>
    <button id="newPage" οnclick="open_page()">Open</button>
</body>
</html>

认识history对象：

history掌握的是当前窗口的历史记录，只要窗口加载的URL不一样，就会产生历史记录。

属性：

       history.length 输出当前窗口历史记录的条数

方法：

       history.back()    返回上一条历史记录

       history.forward()    前进到下一条历史记录

       history.go() ：  参数(0) 刷新当前页面  , 参数(n)前进n条记录 ， 参数(-n)后退n条记录

认识location对象：

url: 统一资源定位符：

协议://IP(域名)/:端口号/路径 /？查询字符串#锚点

protocol://hostname:port/pathname/?search#hash

1. 协议：通过

2. hostname: 主机名 IP (域名)

3. 端口号：系统给当前电脑上正在使用网络的软件随机分配的编号。一本职能分配0-65535之间的数字

一些常用的软件在设备上具有默认的端口号：

例如：浏览器： 8080  http: 80   https: 443

4. 路径：

5. 查询字符串： loaction.search();  在URL上，有问号拼接的部分就是查询字符串。

   查询字符串必须通过问号拼接，具有属性和值，?name=value&name=value, 查询字符串中是以键值对的形式呈现的。主要用于前后端交互。

6. hash:  锚点： 实现在当前页面内进行跳转

window下的location对象与document下的location对象相同，loaction:中的方法：

a. location.assign(url): 跳转到指定页面，即在当前窗口进行跳转

b. location.replace(url): 用新的url将当前页面上的url进行替换。

c. location.reload(): 直接刷新当前窗口，

    location.reload(true)：不经过浏览器缓存直接强制从服务器重载

assign与replace的区别：

assign在页面跳转后会生成历史记录，可以再通过记录返回之前的页面

replace在跳转到新的页面后，不会产生历史记录。

认识DOM：

dom: document object model:  文档对象模型

documen表示<html></html>之间的部分

document中所有的节点可以分为三类：

1. 元素节点       <div>

2. 属性节点      id = "", class = ""

3. 文本节点     div标签内的文本

元素节点获取的方法：

1. document.getElementById(), 通过id获取节点

2. node.getElementsByTagName()，通过标签名获取节点（这里node节点可以是document中的任何节点，document相当于从全局开始查找节点）， 返回值是节点对象构成的数组

3. node.getElementsByClassName(), 通过class属性获取节点

4. document.getElementsByName(), 通过name属性获取节点  ，只能从全局开始查找，一般只使用在表单元素

5. 也通过节点获取其他的属性值

6. 也可以通过节点修改相节点的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let content_box = document.getElementById("box");
            alert(content_box.title);    // 获取title属性
            alert(content_box.id);       // 获取id;
            alert(content_box.className);    // 获取class属性
            alert(content_box.style);    // 获取样式 但是只能访问行内间的样式
            content_box.style.background = "blue";
        }
        
    </script>
</head>
<body>
    <div id="box" class="cotent" title="hello" style="width: 100px;height: 100px; background: red"></div>
</body>
</html>

7. document.querySelector():    返回值是符合条件的第一个元素节点  ，参数是CSS选择器

8. document.querySelectorAll():   不管找到一个还是多个，返回值都是数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="../JavaScript/tool.js"></script>
    <script>
        window.onload = function () {
            let content_box = document.querySelector("#box");
            let content_box1 = document.querySelectorAll(".content");  // 返回对象数组
 
            let per_1 = document.querySelector("ul .per");
            let per_2 = document.querySelector("[name=hello]");   // 获取name属性等于hello的节点
        }
 
    </script>
</head>
<body>
    <div id="box" class="cotent" title="hello" style="width: 100px;height: 100px; background: red"></div>
    <div class="box1"></div>
    <ul>
        <li class="per"></li>
        <li></li>
    </ul>
</body>
</html>

自定义byClassName方法：

因为在IE8一下的浏览器中，不支持通过node.getElementsByClassName()查找节点，所以需要自定义实现这个函数：

<script>
        function elementsByClassName(node, className){
            // node : 开始查找的节点  className
            let arrNodes = [];
            let nodes = node.getElementsByTagName("*");   // 查找node下所有节点
            for(let i=0; i<node.length; i++)
            {
                if(nodes[i].className === className)
                {
                    arrNodes.push(nodes[i]);
                }     
            }
            return arrNodes;
        }
        window.onload = function () {
           
        };
</script>

获取当前有效样式：

通过.style方法自能获取卸载行间的CSS样式；因为CSS样式只能在程序运行的时候进行计算得到权重后，才能最终展现在元素上。系统提供了两个获取CSS样式的方法：
1. node.currenStyle(["height"])         // IE浏览器支持

2. getComputedStyle(node)["height"]      // 火狐，谷歌浏览器支持

需要封装一个自适应的获取样式的函数，以兼容所有的浏览器：

<script>
        function getStyle(node, style) {
            return node.currentStyle ? node.currentStyle[style]:getComputedStyle(node)[style];            
        }
</script>

---------------------------------------------------------------------------------------------------------------------------

posted @   Alpha205  阅读(123)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae