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:
Jogo multiplayer com steam
O Labirinto II - Trailer Oficial
Ue posso divulgar meu game que ainda esta em criaçao aqui no forum?
[RESOLVIDO] Inverter o sprite para a direçao que o personagem anda.
Set Active não a reabiilitado C#
Build APK VR Google Cardbord com video.
[PROGRAMADOR FREELA] $$
Mais Um jogo!
Collider (mesh?)
[TUTORIAL] Deformar mesh com batidas (para objetos, veículos, etc)
WW2 Low poly Pack (Free)
Procuro freelancer
Novo Teaser do jogo Dark Age
Unity Admob Erro
DEATH ISLAND 0.2.5 SURVIVAL GAME 4 ANOS EM DESENVOLVIMENTO
Player travando na colisão com o chão Unity 2D
Sombras estão quadradas na build
nao consigo fazer o player sentar no sofa alguem me ajuda
Unity - Ao mudar de scene, todas as Lights são deletadas
210 Linhas de código para inimigo é muito grande?
modelar avatar e skins para um jogo web
ShapeKeys do Blender para a Unity altera áreas próximas
COMO EVITAR QUE UM OBJETO (PLAYER,ITEM ETC...) ATRAVESSE UMA PAREDE.
Ajuda em Script de Verificação de Ação e Reação
unity Failed to load PlayerSettings (internal index #0). Most likely data f
PRECISO FAZER QUE MEU GAME FIQUE ONLINE
Materiais do Blander não aparecem no MeshRendere do Objeto na Unity
Repetiçoes de Textura no Terreno
SERVER IS DOWN - UNITY+MSQL
Procuro programadores - Novo jogo
Problema com o MS VEHICLES
Preciso de ajuda com a Unity
Problema com vídeo em 360° na Unity
Problemas no MS Vehicles
unity- eventos na Animação com Armature/Bones vinda do blender não funciona
ajuda exibir resultados simulados em uma liga Game Unity
Unity - ParticleSystem não é redirecionado no rawimage no canvas
Como resolver o problema de "face orientation" no Blender.
[DÚVIDA] Tive um problema com meu Canvas
erro na Directional Light
Problemas com o Directional Light da Unity 3D
Novo jogo da franquia Sphere game em desenvolvimento
malha da roda não girando com wheel collider unity
Problemas com ambiguidade
Touch mobile
INVALID TOKEN
Como acessar o "HD Render Pipeline" do HDRP por script?
CHAT GPT PRA JOGO DE TIRO? comentem
Tutorial script inimigo segue e foge do player
Ainda vale a pena lançar Asset na Asset Store?
Ajuda com tabela de historico de pontuaçao.
[TUTORIAL] Entrar no carro estilo GTA
Como derrapar um Whell Collider
Como altertar o valor do "Asymptote Value" do Whell Collider via Script
Preciso de ajuda para substituir valor de variavel em outro script
Ajuda com Top Down Shooter utilizando Photon
Duvida com Netcode
[RESOLVIDO] Unity - Movendo a Câmera na Horizontal/Vertical com Touch
Alguém me ajuda com os anúncios pfv
Segundo Trailer do jogo Dark Age, Feliz Natal a todos!
Unity - ScrollRect, Viewport, Content - O Conteúdo ñ inicia no topo
Coleta de itens
Unity - Cadastro do email do jogador
[GRATIS] PACK DE MODELOS 3D PARA JOGO DE TERROR
Onde Conseguir músicas para meu Jogo?
error CS0246 em Script
Alguem teve ja esse problema?
[Projeto em Andamento] Draug, um jogo de hordas
DISPONIVEL PARA FAZER MODELOS 3D
Unity-Loja.Como os Jogadores terão acesso aos ítens comprados na PlayStore?
Bugando depois do Build.
Primeiro Trailer do jogo Dark Age
Problema com sombra
Mesh e Material do objeto trocando para uma instancia no inicio do jogo
[RESOLVIDO] Unity - RawImages_Layer_Camera
INVESTIMENTO EM JOGOS E BANCO DE TALENTO
Teaser do meu novo projeto pessoal, Dark Age
Preciso de ajuda com mudança para mobile androide.
[RESOLVIDO] Posição final do objeto em jogo 2D
Input.GetAxis() obedercer a orientação de um objeto.
Interação com elementos UI
Meu primeiro jogo na steam
Minimap/Radar/GPS Estilo GTA V
[RESOLVIDO] Erro no console depois que formatei o pc
PACK GRÁTIS de Músicas ELETRÔNICAS para ajudar vocês em seus Jogos Indies!
[TUTORIAL] Entenda como funciona: ENUM, SWITCH, BREAK, CASE no C#
O Labirinto II - Baixe o Jogo
Qual e o codigo de Botões na unity para saber seus estados?
Como carregar itens pequenos dentro do carro sem que atravesse os colliders
[Duvida] Script pegar itens
Travamento ao trocar de cena
Colisão zoada e movimentação
Salvar objetos que foram destruidos entre cenas na unity
Quero começa a desenvolver um jogo de luta porem eu queria aprender a faze
Pegar qual objeto colidiu com o Linecast.
movimentação e camera?
[RESOLVIDO] Unity - SceneManager.LoadScene abre scene com objeto "vazio"
[RESOLVIDO] ajuda sobre skybox
MEU SIMULADOR DE CARRO
Ontem à(s) 6:43 am
Dom Jun 09, 2024 7:43 pm
Dom Jun 09, 2024 2:16 pm
Seg Jun 03, 2024 11:39 am
Seg maio 27, 2024 12:45 pm
Seg maio 20, 2024 9:01 pm
Dom maio 19, 2024 3:08 pm
Sáb maio 18, 2024 11:46 am
Sáb maio 11, 2024 8:55 am
Qui maio 09, 2024 11:33 pm
Seg Abr 29, 2024 9:34 pm
Qui Abr 25, 2024 3:34 pm
Seg Abr 22, 2024 5:15 pm
Seg Abr 15, 2024 12:23 pm
Qua Abr 10, 2024 1:33 am
Ter Abr 09, 2024 10:28 am
Seg Abr 08, 2024 9:27 pm
Seg Abr 08, 2024 8:01 am
Sáb Abr 06, 2024 8:05 pm
Qui Abr 04, 2024 11:34 pm
Qui Abr 04, 2024 11:13 pm
Sex Mar 22, 2024 2:41 pm
Dom Mar 10, 2024 2:30 pm
Sex Mar 01, 2024 1:27 pm
Qui Fev 22, 2024 9:57 pm
Ter Fev 20, 2024 9:28 am
Ter Fev 20, 2024 12:15 am
Seg Fev 19, 2024 1:06 pm
Seg Fev 12, 2024 1:56 pm
Seg Fev 12, 2024 1:17 pm
Dom Fev 11, 2024 8:55 pm
Dom Fev 11, 2024 11:16 am
Seg Fev 05, 2024 4:18 pm
Dom Fev 04, 2024 9:39 pm
Qua Jan 31, 2024 11:59 pm
Ter Jan 30, 2024 7:37 pm
Ter Jan 23, 2024 6:33 pm
Dom Jan 21, 2024 6:03 pm
Sáb Jan 20, 2024 7:03 pm
Sáb Jan 20, 2024 6:58 pm
Sáb Jan 20, 2024 6:39 pm
Sex Jan 19, 2024 8:40 am
Dom Jan 14, 2024 5:30 pm
Qua Jan 10, 2024 10:29 pm
Qua Jan 10, 2024 8:55 pm
Qua Jan 10, 2024 7:14 pm
Ter Jan 09, 2024 3:55 pm
Ter Jan 09, 2024 8:04 am
Sáb Jan 06, 2024 8:02 pm
Sex Jan 05, 2024 7:01 am
Sex Jan 05, 2024 12:12 am
Qui Jan 04, 2024 6:55 pm
Qui Jan 04, 2024 12:52 pm
Qui Jan 04, 2024 4:34 am
Ter Jan 02, 2024 11:48 pm
Dom Dez 31, 2023 7:25 pm
Qua Dez 27, 2023 5:44 pm
Qua Dez 27, 2023 3:08 pm
Sáb Dez 23, 2023 7:27 pm
Sáb Dez 23, 2023 5:06 pm
Qui Dez 21, 2023 8:10 pm
Seg Dez 18, 2023 2:04 pm
Sex Dez 15, 2023 5:11 pm
Qui Dez 14, 2023 9:13 pm
Qui Dez 14, 2023 2:47 pm
Qui Dez 14, 2023 1:48 pm
Qua Dez 13, 2023 8:58 pm
Ter Dez 12, 2023 2:32 pm
Seg Dez 11, 2023 1:53 pm
Qua Dez 06, 2023 8:13 pm
Sáb Dez 02, 2023 8:06 pm
Qui Nov 30, 2023 7:49 am
Seg Nov 27, 2023 1:35 am
Qua Nov 22, 2023 7:37 am
Qui Nov 09, 2023 1:22 pm
Seg Nov 06, 2023 11:59 am
Ter Out 31, 2023 9:53 am
Dom Out 29, 2023 8:05 pm
Dom Out 29, 2023 3:03 am
Sex Out 27, 2023 3:43 pm
Sex Out 27, 2023 3:28 pm
Qua Out 25, 2023 1:20 pm
Seg Out 23, 2023 10:34 am
Dom Out 22, 2023 6:55 pm
Qui Out 19, 2023 11:57 pm
Qui Out 19, 2023 6:39 pm
Ter Out 17, 2023 6:37 pm
Ter Out 17, 2023 6:18 pm
Seg Out 16, 2023 1:59 pm
Sáb Out 14, 2023 12:15 pm
Qua Out 11, 2023 6:07 pm
Seg Out 09, 2023 4:19 pm
Qua Out 04, 2023 12:12 pm
Qua Out 04, 2023 12:11 pm
Ter Out 03, 2023 9:18 pm
Ter Out 03, 2023 9:08 pm
Ter Out 03, 2023 6:05 pm
Ter Set 26, 2023 12:45 pm
Seg Set 25, 2023 9:02 pm



































































































[TUTORIAL] JavaScript & HTML - Eventos

2 participantes

Ir para baixo

TUTORIAL [TUTORIAL] JavaScript & HTML - Eventos

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

http://compilemosfacil.blogspot.com.br

Ir para o topo Ir para baixo

TUTORIAL Re: [TUTORIAL] JavaScript & HTML - Eventos

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

Ir para o topo Ir para baixo

TUTORIAL Re: [TUTORIAL] JavaScript & HTML - Eventos

Mensagem por MayLeone Seg Out 22, 2018 9:37 pm

Rotação com svg?
MayLeone
MayLeone
Instrutor

Feminino PONTOS : 3650
REPUTAÇÃO : 598
Áreas de atuação : Unity & C#
Respeito as regras : [TUTORIAL] JavaScript & HTML - Eventos Aad8pUi

http://compilemosfacil.blogspot.com.br

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos