念調試js（調試一下吧）

• 1、javascript的作用
• 2、web前端開發需要用到哪些知識
• 3、JQuery onload、ready概念介紹及使用方法
• 4、如何自學 Python

JavaScript是一種屬於網路的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。[3]

是一種解釋性腳本語言（代碼不進行預編譯）。[4]

主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。[4]

可以直接嵌入HTML頁面，但寫成單獨的js文件有利於結構和行為的分離。[4]

跨平台特性，在絕大多數瀏覽器的支持下，可以在多種平台下運行（如Windows、Linux、Mac、Android、iOS等）。

Javascript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變數提供存放信息的地方，表達式則可以完成較複雜的信息處理。

JavaScript腳本語言具有以下特點:

(1)腳本語言。JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程序的運行過程中逐行進行解釋。

(2)基於對象。JavaScript是一種基於對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。

(3)簡單。JavaScript語言中採用的是弱類型的變數類型,對使用的數據類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。

(4)動態性。JavaScript是一種採用事件驅動的腳本語言,它不需要經過Web伺服器就可以對用戶的輸入做出響應。在訪問一個網頁時,滑鼠在網頁中進行滑鼠點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應。

(5)跨平台性。JavaScript腳本語言不依賴於操作系統,僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。[3]

不同於伺服器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運行，不需要伺服器的支持。所以在早期程序員比較青睞於JavaScript以減少對伺服器的負擔，而與此同時也帶來另一個問題：安全性。

而隨著伺服器的強壯，雖然程序員更喜歡運行於服務端的腳本以保證安全，但JavaScript仍然以其跨平台、容易上手等優勢大行其道。同時，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進行支持。隨著引擎如V8和框架如Node.js的發展，及其事件驅動及非同步IO等特性，JavaScript逐漸被用來編寫伺服器端程序。

應該熟練掌握的基礎技能：

HTML4，HTML5語法、標籤、語義

CSS2.1，CSS3規範，與HTML結合實現各種布局、效果

Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能

一個成熟的客戶端javascript庫，推薦jquery

一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸註冊功能就足夠支持前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬，

HTTP

在掌握以上基礎技能之後，工作中遇到需要的技術也能快速學習。

基本開發工具

恰當的工具能有效提高學習效率，將重點放在知識本身，在出現問題時能快速定位並

解決問題，以下是個人覺得必備的前端開發工具：

文本編輯器：推薦Sublime Text，支持各種插件、主題、設置，使用方便

瀏覽器：推薦Google Chrome，更新快，對前端各種標準提供了非常好的支持

調試工具：推薦Chrome自帶的Chrome develop tools，可以輕鬆查看DOM結構、樣式，通過控制台輸出調試信息，調試javascript，查看網路等

輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome develop tools，

FQ工具：lantern, 壁虎漫步

學習方法和學習目標

方法：

入門階段反覆閱讀經典書籍的中文版，書籍中的每一個例子都動手實現並在瀏覽器中查看效果

在具備一定基礎之後可以上網搜各種教程、demo，了解各種功能的實際用法和常見功能的實現方法

閱讀HTML，CSS，Javascript標準全面完善知識點

閱讀前端牛人的博客、文章提升對知識的理解

善用搜索引擎

目標：

熟記前面知識點部分的重要概念，結合學習經歷得到自己的理解

熟悉常見功能的實現方法，如常見CSS布局，Tab控制項等。

入門之路

以下是入門階段不錯的書籍和資料

HTML先看《HTML CSS: Design and Build Websites》1-9章，然後《HTML5: The Missing Manual》1-4章。

CSS先看《CSS: The Missing Manual》，然後《CSS權威指南》

javascript先看《javascript高級程序設計》，然後《javascript權威指南》

HTTP看HTTP權威指南

在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模塊都需要三者結合才能實現。

動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教程網址

可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題（帶參考答案）

有各種各樣的教程

MDN也有很多教程，更重要的是裡面有詳細的文檔，需要查找某個功能時在Google搜索：xxx site:

