Javascriptとは？

JavaScriptは、Webページに動きやインタラクションを追加するためのプログラミング言語です。 HTMLとCSSで作った静的なページに、アニメーションやボタンのクリックイベント、データの動的更新などの機能を追加できます。

JavaScriptの特徴

動的な動作を実現 ボタンをクリックしたり、フォームに入力したりしたときに、Webページの内容を変更できます。
ブラウザで動作 JavaScriptコードは、特別な環境を用意しなくてもブラウザ内で動作します。
HTMLやCSSと連携 JavaScriptを使えば、HTMLの要素やCSSスタイルを動的に操作できます。

JavaScriptを使う方法

JavaScriptはHTMLファイルに以下のように記述して使います。

1. HTML内に直接記述（インラインスクリプト）

HTML内の<script>タグにJavaScriptを書きます。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptの例</title>
</head>
<body>
    <h1>こんにちは！</h1>
    <script>
        alert("ページが読み込まれました！");
    </script>
</body>
</html>

2. 外部ファイルを使う方法

JavaScriptコードを別ファイル（拡張子: .js）に保存して、HTMLから読み込む方法です。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScriptの例</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>外部ファイルで管理</h1>
</body>
</html>

JavaScriptファイル（script.js）

alert("外部ファイルからJavaScriptが読み込まれました！");

JavaScriptの基本構文

JavaScriptを書くための基本ルールを紹介します。

1. 変数

データを保存するために使います。

let name = "太郎"; // 変数nameに文字列を代入
const age = 25;    // 変更できない定数
let isStudent = true; // 真偽値（true/false）

2. データ型

JavaScriptでは、さまざまなデータ型を扱えます。

データ型

例

3. 関数

特定の処理をまとめておく仕組みです。

function sayHello() {
    console.log("こんにちは！");
}
sayHello(); // 関数を実行

4. 条件分岐

条件に応じて異なる処理を実行します。

let age = 20;

if (age >= 18) {
    console.log("成人です。");
} else {
    console.log("未成年です。");
}

5. 繰り返し処理（ループ）

同じ処理を繰り返します。

for (let i = 0; i < 5; i++) {
    console.log("繰り返し: " + i);
}

DOM（Document Object Model）操作

JavaScriptでHTMLを動的に操作するためには、DOM（文書オブジェクトモデル）を使います。

例1: 要素の取得と変更

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作の例</title>
</head>
<body>
    <h1 id="title">最初のタイトル</h1>
    <button onclick="changeTitle()">タイトルを変更</button>

    <script>
        function changeTitle() {
            document.getElementById("title").textContent = "変更後のタイトル";
        }
    </script>
</body>
</html>

例2: イベントの追加

JavaScriptでイベントを設定できます。

<!DOCTYPE html>
<html>
<head>
    <title>クリックイベント</title>
</head>
<body>
    <button id="myButton">クリックして！</button>
    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("ボタンがクリックされました！");
        });
    </script>
</body>
</html>

簡単なサンプル

以下はJavaScriptを使って動きを加えた例です。

<!DOCTYPE html>
<html>
<head>
    <title>簡単なJavaScript例</title>
</head>
<body>
    <h1>カウントアップ</h1>
    <p>クリックするとカウントが増えます。</p>
    <button onclick="increment()">カウントアップ</button>
    <p id="counter">0</p>

    <script>
        let count = 0;

        function increment() {
            count++;
            document.getElementById("counter").textContent = count;
        }
    </script>
</body>
</html>

次に学ぶこと

JavaScriptを学んだら、次は以下を学ぶとさらに応用が広がります。

JavaScriptの配列やオブジェクトの操作
APIとの連携（データを取得する方法）
JavaScriptフレームワーク（React, Vue.jsなど）

JavaScriptを使って、Webページに動きを加える楽しさを体験してみましょう！ 😊

前へCSSとは？次へURLとは？

最終更新 3 日前