JavaScript

大綱

  • JavaScript可以幹嘛?
  • JavaScript寫在哪?
  • JavaScript語法
  • JavaScript常用函式
  • Lab 實作BMI計算機

JavaScript可以幹嘛?

網頁互動

https://codepen.io/bluebell3310/pen/ejEdar

還可以幹嘛?

還可以幹很多事w

1. 網頁互動做大一點 >> single-page application(單頁式應用)

ex. Gmail

2. 手機APP: react.js

3. 後端: node.js

4. 當駭客: XSS (Cross-site scripting)

5. 酷炫的網頁

6. 還有很多有的沒的

JavaScript寫在哪?

Internal: 寫在<head>裡面

<!DOCTYPE html>
<html>
<head>
<title>My first JS</title>
    <script>
        let i = 0;
        while(i<3){
            console.log(i);
            i++;
        }
    </script>
</head>
<body>
	
</body>
</html>

External: 單獨寫在.js檔案中，以下語法引入

<script src='text.js'></script>

JavaScript語法

  • 註解
  • 變數宣告
  • 資料型別
  • 運算子
  • 命名規則
  • 函數
  • 判斷

註解

// 我是個單行註解

/*
  我是
  多行
  註解
*/

變數宣告

var x = 1;
let y = 2;
const z = 3;

Scope

全域變數: 整個程式內都可被存取

區域變數: 於function開始執行時產生，結束時消滅

區塊變數: 只存在於區塊(function, if, while, for, switch...)內

var

let, const

變數宣告

try try 看便知

https://codepen.io/Trista_Su/pen/EoKYMj

資料型別

  • 字串
  • 數字
  • 布林值
  • 陣列
  • 物件
  • 空值
  • undefined
var s1 = "I am a string."; //字串
var number = 87; //數字
var bool1 = true; //布林值
var arr1 = [1, 2, 3, 4, 5, 6]; //陣列(數字)
var arr2 = ['a', 'b', 'c', 'd']; //陣列(字元)
var obj = { name: "Dog", age: 1, favorite: "Ball" }; //物件
var box = null; //空值

運算子

算數運算子

  • + 加法
  • - 減法
  • * 乘法
  • / 除法
  • ** 指數
  • % 餘數

比較運算子

  • == 是否等於 (比較值)
  • != 是否不等於 (比較值)
  • === 嚴格等於 (比較值、資料型態)
  • !== 嚴格不等於 (比較值、資料型態)
  • > 大於
  • < 小於
  • >= 大於等於
  • <= 小於等於

邏輯運算子

  • && Logical AND : 邏輯 且
  • || Logical OR : 邏輯 或
  • ! Logical NOT : 邏輯 非

命名規則

  • 大小寫有區別，如：myCode, MyCode
  • 不可使用保留字
  • 取有意義的名稱
  • 駝峰式命名

變數以小寫開頭，例如：myNumber
類別以大寫開頭，例如：MyClass

函數

function aFunc(str)
{
    console.log(str)
}

判斷

if (判斷)
{

}
else if(判斷) // 可有可無
{

}
else // 可有可無
{

}

判斷

switch(expression) {
    case x:
        code block
        break;
    case y:
        code block
        break;
    default:
        code block
}

迴圈

for (let i = 0; i < 3; i++) { 
    console.log(i);
}
let i = 0;
while(i<3){
    console.log(i);
    i++;
}

JavaScript常用函式

  • document.getElementById()
    • 回傳一表示符合指定id的Element物件
    • document.getElementById().value: 取得該元素的值
    • document.getElementById().innerText: 變更該元素之文字內容
  • console.log()
    • 通常用於Debug
    • 顯示在主控台

Lab 實作BMI計算機

  1. 先做好HTML的表單
  2. 加上JavaScript
  1. 先做好HTML的表單

<h1>

<table>

<tr>

<td>

  1. 先做好HTML的表單

<input type="text" id="heigh">

<input type="submit" id="cal"

onclick="showBMI()">

2. 加上JavaScript

<!DOCTYPE html>
<html>
<head>
    <script>
	function showBMI(){
		var height = document.getElementById("height").value;
		var weight = document.getElementById("weight").value;
		var bmiResult = weight / (height ** 2);		

		var str = " ";
		if(bmiResult > 24) {
			str = "過重";
		} else if(bmiResult < 18.5) {
			str = "過輕";
		} else {
			str = "正常";
		}
                
                document.getElementById("bmi").innerText = bmiResult;
		document.getElementById("standard").innerText = str;
	}
    </script>
</head>
<body>
    <div>
        <h1>請輸入身高體重</h1>
        <table>
            <tr>
                <td>
                    <label>身高（公尺）：</label>
                </td>
                <td>
                    <input type="text" id="height">
                </td>
            </tr>
            <tr>
                <td>
                    <label>體重（公斤）：</label>
                </td>
                <td>
                    <input type="text" id="weight">
                </td>
            </tr>
            <tr>
                <td><input type="submit" id="cal" onclick="showBMI()"></td>
            </tr>
        </table>
        <br/>
        <p>你的BMI值為: <span id="bmi"></span></p>
        <p>你的體重: <span id="standard"></span></p>
    </div>
</body>
</html>

2. 加上JavaScript

邏輯思維

  1. onclick觸發showBMI()函數
  2. 從html取得值
  3. 運算出bmi之結果
  4. 判斷是否於正常範圍
  5. 把結果寫回html
Made with Slides.com