18/04/2025, 00:16 Princípios Do Javascript

PRINCÍPIOS DO
JAVASCRIPT

Aula 1

INTRODUÇÃO AO
JAVASCRIPT

Introdução ao Javascript
Estudante, esta videoaula foi preparada especialmente para você.
Nela, você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 1/35
18/04/2025, 00:16 Princípios Do Javascript

Ponto de Partida
Bem-vindo, estudante! É com prazer que iniciamos, agora, nossa
jornada pelo mundo da programação utilizando a linguagem
Javascript, que é uma das linguagens mais importantes quando
pensamos em aplicações voltadas para web. Você verá que o
mercado de trabalho tem necessitado, cada vez mais, de mão de
obra qualificada, e é aí que você entra. Com o Javascript você será
capaz de desenvolver aplicações dinâmicas e interativas.

E por falar em programação, imagine-se na função de programador

de uma empresa que precisa atender a um cliente que está com
uma aplicação para seleção de estagiários apresentando um
problema. Vale mencionarmos que esse processo de seleção possui
duas etapas: a primeira se trata de uma prova online cujas regras
exigem que os estudantes estejam cursando o terceiro período de
um curso de nível superior e tenham rendimento de, no mínimo,
70%, para, então, serem selecionados para a segunda etapa, que
diz respeito a uma entrevista presencial.

No entanto, a equipe de recursos humanos percebeu que alguns

estudantes que não tiveram qualificação foram selecionados pelo
sistema para a prova presencial. Dois casos chamaram a atenção:
(1) um aluno do 5º semestre acertou 50% de questões e foi

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 2/35
18/04/2025, 00:16 Princípios Do Javascript

aprovado; (2) já outro, que tinha 80%, cursava o 2º período, mas o

sistema aprovou. E aí, tem alguma ideia de como resolver isso?

Vamos ver!

Vamos Começar!
A linguagem Javascript é indispensável nos dias de hoje. Para a
profissão de desenvolvimento web, é uma das principais linguagens
que compõem um rol de tecnologias utilizadas no desenvolvimento
de aplicações que funcionam nesse tipo de plataforma. Entre elas,
estão: HTML e CSS, que funcionam com o Javascript.

Muitos estudantes e até mesmo profissionais da área de tecnologia

costumam confundir o nome Javascript com Java. Não à toa, essa
linguagem foi criada pela antiga empresa Netscape, logo que a web
começou a ser desenvolvida, com o nome ECMAScript (MDN Web
Docs, 2023). A linguagem Javascript é considerada de alto nível,
dinâmica, interpretada e não tipada (Flanagan, 2013).

Diante disso, prepare-se, pois iniciaremos nosso percurso de

estudos de desenvolvimento web!

Como começar

Antes de tudo, para conseguir acompanhar as orientações desta e

das próximas aulas, acesse a área de console do navegador web de
sua escolha. Você precisa clicar com o botão direito dentro da
página e escolher a opção “Inspecionar”, como mostra a figura a
seguir:

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 3/35
18/04/2025, 00:16 Princípios Do Javascript

Figura 1 | Inspecionar página. Fonte: captura de tela do

navegador elaborada pelo autor.

Em seguida, acesse a opção console; nela, você conseguirá

executar os códigos simples que utilizaremos para esta parte
introdutória da disciplina. Veja:

Figura 2 | Acesso ao console. Fonte: captura de tela do

navegador elaborada pelo autor.

Em um projeto de página web, é possível criar um arquivo de

Javascript com a extensão “.js”; ainda, é preciso ligar os arquivos de
Javascript ao arquivo HTML de seu projeto, e um exemplo de código
que cumpre essa tarefa é o seguinte:

<script src=>
</script>.

A sintaxe da linguagem Javascript é simples, como você verá

adiante

Tipos de dados e variáveis

Para entender como são tratados os valores, as variáveis e seus

tipos em Javascript, leia o bloco de código escrito nessa linguagem
e que pode ser encontrando em Flanagan (2013), como mostra a
figura a seguir:

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 4/35
18/04/2025, 00:16 Princípios Do Javascript

Figura 3 | Código explicando Javascript. Fonte: Flanagan (2013).

Siga em Frente...

Operadores aritméticos e relacionais

Para as operações matemáticas, vejamos alguns operadores que

podem ser utilizados:

Operador Descrição
+ Utilizado para efetuar soma.
- Utilizado para efetuar subtração.
* Utilizado para efetuar multiplicação.
/ Utilizado para efetuar divisão.
** Utilizado para efetuar exponenciação.
% Utilizado para obter o resto de uma divisão.
= Operador de atribuição.

Quadro 1 | Operadores aritméticos. Fonte: adaptado de Oliveira

