js編程大全（js編程教程）

本文目錄一覽：

• 1、前端開發必學的技術有哪些？
• 2、求推薦html到css到js相關的書籍
• 3、想做web前端的工作，應該先學什麼？
• 4、前端必看的書籍
• 5、簡述一個JavaScript腳本的基本結構
• 6、如何使用JS取出標籤中的文本

前端開發必學的技術有哪些？

這裡給大家整理了一份系統全面的前端學習路線，主要掌握以下技術：

第一階段：專業核心基礎

階段目標：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。

2. 熟練運用HTML+CSS特性完成頁面布局。

4. 熟練應用CSS3技術，動畫、彈性盒模型設計。

5. 熟練完成移動端頁面的設計。

6. 熟練運用所學知識仿製任意Web網站。

7. 能綜合運用所學知識完成網頁設計實戰。

知識點：

1、Web前端開發環境，HTML常用標籤，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。

2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。

3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。

第二階段：Web後台技術

階段目標:

1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。

2. 熟練掌握JavaScript的基本數據類型和變數的概念。

3. 熟練掌握JavaScript中的運算符使用。

4. 深入理解分之結構語句和循環語句。

5. 熟練使用數組來完成各種練習。

6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。

7.DOM和BOM實戰練習和H5新特性和協議的學習。

知識點：

1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。

2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。

3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。

4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。

第三階段：資料庫和框架實戰

階段目標：

1. 綜合運用Web前端技術進行頁面布局與美化。

2. 綜合運用Web前端開發框架進行Web系統開發。

3. 熟練掌握Mysql、Mongodb資料庫的發開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術。

5. 熟練運用Node.js開發後台應用程序。

6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。

知識點：

1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。

2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。

4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。

第四階段：移動端和微信實戰

階段目標：

1.熟練掌握React.js框架，熟練使用React.js完成開發。

2.掌握移動端開發原理，理解原生開發和混合開發。

3.熟練使用react-native和Flutter框架完成移動端開發。

4.掌握微信小程序以及了解支付寶小程序的開發。

5.完成大型電商項目開發。

知識點：

1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Redux基本概念。練使用react完成項目開發、掌握Redux中的非同步解決方案Saga。

2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。

3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。

4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。

求推薦html到css到js相關的書籍

第一本，入門《Head first HTMLCSS》

最好的入門書。看兩遍就對HTML CSS 有個大概印象了。

此時把w3cschool作為備查手冊收藏起來

第二本《CSS權威指南（第三版）》

最權威的CSS書籍，除了閱讀W3C的文檔外的不二選擇（就是翻譯有點son of a bitch，遇到感到難理解的地方可能還是要求助於網路資源）。有時間（無論是現在還是將來）可以反覆看，併當做字典隨時查。

第三本《精通CSS》

廣受前輩推薦的一本書。上一本書是字典的話，這本書相當於《中學生作文大全》，彙集了一些CSS的最佳實踐。

第四本《圖解CSS3：核心技術與案例實踐》

這本書比較新，講解的是最新的CSS3（前三本書停留在CSS2.1時代），CSS3也是必學的，不是什麼可學可不學的最新技術。

HTML CSS值得看的書就這些（之後會有一本《CSS秘密花園》，尚在翻譯中，也很值得期待），剩下的就是自己寫還有看技術博客了。接下來是JavaScript，HTML和CSS都是沒有邏輯的標記型語言，JS才是真正的編程語言，評價前端工程師的水平就看這個了。

第五本《JavaScript DOM編程藝術》

最好的JS入門書籍，一目了然地告訴你如何用JS操作DOM（這是瀏覽器端編程的基本功），還灌輸了最符合標準的編程理念。可惜有點老，最新一版是2010年的，以至於部分內容有點過期，例如本書內經常提到「某某方法瀏覽器不一定支持，需要小心使用」，而這些歷史遺留問題當今已經不存在了，閱讀過程中無視就好。

第六本《JavaScript高級程序設計》

每個前端必看的書，此書是前端工程師科技樹的關鍵一環。看完此書後再看看之後各類進階書籍會比較好。

俗稱紅寶書，也算入門書籍，雖然是大部頭（七百多頁），但至少通讀一遍。

全部掌握了，你可以在網路社區里談笑風生了，經過實踐的鍛煉後，面試個前端工程師的崗位應該都沒問題了。

第七本《JavaScript語言精粹》

也是前端必看。薄薄一百來頁，對JS的去粗取精。

第八本《你不知道的JavaScript》

