論理積 &&演算子　( 〜かつ〜)

ECMAScript の仕様書には次のように書かれているようです。明快です、な〜るほど、ガッテン！

  1. 左オペランドを評価する
  2. 左オペランドの結果を Boolean に変換
  3. 変換結果が false なら、左オペランドの結果を返す
  4. 右オペランドを評価する
  5. 右オペランドの評価結果を返す　　

★boolean(true／false)の論理判定の基準は
　・trueになる値　･･･オブジェクトが存在、空で無い文字列、0でない数値、true<br>
　・falseになる値　･･･オブジェクトが存在しない、空文字列 (&quot;&quot;)、数値の0、false、<br>
　　　　　　　　　　　　　null、undefined(未定義データ)、NaN

■具体的な例で見てみよう！
構文･･･ ( 左辺式 || 右辺式 )

var a = 3;
var b = "JavaScript";
var c = "";
var d = 0;
x = ( a > 5  &&  a > 1)  //左辺式の評価結果のboolean変換はfalse、右辺は評価しないで左辺式の評価結果を返す
　　alert( a > 5  &&  a > 1 ) ･･･→ 　　alert( a == 5  &&  a > 1 ) ･･･→
x = ( a < 5  &&  a > 1)  //左辺式の評価結果をboolean変換するとtrue、右辺式の評価結果をそのまま返す
　　alert( a < 5 && a > 1 ) ･･･→ 　　alert( a == 3  &&  a > 5 ) ･･･→
x = ( a  &&  b )  //左辺式の評価結果をboolean変換するとtrue、右辺式の評価結果＜JavaScrip＞を返す
　　alert( a  &&  ｂ ) ･･･→ 　　alert( a == a  &&  b + a ) ･･･→
x = ( c  &&  a )  //左辺式の評価結果の空白文字をboolean変換するとfalse、評価結果の空白文字を返す
　　alert( c && a ) ･･･→ 　　alert( c + a  &&  b ) ･･･→ (左辺はtrue)
x = ( d  &&  d + a )  //左辺式の評価結果の 0 をboolean変換するとfalse、左辺式の評価結果の 0 を返す
　alert( d  &&  d + a ) ･･･→ alert( d + a  &&  d + a ) ･･･→ (左辺はtrue)
x = (document.getElementById("samp") && b )  //このページ内に id="samp" のHTML要素が存在しているので左辺式
　　の評価結果をboolean変換するとtrue、なので右辺式の評価結果の＜JavaScrip＞ を返す
　alert(document.getElementById("samp") &&  b ) ･･･→
　alert(document.getElementById("xyz") &&  b ) ･･･→ (このページ内には id="xyz" の
　　　　　　HTML要素は存在しないので、評価結果をboolean変換するとfalse。左辺の評価結果が返される。)
　alert(b && document.getElementById("samp") ) ･･･→
            (左辺の評価結果のboolean値はtrue、よって右辺式の評価結果を返す）
  alert(b && document.getElementById("samp").innerHTML ) ･･･→
            (左辺の評価結果のboolean値はtrue、よって右辺式の評価結果を返す）

Sample

Sample Source......................................................................>>>

<script language="JavaScript"><!--
  var a = 3;
  var b = "JavaScript";
  var c = "";
  var d = 0;
  function Test(n){
    if(n == 1)alert( a > 5 && a > 1);
    if(n == 2)alert( a == 5 && a > 1);
    if(n == 3)alert( a < 5 && a > 1);
    if(n == 4)alert( a == 3 && a > 5);
    if(n == 5)alert( a && b);
    if(n == 6)alert( a == a && b + a);
    if(n == 7)alert( c && a);
    if(n == 8)alert( c + a && b);
    if(n == 9)alert( d && d + a);
    if(n == 10)alert( d + a && d + a);
    if(n == 11)alert( document.getElementById("samp") && b);
    if(n == 12)alert( document.getElementById("xyz") && b);
    if(n == 13)alert( b && document.getElementById("samp"));
    if(n == 14)alert( b && document.getElementById("samp").innerHTML);
  }
//--></script>
</head>

<body>
<button onclick = "Test(1)">やってみよう！</button>
<button onclick = "Test(2)">やってみよう！</button>
<button onclick = "Test(3)">やってみよう！</button>
<button onclick = "Test(4)">やってみよう！</button>
<button onclick = "Test(5)">やってみよう！</button>
<button onclick = "Test(6)">やってみよう！</button>
<button onclick = "Test(7)">やってみよう！</button>
<button onclick = "Test(8)">やってみよう！</button>
<button onclick = "Test(9)">やってみよう！</button>
<button onclick = "Test(10)">やってみよう！</button>
<button onclick = "Test(11)">やってみよう！</button>
<button onclick = "Test(12)">やってみよう！</button>
<button onclick = "Test(13)">やってみよう！</button>
<button onclick = "Test(14)">やってみよう！</button>
<h5 id="samp" class="sample">Sample</h5>　　

(最終更新:12/12/24)
フレーム構成になっています･･･＜[ホーム]　>>　[HTML整理ノート]＞