前端开发学习笔记（一）深入浅出Javascript
從事開發工作已經有十幾年時間了，但一直沒有真正涉獵WEB開發，這在當今IT業界聽起來有些不可思議哈。從今天開始靜下心來，全面深入的學習WEB開發的有關知識。將學習的體會和要點記錄下來，以作備忘。
深入淺出Javascript一共12章，按照章節記錄。
第一章
前端開發涉及到三個層面：HTML（內容） + CSS（外觀） + Javascript（交互/行動）
JS腳本不論在<script>塊中 還是 嵌入HTML中，都應以";"分號作為結束符。這是一個規范的寫法
中文網頁應在<head>塊中設置字符集 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>，否則有可能出現亂碼
第二章 存儲數據
數據按類型分為三種基本類型：
數據按用途分為
標識符命名規則
常量必須在定義時進行初始化賦值，否則后續無法賦值。未初始化的變量/常量值為"undefined"
變量/常量 在定義后就會分配空間，變量的類型是在設置變量值得同時建立，可以隨值類型而改變
重新載入網頁時，網頁內包含的變量值重新設置為初始值（生命周期）。
應用加法前，請確認相加的數據類型是你想要的。常見的錯誤是將字符進行相加，系統會錯誤的處理為字符串的合并導致錯誤結果。如 1+2=3；'1'+'2'='12'
第三章 客戶端
Javascript腳本服務于客戶端，瀏覽器加載后起作用
間隔定時器setTimeout() 和 循環定時器setInterval()
窗口尺寸Document.body.clientHeight 窗口尺寸不等同于瀏覽器的尺寸
變量生命周期 & cookie：
Javascript于瀏覽器關閉或網頁重新載入時摧毀所有變量；
使用Cookie可以延長腳本變量生命周期（持久性），cookie是一種便利、經濟的數據存儲方案，非常適合在客戶端存儲小量的非關鍵數據。
cookie也有有效期，如果不設置有效期則生命周期等同于變量；cookie命名在網頁內唯一，不同瀏覽器間不能共享；且只限于存儲較少的文本數據（少于4K）
有的瀏覽器不支持cookie，可以使用Navigator.cookieEnabled來檢查
第四章 決策
也就是我們一般所講的判斷語句，這一章主要介紹了兩種常用的判斷語句：if語句和switch語句。
if語句，一般用于true/false的判斷。其條件測試句必須只能是boolean類型的，需要注意的是條件運算符“==”不要誤寫成“=”，這樣會導致不可預期的問題。
if語句可以進行嵌套，但是嵌套的if語句會變得復雜，不利于代碼的維護。
switch語句，多重選項專用，與if語句的區別在于：檢測數據不可為運算式，必須是一段單純的數據。
switch語句，配合case和break使用，盡量添加默認條件default，可以避免遺漏。
第五章 循環
本章節介紹了循環語句和數組。
數組是保存一組數據的變量，等同于對象。數組中的變量最好是相同的類型，這樣便于后續的處理；數組使用“鍵”來存取“值”。
循環語句有兩種for循環和while循環。
for循環一般用于已知循環次數的情況，在for語句中初始化循環變量、控制循環條件、控制循環變量。
while循環一般用于未知循環次數的情況，循環變量在while語句前初始化，while語句只控制循環條件，循環變量的控制必須在while的動作內。
for循環和while循環可以相互替代。
break語句用于中斷循環，直接退出；continue語句用于中斷并繼續下一次循環。
第六章 函數
首先JavaScript是函數式腳本語言，在其中函數的使用至關重要。
作為入門者對函數的理解：
了解函數和HTML事件的聯結關系，畢竟大部分時候函數的調用是由事件發起的。
第七章 表單與驗證
表單用于正常的獲取用戶數據；
在表單中輸入的數據必須經過有效性驗證采用送到后臺；
驗證表單域可以使用兩種方式獲取：ID和NAME，但是一般情況下推薦使用ID方式，即getElementById
驗證數據的時機是在輸入域失去焦點后，即onBlur事件觸發后，可以驗證長度、類型、格式等等
在復雜輸入域的驗證中（例如：郵箱）應使用正則表達式。
正則表達式：設計用于匹配文本模式，以斜線開始和結束。/ expression /
\d ：任何數字
.?? ：任何字符（換行符除外）
\s ：空格（空白、TAB、換行、回車）
^? ：模式開始
$? ：模式結束
例如：/^\d\d\d\d\d-\d\d\d\d$/ 匹配美國的#####-####郵編號碼
* ：前面的子模式必須出現0次/多次（也就是說可以沒有）
+ ：前面的子模式必須出現1次/多次
?? ：前面的子模式必須出現0次/1次
{n}：必須出現n次
{min,max}：必須出現的次數介于最少和最多之間均可
this|that ：可供選擇的模式
() ：集合字符/子模式
例如：/^\d{5}-\d{4}$/與1中的例子同樣表達美國的郵編號碼
例如：/^\d{2}\/\d{2}\/（\d{2}|\d{4})$/ 表示MM/DD/YYYY 或者MM/DD/YY
var regExp = "/^\d{5}-\d{4}$/";regExp.test(inputField.value);
字面量是正則表達式的變量，就是正則表達式對象；正則表達式可以使用test方法來對輸入的數據進行驗證
[characterClass] 提供控制可選字符的有效率方式例如：/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/ 表示郵箱驗證
郵箱名部分[\w\.-_\+]+ 可以輸入字符：字母、數字、. - _ +，并且必須輸入一個
域名后綴 [\w-]+ 可以輸入字符：字母、數字，必須輸入一個
域名后綴 (\.\w{2,4})+ .com類的后綴 可以輸入字符：字母、數字，長度2-4個，并且至少有1組
第八章 駕馭網頁 DOM
DOM提供對腳本友善的網頁結構和內容的視圖，可以把頁面看成一顆節點樹。
提到了微軟IE瀏覽器支持的非標準特性 innerHTML，支持混編的html，可以達成更多操控功能
節點樹中節點的類型：
改變節點文本的步驟（由于文本中任何標簽在DOM中都是單獨的節點，因此一個帶有HTML屬性的文本就被分割為多個元素節點和文本節點）
第九、十章 對象（為數據帶來生命）
數據 + 行為 = 對象
變量 + 函數
特性 + 方法
跟OOP中的說法一致。
構造函數，名稱要首字母大寫，等同于對象名稱，在構造函數中使用this關鍵字設置特性值
JavaScript中類的定義并不像OOP語言先聲明再實現，而是直接進行類的實現。在構造函數中使用this特性設置的變量就是該類的屬性。也可以理解為該函數就是類的定義
一些對象沒有屬性只有方法和常量，也就是說是把一些相關的常量和方法組織在一個類中，方便使用（例如:Math類），這被稱為組織對象。
function Class(? ,? ) {
? this.id = "";
? this.name = "";
? this.talk = function(){;}
}
以上對象定義了兩個屬性（ID和NAME）以及一個方法talk。
但是這種定義方法的方式被稱為（實例方法）也就是說在構造函數中使用this關鍵字定義的方法。這樣的定義存在很大的問題，體現在創建（new）一個新的實例時，方法也會分配空間，這是不合理的，因為方法是針對對象所有實例的，而屬性是針對不同實例的。這樣勢必會造成內存的大量占用有可能導致性能問題。
解決辦法：使用prototype對象。prototype對象用于設定隸屬于類層的特性和方法，也就是說prototype對象中的屬性和方法是在類層面的，為所有實例所共有。
class.prototype.method=function(){;} 采用這種方式定義方法，就可以解決問題。
也就是說在正常的構造函數中，只對特性（屬性）進行創建和初始化。
另外：類層的特性、方法的訪問，必須通過實例對象或者在對象內部使用this關鍵字，而不能通過類來訪問；而類方法不能訪問實例特性，但可以訪問類特性（但必須使用class.prototype.特性 來訪問，而不能直接class.特性 來訪問）
var inst = new class();? inst.method（合法）；class.method（非法） class.talk=function(){this.method();}（合法）
利用prototype對象，還可以用來擴展標準對象。
OOP設計通常關系到小心地架構對象與它周遭的環境代碼
如：排序可以放到類方法中；
函數自變量的傳入，后面的自變量是可選的。如有兩個自變量Arg1和Arg2，則可以傳入Arg1, Arg2 或者 Arg1 或者 一個也沒有，但不能只傳入Arg2。
第十一章 缺陷
常見的缺陷包括：語法錯誤、邏輯錯誤、運行時錯誤，這三蟲客。
本書中提到了一些常見的錯誤：
第十二章 動態數據（Ajax）
以動態數據建造的網頁稱為數據驅動網頁，也就是說HTML只提供內容框架，而數據是動態加載的。
Ajax讓網頁能夠動態接受網絡服務器的數據，最重要的一個對象是XmlHttpRequest。
使用Ajax涉及到了XML、XmlHttpRequest對象的使用、回調函數、服務器端代碼、請求類型、請求數據等相關知識。
?
?
?
本書用了5天時間完成了閱讀，對于書中提到的大部分概念和注意事項都能夠理解。
本書適合零基礎的入門者，可以對Javascript有一個初步的認識和了解。
?
轉載于:https://www.cnblogs.com/lijie726/p/4912702.html
總結
以上是生活随笔為你收集整理的前端开发学习笔记（一）深入浅出Javascript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android自定义AlertDialo
- 下一篇： 前端开发总结--之关于FusionSph