0% acharam este documento útil (0 voto)

3K visualizações

Material JavaScript

O documento apresenta uma introdução sobre JavaScript, definindo-o como uma linguagem de programação que adiciona interatividade às páginas web, por exemplo jogos e animações. Também discute onde colocar códigos JavaScript e como exibir dados de diferentes maneiras.

Enviado por

João Victor Marques Favero

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

3K visualizações

Material JavaScript

Enviado por

João Victor Marques Favero

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 102

JavaScript

Gustavo Marino Botta

1
HTML, CSS e JavaScript
• HTML para definir o conteúdo das páginas da web

• CSS para especificar o layout das páginas da web

• JavaScript para programar o comportamento das

páginas da web

2
O que JavaScript?

• JavaScript é uma linguagem de programação

que adiciona interatividade em sua página
web, por exemplo, jogos, respostas a eventos
como um botão pressionado, estilização
dinâmica, animações, etc.

3
Você sabia?
• JavaScript e Java são completamente
diferentes.

• JavaScript foi inventado pelo Brendan Eich

em 1995, e tornou-se um padrão ECMA em
1997.

• ECMAScript é uma especificação da

linguagem e o JavaScript implementa essa
especificação.
4
Para aprender...

• O site
• https://www.w3schools.com/js/default.asp
mantém um guia de referência completo da
linguagem JavaScript e está em constante
atualização. Além disso, apresenta exemplos das
propriedades e métodos.

• Vale a pena conferir!

5
Onde colocar os códigos JavaScript?
Dentro da tag HEAD
<head>
<script>
window.onload = funcao01;
function funcao01() {
document.getElementById("id02").innerHTML = "Inseri o parágrafo 1"
}
</script>
</head>
<body>
<h1 id="id01"></h1>
<p id="id02"></p>
<p id="id03"></p>
<script>
document.getElementById("id01").innerHTML = "Inseri o título";
</script>
No corpo da página
<script src="exemplo.js"></script>
</body> No arquivo externo
Colocar scripts na parte inferior do elemento
// Arquivo externo exemplo.js
<body> melhora a velocidade de exibição,
porque a interpretação do script torna a document.getElementById("id03").innerHTML = "Inseri o parágrafo 2"
exibição mais lenta. 6
Onde colocar os códigos JavaScript?
<head>
<script>
window.onload = funcao01;
function funcao01() {
document.getElementById("id02").innerHTML = "Inseri o parágrafo 1"
}
</script>
</head>
<body>
<h1 id="id01"></h1>
<p id="id02"></p>
<p id="id03"></p>
<script>
document.getElementById("id01").innerHTML = "Inseri o título";
</script>
<script src="exemplo.js"></script>
</body>

// Arquivo externo exemplo.js

document.getElementById("id03").innerHTML = "Inseri o parágrafo 2"
7
Script externo
• Você pode colocar uma referência de script externa em <head>
ou <body> como desejar.

• O script se comportará como se estivesse localizado

exatamente onde a tag <script> está localizada.

• Vantagens do JavaScript externo

• Separa HTML e código
• Torna o HTML e o JavaScript mais fáceis de ler e manter
• Arquivos JavaScript em cache podem acelerar o carregamento da
página
• Para adicionar vários arquivos de script a uma página - use várias tags
de script:
• <script src="myScript1.js"></script>
• <script src="myScript2.js"></script>

8
Exibindo dados de diferentes
maneiras
• Escrevendo em um elemento HTML,
usando innerHTML.

<h1 id="id01"></h1> • Escrevendo na saída HTML usando

• Escrevendo no console do navegador,

usando console.log().

9
Exibindo dados de diferentes
maneiras

<h1 id="id01"></h1>
<script>
document.getElementById("id01").innerHTML =
"Teste innerHTML";
document.write("Teste write");
window.alert("Teste alert");
console.log("Teste console");
Tecla F12
</script>

10
Comentários

• Pode ser feito de linha ou de bloco.

11
Variáveis
• São conteineres para armazenar valores de dados.

• São fracamente tipadas: não é necessário declarar o seu tipo.

• Devem ter identificadores únicos.

• Pode conter letras, dígitos, underscore (_) e sinal de cifrão ($)
• Pode começar com letras, _ e $
• Os nomes são case sensitive
• Palavras reservadas não podem ser utilizadas
• Hifens não são permitidos em JavaScript. Eles são reservados para
subtrações.

• Pode ser declarada utilizando: var, let ou const

12
Variáveis
• Declarações

• Diferenças entre var, let e const

