iT邦幫忙

4

[鼠年全馬鐵人挑戰] Week07 - JavaScript基礎學習心得 part1

在開始之前,我想先分享一下自己學習網頁開發的過程。

我一開始是自學,而且學得亂七八糟,只知道網頁前端三大元素為 Html、CSS、JavaScript,其餘架構、DOM、網頁載入流程等等一概不知,所有寫法都是自己去估狗各種教學文亂拚亂湊出來的。
甚至我不是從JavaScript開始學習,而是從jQuery開始(因為古早的教學文大多是使用jQuery),而且也沒有去研究跑的過程,覺得程式能跑就好,結果就出現這種龍蛇雜處的寫法

    var v_Name = document.getElementById('inputName').value;
    var v_Icon = $('#inputIcon option:selected').text();
    var v_Mark = document.getElementById('inputMark').value;
    var v_Link = document.getElementById('inputLink').value;
    var v_HotLink = $('[name="rg_hotlink"]:checked').val();
    var v_IEopen = $('[name="rg_ieopen"]:checked').val();
    var v_itemtype = $('[name="rg_itemtype"]:checked').val();
    var v_Color = document.getElementById('inputColor').value;

現在回頭看看會覺得當初自己寫的Code怎麼會這麼的 白癡 有個性

如此這般,我打算從JavaScript基礎開始打掉重練
希望未來的我如果忘了什麼觀念,回來看能夠馬上回憶起來
 

正題開始

測試及輸出內容

在開發前端時,最常需要做的就是測試及輸出各種需要的資料,包含變數、元件、從後端接回來的資料等等,可以查看這些資料的方法有兩種

  • alert()
    此方法會在網頁上跳出警示視窗,不過我個人不是很喜歡這種方法,除了不好看之外,視窗跳出來還要去點掉也很麻煩(明明就自己懶)。
    程式碼範例如下,小括弧內填入想顯示的資料
alert("Hello JavaScript!!");

  • console.log()
    測試時我都使用此方法,不用擔心介面呈現問題,且資料即時出現。
    程式碼範例如下,一樣小括弧內填入想顯示的資料
console.log('Hello JavaScript!!');


變數與資料型別

變數有點抽象,可以將其理解為「儲存資料的容器」,變數是使用var作為開頭來宣告,寫法如下:

var aa;  // 宣告一個名稱為aa的變數

變數命名上有幾個注意事項:

  • 開頭不能用數字
    例如: var 1abc;
  • 不能用-及.
    例如: var a-bvar a.b
  • 不能使用關鍵字
    關鍵字有哪些可參考w3schools
    像是判斷式if或是迴圈for,因JavaScript已經內定這些關鍵字的功能,故無法使用
  • 大小寫有分
  • 變數需有語意化
    此規則不強迫,但有使用的話在日後維護上會方便許多,可以馬上聯想到這個變數的用途
    例如: 紅茶的價格可宣告為blackTeaPrice、螢幕寬度可宣告為screenWidth

變數中可以存放的值分為幾種資料型別,常見的有:

  • 數字(number): 0、999、-54321
  • 字串(string): 'Hello JavaScript!!'、"~HexSchool~"
  • 布林(boolean): true、false
    其他還有 nullundefinedobject

數字型別

數字型別顧名思義就是幼稚園小學時期學到的由±0~9排列組合成的數字
假設一杯紅茶的價錢為30,則可用如下方式宣告:

var blackTeaPrice = 30;  // 宣告一個名稱為blackTeaPrice的變數 值為30
console.log(blackTeaPrice);  // 30

宣告變數是因為數值會變動(廢話),所以說
假設今天這杯紅茶打8折或是折價5元,可以這樣寫:

var blackTeaPrice = 30;  // 宣告一個名稱為blackTeaPrice的變數 值為30
blackTeaPrice = blackTeaPrice*0.8;  // blackTeaPrice打8折
console.log(blackTeaPrice);  // 24
var blackTeaPrice = 30;  // blackTeaPrice值為30
blackTeaPrice = blackTeaPrice-5;  // blackTeaPrice減5元
console.log(blackTeaPrice);  // 25

字串型別

字串型別會使用單引號'或是雙引號"作為一個字串的開頭及結尾,以單引號做開頭就要以單引號做結尾,雙引號也一樣,寫法如下:

var str = '我是字串';
var str2 = "我也是字串";

以上面紅茶價錢為例的話,用字串的寫法會變成:

var blackTeaPrice = '30';  // 宣告一個名稱為blackTeaPrice的變數 值為'30'
console.log(blackTeaPrice);  // 30

字串也可以相加:

var hello = "Hello ";  // 宣告一個名稱為hello的變數 值為"Hello "
var js = "JavaScript!!";  // 宣告一個名稱為js的變數 值為"JavaScript!!"
var hellojs = hello+js;  // 將hello與js兩字串相加
console.log(hellojs);  // Hello JavaScript!!

比較有趣的是,字串內如果都是數字,字串相乘時會自動轉型為數字型別,計算出的結果也會是數字型別,但相加就不會轉型,而是維持原本字串的特性來做相加:

var num1 = "123";
var num2 = "45";
console.log(num1*num2);  // 5535
console.log(num1+num2);  // 12345

布林型別

布林型別非常單純,只有truefalse,常用在判斷式上

var mybool = true; // 宣告一個名稱為mybool的變數 值為true

null及undefined

這裡對我來說算是最重要的部分,因為之前一直搞不懂兩者間的差異
例如宣告一個變數aa但不賦值,這時aa應該是null?還是undefined?

