Google Web Toolkit

O GWT é um framework de código aberto que se utiliza do Java e faz aplicações com Ajax e Javascript. Entre os principais recursos destacam-se a portabilidade entre navegadores. Há um plugin para Eclipse que facilita no processo de desenvolvimento. Outra curiosidade é que o GWT consegue converter classes e outros elementos do Java para o Javascript, deixando arquivos para web muito mais flexíveis. Um bom livro para estudar o GWT é o Essential GWT do Federico Kereki.

Publicado nas categorias : Ajax, GWT, Java, Javascript, Mobile, Programação, Webdesign
Confira as tags relacionadas : Ajax, GWT, Java

Curta a nossa página no Facebook: Ou visite-a clicando aqui.

25 janeiro 2012

Carregando data e hora com Javascript

O exemplo abaixo carrega data e hora do computador.

Copie o código abaixo:

function construirArray(qtdElementos){
this.length = qtdElementos
}
var arrayDia = new construirArray(7);
arrayDia[0] = “Domingo”;
arrayDia[1] = “Segunda-Feira”;
arrayDia[2] = “Terça-Feira”;
arrayDia[3] = “Quarta-Feira”;
arrayDia[4] = “Quinta-Feira”;
arrayDia[5] = “Sexta-Feira”;
arrayDia[6] = “Sábado”;
var arrayMes = new construirArray(12);
arrayMes[0] = “Janeiro”;
arrayMes[1] = “Fevereiro”;
arrayMes[2] = “Março”;
arrayMes[3] = “Abril”;
arrayMes[4] = “Maio”;
arrayMes[5] = “Junho”;
arrayMes[6] = “Julho”;
arrayMes[7] = “Agosto”;
arrayMes[8] = “Setembro”;
arrayMes[9] = “Outubro”;
arrayMes[10] = “Novembro”;
arrayMes[11] = “Dezembro”;
function mostrarDataHora(hora, diaSemana, dia, mes, ano){
retorno = “  “+hora+” “;
retorno += “  ”+diaSemana+”, “+dia+” de “+mes+” de “+ano;
document.getElementById(“datahora”).innerHTML = retorno;
}
function getMesExtenso(mes){
return this.arrayMes[mes];
}
function getDiaExtenso(dia){
return this.arrayDia[dia];
}
function atualizarDataHora(){
dataAtual = new Date();
dia = dataAtual.getDate();
diaSemana = getDiaExtenso(dataAtual.getDay());
mes = getMesExtenso(dataAtual.getMonth());
ano = dataAtual.getYear();
hora = dataAtual.getHours();
minuto = dataAtual.getMinutes();
segundo = dataAtual.getSeconds();
horaImprimivel = hora + “:” + minuto + “:” + segundo;
mostrarDataHora(horaImprimivel, diaSemana, dia, mes, ano+1900);
setTimeout(“carregarDataHora()”,1000);
}

Salve-o como “data.js”.

Abra um arquivo novo “index.html” e cole o código:

Dentro do Head :

<script type=”text/javascript” src=”data.js”></script>

E no Body:

<body onload=”carregarDataHora()”>
<div id=”datahora”></div>
</body>

Teste e veja o resultado.

Publicado nas categorias : Javascript, Programação
Confira as tags relacionadas : Data, Dia, Hora, Javascript, Mês

Curta a nossa página no Facebook: Ou visite-a clicando aqui.

24 janeiro 2012

Animação simples com jQuery

Este é um pequeno exemplo de animação com jQuery. Claro que a parte mais importante são os seletores, que aqui estão apenas expressos por class e id.

Copie o código, cole no Dreamweaver e salve como “jquery.html” e veja o resultado.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Página usando jQuery</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#botao’).click(function(){
$(‘.anima’).animate({‘marginLeft’:’250px’},1000);
});
$(‘.anima’).css(‘background-color’, ‘#09F’);
$(‘.anima’).css(‘width’, ’50px’);
$(‘.anima’).css(‘height’, ’50px’);
});
</script>
</head>
<body>
<input type=”button” value=”Clique aqui para animar” id=”botao” />
<div class=”anima”></div>
</body>
</html>

Veja o exemplo abaixo:

Publicado nas categorias : Animação, Dreamweaver, Javascript, jQuery, Programação, Webdesign
Confira as tags relacionadas : animate, Class, Id, jQuery, Seletores

Curta a nossa página no Facebook: Ou visite-a clicando aqui.

Google Web Toolkit

Carregando data e hora com Javascript

Animação simples com jQuery

Categorias