Exemplo de programas em JavaScript

- Meu primeiro programa.
- Uma simples saída de dados.
- Usando a saída de dados.: document.write("texto");
<HTML>
<HEAD>
 <TITLE>Novo Documento</TITLE>
 <script language="javascript">
   document.write("Ola");
  </script>
</HEAD>
<BODY>
</BODY>
</HTML>
inicio

Soma de dois números - Processamento -

-Declarando variáveis no código do JavaScript.
var nome_da_variável  =  valor;
<HTML>
<HEAD>
 <TITLE>Novo Documento</TITLE>
 <script language="javascript">
  //Variáveis
  a = 10;
  b = 20;
  r = 0;
  titulo = "Soma de dois números";
   document.write(titulo);
   document.write("<br>Variável a = "+ a);
   document.write("<br>Variável b = "+ b);
   document.write("<br>Variável r = "+ r);
  //Processamento
  r = a + b;
  document.write("<br>Resultado = "+ r);
 </script>
</HEAD>
<BODY></BODY>
</HTML>
inicio

O uso do if

<html>
<head>
<meta content="text/html; charset=ISO-8859-1">
<title></title>
<script>
bananas = 6
if (bananas == 6)
{
 //Nova saída de dados, usando alert.
	//Usando caixa de diálogo.
	alert("É verdade. Temos meia dúzia de bananas");
}
</script>
</head>
<body>
 É verdade. Temos meia dúzia de bananas.
</body>
</html>
inicio

Usando uma caixa de entrada de dados

e o uso do if else

<html>
 <head>
  <meta content="text/html; charset=ISO-8859-1">
   <title></title>
  <script>
   bananas = 0;
   bananas = prompt ("Quantas bananas você tem  ?");
   if (bananas == 6)
   {
   //Nova saída de dados, usando alert.
   //Usando caixa de diálogo.
	 alert("É verdade. Temos meia dúzia de bananas");
   }
   else
   {
    alert("Não temos meia dúzia de bananas");
   }
  </script>
   </head>
 <body></body>
</html>
inicio

Laço com a estrutura WHILE

<html>
<SCRIPT LANGUAGE="JavaScript">
 var numero = 1;
 //ESTRUTURA DE LAÇO USANDO WHILE
 while (numero <= 10){
   document.write (numero + " ");
   numero++;
 }
 </SCRIPT>
</html>
inicio

Laço com a estrutura DO WHILE

<html>
<SCRIPT LANGUAGE="JavaScript">
  var numero = 1;
   //ESTRUTURA DE LAÇO USANDO DO WHILE
   do {
     document.write (numero + " ");
     numero++;
    } while (numero <= 10)

</SCRIPT>
</html>
inicio

Laço com a estrutura FOR

<html>
 <SCRIPT LANGUAGE="JavaScript">

  var numero;
   //ESTRUTURA DE LAÇO USANDO FOR
   for (numero=1; numero<=10; numero++){
   document.write (numero+" ");
  }
 </SCRIPT>
</html>
inicio

Estrutura de Multipla Escolha

<html>
<script>
//Uso do switch (Multipla escolha).
farol = prompt("Entre com a cor");
switch (farol) {
  case "vermelho":
   alert("Pare")
  break
  case "amarelo":
   alert("Atencao")
  break
  case "verde":
   alert("Prossiga")
  break
  default:
   alert("Cor ilegal")
}
</script>
<body>
</body>
</html>
Início

Formulário mostrando o uso de css e javascrip

Arquivo HTML

      
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cálculo</title>
<link rel=stylesheet href="festilo.css" type="text/css">
<script language="javascript" src="script.js"></script>
</head>
<body>
   <div id="cabecalho">Formulário de entrada de dados</div>    
    <div id="corpo">
       <form name="verificaIdade">
        <table>
              <tr>
               <th> Tí­tulo </th>
               <th> Registro </th>
              </tr>
             
             <tr>
              <td>Nome</td>
              <td><input type="text" id="nome" maxlength="25" size="27"/></td>
             </tr>
             
             <tr>
              <td>Fone</td>
              <td><input type="text" id="fone" maxlength="15" size="17"/></td>
             </tr>
             
             <tr>
              <td>Idade</td>
              <td><input type="text" id="idade" maxlength="3" size="4"/>
                   Aviso: <input type="text" maxlength="25" size="26" id="aviso" />
              </td>
             </tr>
        </table>       
        <table class="botao"><tr>
          <td colspan="2"><input type="button" value="Calcular" onclick="calcular()"/>
                          <input type="reset" value="Limpar"/>
          
          </td></tr>
         
        </table>
       </form>
       
    </div>  
    <div id="rodape">Feito pelo Professor Jorge Maestre Carvalho em 30/10/2018</div>

</body>
</html>

    

Arquivo css - festilo.css

           
@charset utf-8;

   #cabecalho{
      width: 98%;
      height: 20px;
	   text-align: center;
	   padding-left: 10px;
	   padding-top:2px;
	   background-color: #5858FA;
	   color:white;
     }    
    
   #corpo{
      width: 98%;
      height: 550px;
	   text-align: center;
	   padding-left: 10px;
	   padding-top:10px;
	   background-color: #E6E6E6;
   }
   #rodape{
      width: 98%;
      height: 20px;
	   text-align: center;
	   padding-left: 10px;
	   padding-right: 10px;
	   margin-right: 10px;
	   padding-top:2px;
	   background-color: #5858FA;
	   color:white;
	   text-align:right;
   }
   table{
    border-width:4px;  
    border-style:inset;
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    width:500px;   
   }
   table.botao{
    border-width:4px;  
    border-style:inset;
    text-align:left;
    margin-top:5px; 
    margin-left:auto; 
    margin-right:auto; 
    width:500px; 
   }
  th{
     border: 1px solid black;
	  font-size: 25px;
    }
  td {
      border: 1px solid black;
	   background-color: yellow;
	   text-align: left;
	   font-size: 20px;
	   color: blue;
   }
  h2{
      font-size: 30px;
	   color: blue;
	   font-family: Helvetica;
   }
   h3{
   font-size: 25px;
	color: blue;
	font-family: sans-serif;
   }   
     
      

Arquivo JavaScript - script.js

     function calcular() {
       var av1 = "Pode tirar carta de motorista";
       var av2 = "Não pode tirar carta de motorista";
       alert("Teste");
       var vidade = parseFloat(document.getElementById("idade").value);
       if(vidade >= 18){
         alert(av1);
         document.getElementById("aviso").value = av1; 
       }
       else{
         alert(av2);
         document.getElementById("aviso").value = av2;
       }     	
     }
       
       

Início

Calculadora

Usando HTML, CSS e JAVASCRIP

Calculadora html

 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculadora HTML</title>
<link rel=stylesheet href="estilo.css" type="text/css">
<script language="javascript" src="script.js"></script>
</head>
<body>
   <!-- Calculadora                                                 -->    
      <div id="cabecalho">Calculadora</div>
        <div id="corpo">  
          <h1> Calculadora Simples </h1>
          <input type="text" size="30" id="visor" class="visor" onchange="calcule()"/>
          <br/>
          <input type="button" value="7" class="bt" onclick="calc(value);"/>
          <input type="button" value="8" class="bt" onclick="calc(value);"/>
          <input type="button" value="9" class="bt" onclick="calc(value);"/>
          <input type="button" value="/" class="bt" onclick="calc(value);"/><br/>
          
          <input type="button" value="4" class="bt" onclick="calc(value);"/>
          <input type="button" value="5" class="bt" onclick="calc(value);"/>
          <input type="button" value="6" class="bt" onclick="calc(value);"/>
          <input type="button" value="x" class="bt" onclick="calc('*');"/><br/>
        
          <input type="button" value="1" class="bt" onclick="calc(value);"/>
          <input type="button" value="2" class="bt" onclick="calc(value);"/>
          <input type="button" value="3" class="bt" onclick="calc(value);"/>
          <input type="button" value="+" class="bt" onclick="calc(value);"/><br/>
        
          <input type="button" value="0" class="bt" onclick="calc(value);"/>
          <input type="button" value="=" class="bt" onclick="calcule();"/>
          <input type="button" value="C" class="bt" onclick="reset();"/>
          <input type="button" value="-" class="bt" onclick="calc(value);"/><br/>
            
          <input type="button" value="M" class="bt2" onclick="acumulado();"/>
          <input type="button" value="M+" class="bt2" onclick="memoria_soma();"/>
          <input type="button" value="M-" class="bt2" onclick="memoria_subt();"/>
          <input type="button" value="MC" class="bt2" onclick="limpar_memoria();"/><br/>    
       </div>
              
    <div id="rodape"></div>

</body>
</html> 
 
 
 
Calculadora

estilo css


@charset utf-8;
             
   .bt {
    width: 30pt;
    height: 30pt;
    margin: 10px 10px 10px 10px;
    font-size: 30px;
    color: white;
    background-color: grey;
                
   }
.bt2 {
    width: 30pt;
    height: 30pt;
    margin: 10px 10px 10px 10px;
    font-size: 18px;
    color: white;
    background-color: grey;
                
   }
   .visor{
    height: 30px;
    margin-left: auto;
    font-size: 20px;
   }
            
   body{
    background-color: lemonchiffon;
    position: absolute;
    left:50%;
    top:30%;
    margin-top: -150px;
    margin-left: -200px;
  }
  #cabecalho{
   width: 98%;
   height: 20px;
   text-align: center;
	padding-left: 10px;
	padding-top:2px;
	background-color: #5858FA;
	color:white;
  }    
  
#corpo{
   width: 98%;
   height: 450px;
   text-align: center;
	padding-left: 10px;
	padding-top:10px;
	background-color: #E6E6E6;
 }
 #rodape{
   width: 98%;
   height: 20px;
   text-align: center;
	padding-left: 10px;
	margin-right: 10px;
	padding-top:2px;
	background-color: #5858FA;
	color:white;
	text-align:right;
 }  
  
  
    

script js


var valor = 0;
function calc(num){
  //Colocar o valor no visor.    
   document.getElementById("visor").value += num;
 }
            
 function reset (){
  document.getElementById("visor").value = "";
}
            
function calcule (){
  var result = 0;
 //Pegar a String do Visor    
  result = document.getElementById("visor").value;
  reset();
  document.getElementById("visor").value = eval(result);
}

function memoria_soma(){
    valor += parseFloat(document.getElementById("visor").value);
    //alert(valor);
}

function memoria_subt(){
    valor -= parseFloat(document.getElementById("visor").value);
    //alert(valor);
}

function acumulado(){
    calc(valor);
}

function limpar_memoria(){
    valor = 0;
}
 
 

Início