CODING_JAVASCRIPT 3

CODING_JAVASCRIPT 1

CODING
PROGRAMAÇÃO EM JAVASCRIPT

3 CODING
JAVASCRIPT
 CODING_JAVASCRIPT 3

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 3

INDICE
• Conteúdo deste modulo

• Objetivos das unidades

• Unidade 1: Introdução aos Métodos

• Unidade 2: Métodos de um Array

• Unidade 3: Métodos de um Number

• Unidade 4: Métodos de uma String

• Unidade 5: Functions

• Unidade 6: Funções Anônimas & Arrow Functions

• Unidade 7: Map. Filter & Reduce

• Unidade 8: Introdução ao HTML e CSS

• Unidade 9: Document Object Model (D.O.M)

• Unidade 10: Manipulação de D.O.M com JavaScript

3
 CODING_JAVASCRIPT 3
CONTEÚDO

CONTEÚDO
Chegamos ao 3º modulo do nosso curso de Programação
em javaScript!

Ao longo deste módulo você aprenderá sobre métodos

em JavaScript, funções e como escrevê-las de diferentes
maneiras, incluindo arrow functions, funções com nomes e
funções anônimas. Além disso, você explorará a
introdução ao HTML e CSS, duas linguagens de marcação
essenciais para criar páginas web e controlar a aparência
e o layout dos elementos na tela.

Mas a programação vai muito além de apenas escrever

códigos. É sobre resolver problemas, pensar de forma
criativa e trabalhar em equipe. É sobre ter paixão por
aprender e fazer coisas incríveis. É sobre ter a coragem de
cometer erros, de tentar novamente e de nunca desistir!

Não importa se você é iniciante ou se já tem alguma

experiência, este curso é para todos aqueles que querem
aprender e evoluir. Com dedicação e trabalho duro, você
poderá alcançar seus objetivos e criar aplicações incríveis.

Lembre-se de manter-se motivado e sempre acreditar em

si mesmo. O sucesso é uma jornada, não um destino, e
cada passo que você der, por menor que seja, é muito
importante!

4
 CODING_JAVASCRIPT 3

UNIDADE

OBJETIVOS
1 Introdução aos
métodos
• Entender o conceito de métodos e como
funcionam
OBJETIVOS

UNIDADE

OBJETIVOS
• Fornecer uma compreensão clara dos métodos

2 Métodos de
um Array
de um array e sua utilização;
• Apresentar as principais funcionalidades dos
métodos de um array
UNIDADE

OBJETIVOS
• Fornecer uma compreensão clara dos métodos

3 Métodos de
um Number
de um number e sua utilização;
• Apresentar as principais funcionalidades dos
métodos de um number
UNIDADE

OBJETIVOS

• Fornecer uma compreensão clara dos métodos

4 Métodos de
uma String
de uma string e sua utilização;
• Apresentar as principais funcionalidades dos
métodos de uma string

• Compreender o conceito de funções e sua

UNIDADE

OBJETIVOS

importância no JavaScript;
5 Functions • Aprender a criar funções e passar parâmetros
para elas;
• Aprender a usar funções para organizar e
reutilizar código;
UNIDADE

OBJETIVOS

Funções • Entender o uso de funções anônimas e arrow

6 anônimas e
arrow functions
functions;
• Entender a importancia e de quando utiliza-las
UNIDADE

OBJETIVOS

• Aprendar como utilizar cada metodo;

7 Map, filter e
reduce
• Ensinar técnicas para percorrer, filtrar, classificar
e reduzir arrays
UNIDADE

OBJETIVOS

8 Introdução ao
HTML e CSS
• Aprender conceitos básicos de HTML e CSS
UNIDADE

OBJETIVOS

Document
9 Object Model
(D.O.M)
• Aprender o que é e para que serve o D.O.M, e
entender sua estrutura
UNIDADE

OBJETIVOS

Manipulação • Entender como manipular o D.O.M com JS;

10 de D.OM com
JavaScript
• Aprender a modificar elementos, classes e ID de
um HTML com a manipulação de D.O.M

5
 CODING_JAVASCRIPT 3

UNIDADE

INTRODUÇÃO
AOS MÉTODOS

6
 CODING_JAVASCRIPT 3
UNIDADE 1

Introdução aos Métodos

Em JavaScript, um método é uma função associada a um
objeto ou protótipo. É uma ação que pode ser executada
em um objeto para realizar uma tarefa específica.

Alguns exemplos incluem o método .toString() em objetos

do tipo string ou o método .push() em objetos do tipo array.
Os métodos permitem que você modifique ou extraia
informações de um objeto de forma organizada e
reutilizável.

Além disso, os métodos em JavaScript são uma parte

fundamental da programação orientada a objetos (OOP,
sigla em inglês), que é um paradigma de programação que
permite representar conceitos do mundo real como objetos
e seus métodos.

Isso permite uma organização mais clara e estruturada do

código, tornando-o mais fácil de ser entendido e mantido.

Os métodos também são úteis para realizar tarefas comuns

de forma mais eficiente, evitando a necessidade de
escrever código repetitivo.

Além disso, eles também fornecem uma maneira de

esconder a implementação detalhada de uma
determinada ação, tornando o código mais simples e
modular.

Outra vantagem dos métodos em JavaScript é que eles

podem ser aplicados em diferentes tipos de objetos.

Por exemplo, o método .slice() pode ser usado tanto em

objetos do tipo string quanto em objetos do tipo array. Isso
permite que você reutilize o código em diferentes contextos
e facilita a manutenção do código.

7
 CODING_JAVASCRIPT 3
UNIDADE 1

Para usar um método em JavaScript, você precisa ter uma

referência a um objeto que o possua.

Por exemplo, para usar um método de string, você precisa

ter uma variável com uma string.

Em seguida, você pode chamar o método seguindo a

sintaxe de ponto (.) e passando os parâmetros necessários,
se houver.

Aqui está um exemplo de como usar o método

.toUpperCase() em uma string:

O método .toUpperCase() é um método de string em

JavaScript que converte todas as letras de uma string em
maiúsculas.

Ele não afeta números ou outros caracteres que não são

letras.

É importante destacar que ele não modifica a string original,

mas retorna uma nova string com as letras em maiúsculas.

Este método é útil quando você precisa padronizar a

capitalização de uma string, por exemplo, ao comparar
duas strings para verificar se são iguais, independentemente
da capitalização.

Além disso, também pode ser usado para exibir strings em

maiúsculas em algum tipo de saída, como títulos ou
cabeçalhos.

8
 CODING_JAVASCRIPT 3
UNIDADE 1

JavaScript oferece uma ampla variedade de métodos para

trabalhar com diferentes tipos de dados, como strings,
arrays, números, objetos, etc.
Esses métodos permitem realizar operações comuns de
maneira mais fácil e concisa, como formatar strings,
manipular arrays, trabalhar com números e muito mais.

Na próxima unidade, vamos abordar os principais métodos

de trabalho com strings, arrays e números em JavaScript.

Vamos aprender como trabalhar com strings usando

métodos como .toUpperCase(), .toLowerCase(), .indexOf() e
muitos outros.

Além disso, vamos explorar os métodos de manipulação de

arrays como .sort(), slice() e outros.
Finalmente, vamos ver como trabalhar com números
usando métodos como .toFixed(), .toPrecision(), .parseFloat()
e muitos outros.

Esses são apenas alguns exemplos dos métodos que existem

no JavaScript. A verdadeira potência dos métodos em
JavaScript é sua capacidade de simplificar tarefas comuns,
permitindo que você escreva código mais conciso e fácil de
manter.

Ao aprender os principais métodos de strings, arrays e

números, você estará bem preparado para aproveitar ao
máximo o poder dos métodos em JavaScript e tornar sua
programação mais eficiente e fácil.

9
 CODING_JAVASCRIPT 3
UNIDADE 1

Os métodos em JavaScript são uma ferramenta

fundamental para programadores de todos os níveis, e
existem muitas boas razões para usá-los em seu código. Aqui
estão algumas das principais vantagens de usar métodos
em JavaScript.

1. Simplificação do código: Métodos fornecem uma

maneira concisa e fácil de realizar tarefas comuns,
como manipulação de strings, conversão de números, e
manipulação de arrays. Em vez de escrever uma série
de instruções para realizar uma tarefa, você pode
encapsular essas instruções em um único método,
tornando o código mais legível e fácil de entender.

2. Reutilização de código: Ao criar métodos, você pode

reutilizá-los em vários pontos do seu código, evitando a
duplicação de código e tornando o código mais
enxuto. Isso também significa que, se precisar mudar o
comportamento de uma tarefa, você pode fazê-lo em
um único lugar, sem precisar procurar por todo o código
para atualizar a tarefa.

3. Melhoria da eficiência: Métodos foram otimizados para

realizar tarefas de maneira mais eficiente do que se
fossem escritos manualmente. Além disso, ao usar
métodos padronizados, você pode se beneficansar na
certeza de que eles foram testados e otimizados por
milhares de programadores ao longo do tempo.

4. Maior flexibilidade: Métodos em JavaScript podem ser

adaptados e personalizados para atender às suas
necessidades específicas, o que aumenta a flexibilidade
do seu código. Por exemplo, você pode criar um
método que aceite argumentos e se comporte de
maneira diferente com base nos valores passados para
ele.

10
 CODING_JAVASCRIPT 3
UNIDADE 1

5. Ajuda na manutenção: Ao usar métodos, você pode

