Você está na página 1de 32

- Introdução à JavaScript e Lógica de Programação

O que vamos aprender?


Aqui você vai aprender sobre a linguagem de programação JavaScript .
🚀🚀🚀
Para isso, dividimos o conteúdo em cinco partes:

1. Primeiro você aprenderá sobre variáveis , constantes , tipos


primitivos , tipagem dinâmica , operadores aritméticos , operadores
de atribuição , operadores lógicos , if/else e switch/case :
○ JavaScript - Primeiros passos
2. Essa parte apresenta arrays e for :
○ JavaScript - Array e loop For
3. Na terceira parte você aprenderá sobre lógica de programação e
algoritmos :
○ JavaScript - Lógica de Programação e Algoritmos
4. A quarta parte aborda objetos , for/in e funções :
○ JavaScript - Objetos e funções
5. Agora vamos ao projeto Playground Functions (Lições Aprendidas) :
○ Playground functions

dica em javascript quer determinar uma variavel é = e comparar valores


é ==, e comparar valor e tipo de variável é ===.

if/else é o se e o se não

quando quiser usar diferentes ações podemos usar o switch/case


array- poderão ser criados com [ ] e colocando os valores dentro.

for- para fazer laços de repetição do código economizando trabalho braçal


e fazendo efeitos

—--------------------------------------------------------------------------------
-----------------------------

O que vamos aprender?

Neste dia você vai oficialmente começar a aprender com tudo uma
linguagem de programação - um passo importantíssimo na sua ma-ra-vi-
lho-sa jornada pelo mundo da programação! 🎉

Até agora, você vem aprendendo como navegar no seu ambiente de


desenvolvimento, como organizar seu trabalho e como criar estrutura e
estilos para páginas da Web com o HTML e o CSS . A partir de agora,
você vai aprender a implementar lógica nas suas páginas, tornando-as
verdadeiramente interativas e dinâmicas !

Hoje, vamos aprender:

● O que é o JavaScript (JS)?


● De onde surgiu?
● Qual o seu uso?
● Variáveis.
● Constantes.
● Tipos primitivos.
● Tipagem dinâmica.
● Operadores aritméticos.
● Operadores de atribuição.
● Operadores lógicos.
● Estruturas condicionais como if/else e switch/case.

Você será capaz de:

● Escrever códigos em JavaScript que usam variáveis, constantes e


tipos primitivos;
● Utilizar conceitos da linguagem como a tipagem dinâmica e
operadores lógicos/aritméticos/de atribuição no seu código;
● Criar códigos que usam estruturas condicionais, como o if/else .

Por que isso é importante?

Existem inúmeros motivos que atestam pela importância imensa desse


passo, mas vamos falar sobre três:

JavaScript é popular . O JavaScript vem sendo, nos últimos 8 anos, a


linguagem de programação mais popular do mundo, segundo a última
pesquisa do Stack Overflow .

Ele é responsável pela grande maioria das interações em tempo real na


web que é possível nos dias de hoje. Sabe quando você está em uma
página com um chat, e as mensagens chegam "sozinhas"? Isso é
JavaScript . Ou quando você acessa um perfil diferente no Facebook, mas
seu navegador não carrega a página do zero, somente carregando o que
de fato mudou? Também é JavaScript (com o React 🙂).

JavaScript é versátil . O uso do JavaScript na Web é bem óbvio - é onde


ele surgiu. No entanto, o JavaScript possui bibliotecas , frameworks e
ambientes runtime que permitem que você use JavaScript também para
muitas outras coisas, como:

● Código que roda no servidor (back-end), com o Node, por exemplo;


● Acesso e manipulação de bancos de dados através de diversos
drivers ;
● Aplicativos mobile nativos, com o React Native, por exemplo;
● Aplicativos desktop, com o Electron, por exemplo;

Todos esses usos já foram e são feitos por empresas de todos os portes.
Aprender JavaScript é a porta para um mundo infinito de
possibilidades. 🚀

JavaScript é a base para o curso da Trybe . Por último, mas não menos
importante, o JavaScript é o fundamento principal para a maior parte do
curso da Trybe, tanto agora, no módulo de Fundamentos, quanto no
módulo de Front-End e no de Back-End. É de vital importância ter uma
boa base de JavaScript para entender React , Redux , Jest , Node e todas
essas outras ferramentas que você vai adicionar à sua caixa.

