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.