Вы находитесь на странице: 1из 1

01 Este curso foi atualizado!

02 Por que aprender JavaScript?


03 Por que estudar Javascript ?
<body>
<script>
console.log("Olá mundo");
</script>
04 Olá Mundo
com JavaScript <!-- Restante do index.html -->
</body>
No console:
console.log("Olá mundo JavaScript!");
05 Interpretando scripts no navegador Através da tag <script></script>.
06 Uma mensagem no navegador
document.querySelector("h1");
pesquisa apenas funções
<script>
console.log(document.querySelector("h1")) ;
</script>
traz todo o nome <h1> </h1>
07 Query <script>
Selector var titulo = document.quer ySelector ("h1");
console.log(título); // toda a tag <h1></h1>
console.log(titulo.textContent) // somente o texto
1-Introduç ão
titulo.textContent = "Lista de Clientes";

</script>
textContent dá acesso e tr az SOMENT E O T EXTO
<h2 class="titulo ">Aparecida Nutrição</h2>

<scr ipt>
08 Boas Práticas08min
var titulo = document.querySelector (".titulo" );
titulo.textContent = "Apar ecida Nutricionista";
</scr ipt>
09 Estrutura do curso
CTRL + SHIF T + J
10 Console do desenvolvedor ou
F12
11 Importando um arquivo externo <script src="contador.js"></script>

var men sagem = ("Seja bem vindo ao meu site.");


12 Mensagem de boas vindas
alert(mensagem );
13 Um tal de document Ela é a representação do DOM ou Document O bject Model
14 Apenas um pedacinho...
15 Mãos na massa: Download Inicial e Setup
16 Mãos na massa: O primeiro Javascript

trazendo o primeir o paciente no HT ML


<tr class="paciente" id="p rimeiro-pacien te">
id - seleciona o primeiro paciente
01 Buscando
dados do paciente No ar quivo javascr ipt
var pacien te = documen t.querySelecto r("#primeiro -p aciente");
console.log( paciente); - verifica se buscou
var tdPeso = paciente.qu erySelector( ".info-peso") ;
02 Acessando elementos (pega toda a linha)
dentro de outro elemento peso = tdPeso .textCon tent;
(pega somente o texto)
03 O prato do dia
imc = peso / (altura * altu ra);
04 Calculando e exibindo co nso le.log(imc);
o IMC corretamente var tdIMC = paciente .querySelector (".info- imc") ;
2-Variáveis tdIMC.textConten t = imc;
e Operadores 05 Desmembrando uma instrução em variáveis
06 O indicador enviesado
if (altura <0 || altur a >3.00) {
07 Operadores console.log("Altur a inválida!");
Lógicos altur aEhValida = false;
}

if(altur aEhValida && pesoEhValido) {


08 Validando e imc = peso / ( altura * altur a) ;
exibindo resultado tdIMC.textContent = imc;
}
09 Informações escapando
10 Restrigindo o acesso
11 Mãos na Massa: Calculando o IMC
12 Mãos na Massa: Validando os dados do usuário

a função querySelector apenas r etorna um único valo r.


Para selecionar tod as = qu erySelectorAll.
Retorna u m array de valores
01 Replicando a validação var pacientes = document.quer ySelectorAll( ".paciente") ;
e o cálculo do IMC for ( var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
para todos os pacientes
if (alturaEhValida && pesoEhValido) {
var imc = peso / ( altura * altur a) ;
tdImc.textContent = imc.toFixed(2);
}
No CSS
.p aciente-invalido {
backgro und-colo r: lightcoral;
}

02 Estilos com No javascript


JavaScript if ( peso <= 0 || peso >= 1000) {
console.log( "Peso inválido!");
3-Arrays, pesoEhValido = false;
Loop e tdImc.textContent = "Peso inválido";
Estilos paciente.classList.add ("paciente-invalido ");
}
22.02.Javascript
96 atividades / 20 horas 03 Calculando gastos
= 4,8 ativ/h 04 Seleção falhando
05 Um parágrafo azul par agrafo.style .colo r = "blue";
06 Mas e se for o fundo ? par agr afo.style .b ackgroun dColor = "blue";
07 Acessando as classes .classList
var titulos = document.quer ySelector All( "h2") ;

for( var i = 0 ; i < titulos.length ; i++){


08 Modificando os titulos var titulo = titulos[i] ;
titulo.classList.add("titulo") ;
}
09 Boa prática de estilos
10 Mãos na Massa: O IMC de todos os pacientes
11 Mãos na Massa: Melhorando a visualização d

titulo.addEventListener ("click", function (){


console.log( "Olha só posso chamar uma função anônim a")
}) ;
01 Escutando
titulo.addEventListener ("click", mostraMensagem) ;
eventos
function mostr aMensagem() {
console.log( "Posso chamar uma função nomeada") ;
}
02 O botão que falhou
03 Copiando valores
Evento padrão
4-Eventos, 04 Evitando o - Recar regar a página
Formulários e comportamento - Limpar o formulário e
- Enviar os dados
Criando padrão de um
evento event.preventDefault
Elementos previne o compor tamento padrão
05 Uma lista que não cresce
06 Adicionando
pacientes
na tabela
07 De declaração de função para função anônima
09 Criando um elemento
10 Mãos na Massa: Criando o formulário de adição de pacientes
11 Mãos na Massa: Adicionando um paciente na tabela
12 Para saber mais: event shortcut

01 Quebrando o código em arquivos diferentes05min


02 Agulha no palheiro!
03 Criando funções05min
04 Criando um objeto paciente11min
5-Boas 05 Objeto inválido
Práticas com 06 Melhorando ainda mais o código17min
Javascript 07 Sobre boas práticas de código
08 Quebrando o problema em partes menores
09 Separando responsabilidades
10 Mãos na Massa: Organizando o código em vários arquivos
11 Mãos na Massa: Extraindo mais códigos

01 Validando os dados do formulário12min


02 Exibindo mensagens de erro11min
03 Validando o restante dos campos17min
6-Validação de
04 Iterando com o forEach
Formulários
05 A propriedade innerHTML
06 Porque não consigo modificar o HTML interno de um elemento?
07 Mãos na Massa: Validando o form

01 Removendo pacientes11min
02 Um duplo clique
03 Delegando eventos14min
7-Remoção, 04 O escolhido foi você!
Delegação e
05 Analisando o código
Animação
06 Animando a remoção do paciente07min
07 Mãos na Massa: Removendo os pacientes
08 Mãos na Massa: Animando a remoção

01 Filtrando os pacientes da tabela12min


02 Verificando o tamanho da postagem
03 Implementando a lógica de filtragem07min
8-Filtrando 04 Filtrando com expressão regular09min
uma tabela 05 Criando uma Regex
06 Mãos na Massa: Filtrando a tabela
07 Mãos na Massa: Buscando pacientes
08 Para Saber Mais: Filtrando sem regex?

01 Introdução ao AJAX13min
02 O Objeto requisitor
03 Configurando nossa requisição
04 Tratando a resposta da requisição09min
05 Capturando erros de requisição08min
9-Ajax - Buscando
06 O XMLHttpRequest
pacientes c om AJAX
07 Encerramento02min
08 Mãos na Massa: Conectando com servidor
09 Mãos na Massa: Adicionando os pacientes na tabela
10 Mãos na Massa: Lidando com erros da requisição
11 Download do projeto final

terça-feira, 26 de março de 2019