garantir que seu código seja mais fácil de manter e
atualizar. Se precisar mudar o comportamento de uma
tarefa, você pode fazê-lo em um único lugar, sem
precisar procurar por todo o código para atualizar a
tarefa. Além disso, ao usar métodos padrão, você
pode se beneficiar na certeza de que eles foram
testados e aprovados por milhares de programadores
ao longo do tempo.

Além disso os métodos em JavaScript podem ser usados

em conjunto com outras estruturas de dados, como loops
e condicionais, para criar soluções mais complexas e
avançadas. Por exemplo, você pode usar um loop para
percorrer um array e, em cada iteração, usar um método
para manipular os dados dentro do array.

11
 CODING_JAVASCRIPT 3
UNIDADE 1

Conclusão

Nesta unidade, nós aprendemos o que são métodos em

JavaScript e por que eles são importantes. Vimos como eles
são usados para simplificar e aprimorar o nosso código,
tornando-o mais organizado e fácil de manter.

Métodos são funções específicas associadas a objetos que

podem ser chamadas e utilizadas para realizar tarefas
específicas, como manipular strings, arrays e números. Alguns
exemplos de métodos comuns incluem o toUppercase, que
converte uma string em letra maiúscula.
Além de tornar o código mais legível e fácil de entender, o
uso de métodos também pode ajudar a evitar erros comuns
e economizar tempo, já que eles já foram testados
previamente e otimizados.

12
 CODING_JAVASCRIPT 3

UNIDADE

MÉTODOS DE
UM ARRAY

13
 CODING_JAVASCRIPT 3
UNIDADE 2

Métodos de um Array
• push(): Adiciona um ou mais elementos ao final do array.

Como você pode ver no exemplo acima, o método push

pode adicionar um ou mais elementos ao final do array,
dependendo da quantidade de argumentos passados
para ele.
• pop(): Remove o último elemento de um array e retorna
esse elemento.

Como você pode ver no exemplo acima, o método pop

remove o último elemento do array e o retorna. O array
original é modificado como resultado, com a última
posição removida.

A variável "lastFruit" recebe o valor retornado pelo método

pop quando é chamado no array "fruits". Quando o
método pop é chamado, ele remove o último elemento do
array e o retorna. Neste caso, o último elemento do array
fruits é "orange", então ele é retornado e armazenado na
variável "lastFruit".
Portanto, quando você imprime o valor da variável
"lastFruit", você vê "orange".
14
 CODING_JAVASCRIPT 3
UNIDADE 2

• shift(): Remove o primeiro elemento de um array e

retorna esse elemento.

Como você pode ver no exemplo acima, o método "shift"

remove o primeiro elemento do array e o retorna. O array
original é modificado como resultado, com a primeira
posição removida.

• unshift(): Adiciona um ou mais elementos ao início do

array.

Como você pode ver no exemplo acima, o método unshift

adiciona o elemento "strawberry" ao início do array fruits.

• indexOf(): Retorna o primeiro índice em que um

elemento específico pode ser encontrado no array ou -1
se o elemento não estiver presente.

15
 CODING_JAVASCRIPT 3
UNIDADE 2

Como você pode ver no exemplo anterior, o método

indexOf retorna o primeiro índice do elemento "apple" no
array fruits, que é 1.

Como você pode ver, o método indexOf retorna -1,

indicando que o elemento "kiwi" não está presente no array
fruits.
O valor -1 retornado pelo método indexOf quando um
elemento específico não é encontrado em um array é
comumente usado para verificar se um elemento está
presente em um array ou não.
Aqui está um exemplo de como usar o valor -1 para verificar
a presença de um elemento:

Uma coisa bem legal que podemos fazer para concatenar o

valor ou mensagem de uma variavel em uma string é
fazendo o template literals.

As template literals são string delimitadas por crases (``) e

permitem inserir expressões diretamente dentro da string.
Você pode inserir variáveis dentro de template literals
usando a sintaxe ${expression}.

16
 CODING_JAVASCRIPT 3
UNIDADE 2

Voltando a explicação do exemplo anterior a variável fruit é

definida como "kiwi".

A condição fruits.indexOf(fruit) === -1) verifica se o elemento

"kiwi" está presente no array fruits ou não.

Se o elemento "kiwi" não estiver presente, o método indexOf

retornará -1, fazendo com que a primeira mensagem seja
exibida. Caso contrário, a segunda mensagem será exibida.

• slice(): O método slice é usado para retornar uma cópia

de uma porção de um array em uma nova array. Ele é
útil quando você precisa selecionar uma parte de um
array e trabalhar com ela como um novo array
separado.

A sintaxe é a seguinte:
array.slice( inicio, fim )

• inicio (opcional): Índice inicial para começar a cortar. Se

o índice inicial for negativo, ele será contado a partir do
final do array.

• fim (opcional): Índice final para terminar o corte. O item

com este índice não estará incluído na nova array
retornada. Se o índice final for negativo, ele será contado
a partir do final do array.

Neste exemplo, o método slice é usado para retornar uma

cópia dos itens do array fruits com índices 1 a 2 (banana e
cherry). A nova array retornada é armazenada em
slicedFruits.

17
 CODING_JAVASCRIPT 3
UNIDADE 2

• splice(): Adiciona ou remove elementos de um array e

retorna os elementos removidos.

O método splice é uma das funções mais versáteis e

poderosas de arrays em JavaScript. Ele permite que você
adicione ou remova elementos de um array, bem como
modifique os elementos existentes.

A sintaxe para o método splice é a seguinte:

array.splice(indice, quantidade, elementos)

• indice: o índice a partir do qual você deseja adicionar ou

remover elementos do array.
• quantidade (opcional): a quantidade de elementos que
você deseja remover a partir do índice especificado. Se
esse valor for omitido, todos os elementos a partir do
índice serão removidos.

• elementos (opcional): um ou mais elementos que você

deseja adicionar ao array a partir do índice especificado.

O método splice retorna uma array contendo os elementos

removidos do array original. Se nenhum elemento for
removido, o método retornará uma array vazia. Exemplo:

• forEach: é uma função de arrays em JavaScript que

permite que você execute uma função para cada
elemento de um array.
A sintaxe para o método forEach é a seguinte:

18
 CODING_JAVASCRIPT 3
UNIDADE 2

• currentValue: o valor atual do elemento sendo

processado no loop.
• index (opcional): o índice atual do elemento sendo
processado no loop.

• array (opcional): o array que está sendo percorrido.

Exemplo:

• sort: o método sort é uma função de arrays em JavaScript

que classifica os elementos de um array em ordem
crescente ou decrescente.

A sintaxe para o método sort é a seguinte:

19
 CODING_JAVASCRIPT 3
UNIDADE 2

• a e b são dois elementos consecutivos do array sendo

comparados.

• A função de comparação deve retornar um número

menor do que 0 se 'a' for menor do que 'b', 0 se "a" for igual
a "b", ou um número maior do que 0 se "a" for maior do
que "b".

20
 CODING_JAVASCRIPT 3
UNIDADE 2

Exercícios

Vamos à prática!
Crie um arquivo chamado "Aula15-Metodos-Array.js" e faça
os exercicios a seguir:

1. Adicione um novo elemento ao final de um array

existente e exiba o array resultante.

2. Remova o último elemento de um array existente e

exiba o elemento removido.
3. Remova o primeiro elemento de um array existente e
exiba o elemento removido.

4. Adicione um novo elemento ao início de um array

existente e exiba o array resultante.
5. Dado um array e um elemento, determine o primeiro
índice em que o elemento pode ser encontrado no
array. Se o elemento não estiver presente, exiba -1.

6. Dado um array, crie uma cópia de uma porção do

array (especificada por dois índices) e exiba a nova
array resultante.

7. Dado um array, adicione ou remova um ou mais

elementos do array (especificados por um índice
inicial e um número de elementos a serem removidos)
e exiba o array resultante.

8. Dado um array, execute uma função para cada

elemento do array e exiba o resultado.

9. Classifique um array de números em ordem crescente

e exiba o resultado.

21
 CODING_JAVASCRIPT 3
UNIDADE 2

Conclusão

Nesta unidade, aprendemos sobre diversos métodos

presentes em arrays em JavaScript, como push, pop, shift,
unshift, indexOf, slice, splice, forEach e sort.

Cada método tem uma função específica e pode ser

usado em diferentes situações para manipular arrays de
uma maneira eficiente e simplificada.

Além disso, aprendemos a importância de variáveis em

strings e sua utilização em JavaScript. Estes métodos são
ferramentas poderosas na programação em JavaScript e
podem ser aplicados em muitos projetos para solucionar
problemas complexos de uma forma mais simples.

22
 CODING_JAVASCRIPT 3

UNIDADE

MÉTODOS DE
UM NUMBER

23
 CODING_JAVASCRIPT 3
UNIDADE 3

Métodos de um Number

• toFixed(): o método toFixed() do objeto Number em

JavaScript é usado para retornar uma string
representando um número com uma quantidade
específica de casas decimais.

Ele é útil para formatar números com casas decimais para

exibição ou uso em cálculos.
A sintaxe do método é a seguinte:

number.toFixed(n);

Onde number é o número que você deseja formatar e "n" é

o número de casas decimais a serem incluídas na string
retornada.
Por exemplo:

Observe que o método toFixed() arredonda o número para

o número especificado de casas decimais. Portanto, é
possível que o valor retornado seja diferente do número
original. Além disso, o método retorna sempre uma string,
não um número.

