MÓDULO 03

LÓGICA DE PROGRAMAÇÃO E JAVASCRIPT BÁSICO

Nesse módulo vamos estudar sobre lógica de programação. A partir dos
conhecimentos adquiridos nesse módulo, vamos conseguir nos aprofundar
no conhecimento das linguagens de programação e assim evoluir cada vez
mais. Vamos entender alguns conceitos importantes a seguir.
➢ O que é lógica de programação?
R: É o conjunto de técnicas e conhecimentos que utilizamos para colocar
instruções em uma sequência lógica para chegar em um determinado
resultado.
Vamos estudar lógica de programação a partir das técnicas e
conhecimentos da linguagem JavaScript. Tal aprendizado poderá ser
tranquilamente aproveitado em outras linguagens de programação. A
base é praticamente a mesma, mudando alguns tópicos pontuais e
particulares que variam entre uma e outra linguagem.
➢ O que é algoritmo?
R: Um algoritmo é uma sequência lógica e finita de instruções bem
definidas e estruturadas que são seguidas para resolver um problema
ou realizar uma tarefa específica. Essas instruções são escritas de forma
precisa e ordenada, de modo que possam ser executadas por um
computador ou por uma pessoa seguindo o processo. No nosso caso,
vamos criar algoritmos usando a linguagem de programação JavaScript.

A seguir teremos um exemplo do que seria um algoritmo na prática:

pág. 1
Primeiramente temos o problema: O candeeiro não acende. A seguir temos
verificações, e para cada verificação uma ação diferente. Os diferentes finais
dependem do resultado das verificações.

Claro que é apenas um exemplo para ilustrar o que é um algoritmo. Mas só

para você entender que é possível criar essas sequências lógicas usando
linguagens de programação para que o sistema de comporte da forma que
desejamos.

Para que você se familiarize mais, segue outro exemplo:

pág. 2
Redes sociais usam algoritmos para recomendar o que você assiste e exibir
vídeos de acordo com sua preferência.

➢ Qual a diferença entre Hardware e Software?

R: Hardware e software são duas partes essenciais de um sistema de
computador. O hardware refere-se a todos os componentes físicos do
computador, como processador, placa-mãe, memória RAM, disco rígido,
entre outros. Esses componentes são responsáveis por processar,
armazenar e fornecer informações para o software.
Já o software refere-se aos programas, aplicativos e sistemas
operacionais que são executados no computador. O software é
responsável por realizar tarefas específicas, como edição de texto,
reprodução de áudio e vídeo, navegação na internet, entre outras.

pág. 3
 A principal diferença entre hardware e software é que o hardware é a
parte física do computador, enquanto o software é a parte lógica. O
hardware é tangível e pode ser visto e tocado, enquanto o software é
intangível e não pode ser tocado fisicamente.
Outra diferença importante é que o hardware é construído e projetado
para desempenhar funções específicas, enquanto o software é
programado para executar tarefas específicas em cima do hardware. Em
outras palavras, o hardware fornece a plataforma para o software
funcionar.
Em resumo, a lógica de programação é a técnica que utilizamos para
criar algoritmos para os nossos softwares por meio das linguagens de
programação. Uma vez que nosso software está programado,
conseguimos para essas instruções para nosso computador, que
processará essas informações em seu hardware resultando em um
sistema completo que permita a interação do usuário com a máquina.

SOBRE AS LINGUAGENS DE PROGRAMAÇÃO

Vamos entender melhor como funcionam as linguagens de programação.
Podemos dizer que as linguagens de programação dividem-se entre três
grupos:
1. Linguagem de máquina – É compreendida apenas pelo computador,
não sendo possível ser compreendida pelos humanos. Basicamente
é a linguagem binária(bits) conjuntos de 0 e 1.
2. Linguagem de baixo nível – Não é totalmente ilegível aos humanos,
portanto não pode ser considerada linguagem de máquina, mas
também não é de fácil compreensão. Um exemplo de linguagem de
baixo nível é: Assembly.
3. Linguagem de alto nível – É possível compreendê-la. Esse é o tipo de
linguagem que vamos utilizar durante as próximas aulas. Com elas
iremos criar algoritmos que irão dar aos nosso projetos o
comportamento esperado. Exemplos de linguagens de alto nível:
JavaScript, Python, C#, C++, PHP.

pág. 4
 ➢ Como a máquina entende o código que criamos?
R: O nosso código fonte é composto do conjunto de pastas e arquivos
que criamos em determinado projeto. Esse código todo é escrito com
linguagens de alto nível. Para que esse código possa ser lido pela
máquina é necessário converte-lo para um código fonte de máquina.
Isso é possível de duas formas principais:
1. Compilação: Nosso código é convertido em um ou mais arquivos que
podem ser compreendidos pela máquina. Esses arquivos ficam
salvos e são executados posteriormente. Essa compilação acontece
a partir de um compilador, que é um software responsável por essa
conversão.
2. Interpretação: A medida que o código é compilado ele já vai sendo
executado sem que haja necessidade de salvar antes. Isso acontece
por meio de um software interpretador.
Um exemplo de linguagem compilada é a linguagem C. Um exemplo de
linguagem interpretada é a linguagem JavaScript.

VARIÁVEIS
Agora iremos começar a estudar sobre variáveis. Esse é o primeiro tópico
que vamos estudar já usando a linguagem JavaScript, porém vale lembrar
que variáveis não é um conceito exclusivo de JavaScript, mas de todas as
linguagens de programação de um modo geral. Podem haver diferenças
entre uma linguagem ou outra mas o conceito é o mesmo. É muito
importante aprender o que são, como declarar e como utilizar variáveis pois
sem elas, não é possível criar um algoritmo. Primeiramente, crie uma pasta
para as próximas aulas com o nome que quiser e em seguida abra ela no VS
Code.
Criaremos dois arquivos: index.html e scripts.js

pág. 5
No arquivo index.html, crie a estrutura inicial do HTML e faça o link do
arquivo script.js.

Note que estamos usando a tag <script> e estamos atribuindo um src à ela,
indicando o caminho do nosso arquivo script.js. Outra coisa importante é
que nós estamos colocando a tag de script no dentro de <body> lá no final
dela e não entre as meta tags como fazemos com o css por exemplo,
porquê? É recomendado colocar a tag <script> ao final da tag <body>
porque o navegador começa a renderizar a página HTML a partir do início
do código e a execução de scripts pode bloquear o processo de
renderização. Colocar o script no final do body garante que todo o conteúdo

pág. 6
seja carregado e exibido antes de ser executado, evitando atrasos na
renderização da página. Além disso, ao colocar o script no final da página,
pode-se garantir que todo o conteúdo esteja disponível antes que o script
seja executado, evitando erros de referência de elementos que ainda não
foram carregados.
Agora, todo o código JavaScript escrito dentro de script.js passará a ser
executado pelo no HTML. Vamos ao primeiro exemplo:
Vá no arquivo script.js e escreva a seguinte função:

A função alert no JavaScript dispara uma mensagem para o usuário quando

a página é acessada. Vamos testar? Salve a alteração feita no VS Code e abra
o arquivo index.html no navegador:

Assim que a página abrir o alerta aparecerá:

pág. 7
Sempre que a página for atualizada, o alerta será exibido. Você pode testar
com outra mensagem por exemplo:

Note que entre ( ) estamos colocando uma string, então a frase precisa estar
entre aspas, não importa se são aspas simples ou duplas, tanto faz.
Salve no VS e atualize a página no navegador:

pág. 8
Esse foi apenas um teste para você ver como funciona o JavaScript na
prática. Agora vamos ver sobre os tipos de variáveis existentes.
➢ var – var é a forma mais antiga de se declarar variáveis em JavaScript.
Hoje em dia usa-se let. Uma variável declarada como var pode ser
redeclarada, ou seja, um novo valor pode ser atribuído à ela. Não se
preocupe, veremos na prática.
➢ let – let é a forma atual de se declarar variáveis no JavaScript.
Semelhante a var, também pode ser redeclarada. Ambas, var e let,
podem ser utilizadas, porém let é a forma mais adequada e está de
acordo com as novas atualizações do EcmaScript*
➢ const – diferente de var e let, const é de constante, ou seja, não pode
ser redeclarada, seu valor inicial é fixo.
*EcmaScript é uma linguagem de programação criada pela organização
Ecma International. Ela é mais conhecida por ser a linguagem base do
JavaScript, usada principalmente para programar para a web. O objetivo do
EcmaScript é fornecer uma especificação padrão para a linguagem de
programação, permitindo que diferentes implementações da linguagem
sejam compatíveis entre si. Desde sua criação em 1997, várias versões do
EcmaScript foram lançadas, cada uma com novos recursos e melhorias. A
versão mais recente é a EcmaScript 2022, que adicionou novos recursos
como o operador "pipeline" e melhorias na manipulação de strings.
QUAL A DIFERENÇA ENTRE VAR E LET?
Em JavaScript, tanto a palavra-chave var quanto let são usadas para declarar
variáveis. No entanto, há diferenças importantes entre elas:

pág. 9
 1. Escopo de bloco: quando uma variável é declarada com var, ela tem
