Declarar variável: var
var resultado = 102 / 17;
undefined
O resultado de uma variável é sempre undefined,
resultado = resultado + 10;
16
var idade = 10;
var += 10;
20
O ponto e vírgula no final não é obrigatório.
Colocar o script na tag body: <body>
<h1>JavaScript</h1>
<h2>Linguagem de Programação</h2>
<script>
alert("Olá, Mundo!");
</script>
</body>
Arquivo externo:
No arquivo HTML
<script type="text/javascript" src="js/hello.js"></script>
Arquivo externo js/hello.js
alert("Olá, Mundo!");
Com a separação do script em arquivo externo é possível reaproveitar alguma funcionalidade em mais de
uma página.
querySelector
Antes de sair alterando nossa página, precisamos em primeiro lugar acessar no JavaScript o elemento que
queremos alterar. Como exemplo, vamos alterar o conteúdo de um título da página. Para acessar ele:
document.querySelector("h1")
Esse comando usa os seletores CSS para encontrar os elementos na página. Usamos um seletor de nome de
tag mas poderíamos ter usado outros:
document.querySelector(".class")
document.querySelector("#id")
Se você vai utilizar várias vezes um mesmo elemento da página, é possível salvar o resultado de qualquer
querySelector numa variável:
var titulo = document.querySelector("h1")
Executando no console, você vai perceber que o elemento correspondente é selecionado. Podemos então
manipular seu conteúdo. Você pode ver o conteúdo textual dele com:
titulo.textContent
Essa propriedade, inclusive, pode receber valores e ser alterada:
titulo.textContent = "Novo título"
querySelectorAll
As vezes você precisa selecionar vários elementos na página. Várias tags com a classe .cartao por
exemplo. Se o retorno esperado é mais de um elemento, usamos querySelectorAll que devolve uma lista
de elementos (array).
document.querySelectorAll(".cartao")
Podemos então acessar elementos nessa lista através da posição dele (começando em zero) e usando o
colchetes:
// primeiro cartão
document.querySelectorAll(".cartao")[0]
9.8 Funções e os eventos do DOM
Apesar de ser interessante a possibilidade de alterar o documento todo por meio do JavaScript, é muito
comum que as alterações sejam feitas quando o usuário executa alguma ação, como por exemplo, mudar o
conteúdo de um botão ao clicar nele e não quando a página carrega. Porém, por padrão, qualquer código
colocado no <script>, como fizemos anteriormente, é executado assim que o navegador lê ele.
Para guardarmos um código para ser executado em algum outro momento, por exemplo, quando o usuário
clicar num botão, é necessário utilizar alguns recursos do JavaScript no navegador. Primeiro vamos criar
uma função:
function mostraAlerta() {
alert("Funciona!");
}
// fazendo uma chamada para a função mostraAlerta, que será executada nesse momento
mostraAlerta()
Executar função quando clicar no botão:
function mostraAlerta() {
alert("Funciona!");
}
// obtendo um elemento através de um seletor de ID
var botao = document.querySelector("#botaoEnviar");
botao.onclick = mostraAlerta;
Quais eventos existem?
Existem diversos eventos que podem ser utilizados em diversos elementos para que a interação do usuário
dispare alguma função:
oninput: quando um elemento input tem seu valor modificado
onclick: quando ocorre um click com o mouse
ondblclick: quando ocorre dois clicks com o mouse
onmousemove: quando mexe o mouse
onmousedown: quando aperta o botão do mouse
onmouseup: quando solta o botão do mouse (útil com os dois acima para gerenciar drag'n'drop)
onkeypress: quando pressionar e soltar uma tecla
onkeydown: quando pressionar uma tecla
onkeyup: quando soltar uma tecla
onblur: quando um elemento perde foco
onfocus: quando um elemento ganha foco
onchange: quando um input, select ou textarea tem seu valor alterado
onload: quando a página é carregada
onunload: quando a página é fechada
onsubmit: disparado antes de submeter o formulário (útil para realizar validações)
9.11 Manipulando strings
Uma variável que armazena um string faz muito mais que isso! Ela permite, por exemplo, consultar o seu
tamanho e realizar transformações em seu valor.
var empresa = "Caelum";
empresa.length; // tamanho da string
empresa.replace("lum","tano"); // retorna Caetano
A partir da variável empresa, usamos o operador ponto seguido da ação replace.
Conversões
O JavaScript possui funções de conversão de string para number:
var textoInteiro = "10";
var inteiro = parseInt(textoInteiro);
var textoFloat = "10.22";
var float = parseFloat(textoFloat);
9.13 Concatenações
É possível concatenar (juntar) tipos diferentes e o JavaScript se encarregará de realizar a conversão entre os
tipos, podendo resultar em algo não esperado.
String com String
var s1 = "Caelum";
var s2 = "Inovação";
console.log(s1 + s2); // imprime CaelumInovação
String com outro tipo de dados
Como vimos, o JavaScript tentará ajudar realizando conversões quando tipos diferentes forem envolvidos
numa operação, mas é necessário estarmos atentos na maneira como ele as realiza:
var num1 = 2;
var num2 = 3;
var nome = "Caelum"
// O que ele imprimirá?
// Exemplo 1:
console.log(num1 + nome + num2); // imprime 2Caelum3
// Exemplo 2:
console.log(num1 + num2 + nome); // imprime 5Caelum
Argumentos em funções
É possível definir que a função vai ter algum valor variável que vamos definir quando quisermos executá-la:
function mostraAlerta(texto) {
// Dentro da função "texto" conterá o valor passado na execução.
alert(texto);
}
// Ao chamar a função é necessário definir o valor do "texto"
mostraAlerta("Funciona com argumento!");
9.15 Array
O array é útil quando precisamos trabalhar com diversos valores armazenados:
var palavras = ["Caelum", "Ensino"];
palavras.push("Inovação"); // adiciona a string "Inovação" por último no array
Também é possível guardar valores de tipos diferentes:
var variosTipos = ["Caelum", 10, [1,2]];
Como obter um valor agora? Lembre-se que o tamanho de um array vai de 0 até o seu tamanho - 1.
console.log(variosTipos[1]) // imprime o número 10
Adicionando elemento pelo índice
No lugar de usar a função push, que adiciona o elemento como último do array é possível fazer:
var palavras = ["Caelum", "Ensino"];
palavras[9] = "Inovação";
Isso alterará o tamanho do array para dez e adicionará na última posição a string "Inovação", deixando as
posições intermediárias com o valor undefined.
9.16 Blocos de Repetição
Muitas vezes precisamos executar um trecho de código repetidamente até que uma condição seja
contemplada, ou enquanto uma condição for verdadeira. Para isso, o JavaScript oferece uma série de blocos
de repetição. O mais comum é o for.
for
O bloco for precisa de algumas informações de controle para evitar que ele execute infinitamente:
for (/* variável de controle */; /* condição */; /* pós execução */) {
// código a ser repetido
}
while
O bloco while executa determinado código repetitivamente enquanto uma condição for verdadeira.
Diferente do bloco for, a variável de controle, bem como sua manipulação, não são responsabilidades do
bloco em si:
var contador = 1;
while (contador <= 10) {
alert(contador + " Mississípi...");
contador++;
}
alert("Valor do contador: " + contador);
9.17 Funções temporais
Em JavaScript, podemos criar um timer para executar um trecho de código após um certo tempo, ou ainda
executar algo de tempos em tempos.
A função setTimeout permite que agendemos alguma função para execução no futuro e recebe o nome da
função a ser executada e o número de milissegundos a esperar:
// executa a minhaFuncao daqui um segundo
setTimeout(minhaFuncao, 1000);
Se for um código recorrente, podemos usar o setInterval que recebe os mesmos argumentos mas executa
a função indefinidamente de tempos em tempos:
// executa a minhaFuncao de um em um segundo
setInterval(minhaFuncao, 1000);
É uma função útil para, por exemplo, implementar um banner rotativo, como faremos no exercício a seguir.
clearInterval
As funções temporais devolvem um objeto que representa o agendamento que foi feito. É possível usá-lo
para cancelar a execução no futuro. É especialmente interessante para o caso do interval que pode ser
cancelado de sua execução infinita:
// agenda uma execução qualquer
var timer = setInterval(minhaFuncao, 1000);
// cancela execução
clearInterval(timer);
9.18 Exercícios opcionais: Banner rotativo
1. Implemente um banner rotativo na index.html da Mirror Fashion usando JavaScript.
Temos duas imagens, a destaque-home.png e a destaque-home-2.png que queremos trocar a cada 4
segundos, para isso, vamos utilizar o setInterval.
Há várias formas de implementar essa troca de imagens. Uma sugestão é manter um array com os
valores possíveis para a imagem e um inteiro que guarda qual é o banner atual.
Crie o arquivo banner.js na pasta js e não esqueça de adicionar ele no HTML da index.html
<script type="text/javascript" src="js/banner.js"></script>
No arquivo banner.js:
var banners = ["img/destaque-home.png", "img/destaque-home-2.png"];
var bannerAtual = 0;
function trocaBanner() {
bannerAtual = (bannerAtual + 1) % 2;
document.querySelector('.banner-destaque img').src =
banners[bannerAtual];
}
setInterval(trocaBanner, 4000);
2. (avançado) Faça um botão de pause que pare a troca do banner.
Dica: use o clearInterval para interromper a execução.
3. (avançado) Faça um botão de play para reativar a troca dos banners.
Sugestão para o desafio de pause/play
Podemos criar no HTML index.html um novo link para controlar a animação. Crie dentro da section com
classe banner-destaque:
<a href="#" class="pause"></a>
O JavaScript deve chamar clearInterval para pausar ou novamente o setInterval para continuar a
animação.
Precisamos editar o código anterior que chamava o setInterval para pegar o seu retorno. Será um objeto
que controla aquele interval e nos permitirá desligá-lo depois:
var timer = setInterval(trocaBanner, 4000);
Agora, precisamos adicionar nosso código que controla o pause e play:
var controle = document.querySelector('.pause');
controle.onclick = function() {
if (controle.className == 'pause') {
clearInterval(timer);
controle.className = 'play';
} else {
timer = setInterval(trocaBanner, 4000);
controle.className = 'pause';
}
return false;
}
Por fim, podemos estilizar o botão como pause ou play apenas trabalhando com bordas no CSS, adicione os
estilos fora das media query existentes no arquivo estilos.css:
.destaque {
position: relative;
}
.pause,
.play {
display: block;
position: absolute;
right: 15px;
top: 15px;
}
.pause {
border-left: 10px solid #900;
border-right: 10px solid #900;
height: 30px;
width: 5px;
}
.play {
border-left: 25px solid #900;
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;
}
