1.window对象BOM 的核心是 window 对象表示浏览器的实例。window 对象在浏览器中有两重身份一个是 ECMAScript 中的 Global 对象另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对 象、变量和函数都以 window 作为其 Global 对象都可以访问其上定义全局方法。1.Global作用域因为 window 对象被复用为 ECMAScript 的 Global 对象所以通过 var 声明的所有全局变量和函数都会变 成 window 对象的属性和方法。比如script var name zhangsan; var sayName function () { console.log(this.name); } console.log(window.name); //zhangsan sayName(); //zhangsan window.sayName(); //zhangsan /script这里变量 name 和函数 sayName()被定义在全局作用域中它们自动成为了 window 对象的成员。因 此变量 name 可以通过 window.name 来访问而函数 sayName()也可以通过 window.sayName()来访 问。因为 sayName()存在于全局作用域this.name 映射到 window.name所以就可以显示正确的结果 了。2.Window窗口窗口位置screenLeft和screenTop 属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)screenX和screenY 属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持火狐可以使用此属性)pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。窗口大小innerWidth 页面视图区的宽度innerHeight 页面视图区的高度outerWidth 浏览器窗口的宽度outerHeight 浏览器窗口的高度screen对象屏幕总宽度/高度(像素单位): screen.width screen.height可用宽度/高度(像素单位): screen.availWidth screen.availHeight颜色深度: screen.colorDepth颜色分辨率: screen.pixelDepth3.Window open()window.open()方法可以用于导航到指定 URL也可以用于打开新浏览器窗口。这个方法接收 4个参数 要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔 值。通常调用这个方法时只传前 3 个参数最后一个参数只有在不打开新窗口时才会使用。语法 window.open(URL,name,specs,replace)URL 地址name 可选。指定target属性或窗口的名称。支持以下值_blank - URL加载到一个新的窗口。这是默认_parent - URL加载到父框架_self - URL替换当前页面_top - URL替换任何可加载的框架集name - 窗口名称specs 逗号分隔replaceOptional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目还是替换浏览历史 中的当前条目。支持下面的值true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。button onclickopenWindow()打开新窗口/button button onclickcloseWindow()关闭窗口/button script function openWindow() { // 设置一个全局变量接收新窗口的打开 w window.open(https://www.baidu.com, _blank, width600,height600, false); // 调整窗口大小 浏览器窗口的新高度和新宽度 w.resizeTo(400,400); // 移动窗体 接受的是新位置的x和y坐标值 w.moveTo(100, 100); } function closeWindow() { // 关闭窗口 w.close() } /script4.系统对话框使用 alert()、confirm()和 prompt()方法可以让浏览器调用系统对话框向用户显示消息。这些对话框与 浏览器中显示的网页无关而且也不包含 HTML。它们的外观由操作系统或者浏览器决定无法使用 CSS 设置。此外这些对话框都是同步的模态对话框即在它们显示的时候代码会停止执行在它们 消失以后代码才会恢复执行。alert() 警告框用法 alert(我是警告框)‘confirm() 确认框通以判断 confirm()方法的返回值true 表示单击了 OK 按钮false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。script var result confirm(你确定吗?); if (result) { console.log(确定); }else{ console.log(取消); } /scriptprompt() 提示框 。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按 钮提示框还会显示一个文本框让用户输入内容。调用 prompt(你叫什么名字?)如果用户单击了 OK 按 钮则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮或者对话框被关闭则 prompt()会 返回 null。script var result prompt(你叫什么名字?); if (result) { console.log(result); }else{ console.log(取消); } /script5.locationlocation对象是最有用的BOM对象之一提供了与当前窗口中加载的文档有关的信息还提供一些导航 功能。 location是个神奇的对象既是window的对象也是document的对象。经过我们的对比发现直接使用 location对象也可以。script console.log(window.location document.location); //true console.log(location document.location); //true console.log(location window.location); /script属性host 返回服务器名称和端口号hostname 返回不带端口号的服务器名称href 返回当前加载页面的完整URLpathname 返回URL的目录和文件名port 返回URL中指定的端口号protocol 返回页面使用的协议search 方法 返回URL的查询字符串。这个字符串以问号开头方法 assign()传递一个url参数打开新url并在浏览记录中生成一条记录。replace() 参数为一个url结果会导致浏览器位置改变但不会在历史记录中生成新记录。reload() 重新加载当前显示的页面参数可以为boolean类型默认为false表示以最有效方式重新加载可能 从缓存中直接加载。如果参数为true强制从服务器中重新加载。button跳转页面/button button替换页面/button button刷新页面/button script var btn document.getElementsByTagName(button); btn[0].onclick function () { location.assign(./test2.html) } btn[1].onclick function () { location.replace(./test2.html) } btn[2].onclick function () { location.reload() } /script6.history对象length 返回历史列表中的网址数注意Internet Explorer和Opera从0开始而Firefox、Chrome和Safari从1开始。back() 加载 history 列表中的前一个 URLforward() 加载 history 列表中的下一个 URLgo() 加载 history 列表中的某个具体页面负数表示向后跳转正数表示向前跳转。7.间歇调用和超时调用javascript是单线程语言但是可以通过超时值和间歇时间来调度代码在特定时刻执行。 setTimeout() 该方法返回一个数值ID表示超时调用这个超时调用ID是计划执行代码的唯一标识符通过它来取消超 时调用。可以通过clearTimeout(ID);参数 1.要执行的代码 2.以毫秒表示的时间。 例如在1秒后执行输出语句script var id setTimeout(() { console.log(Hello World); }, 1000); console.log(id); // 清除超时调用 clearTimeout(id); /scriptsetInterval() 按照指定的时间间隔重复执行代码直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇 调用ID该ID可以用户在将来某个时刻取消间歇调用。参数 1.要执行的代码 2.以毫秒表示的时间。 如动态显示时间script var div document.createElement(div); // 间歇调用 var id setInterval(() { div.innerHTML new Date().toLocaleString(); }, 1000); document.body.appendChild(div); // 清除计时器 clearInterval(id); /script
BOM-window对象
1.window对象BOM 的核心是 window 对象表示浏览器的实例。window 对象在浏览器中有两重身份一个是 ECMAScript 中的 Global 对象另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对 象、变量和函数都以 window 作为其 Global 对象都可以访问其上定义全局方法。1.Global作用域因为 window 对象被复用为 ECMAScript 的 Global 对象所以通过 var 声明的所有全局变量和函数都会变 成 window 对象的属性和方法。比如script var name zhangsan; var sayName function () { console.log(this.name); } console.log(window.name); //zhangsan sayName(); //zhangsan window.sayName(); //zhangsan /script这里变量 name 和函数 sayName()被定义在全局作用域中它们自动成为了 window 对象的成员。因 此变量 name 可以通过 window.name 来访问而函数 sayName()也可以通过 window.sayName()来访 问。因为 sayName()存在于全局作用域this.name 映射到 window.name所以就可以显示正确的结果 了。2.Window窗口窗口位置screenLeft和screenTop 属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)screenX和screenY 属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持火狐可以使用此属性)pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。窗口大小innerWidth 页面视图区的宽度innerHeight 页面视图区的高度outerWidth 浏览器窗口的宽度outerHeight 浏览器窗口的高度screen对象屏幕总宽度/高度(像素单位): screen.width screen.height可用宽度/高度(像素单位): screen.availWidth screen.availHeight颜色深度: screen.colorDepth颜色分辨率: screen.pixelDepth3.Window open()window.open()方法可以用于导航到指定 URL也可以用于打开新浏览器窗口。这个方法接收 4个参数 要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔 值。通常调用这个方法时只传前 3 个参数最后一个参数只有在不打开新窗口时才会使用。语法 window.open(URL,name,specs,replace)URL 地址name 可选。指定target属性或窗口的名称。支持以下值_blank - URL加载到一个新的窗口。这是默认_parent - URL加载到父框架_self - URL替换当前页面_top - URL替换任何可加载的框架集name - 窗口名称specs 逗号分隔replaceOptional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目还是替换浏览历史 中的当前条目。支持下面的值true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。button onclickopenWindow()打开新窗口/button button onclickcloseWindow()关闭窗口/button script function openWindow() { // 设置一个全局变量接收新窗口的打开 w window.open(https://www.baidu.com, _blank, width600,height600, false); // 调整窗口大小 浏览器窗口的新高度和新宽度 w.resizeTo(400,400); // 移动窗体 接受的是新位置的x和y坐标值 w.moveTo(100, 100); } function closeWindow() { // 关闭窗口 w.close() } /script4.系统对话框使用 alert()、confirm()和 prompt()方法可以让浏览器调用系统对话框向用户显示消息。这些对话框与 浏览器中显示的网页无关而且也不包含 HTML。它们的外观由操作系统或者浏览器决定无法使用 CSS 设置。此外这些对话框都是同步的模态对话框即在它们显示的时候代码会停止执行在它们 消失以后代码才会恢复执行。alert() 警告框用法 alert(我是警告框)‘confirm() 确认框通以判断 confirm()方法的返回值true 表示单击了 OK 按钮false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。script var result confirm(你确定吗?); if (result) { console.log(确定); }else{ console.log(取消); } /scriptprompt() 提示框 。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按 钮提示框还会显示一个文本框让用户输入内容。调用 prompt(你叫什么名字?)如果用户单击了 OK 按 钮则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮或者对话框被关闭则 prompt()会 返回 null。script var result prompt(你叫什么名字?); if (result) { console.log(result); }else{ console.log(取消); } /script5.locationlocation对象是最有用的BOM对象之一提供了与当前窗口中加载的文档有关的信息还提供一些导航 功能。 location是个神奇的对象既是window的对象也是document的对象。经过我们的对比发现直接使用 location对象也可以。script console.log(window.location document.location); //true console.log(location document.location); //true console.log(location window.location); /script属性host 返回服务器名称和端口号hostname 返回不带端口号的服务器名称href 返回当前加载页面的完整URLpathname 返回URL的目录和文件名port 返回URL中指定的端口号protocol 返回页面使用的协议search 方法 返回URL的查询字符串。这个字符串以问号开头方法 assign()传递一个url参数打开新url并在浏览记录中生成一条记录。replace() 参数为一个url结果会导致浏览器位置改变但不会在历史记录中生成新记录。reload() 重新加载当前显示的页面参数可以为boolean类型默认为false表示以最有效方式重新加载可能 从缓存中直接加载。如果参数为true强制从服务器中重新加载。button跳转页面/button button替换页面/button button刷新页面/button script var btn document.getElementsByTagName(button); btn[0].onclick function () { location.assign(./test2.html) } btn[1].onclick function () { location.replace(./test2.html) } btn[2].onclick function () { location.reload() } /script6.history对象length 返回历史列表中的网址数注意Internet Explorer和Opera从0开始而Firefox、Chrome和Safari从1开始。back() 加载 history 列表中的前一个 URLforward() 加载 history 列表中的下一个 URLgo() 加载 history 列表中的某个具体页面负数表示向后跳转正数表示向前跳转。7.间歇调用和超时调用javascript是单线程语言但是可以通过超时值和间歇时间来调度代码在特定时刻执行。 setTimeout() 该方法返回一个数值ID表示超时调用这个超时调用ID是计划执行代码的唯一标识符通过它来取消超 时调用。可以通过clearTimeout(ID);参数 1.要执行的代码 2.以毫秒表示的时间。 例如在1秒后执行输出语句script var id setTimeout(() { console.log(Hello World); }, 1000); console.log(id); // 清除超时调用 clearTimeout(id); /scriptsetInterval() 按照指定的时间间隔重复执行代码直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇 调用ID该ID可以用户在将来某个时刻取消间歇调用。参数 1.要执行的代码 2.以毫秒表示的时间。 如动态显示时间script var div document.createElement(div); // 间歇调用 var id setInterval(() { div.innerHTML new Date().toLocaleString(); }, 1000); document.body.appendChild(div); // 清除计时器 clearInterval(id); /script
