HTML - JavaScript: 基礎ガイド

こんにちは、Web開発者志望の皆さん！HTMLとJavaScriptの素晴らしい世界への旅にご案内できることを、私はとても嬉しく思います。プログラミングを教えて10年以上経つ者として、あなたが素晴らしい経験をすることを保証します。一緒にWeb開発の謎を解き明かしましょう！

HTML - Javascript

JavaScriptとは？

本格的な内容に入る前に、まずJavaScriptとは何かを理解しましょう。JavaScriptは、Webページに命を吹き込む強力なプログラミング言語です。インターネットの魔法の杖のような存在で、静的なHTMLページを動かし、ユーザーの操作に反応させることができます。

ウェブサイトを家に例えると、HTMLは構造体——壁、屋根、基盤です。CSSは塗装と装飾です。そしてJavaScriptは、家を機能的でインタラクティブにする電気、水道、そしてクールなガジェットです！

文法

JavaScriptには、他の言語と同様に独自のルールがあります。基本を分解してみましょう。

変数

変数は情報を保持する容器のようなものです。以下のように宣言します：

let myName = "Alice";
const myAge = 25;
var myHobby = "coding";

この例では：

let は変化する変数に使用します。
const は変化しない変数に使用します。
var は古い方法で変数を宣言しますが、現在人気なのは let と const です。

関数

関数は再利用可能なコードの塊です。プログラムのレシピのようなものです：

function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Bob"); // 出力: Hello, Bob!

この関数は name を入力として受け取り、挨拶を表示します。友好的なロボットが誰にでも挨拶するようなものです！

条件文

これにより、コードが判断を下すことができます：

let temperature = 22;

if (temperature > 30) {
console.log("It's hot outside!");
} else if (temperature > 20) {
console.log("It's a nice day!");
} else {
console.log("It's a bit chilly.");
}

このコードは気温をチェックし、暖かさに基づいて異なるメッセージを表示します。コンピュータを天気予報-commentatorにするようなものです！

HTML内でのJavaScriptの使用例

では、HTMLページ内でJavaScriptを使用する方法を見てみましょう。主に3つの方法があります：

1. インラインJavaScript

これは快速な指示を囁くようなものです：

<button onclick="alert('Hello!')">クリックしてね</button>

このボタンをクリックすると、ポップアップで「Hello!」と表示されます。簡単で迅速ですが、大きなスクリプトには向いていません。

2. 内部JavaScript

これはHTMLページに独自の頭脳を持たせるようなものです：

<!DOCTYPE html>
<html>
<head>
<title>私のページ</title>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</head>
<body>
<button onclick="changeColor()">色を変える</button>
</body>
</html>

このスクリプトは、ボタンをクリックするとページの背景色をライトブルーに変更します。ページにカメレオンの能力を与えるようなものです！

3. 外部JavaScript

これはページに別の頭脳を参照させるようなものです：

<!DOCTYPE html>
<html>
<head>
<title>私のページ</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="greet()">こんにちはと言う</button>
</body>
</html>

そして myscript.js 内：

function greet() {
alert("外部ファイルからこんにちは！");
}

これにより、HTMLをクリーンに保ち、JavaScriptを整理整頓できます。道具を工具箱に収納するようなものです。

HTML

時々、ユーザーのブラウザではJavaScriptが利用不可または無効にされている場合があります。そのような場合に便利な <noscript> 要素があります：

<script>
document.write("Hello, JavaScript is working!");
</script>
<noscript>
<p>ああ、あなたのブラウザはJavaScriptをサポートしていないか、無効にされています。</p>
</noscript>

これはバックアッププランのようなものです。JavaScriptが動作している場合、ユーザーは最初のメッセージを見ます。動作していない場合、次のメッセージを見ます。準備周到にすることはいつも良いことです！

JavaScriptメソッド表

では、よく使用するJavaScriptメソッドを見てみましょう：

メソッド	説明	例
`alert()`	ポップアップメッセージを表示	`alert("Hello, World!");`
`console.log()`	ブラウザコンソールに.print	`console.log("This is a log");`
`document.getElementById()`	HTML要素をIDで検索	`let elem = document.getElementById("myDiv");`
`addEventListener()`	要素にイベントハンドラを追加	`button.addEventListener("click", function() { alert("Clicked!"); });`
`setTimeout()`	指定した遅延後に関数を実行	`setTimeout(function() { console.log("Delayed message"); }, 2000);`