document.getElementByIdの値は何ですか？

Question

私は経験豊富なプログラマーですが、私はJavaScriptを学びたいと思っています。私は配列でイメージをフェードアウトするスクリプトを見つけました。これは私がショーwindow.addEventListenerとd.getElementByIdの両方を見つけることができるすべてがあるスクリプト

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); 

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; 

function so_init() { 
if(!d.getElementById || !d.createElement)return; 

css = d.createElement("link"); 
css.setAttribute("href","xfade2.css"); 
css.setAttribute("rel","stylesheet"); 
css.setAttribute("type","text/css"); 
d.getElementsByTagName("head")[0].appendChild(css); 

imgs = d.getElementById("imageContainer").getElementsByTagName("img"); 
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; 
imgs[0].style.display = "block"; 
imgs[0].xOpacity = .99; 

setTimeout(so_xfade,1000); 
} 

function so_xfade() { 
cOpacity = imgs[current].xOpacity; 
nIndex = imgs[current+1]?current+1:0; 

nOpacity = imgs[nIndex].xOpacity; 

cOpacity-=.05; 
nOpacity+=.05; 

imgs[nIndex].style.display = "block"; 
imgs[current].xOpacity = cOpacity; 
imgs[nIndex].xOpacity = nOpacity; 

setOpacity(imgs[current]); 
setOpacity(imgs[nIndex]); 

if(cOpacity<=0) { 
    imgs[current].style.display = "none"; 
    current = nIndex; 
    setTimeout(so_xfade,1000); 
} else { 
    setTimeout(so_xfade,50); 
} 

function setOpacity(obj) { 
    if(obj.xOpacity>.99) { 
     obj.xOpacity = .99; 
     return; 
    } 
    obj.style.opacity = obj.xOpacity; 
    obj.style.MozOpacity = obj.xOpacity; 
    obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; 
} 

} 

私は難しさを持っています部分がこれらの線が

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); 

と

if(!d.getElementById || !d.createElement)return; 

あるありますウィンドウオブジェクトとドキュメントオブジェクトのそれぞれのメソッド。どのような条件でそれらが真実になり、どんな条件がそれらを偽にするかについては、どのような条件でそれらが呼び出されたときに、その値はどのようなものになりますか？

Answer 1

if(!d.getElementById || !d.createElement)return; 

この行は、メソッドが存在するかどうか、つまりブラウザが両方のメソッドをサポートしているかどうかをテストします。ブラウザの互換性を扱うことは楽しいことではありませんが、ブラウザのバージョンではなく機能をテストする方がよいでしょう。

Answer 2

コードは、これらのメソッドが存在するかどうか、代替メソッド（ブラウザ互換性の問題）を使用していないかどうかをチェックしています。

この行は：

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); 

window.addEventListenerが存在するかどうかをチェックしています。もしそうなら、それはそれを呼んでいる。それが存在しない場合は、window.attachEventを呼び出しています。これは、addEventListenerを持たないが、attachEventと呼ばれる同様の機能を持つ古いバージョンのIEに対応するためです。ほとんどの正常なプログラマは、この抽象化をユーティリティ関数またはシムの中に置き、これを通常のプログラミングから抽象化することにします。このロジックは、IE9より前のIEのすべてのバージョンではまだ必要です。

この行：getElementById又はcreateElementのいずれかがオブジェクトdのプロパティ/メソッドとして存在しない場合

if(!d.getElementById || !d.createElement)return; 

は（早期復帰して）機能を中止されています。これらのメソッドは現在使用されているすべてのブラウザ（IEの5.5に追加、Firefox、Chrome、Safari 1.0に追加）に存在するため、このチェックは不要です。

Answer 3

両方の場合、スクリプトは漸進的に練習しているようですenhancement techniquesと優雅な分解技術。記事をチェックしてください。しかし要するに、ブラウザがこれらの機能をサポートしているかどうかをチェックしています。

Answer 4

カッコなしの関数名を使用した場合、関数を呼び出さないため、関数への参照が得られます。本当に簡単な例：

function f1() { alert("hi"); } 

var f2 = f1; // This doesn't call the f1 function, it takes a reference 
       // to it and assigns it to f2. 
f2();   // Can call f2 since it refers to the same function; alerts "hi" 

あなたは、関数名が実際に機能するのではなく、文字列や数値または何への参照を保持するために起こるだけの変数であることから、ユーザーが定義した場合、おそらく、より明白であるものを見ることができますこのような関数：

だから、

var f3 = function() { alert("hello") }; 
f3();   // "hello" 

、その背景に何がif (someFunctionName)を言うことを意味するのでしょうか？JSでは、式はブール値trueであるだけでなく、空でない文字列、非ゼロの数値、または任意のオブジェクト（空のオブジェクトさえも）と評価される場合、真理とみなされます。空の文字列、ゼロ、null、未定義、およびNaNはすべて「偽」です。ブール値trueと「真実」とのこの区別は、JavaScriptでは非常に重要です。 JS関数はオブジェクトの一種です。だから、：

if (someFunctionName) 
// is testing if someFunctionName is "truthy" and is a shortcut way of saying 
if (someFunctionName != undefined) 
// also equivalent to 
if (typeof someFunctionName != "undefined") 

あなたがif(d.getElementById)、について尋ね第二の例は、（documentに設定されている）オブジェクトdがgetElementByIdというメソッドを持っていることをテストがあります。長い間、すべてのブラウザがこのメソッドをサポートしていたわけではないので、このコードはすべてのブラウザでエラーなく実行できるようになっていたからです。実際にはdocument.getElementById()が少なくともIE5の日以降サポートされているので、このテストは冗長です。

IE8以上ではwindow.addEventListenerがサポートされていないため、あなたが尋ねた最初の例は、依然として関連しています。そうコード：

window.addEventListener ? window.addEventListener("load",so_init,false) 
         : window.attachEvent("onload",so_init); 

はwindow.addEventListenerが定義されているかどうかをテストするために三オペレータ? :を使用しています。そうであれば、それを呼び出します。それ以外の場合は、window.attachEvent（それは古いIEと同等です）を呼び出します。現代のブラウザーはすべて、どちらか一方をサポートしています。