Efeitos rápidos com Javascript

Antes de aprofundarmos na matéria, veremos alguns exemplos de códigos simples de grande utilidade.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 16/9/04

Valorize este artigo:
Antes de aprofundarmos na matéria, podemos ver uma série de efeitos rápidos que se podem programar com Javascript. Isto, pode nos dar uma idéia más clara e exata das capacidades e da potência da linguagem na hora de percorrer os próximos capítulos.

Abrir uma janela secundária

Primeiro vamos ver que com uma linha de Javascript podemos fazer coisas bastante atrativas. Por exemplo podemos ver como abrir uma janela secundária sem barras de menus que mostre o buscador Google. O código seria o seguinte:

<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>


Podemos ver o exemplo em funcionamento aqui.

Uma mensagem de boas vindas

Podemos mostrar uma caixa de texto emergente ao terminar de carregar o portal de nosso site web, que poderia dar as boas vindas aos visitantes.

<script>
window.alert("Bem-vindo ao meu site web. Obrigado...")
</script>


Podemos ver o exemplo em uma página a parte.

Data atual

Vejamos agora um simples script para mostrar a data de hoje. Às vezes é muito interessante mostrá-la nas webs para dar um efeito de que a página está "ao dia", ou seja, está atualizada.

<script> document.write(new Date()) </script>

Estas linhas deveriam ser introduzidas dentro do corpo da página no lugar onde quisermos que apareça a data da última atualização. Podemos ver o exemplo em funcionamento aqui.

Nota: Um detalhe a destacar é que a data aparece em um formato um pouco raro, indicando também a hora e outros atributos da mesma, mas já aprenderemos a obter exatamente o que desejarmos no formato correto.


Botão de voltar

Outro exemplo rápido pode ser visto a seguir. Trata-se de um botão para voltar para trás, como o que temos na barra de ferramentas do navegador. Agora veremos uma linha de código que mistura HTML e Javascript para criar este botão que mostra a página anterior no histórico, se é que havia.

<input type=button value=Atrás onclick="history.go(-1)">
O botão será parecido ao seguinte. Podemos clicá-lo para ver seu funcionamento (deveria nos levar à página anterior).
Como diferença com os exemplos anteriores, há que destacar que neste caso a instrução Javascript se encontra dentro de um atributo de HTML, onclick, que indica que essa instrução tem de ser executada como resposta ao clicar no botão.

É possível comprovar a facilidade com a qual se podem realizar algumas ações interessantes, e existiriam muitas outras mostras, mas que reservamos para capítulos posteriores.





Comentários do artigo
Foram enviados 15 comentários ao artigo
9 comentários não revisados
6 comentários revisados:
Por: Sandro Niederauer
15/3/07
Achei muito tri, estou tentando entrar no mercado e então fazendo pesquisas no google, encontrei o site www.criarweb.com e tirei várias duvidas referente a este assunto que java e html, espero que me mandem alguma material por e-mail para que eu possa dar mais efeitos aos meus sites. Desde já agradeço a atenção e aguardo respostas.
Sou da cidade de Osorio - Rio Grande do Sul
Escola de Informatica Myranda.
www.myrandainformatica.com.br
Por: Adriana
24/7/07
Eu adorei essa informação, até dei uma treinada e como é interessante essa linguagem, confesso que me interessei muito em ir a fundo sobre essa matéria.
Parabéns!!
Por: Emanuelle
08/8/08
Muito bom...adorei o artigo! Ficou fácil de usar.
Por: Rodrigo
09/9/08
Primeiramente parabéns pela pagina pois é de utilidade publica, para quem quer se aprofundar em programação web é obrigatorio a passada pela sua pagina so uma duvida no primeiro artigo dos exemplos de aplicações simples em javascript quando coloco o codigo:
<script type="text/javascript">
window.open("http://www.elo.com.br","","width=700,heigt=600,menubar=no")
</script>
a janela abre automaticamente como faço para a pagina secundaria abrir apenas se clicado no link?
abraço e obrigado.
Muito bom
Por: 7pd4
11/10/09
Achei muito bom o esclarecimento, estamos montando um site para a nossa rádio na web, e tinha muitas dúvidas, mais elas me foram esclarecida totalmente. Muito obrifado esperamos receber de dos senhores mais informações para que possamos serguir enfrente.

Atenciosamente,
Radio AliancaConnect
Vagner Rocha
Parabéns
Por: nandafederer
13/11/09
Não canso de me surpreender com esse site! Aqui sempre encontro explicações simples e esclarecedoras. Continuem assim!

Usuários :    login / registro
Manuais relacionados
Categorias relacionadas
O autor

Buscar projetos:

Home | Sobre nós | Copyright | Anuncie | Entrar em contato