A Didática é bem legal mas as vezes sinto falta de um pouco mais de teoria. Quem não tem base pode ficar meio perdido e ir apenas seguindo o fluxo… Depois pra fazer sozinho pode ficar um pouco complicado.
Boas-vindas e Introdução
Criando sua primeira linha de código
Apresentação docurso e do professor Rafael Pacheco
Adicionando um pouco de teoria
Visão geral do curso
Preparando o ambiente
Conceitos básicos de programação para web
O que é HTML, CSS e JS?
Primeiros passos com a função alert no navegador
HTML, CSS e JS de verdade
Primeiro projeto: Peso em outro planeta
Entendendo o problema
Playground: pelo menos um dos números é par?
Calculando um peso em outro planeta
Obtendo os dados do usuário
Utilizando fluxos condicionais
Segundo projeto: Trabalhando com Canvas
Entendendo o problema
Entendendo os principais objetos em um navegador
Trabalhando com window e document
Trabalhando com DOM
Funções em Javascript
Eventos e Formulários em HTML e JS
Detectando eventos do teclado
Rabiscando o canvas com as setas do teclado
Terceiro projeto: Fazenda Platzi
Entendendo o problema
Funções matemáticas e números aleatórios em JS
Trabalhando com ciclos (while e for)
Carregando imagens ao canvas
Carregando imagens ao canvas de forma aleatória
Quarto projeto: FizzBuzz
Entendendo o problema
Finalizando o projeto do FizzBuzz
Divisão, módulo e resto em Javascript
Codificando um FizzBuzz
Quinto projeto: Álbum de figurinhas
Entendendo o problema
Entendendo as coleções (Arrays)
Classes e objetos em Javascript
Analisando todas as figurinhas
Sexto projeto: Cliente e Servidor
Entendendo o problema
Modelo Cliente/Servidor
Instalando Node.JS e o framework express.js
Detalhes de instalação para o Windows e Mac
Criando seu primeiro código de servidor com express.js
Criando uma API para descobrir as horas
Conclusão
Aulas ao vivo
Sessão ao vivo: o que você vai aprender no curso
Você não tem acesso a esta aula
Continue aprendendo! Junte-se e comece a impulsionar sua carreira
Se você já tem uma conta,
Eventos e Formulários em HTML e JS
19/42Recursos
Formulário é uma maneira de pedir ao usuário determinados dados e submetê-los para que sejam processados dentro do script. Para utilizar formulários, precisamos usar o conceito de eventos. Um evento é gerado ao fazer determinadas ações como clicar um botão, redimensionar a janela do navegador, etc…
Vamos criar um botão através do HTML, usando a tag input como no exemplo:
<input type="button" value="Desenhar linha vermelha" id ="botao"/>
Feito isso, podemos obter o objeto no JavaScript através do uso da função document.getElementById(“botao”) e adicionar um event listener para que quando o botão gere um evento de clique, a função de nossa escolha possa ser executada.
var botao = document.getElementById("botao");
botao.addEventListener("click", desenhaLinhaVeremelha);Contribuições 20
Perguntas 0
Ordenar por:
aqui sai o botão mas não aparece linha nenhuma kkkk
OTIMA AULA.
deu certo kkkkk
Vish… no meu não saiu nenhuma das linhas!!
Didática muito bacana!
Otima aula!
show
está muito bem explicado, mas sem a teoria fica muito difícil memorizar, eu creio que ninguém vai gravar
Excelente aula!
Achei interessante saber que o botão fica automaticamente no final do canvas, eu estava brincado com essa propriedade anteriormente então o botão parecia não aparecer para mim mas na verdade ele estava no final do meu canvas que era de 1200 x 1200.
Fiquei na dúvida se em botao.addEventListener o botao se refere à variável botao ou ao elemento botao do id
muito bacana!
Tem que verificar cada código, caso erre nem que seja uma letra ou símbolo não vai mostrar na página é sempre bom rever o vídeo e o passo a passo.
Consegui =)
To gostando de JS
Gostando muito da didática, tá show!
Só aparece o botão mais não aparece as linhas esse comando canvas não esta dando certo aqui .
ja fiz e refiz varias vezes e não já não sei o que fazer.
<!DOCTYPE html>
<html>
<head>
<title>Entendendo o DOM</title>
<meta charset=“utf-8”>
</head>
<body>
<input type=“button” value=“Desenhar linha vermelha” id=“botao”/>
<canvas id=“meu-canvas” width=“400px” height=“400px” ></canvas>
<script src="script.js"></script>
</body>
</html>
var canvas = document.getElementById(“meu-canvas”);
var papel = canvas.getContext(“2d”);
var x = 50;
var y = 50;
var botao
desenha(“red”, x, y, 200, 200)
desenha(“green”, x+150, y, 200, 200)
function desenhar(cor, xInicial, yInicial, xFinal, yFinal){
papel.beginPath();
papel.strokeStyle =cor;
papel.lineWidth = 3;
papel.moveTo(xFinal, yFinal);
papel.lineTo(xFinal, yFinal);
papel.stroke();
papel.closePath()
}
Estou gostando bastante…
Acabei excluindo a resposta do professo por engano. Mas a pergunta era: Como comentar blocos de código por atalho.
A resposta: Para comentar basta selecionar com o mouse o código e pressionar CTRL+K+C para comentar e CTRL+K+U para remover o comentário. Serve para linha ou bloco.
show
Quer ver mais contribuições, perguntas e respostas da comunidade?