1 BOM编程
1.1 入门
（上一节（3）中介绍的是JavaScript的基础语法，这一节介绍的是BOM编程）
BOM就是浏览器对象模型编程，通过javascript引擎提供的四个浏览器对象，操作浏览器，这叫BOM编程。
1.2 window对象（重要：主要掌握属性和方法）
window代表的是一个窗口。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window对象</title>
<script type="text/javascript">
/*
open(): 在一个窗口中打开页面
setInterval(): 设置定时器（执行n次）
setTimeout(): 设置定时器(只执行1次)
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
alert(): 提示框
confirm(): 确认提示框
propmt(): 输入提示框
注意：
因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。
*/
function testOpen(){
/*
参数一： 打开的页面
参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认）
参数三： 设置窗口参数。比如窗口大小，是否显示任务栏
*/
window.open("02.广告页面.html","_blank","width=300px;height=300px;toolbar=0");
}
var taskId;
function testInterval(){
/*
定时器： 每隔n毫秒调用指定的任务（函数）
参数一：指定的任务（函数）
参数二：毫秒数
*/
taskId = window.setInterval("testOpen()",3000);
}
function testClearInterval(){
/*清除任务
参数一：需要清除的任务ID
*/
window.clearInterval(taskId);
}
var toId;
function testTimeout(){
/*设置定时任务*/
toId = window.setTimeout("testOpen()",3000);
}
function testClearTimeout(){
window.clearTimeout(toId);
}
function testAlert(){
window.alert("提示框");
}
function testConfirm(){
/*
返回值就是用户操作
true: 点击了确定
false： 点击了取消
*/
var flag = window.confirm("确认删除吗？一旦删除不能恢复，请慎重！");
if(flag){
alert("确定删除，正在删除中....");
}else{
alert("取消了操作");
}
}
function testPrompt(){
/*
输入提示框
*/
var flag = window.prompt("请输入你的U顿密码");
if(flag){
alert("密码正确，转账中...");
}else{
alert("取消了操作");
}
}
</script>
</head>
<body>
<input type="button" value="open()" οnclick="testOpen()"/>
<input type="button" value="setInteval()" οnclick="testInterval()"/>
<input type="button" value="clearInteval()" οnclick="testClearInterval()"/>
<input type="button" value="setTimeout()" οnclick="testTimeout()"/>
<input type="button" value="clearTimeout()" οnclick="testClearTimeout()"/>
<input type="button" value="alert()" οnclick="testAlert()"/>
<input type="button" value="confirm()" οnclick="testConfirm()"/>
<input type="button" value="prompt()" οnclick="testPrompt()"/>
</body>
</html>
1.3 location对象
location对象表示一个窗口中的地址栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>location对象</title>
<script type="text/javascript">
/*
href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法： 刷新当前页面
*/
function testHref(){
//alert(window.location.href);
/*
通过修改location对象的href属性来实现页面的跳转
*/
window.location.href="02.广告页面.html";
}
function testReload(){
//刷新当前页面
window.location.reload();
}
//function testRefresh(){
//定时刷新
window.setTimeout("testReload()",1000);
//}
</script>
</head>
<body>
<a href="02.广告页面.html">超链接</a>
<input type="button" value="跳转" οnclick="testHref()"/>
<input type="button" value="实现定时刷新" οnclick="testRefresh()"/>
</body>
</html>
1.4 history对象
history对象表示窗口的历史记录栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>history对象</title>
<script type="text/javascript">
/*
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进 负整数：后退） 1 -2
*/
function testForward(){
//window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="04.history对象2.html">跳转到下一个页面</a>
<br/>
<input type="button" value="前进" οnclick="testForward()"/>
</body>
</html>
1.5 screen对象
screen对象代表是一个屏幕
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>screen对象</title>
<script type="text/javascript">
/*
availHeight和availWidth是排除了任务栏之后的高度和宽度
*/
document.write(window.screen.availWidth + "<br/>");
document.write(window.screen.availHeight + "<br/>");
document.write(window.screen.width + "<br/>");
document.write(window.screen.height + "<br/>");
</script>
</head>
<body>
</body>
</html>
2 事件编程
2.1回顾javase的事件编程
GUI编程事件三个要素：
事件源：按钮JButton JFrame
事件：KeyEvent WindowEvent
监听器：KeyListener WindowListener
GUI编程具体的步骤：
1）创建事件源
2）编程监听器
3）在事件源上注册监听器
javascript事件编程的三个要素：
1）事件源：html标签
2）事件：click dblclick mouseover。。。。
3）监听器： 函数
javascript事件分类：
点击相关的：
单击： onclick
双击： ondblclick
焦点相关的：
聚焦： onfocus
失去焦点： onblur
选项相关的：
改变选项： onchange
鼠标相关的：
鼠标经过： onmouseover
鼠标移除： onmouseout
页面加载相关的：
页面加载： onload
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件编程</title>
<!-- 2)编程监听器（函数） -->
<script type="text/javascript">
function test(){
alert("触发了事件");
}
</script>
</head>
<body>
<!-- 1）事件源-->
<input type="button" value="按钮" οnclick="test()"/><!-- 3)注册监听器（函数）-->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件编程案例</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background:#00F;
}
</style>
<script type="text/javascript">
/*
点击相关的：
单击： onclick
双击： ondblclick
焦点相关的：
聚焦： onfocus
失去焦点： onblur
选项相关的：
改变选项： onchange
鼠标相关的：
鼠标经过： onmouseover
鼠标移除： onmouseout
页面加载相关的：
页面加载： onload 这个事件是在加载完标签后再触发。通用用在body标签中，所以加载完body标签的内容触发。
*/
function testClick(){
alert("触发了单击事件");
}
function testDblClick(){
alert("触发了双击事件");
}
function testFocus(){
//清空输入框的内容
var userName = document.getElementById("userName");
userName.value="";
}
function testBlur(){
//获取用户输入内容
var userName = document.getElementById("userName").value;
//检查用户是否存在
//显示内容到span
//获取到span
var userNameTip = document.getElementById("userNameTip");
if(userName=="eric"){
userNameTip.innerHTML = "用户已经被占用，请更改!".fontcolor("red");
}else{
userNameTip.innerHTML = "恭喜你，该用户可用！".fontcolor("green");
}
}
function testChange(){
//alert("选项改变了");
//获取选中的内容
var jiguan = document.getElementById("jiguan").value;
//alert(jiguan);
var city = document.getElementById("city");
//每次先清空城市select的内容
city.innerHTML = "";
if(jiguan=="广东"){
//把一些option选项放入到城市的select中
var arr = ["广州","珠海","深圳"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="广西"){
//把一些option选项放入到城市的select中
var arr = ["柳州","桂林","南宁"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="湖南"){
//把一些option选项放入到城市的select中
var arr = ["长沙","湘潭","郴州"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
function testOver(){
alert("鼠标经过了div");
}
function testOut(){
alert("鼠标移除了dvi");
}
function testLoad(){
alert("触发了onload方法");
}
</script>
</head>
<body οnlοad="testLoad()">
<input type="button" value="单击" οnclick="testClick()"/>
<input type="button" value="双击" οndblclick="testDblClick()"/>
<hr/>
请输入用户名：<input type="text" id="userName" value="4-12位字母或数字" οnfοcus="testFocus()" οnblur="testBlur()"/><span id="userNameTip"></span>
<hr/>
请选择籍贯
<!--onchange :表示这个select中的选项发送改变 -->
<select οnchange="testChange()" id="jiguan">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
城市
<select id="city">
</select>
<hr/>
<div id="div1" οnmοuseοver="testOver()" οnmοuseοut="testOut()"></div>
</body>
</html>
737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