(2020).

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 5/35
18/04/2025, 00:16 Princípios Do Javascript

Quanto aos operadores de relacionais, também chamados de

operadores de comparação, temos alguns dos principais:

Operador Descrição
== Igual
=== Exatamente igual (conteúdo e tipo de dado)
!= Diferente
< Menor que
<= Menor ou igual
> Maior que
>= Maior ou igual

Quadro 2 | Operadores relacionais. Fonte: adaptado de Oliveira

(2020).

Operadores lógicos

Os operadores lógicos são muito utilizados em estruturas de

condição, mas não se preocupe, pois você conhecerá melhor esse
tipo de estrutura.

Operador Descrição
&& E (AND)
|| OU (OR)
! NÃO (NOT)

Quadro 3 | Operadores lógicos. Fonte: adaptado de Oliveira (2020).

Veja o exemplo de código a seguir:

Figura 4 | Uso de operadores lógicos. Fonte:

elaborada pelo autor.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 6/35
18/04/2025, 00:16 Princípios Do Javascript

Vamos Exercitar?
Vejamos, agora, o código que precisa ser corrigido. É importante
lembrar que você precisa corrigir um erro no sistema de seleção de
estagiários de seu cliente. Recorde que alguns estudantes que não
tiveram qualificação foram selecionados pelo sistema para a prova
presencial. Vamos resolver isso:

Figura 5 | Código a ser analisado. Fonte: elaborada pelo autor.

O código acima apresenta uma função que calcula se um estudante

foi aprovado ou não para o processo seletivo de estágio, e para a
solução desse problema, faz-se necessário o conhecimento de
operadores lógicos e relacionais.

Vejamos as regras de aprovação:

A nota deve ser de, pelo menos, 70%, logo, a nota deve ser
maior ou igual a 0.7.
O aluno deve ter cursado, pelo menos, 3 semestres.

Convertendo essas regras para expressões, temos:

nota >= 0.7.

semestres_cursados >= 3.

Agora, vamos analisar as linhas 17 a 22, em que temos as

expressões que definem se o aluno foi aprovado ou não para a
entrevista. O primeiro erro está no uso do operador >= na linha 18.
Ainda, na mesma linha, o operador || está sendo usado

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 7/35
18/04/2025, 00:16 Princípios Do Javascript

incorretamente, pois deveria ser utilizado o &&, e esse fragmento de

código deveria ficar assim:

Figura 6 | Correção. Fonte: elaborada pelo autor.

Simples, não é?

Saiba Mais
No artigo, The Top Programming Languages 2023, você verá a
ranking das principais linguagens de programação de 2023
elaborado pela organização IEEE.

CASS, S. The Top Programming Languages 2023. IEEE Spectrum.

2023.

O MDN Web Docs, é uma fonte oficial mantida pela comunidade de

desenvolvedores. Nela, você encontrará tudo sobre Javascript.

MDN WEB DOCS. Guia de JavaScript. 2023.

Há, também, um artigo bem completo sobre vários recursos do

Javascript, incluindo tudo que estudamos na aula de hoje, chamado
Aprendendo JavaScript, de Filipe Del Nero Grillo e Renata Pontin de
Mattos Fortes.

GRILLO, F. D. N.; FORTES, R. P. de M. Aprendendo JavaScript.

2008.

Por fim, acesse o material que fala sobre todos os operadores,

expressões e keywords da linguagem Javascript.

MDN WEB DOCS. Expressões e operadores. 2023.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 8/35
18/04/2025, 00:16 Princípios Do Javascript

Referências Bibliográficas
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João
Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

MDN WEB DOCS. Javascript. 2022. Disponível em:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript. Acesso
em: 10 jan. 2024.

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. Javascript descomplicado:

programação para web, IoT e dispositivos móveis. São Paulo: Érica,
2020.

Aula 2

ESTRUTURAS
CONDICIONAIS

Estruturas condicionais
Estudante, esta videoaula foi preparada especialmente para você.
Nela, você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 9/35
18/04/2025, 00:16 Princípios Do Javascript

Ponto de Partida
Agora que você já compreendeu os conceitos básicos da linguagem
Javascript, é hora de identificar conceitos de programação
existentes em aplicações mais avançadas, compreendendo o
funcionamento das estruturas condicionais. Esse tipo de estrutura é
muito utilizado em diversas aplicações, pois se trata de uma das
formas mais simples e eficazes de resolver questões de ordem
lógica. O interessante é que nós utilizamos decisões baseadas em
condições o tempo todo.

Ao longo desta aula, nós veremos a importância do domínio das

