Curso completo de

Javascript
Aprenda tudo sobre Javascript
Iniciar
Visão geral

Este curso abrange todos os aspectos do Javascript, desde os conceitos

básicos até as funcionalidades avançadas e frameworks populares. Aprenda a
criar aplicações web interativas e dinâmicas com esta linguagem de
programação poderosa.
Introdução ao JavaScript

01 Introdução ao JavaScript

O que é JavaScript?

JavaScript é uma linguagem de programação de alto nível, interpretada, de

script, desenvolvida para tornar as páginas web interativas. É uma das
principais tecnologias utilizadas no desenvolvimento de aplicações web
modernas. Com o JavaScript, é possível adicionar recursos dinâmicos e
interativos aos sites, como validação de formulários, animações, manipulação
de elementos HTML, acesso a APIs externas e muito mais.
História do JavaScript

O JavaScript foi criado por Brendan Eich no ano de 1995, quando trabalhava na
Netscape Communications Corporation. Inicialmente chamada de LiveScript, a
linguagem foi renomeada para JavaScript para aproveitar a popularidade da
linguagem Java na época. Desde então, o JavaScript tem evoluído e se tornou
uma das bases da web moderna.
Características do JavaScript
O JavaScript possui características que o tornam uma linguagem atraente para
o desenvolvimento web:
1. Fácil de aprender: O JavaScript possui uma sintaxe simples e é relativamente fácil de
aprender, principalmente se você já tiver conhecimento em outras linguagens de
programação.
2. Flexível: O JavaScript pode ser utilizado tanto do lado do cliente (no navegador web)
quanto do lado do servidor, graças ao Node.js. Isso permite que você desenvolva
aplicações web completas, desde a interface do usuário até a lógica de negócio.
3. Amplamente suportado: Todos os navegadores modernos suportam JavaScript,
tornando-o uma escolha confidente para o desenvolvimento web.
4. Rica biblioteca de terceiros: Existe uma vasta biblioteca de terceiros chamada de
"Biblioteca JavaScript", que fornece recursos prontos para uso, reduzindo o tempo de
desenvolvimento.

Aplicações do JavaScript

O JavaScript é uma linguagem versátil e amplamente utilizada em diversos

cenários de desenvolvimento web:
1. Desenvolvimento de sites interativos: Com o JavaScript, é possível criar páginas web
que respondam a interações do usuário, como botões que exibem informações
adicionais ao serem clicados ou animações que ocorrem ao rolar a página.
2. Desenvolvimento de aplicações web: O JavaScript é a base para o desenvolvimento
de aplicações web complexas, que podem executar tarefas avançadas no navegador
do usuário sem a necessidade de recarregar a página.
3. Integração com APIs externas: O JavaScript permite acessar e consumir APIs
externas, como redes sociais, serviços de mapas e bancos de dados, para obter
dados em tempo real e fornecer uma experiência mais rica aos usuários.
4. Desenvolvimento de jogos: Com bibliotecas como o Phaser, é possível criar jogos
completos que rodam diretamente no navegador, sem a necessidade de instalar
 software adicional.

Conclusão - Introdução ao JavaScript

O Curso completo de Javascript abrange os principais
aspectos da linguagem Javascript, desde os conceitos
básicos até tópicos mais avançados. Durante o curso, os
alunos aprenderão sobre a introdução ao JavaScript, onde
serão introduzidos aos fundamentos da linguagem. Além
disso, explorarão a manipulação do DOM, que permitirá a
interação com os elementos de uma página web. Por fim,
serão apresentados à programação assíncrona, uma
técnica muito utilizada para melhorar a performance de
aplicações. Com isso, os alunos estarão preparados para
desenvolver suas próprias aplicações web utilizando
Javascript.
Manipulação do DOM

02 Manipulação do DOM

Introdução

A Manipulação do DOM (Document Object Model) é uma técnica essencial para

