changeイベント

checked

if文

else節

element.textContent

~~~javascript
var element = $(1).getElementById($('2'));
element.textContent = $('3');
console.log(element.textContent);
~~~

無名関数（匿名関数）

<div class="container">
  <input type="checkbox" id="checkbox" />
  <span id="checkboxText">チェックしてください</span>
</div>
<style>
  .container {
    padding: 24px;
    text-align: center;
  }
  #checkboxText {
    font-size: 16px;
    color: #333;
  }
</style>


const checkbox = document.getElementById('checkbox')
const checkboxText = document.getElementById('checkboxText')

checkbox.addEventListener('change', function () {
  // 問題1. チェック済かどうかによって条件分岐をさせてください
  if (checkbox.checked) {
    // 問題2. チェックボックスの値によって表示するテキストを変更させてください
    checkboxText.textContent = 'チェック済'
  } else {
    checkboxText.textContent = 'チェックしてください'
  }
})


const checkbox = document.getElementById('checkbox')
const checkboxText = document.getElementById('checkboxText')

checkbox.addEventListener('change', function () {
  // 問題1. チェック済かどうかによって条件分岐をさせてください
  // 問題2. チェックボックスの値によって表示するテキストを変更させてください
})



    // const answer1 = 'if(){ } else { }'
    const answer2 = 'checkbox.checked';
    const answer3 = "checkboxText.textContent = 'チェック済'";
    const answer4 = "checkboxText.textContent = 'チェックしてください'";
    const hint1 = '無名関数の中に`*if() {} else {}*`と記述してください';
    const hint2 = '`if()`の中に条件を書いてください';
    const hint3 = '`if(checkbox.checked){ }`の中に処理を書いてください。`textContent`を使います';
    const hint4 = 'else{ }の中に処理を書いてください。`textContent`を使います';
    const questions = [
        {
            title: 'チェック済かどうかによって条件分岐をさせてください',
            tests: [
                {
                    title: 'if else文を書こう',
                    hint: hint1,
                    test: () => {
                        isContainTextInEditor('if');
                        isContainTextInEditor('(');
                        isContainTextInEditor('){');
                        isContainTextInEditor('} else {');
                        isContainTextInEditor('}');
                    }
                },
                {
                    title: '分岐のための条件を設定しよう',
                    hint: hint2,
                    test: () => {
                        isContainTextInEditor(answer2);
                    }
                }
            ]
        },
        {
            title: 'チェックボックスの値によって表示するテキストを変更させてください',
            tests: [
                {
                    title: 'チェック済の場合の処理を記述しよう',
                    hint: hint3,
                    test: () => {
                        isContainTextInEditor(answer3);
                    }
                },
                {
                    title: 'チェック済でない場合の処理を記述しよう',
                    hint: hint4,
                    test: () => {
                        isContainTextInEditor(answer4);
                    }
                }
            ]
        }
    ];


changeイベントをカスタマイズ

document.addEventListener()

clickイベント

mouseoverイベント

イベントとは

DOMContentLoaded

HTMLを読み込ませてからイベントを処理

this

```html
<button id="myButton">クリックすると…</button>
```

```js
const button = document.getElementById('myButton');

button.addEventListener('click', function(){
    $(1).textContent = 'テキストが変わるよ！';
});
```

ボタンをクリックしてテキストを変更

createElement(tag_type)

element.appendChild(element)

【演習1】 クリックしたらリスト要素が追加されるボタンを実装しよう

submitイベント

e.preventDefault()

value

submitイベントをカスタマイズ

HTMLFormElement.reset()

disabled

submitイベントをカスタマイズ2

else if

【演習2】 フォームを作成しよう

mouseoutイベント

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

mouseoverイベントをカスタマイズ

document.removeEventListener()

イベントの設定を削除

scrollイベント

scroll系

scrollイベントをカスタマイズ

【総合問題】ページトップへ戻るボタンを実装しよう

イベント処理の基礎を学び、ページにインタラクティブな動作を追加する方法を習得します。
実際のウェブサイト制作に直結する知識が身につきます。

「JavaScript DOM イベント操作でアクションを実行しよう」レッスンの総復習クイズです。

JavaScript DOM イベント操作でアクションを実行しようの総復習クイズ

JavaScript DOM イベント操作でアクションを実行しよう