Lógica com Javascript

Origem do JavaScript
O fundador do navegador Netscape, Marc Andressen,
imaginava como os navegadores poderiam evoluir a
ponto de permitir elementos mais dinâmicos, e como
esses elementos poderiam ser desenvolvidos pela
comunidade crescente de desenvolvedores web. Surge
então, a ideia de uma linguagem de scripting que mais
tarde seria conhecida como JavaScript.

Brendan Eich, então empregado pela Netscape

Corporation, ficou responsável pelo desenvolvimento dessa linguagem que seria
lançada em setembro de 1995, junto ao Netscape Navigator 2.0.

Na documentação inicial, o Netscape descreve os principais recursos do JavaScript

para “reconhecer e responder a eventos do usuário, como cliques do mouse, entrada
de formulário e navegação de página”. Isso possibilitou uma ampla gama de casos de
uso, como:

■ solicitar dados de um usuário;

■ alertar os usuários sobre entradas inválidas de formulários;
■ criar de caixas de seleção;
■ adicionar botões de “voltar” para navegar facilmente em sites;
■ preservar o estado entre as páginas da web para rastrear as ações do usuário;
■ reproduzir animações, textos de rolagem ou arquivos de áudio.

No ano seguinte, em novembro de 1996, a Netscape começou a trabalhar com a

ECMA International para tornar o JavaScript um padrão do setor. Desde então, o
JavaScript padronizado é chamado de ECMAScript e especificado sob a ECMA-262.

Hoje em dia temos vários frameworks e bibliotecas que derivam do JavaScript:

React, Vue, Angular, Node, etc.

1
Onde utilizamos o JavaScript?
O JavaScript é uma linguagem de scripting, utilizada em conjunto com outras
linguagens para desenvolvimento de aplicações web. Graças ao JavaScript, o
programador consegue controlar uma ou mais aplicações de terceiros através de
scripts. E o que seria um script?

“Um script é um trecho de código desenvolvido para executar pequenas ações

em uma página web.”

No caso do JavaScript, podemos controlar alguns comportamentos dos navegadores

através de trechos de código que são enviados na página HTML. Além disso, temos o
CSS, que é responsável por definir regras de estilo às páginas e deixá-las mais
“bonitas” para o usuário. Nos módulos mais a frente veremos com calma sobre esse
assunto. Para fixar o que acabamos de explicar, acompanhe o esquema a seguir:

2
Lógica com Javascript

Variáveis
O que são? De onde vem? Como se reproduzem?
Em nossos dias é extremamente comum guardarmos
todos os tipos de coisas: alimentos, roupas, textos,
papéis, etc. Além disso, vale dizer que na maioria das
vezes guardamos em um local específico, como:
caixas, armários e afins.

Você deve estar se perguntando: “Será que entrei no

conteúdo correto? Não era sobre variáveis e programação que íamos falar?” Calma!
Vamos sim. É justamente sobre armazenar coisas que iremos falar agora!

Se em nossa vida é comum guardarmos coisas para nossa organização, no mundo da

programação também iremos guardar coisas. Especificando melhor, iremos guardar
informações para que possamos utilizar durante o desenvolvimento de um software.

Isso pode levantar algumas perguntas como:

■ Quais informações iremos salvar?

■ Onde iremos salvar essas informações?
■ Vamos responder a primeira delas:
■ Quais informações iremos salvar enquanto programamos?

Poderíamos dizer quase tudo. Para exemplificar, é como se estivéssemos criando um

sistema, que pudesse nos ajudar a contar quantos sabores de pizza iremos pedir para
um evento de amigos.

Bom, pense que precisamos saber a quantidade exata de pizza que iremos pedir de
cada sabor e, para isso, iremos fazer uma simples contagem começando do 0. Assim,
conforme fomos recolhendo as informações de sabores que iremos pedir, iremos
armazenar na nossa contagem, a quantidade.

3
Veja que nesse exemplo, precisamos armazenar a contagem de cada sabor de pizza
para fazer o pedido. Porém, esse não é o único tipo de informação que podemos
armazenar, existem muitos outros, como por exemplo:

