Crie um script que apresente a data atual do computador na tela e em seguida
exiba as horas, minutos e segundos atuais.
Crie um script que exiba o número do dia da semana, assim como, o número
do mês atual.
Crie um script que exiba na tela a data e hora atuais no seguinte formato:
Agora são: hh:mm:ss do dia dd-mm-yy
Crie um script que apresente a data e hora no formato do fuso horário default.
Altere este script fazendo a data e hora apresentarem-se no formato atual do
fuso horário local.
Crie um script que apresente na página a seguinte condição:
Se horas for menor que 12h, exiba “BOM DIA”;
Se horas estiver entre 12h e 18h, exiba: “BOA TARDE”;
Se horas estiver entre 00h e 05h, exiba: “BOA MADRUGADA”.
Crie um script que apresente na barra de status a data e as horas sendo
atualizado de 1 em 1 segundo. Veja o formato a ser apresentado na barra de
status:
Segunda-feira, 23 de Novembro de 2001. Agora são: hh:mm:ss
OBJETO DOCUMENT
O objeto document é responsável por conter diversas informações sobre o
documento corrente. Veja suas propriedades e eventos utilizados:
PROPRIEDADE
Este objeto é uma propriedade do objeto window.
SINTAXE
document.propriedade
document.método()
Veja na tabela abaixo a lista de propriedades do objeto document.
PROPRIEDADES DO OBJETO DOCUMENT
PROPRIEDADES DESCRIÇÃO
alinkColor
Especifica o valor do atributo ALINK, que
determina a cor do link acionado.
anchors[]
Lista todas as âncoras em um
documento.
bgColor
Especifica o valor do atributo BGCOLOR,
que determina a cor de fundo da página.
cookie
Especifica uma string contendo uma
parte da informação que é armazenado
no micro do usuário.
defaultStatus
Especifica um texto para a barra de
status do navegador.
fgColor
Especifica o valor do atributo TEXT, que
apresenta a cor dos textos presentes no
documento.
forms[]
Array que contém todos os formulários
do documento.
lastModified
Apresenta a data da última modificação
feita no documento.
linkColor
Especifica o valor do atributo LINK, que
determina a cor dos links não visitados.
links[]
Array que contém os hiperlinks do
documento.
location
Especifica a URL completa do documento
corrente.
referrer
Especifica a URL que originou o
documento corrente.
status
Especifica o texto atual da barra de
status do navegador.
title
Especifica o valor do atributo TITLE do
documento.
vlinkColor
Especifica o valor do atributo VLINK, que
determina a cor dos links visitados.
Assim como ao abrir uma janela do browser, é criado um objeto chamado
window, com ele é também criado um objeto denominado document.
Grande parte dos objetos em uma página são diretamente propriedades do
objeto document, um exemplo claro disto é o objeto form que possui várias
propriedades, porém ele mesmo é uma propriedade do objeto document.
Veja a seguir a utilização de algumas das propriedades apresentadas:
Neste exemplo é apresetnada uma mensagem de alerta que exibe o código
HEXADECIMAL da cor de fundo definida para a página.
<script>
alert(document.bgColor);
</script>
No exemplo a seguir foi usada a propriedade bgColor no evento
onMouseover que mudará a cor de fundo do documento assim que o ponteiro
do mouse passar sobre o nome de uma cor
<html>
<body>
<script>
<!--
function mudaCor(cor){
document.bgColor=cor;
}
</script>
<body>
<pre>
<a href onMouseover="mudaCor('blue')">Azul</a>
<a href onMouseover="mudaCor('azure')">Azul Fraco</a>
<a href onMouseover="mudaCor('lightblue')">Azul Claro</a>
<a href onMouseover="mudaCor('red')">Vermelho</a>
<a href onMouseover="mudaCor('green')">Verde</a>
<a href onMouseover="mudaCor('lightgreen')">Verde Claro</a>
<a href onMouseover="mudaCor('pink')">Rosa</a>
<a href onMouseover="mudaCor('silver')">Cinza</a>
<a href onMouseover="mudaCor('purple')">Púrpura</a>
<a href onMouseover="mudaCor('orange')">Laranja</a>
<a href onMouseover="mudaCor('magenta')">Magenta</a>
<a href onMouseover="mudaCor('yellow')">Amarelo</a>
<a href onMouseover="mudaCor('black')">Preto</a>
</pre>
<body>
</html>
Já neste outro exemplo foi criado quatro botões de radio que ao clicar sobre
um dos botões, é mudada a cor de fundo da página.
<html>
<body>
<PRE>
<input type="radio" name=grupo
onClick="document.bgColor='blue'">Azul
<input type="radio" name=grupo
onClick="document.bgColor='red'">Vermelho
<input type="radio" name=grupo
onClick="document.bgColor='yellow'">Amarelo
<input type="radio" name=grupo
onClick="document.bgColor='silver'">Cinza
</pre>
</body>
</html>
MÉTODOS DO OBJETO DOCUMENT
Veja a relação dos métodos utilizados no objeto document.
MÉTODO DESCRIÇÃO
clear Limpa a janela (window).
close Fecha o documento atual.
write
Permite a inclusão de texto no corpo do
documento.
writeln
Permite a inclusão de texto no corpo do
documento com um caractere de nova
linha anexado.
MÉTODO CLEAR
Com o método clear() do objeto document é possível ao usuário limpar o
conteúdo de uma janela.
IMPORTANTE: É bom saber que este método não funciona
no Internet Explorer, sendo compatível apenas para o
Netscape a partir de sua versão 2. Veja um exemplo de
utilização deste método:
<html>
<head><title>MÉTODO CLEAR</title></head>
<body>
Texto incluso no corpo de um documento HTML.
<input type=button name="teste" value="Limpar Página!"
onClick="document.clear()"
</body>
</html>
MÉTODO CLOSE
O método close() do objeto document diferente do método clear() tem
como finalidade fechar o documento, sendo utilizado hoje em dia pelo objeto
window, seu uso também é restrito apenas para algumas versões do
Netscape.
IMPORTANTE: É bom saber que este método não funciona
no Internet Explorer, sendo compatível apenas para o
Netscape a partir de sua versão 2. Veja um exemplo de
utilização deste método:
MÉTODO WRITE E WRITELN
Estes métodos permitem a inserção de texto em documento. Estes métodos
são bem similares, diferenciando-se que o método writeln acrescenta um
caractere de nova linha ao final de uma string. Normalmente este caractere é
ignorado pela linguagem HTML, com exceção dos Tag’s <PRE> e
<TEXTAREA>. É certo que o método mais utilizado em JavaScript é o método
write do objeto document. Sua sintaxe básica tem a seguinte composição:
document.write(texto);
document.writeln(texto);
Caso o texto seja uma string, o mesmo deverá estar entre aspas. Com estes
métodos o usuário poderá criar uma página inteira utilizando o JavaScript. Mas
caso seja da pretensão do usuário incluir nestes textos tag’s HTML, basta
utilizá-los envolvendo o texto em questão veja pelo exemplo a seguir:
document.write("<TITLE>Bem Vindo</TITLE>");
document.write("<H1>Obrigado pela Visita</H1>");
document.write("<TEXTAREA>SENAC");
document.write("Informática</TEXTAREA>");
Observe agora o uso do método writeln que permitira ao texto criado no tag
<TEXTAREA> a quebra de linha entre eles:
document.writeln("<TEXTAREA>SENAC");
document.writeln("Informática</TEXTAREA>");
Veja outro exemplo a seguir da apresentação de um cálculo sendo exibido
através do método write.
<SCRIPT>
document.write("O resultado de 5+2 é: ",5+2);
</script>
Veja pelo exemplo anterior que o cálculo foi separado da string com uma
vírgula, com isto, o browser entende que deverá efetuar o mesmo e apresentar
o seu resultado no documento.
EXERCÍCIOS
Crie em uma página HTML um script que mostre em uma caixa de alerta a cor
de fundo da página.
Crie um script que exiba uma caixa de alerta que mostre a data da última
modificação.
Crie um script que exiba uma caixa de alerta que mostre à URL completa da
página.
Crie um script que exiba uma caixa de alerta que mostre o título presente na
barra de título.
Comentários
Postar um comentário