(31)994408961- RESOLVIDO-Aula Pratica Desenvolvimento em Javascript (4 ATV)

Prévia do material em texto

Roteiro Aula Prática
DESENVOLVIMENTO EM JAVASCRIPT
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT
Unidade: 1 – PRINCÍPIOS DO JAVASCRIPT
Aula: 3 – ESTRUTURAS DE REPETIÇÃO
OBJETIVOS
· Compreender e aplicar as estruturas de repetições com a finalidade de familiarizar os estudantes com a estrutura “for” em JavaScript.
· Compreender e aplicar os conceitos teóricos aprendidos em programação, como variáveis, loops e operações matemáticas simples, em um contexto prático e relevante.
SOLUÇÃO DIGITAL
· Google Colab
LINK SOLUÇÃO DIGITAL (EXCETO ALGETEC): https://colab.google/
O Google Colab, ou Colaboratory, é uma plataforma gratuita baseada na nuvem oferecida pelo Google. Ela fornece um ambiente de notebook interativo e colaborativo que permite a criação e execução de código diretamente no navegador, sem a necessidade de configurar ou instalar qualquer software no seu computador.
PROCEDIMENTO/ATIVIDADE ATIVIDADE PROPOSTA:
· Nesta atividade, você irá criar uma página web que oferece uma experiência interativa para gerar tabuadas de multiplicação. Ao abrir a página, os usuários serão guiados a inserir um número de sua escolha entre (1 e 10). A partir desse número, o programa calculará automaticamente e exibirá a tabuada completa desse número, do multiplicador 1 ao 10.
PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE:
1. Abertura da Página:
Ao acessar a página, você receberá uma mensagem com o título "Gerador de Tabuada Interativo" e um campo de entrada para inserir um número.
2
2. Inserção de Dados:
Na caixa de mensagem será solicitado que você insira um número entre 1 e 10. Isso determinará qual tabuada será gerada.
3. Cálculo e Exibição:
Utilizando a estrutura de repetição “For” em JavaScript, o programa calculará e exibirá cada linha da tabuada correspondente ao número inserido. Cada multiplicação será apresentada de forma clara e organizada na página.
4. Exploração e Interatividade:
Após a geração da tabuada, você poderá explorar os resultados visualizados na página. Experimente inserir diferentes números para gerar novas tabuadas e observe como o programa responde dinamicamente.
CHECKLIST:
· Inserir um campo para o usuário digitar um número.
· Calcular a tabuada desse número utilizando JavaScript.
· Utilizar um loop “for” para gerar as multiplicações de 1 a 10.
· Exibir dinamicamente os resultados na página usando manipulação do DOM.
· Testar a funcionalidade com diferentes números para verificar a precisão dos cálculos.
· Revisar e refinar a implementação para garantir que todos os requisitos sejam atendidos.
· Preparar a página e os arquivos necessários para submissão ou uso final.
RESULTADOS
Para comprovar a realização da atividade, é necessario entregar um relatório no formato .docx ou
.pdf, contendo:
· Todos os código implementados em HTML, CSS e JavaScript.
· Prints das telas do navegador executando a atividade.
RESULTADOS DE APRENDIZAGEM:
Essa atividade demonstra como integrar HTML, CSS e JavaScript para criar uma aplicação simples e interativa que utiliza a estrutura de repetição for para gerar e exibir a tabuada de um número escolhido pelo usuário.
3
Roteiro Aula Prática
DESENVOLVIMENTO EM JAVASCRIPT
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: LINGUAGEM DE PROGRAMAÇÃO
Unidade: 2 – Bibliotecas para Desenvolvimento em JavaScript
Aula: 2 – APIS de Navegador - Manipulando Áudio e Gráfico
OBJETIVOS
· Desenvolver uma animação básica usando o e JavaScript, onde objetos se movem e mudam de cor ao longo do tempo.
SOLUÇÃO DIGITAL
· Google Colab
LINK SOLUÇÃO DIGITAL (EXCETO ALGETEC): https://colab.google/
O Google Colab, ou Colaboratory, é uma plataforma gratuita baseada na nuvem oferecida pelo Google. Ela fornece um ambiente de notebook interativo e colaborativo que permite a criação e execução de código diretamente no navegador, sem a necessidade de configurar ou instalar qualquer software no seu computador.
PROCEDIMENTO/ATIVIDADE ATIVIDADE PROPOSTA:
· Nesta atividade, você irá criar uma página web que contém uma animação simples utilizando o elemento do HTML5. A animação consistirá em objetos (por exemplo, círculos) que se movem ou mudam de cor ao longo do tempo.
PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE:
1. Configuração do Projeto:
Crie um arquivo HTML com um elemento e um arquivo JavaScript para a lógica da animação.
2. Desenvolvimento da Animação: Configuração Inicial:
Defina o tamanho do e obtenha o contexto 2D do canvas em JavaScript. Desenho de Objetos:
2
Crie e desenhe objetos (por exemplo, círculos, retângulos) no usando métodos como ctx.beginPath(), ctx.arc(), ctx.fillRect(), por exemplo.
Animação Básica:
Use o requestAnimationFrame para criar um loop de animação.
Dentro do loop, atualize as propriedades dos objetos (posição, cor, tamanho) para criar efeitos de animação.
Interatividade Opcional:
Adicione eventos de mouse para interagir com os objetos (por exemplo, clicar para mudar de cor).
CHECKLIST:
· Criar um arquivo HTML com um elemento .
· Definir o tamanho do e obter o contexto 2D em JavaScript.
· Desenhar objetos no usando métodos apropriados.
· Implementar um loop de animação com requestAnimationFrame.
· Atualizar propriedades dos objetos para criar a animação.
· Adicionar eventos de mouse para interatividade (opcional).
· Testar e ajustar a animação conforme necessário.
RESULTADOS
Para comprovar a realização da atividade, é necessário entregar um relatório no formato .docx ou
.pdf, contendo:
· Todos os códigos implementados em HTML, CSS e JavaScript.
· Prints das telas do navegador executando a atividade. (Comprovando que o círculo está mudando de cor).
RESULTADOS DE APRENDIZAGEM:
Esta atividade prática introduz o estudante ao “canvas” do HTML5 e como ele pode ser utilizado para criar animações simples diretamente com JavaScript. Encoraje os alunos a experimentarem diferentes propriedades e métodos do contexto 2D (ctx) para explorar mais possibilidades de animação, como adicionar mais objetos, modificar velocidades e implementar interações adicionais com o usuário. Essa atividade é um passo para outros futuros projetos mais complexos envolvendo animações e gráficos dinâmicos no ”canvas”.
3
Roteiro Aula Prática
DESENVOLVIMENTO EM JAVASCRIPT
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT
Unidade: 3 – Programação Orientada a Eventos
Aula: 4 – Eventos em Nível de Página
OBJETIVOS
· Desenvolver um projeto interativo que utilize eventos CSS e HTML5 para criar uma experiência dinâmica e envolvente para o usuário.
SOLUÇÃO DIGITAL
· Google Colab
LINK SOLUÇÃO DIGITAL (EXCETO ALGETEC): https://colab.google/
O Google Colab, ou Colaboratory, é uma plataforma gratuita baseada na nuvem oferecida pelo Google. Ela fornece um ambiente de notebook interativo e colaborativo que permite a criação e execução de código diretamente no navegador, sem a necessidade de configurar ou instalar qualquer software no seu computador.
PROCEDIMENTO/ATIVIDADE ATIVIDADE PROPOSTA:
· Nesta atividade, vamos criar um jogo simples de "Jokenpô" (pedra, papel, tesoura) utilizando HTML, CSS e JavaScript. O jogo permitirá ao usuário escolher uma das opções (pedra, papel ou tesoura) e competir contra o computador. Utilizaremos eventos CSS para animar as escolhas e eventos HTML5 para capturar interações do usuário.
PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE:
Estrutura do Projeto:
1. Crie um arquivo HTML com a estrutura básica.
· Campos para escolher entre pedra, papel ou tesoura
· Campo resultado
· Botão para reiniciar
2. Use CSS para estilizar o jogo e criar animações simples.
· Utilize sua criatividade
2
3. Utilize JavaScript para implementar a lógica do jogo e interações com o usuário.
· Pedra ganha da tesoura, perde para o papel.
· Papel ganha da pedra, perde para a tesoura.
· Tesoura ganha do papel, perde para a pedra.
CHECKLIST:
· Criar um arquivo HTML com a estrutura básica para o jogo.· Utilizar CSS para estilizar o jogo e criar animações simples.
· Implementar JavaScript para a lógica do jogo e interações com o usuário.
· Testar e ajustar a funcionalidade do jogo conforme necessário.
RESULTADOS
Para comprovar a realização da atividade, é necessário entregar um relatório no formato .docx ou
.pdf, contendo:
· Todos os código implementados em HTML, CSS e JavaScript.
· Prints das telas do navegador executando a atividade.
RESULTADOS DE APRENDIZAGEM:
Esta atividade prática permite aos alunos aplicarem seus conhecimentos em HTML, CSS e JavaScript para criar um jogo interativo completo de "Jokenpô". Tendo a oportunidade de praticar a manipulação de eventos HTML5 para interações do usuário e de explorar o uso de transições CSS para melhorar a experiência visual do jogo e expandir o projeto, adicionando novas funcionalidades e personalizações para enriquecer ainda mais a experiência de jogo.
3
Roteiro Aula Prática
DESENVOLVIMENTO EM JAVASCRIPT
ROTEIRO DE AULA PRÁTICA
NOME DA DISCIPLINA: DESENVOLVIMENTO EM JAVASCRIPT
Unidade: 4 – Frameworks - Bibliotecas para Desenvolvimento em JavaScript
Aula: 2 – Angular
OBJETIVOS
· Criar um projeto simples em Angular para praticar a criação de componentes e módulos.
· Configurar o ambiente de desenvolvimento inicial para Angular.
SOLUÇÃO DIGITAL
· Visual Studio Code
LINK SOLUÇÃO DIGITAL (EXCETO ALGETEC): https://code.visualstudio.com/download
Visual Studio Code (VS Code) é um editor de código-fonte desenvolvido pela Microsoft, amplamente utilizado por desenvolvedores de software devido à sua versatilidade e performance.
PROCEDIMENTO/ATIVIDADE
ATIVIDADE PROPOSTA:
· Desenvolver um site simples utilizando Angular, focando na criação de componentes, módulos e na configuração inicial do ambiente.
PROCEDIMENTOS PARA A REALIZAÇÃO DA ATIVIDADE:
Passo 1: Configurando o ambiente
Node.js e npm: Verifique se o Node.js está instalado. O Angular requer o Node.js versão 12.x ou superior e o npm (gerenciador de pacotes do Node.js).
· Instale o Node.js em nodejs.org.
Instalação do Angular CLI: O Angular CLI (Command Line Interface) facilita a criação e a configuração de projetos Angular.
· Abra o terminal (ou prompt de comando) e execute o seguinte comando:
npm install -g @angular/cli
· Isso instala o Angular CLI globalmente na sua máquina.
2
Passo 2: Criando um Novo Projeto Angular
1. Criação do Projeto: Agora seu ambiente está pronto para criar um novo projeto Angular.
· No terminal, execute o comando:
ng new nome-do-seu-projeto
· Substitua nome-do-seu-projeto pelo nome escolhido por você para o seu projeto.
2. Seleção de Recursos: Durante o processo de criação do projeto, o Angular CLI fará algumas perguntas sobre recursos opcionais como o roteamento e o estilo de CSS a ser usado. Escolha de acordo com suas necessidades ou mantenha sem alterar os parâmetros.
3. Acessando o Projeto: Após a criação, navegue para o diretório do projeto:
· cd nome-do-seu-projeto
Passo 3: Entendendo Componentes e Módulos
1. Componentes: Os componentes são os blocos de construção básicos de uma aplicação Angular. Eles consistem em uma classe TypeScript que define o comportamento do componente e um template HTML que define sua aparência.
· Para criar um componente, use o Angular CLI:
ng generate component nome-do-seu-componente
· Isso criará automaticamente arquivos para o componente (arquivo TypeScript, HTML, CSS, etc.) e registrará o componente em um módulo.
2. Módulos: Os módulos no Angular são containers que agrupam componentes, diretivas, pipes e serviços relacionados, formando um contexto de funcionalidade.
· O módulo principal de um projeto Angular é o AppModule, que é criado automaticamente durante a criação do projeto.
· Para criar um novo módulo, use o Angular CLI:
ng generate module nome-do-seu-modulo
· Isso criará um novo módulo que você pode usar para organizar e encapsular funcionalidades específicas da sua aplicação.
Passo 4: Executando o Projeto
1. Servidor de Desenvolvimento: O Angular CLI inclui um servidor de desenvolvimento embutido.
3
· No terminal, dentro do diretório do seu componente, execute:
npm start
· Isso compilará seu projeto e iniciará um servidor de desenvolvimento. Por padrão, ele estará disponível em http://localhost:4200/. A porta 4200 é a porta padrão do Angular.
2. Visualizando no Navegador: Abra seu navegador e vá para http://localhost:4200/ para visualizar seu aplicativo Angular em execução.
CHECKLIST:
· Instalação do Angular CLI globalmente.
· Criação de um novo projeto Angular com o Angular CLI.
· Criação de componentes utilizando o Angular CLI.
· Configuração básica do projeto Angular com o arquivo ’angular.json’.
· Execução do projeto Angular localmente para teste.
RESULTADOS
Para comprovar a realização da atividade, é necessário entregar um relatório no formato .docx ou
.pdf, contendo:
· Todos os código implementados em HTML, CSS e JavaScript(Caso necessário).
· Prints das telas do navegador executando a atividade.
RESULTADOS DE APRENDIZAGEM:
Esta atividade prática proporciona uma introdução prática ao Angular, destacando a criação de componentes e a configuração inicial do ambiente de desenvolvimento.
Os alunos aprenderão a usar o Angular CLI para gerar componentes rapidamente e configurar um projeto Angular básico para desenvolvimento.
4
image1.png
image2.png
image3.png