SchultzGames
Para tirar dúvidas, crie um tópico especifico na área "Dúvidas em Geral" e aguarde ser respondido. Evite comentar em tópicos não relacionados a sua dúvida :D
TÓPICOS RECENTES:
Tópico:
Postado em:
Postado por:
Luz
Teleporte do player com outro objeto!
[____TÓPICO LIVRE____] FALE O QUE QUISER (Parte 2)
Diferença em usar áudios .mp3, .wav, .ogg e outros?
Horizonte
[TUTORIAL] Como fazer um Sol Realista na Unity 5 ( Sun Shafts )
Meu mais Novo Jogo Evade Z-51
Transição de cenas Bug com Scripts
Como faço um pulo de colisão?
Meu personagem parou de andar , sem que eu alterasse ele
Problema com terreno!
Jogo Quiz perguntas aleatórias
Pintura na tela
Anti Pirataria
Manter a última posic de objetos após sair e voltar de cena
Alguem me ajuda em um script!
Camera
Erros ao tentar build para android!
Media entre pontos e tempo!
Vídeo player não mostra nada
(Duvida)Sistema de estrelas
Filhos dos filhos
Construção de um save das configurações e ir pro jogo com as config certas
Duvida na hora da POSTAGEM na PLAY STORE
Auto posicionar objeto
Como dar um clique em um determinado botão através de Script
Como faço as personagens causarem dano (e vice-versa)?
Dúvida no uso de loop no Unity
Duvida em Python
Como usar LOD Group para usar no Mass Place Trees
Como Criar um Sistema de Coop? (Photon)
Fighter camera 3D tekken style, boxing style
Erro no Script- "The script needs to derived from MonoBehavior"
[TUTORIAL] Fixed Joint e Spring Joint - Unity 5
Música Grátis
Not a Dream - Formação de Equipe
Como deixar o código mais dinâmico
Duvida Shader para celular
Ideia para algum jogo
Aplicativo não instalado
Tela cheia em android
duvida de raytracing
[Em Desenvolvimento] Battles of Worlds
[Formação de Equipe] Battles of Worlds
Box Collider 2D Pausando o Jogo.
Como fazer um sistema para conectar objetos?
Jogos Pagos e proteção
[DÚVIDA] sair som do objeto ao pressionar uma tecla
Seleção de personagens sem usar ele como prefab
Duvida Postagem na Play Store
Fazer o player rodar a animação até o final
Ofuscar
Preciso de Ajuda Estou a desenvolver um projeto!
[TUTORIAL] Joystick vistual para mobile
desativa objecto
IDE editor C#
Porque o meu BoxCollider2D não desativa?
Sistema De Skin Na Unity
erro ao abrir projeto na unity 2019.2.0
Jogador Flicando no chão
Mostrar eventos no Inspector
[TUTORIAL] Menu Pause AVANÇADO (Unity 5.3 ou superior)
Algumas Maneiras de Ganhar Dinheiro Com o Blender e Modelagem 3D
[TUTORIAL] Salvar SCORE e substituir caso faça mais pontos.
aplicativo travando
e ai galera to tendo poblema com wheel collider
Shader Editor travando a cada alteração nas propriedades
Tela inteira no Android
Scale Factor de Modelos Faz Diferença Na Performacer do Jogo?
Picos de Queda de FPS!
ERRO NA UNITY, AJUDEM POR FAVOR
Como fazer uma tecla ser pressionado x vezes.
Vamos criar uma comunidade no Discord!
[Projeto em Andamento] Favela Combat - Multiplayer online (Android & iOS)
Como ativar e desativar o Box Collider utilizando o RayCast.
[RESOLVIDO] Player 2D girando ao descer de plataforma
Road Life - Jogo Mundo Aberto RPG
Como parar o spawn aleatório?
[RESOLVIDO] Pêndulo 2D
[RESOLVIDO] Como faço para clicar em um objeto e visualizar, girar...
Crio Ícones Personalizados Para Jogos
Metadados recusados AppleConnect [Screenshots]
Ajuda na criação de um jogo de Xadrez 3D
> Posso achar Bugs facilmente <
Meu Jogo inspirado em resident evil 2 remake
Unity + Photon 2
[RESOLVIDO] tira uma duvida
[TUTORIAL] Campo de visão dos inimigos (Enemy FOV) com Raycast ou OverlapSphere
Contagem de tempo em classes abstratas
Erro ao compilar em webGL
[RESOLVIDO] Animação na Movimentação (Parado, Andar e Correr)
[RESOLVIDO] Parâmetro "Out" não existe (Duvida com Script)
Duvida de movimentação de câmera 2D (Sem personagem)
[RESOLVIDO] Colocando meu jogo para 64 bits
(Animator) Animação bugada no animator!
[TUTORIAL] CONFIGURANDO O UNITY PARA COMPILAR PARA ANDROID
[RESOLVIDO] Porque o Vector2.Distance não está funcionando?
[TRETA BR] GAME QUASE FINALIZADO !
Algumas perguntas sobre cenas e transições
Ontem à(s) 11:54 pm
Ontem à(s) 6:48 pm
Ontem à(s) 6:32 pm
Ontem à(s) 1:37 pm
Ontem à(s) 8:06 am
Ontem à(s) 2:33 am
Sex Set 20, 2019 7:20 pm
Sex Set 20, 2019 6:54 pm
Sex Set 20, 2019 3:17 pm
Qui Set 19, 2019 10:54 pm
Qui Set 19, 2019 8:54 pm
Qui Set 19, 2019 2:59 pm
Qui Set 19, 2019 10:42 am
Qui Set 19, 2019 7:42 am
Qua Set 18, 2019 3:07 pm
Ter Set 17, 2019 8:22 pm
Ter Set 17, 2019 8:06 pm
Ter Set 17, 2019 4:10 pm
Ter Set 17, 2019 3:01 am
Ter Set 17, 2019 1:30 am
Seg Set 16, 2019 11:03 pm
Seg Set 16, 2019 8:21 pm
Seg Set 16, 2019 5:37 pm
Seg Set 16, 2019 4:07 pm
Seg Set 16, 2019 4:11 am
Seg Set 16, 2019 2:36 am
Seg Set 16, 2019 12:22 am
Dom Set 15, 2019 11:21 pm
Dom Set 15, 2019 8:29 pm
Dom Set 15, 2019 4:41 pm
Dom Set 15, 2019 3:52 pm
Dom Set 15, 2019 12:42 pm
Dom Set 15, 2019 12:41 pm
Dom Set 15, 2019 11:20 am
Dom Set 15, 2019 1:58 am
Dom Set 15, 2019 12:08 am
Sab Set 14, 2019 8:45 pm
Sab Set 14, 2019 7:55 pm
Sab Set 14, 2019 7:07 pm
Sab Set 14, 2019 7:06 pm
Sab Set 14, 2019 7:05 pm
Sab Set 14, 2019 6:58 pm
Sab Set 14, 2019 5:00 pm
Sab Set 14, 2019 4:57 pm
Sab Set 14, 2019 1:49 pm
Sab Set 14, 2019 12:37 am
Sex Set 13, 2019 10:58 pm
Sex Set 13, 2019 10:42 pm
Sex Set 13, 2019 8:58 pm
Sex Set 13, 2019 8:33 pm
Sex Set 13, 2019 8:28 pm
Sex Set 13, 2019 8:19 pm
Sex Set 13, 2019 8:17 pm
Sex Set 13, 2019 8:08 pm
Sex Set 13, 2019 8:06 pm
Sex Set 13, 2019 8:04 pm
Sex Set 13, 2019 2:40 pm
Sex Set 13, 2019 5:02 am
Sex Set 13, 2019 4:59 am
Sex Set 13, 2019 4:50 am
Sex Set 13, 2019 4:41 am
Sex Set 13, 2019 4:26 am
Sex Set 13, 2019 4:19 am
Sex Set 13, 2019 4:17 am
Sex Set 13, 2019 3:53 am
Sex Set 13, 2019 3:44 am
Sex Set 13, 2019 3:35 am
Sex Set 13, 2019 3:34 am
Sex Set 13, 2019 3:06 am
Sex Set 13, 2019 2:44 am
Sex Set 13, 2019 2:40 am
Sex Set 13, 2019 2:31 am
Qui Set 12, 2019 9:46 pm
Qui Set 12, 2019 9:46 pm
Qui Set 12, 2019 4:43 pm
Qui Set 12, 2019 3:22 pm
Qui Set 12, 2019 2:50 pm
Qua Set 11, 2019 10:05 pm
Qua Set 11, 2019 9:14 pm
Qua Set 11, 2019 1:16 pm
Qua Set 11, 2019 11:58 am
Qua Set 11, 2019 9:03 am
Qua Set 11, 2019 1:45 am
Ter Set 10, 2019 10:52 pm
Ter Set 10, 2019 6:28 pm
Ter Set 10, 2019 10:12 am
Ter Set 10, 2019 12:38 am
Seg Set 09, 2019 10:04 pm
Seg Set 09, 2019 6:08 pm
Seg Set 09, 2019 2:57 pm
Sab Set 07, 2019 7:23 pm
Sab Set 07, 2019 1:14 pm
Sab Set 07, 2019 12:12 pm
Sex Set 06, 2019 9:06 pm
Sex Set 06, 2019 11:44 am
Qui Set 05, 2019 11:30 pm
Qui Set 05, 2019 10:57 pm
Qui Set 05, 2019 6:26 pm
Qua Set 04, 2019 11:38 pm
richerd
NyanHeavyBR
JohnRambo
Fagner
Fagner
MarcosSchultz
EmperorGO
Encracker
MayLeone
mydaegon
lunaticsgames
MayLeone
Zack2
diegopds
MayLeone
gutovic29
Fagner
Daniel Dória
danielPedra90
ffabim
poyser
NKKF
lucaspoiob
gtcmcsgo
MayLeone
lesgoy
Swordsdragon
joffersoju
victorgx22
tr4ssh
deikson
Josh123
Samuelostgamer
welberpv2022
JohnRambo
LardosJogos
Hamassfall
SteveRogers
LúcioHenrique098
lesgoy
lesgoy
SteveRogers
Dom3000
Dom3000
Newba
henriquegames501
guimaraf
gcs13
garnios
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
NKKF
MayLeone
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
JohnRambo
dkrazor
recagonlei
CyberPh4ntom
NKKF
TecnoGames
Hamassfall
c4stor
Magnatah
numb123
JohnRambo
LardosJogos
RafaelSquid1
billybmx
katymarques
hao3726
MayLeone
Socates
LardosJogos
Newba
SteveRogers
garnios
JohnVitor
garnios
Hamassfall
ruanzikaad
Magnatah

