CODING_JAVASCRIPT 4

CODING_JAVASCRIPT 1

CODING
PROGRAMAÇÃO EM JAVASCRIPT

4 CODING
JAVASCRIPT
 CODING_JAVASCRIPT 4

Programação em Linguagem JavaScript

2023

Todo o conteúdo deste material, como textos, gráficos, imagens, logotipo e tabelas, é
de propriedade exclusiva da BuildingUp Centro de Educação Integrada Ltda e da
B.Up Educacional Ltda, e protegido pelas leis de direitos autorais do Brasil,
proporcionadas pela Constituição Federal em seu artigo 5º, parágrafos 27 e 28, bem
como pelo Código Civil Brasileiro e pela Lei 9.610/98. Outros nomes de marcas e
logotipos podem ser marcas comerciais ou marcas registradas de outras empresas.
Não é permitido copiar, distribuir, retransmitir ou modificar o conteúdo deste material,
na forma eletrônica ou impressa, para qualquer fim. Tais atos serão considerados
crimes e julgados na forma da Lei pertinente.

2
 CODING_JAVASCRIPT 4

INDICE
• Conteúdo deste modulo

• Objetivos das unidades

• Unidade 1: Programação Orientada a Objetos (P.O.O)

• Unidade 2: P.O.O no JavaScript

• Unidade 3: Herança e Polimorfismo na P.O.O

• Unidade 4: Encapsulamento e Abstração na P.O.O

• Unidade 5: APIs, JSON e Fetch

• Unidade 6: Async / Await

• Unidade 7: Try / Catch

• Unidade 8: Spread, Rest e Importações

• Unidade 9: Destructuring

• Unidade 10: Projeto Calculadora

3
 CODING_JAVASCRIPT 4

CONTEÚDO
CONTEÚDO

Se você chegou até aqui, é porque já percorreu uma longa

jornada em suas aulas de JavaScript. Aprendeu sobre
variáveis, funções, estruturas de controle, manipulação do
DOM, manipulação de eventos e outras funcionalidades
essenciais da linguagem.

Mas agora é hora de expandir ainda mais seus

conhecimentos e aprender sobre um dos conceitos mais
importantes e poderosos da programação: a Programação
Orientada a Objetos (P.O.O) em JavaScript. Esta é uma
abordagem que permite criar códigos mais eficientes e
organizados, além de possibilitar a criação de programas
mais complexos e robustos.

Nesta apostila, você vai aprender sobre os quatro pilares da

P.O.O: herança, polimorfismo, encapsulamento e abstração.
Veremos como cada um desses conceitos pode ser
aplicado em JavaScript e como eles podem ajudar a criar
códigos mais reutilizáveis, escaláveis e fáceis de manter.

Além disso, vamos explorar recursos essenciais de JavaScript

como API'S, JSON e Fetch, Async/Await, Try/Catch, Spread,
Rest e importações. Cada um desses recursos é fundamental
para desenvolver aplicações modernas e eficientes.

E para colocar tudo isso em prática, vamos desenvolver um

projeto real de uma calculadora usando P.O.O em
JavaScript. Será uma oportunidade única de aplicar todo o
conhecimento adquirido ao longo deste curso e criar uma
aplicação de verdade!

4
 CODING_JAVASCRIPT 4

UNIDADE

OBJETIVOS
Programação • Entender o conceito de programação orientada
1 orientada a a objetos
OBJETIVOS

objetos (P.O.O) • Aprender sobre os pilares da P.O.O

UNIDADE

OBJETIVOS
• Aprender a criar classes e objetos em JS;
2 P.O.O no
JavaScript
• Desenvolver habilidades para trabalhar com
métodos, propriedades e construtores em JS
UNIDADE

OBJETIVOS
Herança &
3 polimorfismo
na P.O.O
• Aprender a utilizar herança para reutilizar códigos;
• Aprender a utilizar polimorfismo para criar objetos
UNIDADE

OBJETIVOS

• Compreender o conceito de encapsulamento e

Encapsulamento
4 & abstração na
P.O.O
sua importância em projetos de programação;
• Entender como utilizar abstração para simplificar
a complexidade de um projeto de programação
UNIDADE

OBJETIVOS

• Entender o conceito de API’s;

5 APIs, JASON &

Fetch
• Aprender a utilizar o formato JSON;
• Desenvolver habilidades para utilizar a API Fetch
para enviar e receber dados em requisições HTTP
UNIDADE

OBJETIVOS

• Entender o conceito de assincronia e sua

6 Async / Await importância em projetos de programação;

• Aprender a utilizar as palavras-chave async e await
para trabalhar com código assíncrono em JS
UNIDADE

OBJETIVOS

• Aprender a utilizar a palavra-chave try para

7 Try / Catch envolver trechos de código que podem lançar
exceções
UNIDADE

OBJETIVOS

• Aprender a utilizar a sintaxe spread para

8 Spread, rest &
importações
concatenar arrays, clonar objetos e outras
operações
UNIDADE

OBJETIVOS

• Compreender o conceito de desconstrução

9 Destructuring (destructuring) e como ele pode ser utilizado em

JavaScript
UNIDADE

OBJETIVOS

• Desenvolver o projeto de um calculadora em

10 Projeto
calculadora
JavaScript, utilizando todos os conceitos
aprendidos ao longo dos módulos

5
 CODING_JAVASCRIPT 4

UNIDADE

PROGRAMAÇÃO
ORIENTADA A
OBJETOS (P.O.O)

6
 CODING_JAVASCRIPT 4
UNIDADE 1

Programação Orientada a Objetos (P.O.O)

Programação Orientada a Objetos
(P.O.O) é um paradigma de
programação que se concentra no uso
de objetos para modelar a solução de
um problema. Em vez de lidar com dados
e procedimentos de forma separada, a
P.O.O combina os dois em entidades
chamadas objetos. Esses objetos
representam entidades do mundo real,
como pessoas, animais, carros, etc., e
possuem atributos (dados) e
comportamentos (métodos) que
descrevem suas características e ações.

A P.O.O também define conceitos importantes como

herança, encapsulamento, abstração e polimorfismo, que
permitem que os desenvolvedores escrevam códigos de
maneira mais organizada, reutilizável e fácil de manter.
Uma das vantagens da P.O.O é a capacidade de
reutilização de código. Quando você cria objetos com
características e comportamentos similares, pode definir
uma classe que encapsula essas características e
comportamentos comuns.

Em seguida, você pode instanciar objetos dessa classe,

reutilizando o código da classe em vários lugares do seu
programa. Isso torna o código mais organizado e fácil de
manter, pois você não precisa escrever o mesmo código em
vários lugares.

A P.O.O também permite a abstração de dados, o que

significa que você pode esconder detalhes complexos da
implementação dos objetos e expor apenas a informação
relevante a outras partes do programa.

7
 CODING_JAVASCRIPT 4
UNIDADE 1

Isso ajuda a tornar o código mais claro e fácil de

compreender, além de tornar a manutenção mais fácil, pois
você pode alterar a implementação de um objeto sem
afetar outras partes do programa que dependem dele.

O encapsulamento é outro conceito importante da P.O.O.

Ele permite que você controle o acesso aos dados e
comportamentos de um objeto, o que ajuda a garantir a
integridade dos dados e a proteger o objeto de mudanças
indesejadas. Isso torna o código mais seguro e confiável.
Já a herança permite que você crie novas classes a partir de
outras existentes, herdando todos os atributos e
comportamentos das classes base. Isso também torna o
código mais organizado e fácil de manter, pois você pode
reaproveitar o código da classe base e adicionar apenas as
características específicas da nova classe.
O polimorfismo é o último conceito importante da P.O.O que
vale destacar. Ele permite que você crie objetos que podem
ser tratados de forma genérica, sem precisar conhecer suas
características específicas. Isso torna o código mais flexível e
escalável, pois você pode escrever código que funcione
para vários tipos de objetos sem precisar escrever código
separado para cada tipo de objeto.

Agora, vamos dar vida a esses conceitos da P.O.O, usando

um objeto como exemplo. Vamos imaginar que estamos
criando um objeto "Pessoa" para representar uma pessoa
real. Isso nos permitirá explorar como as classes, heranças,
abstração, encapsulamento e objetos funcionam na
prática.

1. Classe: Uma classe é um modelo para criar objetos. É

como uma receita para criar objetos de uma determinada
categoria. Por exemplo, você pode criar uma classe
"Pessoa" que descreva as características comuns de todas
as pessoas, como nome, idade, endereço, etc.

8
 CODING_JAVASCRIPT 4
UNIDADE 1

2. Objeto: Um objeto é uma instância de uma classe. É como

um bolo que é feito a partir da receita (classe). Por exemplo,
você pode instanciar a classe "Pessoa" para criar um objeto
"João", que representa uma pessoa específica com nome
"João", idade "30", endereço "Rua X, Número Y".

3. Herança: A herança é a capacidade de uma classe

derivada herdar atributos e comportamentos de uma classe
base. Isso significa que você pode criar uma nova classe a
partir de uma classe existente, reutilizando o código da
classe base e adicionando ou modificando características
específicas da nova classe. Por exemplo, você pode criar
uma classe "Estudante" que herde da classe "Pessoa" e
adicione características específicas de um estudante, como
matrícula, curso, etc.

4. Encapsulamento: O encapsulamento é a capacidade de

esconder detalhes de implementação de um objeto,
expondo apenas a informação relevante. Isso significa que
você pode controlar o acesso aos atributos e
comportamentos de um objeto, o que ajuda a proteger o
objeto de mudanças indesejadas. Por exemplo, você pode
tornar o atributo "idade" de uma pessoa como "privado", o
que significa que somente o objeto "Pessoa" pode acessar e
alterar esse atributo, protegendo-o de mudanças
indesejadas por outras partes do programa.

