bom编程

来源：互联网发布：linux 字符串编码转换编辑：程序博客网时间：2024/06/04 18:07

1.BOM编程
什么是BOM编程？
BOM是（Broswer Object Model）浏览器对象模型编程
这里写图片描述

1.window对象
open(): 在一个窗口中打开页面
参数一：打开的页面
参数二：打开的方式。 _self: 本窗口 _blank: 新窗口（默认）
参数三：设置窗口参数。比如窗口大小

setInterval(): 设置定时器（执行n次）
setTimeout(): 设置定时器(只执行1次)
定时器：每隔n毫秒调用指定的任务（函数）
参数一：指定的任务（函数）
参数二：毫秒数

clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务
参数一：需要清除的任务ID

alert(): 提示框
仅仅有确定按钮

confirm(): 确认提示框
返回值就是用户操作
true: 点击了确定
false：点击了取消

propmt(): 输入提示框
返回值就是用户操作
true: 点击了确定
false：点击了取消

注意：
因为window对象使用非常频繁，所以当调用js中的window对象的方法时，可以省略对象名不写。

<script type="text/javascript">/*    window对象:    1.open():打开另一个窗口    参数1:设置打开的网页连接    参数2:打开的方式    参数3:设置打开的窗口的大小    2.设置定时器:    setInterval("执行的函数","每隔多少秒执行")--- 执行n次    setTimeOut("执行的函数","每隔多少秒执行") -- 执行一次    3.清除定时任务     clearInterval(): 清除定时器     clearTimeout(): 清除定时器     清除任务     参数一：需要清除的任务ID     4.alert(): 提示框     仅仅有确定按钮     5.confirm有确定还有取消的提示框     确定:true     取消:false     6. propmt(): 输入提示框     返回值就是用户操作     true: 点击了确定     false： 点击了取消*/    function testOpen(){        window.open("1.广告.html","_blank","width=200px;height=300px");        }    //开启定时任务    var intervalId;    function testSetInterval(){        //调用上面的testOpen()方法,在这里设置了一个定时任务,每一个定时任务其实都是有一个任务id的        intervalId = window.setInterval("testOpen()",3000);        }    //清除定时任务    function testClearInterval(){        window.clearInterval(intervalId);        }    //创建一个定时任务,只执行一次    var timeoutId;    function testSetTimeout(){        timeoutId = window.setTimeout("testOpen()",3000);        }    //清楚定时任务,setTimeOut()设定的定时任务    function testClearTimeout(){        window.clearTimeout(timeoutId);        }    //alert提示框    //window.alert("hello");    //弹出一个提示框,有确定还有取消    function testConfirm(){        var flag = window.confirm("确定要删除硬盘上的内容吗");        if(flag){            alert("内容正在删除中...");            }else{                }        }    //创建一个方法,生成内容输入提示框    function testPropmt(){        window.prompt("请输入你的密码");        }</script></head><body><input type="button" value="open" onclick="testOpen()" /><input type="button" value="setInterval" onclick="testSetInterval()" /><input type="button" value="clearInterval" onclick="testClearInterval()" /><input type="button" value="setTimeout" onclick="testSetTimeout()" /><input type="button" value="clearTimeout" onclick="testClearTimeout()" /><input type="button" value="confirm" onclick="testConfirm()" /><input type="button" value="propmt" onclick="testPropmt()" /></body>

2.location对象
href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法：刷新当前页面

需求：实现每隔一秒刷新一次页面

<script type="text/javascript">/*    2.location对象    href属性： 代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符    reload方法： 刷新当前页面    需求：实现每隔一秒刷新一次页面*/    //获取地址栏中的url    function getHref(){        //获取当前的地址栏中的url        var url = window.location.href;        alert(url);        }    //设置地址中的url    function setHref(){        window.location.href="1.广告.html";        }    //reload方法： 刷新当前页面,需求：实现每隔一秒刷新一次页面    function refresh2(){        window.location.reload();        }    window.setTimeout("refresh2()",1000);</script></head><body><input type="button" value="getHref" onclick="getHref()" /><input type="button" value="setHref" onclick="setHref()" /><input type="button" value="refresh" onclick="refresh2()" /></body>

3.history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进负整数：后退） 1 -2

