BOM

1.BOM编程相关介绍

全称 Browser Object Model,浏览器对象模型。
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
为了便于对浏览器的操作,javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 或 每次出现时被自动创建。
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述,如果我们要操作浏览器的一些属性,我就可以通过浏览器对象模型 的对象进行操作。
window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象

2.window对象

window对象常用的方法:
open() 打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveBy() 相对于原来的窗口移动指定的x、y值。
setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。
注意: 使用window对象的任何属性与方法都可以省略window对象不写的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<input type="button" value="open" onclick="Testopen()" />
		<input type="button" value="resizeTo" onclick="TestresizeTo()" />
		
		<input type="button" value="moveTo" onclick="TestmoveTo()" />
		<input type="button" value="moveBy" onclick="TestmoveBy()" />
		
		<input type="button" value="clearInterval" onclick="TestclearInterval()" />
		
	</body>
	
	
	<script>
			function Testopen(){
				window.open("ad.html","_blank","location=no,toolbar=no");
			}
			
			function TestresizeTo(){
				window.resizeTo("400","400");
			}
			
			function TestmoveTo(){
				window.moveTo("500","200");
			}
			
			function TestmoveBy(){
				for(var i=0;i<100;i++){
					window.moveBy(50,0);//右移
					window.moveBy(0,50);//下移
					window.moveBy(-50,0);//左移
					window.moveBy(0,-50);//上移
				}
			}
			
			//var id = window.setInterval("Testopen()",3000);
			
			function TestclearInterval(){
				window.clearInterval(id);
			}
			
			//window.setTimeout("Testopen()",1000);
			
	</script>
</html>


ad.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/ad.png" /><font color="blue" size="7">广告来了....</font>
	</body>
	
</html>

3.常用事件

鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body <!--onload="showPage()"-->>
	
		<input type="button" value="单击" onclick="Testonclick()" />
		
		<input type="button" value="双击" ondblclick="Testondblclick()" />
		
		<input type="button" value="按下鼠标" onmousedown="Testonmousedown()" />
		
		<input type="button" value="释放鼠标" onmouseup="Testonmouseup()" />
		
		<input type="button" value="显示时间" onmousemove="Testonmousemove()" onmouseout="Testonmouseout()" />
		<span id="time"></span>
		
		<hr>
		
		用户名:<input type="text" id="username" name="username" onfocus="Testonfocus()" onblur="Testonblur()" />
		<span id="user"></span>
		密码:<input type="password" name="password"  />
		
		<select onchange="Testonchange()">
			<option>上海</option>
			<option>北京</option>
			<option>深圳</option>
		</select>
		
		<form action="ad.html" onsubmit="Testonsubmit()">
			<input type="submit" />
		</form>
	
	</body>
	
	<script>
	
		function Testonsubmit(){
			alert("表单将要被提交..")
		}
	
		function Testonchange(){
			alert("城市变了..")
		}
	
		function Testonblur(){
			var usernameNode = document.getElementById("username");
			var username = usernameNode.value;
			if(username.length<=6){
				document.getElementById("user").innerHTML  = "用户名长度不足六位".fontcolor("red");
			}
		}
	
		function Testonfocus(){
			document.getElementById("user").innerHTML = "用户名长度必须大于六位".fontcolor("green");
		}
		
		
		function showPage(){
			document.write("page");
		}
		
		function Testonclick(){
			alert("单击");
		}
		
		function Testondblclick(){
			alert("双击");
		}
		
		function Testonmousedown(){
			alert("按下鼠标");
		}
		
		function Testonmouseup(){
			alert("释放鼠标");
		}
		
		function Testonmousemove(){
			document.getElementById("time").innerHTML = new Date().toLocaleString();
		}
		
		function Testonmouseout(){
			document.getElementById("time").innerHTML = "";
		}
	
	</script>
</html>

4.location对象

location对象相关
Location 对象是由 JavaScript runtime engine 自动创建的,包含有关当前 URL 的信息。
location中的重要方法:
href属性 设置或获取整个 URL 为字符串。
reload() 重新装入当前页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		<input type="button" value="新浪网" onclick="writeSina()" />
		
		<input type="button" value="刷新" onclick="refresh()" />
	</body>
	
	<script>
		
		document.writeln(location.href+"<br>");
		document.writeln(location.host+"<br>");
		document.writeln(location.hostname+"<br>");
		document.writeln(location.port+"<br>");
		document.writeln(location.protocol+"<br>");
		
		
		function writeSina(){
			location.href = "http://www.sina.com.cn";
		}
		
		function refresh(){
			location.reload();
		}
		
	</script>
</html>

5.screen对象

screen对象相关
Screen 对象是由 JavaScript runtime engine 自动创建的,包含有关客户机显示屏幕的信息。
Screen(屏幕)对象
availHeight 获取系统屏幕的工作区域高度,排除 Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	
	<script type="text/javascript">

			document.write("获取系统屏幕的工作区域高度:" + screen.availHeight + "<br/>");
			document.write("获取系统屏幕的工作区域宽度:" + screen.availWidth + "<br/>");
			document.write("获取屏幕的垂直分辨率:" + screen.height + "<br/>");
			document.write("获取屏幕的水平分辨率:" + screen.width + "<br/>");
			
	</script>
</html>

6.综合训练:随机点餐

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>

	<body onload="eat()">
		<center>
			<span id="food"></span>
			<hr />
			
			<input type="button" style="font-size: 50px;" value="暂停" onclick="stop()"/>
			
			<input type="button" style="font-size: 50px;" value="继续" onclick="star()"/>
			
		</center>
	</body>
	
	<script type="text/javascript">
			function eat() {
				var arr = ["盖浇饭", "油泼面", "米皮","兰州拉面"];
				//随机获取下标
				var index = Math.floor(Math.random() * arr.length);
				//获取数组中具体的数据
				var code = arr[index];
				
				var spanNode = document.getElementById("food");
				spanNode.innerHTML = code;
				//操作css样式
				spanNode.style.fontSize = "124px";
				spanNode.style.color = "red";
				spanNode.style.backgroundColor = "yellow";
			}
			
			var id = setInterval("eat()",100);
			
			function stop(){
				clearInterval(id);
			}
			
			function star(){
				location.reload();
			}
			
		</script>

</html>
posted @ 2021-08-27 17:40  码丁XIA  阅读(60)  评论(0)    收藏  举报