JavaScript小白教程7浏览器对象模型 BOM
Posted jiatianyi
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript小白教程7浏览器对象模型 BOM相关的知识,希望对你有一定的参考价值。
javascript Window - 浏览器对象模型
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。页面就是一个窗口
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
Window 尺寸(窗口的大小:长宽)
其他 Window 方法
一些其他方法:
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息
window.screen对象在编写时可以不使用 window 这个前缀
一些属性:
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度
JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
Window Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子:
一些实例:
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http: 或 https:
Window Location Href(方法)
location.href 属性返回当前页面的 URL。
<script>
document.write(location.href);
</script>
Window Location Pathname
location.pathname 属性返回 URL 的路径名
<script>
document.write(location.pathname);
</script>
Window Location Assign
location.assign() 方法加载新的文档
下面这是是加载另一个页面,url相当于跳转到那个页面的链接
<body>
<script>
function newDoc()
window.location.assign("https://www.runoob.com")
</script>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
JavaScript Window History
window.history 对象包含浏览器的历史
Window History
window.history对象在编写时可不使用 window 这个前缀。
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
一些方法:
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同
<body> <div id="example"></div> <script> txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>"; txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>"; txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬件平台: " + navigator.platform + "</p>"; txt+= "<p>用户代理: " + navigator.userAgent + "</p>"; txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerhtml=txt; </script> </body>
输出结果:
浏览器代号: Mozilla
浏览器名称: Netscape
浏览器版本: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
启用Cookies: true
硬件平台: Win32
用户代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
用户代理语言: undefined
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作
<body> <script> function myFunction() alert("你好,我是一个警告框!"); </script> <input type="button" onclick="myFunction()" value="显示警告框" /> </body>
确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时,用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true, 如果点击 "取消", 确认框返回 false。
<body> <p>点击按钮,显示确认框。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() var x; var r=confirm("按下按钮!"); if (r==true) x="你按下了\"确定\"按钮!"; else x="你按下了\"取消\"按钮!"; document.getElementById("demo").innerHTML=x; </script> </body>
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
<body> <p>点击按钮查看输入的对话框。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() var x; var person=prompt("请输入你的名字","Harry Potter"); if (person!=null && person!="") x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; </script> </body>
换行
弹窗使用 反斜杠 + "n"(\n) 来设置换行。
<body> <p>点击按钮在弹窗总使用换行。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> <script> function myFunction() alert("Hello\nHow are you?"); </script> </body>
语法
window.alert() 方法可以不带上window对象,直接使用alert()方法。
通常都不带前面的widow.直接写成alert();
JavaScript 一个设定的时间间隔之后来执行代码.我们称之为计时事件
JavaScript 计时事件
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 在指定的毫秒数后执行指定代码。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
<body> <p>单击按钮每3秒出现一个“Hello”警告框。</p> <p>再次点击警告框,经过3秒出现新的警告框,这将一直执行 ...</p> <button onclick="myFunction()">点我</button> <script> function myFunction() setInterval(function()alert("Hello"),3000); </script> </body>
<body> <p>在页面显示一个时钟</p> <p id="demo"></p> <script> var myVar=setInterval(function()myTimer(),1000); function myTimer() var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; </script> </body>
如何停止执行?
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
<body> <p>页面上显示时钟:</p> <p id="demo"></p> <button onclick="myStopFunction()">停止</button> <script> var myVar=setInterval(function()myTimer(),1000); function myTimer() var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; function myStopFunction() clearInterval(myVar); </script> </body>
setTimeout() 方法
<body> <p>点击第一个按钮等待3秒后出现"Hello"弹框。</p> <p>点击第二个按钮来阻止第一个函数运行。(你必须在3秒之前点击它)。</p> <button onclick="myFunction()">点我</button> <button onclick="myStopFunction()">停止弹框</button> <script> var myVar; function myFunction() myVar=setTimeout(function()alert("Hello"),3000); function myStopFunction() clearTimeout(myVar); </script> </body>
以上是关于JavaScript小白教程7浏览器对象模型 BOM的主要内容,如果未能解决你的问题,请参考以下文章