Escolar Documentos
Profissional Documentos
Cultura Documentos
Java Script
Java Script
Introduo
Operadores lgicos
Operadores matemticos
Controles especiais
Controles condicionais
Eventos
Criando variveis
Escrevendo no documento
Mensagens
Criando funes
Funes intrinsecas
Criando novas instncias
Manipulando arrays (matrzes)
Manipulando strings
Manipulando datas
Interagindo com o usurio
Usando Time e Date
Abrindo novas janelas
INTRODUO
JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HiperText
Mark-up 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
www.nossositenaweb.cjb.net
Um contador pode ser simplificado utilizando-se : X++ ou X-- o que equivale as expresses:
X = X + 1 ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo ou positivo para negativo. ndice
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 '.
Ex. alert ("Cuidado com o uso de \" ou \' em uma string") ndice
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] )
{ 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
www.nossositenaweb.cjb.net
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.
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
document.write ("<br>Minha primeira linha")
document.write ("<br>Nesta linha aparecer o resultado de : " + (10 * 10 + valor) )
</script> ndice
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")
www.nossositenaweb.cjb.net
Ocupao = Atividade[1]
DiaSemana passaria a conter Quinta e Ocupao conteria Programador.
Outra forma de se trabalhar com arrays criar novas instncias dentro do prprio objeto do
array, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito da
seguinte forma:
function Empresas (Emp, Nfunc, Prod) {
this.Emp = Emp
this.Nfunc = Nfunc
this.Prod = Prod }
TabEmp = new Empresas(3)
TabEmp[1] = new Empresas("Elogica", "120", "Servios")
TabEmp[2] = new Empresas("Pitaco", "35", "Software")
TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")
Assim, poderemos obter a atividade da empresa nmero 3, cuja resposta seria Conectividade, da
seguinte forma:
Atividade = TabEmp[3].Prod
Obs:
importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadores
podem ser referncias ao contedo de variveis. ndice
MANIPULANDO STRING's
O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total
flexibilidade em seu manuseio.
Abaixo apresentamos os mtodos disponveis para manuseio de strings.
string.length - retorna o tamanho da string (quantidade de bytes)
string.charAt(posio) - retorna o caracter da posio especificada (inicia em 0)
string.indexOf("string") - retorna o nmero da posio onde comea a primeira "string"
string.lastindexOf("string") - retorna o nmero da posio onde comea a ltima "string"
string.substring(index1, index2) - retorna o contedo da string que corresponde ao intervalo
especificado. Comeando no caracter posicionado em index1 e terminando no caracter
imediatamente anterior ao valor especificado em index2.
Ex.
Todo = "Elogica"
Parte = Todo.substring(1, 4)
(A varivel Parte receber a palavra log)
string.toUpperCase() - Transforma o contedo da string para maisculo (Caixa Alta)
string.toLowerCase() - Transforma o contedo da string para minsculo (Caixa Baixa)
escape ("string") - retorna o valor ASCII da string (vem precedido de %)
unscape("string") - retorna o caracter a partir de um valor ASCII (precedido de %) ndice
MANIPULANDO DATAS
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
www.nossositenaweb.cjb.net
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++)
{ 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
INTERAGINDO COM O USURIO
A interao com o usurio se d atravs de objetos para entrada de dados (textos), marcao de
opes (radio, checkbox e combo), botes e link's para outras pginas.
Conceitualmente, os objetos so divididos em: Input, Textarea e Select.
O objeto Input divide-se (propriedade Type) em:
Password Text Hidden Checkbox Radio Button Reset Submit
A construo destes objetos feita pela linguagem HTML (HiperText Mark-up Language).
Portanto, aconselhvel que sejam criados utilizando-se ferramentas de gerao de pginas
HTML, como o HotDog ou, mais recomendado, FrontPage.
10
11
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()
document.TCheck.Opt1.checked = false
}
function AltMinusc () {
document.TCheck.Muda.value = document.TCheck.Muda.value.toLowerCase()
document.TCheck.Opt2.checked = false
}
</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 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.
12
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> <input type=radio name="Rad" value="1"
onclick="document.bgColor='green'"> Fundo Verde
<input type=radio name="Rad" value="2"
onclick="document.bgColor='blueviolet'"> Fundo Violeta
<input type=radio name="Rad" value="3"
onclick="document.bgColor='#FFFF00'"> Fundo Amarelo
</p>
Objeto Input BUTTON
Este objeto tem por finalidade criar um boto ao qual se possa atrelar operaes lgicas, a serem
executadas quando o mesmo receber um click.
Suas propriedades so: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecer sobre o boto
O nico evento associado a este objeto onclick.
Ex.
<p>
<form method="POST" name="TstButton">
Digite um Texto <input type=text size=30 maxlength=30 name="Teste" value="">
</p><p>
Click no Botao <input type=button name="Bteste" value="Botao de teste"
onclick="alert ('Voce digitou: ' + TstButton.Teste.value)">
</p>
</form>
Objeto Input RESET
Este objeto um boto que tem por finalidade, nica, limpar os campos digitados pelo usurio,
restaurando o contedo do formulrio para os valores iniciais.
recomendvel a utilizao deste objeto, para facilitar o usurio a limpar suas informaes, uma
vez que a utilizao da opo "reload" do "browser" (que seria uma forma) no perde as
infromaes digitadas.
Suas propriedades so: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecer sobre o boto
www.nossositenaweb.cjb.net
13
15
<script>
DdosOk = true
function Criticar() {
DadosOk = false
DataAtual = new Date()
MesAtual = DataAtual.getMonth() + 1
AnoAtual = DataAtual.getYear() + 1900
Nome = document.TstFocus.Nome.value
Mes = parseInt(document.TstFocus.Mes.value)
Ano = parseInt (document.TstFocus.Ano.value)
//
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 }
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>
www.nossositenaweb.cjb.net
17
</form>
</body> ndice
USANDO TIMER e DATE
um mtodo que permite a programao para que uma determinada ao s ocorra aps o
transcurso de um determinado tempo.
Varivel = setTimeout ("ao", tempo)
Onde:
Varivel uma varivel apenas para controle do timer
ao a ao que se quer realizar.
tempo o tempo de espera para que a ao ocorra, em milisegundos.
Obs:
importante observar que a ao s ocorrer uma vez. Para que a ao volte a ocorrer, ser
necessrio repetir o comando dentro da ao, obtendo-se, assim, um LOOP.
Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte mtodo:
clearTimeout (Varivel)
Onde:
Varivel o nome da varivel de controle do timer.
Abaixo encontra-se um exemplo de um formulrio que apresenta a data e hora atual, atualizando
os dados a cada um segundo, tendo dois botes de rdio que tem a funo de ativar e desativar a
atualizao dos dados. Apresenta tambm, fora do formulrio, a data contendo dia e ms por
extenso.
<script>
function Hoje() {
ContrRelogio = setTimeout ("Hoje()", 1000)
Hr = new Date()
dd = Hr.getDate()
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)
18
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
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"
//
Data1 = new Date()
dia = Data1.getDate()
dias = Data1.getDay()
mes = Data1.getMonth()
ano = Data1.getYear()
document.write ("Recife, " + NomeDia[dias] + " " + dia + " de " +
NomeMes[mes] + " de " + (ano + 1900 ) )
</script>
<form name="DataHora">
Data : <input type=text size=10 maxlength=10 name="Data">
Hora : <input type=text size=10 maxlength=10 name="Hora">
<input type=radio name="Botao" value="Para Relogio" checked
onclick="clearTimeout(ContrRelogio)">Desativa
<input type=radio name="Botao" value="Ativa Relogio"
onclick="ContrRelogio = setTimeout('Hoje()', 1000)">Ativa
</form> ndice
ABRINDO NOVAS JANELAS
Neste captulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo o
documento principal.
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.
www.nossositenaweb.cjb.net
19
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
prpria Url, neste caso, preencha com "".
Nome da Janela - o nome que aparecer no top da janela (Ttulo)
Opes - So as opes que definem as caractersticas da janela, quais sejam:
toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.
location - Abre a barra de location do browse
directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.
status - Abre uma barra de status no rodap da janela
scrollbars - Abre barras de rolamento vertical e horizontal
menubar - Cria uma barra de menu tipo "File", "Edit", etc.
resizable - Permite ao usurio redimencionar a janela
width - Especifica a largura da janela, em pixels
height - Especifica a altura da janela, em pixels
Todas as opes (exceto width e height) so boleanas e podem ser setadas de duas formas.
Exemplo: "toolbar" ou "toolbar=1") so a mesma coisa. Se nada for especificado, entende-se que
todas as opes esto ligadas; Caso seja especificada qualquer opo, ser entendido que esto
ligadas apenas as opes informadas.
As opes devem ser informadas separadas por vrgula, sem espao entre elas.
Abrindo um Documento
Para abrir um documento dentro da janela, deve ser utilizado o seguinte mtodo:
Variavel.document.open()
Onde "Variavel" o nome da varivel associada ao mtodo window.open
Escrevendo no Documento
20
21
22