這是一套叢書， 目前為止僅翻譯了第一卷。每本都挺薄，深入介紹了JS中的重要概念。

第九本《JavaScript設計模式》

「設計模式」是軟體工程的重要課題，相當於高考時候的答題套路。前人總結出來的應對各種問題的模板。也算是必看書籍。關於JavaScript設計模式的書籍目前也有好幾本，也有國人寫的，挑一兩本看看就好。

第十本《高性能網站建設指南》（及其續篇《高性能網站進階》）

告訴你真正的商業公司的前端是怎麼優化一個網站的。當然優化的問題不是看看書就能解決的，最好時刻了解你的同行們的經驗。

看完以上十本算是前端入門了。到現在為止，配合搜索引擎，已經可以無障礙地做出靜態網頁、各種特效、用AJAX配合後台構建Web應用了。然後是各種框架、庫、預處理語言的學習，而且現在JavaScript也可以用來寫伺服器了（Node.js），這樣一來JS通吃前後端，前端工程師都歡欣鼓舞，這也是個學習熱點。

下面是一些補充書籍，可以穿插著看。（至少看了兩遍《JavaScript高級程序設計》再看下面的書）

《圖解HTTP》和《HTTP權威指南》

每個Web程序員都應該熟悉HTTP協議里的內容。《圖解HTTP》算是科普級別的書，《HTTP權威指南》則是大部頭，需要點耐心才能看完。建議在了解AJAX後立刻開始學習HTTP協議。

《鋒利的jQuery》

講JS最著名的庫——jQuery的，快速入門的書。光會原生JS不夠，還要會用庫。

《數據結構和演算法的JavaScript描述》

作為程序員如果連基本的數據結構和排序、查找演算法都不會實在丟臉。

《JavaScript編程精解》

鞏固對JS的理解，很薄

《JavaScript啟示錄》

同上，也很薄。

《JavaScript權威指南》

號稱「聖經」，最權威的JS書本，買來當作字典備查吧，沒事也可以翻翻。

以上就是學習HTML、CSS、JS要看的一些書。其實我建議剛開始學習的小夥伴，看視頻為主，html之後的css，剛剛接觸的時候會覺得有些懵。視頻的話老師可以直接把思路和操作給大家講出來，相對來說更容易接受和理解。當你學會了以後，就會發現，這邊入門的知識點獲取是很簡單的事情。

想做web前端的工作，應該先學什麼？

一個專業的前端開發工程師是必須掌握前端開發三大基本基石HTML、CSS，JavaScript。光會這些還不夠，有了這些語言還需要各種工具的支撐，比較常見的有Dreamweaver，Sublime，HBuilder。還有FontelloFontello 、Secureheaders、Visual Studio CodeVisual Studio Code。

工具只能解決一些特定問題，要解決更加全面的問題就要接觸到框架，三大基本框架有Angular、React、Vue，當然，以後還會接觸到更多Bootstrap、 Fbootstrapp、BootMetro、Gumby、IVORY、Kube這樣的框架。另外，一個優秀的前端開發工程師可能還要掌握SEO、DOM、BOM、Ajax等技能，甚至，網站性能優化和伺服器端的相關基礎知識也是需要了解的。

學會這些還不夠，前端開發是一門發展的學科，不是學好了就可以停止學習，後面還會接觸到更多新的內容。

由此可見，要想學好前端，絕對不簡單，前端開發的廣度和深度是其他行業所不能比擬的，你必須付出不懈的努力，才能收穫這份果實。

前端必看的書籍

了解更多的前段知識請看下面我精心為您整理的前端必看的書籍，希望您喜歡!

十本學習前端必看書籍

第一本，入門

《Head first HTMLCSS》

最好的入門書。看兩遍就對HTML CSS 有個大概印象了。

此時把w3cschool作為備查手冊收藏起來

第二本《CSS權威指南(第三版)》

最權威的CSS書籍，除了閱讀W3C的文檔外的不二選擇(就是翻譯有點操蛋，遇到感到難理解的地方可能還是要求助於網路資源)。有時間(無論是現在還是將來)可以反覆看，併當做字典隨時查。

第三本《精通CSS》

廣受前輩推薦的一本書。上一本書是字典的話，這本書相當於《中學生作文大全》，彙集了一些CSS的最佳實踐。

第四本《圖解CSS3：核心技術與案例實踐》

這本書比較新，講解的是最新的CSS3(前三本書停留在CSS2.1時代)，CSS3也是必學的，不是什麼可學可不學的最新技術。

