為什麼我在學習HTMLCSS的時候很快就能上手，可是JS我已經接觸了2個月了，還是無從下手？

---

我想，學習編程語言與學習說話是類似的，都有三要素：詞法，語法，背景知識

詞法：決定是否能一個詞一個詞的讀下來

語法：決定是否能明白，表達式或者語句要做什麼

背景知識：決定是否能理解整個篇章在做什麼

想一想，我們從出生就生活在漢語（舉例而已，少數民族同胞不要仇視）的環境里，天天看、聽、說，能比較順暢的表達自己的意圖用了多少年？

誠然，編程語言在這三要素上的信息量都要遠小於整個漢語世界：關鍵字很少，TR1文法的語句有限，背景知識也只有現代科學的幾十年，但是，想把這些都了解清楚也非朝夕之功可為。

HTML/CSS入門要簡單一些，在入門階段，它們看起來更像是七巧板或者積木，能抓住東西的小孩子都能玩，所以會感覺到入門容易。可是，做到高級，仍然要考驗設計師的想像力的。並不是人人都可以用樂高製作一把樂高重機槍_視頻在線觀看。這需要背景知識和想像力。

相比之下，js家的門檻要高不少。首先是語言本身，只是簡單的詞法和語法就夠學一陣子的了（這取決於你的編程語言經驗，掌握類似的語言，學起來自然快）。但，只會詞法和語法真心沒什麼鳥用，比如： ，我相信很多人都知道是什麼，但很少人能知道怎麼用它。

那麼，讓你覺得js入門難的倒底是什麼呢？ 其實是背景知識!

雖然我們很小就會說話，但並不會五言、七言、蝶戀花、江城子等等，這些東西是別人定義好的格式，我們只要拿來用，並且用得對，就會有不錯的效果。這相當於編程基礎里的數據結構。

雖然我們很小就會說話，但有時把一件事啰里啰嗦講半天，自己都覺得沒講明白，當然別人也沒聽明白。後來慢慢知道一畫開天、精衛填海、畫地為牢、紅杏出牆等等，簡潔清楚，這也是別人定義好的，很好用。這相當於編程基礎里的演算法。

背景知識還有很多很多，如：Big Endian、農曆、等差數列、角函數、傅里葉變換、AI……

一處不到一處迷，只要寫代碼的人用了你不知道的知識，你就會看不懂。

那麼，回到正題，題主覺得js入門難，大致有兩大方面的知識欠缺

1. 編程相關的基本知識：計算機原理、數據結構、演算法分析等等
2. 瀏覽器工作原理及編程相關的API

想要快速入門，2是必需，而想跨過入門，成為軟體工程師，1是關鍵。

而要成為職業WEB前端，還要了解整個前端的生態環境，那是一條永不止步的求索之路。

---

就多寫這是我在塊我在說一下吧。

題主現在應該處於：想動手寫點東西，但是又不是怎麼開始的這一個階段。

其實我有很長一段時間是處於這個階段，我看了完了《DOM藝術編程》，照著書上的例子寫，基本就是抄。

然後關上書，還是什麼都寫不出來，老是去回想書里的下一步要做什麼，自己根本沒有思路。

看完《DOM藝術編程》後，最大的收穫是 js操作dom元素還多少知道些，創建個div 創建個P 創建個txt 把txt插入到P 把P插入到div 然後把div插入到body。

我給題主的建議是前期多找js操作dom的例子來寫，正面反饋，看得見摸得著。不會打擊學習的積極性。

比如寫一個焦點圖的的例子。

寫輪播圖的HTML css

↓

寫點擊的事件，把點和對應的div關聯起來

↓

用settimeout讓他們動起來

↓

點擊「點」後，發現自動滾動發生混亂，想辦法解決。

到這裡一個最基本的焦點圖的例子就寫完了。在寫這個例子的時候你可能用到了（以JQ舉例）attr eq settimeout clearInterval 等。然後你覺得這個焦點圖 點一下切換一張圖太單調了，你想點一下圖片有個進場的動畫， 這時候你又學到了用js控制 translate3d 、left 的值。

