JavaScript入門と実践例

JavaScriptの基本的な用途

JavaScriptは主に以下の目的で使用されます。

  • フォームデータのクライアントサイド検証
  • ダイナミックなページエフェクトの作成

JavaScriptとは何か？

JavaScriptは、HTMLページにインタラクティブ性を追加するためのスクリプト言語です。この言語は、解釈型であり、コードが逐次実行される際にリアルタイムで処理されます。

JavaScriptの基本構造

<html>
  <head lang="ja">
    <meta charset="UTF-8">
    <title>JavaScript初体験</title>
  </head>
  <body>
    <script type="text/javascript">
      document.write("初めてのJavaScript");
      document.write("<h1>こんにちは、JavaScript</h1>");
    </script>
  </body>
</html>

<script type="text/javascript">
  let 実行文 = "これはJavaScript";
</script>

<a href="javascript:alert('こんにちは');">テストリンク</a>

<input type="button" onclick="alert('クリックされました');" value="テストボタン">

よく使う出力ステートメント

alert("最初のプログラム"); // アラートダイアログ
console.log("メッセージ表示"); // コンソール出力
document.write("<b>強調テキスト</b>"); // ドキュメントへの書き込み

let result = 220 + 230;
alert(result); // 結果：450

let isTrue = 22 > 33;
alert(isTrue); // 結果：false

関数の定義と呼び出し

function 加算(a, b) {
  return a + b;
}

alert(加算(10, 20)); // 結果：30

DOM操作の例

<body>
  <div id="sample">Hello</div>
  <script>
    const sampleDiv = document.getElementById('sample');
    alert(sampleDiv.innerHTML);
  </script>
</body>

ケーススタディ1：背景色の変更

<html>
  <head>
    <meta charset="UTF-8">
    <title>背景色変更</title>
    <script>
      function changeColor(colorStr) {
        document.body.style.backgroundColor = colorStr;
      }
    </script>
  </head>
  <body>
    <input type="button" value="赤色に変更" onclick="changeColor('red')">
    <input type="button" value="青色に変更" onclick="changeColor('blue')">
  </body>
</html>

ケーススタディ2：ユーザーデータの検証

<html>
  <head>
    <meta charset="UTF-8">
    <title>パスワード検証</title>
    <script>
      let pass = prompt('パスワードを入力してください:');
      if (pass === '654321') {
        alert('正しいパスワードです！');
      } else {
        alert('パスワードが間違っています！');
      }
    </script>
  </head>
  <body></body>
</html>

タグ: javascript DOM操作 イベントハンドリング フォーム検証

6月1日 22:33 投稿

ホットタグ

©2026 異端開発室