estruturas condicionais para se atuar no mercado de trabalho de TI
com programação, sendo crucial entender esse conceito para
empregá-lo, quando for o caso. Aliás, nós utilizaremos estruturas
condicionais para implementar melhorias em uma aplicação que
você já conhece. Você se lembra daquela empresa na qual você
hipoteticamente trabalha e que tem um sistema para seleção de
estagiários? Pois é, você precisará alterar a aplicação a pedido da
empresa, que, agora, deseja que o estudante entre para o banco de
currículos cumprindo apenas a nota mínima de 70%. Se ele também
estiver cursando ao menos o terceiro semestres, continuará sendo
aprovado, caso contrário, reprovado.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 10/35
18/04/2025, 00:16 Princípios Do Javascript

Você imagina como pode resolver esse problema utilizando

estruturas condicionais? Reflita um pouco sobre essa proposta e
logo nos encontraremos para a resolução do caso.

Bons estudos!

Vamos Começar!
A utilização de estruturas condicionais é indispensável na
construção de códigos. Em Javascript e outras linguagens, é
possível executar partes específicas de código, chamadas de
blocos, que só serão executadas se algumas condições forem
verdadeiras. Para o caso de a condição não ser verdadeira, o fluxo e
execução serão alterados.

Nesta aula, você conhecerá a estrutura de repetição if, if..else e

essa mesma estrutura organizada de forma encadeada, e isso
significa que podemos escrever uma estrutura do tipo if...else dentro
de outra. Confuso? Você verá que não. Venha conosco, pois lhe
mostraremos como esse tipo de estrutura funciona.

Estrutura condicional if

As estruturas condicionais ou estruturas para controle de fluxo do

programa (Oliveira; Zanetti, 2020) servem para mexer no fluxo de
execução de um código. O if, quando traduzido para o português,
significa “se”, dessa forma, podemos determinar uma condição, em
que, se verdadeira, o código do bloco será executado. Um bloco é
considerado uma parte do código, que é delimitada por chaves { }.
Veja um exemplo:

Figura 1 | Bloco condicional. Fonte:

elaborada pelo autor.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 11/35
18/04/2025, 00:16 Princípios Do Javascript

A ideia por trás do funcionamento desses blocos é bem simples; o

resultado da condição precisa ser verdadeiro para que os comandos
dentro do bloco sejam executados, caso contrário, não serão.

Para tornar nosso trabalho interessante, vamos utilizar o ambiente

de desenvolvimento VSCode. Veja:

Figura 2 | Exemplo de código com if. Fonte: elaborada pelo

autor.

No bloco que está entre as linhas 10 e 13, verifica se há um nome

dentro da variável; se houver, mostrará uma mensagem utilizando o
alert, que é uma caixa de diálogo, e a mesma mensagem aparecerá
no console do navegador, ficando assim:

Figura 3 | Resultado do código. Fonte: elaborada pelo

autor.

Siga em Frente...

Estrutura condicional if...else

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 12/35
18/04/2025, 00:16 Princípios Do Javascript

A estrutura condicional permite adicionar uma execução à estrutura

if; diante disso, já pensou oferecer uma alternativa para o caso de a
condição que está sendo testada no If não ser falsa? É aí que entra
o else. Ele será executado caso a condição em if for falsa e a
condição else exista (MDN Web eDocs, 2023). Assim sendo, como,
então, ficaria a utilização dessa estrutura se você levasse em
consideração o exemplo de código anterior?

Tire o comando console.log e comente o código. Veja como ficará:

Figura 4 | Estrutura condicional if...else. Fonte: elaborada pelo

autor.

Estrutura condicional if...else aninhada

A estrutura condicional if...else pode, ainda, ser construída

contendo, dentro de si, outra estrutura if...else. A depender do
problema que se pretende resolver, esse formato de escrita fará
muito sentido, e para que fique fácil a compreensão, imagine uma
aplicação que faça a relação entre nota e conceito. Por exemplo, se
um estudante tira nota entre 8 e 10, isso significa conceito A; já as
notas entre 5 e 7,9, conceito B; e se ele não recebe nota, obtém, por
sua vez, uma mensagem. Veja:

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 13/35
18/04/2025, 00:16 Princípios Do Javascript

Figura 5 | if...else aninhado. Fonte: elaborada pelo autor.

Vamos Exercitar?
Você viu como funciona a estrutura condicional if...else nesta aula e
entendeu sua importância no contexto da programação, agora,
vamos fazer uso dessa forma de escrita de código para resolver o
problema apresentado no início desta aula.

Como deve se lembrar, a empresa solicitou uma alteração para

armazenar em um banco de currículos os nomes dos estudantes
que tiverem rendimento igual ou superior a 70%. Para resolver esse
problema, vamos utilizar o else...if e incluir mais uma condição a ser
verificada no código já atualizado anteriormente. Veja:

Figura 6 | Terceira condição com if...else. Fonte: elaborada pelo autor.

