11.16課堂筆記、作業以及學習心得
11.16課堂筆記整理
1、錯誤處理機制
1.1 Error物件和try…catch語句
（1）、Error物件
Javascript解析或者執行時，一旦發生錯誤，JavaScript引擎就會丟擲一個錯誤物件。JavaScript原生的提供一個Error建構函式，所有丟擲的錯誤都是這個建構函式的例項。
根據語言標準，Error物件示例必須具有message屬性，表示錯誤出現時的提示資訊。對於大部分的Javascript引擎，對Error物件還提供name和stock屬性，分別表示錯誤的名稱和錯誤的堆疊資訊，他們是非標準的，不是每一個Error例項都要去實現。
f2();
function 觀察控制檯中的錯誤。
其中：“abc is not defined”是錯誤提示資訊。
最下面的三行錯誤資訊就是堆疊資訊。
（2）、try…catch語句
為了對錯誤進行處理，我們需要使用try…catch結構。
允許在try…catch塊最後定義finally塊，表示不管是否出現錯誤，都必須要在後面執行的語句。
在finally塊中一般都是做一些清理的工作。
function f1() {
try {
console.log("begin");
console 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模型，好幾個計時事件。最重要的是：多謝程式碼，加什麼對知識點的理解。