埋め込みJavaScriptと外部リンクの基本的な応用方法

埋め込みJavaScriptと外部リンクの基本的な応用方法

埋め込みJavaScriptと外部リンクの基本的な応用

js言語はhtml言語に完全に配置できます

しかし、状況に応じて、埋め込みリンクと外部リンクに分けることができます。

jsコードが少ない場合は、埋め込み方式を使用して、<script></script>タグと関連属性を通じてJavaScriptを直接導入できます。

<!DOCTYPE html>
<html>
<スクリプト>
document.write("<h1>これは見出しです</h1>");
document.write("<p>これは段落です。</p>");
</スクリプト>
<本文>
 
</本文>
</html>

ただし、大規模なプロジェクトや JavaScript コードが大量にある場合は、外部リンクを使用する必要があります。

外部リンクを使用する場合は、まず新しい.jsファイルを作成する必要があります。

<!DOCTYPE html>
<html>
<script type="text/javascript" src="1245.js">
</スクリプト>
<本文>
 
</本文>
</html>

1245.jsファイルに記述する必要があるJavaScriptコードを配置します。

JavaScript の記述方法には、インライン、埋め込み、外部リンクの 3 つがあります。

1. インライン

HTML タグの属性では、動作によって実行がトリガーされます。(あまり使用されません)

ここに画像の説明を挿入

2. 埋め込み

スクリプト タグを使用して HTML ファイル内にラップすると、ページを開いたときに自動的に実行されます。 (使い方は簡単ですが、大量の JS コードでは使用しないでください。)

ここに画像の説明を挿入

3. 外部リンク

別の js ファイルに記述され、script タグの src 属性を使用して html ファイルに導入され、ページが開かれたときに自動的に実行されます。 (最適化方法がいろいろあるのでおすすめ)

ここに画像の説明を挿入

ここに画像の説明を挿入

: 業界ではほとんど使用されず、ほとんど使用されません。インラインリンクと外部リンクは同じスクリプトタグを共有できません。外部リンクのスクリプトタグは原則どこにでも配置できます。外部リンクのスクリプト属性は srcであり、 href でも href でも href でもありません...

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript は動的にスタイルを追加します (インライン/埋め込み/外部リンク ルールなど)
  • js 内の要素の外部リンク スタイルを取得する簡単な方法
  • js で要素の外部リンク スタイルを取得する方法

<<:  flexとは何か、flexレイアウト構文の詳細なチュートリアル

>>:  MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法

推薦する

docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析

この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

カルーセル効果を書くためのjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

Vue.js で AntV X6 を使用する手順の例

目次0x0 はじめに0x1 インストール0x2 ノードサイドバー0x3 統合例0x0 はじめにプロジ...

WHMCS V7.4.2 グラフィカル インストール チュートリアル

1. はじめにWHMCS は、ユーザー管理、請求書の支払い、ヘルプ サービスなど、オンライン ビジネ...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

JSONデータをHTMLで表示する方法

背景:場合によっては、json データをページに直接表示する必要があります (たとえば、インターフェ...

MySQLのあいまいクエリインデックスの失敗の問題を解決するいくつかの方法

% ワイルドカードを使用すると、インデックス失敗の問題が発生することがよくあります。ここでは、lik...

MySQLは複数テーブル関連統計(サブクエリ統計)の例を実装します

この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...

Vue3.0はドロップダウンメニューのカプセル化を実装します

Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...

MacOS での MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル

この記事では、MacOSでのMySQL 8.0.18のインストールと成功したコマンドライン操作を記録...

モバイルデバイス Web 開発における HTML ヘッドの書き方

コードをコピーコードは次のとおりです。 <ヘッド> <meta http-equi...

Zabbixで電子メールアラートを実装する方法

オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...

Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル

1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...