整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
為一個產(chǎn)品經(jīng)理，學(xué)習(xí)并掌握基礎(chǔ)的技術(shù)知識是非常重要的。而本篇文章就重點討論前端部分，講一講HTML和CSS、JavaScript的知識要點。
為什么學(xué)習(xí)技術(shù)？我想上面這段話給予了非常好的解釋。
在當(dāng)今時代，職能劃分越來越精細(xì)，但你仍然可以看到不同行業(yè)、領(lǐng)域、職業(yè)都密不可分，他們互相融合和滲透。設(shè)計和技術(shù)亦是如此，產(chǎn)品經(jīng)理和程序員亦是如此。
不難發(fā)現(xiàn)，成功的產(chǎn)品經(jīng)理有一個共性，那就是在精通設(shè)計與用戶體驗的基礎(chǔ)上，精通技術(shù)或者如何運用技術(shù)。前者如張小龍，后者如喬布斯。
這并非偶然，而是因為技術(shù)和設(shè)計原本就是一體的：設(shè)計使用當(dāng)下的技術(shù)來解決問題，因此設(shè)計中就包含了對技術(shù)的考量與使用。
你可能會說，作為一個執(zhí)行層的產(chǎn)品，并不需要了解這些宏觀的問題。你可能還會說，在技術(shù)如此成熟的當(dāng)下，產(chǎn)品可以盡情發(fā)揮想象或者直接套用現(xiàn)有設(shè)計模式。
可是事實表明，在微觀層面設(shè)計和技術(shù)達(dá)成共識可以顯著提升合作質(zhì)量和效率，這也正是各個平臺（不管是安卓、iOS，還是小程序、網(wǎng)站）推出設(shè)計/開發(fā)規(guī)范的原因；另一方面，只有深諳設(shè)計模式及其背后的技術(shù)基礎(chǔ)，才能打破模式、迸發(fā)創(chuàng)意。
在學(xué)習(xí)技術(shù)的同時，我剛好在看交互設(shè)計精髓這本書。書中提到了設(shè)計可以分為對內(nèi)容、形態(tài)、行為的設(shè)計。我驚喜地發(fā)現(xiàn)這些設(shè)計領(lǐng)域剛好可以對應(yīng)一些技術(shù)語言或?qū)崿F(xiàn)方案，例如HTML、CSS、JS，又例如MVC（一種開發(fā)模式，下篇文章會提及）。
所以對產(chǎn)品經(jīng)理而言，學(xué)習(xí)技術(shù)可以幫助你更好地理解產(chǎn)品設(shè)計，更好地執(zhí)行產(chǎn)品工作，更加順暢地與開發(fā)人員合作。
最初我學(xué)習(xí)技術(shù)的動機(jī)來自于想寫一份好的PRD（我的一篇專欄文章講述了這個主題，詳見文章底部的參考資料），為此，我需要知道前端、后端分別想從需求文檔中獲取哪些信息以及他們會如何利用這些信息進(jìn)行開發(fā)。
由此出發(fā)，我看了三本書，分別介紹了HTML和CSS、JavaScript、Python這些編程語言在前端開發(fā)、后端開發(fā)中的應(yīng)用。
在這里，簡單總結(jié)一下這些書中提及的技術(shù)原理，并結(jié)合自己的思考和實踐指出這些技術(shù)原理在產(chǎn)品工作中的應(yīng)用，希望可以對自己以及他人有所幫助。
由于內(nèi)容較多，這篇文章將重點討論前端部分，涉及HTML和CSS、JavaScript的內(nèi)容；關(guān)于后端的內(nèi)容，將在下一篇文章中分享。
下面將分別介紹一下HTML、CSS、JavaScript在web前端開發(fā)中的應(yīng)用。
HTML翻譯作“超文本標(biāo)記語言”，和現(xiàn)在廣為使用的markdown一樣，作為一種標(biāo)記語言，HTML通過一套既定的語法來標(biāo)記文本或者富文本內(nèi)容，從而為這些內(nèi)容劃定結(jié)構(gòu)。
這些HTML格式的文件通常存儲在服務(wù)器上，瀏覽器通過互聯(lián)網(wǎng)向服務(wù)器請求這些頁面資源，然后解析并呈現(xiàn)出用戶直接看到的頁面。
在瀏覽器中打開任意web頁面，并檢查其HTML元素，都可以看到其大體的結(jié)構(gòu)：
<head>元素存放網(wǎng)頁的基本信息，<body>元素里的內(nèi)容就是用戶將在瀏覽器看到的東西，此外還有許許多多的元素（如：<h>、<p>、<a>、<img>、<div>、<li>、<div>）嵌套起來，共同構(gòu)建了網(wǎng)頁的結(jié)構(gòu)。
這些元素一般由開始標(biāo)記、結(jié)束標(biāo)記、內(nèi)容、屬性等部分構(gòu)成，其中“屬性”可以幫助對這些元素進(jìn)行更加具體的描述。
舉例說明：標(biāo)題元素的寫法如下，<h1></h1>為開始和結(jié)束標(biāo)記，中間包圍的即為標(biāo)題元素的內(nèi)容。
<h1>這里是標(biāo)題</h1>
表單元素的常見寫法如下，其中<form>為開始標(biāo)記，有action 和method兩個屬性，</form>為結(jié)束標(biāo)記，省略號的位置放置表單元素包圍的所有內(nèi)容和輸入控件。
<form action="http://123.com/test.py" method="POST"> ... </form>
在同一網(wǎng)站內(nèi)部，可以通過在<a>元素中使用相對資源路徑鏈接到一個新的頁面。
在網(wǎng)站之外，則可以使用URL（統(tǒng)一資源定位符，用文件地址來標(biāo)識web上的任何資源），通過絕對路徑直接向服務(wù)器請求頁面資源。
URL的結(jié)構(gòu)通常如下：通信協(xié)議（http、https、file等）、服務(wù)器名（常見的www）、域名（服務(wù)器IP地址的簡便記法）、資源的絕對路徑、隨URL傳遞的參數(shù)。
我們設(shè)計出一個頁面，頁面上每一個元素（包括控件、信息、圖片）都由HTML元素（例如<input>、<p>、<img>）來定義或者說實現(xiàn)。
這些頁面控件、信息、圖片的屬性同樣可以由HTML元素屬性來實現(xiàn)，例如通過設(shè)置placeholder屬性值，可以為輸入框加入提示文案，通過設(shè)置draggable屬性，讓元素可以拖動。
在頁面結(jié)構(gòu)層面了解設(shè)計與技術(shù)的關(guān)聯(lián)，可以幫助從技術(shù)的角度撰寫產(chǎn)品方案。
（1）一方面，知道了技術(shù)會把頁面結(jié)構(gòu)拆解為元素及其屬性，我們在寫文檔時，也應(yīng)當(dāng)以這種思路拆解并描述頁面，寫清楚頁面有哪些信息，哪些輸入控件，哪些顯示控件，這些控件的屬性是否需要自定義，還是直接使用瀏覽器或操作系統(tǒng)的默認(rèn)樣式。
（2）另一方面，從技術(shù)角度了解元素及其基本屬性，就可以減少產(chǎn)品方案中對細(xì)節(jié)描述的遺漏。
CSS翻譯作“層疊樣式表”，和HTML一樣，CSS也是我們用來創(chuàng)建網(wǎng)頁的語言，HTML定義頁面的內(nèi)容和結(jié)構(gòu)，而CSS定義了web頁面的樣式和表現(xiàn)。
具體來說，通過在HTML的<link>或<style>中鏈接到CSS樣式表，CSS就可以通過其眾多的樣式屬性，控制HTML中元素的外觀表現(xiàn)。
CSS的樣式屬性，例如color、border、font-style等，可以控制HTML元素的字體顏色、邊框、字體樣式等等。此外，CSS將每個HTML元素看作一個盒子（這也就是“盒模型”），以控制其內(nèi)外邊距、邊框等。
還可以使用CSS靈活的對頁面進(jìn)行布局：
（1）流體布局，擴(kuò)展瀏覽器窗口時，頁面中的內(nèi)容會根據(jù)一定規(guī)則自動擴(kuò)展以適應(yīng)頁面
（2）凍結(jié)布局，通過設(shè)定頁面寬度，所有頁面元素都將固定在頁面上，不隨瀏覽器窗口大小而改變布局
（3）凝膠布局，鎖定頁面內(nèi)容區(qū)域的寬度，但外邊距會根據(jù)窗口大小進(jìn)行擴(kuò)展收縮，從而使得頁面在瀏覽器中居中
（4）絕對定位，使得元素相對于頁面固定
（5）固定定位，使元素相對于瀏覽器窗口固定不動
（6）相對定位
（7）表格顯示
（8）浮動布局
CSS可以靈活適配，可以為一個HTML頁面設(shè)置多個樣式表（或者在CSS中設(shè)置@media規(guī)則），用于不同的場景展示、匹配不同的設(shè)備或者適應(yīng)不同的窗口寬度。
（1）在詳細(xì)的產(chǎn)品設(shè)計實現(xiàn)方案中，不僅要定義頁面具有哪些元素，也要定義這些元素的樣式、外觀、動效等。
在技術(shù)實現(xiàn)上，這是兩個不同的層面，由不同的語言來實現(xiàn)；因而在文檔寫作中，也應(yīng)該將元素與其樣式區(qū)分開來進(jìn)行描述，而不是將所有說明混雜在一起（雖然這個工作往往需要和設(shè)計進(jìn)行配合）。
例如在描述按鈕時，不僅要指明按鈕元素的基本屬性（例如按鈕文本、按鈕類別），也應(yīng)該指出按鈕在不同狀態(tài)的不同樣式。
（2）在宏觀層面，隨著設(shè)備形態(tài)的多樣化，樣式適配也變成了一個很大的主題，也應(yīng)是產(chǎn)品設(shè)計中應(yīng)該考慮的重要方面。
以網(wǎng)站設(shè)計而言，同樣的內(nèi)容元素，在手機(jī)和PC上往往需要定義不同的樣式，對此有很多技術(shù)實現(xiàn)方案，產(chǎn)品經(jīng)理應(yīng)對樣式適配有基本認(rèn)知，才能與技術(shù)共同商定適配方案。
前面提到，使用HTML標(biāo)記和CSS可以幫助搭建web頁面，而JavaScript的使用，可以為這些頁面增加行為和功能（比如對用戶行為作出響應(yīng)、處理事件、更新頁面、與服務(wù)端通信），從而成為真正意義上的web應(yīng)用。
HTML5是HTML的最新版本，但實際上當(dāng)我們談?wù)揌TML5時，不僅僅指代標(biāo)記，而是HTML標(biāo)記、CSS樣式、JavaScript腳本這些技術(shù)的結(jié)合，這些技術(shù)共同幫助構(gòu)件web應(yīng)用。
通過在代碼中引用JavaScript文件或者直接將腳本放在<script>元素中，就可以在web頁面中增加JavaScript。
瀏覽器在加載頁面時，對于HTML中每一個元素，會創(chuàng)建一個表示該元素的對象，把它與所有其他元素一起放在一個類似樹的結(jié)構(gòu)中，這個樹即為DOM（文檔對象模型 Document Object Model），DOM是瀏覽器對于頁面結(jié)構(gòu)的內(nèi)部表示。
JavaScript可以通過DOM對頁面元素進(jìn)行訪問、修改、增刪。例如，可以使用document.getElementById在DOM中查找元素，使用元素的innderHTML屬性修改其內(nèi)容，然后瀏覽器會近乎實時的對DOM以及頁面進(jìn)行更新。
瀏覽器在顯示頁面時，會有許多事件發(fā)生，例如按鈕點擊事件、數(shù)據(jù)到達(dá)事件、時間到期事件等，使用JavaScript編寫事件處理程序，可以對這些事件進(jìn)行處理。
以表單的按鈕點擊事件為例進(jìn)行說明：用戶在輸入框輸入信息，點擊按鈕提交信息后，可以在當(dāng)前頁查看已經(jīng)提交的信息。
實現(xiàn)思路如下：首先通過DOM獲取按鈕元素，并為按鈕的onclick屬性設(shè)置一個處理程序。
該處理程序需要通過DOM訪問輸入元素，并通過輸入元素的value屬性獲取用戶輸入值，最后再通過DOM增加到頁面中。這樣在用戶點擊按鈕時，就會執(zhí)行該處理程序，獲取用戶輸入并增加到頁面中，以此實現(xiàn)用戶與系統(tǒng)的交互。
通過使用JavaScript API（API即應(yīng)用編程接口，提供一組對象、方法和屬性，可以用來訪問這些技術(shù)的所有功能；對象可以理解為是屬性的集合）可以為頁面增加更多新的功能，如視頻播放、本地存儲、地理定位等。
以地理定位為例，通過調(diào)用地理定位API，使用其getCurrentPosition方法可以獲取當(dāng)前位置信息（瀏覽器可以通過IP定位、GPS定位等方式獲取位置信息）并進(jìn)行處理和顯示；使用watchPosition方法可以對位置更新進(jìn)行實時監(jiān)控和報告；使用clearWatch以停止監(jiān)視位置。
（1）Ajax（XMLHttpRequest）
前端（比如瀏覽器）向服務(wù)器請求頁面或者數(shù)據(jù)資源，服務(wù)端接受請求并執(zhí)行服務(wù)端程序，捕獲程序的輸出作為響應(yīng)發(fā)回前端，前端監(jiān)測到數(shù)據(jù)到達(dá)后，再執(zhí)行處理程序?qū)@些數(shù)據(jù)進(jìn)行處理，最終更新DOM和頁面。
這種獲取數(shù)據(jù)的模式稱為Ajax，在應(yīng)用中可以使用這種方式更新內(nèi)容，而無需重新加載頁面。
那么如何使用JavaScript發(fā)送請求？
首先創(chuàng)建一個請求對象，指明請求方法和資源地址，同時提供一個處理程序，然后發(fā)出請求，等待數(shù)據(jù)到達(dá)。數(shù)據(jù)到達(dá)時，就會調(diào)用這個處理程序，在請求對象的responseText屬性中獲取傳回的數(shù)據(jù)并進(jìn)行處理。
瀏覽器主要使用兩種方法發(fā)送請求：GET和POST
使用POST和GET方法都可以向服務(wù)端發(fā)送請求，不過采用了不同的方式。POST會打包要傳遞到服務(wù)端的數(shù)據(jù)，并在后臺把他們發(fā)送到服務(wù)器；GET也會打包數(shù)據(jù)，但會把這些數(shù)據(jù)追加到URL的最后，然后向服務(wù)器發(fā)送請求。
如果要傳遞的數(shù)據(jù)應(yīng)當(dāng)是私有的，或者數(shù)據(jù)很多，就應(yīng)當(dāng)使用POST；如果返回的頁面要支持添加書簽，就需要使用GET方法。
（2）JSONP
除了提供HTML和JavaScript的服務(wù)器外，瀏覽器不允許從其他不同的服務(wù)器獲取數(shù)據(jù)，這是瀏覽器的安全策略。如果頁面和要請求的數(shù)據(jù)同在一個服務(wù)器上，可以使用Ajax請求數(shù)據(jù)，如果頁面和要請求的數(shù)據(jù)不在同一服務(wù)器上，則可以使用JSONP請求數(shù)據(jù)。
JSONP是一種使用<script>標(biāo)記獲取數(shù)據(jù)的方法，通過在請求URL后指定回調(diào)函數(shù)，將返回的數(shù)據(jù)包裝在一個函數(shù)調(diào)用中進(jìn)行處理。
例如，我們的網(wǎng)站從微博獲取用戶最近動態(tài)，就是一個跨域（服務(wù)器）請求數(shù)據(jù)的應(yīng)用。
（3）Web Socket
Ajax和JSONP都使用了一個基于HTTP的請求/響應(yīng)模型。也就是說，每次需要從服務(wù)端獲取資源時，都要使用瀏覽器作出請求得到相關(guān)頁面和數(shù)據(jù)。
對于一些數(shù)據(jù)更新比較頻繁的應(yīng)用，瀏覽器需要不斷的發(fā)送請求詢問服務(wù)端是否有新數(shù)據(jù)，在這種應(yīng)用場景下，Web Socket或許是一個更佳的通信方案。
Web Socket是一個新增的API，允許與一個服務(wù)器的連接保持打開，這樣在有新數(shù)據(jù)時，服務(wù)器就會主動把數(shù)據(jù)發(fā)給前端，就像瀏覽器與服務(wù)器之間的一個接通的電話線。
Web Socket提供了實時交互通信的能力，允許服務(wù)器主動發(fā)送信息給客戶端，是一種區(qū)別于HTTP的全新雙向數(shù)據(jù)流協(xié)議。
上面提及頁面從服務(wù)器獲取數(shù)據(jù)，除此之外，還可以使用本地存儲獲取數(shù)據(jù)，從而減少與服務(wù)端的通信，打造更好的用戶體驗與更廣泛的應(yīng)用場景。
（1）瀏覽器cookie
服務(wù)器隨響應(yīng)發(fā)送一個cookie給瀏覽器，cookie中以鍵值對形式存儲一些信息。瀏覽器在本地存儲cookie，下次發(fā)出請求時會將cookie發(fā)回服務(wù)器。cookie是按域存儲的，而且只能發(fā)送給這個域，因而不同域之間的cookie無法互相訪問。使用cookie可以實現(xiàn)個性化的體驗、維護(hù)游戲狀態(tài)、存儲用戶數(shù)據(jù)等等。
（2）web存儲/local storage（本地存儲）、session storage（會話存儲）
使用JS的 web storage API，可以在瀏覽器中更好的存儲數(shù)據(jù)。
每個瀏覽器都有一些本地存儲空間（每個域都有超過5M的空間，存儲在一個域的數(shù)據(jù)對另一個域是不可見的），使用setItem方法可以在localstorage中存儲一個鍵值對，使用getItem方法可以從本地存儲中獲取某個鍵對應(yīng)的值，使用remove方法可以刪除本地存儲中某一鍵對應(yīng)的數(shù)據(jù)項。
session storage與local storage非常相似，唯一的區(qū)別在于：在用戶與瀏覽器會話期間，session storage可以在本地存儲信息，一旦會話結(jié)束（即關(guān)閉瀏覽器窗口），這些信息將刪除；而local storage將永久存儲信息，除非用戶手動刪除緩存。
JavaScript是單線程的，如果要執(zhí)行復(fù)雜的運算，可以會花費太多時間以至于無法及時作出頁面響應(yīng)。這時可以使用web工作線程，他在一個單獨的線程處理耗時的任務(wù)，所以主代碼可以繼續(xù)運行以提高頁面的響應(yīng)性。每個工作線程在他自己的線程中運行，如果你的計算機(jī)有一個多核處理器，工作線程會并行運行，這回提高運算速度。
下面簡單介紹一下web工作線程的工作方式。
在主代碼中使用構(gòu)造函數(shù)創(chuàng)建一個或者多個工作線程對象，并指定工作線程要執(zhí)行的JavaScript文件。
主代碼和工作線程代碼通過消息通信，使用postmessage發(fā)送信息，使用onmessage接收信息。
主代碼通過發(fā)送一個消息讓工作線程開始工作，即執(zhí)行其JavaScript文件；工作線程完成工作后，會發(fā)回消息，并傳入其運算結(jié)果。主代碼得到這些結(jié)果，執(zhí)行相應(yīng)的處理程序，將結(jié)果展現(xiàn)在頁面中。
軟件產(chǎn)品的設(shè)計可以分為內(nèi)容、形態(tài)、行為三個領(lǐng)域。前兩者是HTML和CSS的主要工作，而軟件行為的設(shè)計就是JS（JavaScript）的主要工作。
在內(nèi)容層面，通過JS進(jìn)行前后端通信，可以從服務(wù)端獲取最新的數(shù)據(jù)并動態(tài)的為頁面增加內(nèi)容。
因而在產(chǎn)品設(shè)計中，我們應(yīng)該考慮頁面信息的來源，是寫死在前端，還是請求服務(wù)端數(shù)據(jù)接口，是否需要搭建相應(yīng)的管理后臺。通過JS進(jìn)行前后端通信，還可以將用戶輸入等信息上報服務(wù)端并進(jìn)行存儲，這亦是產(chǎn)品方案中應(yīng)該考慮的地方。
在功能或行為層面，使用JS進(jìn)行前后端通信，一些功能入口也可以通過服務(wù)端進(jìn)行靈活的配置，例如為不同的用戶角色提供不同的功能入口或功能限制。
頁面對用戶的響應(yīng)也都是通過JS來實現(xiàn)，例如對表單輸入進(jìn)行校驗并反饋，這些邏輯判斷和運算都是通過JS完成。對此，產(chǎn)品經(jīng)理往往需要通過流程圖、狀態(tài)圖等，進(jìn)行邏輯與運算規(guī)則的說明。
上面分別提及在內(nèi)容、形態(tài)、行為三個設(shè)計領(lǐng)域，技術(shù)在產(chǎn)品工作中的具體應(yīng)用。在更加抽象的層面，技術(shù)的學(xué)習(xí)讓我更加了解互聯(lián)網(wǎng)產(chǎn)品的本質(zhì)–信息。在團(tuán)隊配合、項目流程上，技術(shù)與設(shè)計的結(jié)合同樣具有價值：
（1）幫助從技術(shù)的角度初步評估產(chǎn)品方案，用于評估方案的成本和性價比，排列優(yōu)先級和進(jìn)行版本規(guī)劃
（2）與技術(shù)團(tuán)隊更高效的配合，隨著技術(shù)發(fā)展和不斷成熟，有越來越多的工具可以幫助快速開發(fā)，懂得技術(shù)的開發(fā)原理和開發(fā)手段，才可以采用更加靈活的方式與技術(shù)配合。
本文主要探討了：
下一次的分享中將會對后端，以及前后端交互的技術(shù)知識和應(yīng)用進(jìn)行總結(jié)，感興趣的小伙伴可以關(guān)注我或者我的專欄。
寫作本文著實花了不少時間，一方面在于其中涉及很多技術(shù)語言；但更主要的原因在于寫作過程中涉及到技術(shù)思維、設(shè)計思維的來回切換和融合，自認(rèn)為本文在這一方面仍然有待提高。
學(xué)習(xí)技術(shù)給我?guī)砗芏鄬用娴氖斋@，讓我得以層層深入，庖丁解牛似的看清產(chǎn)品的內(nèi)部構(gòu)造；也讓我可以從不同角度看待技術(shù)、設(shè)計、產(chǎn)品在軟件產(chǎn)業(yè)不同階段中扮演的角色，對團(tuán)隊組織構(gòu)成有了新的理解。
最后以一句我的名言結(jié)尾：對于設(shè)計的追問會帶你走向技術(shù)，對于技術(shù)的追問會帶你走向設(shè)計。
《Head First HTML與CSS》
《Head First HTML5 Programming》
寫了30+產(chǎn)品需求文檔后，我對PRD有了新的認(rèn)知
WebSocket簡介及應(yīng)用實例
本文由 @lemon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
日，有不少的程序員問w3cschool這邊，前端開發(fā)應(yīng)該怎么學(xué)?
有個小白程序員表示，自己走了很多彎路，學(xué)java開發(fā)沒學(xué)透不能就業(yè)，現(xiàn)在學(xué)前端又不知道如何下手，前后算起來浪費了不少的時間。
針對此問題，下面w3cschool就給程序員小伙伴們答疑解惑，并分享一些干貨。
前端有三架馬車你一定要學(xué)會“駕馭”，HTML+CSS+Javascript。
照目前看來，網(wǎng)上各種前端學(xué)習(xí)資料又多又雜，確實讓不少入門前端的小伙伴不知所措。要選什么學(xué)習(xí)資料?如何入門前端開發(fā)?
關(guān)于視頻的選擇，直接網(wǎng)上搜“30 Days to Learn HTML & CSS”這個視頻來看。
這個視頻是國外的前端開發(fā)特產(chǎn)，大小有1G多吧!
前端開發(fā)可以照前端開發(fā)的視頻進(jìn)行實戰(zhàn)訓(xùn)練，建議可以一邊開著NotePad++?，一邊看視頻，一邊敲代碼。
另外，可以用有道云，或者是印象筆記稍微做點記錄，這會加快你對html、css的學(xué)習(xí)。
當(dāng)你咨詢了很多的前端工程師，他們都會推薦你從經(jīng)典的w3cschool基礎(chǔ)教程開始，把上面的課程刷一遍。
通過前面兩步的學(xué)習(xí)，你基本上算是入門html啦。
但相信也會有些程序員覺得很枯燥，那不妨可以嘗試w3cschool新開發(fā)的html微課。
比如之前的《刀塔傳奇》，很多人每天刷副本都可以樂此不疲，因為游戲升級通關(guān)是比較有趣的。
w3cschool微課同樣采用了闖關(guān)刷副本的模式，你通過每天有趣的刷副本闖關(guān)，就可以掌握html重點的概念和編程技能。
會有些前輩會給你推薦《DOM編程藝術(shù)》、《Javascript權(quán)威指南》、《Javascript高級程序設(shè)計》、《鋒利的JQuery》等，但對于新手來說似乎略難。
不妨去看Head first html， xhtml & CSS這兩本簡直是神書，真心經(jīng)典!
avaScript 是網(wǎng)景（Netscape）公司開發(fā)的一種基于客戶端瀏覽器、面向（基于）對象、事件驅(qū)動式的網(wǎng)頁腳本語言。JavaScript語言的前身叫作Livescript。
文本編輯器
Web瀏覽器
解釋執(zhí)行（由上而下）
JavaScript1.0——JavaScript1.4
JavaScript/IE3.0、JavaScript1.2/IE4.0；
微軟允許用戶自行設(shè)置對JavaScript處理模式。
JavaScript與Java的區(qū)別體現(xiàn)在：
首先，它們是兩個公司開發(fā)的不同的兩個產(chǎn)品，Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計語言，特別適合于Internet應(yīng)用程序開發(fā)；而JavaScript是Netscape公司的產(chǎn)品，其目的是為了擴(kuò)展Netscape Navigator功能而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言。
其次，JavaScript是基于對象的，而Java是面向?qū)ο蟮模碕ava是一種真正的面向?qū)ο蟮恼Z言，即使是開發(fā)簡單的程序，必須設(shè)計對象。JavaScript是種腳本語言，它可以用來制作與網(wǎng)絡(luò)無關(guān)的，與用戶交互作用的復(fù)雜軟件。它是一種基于對象和事件驅(qū)動的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用。
第三，兩種語言在其瀏覽器中所執(zhí)行的方式不一樣。Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過編譯，因而客戶端上必須具有相應(yīng)平臺上的仿真器或解釋器，它可以通過編譯器或解釋器實現(xiàn)獨立于某個特定的平臺編譯代碼的束縛。JavaScript是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶，由瀏覽器解釋執(zhí)行。
第四，兩種語言所采取的變量是不一樣的。Java采用強(qiáng)類型變量檢查，即所有變量在編譯之前必須作聲明。JavaScript中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而是解釋器在運行時檢查其數(shù)據(jù)類型。
第五，代碼格式不一樣。Java是一種與HTML無關(guān)的格式，必須通過像HTML中引用外媒體那么進(jìn)行裝載，其代碼以字節(jié)代碼的形式保存在獨立的文檔中。JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。
第六，嵌入方式不一樣。在HTML文檔中，兩種編程語言的標(biāo)識不同，JavaScript使用<script>...</script>來標(biāo)識，而Java使用<applet> ... </applet> 來標(biāo)識。
第七，靜態(tài)綁定和動態(tài)綁定。Java采用靜態(tài)聯(lián)編，即Java的對象引用必須在編譯時的進(jìn)行，以使編譯器能夠?qū)崿F(xiàn)強(qiáng)類型檢查，如不經(jīng)編譯則就無法實現(xiàn)對象引用的檢查。JavaScript采用動態(tài)聯(lián)編，即JavaScript的對象引用在運行時進(jìn)行檢查。
如果想要更高效、更系統(tǒng)地學(xué)會javascript，最好采用邊學(xué)邊練的學(xué)習(xí)模式。
今天分享的這套JavaScript學(xué)習(xí)教程，講解了前端開發(fā)中的核心技術(shù)JavaScript，俗稱JS
內(nèi)容涵蓋：JavaScript核心語法、JavaScript內(nèi)置支持類、JavaScript調(diào)試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點，該視頻可以開啟你的WEB前端之路。
1. .JavaScript教程-JavaScript概述
2. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式1
3. .JavaScript教程-HTML嵌入JavaScript代碼的第一種方式2
4. .JavaScript教程-HTML嵌入JavaScript代碼的第二種方式
5. .JavaScript教程-HTML嵌入JavaScript代碼的第三種方式
6. JavaScript教程-JS的標(biāo)識符
7. .JavaScript教程-JS的變量1
8. .JavaScript教程-JS的變量2
9. JavaScript教程-JS的函數(shù)初步1
10. .JavaScript教程-JS的函數(shù)初步2
11. .JavaScript教程-全局變量和局部變量
12. .JavaScript教程-JS的數(shù)據(jù)類型
13. .JavaScript教程-Undefined數(shù)據(jù)類型
14. .JavaScript教程-Number數(shù)據(jù)類型
15. .JavaScript教程-Boolean數(shù)據(jù)類型
16. .JavaScript教程-回顧數(shù)據(jù)類型
17. .JavaScript教程-String數(shù)據(jù)類型
18. .JavaScript教程-Object數(shù)據(jù)類型
19. JavaScript教程-Object數(shù)據(jù)類型2
20. .JavaScript教程-Object數(shù)據(jù)類型3
21. .JavaScript教程-null undefined NaN的區(qū)別以及等同和全等運算符
22. .JavaScript教程-JS的常用事件
23. .JavaScript教程-回調(diào)函數(shù)的概念
24. .JavaScript教程-注冊事件的兩種方式
25. JavaScript教程-JS代碼的執(zhí)行順序
26. .JavaScript教程-JS代碼的執(zhí)行順序2
27. JavaScript教程-捕捉回車鍵
28. .JavaScript教程-捕捉回車鍵2
29. .JavaScript教程-void運算符
30. .JavaScript教程-JS的控制語句
31. JavaScript教程-設(shè)置和獲取文本框的value
32. JavaScript教程-innerHTML和innerText屬性
33. .JavaScript教程-正則表達(dá)式
34. .JavaScript教程-郵箱地址的正則表達(dá)式
35. JavaScript教程-擴(kuò)展字符串的trim函數(shù)
36. .JavaScript教程-回顧JS
37. JavaScript教程-表單驗證
38. JavaScript教程-表單驗證2
39. JavaScript教程-表單驗證3
40. .JavaScript教程-表單驗證4
41. .JavaScript教程-復(fù)選框的全選和取消全選
42. .JavaScript教程-獲取下拉列表選中項的value
43. .JavaScript教程-周期函數(shù)setInterval
44. .JavaScript教程-內(nèi)置支持類Array
45. .JavaScript教程-BOM編程window的open和close
46. .JavaScript教程-BOM編程彈出確認(rèn)框
47. .JavaScript教程-（補(bǔ)錄）-將當(dāng)前窗口設(shè)置為頂級窗口
48. .JavaScript教程-BOM編程history和location對象
49. .JavaScript教程-JSON在開發(fā)中的使用
50. .JavaScript教程-JSON在開發(fā)中的使用2
51. JavaScript教程-JSON在開發(fā)中的使用3
52. .JavaScript教程-JSON在開發(fā)中的使用4
53. JavaScript教程-JSON在開發(fā)中的使用5
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
