JavaScript基础知识（三）

最新推荐文章于 2024-09-12 16:05:15 发布
原创最新推荐文章于 2024-09-12 16:05:15 发布 · 277 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#JavaScript基础知识
JavaScript 专栏收录该内容
3 篇文章
订阅专栏
本文介绍了JavaScript中的浏览器对象模型(BOM)与文档对象模型(DOM)的基本概念及常用方法和属性，包括Window、Screen、Navigator、Location等对象的使用案例。
JavaScript的Browser 对象简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BOM与DOM</title>
		<style>
            .goTop {
                width: 80px;
                height: 80px;
                background: cadetblue;
                position: fixed;
                right: 20px;
                bottom: 20px;
            }
        </style>
        <script>
            /**
             * window   === 浏览器
             *         history      历史记录
             *         location     路径
             *         screen       屏幕
             *         navigator    浏览器内核信息
             *         document     文档DOM
             * BOM(browser object model) 浏览器对象模型
             * DOM（document object model） 文档对象模型
             */

            function closed() {
                var isClose = window.confirm("您确定要关闭浏览器吗？");
                if (isClose) {
                    window.close();		//close()方法用于关闭浏览器窗口
                }
            }

            function openNew() {

                window.open("")
            }

            function goTop() {
                window.scrollTo(0,0);
            }

			//Window 对象的常用方法
			alert("显示带有一段消息和一个确认按钮的警告框。");
			confirm("显示带有一段消息以及确认按钮和取消按钮的对话框。");
			print();	//打印当前窗口的内容。
			prompt();	//显示可提示用户输入的对话框。
			resizeBy(-100,-100);	//按照指定的像素调整窗口的大小。
			resizeTo(800,400);	//把窗口的大小调整到指定的宽度和高度。
			
			setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
			clearInterval()	取消由 setInterval() 设置的 timeout。
			setTimeout()	在指定的毫秒数后调用函数或计算表达式。
			clearTimeout()	取消由 setTimeout() 方法设置的 timeout

            //Screen 对象的常用属性
            document.write(Screen.availHeight + "<br>");      //返回显示屏幕的高度 (除 Windows 任务栏之外)。
            document.write(Screen.availWidth + "<br>");       //返回显示屏幕的宽度 (除 Windows 任务栏之外)。
            document.write(Screen.height + "<br>");           //返回显示屏幕的高度。
            document.write(Screen.width + "<br>");            //返回显示器屏幕的宽度。
            document.write(Screen.pixelDepth + "<br>");       //返回显示屏幕的颜色分辨率（比特每像素）。
            document.write(Screen.updateInterval + "<br>");   //设置或返回屏幕的刷新率。

            //Navigator 对象的属性
            document.write(navigator.appCodeName);      //返回浏览器的代码名。
            document.write("<br>");
            document.write(navigator.appMinorVersion);      // 返回浏览器的次级版本。
            document.write("<br>");
            document.write(navigator.appName);      // 返回浏览器的名称。
            document.write("<br>");
            document.write(navigator.appVersion);      //  返回浏览器的平台和版本信息。
            document.write("<br>");
            document.write(navigator.browserLanguage);      // 返回当前浏览器的语言。
            document.write("<br>");
            document.write(navigator.cookieEnabled);      //   返回指明浏览器中是否启用cookie 的布尔值。 
            document.write("<br>");
            document.write(navigator.cpuClass);      //    返回浏览器系统的 CPU 等级。
            document.write("<br>");
            document.write(navigator.onLine);      //  返回指明系统是否处于脱机模式的布尔值。
            document.write("<br>");
            document.write(navigator.platform);      //    返回运行浏览器的操作系统平台。
            document.write("<br>");
            document.write(navigator.systemLanguage);      //  返回 OS 使用的默认语言。
            document.write("<br>");
            document.write(navigator.userAgent);      //   返回由客户机发送服务器的user-agent 头部的值。
            document.write("<br>");
            document.write(navigator.userLanguage);      //    返回 OS 的自然语言设置。
            document.write("<br>");
            document.write(navigator.Navigator);      // 对象方法
            document.write("<br>");
            //Navigator 对象的方法
            document.write(navigator.javaEnabled());   //规定浏览器是否启用 Java。
            document.write("<br>");

            //Location 对象的属性
            document.write(Location.hash);      //设置或返回从井号 (#) 开始的 URL（锚）。
            document.write("<br>");
            document.write(Location.host);      //设置或返回主机名和当前 URL 的端口号。
            document.write("<br>");
            document.write(Location.hostname);  //设置或返回当前 URL 的主机名。
            document.write("<br>");
            document.write(Location.href);      //设置或返回完整的 URL。
            document.write("<br>");
            document.write(Location.pathname);  //设置或返回当前 URL 的路径部分。
            document.write("<br>");
            document.write(Location.port);      //设置或返回当前 URL 的端口号。
            document.write("<br>");
            document.write(Location.protocol);  //设置或返回当前 URL 的协议。
            document.write("<br>");
            document.write(Location.search);    //设置或返回从问号 (?) 开始的URL（查询部分）。
            //Location 对象方法
            window.Location.reload(force);    //重新加载当前文档。
            document.write("<br>");

        </script>
    </head>
    <body style="height: 2000px;">
        <button onclick="closed()">关闭浏览器</button>
        <button onclick="openNew()">打开一个新的窗口</button>

        <div class="goTop" onclick="goTop()">返回顶部</div>
    </body>
</html>