Fundamentos do JavaScript

Prévia do material em texto

Introdução
Olá leitor, tomara que esse material seja útil para a sua jornada em JavaScript.
Ele foi cuidadosamente planejado para passar os principais conceitos de JS.
Cada um destes tópicos é utilizado no dia a dia pelos programadores, eu
considero de suma importância que você os domine. Neste material você terá
acesso a introdução teórica de diversos assuntos, e também verá códigos dos
mesmos para aplicação prática.
Se você deseja aprimorar mais ainda seus conhecimentos em programação, dê
uma olhada na nossa plataforma Hora de Codar, com diversos cursos.
Inclusive temos um curso de JavaScript do básico ao avançado, todos os nossos
cursos têm projetos completos, certificado de conclusão, equipe para suporte
do aluno, acesso vitalício e atualizações.
Note que mesmo este sendo ummaterial introdutório, tem tudo que você precisa
para ser um programador excelente em JavaScript, você só precisa continuar
praticando e aprofundando mais nos mesmos itens.
Crie seus próprios exemplos, indo além do que está sendo passado aqui para
você. Isso fará com que você internalize seus conhecimentos.
Se você prefere materiais gratuitos de JavaScript, também possuo um canal no
YouTube, commuitos conteúdos para você.
Desejo a você uma boa leitura,
Matheus.
https://app.horadecodar.com.br/
https://app.horadecodar.com.br/course/curso-de-javascript-completo
https://www.youtube.com/channel/UCDoFiMhpOnLFq1uG4RL4xag
https://www.youtube.com/channel/UCDoFiMhpOnLFq1uG4RL4xag
Introdução ao JavaScript
Bem-vindo ao mundo do JavaScript, a linguagem de programação que está no
coração da web moderna.
Desde seu nascimento em 1995, JavaScript transformou-se de uma simples
ferramenta para adicionar interatividade às páginas da web em uma das
linguagens de programação mais poderosas e versáteis do mundo.
Neste capítulo, exploraremos a fascinante história e evolução do JavaScript,
entenderemos por que ele é uma habilidade essencial para desenvolvedores de
todos os níveis, e descobriremos como essa linguagem continua a moldar a
internet que conhecemos hoje.
História e Evolução do JavaScript
JavaScript foi criado por Brendan Eich em 1995, enquanto ele trabalhava na
Netscape Communications. Inicialmente desenvolvido sob o nome de Mocha, e
mais tarde renomeado para LiveScript, finalmente se tornou JavaScript — uma
estratégia de marketing para capitalizar a popularidade do então
recém-lançado Java.
Mas ao contrário do Java, JavaScript foi desenhado como uma linguagem de
scripting leve para tornar as páginas web mais dinâmicas e interativas.
Ao longo dos anos, JS evoluiu significativamente. Com a introdução do
ECMAScript (ES) — a especificação oficial da linguagem — em 1997, e suas
subsequentes atualizações, JavaScript amadureceu e expandiu suas
capacidades.
Essas atualizações trouxeram novos recursos, como classes, módulos,
promessas, e suporte melhorado para programação funcional e reativa, que têm
permitido aos desenvolvedores construir aplicações web complexas e eficientes.
Por que aprender JavaScript?
Aprender JavaScript temmuitas vantagens. Primeiramente, é a única linguagem
de programação que os navegadores executam nativamente, o que a torna
indispensável para o desenvolvimento web front-end.
Além disso, com o advento de plataformas como Node.js, JavaScript agora
também é uma escolha popular para programação back-end, o que significa
que você pode desenvolver para toda a stack da web com uma única
linguagem.
JavaScript também possui uma enorme comunidade de desenvolvedores e uma
vasta gama de frameworks e bibliotecas, como React, Angular, e Vue.js, que
facilitam a criação de aplicativos web e móveis robustos e de alto desempenho.
Além disso, aprender JS pode abrir portas para carreiras em desenvolvimento de
software, engenharia de dados, e muitas outras áreas que dependem cada vez
mais de habilidades de programação.
Como o JavaScript é usado na Web moderna?
Hoje, JavaScript não é apenas usado para adicionar interatividade às páginas
web. Ele é uma peça central na construção de aplicações web modernas.
Com frameworks como ReactJS, AngularJS, e Vue.js, os desenvolvedores podem
criar interfaces de usuário ricas e interativas. No lado do servidor, plataformas
como Node.js permitem usar JavaScript para construir servidores web rápidos e
escaláveis.
JavaScript também está presente no desenvolvimento de aplicativos móveis
(com frameworks como React Native), na criação de jogos, na programação de
servidores, e até mesmo em dispositivos IoT (Internet das Coisas).
Através deste capítulo, esperamos fornecer uma compreensão sólida das
capacidades do JS, desde suas origens humildes até seu papel indispensável na
web de hoje. Vamos mergulhar nas características que fazem desta linguagem
uma ferramenta tão poderosa e versátil na era digital.
Configuração do Ambiente de Desenvolvimento
Antes de começarmos a mergulhar no código, precisamos preparar nosso
ambiente de trabalho. Ter o ambiente de desenvolvimento configurado
corretamente é essencial para um processo de codificação eficiente e livre de
estresse. Neste capítulo, vamos orientá-lo passo a passo para configurar um
ambiente de desenvolvimento ideal para o JavaScript.
Falaremos sobre os melhores editores de texto para a codificação JavaScript,
explicando seus pontos fortes e mostrando como tirar o máximo proveito deles.
Além disso, vamos discutir a instalação e o uso de Node.js, uma ferramenta que
permite executar JS fora do navegador.
Também vamos introduzir o uso de ferramentas adicionais que podem
aumentar sua produtividade, como os sistemas de controle de versão e
extensões úteis.
Se você é um novato na codificação ou um veterano procurando otimizar seu
espaço de trabalho, este capítulo oferecerá dicas valiosas para ajudá-lo a criar
um ambiente de desenvolvimento que se adapte às suas necessidades.
Pronto para começar? Vamos configurar seu ambiente de desenvolvimento
JavaScript!
Instalando e Configurando um Editor de Texto (como o VS
Code)
Um editor de texto é uma ferramenta essencial para qualquer desenvolvedor. É
onde você irá escrever, editar, e revisar seu código. Existemmuitos editores de
texto disponíveis, mas para este guia, vamos focar no Visual Studio Code (VS
Code), uma ferramenta popular e robusta com recursos úteis para o
desenvolvimento JavaScript.
Passo 1: Instalação do Visual Studio Code
Acesse o site oficial do VS Code no endereço https://code.visualstudio.com.
Clique no botão "Download" para a versão adequada ao seu sistema operacional
(Windows, macOS ou Linux).
Depois de baixar o arquivo, execute-o e siga as instruções na tela para concluir a
instalação.
Passo 2: Familiarizando-se com o VS Code
Após a instalação, abra o VS Code. No início, você verá uma interface de usuário
limpa e organizada, dividida em várias seções:
Barra de atividades(1): Localizada no lado esquerdo da janela. Aqui, você pode
alternar entre diferentes vistas, como o explorador de arquivos, pesquisa, controle
de versão e extensões.
Editor de código(2): A área central e a mais ampla, onde você vai escrever e
editar seu código.
Painel de controle(3): Situado no lado direito, mostra detalhes e opções sobre o
arquivo ou a seleção atual.
Barra de status(4): Na parte inferior, fornece informações sobre o projeto atual e
permite que você acesse várias configurações e comandos.
https://code.visualstudio.com
Na imagem acima as áreas descritas estão determinadas, note que o editor está
diferente do seu pois há um projeto em andamento aberto.
Passo 3: Configurando o VS Code para JavaScript
O VS Code já vem com suporte para JavaScript por padrão, mas algumas
extensões podemmelhorar ainda mais sua experiência de codificação. Para
instalar uma extensão, clique no ícone de extensões na barra de atividades e
procure por estas extensões:
ESLint: Ajuda a identificar e corrigir problemas em seu código JavaScript.
Prettier: Um formatador de código que mantém seu código limpo e padronizado.
Visual Studio IntelliCode:Melhora a conclusão de código com inteligência
artificial.Para instalar, clique no botão "Install" na página da extensão. Uma vez instalada,
a extensão estará pronta para uso.
Processo de instalação das extensões.
Agora, você tem o VS Code configurado para o desenvolvimento JavaScript. Na
próxima seção, vamos falar sobre como instalar e configurar o Node.js.
Configurando o Console do Navegador
O console do navegador é uma ferramenta poderosa que permite testar e
depurar seu código JS. Aqui está um guia rápido sobre como acessar e usar o
console do navegador.
Passo 1: Acessando o Console do Navegador
Praticamente todos os navegadores modernos têm ferramentas de
desenvolvimento embutidas que incluem um console. Abaixo, estão as instruções
para abrir o console nos navegadores mais populares:
● Google Chrome: Use o atalho Ctrl+Shift+J (Windows/Linux) ou
Cmd+Option+J (Mac) ou clique com o botão direito do mouse em
qualquer lugar da página, selecione "Inspecionar" e então escolha a aba
"Console".
● Firefox: Use o atalho Ctrl+Shift+K (Windows/Linux) ou Cmd+Option+K
(Mac) ou clique com o botão direito do mouse em qualquer lugar na
página, selecione "Inspecionar Elemento" e então escolha a aba "Console".
● Safari: Primeiro, habilite o menu "Desenvolvedor" nas preferências do
Safari. Depois, use o atalho Cmd+Option+C ou vá ao menu
"Desenvolvedor" e escolha "Mostrar Console JavaScript".
Passo 2: Usando o Console do Navegador
O console do navegador é principalmente usado para:
● Logar informações: Utilize o comando console.log() para imprimir valores
e depurar seu código. Por exemplo, console.log("Olá, mundo!"); imprimirá
"Olá, mundo!" no console.
● Testar trechos de código: Você pode escrever e executar código
JavaScript diretamente no console.
● Monitorar erros: O console exibirá mensagens de erro quando algo der
errado com seu código JavaScript. Essas mensagens geralmente incluem
a natureza e a localização do erro.
Praticar e se familiarizar com o console do navegador será extremamente útil
para o seu desenvolvimento com JavaScript.
Execução de código JavaScript no console do navegador.
Executando JavaScript no Navegador
Para rodar JavaScript diretamente em seu navegador, você precisará criar um
arquivo HTML que referencia um arquivo JavaScript. Aqui está um passo a passo
de como fazer isso.
Passo 1: Crie um Arquivo HTML
Primeiro, você precisará criar um arquivo HTML básico. Abra o seu editor de texto
(VS Code, por exemplo), crie um novo arquivo e salve-o com a extensão .html
(por exemplo, index.html). Em seguida, escreva um código HTML básico. Aqui está
um exemplo:
Teste JavaScript
Olá, Mundo!
Passo 2: Crie um Arquivo JavaScript
Agora, você precisará criar um arquivo JavaScript. No mesmo diretório do seu
arquivo HTML, crie um novo arquivo e salve-o com a extensão .js (por exemplo,
main.js). Neste arquivo, escreva algum código JavaScript. Por exemplo:
console.log('Olá, Console!');
Passo 3: Conecte o Arquivo JavaScript ao HTML
Em seguida, você precisará referenciar o arquivo JavaScript em seu arquivo
HTML. Para isso, adicione uma tag com o atributo src apontando para o
arquivo JavaScript, logo antes do fechamento da tag . Aqui está como o
seu HTML ficará:
Teste JavaScript
Olá, Mundo!
Passo 4: Abra o Arquivo HTML em seu Navegador
Finalmente, abra o arquivo HTML em seu navegador. Você pode fazer isso
simplesmente navegando até o local do arquivo no seu sistema de arquivos e
dando dois cliques no arquivo HTML.
O seu ambiente de desenvolvimento deve estar desta maneira.
Passo 5: Veja o Resultado no Console
Para ver o resultado do seu código JavaScript, abra o console do navegador.
Você deve ver a mensagem 'Olá, Console!'. E pronto! Agora você sabe como
executar código JavaScript em seu navegador.
Resultado final no navegador.
Este processo deve ser repetido em todos os exemplos de código e exercícios ao
longo deste e-book. Organize os arquivos em uma pasta no seu computador
para ser de fácil acesso.
Com o tempo, você aprenderá a usar o JavaScript para manipular elementos
HTML, responder a eventos do usuário e muito mais!
Variáveis e Tipos de Dados
Ao dar os primeiros passos no mundo do JavaScript, entender como armazenar e
manipular informações dentro de seus programas. Este capítulo aborda as
variáveis e os tipos de dados, conceitos fundamentais que formam a base de
qualquer linguagem de programação. Aqui, você aprenderá a declarar variáveis
em JavaScript, entenderá os diferentes tipos de dados disponíveis e verá como
esses tipos podem ser usados e convertidos durante a execução do código.
Começaremos explorando como as variáveis são declaradas e quais regras
seguem para nomes válidos. Em seguida, detalharemos cada tipo de dado
primitivo e objeto que JavaScript suporta, fornecendo exemplos de como eles
podem ser utilizados em diferentes situações. Com este conhecimento, você
estará bem equipado para armazenar e processar dados de maneira eficiente
em seus futuros projetos de programação.
Declaração de Variáveis (let, const, var)
No JavaScript, as variáveis são contêineres para armazenar dados. A linguagem
oferece três palavras-chave para declarar variáveis: let, const e var. Cada uma
possui características e usos específicos que influenciam como você escreve e
organiza seu código.
var
var foi a primeira palavra-chave introduzida para declaração de variáveis em
JavaScript e pode ser usada para declarar uma variável de escopo de função.
Isso significa que uma variável declarada com var é acessível em toda a função
em que foi declarada, ou globalmente se declarada fora de uma função.
var nome = "Ana";
console.log(nome); // Imprime "Ana"
No entanto, o uso de var pode levar a comportamentos inesperados devido ao
seu escopo de função e hoisting (elevação), onde declarações de variáveis são
movidas para o topo de seu escopo. Por isso, seu uso tem sido desencorajado
em favor de let e const.
let
let é uma palavra-chave introduzida com o ES6 (ECMAScript 2015) e permite a
declaração de variáveis com escopo de bloco, o que significa que a variável
existe apenas dentro do bloco de código ({}) em que foi declarada.
let idade = 25;
if (idade > 18) {
let adulto = true;
console.log(adulto); // Imprime "true"
}
// console.log(adulto); // Erro: adulto não está definido
Essa palavra-chave é útil para controlar onde uma variável deve ser acessível,
aumentando a segurança e previsibilidade do código.
const
const também foi introduzida com o ES6 e é usada para declarar constantes, ou
seja, variáveis cujo valor não pode ser alterado uma vez atribuído. Assim como
let, const tem escopo de bloco.
const PI = 3.14159;
console.log(PI); // Imprime 3.14159
// PI = 3.14; // Erro: Atribuição a uma constante
Variáveis declaradas com const devem ser inicializadas no momento da
declaração. const é ideal para valores que você sabe que não precisarão ser
alterados ao longo do programa, como valores de configuração, referências a
elementos do DOM que não mudarão, e outros.
A escolha entre let, const e var depende da necessidade específica de escopo e
mutabilidade da variável. let e const são preferidos para a maioria das situações
modernas de desenvolvimento devido ao seu escopo mais restrito e previsível,
enquanto var ainda pode ser encontrado em códigos mais antigos ou quando
um escopo mais amplo é necessário.
Entender essas diferenças e aplicá-las corretamente ajudará a evitar bugs e
tornará seu código mais limpo e fácil de manter.
Tipos de Dados Básicos (String, Number, Boolean)
JavaScript é uma linguagem de programação dinâmica que suporta uma
variedade de tipos de dados. Entre os mais fundamentais e usados estão as
Strings, Numbers e Booleans. Entender esses tipos é essencial para manipular
dados de forma eficaz em qualquer programa JavaScript.
String
Uma String é uma sequência de caracteresusada para representar texto. Em
JavaScript, você pode criar strings usando aspas simples, duplas ou crases
(backticks), cada uma com suas particularidades.
let saudacao = "Olá, mundo!";
let resposta = 'Tudo bem?';
let frase = `A resposta é: ${resposta}`;
Strings em JavaScript são imutáveis, o que significa que uma vez criada, a
sequência de caracteres que ela representa não pode ser alterada. No entanto, é
possível criar novas strings a partir de operações ou métodos aplicados à string
original.
Number
O tipo Number representa tanto números inteiros quanto de ponto flutuante.
JavaScript não faz distinção entre tipos de números, simplificando a
manipulação de valores numéricos.
let inteiro = 42;
let decimal = 3.14159;
let negativo = -1;
JavaScript suporta várias operações aritméticas com números, incluindo adição,
subtração, multiplicação e divisão, além de funções matemáticas mais
complexas disponíveis através do objeto Math.
Boolean
O tipo Boolean representa uma entidade lógica e pode ter dois valores: true
(verdadeiro) e false (falso). Booleans são frequentemente usados em condições
e loops para controlar o fluxo do programa.
let maiorDeIdade = true;
if (maiorDeIdade) {
console.log("Você pode tirar carteira de motorista.");
} else {
console.log("Você ainda não pode tirar carteira de motorista.");
}
Operações Comuns
● Concatenação de Strings: Pode ser realizada com o operador + ou através
de template literals, que permitem intercalar strings com expressões.
● Conversões: JavaScript realiza conversões automáticas entre tipos em
muitos casos, mas você também pode converter explicitamente entre
strings, números e booleans usando funções como String(), Number(), e
Boolean().
Entender e utilizar adequadamente os tipos de dados básicos em JavaScript é
fundamental para o desenvolvimento de qualquer aplicação.
Strings, Numbers e Booleans formam a base sobre a qual muitas funcionalidades
de programas são construídas, desde simples operações aritméticas até o
controle complexo de fluxo e manipulação de texto.
Tipos Complexos (Object, Array)
Além dos tipos de dados básicos, JavaScript oferece tipos complexos que são
fundamentais para a construção de aplicações mais sofisticadas e estruturadas.
Os dois principais tipos complexos são os objetos e os arrays, que permitem
agrupar e organizar dados de maneiras mais complexas e úteis.
Object
Em JavaScript, um objeto é uma coleção de propriedades, onde cada
propriedade é composta por um nome (ou chave) e um valor, que pode ser um
dado de qualquer tipo, inclusive outro objeto. Os objetos são extremamente
versáteis e são usados para modelar entidades mais complexas em programas.
let pessoa = {
nome: "João",
idade: 30,
hobbies: ["futebol", "xadrez"],
endereco: {
rua: "Rua dos Alfeneiros",
numero: 4
}
};
Você pode acessar as propriedades de um objeto usando a notação de ponto (.)
ou a notação de colchetes ([]), e também pode adicionar, modificar ou deletar
propriedades dinamicamente.
Array
Um array em JavaScript é uma lista ordenada de elementos, que podem ser de
qualquer tipo. Arrays são usados para armazenar coleções de dados, e oferecem
uma série de métodos para realizar operações como inserção, remoção e
iteração sobre os elementos.
let frutas = ["Maçã", "Banana", "Laranja"];
console.log(frutas[0]); // Acessa o primeiro elemento: "Maçã"
frutas.push("Manga"); // Adiciona "Manga" ao final do array
frutas.pop(); // Remove o último elemento do array
Arrays em JavaScript são dinâmicos e podemmudar de tamanho, além de
permitirem elementos de tipos diferentes no mesmo array.
Manipulação e Uso
● Manipulação de Objetos: Além das operações básicas de adicionar,
modificar e remover propriedades, você pode utilizar funções como
Object.keys(), Object.values(), e Object.entries() para iterar sobre as
propriedades de um objeto.
● Métodos de Array: JavaScript oferece uma variedade de métodos para
manipular arrays, como map(), filter(), reduce(), entre outros, que facilitam
a realização de operações complexas de forma concisa e eficiente.
Os tipos complexos, como objetos e arrays, são essenciais para qualquer
desenvolvedor JavaScript.
Eles oferecemmeios poderosos para organizar e manipular dados de maneira
eficiente, permitindo que você construa aplicações mais robustas e flexíveis.
Compreender como esses tipos funcionam e como utilizá-los de maneira eficaz
é fundamental para avançar no desenvolvimento de software com JavaScript.
Operadores e Expressões
Continue aprendendo JavaScript comigo através do meu
curso completo, em mais de 12 horas, com diversos projetos.
À medida que você avança no aprendizado de JavaScript, é importante entender
como manipular valores por meio de operadores e como essas operações se
combinam em expressões para executar tarefas mais complexas.
Este capítulo é dedicado a explorar a variedade de operadores disponíveis em
JavaScript e como eles são usados para criar expressões que formam a lógica
dos programas.
Operadores em JavaScript são símbolos especiais ou palavras-chave que
realizam operações em um, dois, ou às vezes três operandos, e retornam um
resultado. Essas operações incluemmatemática básica, comparação de valores,
lógica booleana, atribuições e mais.
Por outro lado, uma expressão é qualquer unidade de código válida que resolve
para um valor, o que significa que quase todo código que você escreve em
JavaScript envolve trabalhar com expressões.
Ao longo deste capítulo, você aprenderá sobre os diferentes tipos de operadores
— aritméticos, de atribuição, de comparação, lógicos, e outros — e verá exemplos
práticos de como combiná-los para formar expressões úteis.
Com esse conhecimento, você estará equipado para tomar decisões de
programação mais informadas e escrever código mais conciso e eficiente.
Operadores Aritméticos, de Atribuição, Comparativos e Lógicos
Operadores são ferramentas essenciais em qualquer linguagem de
programação, e em JavaScript não é diferente. Eles permitem realizar operações
matemáticas, modificar valores, comparar variáveis e executar operações
lógicas. Vamos explorar cada tipo de operador e ver exemplos de como eles
podem ser usados em JavaScript.
https://app.horadecodar.com.br/course/curso-de-javascript-completo
Operadores Aritméticos
Os operadores aritméticos são usados para realizar operações matemáticas
comuns, como adição, subtração, multiplicação e divisão. Além desses,
JavaScript também inclui operadores para resto da divisão e exponenciação.
let soma = 10 + 5; // 15
let subtracao = 20 - 5; // 15
let multiplicacao = 4 * 3; // 12
let divisao = 10 / 2; // 5
let resto = 7 % 2; // 1
let exponenciacao = 3 ** 2; // 9
Operadores de Atribuição
Operadores de atribuição são usados para atribuir valores a variáveis. O mais
simples é o operador =, mas existem outros que combinam atribuição com
operações aritméticas, conhecidos como operadores de atribuição compostos.
let x = 10;
x += 5; // x agora é 15
x *= 2; // x agora é 30
Estes operadores simplificam a escrita de operações que atualizam o valor de
uma variável baseando-se em seu valor original.
Operadores Comparativos
Operadores comparativos avaliam dois valores e retornam um valor booleano,
true ou false. São essenciais para controlar o fluxo de decisões em scripts.
let a = 10, b = 20;
console.log(a b); // false
console.log(a == 10); // true
console.log(a != 10); // false
Além dos operadores básicos (==, !=, , =), JavaScript também oferece
operadores de igualdade estrita (===e!==`), que comparam tanto o valor
quanto o tipo de dados.
let c = "10";
console.log(c == 10); // true, compara apenas o valor
console.log(c === 10); // false, compara valor e tipo
Operadores Lógicos
Operadores lógicos são usados para combinar ou inverter valores booleanos.
São particularmente úteis em condições compostas. JavaScript define três
operadores lógicos principais: && (AND), || (OR) e ! (NOT).
let verdadeiro = true, falso = false;
console.log(verdadeiro&& falso); // false
console.log(verdadeiro || falso); // true
console.log(!verdadeiro); // false
● AND (&&): Retorna true se ambos os operandos forem verdadeiros.
● OR (||): Retorna true se pelo menos um dos operandos for verdadeiro.
● NOT (!): Inverte o valor booleano do operando.
O entendimento profundo dos operadores em JavaScript é fundamental para
manipular dados e controlar o fluxo do programa.
A capacidade de combinar esses operadores em expressões complexas permite
realizar cálculos, fazer comparações lógicas e tomar decisões com base em
condições múltiplas.
Com a prática, você se tornará mais apto a utilizar esses operadores de maneira
eficaz, melhorando a lógica e a performance de seus programas.
Expressões e Ordem de Operações
Em JavaScript, uma expressão é qualquer unidade de código que pode ser
avaliada e resulta em um valor. Expressões incluem operações simples como 1 +
2, chamadas de funções como console.log(), e mais complexas envolvendo
múltiplos operadores e variáveis.
Para usar expressões efetivamente, você precisa entender a ordem em que as
operações são realizadas, conhecida como precedência de operadores.
Entendendo Expressões
Uma expressão pode ser tão simples quanto uma única variável ou tão
complexa quanto uma série de operações aritméticas e lógicas combinadas. Por
exemplo:
let resultado = (3 + 5) * 4;
console.log(resultado); // 32
Neste exemplo, (3 + 5) * 4 é uma expressão que primeiro soma 3 e 5, e depois
multiplica o resultado por 4.
Precedência de Operadores
A ordem em que as operações são executadas em expressões complexas é
determinada pela precedência de operadores. Em JavaScript, essa ordem é
similar à matemática convencional, onde operações de multiplicação e divisão
têmmaior precedência que adição e subtração.
Aqui está uma visão geral simplificada da precedência de alguns dos
operadores mais comuns, do mais alto para o mais baixo:
1. Operadores de agrupamento ( )
2. Exponenciação **
3. Multiplicação, divisão, e resto *, /, %
4. Adição e subtração +, -
5. Operadores relacionais , >=
6. Igualdade ==, !=, ===, !==
7. AND lógico &&
8. OR lógico ||
9. Atribuição =, +=, -=, *=, /=
Utilizando Parênteses
Você pode alterar a ordem natural de processamento das operações usando
parênteses. Isso não apenas garante que as operações sejam executadas na
ordem que você deseja, mas também torna o código mais legível.
let resultado2 = 3 + (5 * 4);
console.log(resultado2); // 23
Neste caso, 5 * 4 é calculado primeiro devido aos parênteses, mesmo que a
multiplicação já tenha uma precedência mais alta que a adição.
Entender a ordem de operações em JavaScript é essencial para escrever
expressões corretas e prever seus resultados com precisão. Usar parênteses de
forma estratégica pode ajudar a clarificar o código e evitar erros de lógica
causados pela precedência inesperada de operadores.
Ao dominar expressões e a ordem em que as operações são executadas, você
ganha mais controle sobre a lógica e o fluxo de execução dos seus programas.
Estruturas de Controle
À medida que você começa a construir programas mais complexos em
JavaScript, rapidamente se torna essencial controlar o fluxo de execução do seu
código.
As estruturas de controle permitem que você direcione o comportamento do
programa com base em condições específicas, executando diferentes seções de
código conforme necessário. Este capítulo explora as principais estruturas de
controle utilizadas em JavaScript, incluindo instruções condicionais e laços de
repetição.
Você aprenderá como as decisões podem ser tomadas dentro de um programa
usando if, else e switch para escolher entre múltiplas rotas de execução.
Também veremos como realizar tarefas repetitivas com laços como for, while e
do-while, que são fundamentais para operar com arrays, processar dados e
realizar operações até que uma condição específica seja atendida.
Ao dominar essas estruturas, você aumentará significativamente a interatividade
e a complexidade dos seus programas, permitindo que eles respondam de
maneiras variadas a diferentes entradas e situações.
Com este conhecimento, você estará preparado para escrever código que não
apenas executa tarefas, mas também toma decisões e repete operações de
forma eficiente.
Instruções Condicionais (if, else, switch)
Instruções condicionais são essenciais em qualquer linguagem de programação,
permitindo que o programa tome decisões e execute diferentes seções de
código baseadas em condições específicas.
Em JavaScript, as principais estruturas condicionais são if, else e switch. Cada
uma dessas estruturas serve a propósitos distintos e pode ser escolhida com
base na necessidade específica do seu código.
if e else
A instrução if é a forma mais básica de tomada de decisão em JavaScript. Ela
executa um bloco de código se uma condição especificada é verdadeira. Se a
condição não é verdadeira, o bloco de código dentro do if é ignorado. A instrução
else, usada em conjunto com if, permite executar um bloco de código alternativo
quando a condição do if não é verdadeira.
let idade = 18;
if (idade >= 18) {
console.log("Você é maior de idade.");
} else {
console.log("Você é menor de idade.");
}
Para condições múltiplas, você pode usar else if para encadear várias
verificações:
let pontuacao = 85;
if (pontuacao >= 90) {
console.log("Excelente!");
} else if (pontuacao >= 70) {
console.log("Bom!");
} else {
console.log("Tente novamente!");
}
switch
A instrução switch oferece umamaneira de executar diferentes ações com base
emmúltiplos casos possíveis de uma variável ou expressão. É uma alternativa ao
uso de múltiplos if e else if quando você temmuitos casos a verificar. Cada case
em um switch é testado até que um corresponda, e o bloco de código
correspondente é executado.
let fruta = "maçã";
switch (fruta) {
case "banana":
console.log("Banana é amarela.");
break;
case "maçã":
console.log("Maçã é vermelha.");
break;
case "laranja":
console.log("Laranja é laranja.");
break;
default:
console.log("Fruta desconhecida.");
}
O break serve para evitar que a execução continue de um case para o outro
após um caso ter sido correspondido. A cláusula default é opcional e executada
se nenhum dos casos anteriores corresponder.
As instruções condicionais são uma ferramenta poderosa no arsenal de qualquer
desenvolvedor JavaScript. Elas permitem que você controle o fluxo do seu
programa de forma dinâmica, tomando decisões baseadas em condições
variáveis.
Entender quando e como usar if, else, e switch é fundamental para desenvolver
programas que reagem adequadamente a diferentes entradas e situações.
Laços de Repetição (for, while, do-while)
Laços de repetição, ou loops, são estruturas fundamentais em programação que
permitem repetir um bloco de código várias vezes.
Em JavaScript, os principais tipos de laços são for, while e do-while. Cada um tem
suas particularidades e usos ideais, permitindo que você escolha o mais
adequado para cada situação.
for
O laço for é um dos mais comuns e úteis para quando você sabe
antecipadamente quantas vezes o código dentro do loop deve ser executado. Ele
é frequentemente usado para iterar sobre arrays ou executar uma ação um
número específico de vezes.
for (let i = 0; iele
garante que o bloco de código seja executado pelo menos uma vez, já que a
condição é verificada após a execução do código.
let k = 0;
do {
console.log(`Número ${k}`);
k++;
} while (k acc + atual, 0);
}
console.log(soma(1, 2, 3, 4)); // Exibe 10
Retorno de Função
A palavra-chave return é usada para encerrar a execução de uma função e
enviar um valor de volta ao local onde a função foi chamada.
function multiplicar(x, y) {
return x * y;
}
let resultado = multiplicar(6, 7);
console.log(resultado); // Exibe 42
Se uma função não tem uma declaração de retorno ou se alcança o final do
corpo da função sem encontrar uma declaração de retorno, ela retorna
undefined.
Trabalhar com parâmetros e retornos é fundamental para criar funções
dinâmicas e reutilizáveis em JavaScript.
Os parâmetros permitem que as funções sejam flexíveis e adaptáveis, enquanto
os retornos permitem que as funções comuniquem resultados.
Escopo de Variáveis e Closures
Em JavaScript, o escopo de uma variável define onde ela pode ser acessada em
seu código. Além disso, closures são uma poderosa característica de JavaScript
que permite a uma função lembrar e acessar seu escopo lexical, mesmo quando
está sendo executada fora de seu escopo lexical original. Esta seção explora
esses dois conceitos interligados, que são fundamentais para entender como o
JavaScript gerencia a visibilidade e o tempo de vida das variáveis.
Escopo de Variáveis
O escopo de uma variável pode ser global, local (ou de função), e, a partir do ES6,
de bloco:
● Global: Variáveis definidas fora de qualquer função ou bloco têm escopo
global, o que significa que podem ser acessadas em qualquer lugar do
seu código.
● Local (Função): Variáveis definidas dentro de uma função têm escopo
local àquela função, o que significa que só podem ser acessadas dentro
daquela função.
● Bloco: Variáveis definidas com let ou const dentro de blocos (por exemplo,
dentro de um if ou loop for) têm escopo de bloco, o que significa que só
podem ser acessadas dentro daquele bloco específico.
let x = 10; // Variável de escopo global
function testar() {
let y = 5; // Variável de escopo local à função
if (y > 0) {
let z = 2; // Variável de escopo de bloco
console.log(x, y, z); // Acesso às três variáveis
}
// console.log(z); // Erro: z não é acessível aqui
}
testar();
// console.log(y); // Erro: y não é acessível aqui
Closures
Um closure ocorre quando uma função é capaz de "lembrar" e acessar seu
escopo lexical, mesmo quando está sendo executada fora do seu escopo de
definição. Isso é possível porque as funções em JavaScript formam um "closure"
(fechamento)sobre o escopo em que são criadas.
function criarContador() {
let contador = 0;
return function() {
contador += 1;
return contador;
};
}
const meuContador = criarContador();
console.log(meuContador()); // 1
console.log(meuContador()); // 2
Neste exemplo, a função interna retornada por criarContador mantém acesso à
variável contador do escopo de criarContador, mesmo após criarContador ter
terminado de executar. Isso demonstra como closures podem ser utilizadas para
encapsular e manter o estado entre chamadas de função.
Entender o escopo de variáveis e o conceito de closures é importante para
programação eficaz em JavaScript.
O escopo determina a visibilidade das variáveis, enquanto closures permitem
técnicas poderosas como fábricas de funções e módulos privados.
Dominar esses conceitos permite desenvolver programas mais seguros,
confiáveis e commelhor gerenciamento de memória.
Trabalhando com Objetos
Conheça também o nosso curso com mais de 20 projetos
de HTML, CSS e JavaScript, para criar o seu portfólio.
Objetos são uma das estruturas de dados fundamentais em JavaScript,
essenciais para entender e aplicar a programação orientada a objetos na
linguagem.
https://app.horadecodar.com.br/course/curso-projetos-de-javascript/true
https://app.horadecodar.com.br/course/curso-projetos-de-javascript/true
Este capítulo abordará os conceitos básicos e avançados de como
trabalhar com objetos em JavaScript, desde a criação e manipulação até
o uso de técnicas mais sofisticadas como herança e encapsulamento.
JavaScript é uma linguagem baseada em protótipos, o que significa que
objetos podem herdar propriedades e métodos de outros objetos. Isso
oferece umamaneira flexível de criar "classes" de objetos sem a
necessidade de usar classes tradicionais como em outras linguagens de
programação.
Neste capítulo, você aprenderá como criar objetos literais, acessar e
modificar suas propriedades, e explorar funções construtoras e protótipos
para criar objetos que compartilham comportamentos.
Além disso, você entenderá como os objetos em JavaScript podem ser
usados para organizar e estruturar seu código de maneiras que facilitam
tanto a manutenção quanto a expansão dos seus projetos. Vamos nos
aprofundar nos métodos de objetos que JavaScript oferece, como
Object.assign(), Object.keys(), e mais, para manipulação eficaz de objetos.
Ao dominar o trabalho com objetos, você será capaz de desenvolver
aplicações mais robustas e interativas, utilizando um dos pilares mais
importantes da programação em JavaScript.
Criação eManipulação deObjetos
Objetos em JavaScript são coleções dinâmicas de propriedades, com
chaves que são strings ou símbolos, e valores que podem ser qualquer
tipo de dado. Eles são uma das ferramentas mais poderosas e versáteis à
disposição dos desenvolvedores.
Nesta seção, vamos explorar como criar e manipular objetos, desde a
definição básica até a alteração de suas propriedades.
Criação deObjetos
A forma mais simples de criar um objeto em JavaScript é usando a
notação de objeto literal, que é simplesmente um conjunto de pares
chave-valor dentro de chaves {}.
let pessoa = {
nome: "João",
idade: 30
};
Neste exemplo, pessoa é um objeto com duas propriedades: nome e idade.
Acessando Propriedades
Você pode acessar as propriedades de um objeto de duas maneiras:
usando a notação de ponto ou a notação de colchetes.
console.log(pessoa.nome); // Saída: João
console.log(pessoa['idade']); // Saída: 30
ModificandoObjetos
Você pode adicionar novas propriedades ou modificar as existentes da
mesma forma que acessa as propriedades:
pessoa.profissao = "Engenheiro";
pessoa['idade'] = 31;
Agora, o objeto pessoa tem uma nova propriedade profissao e a idade foi
atualizada.
Deletando Propriedades
Para remover uma propriedade de um objeto, você pode usar o operador
delete.
delete pessoa.profissao;
Após esta operação, a propriedade profissao não existe mais no objeto
pessoa.
Métodos emObjetos
Os objetos também podem conter funções, conhecidas como métodos do
objeto. Esses métodos são definidos da mesmamaneira que outras
propriedades, mas seus valores são funções.
pessoa.saudacao = function() {
console.log(`Olá, meu nome é ${this.nome} e eu tenho ${this.idade}
anos.`);
};
pessoa.saudacao(); // Saída: Olá, meu nome é João e eu tenho 31 anos.
A criação e manipulação de objetos são essenciais para programação
em JavaScript.
Eles permitem que você organize seus dados e funcionalidades de forma
clara e lógica, facilitando a criação de aplicativos complexos e interativos.
Aprender a trabalhar eficientemente com objetos abre um vasto leque de
possibilidades na construção de suas aplicações.
Métodos deObjeto, this e Protótipos
Os objetos em JavaScript não apenas armazenam dados — eles também
encapsulam comportamentos. Nesta seção, discutiremos como definir e
usar métodos de objeto, a importância da palavra-chave this dentro de
métodos, e como a herança funciona através de protótipos.
Métodos deObjeto
Métodos são funções associadas a objetos. Eles são definidos da mesma
maneira que outras propriedades de objetos, exceto que seus valores são
funções.
let pessoa = {
nome: "Ana",
saudacao: function() {
console.log(`Olá, meu nome é ${this.nome}!`);
}
};
pessoa.saudacao(); // Saída: Olá, meu nome é Ana!
Uso de this
Dentro de ummétodo, this refere-se ao objeto que o chamou. É uma
referência ao contexto atual do objeto e é extremamente útil para acessar
outras propriedades e métodos do mesmo objeto.
let pessoa = {
nome: "Carlos",
idade: 25,
detalhes: function() {
console.log(`Nome: ${this.nome}, Idade: ${this.idade}`);
}
};
pessoa.detalhes(); // Saída: Nome: Carlos, Idade: 25
Protótipos
Todo objeto em JavaScript possui um protótipo, um outro objeto que ele
herda métodos e propriedades de. A herança de protótipos é um conceito
fundamental que permite que objetos compartilhemmétodos, reduzindo
redundância.
function Pessoa(nome) {
this.nome = nome;
}
Pessoa.prototype.saudacao = function() {
console.log(`Olá, meu nome é ${this.nome}!`);
};
let pessoa1 = new Pessoa("Marta");
pessoa1.saudacao(); // Saída: Olá, meu nome é Marta!
Neste exemplo, Pessoa é uma função construtora, e saudacao é ummétodo
definido no protótipo de Pessoa.
Todos os objetos criados usando new Pessoa() herdarão o método
saudacao.
Uso de Object.create()
Object.create() é uma forma de criar objetos diretamente com um protótipo
específico.
let protoPessoa = {
saudacao: function() {
console.log(`Olá! Meu nome é ${this.nome}`);
}
};
let pessoa2 = Object.create(protoPessoa);
pessoa2.nome = "Roberto";
pessoa2.saudacao(); // Saída: Olá! Meu nome é Roberto
Este método permite especificar um protótipo para o novo objeto sem a
necessidade de uma função construtora.
A compreensão de métodos de objeto, o uso correto da palavra-chave
this e o entendimento de como funcionam os protótipos são importantes
para dominar o JS.
Esses conceitos permitem não apenas estruturar códigos de forma
eficiente mas também reaproveitar funcionalidades, facilitando a
manutenção e expansão dos seus projetos.
Arrays e suas Operações
Arrays são estruturas de dados essenciais em qualquer linguagem de
programação, incluindo JavaScript, onde são usados para armazenar
coleções ordenadas de itens. Neste capítulo, vamos explorar em
profundidade os arrays em JS, abordando desde a criação e manipulação
básica até métodos avançados para operações complexas.
Arrays em JavaScript são particularmente poderosos porque são
dinâmicos e podem conter elementos de diferentes tipos de dados, como
números, strings e até outros arrays.
Além disso, o JS oferece uma vasta biblioteca de métodos embutidos
para facilitar a manipulação de arrays, permitindo que desenvolvedores
realizem tarefas complexas de maneira eficiente e concisa.
Você aprenderá como inicializar arrays, acessar e modificar seus
elementos, e utilizar métodos como map, filter, reduce e muitos outros para
realizar operações como busca, transformação, ordenação e agregaçãode dados.
Também discutiremos como arrays podem ser utilizados para representar
estruturas de dados mais complexas, como matrizes ou listas ligadas.
Ao dominar o trabalho com arrays, você será capaz de lidar com coleções
de dados de maneira eficaz, melhorando significativamente a
capacidade de manipulação de dados em seus programas JavaScript.
Métodos paraManipulação de Arrays
JavaScript fornece uma gama de métodos poderosos para manipular
arrays, que podem facilitar significativamente o processamento e
transformação de coleções de dados. Nesta seção, exploraremos alguns
dos métodos mais utilizados: map, filter, reduce, entre outros, detalhando
como cada um funciona e quando utilizá-los.
Métodomap
Ométodo map cria um novo array com os resultados da chamada de
uma função para cada elemento do array original. É frequentemente
usado para transformar dados.
let numeros = [1, 2, 3, 4];
let quadrados = numeros.map(num => num * num);
console.log(quadrados); // Saída: [1, 4, 9, 16]
Método filter
Ométodo filter cria um novo array com todos os elementos que passam
no teste implementado por uma função fornecida. É ideal para selecionar
um subconjunto de elementos baseados em uma condição.
let numeros = [1, 2, 3, 4, 5];
let pares = numeros.filter(num => num % 2 === 0);
console.log(pares); // Saída: [2, 4]
Método reduce
Ométodo reduce executa uma função redutora em cada elemento do
array, resultando em um único valor de saída. É extremamente útil para
somar elementos ou combinar dados em uma única estrutura.
let numeros = [1, 2, 3, 4];
let soma = numeros.reduce((acumulador, atual) => acumulador +
atual, 0);
console.log(soma); // Saída: 10
OutrosMétodos Úteis
forEach: Executa uma função em cada item de um array, sem criar um
novo array.
numeros.forEach(num => console.log(num));
some e every: Testam se algum ou todos os elementos em um array
passam em um teste especificado em uma função.
let temImpares = numeros.some(num => num % 2 !== 0);
let todosPositivos = numeros.every(num => num > 0);
find e findIndex: Retornam o primeiro elemento ou índice do elemento que
satisfaz a uma condição.
let primeiroPar = numeros.find(num => num % 2 === 0);
let indiceDoPrimeiroPar = numeros.findIndex(num => num % 2 === 0);
sort e reverse: Ordenam ou invertem os elementos de um array.
let numerosOrdenados = numeros.sort((a, b) => a - b);
let numerosInvertidos = numeros.reverse();
Iteração sobre Arrays
A iteração sobre arrays é uma tarefa comum em programação
JavaScript, usada para acessar, modificar ou aplicar lógica a cada
elemento de um array.
JavaScript fornece várias maneiras de iterar sobre arrays, cada uma
adequada para diferentes situações e necessidades.
Nesta seção, vamos explorar algumas dessas técnicas de iteração,
incluindo loops tradicionais e métodos de array específicos.
Loop for
O loop for é uma das maneiras mais diretas de iterar sobre cada elemento
de um array. É simples e permite controle total sobre o índice.
let frutas = ['maçã', 'banana', 'pera'];
for (let i = 0; i console.log(fruta));
Manipulação do DOM
O Document Object Model (DOM) é uma representação estruturada de
documentos HTML e XML como uma árvore de objetos, permitindo que
linguagens de programação, como JavaScript, interajam e modifiquem o
conteúdo, estrutura e estilo da página de forma dinâmica.
Neste capítulo, vamos explorar como JavaScript pode ser usado para
manipular o DOM, permitindo criar aplicações web interativas e
dinâmicas.
A manipulação do DOM é fundamental para desenvolvimento front-end,
pois é através dela que scripts interagem com a apresentação da página
e respondem a eventos do usuário.
Desde simples alterações de texto até a criação dinâmica de elementos
HTML complexos e a aplicação de estilos, o DOM oferece uma interface
poderosa para transformar páginas estáticas em experiências ricas e
responsivas.
Você aprenderá sobre os métodos fundamentais de acesso e
modificação dos elementos do DOM, como selecionar elementos,
adicionar ou remover elementos, modificar atributos e ouvir eventos.
Também discutiremos práticas recomendadas para garantir que suas
interações com o DOM sejam eficientes e eficazes, evitando problemas de
desempenho comuns em aplicações web.
Seleção eManipulação de Elementos
A seleção e manipulação de elementos são as operações mais comuns
na programação do DOM com JavaScript.
Nesta seção, exploraremos como você pode usar JavaScript para
selecionar elementos HTML e manipulá-los, mudando seu conteúdo, estilo
e até sua posição na árvore do DOM. Acompanhados de exemplos
práticos, estes conceitos formarão a base para interações dinâmicas em
suas páginas web.
Seleção de Elementos
Para manipular um elemento do DOM, primeiro você precisa selecioná-lo.
JavaScript oferece várias maneiras de fazer isso:
● document.getElementById(): Seleciona um elemento pelo seu ID.
● document.querySelector(): Seleciona o primeiro elemento que
corresponde a um seletor CSS específico.
● document.querySelectorAll(): Retorna todos os elementos que
correspondem a um seletor CSS específico.
Exemplo HTML:
Seleção de Elementos
Hello, world!
Mensagem 1
Mensagem 2
Clique-me
Exemplo JavaScript:
// Selecionando por ID
const conteudo = document.getElementById('conteudo');
console.log(conteudo.textContent); // Saída: Hello, world!
// Selecionando o primeiro elemento com a classe 'mensagem'
const primeiraMensagem = document.querySelector('.mensagem');
console.log(primeiraMensagem.textContent); // Saída: Mensagem 1
// Selecionando todos os elementos com a classe 'mensagem'
const todasMensagens = document.querySelectorAll('.mensagem');
todasMensagens.forEach(mensagem =>
console.log(mensagem.textContent)); // Saída: Mensagem 1, Mensagem
2
Manipulação de Elementos
Depois de selecionar os elementos, você pode manipulá-los de várias
maneiras:
● Modificar conteúdo: Utilize textContent para alterar o texto de um
elemento ou innerHTML para alterar o HTML interno.
● Alterar atributos: Use setAttribute para modificar atributos existentes
ou adicionar novos.
● Mudar estilo: Acesse e modifique propriedades CSS através do
objeto style.
Exemplo JavaScript:
// Modificando o conteúdo de um elemento
conteudo.textContent = 'Novo conteúdo!';
// Alterando um atributo
conteudo.setAttribute('class', 'nova-classe');
// Mudando estilo
conteudo.style.color = 'red';
conteudo.style.backgroundColor = 'yellow';
// Adicionando um evento
document.getElementById('botao').addEventListener('click', () => {
conteudo.style.display = 'none'; // Esconde o elemento
'conteudo' quando o botão é clicado
});
Eventos eManipuladores de Eventos
Os eventos são ações ou ocorrências que acontecem nos sistemas que
você está controlando, e o JavaScript permite que você reaja a esses
eventos com algo chamado manipuladores de eventos.
Nesta seção, vamos explorar como você pode utilizar eventos e
manipuladores de eventos para criar páginas web interativas que
respondem a ações dos usuários, como cliques, movimentos do mouse,
pressionamento de teclas, entre outros.
Exemplo de HTML
Vamos começar com um exemplo de HTML básico que incluirá um botão
para demonstração:
name="viewport" content="width=device-width,
initial-scale=1.0">
Eventos em JavaScript
Clique-me!
AdicionandoManipuladores de Eventos
Existem várias maneiras de adicionar manipuladores de eventos em
JavaScript:
Inline HTML event attributes (não recomendado por razões de segurança e
separação de responsabilidades):
Clique-me!
Usando propriedades do DOM:
const button = document.getElementById('clickMeButton');
button.onclick = function() {
alert('Você clicou no botão!');
};
Adicionando ouvintes de eventos (método preferido por ser mais flexível):
const inputField = document.getElementById('inputField');
inputField.addEventListener('focus', function() {
console.log('Input está em foco!');
});
inputField.addEventListener('blur', function() {
console.log('Input perdeu o foco!');
});
Tipos de Eventos Comuns
● Eventos de mouse: como click, dblclick, mouseover, mouseout.
● Eventos de teclado: como keydown, keyup.
● Eventos de formulário: como submit, change, focus, blur.
Exemplo deManipulação de Eventos
// Evento de clique no botão
document.getElementById('clickMeButton').addEventListener('click',
function() {
console.log('Botão foi clicado!');
});
// Evento de entrada de teclado
document.getElementById('inputField').addEventListener('keyup',
function(event) {
console.log('Usuário digitou: ' + event.key);
if (event.key === 'Enter') {
console.log('Usuário pressionou Enter!');
}
});
Eventos e manipuladores de eventos são fundamentais para interações
dinâmicas em aplicações web. Com eles, você pode capturar e responder
a qualquer ação do usuário, permitindo a criação de interfaces dinâmicas.
JavaScript Assíncrono
JavaScript é uma linguagem de programação amplamente utilizada para
criar interações dinâmicas em páginas web. No entanto, sua capacidade
de executar operações assíncronas é o que realmente amplia seu poder e
flexibilidade em ambientes de desenvolvimento modernos. Neste capítulo,
exploraremos o conceito de JavaScript assíncrono, fundamental para
entender como lidar com operações que levam tempo para serem
concluídas, como solicitações de rede, sem bloquear a execução do
código principal.
O JavaScript é tradicionalmente uma linguagem de programação de
thread única, utilizando ummodelo de concorrência baseado em um loop
de eventos.
Isso significa que operações como acesso a dados de uma API, leitura de
arquivos ou qualquer tarefa que requeira espera podem atrasar todo o
processo se não forem gerenciadas corretamente.
Para superar isso, JavaScript oferece várias abordagens para realizar
tarefas assíncronas, como callbacks, promessas (Promises) e
async/await, permitindo que o código continue a ser executado enquanto
espera que essas operações sejam concluídas.
Neste capítulo, você aprenderá sobre:
● Callbacks: A forma mais básica de gerenciar a asincronia, onde
funções são passadas como argumentos para outras funções e são
executadas após a conclusão de uma tarefa.
● Promessas (Promises): Abstrações que representam um valor que
pode estar disponível agora, no futuro ou nunca, proporcionando
umamaneira mais robusta e legível de lidar com operações
assíncronas.
● Async/Await: Uma abordagemmais recente que simplifica o
trabalho com promessas, permitindo escrever código assíncrono de
uma forma que é tão fácil de entender e depurar quanto o código
síncrono.
Ao dominar essas técnicas, você estará equipado para construir
aplicações web que são rápidas, responsivas e capazes de lidar com uma
variedade de operações de entrada/saída sem sacrificar a experiência do
usuário.
Callbacks, Promises e Async/Await
No universo do JavaScript assíncrono, existem três principais formas de
lidar com operações que não retornam resultados imediatamente, como
solicitações de rede, leitura de arquivos, entre outras: utilizando Callbacks,
Promises e a sintaxe Async/Await.
Cada uma dessas abordagens tem suas particularidades, vantagens e
desvantagens, e entender como e quando usá-las é fundamental para
qualquer desenvolvedor JavaScript.
Callbacks
Um callback é uma função passada como argumento para outra função,
que é então chamada ("call back") quando uma determinada tarefa é
concluída. Esta é a forma mais antiga e direta de lidar com operações
assíncronas em JavaScript, mas pode levar ao problema conhecido como
"callback hell", onde múltiplos níveis de callbacks aninhados tornam o
código difícil de ler e manter.
Exemplo de Callback:
function buscarDados(url, callback) {
setTimeout(() => { // Simula uma solicitação de rede
console.log(`Buscando dados de: ${url}`);
callback('Dados recebidos!');
}, 2000);
}
buscarDados("http://exemplo.com", function(resultado) {
console.log(resultado);
});
Promises
Uma Promise é um objeto que representa a eventual conclusão ou falha
de uma operação assíncrona. As Promises permitem que você associe
handlers com o sucesso da operação ou o motivo de sua falha, tornando
seu código mais modular e legível. Elas evitam o callback hell e são a base
para a sintaxe mais moderna de Async/Await.
Exemplo de Promise:
function buscarDados(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`Buscando dados de: ${url}`);
resolve('Dados recebidos!');
}, 2000);
});
}
buscarDados("http://exemplo.com")
.then(dados => console.log(dados))
.catch(erro => console.log(erro));
Async/Await
Async/Await é uma adição mais recente ao JavaScript que simplifica o
trabalho com Promises, permitindo que você escreva código assíncrono
que se parece muito com código síncrono tradicional.
Uma função declarada como async sempre retorna uma Promise, e o
operador await pode ser usado para pausar a execução da função async
até que a Promise seja resolvida ou rejeitada.
Exemplo de Async/Await:
async function obterDados(url) {
try {
console.log(`Iniciando a busca por dados de: ${url}`);
const dados = await buscarDados(url); // espera a Promise
ser resolvida
console.log(dados);
} catch (erro) {
console.error(`Erro ao buscar dados: ${erro}`);
}
}
obterDados("http://exemplo.com");
Fazendo Requisições de Rede com Fetch API
A Fetch API é uma ferramenta moderna no JavaScript para realizar requisições
de rede, oferecendo uma alternativa mais poderosa e flexível ao antigo
XMLHttpRequest. Ela é amplamente suportada nos navegadores modernos e
facilita a comunicação com APIs de forma assíncrona. Nesta seção, vamos
explorar como usar a Fetch API para interagir com a API "JSONPlaceholder", um
serviço online gratuito que fornece dados de exemplo para testes e
prototipagem.
Solicitação GET com Fetch
Uma solicitação GET é usada para recuperar dados de um recurso específico.
No exemplo a seguir, usaremos a Fetch API para obter postagens de exemplo do
"JSONPlaceholder", uma prática comum para testar a funcionalidade de
solicitações de rede em aplicações web:
Exemplo de HTML:
Exemplo de Fetch API
Buscar Dados
Exemplo de JavaScript (app.js):
document.getElementById('botaoBuscarDados').addEventListener('clic
k', function() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(resposta => {
if (!resposta.ok) {
throw new Error('Falha na resposta da rede');
}
return resposta.json();
})
.then(dados => {
document.getElementById('resultado').textContent =
JSON.stringify(dados, null, 2);
})
.catch(erro => {
console.error('Houve um problema com a operação fetch:',
erro);
});
});
Solicitação POST com Fetch
Uma solicitação POST é utilizada para enviar dados para serem processados por
um servidor. Abaixo, demonstraremoscomo enviar dados para a API do
"JSONPlaceholder" para criar uma nova postagem:
Exemplo de JavaScript para POST:
const dadosPost = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'Novo Título',
body: 'Corpo da nova postagem',
userId: 1
})
};
fetch('https://jsonplaceholder.typicode.com/posts', dadosPost)
.then(resposta => {
if (!resposta.ok) {
throw new Error('Falha na resposta da rede');
}
return resposta.json();
})
.then(dados => {
console.log('Post criado com sucesso:', dados);
})
.catch(erro => {
console.error('Erro:', erro);
});
Tratando Respostas
Ao utilizar a Fetch API, é importante tratar as respostas corretamente. A promessa
retornada por fetch() não será rejeitada com um status de erro HTTP (como 404
ou 500), mesmo que a resposta seja um erro HTTP.
Você deve sempre verificar se a resposta foi bem-sucedida com resposta.ok
antes de processar o corpo da resposta.
Conclusão e próximos passos
Chegamos ao fim deste material, e espero que ele tenha engrandecido muito
você! É difícil quem chega no final de um curso ou um livro, você está de
parabéns e um passo mais próximo do seu objetivo =)
Se você quiser continuar aprendendo HTML e CSS comigo, além de outras
tecnologias, acesse nossa plataforma de cursos:
https://app.horadecodar.com.br/
Lembrando também que temos um curso completo de JavaScript, com
certificado de conclusão, suporte para te ajudar, acesso vitalício. Commais de 10
horas de conteúdos, contendo teoria, exercícios e projetos.
E se você prefere cursos e conteúdos gratuitos, te convido a conhecer o meu
canal de YouTube, posto vídeos todas as semanas.
Um abraço, e te espero em um próximo material!
https://app.horadecodar.com.br/
https://app.horadecodar.com.br/course/curso-de-javascript-completo
https://www.youtube.com/channel/UCDoFiMhpOnLFq1uG4RL4xag
https://www.youtube.com/channel/UCDoFiMhpOnLFq1uG4RL4xag
Matheus.