JS20min Day — 6

視窗物件即是指瀏覽器視窗, 它是最高層次的物件之一。

基本內建方法

  1. alert(message)
  2. close()
  3. confirm(message)
  4. prompt(message, inputDefault)
  5. open(url, name, features)
  6. setTimeout(statement, delay)
  7. clearTimeout(timer)

alert(message)

這是一個彈出視窗

alert(‘Hello Alert’);

close

關閉當前視窗

window.close();

confirm(message)

確認視窗,並且會回傳一個布林值 true/false

let reply;
reply = confirm(‘Cool?’);
console.log(reply);

我們可以利用這個去決定是否要開關或執行某件事情

prompt(message, inputDefault)

彈出一個輸入視窗,第一個 message 指的是要出現的提示,第二個則是預設使用者輸入。

let reply;
reply = prompt(‘Cool?’, ‘Yes !’);
console.log(reply) // 如果有輸入則會顯示輸入的內容,如果沒有則會顯示 Yes

open(url, name, features) — 參考連結

開啟一個視窗,有三個參數。

第一個參數是「要連結到的網址」。

第二個參數是「視窗名稱」,當我們有另外的連結要打開時,如果是同樣的視窗名稱,就會在同一個視窗顯示網頁內容。

第三個參數是控制瀏覽器視窗的設定有幾種設定,是用一個字串代表,而有些設定只有 IE 可以使用。

常用的設定:height(高度), width(寬度)


  • 時間控制(Timer)
在某個時段過後自動執行某敘述。 statment 是字串型態資料, 表示要執行的 JavaScript 敘述; delay 是延遲的時間, 單位是微秒 (milli-second)。

時間控制就像是一個倒數計時器一樣,也就是敘述中的「延遲的時間」,設定好時間以後,就好像會開始倒數時間,時間一到工人就會開始做我們所指定的事情。

控制時間有分成兩種方式

  1. setTimeout(function, delay)
  2. clearTimeout()
  3. setInterval(function, delay)
  4. clearInterval()

第一個參數就是要做的事情

第二個參數就是要延遲(倒數)的時間,而這個參數是由毫秒計算,所以如果一秒鐘就是等於 1000 毫秒。

而 clear 顧名思義就是將我們的計時器移除

setTimeout

這個方式所產生的倒數計時器只會做一次事情,當每次做完就會結束這個倒數計時器。

我們有一位叫 worker_no1 的工人,只要工作兩秒後就可以休息,我們就可以用倒數計時器去控制。

function worker_no1() { console.log(‘take a rest’); }
setTimeout(worker_no1, 2000) // 五秒後就讓這個工人休息,而 2000 是毫秒就等於兩秒鐘

setInterval

而這個倒數計時器比較特別,當每次的延遲(倒數)結束時,就會重新倒數一次,並且一直執行,直到需要停止時。

worker_no1 這位工人每一秒鐘就要砍一次柴,我們就可以用一個重複倒數計時器來達到這個需求。

let firewood = 0
function worker_no1() { firewood++; console.log(firewood); } // 查看木柴數量
setInterval(worker_no1, 1000)

clearTimeout, clearInterval

其實這兩個 clear 是大同小異,指是由什麼樣的計時器,就要用什麼樣的清除方式,例如我們希望 worker_no1 這位工人在砍柴砍到第十根時就可以停止,那我們就可以加入 clearInterval 來停止他的工作。

let firewood = 0,
timer;
function worker_no1() {
if (firewood === 9) {
clearInterval(timer);
};
firewood++;
console.log(firewood);
}
timer = setInterval(worker_no1, 1000)

Tips: 發現了嗎?我們在要停止計時器時,有將一個計時器設定了一個名稱代表,timer 這個變數名稱,計時器必須要被賦予在一個變數名稱後,才有辦法利用 clear 去清除,這樣才會知道是哪個計時器,不然如果太多的時候,就會不知道怎麼停止。

看看其他相關教學

看看其他相關教學

Day — 1 基本結構 (The Structure of JavaScript), 物件 (Object)

Day — 2 變數 (Variable)

Day — 3 運算子 (Operator)

Day — 4 函數 (Function)

Day — 5 流程控制 (Flow Control)

Day — 6 視窗 (Window), 時間控制(Timer)

Day — 7 認識 HTML, 認識元件, 命名元素 (HTML)

Day — 8 事件 (Event)

Day — 9 選擇器 (Selector), 改變樣式 (Style)

Like what you read? Give Whien_Liou a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.