CW - Unidade 1 - Desenvolvimento em JavaScript

Aula 1
INTRODUÇÃO AO JAVASCRIPT
Nesta aula, você conhecerá os fundamentos dessa linguagem, sua história, sintaxe, tipos de
variáveis e operadores.
51 minutos
INTRODUÇÃO
Olá, estudante!
Nos dias atuais, o uso de aplicações web se tornou o padrão para grande parte dos sistemas empresariais, e
isso se deve à facilidade de implementação desse tipo de sistema, à interoperabilidade e à fácil adaptação dos
colaboradores, uma vez que o acesso é feito de maneira padronizada por navegadores web (browsers). Nesse
contexto, a necessidade de desenvolvedores de aplicações web proporcionou uma imensa demanda de
profissionais de tecnologia da informação com conhecimento nas tecnologias web, como linguagens de
marcação, de estilos e de programação. O JavaScript se enquadra nesta última categoria, sendo considerada
uma linguagem vital para o desenvolvimento de sistemas dinâmicos e interativos.
Nos últimos anos, o JavaScript despontou como uma das principais linguagens de programação com amplas
aplicações em diversas áreas. Nesta aula, você conhecerá os fundamentos dessa linguagem, sua história,
sintaxe, tipos de variáveis e operadores.
Pronto para adentrar no mundo do desenvolvimento web? Então, vamos lá!
Bons estudos!
TIPOS DE DADOS E VARIÁVEIS

Imprimir
JavaScript é uma linguagem de programação usada em aplicações web e considerada uma linguagem de scripts,
interpretada, com tipagem dinâmica e fraca e de suporte à orientação a objetos (MARIANO; DE MELO-MINARDI,
2017); além disso, ela possui uma sintaxe simples, o que contribuiu para que uma ampla comunidade de
desenvolvedores se formasse. Em geral, JavaScript é utilizada em sinergia com as linguagens HTML e CSS para o
desenvolvimento de websites e outros tipos de aplicações web (FLANAGAN, 2011).
A princípio, a linguagem JavaScript foi criada para ser executada em ambiente client-side, ou seja, a execução
era feita diretamente nos navegadores web dos usuários (client). Ela surgiu como um complemento para as
linguagens que executavam em back-end, ou seja, diretamente nos servidores web remotos, trazendo a
possiblidade de páginas mais interativas. Recentemente, ferramentas como o “Node.js” têm permitido a
execução do JavaScript também em ambiente back-end, o que tem ampliado ainda mais a popularidade da
linguagem. Hoje, JavaScript é considerada uma das linguagens mais populares do mercado, por isso, vamos
conhecer um pouco mais sua história.
Uma breve história do JavaScript

A linguagem JavaScript foi proposta por Brendan Eich em meados dos anos 1990, visando a torna-la uma
linguagem de scripts para ser executada no navegador Netscape. A priori, a linguagem foi chamada de
LiveScript, mas depois foi renomeada para JavaScript, uma vez que a empresa Netscape trabalhava em
colaboração com a Sun Microsystems (empresa que mantinha a linguagem Java). A escolha do nome foi apenas
uma jogada de marketing para se aproveitar um pouco da popularidade do Java, entretanto, uma coisa deve
ficar claro: Java e JavaScript não são a mesma coisa! JavaScript é uma linguagem criada para ser executada em
navegadores, enquanto Java é uma linguagem compilada interpretada em máquina virtual (Figura 1).
Figura 1 - Java e JavaScript (JS) são duas linguagens de programação distintas

