Programação em

JavaScript
Aprenda a programar em JavaScript e desenvolva aplicativos
web interativos.

Iniciar

Visão geral
Este curso abrange os fundamentos da programação em JavaScript, uma das
linguagens mais populares para o desenvolvimento de aplicativos web. Você
aprenderá os conceitos básicos da linguagem, como variáveis, estruturas
condicionais, loops e funções. Além disso, explorará tópicos avançados, como
manipulação do DOM, eventos, AJAX e JSON. Ao final do curso, você estará apto a
criar aplicações web dinâmicas e interativas utilizando JavaScript.

01 Introdução

Introdução ao JavaScript

01 Introdução ao JavaScript

JavaScript é uma linguagem de programação amplamente utilizada na web. Com ela,

é possível criar páginas dinâmicas, desenvolver aplicativos de internet e até mesmo
criar jogos.

O que é JavaScript?
JavaScript (ou JS) é uma linguagem de programação de alto nível, dinâmica e
interpretada. Ela foi criada originalmente para ser executada no navegador e interagir
com o conteúdo exibido nas páginas da web. No entanto, com o passar do tempo,
seu uso foi expandido para outras áreas, como desenvolvimento de aplicativos
móveis e servidores.

Ao contrário de linguagens de programação como Java ou C++, JavaScript não

requer nenhum tipo de ambiente de desenvolvimento complexo para ser executado.
Basta ter um navegador web para rodar os programas escritos nessa linguagem.

História do JavaScript

JavaScript foi criado por Brendan Eich em 1995, enquanto trabalhava na Netscape
Communications. A primeira versão do JavaScript foi chamada de LiveScript e foi
lançada juntamente com o navegador Netscape Navigator 2.0. O objetivo principal era
trazer interatividade para as páginas da web.

Posteriormente, a linguagem foi rebatizada para JavaScript em uma parceria com a

Sun Microsystems, aproveitando seu sucesso e popularidade do Java na época.

Depois de algumas versões, o JavaScript foi padronizado pela Ecma International e

recebeu o nome oficial de ECMAScript, que é o nome técnico utilizado para a versão
padronizada da linguagem. Atualmente, a versão mais recente é chamada de
ECMAScript 2019 (ES2019).

Características do JavaScript
JavaScript possui algumas características que a tornam uma linguagem única e
poderosa:

Linguagem de programação dinâmica: JavaScript permite a criação de programas dinâmicos,

que podem se adaptar e responder às ações dos usuários em tempo real.

Linguagem interpretada: Não é necessário compilar o código JavaScript, pois o navegador

interpreta e executa o código diretamente.

Suporte à programação orientada a objetos: JavaScript suporta conceitos de programação

orientada a objetos, como classes, objetos, herança e encapsulamento.

Ampla compatibilidade: A linguagem é suportada por todos os principais navegadores, como

Chrome, Firefox, Safari e Internet Explorer.

Integração com HTML e CSS: JavaScript pode ser incorporado em arquivos HTML e ser
usado para controlar o layout, a aparência e o comportamento dos elementos da página.

Principais aplicações do JavaScript

JavaScript é amplamente utilizado na web para diversas finalidades, desde melhorar

a experiência do usuário em um site até o desenvolvimento de aplicativos complexos.
Aqui estão algumas das principais aplicações do JavaScript:

Manipulação do DOM: JavaScript pode ser usado para manipular e atualizar o conteúdo
apresentado nas páginas da web, alterar estilos, adicionar ou remover elementos e muito
mais.

Validação de formulários: É comum usar JavaScript para validar dados de entrada em

formulários antes de serem enviados ao servidor.

Criação de jogos: JavaScript possui bibliotecas e frameworks poderosos que permitem a

criação de jogos 2D e 3D para a web.

Desenvolvimento de aplicativos de internet: Com JavaScript, é possível criar aplicativos de

internet e páginas web interativas.
 Integração de APIs: JavaScript pode ser usado para se comunicar com APIs de terceiros,
como a API do Google Maps, para incorporar funcionalidades poderosas em seu site ou
aplicativo.

Essas são apenas algumas das possibilidades oferecidas pelo JavaScript. Sua
versatilidade e facilidade de uso fizeram dele uma das linguagens de programação
mais populares do mundo.

Conclusão

Nesta introdução ao JavaScript, você aprendeu o que é JavaScript, sua história,