• var – escopo de função
• let – escopo de bloco e mutável
• não podem ser redeclaradas.
• devem ser declaradas antes do uso.
• const – escopo de bloco e imutável
• não podem ser redeclaradas.
• não podem ser reatribuídas.
• devem receber um valor quando são declaradas.

13
Variáveis

• Diferença entre var e let:

14
Variáveis – outras características
• Uma variável declarada sem valor terá o valor
undefined.

• Strings são escritas entre aspas duplas ou

simples. Os números são escritos sem aspas.

• Se você colocar um número entre aspas, ele

será tratado como uma string de texto.

• let x = "5" + 2 + 3; // resultará em 523

• Se você colocar um número entre aspas, o restante dos
números será tratado como strings e concatenado.

15
Objetos e matrizes constantes
Matriz
• A palavra-chave const é um
pouco enganosa. Visão do programador

A E I O U

• Não define um valor constante.

Ele define uma referência Armazenamento interno na memória RAM

constante a um valor. Ponteiro Inicial (somente o endereço deste

ponteiro é constante e não para onde ele aponta)

• NÃO pode: I
A
• Reatribuir um valor constante O
null

• Reatribuir uma matriz

constante
E
U
• Reatribuir um objeto constante

• Pode:
• Alterar os elementos da matriz
constante Objeto é semelhante a matriz mas é composto
• Alterar as propriedades do por propriedades (par de nome:valor).
objeto constante

16
Operadores

▪Operador unário
operador <operando> ou <operando> operador
X++
▪Operador binário:
<operando1> operador <operando2>
X+Y

Existe também um operador ternário que veremos

adiante.

17
Operadores Aritméticos
Operador Descrição Exemplo
Módulo (%) Operador binário. Retorna o 12 % 5 retorna 2.
inteiro restante da divisão dos
dois operandos
Incremento (++) Operador unário. Adiciona x++, se x é 3, então retorna 4.
uma unidade ao seu
operando.
Decremento (--) Operador unário. Subtrai x--, se x é 3, então retorna 2.
uma unidade de seu
operando.
Negação (-) Operador unário. Se x é 3, então –x retorna -3.
Retorna a negação de
seu operando.
Adição (+) Operador unário. Tenta converter +”3” retorna 3.
o operando em um número +true retorna 1.
sempre que possível
Operador de exponenciação (**) Calcula base^expoente 2**3 retorna 8.

18
Operadores de Atribuição
Nome Operador encurtado Significado

Atribuição x=y x= y
Atribuição de adição
(se usado com string faz a função x += y x=x+y
de concatenação)
Atribuição de subtração x -= y x=x-y
Atribuição de multiplicação x *= y x=x*y
Atribuição de divisão x /= y x=x/y
Atribuição de resto x %= y x=x%y
Atribuição exponencial x **= y x = x ** y

19
Operadores de Comparação

• Igualdade (==)
• Se os valores forem iguais retorna verdadeiro
• Primero converte o operando se não for do mesmo tipo, então
aplica a comparação estrita.

Objetos JavaScript não podem ser comparados. A

comparação de dois objetos JavaScript sempre retorna false. 20
Operadores de Comparação

• Desigualdade (!=)
• Retorna verdadeiro se os valores dos operandos
são diferentes
• Se os operando não forem do mesmo tipo, primeiro converte os
tipos e depois realiza a comparação.

21
Operadores de Comparação

• Identidade/igualdade estrita (===)

• Retorna verdadeiro se os valores e tipos dos
operandos são iguais

Objetos JavaScript não podem ser comparados. A

comparação de dois objetos JavaScript sempre retorna false.

22
Operadores de Comparação

• Non-identity/desigualdade estrita (!==)

• Retorna verdadeiro se os valores e tipos dos
operandos não são iguais

23
Operadores Relacionais

Operador Sintaxe

Maior que (>) 4 > 3 //verdade

5 >= 1 //verdade
Maior ou igual (>=)
3 >= 3 //verdade

Menor que (<) 2 < 5 //verdade

2 <= 3 //verdade
Menor ou igual (<=)
2 <= 2 //verdade

24
Operadores Lógicos
Operador Utilização Descrição

Retorna verdadeiro caso as duas expressões

AND (&&) expr1 && expr2
sejam verdadeiras.

Retorna falso se as duas expressões forem

OR (||) expr1 || expr2
falsas.

Negação lógica.
Retorna falso caso a expressão possa
NOT (!) !expr
ser convertida para verdadeiro, caso
contrário, retorna verdadeiro.