Saiba Mais

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 14/35
18/04/2025, 00:16 Princípios Do Javascript

Agora que você já compreendeu a relevância do uso de estrutura

condicional, vale a pena aprofundar seus conhecimentos, afinal, isso
criará boas oportunidades para você no mercado de trabalho.

O livro Javascript Descomplicado: Programação Para Web, Iot e

Dispositivos Móveis aborda, de um jeito simples e descomplicado,
a utilização de código Javascript, indispensável na busca de uma
boa colocação no mercado de trabalho.

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. JAVASCRIPT

DESCOMPLICADO - PROGRAMAÇÃO PARA WEB, IOT E
DISPOSITIVOS MÓVEIS. Editora Saraiva, 2020.

Leia, também, este excelente artigo que aborda a estrutura

condicional de um jeito bem simples. O tema é apresentado de
forma clara e objetiva, logo, sem dúvida, o ajudará a entender
melhor a utilização de if...else.

DEVMEDIA. JavaScript: Estrutura condicional if. 2019.

Há, também, um artigo bem completo sobre vários recursos do

Javascript, incluindo tudo que estudamos nesta aula; chama-se
Aprendendo JavaScript, de Filipe Del Nero Grillo e Renata Pontin de
Mattos Fortes, Tópico 4.3 Estruturas de controle (p. 13 e 14).

GRILLO, F. del N.; e FORTES, R. P. de M. Aprendendo javascript.

São Carlos: ICMC-USP. 2008.

Referências Bibliográficas
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João
Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

MDN WEB DOCS. Javascript. 2024. Disponível em:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript. Acesso
em: 10 jan. 2024.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 15/35
18/04/2025, 00:16 Princípios Do Javascript

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. Javascript descomplicado:

programação para web, IoT e dispositivos móveis. São Paulo: Érica,
2020.

Aula 3

ESTRUTURAS DE
REPETIÇÃO

Estruturas de repetição
Estudante, esta videoaula foi preparada especialmente para você.
Nela, você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

Ponto de Partida
https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 16/35
18/04/2025, 00:16 Princípios Do Javascript

Nesta aula, você terá contato com outro tipo de estrutura muito
comum na programação e que está presente em todas as
linguagens de programação. Estamos falando da estrutura de
repetição, que possibilita, por exemplo, que um dado bloco de
código seja repetido quantas vezes forem necessárias.

A estrutura de repetição é muito útil quando se deseja trabalhar com

listagem; no nosso caso, utilizaremos estrutura de repetição para
permitir que a nossa cliente, a empresa com a qual estamos
trabalhando aquele código para seleção de estágio, defina um
número máximo de pessoas a ocupar as vagas de estágio definidas.

As estruturas de repetição, também conhecidas como estruturas de

laços e iterações, oferecem um jeito fácil e rápido de executar uma
ação repetidas vezes (MDN Web Docs, 2023). Na linguagem
Javascript, existem, ao menos, oito formas de implementar esse tipo
de estrutura, e nesta aula você conhecerá as mais comuns e
utilizadas.

O domínio desse tipo de estrutura permitirá que você desenvolva

ainda mais seu raciocínio lógico-matemático, habilidade
indispensável para atuar no mercado de tecnologia.

Você se lembra da empresa na qual você hipoteticamente trabalha e

tem um sistema para seleção de estagiários? Pois é, será
necessário implementarmos uma nova regra à aplicação para
seleção de estagiários, que, agora, será feita com, no máximo, dez
estudantes. Para isso, empregaremos os conhecimentos desta aula
e utilizaremos uma estrutura de repetição, para que, ao chegar no
número de 10 pessoas, o sistema informe que a quantidade máxima
limite foi alcançada e encerre a aplicação.

Vamos começar?

Vamos Começar!

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 17/35
18/04/2025, 00:16 Princípios Do Javascript

Estrutura de repetição for

Esse tipo de estrutura permite a repetição de um determinado bloco

de comandos enquanto uma condição especificada previamente
seja verdadeira (Oliveira; Zanetti, 2021).

A sintaxe dessa estrutura é bem simples. Vamos entendê-la:

Figura 1 | Sintaxe laço For. Fonte:

elaborada pelo autor.

Como você pode notar, dentro dos parênteses desse laço, existem 3
partes; a primeira cria a variável que será utilizada para a contagem
de iterações, sendo necessário iniciá-la com algum valor; depois, na
segunda parte, faz-se necessário definir a condição de parada; por
fim, deve-se incrementar ou decrementar a variável criada na
primeira parte.

Vejamos um breve exemplo de um simples contador:

Figura 2 | Exemplo de contador. Fonte:

adaptada de Oliveira e Zanetti (2021).

