ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptの詳しい入門：3つの導入方法

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

WBOYオリジナル: 2022-08-03 16:39:233198ブラウズ

この記事では、javascript に関する関連知識を提供し、JavaScript の 3 つの導入方法 (インライン、埋め込みスタイル、外部スタイル) とその使用方法を詳しく紹介します。一緒に見てみましょう。みんなが助けてくれることを願っています。

[関連する推奨事項: JavaScript ビデオチュートリアル、Web フロントエンド ]

1 . 業界内導入方法

行内に記述し、各タグ内で個別に設定

開始タグのevent属性でjs関数を参照

(1) は、タグのイベント属性 (on で始まる属性) のうち、onclick [on イベントタイプ] などに記述されます。

推奨: HTML の場合は二重引用符、HTML の場合は一重引用符を使用します。 js

例:

<input>

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

##例は次のとおりです:

<html>
  <title>js样式内联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js内联写法01开始-->
    <!--当鼠标点击图片时跳出弹窗显示1223-->
    <div class="img">
    单击事件：
      <img  src="images/001.jpg" onclick="alert(1223)" alt="JavaScriptの詳しい入門：3つの導入方法" ></img>
    </div>
  <!--js内联写法01结束-->
  </body>
</html>

出力結果:

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

2. インラインインポート方法（内部インポート）

scriptタグ内に記述する

内部参照：scriptタグ内にjsコードを記述することで

#を使用します##script タグはページのどこにでも記述できます

#script タグは通常、本文の最後または本文の後に使用されます
#(1) はどこにでも記述できます;
head 上のスクリプトを参照する必要がある場合は、head に配置し、それ以外の場合は、head に配置するとブラウザのレンダリングに影響を与える可能性があるため、下部に配置します。。

<script>
    alert(&#39;Hello World!&#39;);
</script>

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

練習用

]

通常は自分で行いますプロジェクトは一番下に配置されますが、読み込み順序には影響せず、CSS ファイルと区別でき、ブラウザのレンダリングにも影響しません。他の場所に配置する場合は、 onload を使用して

例は次のとおりです:

<html>
  <title>js样式内联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <!--js内联写法02开始-->
  <div class="img">
    单击事件：
      <img  src="images/002.jpg" id=&#39;yuansu&#39; alt="JavaScriptの詳しい入門：3つの導入方法" ></img>
  </div>
  <!--js内联写法02结束-->
  </body>
  <script>
    //js代码
    //找到XX元素，一般给元素加id 
    yuansuojb=document.getElementById(&#39;yuansu&#39;);    
    //给xx元素加事件
    yuansuojb.onclick=function(){
      //代码段
      alert(1);
    }
    //触发事件
  </script>
</html>

出力結果:

# 3. 外部導入方法スクリプトタグ内にsrcを使用して外部ファイルを導入します

ステップ:

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

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

頻繁に使用される

]

href の代わりに src を使用します。例は次のとおりです。

js コードを次のように書き込みます。 .js ファイルを開き、次のように HTML で .html ファイルの内容を参照します。

<html>
  <title>js样式外联写法</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <body>
  <div class="img">
    外联写法--单击事件：
      <img  src="images/003.jpg" id=&#39;yuansu&#39; alt="JavaScriptの詳しい入門：3つの導入方法" ></img>
  </div>
  </body>
  <script src=&#39;js/index.js&#39;></script>
</html>

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

//js代码

//找到XX元素，一般给元素加id 
yuansuojb=document.getElementById(&#39;yuansu&#39;);    
//给xx元素加事件
yuansuojb.onclick=function(){
  //代码段
  var str="hello world !!!";
  alert(str);
}

出力結果:

#[関連する推奨事項:

JavaScript ビデオチュートリアル

、

Web フロントエンド

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