1. Intro
1.1. O que vamos aprender nesta aula?
1.1.1. Vamos entender o que é o Javascript
1.1.2. Quais seus pontos mais importantes
1.1.3. Como deixar dinâmico nosso projeto usando ele
2. Teórico
2.1. O que é JAVASCRIPT?
2.1.1. Uma linguagem de programação
2.2. Para que serve o JAVASCRIPT?
2.2.1. Inicialmente ele foi desenvolvido para dar instruções para o browser (dizer como a página deve se comportar) como por exemplo alterar e injetar elementos na tela (exp: Mudar a cor e tamanho de um texto), mostrar pop ups e etc
2.2.2. Hoje em dia o javascript já é mais poderoso, podendo ser usado na criação de APPs mobile e diretamente nos servidores.
2.3. Tecnologias que tem como base o javascript
2.3.1. React: Construção de páginas web dinâmicas
2.3.2. React Native: Construção de APPs mobile
2.3.3. Electron: Construção de APPs desktop multiplataforma
2.3.4. NodeJs: Execução de código Javascript no servidor
2.4. Vamos começar dando alguns instruções ao browser usando recursos nativos do browser
2.4.1. alert("Meu primeiro Comando")
2.4.2. console.log("Meu primeiro Log")
2.5. Inserindo conteúdo em um elemento HTML
2.5.1. document
2.5.1.1. O document é um objeto javascript que nos permite interagir com qualquer elemento da nossa página
2.5.2. No HTML
2.5.2.1. <p id='demo'></p>
2.5.3. No Javascript
2.5.3.1. document.getElementById('demo').innerHTML = 'Hello JavaScript';
2.6. Mudando o estilo de um elemento com Javascript
2.6.1. No HTML
2.6.1.1. <p id='demo'>Mudando o estilo</p>
2.6.2. No Javascript
2.6.2.1. document.getElementById("demo").style.fontSize = "35px";
2.7. Onde inserir o javascript?
2.7.1. 1 - Dentro do arquivo HTML
2.7.1.1. <p id='demo'>Mudando o estilo</p>
2.7.1.2. script document.getElementById("demo").style.fontSize = "35px"; script
2.7.2. 2 - Em um arquivo separado
2.7.2.1. index.html
2.7.2.1.1. <p id='demo'>Mudando o estilo</p> script src="change_style.js"></script
2.7.2.2. change_style.js
2.7.2.2.1. document.getElementById("demo").style.fontSize = "35px";
2.8. Vamos falar um pouco mais profundamente sobre o javascript
2.8.1. O javascript é uma linguagem de programação, as linguagens de programação nos ajudam a escrever conjuntos de instruções para as máquinas usando algumas estruturas, conceitos e regras
2.8.2. O básico das estruturas e conceitos que compõe o javascript
2.8.2.1. Variáveis
2.8.2.1.1. Tipos de dados
2.8.2.2. Operadores
2.8.2.2.1. Atribuição
2.8.2.2.2. Aritméticos
2.8.2.2.3. Lógicos
2.8.2.3. Condicionais
2.8.2.3.1. if
2.8.2.3.2. else
2.8.2.3.3. else if
2.8.2.4. Loops
2.8.2.4.1. for
2.8.2.4.2. while
2.8.2.4.3. break
2.8.2.5. Funções
2.8.2.6. Eventos
2.8.3. Variáveis, constantes e tipos de dados
2.8.3.1. Variáveis e constantes no javascript são locais onde podemos armazenar dados
2.8.3.1.1. A maneira antiga de declarar variáveis
2.8.3.1.2. A nova maneira de declarar variáveis e constantes
2.8.3.2. Existem vários tipos de dados no javascript
2.8.3.2.1. Strings
2.8.3.2.2. Numeros
2.8.3.2.3. Boolean
2.8.3.2.4. Arrays
2.8.3.2.5. Objetos
2.8.3.2.6. No javascript os tipos são dinâmicos, então você pode usar a mesma variável para receber tipos diferentes em momentos diferentes do código
2.8.3.2.7. Para saber qual o tipo de dado tem dentro de uma variável você pode usar
2.8.4. Operadores
2.8.4.1. Operadores são os mecanismos da linguagem que nos permite colocar valores em variáveis, realizar operações matematicas, comparar valores e etc
2.8.4.1.1. Operador de atribuição
2.8.4.1.2. Operador aritmético
2.8.4.1.3. Operador lógico
2.8.5. Condicionais
2.8.5.1. As condicionais nos permitem tomar decisões durante a execução dos nossos códigos, por exemplo, se o valor digitado pelo usuário for 1 vamos executar um certo conjunto de instruções se o valor digitado for maior que 1 vamos executor outro conjunto de instruções
2.8.5.1.1. o if é o principal condicional, um exemplo do uso dele seria
2.8.5.1.2. Para tomar uma outra ação caso o size seja menor que 3 poderiamos usar dois if's
2.8.5.1.3. Mas a maneira mais prática de fazer isso é usando o else (que é executado sempre que a condição do if falha)
2.8.5.1.4. Caso a gente queira adicionar mais uma condição para tamanhos menores que 0 podemos usar o else if
2.8.6. Loops
2.8.6.1. Os loops são uma forma de executarmos o mesmo trecho de código N vezes baseado em alguma condição, por exemplo, imprimir 100 vezes "Hello World"
2.8.6.1.1. for
2.8.6.1.2. while
2.8.7. Funções
2.8.7.1. Até o momento escrevemos nossas instruções uma em baixo da outra sem uma organização e sem reaproveitar os códigos, agora vamos usar as funções para agrupar blocos de códigos
2.8.7.2. Um função serve para agrupar códigos que realizam uma tarefa especifica, por exemplo capturar os valores digitados pelo usuário e apresentar algum tipo de resultado com eles
2.8.7.3. Para uma função ser executada ela precisa ser invocada em alguma parte do código, vamos ver um exemplo simples de uma função que imprime algo na tela
2.8.7.3.1. function printMessage(message) { alert(message); } printMessage('Minha primeira função');
2.8.7.3.2. Vamos entender os elementos dessa função
2.8.7.4. Funções em geral retornam valores após a execução das instruções, um exemplo
2.8.7.4.1. function sum(a, b) { return a + b; } console.log(sum(10, 20);)
2.8.7.5. Funções vão além desses detalhes, mas essa já é uma boa base para você entende-las.
2.8.8. Eventos
2.8.8.1. Existem muitos tipos de eventos que podem acontecer em uma página Web
2.8.8.1.1. O usuário preencheu um campo
2.8.8.1.2. O usuário passou o mouse sobre determinado elemento
2.8.8.1.3. O usuário submeteu um form
2.8.8.2. Esses eventos podem ser capturados via javascript para tomarmos certas ações, por exemplo mostrar uma mensagem na tela quando o mouse passa sobre um botão
2.8.8.2.1. <button r="alert('Seu mouse passou por aqui')">Enviar</button>
2.8.8.2.2. Nesse caso colocamos o evento e o javascript no próprio elemento HTML
2.8.8.3. Também é possível definir qual função javascript vai rodar quando um evento acontecer fora do html, e nos vamos ver isso na prática
3. Projeto prático
4. Missões
4.1. Consultar a documentação do javascript e ler sobre os conceitos falados na aula
4.1.1. https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Introduction