网站建设学习（十一）——BOM对象

最新推荐文章于 2024-08-17 12:42:41 发布

QJM1995

最新推荐文章于 2024-08-17 12:42:41 发布

阅读量340

点赞数

文章标签： HTML JavaScript BOM

本文链接：https://blog.csdn.net/QJM1995/article/details/86674132

版权

上一篇介绍了JavaScript的一些统一的内置对象和方法，这一篇继续介绍JavaScript的BOM编程，BOM主要是针对浏览器而言，是获取浏览器的一些数据和对浏览器行为的一些控制，BOM并未统一，因此在执行本篇代码时有值不存在时也是正常现象，对于不同浏览器的区别，文章末会附有说明链接，同样也是需要在同文件夹下建立js文件。

html：

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->

        <!--<script src="js基础语言.js"></script>-->
        <!--<script src="js自定义对象.js"></script>-->
        <script src="BOM编程.js"></script>
        <!--引入js文件-->

    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->
    <!--onclick表示点击按钮触发事件-->
    <input type="button" value="打开百度" onclick="test_open()"/><br/>

    <input type="button" value="测试定时器" onclick="test_inter()"/><br/>

    <input type="button" value="关闭定时器" onclick="test_close_inter()"/><br/>

    <input type="button" value="相对移动" onclick="test_moveBy()"/><br/>

    <input type="button" value="绝对移动" onclick="test_moveTo()"/><br/>

    <input type="button" value="打印本页" onclick="test_print()"/><br/>

    <input type="button" value="确认提示框" onclick="test_confirm()"/><br/>

    <input type="button" value="输入提示框" onclick="test_prompt()"/><br/>

    <input type="button" value="跳转" onclick="test_href()"/><br/>

    <input type="button" value="定时刷新" onclick="test_reload()"/><br/>

    </body>
</html>

BOM编程.js：

/*
BOM编程（Browser Object Model）浏览器对象编程，是针对整个浏览器的对象而进行操作，其规则并不是完全统一的

浏览器的各个部分会封装到相应的对象中

整个浏览器的界面为窗口对象：window对象
整个地址栏为地址栏对象：location对象
历史记录栏对象：history对象
整个屏幕对象：screen对象
浏览器信息对象：Navigator对象

通过这几个对象控制浏览器编程以达到控制浏览器的效果
*/


//window对象
//属性：
document.write(window.closed+"<br/>");//
document.write(window.defaultStatus+"<br/>");//
document.write(window.innerHeight+"<br/>");//
document.write(window.innerWidth+"<br/>");//
document.write(window.length+"<br/>");//
document.write(window.name+"<br/>");//
document.write(window.outerHeight+"<br/>");//
document.write(window.outerWidth+"<br/>");//
//方法：
function test_open(){
    window.open("http://www.baidu.com","_blank","width=200px;height=200px;toolbar=0");
    //第一个参数打开链接，第二个参数打开形式，第三个参数设置打开窗口的形式
}

function test_inter(){
    inter_id = window.setInterval("test_open()",1000);
    //第一个参数为定时活动，第二个参数定时时间，单位毫秒
}

function test_close_inter(){
    window.clearInterval(inter_id);
    //参数表示需要关闭的定时器id
}

//setTimeout()定时器方法只会执行一次，setInterval()会一直执行
//clearsetTimeout()取消定时器

function test_moveBy(){
    window.moveBy(50,50);
    //第一个参数表示相对于当前位置窗口向右移动的像素数，第二个参数表示向下移动的像素数
}

function test_moveTo(){
    window.moveTo(50,50);
    //第一个参数表示移动后左上角的x轴像素数，第二个参数表示移动后左上角的y轴的像素数
}

function test_print(){
    window.print();
    //测试打印
}

//resizeBy()	按照指定的像素调整窗口的大小。
//resizeTo()	把窗口的大小调整到指定的宽度和高度。
//scrollBy()	按照指定的像素值来滚动内容。
//scrollTo()	把内容滚动到指定的坐标。

function test_confirm(){
    var flag = window.confirm("确认？");
    if(flag){
        alert("确认");
    }else{
        alert("取消");
    }
    //确认提示框，有返回值
}

function test_prompt(){
    var str = window.prompt("请输入");
    if (str != null || str != ""){
        alert(str);
    }else{
        alert("无效输入");
    }
}


//Navigator对象属性

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


//Lcation（地址栏）对象
//属性
document.write(location.href+"<br/>");//返回当前的url
function test_href(){
    location.href = "http://www.baidu.com";
}
//location属性既可以返回当前的信息，也可以设置当前的信息，href属性设置当前网址为百度，则实现了跳转
//接下来的属性用法相同
//hash	设置或返回从井号 (#) 开始的 URL（锚）。
//host	设置或返回主机名和当前 URL 的端口号。
//hostname	设置或返回当前 URL 的主机名。
//pathname	设置或返回当前 URL 的路径部分。
//port	设置或返回当前 URL 的端口号。
//protocol	设置或返回当前 URL 的协议。
//search	设置或返回从问号 (?) 开始的 URL（查询部分）。
//方法
function test_reload(){
    location.reload();
    //刷新函数
}

function time(){
    window.setInterval("test_reload()",1000);
}
//assign()	加载新的文档。
//replace()	用新的文档替换当前文档。


//history（历史记录栏）对象
//属性
document.write(history.length+"<br/>");
//方法
//back()	加载 history 列表中的前一个 URL。
//forward()	加载 history 列表中的下一个 URL。
//go()	加载 history 列表中的某个具体页面，正数表示前进页数，负数表示后退页数。


//screen（屏幕）对象，主要是获取屏幕的一些值属性
document.write(screen.availHeight+"<br/>");//返回显示屏幕的高度 (除 Windows 任务栏之外)。
document.write(screen.availWidth+"<br/>");//返回显示屏幕的宽度 (除 Windows 任务栏之外)。
document.write(screen.bufferDepth+"<br/>");//设置或返回调色板的比特深度。
document.write(screen.colorDepth+"<br/>");//返回目标设备或缓冲器上的调色板的比特深度。
document.write(screen.deviceXDPI+"<br/>");//返回显示屏幕的每英寸水平点数。
document.write(screen.deviceYDPI+"<br/>");//返回显示屏幕的每英寸垂直点数。
document.write(screen.fontSmoothingEnabled+"<br/>");//返回用户是否在显示控制面板中启用了字体平滑。
document.write(screen.height+"<br/>");//返回显示屏幕的高度。
document.write(screen.logicalXDPI+"<br/>");//返回显示屏幕每英寸的水平方向的常规点数。
document.write(screen.logicalXDPI+"<br/>");//返回显示屏幕每英寸的垂直方向的常规点数。
document.write(screen.pixelDepth+"<br/>");//返回显示屏幕的颜色分辨率（比特每像素）。
document.write(screen.width+"<br/>");//返回显示器屏幕的宽度。

JavaScript参考手册链接：JavaScript参考手册

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。