JavaScript 入門

講者：蔡孟軒

時間：2020/11/24

Outline

  • 什麼是 JavaScript？
  • 型別與運算子
  • 程式結構
  • 流程控制

JavaScript 介紹

什麼是 JavaScript

≠

JavaScript 用途

  • 彈出式視窗
  • 輪播牆
  • 跑馬燈
  • 動畫圖片
  • 幾乎甚麼都能寫

如何使用 JavaScript

  • 透過 HTML 引入 .js 檔使用
  • 直接寫在 HTML 內使用
  • 下載 Node.js  →  CMD執行
  • 開啟瀏覽器 → F12 → console

型別與運算子

型別 (Type)

基本型別 (Primitives)：

  • 數字 (Number)
  • 字串 (String)
  • 布林值 (Boolean)
  • 空值 (Empty values)
  • symbol

物件型別 (Object)：

  • 陣列 (Array)
  • 函式 (Function)

數字 (Number)

var x = 506;
var y = 3.14;
var z = 123e-5;
typeof x;  //number

 包含整數、有小數點的數字、科學記號

數字 (Number)

typeof Infinity;  //number
typeof -Infinity;  //number
typeof NaN;  //number

 除了常見的數字外，還有 3 種特殊的數字：

NaN 並不等於任何的數字，甚至是自己

NaN === NaN;  //false

數字 (Number)

  • 運算子
    • ​"+"、"-"、"*"、"/"、"%"
  • 運算順序
    • 有( )先運算
    • 先乘除獲取餘數再加減
var num = (5 + 6) * 10 / 2;
num;  //55

字串 (String)

  • 使用" "、' '或 ` `，將字串包起來
  • 多行字串，可透過`\`(反斜線)繼續  
console.log("Hello World");
console.log('Hello World');
console.log(`Hello World`);
	
console.log('這是第一行 \
            這是第二行');
  • 運算子："+"
var a = "hot";
var b = "dog";
console.log(a + b);  //hotdog

字串 (String)

  • 樣板字面值 (Template literal)
    • ​外部：必須由 ` ` 包裹。
    • 內部：由 $ 及 { } 構成佔位符，允許字串嵌入運算式並返回運算結果。 
console.log(`half of 100 is ${100 / 2}`);

布林值 (Boolean value)

console.log(5 > 6);
console.log(5 < 6);

比較運算子：

布林值用來表示兩種值：true 和 false，通常用於判斷式，作為控制程式流程的用途

  • ​" > "、" < "、" >= "、" <= "

布林值 (Boolean value)

console.log(5 == "5");
console.log("6" != 6);
  • " === "、" !== "
    • 若不同直接回傳 false
    • 不會將型別一致化後比較。
console.log(5 === "5");
console.log(5 === 5);
  • " == "、" != "
    • 將型別一致化後比較。

布林值 (Boolean value)

邏輯運算子：

&& (and)、|| (or)、! (not)

console.log(true && false);
console.log(true || false);
console.log(!false);

空值 (Empty values)

  • 未定義 (undefined)：
    • (此變數)尚未給值，所以不知道是甚麼
    • 資料型態為 undefined
var a;          
console.log(typeof a);  //undefined
 
var a = "";
console.log(typeof a);  //string

空值 (Empty values)

  • 沒有值 (Null):
    • (此變數可能曾經有值，可能沒有值) 現在沒有值
    • 資料型態為 object
var b = 10;
console.log(typeof b);  //number
b = null;
console.log(typeof b);  //object

程式結構

變數宣告

  • let：宣告區域變數
let a = 5 * 5;
console.log(a);  //25  

let mood = "light";
mood = "dark";
console.log(mood);  //dark

變數宣告

  • const：宣告區域變數
    • ​宣告常數，不能再作修改。 
const greeting = "Hello"; 
greeting = "Hola"; 
console.log(greeting);  //Error

變數宣告

var name = "Ayda";
const greeting = "Hello";
console.log(greeting + name);  //Hello Ayda
  • var：宣告全域變數

全域變數 VS 區域變數

var x = 10;
if (true) {
  let x = 20;        
  console.log(x);  //20
}
console.log(x);  //10

輸入與輸出

let name = prompt("輸入你的名稱");

console.log('哈囉！' + name + '！');

alert('哈囉！' + name + '！')
  • prompt：輸入
  • console.log：輸出
  • alert：輸出(彈出視窗)

註解

//我是單行註解
/*
我是多行註解
這是第二行
*/
  • 單行註解：//
  • 多行註解：/* */

流程控制

if...

if (條件) {要執行的動作}

let Num = Number(prompt("輸入數字:"));

if (!Number.isNaN(Num)) {
  console.log("平方後的結果：" + Num * Num);
}

if...else...

let Num = Number(prompt("輸入數字:"));

if (!Number.isNaN(Num)) {
  console.log("平方後的結果：" + Num * Num);
} else {
  console.log("可以給我數字嗎?");
}

if (條件) {要執行的動作}

else {不符合前者條件時，要執行的動作}

if...else if...else...

if (條件) {要執行的動作}

else if (條件2) {要執行的動作}

else {都不符合時所執行的動作}

let Num = Number(prompt("輸入數字:"));

if (Num < 10) {
  console.log("Small");
} else if (Num < 100) {
  console.log("Medium");
} else {
  console.log("Large");
}

LAB-01

給使用者輸入當天溫度，輸出溫度後，低於20回答"今天有點冷穿長袖"，20~28回答"帶件外套吧"，高於28回答"穿短袖不然會熱死"

LAB-01 解答

let score = Number(prompt('請輸入分數:'))

console.log('今天溫度${score}度')
if (score<20) {
  console.log('今天有點冷穿長袖')
} else if (score<28) {
  console.log('帶件外套吧')
} else {
  console.log('穿短袖不然會熱死')
}

for 迴圈

for (初始值; 條件限制; 每次迴圈對初始值執行的事情) {滿足條件限制的話執行的事情}

for (let num = 0; num < 7; num = num + 2) {
  console.log(num);
}  //0, 2, 4, 6
let result = 1;
for (let counter = 0; counter < 10; counter++) {
  result = result * 2;
}
console.log(result);  //1024

LAB-02

輸出九九乘法表

💡：for 迴圈裡再放一個 for 迴圈

LAB-02 解答

for (let n1 = 1; n1 < 10; n1 = n1 + 1) {
  for (let n2 = 1; n2 < 10; n2 = n2 + 1) {
    console.log(`${n1}*${n2}=${n1 * n2}`);
  }
}

while 迴圈

while (條件限制) {滿足條件限制的話執行的事情}

let number = 0;
while (number < 8) {
  console.log(number);
  number = number + 2;
}  //0 2 4 6 8

LAB-03

讓出題者輸入一個數字當作答案，然後讓玩家猜測數字，如果玩家猜測的數字離答案相差在20以內，提示"有點大"或"有點小"，如果相差超過20，則輸出"再猜一次"，需計算猜測次數，直到猜中為止。

LAB-03 解答

let ans = prompt("input a number");
let num = prompt("input a number");
let times = 0;
while (num !== ans) {
  times = times + 1;
  if (num - ans <= 20 && num - ans >= -20) {
    if (num > ans) {
      console.log("有點大");
    } else {
      console.log("有點小");
    }
  }
  num = prompt("再猜一次");
}
times = times + 1;
console.log("答對了");
console.log(`猜了${times}次`);

References

Thanks for listening

Made with Slides.com