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:
Problema na hora de retirar vida do inimgo, ele(script) tb remove a vida do player.
Contratando pessoas da área de desenvolvimento de jogos
[____TÓPICO LIVRE____] FALE O QUE QUISER (Parte 2)
Ajuda com rotação local
Rotação em um eixo
UNITY OBJETOS COM MESMO SCRIPT DE FORMA INDEPENDENTE
[Em Desenvolvimento] Battles of Worlds
Problemas com .blend para unity
COMO MOVER UM OBJETO OU PERSONAGEM
[TUTORIAL] Inteligência artificial, inimigo e AIPoints
Loop Event Onclick
Alguém sabe explicar o que exatamente essas Opções fazem?
[RESOLVIDO] MonoDeveloper Windows 8.1
[RESOLVIDO] Playerprefs
Como percorrer por rampas sem deslizar o Rigdbody?
Ajuda em atacar
Avaliem meu APK!!!!!
Fazer a IA flanquear
fazer inimigo se movimentar para direita e esquerda jogo de plataforma
hospedagem de site gratis (link no tópico)
Solução Unity 2019 erro Text Mesh Pro
[TUTORIAL] Cena inicial de CARREGAMENTO, creditos, logo, etc [UNITY 5]
Problema com boxes colliders
Rotação
The Stack
Instalar nova versão Unity 2019
[RESOLVIDO] Alguém conhece um programa bom e simples para criar modelos 3d?
Flamehead MMORPG Indie
Comunicação entre scripts
[RESOLVIDO] Teletransporte pelo cenario Unity2D
Dúvida WEBGL
[RESOLVIDO] Problema com sistema de controle de volume.
Meu Jogo ta Travando - Quiz Unity 2D
[RESOLVIDO] Unity - Como Saber Se Botão Foi Clicado?
Quiz 2D Unity - Como esperar segundos para ir pra próxima pergunta????
Aplicativo!?!
[DUVIDA] ADS Em app WPF.NET ?
[RESOLVIDO] Renderização de Sprite renderer
[TUTORIAL] Arma tipo a do call of duty
Animação customizada com "Exit Time"
Personagem No Unity problema com colisão Como Resolver
Inimigo seguir só quando olharmos para ele.
Meu novo game
The scripts needs to derive from monobehaviour
[RESOLVIDO] Erro - animações do Mixamo na Unity
[TUTORIAL] Singleton, A melhor forma de acessar a classe!
[Asset] Repositório + Assets
Executar animação via script
[RESOLVIDO] GameObject que não Ativa
[TUTORIAL] Compilar para Android
Travar movimentação/rotação de um child.
[TUTORIAL] Android - Sistema de controle third person shooter, Joystick + Swipe camera
[RESOLVIDO] Unity 2018.2.14f1(64bit) sem audio
Como alterar propriedades em uma clip de animação mantendo o padrão em outros clips?
GIRAR EM TORNO DE ACORDO COM AS TECLAS
[DUVIDA] Como permitir que o usuario envie uma imagem e a ajeite
Mobile Camera
Collider labirinto 2D
Efeito de "Super velocidade"
girar eixo de movimento
[RESOLVIDO] List Index error
Jogo Da Velha
Projeto de lei quer criminalizar criadores de jogos violentos ?!?!?!?
[TUTORIAL] Salvar dados com playerprefs facilmente.
Conta android para desenvolvedor
[Asset] Jogo em plataforma 2D para aprendizado
Sistema de Plataforma com Rotas controlado por Touch
DIVULGAÇÃO
[RESOLVIDO] Como saber se o jogador esta vendo um certo objeto?
derrubar arvore em jogo 2d
[RESOLVIDO] Como resetar a cena em que o player estar
ESTOU COM UM PROBLEMA EM UM SCRIPT
Bool ficar verdadeira no multiplayer em script de inimigo? (Unet)
Game Mobile
[RESOLVIDO] Não consigo deixar meus áudios em 3D...
Pressionar Botão por um determinado tempo
Histórico de Input
como limitar o zoom mínimo e máximo no lean touch
Como que faço para rotacionar um objeto na posição do player como o cenario
[RESOLVIDO] Bug textura, SketchUp para Unity 3d
Unity - Excluir Ads Criado.
[RESOLVIDO] Lanterna Sumindo
Setar a posição do mouse
Medidores interativos como fazer na Unity
[RESOLVIDO] Unity - Adicionar Espaço Em Array
Pack de áudio/ efeitos sonoros gratuitos.
Game Engine
[TUTORIAL] Sistema simples para VOLTAR NO TEMPO, Unity 3D
Point Light com qualidade horrivel, o que pode ser?
PC, Mobile ou ambos?
Efeito Glowing
[RESOLVIDO] box collider conflito
[RESOLVIDO] Blender - Mancha Preta
[TUTORIAL] Unity 5- Sistema de PLATAFORMAS COM ROTAS
ESTOU COM UM PROBLEMA DE ANIMAÇÃO!!!
Câmera Orbital Modificada
[RESOLVIDO] Uma duvida sobre colliders 2d
Unity - Inspetor Personalizado
Software para testar AR no PC
Hoje à(s) 4:52 pm
Hoje à(s) 3:49 pm
Hoje à(s) 2:36 pm
Hoje à(s) 8:53 am
Hoje à(s) 1:43 am
Ontem à(s) 8:01 pm
Ontem à(s) 7:53 pm
Ontem à(s) 7:28 pm
Ontem à(s) 12:11 pm
Ontem à(s) 2:42 am
Seg Abr 22, 2019 10:40 pm
Seg Abr 22, 2019 7:08 pm
Seg Abr 22, 2019 6:49 am
Sab Abr 20, 2019 3:15 pm
Sab Abr 20, 2019 1:57 pm
Sab Abr 20, 2019 1:28 pm
Sab Abr 20, 2019 2:41 am
Sex Abr 19, 2019 9:19 pm
Sex Abr 19, 2019 6:40 pm
Sex Abr 19, 2019 6:23 pm
Sex Abr 19, 2019 2:32 am
Qui Abr 18, 2019 9:35 pm
Qui Abr 18, 2019 8:43 pm
Qui Abr 18, 2019 8:39 pm
Qui Abr 18, 2019 8:30 pm
Qui Abr 18, 2019 8:25 pm
Qui Abr 18, 2019 1:04 pm
Qui Abr 18, 2019 3:25 am
Qua Abr 17, 2019 8:26 pm
Qua Abr 17, 2019 8:16 pm
Seg Abr 15, 2019 11:27 pm
Seg Abr 15, 2019 11:24 pm
Seg Abr 15, 2019 9:53 pm
Seg Abr 15, 2019 7:15 pm
Seg Abr 15, 2019 12:29 pm
Dom Abr 14, 2019 11:26 am
Dom Abr 14, 2019 11:23 am
Dom Abr 14, 2019 1:42 am
Sab Abr 13, 2019 2:33 pm
Sab Abr 13, 2019 1:36 pm
Sex Abr 12, 2019 8:44 pm
Qui Abr 11, 2019 11:18 pm
Qui Abr 11, 2019 12:50 pm
Qua Abr 10, 2019 10:59 am
Qua Abr 10, 2019 1:01 am
Ter Abr 09, 2019 7:31 pm
Ter Abr 09, 2019 6:39 pm
Ter Abr 09, 2019 3:47 pm
Seg Abr 08, 2019 8:59 pm
Dom Abr 07, 2019 8:55 pm
Dom Abr 07, 2019 8:01 pm
Dom Abr 07, 2019 3:05 pm
Sab Abr 06, 2019 11:52 am
Sab Abr 06, 2019 12:12 am
Sex Abr 05, 2019 10:46 pm
Sex Abr 05, 2019 9:38 pm
Sex Abr 05, 2019 9:36 pm
Sex Abr 05, 2019 9:31 pm
Sex Abr 05, 2019 9:27 pm
Qui Abr 04, 2019 9:18 pm
Qui Abr 04, 2019 8:21 pm
Qui Abr 04, 2019 4:37 pm
Qui Abr 04, 2019 2:48 pm
Qua Abr 03, 2019 7:09 pm
Qua Abr 03, 2019 4:37 pm
Qua Abr 03, 2019 4:32 pm
Ter Abr 02, 2019 11:18 pm
Ter Abr 02, 2019 7:32 pm
Ter Abr 02, 2019 6:18 pm
Ter Abr 02, 2019 4:50 pm
Ter Abr 02, 2019 4:19 am
Seg Abr 01, 2019 9:22 pm
Seg Abr 01, 2019 9:19 pm
Seg Abr 01, 2019 9:15 pm
Seg Abr 01, 2019 8:58 pm
Seg Abr 01, 2019 6:12 pm
Seg Abr 01, 2019 4:00 pm
Seg Abr 01, 2019 3:35 pm
Seg Abr 01, 2019 1:23 pm
Seg Abr 01, 2019 1:09 am
Dom Mar 31, 2019 6:07 pm
Dom Mar 31, 2019 11:26 am
Sab Mar 30, 2019 9:03 pm
Sab Mar 30, 2019 6:09 pm
Sab Mar 30, 2019 5:50 pm
Sab Mar 30, 2019 4:56 pm
Sab Mar 30, 2019 8:22 am
Sab Mar 30, 2019 8:21 am
Sex Mar 29, 2019 11:56 pm
Sex Mar 29, 2019 4:31 pm
Sex Mar 29, 2019 3:57 pm
Sex Mar 29, 2019 3:39 pm
Sex Mar 29, 2019 12:29 pm
Sex Mar 29, 2019 4:54 am
Sex Mar 29, 2019 4:50 am
Sex Mar 29, 2019 4:41 am
Qui Mar 28, 2019 4:26 pm
Qui Mar 28, 2019 1:39 pm
Qui Mar 28, 2019 8:05 am
daniel123163
Fue
Tegh
Nowsfeky
MarcosSchultz
diegodiego01
dstaroski
marlon33
diegopds
MarcosSchultz
Magnatah
glauco
marlon33
Magnatah
LucasRangel
UesleiUsl
MarcosSchultz
916anderson
MarcosSchultz
Magnatah
MarcosSchultz
marlon33
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
glauco
ffabim
Callyde Jr
mathhBR
numb123
kraulim
MarcosSchultz
Magnatah
Akuma97
Magnatah
BRGC
ffabim
diegopds
NKKF
dstaroski
MarceloYBP
guimaraf
everton0101
Master3353
Magnatah
augustobrito
NotoriousDev
Fernando Andrey
fabricadegame
NotoriousDev
iToddy
marciosilva
LucasRangel
wagnercaragua
MarcosSchultz
MarcosSchultz
MarcosSchultz
MarcosSchultz
wagnercaragua
NotoriousDev
Unidade3d5
Tegh
rafaelllsd
JohnRambo
NKKF
edvanmelo
niao
NKKF
Tegh
niao
fecirineu
fecirineu
fecirineu
BrazaTattoo
NKKF
NKKF
Chilinger
emerson vitor
BrazaTattoo
Magnatah
Guinho3p
luiz12345
Magnatah
Magnatah
Zack2
Chilinger
Chilinger
MarcosSchultz
Magnatah
michelly
eduardonog30
Magnatah
MarcosSchultz
MarcosSchultz
MarcosSchultz
mathhBR
Magnatah
Chilinger

[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 : 886
REPUTAÇÃO : 244
Á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 : 2366
REPUTAÇÃO : 452
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 : 886
REPUTAÇÃO : 244
Á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