😄在JavaScript小白入门篇(一、基本语法详解) BOM(Browser Object Model): 官方解释是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构. 1、Window：窗口对象 接下来我们来慢慢介绍这五种BOM对象,我们主要介绍三种经常用到的对象 Window、History、Location对象,其他两个对象我们简单过一下 Window 对象表示浏览器中打开的窗口 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象 1、对象的创建: 2、方法: window对象方法有很多 看图片肯定很懵,我们来把他们简单分类一下 方法演示 演示截图: 按打开页面按钮则弹出百度窗口,点击关闭该页面按钮则将百度窗口进行关闭 (2)、与弹出框有关的方法： 方法演示 演示截图: (3)、与定时器⏱有关的方法 setTimeout( 1 , 2 ) 在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 演示截图: 3、属性 (1)、 获取其他BOM对象： (2)、 获取DOM对象 如上面代码里面也有的 4、特点 1、获取对象 (1)、通过window.history来获取(上面window属性中有讲到) ***2、方法***有三个 注意⚠️ history只是适用于当前页面的记录,而不是我们一般查询的历史记录 代码演示 演示截图 3、属性 1、获取对象 (1)、通过window.location来获取 2、方法 3、属性 演示截图: 把用户带到一个新的地址 其他属性 Navigator 对象包含有关浏览器的信息 Screen 对象包含有关客户端显示屏幕的信息。 注释: 没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。 每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。 好啦,那我们JavaScript小白入门篇(二、高级语法之 BOM 详解)就结束啦,喜欢的朋友可以支持一下,如果文章中有什么错误欢迎大家指出来,谢谢。
我们了解了ECMAScript的基本语法,那么现在我们就来学习JavaScript中的BOM 一、BOM的概念
简单的理解就是
*将浏览器的各个组成部分封装成对象。二、BOM的组成
2、Navigator：浏览器对象
3、Screen：显示器屏幕对象
4、History：历史记录对象
5、Location：地址栏对象三、对象的介绍
1、Window 对象
⚠️ Window对象不需要创建可以直接使用 window来使用。 window.方法名();window.alert("弹出窗口"); window.close();//关闭浏览器窗口。 
window方法
(1)、与打开关闭相关的方法:
⚠️ 谁调用了这个方法 ，那么它就会关闭调用这个方法的窗口
⚠️返回新的Window对象,也就是调用这个方法会弹出新的窗口//注意⚠️这里省略了一些必要的标签,小伙伴们可以自己加上 <body> <input id="button1" type="button" value="打开新页面"> //创建一个为 打开新页面 的按钮 <input id="button2" type="button" value="关闭该页面">//创建一个为 关闭该页面 的按钮 <script> var openbt; var elementById1 = document.getElementById("button1"); //⚠️还没学DOM的这一步可能会看不懂 ,可以先理解为通过元素的id获取元素对象 elementById1.onclick = function () { //对硬件获取按钮button1对象进行绑定单击事件,通过鼠标点击该按钮就会触发该功能 openbt = open("https://www.baidu.com");//打开小度 }; var elementById2 = document.getElementById("button2");//同理 elementById2.onclick = function () { openbt.close(); //关闭该页面 }; </script> </body>
如果用户点击确定按钮，则方法返回 true
如果用户点击取消按钮，则方法返回 false
返回值：获取用户输入的值<script> var str ="hello 朋友你还好吗" alert(str); ///等于window.alert(s) 为什么可以不用window进行调用,我们下面会有讲解 var flag = confirm("您确定要退出了吗？") ; if(flag){ //按下确定按钮 alert("好的，see you again"); } else{ //按下取消按钮 alert("你手抖，哈哈!"); } var s = prompt("请输入用户名"); ///会弹出提示用户输入的对话框 alert(s); ///将用户输入对话框的信息弹出来 </script>
* 参数：
1. JavaScript代码 or 方法对象
2. 毫秒值
该方法的返回值为：唯一标识，用于取消定时器<script> //设置一个没有重复的定时器⏲️,2秒钟就响 var id1 = setTimeout("fun();",2000); //传入JavaScript代码 // clearTimeout(id1); 若调用clearTimeout方法并将id1传进去则该定时器不起作用 function fun() { ///fun()函数 alert("铃声响了~~"); } //设置一个🈶️重复的定时器⏲️,2秒钟就响一次 var id2 = setInterval(fun,2000);///传入方法对象 // clearInterval(id2);同理 </script>
window.document.getElementById("id"); //通过id获取对象 window.document.write("你好"); window.history;
(1)、 Window对象 可以不创建直接使用window使用 如: window.方法名();
(2)、 window引用可以省略。 方法名();alert(); // 等于window.alert(); confirm(); //等于window.confirm(); 2、History对象
(2)、history (可以不创建,直接使用history来使用)
⚠️参数为正数时: 前进几个历史记录
参数为负数时: 后退几个历史记录
⚠️区分html 和 JavaScript 的注释
代码只包含history相关内容<body> <input type="button" value="forward" id="btn"> <input type="button" value="获取前进/后退几个历史记录" id="btn2"> <!--按钮--> <a id="a" href="Linyous.html">前往8</a> <!--html的注释 定义一个超链接,指向Linyous.html --> <script> var btn = document.getElementById("btn"); //获取对象 btn.onclick = function () { //绑定单击事件 history.forward(); //上一个历史记录 } var btn2 = document.getElementById("btn2"); btn2.onclick = function () { history.go(1); //回到前进第一个历史记录 } </script> </body> 
var length = history.length; alert(length); 3、Location对象
(2)、location
location.reload(); location.assign(); location.replace(new url);
属性也很多我们只演示其中一个
<body> <input id="btn1" type="button" value="去百度"> <script> var btn1 = document.getElementById("btn1"); btn1.onclick =function () { location.href = "https://www.baidu.com"; } </script>
点击按钮则去百度
4、Navigator对象
注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。5、Screen对象
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
91