03-07 JavaScript

JavaScript

今日目标

掌握 JavaScript 的基础语法
掌握 JavaScript 的常用对象（Array、String）
能根据需求灵活运用定时器及通过 js 代码进行页面跳转
能通过DOM 对象对标签进行常规操作
掌握常用的事件
能独立完成表单校验案例

5，BOM

BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = "https://itheima.com";

BOM 中包含了如下对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系

BOM 中的 Navigator 对象和 Screen 对象基本不会使用，所以我们的课堂只对 Window、History、Location 对象进行讲解。

5.1 Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

5.1.1 获取window对象

该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，在调用是可以写成如下两种

显式使用 window 对象调用










xxxxxxxxxx





window.alert("abc");

隐式调用










xxxxxxxxxx





alert("abc")

5.1.2 window对象属性

window 对象提供了用于获取其他 BOM 组成对象的属性

也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

5.1.3 window对象函数

window 对象提供了很多函数供我们使用，而很多都不常用；下面给大家列举了一些比较常用的函数

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次 setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

confirm代码演示：










xxxxxxxxxx





// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");
alert(flag);

下图是 confirm() 函数的效果。当我们点击 确定 按钮，flag 变量值记录的就是 true ；当我们点击 取消 按钮，flag 变量值记录的就是 false。

而以后我们在页面删除数据时候如下图每一条数据后都有 删除 按钮，有可能是用户的一些误操作，所以对于删除操作需要用户进行再次确认，此时就需要用到 confirm() 函数。

定时器代码演示：










xxxxxxxxxx





setTimeout(function (){
    alert("hehe");
},3000);

当我们打开浏览器，3秒后才会弹框输出 hehe，并且只会弹出一次。










xxxxxxxxxx





setInterval(function (){
    alert("hehe");
},2000);

当我们打开浏览器，每隔2秒都会弹框输出 hehe。

5.1.4 案例

需求：每隔1秒，灯泡切换一次状态

需求说明：

有如下页面效果，实现定时进行开灯、关灯功能

初始页面环境










xxxxxxxxxx





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>
    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }
    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }
</script>
</body>
</html>

代码实现：










xxxxxxxxxx





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>
    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }
    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }
    
    //定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态
    var x = 0;
    //使用循环定时器
    setInterval(function (){
        if(x % 2 == 0){//表示是偶数，开灯状态，调用 on() 函数
            on();
        }else {  //表示是奇数，关灯状态，调用 off() 函数
            off();
        }
        x ++;//改变变量的值
    },1000);
</script>
</body>
</html>

5.2 History对象

History 对象是 JavaScript 对历史记录进行封装的对象。

History 对象的获取
使用 window.history获取，其中window. 可以省略
History 对象的函数
这两个函数我们平时在访问其他的一些网站时经常使用对应的效果，如下图
当我们点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；当我们点击向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

5.3 Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

5.3.1 获取Location对象

使用 window.location获取，其中window. 可以省略










xxxxxxxxxx





window.location.方法();
location.方法();

5.3.2 Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href

代码演示：










xxxxxxxxxx





alert("要跳转了");
location.href = "https://www.baidu.com";

在浏览器首先会弹框显示 要跳转了，当我们点击了 确定 就会跳转到百度的首页。

5.3.3 案例

需求：3秒跳转到百度首页

分析：

3秒跳转，由此可以确定需要使用到定时器，而只跳转一次，所以使用 setTimeOut()
要进行页面跳转，所以需要用到 location 对象的 href 属性实现

代码实现：










xxxxxxxxxx





document.write("3秒跳转到首页..."); 
setTimeout(function (){
    location.href = "https://www.baidu.com"
},3000);