學javascript需要什么基礎

Javasctipt簡稱Js，學習Js之前建議你先學習一下HTML+CSS，因為Javascript的基本操作是控制html的標簽以及css的屬性，實現(xiàn)各式各樣的動態(tài)功能。千鋒教育就有線上免費JavaScript線上公開課。

創(chuàng)新互聯(lián)建站成都網(wǎng)站建設定制網(wǎng)站開發(fā)，是成都網(wǎng)站設計公司,為木制涼亭提供網(wǎng)站建設服務,有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設計服務：原型圖制作、網(wǎng)站創(chuàng)意設計、前端HTML5制作、后臺程序開發(fā)等。成都網(wǎng)站維護熱線：18982081108

JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。學習Javascript給大家推薦幾本書，入門書籍《Javascript dom編程藝術》和內(nèi)容全面點的有《Javascript高級程序設計》。看完這些，你的Js基礎就學的差不多了再就是學習Js框架，例如vue.Js，react，angular.Js等。如果想了解Javascript更多相關知識，建議到千鋒教育了解一下。千鋒教育目前在18個城市擁有22個校區(qū)，年培養(yǎng)優(yōu)質(zhì)人才20000余人，與國內(nèi)20000余家企業(yè)建立人才輸送合作關系，院校合作超600所。

匯總js事件相關及事件處理模型

js事件是為了實現(xiàn)用戶交互，比如當用戶鼠標點擊或者鍵盤輸入時，瀏覽器會監(jiān)聽截獲并且通知js做出反饋執(zhí)行相應的函數(shù)，實現(xiàn)交互。

js的事件類型有很多，我們先來大概總結一下常用的JS事件

click點擊事件、mousedown鼠標按下事件、mousemove鼠標移動事件、mouseup鼠標抬起事件

contextmenu右鍵出菜單事件、mouseenter/mouseover鼠標進入事件、mouserleave/mouseout鼠標離開事件

可通過事件對象的button屬性來區(qū)分是左鍵\滾輪\右鍵，分別對應值 0 / 1 / 2

DOM3規(guī)定：click事件只能監(jiān)聽左鍵；只能通過mousedown和mouseup來判斷鼠標鍵

keydown某鍵被按下時、keyup被松開時、keypress按下并且松開時

觸發(fā)順序：先 keydown，然后keypress，最后keyup

keydown和keypress的區(qū)別：

input：文本變化時觸發(fā)

change：聚焦或失去焦點時判斷狀態(tài)是否改變，發(fā)生改變是觸發(fā)change事件

focus：聚焦時觸發(fā)

blur：失去焦點時觸發(fā)

利用focus和blur可模擬placeholder

scroll：滾動條滾動時

load：頁面加載完觸發(fā)

abort：圖像的加載失敗

dblclick：雙擊事件

error：當加載圖像和文檔時發(fā)生錯誤

resize：窗口或者框架被重新調(diào)整大小

select：文本被選中時

reset：點擊重置按鈕時

submit：點擊提交按鈕時

接著看如何給DOM元素綁定事件處理函數(shù)

兼容性很好

但是根據(jù)js的特點，這種賦值的方式肯定會被后面的值覆蓋。因此這種方式綁定事件處理函數(shù)規(guī)則是：同一個元素同一個事件只能綁定一個處理函數(shù)。等同于第一種寫在行間。

IE8及以下不兼容

通過addEventListener綁定的方式，同個元素的同一個事件可以綁定多個處理函數(shù)，不會被覆蓋。

attachEvent跟addEventListener 基本一致，也是同一個元素的同一個事件可以綁定多個處理函數(shù)，不會被覆蓋。不同的是attachEvent可以綁定的函數(shù)是可以重復的，即即使綁定同一個函數(shù)都不會不覆蓋。

以上幾種事件綁定方式里面的this指向有點區(qū)別：

也比較好理解，IE獨有的特殊一點指向window，其他都指向dom元素本身

封裝一個兼容性的方法，用于綁定事件：

有的時候我們希望解除事件處理函數(shù)，那怎么辦呢？