■ Números;
■ Textos;
■ Peso de algum objeto;
■ A altura de uma pessoa;
■ Um comentário sobre um texto;
■ Notas, etc.

A ideia é que possamos armazenar qualquer tipo de informação para utilizar depois,
seja apenas para consulta ou até mesmo para resolver problemas. E isso nos leva a
outra pergunta:

“Onde iremos salvar essas informações?”

Iremos armazenar em ​variáveis​.

As variáveis são uma espécie de ‘caixinhas’ que podem armazenar essas informações.
O melhor de tudo é que podemos rotular cada caixinha, para organizar melhor as
informações, como se déssemos um nome para cada valor armazenado. Voltando no
exemplo da pizza, seria algo como:

■ Caixa sabor Margherita = contém 3 pedidos

■ Caixa sabor Calabresa = contém 0 pedidos

Assim, quando formos consultar algo, fica muito mais fácil de saber o que cada
informação representa.

Com isso em mente, podemos dizer que as variáveis são divididas em 3 partes:

■ A informação que será armazenada;

■ O tipo da informação;
■ Nome da Variável.

Iremos aprender sobre cada uma dessas partes nesse módulo.

4
Lógica com Javascript

Tipos de dados de uma variável

Sim, variável possui características! Vamos ver?

Já entendemos que as variáveis são os recursos que usamos para armazenar
informações durante o desenvolvimento do software, e como podemos manipulá-las.
Agora, vamos explorar sobre os tipos de dados que podemos utilizá-lo dentro dessas
variáveis.

Um computador trabalha utilizando a manipulação de dados contidas em sua memória,

e as variáveis trabalham da mesma forma, pois guardam os dados que desejamos.
Mas, que dados são esses e quais dados podemos usar?

Inicialmente, vamos trabalhar com apenas alguns tipos, pois como você vai descobrir a
longo prazo, existem muitos. São eles:

String
São sequências de caracteres que devem ser mostradas entre aspas simples ou
duplas. Podemos dizer que as strings são textos que desejamos imprimir no código, por
isso usamos aspas para que a cadeia de caracteres que desejamos seja impressa.

Lembre-se que podemos usar aspas simples ou duplas dentro do código, pois não
existe diferença no uso. Exemplo:

5
Number
São os dados numéricos positivos ou negativos inteiros. Quando usamos o number,
não precisamos utilizar aspas pois o nosso código aceita o número da forma como
declaramos. Exemplo:

Float
São dados numéricos positivos ou negativos decimais. Ao contrário das regras
matemáticas que aprendemos na escola, aqui utilizamos o ponto em números
decimais. Exemplo:

Boolean
Tipo de dado que só tem dois valores possíveis: true ou false. Usamos os booleanos
em situações de afirmação, ou seja, quando precisamos dizer se uma coisa é
verdadeira ou falsa. Exemplo:

Array
São listas ou conjuntos capazes de guardar diversos dados ao mesmo tempo em uma
única variável. Exemplo:

6
Lógica com Javascript

Usando variáveis
Agora que vimos a teoria, como podemos usá-las?
Como vimos anteriormente, variáveis são muito importantes na programação, sempre
que quisermos guardar alguma informação, é a elas que iremos recorrer. Lembrando
que:

“para declarar uma variável, utilizamos o comando var​, seguido do nome da

variável e logo em seguida atribuímos um valor inicial.”

Mas, como podemos recuperar essa informação?

Se a variável já foi declarada, basta recuperar o valor da variável através do nome.

Podemos fazer um teste imprimindo a variável com o comando console.log().

O console.log() pode ser utilizado para exibir mensagens dentro do console do

navegador, ou seja, o usuário comum não conseguirá visualizar essa mensagem a não
ser que ele acesse as ferramentas do desenvolvedor.

Por isso mesmo, este método é útil para desenvolvedores testarem as saídas das
linhas de código, verificando se tudo está acontecendo como o esperado.

