整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML知識點匯總

          前的技術總監喊我加入他們的接私活團隊,說他們缺一個前端工程師,不缺后端。可我一直是做后端開發的,前端代碼寫的實在是很少,沒有經驗,寫起來肯定很慢了,所以想對前端的HTML知識點做一個匯總

          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元素包含了可見的頁面內容。

          HTML元素概念

          開始標簽

          元素內容

          結束標簽

          <h1>

          一個標題

          </h1>

          <br/>

          換行


          • HTML 元素以開始標簽起始 ,以結束標簽終止。
          • 元素內容在其中間,如<h1>html元素概念</h1>。
          • 有些元素沒有內容,沒有結束標簽,如<br/>。

          HTML屬性概念

          下面是適用于大多數 HTML 元素的屬性:

          屬性

          描述

          class

          為元素定義一個或多個類名

          id

          定義元素的唯一id

          style

          設定元素的行內樣式

          實例:<a href="toutiao.com">頭條</a>

          • HTML元素可以設置屬性
          • 屬性描述于開始標簽
          • 屬性以鍵/值對的形式出現


          標題元素

          <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>

          哈哈哈,調皮一下

          HTML表格

          表格由 <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>  

          HTML列表

          <body>
              <!-- 有序列表 數字進行標記-->
              <ol>
                  <li>蘋果汁</li>
                  <li>草莓汁</li>
              </ol>
              <!-- 無序列表 粗體圓點標記-->
              <ul>
                  <li>咖啡</li>
                  <li>飲料</li>
                  <li>茶
                      <!-- 嵌套列表 -->
                      <ol>
                          <li>紅茶</li>
                          <li>綠茶</li>
                      </ol>
                  </li>
              </ul>
          </body>

          HTM區塊

          • 塊級元素在瀏覽器顯示時,會以新行來開始和結束。如<h1>,<p>,<ul>,<table>
          • 內聯元素在顯示時不會以新行開始。如<b>, <td>, <a>, <img>

          <div> 元素

          <span> 元素

          塊級元素

          內聯元素

          HTML 元素的容器

          文本的容器

          搭配css可對內容塊設置樣式屬性

          搭配css可為文本設置樣式屬性

          HTML 布局

          <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>

          HTML表單

          form表單有兩個屬性:

          action

          method

          定義了服務端的文件名

          數據的提交方式

          對接收到的數據進行處理

          有POST與GET方法

          • post:表單數據會包含在表單體內然后發送給服務器,用于提交敏感數據,如用戶名與密碼等。
          • get:默認值,表單數據會附加在action屬性的URL中。
          <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>

          HTML框架

          <body>
              <!-- 通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。 -->
              <iframe src="test.html" width="200" height="200"></iframe>
          </body>

          height 和 width 屬性用來定義iframe標簽的高度與寬度

          HTML <head> 元素介紹

          <head> 元素定義了文檔的信息,包含了所有的頭部標簽元素。常用的標簽元素如下所示。

          <meta>

          文檔的元數據

          <base>

          頁面鏈接標簽的默認地址

          <title>

          文檔的標題

          <link>

          外部樣式資源

          <style>

          客戶端腳本文件

          <script>

          文檔樣式文件

          <meta> 標簽詳解

          <!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/數值/圖像等多種類型的復選框形式,最后總結設計復選框時的五點注意事項,全面掌握復選框的設計~

          01 基礎復選框

          最基礎的復選框由復選框+文本標簽組成。點擊選中,會有一個復選框選中的效果,取消選中時復選框顯示為灰色描邊的方塊。

          狀態

          復選框常見的三種基本狀態是:未選中、選中和不確定狀態。

          不確定狀態常用的場景是在級聯選擇器中,例如一級復選框能控制所有二級復選框的內容。如果有的二級勾選了,有的沒勾選,那么一級復選框的狀態就會判定為不確定。

          尺寸

          在用一個產品中,建議頁面中的所有復選框都使用相同的尺寸,這樣有助于保持設計一致性。當然在某些特殊的場景下,也可以更改復選框的尺寸來靈活適應。

          例如,某些頁面的復選框比其他頁面的復選框更重要或者更頻繁使用,就可以將它們放大來吸引用戶的注意力。

          是否需要設計不同尺寸的復選框取決于復選框的數量、標簽的長度、選項的重要性等因素。

          將以上提到的復選框的不同狀態和尺寸混合起來,可以組合成基礎的復選框組件。

          02 帶有描述的復選框

          復選框下方的描述通常用來解釋說明該復選框的功能,或者為復選框提供功能說明。

          這種額外的描述性文字盡量控制在兩行以內,為用戶帶來更清晰的體驗。

          設計分析

          如果對這種類型的復選框采用左居中對齊方式,將復選框位于中心,看起來就會很奇怪:

          復選框應該始終保持與主文字左對齊,可以在距頂行幾個像素的地方對齊復選框。

          03 帶提示icon的復選框

          復選框上的信息圖標也用來解釋說明關于復選框的附加信息。當鼠標懸停在信息圖標上時,顯示對應的信息提示。

          設計分析

          這里的對齊方式與基礎復選框的對齊方式相同,保持水平對齊所有內容。

          04 帶附加文本的復選框

          這里的附加文本常用來展示數量。例如在產品列表的過濾器中,在左側顯示屬性(顏色、尺寸或品牌),在右側顯示具體的數量。

          又或者在CRM系統中,用來過濾不同狀態的任務量。

          05 帶圖片的復選框

          通過復選框+圖片相結合的展示方式,用戶更容易理解他們正在選擇什么。例如看到有同事照片和信息的復選框,就更容易將任務分配給他。

          設計分析

          這種類型的復選框中,首先要保持復選框與圖像水平居中對齊。如果有兩行字段,需要將字段與圖像保持上下對齊,讓整體更協調。

          06 復選框設計注意點

          1) 復選框和單選按鈕視覺上有差異

          在產品設計中,方塊通常表示復選框,圓圈用來表示單選按鈕。這種視覺上的區別有助于用戶理解兩種控件之間的區別,并正確地使用它們。

          2)對單個復選框進行右對齊

          如果字段文字較多出現折行的情況,復選框應該始終與第一行字段保持對齊,而不是跟隨整個文本框居中對齊。

          否則就會產生類似右圖的效果,看起來很奇怪。

          3)盡量垂直對齊復選框

          在設計中,盡可能使用垂直對齊復選框的原因:

          可以讓選項更易于閱讀和理解;讓復選框組更加緊湊,節省空間;垂直對齊能讓每個復選框在視覺上區分更加明顯。

          當然在某些場景中,也可以采用水平對齊的方式,具體用法需要靈活選擇。

          4)超過7個選項使用多選標簽

          多選標簽能夠很好地替代具有七個以上選項的復選框(5±2規則)。允許用戶輕松點選和取消選擇多個選項,而不需要在復選框列表中再次去選擇并取消。

          5)擴大可點擊區域

          這可能是新手設計師和開發最常犯的錯誤之一。可點擊區域應該比帶有復選框和文本的區域要大得多,這樣能方便用戶操作和選擇。

          最后

          以上是「復選框」的類型+用法設計分析,希望這些學習能幫助大家更快更好地進行表單設計!

          專欄作家

          作者: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提供了兩種處理錯誤的方式:

          • BOM包含一個onerror事件處理函數,該函數通常被綁定在window對象或image對象上;
          • ECMAscript定義了try…catch結構來處理異常;

          onerror事件處理函數:

          window對象的onerror屬性是一個事件處理程序,頁面上出現異常時,error事件便在window對象上觸發,并把錯誤消息輸出到Javascript控制臺上,這種方式也稱為全局錯誤捕獲;如:

          window.onload = function(){
              show(); // 在onload事件中調用了一個不存在的函數
          }
          window.onerror = function(){
              alert("出現錯誤");
              return true;
          }

          獲取錯誤信息:

          window.onerror事件處理程序在調用時可以傳5個參數,由這5個參數可以獲取詳細的錯誤信息;

          • message:錯誤信息,描述錯誤的一條消息;
          • URL:引發錯誤的Javascript所在的文檔的URL;
          • line:文檔中發生錯誤的行數;
          • column:發生錯誤的列數;
          • error:錯誤對象,這個error也稱為全局錯誤對象;
          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]]]);

          • message:可選,錯誤描述信息;
          • fileName:可選,非標準,被創建的Error對象的fileName屬性值,默認是調用Error構造器代碼所在的文件的名字; 但大部分瀏覽器沒有實現;
          • lineNumber:可選,非標準,被創建的Error對象的lineNumber屬性值,默認是調用Error構造器代碼所在的文件的行號;但大部分瀏覽器沒有實現;

          實例化Error對象,也可以不使用new關鍵字,如:

          var error = new Error("自定義錯誤對象");
          var error = Error("不使用new");
          console.log(error);
          console.log(error.name);  // Error
          console.log(error.message);  // 自定義錯誤對象

          Error錯誤對象屬性:

          • name:表示錯誤類型的字符串;
          • message:實際的錯誤信息;

          Error類還有6個子類,其可以通過錯誤對象的name屬性返回具體異常類的名稱:

          • EvalError:錯誤發生在eval()函數中;
          • RangeError:數值超出javascript可表示的范圍;;
          • ReferenceError:使用了非法或不能識別的引用;
          • SyntaxError:發生了語法錯誤;
          • TypeError:操作數的類型不是預期所需的;
          • URIError:在encodeURI()或decodeURI()函數中發生了錯誤;
          // 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/

          如以下,會給出警告:

          • 語句未使用塊標記;
          • 一行的結尾未以分號結束;
          • 用var聲明一個已在使用的變量;
          • with語句;

          調試器:

          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記錄中間數據通常是以日志的形式記錄需要記錄的數據,再發送到服務器上保存起來;日志記錄的內容可以是任意的信息,根據開發者的需要而定;


          主站蜘蛛池模板: 国产精品一区二区综合| 亚洲一区二区三区日本久久九| 中文字幕日本一区| 亚洲综合无码一区二区痴汉 | 国产乱码精品一区二区三区麻豆 | 国产精品视频一区| 末成年女A∨片一区二区| 国产观看精品一区二区三区| 在线电影一区二区三区| 亚洲熟妇无码一区二区三区导航 | 亚洲国产精品一区二区久久| 国产色情一区二区三区在线播放| 精品成人一区二区三区免费视频| 成人精品视频一区二区三区尤物| 精品视频一区二区三三区四区| 文中字幕一区二区三区视频播放| 国产一区二区内射最近更新| 精品久久久久一区二区三区| 高清一区二区在线观看| 波多野结衣中文字幕一区| 国产一区二区在线观看视频| 无码国产精品一区二区高潮| 国产在线不卡一区| 日本精品少妇一区二区三区 | 在线精品国产一区二区| 99精品国产一区二区三区不卡| 91久久精品一区二区| 国产精品合集一区二区三区| 中文字幕无线码一区二区| 蜜桃AV抽搐高潮一区二区| 韩国精品一区二区三区无码视频| 精品国产一区二区三区香蕉事| 日本免费一区二区三区最新| 一区在线观看视频| 亚洲一区二区三区无码影院| 日韩精品一区二区三区大桥未久| 无码人妻少妇色欲AV一区二区| 亚洲无圣光一区二区| 福利国产微拍广场一区视频在线| 亚洲Aⅴ无码一区二区二三区软件 亚洲AⅤ视频一区二区三区 | 国产一区二区视频在线观看|