iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

3

image

★首先這篇文章適合以下背景的人閱讀

  1. 熟悉 HTML、CSS
  2. 正要開始一腳踏進 JavaScript 的初學者

號稱全世界最懶的一群人(軟體工程師),能坐就不要站,能躺就不要坐,阿不是啦,我是說,不斷重複的事情,軟體工程師我們通常不會想要一直重複做,所以一模一樣的功能,軟體工程師們,寫過一次了,就不會想要在寫一次了,這時候我們就可以用 function 功能了。

function

  • 寫法:
function welcome(){
    var hello = 'Welcome here, may I help you ?';
    console.log(hello);
}

welcome();
  • 說明:首先先用 function 起頭,空格以後接一個命名後加 ()
    ,上面的範例就是 welcome(),再來接一組 {}{} 裡面是要放這個 function 要執行的程式碼上面這個範例裡,在 {} 裡面放的就是 var hello = 'Welcome here, may I here you ?'; 以及 console.log(hello) 這兩行程式碼,以上就是完成了一個 function 宣告。最後一行還有一個 welcome();,才是執行這個 welcome()function 的意思。

function 帶參數用法

  • 寫法:
function BMI(a,b){
    var result = b/((a/100)**2);
    console.log(result);
}
BMI(178,70);
  • 說明:還記得我們宣告了一個 function 後接他的命名之後會接一個 (),而這個 () 內是要給我們放參數的,在上面的這個範例就是 ab。這是一個計算BMI值的 function,我們用 var result = b/((a/100)**2); 來代表計算BMI值的公式,後面用一個 console.log(result)來把計算的值呈現出來。最後我們用 BMI(178,70); 來執行這個 function,所以大家有猜出來 ab 是什麼了嗎?當然就是身高與體重囉。

全域變數與區域變數

全域變數和區域變數要怎麼解釋呢?很簡單,我們用下面的範例就可以解釋清楚囉

  • 範例
var total = 100; //全域變數

function count(a,b){
    var total = a*10 + b*20; //區域變數
    console.log(total);
}
count(10,10);

console.log(total);
  • 說明:上方的程式碼我們有看到兩個 var = total,可是一個在 function 外面,一個在 function 裡面,在外面的就是全域變數,在裡面的就是區域變數,而全域變數是在整份程式碼內都有效,而且會被記憶進電腦的記憶體內佔用空間,但是區域變數不一樣,區域變數只有在 function 內有用,當執行完以後,變數隨即被清除,記憶體被釋放,不會佔用空間。所以可以說,這兩個 var total 根本就是不一樣的東西,若是執行 count(10,10) 這個 function 和執行 console.log(total) 就會發現顯示出來的 var total 的值完全不一樣喔。

Hoisting

Hoisting 的中文叫做提升,真正的 Hoisting,是可以講很長很長篇文章的,但無奈菜鳥我現在知識累積有限,所以這裡僅先針對剛學習到的觀念做初步筆記,未來知識量爆棚時,在專文分享。

程式碼的世界,是有先後順序的,由上往下開始運作,當然我們現在介紹的 JavaScript 也不會例外。

  • 範例一:
var number = 500;
console.log(number);
  • 說明:
    上方的一段短短的程式碼,其實我們可以用膝蓋想就知道,console 一定會顯示 500,因為我們在前方就已經先 var 了一個變數叫 number,而且給他一個值是 500,當程式從上方一路執行下來的時候,因為前方電腦已將 number 變數記錄了起來,所以我們後方叫 console.log 時,就可以順利的把 number 給叫出來了。

  • 範例二:

console.log(number);
var number = 500;
  • 說明:
    假設今天我們把兩個程式碼的順序對調呢?會發生甚麼事情,console則會顯示 undefined,為什麼不是顯示 500 呢?就是因為順序問題,一開始我們就執行 console.log(number) 但是在這一個 moment,電腦還不認識變數 number,所以他顯示了 undefined,在後面我們才 var number = 500; 個時候電腦才認識了變數 number,但就也僅是認識了,我們後面沒有再執行一個 console.log(number) 所以也就沒有顯示 500了。

我們把狀況再弄複雜一點吧

  • 若是在 function 的狀態下會怎麼樣呢?

  • 範例三:

console.log(number);
function count(){
    var number = 500;
}
count();
  • 說明:若是按照我們前面的經驗,第一行就先執行了一個 console.log,然後前面什麼都沒有,想必應該也是 undefined 吧,但是,人生最重要的就是這個 but,console 卻顯示了 500 怎麼會這個樣子呢?這是因為只要是 function 載入後會,不管程式碼被寫在什麼地方,它都會被提到最上層然後記憶起來,這是 JavaScript 的特性,所以才會顯示 500 喔。

搭配 return 的寫法

  • 範例一:
function getHamPrice(num){
    var hamPrice = 50;
    var total = hamPrice * num;
    console.log(total);
}
getHamPrice(10);
  • 說明:
    上方這個範例,我們沒有用上 return,通常我們寫一個計算買漢堡價錢的 function,我們會這樣寫,這樣寫也沒有不對但那就像是去小吃店吃飯,結帳的時候老闆娘拿出卡西歐計算機,點點點暗暗暗,給我一個總價,然後卡西歐計算機就歸零了,計算機不會知道這是剛剛哪一桌點了什麼東西多少錢,若要讓這件事情優化,我們可以加 return,讓我們繼續看下一個範例。

  • 範例二:

