@ JavaScript

if 文

「もし○○ならば□□の処理を実行する」といったように、ある条件(コンディション)によって処理を分岐させ、プログラムの流れを制御する仕組みを条件分岐といいます。条件の指定には、「==」や「<」などの演算子を利用します。

分岐処理概念図

if()

if 文は、指定された条件(コンディション)を評価し、その結果が true ならステートメントを実行します。

format

if( 条件 )
  ステートメント;

if_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  text-align: center;
}
</style>
<script>
if (username == null)
  var username = "Taro Yamada";
  document.write(username);
</script>
</head>

<body>
</body>

</html>

次のように記述することもできます。

if_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  text-align: center;
}
</style>
<script>
if (!username)
  var username = "Taro Yamada";
  document.write(username);
</script>
</head>

<body>
</body>

</html>

ブロック文

複数の文を一つにまとめる方法もあります。これをブロック文といいます。

ブロック文は 0 個以上のステートメントをグループ化するのに使われます。ブロックは 1 組の {}(ブレス)で囲みます。

ステートメントの区切りには ;(セミコロン)を使います。

if_03.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  text-align: center;
}
</style>
<script>
if ((email == null)||(email == "")) {
  var email = "undefinde";
  alert("メールアドレスを入力してください。");
}
</script>
</head>

<body>
</body>

</html>

if()~else

条件の判定の結果に基づいて2つのステートメントのどちらか一方を実行する場合には、if()~else を使います。条件式の結果が false の場合、else が実行されます。

if_04.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  text-align: center;
}
</style>
<script>
if (username != null) {
  document.write(username);
}else{
  var username = prompt("氏名を入力してください");
  document.write(username);
}
</script>
</head>

<body>
</body>

</html>

if()~else if()~else

実行するステートメントが3個以上する場合は、if()~else if()~else を使います。

if_05.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  text-align: center;
}
</style>
</head>

<body>
<script>
now = new Date();
h = now.getHours();
if ((h > 5) && (h <= 10))
  document.write("おはようございます。");
else if ((h > 10) && (h <= 17))
  document.write("こんにちは。");
else
  document.write("こんばんは。");
document.write("ただいま" + h + "時です");
</script>
</body>

</html>

ブロック文を使って次のように記述することもできます。

if_06.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  padding: 100px 0;
  text-align: center;
}
</style>
</head>

<body>
<script>
now = new Date();
h = now.getHours();
if ((h > 5) && (h <= 10)) {
  document.write("おはようございます。");
} else if ((h > 10) && (h <= 17)) {
  document.write("こんにちは。");
} else {
  document.write("こんばんは。");
}
document.write("ただいま" + h + "時です");
</script>
</body>

</html>