25
Operadores Lógicos

• Exemplos do operador lógico AND

26
Operadores Lógicos

• Exemplos do operador lógico OR

27
Operadores Lógicos

• Exemplos do operador lógico NOT

28
Operadores de tipo JavaScript
Operador Descrição

typeof Retorna o tipo de variável

instanceof Retorna verdadeiro se um objeto for uma instância de um tipo de objeto

var meuTeste = function () { };

var nome = "Lídia";
var tamanho = 162;
const hoje = new Date();

alert(typeof meuTeste); // retorna function

alert(typeof nome); // retorna string
alert(typeof tamanho); // retorna number
alert(typeof hoje); // retorna object
alert(typeof naoTem); // retorna undefined
alert(hoje instanceof Date); // retorna True

29
Tipos de dados
• JavaScript tem tipos dinâmicos. Isso significa que a mesma variável pode ser
usada para armazenar diferentes tipos de dados.

• Alguns tipos de dados:

• Booleanos : true e false.

• Matrizes: const carros = [“Fusca", “Passat", “Belina"];

• Undefined: uma variável sem valor tem o valor undefined. O tipo também é undefined.

• Números : 42 ou 3.14159.

• String: “Texto“. Pode usar aspas simples ou duplas

• Objetos : const pessoa = {nome:"João", idade:50};

30
Tipos de dados - Matrizes
• Variáveis JavaScript
podem ser objetos.
var myFunction = function () { };
• Arrays (matrizes) são var hoje = new Date();
tipos especiais de const carros = ["Fusca", "Passat", "Belina"];
objetos.
const myArray = [];
myArray[0] = hoje; //objeto
• Pode ter variáveis de myArray[1] = myFunction; //função
tipos diferentes no myArray[2] = carros; //matriz
mesmo Array:
• objetos
• funções
• arrays

31
Tipos de dados - Objetos
• Objetos podem conter muitos valores
const person = {
firstName: "John",
lastName : "Doe", • Valores são escritos como pares
id : 5566, nome:valor
fullName : function() {
return this.firstName + “ " + this.lastName;
} • Os pares name:values são chamados de
propriedades
};

• Acessando Propriedades
person.lastName;
ou
person["lastName"];

• Acessando métodos
name = person.fullName();

A comparação de dois objetos JavaScript

sempre retorna false.

32
Quando usar matrizes ou objetos?
Muitas linguagens de programação suportam arrays com
índices nomeados. Arrays com índices nomeados são
chamados de arrays associativos (ou hashes). JavaScript não
suporta arrays associativos.

• Você deve usar objetos quando quiser que os

nomes dos elementos sejam strings (texto).

• Você deve usar arrays quando quiser que os

nomes dos elementos sejam números.

33
Funções
• Assim como em outras linguagens de programação, como o C,
uma função é um bloco de código designado para uma
determinada tarefa.

• Uma função é executada quando ela é chamada (“invocada”)

• Exemplo:

34
Funções
• As funções podem receber uma lista de parâmetros que são
informados entre os parênteses:

Lembre-se que a linguagem JavaScript é fracamente tipada,

isto significa que na lista de parâmetros também
não é informado o tipo das variáveis.

• Quando o JavaScript atinge uma instrução return, a função

para de ser executada. O valor de retorno é retornado de volta
ao chamador
return parâmetro 1 + parâmetro 2 + parametro3

35
Funções de seta
• Permitem escrever uma • Uma instrução e retorna um valor,
sintaxe de função mais curta pode remover os colchetes e a
palavra-chave return.
• Antes da seta
hello = () => "Hello World!";
hello = function() {
return "Hello World!"; • Se tiver parâmetros
}
hello = (val) => "Hello " + val;

• Com função de seta

• Apenas um parâmetro retire os
parênteses
hello = () => {
hello = val => "Hello " + val;
return "Hello World!";
} Com funções de seta, a palavra-chave this sempre
representa o objeto que definiu a função e não o
objeto que chama a função. 36
Estruturas de Controle de Fluxo

• IF • ELSE IF

X<10 sim

O valor de
x é menor
que 10
não X<10 sim
não

• IF ELSE
O valor de
X == 10 x é menor
não sim que 10

O valor de x
O valor de x
é maior que
é igual a 10
10

X<10 sim
não

O valor de
O valor de x
x é menor
é maior ou
que 10
igual a 10
37
Estruturas de Repetição
• For
i=0

i < 10 sim
não

O número é i

i++

• While

38
Vetores

Percorrendo com
WHILE

Percorrendo com
FOR

39
Estruturas de Repetição
i=0

• Do/While
O número é i

i++ sim

i < 10
não

40
Estruturas de Controle de Fluxo

• Switch console.log(day);

41
For In
• Em objeto, percorre as propriedades
<script>
window.onload = funcao01;
function funcao01() {
const pessoa = {
nome: "Pedro",
idade: 25
};
let text = "";

for (let x in pessoa) {

text += pessoa[x] + "<br>";
}
document.getElementById("id01").innerHTML = text;
}
</script>
<h1 id="id01"></h1>

42
forEach()
• Em matriz, chama uma função uma vez para cada
elemento da matriz
<script>
window.onload = funcao01;
function funcao01() {
const numeros = [10, 30, 50];
let soma = 0;

numeros.forEach(funcao);

function funcao(value) {
soma += value;
}
document.getElementById("id01").innerHTML = soma;
}
</script>
<h1 id="id01"></h1>

43
for (variável of iteravel)
• Permite fazer um loop sobre estruturas de dados iteráveis

window.onload = funcao01;
function funcao01() {
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x + "<br>";
}
document.getElementById("id01").innerHTML = text;

let language = "JavaScript";

text = "";
for (let x of language) {
text += x + "<br>";
}
document.getElementById("id02").innerHTML = text;
}
</script>
<h1 id="id01"></h1>
<h1 id="id02"></h1>