escopo de função, o que significa que pode ser acessada em qualquer
lugar dentro da função em que foi declarada. Já as variáveis
declaradas com let têm escopo de bloco, o que significa que elas só
podem ser acessadas dentro do bloco em que foram declaradas.
2. Hoisting: variáveis declaradas com var são "içadas" (hoisting) para o
topo do escopo em que foram declaradas, o que significa que podem
ser acessadas antes mesmo de serem declaradas. Já as variáveis
declaradas com let não são içadas e só podem ser acessadas depois
de serem declaradas.
3. Reatribuição: variáveis declaradas com var podem ser reatribuídas a
qualquer momento, enquanto as variáveis declaradas com let só
podem ser reatribuídas dentro do mesmo escopo em que foram
declaradas.
Em resumo, o uso de let é mais seguro e recomendado, pois ajuda a evitar
erros comuns de escopo e pode levar a um código mais legível e fácil de
manter.
Não se preocupe. É bastante teoria, mas vamos ver tudo isso na prática.

PRA QUE SERVEM AS VARIÁVEIS?

Variáveis são ferramentas fundamentais na programação pois com elas,
podemos armazenas valores em memória e reaproveita-los ao longo do
código. Por exemplo:
No arquivo script.js, vamos criar uma variável com let e atribuir uma frase
(string) para essa variável:

pág. 10
Observe que primeiro declaramos a variável usando let, damos um espaço
e damos um nome para essa variável, pode ser qualquer um, no nosso
exemplo o nome dessa variável é frase. Sobre nomes de variáveis é
importante duas considerações:
1. O nome da variável precisa fazer sentido em relação ao seu valor. Não
seria adequado eu ter uma variável com o nome frase e valor dela ser
um número por exemplo. É possível? Sim, mas não é adequado.
Acostume-se com a ideia de que no exercício da profissão, outras
pessoas irão ler o seu código e quando elas se depararem com uma
variável, só de ler o nome da variável ela já deve saber ou no mínimo
imaginar do que se trata o seu valor e qual a sua função naquele
código. Isso é uma boa prática.
2. Vamos utilizar uma determinada forma de escrita para os nomes das
variáveis chamada CamelCase. CamelCase é uma convenção de
nomenclatura em programação que consiste em escrever palavras
compostas ou frases sem espaços, separando-as por maiúsculas. A
primeira palavra começa com letra minúscula e as palavras
subsequentes começam com letra maiúscula.

Por exemplo, "nomeCompleto" ou "dataDeNascimento".

CamelCase é uma forma popular de nomear variáveis, funções e

métodos em muitas linguagens de programação, incluindo JavaScript.

No caso do nosso exemplo, como trata-se de uma única palavra,

então colocamos tudo minúsculo: frase. Mas se o nome que
quiséssemos dar fosse “frase de efeito”, ficaria assim: fraseDeEfeito.
Tudo isso visa a melhor legibilidade do código.
3. Nomes de variáveis não podem:
Conter espaço:

pág. 11
 Veja que fica com traço vermelho embaixo indicando erro.
Começar com número:

O nome da variável pode conter números, mas não pode começar com
números, entendeu? Veja:

Assim estaria correto.

Nomes de variáveis podem conter:

Os seguintes caracteres especiais $ (cifrão) e _ (underline)

Outros caracteres especiais que não sejam esses, não serão permitidos.
Esses caracteres podem ser colocados tanto no início como no meio delas.

pág. 12
Foi importante fazer esses apontamentos para que você já inicie no
JavaScript com boas práticas. Voltando para o nosso exemplo, vamos criar a
variável frase assim:

Agora vamos colocar essa variável dentro de um alert:

Perceba que estamos colocando o nome da variável entre parênteses. Como

é uma variável não precisa ser colocada entre aspas, é só colocar o nome
direto.

Agora salve no VS Code e atualize a página no navegador e veja o resultado.

pág. 13
Você já está começando a entender sobre a utilidade de uma variável, não
é? Imagine que nós tivéssemos que colocar essa frase em dezenas de partes
do nosso código. Teríamos que digitar a frase toda, frase por frase, que
trabalheira!?

Com a frase armazenada em uma variável, escrevemos ela uma única vez e
é só chamar a variável pelo seu nome que teremos acesso ao valor que está
armazenado nela.
Existe uma outra forma de visualizarmos isso que é usando a função
console.log( ).

Você deve estar se perguntando o porque dos parênteses. Bom, essa é a

forma como as funções são executadas. Veremos isso amplamente ao longo
das próximas aulas. Certo, como vamos visualizar o console?

Simples, salve as alterações no VS Code e atualize a página no navegador.

Após isso digite o atalho: Ctrl + shift + I para que as ferramentas do
desenvolvedor sejam abertas:

pág. 14
Agora navegue até a aba console.

Você já deverá ver a frase aqui. Caso não apareça é só atualizar a página
novamente. Acostume-se a usar o console pois aqui podemos testar coisas,
ver mensagens de erro e muitas outras coisas necessárias na hora do
desenvolvimento.

Mais uma coisa que precisamos saber sobre variáveis é que são levadas em
consideração letras maiúsculas e minúsculas. Então se criarmos duas
variáveis assim:

pág. 15
Ao atualizar a página aparecerá no console assim:

Veja que é o mesmo nome de variável, mas o JavaScript interpreta como

duas variáveis distintas por conta de uma estar com letra maiúscula e a
outra com letra minúscula. Faça seus próprios testes!

A seguir veremos como redeclarar variáveis.

Para redeclarar uma variável basta escreve-la no código com o mesmo nome
e dar a ela um outro valor:

pág. 16
Atualize a página e verifique o que aparece no console:

Apesar da variável ter sido declarada inicialmente com o valor ‘primeiro

valor’, ela foi redeclarada com outro valor, que é o que está aparecendo no
console.

Podemos redeclarar uma mesma variável quantas vezes quisermos, o

JavaScript levará em consideração sempre o valor da última redeclaração de
cima para baixo:

pág. 17
Se você atualizar a página verá que no console aparecerá:

Caso a redeclaração acontecesse após a função console.log( ), não seria

levada em consideração, pois o código é executado de cima para baixo:

pág. 18
No console apareceria no console a última redeclaração antes da função ser
executada:

Como vimos anteriormente, let é um tipo de variável que pode ser

redeclarada. Mas se tentarmos fazer o mesmo com uma variável const já
teremos um erro.

pág. 19
Note que trocamos let por const. Isso irá funcionar? SIM! Atualize a página
e veja no console.
Agora, se tentarmos redeclarar essa variável:

Atualize a página e veja o que acontece:

Aparece um erro no nosso console. Se você jogar esse erro em um tradutor

verá que está falando justamente que é por conta da variável ser do tipo

pág. 20
const. O interessante é que o console nos dá exatamente a linha do código
que está causando esse erro:

Erro na linha 3. Se você observar na figura anterior verá que a redeclaração

foi tentada justamente na linha 3:

Tudo isso fará sentido para você ao longo do curso. Você está apenas
começando.

pág. 21
 TIPOS DE DADOS
Estamos estudando lógica de programação utilizando JavaScript. Nesse
momento, vamos aprender sobre os tipos de dados. Não significa que os
tipos de dados que veremos aqui são exclusivos do JavaScript. Na verdade,
veremos os tipos principais, que também são utilizados em outras
linguagens. Por hora esse conhecimento será suficiente. O primeiro tipo de
dado que veremos é STRING.
No VS Code, vamos apagar os exemplos que usamos anteriormente, dentro
no arquivo script.js, e vamos criar uma nova variável const que servirá
apenas para exemplificar o que é uma string.

Uma string nada mais é do que um bloco de caracteres, geralmente um

texto, envolvido por aspas. Podem ser aspas simples ou aspas duplas, tanto
faz. Mas nós entenderemos a seguir o porque usar aspas simples é mais
conveniente dependendo da situação. Se eu colocar o texto sem as aspas
funciona? Faça o teste você mesmo.

Veja que está dando erro.

Mas com aspas simples ou duplas, funciona. Vamos usar aspas duplas agora:

pág. 22
A única coisa é que eu não posso começar com aspas simples e terminar
com aspas duplas nem vice-versa. A string precisa começar e terminar com
o mesmo tipo de aspas.

Veja que está dando erro.

E se eu tiver que escrever um texto que contenha aspas dentro de uma
string? É aí que entra a conveniência de usar aspas simples para envolver a
string. Posso usar ambos tipos de aspas ao mesmo tempo. Por exemplo:

Observe que a string está envolvida por aspas simples e o trecho do texto
com aspas duplas. Então começamos com aspas simples, pois na língua
portuguesa usa-se aspas duplas. Se colocássemos aspas duplas em ambas
não daria certo. Veja:

Eu poderia começar com aspas duplas e no meio usar aspas simples?

Poderia. Mas levando em consideração o português é mais conveniente
fazer o contrário.

pág. 23
Caso você não precise usar aspas no meio da string você pode escolher qual
tipo de aspas quer usar para envolver a string.
CONCATENANDO STRINGS:
Concatenar é juntar, somar. Podemos fazer isso com strings utilizando o
símbolo + que também é utilizado para soma. Vamos criar no nosso arquivo
script.js duas strings distintas e depois vamos concatena-las:

Agora vamos usar a função console.log( ) para realizar essa concatenação e

ver o resultado:

Agora atualize a página no navegador e verifique o que aparece no console:

pág. 24
Veja que ficou sem o devido espaçamento, porquê? Isso acontece porque
ao concatenar strings o JavaScript literalmente junta uma na outra e como
não colocamos nenhum espaço em nenhuma das duas strings que criamos
ficou dessa forma. Como podemos resolver?
Basta adicionar um espaço na string. Tanto faz adicionar um espaço ao final
de primeiraString ou no início de segundaString. Escolha uma das duas!

OU

Salve no VS Code e atualize a página no navegador:

Agora está certinho.

Outra forma de fazer isso é adicionando um espaço vazio durante a
concatenação. Você já deve ter percebido que as strings consideram
também espaços, não é?

pág. 25
Bem, remova o espaço colocado na string que você alterou e adicione um
espaço vazio na função console.log usando o concatenador +

Na prática, colocamos uma string, somamos com um espaço vazio e

somamos novamente com outra string. Eu estou utilizando espaço entre as
concatenações apenas para melhor visualização, mas poderia ser tudo
junto, assim:

Existe uma forma mais moderna e ainda melhor de se concatenar strings,

deixando o nosso código mais legível e mais fácil de ser escrito. Essa forma
chama-se: Template String
A sintaxe de template string é muito simples. Basta utilizar crases ao invés
de aspas. Assim:

Perceba que a string agora está envolvida por crases

pág. 26
E como podemos fazer a concatenação de strings usando o método
template string?
Vamos usar a sintaxe: ${ }
Cifrão e chaves podem conter o valor de variáveis. Lembra que temos uma
variável cujo valor é uma string “Programador”? Vamos então concatenar
as strings assim:

Dentro das chaves colocamos a variável segundaString. Se você atualizar a

página no navegador verá:

Veja que o espaçamento já ficou correto sem que precisássemos adicionar

nenhum espaço na string em si. Isso porque a template string já identifica
os espaços ao invés de juntar tudo literalmente como o método que usamos
anteriormente.

pág. 27
Vamos criar outro exemplo concatenando agora as duas variáveis que
criamos?

Se você verificar no console do navegador, verá que o resultado é o mesmo:

Fique à vontade para criar seus próprios exemplos, pratique, seja curioso!

Aprendemos o poder de Template String. Usando esse método podemos

colocar variáveis ou código JavaScript dentro de chaves ${variável} que
conseguiremos construir um código muito funcional e organizado. Ao longo
do curso vamos usar muito essa forma então pratique bastante.

A seguir veremos sobre outro tipo de dado muito utilizado: NUMBER

pág. 28
O tipo number nada mais é do que um número, um valor numérico que
pode ser calculado em qualquer operação matemática. Calma, não vamos
estudar conceitos avançados de matemática em programação, isso ´´e um
mito. Mas eventualmente podemos nos deparar com operações simples
dentro de um código. Vamos primeiro ver a sintaxe:

O tipo number, diferentemente do tipo string, não fica envolvido por aspas.
Caso estivesse, seria considerado como um caractere de texto. Veja:

Dessa forma, o número 3 faria parte de uma string, portanto não poderia
ser utilizado em uma soma ou subtração por exemplo. Vamos ver na
prática? Seguindo a mesma lógica anterior, criaremos duas constantes com
valor do tipo string e vamos tentar soma-las:

pág. 29
Agora, atualize a página no navegador e veja qual resultado aparece no
console.

Obviamente 3 + 2 não dá 32! O resultado esperado era 5, certo? Porque isso

aconteceu? Bem, isso aconteceu porque estamos tentando somar números
do tipo string, então o JavaScript não considera como uma operação
matemática e sim como uma concatenação, que foi o que aprendemos
anteriormente. Agora experimente mudar para o tipo number (sem as
aspas) dessa forma:

Agora atualize a página e veja o resultado:

Agora sim, o resultado correto: 5

pág. 30
O JavaScript é capaz de realizar diversas operações matemáticas, contanto
que o tipo de dado calculado seja NUMBER
Da mesma forma que somamos nesse exemplo com números, poderíamos
subtrair, multiplicar e dividir, mas aprenderemos sobre os operadores
aritméticos mais pra frente.
Existe uma forma bem legal de saber qual é o tipo de dado armazenado em
uma variável, caso você esteja em dúvida. Podemos usar typeof.

Coloque dentro do console typeof seguido da variável que quer verificar.

Salve no VS Code e atualize a página no navegador:

pág. 31
Agora, se envolvermos o número com aspas

Veja o resultado no console

Tratando-se do tipo NUMBER, usamos ponto para definir casas decimais,

caso você queira trabalhar com um número que não seja inteiro:

Se você olhar no console do navegador verá que mesmo sendo um número

“quebrado”, o tipo dele continua sendo NUMBER.

pág. 32
Outra forma de adicionarmos casas decimais é colocando o número seguido
de e + número de casas decimais. Imagine que você queira 10 casas
decimais, na prática ficaria assim:

Agora vamos mudar um pouquinho o nosso console.log. É possível verificar

mais de uma coisa dentro da mesma função console.log(). Para isso, basta
adicionar uma vírgula entre os itens. Exemplo:

Aqui estamos verificando primeiramente qual o tipo de dado armazenado

na variável numero e em seguida, após a vírgula, estamos verificando qual
o valor dessa variável. Atualize a página no navegador e veja:

Temos o tipo number seguido de um numero com 10 casas decimais.

pág. 33
Bom, não tem muito segredo no tipo number. Por hora, o que vimos já é
suficiente. Mais pra frente veremos sobre operações matemáticas com
números. Agora veremos outro tipo de dado que é o: NULL
Em JavaScript, o valor null é usado para representar a ausência intencional
de qualquer objeto válido. É considerado um tipo de dado primitivo e é
frequentemente usado para indicar que uma variável não tem um valor
definido ou que um objeto não possui uma propriedade específica.
Exemplo:

O que temos aqui é uma variável com valor nulo. Não significa que essa
variável tem ausência de valor. Ela tem um valor nulo, ou seja, um valor que
ainda não foi especificado.
Imagine que você está em um e-commerce e ainda não adicionou nada no
carrinho. Teoricamente essa compra não tem um valor definido, então o
valor inicial é nulo. Caso estivéssemos desenvolvendo esse e-commerce,
não poderíamos deixar essa variável sem valor, pois seria considerado pelo
JavaScript como undefined (outro tipo de dado que veremos a seguir).
Então, deixamos o valor como null.
UNDEFINED: Diferentemente de null, undefined é um valor inexistente. Null
é um valor existente, porém nulo. Undefined é indefinido, ou seja,
inexistente.

pág. 34
Teste você mesmo: declare uma variável e não atribua à ela nenhum valor
e em seguida use console.log() para tentar acessar o seu valor:

Utilize let ao invés de const nesse exemplo:

Veja no console:

Deu undefined, pois nenhum valor foi atribuído a essa variável.

pág. 35
Outro tipo de dado muito utilizado é o: BOOLEAN
o tipo boolean pode-se dizer que é o verdadeiro ou falso do JavaScript. No
caso, esse tipo só pode ter dois valores: true ou false.
Veja no exemplo:

Veja no navegador:

Geralmente vamos usar o boolean em verificações dentro da nossa

aplicação, seguem alguns exemplos:

pág. 36
Imagine que no desenvolvimento do site de uma faculdade você crie uma
variável que seja responsável por separar alunos formados e não formados.
Poderíamos usar um boolean:

Se o aluno for formado o valor da variável será true, caso não for o valor
será false.
Uma outra situação seria a verificação de alunos faltosos em uma lista de
chamada. Poderíamos armazenar o valor em uma variável:

Nesse exemplo, não houve nenhum aluno faltoso. Mas como assim o valor
é 0, não deveria ser false? Bem, existem alguns dados que também possuem
valores booleanos. O zero por exemplo, além de ser do tipo number, ele
também retorna um valor booleano, que no caso é false. Outros dados que
também retornam um valor booleano false são o null e o undefined que
vimos anteriormente, NaN (not a number – traduzido é: não é um número)
e uma string vazia (‘ ’). Todos esses dados retornariam false em uma
verificação booleana.

pág. 37
Pode ser que você não esteja entendendo bem o porque colocarmos esses
dados ao invés de simplesmente atribuir false. Isso tudo fará mais sentido
pra você quando formos estudar sobre condicionais nas próximas aulas. Por
hora, apenas anote tudo.
Da mesma forma que temos itens que retornam false, também temos itens
que retornam true, a saber:
➢ String com pelo menos um caractere: “frase”, “ “. Espaço já é
considerado como caractere.
➢ Qualquer número que não seja zero inclusive números negativos,
inteiros ou não.

FUNÇÕES
Dando continuidade aos estudos de lógica de programação, iremos
aprender sobre funções, objetos e arrays. Esses também são tópicos
comuns em várias linguagens de programação, no nosso caso, veremos
como se aplicam na linguagem JavaScript. Começaremos aprendendo sobre
funções.
Em programação, uma função é um bloco de código que executa uma tarefa
específica e pode ser chamado em diferentes partes de um programa. São
muito necessárias para a organização do código e com elas podemos
implementar várias funcionalidades.
Como declarar uma função? A forma mais comum é a seguinte:

Primeiramente usamos a palavra function e em seguida damos um nome

para essa função, semelhante ao que fazemos com as variáveis. Lembrando
que quando vamos dar um nome para uma variável ou função, além de
usarmos o formato camelCase, que consiste em colocar a primeira palavra
em minúsculo e começar as outras palavras com a primeira letra maiúscula,
pág. 38
também temos que tomar o cuidado de não usar acentos ou cedilha. Veja
que colocamos o nome dessa função minhaFuncao. Ao término do nome
da função abrimos parênteses ( ), onde poderemos passar parâmetros para
essa função caso seja necessário. Por último abrimos chaves { }. Dentro
dessas chaves iremos colocar um bloco de códigos que será executado toda
vez que essa função for chamada.
Você deve estar se perguntando o que é esse texto azulado dentro da
função, que começa com duas barras, não é? Bom, isso é um comentário.
Podemos inserir comentários no nosso código afim de anotarmos
informações relevantes sobre aquele trecho. Isso é útil tanto para nós
lembrarmos o que foi feito ali, quanto para outros desenvolvedores que irão
ler o nosso código. Não abuse dos comentários! Comente apenas o que for
realmente necessário.
Para inserir um comentário em JavaScript, coloca-se duas barras e o que vier
a seguir será tratado como comentário:

Para fazer um comentário com mais de uma linha, deve-se envolver o

comentário com: /* */. Veja exemplo abaixo:

Os comentários não são levados em consideração na execução do código,

então tudo que estiver comentado no código, será ignorado pelo JavaScript.

pág. 39
Agora que já aprendemos como declarar uma função e como inserir
comentários em JavaScript, vamos ver na prática como funciona.
Adicione um console.log( ) dentro da função com uma mensagem qualquer:

Bom, agora é só abrir o console no navegador e essa mensagem estará lá?

Faça o teste. Salve as alterações no VS Code com o atalho ctrl + s e abra o
arquivo index.html no navegador. Use o atalho ctrl + shift + i para acessar as
ferramentas do desenvolvedor e navegue até a aba console.
DEU ERRADO!!!
Exatamente. Por que não funcionou?
Não funcionou porque nós apenas declaramos a função, porém ela não está
sendo chamada, ou como costuma-se dizer no meio da programação, não
está sendo invocada. Para que o bloco de códigos dentro da função seja
executado é necessário que essa função seja chamada. Esse é o poder da
função. Ela não ficará executando aquele código a todo momento, mas só
em momentos específicos. Cabe ao desenvolvedor estabelecer em que
momento ou em qual circunstância determinada função será chamada.
Vamos para a prática, como se chama ou invoca uma função?

pág. 40
Basicamente é só chamar pelo nome da função e adicionar parênteses ao
final. Na parte de cima estamos declarando a função e o bloco de códigos
que ela executa e logo abaixo estamos chamando essa função. Agora, se
você salvar no VS Code e atualizar a página no navegador, verá que a
mensagem apareceu no console.

Imagine que estamos trabalhando em um sistema e queremos exibir uma

mensagem de “bem-vindo” toda vez que o usuário fizer login. Essa
mensagem não precisa ficar sendo exibida a todo momento, ela será exibida
apenas em um momento específico que é quando o usuário faz o login no
sistema. Então, nós teríamos uma função que executa um alert por
exemplo, com a mensagem “Seja bem-vindo!” e programaríamos o nosso
sistema para que toda vez que o usuário fizer login, essa função seja
chamada. Esse é apenas um exemplo da usabilidade de uma função.
Posso ter mais de uma tarefa sendo executada dentro de uma função? SIM.
Vamos adicionar mais uma tarefa para nossa função:

pág. 41
Além de exibir uma mensagem no console, a função agora também exibirá
uma mensagem para o usuário. Salve no VS Code e atualize a página no
navegador.

Uma função pode executar várias tarefas ao mesmo tempo, pratique!

PARÂMETROS E ARGUMENTOS
Uma função pode possuir parâmetros e posteriormente receber
argumentos para esses parâmetros. Os argumentos são valores variáveis
que são passados para as funções e dão certo dinamismo à elas. Vamos para
a prática.
Imagine que queremos exibir mensagens diferentes a cada vez que
determinada função é chamada, como fazemos isso? Vamos adicionar o
parâmetro mensagem dentro dos parênteses na declaração da função da
seguinte forma:

Agora vamos colocar esse mesmo parâmetro dentro do console.log( )

pág. 42
Explicando:
1. A função possui um parâmetro que no caso é uma mensagem.
2. Logo, a função espera receber um argumento quando essa função for
chamada.
3. Quando a função é chamada e o argumento é passado, a função
recebe esse argumento e transfere ele para o bloco de códigos que
ela está executando.
4. O argumento recebido pela função é aproveitado para exibir a
mensagem no console. Quando eu uso o mesmo nome do parâmetro
no código (mensagem), significa que o valor que será recebido ali será
o mesmo valor usado por aquela tarefa.

Bom, agora vamos chamar a mesma função 3 vezes e para cada uma das
vezes que chamarmos a função, passaremos um argumento diferente. Veja:

Se você atualizar a página no navegador verá:

pág. 43
Isso torna a função dinâmica. Perceba que no primeiro momento
estabelecemos qual parâmetro aquela função espera receber e a cada
chamada dessa função passamos um argumento diferente. Por isso, a cada
execução do bloco de código dentro daquela função foi recebido e
aproveitado um valor diferente.
Mas o nome do parâmetro precisa ser mensagem mesmo? Caso fosse outro
nome não funcionaria? A resposta é que não precisa ser necessariamente o
nome que usamos no exemplo, poderia ser qualquer outro nome. Olha só:

O resultado será o mesmo. Apenas tome o mesmo cuidado de não colocar

nomes com espaço. Escrever: qualquer nome assim separado daria erro e
nós já vamos entender o porquê. Outra coisa, veja que o parâmetro em si
pode ser declarado com qualquer nome, mas quando formos aproveitá-lo
dentro do bloco de códigos preciso usar o mesmo nome declarado no
parâmetro:

pág. 44
Assim já não funcionaria, pois o nome do parâmetro que estou tentando
aproveitar no console.log( ) simplesmente não foi declarado pela função.
É possível adicionar mais de um parâmetro em uma mesma função? SIM!
Como fazemos isso? Separando os parâmetros por vírgula dessa forma:

Vamos colocar em inglês para você já ir se acostumando. Observe que o

primeiro parâmetro esperado é name, receberemos o nome do usuário. O
segundo parâmetro, após a vírgula, é age, que significa idade. Da mesma
forma, estamos aproveitando os valores que serão recebidos por essa
função e os exibiremos no console. Lembra que nós vimos que não se deve
colocar o nome dos parâmetros de forma separada? Pois bem, isso é por
conta de a JavaScript entender que dois nomes separados são dois
parâmetros distintos e como não há nenhuma vírgula que os separa então
dá erro. Você pode colocar quantos parâmetros quiser, desde que estejam
separados por vírgula.
Agora vamos executar novamente essa função 3 vezes e para cada uma
delas passaremos argumentos diferentes.

pág. 45
Note que ao passar os argumentos, também devemos separá-los com
vírgula. Os argumentos devem estar na mesma ordem que os parâmetros,
então se o primeiro parâmetro da função é name, o primeiro argumento
deve ser correspondente ao nome do usuário para que o JavaScript possa
associar o argumento recebido com o parâmetro correto. Atualize a página
e veja o resultado no console.

Exatamente como o esperado.

Veja que podemos passar argumentos de diferentes tipos. O primeiro
argumento é do tipo string, por isso foi envolvido por aspas e o segundo
argumento é do tipo number e por isso foi colocado sem aspas:

RETORNO DE FUNÇÕES
Além de parâmetros e argumentos, nossas funções também podem
retornar algo. Isso é possível utilizando o return. Toda função tem um
retorno padrão: undefined. Caso queira especificar esse retorno deve-se
adicionar o return ao final da função e declarar qual o retorno esperado.
Imagine que precisamos que a nossa função retorne algum resultado após
sua execução e que nós queremos visualizar esse resultado. Faremos isso
com números para ficar mais fácil de entender.

pág. 46
A função agora espera receber dois parâmetros, que são dois números.
Lembrando que podemos dar qualquer nome aos parâmetros, mas procure
dar nomes que façam sentido, para que outras pessoas e até você mesmo
no futuro possar olhar e entender do que se tratam tais parâmetros e o que
é esperado como argumento. Veja que a função tem o return e ao lado o
que deve ser retornado, que no caso é a soma dos valores recebidos pela
função através dos argumentos passados em sua chamada.
Agora vamos adicionar um console.log( ) que chama essa função e passa
dois números como argumentos para os parâmetros:

Se você atualizar a página verá que o resultado é 7.

Ainda sobre o return, é importante dizer que ele só deve ser colocado ao
final do bloco. Tudo o que for colocado depois de return não será executado
pois o return indica o término da execução daquele bloco de códigos:

Esse alert não será executado pois está depois do return.

pág. 47
E se eu apagar o return e deixar a função sem nada? O resultado será
undefined, pois não há nenhum código sendo executado e nenhum retorno
foi especificado.

Vamos fazer mais um exemplo, agora usando Template String.

return `O resultado de ${number1} + ${number2} é:

${number1 + number2}`

Veja que usamos o método template string para concatenar string com
variáveis. Envolvemos com ` ` crases a string, inserimos o texto
normalmente com os seus devidos espaços e no lugar das variáveis usamos
${ } cifrão e chaves para apresentar o valor delas. No final estamos
realizando a soma dos valores das duas variáveis. Note que o símbolo + no
texto da string é amarelo, pois ali é apenas um caractere de texto.

pág. 48
Mas dentro de chaves, o símbolo + tem a cor lilás, pois é considerado um
operador aritmético de soma mesmo.

Pratique template strings, crie seus próprios exemplos, é assim que você vai
fixar todo o conteúdo passado.
É normal quanto temos o primeiro contato com funções sentir certa
dificuldade, como se desse um nó na cabeça. Vá com calma, revise a aula
quantas vezes for necessário até que você entenda como as coisas
funcionam e qual lógica por detrás do código que está sendo criado.
Estamos aprendendo lógica de programação já usando JavaScript e nessa
aula aprendemos o suficiente sobre funções. Funções são muito
importantes em qualquer linguagem, por isso você deve entender bem os
conceitos e principalmente praticar através de exemplos, seja os vistos na
aula, seja os que você mesmo criar. Caso tenha aprendido e conseguido
reproduzir tudo que foi passado, já está apto para seguir em frente.

pág. 49
 OBJETOS