desenvolvedores JavaScript que desejam interagir dinamicamente com o
conteúdo de uma página HTML. O DOM é uma representação em árvore da
estrutura do documento HTML, permitindo que os elementos da página sejam
acessados, modificados e adicionados através do JavaScript.
Selecionando elementos

Para manipular o conteúdo de uma página, primeiro precisamos selecionar os

elementos HTML que desejamos alterar. O JavaScript oferece várias maneiras
de selecionar elementos do DOM, como:
getElementById: permite selecionar um elemento através do seu atributo id.
getElementsByClassName: seleciona todos os elementos que possuem a mesma
classe.
getElementsByTagName: seleciona todos os elementos com a mesma tag HTML.
 querySelector: permite selecionar elementos usando seletores CSS.
querySelectorAll: seleciona todos os elementos que correspondem a um seletor CSS.
Acessando e modificando propriedades

Uma vez que temos acesso aos elementos que queremos manipular, podemos
acessar e modificar suas propriedades. Alguns exemplos de propriedades que
podemos manipular incluem:
innerHTML: permite obter ou definir o conteúdo HTML de um elemento.
textContent: permite obter ou definir apenas o texto dentro de um elemento,
ignorando as tags HTML.
setAttribute: permite definir um atributo personalizado em um elemento.
style: permite modificar atributos de estilo CSS, como cor de fundo, tamanho da fonte,
margem, entre outros.

Manipulando classes e estilos

Além de acessar propriedades individuais, também podemos manipular classes

e estilos dos elementos. Isso permite que alteremos a aparência e o
comportamento dos elementos da página de forma dinâmica. Algumas das
técnicas mais comuns para manipular classes e estilos incluem:
classList: uma propriedade que fornece métodos para adicionar, remover ou alternar
classes em um elemento.
style: como mencionado anteriormente, essa propriedade permite modificar atributos
de estilo CSS diretamente em um elemento.
Adicionando e removendo elementos

Além de manipular o conteúdo existente, também podemos adicionar e remover

elementos do DOM. Isso é útil quando queremos criar novos elementos ou
alterar a estrutura da página. Alguns métodos comumente usados para
adicionar e remover elementos são:
createElement: cria um novo elemento HTML.
appendChild: adiciona um novo elemento como filho de outro elemento.
removeChild: remove um elemento filho de seu pai.
Eventos e interatividade

Outro aspecto importante da manipulação do DOM é tornar a página interativa,

ou seja, responder a eventos gerados pelos usuários, como cliques, teclas
pressionadas ou movimento do mouse. Podemos fazer isso adicionando
manipuladores de eventos aos elementos usando métodos como:
addEventListener: registra um manipulador de eventos para um determinado evento
em um elemento.
removeEventListener: remove um manipulador de eventos previamente registrado.
 Conclusão - Manipulação do DOM
A introdução ao JavaScript é uma parte fundamental do
curso completo de Javascript. Durante essa etapa, os
alunos exploram os conceitos básicos da linguagem, como
variáveis, operadores e estruturas de controle. Aprenderão
também sobre funções e objetos, fundamentais para a
criação de aplicações. Com esses conhecimentos, os
alunos estarão prontos para avançar para os tópicos mais
complexos, como a manipulação do DOM e a programação
assíncrona.
Programação Assíncrona

03 Programação Assíncrona

Programação Assíncrona

A programação assíncrona é uma abordagem fundamental na programação

moderna, permitindo que tarefas demoradas sejam executadas em segundo
plano sem bloquear a execução principal do programa. Essa técnica é
especialmente útil em linguagens de programação como JavaScript, que é
executada em ambientes web e precisa lidar com operações de entrada/saída
(I/O) intensivas.
Introdução à Programação Assíncrona

Na programação síncrona, as tarefas são executadas em uma ordem específica,