Por fim, saiba que é muito importante aprender JavaScript e ter foco .
Mas não se preocupe, esse é só o primeiro passo no mundo da
programação.

Tenha em mente que JavaScript é uma linguagem de programação e,


como tal, é apenas uma ferramenta . O verdadeiro trabalho e o
verdadeiro objetivo é resolver problemas . O mais importante é que você
aprenda a programar e a aprender - JavaScript é só a ferramenta
principal que vai te ajudar a alcançar esse objetivo.

JavaScript - Primeiros passos

Conteúdos

Agora é hora de você aprender os fundamentos de JavaScript com um


apanhado de conteúdos que vão te dar a base necessária para criar seus
primeiros programas. 😁

Mas, antes de darmos início ao conteúdo, vamos instalar um pacote que


será muito útil durante toda a nossa caminhada no JavaScript , o Node.js
.(instalar)

Como o JS nasceu como uma linguagem de navegador, não podíamos


executá-lo fora do navegador, mas o Node.js foi criado para resolver esse
problema. É por causa dele que não dependeremos do navegador para
executar códigos JS.

Para instalá-lo, primeiramente precisaremos do nvm (node version


manager), que é um gerenciador de versões do node. Identifique o
sistema operacional que você está usando e siga o passo a passo
disponível nas sessões a seguir.
Instalação do Node para Linux

Para a instalação do nvm no linux utilizaremos o comando curl . Caso


ainda não tenha instalado esse comando em seu computador, será
necessário instalá-lo. Para fazer isso execute os seguintes comandos:

Atualize seu sistema:

sudo apt update && sudo apt upgrade

Instale o curl :

sudo apt install curl

Caso queira verificar a sua versão do curl execute esse comando:

curl --version

Pronto, agora com o curl preparado, é hora de instalar o nvm . Rode o


seguinte comando em seu terminal:

curl -o-
https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.s
h | bash

Nota: Caso tenha alterado o terminal padrão que vem em seu linux de
bash para o zsh (ou algum outro), troque bash por zsh na linha de código
(ou a abreviação de seu shell script).
Não podemos utilizar o nvm ainda, pois para isso é preciso reiniciar ou
abrir outra janela em seu terminal. Mas podemos checar a versão
instalada com o seguinte comando:

nvm -v

Agora vamos escolher uma versão para instalar em nosso computador. O


comando a seguir instala a versão mais recente do nvm .

nvm install --lts

Uma coisa legal do nvm é que podemos ter diversas versões instaladas, e
para instalar outra versão basta digitar o comando anterior e alterar o
campo --lts para o número da versão desejada. Na maior parte dos
projetos da Trybe utilizamos a versão 14 do node.

Esse procedimento já instala também o npm . Para checar a versão


instalada, basta executar o seguinte comando:

npm -v

Você pode entender mais sobre o npm acessando Podemos saber mais
sobre ele acessando sua documentação

Caso queira transitar entre as versões instaladas basta digitar em seu


terminal nvm use <versão desejada> , por exemplo:

nvm use 14

ou

nvm use --lts

Tudo pronto, agora vamos para nosso conteúdo de JavaScript?


Para saber mais sobre o nvm, acesse sua documentação aqui .

Instalação do Node para Mac

Para a instalação do nvm no mac utilizaremos o comando curl .


Caso ainda não tenha instalado esse comando em seu
computador, será necessário instalá-lo. Para fazer isso execute os
seguintes comandos:

ruby -e "$(curl -fsSL


https://raw.githubusercontent.com/Homebrew/install/master/inst
all)" < /dev/null 2> /dev/null

E depois:

brew install curl

Com o curl já instalado, faremos a instalação do nvm , em seu terminal


cole o seguinte código:

curl -o-
https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.s
h | bash

Espere que tudo seja concluído e vá para o diretório home. Caso não
saiba como fazer isso, execute o seguinte comando:

cd ~

Precisaremos editar o arquivo bash_profile. Para isso, digite em seu


terminal:

nano .bash_profile
Esse comando abrirá o arquivo dentro do terminal e o próximo passo é
colar o conteúdo a seguir nele:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "$


{HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads


nvm

Ao reiniciar o terminal, o nvm deve estar pronto.

Agora vamos escolher uma versão para instalar em nosso computador. O


comando a seguir instala a versão mais recente do nvm .

nvm install --lts

Uma coisa legal do nvm é que podemos ter diversas versões instaladas, e
para instalar outra versão basta digitar o comando anterior e alterar o
campo --lts para o número da versão desejada. Na maior parte dos
projetos da Trybe utilizamos a versão 14 do node.

Esse procedimento já instala também o npm . Para checar a versão


instalada, basta executar o seguinte comando:

npm -v

Você pode entender mais sobre o npm acessando Podemos saber mais
sobre ele acessando sua documentação

Caso queira transitar entre as versões instaladas basta digitar em seu


terminal nvm use <versão desejada> , por exemplo:

nvm use 14

ou

nvm use --lts


Tudo pronto, agora vamos para nosso conteúdo de JavaScript?

Para saber mais sobre o nvm, acesse sua documentação aqui

HISTORIA DO JAVASCRIPT
tim beners-lee 1989- criação da internet
cria o url- localizador de recursos uniformes.

a utilização era para fins acadêmicos. e desenvolvida na


CERN
1991- primeiros navegador a se popularizar mosaic.
1993-navegador netscape
1995- brendan eich- criou uma linguagem parecida com java
que se chamaria primeiramente de mocha, depois nomeada
de livescript e para depois virar o javaScript.
1995- internet explorer da microsoft e a linguagem Jscript.
1996- guerra de javaScrpt e jScript.
1996- apoio da ECMA para o java.
1997- primeira versão da ECMA-262 guia para navegadores
padronizarem o java script.
então temos o ecma script- a padronização do java.
javaScript- a linguagem.
vamos instalar o Code Runner como extensão do VScode.
abra o VScode e instale a extensão.

serve para rodar o JS(javaScript)

COMO CRIAR UM VINCULO ENTRE O HTML E O JAVASCRIPT


escreva essa tag no html. pode ser no head ou no body, escolha o local
dependendo do momento que queira que ocorra, seu código javascript. O
html é lido em sequência de cima para baixo, com isso em mente escolha
o momentos que quer.
Variáveis

Agora vamos aprender como funcionam e o que são variáveis e


constantes.

site sobre:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/
Guide/Grammar_and_types
sintaxe da nomeação de variável
variáveis podem ser criadas com let, var ou const.. A
variável const é uma variável que não pode ter seu valor
reatribuido. (sim, em programação variável é o nome dado a algo que
pode receber valores, então constante é uma variável em programação
sendo que seu valor não pode ser mudado).

No curso iremos usar let por boa prática que cria uma
variável local
OBS: var declara uma variável global. Essa declaração gera um aviso de
advertência no JavaScript. Você não deve usar essa variante. variável global
significa que a memoria dela será guardada durante todo o código e não somente
do escopo que será utilizada, ajudando a dar problemas se outras pessoas durante
o codigo criarem um mesmo nome para essa variável ou gastará memoria para algo
que usa pouco ou não está usando.

usamos o let para nomear(criar) uma variável, escrevemos o


nome que queremos que ela tenha e atribuímos um valor a
ela com o sinal de =.

no exemplo da foto acima temos uma variável chamada age


que demos o valor de 20.
os tipos dos valores dados as variáveis podem ser:
numbers(números)- só precisa escrever o número. poderá
ocorrer operações matemáticas com eles.
strings(palavras)- coloque aspas “ “ , string é uma
sequencia de caracteres que podem ser letras, números,
caracteres especial, etc.
ex:
boolean(boleanos)- valores de true(verdadeiro) ou
false(falso) que usa a tabela verdade.
undefined(indefinidos)- não tem valores e esses valores
não podem ser puxados.
null(nulos)- é como um conjunto vazio, existe mas não tem
nenhum valor.

console.log() é o comando para imprimir no console o que


tiver entre os ( ) no caso do exemplo escolhemos a variavel
age.

OBS: NOMES DE VARIAVEIS


uma variavel:
não pode começar com um numero ex:12nome
não pode tem espaço no seu nome ex: nome 12
pode ter caracter especial como underline ou cifrão ($);
ex: nome_12
boa prática, usar camelCase, primeira palavra com
letra minuscula e segunda palavra com letra maiuscula.
ex:nomeDoze
OBS: o javaScript é case sensitivity então ele diferencia
palavras com alguma letra minúscula de uma com
alguma letra maiúscula, então tenha cuidado de
colocar maiúsculas e minúsculas de forma certa. ex:
aLuno será considerado diferente de aluno.

depois da variável criada com let , vocẽ poderá reatribuir um


valor para ela seu valor pode ser mudado colocando um = e
dando o novo valor como na imagem acima.

lembrando que a variável const não pode ter seu valor


atribuído.

se você tentar atribuir um valor a uma const vai dar um erro.

Tipos Primitivos, Tipagem Dinâmica e Operações


Aritméticas

Agora que você já sabe o que são variáveis e constantes, vamos entender
quais são os tipos primitivos , como o JS escolhe o tipo de uma variável
através da tipagem dinâmica e como realizar operações aritméticas .
O javascript tem tipagem dinâmica. você não precisa dizer
qual é a variável no JS que ele tenta encaixar em um dos
tipos.
caso queira saber qual o tipo que o JS esta considerando
para uma variavel use o typeof nome da variavel que ele vai
retornar o que é.

as operações aritméticas do JS com tipos numericos


** = exponenciação
* = multiplicação
/ = divisão
% = resto de uma divisão
+ = soma
- = subtração

podemos dar o acréscimo de 1(++) chamado de incremento,


ou o decréscimo de 1(--). por boas praticas é melhor += 1
ex:salary += 1

poderá ainda usar o += fazer um variável += número que significa index


= index + x
caso queira fazer uma expressão matemática o javascript usa
parenteses e aceita parênteses dentro de parênteses para escrever
expressões numéricas.

Agora é a hora da mão na massa no código! No exemplo abaixo, temos as


informações de um paciente. Utilize o operador typeof para imprimir qual
o tipo das variáveis patientId , isEnrolled , patientInfo e patientEmail .
Esse operador retorna qual o tipo de uma variável, objeto, função ou
expressão. Exemplo: console.log(typeof patientId) retornará number .

let patientId = 50;


let isEnrolled = true;
const patientInfo = {
firstName: 'Ana',
lastName: 'Santos',
};
const patientEmail = 'ana@email.com';

O que aconteceria se tentássemos checar qual o tipo da variável


patientAge ? Experimente executar o comando console.log(typeof
patientAge) e veja o que acontece! Ué...mas não declaramos essa
variável, não é mesmo? É exatamente por esse motivo que o seu tipo é
undefined , como você pôde observar no retorno do console.log(typeof
patientAge) . Experimente também trocar o valor de patientId = 50 para
patientId = '50' . Execute novamente um console.log() para imprimir o
tipo dessa variável após a modificação. Você verá que o retorno agora é
uma string pois colocamos o número 50 dentro das aspas. O JavaScript
interpreta como string tudo o que estiver entre aspas.
Agora que você já conhece os operadores aritméticos básicos do
JavaScript, vamos praticá-los? Você pode consultar a lista de operadores
na tabela JavaScript Arithmetic Operators disponível nesse link se tiver
dúvidas. Vamos fazer algumas operações simples para encontrarmos a
área e o perímetro de um retângulo de base 5 e altura 8.

1. Crie uma costante chamada base e uma variável chamada height e


atribua os seus respectivos valores: 5 e 8.
2. Crie uma constante chamada area e atribua a ela o resultado da
multiplicação da base pela altura. Dica: lembre-se de usar sempre o
console.log() para imprimir as variáveis e checar os resultados das
operações!
3. Crie uma constante chamada perimeter e atribua a ela a soma de
todos os lados do retângulo.

Condições If e Else

A condição if(se) é utilizada comparando 2 termos com ==, ===, ou !


= ,< ,>, <= ou >=. poderá ainda botar mais uma condição com o
operador lógico.
● ! Operador lógico NÃO (Logical NOT)
● || Operador lógico OU (Logical OR)
● && Operador lógico E (Logical AND)
no IF as situações de retorno só acontece uma, ou no caso
verdadeiro ou no falso.

Criar estruturas condicionais com operadores if/else e operadores lógicos


será algo muito comum na sua carreira de pessoa desenvolvedora. Então
vamos praticar o que aprendemos no vídeo?

1. Crie uma constante que receba a nota de uma pessoa candidata em


um desafio técnico, e atribua a ela um valor entre 1 e 100;
2. Implemente uma lógica que verifique se a pessoa candidata foi
aprovada, reprovada ou se ela está na lista de espera. Para isso,
considere as seguintes informações:
● Se a nota for maior ou igual a 80, imprima "Parabéns, você foi
aprovada(o)!"
● Se a nota for menor que 80 e maior ou igual a 60, imprima "Você
está na nossa lista de espera"
● Se a nota for menor que 60, imprima "Você foi reprovada(o)"
3. Crie uma estrutura condicional utilizando o if , else if e else para
criar o seu algoritmo, e os operadores lógicos que se aplicam a cada
situação.
4. Altere o valor da nota para verificar se as condições que você
implementou funcionam;

Operadores lógicos
Neste ponto, você deve entender que valores booleanos podem ser "true"
ou "false". Eles serão de extrema importância para a construção de
lógicas no momento em que estivermos desenvolvendo nossas aplicações.
A próxima ferramenta de trabalho que iremos aprender serão os
operadores lógicos. Eles não são utilizados só na programação, mas no
estudo da lógica em si e no seu dia a dia (e com bastante frequência). A
principal funcionalidade desses operadores é determinar a lógica entre
dois valores ou variáveis.
Na linguagem JavaScript, temos três principais operadores lógicos: && , ||
e o ! . Podemos nos referir a eles como "AND", "OR" e "NOT",
respectivamente.
Essas ferramentas não vão te acompanhar apenas no JavaScript, mas em
toda sua carreira. Por isso, é muito importante praticar bastante e ficar
bem familiarizado com o conceito de cada um deles.
obs:disjunção inclusiva é a disjunção normal
Os operadores bit a bit eles pegam o valor de verdadeiro ou falso, e o
descrevem como sendo 1 ou 0 respectivamente.

^ = disjunção exclusiva conhecido na lógica como OU…OU…


site sobre operadores:
https://wiki.portugal-a-programar.pt/dev_web:javascript:operadores

o operador bit ainda pode ser usado dentro de IF, e dentro dos booleanos
deve funcionará normalmente.

OBS:
comparando numero com string- comparando tipos diferentes

comparando diferentes tipos de valores podem dar resultados inesperados.

When comparing a string with a number, JavaScript will convert the string to
a number when doing the comparison. An empty string converts to 0. A non-
numeric string converts to NaN which is always false.

-quando comparando uma string com um numero, o javascript irá tentar


converter o string para um número.

-quando fazendo essa comparação. uma string vazia sem nenhum caracter
será convertida para 0, uma string não numerica

Operador AND
Esse operador é binário. O que significa que ele precisa de dois elementos
para funcionar corretamente.
Para abstrair seu funcionamento, pense o seguinte: Você está numa
padaria e quer comer alguma coisa no café da manhã. Então você diz "Por
favor, me vê um cafézinho E um pão na chapa".
Seria muito infeliz se você recebesse apenas o café ou só o pão, não é?
Também não seria legal se recebêssemos um pão na chapa, mas a nossa
bebida ser um caldo de cana. Porque nossa expectativa era de que as
duas condições fossem atendidas corretamente. Esse é exatamente o
papel do && . Ele só vai retornar true se as duas operações que estão em
volta dele forem consideradas verdadeiras.
Em JavaScript, nosso pedido poderia ser interpretado da seguinte
maneira:
Copiar
const comida = 'pão na chapa';
const bebida = 'cafézinho';

if (bebida === 'cafézinho' && comida === 'pão na chapa') {


console.log('Muito obrigado pela refeição :)');
} else {
console.log('Acho que houve um engano com meu pedido');
}

Tente brincar e mude os valores das variáveis, você verá que a condição
não vai ser atendida e portanto, a mensagem imprimida será outra.
Precisamos manter em mente que só teremos true se as duas expressões
em volta dele forem true também.
Copiar
const conditionOne = true;
const conditionTwo = false;

console.log(conditionOne && conditionTwo);

Execute o código acima e veja que a verificação é false porque uma das
condições não é true.
Mas... E o que acontece se existir um encadeamento de &&? 🤔
Imagine que exista a seguinte expressão:
Copiar
const cenouras = true;
const leite = true;
const arroz = true;
const feijao = true;

const listaDeCompras = cenouras && leite && arroz && feijao;

Você consegue imaginar qual será o resultado final? Será que vai dar
erro?
A ordem que a operação vai obedecer, será da esquerda para a direita,
seguindo algo parecido com a imagem abaixo.
Encadeamento de operadores AND
Abaixo tem um mini cheat sheet para você ver em quais possibilidades
teremos resposta true ou false .
Copiar
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

1. Crie uma constante chamada "currentHour" que recebe um número


entre 4 e 24 de sua escolha, para representar as horas do dia.
2. Crie uma variável chamada "message" que, inicialmente, é uma
string vazia.
3. Implemente condicionais para que:
● Se o horário for maior ou igual a 22, insira "Não deveríamos comer
nada, é hora de dormir" na variável "message".
● Se o horário for maior ou igual a 18 e menor que 22, insira "Rango
da noite, vamos jantar :D" na variável "message".
● Se o horário for maior ou igual a 14 e menor que 18, insira "Vamos
fazer um bolo pro café da tarde?" na variável "message".
● Se o horário estiver entre 11 e 14, insira "Hora do almoço!!!" na
variável "message".
● Se o horário estiver entre 4 e 11, insira "Hmmm, cheiro de café
recém passado" na variável "message".
4. Agora imprima a variável message fora das suas condições.

Operador OR
Você já viu um operador em que as duas condições devem ser
verdadeiras para que o resultado final seja verdadeiro.
Com o operador OR (ou || , no JavaScript), precisamos apenas que uma
das condições sejam verdadeiras: isso ou aquilo .
Por exemplo, imagine novamente que estamos na padaria, mas nosso
pedido agora vai ser diferente. Dessa vez, se não tiver um café, pode ser
um suco de laranja. Como escreveríamos isso em JavaScript?
Copiar
const bebidaPrincipal = 'cafezinho';
const bebidaAlternativa = 'suco de laranja';

if (bebidaPrincipal === 'cafezinho' || bebidaAlternativa ===


'suco de laranja') {
console.log("Obrigado por me atender :D")
} else {
console.log("Ei, eu não pedi isso!");
}

O símbolo "||" é a representação em caracter desse operador.


Novamente, precisamos de dois elementos em torno dele para que
funcione corretamente. E para que seu retorno seja verdadeiro, um de
seus valores deve ser true ou ser considerado truthy.
Abaixo temos uma tabela mostrando como é o resultado de cada
operação, assim como no operador "AND":
Copiar
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

1. Crie uma variável chamada "weekDay" que recebe a string "quarta-


feira".
2. Implemente condicionais para que:
● Se nossa variável "weekDay" for "segunda-feira", "terça-feira",
"quarta-feira", "quinta-feira" ou "sexta-feira", imprima "Oba, mais
um dia de aprendizado na Trybe >:D".
● Se for algum dia de fim de semana, imprima "FINALMENTE,
descanso merecido UwU".

Experimente trocar o valor da string ou até mesmo montar seu próprio


algoritmo. Esse assunto é muito importante para seu aprendizado :).

