1.3 Java Script

JavaScript入門: ウェブページにインタラクティブ性を追加する #

1. JavaScriptとは #

JavaScriptは、ウェブページにインタラクティブ性を追加するためのプログラミング言語です。HTMLとCSSで構築された静的なウェブページに動的な要素を追加することができます。JavaScriptはクライアントサイドで実行されるため、ユーザーのブラウザ上で動作し、サーバーへの負荷を軽減します。

2. JavaScriptの基本構文 #

JavaScriptの基本構文は他のプログラミング言語と共通点が多いです。以下は、変数宣言、関数定義、条件分岐、繰り返し処理などの基本的な構文を紹介します。

2.1 変数宣言 #

JavaScriptでは、let や const を使って変数を宣言します。

let age = 30;
const pi = 3.14;

2.2 関数定義 #

JavaScriptで関数を定義する方法はいくつかありますが、以下は一般的な方法です。

function add(a, b) {
  return a + b;
}

const multiply = function (a, b) {
  return a * b;
};

const subtract = (a, b) => {
  return a - b;
};

2.3 条件分岐 #

JavaScriptで条件分岐を行うには、if 文を使用します。

let score = 85;

if (score >= 90) {
  console.log("Excellent");
} else if (score >= 80) {
  console.log("Good");
} else {
  console.log("Try harder");
}

2.4 繰り返し処理 #

JavaScriptで繰り返し処理を行うには、for ループや while ループを使用します。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

3. イベントハンドラとDOM操作 #

JavaScriptを使ってウェブページのインタラクティブ性を追加する際、イベントハンドラとDOM操作は重要な要素です。

3.1 イベントハンドラ #

イベントハンドラは、ユーザーがウェブページでアクションを起こしたときに実行される関数です。例えば、以下のコードでは、ボタンがクリックされたときに alert が表示されます。

<button id="myButton">Click me!</button>

<script>
  document.getElementById("myButton").addEventListener("click", function () {
alert("Button clicked!");
});
</script>

このコードは、myButtonというIDが割り当てられたボタン要素を選択し、click イベントが発生したときにアラートを表示する関数をイベントリスナとして登録しています。

3.2 DOM操作 #

DOM（Document Object Model）は、ウェブページの構造を表現するオブジェクトモデルです。JavaScriptを使ってDOMを操作することで、ウェブページの内容やスタイルを動的に変更することができます。

以下の例では、changeText関数が実行されると、指定された要素のテキストが変更されます。

<p id="myParagraph">Hello, world!</p>
<button onclick="changeText()">Change Text</button>

<script>
  function changeText() {
    const paragraph = document.getElementById("myParagraph");
    paragraph.textContent = "Text has been changed!";
  }
</script>

このコードは、myParagraphというIDが割り当てられた<p>要素を選択し、その要素のテキストコンテンツを変更するchangeText関数を定義しています。ボタンがクリックされると、changeText関数が実行され、<p>要素のテキストが変更されます。

4. AJAXと非同期処理 #

AJAX（Asynchronous JavaScript and XML）は、ウェブページをリロードせずにサーバーとデータのやり取りを行う技術です。JavaScriptを使って非同期通信を行い、ウェブページの一部だけを更新することができます。

以下の例では、fetchData関数が実行されると、外部APIからデータを取得し、そのデータを表示します。

<button onclick="fetchData()">Fetch Data</button>
<div id="result"></div>

<script>
  async function fetchData() {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    const resultElement = document.getElementById("result");
    resultElement.innerHTML = JSON.stringify(data);
  }
</script>

このコードは、fetchData関数を定義し、外部APIからデータを非同期で取得しています。取得したデータはJSON形式でパースされ、resultというIDが割り当てられた<div>要素に表示されます。

このように、JavaScriptを使ってウェブページにインタラクティブ性を追加することで、ユーザー体験が向上し、よりダイナミックなウェブアプリケーションを構築することができます。