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

Fundamentos do JavaScript

Capítulo 11

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.

Neste capítulo abordaremos alguns conceitos fundamentais do JavaScript. Esses conceitos serão importantes para compreender como JavaScript funciona, como interagir com elementos HTML e modificá-los, alterar as folhas de estilo e usar bibliotecas externas, como jQuery ou os elementos JavaScript do Bootstrap. 

Fundamentos do JavaScript

Comentários

Em JavaScript comentários de múltiplas linhas são realizados entre os caractere /* e */. JavaScript também aceita comentários de linha única.

/* Este é um comentário */
// Comentário de linha única

c11_s1.js | https://goo.gl/EdCvIs

Variáveis

Em JavaScript, variáveis são declaradas usando a palavra reservada var. Uma vez criada, a variável pode ser chamada no texto sem a necessidade da palavra var.

VariávelExplicaçãoExemplo
StringVariável de texto. Devem ser declaradas com apóstrofos ou aspas.var variavel = ‘Ola mundo’;
NuméricoNumerais inteiros ou flutuantes.var variavel = 3;
BooleanVariável verdadeira (true) ou falsa (false).var variavel = true;
ArrayColeção de dados.var meuArray = [‘um’,2,’tres’,4];

Você pode declarar várias variáveis em uma única linha. Por exemplo:

// Todas as variaveis sao declaradas aqui
var x, y, z;
// Mas sao preenchidas aqui
x = 1;
y = 2; 
z = 3;

c11_s2.js | https://goo.gl/adLEcy

Operadores matemáticos

Os operadores matemática e lógicos são parecidos com os de outras linguagens, como PHP, Python e Perl. Por exemplo:

var a = 2; 
var b = 3; 
var soma = a + b; 
var divisao = a / b; 
var subtracao = a - b; 
var multiplicacao = a * b; 
var exponenciacao = a ** b; 

# Impressao dos resultados 
alert('A soma de '+a+'+'+b+'='+soma); 
alert('A divisao de '+a+'/'+b+'='+divisao); 
alert('A subtracao de '+a+'-'+b+'='+subtracao); 
alert('A multiplicacao de '+a+'*'+b+'='+multiplicacao); 
alert('A exponenciacao de '+a+'**'+b+'='+exponenciacao);


Em JavaScript, o operador “+” permite a concatenação de strings. Se o operador de concatenação é o mesmo que o operador de somas numéricas, o que aconteceria se somássemos uma variável numérica a uma variável string?

<script type="text/javascript">
    var a = 2, b = "oi";
    var soma = a + b;
    alert(soma);
</script>

c11_s4.html | https://goo.gl/wS0LQH

O sistema converteria automaticamente a soma em strings, logo seria exibido a mensagem “2oi”. O mesmo ocorreria se a soma fosse entre o numeral 2 e a string “2”. Seria exibo na tela a string “22”.

O uso constante da função alert pode ser irritante ao usuário, uma vez que cada mensagem só será exibida após a confirmação da anterior. Para redução desse problema, pode-se utilizar o console para impressão de resultados.

Console

O console é um espaço nos navegadores destinado para que desenvolvedores possam visualizar saídas de programas e detectar erros. Cada navegador possui sem próprio console. Para abri-lo, clique em qualquer local da página e vá em “inspecionar” ou “inspecionar elementos”.

Diferenças entre navegadores
ChromeFirefox
Acessando inspecionar (clique com o botão direito)
Visualize o código-fonte. Agora clique em console.

O comando console.log imprime no console uma mensagem exibida pelo desenvolvedor. Altere o exemplo do “Olá mundo, JavaScript!” substituindo a função alert pela função console.log.

<script type="text/javascript">
    console.log('Olá mundo, JavaScript!');
</script>

c11_s5.html | https://goo.gl/Tq0hR2

Execute a página, abra o console e observe os resultados:

Estruturas de controle

Estruturas de controle, operadores de comparação e lógicos são bem parecidos aos usados em PHP.

Operadores de comparação
OperadorDescrição
==Igual.
===Igual o do mesmo tipo.
!=Diferente.
!==Diferente e de tios diferentes.
Maior que.
Menor que.
>=Maior ou igual.
<=Menor ou igual.

Os operadores lógicos podem ser and, or ou not.

OperadorDescrição
&&AND
||OR
!NOT

Comandos condicionais