• toExponential(): o método toExponential() do objeto

Number em JavaScript é usado para retornar uma
string representando um número em notação
científica. Ele é útil para representar números grandes
ou muito pequenos como uma potência de 10.

Veja o exemplo na página seguinte.

24
 CODING_JAVASCRIPT 3
UNIDADE 3

Neste exemplo, o número 123456 é passado para o método

toExponential(2), o que significa que o número deve ser
formatado com duas casas decimais.
O resultado é a string "1.23e+5", que representa o número em
notação científica. Se o número não tivesse sido passado
para o método toExponential(), a string retornada teria sido
"1.23456e+5".

Como resultado, o método toExponential() pode ser útil em

situações em que você deseja representar números grandes
ou muito pequenos com uma notação mais curta e fácil de
ler.

Além disso, ele pode ser usado para evitar erros de precisão
ao trabalhar com números grandes ou muito pequenos.

• toPrecision(): o método toPrecision() do objeto Number

em JavaScript é usado para retornar uma string
representando um número com uma determinada
precisão. Ele é útil para formatar números de maneira a
ter um número específico de dígitos significativos.

A sintaxe do método é a seguinte:

number.toPrecision(n);
Onde number é o número que você deseja formatar e n é
o número de dígitos significativos na string retornada.

Veja o exemplo na página seguinte.

25
 CODING_JAVASCRIPT 3
UNIDADE 3

Neste exemplo, o número 123.456 é passado para o método

toPrecision(2), o que significa que a string retornada deve
ter apenas dois dígitos significativos.

O resultado é a string "1.2e+2", que representa o número em

notação científica. Se o número tivesse sido passado para o
método toPrecision(4), a string retornada teria sido "123.5".
Como resultado, o método toPrecision() pode ser útil em
situações em que você deseja controlar o número de
dígitos significativos em uma representação de número.

Além disso, ele pode ser usado para evitar erros de precisão
ao trabalhar com números com uma grande quantidade
de casas decimais.

• valueOf(): o método valueOf() do objeto Number em

JavaScript é usado para retornar o valor primitivo do
objeto Number. Em outras palavras, ele retorna o
número que está sendo representado pelo objeto.

A sintaxe do método é a seguinte:

number.valueOf();

Onde number é o objeto Number que você deseja obter o

valor primitivo.
Veja o exemplo na página seguinte.

26
 CODING_JAVASCRIPT 3
UNIDADE 3

Neste exemplo, o número 123 é criado como um objeto

Number. Quando o método valueOf() é chamado, ele
retorna o valor primitivo do objeto, que é o número 123.

O método valueOf() é útil quando você precisa obter o valor

primitivo de um objeto Number, por exemplo, ao comparar
números ou ao passar números como argumentos para
funções.
Além disso, ele pode ser usado para evitar erros de tipo ao
trabalhar com números em JavaScript.

• parseFloat() e parseInt: são funções em JavaScript usadas

para converter strings em números. A função parseFloat é
usada para converter uma string em um número de ponto
flutuante (que pode ter casas decimais).

A sintaxe é a seguinte:
parseFloat(string);

parseInt(string[, radix]);

Onde "string" é a string que você deseja converter em um

número e "radix" é a base numérica (opcional) que você
deseja usar na conversão.

Se o radix não for especificado, ele será considerado

como 10.

Veja os exemplos na página seguinte.

27
 CODING_JAVASCRIPT 3
UNIDADE 3

parseFloat:

parseInt:

Aqui está um exemplo que usa o radix na função

parseInt:

Neste exemplo, a string "11" é convertida em um número

inteiro usando a base numérica 2 (binário). O resultado é o
número 3 em decimal, pois a string "11" em binário equivale
ao número 3 em decimal.

28
 CODING_JAVASCRIPT 3
UNIDADE 3

Exercícios

Agora vamos praticar!

Crie um arquivo chamado "Aula16-Metodos-numbers" e

realize os seguintes exercicios:

1. Converta a string "123.456" em um número de ponto

flutuante usando a função parseFloat e imprima o
resultado no console.
2. Converta a string "1010" em um número inteiro usando
a base numérica 2 (binário) e imprima o resultado no
console.

3. Converta a string "10.5" em um número de ponto

flutuante e imprima o resultado no console,
arredondando-o para duas casas decimais usando a
função toFixed.
4. Concatene duas strings e converta o resultado em um
número inteiro usando a função parseInt. Imprima o
resultado no console.

5. Converta o número 123456 em uma string com apenas

três dígitos usando a função toPrecision. Imprima a
string resultante no console.

6. Converta o número 123456 em uma string com

notação científica usando a função toExponential.
Imprima a string resultante no console.

29
 CODING_JAVASCRIPT 3
UNIDADE 3

Conclusão

Nesta unidade aprendemos sobre vários métodos de

número em JavaScript, incluindo toFixed, toExponential,
toPrecision, parseFloat, parseInt, valueOf, entre outros.

Estes métodos nos permitem manipular números de diversas

maneiras, convertê-los em strings e vice-versa, arredondá-
los, ajustar a precisão, entre outras coisas.
É importante ter um bom conhecimento desses métodos
para escrever códigos mais eficientes e precisos. Finalmente,
fazer exercícios práticos é uma ótima maneira de fixar o
conteúdo e se tornar um desenvolvedor ainda melhor.

30
 CODING_JAVASCRIPT 3

UNIDADE

MÉTODOS DE
UMA STRING

31
 CODING_JAVASCRIPT 3
UNIDADE 4

Métodos de uma String

• .length(): o método .length é usado para retornar o

comprimento de uma string, ou seja, o número de
caracteres que compõem a string. É um atributo de
leitura, o que significa que você pode obter o valor de
.length de uma string, mas não pode definir ou alterar
esse valor.
Exemplo de uso:

A contagem começa a partir de 1, então o comprimento da

string acima é 13. O método .length é útil para determinar o
tamanho de uma string em diversos cenários, como verificar
se uma string tem o comprimento mínimo ou máximo antes
de processá-la ou exibir a informação ao usuário.

• .concat(): o método .concat() é usado para concatenar

duas ou mais strings em JavaScript, ou seja, para unir
strings em uma única string. Esse método não altera a
string original, mas retorna uma nova string que é a
concatenação das strings de entrada.

Exemplo de uso:

32
 CODING_JAVASCRIPT 3
UNIDADE 4

Você também pode concatenar mais de duas strings usando

o método .concat():

Em ambos os casos, o resultado será a string "Olá, mundo!".

• .toLowerCase(): o método toLowerCase é um método de
string em JavaScript que retorna a string chamada com
todas as letras convertidas para minúsculas.

Exemplo de uso:

• .toUpperCase(): o método toLowerCase é um método de

string em JavaScript que retorna a string chamada com
todas as letras convertidas para maisculas.
Exemplo de uso:

33
 CODING_JAVASCRIPT 3
UNIDADE 4

Este dois métodos anteriores é útil quando você precisa

comparar strings, mas não quer que a comparação seja
afetada por diferenças entre maiúsculas e minúsculas.

• .indexOf(): o método indexOf é um método de string em

JavaScript que retorna a primeira posição na string onde
a sequência especificada pode ser encontrada, ou -1 se
não for encontrado.

Exemplo de uso:

Também é possível especificar um índice inicial para a busca

com o segundo parâmetro opcional:

Vale tambem lembrar que ele é case-sensitive, ou seja,

diferencia maiúsculas de minúsculas. Se você quiser buscar
por uma string sem levar em consideração maiúsculas e
minúsculas, pode usar o método toLowerCase ou
toUpperCase antes de chamar o indexOf.

Exemplo:

34
 CODING_JAVASCRIPT 3
UNIDADE 4

Uma coisa bem interessante vista no exemplo passado é a

chamada de um método após outro método é uma
técnica comum em programação, conhecida como
"encadeamento de métodos". Isso significa que você pode
chamar vários métodos em sequência, um após o outro, em
uma única linha de código. Exemplo:

metodo1().metodo2()

• .lastIndexOf(): o método lastIndexOf é um método de

string em JavaScript que retorna a posição da última
ocorrência de uma determinada string dentro da string
original. Se a string não for encontrada, o método
retornará -1.
Exemplo de uso:

Neste exemplo, o método lastIndexOf procura a última

ocorrência da string "sou" na string str e retorna sua posição.
Observe que a posição é contada a partir do zero.

Além do argumento obrigatório, o método lastIndexOf

também aceita um argumento opcional que especifica a
posição inicial da pesquisa.

Por exemplo:

Neste exemplo, a pesquisa começa na posição 20 e

procura a última ocorrência da string "sou" na string str antes
dessa posição.

35
 CODING_JAVASCRIPT 3
UNIDADE 4

• .slice(): o método slice em JavaScript é um método de

string que retorna uma nova string contendo uma parte
da string original. Ele aceita dois argumentos: o índice
inicial e o índice final (não incluído).

Exemplo:

Neste exemplo, o método slice extrai a parte da string str que

começa no índice 7 e termina no índice 11 (não incluído). O
resultado é a string "sou".
Você também pode usar o método slice sem o segundo
argumento. Neste caso, o método extrairá a parte da string
a partir do índice inicial até o final da string.

Exemplo:

Neste exemplo, o método slice extrai a parte da string str a

partir do índice 7 até o final da string. O resultado é a string
"sou uma string.".
• .split(): o método split em JavaScript é um método de
string que divide uma string em uma array de substrings,
baseado em um separador especificado. O separador é
passado como um argumento para o método split.

