BOM 浏览器对象模型

BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象

一、window对象

Window对
象表示整个浏览器窗口。

1.系统消息框 alert()

alert('hello world!');

2.确认对话框 confirm() 

该方法返回一个boolean值,如果点击ok返回true,点击cancel返false;

if(confirm("确定要删除吗?")){

  //删除
}

3.输入对话框 prompt()

如果点击ok将文本框中的值作为函数值返回,如果点击cancel返回null

//如果用户不输入任何值或点击取消,那么脚本会一直弹出对话框
function requiredPrompt() {
while(true) {
var name = prompt("ssss");
if(name != null && name != "") {
console.log(name);
break;
}
}
}

4. 打开新窗口 window.open()

window.open("http://www.baidu.com","_blank","width=300, height=200");

5.定时器setInterva() 、 setTimeout() 

定时器可以说是js前端最常用的工具,几乎所有的逐渐变化的动态效果都会使用到定时器,比如 说图片滚动,渐隐渐现,拖拽等等.定时器分两种分别是settimeout和setinterval.

window.setInterval(); //设置循环定时器
var T = window.setInterval(test,1000); // test:执行的代码串或函数 设置1000毫秒
window.clearInterval(); //清除循环定时器
window.clearInterval(T);
window.setTimeout(); //设置单次定时器
var T = setTimeout(test,1000); // test:执行的代码串或函数 设置1000毫秒
window.clearTimeout() // 清除单次定时器
clearTimeout();

二、history对象

history对象是window对象的子对象,对应于浏览器的 历史记录。

window.history.go(-1);//跳转前一个页面
window.history.go(1);//跳转下一个页面
history.back();//跳转前一个页面
history.forward();//跳转下一个页面

三、Location对象

Location对象也是window对象的子对象,通过它可以获取或设置浏览器的当前地址。

1.跳转到其它页面

window.location.href = "http://www.163.com";
location.href = "http://www.163.com";

2.重新载入页面(刷新) 

location.reload(); 

四、navigator对象 

Navigator对象包含着有关web浏览器的信息,它也是window的属性,可以用 window.navigator 引用它,也可以用navigator引用

例:获取浏览器内部代号,名称,操作系统等信息

var info = navigator.userAgent;
alert(info);

效果图如下

Javascript初学篇章_6(BOM)的更多相关文章

  1. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  2. Javascript初学篇章_1(概念/数据类型)

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  3. Javascript初学篇章_4(循环与函数)

    七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...

  4. Javascript初学篇章_3(注释/if/switch)

    五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...

  5. Javascript初学篇章_8(事件)

    事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...

  6. Javascript初学篇章_7(DOM)

    DOM 文档对象模型DOM (document object model) 文档对象模型,它定义了操作文档对象的接口.DOM 把一份html文档表示为一棵家谱树,使用parent(父), child( ...

  7. Javascript初学篇章_2(数据类型的查看和转换/运算符)

    三.数据类型的查看和转换 1.查看数据类型 typeof 说明:typeo可以查看变量的类型. 语法:alert(typeof  变量名或数据): 2.转换成字符串 var married = fal ...

  8. CSS3初学篇章_6(自定义动画)

    自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  - ...

  9. JavaScript大杂烩9 - 理解BOM

    毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript ...

随机推荐

  1. 用DllImport引用的外部DLL文件如何通过clickonce发布

    在.net中非托管代码或非COM组件的外部DLL文件只能用DllImport的方式使用,但是在clickonce方式发布时不会自动包含到发布清单中去,办法是在项目中先把外部DLL文件作为普通文件添加进 ...

  2. redhat 配置本地yum源163yum源epel 源,无需卸载yum!无须拷贝ISO,愿网上少一点垃圾教程误人子弟

    都知道redhat不收费,但是其yum服务是要收费的,不想出钱那就自己配置yum源就好了. 首先,博主之前也没用过redhat,第一次用yum装包的时候提示什么没注册之类的,balaba一大堆,然后就 ...

  3. SQL多表查询,消除表中的重复的内容

    看到朋友再写一个SQL语句:两个表a1表中有SN.SN2.TN,b1表有SM.SM2.TN2,若a1的SN中的数据和b1的SM中的数据是一致的,那么将a1中对应的数据修改成b1中对应的数据. upda ...

  4. netstat相关

    1. netstat基本参数: 参数 说明 输出 -a 列出所有连接. 列出 tcp, udp 和 unix 协议下所有套接字的所有连接.然而这些信息还不够详细,管理员往往需要查看某个协议或端口的具体 ...

  5. Ubuntu架设FTP

    1.安装vsftpd >sudo apt-get install vsftpd 2.安装好ftp后默认是会自动创建ftp用户的,然后我们设置ftp用户的密码 >sudo passwd ft ...

  6. JS身份证号码校验

    var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...

  7. Notepad++ 使用nppexec插件配置简易开发环境

    notepad++  采用nppexec插件来配置简易开发环境,而不需要笨重的IDE以及麻烦.重复的命令行.控制台输入: 以下为本人最近用到的脚本配置: //编程语言脚本中$(NAME_PART).x ...

  8. Kafka vs RocketMQ——单机系统可靠性-转自阿里中间件

    引言 前几期的评测中,我们对比了Kafka和RocketMQ的吞吐量和稳定性,本期我们要引入一个新的评测标准--软件可靠性. 何为"可靠性"? 先看下面这种情况:有A,B两辆越野汽 ...

  9. python遍历一个网段的ip地址

    def ip2num(ip):#ip to int num lp = [int(x) for x in ip.split('.')] return lp[0] << 24 | lp[1] ...

  10. hellocharts包的使用心得

    首先将jar包导入Libs里面然后add进入于activity中调用 xml中加入布局 <lecho.lib.hellocharts.view.LineChartView android:id= ...