onde cada tarefa precisa ser concluída antes que a próxima possa começar.
Isso pode levar a um desperdício de tempo considerável, principalmente
quando a execução de uma tarefa bloqueante é necessária, como fazer uma
chamada de rede ou acessar um banco de dados.
Por outro lado, a programação assíncrona foi projetada para resolver esses
problemas, permitindo que tarefas sejam executadas simultaneamente, sem
esperar que uma esteja concluída antes que outra comece. Isso resulta em uma
execução mais eficiente e rápida do programa, pois a CPU não fica ociosa
esperando tarefas bloqueantes.
Callbacks e Promises

Duas técnicas amplamente utilizadas na programação assíncrona em JavaScript

são callbacks e promises. Callbacks são funções passadas como parâmetros
para outras funções, que serão chamadas em algum momento no futuro,
geralmente quando uma tarefa assíncrona é concluída. Essa abordagem pode
levar a um aninhamento excessivo de callbacks, o que é conhecido como
"callback hell".
Para resolver esse problema de legibilidade e organizar melhor o código, as
Promises foram introduzidas no JavaScript ES6. Uma Promise é um objeto que
representa a conclusão (ou falha) de uma operação assíncrona e permite o
encadeamento de chamadas em sequência, facilitando o controle do fluxo
assíncrono de maneira mais legível.
Async/await

O JavaScript ES8 introduziu uma nova sintaxe chamada async/await, que

simplifica ainda mais a programação assíncrona. Com o async/await, é possível
escrever código assíncrono como se fosse síncrono, melhorando drasticamente
a legibilidade e evitando o aninhamento excessivo de callbacks ou o
encadeamento excessivo de promises.
Ao usar a palavra-chave "async" antes de uma função, ela se torna uma função
assíncrona, permitindo usar a palavra-chave "await" antes de uma chamada
assíncrona para aguardar sua conclusão. Isso torna o código mais limpo e fácil
de entender, mantendo o benefício de uma execução simultânea e não
bloqueante.
Conclusão

A programação assíncrona é uma técnica essencial na programação moderna,

permitindo que tarefas demoradas sejam executadas em segundo plano,
melhorando a eficiência e a capacidade de resposta do programa. Com o uso
de callbacks, promises e a sintaxe async/await, os desenvolvedores têm à
disposição diversas ferramentas para lidar com operações assíncronas de
maneira eficaz em JavaScript.
A compreensão do conceito de programação assíncrona é crucial para
enfrentar desafios modernos de desenvolvimento de software e garantir que
aplicativos sejam executados de forma otimizada e responsiva, especialmente
em ambientes web onde a I/O intensiva é comum.
 Conclusão - Programação Assíncrona
A manipulação do DOM é um dos tópicos mais importantes
do curso completo de Javascript. Durante essa etapa, os
alunos aprendem a interagir com os elementos de uma
página web, alterando seu conteúdo, estilos e
comportamentos. Através de exercícios práticos, eles
desenvolvem habilidades na manipulação do DOM, como a
criação e remoção de elementos, a alteração de atributos e
a manipulação de eventos. Com essa habilidade, os alunos
serão capazes de criar interfaces interativas e dinâmicas
em suas aplicações web.
Exercícios Práticos
Vamos colocar os seus conhecimentos em prática

04 Exercícios Práticos

Nesta lição, colocaremos a teoria em prática por meio de atividades práticas.

Clique nos itens abaixo para conferir cada exercício e desenvolver habilidades
práticas que o ajudarão a ter sucesso na disciplina.

Calculadora Simples

Crie uma calculadora simples que permita ao usuário realizar operações

matemáticas básicas, como soma, subtração, multiplicação e divisão. A
calculadora deve receber os valores digitados pelo usuário e exibir o
resultado da operação.
Lista de Tarefas

Desenvolva uma lista de tarefas utilizando a manipulação do DOM. A

