Web開發初探之JavaScript 快速入門

本文改編和學習自 A JavaScript Primer For Meteor 和 MDN Web教程

前文 Web開發初探

概述

本文以介紹 JavaScript 爲主，初學者掌握本文的內容後，將可以對 JavaScript 有大致瞭解。

JavaScript（縮寫：JS）是一門完備的 動態編程語言。當應用於 HTML 文檔時，可爲網站提供動態交互特性。由布蘭登·艾克（ Brendan Eich，Mozilla 項目、Mozilla 基金會和 Mozilla 公司的聯合創始人）發明。

JavaScript 的應用場合極其普遍，簡單到幻燈片、照片庫、浮動佈局和響應按鈕點擊，複雜到遊戲、2D/3D 動畫、大型數據庫驅動程序等等。

JavaScript 至關簡潔，卻很是靈活。開發者們基於 JavaScript 核心編寫了大量實用工具，可使 開發工做事半功倍。其中包括：

• 瀏覽器應用程序接口（API）—— 瀏覽器內置的 API 提供了豐富的功能，好比：動態建立 HTML 和設置 CSS 樣式、從用戶的攝像頭採集處理視頻流、生成3D 圖像與音頻樣本等等。
• 第三方 API —— 讓開發者能夠在本身的站點中整合其它內容提供者（Twitter、Facebook 等）提供的功能。
• 第三方框架和庫 —— 用來快速構建網站和應用。

JavaScript是一門充滿爭議的編程語言：它以 Java 命名，但實際上和 Java 毫無關係。JavaScript 的創造 只用了 10 天時間，但在20年時間裏卻發展成世界上最流行的 Web 開發語言。若是爲 JavaScript 今日的地位和流行程度找一個緣由，那毫無疑問是容易上手的語言特性。固然，精通 JavaScript 是一項艱鉅的任務，但學會足夠開發 Web 應用和遊戲的知識卻很簡單，若是你已經有了必定編程基礎，熟悉 JavaScript 語言特性不會花費你多長時間。

邊讀邊嘗試

若是你能看到這篇文章，那麼你已經具有了全功能的 JavaScript 開發環境 —— 我說的就是你正在使用的瀏覽器！

在本頁面中讀到的全部例子，你均可以把它們輸入到瀏覽器的控制檯裏並查看運行結果，若是你不清楚怎麼作，能夠閱讀文檔 如何在不一樣瀏覽器中打開控制檯的指南。

準備好了嗎？讓咱們開始學習 JavaScript 吧！

變量（Variable）

變量 是存儲值的容器。在 JavaScript 中，咱們像這樣聲明一個變量，先輸入關鍵字 let 或 var，而後輸入合適的名稱：

var a;
let myVariable;

保留字 var 以後緊跟着的，就是一個變量名，接下來咱們能夠爲變量賦值：

var a = 12;

在閱讀其餘人的 JavaScript 代碼時，你也會看到下面這樣的變量聲明：

a = 12;

注：行末的分號表示當前語句結束，不過只有在單行內須要分割多條語句時，這個分號纔是必須的。然而，一些人認爲每條語句末尾加分號是一種好的風格。

注：幾乎任何內容均可以做爲變量名，但仍是有一些限制：如類型名沒法做爲變量名（詳情請參閱 變量命名規則）。若是你不肯定，還能夠 驗證變量名 是否有效。

注：JavaScript 對大小寫敏感，myVariable 和 myvariable 是不一樣的。若是代碼出現問題了，先檢查一下大小寫！

注：想要了解更多關於 var 和 let 的不一樣點，能夠參閱 var 與 let 的區別。

注：注意變量能夠有不一樣的 數據類型 ：

那麼變量有什麼用呢？咱們說，編程時它們無所不在。若是值沒法改變，那麼就沒法作任何動態的工做，好比發送個性化的問候，或是改變在圖片庫當前展現的圖片。

註釋

相似於 CSS、C++，JavaScript 中能夠添加註釋。

/*
這裏的全部內容
都是註釋。
*/

若是註釋只有一行，能夠更簡單地將註釋放在兩個斜槓以後，就像這樣：

// 這是一條註釋。

函數

函數 用來封裝可複用的功能。若是沒有函數，一段特定的操做過程用幾回就要重複寫幾回，而使用函數則只需寫下函數名和一些簡短的信息。

好比：在 JavaScript 裏咱們像這樣聲明函數：

var myAwesomeFunction = function (myArgument) {
    // do something
}

像這樣調用函數：

myAwesomeFunction(something);

咱們看到函數聲明也和變量聲明同樣聽從 var something = somethingElse 的模式。由於在 JavaScript 裏，函數和變量本質上是同樣的，咱們能夠像下面這樣把一個函數當作參數傳入另外一個函數中：

square = function (a) {
    return a * a;
}
applyOperation = function (f, a) {
    return f(a);
}
applyOperation (square, 10); // 100

返回值

函數的返回值是由 return 打頭的語句定義的，咱們這裏要了解的是函數體內 return 語句以後的內容是不會被執行的。

myFunction = function (a) {
    return a * 3;
    explodeComputer(); // will never get executed (hopefully!)
}

注：return 語句告訴瀏覽器當前函數返回 result 變量。這是一點頗有必要，由於函數內定義的變量只能在函數內使用。這叫作變量的 做用域。

if

JavaScript 中條件判斷語句 if 是這樣用的：

if (foo) {
    return bar;
}

if / Else

if 後的值若是爲 false，會執行 else 中的語句：

if (foo) {
    function1();
}
else {
    function2();
}

if / else 條件判斷還能夠像這樣寫成一行：

foo ? function1() : function2();
//三目運算符：條件：條件True時返回值：條件False時返回值

當 foo 的值爲 true 時，表達式會返回 function1() 的執行結果，反之會返回 function2() 的執行結果。當咱們須要根據條件來爲變量賦值時，這種寫法就很是方便：

var n = foo ? 1 : 2;

上面的語句能夠表述爲：當 foo 是 true 時，將 n 的值賦爲 1，不然賦爲 2。

固然咱們還可使用 else if 來處理更多的判斷類型：

if (foo) {
    function1();
}
else if (bar) {
    function2();
}
else {
    function3();
}

JavaScript 數組（Array）

JavaScript 裏像這樣聲明數組：

a = [123, 456, 789];

像這樣訪問數組中的成員：（從0開始索引）

a[1]; // 456

JavaScript 對象（Object）

咱們像這樣聲明一個對象（object）：

myProfile = {
    name: "Jare Guo",
    email: "blabla@gmail.com",
    'zip code': 12345,
    isInvited: true
}

在對象聲明的語法（myProfile = {...}）之中，有一組用逗號相隔的鍵值對。每一對都包括一個 key（字符串類型，有時候會用雙引號包裹）和一個 value（能夠是任何類型：包括 string，number，boolean，變量名，數組，對象甚至是函數）。咱們管這樣的一對鍵值叫作對象的屬性（property），key 是屬性名，value 是屬性值。

你能夠在 value 中嵌套其餘對象，或者由一組對象組成的數組：

myProfile = {
    name: "Jare Guo",
    email: "blabla@gmail.com",
    city: "Xiamen",
    points: 1234,
    isInvited: true,
    friends: [
        {
            name: "Johnny",
            email: "blablabla@gmail.com"
        },
        {
            name: "Nantas",
            email: "piapiapia@gmail.com"
        }
    ]
}

訪問對象的某個屬性很是簡單，咱們只要使用 dot 語法就能夠了，還能夠和數組成員的訪問結合起來：

myProfile.name; // Jare Guo
myProfile.friends[1].name; // Nantas

JavaScript 中的對象無處不在，在函數的參數傳遞中也會大量使用，好比在 Cocos Creator 中，咱們就能夠像這樣定義 FireClass 對象：

var MyComponent = cc.Class({
    extends: cc.Component
});

{extends: cc.Component} 這就是一個用作函數參數的對象。在 JavaScript 中大多數狀況咱們使用對象時都不必定要爲他命名，極可能會像這樣直接使用。

匿名函數

咱們以前試過了用變量聲明的語法來定義函數：

myFunction = function (myArgument) {
    // do something
}

再複習一下將函數做爲參數傳入其餘函數調用中的用法：

square = function (a) {
    return a * a;
}
applyOperation = function (f, a) {
    return f(a);
}
applyOperation(square, 10); // 100

咱們還見識了 JavaScript 的語法是多麼喜歡偷懶，因此咱們就能夠用這樣的方式代替上面的多個函數聲明：

applyOperation = function (f, a) {
    return f(a);
}
applyOperation(
    function(a){
      return a*a;
    },
    10
) // 100

咱們此次並無聲明 square 函數，並將 square 做爲參數傳遞，而是在參數的位置直接寫了一個新的函數體，這樣的作法被稱爲匿名函數，在 JavaScript 中是最爲普遍使用的模式。

鏈式語法

下面咱們介紹一種在數組和字符串操做中經常使用的語法：

var myArray = [123, 456];
myArray.push(789) // 123, 456, 789
var myString = "abcdef";
myString.replace("a", "z"); // "zbcdef"

上面代碼中的點符號表示「調用 myString 字符串對象的 replace 函數，而且傳遞 a 和 z 做爲參數，而後得到返回值。

使用點符號的表達式，最大的優勢是你能夠把多項任務連接在一個表達式裏，固然前提是每一個調用的函數必須有合適的返回值。咱們不會過多介紹如何定義可連接的函數，可是使用它們是很是簡單的，只要使用如下的模式：something.function1().function2().function3()

鏈條中的每一個環節都會接到一個初始值，調用一個函數，而後把函數執行結果傳遞到下一環節：

var n = 5;
n.double().square(); // 100

this

this 多是 JavaScript 中最難以理解和掌握的概念了。

簡單地說，this 關鍵字能讓你訪問正在處理的對象：就像變色龍同樣，this 也會隨着執行環境的變化而變化。

解釋 this 的原理是很複雜的，不妨讓咱們使用兩種工具來幫助咱們在實踐中理解 this 的值：

首先是最普通又最經常使用的 console.log()，它可以將對象的信息輸出到瀏覽器的控制檯裏。在每一個函數體開始的地方加入一個 console.log()，確保咱們瞭解當時運行環境下正在處理的對象是什麼。

myFunction = function (a, b) {
    console.log(this);
    // do something
}

另一個方法是將 this 賦值給另一個變量：

myFunction = function (a, b) {
    var myObject = this;
    // do something
}

乍一看好像這樣子並無什麼做用，實際上它容許你安全的使用 myObject 這個變量來指代最初執行函數的對象，而不用擔憂在後面的代碼中 this 會變成其餘東西。

關於 JavaScript 裏 this 的詳細原理說明，請參考這篇文章 this 的值究竟是什麼？一次說清楚。

運算符

運算符 是一類數學符號，能夠根據兩個值（或變量）產生結果。如下表格中介紹了一些最簡單的運算符，能夠在瀏覽器控制檯裏嘗試一下後面的示例。

譯註：這裏說「根據兩個值（或變量）產生結果」是不嚴謹的，計算兩個變量的運算符稱爲「二元運算符」，還有一元運算符和三元運算符，下表中的「取非」就是一元運算符。

運算符	解釋	符號	示例
加	將兩個數字相加，或拼接兩個字符串。	+	6 + 9;"Hello " + "world!";
減、乘、除	這些運算符操做與基礎算術一致。只是乘法寫做星號，除法寫做斜槓。	-, *, /	9 - 3;8 * 2; //乘法在JS中是一個星號9 / 3;
賦值運算符	爲變量賦值（你以前已經見過這個符號了）	=	let myVariable = '李雷';
等於	測試兩個值是否相等，並返回一個 true/false （布爾）值。	===	let myVariable = 3;myVariable === 4; // false
不等於	和等於運算符相反，測試兩個值是否不相等，並返回一個 true/false （布爾）值。	!==	let myVariable = 3;myVariable !== 3; // false
取非	返回邏輯相反的值，好比當前值爲真，則返回 false。	!	原式爲真，但經取非後值爲 false： let myVariable = 3;!(myVariable === 3); // false

運算符種類遠不止這些，不過目前上表已經夠用了。完整列表請參閱 表達式和運算符。

注：不一樣類型數據之間的計算可能出現奇怪的結果，所以必須正確引用變量，才能得出預期結果。好比在控制檯輸入 "35" + "25"，爲何不能獲得 60？由於引號將數字轉換成了字符串，因此結果是鏈接兩個字符串而不是把兩個數字相加。輸入 35 + 25 才能獲得正確結果。

= 是賦值運算符，a = 12 表示把 「12」 賦值給變量 a。

若是你須要比較兩個值，可使用 ==，例如 a == 12。

JavaScript 中還有個獨特的 === 運算符，它可以比較兩邊的值和類型是否全都相同。（類型是指 string, number 這些）：

a = "12";
a == 12; // true
a === 12; // false

大多數狀況下，咱們都推薦使用 === 運算符來比較兩個值，由於但願比較兩個不一樣類型但有着相同值的狀況是比較少見的。

下面是 JavaScript 判斷兩個值是否不相等的比較運算符：

a = 12;
a !== 11; // true

! 運算符還能夠單獨使用，用來對一個 boolean 值取反：

a = true;
!a; // false

! 運算符總會獲得一個 boolean 類型的值，因此能夠用來將非 boolean 類型的值轉爲 boolean 類型：

a = 12;
!a; // false
!!a; // true

或者：

a = 0;
!a; // true
!!a; // false

代碼風格

最後，下面這些代碼風格上的規則能幫助咱們寫出更清晰明確的代碼：

• 使用駝峯命名法：定義 myRandomVariable 這樣的變量名，而不是 my_random_variable
• 在每一行結束時寫一個 ;，儘管在 JavaScript 裏行尾的 ; 是能夠忽略的
• 在每一個關鍵字先後都加上空格，如 a = b + 1，而不是 a = b + 1

組合咱們學到的知識

以上基礎的 JavaScript 語法知識已經介紹完了，下面咱們來看看可否理解實際的腳本代碼：

var Comp = cc.Class({
    extends: cc.Component,

    properties: {
        target: {
            default: null,
            type: cc.Entity
        }
    },

    onStart: function () {
        this.target = cc.Entity.find('/Main Player/Bip/Head');
    },

    update: function () {
        this.transform.worldPosition = this.target.transform.worldPosition;
    }
});

這段代碼向引擎定義了一個新組件，這個組件具備一個 target 參數，在運行時會初始化爲指定的對象，而且在運行的過程當中每一幀都將本身設置成和 target 相同的座標。

讓咱們分別看下每一句的做用（我會高亮有用的語法模式）：

var Comp = cc.Class({：這裏咱們使用 cc 這個對象，經過 點語法 來調用對象的 Class() 方法（該方法是 cc 對象的一個屬性），調用時傳遞的參數是一個匿名的 JavaScript 對象（{}）。

target: { default: null, type: cc.Entity }：這個鍵值對聲明瞭一個名爲 target 的屬性，值是另外一個 JavaScript 匿名對象。這個對象定義了 target 的默認值和值類型。

extends: cc.Component：這個鍵值對聲明這個 Class 的父類是 cc.Component。cc.Component 是 Cocos Creator 的內置類型。

onStart: function () {：這一對鍵值定義了一個成員方法，叫作 onStart，它的值是一個匿名函數。

this.target = cc.Entity.find('：在這一句的上下文中，this 表示正在被建立的 Component 組件，這裏經過 this.target 來訪問 target 屬性。

繼續學習

這篇簡短的教程從任何角度上說都沒法代替系統的 JavaScript 學習，但這裏介紹的幾種語法模式已經可以幫助你理解絕大部分 Javascript 文檔和教程中的代碼了，至少從語法上徹底能夠理解。

若是你像我同樣喜歡經過實踐學習，那麼如今就能夠開始跟隨教程和文檔學習在 MDN上進階學習了

JavaScript Resources

如下是 JavaScript 的一些入門教程:

• JavaScript 標準參考教程
• JavaScript 祕密花園