程序員花2.5小時總：JavaScript精簡之說

JavaScript詳說

一：JavaScript概述：

首先JavaScript是一種腳本語言。我們平時在做網站的時候，前端使用HTML和CSS樣式，後台可能用PHP或者是JSP......，那麼JavaScript是負責什麼呢？她可以修改HTML代碼（改善用戶體驗）、可以在不刷新頁面的情況下與伺服器進行交互、還可以存儲數據。 前面我們說到的改善用戶體驗這一塊，JavaScript更是有JQuery庫，對於頁面美化效果更是一件讓人津津樂道的事情（我們暫且先不談論JQuery）。

二：JavaScript如何寫？寫在哪？

JavaScript如何寫：和面向對象語言Java相似，JavaScript也有函數（方法）、變數、條件、循環語句......

寫在哪：和CSS樣式表相似。JavaScript可以有：內聯腳本代碼、嵌入式腳本代碼、外聯時代碼。 他們的優先順序是：內聯>嵌入>外聯。

三：JavaScrip對DOM元素的操作：

四：JavaScript對DOM元素的定位：

五：JavaScript處理DOM元素中的屬性節點：

六：JavaScript處理文本節點可以使用innerHTML="";的方法

對上面的小結（代碼），下面做的案例是，在一個div中動態的創建一個元素，並且寫上Text文本，最後添加屬性，並且運用css樣式修飾該節點：

七：HTML中節點之間的關係，以及常用操作節點的方法：

八：JavaScript有很多常用的數據類型，這裡和Java是一樣的，我說一下關於數組：

（有一點需要著重說的是：JavaScript中沒有int,boolean...因為JavaScript對於變數的是弱類型的，只要關鍵字var聲明該變數就好。這樣做有好處也有壞處：壞處就是，在後期維護代碼的時候，有時候不太知道這個變數到底裝的是什麼呢；優點就是，聲明變數變得更加的方便）

這篇文章分享之前我還是要推薦下我自己的前端群：657-137-906，不管你現在是轉行還是自學，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。。

1、Java中的數組定義：String str=new String{"張三",「李四","王五"};

JavaScript中數組的定義：var str=["張三",「李四","王五"];

2、下面在代碼中說明數組中各個方法的作用: （下面使用了join、slice、pop、concat、shift、unshift方法）

九：JavaScript中靈活的對象（比Java中的對象靈活的多）：

為什麼說『靈活』，這是因為：JavaScript中的對象裡面可以存放任意類型的數據，布爾類型，字元串類型，數組類型，甚至是一個函數。最後在腳本中，如果想要訪問對象裡面的數據，可以直接通過對象名稱.數據前面的key即可。

十：網路存儲數據：

1、首先必須要說的是，我們看到網路存儲數據，大家很可能會想到使用cookies技術，事實上，cookies這項技術非常的不安全。使用cookies保存一些用戶隱私信息是絕對不推薦的；

2、現在很多瀏覽器支持用戶關閉cookies的方式，如果Web開發中還涉及了cookies這門技術，那樣的話還能實現功能的話就是無稽之談了。

3、可以使用localStorage和sessionStorage來替代cookies存儲，下面展示一下，localStorage的用法，貼上代碼：

十一：JavaScript中幾個函數的區別：（匿名函數、回調函數、普通函數）：

1、普通函數：關鍵字function來標識，要有一個函數名稱（和匿名函數最大的區別），還有一對大括弧包裹上一些語句，便是普通函數了。

2、回調函數：回調函數也非常的好理解，就是一個函數，在另一個函數中被觸發調用便是回調函數了。

3、匿名函數：首先我們要對變數的作用域有所了解（全局變數和局部變數就是一個範例），匿名函數，他也是一種函數，只不過沒有函數名稱而已，因為沒有名稱所以不能靠調用，所以匿名函數建立之後，函數裡面的語句會自動執行。那麼，你是否在想，既然有那麼大的局限，JavaScript還要引入匿名函數有什麼作用呢：問的好。我再開頭處已經暗示了。加入你有一些變數，不在其他普通函數中，但又不想讓他成為全局變數，那麼這個時候最好的方式就是將變數放在匿名函數中了。

十二：JavaScript中事件監聽器：

步驟1：首先得到某一個元素的節點；

步驟2：通過if判斷，當前客戶使用的瀏覽器是否支持addEventListener，如果支持，那麼通過得到的DOM元素.addEventListener("事件","匿名函數",false/true)如果當前客戶端不支持addEventListener則使用attachEvent("事件","匿名函數");

步驟3：使用完畢之後，可以解除該事件監聽，這和步驟2有點相似。首先，通過該DOM元素，在if中判斷.removeEventListener("事件","匿名函數",false/true)，如果不存在，那麼則使用detachEvent("事件","匿名函數")來解除事件。

十三：JavaScript中有很多事件處理，分為幾類：鍵盤處理事件，焦點處理事件，滑鼠處理事件和數據改變事件。這裡比較可以查看W3C來學習一下，JavaScript中的事件。

十四：終於講到了一個重點內容：Ajax（非同步通信）。她的作用非常多。最讓人著迷的就是她的響應機制。 無刷新，更新頁面。

既然，Ajax可以在無刷新的可以和伺服器通信，那麼首先了解一下，正常情況下，客戶端是如何和伺服器通信的呢？請看圖片：

看一下我繪的X-Mind，對Ajax開發流程圖：

看完上面的理論知識，現在，耐心的結合理論，看完我下面給出的案例。你一定會高清Ajax的來龍去脈。

下面貼上一個簡單的實例吧：

功能介紹：利用Ajax完成客戶上傳圖片的實時預覽。

首先，先給出前端代碼（不要著急，我會在重要的地方都加上註釋）：

/*

前台所做的事情：首先先創建一個表單，在表單上，首先出現一個空白頭像的圖片，但客戶點擊瀏覽完圖像之後，Ajax大顯神威，將input框中的value取到，后然進行正則表達式將『\』換成『/』（因為JavaScript中沒有replaceAll方法，想要全部替換隻能使用正則表達式和replace方法替換全部），Ajax將數據發送給後台，後台進行處理之後，將地址返回給Ajax，最後，Ajax拿到伺服器響應之後，動態的創建一個img元素，將伺服器返回的地址傳入，這樣，客戶剛剛瀏覽的圖片就可以非同步無刷新的情況下展示出。（不要忘了讓起初的那張空白頭像hidden吧）。

*/

其次，給出後台代碼：

/*

相比剛剛的前台，後台的代碼就簡單了很多，只要將Ajax傳遞的數據，傳遞給Ajax就行。

*/

最後，讓我們運行項目，查看結果吧：

這樣的例子還有很多，比如說，實現百度中的查找框，你可以把所有的關鍵字封裝成JSON數據，放在後台，前台呢，隨著搜索框使用AJax，不斷的和後台交互，最終實現，百度搜索框的功能，快動手試試看吧~