principais características e aplicações. Agora que você tem uma visão geral sobre a
linguagem, está pronto para mergulhar em seus conceitos básicos e começar a
escrever seus primeiros programas em JavaScript.

Conclusão - Introdução ao JavaScript

No módulo de Introdução ao JavaScript, você aprendeu os

conceitos básicos dessa linguagem de programação. Agora você
está familiarizado com variáveis, operadores e estruturas de
controle. Com esses fundamentos, você pode começar a criar
programas simples em JavaScript e dar os primeiros passos no
mundo da programação.
Manipulação do DOM e
Eventos

02 Manipulação do DOM e Eventos

Neste tópico, vamos explorar a Manipulação do DOM (Document Object Model) e os

Eventos no JavaScript. A Manipulação do DOM é uma técnica para modificar a
estrutura, estilo e conteúdo de um documento HTML usando o JavaScript. Os
Eventos são ações do usuário ou do navegador que ocorrem durante a interação com
a página e podem ser manipulados para executar determinadas ações.

Manipulação do DOM

O DOM é uma representação em árvore de um documento HTML, onde cada

elemento HTML é um nó. A manipulação do DOM permite que os desenvolvedores
acessem, modifiquem ou criem elementos HTML, atributos e estilos.
Existem várias maneiras de manipular o DOM usando JavaScript. Algumas das
principais técnicas incluem:

Selecionando elementos

Para manipular um elemento HTML, primeiro precisamos selecioná-lo. Podemos usar

métodos como getElementById , getElementsByClassName , getElementsByTagName ou
querySelector para obter referências aos elementos.

Exemplo:

// Selecionando um elemento pelo ID

const elemento = document.getElementById('meuElemento');

// Selecionando elementos pela classe

const elementos = document.getElementsByClassName('minhaClasse');

// Selecionando elementos pela tag

const elementos = document.getElementsByTagName('div');

// Selecionando um elemento usando um seletor CSS

const elemento = document.querySelector('.minhaClasse');

Modificando elementos

Depois de selecionar um elemento, podemos modificar seus atributos, conteúdo,

estilos e até mesmo adicionar ou remover classes.

Exemplo:

// Modificando o conteúdo de um elemento

elemento.innerHTML = 'Novo conteúdo';
 // Modificando um atributo
elemento.setAttribute('src', 'imagem.jpg');

// Modificando o estilo
elemento.style.backgroundColor = 'blue';

// Adicionando uma classe

elemento.classList.add('minhaClasse');

// Removendo uma classe

elemento.classList.remove('minhaClasse');

Criando elementos

Além de modificar elementos existentes, também é possível criar novos elementos

HTML dinamicamente usando JavaScript.

Exemplo:

// Criando um novo elemento

const novoElemento = document.createElement('div');

// Definindo atributos para o novo elemento

novoElemento.setAttribute('class', 'meuElemento');
novoElemento.innerHTML = 'Novo elemento';

// Adicionando o novo elemento à página

document.body.appendChild(novoElemento);

Eventos
Eventos são ações do usuário ou do navegador, como clicar em um botão, passar o
mouse sobre um elemento, digitar em um campo de formulário, entre outros.
Podemos utilizar os eventos para realizar ações específicas em resposta a essas
interações.

Para manipular eventos, podemos usar a propriedade on ou adicionar

manipuladores de eventos usando addEventListener .

Exemplo:

// Manipulando um evento de click usando a propriedade "on"

elemento.onclick = function() {
console.log('Clicou no elemento');
};

// Adicionando um manipulador de evento usando "addEventListener"

elemento.addEventListener('mouseover', function() {
console.log('Mouse passou por cima do elemento');
});

Podemos também remover manipuladores de eventos usando removeEventListener .

Exemplo:

// Removendo um manipulador de evento

elemento.removeEventListener('click', minhaFuncao);

Existem vários tipos de eventos disponíveis, como click, mouseover, keyup, entre
outros. É importante entender os diferentes eventos e como eles podem ser utilizados
para criar uma interatividade eficaz em uma página web.
 Conclusão - Manipulação do DOM e Eventos

O módulo de Manipulação do DOM e Eventos ampliou seu

