Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não entendi muito bem o 'contexto'

Veja se meu raciocínio está certo:

Fiz uma função, sendo ela a seguinte:

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `/imagens/${contexto}.png`)
}

e tenho os três botões, sendo eles:

focoBt.addEventListener('click', () => {
    alterarContexto('foco')
})

curtoBt.addEventListener('click', () => {
    alterarContexto('descanso-curto')                                         
})

longoBt.addEventListener('click', () => {
    alterarContexto('descanso-longo')
})

Então meu raciocínio é o seguinte:

Quando a pessoa clicar no botão, esse valor 'contexto' será atribuído ao valor que a pessoa clicou, podendo ser 'foco', 'descanso-curto' e 'descanso-longo' e será atribuído aos parâmetros 'contexto' da função, fazendo mudar o "background" da imagem.

Está certo?

2 respostas

Oi, Nathan, tudo bem?

Seu raciocínio está correto!! A função alterarContexto é responsável por alterar o contexto da página, mudando o "background" da imagem conforme o botão clicado.

No código que você compartilhou, a função alterarContexto recebe um parâmetro chamado contexto. Esse parâmetro é o valor que será atribuído ao atributo data-contexto do elemento html e ao atributo src do elemento banner.

Quando você clica em um dos botões (focoBt, curtoBt ou longoBt), a função alterarContexto é chamada passando como argumento o valor correspondente ao botão clicado. Por exemplo, se você clicar no botão focoBt, a função será chamada assim: alterarContexto('foco'). Isso fará com que o atributo data-contexto do elemento html seja atualizado para o valor 'foco' e o atributo src do elemento banner seja atualizado para o caminho da imagem '/imagens/foco.png'.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
solução!

Olá Nathan! Tudo ok contigo?

Como o Rodrigo já mencionou, o seu raciocínio está certo! Isso que você fez, em termos mais gerais, é chamado de "passagem de argumentos" para uma função. O parâmetro contexto age como uma variável local dentro da função, e quando você chama a função, você fornece o valor que você deseja que seja usado para esse parâmetro na chamada específica.

Não há um nome específico para essa técnica, pois isso faz parte do funcionamento padrão de passagem de argumentos em programação. Quando você define uma função com parâmetros, você pode fornecer valores específicos quando chama essa função. Isso é fundamental para a reusabilidade de funções, pois permite que você personalize o comportamento da função com diferentes dados de entrada.

Como um bônus, vou dar uma passada mais geral nas técnicas usadas no código:

  1. Funções Anônimas: Você está criando funções sem nome diretamente no local onde são necessárias. Essas funções não precisam ser declaradas com antecedência, como as funções nomeadas. (() => {})

  2. Callbacks: A função que você passa como argumento para addEventListener é um callback. Isso significa que ela será chamada de volta quando o evento ocorrer (neste caso, um clique nos botões).

  3. Closures: As funções de seta têm a capacidade de "capturar" variáveis do escopo ao seu redor. No seu caso, a função do evento tem acesso ao valor do argumento 'contexto' da função externa (alterarContexto), mesmo que essa função externa já tenha terminado de ser executada.

Essa técnica é poderosa porque permite que você escreva código mais conciso e expressivo. A função de seta inline é uma forma de definir rapidamente pequenas funções sem a necessidade de criar uma função nomeada separada.

Portanto, a expressão () => { alterarContexto('foco') } é uma função de seta anônima que será chamada quando o botão 'focoBt' for clicado. Essa função, por sua vez, chama alterarContexto('foco').

Era isso, se precisar de mais algo, ou tiver alguma dúvida acerca de algo é só me informar!

Abraços e bons estudos.