準備
HTMLを準備しようsub1.html へのリンク
こんなHTMLを準備してみよう。
ボタンに名前をつけるとスクリプトの中でonclic()を使える
HTMLの文藻中に、イベントハンダらをtけると、かっこわるい。文章とスクリプトは分けたい。
CSSの中で完結したい、そんなときは、ボタンにIDをつけます。
ボタンにIDをつけると
document.getElementById
まず、classとidについて復習です。document.getElementById
classはいくつも使える、idはこのページの中に一つだけつけられる
一つだけだからボタンに名前をつけると、これ一つだけの名前がつく。
ボタンがいくつもあるとき、他のボタンを押したときは呼び出されないで、このボタンを押したときだけ呼び出されるスクリプトが書けるのです。
ボタンにIDをつけよう解説
ボタンに名前をつけるにはidでつけます。classと違ってidでつける名前はhtmlのなかに一つしかできないから特定できます。
<input id="button1" type="button" value="3,ボタンを押して下さい">
意味を考えると、先ほどと同じで
<input【することは入力】
id="button1【名前にbutton1とする】
ttype="button"【装置のタイプはボタン】
【ボタンに書く文字(値)は(3ボタンを押して下さい)とする>
ということです。
こうすると
スクリプトの中に、button1と言う名前のボタンが押されたとき、どうするか書くことができます。
まず、<script> </script>と囲ってスクリプトだと指定する。
CSS解説
document.getElementById("button1").onclick = function() {alert("アラート3");
}
document.getElementById("button1").(これについては又後で解説
それに対して、onclick = function() を呼び出して(入力してだけどこの方がわかりやすいか)
として、その後の{ }の中で。なにかを実行させます。
では、実際に書く前に、間違え探し。次の文は間違いがあります。間違えを3箇所(4つ)見つけて下さい。
<input id="button1" type="button" value="3,ボタンを押して下さい>
<script>
document.getElementById("button1").onclick = function(){
alert(アラート3)
}
</script>
間違えやすいところです。また。字下げのスペースは全角を使わないで、半角スペースを使って下さい。
もうちょっと解説とver
ボタンにIDをつける その2 ver
分かりにくいので、2つに分けてみました
整数も入るし,文字も入る、ここではbutton2を操作できる命令集がはいります。
document・・・これをインターフェースといいます。
僕のイメージだと、documentというクラス(プログラム集)のなかに、getElementByIdというプログラムがある。そのプログラムの中に、inclicという命令がある,って感じですが、本当のところはどうなんでしょう。
ますスクリプトの最初の行で
【document】という装置セットの、【.】中に、【getElementById】という装置がある。
【getElementById】と言う装置は、button2というid(名前)からElement(要素)をget(捕まえる)ことができる。
その捕まえた要素を、button2というvar(変数:入れ物みたいなもの)にいれておく。
次の行で
【button2.onclick】ボタン2が押されたらどうするかを、function(){}で書いて入れているというわけです。
その中で、それがクリックされたらアラートをだす、というふうになっているのだと思います。
document.getElementByIdというのは
document(書類とか写真とかボタンも段落も)を扱う命令セットのなかにgetElementByIdという命令があって、
それを使ってElemennt(指定された要素)をIDをつかってgetする(捕まえる)という感じなんだろうな。