其實解除事件處理函數(shù)也對應有辦法方法：

1. ele.onxxx = false / ' ' / null

2. ele.removeEventListener(type,fnName,false)

3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干綁定的事件處理函數(shù)是匿名函數(shù)，則無法解除綁定！

不知道有沒有發(fā)現(xiàn)，在上面綁定事件處理函數(shù)的時候，處理函數(shù)有個參數(shù)e或者叫event，其實是一個事件對象

事件對象就是處理函數(shù)里面的一個參數(shù)，說白了就是瀏覽器打包好的一個對象自動傳入到處理函數(shù)的第一個參數(shù)中。

為了兼容IE一般這么寫： e = e || window.event

事件對象會有個屬性target，這個target叫事件源對象，記錄可事件具體在誰身上觸發(fā)的那個源頭

同樣IE上事件源對象是e.srcElement，谷歌兩個都有

所以為了兼容IE一般獲取事件源對象是這么來寫：

當瀏覽器發(fā)展到第四代時(IE4及Netscape4)，瀏覽器開發(fā)團隊遇到了一個很有意思的問題：頁面的哪一部分會擁有某個特定的事件？想象畫在一張紙上的一組同心圓。如果把手指放在圓心上，那么手指指向的不是一個圓，而是紙上的所有圓

兩家公司的瀏覽器開發(fā)團隊在看待瀏覽器事件方面還是一致的。如果單擊了某個按鈕，他們都認為單擊事件不僅僅發(fā)生在按鈕上，甚至也單擊了整個頁面

但有意思的是，IE和Netscape開發(fā)團隊居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕獲流。事件冒泡和事件捕獲稱為兩種事件處理模型

IE的事件流叫做事件冒泡(event bubbling)， 事件冒泡是結構上（非視覺上）嵌套的函數(shù)存在事件冒泡功能，即同一事件自子元素冒泡向父元素（自底向上）

[注意]所有現(xiàn)代瀏覽器都支持事件冒泡

但在具體實現(xiàn)在還是有一些差別。IE9、Firefox、Chrome、Safari將事件一直冒泡到window對象

而事件捕獲的思想是不太具體的節(jié)點應該更早接收到事件，而最具體的節(jié)點應該最后接收到事件。事件捕獲的用意在于在事件到達預定目標之前就捕獲它

即事件捕獲是指： 結構上（非視覺上）嵌套的元素存在事件捕獲功能，即同一事件自父元素冒泡向子元素（自頂向下）

注意IE上沒有事件捕獲，Chrome和新版本的Firefox等都實現(xiàn)了

一個dom元素的一個事件類型綁定的一個處理函數(shù)只能存在一種事件模型，要么事件冒泡要么事件捕獲。正常的通過addEventListener(type,fn,false)綁定事件時，最后一個參數(shù)默認是false表示的是，事件冒泡模型。如果改成true，立即變成事件捕獲模型

如果一個dom元素的一個事件類型綁定了兩個處理函數(shù)，兩個函數(shù)的事件處理模型一個是事件冒泡一個是事件捕獲，觸發(fā)順序是先捕獲，后冒泡。

focus、blur、change、submit、reset、select等事件類型不冒泡

可以 利用事件冒泡和事件源對象可以叫事件委托給父元素

利用事件冒泡和事件源對象進行處理

優(yōu)點：

性能好，不需要循環(huán)所有元素一個個綁定事件

靈活，當有其他新的子元素時，不需要重新綁定事件。

有的時候，我們不希望有冒泡功能，那我們怎么取消事件冒泡呢？

封裝一個都好使的取消冒泡函數(shù)

有的時候我們需要阻止一些瀏覽器默認的事件

比如：表單提交、a鏈接跳轉(zhuǎn)、右鍵菜單等

有幾種方式：

參考資料：

DOM事件流的三個階段

深入理解DOM事件機制系列第一篇——事件流

JS事件匯總

JS事件模型

事件1（上）

事件1（下）

DOM級別與DOM事件

DOM事件機制解惑

事件模型

