ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScriptの詳しい入門：3つの導入方法

著者：Eve Cole 更新時間：2022-08-05 09:45:24
この記事では、JavaScript の 3 つの導入方法であるインライン、埋め込みスタイル、外部スタイルとその使用方法について詳しく紹介し、JavaScript に関する関連知識を紹介します。ぜひ参考にしてください。 。

1.

行内に

インライン導入方法

を記述し、各タグを個別に設定します。

タグのevent属性(onで始まる属性)

に、(1)の開始タグのevent属性でjsを参照する機能

を記述します。

例: onclick [on+ イベント タイプ]

推奨事項: HTML には二重引用符を使用し、js には単一引用符を使用します。

例:

<input type="button" value="Click me to open the world" onclick="alert('Hello World' )" />

注: JS でのインライン導入 では重みを増やす概念が使用されていないため、一般的には使用されません [基本的に使用されません]。

例は次のとおりです。

 <html>
  <title>JS スタイルのインライン記述</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <本文>
  <!--JSのインライン記述方法は01から始まります-->
    <!--マウスで画像をクリックすると、ポップアップ ウィンドウが表示され、1223 が表示されます-->
    <div class="img">
    クリックイベント:
      <img src="images/001.jpg" onclick="alert(1223)"></img>
    </div>
  <!--JSインライン記述方法01終了-->
  </body>
</html>

出力結果:

+1.gif

2. 組み込み導入方式（社内導入）

scriptタグに書かれている

内部参照: scriptタグにjsコードを記述することで使用されます。

  • script タグはページ上のどこにでも記述できます

  • script タグは通常、本文の最後または本文の後に使用されます。

（１）どこにでも書ける。

先頭にあるスクリプトを参照する必要がある場合は先頭に配置し、それ以外の場合は最後に配置します。先頭に配置するとブラウザのレンダリングに影響を与える可能性があるためです。

 <スクリプト>
    アラート('Hello World!');
</script>

注: 一般に、自分で演習を作成する場合、面倒で js ファイルをセットアップしたくない場合は [練習用] を使用します。

通常、独自のプロジェクトで作業する場合は、読み込み順序には影響せず、CSS ファイルと区別できます。また、他の場所に配置する場合は、onload を使用するのが最適です。

例は次のとおりです。

 <html>
  <title>JS スタイルのインライン記述</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <本文>
  <!--02から始まるjsインライン書き込み-->
  <div class="img">
    クリックイベント:
      <img src="images/002.jpg" id='yuansu'></img>
  </div>
  <!--jsインライン記述方法02終了-->
  </body>
  <スクリプト>
    //js コード//XX 要素を検索し、通常は要素に ID を追加します 
    yuansuojb=document.getElementById('yuansu');    
    //イベントyunsuojb.onclick=function(){をxx要素に追加
      //コードセグメントアラート(1);
    }
    // イベントをトリガーする</script>
</html>

出力結果:

+2.gif

3. 外部導入方法

scriptタグ内でsrcを使用して外部ファイルを導入します

ステップ：

  • 独立した js ファイルを作成する

  • ページ内の script タグを通じて参照される

(1) スクリプト内に外部JSファイルを導入するコードは記述できません

(2) HTML ページのコード構造を使用して、HTML ページの外側で複数の JS コードを分離します。これは美しく、ファイルの再利用に便利です。

 <script src="main.js"></script>

注: インライン スタイルと同様に、スタイルを下部と先頭に配置するかどうかは、ケースバイケースで検討する必要があります [よく使用されます]

hrefではなくsrcを使用してください

例は次のとおりです。

js コードを .js ファイルに記述し、HTML で引用します。

.html ファイルの内容は次のとおりです。

 <html>
  <title>JS風外部リンクの書き方</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <本文>
  <div class="img">
    外部リンクの書き込み -- クリック イベント:
      <img src="images/003.jpg" id='yuansu'></img>
  </div>
  </body>
  <script src='js/index.js'></script>
</html>

.js ファイルの内容は次のとおりです。

 //js コード//XX 要素を検索し、通常は要素に ID を追加します 
yuansuojb=document.getElementById('yuansu');    
//イベントyunsuojb.onclick=function(){をxx要素に追加
  //コードセグメント var str="hello world!!!";
  アラート(文字列);
}

出力結果:

+3.gif

関連記事