Nesse código, na linha 2, foi criada a variável i, que recebe um valor

zero no começo. A condição de parada definida é para a variável i
com um valor menor que 5; nesse caso, quando i estiver com o valor
4, interromperá a execução do bloco. Ao final, foi feito incremento da
variável i com o símbolo de adição duas vezes; dentro do bloco,
será exibido um número sequencial no console do navegador.
Perceba que tudo que será executado foi delimitado na estrutura de
repetição por chaves { }, ou seja, tudo que será executado foi
colocado dentro das chaves.

Siga em Frente...
https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 18/35
18/04/2025, 00:16 Princípios Do Javascript

Estrutura de repetição while

O comando while executa um bloco de operações até que a

condição da instrução seja atendida (Zobot et al., 2020). Veja como
é a sintaxe dessa estrutura:

Figura 3 | Sintaxe da estrutura.

Fonte: elaborada pelo autor.

Agora, montaremos um exemplo semelhante ao que criamos com

laço For, só que com While. Vamos montar um contator para
percorrer os mesmos números anteriormente. Veja:

Figura 4 | Contador com While.

Fonte: elaborada pelo autor.

Assim como na estrutura do laço For, aqui, a condição de parada é

determinada dentro dos parênteses, e os comandos a serem
executados estarão dentro de chaves { } com o incremento da
variável.

Estrutura de repetição do...while

Esse tipo de estrutura é executado e só é encerrado quando a

condição especificada for falsa. Aqui, a verificação da condição só
acontecerá após a execução do bloco de programa a ser repetido
(Oliveira, 2020), e a sintaxe para esse tipo de estrutura é definida da
seguinte maneira:

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 19/35
18/04/2025, 00:16 Princípios Do Javascript

Figura 5 | Sintaxe do...while.

Fonte: adaptada de Flanagan.

Agora, vamos fazer o mesmo contador feito anteriormente, só que

com a estrutura de repetição apresentada aqui. Veja como ficaria:

Figura 6 | Contador com

do...while. Fonte: elaborada
pelo autor.

Veja que, nessa estrutura, o conteúdo do bloco será,

obrigatoriamente, executado ao menos uma vez, até que cheque a
condição de parada, e só então ele poderá continuar ou parar
definitivamente.

Vamos Exercitar?
Agora que você já conhece as principais estruturas de repetição, é
chegada a hora de colocar em prática. Lembra do nosso caso, o
qual é necessário implementar uma nova regra à aplicação para
seleção de estagiários, que, agora, será feita com, no máximo, dez
estudantes. Para isso, empregaremos os conhecimentos desta aula
e utilizaremos a estrutura de repetição While, para que, ao chegar
no número de 10 pessoas, o sistema informe que a quantidade
máxima limite foi alcançada e encerre a aplicação.

O código será parcialmente similar ao que desenvolvemos na aula

anterior, cabendo-nos, apenas, utilizar a estrutura de repetição
mencionada. Veja como ficará nossa aplicação:

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 20/35
18/04/2025, 00:16 Princípios Do Javascript

Figura 7 | Seleção de estágio para 10 pessoas. Fonte:

elaborada pelo autor.

Saiba Mais
Faz-se importante conhecer bem as estruturas de repetição, por
isso, é recomendado que você faça uma leitura dos seguintes
artigos:

MDN WEB DOCS. Laços e iterações. 2023.

Complementando esse artigo, este apresenta o mesmo tipo de

estrutura, com uma explicação clara e objetiva:

GARCEZ, L. P. https://dev.to/acaverna/lacos-de-repeticao-em-
javascript-50hjLaços de repetição em Javascript. DEV. 2021.

Há, também, um artigo bem completo sobre vários recursos do

Javascript, incluindo tudo que estudamos nesta aula; chama-se
Aprendendo JavaScript, de Filipe Del Nero Grillo e Renata Pontin de
Mattos Fortes, Tópico 4.3 Estruturas de controle (p. 15 e 16).

GRILLO, F. del N.; e FORTES, R. P. de M. Aprendendo javascript.

São Carlos: ICMC-USP. 2008.

Referências Bibliográficas
FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João
Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 21/35
18/04/2025, 00:16 Princípios Do Javascript

MDN WEB DOCS. Javascript. 2024. Disponível em:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript. Acesso
em: 10 jan. 2024.

OLIVEIRA, C. L. V.; ZANETTI, H. A. O. Javascript descomplicado:

programação para web, IoT e dispositivos móveis. São Paulo: Érica,
2020.

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. Node.js: programe de forma

rápida e prática. São Paulo: Editora Saraiva, 2021. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9786558110217/.
Acesso em: 10 jan. 2024.

ZABOT, D.; MATOS, E. de S. Aplicativos com bootstrap e

