見出し画像

#039　フロントサイド（5）：JavaScript入門2

KINO↓

ボタンをクリックして値を変更しよう！

今回は、ボタンをクリックするとページの内容が変わるプログラムを作ります。これは、JavaScriptでウェブページを対話的にする基本的な方法の一つです。

まず、index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>値の変更</title>
    <script src="app2.js" defer></script>
</head>
<body>
    <button id="changeButton">ここをクリック</button>
    <div id="root"></div>
</body>
</html>

<button>タグのid="changeButton"は、このボタンを後でJavaScriptで見つけるためのラベルのようなものです。

JavaScriptファイルの作成

次に、app2.jsファイルを作成し、以下のコードを書きます

// ボタン要素を取得
const button = document.getElementById('changeButton');

// div要素を取得
const root = document.getElementById('root');

// ボタンがクリックされたときの動作を設定
button.addEventListener('click', function() {
    root.innerHTML += '★';
});

コードの説明

  1. document.getElementById('changeButton')：

    • これは「changeButton」というIDを持つ要素（今回はボタン）を探して取得する命令です。

  2. document.getElementById('root')：

    • 同様に、「root」というIDを持つ要素（div）を探して取得します。

  3. button.addEventListener('click', function() { ... })：

    • これはボタンに「クリックされたときの動作」を教える部分です。

    • 'click'は「クリックされたとき」を意味します。

    • function() { ... } の中に、クリックされたときに実行したい処理を書きます。

  4. root.innerHTML += '★'：

    • innerHTMLは要素の中身を表します。

    • +=は「今ある中身に追加する」という意味です。

    • つまり、「root」の中身に「★」というテキストを追加します。


動作確認
フロー

documentの主要メソッド

  • getElementById

    • 指定したIDを持つ要素を取得します。

    • 例：document.getElementById('myId')

  • getElementsByClassName

    • 指定したクラス名を持つすべての要素を取得します。

    • 例：document.getElementsByClassName('myClass')

  • getElementsByTagName

    • 指定したタグ名を持つすべての要素を取得します。

    • 例：document.getElementsByTagName('div')

  • querySelector

    • 指定したCSSセレクタに一致する最初の要素を取得します。

    • 例：document.querySelector('.myClass')

  • querySelectorAll

    • 指定したCSSセレクタに一致するすべての要素を取得します。

    • 例：document.querySelectorAll('.myClass')

  • createElement

    • 新しい要素を作成します。

    • 例：document.createElement('div')

  • createTextNode

    • 新しいテキストノードを作成します。

    • 例：document.createTextNode('Hello, world!')

  • appendChild

    • 親要素の最後の子要素として新しい子要素を追加します。

    • 例：parent.appendChild(child)

  • removeChild

    • 親要素から指定した子要素を削除します。

    • 例：parent.removeChild(child)

  • replaceChild

    • 親要素の子要素を新しい子要素で置き換えます。

    • 例：parent.replaceChild(newChild, oldChild)

  • getAttribute

    • 指定した要素の属性値を取得します。

    • 例：element.getAttribute('src')

  • setAttribute

    • 指定した要素に新しい属性を追加するか、既存の属性を変更します。

    • 例：element.setAttribute('src', 'image.jpg')

  • removeAttribute

    • 指定した要素の属性を削除します。

    • 例：element.removeAttribute('src')

  • addEventListener

    • 指定した要素にイベントリスナーを追加します。

    • 例：element.addEventListener('click', myFunction)

  • removeEventListener

    • 指定した要素からイベントリスナーを削除します。

    • 例：element.removeEventListener('click', myFunction)

  • getElementsByName

    • 指定した名前を持つすべての要素を取得します。

    • 例：document.getElementsByName('myName')

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。

いいなと思ったら応援しよう！