LESSON 02 / 03 約4分
押したら、画面を変える
まずは仕組みをつかもう。細かい書き方は覚えなくて大丈夫。
01 これは何？
イベント＊1は、クリックなどの出来事です。そのときに行う仕事を関数＊2にまとめます。DOM＊3を使うと、JavaScriptからHTMLの部品を選んで、表示している文章などを変えられます。
＊1 イベント：クリックや入力など、画面で起きる出来事。
＊2 関数：呼び出して実行できる処理のまとまり。
＊3 DOM：ページの部品をプログラムから扱う仕組み。
02 なぜ必要？
投稿前に入力内容を確認したり、操作の結果を案内したりするときに使います。利用者の文章はtextContentで文字として表示すると、HTMLの命令として動かしません。ただし、画面を書き換えただけではデータは保存されません。
03 最小限のコード・図
<button id="check" type="button">確認する</button>
<p id="result"></p>
<script>
const button = document.querySelector('#check');
const result = document.querySelector('#result');
button.addEventListener('click', () => {
result.textContent = '確認できました。まだ保存はしていません。';
});
</script>04 ここだけ理解する
- 操作が起きたら、登録した関数が実行される。
- querySelectorでHTMLの部品を選ぶ。
- 入力された文章を表示するときはtextContentを使う。
05 覚えなくていいこと
イベントの全種類は覚えなくてOK。まず「何をしたら、何が起きるか」を考えましょう。
ASK AI
06 AIに聞いてみよう
質問文をコピーして、ChatGPTやCodexなどに貼り付けてみましょう。
投稿欄の値を取得し、ボタンを押したら文字数を表示する短いHTMLとJavaScriptを書いてください。空ならifで案内を変え、表示にはtextContentを使ってください。保存は行わず、各処理の役割も説明してください。
07 AIの回答を見るポイント
- 存在する部品を選び、操作が一度だけ実行されるか。
- 利用者の入力をinnerHTMLにそのまま入れていないか。
08 だいたい分かったら、次へ
「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。