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:
DUVIDA MONETIZAÇÃO DE JOGOS NA PLAY STORE COM ADMOB
sistema de dinheiro
[TUTORIAL] Simples Sistema De Noite e Dia
Quanto Devo Cobrar Por Um Pacote De Modelos 3D ?
Qual a sua opinião sobre modelos de negócio e monetização de jogos?
Simulador de policia [C#] [Jogo em andamento] [Procurando Equipe]
Ajuste em sistema de pontuação!
Tela de seleção e multiplayer local
Documentação do Unity Offline em Português Existe???
[DÚVIDA] BONECO NÃO PULA NA DIAGONAL ESQUERDA E FRENTE
Não consigo atribuir pontos no admob reward.
não concigo atirar
[YOUTUBE DOIDO?] Wtf?
Voltar versão do projeto.
Spawn Random simultâneo em pontos específicos
a iluminacao de pono nao esta passando para o teto , unity
Jogo não roda no Android 5 Samsung
QUERIA SABER SE POSSO VENDER MODELOS 3D AQUI ????
erro no scripts de dano no player 2D
Não Acho o Erro no Script - é um script para o player se mover
[HELP] Criação de dano e player health utilizando photon game 2d
[____ QUAL A OPINIÃO DE VOCÊS SOBRE O FÓRUM? ____]
Texto por Script
Problema com sprite na unity
inimigo não muda de sdirecao ao encostar em um ponto, unity 3d
"Dúvida" Como fazer o personagem entra dentro do carro e dirigir ?
Erro ao compilar
Função do Botão UI pelo Script
Pacote Com 79 Skybox Grátis
[Projeto em Andamento] Brazil Combat
[DÚVIDA] ANIMAÇÃO DE PULO NO CONTROLADOR QUE TEM BLEND TREE COM MOVIMENTO
[RESOLVIDO] Requisitos de hardware para Post Processing
alguem pode ajudar sobre ID@Xbox
[RESOLVIDO] Rigidbody: Alterar drag dentro do jogo
Inventário de Sobrevivencia
[RESOLVIDO] MOVIMENTO USANDO RIGIDIBODY NÃO POSSUI GRAVIDADE.
[____TÓPICO LIVRE____] FALE O QUE QUISER (Parte 2)
[TUTORIAL] Usando Delegates em Unity - Sistema de caixa de diálogo!
[DUVIDA] Tiro com botao touch android!!
KIT de Tiro em 3° Pessoa
Inimigo atacar e tirar vida do meu personagem!!
Inserir animação em certos elemento
Como bloquear rotação em um eixo do objeto?
Dica para jogo point and click
[RESOLVIDO] Alguem pode ajudar com o pos processamento screen space reflection
Criar Script para configurar um assets de um character
Dúvida de imagem sobre realidade aumentada
Modelo 3D
Erro ao exportar APK no unity
como fazer a bala dar impulso na direcao da arma unity 3d
Render Texture, Raw Image e camera
CENTRO DE ROTAÇÃO UNITY
PRESSIONAR BOTÃO TOUCH NO ANDROID SERÁ O MESMO QUE PRESSIONAR UMA TECLA DO TECLADO REAL
Erro após reinstalar o Unity!
Erro ao publicar na google play
[____ASSET____] MS Vehicle System (FREE VERSION)
[TUTORIAL] Unity 5.5 - Splash Screen
Como adicionar todos materiais de um Obj em um Array ou Lista?
Som não funciona no IOS
Como eu faço pra poder interagir apenas uma vez com um objeto de luz?
Preciso de ajuda com GetButtonDown with Axis
[TUTORIAL] Sistema de DIA E NOITE completo, com luzes noturnas e SISTEMA DE NUVENS
SOU MODELADOR SE TIVER ALGUEM PRECISANDO AI ME CONTATE
[TUTORIAL] IA Simples Parte 2 (Atirar)
Photon Bootcamp Asset completo
Detectando Colisão da Arma com o Inimigo
Como eu faria pra ter uma animação diferente para cada lado em um jogo de plataforma 2D?
duvida sobre sistema de cheats estilo gta sa
como fazer a luz ficar "important" e "not important" por script?
[TUTORIAL] Sistema de Entregas + GPS!
[TUTORIAL] Desenvolvendo um jogo de quebra-cabeças
[TUTORIAL] Gerando Objetos Proceduralmente
[RESOLVIDO] COMO EXECUTAR AUDIO QUANDO PLAYER MORRE
PopUp bloqueando versões antigas do jogo
[TUTORIAL] Sistema de PORTAS e CHAVES
Movimentação 3D View Blender
Imagem Aparecer como pergunta
Aparecer item comprado
Por que a UI da esse "BUG"?
Zerar os tempos do Cronometro Unity
Ajuda na unity
Girar personagem no próprio eixo usando joystick virtual
Problema com Esqueleto do personagem
[TUTORIAL] Script de Contagem Regressiva
Ajuda com o codigo.
Como acessar uma variável de um script utilizando como parâmetro uma variável nomescript
CRIEI MEU PRIMEIRO JOGO! 1 ANO DE TRABALHO!
MOVIMENTAÇAO DE UM CUBO
Duvida sobre materiais e textura
Super Husky - meu jogo
[RESOLVIDO] Duvida sobre Unity
[Em Desenvolvimento] Battles of Worlds
[RESOLVIDO] Converter string em virgula em float (decimal)
[TUTORIAL] Como usar FREE EASY CRIATURA CONTROLE IA
Duvida em relação processo de geração de receita
Me ajudem por favor
[RESOLVIDO] Posicionar interestial admob quando o personagem morrer
JOGO DE CARRO EM 2D E PRECISO DE AJUDA EM SCRIPT QUE VAI PRA FRENTE E PRA TRAZ
[RESOLVIDO] Abrir Tampa Ao Apertar o Botão do Mouse
Hoje à(s) 2:30 pm
Hoje à(s) 2:18 pm
Hoje à(s) 12:53 pm
Hoje à(s) 12:42 pm
Hoje à(s) 11:15 am
Hoje à(s) 8:48 am
Ontem à(s) 11:25 pm
Ontem à(s) 10:31 pm
Ontem à(s) 10:21 pm
Ontem à(s) 9:27 pm
Ontem à(s) 7:48 pm
Ontem à(s) 6:25 pm
Ontem à(s) 3:45 pm
Ontem à(s) 3:00 pm
Ontem à(s) 2:14 pm
Ontem à(s) 11:18 am
Ontem à(s) 2:03 am
Seg Jun 24, 2019 10:14 pm
Seg Jun 24, 2019 9:47 pm
Seg Jun 24, 2019 8:44 pm
Seg Jun 24, 2019 5:46 pm
Seg Jun 24, 2019 5:35 pm
Seg Jun 24, 2019 5:22 pm
Seg Jun 24, 2019 5:21 pm
Seg Jun 24, 2019 5:19 pm
Seg Jun 24, 2019 5:19 pm
Seg Jun 24, 2019 5:17 pm
Seg Jun 24, 2019 1:19 pm
Seg Jun 24, 2019 1:09 pm
Dom Jun 23, 2019 9:36 pm
Dom Jun 23, 2019 7:16 pm
Dom Jun 23, 2019 1:30 pm
Dom Jun 23, 2019 11:21 am
Dom Jun 23, 2019 10:52 am
Sab Jun 22, 2019 9:50 pm
Sab Jun 22, 2019 7:28 pm
Sab Jun 22, 2019 4:56 pm
Sab Jun 22, 2019 4:35 pm
Sab Jun 22, 2019 3:23 pm
Sab Jun 22, 2019 3:20 pm
Sab Jun 22, 2019 1:09 am
Sex Jun 21, 2019 5:51 pm
Sex Jun 21, 2019 1:20 am
Qui Jun 20, 2019 11:58 pm
Qui Jun 20, 2019 11:56 pm
Qui Jun 20, 2019 11:18 pm
Qui Jun 20, 2019 11:17 pm
Qui Jun 20, 2019 11:16 pm
Qui Jun 20, 2019 11:09 pm
Qui Jun 20, 2019 11:00 pm
Qui Jun 20, 2019 10:57 pm
Qui Jun 20, 2019 10:52 pm
Qui Jun 20, 2019 10:50 pm
Qui Jun 20, 2019 10:45 pm
Qui Jun 20, 2019 10:42 pm
Qui Jun 20, 2019 10:34 pm
Qui Jun 20, 2019 10:33 pm
Qui Jun 20, 2019 10:31 pm
Qui Jun 20, 2019 10:20 pm
Qui Jun 20, 2019 10:08 pm
Qui Jun 20, 2019 9:43 pm
Qui Jun 20, 2019 9:40 pm
Qui Jun 20, 2019 2:52 pm
Qua Jun 19, 2019 11:05 pm
Qua Jun 19, 2019 8:02 pm
Qua Jun 19, 2019 3:35 pm
Qua Jun 19, 2019 3:30 pm
Ter Jun 18, 2019 8:05 pm
Ter Jun 18, 2019 10:06 am
Ter Jun 18, 2019 10:02 am
Ter Jun 18, 2019 9:46 am
Seg Jun 17, 2019 9:42 pm
Seg Jun 17, 2019 8:17 pm
Dom Jun 16, 2019 1:16 pm
Dom Jun 16, 2019 4:03 am
Sab Jun 15, 2019 5:52 pm
Sab Jun 15, 2019 1:43 pm
Sab Jun 15, 2019 12:01 am
Sex Jun 14, 2019 10:47 pm
Sex Jun 14, 2019 9:39 pm
Sex Jun 14, 2019 9:20 pm
Sex Jun 14, 2019 8:56 pm
Sex Jun 14, 2019 8:31 pm
Sex Jun 14, 2019 7:09 pm
Sex Jun 14, 2019 6:26 pm
Sex Jun 14, 2019 8:59 am
Sex Jun 14, 2019 5:25 am
Qui Jun 13, 2019 7:33 pm
Qui Jun 13, 2019 1:02 pm
Qua Jun 12, 2019 8:26 pm
Qua Jun 12, 2019 5:27 pm
Qua Jun 12, 2019 3:54 pm
Qua Jun 12, 2019 2:50 pm
Qua Jun 12, 2019 12:13 pm
Ter Jun 11, 2019 5:26 pm
Ter Jun 11, 2019 3:43 pm
Seg Jun 10, 2019 12:24 pm
Dom Jun 09, 2019 3:19 pm
Dom Jun 09, 2019 2:21 pm
Diego Felix
Diguinho
JhoowGamer
Magnatah
JohnRambo
Giwn
danielPedra90
xxxlipehxxx
Magnatah
osiasbezerra
slevimk
DESTRUITOR
yurinogueira
SteveRogers
ffabim
Magnatah
lhm
Magnatah
DESTRUITOR
Diguinho
Diguinho
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
Caue
MarcosSchultz
NKKF
NKKF
JohnRambo
osiasbezerra
guimaraf
yurinogueira
JonathanDiego
yurinogueira
osiasbezerra
Tegh
Tegh
alisonzinhod
alisonzinhod
osiasbezerra
artplayer
MarcosSchultz
abraao36
diegopds
MarcosSchultz
numb123
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
XxzeroChinxX 999
Matrirxp
artplayer
MarcosSchultz
MarcosSchultz
Diguinho
MarceloYBP
JhoowGamer
Diego Felix
Matrirxp
Diego Felix
Diguinho
MarcosSchultz
lesgoy
MayLeone
Magnatah
glauco
Magnatah
Magnatah
Magnatah
Magnatah
Magnatah
artplayer
Tegh
fluminintia
diegopds
ronigleydson
GameLACK
poyser
Dom3000
numb123
Unidade3d5
poyser
JohnRambo
slevimk
Magnatah
williangamesbr4021

[TUTORIAL] JavaScript & HTML - Eventos

Ir em baixo

TUTORIAL [TUTORIAL] JavaScript & HTML - Eventos

Mensagem por MayLeone em Seg Out 22, 2018 1: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
ProgramadorMaster

Feminino PONTOS : 1003
REPUTAÇÃO : 260
Áreas de atuação : Unity, C++/C#, HTML, CSS, JS, jQuery, PHP, MySQL, XML, Blender
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 7:51 pm

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

Masculino PONTOS : 2474
REPUTAÇÃO : 470
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 10:37 pm

Rotação com svg?
MayLeone
MayLeone
ProgramadorMaster

Feminino PONTOS : 1003
REPUTAÇÃO : 260
Áreas de atuação : Unity, C++/C#, HTML, CSS, JS, jQuery, PHP, MySQL, XML, Blender
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