也有很多優質教程

原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning jQuery》或者去jQuery官網

建一個賬號，保存平時學習中的各種代碼和項目。

有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。也可以去或者這樣的網站註冊賬號，方便實用

經常實用Google搜索英文資料應該經常找到來自的高質量答案，與到問題可以直接在這裡搜索，如果有精力，註冊一個賬號為別人解答問題也能極大提高個人能力。

經典書籍熟讀之後，可以打開前面必備基礎技能部分的鏈接。認真讀對應標準，全面掌握知識

繼續提高

有了前面的基礎之後，前端基本算是入門了，這時候可能每個人心中都有了一些學習方向，如果還是沒有。

可以參考前面必備技能部分提到的那兩個項目，從裡面選一些進行發展學習。以下是一些不錯的方面：

Grunt：前端自動化工具，提高工作效率

less css：優秀的CSS預處理器

bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美

requirejs：AMD規範的模塊載入器，前端模塊化趨勢的必備工具

Node.js：JavaScript也可以做後台，前端工程師地位更上一步

AngularJS：做Single Page Application的好工具

移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端

Javascript內存管理：SPA長期運行需要注意內存泄露的問題

High Performance JavaScript(Build Faster Web Application Interfaces)

Best Practices for Speeding Up Your Web Site：重要技能

####工具

chrome dev tools：前端開發調試利器，著重注意幾個功能：

liveload: 修改頁面後自動刷新，不用按F5

dimensions：直接在頁面上測量的利器

livestyle：css樣式修改後自動起效果，不需要刷新，elements修改後也能同步到代碼中

image tool：測量，取色

UC二維碼：移動端調試掃碼必備

pagespeed，YSlow：頁面性能分析和優化插件

馬克飛象：優秀的在線markdown編輯器，快速寫周報，做記錄

watch expression：通過表達式查看當前內存中的值

call stack：查看調用棧，開啟async，可以看非同步調用棧（這個非常有用，尤其是ajax調試的時候）

scope variables：作用域鏈上的變數，非常有用

console（廢話）

elements:元素樣式調整，很常用

sources：代碼中添加斷點，單步調試，以及單步調試過程中查看內存中的對象

network：抓包查看每個請求，非常重要，前後端聯調必備

timeline：分析渲染、js執行等等各個階段，性能優化利器

emulation：模擬移動端環境，mobile頁面開發必備

一些插件:

sublime text2：編碼方便，插件多，速度快，性能好

emmet：提升html編碼速度必備

sublimelinter + 各種語言的lint和hint：代碼糾錯

一些snippets：自動補全，提升開發效率

Intellij IDEA和WebStorm：集成開發環境，集成了各種功能，開發比sublime要方便，但會比較吃性能

Mark Men：測量、取色、標註利器，拿到視覺稿之後第一個打開的軟體

GFW Fucker：我用紅杏，可以的話買個虛擬伺服器當梯子

iHosts：非常優秀的hosts管理軟體，輕鬆修改hosts，開發調試必備

Charles：Mac 平台最好用的抓包分析工具

Rythem：AlloyTeam出品的代理抓包軟體，非常輕量，安裝簡單，移動端（真機）開發調試很好用

Wunderlist：一個非常不錯的Todo List，任務、需求多的時候管理起來很方便

####技能

前端的技能其實除了JavaScript（包括NodeJS）、HTML、CSS以外，還有很多。其實前端的技能樹很大，這裡只能列一些我開發中見到的說一說

#####語言基礎

JavaScript：

作用域鏈、閉包、運行時上下文、this

原型鏈、繼承

NodeJS基礎和常用API

CSS：

選擇器

瀏覽器兼容性及常見的hack處理

CSS布局的方式和原理（盒子模型、BFC、IFC等等）

CSS 3，如animation、gradient、等等

HTML：

語義化標籤

#####進階

JavaScript:

非同步控制（Promise、ES6 generator、Async）

模塊化的開發方式（AMD、CMD、KMD等等）

