SEO 網站優化 SEO 基礎知識

寫給程式麻瓜的JavaScript基礎介紹，跟工程師溝通零障礙

Ken Chung

2018-12-11

(更新日期: 2023-09-05)

JavaScript十分常見於網頁設計，是一種用來呈現網頁動態效果的程式語言，像是我們在電商網站進行購物時，把商品加入購物車時，購物車就會出現「商品已進入購物車」的訊息提醒效果。有許多人會將JavaScript與Java搞混，認為他們是類似的語言，但是他們就跟狗和熱狗一樣，是完全不一樣的東西。
JavaScript是由前網景(Netscape)工程師Brendan Eich所發明，而聽說當初僅僅花了10天就完成。JavaScript設計出來目的就是要比Java還要更容易讓人理解，讓更多網頁設計師能夠上手，這就讓JavaScript設計是一種直譯式(Interpreted language)、物件導向(Object-based)的程式語言，這是什麼意思呢？簡單來說，就是JavaScript內建一些功能範本，只要透過下指令方式，就能夠把功能範本叫出來協助運作。

但由於JavaScript在很短的時間被開發，所以在剛推出的時候，有許多功能還沒有完善，所以並沒有被認為可以成為主流程式語言。但是隨者版本的演進，功能越來越完善，還有許多像是JQuery、React.js等架構的開發，讓JavaScript已經變成21世紀網頁設計師，在開發網站的時候必備的能力。由於JavaScript容易理解的特性，史丹佛大學已經將JavaScript取代Java，成為程式設計的入門教材。現在，就讓awoo介紹JavaScript的特性、應用與學習資源。

非技術、行銷人為什麼要懂JavaScript？

現在許多網站分析都採用JavaScript的方法，作為行銷人員，了解JavaScript就可以知道要如何追蹤使用者在網站上行為。假設老闆今天想要知道哪一個網頁是最吸引人，如果不懂JavaScript，就無法告訴工程師想要追蹤使用者哪一種行為。所以你越了解JavaScript，你就會知道哪些行為是可以被追蹤，這樣你就可以更具體地告訴工程師你想要分析的行為，例如：你可以告訴工程師，請他們在GTM設定全站滑鼠停留事件(onmouseover)追蹤，紀錄使用者停留在特定網頁時間長度。如果老闆想知道哪一個商品是最熱門的，你就可以請工程師設定商品的滑鼠點擊事件(onclick)，紀錄商品被點擊的次數，這樣不僅可以大大減少與工程師的溝通成本，又可以順利地完成老闆交代的任務。

JavaScript的使用方式

開始介紹JavaScript之前，務必先了解網頁html的基本概念，在寫給行銷人的 HTML 入門基礎教學，學習 SEO 時的必備概念！，充分介紹了網頁設計最重要的基本元素html，html就像是我們人的身體四肢，而JavaScript就像是我們的行為舉止，兩者是密不可分，他們運作的方式比如像是awoo部落格上面搜尋框，當你點擊搜尋圖案，JavaScript就會控制搜尋框框出現，如果在點擊搜尋框以外區域則是會消失。

html與JavaScript的互動關係
而今天只要使用一般文字編輯器，例如記事本，就可以編輯撰寫JavaScript，只要將寫好的檔案，副檔名命名成.js即可，或者是直接寫在html檔案裡面。或者可以下載前端開發神器sublime text，可以協助你更便利寫出JavaScript。一般來說，在html檔案內的JavaScript撰寫方式：

寫在<head></head>：

<!DOCTYPE html>
   <html lang="en">
    <head>
     <meta charset="UTF-8">
      <title>Document</title>
   <script>
       alert("Hello World")
   </script>
</head>

這樣使用chrome瀏覽器打開，會出現提示訊息框，訊息文字為「Hello World」

也可以透過外部引入的方式，讓js檔案執行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/main.js"></script>
</head>

透過外部引入的方式，讓js檔案執行

JavaScript基本功能介紹

運算子、變數、函數

程式語言的好處就是在運算過程速度非常快，但是要讓程式語言理解計算公式，則要透過運算子。運算子是一種運算符號，基本有賦值運算子、算數運算子、比較運算子、邏輯運算子，像是賦值運算子就是以「=」符號來表示，可指定特定值到指定的變數裡面，以下為各運算子範例：
1.賦值運算子( 等於= ) ：

var name="Tom";

2.算數運算子 (加+ 減 – 乘 * 除 / )

var sum=1+3;

3.比較運算子(大於> 小於<)

