Platzi
Platzi

Aproveite nosso plano de lançamento!

Antes: R$ 499,00
R$ 349,00
Currency
Antes: R$ 499,00
Economize: R$ 150,00
COMPRAR
Termina em: 11D : 18H : 44M : 42S

Desenvolver programas de computador. Quarto projeto: FizzBuzz

Boas-vindas e Introdução

1

Bem-vindo ao curso e apresentação do professor

2

Criando sua primeira linha de código

3

Adicionando um pouco de teoria

4

Visão geral do curso

5

Preparando o ambiente

Conceitos básicos de programação para web

6

O que é HTML, CSS e JS?

7

Primeiros passos com a função alert no navegador

8

HTML, CSS e JS de verdade

Primeiro projeto: Peso em outro planeta

9

Entendendo o problema

10

Calculando um peso em outro planeta

11

Obtendo os dados do usuário

12

Utilizando fluxos condicionais

Segundo projeto: Trabalhando com Canvas

13

Entendendo o problema

14

Entendendo os principais objetos em um navegador

15

Trabalhando com window e document

16

Trabalhando com DOM

17

Funções em Javascript

18

Eventos e Formulários em HTML e JS

19

Detectando eventos do teclado

20

Rabiscando o canvas com as setas do teclado

Terceiro projeto: Fazenda Platzi

21

Entendendo o problema

22

Funções matemáticas e números aleatórios em JS

23

Trabalhando com ciclos (while e for)

24

Carregando imagens ao canvas

25

Carregando imagens ao canvas de forma aleatória

Quarto projeto: FizzBuzz

26

Entendendo o problema

27

Finalizando o projeto do FizzBuzz

28

Divisão, módulo e resto em Javascript

29

Codificando um FizzBuzz

Quinto projeto: Álbum de figurinhas

30

Entendendo o problema

31

Entendendo as coleções (Arrays)

32

Classes e objetos em Javascript

33

Analisando todas as figurinhas

Sexto projeto: Cliente e Servidor

34

Entendendo o problema

35

Modelo Cliente/Servidor

36

Instalando Node.JS e o framework express.js

37

Detalhes de instalação para o Windows e Mac

38

Criando seu primeiro código de servidor com express.js

39

Criando uma API para descobrir as horas

40

Conclusão

Aulas ao vivo

41

Sessão ao vivo: o que você vai aprender no curso

Você ainda não tem acesso a esta aula

Crie uma conta e continue vendo este curso

Eventos e Formulários em HTML e JS

18/41
Recursos

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:

As contribuições, perguntas e respostas são vitais para aprender em comunidade. Registre-se ou faça login para participar .

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.

aqui sai o botão mas não aparece linha nenhuma kkkk

OTIMA AULA.

Didática muito bacana!

Otima aula!

show

deu certo kkkkk

Vish… no meu não saiu nenhuma das linhas!!

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.

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!

está muito bem explicado, mas sem a teoria fica muito difícil memorizar, eu creio que ninguém vai gravar

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…

Excelente aula!

show

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.