前的技術總監喊我加入他們的接私活團隊,說他們缺一個前端工程師,不缺后端。可我一直是做后端開發的,前端代碼寫的實在是很少,沒有經驗,寫起來肯定很慢了,所以想對前端的HTML知識點做一個匯總。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>一級標題</h1>
<br/>
<h2>二級標題</h2>
</body>
</html>
<!DOCTYPE html>聲明這是一個html文檔;<html>元素是html頁面的根元素;整個html文檔包括兩大部分:head頭和body體。
meta元素提供了頁面的元信息;title元素描述了文檔的標題;body元素包含了可見的頁面內容。
開始標簽 | 元素內容 | 結束標簽 |
<h1> | 一個標題 | </h1> |
<br/> | 換行 | |
|
下面是適用于大多數 HTML 元素的屬性:
屬性 | 描述 |
class | 為元素定義一個或多個類名 |
id | 定義元素的唯一id |
style | 設定元素的行內樣式 |
實例:<a href="toutiao.com">頭條</a> | |
|
<body>
<!-- 一般用在標題上,利于seo優化-->
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
<body>
<!-- 這是注釋 -->
<!-- </p> 是塊級元素、前后有空行-->
<p>這個段落</p>
<p>這<br>個<br>段落</p>
<hr/>
</body>
<body>
<b>加粗</b>
<i>斜體</i>
<small>更小的</small> <br><br>
<strong>重要的</strong> <br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup> <br><br>
<del> 刪除的文本
</body>
屬性 | 值 | 描述 |
href | toutiao.com | 鏈接的地址 |
target | _blank | 在何處顯示 |
id | 文檔書簽 |
<body>
<!-- 實例 -->
文本:<a href="http://www.example.com/">文本</a> <br/>
圖像: <a href="http://www.example.com/">
<img src="URL" alt="描述信息">
</a> <br/>
郵件: <a href="mailto:qq@example.com">發送e-mail</a> <br/>
書簽:
<a id="tips">書簽</a> <br/>
<a href="#tips">跳到書簽</a>
</body>
屬性 | 描述 |
src | 圖像的 URL 地址 |
alt | 無法載入圖像時,顯示替換文本 |
width | 指定寬度 |
height | 指定高度 |
<body>
<img src="meinv.jpg" alt="美女" width="280" height="180">
</body>
哈哈哈,調皮一下
表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。
數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<body>
<!-- 邊框屬性:如果不定義邊框屬性,表格將不顯示邊框-->
<table border="1">
<tr>
<!-- 表頭使用<th>標簽定義。瀏覽器會把表頭顯示為粗體居中的文本-->
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>小紅</td>
<td>18</td>
<th>女</th>
</tr>
<tr>
<td>小明</td>
<td>21</td>
<td>男</td>
</tr>
</table>
</body>
<body>
<!-- 有序列表 數字進行標記-->
<ol>
<li>蘋果汁</li>
<li>草莓汁</li>
</ol>
<!-- 無序列表 粗體圓點標記-->
<ul>
<li>咖啡</li>
<li>飲料</li>
<li>茶
<!-- 嵌套列表 -->
<ol>
<li>紅茶</li>
<li>綠茶</li>
</ol>
</li>
</ul>
</body>
<div> 元素 | <span> 元素 |
塊級元素 | 內聯元素 |
HTML 元素的容器 | 文本的容器 |
搭配css可對內容塊設置樣式屬性 | 搭配css可為文本設置樣式屬性 |
<body>
<div style="width:500px">
<div style="background-color: antiquewhite;">
<h1 style="margin-bottom:0;">網頁頭部信息</h1>
</div>
<div style="background-color: aquamarine; height:200px;width:100px;float:left;">
<b>網頁左側信息</b><br>
中考資訊<br>
高考資訊<br>
成人自考
</div>
<div style="background-color: aqua; height:200px;width:400px;float:left;">
主題內容
</div>
<div style="background-color:#FFA500;clear:both;text-align:center;">
底部內容
</div>
</div>
</body>
form表單有兩個屬性:
action | method |
定義了服務端的文件名 | 數據的提交方式 |
對接收到的數據進行處理 | 有POST與GET方法 |
|
<body>
<!-- 表單是一個包含表單元素的區域
允許用戶在表單中輸入內容-->
<form action="" method="">
<!-- input 輸入標簽 類型是由type屬性定義-->
<!-- 文本域 type="text" -->
年齡: <input type="text" name="age"><br>
<!-- 密碼字段 type="password" -->
密碼: <input type="password" name="age"><br>
<!-- 單選框 type="radio" -->
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女<br>
<!-- 復選框 type="checkbox" -->
<input type="checkbox" name="like" value="Coffee">喜歡咖啡
<input type="checkbox" name="like" value="tea">喜歡茶<br>
<!-- 提交按鈕 type="submit" -->
<!-- 將表單的內容傳送到服務器 -->
<input type="submit" value="提交">
</form>
</body>
<body>
<!-- 通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。 -->
<iframe src="test.html" width="200" height="200"></iframe>
</body>
height 和 width 屬性用來定義iframe標簽的高度與寬度
<head> 元素定義了文檔的信息,包含了所有的頭部標簽元素。常用的標簽元素如下所示。
<meta> | 文檔的元數據 |
<base> | 頁面鏈接標簽的默認地址 |
<title> | 文檔的標題 |
<link> | 外部樣式資源 |
<style> | 客戶端腳本文件 |
<script> | 文檔樣式文件 |
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 定義關鍵詞 -->
<meta name="keywords" content="生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活, 分享美好">
<!-- 定義描述內容 -->
<meta name="description" content="我是一個生活夢想家, 科技愛好者, 新手剪輯師, 記錄生活和分享美好的一個人。">
<!-- 定義文檔作者 -->
<meta name="author" content="小明">
<!-- 每10秒鐘刷新當前頁面 -->
<meta http-equiv="refresh" content="10">
<title>Document</title>
</head>
<body>
</body>
</html>
這只是HTML的基本內容,后續還會總結HTML5的知識點。
選框(Checkbox)是設計中常用到的組件,在B端表單設計中用得尤其頻繁。看起來雖然很簡單,但復選框的尺寸、顏色和位置仍值得我們仔細考慮,以確保讓用戶更容易理解和使用。
我們首先來介紹最基礎的復選框樣式,其次分析復選框+描述/icon/數值/圖像等多種類型的復選框形式,最后總結設計復選框時的五點注意事項,全面掌握復選框的設計~
最基礎的復選框由復選框+文本標簽組成。點擊選中,會有一個復選框選中的效果,取消選中時復選框顯示為灰色描邊的方塊。
復選框常見的三種基本狀態是:未選中、選中和不確定狀態。
不確定狀態常用的場景是在級聯選擇器中,例如一級復選框能控制所有二級復選框的內容。如果有的二級勾選了,有的沒勾選,那么一級復選框的狀態就會判定為不確定。
在用一個產品中,建議頁面中的所有復選框都使用相同的尺寸,這樣有助于保持設計一致性。當然在某些特殊的場景下,也可以更改復選框的尺寸來靈活適應。
例如,某些頁面的復選框比其他頁面的復選框更重要或者更頻繁使用,就可以將它們放大來吸引用戶的注意力。
是否需要設計不同尺寸的復選框取決于復選框的數量、標簽的長度、選項的重要性等因素。
將以上提到的復選框的不同狀態和尺寸混合起來,可以組合成基礎的復選框組件。
復選框下方的描述通常用來解釋說明該復選框的功能,或者為復選框提供功能說明。
這種額外的描述性文字盡量控制在兩行以內,為用戶帶來更清晰的體驗。
如果對這種類型的復選框采用左居中對齊方式,將復選框位于中心,看起來就會很奇怪:
復選框應該始終保持與主文字左對齊,可以在距頂行幾個像素的地方對齊復選框。
復選框上的信息圖標也用來解釋說明關于復選框的附加信息。當鼠標懸停在信息圖標上時,顯示對應的信息提示。
這里的對齊方式與基礎復選框的對齊方式相同,保持水平對齊所有內容。
這里的附加文本常用來展示數量。例如在產品列表的過濾器中,在左側顯示屬性(顏色、尺寸或品牌),在右側顯示具體的數量。
又或者在CRM系統中,用來過濾不同狀態的任務量。
通過復選框+圖片相結合的展示方式,用戶更容易理解他們正在選擇什么。例如看到有同事照片和信息的復選框,就更容易將任務分配給他。
這種類型的復選框中,首先要保持復選框與圖像水平居中對齊。如果有兩行字段,需要將字段與圖像保持上下對齊,讓整體更協調。
在產品設計中,方塊通常表示復選框,圓圈用來表示單選按鈕。這種視覺上的區別有助于用戶理解兩種控件之間的區別,并正確地使用它們。
如果字段文字較多出現折行的情況,復選框應該始終與第一行字段保持對齊,而不是跟隨整個文本框居中對齊。
否則就會產生類似右圖的效果,看起來很奇怪。
在設計中,盡可能使用垂直對齊復選框的原因:
可以讓選項更易于閱讀和理解;讓復選框組更加緊湊,節省空間;垂直對齊能讓每個復選框在視覺上區分更加明顯。
當然在某些場景中,也可以采用水平對齊的方式,具體用法需要靈活選擇。
多選標簽能夠很好地替代具有七個以上選項的復選框(5±2規則)。允許用戶輕松點選和取消選擇多個選項,而不需要在復選框列表中再次去選擇并取消。
這可能是新手設計師和開發最常犯的錯誤之一。可點擊區域應該比帶有復選框和文本的區域要大得多,這樣能方便用戶操作和選擇。
以上是「復選框」的類型+用法設計分析,希望這些學習能幫助大家更快更好地進行表單設計!
專欄作家
作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。
本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
內容是《Web前端開發之Javascript視頻》的課件,請配合大師哥《Javascript》視頻課程學習。
錯誤處理對于web應用開發至關重要,任何javascript錯誤都有可能會導致網頁無法使用,因此作為開發人員,必須要及時處理有可能出現的錯誤;
從IE4.0之后,幾乎所有的瀏覽器都包含了一些基本的錯誤處理功能,但并沒有統一,后來,由ECMAscript添加了異常處理機制,也就是try…catch…finally結構以及throw操作;
錯誤處理的重要性: 好的錯誤處理技術可以讓腳本的開發、調試和部署更加流暢,能對代碼進行更好的控制;另外,JS缺乏標準的開發環境;
錯誤類型:
語法錯誤(syntax error):也稱為解析錯誤,發生在傳統編程語言的編譯解釋時;發生語法錯誤時,就會發生阻塞,也就是不能繼續執行代碼,但只是同一個線程中的代碼會受影響,其他線程中的代碼不受影響;
// Uncaught SyntaxError: Invalid or unexpected token
// 未捕獲的語法錯誤:無效或意外的標記
document.write("zeronetwork;
運行時錯誤(Runtime error):也稱為exception異常, 其發生在編譯期/解釋期后,此時,問題并不出現在代碼的語法上,而是在嘗試完成一個非法的操作;
<input type="button" value="單擊" onclick="handleClick()" />
<script>
// Uncaught ReferenceError: openMy is not defined
// 未捕獲的引用錯誤:未定義openMy
function handleClick(){
openMy();
}
</script>
錯誤報告:
因為每個瀏覽器都有自己的內置Javascript解釋程序,所以每種瀏覽器報告錯誤的方式都不同;有些是彈出錯誤信息,有些是把信息打印在控制臺中;
IE(windows): 默認情況下,會彈出包含錯誤細節的對話框,并詢問是否繼續執行頁面上的腳本;如果瀏覽器有調試器(如:Microsoft Script Debugger) ,此對話框會提供一個是調試還是忽略的選項;如果在IE設置中取消了”顯示錯誤”,那么會在頁面左下角顯示一個黃色的圖標;
注:如果JS代碼就在HTML里,顯示錯誤行是正確的,如果是外部的JS文件,則行號往往差一行,如第5行則為第4行;
Mozilla(所有平臺): 在控制臺中打印錯誤信息,并發出警告;其會報告三種類型的消息:錯誤、嚴格警告和消息等的;
Safari (MacOS):是對JavaScript錯誤和調試的支持最差,默認情況下,它對終端用戶不提供任何javascript錯誤報告;
錯誤處理:
Javascript提供了兩種處理錯誤的方式:
onerror事件處理函數:
window對象的onerror屬性是一個事件處理程序,頁面上出現異常時,error事件便在window對象上觸發,并把錯誤消息輸出到Javascript控制臺上,這種方式也稱為全局錯誤捕獲;如:
window.onload = function(){
show(); // 在onload事件中調用了一個不存在的函數
}
window.onerror = function(){
alert("出現錯誤");
return true;
}
獲取錯誤信息:
window.onerror事件處理程序在調用時可以傳5個參數,由這5個參數可以獲取詳細的錯誤信息;
window.onerror = function(sMessage, sUrl, sLine, sColumn, error){
console.log("Error:" + sMessage + " URL:" + sUrl + " Line:" + sLine + " Column:" + sColumn);
console.log(error);
return true;
}
onerror處理程序的返回值:
如果返回true,則阻止執行默認的事件處理程序,也就是將通知瀏覽器,事件處理程序已經處理了錯誤,不需要其他操作,反之會顯示錯誤消息;
某些元素也支持onerror; 但其處理函數沒有任何關于error信息的參數,如:
document.images[0].onerror = function(event){
console.log(event); // Event
console.log(event.type); // error
}
這里的event參數是一個類型為Event事件對象,其存儲的信息除了type返回了error,并沒有其他和錯誤相關的信息;
全局錯誤處理window.onerror通常不能恢復腳本繼續執行,但會給開發者發送錯誤信息;
window.onerror = function(error){
console.log(error);
}
show();
console.log("中止,不會被執行");
window.onload = function(){
console.log("也不會被執行");
}
可以是簡單的打印,也可以把錯誤保存到日志記錄里;
window.onerror就是綁定在window對象的error事件,也可以使用標準的添加事件偵聽的方式window.addEventListener(eventtype, handler),其需要兩個參數,eventtype為事件類型,在此為error,handler是事件處理函數,其需要一個參數event,一個ErrorEvent類型的對象,其保存著有關事件和錯誤的所有信息,如:
window.addEventListener("error", function(event){
console.log(event); // ErrorEvent
console.log(event.error); // Error對象
console.log(event.error.name);
console.log(event.error.message);
console.log(event.error.stack);
console.log(event.lineno); // 行
console.log(event.colno); // 列
console.log(event.filename);
});
在實際的開發中,這兩種方式都會被使用,只不過addEventListener有定的兼容必問題,所以要兼顧所有的瀏覽器且不太關注事件對象本身的話,就使用window.onerror;
當加載自不同域的腳本中發生語法錯誤時,為避免信息泄露,語法錯誤的細節將不會報告,只會返回簡單的"Script error.";
<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
console.log(msg); // Script error
console.log(url); // ""
console.log(lineNo); // 0
console.log(columnNo); // 0
console.log(error); // null
}
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>
可以針對同域和不同域的錯誤分開處理,如:
<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
var str_error = msg.toLowerCase();
var sub_string = "script error";
if(str_error.indexOf(sub_string) > -1)
alert("腳本發生錯誤,詳情請在控制臺查看");
else{
var message = [
'消息:' + msg,
'URL:' + url,
'行:' + lineNo,
'列:' + columnNo,
'錯誤對象:' + error
].join(" - ");
alert(message);
}
}
show();
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>
從上在的執行結果來看,error事件執行了兩次,原因是使用了兩個script,也就是當一個script有錯誤發生時,它只會阻止當前的script塊,而不會阻止其他的script塊;如:
<script>
show(); // 會捕獲
console.log("不會被執行");
myshow(); // 不會捕獲
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>
<script>
console.log("執行了");
demo(); // 會捕獲
console.log("不會被執行");
</script>
body元素的onerror特性,也可以充當事件處理函數,如:
<body onerror="alert('出現了錯誤');return true;">
注意,先注釋掉window.onerror等代碼;
此時,可以直接使用event、source、lineno、colno、error等屬性;
<body onerror="alert(event + '\n' + source + '\n' + lineno + '\n' + colno + '\n' + error);return true;">
當然了,也可以為body綁定error事件,此時各屬性,必須明確指定,如:
document.body.onerror = function(msg, url,lineno,colno,error){
alert(msg + '\n' + url + '\n' + lineno + '\n' + colno + '\n' + error);
return true;
}
try-catch語句:
try語句中為期待正常執行的代碼塊,當在try語句中發生錯誤,其余代碼會中止執行,catch語句就處理該錯誤,如果沒有錯誤,就跳過catch語句;try和catch必須成對出現;
try{
//code
[break]
}catch([exception]){
//code
}[finally]{
//code
}
// 如
try {
show();
alert("不能執行");
} catch (error) {
alert("出現一個錯誤:" + error);
} finally{
alert("管你呢");
}
try語句塊內的錯誤只會中止try語句塊中發生錯誤之后的邏輯代碼,并不會中止整個腳本的運行;執行try-catch語句,必須是運行時,運行時錯誤,也被稱為異常;try-catch語句中指定只能有一個catch子句;try-catch語句適合處理無法預知、無法控制的錯誤;finally常被用于無論結果是否有異常,都要執行的代碼,如:
try{
alert("try");
show();
alert("no exec");
}catch(error){
alert("catch");
}finally{
alert("finally");
}
alert("continute");
代碼執行的兩條路徑:如果沒有異常,執行路徑為:try->finally,反之為:try的部分->catch->finally;
一般用于關閉打開的鏈接和釋放資源;
var connection = {open: function(){},close: function(){},send: function(data){}}
// var data = "大師哥王唯"; // 注釋這一行,讓它產生異常
connection.open();
try{
connection.send(data);
}catch(exception){
console.log("出現一個錯誤");
}finally{
connection.close();
console.log("關閉了");
}
還有一個典型的應用,讀寫文件,如:
function openFile(){};
function writeFile(data){};
function closeFile(){};
openFile();
try{
writeFile();
}catch(error){
console.log(error);
}finally{
closeFile();
}
在try-catch-finally語句塊中的變量是全局變量:
try{
var name = "王唯";
show();
var city = "蚌埠";
}catch(error){
var age = 18;
console.log(name);
}finally{
var sex = "男";
console.log(name);
console.log(age);
}
console.log(name);
console.log(city);
console.log(age);
console.log(sex);
try-catch-finally與return:
如果直接在try-catch-finally語句塊中執行return,會拋出異常,如:
try {
console.log("try");
// return; // Illegal return statement 非法返回語句
console.log("try agin");
} catch (error) {
console.log(error);
// return; // Illegal return statement
}finally{
console.log("finally");
// return; // Illegal return statement
}
如:
function foo(){
try {
console.log("try");
return 1;
show();
console.log("try agin");
} catch (error) {
console.log(error);
return 2;
}finally{
console.log("finally");
return 3;
}
}
console.log(foo()); // 3
try-finally:
沒有catch從句,只有try-finally也可以,目的是,只確保執行開始和最終的過程,而不處理錯誤,如:
try{
console.log("try");
show();
}finally{
console.log("finally"); // 會執行
}
console.log("over"); // 不會執行,已中止
但此時,還是會拋出異常的,但此時,會在執行完finally后中止執行,并會查找外部的catch語句;
嵌套try-catch語句:
在catch子句中,也有可能會發生錯誤,所以就可以使用嵌套的try-catch語句,如:
try {
show();
console.log("不能執行");
} catch (error) {
console.log("出現一個錯誤:" + error);
try {
var arr = new Array(10000000000000000);
arr.push(error);
} catch (error) {
console.log("又出現了一個錯誤:" + error);
}
} finally{
console.log("管你呢");
}
也可以在try中嵌套try-catch-finally語句,如:
try{
try{
console.log("try");
show();
}catch(error){
console.log("error");
}finally{
console.log("finally");
}
}catch(error){
console.log(error);
}
一個比較典型的應用,就是處理json數據,如:
// var json = '{"name":"wangwei", "age": 18, "sex": "男"}';
var json = '{bad json}'; // Uncaught SyntaxError
var data = JSON.parse(json);
console.log(data.name);
console.log(data.age);
console.log(data.sex);
一量json數據發生錯誤,整個應用都會崩潰,所以應該使用try-catch,如:
<div id="msg">您的信息:</div>
<script>
window.onload = function(){
var msg = document.getElementById("msg");
try{
// var json = '{"name":"王唯", "age": 18, "sex": "男"}';
var json = '{bad json}'; // Uncaught SyntaxError
var data = JSON.parse(json);
msg.innerHTML += "姓名:" + data.name + ",年齡:" + data.age + ",性別:" + data.sex;
}catch(error){
msg.innerHTML = "開小差了,找不到你的信息";
}
}
</script>
當使用了try-catch語句,就不會將錯誤提交給瀏覽器,也就不會觸發error事件,如:
window.onerror = function(error){
console.log(error); // 不會觸發
}
try{
show();
}catch(error){
console.log(error);
}
Error錯誤對象:
在catch中會捕獲一個Error錯誤對象;該對象在Javascript解析或運行時,一旦發生錯誤,引擎就會拋出這個對象;如果沒有相關聯的try-catch捕獲該對象,就由瀏覽器輸出這個對象;
// ...
console.log("錯誤:" + error + " name:" + error.name + " message:" + error.message);
也可以通過Error的構造器創建一個錯誤對象,這個Error對象也可用于用戶自定義的異常;語法:new Error([message[, filename[, lineNumber]]]);
實例化Error對象,也可以不使用new關鍵字,如:
var error = new Error("自定義錯誤對象");
var error = Error("不使用new");
console.log(error);
console.log(error.name); // Error
console.log(error.message); // 自定義錯誤對象
Error錯誤對象屬性:
Error類還有6個子類,其可以通過錯誤對象的name屬性返回具體異常類的名稱:
// EvalError
try{
throw new EvalError("Eval異常");
}catch(error){
console.log(error);
console.log(error instanceof EvalError); // true
console.log(error.name); // EvalError
console.log(error.message); // Eval異常
}
// RangeError
var num = 1;
try{
num.toPrecision(500); // [pr??s??n] 精度
}catch(error){
console.log(error);
}
// ReferenceError
var x;
try {
x = y + 1;
} catch (error) {
console.log(error);
}
// SyntaxError
try{
eval("alert('wangwei)");
}catch(error){
console.log(error);
}
// TypeError
var num = 1;
try{
num.toUpperCase(); // 無法將數字轉為大寫
}catch(error){
console.log(error);
}
// URIError (malformed [?m?l?f??md]格式不正確,畸形的)
try{
decodeURI("%%%"); // 使用了非法字符
}catch(error){
console.log(error);
}
Error對象的message屬性是瀏覽器生成的用于表示錯誤描述的信息,因為這個屬性是特定于瀏覽器的,所以不同的瀏覽器上可能產生不同的錯誤信息,如:
try {
eval("a ++ b");
show();
console.log("執行了嗎?");
} catch (error) {
// SyntaxError:Unexpected identifier或
// SyntaxError:unexpected token: identifier
console.log(error.name + ":" + error.message);
}
使用name屬性判斷錯誤類型:
try {
eval("a++b");
} catch (error) {
console.log(error instanceof SyntaxError); // true
if(error.name == "SyntaxError")
console.log(error.name + ":" + error.message);
else
console.log("未知錯誤:" + error.message);
}
拋出異常:
throw語句的作用是手動中斷程序執行,拋出一個錯誤,一般用于有目的的拋出異常,也就是允許開發者可以創建自定義錯誤;
throw可以拋出任何類型的值,也就是說,它的參數可以是任何值;語法:throw error_object;error_object可以是字符串、數字、布爾或對象;
throw "出現一個錯誤";
throw 50666;
throw true;
throw new Object();
throw {
toString:function(){
return 'Error!';
}
}
function getRectArea(width, height){
if(isNaN(width) || isNaN(height))
throw '參數應該是number類型';
return width * height;
}
getRectArea("wangwei",10);
對于Javascript引擎來說,只要遇到throw語句,程序就會終止;
也可以拋出一個Error錯誤對象;Error對象的構造函數只有一個參數,
throw new Error("請再次嘗試");
其他Error子類對象也可以拋出:
throw new SyntaxError("...");
throw new TypeError("...");
throw new RangeError("...");
throw new EvalError("...");
throw new URIError("...");
throw new ReferenceError("...");
對于Error類和其子類來說,錯誤對象的name就是其構造函數的名稱,message是其構造函數的參數;
當拋出異常后,throw之后的語句將不會執行,并跳到相關聯的catch語句中進行處理,如:
<h1>請輸入18-99之間的數字</h1>
<input id="txtInput" type="text" />
<button id="btn">確定</button>
<p id="msg"></p>
<script>
function myFun(){
var msg,x;
msg = document.getElementById("msg");
msg.innerHTML = "";
x = document.getElementById("txtInput").value;
try{
if(x == "") throw "空的";
if(isNaN(x)) throw "不是數字";
x = Number(x);
if(x < 18) throw "太小";
if(x > 99) throw "太大";
msg.innerHTML = "輸入的值正確:" + String(x);
}
catch(error){
msg.innerHTML = "輸入的值不正確:" + error;
}
}
var btn = document.getElementById("btn");
btn.onclick = myFun;
</script>
也可以在某個語句塊的外部捕獲throw異常,如:
function sum(a,b){
if(arguments.length < 2)
throw new Error("需要兩個參數");
else
return a + b;
}
try{
console.log(sum(18));
}catch(error){
// Error:需要兩個參數
console.log(error.name + ":" + error.message);
}
可以通過instanceof判斷異常的類型來特定處理某一類的異常,例如可以區分瀏覽器拋出的異常和開發人員拋出的異常,如:
function sum(a,b){
if(arguments.length < 2)
throw new Error("需要兩個參數");
if(isNaN(a) || isNaN(b))
throw "參數是不是Number類型";
return a + b;
}
try{
console.log(sum(18,12));
}catch(error){
if(error instanceof SyntaxError)
console.log("語法錯誤:" + error.name + ":" + error.message);
else if(error instanceof Error)
console.log(error.name + ":" + error.message);
else
console.log(error);
}
注:判斷Error類型要放到if的最后一個條件;
即使在catch語句中,還可以根據實際情況,再次拋出異常,此時,其可以被外部的try-catch語句塊捕獲(如果存在的話);
當發生異常時,代碼會立即停止,僅當有try-catch語句捕獲到異常時,代碼才會繼續執行;其背后運行的原理是,當發生異常,JavaScript解釋器會立即停止執行的邏輯,并跳轉到就近的try-catch異常處理程序,如果發生異常的代碼塊中沒有相關聯的catch從句,解釋器會檢查更高層的閉合代碼塊,看它是否有相關聯的異常處理程序,以此類推,直到找到一個異常處理程序為止;如果發生異常的函數中沒有處理它的try-catch語句,異常將向上傳播到調用該函數的代碼,如此,異常就會沿著Javascript的語法結構或調用棧向上傳播;如果沒有找到任何異常處理程序,JavaScript將把異常當成程序錯誤來處理,并通過瀏覽器報告給用戶;
自定義錯誤類型:
可以基于Error類來創建自定義的錯誤類型,此時可以使用throw拋出自定義的異常類,或通過instanceof來檢查這個異常類的類型,新類型需要實現name和message屬性;
function CustomError(message){
this.name = "CustomError";
this.message = message || 'Default Message';
this.stack = (new Error()).stack;
}
// CustomError.prototype = new Error();
// 或者
CustomError.prototype = Object.create(Error.prototype);
CustomError.prototype.constructor = CustomError;
try{
var name = "jingjing";
if(name !== "wangwei")
throw new CustomError("自定義的錯誤類型");
}catch(error){
console.log(error.message);
}
小示例:
function UserException(message){
this.name = "UserException";
this.message = message;
}
function getMothName(m){
m = m - 1; // 調整月份數字到數組索引(1=Jan,12=Dec)
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
if(months[m] != undefined)
return months[m];
else
throw new UserException("Invalid Month No");
}
try{
var myMonth = 15;
var monthName = getMothName(myMonth);
}catch(error){
var monthName = "未知";
console.log(error.name + ":" + error.message);
}
小示例:驗證電話號碼,如:
function Telephone(num){
num = String(num);
var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
if(pattern.test(num)){
this.value = num.match(pattern)[0];
this.valueOf = function(){
return this.value;
};
this.toString = function(){
return String(this.value);
}
}else{
throw new TelephoneFormatException(num);
}
}
function TelephoneFormatException(value){
this.name = "TelephoneFormatException";
this.message = "電話號碼格式不正確";
this.value = value;
this.toString = function(){
return this.value + ":" + this.message;
}
}
// 應用
var TELEPHONE_INVALID = -1;
var TELEPHONE_UNKNOWN_ERROR = -2;
function verifyTelephone(num){
try{
num = new Telephone(num);
}catch(error){
if(error instanceof TelephoneFormatException)
return TELEPHONE_INVALID;
else
return TELEPHONE_UNKNOWN_ERROR;
}
return num.toString();
}
console.log(verifyTelephone("010-66668888"));
console.log(verifyTelephone("13812345678"));
console.log(verifyTelephone("138123456")); // -1
console.log(verifyTelephone("wangwei")); // -1
常見錯誤:
由于javaScript是松散類型的,也不會驗證函數的參數,因此錯誤只會在運行時出現;一般來說,需要關注三種錯誤:類型轉換錯誤、數據類型錯誤、通信錯誤;
類型轉換錯誤:
一般發生在使用某個操作符,或者使用其他可能自動轉換值的數據類型的語言結構時;
function output(str1,str2,str3){
var result = str1 + str2;
if(str3)
result += str3;
return result;
}
console.log(output(1,2,3));
console.log(output(1,2));
console.log(output(1,2,0));
console.log(output(1,2,"wangwei"));
這就是一個非常典型的與期望不一致的方式;
數據類型錯誤:
在流控制語句中使用非布爾值,是極為常見的一個錯誤來源,為避免此類錯誤,就要做到在條件比較時確定傳入的是布爾值,例如,把if語句改成:if(typeof str3 == 'number');
所以在使用某個變量或對象時,一定要適當地檢查它的數據類型,如:
function reverseSort(values){
// if(values){
// values.sort();
// values.reverse();
// }
if(arguments.length > 0){
if(!Array.isArray(values))
return [];
else{
values.sort();
values.reverse();
return values;
}
}
return [];
}
var arr = [3,2,6,9,4];
// var arr = 100; // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));
另一個常見的錯誤就是將參數與null值進行比較。與null進行比較只能確保相應的值不是null和undefined。要確保傳入的值有效,僅檢測null值是不夠的;
function reverseSort(values){
// if(values != null){ // 任何非數組值都會導致錯誤
if(values instanceof Array) // 非數組值被忽略
values.sort();
values.reverse();
}
return values;
}
var arr = [3,2,6,9,4];
// var arr = 100; // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));
// 或
function reverseSort(values, fun){
if(values instanceof Array){
if(fun != null && typeof fun === "function")
values.sort(fun);
else
values.sort();
}
return values;
}
var arr = [3,2,6,9,4];
console.log(reverseSort(arr, function(a,b){
return a > b ? -1 : 1;
}));
通信錯誤:最典型的就是Ajax應用,用其可以動態加載信息,但是,javascript與服務器之間的任何一次通信,都有可能會產生錯誤;
調試技巧:
使用警告框: 這是最簡單、流行的方式,如:
function test(){
alert("函數內");
var iNum1 = 5, iNum2 = 10;
alert(iNum1);
var iResult = iNum1 + iNum2;
alert(iResult);
}
test();
拋出自定義錯誤:
function assert(bCondition, sErrorMessage){
if(!bCondition)
throw new Error(sErrorMessage);
}
function divide(iNum1, iNum2){
assert(arguments.length == 2, "divide需要兩個參數");
assert((!isNaN(iNum1) && !isNaN(iNum2)), "需要Number類型");
return iNum1 / iNum2;
}
console.log(divide(10,2));
console.log(divide(10,"c")); // 異常
// 或
try{
console.log(divide(10,"c"));
}catch(error){
console.log(error.name + ":" + error.message);
}
Javascript校驗器:
jslint的主要目的是指出不合規范的js語法和可能的語法錯誤,包括一些不良代碼;官網:http://www.jslint.com/
如以下,會給出警告:
調試器:
Javascript自身不具備調試器,但目前所有的瀏覽器可以使用自身的調試器;
IE調試:
啟用IE的調試功能:
菜單“工具”|“Internet選項”命令,打開“Internet選項”對話框,在“高級”選項卡中,找到兩個“禁用腳本調試”復選框并取消;開始調試,調試的主要工作是反復地跟蹤代碼,找出錯誤并修正;
設置斷點:
在調試程序窗口中,將光標移動到需要添加斷點的行上,按一次F9鍵或單擊,當前行的背景色變為紅色,并且在窗口左邊界上標上紅色的圓點,當程序運行到斷點時就會暫停;
運行調試:
單擊繼續或按F5進行逐步運行調試;F10步進、F11步入,都可以繼續向下執行;將鼠標移動到變量名上時,會顯示變量當前時刻的值;或者在右側的“監視”窗格中可以觀察該變量的值;點擊變量信息框中的變量值或右側“監視”空格中的變量值可以修改變量的當前值;更多的調試操作:查看調用關系、監視特定變量的值等;
// 示例
var balance = 200.0; //
var willPay = 20.0;
function pay(_balance, _pay){
return _balance - _pay;
}
function showBalance(){
debugger;
var blnc = pay(balance,willPay);
alert("當前余額:" + blnc);
}
showBalance();
日志輸出:
程序運行時,有些中間數據需要記錄,以便檢查程序運行的狀態;對于JavaScript記錄中間數據通常是以日志的形式記錄需要記錄的數據,再發送到服務器上保存起來;日志記錄的內容可以是任意的信息,根據開發者的需要而定;
*請認真填寫需求信息,我們會在24小時內與您取得聯系。