こんにちは世界！

著者：Eve Cole 更新時間：2025-01-14 17:45:51

チュートリアルのこの部分では、言語自体であるコア JavaScript について説明します。

ただし、スクリプトを実行するには作業環境が必要です。また、この本はオンラインであるため、ブラウザーが適しています。別の環境 (Node.js など) に集中する予定がある場合に、ブラウザー固有のコマンド ( alertなど) の量を最小限に抑えます。チュートリアルの次の部分では、ブラウザーの JavaScript に焦点を当てます。

まず、Web ページにスクリプトを添付する方法を見てみましょう。サーバー側環境 (Node.js など) の場合は、 "node my.js"のようなコマンドを使用してスクリプトを実行できます。

「スクリプト」タグ

<script>タグを使用すると、JavaScript プログラムを HTML ドキュメントのほぼどこにでも挿入できます。

例えば：

 <!DOCTYPE HTML>
<html>

<本文>

  <p>スクリプトの前...</p>

  <スクリプト>
    alert( 'こんにちは、世界!' );
  </script>

  <p>...スクリプトの後。</p>

</body>

</html>

上のボックスの右上隅にある「再生」ボタンをクリックすると、サンプルを実行できます。

<script>タグには、ブラウザがタグを処理するときに自動的に実行される JavaScript コードが含まれています。

外部スクリプト

大量の JavaScript コードがある場合は、それを別のファイルに入れることができます。

スクリプトファイルは、 src属性を使用して HTML に添付されます。

 <script src="/path/to/script.js"></script>

ここで、 /path/to/script.jsは、サイトルートからのスクリプトへの絶対パスです。現在のページからの相対パスを指定することもできます。たとえば、 src="script.js" 、 src="./script.js"と同様に、現在のフォルダー内のファイル"script.js"を意味します。

完全な URL も提供できます。例えば：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

複数のスクリプトを添付するには、複数のタグを使用します。

 <script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

ご注意ください：

原則として、最も単純なスクリプトのみが HTML に組み込まれます。より複雑なものは別のファイルに存在します。

別個のファイルの利点は、ブラウザがファイルをダウンロードしてキャッシュに保存することです。

同じスクリプトを参照する他のページは、スクリプトをダウンロードするのではなくキャッシュから取得するため、ファイルは実際には 1 回だけダウンロードされます。

これによりトラフィックが削減され、ページが高速になります。

srcが設定されている場合、スクリプトの内容は無視されます。

1 つの<script>タグ内にsrc属性とコードの両方を含めることはできません。

これは機能しません:

 <script src="file.js">
  アラート(1); // src が設定されているため、コンテンツは無視されます
</script>

外部<script src="…">またはコードを含む通常の<script>を選択する必要があります。

上記の例は、2 つのスクリプトに分割して動作させることができます。

 <script src="file.js"></script>
<スクリプト>
  アラート(1);
</script>

まとめ

<script>タグを使用して、JavaScript コードをページに追加できます。
typeとlanguage属性は必須ではありません。
外部ファイル内のスクリプトは<script src="path/to/script.js"></script>を使用して挿入できます。

ブラウザスクリプトと Web ページとの対話については、学ぶべきことがさらにたくさんあります。ただし、チュートリアルのこの部分は JavaScript 言語に特化しているため、ブラウザ固有の実装に気を取られるべきではないことに注意してください。 JavaScript を実行する方法としてブラウザを使用します。これはオンラインで読むのに非常に便利ですが、多くあるうちの 1 つにすぎません。

タスク

アラートを表示する

重要度: 5

「私は JavaScript です!」というメッセージを表示するページを作成します。

サンドボックスで実行するか、ハードドライブ上で実行するかは問題ではありません。動作することを確認するだけです。

新しいウィンドウでのデモ

<!DOCTYPE html>
<html>

<本文>

  <スクリプト>
    alert( "私は JavaScript です!" );
  </script>

</body>

</html>

サンドボックスでソリューションを開きます。

外部スクリプトを使用してアラートを表示する

重要度: 5

前のタスク「アラートを表示」の解決策を実行します。スクリプトの内容を同じフォルダーにある外部ファイルalert.jsに抽出して変更します。

ページを開いて、アラートが機能することを確認します。

HTML コード:

 <!DOCTYPE html>
<html>

<本文>

  <script src="alert.js"></script>

</body>

</html>

同じフォルダー内のファイルalert.jsの場合:

 alert("私は JavaScript です!");

こんにちは世界！

「スクリプト」タグ

最新のマークアップ

外部スクリプト

まとめ

タスク

アラートを表示する

外部スクリプトを使用してアラートを表示する