HTML CSS值得看的書就這些(之後會有一本《CSS秘密花園》，尚在翻譯中，也很值得期待)，剩下的就是自己寫還有看技術博客了。接下來是JavaScript，HTML和CSS都是沒有邏輯的標記型語言，JS才是真正的編程語言，評價前端工程師的水平就看這個了。

第五本《JavaScript DOM編程藝術》

最好的JS入門書籍，一目了然地告訴你如何用JS操作DOM(這是瀏覽器端編程的基本功)，還灌輸了最符合標準的編程理念。可惜有點老，最新一版是2010年的，以至於部分內容有點過期，例如本書內經常提到「某某方法瀏覽器不一定支持，需要小心使用」，而這些歷史遺留問題當今已經不存在了，閱讀過程中無視就好。

第六本《JavaScript高級程序設計》

每個前端必看的書，此書是前端工程師科技樹的關鍵一環。看完此書後再看看之後各類進階書籍會比較好。

俗稱紅寶書，也算入門書籍，雖然是大部頭(七百多頁)，但至少通讀一遍。

全部掌握了，你可以在網路社區里談笑風生了，經過實踐的鍛煉後，面試個前端工程師的崗位應該都沒問題了。

第七本《JavaScript語言精粹》

也是前端必看。薄薄一百來頁，對JS的去粗取精。

第八本《你不知道的JavaScript》

這是一套叢書， 目前為止僅翻譯了第一卷。每本都挺薄，深入介紹了JS中的重要概念。

第九本《JavaScript設計模式》

「設計模式」是軟體工程的重要課題，相當於高考時候的答題套路。前人總結出來的應對各種問題的模板。也算是必看書籍。關於JavaScript設計模式的書籍目前也有好幾本，也有國人寫的，挑一兩本看看就好。

第十本《高性能網站建設指南》(及其續篇《高性能網站進階》)

告訴你真正的商業公司的前端是怎麼優化一個網站的。當然優化的問題不是看看書就能解決的，最好時刻了解你的同行們的經驗。

第一階段：HTML和CSS的學習

HTML就不多說了，基礎中的基礎，這個都不會的小夥伴請參見HTML手冊，認真學習W3C課程，稍有基礎之後可以跟著視頻學習《HTML+CSS基礎課程》。

　 　前端開發必看的14本書

1、《CSS權威指南》第三版

這本書實在太適合小白用戶了，是一本為初學者清掃障礙的書籍。同行一致認為這本書是學習CSS基礎的首選。CSS界權威Meyer大師的作品，翻譯水平也灰常贊!

2、《CSS那些事兒》

不用於一般技術類書籍的枯燥乏味，這本書很有意思。作者是藍色理想經典論壇標準版榮譽版主林小志，具有多年網站設計和網站重構經驗，在CSS、XHTML等前台技術方面有著深厚功底。

全書以傳達CSS布局思維為中心，通過頁面中的文字、圖片、表格、表單等常見元素的處理及各種頁面布局方式的使用，使讀者能深入了解到如何在頁面中更好地運用CSS布局。閱讀本書之後將會發現，原來CSS樣式居然是這麼好玩的東西。

3、《精通CSS：高級Web標準解決方案》第二版

前段學習必備書籍，作者Andy Budd是國際頂尖的網頁設計師，著名的Web標準倡導者，網頁諮詢公司Clearleft的創始人之一。

本書將最有用的CSS技術匯總在一起，總結了CSS設計中的最佳實踐，討論了解決各種實際問題的技術，重點講解了一系列的css開發技巧，是前端開發人員必備的手冊。

4、《CSS禪意花園》

這是一本令人驚嘆的書!必須用一個字形容的話，那就是：美!內容編排合理,文字生動有趣引人入勝,通過一個個實例引導讀者閱讀，強烈推薦!

作者是世界著名的網站設計師，書中的範例來自網站設計領域最著名的網站——CSS Zen Garden(CSS禪意花園)。童鞋們自己去領略吧。

第二階段——JavaScript的學習

Javascript的書籍當然還是要看老外的，你懂得~

5、《JavaScriptDOM編程藝術》

此書絕對是入門好書，簡潔優美的文筆簡直是工具書中的典範啊有木有!

這本書講述了JavaScript和DOM的基礎知識，但重點放在DOM編程技術背後的思路和原則，然後將這些概念貫穿在書中的所有代碼示例中，使你看到用來創建圖片庫頁面的腳本、用來創建動畫效果的腳本和用來豐富頁面元素呈現效果的腳本，最後結合所講述的內容創建了一個實際的網站。

