ホームページ > 記事 > ウェブフロントエンド > JavaScript入門：イベント、Cookie、タイミングなど_基礎知識
JavaScript入門：イベント、Cookie、タイミングなど_基礎知識
- WBOYオリジナル
- 2016-05-16 18:00:461153ブラウズ
「JavaScript 言語の概要」に関する記事では、スクリプト タグの作成からコメントの使用、JavaScript ファイルの HTML ドキュメントへの組み込み、変数の定義、演算子の使用、配列の定義、条件ステートメントの使用まで、JavaScript 言語の最も基本的な側面の多くを取り上げています。 、関数の定義、ループの使用など。この記事は、前の記事が終了したところから始まり、その他の基本的な JavaScript 言語の概念を説明し、引き続き初心者に言語の基本的な理解を提供します。この記事で説明する基本は、使用するライブラリをより深く理解し、それらを使用するかどうかを決定する方法を知り、独自のライブラリを作成する勇気さえも与えてくれるでしょう。この記事全体を通じて、言語がそのさまざまな側面をどのように実装するかを示す例が提供されています。
イベント
イベントは、JavaScript 言語を使用して Web ページにあらゆるタイプのインタラクションを追加する触媒です。各 HTML 要素には、それをトリガーするために使用できるものが含まれています。 JavaScript コードに関連するイベント。たとえば、入力フィールドには多くのイベントが考えられます。誰かが入力フィールドをクリックするかジャンプしたときに JavaScript コードをトリガーするフォーカス イベントを関連付けたり、ブラー イベントを関連付けたりできます。誰かがフィールドの外側をクリックすると JavaScript コードがトリガーされます。フォーカスされた入力フィールド、またはフィールドから飛び出す。出来事を関連付けると、無限の可能性が現れます。たとえば、blur イベントは、入力フィールドのデータが有効かどうかをチェックする JavaScript コードをトリガーし、無効な場合は、インライン メッセージが自動フィードバックとして表示されます。次のコードは、focus イベントと Blur イベントを使用して入力フィールドにデフォルトのテキストを表示する方法の例を示しています。
onfocus="this.value = '';" onblur="if(this.value = = '')
this.value = 'メール アドレスを入力してください';"/>
ここの入力フィールドにはデフォルト値があるため、Web ブラウザでこのフィールドを表示すると、この入力フィールドにはテキストが表示されます「メールアドレスを入力してください。」誰かがフィールドをクリックするかフィールドにジャンプしたときにデフォルト値を消すには、focus イベントを使用してフィールド値を空の文字列に設定します。誰かが入力フィールドの外をクリックまたはジャンプした場合、blur イベントを使用してデフォルトのテキストが再度表示されます。これを行わないと、入力されたテキストが残ります。
各 HTML 要素には、それ自体に関連するイベントがあります。表 1 は、最も一般的な HTML 要素とそれに関連するイベントの一部を示しています。
表 1. 共通要素とその関連イベント
要素イベント
body onload、onunload
input onfocus、onblur、 onchange、onkeydown、onkeypress、onkeyup
form onsubmit
img onmouseover、onmouseout、onclick
try...キャッチ アンド スロー
try... catch ステートメントは、エラーをブラウザに送信したり、カスタム エラーを与えたりせずに、コード内のエラーを検出する方法を提供します。 JavaScript エラーが try...catch ステートメントに含まれていない場合、後続の JavaScript コードは実行できず、ブラウザーは独自の方法でエラーを処理および表示する必要があります。このステートメントの try 部分は JavaScript コードの実行に使用され、catch 部分は try 部分で発生する可能性のあるエラーを処理します。一部のブラウザーでは正しく動作しない可能性のあるコードを実行するときに、この構造を使用できます。この種のコードが try...catch ステートメント内に配置されている場合、エラーが返された場合、そのエラーは無視されるだけで実行されず、catch 部分がエラーを処理します。このエラーは、ユーザーがエラーの発生を知る必要があるかどうかに応じて、実際にはエラー メッセージを表示する場合もあれば、何も行わない場合もあります。
エラーを処理するには try...catch を使用します
ステートメントの catch 部分には、デフォルトのエラー オブジェクト パラメーターを含めることもできます。これは、ステートメントの try 部分に表示されるものと同じエラー オブジェクトを返します。ステートメントのエラー関連情報。エラー オブジェクトには、message と line の 2 つのプロパティがあります。 message によって提供されるテキストは、発生した正確なエラーを説明します。行には、エラーが発生した正確なコード行が示されます。リスト 1 は、エラー オブジェクトを使用してエラー メッセージと行番号を通知する try...catch ステートメントの例を示しています。もちろん、この種の情報はデバッグ モードでのみ役立ちますが、ブラウザの処理に依存せずに発生したエラーについてユーザーにフィードバックを提供したい場合、これらの属性は非常に重要になります。
リスト 1. try...catch ステートメントでエラー オブジェクトを使用してエラーをデバッグする
try
{
// ここでエラー コードを実行しようとしています
}
catch(err)
{
var txt = err .message 'n';
txt = err.line
}
throw ステートメントを使用してエラー例外を作成する
try...catch 構造は優れたエラー処理機能を提供しますが、さらに一歩進めて throw ステートメントを使用することもできます。 throw ステートメントを使用すると、特定の条件に基づいてエラー例外を作成できます。このアプローチは、正確で平易な言葉で説明された、よりユーザーフレンドリーなエラー メッセージを作成する最良の機会となります。リスト 2 は、throw ステートメントを使用して、try...catch ステートメントの try 部分に条件ベースのエラー例外を作成する方法の簡単な例を示しています。
リスト 2. throw ステートメントを使用してエラー例外を作成します