JavaScript BOM基础笔记（2017/06/05）

最新推荐文章于 2018-09-21 10:07:18 发布

麦客子

最新推荐文章于 2018-09-21 10:07:18 发布

阅读量361

点赞数

本文链接：https://blog.csdn.net/a911711054/article/details/72356196

版权

day21 jsBOM基础
1、windows对象
1.1 window对象（全局对象）
- 什么是BOM
BOM(browser object model)浏览器对象模型
- BOM的对象有
window、navigator、screen、history、location、document、event

- window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过
JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象（全局对象）
* 所有的全局变量和全局方法都被归在window上

1.2 window对象方法（alert-confirm-prompt）
语法：window.alert("content");
功能：显示带有一段消息和一个确认按钮的警告框

语法：window.confirm("message")
功能：显示一个带有指定消息和OK及取消按钮的对话框
返回值：如果用户点击确定按钮，则confirm()返回true
如果用户点击取消按钮，则confirm()返回false

语法：window.prompt("text,defaultText");
参数说明：
text:要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText:默认的输入文本
返回值：如果用户点击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box">
		<span>iphone6s</span>
		<input type="button" value="删除" id="btn">
	</div>
	<script>
		var age=15;
		function sayAge(){
			alert('我'+age);
		}
		//声明一个全局变量
		window.username="marry";//var username="marry";
		//声明一个全局方法
		window.sayName=function(){
			alert("我是"+this.username);
		}
		sayAge();
		window.sayName();

		//confirm
		//获取按钮
		var btn=document.getElementById("btn");
		btn.οnclick=function(){
		//弹出确认对话框
		var result=window.confirm("您确定要删除吗？");
		console.log(result);
		if(result){
			document.getElementById("box").style.display="none";
			}
		}
		
		//弹出输入框
		var message=prompt("请输入您的星座","天蝎座");
		console.log(message);
	</script>
</body>
</html>

1.3 window对象（open和close）
语法：window.open(pageURL,name,parameters)
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL:子窗口的路径
name:子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters:窗口参数（各参数用逗号分隔）

语法：window.close()
功能：关闭浏览器窗口

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>open</title>
</head>
<body>
<input type="button" value="退出" id="quit">
	<script>
		window.οnlοad=function(){
			//打开子窗口，显示newwindow.html
			window.open("newwindow.html","newwindow","width=400,height=200,top=0,toolbar=no,mebubar=no,scrollbars=no,location=no,statu=no");
			// left:窗口X轴坐标
			// top:窗口Y轴坐标
			// toolbar:是否显示浏览器的工具栏
			// menubar:是否显示菜单栏
			// scrollbars:是否显示滚动条
			// location:是否显示地址字段
			// status:是否添加状态栏

			//点击关闭当前窗口
			quit.οnclick=function(){
				window.close();
			}

		}
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>newwindow</title>
</head>
<body>
	<h1>hello window.open</h1>
</body>
</html>

1.4 window对象方法--定时器 setTimeout
JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序

- 超时调用
语法：setTimeout(code,millsec)
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：1.code:要调用的函数或执行的JavaScript代码串
2.millsec:在执行代码前需等待的毫秒数

- 清除超时调用
语法：clearTimeout(id_of_settimeout)
功能：取消由setTimeout()方法设置的timeout
参数说明：1.id_of_settimeout：由setTimeout()返回的ID的值，该值标识要取消的延迟执行代码块

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setTimeout</title>
</head>
<body>
	<script>
		//setTimeout("alert('hello')",4000);
		//自定义函数
		var fnCall=function(){
			alert("world");
		}
		//匿名函数
		//SetTimeout方法返回一个ID值通过它取消超时调用
		var timeout1=setTimeout(function(){
			alert("hello");
		},2000);
		clearTimeout(timeout1);
		//setTimeout(fnCall,5000);
	</script>
</body>
</html>

1.5 window对象方法--定时器setInterval
- 间歇调用
语法：setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：1.code:要调用的函数或者要执行的代码串
2.millisec:周期性执行或调用code之间的时间间隔，以毫秒计

- 清除间歇调用
语法：clearInterval(id_of_setinterval)
功能：取消setInterval()方法设置的interval

参数：1.id_of_setinterval:由setInterval()返回的ID值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setInterval</title>
</head>
<body>
<script>
	var intervalId=setInterval(function(){
		console.log("你好");
	},1000)


	//10秒之后停止打印
	// setTimeout(function(){
	// 	clearInterval(intervalId);
	// },10000);


	var num=1,
		max=10,
		timer=null;
	//每隔一秒钟num递增一次，直到num的值等于max清除
	// timer=setInterval(function(){
	// 	console.log(num);
	// 	num++;
	// 	if(num>max){
	// 		clearInterval(timer)
	// 	}
		
	// },1000)


	//使用超时调用实现
	function inCreamentNum(){
		console.log(num);
		num++;
		if(num<=max){
			setTimeout(inCreamentNum,1000);
		}else{
			clearTimeout(timer);
		}
	}
	timer=setTimeout(inCreamentNum,1000);
