Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
  T u t o r i a l   D H T M L / C S S   E d a u r e l i o
            2 0 0 1  -  2 0 0 4

JavaScript

MENSAGENS DE SAUDAÇÃO

A rotina a seguir coloca uma mensagem de saudação em sua página. Ela utiliza o horário de seu sistema para dizer "Bom dia, Boa tarde ou Boa noite, conforme a mensagem que dispuser em relação ao horário. Insira-a na página onde você quer que ela apareça. No exemplo desta página inseri a rotina logo abaixo do cabeçalho "MENSAGEM DE SAUDAÇÃO".

Sintaxe: 
<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function greeting() {
var today = new Date();
var hrs = today.getHours();
document.write("<CENTER>");

if (hrs < 6)
document.write("<h1>Você não dorme hein!!");
else if (hrs < 12)
document.write("<H1>Bom Dia");
else if (hrs <= 18)
document.write("<H1>Boa Tarde");
else
document.write("<H1>Boa Noite");   
document.writeln("!</H1>");
document.write("<font size=2> Agora é:  ");
dayStr = today.toLocaleString();
document.write(dayStr +'</font>');
}
// End -->
greeting()
</SCRIPT>

 

MENSAGEM DESLIZANTE DENTRO DE UM CAMPO

A rotina a seguir coloca um campo com um texto deslizante em sua página conforme mostra o exemplo abaixo. Copie a sintaxe e cole-a dentro de sua página, depois insira dentro de <body> os parâmetros onLoad="ticker()". Para aumentar ou diminuir a velocidade de rolamento do texto basta alterar no parâmetro id=setTimeout("ticker()",1250/5); } o número após a barra. Especifique, dentro da função TICKER() o texto que quer que apareça na barra.

Sintaxe: 
<script language="JavaScript">
<!-- Hide the script from old browsers --

// Michael P. Scholtis (mpscho@planetx.bloomu.edu)
// All rights reserved.  January 19, 1996
// You may use this JavaScript example as you see fit, as long as the
// information within this comment above is included in your script.


var timerID = null;
var timerRunning = false;
var id,pause=0,position=0;

function ticker() {
        var i,k,msg=" Coloque aqui a Mensagem para os usuários!!!  ";
        k=(75/msg.length)+1;
        for(i=0;i<=k;i++) msg+=" "+msg;
        document.form2.ticker.value=msg.substring(position,position+75);
        if(position++==38) position=0;
        id=setTimeout("ticker()",1250/5); }

function action() {
        if(!pause) {
                clearTimeout(id);
                pause=1; }

        else {
                ticker();
                pause=0; } }
// --End Hiding Here -->
</script>
<form name="form2">
<center>
<input type="text" name="ticker" size="60">
</center>
</form>

 

QUADRO QUE ALTERNA A COR NA PASSAGEM DO MOUSE

Voce já deve ter reparado a barra de menus desta homepage. Ela alterna as cores do quadro quando você move o mouse sobre ela criando um efeito de acabamento interessante. Esse efeito é conseguido com um applet JavaScript que vou apresentar a seguir:

Primeiro coloque a sintaxe abaixo dentro do cabeçalho <head>...</head> de sua página.

Sintaxe:
<SCRIPT LANGUAGE="Javascript">
<!--
function mOvr(src,clrOver) {if (!src.contains(event.fromElement)) {src.style.cursor = 'hand';
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {if (!src.contains(event.toElement)) {src.style.cursor = 'default';
src.bgColor = clrIn;
}
}
// -->
</script>

Depois configure cada quadro <TD> da tabela onde o efeito deve acontecer com os seguintes parâmetros:
bgcolor="#999999" onMouseOver="mOvr(this,'#ff0000');" onMouseOut="mOut(this,'#999999')"

Pronto, isso é tudo! Mas vamos à aplicação prática, o exemplo. Abaixo criei uma tabela com 3 quadros com os mesmos parâmetros de configuração acima. Agora passe o mouse sobre ela:

[ Tutorial ] [ Comandos ] [ Buscadores ]

Observe que em bgcolor="#999999" defini uma cor de fundo cinza que mudará para o vermelho mOvr(this,'#ff0000'), quando o mouse estiver sobre ele, e retornará para o cinza mOut(this,'#999999') quando o mouse estiver fora. Escolhi estas cores apenas para efeito de exemplo.

Aqui está a sintaxe deste exemplo:
<center>
<table border bgcolor="#999999">
<tr>
<td bgcolor="#999999" onMouseOver="mOvr(this,'#ff0000');" onMouseOut="mOut(this,'#999999')">
<a href="tutorial.htm"><b>[ Tutorial ]</b></a>
</td>
<td bgcolor="#999999" onMouseOver="mOvr(this,'#ff0000');" onMouseOut="mOut(this,'#999999')">
<a href="e.htm"><b>[ Comandos ]</b></a>
</td>
<td bgcolor="#999999" onMouseOver="mOvr(this,'#ff0000');" onMouseOut="mOut(this,'#999999')">
<a href="ferramentas.htm"><b>[ Buscadores ]</b></a>
</td>
</tr>
</table>
</center>

Simples, não é?!

 

Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
© Free Copyright - edaurelio@hotmail.com - Arquivo atualizado em 04/11/04