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:
PlayerPrefs??
Modelo importado para Unity com os Pés tortos .
Animação com mão fechada
[TUTORIAL] Acessar nomes de arquivos diretamente da pasta
bloco de notas
[Duvida] Script de mover objeto usando o RigidBody
Erro com Post Processing e com canvas
Quero fazer um jogo plataforma 2.5d em curva (como Kirby 64), mas não sei.
[TUTORIAL] Criando um simples Multiplayer [UNITY 5]
Reproduzir animação com tecla?
[TUTORIAL] Mirar em jogo de fps igual COD, Battlefield e outros
[TUTORIAL] Ciclo de dia e noite com sync no multiplayer
[TUTORIAL] Salvar dados com playerprefs facilmente.
editor de imagem para perfil
Rotacionar player no eixo Y da camera
erro com carregamento de dados
facebook login
Quando o inimigo ataca todos os inimigos ativam a animação
[TUTORIAL] Como desenhar no Unity.
Objeto ter a mesma rotação que outro em apenas um eixo
Sistema De Marchas para Veiculos
[RESOLVIDO] Pegar o meu ping/latencia (Unet)
Alguém pode me dizer como usar as texturas,Normal map,Occlusion...
Começar em Game Design / Design
Material rosa no HDRender Pipeline como resolvo isso
Instanciate objeto lado a lado
[Duvida] movimentação de nave
[RESOLVIDO] Usando o SetActive para reativar um GameObject, ajuda!
Flamehead MMORPG Indie
erro de java
[TUTORIAL] Desenvolvendo um jogo de quebra-cabeças
[RESOLVIDO] Grafico quadriculado?
duvida com asset store
[TUTORIAL] Assinando um Apk e dicas de instalação e configurações
Como fazer um sistema para conectar objetos?
[RESOLVIDO] Unity sem som
Erro ao tentar compilar para Android
Como iniciar uma animação atraves de um clique em um objeto?
Error ao Gerar a KeyStore do Apk Android
Participe da Game Jam - Jaaj do canal Amdré Young!
[JOGO MOBILE] Defeat the Illuminatis
Alguém sabe como posso aplicar a movimentação agachado?!
Script de Spawn Aleatório
Sugestão para o Fórum - "Área Avançada"
(NavMesh) Objeto "Deslizando"
[____APOIE O FÓRUM E O CANAL E GANHE RECOMPENSAS____]
Alguém conhece algum bom tutorial para aprender Algoritmo genético em C# ?
Mudar cor de area
tela branca ao iniciar videoplayer
COMO FAÇO O SISTEMA DE CHUVA ESTILO ETS2 COM GOTAS NO PARA BRISA?
COMO FAZER SISTEMA DE BHOP ESTILO CS ? (BUNNY HOP)
A Arma mudar de posição de acordo coma movimentação
[PEDIDO] Rig Simples para esse modelo.
[TUTORIAL] Acionar a vibração do dispositivo
[TUTORIAL] CONFIGURANDO O UNITY PARA COMPILAR PARA ANDROID
Animação no movimento do mouse
[___COMO UTILIZAR O FÓRUM___] Principais botões e suas funções
[RESOLVIDO] Colisor
[TUTORIAL] Unity 5 - Wheel Collider, veículos, suspensão realista.
[RESOLVIDO] Como faço um limitador de tiros por distância?
[RESOLVIDO] Mudar a proporção
[RESOLVIDO] Vuforia bug
Objetos (itens) pegos na cena anterior não são destruídos quando volta para ela
Codigo em Python para colocar Imagens em POT (Power Of Two) e .exe
[RESOLVIDO] Error depois de copilar para Android?
[JOGO ANDROID] PLANET DEFENSE
Sistema de IAP Paypal ou parecido
[RESOLVIDO] JOGO SAINDO (ANDROID)
{Equipe} Programador que tenha interesse de participar de uma JAM.
Como fazer Sistema Dia e Noite Segui o sistema de Hora
fazer script pegar arquivo de som, porem o som sera colocado apos a build...
[RESOLVIDO] Mover Plataforma
Formação de Equipe ( Favela Killer)
[TUTORIAL] Escolher a quantos FPS (fixos) o seu jogo deverá rodar.
[Devlog] Lost in the world (1.2_beta)
AJUDA COM SCRIPT DE SISTEMA QTE
Tilesets de Floresta em Pixel Art
[RESOLVIDO] Sistema de login
(UNITY 3D) Mesh Splitter - Como separar uma Mesh em multiplos Game Objects?
Como fazer um sistema de compra de itens?
[JOGO] Tetris em Unity - Para tutorial
Modulo Xbox One
[RESOLVIDO] Pegar e Jogar armas no chão (estilo CS 1.6)
[RESOLVIDO] Como apagar parte da grama do terreno para fazer uma calçada?
[RESOLVIDO] Erro ao Copilar: Bug no personagem.
[Opinião] 2d ou 3d?
Como é feito esse efeito?
Teaser 2 do meu jogo
Shader com efeito de dissolução
[TUTORIAL] Geração de Mesh procedural (estilo Minecraft)
[RESOLVIDO] Erro no Baú
Problema ao mudar sprite entre objetos por conta do uso de joystick
Unity 3d TELA PRETA
[Duvida] Como chamar uma void criada por mim, apenas em determinados momentos.
Corcle (Mobile) - Um jogo simples com um nome estranho.
Bomb Battle Jogo Online Em Desenvolvimento
Ajuda com Visual Studio e MonoDevelop
[RESOLVIDO] Bug o material fica preto
[RESOLVIDO] Error para copilar para Android?
Hoje à(s) 3:40 am
Hoje à(s) 1:22 am
Hoje à(s) 1:15 am
Ontem à(s) 10:33 pm
Ontem à(s) 10:30 pm
Ontem à(s) 8:58 pm
Ontem à(s) 7:37 pm
Ontem à(s) 6:25 pm
Ontem à(s) 6:05 pm
Ontem à(s) 6:02 pm
Ontem à(s) 12:02 pm
Ontem à(s) 11:58 am
Ontem à(s) 5:48 am
Seg Jan 21, 2019 12:04 pm
Seg Jan 21, 2019 11:57 am
Seg Jan 21, 2019 10:51 am
Seg Jan 21, 2019 10:46 am
Dom Jan 20, 2019 6:32 pm
Dom Jan 20, 2019 5:33 pm
Dom Jan 20, 2019 1:46 pm
Dom Jan 20, 2019 4:26 am
Sab Jan 19, 2019 4:48 pm
Sab Jan 19, 2019 8:26 am
Sab Jan 19, 2019 3:45 am
Qui Jan 17, 2019 9:23 pm
Qui Jan 17, 2019 7:10 pm
Qui Jan 17, 2019 2:24 am
Qui Jan 17, 2019 1:48 am
Qui Jan 17, 2019 1:28 am
Qua Jan 16, 2019 6:28 pm
Qua Jan 16, 2019 11:35 am
Ter Jan 15, 2019 10:57 pm
Ter Jan 15, 2019 9:51 pm
Ter Jan 15, 2019 8:20 pm
Ter Jan 15, 2019 5:22 pm
Ter Jan 15, 2019 4:09 pm
Ter Jan 15, 2019 3:50 pm
Ter Jan 15, 2019 2:06 pm
Ter Jan 15, 2019 1:50 pm
Ter Jan 15, 2019 12:26 pm
Ter Jan 15, 2019 10:49 am
Ter Jan 15, 2019 3:27 am
Ter Jan 15, 2019 3:23 am
Ter Jan 15, 2019 3:19 am
Ter Jan 15, 2019 3:15 am
Ter Jan 15, 2019 3:13 am
Ter Jan 15, 2019 3:06 am
Ter Jan 15, 2019 3:04 am
Ter Jan 15, 2019 2:58 am
Ter Jan 15, 2019 2:47 am
Ter Jan 15, 2019 2:39 am
Seg Jan 14, 2019 6:58 pm
Seg Jan 14, 2019 5:54 pm
Seg Jan 14, 2019 2:20 pm
Seg Jan 14, 2019 7:28 am
Dom Jan 13, 2019 6:19 pm
Dom Jan 13, 2019 9:52 am
Sab Jan 12, 2019 8:10 pm
Sab Jan 12, 2019 4:08 pm
Sab Jan 12, 2019 2:41 pm
Sex Jan 11, 2019 10:28 pm
Sex Jan 11, 2019 8:41 pm
Sex Jan 11, 2019 8:31 pm
Sex Jan 11, 2019 12:11 pm
Sex Jan 11, 2019 7:33 am
Sex Jan 11, 2019 2:18 am
Qui Jan 10, 2019 1:04 pm
Qui Jan 10, 2019 12:58 pm
Qui Jan 10, 2019 12:50 pm
Qui Jan 10, 2019 9:23 am
Qua Jan 09, 2019 9:33 pm
Qua Jan 09, 2019 2:47 am
Qua Jan 09, 2019 12:17 am
Qua Jan 09, 2019 12:02 am
Ter Jan 08, 2019 10:24 pm
Ter Jan 08, 2019 5:00 pm
Ter Jan 08, 2019 3:51 pm
Seg Jan 07, 2019 10:42 pm
Seg Jan 07, 2019 10:26 am
Seg Jan 07, 2019 12:43 am
Dom Jan 06, 2019 5:16 pm
Dom Jan 06, 2019 2:22 pm
Sex Jan 04, 2019 3:15 pm
Sex Jan 04, 2019 2:29 pm
Sex Jan 04, 2019 2:25 pm
Sex Jan 04, 2019 12:38 pm
Qui Jan 03, 2019 12:35 am
Qua Jan 02, 2019 9:46 pm
Qua Jan 02, 2019 8:56 pm
Qua Jan 02, 2019 6:48 pm
Qua Jan 02, 2019 5:32 pm
Qua Jan 02, 2019 2:34 pm
Qua Jan 02, 2019 11:17 am
Seg Dez 31, 2018 6:23 pm
Seg Dez 31, 2018 5:53 pm
Seg Dez 31, 2018 11:29 am
Seg Dez 31, 2018 12:26 am
Dom Dez 30, 2018 9:45 pm
Dom Dez 30, 2018 8:53 pm
speedluk
artplayer
artplayer
DuViDoSo
richerd
NKKF
NKKF
RGMBrasil
mafipt
heitor
dstaroski
dstaroski
rafaelllsd
Zack2
francisco barroso
Zack2
Zack2
Phph09
vitorhugo
Daniel Pires da Silva
Madness
luiz12345
glauco
Joshuaaaa
MarcosSchultz
MayLeone
MarcosSchultz
bielTuvel
Skurb
zZAndersonZz
MayLeone
heitor
MarcosSchultz
rafaelllsd
henriquegames501
Daniel Dória
dstaroski
dstaroski
Duarte
NKKF
dstaroski
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
dstaroski
BRGC
Callyde Jr
Callyde Jr
TecnoGames
dstaroski
MayLeone
NKKF
bielTuvel
Priste_Hell
Callyde Jr
Wanderli
Andeton
Callyde Jr
MateusPignatti
Callyde Jr
NoobZ
AladoAlan
francisco barroso
luiz12345
speedluk
zeca urubu
Rafal
NKKF
Diego Felix
ismarspn
Zack2
Dom3000
henriquegames501
conceptfac
guimaraf
lhm
EricKBMS
5pntozero
Daniel Dória
Madness
Patrick
AnderGames
kalango studios games
EricKBMS
francisco barroso
dstaroski
MayLeone
PauloFR
glauco
francisco barroso
Dom3000
Callyde Jr

[TUTORIAL] JavaScript & HTML - Eventos

Ir em baixo

TUTORIAL [TUTORIAL] JavaScript & HTML - Eventos

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



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:





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:


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:


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":


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

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:


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:

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:


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:

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:

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:


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:


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':


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


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:



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 : 756
REPUTAÇÃO : 230
Áreas de atuação : Unity, C++/C#, HTML, CSS, JS, jQuery, PHP, MySQL, XML, Blender
Respeito as regras :

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 : 2179
REPUTAÇÃO : 428
Idade : 14
Áreas de atuação : Error 404 Not Found.
Respeito as regras :

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 : 756
REPUTAÇÃO : 230
Áreas de atuação : Unity, C++/C#, HTML, CSS, JS, jQuery, PHP, MySQL, XML, Blender
Respeito as regras :

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