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

SOBRE O pageX

A minha duvida é a seguinte

 function dispara(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

Neste codigo acima:

Eu declaro a função dispara no qual temos como parametro "evento". Certo?

declaro as variaveis x e y essas variaveis receberam o parametro evento. pageX

Esse pageX é uma propriedade da onde? de quem? como um parametro pode ter propriedade definida se ele foi criado do zero?

Isso me trouxe um pouco de confusão.

3 respostas

O pageX é uma propriedade do próprio evento. Se você der um console.log(evento) vai ver que o evento é composto por várias propriedades, uma delas é o PageX.

Como essa é uma propriedade do evento, acessamos ela através ele. Usando a linha evento.pageX.

Acontece que quem envia esse parâmetro para a sua função dispara é o browser e na hora que ele enviar esse parâmetro ele criar diversas propriedades para ele, antes de enviar para a função.

Para entender um pouco melhor, continue o curso e depois comece a estudar Orientação a Objetos.

Agora me diz uma coisa

Se eu criar esta função:

function posicao (x) { var z = x.pageX - tela.offsetLeft; var j = x.pageY - tela.offsetTop; }

Isso então não dará certo ne?

Pois apenas da certo quando o nome do parametro é evento, isso?

solução!

Não, o problema não é o nome do parâmetro. O problema é o que você está recebendo como paramento. Por exemplo, no seu caso do método posicao(x):

function posicao (x) {
    var z = x.pageX - tela.offsetLeft;
     var j = x.pageY - tela.offsetTop; 
}
function mudarPosicao{
    posicao(10);
    posicao(1);
    posicao(99);
}

Nesse caso o que a função posição vai receber como parâmetro é o número 10, na segunda chamada dessa função ele vai receber o 1 e na terceira vez ele vai receber 99.

Esse código não vai funcionar,Independente do nome do parâmetro que colocamos na função posicao. Já que o número 10, 1 ou 99 não possuem a propriedade PageX.

O que acontece é que quem passa o parâmetro para o seu método dispara é o browser. Isso por que você registrou essa função com o evento de onClick do canvas.

function dispara(evento) {

        // descobre onde o usuário clicou para comparar a seguir com a posição atual do alvo
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

    ...
    }

    // associa a função `dispara` ao clique do canvas, ou seja, da nossa tela.
    tela.onclick = dispara;

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software