Front End – JavaScript

tags: `web develope`

JavaScript 是一種能在瀏覽器裡直接執行的程式語言，和 HTML 與 CSS 並列網頁前端三大核心技術，然而，HTML 與 CSS 都不是程式語言 (programming language)，HTML 是定義內容的標籤語言 (markup language)，而 CSS 是一種頁面樣式 (style)。
只有 JavaScript 是程式語言，JavaScript 賦予了網頁互動、處理和創造新內容的可能性，開發者透過 JavaScript 賦予網頁使用者可以在網頁上有操作行為。

JavaScript 的起源

JavaScrpit 誕生於1995年，由 Netscape 這家公司專門為其 Netscape 瀏覽器而發明的。一開始的角色是讓使用者與網頁有即時的互動效果，例如檢查表單、跳出 Alert 視窗，以及網頁特效。

JavaScript 誕生時，瀏覽器的世界還處於戰國時代，各家的標準不一，常常有在 IE 能執行的效果，到另一個瀏覽器完全走樣的問題，JavaScript 的維護為網頁開發者帶來巨大的痛苦。當時前端工程師的主要工作，通常是維持網頁在各瀏覽器的一致性。1995 年前後，有許多五花八門的瀏覽器，進入 2010 左右才慢慢由 Chrome、Firefox、IE、Safari 等幾大家獨佔鰲頭。

在這個混亂的時期，一個叫 ECMA 的國際標準化組織致力於統一標準，他們推出的標準稱為 ECMAScript，例如 ECMAScript 第 5 版會簡稱為 ES5。1999~2010 年之間，JavaScript 通行標準得到廣泛支持，也慢慢轉變成一個成熟的程式語言。今天坊間 JavaScript 學習教材大多採用 ES5 或 ES6，ES6 又稱為 ES2015。

JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 JavaScript 核心為基礎為她撰寫了相當多的工具，讓各位可以感到事半功倍。這些工具包括：

內建在瀏覽器內的應用程式介面（Application Programming Interfaces，APIs）提供了多樣化的功能，像是動態產生 HTML 以及設定 CSS 樣式、擷取以及處理從使用者的網路攝影機錄下的影像、製作立體圖形或是聲音樣本。
第三方 API 允許開發者將他們的網頁與其他如 Twitter 或 Facebook 提供的內容合併在一起。
第三方框架和函式庫允許您將這些元件套用在您的 HTML 文件內，讓您可以迅速地建立網頁或應用程式。

JavaScript 基礎

「Hello world」範例程式

前面所述的功能聽起來令人興奮，而她也的確符合這樣的期待— JavaScript 是眾多令人感到興奮的網路科技之一，您會因為選擇利用她來製作網頁而進入一個嶄新且充滿創意及力量的次元。

但無論如何，要讓 JavaScript 跟 HTML 和 CSS 合作無間的話，可能還要費一些功夫。現在您將會從一些細小的地方開始著手，接著一步步地往前進。首先，我們將會向您展示如何將一些基本的 JavaScript 給加入您的頁面中，並且打造一個「hello world!」的範例

首先建立一個名為 main.js 的檔案，再將她存放於 scripts 資料夾內。
接著開啟 index.html 檔案，並在 </body> 這個結束標籤之前的位置，使用一行新的空間來輸入以下的元素：


<script src="scripts/main.js"></script>

我們做的事情，基本上跟新增一個 CSS 的 <link> (en-US) 元素是相同的概念 — 我們將 JavaScript 給導入這個頁面中，讓她來影響 HTML（以及 CSS、還有任何頁面上的東西）。

再來我們把以下的程式碼新增到 main.js 檔案內：


var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

現在請您將修改過的 HTML 和 JavaScript 給存檔，再用瀏覽器讀取 index.html。您應該會看到以下的內容：

所以標題文字已經被 JavaScript 修改成「Hello world!」了。我們先使用了一個叫做 querySelector() 的函式來取得了我們標題參考（Reference），並且將她存在一個叫做 myHeading 的變數裡面。這跟我們在操作 CSS 時使用的選擇器是相似的。當您想要更動某個元素時，首先您要將她選取起來。

之後，我們將變數 myHeading 中 innerHTML 特性的值設為「Hello world!」。

JS snapshot

變數（Variables）

變數	說明	範例
String (en-US)	字串，一段文字。如果要將字串指定給一個變數，您應該將內容用引號給框起來。	let myVariable = 'Bob';
Number	數值，一個數字。數字不被引號框起來。	let myVariable = 10;
Boolean	布林值，一個 True（真）/False（假）數值。true/false 是 JavaScript 內的特殊關鍵字，不需要用引號將她框住。	let myVariable = true;
Array	陣列，一個可以儲存多個數值在單一參考中的結構。	let myVariable = [1,'Bob','Steve',10];可以用這個方式來呼叫陣列的每一個成員：myVariable[0]、myVariable[1] 等等。
Object	物件。基本上，JavaScript 內的所有東西都可以視為一個物件，而且可以被存放在變數裡。請將這個概念記下來。	let myVariable = document.querySelector('h1');這個項目之前的所有例子也都是物件。

運算子（Operators）

運算子	說明	符號	範例
相加／連接	用於將兩個數字相加，或是將兩個字串連接在一起。	+	6 + 9; 'Hello ' + 'world!';
減、乘、除	這些運算子就跟基礎數學計算中在做的事情相同。	-, , /	9 - 3; 8 * 2; 9 / 3;
指定運算子	您已經見過她了：這可以將一個數值指定給一個變數。	=	var myVariable = 'Bob';
等價運算子	測試兩個數值是否相等，並且回傳一個 true/false 的結果。	===	var myVariable = 3; myVariable === 4;
否定、不相等	通常會跟相等運算子搭配使用，否定運算子在 JavaScript 中代表邏輯非（NOT）—她可以將 true 轉換為 false ……等。	!, !==	第一個敘述句回傳的是 true，但我們使否定運算子，使得對照組的敘述句回傳了 false： var myVariable = 3; !(myVariable === 3); 在這裏，我們測試了「myVariable 是否不等於 3」的一個敘述。這個敘述回傳的是 false，因為她確實等於 3。 var myVariable = 3; myVariable !== 3;

條件（Conditionals）






let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}

函式（Functions）




function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}



multiply(4,7);
multiply(20,20);
multiply(0.5,3);

事件（Events）

如果要在網頁上創造真正的互動功能，您將會需要事件（Events） — 這是一種可以監聽瀏覽器發生了什麼事情的程式碼結構，接著她會允許您執行其他程式碼以回應這些事件。最明顯的事件就是 click event 了，當瀏覽器裡的某個東西被滑鼠點選時，這個事件就會被觸發。如果要測試一下這個事件，請您把底下的程式碼輸入到主控台內，接著用滑鼠點選目前的網頁：



document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

產生的結果將會與下面這段程式碼相同


var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

加入一個圖片變換器

在這個小節中，我們將在這個網頁裡添加一個圖片，以及一些簡單的 JavaScript，當這個圖片被滑鼠點選的時候，就會在兩個圖片之間互相切換。

首先，先去找張您可以為您的網頁增添光彩的圖片。請盡量找一張尺寸跟第一張圖相同的圖片、或至少是張相似尺寸的圖片。
將圖片存放到 images 資料夾內。
編輯您的 main.js 檔案，並且將以下的 JavaScript 輸入到檔案內（如果您還有看見那段 hello world 的 JavaScript，請把她們給刪除）：










    var myImage = document.querySelector('img');

    myImage.onclick = function() {
        let mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }

請將全部檔案儲存，並用瀏覽器開啟 index.html。現在請您點選圖片，她應該會切換成另外一張！

在這裡，我們把一個圖片元素的參考存進了 myImage 變數裡。接著，我們把這個變數的 onclick 事件處理器設定為一個匿名函式。現在，每當這個圖片被點選一次：

    我們會去取得圖片中 src 屬性的數值
    我們用一個條件判斷式，來檢查 src 的數值是否跟原始圖片的位址相同：
    如果兩者相同，
        那我們就把 src 的數值更改為第二個圖片的位址，也就是在  <image> (en-US) 元素裡強迫讀取另外一張圖片。
    如果兩者不同（也就是圖片已經被切換過了），
        我們就把 src 的數值更改為原始圖片的位址，圖片就會被切換回原來那張。

添加個客製化的歡迎訊息

接著我們再來添加一些程式碼，在使用者瀏覽這個網頁的時候，將網頁標題改為客製化的歡迎訊息。這個歡迎訊息會一直保留著，直到使用者離開這個網頁為止。我們也會添加個切換使用者的選項，並且一併更改歡迎訊息。

編輯 index.html 檔案，並將下列程式碼置於 <script> 元素之前：


    <button>Change user</button>

編輯 main.js 檔案，並將下列程式碼一字不漏地置於檔案的最末端 — 這些程式碼將會取得新按鈕、標題的參考，並把它們存在變數裡：


    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');

現在，將以下的函式加進去以設定客製化的歡迎訊息 — 這些函式目前還不會產生作用，但我們等一下會用到她們：





    function setUserName() {
      let myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.innerHTML = 'Mozilla is cool, ' + myName;
    }

這個函式包含了一個會產生一個對話視窗的 prompt() (en-US) 函式，有點像 alert()，只是 prompt() 會要求使用者輸入一些資料，並在使用者點選確認之後，將內容儲存在一個變數裡面。接著，我們呼叫一個名稱為 localStorage 的 API，這個 API 可以讓使用者先將一些資料儲存在瀏覽器裡面，之後有需要的話再取出來使用。我們使用 localStorage 的 setItem() 函式來建立並且把資料儲存到一個名稱為 'name' 的變數裡，再把包含者用者名字的 myName 的值指定給她。最後，我們將一個字串跟使用者的名字指定給標題的 innerHTML 特性：

接著，加入這個 if … else 區塊 — 因為她會在程式一開始被讀取的時候就被啟用，我們稱她為初始化程式碼：






    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      let storedName = localStorage.getItem('name');
      myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
    }

這個區塊一開始使用了邏輯負運算子（邏輯非）來檢查 name 這個物件是否存在。如果沒有，那就執行 setUserName() 這個函式並且創造她。如果有了（例如：使用者已經在上一次造訪網頁時就設定過了），我們就使用 getItem() 函式來取得儲存的名字，並且將標題的 innerHTML 特性設定為一個字串加上使用者的名字，也就是我們在 setUserName() 函式裡做的事情。

最後，把以下的 onclick 事件處理器跟按鈕綁定，如此一來，每次點選按鈕時就會執行 setUserName()。這將允許使用者透過點選那個按鈕來重新設定一個新的名字：



    myButton.onclick = function() {
      setUserName();
    }

現在當您造訪這個網頁時，她會詢問您的名字，並且給您一個客製化過的歡迎訊息。在這之後，您也可以隨時透過點選那個按鈕來更改名字。順帶一提，因為這組客製化過的訊息是存在 localStorage 裡的，所以即使您將網頁關起來，她還是會保留著，所以當您下次開啟這個網頁時，這段客製化的訊息依然會出現！

Source & Material

MDN JS basics

Front End – JavaScript

tags: web develope