Exemplo:

36
 CODING_JAVASCRIPT 3
UNIDADE 4

Neste exemplo, a variável str é uma string "Oi, eu sou uma

string.". O método split é chamado na variável str com o
argumento " ", dividindo a string em uma array de substrings
separadas por espaços.
O resultado é armazenado na variável words, que é então
impressa no console, produzindo o output [ "Oi,", "eu", "sou",
"uma", "string." ].

Você também pode usar o método split sem argumentos.

Neste caso, a string será dividida em uma array de
caracteres.
Exemplo:

Neste exemplo, a variável str é uma string "Oi, eu sou uma

string.". O método split é chamado na variável str sem
argumentos, dividindo a string em uma array de caracteres.
O resultado é armazenado na variável chars, que é então
impressa no console, produzindo o output

["O", "l", "á", ",", " ", "m", "u", "n", "d", "o", "!"]
• .replace(): O método replace em JavaScript é um
método de string que substitui uma ocorrência ou uma
expressão regular de uma string por outra string ou por
uma função retornada.

Exemplo:

37
 CODING_JAVASCRIPT 3
UNIDADE 4

Neste exemplo, a variável str é uma string "Oi, eu sou uma

string.". O método replace é chamado na variável str com os
argumentos "string" e "palavra", substituindo a primeira
ocorrência de "string" por "palavra". O resultado é
armazenado na variável replaced, que é então impressa no
console, produzindo o output "Oi, eu sou uma palavra.".

Se você quiser substituir todas as ocorrências, você pode

usar uma expressão regular com a flag "g" (global).
Exemplo:

Neste exemplo, a variável str é uma string "Oi, eu sou uma

string. Eu sou uma string também.". O método replace é
chamado na variável str com a expressão regular /string/g e
o substituto "palavra", substituindo todas as ocorrências de
"string" por "palavra".

O resultado é armazenado na variável replaced, que é

então impressa no console, produzindo o output "Oi, eu sou
uma palavra. Eu sou uma palavra também.".

38
 CODING_JAVASCRIPT 3
UNIDADE 4

Exercícios

Vamos à prática!

Crie um arquivo chamado "Aula17-Metodos-string.js" e faça

os seguintes exercicios:

1. Dada uma string, use o método length para

determinar o comprimento da string.
2. Dada duas strings, use o método concat para
concatenar as duas strings e armazenar o resultado
em uma nova variável.

3. Dada uma string, use o método toLowerCase para

transformar a string em letras minúsculas.

4. Dada uma string, use o método toUpperCase para

transformar a string em letras maiúsculas.

5. Dada uma string e uma substring, use o método

indexOf para encontrar a primeira ocorrência da
substring na string.

6. Dada uma string e uma substring, use o método

lastIndexOf para encontrar a última ocorrência da
substring na string.

7. Dada uma string e dois índices, use o método slice

para retornar uma nova string com a substring
compreendida entre esses dois índices.

8. Dada uma string e um separador, use o método split

para dividir a string em uma matriz de strings.

9. Dada uma string e uma substring, use o método

replace para substituir todas as ocorrências da
substring por outra string.

39
 CODING_JAVASCRIPT 3
UNIDADE 4

Conclusão

Os métodos de string em JavaScript são ferramentas

poderosas que permitem manipular e transformar strings de
várias maneiras.

Alguns dos métodos mais comuns incluem length, que

determina o comprimento de uma string, concat, que
concatena duas ou mais strings, toLowerCase e
toUpperCase, que transformam uma string em letras
minúsculas ou maiúsculas, respectivamente, indexOf e
lastIndexOf, que encontram a primeira ou última ocorrência
de uma substring em uma string, slice, que retorna uma
nova string com a substring compreendida entre dois
índices, split, que divide uma string em uma matriz de strings,
e replace, que substitui todas as ocorrências de uma
substring por outra string.
Ao dominar esses métodos, você estará bem equipado
para manipular strings de forma eficiente e eficaz em seus
projetos.

40
 CODING_JAVASCRIPT 3

UNIDADE

FUNCTIONS

41
 CODING_JAVASCRIPT 3
UNIDADE 5

Functions
Uma função em JavaScript é um trecho de código que
pode ser executado várias vezes com diferentes entradas
(parâmetros). As funções são úteis para encapsular lógicas
e processamentos que podem ser reutilizados ao longo do
código, tornando-o mais organizado e mantenível.

A sintaxe básica de uma função em JavaScript inclui o

nome da função, seguido de parênteses que podem conter
zero ou mais parâmetros (entradas), e uma série de
instruções entre chaves. As instruções dentro da função são
executadas quando a função é chamada.

A função acima, chamada soma, aceita dois parâmetros

(a e b) e retorna a soma dos dois. Você pode chamar a
função em outro lugar do seu código passando dois valores
como argumentos:

Além disso, você pode retornar valores da função com a

palavra-chave return, que permite que a função forneça
informações de volta para o código que a chamou.

Por exemplo, a função acima retorna o resultado da soma

dos dois números.
Em resumo, as funções em JavaScript são uma das
ferramentas mais poderosas e flexíveis da linguagem, e são
essenciais para escrever códigos mais avançados e
organizados.

42
 CODING_JAVASCRIPT 3
UNIDADE 5

Existem duas maneiras de declarar funções em JavaScript:

• Declaração de função: é a maneira mais comum de se
declarar uma função. Você pode criar uma função com
a palavra-chave function seguida pelo nome da função,
argumentos entre parênteses e o corpo da função entre
chaves. Por exemplo:

• Expressão de função: neste caso, você atribui uma

função a uma variável. Isso pode ser feito com a palavra-
chave "function".

Ambos os métodos de declaração de função são válidos e

amplamente utilizados em JavaScript. Escolha o que melhor
atenda às suas necessidades de acordo com o contexto
em que você está trabalhando.

Esses são alguns dos conceitos mais importantes para

entender sobre funções em JavaScript. Aprender a
trabalhar com funções é fundamental para escrever
códigos eficientes e reutilizáveis em JavaScript.
43
 CODING_JAVASCRIPT 3
UNIDADE 5

Os argumentos são valores passados para uma função

quando ela é chamada. Eles são especificados entre
parênteses, separados por vírgulas, na chamada da
função. Na declaração da função, você pode especificar
parâmetros que representam os argumentos que serão
passados para a função.

Aqui está um exemplo de uma função com dois

parâmetros, x e y, que soma seus argumentos:

Se a função é chamada com mais ou menos argumentos

do que os especificados, os valores extras serão ignorados
ou os argumentos faltantes terão o valor undefined.

Você também pode passar argumentos para uma função

de uma maneira mais flexível, usando a propriedade
arguments da função. A propriedade arguments é um
objeto que contém uma lista de todos os argumentos
passados para a função. Você pode usar esse objeto para
manipular os argumentos da função de maneira dinâmica.

Além disso, é possível especificar valores padrão para os

parâmetros, caso não sejam passados argumentos para
eles. Isso é feito através da atribuição de valores padrão
aos parâmetros na declaração da função. Exemplo:

44
 CODING_JAVASCRIPT 3
UNIDADE 5

Além disso, é possível passar argumentos para uma função

usando um objeto com propriedades que correspondem aos
nomes dos parâmetros. Isso é chamado de "desestruturação
de objetos". Aqui está um exemplo:

Estes são apenas alguns exemplos básicos de como usar

argumentos em funções no JavaScript. O JavaScript oferece
uma série de recursos avançados para trabalhar com
argumentos em funções, como o uso de operadores rest e
spread, que permitem trabalhar com argumentos de uma
maneira mais flexível.
Cada argumento representa uma variável local dentro da
função que pode ser usada para realizar tarefas. O tipo de
dados de cada argumento deve ser especificado, assim
como o nome da variável. Ao chamar a função, você passa
valores para esses argumentos, que são usados dentro da
função.
Além disso, você pode especificar valores padrão para os
argumentos da função, o que significa que se um valor não
for passado para esse argumento ao chamar a função, o
valor padrão será usado. Isso é feito adicionando um valor
padrão à declaração do argumento na definição da
função.

45
 CODING_JAVASCRIPT 3
UNIDADE 5

Em resumo, os argumentos são valores passados para uma

função quando ela é chamada e são usados para realizar
tarefas dentro da função. A declaração de argumentos em
uma função em JavaScript consiste em especificar o tipo de
dados e o nome da variável para cada argumento.
Você pode ter vários argumentos e pode especificar valores
padrão para eles. Ao chamar a função, você passa valores
para os argumentos, que são usados dentro da função para
realizar tarefas.
O retorno de valor de uma função é o valor que é retornado
para o chamador da função quando ela é executada. É
especificado usando a palavra-chave return seguida pelo
valor a ser retornado.
Aqui está um exemplo de uma função que retorna o valor
da soma de dois números:

Você pode retornar qualquer tipo de valor, incluindo

números, strings, objetos, arrays, etc. Também é possível
retornar uma função ou um objeto.

Se não houver nenhum valor especificado para retornar, ou

se a palavra-chave return não for usada, a função retornará
implicitamente o valor undefined.

Lembre-se de que o Código, depois da palavra-chave

return, não será executado, uma vez que a função será
interrompida assim que o valor for retornado.

46
 CODING_JAVASCRIPT 3
UNIDADE 5

Em JavaScript, a palavra-chave return é usada para

retornar o valor de uma função. Quando a função é
chamada, a execução do código na função é
interrompida e o valor retornado é passado de volta para
o local da chamada da função.

