BOM编程

时间 2019-11-11

标签 bom 编程繁體版

原文原文链接

BOM全称 Browser Object Model，浏览器对象模型。javascript

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。html

为了便于对浏览器的操做，javascript封装了对浏览器的各个对象使得开发者能够方便的操做浏览器。java

一、window对象浏览器

Window 对象是 JavaScript 层级中的顶层对象。框架

Window 对象表明一个浏览器窗口或一个框架。spa

Window 对象会在 <body> 或 <frameset> 每次出现时被自动建立。指针

/* javascript组成部分：code

EMCAScript（基本语法）orm

BOM( Browser Object Model) 浏览器对象模型.htm

浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，若是咱们要

操做浏览器的一些属性，我就能够经过浏览器对象模型的对象进行操做。

window 表明了一个新开的窗口

location 表明了地址栏对象。

screen 表明了整个屏幕的对象

window对象经常使用的方法：

open() 打开一个新的窗口。

resizeTo() 将窗口的大小更改成指定的宽度和高度值。 moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

moveBy() 相对于原来的窗口移动指定的x、y值。

setInterval() 每通过指定毫秒值后就会执行指定的代码。

clearInterval() 根据一个任务的ID取消的定时任务。

setTimeout() 通过指定毫秒值后执行指定的代码一次。

注意：使用window对象的任何属性与方法均可以省略window对象不写的。*/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" onclick="showAd()" value="open" />
        
        <input type="button" onclick="resizeToTest()" value="resize" />
        
        <input type="button" onclick="moveToTest()" value="moveTo" />
        
        <input type="button" onclick="moveByTest()" value="moveBy" />
        
        <!--<input type="button" onclick="setIntervalTest()" value="setInterval" />-->
    
        <input type="button" onclick="clearIntervalTest()" value="clearInterval" />
    </body>
    <script type="text/javascript">
    function showAd(){
        window.open("ad.html");
    }
    function resizeToTest(){
        window.resizeTo(400,400);
    }
    
    function moveToTest(){
        window.moveTo(600,300);
        
    }
    
    function moveByTest(){
        
        window.moveBy(0,50);
        
    }
    
    function setIntervalTest(){
        window.open("ad.html");
    }
    
    
    //var id=window.setInterval("setIntervalTest()",3000);    
    function clearIntervalTest(){
        window.clearInterval(id);
    }
    
    window.setTimeout("setIntervalTest()",3000)    
    </script>
</html>

二、事件的加载

基本上全部的HTML元素中均可以指定事件属性。

每一个元素支持什么样事件应查询文档。

全部的事件属性都是以on开头，后面的是事件的触发方式.

注册事件的方式：

方式一：直接在html元素上注册

/*<body onload="ready()">

function ready() {

alert("body的元素被加载完毕了..");

}

方式二：能够js代码向找到对应的对象再注册。推荐使用。

(注：script标签要写在body标签以后)

var bodyNode = document.getElementById("body");

bodyNode.onload = function() {

alert("body的元素被加载完毕");

}

三、事件

鼠标点击相关：

onclick 在用户用鼠标左键单击对象时触发。

ondblclick 当用户双击对象时触发。

onmousedown 当用户用任何鼠标按钮单击对象时触发。

onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

onmouseout 当用户将鼠标指针移出对象边界时触发。

onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：

onblur 在对象失去输入焦点时触发。

onfocus 当对象得到焦点时触发。

其余：

onchange 当对象或选中区的内容改变时触发。

onload 在浏览器完成对象的装载后当即触发。

onsubmit 当表单将要被提交时触发。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onload="onloadTest()">
        <input type="button" value="单击" onclick="onclickTest()" />
        
        <input type="button" value="双击" ondblclick="ondblclickTest()" />
        
        <input type="button" value="点击鼠标" onmousedown="onmousedownTest()" />
        
        <input type="button" value="释放鼠标" onmouseup="onmouseupTest()"/>
        
        <input type="button" value="显示时间" onmousemove="showTime()" onmouseout="hiddenTime()" />
        <span id="span"></span>
        
        用户名:<input type="text"  id="usernName" name="suer" onfocus="infoUser()" onblur="checkUser()"/>
        <span id="user"></span>
        
        城市：<select name="city" onchange="onchangeTest()">
            <option value="zz">-请选择-</option>
            <option value="zz">郑州</option>
            <option value="gy">巩义</option>
        </select>
        
        <form action="ad.html" onsubmit="onsubmitTest()">
            <input type="submit" />
        </form>
    </body>
    <script type="text/javascript">
        function onloadTest(){
            alert("ready");
        }
        
        function onclickTest(){
            alert("单击");
            
        }
        
        function ondblclickTest(){
            alert("双击");
        }
        
        function onmousedownTest(){
            alert("点击鼠标");
        }
        
        function onmouseupTest(){
            alert("释放鼠标");
        }
        
        function showTime(){
            document.getElementById("span").innerHTML=new Date().toLocaleString();
            
            
        }
        function hiddenTime(){
            document.getElementById("span").innerHTML=" ";
            
        }
        
        function infoUser(){
            document.getElementById("user").innerHTML="请输入用户名".fontcolor("green");
        }
        
        function checkUser(){
            if (document.getElementById("usernName").value.length<6) {
                document.getElementById("user").innerHTML="用户名长度必须大于6位".fontcolor("red");
                
            } else{
                document.getElementById("user").innerHTML="用户名合法".fontcolor("green");
                
            }
            
        }
        
        function onchangeTest(){
            alert("当前城市也改变");
        }
        
        
        function onsubmitTest(){
            alert("表单即将要提交");
        }
        
    </script>
</html>

四、location对象

Location 对象是由 JavaScript runtime engine 自动建立的，包含有关当前 URL 的信息。

location中的重要方法：

href属性设置或获取整个 URL 为字符串。

reload() 从新装入当前页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript">
    function showURL(){
        alert(location.href);
    }
    
    function baidu(){
        location.href="http://www.baidu.com"
    }
    
    function refresh(){
        location.reload();
    }
    
    window.setInterval("refresh()",3000);
    
    </script>
    <body>
    <input type="button" onclick="showURL() " value="显示地址栏" />
    
    <span onclick="baidu()">百度一下</span>
    
    </body>
</html>

五、screen对象

Screen 对象是由 JavaScript runtime engine 自动建立的，包含有关客户机显示屏幕的信息。

availHeight 获取系统屏幕的工做区域高度，排除 Microsoft Windows 任务栏。

availWidth 获取系统屏幕的工做区域宽度，排除 Windows 任务栏。

height 获取屏幕的垂直分辨率。

width 获取屏幕的水平分辨率。