JavaScript: HTML へのスクリプト埋め込み方法

はじめに

初めての JavaScript 実験へようこそ！JavaScript は、ウェブページに動的でインタラクティブなコンテンツを作成できる強力なスクリプト言語です。これなしでは、ウェブページは静的で、はるかに魅力に欠けるものになってしまいます。

この実験では、ウェブページに JavaScript を含めるための 2 つの基本的な方法を学びます。

内部 JavaScript: HTML ファイル内の <script> タグ内に直接コードを記述します。
外部 JavaScript: コードを別の .js ファイルに配置し、それを HTML ファイルにリンクします。

基本的な HTML ページから始め、徐々に JavaScript の機能を追加していきます。「Web 8080」タブを使用してリアルタイムで変更をプレビューしながら、ファイルを編集するために組み込みの WebIDE を使用します。始めましょう！

script タグを使用した HTML ファイルの作成

このステップでは、HTML ファイルに内部 JavaScript ブロックを追加します。セットアッププロセスにより、~/project ディレクトリに index.html ファイルが既に作成されています。JavaScript コードブロックを宣言する標準的な方法である <script> タグを、このファイルに追加します。

まず、WebIDE の左側にあるファイルエクスプローラーで index.html ファイルを見つけ、ダブルクリックして開きます。

次に、閉じられる </body> タグの直前に空の <script> タグを追加します。これは推奨される方法です。これにより、ブラウザが JavaScript の実行を開始する前に HTML コンテンツが解析され、ユーザーに表示されるため、ページの読み込み時間の体感が向上します。

index.html ファイルは以下のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

変更を加えたら、ファイルを保存してください（Ctrl+S または Cmd+S を使用できます）。

HTML file with script tag added

Hello World を出力する console.log を記述する

JavaScript を記述する場所ができたので、最初のコード行を追加しましょう。console.log() 関数を使用します。これは、ブラウザの開発者コンソールにメッセージを出力できるため、あらゆる JavaScript 開発者にとって基本的なツールです。デバッグやコードの実行状況を理解するのに非常に役立ちます。

index.html ファイルの、前のステップで作成した <script> タグ内に console.log('Hello World'); を追加してください。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

ファイルを保存したら、結果を確認しましょう。

LabEx インターフェースの上部にある Web 8080 タブをクリックします。
<h1> の見出しが表示されます。コンソール出力を確認するには、ページ上のどこかを右クリックして「検証」を選択します。
新しいパネルが開きます。このパネルの「コンソール」タブをクリックします。
コンソールに Hello World というメッセージが出力されているはずです。

Console output showing Hello World

src 属性を使用して外部 JavaScript ファイルをリンクする

内部スクリプトは簡単なタスクには適していますが、JavaScript は別のファイルに保持するのがベストプラクティスです。これにより、コードがより整理され、管理しやすく、異なる HTML ページ間で再利用可能になります。

このステップでは、コードを script.js という名前の外部ファイル（既に作成済みです）に移動し、それを index.html にリンクします。

まず、index.html ファイルを変更します。<script> タグの間にある console.log 行を削除し、外部ファイルを参照するように、開始 <script> タグに src 属性を追加します。

index.html は以下のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script src="script.js"></script>
  </body>
</html>

次に、ファイルエクスプローラーから script.js ファイルを開きます。現在は空です。同じ console.log ステートメントをこのファイルに追加します。

script.js ファイルにはこの行のみが含まれるはずです。

console.log("Hello World");

両方のファイルを保存します。Web 8080 タブに戻ってページをリフレッシュすると、コンソールには全く同じ結果が表示されます。ブラウザは index.html を読み込み、<script src="script.js"> タグを認識し、次に script.js の内容を取得して実行します。

ポップアップメッセージ用の alert 関数を追加する

コンソールへのログ出力に加えて、JavaScript はユーザーとより直接的に対話することができます。その最も簡単な方法の 1 つが alert() 関数です。これは、ユーザーにポップアップメッセージボックスを表示します。

スクリプトにアラートを追加しましょう。script.js ファイルを開き、ウェルカムアラートを作成するための新しいコード行を追加します。

script.js ファイルは以下のようになります。

console.log("Hello World");
alert("Welcome to JavaScript!");

alert() 関数は、ユーザーがポップアップボックスの「OK」をクリックするまで、スクリプトの実行とページのレンダリングを一時停止します。これは、重要な情報を伝えるための非常に直接的な方法です。

script.js ファイルを保存します。次のステップでその効果を確認します。

ブラウザをリフレッシュしてスクリプトを実行する

これで、コンソールログとアラートの両方を外部 JavaScript ファイルに追加しました。最終結果を確認する時が来ました。

Web 8080 タブに戻ります。

script.js ファイルに行った変更を確認するには、ブラウザタブをリフレッシュする必要があります。これにより、ブラウザは HTML と、更新されたスクリプトを含むリンクされたファイルを再ダウンロードするよう指示されます。

リフレッシュすると、「Welcome to JavaScript!」というメッセージが表示されたポップアップボックスがすぐに表示されるはずです。

「OK」をクリックすると、ポップアップが消え、ページの残りの部分が読み込まれます。開発者コンソールを再度開くと（右クリック -> 検証 -> コンソール）、そこにはまだ「Hello World」というメッセージがログとして表示されているのがわかります。これは、スクリプト内の実行順序を示しています。

おめでとうございます。内部および外部の両方の方法を使用して、Web ページに JavaScript を正常に埋め込むことができました！

まとめ

この実験では、JavaScript を使用した Web スクリプティングの世界に最初の一歩を踏み出しました。Web プロジェクトに JavaScript を含めるというコアコンセプトについて実践的な経験を積みました。

以下のことを学びました。

<script> タグを使用して、JavaScript を HTML ファイルに直接追加する方法。
console.log() を使用して、デバッグのためにブラウザの開発者コンソールにメッセージを出力する方法。
コードを外部 .js ファイルに分離する利点。
<script> タグの src 属性を使用して、外部 JavaScript ファイルを HTML にリンクする方法。
alert() 関数を使用して、ユーザー向けのポップアップメッセージを作成する方法。

この基礎は、より複雑でインタラクティブな Web アプリケーションを構築するために不可欠です。実験を続け、学んだことをさらに発展させていきましょう！

JavaScript の紹介と埋め込み