Javasctipt入門

講者：王譽錚

時間：2019/11/13

大綱

  • javascript介紹
  • 型別與運算子
  • 程式結構
  • 流程控制
  • 參考來源

Javascript介紹

什麼是 JavaScript?

  • JavaScript  與 JAVA 毫無關聯
  • JavaScript  是瀏覽器唯一指定的內建程式語言 

JavaScript的用途

  • 輪播牆
  • 控制多媒體
  • 動畫圖片
  • 彈出式視窗
    ......

網

頁

在哪裡可以編寫JavaScript

  • 執行JavaScript的環境
    • 瀏覽器  >  F12 或是 快捷鍵 ctrl + shift + i >  Console  
    • 下載node.js，再透過cmd使用
  • 擺放於HTML的JavaScript位置
    • 透過<script>標籤寫在html檔案裏面

在哪裡可以編寫JavaScript

型別與運算子

  1. 數字 (Number)
  2. 字串(String)
  3. 布林值 (Boolean value)
  4. 空值 (Empty values)

型別(type)

數字(number)

包含整數、小數、科學記號

var x = 525;
var y = 3.14;
var z = 123e-5;
typeof x;
var ans = (2 + 3) * 10 / 2;
ans;
// 25

運算

數字(number)

console.log(typeof Infinity)
console.log(typeof -Infinity)
console.log(typeof NaN);	//number

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

  • 正無限大(Infinity)
  • 負無限大(-Infinity)
  • 不是數值(NaN、not a number)

字串(string)

console.log('this is a string');
console.log("this is a string");
console.log(`this is a string`);
console.log("pen" + "apple");
//penapple

運算

樣板字面值（Template literal）

console.log(`half of 100 is ${100 / 2}`);

外部：必須由 ` ` 包裹。

內部：由 $ 及 { } 構成佔位符，允許字串嵌入運算式並返回運算結果。

布林值(Boolean value)

比較運算子：      >        <      >=      <=

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

布林值 (Empty values)

console.log(5 == "5");
console.log("8" != 8);

​將型別一致化後比較：   ==     !=

直接去做比較：===      !==

若型別不同，直接回傳 fasle。

console.log(5 == "5");
console.log(5 === 5);

布林值

邏輯運算子 英文 用法
&& and console.log(true && false);
 
|| or console.log(false || true);
 
! not console.log(!false);
 

空值

1. undefined(未定義)：​​

​​    尚未給值，所以不知道是甚麼

    資料型別為undefined

var a;          
console.log(typeof a);   //undefined

var a = "";
console.log(typeof a);   //string

空值

2. null(沒有值)：

    此變數可能曾經有值，但現在沒有值。或是本來就沒有值

    資料型別為object

var b = null;
console.log(typeof b);   //object

程式結構

宣告

1.  let 宣告區域變數

let a = 5 * 5;
console.log(a);            // → 25

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

宣告

2.  const 宣告常數

const greeting = "Hello "; 
greeting = "a"; 
console.log(greeting);	//Error

宣告

3.  var 宣告全域變數

var name = "Ayda";
const greeting = "Hello ";
console.log(greeting + name);    // → Hello Ayda

嘗試一下

全域變數 vs 區域變數

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

註解

// 這是單行註解
/*
這是多行註解，這裡面的程式都不會被執行
*/

輸入與輸出

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

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

輸入

輸出

alert('哈囉！ ' + name + '!');

輸出(彈出式視窗版)

流程控制

if...

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

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

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

if...else...

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

if (!Number.isNaN(Num)) {
  console.log("平方後的結果：" + Num * Num);
} else {
  console.log("Hey. Why didn't you give me a number?");
}

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

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

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

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

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

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

else{上述條件都不符合時所執行的動作}

Lab 1

請輸入兩個數字，並且輸出較大的那個數字

Lab 1 解答

let x = Number(prompt("輸入第一個數字"));
let y = Number(prompt("輸入第二個數字"));

if(x >y){
  console.log(x);
}else if (y > x){
  console.log(y);
}else{
  console.log("一樣大");
}

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

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

while迴圈

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

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

Lab 2 終極密碼

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

Lab 2 終極密碼

let ans = prompt("input a number");
let num = prompt("input a number");
while(num !== ans){
  if (num - ans <= 20 && num - ans >= -20){
    if(num > ans){
      console.log("too big");
    }else{
      console.log("too small");
    }
  }
  num = prompt("again");
}
console.log("you are right");

Lab 3

讓使用者輸入一個數字N，然後計算出2的幾次方會大於N

Lab 3

let N = prompt("請輸入一個數字");
let count = 0;
let i = 1;
while(i < N){
	count = count + 1;
  	i = i * 2;
}
console.log(count);

參考來源

wh3school：https://www.w3schools.com/js/default.asp

Javascript 教程：http://www.runoob.com/js/js-functions.html
對內課程Javescript入門Hackmd：https://hackmd.io/@bessyhuang/r1Qyfg9rr
對內課程Javescript入門slide：https://slides.com/bessy/javascript/#/

前端網設必知：https://www.minwt.com/webdesign-dev/html/12867.html

JavasCRIPT 編碼基礎：https://openhome.cc/Gossip/Encoding/JavaScript.html

 

END

Made with Slides.com