Alura Midi

Sumário

🔹 Descrição do Projeto

🔹 Curso Realizado e Conceitos Aprendidos

🔹 Deploy

🔹 Tecnologia Utilizada

🔹 Instituição de Ensino

🔹 Instrutora

🔹 Desenvolvedor

Descrição do Projeto

Esse Projeto foi desenvolvido durante um curso de JavaScript da Alura, com o objetivo de criar uma aplicação que reproduza os sons de instrumentos através do clique do mouse ou do uso de teclas do teclado. Para criação do Alura Midi as seguintes funcionalidades foram aplicadas:

• Aplicação do querySelector;
• Criação de uma função que reproduz os sons armazenados em elementos áudios no HTML;
• Permitir que a aplicação do Alura Midi seja controlada pelos botões feitos através do HTML e CSS;
• Adição da reprodução do som via teclado, usando "Enter" ou "Space";
• Código otimizado, com o objetivo de reduzir a repetição de código.

Curso Realizado e Conceitos Aprendidos:

JavaScript para Web: Crie Páginas Dinâmicas

• Clicando no botão:
  • Conhecemos a tag audio do HTML e como ela funciona, também como adicionar código JavaScript inline a partir do atributo onclick na tag button, e também como é a função alert() do JavaScript.
• Conectar JS com HTML:
  • Aprendemos porque devemos ter arquivos dedicados para cada linguagem, e a extensão .js para arquivos com JavaScript, porque chamamos o nosso arquivo principal de JavaScript de main.js, e também, como fazemos para inserir um arquivo .js dentro de uma página HTML com a tag script.
• Buscar um elemento:
  • Aprendemos os tipos de seletores que podemos usar no JavaScript (elemento, classe e id), como utilizar a função querySelector para selecionar os elementos da nossa página HTML. Vimos nesta aula a referência document, que representa o documento HTML dentro do JavaScript, e o significa o Reference Error e como solucionar, além de entender que o JavaScript é uma linguagem case sensitive, e uso do operador ponto final para entrar dentro de referências como o document, e que o ponto e virgula é opcional porém recomendado.
• Play no JS:
  • Como manipular a tag <audio> do HTML através do JavaScript, como selecionar um elemento a partir de um seletor de id e a reproduzir um som a partir da função play(). Além disso, viu também como os erros são apresentados na aba Console da ferramenta DevTools.
• O que é uma função?:
  • O que é uma função, para que servem, como declará-la e sua sintaxe básica. Além disso, viu que a ordem de execução de um código JavaScript importa, desde a inserção da tag script antes do fechamos da tag </body> no HTML até a ordem do código JavaScript dentro do seu próprio arquivo.
• Clique no botão:
  • A utilizar o onclick como atributo no JavaScript, e como atribuir uma função ao onclcik sem que esta função seja invocada imediatamente.
• Lista de elementos:
  • O que são os comentários de código e como utilizá-los para auxiliar durante a escrita da nossa aplicação. Vimos também uma alternativa ao querySelector quando necessário buscar muitos elementos, que é o querySelectorAll, que retorna uma lista (NodeList) com todos os elementos do seletor informado evitando a repetição de código.
• Referências:
  • Para que serve uma referência e como declaramos uma referência de valor constante no código.
• Conhecendo listas:
  • A estrutura de uma lista em JavaScript e como podemos acessar os elementos a partir dos índices com a sintaxe do colchetes.
• Percorrendo uma lista:
  • Como percorrer uma lista usando a estrutura de repetição while, a criar referências variáveis com let, e como incrementar o valor de uma variável, e criar uma condição para evitar o loop infinito, também conhecemos o atributo length contido nas listas que nos ajudou a obter dinamicamento o valor do tamanho de uma lista.
• Função com parâmetros:
  • Como declarar e utilizar parâmetros dentro de uma função que criamos, e o que é uma função anônima e o retorno undefined de uma função.
• Textos dinâmicos:
  • Como criar textos dinâmicos utilizando template string e como acessar as classes de um elemento através do atributo classList.
• Repetição otimizada com For:
  • Como é a estrutura de repetição for e como ela pode nos ajudar com um código mais limpo, além da forma de incrementar um valor de variável com o operador ++.
• Eventos no teclado:
  • O que são eventos do teclado e como usá-los: onkeydown e onkeyup. Como adicionar e remover classes em um elemento HTML através do JavaScript, com as funções add e remove do classList.
• Condições no código e operadores lógicos:
  • O que é o objeto event, como declarar e acessar ele através do parâmetro de uma função atrelada a um evento. A estrutura condicional if e para que ele serve, além de conhecer o operador de igualdade ==, estritamente igual (===), e o operador or (||).
• Mais condições:
  • A estruturas condicionais if e else juntas. O operador not equals (!=), operador lógico and (&&) e o valor null.

Deploy

https://diegosxe.github.io/Alura-Midi/

Tecnologia Utilizada

• JavaScript

Instituição de Ensino

Instrutora

Vanessa Me Tonini

Desenvolvedor

Diego Borelli Dias