Capítulo 7: Introdução ao JavaScript – Minicurso HTML

O que é JavaScript

Breve história do JavaScript

JavaScript foi criado por Brendan Eich em 1995 e originalmente chamado de Mocha, depois renomeado para LiveScript e, finalmente, JavaScript.

É uma linguagem de programação amplamente utilizada para adicionar interatividade e outras funcionalidades dinâmicas a sites.

Diferenças entre HTML, CSS e JavaScript

HTML é uma linguagem de marcação usada para estruturar o conteúdo de uma página da web, enquanto CSS é usada para estilizar o conteúdo.

JavaScript é uma linguagem de programação usada para adicionar interatividade e dinamismo às páginas da web.

Sintaxe básica do JavaScript

Variáveis e tipos de dados

JavaScript possui diferentes tipos de dados, como string, number, boolean, null, undefined e object. Para declarar variáveis, você pode usar as palavras-chave var, let ou const.

Exemplo:

let nome = "João";
const idade = 30;
var ativo = true;

Operadores

JavaScript possui vários operadores, como aritméticos (+, -, *, /, %), de comparação (==, ===, !=, !==, <, >, <=, >=), lógicos (&&, ||, !) e outros.

Exemplo:

let soma = 10 + 20;
let comparacao = 5 < 10;
let resultado = (5 + 3) * 2;

Estruturas de controle

JavaScript possui estruturas de controle como if, else, else if, switch, for, while e do-while.

Exemplo:

if (idade >= 18) {
  console.log("Maior de idade");
} else {
  console.log("Menor de idade");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Funções

Funções são blocos de código reutilizáveis que podem ser chamados com diferentes argumentos.

Exemplo:

function saudacao(nome) {
  console.log("Olá, " + nome + "!");
}

saudacao("Maria");

Trabalhando com DOM (Document Object Model)

O DOM é uma representação em árvore dos elementos em uma página da web. JavaScript pode ser usado para manipular o DOM, adicionando, modificando ou removendo elementos.

Exemplo:

document.getElementById("meuElemento").innerHTML = "Texto alterado";

Eventos

Eventos são ações ou ocorrências que podem ser detectadas e manipuladas por JavaScript, como cliques, pressionamento de teclas e carregamento de páginas.

Exemplo:

document.getElementById("meuBotao").addEventListener("click", function() {
  alert("Botão clicado!");
});

Arrays e objetos

Arrays

Arrays são estruturas de dados que armazenam múltiplos valores em uma única variável.

Exemplo:

let frutas = ["maçã", "banana", "laranja"];
console.log(frutas[1]); // Exibe "banana"

Objetos

Objetos são coleções de propriedades e métodos. Eles permitem armazenar dados mais complexos e estruturados.

Exemplo:

let pessoa = {
  nome: "João",
  idade: 30,
  falar: function() {
    console.log("Olá, meu nome é " + this.nome);
  }
};

pessoa.falar(); // Exibe "Olá, meu nome é João"

Manipulação de strings

JavaScript oferece várias funções e métodos para manipular strings.

Exemplo:

let texto = "Aprendendo JavaScript";
console.log(texto.toUpperCase()); // Exibe "APRENDENDO JAVASCRIPT"

Manipulação de números

JavaScript também possui funções para trabalhar com números, como arredondamento, geração de números aleatórios e conversão entre tipos.

Exemplo:

let num = 3.14159;
console.log(Math.round(num)); // Exibe "3"

Manipulação de datas

JavaScript fornece o objeto Date para trabalhar com datas e horas.

Exemplo:

let dataAtual = new Date();
console.log(dataAtual.toLocaleDateString()); // Exibe a data atual no formato local

Temporizadores

JavaScript permite executar funções após um intervalo de tempo ou em intervalos regulares usando setTimeout e setInterval.

Exemplo:

setTimeout(function() {
  console.log("Executado após 3 segundos");
}, 3000);

let contador = 0;
let intervalo = setInterval(function() {
  contador++;
  console.log("Contador: " + contador);
  if (contador >= 5) {
    clearInterval(intervalo);
  }
}, 1000);

Tratamento de erros e exceções

Try, Catch e Finally

JavaScript permite o tratamento de erros usando blocos try, catch e finally. Isso ajuda a evitar que o programa pare de funcionar devido a um erro inesperado.

Exemplo:

try {
  let resultado = dividir(10, 0);
} catch (erro) {
  console.error("Ocorreu um erro:", erro.message);
} finally {
  console.log("Operação finalizada.");
}

function dividir(a, b) {
  if (b === 0) {
    throw new Error("Divisão por zero não é permitida.");
  }
  return a / b;
}

Armazenamento local e de sessão

JavaScript permite armazenar dados no navegador do usuário usando localStorage e sessionStorage. Esses recursos ajudam a manter o estado entre sessões e melhorar a experiência do usuário.

Exemplo:

localStorage.setItem("nome", "João");
let nome = localStorage.getItem("nome");
console.log(nome); // Exibe "João"

JSON (JavaScript Object Notation)

JSON é um formato leve de troca de dados que é fácil de ler e escrever. É usado para armazenar e trocar dados entre um servidor e um cliente.

Exemplo:

let pessoa = {
  nome: "Maria",
  idade: 28
};

let pessoaJSON = JSON.stringify(pessoa);
console.log(pessoaJSON); // Exibe '{"nome":"Maria","idade":28}'

let pessoaObj = JSON.parse(pessoaJSON);
console.log(pessoaObj.nome); // Exibe "Maria"

AJAX (Asynchronous JavaScript and XML)

AJAX permite atualizar partes de uma página da web sem recarregar a página inteira. É utilizado para trocar dados com um servidor e atualizar o conteúdo dinamicamente.

Exemplo básico usando fetch:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("Erro ao buscar os dados:", error);
  });

Encerramento

Neste capítulo, você aprendeu conceitos básicos do JavaScript, como variáveis, tipos de dados, operadores, estruturas de controle, funções, manipulação do DOM, eventos, arrays, objetos e muito mais.

Com essa base sólida, você está pronto para explorar ainda mais o JavaScript e suas diversas aplicações no desenvolvimento web.