BOM

目录

目录

BOM

继续学习对象。

代码执行顺序

写在函数里的代码可以用事件来调用（也可以在js里直接调用）

不写在函数里的代码直接被解析执行。

window对象

Window 对象表示浏览器中打开的窗口。

一旦页面（html）加载，就会自动创建window对象，所以无需手动创建window对象。

属性

innerWidth、innerHeight

文档显示区域的高度和宽度。

        <script>
                document.write("文档内容");
                document.write("文档显示区域的宽度" + window.innerWidth);
                document.write("<br>");
                document.write("文档显示区域的高度" + window.innerHeight);
        </script>

outerWidth、outerWidth

outerHeight 属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。

outerWidth 属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。

        <script>

                document.write("浏览器的宽度:" + window.outerWidth);
                document.write("<br>");
                document.write("浏览器的高度:" + window.outerWidth);

        </script>

方法

open()

open() 方法用于打开一个新的浏览器窗口。

window.open(URL,name,specs,replace)

<body>
        <script>
                function openNewWindow() {
                        myWindow = window.open("/"); // 打开自己电脑D盘的索引
                }
        </script>

        <button onclick="openNewWindow()">打开一个新的窗口</button>
</body>


<body>
        <script>
                function openWin() {
                        myWindow = window.open('http://www.baidu.com', '百度', 'width=800,height=1000,left=200,top=200');
                        // 下面的代码会覆盖上面打开的百度
                        // myWindow.document.write("<p>这是'我的窗口'</p>");
                        // focus() 方法将焦点设置到当前窗口，也就是将窗口显示在前（靠近屏幕）。
                        // myWindow.focus();
                }
        </script>

        <input type="button" value="打开窗口" onclick="openWin()" />

</body>

close()

close() 方法用于关闭浏览器窗口。

<body>
        <script>
                function openWin() {
    					// 用myWindow来操作子窗口
                        myWindow = window.open("", "", "width=200,height=100");
                        myWindow.document.write("<p>这是'我的窗口'</p>");
                }

				// 操作子窗口
                function closeWin() {
                        myWindow.close();
                }
        </script>

        <input type="button" value="打开我的窗口" onclick="openWin()" />
        <input type="button" value="关闭我的窗口" onclick="closeWin()" />

</body>

移动、调整窗口

moveTo() 方法可把窗口的左上角移动到一个指定的坐标

moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。

resizeTo()方法用于把窗口大小调整为指定的宽度和高度。

resizeBy() 方法用于根据指定的像素来调整窗口的大小。

<body>
        <script>
                function openWin() {
                        myWindow = window.open('', '', 'width=200,height=100,left=500');
                        myWindow.document.write("<p>这是我的窗口</p>");
                }

                function moveTo() {
                        myWindow.moveTo(800, 500);
                        myWindow.focus();
                }

                function moveBy() {
                        myWindow.moveBy(250, 250);
                        myWindow.focus();
                }

                function resizeBy() {
                        myWindow.resizeBy(100, 100);
                        myWindow.focus();
                }

                function resizeTo() {
                        myWindow.resizeTo(500, 500);
                        myWindow.focus();
                }
        </script>

        <button onclick="openWin()">打开新窗口</button><br>
        <button onclick="moveTo()">moveTo移动窗口</button><br>
        <button onclick="moveBy()">moveBy移动窗口</button><br>
        <button onclick="resizeTo()">resizeTo调整窗口大</button><br>
        <button onclick="resizeBy()">resizeBy调整窗口大小</button><br>


</body>

alert()

alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框。

<body>
        <!-- 我们写的js代码开始与页面元素进行交互:在元素中通过事件来调用JavaScript函数 -->
        <button onclick="register()">注册</button>
        <script>
                function register() {
                        alert("注册成功");
                }
        </script>
</body>

confirm()

confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

如果访问者点击"确定"，此方法返回true，否则返回false。

<body>
        <script>
                function del() {
                        var d = confirm("是否要删除");
                        alert("d 的数据类型：" + typeof d + " " + "d 的值是：" + d);
                        if(d){
                                alert("该数据被删除！")
                        }else{
                                alert("请再次确认是否要删除数据！")
                        }
                }
        </script>

        <br>
        <button onclick="del()">删除</button>
</body>

prompt()

prompt()方法用于显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

<body>
        <script>
                function p() {
                        var name = prompt("请输入用户名:");
                        alert("您输入的用户名是:" + name);
                }
        </script>

        <br>
        <button onclick="p()">请输入用户名</button>