Os comandos condicionais em JavaScript são similares a sua declaração em PHP, com exceção da instrução “elseif”, que é substituída por “else if” separadamente. Observe a seguir a implementação de um script que determina se um número é par ou ímpar. Para este exemplo utilizaremos o operador módulo “%” (que retorna o resultado de uma divisão).

/* Script */
var num = 7;
if (num % 2 == 0) {
    console.log(num+" eh par.");
} else if (num % 2 == 1) {
    console.log(num+" eh impar.");
} else {
    console.log("Numero invalido.");
}

c11_s6.js | https://goo.gl/E4y4No

O comando switch também é similar a sua implementação em PHP. Observe a seguir o mesmo exemplo acima implementado usando a função switch:

/* Script */
var num = 8;
var resto = num % 2;
switch (resto){
    case 0:
    console.log(num+" eh par.");
    break;
    case 1:
    console.log(num+" eh impar.");
    break;
    default:
    console.log("Numero invalido.");
    break;
}

c11_s7.js | https://goo.gl/GIJsrv

Loop while

As sintaxes dos laços for e while são bastante parecidas com as sintaxes desses comandos em PHP. O loop while percorre dados verificando se uma condição pré-determinada foi estabelecida.

/* Script */
var i = 0;
while(i < 10){
    console.log(i);
    i++;
}

c11_s8.js | https://goo.gl/KctXDL

Loop for

O loop for permite a iteração controlada sobre dados. Observe o exemplo a seguir:

for(var i = 0; i < 10; i++){
    console.log(i);
}

c11_s9.js | https://goo.gl/Mwv7x2

Ao executar ambos os scripts se obterá o seguinte resultado:

Arrays e objetos

Objetos armazenam características de um elemento. Observe a seguir o exemplo de um objeto:

var objeto = { 
    residuo:'Triptofano', 
    codigo:'W', 
    tipo:'Polar', 
    atomos:27 
};

console.log(objeto);

c11_s10.js | https://goo.gl/PQHC1M

Arrays, em JavaScript, podem ser considerados como um tipo especial de objetos. Entretanto, enquanto arrays são declarados entre colchetes, objetos são declarados entre chaves e devem apresentar pares de nomes e valores.

/* Script */
var array_1 = [1,2,3,4,5];
var array_2 = new Array(5,6,7,8,9);
console.log(array_1);
console.log(array_2);

c11_s11.js | https://goo.gl/Sb0nki

Pode-se acessar os elementos de um array usando meu_array[posição]. Podemos obter o tamanho de um array usando a função length. Além disso podemos ordenar arrays usando a função sort. Observe a seguir o uso das funções:

/* Script */
var meu_array = [
    "Fenilalanina",
    "Glicina",
    "Histidina",
    "Alanina",
    "Cisteina",
    "Aspartato"
];

//Obtendo o tamanho de um array
var x = meu_array.lenght;
console.log(x);

//Ordenando um array
var y = meu_array.sort();
console.log(y);

c11_s12.js | https://goo.gl/sx6WPg

JSON

Funções

Funções em JavaScript funcionam de maneira similar a PHP. Funções devem ser declaradas antes de sua chamada. Podem receber parâmetros e retornar dados. Observe o exemplo da implementação de uma função que recebe dois numerais e retorna o resultado da soma:

/* Script soma */
function soma(a,b){
    return a + b;
}
var x = 1;
var y = 2; 
var resultado = soma(x,y);
console.log(resultado); //3

c11_s13.js | https://goo.gl/EHxk7n

Eventos

Eventos permitem que ações que ocorrem no HTML acionem interações com o código JavaScript. Eventos podem ser:

  • Quando uma página é carregada;
  • Quando um botão é clicado;
  • Quando passamos o mouse por cima de um elemento HTML;
  • Quando digitamos em um campo de texto;
  • Dentro outras inúmeras ações.

Eventos podem ser descritos em um elemento HTML usando um atributo específico:

<elemento evento= “alguma_acao_javascript”>

