Quer ajudar o projeto? Você pode doar na tela Sobre mim!

Introdução ao JavaScript

JavaScript

Javascript

O que é JavaScript?

JavaScript (JS) é uma linguagem de programação criada para tornar as páginas da web interativas. Ele é uma das três principais tecnologias da web, junto com HTML e CSS.

✅ Com JavaScript, podemos:

Criar animações e efeitos visuais. Manipular o conteúdo da página sem precisar recarregá-la. Fazer requisições a servidores para buscar ou enviar dados (AJAX, Fetch, APIs). Criar jogos, aplicativos web e até aplicativos mobile com frameworks como React Native. Hoje em dia, o JavaScript vai muito além do navegador! Ele pode ser usado no back-end (Node.js), em bancos de dados (MongoDB), inteligência artificial, IoT (Internet das Coisas) e muito mais.

Quem criou o JavaScript?

O JavaScript foi criado por Brendan Eich, um programador da empresa Netscape, em 1995.

Na época, a Netscape queria adicionar uma linguagem de scripts ao seu navegador, o Netscape Navigator. A ideia era que os desenvolvedores pudessem criar interações dinâmicas em páginas da web.

Brendan Eich criou o JavaScript em apenas 10 dias! 😲 Isso porque a Netscape estava competindo com a Microsoft, que tinha o Internet Explorer, e precisava lançar rapidamente uma tecnologia inovadora.

A origem do nome "JavaScript"

Muita gente pensa que JavaScript tem relação com a linguagem Java, mas isso não é verdade!

📌 Curiosidade: O JavaScript foi inicialmente chamado de Mocha, depois LiveScript, mas a Netscape fez uma parceria com a Sun Microsystems (criadora do Java) e mudou o nome para JavaScript por motivos de marketing.

Apesar do nome parecido, Java e JavaScript são linguagens diferentes!

A Evolução do JavaScript

Desde sua criação, o JavaScript passou por muitas melhorias. Ele se tornou um padrão chamado ECMAScript (ES), que recebe atualizações regulares.

Aqui estão as versões mais importantes do ECMAScript:

AnoVersãoO que mudou?
1997ES1Primeira versão oficial do ECMAScript.
1999ES3Introduziu suporte a expressões regulares e try/catch.
2009ES5Adicionou JSON, strict mode, e novos métodos de array.
2015ES6 (ECMAScript 2015)Maior atualização! Introduziu let, const, arrow functions, classes e Promises.
2016+ES7, ES8, ES9...Novos recursos como async/await, spread/rest operators, e melhorias na linguagem.

Hoje, o JavaScript é usado em qualquer lugar, desde páginas da web até servidores e aplicativos móveis.

O que é ECMAScript (ES)?

EcmanScript ECMAScript é o padrão que define a linguagem JavaScript. Ele é criado e mantido pela organização ECMA International através da especificação ECMA-262.

Ou seja, JavaScript é uma implementação do ECMAScript.

📌 Pense assim:

ECMAScript é a base da linguagem. JavaScript adiciona funcionalidades extras, como manipulação do DOM e APIs do navegador.

🔹 O que é ES6? O ES6 (ECMAScript 2015) é a 6ª versão do ECMAScript, lançada em 2015. Ele trouxe várias melhorias e novos recursos para o JavaScript.

Antes do ES6, o JavaScript era bem limitado. Com o ES6, ele ficou mais moderno e poderoso.

1. Console no javascript

Executando no navegador (DevTools Console):

  • Abra o console do navegador (F12 → Console) e digite:
console.log("Olá, mundo!");

2. Incluindo JavaScript no HTML

  • Crie um arquivo index.html e adicione:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro JS</title>
</head>
<body>
    <h1>Bem-vindo ao JavaScript!</h1>
    <script>
        alert("Olá, seja bem-vindo!");
    </script>
</body>
</html>

3. Fundamentos sobre javascript

Variáveis

Em JavaScript, podemos declarar variáveis usando var, let e const.

  • var: Antigo e não recomendado, pois pode causar problemas de escopo.
  • let: Permite reatribuição e tem escopo de bloco.
  • const: Não pode ser reatribuído e também tem escopo de bloco.

Exemplo de uso:

let nome = "Marcos"; 
const idade = 25; 
var cidade = "Rio de Janeiro";  

console.log(nome, idade, cidade);

Tipos de Dados JavaScript possui diferentes tipos de dados primitivos e estruturais. Os principais são:

  • String: Texto entre aspas ("Hello")
  • Number: Números inteiros ou decimais (42, 3.14)
  • Boolean: Verdadeiro ou falso (true, false)
  • Array: Lista de valores ([1, 2, 3])
  • Objeto: Conjunto de pares chave-valor JS({ nome: "Marcos", idade: 25 }) Exemplo de como verificar o tipo de cada dado:
let texto = "Hello"; 
let numero = 42; 
let booleano = true; 
let array = [1, 2, 3]; 
let objeto = { nome: "Marcos", idade: 25 };  

console.log(typeof texto, typeof numero, typeof booleano, typeof array, typeof objeto);

4. Declaração de Variáveis (let e const)

Antes do ES6, só existia var. Agora temos let e const, que são mais seguras.

// Antes do ES6 (com var)
var nome = "João";
console.log(nome);

// Com ES6 (melhor prática)
let idade = 25;
const PI = 3.14;
console.log(idade, PI);

5. Arrow Functions (Funções de seta) =>

As arrow functions tornam o código mais curto e legível.

// Antes do ES6
function somar(a, b) {
    return a + b;
}
console.log(somar(3, 4)); // 7

// Com ES6 (Arrow Function)
const somarES6 = (a, b) => a + b;
console.log(somarES6(3, 4)); // 7

3. Template Literals (Interpolação de Strings)

const nome = "Carlos";
const idade = 30;

// Antes do ES6
console.log("Meu nome é " + nome + " e tenho " + idade + " anos.");

// Com ES6
console.log(`Meu nome é ${nome} e tenho ${idade} anos.`);

6. Destructuring (Desestruturação de Objetos e Arrays)

Facilita o acesso a dados dentro de objetos e arrays.

// Antes do ES6
const pessoa = { nome: "Ana", idade: 22 };
const nomePessoa = pessoa.nome;
const idadePessoa = pessoa.idade;
console.log(nomePessoa, idadePessoa);

// Com ES6 (Destructuring)
const { nome, idade } = pessoa;
console.log(nome, idade);

7. Spread Operator (...)

O spread operator (...) permite espalhar elementos de um array ou objeto.

const numeros = [1, 2, 3];
const novosNumeros = [...numeros, 4, 5]; // Copia e adiciona novos elementos
console.log(novosNumeros); // [1, 2, 3, 4, 5]

Manipulação de Arrays e Objetos

✅ Arrays e métodos principais

  • map(): Itera sobre um array e retorna um novo array modificado.
  • filter(): Filtra elementos de um array com base em uma condição.
  • reduce(): Reduz um array a um único valor, aplicando uma função acumuladora.
  • forEach(): Itera sobre um array, mas sem retornar um novo array.
  • find(): Retorna o primeiro elemento do array que satisfaz a condição.

📝 Exemplos

const numeros = [1, 2, 3, 4, 5];

const dobrados = numeros.map(num => num * 2);
console.log(dobrados); // [2, 4, 6, 8, 10]

const pares = numeros.filter(num => num % 2 === 0);
console.log(pares); // [2, 4]

const somaTotal = numeros.reduce((acc, num) => acc + num, 0);
console.log(somaTotal); // 15

numeros.forEach(num => console.log(num * 10)); // 10, 20, 30, 40, 50

const encontrado = numeros.find(num => num > 3);
console.log(encontrado); // 4

✅ Objetos e manipulação de propriedades

const pessoa = {
  nome: "Marcos",
  idade: 30,
  cidade: "Rio de Janeiro"
};

console.log(pessoa.nome); // Marcos
pessoa.profissao = "Desenvolvedor";
console.log(pessoa);

8. Default Parameters (Parâmetros Padrão)

Permite definir valores padrões para funções.

// Antes do ES6
function saudacao(nome) {
    nome = nome || "Visitante";
    return `Olá, ${nome}!`;
}
console.log(saudacao()); // "Olá, Visitante!"

// Com ES6
const saudacaoES6 = (nome = "Visitante") => `Olá, ${nome}!`;
console.log(saudacaoES6()); // "Olá, Visitante!"

9. Promises (Trabalhando com operações assíncronas)

O ES6 trouxe Promises, que são muito usadas para lidar com operações assíncronas, como requisições para APIs.

const promessa = new Promise((resolve, reject) => {
    let sucesso = true;
    setTimeout(() => {
        if (sucesso) {
            resolve("Dados carregados!");
        } else {
            reject("Erro ao carregar os dados.");
        }
    }, 2000);
});

promessa
    .then((res) => console.log(res)) // "Dados carregados!"
    .catch((erro) => console.log(erro));
Outro exemplo

Exemplo simples usando fetch para buscar a cotação do dólar na API pública do Banco Central do Brasil e exibir no console:

fetch('https://economia.awesomeapi.com.br/json/last/USD-BRL')
  .then(response => response.json())
  .then(data => console.log(`Cotação do Dólar: R$ ${data.USDBRL.bid}`))
  .catch(error => console.error('Erro ao buscar cotação:', error));
Exemplo mais complexo
const valorEmReais = 100; // Defina o valor em reais aqui

