BOM：浏览器对象模型(BrowserObjectModel)

目标

使用window对象（打开新窗口、与用户交互、定时器）
使用document对象
其他对象（线上）

浏览器对象模型

image.png

window

http://www.w3school.com.cn/jsref/met_win_open.asp

打开新窗口（线上）

window.open(URL,name,features,replace)

URL:地址
name：窗口名称
features：新窗口要显示的标准浏览器的特征
replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

简单例子

<script type="text/javascript">
function open_win() 
{
window.open("http://www.w3school.com.cn")
}
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var w;
            function newWindow(){
                //window.open("https://www.jianshu.com/p/c1c0755d2645");
                w=window.open("https://www.baidu.com",'mywindow','width=600,height=400');
                //window.open("https://www.jianshu.com/p/c1c0755d2645",'','width=600,height=400');
                //w.moveTo(300,300);
                //w.resizeTo(800,600);
                //w.focus;
            }
            function closeWindow(){
            w.close()
            }
        </script>
        
    </head>
    <body>
        <a href="javascript:newWindow()"> new page</a>
        <a href="javascript:closeWindow()"> close page</a>
    </body>
</html>

<input type=button value="Open Window" onclick="open_win()" />

打开一个窗口，打印一行文字，并获取焦点
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
</script>

打开一个窗口，显示图片，指定宽高
<a href="javascript:newWindow()"> new page</a>

 <script>
    function newWindow() {
        var win=open("../../images/1.jpg","mywindow","width=1250,height=500");
    }
</script>

窗口其他方法

https://www.w3school.com.cn/jsref/dom_obj_window.asp

moveTo(x,y)

方法格式：window.moveTo(x,y);
功能：将窗口移动到指定坐标(x,y)处;

resizeTo(x,y)

方法格式：window.resizeTo(x,y);
功能：将当前窗口放大或缩小到(x,y)指定大小，x、y分别为宽度和高度;

resizeBy(x,y)

方法格式：window.resizeBy(x,y);
功能：要使窗口宽度放大或缩小的像素数。可以是正、负数值。
将当前窗口改变到指定的大小(x,y),当x、y的值大于0时为扩大，小于0时为缩小。

moveBy（x,y）

功能：相对窗口的当前坐标把它移动指定的像素。

.focus .blur ## 得到或失去焦点

<script>
function newWindow() {
var win=open("../../images/1.jpg","mywindow","width=200,height=200");
win.moveTo(300,0);
win.resizeTo(500,500);
win.resizeBy(200,50);
//win.focus();
}
</script>

window.close()

function closeWin()
{
myWindow.close()
}

测试窗口失去和获取焦点

哪个窗口获取焦点，哪个就在前面，另外一个被挡住

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        
        function newWindow() {
        var win=open("18-正则表单验证-day03.html","mywindow","width=300,height=300");
         win.moveTo(300,0);//移动到绝对位置300,0
         win.moveBy(0,200);//相对于刚才的300,0再移动0,200  (300,200)
         win.resizeTo(400,400);
         win.resizeBy(200,50);
        win2.focus();
         
         var win2=open("images/pic1.jpg","mywindow","width=300,height=300");
          win2.moveTo(300,0);//移动到绝对位置300,0
          win2.moveBy(0,200);//相对于刚才的300,0再移动0,200  (300,200)
          win2.resizeTo(400,400);
          win2.resizeBy(200,50);
          //win2.focus();
        }
        
    </script>
</head>
<body>
    <input type="button" name="btn1" id="" value="打开" onclick="newWindow();" />
</body>

与用户交互（线上）

js中的三种消息对话框分别是alert()，confirm()，prompt()

1、alert():警告窗口
有一个确认按钮。

①写在<script>标签中

②括号中的内容为字符串或者整型

③点击确认即可关闭，无返回值
window.alert(“欢迎！请按“确定”继续。”)，

2、confirm():确认对话框,返回true/false，
有确认和取消两个按钮

①写在<script>标签中

②括号中的内容为字符串和整型

③点击确认返回true，点击取消返回false

<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("确认删除吗")
  if (r==true)
{
document.write("You pressed OK!")
}
  else
{
document.write("You pressed Cancel!")
}
  }
</script>
<input type="button" onclick="disp_confirm()"
value="Display a confirm box" />

3、prompt(？，？):弹出消息对话框
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

①写在<script>标签中

②str1: 要显示在消息对话框中的文本(提示语)，不可修改
str2：默认值。文本框中的内容，可以修改

③点击确认返回输入框中的内容，取消返回null

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");

其他例子

<script>
alert("hello啊");
var result=confirm("您确认要删除吗");
if(result){
alert("已删除");
}else{
alert("已取消");
}
//接受用户输入
var name=prompt("请输入您的姓名","");
document.write(name);
</script>

定时器（掌握）

setTimeout(执行的js,毫秒)
setInterval(执行的js,毫秒)

函数名加不加小括号的区别：
1、加小括号表示把函数的返回值传给他
2、不加小括号是把函数本身传给他。

两者区别setTimeout 延迟几毫秒执行一次js
setInterval 每间隔一定毫秒数执行一段js
clearInterval(名字);清除定时器
clearTimout(名字);
写法：

<script>
var t=setTimeout("alert(new Date())",5000);
</script>
<script>
var t=setInterval("alert(new Date())",1000);
</script>

学生练习

