Curso de Javascript (parte 2)

Share

Hoje continuamos com a série de posts sobre Javascript. O Javascript, como já foi apresentado no último post, é uma linguagem de programação que permite a criação de uma página dinâmica. É isso que veremos nesse post.

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, vendo o perfil do Blog Seja Livre 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 Seja Livre</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>
<!DOCTYPE html>
<html>
    <head>
        <title>Curso de Javascript do Blog Seja Livre</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.

Quer continuar por dentro das novidades do Blog Seja Livre? Siga o nosso perfil no TWITTER, curta a nossa página no FACEBOOK ou adicione o Blog Seja Livre nos seus círculos do GOOGLE+.