JavaScript 事件委托詳解

JavaScript 事件的學與記：stopPropagation 和 stopImmediatePropagation

event.target和event.currentTarget的區(qū)別

js怎么區(qū)分出點擊的是鼠標左鍵還是右鍵？

關于JavaScript 的好書有哪些

1. JavaScript DOM 編程藝術

這本書作為被大家推薦的最多的前端入門書籍是有道理的。

他能真正讓大家了解dom腳本編程，或是說前端編程技術背后的思路和原則。

對于初學者來說，這本書沒有任何門檻，按部就班跟著書籍實例編寫代碼即可。

我們會知曉如何對瀏覽器元素操作和掌控，會學會如何實現(xiàn)簡單的頁面效果。

這種簡單易得的成就感是一個編程語言入門時最難能可貴的體驗。

閱讀建議：

這本書雖然簡單，但是能讓人快速對前端產(chǎn)生興趣和成就感。

不過后續(xù)學習jquery的時候可能會產(chǎn)生挫敗感。原生js dom操作的成就感會被jquery便捷的API所徹底打敗。所以一定要恰當?shù)恼{(diào)整心態(tài)，轉(zhuǎn)換思維方式，正確認識到jquery和原生js分別的優(yōu)劣之處。

在熟練使用jquery后還能想起來翻看這本書，找到之前未曾發(fā)現(xiàn)的閃光點，就是入門成功了。

2. JavsScript高級程序設計（第三版）

無論何時，這都是學習js最好的書。

如果說其他的書都是在合適的階段會有不一般的體驗。

這本書就是無論什么階段，都夠你感悟一番的。

當你看完了市場上js相關（不包括框架類庫的最佳實踐類）的所有書籍。你再回去看這本書，也會發(fā)現(xiàn)其實95%的內(nèi)容早就寫在這本書里了，只不過你當時等級不夠，根本沒有意識到。

這本書排版舒服，翻譯得體，內(nèi)容豐富，語言流暢。涵蓋了js語法（面向?qū)ο螅]包作用域等），js使用（dom，bom，html5API），編程實踐（高階函數(shù)，編碼規(guī)范）等程序員使用javascript時會遇到的大部分問題。

（今天在上海面試了一天。大部分很順利，只是有幾個比較偏的問題沒回答好。晚上回去之后一翻高程三，果然在里面都寫得明明白白的。不得不服。）

閱讀建議：

人們喜歡把他和犀牛書拿一起推薦，不過就我看來，他們完全不是一個可讀性上的。

一個是課本一個是字典。而且還是佶屈聱牙的字典。

所以無論何時我都會把高程三排在js推薦書籍的第一位。

3. 鋒利的jQuery

圖忘了拍了，就不補了。

這本書如果緊接著dom編程看，會如我我說的那樣瞬間摧毀你的小小的成就感。

因為這本工具書級別的書簡單暴力到不給你思考什么“平穩(wěn)退化”，“js動畫計時器”這些dom編程中提及的問題，就直接就甩出一大片簡單有效的jqueryAPI顛覆你的世界觀。

這本書是如此的易懂以至于看完之后瞬間就覺得自己能把web玩出一片花來了。

作為工具書級別的書，或是說學習jqueryAPI的書，這是首選。

閱讀建議：

熟悉jquery是每個前端必須要會的事。

只是不要被Jquery的便捷迷惑，而拋離原生js，把原生js貶得一文不值，否則后面會付出昂貴的代價。

4. 學習Javascript數(shù)據(jù)結構與算法

這本書相對是一本冷門書。

為什么我會推薦他，是因為他能解決每個半路出家的js程序員都曾思考過的一些問題：

1. 我們的數(shù)組Array這么強大，要棧Stack，隊列Queue這些功能少，半半拉拉的東西干什么呢？

2. 我們學的數(shù)據(jù)結構搞來搞去好像也就那些玩意，為什么被大家這么推崇，還要分門別類討論呢？

所以這本書只是為何告訴你上面這些問題的答案：

