BOM
描述
- BOM表示为浏览器对象模型
- BOM是由一系列对象构成的，这些对象可以理解为是浏览器提供的
Window对象
- 表示当前运行HTML页面的浏览器
- Window对象既是JavaScript访问浏览器的窗口，也是ECMAScript规范中的全局对象(Global对象)
<body>
<script>
// 测试window对象
console.log(window);
var v = 100;/* 全局变量 */
function fn(){/* 函数 */
console.log('this is funciton');
}
// 作为全局变量或函数使用的话
console.log(v);
fn();
// 全局变量是window对象的属性；函数是window对象的方法
console.log(window.v);
window.fn();
// 预定义函数是Global对象的方法 - 在浏览器环境中，window对象代表Global对象
parseInt();
// window对象的属性或方法调用 - 允许省略"window."
window.parseInt();
</script>
</body>window对象的属性
<script>
// BOM中其他对象是作为window对象的属性存在
console.log(window.navigator);
console.log(window.location);
console.log(window.history);
console.log(window.document);
// window对象的self属性 - 表示window对象本身(是只读属性)
console.log(window);
console.log(window.self);// 还是window对象
// window对象的innerWidth和innerHeight - 浏览器窗口的内部宽度和高度
console.log(window.innerWidth, window.innerHeight);
</script>window对象的方法
<body>
<!-- 点击按钮时，打开提示框 -->
<button id="btn">按钮</button>
<div id="dialog"></div>
<script>
// 提示框
// window.alert('xxxxxx');
// 确定框
// var flag = window.confirm('你确定退出吗？');
// alert(flag);
// 输入框
/*var result = window.prompt('请输入你的用户名:');
alert(result);*/
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
var dialog = document.getElementById('dialog');
dialog.style.display = 'block';
});
</script>
</body>navigator对象
- navigator对象就是判断用户的浏览器以及操作系统
- 通过navigator对象的userAgent属性来判断
<body>
<script>
console.log('浏览器的代码名: ' + navigator.appCodeName);
console.log('浏览器的名称: ' + navigator.appName);
console.log('浏览器的平台和版本信息: ' + navigator.appVersion);
console.log('运行浏览器的操作系统平台: ' + navigator.platform);
console.log(navigator.userAgent);
</script>
</body>定时器
- 可以分为延迟执行和周期执行
延迟执行
- 表示将指定的代码延迟特定的时间后在进行执行
setTimeout()方法
-
表示设置一个定时器
- 用于在指定时间后显示指定内容
-
该方法接收两个参数
- 第一个参数 - 一个函数(表示延迟执行代码的逻辑)
- 第二个参数 - 表示延迟执行的时间(单位为毫秒 - 1000毫秒=1秒)
- 该方法具有返回值 - 表示当前定时器的标识
- 注意 - 定时器会打乱代码的默认执行流程
clearTimeout()方法
- 表示清除指定的定时器
- 该方法通过定时器的标识来清除指定的定时器
示例代码
<script>
/* 测试代码 */
console.log( '这是测试...' );
/* 添加延迟执行的定时器 - 该方法是Window对象下的方法，所以可以省略 [Window.] */
var s = setTimeout( function () {
console.log( '这也是测试...' );
}, 2000 );
/* 清除指定的定时器 */
clearTimeout( s );
/* 测试代码 */
console.log( '这还是测试...' );
</script>周期执行
- 表示将指定的代码每隔一段时间(定时器设置的时间)执行一次
- 周期执行会形成类似于循环语句中死循环的显示效果
setInterval()方法
-
表示设置一个定时器
- 用于在指定时间后显示指定内容
-
该方法接收两个参数
- 第一个参数 - 一个函数(表示延迟执行代码的逻辑)
- 第二个参数 - 表示延迟执行的时间(单位为毫秒 - 1000毫秒=1秒)
- 该方法具有返回值 - 表示当前定时器的标识
- 注意 - 定时器会打乱代码的默认执行流程
clearTimeout()方法
- 表示清除指定的定时器
- 该方法通过定时器的标识来清除指定的定时器
示例代码
<script>
/* 测试代码 */
console.log( '这是测试...' );
/* 添加周期执行的定时器 - 该方法是Window对象下的方法，所以可以省略 [Window.] */
var s = setInterval( function () {
console.log( '这也是测试...' );
}, 2000 );
/* 清除指定的定时器 */
clearTimeout( s );
/* 测试代码 */
console.log( '这还是测试...' );
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。