A sintaxe para retornar o valor de uma função é a

seguinte:

O retorno de valor de uma função é o valor que é

retornado para o chamador da função quando ela é
executada. É especificado usando a palavra-chave return
seguida pelo valor a ser retornado.

Quando essa função é chamada, você pode passar dois

números como argumentos e receber a soma desses
números como o valor retornado:

Além disso, é importante destacar que você pode ter

vários return statements em uma função, mas apenas o
primeiro será executado. Quando o primeiro return é
atingido, a execução da função é interrompida e o valor
retornado é passado de volta para o local da chamada
da função. Veja o exemplo a seguir.

47
 CODING_JAVASCRIPT 3
UNIDADE 5

Neste exemplo, a função maiorValor retorna o maior valor

entre a e b. Se a for maior que b, o primeiro return será
atingido e o valor de a será retornado. Se não, o segundo
return será atingido e o valor de b será retornado.

Para concluir, retornar o valor de uma função em JavaScript

é feito usando a palavra-chave return. O valor retornado
pode ser qualquer tipo de dado, incluindo números, strings,
objetos, arrays, etc.

Quando a função é chamada, a execução do código na

função é interrompida e o valor retornado é passado de
volta para o local da chamada da função.

É importante ter em mente que apenas o primeiro return será

executado, interrompendo a execução da função assim
que é atingido. Retornar o valor de uma função é uma
maneira eficiente de compartilhar informações entre
diferentes partes do código.

48
 CODING_JAVASCRIPT 3
UNIDADE 5

Exercícios
Vamos à prática!

Crie um arquivo chamado "Modulo5-functions.js" e faça os

seguintes exercicios:

1. Faça um programa, com uma função que necessite

de três argumentos, e que forneça a soma desses três
argumentos através de uma função. Seu script
também deve fornecer a média dos três números,
através de uma segunda função que chama a
primeira.

2. Faça um programa que recebe três números do

usuário, e identifica o maior através de uma função e
o menor número através de outra função.

3. A probabilidade de sair um valor em um dado é 1/6 (1

em 6). Faça um script em JavaScript que simule 1
milhão de lançamentos de dados e mostre a
frequência obtida para cada número.

4. Crie uma função que recebe um número inteiro

positivo e teste para saber se ele é primo ou não. Faça
um script que recebe um número inteiro n e mostra
todos os primos, de 1 até n.

5. Faça um programa com uma função chamada

somaImposto. A função possui dois parâmetros
formais: taxaImposto, que é a quantia de imposto
sobre vendas expressa em porcentagem, e custo, que
é o custo de um item antes do imposto. A função
“altera” o valor de custo para incluir o imposto sobre
vendas.

6. Faça uma função que informe a quantidade de

dígitos de um determinado número inteiro informado.

49
 CODING_JAVASCRIPT 3
UNIDADE 5

Conclusão

Nesta unidade abordamos o conceito de uma função -

uma parte de código reutilizável que pode ser invocada
repetidas vezes com diferentes entradas.

Aprendemos sobre a declaração de uma função, que

envolve o uso da palavra-chave "function" seguida pelo
nome da função e parênteses.

Também aprendemos sobre os argumentos de uma função,

que são valores específicos passados para a função
quando ela é invocada.

E por fim, aprendemos como retornar o valor de uma

função, usando a palavra-chave "return". Ao compreender
esses conceitos, estamos capacitados a escrever códigos
mais organizados e reutilizáveis. Além disso, as funções
também ajudam a melhorar a legibilidade e manutenção
do código.

Ao encapsular determinadas tarefas em uma única função,

torna-se mais fácil compreender e gerenciar o fluxo de
trabalho do programa. Também é possível passar
argumentos para as funções e obter resultados dinâmicos.

As funções também podem ser utilizadas para separar e

modularizar o código, tornando-o mais fácil de testar e
manter. Em resumo, as funções são uma ferramenta
poderosa na programação que permitem uma melhor
organização, reutilização e manutenção do código.

50
 CODING_JAVASCRIPT 3

UNIDADE

FUNÇÕES
ANÔNIMAS &
ARROW
FUNCTIONS

51
 CODING_JAVASCRIPT 3
UNIDADE 6

Funções anônimas & arrow functions

Funções anônimas

Funções anônimas são funções que não possuem nome e

são definidas e usadas no momento da sua criação.

Em JavaScript, essas funções são úteis para a criação de

pequenas tarefas que serão executadas uma única vez e
não precisam ser reutilizadas em outras partes do código.

Além disso, as funções anônimas são frequentemente

usadas como argumentos em outras funções, como
callbacks. Isso permite que você passe comportamentos
específicos para outras funções sem a necessidade de
nomear a função e reutilizá-la mais tarde.

As funções anônimas são definidas usando a sintaxe de

uma função normal, mas sem um nome. Em vez disso, a
função é atribuída a uma variável ou passada como
argumento para outra função. Aqui está um exemplo de
como você pode criar uma função anônima:

As funções
anônimas são
muito úteis
quando você
precisa passar
comportament
os específicos
para outras
funções.

52
 CODING_JAVASCRIPT 3
UNIDADE 6

Neste exemplo, a função executarTarefa recebe uma

função anônima como argumento. A função executarTarefa
imprime "Executando tarefa..." e, em seguida, chama a
função de retorno de chamada passada como argumento,
que imprime "Tarefa concluída!".

Arrow functions
Arrow Functions são uma forma mais curta e concisa de
escrever funções em JavaScript. Elas foram introduzidas na
versão 6 do JavaScript e são uma alternativa às funções
convencionais. As Arrow Functions possuem uma sintaxe mais
curta e permitem escrever código mais limpo e legível.
Aqui está um exemplo de como você pode escrever a
mesma função usando uma Arrow Function:

Se a função só possui uma expressão, você pode remover as

chaves e o retorno implícito é adicionado:

• Parâmetros padrão: Você pode definir parâmetros

padrão para uma Arrow Function, assim como em
qualquer outra função.

53
 CODING_JAVASCRIPT 3
UNIDADE 6

Funções anônimas e Arrow Functions são recursos valiosos da

linguagem JavaScript que tornam a escrita de código mais
curta, mais eficiente e mais fácil de entender.

Ambos são importantes para os desenvolvedores que

desejam escrever códigos limpos, legíveis e escaláveis. Aqui
estão algumas das razões pelas quais você pode desejar
usar funções anônimas e Arrow Functions em seu código
JavaScript.

• Sintaxe mais curta: Funções anônimas e Arrow Functions

oferecem uma sintaxe mais curta para escrever funções
em comparação com funções convencionais. Isso
significa que você pode escrever mais código em menos
linhas e de forma mais fácil de ler e entender.
• Reutilização de código: Funções anônimas são úteis
quando você precisa reutilizar o mesmo código em
diferentes partes do seu aplicativo. Você pode passar
uma função anônima como argumento para outra
função e reutilizá-la em vários lugares do seu código.
• Callbacks: Funções anônimas são amplamente utilizadas
como callbacks em JavaScript. Isso significa que você
pode passar uma função anônima como argumento
para outra função e executá-la quando determinadas
condições forem atendidas. Por exemplo, você pode usar
uma função anônima como callback com a função
setTimeout para executar uma tarefa após um
determinado período de tempo.

• Parâmetros padrão: Arrow Functions permitem definir

parâmetros padrão para uma função, assim como em
qualquer outra função. Isso pode ser útil quando você
precisa passar argumentos para uma função e deseja
fornecer valores padrão caso nenhum argumento seja
fornecido.

54
 CODING_JAVASCRIPT 3
UNIDADE 6

Exercícios

Vamos à prática!

Crie um arquivo chamado "Aula19-anonima-arrow.js", e

realize os seguintes exercicios:

1. Crie uma função anônima que retorne o dobro de um

número. Depois, chame essa função passando um
número como argumento.

2. Crie uma Arrow Function que retorne a soma de dois

números. Depois, chame essa função passando dois
números como argumentos.

3. Escreva uma função anônima que aceite uma lista de

números e retorne a soma de todos os números na lista.
4. Crie uma função anônima que receba uma string e
retorne o número de caracteres na string.

5. Escreva uma Arrow Function que retorne verdadeiro se

um número for par ou falso se for ímpar.

6. Escreva uma Arrow Function que retorne o maior

número de uma lista de números.
7. Crie uma função anônima que retorne a média de três
números.

55
 CODING_JAVASCRIPT 3
UNIDADE 6

Conclusão

Ao concluir a unidade de Funções Anônimas e Arrow

Functions em JavaScript, podemos ver que ambas são
importantes ferramentas para escrever códigos mais curtos,
eficientes e legíveis.

Funções Anônimas são úteis para criar pequenos trechos de

código que podem ser reutilizados várias vezes, sem precisar
dar um nome específico para cada função. Eles também
são úteis como callbacks, o que significa que podem ser
passados como argumentos para outras funções e ser
executadas após o término de uma tarefa específica.
Já as Arrow Functions, assim como as Funções Anônimas,
oferecem uma maneira concisa de escrever funções em
JavaScript. Ao usar Arrow Functions, você pode escrever
funções em uma linha, o que ajuda a mantê-las legíveis e
fáceis de entender. Além disso, elas permitem que você
escreva funções com sintaxe mais enxuta, tornando seu
código mais eficiente.

Em geral, Funções Anônimas e Arrow Functions são

