💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、参加者は、ユーザーのキー入力に応答するインタラクティブなHTMLインターフェイスを作成することで、Webページでキーボードイベントを処理する方法を学びます。この実験では、onkeydownやonkeyupなどのイベントハンドラを実装して、テキストの色を動的に変更し、リアルタイムのキーボードインタラクションを示すことに焦点が当てられています。参加者は、入力要素とスタイリングを備えた構造化されたHTMLドキュメントを設定して始め、その後、JavaScriptの機能を徐々に追加して、キーボードイベントをキャプチャして応答するようにします。
この実験では、キーボードイベント管理の理解に役立つ実践的なアプローチが提供され、キー入力の検出、ページ要素の変更、イベントリスナーの実装などの重要な技術がカバーされています。段階的なプロセスに従うことで、学習者は、ユーザーのキーボードインタラクションを検出して反応する応答性の高いWebインターフェイスを作成する実践的な経験を得ることができ、Web開発におけるクライアントサイドのイベントハンドリングの理解を深めることができます。
このステップでは、キーボードイベント処理の実験用の基本的なHTML構造を作成します。キーボードイベントの対象となる入力要素を持つHTMLファイルを設定します。
WebIDEを開き、~/project ディレクトリに index.html という名前の新しいファイルを作成します。基本的な構造と入力要素を持つ簡単なHTML5ドキュメントを作成して始めます。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Keyboard Events Lab</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
input {
padding: 10px;
font-size: 16px;
width: 300px;
margin-bottom: 10px;
}
#output {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Keyboard Events Lab</h1>
<input type="text" id="keyboardInput" placeholder="Type something here" />
<div id="output"></div>
</div>
</body>
</html>このHTML構造の主要なコンポーネントを分解してみましょう。
keyboardInput の <input> 要素を主要なインタラクションポイントとして追加しました。output の <div> を含めました。この初期設定は、キーボードイベントのデモ用のクリーンでユーザーにやさしいインターフェイスを提供します。次のステップでは、この入力要素でキーボードイベントを処理するためのJavaScriptを追加します。
このステップでは、入力要素に対する onkeydown イベントハンドラを実装するためにJavaScriptを追加します。このイベントは、キーが押されたときにテキストの色を変更します。
WebIDEで index.html ファイルを開き、閉じる </body> タグの直前に <script> タグを追加して、JavaScriptコードを含めます。
<script>
// Get references to the input element and output div
const inputElement = document.getElementById("keyboardInput");
const outputElement = document.getElementById("output");
// Add onkeydown event listener to change text color
inputElement.onkeydown = function (event) {
// Change the input text color to red when a key is pressed
this.style.color = "red";
// Display information about the key pressed
outputElement.textContent = `Key pressed: ${event.key} (KeyCode: ${event.keyCode})`;
};
</script>このコードの主要な部分を分解してみましょう。
document.getElementById() を使用して、入力要素と出力要素への参照を取得します。inputElement.onkeydown は、keydownイベントに対するイベントリスナーを追加します。this.style.color ='red' は、キーが押されたときにテキストの色を赤色に変更します。outputElement.textContent は、押されたキーに関する情報を表示します。入力フィールドに入力したときの出力例：
これは、onkeydown イベントがどのように機能するかを示しています。
このステップでは、キーが離されたときに入力テキストの色を元の状態に戻すために onkeyup イベントハンドラを追加します。index.html ファイルの既存のスクリプトを変更して、この機能を追加します。
index.html ファイルの <script> セクションを以下のコードで更新します。
<script>
// Get references to the input element and output div
const inputElement = document.getElementById("keyboardInput");
const outputElement = document.getElementById("output");
// Add onkeydown event listener to change text color
inputElement.onkeydown = function (event) {
// Change the input text color to red when a key is pressed
this.style.color = "red";
// Display information about the key pressed
outputElement.textContent = `Key pressed: ${event.key} (KeyCode: ${event.keyCode})`;
};
// Add onkeyup event listener to restore original text color
inputElement.onkeyup = function (event) {
// Restore the input text color to black when the key is released
this.style.color = "black";
// Update the output with key release information
outputElement.textContent = `Key released: ${event.key} (KeyCode: ${event.keyCode})`;
};
</script>新しい onkeyup イベントハンドラを分解してみましょう。
inputElement.onkeyup は、keyupイベントに対するイベントリスナーを追加します。this.style.color = 'black' は、キーが離されたときにテキストの色を黒に戻します。outputElement.textContent は、キーが離されたことに関する情報を表示します。例としてのインタラクション：
これは、onkeydown と onkeyup イベントの違いを示しています。
onkeydown は、キーが押されたときにトリガーされます。onkeyup は、キーが離されたときにトリガーされます。このステップでは、window.onload イベントハンドラを紹介して、Webページ全体が読み込み終わった後にJavaScriptコードを実行する方法を示します。初期メッセージを提供し、いくつかのデフォルトのスタイリングを設定する初期化関数を追加します。
index.html ファイルの <script> セクションを以下のコードで更新します。
<script>
// Window onload event handler
window.onload = function () {
// Get references to the input element and output div
const inputElement = document.getElementById("keyboardInput");
const outputElement = document.getElementById("output");
// Set initial message when page loads
outputElement.textContent = "Page loaded! Start typing in the input field.";
outputElement.style.color = "green";
// Add onkeydown event listener to change text color
inputElement.onkeydown = function (event) {
// Change the input text color to red when a key is pressed
this.style.color = "red";
// Display information about the key pressed
outputElement.textContent = `Key pressed: ${event.key} (KeyCode: ${event.keyCode})`;
outputElement.style.color = "blue";
};
// Add onkeyup event listener to restore original text color
inputElement.onkeyup = function (event) {
// Restore the input text color to black when the key is released
this.style.color = "black";
// Update the output with key release information
outputElement.textContent = `Key released: ${event.key} (KeyCode: ${event.keyCode})`;
outputElement.style.color = "green";
};
};
</script>このステップでの主な変更点：
window.onload 関数の中にまとめました。window.onload イベントは、次のことを保証します。
例としてのインタラクション：
この最後のステップでは、実験全体を通して実装したキーボードイベントの相互作用をテストして検証します。イベントハンドラがどのように機能するかを示し、その動作を理解するためにさまざまなシナリオを検討します。
WebIDEで index.html ファイルを開き、前のステップの完全なスクリプトがあることを確認します。では、さまざまなキーボードの相互作用をテストしましょう。
ページ読み込み時の相互作用
キー押下時の相互作用
キー離し時の相互作用
例としての相互作用のシナリオ：
シナリオ1：「Hello」を入力する
- 最初の'H'を押す：テキストが赤色になり、青色の出力メッセージ
- 'H'を離す：テキストが黒になり、緑色の出力メッセージ
- 各文字について同じことを繰り返す...
シナリオ2：特殊キー
- 矢印キー、シフト、コントロールなどを試します。
- 異なるキーがどのようにイベントをトリガーするかを確認します。主な学びのポイント：
onkeydown：キーが押されたときにトリガーされます。onkeyup：キーが離されたときにトリガーされます。window.onload：スクリプトを実行する前にページが完全に読み込まれていることを保証します。実験を完了するには：
この実験では、参加者はJavaScriptイベントリスナーを使ってインタラクティブなHTMLインターフェイスを作成することで、Webページでキーボードイベントを処理する方法を学びます。実験は、入力要素と出力divを備えた構造化されたHTMLドキュメントをセットアップすることから始まり、レスポンシブなCSSでスタイリングされて、クリーンで中央に配置されたユーザーインターフェイスを提供します。参加者は、onkeydownやonkeyupなどの重要なイベント処理技術を探求し、これらはテキスト色の動的な操作とリアルタイムのイベント追跡を可能にします。
学習目標は、ブラウザのイベントメカニズムの理解、イベントリスナーの実装、そしてレスポンシブなWebインタラクションの作成に焦点を当てています。実験の手順を通じて、開発者はキーボード入力をキャプチャし、ページ要素を動的に変更し、ウィンドウレベルのイベントハンドラを実装する実践的な経験を得るでしょう。これらは、インタラクティブで魅力的なWebアプリケーションを作成するための基本的なスキルです。