angular: como desenvolver apps responsivos. São Paulo: Érica,
2020. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536533049/.
Acesso em: 10 jan. 2024.

Aula 4

ESTRUTURA DE DADOS

Estrutura de dados
Estudante, esta videoaula foi preparada especialmente para você.
Nela, você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 22/35
18/04/2025, 00:16 Princípios Do Javascript

Ponto de Partida
Neste momento, iniciamos o estudo de estrutura de dados, além
disso, você terá contato com conceitos de funções e outro tipo de
dado que é fundamental na linguagem Javascript, pois permite
armazenar coleções de chaves e valores. Estamos falando dos
objetos.

Para nortear nossos estudos nesta aula, temos um novo desafio. A

empresa para a qual você está escrevendo código, agora, precisa
de uma aplicação que realize o agendamento para as entrevistas
com as pessoas selecionadas para as vagas de estágio. A empresa
quer que esse agendamento seja feito de forma a ordenar
alfabeticamente as pessoas e, ainda, ofereça dois horários
disponíveis, para o caso de ser necessário realizar algum
reagendamento de forma manual. Diante disso, fique atento à aula,
pois você verá tudo que será necessário para resolver esse desafio.

E aí, o que está achando? Você deve ter notado que os conteúdos
começam a ficar um pouco mais complexos, não é isso? Tenho
certeza que você dará conta do que estamos propondo para esta
aula. Vamos começar?

Vamos Começar!
https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 23/35
18/04/2025, 00:16 Princípios Do Javascript

Estrutura de dados

As estruturas de dados na programação são essenciais em muitos

sentidos; elas favorecem o trabalho de qualquer pessoa que
trabalhe com programação. Em Javascript, as estruturas de dados
mais conhecida é o array, que é considerado objeto de alto nível,
semelhante a listas (MDN, 2023).

Array

No array, elementos do tipo texto devem ser escritos entre aspas e,

se houver mais de um, separados por vírgula. Veja um exemplo:

Figura 1 | Lista de compras com array. Fonte: elaborada pelo autor.

Um array é organizado por posições que são acessadas por número

que iniciam em zero. Por exemplo, na imagem acima, o elemento
“leite” está na posição zero do array, já “maçã” está na posição um e
assim por diante. Essas posições são chamadas de índices
(Oliveira; Zanetti, 2020).

Existem algumas propriedades e métodos que podem ser utilizados

para manipular um array. Vejamos:

length: propriedade utilizada para identificar o número de

elementos de um array (MDN, 2023).
splice(): esse método retorna uma cópia de parte de um array
criando um subarray, que é definido a partir da informação de
uma posição inicial e final (MDN, 2023).
push(): Método que serve para adicionar elementos ao final de
um array, com retorno do novo comprimento desse array (MDN,

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 24/35
18/04/2025, 00:16 Princípios Do Javascript

2023).
pop(): esse método remove o último elemento de um array
(MDN, 2023).
shift(): para apagar o primeiro elemento, basta utilizar esse
método (MDN, 2023).

Siga em Frente...

Funções

As funções são consideradas blocos de códigos que são executados

quando um script é interpretado. Para declarar uma função, é
necessário fazer uso da palavra-chave function, e ela pode ter ou
não argumentos (Grillo; Fortes, 2008). Você entenderá a sintaxe de
uma função com o exemplo a seguir:

Figura 2 | Sintaxe de uma function. Fonte:

elaborada pelo autor.

Veja o exemplo de uma função para somar dois números que serão
informados pelo usuário da aplicação:

Figura 3: Função para soma. Fonte: elaborada

pelo autor.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 25/35
18/04/2025, 00:16 Princípios Do Javascript

Se utilizássemos uma maneira mais elegante para escrita de função,

a Arrow Function, a mesma função escrita anteriormente, ficaria
desta maneira:

soma = (n1, n2) => n1 + n2

Percebeu como esse tipo de escrita deixa muito mais enxuto, limpo
e elegante o código de uma função?

Objetos

Objeto pode conter diversos valores de tipos diferentes

armazenados nele, bem como possui funções que operam sobre
esses valores (Grillo; Fortes, 2008). Esses objetos podem ser
criados de duas maneiras, veja:

Nesse exemplo, criamos um objeto genérico

var objeto = new Object();

Neste outro, criamos um objeto literal

var objeto = {atributo1: ‘valor1’, atributo2: ‘valor2’}

Note que a estrutura dessa segunda forma de declaração

assemelha-se muito à estrutura de chave e valor.

Vamos Exercitar?
E então, o que você achou dos conteúdos que estudamos na aula
de hoje? Interessante compreender como funciona um Array,
funções e objetos, não é mesmo?

Agora que você compreendeu bem esses novos conceitos, é hora