conhecimento sobre JavaScript. Você aprendeu a interagir com
o Document Object Model (DOM), permitindo a manipulação
dinâmica de elementos HTML. Além disso, você explorou como
registrar e responder a eventos, tornando suas páginas web
mais interativas e responsivas. Com essas habilidades, você
pode criar interfaces dinâmicas e envolventes para seus
projetos em JavaScript.

Comunicação com Servidor

03 Comunicação com Servidor

Neste tópico, vamos abordar como realizar comunicação com um servidor usando
JavaScript. A comunicação com o servidor é uma parte essencial no desenvolvimento
de aplicações web, pois permite que os usuários interajam com os recursos e dados
armazenados no servidor.

XMLHttpRequest

Uma das formas mais comuns de realizar comunicação com o servidor em JavaScript
é utilizando o objeto XMLHttpRequest . Esse objeto permite enviar solicitações HTTP
assíncronas para o servidor e receber as respostas de volta. Com ele, é possível
realizar várias operações, como buscar dados, atualizar informações e enviar
formulários.

Para utilizar o XMLHttpRequest , primeiro precisamos criar uma instância do objeto.

Em seguida, configuramos a solicitação, especificando o método HTTP desejado, a
URL do servidor e outros parâmetros necessários. Por fim, enviamos a solicitação
para o servidor e tratamos a resposta recebida.

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://www.exemplo.com/dados', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var resposta = xhr.responseText;
// Tratar a resposta recebida do servidor
}
};
xhr.send();

Neste exemplo, estamos enviando uma requisição do tipo GET para a URL
'https://www.exemplo.com/dados'. Quando a resposta for recebida do servidor e
estiver pronta para ser processada, o código dentro da função onreadystatechange

será executado. No caso acima, estamos verificando se o estado da requisição é 4

(indicando que a resposta está pronta) e se o status é 200 (indicando que a resposta
foi bem-sucedida).

Fetch API

Além do XMLHttpRequest , o JavaScript também suporta a Fetch API, uma interface

mais moderna e flexível para realizar requisições assíncronas. A Fetch API simplifica
a comunicação com o servidor, fornecendo métodos mais intuitivos e uma sintaxe
mais limpa.

Com a Fetch API, podemos realizar requisições GET, POST, PUT, DELETE e outras.
A resposta do servidor pode ser tratada utilizando as promessas do JavaScript, o que
torna o código mais legível e fácil de dar manutenção.

Aqui está um exemplo de como utilizar a Fetch API para fazer uma requisição GET:

fetch('https://www.exemplo.com/dados')
.then(function(response) {
if (response.ok) {
return response.json();
} else {
throw new Error('Erro na requisição!');
}
})
.then(function(data) {
// Tratar os dados recebidos do servidor
})
.catch(function(error) {
 // Tratar erros na requisição
});

Neste exemplo, estamos utilizando o método fetch para enviar uma requisição GET
para a URL 'https://www.exemplo.com/dados'. Em seguida, encadeamos as
promessas then e catch para tratar a resposta e possíveis erros. Caso a resposta
seja bem-sucedida (código de status 200), é possível utilizar o método json() para
converter os dados recebidos em formato JSON.

JSON e AJAX

Ao lidar com comunicação com o servidor em JavaScript, é comum utilizar o formato

JSON (JavaScript Object Notation) para enviar e receber dados. O JSON é uma
forma leve e fácil de representar estruturas de dados, e é amplamente suportado
pelos navegadores e servidores web.

Tanto o XMLHttpRequest quanto a Fetch API suportam o uso de JSON para envio e
recebimento de dados. Quando enviamos dados para o servidor, podemos converter
um objeto JavaScript em uma string JSON utilizando o método JSON.stringify . Por
exemplo:

var dados = { nome: 'João', idade: 25 };

var jsonDados = JSON.stringify(dados);

Para receber dados no formato JSON, podemos utilizar o método JSON.parse para
converter a string JSON em um objeto JavaScript. Por exemplo:

var jsonResposta = '{ "nome": "João", "idade": 25 }';

var resposta = JSON.parse(jsonResposta);
Assim, podemos enviar e receber dados entre a aplicação cliente (JavaScript) e o
servidor utilizando o formato JSON.

Considerações Finais

A comunicação com servidor é uma parte fundamental no desenvolvimento de

aplicações web utilizando JavaScript. Com o XMLHttpRequest ou a Fetch API, é
possível enviar solicitações assíncronas para o servidor e receber as respostas de
volta. O uso de JSON torna o envio e recebimento de dados mais fácil e eficiente.

