Programação de Sítios Internet

Introdução

Cristiano Pires Martins

1
 [Link]

[Link]
publications-and-standards/
standards/ecma-262/

ECMA (European Computer Manufactures Association)

"Apple, Google, Microsoft e Mozilla"

[Link]
[Link]/

Cristiano Pires Martins 2

 2024
Cristiano Pires Martins 3
Cristiano Pires Martins 4
 Introdução à Linguagem
• Foi inventada por Brendam Eich, a primeira versão foi JavaScript 1.0,
implementada para o Netscape 2.0, em 1996.

• Concorreu com a JScript 1.0 do Internet Explorer 3.0.

• Atualmente, o nome o cial: ECMAScript e a versão ES2022.

Cristiano Pires Martins 5

fi
Visão Geral
• HTML é usado para estruturar uma página web;
• Apresentação visual é trabalho para o CSS;
• As linguagens de programação são responsáveis pela interatividade
avançada da página.

Cristiano Pires Martins 6

Interatividade
• HTML e CSS: JavaScript é frequentemente usado para manipular o
conteúdo HTML e estilos CSS em tempo de execução.
• [Link]: JavaScript pode ser executado no lado do servidor, usando o
ambiente [Link]. Isso permite que o JavaScript seja usado para criar
aplicativos de servidor.

Cristiano Pires Martins 7

Interatividade
• Ajax (Asynchronous JavaScript and XML): Permite a comunicação assíncrona com o
servidor web, geralmente usando XMLHttpRequest ou APIs mais modernas, como
Fetch.

• JSON (JavaScript Object Notation): JavaScript é frequentemente usado para

trabalhar com dados em formato JSON, que é uma notação de objeto que é fácil de
ser interpretada tanto por humanos quanto por máquinas.

Cristiano Pires Martins 8

