Reutilização de lógica em JavaScript

Lucas programou o seguinte algoritmo JavaScript em seu primeiro site: const botoes = document.querySelectorAll('.botao'); const textos = document.querySelectorAll('.aba-conteudo'); for (let i = 0; i < botoes.length; i++) { botoes[i].onclick = function () { for (let j = 0; j < botoes.length; j++) { botoes[j].classList.remove('ativo'); textos[j].classList.remove('ativo'); } botoes[i].classList.add('ativo'); textos[i].classList.add('ativo'); } } Agora, ele deseja reutilizar essa lógica em outro site, implementando-a nas classes `.nuvens` para os botões e `.palavras` para os conteúdos de texto. Para reutilizar o código, mantendo o funcionamento do comando, Lucas deve substituir

• A) a função anônima `function ()` por `function (nuvens)`. Da mesma forma, os métodos `remove` por `palavras`.

• B) a classe `.botao` do `querySelectorAll` por `.nuvens`. Da mesma forma, a classe `.aba-conteúdo` por `.palavras`, na segunda linha.

• C) a constante `botoes` por `nuvens` dentro do laço `for`. Da mesma forma, a classe "ativo" por "palavras", na estrutura `classList.add`.

• D) o contador `i` por `a` dentro do laço `for`. Da mesma forma, o atributo `.length` por `palavras` dentro dos parâmetros do `for`.

• E) o laço `for(let i = 0; i < botoes.length; i++)` por `if(let i = 0; i < nuvens.length; i++)`. Da mesma forma, o método `onclick` por `palavras`.

Você está desenvolvendo uma agenda digital para uma maratona de filmes com os amigos. O sistema mostra quanto tempo falta para o início de cada sessão, separando os valores em dias, horas, minutos e segundos. Para isso, você usou a função "calculaTempo", que retorna uma lista com essas quatro informações: Após testar com seus colegas, você percebe que o código ficou difícil de entender, especialmente por repetir várias vezes a mesma função. A partir disso, qual algoritmo você deve usar para manter a lógica de funcionamento, simplificando a compreensão do código?

• const tempo = calculaTempo(tempos[i]); document.getElementById("dias" + i).textContent = tempo[0]; document.getElementById("horas" + i).textContent = tempo[1]; document.getElementById("min" + i).textContent = tempo[2]; document.getElementById("seg" + i).textContent = tempo[3];

• const texto = textContent; document.getElementById("dias" + i).texto = calculaTempo(tempos[i])[0]; document.getElementById("horas" + i).texto = calculaTempo(tempos[i])[1]; document.getElementById("min" + i).texto = calculaTempo(tempos[i])[2]; document.getElementById("seg" + i).texto = calculaTempo(tempos[i])[3];

• const elemento = document.getElementById; elemento("dias" + i).textContent = calculaTempo(tempos[i])[0]; elemento("horas" + i).textContent = calculaTempo(tempos[i])[1]; elemento("min" + i).textContent = calculaTempo(tempos[i])[2]; elemento("seg" + i).textContent = calculaTempo(tempos[i])[3];

• const tempo = ("dias" + i), ("horas" + i), ("min" + i), ("seg" + i); document.getElementById.tempo.textContent = calculaTempo(tempos[i])[0]; document.getElementById.tempo.textContent = calculaTempo(tempos[i])[1]; document.getElementById.tempo.textContent = calculaTempo(tempos[i])[2]; document.getElementById.tempo.textContent = calculaTempo(tempos[i])[3];

• const funcao = calculaTempo(); document.getElementById("dias" + i).textContent = [0]; document.getElementById("horas" + i).textContent = [1]; document.getElementById("min" + i).textContent = [2]; document.getElementById("seg" + i).textContent = [3];

Analise o algoritmo JavaScript abaixo: ```js for (let i = -2; i < 9; i++) { console.log(i); } ``` Com base no código apresentado, qual será o terceiro resultado exibido no console?

• -2

• 0

• 9

• <

• ++

Bruna está desenvolvendo um site para compartilhar receitas culinárias. Inicialmente, ela escrevia os ingredientes diretamente no HTML, um por um. Após um refinamento, ela decidiu criar três '

' com os IDs "ingrediente0", "ingrediente1" e "ingrediente2", e utilizou o seguinte código JavaScript para preenchê-los: const ingredientes = ["2 ovos", "1 xícara de farinha", "1 colher de açúcar"]; for (let i = 0; i < ingredientes.length; i++) { document.getElementById("ingrediente" + i).textContent = ingredientes[i]; } Qual melhoria esse refinamento trouxe em comparação com a forma manual de escrever os ingredientes no HTML?

• Garantiu que os ingredientes permanecessem estáticos no site, paralisando a sua movimentação.

• Automatizou o preenchimento dos ingredientes, facilitando futuras atualizações.

• Aumentou o número de elementos visuais no site, deixando-o mais completo.

• Evitou o uso de listas ordenadas no código, melhorando a estética da página.

• Reduziu a quantidade de linhas em JavaScript, tornando o site mais leve.

Um grupo de amigos desenvolveu o seguinte algoritmo para o seu projeto de painéis de visualização: ```js for (let i = 0; i < paineis.length; i++) { paineis[i].onclick = function () { for (let j = 0; j < paineis.length; j++) { paineis[j].classList.remove("ativo"); textos[j].classList.remove("ativo"); } paineis[i].classList.add("ativo"); textos[i].classList.add("ativo"); } } ``` O algoritmo criado garante que o código irá

• adicionar a classe “ativo” em uma lista de painéis, removendo-a somente do texto em que foi clicado.

• adicionar a classe “ativo” nos elementos de classe “paineis”, mantendo todos visíveis na tela do projeto.

• percorrer a lista de painéis, mantendo ativo somente o painel que foi clicado e seu texto correspondente.

• percorrer a lista de textos, mantendo ativo todos os textos que foram clicados e seus conteúdos correspondentes.

• adicionar a classe “ativo” somente no elemento de classe “textos” atual, mantendo-o invisível na tela do projeto.

Durante um campeonato de jogos entre amigos, Mariana desenvolveu um cronômetro para exibir o tempo da partida na tela. O cronômetro foi programado com a seguinte função: ```js function iniciarContagem() { atualizaTempo(); setInterval(atualizaTempo, 1000); } ``` Ao analisar essa função, qual é o papel do comando "setInterval" no contexto da solução?

• Esperar 1000 cliques do usuário para iniciar a contagem.

• Pausar o cronômetro enquanto o jogo estiver em andamento.

• Atualizar o cronômetro quando o usuário clicar em um botão.

• Executar a função “atualizaTempo” uma vez ao carregar a página.

• Chamar a função “atualizaTempo” repetidamente a cada segundo.

O que é reutilização de código na programação orientada a objetos (POO)?

• Escrever todo o código do zero para cada novo projeto

• Adaptar um código existente para diferentes contextos sem reescrevê-lo completamente

• Apagar códigos antigos

• Usar apenas funções matemáticas

Quais são os quatro princípios fundamentais da Programação Orientada a Objetos (POO)?

• Encapsulamento, Herança, Polimorfismo, Abstração

• Funções, Variáveis, Loops, Condições

• HTML, CSS, JavaScript, Python

• Reutilização, Simplicidade, Eficiência, Modularidade

Para manipular elementos HTML, é mais eficiente usar qual método?

• document.getElementById

• document.write

• alert

• prompt

Alterar apenas nomenclaturas sem modificar a estrutura garante a reutilização correta do código.

• Verdadeiro

• Falso