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 : 17H : 47M : 13S

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

Trabalhando com DOM

16/41
Recursos

O DOM nos permite mexer no conte√ļdo de uma p√°gina atrav√©s de um script. Atrav√©s dele, vamos come√ßar a implementar o nosso canvas. Ele funciona atrav√©s de um plano cartesiano com coordenadas no eixo X e Y, que, no nosso caso, vai de 0 a 400 pixeis em ambos eixos.

Através da especificação de um ponto inicial e um ponto final, podemos desenhar retas na nossa página e é isso o que faremos esta aula.

Contribui√ß√Ķes 23

Perguntas 12

Ordenar por:

As contribui√ß√Ķes, perguntas e respostas s√£o vitais para aprender em comunidade. Registre-se ou fa√ßa login para participar .

N√£o funcionou aqui, j√° conferi v√°rias vezes, mas √Ī achei o erro.

Teacher: <p id="paragrafo>
eu: <p> id=‚Äúparagrafo‚ÄĚ</p>
eu again: eu escreve isso igual @[email protected]
eu again too: aaaaaah ūüėĄ

No meu computador n√£o apareceu a linha !??
O que se pode fazer?

Porque temos que usar esse id?

Galera, no meu eu tive que baixar um pacote do canvas que continha o getElementaryById para funcionar, pois o meu não tinha. Outra coisa, o begin e close Path eu não declarei como função, ao invés de Patch();, coloquei sem o parenteses, só assim funcionou, porém ainda não consigo desenhar na tela toda ainda.

No console aparece a seguinte mensagem: canvas.getContex is not a function

O meu código:
var canvas = document.getElementById(‚Äúmeu-canvas‚ÄĚ);
var papel = canvas.getContex(‚Äú2d‚ÄĚ);

var x = 50;
var y = 50;

papel.beginPath();
papel.strokeStyle = ‚Äúred‚ÄĚ;
papel.lineWidth = 3;
papel.moveTo(x, y);
papel.lineTo(200, 200);
papel.stroke();
papel.closePath();

Explos√£o de conhecimento.

Dica: Se não estiver aparecendo a linha para você, indico que apague a pasta e crie uma nova. Refaça os códigos novamente com muita atenção.
Funcionou comigo!

Depois de fazer funcionar o script foi legal brincar um pouco com o tamanho da linha e do canvas.

n√£o consigo!!
ūüė¶

var canvas = document.getElementById(‚Äúmeu-canvas‚ÄĚ);

var papel = canvas.getContext(‚Äú2d‚ÄĚ);

var x = 50;
var y = 50;

papel.beginPath();
papel.strokeStyle = ‚Äúred‚ÄĚ;
papel.lineWidth = 3;
papel.moveTo(x, y);
papel.lineTo(200, 200);
papel.stroke();
papel.closePath();

n√£o consigo riscar. onde est√° meu erro?

var canvas = document.getElementById (‚Äúmeu-canvas‚ÄĚ)

var papel = canvas.getcontext(‚Äú2D‚ÄĚ)

var x = 50;
var y = 50;

papel.beginpath();
papel.strokestyle = ‚Äúred‚ÄĚ;
papel.linewidth = 3;
papel.moveto(x, y);
papel.lineto(200, 200);
papel.stroke();
papel.closepath();

Se algu√©m tiver problemas, e n√£o estiver conseguindo visualizar a linha na p√°gina, observar, como apontado aqui pela aluna @priscila-vilemen na pen√ļltima linha do ‚Äúscript.js‚ÄĚ, deve estar como ‚Äúpapel.stroke();‚ÄĚ e n√£o ‚Äúpapel.strokeStyle();‚ÄĚ

;D

n√£o consigo visualizar a linha. Onde tenho o error?

<
var canvas = document.getElementById("meu-canvas");
var papel = canvas.getContext("2d");

var x = 50;
var y = 50;

papel.beginPath();
papel.strokeStyle = "red"
papel.linewidth = 3;
papel.moveTo(x, y);
papel.lineTo(200, 200);
papel.strokeStyle();
papel.closePath();
>

Excelente did√°tica!!

Meu Deus! Isso é fantástico!
A cada aula eu fico mais ‚Äúhypada‚ÄĚ!!

JS e HTML s√£o completamente diferentes do que estou acostumada a lidar (C/Java/Python).
Estou amando muito cada aula!

Excelente did√°tica! Muito obrigada, professor!! ūüėĄ

Não entendi para que serve Stroke em 12.02 quando é escrita a linha

papel.stroke();

Aula super produtiva!

O meu código estava dando errado porque o código é basicamente casesensitive.

Escrevi:
beginPAth e closePAth, ao invés de beginPath e closePath

show

massa!

perfeito

Fiz e refiz varias vezes e n√£o funcionou. N√£o aparece nada.

Tentei muito e a minha linha não aparecia até que percebi onde estava o erro. em algumas linhas estava usando a variável papeR ao invés de papeL.