2016-05-06 6 views
0

私は、JavaScriptのクラスを紹介しています。私たちのラボでは、のONEスクリプトタグのみがヘッドセクションにあるように指示されましたが、window.onloadイベントハンドラによって遅れています。javacriptのwindow.onloadについて

私は働くためにすべてを得ましたが、なぜ私のimageManipulator()関数は、window.onload = function(){imageManipulator()}を実行しても機能しません。 と残りの2つは{}なしでうまく動作します。

また、私のif文がホッケーチームをループする理由は何ですか== 0は機能しませんか?私は0が真であると思った-1は偽であるので、== 0でなく> = 0ではないはずですか?

私のコードはここにある:

<html> 
<head> 
<script> 
    function christmasDayCalculation() 
    { 
     var currentDate = new Date(); 
     var christmas = new Date(2016, 11, 25); 

     var ms = christmas - currentDate; 
     var seconds = ms/1000; 
     var minutes = seconds/60; 
     var hours = minutes/60; 
     var days = hours/24; 

     alert(Math.round(days) + " days until christmas"); 
    } 

    function hockeyTeams() 
    { 
     var hockeyTeams = ['Anaheim Ducks', 'Arizona Coyotes', 'Calgary Flames', 'Edmonton Oilers', 
         'Los Angeles Kings', 'San Jose Sharks', 'Vancouver Canucks', 'Colorado Avalanch', 
         'Dallas Stars', 'Minnesota Wild', 'St.Louis Blues', 'Winnipeg Jets', 'Boston Bruins', 
         'Buffalo Sabres', 'Detroit Redw Wings', 'Florida Panthers', 'Montreal Canadiens', 
         'Ottowa Senators', 'Tampa Bay Lightning', 'Toronto Maple Leafs', 'Colombus Blue Jackets', 
         'New Jersey Devils', 'New York Islanders', 'New York Rangers', 'Philadelphia Flyers', 
         'Pittsburgh Penguins', 'Washington Capitals'] 

     for(i = 0; i < hockeyTeams.length; i++) 
     { 
      if(hockeyTeams[i].indexOf("an") >= 0) 
      { 
       alert(hockeyTeams[i]); 
      } 
     } 
    } 

    function imageManipulator() 
    { 
     var numberOfImages = document.images.length; 

     for(i = 0; i < numberOfImages; i++) 
     { 
      document.images[i].style.border = "solid red"; // DOM 0 required per lab instructions 
      document.getElementsByTagName("img")[i].style.width = "100px"; // DOM 1 required per lab instructions 
     } 
    } 

    window.onload = christmasDayCalculation(); 
    window.onload = hockeyTeams(); 
    window.onload = function() { imageManipulator() }; 
</script> 
</head> 
<body> 
    <img src="cat.jpg"> 
    <img src="dog.jpg"> 
    <img src="bird.jpg"> 
</body> 
</html> 

ありがとう!

答えて

1

window.onloadで何かを実行すると、関数が実行される前にすべてのDOM要素がロードされます。関数がDOMにアクセスまたは変更する場合は、これを使用する必要があります。

christmasDayCalculation()およびおよびhockeyTeams()はDOMにアクセスしないため、window.onloadで実行する必要はありません。 function()を入れていないので、ウィンドウがロードされても実際には実行されていません。あなたは

window.onload = hockeyTeams(); 

を行うと、それはすぐに機能を実行し、それがwindow.onloadに戻り値を割り当てます。

すぐimageManipulator()を実行しません

window.onload = function() { imageManipulator(); }; 

を書くとき、それはそれを呼び出す関数を作成します。また、書くことができます:関数名の後には()をありません

window.onload = imageManipulator; 

ていることに注意してください。これは、関数を呼び出すのではなく、変数を関数の参照に設定します。

最後に、window.onloadに複数回割り当てても意味がありません。これは単一のプロパティで、1つの値しか保持できません。繰返し割り当てが以前の値を置き換え、ドキュメントがロードされると、最後の値のみが実行されます。あなたが複数のものをしたい場合は、単一の関数にそれらを組み合わせる必要があります。それが見つからない場合は、配列、または-1で見つかった要素の位置を返しますindexOf()あなたの2番目の質問については、

window.onload = function() { 
    christmasDayCalculation(); 
    hockeyTeams(); 
    imageManipulator(); 
}; 

を。したがって、== 0を使用した場合、は12であり、0ではないため、New York Islandersの場合は当てはまりません。 indexOfは真偽値を返さず、位置を返します。

+0

説明をいただきありがとうございました。最後の部分も今より多くの意味があります。 –

+0

これは単一の変数です - > This is single * property * –

関連する問題