function getHamPrice(num){
    var hamPrice = 50;
    var total = hamPrice * num;
    return total;
}

var tom = getHamPrice(10);
console.log(tom);
  • 說明:
    這個範例和上一個很像,但是原本是 console.log(total); 程式碼位置的地方,被改成了 return total;。原本的 getHamPrice(10);,在前方被接上了一個 var tom = 而形成了這一整段的程式碼 var tom = getHamPrice(10),我們 var 了一個變數為 tom,然後讓它賦值為 getHamPrice(10) 這個 function 的結果,而這個 function 是帶有參數的,我們給他一個 (10) 的參數讓他回去運算,最後最後,我們再 console.log(tom); 來顯示一下 tom 的值,此時應該會顯示 500。這樣子的寫法就好像是卡西歐計算機瞬間升級成了 POS 機系統,我們都可以去 var 一個變數來讓它等於我們需要的 function,這樣就可讓 function 可用性增加喔。

  • 範例三:

function BMI (a,b){
    var result = b/((a/100)**2);
    return result;
}
var Alec = BMI(178,70);
var Rita = BMI(161,52);

console.log(Alec);
console.log(Rita);
  • 說明:
    還記得我們前面的一個 BMI 值範例嗎?若是改用 reture 寫法呢?這樣我們就可以分別的 var 不同的變數,然後都賦值給同一個 function,然後讓 function 帶著不同的參數即可,剩下的就自己研究看看吧。

來把所有的東西都整合在一起吧,簡單的計算機練習

下方是一個簡單的 HTML 網頁,我要讓它執行簡單的計算,當我們輸入相關的數字之後,只要一按計算按鈕,就會跳出正確答案囉,來看一下 codepen 吧

這個是 HTML 的部分,可以看到我們共有三個 input 欄位,一個是 pizza 的一個 beer 的,要來給我填入數字用的,另一個是按鈕欄位,用來計算用的。

<p>AI 機器人店員:<span id='hello'></span></p>
<p>客人:我需要<input type="text" id="pizzaNum" class="tag">個 Pizza 還有<input type="text" id="beerNum" class="tag">杯啤酒。<input type="button" id="click" value="點餐完成">
</p>
<p>AI 機器人店員:<span id="ok"></span><span id="total"></span></p>

再來下方就是 JavaScript 的部分了,其中還沒有提到的是 onclick 以及 parseInt,我們一個一個來說明。

首先,我們先設定了一個 welcome()function,讓我們在 HTML 碼的 id="hello" 可以至換內容,這樣我們 AI 機器人店員就可以隨著行銷活動的不同而置換不同的歡迎詞囉。

再來就是來到了點餐部分了,首先先利用 document.getElementById('click') 指定了這個 id 的標籤,然後後接 .onclick,這個語法的意思就是這個 id 的標籤被 click 了以後要做甚麼事情,後面接了一個 = 然後再接一個命名為 orderfunction,然後 {} 內就是這個 function 要執行的事情了。

一開始先 var 了三個變數,一個值是字串,兩個值是數字,再 var兩個變數,這兩個變數比較特別,它的值是來自於 HTML 內的 input 標籤的 value,所以我們用 document.getElementById('id名') 的方式來指定那一個標籤,但若要取這個標籤的 value 的值的話,就要在後面加上 .value,這樣我們在網頁上 key-in 數字時就可以透過這樣的方式取出它的值來了。

但是取出來的值雖然看起來長得像是一個數字,但是實際上它的型態是一個字串 (String),而字串無法用運算子(只能用加的),數字才可以,但是字串的相加是文字的串接,而數字的相加..........就是數字的相加阿!(不然你期望我告訴你什麼不一樣的事情),而 parseInt 就是可以將字串轉變成數字的語法,所以放在整個 document.getElementById('id名') 前,就可以轉換取出來的值成為數字,來和後面的變數做加減乘除。

最後我們再利用 document.getElementById('id名') 指定對應的 id 的標籤,然後用 .textContent 的方式來將計算出來的值以及想要置換的文字放回 HTML 的標籤內。

//打招呼
function welcome(){
    var hello = '歡迎光臨!請問想要點什麼呢?';
    document.getElementById('hello').textContent = hello;
}
welcome();

//點餐
document.getElementById('click').onclick = function order(){
  var count = '好的!沒有問題,我幫您算一下,這樣總共是';
  var pizzaPrice = 300;
  var beerPrice = 45;
  var pizzaNum = parseInt(document.getElementById('pizzaNum').value);
  var beerNum = parseInt(document.getElementById('beerNum').value);
  document.getElementById('ok').textContent = count;
  document.getElementById('total').textContent = (pizzaPrice * pizzaNum) + (beerPrice * beerNum)+'元'
}
  • 所以輸入資料前與輸入資料後的畫面長下面這個樣子

image

以上,就是為大家介紹的 JavaScript Function功能,謝謝大家~


上一篇
初探前端三劍客之一 - JavaScript 大神(變數、console.log() 與 textContent)
下一篇
JavaScript 的陣列 (Array) 與物件 (Object)
系列文
破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師38

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-16 01:46:52

開始著手發明會寫程式的程式 (X

我要留言

立即登入留言