JavaScriptをHTMLにインポートする方法-フロントエンドQ&A-php.cn

PHP中文网：https://www.php.cn/

PHP中国語の Web サイト: https://www.php.cn/

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptをHTMLにインポートする方法

青灯夜游

Oct 14, 2021 pm 01:54 PM

html javascript

JavaScript を HTML にインポートするには 2 つの方法があります: 1. "<script>js code</script>" ステートメントを使用して HTML ページに JavaScript コードを埋め込みます; 2. HTML で、src を使用しますscript タグのプロパティは外部 JavaScript スクリプトファイルにインポートされます。

JavaScriptをHTMLにインポートする方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

#JavaScript を HTML ドキュメントにインポートする方法

1. JavaScript コードを HTML ドキュメントに埋め込む # HTML ページに JavaScript スクリプトを埋め込むには、<script> タグを使用する必要があります。ユーザーは <script> タグに JavaScript コードを直接記述することができます。具体的な手順は次のとおりです。 </script>

ステップ 1、新しい HTML ドキュメントを作成し、test.html として保存します。

ステップ 2、

タグ内に <script> タグを挿入します。 <p>ステップ 3、<script> タグの type="text/javascript" 属性を設定します。 <p>最新のブラウザの <script> タグのデフォルトのスクリプトタイプは JavaScript であるため、type 属性は省略できます。以前のバージョンのブラウザとの互換性を考慮する場合は、type 属性を設定する必要があります。 <p>ステップ 4. <script> タグに JavaScript コードを入力します<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一个JavaScript程序</title> <script type="text/javascript"> document.write("<h1 id="PHP中文网-https-www-php-cn">PHP中文网：https://www.php.cn/</h1>"); </script> </head> <body></body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div><p>ステップ 5. Web ページのドキュメントを保存し、ブラウザでプレビューします。表示効果は次のようになります。形。 JavaScript スクリプトでは、 document は Web ページのドキュメントオブジェクトを表します。 document.write() は、Document オブジェクトの write() メソッドを呼び出して、現在の Web ページのソースコードに HTML 文字列を書き込むことを表します。"</p><h1 id="PHP中国語の-Web-サイト-https-www-php-cn">PHP中国語の Web サイト: https://www.php.cn/</h1><p>"。 <code></code></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/130/704/652/1634190316525013.png" class="lazy" title="1634190316525013.png" alt="JavaScriptをHTMLにインポートする方法"/>#2. 外部 JavaScript コードスクリプトファイルを HTML ドキュメントに導入する</p><p><strong>JavaScript プログラムは、HTML ドキュメントに直接配置できるだけでなく、 JavaScript スクリプトファイルに配置することもできます。 JavaScript スクリプトファイルは、.js 拡張子が付いたテキストファイルで、任意のテキストエディタを使用して編集できます。 </strong></p>一般的に使用されるテキストエディタには、Windows システムのメモ帳、Linux システムの Vim、Sublime Text、Notepad などが含まれます。初心者の場合は、最初にテキストエディターを使用して JavaScript コードを作成することをお勧めします。そうすることで、JavaScript の構文、キーワード、関数などを覚えることができます。実際の開発段階では、Visual Studio Code (「VS Code」と呼ばれます)、WebStorm (有料)、Atom など、よりプロフェッショナルなコードエディターを選択して、開発効率を向上させることができます。 <p></p>新しい JavaScript ファイルを作成する手順は次のとおりです。 <p></p>ステップ 1、新しいテキストファイルを作成し、test.js として保存します。拡張子は .js であることに注意してください。これは、テキストファイルが JavaScript タイプのファイルであることを示します。 <p></p>ステップ 2、test.js ファイルを開き、次の JavaScript コードを記述します。 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>alert("PHP中文网：https://www.php.cn/");</pre><div class="contentsignin">ログイン後にコピー</div></div></p>ステップ 3、JavaScript ファイルを保存します。 JavaScript ファイルと Web ページファイルを同じディレクトリに置くことをお勧めします。上記のコードでは、alert() は Window オブジェクトのメソッドを表しており、このメソッドを呼び出すと、パラメータ文字列「Hi, JavaScript!」を表示するプロンプトダイアログボックスがポップアップ表示されます。 <p></p>JavaScript ファイルは独立して実行できないため、Web ページにインポートし、ブラウザを通じて実行する必要があります。 JavaScript ファイルは、<script> タグを使用してインポートできます。 <p></p>ステップ 4、新しい HTML ドキュメントを作成し、test.html として保存します。 <p></p>ステップ 5、<head> タグ内に <script> タグを挿入します。 src 属性を定義し、その属性値を外部 JavaScript ファイルを指す URL 文字列に設定します。コードは次のとおりです: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script type="text/javascript" src="test.js"></script></pre><div class="contentsignin">ログイン後にコピー</div></div> ステップ 6. Web ページのドキュメントを保存し、ブラウザでプレビューすると、表示効果は図のようになります。注: <script> タグを使用して外部 JavaScript ファイルを含める場合、デフォルトのファイルタイプは JavaScript です。したがって、読み込まれたファイルの拡張子が .js であるかどうかに関係なく、ブラウザはそれを JavaScript スクリプトとして解析します。 <p><p><p>src 属性を定義する <script> タグには JavaScript コードを含めないようにする必要があります。コードが埋め込まれている場合、外部 JavaScript ファイルのみがダウンロードされて実行され、埋め込まれたコードは無視されます。 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/123/185/283/1634190484108956.png" class="lazy" title="1634190484108956.png" alt="JavaScriptをHTMLにインポートする方法"/>[推奨学習: <p>JavaScript 上級チュートリアル]<p></script>

以上がJavaScriptをHTMLにインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。