Operador NOT
Vamos iniciar com um exemplo do que o NOT é capaz, você consegue
prever o que esse código vai imprimir?
Copiar
console.log((2 + 2) === 4);

Isso aqui deve nos retornar true , não é? Afinal, 2 + 2 resultar em 4 é


uma declaração verdadeira. Agora, se adicionarmos o operador NOT antes
dessa declaração?
Copiar
console.log(!(2 + 2) === 4);

Se você executar esse código, vai perceber que o valor impresso é o


oposto do anterior. 🤔
Estamos diante de um operador muito poderoso. Ele pode inverter o valor
booleano de um elemento. Isso mesmo!! Se tivermos uma variável ou
valor considerado true , podemos gerar o resultado oposto simplesmente
fazendo !variável . Ou seja, false .
Então, sabendo que o resultado original da operação ali em cima é true ,
quando a gente insere o operador NOT antes da operação, teremos o valor
contrário a nossa resposta final, que é false .
Vale lembrar que o conceito de truthy e falsy também se aplica aqui, por
isso não estamos limitados apenas aos tipos primitivos booleanos.
Podemos usar em:

● Strings...
Copiar
const squirtle = "melhor pokemon inicial";

console.log(!squirtle); // false

● Números...
Copiar
console.log(!42); // false

console.log(!0); // true
// O número 0 tem o valor "falsy" no javascript. Logo, seu
oposto é true.