Além de recuperar, também podemos alterar o valor de uma variável. E para realizar
essa alteração, escreva o nome da variável seguido do sinal igual (=)​, conforme
exemplo abaixo:

7
Perceba que o comando var não precisa ser utilizado para atribuir o novo valor a
variável, somente na declaração.

Vamos verificar se o novo valor foi realmente atribuído a variável, utilizando o comando
console.log novamente.

Concatenação
Imagine que temos duas informações em variáveis diferentes e queremos uni-las em
uma string. Para isso, podemos utilizar o comando de concatenação, que em
Javascript, é representado pelo mesmo sinal de adição ​(+)​.

Vejamos um cenário no qual temos a variável logradouro​, e outra com o nome bairro​.
Posso concatenar esses dois valores, e imprimir utilizando console.log:

Desta forma, o endereço está completo mas, temos um pequeno problema. O número
90 está junto à palavra “Vila”. Para que tenha uma separação, precisamos colocar isso
explicitamente no código:

8
Além de imprimir, podemos atribuir essa string à uma nova variável:

9
Lógica com Javascript

Operadores Aritméticos
Vamos relembrar alguns
conceitos da escola?
Vimos que com o uso da palavra var você pode criar variáveis para guardar valores
dentro do código, e podemos reutilizar esses valores a qualquer momento chamando a
variável pelo seu nome​. Isso vale também para caso queiramos alterar seus valores!

Mas, podemos fazer muito mais com eles, e é isso que queremos lhe mostrar. Em
programação, podemos fazer diversos tipos de cálculos com os valores das variáveis,
usando os famosos sinais matemáticos que conhecemos!

Você deve estar pensando: “Nossa, mas eu não lembro nada de matemática!”

Fique tranquilo, está tudo bem, vamos rever alguns pontos e aprender novas coisas
juntos.

Os operadores aritméticos ou sinais, como temos o costume de falar, são meios pelos
quais podemos somar, subtrair, incrementar e decrementar os dados dentro do nosso
código. Neste momento, iremos explorar alguns desses sinais e entender melhor
sobre o seu funcionamento dentro do nosso código.

Os operadores aritméticos padrões que iremos utilizar são:

soma ( + ) subtração ( - ) divisão ( / ) multiplicação ( * )

Além desses, também iremos ver:

■ operadores de módulo(%)
■ incremento(++)
■ decremento(--)

A seguir, uma tabela com alguns exemplos de utilização desses operadores:

10
 Operador Significado Descrição Exemplo

Operador de adição, tem como objetivo a soma 10 + 2

+ Soma
ou união de dois valores para criar um novo valor. //retorna 12

Operador de subtração, tem como objetivo 6-3

- Subtração
calcular a diferença entre dois números. //retorna 3

3*6
* Multiplicação Operação de multiplicação entre dois números.
// retorna 18

Operação que consiste em descobrir quantas 25 / 5

/ Divisão
vezes um número está contido em outro. // retorna 5

Diferente da divisão, ele devolve o resto de uma 10 % 2

% Módulo
divisão inteira. //retorna 0

valor = 2
++ Incremento O operador incrementa, um ao seu número.
valor++ //retorna 3

valor = 4
-- Decremento O operador, subtrai um do seu número atual.
valor-- //retorna 3

Agora que já vimos a teoria sobre os nossos operadores, vamos ver na prática como
isso funciona com alguns exemplos.

Soma
var a = 10
var b = 10
console.log(a + b) // imprime 20

Subtração
var a = 10
var b = 5
console.log(a - b) // imprime 5

Divisão
var a = 10
var b = 2
console.log (a/b) // imprime 5

Multiplicação
var a = 10
var b = 2
console.log (a*b) // imprime 20

11
Módulo
var a = 10
var b = 2
console.log(a % b) // imprime 0 (o resto da divisão de 10 por 2 )

Incremento
var a = 10
var b = a++ // igual a 10 + 1
console.log(b) // imprime 11

Decremento
var a = 10
var b = a-- // igual a 10 - 1
console.log(b) // imprime 9

12
Lógica com Javascript

Operadores Relacionais

Que nome difícil! Mas, você verá que é fácil de

entender!
Como vimos, a condicional if é uma estrutura que executa um código caso a condição
seja verdadeira, dependendo sempre da condição requerida. Já estamos familiarizados
com o sinal de atribuição( = ), que usamos regularmente na declaração de nossas
variáveis, agora vamos entender mais sobre os operadores relacionais.

Os operadores relacionais são utilizados para comparar diversos tipos de dados, em

que os valores comparados podem ser inseridos diretamente ou através de variáveis.

Geralmente retornam um valor booleano, neste caso: true(verdadeiro) ou false(falso):

Operador Significado

> Maior

< Menor

= Operador de atribuição

== Comparação de valor

=== Comparação de valor e tipo de dado

>= Maior ou igual

<= Menor ou igual

Mas, como esses operadores funcionam na prática? Um dos pontos que aprendemos é
que o seu retorno será true ou false, mas isso não significa que o resultado de nossas

13
comparações precisam ser necessariamente um deles. Vamos ver os exemplos para
compreender melhor:

var A = 20

var B = 10

A > B // o resultado da comparação é true (verdadeiro)

A < B // o resultado da comparação é false (falso)

A >= B // o resultado da comparação é true (verdadeiro)

A <= B // o resultado da comparação é false (falso)

Sinal de atribuição (=)

Utilizamos este sinal para indicar a atribuição de um valor para uma variável. Em outras
palavras, o valor à direita do sinal será armazenado na variável à esquerda do sinal. No
exemplo a seguir, estamos apenas atribuindo o valor da variável y para a variável x:

x = y

Sinal de igualdade de valor (==)

Caso desejemos realizar a comparação entre dois valores, verificando se ambos são
iguais, precisamos utilizar o operador ( == ). Ao utilizarmos esse operador, a linguagem
irá verificar se os valores que estão à esquerda e à direita do operador são iguais, sem
considerar o tipo de dado. Por exemplo:

x = “1” // atribuindo a string para a variável x

y = 1 // atribuindo o number para a variável y
x == y // “1” == 1 o retorno é true (verdadeiro)

14
Sinal de igualdade de valor e tipo de dado (===)
Semelhante ao último exemplo que nós acabamos de ver, este operador verifica a
semelhança entre dois valores, levando em consideração se os tipos também são
iguais.

Observe no exemplo a seguir, o resultado das operações relacionais utilizando este

operador:

x = “1” // atribuindo a string para a variável x

y = 1 // atribuindo o number para a variável y

x === y
// o retorno é false (falso) pois as duas variáveis não possuem
valores e tipos iguais.

15
Lógica com Javascript

Operadores Lógicos
Conhecemos alguns operadores, como os aritméticos: +, *, /, - (Soma, Multiplicação,
Divisão e Subtração) que vão nos permitir fazer operações matemáticas simples. E,
conhecemos nesse módulo os operadores relacionais, por exemplo: ==, !=, >=, >
(Igualdade simples, Diferente, Maior ou igual, Maior) que nos permitiu criar condições
em conjunto com o IF.

Porém, temos mais operadores para conhecer. Prometemos que esses serão os
últimos! Iremos falar sobre operadores lógicos, e como eles podem ajudar em nossas
condições.

Operador E - &&
Esse operador nos permite validar DUAS ou mais condições. Aqui vamos precisar
relembrar o uso da tabela verdade, visto no material do módulo anterior! O resultado
será “verdadeiro” se ambas as condições forem “verdadeiras”. Veja o exemplo:

16
Nesse exemplo, ele só irá imprimir “Hoje é dia de festa” caso o dia seja domingo E se
o tempo estiver bom. No caso de qualquer uma dessas alternativas ser “falsa”, a ação a
ser executada será a que está no bloco do else.

Operador OU - ||
O operador OU nos ajuda quando podemos ter mais opções, e sendo qualquer uma
delas verdadeira, já é o suficiente para executar uma ação. E novamente, relembrando
o uso da tabela verdade, temos que para o resultado ser “verdadeiro” basta que
uma das condições seja “verdadeira”.