A seguir uma lista de eventos HTML adaptada do site W3Schools (https://www.w3schools.com/js/js_events.asp):

EvendoDescrição
onchangeQuando um elemento HTML foi mudado.
onclickQuando um elemento é clicado.
onmouseoverQuando o mouse passa por cima de um elemento.
onmouseoutQuando o mouse sai de cima de um elemento.
onkeydownQuando uma tecla do teclado é digitada.
onloadQuando uma página é carregada.

Por exemplo, vamos criar um botão que recebe diversos tipos de evento. Primeiramente crie um arquivo HTML.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script src="one.js"></script>
</head>
<body onload="carregado()">
    <button onclick="fuiClicado();">Eu sou um botão</button><br><br>
    <button onmouseover="mouseEmCima();" onmouseout="mouseFora();" >Eu sou outro botão</button><br><br>
    <input type="text" onkeydown="tecladoUsado();" placeholder="Eu sou um texbox :D"><br><br>
    <input type="text" placeholder="Digita em mim" onchange="mudanca();" ><br><br>
    <input type="text" placeholder="Digita em mim também">
</body>
</html>

c11_s14.html | https://goo.gl/5F50yg

Ele terá dois botões e três caixas de texto:

Agora crie um arquivo JavaScript chamado “one.js”.

//onload
function carregado(){
    alert("A página já está carregada!");
}
//onclick
function fuiClicado(){
    alert("Clicaram em mim!");
}
//onmouseover
function mouseEmCima(){
    alert("Tem um mouse em mim!");
}
//onmouseout
function mouseFora(){
    alert("Ufa, ele já saiu!");
}
//onkeydown
function tecladoUsado(){
    alert("Ei, não digita em mim! Não gosto de letras! Tente digitar na caixa de texto vizinha!");
}
//onchange
function mudanca(){
    alert("Não me abandone!");
}

c11_s15.js | https://goo.gl/BWcgXo

Ao abrir a página HTML pela primeira vez você receberá uma mensagem dizendo que ela foi carregada. Na tag <body> usamos o evento “onload” para chamar a função carregado() quando a página for carregada. Essa função simplesmente exibe uma mensagem na tela. Ao pressionar OK, ela desaparece e só volta a aparecer se a página for recarregada.

Agora vamos brincar um pouco com o arquivo criado. Clique no primeiro botão. Observe que uma mensagem será exibida. Nesse exemplo, você usou o evento “onclick” para chamar a função fuiClicado(). Essa função exibe um alerta na página dizendo simplesmente que o botão foi clicado.

Agora passo o mouse sobre o “outro botão”. Esse botão logo avisa que existe um mouse sobre ele. Nesse botão foi utilizado o evento “onmouseover” para carregar a função mouseEmCima().

Ao clicar em OK, uma nova mensagem surge na tela. Além do evento “onmouseover”, utilizou-se o evento “onmouseout” que chama a função mouseFora(). Esse evento detecta se o mouse saiu de cima do elemento.

Agora clique na primeira textbox e digite uma mensagem. Você perceberá que não será possível. Usamos o evento “onkeydown” para detectar se uma tecla foi digitada e exibir uma mensagem.

Na segunda textbox digite uma mensagem. Perceba que nada de diferente ocorreu. Agora tente clicar na próxima caixa de texto e veja o que acontece.

A segunda textbox exibe a mensagem: “não me abandone!” Você pode pensar que ela é muito carente, entretanto utilizamos o evento “onchange” para detectar se houve a mudança para outro elemento HTML. Se sim, a função mudanca() é chamada, exibindo a mensagem em questão.

Os exemplos apresentados podem parecer simples e supérfluos, mas utilizados de maneira correta podem fazer diversas funções de grande importância, como por exemplo, validação de formulários sem a necessidade de enviar dados ao servidor. Qual a necessidade de enviar dados ao servidor simplesmente para verificar se uma data está correta, se um nome foi digitado com letra minúscula ou se um campo obrigatório foi esquecido? É claro que algumas validações de grande importância deverão ser verificadas novamente no servidor, mas quanto menos validações em server-side forem feitas, melhor o desempenho do site.

DOM

O DOM (Document Object Model) é um padrão criado pela W3C que define acessos ao documentos HTML. O DOM define uma árvore que padroniza a forma a qual os scripts possam fazer manipulações.

A partir do carreamento de uma página, ela se torna um documento. Na representação da árvore, o documento é a raiz. A seguir, vêm os elementos. As tags representam elementos da árvore. Elementos podem ter nós filhos e atributos. Podem também apresentar textos, que é o conteúdo das tags.

Por meio dessa estrutura criada é possível manipular esses elementos por meio do JavaScript.

Métodos

Manipulação de um documento por JavaScript pode ocorrer por meio de três métodos: getElementById (busca elementos pelo ID), getElementsByTagName (busca elementos pelo nome da tag), e getElementsByClassName (busca elementos pelo nome da classe).

Na tabela a seguir vemos alguns métodos que permitem  a mudança de elementos HTML.

MétodoDescrição
element.innerHTML =  novo conteúdo htmlAltera o interior de um elemento HTML.
element.attribute = novo valorMuda o atributo valor de um elemento HTML.
element.setAttribute (atributo, valor)Muda o atributo valor de um elemento HTML.
element.style.property = novo estiloAltera o estilo de um elemento HMTL.

Fonte: adaptado de W3Schools https://www.w3schools.com).

Adicionando ou removendo elementos

Você pode adicionar e remover elementos com os seguintes métodos:

MétodoDescrição
document.createElement()Cria um novo elemento HTML
document.removeChild()Remove um elemento HTML
document.appendChild()Adiciona um elemento HTML
document.replaceChild()Substitui um elemento HTML
document.write()Escreve dentro de um elemento HTML.

Fonte: adaptado de W3Schools (https://www.w3schools.com).

Eventos e DOM

Eventos podem ser utilizados para desencadear mudanças no leiaute de uma página por meio da manipulação do DOM.

document.getElementById(id).onclick = função ( ){
// código
}

Alterando o CSS

No exemplo a seguir, vamos usar os métodos aprendidos para alterar a cor de um texto. Primeiro vamos criar um texto. A seguir vamos criar um botão ao ser clicado altera a cor do texto. Vamos separar HTML, CSS e JS em arquivos separados.

Primeiro crie o arquivo CSS (vamos chamá-lo de “estilo.css”):

/* Arquivo CSS */
#texto { color: black; font-size: 20px;  }

c11_s16.css | https://goo.gl/xcYeLW

A seguir vamos criar um arquivo JavaScript (vamos chamá-lo de “script.js”):

/* Arquivo JS */
function mudaCor(){
    document.getElementById('texto').style.color = 'blue';
    document.getElementById('texto').style.textDecoration = 'underline';
}

c11_s17.js | https://goo.gl/IFeki4

Por fim, vamos criar a página HTML (chamada de “index.html”):

<!DOCTYPE HTML>
<html>
<head>
    <title>DOM</title>
    <meta charset="utf-8">
    <!-- Carregamos o estilo no cabeçalho -->
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <!-- Nosso texto está dentro de uma tag <p> -->
    <p id="texto">Eu amo Bioinformática</p>
    <!-- Ao clicar nesse botão, a cor muda e um sublinhado é inserido -->
    <button onclick="mudaCor()">Mudar cor</button>
    <footer>
        <!-- Nosso script é carregado no footer -->
        <script src="script.js"></script>
    </footer>
</body>
</html>

c11_s18.html | https://goo.gl/6DW1Ai

Agora execute a página e observe os resultados. Compare a diferença antes de clicar e depois de clicar no botão criado.

Antes de clicar no botãoDepois de clicar no botão

O texto presente na tag com id “texto” (primeira tela) recebe a cor preta e tamanho 20. Abaixo dele inserimos um botão que ao ser clicado chama a função “mudaCor()”. Observe que declaramos nosso arquivo JavaScript dentro da tag <footer>. Carregar os arquivos JavaScript no final do arquivo permite que caso o script falhe em algum momento, não haja problemas no carregamento da página.

Ao clicar no botão, a função mudaCor() inicialmente busca o elemento cujo ID seja igual a “texto” e o colore de azul. IDs devem ser únicos, logo ele só encontrará um único resultado. Na linha seguinte a mesma função document.getElementById(‘texto’) é repetida, mas dessa vez aplica o estilo sublinhado sob o texto. Se você atualizar a página, o texto digitado voltará a formatação original.

Função random

Algumas vezes gerar números aleatórios por ser de grande importância para programas. JavaScript apresenta a função random para auxiliar nessas tarefas.

Math.random();

c11_s19.js | https://goo.gl/gKv2V0

Usando essa função, JavaScript irá retornar um número aleatório entre 0 e 1. Poderíamos alterar esse código para gerar um número aleatório entre 0 e 1000, por exemplo, desta forma:

Math.random() * 1000;

c11_s20.js | https://goo.gl/DQEK3f

Entretanto essa função retorna um número do tipo flutuante. Podemos usar a função Math.floor em combinação com Math.random para gerar um número inteiro.

Math.floor(Math.random() * 1000);

c11_s21.js | https://goo.gl/gHU54L

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.