Ao pronunciar o nome do JavaScript de forma reduzida, opte pela sigla JS e nunca por chamá-lo de Java. Muitas vezes, JavaScript e
ECMAScript (ES) são usados como sinônimos, apesar de ECMAScript ser uma especificação do padrão web, enquanto JavaScript é uma das
possíveis implementações.
Fonte: elaborada pelo autor.
Entre 1996 e 1997, JavaScript foi adotada pela ECMA (European Computer Manufacturers Association), uma
associação internacional responsável pela padronização de especificações web. A partir de então, surgiu a
denominação ECMAScript para se referir à especificação padrão da linguagem JavaScript publicada pela norma
ECMA-262. Desde então, JavaScript passou a ser adotado pela maior parte dos desenvolvedores de navegadores
de internet, inclusive a Microsoft, que possuía sua própria linguagem de scripts na época.
Agora que conhecemos um pouco da história do JavaScript, vamos começar a construir algumas aplicações.
Executando JavaScript
JavaScript pode ser executado a partir de um navegador web, como Chrome, Firefox, Edge, Opera, Safari e, até
mesmo, o extinto Internet Explorer. A maior parte dos navegadores fornece ferramentas para edição de código
JavaScript diretamente do navegador. Por exemplo: o navegador Google Chrome fornece um console de edição
na ferramenta de inspecionar (Figura 2).
Figura 2 - Console de edição do Chrome
Pode ser aberto clicando com o botão direito, em “inspecionar” e, depois, na aba “console” (ou pressionando F12). O código JavaScript pode
ser executado diretamente no console.
Pode-se, ainda, editar código em JavaScript usando uma IDE, como VSCode – Visual Studio Code (disponível em:
https://code.visualstudio.com) (conforme a Figura 3) ou Sublime Text (disponível em:
https://www.sublimetext.com).
Figura 3 - Editando JS no VSCode

Fonte: captura de tela do VSCode elaborada pelo autor.
Nesse caso, um script pode ser testado usando-se um navegador web a partir de uma página HTML. Arquivos
JavaScript são salvos na extensão “.js”, bem como é possível incluí-los diretamente em um arquivo HTML usando
a tag <script> (FLANAGAN, 2011), como:
Figura 4 - Código 1
<script src="meu_primeiro_script.js"></script>
O código 1 acima carrega um script denominado “meu_primeiro_script.js” diretamente em um arquivo HTML;

agora, vamos ver como a sintaxe da linguagem funciona.
Sintaxe da linguagem
Vamos começar criando nosso primeiro script usando JavaScript. Um script é um conjunto de instruções que um
computador pode seguir (DUCKETT, 2014). Em um editor de texto, crie um arquivo chamado
“meu_primeiro_script.js” e adicione o seguinte conteúdo:
1 // meu primeiro programa JS

2 alert(“Ola, mundo!”);
Note que, na linha 1, temos um comentário: um comando que será ignorado na execução do script (que serve
para documentar o código). O JavaScript permite que comentários sejam feitos de duas formas: com // ou com
/* */ (CROCKFORD, 2008).
Na linha 2, vemos o comando alert com a mensagem “Ola, mundo!”. Veja que essa linha é encerrada com um
sinal de ponto e vírgula (um sinal opcional para encerramento de linhas na linguagem JavaScript). Entretanto,
para testar esse arquivo, é necessária a ajuda de um arquivo HTML. Crie um arquivo chamado “index.html” com
o seguinte conteúdo:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="meu_primeiro_script.js"></script>
5 </head>
6 <body></body>
7 </html>
Esse arquivo deverá estar no mesmo diretório do seu primeiro script. Agora, abra o arquivo HTML em um
navegador e verá algo parecido com isto (Figura 6):
Figura 7 - Meu primeiro script. Testado usando Chrome

O comando alert exibirá uma caixa de diálogo com uma mensagem que continuará sendo exibida enquanto o
usuário não clicar no botão OK.
Você aprendeu a exibir mensagens na tela, mas e se quiser armazenar essa mensagem para usá-la mais tarde?
Poderá fazer isso usando uma variável.
Variáveis e tipos de dados

Variáveis são estruturas de dados que armazenam informações na memória. Pense em uma variável como se
fosse uma caixa; você pode guardar uma informação e, depois, acessá-la sempre que necessário. Veja um
exemplo:
2 mensagem = "Ola, mundo!";

3 alert(mensagem);
Veja que, após declarar a variável, é possível chamá-la nas linhas seguintes. Observe, ainda, que a variável
armazena um texto, e chamamos isso de strings ou cadeias de caracteres. Variáveis podem armazenar outros
tipos de dados, como números, arrays, objetos e muitos outros tipos (Quadro 1).
Quadro 1 - Tipos de variáveis
Variável Explicação Exemplo
String Variável de texto que deve ser declarada com apóstrofos ou aspas. var variavel = ‘Ola
mundo’;
Numérico Numerais inteiros ou flutuantes. var variavel = 3;
Boolean Variável verdadeira (true) ou falsa (false). var variavel = true;
Array Coleção de dados sequenciais. var meuArray =

[‘um’,2,’tres’,4];
Objeto Coleção de dados organizados como chaves e valores que permite var meuObjeto = {
outros tipos de dados.
1: “olá”,
2: “tudo bem”
Fonte: adaptado de Mariano e Melo-Minardi (2017).
Podemos, ainda, declarar variáveis usando as palavras let, const ou var, ambas as formas permitem armazenar
dados, mas a diferença está no escopo e na forma de acesso, e falaremos mais sobre isso nas próximas aulas.
VIDEOAULA: TIPOS DE DADOS E VARIÁVEIS

Nesta aula, você verá uma breve introdução à linguagem JavaScript e aprenderá os tipos de variáveis. Bons
estudos!
Videoaula: Tipos de dados e variáveis
Para visualizar o objeto, acesse seu material digital.
OPERADORES ARITMÉTICOS E DE COMPARAÇÃO

Você já aprendeu como exibir mensagens por meio do comando alert, e podemos dizer que alert( ) é uma
função nativa do JavaScript cujo objetivo é carregar uma caixa de diálogo no navegador. Entretanto, é possível
exibirmos uma mensagem de uma forma mais elegante: usando o console do navegador. Para isso, substitua o
comando alert( ) por console.log( ). Assim:
2 console.log("Ola, mundo!");
Note que, agora, nada será exibido na tela, mas você pode ver a mensagem acessando o console na ferramenta
inspecionar (Figura 10).
Figura 10 - Exibindo mensagens usando o console do navegador Chrome (abra qualquer página em um navegador, clique com o botão
direito, vá em inspecionar e, depois, em console)
Fonte: captura de tela do console do Chrome elaborada pelo autor.
Agora que você conheceu o console da ferramenta “inspecionar” do navegador, podemos estudar alguns dos
operadores JavaScript.
Operadores aritméticos
Operadores são símbolos usados para diversos propósitos, como operações matemáticas, lógicas e de
comparação. Um exemplo clássico é o operador de atribuição (representado, simplesmente, pelo símbolo de
igual “=”) que apresentamos anteriormente, quando declaramos variáveis.
Em JavaScript, podemos realizar operações matemáticas usando operadores aritméticos (Quadro 2).
Quadro 2 - Operadores aritméticos
Operador Descrição
+ Soma.
- Subtração.
* Multiplicação.
/ Divisão.
** Exponenciação.
% Módulo (retorna o resto da divisão).
= Operador de atribuição.
Fonte: adaptado de Mariano e Melo-Minardi (2017).
Para testarmos essas operações, podemos utilizar o console. Observe o resultado de algumas operações
matemáticas (Figura 9).
Figura 11 - Operações matemáticas usando o console
Note que o operador de atribuição foi incluído, mas ele não é um operador matemático de igualdade e sim um
operador usado para aplicar um valor a uma variável. Para se verificar igualdades, é preciso utilizar os
operadores de comparação.
Operadores de comparação
Os operadores de comparação permitem a realização de comparações lógicas entre expressões. Note que
aprendemos como realizar operações matemáticas, e com os operadores de comparação, podemos verificar se
determinadas expressões são verdadeiras (true) ou falsas (false).
Quadro 3 - Operadores de comparação
Operador Descrição
== Igual.
=== Igual e do mesmo tipo.
!= Diferente.
!== Diferente e de tipos diferentes.
> Maior que.
< Menor que.
>= Maior ou igual.
<= Menor ou igual.
Fonte: Fonte: adaptado de Mariano e Melo-Minardi (2017).
Observe o exemplo a seguir (Figura 8):
Figura 12 - Operações comparativas usando o console
Fonte: Fonte: elaborada pelo autor.

Aqui, verificamos se a expressão 2+2 dá um resultado maior que 5 (o que é falso), e note que o console
retornou false; depois, verificamos se 2+2 é igual a 4 (o que é verdadeiro, do inglês true).
Uma comparação retornará uma variável do tipo booleana, que poderá ser true ou false. Nas próximas aulas,
você aprenderá a importância de realizar essas comparações para alterar o fluxo de execução do programa,
mas, em primeiro lugar, você precisa conhecer os operadores lógicos.
VIDEOAULA: OPERADORES ARITMÉTICOS E DE COMPARAÇÃO

Nesta aula, você conhecerá alguns dos operadores matemáticos e lógicos da linguagem JavaScript. Bons
estudos!
Videoaula: Operadores aritméticos e de comparação
OPERADORES LÓGICOS
Os operadores lógicos, como o próprio nome diz, permitem a realização de operações lógicas, isto é, operações
que envolvem comparar duas ou mais expressões (com exceção do operador NOT, que reverte a expressão).
Existem três principais operadores lógicos em JavaScript: AND, OR e NOT.
A tabela a seguir resume o uso desses operadores (Tabela 1):
Tabela 1 - Operadores lógicos: tabela verdade. 1 é equivalente a true (verdadeiro) e 0 é equivalente a false (falso)
Entrada #1 Entrada #2 AND OR NOT
0 0 0 0 1
1 0 0 1 1 (AND) / 0 (OR)
0 1 0 1 1 (AND) / 0 (OR)
1 1 1 1 0
1 - - - 0
0 - - - 1
Para ilustrar, nos exemplos a seguir, vamos utilizar uma expressão bastante simples: vamos declarar uma
variável numérica e verificar se ela é par ou ímpar. Podemos fazer isso usando o operador de módulo “%”, que
retorna o resultado de uma divisão inteira (se o número dividido por 2 tiver resto 0, será par, se tiver resto 1,
será ímpar):
1 x = 1;
2
3 // expressões
4 expressao_1 = (x % 2 == 0) // é par?
5 expressao_2 = (x % 2 == 1) // é ímpar?
6
7 console.log(expressao_1) // false
8 console.log(expressao_2) // true
Veja que, nesse caso, apenas a segunda expressão é verdadeira. Vamos comparar, agora, as duas ao mesmo
tempo.
Operador AND (&&)

O operador AND (e) avalia se as duas expressões são válidas ao mesmo tempo. Se pelo menos uma das
expressões for falsa, o resultado sempre será falso. Para o operador AND em JavaScript, usamos os símbolos
&&. Por exemplo:
1 x = 1;
2
3 // expressões
4 expressao_1 = (x % 2 == 0) // é par?
6
7 console.log(expressao_1 && expressao_2) // false
Operador OR (||)
O operador OR (ou) avalia se uma ou outra expressão é válida. Se pelo menos uma das expressões for
verdadeira, a comparação sempre resultará em verdadeiro. Para o operador OR em JavaScript, usamos os
símbolos ||. Por exemplo:
1 x = 1;
2
3 // expressões
4 expressao_1 = (x % 2 == 0) // é par?
6
7 console.log(expressao_1 || expressao_2) //true
Operador NOT (não)

O operador NOT (não) inverte o resultado da expressão e pode ser inserido com o símbolo de !. Veja:
1 x = 1;
2 // expressões
3 expressao_1 = (x % 2 == 0) // é par?
5
6 console.log(!expressao_1) // true
7 console.log(!expressao_2) // false
8
9 // combinado com AND e OR
10 console.log(!(expressao_1 && expressao_2)) // true

11 console.log(!(expressao_1 || expressao_2)) // false
Note, aqui, que foram utilizados parênteses para isolar a combinação entre expressões. Observe que podemos
usar o operador NOT várias vezes. Por exemplo:
Figura 17
console.log(!expressao_1 && !expressao_2) // false
Preste atenção na posição que inserimos o operador NOT. Nesse caso, verificamos se a expressão 1 e 2 são
falsas (note que o operador de negação inverte a comparação feita). O resultado, nesse caso, foi falso.
VIDEOAULA: OPERADORES LÓGICOS

Nesta aula, você aprenderá a realizar comparações usando operadores lógicos do JavaScript. Bons estudos!
Videoaula: Operadores lógicos

ESTUDO DE CASO
A empresa de publicidade e desenvolvimento de sites “A”, que atende a muitos clientes em várias áreas,
contratou você como desenvolvedor web front-end júnior, e cabe a você, então, auxiliar no suporte aos
sistemas existentes e no desenvolvimento de novos projetos. Essa empresa possui uma série de aplicações
web, tanto para gestão de projetos internos quanto para a interação com o cliente. Apesar de atuar há muitos
anos no mercado, a empresa possui uma equipe pequena, focada em tecnologia da informação, e deseja,
agora, expandir seu time.
Seu primeiro desafio na empresa é corrigir um problema no sistema de seleção de estagiários. O processo
seletivo de seleção possui duas etapas; a primeira se trata de uma prova realizada online, entretanto, as regras
de estágio possuem algumas exigências: estudantes devem ter cursado, pelo menos, três períodos de um curso
de nível superior e atingir a nota mínima na prova online de seleção, que é 70%. Caso os estudantes atinjam a
nota mínima, serão selecionados para uma entrevista presencial, no entanto, a equipe de recursos humanos
detectou que alguns estudantes que não estavam qualificados estavam sendo classificados pelo sistema para a
prova presencial. Dois casos chamaram a atenção: (1) um aluno do 5º semestre acertou 10 questões em 20 e foi
aprovado; (2) outro aluno, que tirou 16/20, estava apenas no 2º período, logo, não deveria ter sido aprovado,
mas o sistema aprovou.
Analise o fragmento de código do sistema de seleção de estagiários e investigue os motivos para a aprovação
incorreta para a segunda etapa. Por fim, escreva quais modificações precisam ser implementadas no código
para que os requisitos iniciais sejam alcançados.
1 // determina aprovados para a segunda etapa
2 function primeiraEtapa(acertos_na_prova,
3 semestres_cursados){
4 /*
5 * Help:
6 * acertos_na_prova recebe a quantidade de acertos na prova

7 * semestres_cursados: semestres cursados
8 */
9 // regras para aprovação
10 const total_de_questoes = 20
11 const nota_minima_aprovacao = 0.7
12 const minimo_semestres = 3
13
14 // calcula a nota %
15 let nota = acertos_na_prova / total_de_questoes
16
17 // calcula se vai ser aprovado ou não
18 if((nota > nota_minima_aprovacao) ||

19 (semestres_cursados >= minimo_semestres)){
20 return "Aprovado";
21 }
22 else{
23 return "Reprovado";
24 }
25 }
RESOLUÇÃO DO ESTUDO DE CASO

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. Ainda não vimos funções no curso, mas o conhecimento de como criar funções não será
necessário para resolver esse problema, apenas o conhecimento de operadores lógicos e comparativos será
necessário.
Primeiro atente-se às regras de aprovação:
A nota deve ser de, pelo menos, 70%, logo, a nota deve ser maior ou igual a 0.7.
Aluno deve ter cursado, pelo menos, 3 semestres, logo, o valor da variável que armazena os semestres
cursados deve ser maior ou igual a 3.
Convertendo essas regras para expressões, temos:
nota >= 0.7.
semestres_cursados >= 3.
Agora, vamos analisar as linhas 18 a 21, em que temos as expressões que definem se o aluno foi aprovado ou
não para a entrevista:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 if((nota > nota_minima_aprovacao) ||

21 }
Podemos notar dois erros:
1. Na linha 18, o operador deveria ser >=.
2. Também na linha 18, como as duas regras são obrigatórias, então, o operador que as separa deveria ser
AND (&&) e não OR (||).
Portanto, o correto seria:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 if((nota >= nota_minima_aprovacao) &&

21 }
 Saiba mais
Artigo – Introdução ao JavaScript
Nesse artigo, você aprenderá os fundamentos da linguagem JavaScript, que é uma linguagem de script,
geralmente, usada em aplicações client-side.
Disponível em: https://bit.ly/3mX5H39. Acesso em: 15 dez. 2021.
Videoaula – Introdução ao JavaScript (YouTube)
Nessa videoaula, você verá, na prática, como construir suas primeiras aplicações com JavaScript.
Disponível em: https://bit.ly/3n51ESj. Acesso em: 15 dez. 2021.
Resolução do Estudo de Caso
Aula 2
ESTRUTURAS CONDICIONAIS
Nesta aula, você conhecerá as três principais estruturas condicionais: (1) if, (2) else... if e (3) else.
40 minutos
INTRODUÇÃO
Olá, estudante!
Linguagens de programação interpretadas, como JavaScript, são capazes de receber conjuntos de comandos,
denominados scripts, e processá-los sequencialmente, ou seja, linha a linha (pelo menos na programação
procedural). Entretanto, JavaScript, assim como outras linguagens, fornece estruturas de controle que permitem
que partes específicas do código, denominadas blocos, sejam executadas apenas SE determinadas condições
forem verdadeiras, caso contrário, o bloco de códigos delimitado pela estrutura condicional será ignorado,
alterando, assim, o fluxo do código.
Nesta aula, você conhecerá as três principais estruturas condicionais: (1) if, (2) else... if e (3) else. A condicional if
executa um bloco de código se uma condição expressa entre parênteses é verdadeira; já a condicional else... if
funciona de maneira similar, mas deve ser usada apenas se uma condição if for apresentada inicialmente; por
fim, a condição else executará um bloco de código se nenhuma condição anteriormente apresentada for
verdadeira, garantindo, assim, que pelo menos um bloco seja executado. Nos próximos blocos, vamos explorar
como esses comandos JavaScript funcionam na prática.
Bons estudos!
ESTRUTURA CONDICIONAL IF
Em programação, estruturas condicionais alteram o fluxo do código, verificando se expressões avaliadas são
atendidas ou não. Para essa comparação, pode-se utilizar a palavra reservada if (na tradução para o português
“se”), e antes de apresentarmos um exemplo, vamos, primeiro, introduzir o conceito de bloco.
Um bloco é um pedaço de código delimitado por chaves { }.
Código 1| Comandos Java
1 BLOCO {
2 COMANDOS JAVASCRIPT;
3 }
Note que utilizamos um espaçamento antes dos comandos inseridos dentro de um bloco; a isso, damos o nome
de indentação, que, em JavaScript, não é obrigatória, entretanto, seu uso constitui uma boa prática de
programação, uma vez que a indentação permite que o desenvolvedor identifique, mais facilmente, se um
conjunto de códigos pertence ou não a um bloco.
Em um bloco condicional if, todos os códigos presentes no bloco só serão executados SE a condição for
verdadeira. Veja:
Código 2| Condicional if
1 if(true){
2 console.log("Olá mundo!");
3 }
4 if(false){
5 console.log("Esta mensagem não será executada");
6 }
Se executarmos este código, veremos apenas a mensagem: Olá mundo! Isso ocorrerá porque os comandos em
um bloco só são executados se a condição é verdadeira.
Vamos utilizar nosso exemplo apresentado nas aulas anteriores para verificar se um número é par ou ímpar:
Código 3| Código com números pares e ímpares
1 x = 1;
2
3 // se x for um número par
4 if(x % 2 == 0){
5 console.log("A variável x é um número par");
6 }
Observe que, ao executarmos o código acima, nada aparece no console, pois x não é um número par. Isso
ocorre porque os comandos dentro do bloco só são executados se a condição de entrada é verdadeira. Veja o
que acontece se invertermos a pergunta:
Código 4| Comandos dentro do bloco
1 x = 1;
2
3 // se x for um número ímpar
4 if(x % 2 == 1){
5 console.log("A variável x é um número ímpar");
6 }
Nesse caso, será exibido no console:
A variável x é um número ímpar
Podemos, ainda, avaliar expressões mais complexas organizando-as usando parênteses além de operadores
lógicos e relacionais. No exemplo a seguir, usamos duas expressões para avaliar a relação de uma variável x
igual a 5 e uma variável y igual a 3:
Código 5| Relações variáveis
1 x = 5
2 y = 3
3
4 if((x < y)||(x % 2 == 1)){

5 console.log("x é maior do que y OU x é um número ímpar")
6 }
Veja que, neste código, avaliamos uma condição um pouco mais complexa:
((x < y)||(x % 2 == 1))
Vamos analisá-la por partes no Quadro 1 a seguir:
Quadro 1 - Significado de cada parte da expressão condicional ((x < y)||(x % 2 == 1))
Operador/expressão Significado
( Parênteses de abertura da expressão que abriga as expressões 1 e 2. São

necessários pois utilizaremos duas expressões.
(x < y) Primeira expressão. Verifica se a variável x é menor do que y. Neste caso, é falso.
|| Operador OR. Retornará verdadeiro se alguma das expressões for verdadeira.
(x % 2 == 1) Segunda expressão. Verifica se x é ímpar, ou seja, se o módulo de x por 2 tem resto

igual a 1. Neste caso, é verdadeiro.
) Parênteses de fechamento da expressão principal. Como uma delas retornou

verdadeiro, logo, o resultado final será verdadeiro e o bloco será executado.
Fonte: elaborado pelo autor.
Observe, por fim, que os códigos existentes entre os símbolos de chaves { } serão executados uma vez que a
expressão final é verdadeira. Logo, será impressa a mensagem:
x é maior do que y OU x é um número ímpar
Note que você pode adicionar quantas expressões quiser, mas à medida que adicionar mais expressões, o
código se tornará mais complexo, o que poderá dificultar sua manutenção.
Note que executar este código:
Código 6| Exemplo de código com mais expressões
1 if((x < y)||(x % 2 == 1)){

3 }
é a mesma coisa que executar este:
Código 7| Variações de código
1 if(x < y){

3 }
4 if(x % 2 == 1){
6 }
Entretanto, encadear muitos comandos if em sequência não é uma boa prática, uma vez que cada um será
testado individualmente. Ao executar testes condicionais relacionados entre si, é possível usar uma outra
estrutura condicional, que veremos no próximo bloco.
VIDEOAULA: ESTRUTURA CONDICIONAL IF

Nesta aula, você verá, na prática, como funciona a estrutura condicional if, que permite a execução de um bloco
de códigos apenas se a expressão no começo do bloco for verdadeira. Bons estudos!
Videoaula: Estrutura condicional if
ESTRUTURA CONDICIONAL IF...ELSE

Você viu que a estrutura if verifica se uma determinada expressão é verdadeira ou não, e em caso negativo,
nenhum comando no bloco é executado, entretanto, o JavaScript fornece a instrução else para declarar um
bloco extra para ser executado em caso de um bloco if falhar (CROCKFORD, 2008). Observe a sintaxe:
Código 8| Sintaxe
1 if(CONDIÇÃO){
2 COMANDOS ...
3 }
4 else{
5 COMANDOS...
6 }
Agora, observe como podemos utilizar if e else juntos:
Código 9|Código com if e else
1 x = 1;
2
3 if(x % 2 == 0){
4 console.log(x, "é par")

5 }
6 else{
7 console.log(x, "é ímpar")
8 }
Aqui, verificamos se o resto da divisão de x por 2 seria igual a 0, ou seja, se se tratava de um número par. Uma
vez que a condição se mostrou falsa, então, o bloco else foi executado. Nesse caso, o console imprimiu a
mensagem “1 é ímpar”. Experimente alterar o valor de x para analisar o comportamento do código.
Operador vírgula
Note que, ao usarmos o comando console.log( ), os valores são separados por vírgulas. O operador vírgula
usado no comando console.log( ) permite que variáveis sejam intercaladas com strings, dessa forma, as
mensagens exibidas para o usuário tornam-se mais dinâmicas. Por exemplo:
x = 1;
console.log(x, "é par")
Exibirá a mensagem: “1 é par” (o que não é verdade, por isso, tome cuidado ao transcrever seus logs de aviso).
Note que, ao alterar o valor de x, a mensagem também é alterada:
x = 100;
console.log(x, "é par")
Logo, será exibida a mensagem: “100 é par”.
Entretanto, ao usar essa funcionalidade, tome cuidado ao verificar se a variável foi declarada anteriormente. Por
exemplo:
console.log(y)
Como a variável y não foi definida anteriormente, esse código produzirá o seguinte erro:
ReferenceError: y is not defined (Erro de referência: y não está definido).
Encadeando instruções if e else

Note que podemos encadear várias instruções if e else para construir blocos de códigos mais complexos
(MARIANO; MELO-MINARDI, 2017). Por exemplo:
Código 10|Variações de if e else

1 x = 1;
2
3 if(x % 2 == 0){
4 if(x > 0){
5 console.log(x, "é um número par e positivo")

6 }
7 else{
8 console.log(x, "é um número par e negativo")
9 }
10 }
11 else{
12 if(x > 0){
13 console.log(x, "é um número ímpar e positivo")

14 }
15 else{
16 console.log(x, "é um número ímpar e negativo")
17 }
18 }
O código acima irá imprimir:
1 é um número ímpar e positivo
E podemos construir códigos mais robustos usando a instrução else...if, que veremos no próximo bloco.
VIDEOAULA: ESTRUTURA CONDICIONAL IF...ELSE

Nesta aula, você verá como executar um conjunto de instruções if... else usando a linguagem JavaScript. Bons
estudos!
Videoaula: Estrutura condicional if...else
ESTRUTURA CONDICIONAL IF...ELSE IF ... ELSE

Você aprendeu a utilizar a instrução if para verificar uma determinada condição e que é possível utilizar a
condição else caso a condição if seja falsa, entretanto, a instrução else só pode ser ligada a uma instrução if, ou
seja, não é possível encadear mais do que duas condições usando apenas essas duas instruções, por isso, o
JavaScript fornece a instrução else if.
A instrução else if pode ser intercalada em blocos if... else para permitir que mais condições sejam avaliadas
(FLANAGAN, 2011):
Código 11|Instrução intercalada de if e else
1 if (condicao){
2 ...
3 }
4 else if(condicao 2){
5 ...
6 }
7 else if(condicao 3){

8 ...
9 }
10 else if(condicao n){
11 ...
12 }
13 else{
14 ...
15 }
Observe que é possível intercalar quantas condições o desenvolvedor achar necessário. Assim, para usar a
instrução else if, é necessário que haja, pelo menos, uma instrução if declarada imediatamente antes. O
comando else não é obrigatório após o uso da instrução else if.
Veja, a seguir, um exemplo prático de uso. Imagine que você está desenvolvendo um programa para avaliar a
idade de alunos cadastrados no ensino e que ele deve avaliar a idade apresentada por um usuário, bem como
determinar o grau de ensino que o estudante, teoricamente, deveria estar cursando. Na teoria, os alunos
devem ter as seguintes idades para atender a cada nível educacional:
Pré-escola: de 4 a menos que 6 anos.
Ensino Fundamental: de 6 a menos que 15 anos.
Ensino Médio: de 15 a menos que 18 anos.
Alunos fora dessa faixa etária devem ser classificados como fora do padrão escolar.
Agora, vamos implementar isso usando JavaScript:
Código 12|Exemplo de código usando Javascript
1 idade = 13
2
3 if(idade >= 4 && idade < 6){
4 console.log("Pré-escola");
5 }
6 else if(idade >= 6 && idade < 15){

7 console.log("Ensino fundamental");
8 }
9 else if(idade >= 15 && idade < 18){
10 console.log("Ensino médio");
11 }
12 else{
13 console.log("Aluno está fora do padrão escolar.")
14 }
15 console.log("FIM")
Observe que, na linha 1, declaramos a variável idade, que será avaliada nas linhas 3, 6, 9 e 12. Nesse caso, o
primeiro teste verificou se o valor de idade é maior ou igual a 4 e, ao mesmo tempo, menor que 6. Veja que essa
condição é falsa, logo, o bloco será ignorado (ou seja, a linha 4 não será executada). A seguir, na linha 6,
verificamos se a variável é maior ou igual a 6 e, ao mesmo tempo, menor que 15. Veja que essa condição é
verdadeira, logo, o bloco será executado (ou seja, a linha 7). Note que, como uma condição já foi atendida, os
outros blocos condicionais em sequência do tipo else if ou else serão ignorados, ou seja, a execução do código
continuará apenas na linha 15, logo, será impresso:
Código 13|Exemplo de código ignorando if e else
1 Ensino fundamental
2 FIM
Como desafio, teste o código acima alterando o valor da variável idade. Veja o que acontece se você colocar um
valor não numérico.
VIDEOAULA: ESTRUTURA CONDICIONAL IF...ELSE IF ... ELSE

Nesta aula, você verá como executar um conjunto de instruções if... else if... else usando a linguagem JavaScript.
Bons estudos!
Videoaula: Estrutura condicional if...else if ... else
ESTUDO DE CASO
Após você detectar e resolver o problema no sistema de aprovações para a segunda etapa do processo seletivo
de estágio da empresa em que foi recém-contratado, o setor de recursos humanos decidiu alterar as regras de
aprovação para a próxima etapa.
As regras iniciais aprovavam apenas estudantes com uma nota mínima de 70% na prova e com, pelo menos,
três semestres de um curso superior, logo, os candidatos que não conseguiam cumprir ambos os objetivos
eram reprovados. Entretanto, a equipe de RH chegou à conclusão de que estava perdendo potenciais talentos
que ainda não tinham cursado a quantidade mínima de semestres, mas que tinham obtido uma nota maior ou
igual a 70% da prova. Por isso, foi requisitada uma alteração no código: caso o aluno atendesse tais condições, o
sistema deveria emitir a mensagem: “Você foi incluído em nosso banco de currículos”.
Realize alterações no código fonte da função primeiraEtapa() para incluir essa nova regra. Para testar,
transcreva o código a seguir em seu próprio editor, realizando as modificações necessárias para o seu correto
funcionamento, de acordo com o que foi especificado.
Código 14|Código fonte da função primeiraEtapa
1 // determina aprovados para a segunda etapa
2 function primeiraEtapa(acertos_na_prova,
3 semestres_cursados){
4 /*
5 * Help:
6 * acertos_na_prova recebe a quantidade de acertos na prova

7 * semestres_cursados: semestres cursados
8 */
9 // regras para aprovação
10 const total_de_questoes = 20
11 const nota_minima_aprovacao = 0.7
12 const minimo_semestres = 3
13
14 // calcula a nota %
15 let nota = acertos_na_prova / total_de_questoes
16

21 }
22 else{
24 }
25 }

Para realizar essas alterações, você pode incluir uma condição usando else if. Essa condição deve ser incluída
após o fim do primeiro if (linha 17) e antes do início do comando else.
Observe como isso pode ser implementado:
Código 15|Resolução estudo de caso usando if e else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16


21 }
22 else if(nota >= nota_minima_aprovacao){
23 return "Você foi incluído em nosso banco de currículos";

24 }
25 else{
27 }
 Saiba mais
