JavaScript は HTML や CSS とどう違うのですか?

JavaScript と HTML および CSS の違い

HTML はウェブサイトの構造を作成するために使用されます

HTML（HyperText Markup Language）は、ウェブページの基本的な構造を作成するために使用されるマークアップ言語です。HTML 要素とタグを使用して文章、画像、リンク、フォームなどを配置し、ウェブページのレイアウトを定義します。

以下に簡単な HTML の例を示します：

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これはHTMLの例です。</p>
</body>
</html>

CSS（Cascading Style Sheets）は、HTML ドキュメントの外観をデザインするために使用されます。CSS を使用して、色、フォント、レイアウトなどを設定し、ウェブページの見た目を美しく整えることができます。

以下に簡単な CSS の例を示します：


body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

JavaScript は、ウェブページに動的な機能を追加するために使用されるプログラミング言語です。ユーザーの操作に応じてページの内容を変更したり、アニメーションを追加したり、データを処理したりすることができます。特に DOM 操作やイベント処理に強力です。

以下に簡単な JavaScript の例を示します：


document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('h1').textContent = 'JavaScriptによって変更されたテキスト';
});

HTML はウェブページを構築するための基本的なスケルトンを提供します。HTML を使用して各要素を定義し、ページの内容と構造を設定します。

JavaScript を使用すると、DOM（Document Object Model）を操作して、ページのコンテンツや構造を動的に変更することができます。これにより、インタラクティブなウェブページを作成できます。

以下に JavaScript による DOM 操作の例を示します：


document.getElementById('test').innerHTML = '新しいコンテンツ';

JavaScript には Date オブジェクトがあり、これを使用して日付と時刻を操作することができます。現在の日付と時刻を取得したり、特定の日付を計算したりするのに役立ちます。

以下に簡単な Date オブジェクトの使用例を示します：


let now = new Date();
document.getElementById('date').textContent = now.toLocaleString();