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

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撰寫方式:

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

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

  1. 也可以透過外部引入的方式,讓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的程式設計中扮演非常重要的角色。
函式宣告通常包含三個部分:

  1. 函式名稱,例如下圖「sum」
  2. 參數(argument),位置在函式的()內,下圖「a」、「b」則是參數
  3. 可重複執行的區塊內,位置在函式的{}內
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是一個事件驅動的程式語言,他會根據使用者觸發條件來反應出相對應的事件,像是使用者點擊電商網頁上「立即購買」的按鈕,隔幾秒鐘後就產生已加入購物車的動畫效果,又或者像是滑鼠滑過產品圖上,產品放大的動畫效果,這可以讓網站有更多的互動。
事件處理分別事件類別+事件處理方法:

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

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

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就會不斷地紀錄網站的流量狀況。

更進階的JavaScript應用

如果你想要更深入理解JavaScript的話,可以應用JQuery的函式庫,裡面包含許多為JavaScript設計的擴充功能,更容易設計出與使用者互動功能,又或者是在與工程師溝通新的GA需求時,可以簡單描述JavaScript的概念,能夠讓工程師更容易理解需求內容。

JavaScript的學習

JavaScript的學習資源

現在有非常多的的線上課程可以學習JavaScript,awoo這邊提供4個學習資源供大家參考:

  1. Codecademy:免費的線上學習資源,裡面包含許多JavaScript基礎概念。
  2. Plurasight:付費課程,從基礎到進階課程都有著詳細的教學。
  3. Codepen:有非常多透過JavaScript完成的作品,可以在裡找到許多精彩的作品,並且練習完成自己的小程式。
  4. Stackoverlfow:工程師的發問平台,如果有遇到任何JavaScript的問題,在這裡有機會可以獲得解答。

善用以上的資源,未來無論你是行銷、文案或者是專案經理,更進一步深入了解JavaScript,知道程式語言運作邏輯,與工程師溝通更加順暢,也增強自己在數位行銷中的競爭力。

如有任何網站優化的問題,或想瞭解關於 SEO 解決方案,歡迎立即諮詢,將有 awoo 專業顧問為您服務。

 

延伸閱讀:RWD 是什麼?與 AWD 有什麼不同,響應式網站設計對 SEO 好處介紹

延伸閱讀:SEO 與站內搜尋,如何創零售電商站內搜尋最大價值