JavaScript

洪翠憶

JS介紹

特色

  • 腳本語言

  • 直譯式語言

  • 物件導向程式語言

  • 高階程式語言

  • 與Java語法相似

  • 一列一列執行

優勢

  • 絕大多數網站使用

  • 受諸多大型瀏覽器支援

  • 低入門門檻

  • 撰寫、除錯容易，寫好馬上執行

  • 可內嵌在HTML裡

應用

  • 網頁動畫

  • 表單驗證和送出

  • 建立web應用程式

  • 控制cookie

認識console與基本語法

console

console

  • 按F12 -> 點擊console

  • 給自己的註解

  • 方便debug

console.log();

console.log();

1分鐘實作時間～

console.log("hello world");

↑

物件

↑

方法

↑

參數

                         .             (                                               )  ;

語法

//單行註解
/*多行
 註解*/

註解

window和document

document.write();

document.getElementById(“”)

alert

window.alert();

confirm

window.confirm()

prompt

window.prompt()

練習 製作辦帳號頁面

30分鐘實作時間～

參考程式

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;" charset="utf-8">
    <title>practice!辦帳號頁面</title>
    
  </head>
  <body>
    <h1>建立新帳號</h1>
    <hr>
    <section>
      <w>帳號：</w>
      <input type="text" id="acc">	<!--帳號輸入欄-->
      <br>
      <w>密碼：</w>
      <input type="password" id="pas">	<!--密碼輸入欄-->
      <br>
    </section>
    <input type="button" value="建立" id="ok">
    <script>
      document.getElementById("ok").onclick = function(){
        window.alert("確認帳密\n帳號：" + document.getElementById("acc").value + "\n密碼：" + document.getElementById("pas").value);
        document.write("帳號建立成功！");
      };
    </script>
  </body>
</html>

變數與運算子

變數型態

  • 字串（string）

  • 數字（number）

  • 布林（boolean）

*字串須使用「'」或「"」括起*

JS變數命名原則

  • 不可使用保留字

  • 區分英文大小寫

  • 第一個字不可為數字

  • 名稱中可使用「_」

counter≠Counter

var 變數名稱;

var 變數名稱 = 值;

var 變數名稱1, 變數名稱2;

var 變數名稱1 = 值1, 變數名稱2 = 值2;

宣告方法

算術運算子

- 負號
++ 加1
-- 減1
** 次方
* 乘
/ 除
% 取餘數
+ 加、字串連接
- 減

宣告變數練習

2分鐘實作時間～

條件控制

邏輯與比較運算子

== 等於
!= 不等於
< 小於
> 大於
<= 小於等於
>= 大於等於
! NOT
&& AND
|| OR
=== 嚴格相等
!== 嚴格不相等

使用運算子練習

1分鐘實作時間～

if(條件式){
    陳述句;
}else{
    陳述句;
}

if

if(條件式){
    陳述句;
}else if(條件式){
    陳述句;
}else{
    陳述句;
}
if(條件式){
    陳述句;
}

switch

switch(變數){
    case 值:
        陳述句;
        break;
    case 值:
        陳述句;
        break;
    default:
        陳述句;
        break;
}
switch(變數){
    case 值:
    case 值:
        陳述句;
        break;
}
switch(變數){
    case 值:
        陳述句;
        break;
    case 值:
        陳述句;
        break;
}

switch

?:

條件式 ? true的回傳值 : false的回傳值

?:

條件控制練習

15分鐘實作時間～

參考程式

if(window.prompt("請輸入通關密語") == "芝麻開門"){
    document.write("正確，請進");
}else{
    document.write("錯，請離開");
}
switch(window.prompt("請輸入通關密語")){
    case "芝麻開門":
        document.write("正確，請進");
        break;
    default:
        document.write("錯，請離開");
        break;
}
document.write(window.prompt("請輸入通關密語") == "芝麻開門" ? "正確，請進" : "錯，請離開");

迴圈

for

for(起始值; 條件式; 更新值){
    陳述句;
}

while

while(條件式){
    陳述句;
}

do-while

do{
    陳述句;
}while(條件式);

break和continue一樣能用

break; vs continue;

迴圈練習

經典題目——fizzbuzz

  • 從1數到n

  • 遇到3的倍數就fizz

  • 遇到5的倍數就buzz

  • 遇到以上的公倍數就fizzbuzz

輸出：
1
2
fizz
4
buzz
fizz
7
8
fizz
buzz
11
fizz
13
14
fizzbuzz
16
...

迴圈練習

15分鐘實作時間～

參考程式

var fizz = window.prompt("fizz");
var buzz = window.prompt("buzz");
for(i=1; i<26; i++){
  document.write(i%fizz == 0 && i%buzz == 0 ? "fizzbuzz" : (i%fizz == 0 ? "fizz" : (i%buzz == 0 ? "buzz" : i)), "<br>");     
}

實作！猜數字遊戲

提示

猜數字遊戲

30分鐘實作時間～

參考程式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>猜數字遊戲</title>
  </head>
  <body>
    <h2>猜數字遊戲</h2>
    <hr>
    <p id="one"></p>
    <p id="two"></p>
    <input type="button" value="開始遊戲" id="start">
    <script>
      document.getElementById("start").onclick = function(){
      var target = Math.ceil(Math.random()*100);
      var times = 0;
      var num;
      while(true){
          num = window.prompt("輸入數字1~100");
          if(num == null || num == ""){
            break;
          }else if(num == "告訴我答案"){
            window.alert("那我就大發慈悲的告訴你吧，是" + target);
            times--;
          }else if(num == target){
            document.getElementById("one").textContent = "猜對了! 答案為: " + target;
            document.getElementById("two").textContent = "共猜了: " + (times+1) + "次";
            document.getElementById("start").value = "再玩一次";
            break;
          }else if(num > target){
            alert(num + "太大!");
          }else if(num < target){
            alert(num + "太小!");
          }
          times++;          
        }
      };   
    </script>
  </body>
</html>

結語

未來的學習

  • 剩的基本語法

  • 認識更多物件

  • 向更理論邁進

  • 網頁表單與客戶端資料儲存

  • jQuery函式庫

  • Ajax、JSON、RESTful

  • Node.js

謝謝大家！

Made with Slides.com