Web前端学习(4)_BOM编程_事件编程
这篇来写关于BOM编程、事件编程的内容。
1.BOM编程
1.1 BOM编程
将浏览器的各个部分封装成了不同的对象)
BOM是(Broswer Object Model) 浏览器对象模型编程
1.2 window对象
open(): 在一个窗口中打开页面
参数一: 打开的页面
参数二:打开的方式。 _self: 本窗口 _blank: 新窗口(默认)
参数三: 设置窗口参数。比如窗口大小
例如打开一个tc.html窗口:
function testOpen(){ window.open("tc.html","_blank","width=350px;height=300px"); }
setInterval(): 设置定时器(执行n次)
setTimeout(): 设置定时器(只执行1次)
定时器: 每隔n毫秒调用指定的任务(函数)
参数一:指定的任务(函数)
参数二:毫秒数
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一:需要清除的任务ID
执行n次任务以及暂停:
var id1; function testSetInterval(){ id1 = window.setInterval("testOpen()",4000); } function testClearInterval(){ window.clearInterval(id1); }
执行1次任务以及暂停:
var id2; function testSetTimeOut(){ id2 = window.setTimeout("testOpen()",4000); } function testClearTimeout(){ window.clearTimeout(id2); }
alert(): 提示框
仅仅有确定按钮
confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false: 点击了取消
function testConfirm(){ window.confirm("12345"); }
propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false: 点击了取消
function testPropmt(){ window.prompt("输入:"); }
注意:
因为window对象使用非常频繁,所以当调用js中的window对象的方法时,可以省略对象名不写。
1.3 location对象
href属性: 代表的是地址栏的URL,可以获取和设置URL。URL表示统一资源定位符
reload方法: 刷新当前页面
function getHref(){ var url = window.location.href; alert(url); } function setHref(){ window.location.href="tc.html"; } function testRefresh(){ window.location.reload(); } window.setInterval("testRefresh()",1500);
1.4 history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页(正整数:前进 负整数:后退)
function testForward(){ window.history.forward(); } function testBack(){ window.history.back(); }
1.5 screen对象(学习四个属性)
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值
<script type="text/javascript"> document.write("实际宽度"+window.screen.width); document.write("<br>"); document.write("的实际高度"+window.screen.height); document.write("<br>"); document.write("可用宽度"+window.screen.availWidth); document.write("<br>"); document.write("可用高度"+window.screen.availHeight); document.write("<br>"); </script>
2. 事件编程
2.1 javascript事件编程的三个要素:
1)事件源:html标签
2)事件 :click dblclick mouseover
3)监听器: 函数
2.2 javascript事件分类:
A.点击相关的:
单击: onclick
双击: ondblclick
<!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> <script type="text/javascript"> /*点击相关的: 单击: onclick 双击: ondblclic */ function testClick(){ alert("单击事件"); } function testDbClick(){ alert("双击事件"); } </script> </head> <body> <input type="button" value="单击事件" οnclick="testClick()" /> <input type="button" value="双击事件" οndblclick="testDbClick()" /> </body> </html>
B.焦点相关的:
聚焦: onfocus失去焦点: onblur
<!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> <script type="text/javascript"> /*焦点相关的:(获得焦点输入框内提示内容消失,失去焦点验证用户名信息并且在输入框内提示) 聚焦: onfocus 失去焦点: onblur */ //获得焦点事件 function testOnfocus(){ var input = document.getElementById("name"); input.value=""; } //失去焦点事件 function testOnblur(){ var input = document.getElementById("name").value; var span = document.getElementById("s"); if("ag"==input){ span.innerHTML="用户名已经存在!".fontcolor("red"); }else{ span.innerHTML="该用户名合法!".fontcolor("green"); } } </script> </head> <body> <input type="text" value="请输入用户名" id="name" οnfοcus="testOnfocus()" οnblur="testOnblur()" /> <span id="s"></span> </body> </html>
C.选项相关的:(select选项改变)
改变选项: onchange
<!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> <script type="text/javascript"> /*选项相关的:(select选项改变,做一个籍贯选项) 改变选项: onchange */ function testOnchange(){ var province = document.getElementById("s").value; var city = document.getElementById("c"); city.innerHTML="<option>--请选择-</option>"; switch(province){ case "陕西": city.innerHTML="<option>榆林</option><option>西安</option>" break; case "河南": city.innerHTML="<option>郑州</option><option>洛阳</option>" break; case "四川": city.innerHTML="<option>成都</option><option>都江堰</option>" break; } } </script> </head> <body> <select οnchange="testOnchange()" id="s"> <option>--请选择--</option> <option value="陕西">陕西</option> <option value="河南">河南</option> <option value="四川">四川</option> </select> <select id="c"> </select> </body> </html>
D.鼠标相关的:
鼠标经过: onmouseover
鼠标移除: onmouseout
<!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> <script type="text/javascript"> /*鼠标相关的:(画一个div区块进行演示) 鼠标经过: onmouseover 鼠标移出: onmouseout */ function testOnmouseover(){ alert("鼠标经过了!"); } function testOnmouseout(){ alert("鼠标移出了!"); } </script> </head> <body> <div id="d1" style="width:300px;height:300px; border:2px solid #0C3"οnmοuseοver="testOnmouseover()" οnmοuseοut="testOnmouseout()">div1</div> </body> </html>
E.页面加载相关的:(一般用在body标签中,用于网页加载完毕后还需执行什么操作进行触发)
页面加载: onload