Switch (MDN Web Docs)
Quando se tem uma série de comandos condicionais listados em sequência, é possível substituí-los por um
único comando: switch. Neste link, você terá acesso a mais detalhes sobre a implementação do comando
Switch usando JavaScript.
Disponível em: https://mzl.la/3zvwOqU. Acesso em: 15 dez. 2021.
if...else (MDN Web Docs)
Neste link, você terá acesso a mais detalhes sobre a implementação de condicionais usando JavaScript.
Disponível em: https://mzl.la/3HGGWzZ. Acesso em: 15 dez. 2021.
Aula 3
ESTRUTURAS DE REPETIÇÃO
Linguagens de programação, como JavaScript, também são capazes de repetir a execução de um
bloco de códigos enquanto uma condição é válida ou por um delimitado conjunto de valores.
44 minutos
INTRODUÇÃO
Olá, estudante!
Além das estruturas condicionais, linguagens de programação, como JavaScript, também são capazes de repetir
a execução de um bloco de códigos enquanto uma condição é válida ou por um delimitado conjunto de valores
preestabelecidos. Essas estruturas de repetição são, muitas vezes, denominadas laços de repetição, loops ou
iteradores.
Nesta aula, vamos conhecer as três principais estruturas de repetição em JavaScript: (1) for, (2) while e (3) do...
while. O comando for executa um bloco de códigos por um determinado número de iterações; já o comando
while executa um bloco enquanto uma condição é válida; por fim, o comando do... while também executa um
bloco enquanto uma condição é verdadeira; entretanto, do... while garante que o bloco de código seja
executado pelo menos uma vez, enquanto um bloco do tipo while pode não ser executado caso a condição seja
inicialmente falsa. Nos próximos blocos, vamos explorar como os laços de repetição no JavaScript funcionam na
prática.
Bons estudos!.
ESTRUTURA DE REPETIÇÃO FOR