var aa; 
console.log(aa);  // undefined

答案是undefined,但對於學過其他語言的我來說,沒賦予值的變數,則該變數值就會是null啊!!所以我搞不懂也是合情合理xD
但在javascript的世界不是這樣設定的
只有在將變數賦予值為null時才會是null,例如:

var aa = null;
console.log(aa);  // null

簡而言之,
還沒賦予過值,則變數會是undefined
有賦予過值,且賦予的值為是null時才是null


函式

函示(function)是一個非常方便的東西,他可以用在處理任何資料的運算上
可重複使用性很高,日後維護也方便許多
基本的函式寫法如下,小括號內放參數,大括號內寫要執行的動作:

/* myFunctionName: 自訂函示名稱
 * arg01: 第一個參數
 * arg02: 第二個參數 */
function myFunctionName(arg01,arg02){
  // 要做的事情
}

函示究竟在什麼情況下會使用到呢? 假設一個情境
A客人在飲料店買了兩杯30元的紅茶,還有一杯35元的奶茶,老闆要計算總共需要付多少錢,可以這樣寫:

var blackTeaPrice = 30;  // 宣告紅茶價格為30元
var milkTeaPrice = 35;  // 宣告奶茶價格為35元
var totalPrice = blackTeaPrice*2 + milkTeaPrice*1;  // 計算總金額
console.log(totalPrice);  // 95

但如果B客人點了三杯30元的紅茶,還有兩杯35元的奶茶,這時又要做一次上面的計算嗎?
對於類似這種情況的重複性動作,可以使用函示來解決:

var blackTeaPrice = 30;  // 宣告紅茶價格為30元
var milkTeaPrice = 35;  // 宣告奶茶價格為35元
/* 定義一個函式計算總金額並回傳
 * blackTeaNum: 紅茶數量
 * milkTeaNum: 奶茶數量 */
function calTotalPrice(blackTeaNum,milkTeaNum){
  var totalPrice = blackTeaPrice*blackTeaNum + milkTeaPrice*milkTeaNum;
  console.log(totalPrice);
}

// 呼叫定義的函式去計算總金額
calTotalPrice(2,1);  // A客人的總金額輸出: 95
calTotalPrice(3,2);  // B客人的總金額輸出: 160

全域變數與區域變數

講到函示就需要提到全域與區域變數
全域變數是指在最外層宣告的變數,宣告後在任何地方都能使用它
它會存在window中,可以用變數名稱來呼叫,也能用window.變數名稱來呼叫他
區域變數顧名思義是在一個區塊內宣告的變數,只能在當下宣告的區塊內才能使用
以上面的例子來說,紅茶價格(blackTeaPrice)與奶茶價格(milkTeaPrice)歸屬於全域變數,總金額(totalPrice)歸屬於區域變數

我當初知道有這種分類時就產生了疑問,既然全域變數這麼方便任何地方都能使用,為什麼不全用全域變數就好了?
傻B,難道小時候被家人用乳名叫包包,長大之後還要被叫包包嗎,乳名長大後就不能那麼叫拉,不然多害羞~
區域變數就跟乳名一樣,僅限當下呼叫使用,時效過了就不需要就丟了,如此也能將效能有效率的使用
試想如果所有資料都放在全域中,瀏覽器會變得多肥大

(註: 區塊指的是用大括號包住的範圍)


return

函示也能做雙向互動,而雙向互動就需要搭配return一起使用
以剛才的例子來說,可以將程式碼改為:

var blackTeaPrice = 30;  // 宣告紅茶價格為30元
var milkTeaPrice = 35;  // 宣告奶茶價格為35元
/* 定義一個函示計算總金額並回傳
 * blackTeaNum: 紅茶數量
 * milkTeaNum: 奶茶數量 
 * return: 回傳值 */
function calTotalPrice(blackTeaNum,milkTeaNum){
  var totalPrice = blackTeaPrice*blackTeaNum + milkTeaPrice*milkTeaNum;
  return totalPrice;
}

var customerA = calTotalPrice(2,1);  // 傳入2杯紅茶及1杯奶茶,回傳值給customerA變數
console.log(customerA);  // 95
var vustomerB = calTotalPrice(3,2);  // 傳入3杯紅茶及2杯奶茶,回傳值給customerB變數
console.log(customerB);  // 160

part1先到這,在學習基礎時,因為實在是很無趣,但又是需要去了解的知識,好幾次都學到一半睡著,醒來之後又再重看一遍,就怕自己漏學了什麼觀念,不過也算是變相的加深印象吧!!
分享學習心得也是一樣,就像小學國中時期抄寫課文一樣,抄多了抄久了就背起來了(現在還是忘了啊)

希望日後自己來回顧時可以看得懂當初自己寫的筆記,哈哈哈~/images/emoticon/emoticon01.gif


2 則留言

1
Jerry Huang
iT邦新手 4 級 ‧ 2020-03-24 20:59:35

一起加油 /images/emoticon/emoticon18.gif

餅乾 iT邦新手 5 級 ‧ 2020-03-29 16:00:52 檢舉

/images/emoticon/emoticon12.gif

0
otac
iT邦新手 5 級 ‧ 2020-04-10 23:49:13

加油。我是來學 JAVASCRIPT的
謝謝

餅乾 iT邦新手 5 級 ‧ 2020-04-16 20:07:40 檢舉

謝謝 我們一起成長吧~/images/emoticon/emoticon69.gif

我要留言

立即登入留言