Vamos supor que você esteja querendo comprar um iPhone, que pode ser da cor prata
ou preto. Se você encontrar uma das cores que você gostaria, a compra será efetuada.
Mas, se você encontrar outras cores, diferentes da que você gostaria, a compra não
será efetuada.

Veja isso no código:

Nesse caso, se a cor atende qualquer uma das condições, irá exibir “Vou fechar a
compra”. Já se a cor for diferente de preto ou prata, será exibido “Não quero mais esse
iPhone”.

Um ponto a se destacar é que, mesmo que as comparações sejam feitas na mesma

variável, é necessário repetir o nome dela. Isso acontece porque cada condição é
totalmente independente, e isso vale para todas as operações independente do
operador!

17
Operador NÃO - !
Conhecido como operador de negação, é utilizado para inverter o valor da nossa
condição. Ele é representado pelo símbolo ! (Exclamação) e quando usado em uma
variável, ele sempre vai antes do nome da mesma!

Como resultado do código acima, veremos no terminal a seguinte informação:

“tenho que trabalhar”

Mas, e se trocássemos o valor inicial da variável feriado para “true”? Qual seria a saída?

18
Nesse caso, a variável feriado inicia com valor “true” e não entra na condição do IF
devido a presença do operador de negação (!). Com isso, o fluxo do programa vai direto
para o ELSE e executa a frase: “Oba posso ficar em casa!”

Note que ele só irá executar a ação do IF caso o valor da variável feriado for falso​, caso
contrário, ele irá executar a ação do else. Além disso, observe que usamos o operador
de negação (!) antes do nome da variável.

19
Lógica com Javascript

Precedência de Operadores
Já falamos sobre precedência de operadores no módulo anterior, mas vale a pena
reforçar essas regras para que você relembre qual a importância de cada operador e a
ordem correta para resolver problemas que envolvam vários operadores.

A precedência de operadores determina a ordem em que os operadores são

processados. Operadores com maior precedência são processados primeiro. Vejamos
um exemplo simples:

O operador de multiplicação ("*") tem maior precedência que o operador de adição ("+")
e por isso será executado primeiro. Podemos dar prioridade na precedência quando
usamos operações entre parênteses. Por exemplo:

Lembre-se
1. Parênteses 3. Operadores Relacionais

Se houver, resolver do mais interno Todos os operadores de comparação

para o mais externo têm precedência igual, ou seja, eles
são avaliados na ordem da esquerda
2. Operadores Aritméticos para a direita na qual aparecem.
Multiplicação ou divisão 4. Operadores Lógicos
Soma ou subtração Operador de Negação ( ! )
Operador de Conjunção ( && )
Operador de Disjunção ( || )

20
Exercícios
Agora que você entendeu os conceitos vamos
praticar ?
1. Crie 3 variáveis, uma contendo seu nome, outra contendo seu sobrenome e a última
contendo sua profissão. Junte as 3 informações um uma quarta variável chamada
cartão de visita e depois imprima o resultado usando o console.log

OBS: Não se esqueça dos espaços entre as palavras na hora da exibição!

2. Crie 2 variáveis com valores numéricos e depois, realize as quatro operações

aritméticas com essas variáveis (+ , - , * , /) . Armazene o resultado de cada operação
aritmética em uma nova variável. Exemplo:

var soma = variavel1 + variavel2

3. Crie 3 variáveis contendo notas de um aluno em cada matéria por ex:

var matematica = 9;
var historia = 8;
var portugues = 7

Em seguida crie uma variável chamada média que calcule a média das notas que o
aluno tirou.

OBS: Só pra recordar, a média é a soma de todas as notas dividida pelo número de
matérias. Lembre-se também da precedência dos operadores.

4. Crie 2 variáveis numéricas, atribua valores a elas e em seguida, compare os valores

utilizando os operadores relacionais, exibindo o resultado através do console.log

21