ジャバスクリプトの１

スクリプトでアラートを出す
イベントハンドラー

準備

HTMLを準備しよう
sub1.html へのリンク
こんなHTMLを準備してみよう。

ボタンに名前をつけるとスクリプトの中でonclic()を使える

HTMLの文藻中に、イベントハンダらをｔけると、かっこわるい。
文章とスクリプトは分けたい。
CSSの中で完結したい、そんなときは、ボタンにIDをつけます。
ボタンにIDをつけると
document.getElementById
まず、classとidについて復習です。
classはいくつも使える、ｉｄはこのページの中に一つだけつけられる
一つだけだからボタンに名前をつけると、これ一つだけの名前がつく。
ボタンがいくつもあるとき、他のボタンを押したときは呼び出されないで、このボタンを押したときだけ呼び出されるスクリプトが書けるのです。

    <input id="button1" type="button" value="３，ボタンを押して下さい">
    <script>
       document.getElementById("button1").onclick = function(){
            alert("アラート3");
       }
    </script>


ボタンにIDをつけよう解説

ボタンに名前をつけるにはidでつけます。
classと違ってidでつける名前はhtmlのなかに一つしかできないから特定できます。
<input id="button1" type="button" value="３，ボタンを押して下さい">
意味を考えると、先ほどと同じで
<input【することは入力】
id="button1【名前にbutton1とする】
ttype="button"【装置のタイプはボタン】
【ボタンに書く文字（値）は（３ボタンを押して下さい）とする>
ということです。
こうすると
スクリプトの中に、button1と言う名前のボタンが押されたとき、どうするか書くことができます。
まず、<script> </script>と囲ってスクリプトだと指定する。

CSS解説

document.getElementById("button1").onclick = function() {
　　alert("アラート3");
}
document.getElementById("button1").（これについては又後で解説
それに対して、onclick = function() を呼び出して（入力してだけどこの方がわかりやすいか）
として、その後の{　}の中で。なにかを実行させます。

では、実際に書く前に、間違え探し。次の文は間違いがあります。間違えを３箇所（４つ）見つけて下さい。
<input id="button1" type="button" value="３，ボタンを押して下さい> <script> document.getElementById("button1").onclick = function(){ alert(アラート3) } </script>
間違えやすいところです。
また。字下げのスペースは全角を使わないで、半角スペースを使って下さい。

もうちょっと解説とver


ボタンにIDをつける　その２ ver
分かりにくいので、2つに分けてみました

    <input id="button1" type="button" value="４，ボタンを押して下さい">
    <script>
        let button2=document.getElementById("button1");
        button2.onclick = function(){
            alert("アラート4");
       }
    </script>
ver というのは変数だよという指定で、入れ物の指定だと考えて良いでしょう。
整数も入るし,文字も入る、ここではbutton2を操作できる命令集がはいります。
document・・・これをインターフェースといいます。
僕のイメージだと、documentというクラス（プログラム集）のなかに、getElementByIdというプログラムがある。そのプログラムの中に、inclicという命令がある,って感じですが、本当のところはどうなんでしょう。

ますスクリプトの最初の行で
【document】という装置セットの、【.】中に、【getElementById】という装置がある。
【getElementById】と言う装置は、button2というｉｄ（名前）からElement(要素)をget(捕まえる）ことができる。
その捕まえた要素を、button2というvar(変数：入れ物みたいなもの）にいれておく。
次の行で
【button2.onclick】ボタン2が押されたらどうするかを、function(){}で書いて入れているというわけです。
その中で、それがクリックされたらアラートをだす、というふうになっているのだと思います。
document.getElementByIdというのは
document（書類とか写真とかボタンも段落も)を扱う命令セットのなかにgetElementByIdという命令があって、
それを使ってElemennt（指定された要素）をIDをつかってgetする（捕まえる）という感じなんだろうな。
次の問題へ進む