Implementando JQuery

Para quem deseja oferecer um serviço de qualidade na internet, organizando, apresentando e disponibilizando melhor o seu site ou blog tem que conhecer os recursos que já existem e estão disponíveis na web através do framework JQuery. Feito inteiramente em JavaScript ele é muito útil para quem não tem muito tempo ou conhecimento para desenvolver aplicações do nada (como eu). Alguns recursos chegam a ser tão fáceis de serem aplicados que é quase impossível não lançar mão deles na hora de construir um site. Em meus sites crio com ele páginas iniciais e implemento recursos que melhoram a entrega de informação ao usuário. Uso até mesmo offline pois como JQuery roda no navegador (pois é feita em JavaScript) é possível fazer aplicações rápidas para resolver problemas cotidianos como uma apresentação de slides, mural de recados etc. Nesta postagem, irei mostrar quais são os requisitos básicos para você implementar JQuery em seu site, blog ou Desktop.

1. O que preciso saber/conhecer?

Praticamente, para fazer rodar um recurso em JQuery você pode precisar de quase nenhum conhecimento sobre desenvolvimento de site, a não ser um pouquinho (muito pouco mesmo) de HTML. Deve conhecer o suficiente para alterar um pedaço de uma linha de código sem bagunçar o resto. Precisamente, você deverá saber:

a) Organizar um espaço virtual (online ou no Desktop) com os arquivos HTML e JavaScript interligados – em nosso exemplo isso significa, simplesmente, baixar os arquivos e colocá-los na mesma pasta, pois o arquivo HTML já contem uma chamada para o arquivo JavaScript;

html-jquery

b) Abrir, alterar e salvar arquivos do tipo texto nos formatos HTML e JavaScript – para que você possa personalizar o conteúdo de um JQuery você precisará abrir os arquivos em um editor de textos simples (gedit, bloco de notas etc.), alterar textos nos lugares onde isso se aplica e finalizar as alterações salvando os arquivos;

c) Exibir as alterações em um navegador web – JQuery roda em qualquer navegador moderno e para fazê-lo funcionar basta abrir o arquivo HTML correspondente; todas as vezes que fizer alterações em qualquer conteúdo você deverá recarregar a página do site ou recurso para ver os resultados.

2. Como ele funciona?

Como sua função principal é dinamizar o desenvolvimento de sites e aplicações web, basicamente, JQuery é um arquivo com código em javascript chamado a partir de um arquivo com código em HTML.

a) O código completo HTML pode ser como este (index.html):

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Implementando JQuery</title>
    </head>
    <body>
        <a href="#" id="abre">Clique aqui para MOSTRAR o texto</a>
        <div id="texto">
        Texto apresentado.
        </div>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function(){
                $("#texto").hide();
                $("#abre").click(function(){
                    $("#texto").show(200);
                });
            });
        </script>
    </body>
</html>

 Acima temos um código um HTML básico composto de suas tags. Temos também uma chamada para o arquivo “jquery.js”, como podemos ver abaixo de forma isolada:

        <script src="jquery.js"></script>

E um código javascript embutido que produz um efeito simples, como mostrado abaixo:

        <script>
            $(document).ready(function(){
                $("#texto").hide();
                $("#abre").click(function(){
                    $("#texto").show(200);
                });
            });
        </script>

Para a execução deste código basta que os arquivos index.html e jquery.js estejam na mesma pasta e que o “index.html” seja aberto a partir de um navegador web.

[su_button url=”http://professorvirtual.org/wp-content/uploads/2014/07/index.html” target=”blank”]Veja o exemplo[/su_button]

 

Faça um teste e tente rodar o exemplo acima em sua máquina baixando os arquivos:

[easy_media_download url=”http://professorvirtual.org/wp-content/uploads/2014/07/index.html” text=”index.html” force_dl=”1″] | [easy_media_download url=”http://professorvirtual.org/wp-content/uploads/2014/07/jquery.js” text=”jquery.js” force_dl=”1″]

 

3. Como e o quê modificar

Quanto mais você modificar códigos de outros mais aguçada ficará sua percepção e entendimento de como eles funcionam. Foi assim comigo e espero que com você também seja. Vejamos o que normalmente podemos alterar em nossos códigos JQuery com poucos conhecimentos sobre o assunto:

a) Textos nos arquivos HTML como títulos e conteúdos das páginas ficam entre as tags: <tag>conteúdo</tag>; em nosso exemplo são os textos em português; palavras entre aspas;
b) Nas partes do código JavaScript, o que podemos alterar, possivelmente, são os valores; eles podem ser encontrados de muitas formas, mas no caso de nosso exemplo temos o tempo de demora para que o texto apareça complementamente na função “show(200)”; aqui o tempo de aparição é de 200 milissegundos);
c) Nos códigos JQuery propriamente ditos (com extensão “.js”) pouca ou quase nenhuma alteração é recomendada, mas às vezes pode ser necessário.

4. Onde encontrar recursos

Vou listar aqui em baixo alguns dos sites que possuem um bom número de plugins jquery bem trabalhos e à disposição de forma gratuita:

http://plugins.jquery.com/
http://www.jqwidgets.com/
http://www.unheap.com/
http://ngiriraj.com

Nosso exemplo não nos permite criar muitas oportunidades, por isso, deixaremos para nossa próxima postagem toda a magia dos recursos disponíveis na internet que utilizam JQuery. Abraço e até lá!

Facebook Comment