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.
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ável | Explicação | Exemplo |
String | Variável de texto. Devem ser declaradas com apóstrofos ou aspas. | var variavel = ‘Ola mundo’; |
Numérico | Numerais inteiros ou flutuantes. | var variavel = 3; |
Boolean | Variável verdadeira (true) ou falsa (false). | var variavel = true; |
Array | Coleçã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 | |
Chrome | Firefox |
![]() | ![]() |
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 | |
Operador | Descriçã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.
Operador | Descriçã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

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):
Evendo | Descrição |
onchange | Quando um elemento HTML foi mudado. |
onclick | Quando um elemento é clicado. |
onmouseover | Quando o mouse passa por cima de um elemento. |
onmouseout | Quando o mouse sai de cima de um elemento. |
onkeydown | Quando uma tecla do teclado é digitada. |
onload | Quando 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étodo | Descrição |
element.innerHTML = novo conteúdo html | Altera o interior de um elemento HTML. |
element.attribute = novo valor | Muda o atributo valor de um elemento HTML. |
element.setAttribute (atributo, valor) | Muda o atributo valor de um elemento HTML. |
element.style.property = novo estilo | Altera 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étodo | Descriçã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ão | Depois 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:
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 .