Primeiro, o que é uma página dinâmica? De uma maneira simples, é uma página HTML com a capacidade de se atualizar (alterar os dados apresentados na tela) sem ser necessário recarregar a página. Antes, era necessário recarregar a página para que fosse possível consultar no banco de dados do servidor as novas informações a serem apresentadas. Hoje, isso pode ser feito utilizando-se tecnologias como AJAX para receber os dados em formato JSON ou XML e Javascript para interpretá-los.
Vejamos um exemplo: você está no Twitter, meu perfil por exemplo, quando alguém escreve algum tweet. O que você prefere: atualizar a página só para ler esse tweet, ou ver uma notificação onde só é necessário um clique para atualizar a timeline? A segunda opção, é claro. É nessa parte que entra o Javascript!
Vejamos um exemplo básico de como é possível alterar uma página dinamicamente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><html> <head> <title>Curso de Javascript do Blog infognosis</title> </head> <body> <form id="formulario" onsubmit="formSubmit(); return false;"> <label for="nome">Qual é o seu nome? </label> <input type="text" id="nome" placeholder="Digite o seu nome"> <input type="submit"> </form> <!-- uma div vazia, por enquanto... --> <div id="visitantes"> </div> <script type="text/javascript"> function formSubmit() { // pegando o valor digitado pelo usuário var nome = document.getElementById("nome"); // a div onde vamos exibir os dados var visitantes = document.getElementById("visitantes"); // aqui adicionamos um nova linha ao conteúdo existente visitantes.innerHTML += "<br>" + nome.value + " esteve aqui."; // limpando a caixa de texto nome.value = ""; } </script> </body></html> |
Esse exemplo muito simples apenas pega o valor digitado pelo usuário e exibe ele na página (ou seja, o conteúdo da página foi atualizado, sem ser necessário recarregar a página :D). Repare que na tag <form> definimos que no evento onsubmit a nossa função deveria ser executada e deveria ser retornado falso. Esse return false no final faz uma parte importante da mágica: evita que a página seja atualizada.
Nesse exemplo usamos a entrada do usuário para atualizar a página, mas é possível também incluir dados externos! Mas isso é assunto para o próximo post.
Postar um comentário