Académique Documents
Professionnel Documents
Culture Documents
JavaScript
INTRODUO
JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HyperText Markup Language). As pginas HTML podem ser escritas utilizando-se editores de texto, como o NotePad,
Write, etc. Porm, existem editores prprios para gerar HTML, tais como HotDog e (mais recomendado)
Microsoft FrontPage.
Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos.
Os pargrafos soltos so executados na sequncia em que aparecem na pgina (documento) e os
atrelados a eventos so executados apenas quando o evento ocorre.
Para inserir pargrafos de programao dentro do HTML necessrio identificar o incio e o fim do set
de JavaScript, da seguinte forma:
<SCRIPT>
Set de instrues
</SCRIPT>
Este procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor visualizao e
facilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio do documento, atravs
da criao de funes a serem invocadas quando se fizer necessrio (normalmente atreladas a eventos).
Se a lgica escrita a partir de um determinado evento, no necessrio o uso dos comandos
<SCRIPT> e </SCRIPT>.
Os comandos JavaScript so sensveis ao tipo de letra (maisculas e minsculas) em sua sintaxe.
Portanto, necessrio que seja obedecida a forma de escrever os comandos, de acordo com a forma
apresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando da escrita de um
comando, o JavaScript interpretar, o que seria um comando, como sendo o nome de uma varivel.
ndice
WebMasters - JavaScript
OPERADORES LGICOS
So operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE.
Os comandos condicionais sero vistos mais a frente.
==
Igual
!=
Diferente
>
Maior
>=
Maior ou Igual
<
Menor
<=
Menor ou Igual
&& E
||
Ou
ndice
OPERADORES MATEMTICOS
So operadores a serem utilizados em clculos, referncias de indexadores e manuseio de strings.
Ao longo do manual estes operadores sero largamente utilizados, dando, assim, uma noo mais precisa
do seu potencial.
+
subtrao de valores
multiplicao de valores
WebMasters - JavaScript
diviso de valores
CONTROLES ESPECIAIS
\b - backspace
\f - form feed
\n - new line caracters
\r - carriage return
\t - tab characters
// - Linha de comentrio
/*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentrio.
Os delimitadores naturais para uma string so " ou ' . Caso seja necessrio a utilizao destes caracteres
como parte da string, utilize \ precedendo " ou '.
WebMasters - JavaScript
COMANDOS CONDICIONAIS
So comandos que condicionam a execuo de uma certa tarefa veracidade ou no de uma
determinada condio, ou enquanto determinada condio for verdadeira.
So eles:
Comando IF
if (condio)
{ ao para condio satisfeita }
[ else
{ ao para condio no satisfeita } ]
Ex.
if (Idade < 18)
{Categoria = "Menor" }
else
{Categoria = "Maior"}
Comando FOR
for ( [inicializao/criao de varivel de controle ;]
[condio ;]
[incremento da varivel de controle] )
file:///I|/INFO/09Setembro/26_WebDev_2/Apostilas/js/o%20que%20e%20JavaScript.htm (4 de 44)20/9/2007 08:05:16
WebMasters - JavaScript
{ ao }
Ex.
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }
ComandoWHILE
Executa uma ao enquanto determinada condio for verdadeira.
while (condio)
{ ao }
Ex.
var contador = 10
while (contador > 1)
{ contador-- }
Move condicional
receptor = ( (condio) ? verdadeiro : falso)
Ex.
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")
OBS:
Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a condio
principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma ao (se determinada
condio ocorrer) mas volta para o loop.
Diretivas/condies entre [ ] significam que so opcionais.
WebMasters - JavaScript
ndice
EVENTOS
So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode definir
aes a serem realizadas pelo programa.
Abaixo apresentamos a lista dos eventos possveis, indicando os momentos em que os mesmos podem
ocorrer, bem como, os objetos passveis de sua ocorrncia.
onload - Ocorre na carga do documento. Ou seja, s ocorre no BODY do documento.
onunload - Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY.
onchange - Ocorre quando o objeto perde o focus e houve mudana de contedo.
vlido para os objetos Text, Select e Textarea.
onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudana.
vlido para os objetos Text, Select e Textarea.
onfocus - Ocorre quando o objeto recebe o focus.
vlido para os objetos Text, Select e Textarea.
onclick - Ocorre quando o objeto recebe um Click do Mouse.
vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto.
vlido apenas para Link.
onselect - Ocorre quando o objeto selecionado.
vlido para os objetos Text e Textarea.
WebMasters - JavaScript
CRIANDO VARIVEIS
A varivel criada automaticamente, pela simples associao de valores a mesma.
Ex. NovaVariavel = "Jose"
Foi criada a varivel de nome NovaVariavel que, passou a conter a string Jose.
As variveis podem ser Locais ou Globais. As variveis que so criadas dentro de uma funo so
Locais e referenciveis apenas dentro da funo. As variveis criadas fora de funes so Globais,
podendo serem referenciadas em qualquer parte do documento.
Desta forma, variveis que precisam ser referenciadas por vrias funes ou em outra parte do
documento, precisam ser definidas como globais.
Embora no seja recomendvel, em uma funo, pode ser definida uma varivel local com o mesmo
nome de uma varivel global. Para isso utiliza-se o mtodo de definio var.
Ex. Varivel Global: MinhaVariavel = ""
Varivel Local: var MinhaVariavel = ""
ndice
ESCREVENDO NO DOCUMENTO
O JavaScript permite que o programador escreva linhas dentro de uma pgina (documento), atravs do
mtodo write. As linhas escritas desta forma, podem conter textos, expresses JavaScript e comandos
Html. As linhas escritas atravs deste mtodo aparecero no ponto da tela onde o comando for inserido.
WebMasters - JavaScript
Ex:
<script>
valor = 30
document.write ("Minha primeira linha")
document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor))
</script>
A idia do exemplo acima escrever duas linhas. Entretanto o mtodo write no insere mudana de
linha, o que provocar o aparecimento de apenas uma linha com os dois textos emendados.
Para evitar este tipo de ocorrncia, existe o mtodo writeln que escreve uma linha e espaceja para a
seguinte. Entretanto, em nossos testes, este comando no surtiu efeito,obtendo-se o mesmo resultado do
mtodo write. A soluo encontrada para esta situao foi a utilizao do comando de mudana de
pargrafo da linguagem Html.
Ex:
<script>
valor = 30
document.write ("<p>Minha primeira linha</p>")
document.write ("<p>Nesta linha aparecer o resultado de : " + (10 * 10 + valor) + "</p>")
</script>
Isto resolve a questo da mudana de linha, porm, vai gerar uma linha em branco, entre cada linha, por
se tratar de mudana de pargrafo. Caso no seja desejado a existncia da linha em branco, a alternativa
utilizar o comando Html <br> que apenas muda de linha.
Ex:
<script>
valor = 30
file:///I|/INFO/09Setembro/26_WebDev_2/Apostilas/js/o%20que%20e%20JavaScript.htm (8 de 44)20/9/2007 08:05:16
WebMasters - JavaScript
MENSAGENS
Existem trs formas de comunicao com o usurio atravs de mensagens.
Apenas Observao.
alert ( mensagem )
Ex.
alert ("Certifique-se de que as informaes esto corretas")
Mensagem que retorna confirmao de OK ou CANCELAR
confirm (mensagem)
Ex.
if (confirm ("Algo est errado...devo continuar??"))
{ alert("Continuando") }
else
{ alert("Parando") }
Recebe mensagem via caixa de texto Input
Receptor = prompt ("Minha mensagem", "Meu texto")
WebMasters - JavaScript
Onde:
Receptor o campo que vai receber a informao digitada pelo usurio
Minha mensagem a mensagem que vai aparecer como Label da caixa de input
Meu texto um texto, opcional, que aparecer na linha de digitao do usurio
Ex.
Entrada = prompt("Informe uma expresso matemtica", "")
Resultado = eval(Entrada)
document.write("O resultado = " + Resultado)
ndice
CRIANDO FUNES
Uma funo um set de instrues, que s devem ser executadas quando a funo for acionada.
A sintaxe geral a seguinte:
function NomeFuno (Parmetros)
{ Ao }
Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou menor de idade,
recebendo como parmetro a sua idade.
function Idade (Anos) {
if (Anos > 17)
{ alert ("Maior de Idade") }
else
file:///I|/INFO/09Setembro/26_WebDev_2/Apostilas/js/o%20que%20e%20JavaScript.htm (10 de 44)20/9/2007 08:05:16
WebMasters - JavaScript
FUNES INTRNSECAS
So funes embutidas na prpria linguagem. A sintaxe geral a seguinte:
Result = funo (informao a ser processada)
- eval = Calcula o contedo da string
- parseInt - Transforma string em inteiro
- parseFloat - Transforma string em nmero com ponto flutuante
- date() - Retorna a data e a hora (veja o captulo manipulando datas)
ex1: Result = eval ( " (10 * 20) + 2 - 8")
WebMasters - JavaScript
WebMasters - JavaScript
WebMasters - JavaScript
MANIPULANDO ARRAYS
O JavaScript no tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com
arrays necessrio a criao de um objeto com a propriedade de criao de um array.
No exemplo abaixo, criaremos um objeto tipo array de tamanho varivel e com a funo de "limpar" o
contedo das variveis cada vez que uma nova instncia seja criada a partir dele.
function CriaArray (n) {
WebMasters - JavaScript
this.length = n
for (var i = 1 ; i <= n ; i++)
{ this[i] = "" } }
Agora podemos criar novas instncias do objeto "CriaArray" e aliment-los com os dados necessrios.
NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Tera"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sbado"
Atividade = new CriaArray(5)
Atividade[0] = "Analista"
Atividade[1] = "Programador"
Atividade[2] = "Operador"
Atividade[3] = "Conferente"
Atividade[4] = "Digitador"
Agora poderemos obter os dados diretamente dos arrays.
DiaSemana = NomeDia[4]
Ocupao = Atividade[1]
file:///I|/INFO/09Setembro/26_WebDev_2/Apostilas/js/o%20que%20e%20JavaScript.htm (15 de 44)20/9/2007 08:05:16
WebMasters - JavaScript
MANIPULANDO STRING's
file:///I|/INFO/09Setembro/26_WebDev_2/Apostilas/js/o%20que%20e%20JavaScript.htm (16 de 44)20/9/2007 08:05:16
WebMasters - JavaScript
MANIPULANDO DATAS
WebMasters - JavaScript
Existe apenas uma funo para que se possa obter a data e a hora. a funo Date(). Esta funo
devolve data e hora no formato:Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano
Ex.
Fri May 24 16:58:02 1996
Para se obter os dados separadamente, existem os seguintes mtodos:
getDate() - Obtm o dia do ms (numrico de 1 a 31)
getDay() - Obtm o dia da semana (0 a 6)
getMonth() - Obtm o ms (numrico de 0 a 11)
getYear() - Obtm o ano
getHours() - Obtm a hora (numrico de 0 a 23)
getMinutes() - Obtm os minutos (numrico de 0 a 59)
getSeconds() - Obtm os segundos (numrico de 0 a 59)
No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a varivel DataToda
para armazenar data/hora e a varivel DiaHoje para armazenar o nmero do dia da semana.
DataToda = new Date()
DiaHoje = DataToda.getDay()
Para obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana e
utilizar a varivel DiaHoje como indexador.
function CriaTab (n) {
this.length = n
for (var x = 1 ; x<= n ; x++)
WebMasters - JavaScript
{ this[x] = "" } }
NomeDia = new CriaTab(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Tera"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sbado"
DiaSemana = NomeDia[DiaHoje]
Para criar uma varivel tipo Date com o contedo informado pela aplicao, existe o mtodo set. Assim,
temos os seguintes mtodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds.
Seguindo o exemplo acima, para mudar o ms para novembro, teramos:
DataToda.setMonth(10)
Exemplos adicionais sero encontrados no captulo "Usando Timer e Date
ndice
WebMasters - JavaScript
WebMasters - JavaScript
WebMasters - JavaScript
</form>
</p>
Objeto Input CHECKBOX
So objetos que permitem ao usurio ligar ou desligar uma determinada opo.
Suas principais propriedades so: name, value e checked.
name : Especifica o nome do objeto
value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked).
Caso seja omitido, ser enviado o valor default "on" .
Esta propriedade tambm serve para ativar comandos lgicos, testando-se a condio
de "checked".
checked : Especifica que o objeto inicialmente estar ligado
O nico evento associado a este objeto onclick.
Ex:
No exemplo abaixo, criaremos um objeto input.text e trs objetos checkbox. O primeiro checkbox,
quando ativado, transformar o texto em caracteres minsculos. O segundo checkbox, quando ativado,
transformar o texto em caracteres maisculos. O terceiro checkbox, quando ativado, dar um aviso do
contedo que ser recebido pelo "server" caso o formulrio seja submetido para este.
<SCRIPT>
function AltMaiusc () {
document.TCheck.Muda.value = document.TCheck.Muda.value.toUpperCase()
Opt1.checked = false
}
document.TCheck.
WebMasters - JavaScript
function AltMinusc () {
document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase()
Opt2.checked = false
document.TCheck.
}
</SCRIPT>
<p>
<form name="TCheck">
Muda Case <input type=text size=20 maxlength=20 name="Muda"> </p>
<p>
Minusculo<input type=checkbox name="Opt1" value="1" checked
onclick="if (this.checked)
{ AltMinusc() } ">
Maiusculo<input type=checkbox name="Opt2" value="2"
onclick="if (this.checked)
{ AltMaiusc() } ">
Demo valor<input type=checkbox name="Opt3"
onclick="if (Opt3.checked)
{alert ('Server recebera = ' + Opt3.value) } ">
</p>
</form>
Existe ainda uma outra forma de manipular este objeto, em forma de array, que a seguinte: form.
elements[index].propriedade. Esta no uma boa forma porque o index nico dentro de um
file:///I|/INFO/09Setembro/26_WebDev_2/Apostilas/js/o%20que%20e%20JavaScript.htm (23 de 44)20/9/2007 08:05:16
WebMasters - JavaScript
formulrio, exigindo muito cuidado quando se acrescenta ou se deleta um objeto, pois, neste caso,
haver um natural deslocamento do index, podendo comprometer a lgica.
Objeto Input RADIO
So objetos que permitem ao usurio a escolha de apenas uma alternativa, diante de uma srie de opes.
Suas principais propriedades so: name, value e checked.
name : Especifica o nome do objeto. Para caracterizar uma mesma srie de opes, todos os
objetos desta srie tm que ter o mesmo "name".
value : Especifica o valor que ser enviado ao "server" se o objeto estiver ligado (checked). Caso
seja omitido, ser enviado o valor default "on" . Esta propriedade tambm serve para
ativar comandos lgicos, testando-se a condio de "checked".
checked : Especifica que o objeto inicialmente estar ligado
Para utilizao deste objeto importante o conhecimento de outras propriedades associadas:
Objeto.length : Retorna a quantidade de opes existentes na lista
Objeto.[index].value : retorna o texto (value) associado a cada opo
Objeto.[index].checked : retorna verdadeiro ou falso
O nico evento associado a este objeto onclick.
Ex. No exemplo abaixo temos dois set's de objetos radio. O primeiro tem o objetivo de mudar a cor de
fundo do documento atual. O segundo tem o objetivo levar informaes ao "server".
<p>Radio</p>
<p>
WebMasters - JavaScript
WebMasters - JavaScript
WebMasters - JavaScript
til a utilizao da propriedade onSubmit do formulrio. Este permite que se atrele lgica e decida-se
pela submisso ou no.
Ex.
<script>
function TestaVal() {
if (document.TesteSub.Teste.value == "") {
alert ("Campo nao Preenchido...Form nao Submetido")
return false }
else {
alert ("Tudo Ok....Form Submetido")
return true } }
</script>
<p>
<form method="POST" name="TesteSub"
onSubmit="return TestaVal()"
action="http://10.0.5.2/scripts/isapielo.dll/vbloja.loja.action">
Digite um Texto <input type=text size=10 maxlength=10 name="Teste" value="">
Botao Submit <input type=submit name="Bsub" value="Manda p/Server">
</p>
</form>
No exemplo acima, o formulrio est sendo submetido a URL "10.0.5.2" (que o endereo IP
WebMasters - JavaScript
de um "Server"). Este servidor est rodando o "Microsoft Internet Information Server". Estamos
enviando os dados a um "OLE", que est no subdiretrio "scripts", chamado "isapielo.dll", que tem
por objetivo fazer a coneco com aplicaes escritas em VB. A aplicao VB que est sendo
chamada, um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o mtodo
"action".
A aplicao VB, deste exemplo, far apenas a devoluo dos dados recebidos pelo Server.
Objeto TEXTAREA
um objeto para entrada de dados em um campo de mltiplas linhas. Suas principais propriedades so:
name, rows e cols.
name : Especifica o nome do objeto
rows : Especifica a quantidade de linhas que aparecero na tela
cols : Especifica a quantidade de caracteres que aparecero em cada linha
value : Acessa o contedo do campo via programao.
Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect.
Ex:
<form name="TesteTextarea">
<p>
Texto de Mltiplas Linhas <textarea name="MultText" rows=2 cols=40>
Primeira linha do texto inicial
segunda linha do texto inicial
</textarea>
WebMasters - JavaScript
</p>
Objeto SELECT
um objeto para entrada de opes, onde o usurio, a partir de uma lista de alternativas, seleciona uma
ou mais opes.
Suas principais propriedades so: name, size, value e multiple.
name : Especifica o nome do objeto
size : Especifica a quantidade de opes que aparecero na tela simultaneamente
value : Associa um valor ou string para cada opo (opcional)
multiple : Especifica a condio de mltipla escolha (usando-se a tecla Ctrl)
Para utilizao deste objeto importante o conhecimento de outras propriedades associadas:
Objeto.length : Retorna a quantidade de opes existentes na lista
Objeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].
text : retorna o texto externo associado a cada opo Objeto.options[index].value : retorna o texto
interno (value) associado a cada opo Objeto.options[index].selected : retorna verdadeiro ou falso
Os eventos associados a este objeto so: onchange, onblur e onfocus.
Ex1:
Neste exemplo importante observar os seguintes aspectos:
a) A lista permite apenas uma seleo
b) A quarta opo aparecer inicialmente selecionada (propriedade "selected")
c) No utilizamos a propriedade "value". Assim, a propriedade "text" e a propriedade "value"
passam a ter o mesmo valor, ou seja, o valor externo que aparece na tela.
<script>
WebMasters - JavaScript
function Verselect(Campo) {
Icombo = Campo.selectedIndex
alert ("Voce escolheu " + Campo.options[Icombo].text) }
</script>
<p>
Objeto Select <select name="Combo1" size=1 onchange="Verselect(Combo1)">
<option>Opcao 1
<option>Opcao 2
<option>Opcao 3
<option selected>Opcao 4 (recomendada)
<option>Opcao 5
<option>Opcao 6
</select>
</p>
Ex2:
Neste exemplo importante observar os seguintes aspectos:
a) A lista permite mltiplas selees
b) Utilizamos a propriedade "value". Assim as propriedades "text" e "value"
tm valores diferentes: text retornar Escolha 1 a Escolha 4 e value
retornar List1 a List4.
WebMasters - JavaScript
WebMasters - JavaScript
WebMasters - JavaScript
//
if (Ano < 1900)
{Ano = Ano + 1900 }
if (Nome == "")
{ alert ("Informe o seu Nome, No deixe em branco")
document.TstFocus.Nome.focus()
return }
if (Mes < 1 || Mes > 12)
{ alert ("O Ms informado no vlido, informe corretamente")
document.TstFocus.Mes.focus()
document.TstFocus.Mes.select()
return }
if (Ano == AnoAtual && Mes > MesAtual)
{ alert ("O perodo informado superior a data atual")
document.TstFocus.Mes.focus()
document.TstFocus.Mes.select()
return }
if (Ano < 1996 || Ano > AnoAtual)
{ alert ("O Ano informado no vlido, informe corretamente")
document.TstFocus.Ano.focus()
document.TstFocus.Ano.select()
return }
WebMasters - JavaScript
DadosOk = true
}
</script>
<form name="TstFocus" method="POST">
<p>
Informe o seu Nome <input type=text size=30 maxlength=30 name="Nome">
</p>
<p> Informe o ms desejado <input type=text size=2 maxlength=2 name="Mes">
</p>
<p> Informe o ano desejado <input type=text size=4 maxlength=4 name="Ano" >
</p>
<p> <input type=button name="Testa" value="Testar Validade"
onclick="Criticar()
if (DadosOk)
{alert ('Todos os Dados esto Corretos') } ">
</p>
</form>
</body>
ndice
WebMasters - JavaScript
WebMasters - JavaScript
mm = Hr.getMonth() + 1
aa = Hr.getYear()
hh = Hr.getHours()
min = Hr.getMinutes()
seg = Hr.getSeconds()
DataAtual = ((dd < 10) ? "0" + dd + "/" : dd + "/")
DataAtual += ((mm < 10) ? "0" + mm + "/" + aa : mm + "/" + aa)
HoraAtual = ((hh < 10) ? "0" + hh + ":" : hh + ":")
HoraAtual += ((min < 10) ? "0" + min + ":" : min + ":")
HoraAtual += ((seg < 10) ? "0" + seg : seg)
document.DataHora.Data.value=DataAtual
document.DataHora.Hora.value=HoraAtual
}
//
function CriaArray (n) {
this.length = n }
//
NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
WebMasters - JavaScript
NomeDia[2] = "Tera"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sbado"
//
NomeMes = new CriaArray(12)
NomeMes[0] = "Janeiro"
NomeMes[1] = "Fevereiro"
NomeMes[2] = "Maro"
NomeMes[3] = "Abril"
NomeMes[4] = "Maio"
NomeMes[5] = "Junho"
NomeMes[6] = "Julho"
NomeMes[7] = "Agosto"
NomeMes[8] = "Setembro"
NomeMes[9] = "Outubro"
NomeMes[10] = "Novembro"
NomeMes[11] = "Dezembro"
//
WebMasters - JavaScript
WebMasters - JavaScript
importante no confundir esta forma de abrir janelas com a diviso da tela em vrias partes, ou mesmo
com a chamada de outras pginas. Para que no existam dvidas, explicaremos um pouco sobre estes
dois outros mtodos.
A diviso de uma tela em vrias janelas contendo documentos diferentes feita atravs do objeto
FRAME do Html. Neste caso, a tela inteira considerada como um FrameSet e cada parte em que ela
for dividida considerada como um Frame. Cada Frame definido dentro do FrameSet atravs da
especificao dos parmetros: % da tela na vertical (cols), % da tela na horizontal (rows) e nome de cada
frame. Uma vez criado o FrameSet poderemos abrir documentos distintos em cada Frame. Para fazer
isto, acrescente ao link do documento a diretiva target=nome do frame.
Ex.
<href="Eventos.htm" target="Principal">
Isto far com que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal
A simples chamade de outras telas (documentos) feita atravs do link para o documento desejado.
Ex.
<href="Eventos.htm" >
Isto far com que o arquivo html Eventos.htm seja aberto em substituio a tela existente.
Bem, voltemos ao nosso caso que a abertura de janelas sobre um documento. Isto feito atravs de
comandos JavaScript, que permitem: Abrir uma janela, Abrir um documento dentro desta janela,
Escrever o contedo da janela, Fechar a janela e Fechar o documento.
Abrindo a Janela
A sintaxe geral deste mtodo a seguinte:
Variavel = window.open ("Url", "Nome da janela", "Opes")
Onde:
Variavel - Nome que ser atribuido como propriedade da janela.
Url - Endereo Internet onde a janela ser aberta. Normalmente voce estar utilizando a sua
WebMasters - JavaScript
WebMasters - JavaScript
document.
No exemplo abaixo estamos, inicialmente, identificando a verso do browse.Caso seja antiga, para no
escrevermos todo o caminho a cada chamada e ainda, considerando que os arquivos chamados esto no
mesmo diretrio da pgina atual, estamos obtendo o Path do arquivo atual e eliminando o nome do
arquivo que est na ltima referencia do Path. Quando fizermos a chamada das imagens (comando src)
s ser necessrio a concatenao do nome do arquivo chamado com a raiz do path que, no exemplo,
armazenamos na varivel de nome Local.
file:///I|/INFO/09Setembro/26_WebDev_2/Apostilas/js/o%20que%20e%20JavaScript.htm (41 de 44)20/9/2007 08:05:16
WebMasters - JavaScript
<script>
function Abrejanela(Opcao) {
Versao = navigator.appVersion
Versao = Versao.substring(0, 1)
Local = ""
if (Versao < 3) {
Local = document.location
UltLoc = Local.lastIndexOf("/")
Local = Local.substring(0, UltLoc + 1)
}
//
NovaJanela = window.open ("", "OutraJanela", "width=300,height=400")
open()
NovaJanela.document.
NovaJanela.document.
if (Opcao == 1)
{ NovaJanela.document.write ("<br>Logomarca Elogica<hr><br>")
NovaJanela.document.write
("<img width=200 height=200 src=" + Local + "Marcaelo.gif>") }
else
WebMasters - JavaScript
WebMasters - JavaScript
else
{Abrejanela(Form1.Opcao[1].value) } ">
</p>
</form>
</body>