JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, função

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

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

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.

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.

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";
 }

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>

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

Referencia
 Recomendamos a leitura
 MORRISON, Michael. Use a Cabeça JavaScript. Editora Alta Books Ltda, 2008.

JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, função

Mais conteúdo relacionado

Destaque

Mais de Erick L. F.

JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, função