</body>

setTimeout()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

<body>
        <script>

                function showTime() {
                        var d = new Date();
                        var h = d.getHours();
                        var m = d.getMinutes();
                        var s = d.getSeconds();
                        //这里不能使用document.write，因为会重写页面，导致之前的页面内容丢失(很猛)
                        // document.write(h + ":" + m + ":" + s);

                        // 新写法（DOM中的内容），使用元素对象的innerHTML属性来写内容
                        document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
                }

                function showAfter3s() {
                        // 只执行一次
                        setTimeout(showTime, 3000);
                }

        </script>
        <div id="time"></div>
        <button onclick="showAfter3s()">点击后3秒钟后显示当前时间，并且只显示一次</button>
</body>

clearTimeout()

clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。

clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。

注意: 要使用 clearTimeout() 方法, 在创建执行定时操作时要使用全局变量：

<body>

        <p>点击按钮，等待 3 秒后弹出 "Hello" 。</p>
        <p>点击第二个按钮来阻止弹出函数 myFunction 的执行。 (你必须在 3 秒前点击)</p>

        <button onclick="myFunction()">先点我</button>
        <button onclick="myStopFunction()">阻止弹出</button>

        <script>
                var myVar; // 必须使用全局变量

                function myFunction() {
                        myVar = setTimeout(function () { alert("Hello") }, 3000);
                }

                function myStopFunction() {
                        clearTimeout(myVar);
                }
        </script>

</body>

<body>

        <button onclick="startCount()">开始计数!</button>
        <input type="text" id="txt">
        <button onclick="stopCount()">停止计数!</button>

        <p>
                点击 "开始计数!" 按钮开始执行计数程序。输入框从 0 开始计算。 点击 "停止计数!" 按钮停止后，可以再次点击点击 "开始计数!" 按钮会重新开始计数。
        </p>

        <script>
                var c = 0;
                var t;
                var timer_is_on = 0;

                function timedCount() {
                        document.getElementById("txt").value = c;
                        c = c + 1;
                        t = setTimeout(function () { timedCount() }, 1000);
                }

                function startCount() {
                        if (!timer_is_on) {
                                timer_is_on = 1;
                                timedCount();
                        }
                }

                function stopCount() {
                        clearTimeout(t);
                        timer_is_on = 0;
                }
        </script>

</body>

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

不要在setInterval调用的函数中使用document.write();

因为代码执行调用的函数showTime到document.write就结束了，此时会创建一个新的文档（html），新的文档里，只剩下打印出来的时间字符串，把其它东西都给扔了，所以只会看到执行一次showTime打印出来的时间字符串。

<body>
        <p>每隔1秒钟，打印当前时间</p>

        <div id="time"></div>

        <script>

                function showTime() {
                        var d = new Date();
                        var h = d.getHours();
                        var m = d.getMinutes();
                        var s = d.getSeconds();
                        document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
                }
                // setInterval(),每间隔一秒调用一次showTime函数
                var t = setInterval(showTime, 1000);
        </script>

        <br><br>
</body>

clearInterval()

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：

<body>
        <p>每隔1秒钟，打印当前时间</p>

        <div id="time"></div>

        <script>

                function showTime() {
                        var d = new Date();
                        var h = d.getHours();
                        var m = d.getMinutes();
                        var s = d.getSeconds();
                        document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
                        if (s % 5 == 0) {
                                clearInterval(t);
                        }

                }
                // setInterval(),每间隔一秒调用一次showTime函数
                var t = setInterval(showTime, 1000); // 必须使用全局变量
        </script>

        <br><br>
</body>

Location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.location.****xxx 格式的相关属性对其进行访问。

Note注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

属性

hash 返回一个URL的锚部分

host 返回一个URL的主机名和端口

hostname 返回URL的主机名

port 返回一个URL服务器使用的端口号

pathname 返回的URL路径名

protocol 返回一个URL协议

search 返回一个URL的查询部分

        <script>
                function getStr(str) {
                        document.write(str);
                        document.write("<br>");
                }

                getStr("协议 location.protocol:" + location.protocol);
                getStr("主机名 location.hostname:" + location.hostname);
                getStr("端口号 (默认是80，没有即表示80端口)location.port:" + location.port);

                getStr("主机加端口号 location.host: " + location.host);
                getStr("访问的路径  location.pathname: " + location.pathname);

                getStr("锚点 location.hash: " + location.hash);
                getStr("参数列表 location.search: " + location.search);
        </script>

