Quelqu'un peut-il expliquer le code javascript suivant?

Question

En plus de l'explication, que signifie le $ en javascript? Voici le code:

var ZebraTable = { 
    bgcolor: '', 
    classname: '', 
    stripe: function(el) { 
     if (!$(el)) return; 
     var rows = $(el).getElementsByTagName('tr'); 
    for (var i=1,len=rows.length;i<len;i++) { 
     if (i % 2 == 0) rows[i].className = 'alt'; 
     Event.add(rows[i],'mouseover',function() { 
ZebraTable.mouseover(this); }); 
    Event.add(rows[i],'mouseout',function() { ZebraTable.mouseout(this); }); 
    } 
}, 
mouseover: function(row) { 
    this.bgcolor = row.style.backgroundColor; 
    this.classname = row.className; 
    addClassName(row,'over'); 
}, 
mouseout: function(row) { 
    removeClassName(row,'over'); 
    addClassName(row,this.classname); 
    row.style.backgroundColor = this.bgcolor; 
} 
} 

window.onload = function() { 
ZebraTable.stripe('mytable'); 
} 

Voici un lien vers où j'ai obtenu le code et vous pouvez voir une démo sur la page. Il ne semble pas utiliser de cadre. Je suivais en fait un tutoriel JQuery qui prenait ce code et utilisait JQuery pour faire le striping de la table. Voici le lien:

http://v3.thewatchmakerproject.com/journal/309/stripe-your-tables-the-oo-way

Answer 1

Quelqu'un peut-il expliquer le code javascript suivant?

//Shorthand for document.getElementById 
function $(id) { 
    return document.getElementById(id); 
} 

var ZebraTable = { 
    bgcolor: '', 
    classname: '', 

    stripe: function(el) { 
     //if the el cannot be found, return 
     if (!$(el)) return; 

     //get all the <tr> elements of the table 
     var rows = $(el).getElementsByTagName('tr'); 

     //for each <tr> element 
     for (var i=1,len=rows.length;i<len;i++) { 

      //for every second row, set the className of the <tr> element to 'alt' 
      if (i % 2 == 0) rows[i].className = 'alt'; 

      //add a mouseOver event to change the row className when rolling over the <tr> element 
      Event.add(rows[i],'mouseover',function() { 
       ZebraTable.mouseover(this); 
      }); 

      //add a mouseOut event to revert the row className when rolling out of the <tr> element 
      Event.add(rows[i],'mouseout',function() { 
       ZebraTable.mouseout(this); 
      }); 
     } 
    }, 

    //the <tr> mouse over function 
    mouseover: function(row) { 
     //save the row's old background color in the ZebraTable.bgcolor variable 
     this.bgcolor = row.style.backgroundColor; 

     //save the row's className in the ZebraTable.classname variable 
     this.classname = row.className; 

     //add the 'over' class to the className property 
     //addClassName is some other function that handles this 
     addClassName(row,'over'); 
    }, 
    mouseout: function(row) { 
     //remove the 'over' class form the className of the row 
     removeClassName(row,'over'); 

     //add the previous className that was stored in the ZebraTable.classname variable 
     addClassName(row,this.classname); 

     //set the background color back to the value that was stored in the ZebraTable.bgcolor variable 
     row.style.backgroundColor = this.bgcolor; 
    } 
} 

window.onload = function() { 
    //once the page is loaded, "stripe" the "mytable" element 
    ZebraTable.stripe('mytable'); 
} 

Answer 2

Le $ ne signifie rien en Javascript, mais il est un nom de fonction valide et plusieurs bibliothèques utilisent comme fonction qui englobe, par exemple Prototype et jQuery

Answer 3

$ est ce qu'on appelle la "fonction dollar", utilisée dans un certain nombre de frameworks JavaScript pour trouver un élément et/ou "l'encapsuler" afin qu'il puisse être utilisé avec des fonctions et des classes de framework. Je ne reconnais pas les autres fonctions utilisées, donc je ne peux pas vous dire exactement quel cadre il utilise, mais ma première estimation serait Prototype ou Dojo. (Il a certainement nejQuery.)

Answer 4

Le code définit essentiellement en alternance des lignes de table pour avoir une autre classe CSS, et ajoute un changement mouseover et événement mouseout à une troisième classe css, mettant en évidence la ligne sous la souris. Je ne suis pas sûr si jQuery, prototype ou peut-être une autre bibliothèque JS tierce est référencée, mais le signe dollar est utilisé par jQuery comme un sélecteur. Dans ce cas, l'utilisateur teste pour voir si l'objet est nul.

Answer 5

Cette fonction parcourt les lignes d'une table et effectue deux opérations.

1) configure le style de ligne en alternance. if (i% 2 == 0) rows [i] .className = 'alt' signifie que le nom de classe de chaque autre ligne est alt.

2) Attache un événement mouseover et mouseout à la ligne afin que la ligne change de couleur d'arrière-plan lorsque l'utilisateur passe la souris dessus.

le $ est une fonction mise en place par différents cadres javascript (comme jquery) qui appelle simplement document.getElementById

Answer 6

Le code crée en Javascript, un ZebraTable « objet » qui bandes une rangée de table par ligne en Javascript .

Il a deux fonctions membres de la note:

• bande (el) - vous passez dans un élément el, qui est supposé être une table. Il obtient toutes les balises <tr> dans la table (getElementsByTagName), puis les parcourt en boucle, en affectant le nom de classe "alt" aux lignes en alternance. Il ajoute également des gestionnaires d'événements pour la souris et la souris. Mouseover (row) - Le gestionnaire d'événements "mouse over" pour une ligne, qui stocke l'ancienne classe et la couleur d'arrière-plan de la ligne, puis lui attribue le nom de classe "over"
• mouseout (row) - L'inverse de mouseover, restaure l'ancien nom de classe et la couleur de fond.

Le $ est une fonction qui renvoie un élément donné soit le nom des éléments, soit l'élément lui-même. Elle retourne null si ses paramètres ne sont pas valides (élément inexistant, par exemple)

Je crois que le cadre utilisé est Prototype, vous pouvez consulter leur documentation pour plus d'informations

Answer 7

Jetez un oeil sur le fond de l'article dont vous avez obtenu le code, vous verrez qu'ils disent que vous aurez également besoin de prototype's $ function. Tirée de l'article

Dans votre CSS, vous aurez besoin de spécifier un style par défaut pour les lignes de table, plus classes tr.alt et tr.over. Voici une démo simple , qui inclut également les autres fonctions dont vous aurez besoin (un objet d'enregistrement d'événement et la fonction $ de Prototype).

Answer 8

Dans l'exemple que vous avez lié à:

function $() { 
    var elements = new Array(); 
    for (var i=0;i<arguments.length;i++) { 
     var element = arguments[i]; 
     if (typeof element == 'string') element = document.getElementById(element); 
     if (arguments.length == 1) return element; 
     elements.push(element); 
    } 
    return elements; 
} 

La fonction $ est à la recherche d'éléments par leur attribut id.