11.16 WEB处理机制和BOM模型

来源：互联网发布：卡尔曼滤波算法 c语言编辑：程序博客网时间：2024/06/06 07:45

错误处理机制

Error 对象和try..catch语句

1.Error 对象

Javascript解析或者执行时，一旦发生错误，JavaScript引擎就会抛出一个错误对象。JavaScript原生的提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例。
根据语言标准，Error对象示例必须具有message属性，表示错误出现时的提示信息。对于大部分的Javascript引擎，对Error对象还提供name和stock属性，分别表示错误的名称和错误的堆栈信息，他们是非标准的，不是每一个Error实例都要去实现。

f2();function f1() {    console.log(abc);}function f2() {   f1();}

观察控制台中的错误。
其中：“abc is not defined”是错误提示信息。
最下面的三行错误信息就是堆栈信息。

2.try…catch语句

为了对错误进行处理，我们需要使用try…catch结构。
允许在try…catch块最后定义finally块，表示不管是否出现错误，都必须要在后面运行的语句。
在finally块中一般都是做一些清理的工作。

function f1() {   ;;;;;   try {      console.log("begin");       console.log(abc); // 一旦出错，Javascript引擎就是构造一个Error对象    } catch(err) {      console.log(err.message);     } finally {        console.log("end");   }

Javascript的原生错误类型

Error对象是最一般的错误类型，在其基础上，Javascript还定义了6中错误，也就是说存在6中派生的错误对象。

1. SyntaxError是解析代码时发生的错误

var 1a = "abc";console.log "abc");

2. ReferenceError 是引用一个不存在的变量发生的错误

console.log(abc); // 引用一个不存在的变量console.log() = 1; // 将一个值分配给一个无法分配的对象

3. RangeError 是当一个值超出有效范围时发生的错误

var arr = new Array(-1);

4.TypeError 是变量或者参数不是预期类型时发生的错误。比如字符串、数值、布尔等原始类型的值使用new命令，就是抛出该错误。

new 123;

5.URIError是URI相关函数不正确时抛出的错误

6.EvalError 是Eval函数没有正确执行时抛出的错误

BOM模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
包括：window对象、location对象、navigator对象、screen对象和history对象。

Window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

1.setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码。

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。
setInterval() 第一个参数是函数（function）。
第二个参数间隔的毫秒数。

注意: 1000 毫秒是一秒。

function myFunction(){    setInterval(function(){alert("Hello")},3000);}

在页面上显示一个时钟：

var myVar=setInterval(function(){myTimer()},1000);function myTimer(){    var d=new Date();    var t=d.toLocaleTimeString();    document.getElementById("demo").innerHTML=t;}

2.如何停止执行?

clearInterval() 方法用于停止setInterval()方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval("javascript function",milliseconds);

然后你可以使用clearInterval()方法来停止执行。

var myVar=setInterval(function(){myTimer()},1000);function myTimer(){    var d=new Date();    var t=d.toLocaleTimeString();    document.getElementById("demo").innerHTML=t;}function myStopFunction(){    clearInterval(myVar);}

3.setTimeout() 方法

语法

window.setTimeout("javascript 函数",毫秒数);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert('5 seconds!')“，或者对函数的调用，诸如 alertMsg()“。
第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

function myFunction(){    setTimeout(function(){alert("Hello")},3000);}

4.如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

window.clearTimeout()方法可以不使用 window 前缀。
要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

var myVar;function myFunction(){myVar=setTimeout(function(){alert("Hello")},3000);}function myStopFunction(){clearTimeout(myVar);}

设计时钟与倒计时

<html> <head>  <title> New Document </title>  <meta charset="YTF-8"> </head> <body>    <div id="dd">hello</div>    <script type="text/javascript">        showTime();        /*function checkTime(i){            if(i<10){                i='0'+i;            }            return i;        }        function showTime(){            var myDate=new Date();            var year=myDate.getFullYear();            var month=myDate.getMonth()+1;            var date=myDate.getDate();            var day=myDate.getDay();            var h=myDate.getHours();            var m=myDate.getMinutes();            var s=myDate.getSeconds();            m = checkTime(m);            s = checkTime(s);            var weekday= new Array(7);            weekday[0]='星期天';            weekday[1]='星期一';            weekday[2]='星期二';            weekday[3]='星期三';            weekday[4]='星期四';            weekday[5]='星期五';            weekday[6]='星期六';            document.getElementById('dd').innerHTML=year+'年'+month+'月'+date+'日'+weekday[day]+h+':'+m+':'+s;            setTimeout(showTime,500);        }*/        //var curtime = new Date();        //var endTime = new Date('2018,11,11');        //var lefttime  = Math.ceil((endTime.getTime()-curtime.getTime())/(24*60*60*1000));//向上取整        //console.log(lefttime+'天');        //秒杀倒计时        function showTime(){            var nowtime = new Date();            var endtime = new Date('2017/11/17,17:29:59');            var lefttime = parseInt((endtime.getTime()-nowtime.getTime())/1000);//向下取整            var d = parseInt(lefttime/(24*60*60));            var h = parseInt(lefttime/(60*60)%24);            var m = parseInt(lefttime/60%60);            var s = parseInt(lefttime%60);            document.getElementById('dd').innerHTML = d+'天'+h+'小时'+m+'分钟'+s+'秒';            setTimeout(showTime,500);        }    </script> </body></html>

阅读全文

0 0