Curso: Webmaster &
Webdesign
Disciplina: Criação de Site III
Professor: Jose Maria Silveira
(cs3_06na_objeto.html)
Pricipais objetos em javaScript
Os principais obejetos que utilizamos em javaScript são:
windows;
document;
form;
Também estudaremos outras propriedades dos objetos acima, que por sua subdivisão também são considerados objetos:
location;
history;
navigator:
screen;
Descreveremos a seguir os objetos windows e document. Veja no final os sites com as características de cada um desses objetos:
Objeto windows
O objeto windows é o tronco da arvore de objetos (na prática), tudo acontece dentro de uma janela, por definição geral não precisamos especificar a janela quando nos referimos aos objetos (se forem da janela corrente), por exemplo, citamos sem a janela:
document.history
Abaixo citamos as propriedades e métodos do objeto windows, sendo que as mais usadas são:
- caixas de diálogo: alert(),
confirm(), prompt()
- temporizador: setTimeout()
e clearTimeout().
- Com as frames : frames[], length,
parent , opener e top.
- Barra de estado : status e
defaultStatus.
- Abertura/fechamento de janela : open()
e close() e self()
Propriedades:
|
Propriedade |
Descrição |
|---|---|
|
Indica (true ou false) se a janela está fechada ou não |
|
|
Lê ou define a mensagem que por omissão aparece escrita na barra de estado do browser |
|
|
document |
Devolve o objecto document, que representa o documento que está a ser apresentado na janela. |
|
event |
Devolve o objecto event, que descreve o último acontecimento que ocorreu na janela. |
|
history |
Objecto que contém uma lista com os endereços (URLs) das páginas já visitadas na presente sessão e permite regressar a elas |
|
Lê a quantidade de molduras (frames) que estão na janela |
|
|
Contém informação acerca do endereço (URL) da página que está a ser apresentada e permite alterá-lo |
|
|
Lê ou define o nome da janela |
|
|
Devolve o objecto navigator |
|
|
opener |
Devolve (se existir) o objecto que abriu a janela (só em janelas popup) |
|
outerHeight |
(Só Mozilla/Netscape e Opera) Contém a altura exterior da janela do browser |
|
outerWidth |
(Só Mozilla/Netscape e Opera) Contém a largura exterior da janela do browser |
|
pageXOffset |
(Só Mozilla/Netscape e Opera) Contém a coordenada x do canto superior esquerdo da janela |
|
pageYOffset |
(Só Mozilla/Netscape e Opera) Contém a coordenada y do canto superior esquerdo da janela |
|
parent |
Caso a página esteja numa moldura (frame ou iframe) devolve o objecto window que a contém |
|
returnValue |
Lê o valor devolvido por uma caixa de diálogo |
|
screen |
Devolve um objecto que contém informação acerca do écran utilizado para ver a página |
|
(Só MSIE) Contém a coordenada x do canto superior esquerdo da área da janela que contém a página (difere de pageXOffset) |
|
|
(Só MSIE) Contém a coordenada y do canto superior esquerdo da área da janela que contém a página (difere de pageYOffset) |
|
|
self |
Devolve o objecto window em que a página se encontra |
|
Lê ou define a mensagem que aparece escrita na barra de estado |
|
|
top |
Devolve o objecto window que ocupa a posição mais elevada na hierarquia de molduras |
Metodos:
|
Método |
Descrição |
|---|---|
|
alert() |
Mostra uma caixa com uma mensagem de texto e um botão OK. |
|
blur() |
A janela perde o foco. |
|
clearInterval() |
Anula uma acção do método setInterval(). |
|
clearTimeout() |
Anula uma acção do método setTimeout(). |
|
close() |
Fecha a janela. |
|
confirm() |
Mostra uma caixa com uma mensagem de texto, um botão para Cancelar e um botão para aceitar (OK). |
|
escape() |
Codifica uma string (texto) para que ela possa ser enviada como parte do URL ou guardada num cookie |
|
focus() |
Dá o foco a uma janela |
|
moveBy() |
Desloca a janela relativamente à sua posição actual. |
|
moveTo() |
Move a janela para a posição especificada. |
|
open() |
Abre uma nova janela (popup). |
|
print() |
Imprime o documento que se encontra na janela. |
|
prompt() |
Mostra uma caixa com uma pergunta e um campo para inserir uma resposta. |
|
resizeBy() |
Altera o tamanho da janela somando aos valores actuais os valores x e y especificados. |
|
resizeTo() |
Altera o tamanho da janela para os valores x e y especificados. |
|
scrollBy() |
Desloca o início da parte visível da janela somando os valores x, y às coordenadas da parte que está actualmente no início da parte visível. |
|
scrollTo() |
Faz com que a parte visível do conteúdo da janela se inicie na parte da página que tem as coordenadas (x, y) especificadas. |
|
setInterval() |
Executa a funcção indicada a intervalos regulares (medidos em milisegundos) |
|
setTimeout() |
Executa a função indicada uma só vez depois de passado algum tempo (medido em milisegundos) |
|
unescape() |
Descodifica uma string (texto) que estava preparada para ser enviada como parte do URL colocando-a na forma normal. Efectua a operação inversa do método escape(). |
Um exemplo: Abrindo uma janela (windows):
Sintaxe:
[window.]open("URL","nome_da_janela","características_da
janela")
onde:
URL = site onde iniciar a
janela;
nome = referencia para o controle do
objeto;
características = (cfe. abaixo):
|
toolbar=yes ou no |
Visualização da barra de ferramentas |
|
|
location=yes ou no |
Visualização de campo de endereço (ou de localização) |
|
|
directories=yes ou no |
Visualização dos botões de acesso rápido |
|
|
status=yes ou no |
Visualização da barra de estado |
|
|
menubar=yes ou no |
Visualização da barra de menus |
|
|
scrollbars=yes ou no |
Visualização das barras de
rolagem. |
|
|
resizable=yes ou no |
Possibilidade de modificar as dimensões da janela |
|
|
width=x em pixels |
Largura da janela em pixeis |
|
|
height=y em pixels |
Altura da janela em pixeis |
|
Obs.: existem outras propriedades, porém são incompatíveis com alguns navegadores.
Exemplo: open('test.htm',
'new', 'width=300,height=150' )
pode ser chamado
em um evento, como:
... <FORM>
<INPUT TYPE ="button" value="Abrir une nova janela"
onClick="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
</FORM> ...
De maneira semelhante, podemos utilizar as demais propriedades do objeto. Veja a sintaxe nos cites citados no inicio.
Objeto document.
É o objetos mais usado, visto que se refere a própria página que usamos.
Muitas de suas propriedades são usadas com frequencia, abaixo apresentamos a relação completa, retirda do site em referencia.
document|
Propriedade |
Descrição |
|---|---|
|
body |
Devolve o elemento <body> (se o documento estiver escrito em HTML sem molduras) ou o elemento <frameset> (se o documento estiver escrito em HTML Frameset.) |
|
cookie |
Devolve os cookies associados ao documento |
|
Lê o nome de domínio do servidor que enviou o documento |
|
|
Lê o endereço (URL) da página em que está a ligação que conduziu até ao documento actual |
|
|
Lê ou define o título do documento |
|
|
Lê o endereço (URL) do documento |
Coleções:
|
Colecção |
Descrição |
|---|---|
|
anchors |
Contém uma lista com todos os elementos <a> (âncoras) existentes no documento |
|
applets |
Contém uma lista com todos os elementos <applet> (miniaplicações escritas em Java) |
|
embeds |
Contém uma lista com todos os objectos que foram embutidos na página usando os elementos <embed> ou <object> |
|
forms |
Contém uma lista com todos os elementos <form> existentes no documento |
|
images |
Contém uma lista com todas as imagens existentes no documento |
|
links |
Contém uma lista com todos os elementos <a> existentes no documento que especifiquem um valor para o atributo href (é uma subcolecção de anchors.) |
|
plugins |
Contém a mesma lista que a colecção embeds |
document:|
Método |
Descrição |
|---|---|
|
close() |
Fecha um documento que tenha sido aberto com o método document.open() e escrito com document.write(). Não confundir com o método open() do objecto window, que serve para abrir uma nova janela. |
|
getElementById() |
Devolve o elemento que possui o valor especificado no atributo id |
|
getElementsByTagName() |
Contém uma lista com todos os elementos que têm um determinado nome (dado por uma etiqueta do HTML) |
|
open() |
Abre um documento para nele escrever conteúdo novo |
|
write() |
Escreve texto num documento |
|
writeln() |
Escreve uma linha de texto num documento |
Nos sites abaixo, descrição dos métodos e propriedades:
|
windows |
|
|
document |
|
|
form |
http://artifice.web.pt/tutoriais/cntd/dhtml_tut11.html#a11_7 |
|
location |
|
|
history |
|
|
navigator |
|
|
screen |
Para sintaxe veja:
http://www.devguru.com/technologies/javascript/10541.asp
ou http://www.c-point.com/javascript_tutorial/jstoc.htm
Fontes: http://artifice.web.pt/tutoriais/cntd/dhtml_tut4.html http://www.devguru.com/technologies/javascript/10541.asp
http://www.c-point.com/javascript_tutorial/jstoc.htm