JS基础之BOM对象
BOM 对象
JavaScript分为 ECMAScript,DOM,BOM。
BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
使 JavaScript 有能力与浏览器“对话”。
DOM (Document Object Model)是指文档对象模型,并非一个对象。
window、document都是一个实例对象,他们都属于Object,表示浏览器中打开的窗口。
1. window对象
window 对象表示一个浏览器窗口。
在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算。也就是说,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来使用。
例如,可以只写 document,而不必写 window.document
同样,可以把当前窗口对象的方法当作函数来使用,如只写 alert(),而不必写 Window.alert()。
====================================
window对象:
1. 所有浏览器都支持 window 对象。
2. 概念上讲:一个html文档对应一个window对象.
3. 功能上讲: 控制浏览器窗口的.
4. 使用上讲: window对象不需要创建对象,直接使用即可.
====================================
window对象方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
示例:
// 每隔一段时间就执行一次相应函数 var timer = setInterval( function(){document.write('你个大SX');}, 1000); // 取消setInterval设置 clearInterval(timer); // 在指定时间之后执行一次相应函数 var timer = setInterval( function(){document.write('你个大SX');}, 1000); // 取消setTimeout设置 clearTimeout(timer);
-
alert("是否离开页面?"); >>>>>>>>>>> var res = prompt('提示信息', '输入信息') // 参数2: 默认值 console.log(res); //返回值是:输入的信息 >>>>>>>>>>>> open方法 打开和一个新的窗口 并 进入指定网址. 参数1 : 网址. 参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数. open("http://www.baidu.com"); open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
示例:猜大小
var num = Math.round(Math.random()*100); function acceptInput(){ //2.让用户输入(prompt) 并接受 用户输入结果 var userNum = prompt("请输入一个0~100之间的数字!","0"); //3.将用户输入的值与 随机数进行比较 if(isNaN(+userNum)){ //用户输入的无效(重复2,3步骤) alert("请输入有效数字!"); acceptInput(); } else if(userNum > num){ //大了==> 提示用户大了,让用户重新输入(重复2,3步骤) alert("您输入的大了!"); acceptInput(); }else if(userNum < num){ //小了==> 提示用户小了,让用户重新输入(重复2,3步骤) alert("您输入的小了!"); acceptInput(); }else{ //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm). var result = confirm("恭喜您!答对了,是否继续游戏?"); if(result){ //是 ==> 重复123步骤. num = Math.round(Math.random()*100); acceptInput(); }else{ //否==> 关闭窗口(close方法). close(); } } } acceptInput();
2. window 子对象
1、 navigator 对象
浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navagator.plat // 浏览器运行所在的操作系统
2、 screen 对象
屏幕对象,不常用.
3、 history 对象
浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以用来前进或后退一个页面
history.forward() // 前进一页 history.back() // 后退一页 history.go(n) // 前进n页
4、 location 对象
location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载(刷新)页面
--
location.assign(URL) # 跳转指定URL<br>location.href='/classes/' # 要跳转的页面 location.replace(newURL) //注意与assign的区别,新的url页面替换当前url页面