JavaScript

Neste módulo, os estagiários aprenderão sobre a linguagem de programação JavaScript e como adicionar interatividade às páginas web.

Aulas

Aula Curso em Vídeo

Curso em Vídeo - Javascript

Aula Programação Web

Curso de JavaScript Completo

Desafios

Desafio 1: Sintaxe e variáveis

Objetivo: Aprenda a sintaxe básica do JavaScript, incluindo declaração de variáveis e tipos de dados.

Tópicos a serem estudados:

1. Sintaxe básica do JavaScript
2. Declaração de variáveis com var, let e const
3. Tipos de dados: string, number, boolean, null, undefined, object e symbol

Atividades propostas:

1. Estude a sintaxe básica do JavaScript, como declarações, blocos de código e pontos e vírgulas.
2. Aprenda a declarar variáveis usando var, let e const e entenda as diferenças entre eles.
3. Explore os diferentes tipos de dados disponíveis no JavaScript e saiba como identificar o tipo de uma variável usando o operador typeof.
4. Crie um arquivo JavaScript e pratique a declaração de variáveis com diferentes tipos de dados, como strings, números, booleanos, etc.

Ao concluir este desafio, o estagiário terá uma compreensão sólida da sintaxe básica do JavaScript e de como declarar e trabalhar com variáveis e tipos de dados.

Desafio 2: Operadores e estruturas de controle

Objetivo: Explore operadores aritméticos, de comparação e lógicos, bem como estruturas de controle, como if, switch, for e while.

Tópicos a serem estudados:

1. Operadores aritméticos: adição, subtração, multiplicação, divisão, resto e exponenciação
2. Operadores de comparação: igual, diferente, maior que, menor que, maior ou igual, menor ou igual
3. Operadores lógicos: AND, OR e NOT
4. Estruturas de controle: if, else, switch, for e while

Atividades propostas:

1. Estude os operadores aritméticos, de comparação e lógicos disponíveis no JavaScript.
2. Aprenda a usar estruturas de controle, como if, else, switch, for e while, para controlar o fluxo de execução do seu código.
3. Crie um arquivo JavaScript e pratique a criação de diferentes operações e estruturas de controle.
4. Desafie-se a resolver problemas comuns, como encontrar o maior número em uma lista, verificar se um número é par ou ímpar e calcular a soma de todos os números em um intervalo.

Ao concluir este desafio, o estagiário terá uma compreensão sólida dos operadores e estruturas de controle disponíveis no JavaScript e como usá-los para criar algoritmos e controlar o fluxo de execução do código.

Desafio 3: Funções e escopo

Objetivo: Aprenda a criar e usar funções no JavaScript e entenda o conceito de escopo de variáveis.

Tópicos a serem estudados:

1. Definição de funções: declaração de função, expressão de função e funções de seta
2. Parâmetros e argumentos de funções
3. Retorno de valores e funções anônimas
4. Escopo de variáveis: global, local e escopo de bloco

Atividades propostas:

1. Estude os diferentes métodos de definição de funções no JavaScript, como declaração de função, expressão de função e funções de seta.
2. Aprenda a passar parâmetros e argumentos para funções e a retornar valores de funções.
3. Crie um arquivo JavaScript e pratique a criação e o uso de funções, bem como a passagem de parâmetros e o retorno de valores.
4. Entenda o conceito de escopo de variáveis e como as variáveis globais, locais e de bloco funcionam no JavaScript.
5. Desafie-se a criar funções que resolvam problemas comuns, como calcular a média de uma lista de números, verificar se uma palavra é um palíndromo e determinar se um número é primo.

Ao concluir este desafio, o estagiário terá uma compreensão sólida das funções e do escopo de variáveis no JavaScript e como usá-los para organizar e modularizar o código.

Desafio 4: Objetos e arrays

Objetivo: Trabalhe com objetos e arrays no JavaScript, incluindo a criação, manipulação e acesso a propriedades e elementos.

Tópicos a serem estudados:

1. Criação e manipulação de arrays
2. Métodos comuns de arrays: push, pop, shift, unshift, splice, slice, map, filter, reduce, etc.
3. Criação e manipulação de objetos
4. Acesso e modificação de propriedades de objetos
5. JSON: JavaScript Object Notation

Atividades propostas:

1. Estude como criar e manipular arrays no JavaScript, incluindo a adição e remoção de elementos e a iteração sobre os elementos de um array.
2. Aprenda e pratique o uso de métodos comuns de arrays, como push, pop, shift, unshift, splice, slice, map, filter e reduce.
3. Estude a criação e manipulação de objetos no JavaScript, incluindo a definição de propriedades e métodos.
4. Aprenda a acessar e modificar propriedades de objetos e a entender a diferença entre notação de ponto e notação de colchetes.
5. Conheça a JSON (JavaScript Object Notation) e aprenda a converter objetos JavaScript em strings JSON e vice-versa.

Ao concluir este desafio, o estagiário terá uma compreensão sólida de como trabalhar com objetos e arrays no JavaScript e como manipulá-los para armazenar e processar dados de forma eficiente.

Desafio 5: DOM e manipulação de elementos

Objetivo: Aprenda a selecionar, criar e modificar elementos HTML usando JavaScript e a API do Document Object Model (DOM).

Tópicos a serem estudados:

1. O que é o DOM (Document Object Model)
2. Seleção de elementos HTML com JavaScript (getElementById, getElementsByClassName, querySelector, querySelectorAll)
3. Criação e inserção de elementos HTML (createElement, appendChild, insertBefore)
4. Modificação de elementos HTML (innerHTML, textContent, setAttribute, removeAttribute, style)
5. Trabalhando com eventos e manipulação de eventos

Atividades propostas:

1. Estude o conceito de DOM (Document Object Model) e entenda como ele representa a estrutura de uma página HTML.
2. Aprenda a selecionar elementos HTML usando JavaScript através de funções como getElementById, getElementsByClassName, querySelector e querySelectorAll.
3. Pratique a criação e inserção de elementos HTML usando JavaScript com as funções createElement, appendChild e insertBefore.
4. Modifique elementos HTML usando JavaScript através de propriedades como innerHTML, textContent, setAttribute, removeAttribute e style.
5. Estude e pratique a manipulação de eventos no DOM, como adicionar e remover ouvintes de eventos e manipular eventos com funções de callback.

Ao concluir este desafio, o estagiário terá uma compreensão sólida de como selecionar, criar e modificar elementos HTML usando JavaScript e a API do DOM, permitindo que ele manipule dinamicamente o conteúdo de uma página da web.

Desafio 6: Eventos e manipuladores de eventos

Objetivo: Adicione interatividade à sua página HTML, lidando com eventos e registrando manipuladores de eventos usando JavaScript.

Tópicos a serem estudados:

1. Conceito de eventos no JavaScript
2. Tipos de eventos (click, dblclick, mouseover, mouseout, keydown, keyup, load, etc.)
3. Adicionar e remover ouvintes de eventos (addEventListener, removeEventListener)
4. Funções de callback e manipulação de eventos
5. Delegação de eventos

Atividades propostas:

1. Estude o conceito de eventos no JavaScript e entenda como eles são usados para adicionar interatividade às páginas da web.
2. Aprenda sobre os diferentes tipos de eventos disponíveis no JavaScript, como click, dblclick, mouseover, mouseout, keydown, keyup, load, e outros.
3. Pratique a adição e remoção de ouvintes de eventos usando as funções addEventListener e removeEventListener.
4. Desenvolva funções de callback para lidar com eventos e manipular elementos do DOM com base nos eventos ocorridos.
5. Estude a técnica de delegação de eventos e entenda como ela pode simplificar a manipulação de eventos em elementos dinâmicos.

Ao concluir este desafio, o estagiário terá uma compreensão sólida de como trabalhar com eventos e manipuladores de eventos no JavaScript, permitindo que ele adicione interatividade e dinamismo à sua página HTML.

Desafio 7: Chamadas AJAX e APIs

Objetivo: Aprenda a fazer chamadas AJAX para recuperar dados de APIs e atualizar sua página HTML dinamicamente.

Tópicos a serem estudados:

1. Conceito de AJAX (Asynchronous JavaScript and XML)
2. Objeto XMLHttpRequest e Fetch API
3. Métodos HTTP (GET, POST, PUT, DELETE)
4. Manipulação de dados em formato JSON
5. Tratamento de erros e exceções

Atividades propostas:

1. Estude o conceito de AJAX e como ele permite a comunicação assíncrona entre o navegador e o servidor para troca de dados.
2. Aprenda a usar o objeto XMLHttpRequest e a Fetch API para fazer chamadas AJAX e enviar ou receber dados de um servidor.
3. Familiarize-se com os métodos HTTP, como GET, POST, PUT e DELETE, e entenda quando e como usá-los em suas chamadas AJAX.
4. Pratique a manipulação de dados em formato JSON, incluindo a conversão de strings JSON em objetos JavaScript e vice-versa.
5. Desenvolva habilidades para tratar erros e exceções que possam ocorrer durante as chamadas AJAX e a manipulação de dados.

Ao concluir este desafio, o estagiário terá uma compreensão sólida de como fazer chamadas AJAX e trabalhar com APIs para recuperar e enviar dados, permitindo que ele atualize sua página HTML dinamicamente sem a necessidade de recarregar a página inteira.

Desafio 8: Bibliotecas e frameworks JavaScript

Objetivo: Explore bibliotecas e frameworks JavaScript populares, como jQuery, React, Angular e Vue.js.

Tópicos a serem estudados:

1. Biblioteca jQuery
2. Framework React
3. Framework Angular
4. Framework Vue.js
5. Comparação e escolha de bibliotecas e frameworks

Atividades propostas:

1. Estude a biblioteca jQuery e aprenda a usar suas funções para simplificar a manipulação do DOM, lidar com eventos e fazer chamadas AJAX.
2. Explore o framework React e entenda seus principais conceitos, como componentes, estado e ciclo de vida. Pratique a criação de interfaces de usuário reativas com React.
3. Aprenda sobre o framework Angular e seus principais recursos, como módulos, componentes, diretivas, serviços e roteamento. Pratique o desenvolvimento de aplicações SPA (Single Page Application) com Angular.
4. Conheça o framework Vue.js e suas principais características, como instâncias Vue, componentes, diretivas personalizadas e gerenciamento de estado. Pratique a criação de aplicações web reativas com Vue.js.
5. Compare as vantagens e desvantagens de cada biblioteca e framework estudado. Avalie suas necessidades e escolha a ferramenta mais adequada para seus projetos futuros.

Ao concluir este desafio, o estagiário terá uma visão geral das bibliotecas e frameworks JavaScript mais populares e será capaz de escolher a ferramenta certa para seus projetos, dependendo das necessidades e requisitos específicos.