做動畫學物理‧課堂活動03

認識JavaScript(2/3)

任務

1. 用 javascript 監聽/控制 HTML
2. 完成費氏數列與黃金比例程式

[先下載半成品]

body 標籤載入完成時，執行 init();

html


<body onload="init();"> ...... </body>

javascript


function init () {
    .....
}

每隔一段固定時間，執行tick

javascript


setInterval(tick,33);//每33ms 執行一次 tick

function tick(){
    ........
}

設定標籤 id 以方便呼叫

html


<h1 id='myH1' style="color:#0000FF" 
              onmouseover='mouseOverH1();' 
              onmouseout='mouseOutH1();'>
    這是一段藍色的標題，滑鼠來</h1>

javascript


function mouseOverH1(){
  //變色
  document.getElementById('myH1').style.color = '#FF0000';
  //document = 執行這段 javascript 的 HTML 文件
  //getElementById('myH1') = 取得 id 為 myH1 的標籤
  //然後變色 #RRGGBB
}
function mouseOutH1(){
  //變色
  document.getElementById('myH1').style.color = '#0000FF';
}

顏色： #RRGGBB

16進位：0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

16進位	10進位
#9	9
#E	14
#2E	46
#FF	255

更多顏色↓

16進位色碼	10進位色碼	中文名	英文名
#RRGGBB	RGB(R, G, B)
#FFFFFF	RGB(255, 255, 255)	白	white
#FF0000	RGB(255, 0, 0)	紅	Red
#00FF00	RGB(0, 255, 0)	綠	Green
#0000FF	RGB(0, 0, 255)	藍	Blue
#000000	RGB(0, 0, 0)	黑	blacK

16進位色碼	10進位色碼	中文名	英文名
#RRGGBB	RGB(R, G, B)
#FFFF00	RGB(255, 255, 0)	黃	Yellow
#FF00FF	RGB(255, 0, 255)	洋紅	Magenta
#00FFFF	RGB(0, 255, 255)	青	Cyan

更多內容，請參考：w3schools color.

製作按鈕並監聽 click

html


<button type="button" onclick="clickButton1();">
      我是按鈕1，來按我啊！
</button>

javascript


function clickButton1(){
    .........
}

改變html的內容

html


<p id='myPP'>這是第二段文字，有id，可用程式變更。</p>

javascript


var pp = document.getElementById('myPP');
pp.innerHTML = '用程式加入這段文字';
pp.innerHTML += '，然後再加入這段文字。';

製作文字輸入欄位

html


<input type="text" value="apple" id="t01">

更多 input ↓

input type 1/2

input type	example
button
checkbox	visible1 visible2
color
number
password
range
data (Chrome)

input type 2/2

input type	example
radio (no name)	甲乙丙
radio (with name)	A1 A2 A3 B1 B2 B3

更多關於 input 請看：w3schools

任務來了

1.在網頁上輸出1, 2, 3, 4, 5.....

2.倒數第二項顯示在textInput01，
最末一項顯示在textInput02

3.其比值顯示在textInput03(自己做)

4.按"按鈕1"可以一次一次執行，
按"按鈕2"可以自動執行

5.把第1.中的數列改為費氏數列

提示

你需要兩個變數 var，一個記最後一項，一個記最倒數第二項。
你需要一個 funcnction，計算下一項。

費氏數列與黃金比例

費氏數列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89....

\[ F_{n+2}=F_{n+1}+F_n \]

\[ 試證明黃金比例\phi= \frac{F_{n+1}}{F_n}=1.618...(n→\infty)\]