Interatividade
•Frameworks e bibliotecas JavaScript: Muitos frameworks e bibliotecas populares, como React,
Angular e [Link], são escritos em JavaScript. Eles permitem o desenvolvimento de aplicações web mais
complexas e dinâmicas.
•Java: Por meio de tecnologias como Rhino ou Nashorn, JavaScript pode ser incorporado em aplicativos Java.
•.NET (C#): O ambiente de execução do .NET, por meio do projeto Blazor, permite a interação entre
JavaScript e C#.
•Python: Com o uso de ferramentas como Brython, é possível executar código Python diretamente no
navegador.
•Ruby: Opal é um compilador que permite a execução de código Ruby no navegador por meio de JavaScript.
•Bancos de Dados: JavaScript é frequentemente utilizado para interagir com bancos de dados, seja através de
APIs RESTful ou outras formas de comunicação.
•WebAssembly (Wasm): JavaScript pode interagir com código compilado para WebAssembly, permitindo
desempenho próximo ao de linguagens de baixo nível.

Cristiano Pires Martins 9

Orientação a objetos
• A linguagem suporta POO;
• É capaz de simular muitos dos fundamentos de POO;
• Os objetos da linguagem podem ser agrupados em:
• Objetos internos da linguagem (strings, arrays e datas);
• Objetos do ambiente de hospedagem (navegador, como window e document);
• Objetos personalizados criados pelo desenvolvedor.

Cristiano Pires Martins 10

Inserir JavaScript na HTML
• Para escrever código não precisa instalar software especial;
• Escreve em um editor de texto simples;
• Visualiza o resultado no browser;
• Os arquivos são gravados com extensão .js;
• Arquivos são executados dentro de um arquivo HTML.

Cristiano Pires Martins 11

Sistema Léxico da JavaScript
• Comentários:
• Em linha única:
• //
• Em múltiplas linhas:
• /* ... */

Cristiano Pires Martins 12

Boas práticas - coloque ao nal do body

Cristiano Pires Martins 13

fi
Sistema Léxico da JavaScript
• Tipos de Dados Literais:
• inteiros;
• decimais;
• booleanos;
• strings;
• arrays;
• objetos.

Cristiano Pires Martins 14

 Editores online
• js [Link] • [Link]
• [Link] • [Link]
pen/
• [Link]
• [Link] • [Link]
[Link]/
• [Link]
• https://
• [Link] [Link]

Cristiano Pires Martins 15

fi
Editores de Código JS
• VSCode
• Sublime
• NotePad++
• WebStorm
• Brackets

Cristiano Pires Martins 16

Entradas e Saídas
• [Link]("inspecionar no browser");
• window
• alert( );
• prompt( );
• con rm( );
• [Link]("texto html");

Cristiano Pires Martins 17

fi
Entradas e Saídas
• [Link]("identi cador")
• innerHTML;
• innerText;
• textContent;
• value (input);

Cristiano Pires Martins 18

fi
Entrada - Saída (objeto window)
• Entrada
• let nome = [Link]("Nome: ");
• let resp = [Link] rm("sim ou não");
• Saída
• [Link]( );

Cristiano Pires Martins 19

fi
document
• [Link] : De ne um título para a página atual, mesmo
efeito que a tag <title>..</title>
Exemplo
[Link]="Curso de Javascript";

• [Link] ed : Exibe a data da última atualização da

página
Exemplo
[Link]([Link] ed);

Cristiano Pires Martins 20

fi
fi
fi
Sistema Léxico da JavaScript
• Caractere de Escape "\": Representa caracteres especiais;

• Sintaxes válidas:

• "Os livros da editora O'Reilly são bons." // aspas duplas fora e simples dentro

• 'Os livros da editora O\'Reilly são bons.' // aspas duplas fora e simples dentro

• 'Mac\'Neil disse: "Vim para car".' //aspas simples fora, duplas e simples
escapadas dentro

• "Mac'Neil disse: \"Vim para car\"." //aspas duplas fora, duplas escapadas e
simples dentro

Cristiano Pires Martins 21

fi
fi
Template Literal
• Os templates literais em JavaScript, introduzidos no ES6, são uma forma
mais prática de criar strings, especialmente quando se precisa interpolar
variáveis ou criar strings com múltiplas linhas.

Sintaxe:
• Usam crases (backticks) `, em vez de aspas simples ou duplas.
• Permitem interpolação com ${}.
• Suportam strings multilinhas sem precisar de quebras com \n.
•

Cristiano Pires Martins 22

Antes (sem templates literais):
• Usando concatenação (+) ou quebras de linha com \n.
let nome = "João";
let idade = 25;
let mensagem = "Olá, meu nome é " + nome + " e eu tenho " + idade + " anos.";
[Link](mensagem);

// Quebra de linha sem template literal

let mensagem2 = "Linha 1\nLinha 2\nLinha 3";
[Link](mensagem2);

Olá, meu nome é João e eu tenho 25 anos.

Linha 1
Linha 2
Linha 3

Cristiano Pires Martins 23

Depois (com templates literais):
• Mais simples, legível e e ciente.
let nome = "João";
let idade = 25;
let mensagem = `Olá, meu nome é ${nome} e eu tenho ${idade} anos.`;
[Link](mensagem);

// Quebra de linha com template literal

let mensagem2 = `Linha 1
Linha 2
Linha 3`;
[Link](mensagem2);

Olá, meu nome é João e eu tenho 25 anos.

Linha 1
Linha 2
Linha 3

Cristiano Pires Martins 24

fi
la 1.5) e palavras que fazem parte da implementação JavaScript nos dispositi
Sistema Léxico da JavaScript
que hospedam a linguagem, como um navegador, por exemplo (Tabela 1.6

Tabela 1.4 – Palavras-chave JavaScript

break else new var
case finally return void
catch for switch while
continue function this with
default if throw
delete in try
do instanceof typeof

CristianoTabela 1.5 – Palavras reservadas25 pela especificação ECMA-262

Pires Martins
 delete in try
Sistema doLéxico instanceof
da JavaScript
typeof

Tabela 1.5 – Palavras reservadas pela especificação ECMA-262

abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public public

Cristiano Pires Martins 26

 Sistema Léxico
o 1 Introdução à JavaScript da JavaScript
Tabela 1.6 – Palavras reservadas dos dispositivos de hospedagem
alert eval location open
array focus math outerHeight
blur function name parent
boolean history navigator parseFloat
date image number regExp
document isNaN object status
escape length onLoad string

Cristiano Pires Martins 27

Sistema Léxico da JavaScript
• JavaScript não é tipi cada;
• Para declarar local
• var a = 30; //variável local
• let a = 20; //variável local de bloco
• Para declarar global não use var.
• b = 25; //variável global

Referência [Link]
entenda-diferenca-entre-var-let-e-const-no-javascript
Cristiano Pires Martins 28
fi
Sistema Léxico da JavaScript
a = 10;
funcaoUm = function () {
let a = 20;
alert(a); // alerta o valor 20
};
funcaoUm(); // executa a funcaoUm
funcaoDois = function () {
alert(a); // alerta o valor 10
};
funcaoDois(); // executa a funcaoDois
// mais script ...
alert(a); // alerta o valor 10

Cristiano Pires Martins 29

Sistema Léxico da JavaScript
a = 10;
funcaoUm = function () {
let a = 20;
alert(a); // alerta o valor 20
};
funcaoUm(); // executa a funcaoUm
funcaoDois = function () {
a = 40;
alert(a); // alerta o valor 40
};
funcaoDois(); // executa a funcaoDois
// mais script ...
alert(a); // alerta o valor 40

Cristiano Pires Martins 30

 Diferença entre
• let declara variáveis com escopo de bloco.

var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
// Here i is 10

let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
// Here i is 5

Cristiano Pires Martins 31

 Hoisting
O hoisting é um comportamento do JavaScript em que declarações de
variáveis e funções são "movidas" para o topo de seu escopo antes da
execução do código. Isso signi ca que você pode usar variáveis e funções
antes mesmo de declará-las no código.
[Link](a); // undefined
var a = 10; O JavaScript trata esse código como:
[Link](a); // 10
var a; // Declaração içada para o topo
[Link](a); // undefined
a = 10; // Inicialização ocorre no ponto correto
[Link](a); // 10

Cristiano Pires Martins 32

fi
 Hoisting com let e const
Variáveis declaradas com let e const também sofrem hoisting, mas diferentemente
de var, elas não são inicializadas e cam em um estado chamado "zona morta
temporal" (TDZ - Temporal Dead Zone) até que sejam atribuídas
[Link](b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
[Link](b);

O JavaScript faz o hoisting da declaração de b, mas não permite seu uso

antes da inicialização. Por isso ocorre um erro.
[Link](c); // ReferenceError
O mesmo acontece com const: const c = 30;
[Link](c);

Cristiano Pires Martins 33

fi
 Hoisting com Funções
Funções declaradas com function são completamente içadas, ou seja, podem ser
chamadas antes da própria de nição.
[Link](somar(5, 3)); // 8

function somar(x, y) {
return x + y;
}

Aqui, o JavaScript move toda a função para o topo, permitindo sua

chamada antes mesmo da de nição.

Cristiano Pires Martins 34

fi
fi
 Hoisting com Funções Expressas (const ou let)
Quando uma função é atribuída a uma variável (const ou let), ocorre hoisting da
variável, mas não da função.

[Link](subtrair(10, 5)); // TypeError: subtrair is not a function

const subtrair = function(x, y) {

return x - y;
};

Explicação:
A variável subtrair é içada, mas sem um valor de nido (zona morta
temporal).
Como a função só é atribuída depois, o código gera erro.

Cristiano Pires Martins fi

35
 Sistema Léxico da JavaScript
• null, unde ned, NaN, In nity
• null: indica ausência de valor. let a = null;
• unde ned: declarada e não inicializada. let a;
• NaN: representar um valor que não seja um número. let a = 3 * "Olá";

• In nity: faixa de números manipuláveis:

-1.7976931348623157e+308 e
1.7976931348623157e+308

Cristiano Pires Martins 36

fi
fi
fi
fi
 BigInt(value);

Descrição
Um BigInt é criado acrescentando n ao nal de um inteiro literal — 10n — ou chamando a
função BigInt().
BigInt é um objeto nativo que fornece um modo de
representar números inteiros maiores que 2^53, que é
o maior número que o JavaScript consegue, com
exatidão, representar com o tipo primitivo Number.
Nota: Observação: BigInt() não é usado com o operador new.
const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991); // ↪ 9007199254740991n

Cristiano Pires Martins 37

fi
Com e sem BigInt

Cristiano Pires Martins 38

 Cuidado!!!
Todas as linguagens de programação, incluindo
JavaScript, têm di culdades com valores de ponto
utuante precisos
let x = 0.1;
let y = 0.2;
Let z = x + y // the result in z will not be 0.3
//0.30000000000000004

Para resolver
let z = (x * 10 + y * 10) / 10; // z will be 0.3

Cristiano Pires Martins 39

fl
fi
Exercícios
Faça os exercícios com as seguintes entradas e saídas de dados:

• let valor = prompt( ) —> [Link]( );

• <input type=“text" id=“id_input”> —> <div id=“id_div”></div>

• let valor = [Link](“id_input”).value;

• [Link](“id_div”).innerText = "string";

1. Faça um programa que receba um número (prompt) e mostre seus vizinhos

(console);

2. Faça um programa para pizzaria que leia o valor de uma conta (input text) e
quantos clientes vão pagá-la. Calcule e informe o valor a ser pago por cliente
([Link]( ));

3. Faça um programa para uma loja, que leia o preço de um produto (prompt) e
informe as opções de pagamento: (1) à vista, (2) a prazo. Calcule e informe o valor
(input text) para pagamento à vista com 10% de desconto e o valor em 3x.

Cristiano Pires Martins 40

Referência
• Silva, Maurício Samy (Maujor), JavaScript: Guia do Programador. São
Paulo: Novatec Editora, 2010.
• Iepsen, Edécio Fernando, Lógica de Programação e Algoritmos com
Javascript. São Paulo: Novatec Editora, 2019.

Cristiano Pires Martins 41

Operadores

Cristiano Pires Martins

 Cuidado com as conversões
automáticas de tipos
• Ao fazer operações matemáticas, o JavaScript pode
converter números em strings:
let x = 5 + 7; // [Link]() is 12, typeof x is a number
let x = 5 + "7"; // [Link]() is 57, typeof x is a string
let x = "5" + 7; // [Link]() is 57, typeof x is a string
let x = 5 - 7; // [Link]() is -2, typeof x is a number
let x = 5 - "7"; // [Link]() is -2, typeof x is a number
let x = "5" - 7; // [Link]() is -2, typeof x is a number
let x = 5 - "x"; // [Link]() is NaN, typeof x is a number

• Subtraindo uma sequência de caracteres de uma

sequência de caracteres, não gera um erro, mas
retorna NaN (Not a Number):
"Hello" - "Dolly" // returns NaN
 Use === para
comparação
• O operador de comparação == sempre converte
(para os tipos correspondentes) antes da
comparação.

• O operador === força comparação de valores e tipo:

0 == ""; // true
1 == "1"; // true
1 == true; // true

0 === ""; // false

1 === "1"; // false
1 === true; // false
 // Declare no início

Boas práticas
let firstName, lastName, price,
discount, fullPrice;

// Use depois
firstName = "John";
lastName = "Doe";
• Declarações no topo
price = 19.90;
• Uma boa prática de codi cação é colocar discount = 0.10;
todas as declarações no topo de cada fullPrice = price * 100 /
script ou função. discount;

• Isso vai:

• Deixar o código mais limpo

// Declare e inicialize no
• Fornecer um único local para início do código
procurar variáveis locais let firstName = "",
lastName = "",
• Será mais fácil evitar variáveis price = 0.0,
globais indesejadas discount = 0,
fullPrice = 0,
• Reduzir a possibilidade de re- myArray = [],
declarações indesejadas myObject = {};
​​
fi
 Estruturas Condicionais
if (expressão)
if (expressão) {
{ //faça isso
//faça isso }
}; else if (expressão)
//script {
continua if (expressão) //faça aquilo
{ }
//faça isso else
} {
else //faça este
{ };
//faça //script continua
aquilo
};
//script
continua
 Laço
switch(expressão)
{
case resultado1:
script1;
break;
case resultado2: let estadoSul = "SC";
script2; switch (estadoSul) {
break; case "RS":
... [Link]("Rio Grande do Sul");
default: break;
script_padrao; case "SC":
}; [Link]("Santa Catarina");
break;
case "PR":
[Link]("Paraná");
break;
default:
[Link]("Não é sigla");
};
 Estruturas switch (new Date().getDay()) {
case 0:

Condicionais day = "Sunday";

break;

Boas práticas
case 1:
day = "Monday";
break;
case 2:
• Finalize seus day = "Tuesday";
switches com break;
case 3:
default
day = "Wednesday";
break;
• Sempre termine case 4:
day = "Thursday";
suas instruções break;
switch com um case 5:
padrão. Mesmo se day = "Friday";
break;
você acha que case 6:
não há day = "Saturday";
necessidade disso. break;
default:
day = "Unknown";
}
 function
function nomefuncao([arg1, arg2, ..., argn])
{
//script;
};

Exemplo return:
function soma (x,y){
Exemplo: return (x + y);
function multiplica (x,y) };
{ let a = soma(3,2);
let resultado = x * y;
[Link](resultado);
};
 Objeto Date
Method Description

getFullYear() Get the year as a four digit number (yyyy)

getMonth() Get the month as a number (0-11)

getDate() Get the day as a number (1-31)

getHours() Get the hour (0-23)

getMinutes() Get the minute (0-59)

getSeconds() Get the second (0-59)

getMilliseconds() Get the millisecond (0-999)

getTime() Get the time (milliseconds since January 1, 1970)

getDay() Get the weekday as a number (0-6)

 .getMonth( )

let d = new Date();

let months =
["January","February","March","April","May","June"
,"July","August","September","October","November",
"December"];
[Link]("demo").innerHTML =
months[[Link]()];
 Opções para switch
//Longhand
switch (something) {
case 1: Vantagens da versão com
doSomething(); Objeto
break; ✅ Mais legível – Facilita a leitura e
case 2: manutenção.
✅ Menos código – Evita break e
doSomethingElse(); várias comparações.
break; ✅ Extensível – Basta adicionar
} novos pares chave: função ao
//Shorthand objeto.
let cases = { ✅ Evita repetições – Não há
necessidade de reescrever case ou
1: doSomething, break várias vezes.
2: doSomethingElse
}
 Exemplos
let actions = {
1: () => [Link]("Executando ação 1"),
2: () => [Link]("Executando ação 2"),
3: () => [Link]("Executando ação 3")
};
let input = 2;
actions[input]?.(); // Saída: "Executando ação 2"

function saudacao(nome) {
[Link](`Olá, ${nome}!`);
}
function despedida(nome) {
[Link](`Tchau, ${nome}!`);
}
let comandos = {
"oi": saudacao,
"tchau": despedida
};
let entrada = "oi";
comandos[entrada]?.("Carlos"); // Saída: "Olá, Carlos!"
 Teste no quokka (vscode)
let foo = 6;
let output = 'Output: ';
switch (foo) {
case 0:
output += 'Então ';
case 1:
output += 'Qual ';
output += 'É ';
case 2:
output += 'O Seu ';
case 3:
output += 'Nome';
case 4:
output += '?';
[Link](output);
break;
case 5:
output += '!';
[Link](output);
break;
default:
[Link]('Favor escolher um número de 0 à 6!');
}
 for
for(valor_inicial;condição;
incremento) Exemplo:
{ let msgp = "";
//faça isso; let msgi = "";
}; for(let i=0;i<20;i++){
if (i%2){
msgi += i + "-";
}
Exemplo: else{
let msg = ""; Msgs += i + "-";
}
for(let i=0;i<10;i++) };
{ [Link] ("pares: "+ msgp);
msg += i + ", "; [Link] ("ímpares: "+ msgi);
};
[Link] (msg);
 for - exemplos
for (let i = 0; i < 9; i++) { let i = 0;
[Link](i);
// more statements for (;;) {
} if (i > 3) break;
[Link](i);
i++;
for (let i = 0;; i++) { }
[Link](i);
if (i > 3) break;
// more statements let i = 0;
} for (; i < 9; i++) {
[Link](i);
// more statements
}
 for … in
O laço for...in interage sobre propriedades enumeradas de um
objeto, na ordem original de inserção. O laço pode ser executado
para cada propriedade distinta do objeto.

for (variavel in objeto) {

...
[Link] }

//Objeto
let obj = {a:1, b:2, c:3};

//Para prop (propriedade) in obj (objeto) faça

for (let prop in obj) {
[Link]("obj." + prop + " = " + obj[prop]);
}

//A saída (output) deverá ser:

// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
for/in
for (variavel in objeto)
let Carro =
{
{ //faça isso;
marca: "Renault", }
modelo: "Logan",
comprimento: "4.250mm",
largura: "1.735mm",
altura: "1.525mm",
cor:"azul",
combustivel:"flex",
marcha:"5"
};

let msg = "", k;

for (k in Carro) {
msg += k + "=>" + Carro[k] + "\n";
}
[Link](msg);
 for … of
O loop for...of percorre objetos iterativos (en-US) (incluindo Array,
Map, Set, o objeto arguments (en-US) e assim por diante),
chamando uma função personalizada com instruções a serem
executadas para o valor de cada objeto distinto.

for (let valor of iteravel) {

//declaração
Iterando sobre uma String }
let iteravel = "boo";

for (let valor of iteravel) {

[Link](valor); Iterando sobre um Array
} let iteravel = [10, 20, 30];
// "b"
// "o" for (let valor of iteravel) {
// "o" [Link](valor);
}
// 10
// 20
// 30
 for … of - exemplos
Iterando sobre um Set
let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {

[Link](value);
}
// 1
// 2
// 3

Iterando sobre um objeto arguments

(function() {
for (let argument of arguments) {
[Link](argument);
}
})(1,2,3);
// 1
// 2
// 3
 for … of - exemplos
Iterando sobre um MAP
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {

[Link](entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

for (let [key, value] of iterable) {

[Link](value);
}
// 1
// 2
// 3
[Link]
 for … in x for … of
Array
for … in: em cada execução do loop é lida uma propriedade do objeto.

let letras = ['a', 'b', 'c'];

for (let i in letras) { for (let i of letras) {
[Link](i); [Link](i);
} }
/* /*
saída: saída:
0 a
1 b
2 c
*/ */

Perceba que a saída do código traz apenas a posição de cada conteúdo, ou

seja, o índice do elemento na array. Agora, confira o mesmo exemplo com a
utilização do loop for/of e veja que o resultado será o conteúdo armazenado
em cada índice da array.
 while
while (expressão)
{
//faça isso
};

let msg = "", j = 0;

let n = 0; while (j <= 10)
let x = 0; {
while (n < 3) { msg += j + ", ";
n++; j++;
x += n; };
}
[Link] (msg);
 do/while
let msg = "", j = 0;
do do {
{ msg += j + ", ";
j++;
//faça isso; } while (j <= 10);
}while(expressão); [Link](msg);

let resultado = '';

let i = 0;
do {
i += 1;
resultado += i + ' ';
} while (i < 5);
[Link]('exemplo').innerHTML = resultado;

Resultado: 1 2 3 4 5
try/catch/ nally
try{
//script com possível
exceção
}
catch (e){
//tratamento do erro
}
finally{
//script a executar ocorra
ou
//não a exceção
};

[Link]
fi
 //Digite um valor maior que 0 e menor que 11

let x = prompt("Digite um número maior que 0 e menor

que 11”);

try
try {
if (x <= 0)
throw ("erro1");
if (x >= 11)

catch
throw ("erro2");
if (isNaN(parseInt(x)))
throw ("er3");
}

throw
catch (e) {
if (e == "erro1")
[Link]("O número deve ser maior que 0");
else if (e == "erro2")
[Link]("O número deve ser menor que 11");
else if (e == "er3")
[Link]("Entre somente número maior que 0 e
menor que 11");
};
 Exemplo - try catch
function UserException(message) {
[Link] = message;
[Link] = "UserException";
}
function getMonthName(mo) {
mo = mo-1; // Ajusta o número do mês para index de array (1=Jan, 12=Dec)
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct", "Nov", "Dec"];
if (months[mo] !== undefined) {
return months[mo];
} else {
throw new UserException("InvalidMonthNo");
}
}

try {
// statements to try
let myMonth = 15; // 15 is out of bound to raise the exception
monthName = getMonthName(myMonth);
} catch (e) {
monthName = "unknown";
logMyErrors([Link], [Link]); // pass exception object to err handler
}
 Objeto
[Link](x)
Retorna o módulo, ou valor absoluto, de um número (|x|).

[Link]
Retorna 3.14159.

Math [Link](x)
Retorna o menor inteiro que é maior ou igual a um número.

[Link](x)
Retorna o maior inteiro que é menor ou igual a um número.

[Link](x,y)
Retorna a base x elevada à potência y do expoente, ou seja, x^y.

[Link]()
Retorna um número pseudo-aleatório entre 0 e 1.

[Link](x)
Retorna o valor arrendodado de x, para o valor inteiro mais próximo.

[Link](x)
Retorna a raiz quadrada positiva de um número

Como gerar um número randômico tipo bytes ou octet

(entre 0 e 10):
[Link]([Link]() * 10);
Math Object Methods
Method Description

abs(x) Returns the absolute value of x

acos(x) Returns the arccosine of x, in radians

asin(x) Returns the arcsine of x, in radians

atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians

atan2(y, x) Returns the arctangent of the quotient of its arguments

ceil(x) Returns the value of x rounded up to its nearest integer

cos(x) Returns the cosine of x (x is in radians)

exp(x) Returns the value of Ex

floor(x) Returns the value of x rounded down to its nearest integer

log(x) Returns the natural logarithm (base E) of x

max(x, y, z, ..., n) Returns the number with the highest value

min(x, y, z, ..., n) Returns the number with the lowest value

pow(x, y) Returns the value of x to the power of y

random() Returns a random number between 0 and 1

round(x) Returns the value of x rounded to its nearest integer

sin(x) Returns the sine of x (x is in radians)

sqrt(x) Returns the square root of x

tan(x) Returns the tangent of an angle

 Math Object Methods
<body> <body>
<h2>JavaScript [Link]()</h2> <h2>JavaScript [Link]()</h2>

<p>Every time you click the <p>Every time you click the
button, getRndInteger(min, max) button, getRndInteger(min, max)
returns a random number between 0 returns a random number between 1
(included) and 10 (excluded):</p> and 10 (both included):</p>

<button <button
onclick="[Link]( onclick="[Link](
'demo').innerHTML = 'demo').innerHTML =
getRndInteger(0,10)">Click Me</ getRndInteger(1,10)">Click Me</
button> button>
<p id="demo"></p> <p id="demo"></p>

<script> <script>
function getRndInteger(min, max) function getRndInteger(min, max)
{ {
return return
[Link]([Link]() * (max - [Link]([Link]() * (max -
min)) + min; min + 1) ) + min;
} }
</script> </script>
</body> </body>
JS
Javascript - objetos
{…}
objects
 Objetos em JavaScript
• Objetos são fundamentais em JavaScript, especialmente no
desenvolvimento frontend.
• Eles permitem estruturar dados e funcionalidades de forma organizada e
e iciente.

let objeto = {
chave1: valor1,
chave2: valor2,
chave3: valor3
};

Cristiano Pires Martins 2

f
 Fundamentos de Objetos
O que são Objetos?
• Objetos são coleções de pares chave-valor.
• Cada chave é uma string (ou Symbol).
• Cada valor pode ser qualquer tipo de dado: strings, números,
booleanos, arrays, funções ou outros objetos.

const pessoa = {
nome: "João",
idade: 20,
profissao: "Tecnólogo em Sistemas"
};

Cristiano Pires Martins 3

 Fundamentos de Objetos
Objetos Literais
• A forma mais comum de criar objetos é usando a sintaxe literal, com
chaves {}.
let carro = {
marca: "Volkswagen",
modelo: "Fusca",
ano: 1982,
detalhes: function() {
return [Link] + " " + [Link] + " - " + [Link];
}
}; [Link]([Link]());
// Saída: Volkswagen Fusca - 1982

Cristiano Pires Martins 4

 Construtor de Objetos
• Menos usado hoje.

const produto = new Object();

[Link] = "Notebook";
[Link] = 4500;
[Link] = 20;

Cristiano Pires Martins 5

 Fundamentos de Objetos
Acessando Propriedades
• Você pode acessar propriedades de um objeto usando a notação de
ponto . ou a notação de colchetes [].

[Link]([Link]); // Saída: "João"

[Link](carro["modelo"]); // Saída: "Fusca"

Cristiano Pires Martins 6

 Exemplo de nomenclatura de propriedades de objetos
Objetos são às vezes chamados de arrays associativos, uma vez que cada propriedade é
associada com um valor de string que pode ser usado para acessá-la:

let meuObj = new Object(),

str = "minhaString",
aleat = [Link](),
obj = new Object();

[Link] = "Sintaxe de ponto";

meuObj["data de criacao"] = "String com espaco";
meuObj[str] = "valor de String";
meuObj[aleat] = "Numero Aleatorio"; {
meuObj[obj] = "Objeto"; tipo: 'Sintaxe de ponto',
meuObj[""] = "Mesmo uma string vazia"; 'data de criacao': 'String com espaco',
minhaString: 'valor de String',
console. log (meuObj); '0.42908154360232076': 'Numero Aleatorio',
'[object Object]': 'Objeto',
'': 'Mesmo uma string vazia'
}

Cristiano Pires Martins 7

 Fundamentos de Objetos
Adicionando, Modi icando e Removendo Propriedades
• Objetos são dinâmicos. Você pode adicionar, modi icar ou remover
propriedades após a criação do objeto.
const pessoa = { let carro = {
nome: "João", marca: "Volkswagen",
idade: 20, modelo: "Fusca",
profissao: "Tecnólogo em Sistemas" ano: 1982
}; };

[Link] = "São Paulo"; // Adiciona a propriedade cidade

[Link] = 31; // Modifica a propriedade idade
delete [Link]; // Remove a propriedade ano

Cristiano Pires Martins 8

f
f
 Não use new Object()

let x1 = {}; // new object

let x2 = ""; // new primitive string
let x3 = 0; // new primitive number
let x4 = false; // new primitive boolean
let x5 = []; // new array object
let x6 = /()/; // new regexp object
let x7 = function(){}; // new function object

Cristiano Pires Martins 9

 Não declare number, string ou boolean como objeto
Declarar esses tipos como objetos, diminui a velocidade de
execução e produz efeitos colaterais desagradáveis.

let x = "John";
let y = new String("John");
(x === y) // é false porque x é uma string
// e y é um object.

let x = new String("John");

let y = new String("John");
(x == y) // é false porque não é possível comparar objects.

Cristiano Pires Martins 10

 Métodos em Objetos
Métodos são funções associadas a objetos. Eles podem acessar e modi icar
os dados do objeto.
const produto = {
nome: "Tênis de Corrida",
preco: 199.99,
descricao: "Tênis leve e confortável para corrida.",
calcularPrecoComDesconto: function (percentualDesconto) {
const desconto = [Link] * (percentualDesconto / 100);
return [Link] - desconto;
}
};
[Link]("Nome do produto:", [Link]);
[Link]("Preço original:", [Link]);
[Link]("Descrição:", [Link]);
[Link]("Preço com 10% de desconto:", [Link](10));

Cristiano Pires Martins 11

f
 Métodos em Objetos
Métodos são funções associadas a objetos. Eles podem acessar e modi icar
os dados do objeto.

const aluno = {
nome: "Maria",
notas: [85, 92, 78, 88],
calcularMedia: function() {
const soma = [Link]((acc, nota) => acc + nota, 0);
return soma / [Link];
}
};
[Link]([Link]()); // Saída: 85.75

Cristiano Pires Martins 12

f
 Como criar objetos?
• Objeto Literal
• Construtor de Objeto (obsoleto)
• Funções Construtoras (obsoleto)
• Classes

Cristiano Pires Martins 13

 Objeto Literal
Objetos literais são uma forma de criar objetos de maneira simples e
direta, sem a necessidade de criar explicitamente uma classe ou
função construtora.

Todo objeto literal é um objeto único e, mesmo que você

armazene ele em diferentes variáveis todas apontarão para
o mesmo objeto.

Cristiano Pires Martins 14

 Objeto Literal
const configApp = {
apiUrl: "[Link]
apiKey: "abc123",
maxResults: 10
};

const livro = {
titulo: "JavaScript: O Guia Definitivo",
autor: "David Flanagan",
anoPublicacao: 2020,
generos: ["Programação", "Web Development"],
detalhes: {
paginas: 1096,
editora: "O'Reilly Media"
}
};

Cristiano Pires Martins 15

 Apresentando Objeto Literal com for … in
<body>
<h2>Detalhes do Produto</h2>
<ul id="lista-produto"></ul>
<script>
const produto = {
nome: "Notebook Gamer",
marca: "Dell",
preco: "R$ 5.999,00",
estoque: 10
};

// Obtendo a referência da lista no HTML

const listaProduto = [Link]("lista-produto");

// Percorrendo o objeto com for...in

for (let propriedade in produto) {
let item = [Link]("li"); // Criando um elemento <li>
[Link] = `${propriedade}: ${produto[propriedade]}`; // Definindo o texto
[Link](item); // Adicionando à lista
}
</script>
</body>

Cristiano Pires Martins 16

 Construtores e Classes
Funções Construtoras (Obsoleto, mas importante entender o histórico)
• Funções construtoras eram usadas para criar objetos com a palavra-
chave new.
function Pessoa(nome, idade) {
[Link] = nome;
[Link] = idade;
[Link] = function() {
[Link](`Olá, meu nome é ${[Link]} e
tenho ${[Link]} anos.`);
};
}
const joao = new Pessoa("João", 30);
[Link]();

Cristiano Pires Martins 17

 Sem Construtor
Como faríamos pra ter um segundo produto, com o mesmo
cálculo de desconto?

let produto1 = {
nome: "Blusa",
preco: 120,
calculaDesconto: function () {
return [Link] * 0.1; //10% de desconto
}
};
[Link](); //12

Cristiano Pires Martins 18

 Sem Construtor
Como faríamos pra ter um segundo produto, com o mesmo cálculo de desconto?
let produto1 = {
nome: "Blusa",
preco: 120,
calculaDesconto: function () {
return [Link] * 0.1; //10% de desconto
}
};
let produto2 = {
nome: "Calça",
preco: 300,
calculaDesconto: function () {
return [Link] * 0.1; //10% de desconto
}
};
[Link](); //12
[Link](); //30

Cristiano Pires Martins 19

 Funções Construtoras
• São funções que podem ser usadas como modelos
para criar objetos semelhantes usando o operador
new.
function Pessoa(nome, idade, cidade) {
[Link] = nome;
[Link] = idade;
[Link] = cidade;
}

const joao = new Pessoa("João", 30, "São Paulo");

Cristiano Pires Martins 20

 Com Construtor - 1
Algo como…
function criarProduto(paramNome, paramPreco) {
return {
nome: paramNome,
preco: paramPreco,
calculaDesconto: function () {
return [Link] * 0.1; //10% de desc.
}
};
}
let produto1 = criaProduto("Blusa", 120);
let produto2 = criaProduto("Calça", 300);
[Link](); //12
[Link](); //30

Perceba que na função criarProduto retornamos um objeto que terá sempre os nomes de atributos.
Além disso, não repetimos o código da função de desconto.
Interessante!

Cristiano Pires Martins 21

 Com Construtor - 2
E o mais bacana é que o JavaScript já vem com uma sintaxe para de nir a estrutura comum entre os objetos:

Observe que:
function Produto(paramNome, paramPreco) { • não retornar nada
[Link] = paramNome; • as propriedades são de nidas com this
[Link] = paramPreco; • é usado = ao invés de : para atribuir
[Link] = function () { • as linhas são separadas por ;
return [Link] * 0.1; //10% de desconto • ao criar os produtos usamos o new
};
} A sintaxe anterior é a maneira correta de
let produto1 = new Produto("Blusa", 120);
let produto2 = new Produto("Calça", 300);
de nir a estrutura para seus objetos e é
[Link](); //12 chamada de construtor. Essa estrutura
[Link](); //30 comum dos objetos muitas vezes é
chamada de classe.

Cristiano Pires Martins 22

fi
fi
fi
 Funções Construtoras
• Usando métodos em objetos criados com funções construtoras:

function Animal(nome, especie) {

[Link] = nome;
[Link] = especie;
[Link] = function() {
[Link](`${[Link]} faz um som.`);
};
}

const cachorro = new Animal("Rex", "cachorro");

[Link]();

Cristiano Pires Martins 23

 Funções Construtoras
• Compartilhando métodos usando o protótipo:

function Carro(marca, modelo) {

[Link] = marca;
[Link] = modelo;
}

[Link] = function() {
[Link](`${[Link]} ${[Link]} está ligado.`);
};

const toyota = new Carro("Toyota", "Corolla");

[Link]();

Cristiano Pires Martins 24

 Classes (ES6)
Classes são a forma moderna e recomendada de criar objetos em
JavaScript. Elas fornecem uma sintaxe mais clara e organizada.
class Pessoa {
constructor(nome, idade) {
[Link] = nome;
[Link] = idade;
}
apresentar() {
[Link](`Olá, meu nome é ${[Link]} e
tenho ${[Link]} anos.`);
}
}
const maria = new Pessoa("Maria", 25);
[Link](); // Saída: "Olá, meu nome é Maria e tenho 25 anos."

Cristiano Pires Martins 25

 class
• Criando uma classe simples:

class Pessoa {
constructor(nome, idade) {
[Link] = nome;
[Link] = idade;
}
apresentacao() {
[Link](`Olá, meu nome é ${[Link]} e
tenho ${[Link]} anos.`);
}
}

const maria = new Pessoa("Maria", 25);

[Link]();

Cristiano Pires Martins 26

 construtor - class
class Produto {
constructor(paramNome, paramPreco) {
[Link] = paramNome;
[Link] = paramPreco;
}
calculaDesconto() {
return [Link] * 0.1;
} Observe que:
} • temos uma class, e não
let produto1 = new Produto("Blusa", 120); mais uma function
let produto2 = new Produto("Calça", 300); • definimos os atributos
[Link](); //12 dentro de constructor
[Link](); //30 • o método calculaDesconto
fica a parte, sem o this

Cristiano Pires Martins 27

 Comparando…

function Pessoa(nome, idade) { class Pessoa {

[Link] = nome; constructor(nome, idade){
[Link] = idade; [Link] = nome;
[Link] = function() { [Link] = idade;
[Link](`Olá, meu nome é }
${[Link]} e tenho $ apresentar() {
{[Link]} anos.`); [Link](`Olá, meu
}; nome é ${[Link]} e tenho $.
} {[Link]} anos.`);
}
}

Cristiano Pires Martins 28

 class
class Animal {
• Herdando de uma classe pai: constructor(nome) {
[Link] = nome;
}
fazerSom() {
[Link](`${[Link]} faz um som.`);
}
}

class Gato extends Animal {

constructor(nome, cor) {
super(nome);
[Link] = cor;
}
}

const felix = new Gato("Felix", "preto");

[Link]();

Cristiano Pires Martins 29

 Herança
class Pessoa {
constructor(nome) {
[Link] = nome;
}
andar() { [Link](`${[Link]} está andando.`); }
falar() { [Link](`${[Link]} está falando.`); }
parar() { [Link](`${[Link]} está parada.`); }

static metodoEstatico() {
[Link](`Método estático executado.`);
}
}
class Crianca extends Pessoa {
brincar() {
[Link](`${[Link]} está pulando!!!`);
}
}
[Link]();
let ana = new Pessoa("Ana");
[Link]();
[Link]();
[Link]();
[Link]();

Cristiano Pires Martins 30

 Campos privados (ES2020)
• A partir do ES2020, podemos de inir campos privados usando # antes do
nome do campo.
class Pessoa {
#nome; // Campo privado
constructor(nome) {
this.#nome = nome;
}
getNome() {
return this.#nome;
}
}
const pessoa = new Pessoa("Maria");
[Link]([Link]()); // Maria
// Tentativa de acessar o campo privado diretamente (causará erro)
// [Link](pessoa.#nome); // SyntaxError

Cristiano Pires Martins 31

f
 Métodos Estáticos
Métodos estáticos são chamados diretamente na classe, sem a
necessidade de instanciar um objeto.
class Calculadora {
static somar(a, b) {
return a + b;
}

static subtrair(a, b) {
return a - b;
}
}
const resultadoSoma = [Link](5, 3);
[Link](resultadoSoma); // Saída: 8

const resultadoSubtracao = [Link](10, 4);

[Link](resultadoSubtracao); // Saída: 6

Cristiano Pires Martins 32

 Principais características de métodos estáticos:
• Não requerem uma instância: não operam em objetos criados a partir da classe. Eles são chamados na
classe em si.

• Acesso direto: pode chamar um método estático diretamente na classe, sem precisar criar uma
instância da classe.

• Não têm acesso ao this: Dentro de um método estático, a palavra-chave this não se refere à instância
da classe; em vez disso, geralmente é usada para acessar outros métodos estáticos ou propriedades
estáticas da classe.

• São úteis para funcionalidades gerais: Métodos estáticos são úteis quando você precisa de uma
funcionalidade que está relacionada à classe como um todo, em vez de depender de dados especí icos
da instância.

Cristiano Pires Martins 33

f
 Exemplo - static
class ConversorTemperatura {
static celsiusParaFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}

static fahrenheitParaCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
}
// Chamando os métodos estáticos sem instanciar a classe
[Link]([Link](25)); // 77
[Link]([Link](77)); // 25

// Tentativa de chamar o método em uma instância (causará erro)

// const conversor = new ConversorTemperatura();
// [Link]([Link](25)); // Erro:
[Link] is not a function

Cristiano Pires Martins 34

 CLONE OR COPY AN OBJECT
const travel = { Country: "India", City: "Mumbai" }

// "Spread"
const clone1 = { ...travel }

// "[Link]"
const clone2 = [Link](travel);

// "[Link]"
const clone3 = [Link]({}, travel)

// "JSON"
const clone4 = [Link]([Link](travel))

// RESULT: { Country: "India", City: "Mumbai" }

Cristiano Pires Martins 35

 De inindo getters e setters
• Um getter é um método que obtém o valor de uma propriedade
especí ca.

• Um setter é um método que de ne o valor de uma propriedade

especí ca.

• Você pode de nir getters e setters em qualquer objeto de núcleo pré-

de nido ou objeto de nido pelo usuário que suporta a adição de novas
propriedades. A sintaxe para de nir getters e setters usa a sintaxe
literal do objeto.

Cristiano Pires Martins 36

fi
f
fi
fi
fi
fi
fi
fi
 Curiosidade: get e set
• Em JavaScript, quando você declara propriedades em objetos
usando a sintaxe de get e set, você NÃO USA PARÊNTESES
como faria ao chamar uma função.
• Isso ocorre porque as propriedades de inidas com get e set
não são métodos, mas sim "acessadores" (accessors) para
propriedades de objeto.

Cristiano Pires Martins 37

f
 Pontos importantes para getters
• Pode ter um identi icador do tipo numérico ou string.
• Não deve ter nenhum parâmetro.
• Não pode ser utilizado mais de um getter para uma mesma propriedade,
assim como não pode haver uma propriedade comum com o mesmo
nome do getter.

Cristiano Pires Martins 38

f
 Exemplo
const pessoa = {
_nome: 'João', //convenção - propriedade privada (obsoleto)
get nome() {
return this._nome;
},
set nome(novoNome) {
this._nome = novoNome;
}
};
// Acessa o valor da propriedade usando get
[Link]([Link]);
// Modifica o valor da propriedade usando set
[Link] = 'Maria';
// Acessa o valor atualizado da propriedade
[Link]([Link]);

Cristiano Pires Martins 39

 Considerando…
• No exemplo anterior, get nome() permite acessar o valor da propriedade _nome,
enquanto set nome(novoNome) permite modi icar o valor da propriedade
_nome.
• Você pode acessar e modi icar essas propriedades como se fossem
propriedades normais de objeto, sem a necessidade de usar parênteses como
faria ao chamar uma função.
• Usar parênteses em get e set causa erros de sintaxe.

Cristiano Pires Martins 40

f
f
 Get e Set
class Pessoa {
#nome; // Campo privado
constructor(nome) {
this.#nome = nome;
}
getNome() {
return this.#nome;
}
setNome(novoNome) {
this.#nome = novoNome;
}
}
const pessoa = new Pessoa('João');
// Acessa o nome usando o método
[Link]([Link]());
// Isso resultaria em um erro, pois #nome é privado
pessoa.#nome = 'Maria';
// ^ SyntaxError: Private field '#nome' must be
// declared in an enclosing class

Cristiano Pires Martins 41

 Get e Set

let person = {
firstName: "Jimmy",
lastName: "Smith",
get fullName() {
return [Link] + " " + [Link];
},
set fullName (name) {
let words = [Link]().split(" ");
[Link] = words[0] || "";
[Link] = words[1] || "";
}
}
[Link] = "Jack Franklin";
[Link]([Link]); // Jack
[Link]([Link]) // Franklin

Cristiano Pires Martins 42

 Manipulando um JSON
<div id="pessoas"></div>
<script>
let divPessoas = [Link]("pessoas");

fetch("[Link]")
.then((response) => {
return [Link]();
})
.then((dados) => {
[Link]((pessoa) => {
[Link] += `
<li>
${[Link]} -
${[Link]} -
${[Link]}
</li>
`;
});
});
</script>

Cristiano Pires Martins 43

 Exercícios Práticos
• Manipulação de Objetos em Arrays:
• Crie um array de objetos alunos, onde cada objeto tem as
propriedades nome, idade e notas.
• Use métodos de array (map, ilter, reduce) para:
• Criar um novo array com os nomes dos alunos.
• Filtrar os alunos com idade maior que 20 anos.
• Calcular a média das notas de todos os alunos.

Cristiano Pires Martins 44

f
 JSON
• JSON (JavaScript Object Notation)
• Formato de dados leve e independente de linguagem de
programação

Cristiano Pires Martins 45

 Como/onde usar JSON?
• Troca de dados: Você pode enviar e receber dados em formato JSON
entre servidores e clientes da web.
• Armazenamento de Con iguração: Muitas vezes, as con igurações de
aplicativos são armazenadas em arquivos JSON para fácil leitura e
edição.
• Armazenamento de Dados: JSON é usado em bancos de dados NoSQL,
como o MongoDB, para armazenar registros de dados.

Cristiano Pires Martins 46

f
f
 Características - JSON
• Tipos de Dados Suportados:
• números
• strings
• booleanos
• arrays
• objetos
• valores nulos.

Cristiano Pires Martins 47

 Exemplo - JSON
• Sintaxe Simples: leitura fácil para humanos.
• Estrutura de Pares Chave-Valor: semelhantes aos objetos literais em JavaScript.

{
"nome": "Ana Silva",
"idade": 28,
"email": "[Link]@[Link]",
"telefone": "11999999999"
}

Cristiano Pires Martins 48

 Objeto para JSON (usando [Link]())

// Objeto JavaScript
const pessoa = {
nome: "João",
idade: 30,
email: "joao@[Link]"
};

// Convertendo para JSON

const jsonString = [Link](pessoa);

// Mostrando no console
[Link]("Objeto convertido para JSON:");
[Link](jsonString);

Cristiano Pires Martins 49

 JSON para Objeto - usando [Link]()

// String JSON
const jsonString =
'{"nome":"Maria","idade":25,"email":"maria@[Link]"}';

// Convertendo para objeto

const objeto = [Link](jsonString);

// Mostrando no console
[Link]("JSON convertido para objeto:");
[Link](objeto);

Cristiano Pires Martins 50

 Array de JSON
{
{ "produtos": [
"users": [ {
{ "id": 1,
"user": "aluno1", "nome": "Notebook",
"message": "Exemplo JSON1", "preco": 3500.00,
"date": "2023-03-18" "em_estoque": true
}, },
{ {
"user": "aluno2", "id": 2,
"message": "Exemplo JSON2", "nome": "Mouse",
"date": “2023-03-15" "preco": 120.00,
} "em_estoque": false
] }
} ]
}

Cristiano Pires Martins 51

 Restrições de um JSON
• não pode ter funções
• não pode ter comentários
• todo texto sempre tem aspas duplas
• as propriedades sempre tem aspas duplas

Cristiano Pires Martins 52

 Considerações
• Este código faz uma solicitação GET para a URL da API, converte a resposta
em JSON usando [Link](), e então você pode manipular os dados
JSON dentro da segunda função then. Certi ique-se de substituir a URL com
a URL real da API que você deseja consumir.
• Lembrando que ao lidar com APIs, é importante entender a estrutura dos
dados JSON que a API retorna para que você possa acessar as informações
relevantes de acordo com sua necessidade.

Cristiano Pires Martins 53

f
 Caminho JSON
[ CLIENTE (Frontend - JavaScript) ]
|
| 1. Criação de objeto JS
| const dados = { nome: "Maria", idade: 30 };
|
| 2. Conversão para JSON string |
| const json = [Link](dados); |
| | 8. Conversão para JSON string
v | const respostaJSON = [Link](resposta);
[ API Request - HTTP Request ] |
| v
| 3. Envio via método HTTP (POST, GET etc) [ API Response - HTTP Response ]
| Body da requisição: JSON string |
| Headers: Content-Type: application/json | 9. Envio da resposta com JSON string
| |
v v
[ SERVIDOR (Backend - ex: [Link], Python etc) ] [ CLIENTE (Frontend - JavaScript) ]
| |
| 4. Recebimento da string JSON | 10. Recebimento da resposta (string JSON)
| const jsonString = [Link] ([Link] por ex) |
| | 11. Conversão de volta para objeto
| 5. Conversão para objeto | const respostaObjeto = [Link](respostaJSON);
| const obj = [Link](jsonString); |
| | 12. Uso dos dados
| 6. Processamento interno | Exibe mensagem na interface, atualiza DOM, etc.
| (Salvar no BD, cálculos, validação, etc)
|
| 7. Criação da resposta como objeto
| const resposta = { status: "sucesso", id: 123 };
|
| 8. Conversão para JSON string
| const respostaJSON = [Link](resposta);
v

Cristiano Pires Martins 54

 Consumindo uma API que Retorna JSON em JavaScript:
• Para consumir uma API que retorna JSON em JavaScript, você pode usar a
função fetch.
• Aqui está um exemplo de código que faz uma solicitação a uma API e lida
com a resposta JSON:

Cristiano Pires Martins 55

 Exemplo

fetch(‘[Link] // Substitua com a URL da API real

.then(response => [Link]()) // Converte a resposta para JSON
.then(data => {
// Manipule os dados JSON aqui
[Link](data);
})
.catch(error => {
// Lida com erros
[Link]('Ocorreu um erro:', error);
});

Cristiano Pires Martins 56

 Exercícios Práticos
• Consumo de API com JSON:
• Utilize a API do ViaCEP ([Link] para
buscar informações de um endereço a partir do CEP.
• Crie uma função que recebe um CEP como parâmetro, faz a
requisição para a API e exibe os dados do endereço em um elemento
HTML.

Cristiano Pires Martins 57

 Referências para usar JSON

[Link]

[Link]

[Link]
[Link]
[Link] io/
[Link]

Cristiano Pires Martins 58

f
 Referências:
• [Link]
Working_with_Objects
• [Link]
Objects/Basics
• [Link]
object-methods-fc0d15a7ce0b

Cristiano Pires Martins 59

Operações Assíncronas
Ajax, fetch, promises, async/await

Cristiano Pires Martins

Introdução
Funções Assíncronas

• As funções assíncronas em JavaScript são uma forma de lidar

com operações assíncronas de maneira mais concisa e legível.

• Elas permitem que você escreva código que não bloqueia a

execução do programa enquanto espera por operações como:

• acesso a arquivos
• chamadas de API
• consultas de banco de dados.
Operações assíncronas

• Para lidar com operações assíncronas de forma e ciente, o

JavaScript introduziu conceitos como:

• AJAX
• Promises
• Fetch
• Async/await

fi
AJAX
Asynchronous JavaScript and XML
• AJAX é uma técnica de desenvolvimento web que permite fazer
solicitações assíncronas ao servidor, atualizando partes
especí cas de uma página sem recarregar a página inteira.

• Tradicionalmente, o AJAX era implementado usando o objeto

XMLHttpRequest (XHR) para fazer solicitações assíncronas.

• Originalmente, era usado para buscar dados em formato XML,

mas agora é usado para trabalhar com vários tipos de dados,
incluindo JSON.
fi
AJAX
<script>
function fazerRequisicao() {
// Criando um objeto XMLHttpRequest
var xhr = new XMLHttpRequest();

// Configurando a função de callback para lidar com a resposta

[Link] = function() {
if ([Link] === [Link]) {
if ([Link] === 200) {
// Se a solicitação for bem-sucedida (status 200), manipule a
resposta aqui
[Link]([Link]);
} else {
// Se a solicitação falhar, exiba uma mensagem de erro
[Link]('Ocorreu um erro durante a solicitação.');
}
}
};

// Configurando o tipo de solicitação e a URL de destino

[Link]('GET', '[Link] true);

// Enviando a solicitação
[Link]();
}
</script>
 Explicação
Código anterior

• Uma função chamada fazerRequisicao() é de nida para enviar uma solicitação

AJAX.

• Dentro dessa função, um objeto XMLHttpRequest é criado para fazer a

solicitação.

• A função onreadystatechange é con gurada para ser chamada sempre que o

estado da solicitação mudar. Quando o estado for [Link] (4),
signi ca que a solicitação está completa.

• Se a solicitação for bem-sucedida (status 200), a resposta do servidor é

registrada no console. Caso contrário, uma mensagem de erro é exibida no
console.

• A solicitação é con gurada com o método open() para especi car o tipo de
solicitação (GET, POST, etc.) e a URL de destino.

• Finalmente, a solicitação é enviada ao servidor usando o método send().

fi
fi
fi
fi
fi
 Fetch
De nições

• Interface moderna para fazer solicitações HTTP

assíncronas em JavaScript.

• Usa promises para lidar com as respostas das

solicitações.

• Fornece uma maneira mais exível de fazer solicitações

HTTP em comparação com o objeto XMLHttpRequest.

• É projetada para ser fácil de usar e suporta os recursos de

promises e async/await.
fi
fl
 Promises
De nições

• Promises são úteis quando você precisa lidar com

operações que levam algum tempo para serem concluídas,
como:

• fazer solicitações de rede

• ler arquivos
• qualquer outra tarefa assíncrona.
• Elas oferecem um mecanismo para tratar essas operações de
forma mais ordenada e legível.
fi
Promises
Introdução

• As Promises são um recurso introduzido no ECMAScript 6

(ES6) para lidar com operações assíncronas de maneira mais
limpa e e ciente.

• Uma Promise representa um valor que pode estar disponível

agora, no futuro ou nunca.

• As Promises têm três estados: pendente, resolvida (com

sucesso) ou rejeitada (com erro).

• As Promises são amplamente usadas em JavaScript para lidar

com operações assíncronas, incluindo solicitações AJAX.
fi
 Promises
Introdução

• Possuem três estados principais:

• Pending (Pendente): estado inicial da Promise, operação
ainda não foi concluída.

• Ful lled (Resolvida): quando a operação foi concluída com

sucesso e o resultado está disponível.

• Rejected (Rejeitada): quando a operação falhou (erro), e

um motivo de rejeição é fornecido.
fi
 async/await async function exemploAssincrono() {
De nições const resultado = await algumaOperacaoAssincrona();
[Link](resultado);
}

• São recursos introduzidos no ECMAScript 2017 (ES8) que

simpli cam o código assíncrono e o tornam mais legível.

• A palavra-chave async é usada para declarar funções

assíncronas, o que permite o uso de await dentro dela.
Retornam promises automaticamente.

• A palavra-chave await é usada dentro de funções assíncronas

para esperar que uma promise seja resolvida ou rejeitada antes
de continuar a execução do código.

• Isso permite que o código assíncrono pareça síncrono,

facilitando a leitura e a compreensão.
fi
fi
 API (Application Programming Interface)
De nições

• API é um conjunto de regras e

protocolos que permitem que
diferentes softwares se
comuniquem entre si.

• Em contextos web, uma API é

frequentemente um serviço web
que fornece acesso a dados ou
funcionalidades de um servidor
remoto.
fi
Relações entre os elementos

• AJAX é uma técnica que permite fazer solicitações de rede

assíncronas em JavaScript e é uma forma de lidar com
operações assíncronas.

• fetch é uma função que retorna uma Promise e é

frequentemente usada para fazer solicitações de rede, como
solicitações HTTP, em operações AJAX.

• Promises são usadas para representar valores futuros, como o

resultado de uma solicitação AJAX ou de outras operações
assíncronas.

• Funções assíncronas (async/await) simpli cam o tratamento

de operações assíncronas, tornando o código mais legível.
fi
Cronologia

• AJAX: Introduzido nos anos 2000, AJAX permitiu que os

desenvolvedores web zessem solicitações de rede assíncronas em
JavaScript para atualizar partes especí cas de uma página sem
recarregar a página inteira.

• Fetch: Introduzido com a ES6, mas popularizado posteriormente, fetch

se tornou a maneira moderna de fazer solicitações de rede em
JavaScript.

• Promises: Introduzidas com a especi cação ECMAScript 6 (ES6) em

2015, Promises tornaram o tratamento de operações assíncronas mais
limpo e estruturado.

• Funções Assíncronas (async/await): Introduzidas com a ES8

(ECMAScript 2017), funções assíncronas simpli caram ainda mais o
código assíncrono e melhoraram a legibilidade.
fi
fi
fi
fi
Resumindo

• Em resumo, a relação entre AJAX, promises, async/await e

fetch é que todos eles estão relacionados à realização de
operações assíncronas em JavaScript.

• AJAX é uma técnica para fazer solicitações assíncronas

• Promises são usadas para lidar com operações assíncronas de
forma mais estruturada

• async/await simpli ca ainda mais o código assíncrono

• Fetch API é uma moderna API para fazer solicitações HTTP que
utiliza promises e se integra bem com async/await.
fi
 Exemplo 1
XHR é a sigla para "XMLHttpRequest"
AJAX
const xhr = new XMLHttpRequest();
[Link]('GET',
'[Link] true);
[Link] = function () {
if ([Link] === 4 && [Link] === 200) {
const data = [Link]([Link]);
[Link](data);
}
}; 1. Criamos um objeto XMLHttpRequest
2. Fizemos uma requisição GET
[Link]();
(assíncrona) para uma URL especí ca.
3. De nimos uma função para tratar a
resposta.
O XHR foi amplamente utilizado no 1. se a resposta é recebida com
passado. Hoje muitos sucesso (status 200)
desenvolvedores preferem usar fetch 2. transformamos os dados JSON
devido a sintaxe mais moderna, em um objeto (data)
legível e exível. 3. Imprimimos no console.
fi
fl
fi
Exemplo 2 requisição GET para a API JSONPlaceholder
para obter um post especí co. Usamos .then()
para lidar com a resposta e tratar erros
Fetch - com função com .catch().

function fetchExample1() {
fetch('[Link]
.then(function(response) {
if (![Link]) {
throw new Error('Erro na requisição: ' + [Link]);
}
return [Link]();
})
.then(function(data) {
[Link](data);
})
.catch(function(error) {
[Link]('Erro: ' + [Link]);
});
}

fetchExample1();
fi
Exemplo 3 Utilizamos arrow functions em vez de
funções regulares para de nir nossos
callbacks .then() e .catch(), mantendo o
Fetch - com arrow function mesmo comportamento do exemplo anterior.

const fetchExample2 = () => {

fetch('[Link]
.then(response => {
if (![Link]) {
throw new Error('Erro na requisição: ' + [Link]);
}
return [Link]();
})
.then(data => {
[Link](data);
})
.catch(error => {
[Link]('Erro: ' + [Link]);
});
};

fetchExample2();
fi
Exemplo 4 fetchData é uma função assíncrona que usa await para
aguardar a resolução da promise retornada por fetch,

async/await com fetch tornando o código mais linear e fácil de entender.

Não roda

async function fetchData() {

try {
const response = await fetch('[Link]
if (![Link]) {
throw new Error('Não foi possível obter os dados');
}
const data = await [Link]();
[Link](data);
} catch (error) {
[Link](error);
}
}

fetchData();
Exercício resolvido 1
• Crie uma função assíncrona que use fetch para obter uma lista de usuários da
API JSONPlaceholder ([Link] e exiba o
resultado no console.
async function fetchUsuarios() {
try {
const response = await fetch(
'[Link]
if (![Link]) {
throw new Error(
'Não foi possível obter os dados dos usuários');
}
const data = await [Link]();
[Link](data); //todo o array em tabela
[Link](data[0].address); //apenas o endereço
[Link](data[1].address); //apenas o endereço
} catch (error) {
[Link](error);
}
}
fetchUsuarios();
Exercício resolvido 2
Escreva uma função assíncrona que use fetch para
async function criarNovoPost() { fazer uma solicitação POST para a mesma API
try { (JSONPlaceholder) para criar um novo post (veja a
const novoPost = { documentação da API para mais detalhes) e exiba a
resposta no console.
title: 'Novo Post',
body: 'Conteúdo do novo post',
userId: 1 // Substitua com o ID de um usuário existente
};
const response = await fetch('[Link] {
method: 'POST',
body: [Link](novoPost),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
});
if (![Link]) {
throw new Error('Não foi possível criar o novo post');
}
const data = await [Link]();
[Link](data);
} catch (error) {
[Link](error);
}
}
criarNovoPost();
Exemplo 1 - API pública
API de Previsão do Tempo (INMET)
Esta API fornece informações sobre previsão do
tempo em diferentes cidades do Brasil.

async function fetchWeather(cityId,KEY_API) {

try {
const enderecoAPI = `[Link]
id=${cityId}&appid=${KEY_API}`
const response = await fetch(enderecoAPI);
if (![Link]) {
throw new Error('Erro na requisição: ' + [Link]);
}
const data = await [Link]();
return data;
} catch (error) {
[Link]('Erro: ' + [Link]);
}
}

// Exemplo de uso: Consultar previsão do tempo para "Jales"

const idJales = 3460186
const KEY_API = ‘74d55af2d339ede02fc5beb3662d654d’
fetchWeather(idJales, KEY_API).then(data => [Link]([Link]));
Exemplo 2 - API pública
API de CEP (ViaCEP)
Essa API permite consultar informações de CEPs
brasileiros, como endereço e localização.

async function fetchCEP(cep) {

try {
const response = await fetch(`[Link]
if (![Link]) {
throw new Error('Erro na requisição: ' + [Link]);
}
const data = await [Link]();
return data;
} catch (error) {
[Link]('Erro: ' + [Link]);
}
}