importantes ferramentas que todos os desenvolvedores de
JavaScript devem conhecer. Ao dominá-las, você pode
escrever códigos mais claros e enxutos, o que é
fundamental para manter seus aplicativos funcionando de
maneira eficiente.

Portanto, é importante dedicar tempo para compreender as

nuances dessas ferramentas e aprender a usá-las de
maneira adequada em seu código.

56
 CODING_JAVASCRIPT 3

UNIDADE

MAP, FILTER
& REDUCE

57
 CODING_JAVASCRIPT 3
UNIDADE 7

Map, Filter & Reduce

Estudar cada um dos métodos map, filter e reduce,
especificamente, é importante devido à complexidade
individual de cada um.

Embora esses métodos sejam amplamente utilizados em

programação, cada um tem suas próprias peculiaridades e
requer uma compreensão profunda para serem aplicados
corretamente.
O método map, por exemplo, é relativamente simples de
entender e usar, mas sua aplicação pode se tornar
complexa quando você precisa transformar os elementos
de uma coleção de forma complexa. É importante
compreender como a função é aplicada a cada elemento
da coleção e como o resultado é retornado. Além disso, é
importante saber como lidar com exceções e erros na
aplicação da função.
Já o método filter pode ser um pouco mais complexo, pois
ele requer que você compreenda como aplicar uma
função de filtro a cada elemento da coleção e como
retornar apenas os elementos que passam no filtro. É
importante ter uma compreensão clara da lógica da
função de filtro e de como ela é aplicada a cada
elemento. Além disso, é importante ter conhecimento sobre
como lidar com exceções e erros na aplicação da função.

Por fim, o método reduce pode ser o mais complexo de

todos, pois ele requer uma compreensão profunda da
lógica de redução e de como aplicar uma função a pares
de elementos da coleção. É importante compreender como
a função é aplicada a cada par de elementos e como o
resultado final é retornado. Além disso, é importante ter
conhecimento sobre como lidar com exceções e erros na
aplicação da função.

58
 CODING_JAVASCRIPT 3
UNIDADE 7

Método map

O método map é uma função presente em arrays em

JavaScript que permite aplicar uma função a cada
elemento do array e retornar um novo array com os
resultados. É muito útil para transformar elementos de um
array de uma forma específica.

A sintaxe do método map é a seguinte:

array.map(function(currentValue, index, arr), thisValue)

Onde:
• function é uma função que é aplicada a cada
elemento do array. Essa função precisa retornar o novo
valor para cada elemento.

• currentValue é o valor atual do elemento sendo

processado.

• index é o índice do elemento sendo processado.

• arr é o array original.

• thisValue é um valor opcional que será usado como this
dentro da função.

Aqui está um exemplo de como o método map pode ser

usado:

59
 CODING_JAVASCRIPT 3
UNIDADE 7

No exemplo anterior, o método map é usado para dobrar

cada número no array numbers. A função passada para o
método map retorna o número atual multiplicado por 2. O
resultado é um novo array, doubledNumbers, que contém
os números dobrados.

É importante notar que o método map não modifica o array

original, mas retorna um novo array com os valores
transformados. Isso é útil para manter o estado original do
array intacto, tornando o código mais fácil de manter e
evitando erros comuns.
O método map também pode ser usado com arrow
functions em JavaScript. Arrow functions são uma forma
mais concisa de escrever funções anônimas. Aqui está um
exemplo de como o método map pode ser usado com uma
arrow function:

Nesse exemplo, a arrow function é usada para dobrar cada

número no array numbers. A arrow function é uma forma
mais curta de escrever a função passada para o método
map, que retorna o número atual multiplicado por 2. O
resultado é um novo array, doubledNumbers, que contém
os números dobrados.

60
 CODING_JAVASCRIPT 3
UNIDADE 7

Método filter

O método filter é uma função presente em arrays em

JavaScript que permite filtrar elementos de um array
baseado em alguma condição. É útil para selecionar
elementos de um array que satisfazem uma determinada
condição e retornar um novo array com esses elementos.
A sintaxe do método filter é a seguinte:

array.filter(function(currentValue, index, arr), thisValue)

Onde:

• function é uma função que é aplicada a cada elemento

do array. Essa função precisa retornar true ou false,
dependendo se o elemento atual deve ser incluído no
novo array.

• currentValue é o valor atual do elemento sendo

processado.

• index é o índice do elemento sendo processado.

• arr é o array original.

• thisValue é um valor opcional que será usado como this

dentro da função.

Aqui está um exemplo de como o método filter pode ser

usado:

61
 CODING_JAVASCRIPT 3
UNIDADE 7

No exemplo anterior, o método filter é usado para selecionar

apenas os números pares do array numbers. A função
passada para o método filter retorna true se o número atual
for par (num % 2 === 0) e false caso contrário. O resultado é
um novo array, evenNumbers, que contém apenas os
números pares do array original.

Como o método filter não modifica o array original, ele é

uma ótima maneira de selecionar elementos específicos de
um array sem alterar o estado original. Além disso, o método
filter é muito eficiente e é uma opção muito popular para
seleção de elementos em arrays em JavaScript.
Exemplo usando arrow function:

62
 CODING_JAVASCRIPT 3
UNIDADE 7

Método reduce

O método reduce é uma função presente em arrays em

JavaScript que permite reduzir um array a um único valor
agregado. É útil para realizar cálculos complexos
envolvendo todos os elementos de um array, como somas,
médias, contagens, etc.

A sintaxe do método reduce é a seguinte:

array.reduce(function(accumulator, currentValue,
currentIndex, array), initialValue)
Onde:

• function é uma função que é aplicada a cada elemento

do array. Essa função precisa retornar o acumulador
atualizado.
• accumulator é o acumulador, que vai sendo atualizado a
cada iteração. O valor inicial do acumulador é o valor de
initialValue ou o primeiro elemento do array, caso
initialValue não seja fornecido.

• currentValue é o valor atual do elemento sendo

processado.

• currentIndex é o índice do elemento sendo processado.

• array é o array original.

• initialValue é um valor opcional que será usado como o
primeiro valor do acumulador.

A seguir está um exemplo de como o método reduce pode

ser usado:

63
 CODING_JAVASCRIPT 3
UNIDADE 7

No exemplo acima, o método reduce é usado para calcular

a soma de todos os números no array numbers. A função
passada para o método reduce retorna o acumulador
atualizado a cada iteração (accumulator + num). O
resultado final é a soma de todos os elementos do array,
armazenada na variável sum.
O método reduce é muito poderoso e pode ser usado para
realizar muitos tipos de cálculos com arrays, incluindo somas,
médias, contagens, concatenações, etc. Além disso, o
método reduce não modifica o array original, o que significa
que ele pode ser usado de maneira segura em situações em
que o estado original do array precisa ser preservado.

Agora vamos para um exemplo um pouco mais complexo:

Neste exemplo, temos um array de objetos purchases que

representam compras de itens em uma loja.

O método reduce é usado para calcular o custo total de

todas as compras. A arrow function (acc, purchase) => acc
+ purchase.price * purchase.quantity é usada para atualizar
o acumulador (acc) a cada iteração, adicionando o custo
da compra atual (purchase.price * purchase.quantity).

O resultado final é o custo total de todas as compras,

armazenado na variável totalCost.
64
 CODING_JAVASCRIPT 3
UNIDADE 7

Exercícios

Vamos à prática!

Agora crie um arquivo chamado "Aula-18-map-filter-reduce.js"

e faça os seguintes exercicios:

1. Dado um array de números, use o método map para

criar um novo array com os números aumentados em 1.
2. Dado um array de nomes, use o método map para criar
um novo array com as iniciais dos nomes.

3. Dado um array de números, use o método filter para

criar um novo array com apenas os números pares.

4. Dado um array de números, use o método filter para

criar um novo array com apenas os números maiores do
que 10.
5. Dado um array de objetos, use o método reduce para
calcular a soma de todas as propriedades numéricas.

6. Dado um array de números, use o método reduce para

encontrar o maior número.
7. Dado um array de objetos, use o método map e o
método reduce juntos para encontrar o objeto com o
maior valor em uma propriedade específica.

65
 CODING_JAVASCRIPT 3
UNIDADE 7

Conclusão

O uso dos métodos map, filter e reduce em JavaScript é

fundamental para otimizar e tornar o código mais conciso e
eficiente. Eles permitem manipular arrays de maneira simples
e eficaz, realizando transformações, filtragens e cálculos
complexos com poucas linhas de código.

Além disso, a utilização de arrow functions permite ainda

mais clareza e simplicidade no código, tornando-o mais fácil
de entender e manter.
Ao finalizar esta unidade, você deve ter adquirido um bom
entendimento acerca do funcionamento desses métodos, e
sobre como usá-los em seu código.
Porém, a prática é fundamental para consolidar seus
conhecimentos, portanto, recomenda-se que você
continue exercitando o uso destes métodos em diferentes
situações e problemas.
Em resumo, o estudo dos métodos map, filter e reduce é
essencial para qualquer programador JavaScript e pode ser
a chave para soluções mais elegantes e eficientes em seus
projetos.

66
 CODING_JAVASCRIPT 3

UNIDADE

INTRODUÇÃO AO
HTML & CSS

67
 CODING_JAVASCRIPT 3
UNIDADE 8

Introdução ao HTML & CSS

Nesta Unidade, você terá a oportunidade de mergulhar no
mundo da web e aprender sobre a estrutura básica de uma
página na internet.

Como vimos na introdução deste curso, a linguagem de

