segunda-feira, 14 de abril de 2014

[JavaScript] - Função onmouseover

Olá pessoal, nesse post iremos brincar um pouco com manipuladores de evento com JavaScript. Iremos mexer com a função onmouseover.

A função onmouseover é referente ao evento de passar o mouse sobre algum elemento. Vamos fazer um exemplo com um botão, um texto será alterado quando passar o mouse sobre esse botão. Veja uma imagem que representa a execução do que iremos fazer:


Veja  o código HTML, código bem simples que chama um script caso o usuário passe o mouse pelo botão.


Veja o código JavaScript:



Veja que o botão (button) possui o evento onmouseover que chama a função incNumero() que pertence ao nosso script. Toda vez que o usuário passar o mouse por esse botão, então será executada a função incNumero() que está no arquivo JavaScript.

Na linha 2 do script é utilizada a função getElementById() para obter o elemento através do ID. Com o innerHTML eu tenho o valor da div cujo ID é "info".

Na linha 3 é "quebrado" o texto por espaço em branco para procurar pelo número que representa a quantidade de vezes que o usuário passou o mouse pelo botão.

Na linha 5 é feito um for para procurar pelo número. Na linha 6 é utilizada uma expressão regular que procura por números. Se achou o número, então esse número é guardado na variável "num" e depois é utilizado o break para sair do loop.

Na linha 11 é utilizada a função parseInt() para transformar a string para number e depois incrementar na unidade.

Na linha 12 é construída a informação da div com a quantidade de vezes atualizada. Por último, na linha 13, é atualizada a informação da div.

Quaisquer dúvidas deixem nos comentários, até a próxima.


Nenhum comentário: