0

Criei uma página com três divs que direcionam para vídeos de acordo com o seu título, ao clicar em cada um delas, um modal é aberto com o respectivo vídeo da div.

Este é o HTML:

<body>
        <section class="cards">
            <div class="card" id='LyBYdYnaX0c'>
                <p class="title">Game</p>
            </div>
            <div class="card" id='5qap5aO4i9A'>
                <p class="title">Lofi</p>
            </div>
            <div class="card" id='_hJZEq61KeM'>
                <p class="title">Camus</p>
            </div>
        </section>
        <div class="modalOverlay">
            <div class="modalOverlayContent">
                <div class="modalIframe">
                    <iframe src='' frameborder="0"></iframe>
                </div>
                <div class="modalOverlayClose">
                    <a>
                        <i class="material-icons">close</i>
                    </a>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>

Os links são dinâmicos, como os vídeos são embutidos do Youtube, eu coloquei o id do vídeo como o Id de cada card, assim o controle dos links é feito diretamente pelo JavaScript.

const cards = document.querySelectorAll('.card')
const modalOverlay = document.querySelector('.modalOverlay')

for(let card of cards){
    const videoId = card.getAttribute('id')
    card.addEventListener('click', function(){
        modalOverlay.classList.add('active')
        modalOverlay.querySelector('iframe').src = `https://www.youtube.com/embed/${videoId}`
    })
}

modalOverlay.querySelector('.modalOverlayClose').addEventListener('click', function(){
    modalOverlay.classList.remove('active')
    modalOverlay.querySelector('iframe').src = ""
})

A estrutura for que foi utilizada no JavaSscript fica rodando o tempo inteiro no navegador? Ou ela só é executada quando é chamada? Caso sim, o addEventListener seria quem "chama" a estrutura for? Mesmo estando dentro da mesma?

Segue print da página para que fique mais claro:

Como a página fica

0

1 Resposta 1

3

Você está usando uma função que trabalha com um mecanismo chamado callback. Então você registra o código que deseja que seja executado em uma função, no caso a addEventListener(). Lá dentro dela há um código que saberá o que fazer e quando chamar o seu código. É problema dele como funciona essa parte. A sua tarefa é apenas dizer qual é o código que ele deverá executar.

Você usou uma função anônima para informar esse código. Mas é o mecanismo interno do browser que chamará esse código quando ele achar que for pertinente (ele tem regras para isso que faz tudo funcionar como espera).

Então o seu código só está registrando o que deve ser executado, esse código todo não será chamado, esse for não será executado várias vezes, ele será executado só uma vez (pode executar vários passos porque tem vários cards, mas só).

Isso tudo é controlado pelo mecanismo de eventos do navegador, como o nome da função já dá um dica. Então você adiciona cum código a um evento que fica escutando o que está acontecendo e toma uma ação (a que o seu código de duas linhas manda fazer em cada um que adicionou). Os eventos usados foram os clicks que podem ser dados em um dos 3 cards que são adicionados e no click do fechamento.

Isso funciona como espera? Na forma colocada acho um pouco estranho.

Tem maneiras diferentes de fazer isso, sugiro estudar os mecanismos individualmente em algum material estruturado que mostre todos os detalhes.

2
  • Recomenda algum material específico para que eu possa estudar esses mecanismos? 27/07/2020 às 20:37
  • Além de ler os links que eu passei, dá uma pesquisada e procure livro que seja unanimidade sobre o assunto. Como não é algo que eu tenho estudado não sei indicar nada.
    – Maniero
    27/07/2020 às 20:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .