JavaScriptの基本とHTMLとの連携方法

JavaScript概要

JavaScriptは主にクライアントサイドで動作するスクリプト言語で、主な用途はページ内のデータ検証です。ブラウザがJavaScriptコードを解釈して実行します。

JavaScriptは元々Netscape社によって開発され、当初はLiveScriptと呼ばれていました。Javaプログラマーを惹きつけるため、JavaScriptに改名されました。

JavaScriptは動的型付け言語であり、Javaは静的型付け言語です。

特徴

  • インタラクティブ性(情報の動的なやり取りが可能)
  • セキュリティ(ローカルハードディスクへの直接アクセスを禁止)
  • クロスプラットフォーム性(JavaScriptを解釈できるブラウザならどのプラットフォームでも実行可能)

JavaScriptとHTMLの連携方法

方法1:直接記述

headタグまたはbodyタグ内でscriptタグを使用してJavaScriptコードを直接記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript直接記述</title>
  <script type="text/javascript">
    //alertはJavaScriptが提供するアラート関数
    alert("こんにちは、JavaScript!");
  </script>
</head>
<body>
  <p>このページにはJavaScriptが埋め込まれています。&p>
</body>
</html>

方法2:外部ファイルとして読み込み

JavaScriptコードを外部ファイルに保存し、HTMLから参照します。

まず、外部JavaScriptファイルを作成します(example.js):

// example.jsファイルの内容
function showGreeting() {
  alert("外部ファイルからのメッセージ: こんにちは!");
}

// ページ読み込み時に実行
window.onload = showGreeting;

次に、HTMLファイルでこのJavaScriptファイルを参照します:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>外部ファイル読み込み</title>
  <script type="text/javascript" src="example.js"></script>
</head>
<body>
  <p>外部JavaScriptファイルが読み込まれました。&p>
</body>
</html>

注意点

scriptタグ内で直接記述と外部ファイルの読み込みを同時に使用することはできません。必要であれば、複数のscriptタグを使用してください。

<script type="text/javascript">
  alert("直接記述されたJavaScript");
</script>

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

タグ: javascript HTML クライアントサイド スクリプト言語 Web開発

7月24日 01:03 投稿