Web学习笔记_04

来源：互联网发布：python exit 0 exit 1 编辑：程序博客网时间：2024/06/03 23:06

1.BOM编程

什么是BOM编程？（画图讲解，将浏览器的各个部分封装成了不同的对象）

BOM是（Broswer Object Model）浏览器对象模型编程

1.window对象
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测试" onclick="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测试" onclick="testSetInterval()" /><input type="button" value="setTimeout测试" onclick="testSetTimeout()" /><input type="button" value="clearInterval测试" onclick="testClearInterval()" /><input type="button" value="clearTimeout测试" onclick="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测试" onclick="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测试" onclick="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">//获取当前urlfunction 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" onclick="getHref()" /><input type="button" value="setHref" onclick="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" onclick="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" onclick="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" onclick="testOnclick()" /><input type="button" value="ondblclick" ondblclick="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" onfocus="testOnfocus()" onblur="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" onchange="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" onmouseover="testOnmouseover()" onmouseout="testOnmouseout()"></div></body></html>

页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）
页面加载： onload

阅读全文

0 0