把上一章做的时钟改为每秒刷新的，可以控制启动和停止

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            var time01 = null;
            function time() {
                //获取div ,在div里打印当前时间
                var timeDiv = document.getElementById("timeDiv");
                //获取当前时间
                var date = new Date();
                //星期天是0 星期1-6即是1-6
                var day_arry = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
                //计算当前时间是星期几
                var day = date.getDay();
                var day_str = day_arry[day];
                //打印时间yyyy年MM月dd日 hh:mm:ss
                timeDiv.innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " + date.getHours() +
                    ":" + date.getMinutes() + ":" + date.getSeconds() + day_str;
            }
            //只执行一次的定时器  
            //第一个参数是需要执行的js,第二个参数是延迟多少毫秒
            //setTimeout(time, 5000);
            function start() {
                //每间隔1秒执行一次的定时器
                time01 = setInterval(time, 1000);
            }

            function stop() {
                clearInterval(time01);
            }
            //解决打印叠加的问题
        </script>
    </head>
    <body>
        <div id="timeDiv">
        </div>
        <input type="button" value="启动" onclick="start();" />
        <input type="button" value="停止" onclick="stop();" />
    </body>
</html>

document对象

https://www.w3school.com.cn/jsref/dom_obj_document.asp
获取元素的方式

通过document获取

getElementById()

通过id获取结果为对象类型可以直接用变量接收

getElementsByName()

通过name获取结果为数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function getElements() {
                //通过name获取元素集合
                //document.getElementById("id"); 适合一次获取一个
                //下面这三个是一次可获取多个 
                //通过name
                //var inputs = document.getElementsByName("myInput");
                //通过标签名获取
                //var inputs = document.getElementsByTagName("input");
                //通过标类名获取
                var inputs = document.getElementsByClassName("class1");
                //alert(inputs.length);
                for(var i=0;i<inputs.length;i++){
                    alert(inputs[i].value+"<br>");
                }
            }
        </script>
    </head>
    <body>
        <input name="myInput" type="text" size="20" class="class1"/><br />
        <input name="myInput" type="text" size="20" class="class1"/><br />
        <input name="myInput" type="text" size="20" class="class1"/><br />
        <br />
        <input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
    </body>
</html>


  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function check() {
//通过id获取元素
var name = document.getElementById("username");
alert("用户输入的值是：" + name.value);
var hobbys = document.getElementsByName("hobby");
for (var i = 0; i < hobbys.length; i++) {
//如果是多选框，我需要判断是否被用户选中
if (hobbys[i].checked) {
alert(hobbys[i].value);
}
}
//不常用
   var inputs=document.getElementsByTagName("input");
   alert(inputs);
 }
</script>
</head>
<body>
<form onsubmit="return check()">
<input type="text" id="username"/><br>
爱好<input type="checkbox" name="hobby" value="1">真香
<input type="checkbox" name="hobby" value="2">呵呵
<input type="checkbox" name="hobby" value="3">打豆豆
<input type="submit"/>
</form>
</body>
</html>

getElementsByTagName()

通过标签名获取结果为数组

innerHtml innerText区别
innerHtml解析并显示成html形式
innerText按文本方式显示

通过集合方法

document.images[0]
document.images["img2"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getImgName() {
alert("aa");
//通过images
   var images= document.images;
  /* for(var i=0;i<images.length;i++){
   alert("图片名："+images[i].src);
   }*/
  images[0].src="../../images/2.jpg";
  document.images["img2"].src="../../images/1.jpg";
   //换图片
}
</script>
</head>
<body>
<form>
<input type="button" name="btn1" onclick="getImgName()" value="换图"/>
<img src="../../images/1.jpg" name="img1" height="200" width="200"/>
<img src="../../images/2.jpg" name="img2" height="200" width="200"/>
</form>

</body>
</html>

通过name属性方法

document.images.img2
document.img2

轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function changeImg(){
                //第一种保留,第2-4种了解
                //第一种方式通过下标访问
                //document.images[1].src="../images/04.jpg";
                //第二种可以通过名字访问
                //document.images["img02"].src="../images/04.jpg";
                //第三种可以通过名字访问
                //document.images.img02.src="../images/04.jpg";
                //第四种可以不借助images,直接通过document.名字访问
                //document.img02.src="../images/04.jpg";
                //01 02 03 04 随机切换
                //step-1 -生成1-4之间的随机数
                var i=1+Math.round(Math.random()*3);  //0-3之间的数+1---->1-4
                document.images[0].src="../images/0"+i+".jpg";
            }
            function start(){
                setInterval(changeImg,1000);
            }
        </script>
    </head>
    <body>
        <img name="img01" src="../images/01.jpg" width="300px" height="300px">
        <img name="img02" src="../images/02.jpg" >
        <img src="../images/03.jpg" >
        <img src="../images/04.jpg" >
    <input type="button" name="btn1" id="btn1" value="切换图" onclick="changeImg();"/>
    <input type="button" name="btn2" id="btn2" value="给我轮播" onclick="start();"/>
    </body>
</html>

作业：
第14页课堂练习
web前台练习题一套

第3章 BOM(3课时)

第3章 BOM(3课时)

目标

浏览器对象模型

window

打开新窗口（线上）

窗口其他方法

moveTo(x,y)

resizeTo(x,y)

resizeBy(x,y)

moveBy（x,y）

.focus .blur ## 得到或失去焦点

window.close()

测试窗口失去和获取焦点

与用户交互（线上）

js中的三种消息对话框分别是alert()，confirm()，prompt()

定时器（掌握）

学生练习

document对象

通过document获取

getElementById()

getElementsByName()

getElementsByTagName()

通过集合方法

通过name属性方法

轮播图

推荐阅读更多精彩内容