44
Operador condicional ternário
• Equivale ao IF Else

• Sintaxe:
<expressão> ? <true> : <false>

• Exemplo:
• var status = ( idade >= 18 ) ? “adulto” : “menor de idade”;

Idade >= 18 sim

não

Menor de adulto
idade

45
Objeto String

• JavaScript trata valores primitivos como

objetos ao executar métodos e propriedades.

• Retorna a quantidade de caracteres de uma

string
• length var txt = “ABCD”
var tam = txt.length

A variável “tam” receberá o valor 4.

46
Objeto String

• slice ou substring(): Extrai uma parte de uma

string e retorna a parte extraída em uma
nova string.
• Recebe dois parâmetros: a posição inicial e a
posição final (não inclusa)

var txt = “Melancia, Abacate, Ameixa”

var res = txt.slice(4, 8);

A variável “res” receberá o valor “ncia”.

47
Objeto String

• substr(): Extrai uma parte de uma string e

retorna a parte extraída em uma nova string.
• Recebe dois parâmetros: a posição inicial e o
segundo parâmetro especifica o comprimento da
parte extraída.
var txt = “Melancia, Abacate, Ameixa”
var res = txt.substr(4, 8);

A variável “res” receberá o valor “ncia, Ab”.

48
Objeto String

• replace(): Recebe uma string e onde houver a

sua ocorrência, substitui pelo termo
informado no segundo parâmetro.
• Recebe dois parâmetros: a string a ser encontrada
e a string que representa o novo valor.
• substitui apenas a primeira correspondência.
var txt = “Visite o CEFET em Uberaba”
var res = txt.replace(“CEFET”, “IFTM”);

A variável “res” receberá o valor “Visite o

IFTM em Uberaba”.

49
Objeto String

• concat(): Junta duas ou mais strings.

var txt1 = “Olá”;

var txt2 = “Mundo”;
var res = txt1.concat(“ ”, txt2);

A variável “res” receberá o valor

“Olá Mundo”.

50
Objeto String

• trim(): Remove os espaços em branco que

envolvem os lados da string.

var txt = “ Olá Pessoa!!! ”;

var res = txt.trim();

A variável “res” receberá o valor

“Olá Pessoa!!!”, isto é, sem os espaços.

51
Objeto String

• split: divide uma string em pedaços

armazenando-os em um vetor de string
(array de string).

var txt = “Como vai você?”;

var res = txt.split(“ “);

A variável “res” receberá cada parte da string, sendo o resultado:

res[0] == “Como”; res[1] == “vai”; res[2] == “você?”;

52
Objeto String

• O método indexOf() retorna o índice

(posição) da primeira ocorrência do termo
especificado.

var txt = “Vamos pensar mais, mais alegremente!”

var pos = txt.indexOf(“mais”);

A variável “pos” receberá o valor 13.

53
Objeto String

• O método lastIndexOf() retorna o índice

(posição) da última ocorrência do termo
especificado.
var txt = “Vamos pensar mais, mais alegremente!”
var pos = txt.lastIndexOf(“mais”);

A variável “pos” receberá o valor 19.

