クライアントサイドでのページデータ検証のためにJavaScriptを使用します。これはサーバーサイドのJavaとは無関係です。
JavaScriptの導入方法
JavaScriptコードをHTMLに組み込むには、主に2つの方法があります。
方法1: <script> タグの使用
<head> または <body> タグ内に <script> タグを直接記述します。
<script type="text/javascript">
alert("これはheadからのメッセージです");
</script>
方法2: 外部JavaScriptファイルの読み込み
src 属性を使用して、別のJavaScriptファイルをHTMLにリンクします。
例:
external.js ファイル:
alert("これは外部ファイルからのメッセージです");
HTMLファイル:
<script type="text/javascript" src="external.js"></script>
変数、配列、関数
変数
JavaScriptでは var キーワードを使用して変数を宣言します。型は動的に決まります。
var num1 = 12;
var num2 = 3;
var str = "a";
// 文字列と数値の加算は文字列連結になる
alert(num1 + str); // "12a"
// 数値と文字列の乗算はNaN (Not a Number) になる
alert(num1 * str); // NaN
// 型変換の例
var stringNum = "12";
var actualNum = 12;
// == は値のみを比較
alert(stringNum == actualNum); // true
// === は値と型を比較
alert(stringNum === actualNum); // false
// 論理演算子
var count = 0;
if (count) {
alert(1);
} else {
alert(0);
}
/*
&& (AND) 演算子:
- 全てのオペランドが真の場合、最後のオペランドの値を返す。
- いずれかのオペランドが偽の場合、最初の偽のオペランドの値を返す。
*/
var text = "abc";
var flagTrue = true;
var flagFalse = false;
var nullValue = null;
alert(text && flagTrue); // true (textが真なのでflagTrueが返る)
alert(flagTrue && text); // "abc" (flagTrueが真なのでtextが返る)
alert(flagFalse && text); // false (flagFalseが偽なのでそれが返る)
/*
|| (OR) 演算子:
- 全てのオペランドが偽の場合、最後のオペランドの値を返す。
- いずれかのオペランドが真の場合、最初の真のオペランドの値を返す。
*/
alert(flagFalse || nullValue); // null (両方偽なのでnullValueが返る)
alert(nullValue || flagFalse); // false (nullValueが偽なのでflagFalseが返る)
alert(text || nullValue); // "abc" (textが真なのでそれが返る)
alert(flagTrue || nullValue); // true (flagTrueが真なのでそれが返る)
配列
配列は [] を使って定義します。要素は後から追加・変更可能です。
var emptyArray = [];
alert(emptyArray.length); // 0
var initializedArray = [true, 1];
alert(initializedArray.length); // 2
initializedArray[0] = 12; // 要素の変更
initializedArray[2] = "abc"; // 新しい要素の追加
alert(initializedArray.length); // 3
// 配列の要素をループで処理
for (var i = 0; i < initializedArray.length; i++) {
alert(initializedArray[i]);
}
関数
関数は function キーワードまたは変数代入で定義できます。
関数定義の方法
// 方法1: function キーワードを使用
function greet() {
alert("引数なしの関数 greet() が呼び出されました。");
}
// 方法2: 変数に関数を代入 (function式)
var farewell = function () {
alert("引数なしの関数 farewell() が呼び出されました。");
};
// 関数の呼び出し
greet();
farewell();
// 引数を持つ関数
function greetUser(name, message) {
alert("こんにちは " + name + "！ " + message);
}
greetUser("太郎", "元気ですか？");
// 戻り値を持つ関数
function addNumbers(num1, num2) {
var sum = num1 + num2;
return sum;
}
var result = addNumbers(100, 50);
alert(result); // 150
イベント処理
イベントは、ユーザーのアクション（クリック、キー入力など）やブラウザの動作（ページの読み込み完了など）に応答するために使用されます。
onload イベント
ページ全体の読み込みが完了したときに発生します。
静的登録
HTMLの <body> タグに onload 属性を指定します。
<body onload="handlePageLoad()">
...
</body>
<script type="text/javascript" src="script.js"></script>
script.js:
function handlePageLoad() {
alert("ページが完全に読み込まれました。");
}
動的登録
JavaScriptコード内で window.onload に関数を代入します。この方法では、HTMLの <body> タグに onload 属性を記述してはいけません。
window.onload = function() {
alert("動的にページ読み込みイベントを処理します。");
};
onclick イベント
要素がクリックされたときに発生します。
静的登録
HTML要素に onclick 属性を指定します。
<button onclick="handleClick()">クリックしてください</button>
JavaScript:
function handleClick() {
alert("ボタンがクリックされました！");
}
動的登録
まず、HTML要素にIDを付け、JavaScriptでそのIDを使って要素を取得し、onclick プロパティに関数を代入します。
<button id="myButton">動的クリックイベント</button>
window.onload = function() {
var buttonElement = document.getElementById("myButton");
buttonElement.onclick = function() {
alert("動的に登録されたクリックイベントが発生しました。");
};
};
onblur イベント
要素がフォーカスを失ったときに発生します。
静的登録
ユーザー名: <input type="text" onblur="handleBlur()"><br>
JavaScript:
function handleBlur() {
console.log("フォーカスが失われました。");
}
動的登録
IDで要素を取得し、onblur プロパティに関数を設定します。
window.onload = function() {
var passwordField = document.getElementById("password"); // <input id="password"> が必要
if (passwordField) {
passwordField.onblur = function() {
console.log("パスワードフィールドからフォーカスが外れました（動的）。");
};
}
};
onchange イベント
<select> 要素や <input> 要素の値が変更されたときに発生します。
<select> 要素の場合
<select onchange="handleSelectChange()">
<option value="1">オプション1</option>
<option value="2">オプション2</option>
</select>
JavaScript:
function handleSelectChange() {
alert("選択が変更されました！");
}
onsubmit イベント
フォームが送信されようとしたときに発生します。
<form action="submit_handler.php" method="post" onsubmit="return confirmSubmit()">
<input type="text" name="data">
<input type="submit" value="送信">
</form>
JavaScript:
function confirmSubmit() {
if (confirm("本当に送信しますか？")) {
return true; // フォーム送信を続行
} else {
return false; // フォーム送信をキャンセル
}
}