Javascript初学篇章_6(BOM)

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);

效果图如下

时间: 2024-08-24 15:46:30

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

Javascript初学篇章_5(对象)

对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象,它有属性颜色.身高之类,而它的方法就有抓老鼠. 本地对象1.Date 日期对象用来处理日期和时间.在<Javascript初学篇章_1>中就有提到过 var myDate = new Date(); myDate.getFullYear(); //获取完整的年份(4位,1970-????) myD

Javascript初学篇章_1

Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Javascript是由ECMAScript.DOM.BOM三部分组成. ECMAScript:(European Computer Manufacturers Association)核心 DOM:(Document Object Model)文档对象模型 BOM : (Drowser Object

Javascript初学篇章_3

五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 else statement2 例: var mark=89; //第一层判断分数是否在一个合理的范围内 if(mark >= 0 && mark <= 100){ //第二层判断对分数进行评价 if(mark>90){ console.log('成绩优秀'); } else i

Javascript初学篇章_2

数据类型2 3.布尔类型 (boolean) 说明:与字符串不同,不要把布尔值用引号括起来.布尔值 false 与 字符串 "false"是两回事. 规制:布尔型数据只能有两种种值 true 和 false; var like=true; var like=false; 4.对象(object) 说明:Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行 对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体. 注:对象是Javascript的重点,在今

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

七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i<=9){ //利用循环在页面输出9张照片 document.write('<img src="img/'+i+'.jpg">'); i++; } 2. Do…while do...while功能与while相同,只是在执行的时候do...while是先执行后判断,whi

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

自定义动画 由于有一部分低版本的浏览器并不支持的问题,所以这个样式要多做兼容,各大浏览器兼容前缀如下: 前缀 浏览器  -webkit  chrome和safari  -moz  firefox  -ms  IE  -o  opera 1. animation-name(动画名称):语法:animation-name :none | <identifier> 说明:元素所应用的动画 名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 div{ animatio

Javascript初学篇章_7(DOM)未完待续

DOM 文档对象模型DOM (document object model) 文档对象模型,它定义了操作文档对象的接口.DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系. 一.节点 节点(node) 一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的.对于html文档也是一样,文档是由节点构成的集合.1.元素节点元素节点如 <body> <p> <div> 之

CSS3初学篇章_6(布局/浏览器默认样式重置)

CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种 布局方式为 div + css 布局. 语义元素 <header>.<nav>.<section>.<article>.<aside&

JavaScript(核心、BOM、DOM)

http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性(不可以直接访问本地硬盘) 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关) 1.JavaScript和Java不同! ①所属:NetScape和Sun ②基于对象和面向对象 ③JS可以直接解析执行,Java需先编译在运行 ④JavaScript是一种弱类型的语言,Java是强类型的语言.