Em JavaScript, a instrução for (em português, “para”) realiza a repetição de um bloco de código PARA um
determinado número de iterações preestabelecidas. A sintaxe do for requer três expressões: (1) inicialização –
uma variável que receberá o valor de início; (2) teste – a condição de parada do laço; e (3) incremento – a
condição de incremento (ou decremento) aplicada ao final de cada rodada (FLANAGAN, 2011).
Código 1
1 for(início; condição de parada; passo){
2 // comandos que serão repetidos

3 }
Observe o exemplo a seguir:
2 for(i = 0; i < 5; i = i+1){

3 console.log(i);
4 }
Código 1| Código que imprimirá no console
• 0
• 1
• 2
• 3
• 4.
Assim, podemos interpretar esse código da seguinte maneira: PARA a variável i, iniciando em 0, ENQUANTO ela
for menor do que 5, execute o bloco de código delimitado pelas chaves { } SOMANDO 1 a cada rodada.
Observe que nossa variável de início (denominada i) recebe o valor 0, logo, a contagem começará nesse valor. A
condição de parada é dada por i < 5, ou seja, o bloco será executado enquanto i for menor que 5. Por fim, o
passo será dado por i = i+1, ou seja, a cada rodada, o valor de passo será incrementado em um, logo, na
primeira rodada, i valerá 0. Ao final dessa iteração, i receberá o valor anterior a i (que era zero), acrescido de 1.
Como 1 é menor que 5 (condição de parada), o bloco será executado novamente; a seguir, será impresso o valor
de i (1), que será incrementado novamente, então, i passará a valer 2 e o bloco será repetido; depois, ele
passará a valer 3 e depois 4, e, após imprimir o valor 4, o bloco será encerrado e i passará a valer 5. A nossa
condição de execução do bloco era que ele se repetisse enquanto i fosse menor que 5, e como i, agora, vale
exatamente 5, o bloco foi interrompido imediatamente, antes de i ser impresso novamente.
Cláusulas break e continue

