Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. JavaScript
Code

JavaScript簡介

by
Difficulty:BeginnerLength:LongLanguages:

Chinese (Traditional) (中文(繁體)) translation by Stypstive (you can also view the original English article)

簡單地說JavaScript在Web開發中日益重要並不能真正表達JavaScript的重要性。 事實上,幾年前就有一位著名的程序員叫Jeff Atwood,他發明了埃特伍德定律內容是

:凡是可以用JavaScript寫的應用,最終都會用JavaScript來寫。

在本文寫作時,JavaScript框架和庫可以說已經鋪天蓋地了,讓人眼花繚亂。初學者就更別提了。

我知道,這個網站中的很多內容都面向的是有Web開發經驗的人。 然而這些人卻並非本文的目標讀者。

相反,這篇文章是寫給那些從未寫過一行JavaScript代碼又想知道它到底怎麼樣的人看的。 此外,我們還想介紹如何使用它,以及用它能幹什麼。

簡而言之,如果你是專業程序員,這篇文章就不用看了;如果你對JavaScript感到好奇卻不知從何下手,那麼本教程將為你指明正確的方向。

那我們就開始吧。

JavaScript之定義

你大概早就听說JavaScript是"一門客戶端腳本語言",但還可以有另一種說法,那就是它是一門運行在網頁瀏覽器中的程序語言。

維基百科將其定義為:

JavaScript是一種高級動態無類型的解釋型程序語言。 它已經由ECMAScript語言規範標準化了。

上述說法都沒錯 (只不過複雜度不同),只是還要補充一點,JavaScript其實是可以運行在服務器端的。 不過,這超出了本文的範圍。 現在,我們先談談前面幾點,服務器端JavaScript留到本文後面部分再討論。

  • 高級語言 說一門程序語言是高級語言,指的是我們在編程時無需知道底層計算機的更多細節。 你不需要管理內存,不需要知道處理器類型,也不需要處理指針之類的問題 (比如C語言和彙編語言中就有)。
  • 動態語言 動態語言支持在程序運行時通過新的代碼或引入新對象來擴展語言功能 (比如Post對象),而靜態語言則需要編譯一下才能做到。 這是JavaScript一個強大的功能。
  • 無類型語言 如果你有編程經驗,你肯定遇到過某些語言要求你在聲明變量時必須指定變量類型。 比如,你有一個存儲string或一個boolean值的變量。 在JavaScript中,這是不需要的。 你在聲明一個變量時,只需要用var關鍵字就夠了。
  • 解釋型語言 對於編譯型語言,你寫的代碼要轉化為可執行二進制,然後才能發布給別人。 在Windows操作系統中,這些可執行二進製文件是EXE文件。 在OS X中,則為App Store中下載的程序,或你拖到Applications目錄中的那些程序。 而JavaScript是解釋型的,意思是它不需要編譯器。 因為,代碼是解釋執行的 (和PHP一樣),在代碼和計算機指令之間有一種中間層軟件,稱為解釋器,負責它們之間的翻譯工作。
  • 標準化語言 JavaScript是標準化的 (它的官方名稱是ECMAScript),意思是只要實現了它的標準,瀏覽器們就能提供相同的功能。 如果它不標準化,那麼Chrome就可能會提供Edge不支持的功能,反之亦然。

說了該語言的一些特點之後,我們就可以開始討論它的某些具體內容了。

前面講的固然重要,但知道一門語言是如何工作的也同樣關鍵 (特別是當你已經用過其它語言時尤其如此),這樣你就不會無端猜測它可能或應該的運行方式。

因而,我會介紹它實際上是如何工作的,然後你就可以開始寫代碼並完全理解你所寫的代碼了。

關於JavaScript語言

除了前面說的那些,JavaScript還是一種面向對象的程序語言,但可能和你通常見到的有所差別 (如果你已經用過其它的面向對象程序語言的話)。

因為JavaScript實際上是一種原型語言。 意思是,JavaScript中的所有對象,比如String,都是基於原型的。

作為開發者,我們就可以通過使用原型繼承來為一個對象添加新的功能。

基於原型的編程是面向對象編程的一種,它的重用行為 (也稱為繼承) 是通過克隆已有對象的過程來實現的,這些被克隆的對象即為其原型。

如果你從來沒有用過面向對象程序語言,那我覺得你反而會有優勢,因為你在理解其原理時無需從一個概念模型切換到另外一個。

當然,如果你確實已經用過這些不同類型的語言,原型繼承和傳統繼承之間的區別也是值得去了解的。

  • 傳統繼承中,我們開發者常常會寫一個類。 從這一個類可以創建多個對象。 此外,我們還可以從這個類繼承出另外一個類,然後在為這些類創建一些實例。 在這裡,子類與它們的基類共享代碼。 所以,當你創建一個子類的實例時,你同時得到了子類和父類的功能。
  • 原型繼承中,並不存在這樣的類。 相反,你只需定義一個對象,然後在需要的時候添加任意的功能。 如果你想為一個已有的對象添加新功能,你可以將其加到這個對象的原型中去。 如果你想調用一個對象 (比如Number) 的一個方法,它首先會查看此對像是否包含這個方法。 如果沒找到,它會沿著原型鏈向上,直到找到此方法 (也許基對象Object中有這個方法)。

最後,我要提一下也許是最重要的一件事。當你通過原型修改一個對象時,所有使用此對象的用戶都可訪問到這個修改後內容 (至少在當前上下文中是如此)。

這個功能很強大也很酷,但你若還不習慣這種環境,思維方式大概還需稍微轉變一下。

如何使用JavaScript?

若問如何實際用上JavaScript,那首先要清楚你的目標是什麼。 目前而言,用上JavaScript指的是你要在網頁上"發生點什麼"。 這意味著要控制某些行為。

比如添加一個元素,刪除 (或隱藏) 一個元素,諸如此類。 然後,網絡觸發了一下,而瀏覽器向服務器異步發出請求,處理服務器響應,然後在網頁上作出相應的狀態變化。

所有這個過程都是通過Ajax實現的。 你在閱讀本文時,大概對這個詞並不陌生。 不然,你可以將其視為一種運行方式,通過這種方式,JavaScript可以在無需重載網頁的情況下向服務器發送請求並處理響應。

但JavaScript已經遠比這樣的功能更為成熟了。

Google開發了一種高度複雜的稱為V8的JavaScript解析引擎,而其它瀏覽器也在盡量提供最優的JavaScript性能。

The landing page for Chrome V8 Googles JavaScript Engine

事實上,我們可以用諸如Node.js的工具來在服務端編寫JavaScript代碼。 此外,我們甚至可以在移動設備上構建和運行混合應用。 即我們可以用JavaScript同時為我們的手機,平板,以及桌面計算機提供解決方案。

The homepage for Nodejs a runtime engine for writing JavaScript on the server

而這一切都出自於一門曾經還只是用於屏幕動畫的語言。 說這麼多只是告訴你,如果你剛接觸JavaScript,不要太小看它。

“我對這門語言中能得到什麼呢?”

前面提到的這些聽起來有意思,了解可以做什麼也挺有趣,但從純粹實踐的角度,我們在JavaScript這門語言提供了一些什麼東西呢?

不斷你對這門語言一無所知,還是想從其它背景轉過來學習一門新的語言,你大概已經被吊足了胃口,想要看看它到底能提供什麼語言特性。

雖然我們已經提到這門語言的內部運行方式,但卻沒說它裡面到底有些什麼東西,更別提它的API了。 不過老實說,整個API和這門語言的內置函數本身就可以寫一篇文章了。

但如果僅僅是它的內置對象呢? 我們倒是可以在結束文章之前回顧一下:

  • Object 基對象,其它所有對像都可以繼承它的一些基本功能。
  • Function 因為JavaScript確實是面向對象的,這意味著所有一切都是對象,包括函數。 所以,當你創建一個新函數時,你得到的是一個具有Function類型的對象的引用。 函數有一些可以讓你在運行時使用的屬性 (比如為其傳入參數)。
  • Boolean 這種類型的對像用於對一個布爾值進行封裝。 在很多語言中,布爾值都是一種數據類型,可以取值為truefalse。 在JavaScript中,你仍然可以用布爾值,只不過應該把它們理解為對象。
  • Number 在很多程序語言中,都有一些基本類型,比如floatintdouble等。 而在JavaScript中,只有一種數字類型,自然,它也是對象。
  • Date 程中日期的處理從來不是一件好玩的事,特別是涉及到時區時尤其如此。 我不敢說JavaScript能解決所有時區相關的問題,但它確實可以讓你更容易地處理日期 (從年月日到時分秒的所有處理工作)
  • String 幾乎所有程序語言都有字符串這種基本類型。 JavaScript自然也不例外,它的字符串對像有一些獨有的屬性。

你需要記得的是,上述所有類型都是各自具有不同屬性 (和函數) 的對象。 但並不是說你一定要用到構造器才能實例化你的變量。 比如,你可以用如下方式來生成字符串、布爾值、和數字:

然而,它們本質上還是對象。

更準確地講,它們是基本對象。 除此之外,還有更高級的對象值得介紹,特別是錯誤處理,利用數組 (Array) 實現的對象集合,諸如此類。

如果你對這些仍然很感興趣,我強烈推薦你看一看Mozilla Developer Network中的這個頁面

有哪些庫和框架呢?

如果你緊盯JavaScript社區中的各種框架、庫、以及其他工具,你肯定對這個社區的生機勃勃留下深刻的印象。

當然,本文主要面向JavaScript初學者。 現在,既然你已經對這門語言的結構和運行方式有所了解,是時候看看有哪些庫和框架可以幫助你進行網頁或應用開發了。

  • jQuery是一個提供了跨瀏覽器API的JavaScript庫,它可以讓你"寫得更少,做得更多"。
  • Angular是一個JavaScript框架,它用於幫助構建單頁面應用。
  • React是一個用過構建用戶界面的JavaScript庫。
  • Backbone通過模型,集合和視圖這樣的結構來構建網頁應用。
  • Ember.js是另一個用於"生成複雜網頁應用"的框架。還有很多很多。
  • 還有很多很多。

這遠非一個完整的清單,而僅僅是一個開頭,可為正在熟悉JavaScript者提供更多選擇,儘管你可能用不上。

當你開始學習JavaScript,並用上其中一些工具,你會發現它們是多麼流行,甚至你最喜愛的應用就用到了它們。

學習JavaScript

你大概已經意識到了,Envato的唯一目標就是"向全世界億万讀者教授技藝"。 所以,我們這篇文章如果不包括一些其他更流行的JavaScript文章或教程,那就太不像樣了。

t所有這些資源都是JavaScript入門的理想材料,把它們加到你的網頁開發工具箱中去吧。

總結

一提到網頁開發,講得很可能就是JavaScript。 雖然你可能不打算用所謂的"平凡的JavaScript",而傾向於其他一些軟件庫或框架,但JavaScript無疑是幾乎每一個網頁開發者應該了解的語言。

當然,不是每個人都做前端開發。 有些純粹是服務器端開發者;有些則只做前端開發。 不過,我們都需要合作起來,以確保應用程序的不同部分能夠相互通訊。

為實現這一點,我們至少應該理解數據是如何通過JavaScript從客戶端發送到服務器端的,以及服務器端處理後是如何返還給客戶端的。

不要因為你不是一個前端開發者,就輕易對JavaScript下結論。 有可能出現的情況是,你需要將別人基於JavaScript的工作組合起來。

誠然,本文只是一個開頭。 我一開始已經說過,本文的目的是解釋什麼是JavaScript,如何用它,以及對它能有什麼期望,主要針對那些初學者。

如果你喜歡這篇文章,你還可以在我的主頁上找到其他一些課程和教程。如果你感興趣,還可以在我的博客上看到一些關於WordPress和WordPress開發的文章。

其他資源

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.