6、《JavaScript權威指南》第6版

這本書非常適合初級、中級程序員，是學習核心JavaScript語言和由Web瀏覽器定義的JavaScript API的指南和綜合參考手冊。

第6版涵蓋HTML 5和ECMAScript 5。很多章節完全重寫，緊跟當今最佳Web開發實踐。本書新增章節描述了jQuery和伺服器端JavaScript。

7、《JavaScript高級程序設計》第三版

《javascript權威指南》比較像一本字典，而這本《javascript高級程序設計》可以算是一本由淺入深的好讀物。這兩本書看完後，對javascript一定會有較為深入的了解。

作者Nicholas C. Zakas是世界頂級Web技術專家，現為雅虎公司界面呈現架構師，負責My Yahoo!和雅虎首頁等大訪問量站點的設計。這本書，看一遍不能算看過，至少讀兩三遍，每一遍都會讓你有新的收穫。

8、《高性能JavaScript》

本書從性能角度全面分析js，含金量非常大，很多知識都是作者通過實踐總結出來的，都是經驗的積累，強烈推薦!

同是Nicholas C. Zakas所寫，如果看《JS高級程序設計》覺得理解不太透徹，學習較為吃力，那麼我強烈建議你看看這本書，真的是極好的一本實踐類書籍，言簡意賅，灰常實用!

9、《JavaScript王者歸來》

這本《JavaScript王者歸來》不僅是一本傳播知識的書，更是一本求道的書。O(∩_∩)O 有追求的程序員一定不要錯過!願神力與你同在!

它揭開了JavaScript的面紗，繞過誤解和虛幻的表象，引領你探索程序王國的奧妙。這是一本探尋程序設計思想本源的「魔法典籍」，也是一本Web開發工程師們需要的案頭參考書。

10、《JavaScript模式》

它絕對不是一本入門級別的書，適用於希望將自身的Javascript技巧提高到一個新層次的專業的開發人員和程序員。

《JavaScript模式》包含了實現每個討論的模式的實踐建議，並附有數個可以立即上手的範例;同時還可以學到一些反模式。短小精悍，進階必讀!

11、《JavaScript設計模式》

進階教程，得有一定功底才能看懂。反之，如果你輕而易舉就能拿下此書，說明你已非等閑之輩~

本書共有兩部分。第一部分給出了實現具體設計模式所需要的面向對象特性的基礎知識，第二部分則專註於各種具體的設計模式及其在JavaScript語言中的應用，主要介紹了工廠模式、橋接模式、組合模式、門面模式等幾種常見的模式。

第三階段——jQUery的學習

12、《鋒利的jQuery》第二版

入門首選，簡單易懂，非常實在。《鋒利的jQuery(第2版)》循序漸進地對jQuery的各種函數和方法調用進行了介紹，對jQuery分析的邏輯非常值得學習。

第四階段—學無止境!

如果以上書籍你全都搞定了，那麼，恭喜你，你真的很厲害!到這種程度，相信你也不太需要別人推薦書籍了，不過我還是厚著臉皮推薦兩本吧。

13、《高性能網站建設指南》

前端開發可以優化網站剩餘70%~80%性能，這本書不算厚，幾個小時就能看完，推薦前端開發工程師看看。在《高性能網站建設指南》中，作者給出了14條具體的優化原則，每一條原則都配以範例佐證，並提供了在線支持。

14、《Web開發敏捷之道》第二版

Web開發敏捷之道》曾榮獲Jolt大獎「最佳技術圖書」獎。在第1版的內容架構基礎上，第2版增加了對Rails 1.2中新特性和最佳實踐的介紹。此書覆蓋了rails1.2的方方面面，其本身也很”敏捷”，翻譯也非常好。

簡述一個JavaScript腳本的基本結構

我不知道你還學過其它什麼語言，如果學過，可以進行類比

JAVASCRIPT作為一種腳本語言，可以說非常強大。

我感覺它是屬於C系統的語言：

1、數據類型

2、基本語法

3、流程式控制制

4、API

5、高級特性（閉包、面向對象）

如何使用JS取出標籤中的文本

首先，只能取出inline的JS內容，如果腳本是通過 src 載入進來的，這個是沒辦法取出的。

對於 inline 的 JS 內容，高端瀏覽器使用 textContent ，IE6/7/8 使用 innerText。下面是例子：

script id=”s1″alert(1);/script

var script = document.getElementById( ‘s1’ );

var text = script.textContent || script.innerText;

console.log( text ); // output alert(1);