Boas-vindas e Introdução

1

Criando sua primeira linha de código

2

Apresentação docurso e do professor Rafael Pacheco

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

Playground: pelo menos um dos números é par?

11

Calculando um peso em outro planeta

12

Obtendo os dados do usuário

13

Utilizando fluxos condicionais

Segundo projeto: Trabalhando com Canvas

14

Entendendo o problema

15

Entendendo os principais objetos em um navegador

16

Trabalhando com window e document

17

Trabalhando com DOM

18

Funções em Javascript

19

Eventos e Formulários em HTML e JS

20

Detectando eventos do teclado

21

Rabiscando o canvas com as setas do teclado

Terceiro projeto: Fazenda Platzi

22

Entendendo o problema

23

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

24

Trabalhando com ciclos (while e for)

25

Carregando imagens ao canvas

26

Carregando imagens ao canvas de forma aleatória

Quarto projeto: FizzBuzz

27

Entendendo o problema

28

Finalizando o projeto do FizzBuzz

29

Divisão, módulo e resto em Javascript

30

Codificando um FizzBuzz

Quinto projeto: Álbum de figurinhas

31

Entendendo o problema

32

Entendendo as coleções (Arrays)

33

Classes e objetos em Javascript

34

Analisando todas as figurinhas

Sexto projeto: Cliente e Servidor

35

Entendendo o problema

36

Modelo Cliente/Servidor

37

Instalando Node.JS e o framework express.js

38

Detalhes de instalação para o Windows e Mac

39

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

40

Criando uma API para descobrir as horas

41

Conclusão

Aulas ao vivo

42

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

Trabalhando com DOM

17/42
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 24

Perguntas 12

Ordenar por:

Quer ver mais contribuições, perguntas e respostas da comunidade?

Teacher: <p id="paragrafo>
eu: <p> id=“paragrafo”</p>
eu again: eu escreve isso igual @-@
eu again too: aaaaaah 😄

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!

Explosão de conhecimento.

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();

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

Porque temos que usar esse id?

Não funcionou aqui, já conferi várias vezes, mas ñ achei o erro.

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.

Simplesmente o código não vai, ja revisei tudo e nada. Mas bela aula, sempre explicando muito bem

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!! 😄

Excelente didática!!

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();
>

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

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

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

papel.stroke();

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.

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();