WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

2-2. 程式的三個基本能力

記憶能力:變數的使用 展開/收合

認識記憶體基本變數

參考介紹:w3schools(英文版)runoob(簡中版)

var 變數名稱 = 內容值;
var v_name = 100;      //將值100指派到變數v_name中記憶著

認識運算符號

運算符號的參考介紹:w3schools(英文版)runoob(簡中版)

範例小練習 展開/收合

<script>

var v1 = 99;                     //宣告變數v1 (記錄時薪) 這個是全域變數
v1++;                            //v1變數累加1存回v1變數
document.write('時薪:'+v1);     //在頁面中顯示時薪
v1*=8;                           //時薪乘以8小時再存回v1變數 (記錄成日薪)
document.write('<br>日薪:'+v1);  //在頁面中顯示日薪

function count1(){               //Fn函數是為了先準備好但不需要馬上執行的程式
    //var v2 = v1*30;            //在Fn內var宣告的變數是區域變數,無法出Fn
    v2 = v1*30;                  //變數的使用並不一定要var, 
                                 //沒有var而新成立的變數是全域變數

    document.write('<br>在Fn內月薪v2計算的結果:'+v2);
}

count1();   //呼叫count1函數馬上執行一次

//如果Fn內使用的是第一行有var的,則以下這一行無法執行
document.write('<br>在Fn外月薪v2計算的結果:'+v2);

//如果上一行執行錯誤,則程式會停止執行,也就是下一行不會執行了
document.write('<br>變數v1仍然記錄的是日薪:'+v1);

</script>

 

進一步簡單認識array陣列變數 展開/收合

 

判斷能力if 條件的判斷&switch 值的判斷 展開/收合

if 條件的判斷式基本語法 展開/收合

參考介紹:w3schools(英文版)runoob(簡中版)

if ( 判斷的條件 ) {
    判斷條件成立時要執行的程序;
} else {          //如果條件不成立時不處理任何事, 則else{}省略
    判斷條件不成立時要執行的程序;
}

認識數學運算函數

有關Math函數請連結參考介紹:w3schools(英文版)runoob(簡中版)

範例小練習 展開/收合

<script>

//隨機取得一個100以內的整數值,再判斷是偶數還是奇數
// Math是算術運算類別
// round()是取得四捨五入的結果, random()是取得>=0且<1的隨機值
// % 是兩數相除求餘數的運算符號

var num = Math.round(Math.random()*100);
if(num % 2 == 0){
    document.write('抽樣的值為:' + num + ',是偶數。');
}else{
    document.write('抽樣的值為:' + num + ',是奇數。');
}

</script>

if 條件的判斷式延伸語法 展開/收合

if ( 判斷的條件1 ) {
    判斷條件1成立時要執行的程序;     //當條件 1 成立時則不再進行以下的判斷
} else if ( 判斷的條件2 ) {        //當條件 1 不成立時則進行條件 2 的判斷
    判斷條件2成立時要執行的程序;
} else {
    以上條件皆不成立時要執行的程序;
} 

範例小練習 展開/收合

<script>

//隨機取得一個三位數內的整數值,再判斷是幾位數的值
// floor()是取得無條件捨去小數的整數值

var num = Math.floor(Math.random()*1000);
if( num >= 100 ){
    document.write( '抽樣的值為:' + num + ',是三位數的值。' );
} else if ( num >= 10 ){
    document.write( '抽樣的值為:' + num + ',是二位數的值。' );
} else {
    document.write( '抽樣的值為:' + num + ',是個位數的值。' );
}

</script>

switch 值的判斷式語法 展開/收合

參考介紹:w3schools(英文版)runoob(簡中版)

switch ( 判斷的值或運算式 )  {
    case 值1:    當判斷的值為此case值1時要執行的程序;    break;
    case 值2:    當判斷的值為此case值2時要執行的程序;    break;
    default:     以上條件皆不成立時預設要執行的程序;
}

認識日期/時間函數

有關日期/時間函數請連結參考介紹:
w3schools Date概念(英文版)w3schools get函數(英文版)runoob(簡中版)

範例小練習 展開/收合

<script>

var now = new Date();       //取得目前完整時間建立成為時間物件
var week = now.getDay();    //將now時間物件取出星期的部份

switch ( week ) {
    case 0:    document.write('今天是星期日');    break;
    case 1:    document.write('今天是星期一');    break;
    case 2:    document.write('今天是星期二');    break;
    case 3:    document.write('今天是星期三');    break;
    case 4:    document.write('今天是星期四');    break;
    case 5:    document.write('今天是星期五');    break;
    case 6:    document.write('今天是星期六');    break;
}

</script>

重複能力:迴圈的使用 展開/收合

認識重複能力

重複能力的迴圈使用方式有多種,建議先參考以下連結介紹,後續實例再練習。

Class Title Link Description
Not Timing for 英文版簡中版 計數型迴圈
while
do...while
英文版簡中版 非計數型迴圈
Timing setTimeout 英文版簡中版 指定延遲時間後執行處理程序一次
setInterval 英文版簡中版 每隔指定的延遲時間後執行處理程序

範例小練習:for 迴圈

<script>
//執行10次的迴圈,顯示Hello~~並出現打招呼的次數
//for計數型迴圈( 設定變數i初始值=1; 當i<=10則進入執行; 每圈後變數i的變化值 ) 

for( var i = 1; i <= 10; i++ ){
    document.write('Hello~~'+i+'<br>');  //文件中輸出指定字串及變數i的結果
}
document.write('迴圈後計數器的i變數='+i);  //所有迴圈後輸出變數 i 最後的結果

</script>

範例小練習:while 迴圈

<script>
//小遊戲:東家與玩家各抽一個號碼牌, 當玩家的牌大於東家則可以繼續抽牌
//先抽樣決定最大值記錄到變數i, 設定變數j初始值為0

var i = Math.floor(Math.random()*100);  //i = 0~99 代表東家
var j = Math.floor(Math.random()*100);  //j = 0~99 代表玩家

//只要符合 j > i 就反覆進入迴圈, 先顯示結果再重新抽一次變數 j
//也就是如果玩家的值大於東家的值, 那麼就可以反覆再抽牌, 直到玩家輸給東家為止

while( j > i ){
    document.write('Hello~~~ i='+i+' ~~~~~~~ j='+j+'<br>');
    j = Math.floor(Math.random()*100);
}
document.write('<hr>迴圈後的 j 變數 = '+j);

</script>

範例小練習:do...while 迴圈(改良版)

<script>

var i = Math.floor(Math.random()*100);
var j;

do{
    j = Math.floor(Math.random()*100);
    document.write('Hello~~~ i='+i+' ~~~~~~~ j='+j+'<br>');
} while ( j > i );
document.write('GAME OVER');

</script>

whiledo...while 的差別

while( 判斷條件 ){ 執行的工作; }
先判斷條件, 如果條件不成立, { } 內的工作可能一次也沒執行。

do { 執行的工作; } while( 判斷條件 );
會先執行一次, 再由while判斷條件, 條件成立再進行do。

 

 

go TOP