de colocar a mão na massa e realizar a criação de uma aplicação de
https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 26/35
18/04/2025, 00:16 Princípios Do Javascript

agendamento para as pessoas que foram selecionadas para o

estágio de sua empresa cliente. Lembre-se de que a empresa lhe
pediu um agendamento por ordem crescente de nomes e com dois
horários vagos para possíveis reagendamentos manuais. A solução
para esse problema será como o código apresentado a seguir:

Figura 4 | Resolução com array – parte 1. Fonte: elaborada pelo autor.

Nessa primeira parte, cria-se as variáveis necessárias para se

definir os horários e o array com os nomes selecionados, bem como
é feita a ordenação desses nomes.

Figura 5 | Resolução com array – parte 2. Fonte: elaborada pelo autor.

Saiba Mais
Para um melhor entendimento de todos os métodos e propriedades
que existem para manipulação de arrays em Javascript, faz-se
importante a leitura do artigo:

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 27/35
18/04/2025, 00:16 Princípios Do Javascript

MDN WEB DOCS. Array. 2024.

Há, também, um artigo bem completo sobre vários recursos do

Javascript, incluindo tudo que estudamos nesta aula; chama-se
Aprendendo JavaScript, de Filipe Del Nero Grillo e Renata Pontin de
Mattos Fortes, Tópico 4.3 Estruturas de controle (p. 16 - 19).

GRILLO, F. del N.; e FORTES, R. P. de M. Aprendendo javascript.

São Carlos: ICMC-USP. 2008.

Referências Bibliográficas
GRILLO, F. del N.; FORTES, R. P. de M. Aprendendo JavaScript.
São Carlos: ICMC-USP, 2008.

MDN WEB DOCS. Javascript. 2024. Disponível em:

https://developer.mozilla.org/pt-
BR/docs/Web/JavaScript/Reference/Global_Objects/Array. Acesso
em: 11 jan. 2024.

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. Javascript descomplicado:

programação para web, IoT e dispositivos móveis. São Paulo: Érica,
2020.

Encerramento da Unidade

PRINCÍPIOS DO
JAVASCRIPT

Videoaula de Encerramento
https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 28/35
18/04/2025, 00:16 Princípios Do Javascript

Estudante, esta videoaula foi preparada especialmente para você.

Nela, você irá aprender conteúdos importantes para a sua formação
profissional. Vamos assisti-la?
Clique aqui para acessar os slides da sua videoaula.
Bons estudos!

Ponto de Chegada
Ao longo de nossas aulas, vimos os fundamentos iniciais da
linguagem Javascript. Iniciamos nossos estudos abordando os tipos
de dados e variáveis existentes na linguagem, compreendemos a
importância dos tipos de operadores que podemos utilizar e vimos
como utilizá-los juntamente com estruturas condicionais. Esse tipo
de estrutura está presente em várias linguagens e é muito utilizado
na construção de código aplicado às mais variadas situações, pois
com esse tipo de estrutura resolvemos vários tipos de problema.

As estruturas de repetição, por sua vez, permitem a execução

repetidas vezes de um determinado bloco de código, até que uma
determinada condição seja atendida, mas vale lembrar que os vários
tipos de repetição mudam a forma como o bloco é executado, logo,
fique atento às nuances desses tipos de estrutura. Por fim, vimos
vários tipos de estrutura de dados e, entre eles, exploramos
conceitos de arrays e como esse tipo de estrutura de dados pode,

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 29/35
18/04/2025, 00:16 Princípios Do Javascript

facilmente, substituir um banco de dados, caso o volume de dados

seja relativamente pequeno.

Ainda, vimos também como construir uma função e vimos qual é a

finalidade desse tipo de código. Quando temos uma tarefa
específica que precisa ser executada várias vezes, faz muito sentido
montar a solução para essa tarefa dentro de uma função, pois elas
nos auxiliam na execução de blocos de código, e o mais legal é que,
agora, você sabe como é possível escrever uma função de forma
eficiente e elegante. Sabe de qual tipo de estrutura de função
estamos falando, não é? Claro, as arrow functions! Por fim, outra
estrutura de dados, os objetos, também têm muitas utilidades e
pode ser crucial na implementação de uma dada aplicação para
resolução de um problema.

Com os conhecimentos desta unidade você será capaz de elaborar

e analisar estruturas fundamentais do desenvolvimento utilizando
Javascript.

É Hora de Praticar!
A utilização de arrays se assemelha muito ao que uma aplicação
que utiliza banco de dados faz: armazenar um determinado dado.
Como visto nas aulas, os fundamentos do Javascript nos possibilita
construir uma aplicação mais robusta, tendo em vista que
compreendemos os principais recursos dessa linguagem até o
momento.