</script>
</body>
</html>

2.location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能
它既是window对象的属性，也是document对象的属性。

2.1 location对象的常用属性
语法：location.href
功能：返回当前加载页面的完整URL
说明：location.href与window.location.href等价

语法：location.hash
功能：返回URL中的hash(#号后跟零或多个字符)，如果不包含则返回空字符串

语法：location.host
功能：返回服务器名称和端口号（如果有）

语法：location.hostname
功能：返回不带端口号的服务器名称

语法：location.pathname
功能：返回URL中的目录和（或）文件名

语法：location.port
功能：返回URL中指定的端口，如果没有，返回空字符串
说明：假设网址为：locallhost:8080/hotel 那location.port值为8080

语法：location.protocol
功能：返回页面使用的协议

语法：location.search
功能：返回URL的查询字符串。这个字符串以问号开头

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>location.href</title>
	<style>
		.box1{height: 400px;background: #ccc}
		.box2{height: 400px;background: #666}
	</style>
</head>
<body>
	<div class="box1" id="top"></div>
	<div class="box2"></div>
	<input type="button" id="btn" value="返回顶部">
	<script>
		console.log(location.href);
		console.log(location.hash);
		var btn=document.getElementById("btn");
		btn.οnclick=function() {
            location.hash = "#top";
        }

		console.log(location.pathname);
	</script>
</body>
</html>

2.2 location对象
2.2.1 改变浏览器位置的方法
location.href属性

location对象其他属性也可改变URL：
location.hash
location.search

2.2.2 location.replace()
语法：location.replace(url)
功能：重新定向URL
说明：使用location.replace不会在历史记录中生成新记录

2.2.3 location.reload()
语法：location.reload()
功能：重新加载当前显示的页面
说明：location.reload()有可能从缓存中加载

location.reload(true)从服务器重新加载

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>location.href2</title>
</head>
<body>
	<input type="button" value="刷新" id="roload">
	<script>
		// setTimeout(function(){
		// 	location.href='test1.html';
		// 	//window.location='test1.html';
		// 	location.replace("test1.html");
		// },1000)
		document.getElementById("reload").οnclick=function(){
			location.reload(true);
		}
	</script>
</body>
</html>

编程练习：

（1）当点击”操作页面”按钮时，弹出确认框“刷新页面么？”

（2）当点击确认框的“确定”时，重新加载当前显示的页面

当点击确认框的”取消”时，打开慕课网网站，当前网页不能后退

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>location方法</title>
    </head>
    <body>
        <input type="button" value="操作页面" id="ck">
        <script type="text/javascript">
           var ck=document.getElementById("ck");
           ck.οnclick=function(){
               var result=window.confirm("确定刷新页面？");
               if(result){
                   location.reload();
               }
               else{
                   location.replace("http://www.imooc.com");
               }
           }
        </script>
    </body>
</html>

3、history对象
history对象保存了用户在浏览器中访问页面的历史记录
3.1 history对象方法(back)
语法：history.back()
功能：回到历史记录的上一步

说明：相当于使用了history.go(-1)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>back</title>
</head>
<body>
	<a href="index11.html">index11.html</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>这是index11.html</p>
	<p><input type="button" value="后退" id="btn"></p>
	<script>
		var btn=document.getElementById("btn");
		//点击btn按钮时回到历史记录的上一步
		btn.οnclick=function(){
			history.back();
		}
	</script>
</body>
</html>

3.2 history对象方法(forward)
语法：location.forward()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)

4、screen对象及属性
screen对象包含有关客户端显示屏幕的信息
语法：screen.availWidth
功能：返回可用的屏幕宽度
语法：screen.availHeight
功能：返回可用的屏幕高度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>screen</title>
</head>
<body>
	<script>
		// 获取窗口文档显示区的高度和宽度
		console.log("页面宽："+screen.availWidth);
		console.log("页面高："+screen.availHeight);

		// 获取显示屏幕的高度和宽度
		console.log("pageWidth:"+window.innerWidth);
		console.log("pageHeight:"+window.innerHeight);
	</script>
</body>
</html>

5、Navigator对象

UserAgent:用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>userAgent</title>
</head>
<body>
	<script>
	function getBrowser(){
		//获取userAgent属性
		var explorer = navigator.userAgent.toLowerCase(),browser;
		if(explorer.indexOf("msie")>-1){
			browser = "IE";
		}else if(explorer.indexOf("chrome")>-1){
			browser = "chrome";
		}else if(explorer.indexOf("opera")>-1){
			browser = "opera";
		}else if(explorer.indexOf("safari")>-1){
			browser = "safari";
		}
		return browser;

	}
		var explorer = getBrowser();
		console.log("您当前使用的是："+explorer+"浏览器");
	</script>
</body>
</html>

麦客子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript BOM基础笔记（2017/06/05）

day21 jsBOM基础1、windows对象1.1 window对象（全局对象）- 什么是BOMBOM(browser object model)浏览器对象模型- BOM的对象有window、navigator、screen、history、location、document、event- window window是浏览器的一个实例，在浏览器中，win
复制链接

扫一扫