5. Abstração: A abstração é a capacidade de representar

informações importantes de forma simples e genérica,
escondendo detalhes complexos da implementação. Isso
significa que você pode modelar objetos de forma mais
natural e intuitiva, expondo apenas a informação relevante.
Por exemplo, você pode representar uma pessoa como um
objeto com atributos como nome, idade, endereço, sem
precisar se preocupar com detalhes complexos da
implementação, como como esses atributos são
armazenados em memória, podemos representá-los como
simples propriedades de um objeto "Pessoa". Dessa forma, a
abstração nos permite trabalhar com objetos de forma mais
natural e intuitiva, expondo apenas a informação relevante
e escondendo os detalhes técnicos.
9
 CODING_JAVASCRIPT 4
UNIDADE 1

Conclusão

Nesta unidade, exploramos os conceitos da Programação

Orientada a Objetos (P.O.O) e como eles são aplicados em
JavaScript. Vimos o que é uma classe, objeto, herança,
encapsulamento, abstração e polimorfismo, e como eles
funcionam juntos para modelar objetos e criar soluções de
software mais robustas e flexíveis.

Com a P.O.O, podemos representar entidades do mundo

real como objetos, com seus atributos e comportamentos, e
usar heranças e polimorfismos para compartilhar e reutilizar
código de forma mais eficiente. Além disso, a abstração nos
permite esconder detalhes complexos da implementação,
tornando o desenvolvimento de software mais claro e
intuitivo.

Em resumo, a Programação Orientada a Objetos é uma

abordagem poderosa para o desenvolvimento de software,
que nos permite modelar o mundo real de forma eficiente e
criar soluções escaláveis e flexíveis. É de suma importancia
que você entenda bem o conceito de cada tópico
abordado aqui, pois nas proximas unidades veremos como
estes conceitos são aplicados dentro do JavaScript.

10
 CODING_JAVASCRIPT 4

UNIDADE

P.O.O NO
JAVASCRIPT

11
 CODING_JAVASCRIPT 4
UNIDADE 2

P.O.O NO JAVASCRIPT
Classe é uma estrutura de dados que permite criar objetos
a partir de modelos previamente definidos. Em JavaScript,
as classes são introduzidas a partir da versão ECMAScript
2015 (ES6) e permitem implementar a Programação
Orientada a Objetos (P.O.O).

Aqui está como criar uma classe em JavaScript:

1. Utilize a palavra-chave "class" para definir uma classe:

2. Crie um constructor dentro do corpo da classe, veja um

exemplo para um class pessoa:

O construtor é um método especial na classe que é

executado automaticamente sempre que um objeto é
criado a partir da classe. Ele é utilizado para inicializar os
atributos do objeto e definir seus valores iniciais.

Neste exemplo, a classe "Pessoa" tem um construtor que

recebe dois parâmetros: "nome" e "idade". Quando um
objeto é criado a partir desta classe, esses parâmetros são
passados para o construtor, que então inicializa os atributos
"nome" e "idade" do objeto.

12
 CODING_JAVASCRIPT 4
UNIDADE 2

Por exemplo:

Observe que, ao chamar o construtor, usamos a palavra-

chave "new", seguida pelo nome da classe e os parâmetros
necessários. O resultado é uma instância da classe, que
pode ser usada para acessar seus atributos e métodos.

3. Adicione métodos à classe:

Os métodos são funções que são definidas dentro de uma

classe e são usadas para implementar comportamentos dos
objetos criados a partir da classe. Os métodos podem
acessar e manipular os atributos da classe e também podem
retornar valores.

Neste exemplo, a classe "Pessoa" tem um método chamado

"apresentacao". Este método retorna uma string com uma
apresentação da pessoa, baseada em seus atributos "nome"
e "idade".

13
 CODING_JAVASCRIPT 4
UNIDADE 2

Por exemplo:

Observe que, para acessar o método de um objeto, basta

usar a notação "ponto" (.) seguido pelo nome do método. O
método será executado e o resultado será retornado.

Notamos algo inovador no código da página anterior, o que

exatamente significa o uso de 'this' na programação em
JavaScript?

This" é uma referência ao objeto atual que está sendo

trabalhado e é usado para acessar os atributos e métodos
do objeto. Em outras palavras, "this" permite que você
acesse as propriedades do objeto corrente, e seu valor
pode mudar dependendo do contexto em que é usado.
Portanto, é importante compreender o uso de "this" em
JavaScript para poder escrever códigos melhores.

A palavra-chave "this" é uma das partes fundamentais da

programação orientada a objetos em JavaScript. Ela
representa a instância do objeto que está sendo trabalhada
no momento, e permite que você acesse as propriedades e
métodos deste objeto.

O valor de "this" é determinado pelo contexto em que é

usado. Por exemplo, em uma classe, "this" se refere a uma
instância específica da classe, enquanto em uma função
global, "this" se refere ao objeto global (comumente
"window" no navegador).
No exemplo citado, "this" é usado dentro do método
"apresentacao" para acessar os atributos "nome" e "idade"
da instância de "Pessoa". O valor de "this" é determinado
pela instância de "Pessoa" que está sendo trabalhada no
momento.

14
 CODING_JAVASCRIPT 4
UNIDADE 2

Exercícios

Vamos à prática!
Crie um arquivo chamado "Aula22-P.O.O.js" e realize os
seguintes exercicios:

1. Crie uma classe "Pessoa" com atributos "nome", "idade"

e "profissão".

2. Crie uma classe "Estudante" com atributos "nome",

"idade", "profissão" e "curso".
3. Crie uma classe "Professor" com atributos "nome",
"idade", "profissão" e "disciplina".

No final todos devem ter um método que imprima as

informações na tela!

15
 CODING_JAVASCRIPT 4
UNIDADE 2

Conclusão

Nesta unidade, você aprendeu sobre a Programação

Orientada a Objetos (P.O.O) em JavaScript. Vimos como
criar classes, adicionar atributos e métodos a elas, e como
utilizar o conceito de herança. Além disso, exploramos o uso
do construtor para inicializar objetos e o significado do "this"
em contextos de objetos.

Com os conhecimentos adquiridos nesta unidade, você

está pronto para começar a aplicar as técnicas de P.O.O
em seus projetos em JavaScript!

16
 CODING_JAVASCRIPT 4

UNIDADE

HERANÇA &
POLIMORFISMO
NA P.O.O

17
 CODING_JAVASCRIPT 4
UNIDADE 3

Herança & Polimorfismo na P.O.O

Introdução à Herança

A Herança é um conceito fundamental na Programação

Orientada a Objetos (P.O.O) que permite que uma classe
herde características e comportamentos de outra classe.
Em outras palavras, a herança permite que você crie uma
nova classe a partir de uma classe existente, reutilizando o
código já escrito e adicionando ou sobrescrevendo
comportamentos ou atributos conforme necessário.
Na P.O.O, a classe de origem é chamada de classe-pai ou
superclasse, enquanto a classe derivada é chamada de
classe-filha ou subclasse. A classe-filha herda todos os
atributos e métodos da classe-pai, incluindo seus
comportamentos, e pode adicionar ou sobrescrever
comportamentos conforme necessário.

A herança permite a reutilização de código, evita a

duplicação de código e facilita a manutenção do código,
pois as mudanças em uma classe-pai são
automaticamente propagadas para suas classes-filhas.

Em suma: a classe-pai é a classe que é herdada por outra

classe. Ela é chamada de "superclasse" ou "classe base". A
classe-pai define os atributos e métodos que serão
herdados por suas classes-filhas. Por outro lado, a classe-
filha é a classe que herda de uma classe-pai. Ela é
chamada de "subclasse" ou "classe derivada". A classe-filha
pode herdar todos os atributos e métodos da classe-pai,
incluindo seus comportamentos, e pode adicionar ou
sobrescrever comportamentos conforme necessário.

18
 CODING_JAVASCRIPT 4
UNIDADE 3

A herança é uma das características fundamentais da

Programação Orientada a Objetos (P.O.O) e permite a
criação de hierarquias de classes. Isso significa que é
possível criar uma classe-filha a partir de uma classe-pai e, a
seguir, criar outra classe-filha a partir da classe-filha anterior,
e assim por diante. Dessa forma, é possível criar uma
hierarquia de classes que representa relações de
generalização/especialização entre objetos.
Além disso, a classe-filha pode acessar os atributos e
métodos da classe-pai diretamente, sem precisar duplicar o
código. Isso significa que, se você precisar fazer uma
mudança em algum atributo ou método da classe-pai, essa
mudança será automaticamente refletida em todas as
classes-filhas que herdam dele. Isso torna o código mais
organizado e fácil de manter.
A classe-filha também pode adicionar novos atributos ou
métodos que não estão presentes na classe-pai. Além disso,
ela pode sobrescrever métodos da classe-pai, ou seja,
substituir o comportamento de um método herdado com
um novo comportamento específico para a classe-filha. Isso
é útil quando você precisa mudar o comportamento de um
objeto em relação aos outros objetos da mesma hierarquia.
Em suma, o conceito de classe-pai e classe-filha é
fundamental para a Programação Orientada a Objetos e
permite que você organize e reutilize o código de maneira
eficiente. Além disso, ele facilita a manutenção do código,
pois as mudanças em uma classe-pai são automaticamente
refletidas em todas as classes-filhas que herdam dela.

A herança em JavaScript é implementada com a palavra-

chave "extends". A seguir temos um exemplo de como
aplicar a herança em JavaScript:

19
 CODING_JAVASCRIPT 4
UNIDADE 3

Neste exemplo, a classe "Veiculo" é a classe-pai e a classe

"Carro" é a classe-filha. A classe "Carro" herda os atributos
"marca", "modelo" e "ano" da classe "Veiculo". Além disso,
ela adiciona um novo atributo, "numeroDePortas", e um
novo método, "abrirPorta". Finalmente, a classe "Carro"
chama o método "ligar" da classe "Veiculo" com o
comando "meuCarro.ligar()".

