Orientadores: Rafaella Ballerini, Paulo Silveira e Guilherme Lima. Bônus: Mario Souto
Período: 5 dias (13/11 a 18/11 - 2023).
Guia: Notion.
É uma maneira imersiva oferecida pela Alura de aprender a linguagem de programação JavaScript (JS), por meio do desenvolvimento de projetos iniciais para realização de portifólio base de JS.
Segundo um levantamento realizado pelo GitHub no ano de 2022, a linguagem mais utilizadas em programação foi a linguagem JS (GitHub, 2022).
Conforme alguns dados a respeito do estado do mercado de trabalho na área tech (tecnologia), percebeu que:
- Entre as profissões em alta em 2023, segundo o LinkedIn, a maior parte são ligadas à tecnologia;
- De acordo com o IDC Predictions Brazil 2023, o setor de TI está previsto para crescer 6,2%;
- O relatório Futuro do Trabalho 2023 aponta que mais de 75% das empresas vão incorporar novas tecnologias nos próximos cinco anos.
Como Compartilhar seu CodePen:
- Clique em "Settings" no canto superior direito;
- Selecione "Pen Details" (Detalhes do Projeto);
- Dê um nome ao seu projeto no campo "Pen Title";
- Forneça detalhes sobre o projeto, como sua funcionalidade e objetivo, no campo "Pen Description";
- Para compartilhar seu projeto, no campo Tags, você pode adicionar #imersaodev e #alura;
- Agora é só salvar seu projeto e compartilhar o link marcando a Alura nas redes sociais!
| Nº Projeto | Nome do Projeto | Projeto Base | Meu Projeto |
|---|---|---|---|
| 1. | Conversor de Medidas | Projeto Alura - Aula 1 | Meu Projeto - Aula 1 / Projeto Bônus 1 - Aula 1 / Projeto Bônus 2 - Aula 1 |
| 2. | Jogo de Adivinhação (Mentalista) | Projeto Alura - Aula 2 | Meu Projeto - Aula 2 |
| 3. | Serviço de Catálogo (Aluraflix) | Projeto Alura - Aula 3 | Meu Projeto - Aula 3 |
| 4. | Gerenciador de Catálogo (Aluraflix 2.0) | Projeto Alura - Aula 4 | Meu Projeto - Aula 4 |
| 5. | Tabela de Classificação (Feedback) | Projeto Alura - Aula 5 | Meu Projeto - Aula 5 |
AVISO: Não se esqueça de fazer um fork deste projeto BASE para a sua conta e marcar as hashtags #imersaodev e #alura.
OBSERVAÇÃO PARA TODAS AS AULAS!
- O layout, HTML e CSS, incluindo a arte de fundo da tela, foram fornecidos pela Alura. A implementação em JavaScript foi desenvolvida para aprimorar a interatividade e a funcionalidade do projeto.
Este projeto foi desenvolvido com base na 1ª aula da Imersão Dev (7ª edição - 2023) da plataforma Alura. O ponto de partida consistia em criar uma variável com um valor fixo em reais e a cotação em dólar, realizando a conversão e exibindo o resultado na tela.
Nesta aula, nos concentraremos nas ferramentas essenciais de qualquer linguagem de programação, incluindo o uso de variáveis, operadores, arredondamento de números e interação com o console.
- Criar uma conta no CodePen;
- Compreender as diferenças entre HTML, CSS e JavaScript;
- Explorar o uso de variáveis, manipulação de valores e a memória do computador;
- Aprender sobre tipos de variáveis, como texto e números inteiros;
- Fixar a quantidade de casas decimais com a função
toFixed().
- Adicionar outras moedas para converter;
- Criar um conversor de quilômetros para anos-luz e descobrir o tempo necessário para viajar de uma estrela para outra;
- Desenvolver um conversor de temperaturas entre Fahrenheit, Kelvin e Celsius;
- Inserir uma linha ao projeto para exibir o valor em Bitcoin.
| Nº Versão | Descrição | Requisito | Última Atualização |
|---|---|---|---|
| V-1.0 | Inclui um valor de moeda fixo e exibe na tela sua conversão em Dólar, conforme cotação pré-estabelecida. | 21 de novembro de 2023 | |
| V-2.0 | Recebe um valor em moeda Real e exibe na tela, com uma formatação aprimorada, sua cotação em Dólar, Euro e Libra, conforme cotação pré-estabelecida. | ||
| V-3.0 | Recebe um valor em moeda Real e exibe na tela, de maneira mais refinada, mais opções de cotações em tempo real, conforme uma API. | ||
| V-4.0 | Recebe um valor em moeda Real e exibe na tela, de maneira mais refinada, as cotações de moeda e criptomoedas em tempo real, conforme suas respectivas APIs | ||
| V-5.0 | Escolhe qual moeda deseja saber o valor e exibe na tela as cotações diferentes. |
- Insira o nome do usuário;
- Insira o valor em reais, podendo ser com casa decimal ou não;
- Obtenha os resultados instantâneos na tela, com valores atualizados em tempo real ou conforme a cotação diária.
Este projeto foi desenvolvido com base na 2ª aula da Imersão Dev (7ª edição - 2023) da plataforma Alura. O ponto de partida consistia em o programa vai gerar um número de 0 a 100, e você tem que tentar advinha qual número correto.
Na segunda aula da Imersão Dev, vamos mergulhar na criação de um jogo de adivinhação. Neste desafio, o programa escolherá um número aleatório, e nosso objetivo é adivinhar esse número.
- Realizar o fork do projeto com o template inicial;
- Realizar testes interativos usando prompt;
- Criar a lógica do jogo utilizando estruturas condicionais como if e else;
- Utilizar a função
Math.random()do JavaScript para gerar números aleatórios. - Função: var numeroSecreto
= parseInt(Math.random() * 1001).
- Adicionar um limite de tentativas para que a pessoa possa adivinhar o número e, ao final, exiba a resposta correta;
- Quando a pessoa errar, forneça uma dica informando se o número chutado é maior ou menor que o número secreto;
- Aprofunde-se e aprenda a diferença entre os operadores
==e===.
| Nº Versão | Descrição | Requisito | Última Atualização |
|---|---|---|---|
| V-1.0 | Vai ser gerado um número random (0 a 100) e você vai digitar até acertar. |
21 de novembro de 2023 | |
| V-2.0 | Vai tentar acertar o número random (0 a 100), a partir de um número x de quantidades de tentativas. E exibir na tela a quantidade de tentativas que teve para acertar o número random. |
||
| V-3.0 | |||
| V-4.0 | |||
| V-5.0 |
- Insira o seu nome;
- Insira a quantidade de tentativas que você se arrisca em acertar o valor;
- Insira o número que acredita seja o correto, e repita até acertar ou acabar suas tentativas;
- Obtenha os resultados instantâneos na tela, com valores atualizados em tempo real ou conforme a cotação diária.
Este projeto foi desenvolvido com base na 3ª aula da Imersão Dev (7ª edição - 2023) da plataforma Alura. O programa irá fornecer um catálogo de filmes, como um serviço de streaming (Netflix, Amazon Prime, HBO, etc), e com isso o usuário vai pode explorar as informações do filmes.
- Vale ressaltar que é necessário conhecimento sobre estruturas de repetições, e para isso vai necessita a pesquisa sobre conceitos:
for,while,forEach,do... while,for...in,for...of,switch,break,conitnue, etc.
Observação: Crédito para o site Elo7, que ao digitar na busca: "Big Poster", forneceu diversas imagens de cartazes de filme. Então quiser utilizar aperta aqui.
Nesta aula, exploraremos estruturas de dados e como trabalhar com listas. Abordaremos os seguintes tópicos:
- Criação de uma primeira array de filmes usando a sintaxe
[]; - Uso do método
filmes.push("Nome Do Filme")para inserir um novo elemento na lista (ou seja, um novo filme na array); - Descoberta da quantidade de elementos em uma array com o método
array.length; - Seleção de elementos de uma array utilizando a sintaxe
array[número], lembrando que o primeiro índice começa com zero, ou seja,array[0]para o primeiro elemento; - Utilização da instrução for para iterar, ou seja, percorrer todos os elementos de uma array;
- Criação de uma array com imagens de pôsteres de alguns filmes que gostamos;
- Montagem da lógica do programa que irá iterar está array de filmes e exibir cada um deles na tela, integrando o for do JavaScript com
document.write().
- Escolher o seu tema preferido para adaptar ao nosso código, ou seja, ao invés de filmes, pode ser uma lista de animes, HQs, cursos, capas de jogos, entre outros;
- Tentar implementar outras versões da estrutura de repetição que fizemos com for, como por exemplo com
forEachouwhile; - Criar uma condição para não adicionar filmes repetidos, caso eles já tenham sido adicionados anteriormente;
- Criar um campo e um botão para adicionar a imagem diretamente na tela, em vez de adicionar no código.
| Nº Versão | Descrição | Requisito | Última Atualização |
|---|---|---|---|
| V-1.0 | Vai fornecer uma lista de cartazes de filmes que eu gosto. | 21 de novembro de 2023 | |
| V-2.0 | Vai receber cartazes de filme de usuários e vai exibir na tela. | ||
| V-3.0 | Vai exibir na tela ao clicar na imagem, informações como: Nome do Filme e Ano de Lançamento. | ||
| V-4.0 | |||
| V-5.0 |
- Insira o seu nome;
- Insira a URL;
- Obtenha os resultados instantâneos na tela, com valores atualizados em tempo real ou conforme a cotação diária.
No nosso projeto AluraFlix, utilizaremos o input para permitir a entrada de dados diretamente na tela, evitando a necessidade de inserir informações diretamente no código ou no console. Nesta aula, abordaremos os seguintes tópicos:
- Sintaxe e criação de funções no JavaScript;
- Integração de funções criadas no JavaScript com o HTML exibido na tela;
- Condicionamento da execução (ou "chamada") de uma função a um clique em um botão na tela;
- Uso do JavaScript para acessar o que está sendo exibido na tela e obter valores digitados pelo usuário com
getElementById()e.value; - Passagem de informações necessárias para o funcionamento das funções por meio de parâmetros;
- Utilização do
.endsWith()para verificar se um texto termina com determinados caracteres; - Demonstração de um exemplo adicional de retribuição de variável para "limpar" o texto do campo com
"".
- Criar a lógica para quando ocorrer um empate, ajustar automaticamente o placar de empate para os demais jogadores;
- Validar se a pontuação está consistente, verificando se o número de vitórias, derrotas e empates faz sentido para cada jogador (por exemplo, não pode haver mais vitórias do que derrotas);
- Adicionar a imagem de cada jogador;
- Criar um botão para zerar todos os pontos;
- Incluir um botão e campos de texto para adicionar novos jogadores, juntamente com seus respectivos dados;
- Usar o jogo favorito como base para a pontuação na tabela de classificação.
| Nº Versão | Descrição | Requisito | Última Atualização |
|---|---|---|---|
| V-1.0 | 21 de novembro de 2023 | ||
| V-2.0 | |||
| V-3.0 | |||
| V-4.0 | |||
| V-5.0 |
ClipDrop
- Insira o nome do usuário;
- Insira o valor em reais, podendo ser com casa decimal ou não;
- Obtenha os resultados instantâneos na tela, com valores atualizados em tempo real ou conforme a cotação diária.
Nesta aula da Imersão Dev, mergulharemos no mundo da programação e aprenderemos a criar uma tabela de classificação.
- Remover o código estático do HTML;
- Criar um objeto no JavaScript para cada jogador;
- Criar uma função que receba um objeto como parâmetro para calcular os pontos;
- Exibir o objeto na página HTML;
- Criar uma função para adicionar vitórias, outra para adicionar empates e uma última para adicionar derrotas.
| Nº Versão | Descrição | Requisito | Última Atualização |
|---|---|---|---|
| V-1.0 | 21 de novembro de 2023 | ||
| V-2.0 | |||
| V-3.0 | |||
| V-4.0 | |||
| V-5.0 |
- Insira o nome do usuário;
- Insira o valor em reais, podendo ser com casa decimal ou não;
- Obtenha os resultados instantâneos na tela, com valores atualizados em tempo real ou conforme a cotação diária.
| Metas | Descrição |
|---|---|
| AAAA | abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789 |
| BBBB | |
| CCCC | |
| DDD |
Concluídas
- AAA
- Tech Guide – Alura;
- CodePen - Editor de Código Online;
- ChatGPT - OpenAI;
- Bard - Google;
- MIDJOURNEY;
- JavaScript - Documentação Mozilla;
- O que é JavaScript - HipstersPontoTube (Alura)
- Evolução do JavaScript - Hipsters.Talks(Alura);
- Primeiros Passos na Programação - HipstersPontoTech(Alura);
- Playlist Scuba Dev (Alura);
- Operadores de JScript(Alura);
- O que é GitHub? (Alura);
- Iteradores com JavaScripts: While e For (Alura);
- Primeira Aula da Imersão em Python(Alura);
- Abrir CodePen no VSCode (Alura).