● Valores nulos...
Copiar
console.log(!null); // true

● Valores indefinidos..
Copiar
console.log(!undefined); // true

...e em muitos outros elementos. As possibilidades são enormes!!!

Switch e Case

E, no final do conteúdo de hoje, você vai aprender uma outra forma de


criarmos estruturas condicionais com o switch/case .

O switch case você irá verificar se algo cai nos case(casos),


se for igual ele vai dar dar o resultado que você quiser.

você coloca um break no final para parar as conferências de


case. caso não tenha um case ele poderá dar ok em mais de

uma condição.
podemos ter varios cases para conferir.
o default é a opção que irá tentar caso nao consiga nenhum
caso.

Você com certeza está super feliz com seus novos conhecimentos sobre
JS, não é?! 🎉 Então vamos praticar mais um pouco antes de chegar na
sessão de exercícios. Vamos!!!

1. Crie uma variável para armazenar o estado da pessoa candidata no


processo seletivo, que pode ser: 'aprovada' , 'lista' ou 'reprovada'
;
2. Crie uma estrutura condicional com o switch/case que irá imprimir
as mensagens do exercício anterior se o estado da pessoa candidata
for 'aprovada' , 'lista' ou 'reprovada' . Como default , imprima a
mensagem de 'não se aplica' .

A estrutura switch/case é utilizada quando queremos executar diferentes


ações. A expressão que passamos para o switch é avaliada apenas uma
vez, e o seu valor é comparado em cada caso. Se essa comparação for
verdadeira, o código do caso avaliado é executado. Se nenhum valor
satisfizer os casos listados, é executado o código em default .

OBS: o switch/case também pode dar a mesma resposta


para varios casos. para isso os casos estejam um debaixo do
outro sem o break entre eles. é o que acontece no exemplo
abaixo caso você vá atras de “Mangoes” ou “Papayas” ela
dará a mesma resposta. ‘mangoes and papayas are $2.79 a
pound.’
quando um caso é ativado ele vai fazendo tudo que tem
abaixo dele até achar um break. Olhe o Mangoes e a
resposta que ele dá

mesma resposta para Papayas

referencia:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Re
ference/Statements/switch

Operador Condicional Ternário


operador ternário é como um um switch case de com
somente duas respostas se true então faça o primeira opção,
se false então faça a segunda.

a condição então abaixo é a var elvisLives será igual ao


resultado da expressão math.PI se for maior que 4,
elvisLives terá o valor de “Yep” se for falso terá o valor de
“Nope”

referencia:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Re
ference/Operators/Conditional_Operator

Nome Operador encurtado Significado

Atribuição x=y x=y

Atribuição de adição x += y x = x + y

Atribuição de subtração x -= y x = x - y

Atribuição de multiplicação x *= y x = x * y

Atribuição de divisão x /= y x = x / y

Atribuição de resto x %= y x = x % y

Atribuição exponencial x **= y x = x ** y


Atribuição bit-a-bit por deslocamento x <<= y x = x << y
á esquerda

Atribuição bit-a-bit por deslocamento x >>= y x = x >> y


á direita

Atribuiçãode bit-a-bit deslocamento á x >>>= y x = x >>> y


direita não assinado

Atribuição AND bit-a-bit x &= y x = x & y

Atribuição XOR bit-a-bit x ^= y x = x ^ y

Atribuição OR bit-a-bit x |= y x = x | y

EXTRA=
deixando as letras em minúscula
como transformar uma palavra em minúscula, serve meio
que para contornar o case sensitive.
nome.ToLowerCase()
apesar do valor da variável piece estar com letras maiúsculas
elas são colocadas em caixa baixa com o piece=
piece.toLowerCase()

COMO PEGAR PARTE DE UMA STRING

1. Use a função substring() para remover o último caractere de uma

string JavaScript

2. Use o método slice() para remover o último caractere de uma

string JavaScript

3. Use o método replace() para remover o último caractere de uma

string JavaScript

referencia: https://www.delftstack.com/pt/howto/javascript/remove-last-

character-from-javascript/#:~:text=uma%20string%20JavaScript.-,Use
%20a%20fun%C3%A7%C3%A3o%20substring()%20para%20remover

%20o%20%C3%BAltimo%20caractere,ao%20%C3%BAltimo

%20%C3%ADndice%20da%20string.

Você também pode gostar