20
 CODING_JAVASCRIPT 4
UNIDADE 3

É importante destacar que a herança em JavaScript

também permite a criação de hierarquias de classes mais
complexas. Por exemplo, você pode ter uma classe
"CarroEsportivo" que herde de "Carro" e adicione novos
atributos ou métodos específicos para carros esportivos.
Dessa forma, você pode continuar reutilizando o código
da classe "Veiculo" e da classe "Carro" na classe
"CarroEsportivo".

É importante lembrar que, em JavaScript, todas as classes

herdam implicitamente de Object. Isso significa que,
mesmo se você não especificar explicitamente de qual
classe uma determinada classe herda, ela sempre herdará
dos métodos e atributos da classe Object.
Aqui está um passo a passo da implementação de
herança no código mostrado anteriormente:
1. Criamos uma classe "Veiculo" que representa um veículo
genérico e define três atributos: "marca", "modelo" e "ano".
Além disso, a classe "Veiculo" define um método "ligar".

2. Criamos uma classe "Carro" que representa um carro

específico e herda da classe "Veiculo". A classe "Carro"
adiciona um novo atributo, "numeroDePortas", e um novo
método, "abrirPorta".
3. A palavra-chave "extends" é usada para indicar que a
classe "Carro" herda da classe "Veiculo".

4. O método construtor da classe "Carro" usa o comando

"super" para chamar o construtor da classe-pai, passando
os três atributos "marca", "modelo" e "ano". Dessa forma, a
classe "Carro" herda esses atributos da classe "Veiculo".

5. Finalmente, criamos uma instância da classe "Carro" e

acessamos os atributos e métodos da classe "Veiculo"
herdadas por meio da instância "meuCarro".

21
 CODING_JAVASCRIPT 4
UNIDADE 3

O conceito de Polimorfismo

O polimorfismo é um dos princípios da Programação

Orientada a Objetos que permite que objetos de diferentes
classes, mas com a mesma assinatura, sejam tratados de
forma semelhante. Isso significa que diferentes objetos
podem responder a uma mesma mensagem ou método de
maneira diferente, mas ainda assim, o código que envia a
mensagem ou invoca o método não precisa se preocupar
com as diferenças entre as implementações.
Em outras palavras, o polimorfismo permite que diferentes
objetos sejam tratados de forma genérica, sem que seja
necessário conhecer a implementação detalhada de cada
objeto. Dessa forma, o código fica mais limpo, mais fácil de
manter e mais escalável.

Exemplo:
Vamos supor que temos duas classes, "Cachorro" e "Gato",
ambas com um método "fazerBarulho". A classe "Cachorro"
faz o barulho "au au", enquanto a classe "Gato" faz o
barulho "miau". Se tivermos uma lista de objetos dessas
classes, podemos percorrer a lista e invocar o método
"fazerBarulho" para cada objeto, sem precisar saber se ele é
um cachorro ou um gato. O código que invoca o método
"fazerBarulho" só precisa saber que ele existe e qual é a sua
assinatura.
A seguir está um exemplo de como implementar o
polimorfismo em JavaScript:

22
 CODING_JAVASCRIPT 4
UNIDADE 3

Passo a passo:
1. Criamos a classe base "Animal", que tem um método
"fazerBarulho".

2. Criamos as classes "Cachorro" e "Gato", que herdam

de "Animal".

3. Sobrescrevemos o método "fazerBarulho" nas classes

"Cachorro" e "Gato" para que eles produzam barulhos
diferentes.

4. Criamos uma lista de objetos "animais", que contém

objetos tanto de "Cachorro" quanto de "Gato".

5. Percorremos a lista "animais" e invocamos o método

"fazerBarulho" para cada objeto.

Ao executarmos este código, veremos o

seguinte resultado:

23
 CODING_JAVASCRIPT 4
UNIDADE 3

Exercícios

Vamos praticar! Agora crie um arquivo chamado "Aula23-

Herança-Polimorfismo.js" e faça os seguintes exercicios:

1. Crie uma classe "Vegetal" que tenha um método

"crescer". Crie as classes "Árvore" e "Arbusto", que
herdam de "Vegetal", e sobrescrevam o método
"crescer" para que eles produzam saídas diferentes.

2. Crie uma classe "Animal" que tenha um método

"mover". Crie as classes "Peixe", "Ave" e "Mamífero",
que herdam de "Animal", e sobrescrevam o método
"mover" para que eles produzam saídas diferentes.
3. Crie uma classe "Pessoa" que tenha os atributos
"nome" e "idade". Crie a classe "Aluno", que herde de
"Pessoa", e adicione o atributo "matrícula".
Sobrescreva o método "toString" da classe "Pessoa"
para que ele produza uma saída formatada com o
nome e a idade da pessoa, e sobrescreva o método
"toString" da classe "Aluno" para que ele produza uma
saída formatada com o nome, idade e matrícula do
aluno.

4. Crie uma classe "FiguraGeométrica" que tenha um

método "calcularÁrea". Crie as classes "Quadrado",
"Retângulo" e "Triângulo", que herdam de
"FiguraGeométrica", e sobrescrevam o método
"calcularÁrea" para que eles calculem e produzam a
área de suas respectivas figuras geométricas.

5. Crie uma classe "Musica" que tenha os atributos "título"

e "duração". Crie a classe "Rock", que herde de
"Musica", e adicione o atributo "gênero". Sobrescreva
o método "toString" da classe "Musica" para que ele
produza uma saída formatada com o título e a
duração da música, e sobrescreva o método
"toString" da classe "Rock" para que ele produza uma
saída formatada com o título, duração e gênero da
música de rock.

24
 CODING_JAVASCRIPT 4
UNIDADE 3

Conclusão

Ao finalizarmos esta unidade, podemos concluir que a

herança e o polimorfismo são conceitos importantes na
Programação Orientada a Objetos.

A herança permite que classes sejam definidas com base

em outras classes já existentes, compartilhando suas
características e comportamentos. Dessa forma, é possível
evitar a repetição de códigos e aumentar a modularidade
e a organização do programa.

Já o polimorfismo permite que objetos de classes diferentes,

que compartilham uma relação de herança, possam ser
tratados de forma genérica como objetos da classe pai. Isso
torna possível escrever código mais flexível e reutilizável.
Além disso, ao aplicarmos esses conceitos em JavaScript,
pudemos ver que é possível implementar herança e
polimorfismo de forma simples e eficiente, utilizando as
palavras-chave "class" e "extends".

Em resumo, a herança e o polimorfismo são fundamentais

para a construção de programas orientados a objetos, pois
permitem a criação de classes hierárquicas, a
compartilhação de características e comportamentos entre
classes, e a implementação de código flexível e reutilizável.

25
 CODING_JAVASCRIPT 4

UNIDADE

ENCAPSULAMENTO
& ABSTRAÇÃO
NA P.O.O

26
 CODING_JAVASCRIPT 4
UNIDADE 4

Encapsulamento & Abstração na P.O.O

Introdução a Encapsulamento e Abstração

Encapsulamento e Abstração são conceitos fundamentais

na Programação Orientada a Objetos (P.O.O).

O encapsulamento é a técnica de esconder detalhes de

implementação de um objeto, oferecendo apenas uma
interface pública para interagir com ele. Isso garante a
segurança dos dados, já que somente os métodos públicos
do objeto têm acesso aos dados privados. Além disso, o
encapsulamento torna o código mais fácil de ser mantido e
melhorado, pois as alterações nos detalhes de
implementação não afetam a forma como o objeto é
usado pelo resto do código.

A abstração é a técnica de representar somente as

informações relevantes de um objeto, ocultando detalhes
irrelevantes. Isso torna o código mais fácil de ser entendido e
usado, pois permite que o desenvolvedor se concentre nas
informações mais importantes do objeto. Além disso, a
abstração permite que objetos com comportamentos
semelhantes sejam tratados de maneira genérica, o que
pode ser útil em várias situações.
Juntas, essas duas técnicas são importantes para tornar o
código mais Seguro e fácil de entender, o que é essencial
em projetos de software de grande escala.
Encapsulamento é uma técnica de Programação Orientada
a Objetos que envolve o agrupamento de dados e
comportamentos relacionados em um único objeto. O
objeto pode ter propriedades (dados) e métodos
(comportamentos), e o encapsulamento permite que esses
dados e comportamentos sejam protegidos de acessos
indevidos, ou seja, o acesso aos dados e comportamentos
de um objeto pode ser controlado através de sua interface
pública.
27
 CODING_JAVASCRIPT 4
UNIDADE 4

Por que o encapsulamento é tão importante?

• Proteção de dados: o encapsulamento permite que os

dados de um objeto sejam protegidos contra acessos
indevidos ou modificações acidentais. Isso garante a
integridade e a consistência dos dados.

• Melhoria da segurança: o encapsulamento permite que

as vulnerabilidades de segurança sejam minimizadas,
pois limita o acesso aos dados sensíveis e
comportamentos críticos.
• Facilidade de manutenção: o encapsulamento permite
que as mudanças na implementação de um objeto
sejam realizadas sem afetar o resto do código, o que
torna o desenvolvimento de software mais fácil e rápido.

• Reutilização de código: o encapsulamento permite que

os objetos sejam reutilizados em diferentes partes do
código sem que seja necessário conhecer todos os
detalhes de sua implementação.

Em resumo, o encapsulamento é uma técnica importante

na programação orientada a objetos, porque permite que
os dados e comportamentos de um objeto sejam
protegidos, ajuda a melhorar a segurança, facilita a
manutenção do código e permite a reutilização de objetos.

28
 CODING_JAVASCRIPT 4
UNIDADE 4

Get e Set

