Download presentation
Presentation is loading. Please wait.
1
JavaScript中常用的互動方式 認識簡單的交談與基本的運算
2
課程內容 什麼是JavaScript的交談裝置 Java Script有哪些運算子可以處理資訊? alert、prompt、confirm
資料的轉換 基本運算 數學函數 邏輯運算
3
JavaScript程式的基本架構 輸出 經過邏輯的判斷、 數學的計算或是 基本加法運算（+） 文字的編輯 基本邏輯運算（if）
document.write 印出後不會斷行 document.writeln 印出後會斷行 在網頁的某一物件 輸出 程式執行結果 Alert：輸出資料 Prompt：輸出並輸入字串、數字 Confirm：輸出並輸入邏輯資料
4
開啟新的空白網頁 開啟「FrontPage」，先將此一空白網頁存於「 c:\temp\自己的學號\js-3」
將編輯模式改為「HTML」，如下圖 請將下一張投影片的html + JavaScript的程式取代原有的html程式
5
範例 JavaScript 程式 var n1=2; var n2=10; var t1="apples";
<HTML> <HEAD> <TITLE> 簡單的 JavaScript互動 例子 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var n1=2; var n2=10; var t1="apples"; s1=n1+n2+" "+t1; alert(s1); </SCRIPT> <NOSCRIPT> 當瀏覽器沒有支援Java Script的時候 </NOSCRIPT> </BODY> </HTML>
6
alert、prompt、confirm的用法
alert(輸出的訊息字串or變數);如： alert("輸入的資料錯誤!!"); alert(s1); prompt( )： prompt(輸出的訊息字串or變數 , 輸入資料的內設值); 如： n1=prompt("妳有幾個蘋果","1"); confirm( )： confirm(輸出的訊息字串or變數); 但與alert不同的是confirm還可輸入true或false的值，如： play=confirm("想玩個數學遊戲嗎？")
7
prompt( )的例子 把剛剛的JavaScript改為： 請問此程式有什麼問題？
<SCRIPT LANGUAGE="JavaScript"> var n1=prompt("妳有幾個蘋果","1"); var n2=prompt("他有幾個蘋果","1"); var t1="蘋果"; s1="你們兩總共有"+n1+n2+" "+t1; alert(s1); </SCRIPT> 請問此程式有什麼問題？
8
資料的轉換 由於prompt從輸入方格傳回來的資料室字串，因此加法運算時即以字串的模式連在一起，而沒有真正的加起來。解決的方式先將資料轉成數字，其指令為Number( ) 資料轉換的指令有 Number( ) String( ) Boolean( ) var n1=Number(prompt("妳有幾個蘋果","1")); var n2=Number(prompt("他有幾個蘋果","1")); n2=n2+n1; t1="蘋果"; s1="你們兩總共有"+n2+" "+t1; alert(s1);
9
confirm( )的例子 –作業一 把剛剛的JavaScript改為： 請幫忙修改 左邊的程式後， 將正確的程式 放置於原來的網頁
<SCRIPT LANGUAGE="JavaScript"> var play=confirm("想玩個數學遊戲嗎？") if (play){ n1=(prompt("妳有幾個蘋果","1"); n2=(prompt("他有幾個蘋果","1"); t1="蘋果"; s1="你們兩總共有"+n1+n2+" "+t1; alert(s1);} else{ alert("懶蟲睡覺吧！");}; </SCRIPT> 請幫忙修改 左邊的程式後， 將正確的程式 放置於原來的網頁
10
數學的基本運算 result += 10; result = result + 10;
11
試試看「＋＝」的計算運算 問題又出在哪裡呢？ var play=confirm("想玩個數學遊戲嗎？") if (play){
n1=Number(prompt("妳有幾個蘋果","1")); n2=Number(prompt("他有幾個蘋果","1")); n2=n2+n1; t1="蘋果"; s1="你們兩總共有"+n2+" "+t1; alert(s1);} else{ alert("懶蟲睡覺吧！");}; n1 = Number(prompt("妳有幾個蘋果","1")); n1+= Number(prompt("他又給妳幾個蘋果","1")); s1="妳現在總共有"+n1+" "+t1; alert(s1); 問題又出在哪裡呢？
12
Local vs Global variables
Local Variables： if (play){ n1=Number(prompt("妳有幾個蘋果","1")); n2=Number(prompt("他有幾個蘋果","1")); n2=n2+n1; t1="蘋果"; s1="你們兩總共有"+n2+" "+t1; alert(s1);} else{ alert("懶蟲睡覺吧！");}; Global Variables： var t1; if (play){ n1=Number(prompt("妳有幾個蘋果","1")); n2=Number(prompt("他有幾個蘋果","1")); n2=n2+n1; t1="蘋果"; s1="你們兩總共有"+n2+" "+t1; alert(s1);} else{ alert("懶蟲睡覺吧！");}; 「var t1;」與「var t1= “蘋果”;」 有什麼不同？
13
作業二 請將左程式的問題改為 妳有幾個蘋果 妳有幾盒蘋果 他又給妳幾個蘋果每盒蘋果有幾個？ 並將程式修改正確
n1 = Number(prompt("妳有幾個蘋果","1")); n1+= Number(prompt("他又給妳幾個蘋果","1")); s1="妳現在總共有"+n1+" "+t1; alert(s1);
14
if條件中的邏輯式子 A = = B ：等於 A ! = B ：不等於 A > B ：大於 A < B ：小於
A && B ：and A || B ：or 當A條件不成立時
15
試試看下列 if 的例子 出了什麼問題？ 試試看若按取消鍵，如何呢？ var cloth = "沒有“;
cloth = prompt("有沒有好看的衣服？","沒有") if (cloth == "沒有"){ alert("繼續作計概作業吧！");} else{ alert("耶！出去約會！");} cloth = prompt("有沒有好看的衣服？","沒有") if (cloth != "有"){ alert("繼續作計概作業吧！");} else{ alert("耶！出去約會！");} 出了什麼問題？ 試試看若按取消鍵，如何呢？
16
吃完晚飯，是否該完成計概作業呢？還是出去約會呢？
程式設計的基本概念 吃完晚飯，是否該完成計概作業呢？還是出去約會呢？ 有沒有好看的衣服 沒有 繼續作 計概作業吧！ 有 心情好嗎？ 好 不好 耶！ 出去約會！
17
較複雜的「if」流程 cloth = prompt("有沒有好看的衣服？","沒有") if (cloth != "有"){
alert("繼續作計概作業吧！");} else{ mind = prompt("心情好嗎？","不好") if (mind != "好"){ alert("耶！出去約會！");} }
18
吃完晚飯，是否該完成計概作業呢？還是出去約會呢？
程式設計的基本概念 吃完晚飯，是否該完成計概作業呢？還是出去約會呢？ 有沒有好看的衣服 沒有 繼續作 計概作業吧！ 有 心情好嗎？ 不好 好 錢是否多於5000？ 沒有 有 耶！ 出去約會！
19
Javascript Homework 3 請於12月7日午夜前email通知助教 aquaion22@edirect168.com
學號、姓名及你個人網頁的網址。(10%) 將今天的上課所做表單網頁完成，將「js-3」整個目錄上傳至WWW，並在目錄框架中為其增加新的超連結(20%) 網頁中需下列的互動問題問題結果：(70%) 想玩個數學遊戲嗎？ Yes簡單的加法運算 NO懶蟲睡覺吧 乘法運算 邏輯判斷是否該約會？還是作功課？
Similar presentations
