Programação para Dispositivos
Móveis
Professor Roberto
[Link]@[Link]
Aula 2 – Revisão de JavaScript
Roteiro
1. Como usar?
2. Leitura / Escrita
3. Declaração de variáveis
4. Template literals ou Template string
5. Comandos de repetição
6. Vetores
Métodos para trabalhar com vetores
Operador spread (...)
7. Funções
Arrow Function
8. Classes / Objetos
Definição de Classes
JSON
9. Interação com HTML
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 2
Como usar?
• Dentro do documento HTML
– Código dentro da tag script
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
alert('Olá mundo!!!');
</script>
</body>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 3
Comandos de Escrita e Leitura
• Invocação de um arquivo externo
– <script src=“caminhoParaOArquivo”></script>
[Link]
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head> alert('Olá mundo!!!');
<body>
<script src="[Link]">
</script>
</body>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 4
Leitura de dados
• Pode ser realizada a partir do comando
prompt
x = prompt("Digite um valor")
• Pode ser realizada a partir de funções de
pegam elementos da página
– [Link]
– [Link]
– [Link]
– [Link]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 5
Escrita de dados
• Pode ser realizada a partir das funções:
– [Link]
• Escreve o conteúdo passado dentro de um elemento HTML.
– [Link]
• Escreve o conteúdo passado no local onde é invocado no
HTML.
– alert ou [Link]
• Exibe o conteúdo passado dentro de uma caixa de alerta.
– [Link]
• Exibe o conteúdo passado no console do navegador
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 6
Variáveis
• Declaração
– var <script>
var x = 10
– let y = 5
– const {
let a = 2
– nada const b = 5
b = 20 //Erro - atribuição para constante
}
[Link](x)
[Link](y)
[Link](a) //Erro - a não foi definida
[Link](b) //Erro - b não foi definida
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 7
Template literals
• Também chamada de Template string
(ES2015)
• Permitem escrever uma string (texto)
embutindo expressões
• Ao invés de utiliza ‘ ou “ utizamos ` para
abertura e fechamento
• Espressões são envolvidas por ${ }
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 8
Template literals
• Exemplo:
<script>
const a = 2, b = 3;
const t1 = `Texto de exemplo`;
const t2 = `texto linha 1
texto linha 2`;
const t3 = `${t1} | a + b = ${a + b}`;
[Link](t2);
[Link](t3);
[Link](`a - b = ${a - b}`);
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 9
Comandos de Repetição
• for/in
– Loop sobre as propriedades de um objeto
• for/of
– Loop sobre os valores de um objeto
• (vetor, map, set)
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 10
Comandos de Repetição
• for/in for (const chave in objeto) {
comando1
comando2
...
}
pessoa = {
nome: 'Roberto',
profissao: 'Professor'
}
for (const propriedade in pessoa) {
[Link]("Propriedade: ",propriedade," Valor: ",
pessoa[propriedade],"</br>")
}
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 11
Comandos de Repetição
• for/of for (const valor of vetor) {
comando1
comando2
...
}
paises = ['Brasil', 'Argentina', 'Equador']
for (const p of paises) {
[Link]("pais - ",p,"</br>")
}
nome = 'Maria'
for (const letra of nome) {
[Link](letra,"</br>")
}
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 12
Vetores
• Em JavaScript para indicarmos que uma
variável é um vetor basta atribuirmos um
vetor vazio a ela ou um vetor com elementos.
– [] é um vetor vazio
– [1, “teste”, 3] é um vetor que contém três valores
• Na posição 0 está armazenado o valor 1
• Na posição 1 está armazenado o valor “teste”
• Na posição 2 está armazenado o valor 3
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 13
Vetores
• Muito cuidado ao trabalhar com vetores em
JavaScript:
– Como não é necessário informar qual o tamanho do vetor
muitas coisas são permitidas:
vetor = [];
vetor[4] = 2;
undefined undefined undefined undefined 2
0 1 2 3 4
– É possível criar um vetor já atribuindo valores para o
mesmo:
notas = [2, false, 4.5, "Roberto", 5];
2 false 4.5 "Roberto" 5
0 1 2 3 4
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 14
Vetores
• Para sabermos quantos valores um vetor tem
armazenado podemos utilizar o método
length
<script>
var notas;
notas = [2, false, 4.5, "Roberto", 5];
[Link]("Notas possui ",[Link]," elementos");
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 15
Métodos para vetores
• Métodos modificadores (Modificam o vetor)
– pop
• Remove e retorna o último elemento de um vetor
– push
• Adiciona um ou mais elementos no final de um vetor
(retorna o novo tamanho do vetor)
– reverse
• Inverte a ordem dos elementos de um vetor
– sort
• Ordena um vetor (você pode passar a função de avaliação de
ordem)
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 16
Métodos para vetores
• Métodos modificadores - Exemplo
<script>
let v1 = [8,9];
let v2 = [10,11];
[Link](`v1 - ${v1} | v2 = ${v2}`);
[Link]();
[Link](`v1 - ${v1}`);
[Link](2);
[Link](...v2);
[Link](`v1 - ${v1}`);
[Link]();
[Link](`v1 - ${v1}`);
[Link]();
[Link](`v1 - ${v1}`);
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 17
Métodos para vetores
• Métodos modificadores - Exemplo sort
<script>
let vet = [8,9,10,11];
[Link]();
[Link](`vet: ${vet}`);
[Link](ordem)
[Link](`vet: ${vet}`);
function ordem(a,b){
return a - b;
}
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 18
Métodos para vetores
• Métodos de acesso (Não modificam o vetor e retornam
alguma representação)
– concat
• Retorna um vetor composto pela junção do vetor inicial com o(s)
elemento(s) passados por parâmetro
– includes
• Retorna se o vetor contém o elemento passado por parâmetro
– indexOf
• Retorna o índice do vetor que contém o valor passado por
parâmetro
– join
• Retorna todos os elementos de um vetor em uma string (pode-se
passar como parâmetro qual separador será utilizado)
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 19
Métodos para vetores
• Métodos de acesso - Exemplo
<script>
const vet1 = [4, 2, 6];
const vet2 = ['Luiz', 'Gustavo'];
const vet3 = [Link](vet2);
[Link](`vet1: ${vet1} | vet2: ${vet2} | vet3: ${vet3}`);
if ([Link](2)) [Link]('vet1 contem 2');
[Link](`Posicao do 2 em vet1: ${[Link](2)}`);
const vet2Texto = [Link](' - ');
[Link](`vet2: ${vet2} | vet2Texto: ${vet2Texto}`);
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 20
Métodos para vetores
• Métodos de iteração (Percorrem o vetor
fazendo alguma ação)
– every
• Percorre o vetor e retorna verdadeiro se todos os seus
elementos satisfazem a função passada como
parâmetro
– some
• Percorre o vetor e retorna verdadeiro se pelo menos
um dos seus elementos satisfaz a função passada como
parâmetro
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 21
Métodos para vetores
• Métodos de iteração - Exemplo
<script>
function maiorDeIdade(idade){
if (idade >= 18)
return true;
else
return false;
}
const idades = [20, 30, 40, 15];
const todosDeMaior = [Link](maiorDeIdade);
[Link](todosDeMaior ? 'Todos de maior' : 'Nem todos são maiores');
const algumDeMaior = [Link](maiorDeIdade);
[Link](algumDeMaior ? 'Exitem pelo menos um maior de idade' : 'Todos
de menor');
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 22
Métodos para vetores
• Métodos de iteração (Percorrem o vetor fazendo
alguma ação)
– find
• Retorna o primeiro elemento do vetor que satisfazer a
função passada como parâmetro
– findIndex
• Retorna o índice do primeiro elemento do vetor que
satisfazer a função passada como parâmetro
– filter
• Retorna um vetor contendo todos os elementos que
satisfazem a função passada como parâmetro
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 23
Métodos para vetores
• Métodos de iteração - Exemplo
<script>
function maiorDeIdade(pessoa){ return [Link] >= 18; }
const pessoas = [{nome: 'Afonso', idade: 16},
{nome: 'Amanda', idade: 20}, {nome: 'Zeca', idade: 70}];
const primeiraMaior = [Link](maiorDeIdade);
[Link](`Primeira maior de idade: ${[Link]}`);
[Link](`Indice no vetor: ${[Link](maiorDeIdade)}`);
const maioresDeIdade = [Link](maiorDeIdade);
[Link]("Pessoas maiores de idade: ");
for (const p of maioresDeIdade) {
[Link]([Link]);
}
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 24
Métodos para vetores
• Métodos de iteração (Percorrem o vetor fazendo
alguma ação)
– forEach
• Executa a função (passada como parâmetro) para cada elemento
do vetor
– map
• Cria um vetor com os resultados da chamada de uma função
(passada como parâmetro) executa para cada elemento do vetor
inicial
– reduce
• Aplica uma função a todos os elementos do vetor acumulando os
resultados da mesma. A função passada deve conter pelo menos
dois parâmetros, o valor inicial do acumulador e o item a ser
coletado do vetor
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 25
Métodos para vetores
• Métodos de iteração - Exemplo
<script>
function escreveParagrafo(conteudo){
[Link](`<p>${conteudo}</p>`);
}
const nomes = ['Giulia', 'Leticia', 'Paulo'];
[Link](escreveParagrafo);
function soma5(num){ return num + 5;}
const idades = [10,20,30,40];
const idadesMais5 = [Link](soma5);
[Link](`<p>idadesMais5 = ${idadesMais5}</p>`);
function soma(a, b){return a + b;}
const somaIdades = [Link](soma);
[Link](`<p>Soma das idades: ${somaIdades}</p>`);
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 26
Métodos para vetores
• Documentações sobre outros métodos para
trabalhar com vetor podem ser obtidos em:
– [Link]
asp
– [Link]
BR/docs/Web/JavaScript/Reference/Global_Objec
ts/Array#Propriedades
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 27
Operador spread (...)
• Permite que um objeto iterável, como um
vetor ou uma string, seja expandido em locais
onde zero ou mais argumentos sejam
esperados
<script>
let meio = [3, 4];
let vet = [1, 2, meio, 5, 6];
[Link](vet);
// [1, 2, [3, 4], 5, 6]
vetSpread = [1, 2, ...meio, 5, 6]
[Link](vetSpread);
// [1, 2, 3, 4, 5, 6]
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 28
Operador spread (...)
• Utilidade
– Copiar um vetor
Forma equivocada Forma correta
<script> <script>
var arr = ['a', 'b', 'c']; var arr = ['a', 'b', 'c'];
var arr2 = arr; var arr2 = [...arr];
[Link]('d') [Link]('d')
[Link](arr); [Link](arr);
[Link](arr2); [Link](arr2);
</script> </script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 29
Operador spread (...)
• Utilidade
– Concatenar vetor
Sem spread Com spread
<script> <script>
var arr = ['a', 'b', 'c']; var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f']; var arr2 = ['d', 'e', 'f'];
conc = [Link](arr2); conc = [...arr, ...arr2];
[Link](conc); [Link](conc);
</script> </script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 30
Operador spread (...)
• Utilidade
– Curiosidade
<script>
function escreveNome(nome){
[Link](`${nome}<br />`);
}
function imprimeNomes(...nomes){
[Link](nomes);
[Link](escreveNome);
}
imprimeNomes("Roberto", 'Maria', 'Angelo', 'Miguel');
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 31
Função
• Função pode ser definida como uma parcela
de código que executa uma tarefa bem
definida, sendo que essa tarefa pode ser
executada (chamada) diversas vezes em um
mesmo programa.
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 32
Função
function nomeFuncao(Lista_de_Parametros) {
Comando1;
Comando2;
Comando3;
...
}
function nomeFuncao(Lista_de_Parametros) {
Comando1;
Comando2;
Comando3;
...
return ...; //Retorno da Função
}
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 33
Função seta ou Arrow Function
• Forma simplificada de escrever funções
• Utilizamos o operador => para definir funções
arrow
• Para tanto devemos lembrar que:
function soma(a, b){ soma = function (a, b){
res = a + b; 𝑒𝑞𝑢𝑖𝑣𝑎𝑙𝑒 𝑎 res = a + b;
return res; return res;
} }
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 34
Função seta ou Arrow Function
Forma convencional Forma Arrow
soma = function (a, b){ soma = (a, b) => {
res = a + b; res = a + b;
return res; return res;
} }
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 35
Função seta ou Arrow Function
– Simplificações possíveis quando utilizamos
funções arrow:
• Quando a função só possui um parâmetro os
parênteses são opcionais;
• Quando o corpo da função possui somente a instrução
return podemos suprimir as chaves a palavra return.
cubo = (valor) => {
return valor ** 3; cubo = valor => valor ** 3;
}
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 36
Função seta ou Arrow Function
• O this em funções definidas de forma
convencional
– Quando uma função é escrita na forma convencional
o this será o objeto que chamou a função
– O this pode ser alterado através dos métodos call,
apply e bind
• O this em funções arrow
– Quando uma função é escrita utilizando arrow o this
será o objeto onde a função foi definida
– O this não pode ser alterado
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 37
Função seta ou Arrow Function
• Exemplo utilizando função convencional
[Link]
me=tryjs_arrow_function6
• Exemplo utilizando função arrow
[Link]
me=tryjs_arrow_function7
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 38
Função seta ou Arrow Function
• Exercícios
1. Reescreva os exemplos dos slides 18, 22, 24,
26 e 31 utilizando funções arrow.
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 39
Classes / Objetos
Objeto Propriedade Métodos
[Link] = “Fiat” [Link]()
[Link] = 500 [Link]()
[Link] = 850 [Link]()
[Link] = branco [Link]()
• O que são propriedades?
• O que são métodos?
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 40
Classes / Objetos
• Criação de objetos em JavaScript
Objeto Propriedade Métodos
[Link] = “Fiat” [Link]()
[Link] = “500” [Link]()
[Link] = 850 [Link]()
[Link] = branco [Link]()
var car = {fabricante:"Fiat", modelo:"500", peso: 850, cor:"white"}
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 41
Classes / Objetos
• Como criar uma “Classe”
– Através de função
• Recebe atributos por parâmetro e retorna um objeto
Carro = function (ano, placa){
[Link] = ano;
[Link] = placa;
[Link] = function(novoAno) {
[Link] = novoAno
}
}
C1 = new Carro(2000,"opt-0000")
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 42
Classes / Objetos
• Como criar uma Classe – ECMAScript 2016
class Produto {
constructor(paramNome, paramPreco){
[Link] = paramNome
[Link] = paramPreco
}
calculaDesconto() {
return [Link] * 0.1;
}
}
let produto1 = new Produto("Blusa", 120);
let produto2 = new Produto("Calça", 300);
let desconto1 = [Link]();
let desconto2 = [Link]();
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 43
Classes / Objetos
• Formas de acessar as propriedades
– [Link]
– objeto[“propriedade”]
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
x = [Link]
y = person["lastName"]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 44
Classes / Objetos
• Métodos
– São implementados a partir de funções
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return [Link] + " " + [Link];
}
}
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 45
Classes / Objetos
• Formas de acessar os métodos
– [Link]()
– objeto[“metodo”]()
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return [Link] + " " + [Link]
}
}
name = [Link]()
name = person["fullName"]()
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 46
Classes / Objetos
• O que acontece se eu chamar um método sem
utilizar () ou (parâmetros)?
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return [Link] + " " + [Link]
}
}
fName = [Link]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 47
JSON
• JavaScript Object Notation
• Formato simples de transferência de dados
• Auto descrito
• Sintaxe
– Dados compostos por nome : valor
– Dados separados por vírgula
– { representa objeto
– [ representa vetor
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 48
JSON
• Exemplo
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 49
JSON
• Converter JSON em JavaScript
– [Link]
var text = '{ "employees" : [{ "firstName":"John" ,
"lastName":"Doe" },{ "firstName":"Anna" , "lastName":"Smith" },{
"firstName":"Peter" , "lastName":"Jones" } ]}'
var obj = [Link](text)
[Link]([Link][1].firstName + " " +
[Link][1].lastName)
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 50
JSON
• Converter JavaScript em JSON
– [Link]
class Pessoa{
constructor (nome, idade){
[Link] = nome
[Link] = idade
}
fazerAniversario()
{
[Link]++
}
}
p1 = new Pessoa('Maria', 20);
jsonP1 = [Link](p1)
[Link](jsonP1)
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 51
Interação com HTML
• Com o JavaScript podemos:
– Alterar todos os elementos HTML na página
– Alterar todos os atributos HTML da página
– Alterar todos os estilos CSS na página
– Remover elementos e atributos HTML existentes
– Adicionar novos elementos e atributos HTML
– Reagir a todos os eventos HTML existentes na
página
– Criar novos eventos HTML na página
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 52
Interação com HTML
• DOM
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 53
Interação com HTML
• Métodos de busca de elementos na página
– [Link]
• Busca na página o elemento que possui o id
especificado no parâmetro
• Exemplos
– myElement = [Link]("intro")
– [Link]
mentbyid
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 54
Interação com HTML
• Métodos de busca de elementos na página
– [Link]
• Busca na página todos os elementos que possuem a tag
especificada no parâmetro
• Exemplos
– myElement = [Link]("p")
– [Link]
mentsbytagname2
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 55
Interação com HTML
• Métodos de busca de elementos na página
– [Link]
• Busca na página todos os elementos que participam da
classe especificada no parâmetro
• Exemplos
– x = [Link]("intro")
– [Link]
mentsbyclassname
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 56
Interação com HTML
• Métodos de busca de elementos na página
– [Link]
– Busca na página todos os elementos que atendam
o seletor css especificado no parâmetro
• Exemplos
– x = [Link]("[Link]")
– [Link]
selectorall
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 57
Interação com HTML
• Métodos de busca de elementos na página
– [Link]
– Busca na página o primeiro elemento que atenda
o seletor css especificado no parâmetro
• Exemplo
– x = [Link]("[Link]")
– [Link]
ment_queryselector_class
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 58
Atividade
1. Tomando como base a página HTML do slide
a seguir exibir na tela as informações
apresentadas nas linhas ímpares da tabela,
separadas por “ / ”
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 59
Atividade
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; border: solid 2px black;}
th, td { padding: 10px; }
tbody tr:nth-child(odd){ background: #cccccc; }
</style>
</head>
<body>
<table>
<thead><tr><th>Coluna 1</th><th>Coluna 2</th></tr></thead>
<tbody>
<tr><td>Maria</td><td>Luiza</td></tr>
<tr><td>Roberto</td><td>Matheus</td></tr>
<tr><td>Joana</td><td>Clarissa</td></tr>
</tbody>
</table>
</body>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 60
Atividade
• Resposta
<p id="resposta"></p>
<script>
tds = [Link]("tbody tr:nth-child(odd) td")
dados = []
for (const td of tds) {
[Link]([Link])
}
[Link]("resposta").innerHTML = [Link](" / ")
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 61
Interação com HTML
• Alterando elementos na minha página
– innerHTML
– [Link]
– Alterando atributos
• [Link](id).attributo = valor
• Exemplo
– [Link]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 62
Interação com HTML
• Alterando elementos na minha página
– Modificando estilos CSS
• [Link](id).[Link] = valor
• Exemplo
– [Link]
e
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 63
Interação com HTML
<!DOCTYPE html>
<html>
<body>
<p class="azul">Olá mundo!!!</p>
<p>Teste</p>
<p class="azul">Texto em azul</p>
<button onclick="pintaAzul()">Clique aqui</button>
<script>
function pintaAzul(){
elementos = [Link](".azul");
for (const item of elementos) {
[Link] = "blue";
}
}
</script>
</body>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 64
Interação com HTML
• Eventos
– Quando um usuário clica no mouse
– Quando uma página da web é carregada
– Quando uma imagem é carregada
– Quando o mouse se move sobre um elemento
– Quando um campo de entrada é alterado
– Quando um formulário HTML é enviado
– Quando um usuário pressiona uma tecla
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 65
Interação com HTML
• Eventos
– Click do mouse
<!DOCTYPE html>
<html>
<body>
<h1 onclick="[Link] = 'Ooops!'">Clique no texto!</h1>
</body>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 66
Interação com HTML
• Eventos
– Ao modificar um elemento
<!DOCTYPE html>
<html>
<head>
<script>
function upperCase(elemento) {
[Link] = [Link]();
}
</script>
</head>
<body>
Digite seu nome:
<input type="text" id="fname" onchange="upperCase(this)">
</body>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 67
Interação com HTML
• Eventos
– Ao focar e desfocar inputs
<p>Nome: <input type="text" name="nome" id="nome"></p>
<p>Idade: <input type="number" name="idade" id="idade"></p>
<p>Sexo: <input type="radio" name="sexo" id="sexoM">Masculino
<input type="radio" name="sexo" id="sexoF">Feminino</p>
<script>
inputs = [Link]("input")
for (const input of inputs) {
[Link] = () => [Link] = "#CCCCCC"
[Link]("focus",() => [Link] =
"#FF0000")
[Link] = () => [Link] = "#FFFFFF"
}
</script>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 68
Interação com HTML
• Eventos
– oninput
• quando um elemento input tem seu valor modificado
• [Link]
– onclick
• quando ocorre um click com o mouse
• [Link]
– ondblclick
• quando ocorre dois clicks com o mouse
• [Link]
– onmousemove
• quando mexe o mouse
• [Link]
– onmousedown
• quando aperta o botão do mouse
• [Link]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 69
Interação com HTML
• Eventos
– onmouseup
• quando solta o botão do mouse
– onkeydown
• quando pressionar uma tecla
• [Link]
– onkeypress
• quando pressionar uma tecla
• [Link]
– onkeyup
• quando soltar uma tecla
• [Link]
– onblur
• quando um elemento perde foco
• [Link]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 70
Interação com HTML
• Eventos
– onfocus
• quando um elemento ganha foco
• [Link]
– onchange
• quando um input, select ou textarea tem seu valor alterado
• [Link]
– onload
• quando a página é carregada
• [Link]
– onsubmit
• disparado antes de submeter o formulário (útil para realizar validações)
• [Link]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 71
Interação com HTML
• Eventos
<form action="[Link]
<button>Clique</button>
</form>
<script>
form = [Link]("form")
form[0].onsubmit = () => {
alert("Formulário sendo submetido")
return false
}
</script>
Para mais eventos
[Link]
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 72
Interação com HTML
• Navegando pela DOM
– parentNode
– childNodes[nodenumber]
– firstChild
– lastChild
– nextSibling
– previousSibling
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 73
Interação com HTML
• Navegando pela DOM - Exemplo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1></h1>
<main>
<section>
<article></article>
<article></article>
</section>
</main>
</body>
<script src="[Link]"></script>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 74
Interação com HTML
• Navegando pela DOM - Exemplo
function imprimeTab(qtd){
let txt = ""
for (let i = 1; i <= qtd; i++) { txt += "----"}
return txt
}
function imprimeDados(no,tab){
let txt = ""
if ([Link] != "#text"){
txt = imprimeTab(tab)+[Link]+'<br/>'
}
for (const filho of [Link]) {
txt += imprimeDados(filho,tab+1)
}
return txt
}
body = [Link]("body")[0]
txt=imprimeDados(body,0)
[Link](txt)
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 75
Interação com HTML
• Criando elementos via código
– [Link](“tipo”)
– [Link](“texto”)
• Inserindo elementos via código
– innerHTML
• Insere texto em um elemento
– appendChild
• Insere um filho em um elemento
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 76
Interação com HTML
• Criando e inserindo elementos via código
body =
[Link]("body")
<!DOCTYPE html> [Link] = "<p>Inserindo um
<html> parágrafo</p>"
<head> //Criando um nó parágrafo
<meta charset="utf-8"/>
p = [Link]("p")
</head>
<body id="body">
//Criando um nó texto
</body> texto =
<script src="[Link]"></script> [Link]("Outro
</html> <p>")
//Adicionando o texto ao parágrafo
[Link](texto)
//Adicionando o parágrafo ao body
[Link](p)
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 77
Interação com HTML
• Removendo elementos via código
– [Link](filho)
• Remove um filho específico de um elemento
– [Link]()
• Remove o elemento específico da árvore de objetos
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 78
Interação com HTML
• Removendo elementos via código
<!DOCTYPE html> function removeP(){
<html> ps =
<head> [Link]('p')
<meta charset="utf-8"/> for (const p of ps) {
</head> [Link]()
<body> }
<h1>Teste Remoção</h1> }
<p>p1</p>
<p>p2</p>
<p>p3</p>
<button onclick = "removeP()">
Remover Parágrafos
</button>
</body>
<script src="[Link]"></script>
</html>
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 79
Atividade
• Faça um formulário que contenha algumas
opções de lanche e o usuário insere a
quantidade de cada produto solicitado. Por
fim o total a pagar deve ser informado na tela
após o clique de um botão.
Programação para Dispositivos Móveis – Prof. Roberto C. Ferreira 80