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 : 43M : 24S

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

Funções em Javascript

17/41
Recursos

Uma função é um conjunto de instruções que pode ser chamado várias vezes pelo código para ser executado. Isso auxilia bastante a não ter repetição de código, quando as mesmas instruções precisam ser realizadas várias vezes em diferentes partes de um programa. Uma função pode receber argumentos, que são variáveis com valores iniciais específicos e retornar um valor de resposta para a parte do código de onde está sendo chamada.

Um exemplo de função bem simples:

function multiplica(x,y){
        var z = x*y;
        return z;
}

Contribuições 15

Perguntas 2

Ordenar por:

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

Muito bom resolvi o problema anterior e consegui fazer tudo certo nesta aula.
Obrigado.

Bom dia,

Neste exemplo, as retas vermelho e verde não estão coincidindo nas coordenas (200,200), e o código está correto, mais alguém com este problema?

Segue o código do script:

var canvas = document.getElementById(“meu-canvas”);
var papel = canvas.getContext (“2d”);

var x = 50; //ponto inicia da linha
var y = 50;

desenho (“red”, x, y, 200, 200)
desenho (“green”, x+150, y, 200, 200)

function desenho(cor, xInicial, yInicial, xFinal, yFinal){ //definindo a funcao

papel.beginPath(); //Começa a desenhar no papel
papel.strokeStyle = cor //cor da linha
papel.lineWidth = 3; //espessura da linha
papel.moveTo(xInicial, yInicial); //começa o desenho a partir desse ponto
papel.lineTo(xFinal, yFinal);
papel.stroke();
papel.closePath();

}

A reta verde não está aparecendo, está tudo certinho.

Muito bom!

Conteudo muito bom.

top

Mesmo colocando a cor nas variáveis, minhas linhas não ficam coloridas. Não sei se tem algo errado com o código ou se meu navegador não consegue ler. Segue:

var canvas = document.getElementById(“meucanvas”);
var papel = canvas.getContext(“2d”);

var x = 50;
var y = 50;

desenho(“red”, x, y, 200, 200)
desenho(“green”, x+150, y, 200, 200)

function desenho(cor, xinicial, yinicial, xfinal, yfinal){
papel.beginPath();
papel.stokeStyle = “cor”;
papel.lineWidth = 3;
papel.moveTo(xinicial, yinicial);
papel.lineTo(xfinal, yfinal);
papel.stroke();
papel.closePath();
}

Incrível

Gostaria de entender a necessidade destes atributos no final do código.
papel.stroke(); papel.closePath();

ja não tem o atributo lineWidth= 3; para isso?
se eu não colocar o traço vai infinitamente?
Agradeço a quem responder.

não sei porque mas simplesmente não consigo fazer o desenho e não sei mais o que fazer. Eu deveria baixar algum pacote ou extensão?

meu html
<!DOCTYPE html>
<html>
<head>
<title>aprendendo a desenhar</title>;
<meta charset = “utf-8”>;
</head>

<body>
<canvas id=“meu-canvas” width= “400px” height= “400px”></canvas>;
<script src = “script.js”></script>;
</body>
</html>

meu script
var canvas = document.getElementById (“meu-canvas”);
var papel = canvas.getContext(“2d”);

var x = 50;
var y = 50;

desenha (“red”, x, y, 200, 200);
desenha (“green”, x+150, y, 200, 200);

function desenha(cor, xInicial, yInicial, xFinal, yFinal){
papel.beginPath();
papel.strokeStyle= cor;
papel.lineWidth = 3;
papel.moveTo = (xInicial,yInicial);
papel.lineTo= (xFinal,yFinal);
papel.stroke();
papel.closePath();

}

Aí oh, me precipitei mas ensinaram funções agora hahaha

O curso cada vez mais vem me surpreendendo!

Muito massa!

TOP

muito bacana!