JavaScript na Prática

Quem nunca pensou em criar um cabeçalho que apresentasse a data e a hora automaticamente.
Aqui temos um exemplo prático de como criar a função e aplicar na página.

Espero que compartilhe e divulgue.

<!DOCTYPE html>
<html>
<head>
<title>Objetos em JavaScript</title>

<style type="text/css">
body{
margin:50px;
background:#4682B4;
}

.h5{
font-familly:serif;
color=white;
}

.minhaDIV, .divInterna{
text-align:center;
padding:5px;
border-radius:10px;
width:600px;
left:50%;
margin-left:300px;
height:relative;
color:white;
background:silver;
box-shadow: 5px -8px 20px rgba(1, 1, 1, 0.7);

}

.divInterna{
width:400px;
left:50%;
margin-left:200px;
}
.botao{
border-radius:2px;
}
</style>

<script type="text/javascript">
function escreverData(){
var nomeDoDia= new Array("domingo","segunda-feira","terça-feira","quarta-feira","quinta-feira","sexta-feira","sábado");
var nomeDoMes= new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro");
var agora = new Date();
var dia =agora.getDate();

hoje=new Date();
h=hoje.getHours();
m=hoje.getMinutes();
s=hoje.getSeconds();
setTimeout('escreverData()',500);

if(dia<10){
dia="0"+dia;
}
if(m<10){
m="0"+m;
}

if (h<10){
h="0"+h;
}

if (s<10){
s="0"+s;
}

document.getElementById("escrever").innerHTML = "<h5>São José dos Campos, São Paulo - Hoje é " + nomeDoDia[agora.getDay()] + ", " + dia + " de " + nomeDoMes[agora.getMonth()] + " de " + agora.getFullYear() + ". Horário de Brasília: " + h+" : "+m+" : "+s +"</h5>";
}

function horaAtual(){
hoje=new Date();
h=hoje.getHours();
m=hoje.getMinutes();
s=hoje.getSeconds();
//document.getElementById('txt').innerHTML=h+":"+m+":"+s;
setTimeout('horaAtual()',500);
}

</script>

</head>

<body onload="escreverData()">
<div id="principal" class="minhaDIV">
<p id="escrever" onload="escreverData()"></p>
</div>
</body>
</html>

Neste exemplo apresento como buscar informações na página e retorná-las após o click no botão, mas sem direcioná-la para uma outra pagina.

Comandos relacionados que você deve estudar mais:

document.getElementById("nomeDoElementoAqui").innerHTML
fique atento aos caracteres. MAIUSC e minusc tem diferença no nome.

====================================================
<html>
<head>
<title>Cálculo do Salário</title>

<style type="text/css">
body{
margin:50px;
background:#4682B4;
}
.minhaDIV, .divInterna{
padding:10px;
border-radius:10px;
width:600px;
left:50%;
margin-left:300px;
height:relative;
color:blue;
background:silver;
box-shadow: 5px -8px 20px rgba(1, 1, 1, 0.7);
}
.divInterna{
width:400px;
left:50%;
margin-left:100px;
}
.botao{
border-radius:2px;
}
</style>
<script type="text/javascript">

//função para calcular o salario
function calcularSalario(){
var funcion = document.getElementById("funcionario").value;
var salario = document.getElementById("salario").value;
var desconto = 10;
var liquido =salario - (salario*(desconto/100));

document.getElementById("respostaNome").innerHTML =funcion;
document.getElementById("respostaSalario").innerHTML = salario;
document.getElementById("respostaDesconto").innerHTML = desconto;
document.getElementById("respostaLiquido").innerHTML = liquido;

// avalia salario
if (salario>=1000){
document.getElementById("respostaCor").innerHTML="<font color=red><b>Salário acima de 1000</b></font>";
}else{
document.getElementById("respostaCor").innerHTML="<font color=navy><b>Salario abaixo de 1000</b></font>";
}
}

//funcao para limpar os campos
function limparCampos(){
document.getElementById("respostaNome").innerHTML ='';
document.getElementById("respostaSalario").innerHTML =" ";
document.getElementById("respostaDesconto").innerHTML =" ";
document.getElementById("respostaLiquido").innerHTML =" ";
document.getElementById("funcionario").value=" ";
document.getElementById("salario").value=" ";
document.getElementById("respostaCor").innerHTML=" ";
}
</script>
</head>

<body>
<div class="minhaDIV">
<form name="cadastro">
Funcionário
<br>
<input type="text" id="funcionario" name="funcionario">
<br>
Salario
<br>
<input type="text" id="salario" name="salario">
<br>
<input class="botao" type="button" name="calcular" value="calcular" onclick="calcularSalario();">
<input class="botao" type="button" name="limpar" value="limpar" onclick="limparCampos();">
<br>
</form>
</div>
<br>
<br>
<br>
<div class="minhaDIV">
<p>Resposta dos Cálculos</p>
<table width=450px>
<tr>
<td>Nome:</td>
<td>Salario:</td>
<td>Desconto:</td>
<td>liquido:</td>
<tr>
<tr>
<td><h4 id="respostaNome"></h4></td>
<td><h4 id="respostaSalario"></h4></td>
<td><h4 id="respostaDesconto"></h4></td>
<td><h4 id="respostaLiquido"></h4></td>
<tr>
</table>
<br>
<div id="ApresentaCorSalario" class="divInterna">
<p>Apresentação da Análise do Salário.</p>
<p id="respostaCor"></p>
</div>
</div>
<br>
<br>
<br>
<div class="minhaDIV">Todos os direitos reservados.</div>
</body>

</html>

JavaScript na Prática

quarta-feira, 4 de junho de 2014

Data por extenso e hora atualizando automaticamente na página

Buscando e retornando dados com o javascript