Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Projeto final, usando Arrays. Mas fiquei com 1 dúvida, poderiam me ajudar?

Pessoal, boa noite!

Utilizei um Array para a paleta de cores e pequenas modificações no código original. Será que ficou bom?

Além disso, fiquei com uma dúvida. Criei uma função "escolhaCor", dentro coloquei as condições para relacionar os quadrados as cores e usei o "return" para devolver uma cor, que está no indice do Array [0,1,2]. Porém, depois, também tentei o código sem o "return" e deu certo! Achei que como a função está devolvendo algo para a variável precisava do retorno, poderiam me dizer o pq funciona também sem ele?

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

    <script>
        function desenhaQuadrado(x, y, tamanho, cor) {
            pincel.fillStyle = cor;
            pincel.fillRect(x, y, tamanho, tamanho)
            pincel.fill();
        }

        function desenhaCirculo(x, y, raio, cor) {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14);
            pincel.fill();
        }

        function desenhaPaletaDeCores() {
            desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, cores[0]);
            desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, cores[1]);
            desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, cores[2]);
        }

        function lidaComMovimentoDoMouse(evento) {
            let x = evento.pageX - tela.offsetLeft;
            let y = evento.pageY - tela.offsetTop;

            if ((desenha == true)
                && (x > 155 || y > 55)) {
                desenhaCirculo(x, y, 5, corAtual);
            }
        }

        function habilitaDesenhar() {
            desenha = true;
        }

        function desabilitaDesenhar() {
            desenha = false;
        }

        function escolhaCor(evento) {
            let x = evento.pageX - tela.offsetLeft;
            let y = evento.pageY - tela.offsetTop;

            if (x >= 0 && x < 50 && y < 50) {
                return corAtual = cores[0];
            } else if (x >= 50 && x < 100 && y < 50) {
                return corAtual = cores[1];
            } else if (x >= 100 && y < 50) {
                return corAtual = cores[2];
            }

        }

        let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);

        let desenha = false;
        let corAtual = "blue"
        let xVermelho = 0;
        let xVerde = 50;
        let xAzul = 100;
        let yQuadrados = 0;
        let tamanhoQuadrados = 50;
        let cores = ["red", "green", "blue"]


        desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

        tela.onmousemove = lidaComMovimentoDoMouse; // acompanha o movimento do mouse

        tela.onmousedown = habilitaDesenhar; // enquanto o botão esquerdo estiver clicado, irá habilitar o "desenha"

        tela.onmouseup = desabilitaDesenhar; // quando o botão esquerdo for solto, irá desabilitar o "desenha"

        tela.onclick = escolhaCor; // quando clicar com o botão direito conforme especificações das coordenadas x/y, irá trocar de cor

    </script>
</body>

</html>
2 respostas
solução!

Olá Leonardo como vai você?

Ei estava analisando seu projeto e percebi que ele está muito bom, você evoluiu muito, PARABÉNS!

Para lhe explicar o porquê de seu projeto funcionar com e sem o return eu primeiro vou precisar lhe lembrar o que é o return e qual o seu uso, então por partes:

  • O que é o return ? e para que ele serve ?

O return é um parâmetro da linguagem de programação Javascript que tem como uso o retorno do que lhe é atribuído.

  • Mas eu não entendi direito pode ser mais específico ?

Sim, de forma bem simples, o return quando é utilizado retorna tudo aquilo que lhe foi atribuído, usando exemplos simples de uso para o return temos os seguintes programas:

EXEMPLO 1: Eu tenho uma pergunta e devo responder com sim ou não, mas não sei a resposta mas posso burlar o problema para ter o resultado como certo mesmo que eu erre:

<script>
function retornoDeResposta() {
    var respostaCerta = 7;
    var respostaErrada = 3;
    var escolhaAReasposta = prompt("Quanto é 5 + 2 ? Opções(7, 3);");
    if(escolhaAReasposta == respostaCerta){
        document.write("Você Acertou, PARÁBENS Você Passou !");
    } else if (escolhaAReasposta == respostaErrada) {
        return document.write("Você Acertou, PARÁBENS Você Passou !");
        //document.write("Você errou e está reprovado !");
    }
}
retornoDeResposta();
</script>

Dessa forma você irá ter o resultado “Você Acertou, PARÁBENS Você Passou !” não importa qual opção você escolha.

EXEMPLO 2: Você fez um programa, que serve para calcular o numero de roupas que você tem, e você fez o código corretamente dessa forma:

<script>
var camisetas = 10;
    var calças = 14;
    var meias = 6;
    var outros = 20;

function retornoDeRoupas() {
    var quantidadeDeRoupas = camisetas + calças + meias + outros;
    var totalDeRoupas = ("O total de roupas que eu tenho é " + quantidadeDeRoupas);
}

document.write(retornoDeRoupas());
</script>

Contudo o resultado que aparece é “undefined”, estranho né, mas isso acontece porque você somente calculou a quantidade de roupas e não mandou a função devolver esse resultado, assim de adicionar um return na function dessa forma:

function retornoDeRoupas() {
    var quantidadeDeRoupas = camisetas + calças + meias + outros;
    var totalDeRoupas = ("O total de roupas que eu tenho é " + quantidadeDeRoupas);
    **return totalDeRoupas;**
}

Dessa forma o resultado será “O total de roupas que eu tenho é 50”.

Agora explicando esses exemplos, se você analisar o return pode tanto servir como uma forma de “trapacear” para conseguir um resultado que você deseja quanto fazer com que o retorno de algo já definido anteriormente seja possível.

  • No seu projeto você usou o return para que ele devolvesse um comando para que caso o que estivesse na condição dos if e else if fosse verdadeiro, contudo mesmo que o return não estivesse ali o comando seria devolvido, pois os parâmetros if e else if já tem em sua própria configuração a funcionalidade de devolver o que lhes é atribuído, dispensando completamente a necessidade do return.
  • Assim respondendo a sua pergunta inicial, o resultado é o mesmo justamente porque o comando que você quer dar caso aconteça o que está dentro dos if e else if seria devolvido de uma forma ou outra graças á configuração padrão e funcionamento latente deles. Assim o return seria necessário somente se os parâmetros de if e else if não tivessem sido usados.

No geral era isso, caso tenha dúvidas recorra ao fórum novamente, estarei á sua disposição!

Um enorme abraço e ótimos estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.

Olá, RENAN

Sua resposta ficou ótima e está de uma forma tão direta que não deixou espaço para mais dúvidas. Só tenho a agradecer novamente por mais uma questão respondida!

Além disso, percebendo o seu conhecimento técnico e sua boa vontade em relação ao forum, posso afirmar desde já que você tem um grande futuro profissional e será uma pessoa muito relevante em nossa área.

Um forte abraço .

Att, Leonardo Xavier