Uso dos listeners (ouvintes) de eventos
A abordagem recomendada para vincular um arquivo . js ao documento HTML é a utilização dos chamados listeners (ouvintes) de eventos ou modelos de eventos DOM nível 2. Nesse modelo, é possível registrar múltiplas funções para um mesmo elemento HTML em um mesmo evento. Essa será a forma utilizada nos exemplos do livro.
Para criar um listener, deve-se utilizar o método addEventListener, cuja sintaxe é:
elenento.addEventListener('evento', função);
O nome do evento não necessita ser precedido pela sigla ‘on’, como nos modelos anteriores. Após o nome da função, pode ainda ser informado um terceiro parâmetro. Ele é opcional e indica a forma de propagação do evento.
No Internet Explorer, esse método passou a ser suportado na versão 9. Caso necessite desenvolver para versões antigas desse navegador, pesquise sobre o método attachEvent( ). Com ele, é possível criar uma condição para verificar aspectos de compatibilidade entre os navegadores.
Vamos então criar esse arquivo para depois rodar o nosso programa. Para melhor organização, vamos colocar os arquivos JavaScript dentro de uma nova pasta chamada js dentro de cap2. Crie a pasta. Inicie um novo programa no Visual Studio Code, salve o arquivo dentro da pasta js com o nome ex2_1.js. Lembre-se de indicar que o arquivo deve ser do tipo JavaScript. Digite o código a seguir, sendo que as linhas que iniciam pelas // são comentários e, portanto, opcionais para o funcionamento do programa.
Programa JavaScript que exibe o nome informado pelo usuário no campo de edição (js/ex2_1 .js)
// declara a função mostrarOla
function mostrarOla() {
// obtém o conteúdo do campo (com id=) nome
var nome = document.getElementById("nome").value;
// exibe no parágrafo (resposta): "Olá " e o nome informado
document.getElementById("resposta").textContent = "Olá " + nome;
}
// cria uma referência ao botão (com id=) mostrar
var mostrar = document.getElementById(''mostrar");
// registra para o botão "mostrar" um ouvinte para o evento click,
// que ao ser clicado irá chamar a função mostrarOla
mostrar.addEventListener("click", mostrarOla);
Neste capítulo, foram adicionados novos conceitos e instruções de programação. Não se preocupe… eles serão revisados em diversos exercícios neste e nos demais capítulos do livro. Lembre-se de explorar os recursos do editor. Observe que, ao iniciar a digitação de um comando, o Visual Studio Code apresenta uma caixa com sugestões de comandos ou métodos contendo as letras já digitadas. Na Figura 2.4, é apresentado o funcionamento desse recurso denominado IntelliSense na digitação do método getElementById( ). Para concluir a digitação do método, pressione Tab ou Enter. É possível também obter informações sobre o método ao clicar no ícone ao final de cada linha.
Outro auxílio importante proporcionado pelo uso de um editor profissional como o Visual Studio Code refere-se à formatação (indentação) do documento. Esta também é considerada uma boa prática de programação, pois facilita a compreensão das estruturas utilizadas no programa – seja no arquivo HTML, seja no programa JavaScript. O atalho do Visual Studio Code para aplicar essa formatação aos comandos do seu programa é Alt + Shift + F. Você pode obter um resumo com as teclas de atalho disponíveis no editor acessando o menu Help / Keyboard Shortcuts Referente. Na Figura 2.5, é exibida a tela, com os comandos do arquivo HTML formatados pelo editor.
Vamos testar o nosso programa! Não se esqueça de alterar o documento HTML com o acréscimo do id para o botão (linha 15 da Figura 2.5) e da linha que referencia o arquivo JavaScript (linha 18 da Figura 2.5). Depois de realizar a alteração desses comandos, salve o arquivo HTML (e também o arquivo . js) e recarregue a página no seu browser favorito. A Figura 2.6 exibe a tela com a execução do script.