我記得 @mu mu 大神之前用遊戲來形容學習編程，我很喜歡。

遊戲里常有這樣的設定，開局的時候，整張地圖都是霧蒙蒙的，什麼也看不見。先選個地方造兵採礦，建立基地，再派兵去周圍的地方探索，繼續造兵採礦，佔領的地方越來越多，整張地圖也越來越清晰。編程也是這樣，一開始的時候，什麼都看不清，什麼都不懂，學了幾年也寫不出個軟體。傳統的學習模式是，學習，理解，運用，而學編程的時候，可以靈活一點。把編程知識想像成一個3D網路，每個知識點都是網路中的一個節點，每個節點上有一盞燈，你學會了，燈就亮了，可以看到周圍的節點，接著走，點燈，再走，再點燈，這樣，燈亮的越來越多，看的越來越清楚，對於自己要走的方向也越來越有信心。基本的思想是，先用後學，縮短反饋，反覆迭代。


學了一段時候時候 你的焦點圖的改進流程大概就是這這樣

HTML 和css的引入 全部寫在js里

↓

圖片和描述用數組或者json當做參數傳進去

↓

可以設置滾動的時間長度

↓

可以設置觸發行為（click ，touch）

↓

圖片是否支持等比例縮放 等等等

最後的代碼調用的時候大概是這樣的，

$(".div").Foucus({
pics:_data.pic,
scorllTime:"300",
bindEvtnt:"click",
imgZoom:true
})


表達能力不好，寫的有點亂，湊合這看。希望能夠幫助題主，高手勿噴。我也是一個剛剛入門的菜鳥。以上基本是我學習js的歷程。成長最快的日子還是@ 張路的指導這一年。

/************************************/

作為一個從設計轉重構，現在可以稍微能用js獨立寫項目的人來說一下。

4年前開始嘗試著看js，改js，看js書籍。只到今年才算js有很大進步

1、多寫

2、有個願意不嫌麻煩的人給你講解各種遇到的問題。（ @張路 我是這位大神帶了一年吧，終於能夠獨立寫一個項目了）

3、先寫 後看書

最重要的還是有人願意給你解惑，沒有學過任何編程語言，需要把需求變成代碼來實現，沒有編程邏輯，當你碰到問題的時候你可能想一個星期都想不明白的問題，對方一句話能幫你解決。

---

var imf = function () {
var lf = 0;
var instances = [];
//定義一個通過class獲得元素的方法，並傳入三個參數
function getElementsByClass (object, tag, className) {

var o = object.getElementsByTagName(tag);
//定義一個數組變數，通過標籤名獲取元素
//通過for循環來返回通過class獲取的元素

for ( var i = 0, n = o.length, ret = []; i &< n; i++) //變數n等於數組o的個數，字元類型是數值 //新增了一個數組ret用處暫不明確，繼續往下讀 //遍曆數組o裡面的每一個對象 if (o[i].className == className) ret.push(o[i]); //如果數組o裡面元素的類名存在與傳入的className參數名相同的話，將 //這個類名的元素添加到ret數組中（push是從數組末尾添加） if (ret.length == 1) ret = ret[0]; //如果數組ret的個數有1個存在，那麼直接返回它 return ret; //for循環至此結束，繼續下一個函數的讀取 } //定義名為addEvent函數，並傳入3個參數 function addEvent (o, e, f) { if (window.addEventListener) o.addEventListener(e, f, false); //通過if判斷解決兼容性問題，如果瀏覽器支持.addEventListener() //方法，給數組o添加監聽事件 else if (window.attachEvent) r = o.attachEvent("on" + e, f); //因為IE低版本瀏覽器的監聽事件不符合w3c規範，只能用.attachEvent //方法來兼容 } //繼續定義一個名字很奇怪的函數傳入2個參數 function createReflexion (cont, img) { var flx = false; //變數flx的布爾值初始化為false，一般後面用來判斷這個變數的存在是真 //還是假 if (document.createElement("canvas").getContext) { //這也是一個兼容性判斷，如果瀏覽器支持h5 canvas .getContext屬性 //和方法的話，就繼續下去 flx = document.createElement("canvas"); //讀到這裡，我明白了為什麼提前將變數flx = false 了；如果為true的話 //就沒法判斷瀏覽器是否支持canvas了 //這一步是動態創建canvas節點，名為flx flx.width = img.width; //定義canvas的寬度等於img的寬度 flx.height = img.height; //定義canvas的高度等於img的高度 var context = flx.getContext("2d"); //獲取canvas的上下文環境 context.translate(0, img.height); //將canvas繪圖表面向下平移img高度的像素，目的暫不明確 context.scale(1, -1); //將canvas繪圖表面進行縮放操作，x軸放大1倍，y軸縮小1倍，暫不明白作者 //意圖，-1應該是反向。 //又是向下平移，又是縱向翻轉，應該是做一種上下對稱的東西 context.drawImage(img, 0, 0, img.width, img.height); //.drawImage()方法，將圖片繪製到canvas中，寬高都是圖片的寬高 context.globalCompositeOperation = "destination-out"; //這個屬性比較冷門，我是查資料才知道是：在源圖像外顯示目標圖像。只有源 //圖像外的目標圖像部分會被顯示，源圖像是透明的。個人猜想作者利用這個 //屬性不是簡單的把img畫到上去，而是想利用源圖像外的部分來做文章。 var gradient = context.createLinearGradient(0, 0, 0, img.height * 2); //繪製起點為原點的60°角的線性漸變 gradient.addColorStop(1, "rgba(255, 255, 255, 0)"); //定義結束的顏色，不透明度為0 gradient.addColorStop(0, "rgba(255, 255, 255, 1)"); //定義開始的顏色，不透明度為1 context.fillStyle = gradient; //上面都是基於狀態的繪製，這一步是執行繪製 context.fillRect(0, 0, img.width, img.height * 2); //繪製一個矩形，左上角坐標（0,0），右下角坐標（img寬度，img高度X2） } else { //如果瀏覽器不支持canvas，則用css濾鏡來實現此效果 /* ---- DXImageTransform ---- */ flx = document.createElement("img"); flx.src = img.src; flx.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(" + "opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (img.height * .25) + ")"; } //上面那一大串，講的是創建一個img標籤替代canvas，定義圖像src，定義濾鏡 /* ---- insert Reflexion ---- */ flx.style.position = "absolute"; flx.style.left = "-1000px"; cont.appendChild(flx); return flx; } //設置flx的css位置屬性 //用.appendChild()方法將動態創建的flx作為子元素，添加到cont的節點中 //結束了 //碼完注釋，我猜想這是一段實現圖片倒影的函數，倒影顯示在圖像的下方。

---

因為js一般不只是js，他一般還要配合調用別的東西，比如你的這一部分代碼，它大部分的工作是操作dom，那你就要去學習dom操作的基本知識。而且dom裡面findbyclass addEvent 都是相對深入一些的知識，換句話說，你看的這個代碼要的基礎知識稍多了一些。

---

按教程，例子寫固然重要，但是更好的辦法是多練，實現你想實現的功能。html css入門無非是認識一些標籤，真的運用到實踐去，去解決各個瀏覽器兼容問題，更合理地去優化布局，也是很有學問的。

---

js起步容易進階難度較大

原型鏈徹底搞清楚的人不多

嘿嘿

---

建議可以先從jquery開始，同時多讀別人的代碼，然後再去回顧js的基礎，慢慢培養寫程序的思維習慣

---

其實我想說，兩個月了看不懂說明基礎知識不夠再加上練習的不夠，因為我自己也是零基礎學js的，在此之前學了html和css，現在學js也差不多2個月了，頭一個月真的很煎熬，感覺視頻里說的完全聽不懂。但是多聽幾次多練習幾次，就好一點，所以一定要自己多寫代碼。看不懂就再看一次再寫一次，就像剛開始學html的時候，基礎知識起碼看了10次以上，js比起它們要難一點， 所以我打算要看20次以上。這就是我的學習方法，只作參考。

---

你看不懂是因為不是你寫的.

你學不會是因為還沒開始去寫.

還沒開始去寫是因為你沒有項目需求.

---

我和你情況相反，是不是我太懶了.....

---

看別人的代碼只需要看整塊函數的意思就行了，這個其實看多了沒多大問題的！要學好沒有捷徑只有自己動手寫！！看著視頻寫，對著書寫沒有多大作用，因為發現不了問題，只要不斷填坑 技術才能進步！！

---

html 和 css經過瀏覽器解析後 一步就可以看到結果

javascript 是經過一些邏輯之後，才能得到結果。

js中，只要有一點順序不同，或者多幾步，少幾步，結果就會有很大不同。

你現在就想 直接看一段複雜的javascript，當然是看天書了。

---

編程經驗很重要吧，一個優秀的程序員，要有很多的項目來錘鍊。

為技術而生，豈這麼容易。

---

如果你沒有一點編程基礎的話，就要從零開始學，找入門的那種書，一行行跟著練。2個月並不長，看不懂是很正常的不要著急，你想計算機學生從零開始學編程也不不可能學兩個月就能搞定的，js其實並不是很簡單，例如你貼的代碼，要看懂它你需要對變數，函數，參數，事件甚至面向對象都很明白才行

---

其實大部分人都差不多，我之前也是跟你一樣 看書似乎都看得懂，但是感覺卻什麼都做不出來 別人寫的代碼也看不懂。

所以說呢，不用太焦慮，這是成為程序員的必經之路吧。前期入門推薦你一定認真看完《javascript高級程序設計》這本書，當然第一遍看的時候也不要太去鑽某個點，比如useragent那一章，但是ECMAscript語法一定要多看幾遍，然後可以看看慕課網一些視頻教程，照著做些小項目加深js應用方面理解。

至於框架什麼，等你走到這一步應該也知道怎麼去選擇學習了吧，至於更深層次的就不講太多了，怕你望而卻步。總之，不要去奢望進一家有人帶的公司，程序員入門階段基本只能靠自己。

---

沒有編程基礎吧？

開發經驗豐富的話，JS真的很容易上手的。

---

舉一個不太恰當的例子，不懂事兒的小孩子都可以把磚塊搭建起來個模型，但是，混凝土不是誰都能玩兒的。HTML，CSS是個框架性的東西，入門會很快，看看例子，類比，都可以做個模型出來。JS是一門兒編程語言，使用場景很多，使用規則很多，並不能和HTML，CSS做比較著學的。

---

其實我覺得js還算比較好學的，因為他是基於事件驅動機制，比較容易理解，如果把前端比如成人體，那麼html大概是骨頭，css是對骨頭的修飾、肌肉與皮膚，而js就是思想。

很多時候我們的js代碼大多是定義事件，大致就是html元素髮生什麼事件（點擊、滑鼠進入、滑鼠移除）時做出什麼反應（dom操作，修改css）。

所以js裡面很重要也很基礎的兩個部分就是事件綁定和dom操作，在有編程基礎的情況下學會這兩塊應該不算難，學會這兩塊你就能做一些簡單的效果了，算是js入門了，也會更有信心。

如果沒有編程基礎，那麼就去惡補編程基礎吧。

至於代碼，樓上已經給出答案了，但是靠別人給你講解代碼意義並不大！

---

第一個是封裝通過元素類名獲得元素 第二個是封裝綁定事件 第三個是canvas上的東西，介面不熟。

---

因為html and css大部分都是能夠看的見摸的著的東東，即使不考慮深究，依然能夠湊合的完成工作，而js卻看的見摸不著，況且況且況且在網頁里使用它要和dom and bom深度結合。

最後，「功能」比「視覺」要複雜的多。

---

推薦閱讀：