scrollイベント

scroll系

if文

else節

無名関数（匿名関数）

element.style

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

<div id="scrollElement"></div>

<style>
  #scrollElement {
    width: 100%;
    height: 1200px;
    background-color: #add8e6;
  }
</style>


const scrollElement = document.getElementById('scrollElement')

document.addEventListener('scroll', function () {
  const scrollPosition = window.scrollY
  // 問題1. スクロール位置に応じて条件分岐させてください
  if (scrollPosition > 200) {
    // 問題2. スクロール位置に応じて要素のスタイルを変更させてください
    scrollElement.style.backgroundColor = '#ffa500'
  } else {
    scrollElement.style.backgroundColor = '#add8e6'
  }
})


const scrollElement = document.getElementById('scrollElement')

document.addEventListener('scroll', function () {
  const scrollPosition = window.scrollY
  // 問題1. スクロール位置に応じて条件分岐させてください
  // 問題2. スクロール位置に応じて要素のスタイルを変更させてください
})



    // const answer1 = 'if(){ } else { }'
    const answer2 = 'scrollPosition > 200';
    const answer3 = "scrollElement.style.backgroundColor = '#ffa500'";
    const answer4 = "scrollElement.style.backgroundColor = '#add8e6'";
    const hint1 = '無名関数の中に`*if() {} else {}*`と記述してください';
    const hint2 = '`if()`の中に条件を書いてください';
    const hint3 = '`*.style.backgroundColor*`を使います';
    const hint4 = '`*.style.backgroundColor*`を使います';
    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: '「スクロール位置が200pxを超えた場合」の処理を記述しよう',
                    hint: hint3,
                    test: () => {
                        isContainTextInEditor(answer3);
                    }
                },
                {
                    title: 'それ以外の場合の処理を記述しよう',
                    hint: hint4,
                    test: () => {
                        isContainTextInEditor(answer4);
                    }
                }
            ]
        }
    ];


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

document.addEventListener()

clickイベント

mouseoverイベント

イベントとは

DOMContentLoaded

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

this

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

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

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

element.textContent

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

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

createElement(tag_type)

element.appendChild(element)

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

changeイベント

checked

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

submitイベント

e.preventDefault()

value

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

HTMLFormElement.reset()

disabled

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

else if

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

mouseoutイベント

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

document.removeEventListener()

イベントの設定を削除

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

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

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

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

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