5.2.2、定时事件

JavaScript 可以在时间间隔内执行，这就是所谓的定时事件（ Timing Events）。

window 对象允许以指定的时间间隔执行代码，这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：

setTimeout(function, milliseconds)

在等待指定的毫秒数后执行函数。

setInterval(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数。

setTimeout() 和 setInterval() 都属于 window 对象的方法。

5.2.2.1、延时器

setTimeout() 方法：延时器

window.setTimeout(function, milliseconds);

注意：window.setTimeout() 方法可以不带 window 前缀来编写。
第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。
案例演示：单击按钮，等待 3 秒，然后控制台会输出 “Hello”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        // 创建延时器
        var timer = setTimeout(function () {
            console.log("Hello");
        }, 3000);
        // 清除延时器
        // clearTimeout(timer);        
    };
</script>
</body>
</html>

5.2.2.2、定时器

setInterval() 方法：定时器

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

注意：window.setInterval() 方法可以不带 window 前缀来写。

第一个参数是要执行的函数。
第二个参数每个执行之间的时间间隔的长度。
案例演示：单击按钮，每隔一秒向控制台输出 “Hello”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        // 创建定时器
        var timer = setInterval(function () {
            console.log("Hello");
        }, 1000);
        // 清除定时器
        // clearInterval(timer);
    };
</script>
</body>
</html>

拓展知识：

做一个通用移动函数来实现小汽车（黑色方块）移动的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*控制器样式*/
        .controller {
            width: 600px;
            height: 50px;
            line-height: 50px;
        }
        .controller button {
            outline: none;
            border: none;
            margin: 0px;
            padding: 0px;
            width: 200px;
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            text-align: center;
            background-color: #E9E9E9;
            cursor: pointer;
            float: left;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 2px solid #F0F0F0;
        }
        .controller button:hover {
            background-color: #F9F9F9;
        }
        /*公路样式*/
        .road {
            width: 100%;
            height: 100px;
            position: relative;
            margin-top: 50px;
            background: #3DB1FF;
            opacity: .90;
        }
        .road800 {
            width: 800px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1000;
            opacity: .75;
        }
        .road1200 {
            width: 1200px;
            height: 100px;
            background: orange;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 500;
        }
        /*小汽车样式*/
        div#car {
            width: 135px;
            height: 100px;
            display: block;
            background: black;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1500;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            /*border: 1px solid #F0F0F0;*/
        }
    </style>
</head>
<body>
<div class="controller">
    <button id="btn1">移动到800PX</button>
    <button id="btn2">移动到1200PX</button>
    <button id="btn3">回家</button>
</div>
<div class="road">
    <div class="road800"></div>
    <div class="road1200"></div>
    <div id="car"></div>
