Material Javascript

PROGRAMAO CLIENT-SIDE (PARTE CLIENTE) USANDO JAVASCRIPT
O JavaScript uma linguagem de Desenvolvimento Web baseada em scripts de navegadores capaz de adicionar comportamentos as pginas Web. Foi desenvolvida por Brendan Eich da Netscape, sendo lanada em 1995, juntamente com o suporte do navegador Netscape Navigator a Applets Java da Sun Microsystems. No entanto o JavaScript no foi baseado na linguagem Java e nem sequer depende desta plataforma para execuo, o nome provem de uma campanha de Marketing elaborada para o lanamento do Navegador Netscape Navigator. Em pouco tempo, a linguagem JavaScript foi amplamente aceita como uma linguagem de desenvolvimento client-side. Esta aceitao forou a Microsoft a adicionar o suporte a JavaScript ao seu navegador Internet Explorer. No entanto a Microsoft utilizou o nome JScript para sua especificao, para evitar problemas de direitos. Em 1996 o JavaScript foi padronizado pela ECMA Internacional com o nome de ECMAScript e seguido por diversos navegadores. Adicionado o JavaScript nas pginas Web:
<html> <head><title>Pgina</title></head> <body> <script type="text/javascript"> ... Codificao </script> <noscript> <p>Seu Navegador parece no suportar JavaScript, ou voc desabilitou esta funcionalidade.</p> </noscript> </body> </html> 1. Objetos JavaScript
JavaScript organiza todos os elementos da janela do Navegador dentro de uma hierarquia. Cada elemento visto como um objeto. Os objetos podem ter propriedades, mtodos e responder a certos eventos. Por isso muito importante entender a hierarquia dos objetos HTML. Voc entender rapidamente como isto funciona com a ajuda de um exemplo. O exemplo seguinte uma pgina HTML simples:
No exemplo acima, ns temos, um link, um imagem, e um formulrio com dois campos texto e um boto. Do ponto de vista do JavaScript a janela do browser um objeto window. Este objeto window contm certos elementos, como a barra de status. Dentro da janela, ns podemos carregar uma pgina HTML. Esta pgina um objeto document. Desta forma o objeto document representa o documento HTML (que est carregado no momento). O objeto document muito importante, em JavaScript voc sempre o usar muito. As propriedades e mtodos do objeto document sero vistas detalhadamente, mais adiante. Mas o que mais importante que todos os objetos HTML so propriedades do objeto document. Um objeto HTML pode ser, por exemplo, um link ou um formulrio. A imagem abaixo ilustra a hierarquia criada pelo exemplo acima:
document
Image[0] Pessoas
Form[0]
Link[0]
Elem[0] Campo Nome
Elem[1] Campo Endereo
Elem[2] Boto Gravar
Ns podemos obter informaes de diversos objetos e ento manipul-los. Para isso ns devemos saber como acessar os diferentes objetos. Voc primeiro verifica o nome do objeto no diagrama de hierarquia. Se voc ento precisar saber como referenciar a primeira imagem na pgina HTML, basta seguir o caminho hierrquico, vejamos como: voc deve percorrer o diagrama de cima para baixo, o primeiro objeto chamado
document, a imagem representada por Imagem[0]. Desta forma ns podemos acessar este objeto em JavaScript, da seguinte forma: document.Imagem[0]. Se voc quiser saber o que o usurio digitou dentro do primeiro elemento do formulrio, voc primeiro precisa pensar em como acessar esse objeto. Novamente ns seguiremos o diagrama de hierarquia, de cima para baixo. Siga o caminho que leva at Elem[0]. Todos os nomes de objeto por onde voc passou tem que constar na referncia ao primeiro elemento do formulrio. Desta forma voc pode acessar o primeiro elemento texto assim: document.Form[0].Elem[0] Mas como obteremos agora, o texto digitado? Este elemento texto possui uma propriedade chamada value - no se preocupe agora, com propriedades, mtodos ou eventos, eles sero vistos detalhadamente mais adiante - esta propriedade armazena o contedo do objeto, ou seja, o texto digitado. A seguinte linha de cdigo obtm o texto digitado: nome = document.forms[0].elements[0].value; A string armazenada na varivel name. Ns podemos agora trabalhar com esta varivel. Por exemplo, ns podemos criar uma janela popup com alert("Oi "+name);. Se a entrada for "Fulano" o comando alert("Oi "+name) abrir uma janela popup com o texto "Oi Fulano". Se voc estiver trabalhando com pginas grades pode ficar um pouco confuso referenciar objetos diretamente pelo endereamento do diagrama de hierarquia, voc pode ter referncias do tipo: document.forms[3].elements[15] ou document.forms[2].elevent[21]. Para evitar esse problema voc pode dar nomes diferentes aos objetos, vejamos o seguinte fragmento de um documento HTML: <form NAME="clientes"> Nome: <input TYPE="text" NAME="empresa" value=" ">
...
Dessa forma, em vez de usarmos, por exemplo: document.forms[0].elements[0].value; Podemos usar: document.clientes.empresa.value; Isto traz muitas facilidades - especialmente com pginas grandes e com muitos objetos. Observe que a caixa das letras faz diferena. Muitas propriedades dos objetos JavaScript no so apenas para leitura, voc pode atribuir novos valores a algumas propriedades.
1.1. Objeto window

o objeto que ocupa o topo do esquema hierrquico em JavaScript.
PROPRIEDADES: defaultStatus - Determina o contedo padro da barra de status do browser, quando nada de importante estiver acontecendo.
window.defaultStatus='Qualquer coisa'
frames - Vetor que armazena as referncias para as frames da janela atual. Utilizado para obter o nmero de frames da janela principal, assumindo que estamos em um frame. parent.frames.lenght
parent - Refere-se a janela pai da frame atual.
self - Refere-se a janela atual. self.defaultStatus='Qualquer coisa'
status - Define uma mensagem que ir aparecer no rodap do browser, em substituio por exemplo, a URL de um link, quando estivermos com o mouse sobre o link. Ex: window.status="qualquer texto"
window - Refere-se a janela atual. Funciona de modo anlogo a self. window.status='Qualquer coisa'
MTODOS:
alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto de OK. alert('Esta uma janela de alerta!')
close - Termina a sesso atual do browser. top.close()
confirm - Mostra uma caixa de dilogo, seguida de um sinal sonoro e os boto de OK e Cancel. Retorna um valor verdadeiro se o usurio escolher OK. retorno=confirm('Deseja prosseguir?')
open - Abre uma nova sesso do browser, como se o usurio pressionasse <CTRL>+N window.open("URL", "Nome" [,"caractersticas"]) Onde: URL - endereo selecionado inicialmente quando da abertura da nova janela. Nome - nome da nova janela, definido pelo programador.
Caractersticas - srie de opes de configurao da nova janela, se especificados devem estar na mesma string, separados por vrgulas e sem conter espaos. toolbar=0 ou 1 location=0 ou 1 directories=0 ou 1 status=0 ou 1 menubar=0 ou 1 scrollbars=0 ou 1 resizable=0 ou 1 width=valor inteiro positivo height=valor inteiro positivo window.open("http://www.setrem.com.br","NovaJanela","toolbar=1,location=1,directo ries=0,status=1,menubar=1,scrollbars=1,resizable=0,width=320,height=240")
prompt - Monta uma caixa de entrada de dados, de forma simplificada comparando-se com o objeto text. prompt(label [,valor]) Onde: label - texto que aparece ao lado da caixa. valor - o contedo inicial da caixa.
setTimeout - Faz com que uma expresso seja avaliada aps um determinado tempo (em milissegundos). ID=setTimeOut(alert('voc chegoua aqui, a 10 segundos'),10000) ID - identificador utilizado para o cancelamento de setTimeOut.
clearTimeout - Cancela setTimeOut. clearTimeOut(ID)
EVENTOS: onLoad - Ocorre assim que a pgina HTML termina de ser carregada.
onUnload - Ocorre assim que o usurio sai da pgina atual.
1.3. Objeto document