Agora, para colocarmos em prática tudo o que aprendemos, o seu

desafio consiste em desenvolver uma pequena aplicação que
servirá para criar uma lista de cadastro de usuários, algo presente
em todos os sistemas de e-commerce existentes atualmente. Alguns
exemplos são: Mercado Livre, Shopee, Shein, Amazon e outros.

Esse cadastro servirá para as pessoas que estão sendo alocadas

nas vagas de estágio, situação com a qual trabalhamos ao longo de

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 30/35
18/04/2025, 00:16 Princípios Do Javascript

todas as aulas. Para lidar com esse desafio, você poderá utilizar
uma estrutura de dados em Javascript que aprendemos na última
aula. Que tal utilizar a estrutura de array para esse desafio?

Sua aplicação deverá receber o nome informado do candidato e

armazená-lo no array, além de configurar a possibilidade de edição e
exclusão dessa lista. Se você, assim como eu, sente-se instigado
por desafios, vai se sentir muito bem com este.

E então, aceita o desafio? Vamos lá!

Reflita

Os tipos de dados e variáveis em Javascript são semelhantes a

outro tipo de linguagem que você conhece?
Você concorda que estamos, a todo instante, tomando
decisões com base em lógicas de raciocínio semelhantes
àquelas das estruturas de decisão?
Ficou claro como os elementos de um array são acessados via
código?
As operações possíveis são variadas, você não acha?

Resolução do estudo de caso

A aplicação consiste na criação de uma tela de cadastro simples,

somente para nomes. A ideia é armazenar esses nomes em um
array. Como a tarefa consiste em permitir a edição e exclusão dos
nomes, será necessário criarmos um formulário em HTML. Para
isso, vamos criar um formulário simples, como no código a seguir:

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 31/35
18/04/2025, 00:16 Princípios Do Javascript

Figura 1 | Código html. Fonte: elaborada pelo autor.

O resultado será algo como o mostrado na imagem a seguir:]

Figura 2 | Resultado da página. Fonte:

elaborada pelo autor.

O Javascript para essa página é algo que envolverá variáveis,

estruturas condicionais, estruturas de repetição, array e função.
Veja:

Figura 3 | Função 1 – manipula usuário. Fonte: elaborada pelo autor.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 32/35
18/04/2025, 00:16 Princípios Do Javascript

Essa função acessa o formulário e coleta do campo o nome

informado pela pessoa que está usando a aplicação; depois,
adiciona esse nome ao array criado na linha 14. Na linha 21, foi
chamada uma função que veremos a seguir:

Figura 4 | Função 2 – cria lista de usuários. Fonte: elaborada pelo autor.

Essa função cria uma lista abaixo da linha criada no html, exibida na
Figura 2, e ao criá-la, exibe o nome lançado e, à frente dele, dois
botões, um para editar e outro para excluir. Esses botões
funcionarão graças as funções a seguir:

Figura 5 | Funções 3 e 4 - editar e excluir. Fonte: elaborada pelo autor.

Agora, ao digitar um nome e clicar no botão Salvar, aparecerá,

abaixo, o nome digitado com dois botões, um para editar e outro
para excluir, veja:

Figura 6 | Aplicação de guarda de nomes. Fonte:

elaborada pelo autor.

Dê o play!

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 33/35
18/04/2025, 00:16 Princípios Do Javascript

Assimile

Agora vamos ver um breve resumo de tudo que vimos até o

momento, por meio desse infográfico que sintetiza os
conhecimentos que conquistamos até aqui.

Figura | Introdução ao Javascript. Fonte: elaborada pelo autor.

Referências

FLANAGAN, D. JavaScript: o guia definitivo. Tradução: João

Eduardo Nóbrega Tortello. 6. ed. Porto Alegre: Bookman, 2013.

MDN WEB DOCS. Javascript. 2024. Disponível em:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript. Acesso

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 34/35
18/04/2025, 00:16 Princípios Do Javascript

em: 11 jan. 2024.

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. Javascript descomplicado:

programação para web, IoT e dispositivos móveis. São Paulo: Érica,
2020.

OLIVEIRA, C. L. V.; ZANETTI, H. A. P. Node.js: programe de forma

rápida e prática. São Paulo: Editora Saraiva, 2021. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9786558110217/.
Acesso em: 11 jan. 2024.

ZABOT, D.; MATOS, E. de S. Aplicativos com bootstrap e

angular: como desenvolver apps responsivos. São Paulo: Érica,
2020. Disponível em:
https://integrada.minhabiblioteca.com.br/#/books/9788536533049/.
Acesso em: 11 jan. 2024.

https://alexandria-html-published.platosedu.io/486daf3f-64f4-45ef-b96d-e257a23d3c18/v1/index.html 35/35