Categorias
Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript

jQuery

Capítulo 12

Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.

jQuery é uma biblioteca JavaScript de código aberto desenvolvida John Resig em 2006 para simplificar a criação de scripts JavaScript e a interação com o DOM.

Você pode conseguir o jQuery na página: <https://jquery.com>. Você também pode usar o jQuery sem a necessidade de baixar o código-fonte. Para isso insira na sua página o seguinte código:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

c12_s1.html | https://goo.gl/2H4ubT

Hello world, jQuery!

Vamos aprender a fazer uma simples manipulação usando jQuery. Primeiro crie um simples arquivo HTML:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="div1"></div>
    <footer>
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="script.js"></script>
    </footer>
</body>
</html>

c12_s2.html | https://goo.gl/O8GR7K

Agora vamos criar o arquivo “script.js”. Será nesse arquivo que iremos inserir manipulações com jQuery. Lembre-se que não há problemas em misturar código JavaScript com jQuery.

/* jQuery */
$('#div1').text('Hello world, jQuery!');

c12_s3.js | https://goo.gl/MzkMUJ

Essa sintaxe seria o equivalente em JavaScript a:

/* JavaScript */
document.getElementById('div1').innerHTML = 'Hello world, JavaScript';

c12_s4.js | https://goo.gl/hTB7OF

Observe o quão mais simples é o uso do jQuery comparado com o JavaScript tradicional.

Em jQuery começamos uma manipulação na árvore DOM com o caractere $ cifrão (assim como PHP). A seguir declaramos o que queremos manipular (entre aspas ou apóstrofos). Nesse exemplo, nossa ação ocorreu na div #div1. Por fim, usamos a função text (separada por um ponto do resto) para gravar um texto na div. O texto deve ser declarado entre aspas ou apóstrofo.

Escondendo um elemento

Vamos agora demonstrar o poder do jQuery. Vamos usá-lo para esconder um elemento após um período de tempo. Para isso vamos usar a função fadeOut(tempo), onde tempo é dado em milissegundos.

Na página HTML adicione:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <meta charset="utf-8">
    <style>#div1{ width: 100px; height: 100px; background-color:red; } </style>
</head>
<body>
    <div id="div1"></div>
    <footer>
        <!-- jQuery --><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="script.js"></script>
    </footer>
</body>
</html>

c12_s5.html | https://goo.gl/ZtUSg5

Agora crie o arquivo script.js:

/* jQuery */
$('#div1').fadeOut(5000);

c12_s6.js | https://goo.gl/C1ddzk

Após o período de 5 segundos (5000 milissegundos), a imagem irá desaparecer:

0 ms2500 ms5000 ms

Segundo a documentação oficial do jQuery, uma página não pode ser manipulada de maneira segura enquanto o documento não estiver “pronto”, ou seja, enquanto todos os componentes necessários não tenham sido carregados. Por isso, antes de usar comandos jQuery é necessário incluir $(document).ready(). Logo, nosso código ficaria assim:

/* jQuery */
$(document).ready(function(){
    $('#div1').fadeOut(5000);
});

c12_s7.js | https://goo.gl/aK8F2J

Mudando CSS

Aprenderemos agora a usar o jQuery para fazer algumas modificações no CSS. Vamos criar um botão que ao ser clicado altera elementos presentes em uma div.

Primeiro crie a página HTML:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <meta charset="utf-8">
    <link href="estilo.css" rel="stylesheet">
</head>
<body>
    <button id="botao">Clique em mim</button>
    <div id="texto">Eu amo Bioinformática</div>
    <footer>
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="script.js"></script>
    </footer>
</body>
</html>

c12_s8.html | https://goo.gl/LkbSQb

Agora vamos adicionar alguns efeitos ao clicar no botão. Por exemplo, a cor da fonte mudará de preto para azul, adicionaremos uma linha sublinhada, aumentaremos o espaçamento interno e colocaremos um plano de fundo cinza. Não estamos fazendo isso em busca de “beleza”, mas sim para demonstrar o potencial do jQuery.

 Agora crie o arquivo “script.js”:

$(document).ready(function(){
    $("#botao").click(function(){
        $("#texto").css("color","blue");
        $("#texto").css("text-decoration","underline");
        $("#texto").css("padding","10px");
        $("#texto").css("background-color","#ccc");
    });
});

c12_s9.js | https://goo.gl/Fpv76d

Agora vamos entender um pouco do script. Primeiro verificamos se o documento estava pronto em: $(document).ready(). Se o resultado for positivo ele chama uma função que verifica se o elemento de id #botão foi clicado: $(“#botao”).click(). Se esse botão for clicado, o script faz várias alterações em elementos presentes na div de id “texto”, como por exemplo, altera a cor para azul: $(“#texto”).css(“color”,”blue”).

Com o que aprendeu nesse tópico, você pode fazer qualquer alteração no CSS usando técnicas aprendidas anteriormente combinadas com jQuery.

Lendo arquivos locais com JQuery

No exemplo a seguir vamos usar jQuery para ler um arquivo de texto e imprimi-lo na tela. Crie um arquivo chamado “arquivo.txt” e coloque o conteúdo que quiser.

Crie a página HTML:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="texto"></div>
    <footer>
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="script.js"></script>
    </footer>
</body>
</html>

c12_s10.html | https://goo.gl/YokX5u

Agora no arquivo JavaScript:

var nome_arquivo = "arquivo.txt";
$.post(nome_arquivo, function(d) {
    $('#texto').text(d);
});

c12_s11.js | https://goo.gl/jdi4LT

Neste exemplo, lemos o “arquivo.txt” e exibimos o conteúdo na div texto. Para isso usamos a função post. Observe que entre o cifrão e a palavra post existe um ponto. Esse ponto indica que o carregamento deve ser assíncrono.

Após o recebimento do documento usando o método post, uma função envia como parâmetro os dados numa variável chamada d. Essa variável é impressa na div texto.

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

Capítulo 1
Introdução ao HTML

Capítulo 2
Fundamentos do HTML

Capítulo 3
Estrutura de páginas

Capítulo 4
Folhas de Estilo em Cascata (CSS)

Capítulo 5
Bootstrap

Capítulo 6
Iniciando a construção de um Website

Capítulo 7
Introdução ao PHP

Capítulo 8
Fundamentos do PHP

Capítulo 9
Transformando um Website em dinâmico

Capítulo 10
Introdução ao JavaScript

Capítulo 11
Fundamentos do JavaScript

Capítulo 12
jQuery

Capítulo 13
Bootstrap JavaScript

Capítulo 14
D3.js

Capítulo 15
3Dmol

Capítulo 16
Projeto Final

Epílogo
Referências Bibliográficas

Cite:

MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .

 

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.