54
Objeto String

• startsWith: determina se uma string começa

ou não com um determinado termo passado
como parâmetro.
• É importante notar que este método é case-
sensitive, isto é, diferencia maiúsculas e
minúsculas.
var txt = “Como vai você?”;
var res = txt.startsWith(“Como“);

A variável “res” receberá o valor TRUE. Todavia, se não iniciar,

receberá o valor FALSE

55
Objeto String

• endsWith: determina se uma string finaliza

A variável “res” receberá o valor TRUE. Todavia, se não finalizar,

receberá o valor FALSE

56
Objeto String

• toUpperCase(): converte todos os caracteres

de uma string em maiúsculo.

• toLowerCase(): converte todos os caracteres

de uma string em minúsculo.

• charAt(posição)
• Retorna o caractere de uma posição específica da
string informada como parâmetro.
57
Objeto String

• Você pode conferir esses e mais métodos em:

https://www.w3schools.com/jsref/jsref_obj_
string.asp

58
Métodos úteis
• prompt(<digite seu texto aqui>):
• Requer um valor do usuário;
• Para utilizar o valor deve-se atribuí-lo a uma variável;
• Para realizar operações matemáticas é necessário converter
o valor.

• parseInt(<valor>): converte uma string em um inteiro.

• parseFloat(<valor>): converte uma string em um

número de ponto flutuante.

• String(): converte o valor em uma string.

59
Objeto Data

• Algumas formas de criar objeto data:

const d = new Date(); //data e hora atuais

const d = new Date(2018, 11, 24, 10, 33);

// ano, mês, dia, hora e minuto

const d = new Date(2018, 11, 24);

// ano, mês e dia

60
Métodos de Data

• toString():
Mon Oct 10 2022 08:49:04 GMT-0300 (Horário Padrão de
Brasília)

• toUTCString():
Mon, 10 Oct 2022 11:49:46 GMT

• toDateString():
Mon Oct 10 2022

61
Métodos de Data
Método Descrição

now() Obter a hora atual. (O número de milissegundos desde a meia-noite de 1º de

janeiro de 1970 00:00:00 UTC.)

getFullYear() Obtenha o ano como um número de quatro dígitos (yyyy)

getMonth() Obtenha o mês como um número (0-11)

getDate() Obtenha o dia como um número (1-31)

getDay() Obtenha o dia da semana como um número (0-6)

getHours() Obtenha a hora (0-23)

getMinutes() Obter o minuto (0-59)

getSeconds() Obter o segundo (0-59)

getMilliseconds() Obter o milissegundo (0-999)

getTime() Obter o tempo (milissegundos desde 1 de janeiro de 1970)

Quando se compara datas o resultado é em milissegundos.

Para converter em dias retire os horários dividindo por
(1000 milissegundos * 60 segundos * 60 minutos * 24 horas)
62
Métodos de Data
Método Descrição:

setDate() Definir o dia como um número (1-31).

Também pode ser usado para adicionar dias a uma data

setFullYear() Definir o ano (opcionalmente mês e dia)

setHours() Definir a hora (0-23)

setMilliseconds() Definir os milissegundos (0-999)

setMinutes() Definir os minutos (0-59)

setMonth() Definir o mês (0-11)

setSeconds() Definir os segundos (0-59)

setTime() Definir a hora (milissegundos desde 1 º de janeiro de 1970)

• Um ótimo guia de referência para trabalhar com objetos de Data esta contido em:
https://www.w3schools.com/jsref/jsref_obj_date.asp

63
Métodos Matemáticos
Método Descrição

Math.round(x) Retorna x arredondado para o inteiro mais próximo

Math.trunc(x) Retorna a parte inteira de x

Math.pow(x, y) retorna o valor de x elevado a y

Math.sqrt(x) retorna a raiz quadrada de x

Math.abs(x) retorna o valor absoluto (positivo) de x

Math.min() e Math.max() encontra o valor mais baixo ou mais alto em uma lista de argumentos
Math.random() retorna um número aleatório entre 0 (inclusive) e 1 (exclusivo)

• A linguagem JavaScript oferece uma variedade de métodos pré-definidos para se

trabalhar com tarefas matemáticas, confira:
https://www.w3schools.com/jsref/jsref_obj_math.asp

64
Métodos de Matrizes
No início No final

shift(): remove o primeiro elemento pop(): remove o último elemento e

e retorna o valor que foi extraído. retorna o valor que foi extraído

unshift(): adiciona um novo push(): adiciona um novo elemento no

