2016-05-06 3 views
0

Я принимаю вводный класс javascript, и для одной из наших лабораторий нам было поручено иметь только ОДИН тег сценария в разделе главы, но получает задержку обработчиком события window.onload.Относительно window.onload в javascript

У меня есть все, чтобы работать, но мой вопрос в том, почему моя функция imageManipulator() работает только тогда, когда я делаю window.onload = function() {imageManipulator()}; , а другой 2 отлично работает без {}.

Также для моего заявления, чтобы пропустить хоккейные команды, почему не будет работать 0? Я думал, что 0 истинно -1 ложно, поэтому не должно быть == 0 и not> = 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.

Когда вы пишете

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

Это не запускается imageManipulator() сразу, она создает функцию, которая будет вызывать его. Вы могли бы также написать:

window.onload = imageManipulator; 

Обратите внимание, что нет никакого () после имени функции. Это устанавливает переменную в ссылку на функцию, а не вызывает функцию.

И, наконец, нет смысла назначать window.onload несколько раз. Это одно свойство, оно может содержать только одно значение. Повторные присваивания заменяют предыдущее значение, и когда документ загружается, он будет выполнять только последний. Если вы хотите сделать несколько вещей, вы должны объединить их в одну функцию:

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

Для вашего второго вопроса, indexOf() возвращает позицию найденного элемента в массиве, или -1, если он не найден , Так что если вы использовали == 0, это было бы неверно для New York Islanders, потому что indexOf() возвращает 12, а не 0. indexOf не возвращает значение true/false, оно возвращает позицию.

+0

Получил это, спасибо за разъяснение, а также последняя часть теперь имеет больше смысла! –

+0

Это единственная переменная -> Это одно свойство * –

Смежные вопросы