Programação Web 1

Introdução ao JavaScript

Prof. Me. Danilo Bueno

O que é JavaScript?

• é uma linguagem de programação interpretada
• a linguagem para páginas Web
• uma linguagem de scripting baseada em protótipos, multi-paradigma e tipagem dinâmica (fraca), suportando os estilos orientado a objetos, imperativo e funcional
• a sintaxe básica é intencionalmente similar tanto a Java quanto a C++, com o intuito de diminuir o número de conceitos exigidos para se aprender a linguagem.

O que JavaScript NÃO é?

• Não é Java.
• Apesar de ter uma sintaxe similar, são linguagens diferentes.

História do JS

• de Mocha para LiveScript e então JavaScript em 1995.
• Criado por Brendan Eich em apenas 10 dias.
• Em 1997, padronizado como ECMAScript pela ECMA (European Computer Manufacturers Association).

Por que aprender JavaScript?

• É a linguagem da Web.
• Funciona diretamente no navegador sem necessidade de configuração.
• Uma das linguagens mais populares do mundo.
• JavaScript em diferentes plataformas

JS em diferentes plataformas

• Mobile Applications: React Native, Ionic, NativeScript, etc.
• IOT - Internet of Things: Johnny-Five, Andre Garzia - Fazendo Drinks Com JavaScript, etc.
• Inteligência Artificial (AI): TensorFlow.js, Brain.js, etc.
• Desktop Applications: Electron, - GNOME JavaScript, etc.
• Games: Phaser, Babylon.js, etc.
• Servidores / Backend: Node.js, Deno, etc.
• Web Applications: Google Maps, Facebook, Office 365, etc.

O que é possível fazer com JS?

• Interatividade (Eventos): Ex: Criar botões de "Modo Escuro" ou menus "hamburger" que deslizam no celular.

• Atualização em Tempo Real (Manipulação de Texto/HTML): Ex: O "Feed Infinito" das redes sociais ou mensagens de chat chegando sem recarregar a página.

• Feedback Instantâneo (Validação): Ex: Avisar que a senha é fraca ou que o e-mail está errado enquanto o usuário digita.

O que é possível fazer com JS?

• Multimídia e Mapas (APIs do Navegador): Ex: Apps de transporte (Geolocalização) ou filtros de câmera em tempo real.
• Gráficos e Jogos (Canvas): Ex: Jogos rodando direto no navegador ou gráficos financeiros interativos.

Hello, World

• O JS pode ser executado diretamente no navegador, sem necessidade de instalação de software adicional.
• Para acessar o console do navegador, basta pressionar a tecla F12 ou clicar com o botão direito na página e selecionar "Inspecionar/Elemento" e depois ir até a aba "Console".
• No console do navegador:

console.log("Hello, World!");

Hello, World! (HTML)

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0  " />    <title>Hello World</title>  </head>  <body>    <h1>Hello, World!</h1>    <script>      console.log("Hello, World!");    </script>  </body></html>

Formas de incluir JS

• Inline (dentro de tags HTML):

<button onclick="alert('Olá!')">Clique aqui</button>

• Interno (dentro de uma tag <script>):

<script>  alert("Olá!");</script>

• Externo (arquivo .js separado):

<script src="script.js"></script>

Variáveis em JS

• Declaração de variáveis com var, let e const:

let nome = "Lenny";const idade = 30;var cidade = "Springfield";

• let: variável de escopo de bloco, pode ser reatribuída.
• const: variável de escopo de bloco, não pode ser reatribuída.
• var: variável de escopo global ou de função, pode ser reatribuída. (Evitar seu uso em código moderno)

Variáveis em JS

• Devem começar com uma letra, $ ou _.
• Não podem começar com números, espaços ou caracteres especiais
• Case sensitive (nome e Nome são diferentes).
• Não podem ser palavras reservadas
• Camel case é uma convenção comum (ex: abrirModal).

Tipos de Dados em JS

• number: números (inteiros e decimais)
• string: texto
• boolean: verdadeiro ou falso
• object: objetos (function, array, etc.)
• null: ausência intencional de valor
• undefined: variável declarada, mas sem valor atribuído

