Você está na página 1de 7

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;
}