var age=23;
    var result=age>20;
    // result：true
    console.log(result);

4.邏輯運算子(and &, OR |)：

var a=true;
var b=true;
    var logic=a && b;
    // logic:true
    console.log(logic);

變數就是將指定值指定在特定空間，就好像在圖書館內，將特定的書本放在指定書架上，同時可以任意命名變數的名稱，像是前文賦值運算子中的「name」就是一種變數命名，變數在JavaScript中是有分為「全域變數」與「區域變數」，全域變數基本上在定義完，就可以在檔案中任何一處使用，區域變數則是指在特定功能內定義後，範圍就限定在該功能內，一旦出了這功能模組外，區域變數就不能使用。
既然JavaScript可運算、也可以自定義變數，那將這些功能統整在一起使用的話，就可以發揮更好的效果，這樣整合功能就叫做函數。函數(function)可以將一程式區塊的功能，透過參數的傳遞，產出預期的結果，這在JavaScript的程式設計中扮演非常重要的角色。
函式宣告通常包含三個部分：

函式名稱，例如下圖「sum」
參數(argument)，位置在函式的()內，下圖「a」、「b」則是參數
可重複執行的區塊內，位置在函式的{}內

function sum(a,b) {
    result=a*b;
    return result;
}
sum(5,4)

函式會透過return的功能將值回傳，因此下sum(5,4)指令時，就會得到數字20。

流程控制

JavaScript在執行網頁上的動畫特效時，透過流程控制可以決定動畫物件出現的先後順序，讓這些動畫物件都可以按照寫好的腳本出現。流程控制指令是透過條件式以及迴圈來執行的。
if else可以讓JavaScript在滿足某個條件下時，執行特定功能，表示方式如下：

var age=18;
if (age<18){
    console.log("未滿18歲"）
}
else{
    console.log("超過18歲")
}

由於age定義數值為18，在if else內，沒有達到age<18的條件，因此會執行else區塊的指令，因此程式執行結果為「超過18歲」。
除了if else指令外，還可以使用switch，當條件數量很多時，可以加以利用：

var drink="milk"
switch(drink){
	case "milk":
	 	console.log("I want " + drink);
	 	break;
	 case "coffee":
	 	console.log("I want " + drink);
	 	break;
	 default:
	 	console.log("I want "+"black tea");
}

以上的指令，drink的值為「milk」，因此會顯示出「I want milk」的結果。
另一個可用來進行流程控制的功能叫做迴圈，迴圈的指令有分為兩種，一種 for 迴圈，另一種為while迴圈，可以重複執行大量的任務。
當你知道程式需要執行此數時，可用for迴圈，以下用迴圈跑出1~5的加總15：

var result=0
for ( var i=1; i<=5; i++) {
	var result=result+i;
}
console.log(result);

如果不確定迴圈跑的次數，則可以用while迴圈：

var i=0
while(i<=5){
	var result=result+i;
	i++;
}
console.log(result);

事件處理

JavaScript是一個事件驅動的程式語言，他會根據使用者觸發條件來反應出相對應的事件，像是使用者點擊電商網頁上「立即購買」的按鈕，隔幾秒鐘後就產生已加入購物車的動畫效果，又或者像是滑鼠滑過產品圖上，產品放大的動畫效果，這可以讓網站有更多的互動。
事件處理分別事件類別+事件處理方法：

事件類別：說明事件發生的類別，像是使用者點擊click(點擊)、滑鼠滑過(mouseover)、滑鼠滑出(mouseout)等等
處理方法：當事件發生後，後續要使用的函式，也就是要觸發什麼樣的條件。

以下為事件處理範例寫法，當點擊按鈕跳出「恭喜你中獎」的訊息：

document.getElementById("btn").addEventListener('click', function() {
	  alert('恭喜你中獎!');
});

JavaScript的應用

Google Analytic追蹤碼

每一個人行銷人都知道Google有提供GA的追蹤碼來追蹤網站的流量變化，GA追蹤碼就是一種JavaScript的應用，在過去Google有推出analytics.js和ga.js版本的追蹤，目前推出了第三代追蹤碼，gtag.js追蹤碼：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

從Google提供的原始碼可以看出，gtag.js一開始是外引一隻外部的js檔案，接著對於「arguments」參數當作傳遞數值的中繼站，當程式執行到gtag(config,”GA_TRACKING_ID”)，程式就會傳送一次瀏覽量到Google遠端伺服器內，並且傳回資料到GA的後台上，往後，當每個使用者進入到網頁，gtag.js就會不斷地紀錄網站的流量狀況。