4 BOM编程

编程基础

全称 Browser Object Model,浏览器对象模型。

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

为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

1.1. BOM对象:

1.2. window 对象

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

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

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

1.2.1. window中的方法

document 对 Document 对象的只读引用

location 用于窗口或框架的 Location 对象

history 对 History 对象的只读引用。

document.tilte 设置网页的标题

moveto()  将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

moveby()    相对于目前的位置移动。

resizeTo()   调整当前浏览器的窗口。

open() 打开新窗口显示指定的URL(有的浏览器中是打一个新的选项卡)

setTimeout(vCode, iMilliSeconds) 超时后执行代码。

setInterval(vCode, iMilliSeconds) 定时执行代码,第一次也是先待,到时再执行。

2. 事件

a) 事件说明

基本上所有的HTML元素中都可以指定事件属性。

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

所有的事件属性都是以on开头,后面的是事件的触发方式,如:

onclick,表示单击

onkeydown,表示键按下

...

b) 常用的事件类型:

鼠标点击相关:

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

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

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

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

鼠标移动相关:

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

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

焦点相关的:

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

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

其他:

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

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

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

location 对象

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

location中的重要方法:

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

reload() 重新装入当前页面

1.2.2. screen 对象

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

属性:

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

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

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

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

示例:

document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");

document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");

1.2.3. document对象

该对象代表整个文档页面

对象的集合:

all     获取页面所有元素对象

forms   获取页面所有表单对象

images 获取页面所有图片对象

links   获取所有超链接或area对象

Code Window对象

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <script type="text/javascript">
        function showAd() {
            open("ad.html", "_blank", "height=400px,width=400px,toolbar=no,location=no,top=200px");
        }
        setTimeout("showAd()", 2000);
         //var id = window.setInterval("showAd()",2000);
        function small() {
            resizeTo(300, 200); //相对于原本窗口改变指定的大小。
        }

        function move() {
            for (var i = 0; i < 100; i++) {
                window.moveBy(50, 0); // 相对于原来的窗口移动指定的x、y值。
                moveBy(0, 50);
                window.moveBy(-50, 0);
                window.moveBy(0, -50);
            }
        }

        function move2() {
            window.moveTo(500, 200);
        }

        function clearTest() {
            window.clearInterval(id);
        }
    </script>

    <body>
        <input type="button" onclick="showAd()" value="下载电影" />
        <input type="button" onclick="small()" value="变小" />
        <input type="button" onclick="move()" value="moveBy" />
        <input type="button" onclick="move2()" value="moveTo" />
        <input type="button" onclick="clearTest()" value="取消定时任务" />
    </body>

</html>
时间: 2024-08-01 16:48:40

4 BOM编程的相关文章

4、BOM编程/正则表达式

1.    BOM编程 1.1. BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器. 1.2. BOM对象: 1.3. window 对象 Window 对象是 JavaScript 层级中的顶层对象. Window 对象代表一个浏览器窗口或一个框架. W

Javascript学习总结-BOM编程-(六)

1. BOM编程 1.1. BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器. 1.2. BOM对象: 1.3. window 对象 Window 对象是 JavaScript 层级中的顶层对象. Window 对象代表一个浏览器窗口或一个框架. Wind

Bom编程

1.     BOM编程 1.1. BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器. 1.2. BOM对象: 1.3. window 对象 Window 对象是 JavaScript 层级中的顶层对象. Window 对象代表一个浏览器窗口或一个框架.

JavaScript的BOM编程,事件-第4章

目标 BOM编程 window和document对象 window对象的属性和方法 document对象的属性和方法 JavaScript中对象的分类 浏览器对象:window对象 window对象,这个对象的属性和方法通常被统称为BOM(Browser Object Model,浏览器对象模型) 常用的属性 status 浏览器状态栏中显示的临时消息 screen 屏幕和显示性能的信息 history 访问过的 URL 的信息 location 当前 URL 的信息 document 浏览器窗

js笔记--BOM编程

1.window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象具有双重角色.它既是通过JS访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.所以网页中定义的任何一个对象,变量和函数,都以window作为其Global对象. 1.全局作用域 所有在全局作用域中声明的变量,函数都会编程window对象的属性和方法.但是定义全局变量和直接在window对象上定义属性还是有区别的:全局变量不能通过delete操作符删除,但是直接在win

js的BOM编程的事件编程

1)事件编程的三要素:事件源,事件,监听器 //1)事件源 JButton button = new JButton("按钮"); //3)注册监听器 button.addMouseListner(new MyMouseListner()); //2)监听器 class MyMouseListner implments MouseListner{ public mouseOver(){ ..... } } 3)js事件分类 点击相关 onclick     单击 ondblclcik

4、BOM编程 DOM编程(1)

BOM 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的. 为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器. 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属性. 全局函数是 window

js的BOM编程

浏览器对象分为: window对象: 窗口 location对象: 地址栏 histroy对象: 历史记录栏 screen对象:  屏幕 document对象: html文档 3)window对象(重点) 注意:因为window对象使用太频繁了,所以js可以让我们省略window对象名不写 常用方法: 提示 alert();   提示框 confirm()   询问提示框 prompt()    输入提示框 新窗口 open()    打开一个新窗口 定时 setInterval()   定时器

5、BOM编程 DOM编程(2)

DOM 创建新节点 document.createElement("标签名") 创建新元素节点 elt.setAttribute("属性名", "属性值") 设置属性 elt.appendChild(e) 添加元素到elt中最后的位置 elt.insertBefore(new, child); 添加到elt中,child之前. // 参数1:要插入的节点参数2插入目标元素的位置 elt.removeChild(eChild) 删除指定的子节点 案