JavaScript の if 文における OR 条件

Muhammad Muzammil Hussain 2023年10月12日
  1. JavaScript の IF ステートメントを用いた OR 条件の例
  2. 与えられた HTML コードを数ステップで調べます
  3. 同じ結果を得る別の方法
JavaScript の if 文における OR 条件

JavaScript には、if-elseswitch cases などの条件付きステートメントが含まれています。これらのステートメントは条件付きであり、指定された条件が真であるかどうかを確認するために使用されます。このために、OR ||を使用しますおよび&&演算子。

オペレーター|| はすべての条件をチェックし、いずれかの条件が真であるかどうかを判断します。混乱していますか?心配はいりません。|| 演算子の理解を深めるために、例を挙げてさらに詳しく説明します。

JavaScript の IF ステートメントを用いた OR 条件の例

以下の HTML ソースコードは、他のアルファベットと同様にユーザーから入力文字列値を取得するために使用するフォーム入力を示しています。クリックすると JavaScript 関数 checkVowel() を呼び出すボタン送信があります。

checkVowel() 関数は、ユーザが入力したアルファベットが母音であるかどうかをチェックするために、||演算子を用いた if 文の条件を含んでいます。

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | Window Print() method example
    </title>
 
    <script type="text/javascript">
    </script>
 
</head>
 
<body>
 
    <h2>Hi Users Check your choosen alphabet is a vowel or not.</h2>


   <form id="form" onsubmit="return false;">
    <input type="text" id="userInput" maxlength="1" placeholder="Enter any alphabet" />
    <input  type="submit" onclick="checkVowel();" />
</form>



<script>
function checkVowel() {
    var variable = document.getElementById("userInput").value;
   

if(variable =="a" || variable=="A"){
  alert(variable+" is vowel")
}
else if(variable =="e" || variable=="E"){
   alert(variable+" is vowel")
}
else if(variable =="i" || variable=="I"){
   alert(variable+" is vowel")
}
else if(variable =="o" || variable=="O"){
   alert(variable+" is vowel")
}
else if(variable =="u" || variable=="U"){
   alert(variable+" is vowel")
}

else{
  alert(variable+" is not vowel")
}
}
</script>sss
 
</body>s
<html>

この HTML ページのソースでは、ユーザーからアルファベットを取得するためのフォーム入力タイプのテキストを作成しました。

checkVowel() メソッドをトリガーする送信ボタンが表示されます。

checkVowel() メソッドの本体に、||を使用していくつかの if-else 条件を実装しました。これにより、UPPER CASELOWER CASE の両方の母音でユーザーが指定したアルファベットがチェックされ、if ステートメントのいずれかが必要な条件を満たしている場合、メソッドは指定されたアルファベットは母音ですというポップアップアラートメッセージを表示します。

指定された値が指定された条件と一致しない場合、プログラムは else condition を実行し、Given alphabet is not a vowel という警告メッセージを表示します。

与えられた HTML コードを数ステップで調べます

これらの 4つの簡単な手順に従って、||演算子を明確に理解してください。

  • テキストドキュメントを作成します。メモ帳やその他のテキスト編集ツールを使用できます。
  • 指定されたコードを作成されたテキストファイルに貼り付けます。
  • 拡張子 .html でそのテキストファイルを保存し、デフォルトのブラウザで開きます。
  • 入力フォームフィールドにアルファベットを入力して送信ボタンを押すと表示されます。メッセージのアルファベットが母音であるかどうかを示すアラートボックスが表示されます。

同じ結果を得る別の方法

||演算子を使用した switch ステートメントでも同じ機能を実現できます。以下に示すように。

switch (variable) {
  case 'a' || 'A':
    alert(variable + ' is vowel')
    break;

つまり、switch(変数)を、if 文の代わりに、||演算子を含む case で使用するだけです。

関連記事 - JavaScript Condition