// Exemplo de uso: Consultar informações para o CEP "01311-100"

fetchCEP('01311100').then(data => [Link](data));
Exemplo 3 - API pública
API de Notícias (News API)
A News API fornece notícias de diversas fontes
brasileiras e internacionais. Utilize o Live Server.

434ba33dd35145b3ba86f4370abca54a

async function fetchNews() {

try {
const response = await fetch(
'[Link]
if (![Link]) {
throw new Error('Erro na requisição: ' + [Link]);
}
const data = await [Link]();
return data;
} catch (error) {
[Link]('Erro: ' + [Link]);
}
}

// Exemplo de uso: Consultar as principais notícias nos EUA

fetchNews().then(data => [Link](data));

Lembre-se de substituir YOUR_API_KEY pela chave de API válida da News API.

Exemplo 4 - API pública
API de Moedas (AwesomeAPI)
Essa API oferece informações sobre taxas de
câmbio de moedas brasileiras.

async function fetchExchangeRates() {

try {
const response = await fetch('[Link]
if (![Link]) {
throw new Error('Erro na requisição: ' + [Link]);
}
const data = await [Link]();
return data;
} catch (error) {
[Link]('Erro: ' + [Link]);
}
}

// Exemplo de uso: Consultar as taxas de câmbio de dólar e euro em reais

fetchExchangeRates().then(data => [Link](data));
Exemplo 5 - API pública
API de Dados Abertos do Brasil ([Link])
O portal de Dados Abertos do Brasil oferece várias APIs com
informações públicas, como dados sobre municípios brasileiros.

async function fetchMunicipalitiesData() {

try {
const response = await fetch('[Link]
municipios');
if (![Link]) {
throw new Error('Erro na requisição: ' + [Link]);
}
const data = await [Link]();
return data;
} catch (error) {
[Link]('Erro: ' + [Link]);
}
}

// Exemplo de uso: Consultar dados de todos os municípios do Brasil

fetchMunicipalitiesData().then(data => [Link](data));
Paginação

• [Link]
 Cristiano Pires Martins

Boas práticas ao consumir APIs

1
 Use fetch com async/await

• Mais legível e atual que .then().

async function fetchData(url) {

try {
const response = await fetch(url);
if (![Link]) throw new Error(`Erro: ${[Link]}`);
const data = await [Link]();
return data;
} catch (error) {
[Link]("Erro ao buscar dados:", error);
}
}

Cristiano Pires Martins 2

 Separar Lógica da Interface
Separação de Responsabilidades

• Separar a lógica de negócios (como buscar dados da API) da lógica de

apresentação (como mostrar no HTML).
• Por que fazer?
• Torna o código mais organizado, testável e reutilizável.
• Facilita a manutenção: se mudar a forma como a API funciona, você só
altera na função que faz a requisição.
• Favorece a modularização do código.

Cristiano Pires Martins 3

 Exemplo 1

• Mantenha funções de requisição separadas das que manipulam o DOM

// lógica da API
async function getUsers() {
const response = await fetch("[Link]
return await [Link]();
}

// lógica de interface
async function renderUsers() {
const users = await getUsers();
[Link](user => {
const el = [Link]("p");
[Link] = [Link];
[Link](el);
});
}

Cristiano Pires Martins 4

 Exemplo 2
// [Link]
export async function getUsers() {
return await fetchData("[Link]
}

// [Link]
import { getUsers } from "./[Link]";

async function renderUsers() {

const users = await getUsers();
const list = [Link]("#user-list");
[Link](user => {
const li = [Link]("li");
[Link] = [Link];
[Link](li);
});
}

Cristiano Pires Martins 5

 Criar Funções Reutilizáveis

• Evitar repetir código criando funções que podem ser usadas em vários
lugares.
• Por que fazer?
• Evita duplicação de código
• Facilita a leitura e testes
• Diminui erros em alterações futuras

Cristiano Pires Martins 6

 Exemplo

function createElement(tag, text, attributes = {}) {

const el = [Link](tag);
[Link] = text;
for (const key in attributes) {
[Link](key, attributes[key]);
}
return el;
}

Agora você pode criar qualquer elemento de forma padrão:

const btn = createElement("button", "Enviar", { class: "btn-primary", id: "enviar" });

Cristiano Pires Martins 7

 Carregamento e feedback visual

• Use indicadores de carregamento para uma boa experiência do usuário

<div id="loading" style="display:none;">Carregando...</div>

[Link]("loading").[Link] = "block";
// Após a resposta:
[Link]("loading").[Link] = "none";

Cristiano Pires Martins 8

 Use try/catch em todos os async

• Evita travar a aplicação em caso de falha de rede ou resposta inválida.

Cristiano Pires Martins 9

 Valide os dados recebidos

• Mesmo de APIs públicas, valide antes de usar (evita bugs silenciosos).

if ([Link](users) && [Link] > 0) {

// renderiza...
}

Cristiano Pires Martins 10

 Evitar Hardcode de URLs e Strings

• Evite escrever valores ixos diretamente no código, como URLs, nomes de

campos, etc.
• Por que evitar?
• Di iculta a manutenção (se mudar a URL, tem que procurar em vários
pontos do código).
• Di iculta testes, reuso e adaptação para ambientes diferentes
(desenvolvimento, produção etc).

Cristiano Pires Martins 11

f
f
f
 Exemplo

const API_BASE = "[Link]

const ENDPOINTS = {
users: `${API_BASE}/users`,
posts: `${API_BASE}/posts`
};

Cristiano Pires Martins 12

 Use módulos ES6 (type="module")
Mais organizado e atual

• Use módulos ES6, que permitem importar e exportar funções, objetos e

variáveis entre arquivos JS.
• Por que usar?
• Permite modularização real do código.
• Cada módulo tem seu escopo próprio, evitando con litos de nomes.
• Permite importar somente o necessário.

Cristiano Pires Martins 13

f
 Exemplo

<script type="module" src="[Link]"></script>

// [Link]
export async function getUsers() {
const res = await fetch(...);
return [Link]();
}

// [Link]
import { getUsers } from "./[Link]";

Cristiano Pires Martins 14

 Debounce para chamadas rápidas

• Técnica para atrasar a execução de uma função até que o usuário pare de
interagir (ex: digitação, busca).
• Por que usar?
• Evita fazer muitas chamadas à API enquanto o usuário está digitando.
• Economiza recursos e melhora performance.

Cristiano Pires Martins 15

 Debounce para chamadas rápidas (ex: busca)
Adiar a execução até que o evento pare de ocorrer
Sem debounce [Link]("input", (e) => {
buscarAPI([Link]); // chama a API a cada letra
});

Com debounce function debounce(fn, delay) {

let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}

const buscarComDebounce = debounce((termo) => {

buscarAPI(termo); // só chama se o usuário parar de digitar por 500ms
}, 500);

[Link]("input", (e) => {

buscarComDebounce([Link]);
});

Cristiano Pires Martins 16

 Cache simples com localStorage (opcional)

• Salva dados no navegador do usuário para evitar requisições repetidas

desnecessárias.
• Por que usar?
• Evita reconsultar a API se os dados já estão disponíveis.
• Melhora performance e experiência do usuário.

Cristiano Pires Martins 17

 Como usar localStorage

//Salvar dados no localStorage

[Link]("nome", "Cristiano");

//Recuperar os dados
const nome = [Link]("nome");
[Link](nome); // Saída: Cristiano

//Remover um item
[Link]("nome");

//Limpar tudo
[Link](); // Remove todos os dados salvos no localStorage

Cristiano Pires Martins 18

 localStorage - Exemplo com Objeto

• Você não pode salvar objetos diretamente, mas pode transformá-los em

texto com [Link] e depois reconvertê-los com [Link]
const usuario = {
nome: "Tio Paulo",
idade: 60
};

// Salvando objeto
[Link]("usuario", [Link](usuario));

// Recuperando objeto
const dados = [Link]([Link]("usuario"));
[Link]([Link]); // Tio Paulo
[Link]([Link]); // 60

Mostrar o exemplo na pasta desse conteúdo.

Cristiano Pires Martins 19

 Exemplo
const CACHE_KEY = "usuarios_cache";
const EXPIRACAO_EM_MS = 5 * 60 * 1000; // 5 minutos

async function getUsuarios() {

const cache = [Link]([Link](CACHE_KEY));
if (cache && [Link]() - [Link] < EXPIRACAO_EM_MS) {
[Link]("Usando cache localStorage");
return [Link];
}
[Link]("Buscando da API...");
const resposta = await fetch("[Link]
const dados = await [Link]();
// Atualiza o cache
[Link](CACHE_KEY, [Link]({
dados: dados,
timestamp: [Link]()
}));
return dados;
}

Cristiano Pires Martins 20

 Trabalho - Estrutura do projeto

projeto-api/
├── [Link] ← Interface
├── [Link] ← Inicialização, DOM e eventos
├── [Link] ← Funções de requisição e cache
└── [Link] ← Funções utilitárias (debounce, createElement)

Cristiano Pires Martins 21

 Funcionalidades:

• Separação de lógica de interface e requisição.

• Uso de fetch com async/await.
• Debounce para buscas no campo de input.
• Cache simples com localStorage.
• Criação de elementos HTML reutilizáveis.
• Modularização com type="module".

Cristiano Pires Martins 22

JavaScript - Objeto Array
Cristiano Pires Martins

1
Fundamentos
• Array é um objeto destinado a armazenar uma coleção ordenada de dados
indexados sequencialmente a partir de zero;

• Para criar um array:

let meuArray = new Array( ); ou
let meuArray = [ ]; //recomendável

• Para popular um array:

let meuArray = ["casa", "rio", 5, "Jales", 12.5];

• Cada elemento tem seu índice, começando por zero;

Cristiano Pires Martins / FATEC 2

Fundamentos
• Arrays podem conter dados do tipo objeto:

let outroArray = ["casa", "rio", {x: 14, y: “mar"}];

• Para ler:

outroArray[2].x; //14
outroArray[2]["x"]; //14

outroArray[2].y; //mar
outroArray[2]["y"]; //mar

Cristiano Pires Martins / FATEC 3

Fundamentos
• Outra forma é criar e popular depois:

let a = [ ];
a[0] = 3.14159;
a[1] = "prego";
a[2] = true;
a[3] = {nome: "Cristiano", cidade: "Jales"};

//Para ler os dados

a[0] //Retorna 3.14159
a[3].cidade //Retorna Jales

Cristiano Pires Martins / FATEC 4

Propriedades do Construtor
• Construtor: é uma referência à função que cria o objeto;

• prototype: permite adicionar novas propriedades e/ou métodos a um objeto

existente;

• length: retorna a quantidade de elementos de um array;

let arr = [1, 2, 3, "a", "b", "c", {nome: "Cristiano", cidade: “Jales"}];
let x = [Link]; //O valor de x é sete

Cristiano Pires Martins / FATEC 5

Imutabilidade
• Imutabilidade refere-se à ideia de que uma vez que um objeto é criado, ele não
pode ser alterado. Em vez de modi car o objeto original, operações imutáveis
criam uma nova instância com as modi cações necessárias.

Métodos mutáveis:
Métodos imutáveis, retornam novos arrays:
push
slice
pop
concat
shift
unshift
splice

Cristiano Pires Martins / FATEC 6

fi
fi
Métodos do objeto Array
• Concat(arg1, arg2, ..., argn) let arr = [1, 2, "a", "b"];
let a = [Link]("m", 32);
//resulta em a = [1, 2, "a", "b", "m", 32];

• every(função(elem, ind, obj) [,thisObjeto])

let arr = [21, 3, 18, 290];
function funcaoUm(elem, ind){
return (typeof elem == "number");
}
//usando arrow function
let x = [Link](funcaoUm);
let arr = [21, 3, 18, 290];
[Link](x);
let x = [Link](elem => typeof elem == "number");
//true, se todos são números
[Link](x); //true, se todos são números

Cristiano Pires Martins / FATEC 7

Métodos do objeto Array
• some (função(elem, ind, obj) [,thisObjeto])
let arr = [21, 3, 18, "a", 290];
let numeros = [3, 7, 11, 5, 2];
function funcaoUm(elem, ind){
let maiorQueDez = [Link](function(numero) {
return (typeof elem == "string");
return numero > 10;
}
});
[Link]([Link](funcaoUm));
[Link](maiorQueDez); // true
//true, se existir, pelo menos, 1

let maiorQueDez = [Link](numero => numero > 10);

[Link](maiorQueDez); // Isto irá imprimir: true

let arr = [21, 3, 18, "a", 290];

[Link]([Link](elem => typeof elem == "string")); //Isto irá imprimir: true

Cristiano Pires Martins / FATEC 8

 Métodos do objeto Array
• lter (função(elem, ind, obj) [,thisObjeto]) let arr = [21, 3, 18, "a", 290, "b", 7];
let x = [Link]((elem, ind)=>ind < 4);
let pessoas = [
[Link](x); //retorna [21, 3, 18, "a"]
{ nome: "Ana", idade: 22 },
{ nome: "João", idade: 17 }, let funcionarios = [
{ nome: "Mariana", idade: 18 }, {nome: 'João' , salario: 3000},
{ nome: "Pedro", idade: 15 } {nome: 'Maria', salario: 3200},
]; {nome: 'Pedro', salario: 4000},
let adultos = [Link](function(pessoa) { {nome: 'Mário', salario: 2750}
return [Link] >= 18; ];

}); function ganhaBem(funcionario){

[Link](adultos); return [Link] > 3000;

/* [{ nome: "Ana", idade: 22 }, }

{ nome: "Mariana", idade: 18 }] let ricos =

[Link](ganhaBem);
Cristiano Pires Martins / FATEC 9
fi
Métodos do objeto Array
• forEach(função(elem, ind, obj) [,thisObjeto])
let numeros = [1, 2, 3, 4, 5];
let numeros = [1, 2, 3, 4, 5];
[Link]((numero, indice, array) =>
[Link](function(numero) { {
[Link](numero * 2); [Link](`Número: ${numero}, Índice:
}); ${indice}, Array: ${array}`);
// Saída esperada: });
// 2 // Saída esperada:
// 4 // Número: 1, Índice: 0, Array: 1,2,3,4,5
// 6 // Número: 2, Índice: 1, Array: 1,2,3,4,5
// 8 // Número: 3, Índice: 2, Array: 1,2,3,4,5
// 10 // Número: 4, Índice: 3, Array: 1,2,3,4,5
// Número: 5, Índice: 4, Array: 1,2,3,4,5

Cristiano Pires Martins / FATEC 10

 Métodos do objeto Array
• nd(função(ele, ind, obj) [,thisObjeto]) - retorna o primeiro elemento
let livros = [
{ titulo: "O Pequeno Príncipe", paginas: 96 },
{ titulo: "Dom Quixote", paginas: 1072 },
{ titulo: "O Hobbit", paginas: 295 }
];
let livroGrande = [Link](function(livro) {
return [Link] > 300;
});
[Link](livroGrande);
// Isto irá imprimir: { titulo: "Dom Quixote", paginas: 1072 }

let livroGrande = [Link](livro => [Link] > 300);

[Link](livroGrande);
// Isto irá imprimir: { titulo: "Dom Quixote", paginas: 1072 }

Cristiano Pires Martins / FATEC 11

fi
 • indexOf(elemento, [arg2, true ou false])
let arr = [1, 2, "a", "b", "2", "c", 1, "a", "45"];
let a = [Link]("b"); //retorna 3
let b = [Link]("a"); //retorna 2
let c = [Link](23); //retorna -1
let d = [Link](2); //retorna 1
let e = [Link](45); //retorna -1

let frutas = ["Banana", "Laranja", "Maçã", "Manga", "Maçã"];

let indiceMaca = [Link]("Maçã");

[Link](indiceMaçã); // Isto irá imprimir: 2

let indiceProximaMaca = [Link]("Maçã", 3); // Busca a partir do índice 3
[Link](indiceProximaMaca);// Isto irá imprimir: 4

Cristiano Pires Martins / FATEC 12

Métodos do objeto Array
• lastIndexOf(elemento, [arg2, true ou false])
let texto = "A rapidez da raposa marrom surpreendeu o tranquilo cachorro. Como pode uma raposa ser tão
rápida?";
let palavraProcurada = "raposa";

let palavras = [Link](' ');

let ultimoIndice = [Link](palavraProcurada);

// Checamos se a palavra aparece mais de uma vez

let primeiroIndice = [Link](palavraProcurada);
let ocorrenciasMultiples = primeiroIndice !== ultimoIndice && primeiroIndice !== -1;

[Link](`Última posição de '${palavraProcurada}': ${ultimoIndice}`);

[Link](`Ocorre mais de uma vez: ${ocorrenciasMultiples}`);

Cristiano Pires Martins / FATEC 13

Métodos do objeto Array
• [Link]( ): é um método mais moderno para veri car se um elemento
existe em um array, comparado ao indexOf() que retorna a posição do elemento
// Lista de convidados para uma festa
const listaDeConvidados = ["Alice", "Bob", "Charlie", "Dana"];

// Verificar se 'Charlie' está na lista

const charlieEstaConvidado = [Link]("Charlie");
[Link](`Charlie está convidado? ${charlieEstaConvidado}`);
// Saída: Charlie está convidado? true

// Verificar se 'Eve' está na lista

const eveEstaConvidada = [Link]("Eve");
[Link](`Eve está convidada? ${eveEstaConvidada}`); // Saída: Eve está
convidada? false

Cristiano Pires Martins / FATEC 14

fi
Métodos do objeto Array
• [Link]( ): é um método mais moderno para veri car se um elemento
existe em um array, comparado ao indexOf() que retorna a posição do elemento
const frutas = ["maçã", "banana", "manga"];

// Usando [Link]() para verificar se "banana" está presente no array

[Link]([Link]("banana")); // Saída: true
[Link]([Link]("uva")); // Saída: false

// Usando [Link]() para encontrar o índice de "banana"

[Link]([Link]("banana")); // Saída: 1
[Link]([Link]("uva")); // Saída: -1

const arrayComNaN = [NaN, 2, 3];

// Verificando a presença de NaN no array

[Link]([Link](NaN)); // Saída: true
[Link]([Link](NaN)); // Saída: -1

Cristiano Pires Martins / FATEC 15

fi
Métodos do objeto Array
• join([arg])

let nomes = ["Alice", "Bob", "Carlos", "Diana"];

// Usando join para criar uma string com os nomes separados por ponto e vírgula
let listaNomes = [Link]('; ');
[Link](listaNomes); // Isto irá imprimir: Alice; Bob; Carlos; Diana

let nomesParaFrase = ["Alice", "Bob", "Carlos", "Diana"];

// Removendo o último nome para tratamento especial
let ultimoNome = [Link]();
// Juntando os nomes restantes e adicionando o último com 'e'
let fraseNatural = [Link](', ') + ' e ' + ultimoNome;

[Link](fraseNatural); // Isto irá imprimir: Alice, Bob, Carlos e Diana

Cristiano Pires Martins / FATEC 16

Métodos do objeto Array
• map(função(elem, ind, obj) [,thisObjeto])
let temperaturasCelsius = [0, 10, 20, 30, 40];
function celsiusParaFahrenheit(celsius) { // Função converte Celsius para Fahrenheit
return (celsius * 9/5) + 32;
}
let temperaturasFahrenheit = [Link](celsiusParaFahrenheit);
[Link](temperaturasFahrenheit); // Isto irá imprimir: [32, 50, 68, 86, 104]

let descriçõesTemperaturas = [Link](temp => {

let fahrenheit = celsiusParaFahrenheit(temp);
return `${temp}°C é igual a ${fahrenheit}°F.`;
});
[Link](descriçõesTemperaturas);
// Isto irá imprimir: ['0°C é igual a 32°F.', '10°C é igual a 50°F.', … é igual a 104°F.']

Cristiano Pires Martins / FATEC 17

 Métodos do objeto Array

• push(arg1, arg2, ..., let pilhaDeLivros = [];

argn): acrescenta // Adicionando livros à pilha

[Link]("Dom Quixote");
os argumentos no
[Link]("1984");
nal de um array e
[Link]("O Pequeno Príncipe");
retorna a nova
quantidade de
[Link](pilhaDeLivros);
elementos no // Isto irá imprimir: ['Dom Quixote', '1984', 'O Pequeno Príncipe']
array;
// Removendo o último livro adicionado
• pop( ): remove o let livroRemovido = [Link]();
último elemento de [Link](livroRemovido);
um array e retorna // Isto irá imprimir: 'O Pequeno Príncipe'
o valor que foi [Link](pilhaDeLivros);
removido; // Isto irá imprimir: ['Dom Quixote', '1984']

Cristiano Pires Martins / FATEC 18

fi
Métodos do objeto Array
• reverse( ): inverte a ordem dos elementos de um array;
let numeros = [1, 2, 3, 4, 5];
[Link](); // Invertendo a ordem dos elementos no array
[Link](numeros); // Isto irá imprimir: [5, 4, 3, 2, 1]

let palavra = "radar";

// Convertendo a palavra em um array de caracteres, invertendo e juntando de
volta em uma string
let palavraInvertida = [Link]('').reverse().join('');

[Link](palavraInvertida); // Isto irá imprimir: 'radar'

if(palavra === palavraInvertida)
[Link]("é um palíndromo");

Cristiano Pires Martins / FATEC 19

Métodos do objeto Array
let filaAtendimento = ["João", "Maria", "Ana"];
• shift( ): remove o
primeiro elemento // Atendendo o primeiro paciente da fila
de um array e let pacienteAtendido = [Link]();
retorna o valor que
foi removido; [Link](pacienteAtendido);
// Isto irá imprimir: 'João'

• unshift( ): adiciona [Link](filaAtendimento);

elemento a // Isto irá imprimir: ['Maria', 'Ana']

primeira posição
do array; // Chega uma emergência é adicionado ao início da fila
[Link]("Julia");

[Link](filaAtendimento);
// Isto irá imprimir: ['Julia', 'Maria', 'Ana']

Cristiano Pires Martins / FATEC 20

Métodos do objeto Array
• reduce(função(v1, v2, ind, arr)[,vInicial]): reduz a um único resultado usando a operação da função. No caso do exemplo 2, acrescenta 100 ao
resultado

• reduceRight(função(v1, v2, ind, arr)[,vInicial]): funciona de modo semelhante ao reduce, com a diferença que a função percorre o array do
último elemento para o primeiro;

let numeros = [1, 2, 3, 4, 5]; let transacoes = [200, -50, 300, -100, 50];
// Use reduce para somar todos os Nºs
let soma = [Link]
// Usando reduceRight para calcular o saldo
(function(acumulador, valorAtual) {
final, começando pela transação mais
return acumulador + valorAtual;
recente
}, 0); //0 valor inicial do acumulador
let saldoFinal =[Link](
[Link](soma); (acumulador, valorAtual) =>
// Isto irá imprimir: 15 acumulador + valorAtual, 0
);
[Link](saldoFinal);
const numeros = [8,5,1,9,20,2];
const maior = [Link]((a, b) => (a>b?a:b)); // Isto irá imprimir: 400
[Link](maior); //20

Cristiano Pires Martins / FATEC 21

Métodos do objeto Array
• slice(arg1 [,arg2]): retorna um subarray do array. Admite um ou dois argumentos
que de nem o índice inicial e o nal do subarray a extrair:
• Diretrizes:
• Extrai o subarray desde o elemento de nido no arg1, mas não inclui o
arg2;
• Se não de nir o arg2, extrai desde o arg1 e vai até o nal;
• Argumentos negativos revertem o início de contagem do índice para o
último elemento.
let arr = [1, 2, 3, 4, "a", "b", "c"];
a = [Link](2, 5); //resulta em a = [3, 4, "a"]
a = [Link](3); //resulta em a = [4, "a", "b", "c"]
a = [Link](-5, 6); //resulta em a = [3, 4, "a", "b"]
a = [Link](-6, -4); //resulta em a = [2, 3]

Cristiano Pires Martins / FATEC 22

fi
fi
fi
fi
fi
Métodos do objeto Array
• splice(posição, quantidade): Alterar o conteúdo de um array;
let arr = [1, 2, 3, 4, "a", "b", "c"];
resultado = [Link](1,1)
[Link](resultado); //resulta em arr = [2]
[Link](arr); //resulta em arr = [2]
[Link]([Link](1,2)); //resulta em arr = [3,4]

• splice(posiçãoInicial, 0, [novoElemento] ): adiciona elemento ao Array

Se quisermos somente
const paises = ["Gana", "Quênia", "Ruanda"]; adicionar ao array,
[Link](1, 0, "Nigéria"); de nimos o segundo
argumento como zero
[Link](paises); //[ 'Gana', 'Nigéria', 'Quênia', 'Ruanda' ]
(0), instruindo o método
[Link](1,2, "África do Sul"); splice() a não excluir
[Link](paises); //[ 'Gana', 'África do Sul', 'Ruanda' ] nenhum elemento do
array.

Cristiano Pires Martins / FATEC 23

fi
Métodos do objeto Array
• split( ): Converter uma String delimitada para um Array;

let data = "25/04/2024";

let componentesData = [Link]('/'); // Dividindo a string de data em um array
[Link](componentesData); // Isto irá imprimir: ['25', '04', '2024']

let nomes = "Alice, Bob, Carlos, Diana";

let listaNomes = [Link](', '); // Dividindo a string de nomes
[Link](listaNomes); // Isto irá imprimir: ['Alice', 'Bob', 'Carlos', 'Diana']

let texto = "uma, duas, três, quatro";

let limitado = [Link](', ', 3); // Dividindo a string em até 3 partes
[Link](limitado); // Isto irá imprimir: ['uma', 'duas', 'três']

Cristiano Pires Martins / FATEC 24

Métodos do objeto Array
• sort([funcao]): destina a ordenar os elementos de um array. Havendo número,
serão transformados em strings para determinar a ordem, resultado em
ordenação não numérica;
let numeros = [10, 5, 100, 50, 1]; para ordenar decrescente,
[Link]((a, b) => a - b); basta fazer no corpo da
[Link](numeros); // [1, 5, 10, 50, 100] função: return b - a;

let frutas = ["banana", "maçã", "uva", "manga"];

[Link](); // Ordenando em ordem alfabética
[Link](frutas); // ['banana', 'maçã', 'manga', 'uva']

let itens = ["banana", "Maçã", "Uva", "manga"];

// Ordenando em ordem alfabética ignorando maiúsculas e minúsculas
[Link]((a, b) => [Link]().localeCompare([Link]()));
[Link](itens); ['banana', 'Maçã', 'manga', 'Uva']

Cristiano Pires Martins / FATEC 25

Métodos do objeto Array
• sort([funcao]): outro exemplo
let funcionarios = [
{ nome: 'João', salario: 3000 },
{ nome: 'Maria', salario: 3200 },
{ nome: 'Juliana', salario: 2800 },
{ nome: 'Pedro', salario: 4000 },
{ nome: 'Mário', salario: 2750 }];

[Link](function (a, b) {
if ([Link] > [Link]) return 1;
else if ([Link] < [Link]) return -1;
else return 0; // iguais
});

Cristiano Pires Martins / FATEC 26

Métodos do objeto Array

• [Link]( ) - (ECMAScript 2022): retorna o item do índice, permitindo inteiros

positivos e negativos. Muito útil para pegar o último item -> Índices Negativos
const arr = [3, 7, 2, 5, 4];
// From start
Também utilizado em strings
[Link](0); // 3
let saudacao = "Olá, mundo!";
[Link](1); // 7
// From end
// Acessando o quinto caractere
[Link](-1); // 4
[Link]([Link](4)); // ","
[Link](-3); // 2

// Modo tradicional de acessar o último // Acessando o último caractere

elemento [Link]([Link](-1)); // "!"
arr[[Link] - 1];

Cristiano Pires Martins / FATEC 27

Métodos do objeto Array
• O método [Link]( ) cria uma nova instância de Array a partir de um objeto
iterável ou semelhante a um array. Isso é útil para converter estruturas de
dados que não são arrays, como NodeList ou arguments, em um array
verdadeiro. // Criando um Array a partir de uma string
const stringToArray = [Link]('Hello');
[Link](stringToArray); // Output: ['H', 'e', 'l', 'l', 'o']

// Criando um Array a partir de um Set

const set = new Set([1, 2, 3]);
const arrayFromSet = [Link](set);
[Link](arrayFromSet); // Output: [1, 2, 3]

// Usando uma função map na criação para ajustar os valores

const range = [Link]({ length: 5 }, (_, index) => index * 2);
[Link](range); // Output: [0, 2, 4, 6, 8]

Cristiano Pires Martins / FATEC 28

Métodos do objeto Array
• O método [Link]( ) cria um novo Array com todos os argumentos passados
para ele, independentemente do número ou tipo dos argumentos. Este
método é útil para criar arrays de forma clara e previsível.
// Criando arrays com diferentes tipos de dados
const numbers = [Link](1, 2, 3);
[Link](numbers); // Output: [1, 2, 3]

const strings = [Link]('Hello', 'World');

[Link](strings); // Output: ['Hello', 'World']

const mixedArray = [Link](1, 'Apple', { name: 'John' });

[Link](mixedArray); // Output: [1, 'Apple', { name: 'John' }]

Cristiano Pires Martins / FATEC 29

Métodos do objeto Array
• O método Array. ll() altera todos os elementos de um array para um valor
estático, desde o índice de início até o índice de m (não incluído). Este
método é ótimo para inicializar ou rede nir valores em um array.
// Criando um array e preenchendo com um valor padrão
const filledArray = new Array(5).fill('A');
[Link](filledArray); // Output: ['A', 'A', 'A', 'A', 'A']

// Preenchendo partes de um array existente

const numbers = [1, 2, 3, 4, 5];
[Link]('replaced', 1, 3);
[Link](numbers); // Output: [1, 'replaced', 'replaced', 4, 5]

// Preenchendo um array com objetos

const arrayOfObjects = new Array(3).fill({name: 'Unknown'});
[Link](arrayOfObjects); // Output: [{ name: 'Unknown' }, { name: 'Unknown' }, { name: 'Unknown' }]
arrayOfObjects[0].name = 'Alice'; // Mudando um objeto mudará todos devido à referência
[Link](arrayOfObjects); // Output: [{ name: 'Alice' }, { name: 'Alice' }, { name: 'Alice' }]

Cristiano Pires Martins / FATEC 30

fi
fi
fi
Exemplos de exercícios - Pesquisa e Modi cação
• Crie um array de objetos com informações de estudantes, incluindo nome,
idade e nota. Use os métodos lter( ) para encontrar um aluno com idade
maior que 20 e map( ) para adicionar "Aprovado" ao nal do nome desse
aluno.
const estudantes = [
{ nome: "João", idade: 50, nota: 5.9 },
{ nome: "Pietra", idade: 21, nota: 10.0 },
{ nome: "Diego", idade: 18, nota: 9.0 }
];
let alunosMaisVelhosAprovados = estudantes
.filter(aluno => [Link] > 20 && [Link] > 6)
.map(aluno => [Link] + " - Aprovado");
[Link](alunosMaisVelhosAprovados);

Cristiano Pires Martins / FATEC 31

fi
fi
fi
Exemplos de exercícios
• Exercício de Filtragem e Redução:

• Apresente o maior número menor que 10 do array.

const numeros = [5, 12, 8, 14, 6];

const maiorNumeroMenorQueDez = numeros
.filter(numero => numero < 10)
.reduce((a,b) => a>b?a:b);
[Link](maiorNumeroMenorQueDez); //8

Cristiano Pires Martins / FATEC 32

Exemplos de exercícios
• Exercício de Ordenação e Transformação:
• Crie um array de objetos com informações de produtos, incluindo nome e preço.
• Use sort( ) para ordenar os produtos por preço em ordem decrescente e map( )
para criar um novo array apenas com os nomes dos produtos.
const produtos = [
{ nome: "ProdutoA", preco: 30 },
{ nome: "ProdutoB", preco: 20 },
{ nome: "ProdutoC", preco: 40 }
];
[Link]((a, b) => [Link] - [Link]);
const nomesProdutos = [Link](produto => [Link]);
[Link](produtos);
[Link](nomesProdutos);

Cristiano Pires Martins / FATEC 33

Exemplos de exercícios - Pesquisa e Filtragem
• Crie um array de objetos com informações de funcionários, incluindo nome, salário e cargo.
• Encontre os funcionários com o cargo "Gerente" e depois mostre os nome dos funcionários gerentes com salário
superior a 5000.
const funcionarios = [
{ nome: "Alice", salario: 5500, cargo: "Gerente" },
{ nome: "Bob", salario: 4500, cargo: "Analista" },
{ nome: "Carol", salario: 6000, cargo: "Gerente" }
];
const nomesGerentesGanhamBem = funcionarios
.filter(funcionario => [Link] === "Gerente"
&& [Link] > 5000)
.map(funcionarios => [Link]));
[Link](nomesGerentesGanhamBem);

Cristiano Pires Martins / FATEC 34

Exemplos de exercícios
• Combinando Arrays de Objetos de Diferentes APIs
let usuarios = [
{ id: 1, nome: "Alice" },
{ id: 2, nome: "Bob" }
];
let enderecos = [
{ userId: 1, endereco: "Rua 123, Cidade A" },
{ userId: 2, endereco: "Rua 456, Cidade B" }
];
// Combinar informações de usuários com endereços
let usuariosComEnderecos = [Link](
usuario => ({...usuario, endereco: [Link](
endereco => [Link] === [Link]).endereco
}));
[Link](usuariosComEnderecos);
// Isto irá imprimir: [
// { id: 1, nome: "Alice", endereco: "Rua 123, Cidade A" },
// { id: 2, nome: "Bob", endereco: "Rua 456, Cidade B" }]

Cristiano Pires Martins / FATEC 35

Propriedades Melhoradas de Objetos
• A ES6 introduziu a Desestruturação de array
let frutas = ["maçã", "banana", "laranja"];
let [x,y] = ['a','b'];
// Desestruturando o array
x
let [fruta1, fruta2, fruta3] = frutas;
//Equivale a:
[Link](fruta1); // maçã
[Link](x); //'a' [Link](fruta2); // banana
[Link](y); //'b' [Link](fruta3); // laranja

function obterCoordenadas() {
//Outro exemplo:
return [45.123, -93.456];
[x,y] = [y,x]; //troca os valores
}
[Link](x); //'b'
// Desestruturando o array retornado pela função
[Link](y); //'a'
let [latitude, longitude] = obterCoordenadas();
[Link](latitude); // 45.123
[Link](longitude); // -93.456
Cristiano Pires Martins / FATEC 36
Exemplo de Matriz
// Cria uma matriz 2x3 // Criando uma matriz 3x3
let matriz = new Array(2); let matriz = [
[1, 2, 3],
for (let i = 0; i < [Link]; i++) { [4, 5, 6],
matriz[i] = new Array(3); [7, 8, 9]
} ];
[Link](matriz); // Isto irá imprimir:
// Define os valores da matriz [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
matriz[0][0] = 1;
matriz[0][1] = 2; // Adicionando uma nova linha
matriz[0][2] = 3; [Link]([10, 11, 12]);
matriz[1][0] = 4; [Link](matriz);
matriz[1][1] = 5; // [[1, 2, 3],
matriz[1][2] = 6; // [4, 5, 6],
// Acesse um elemento da matriz // [7, 8, 9],
[Link](matriz[0][1]); // Saída: 2 // [10, 11, 12]]

Cristiano Pires Martins / FATEC 37

Operador spread (espalhamento)
• Operador spread (`...`) é uma adição útil ao JavaScript (ES6), que permite
expandir elementos de um iterável (como um array) em lugares onde múltiplos
elementos podem ser passados (como chamadas de função) ou incorporados
(como em outros arrays). Ele também é usado para expandir objetos, facilitando a
cópia e combinação de propriedades de objetos em um novo objeto.
//Combinando Arrays
let primeiros = [1, 2, 3];
let segundos = [4, 5, 6];

// Combinando dois arrays em um novo array

let combinados = [...primeiros, ...segundos];

[Link](combinados);
// Isto irá imprimir: [1, 2, 3, 4, 5, 6]

Cristiano Pires Martins / FATEC 38

Espalhamento em arrays literais

let parts = ['shoulders', 'knees'];

let lyrics = ['head', ...parts, 'and', 'toes'];
//["head", "shoulders", "knees", "and", "toes"]

Cristiano Pires Martins / FATEC 39

Copiando um array

let arr = [1, 2, 3];

let arr2 = [...arr]; // da mesma forma usando [Link]()
[Link](4);
// arr2 se torna [1, 2, 3, 4]
// arr permanece sem alteração

Cristiano Pires Martins / FATEC 40

concatenar arrays

let arr_1 = [0, 1, 2];

let arr_2 = [3, 4, 5];
// adiciona todos os item de arr2 no arr1
arr_1 = [...arr_1,...arr_2];
// arr_1 = arr_1.concat(arr_2);
[Link](arr_1); //[ 0, 1, 2, 3, 4, 5 ]

Cristiano Pires Martins / FATEC 41

Espalhamento em objetos literais

let obj1 = { foo: 'bar', x: 42 };

let obj2 = { foo: 'baz', y: 15 };

let clonedObj = { ...obj1 };

// Object { foo: "bar", x: 42 }

let mergedObj = { ... obj1, ...obj2 };

// Object { foo: "baz", x: 42, y: 15 }

Cristiano Pires Martins / FATEC 42

6 formas de usar o operador spread com Array
// Merge Array
arr = [...array1, ...array2];
// Clone Array
arr = [...array]:
// String - Array
arr = [... 'string'];
// Set - Array
arr = [...new Set ([1,2,3,1])];
// Node List - Array
arr = [...nodeList];
// Arguments - Array
arr = [... arguments];

Cristiano Pires Martins / FATEC 43

Objeto Set( )
• O objeto Set permite que você armazene valores únicos de qualquer tipo,
desde valores primitivos a referências a objetos.

• Sintaxe new Set([iterable]);

• Parâmetros: Se um objeto iterável é passado, todos os seus elementos serão

adicionados ao novo Set. Se tal parâmetro não for especí cado, ou se seu valor
for null, o novo Set estará vazio.

• Descrição: Objetos Set são coleções de valores nas quais é possível iterar os
elementos em ordem de inserção. Um valor no Set pode ocorrer apenas uma vez;
ele é único na coleção do Set.

Cristiano Pires Martins / FATEC 44

fi
Exemplos
let meuSet = new Set();
[Link](1); // meuSet [1]
[Link](5); // meuSet [1, 5]
[Link](5); // 5 já foi adicionando, portanto, meuSet [1, 5]
[Link]("texto");
let o = {a: 1, b: 2};
[Link](o);
[Link]({a: 1, b: 2}); // o está referenciando outro objeto
[Link](meuSet); //Set {1,5,'texto',{a:1,b:2},{a:1,b:2}}
[Link](1); // true
[Link](3); // false, 3 não foi adicionado ao set (Conjunto)
[Link]([Link](25)); // true
[Link]("Texto".toLowerCase()); // true
[Link](o); // true
[Link]; // 5
[Link](5); // remove 5 do set
[Link](5); // false, 5 já foi removido
[Link]; // 4, nós simplesmente removemos um valor
[Link] (meuSet); // Set { 1,'texto',{a:1,b:2}, {a:1,b:2}}

Cristiano Pires Martins / FATEC 45

Relação com objetos Array
var myArray = ["value1", "value2", "value3"];

// Use o construtor regular de Set para transformar um array em um Set

var mySet = new Set (myArray);

[Link]([Link]("value1")); // retorna true

// Use o operador de propagação para transformar um Set em um Array.

[Link] (([...mySet])); //[ 'valuel', 'value2', 'value3' ]

// Irá mostrar-lhe exatamente o mesmo Array como myArray

Cristiano Pires Martins / FATEC 46

Removendo elementos duplicados de um Array

// Use para remover elementos duplicados de um Array

const numeros = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

[Link]([...new Set (numeros)])

// [2, 3, 4, 5, 6, 7, 32]

Cristiano Pires Martins / FATEC 47

 Exercícios
Gerenciamento de Lista de Tarefas Pendentes
Nesta atribuição, você criará um sistema de gerenciamento de lista de tarefas usando array para armazenar e atualizar tarefas. Você poderá adicionar novas tarefas, remover tarefas concluídas e marcar tarefas como concluídas.
Instruções

1. Criando o array da lista de tarefas pendentes: comece criando uma matriz vazia para armazenar as tarefas da lista de tarefas.
2. Adicionando tarefas: Permite que os usuários insiram novas tarefas e as adicionem à array. Certi que-se de que a nova tarefa é adicionada ao nal do array.
3. Removendo tarefas: Implemente um recurso que permite aos usuários remover tarefas do array. Quando uma tarefa for removida, certi que-se de que a matriz seja atualizada adequadamente.
4. Marcando tarefas como concluídas: Permite que os usuários marquem tarefas como concluídas. Isso pode ser obtido atualizando o status da tarefa no array.

Galeria de Imagens
Para essa atribuição, você con gurará uma galeria de imagens que permite aos usuários navegar por uma coleção de imagens usando o índice de um array para alterar a imagem exibida.
Instruções

1. Criando o array de imagens: Comece criando uma matriz que contenha os caminhos ou referências às imagens que você deseja exibir na galeria.
2. Exibindo a primeira imagem: Use o primeiro elemento do array para exibir a imagem inicial na galeria.
3. Navegando para frente e para trás: Implemente a funcionalidade para navegar para frente e para trás através do array de imagens. Ao navegar, atualize a imagem exibida com base no índice atual no array.

Carrinho de Compras
Nesta tarefa, você desenvolverá um sistema de carrinho de compras que permite aos usuários adicionar ou remover produtos e calcular o preço total dos itens no carrinho.
Instruções

1. Criando o Array do Carrinho: Crie uma matriz para armazenar os produtos adicionados ao carrinho de compras. Cada elemento do array deve representar um produto.
2. Adicionando produtos: implemente um recurso que permita aos usuários adicionar produtos ao carrinho. Quando um produto for adicionado, veri que se ele está incluído no array.
3. Remoção de produtos: Permite que os usuários removam produtos de seu carrinho. Quando um produto for removido, atualize o array de acordo.
4. Calculando o Preço Total: Desenvolva uma função para calcular o preço total de todos os itens no carrinho. Itere pelo array e some os preços dos produtos.

Cristiano Pires Martins / FATEC 48

fi
fi
fi
fi
fi
Exercícios
Jogo de Curiosidades
Para esta tarefa, você desenvolverá um pequeno jogo de curiosidades, armazenando as perguntas, opções e respostas em arrays.
Instruções

1. Criando os arrays: Crie matrizes para armazenar as perguntas triviais, as opções para cada pergunta e as respostas corretas.
2. Exibindo perguntas: Exiba as perguntas triviais para o usuário a partir do array de perguntas.
3. Fornecendo opções: Use o array de opções para apresentar várias opções para cada pergunta ao usuário.
4. Veri cando respostas: Quando o usuário seleciona uma opção, compare-a com a resposta correta armazenada no array para determinar se ela está correta.

Grá co de barras dinâmico

Nesta atribuição, você criará um grá co de barras simples onde cada barra representa um valor armazenado em uma matriz. A altura das barras será alterada à
medida que os dados forem atualizados.
Instruções

1. Criando o array de dados: Comece criando uma matriz para armazenar os valores que serão representados pelas barras no grá co.
2. Exibindo as barras: Use os valores no array para gerar barras dinamicamente no grá co. A altura de cada barra deve corresponder ao valor que ela representa.
3. Atualizando os dados: Implemente um recurso que permita aos usuários atualizar os valores no array. Quando os valores forem atualizados, veri que se as
barras correspondentes no grá co re etem as alterações.

Cristiano Pires Martins / FATEC 49

fi
fi
fi
fi
fl
fi
fi
fi
Método
createElement()
Cristiano Pires Martins
O método createElement é uma função
fornecida pela API do Document Object
Model (DOM) do JavaScript que permite a
criação de elementos HTML diretamente a
partir do código JavaScript.
Esse método é usado principalmente para
criar elementos que podem ser
manipulados e inseridos dinamicamente
na estrutura de um documento HTML.
Como funciona
Onde tagName é o nome do elemento HTML que você deseja criar, como div, p, span, etc.
Exemplo de uso
Criando uma div e adicionando um texto
Exemplo de uso
Criando uma Lista de Itens (ul e li)
Exemplo de uso
Criando um Botão com Evento
Exemplo
de uso
Criando um Formulário
Dinâmico
 – O método createElement apenas cria o elemento na memória.
Para que ele apareça no documento, é necessário adicioná-lo
explicitamente a um nó pai existente, como mostrado nos
exemplos.
– Você pode definir atributos, classes, estilos e eventos nos
Considerações elementos criados, tornando-os altamente personalizáveis e
interativos.
– É possível criar elementos aninhados e estruturas completas de
forma dinâmica, permitindo criar componentes e interfaces
complexas a partir do código.
 Navegando pela Árvore DOM
hasChildNodes()

• O que faz: Retorna true se o nó tem filhos (inclusive nós de texto, comentários
etc.).
• Quando usar: Para verificar se um elemento pode ser expandido (útil para criar
menus ou árvores dinâmicas).
• Exemplo:

javascript
CopiarEditar
let div = [Link]("div");
if ([Link]()) {
[Link]("Este div tem filhos.");
}

firstChild / lastChild

• O que fazem: Retornam o primeiro/último filho do nó, que pode ser um texto,
comentário ou elemento.
• Quando usar: Quando precisa acessar qualquer tipo de filho (incluindo espaços
em branco como texto).
• Exemplo:

javascript
CopiarEditar
let ul = [Link]("ul");
[Link]("Primeiro filho:", [Link]);
[Link]("Último filho:", [Link]);

Pode retornar #text (texto em branco), então nem sempre é confiável para elementos.

firstElementChild / lastElementChild

• O que fazem: Retornam o primeiro/último filho que é um elemento, ignorando

nós de texto e comentários.
• Quando usar: Quando você quer apenas elementos HTML, como <li>, <div>,
etc.
• Exemplo:

javascript
CopiarEditar
let ul = [Link]("ul");
[Link]("Primeiro elemento filho:", [Link]);
[Link]("Último elemento filho:", [Link]);

nextSibling / previousSibling
 • O que fazem: Retornam o irmão direto do nó (pode ser texto, comentário ou
elemento).
• Quando usar: Para percorrer todos os tipos de nós entre elementos (como
espaços em branco entre <div>s).
• Exemplo:

javascript
CopiarEditar
let li = [Link]("li");
[Link]("Próximo irmão (pode ser texto):", [Link]);
[Link]("Irmão anterior:", [Link]);

nextElementSibling / previousElementSibling

• O que fazem: Retornam o próximo/anterior elemento irmão.

• Quando usar: Para navegar entre elementos no mesmo nível do DOM.
• Exemplo:

javascript
CopiarEditar
let li = [Link]("li");
[Link]("Próximo elemento irmão:", [Link]);
[Link]("Elemento anterior:", [Link]);

nodeName

• O que faz: Retorna o nome da TAG (ex: DIV, P, UL).

• Quando usar: Para verificar o tipo de elemento com quem está lidando.
• Exemplo:

javascript
CopiarEditar
let elemento = [Link]("p");
[Link]("Nome da tag:", [Link]); // Ex: "P"

nodeValue

• O que faz: Retorna o valor do nó texto (útil para acessar conteúdos brutos).
• Quando usar: Para pegar ou mudar o texto interno sem HTML.
• Exemplo:

javascript
CopiarEditar
let texto = [Link]("p").firstChild;
[Link]("Conteúdo do texto:", [Link]);

nodeType

• O que faz: Retorna o tipo do nó (elemento, texto, comentário etc).

 • Quando usar: Para diferenciar entre elementos, textos, comentários.
• Principais valores:
o 1 → Elemento
o 3 → Texto
o 8 → Comentário
• Exemplo:

javascript
CopiarEditar
let no = [Link]("p").firstChild;
[Link]("Tipo do nó:", [Link]); // Ex: 3 se for texto

parentNode

• O que faz: Retorna o elemento pai do nó atual.

• Quando usar: Para subir na hierarquia do DOM.
• Exemplo:

javascript
CopiarEditar
let span = [Link]("span");
[Link]("Elemento pai:", [Link]);

Exemplo Prático: Exploração de Lista

HTML de exemplo:

html
CopiarEditar
<ul id="frutas">
<li>Maçã</li>
<li>Banana</li>
<li>Laranja</li>
</ul>

JavaScript para percorrer:

javascript
CopiarEditar
let lista = [Link]("frutas");
let item = [Link];

while (item) {
[Link]([Link]);
item = [Link];
}
 Resumo Visual
Propriedade Retorna Tipo Foco
hasChildNodes() true ou false Método Verifica
filhos
firstChild / lastChild Qualquer tipo de nó Propriedade Primeiro/últi
mo filho
firstElementChild / lastElementChild Elemento HTML Propriedade Ignora nós de
texto
nextSibling / previousSibling Qualquer tipo de nó Propriedade Avança/retroc
ede nós
nextElementSibling / previousElementSib Elemento Propriedade Avança entre
ling elementos
nodeName Nome da tag Propriedade Identificar
(ex: DIV) tipo de tag
nodeValue Texto do nó Propriedade Conteúdo
bruto de texto
nodeType Número do tipo (1, Propriedade Tipo de nó
3, 8...)
parentNode Nó pai Propriedade Subir na
árvore
Formulários
Cristiano Pires Martins

1
 Forms
Peças de composição de uma página presentes em praticamente
todos os web sites;
Interface de coleta de dados, mesmo apenas para busca;
São interativos;
O desenvolvedor não deve supor que o usuário digitará apenas o
que se espera.

Cristiano Pires Martins 2

 Forms
Primeiro fundamento do uso de JavaScript com formulários: validar
campos;
Mas ações não devem apenas no cliente, tem que ser
desenvolvida no lado do servidor;
O elemento <form></form> é o container de todos os controles
(campos) de um formulário.

Cristiano Pires Martins 3

 Controles de Formulário
input src
type alt
text size
password
checkbox
maxlength
radio value (checkbox e radio)
submit
reset
checked (checkbox e radio)
file readonly
hidden disabled
image
button usemap
align
accesskey
tabindex
name

Cristiano Pires Martins 4

 Objeto formulário
HTML
<form method="" action="" id="fdemo">
...
</form>
JavaScript
<script type="text/javascript">
[Link] = function( ){
let formdemo = [Link][0];
}</script>
ou
<script type="text/javascript">
[Link] = function( ){
let formdemo = [Link]["fdemo"];
}</script>

Cristiano Pires Martins 5

 Propriedades do objeto form - action

HTML
<form method="post" action="http://
[Link]" id="formulario">
...
</form>
JavaScript
<script>
[Link] = function( ){
let form = [Link]("formulario");
[Link]([Link]);
[Link]([Link]);
}
</script>

Cristiano Pires Martins 6

 Propriedades do objeto form - length

HTML
<form method="post" action=" " id="fdemo">
<label for="nome">Nome:</label>
<input type="text" id="nome"/>
<label for="email">Email:</label> Retorna a
<input type="text" id="email"/> quantidade de
<input type="submit" value="OK"/> controles
</form> existentes no
JavaScript formulário
<script type="text/javascript">
[Link] = function( ){
let fdemo = [Link]("fdemo");
[Link]([Link]);
}
</script>

Cristiano Pires Martins 7

 Propriedades do objeto form
elements

HTML
<form method="post" action=" " id="fdemo">
<label for="nome">Nome:</label>
<input type="text" id="nome"/> Retorna uma
<label for="email">Email:</label> coleção de todos
<input type="text" id="email"/>
<input type="submit" value="OK"/> os controles
</form> existentes no
JavaScript formulário
<script type="text/javascript">
[Link] = function( ){
let fdemo = [Link]("fdemo");
[Link]([Link][1].tagName); //[Link] INPUT
[Link]([Link](2).value); //[Link] OK
[Link]([Link](0).value);
[Link]([Link](1).value);
}
</script>

Cristiano Pires Martins 8

 Validação: Senha
<body>
VALIDAR SENHA
<br>
<form action="" name="f1">
Senha: <input type="password" name="senha1"><br>
Confirmar Senha: <input type="password" name="senha2"><br>
<input type="button" value="Validar" onClick="validarSenha()">
</form>
<script>
function validarSenha(){
let senha1 = [Link]
let senha2 = [Link]
if (senha1 === senha2)
[Link]("SENHAS IGUAIS")
else
[Link]("SENHAS DIFERENTES")
}
</script>

</body>
</html>

Cristiano Pires Martins 9

 Exemplo - radio
<form action="[Link]" method="post">
<p>
<input type="radio" name="band-rock" value="beatles" />The Beatles
<input type="radio" name="band-rock" value="led-zeppelin" /> Led Zeppelin
<input type="radio" name="band-rock" value="pink-floyd" />Pink Floy
</p>
<p>
<input type="button" id="btnSubmit" value="Submit me!" />
<input type="button" id="btnLoad" value="Load!" />
</p>
</form>
[Link]("btnSubmit").onclick = function () {
let radios = [Link]("band-rock");
for (let i = 0; i < [Link]; i++)
if (radios[i].checked)
[Link]("Escolheu: " + radios[i].value);
};
[Link]("btnLoad").onclick = function () {
let radios = [Link]("band-rock");
for (let i = 0; i < [Link]; i++)
if (radios[i].value === "led-zeppelin")
radios[i].checked = true;
};

Cristiano Pires Martins 10

 Exemplo checkbox
<form name="form1">
Item 1<input type="checkbox" name="test" value="1"><br>
Item 2<input type="checkbox" name="test" value="2"><br>
Item 3<input type="checkbox" name="test" value="3"><br>
Item 4<input type="checkbox" name="test" value="4"><br>
Item 5<input type="checkbox" name="test" value="5"><br>
<input type="button" name="validate" value=“OK"
onclick="validaCheckbox('test')">
</form>

function validaCheckbox(name) {
let frm = document.form1;
for (i = 0; i < [Link]; i++) {
if ([Link][i].type=="checkbox" && [Link][i].name==name){
if ([Link][i].checked) {
[Link]("O checkbox " + i + " foi selecionado!");
return true;
}
}
}
[Link]("Nenhum checkbox foi selecionado!");
return false;
}

Cristiano Pires Martins 11

 Validação de Formulários
Por que validar?
Evitar dados inválidos ou maliciosos
Garantir a integridade das informações
Melhorar a experiência do usuário
Complementar a validação do lado servidor

Cristiano Pires Martins 12

 [Link]

Cristiano Pires Martins 13

 Expressões Regulares

[Link]

[Link]
expressoes-regulares/

Cristiano Pires Martins 14

 Conceito
O que são expressões regulares (Regex)?
Uma maneira de definir padrões para buscas ou validações em
strings
Sintaxe compacta e poderosa
Muito usada em validações de entrada de dados
Exemplo simples:
/^[0-9]+$/ → apenas números

Cristiano Pires Martins 15

 Sintaxe Básica
• Uma expressão regular é criada utilizando:
Construtor RegExp: new RegExp("padrão", "flags")

Literais de Expressão Regular: /padrão/flags

• Flags Comuns
g: Pesquisa global, ou seja, não para na primeira correspondência.

i: Ignora diferenciação entre maiúsculas e minúsculas.

m: Pesquisa em várias linhas.

Cristiano Pires Martins 16

 Sintaxe Básica
Tabela 1

Símbolo Signi cado

^ Início da string

$ Fim da string

. Qualquer caractere (exceto \n)

[] Conjunto de caracteres

+ Um ou mais

* Zero ou mais

{n,m} Entre n e m repetições

\ Escape para caracteres especiais

Cristiano Pires Martins 17

fi
 Exemplo

<form id="formulario">
<input type="text" id="email" placeholder="Digite seu e-mail">
<button type="submit">Enviar</button>
</form>
<script>
const form = [Link]('formulario');
const email = [Link]('email');

[Link]('submit', function (event) {

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if () {
alert('E-mail inválido!');
[Link]();
}
});
</script>

Cristiano Pires Martins 18

 Verificar a presença de um padrão

let texto = "Aprender JavaScript é divertido!";

let padrao = /javascript/i;
[Link]([Link](texto)); // true

Aqui, test verifica se o padrão existe na string,

retornando true ou false.

Cristiano Pires Martins 19

 Buscar todas as ocorrências de um padrão

let texto = "O sol se põe e o sol nasce.";

let padrao = /sol/g;
[Link]([Link](padrao)); //["sol","sol"]

O método match retorna um array com todas as ocorrências do padrão.

Cristiano Pires Martins 20

 Substituir um padrão por outro

let texto = "O gato é bonito.";

let padrao = /gato/;
[Link]([Link](padrao, "cachorro"));
// "O cachorro é bonito."

O método replace substitui a primeira ocorrência

do padrão pelo novo texto.

Cristiano Pires Martins 21

 Dividir uma string com base em um padrão

let texto = "um, dois, três, quatro";

let padrao = /,\s*/;
[Link]([Link](padrao));
// ["um", "dois", "três", "quatro"]

O método split divide a string em um array com base no padrão.

Cristiano Pires Martins 22

 Validar um endereço de e-mail

let email = "teste@[Link]";

let padrao = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
[Link]([Link](email)); // true

Cristiano Pires Martins 23

 Verificar se uma string contém apenas números

let texto = "12345";

let padrao = /^\d+$/;
[Link]([Link](texto)); // true

Cristiano Pires Martins 24

 Extrair números de uma string

let texto = "O preço é 100 dólares.";

let padrao = /\d+/g;
[Link]([Link](padrao)); // ["100"]

Cristiano Pires Martins 25

 Verificar um Número de Telefone
function verificarTelefone(numero) {
const telefoneRegex = /^\(\d{2}\) \d{4,5}-\d{4}$/;
return [Link](numero);
}
// Exemplos de uso:
const numeros = [
"(11) 12345-6789", // Válido
"(11) 1234-6789", // Válido
"11 12345-6789", // Inválido
"(11)12345-6789", // Inválido
"(11) 123456-789" // Inválido
];
[Link](numero => {
[Link](${numero} é válido? ${verificarTelefone(numero)});
});

Cristiano Pires Martins 26

 Validação: Verifica número Inteiro
• Em JavaScript, uma expressão regular é
delimitada por uma barra / inicial e outra nal.
• Cada expressão de validação sempre começa
com ^ (início de linha) e termina com $ ( m de
<script>
linha), para garantir que abrange o conteúdo
let expressao = /^\d+$/; inteiro do texto (parâmetro) a ser validado.
function verificarInteiro(val) {
if ([Link](val)) { • Existe uma sequência de expressão regular que
[Link]("OK"); signi ca um dígito (0 a 9): \d.
} • Adicionando um + após essa sequência,
else if (val != null && val != "") { signi ca "uma ou mais ocorrências da sequência
[Link]("Não é um inteiro válido"); precedente". Isto é, um ou mais dígitos. Note que
} isso implica o preenchimento obrigatório.
}
• Assim, temos a expressão regular completa para
</script> validar um número apenas composto por dígitos.

<form id="frmInteiro" action="#"

onsubmit="verificarInteiro([Link]); return false;">
<label for="txtInteiro">Valor:</label>
<input type="text" size="10" id="txtInteiro" name="txtInteiro">
<input type="submit" value="Validar">
</form>

Cristiano Pires Martins 27

fi
fi
fi
fi
 Validando CPF (superficial)

let texto = "000.000.000-00";

let regExp = /^[\d]{3}\.[\d]{3}\.[\d]{3}\-[\d]{2}$/;

if ([Link](texto))
[Link]("Formato válido!");
else
[Link]("Formato inválido!");

Cristiano Pires Martins 28

 Validando CPF

• Verificando se o texto recebido é iniciado por três números

(^[\d]{3});
• seguidos de ponto (\.);
• seguido de três números ([\d]{3});
• seguidos de ponto (\.);
• seguido de três números ([\d]{3});
• seguidos de hífen (\-);
• seguido (e finalizado) por dois números ([\d]{2}$);

Cristiano Pires Martins 29

 Máscara para CPF

//CPF recuperada de um campo text, por exemplo:

let texto = "00000000000";
let regExp = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
if ([Link](regExp) != -1) {
let mascCPF = [Link](regExp, "$1.$2.$3-$4");
[Link](mascCPF);
} else {
[Link]("Nenhum texto ou expressão!");
}

Cristiano Pires Martins 30

 Função de Validação de CPF - agora sim…

function testaCPF(strCPF) {
let Soma;
let Resto;
Soma = 0;
if (strCPF == "00000000000")
return false;
for (i = 1; i <= 9; i++)
Soma = Soma + parseInt([Link](i - 1, i)) * (11 - i);
Resto = (Soma * 10) % 11;
if ((Resto == 10) || (Resto == 11)) Resto = 0;
if (Resto != parseInt([Link](9, 10))) return false;
Soma = 0;
for (i = 1; i <= 10; i++)
Soma = Soma + parseInt([Link](i - 1, i)) * (12 - i);
Resto = (Soma * 10) % 11;
if ((Resto == 10) || (Resto == 11)) Resto = 0;
if (Resto != parseInt([Link](10, 11))) return false;
return true;
}
let strCPF = "12345678909";
[Link](testaCPF(strCPF));

Cristiano Pires Martins 31

 Validação: Verifica CEP

<form name="frm">
CEP:<input type="text" size="12" id="cep" name="cep"
onblur="IsCEP([Link]);">
</form>
<script>
function Trim(strTexto) {
return [Link](/^\s+|\s+$/g, '');
}
function IsCEP(strCEP) {
let objER = /^[0-9]{2}\.[0-9]{3}-[0-9]{3}$/;
strCEP = Trim(strCEP)
if ([Link] > 0) {
if ([Link](strCEP))
[Link]("CEP válido!");
else
[Link]("CEP inválido!");
}
else
[Link]("Caixa de Texto Vazia");
}
</script>

Cristiano Pires Martins 32

 Material de apoio RegEx
Vídeo: Como usar expressões regulares para melhorar sua
produtividade || Erick Wendel
[Link]

Cristiano Pires Martins 33

 [Link]

Cristiano Pires Martins 34

 Exemplo de Biblioteca de Validação
[Link]
Com expressões regulares: [Link]
octavalidate

Cristiano Pires Martins 35