響應式網頁前端整合設計講義 TS-RWD-handout

5-1. 加強多了解 JS 的變數與迴圈

進一步了解 JavaScript 請參閱： w3schools(英文)、 RUNOOB(簡中)、 W3school(簡中)

參考 JavaScript 版本：JavaScript版本、 ECMAScript版本展開/收合

發布日期	摘要
1996年11月	網景正式向ECMA（歐洲電腦製造商協會）提交語言標準
1997年6月	ECMA以JavaScript語言為基礎制定了ECMAScript標準規範ECMA-262
2015年6月	ECMAScript 2015（ES2015），第 6 版，最早被稱作是 ECMAScript 6（ES6）
2016年6月	ECMAScript 2016（ES2016），第 7 版
2017年6月	ECMAScript 2017（ES2017），第 8 版
2018年6月	ECMAScript 2018（ES2018），第 9 版
2019年6月	ECMAScript 2019（ES2019），第 10 版
2020年6月	ECMAScript 2020（ES2020），第 11 版
額外提供參考	基礎 JS ES6 新增部份比較參考資料

記憶能力：加強多了解 JS 的變數展開/收合

ES6 以後增加的變數：let 展開/收合

為了加強變數的能力，更為了改善 var 不理想的問題。

參考介紹：w3schools(英文版) 或 runoob(簡中版) 或 W3school(簡中版)

//let 變數名稱 = 內容值;
//將值100指派到變數v1中記憶著
let v1 = 100;
console.log(v1);

//let 變數名稱;
//變數名稱 = 內容值;
//將值100指派到變數v2中記憶著
let v2;
v2 = 100;
console.log(v2);

※ 可否重複定義：	var 能重複定義相同的變量名稱, 後定義的覆蓋先定義的 let 不能重複定義相同的變量名稱
※ 可否後定義：	var 可以先使用後定義, 因為var會預解析 let 不可以先使用後定義, 並且 let 定義的變量必須有值才能使用
※ 作用範圍：	全域變數：在 function(){} 外面定義, 有效範圍, 是從定義開始, 到文件末尾都可使用區域變數：在 function(){} 裡面定義, 有效範圍, 是從定義開始, 到 {} 結束, 只有在 {} 內才能使用這裡 var & let 都一樣

還增加了一個定義為常數的 const, 定義為常數是不能再被改變的

//const 變數名稱 = 內容值;
//將值'TSuiling'指派到變數s1中記憶著
//指定記錄為常數的變數名稱, 不能再重複定義, 也不能指定改變值
const s1 = 'TSuiling';
console.log(s1);

加強認識運算符號展開/收合

運算符號的參考介紹：w3schools(英文版)、 runoob(簡中版) 或 W3school(簡中)

<script>

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

//其他運算請參看上述連結中的介紹與範例

</script>

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

參考介紹：w3schools(英文版)、 runoob(簡中版) 或 W3school(簡中)

let a1 = ['日','一','二','三','四','五','六'];
let now = new Date();
let nowW = now.getDay();
nowW = a1[nowW];
console.log(nowW);

另一種定義與使用的方法：※建議使用上述方法

let a1 = new Array('日','一','二','三','四','五','六');
let now = new Date();
let nowW = now.getDay();
nowW = a1[nowW];
console.log(nowW);

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

認識重複能力

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

Class	Title	Link	Description
Not Timing	for	英文版、簡中版	計數型迴圈
Not Timing	while do...while	英文版、簡中版	非計數型迴圈
Timing	setTimeout	英文版、簡中版	指定延遲時間後執行處理程序一次
Timing	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>

while 與 do...while 的差別

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

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