Skip to content

Latest commit

 

History

History
248 lines (178 loc) · 6.93 KB

javascript.md

File metadata and controls

248 lines (178 loc) · 6.93 KB
Raw

JavaScript

Este guia fornece informações essenciais sobre como usar o JavaScript no desenvolvimento web, abordando conceitos fundamentais como variáveis, funções, manipulação do DOM e operações assíncronas. JavaScript é uma linguagem de programação versátil e de alto nível que permite criar páginas web interativas e conteúdo dinâmico.

Índice

Introdução ao JavaScript

JavaScript é a linguagem principal para criar efeitos interativos e conteúdo dinâmico na web. Ele permite adicionar interatividade ao seu site, como animações, validação de formulários e requisições ao servidor. O JavaScript é executado pelo navegador e é suportado por todos os principais navegadores, tornando-o essencial no desenvolvimento web moderno.

Alguns recursos principais do JavaScript incluem:

  • Variáveis e Tipos de Dados: Armazenar dados como números, strings e objetos.
  • Estruturas de Controle: Usar loops, condicionais e funções para controlar o fluxo do código.
  • Manipulação do DOM: Modificar dinamicamente o conteúdo HTML e interagir com o DOM.
  • Programação Assíncrona: Lidar com tarefas em segundo plano, como requisições HTTP, sem bloquear a interface do usuário.

Configurando o JavaScript

Para começar a usar o JavaScript no seu projeto, você precisa incluí-lo no seu arquivo HTML. Você pode usar scripts internos ou arquivos externos de JavaScript.

Usando JavaScript Inline

Adicione a tag <script> dentro da seção <body> ou <head> do seu HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de JavaScript</title>
  <script>
    alert("Olá, Mundo!");
  </script>
</head>
<body>
</body>
</html>

Usando Arquivo Externo de JavaScript

Você também pode colocar seu código JavaScript em um arquivo externo .js e referenciá-lo no seu HTML usando a tag <script>.

Crie um arquivo externo chamado script.js:

console.log("Olá, do arquivo JS externo");

Então, inclua-o no seu HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de JavaScript</title>
  <script src="script.js"></script>
</head>
<body>
</body>
</html>

Sintaxe Básica do JavaScript

A sintaxe do JavaScript é simples e permite que você realize diversas tarefas, como definir variáveis, realizar operações e controlar o fluxo da aplicação.

Exemplo: Variáveis e Tipos de Dados

let nome = "João"; // String
let idade = 30;    // Número
let éEstudante = true; // Booleano
let pessoa = { nome: "João", idade: 30 }; // Objeto

Exemplo: Estruturas de Controle

let x = 10;
if (x > 5) {
  console.log("x é maior que 5");
} else {
  console.log("x é menor ou igual a 5");
}

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

Trabalhando com Funções

Funções em JavaScript são blocos reutilizáveis de código que permitem executar tarefas específicas.

Exemplo: Definição e Chamada de Função

function cumprimentar(nome) {
  return "Olá, " + nome;
}

console.log(cumprimentar("Alice"));

Exemplo: Funções de Flecha

const cumprimentar = (nome) => `Olá, ${nome}`;

console.log(cumprimentar("Bob"));

Manipulando o DOM

JavaScript permite que você interaja com elementos HTML usando o Modelo de Objetos de Documento (DOM). Você pode alterar o conteúdo, estilos e atributos de elementos.

Exemplo: Alterando o Conteúdo de Texto

<button id="alterar-texto">Alterar Texto</button>
<p id="texto">Texto Original</p>

<script>
  document.getElementById("alterar-texto").onclick = function() {
    document.getElementById("texto").innerText = "Texto Alterado!";
  };
</script>

Exemplo: Modificando Estilos CSS

<button id="alterar-estilo">Alterar Estilo</button>
<p id="texto-estilizado">Texto Estilizado</p>

<script>
  document.getElementById("alterar-estilo").onclick = function() {
    document.getElementById("texto-estilizado").style.color = "vermelho";
  };
</script>

JavaScript Assíncrono

Operações assíncronas em JavaScript permitem que você execute tarefas, como buscar dados de um servidor, sem bloquear o restante da aplicação. Você pode lidar com essas tarefas usando callbacks, promessas ou async/await.

Exemplo: Usando Callbacks

function buscarDados(callback) {
  setTimeout(() => {
    console.log("Dados buscados");
    callback();
  }, 2000);
}

buscarDados(function() {
  console.log("Callback executado");
});

Exemplo: Usando Promessas

let promessa = new Promise((resolve, reject) => {
  let sucesso = true;
  if (sucesso) {
    resolve("Dados obtidos com sucesso");
  } else {
    reject("Falha ao obter dados");
  }
});

promessa.then((mensagem) => {
  console.log(mensagem);
}).catch((mensagem) => {
  console.log(mensagem);
});

Exemplo: Usando async/await

async function buscarDados() {
  let resposta = await fetch("https://jsonplaceholder.typicode.com/posts");
  let dados = await resposta.json();
  console.log(dados);
}

buscarDados();

Casos Comuns de Uso do JavaScript

Aqui estão alguns casos comuns de uso onde o JavaScript é frequentemente aplicado:

  • Validação de Formulários: Garantir que os campos do formulário sejam preenchidos corretamente antes do envio.
  • Sliders de Imagem: Criar galerias interativas ou sliders de imagem.
  • Mapas Interativos: Incorporar e interagir com mapas usando JavaScript.
  • Conteúdo Dinâmico: Atualizar partes de uma página sem recarregar a página inteira.
  • Atualizações em Tempo Real: Implementar recursos em tempo real, como notificações e chats ao vivo.

Recursos Adicionais