Dúvida sobre o exercício de frações!

Oi Ana! Eu fico muito contente quando o aluno ou a aluna deseja ir além modificando o código proposto. Isso tem um grande valor para a aprendizagem.

Bom, agora vamos à análise do seu código, motivo pelo qual realizou esse post.

Bom, vou começar pedindo que você faça uma reflexão através de uma pergunta. Se eu leio o nome da função desenhaQuadrado, o que eu espero que ela faça? Eu espero que ela desenhe um quadrado, certo?

Porém, sua função faz mais de uma coisa, ela, além de desenhar o quadrado, exibe um texto. Nesse sentido, que tal ter duas funções, a desenhaQuadrado, responsável por desenhar quadrados e a exibeTexto (ou qualquer outro nome) que é especializada em escrever texto na tela para o usuário? Assim, você tem duas coisas bem divididas e quem quiser desenhar um quadrado sem exibir texto, conseguirá e quem desejar exibir um texto sem quadrado também.

Eu estou entrando nesse mérito porque a parte de lógica você demonstra ter aprendido, então para ir além, eu entro na questão do design do seu código.

Uma função deve ter uma finalidade única. Se ela faz muita coisa, o ideal é dividi-la em pequenas funções e combiná-las entre si para construir uma funcionalidade maior.

Tudo bem? Se quiser fazer essa alteração e postar o resultado aqui fique à vontade!

Sucesso e bom estudo, minha aluna!

Ah, sobre o código, tem duas coisas que posso destacar.

Não esqueça de declarar a variável dentro do seu for, Veja:

    for(x = 50; x < 400; x= x + 100){

Isso funciona, mas poderá lhe causar problemas quando evoluir na linguagem JavaScript. O ideal é:

    for(var x = 50; x < 400; x= x + 100){
    }

E você pode fazer um truque para incrementar o x de 100 em 100. Veja um exemplo:

var x = 0;
x+=100;
console.log(x);  //100
x+=100;
console.log(x); 200

Nesse sentido, você pode fazer seu for assim:

    for(var x = 50; x < 400; x+=100){
    }

Um pouquinho mais enxuto. Por fim, há esse trecho de código que não esta aumentando o tamanho da fonte:

pincel.font = "20 px Georgia";

O correto é:

pincel.font = "20px Georgia";

Tem que ser 20px, não pode separar a unidade de metida do valor. Quando fizer isso, verá que efetivamente a fonte estará maior.

É isso!

Sucesso e bom estudo mais uma vez!

Muito obrigada, professor! Suas respostas foram muito importantes pra mim!

Oi Ana, Também acabei fazendo este exercício com estrutura de repetição. No entanto fiz diferente de você, criei variáveis dividendo e divisor de forma que eu possa mudar a fração mudando apenas estas variáveis. E para preencher os quadrados fiz um for que varre o divisor e dentro dele um if que verifica se ainda estou na parte do dividendo preenchendo de verde (dividendo) e branco (divisor após acabar o dividendo).

A minha dúvida é em relação contador do for. Reparei que dava para aproveitar esta variável (i) para usar como entrada da variável x na função desenhaQuadrado. Posso fazer isso? é de boa pratica aproveitar variáveis para diferentes usos?

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaTexto(texto, x, y){
        pincel.font='20px Georgia';

        pincel.fillStyle='black';

        pincel.fillText(texto, x, y);
    }

    function desenhaQuadrado(x, y, tamanho, cor) {
        pincel.fillStyle = cor;

        pincel.fillRect(x,y,tamanho,tamanho);

        pincel.strokeStyle = "black";

        pincel.strokeRect(x,y,tamanho,tamanho);

    }

    var dividendo = 3
    var divisor = 4

    desenhaTexto("Qual a fração?", 30, 30);

    for (var i = 0; i < divisor; i++){
        if (i < dividendo) {
            desenhaQuadrado((i*50),50,50,"green");

        }else {
            desenhaQuadrado((i*50),50,50,"white");

        }
    }

</script>