Objetos são um conjunto de informações compostas por chaves e valores.
Esses valores podem ser métodos ou propriedades. Métodos são valores
em forma de função e propriedades são valores em qualquer outro formato.
Como criamos um objeto em JavaScript?
Primeiramente devemos criar uma variável e abrir { } chaves:

Aqui o nome do objeto criado é “Paulo” e estamos abrindo chaves

justamente para indicar que essa variável “Paulo” é um objeto. Dentro de
chaves, como você pode ver no comentário, vamos inserir chaves (agora
estou falando das chaves do objeto e não dos caracteres { }) e valores. Veja
agora:

Inserimos duas chaves dentro desse objeto: “completeName” e “age”. Logo

percebemos que esse objeto se refere à um usuário, cliente, funcionário,
etc. Então sempre que temos um conjunto de informações relacionadas a

pág. 50
mesma coisa, é interessante usar um objeto. Notou que sublinhado em
vermelho estão as chaves? Essa é a sintaxe. Primeiro coloca-se o nome da
chave e “ : “ dois pontos. Em seguida colocamos o valor daquela chave. No
caso do nosso exemplo, o valor da chave completeName é a string ‘Paulo
Victor Maia Borges’. Outro detalhe importante é separar as chaves por
vírgula. Podemos colocar quantas chaves quisermos dentro do objeto, mas
sempre separando por vírgula.

Poderíamos colocar tudo em uma linha só, mas imagine que esse objeto
pode ter varias chaves, então fica mais organizado da forma anterior. Vamos
adicionar mais algumas chaves.

Veja que agora o objeto contém quatro chaves. Os valores das chaves
podem ser de qualquer tipo. Por exemplo, o valor da chave age é do tipo
number, por isso não está envolvido com aspas. Já o valor das demais chaves
é do tipo string.

Quando os valores não são funções, chamamos de propriedades. Quando

os valores são funções, chamamos de métodos. Vamos ver adiante.

pág. 51
Agora nós temos uma chave cujo valor é uma função, ou seja, um método.
Mas por que não foi colocado o nome da função?

Geralmente criamos uma função dessa forma, não é?

Bom, quando estamos lidando com um objeto e queremos que o valor de
determinada chave seja uma função, o nome da própria chave já
corresponde ao nome da função. Por isso, ao colocar o nome da chave
“showMessage” e dar como valor dela uma função, tal função não precisa
ter nome, ela será uma função anônima, já que o nome da chave
corresponde a função em si.

pág. 52
Como podemos acessar os valores das chaves dentro de um objeto?
Faremos isso utilizando dot notation. A tradução de dot é ponto. Então
basicamente vamos acessar os valores usando ponto. Na prática ficará mais
claro.
Vamos visualizar o nosso objeto criado dentro do console.

Salve as alterações no VS Code e atualize a página no navegador.

pág. 53
Se clicar no botão indicado pela flecha verá o objeto completo:

Digamos que eu queira acessar o valor de uma chave específica dentro

desse objeto. Como fazer?

Basta colocar o nome do objeto seguido de um ponto e o nome da chave

que quero acessar. Note que ao colocar ponto o VS Code já dá as opções
disponíveis dentro daquele objeto. Vamos acessar a chave city então.

pág. 54
Se atualizarmos a página no navegador, veremos:

Exatamente o valor da chave.

Isso funcionaria para qualquer chave que tenha propriedade como valor.
Mas e no caso do método? Dentro desse objeto tem uma chave chamada
“showMessage” cujo valor é uma função, ou seja, um método. Como vamos
acessar esse valor? Também utilizaremos o dot notation para tanto. Porém,
como se trata de um método ele precisa ser executado, assim como
qualquer outra função quando é chamada. A execução acontece quando
colocamos ( ) parênteses após o chamarmos a função. Veja no exemplo
abaixo:

Veja que colocamos o nome do objeto seguido de ponto e o nome da chave.

Além disso, estamos colocando ( ) parênteses no nome da chave para
indicar a execução da função. Assim, teremos acesso ao método que foi
atribuído à essa chave.

pág. 55
Se atualizarmos a página no navegador a função será executada e o alert
que está dentro dela será exibido em tela.

Então o console.log que tanto estamos utilizando também é um método

dentro de um objeto? Podemos dizer que sim!
O console é um objeto que tem uma chave chamada log. Essa chave tem
como valor um método, ou seja, uma função anônima responsável por
executar e colocar dentro do console do navegador o código que estamos
colocando dentro dele. Por isso, quando chamamos console.log temos que
executá-lo também, pois trata-se de um método: console.log( )
Se você já entendeu que objetos são um conjunto de informações
compostas por chaves e valores, que esses conjuntos de chaves e valores
devem ser separados por vírgula, que os valores das chaves podem ser
propriedades ou métodos, que métodos são valores do tipo função e
propriedades são valores de qualquer outro tipo e que é possível acessar
esses valores por meio do dot notation, já está apto para prosseguir.
Caso não tenha entendido, revise a aula novamente e procure absorver
esses conceitos antes de seguir em frente. Isso é muito importante para o
seu aprendizado.

pág. 56
 ARRAYS
Dando continuidade aos nossos estudos, veremos agora um pouco sobre
Arrays. O que são Arrays?
São listas que contém uma série de informações. Sendo uma lista única,
chamamos de vetor, sendo uma lista de outras listas chamados de matrix.
Como criar uma array? De forma bem parecida com o objeto, só que ao
invés de { } chaves, vamos usar [ ] colchetes.

Também semelhante ao objeto, devemos separar os valores com vírgulas,

no entanto, em arrays não temos a presença das chaves, os valores são
passados diretamente dentro do array, dessa forma:

Aqui estamos criando um array de nomes, ou seja, uma lista de nomes.

Como é uma lista única, chamamos de vetor.

pág. 57
Agora observe essa construção:

Aqui estamos criando uma matriz, que uma lista de outras listas. Então
vamos criar 3 listas dentro dessa lista que chamamos de matriz:

Veja que agora temos dentro da lista matriz outras 3 listas. Uma lista de
nomes, uma lista de marcas de carro e outra lista de profissões. Isso
chamamos de matriz. Poderíamos ter colocado uma ao lado da outra, sim!
Mas geralmente colocamos nessa organização para facilitar a leitura do
código. Só de olhar já é possível ver nitidamente a separação das listas e que
todas elas estão dentro de uma lista chamada matriz (o nome da variável
não precisa ser matriz, você pode dar outro nome se quiser, exemplo: const
lista = [ [ ],[ ],[ ] ].

pág. 58
Em um array, seja ele um vetor ou matriz, posso ter dados de qualquer tipo.
Posso criar um array de strings, pode ser de numbers, booleans e até de
objetos. Em uma mesma lista posso ter diversos tipos de dados ao mesmo
tempo:

Os itens presentes dentro de um array ocupam posições. Essas posições

chamamos de index (traduzido seria índice). A primeira posição de um array
é 0, ou index 0. Então o primeiro item de um array está na posição 0, o
segundo item está na posição 1, o terceiro item está na posição 3 e assim
por diante. Veja na imagem abaixo:

É um array de números. A imagem demonstra exatamente a divisão das

posições. Perceba que o array possui 7 itens. O primeiro item é o número 3,
ou seja, está no index 0. O sétimo item é o número 32 e ele está no index 6.
Vamos testar na prática usando mais uma vez o console do navegador.

pág. 59
Vamos dar um console.log( ) no primeiro array que criamos:

Atualize a página no navegador e veja que aparece o array completo:

Clique no botão para abrir:

pág. 60
Perceba que já aparecem ali as posições de cada item. Também aparece o
tipo (array) e quantos itens tem esse array (length: 3)
Como eu faço para acessar um item especifico desse array? É só colocar a
posição do item entre [ ] colchetes após o nome do array. Dessa forma:

Veja no console agora:

Exatamente o item que está na posição 2. Se tentarmos acessar uma

posição que não tem nenhum item, por exemplo: array[3], o retorno seria
undefined (indefinido).
E no caso de uma matriz? Como acessar um item especifico dentro uma
determinada lista que está dentro de uma outra lista?
Basta utilizar dois colchetes. No primeiro eu coloco a posição da lista
pretendida e no segundo eu coloco a posição do item dentro dessa lista que
quero acessar.

pág. 61
Aqui estamos acessando a lista que está na posição 1 (index 1), que no caso
é uma lista de marcas de carros, e dentro dessa lista, acessando o item que
está na posição 2 (index 2), que corresponde a marca Fiat. Salve no VS Code
e atualize a página:

Caso quisesse a lista completa, ao invés de um valor específico, bastava

colocar apenas o primeiro colchete, ficaria assim:
console.log( matriz [1] ), isso retornaria a lista completa que está na posição
1 (index 1).

Por hora, esse é o conhecimento necessário sobre Arrays. Podemos dar

continuidade e futuramente veremos conceitos mais avançados sobre
iteração com arrays. Caso não tenha compreendido bem esse tópico, revise
a aula antes de prosseguir.

pág. 62
 OPERADORES ARITMÉTICOS
Agora começaremos a estudar os operadores aritméticos. Calma, não
precisaremos nos aprofundar em cálculos matemáticos complexos, então
não há porque se preocupar. No entanto, é importante estudar sobre os
operadores aritméticos pois eventualmente faremos uso de cálculos
simples em projetos futuros. Vamos para a prática ver como funcionam os
operadores aritméticos em JavaScript.
Primeiro, criaremos duas variáveis com valores numéricos:

O primeiro operador aritmético que veremos é o de adição, representado

pelo sinal +. Criaremos uma nova variável cujo valor será a soma das duas
variáveis anteriores, dessa forma:

pág. 63
Vamos usar template strings para praticarmos um pouco? Vamos mais uma
vez usar: console.log( ) para ver o resultado:

Aqui estamos usando template string para concatenar um texto com uma
variável, cujo valor resulta da soma das duas variáveis anteriores. Atualize a
página no navegador e veja:

Faremos um console.log( ) para cada operador.

O segundo operador é o de subtração, representado pelo sinal –

pág. 64
O operador de multiplicação é representado por asterisco *

O operador de divisão é representado por barra /

pág. 65
Até aqui o nosso console deverá estar assim:

Mas existem só esses operadores? Não. Existem outros, veremos a seguir:

Operadores de incremento são representados por dois sinais de adição ++
Operadores de incremento adicionam uma unidade ao valor anterior. Antes
disso, vamos apagar os anteriores deixar apenas os que vamos usar de
exemplo:

Uma vez que a variável numero1 tem o valor de 6, ao incrementar uma

unidade o valor resulta em 7. Seria o mesmo que fazer: numero1 + 1.
Observe também que mudamos a variável numero1 de const para let, pois
para alterar o valor de uma variável ela precisa ser do tipo let. Estamos
dando o console.log( ) em seguida para vermos justamente que após a
execução do incremento, o valor da variável numero1 passa a ser 7.

pág. 66
Assim como temos um operador de incremento, também temos o operador
de decremento representado por dois sinais de subtração - -

Observe que primeiro está sendo executado o incremento, então o valor da

variável numero1 passou a ser 7 ao invés de 6. No segundo momento é
executado o decremento, então a variável que estava com valor de 7 passa
a ter o valor de 6 novamente. Lembrando que o código é executado de cima
para baixo. Por isso separamos os dois consoles, para podermos visualizar o
antes e o depois:

pág. 67
Outro operador que temos é o módulo, que é representado pelo sinal %
Esse operador trará como resultado, o valor que sobra em uma divisão. Por
exemplo: Se formos dividir 20 / 6 , para que possamos dividir por um
numero inteiro o resultado será 3, porque é o máximo que conseguimos
multiplicar. De modo que 6x3 = 18. A diferença entre 18 e 20 é 2. Então:

O resultado é 2 pois o valor que sobra da divisão 20 / 6 é 2.

Também temos o operador exponencial representado por dois asteriscos **

pág. 68
O conceito matemático aqui é o conceito de potência. A potência é um
número que representa a multiplicação repetida de uma mesma
quantidade. O expoente é o número que indica quantas vezes essa
quantidade é multiplicada. Por exemplo, a potência 2^3 significa que o
número 2 é multiplicado por si mesmo três vezes: 2 x 2 x 2, resultando em
8. No caso do nosso exemplo fica: 6 (valor da variável numero1) exponente
2 (valor da variável numero2), que na matemática seria 6^2, ou seja, o
número 6 multiplicado 2 vezes: 6x6. Veja o resultado no console:

Exatamente. 6x6 é igual a 36.

Por enquanto é o que precisamos saber sobre operadores aritméticos. Não
se esqueça de praticar e fazer seus próprios exemplos.

pág. 69
 OPERADORES DE ATRIBUIÇÃO
Dando continuidade aos nossos estudo sobre operadores, vamos aprender
agora sobre os operadores de atribuição. O primeiro operador de atribuição
que veremos já tem sido utilizado por nós desde o início, ele é representado
pelo sinal de = igual. Temos usado ele para ATRIBUIR um determinado valor
à uma determinada varável.

O sinal de igual significa que o valor 10 está sendo atribuído à variável

número. Não tem segredo nenhum aqui.
O próximo operador de atribuição é o +=
Utilizamos o += para somar um valor e atribuí-lo ao mesmo tempo.
Exemplo:

A variável X começa com o valor de 10. Depois acontece uma soma com
atribuição (+=), ou seja, o valor de X foi somado com o valor de Y e agora X
passa a ter como valor o resultado dessa soma. Por isso, se dermos um
console.log( ) na variável X, verá que o seu valor agora é 15.

pág. 70
Seguindo a mesma lógica, temos o inverso -=
Basicamente quando usamos o -= vamos subtrair um determinado valor e
atribuir o valor dessa subtração. Faça você mesmo, com o exemplo acima!
Também temos a opção de fazer isso tanto com multiplicação *=
E também fazer com divisão /=
Basta seguir a mesma linha de raciocínio. Você pode criar seus próprios
exemplos.

OPERADORES DE COMPARAÇÃO OU OPERADORES

CONDICIONAIS
Usaremos bastante esses operadores na hora de construir algoritmos nos
nossos projetos, então procure compreendê-los muito bem.
Primeiramente veremos o operador “maior que” representado por >

É como se estivéssemos fazendo a seguinte pergunta: X é maior que Y?

O retorno seria: TRUE, ou seja, verdadeiro. X é maior que Y pois o valor de
X é 10 e o valor de Y é 5. Você pode abri o console no navegador e verificar.
Seguindo a mesma lógica, temos também o “menor que” representado por
<

pág. 71
Perceba que agora estamos perguntando: X é menor que Y? O retorno será:
FALSE, ou seja, falso. Olhe no seu console e veja.
Outro operador de comparação é o “maior ou igual” representado por: >=

Mudando um pouco nosso exemplo, colocamos o valor de Y igual a 10

também. Veja no console que o retorno é: TRUE pois apesar de não ser
maior, X é igual a Y. Então tanto faz se o número for igual ou for maior, o
retorno será TRUE. Somente se o valor não for nem igual nem maior é que
retornará FALSE.
Semelhantemente, temos o “menor ou igual” representado por: <=
Ele fará a verificação se o valor é menor ou igual o outro valor e retornará
TRUE ou FALSE.
Temos também o operador de igualdade. Como já utilizamos o sinal de igual
para atribuição, o operador de igualdade é representador dois sinais de
igual, dessa forma: ==

Isso retornará um FALSE, pois o valor de X não é igual ao valor de Y.

pág. 72
Veremos agora o operador de comparação “diferente de”, representado por
!=

Nesse caso, o retorno seria TRUE, pois o valor de X é diferente do valor de

Y.
Agora veremos sobre o operador de identidade, que se assemelha muito ao
de igualdade, porém com uma diferença importante. Ele é representado por
3 sinais de igual, dessa forma: ===. O operador de identidade, além de
verificar se os valores são iguais, também verifica se os tipos dos dados
também são iguais. Exemplo:

Esse caso retornará FALSE, pois apesar dos valores serem iguais os tipos são
diferentes. X é number e Y é string. Caso usássemos apenas o operador de
igualdade (==), o retorno seria TRUE. O operador de igualdade não leva em
consideração o tipo, apenas o valor. Já o operador de identidade verifica se
além do valor o tipo de dado também é igual. Mais para frente veremos
melhor na prática a usabilidade desses operadores e porquê é mais
vantajoso usar um ou outro em determinadas situações.

pág. 73
Da mesma forma temos o operador “não idêntico” que equivale ao
contrário de idêntico, representado por !==
Caso tenha entendido todos os operadores de comparação, já está apto a
seguir em frente.

OPERADOR TERNÁRIO
Estamos entendendo cada vez mais sobre operadores e não podemos
deixar de estudar sobre operador ternário. O operador ternário serve para
tomadas de decisão, onde temos duas possibilidades. Caso determinada
condição seja TRUE, determinada tarefa é executada, caso seja FALSE, outra
tarefa é executada. É praticamente como uma bifurcação onde podemos
seguir por um ou por outro caminho dependendo da condição proposta. O
operador ternário é representado pelo sinal de interrogação: “?”

Vamos usá-lo dentro de uma estrutura condicional. Então, primeiro temos

que estabelecer a condição. Nesse exemplo a condição é: X > Y (valor de X
maior que valor de Y). Em seguida temos o sinal de interrogação que é o
nosso operador ternário. É como se estivéssemos perguntando: O valor de
X é maior que o valor de Y?
Na sequência temos duas ações possíveis, a primeira caso o resultado da
condicional seja TRUE e após o sinal de “:” dois pontos temos a segunda,
caso o resultado da condicional seja FALSE. Então, a string que irá aparecer
no console pode ser ou uma ou outra, dependendo do resultado da
condicional.

pág. 74
Essa resposta apareceu pois o valor de X é maior que o valor de Y, então o
resultado da condicional foi TRUE.
Existe uma sintaxe a ser seguida. A primeira ação após o operador ternário
é relacionada a TRUE. A segunda ação é relacionada a FALSE. Não podemos
deixar de separar as duas ações com o sinal de :
Veja outro exemplo:

Agora a condição é outra. Estamos usando o operador ternário na condição

o valor de X é menor que o valor de Y? Caso seja TRUE, a ação a ser
executada é um alert que exibirá a string ‘SIM’, caso seja FALSE, a ação a ser
executada é um alert que exibirá a string ‘NÃO’.

pág. 75
Vamos salvar no VS Code e atualizar a página no navegador.

Exatamente.
Conforme vamos evoluindo, iremos ver outras situações onde usar o
operador ternário será fundamental para implementar funcionalidades e
construir algoritmos dentro de um projeto.

OPERADORES LÓGICOS E ESTRUTURAS DE CONDICIONAIS

Operadores lógicos estão diretamente ligados a tomada de decisão. Ao
construir um algoritmo dentro de um projeto, é obrigatório o uso de
operadores lógicos para que a aplicação tenha o comportamento e o
dinamismo desejados. Começaremos estudando sobre a estrutura de
condicionais a partir do if, que traduzido, é “se”.

Essa é a sintaxe.

pág. 76
Primeiro coloca-se if e depois, entre parênteses, a condição.
Segundo, abrimos chaves { }
Terceiro, dentro de chaves colocamos o código ou o bloco de códigos a ser
executado caso a condição estabelecida retorne TRUE .
Vamos incrementar nosso exemplo? Criaremos também uma função. E
executaremos ela dentro de if. Dessa forma:

O que está acontecendo aqui????

Vamos por partes. Criamos uma função chamada soma( ) que espera dois
parâmetros. Esses parâmetros esperados são dois números. Assim que essa
função for chamada e receber argumentos para esses parâmetros ela
disparará um alert. Esse alert contém uma template string que concatena a
palavra “Resultado” com a soma dos valores recebidos. Complicou???
Entenda o seguinte: Quando uma função é criada, ela pode ser criada para
esperar parâmetros ou não. Nesse exemplo criamos uma função que espera
receber. E quando ela vai receber? Quando a função for chamada! E o que
ela vai receber? O que for enviado dentro dos parênteses quando a função
for chamada. Isso chamamos de argumentos. Vimos isso anteriormente,
então é importante praticar os conceitos.
Uma vez recebidos esses argumentos, a função pode utiliza-los dentro do
bloco de códigos ali desenvolvido. Isso é o que está acontecendo.

pág. 77
E na estrutura condicional abaixo?

Na estrutura condicional temos if (qual a condição), seguido por um bloco

de códigos envolvido por { } chaves. Leríamos esse código dessa maneira:
Se (if), a string ‘10’ for idêntica (mesmo valor e tipo) ao number 10, execute
essas 3 tarefas!
As três tarefas são:
➢ Exibir uma mensagem no console
➢ Exibir um alert na página
➢ Chamar a função soma( ) passando dois números como argumentos,
executando-a assim.
E o que vai acontecer de fato? NADA!
Mas por que nada? Porque o resultado dessa condicional é FALSE.
Esse bloco só é executado se a condição for TRUE.
Experimente mudar a condição usando o operador !==

Agora sim, todo esse bloco de códigos será executado. Você verá dois alerts
em tela, um correspondente ao próprio if e outro correspondente a
execução da função contendo o resultado da soma. Veja você mesmo!

pág. 78
Bom, e se eu quiser ter dois blocos de códigos, um voltado para caso o
retorno da condicional seja TRUE e outro voltado para caso seja FALSE?
Para tanto usaremos o else, que para nós seria como “senão”.

pág. 79
Observe que colocamos o else bem na frente da chave que “fecha” primeira
condição. Fazemos isso para facilitar a leitura e o entendimento do código.
Também funcionaria colocando abaixo, porém da forma como está no
exemplo fica mais claro que essa segunda condição é o contrário da
primeira, dando a ideia de continuidade do fluxo do algoritmo. Também
existe a diferença de que quando usamos else, não precisamos colocar
nenhuma condição entre parênteses, basta usar { } diretamente.
Leríamos da seguinte forma:
Se ( if ) a string ‘10’ for idêntica ( === ) ao number 10, execute as 3 tarefas a
seguir, senão ( else ) execute essas 2 tarefas.
Então: A primeira condição será verificada, caso seja TRUE, o primeiro bloco
de código é executado e o segundo bloco é ignorado. Caso seja FALSE, o
primeiro bloco de código é ignorado e o segundo bloco é executado.

No nosso exemplo, o resultado da primeira condição é FALSE. Veja:

A string ‘10’ não é idêntica ao number 10. Então o bloco a ser executado é
o que está dentro de else:

Atualize a página no navegador e verifique:

pág. 80
Ainda existe uma outra forma de verificação que é o else if
Quando trabalhamos com estruturas de condicionais é bem comum ter o
que chamamos de condicionais aninhadas. Praticamente é colocarmos
outras verificações dentro de uma verificação.

Observe essa estrutura, onde temos a primeira verificação ( if ) a string ‘10’

é idêntica ao number 10? Como o resultado é FALSE, o fluxo do algoritmo
continua (caso fosse TRUE, o primeiro bloco seria executado e pararia o
fluxo por ali mesmo). Então, temos uma segunda verificação (else if ) a string
‘10’ é idêntica a string ‘11’? O resultado também é false, pois agora os tipos
são iguais, mas os valores são diferentes, então o fluxo continua. Caso
tivéssemos a condição ( ‘10’ === ‘10’ ) o resultado seria TRUE e o
console.log() dentro dele seria executado. Por fim, temos else, que seria
como: caso nenhuma das verificações anteriores retorne TRUE, faça isso.

Algo importante: else if só deve ser colocado após um if. O código dentro
de else if só será executado caso a condição do if anterior a ele retorne
FALSE e sua própria condição retorne TRUE.

pág. 81
Também podemos ter outros if dentro de um else ou else if...veja:

Antes de verificar no console do navegador, tente entender esse algoritmo

e responder qual bloco será executado, o 1, 2, 3, ou 4?
Perceba que o algoritmo se comporta da seguinte forma. Faz uma
verificação inicial (if), se for FALSE da inicio a uma serie de outras
verificações (else). Dentro de else temos mais um if, um else if e um else.
Isso é perfeitamente possível e comum se tratando de condicionais. Pode-
se ter vários ifs, vários else ifs e até mais de um else, como pode-se ver no
exemplo.
Vamos praticar a seguir mais alguns exemplos para fixar melhor esses
conceitos.

Agora vamos estudar um pouco sobre outros operadores lógicos que

podem compor as condições que estabelecemos para if e para else if.
➢ && (and) traduzido é: e (condição1 e condição2) verifica se duas ou
mais condições retornam TRUE ao mesmo tempo.
➢ || (or) traduzido é: ou (condição1 ou condição2) verifica se pelo
menos uma das duas condições retorna TRUE
➢ ! (not) traduzido é: não (nega a condição) é como se fosse uma
negação a determinada condição.

pág. 82
Aqui temos duas variáveis que representam a idade e o cargo de um
funcionário por exemplo.
A verificação abaixo é a seguinte: idade é maior que 29 e (&& - and) o cargo
é igual a admin? O retorno é TRUE.
Mas se tivéssemos:

O retorno seria: FALSE.

Apesar da idade ser maior que 29, o cargo não é igual a admin. Quando
usamos && é necessário que tanto uma como outra condição resultem em
TRUE ao mesmo tempo.

pág. 83
Poderíamos ter também outros && verificando 3, 4 ou até mais condições
ao mesmo tempo. Veja:

Ainda retornaria FALSE, pois apesar de duas condições retornarem TRUE, a

condição de igualdade no cargo é FALSE. Logo, o código desse if não seria
executado.
Vejamos agora sobre || (or – ou). Utilizamos || quando queremos validar
uma condição ou outra. Diferente de &&, ao utilizar ||, basta que apenas
uma das condições propostas retorne TRUE para que o código seja
executado. Observe o exemplo abaixo:

Esse exemplo retornaria TRUE. Apesar da idade não ser maior que 29 e do
cargo ser diferente de admin, a cidade é igual a Fortaleza. Como estamos
utilizando || (ou), tanto faz qualquer uma das condições, ou a primeira, ou
a segunda ou a terceira. Qualquer uma que retornar TRUE fará com que o
bloco de códigos seja executado.

A seguir veremos sobre ! (not – não/negar)

pág. 84
Ao usar ! iremos negar o valor de uma variável ou expressão. Simplesmente
o valor que era TRUE se torna FALSE e vice-versa. É conveniente usar isso
em alguns casos. Observe o exemplo abaixo:

Imagine que você queira executar esse bloco de código para qualquer
usuário que não (! Not) seja um admin. Então, negamos o valor dessa
expressão tornando-a no seu contrário. Se deixássemos apenas: cargo ==
‘admin’ isso retornaria false e o bloco de códigos não seria executado. Veja
que não seria viável colocar todos os cargos na condicional, por exemplo:
cargo == ‘developer’ || cargo == ‘QA’, etc. Seriam muitas condicionais
escritas, não é? Logo, como temos uma única exceção, que é o cargo
‘admin’, basta negar o valor da expressão para obtermos o resultado
esperado. A principio, cargo == ‘admin’ retornaria FALSE, mas como estamos
negando a expressão usando !, então retorna TRUE, o que faz com que o
código seja executado. Observe a sintaxe:

Colocamos ! not e entre parênteses a expressão que deve ser negada.

pág. 85
Caso queira negar uma variável simplesmente e não uma expressão de
condição, coloque ! not + variável sem os parênteses, dessa forma:

O que está acontecendo aqui? Veja que o valor da variável city é uma string
vazia, supondo que esse valor não foi preenchido pelo usuário. Já
aprendemos que uma string vazia retorna FALSE. Se colocarmos apenas o a
variável ali na condicional, não acontecerá nada, pois o bloco de códigos só
é executado caso a condição retornar TRUE. Então usamos o ! not para
negar o valor, tornando no contrário, ou seja, tornando a variável em TRUE
para que o bloco de códigos possa ser exibido. Esses são apenas alguns
exemplos, existem varias outras situações onde é conveniente usar ! not.

SWITCH CASE
Outra estrutura de condicionais bastante utilizada é a switch case. Ela é
indicada para casos onde temos dados específicos para serem validados.
Para cada case (caso) daremos um retorno específico. Veja a sintaxe:

pág. 86
Existem algumas coisas para se destacar. Primeiro temos a variável idade
cujo valor é 25. A seguir, temos a nossa estrutura switch case. Na sintaxe
coloca-se a palavra switch + (variável) entre parênteses, seguido de chaves
{ }.
Dentro de chaves, se fazem as validações usando case: Case 20:
Ali é como se fosse: caso a variável que está entre parênteses tenha o valor
de 20, execute o código após os “:” dois pontos.
A última coisa, usamos a palavra break;
Isso serve para interromper o fluxo do código quando aquele caso for TRUE,
ou seja, quando for executado. Se aquele caso específico for executado, o
switch para por ali mesmo. Podemos ter vários e vários cases dentro do
switch, e para cada caso um bloco de códigos diferente. Nesses exemplos
estamos usando sempre a função console.log( ) apenas para fixar o conceito
e ter um retorno visual do que está acontecendo, porém pode ser qualquer
outro bloco ali. Podem ser funções, strings, etc.

pág. 87
Aqui o nosso switch está verificando caso a caso e para cada caso
retornando uma coisa diferente. Talvez você não esteja vendo o porquê de
fazer dessa forma, mas acredite, em aplicações mais complexas onde é
necessário executar diferentes tarefas para certos casos específicos, usar
essa estrutura pode ser muito interessante. Nesse exemplo acima não
aconteceria nada, pois nenhum dos casos que estabelecemos bate com o
valor da variável que está sendo verificada. Mas se mudássemos o valor da
variável idade para 22, teríamos a exibição daquela mensagem especifica.
Veja que o primeiro caso seria ignorado pois não atenderia o valor da
variável e também o caso a seguir (case 23) também seria ignorado pois
estamos usando o break. Logo, assim que um caso é executado, o fluxo é
interrompido.
E se quisermos ter uma opção para quando nenhum dos cases for atendido?
Nesse casos usamos default

pág. 88
Cabe a nós desenvolvedores avaliar qual estrutura é mais interessante usar
ao realizar implementações em um projeto. Existirão situações em que será
melhor usar if, else e outras situações que será melhor usar switch case.

ESTRUTURAS DE REPETIÇÃO OU LOOPINGS

Estamos entrando em mais um tópico amplamente utilizado pelas
linguagens de programação de um modo geral, que são as estruturas de
repetição ou loopings. Aqui, como estamos estudando lógica de
programação utilizando já uma linguagem que é a JavaScript, veremos quais
são e como são feitas essas estruturas, bem como o propósito da sua
utilização.
Basicamente, estruturas de repetição servem para repetir determinado
trecho de código por uma determinada quantidade de vezes. A primeira
estrutura que vamos estudar é a estrutura for.

Essa é a sintaxe. Usamos a palavra for e entre parênteses vamos estabelecer

a nossa estrutura de repetição que praticamente se divide em 3 partes:
1. Definimos uma variável com seu respectivo valor. É importante que
essa variável seja do tipo let, pois ela terá o seu valor redeclarado a
cada repetição.
2. Definimos a condição que vai definir até quando as repetições devem
durar. Poderíamos ler como enquanto. Logo, enquanto a variável
numero tiver o valor menor que 5, execute a tarefa ao lado.
3. Colocamos o operador de incremento na variável numero justamente
para não criar um looping infinito, o que é muito perigoso. Se o valor
da variável número não for alterado para mais, concorda que o valor

pág. 89
 dela será sempre menor que 5? Uma vez que a repetição vai durar
enquanto o valor de numero for menor que 5, então será uma
repetição infinita. Loopings infinitos podem travar o navegador e até
o nosso computador de tal forma que precisaremos reiniciar a
máquina. Portanto, tome esse cuidado. Quando colocamos dessa
forma, a cada repetição o valor de numero será acrescentado em 1.
Inicialmente começa como 0, após a primeira repetição o seu valor
será 1, após a segunda 2 e assim até que o valor se iguale a 5 pois
nesse caso já não atenderá mais a condição de ser menor que 5.

Atualize a página no seu navegador e veja o resultado:

Para cada repetição, colocamos um console.log(numero) para mostrar a

mudança no valor da variável. A utilidade do looping é justamente essa. Não
precisamos colocar 5 consoles.log( ) para visualizar cada uma delas. Esse
código foi sendo repetido enquanto o valor de numero foi menor que 5,
tanto é que o último console é 4, quando chegou no 5 o código já não
repetiu mais, porque 5 é igual a 5, não é menor que 5.

pág. 90
Vamos colocar um numero maior?

No console:

Inicialmente o valor de numero é 0. Enquanto o valor de numero foi menor

que 20, o código foi repetidamente executado. Para cada repetição foi
adicionado 1 ao valor de numero, tornando esse looping finito, ou seja,
chega um momento que a repetição precisa parar.

pág. 91
NÃO ESCREVA O CÓDIGO ABAIXO:

Por exemplo, esse código geraria um looping infinito pois a lógica dele não
possui um ponto de interrupção. Concorda que o valor da variável numero
seria sempre maior que 0? A cada repetição o valor de numero aumentaria
em 1, ou seja, nunca seria menor que zero. É preciso ter muito cuidado para
não criar esses tipos de loopings, pois isso gerará um travamento do
navegador e até do sistema operacional do computador.
Existe outra forma de se interromper o looping, que é usando o break
Que já vimos anteriormente.

Adicionamos um if ao código que está sendo repetido. Esse if contém

também uma condição que é, quando numero for igual a 10, executar o
break. O break interrompe a execução do looping. Não faria muito sentido
fazer dessa forma na prática, mas isso é apenas para mostrar uma
possibilidade a mais. Verifique no console e veja que a execução foi até o
número 10, apesar de ter uma condição no for determinando que o looping
fosse executado enquanto numero fosse menor que 20.

pág. 92
Também é possível utilizar loopings para interagir com objetos e arrays. Para
isso, vamos usar o for in. Primeiramente vamos criar um objeto com 3
chaves.

Agora vamos ao laço de repetição:

Usamos o for e entre parênteses colocamos o seguinte:

Nome da chave - no exemplo usamos a palavra key mas poderia ser outro
in – para indicar que estamos interagindo com o objeto a seguir
objeto – colocamos o nome da variável que representa o objeto, nesse caso
é o objeto usuario.
Agora dentro de { } vamos colocar o código que será repetido para cada
chave que existe dentro do objeto. Nesse exemplo, o objeto possui 3 chaves.

pág. 93
Aqui, vamos ter 3 repetições então. Cada uma delas vai exibir no console o
nome das chaves que o nosso objeto possui.

Exatamente. Essas são as chaves do objeto. E se quisermos acessar os

valores das chaves?

Basta colocar o nome do objeto (usuario) seguido de colchetes, passando

dentro desses colchetes o nome que estabelecemos para as chaves (key)

pág. 94
OBS: Esse nome (key) representa todas as chaves do objeto. Como estamos
fazendo um looping, não teria como colocar o nome de cada chave
manualmente, então damos um nome genérico que represente todas as
chaves, de modo que internamente, esse nome acaba sendo diferente a
cada repetição, tornando o nome dinâmico. Por exemplo, na primeira
repetição key = name, na segunda key = age e na terceira key = city. Só para
você entender. Utilizar o nome key é um padrão de escrita e que remete ao
que está acontecendo. Poderia ser outro nome, mas dessa forma faz sentido
para quem está lendo o código. No console temos:

O valor das chaves do objeto.

Outro meio utilizado é o for of.

É bem parecido com for in, porém interagindo com arrays. Vamos criar um
array com 3 itens e usar o for of em seguida.

Temos um array de modelos de carros. A lógica é a mesma. Para cada item

dentro desse array será repetido o bloco de códigos dentro dele. Então
serão exibidas 3 mensagens no console, cada uma com o valor de cada item.
Estamos usando a palavra item da mesma forma que usamos a palavra key,

pág. 95
poderia ser outra, estamos apenas dando um nome que represente todos
os itens do array. Veja no console:

Por último, vamos estudar uma outra estrutura de repetição, chamada

while

While é bem parecido com for, é uma diferença apenas de escrita, mas a
lógica é praticamente a mesma.

Observe que a variável é criada fora da estrutura, diferentemente do que

fazemos com for.
Utilizamos a palavra while e entre parênteses estabelecemos a condição.
Entre as chaves está o bloco de códigos a ser executado a cada repetição.
Lembrando mais uma vez que ali estamos usando apenas um console.log( )
mas poderia ser varias e varias tarefas, funções, etc.
O incremento que faz com que o looping tenha um ponto de interrupção é
colocado logo abaixo do bloco de códigos. Se você verificar no console verá
que o resultado é exatamente o mesmo.

pág. 96
 CONCLUSÃO

Dev, você realmente conseguiu entender tudo o que foi passado nesse
módulo? É claro, que no início você ainda vai precisar pesquisar e recorrer
muito as suas anotações. Mas é muito importante que você tenha
entendido bem os conceitos.
Caso não tenha entendido e não tenha conseguido reproduzir o que foi
passado, volte e revise as aulas novamente, não passe para os próximos
módulos sem ter e entendimento dos tópicos desse terceiro módulo. Este
foi um módulo mais teórico do que prático mas acredite, vamos aplicar
muitos desses tópicos adiante.
Muitos alunos cometem o erro de ir avançando os módulos sem estarem
seguros em relação ao conteúdo. Mais importante do que concluir os
módulos do Profissão Programador, é aprender de fato como as coisas
acontecem, tanto na linguagem JavaScript, como em outras linguagens.
Futuramente você perceberá que saber a lógica é muito melhor do que
decorar a sintaxe dos códigos. Tendo a lógica apurada e sabendo usar as
ferramentas certas para cada situação, você conseguirá criar aplicações
complexas com várias funcionalidades.
Caso você se sinta seguro com o conteúdo passado, já está pronto para
começar a estudar o próximo módulo.

pág. 97