Get e Set são métodos que permitem acessar e modificar

propriedades de uma classe, respectivamente. Eles são
usados para fornecer uma interface pública para acessar e
modificar propriedades de um objeto, enquanto mantém a
lógica interna do objeto oculta.
• O método get é usado para obter o valor de uma
propriedade.
• O método set é usado para definir o valor de uma
propriedade.

Exemplo:

29
 CODING_JAVASCRIPT 4
UNIDADE 4

Get e set permitem que você crie uma interface pública

para acessar e modificar propriedades de um objeto,
enquanto mantém o controle de acesso às propriedades
internas.

Por exemplo, você pode validar os valores antes de permitir

a modificação, ou realizar outras operações quando a
propriedade é acessada ou modificada.

No exemplo anterior, o encapsulamento é implementado

através da utilização da notação "_" antes do nome da
propriedade "_nome".
Esta notação não é uma convenção padrão, mas é comum
na comunidade de programação para indicar que uma
propriedade é privada e não deve ser acessada
diretamente.

30
 CODING_JAVASCRIPT 4
UNIDADE 4

Abstração de dados e sua aplicação

A abstração de dados é um conceito fundamental da

Programação Orientada a Objetos (P.O.O) que permite
representar a realidade de forma simplificada e abstrata. É
a técnica de esconder detalhes de implementação e
apresentar somente a informação relevante ao usuário.

Na P.O.O, a abstração de dados é realizada através da

criação de classes que representam entidades ou objetos
do mundo real. Essas classes agrupam dados relevantes
(propriedades) e comportamentos (métodos) em um único
objeto.

Por exemplo, você pode criar uma classe Pessoa que

represente as pessoas e tenha propriedades como nome,
idade, altura e peso, e métodos como andar e falar. Dessa
forma, é possível trabalhar com objetos da classe Pessoa
sem se preocupar com os detalhes de implementação de
como cada propriedade é calculada ou como cada
método é implementado.

31
 CODING_JAVASCRIPT 4
UNIDADE 4

A abstração de dados é importante porque permite

trabalhar com objetos de forma mais clara e fácil,
separando as preocupações de implementação dos dados
e comportamentos. Além disso, ajuda a aumentar a
reutilização de código e a manter o código organizado e
legível.

32
 CODING_JAVASCRIPT 4

UNIDADE

APIs, JSON
& FETCH

33
 CODING_JAVASCRIPT 4
UNIDADE 5

APIs, JASON & Fetch

Introdução a APIs