href属性

见replace()方法。

replace()

replace() 方法可用一个新文档取代当前文档。

<body>

        <input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()">

        <script>
                function replaceDoc() {
                    	// 第一种方法
                    	// location.href = "https://www.baidu.com";
                    	// 第二种方法
                        window.location.replace("https://www.baidu.com");
                }
        </script>

</body>

方法

reload()

重新载入当前文档（相当于刷新一下当前网页，所有的代码重新执行。）

<body>
        <span>当前时间:</span>
        <script>
                var d = new Date();
                document.write(d.getHours());
                document.write(":");
                document.write(d.getMinutes());
                document.write(":");
                document.write(d.getSeconds());
                document.write(":");
                document.write(d.getMilliseconds());

                function refresh() {
                    	// 从服务器重新加载
                        location.reload(true);
                }
        </script>

        <br>
        <button onclick="refresh()">刷新当前页面</button>
</body>

assign()

载入一个新的文档

<body>
        <script>
                function jump() {
                        //方法1
                        //location="/";

                        //方法2
                        location.assign("/");

                }
        </script>

        <br>
        <button onclick="jump()">跳转到首页</button>
</body>

History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

Note注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

History用于访问过的历史记录。

属性

length

length 属性声明了浏览器历史列表中的元素数量。

注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

        <script>

                document.write("历史列表中URL的数量: " + history.length);

        </script>

方法

疑问：我以为是访问浏览器储存的历史

但实际上可能指请进后退，当前页面跳到另一个页面、再跳到另一个页面这种场景

go()

go() 方法可加载历史列表中的某个具体的页面。

该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

<body>
        <script>
                function goBack() {
                        window.history.go(-2)
                }
        </script>

        <input type="button" value="后退2页" onclick="goBack()">

</body>

第一页

<body>
    <script>
          
        document.write("历史列表中URL的数量: " + history.length);
        function goNext() {
            location.href = "第二页.html";
        }

        function goBack() {
                        window.history.go();
                }
    </script>

    <h1>这是第一页</h1>

    <button onclick="goNext()">跳到下一页</button><br>
    <button onclick="goNext()">前进一页</button>
</body>

第二页

<body>
      <script>
            document.write("历史列表中URL的数量: " + history.length);
            function goNext() {
                  location.href = "第三页.html";
            }
      </script>

      <h1>这是第二页</h1>

      <button onclick="goNext()">跳到下一页</button>
</body>

第三页

<body>
        <script>

                document.write("历史列表中URL的数量: " + history.length);

                function goBack() {
                        window.history.go(-2);
                }
        </script>


        <h1>这是第三页</h1>
        <button onclick="goBack()">退回两页</button>
</body>

forward()

forward() 方法可加载历史列表中的下一个 URL。

<body>
        <script>
                function goForward() {
                        window.history.forward()
                }
        </script>

        <input type="button" value="前进" onclick="goForward()">

        <p>注意,点击这里的前进按钮不会导致任何行动,因为历史列表中没有下一个URL。</p>

</body>

Back()

back() 方法可加载历史列表中的前一个 URL（如果存在）。

调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

<body>
        <script>
                function goBack() {
                    	// 返回上次访问
                        history.back();
                }
        </script>

        <button onclick="goBack()">返回</button>
</body>

<body>
        <script>
                function goBack() {
                    	// 返回上上次访问
                        history.go(-2); //-1表示上次，-2表示上上次，以次类推
                }
        </script>

        <button onclick="goBack()">返回上上次</button>
</body>

Navigator对象

Navigator 对象包含有关浏览器的信息。

Note注意： 没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

属性

appName 返回浏览器的名称

appVersion 返回浏览器的平台和版本信息

appCodeName 返回浏览器的代码名

platform 返回运行浏览器的操作系统平台

cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值

userAgent 返回由客户机发送服务器的user-agent 头部的值

        <script>
                document.write("<p>浏览器产品名称：");
                document.write(navigator.appName + "</p>");

                document.write("<p>浏览器版本号：");
                document.write(navigator.appVersion + "</p>");

                document.write("<p>浏览器内部代码：");
                document.write(navigator.appCodeName + "</p>");

                document.write("<p>操作系统：");
                document.write(navigator.platform + "</p>");

                document.write("<p>是否启用Cookies：");
                document.write(navigator.cookieEnabled + "</p>");

                document.write("<p>浏览器的用户代理报头：");
                document.write(navigator.userAgent + "</p>");
        </script>

