第5回の目標：HTMLの基本とjavascriptでHTMLを操作する処理を理解する。
HTML(HyperText Markup Language)はwebページを記述するための言語である。ブラウザ(今見ているアプリケーションです！)は主にwebサーバからwebページを取得し、それを読み解釈し画面表示する。
例
<!doctype html>
<html>
<body>
<p>
this is a pen.
that is a pen.
I am a pen too.
</p>
</body>
</html>
のように記述するとthis is a pen.that is a pen.I am a pen too.のみが表示される。つまりタグ自体は表示されない。
<html>のようなものをタグという。タグには、<html>のように開くタグと</html>のように閉じるタグがある。閉じるタグは開くタグと似ているが/を含む。開くタグと閉じるタグで対象を挟むことで文章の構造を示す。
タグの種類は沢山あり、どのタグで挟むかで、どのような構造を示すのかが決まる。
例えば<p>は段落を表す。5行目から7行目は<p>と</p>で挟まれており、これにより5行目から7行目までが一つの段落であることが示されている。
例
～省略～ <img src="画像ファイル名"> ～省略～
タグによっては閉じるタグを省略する。例えば<img>タグは画像を表すが、閉じるタグは省略する。上の例は"画像ファイル名"で指定した画像を表示することを意味する。
例
<!doctype html>
<html>
<body>
<p>
I like fruits.
</p>
</ul>
<li>リンゴ</li>
<li>ミカン</li>
<li>トマト</li>
</ul>
</body>
</html>
タグは入れ子にすることができる。入れ子で要素の親子関係を表す。上の例では、htmlはbodyの親であり、bodyはhtmlの子である。同じように、bodyの子はpとulであり、ulの子は3つのliである。同じ親に属する子たちを兄弟という。上の例では、pとulが兄弟であり、3つのliも兄弟である。
htmlは以下のようなツリー構造をしている。
なおタグの意味としては、<ul>は番号なしリスト、<li>はリスト項目を表し、ブラウザでは以下のよう表示される。
I like fruits.
例
～省略～ <button id ="ID1234">参加申込</button> ～省略～
htmlの要素は属性を持つことができる。上の例ではbutton要素がidという属性を持ち、その値は"ID1234"である。
buttonはボタンであり、以下のように表示される。この例では属性を持っているが、まだ使用してはいない。
HTMLは静的なものだが、javascriptはwebページを動的に変更したり、様々な処理を行ったりできる。
例：HTML
<!doctype html>
<html>
<head>
<script src="removeList.js"></script>
</head>
<body>
<ul>
<li>リンゴ</li>
<li>ミカン</li>
<li id="ID1234">トマト</li>
</ul>
<button onclick="removeTomato()">削除</button>
</body>
</html>
例：javascript(removeList.js)
function removeTomato () {
let element = document.getElementById("ID1234");
element.remove();
}
HTMLの4行目は、javascriptファイル(removeList.js)を読み込む命令である。この書き方だと、htmlファイルと同じフォルダにremoveList.jsが存在しなければならない。
HTMLの10行目はリスト項目の一つであるトマトにID(ID1234)が指定してある。
HTMLの12行目はボタンが押されたときに呼ばれる関数を登録するものである。ここではremoveTomato関数が登録されている。
removeList.jsではremoveTomato関数が定義されている。2行目のdocument.getElementByIdは、HTMLの中から指定のIDを持つhtml要素を取得する。
ここでは、elementに<li id="ID1234">トマト</li>が代入されるイメージである。続く3行目では該当のhtml要素を削除しており、結果的に以下のように動く。
例：HTML
<!doctype html>
<html>
<head>
<script src="addList.js"></script>
</head>
<body>
<ul id="ID1235">
<li>リンゴ</li>
<li>ミカン</li>
</ul>
<button onclick="addPotate()">追加</button>
</body>
</html>
例：javascript(removeList.js)
function addPotate () {
let parent = document.getElementById("ID1235");
let child = document.createElement('li');
child.innerHTML = "ポテト";
parent.appendChild(child);
}
上の例では、javascriptの3行目でli要素を生成している。4行目でli要素の表示文言をポテトに設定し、5行目でul要素の子として設定している。追加ボタンが押されるとこの関数が呼ばれ、以下のように動く。
例題1 下にidが"ID1236"、表示文言は"hello"であるp要素がある。また、確認するボタンを押すとテキストエリア内の処理が行われる。適切な処理を書いてhelloをgood byeに変更せよ。
hello
例題2 下にidが"ID1237"であるul要素がある。また、確認するボタンを押すとテキストエリア内の処理が行われる。適切な処理を書いてリストへ"国語", "数学", "英語"を追加せよ。
何秒後かに処理を行いたいときや、何秒かの間隔で処理を行いたいときはjavascriptの環境が用意しているタイマーを使う。
setInterval関数は、指定された間隔(ミリ秒)ごとに指定された関数を呼ぶ。この登録を取り消したいときはclearInterval関数を使う。
setInterval関数はパラメータとして関数を引き受けるので高階関数である。
例:HTML
～省略～
<head>
<script src="countup.js"></script>
</head>
～省略～
<p id="ID1238">
countup
</p>
<button onClick="countupStart()">
開始
</button>
<button onClick="countupStop()">
停止
</button>
～省略～
例:javascript(countup.js)
～省略～
let countupNumber = 0;
let myTimer = 0; //タイマーIDは0でない。0はタイマー動作中でない印。
function intervalFunction () {
let element = document.getElementById("ID1238");
countupNumber++;
element.innerHTML = String(countupNumber);
}
function countupStart() {
if (myTimer == 0) {
myTimer = setInterval(intervalFunction, 1000);
}
}
function countupStop() {
clearInterval(myTimer);
myTimer = 0;
}
以下のように動く。
countup
上の例では、6行目で宣言したintervalFunction関数が1秒(1000ミリ秒)間隔で呼ばれるように、14行目のsetIntervalで登録している。
setIntervalはタイマーIDを返す。19行目のclearIntervalはタイマーIDを指定してタイマーでの呼び出しの停止をしている。
タイマー登録後、タイマーを停止するまでは、再度タイマーの登録を行わない。これを実現するために13行目でタイマーIDが0のときのみ処理を行い、20行目でタイマー停止時にタイマーIDを0にしている。
例題3 下にidが"ID1239"であるp要素がある。また、確認するボタンを押すとテキストエリア内の処理が行われる。適切な処理を書いて1秒ごとにp要素の数値を1ずつ減らせ。ヒント：文字列で表された数値を数値に変換するにはNumber("数値に変換したい文字列")関数を使う。また、本来タイマーはどこかで止めるべきだが、ここでは気にしないとする。
100