JavaScript解釋器的一些相關知識

非同步IO實現

垃圾回收

事件隊列

常用框架使用及其原理

jQuery：基於選擇器的框架，但個人認為不能叫框架，應該算工具庫，因為不具備模塊載入機制，其中源碼很適合閱讀鑽研

AngularJS/Avalon等MVVM框架：著重理解MVVM模式本身的理念和雙向綁定的實現，如何解耦

underscore：優秀的工具庫，方便的理解常用工具代碼片段的實現

polymer/React: 組件化開發，面向未來，理解組件化開發的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪製原理

DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程

解析HTML、CSS、JavaScript時造成的阻塞

HTML5相關

SVG及矢量圖原理

Canvas開發及動畫原理（幀動畫）

Video和Audio

flex box布局方式

icon fonts的使用

常用NodeJs的package：

koa

express

underscore

async

gulp

grunt

connect

request

一些理念：

響應式Web

優雅降級、漸進增強

dont make me think

網頁可用性、可訪問性、其中的意義

SEO搜索引擎優化，了解搜索引擎的原理

SPA的好處和問題

性能優化：

減少請求數量（sprite、combo）

善用緩存（application cache、http緩存、CDN、localstorage、sessionstorage，備忘錄模式）

減少選擇器消耗（從右到左），減少DOM操作（DOM和JavaScript解釋器的分離）

CSS的迴流與重繪

生態系統

npm

bower

spm

搭建一個屬於自己的博客

git pages

hexo

jekyll

#####未來

Web Componets：面向未來的組件化開發方式

HTML模板

Shadow DOM

Custom Elements

HTML Import

移動端Native開發：這也是需要了解的，以後前端工程師會經常地和webview打交道，也要了解native開發

頁面載入完成有兩種事件，一是ready，表示文檔結構已經載入完成（不包含圖片等非文字媒體文件），二是onload，指示頁

面包含圖片等文件在內的所有元素都載入完成。(可以說：ready

在onload

前載入！！！)

一般樣式控制的，比如圖片大小控制放在onload

裡面載入;

jS事件觸發的方法，可以在ready

裡面載入;

用jQ的人很多人都是這麼開始寫腳本的：

通常的寫法

複製代碼

代碼如下:

$(function(){

//

do

something

});

其實這個就是jq

ready()的簡寫，他等價於：

複製代碼

代碼如下:

$(document).ready(function(){

//do

something

})

也等於下面這個方法，jQuer的默認參數是：「document」；

複製代碼

代碼如下:

$().ready(function(){

//do

something

})

$(document).Ready()方法

VS

OnLoad事件

VS

$(window).load()方法

接觸JQuery一般最先學到的是何時啟動事件。在曾經很長一段時間裡,在頁面載入後引發的事件都被載入

在」Body」的Onload事件里.

對於Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:

載入

多個函數的問題

■body

onload=”a();b();”

/body

在Onload事件中

只能這樣載入，很醜陋…

■而在JQuery中你可以利用多個JQuery.Ready()方法，它們會按次序依次執行

代碼和內容不分離

這個貌似不用說了，讓人深惡痛絕-.-!!◦

執行先後順序不同

■對於Body.Onload事件，是在載入完所有頁面內容才會觸發，我的意思是所有內容,包括圖片，flash等.如果頁面的這些內容很多會讓用戶等待很

長時間.

■

而對於$(document).ready()方法，這個方法只是在頁面所有的DOM載入完畢後就會觸發,無疑很大的加快了網頁的速度.

但是對於一些特殊應用，比如圖片的放大縮小，圖片的剪裁。需要網頁所有的內容載入完畢後才執行的呢？我推薦使用$(window).load()方法，這

個方法會等到頁面所有內容載入完畢後才會觸發，並且同時又沒有OnLoad事件的弊端.

複製代碼

代碼如下:

script

type=”text/javascript”

$(window).load(function()

{

alert(“hello”);

});

$(window).load(function()

{

alert(“hello

again”);

});

/script