1. 棧和隊列本來就沒有Array功能強。沒有Stack和Queue類只是因為ES5不去實現(xiàn)它而已。作為一種相互之間存在一種或多種特定關系的數(shù)據(jù)集合，其存在意義是不應該被其功能強大與否來決定的。

2. 數(shù)據(jù)結構和編程語言無關。語言死了，他們會在下一門語言里重生。哪怕計算機死了，他們都會在下一個概念體里重生。

閱讀建議：

跟著書本把這里面的結構全部敲一遍，快的話一天就能搞定。

從此你便再不怕懼怕js相關的簡單數(shù)據(jù)結構問題。

但是，遇上高級的樹，圖等問題該跪還是要跪。因為這本書虎頭蛇尾，后面的高級點的數(shù)據(jù)結構介紹的不夠深。

適合經(jīng)常反思“它從哪里來，要到哪里去？”的js程序員，或后悔以前數(shù)據(jù)結構沒好好學的前端同學。

5. JavaScript設計模式與開發(fā)實踐

我認為騰訊AlloyTeam的這本書對我?guī)椭敲栏叱倘?/p>

那時候我恰好換公司，從原來的開發(fā)方式切換成另一種完全不同的開發(fā)方式，讓我很不適應。

這本書及時的蹦出來，他拿實際的應用場景舉例，告訴你不同js項目里如何共通設計模式，還極其詳細的介紹了函數(shù)的高級用法，能讓你對js高階函數(shù)的認知上升一個臺階。

難能可貴的是他還拿java作為靜態(tài)語言的類比。從語言統(tǒng)一高度來給你分析這些問題。

和上本介紹數(shù)據(jù)結構的書一樣，這本書有的放矢，能完美的解決對js設計模式有疑問的同學的實際問題。

他比上本書更深刻，更易讀，也更貼近實踐。

閱讀建議：

這是本適合反復閱讀的書籍。

如果你的思路能根據(jù)應用場景自動切換到最適合的設計模式，說明你已吃透這本書了。

6. 高性能JavaScript

作為Orelly唯一一本我確實認可的javascript相關的書。作為Orelly唯一一本我確實認可的javascript相關的書。

他摒棄了Orelly系列所有我不喜歡的特點：

老外的聊天說教式閱讀體驗，樣例不夠豐富，排版單一，破事水等。

他的優(yōu)點如下：

1. 情景豐富，基本涉及所有js性能優(yōu)化的場景。還會給出不同場景的實際測試數(shù)據(jù)，真實可信。我們在閱讀這些場景實例的同時也豐富了自己js的使用經(jīng)驗。

2. 給出了很多看似"旁門左道"的解決方案，而這些冷門的解決方案恰恰是有些人死活百度不到的真正能解決問題的最優(yōu)解。

3. 在說問題的同時說原理，深入淺出，游刃有余。所以這本書不僅僅是一本介紹js性能相關的書，而是一本涉及瀏覽器原理，js解析原理，用戶體驗等知識的javascript最佳注解。

閱讀建議：

建議和高程三一起看，可以算是高程三閱讀的最佳伴侶。

高程三告訴你“他叫什么，他什么樣”，

這本書就告訴你“他為什么”，“他該怎樣”。

所以，當別人還在為某些問題絞盡腦汁的時候，你已經(jīng)從起點上干翻他們了。

7. 你不知道的JavaScript（YOU DONT KNOW JAVASCRIPT）

大名鼎鼎的Github開源的書籍。大名鼎鼎的Github開源的書籍。

為了他的名氣我也得買一本實體書來拜讀下。

這本是上卷，只涉及作用域和閉包，this和對象原型兩部分。

不過其深入程度是其他js書籍難以企及的。

可以說，這已經(jīng)是大部分前端程序員對js語法可以深入了解的最底層了，再往下就直面編譯原理了。

標題名稱：javascript相關,javascript相關書籍
文章源于：http://chinadenli.net/article28/dsgdhcp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、品牌網(wǎng)站設計、網(wǎng)站內(nèi)鏈、軟件開發(fā)、外貿(mào)建站、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)