Semana 1 - Aula 1

FMT - aula 01
Variáveis e Operações
condicionais
AGENDA
● Introdução ao Javascript
● Como criar um projeto no Codesandbox
● Estrutura inicial de um projeto
● Conceito de variáveis
● Tipos de dados
● Diferença entre var, let e const
● Estrutura condicional simples - if
2
Quem é o professor
Bruno Costa, 24 anos.

● Sou do Ceará
● Desenvolvedor FullStack
● Hobbies: tocar violino e assistir F1.
3
Introdução ao Javascript
JavaScript é uma linguagem de programação

criada em meados de 1995 por Brendan Eich. Seu
nome, inicialmente, era Mocha. Foi criada para
trazer interatividade aos recém criados navegadores
web.
Curiosidade: todo o protótipo da primeira versão do JS

ficou pronto em 10 dias!
5
Developer Tools
● F12 do teclado
● Botão direito + inspecionar
● CTRL + SHIFT + i
Verifique se a aba selecionada é a

“Console”
6
Como criar um projeto
no Codesandbox
Como criar um projeto no Codesandbox
A ferramenta que vamos utilizar para criar os nossos primeiros códigos

será a do Codesandbox.
Link da plataforma: https://codesandbox.io/
Tarefa de casa: pesquisem sobre e instale o Visual Studio Code no seu

computador.
Link do site: https://code.visualstudio.com/download
8
Clique no botão com o texto Try for free
9
E escolha o modelo static
10
Vai abrir esse modelo padrão conforme a imagem abaixo
11
Estrutura inicial de um
projeto
Estrutura inicial de um projeto
Os arquivos do projeto ficam na barra lateral

esquerda. O principal deles é o index.html.
Será ele que utilizaremos nesta primeira aula.
13
Estrutura inicial de um projeto
Essa é a base do código que vamos usar na aula de hoje:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Aula 01</title>
</head>
<body>
<h1>Variáveis e estruturas condicionais</h1>
<script></script>
</body>
</html> Todo o código
Javascript vai aqui
14
Conceito de variáveis
Usamos variáveis em nosso código sempre que queremos armazenar um

valor para ser reutilizado posteriormente.
Uma variável funciona como uma “etiqueta” que indica o endereço do

valor atribuído à ela na memória do nosso computador.
16
Podemos imaginar a memória do

computador como um enorme “armário”
cheio de “gavetas”.
Guardamos nosso valor “Olá mundo!” em

uma gaveta de nome “primeiraVariavel”.
var primeiraVariavel = “Olá mundo!”
17
Toda vez que quisermos recuperar o valor dessa variável, basta passarmos
o nome dela para a operação que estamos fazendo:
console.log( primeiraVariavel ) // Olá mundo!
resultado exibido
18
Console.log é um método JavaScript utilizado para imprimir no console do

navegador alguma informação.
A sua sintaxe é:
console.log (“Olá mundo!”)
19
O valor armazenado em uma variável pode

ser alterado durante a execução do
programa.
var primeiraVariavel = “Olá mundo!”

console.log( primeiraVariavel ) // Olá mundo!
primeiraVariavel = “Meu primeiro programa”

console.log( primeiraVariavel ) // Meu primeiro programa
20
Existem algumas regras para determinarmos o nome de uma variável:
● Só pode conter letras, dígitos ou os símbolos $ e _;

● O primeiro caractere não pode ser um dígito;
● Não podemos utilizar palavras reservadas da linguagem;
○ Ex: function, const, class
Podemos utilizar duas convenções para criar nomes de variáveis

compostos: o padrão snake_case ou o camelCase.
21
Tipos de dados
Tipos de dados
Estes são os tipos de dados principais:
● String
● Number
● Boolean
● Object
● Null
● Undefined
23
Tipos de dados
Uma variável no JavaScript pode ser sobrescrita com tipos diferentes de

dados - característica que costumamos chamar de linguagem de tipagem
fraca.
Entender os tipos de dados é importante para a boa implementação do

código e para evitar erros.
24
Diferença entre var, let e
const
Diferença entre var, let e const
● VAR:
○ É uma variável que podemos atribuir um novo valor para ela
(reatribuição de valor)
○ É possível criar outra variável com o mesmo nome (redeclaração
de variável)
26
● LET:
○ É uma variável que podemos atribuir um novo valor para ela
○ Não podemos criar mais de uma variável com o mesmo nome
(redeclaração de variável)
27
● CONST:
○ É uma variável que não pode ter o seu valor inicial alterado
○ Não podemos criar mais de uma variável com o mesmo nome
(redeclaração de variável)
○ É obrigatório inicializar o valor de uma const em sua declaração
28
Operadores de
comparação
Operadores de comparação
● Operadores de comparação: são operadores que comparam os

valores e retornam um tipo boolean
Operador Operação Exemplo
== Igual a “1” == 1 // true
=== Estritamente igual a “1” === 1 // false
>, < Maior que, menor que 20 > 20 // false
>=, <= Maior ou igual, menor ou igual 20 <= 20 // true
!=, !== Diferente de 1 != 2 // true
30
Operadores de comparação
o JavaScript trata os valores de string vazia, o number 0,

undefined, false e null como valores falsos (falsy).
Todos os demais valores são tratados como valores verdadeiros (truthy).
Veremos a aplicação deste comportamento mais adiante!
31
Estrutura condicional
simples - if
Estrutura condicional simples - if
● As estruturas condicionais são recursos oferecidos pelas linguagens

para que seja possível verificar uma condição e alterar o fluxo de
execução do código;
● É possível definir uma ação específica para diferentes cenários e obter
exatamente o resultado esperado para cada cenário.
33
Pseudocódigo:
1. INÍCIO ALGORITMO
2. SE condição verdadeira ENTÃO
3. comando
4. FIM SE
5. FIM ALGORITMO
O comando somente será executado se a condição

for verdadeira
34
● A condicional if (se) é uma estrutura condicional que executa a

afirmação, dentro do bloco, se determinada condição for verdadeira.
var idade = 20;
if (idade >= 18) {

console.log('É maior de idade');
}
35
Exercício - if
Verificador de multas
● Desenvolva um programa em Javascript com duas variáveis:
○ uma que armazene o limite de velocidade em km/h
○ outra que armazene a velocidade do automóvel registrada pelo
sensor
● Caso a velocidade esteja acima do permitido exiba a seguinte
mensagem: “Velocidade acima do permitido. O condutor poderá ser
multado!”
36
OBRIGADO!

Semana 1 - Aula 1

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Semana 1 - Aula 1

Enviado por

Direitos autorais:

Formatos disponíveis

FMT - aula 01

Bruno Costa, 24 anos.

JavaScript é uma linguagem de programação

Curiosidade: todo o protótipo da primeira versão do JS

Veriﬁque se a aba selecionada é a

A ferramenta que vamos utilizar para criar os nossos primeiros códigos

Link da plataforma: https://codesandbox.io/

Tarefa de casa: pesquisem sobre e instale o Visual Studio Code no seu

Link do site: https://code.visualstudio.com/download

Clique no botão com o texto Try for free

E escolha o modelo static

Vai abrir esse modelo padrão conforme a imagem abaixo

Os arquivos do projeto ﬁcam na barra lateral

Será ele que utilizaremos nesta primeira aula.

Essa é a base do código que vamos usar na aula de hoje:

Usamos variáveis em nosso código sempre que queremos armazenar um

Uma variável funciona como uma “etiqueta” que indica o endereço do

Podemos imaginar a memória do

Guardamos nosso valor “Olá mundo!” em

var primeiraVariavel = “Olá mundo!”

console.log( primeiraVariavel ) // Olá mundo!

Console.log é um método JavaScript utilizado para imprimir no console do

console.log (“Olá mundo!”)

O valor armazenado em uma variável pode

var primeiraVariavel = “Olá mundo!”

primeiraVariavel = “Meu primeiro programa”

Existem algumas regras para determinarmos o nome de uma variável:

● Só pode conter letras, dígitos ou os símbolos $ e _;

Podemos utilizar duas convenções para criar nomes de variáveis

Estes são os tipos de dados principais:

Uma variável no JavaScript pode ser sobrescrita com tipos diferentes de

Entender os tipos de dados é importante para a boa implementação do

● Operadores de comparação: são operadores que comparam os

Operador Operação Exemplo

== Igual a “1” == 1 // true

=== Estritamente igual a “1” === 1 // false

>, < Maior que, menor que 20 > 20 // false

>=, <= Maior ou igual, menor ou igual 20 <= 20 // true

!=, !== Diferente de 1 != 2 // true

o JavaScript trata os valores de string vazia, o number 0,

Todos os demais valores são tratados como valores verdadeiros (truthy).

Veremos a aplicação deste comportamento mais adiante!

● As estruturas condicionais são recursos oferecidos pelas linguagens

2. SE condição verdadeira ENTÃO

O comando somente será executado se a condição

● A condicional if (se) é uma estrutura condicional que executa a

var idade = 20;

if (idade >= 18) {

Você também pode gostar