Podemos alterar o fluxo de execução de um laço for usando as chamadas cláusulas de parada (break) e
continuação (continue). No exemplo a seguir, repetimos o laço que imprime os números 0, 1, 2, 3 e 4,
entretanto, agora, utilizamos um comando condicional para analisar quando o valor de i for igual a 2. Veja:
Código 2 | laço que imprime os números 0, 1, 2, 3 e 4

1 for(i = 0; i < 5; i++){
2 if(i == 2){ // se i é igual a 2
3 break; // pare imediatamente

4 }
5 console.log(i);
6 }
Perceba que, no código apresentado, substituímos a expressão i = i+1 por apenas i++. Ambas as expressões têm
o mesmo significado, sendo i++ uma forma contraída de notação usada para incrementar o valor de uma
variável.
Note, ainda, que, ao executarmos esse código, só são impressos no console os números 0 e 1, e isso ocorre
porque utilizamos a cláusula break para interromper a execução do laço quando a variável i for igual a 2, por
isso, apenas os valores 0 e 1 são impressos.
Poderíamos, ainda, utilizar a cláusula continue para saltar uma determinada iteração do bloco. Observe o
exemplo a seguir:
Código 3 | lteração do bloco
1 for(i = 0; i < 5; i++){
2 if(i == 2){ // se i é igual a 2

3 continue; // encerre a iteração atual
4 }
5 console.log(i);
6 }
No código apresentado, a cláusula continue foi utilizada em um bloco condicional ativado para quando o valor
da variável i for igual a 2. Note que, ao executar o código, será impresso na tela:
• 0
• 1
• 3
• 4
Nesse caso, quando i passou a valer 2, a linha 3 do script foi executada, ativando a cláusula continue. Essa
cláusula interrompeu a execução atual do laço for e saltou para a próxima iteração, ou seja, a linha 5 não foi
executada, o valor 2 não foi impresso, a variável i passou a valer 3 e o bloco do laço for foi repetido, mais uma
vez.
Nas próximas aulas, veremos como usar o laço for para navegar por objetos e arrays, mas antes, vamos
apresentar os outros tipos de laços: while e do... while.
VIDEOAULA: ESTRUTURA DE REPETIÇÃO FOR

Nesta aula, você vai aprender a usar o laço de repetição for, que permite que um bloco seja repetido por um
conjunto delimitado de vezes estabelecido por três expressões opcionais: valor inicial, condição de parada e
tamanho do passo. Bons estudos!
Videoaula: Estrutura de repetição for
ESTRUTURA DE REPETIÇÃO WHILE

A estrutura de repetição while (em português, “enquanto”) repete um bloco de código ENQUANTO uma
determinada condição for verdadeira. Observe a sintaxe do comando while:
Código 4 | Sintaxe
1 declarar variável de entrada
2
3 while(condição de parada){
4 comando 1
5 comando 2
6 ...
7 Comando n
8
9 incrementar variável de entrada

10 }
No exemplo a seguir, vamos utilizar, mais uma vez, nossa variável i para percorrer os valores de 0 a 4, mas,
dessa vez, usando o laço while.
Código 5 | Aço while
1 i = 0 // declaração do valor de início
2
3 while(i < 5){ // condição de parada
4 console.log(i); // imprime os dados na tela

5 i++; // incrementação: +1
6 }
Nesse caso, foi necessário declarar a variável i antes do início do bloco (vamos utilizar 0, pois, em geral,
contagens em programação começam do 0); além disso, while recebeu, como parâmetro de entrada, apenas a
expressão com a condição de parada (no exemplo, i < 5). A seguir, o bloco foi executado enquanto a condição
era verdadeira, e note que, na linha 5, foi necessário declarar um comando que altera o valor de i, somando 1
ao valor atual (i++).
Para que você compreenda melhor o fluxo do código apresentado anteriormente, observe a Figura 1 a seguir:
Figura 1 | Fluxo de execução do código: laço while que imprime valores de 0 a 4. Uma estrela foi adicionada para ilustrar todas as vezes que
o laço while recomeçou
Loop infinito
Observe o código a seguir:
Código 6 | Loop Infinito
2
3 while(i < 5){ // condição de parada

5 }
Note que a linha que incrementa o valor de i foi removida. Você consegue imaginar o que aconteceria se
executássemos esse código?
Como o valor de i não foi alterado durante a execução do bloco, ele sempre teria o valor 0, logo, a condição de
parada jamais seria estabelecida e o laço continuaria executando repetidamente. Quando um bloco de código
se repete sem uma condição que permite sua parada, ele é chamado de loop infinito (MARIANO; MELO-
MINARDI, 2017), e esse tipo de erro de codificação é considerado grave e pode ser responsável por travar o
computador, uma vez que o processamento do bloco pode requerer todo o potencial de uso da CPU.
VIDEOAULA: ESTRUTURA DE REPETIÇÃO WHILE

Nesta aula, você vai aprender, na prática, a utilizar o laço de repetição while. Esse tipo de loop permite que um
bloco seja executado enquanto uma condição for verdadeira. Bons estudos!
Videoaula: Estrutura de repetição while
ESTRUTURA DE REPETIÇÃO DO...WHILE

O comando do... while (ou, na tradução para o português, “faça... enquanto”) também executa um bloco
enquanto uma condição é verdadeira, assim como o comando while, entretanto, do... while garante que o bloco
de código seja executado pelo menos uma vez, enquanto um bloco do tipo while pode não ser executado caso a
condição seja inicialmente falsa. Observe a sintaxe do comando do... while:
Código 7 | Sintaxe do comando while
1 declarar variável de entrada
2
3 do{
4 comando 1
5 comando 2
6 ...
7 Comando n
8
9 incrementar variável de entrada
10
11 }while(condição de parada)
Note que o teste condicional de parada é realizado ao final da execução do bloco. Agora, vamos ver na prática
como utilizar a instrução do... while.
Código 8 | Instrução para o código While

1 // Usando DO... WHILE
2

4
5 do{
8 }while(i < 5); // condição de parada
Veja que esse código imprimirá na tela os números 0, 1, 2, 3, 4 e 5 de forma similar aos exemplos apresentados
anteriormente. Vamos, então, tentar compreender, na prática, qual a diferença do laço while. Observe o
exemplo a seguir:
Código 9 | Diferença do laço while
1 // Usando WHILE
2
4
5 while(i < 5){ // condição de início/parada

8 }
Note que nada será impresso no console, uma vez que i tem valor inicial 10 e a condição de execução é
enquanto i for menor que 5, portanto, o bloco será completamente ignorado.
Agora, vamos repetir o mesmo problema, mas utilizando a instrução do... while:
Código 10 | Instrução while
1 // Usando DO... WHILE
2
4
5 do{

8 }while(i < 5); // condição de parada
Note que, dessa vez, o conteúdo do bloco foi executado pelo menos uma vez, ou seja, foi impresso na tela o
valor 10. Assim, podemos concluir que o laço do...while deve ser usado quando há a necessidade de o bloco ser
executado pelo menos uma vez.
VIDEOAULA: ESTRUTURA DE REPETIÇÃO DO...WHILE