APIs, ou "Application Programming Interfaces" (em

português, "Interfaces de Programação de Aplicativos) são
um conjunto de regras e protocolos que permitem a
integração de aplicativos diferentes, possibilitando que eles
se comuniquem entre si e compartilhem dados e
funcionalidades.
Elas funcionam como uma "ponte" entre as aplicações,
permitindo que elas sejam integradas sem a necessidade de
mudanças significativas no código-fonte original.

As APIs são amplamente utilizadas na indústria de tecnologia

e estão presentes em muitas aplicações web e móveis,
como por exemplo, em aplicativos de mensagens que
integram com a agenda de contatos do dispositivo, ou em
aplicativos de viagens que integram com o calendário do
usuário para sugerir datas disponíveis para viagens.

Imagine que você quer construir um aplicativo que mostre

previsões do tempo para uma cidade específica.
Normalmente, você precisaria escrever todo o código para
buscar as informações sobre o tempo e exibi-las no
aplicativo. No entanto, com as APIs, você pode usar uma
API já existente que forneça informações sobre o tempo.
Desta forma, você pode se concentrar em construir a parte
do aplicativo que exibe as informações para o usuário final,
sem precisar escrever todo o código para buscar essas
informações.

Em resumo, as APIs são como um intermediário entre

aplicativos que permite que eles se comuniquem e
compartilhem informações sem precisar modificar o código-
fonte original. Desta forma, diferentes aplicativos podem se
integrar para criar soluções mais completas e poderosas.

34
 CODING_JAVASCRIPT 4
UNIDADE 5

Trabalhando com JSON

JSON, que significa "JavaScript Object Notation", é uma

forma de representar dados estruturados em aplicações
web. É uma alternativa popular a outros formatos de dados,
como XML, e é amplamente utilizado em aplicações que
dependem de troca de dados através de APIs.

A estrutura de dados do JSON é baseada em pares de

chave-valor, onde a chave é uma string que identifica o
dado e o valor é o dado em si. Esses pares de chave-valor
são agrupados em objetos JSON, que são representados
como colchetes {}. Além disso, o JSON também suporta
arrays, que são representados como colchetes [].
A sintaxe básica do JSON é bastante simples e fácil de
aprender. Por exemplo, aqui está um exemplo de um objeto
JSON simples que representa um livro:

Como mencionado, o JSON é amplamente utilizado em

aplicações que dependem de troca de dados através de
APIs. As APIs geralmente retornam dados em formato JSON,
o que permite que as aplicações cliente acessem e usem
esses dados de maneira fácil e eficiente.

Além disso, o JSON é uma forma padronizada de

representar dados, o que significa que diferentes aplicações
e plataformas podem se comunicar e compartilhar
informações de maneira simples e eficiente.

Em resumo, o JSON é uma forma popular de representar

dados estruturados em aplicações web. Sua estrutura de
dados baseada em pares de chave-valor, sua sintaxe
simples e sua ampla utilização em APIs o tornam uma
escolha lógica para muitos desenvolvedores de aplicativos

35
 CODING_JAVASCRIPT 4
UNIDADE 5

Acessando API's externas com Fetch:

O comando fetch é uma função JavaScript que permite

acessar recursos externos, como APIs, usando a técnica de
requisição HTTP. Ele é parte da especificação da Web API e
é amplamente suportado em todos os navegadores
modernos.

Ao fazer uma requisição com o fetch, você pode especificar

o URL do recurso que deseja acessar, bem como outros
detalhes da requisição, como o método HTTP (por exemplo,
GET ou POST) e, se necessário, os dados da requisição. Em
seguida, o fetch retorna uma promessa que, quando
resolvida, contém a resposta da requisição.

GET e POST são dois dos métodos HTTP mais comuns usados
para fazer requisições a APIs.

• O método GET é usado para obter dados de uma API

sem enviar dados adicionais. É o método padrão para
acessar APIs e é geralmente usado para recuperar dados
de uma API.
• O método POST é usado para enviar dados para uma
API, como quando você envia informações de um
formulário para ser processado.
Aqui está um exemplo simples de como fazer uma
requisição GET com o fetch:

36
 CODING_JAVASCRIPT 4
UNIDADE 5

Os métodos THEN e CATCH são usados para lidar com a

resposta de uma requisição fetch.

• O método then é chamado quando a resposta da

requisição é recebida com sucesso e permite que você
faça alguma coisa com essa resposta. Por exemplo, você
pode usar o método json para converter a resposta em
um objeto JavaScript.

• O método catch é chamado quando há um erro na

requisição e permite que você faça alguma coisa para
lidar com o erro, como exibir uma mensagem de erro
para o usuário.

Agora vamos usar um exemplo real, usando o método GET

em uma API verdadeira, e aplicando os dados dentro de um
codigo HTML:
LINK PARA ESTUDOS FUTUROS:
'https://jsonplaceholder.typicode.com/users'

No exemplo acima, iremos aplicar dentro da nossa página

HTML para podermos manipular os dados.
Se abrirmos nossa página HTML e clicarmos com o botão
direito no meio da página, e em seguida clicarmos em
‘inspecionar elemento’, abriremos nossa aba de
desenvolvedor, onde poderemos ver o console.log que
aplicamos no codigo.

Veja a seguir:

37
 CODING_JAVASCRIPT 4
UNIDADE 5

Veremos também nossas informações recebidas pela API -

um array de objetos que podemos manipular com nossos
métodos!

Agora usaremos os métodos map e forEach para exibir

apenas os nomes dos usuários em uma tag <p>:

38
 CODING_JAVASCRIPT 4
UNIDADE 5

Neste exemplo, criamos uma constante chamada endpoint

que armazena o endpoint que queremos acessar. Em
seguida, usamos o método fetch para fazer uma requisição
GET a esse endpoint. Quando a resposta é recebida, usamos
o método JSON para converter a resposta em um objeto
JavaScript.
Em seguida, usamos o método map para percorrer cada
elemento no array de usuários e extrair apenas o nome de
cada usuário. Em seguida, usamos o método forEach para
percorrer cada nome de usuário e criar uma nova tag <p>
para exibir o nome. Finalmente, adicionamos cada tag <p>
ao corpo da página.
Por fim, usamos o método catch para lidar com qualquer
erro que possa ocorrer durante a requisição. Se houver um
erro, ele será exibido no console.

E ja podemos ver na nossa página todos os nomes recebidos

pela API!

39
 CODING_JAVASCRIPT 4
UNIDADE 5

Agora vamos a alguns novos conceitos que apareceram em

nosso ultimo exemplo:

• document.createElement é uma função que permite criar

elementos HTML dinamicamente. Nesse exemplo,
estamos criando uma tag <p> para exibir cada nome de
usuário.

• document.body.appendChild é uma função que permite

adicionar um elemento filho ao corpo da página HTML.
Estamos usando esta função para adicionar cada tag
<p> com o nome do usuário ao corpo da página.

• textContent é uma propriedade de um elemento HTML

que permite definir o conteúdo textual do elemento. No
nosso exemplo, estamos usando a propriedade
textContent para definir o nome do usuário como o
conteúdo da tag <p>.

40
 CODING_JAVASCRIPT 4
UNIDADE 5

Exercícios
Vamos à prática!

Neste momento está pronto para aplicar o conhecimento

adquirido e criar seu próprio código!
Use o link de exemplo fornecido como referência na página
37, mas tente codificar sem olhar para a apostila. Isso
ajudará a fixar a informação e aprimorar suas habilidades
de codificação.

41
 CODING_JAVASCRIPT 4
UNIDADE 5

Conclusão

Nesta unidade, você aprendeu sobre APIs, JSON e Fetch,

três ferramentas importantes para o desenvolvimento de
aplicações web modernas.
A API é a interface de programação de aplicativos que
permite que diferentes aplicativos se comuniquem entre si.
Vimos os conceitos essenciais de APIs e como elas podem
ser usadas para acessar dados de diferentes fontes e
integrar aplicativos.

O JSON é uma estrutura de dados que permite que

informações sejam transmitidas de uma aplicação para
outra de maneira clara e organizada. Você aprendeu sobre
a sintaxe básica do JSON e como ele é usado para
transmitir dados em APIs.

O Fetch é uma API JavaScript que permite acessar APIs

externas de maneira simples e eficiente. Você aprendeu
como realizar uma requisição Fetch para obter dados de
uma API externa, além de explorar os métodos GET e POST e
os comandos then e catch.
Você também aprendeu sobre como criar elementos HTML
dinamicamente usando document.createElement,
adicioná-los ao corpo da página usando
document.body.appendChild e definir o conteúdo textual
de um elemento usando textContent.

Agora, com a conclusão desta unidade, você está pronto

para aplicar o conhecimento adquirido e criar suas próprias
soluções envolvendo APIs, JSON e Fetch!

42
 CODING_JAVASCRIPT 4

UNIDADE

ASYNC / AWAIT

43
 CODING_JAVASCRIPT 4
UNIDADE 6

Async / Await

Introdução

Async/Await é uma forma de lidar com operações

assíncronas em JavaScript que foi introduzida na versão
ES2017 da linguagem.

Operações assíncronas são aquelas que não bloqueiam a

execução do código enquanto aguardam a sua
conclusão. Ou seja, o programa não precisa esperar que a
operação termine para continuar a execução de outras
instruções.

Em JavaScript, algumas operações comuns que podem ser

assíncronas incluem requisições HTTP para um servidor,
operações de leitura/escrita em arquivos e acesso a
bancos de dados. Ao invés de esperar a conclusão dessas
operações, o código pode continuar a executar outras
instruções e, quando a operação assíncrona terminar, o
resultado é entregue por meio de callbacks, promises ou
Async/Await.

O uso de operações assíncronas em JavaScript é

importante para garantir a responsividade de aplicações
web e evitar que o programa "congele" enquanto aguarda
a conclusão de uma operação. Isso permite que o usuário
continue interagindo com a aplicação sem problemas,
enquanto as operações assíncronas são executadas em
segundo plano.

Antes do Async/Await, era comum utilizar callbacks e

promises para trabalhar com operações assíncronas. No
entanto, essa abordagem podia levar a um código confuso
e difícil de ler, especialmente quando várias operações
assíncronas eram realizadas em sequência ou em paralelo.

44
 CODING_JAVASCRIPT 4
UNIDADE 6

Com o Async/Await, o código assíncrono é escrito de

forma síncrona, o que torna o código mais legível e fácil de
entender. A palavra-chave "async" é usada para indicar
que uma função é assíncrona, e a palavra-chave "await" é
usada para esperar a conclusão de uma operação
assíncrona antes de continuar a execução do código.

Entendendo Promises
Promises são um recurso importante em JavaScript para
lidar com operações assíncronas.

Uma Promise é um objeto que

representa o resultado (ou o
fracasso) de uma operação
assíncrona que ainda não foi
concluída. Uma vez que a
operação assíncrona é concluída,
a Promise pode ser resolvida (com
sucesso) ou rejeitada (com erro) e
entregar o resultado para o
código que a chamou.

Promises são construídas com duas funções de callback:

"resolve", que é chamada quando a operação assíncrona
é concluída com sucesso, e "reject", que é chamada
quando ocorre um erro na operação assíncrona. O
resultado da operação assíncrona é passado como
argumento para a função "resolve" ou "reject".
Uma vez que uma Promise é criada, o código que a
chamou pode usar a função "then" para lidar com a
Promise resolvida (com sucesso) e a função "catch" para
lidar com a Promise rejeitada (com erro). Isso permite que o
código se torne mais legível e fácil de entender, em
comparação com o uso de callbacks aninhados.

45
 CODING_JAVASCRIPT 4
UNIDADE 6

Uma das principais vantagens das Promises é que elas

podem ser encadeadas, o que significa que várias
operações assíncronas podem ser realizadas em
sequência, sem a necessidade de callbacks aninhados.
Isso é feito usando a função "then", que é chamada para
lidar com a Promise anterior quando ela é resolvida, e
retorna uma nova Promise que representa o resultado da
próxima operação assíncrona.

Trabalhando com funções assíncronas

Nessa aula, você aprenderá a trabalhar com funções
assíncronas em JavaScript, incluindo como declará-las,
chamá-las e lidar com erros.

As funções assíncronas são declaradas com a palavra-

chave "async", que indica que a função é assíncrona e
pode conter operações assíncronas que retornam Promises.
Dentro da função, as operações assíncronas podem ser
declaradas com a palavra-chave "await", que indica que a
execução da função deve aguardar a conclusão da
operação assíncrona antes de continuar.

Para chamar uma função assíncrona, é necessário usar a

palavra-chave "await" antes do nome da função, o que faz
com que a execução do código aguarde a conclusão da
função assíncrona antes de continuar. A função assíncrona
pode retornar um valor, que pode ser capturado usando a
declaração:

"const result = await minhaFuncaoAssincrona()"

Quando se trabalha com funções assíncronas, é importante

lidar com erros de maneira apropriada. Os erros podem
ocorrer nas operações assíncronas ou na própria função
assíncrona. Para lidar com erros em funções assíncronas, é
recomendado o uso de blocos try/catch, que capturam os
erros e permitem que o código lide com eles de maneira
apropriada.

46
 CODING_JAVASCRIPT 4
UNIDADE 6

Ao usar try/catch com funções assíncronas, é importante

lembrar que a função deve ser chamada com await e que
o bloco try/catch deve estar dentro da função assíncrona,
para que os erros possam ser capturados corretamente.

Aqui está um exemplo simples de como declarar, chamar e

lidar com erros em uma função assíncrona em JavaScript:

Nesse exemplo, temos uma função assíncrona

operacaoAssincrona que retorna uma Promise resolvida
após um atraso de um segundo. A função minhaFuncao é
outra função assíncrona que usa a palavra-chave await
para aguardar a resolução da Promise retornada por
operacaoAssincrona.
Quando minhaFuncao é chamada no final do código, a
execução começa na primeira linha e, em seguida, passa
para a linha em que operacaoAssincrona é chamada. A
execução aguarda a resolução da Promise retornada por
operacaoAssincrona antes de passar para a próxima linha,
que imprime o resultado no console.

47
 CODING_JAVASCRIPT 4
UNIDADE 6

Temos alguns conceitos novos visto tambem como:

• new Promise: o construtor Promise é usado para criar

uma nova Promise que representa um valor assíncrono
que pode estar disponível no futuro. A Promise tem dois
estados possíveis: "pendente" (quando a operação
assíncrona ainda não terminou) ou "resolvida" (quando a
operação assíncrona terminou com sucesso).

• setTimeout: a função setTimeout é usada para agendar

uma função para ser executada após um determinado
atraso (em milissegundos).
• resolve: a função resolve é usada para definir o valor de
uma Promise como resolvido (ou seja, o valor assíncrono
está disponível). A função resolve é usada dentro do
callback fornecido ao construtor Promise e é passada
como argumento para a função de retorno (que recebe
o valor assíncrono quando a operação assíncrona
termina).

Aqui vai uma explicação passo a passo do último código

que vimos:

1. A função operacaoAssincrona é definida como uma

função assíncrona. Dentro dela, é criada uma nova
Promise, que representa um valor assíncrono que pode
estar disponível no futuro.

2. A função setTimeout é usada para simular uma

operação assíncrona com um atraso de 1000
milissegundos (ou seja, 1 segundo).

3. Dentro do callback do setTimeout, a função resolve é

chamada com o argumento "resultado da operação
assíncrona", que representa o valor assíncrono que a
Promise deve retornar quando estiver resolvida.

48
 CODING_JAVASCRIPT 4
UNIDADE 6

4. Dentro do callback do setTimeout, a função resolve é

chamada com o argumento "resultado da operação
assíncrona", que representa o valor assíncrono que a
Promise deve retornar quando estiver resolvida.

5. A Promise é retornada pela função

operacaoAssincrona, que é resolvida com o valor
"resultado da operação assíncrona" após 1 segundo.
6. A função minhaFuncao é definida como uma função
assíncrona. Dentro dela, a função operacaoAssincrona
é chamada usando a palavra-chave await, o que faz
com que a execução aguarde a resolução da Promise
retornada por operacaoAssincrona.

7. Quando a Promise é resolvida, o valor retornado é

atribuído à constante resultado.
8. O valor de resultado é então impresso no console
usando console.log.

Dessa forma, a função minhaFuncao espera que a

operação assíncrona dentro de operacaoAssincrona
termine antes de continuar, o que é garantido pelo uso da
palavra-chave await. Isso permite que o valor assíncrono
seja recuperado e usado de forma síncrona na função
minhaFuncao.

49
 CODING_JAVASCRIPT 4
UNIDADE 6

Exercícios

Vamos à prática!

Com a conclusão desta unidade, você adquiriu um

conhecimento valioso para trabalhar com assincronia no
JavaScript. Agora é hora de aplicar o que aprendeu e criar
seu próprio Código!
Crie um novo arquivo chamado "Aula25-Async-Await.js" e
experimente aplicar e modificar o código visto aqui.
Lembre-se, um bom programador não apenas segue
tutoriais, mas também tem uma mente ativa para criar
soluções únicas e eficientes. Coloque seu conhecimento em
prática e continue explorando as possibilidades do
JavaScript assíncrono!

50
 CODING_JAVASCRIPT 4
UNIDADE 6

Conclusão

Nesta unidade aprendemos sobre o uso do Async/Await no

JavaScript, e como ele pode ser usado para escrever
códigos assíncronos de maneira mais limpa e legível.

Vimos que as funções assíncronas podem ser declaradas

com a palavra-chave "async" e que a execução assíncrona
pode ser pausada com a palavra-chave "await". Além disso,
entendemos que as Promises são a base do Async/Await, e
aprendemos como trabalhar com elas.

Também aprendemos a lidar com erros em funções

assíncronas e vimos como aplicar o conhecimento adquirido
em exemplos práticos.

Por fim, com a aplicação do Async/Await, o JavaScript

torna-se mais flexível e poderoso, permitindo que o
desenvolvedor escreva códigos que realizam tarefas
complexas sem bloquear a execução do programa.

Com este conhecimento, você está pronto para explorar

ainda mais as possibilidades do JavaScript assíncrono e criar
aplicações mais eficientes e escaláveis!

51
 CODING_JAVASCRIPT 4

UNIDADE

TRY / CATCH

52
 CODING_JAVASCRIPT 4
UNIDADE 7

Try / Catch
Introdução ao Try/Catch
O Try/Catch é uma estrutura de controle
usada em linguagens de programação
para lidar com erros e exceções em um
código. Ele permite que o programa tente
executar uma seção de código que pode
potencialmente gerar um erro, e caso isso
ocorra, ele é capaz de "capturar" a
exceção e tratá-la de forma adequada,
sem interromper a execução do programa.

Essa estrutura é muito importante em qualquer linguagem

de programação, já que, em algum momento, é provável
que o programa encontre um erro inesperado. Usando o
Try/Catch, o programador pode lidar com esses erros de
forma mais segura e previsível, melhorando a qualidade e a
confiabilidade do código.
A estrutura do Try/Catch é simples: o código que pode
gerar um erro é colocado dentro de um bloco Try, seguido
por um ou mais blocos Catch que serão executados caso
uma exceção seja lançada. Dentro do bloco Catch, é
possível definir como tratar a exceção, como exibir uma
mensagem de erro, salvar um log, ou tentar corrigir o
problema automaticamente.

Além disso, é possível usar o bloco Finally após o bloco

Catch, que será executado independentemente se ocorrer
ou não uma exceção. Isso pode ser útil para garantir que
recursos sejam liberados corretamente, mesmo em caso de
erro.

Ainda, existem outras palavras-chave que podem ser

usadas em conjunto com Try/Catch, como Throw e
Try/Catch aninhados, que oferecem mais controle e
personalização do tratamento de erros.

53
 CODING_JAVASCRIPT 4
UNIDADE 7

Utilizando Try/Catch

No JavaScript, a estrutura do Try/Catch é semelhante à de

outras linguagens de programação. Podemos envolver um
trecho de código que pode gerar uma exceção em um
bloco Try, e definir um bloco Catch para lidar com a
exceção, como no exemplo abaixo:

Nesse caso, se ocorrer uma exceção durante a divisão, a

mensagem de erro será exibida no console.

Outro exemplo de uso do Try/Catch no JavaScript é com

chamadas de API. Quando fazemos uma chamada a uma
API, é possível que ocorra um erro, como uma resposta
inválida ou um servidor indisponível. Para lidar com esses
erros, podemos envolver a chamada da API em um bloco
Try, e definir um bloco Catch para lidar com a exceção,
como no exemplo abaixo:

Nesse caso, se ocorrer um erro durante a chamada da API,

a mensagem de erro será exibida no console.
Além disso, é possível usar o bloco Finally no JavaScript, que
será executado independentemente se ocorrer ou não uma
exceção, como no exemplo na pagina seguinte.

54
 CODING_JAVASCRIPT 4
UNIDADE 7

Nesse caso, a mensagem 'Fim da operação.' será exibida no

console, independentemente se ocorrer uma exceção ou
não.

Em resumo, o Try/Catch é uma estrutura de controle muito

útil no JavaScript, que permite lidar de forma eficaz e segura
com exceções e erros em um código, garantindo a robustez
e a confiabilidade do programa.

55
 CODING_JAVASCRIPT 4
UNIDADE 7

Exemplos práticos de como implementar Try/Catch

em diferentes situações

1. Divisão por zero:

Nesse caso, se o valor de num2 for 0, uma exceção será

lançada durante a divisão. O bloco Catch irá capturar a
exceção e exibir uma mensagem de erro.

2. Acesso a um elemento de um array inexistente:

Nesse caso, se o índice index estiver fora do intervalo do

array, uma exceção será lançada ao tentar acessar o
elemento correspondente. O bloco Catch irá capturar a
exceção e exibir uma mensagem de erro.

3. Chamada de uma API com erro:

Nesse caso, se a chamada da API resultar em um erro,

como uma resposta inválida ou um servidor indisponível,
uma exceção será lançada. O bloco Catch irá capturar
a exceção e exibir uma mensagem de erro.
56
 CODING_JAVASCRIPT 4
UNIDADE 7

Exercícios

Vamos à prática!

Crie um arquivo chamado "Aula26-Try-Catch.js" e realize os

seguintes exercicios:

1. Escreva um programa que solicite ao usuário que digite

dois números e, em seguida, divida o primeiro pelo
segundo. Use um bloco Try/Catch pC lidar com a
possibilidade de divisão por zero. Se ocorrer uma
exceção, exiba uma mensagem de erro apropriada
para o usuário.
2. Escreva uma função que receba um número como
entrada e tente converter o valor para um número
inteiro. Use um bloco Try/Catch para lidar com a
possibilidade de entrada inválida. Se ocorrer uma
exceção, retorne o valor null.

57
 CODING_JAVASCRIPT 4
UNIDADE 7

Conclusão

Nesta unidade, aprendemos sobre o Try/Catch, uma

técnica de programação que permite lidar com exceções e
erros em nosso código de maneira adequada. Vimos que o
Try/Catch consiste em um bloco Try que envolve o código
que pode gerar exceções, e um bloco Catch que lida com
a exceção caso ela ocorra.

Aprendemos que o Try/Catch pode ser usado em diferentes

situações, como divisão por zero, acesso a elementos de um
array inexistente, conversão de tipos inválidos e chamadas
de APIs com erro. Vimos também que o Try/Catch é
especialmente útil em linguagens como o JavaScript, onde
muitos erros podem ocorrer durante a execução do código.
Por fim, vimos alguns exemplos práticos de como
implementar o Try/Catch em diferentes situações. É
importante ressaltar que a utilização adequada do
Try/Catch pode tornar nosso código mais robusto e
confiável, além de tornar as mensagens de erro mais
compreensíveis para o usuário final.

58
 CODING_JAVASCRIPT 4

UNIDADE

SPREAD, REST &

IMPORTAÇÕES

59
 CODING_JAVASCRIPT 4
UNIDADE 8

Spread, Rest & Importações

Introdução ao Spread Operator
O Spread Operator é um recurso do JavaScript que permite
espalhar os elementos de um objeto ou array em outro
objeto ou array. Ele é representado pelos três pontos (...) e
pode ser usado para tornar o código mais conciso e legível,
além de ajudar a evitar a repetição de código.
Em objetos, o Spread Operator é usado para criar uma
cópia de um objeto existente e adicionar novos elementos a
ele, sem modificar o objeto original. Por exemplo:

Nesse exemplo, o objeto ‘pessoa’ foi copiado e um novo

elemento ‘endereco’ foi adicionado ao objeto
pessoaComEndereco usando o Spread Operator.

Em arrays, o Spread Operator é usado para criar uma cópia

de um array existente e adicionar novos elementos a ele,
sem modificar o array original. Por exemplo:

Nesse exemplo, o array numeros foi copiado e um novo

elemento 0 foi adicionado ao array numerosComZero
usando o Spread Operator.
Além disso, o Spread Operator também pode ser usado
para combinar vários objetos ou arrays em um único objeto
ou array. Por exemplo:

60
 CODING_JAVASCRIPT 4
UNIDADE 8

Nesse exemplo, os arrays numeros1 e numeros2 foram

combinados em um único array numerosCombinados
usando o Spread Operator.

Entendendo o conceito de Rest Parameters

O Rest Parameter é um recurso do JavaScript que permite
passar um número variável de argumentos para uma função
usando três pontos (...) antes do último parâmetro da
função.
Com o Rest Parameter, podemos escrever funções que
aceitam um número variável de argumentos sem precisar
especificar cada argumento individualmente na assinatura
da função. Em vez disso, podemos usar um único parâmetro
para capturar todos os argumentos adicionais e trabalhar
com eles como um array dentro da função.
Por exemplo, vamos supor que queremos criar uma função
que some vários números. Usando o Rest Parameter,
podemos escrever a função da seguinte forma:

Nessa função, usamos o Rest Parameter ...numeros para

capturar todos os argumentos adicionais passados para a
função e armazená-los em um array chamado numeros. Em
seguida, usamos um loop for para percorrer o array e somar
todos os números.

61
 CODING_JAVASCRIPT 4
UNIDADE 8

Dessa forma, podemos chamar a função soma passando

qualquer número de argumentos que quisermos, e a função
irá somá-los todos. Por exemplo:

Como podemos ver, o Rest Parameter simplifica o código,

pois nos permite criar funções que aceitam um número
variável de argumentos sem precisar especificar cada
argumento individualmente na assinatura da função. Além
disso, o uso do Rest Parameter pode tornar o código mais
legível e fácil de entender.
Mas e então, qual devemos escolher?
O Spread Operator e o Rest Parameter são recursos
relacionados do JavaScript que usam a mesma sintaxe de
três pontos (...), mas têm comportamentos diferentes.
O Spread Operator é usado para expandir um objeto
iterável em elementos individuais. Isso significa que podemos
usar o Spread Operator para "espalhar" os elementos de um
array, por exemplo, em argumentos individuais de uma
função. Também podemos usar o Spread Operator para
mesclar vários objetos em um único objeto.

Por outro lado, o Rest Parameter é usado para capturar um

número variável de argumentos em uma única variável. Isso
significa que podemos usar o Rest Parameter para criar
funções que aceitam um número variável de argumentos
sem precisar especificar cada argumento individualmente
na assinatura da função.

62
 CODING_JAVASCRIPT 4
UNIDADE 8

Em geral, devemos usar o Spread Operator quando

queremos "espalhar" os elementos de um objeto iterável em
elementos individuais, como quando queremos passar os
elementos de um array como argumentos para uma função
ou mesclar vários objetos em um único objeto.

Por outro lado, devemos usar o Rest Parameter quando

queremos capturar um número variável de argumentos em
uma única variável, como quando queremos criar funções
que aceitam um número variável de argumentos sem
precisar especificar cada argumento individualmente na
assinatura da função.

Como importar e exportar módulos em JavaScript

Para importar módulos em JavaScript, podemos usar a

sintaxe de importação/exportação. Para importar um
módulo, podemos usar a palavra-chave import, seguida
pelo nome do módulo que queremos importar, e, em
seguida, usar a palavra-chave from seguida pelo caminho
do arquivo onde o módulo está definido.

Aqui está um exemplo:

Isso importa as funções soma e subtracao do arquivo

aritmetica.js. Existem duas maneiras principais de exportar
módulos em JavaScript: a exportação padrão e a
exportação nomeada.

Na exportação padrão, podemos exportar uma única

entidade de um módulo, geralmente uma função ou um
objeto, como padrão. Isso significa que, ao importar o
módulo, não precisamos usar chaves para desestruturar a
entidade exportada. Podemos usar a palavra-chave export
default para exportar a entidade padrão.

63
 CODING_JAVASCRIPT 4
UNIDADE 8

Como importar e exportar módulos em JavaScript

Aqui está um exemplo de exportação padrão:

Na exportação nomeada, podemos exportar várias

entidades de um módulo, geralmente funções ou objetos,
com nomes específicos. Isso significa que, ao importar o
módulo, precisamos usar chaves para desestruturar as
entidades exportadas. Podemos usar a palavra-chave export
para exportar as entidades nomeadas.
Aqui está um exemplo de exportação nomeada:

Usando a exportação padrão e nomeada, podemos tornar

nossos módulos reutilizáveis em diferentes partes do nosso
aplicativo e em outros projetos.

64
 CODING_JAVASCRIPT 4
UNIDADE 8

Exercícios
Vamos à prática! Crie um arquivo chamado "Aula27-
Spread-Rest-Import.js" e faça os seguintes exercicios:

1. Crie uma função que recebe dois arrays como

argumentos e retorna um novo array que contém
todos os elementos dos dois arrays usando o operador
spread.

2. Crie uma função que recebe um número variável de

argumentos usando o parâmetro Rest, e retorna a
soma de todos os argumentos.

3. Crie um arquivo de módulo em JavaScript que exporta

uma função que recebe um número e retorna o seu
dobro. Importe a função em outro arquivo e use-a
para calcular o dobro de um número.
4. Crie um arquivo de módulo em JavaScript que exporta
duas funções: uma para converter Celsius em
Fahrenheit e outra para converter Fahrenheit em
Celsius. Importe essas funções em outro arquivo e use-
as para converter uma temperatura de Celsius para
Fahrenheit e de Fahrenheit para Celsius.

5. Crie uma função que recebe um objeto como

argumento e retorna uma cópia desse objeto com
uma propriedade adicional. Use o operador Spread
para criar a cópia do objeto e adicionar a nova
propriedade.
6. Crie um objeto com as propriedades nome e email, e
um array de objetos com as propriedades produto e
preco. Crie uma função que recebe o objeto e o array
como argumentos, e retorna uma string com a
mensagem "Olá [nome], seu carrinho de compras
contém [quantidade] produtos com um total de [total]
reais". Use o operador Spread para desestruturar as
propriedades do objeto e os valores do array, e a
função reduce para calcular o total dos preços.

65
 CODING_JAVASCRIPT 4
UNIDADE 8

Conclusão

Nesta unidade, aprendemos sobre o Spread, Rest e

importações em JavaScript. O operador Spread é uma
ferramenta poderosa para criar cópias de objetos e arrays,
combinar valores de arrays e objetos em um único objeto,
ou passar argumentos de uma função para outra. Já o Rest
permite que uma função aceite um número variável de
argumentos, tornando o código mais flexível e legível.
Além disso, vimos como importar e exportar módulos em
JavaScript, que é uma funcionalidade importante para a
modularização do código e para a reutilização de funções
e classes em diferentes partes do projeto.

Ao final da unidade, compreendemos as diferenças entre a

importação padrão e a importação nomeada, e como
utilizar cada uma delas.
A importação padrão é útil para importar uma única
função ou classe de um módulo, enquanto a importação
nomeada é mais adequada para importar várias funções
ou classes de um mesmo módulo.

Em resumo, a utilização do Spread, Rest e importações é

uma prática fundamental para tornar o código mais
eficiente, modular e escalável em projetos JavaScript.

66
 CODING_JAVASCRIPT 4

UNIDADE

DESTRUCTURING

67
 CODING_JAVASCRIPT 4
UNIDADE 9

Destructuring
Destructuring é uma funcionalidade introduzida no
ECMAScript 6 (também conhecido como ES6 ou ES2015) do
JavaScript que permite desestruturar objetos e arrays em
variáveis individuais. Em outras palavras, é uma maneira
conveniente e concisa de extrair valores de um objeto ou
array e atribuí-los a variáveis distintas.

Antes da introdução do Destructuring, se você quisesse

acessar valores em um objeto ou array, geralmente
precisava fazer várias declarações de variáveis, cada uma
atribuindo um valor específico. Por exemplo, para acessar a
propriedade "nome" de um objeto "pessoa", você precisaria
escrever algo como:

Com o Destructuring, você pode fazer isso de maneira mais

concisa e elegante, atribuindo a propriedade "nome"
diretamente a uma variável com o mesmo nome:

Além disso, o Destructuring permite desestruturar valores

aninhados em objetos e arrays, o que pode ser
especialmente útil para acessar dados em objetos
complexos ou retornar múltiplos valores de uma função.

Por exemplo, você pode usar o Destructuring para extrair

valores de um objeto com uma estrutura aninhada como
este:

68
 CODING_JAVASCRIPT 4
UNIDADE 9

Nesse exemplo, a propriedade "nome" do objeto "pessoa" é

atribuída à variável "nome" e a propriedade "cidade" do
objeto aninhado "endereco" é atribuída à variável "cidade".

Também é possível desestruturar arrays em variáveis

individuais. Por exemplo, você pode extrair valores de um
array em variáveis individuais como este:

Nesse exemplo, os valores 1, 2 e 3 do array são atribuídos a

variáveis individuais "x", "y" e "z", respectivamente.

Além disso, é possível usar o Destructuring para atribuir

valores padrão a variáveis. Isso é especialmente útil quando
o valor de uma variável pode ser indefinido ou nulo. Por
exemplo:

Nesse exemplo, se o objeto "pessoa" não tiver uma

propriedade "nome" ou "idade", as variáveis "nome" e
"idade" receberão valores padrão de "Desconhecido" e 0,
respectivamente.
Outra vantagem do Destructuring é que ele pode ser usado
para desestruturar parâmetros de função. Isso pode tornar a
chamada da função mais legível e expressiva. Por exemplo:

69
 CODING_JAVASCRIPT 4
UNIDADE 9

Uso avançado de Destructuring

Destructuring é uma funcionalidade poderosa do JavaScript

que permite desestruturar objetos e arrays em variáveis
individuais. No entanto, o seu poder não se limita apenas a
isso.

O Destructuring pode ser combinado com outras

funcionalidades modernas do JavaScript, como operadores
spread, rest e outras, para criar código mais conciso e
expressivo.
Neste texto, veremos como usar o Destructuring de forma
avançada e como tirar o máximo proveito dessa
funcionalidade.

O primeiro recurso avançado que podemos combinar com

o Destructuring é o operador spread. O operador spread
pode ser usado para extrair as propriedades de um objeto
em outro objeto. Por exemplo:

Nesse exemplo, o operador spread é usado para extrair as

propriedades do objeto "pessoa" em um novo objeto
"novaPessoa". O novo objeto também recebe uma nova
propriedade "telefone". Esse código é equivalente a fazer
uma cópia do objeto "pessoa" e adicionar uma nova
propriedade.
70
 CODING_JAVASCRIPT 4
UNIDADE 9

O operador spread também pode ser usado em conjunto

com o Destructuring para extrair propriedades específicas de
um objeto e atribuí-las a variáveis individuais. Por exemplo:

Nesse exemplo, o operador spread é usado em conjunto

com o Destructuring para extrair a propriedade "nome" do
objeto "pessoa" e atribuí-la à variável "nome". As outras
propriedades do objeto são atribuídas a uma variável
"outrasPropriedades". Isso pode ser útil para extrair
propriedades específicas de um objeto e trabalhar com elas
separadamente.

Outro recurso avançado do JavaScript que pode ser

combinado com o Destructuring é o operador rest. O
operador rest pode ser usado para extrair elementos de um
array e atribuí-los a uma variável. Por exemplo:

Nesse exemplo, o operador rest é usado para extrair os

elementos 3, 4 e 5 do array e atribuí-los à variável "resto". Isso
é útil para trabalhar com arrays dinâmicos e desconhecidos.

O operador rest também pode ser usado em conjunto com

o Destructuring para extrair os parâmetros restantes de uma
função.

Veja o exemplo na página seguinte:

71
 CODING_JAVASCRIPT 4
UNIDADE 9

Nesse exemplo, a função "calcularMedia" espera dois

parâmetros, "a" e "b", e um número arbitrário de parâmetros
restantes. O operador rest é usado para extrair os
parâmetros restantes e atribuí-los à variável "resto".
Isso permite que a função receba um número variável de
argumentos e trate-os de forma dinâmica. O operador
reduce é usado para somar os valores dos elementos do
array "resto" e a média é calculada dividindo a soma pelo
número total de elementos passados para a função. Essa é
uma forma mais elegante e concisa de lidar com um
número variável de argumentos em uma função.

Outra funcionalidade do JavaScript moderno que pode ser

combinada com o Destructuring é a atribuição via
desestruturação. Essa funcionalidade permite atribuir valores
a variáveis usando o Destructuring. Por exemplo:

Nesse exemplo, as variáveis "nome" e "idade" são

declaradas e em seguida são atribuídas com os valores
correspondentes do objeto "pessoa". O Destructuring é
envolvido por parênteses para que a atribuição funcione
corretamente.

Por fim, o Destructuring pode ser usado para simplificar a

escrita de códigos que envolvem objetos aninhados.
Veja o exemplo na pagina seguinte.
72
 CODING_JAVASCRIPT 4
UNIDADE 9

Nesse exemplo, o Destructuring é usado para extrair a

propriedade "cidade" do objeto "endereco" que está dentro
do objeto "pessoa". Isso permite acessar facilmente uma
propriedade aninhada sem precisar escrever todo o
caminho até ela.
Em resumo, o Destructuring é uma funcionalidade poderosa
do JavaScript que permite desestruturar objetos e arrays em
variáveis individuais. Quando combinado com outras
funcionalidades modernas do JavaScript, como operadores
spread, rest e atribuição via desestruturação, o
Destructuring pode tornar o código mais conciso, expressivo
e elegante.

O uso avançado do Destructuring é essencial para se tornar

um programador JavaScript mais eficiente e produtivo.

73
 CODING_JAVASCRIPT 4
UNIDADE 9

Exercícios

Agora crie um arquivo chamado "Aula28-Desctructuring.js" e

pratique os exercicios a seguir! Lembre-se de utilizar oque foi
aprendido aqui nesta unidade!

1. Crie uma função que recebe um objeto com as

propriedades nome, idade e email e retorna apenas o
valor da propriedade email.
2. Crie uma função que recebe um array com as notas
de um aluno e retorna um objeto com as propriedades
media e situacao, sendo que media é a média
aritmética das notas e situacao é "Aprovado" se a
média for maior ou igual a 7, "Reprovado" caso
contrário.

3. Dado o seguinte array de objetos, crie uma função que

recebe o array e retorna apenas o nome e a idade das
pessoas do sexo masculino.

4. Dado o seguinte objeto, Crie uma função que recebe

o objeto e retorna uma string com a seguinte
mensagem: "O carro é um Fusca azul de 1970 da
marca Volkswagen".

74
 CODING_JAVASCRIPT 4
UNIDADE 9

Exercícios

5. Dado o seguinte array, Crie uma função que recebe o

array e retorna um novo array com os valores
dobrados. Use Destructuring para extrair os valores do
array e para criar o novo array com os valores
dobrados.

75
 CODING_JAVASCRIPT 4
UNIDADE 9

Conclusão

Nesta unidade, vimos sobre o Destructuring em JavaScript,

uma funcionalidade poderosa que permite desestruturar
objetos e arrays em variáveis individuais. Vimos como usar o
Destructuring para tornar o código mais conciso, expressivo
e elegante, além de ser capaz de extrair apenas as
informações necessárias de um objeto ou array.

Aprendemos que o Destructuring pode ser combinado com

outras funcionalidades modernas do JavaScript, como
operadores spread, rest e atribuição via desestruturação.
Vimos como usar o operador spread para criar novos objetos
ou arrays com base em outros objetos ou arrays; como usar
o operador rest para receber um número variável de
argumentos em uma função; como usar a atribuição via
desestruturação para atribuir valores a variáveis usando o
Destructuring.

Vimos também que o Destructuring pode ser usado para

simplificar a escrita de códigos que envolvem objetos
aninhados. Isso permite acessar facilmente uma propriedade
aninhada sem precisar escrever todo o caminho até ela.

Por fim, concluímos que o uso avançado do Destructuring é

essencial para se tornar um programador JavaScript mais
eficiente e produtivo. Quando combinado com outras
funcionalidades modernas do JavaScript, o Destructuring
pode ser uma ferramenta poderosa para melhorar a
qualidade e legibilidade do seu código.

76
 CODING_JAVASCRIPT 4

UNIDADE

PROJETO
CALCULADORA

77
 CODING_JAVASCRIPT 4
UNIDADE 10

Projeto calculadora
Parabéns por concluir este curso introdutório de JavaScript!
Chegar até aqui não foi fácil, mas você se dedicou e
aprendeu uma das linguagens de programação mais
importantes e versáteis do mercado!

É importante destacar que o aprendizado em programação

é um processo contínuo e que sempre há mais a aprender e
a aprimorar. Por isso, continue se desafiando e buscando
novos conhecimentos e habilidades.

Agora, como um último desafio, gostaria de incentivá-lo a

aplicar tudo o que aprendeu na construção de uma
calculadora utilizando a Programação Orientada a Objetos.
Crie um arquivo chamado "Aula29-Calculadora.js" e importe-
o com a tag script no arquivo index.html.
Tente produzir sozinho uma calculadora com P.O.O,
utilizando todos os conceitos que aprendeu durante o curso.
Se você sentir dificuldades, não desanime! Lembre-se de
que a prática é fundamental para aprimorar suas
habilidades de programação.
Caso não consiga concluir a calculadora com P.O.O, não se
preocupe! Em nossa próxima página, forneceremos um
passo a passo para ajudá-lo a criar a calculadora utilizando
a programação tradicional. Mas lembre-se: o objetivo é que
você se desafie a aplicar o que aprendeu utilizando a
programação orientada a objetos.

Lembre-se de que a jornada do aprendizado é longa e que,

muitas vezes, os maiores desafios são os que trazem as
maiores recompensas. Continue aprimorando suas
habilidades e explorando as possibilidades infinitas que a
programação pode oferecer. Parabéns novamente por
chegar até aqui e boa sorte em sua jornada de
aprendizado em programação!

78
 CODING_JAVASCRIPT 4
UNIDADE 10

Passo 1: Definindo a classe Calculator:

O primeiro passo é definir a classe Calculator, que irá conter
as funções da calculadora. Para fazer isso, crie um novo
arquivo JavaScript e adicione o seguinte código:

Nesse código, definimos a classe Calculator com quatro

funções: add, subtract, multiply e divide. Também
adicionamos um construtor que define uma variável total
com valor inicial 0.

79
 CODING_JAVASCRIPT 4
UNIDADE 10

Passo 2: Pedindo ao usuário para escolher uma

operação

Agora, vamos pedir ao usuário para escolher uma operação

a ser realizada. Adicione o seguinte código após a definição
da classe Calculator:

Nesse código, criamos uma nova instância da classe

Calculator e pedimos ao usuário para escolher uma
operação. Se a operação escolhida for uma das quatro
opções válidas (+, -, * ou /), continuamos com o código.
Caso contrário, exibimos uma mensagem de erro e pedimos
ao usuário para tentar novamente.

80
 CODING_JAVASCRIPT 4
UNIDADE 10

Passo 3: Pedindo ao usuário para inserir números

Agora, vamos pedir ao usuário para inserir os números a

serem calculados. Adicione o seguinte código após o código
do Passo 2:

Nesse código, pedimos ao usuário para inserir dois números e

os armazenamos nas variáveis number1 e number2. Também
verificamos se os valores inseridos são números válidos e
exibimos uma mensagem de erro se não forem.

81
 CODING_JAVASCRIPT 4
UNIDADE 10

Passo 4: Realizando a operação escolhida pelo

usuário

Agora, vamos realizar a operação escolhida pelo usuário

com base nos números inseridos. Adicione o seguinte
código após o código do Passo 3:

Nesse código, usamos um switch para selecionar a

operação a ser realizada com base na escolha do usuário.

Cada caso executa a operação correspondente da classe

Calculator e armazena o resultado na variável result. Se a
operação escolhida pelo usuário não for uma das opções
válidas, exibimos uma mensagem de erro.

Por fim, exibimos o resultado da operação usando o

comando alert.

82
 CODING_JAVASCRIPT 4
UNIDADE 10

Passo 5: Adicionando verificações extras

Para adicionar algumas verificações extras, vamos alterar a

função divide da classe Calculator para verificar se o número
inserido é um número válido e diferente de zero. Adicione o
seguinte código dentro da classe Calculator:

Nesse código, verificamos se o número inserido é um número

válido e, em seguida, verificamos se ele é igual a zero antes
de realizar a operação de divisão. Se o número inserido não
for válido ou igual a zero, exibimos uma mensagem de erro
apropriada.

83
 CODING_JAVASCRIPT 4
UNIDADE 10

Passo 6: Testando a calculadora

Agora que nossa calculadora está completa, podemos testá-

la para verificar se tudo está funcionando como esperado.

Execute o arquivo JavaScript no navegador e insira valores

válidos e inválidos para cada uma das operações. Verifique
se as mensagens de erro são exibidas quando necessário e se
os resultados estão corretos para as operações realizadas.
Parabéns! Você criou uma calculadora em JavaScript
utilizando programação orientada a objetos com
verificações e solicitações de entrada do usuário via prompt.

84