Explorando Funções e Eventos em JavaScript

Prévia do material em texto

Explorando Funções e Eventos em JavaScript A programação em JavaScript é uma habilidade essencial para desenvolvedores web, pois permite a criação de interatividade e dinamismo em páginas da internet. Um dos conceitos fundamentais que todo programador deve dominar são as funções . Funções em JavaScript são blocos de código que podem ser definidos uma vez e executados várias vezes, facilitando a reutilização de código e a organização do mesmo. Elas podem receber parâmetros, que são valores passados para a função, e podem retornar um resultado após a execução. Por exemplo, uma função simples que soma dois números pode ser definida da seguinte forma: function soma(a, b) { return a + b;
} Neste exemplo, a função soma recebe dois parâmetros, a e b , e retorna a soma deles. Para utilizá-la, basta chamá-la passando os valores desejados: let resultado = soma(5, 3);
console.log(resultado); // Saída: 8 Além das funções, outro conceito crucial em JavaScript são os eventos . Eventos são ações que ocorrem em uma página web, como cliques de mouse, pressionamento de teclas ou movimentação do mouse. O JavaScript permite que os desenvolvedores respondam a esses eventos, tornando as páginas mais interativas. Por exemplo, podemos adicionar um evento de clique a um botão que, ao ser pressionado, executa uma função específica. Veja o exemplo abaixo: <button id="meuBotao">Clique aqui</button>
<script> document.getElementById('meuBotao').addEventListener('click', function() { alert('Botão clicado!'); });
</script> Neste código, ao clicar no botão, uma mensagem de alerta será exibida. O método addEventListener é utilizado para associar a função de alerta ao evento de clique do botão. Essa abordagem permite que o desenvolvedor crie uma experiência de usuário mais rica e responsiva. Para ilustrar a utilização de funções e eventos, vamos resolver um exercício prático. Suponha que você deseja criar uma página que calcula a soma de dois números inseridos pelo usuário em campos de entrada. O código HTML e JavaScript para isso seria: <input type="number" id="numero1" placeholder="Digite o primeiro número">
<input type="number" id="numero2" placeholder="Digite o segundo número">
<button id="calcular">Calcular</button>
<p id="resultado"></p>
<script> function soma(a, b) { return a + b; } document.getElementById('calcular').addEventListener('click', function() { let num1 = parseFloat(document.getElementById('numero1').value); let num2 = parseFloat(document.getElementById('numero2').value); let resultado = soma(num1, num2); document.getElementById('resultado').innerText = 'Resultado: ' + resultado; });
</script> Neste exemplo, temos dois campos de entrada para o usuário digitar os números e um botão para calcular a soma. Quando o botão é clicado, a função soma é chamada com os valores dos campos de entrada, e o resultado é exibido na página. Essa prática não só demonstra a criação de funções e eventos, mas também a interação com o DOM (Document Object Model), que é uma parte fundamental do desenvolvimento web. Destaques: Funções em JavaScript permitem a reutilização de código e organização. Eventos são ações que ocorrem em uma página web e podem ser manipulados com JavaScript. O método addEventListener associa funções a eventos, como cliques de botão. Exemplo prático: calcular a soma de dois números inseridos pelo usuário. A interação com o DOM é essencial para criar páginas web dinâmicas e interativas.