Nesta aula, você verá, na prática, como implementar o comando do... while usando JavaScript. Bons estudos!
Videoaula: Estrutura de repetição do...while
ESTUDO DE CASO
Após implementar as novas regras impostas pela equipe de recursos humanos da Empresa A no código fonte
do sistema que pré-seleciona estagiários para entrevista, o setor de RH requisitou suporte para novas
atividades.
Agora, o sistema da Empresa A está avaliando corretamente quais estudantes foram classificados para a
segunda etapa, por isso, a equipe de RH tem novas preocupações. Uma delas é agendar um horário de
entrevista para cada um deles, por isso, a sua ajuda foi solicitada.
Diante disso, ajude a equipe a automatizar a marcação das entrevistas dos candidatos à vaga de estagiário. Para
isso, construa um script que determine os horários em que deverão ocorrer as entrevistas. Aliás, cada entrevista
deverá durar 10 minutos com um período extra de cinco minutos, ou seja, cada entrevista deverá ocorrer em,
no máximo, 15 minutos e os candidatos deverão entrar um após o outro. Além disso, o almoço deverá ocorrer
das 12h às 14h, logo, não haverá entrevistas.
Sabendo que a empresa opera das 9h da manhã às 17h da tarde, construa um código em JavaScript que calcule
um horário para a entrevista de cada candidato, bem como o número máximo de candidatos a serem atendidos
por dia. Você deve utilizar o seu editor de códigos para construir esse script.

Podemos construir o código fonte da seguinte forma:
Código 11 | Código de resolução do estudo de caso
1 var hora = 9
2 var minutos = 15
3 var total_entrevistas = 0
4 const saida = 17
5 for(i = hora; i < saida; i=i+1){
6 if((i == 12)||(i==13)){
7 continue
8 }
9 for(j = 0; j < 60; j = j+minutos){
10 total_entrevistas++;
11 if(j == 0){
12 console.log("Entrevista #",
13 total_entrevistas,"=>", i+":"+j+"0")
14 }
15 else{
16 console.log("Entrevista #",
17 total_entrevistas,"=>", i+":"+j)
18 }
19 }
20 }
Observe que foi necessário, em primeiro lugar, estabelecer os horários de entrada e de saída: linhas 1 e 4
(usamos const na variável de saída, pois é um horário que não será alterado), e também estabelecemos os
minutos (linha 2).
Para a criação de uma lista com todas as entrevistas do dia, usamos um laço for (linha 5) que vai do horário de
entrada até o horário de saída, e veja que removemos o horário de almoço da linha 6 à linha 8. A partir da linha
9, fizemos o cálculo de minutos (lembre-se de que há 4 entrevistas por hora: 00, 15, 30 e 45 min), e observe que,
para incrementarmos o segundo laço for, usamos um aumento a cada 15 minutos (variável minutos).
Dentro do segundo laço, incrementamos o contador de entrevistas e, por fim, imprimimos a entrevista atual.
Observe que precisamos fazer um comando condicional para verificar se os minutos seriam iguais a 0, pois
queríamos que fossem impressos dois valores “00”. Ao final, o código imprimirá a seguinte lista de entrevistas:
Entrevista # 1 => 9:00

Entrevista # 24 => 16:45.
 Saiba mais
do...while (MDN Web docs)
Neste link, você aprenderá as características da declaração do...while usando JavaScript.
Disponível em: https://mzl.la/3q1Vxjt. Acesso em: 16 dez. 2021.
Aula 4
ESTRUTURAS DE DADOS
Nesta aula, você vai aprender a declarar e manipular arrays e objetos usando JavaScript e,
também, a declarar funções.
50 minutos
INTRODUÇÃO
Olá, estudante!
Estruturas de dados sequenciais permitem o armazenamento de conjuntos de dados em uma variável

JavaScript, e há dois principais tipos de estruturas de dados sequenciais em JavaScript: os arrays, que são
coleções de valores ordenados sequencialmente, e os objetos, que são coleções de dados agrupados por chave-
valor.
Nesta aula, você vai aprender a declarar e manipular arrays e objetos usando JavaScript e, também, a declarar
funções, que são blocos de códigos em que são declarados inicialmente, mas executados apenas quando
chamados dentro do código, bem como permitem o recebimento de valores como parâmetros de entrada, além
do envio de informações de volta para o fluxo principal do código.
Bons estudos!
Código 1 | Primeiro Código
meu_primeiro_array = ["abacate", "biscoito", "casa"];

Nesse caso, o array recebe uma coleção com três elementos: abacate, biscoito e casa, que devem ser separados
por vírgula e podem ser de diversos tipos, desde strings a valores numéricos. Podemos acessar cada elemento
da seguinte forma:
Código 2 | Tipos de código
1 var meu_primeiro_array = ["abacate", "biscoito", "casa"]
2
3 console.log(meu_primeiro_array[0]) // abacate
4 console.log(meu_primeiro_array[1]) // biscoito
5 console.log(meu_primeiro_array[2]) // casa
Note que o primeiro elemento, abacate, é encontrado na posição 0 do array e não na posição 1; em JavaScript (e
em muitas outras linguagens), a contagem começa da posição 0.
Para obtermos o tamanho total de elementos em um array usamos a propriedade length:
Código 3 | Array
console.log(meu_primeiro_array.length) // 3
Note que as propriedades são características de um objeto JavaScript, logo, não precisam ser declaradas
seguidas de parênteses (diferentemente dos métodos, que requerem parênteses).
Se quisermos buscar um conjunto de elementos desse array (subarray), podemos usar o método slice( ),
informando como entradas desse método: (1) a posição de início e (2) a posição final (será considerada a
posição anterior a esse índice para composição do subarray).
ARRAY.slice(início, posição posterior ao fim)
Por exemplo:
Código 4 | Exemplo array
1 dois_primeiros_elementos = meu_primeiro_array.slice(0,2)
2 console.log(dois_primeiros_elementos) // [ 'abacate', 'biscoito' ]

3
4 dois_ultimos_elementos = meu_primeiro_array.slice(1,3)
5 console.log(dois_ultimos_elementos) // [ 'biscoito', 'casa' ]
Podemos, ainda, criar arrays vazios declarando um nome de variável que receba colchetes vazios:
novo_array = []
Podemos preencher esse array usando a função push( ), que receberá como argumento o valor correspondente
ao novo elemento. Observe:
Código 5 | Exemplo push

1 // declarando um array vazio
2 novo_array = []
3
4 // adicionando um novo item
5 novo_array.push("alicate")
6 console.log(novo_array) //[ 'alicate' ]
7
8 // adicionando 2 novos itens
9 novo_array.push("bola")
10 novo_array.push("cavalo")
11
12 console.log(novo_array) // [ 'alicate', 'bola', 'cavalo' ]
Por outro lado, podemos remover elementos usando o método pop( ):
Código 6 | Método pop
1 valor_removido = novo_array.pop() // remove o último elemento

2 console.log(valor_removido) // cavalo
3 console.log(novo_array) // como [ 'alicate', 'bola' ]
O método pop( ) remove o último elemento e retorna o valor, que pode ser armazenado em uma variável.
Para apagar o primeiro elemento, é possível utilizar o método shift( ):
Código 7 | Método shift
1 console.log(novo_array) // [ 'alicate', 'bola' ]
2 novo_array.shift() // apaga o primeiro elemento

3 console.log(novo_array) // [ 'bola' ]
Da mesma forma, podemos adicionar elementos no começo usando unshift( ):
Código 8 | Método unshift
1 novo_array.unshift("avestruz")
2 console.log(novo_array) // [ 'avestruz', 'bola' ]
E também podemos remover elementos específicos de um array, como um elemento que se encontra no meio
do array e não apenas nas extremidades. Entretanto, para especificar esse elemento, é preciso, em primeiro
lugar, saber sua posição. Para isso, usamos o método indexOf( ) em combinação com o método splice( ):
Código 9 | Método splice
1 lista = ["a", "b", "c", "d", "e"] // nova lista com 5 elementos
2
3 indice_de_c = lista.indexOf("c") // descobre o índice de "c"

4 console.log(indice_de_c) // 2
5
6 console.log(lista[indice_de_c]) // confirmando que o item está certo (retorna c)
7
8 lista.splice(indice_de_c, 1) // removendo apenas o elemento "c"
9 console.log(lista) // [ 'a', 'b', 'd', 'e' ]
O método indexOf( ) retorna o índice de um determinado elemento enviado como argumento (perceba que a
letra “O” de indexOf está em maiúsculo); já o método splice( ) remove elementos a partir de uma determinada
posição passada como primeiro argumento; e o segundo argumento indica quantos elementos queremos
remover (no caso, apenas 1).
Por fim, para ordenar um array, é possível usar o método sort( ):
Código 10 | Método sort

1 lista_numerica = [42, 16, 8, 15, 23, 4]
2
3 lista_numerica.sort() // ordenando alfabeticamente

4 console.log(lista_numerica) // [ 15, 16, 23, 4, 42, 8 ]
Note que, nesse caso, a ordenação foi feita incorretamente, pois o método sort( ) ordena alfabeticamente (com
base no código ASCII). Para ordenar numericamente, use:
Código 11 | Ordenação alfanumérica
1 lista_numerica.sort((a, b) => a - b) // ordenando numericamente

2 console.log(lista_numerica) // [ 4, 8, 15, 16, 23, 42 ]
A sintaxe ficou um pouco mais complicada ao incorporarmos o símbolo “=>”, tratando-se de uma arrow
function. Entretanto, para entender isso, é necessário, em primeiro lugar, saber o que são funções.
CONCEITO E MANIPULAÇÃO DE ARRAY

Arrays são conjuntos de dados sequenciais armazenados em uma única variável, e os valores dentro de um
array são denominados elementos. Além disso, os valores em arrays são declarados entre colchetes, separados
por vírgulas, e os elementos podem ser acessados a partir da sua posição, denominada índice (FLANAGAN,
2011).
Observe um exemplo a seguir:
VIDEOAULA: CONCEITO E MANIPULAÇÃO DE ARRAY

Nesta aula, você aprenderá a manipular arrays usando JavaScript. Arrays são coleções de dados sequenciais
indexadas numericamente pela ordem de entrada. Bons estudos!
Videoaula: Conceito e manipulação de array
FUNÇÕES
Funções (function) são blocos de códigos que não são imediatamente executados quando um script é
interpretado; eles só são executados ou invocados quando ocorre uma chamada pelo nome da função seguido
de parênteses (CROCKFORD, 2008; MARIANO; MELO-MINARDI, 2017).
Sim, já vimos muitas funções, como a função alert( ), que é uma função nativa (built-in) que exibe uma caixa de
diálogo na tela, assim como alguns métodos, como os métodos slice( ), splice( ), push( ) e pop( ), usados para
manipulação de arrays. Os métodos são funções aplicadas no contexto de um objeto específico, o que muda é a
forma como são chamados (digitando o nome da variável seguido de um ponto, o nome do método e
parênteses).
Veja a sintaxe básica de uma função:
Código 12 | Declaração de função
1 // declaração da função
2 function NOME-DA-FUNÇÃO(parâmetros de entrada){

3 comandos
4 }
5 // chamada da função
6 NOME-DA-FUNÇÃO(ARGUMENTOS DE ENTRADA)
Em resumo, funções são blocos de código que contêm uma série de comandos pré-desenvolvidos usados para
se reduzir o tempo gasto para a resolução de um problema. Imagine, por exemplo, que queremos ordenar um
array, e há muitas formas de fazermos isso (muitos algoritmos), mas vamos resolver de um modo bem simples:
vamos analisar cada elemento da lista e compará-lo com todos os outros para ver qual o menor e, assim, movê-
lo para o começo da lista. Essa estratégia de ordenação é denominada selection sort e não é o melhor algoritmo
para essa tarefa, pois sempre fará comparações de todos contra todos, tendo uma complexidade O(n²). Viu
como você terá de se preocupar com muitos detalhes para ordenar um simples array? Vimos, anteriormente,
que bastaria usar o método sort( ) para fazer isso, e isso destaca como funções permitem que você não se
preocupe com problemas com soluções já bem estabelecidas e foque o problema que está tentando resolver
com programação.
De fato, perceba que usamos apenas funções já definidas pelo JavaScript, entretanto, podemos criar nossas
próprias funções. Em JavaScript, há muitas formas de se declarar funções; por exemplo: elas podem ser
declaradas com a palavra reservada function (FLANAGAN, 2011). Observe o exemplo a seguir:
Código 13 | Function
1 function soma(a, b){
2 return a+b // esta linha não é executada até a função ser chamada
3 }
4
5 resultado = soma(2, 3) // chamada da função (argumentos de entrada: 2 e 2)
6 console.log(resultado) // 5
7
8 console.log(soma(10, 10)) // 20
Aqui, criamos uma simples função que soma dois números. Nossa função se chama soma e recebe dois
parâmetros: a e b. Dentro do bloco, a função faz uma única coisa: retorna os valores das somas de a e b. Note
que, ao executarmos esse código, o conteúdo do bloco da função não é executado imediatamente. Uma função
só será executada quando for feita a chamada (apresentada na linha 5), e podemos fazer quantas chamadas de
função quisermos (como ilustrado na linha 8), por isso, dizemos que funções são estruturas que permitem o
reaproveitamento de código.
Observe que, na chamada da função, enviamos dois argumentos, que foram aplicados aos parâmetros
declarados na função. No exemplo, o parâmetro “a” recebeu o primeiro argumento enviado (2), enquanto “b”
recebeu o segundo argumento (3). Note que a palavra return permite que o resultado da soma seja retornado
ao mesmo ponto da chamada (linha 5), e o uso de return é opcional. Poderíamos, por exemplo, apenas imprimir
o resultado da soma diretamente na função, e as funções poderiam, ainda, não possuir parâmetros, entretanto,
na chamada da função, deve-se sempre incluir os parênteses.
Curiosidades => arrow functions

Arrow functions (funções de seta) são uma nova notação JavaScript introduzida no ECMAScript versão 6 (ES6)
para se declarar funções. Elas foram criadas com o objetivo de tornar o JavaScript mais simples (apesar de
alguns desenvolvedores discordarem disso).
Por exemplo, a função:
1 function soma(a, b){
2 return a+b
3 }
poderia ser declarada usando-se arrow functions:
soma = (a, b) => a+b
Neste bloco, você aprendeu a declarar suas próprias funções em JavaScript. Agora, você está apto a estender as
funcionalidades básicas da linguagem e criar suas próprias funções que poderão ser reaproveitadas.
VIDEOAULA: FUNÇÕES
Nesta aula, você vai saber mais sobre funções em JavaScript, ver algumas funções nativas (built-in) e aprender a
criar suas próprias funções. Bons estudos!
Videoaula: Funções
OBJETOS
Objetos são um tipo de dado fundamental para a linguagem JavaScript; eles armazenam coleções de chaves e
valores denominados propriedades. Aqui, devemos fazer um adendo: o conceito de objetos JavaScript é
equivalente ao conceito de “hash”, “dicionário” ou “array associativo” em outras linguagens de programação
(FLANAGAN, 2011).
Criando objetos
Você pode criar um objeto utilizando o comando new Object( ), entretanto, há formas mais simples utilizando
chaves. Veja como a sintaxe pode ser construída:
meu_primeiro_objeto = { "chave": "valor" }
Note que chaves e valores são separados por dois pontos. Além disso, é possível, ainda, inserir múltiplos pares
de chave e valor, desde que estejam separados por vírgula:
Código 14 | Separação de múltiplos pares
1 objeto = {
2 "chave1":"valor",
3 "chave2":"valor",
4 "chave3":"valor"
5 }
Note que a chave deve ser única, ou seja, não se pode ter duas chaves com o mesmo nome.
Consultando uma chave

Há duas formas de se acessar valores individualmente em um objeto:
1. Usando ponto (nome-objeto.propriedade): nesse caso, deve-se chamar o nome do objeto seguido da
propriedade que se deseja acessar.
2. Usando colchetes (nome-objeto[‘propriedade’]): nesse caso, deve-se chamar o nome do objeto seguido da
propriedade desejada entre colchetes e aspas.
Código 15 | Consulta de chave
1 objeto = {
2 "chave1":1,
3 "chave2":2,
4 "chave3":3
5 }
6
7 // 1ª forma de acesso
8 valor_chave_1 = objeto.chave1
9 console.log("O valor da chave1 é", valor_chave_1) // O valor da chave1 é 1
10
11 // 2ª forma de acesso
12 valor_chave_2 = objeto['chave2']
13 console.log("O valor da chave2 é", valor_chave_2) // O valor da chave1 é 2
Observe que, no exemplo prévio, as chaves apontam para valores numéricos e os objetos aceitam dados de
todos os tipos, como valores booleanos, strings, números, arrays e, até mesmo, outros objetos.
Agora, veja um exemplo um pouco mais complexo:
Código 16 | Consulta de chave complexa

1 objeto = {
2 "chave1":{ "camada1_1":5 },
3 "chave2":['abacate', 'bola', 'cavalo']

4 }
Aqui, temos um objeto com duas chaves. A primeira chave recebe, como valor, outro objeto que possui uma
única chave “camada1_1”, e para acessar o valor nessa chave específica, pode-se executar o seguinte código:
Código 16 | Camada 1
1 // Acessando o valor da chave "camada1-1"

2 valor_1 = objeto.chave1.camada1_1
3 console.log(valor_1) //5
Na chave2, nosso objeto recebe um array com três valores. Note que não podemos usar a notação de ponto
nesse caso, pois arrays são acessados usando-se o índice, assim sendo, podemos usar a notação de colchetes.
No exemplo a seguir, usamos esse tipo de notação para coletar o segundo elemento do array da chave2 (note
que o segundo elemento é indexado na posição 1):
Código 16 | Array
1 // Imprimindo o 2º elemento do array da chave2
2 valor_2 = objeto.chave2[1]
3 console.log(valor_2) // bola
Percorrendo um objeto
Podemos percorrer um objeto inteiro com o auxílio de um laço de repetição. Observe o exemplo a seguir:
Código 17 | Percorrendo o objeto
1 objeto = {
2 "chave1":{ "camada1_1":5 },
3 "chave2":['abacate', 'bola', 'cavalo']
4 }
5 for(i in objeto){
6 chave = i // coleta a chave

7 valor = objeto[i] // pega o valor correspondente a chave
8 console.log(chave, "->", valor) // imprime chave e valor atual

9 }
Esse código imprimirá no console:
Código 18 | Percorrendo o objeto
1
2 chave1 -> { camada1_1: 5 }
3 chave2 -> [ 'abacate', 'bola', 'cavalo' ]

