ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript コードを使用するにはいくつかの方法があります

JavaScript コードを使用するにはいくつかの方法があります

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-06-10 11:10:012910ブラウズ

JavaScript コードを使用するには 2 つの方法があります: 1. 直接実行: Web ページが開かれると、スクリプト タグまたはリンクされた js ファイルで定義されたすべての JavaScript コードが実行されます; 2. イベント ドライバー、特定のイベントが発生すると、特定の JavaScript コードが実行されます。

JavaScript コードを使用するにはいくつかの方法があります

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

[JavaScript の実行方法]

HTML 文書内に定義された JavaScript コードには、直接実行とイベント駆動の 2 つの実行方法があります。

直接実行:

Web ページを開くと、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグまたはリンクされた js ファイルで定義されたすべての JavaScript コードが実行されます。 。

function で定義された関数は実行されないことに注意してください。関数は、関数呼び出しが発生した場合にのみ実行されます。

例 1:

<script type="text/javascript">
var d = new Date();
var m = d.getMonth();
if( m>=5 )
document.write( m );
</script>

上記の JavaScript コードは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ内に裸で配置されており、Web ページが開かれるとすぐに実行されます。

例 2:

<script type="text/javascript">
function getM()
{
var d = new Date();
var m = d.getMonth();
if( m>=5 )
document.write( m );
}
</script>
以上JavaScript代码定义的是函数,当网页打开时,函数中的代码不会被执行。当需要执行该函数时,需要使用函数调用。
<script type="text/javascript">
getM();
</script>

イベント駆動型:

Web ページが開かれる、マウスのクリック、ダブルクリックなどして、JavaScript コードを実行します。

例:

<script type="text/javascript">
var count = 0;
function setCount()
{
count++;
if( count>=5 )
count = 0;
}
</script>
<button onclick="setCount()">计数</button>

この例では、bb9345e55eb71822850ff156dfde57c8 タグでボタンを定義し、onclick 属性を使用してマウス クリック イベントに応答します。マウスを使用して、setCount() 関数を実行します。

タグ内のイベントに応答する属性はイベント ハンドラーと呼ばれ、その値は JavaScript コードです。

共通イベント ハンドル:

onload:

Web ページが開かれたときにトリガーされます。これは、6c04bd5ca3fcae76e30b72ad730ca86d タグと f900b4fc197b16ab214eecf015bb6bd2 タグ内でのみ有効です。

このイベントは通常、いくつかの初期化操作を実行するために使用されます。

onunload:

Web ページが閉じられるとトリガーされます。これは、6c04bd5ca3fcae76e30b72ad730ca86d タグと f900b4fc197b16ab214eecf015bb6bd2 タグ内でのみ有効です。

このイベントは通常、仕上げ作業を完了するために使用されます。

onclick:

マウスのクリック時にトリガーされます。コントロール、画像、テキスト、ハイパーリンクなどのオブジェクトに使用できます。

このイベントは、マウスのクリック操作に応答するために使用され、最も一般的に使用されるイベント ハンドラーです。

ondblclick:

マウスがダブルクリックされるとトリガーされます。コントロール、画像、テキスト、ハイパーリンクなどのオブジェクトに使用できます。

このイベントは、マウスのダブルクリック操作に応答するために使用されます。

onchange:

コンテンツが変更されるとトリガーされます。テキストボックスやリストボックスなどのオブジェクトに使用できます。

このイベントは通常、テキスト ボックス内のコンテンツを変更するユーザーの操作に応答するために使用されます。

説明: ユーザーがテキスト ボックスにテキストを入力すると、onchange イベントはトリガーされません。このイベントは、ユーザーが入力完了後にテキスト ボックスの外側の領域をクリックした場合にのみトリガーされ、テキストがフォーカスを失うボックスがあります。

onselect:

コンテンツが選択されるとトリガーされます。テキストボックスやリストボックスなどのオブジェクトに使用できます。

このイベントは通常、ユーザーがテキスト ボックス内のコンテンツを選択したり、リスト ボックス内の選択された項目を変更したりするなどの操作に応答するために使用されます。

上記は、最も一般的に使用されるイベント ハンドラーのほんの一部です。

注: イベント ハンドラーは JavaScript コードではなく HTML 属性であるため、大文字と小文字は区別されませんが、小文字で記述する習慣を身に付ける必要があります。

拡張情報:

[JavaScript 定義方法]:

HTML 文書に JavaScript コードを追加するには、埋め込み方法とリンク方法の 2 つの方法があります。 。

埋め込み:

JavaScript コードを HTML ドキュメントに埋め込みます。メソッド:

<script type="text/javascript">
JS代码
</script>

JavaScript コードは 3f1c4e4b6b16bbbd69b2ee476dc4f83a と 2cacc6d41bbb37262a98f745aa00fbf0 の間に定義する必要があります。

3f1c4e4b6b16bbbd69b2ee476dc4f83a タグはヘッド領域またはボディ領域に配置できます。

HTML ドキュメントでは、JavaScript コードを複数の場所に出現させることができ、各場所を 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグで囲む必要があります。

リンクイン:

JavaScript コードをテキスト ファイルに配置します。ファイル拡張子は .js として定義する必要があります。次のタグを HTML ドキュメントに追加します:

<script type="text/javascript" src="js文件"></script>

src 属性は、リンクされた js ファイルのアドレスを指定するために使用されます。ローカル ファイルまたは URL を指定できます。

リンクを使用すると、定義された JavaScript コードを複数の Web ページで共有できます。

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScript コードを使用するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。