11.16课堂笔记、作业以及学习心得

最新推荐文章于 2021-10-26 15:57:11 发布

huqiang0816

最新推荐文章于 2021-10-26 15:57:11 发布

阅读量253

点赞数

本文链接：https://blog.csdn.net/huqiang0816/article/details/78555953

版权

11.16课堂笔记整理

1、错误处理机制

1.1 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");
   }

1.2 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函数没有正确执行时抛出的错误

2、BOM模型

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

2.1 window对象

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

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

window.document.getElementById("header");

与此相同：

document.getElementById("header");

2.2 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);
}

11.16作业

完成人力资源管理系统的增删改查，按照自己的逻辑完成业务

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>增加数据，查询数据</title>  

</head>  
<body>  
    <h1>人力资源管理系统</h1>  
    <table>  
        <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>  
        <tr><td>Email:</td><td><input type="text" id="email"></td></tr>  
        <tr><td>电话号码：</td><td><input type="text" id="tel"></td></tr>  
        <tr><td>备注：</td><td><input type="text" id="memo"></td></tr>  
        <tr>  
            <td></td>  
            <td>
                <input type="button" value="保存" onclick="saveStorage()">
                <span style="display:inline-block;width:80px;"></span>
                <input type="button" value="修改" onclick="collectStorage()">
            </td>

        </tr>  
    </table>  
    <hr>  
    <p>检索：<input type="text" id="sname">  
            <input type="button" value="检索" onclick="findStorage('msg')">  
    </p> 
    <p>删除：<input type="text" id="rname">  
            <input type="button" value="删除" onclick="removeStorage('msg')">  
    </p> 
    <p id="msg" style=""></p>  

    <script type="text/javascript">
        function lg(a){
            console.log(a);
        }

        function saveStorage(){
            var person;
            if(localStorage.getItem('person')){
                var person=JSON.parse(localStorage.getItem('person'));
            }else{
                var person=new Object();
            }
            if(document.getElementById('name').value){
                var data=new Object();
                data.name=document.getElementById('name').value;
                data.email=document.getElementById('email').value;
                data.tel=document.getElementById('tel').value;
                data.memo=document.getElementById('memo').value;
                //lg(data.name);
                person[data.name]=data;
                var dataStr=JSON.stringify(person);
                localStorage.setItem('person',dataStr);

                lg(localStorage);
                //localStorage.clear();
                window.alert('保存成功');
            }else{
                window.alert("姓名不能为空");
            }
        }

        function findStorage(obj){
            var name=document.getElementById('sname').value;
            var dataStr=localStorage.getItem('person');
            var data=JSON.parse(dataStr);
            //lg(data[name]['name']);
            //lg(name);
            try{
                var returnValue="姓名："+data[name]['name']+'<br>';
                returnValue+="Email："+data[name]['email']+'<br>';
                returnValue+="电话号码："+data[name]['tel']+'<br>';
                returnValue+="备注："+data[name]['memo']+'<br>';
                document.getElementById(obj).innerHTML=returnValue;
                //lg(localStorage);
            }catch(err){
                document.getElementById(obj).innerHTML="数据库中查无此人！";
            }
        }

        function removeStorage(id){
            var name=document.getElementById('rname').value;
            var dataStr=localStorage.getItem('person');
            //console.log(dataStr);
            var data=JSON.parse(dataStr);

            if(data[name]){
                delete data[name];
                //console.log(data[name]);
                var newStr=JSON.stringify(data);
                //console.log(newStr);
                localStorage.clear();
                localStorage.setItem('person',newStr);              
                window.alert("删除成功");
            }else{
                document.getElementById(id).innerHTML="数据库中查无此人！";
            }
            //console.log(localStorage);

        }

        function collectStorage(){
            var name=document.getElementById('name').value;
            var email=document.getElementById('email').value;
            var tel=document.getElementById('tel').value;
            var memo=document.getElementById('memo').value;         
            var dataStr=localStorage.getItem('person');
            var data=JSON.parse(dataStr);
            //console.log(localStorage);
            if(data[name]){
                if(email){
                    data[name]['email']=email;
                }
                if(tel){
                    data[name]['tel']=tel;
                }
                if(memo){
                    data[name]['memo']=memo;
                }
                var newStr=JSON.stringify(data);
                localStorage.setItem('person',newStr);              
                window.alert("数据修改成功");
            }else{
                window.alert("姓名不能为空，或者数据库中无此人！");
            }
        }
    </script>
</body>  

</html>

11.16 学习心得

今天学习了javascript中的错误处理机制，理解各种错误类型。以及BOM模型，好几个计时事件。最重要的是：多谢代码，加什么对知识点的理解。

huqiang0816

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.16课堂笔记、作业以及学习心得

11.16课堂笔记整理1、错误处理机制1.1 Error对象和try…catch语句（1）、Error对象 Javascript解析或者执行时，一旦发生错误，JavaScript引擎就会抛出一个错误对象。JavaScript原生的提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例。根据语言标准，Error对象示例必须具有message属性，表示错误出现时的提示信息。对于大部分的J
复制链接

扫一扫