programação JavaScript é provavelmente a mais utilizada
pelos desenvolvedores de websites e de softwares. Mas ela
não está sozinha!

HTML é uma linguagem de marcação que é usada para

dar estrutura e significado ao conteúdo na web. É a base
do desenvolvimento web e permite a criação de estruturas
de conteúdo, como cabeçalhos, parágrafos, listas e
tabelas.

Juntamente com o HTML, você também aprenderá sobre o

CSS, que é uma linguagem de estilo utilizada para dar
aparência e formatação ao conteúdo HTML. O CSS permite
que você altere a cor de fundo, a fonte, o tamanho e muito
mais, tornando as páginas da web mais atraentes e
interativas.
Nesta aula, você aprenderá sobre os elementos básicos do
HTML e como eles são usados para marcar o conteúdo.
Além disso, você verá como o CSS pode ser usado para
mudar a aparência da página da web. Ao final desta aula,
você terá uma compreensão sólida da estrutura e
funcionamento do HTML e CSS e estará pronto para
prosseguir com o próximo módulo.

Não se preocupe se tudo parecer um pouco confuso no

começo. A prática e o treinamento constante farão com
que você se torne cada vez mais confiante em suas
habilidades de codificação. Estamos animados para
acompanhar seu progresso neste incrível mundo do HTML e
CSS!

68
 CODING_JAVASCRIPT 3
UNIDADE 8

Abertura e fechamento de tag

A abertura e o fechamento de tags são usados para

delimitar e identificar os elementos em uma página HTML.
Cada elemento é marcado por uma tag, que é composta
por uma abertura e um fechamento.
A abertura de uma tag é indicada por um nome de
elemento entre sinais menor e maior, enquanto o
fechamento de uma tag é indicado pelo nome de
elemento precedido por uma barra diagonal.

Por exemplo, o elemento "parágrafo" é representado pela

tag <p>. A abertura da tag seria <p> e o fechamento da
tag seria </p>. Tudo o que estiver entre as duas tags será
considerado parte do elemento "parágrafo".

Alguns elementos não requerem fechamento, como a tag

de quebra de linha <br>. Neste caso, apenas a abertura da
tag é necessária.
É importante sempre fechar as tags corretamente, pois isso
ajuda a garantir que o conteúdo da página será exibido
corretamente. Além disso, o uso correto de tags abertura e
fechamento pode facilitar a manutenção e o
desenvolvimento de páginas da web, tornando o código
mais legível e organizado.

69
 CODING_JAVASCRIPT 3
UNIDADE 8

Elementos básicos do HTML

HTML é composto por uma série de elementos, cada um com

uma função específica. Alguns dos elementos mais comuns
incluem cabeçalhos, parágrafos, listas, links, tabelas, entre
outros. Estes elementos são utilizados para dar estrutura e
significado ao conteúdo na web, permitindo que os
navegadores e outros dispositivos compreendam e
apresentem corretamente o conteúdo.

Nesta aula, você aprenderá sobre os elementos HTML mais

comuns e como eles são usados para marcar o conteúdo.
Além disso, você verá como esses elementos são usados em
combinação para criar estruturas mais complexas.
Ao final desta aula, você terá uma compreensão sólida dos
elementos básicos do HTML e estará pronto para aplicar esses
conhecimentos em seu próprio projeto.

Os elementos básicos do HTML incluem:

• Cabeçalhos: <h1>, <h2>, <h3>, etc.
• Parágrafos: <p>
• Listas: <ul>, <ol>, <li>
• Links: <a>
• Imagens: <img>
• Tabelas: <table>, <tr>, <td>, <th>
• Formulários: <form>, <input>, <select>, <textarea>,
<button>
• Entidades de codificação: <br>, <hr>, <pre>
• Divisões: <div>
• Estilos: <style>
Estes são apenas alguns dos elementos básicos do HTML, mas
existem muitos outros elementos que podem ser usados para
criar páginas da web ricas em conteúdo e recursos. Ao
aprender a usar estes elementos de forma eficaz, você pode
criar estruturas de conteúdo complexas e desenvolver
páginas da web incríveis.

Neste módulo veremos apenas parágrafo e button, visando

sua utilização em um conceito mais avançado no JavaScript
70
 CODING_JAVASCRIPT 3
UNIDADE 8

Classes & IDs

Classe e ID são conceitos importantes em CSS, que permitem

a você selecionar e estilizar elementos HTML específicos em
sua página.
• Classe: uma classe é uma regra de estilo que pode ser
aplicada a vários elementos HTML diferentes. Uma classe
é definida usando um nome de classe, precedido pelo
ponto (.) no CSS, e é atribuída a elementos HTML usando
o atributo class na tag HTML.

Veja o exemplo a seguir:

Podemos usar a tag <style> para colocar codigo CSS dentro

do HTML:

• ID: um ID é uma regra de estilo que pode ser aplicada

apenas a um único elemento HTML na sua página. Um ID
é definido usando um nome de ID, precedido pelo sinal
de # no CSS, e é atribuído a um elemento HTML usando o
atributo id na tag HTML.

Por exemplo:

71
 CODING_JAVASCRIPT 3
UNIDADE 8

Criando nosso primeiro código com HTML e CSS

Na mesma pasta que estamos utilizando para salvar nossos

arquivos, iremos criar um novo arquivo, porém este será um
arquivo HTML, portanto o nome deverá ser "index.html“.

Vamos começar com a criação de um simples parágrafo e

um botão. Para criar o parágrafo, precisaremos usar a tag
HTML <p>. O conteúdo que queremos exibir no parágrafo
estará entre as tags de abertura e fechamento, e para o
button, a mesma coisa <button>.

Agora na nossa pasta vamos clicar com o botão direito do

mouse sobre o arquivo HMTL, selecioná-lo, e então apertar a
tecla ENTER para abri-lo

Ja podemos ver nosso codigo rodando no browser(!), agora

vamos dar cores a ele com CSS.

72
 CODING_JAVASCRIPT 3
UNIDADE 8

Como podemos ver, a regra começa com o seletor "p", que

seleciona todos os elementos HTML de parágrafo (<p>) na
página.
Depois do seletor, há uma declaração entre chaves {} que
define a formatação a ser aplicada aos elementos
selecionados. Neste exemplo, há apenas uma declaração,
que define a cor de fundo como vermelho, usando a
propriedade CSS background-color e o valor red.

A mesma coisa para o button, porém, além dele moficar a

cor de fundo, também muda a cor do texto com a
propriedade color.

73
 CODING_JAVASCRIPT 3
UNIDADE 8

Usando JavaScript no HTML

Primeiro, antes de inserirmos JavaScript no código HTML,

precisamos entender dois commando: alert e prompt

• alert(): exibe uma caixa de mensagem modal com uma

mensagem informativa e um botão OK. É útil para mostrar
uma mensagem importante ao usuário.
• prompt(): exibe uma caixa de mensagem modal que
permite ao usuário inserir dados. A função retorna o valor
digitado pelo usuário.

Para adicionar uma interação com JavaScript a um botão

HTML, você pode adicionar um atributo onclick ao botão e
atribuir a ele uma função JavaScript que será executada
quando o botão for clicado. Por exemplo:

Resultado quando cliclamos no botão:

Na próxima página demonstraremos um exemplo com o

prompt.

74
 CODING_JAVASCRIPT 3
UNIDADE 8

Para adicionar Código um JavaScript a uma página HTML, é

necessário incluí-lo em uma tag <script>. Em seguida, basta
escrever o código dentro da tag. Neste caso, estamos
criando uma função alerta, que armazena a entrada do
usuário na variável nome e exibe uma mensagem de boas-
vindas ao usuário, incluindo o nome que ele inseriu.
Agora iremos adicionar esta função para ser executada ao
clicar no botão:

A sequencia ao clicar será esta:

75
 CODING_JAVASCRIPT 3
UNIDADE 8

Conclusão

Nesta unidade você aprendeu os conceitos básicos de

HTML e CSS, e como eles podem ser usados juntos para criar
páginas da web atraentes e funcionais.

Você também aprendeu sobre elementos HTML, como

parágrafos e botões, e como aplicar estilos CSS, como cores
de fundo e cores de texto.
Além disso, você experimentou a adição de interação com
JavaScript a suas páginas web, usando funções como alert
e prompt para criar diálogos com o usuário.
Agora você tem uma base sólida para continuar a
aprender e aperfeiçoar suas habilidades em JavaScript!

76
 CODING_JAVASCRIPT 3

UNIDADE

DOCUMENT
OBJECT MODEL
(D.O.M)

77
 CODING_JAVASCRIPT 3
UNIDADE 9

Document Object Model (D.O.M)

O Document Object Model (D.O.M) é uma API (Interface de
Programação de Aplicações) para HTML e XML, que fornece
uma representação estruturada de um documento da web.

O D.O.M permite que os programadores acessem e

manipulem elementos de uma página da web, como tags,
atributos e conteúdo, tornando-a mais interativa e
responsiva.
Ao carregar uma página da web, o navegador constrói
uma árvore de objetos, onde cada elemento da página é
um objeto. Essa árvore é a representação do documento no
D.O.M.
Seria algo assim:

Os programadores podem usar o D.O.M para navegar na

árvore e acessar elementos específicos, como um título ou
uma imagem. Além disso, o D.O.M permite que você altere
dinamicamente o conteúdo e a estrutura da página.

78
 CODING_JAVASCRIPT 3
UNIDADE 9

Por exemplo, você pode usar o D.O.M para adicionar ou