</div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    document.getElementById("btn1").onclick = function () {
        move(document.getElementById("car"), 800);
    };
    document.getElementById("btn2").onclick = function () {
        move(document.getElementById("car"), 1200);
    };
    document.getElementById("btn3").onclick = function () {
        move(document.getElementById("car"), 0);
    };
    /*移动函数*/
    function move(element, target) {
        // 先清理定时器
        clearInterval(element.timeId);
        // 一会要清理定时器(只产生一个定时器)
        element.timeId = setInterval(function () {
            // 获取对象当前的位置
            var current = element.offsetLeft;
            // 每次移动多少像素
            var step = 10;
            // 判断是往正方向走还是往相反方向走
            step = current < target ? step : -step;
            // 每次移动后的距离
            current += step;
            // 判断当前移动后的位置是否到达目标位置
            if (Math.abs(target - current) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                // 清理定时器
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 20);
    }
</script>
</body>
</html>

5.2.3、常用窗口属性

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

window.innerHei
window.innerWidth - 浏览器窗口的内宽度（以像素计）

浏览器窗口（浏览器视口）不包括工具栏和滚动条。

对于 Internet Explorer 8, 7, 6, 5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或

document.body.clientHeight
document.body.clientWidth

一个实用的 JavaScript 解决方案（包括所有浏览器）：该例显示浏览器窗口的高度和宽度（不包括工具栏和滚动条）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
    var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
    console.log(w);
    console.log(h);
</script>
</body>
</html>

5.2.4、其它窗口方法

window.open() ：打开新的窗口
语法介绍：

window.open(URL,name,specs,replace);

参数介绍：

案例演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="openWin()">打开窗口</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    function openWin() {
        myWindow = window.open('', '', 'width=200,height=100');
        myWindow.document.write("<p>这是新建窗口</p>");
    }
</script>
</body>
</html>

window.close() ：关闭当前窗口

语法介绍：

window.close();

案例演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="openWin()">打开窗口</button>
<button onclick="closeWin()">关闭窗口</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    function openWin() {
        myWindow = window.open('', '', 'width=200,height=100');
        myWindow.document.write("<p>这是新建窗口</p>");
    }
    function closeWin() {
        myWindow.close();
    }
</script>
</body>
</html>

window.moveTo() ：移动当前窗口

语法介绍：

window.moveTo(x,y);

案例演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="openWin()">打开窗口</button>
<button onclick="moveWin()">移动窗口</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    function openWin() {
        myWindow = window.open('', '', 'width=200,height=100');
        myWindow.document.write("<p>这是新建窗口</p>");
    }
    function moveWin() {
        myWindow.moveTo(300, 300);
        myWindow.focus();
    }
</script>
</body>
</html>

window.resizeTo() ：调整当前窗口

语法介绍：

window.resizeTo(width,height);

案例演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button onclick="openWin()">打开窗口</button>
<button onclick="resizeWin()">调整窗口</button>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    function openWin() {
        myWindow = window.open('', '', 'width=200,height=100');
        myWindow.document.write("<p>这是新建窗口</p>");
    }
    function resizeWin() {
        myWindow.resizeTo(300, 300);
        myWindow.focus();
    }
</script>
</body>
</html>

5.3、Navigator对象

Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器，由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent，如下代码：

var ua = navigator.userAgent;
console.log(ua);

谷歌浏览器：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

火狐浏览器：

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0.0

IE11浏览器：

Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko

IE10浏览器：

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

IE9浏览器：

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

IE8浏览器：

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

IE7浏览器：

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)

于是乎，我们就可以实现对浏览器类型的判断：

var ua = navigator.userAgent;
if (/firefox/i.test(ua)) {
    alert("你是火狐浏览器");
} else if (/chrome/i.test(ua)) {
    alert("你是谷歌浏览器");
} else if (/msie/i.test(ua)) {
    alert("你是IE5-IE10浏览器");
} else if ("ActiveXObject" in window) {
    alert("你是IE11浏览器");
}

注意：在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了，如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息，比如：ActiveXObject

5.4、Location对象

Location对象中封装了浏览器的地址栏的信息，如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）

5.4.1、常用属性

常用属性：

console.log(location);          //输出location对象
console.log(location.href);     //输出当前地址的全路径地址
console.log(location.origin);   //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host);     //输出当前地址的主机
console.log(location.port);     //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search);   //输出当前地址的?后边的参数部分

修改地址：

location = "https://www.baidu.com";
1
location.href = "https://www.baidu.com";
1

5.4.2、常用方法

assign()：用来跳转到其它的页面，作用和直接修改location一样

location.assign("https://www.baidu.com");

reload()：用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

location.reload(true);

replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，它不会生成历史记录，不能使用回退按钮回退

location.replace("https://www.baidu.com");

5.5、History对象

History对象可以用来操作浏览器向前或向后翻页

5.5.1、常用属性

console.log(history);           //输出history对象
console.log(history.length);    //可以获取到当成访问的链接数量

5.5.2、常用方法

back()：可以回退到上一个页面，作用和浏览器的回退按钮一样

history.back();
• 1

forward()：可以跳转到下一个页面，作用和浏览器的前进按钮一样

history.forward();

go()：可以用来跳转到指定的页面，它需要一个整数作为参数

1：表示向前跳转一个页面，相当于forward()
2：表示向前跳转两个页面
-1：表示向后跳转一个页面，相当于back()
-2：表示向后跳转两个页面

history.go(-2);

5.6、Screen对象

Screen 对象包含有关客户端显示屏幕的信息。

注意：没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

5.6.1、Screen对象描述

每个 Window 对象的 screen 属性都引用一个 Screen 对象。Screen 对象中存放着有关显示浏览器屏幕的信息。JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

5.6.2、Screen对象属性

第六章 JavaScript高级语法

6.1、Exception

6.1.1、异常概述

在ES3之前JavaScript代码执行的过程中，一旦出现错误，整个JavaScript代码都会停止执行，这样就显的代码非常的不健壮。

在Java或C#等一些高级语言中，都提供了异常处理机制，可以处理出现的异常，而不会停止整个应用程序。

从ES3开始，JavaScript也提供了类似的异常处理机制，从而让JavaScript代码变的更健壮，即使执行的过程中出现了异常，也可以让程序具有了一部分的异常恢复能力。

当错误发生时，JavaScript 提供了错误信息的内置 error 对象。

error 对象提供两个有用的属性：name 和 message 。

Error 对象属性

Error Name Values

error 的 name 属性可返回六个不同的值：

6.1.2、异常捕捉

ES3开始引入了 try-catch 语句，是 JavaScript 中处理异常的标准方式。

语法格式：

try {
    // 可能发生异常的代码
} catch (error) {
    // 发生错误执行的代码
} finally {
    // 无论是否出错都会执行的代码
}

在 try…catch 中，try 中一旦出现错误则其它语句不能执行，如果不出现错误则 catch 中的语句不会执行。

Javascript 参考其它编程语言，也提供了一种 finally 语句：不管 try 中的语句有没有错误，在最后都会执行 finally 中的语句。也就是说，try 中语句不发生错误执行完毕后会执行 finally 中的语句，try 中的语句发生错误，则执行 catch中的语句，catch 中的语句执行完毕后也会执行 finally 中的语句。

案例演示：

try {
    console.log(a);
    console.log("a未定义肯定报错，你看不见我");
} catch (error) {
    // 发生错误执行的代码
    console.log(error);
} finally {
    // 无论是否出错都会执行的代码
    console.log("finally 执行了 ...")
}

在JavaScript中，如果添加了 finally 语句，则 catch 语句可以省略。但是如果没有 catch 语句，则一旦发生错误就无法捕获这个错误，所以在执行完 finally 中的语句后，程序就会立即停止了。所以，在实际使用中，最好一直带着 catch 语句。如果你写了 catch 语句，则finally 语句也是可以省略的。

6.1.3、异常演示

6.1.3.1、Eval 错误

EvalError 指示 eval() 函数中的错误。更新版本的 JavaScript 不会抛出任何 EvalError，请使用 SyntaxError 代替。

案例演示：

try {
    eval("alert('Hello)");   // 缺少 ' 会产生错误
} catch (error) {
    console.log(error)
}

6.1.3.2、范围错误

RangeError 会在您使用了合法值的范围之外的数字时抛出。

案例演示：您不能将数字的有效位数设置为 500。

var num = 1;
try {
    num.toPrecision(500);   // 数无法拥有 500 个有效数
} catch (error) {
    console.log(error)
}

6.1.3.3、引用错误

假如您使用（引用）了尚未声明的变量，则 ReferenceError 会被抛出：

案例演示：

var x;
try {
    x = y + 1;   // y 无法被引用（使用）
} catch (error) {
    console.log(error)
}

6.1.3.4、语法错误

假如您计算带语法错误的代码，会 SyntaxError 被抛出：

案例演示：

try {
    eval("alert('Hello)");   // 缺少 ' 会产生错误
} catch (error) {
    console.log(error)
}

6.1.3.5、类型错误

假如您使用的值不在期望值的范围之内，则 TypeError 被抛出：

案例演示：

var num = 1;
try {
    num.toUpperCase();   // 您无法将数字转换为大写
} catch (error) {
    console.log(error)
}

6.1.3.6、URI 错误

假如您在 URI 函数中使用非法字符，则 URIError 被抛出：

案例演示：

try {
    decodeURI("%%%");   // 您无法对这些百分号进行 URI 编码
} catch (error) {
    console.log(error)
}

6.1.4、异常抛出

在大部分的代码执行过程中，都是出现错误的时候，由浏览器(javascript引擎)抛出异常，然后程序或者停止执行或被try…catch 捕获。

然而有时候我们在检测到一些不合理的情况发生的时候也可以主动抛出错误，请使用 throw 关键字抛出来主动抛出异常。

注意事项：

thow后面就是我们要抛出的异常对象，在以前的时候都是出现错误的时候浏览器抛出异常对象，只是现在是我们自己主动抛出的异常对象。

只要有异常对象抛出，不管是浏览器抛出的，还是代码主动抛出，都会让程序停止执行。如果想让程序继续执行，则有也可以用try…catch来捕获。

每一个错误类型都可以传入一个参数，表示实际的错误信息。

我们可以在适当的时候抛出任何我们想抛出的异常类型。throw new SyntaxError("语法错误...");

6.1.4.1、主动抛出内置异常

/*该函数接收一个数字，返回它的平方。*/
function foo(num) {
    if (typeof num == "number") {
        return num * num;
    } else {
        throw new TypeError("您输入的是一个非法数字！")
    }
}
console.log(foo(4));
console.log(foo("abc"));

6.1.4.2、主动抛出自定义异常

我们不仅仅可以抛出js内置的错误类型的对象，也可以自定义错误类型，然后抛出自定义错误类型的对象。

如果要自定义错误类型，只需要继承任何一个自定义错误类型都可以，一般直接继承Error即可。

/*自定义错误*/
function MyError(message) {
    this.message = "注意：这是自定义的错误"
    this.name = "自定义错误";
}
MyError.prototype = new Error();
try {
    throw new MyError("注意：这是自定义错误类型")
} catch (error) {
    console.log(error.message)
}

重学JavaWeb第三天（七）

5.2.2、定时事件

5.2.2.1、延时器

5.2.2.2、定时器

5.2.3、常用窗口属性

5.2.4、其它窗口方法

5.3、Navigator对象

5.4、Location对象

5.4.1、常用属性

5.4.2、常用方法

5.5、History对象

5.5.1、常用属性

5.5.2、常用方法

5.6、Screen对象

5.6.1、Screen对象描述

5.6.2、Screen对象属性

第六章 JavaScript高级语法

6.1、Exception

6.1.1、异常概述

6.1.2、异常捕捉

6.1.3、异常演示

6.1.3.1、Eval 错误

6.1.3.2、范围错误

6.1.3.3、引用错误

6.1.3.4、语法错误

6.1.3.5、类型错误

6.1.3.6、URI 错误

6.1.4、异常抛出

6.1.4.1、主动抛出内置异常

6.1.4.2、主动抛出自定义异常

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

重学JavaWeb第三天（七）

5.2.2、定时事件

5.2.2.1、延时器

5.2.2.2、定时器

5.2.3、常用窗口属性

5.2.4、其它窗口方法

5.3、Navigator对象

5.4、Location对象

5.4.1、常用属性

5.4.2、常用方法

5.5、History对象

5.5.1、常用属性

5.5.2、常用方法

5.6、Screen对象

5.6.1、Screen对象描述

5.6.2、Screen对象属性

第六章 JavaScript高级语法

6.1、Exception

6.1.1、异常概述

6.1.2、异常捕捉

6.1.3、异常演示

6.1.3.1、Eval 错误

6.1.3.2、范围错误

6.1.3.3、引用错误

6.1.3.4、语法错误

6.1.3.5、类型错误

6.1.3.6、URI 错误

6.1.4、异常抛出

6.1.4.1、主动抛出内置异常

6.1.4.2、主动抛出自定义异常

热门文章

最新文章

相关课程

相关电子书

相关实验场景