[TUTORIAL] JavaScript & HTML - Eventos

Ir em baixo

TUTORIAL [TUTORIAL] JavaScript & HTML - Eventos

Mensagem por MayLeone em Seg Out 22, 2018 12:01 pm

[TUTORIAL] JavaScript & HTML - Eventos Js-logo-badge-512


Introdução:

Bem vindos a mais uma aula de Javascript aqui no blog! Hoje nós vamos abordar o assunto sobre eventos do JS que trabalham em conjunto com o HTML5!

O que são eventos?

De uma forma geral, podemos dizer que os eventos são ''reações'' de elementos HTML referentes a uma interação na página.
Podemos por exemplo, colocarmos um botão na página e fazer com que quando cliquemos no mesmo, uma alert apareça na tela.
Para fazer isso, crie uma estrutura básica de um documento HTML e dentro do corpo da página utilize a tag "button" para criar o botão:


[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B1



O resultado na página é apenas um simples botão, mas queremos que quando damos um clique sobre ele, apareça um alert na tela.
As tags em HTML além de comportarem os atributos, também podem disparar eventos em Javascript, para tal, basta colocar o nome do evento, e assim como fazemos com o atributo, utilizamos o sinal de igual (=) e entre as aspas duplas iremos inserir a ação a ser disparada pelo evento.
Em Javascript temos alguns eventos padrões que estão disponíveis nativamente pela linguagem, um deles chama-se "onclick", ou seja, alguma ação será executada se o elemento HTML for clicado.
Podemos então complementar a tag button da seguinte forma:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B2

onlick no caso é o nome do evento em Javascript que é disparado assim que o usuário clicar sobre o elemento HTML (no caso, o botão) enquanto dentro das aspas duplas temos a ação que o evento irá acionar, que seria um alert contendo uma mensagem.
Perceba também que o conteúdo do alert dessa vez está escrito entre aspas simples (' '), pois o alert já está inserido entre aspas duplas.
Salve e atualize a página, veja que ao clicar no botão, a mensagem aparece.


Chamar funções através de eventos:

Esta ação disparada (o alert) foi uma ação inline, ou seja, foi acionada na própria linha de ação do evento, mas caso queiramos desenvolver algo mais complexo podemos criar uma função que seja chamada através do evento, dessa forma, teremos um bloco de código mais completo e com mais comandos para que possamos desenvolver algo além de um alert na tela.
Podemos por exemplo, contabilizar quantas vezes o botão foi clicado, para isso, vamos criar um parágrafo que irá conter o texto, e dentro desse parágrafo criaremos um container inline (um span) que vai mostrar o valor de uma variável javascript que armazenará a quantidade de vezes que o botão foi clicado.
Para este span ser identificado no código javascript, podemos colocar um ID a ele:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B3

Criaremos agora o bloco de script da página, definindo dentro dele uma variável chamada "quantidadeCliques" inicializando em zero, e uma função chamada "ContarCliques" que vai novamente exibir o alert e incrementar a variável "quantidadeCliques":

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B4

Agora podemos chamar na tag "button" a função "ContarCliques" no evento:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B5
Perceba que se você testar, o alerta é mostrado, mas o texto do parágrafo não é alterado.
Para alterar o texto dentro do span e mostrar o valor da variável "quantidadeCliques" basta utilizar uma função em javascript que temos em "document" que é "getElementById" (obter elemento pelo id). Essa função nos retorna o elemento com o id informado, dessa forma, podemos manipular os atributos e até mesmo os conteúdos filhos daquele elemento referido, no caso, queremos mudar o conteúdo filho do span de id "registro-cliques", para isso, basta pegar (get) esse elemento através do id, e então alterar seu inner(conteúdo filho) para o valor da variável, assim:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B6

Teste você mesmo o efeito apresentado:


Clique-me!!
 

Você clicou 0 vezes no botão


Alterando atributos via eventos:

Você viu mais acima que podemos chamar funções e também alterar elementos filhos de tags utilizando os eventos, agora veremos um exemplo onde podemos alterar atributos de elementos HTML com os eventos através de funções.
Apague o conteúdo script e do corpo da página para que possamos prosseguir com o exemplo.
Vamos agora utilizar uma imagem para exemplificar as ações via eventos, para isso, salve na pasta do seu arquivo HTML duas imagens: eu salvarei as imagens de dois emojis da internet, ambos com as mesmas dimensões e em formato .png:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B7
Iremos fazer o seguinte: quando o usuário passar o mouse sob a imagem do emoji irritado, a imagem irá mudar para o emoji apaixonado, e assim que o usuário retirar o mouse dessa imagem, será mostrado novamente a imagem do emoji bravo.
Para tais ações, vamos utilizar dois eventos nativos em javascript: onmousemove (que vai ser disparado quando o usuário passar o mouse sob o elemento HTML) e onmouseout (que vai disparar quando o mouse não estiver mais sob o elemento).

Então crie a tag "img" com inicialmente a imagem do emoji bravo e defina esses dois eventos, onde cada um deles irá mostrar um arquivo src diferente, de acordo com a situação:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B8

Perceba a palavra reservada "this" no código. Essa palavra indica que nós iremos alterar os atributos do elemento daquela tag em específico, ou seja, iremos alterar o valor do src daquela própria tag que possui os eventos definidos.

Também podemos realizar esse processo (alteração de atributos de um elemento em HTML) de forma externa, chamando funções ao disparar tais eventos (como visto mais acima), por exemplo:
Iremos atribuir um id para essa tag de imagem chamado de "emoji" e criaremos dentro de um bloco script a função que faz a alteração da imagem, recebendo como parâmetro justamente a imagem a ser alterada:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B10
Salve e atualize a página e perceba que o efeito continua o mesmo visualmente, mas no código nós fizemos a alteração do atributo 'src' da tag img externamente através de uma função javascript, o que pode ser útil a você em casos que essas alterações devam ocorrer externamente num bloco de comandos mais complexos, ao invés de um comando inline, onde apenas utilizamos a palavra reservada 'this' para alterar o atributo da tag, como visto anteriormente.

Alternando vários elementos ao mesmo tempo:

Como sabemos, um elemento com id pode ser considerado único, por isso a função "getElementById" nos retorna apenas o elemento HTML com o id referido. Mas caso queiramos que vários elementos sejam alterados de forma similar ao mesmo tempo, podemos utilizar as classes.
Vamos salvar mais duas imagens de emojis na pasta onde se encontra o arquivo HTML para exemplificar o tutorial:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B11
Agora vamos criar 4 elementos HTML com a tag img com a imagem do emoji "emoji-happy" e vamos defini-los com uma classe chamada "grupo-emojis". O que faremos é: iremos mudar a imagem de todos esses elementos ao mesmo tempo para a imagem "emoji-kiss" quando o usuário clicar sobre qualquer um dos 4 elementos, para isso vamos utilizar o evento "onclick" do javascript, e uma função chamada "ClicarEmojis" para mudarmos o src dos elementos:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B14

Preste atenção apenas na definição da primeira tag img, as demais são apenas cópias para exibir mais três imagens iguais.

Como essas 4 tags estão definidas como classes, elas serão uma lista de elementos, e não um elemento único como o caso de ids, portanto, utilizar o "getElementById" não vai funcionar, para isso, precisamos utilizar a função "getElementsByClassName" que vai nos retornar um array dos elementos que contém essa classe como atributo:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B15

Agora podemos através do array "listaEmojis" alterar o atributo src de cada um dos elementos, para o conteúdo da variável "diretorio" que contém o caminho para a imagem 'emoji-kiss':

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B16

Melhor ainda ficaria o código com um laço de repetição:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B17

Podemos até criar uma variável para controlar os cliques do usuário, para que as imgs recebam novamente a imagem do emoji ''happy'' no próximo clique:

[TUTORIAL] JavaScript & HTML - Eventos Untitled%2B18


Finalização:

E aqui chega mais um final de aula aqui no fórum!
Ela foi destinada a introdução dos atributos de eventos em javascript e como eles podem ser disparados de diversas formas em nosso documento, mas ainda teremos outras aulas sobre este assunto, pois temos outras funcionalidades para destacarmos ainda (como adicionar um evento a um componente com JavaScript sem necessitar do HTML, através da função EventListener), portanto te vejo nas próximas aulas, até lá!
MayLeone
MayLeone
Instrutor

Feminino PONTOS : 1211
REPUTAÇÃO : 322
Áreas de atuação : Unity & C#
Respeito as regras : [TUTORIAL] JavaScript & HTML - Eventos Aad8pUi

Ver perfil do usuário http://compilemosfacil.blogspot.com.br

Voltar ao Topo Ir em baixo

TUTORIAL Re: [TUTORIAL] JavaScript & HTML - Eventos

Mensagem por NKKF em Seg Out 22, 2018 6:51 pm

Show! Poderia ensinar sobre manipulação de objetos também? Tipo rotação..
NKKF
NKKF
ProgramadorMaster

Masculino PONTOS : 2596
REPUTAÇÃO : 478
Idade : 14
Áreas de atuação : Error 404 Not Found.
Respeito as regras : [TUTORIAL] JavaScript & HTML - Eventos Aad8pUi

Ver perfil do usuário http://www.projetounity.esy.es

Voltar ao Topo Ir em baixo

TUTORIAL Re: [TUTORIAL] JavaScript & HTML - Eventos

Mensagem por MayLeone em Seg Out 22, 2018 9:37 pm

Rotação com svg?
MayLeone
MayLeone
Instrutor

Feminino PONTOS : 1211
REPUTAÇÃO : 322
Áreas de atuação : Unity & C#
Respeito as regras : [TUTORIAL] JavaScript & HTML - Eventos Aad8pUi

Ver perfil do usuário http://compilemosfacil.blogspot.com.br

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum