1. 什么是BOM
ü ECMAScript无疑是JavaScript的核心，但是要想在浏览器中使用JavaScript，那么BOM（浏览器对象模型）才是真正的核心。
ü BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
ü BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为.
2.window对象
window对象是BOM的核心，它表示一个浏览器的实例。
• 在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。
• 全局作用域：
window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。
3.navigator对象
navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等
各种与浏览器相关的信息。
• 我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。
4.history对象
history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
History.length，可以获取到当前访问的链接数量
• go()
– 使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。
• back()
– 向后跳转，可以回退到上一个页面，作用和浏览器后退按钮一样
• forward()
– 向前跳转，可以跳转到下一个页面，作用和浏览器前进按钮一样
5.location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
• href属性：
– href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。
• assign() 方法
– 所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中
• replace()方法
– 功能一样，只不过使用replace方法跳转地址不会体现到历史记录中。
• reload() 方法
– 用于强制刷新当前页面
6.screen对象
screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。
• 该对象作用不大，我们一般不太使用
7.窗口大小
浏览器中提供了四个属性用来确定窗口的大小：
– 网页窗口的大小
• innerWidth
• innerHeight
– 浏览器本身的尺寸
• outerWidth
• outerHeight
8.打开窗口
使用 window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。
• 这个方法需要四个参数：
– 需要加载的url地址
– 窗口的目标
– 一个特性的字符串
– 是否创建新的历史记录
9.系统对话框
浏览器通过 alert() 、 confirm() 和 prompt()方法可以调用系统对话框向用户显示消息。
• 它们的外观由操作系统及（或）浏览器设置决定，而不是由 CSS 决定。
• 显示系统对话框时会导致程序终止，当关闭对话框程序会恢复执行
1) alert
alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认按钮的对话框。
例如：alert("Hello World");
2) confirm
confirm和alert类似，只不过confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。
例如：– confirm('你确定吗？ ');这个函数的执行会返回一个布尔值，如果选择确定则返回true，如果点击取消则返回false。
3) prompt
prompt会弹出一个带输入框的提示框，并可以将用户输入的内容返回。
它需要两个值作为参数：
– 显示的提示文字
– 文本框中的默认值
例子：prompt('你的年龄是？ ','18');
10.定时器简介
①超时调用
超时调用：
–setTimeout()
– 超过一定时间以后执行指定函数
– 需要连个参数：
要执行的内容;超过的时间
• 取消超时调用
–clearTimeout()
• 超时调用都是在全局作用域中执行的。
②间歇调用
间歇调用：
–setInterval()
– 每隔一段时间执行指定代码
– 需要两个参数：
• 要执行的代码
间隔的时间
取消间隔调用：
–clearInterval()
定时器调用实例1
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scripttype="text/javascript">
window.onload= function(){
//获取count
var count =document.getElementById("count");
//使count中的内容，自动切换
/*
* JS的程序的执行速度是非常非常快的
* 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
*/
/*for(vari=0 ; i<10000 ; i++){
count.innerHTML= i;
alert("hello");
}*/
/*
*setInterval()
* - 定时调用
* - 可以将一个函数，每隔一段时间执行一次
* - 参数：
* 1.回调函数，该函数会每隔一段时间被调用一次
* 2.每次调用间隔的时间，单位是毫秒
*
* - 返回值：
* 返回一个Number类型的数据
* 这个数字用来作为定时器的唯一标识
*/
var num = 1;
var timer =setInterval(function(){
count.innerHTML= num++;
if(num ==11){
//关闭定时器
clearInterval(timer);
}
},1000);
//console.log(timer);
//clearInterval()可以用来关闭一个定时器
//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
//clearInterval(timer);
};
</script>
</head>
<body>
<h1id="count"></h1>
</body>
</html>
发表评论 取消回复