HTMLにスクリプトを追加する2つの方法と注意点

HTMLにスクリプトを追加する2つの方法と注意点
HTML に <script> スクリプトを追加する方法:

 1. HTMLにJavaScriptコードを直接追加できます

コードをコピー
コードは次のとおりです。

<script type="text/javascript">
//JavaScript コード
</スクリプト>

インタープリターが <script> コードを埋め込むと、HTML ページの処理も一時的に停止されます。

2. 外部jsファイルを追加する

コードをコピー
コードは次のとおりです。

<script type="text/javascript" src="外部 .js コードのアドレス"></script>

注記：
 ① XHTML文書では、</script>タグを省略することができます。例:

コードをコピー
コードは次のとおりです。

<script type="text/javascript" src="example.js" />

ただし、HTML では </script> タグを省略することはできません。このタグは HTML 仕様に準拠していないため、一部のブラウザでは正しく解析できません。

② <script> タグを </body> タグの前に置くと、ブラウザがページをより速く読み込むことができるようになります。

③<script>を使用してJavaScriptコードを埋め込む場合、コード内のどこにも「</script>」文字列が表示されないようにしてください。たとえば、ブラウザは次のコードを読み込むときにエラーを生成します。

コードをコピー
コードは次のとおりです。

<script type="text/javascript">
関数 function1(){
アラート("</script>");
}

埋め込みコードを解析するためのルールによれば、ブラウザは文字列 "</script>" に遭遇すると、それを </script> 終了タグであると認識するからです。コードに</script>文字列を追加したい場合は、<\/script>と記述します。

<<:  Dockerを使用してプライベートGitLabを構築する2つの方法

>>:  CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

推薦する

JavaScript 文字列の一般的なメソッドの詳細な説明

目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...

Vue での weixin-js-sdk の一般的な使用方法の詳細な説明

リンク: https://qydev.weixin.qq.com/wiki/index.php?ti...

CentOS システムでの JDK のインストールと設定の概要

目次序文OpenJDKの確認とアンインストールダウンロードした圧縮パッケージを使用してJDKをインス...

画像拡大鏡効果のJSバージョン

この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容...

MySQL 制約の種類と例

制約制約によりデータの整合性と一貫性が確保される制約はテーブルレベルの制約と列レベルの制約に分けられ...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

Dockerコアとインストールの具体的な使い方

1. Docker とは何ですか? （1）DockerはLinuxコンテナ内でアプリケーションを実行...

nginxで静的リソースを公開する方法

ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...

Reactのコンポーネント作成方法のまとめ

目次1. 関数を使用してコンポーネントを作成する2. クラスを使用してコンポーネントを作成する3. ...

Vue は水の波紋効果のクリックフィードバック指示を実装します

目次水波効果実装を見てみましょう水の波紋のデフォルトスタイルをカスタマイズする水の波紋の位置と直径を...

CSS継承方法

次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...

HTML チュートリアル: よく使われる HTML タグのコレクション (6)

導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...

HTML ページ内の js および css ファイルのキャッシュを自動的にクリーンアップします (バージョン番号を自動的に追加します)

Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...

ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...