4
Note que usamos a palavra reservada in para recuperar todas as chaves no objeto. Nesse caso, a cada rodada
do laço for, uma nova chave será avaliada pelo bloco.
VIDEOAULA: OBJETOS
Nesta aula, você vai conhecer os objetos em JavaScript, bem como verá como ler e declarar seus próprios
objetos, além de ver algumas funções para manipulá-los. Bons estudos!
Videoaula: Objetos

ESTUDO DE CASO
A equipe de recursos humanos da empresa A está encantada com os scripts que você tem construído para
auxiliar no processo de seleção dos novos estagiários. Assim, após requisitar a criação de um sistema que
determinasse o horário de entrevistas para candidatos à vaga de estágio, a equipe pediu a você que selecione o
horário que cada candidato fará a entrevista.
Para isso, ela lhe passou uma lista com os 24 indivíduos selecionados na primeira fase e pediu que os selecione
em ordem alfabética.
Os nomes dos pré-selecionados são:
1 "José da Silva",
2 "Antônio de Sá",
3 "Felipe Augusto",
4 "Carla Moreira",
5 "Pedro Malta",
6 "Maria Sousa",
7 "Marta da Silva",
8 "Fausto Augusto",
9 "Silvio Sávio",
10 "Maísa Silva",
11 "Lucas Lopes",
12 "Zenildo Santos",
13 "Bruno Lucas",
14 "Luana Melo",
15 "Felipe Santos",
16 "Flávio Miguel",
17 "Lauro Maria",
18 "Juca dos Santos",
19 "Luciana Carla",
20 "Felipe Silva",
21 "André Manuel",
22 "Pedro Parker",
23 "Ana Maria",
24 "Thiago Melo"
A partir disso, construa um script que defina o horário de entrevista de cada um deles usando o seu editor de
códigos. As entrevistas devem ser definidas pela ordem alfabética e começar às 9h e terminar às 17h. Cada
entrevista deve ter, no máximo, 15 minutos. Não devem ser marcadas entrevistas entre 12h e 14h.

Podemos construir esse código adaptando o exemplo apresentado no estudo de caso passado. Observe:
1 var hora = 9
2 var minutos = 15
3 var total_entrevistas = 0
4 const saida = 17
5
6 var entrevistados = [
7 "José da Silva",
8 "Antonio de Sá",
9 "Felipe Augusto",
10 "Carla Moreira",
11 "Pedro Malta",
12 "Maria Sousa",
13 "Marta da Silva",
14 "Fausto Augusto",
15 "Silvio Sávio",
16 "Maísa Silva",
17 "Lucas Lopes",
18 "Zenildo Santos",
19 "Bruno Lucas",
20 "Luana Melo",
21 "Felipe Santos",
22 "Flávio Miguel",
23 "Lauro Maria",
24 "Juca dos Santos",
25 "Luciana Carla",
26 "Felipe Silva",
27 "André Manuel",
28 "Pedro Parker",
29 "Ana Maria",
30 "Thiago Melo"
31 ]
32
33 // ordenando os entrevistados em ordem alfabética

34 entrevistados.sort()
35
36 for(i = hora; i < saida; i=i+1){
37 if((i == 12)||(i==13)){
38 continue
39 }
40 for(j = 0; j < 60; j = j+minutos){
41 total_entrevistas++;
42 if(j == 0){
43 console.log(i+":"+j+"0",
44 "=>", entrevistados[total_entrevistas - 1])
45 }
46 else{
47 console.log(i+":"+j,
48 "=>", entrevistados[total_entrevistas - 1])
49 }
50 }
51 }
Note que podemos declarar a lista de indivíduos como um array (linha 6 a 31). Na hora de imprimir os
resultados, devemos apontar a posição do array e subtrair um, e isso é necessário uma vez que usamos nosso
contador para começar a contagem do um (primeira entrevista ocorre às 9:00), enquanto o array é ordenado a
partir da posição zero.
Ao executar esse código, você verá o seguinte resultado:
9:00 => Ana Maria
9:15 => André Manuel
9:30 => Antonio de Sá
9:45 => Bruno Lucas
10:00 => Carla Moreira

10:15 => Fausto Augusto
10:30 => Felipe Augusto
10:45 => Felipe Santos
11:00 => Felipe Silva
11:15 => Flávio Miguel
11:30 => José da Silva
11:45 => Juca dos Santos
14:00 => Lauro Maria
14:15 => Luana Melo
14:30 => Lucas Lopes
14:45 => Luciana Carla
15:00 => Maria Sousa
15:15 => Marta da Silva
15:30 => Maísa Silva
15:45 => Pedro Malta
16:00 => Pedro Parker
16:15 => Silvio Sávio
16:30 => Thiago Melo
16:45 => Zenildo Santos.
 Saiba mais
Arrays (MDN Web Docs)
Neste link, você vai saber mais sobre arrays em JavaScript e conhecer métodos e propriedades que podem
ser usados para manipulá-los.
Disponível em: https://mzl.la/3HL4aVW. Acesso em: 17 dez. 2021.
REFERÊNCIAS
4 minutos
Aula 1
CROCKFORD, D. JavaScript: the good parts. Newton: O’Reilly Media, 2008.
DUCKETT, J. JavaScript and JQuery: interactive front-end web development. [S. l.]: Wiley, 2014.
ECMA INTERNACIONAL. Ecma-262. 12. ed. 2021. Disponível em: https://bit.ly/3q0YiBV. Acesso em: 15 dez. 2021.
FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre: Bookman, 2011.
MARIANO, D.; MELO-MINARDI, R. de. Introdução à programação web para bioinformática: HTML, CSS, PHP
and JavaScript. [S. l.]: Independently Published, 2017.
MDN WEB DOCS. Expressões e operadores. [s. d.]. Disponível em: https://mzl.la/3qQuSFL. Acesso em: 1 dez.
2021.
Aula 2
Aula 3
Aula 4

CW - Unidade 1 - Desenvolvimento em JavaScript

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CW - Unidade 1 - Desenvolvimento em JavaScript

Enviado por

Direitos autorais:

Formatos disponíveis

Aula 1

Pronto para adentrar no mundo do desenvolvimento web? Então, vamos lá!

TIPOS DE DADOS E VARIÁVEIS

Uma breve história do JavaScript

Figura 1 - Java e JavaScript (JS) são duas linguagens de programação distintas

Fonte: elaborada pelo autor.

Figura 2 - Console de edição do Chrome

Fonte: elaborada pelo autor.

Figura 3 - Editando JS no VSCode

O código 1 acima carrega um script denominado “meu_primeiro_script.js” diretamente em um arquivo HTML;

1 // meu primeiro programa JS

Figura 7 - Meu primeiro script. Testado usando Chrome

Variáveis e tipos de dados

1 // meu primeiro programa JS

2 mensagem = "Ola, mundo!";

Quadro 1 - Tipos de variáveis

Variável Explicação Exemplo

Numérico Numerais inteiros ou flutuantes. var variavel = 3;

Boolean Variável verdadeira (true) ou falsa (false). var variavel = true;

Array Coleção de dados sequenciais. var meuArray =

Fonte: adaptado de Mariano e Melo-Minardi (2017).

VIDEOAULA: TIPOS DE DADOS E VARIÁVEIS

Para visualizar o objeto, acesse seu material digital.

OPERADORES ARITMÉTICOS E DE COMPARAÇÃO

1 // meu primeiro programa JS

Fonte: captura de tela do console do Chrome elaborada pelo autor.

Quadro 2 - Operadores aritméticos

% Módulo (retorna o resto da divisão).

Figura 11 - Operações matemáticas usando o console

Fonte: elaborada pelo autor.

Quadro 3 - Operadores de comparação

=== Igual e do mesmo tipo.

!== Diferente e de tipos diferentes.

> Maior que.

< Menor que.

>= Maior ou igual.

<= Menor ou igual.

Fonte: Fonte: adaptado de Mariano e Melo-Minardi (2017).

Observe o exemplo a seguir (Figura 8):

Figura 12 - Operações comparativas usando o console

Fonte: Fonte: elaborada pelo autor.

VIDEOAULA: OPERADORES ARITMÉTICOS E DE COMPARAÇÃO

Videoaula: Operadores aritméticos e de comparação

Para visualizar o objeto, acesse seu material digital.

A tabela a seguir resume o uso desses operadores (Tabela 1):

Entrada #1 Entrada #2 AND OR NOT

Fonte: elaborada pelo autor.

Operador AND (&&)

7 console.log(expressao_1 || expressao_2) //true

Operador NOT (não)

10 console.log(!(expressao_1 && expressao_2)) // true

console.log(!expressao_1 && !expressao_2) // false

VIDEOAULA: OPERADORES LÓGICOS

Videoaula: Operadores lógicos

1 // determina aprovados para a segunda etapa

6 * acertos_na_prova recebe a quantidade de acertos na prova

18 if((nota > nota_minima_aprovacao) ||

RESOLUÇÃO DO ESTUDO DE CASO

Primeiro atente-se às regras de aprovação:

Convertendo essas regras para expressões, temos:

nota >= 0.7.

18 if((nota > nota_minima_aprovacao) ||

Podemos notar dois erros: