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:
sombras para jogos mobile
Unity - Deslizar Para Rotacionar o 'Personagem'
Discord para desenvolvimento de jogos
Bug/Erro da unity?
[TUTORIAL] Controle 3ª pessoa com animações mecânicas (root motion)
rotação no exio z
[Devlog] Lost in the world 14/11
[Duvida] Bug ao usar Vector3.Lerp Objeto é teleportado na lata
[TUTORIAL] Banco de dados || MySQL
(UNITY) Erro ao compilar a Build Android
Unity + MySQL
Erro de Prefab quando realiza o Build de um projeto 3D
Em busca de um modelador 3D para plataforma educacional (Já ganhamos apoio de faculdades)
[TUTORIAL] Unity 5 - Sistema Completo de PORTAS E CHAVES
Drop Shadows
[RESOLVIDO]Como aplicar textura alpha na unity
Unity 3D - Desenhos Com Física(Download Projeto)
Como mudar o CONTROLLER do ANIMATOR
Como criar um poligono dinamicamente?
erro no unity
movimento de uma nave
Instantiate
Problema ao rotacionar valores negativos.
Calcular hora ?
Novo estilo de estourar blocos, baixe meu jogo pessoal ... conto com a ajuda de vocês!!!
Jogo que fiz para uma Jam da minha faculdade FATEC Ourinhos.
Não consigo o Android SDK!!
[RESOLVIDO] Como faço para depois de determinado tempo acontecer algo?
CRASH AO ENTRAR NA CENA UNITY
estou procurando um bom tutorial de IA Basica
Erro ao colocar script no botão
Novo jogo em desenvolvimento, 13º andar
Text Dinâmico no botão
Sistema Pdv, Mercado, Padaria, Conveniência, Lojas Em Geral - C# VISUAL STUDIO
[TUTORIAL] - Script de lanterna pra seu jogo de terror e outros...
[RESOLVIDO] Unity - Reproduzir Videos Do Blender No Unity
Ordem de fases
[RESOLVIDO] Tenho algum erro de simbolo no script do carro o que poderia ser?
[RESOLVIDO] Dúvida. Detectar colisões nas instâncias
erro na minha IA
[TUTORIAL] While, como funciona?
Mostrar a contagem em 10K e 100M
[TUTORIAL] AI Enemy 2.0 + animações ( Jogos de terror )
Cores nos materiais sem criar material
Poderia modelar um personagem cartoon para meu projeto
Como coloco modo de criação de personagem?
[Ajuda] Assets
RayCasting + Disparo Um Bom Tipo De Video Aula.
Ajuda de Blender para Unity
Procuro Equipe Para Criação de Jogo [PAGO]
[____TÓPICO LIVRE____] FALE O QUE QUISER (Parte 2)
[RESOLVIDO] erro WaterBaseEditor.cs não encontra o caminho do WaterBase
[TUTORIAL] Criar Analógico Virtual UI Para Mobile.
[TUTORIAL] Acessar nomes de arquivos diretamente da pasta
Objeto dentro do player nao ta rotacioando
[TUTORIAL] MENU PRINCIPAL - UNITY 5 (5.3 ou superior) (Com UI)
Array de prefabs
screenshot
instancia item aleatorio em varias posicoes
[TUTORIAL] Mira que fica se movendo (ocilando,tremendo,etc)
Getcomponent de C# para java
Curso barato de C#
Unity - Modelo 3D em Menu 2D
[RESOLVIDO] Camera Estilo Showroom
A um mês com unity bugado sem resposta
[GameJam] Competição organizada pela BitCodeStudios
Pegar strings de "duas em duas"
criar um piano no unity
Movimentação
Instanciar objeto onde cricar com mouse ou touch
Dúvida Sistema de Energia para jogo android
[RESOLVIDO] Inimigo patrulhando constantemente estilo mario
BUG UNITY 3D ROSA A SCENE E GAME
Dúvida. Colliders no Unity3D
Pq a grama do Unity é tao pesada?
Alguem cria uma conta na playstore pra mim? :(
Capture Panorama?
Artistas 3D e Programadores Unity3D (Remunerado)
Input Get Key
SCHULTZ Jogo de terror
(Erro) IndexOutOfRangeException:Array index is out of range
EU QUERIA COLOCAR ANUNCIOS NO MEU JOGO NA MUDANÇA DE CENAS MAS NÃO ACHO UM JEITO
Unity - Duvida Sobre a JDK Que Vocês Usam
[RESOLVIDO] Adicionar Botoes em controle mobile
admob recompensa
Unity - Duvida Sobre Atualizar
Unity Admob GDPR (como implementar ?)
Timer para mudar de câmera
The Pyramid Demo Atualizado
[____ENQUETE____] Eleições para presidente 2018 (2º turno)
Mudando cor do texto...
como dminuir o lag no meu unity 5
[JOGO MOBILE] Defeat the Illuminatis
Como chamar animação sem passar por outro parâmetros?
[TUTORIAL] Unity 5 - Botão contínuo usando UI (Manter pressionado)
unity - erro ao buildar
Meus ints não aparecem no Inspector, serializable não funciona
Modelagem
[RESOLVIDO] Tutoriais
Hoje à(s) 1:23 am
Ontem à(s) 11:15 pm
Ontem à(s) 4:59 pm
Ontem à(s) 4:47 pm
Ontem à(s) 3:23 pm
Ontem à(s) 2:13 pm
Ontem à(s) 12:37 pm
Qua Nov 14, 2018 8:55 pm
Qua Nov 14, 2018 5:47 pm
Qua Nov 14, 2018 5:44 pm
Qua Nov 14, 2018 5:41 pm
Qua Nov 14, 2018 5:14 pm
Qua Nov 14, 2018 4:30 pm
Qua Nov 14, 2018 3:35 pm
Qua Nov 14, 2018 2:45 pm
Qua Nov 14, 2018 1:25 pm
Qua Nov 14, 2018 10:45 am
Ter Nov 13, 2018 11:25 pm
Ter Nov 13, 2018 11:23 pm
Ter Nov 13, 2018 11:18 pm
Ter Nov 13, 2018 10:55 pm
Ter Nov 13, 2018 6:21 pm
Ter Nov 13, 2018 5:55 pm
Ter Nov 13, 2018 1:30 pm
Ter Nov 13, 2018 11:33 am
Seg Nov 12, 2018 9:52 pm
Seg Nov 12, 2018 3:57 pm
Seg Nov 12, 2018 3:24 pm
Seg Nov 12, 2018 8:13 am
Seg Nov 12, 2018 8:11 am
Dom Nov 11, 2018 6:56 pm
Dom Nov 11, 2018 2:41 pm
Dom Nov 11, 2018 8:12 am
Dom Nov 11, 2018 7:57 am
Sab Nov 10, 2018 8:54 pm
Sab Nov 10, 2018 5:11 pm
Sab Nov 10, 2018 2:52 pm
Sab Nov 10, 2018 2:13 pm
Sab Nov 10, 2018 12:39 am
Sab Nov 10, 2018 12:28 am
Sex Nov 09, 2018 3:56 pm
Qui Nov 08, 2018 11:28 pm
Qui Nov 08, 2018 11:25 pm
Qui Nov 08, 2018 10:01 pm
Qui Nov 08, 2018 7:47 pm
Qui Nov 08, 2018 12:36 pm
Qui Nov 08, 2018 12:31 pm
Qui Nov 08, 2018 12:28 pm
Qui Nov 08, 2018 12:53 am
Qua Nov 07, 2018 5:52 pm
Qua Nov 07, 2018 4:04 pm
Qua Nov 07, 2018 12:49 pm
Ter Nov 06, 2018 2:05 pm
Ter Nov 06, 2018 12:30 pm
Ter Nov 06, 2018 11:32 am
Ter Nov 06, 2018 1:10 am
Seg Nov 05, 2018 6:57 pm
Seg Nov 05, 2018 3:36 pm
Seg Nov 05, 2018 12:44 am
Dom Nov 04, 2018 5:32 pm
Dom Nov 04, 2018 5:31 pm
Dom Nov 04, 2018 5:30 pm
Dom Nov 04, 2018 1:05 am
Sab Nov 03, 2018 1:36 pm
Sex Nov 02, 2018 11:38 pm
Sex Nov 02, 2018 10:55 pm
Sex Nov 02, 2018 8:16 pm
Sex Nov 02, 2018 7:50 pm
Sex Nov 02, 2018 7:41 pm
Sex Nov 02, 2018 7:27 pm
Sex Nov 02, 2018 6:36 pm
Sex Nov 02, 2018 3:27 pm
Sex Nov 02, 2018 3:35 am
Sex Nov 02, 2018 3:24 am
Qui Nov 01, 2018 3:56 pm
Qui Nov 01, 2018 3:52 pm
Qui Nov 01, 2018 1:18 pm
Qui Nov 01, 2018 7:57 am
Qui Nov 01, 2018 2:26 am
Qui Nov 01, 2018 2:05 am
Qua Out 31, 2018 9:20 pm
Qua Out 31, 2018 6:09 pm
Qua Out 31, 2018 7:17 am
Ter Out 30, 2018 11:34 pm
Ter Out 30, 2018 9:34 pm
Ter Out 30, 2018 5:29 pm
Ter Out 30, 2018 8:12 am
Ter Out 30, 2018 8:05 am
Seg Out 29, 2018 2:21 pm
Seg Out 29, 2018 12:03 am
Dom Out 28, 2018 5:33 pm
Dom Out 28, 2018 11:58 am
Dom Out 28, 2018 11:57 am
Sab Out 27, 2018 11:29 am
Sab Out 27, 2018 11:22 am
Sex Out 26, 2018 8:31 pm
Sex Out 26, 2018 6:21 pm
Sex Out 26, 2018 5:56 pm
Sex Out 26, 2018 5:13 pm
MarceloYBP
NKKF
JohnRambo
Zack2
francieljesus
theus.mors
NKKF
NKKF
sabbath
sabbath
sabbath
McbDJ
rZwr
Fabricio Alves
NKKF
TioUV
JohnRambo
MarcosSchultz
MarcosSchultz
MarceloYBP
theus.mors
juniorhotes
Weslley
Callyde Jr
hamerom
luansantos
francisco barroso
Vitor Paulino
dstaroski
dstaroski
SuperGamer
Patrick
dstaroski
dstaroski
SuperGamer
Magnatah
francisco barroso
Samuelostgamer
GattiMene
MarceloYBP
SuperGamer
Tegh
francisco barroso
NKKF
GameLACK
dstaroski
dstaroski
dstaroski
jack2117
Mathss
JohnRambo
Daniel Dória
JohnRambo
gurgelg752
francisco barroso
MarcosSchultz
Nalfam
dstaroski
MarcosSchultz
dstaroski
dstaroski
dstaroski
Magnatah
Teio
Callyde Jr
hetrodo
NKKF
CarlosDT94
MarcosSchultz
MarcosSchultz
Magnatah
MrMattD
MarcosSchultz
MarcosSchultz
francisco barroso
francisco barroso
Callyde Jr
Dom3000
MarcosSchultz
MarcosSchultz
francisco barroso
MATHEUS1233
dstaroski
francisco barroso
theus.mors
Magnatah
dstaroski
dstaroski
dstaroski
MarcosSchultz
mafipt
dstaroski
dstaroski
Weslley
Weslley
Magnatah
MarcosSchultz
JohnRambo
dknoob537

[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á!
avatar
MayLeone
ProgramadorMaster

Feminino PONTOS : 563
REPUTAÇÃO : 168
Á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..
avatar
NKKF
ProgramadorMaster

Masculino PONTOS : 2035
REPUTAÇÃO : 408
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?
avatar
MayLeone
ProgramadorMaster

Feminino PONTOS : 563
REPUTAÇÃO : 168
Á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