typeof operador para verificar o tipo de dado

Entrada de dados: prompt()

let nome = prompt("Qual é o seu nome?");alert("Olá, " + nome + "!");

• Abre uma caixa de diálogo no navegador, pedindo um valor ao usuário
• O que o usuário digitar é devolvido sempre como string, mesmo que pareça um número
• Se o usuário clicar em "Cancelar", o valor devolvido é null

Number

let idade = 25; // inteirolet preco = 19.99; // decimallet notacao = 2e3; // 2x10ˆ3 = 2000//operações aritméticaslet soma = 10 + 5; // 15let subtracao = 10 - 5; // 5let multiplicacao = 10 * 5; // 50let divisao = 10 / 5; // 2let modulo = 10 % 3; // 1 (resto da divisão)let potencia = 2 ** 3; // 8 (2 elevado a 3)

Op. aritméticos em Strings

let soma = "10" + "5"; // "105" (concatenação)let subtracao = "10" - "5"; // 5 (subtração numérica)let multiplicacao = "10" * "5"; // 50 (multiplicação numérica)let divisao = "10" / "5"; // 2 (divisão numérica)let divisaoNaN = "10 teste" / 5; // NaN (Not a Number)

• O operador + concatena strings.
• Outros operadores tentam converter strings em números.

Convertendo tipos (cast)

let idadeTexto = prompt("Sua idade:"); // sempre string, ex: "25"console.log(idadeTexto + 1); // "251" (concatenou!)let idade = Number(idadeTexto); // converte para number: 25console.log(idade + 1); // 26 (somou)

• Number(valor): converte para número (NaN se não for possível)
• String(valor): converte para texto
• Boolean(valor): converte para true/false

É por isso que todo valor vindo de prompt() precisa passar por Number(...) antes de qualquer conta.

Ainda em números

• NaN (Not a Number): resultado de operações inválidas com números.
• A ordem das operações segue a matemática tradicional. Os parênteses têm maior precedência.
• Existem também os operadores de incremento (++) e decremento (--):

Strings

• Texto entre aspas simples (' '), duplas (" ") ou crase (` `)

let nome = "Lenny";let sobrenome = "Leonard";let concatenação = nome + " " + sobrenome; // Usando +let saudacao = `Olá, ${nome} ${sobrenome}!`; // Template string

Booleans

• Valores lógicos: true (verdadeiro) ou false (falso)

let ligado = true;let desligado = false;

• Usados em condições e controle de fluxo (if, while, etc.)
• Exemplos de expressões booleanas:

let maiorDeIdade = idade >= 18; // true ou falselet temCarteira = true;let podeDirigir = maiorDeIdade && temCarteira; // true se ambos forem true

Saída de dados: alert()

console.log("Aparece no console"); // precisa abrir o DevTools (F12)alert("Aparece numa janela na tela"); // visível direto, sem abrir nada

• console.log: ótimo para depuração, mas exige o console aberto
• alert: mostra a mensagem direto pro usuário, e pausa a execução até clicar OK

Combinando prompt() com alert(), entrada e saída ficam no mesmo lugar: nenhuma das duas exige abrir o DevTools.

Condicionais

if(true) {    console.log("verdade");else {    console.log("falso");}if(1 == 1) console.log("1 == 1");if(1 == '1') console.log("1 == '1'");if(1 === '1') console.log("1 === '1'");let msg = condicao ? "Caso verdadeiro" : "Caso falso";

Objetos

• Estruturas que armazenam dados em pares chave-valor

let pessoa = {  nome: "Lenny",  idade: 30,  cidade: "Springfield",};

Criar um objeto

let carro = {  marca: "Fiat",  modelo: "Uno",  ano: 1997,};

Dot notation set e get

carro.ano = 1998; // altera o ano para 1998 (SET)console.log(carro.marca); // exibe "Fiat" (GET)

Null e Undefined

• null: ausência intencional de valor

let valorNulo = null;

• undefined: variável declarada, mas sem valor atribuído

let valorIndefinido;

Obrigado!

[email protected] · website/docs · github