lista deve permitir adicionar novas tarefas, marcar tarefas como
concluídas e remover tarefas da lista. Além disso, a lista deve ser
persistente, ou seja, as tarefas devem ser mantidas mesmo após
recarregar a página.

Requisição HTTP

Faça uma requisição HTTP para uma API pública e exiba os dados
retornados na página. Utilize a programação assíncrona para realizar a
requisição e manipular os dados retornados pela API.
Resumo
Vamos rever o que acabamos de ver até agora

05 Resumo

O Curso completo de Javascript abrange os principais aspectos da linguagem

Javascript, desde os conceitos básicos até tópicos mais avançados. Durante o

curso, os alunos aprenderão sobre a introdução ao JavaScript, onde serão

introduzidos aos fundamentos da linguagem. Além disso, explorarão a

manipulação do DOM, que permitirá a interação com os elementos de uma

página web. Por fim, serão apresentados à programação assíncrona, uma

técnica muito utilizada para melhorar a performance de aplicações. Com isso, os

alunos estarão preparados para desenvolver suas próprias aplicações web

utilizando Javascript.

A introdução ao JavaScript é uma parte fundamental do curso completo de

Javascript. Durante essa etapa, os alunos exploram os conceitos básicos da

linguagem, como variáveis, operadores e estruturas de controle. Aprenderão

também sobre funções e objetos, fundamentais para a criação de aplicações.

Com esses conhecimentos, os alunos estarão prontos para avançar para os

tópicos mais complexos, como a manipulação do DOM e a programação

assíncrona.
A manipulação do DOM é um dos tópicos mais importantes do curso completo

de Javascript. Durante essa etapa, os alunos aprendem a interagir com os

elementos de uma página web, alterando seu conteúdo, estilos e

comportamentos. Através de exercícios práticos, eles desenvolvem habilidades

na manipulação do DOM, como a criação e remoção de elementos, a alteração

de atributos e a manipulação de eventos. Com essa habilidade, os alunos serão

capazes de criar interfaces interativas e dinâmicas em suas aplicações web.

A programação assíncrona é um dos tópicos mais avançados do curso

completo de Javascript. Durante essa etapa, os alunos aprenderão sobre as

funções assíncronas, promessas e callbacks, essenciais para lidar com

operações que levam mais tempo para serem concluídas, como requisições de

API e acesso a banco de dados. Através de exemplos práticos, eles entenderão

como trabalhar de forma assíncrona, melhorando a performance de suas

aplicações. Com esse conhecimento, os alunos estarão preparados para lidar

com desafios complexos na criação de suas aplicações web.

Questionário
Verifique o seu conhecimento respondendo a algumas perguntas

06 Questionário

Pergunta 1/6
Qual é o nome completo do curso?
Curso completo de HTML e CSS
Curso completo de JavaScript
Curso completo de Python

Pergunta 2/6
Qual é o tópico que aborda os fundamentos do JavaScript?
Introdução ao JavaScript
Manipulação do DOM
Programação Assíncrona
Pergunta 3/6
Qual tópico aborda a interação com elementos HTML na página?
Introdução ao JavaScript
Manipulação do DOM
Programação Assíncrona

Pergunta 4/6
Qual tópico aborda a execução de código de forma assíncrona no
JavaScript?
Introdução ao JavaScript
Manipulação do DOM
Programação Assíncrona

Pergunta 5/6
Quais são os tópicos abordados no curso?
Curso completo de HTML e CSS
Manipulação do DOM
Programação Assíncrona
Pergunta 6/6
Qual é a linguagem de programação principal do curso?
HTML
CSS
JavaScript

Enviar
 Conclusão

Parabéns!
Parabéns por concluir este curso! Você deu um passo importante para
liberar todo o seu potencial. Concluir este curso não é apenas adquirir
conhecimento; trata-se de colocar esse conhecimento em prática e
causar um impacto positivo no mundo ao seu redor.
Compartilhar este curso

Created with LearningStudioAI

v0.5.79