<script type="text/javascript">/*    3.history对象    forward(): 前进到下一页    back(): 后退上一页    go(): 跳转到某页（正整数：前进  负整数：后退）  1   -1*/    //前进的方法    function testForward(){        //window.history.forward();        window.history.go(1);        }</script></head><body><a href="3.history2.html">超链接</a><input type="button" value="forward" onclick="testForward()" /></body><script type="text/javascript">    //写一个方法没执行这个方法的时候回退到上个页面    function testBack(){        //window.history.back();        window.history.go(-1);        }</script></head><body><input type="button" value="back" onclick="testBack()" /></body>

4.screen对象（重点掌握四个属性）
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值

<script type="text/javascript">/*    4.screen对象（学习四个属性）    availHeight和availWidth    是排除了任务栏之后的高度和宽度    width和height    是整个屏幕的像素值*/    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 事件编程
javascript事件编程的三个要素：
（以单击事件为例讲解事件编程三要素）
1）事件源：html标签
2）事件：click dblclick mouseover。。。。
3）监听器：函数

javascript事件分类：
点击相关的：
单击： onclick
双击： ondblclick

焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）
聚焦： onfocus
失去焦点： onblur
选项相关的：（select选项改变，做一个籍贯选项）
改变选项： onchange

鼠标相关的：（画一个div区块进行演示）
鼠标经过： onmouseover
鼠标移除： onmouseout

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

<script type="text/javascript">/*javascript事件分类：            点击相关的：                 单击： onclick                 双击： ondblclick            焦点相关的：（获得焦点输入框内提示内容消失，失去焦点验证用户名信息并且在输入框内提示）                聚焦：  onfocus                失去焦点： onblur            选项相关的：（select选项改变，做一个籍贯选项）                改变选项： onchange            鼠标相关的：（画一个div区块进行演示）                鼠标经过： onmouseover                鼠标移除： onmouseout            页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）                页面加载： onload*/    //写一个单击事件的监听    function testClick(){        alert("单击事件被触发");        }    //协议而过双击事件的监听    function testdbClick(){        alert("双击事件被执行");        }    //给获取焦点写一个监听,当获取焦点的时候,输入框内部的内容消失    function testOnfocus(){        //获取id为username的input标签对象        var username =  document.getElementById("username");        //将上面的input标签对象的values属性置为空串        username.value="";        }    //给input标签设置一个失去焦点的事件,当失去焦点的时候,给予一个提示,这个用户名到底可用不可用    function testBlur(){        //获取input标签对象的value值和sapn标签的对象        var username = document.getElementById("username").value;        var usernameTip = document.getElementById("usernameTip");        //拿着用户输入的用户名,做匹配,做判断        if("jack"==username){            usernameTip.innerHTML="该用户名已经被占用".fontcolor("red");            }else{                usernameTip.innerHTML="该用户可用".fontcolor("green");                }        }    //改变选项： onchange 做一个监听    function testChange(){        //1.获取用户选择了哪个选项        var sheng = document.getElementById("sheng").value;        var shi = document.getElementById("shi");        shi.innerHTML="<option>--请选择--</option>";        //alert(sheng);        //2.根据用户的选项进行判断,动态的给市级的下拉选中天充对应的option选项        if(sheng=="shanxi"){            shi.innerHTML="<option>西安</option><option>渭南</option><option>宝鸡</option>"            }else if(sheng=="sichuan"){                shi.innerHTML="<option>成都</option><option>雅安</option><option>广安</option>"                }else if(sheng=="guangdong"){                shi.innerHTML="<option>广州</option><option>深圳</option><option>佛山</option>"                }        }     //给鼠标移入加一个监听     function testOut(){         alert("鼠标移入了")         }    //鼠标移除的事件    function testOver(){        alert("鼠标移出了")        }</script></head><body><input type="button" value="单击事件" onclick="testClick()" /><input type="button" value="双击事件" ondblclick="testdbClick()" /><br /><hr /><input type="text" value="请输入你的用户名" id="username" onfocus="testOnfocus()" onblur="testBlur()"/><span id="usernameTip"></span><br /><hr /><select onchange="testChange()" id="sheng"><option>--请选择--</option><option value="shanxi">陕西</option><option value="sichuan">四川</option><option value="guangdong">广东</option></select><select id="shi"></select><br /><hr /><div style="width:300px;height:300px;border:1px solid #FF0" onmouseout="testOut()" onmouseover="testOver()"></div></body>

阅读全文

0 0