- Terapadを起動する。
- 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。
- デスクトップに「課題6」フォルダーを作り、さらにその中に「1」フォルダーを作る。
- Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。
- 以下のコードをコピー&ペーストして上書き保存する。
- 「ファイル」→「新規作成」でもう一枚TeraPadを開く。
- 「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「main.css」という名前で保存する。
- 以下のコードをコピー&ペーストして上書き保存する。
- 「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「program.js」という名前で保存する。
- 以下のコードをコピー&ペーストして上書き保存する。
- index.htmlをFireFoxで開くと、以下のようなものが表示される。 (表示がこうなっていることを確認したら main.css は閉じておく)
- program.js の showHello関数の中 (2行目と3行目の間) に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。
- program.js の showRandom関数の中に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。
- program.js の show1to10関数の中に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。
- program.js の judgeA関数の中に以下のコードを追加して上書きしてからブラウザを更新し、テキストボックスに文字を入力して「実行」を押して、その値に応じて図のようになることを確認する (「あ」以外なら何でも「不正解」になる)。
- program.js の showDate関数の中に以下のコードを追加して上書きしてからブラウザを更新し、「実行」を押して図のようになることを確認する。


<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript" src="program.js"></script> <title>課題6. JavaScript</title> </head> <body> <span class="header">動的なページの例</span> <div class="main"> <ol> <li>文字を表示する</li> <input type="button" value="実行" onClick="showHello();"> <div id="d1"></div> <li>1~10の範囲の乱数 (整数) を表示する</li> <input type="button" value="実行" onClick="showRandom();"> <div id="d2"></div> <li>1~10を並べて表示する</li> <input type="button" value="実行" onClick="show1to10();"> <div id="d3"></div> <li>入れた文字に応じて「正解」「不正解」を表示する</li> <input type="button" value="実行" onClick="judgeA();"> <input type="text" id="txt4" size="10"> <div id="d4"></div> <li>日付を表示する</li> <input type="button" value="実行" onClick="showDate();"> <div id="d5"></div> </ol> </div> </body> </html> |

/* 画像 */ img { max-width: 100%; /* 最大幅をブラウザの幅にする */ } /* 見出し用 */ .header { font-size: 2.0em;/* 2倍サイズ */ font-weight: bold;/* 太字 */ } /* 本文用字下げ */ div.main { margin-left: 10px;/* 左をあける */ } /* 箇条書きの項目の設定 */ li { margin-top: 20px;/* 上の隙間 */ font-size: 1.5em; /* 1.5倍サイズ */ } |

/* 「Hello World」を「d1」の文字に入れる */ function showHello() { } /* 1~10の範囲の乱数 (整数) を「d2」の文字に入れる */ function showRandom() { } /* 「1~10」を並べたものを「d3」の文字に入れる */ function show1to10() { } /* 「txt4」の文字が「あ」なら「正解」、そうでなければ「不正解」を「d4」の文字に入れる */ function judgeA() { } /* 日付を「d5」の文字に入れる */ function showDate() { } |
このように「1」フォルダに3つのファイルができていて、TeraPadも3枚開いていればOK。

(今後変更を加えるのは program.js だけ。index.html はブラウザ更新用にだけ使う)
![]() |
index.html の inputタグでボタンやテキストボックスを表示している。
typeプロパティに button を入れるとボタンに、text を入れるとテキストボックスになる。 ボタンでは valueに入れた文字が表示される。 onClickに入れた文字列は、「そのボタンがクリックされたときに実行される関数」。 関数は program.jsに記述されているが、この時点ではどれも空っぽなので、クリックしても何も起きない。 |
var t1 = document.getElementById("d1"); /* html側の表示対象取得 */ t1.innerHTML = "Hello World!"; |
![]() |
index.html の 16行目にdivタグで作った (最初は空っぽの文字が入っている) 要素を「document.getElementId」で取得している。
その要素の文字「innerHTML」に「Hello World!」を代入することで、ブラウザ上でこの文字が表示される。 |
var t2 = document.getElementById("d2"); /* html側の表示対象取得 */ t2.innerHTML = parseInt(Math.random()*10)+1; |
![]() |
「実行」をクリックすると1~10の乱数が表示される。クリックするたびにその値が更新される。
表示対象の取得と文字の書き換えのしくみは先ほどと同様。 「Math.random()」で0~1の実数の乱数が得られる。 それを10倍して「parseInt」で整数化 (切り捨て) すると0~9の範囲の整数になる。 それに1を足せば1~10の範囲の整数になる。 |
var t3 = document.getElementById("d3"); /* html側の表示対象取得 */ t3.innerHTML = ""; /* t3の中を空っぽにする */ for (var i=1; i<=10; i++){ t3.innerHTML += i + " "; /* 数値iと半角スペースをt3の後ろに追加 */ } |
![]() |
「実行」をクリックすると1~10の数字が順に並んで表示される。
for文の書式はProcessingと同じだが、JavaScriptでは変数の宣言は型の区別なしに「var」で行う。 「+=」もProcessingと同じで、左辺が文字列の変数なら「右辺の文字列を左辺の後ろにくっつける」、左辺が数値の変数なら「左辺の変数を右辺の値ぶん増やす」という処理にあたる。 |
var t4 = document.getElementById("d4"); /* html側の表示対象取得 */ var x4 = document.getElementById("txt4"); /* html側のテキストボックス取得 */ var t = x4.value; /* テキストボックスの文字 */ if (t=="あ"){ /* tが「あ」なら */ t4.innerHTML = "正解"; } else { /* そうでなければ */ t4.innerHTML = "不正解"; } |
![]() |
「実行」をクリックするとテキストボックスの文字が「あ」なら「正解」、そうでなければ「不正解」が表示される。
if~else構文の書式はProcessingと同じ。 「==」で等しいかどうかを判定して、条件を満たすかどうかでdivの要素に入れるものを変えている。 |
var now = new Date(); /* 日時情報の取得 */ var t5 = document.getElementById("d5"); /* html側の表示対象取得 */ var y = now.getFullYear(); /* 年の取得 */ var m = now.getMonth()+1; /* 月の取得 */ var d = now.getDate(); /* 日の取得 */ t5.innerHTML = y+"年"+m+"月"+d+"日"; |
![]() |
「実行」をクリックするとその日の日付が表示される。
「var now = new Date();」で変数 now に年・月・日・曜日・時・分・秒・ミリ秒の情報が入る (参考)。 「getFullYear」「getMonth」「getDate」で年、月、日の情報をそれぞれ取り出している。ただし、「getMonth」では実際の月より1小さい値になるため、それに1を加えている。 |