フリー検定

本サイトは広告により収益を得ています

Chapter 3: Webページに動きをつける - JavaScriptの基礎

Chapter 3: Webページに動きをつける - JavaScriptの基礎

2025年09月20日
フリー検定
広告

目次

現在: 4 / 6
  1. 1. はじめに：Webサイト制作の基本をマスターしよう
  2. 2. Chapter 1: Webページの骨組みを作る - HTMLの基礎
  3. 3. Chapter 2: Webページを彩る - CSSの基礎
  4. 4. Chapter 3: Webページに動きをつける - JavaScriptの基礎 閲覧中
  5. 5. Chapter 4: 実践演習：ミニWebサイト制作
  6. 6. まとめ：スタンダード検定取得に向けて
ITエンジニア フロントエンドエンジニア AYCFフロントエンドエンジニア-スタンダード

フロントエンドエンジニアに関する検定はこちら

面倒な会員登録も不要！すぐに受験！

無料で受験する

HTMLで骨組みを作り、CSSで装飾したWebページに、命を吹き込むのがJavaScriptの役割です。JavaScriptはWebブラウザ上で動作するプログラミング言語で、ユーザーの操作に応じてページの内容を動的に変更したり、複雑な計算を実行したりすることができます。

JavaScriptの役割と記述方法

JavaScriptは、Webページをインタラクティブにします。例えば、ボタンをクリックしたときにアラートを表示したり、入力フォームの内容を検証したり、スライドショーを動かしたりする機能は、すべてJavaScriptによって実現されています。

JavaScriptのコードは、HTMLファイルの**<script>タグ内**に記述します。一般的には、ページの読み込みが完了してから実行されるように、<body>タグの閉じタグの直前に配置することが推奨されています。

HTML

<body>
  <button id="myButton">クリック</button>
  <script>
    // ここにJavaScriptのコードを記述
  </script>
</body>

変数、データ型、演算子

プログラミングの基本となるのが、情報を一時的に保存しておく変数です。JavaScriptでは、letやconstを使って変数を宣言します。

  • let: 後から値を変更できる変数を宣言します。

  • const: 一度値を設定したら変更できない定数を宣言します。

JavaScript

let message = 'こんにちは！'; // 文字列
const year = 2024; // 数値
const isStudent = true; // 論理値（真偽値）

演算子は、変数や値に対して計算や比較を行います。

  • 算術演算子: +, -, *, /

  • 比較演算子: ==, ===（厳密な比較）、>, <, >=など

  • 代入演算子: =

制御構文：条件分岐と繰り返し

Webページに動きをつけるためには、状況に応じて処理を変えたり、同じ処理を繰り返したりする制御構文が不可欠です。

  • 条件分岐（if/else）: 特定の条件が満たされたときに処理を実行します。

JavaScript

if (score >= 60) {
  alert('合格です！');
} else {
  alert('不合格です。');
}

  • 繰り返し（for）: 指定した回数だけ処理を繰り返します。

JavaScript

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4 と表示
}

関数とイベントリスナーの基本

  • 関数: 特定の処理をひとまとまりにしたものです。同じ処理を何度も使う場合に便利です。

JavaScript

function greet(name) {
  return 'こんにちは、' + name + 'さん！';
}
const greetingMessage = greet('山田');

  • イベントリスナー: ユーザーがクリック、マウスオーバー、キー入力などのイベントを発生させたときに、特定の関数を実行するための仕組みです。

JavaScript

const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

DOM操作の基礎

JavaScriptの最も強力な機能の一つがDOM（Document Object Model）操作です。DOMは、HTML文書をツリー構造として扱うための仕組みで、JavaScriptはこのツリーを操作することで、HTML要素の内容を変更したり、新しい要素を追加・削除したりできます。

  • 要素の取得: document.getElementById('id名')やdocument.querySelector('セレクタ')を使って、操作したい要素を取得します。

  • 内容の変更: 取得した要素の.textContentや.innerHTMLプロパティを使って、テキストやHTMLを変更します。

練習課題： 前章で作成したWebページに、以下のJavaScript機能を追加してみましょう。

  1. ボタンをクリックすると、ページ内のテキストが変更されるようにする。

  2. フォームに名前を入力してボタンを押すと、「こんにちは、〇〇さん！」とアラートが表示されるようにする。

次の章では、これまでの知識を総動員して、一つのミニWebサイトを完成させる実践的な演習に取り組みます。

フロントエンドエンジニアに関する検定はこちら

面倒な会員登録も不要！すぐに受験！

無料で受験する
前の記事 Chapter 2: Webページを彩る - CSSの基礎 次の記事 Chapter 4: 実践演習：ミニWebサイト制作
広告

検定一覧はこちらから

様々なジャンルの検定から選んで、あなたの知識を試してみましょう。

検定一覧を見る

関連記事

広告