1.BOM编程
open(): 在一个窗口中打开页面
参数一: 打开的页面
参数二:打开的方式。 _self: 本窗口 _blank: 新窗口(默认)
参数三: 设置窗口参数。比如窗口大小
setInterval(): 设置定时器(执行n次)
setTimeout(): 设置定时器(只执行1次)
定时器: 每隔n毫秒调用指定的任务(函数)
参数一:指定的任务(函数)
参数二:毫秒数
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一:需要清除的任务ID
alert(): 提示框
仅仅有确定按钮
confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false: 点击了取消
propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false: 点击了取消
注意:
因为window对象使用非常频繁,所以当调用js中的window对象的方法时,可以省略对象名不写。
2.location对象
href属性: 代表的是地址栏的URL,可以获取和设置URL。URL表示统一资源定位符
reload方法: 刷新当前页面
需求:实现每隔一秒刷新一次页面
3.history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页(正整数:前进 负整数:后退) 1 -2
4.screen对象(学习四个属性)
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值
2 事件编程
javascript事件编程的三个要素:
(以单击事件为例讲解事件编程三要素)
1)事件源:html标签
2)事件 :click dblclick mouseover。。。。
3)监听器: 函数
javascript事件分类:
点击相关的:
单击: onclick
双击: ondblclick
焦点相关的:(获得焦点输入框内提示内容消失,失去焦点验证用户名信息并且在输入框内提示)
聚焦: onfocus
失去焦点: onblur
选项相关的:(select选项改变,做一个籍贯选项)
改变选项: onchange
鼠标相关的:(画一个div区块进行演示)
鼠标经过: onmouseover
鼠标移除: onmouseout
页面加载相关的:(一般用在body标签中,用于网页加载完毕后还需执行什么操作进行触发)
页面加载: onload
什么是BOM编程?(画图讲解,将浏览器的各个部分封装成了不同的对象)
BOM是(Broswer Object Model) 浏览器对象模型编程
open(): 在一个窗口中打开页面
参数一: 打开的页面
参数二:打开的方式。 _self: 本窗口 _blank: 新窗口(默认)
参数三: 设置窗口参数。比如窗口大小
<!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">
function textOpen(){
window.open("1.html","_blank","width=200px;heigth=200px");
}
</script>
</head>
<body>
<input type="button" value="open测试" οnclick="textOpen()" />
</body>
</html>
输出:点击open测试按钮后,弹出长200px,宽200px的网页窗口。
setInterval(): 设置定时器(执行n次)
setTimeout(): 设置定时器(只执行1次)
定时器: 每隔n毫秒调用指定的任务(函数)
参数一:指定的任务(函数)
参数二:毫秒数
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一:需要清除的任务ID
<!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">
function testOpen(){
window.open("1.html","_blank","width=200px;heigth=200px");
}
var intervalId;
function testSetInterval(){
intervalId=window.setInterval("testOpen()",1000);
}
var timeoutId;
function testSetTimeout(){
timeoutId=window.setTimeout("testOpen()",3000);
}
function testClearInterval(){
window.clearInterval(intervalId);
}
function testClearTimeout(){
window.clearTimeout(timeoutId);
}
</script>
</head>
<body>
<input type="button" value="setInterval测试" οnclick="testSetInterval()" />
<input type="button" value="setTimeout测试" οnclick="testSetTimeout()" />
<input type="button" value="clearInterval测试" οnclick="testClearInterval()" />
<input type="button" value="clearTimeout测试" οnclick="testClearTimeout()" />
</body>
</html>
输出:点击setInterval测试后,每隔一秒会有一个弹窗,当点击clearInterval测试时,弹窗弹出会停止;
点击setTimeout测试后,三秒后弹出弹窗,在弹窗弹窗之前点击clearTimeout测试,弹窗弹出会停止;
alert(): 提示框
仅仅有确定按钮
confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false: 点击了取消
<!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">
function testConfirm(){
var flag = window.confirm("继续进行程序吗");
if(flag){
alert("程序正在进行");
}else{
}
}
</script>
</head>
<body>
<input type="button" value="confirm测试" οnclick="testConfirm()" />
</body>
</html>
输出:
propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false: 点击了取消
<!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">
function testPropmt(){
window.prompt("请输入你的密码");
}
</script>
</head>
<body>
<input type="button" value="propmt测试" οnclick="testPropmt()" />
</body>
</html>
输出:
注意:
因为window对象使用非常频繁,所以当调用js中的window对象的方法时,可以省略对象名不写。
2.location对象
href属性: 代表的是地址栏的URL,可以获取和设置URL。URL表示统一资源定位符
reload方法: 刷新当前页面
需求:实现每隔一秒刷新一次页面
<!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">
//获取当前url
function getHref(){
var url = window.location.href;
alert(url);
}
function setHref(){
window.location.href="1.html";
}
function testReload(){
window.location.reload();
}
window.setInterval("testReload()",1000);
</script>
</head>
<body>
<input type="button" value="getHref" οnclick="getHref()" />
<input type="button" value="setHref" οnclick="setHref()" />
</body>
</html>
3.history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页(正整数:前进 负整数:后退) 1 -2
<!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">
function testBack(){
window.history.back();
}
</script>
</head>
<body>
<input type="button" value="back" οnclick="testBack()" />
</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>
<script type="text/javascript">
function testForward(){
window.history.forward();
}
</script>
</head>
<body>
<a href="2-6.html">back</a>
<input type="button" value="forward" οnclick="testForward()" />
</body>
</html>
4.screen对象(学习四个属性)
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值
<!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">
document.write("屏幕高度:"+window.screen.height);
document.write("<br>");
document.write("屏幕宽度:"+window.screen.width);
document.write("<br>");
document.write("屏幕可用高度:"+window.screen.availHeight);
document.write("<br>");
document.write("屏幕可用宽度:"+window.screen.availWidth);
</script>
</head>
<body>
</body>
</html>
输出:
2 事件编程
javascript事件编程的三个要素:
(以单击事件为例讲解事件编程三要素)
1)事件源:html标签
2)事件 :click dblclick mouseover。。。。
3)监听器: 函数
javascript事件分类:
点击相关的:
单击: 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">
function testOnclick(){
alert("单击事件被触发");
}
function testOndblclick(){
alert("双击事件被触发");
}
</script>
</head>
<body>
<input type="button" value="onclick" οnclick="testOnclick()" />
<input type="button" value="ondblclick" οndblclick="testOndblclick()" />
</body>
</html>
焦点相关的:(获得焦点输入框内提示内容消失,失去焦点验证用户名信息并且在输入框内提示)
聚焦: 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">
function testOnfocus(){
var username = document.getElementById("username");
username.value="";
}
function testBlur(){
var username = document.getElementById("username").value;
var usernameTip = document.getElementById("usernameTip");
if("Knight"==username){
usernameTip.innerHTML="用户名已被占用".fontcolor("red");
}else{
usernameTip.innerHTML="用户名可用".fontcolor("green");
}
}
</script>
</head>
<body>
<input type="text" value="请输入用户名" id="username" οnfοcus="testOnfocus()" οnblur="testBlur()"/>
<span id="usernameTip"></span>
</body>
</html>
选项相关的:(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">
function testChange(){
var sheng = document.getElementById("sheng").value;
var shi = document.getElementById("shi");
if(sheng=="guangdong"){
shi.innerHTML="<option>广州</option><option>珠海</option><option>中山</option>"
}else if(sheng=="shanxi"){
shi.innerHTML="<option>西安</option><option>渭南</option><option>榆林</option>"
}
}
</script>
</head>
<body>
<select id="sheng" οnchange="testChange()">
<option>----请选择----</option>
<option value="guangdong">广东</option>
<option value="shanxi">陕西</option>
</select>
<select id="shi">
</select>
</body>
</html>
鼠标相关的:(画一个div区块进行演示)
鼠标经过: 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">
function testOnmouseover(){
alert("鼠标进入了");
}
function testOnmouseout(){
alert("鼠标离开了");
}
</script>
</head>
<body>
<div style="width:300px;height:300px;border:1px solid #FF0" οnmοuseοver="testOnmouseover()" οnmοuseοut="testOnmouseout()"></div>
</body>
</html>
页面加载相关的:(一般用在body标签中,用于网页加载完毕后还需执行什么操作进行触发)
页面加载: onload