JavaScript コードを使用するには 2 つの方法があります: 1. 直接実行: Web ページが開かれると、スクリプト タグまたはリンクされた js ファイルで定義されたすべての JavaScript コードが実行されます; 2. イベント ドライバー、特定のイベントが発生すると、特定の JavaScript コードが実行されます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
[JavaScript の実行方法]
HTML 文書内に定義された JavaScript コードには、直接実行とイベント駆動の 2 つの実行方法があります。
直接実行:
Web ページを開くと、<script> タグまたはリンクされた js ファイルで定義されたすべての JavaScript コードが実行されます。 。 </p> <p>function で定義された関数は実行されないことに注意してください。関数は、関数呼び出しが発生した場合にのみ実行されます。 </p> <p>例 1:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> var d = new Date(); var m = d.getMonth(); if( m>=5 ) document.write( m ); </script></pre><div class="contentsignin">ログイン後にコピー</div></div><p>上記の JavaScript コードは、<script> タグ内に裸で配置されており、Web ページが開かれるとすぐに実行されます。 </p><p>例 2: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><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></pre><div class="contentsignin">ログイン後にコピー</div></div><p><code>イベント駆動型: </code></p><p>Web ページが開かれる、マウスのクリック、ダブルクリックなどして、JavaScript コードを実行します。 </p><p>例: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> var count = 0; function setCount() { count++; if( count>=5 ) count = 0; } </script> <button onclick="setCount()">计数</button></pre><div class="contentsignin">ログイン後にコピー</div></div><p>この例では、<button> タグでボタンを定義し、onclick 属性を使用してマウス クリック イベントに応答します。マウスを使用して、setCount() 関数を実行します。 </p><p>タグ内のイベントに応答する属性はイベント ハンドラーと呼ばれ、その値は JavaScript コードです。 </p><p><span style="font-size: 16px;"><strong>共通イベント ハンドル: </strong></span></p><p><strong>onload: </strong></p><p>Web ページが開かれたときにトリガーされます。これは、<body> タグと <frameset> タグ内でのみ有効です。 </p><p>このイベントは通常、いくつかの初期化操作を実行するために使用されます。 </p><p><strong>onunload: </strong></p><p>Web ページが閉じられるとトリガーされます。これは、<body> タグと <frameset> タグ内でのみ有効です。 </p><p>このイベントは通常、仕上げ作業を完了するために使用されます。 </p><p><strong>onclick: </strong></p><p>マウスのクリック時にトリガーされます。コントロール、画像、テキスト、ハイパーリンクなどのオブジェクトに使用できます。 </p><p>このイベントは、マウスのクリック操作に応答するために使用され、最も一般的に使用されるイベント ハンドラーです。 </p><p><strong>ondblclick: </strong></p><p>マウスがダブルクリックされるとトリガーされます。コントロール、画像、テキスト、ハイパーリンクなどのオブジェクトに使用できます。 </p><p>このイベントは、マウスのダブルクリック操作に応答するために使用されます。 </p><p><strong>onchange: </strong></p><p>コンテンツが変更されるとトリガーされます。テキストボックスやリストボックスなどのオブジェクトに使用できます。 </p><p>このイベントは通常、テキスト ボックス内のコンテンツを変更するユーザーの操作に応答するために使用されます。 </p><p>説明: ユーザーがテキスト ボックスにテキストを入力すると、onchange イベントはトリガーされません。このイベントは、ユーザーが入力完了後にテキスト ボックスの外側の領域をクリックした場合にのみトリガーされ、テキストがフォーカスを失うボックスがあります。 </p><p><strong>onselect: </strong></p><p>コンテンツが選択されるとトリガーされます。テキストボックスやリストボックスなどのオブジェクトに使用できます。 </p><p>このイベントは通常、ユーザーがテキスト ボックス内のコンテンツを選択したり、リスト ボックス内の選択された項目を変更したりするなどの操作に応答するために使用されます。 </p><p>上記は、最も一般的に使用されるイベント ハンドラーのほんの一部です。 </p><p>注: イベント ハンドラーは JavaScript コードではなく HTML 属性であるため、大文字と小文字は区別されませんが、小文字で記述する習慣を身に付ける必要があります。 </p><p><strong>拡張情報: </strong></p><p>[JavaScript 定義方法]:</p><p>HTML 文書に JavaScript コードを追加するには、埋め込み方法とリンク方法の 2 つの方法があります。 。 </p><p>埋め込み: </p><p>JavaScript コードを HTML ドキュメントに埋め込みます。メソッド: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> JS代码 </script></pre><div class="contentsignin">ログイン後にコピー</div></div><p>JavaScript コードは <script> と </script> の間に定義する必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