elemento no início e retorna o novo final e retorna o novo comprimento da
comprimento da matriz matriz

Visão do programador

A E I O U

splice(): adicionar ou remover

em qualquer posição.
65
BOM e DOM
Browser Object Model
e
Document Object Model

66
Métodos BOM

• O objeto window é suportado por todos os

navegadores.

window

Estas duas linhas de código

document são equivalentes.

67
BOM - Browser Object Model
Método Descrição
window.open() Abre uma nova janela

window.close() Fecha a janela atual

window.moveTo() Move a janela

window.resizeTo() Redimensiona a janela

É bom ficar ligado nas propriedades para obter as dimensões da janela

em pixels:
window.innerHeight
window.innerWidth

Faça um teste acessando

https://www.w3schools.com/js/tryit.asp?filename=tryjs_win_inner

68
HTML DOM

• O que é isso?
• Um HTML DOM (Document Object Model) é um
modelo de objeto padrão e interface de
programação para HTML. Ele define:
• Os elementos HTML da página;
• As propriedades de todos os elementos HTML;
• Os métodos de acesso a todos os elementos HTML;
• Os eventos de todos os elementos HTML.

69
HTML DOM
• Um HTML DOM é criado pelo browser no momento em que a
página WEB é carregada.
• Ele é construído como uma árvore de objetos.
• Exemplo:

70
HTML DOM
• Com o HTML DOM, a linguagem JavaScript tem poder suficiente para:

• Alterar os elementos HTML

• Alterar os atributos dos elementos

• Alterar todos os estilos CSS

• Remover elementos HTML e atributos

• Adicionar novos elementos HTML e atributos

• Responder a eventos da página (clique do mouse, passar o mouse sobre algum

elemento, pressionar uma tecla, etc)

• Criar novos eventos

71
HTML DOM – Definições básicas
• Métodos
• ações que são possíveis realizar sobre os elementos HTML

• Propriedades
• valores que são possíveis incluir ou alterar nos elementos
HTML

72
Exemplo

Método

Representa sua página

Propriedade
WEB

73
Procurando elementos HTML
Nome do método Descrição O que retorna
document.getElementById(id) Procura um Um único elemento DOM cujo ID
elemento pelo seja encontrado. Se não for
atributo id encontrado retorna vazio.
document.getElementsByTagName(name) Procura um Um vetor de elementos DOM
elemento pelo nomeado de acordo com o nome
nome da TAG da TAG informada. Se não for
encontrado nenhum elemento,
retorna vazio.
document.getElementsByClassName(name) Procura um Um vetor de elementos DOM que
elemento pela possuam dentro os valores do
correspondência atributo class o valor informado no
do atributo class parâmetro. Se não for encontrado
nenhum elemento, retorna vazio.

74
Procurando elementos HTML
Nome do método Descrição O que retorna
document.querySelector(".example"); Procura um elemento Retorna o primeiro elemento
pelo selector cuja cujo o seletor coincida.
sintaxe é a mesma do
CSS
document.querySelectorAll(".example"); Procura um elemento Retorna todos os elementos
pelo selector cuja cujo o seletor coincida.
sintaxe é a mesma do
CSS

75
Alterando elementos HTML
Elementos HTML Descrição

element.innerHTML = new html content Altera o HTML interno do elemento

element.attribute = new value Altera o valor do atributo do elemento

element.setAttribute(attribute, value) Altera o valor do atributo do elemento

element.style.property = new style Altera o estilo do elemento

76
Adicionando e excluindo elementos
Cria um parágrafo vazio Cria um nó de texto
const para = document.createElement("p"); const node = document.createTextNode("Novo parágrafo.");

Anexa o nó de texto ao final do parágrafo

Localiza a tag div
(ainda não visível)
const element = document.getElementById("div1");
para.appendChild(node);

const para = document.createElement("p");

const node = document.createTextNode("Novo parágrafo."); Anexa o conjunto parágrafo com texto ao final
para.appendChild(node); da div (fica visível)
const element = document.getElementById("div1"); element.appendChild(para)
element.appendChild(para);

Método Descrição
document.createElement(element) Cria um elemento HTML

document.removeChild(element) Remove um elemento HTML

document.appendChild(element) Adiciona um elemento HTML

document.replaceChild(newelement, oldelement) Substitui um elemento HTML

77
Eventos
• Um evento é o resultado de uma ação.
• Resultado na nossa interação com os dispositivos de entrada e saída.

• Clique do mouse, movimentar uma tela, pressionar uma tecla, etc.

• No HTML os eventos são agrupados em:

• Eventos de atributos: mudança de uma cor, carregamento da página, etc.
• Eventos de formulário: quando o elemento ganha o foco, perde o foco, é
selecionado, etc.
• Eventos do teclado: tecla pressionada
• Eventos do mouse: clicar, passar o cursor sobre algum elemento, etc.
• Eventos de mídia: progresso, inicialização, etc.
• Eventos de clipboard: ao copiar, recortar ou colar conteúdos em elementos.
• Eventos de arrastar (drag): quando um elemento é arrastado, solto, etc.

78
Alguns atributos de eventos

• Eventos do Mouse
Evento Descrição
onclick Dispara quando há um clique do mouse sobre o elemento.
onmouseover Dispara quando o ponteiro do mouse está sobre o elemento
onmouseout Dispara quando o ponteiro do mouse sai de cima do elemento

• Eventos do Teclado
Evento Descrição
onkeydown Dispara quando o usuário está pressionando uma tecla.
onkeypress Dispara quando o usuário pressiona uma tecla.
onkeyup Dispara quando o usuário solta a tecla (finaliza a operação de pressionar)

79
Exemplo

Evento ao clicar no mouse.

80
Validação de formulário
(usando configurações reduzidas no form para uma visualização mais limpa do código)

<form name="form01" action="#" onsubmit="return validaForm()"

method="get">
Nome: <input type="text" name="nome"><br>
Idade: <input type="text" name="idade"><br>
<input type="submit" value="Envie">
</form>

Sem o return a função será chamada, mas de todas as

formas os dados do formulário serão enviados.
Com o return e o valor de retorno false os dados não
são enviados.

81
Validação de formulário
Encontrando elementos
<script> HTML por coleções de
function validaForm() { objetos HTML

let var1 = document.forms["form01"]["nome"].value;

if (var1 == "") {
alert("o campo nome deve ter algum valor.");
return false;
}

let var2 = document.forms["form01"]["idade"].value;

if (isNaN(var2) || var2 < 1 || var2 > 200) {
alert("o campo idade deve ter algum número entre 1 e 200.");
return false;
}
}
</script>

82
EventListener
• Anexa um manipulador de eventos sem substituir os existentes
e permite adicionar muitos eventos ao mesmo elemento.

• addEventListener("click", funcao01);
• não use o prefixo "on" para o evento; use " click" em vez de " onclick".

• O método removeEventListener() remove os manipuladores de

eventos que foram anexados com o método addEventListener().

• Ao passar valores de parâmetros, use uma "função anônima" que

chame a função especificada com os parâmetros.

83
EventListener
<body>
<button id="botao" onclick="funcao05()">Tente</button>
<button id="botao" onclick="funcaoRemove()">Remove</button>
<p id="demo"></p>

let p1 = 5;
let p2 = 7;
x.addEventListener("click", function () { calculo(p1, p2) }); // usando função anônima para
passar parâmetros.

function funcao01() {
document.getElementById("demo").innerHTML += "Passei o mouse sobre!<br>";
}

84
EventListener
function funcao02() {
document.getElementById("demo").innerHTML += "Cliquei função 02!<br>";
}

function funcao03() {
document.getElementById("demo").innerHTML += "Retirei o mouse!<br>";
}

function calculo(a, b) {
document.getElementById("demo").innerHTML += a * b + "<br>";
}

function funcao05() {
document.getElementById("demo").innerHTML += "Cliquei função 05!<br>";
}

function funcaoRemove() {
x.removeEventListener("click", funcao02);
x.removeEventListener("click", function () { calculo(p1, p2) }); // Não retira função anônima
x.removeEventListener("click", funcao05); // Não retira, pois foi definida no onclick
}
</script>
</body>

85
Navegação DOM
<html> é o nó raiz
<html> não tem pais
<html> é o pai de <head> e <body>
<head> é o primeiro filho de <html>
<body> é o último filho de <html>

<head> tem um filho: <title>

<title> tem um filho (um nó de texto): "DOM Tutorial"
<body> tem dois filhos: <h1> e <p>
<h1> tem um filho: "DOM Lesson one"
<p> tem um filho: "Hello world!"
<h1> e <p> são irmãos

document.getElementById("demo").firstChild.nodeValue;

document.getElementById("demo").childNodes[0].nodeValue;

first-child: retorna o primeiro nó filho: um nó de elemento, um nó de

texto ou um nó de comentário. Os espaços em branco entre os
elementos também são nós de texto.

firstElementChild: retorna o primeiro elemento filho (ignora os nós de

texto e comentário).
86
JSON
JavaScript Object Notation

87
JSON

• JavaScript Object Notation (Notação de

Objetos JavaScript)
• Formatação para troca de dados
• É em formato texto
• O que facilita ser gerado e interpretado por diversas linguagens
como C, C++, C#, Java, Perl, Python e etc.
• É mais fácil de interpretar que o XML
• Adotado por empresas que trafegam grande
volume de dados pela internet, tais como: Google,
Facebook e etc.
• Velocidade maior no transporte de dados.

88
Sintaxe
• Um objeto JSON:
• é um conjunto desordenado de nome/valor.
• Começa com { (chaves de abertura) e termina com } (chaves de
fechamento).
• O nome é informado entre aspas.
• Cada nome é seguido por : (dois pontos)
• Cada nome/valor é seguido por , (vírgula).

{“nome”: valor}

Exemplo:
{“nome”: “Maria”, “idade”: 19}
No exemplo temos um objeto com um atributo chamado nome com o valor “Maria” e o atributo idade
com o valor 19.

89
Sintaxe

• Valores com tipos de dados básicos:

• String
Apenas o valor do tipo
• Exemplo: {“nome”: “Maria”} String é representado com

• Número o uso de “” (aspas)

• Exemplo: {“ano”: 2019, “altura”:1.56}

• Booleano
• Exemplo: {“graduado”: false}
• Null
• Exemplo: {“endereco”: null}

90
Sintaxe
• Valores com tipos de dados complexos:
• Array
• Representados por cholchetes e elementos separados por vírgula.
• Exemplo:
• {“estados”: [“MG”, “SP”, “RJ”, “ES”]}
• {“tabela”: [[1, 4], [2,3]]} → este exemplo representa uma matriz de duas linhas e duas
colunas.

• Objeto
{
“pessoa” : nome,
“endereco” : {
“logradouro”: “Rua 10”,
“numero”: 15,
“bairro”: “Vila Mariana”
“cidade”: “Uberaba”
}
}

91
Sintaxe

• É possível representar uma coleção de

objetos:
• Exemplo:
[
{
“nome”: “Maria”,
“idade”: 19
},
{
“nome”: “João”,
“idade”: 23
}
]

92
Métodos importantes
• Para converter texto (com a sintaxe correta) em um JSON,
utilize o método JSON.parse(<TEXTO>). Exemplo:

• Para converter um objeto JSON em texto utilize

JSON.stringify(<obj>)

93
Como acessar os valores de um JSON
• Utilize o operador . (ponto).

const myJSON = '{"name":"John", "age":30, "car":null}';

const myObj = JSON.parse(myJSON);
x = myObj["name"]; // outra forma de acesso.

94
Como acessar os valores de um JSON
• E se o valor estiver dentro de um objeto interno do
JSON?

95
Como acessar os valores de um JSON
• E se o valor estiver dentro de um vetor?

Fique atento ao
índice!

96
Loop de um objeto
<h2>Pegando as propriedades</h2> <h2>Pegando os valores</h2>
<p id="demo"></p> <p id="demo"></p>

let text = ""; let text = "";

for (const x in myObj) { for (const x in myObj) {
text += x + ", "; text += myObj[x] + ", ";
} }
document.getElementById("demo").innerHTML = text; document.getElementById("demo").innerHTML = text;
</script> </script>

97
As diferenças entre
innerHTML, innerText e
textContent

98
innerHTML, innerText e textContent

Retorna o conteúdo de texto

do elemento, incluindo todos
os espaçamentos e tags HTML
internas.

Retorna apenas o conteúdo de

texto do elemento e todos os
seus filhos, sem espaçamento,
texto oculto, tags, <script> e
<style>.

Retorna o conteúdo de texto

do elemento e todos os
descendentes, com
espaçamento e texto oculto,
mas sem tags.
É um innerHTML sem as tags.
99
Percorrendo conjunto de
objetos

100
forEach() com For In
const matrizObjetos = [{ nome: "João", idade: 50 }, { nome: "Ana", idade: 23 }]
let texto1 = JSON.stringify(matrizObjetos);
let texto2 = "";
document.getElementById("p1").innerHTML = texto1;

101
For Of com For in
const matrizObjetos = [{ nome: "João", idade: 50 }, { nome: "Ana", idade: 23 }]
let texto1 = JSON.stringify(matrizObjetos);
let texto2 = "";
document.getElementById("p1").innerHTML = texto1;

102