以下javascript代码的说明

Question

如果有人能向我解释下面的代码在做什么，我将非常感激。作为JavaScript的新手，我只对它的功能有一个粗略的概念。这将是一个很大的帮助。如果问题太天真，也请原谅。

var init = function() { 
    var box = document.querySelector('#theArt').children[0], 
     showPanelButtons = document.querySelectorAll('#show-buttons input'), 
     panelClassName = 'show-front', 

     onButtonClick = function(event) { 
      box.removeClassName(panelClassName); 
      panelClassName = event.target.className; 
      box.addClassName(panelClassName); 
     }; 

    for (var i = 0, len = showPanelButtons.length; i < len; i++) { 
     showPanelButtons[i].addEventListener('click', onButtonClick, false); 
    } 
}; 

window.addEventListener('DOMContentLoaded', init, false); 

这是HTML代码来实现

<div id="theArt"> 
<div id="cube" class="show-front"> 
    <figure class="front"><img src="../_images/feature1.jpg" width="270px" height="270px"></figure> 
    <figure class="back"><img src="../_images/feature2.jpg" width="270px" height="270px"></figure> 
    <figure class="right"><img src="../_images/feature3.jpg" width="270px" height="270px"></figure> 
    <figure class="left"><img src="../_images/feature4.jpg" width="270px" height="270px"></figure> 
    <figure class="top"><img src="../_images/painting01.png" width="270px" height="270px"></figure> 
    <figure class="bottom"><img src="../_images/painting02.png" width="270px" height="270px"></figure> 
</div> 

<div id="options"> 
<p id="show-buttons"> 
    <input type="image" src="../_images/feature1.jpg" width="90" height="90" class="show-front"></input> 
    <input type="image" src="../_images/feature2.jpg" width="90" height="90" class="show-back"></input> 
    <input type="image" src="../_images/feature3.jpg" width="90" height="90" class="show-right"></input> 
    <input type="image" src="../_images/feature4.jpg" width="90" height="90" class="show-left"></input> 
    <input type="image" src="../_images/painting01.png" width="90" height="90" class="show-top"></input> 
    <input type="image" src="../_images/painting02.png" width="90" height="90" class="show-bottom"></input> 
</p> 

Answer 1

window.addEventListener（ 'DOMContentLoaded'，INIT，FALSE）;

当浏览器中加载的DOM内容和init函数被调用时，上面的代码行试图向页面添加一个事件。 Init是具有函数定义的变量。

在函数定义中，变量框试图获取ID为“theArt”的元素。 onButtonClick是具有另一个函数定义的变量。

showPanelButtons是将具有ID为“show-buttons”且类型为“input”的元素的所有列表的变量。 For循环尝试为showPanelButtons列表中的每个元素添加单击事件。

希望它能帮助..

Answer 2

//It is a javascript function 
     var init = function() { 
    //document.querySelector is a method which will return the first matched selector 
    //which is theArt in this snippet 
    //Selecting the first child none of #theArt DOM element and assigning it a variable 
     var box = document.querySelector('#theArt').children[0], 

    //document.querySelectorAll is another method which will return all matched elements unlike 
    //document.querySelector which return only single element. 
    //showPanelButtons & panelClassName are variables. 
    //This line selecting all input element which are inside DOM element 
    // with id show-buttons 
    showPanelButtons = document.querySelectorAll('#show-buttons input'), 
    panelClassName = 'show-front', 

     //Could not find removeClassName function in your code or may be you are 
     // using prototype.js 
     //event.target.className will return the class on which the events have 
     //occured. For example click,keyup,keydown are events. 
     //If you click on a button or input field and 
    //if you use event.target.className it will return 
    //class of the button/input field 
      onButtonClick = function(event){ 
      box.removeClassName(panelClassName); 
      panelClassName = event.target.className; 
      box.addClassName(panelClassName); 
      }; 

     //addEventListener is a method for attaching event to loop. 
     //Also look at scope of i if you want to accurately understand 
     // the usage of addEventListener inside the loop 


     for (var i=0, len = showPanelButtons.length; i < len; i++) { 
     showPanelButtons[i].addEventListener('click', onButtonClick, false); 
     } 

    }; 
    // DOMContentLoaded is an event .Here DOMContentLoaded is added to 
    //window object using addEventListener. 
//DOMContentLoaded event fires when the markup of a webpage has been 
//parsed.The last parameter in addEventListener (true/false) is used if you want 
//the event to capture or bubble up. 
     window.addEventListener('DOMContentLoaded', init, false);