fetch('https://economia.awesomeapi.com.br/json/last/USD-BRL')
  .then(response => response.json())
  .then(data => {
    const cotacao = parseFloat(data.USDBRL.bid);
    const valorEmDolar = (valorEmReais / cotacao).toFixed(2);
    console.log(`R$ ${valorEmReais} equivale a $ ${valorEmDolar} dólares.`);
  })
  .catch(error => console.error('Erro ao buscar cotação:', error));

10. Escopo

  • Variáveis e funções definidas dentro de um bloco {}, não são visíveis fora dele.
function precisoVisitar(paisesVisitados) {
  var totalPaises = 193;
  return `Ainda faltam ${totalPaises - paisesVisitados} paises para visitar`
}
console.log(totalPaises); // erro, totalPaises não definido

9. Escopo Léxico

  • Funções conseguem acessar variáveis que foram criadas no contexto pai. O Escopo Léxico em JavaScript significa que uma função pode acessar variáveis definidas dentro dela e também nas funções e blocos externos onde foi declarada.

Ou seja, quando uma função é criada, ela "lembra" onde foi definida e consegue acessar variáveis desse local, mesmo que seja chamada em outro contexto.

var profissao = 'Designer';

function dados() {
  var nome = 'Marcos';
  var idade = 27;
  function outrosDados() {
    var endereco = 'Rio de Janeiro';
    var idade = 29;
    return `${nome}, ${idade}, ${endereco}, ${profissao}`;
  }
  return outrosDados();
}

dados(); // Retorna 'Marcos, 29, Rio de Janeiro, Designer'
outrosDados(); // retorna um erro

11. Objetos

  • Conjunto de variáveis e funções, que são chamadas de propriedades e métodos.
var pessoa = {
  nome: 'Luiz',
  idade: 32,
  profissao: 'Designer',
  possuiFaculdade: true,
}

pessoa.nome; // 'Luiz'
pessoa.possuiFaculdade; // true

Propriedades e métodos consistem em nome (chave) e valor

12. Métodos

  • São propriedades de um objeto que armazenam funções como valor. Elas permitem que o objeto execute ações e manipule seus próprios dados, tornando o código mais organizado e reutilizável.
var quadrado = {
  lados: 4,
  area: function(lado) {
    return lado * lado;
  },
  perimetro: function(lado) {
    return this.lados * lado;
  },
}

quadrado.lados; // 4
quadrado.area(5); // 25
quadrado.perimetro(5); // 20

No ES6+, a sintaxe para definir métodos em objetos foi simplificada. Antes, era comum usar a seguinte forma: Sintaxe antes do ES6:

const objeto = {
  area: function() {
    return "Calculando área...";
  }
};

Sintaxe no ES6+ (método abreviado):

const objeto = {
  area() {
    return "Calculando área...";
  }
};

A principal diferença é que no ES6+ não é necessário usar function, tornando o código mais limpo e legível.

13. Organização do Código com Objetos

Os objetos ajudam a organizar o código em pequenas partes reutilizáveis, tornando-o mais modular e fácil de manter.

Exemplo com o objeto Math

  • O JavaScript possui objetos nativos, como Math, que fornecem métodos e propriedades úteis:
console.log(Math.PI); // 3.141592653589793
console.log(Math.random()); // Número aleatório entre 0 e 1

var pi = Math.PI;
console.log(pi); // 3.141592653589793

No exemplo acima, Math.PI é uma propriedade que retorna o valor de π, enquanto Math.random() é um método que gera um número aleatório.

14. Objetos e Métodos

Já reparou que console também é um objeto e log() é um método dele?

console.log("Olá, mundo!"); // Exibe "Olá, mundo!" no console

Isso mostra como os objetos podem armazenar tanto propriedades quanto métodos, facilitando a reutilização e organização do código.

15. Criar um Objeto

Um objeto é criado utilizando as chaves {}

var carro = {};
var pessoa = {};

console.log(typeof carro); // 'object'

16. Dot Notation Get

Acesse propriedades de um objeto utilizando o ponto .

var menu = {
  width: 900,
  height: 70,
  backgroundColor: '#8f4E',
}

var bg = menu.backgroundColor; // '#8f4E'

17. Dot Notation Set

Substitua o valor de uma propriedade utilizando . e o = após o nome da mesma.

var menu = {
  width: 800,
  height: 50,
  backgroundColor: '#84E',
}

menu.backgroundColor = '#000';
console.log(menu.backgroundColor); // '#000'

Resumo: Qual a diferença?

TermoO que significa?
ECMAScriptO padrão da linguagem JavaScript. Define regras e funcionalidades.
JavaScriptUma implementação do ECMAScript. Adiciona suporte ao DOM e APIs do navegador.
ES6 (ECMAScript 2015)A 6ª versão do ECMAScript, lançada em 2015, que trouxe melhorias significativas para o JavaScript.

📌 Conclusão

  • ECMAScript é o padrão da linguagem.
  • JavaScript é uma linguagem baseada no ECMAScript.
  • ES6 trouxe melhorias que tornaram o JavaScript mais moderno e poderoso.