|
35 | 35 | const path_to_root = ""; |
36 | 36 | const default_light_theme = "light"; |
37 | 37 | const default_dark_theme = "navy"; |
38 | | - window.path_to_searchindex_js = "searchindex-ebef5985.js"; |
| 38 | + window.path_to_searchindex_js = "searchindex-64f2fd54.js"; |
39 | 39 | </script> |
40 | 40 | <!-- Start loading toc.js asap --> |
41 | 41 | <script src="toc-bc46d24f.js"></script> |
@@ -272,6 +272,48 @@ <h3 id="3-htmlとcss"><a class="header" href="#3-htmlとcss">3. HTMLとCSS</a></ |
272 | 272 | <p>ブラウザはサーバーからのレスポンスを受け取ります。そのレスポンスのうち「HTML」と「CSS」がWebページという「家」の柱（はしら）、壁（かべ）、床（ゆか）、あるいはペンキ、インテリア、壁紙、といった部品になるのは、前に説明した通りです。</p> |
273 | 273 | <p>実は、この「Webページの部品」こそが、JavaScriptの <strong>オブジェクト</strong> です。</p> |
274 | 274 | <p>したがって、JavaScriptでWebページを操るためには、まずWebページの部品そのものについて、理解しなければなりません。そのため、次のステップでは、Webページの設計図である <strong>HTML</strong> と <strong>CSS</strong> について説明します。</p> |
| 275 | +<h2 id="iv-イベントとは"><a class="header" href="#iv-イベントとは">IV. イベントとは</a></h2> |
| 276 | +<h3 id="1-きっかけを待っているコンピューター"><a class="header" href="#1-きっかけを待っているコンピューター">1. 「きっかけ」を待っているコンピューター</a></h3> |
| 277 | +<p>ふだん、Webページはただじっとしているだけに見えますが、実はあなたの操作を <strong>「今か今かと待っている」</strong> 状態です。</p> |
| 278 | +<p>例えば、あなたがこんな動きをしたとき、それがすべて「イベント」になります。</p> |
| 279 | +<ul> |
| 280 | +<li>ボタンを**カチッ（クリック）**としたとき。</li> |
| 281 | +<li>キーボードで<strong>文字を入力</strong>したとき。</li> |
| 282 | +<li>画面を**上下に動かした（スクロール）**とき。</li> |
| 283 | +</ul> |
| 284 | +<p>このように、**「ユーザーが何かをした！」**という出来事のことを、JavaScriptでは「イベント」と呼びます。</p> |
| 285 | +<hr> |
| 286 | +<h3 id="2-もししたらするという約束"><a class="header" href="#2-もししたらするという約束">2. 「もし〜したら、〜する」という約束</a></h3> |
| 287 | +<p>イベントの考え方は、皆さんの日常（にちじょう）にある <strong>「センサー」</strong> と同じです。</p> |
| 288 | +<ul> |
| 289 | +<li><strong>自動ドア：</strong> 「人が前に来たら（イベント）、ドアを開ける」</li> |
| 290 | +<li><strong>目覚まし時計：</strong> 「朝の7時になったら（イベント）、音を鳴らす」</li> |
| 291 | +<li><strong>ウェブサイト：</strong> 「ボタンが押されたら（イベント）、メッセージを出す」</li> |
| 292 | +</ul> |
| 293 | +<p>JavaScriptを学ぶと、この <strong>「もし〜が起きたら、この仕事をやってね！」</strong> というマニュアルを書けるようになります。</p> |
| 294 | +<hr> |
| 295 | +<h3 id="3-留学生への導入メッセージ"><a class="header" href="#3-留学生への導入メッセージ">3. 留学生への導入メッセージ</a></h3> |
| 296 | +<blockquote> |
| 297 | +<p>「今はまだ、難しい呪文（じゅもん）を覚える必要はありません。 |
| 298 | +画面の中で起きる**『クリック』や『入力』などの変化の一つひとつに、名前（イベント）がついているんだな**、ということだけ覚えておいてください。 |
| 299 | +皆さんが『何か』をしたときに、サイトが『反応（はんのう）』するのは、このイベントのおかげなんですよ！」</p> |
| 300 | +</blockquote> |
| 301 | +<hr> |
| 302 | +<h3 id="まとめ"><a class="header" href="#まとめ">まとめ</a></h3> |
| 303 | +<div class="table-wrapper"> |
| 304 | +<table> |
| 305 | +<thead> |
| 306 | +<tr><th>言葉</th><th>イメージ</th></tr> |
| 307 | +</thead> |
| 308 | +<tbody> |
| 309 | +<tr><td><strong>イベント</strong></td><td>「何かが起きた！」という合図</td></tr> |
| 310 | +<tr><td><strong>きっかけ</strong></td><td>ユーザーがマウスやキーボードを動かすこと</td></tr> |
| 311 | +<tr><td><strong>反応（はんのう）</strong></td><td>画面の色が変わったり、窓が開いたりすること</td></tr> |
| 312 | +</tbody> |
| 313 | +</table> |
| 314 | +</div> |
| 315 | +<hr> |
| 316 | +<p>「ウェブページを生きているように動かすための『スイッチ』」。それがイベントです。</p> |
275 | 317 |
|
276 | 318 | </main> |
277 | 319 |
|
|
0 commit comments