上面的代碼會在頁面所有內容載入完成後按先後順序依次執行.

當然不要忘了與之對應的Unload方法

複製代碼

代碼如下:

script

type=”text/javascript”

$(window).unload(function()

{

alert(“good

bye”);

});

/script

上面代碼會在頁面關閉時引發.

在

所有DOM載入之前引發JS代碼

這個方法是我在調試的時候最喜歡的，有時候開發的時候也用這種方法

複製代碼

代碼如下:

body

script

type=”text/javascript”

(function()

{

alert(“hi”);

})(jQuery)

/script

/body

對，

就是利用js閉包的形式將js代碼嵌入body，這段代碼會自動執行，當然也可以直接嵌入js代碼,這種方式要注意順序問題，如下：

複製代碼

代碼如下:

body

div

id=”test”this

is

the

content/div

script

type=”text/javascript”

alert($(“#test”).html());//I

Can

display

the

content

/script

/body

body

script

type=”text/javascript”

alert($(“#test”).html());//I

Can’t

display

the

content

/script

div

id=”test”this

is

the

content/div

/body

上面兩段代碼,

第二段代碼當中因為只能解釋到當前代碼之前的DOM,而test並不存在於已經解析的DOM數.所以第二段代碼無法正確顯示.

其實python非常適合初學者入門。相比較其他不少主流編程語言，有更好的可讀性，因此上手相對容易。自帶的各種模塊加上豐富的第三方模塊，免去了很多「重複造輪子」的工作，可以更快地寫出東西。

我是真正零基礎開始學Python的，從一開始的一竅不通，到3個月後成功搭建了一個動態網站（沒有用任何框架）。相比於計算機大牛，我更加知道一個小白將會遇到什麼坑，遇到哪些難點。我把我的學習過程寫在下面，並附上在每個階段的學習資料，希望對零基礎的Python學習

想學習編程但不知如何開始的朋友。回答這類問題的人往往只是列出書單資源然後給出一個大致的方向。有些朋友一開始就扎入了理論學習的汪洋大海，從苦讀類似《演算法導論》開始，能夠堅持讀下來的寥寥無幾，學習的積極性也被不斷的挫敗感消磨的所剩無幾。可以加Python技術直播裙【三零四零五零七九九】 群里大佬生動的講解可以讓你思路更清晰，互動直播，遇到問題裡面有大佬解答指導！

一直以來，編程對我而言是一種「黑魔法」般的存在。今年阿里月餅門，當很多人都參與到是非之爭的時候，我更加著迷於程序員區區幾行代碼的腳本所展現出的威力，對於外行而言，這是超乎他們想像之外的某種能力——為什麼我守在電腦面前盯著秒針然後拚命點擊滑鼠都不一定能搶到的禮物，程序員只需要提前花5分鐘寫3行代碼就輕鬆搞定？

所以，我的心底深處一直都想變成這樣的一位魔法師。今年的8月，剛好工作上想要開發一個基於微信的英語學習網站，藉此機會，我決定好好學習一下編程。在此之前，我所有關於程序的知識僅僅來源於兩部分，一是本科時期的C語言必修課，現在已經忘的一乾二淨，不過好歹我從中明白編程是怎麼回事；第二部分是大概兩年前由於工作關係學的一些Python，不過只是皮毛，現在忘的七七八八。

簡單說，我的目標是建立一個網站，不過這個網站是動態的，也就是說它能識別誰登陸，然後對不同的人顯示不同的內容。而當時的現實是，我完全不明白網頁是如何顯示出來的？譬如每個人登陸知乎的時候看到的是定製化的頁面，後台是如何基於每個ID來組織出不同的頁面的？所有我們看到的問題，回答，參與的評論在背後的伺服器上是以一種什麼樣的形式存在的？又比如為什麼有些頁面只能在微信端打開，在電腦上就會出錯？（不知道你有沒有發現這一點）

當時我的心中充滿了無數個類似的問號？當然如果你也是小白，一定有著同樣的疑問。

好處是一開始就明確了學習的目的：Web建站。所以我的學習方案基本就是通過做項目學習，哪裡不懂就解決哪裡，邊做邊學習，不斷推進。另外，由於知道很多成功的網站在用Python做伺服器開發，比如知乎，所以我就自然選擇了Python。

於是我就開始了我充滿著挫敗感和成就感的編程之路……

從8月到12月的四個月里，除去本來的工作，為了學習質量，我會保證平均每天4個小時的學習時間，周末也不例外。另外，所有的文檔，問答都盡量看英文的，這可以幫你剩下大量的時間。12月13日，我做的網站上線了，3天時間大概有5000人訪問了這個網站，我有時在後台看著日誌，不免有些心潮噴涌，我想把自己的經驗寫下來，希望對於那些有心學習編程但無從下手的朋友提供一些幫助和鼓勵。

現在回頭看，我認為這一段時間的造輪子是提升編程能力最快的時候。比如為了寫ORM，就必須去花很多時間學習SQL，去了解Python裡面的metaclass，而如果用一個現成的框架，我很有可能偷懶不去關注某些細節。而不出問題還好，一旦出問題，我就只能跪。另外，造輪子迫使我在開始的時候就構思整個框架，因為我必須儘可能的考慮到所有的情況，於是就會不斷的強迫自己完善知識體系，和別人的代碼作對比從而改進自己的，這個過程充滿了無盡的挫敗感，但是得來的成就和快樂也是無可比擬的。

關於自學python

個人最大3點經驗

1. 找一本淺顯易懂，常式比較好的教程，從頭到尾看下去。

不要看很多本，專註於一本。把裡面的常式都手打一遍，搞懂為什麼。我當時看的是《簡明python教程》，不過這本書不是非常適合零基礎初學者。

2. 去找一個實際項目練手。

我當時是因為要做一個網站，不得已要學python。這種條件下的效果比你平時學一門新語言要好很多。所以最好是要有真實的項目做。可以找幾個同學一起做個網站之類。注意，真實項目不一定非要是商業項目，你寫一個只是自己會用的博客網站也是真實項目，關鍵是要核心功能完整。

3.最好能找到一個已經會python的人。問他一點學習規劃的建議（上知乎也是個途徑），然後在遇到卡殼的地方找他指點。

這樣會事半功倍。但是，要學會搜索，學會如何更好地提問。沒人願意幫你寫作業或是回答「一搜便知」的問題。

然而，別人的經驗未必能完全複製。比如我沒有說的是，在自學python之前，我已在學校系統學習過其他的編程語言。

對於完全沒有編程經驗的初學者，在學習python的時候，面對的不僅僅是python這門語言，還需要面臨「編程」的一些普遍問題，比如：

· 從零開始，不知道從何入手，找了本編程教材發現第二章開始就看不懂了

· 缺少計算機基礎知識，被一些教程略過的「常識性」問題卡住

· 遇到問題不知道怎麼尋找解決方案

· 看懂語法之後不知道拿來做什麼，學完一陣子就又忘了

· 缺少數據結構、設計模式等編程基礎知識，只能寫出小的程序片段

所以除了前面說的3點經驗，

給編程初學者的額外建議

1、首先要有信心。雖然可能你看了幾個小時也沒在屏幕上打出一個三角形，或者壓根兒就沒能把程序運行起來。但相信我，幾乎所有程序員一開始都是這麼折騰過來的。

2、選擇合適的教程。有些書很經典，但未必適合你，可能你寫了上萬行代碼之後再看它會比較好。

3、寫代碼，然後寫更多的代碼。光看教程，編不出程序。從書上的常式開始寫，再寫小程序片段，然後寫完整的項目。

4、除了學習編程語言，也兼顧補一點計算機基礎，和英語。

5、不但要學寫代碼，還要學會看代碼，更要會調試代碼。讀懂你自己程序的報錯信息。再去找些github上的程序，讀懂別人的代碼。

6、學會查官方文檔，用好搜索引擎和開發者社區。