【独習JavaScript】JavaScript　入門その１

2022年 05月 24日

タグ：

JavaScript

JavaScriptを初めてみよう

JavaScriptはHTMLとCSSの操作を行えるプログラミング言語です。

最初の取っ掛かりとして、なるべくシンプルな文法を使ってHTMLとCSSをJavaScriptで動かしてみたいと思います。

JavaScriptでマウスやキーボードの入力に反応させる

JavaScriptでは、マウスのクリックや移動、キーボードの入力などに反応してコードを実行する 仕組みがあります。

このような仕組みを イベント と呼びます。

最初にaddEventListenrというものを利用し、クリックに反応して"Hello World"を出力するサンプルを確認します。

document.body.addEventListener("click",function(){
    console.log("Hello World!");
}

上記の例では、前から「場所→イベントの種類→やりたいこと」の順番に並んでいると考えてください。

場所：document.body (bodyなのでwebページ全体)
イベントの種類: addEventListener("click", )　（クリックに反応する）
やりたいこと: function(){console.log("Hello World")}　（コンソールに出力）

ここで、

function(){
    console.log("Hello World!");
}

のような、functionでまとめた部分を関数（厳密には コールバック関数 ）と言います。

関数の仔細については後回しします。今はこんな形の使い方を真似するだけで良いです。

イベント には先述の通り、クリックやマウスの移動などさまざまな入力に対応したものが用意されています。詳細は教科書（独習JavaScript）のP482を確認してください。

JavaScriptでHTML要素を指定する (P417)

画面全体をクリックするだけでは複雑なことができないので、htmlの特定の場所を指定できた方が便利です。

その仕組みの代表的なのが getElementById(id名) です。

htmlの id属性 を利用して、操作したいhtmlの要素( Element )を指定することができます。

書き方は document から初めて、

document.getElementById()

と書きます。最初に出た addEventListener と組み合わせて、

document.getElementById("id名").addEventListenr("click",function(){
    console.log("Hello World")
})

と書くことで、htmlの指定したid属性の要素をクリックすると、hello worldをコンソールに出すことができます。

JavaScriptでCSSを操作する。（P443~)

次はCSSを操作する方法です。

今回は先に作例を先に載せます.

<body>
    <div id="sikaku" style="background-color:red; width:200px; hight:200px; ">
        これは四角形です
    </div>
    <script>
        document.getElementById("sikaku").addEventListener("click",function(){
            this.style.backgroundColor = "green"
        })
    </script>
</body>

this.style.backgroundColor では、指定したid属性の要素のCSSの背景の色を赤から緑に変更することができます。

this というキーワードが出てきました。これは document.getElementById("sikaku") のことを指しています。

JavaScriptのthisは定義が少しややこしいので、今回はこの流れで使うと言う点だけを知っておいてください。

ほとんどのCSSのプロパティは、style.プロパティ名で指定することができます。

ただし、通常のCSSは間に -(ハイフン) を使う ケバブケース(Kebab・串焼き) で書かれます。

JavaScriptで指定するときは、backgroundColorのように、小文字と大文字 で繋げる キャメルケース(Camel・ラクダ) で書く必要があります。

キャメルケースはJavaScriptで最もよく利用される形ですので、覚えておいてください。

JavaScriptでHTMLのテキストを操作する。（P425)

JavaScriptではHTMLのテキストも操作できます。

textContent は指定した要素の文字列を設定できます。

下記の例では、クリックしたときに文字列も一緒に変更されます。

<body>
    <div id="sikaku" style="background-color:red; width:200px; hight:200px; ">
        これは四角形です
    </div>
    <script>
        document.getElementById("sikaku").addEventListener("click",function(){
            this.style.backgroundColor = "green";
            this.textContent = "緑色の四角形です"
        })
    </script>
</body>

innerHTML は指定した要素の文字列と一緒にHTMLタグも設定できます。

<body>
    <div id="sikaku" style="background-color:red; width:200px; hight:200px; ">
        これは四角形です
    </div>
    <script>
        document.getElementById("sikaku").addEventListener("click",function(){
            this.style.backgroundColor = "green";
            this.innerHTML = "<h2>緑色の四角形です</h2>"
        })
    </script>
</body>