Turma 7 | Front-end | 2019 | Semana 7 | JavaScript II
Este é o material da semana 7 de front-end. Aqui você encontra pastas numeradas com os dias de aula que teremos.
Dentro de cada pasta estão os exercicios que vamos desenvolver ao longo da semana.
Para tirar dúvidas, leve para a sala de aula, mande mensagem para a professora ou abra um issue aqui no repositório.
Um guia rápido e básico da linguagem JavaScript.
As variáveis são declaradas com a palavra chave var, let ou const, como segue:
var i;
var sum;
Também é possível declarar varias variáveis com a mesma palavra chave var:
var i, sum;
E pode-se combinar a declaração da variável com sua inicialização:
let i = 0, j = 0, k = 0;
let nome = "Fulano";
Antes de usar uma variável em um programa JavaScript, você deve declará-la.
Existem três tipos de declarações em JavaScript.
var( funciona , mas Let e Const são mais modernos)
Declara uma variável, opcionalmente, inicializando-a com um valor.
let (usamos e amamos)
Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
const (usamos e amamos)
Declara uma constante de escopo de bloco, apenas de leitura.
Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local, pois ela está disponível somente dentro dessa função.
JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if.
if (true) {
var x = 5;
}
console.log(x); // 5
Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.
if (true) {
let y = 5;
}
console.log(y); // ReferenceError: y não está definido
Os tipos em JavaScript podem ser divididos em duas categorias:
- tipos primitivos
- tipos de objeto
Os tipos primitivos incluem números, strings e valores booleanos.
Os valores especiais null e undefined são valores primitivos mas não são números, nem string e nem booleanos.
Qualquer valor em JavaScript que não seja número, string, booleano, null ou undefined é um objeto.
O typeof é um operador unário colocado antes de seu operando, o qual pode ser de qualquer tipo. Seu valor é uma string que especifica o tipo do operando.
typeof "foo"; // 'string'
typeof 123; // 'number'
Ao contrário de muitas linguagens, JavaScript não faz distinção entre valores inteiros e valores em ponto flutuante. Todos os números em JavaScript são representados como valores em ponto flutuante.
Literais inteiros:
0
1
100
Literais em ponto flutuante:
3.14
100.09
0.33333
Para incluir uma string literal em um programa JavaScript, basta colocar os caracteres da string dentro de um par combinado de aspas simples ou duplas.
"" string de cumprimento zero
'teste'
"outro teste"
Para concatenar strings utilizamos o operador +.
var msg = "Ola " + "mundo"; // "Ola mundo"
msg = "Bem vindo ao meu blog, " + name;
A propriedade length determina o tamanho da string.
"palavra".length // 7
Os valores booleanos são representados por true e false.
A palavra chave null indica a ausência de um valor.
Mas também há um segundo valor que indica ausência de valor: undefined.
O valor indefinido (undefined) representa uma ausência mais profunda, é o valor de variáveis que não foram inicializadas.
A linguagem é muito flexível quanto aos tipos de valores que exige.
As variáveis em JavaScript são não tipadas. Você pode atribuir um valor de qualquer tipo a uma variável e, posteriormente, atribuir um valor de tipo diferente para a mesma variável.
JavaScript converte valores de um tipo para outro de forma livre.
Se um programa espera uma string, por exemplo, e você fornece um número, ele converte o número em string automaticamente.
Se você usa um valor não booleano onde é esperado um booleano, JavaScript converte adequadamente.
Estruturas condicionais Javascript são como estruturas condicionais na maioria das linguagens de programação existentes, as utilizamos para verificar uma condição e definir se algo deve ou não acontecer.
Um bom exemplo disso, e que não tem nada a ver com programação, é a linguagem que utilizamos para nos comunicar, repare:
Se o sol sair hoje, vou nadar.
Temos uma condição (se o sol sair hoje) para executar uma ação (vou nadar) dependendo do resultado dessa condição. Se verdadeira, a ação é executada.
A estrutura condicional permite avaliar uma condição e, a partir dela, executar diferentes linhas de código.
if (n == 1) {
// executa este bloco if
} else if () {
// executa este bloco else if
} else {
// executa este bloco else
}
Exercício: if/else
É possível obter resultados semelhantes usando o operador condicional ternário condition ? expr1 : expr2.
resultado = (a > b) ? "a é maior que b" : "b é maior que a";
O código acima é equivalente ao de baixo:
if (a > b) {
resultado = "a é maior que b";
} else {
resultado = "b é maior que a";
}
A estrutura condicional switch permite executar um bloco de código diferente de acordo com cada opção (cada case) especificada. Seu uso é indicado quando os valores a serem analisados nessas condições são pré-definidos.
let data = new Date();
let d = data.getDay(); //Retorna o dia da semana, começando por 0 equivalendo ao domingo.
switch(d){
case 0:
alert("Domingo");
break;
case 1:
alert("Segunda");
break;
case 2:
alert("Terça");
break;
case 3:
aert("Quarta");
break;
case 4:
alert("Quinta");
break;
case 5:
alert("Sexta");
break;
case 6:
alert("Sábado");
break;
default:
alert("Não identificado");
}
Agora vamos entender melhor cada parte:
Switch – Recebe por parâmetro o valor que será verificado.
Case: Informamos um valor a frente que será comparado, ou seja, o valor testado e se retornar verdadeiro executa a instrução contida nele.
Break: Se uma condição e operação foram realizadas, o break garante que nossa aplicação vai sair do switch e o outro case não serão testados.
Default: Se nenhuma condição foi satisfeita, o default assume como execução padrão, ou seja, ele sempre será executado caso nenhuma condição tenha sido reproduzida.
Break e Continue são utilizados para controle de estruturas fechadas como for, while e switch.
Break serve para sair de uma estrutura. Por exemplo, se estivermos em uma estrutura de repetição que irá contar de 1 a 1.000.000, mas nós colocarmos uma condição que diz que se o número for 5, então quebre (saia) da estrutura. Faríamos o seguinte código.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
let x;
for (x=1; x<=1000000; x++){
document.write(x+" ");
if (x==5)
break;
}
</SCRIPT>
Que resulta em: 1 2 3 4 5
Podemos observar que, apesar de termos definido a estrutura de repetição for para contar de 1 a 1.000.000, os únicos números que aparecem são 1, 2, 3, 4 e 5. Isso acontece porque que dentro da condição (if) determinamos que quando x for igual a 5, o comando break deve ser chamado e dessa forma nós saímos de dentro de for sem ter que chegar até o fim.
O continue também serve para controlar estruturas de dados fechadas, assim como o break. Mas, sua principal diferença é que, ao invés de sair completamente da estrutura, o continue apenas ignora o resto da estrutura e prossegue com a seguinte.
Simplificadamente, em uma estrutura switch, no qual tem os cases, automaticamente, o próximo case será selecionado. Em uma estrutura de repetição como for, todo o bloco de dados abaixo do comando continue será ignorado e a repetição continua com o próximo loop.
É um conceito importante, embora, teoricamente, seja difícil de entender. Então, abaixo está um código com erro por estar sem o continue.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
let nr;
for (nr=1; nr<=20; nr++){
if (nr%4 == 0){
document.write ("pin");
document.write ("<br>");
}
document.write (nr);
document.write ("<br>");
}
</SCRIPT>
O script acima deveria fazer o browser responder de acordo com a brincadeira do um, dois, três, pin... Ou seja, a cada múltiplo de 4 o browser não pode contar, ao invés disso, deve aparecer pin. Mas, veja que o resultado está errado.
1 2 3 pin 4 5 6 7 pin 8 9 10 11 pin 12 13 14 15 pin 16 17 18 19 pin 20
Sempre que aparece o pin, também aparece o número múltiplo de 4. Isso porque o if é executado e depois o código que está abaixo dele também. Para evitar que o código abaixo dele seja executado, e mesmo assim continuar executando o loop, devemos usar o continue. Veja a diferença agora.
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
let nr;
for (nr=1; nr<=20; nr++){
if (nr%4 == 0){
document.write ("pin");
document.write ("<br>");
continue; //ignora todo o resto e continua o loop
}
document.write (nr);
document.write ("<br>");
}
</SCRIPT>
Veja que agora os múltiplos de quatro são apenas o pin e não o número.
1 2 3 pin 5 6 7 pin 9 10 11 pin 13 14 15 pin 17 18 19 pin
Exercício: Switch
- DOM é uma sigla que significa Document Object Model.
* Quando a página é carregada o browser cria um objeto que representa os elementos da página a partir do HTML.
* A forma mais fácil de acessar e manipular o DOM é usando JavaScript
* Componentes:
- Document - representa o documento HTML
- Elements - são todas as tags que estão no arquivo HTML e se transformam em elementos da árvore DOM
- Texts - é o conteúdo de texto que vai entre os elementos (tags).
- Attributes - são os todos atributos para um nó específico. No caso, o attribute class="HERO" está associado ao elemento
, outros exemplos de atributos são o href, o id, entre outros.
getElementById()- Retorna o elemento que estiver contendo o nome do ID passado. Como os IDs devem ser únicos, é um método muito útil para pegar apenas o elemento desejado.
getElementsByClassName() - Retorna uma coleção de todos elementos que estiverem contendo o nome da classe passada.
getElementsByTagName()- uma coleção de todos elementos que contennham a tag name passada.
querySelector() - Retorna o primeiro elemento que possui o seletor CSS passado (usa mesma sintaxe do CSS) Exemplo: querySelector('.classe'), querySelector('#id') e querySelector('tag')
querySelectorAll() - semelhante ao querySelector(), só que retorna todos os elementos que se equiparam ao seletor
Exercício: DOM
Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes.
Um laço for é repetido até que a condição especificada seja falsa.
for (let i = 0; i < 5; i++) {
// Vai executar 5 vezes
}
A instrução do...while repetirá até que a condição especificada seja falsa.
do
declaracao
while (condicao);
Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while:
while (condicao)
declaracao
Em JavaScript, arrays são um tipo especial de objeto que representam um conjunto ordenado de valores numerados.
var a = new Array();
a[0] = "dog";
a[1] = "cat";
a[2] = "hen";
a.length // 3
Uma forma mais conveniente de utilização de um array, na verdade a mais usada:
var a = ["dog", "cat", "hen"];
a.length // 3
Uma função é um objeto que tem código executável associado. Uma função pode ser chamada para executar esse código executável e retornar um valor calculado.
function add(x, y) {
var total = x + y;
return total;
}
Um objeto em JavaScript é um conjunto não ordenado de valores nomeados.
Para criar um objeto vazio:
let obj = {};
Podemos criar um objeto com propriedades e métodos:
let obj = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}
E acessar as propriedades dessa forma:
obj.details.color // orange
obj["details"]["size"] // 12
Funções também se comportam como objetos, veja o exemplo abaixo.
function Person(name, age) {
this.name = name;
this.age = age;
}
Instanciamos o objeto.
let obj = new Person("You", 36);
Alteramos os valores das propriedades.
obj.name = "Simon";
obj.name; // print 'Simon'
Em JavaScript, usa-se this de forma semelhante ao uso de pronomes em linguagens naturais, como o inglês ou francês. Escreve-se: “João está correndo rápido porque ele está tentando pegar o trem”. O uso do pronome “ele”. Poderia se ter escrito: “João está correndo rápido porque João está tentando pegar o trem”. Não se reutiliza “João” dessa maneira, pois se assim fosse, nossa família, amigos e colegas nos abandonariam… De uma maneira graciosamente semelhante, em JavaScript se usa a palavra-chave this como um atalho, um referente; ou seja, o sujeito no contexto ou o sujeito do código em execução.
firstName : "Penelope",
lastName : "Barrymore",
fullName : function() {
// Notou o uso do "this" tal como se usou "ele" no exemplo da frase anterior?
console.log( this.firstName + ' ' + this.lastName );
// Também poderia se ter escrito:
console.log( person.firstName + ' ' + person.lastName );
}
}
Se se usa person.firstName e person.lastName, tal como no último exemplo, o código se torna ambíguo. Considere que poderia haver outra variável global (você estando ciente dela ou não) com o nome “person”. Em seguida, as referências a person.firstName poderiam tentar acessar a propriedade firstName da variável global person e isso poderia levar a erros difíceis de serem depurados. Portanto, usa-se a palavra-chave this não apenas para fins “estéticos” (isto é, como um referente), mas, também, para fins de precisão. Seu uso realmente torna o código mais inequívoco, assim como o pronome “ele” tornou a frase mais clara, informando que se estava referindo ao João específico do início da frase.
Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes.
Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:
var passo;
for (passo = 0; passo < 5; passo++) {
// Executa 5 vezes, com os valores de passos de 0 a 4.
console.log('Ande um passo para o leste');
}
Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.
Um laço for é repetido até que a condição especificada seja falsa. Uma declaração for é feita da seguinte maneira:
for ([expressaoInicial]; [condicao]; [incremento])
declaracao
Quando um for é executado, ocorre o seguinte:
- A expressão Inicial é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
- A expressão condicao é avaliada. caso o resultado de condicao seja verdadeiro, o laço é executado. Se o valor de condição é falso, então o laço terminará. Se a expressão condicao é omitida, a condição é assumida como verdadeira.
- A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.
- A atualização da expressão incremento, se houver, executa, e retorna o controle para o passo 2.
A função a seguir contém uma declaração for que contará o número de opções selecionadas em uma lista (um elemento permite várias seleções). Dentro do for é declarado uma váriavel i inicializada com zero. A declaração for verifica se i é menor que o número de opções no elemento , executa sucessivas declaração if, e incrementa i de um em um a cada passagem pelo laço.
<form name="selectForm">
<p>
<label for="tipoMusica">Escolha alguns tipos de música, em seguida, clique no botão abaixo:</label>
<select id="tipoMusica" name="tipoMusica" multiple="multiple">
<option selected="selected">R&B</option>
<option>Jazz</option>
<option>Blues</option>
<option>New Age</option>
<option>Classico</option>
<option>Ópera</option>
</select>
</p>
<p><input id="btn" type="button" value="Quantos foram selecionados?" /></p>
</form>
<script>
function howMany(selectObject) {
let numeroSelecionadas = 0;
for (var i = 0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected) {
numeroSelecionadas++;
}
}
return numeroSelecionadas;
}
let btn = document.getElementById("btn");
btn.addEventListener("click", function(){
alert('Total de opções selecionadas: ' + howMany(document.selectForm.tipoMusica))
});
</script>
A instrução do...while repetirá até que a condição especificada seja falsa.
do
declaracao
while (condicao);
A instrução será executada uma vez antes da condição ser verificada. Para executar multiplas instruções utilize uma declaração de bloco ({ ... }) para agrupá-las. Caso a condicao seja verdadeira, então o laço será executado novamente. Ao final de cada execução, a condicao é verificada. Quando a condição contida no while for falsa a execução do laço é terminada e o controle é passado para a instrução seguinte a do...while.
No exemplo a seguir, o laço é executado pelo menos uma vez e irá executar até que i seja menor que 5.
do {
i += 1;
console.log(i);
} while (i < 5);
Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while:
while (condicao)
declaracao
Se a condição se tornar falsa, a declaração dentro do laço para a execução e o controle é passado para a instrução após o laço.
O teste da condição ocorre antes que o laço seja executado. Desta forma se a condição for verdadeira o laço executará e testará a condição novamente. Se a condição for falsa o laço termina e passa o controle para as instruções após o laço.
Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupar essas declarações.
O while a seguir executará enquanto n for menor que três:
n = 0;
x = 0;
while (n < 3) {
n++;
x += n;
}
A cada iteração, o laço incrementa n e adiciona este valor para x. Portanto, x e n recebem os seguintes valores:
- Depois de executar pela primeira vez: n = 1 e x = 1
- Depois da segunda vez: n = 2 e x = 3
- Depois da terceira vez: n = 3 e x = 6
- Depois de executar pela terceira vez, a condição n < 3 não será mais verdadeira, então o laço encerrará.
Evite laços infinitos. Tenha certeza que a condição do laço eventualmente será falsa; caso contrário, o laço nunca terminará. O while a seguir executará para sempre pois sua condição nunca será falsa:
while (true) {
console.log("Olá, mundo");
}
Objetos são como uma espécie de "super variáveis" que armazenam uma "coleção de valores" referenciados por nome, e que podem ser recuperados para serem utilizados em diversas outras partes de um programa. Em JavaScript praticamente qualquer tipo de dado é um objeto.
Cada item dessa "coleção de valores", é chamado de propriedade. Cada propriedade é composta por um par de "nome: valor". Quando uma propriedade armazena uma função, ela se torna o que chamamos de método.
Agora que já sabemos o que são objetos, vamos ver um pouco sobre como trabalhar com eles. Primeiramente vamos conhecer duas maneiras de se criar objetos.
A maneira mais simples (e recomendável) de se criar objetos em JavaScript é usando o que chamamos de notação literal. Um objeto literal é composto por um par de chaves "{ }", que envolve uma ou mais propriedades. Cada propriedade segue o formato "nome: valor" e devem ser separadas por vírgula.
Para entender bem, nada melhor que um exemplo. Imagine que você vai criar um programa para organizar álbuns de vários cantores e bandas. Aqui vamos criar um objeto para armazenar informações sobre um álbum da banda Metallica, depois você pode praticar criando objetos com suas bandas favoritas. Então, mãos a obra!
let album = {
title: "Metallica (Black Album)",
released: 1991,
showInfo: function() {
alert("Título do álbum: " + this.title + "Lançado em: " + this.released);
}
};
Conseguiu entender o que o código acima faz? Veja, é bem simples: primeiro criamos uma variável chamada "album". Depois criamos um objeto - note a abertura e fechamento das chaves: { e }. Então adicionamos duas propriedades e um método ao nosso objeto, que são: "title", "released" e "showInfo". Nas propriedades nós armazenamos o título e ano de lançamento do álbum, e no método temos uma função que irá exibir as informações sobre o álbum em uma "caixa de alerta" para o usuário. Mais fácil do que parece, não é mesmo?
Outra maneira de criar objetos em JavaScript é utilizando uma função construtora. Se quisermos criar o mesmo objeto que criamos anteriormente, só que usando uma função construtora para isso, basta escrever o seguinte código:
let album = new Object();
album.title = "Metallica (Black Album)";
album.released = 1991;
album.showInfo = function() {
alert("Título do álbum: " + this.title + "Lançado em: " + this.released);
};
Como você pôde notar, a sintaxe ficou um pouco diferente. Aqui devemos utilizar a palavra-chave new seguida pela função construtora Object() ao invés de abrir e fechar chaves. Depois nós adicionamos as propriedades e métodos utilizando album.title, album.released e album.showInfo e atribuimos os valores à elas ao invés de colocar os pares de "nome: valor".
Após ter criado um objeto, você vai precisar acessar os valores que ele armazena. Podemos acessar (ou se preferir: "recuperar") os valores guardados em um objeto, de duas maneiras: utilizando notação de ponto ou notação de colchetes. Veja um exemplo:
// notação de ponto
album.title // Retorna: Metallica (Black Album)
// notação de colchetes
album["title"] // Retorna: Metallica (Black Album)
Repare que no código acima, acessamos a mesma propriedade de duas maneiras diferentes. Geralmente é recomendável que você utilize a notação de ponto - album.title - por ser mais simples de ler e escrever.
Como os métodos são funções, você deve adicionar um par de parênteses - () - quando for acessá-los. Fora isso, nada de diferente. Veja no exemplo abaixo:
// notação de ponto
album.showInfo() // Exibe alerta:
// Título do álbum: Metallica (Black Album) Lançado em: 1991
// notação de colchetes
album["showInfo"]() // Exibe alerta:
// Título do álbum: Metallica (Black Album) Lançado em: 1991
Vez por outra vamos precisar alterar os valores armazenados nas propriedades de nossos objetos. Fazer isso também é bem tranquilo. Basta acessar a propriedade que deseja alterar, utilizando a notação de ponto que acabamos de conhecer, e atribuir o novo valor à ela. Quer um exemplo?
album.title = "Powerslave";
album.released = 1984;
O que aconteceu no código acima? Isso mesmo. Alteramos o título do álbum e o ano de lançamento. Agora nosso objeto armazena informações sobre um outro álbum de outra banda.
Para fixar, antes de prosseguir a leitura (supondo que você esteja lendo e digitando os códigos para treinar), altere os valores de title e released para Metallica (Black Album) e 1991 novamente.
Bom, agora que o título do nosso álbum voltou a ser "Metallica (Black Album)", que tal adicionar uma lista com os títulos das faixas do álbum? Sim, nós podemos adicionar novas propriedades e métodos aos nossos objetos mesmo após ter criado eles. A sintaxe é a mesma utilizada para alterar valores, que nós acabamos de ver.
Objetos podem armazenar qualquer tipo de dado válido em JavaScript, então, para criar uma lista com os títulos das faixas de nosso álbum, basta seguir o exemplo abaixo:
// Aqui adicionamos um array com os nomes de algumas faixas do álbum.
// Para praticar você pode adicionar todas as 12 faixas.
album.tracks = ["Enter Sandman", "Sad but True", "Holier Than Thou", "The Unforgiven"];
Você pode deletar uma propriedade ou método de um objeto utilizando o operador delete seguido pelo nome da propriedade. Vamos testar?
typeof album.showInfo // "function"
delete album.showInfo // deleta o método showInfo
typeof album.showInfo // "undefined"
Exercício: Objetos
Os eventos são basicamente um conjunto de ações que são realizadas em um determinado elemento da página web, seja ele um texto, uma imagem, ou uma div, por exemplo. Muitas das interações do usuário que está visitando sua página com o conteúdo do seu site podem ser consideradas eventos.
Existe uma infinidade de eventos definidos para uso em JavaScript, abaixo podemos ver alguns dos principais e mais utilizados:
- onBlur remove o foco do elemento
- onChange muda o valor do elemento
- onClick o elemento é clicado pelo usuário
- onFocus o elemento é focado
- onKeyPress o usuário pressiona uma tecla sobre o elemento
- onLoad carrega o elemento por completo
- onMouseOver define ação quando o usuário passa o mouse sobre o elemento
- onMouseOut define ação quando o usuário retira o mouse sobre o elemento
- onSubmit define ação ao enviar um formulário
Existem diversas maneiras de se aplicar esses eventos aos elementos HTML, são elas:
- Inline
- Em um arquivo externo, usando um manipulador de eventos
Vamos ver um exemplo de como usar um evento de maneira inline em JavaScript. Dessa forma é preciso que tudo seja definido diretamente na tag do elemento, dessa forma:
1: Eventos inline JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Usando o evento onClick no Javascript</title>
</head>
<body>
<h1 onclick="this.innerHTML='Isso acontece quando usamos o evento onClick!'">Clique nesse link para testar o evento onClick!</h1>
</body>
</html>
No exemplo anterior nós vimos de maneira inline como utilizar o evento onclick.
Para chamar um evento externo iremos precisar de um manipulador de eventos, nesse caso vamos usar o event listener que adiciona ou remove um evento sobre qualquer elemento. O Event Listener disponibiliza duas funções principais, são elas:
- addEvent - Adiciona uma função que será disparada quando ocorrer determinado evento no objeto.
- removeEvent - Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso.
Agora vamos ver um exemplo de como utilizar o Event Listener.
2: Usando Event Listener
<script type="text/javascript" src="/path/to/event-listener.js"></script>
<form>
<input type="text" name="a" />
<input type="submit" />
</form>
<script type="text/javascript">
var f = document.forms[0];
addEvent(f, "submit", function( e ) { alert(f.a.value);return false; });
addEvent(f.a, "keyup", function( e ) { f.a.value=f.a.value.toUpperCase(); });
</script>
Dessa forma nosso formulário fica limpo e sem código JavaScript, sendo feita toda a validação de forma externa.
No exemplo 1 vimos como utilizar o evento onClick, abaixo iremos ver alguns mais exemplos de eventos e como usá-los.
O evento onload pode ser usado quando queremos que algo seja carregado junto com o carregamento da página.
- 3:* usando evento onLoad
<!DOCTYPE html>
<html>
<head>
<title>Usando eventos no Javascript</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies são permitidos")
}
else
{
alert("Cookies não são permitidos")
}
}
</script>
<p>Irá aparecer um alert dizendo se os cookies estão ou não liberados em seu navegador</p>
</body>
</html>
O evento onChange é utilizado para que seja realizada determinada ação após alguma mudança. No exemplo abaixo iremos fazer essa mudança acontecer ao clicarmos fora do input text.
4: Evento onChange
<!DOCTYPE html>
<html>
<head>
<title>Usando eventos no Javascript</title>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
Insira seu Nome: <input type="text" id="fname" onchange="myFunction()">
<p>
Ao clicarmos fora do input text o texto escrito nele ficará todo em caixa alta.</p>
</body>
</html>
Esses eventos são responsáveis pelas ações que o usuário faz com o mouse, passando o mouse no elemento e tirando o mouse do elemento, respectivamente.
5: Eventos onmouseover e onmouseout
<!DOCTYPE html>
<html>
<head>
<title>Usando eventos no Javascript</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Passe o mouse em mim</div>
<script>
function mOver(obj)
{
obj.innerHTML="Obrigado"
}
function mOut(obj)
{
obj.innerHTML="Passe o mouse em mim"
}
</script>
</body>
</html>
Nesse exemplo iremos ver como trabalhar com o clique, o segurar o clique e o soltar do clique.
6: Eventos onmousedown, onmouseup e onclick
<!DOCTYPE html>
<html>
<head>
<title>Usando eventos no Javascript</title>
</head>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Clique aqui</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Solte o clique"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Obrigado"
}
</script>
</body>
</html>
Exercício: Eventos