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:
Dúvida sobre Instanciate
posso divulgar o fórum em meu site?
Como ativa ou desativar o botão usando outro botão
build settings parou de funcionar!!!
Não consigo mais abrir projeto nenhum na Unity!
como desativar um script usando botão na unity
como fazer botão simular uma tecla do teclado para jogos android unity
Clonar partícula na cena.
Preciso de ajuda com GetMouseButton para dar play em audio
TRIGGER DE ANIMAÇÃO
Otimização
[RESOLVIDO] Rotação de um gameobject sem que os filhos se alterem?
Trigger Raio e Trovão
Não consigo desativar script de gameObject (C#)
Alguém poderia mudar esse script pra botão
Como desativar e habilitar o Skinned MeshRenderer?
Como transformar um vídeo em espaço editável na Unity?
[TUTORIAL] Inimigo seguir e atacar Player ao encostar
Trocar Personagem/Skin
Como faz para o jogo rodar mesmo quando minimizado?
Alguem poderia me ajudar com combo 2d?
Jogador pode escolher que tipo de pos processamento usar nas configurações?
Como se faz um sistema de combo pra mobile
Como fazer com que collider detecte colisao de objeto especifico?
Problema mudar de sprite sempre que seja adicionado um novo sprite a lista
Colocar video no unity
Imagem excedendo o limite da tela. Como resolver?
Erro no Android
Como abrir uma empresa de games?
Informação Importante sobre o Edge Collider 2D
Como consigo aquele efeito de lanterna imagem abaixo
Como posso usar a função OnClick nesse script
[TUTORIAL] Como carregar uma cena em segundo plano?
[Tutorial] Sistema de Combos (Mobile e PC)
Personagem sofre dando e continua de onde parou com condição.
Como Abrir Porta do Carro (Capo,PortaMalas, Portas) Mirando Nelas
[RESOLVIDO] Várias faixas de música
[RESOLVIDO] int Random.Range(int min, int max) para geração procedural ?
Como fazer o som funcionar de acordo com a velocidade do objeto
Alto falante Vibrar
[RESOLVIDO] Luz no interior
[TUTORIAL] Como Fazer com que as Luzes Iluminem apenas o que você deseja
Traduções e Dublagens de games
[RESOLVIDO] Cono mudar a Tag por script?
[RESOLVIDO] Qualidade do sprite - Compression
[TUTORIAL] Unity 3D - AnimationCurve
[RESOLVIDO] Partículas com imagem
[RESOLVIDO] DUVIDA SOBRE ATIVAR UM GAMEOBJECT ATRAVÉS DE UMA CONDIÇÃO
NavMesh não consegue reproduzir sprits de um jogador
NavMesh não faz animação do jogador
Bom dia amigos compro assets do meu interesse!
Criar Ranking Online
[TUTORIAL] ScrollView rapida e facil de fazer
colocar imagem no fórum
Unity ou Game Maker Studio
[TUTORIAL] Tocar audios de uma lista em uma sequência que se repete
Error CS0246, não sei o que fazer
Como faço pra um colisor não reconhecer outro colisor sem usar IsTrigger
[RESOLVIDO] Alteração de nomes e rastreamento das mudanças
Som unity
CHAVE DE ASSINATURA
[TUTORIAL]identificar se está no controle ou teclado
[TUTORIAL] Sistema de fome, sede, barra de vida, barra de estamina, itens e dano por queda
Não estou conseguindo ativar o evento do onClick após instanciar o botão
Exportar Modelo 3D da Unity
Duvida sobre Spawn
Dúvida sobre volatile
[UE4] Por favor me digam como me livrar do motion blur!
[RESOLVIDO] Float to transform
[RESOLVIDO] mudar a cor quando a personagem passa
Como ativar um 'Panel'
Como faço pra desligar e ligar outro text?
Como Faço Para Ativar/Desativar Material Por Script ?
como modificar o script para receber e registar o dano no personagem
[TUTORIAL] Inteligência artificial, inimigo e AIPoints
Meu personagem está tomando repulsão da parede
Problemas com IEnumerator
Meu personagem ta tremendo quando toca em alguma coisa
[TUTORIAL] Como criar tiro no Unity usando Raycast
Scripts travados
Como faço para mudar a posição de um objeto para perto de outro.
Alteração de personagens durante o jogo // parte 2
Como se faz uma grid, apenas e somente uma grid em 3D?
meu primeiro jogo pronto
quero corverter uma int em string
Como mudar a posição de um objeto constantemente sem estar na void Update
Como conseguir fazer para minha moto dar grau
[RESOLVIDO] Alteração de personagens durante o jogo
Como fazer um retrovisor leve para android?
Preciso de um script para andar de moto alguem consegue me ajudar
Como consigo fazer esse efeito de escurecer o ambiente ao atacar?
Como fazer pra selecionar um inimigo pra atacar de varios unity 2d
Setparent Photon
duvida em sistema de Horror de como pegar e solta objeto
[UE4] Como fazer cutscene com o próprio personagem?
Plataforma Flutuante
OS Tycoon (DEVLOG) - Crie seu próprio sistema operacional
[RESOLVIDO] Grande X vermelho
Como desativo o vsync em projeto para celular?
Hoje à(s) 12:09 pm
Hoje à(s) 11:57 am
Hoje à(s) 11:54 am
Hoje à(s) 11:49 am
Hoje à(s) 9:09 am
Ontem à(s) 4:27 pm
Ontem à(s) 2:32 pm
Ontem à(s) 2:25 pm
Ontem à(s) 12:41 pm
Ontem à(s) 10:12 am
Ontem à(s) 9:47 am
Ontem à(s) 3:34 am
Ontem à(s) 1:06 am
Qui Jan 21, 2021 10:59 pm
Qui Jan 21, 2021 7:56 pm
Qui Jan 21, 2021 5:11 pm
Qui Jan 21, 2021 3:47 pm
Qui Jan 21, 2021 11:17 am
Qui Jan 21, 2021 10:45 am
Qui Jan 21, 2021 9:54 am
Qua Jan 20, 2021 11:55 pm
Qua Jan 20, 2021 11:53 pm
Qua Jan 20, 2021 11:07 pm
Qua Jan 20, 2021 9:52 pm
Qua Jan 20, 2021 5:29 pm
Qua Jan 20, 2021 4:58 pm
Qua Jan 20, 2021 3:56 pm
Qua Jan 20, 2021 3:53 pm
Qua Jan 20, 2021 9:26 am
Ter Jan 19, 2021 10:30 pm
Ter Jan 19, 2021 8:28 pm
Ter Jan 19, 2021 4:48 pm
Ter Jan 19, 2021 6:49 am
Seg Jan 18, 2021 11:39 pm
Seg Jan 18, 2021 9:31 pm
Seg Jan 18, 2021 10:47 am
Seg Jan 18, 2021 10:34 am
Dom Jan 17, 2021 10:54 pm
Dom Jan 17, 2021 6:28 pm
Dom Jan 17, 2021 2:07 pm
Dom Jan 17, 2021 12:21 pm
Dom Jan 17, 2021 11:19 am
Dom Jan 17, 2021 11:17 am
Dom Jan 17, 2021 11:15 am
Dom Jan 17, 2021 1:44 am
Sab Jan 16, 2021 6:40 pm
Sab Jan 16, 2021 11:43 am
Sab Jan 16, 2021 11:12 am
Sex Jan 15, 2021 8:20 pm
Sex Jan 15, 2021 1:39 am
Qui Jan 14, 2021 9:53 pm
Qui Jan 14, 2021 7:44 pm
Qui Jan 14, 2021 5:35 pm
Qui Jan 14, 2021 3:55 pm
Qui Jan 14, 2021 2:07 pm
Qui Jan 14, 2021 1:51 pm
Qui Jan 14, 2021 12:56 pm
Qua Jan 13, 2021 6:57 pm
Qua Jan 13, 2021 2:45 pm
Ter Jan 12, 2021 11:14 pm
Ter Jan 12, 2021 8:14 pm
Ter Jan 12, 2021 3:16 pm
Seg Jan 11, 2021 6:26 pm
Seg Jan 11, 2021 5:55 pm
Seg Jan 11, 2021 10:51 am
Dom Jan 10, 2021 7:18 pm
Dom Jan 10, 2021 6:21 pm
Dom Jan 10, 2021 3:24 pm
Dom Jan 10, 2021 2:31 pm
Dom Jan 10, 2021 2:29 pm
Dom Jan 10, 2021 10:44 am
Sab Jan 09, 2021 9:30 pm
Sex Jan 08, 2021 9:14 am
Sex Jan 08, 2021 7:07 am
Sex Jan 08, 2021 1:02 am
Sex Jan 08, 2021 12:33 am
Qui Jan 07, 2021 7:31 pm
Qui Jan 07, 2021 5:31 pm
Qui Jan 07, 2021 3:51 pm
Qui Jan 07, 2021 3:49 pm
Qui Jan 07, 2021 12:12 am
Qua Jan 06, 2021 7:40 pm
Qua Jan 06, 2021 4:57 pm
Qua Jan 06, 2021 7:36 am
Ter Jan 05, 2021 5:29 pm
Ter Jan 05, 2021 1:58 pm
Ter Jan 05, 2021 10:35 am
Ter Jan 05, 2021 5:22 am
Ter Jan 05, 2021 1:00 am
Ter Jan 05, 2021 12:02 am
Seg Jan 04, 2021 4:33 pm
Seg Jan 04, 2021 3:24 pm
Seg Jan 04, 2021 3:15 pm
Seg Jan 04, 2021 2:23 pm
Seg Jan 04, 2021 2:06 pm
Seg Jan 04, 2021 8:56 am
Dom Jan 03, 2021 8:18 pm
Dom Jan 03, 2021 9:48 am
Dom Jan 03, 2021 4:14 am
Pokedlg
dutrabr100
Pokedlg
SauloeArthur
sopturn
Vans 123
SauloeArthur
Pokedlg
Charlesoff
Pokedlg
Fagner
ADSK
Pokedlg
wooZbr
Pokedlg
Pokedlg
dutrabr100
SauloeArthur
dutrabr100
NKKF
dutrabr100
dutrabr100
Pokedlg
SamoelBanner
Pokedlg
SauloeArthur
NKKF
orph
dutrabr100
acefogo
Fagner
Vans 123
amoraleite
Pokedlg
acefogo
dutrabr100
Pokedlg
dutrabr100
Pokedlg
savtoi
dragongirl
dutrabr100
Rangel Oblivion
dutrabr100
JoelMJunior
MarcosSchultz
dragongirl
dutrabr100
Ren Allen
Ren Allen
LucasGamerFx
SauloeArthur
NKKF
dutrabr100
SauloeArthur
Pokedlg
SauloeArthur
dutrabr100
Alexandre Santos
Pokedlg
starfreddybou69
diegopds
Super
dutrabr100
TIKO
dutrabr100
SauloeArthur
lesgoy
Fagner
Pokedlg
dutrabr100
Pokedlg
SauloeArthur
redPRO
glauco
Op3000
Pokedlg
JulioWinchester
SauloeArthur
SauloeArthur
Leozitu
Ren Allen
speedluk
SauloeArthur
BatataBugada54321
Pokedlg
Pokedlg
Ren Allen
Fagner
123
Pokedlg
macinhadeborracha
MRX
giowde
lesgoy
TIKO
Micco
Leonardo André
lesgoy

[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 : 2135
REPUTAÇÃO : 493
Áreas de atuação : Unity & C#
Respeito as regras : [TUTORIAL] JavaScript & HTML - Eventos Aad8pUi

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 : 3290
REPUTAÇÃO : 526
Idade : 16
Áreas de atuação : Desenvolvedor na Unity, NodeJS, React, ReactJS, React Native, MongoDB e Firebase.
Respeito as regras : [TUTORIAL] JavaScript & HTML - Eventos Aad8pUi

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 : 2135
REPUTAÇÃO : 493
Áreas de atuação : Unity & C#
Respeito as regras : [TUTORIAL] JavaScript & HTML - Eventos Aad8pUi

http://compilemosfacil.blogspot.com.br

Voltar ao Topo Ir em baixo

Voltar ao Topo


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