JavaScript - #Aula02 - Desenvolvendo a Primeira Página com JS

Primeira página com Javascript
 Nessa aula vamos começar escrevendo uma pequena página em html com
javascript, porém é apenas um pequeno programa, sem uma funcionalidade real, já
que não estamos usando um servidor nem um banco de dados, nesse exemplo
vamos ver um simples formulário de uma imobiliária, que com ajuda com JS
poderia ter mais interatividade e trazer dados para o usuário do sistema ou site.

 <html>
 <head>
 <title>Minha Primeira Página em JavaScript</title>
 <script type="text/javascript">
 function validateNumber(value) {
 // valida o numero
 if(!isNumber(value))
 alert("Entre com um numero");
 }
 function validateZipCode(valeu) {
 // Valida o Cep
 if(!isZipCode(value)
 alert("Entre com o cep do formulario XXXXX-XXX");
 }

 function calcPrice() {
 var maxPrice = document.getElementById("income").value * 4;
 alert("Você pode Comprar uma casa de até $" + maxPrice +".");
 }

 function findHouse(form) {
 var bedrooms = document.getElementByID("bedrooms").value;
 var zipCode = document.getElementByID("Zip").value;
 // Exibi a lista de casas coincidentes com a renda e quarto de acordo com o servidor.
 form.submit();
 }

 </script>
 </head>

 <body>
 <div id="frame">
 <div id="header">Pronto para localizar uma nova casa?</div>
 <div id="left">
 <img src="casa.PNG" width="100" alt="House" />
 </div>
 <form name="orderform" method="POST">
 <div class="field"> Entre com a renda Anual:
 <input id="income" type="text" size="12" onblur="validateNumber(this.value)"/></div>
 <div class="field">Entre com o numero de Quartos:
 <input id="bedrooms" type="text" size="6" onblur="validateNumber(this.value)"/></div>
 <div class="field">Entre com o CEP:
 <input id="zip" type="text" size="10" onblur="validateZipCode(this.value)"/></div>
 <input type="button" value="Calcular preço" onclick="calcPrice();"/>
 <input type="button" value="Localizar casas" onclick="findHouse(this.form);"/>
 </div>
 </body>
 </html>

Executando o código
 Para executar esse código e só copiar e colar em um bloco de notas ou qualquer
editor de textos simples, salvando como uma página Html.
 A imagem vocês podem colocar qualquer uma no formato de uma casa que vocês
podem localizar por exemplo no google, no formato png, ou qualquer outro
formato da sua escolha, sempre informando o caminho da imagem para que a
página possa localizar e exibi-la na tela.
 Se tiver dúvidas de como realizar qualquer procedimento assistam ao vídeo no
nosso canal parte 1,2 e 3.

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=dCmfnfviP0E
 https://www.youtube.com/watch?v=pKIJBMh3rcM
 https://www.youtube.com/watch?v=HExXloEd9-4

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

JavaScript - #Aula02 - Desenvolvendo a Primeira Página com JS

Mais conteúdo relacionado

Destaque

Semelhante a JavaScript - #Aula02 - Desenvolvendo a Primeira Página com JS

Mais de Erick L. F.

JavaScript - #Aula02 - Desenvolvendo a Primeira Página com JS