Curso de Javascript (parte 3)

Share

Como vimos na última parte desse curso de Javascript, hoje vamos começar a ver algo um pouco mais avançado: páginas dinâmicas utilizando Ajax.

Para começar, precisamos de algumas ferramentas:

  • se você ainda não tem um servidor instalado para testes, procure como instalar Apache + PHP + algum banco de dados (MySQL ou PostreSQL) na sua distribuição. Vamos precisar disso mais para frente.
  • procure conhecer alguns Frameworks Javascript. Existem alguns muito utilizados que é praticamente impossível não conhecer.
  • habitue-se com as ferramentas de desenvolvedor do seu navegador. No Chrome/Chromium, um conjunto completo de ferramentas já vem instalado. No Firefox, uma excelente alternativa é o Firebug.

Entre os frameworks Javascript, nessa série de posts pretendo utilizar inicialmente jQuery, por ser atualmente o mais utilizado no mundo. Você pode baixá-lo aqui e acessar a documentação aqui.

jQuery

Para incluir a biblioteca jQuery na sua página, o código mais simples possível é esse:

1
2
3
4
5
6
7
<html>
    <head>
        <script src="/path/to/jquery-1.7.1.min.js" type="text/javascript"></script>
        <!-- OU  -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
</html>
<html>
    <head>
        <script src="/path/to/jquery-1.7.1.min.js" type="text/javascript"></script>
        <!-- OU  -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
</html>

Dentro da tag <head>, temos duas opções: adicionar o caminho do script que você baixou (ideal para desenvolvimento local), ou utilizar o acesso que a Google fornece livremente (e que muitos sites utilizam, sendo provável que o usuário já tenha uma cópia em cache desse arquivo e sua página deve carregar mais rápido).

Depois de incluir o jQuery na nossa página, vamos fazer alguma coisa com ele. Algo simples, como acessar a API do Youtube e pesquisar pelos 5 vídeos mais recentes sobre Linux:

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
<html>
    <head>
        <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
            // isso será executado ao carregar a página
            $(document).ready(function() {
                // acessa a API do Youtube e pesquisa por vídeos sobre Linux
                // vamos usar o formato JSON para receber os resultados (o padrão é XML)
                $.get('http://gdata.youtube.com/feeds/api/videos?q=Linux&alt=json&max-results=5', function(result) {
                    // esses são os resultados retornados na pesquisa
                    var entries = result.feed.entry;
                    // vamos exibir os dados de cada um
                    $.each(entries, function(index, item) {
                        var title = item.title.$t,      // o título
                            desc  = item.content.$t,    // a descrição
                            link  = item.link[0].href;  // o link
                        // exibindo os dados na página
                        // aqui você poderia formatar a saída, adicionar estilos CSS, etc.
                        // vamos só exibir de forma básica
                        $('body').append('<h3><a href="' + link + '">' + title + '</a></h3><p>' + desc + '</p>');
                    });
                });
            });
        </script>
    </body>
</html>
<html>
    <head>
        <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
            // isso será executado ao carregar a página
            $(document).ready(function() {
                // acessa a API do Youtube e pesquisa por vídeos sobre Linux
                // vamos usar o formato JSON para receber os resultados (o padrão é XML)
                $.get('http://gdata.youtube.com/feeds/api/videos?q=Linux&alt=json&max-results=5', function(result) {
                    // esses são os resultados retornados na pesquisa
                    var entries = result.feed.entry;
                    // vamos exibir os dados de cada um
                    $.each(entries, function(index, item) {
                        var title = item.title.$t,      // o título
                            desc  = item.content.$t,    // a descrição
                            link  = item.link[0].href;  // o link
                        // exibindo os dados na página
                        // aqui você poderia formatar a saída, adicionar estilos CSS, etc.
                        // vamos só exibir de forma básica
                        $('body').append('<h3><a href="' + link + '">' + title + '</a></h3><p>' + desc + '</p>');
                    });
                });
            });
        </script>
    </body>
</html>

Esse é um exemplo bem simples. Repare que ao exibir os dados nós não formatamos nada. Apenas exibimos o título com link para o vídeo e a descrição. Mas a API do Youtube retorna muito mais dados, como nome do usuário que postou o vídeo, data de publicação, e muito mais! Não é o nosso objetivo aprender a API do Youtube aqui, mas eu recomendo acessar diretamente a URL que utilizamos na requisição GET e estudar o retorno do Youtube para ver o que mais é possível (caso esteja interessado).

Espero que tenham entendido o exemplo. Caso algo não tenha ficado muito claro, comentem. Se tiverem alguma ideia, comentem também! Até 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+.