[Resolvido] Explicar funcionamento do código

[Michel Frade 0]

Olá para todos, sou novo por aqui, este é meu primeiro post e peço desculpas se o postei no local errado.

Comecei a estudar JavaScript há pouco tempo (estou fazendo curso de web design & developer), tenho muitas dúvidas e recentemente tentando montar um menu pop-up me deparei com o código abaixo, como não tenho muita prática com a linguagem, ficaria grato se algum de vocês pudessem me ajudar a dissecar o código e me explicar o que acontece no mesmo. Agradeço a ajuda, abraços.

 

Segue o código:

 

window.onload=function(){
Evento=document.getElementById("corpo");
Evento.onload=horizontal();
}

function horizontal() {

  var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");

  for (var i=0; i< navItems.length; i++) {
     if(navItems[i].className == "submenu")
     {
        if(navItems[i].getElementsByTagName('ul')[0] != null)
        {
           navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}
           navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}
        }
     }
  }

}

[51L3N7 1]

Vamos por partes: o que você não conseguiu compreender no código?

[Michel Frade 0]

Boa Tarde 51L3N7!

 

Pois bem, eu não entendi a partir do 'for', praticamente o código inteiro, eu desconheço esse '.length' não entendi bem o que essa estrutura de repetição tem como objetivo. De resto é fácil, são só alterações de estilização via Javascript, acredito eu.

Ah, e também não sei a quem o 'this' se refere.

[JCMais 75]

Leia: https://developer.mozilla.org/pt/O_DOM_e_o_JavaScript

 

:thumbsup:

[51L3N7 1]

A propriedade length serve para retornar a extensão de uma string/array.

Exemplo:

 

'cinco'.length //Retorna 5
['c','i','n','c','o'].length //Retorna também 5

 

E aquele for ali serve basicamente para percorrer a tag <li> que esta no id "menu_dropdown", em busca de tags <ul> e mudar o estilo delas. Não tem segredo ;)

[Michel Frade 0]

Certo, senhores!

 

Vou analisar o código novamente, agora com base nas suas respostas.

 

Obrigado 51L3N7 e JCMais!!

[Henrique Barcelos 290]

Comentando o código...

function horizontal() {

  //Pega todos as tags <li> dentro do elemento com id="menu_dropdown"
  var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");

  //Para cada elemento existente em navItems, repita...
  for (var i=0; i< navItems.length; i++) {
     //Se o elemento atual tiver a classe 'submenu'...
     if(navItems[i].className == "submenu")
     {
        //Se existe um elemento <ul> dentro do item...
        if(navItems[i].getElementsByTagName('ul')[0] != null)
        {
           //Ao passar o mouse por cima do elemento <li>...
           navItems[i].onmouseover=function() {
               //Altera o CSS do elemento <ul> dentro de <li> para mostrá-lo e coloca um fundo cinza em <li>
               this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";
           }
           //Ao se retirar o mouse do elemento <li>...
           navItems[i].onmouseout=function() {
               //Esconde o elemento <ul> e o elemento <li> passa a ter um fundo branco
               this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";
           }
        }
     }
  }

}   

[Allotropos 0]

Henrique sempre com excelentes respostas..

ate eu obtive conhecimentos pegando o assunto por cima.

 

vlw Henrique :D

[Michel Frade 0]

Henrique, muito obrigado pelo código comentado, como disse sou iniciante em javascript, estou até meio perdido para estudar é difícil saber por onde começar porém estou me esforçando o máximo que posso, agradeço a ajuda e paciência de todos. Minhas dúvidas sobre o código foram eliminadas, obrigado.