Ao dominar o uso dessas técnicas, você será capaz de criar aplicações web mais
dinâmicas e interativas, oferecendo uma experiência melhor aos usuários.

Lembre-se sempre de tratar as respostas do servidor e possíveis erros, para garantir

um funcionamento adequado da sua aplicação.

Conclusão - Comunicação com Servidor

No módulo de Comunicação com Servidor, você descobriu

como realizar interações entre seu programa JavaScript e um
servidor. Aprender a fazer requisições HTTP assíncronas
permite que você obtenha dados de APIs externas e atualize
conteúdo em tempo real. Além disso, você aprendeu a enviar
dados para o servidor, possibilitando a criação de formulários
interativos e o armazenamento de informações. Com essa
 capacidade de comunicação, você pode construir aplicativos
web completos e conectados.

Exercícios Práticos
Vamos colocar 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.

Exercício 1: Variáveis e Operadores

Crie um programa que solicite ao usuário dois números e exiba a soma,
subtração, multiplicação e divisão desses números.

Exercício 2: Estruturas de Controle

Desenvolva um programa que solicite ao usuário um número e verifique se

ele é par ou ímpar. Exiba o resultado na tela.

Exercício 3: Manipulação do DOM

Crie uma página HTML com um botão. Ao clicar no botão, exiba uma
mensagem na página utilizando JavaScript.

Exercício 4: Manipulação de Eventos

Implemente um programa que altere a cor de fundo de um elemento HTML

ao passar o mouse sobre ele e restaure a cor original quando o mouse sair.

Exercício 5: Requisição HTTP

 Utilize JavaScript para fazer uma requisição HTTP para uma API pública (por
exemplo, a API do GitHub) e exiba os dados retornados na página.

Exercício 6: Envio de Dados para o Servidor

Crie um formulário que solicite informações ao usuário e envie esses dados

para um servidor utilizando JavaScript.

Resumo
Vamos revisar o que acabamos de ver até agora

05 Resumo
No módulo de Introdução ao JavaScript, você aprendeu os conceitos básicos
dessa linguagem de programação. Agora você está familiarizado com variáveis,
operadores e estruturas de controle. Com esses fundamentos, você pode
começar a criar programas simples em JavaScript e dar os primeiros passos no
mundo da programação.

O módulo de Manipulação do DOM e Eventos ampliou seu conhecimento sobre

JavaScript. Você aprendeu a interagir com o Document Object Model (DOM),
permitindo a manipulação dinâmica de elementos HTML. Além disso, você
explorou como registrar e responder a eventos, tornando suas páginas web mais
interativas e responsivas. Com essas habilidades, você pode criar interfaces
dinâmicas e envolventes para seus projetos em JavaScript.

No módulo de Comunicação com Servidor, você descobriu como realizar

interações entre seu programa JavaScript e um servidor. Aprender a fazer
requisições HTTP assíncronas permite que você obtenha dados de APIs
externas e atualize conteúdo em tempo real. Além disso, você aprendeu a
enviar dados para o servidor, possibilitando a criação de formulários interativos e
o armazenamento de informações. Com essa capacidade de comunicação, você
pode construir aplicativos web completos e conectados.
Questionário
Verifique seu conhecimento respondendo a algumas perguntas

06 Questionário

1. Qual das opções abaixo é uma vantagem do JavaScript?

É exclusivo para desenvolvimento no lado do servidor

Permite criar páginas web interativas

Não requer conhecimento de HTML e CSS

2. O que o termo 'DOM' significa em JavaScript?

Documento de Objeto Móvel

Modelo de Objeto de Documento

Modelo Orientado a Documentos

3. Qual método JavaScript é usado para registrar um evento em um elemento HTML?

getElementById

addEventListener

createElement

4. O que é AJAX em JavaScript?

Uma biblioteca JavaScript popular

Um formato de arquivo de dados

Uma técnica para comunicação assíncrona com o servidor

5. Qual método JavaScript é usado para fazer uma requisição HTTP assíncrona?

fetch

serialize

parse

6. Como enviar dados de um formulário para um servidor em JavaScript?

Usando o método POST do protocolo HTTP

Usando o método GET do protocolo HTTP

Usando o método PUT do protocolo HTTP

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.3.16