Este objeto armazena todas as caractersticas da pgina HTML, como por exemplo: cor das letras, cor de fundo, figura que aparecer como papel de parede, etc Sempre que inclumos alguma declarao no <BODY> do documento, estamos alterando (sem perceber) o objeto Document.
Forma geral: <BODY [BACKGROUND="Imagem"] [BGCOLOR="#CorDeFundo"] [FGCOLOR="#CorDoTexto"] [LINK="#CorDosLinks"] [ALINK="#CorDoLinkAtivado"] [VLINK="#CorDoLinkVisitado"] [onLoad="funcao"] [onUnLoad="funcao"]>
Onde: Imagem = figura no formato GIF, que servir como papel de parede para a Home Page;
#Cor = nmero (hexadecimal), com seis dgitos, que corresponde a cor no formato RGB, o "#" obrigatrio. Os dois primeiros dgitos correspondem a R (red), os dois do meio a G (green) e os dois ltimos a B (blue). A combinao dos trs forma a cor no formato RGB.
Funcao = nome de uma funo pr-definida, que ser chamada quando o evento ocorrer.
PROPRIEDADES:
alinkColor - Determina a cor do link enquanto o boto do o mouse estiver pressionado sobre o link. document.alinkColor="#FFFFFF"
anchors - Vetor que armazena as ncoras definidas em uma pgina HTML com o comando <A NAME="ancora">. Esta propriedade somente para leitura, no pode ser alterada. document.anchors[ndice]
bgColor - Determina a cor de fundo da pgina HTML. document.bgColor="#000000"
fgColor - Determina a cor das letras em uma pgina HTML. Esta propridade no altera o que j est impresso na pgina HTML. document.fgColor="#0000FF"
forms - Vetor que armazena as referncias aos formulrios existentes na pgina HTML. Esta propriedade somente para leitura, no pode ser alterada. document.forms[ndice]
lastModified - Obtm a data da ltima atualizao da pgina HTML. Esta propriedade somente para leitura, no pode ser alterada. document.lastModified
linkColor - Determina a cor dos links que ainda no foram visitados pelo usurio. document.linkColor = "#00FF00"
links - Vetor que armazena os links definidos em uma pgina HTML. Esta propriedade somente para leitura, no pode ser alterada. document.links[ndice]
location - Armazena o endereo (URL) atual em forma de string. Esta propriedade somente para leitura, no pode ser alterada.
referrer - Armazena o endereco (URL) de quem chamou a pgina HTML atual. Com essa propriedade voc pode saber o usurio chegou a sua pgina. Esta propriedade somente para leitura, no pode ser alterada. document.referrer
title - Armazena uma string com o ttulo da pgina HTML atual. Esta propriedade somente para leitura, no pode ser alterada. document.title
vlinkColor - Determina a cor que o link aparecer aps ser visitado. document.vlinkColor = "#80FF80"
MTODOS: clear -limpa a tela da janela atual.
document.clear( )
open -Abre um documento e envia (mas no exibe) a sada dos mtodos write/writeln. Os dados enviados so exibidos, quando encontrado o mtodo close. Ex: document.open( )
close - Termina uma sequncia iniciada com o mtodo open, exibindo o que tinha sido apenas enviado. document.close( )
write - Imprime informaes na pgina HTML. document.write("Qualquer coisa" [,varivel] [,..., expresso])
writeln - Imprime informaes na pgina HTML e passa para a prxima linha. Em meus testes, esse mtodo no apresentou diferena com relao ao mtodo write. document.writeln("Qualquer coisa" [,varivel] [,..., expresso])
EVENTOS: onLoad - Ocorre assim que um browser carrega uma pgina HTML ou frame. <BODY ... onLoad='alert("Oi!!!")'>
onUnload - Ocorre quando se abandona uma pgina HTML ou frame. <BODY ... onUnload='alert("Saindo da pgina!!!")'>
O que podemos fazer? Alterar o Titulo Colocar mensagem no rodap (Barra de Status) Utilizar confirmao Exibir Alertas Validar formulrios Redimensionar e Posicionar Janelas Ativar Popup Outros

Material Javascript

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Material Javascript

Hochgeladen von

Copyright:

Verfügbare Formate

PROGRAMAO CLIENT-SIDE (PARTE CLIENTE) USANDO JAVASCRIPT

Elem[0] Campo Nome

Elem[1] Campo Endereo

Elem[2] Boto Gravar

1.1. Objeto window

parent - Refere-se a janela pai da frame atual.

self - Refere-se a janela atual. self.defaultStatus='Qualquer coisa'

close - Termina a sesso atual do browser. top.close()

clearTimeout - Cancela setTimeOut. clearTimeOut(ID)

onUnload - Ocorre assim que o usurio sai da pgina atual.

1.3. Objeto document

bgColor - Determina a cor de fundo da pgina HTML. document.bgColor="#000000"

MTODOS: clear -limpa a tela da janela atual.

Das könnte Ihnen auch gefallen