[Java web编程]第3章 JavaScript脚本语言（Javascript BOM）

什么是BOM

BOM（Browser Object Model）即浏览器对象模型。

BOM提供了独立于内容而与浏览器窗口进行交互的对象；

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

(1)window对象

一、弹框的方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript">

    // 有返回值：如果点击确认返回true  如果点击取消 返回false
    var res = confirm("您确认要删除吗？");
	alert(res);
	
	// 有返回值：如果点击确认返回输入框的文本 点击取消返回null
    var res =  prompt("请输入密码？");
	alert(res);
	
	// 没有返回值，返回undefined
    var res = alert("xxx");
	alert(res);
	
	

</script>


</head>
<body>

</body>
</html>

二、open方法：

重新打开一个窗口，流氓方法

window.open("url地址");			
open("../jsCore/demo10.html");

三、定时器：

setTimeout(函数,毫秒值);

setTimeout(
         function(){
             alert("xx");
         },
         3000
);

clearTimeout(定时器的名称);

小例子递归测试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript">

	// 毫秒值
	 /*setTimeout(
		function(){
			alert("xx");
		},
		3000
	);*/

	 // 递归循环演示，程序总不使用，有专门的方法使用interval
	var timer;
	var fn = function(){
		alert("x");
		timer = setTimeout(fn,2000);// 递归每2秒弹框
	};
	function closer(){
		clearTimeout(timer);// 停止弹框
	};
	fn();
	
	
</script>


</head>
<body>
	<input type="button" value="button" onclick="closer()">
</body>
</html>

setInterval(函数,毫秒值);

clearInterval(定时器的名称)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript">

	var timer = setInterval(
		function(){
			alert("nihao");
		},
		2000
	);
	var closer = function(){
		clearInterval(timer);
	};
	
	
</script>


</head>
<body>
	<input type="button" value="button" onclick="closer()">
</body>
</html>

需求：注册后5秒钟跳转首页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript">
	var time = 5;
	var timer;
	timer = setInterval(
		function(){
			var second = document.getElementById("second");
			if(time>=1){
				second.innerHTML = time;
				time--;
			}else{
				clearInterval(timer);
				location.href="../jsCore/demo10.html";
			}
		},
		1000
	);
</script>


</head>
<body>
	恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
</body>
</html>

四、location
location.href="url地址"; 点击跳转

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

对于Location对象，我们只需要掌握href这个属性就可以，它的作用是设置或返回完整的URL。

五、history

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="demo7.html">后一页</a>
	<input type="button" value="上一页" onclick="history.go(-1)">
	<input type="button" value="下一页" onclick="history.go(1)">
</body>
</html>

[Java web编程]第3章 JavaScript脚本语言（Javascript BOM）

(1)window对象

猜你喜欢