iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
0
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 1

01 JavaScript 基本概念(載入、註解、除錯、變數)

前言

這是我寫給完全不會 JS 的新手的筆記。

今年五月左右,我開始學習 JS ,一開始單打獨鬥,後來有幸參加六角學院開設的 JS 學徒特訓班。非常感謝廖洧杰老師,以及時常在 slack 頻道中回答我問題的所有學長姊。雖然在程式的路上我還只是一團小肉球,常常遇到不懂的題目,希望透過這次的鐵人賽,一方面統整這幾個月學習的心得和知識,也能夠幫助到需要的人。

JavaScript 主要有兩個功能:
(1)產生網頁動畫效果
(2)跟外部伺服器要資料

但相信你之所以會在 google 搜尋 JS,對 JS 能做什麼肯定有大致的了解或根本不想了解,反正人家都說念完 HTML CSS 就要接著讀 JS。所以廢話不多說,進入 JS 這個大荒漠前,我們先來裝備一些基本知識。

如何載入 JS 到 HTML 中?

像 CSS 需要寫

<link rel="stylesheet" type="text/css" href="xxx.css">

JS 也需要寫

<script src="xxx.js"></script>

好讓 HTML 跟他搭起友誼的橋樑。但有別於 CSS , JS 這句有時不會放在 <head> 中,而是選擇放在 </body> 前,這是因為放在 <head>中有時會吃不到效果。

寫註解的方式?

不管你是要記錄錯誤,還是方便其他人知道你這一大段在衝蝦米,註解都是你的好朋友。在 JS 寫註解的方式很簡單:

//我是單行註解

/* 我是多行註解的第一行
我是多行註解的第二行
我是多行註解的第三行 */

Bug4ni? console.log() 抓錯

在 HTML CSS 可能還不明顯,但到了 JS 不得不說,程式出錯的狀況大幅提升。舉凡少打一個點,錯!字拼錯,錯!大小寫寫反,錯!偏偏又沒有除蟲劑,因此善用 console.log() 就變得很重要啦!

使用方法很簡單,每寫完一些程式,就先用 console.log(); 來檢查一下跑出來的東西是否是你要的。舉個最簡單的例子:

var a = 5; 
var b = 6; //寫完一些程式

console.log(a); 
console.log(b); //在下面確認跑出來的,是不是你想要的(這裡會先跳出 5 再跳出 6 )

另外也可以在 Chorme 按下 F12 ,會發現跳出 console 的區塊。將你的程式貼上去,藉此檢查跑出來的內容。

當然,除錯這件事說的容易做的難,這句話你就算現在不懂也遲早會懂இдஇ

變數 Variable

說了這麼多,現在你已經在沙漠的門口了。在今天文章的最後,我們要來介紹入場門票:變數。變數是什麼呢?

當你要跟電腦講你要請他做什麼前,要先跟它定義這個名詞是什麼,那個名詞是什麼,這時我們就會使用變數來存放資料,這個動作我們形容為"宣告"。舉例來說:

var a = 5; //宣告 a 是 5

除了數字這種型別,你也可以把它宣告成字串 String 、函式 Function 或布林值 Boolean 。

var tom = "帥哥"; //字串要用單引號或雙引號包住
var run = function(){ //宣告 run 這個變數等於後面的函式
  alert("開始跑");
};
var b = true; //宣告一個東西是 true 或 false

我們來思考一下,你寫完一個精美的網頁,丟給 Chrome 以後,他是怎麼記憶(或說儲存),你輸入的變數呢?當你寫

var a = 5; 
var b = 6;

看在 Chrome 眼中,其實是這樣的:

var a; //這裡是創造階段
var b; 
a = 5; //這裡是執行階段
b = 6; 

為什麼要特地提到這點?因為這之中牽涉一個觀念:記憶體。在上面的範例中, Chrome 產生四個記憶體去做這件事:a、b、a=5、b=6。延伸出來的狀況是,如果我們今天拿出 console.log來檢查,會發生什麼?

var a; 
var b; 

console.log(a);

a = 5; 
b = 6;

console.log(a);

a 和 b 測試出來的內容是類似的,我們只測試 a 就好。你會發現,印出的兩筆資料分別是 undefined 和 5 。因為一開始只有先定義有 a 這個東西,但沒定義 a 是誰,所以你要他印出 a 是誰,他只能說 undefined 。之後定義了 a = 5 ,才會印出 5 這數字。同樣的,你可以在定義後繼續改變值,如:

var tom;
tom = 180;
tom = "帥哥";

一開始宣告 tom 這個變數,之後說他 180 ,然後又重新賦予帥哥這個值給 tom 。注意:在命名變數時,第一個字母必須是英文、底線 _ 或錢字號 $ ,第一個字母後才能放數字,如: str1。

那麼今天的文章就先到這邊!讓我們一起來練習看看,下面的程式中,有幾個變數、幾個型別、幾個記憶體?

var a;
a = 1;
a = "a字串"
a = true;

學習與參考資料

JS 學徒特訓班教學影片及練習題 1-3 關
重新認識 JavaScript: Day 03 變數與資料型別:https://ithelp.ithome.com.tw/articles/10190873


下一篇
02 var、let、const 與 ES6 簡介
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言