ホームページ > 記事 > ウェブフロントエンド > JavaScriptをHTMLにインポートする方法
JavaScriptをHTMLにインポートする方法
- 青灯夜游オリジナル
- 2021-10-14 13:54:4813503ブラウズ
JavaScript を HTML にインポートするには 2 つの方法があります: 1. "<script>js code</script>" ステートメントを使用して HTML ページに JavaScript コードを埋め込みます; 2. HTML で、src を使用しますscript タグのプロパティは外部 JavaScript スクリプト ファイルにインポートされます。
このチュートリアルの動作環境: 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 コードを入力します<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一个JavaScript程序</title> <script type="text/javascript"> document.write("<h1>PHP中文网：https://www.php.cn/</h1>"); </script> </head> <body></body> </html></pre><p>ステップ 5. Web ページのドキュメントを保存し、ブラウザでプレビューします。表示効果は次のようになります。形。 JavaScript スクリプトでは、 document は Web ページのドキュメント オブジェクトを表します。 document.write() は、Document オブジェクトの write() メソッドを呼び出して、現在の Web ページのソース コードに HTML 文字列を書き込むことを表します。"<h1>PHP中国語の Web サイト: https://www.php.cn/<p>"。 <code><p><img src="https://img.php.cn/upload/image/130/704/652/1634190316525013.png" title="1634190316525013.png" alt="JavaScriptをHTMLにインポートする方法"/>#2. 外部 JavaScript コード スクリプト ファイルを HTML ドキュメントに導入する<p><strong>JavaScript プログラムは、HTML ドキュメントに直接配置できるだけでなく、 JavaScript スクリプト ファイルに配置することもできます。 JavaScript スクリプト ファイルは、.js 拡張子が付いたテキスト ファイルで、任意のテキスト エディタを使用して編集できます。 一般的に使用されるテキスト エディタには、Windows システムのメモ帳、Linux システムの Vim、Sublime Text、Notepad などが含まれます。初心者の場合は、最初にテキスト エディターを使用して JavaScript コードを作成することをお勧めします。そうすることで、JavaScript の構文、キーワード、関数などを覚えることができます。実際の開発段階では、Visual Studio Code (「VS Code」と呼ばれます)、WebStorm (有料)、Atom など、よりプロフェッショナルなコード エディターを選択して、開発効率を向上させることができます。 <p>新しい JavaScript ファイルを作成する手順は次のとおりです。 <p>ステップ 1、新しいテキスト ファイルを作成し、test.js として保存します。拡張子は .js であることに注意してください。これは、テキスト ファイルが JavaScript タイプのファイルであることを示します。 <p>ステップ 2、test.js ファイルを開き、次の JavaScript コードを記述します。 <p><pre class="brush:js;toolbar:false;">alert("PHP中文网：https://www.php.cn/");</pre>ステップ 3、JavaScript ファイルを保存します。 JavaScript ファイルと Web ページ ファイルを同じディレクトリに置くことをお勧めします。上記のコードでは、alert() は Window オブジェクトのメソッドを表しており、このメソッドを呼び出すと、パラメータ文字列「Hi, JavaScript!」を表示するプロンプト ダイアログ ボックスがポップアップ表示されます。 <p>JavaScript ファイルは独立して実行できないため、Web ページにインポートし、ブラウザを通じて実行する必要があります。 JavaScript ファイルは、<script> タグを使用してインポートできます。 <p>ステップ 4、新しい HTML ドキュメントを作成し、test.html として保存します。 <p>ステップ 5、<head> タグ内に <script> タグを挿入します。 src 属性を定義し、その属性値を外部 JavaScript ファイルを指す URL 文字列に設定します。コードは次のとおりです: <p><pre class="brush:html;toolbar:false"><script type="text/javascript" src="test.js"></script></pre> ステップ 6. Web ページのドキュメントを保存し、ブラウザでプレビューすると、表示効果は図のようになります。注: <script> タグを使用して外部 JavaScript ファイルを含める場合、デフォルトのファイル タイプは JavaScript です。したがって、読み込まれたファイルの拡張子が .js であるかどうかに関係なく、ブラウザはそれを JavaScript スクリプトとして解析します。 <p><p><p>src 属性を定義する <script> タグには JavaScript コードを含めないようにする必要があります。コードが埋め込まれている場合、外部 JavaScript ファイルのみがダウンロードされて実行され、埋め込まれたコードは無視されます。 <img src="https://img.php.cn/upload/image/123/185/283/1634190484108956.png" title="1634190484108956.png" alt="JavaScriptをHTMLにインポートする方法"/>[推奨学習: <p>JavaScript 上級チュートリアル]<p></script>以上がJavaScriptをHTMLにインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
php JavaScript html 字符串 JS 对象 alert windows visual studio vim visual studio code sublime text webstorm https linux atom
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。