方法

javaEnabled()

javaEnabled() 方法可返回一个布尔值，该值指示浏览器是否支持并启用了 Java。如果是，则返回 true，否则返回 false。

<script>
	document.write("启用Java: " + navigator.javaEnabled());
</script>

taintEnabled()

taintEnabled() 方法可返回一个布尔值，该值声明了当前浏览器是否启用了数据污点 (data tainting)。

<script>
	document.write("启用数据污点: " + navigator.taintEnabled());
</script>

Screen对象

Screen 对象包含有关客户端显示屏幕的信息。

Note注意： 没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

属性

width 返回屏幕的总宽度

height 返回屏幕的总高度

availWidth 返回屏幕的宽度（不包括Windows任务栏）

availHeight 返回屏幕的高度（不包括Windows任务栏）

        <script type="text/javascript">
                document.write("用户的屏幕总宽度和总高度: ")
                document.write(screen.width + "*" + screen.height)
                document.write("<br />")
                document.write("可用区域大小: ")
                document.write(screen.availWidth + "*" + screen.availHeight)
                document.write("<br />")
        </script>

方法

习题

上机练习1

<body>
    <script>

        function closPage() {
           window.close();
        }
 
            // 只执行一次
            setTimeout(closPage, 3000);
        

    </script>

    <h1>欢迎学习window对象</h1>
    <div id="time">三秒后关闭当前页面</div>
    
</body>

上机练习2

<body>
    <script>

        var time = 3;

        function closeWindow() {
            if (time > 0) {

                document.getElementById("show").innerHTML = " 关闭倒计时" + time + "......";

                time--;

            } else {

                window.close();

            }

        }

        window.setInterval('closeWindow()', 1000);


    </script>

    <div id="show"></div>

</body>

上机作业1

openWindow.html

<body>
    <script>
            function openNewWindow() {
                    myWindow = window.open("navigator.html","", 'width=450,height=450,left=500'); 
            }
    </script>

    <button onclick="openNewWindow()">查看浏览器信息</button>
</body>

navigator.html

<body>
    <script>
        document.write("<p>浏览器产品名称：");
        document.write(navigator.appName + "</p>");

        document.write("<p>浏览器版本号：");
        document.write(navigator.appVersion + "</p>");

        document.write("<p>操作系统：");
        document.write(navigator.platform + "</p>");

        document.write("<p>浏览器的用户代理报头：");
        document.write(navigator.userAgent + "</p>");

    </script>

    <div id="show"></div>

上机作业2

3秒后打开新窗口，3后秒再关闭窗口。

<body>
        <script>
                function openNewWindow() {
                        myWindow = window.open("navigator.html","", 'width=450,height=450,left=500'); 
                }

                function closeNewWindow(){
                    myWindow.close();
                }

                function openAndClose(){
                    setTimeout(openNewWindow,3000);
                    setTimeout(closeNewWindow,6000);
                }
                
                
        </script>
    
        <button onclick="openAndClose()">查看浏览器信息</button>
    
</body>

上机作业3和4

openWindow.html

<body>
    <button onclick="setAuto()">查看浏览器信息</button>

    <script>
        function openNewWindow() {
            myWindow = window.open("navigator.html", "", 'width=450,height=450,left=500');
        }

        function closeNewWindow() {
            myWindow.close();
        }

        function reDirect() {
            // 重定向
            window.location.href = "navigator.html";
        }

        function setAuto() {
            setTimeout(openNewWindow, 3000);
            setTimeout(closeNewWindow, 6000);
            // setTimeout(window.location.replace("navigator.html") , 8000);
            setTimeout(reDirect, 7000);
        }
    </script>

</body>

navigator.html

        <script>
                document.write("<p>浏览器产品名称：");
                document.write(navigator.appName + "</p>");

                document.write("<p>浏览器版本号：");
                document.write(navigator.appVersion + "</p>");

                document.write("<p>操作系统：");
                document.write(navigator.platform + "</p>");

                document.write("<p>浏览器的用户代理报头：");
                document.write(navigator.userAgent + "</p>");

                function goToOpenWindow() {
                        window.history.back();
                }
                setTimeout(goToOpenWindow, 2000);

        </script>
posted @ 2022-12-09 10:04  笑无邪  阅读(68)  评论(0)    收藏  举报