remover elementos da página, mudar o conteúdo de um
elemento, alterar as propriedades CSS de um elemento ou
mesmo criar novos elementos na página. Isso é útil em
aplicativos da web avançados, como jogos, ferramentas de
edição de texto ou formulários interativos.

O D.O.M é amplamente utilizado em conjunto com

JavaScript para criar aplicativos da web dinâmicos.
JavaScript é uma linguagem de programação que permite
aos desenvolvedores criar lógica para interagir com o
D.O.M. Por exemplo, você pode usar JavaScript para
detectar quando um usuário clica em um botão e, em
seguida, usar o D.O.M para alterar a página de acordo.
Em resumo, o D.O.M é uma das principais tecnologias por
trás da interatividade da web. Ele permite aos
desenvolvedores criar aplicativos da web avançados,
tornando as páginas mais dinâmicas e responsivas a ações
do usuário.
Se você estiver interessado em desenvolvimento web, é
importante compreender o funcionamento do D.O.M e
como ele pode ser usado em conjunto com JavaScript.

Entendendo a Estrutura da D.O.M

A estrutura da D.O.M é baseada em uma árvore de objetos,
como acabamos de aprender. Cada elemento da página
da web é representado como um objeto e está ligado a
seus pais, filhos e irmãos na árvore. Isso permite que os
programadores naveguem de forma clara e eficiente na
estrutura do documento.

Cada objeto no D.O.M possui propriedades, métodos e

eventos. As propriedades representam atributos de um
elemento, como id, classe ou estilo.

79
 CODING_JAVASCRIPT 3
UNIDADE 9

Os métodos permitem que você execute ações específicas

em um elemento, como adicionar ou remover um elemento
filho. E os eventos são ações que ocorrem em um elemento,
como cliques ou arrastos, que podem ser detectados e
respondidos com JavaScript.

A estrutura da D.O.M é altamente flexível e permite que

você altere dinamicamente o conteúdo e a estrutura da
página. Por exemplo, você pode adicionar ou remover
elementos, mudar o conteúdo de um elemento, alterar as
propriedades CSS de um elemento ou mesmo criar novos
elementos na página.

Além de permitir a manipulação da estrutura da página, o

D.O.M também é responsável por garantir a
compatibilidade entre diferentes navegadores.
Antes da existência do D.O.M, havia diferenças
significativas entre os navegadores na forma como eles
interpretavam HTML e JavaScript. Isso tornava o
desenvolvimento de aplicativos web complexo e propenso
a erros.
Com a introdução do D.O.M, as diferenças entre
navegadores foram minimizadas e os desenvolvedores
agora podem escrever código que seja compatível com a
maioria dos navegadores modernos.

Isso significa que você pode escrever um aplicativo web

uma vez e esperar que ele funcione em diferentes
navegadores sem muitas mudanças ou correções.

80
 CODING_JAVASCRIPT 3
UNIDADE 9

Outra vantagem importante do D.O.M

é a sua capacidade de separar o
HTML, CSS e JavaScript em camadas
distintas. Isso significa que os
desenvolvedores podem escrever HTML
para estruturar a página, CSS para
controlar a aparência e JavaScript
para adicionar comportamento
dinâmico. Isso torna o desenvolvimento
web mais organizado e fácil de
manter, especialmente em projetos
maiores ou em equipe.

Em conclusão, o D.O.M é uma peça fundamental do

desenvolvimento web moderno e é amplamente utilizado
em aplicativos da web. Conhecer o D.O.M e saber como
usá-lo é uma habilidade valiosa para qualquer
desenvolvedor web ou profissional de TI que trabalhe com
aplicativos da web.

81
 CODING_JAVASCRIPT 3
UNIDADE 9

Conclusão

Em resumo, a unidade de D.O.M foi uma introdução

importante ao mundo do desenvolvimento web.
Aprendemos sobre a estrutura da D.O.M, como ela
representa elementos da página da web como objetos, e
como podemos usar JavaScript para manipular esses objetos
e criar aplicativos dinâmicos.

Também destacamos as vantagens do D.O.M, incluindo a

compatibilidade entre navegadores e a capacidade de
separar HTML, CSS e JavaScript em camadas distintas. Ao
final da unidade, temos uma compreensão sólida das
habilidades e conhecimentos necessários para começar a
trabalhar com o D.O.M e desenvolver aplicativos da web de
maneira eficiente.

82
 CODING_JAVASCRIPT 3

UNIDADE

MANIPULAÇÃO
DE D.O.M COM
JAVASCRIPT

83
 CODING_JAVASCRIPT 3
UNIDADE 10

Manipulação de D.O.M com

JavaScript
Acessando elementos do D.O.M
getElementById e getElementsByClassName são dois
métodos importantes do objeto document em JavaScript
que permitem selecionar elementos HTML na página.

• getElementById é usado para selecionar um elemento

HTML com um determinado ID. Observe que, como o ID é
único na página, apenas um elemento será selecionado
e retornado pelo método getElementById. Por exemplo:

• getElementsByClassName, por outro lado, é usado para

selecionar múltiplos elementos HTML com uma
determinada classe. Observe que, como uma classe
pode ser usada em múltiplos elementos, o método
getElementsByClassName retorna uma coleção de
elementos, que pode ser tratada como um array.
Observe tambem que, nesta unidade, os métodos
getElementsByClassName serão os únicos que serão
abordados. Por exemplo:

É importante ter em mente que existem outras formas de

selecionar elementos no D.O.M, como querySelector e
querySelectorAll, que se baseiam em seletores CSS.
No entanto, é importante lembrar que a programação é
vasta e sempre há mais para aprender, por isso é
recomendável buscar conhecimento em diversas fontes!

84
 CODING_JAVASCRIPT 3
UNIDADE 10

Acessando elementos do D.O.M

Você pode alterar o conteúdo de um elemento HTML

usando JavaScript e a propriedade "innerHTML".

Aqui está um exemplo:

O innerHTML também serve para adicionar outra tag HMTL.

Podemos alterar também as cores desse modo:

85
 CODING_JAVASCRIPT 3
UNIDADE 10

Modificando classe e ID de um elemento do D.O.M

Você pode adicionar ou remover classes de um elemento no

D.O.M usando JavaScript para alterar o estilo do elemento.
Aqui estão alguns exemplos de como adicionar ou remover
uma classe:

Observe que o elemento classList é usado para acessar e

manipular as classes do elemento. A propriedade classList
fornece uma série de métodos para gerenciar as classes do
elemento, como add para adicionar uma classe e remove
para remover uma classe. Seguem exemplos de como
adicionar ou remover um ID:

Observe que o atributo ID pode ser acessado e modificado

diretamente no elemento. Para adicionar um ID, basta
atribuir uma string válida ao atributo ID. Para remover um ID,
basta atribuir uma string vazia ao atributo ID. Lembre-se de
que o valor do atributo ID deve ser único na página, caso
contrário, você pode ter comportamentos inesperados.

86
 CODING_JAVASCRIPT 3
UNIDADE 10

Exercícios

Nste momento é importante você tentar desenvolver um

pequeno projeto por conta própria. No arquivo "index.html"
que criamos anteriormente, adicione um texto comum com
um ID e dois botões. Quando o primeiro botão for clicado,
uma função deve ser executada que muda a cor de fundo
do texto para vermelho. Ao clicar no segundo botão, a cor de
fundo deve mudar para azul.

Passo a passo:
1. O elemento com o ID "meuElemento" é criado usando a
tag <p> com o texto "Nosso texto".

2. Dois botões são criados: "Mudar para vermelho" e

"Mudar para azul". Cada botão tem uma função
associada ao seu evento de clique,
changeBackgroundRed() e changeBackgroundBlue(),
respectivamente.

3. As funções changeBackgroundRed() e
changeBackgroundBlue() são definidas no script.

87
 CODING_JAVASCRIPT 3
UNIDADE 10

4. A função changeBackgroundRed() busca o elemento

com o ID "meuElemento" usando o método
document.getElementById(). Em seguida, a propriedade
style.backgroundColor do elemento é definida como
"red", mudando sua cor de fundo para vermelho.

5. A função changeBackgroundBlue() funciona de

maneira semelhante, mudando a cor de fundo do
elemento para azul.

6. Quando um dos botões é clicado, a função associada é

executada, mudando a cor de fundo do elemento
"meuElemento".

88
 CODING_JAVASCRIPT 3
UNIDADE 10

Conclusão

Nesta unidade estudamos o Document Object Model

(D.O.M) e como acessar e modificar elementos dentro da
página HTML. O D.O.M é uma representação do código
HTML em forma de árvore, onde cada elemento HTML é
representado por um objeto.

Aprendemos como acessar elementos do D.O.M usando o

método document.getElementById() e como modificar seus
atributos, como cor de fundo, texto, etc. Além disso,
aprendemos sobre as propriedades CSS e como modificá-las
para mudar a aparência de um elemento.
Nós também abordamos como modificar a classe e o ID de
um elemento, usando a propriedade className e id,
respectivamente. Esta habilidade é importante para a
criação de estilos dinâmicos e interações com o usuário.
Por fim, vimos um exemplo complexo que combina tudo o
que aprendemos até agora, mostrando como acessar
elementos do D.O.M, modificar suas propriedades CSS e
classe, e criar interações com o usuário.
Este exemplo ilustrou a prática da manipulação do D.O.M e
como podemos criar aplicações dinâmicas e interativas
usando JavaScript.

89