JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, função
•Transferir como PPTX, PDF•
0 gostou•120 visualizações
Este documento discute como tornar um "bichinho virtual" interativo em uma página web usando JavaScript. Ele explica como capturar eventos de clique do mouse e criar uma função para solicitar o nome do usuário e personalizar a saudação. O código mostra como implementar essas funcionalidades, incluindo alterar a imagem quando o nome for fornecido.
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (9)
Semelhante a JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, função
Semelhante a JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, função (11)
Mais de Erick L. F.
Mais de Erick L. F. (20)
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, função
- 2. Deixando nosso Bichinho virtual ainda mais interativo Você já parou pra pensar o que nós já fizemos até aqui: Nós já criamos uma página HTML Criamos nosso bichinho virtual mesmo que ele não faça muita coisa Fizemos ele cumprimentar o usuário quando ele acessar a página dele
- 3. Melhorando nosso bichinho virtual Mas ainda precisamos melhorar, que tal fazermos: Ele solicitar o nome da pessoa que está visitando ele e fazer ele dar um cumprimento personalizado para esse usuário E que tal que isso aconteça somente quando o usuário clicar em cima d bichinho virtual Com isso vamos conquistar ainda mais nosso usuário do bichinho virtual
- 4. Para capturar o evento de click nós vamos usar: O comando do Javascript para capturar o click do mouse do usuário se chama onclick, vai funcionar como se fosse o onload, que nós já vimos em uma aula anterior.
- 5. Para que a Rocha peça o nome do usuário precisaremos criar uma função Isso mesmo precisaremos criar aqui uma função pois ele vai ter que realizar algumas coisas antes de prosseguir, o programa vai solicitar o nome e mostrar, e também vai mudar a imagem para uma sorridente, como vamos ter que usar mais de uma linha lembra, não poderemos digitar direto no nosso código, mas vamos ver isso na prática aqui no nosso vídeo.
- 6. Código dessa Aual <html> <head> <title>iRock - A rocha virtual de estimação</title> <script type="text/javascript"> function touchRock(){ var userName = prompt("Qual é o Seu Nome?", "Digite o seu nome aqui"); if(userName){ alert("É tão bom encontrar você por aqui - " + userName + "."); document.getElementById("rockImg").src = "rock_happy.png"; }
- 7. Continuação do código } </script> </head> <body onload="alert('Olá, eu sou sua rocha de estimação, que bom que você veio me visitar');"> <div style ="margin-top:100px; text-align:center"> <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock()"/> </div> </body> </html>
- 8. Conheça nosso canal no Youtube Canal: https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A Veja nosso vídeo sobre essa aula: https://www.youtube.com/watch?v=E7VyG_d4j14
- 9. Referencia Recomendamos a leitura MORRISON, Michael. Use a Cabeça JavaScript. Editora Alta Books Ltda, 2008.