Escolar Documentos
Profissional Documentos
Cultura Documentos
BELO HORIZONTE
2006
UTILIZAO DE COMENTRIOS............................................................ 31
VAR .................................................................................................. 32
DESENVOLVIMENTO DE SCRIPTS........................................................33
DESENVOLVENDO SCRIPTS COM O TAG <SCRIPT> ................................ 33
DESENVOLVENDO SCRIPTS ATRAVS DE UM ARQUIVO EXTERNO............. 34
NOTIFICAO DE ERROS ....................................................................36
INSTRUES BSICAS .......................................................................38
MTODO DOCUMENT.WRITE().............................................................. 38
MTODO ALERT() ............................................................................... 39
MTODO CONFIRM() ........................................................................... 39
COMANDOS CONDICIONAIS E REPETIO .........................................41
INSTRUO WHILE ............................................................................. 41
INSTRUO FOR ................................................................................ 42
INSTRUO FOR...IN .......................................................................... 43
IF ... ELSE ......................................................................................... 44
RETURN............................................................................................. 47
SWITCH ............................................................................................ 48
INSTRUO WITH .............................................................................. 49
OBJETO ARGUMENTS .......................................................................... 54
UTILIZANDO EVENTOS .......................................................................56
EVENTO ONBLUR ................................................................................ 56
EVENTO ONCHANGE ........................................................................... 57
EVENTO ONCLICK............................................................................... 57
EVENTO ONFOCUS.............................................................................. 57
EVENTO ONLOAD................................................................................ 58
EVENTO ONUNLOAD ........................................................................... 58
EVENTO ONMOUSEOVER ..................................................................... 58
EVENTO ONMOUSEOUT ....................................................................... 59
EVENTO ONMOUSEDOWN .................................................................... 60
EVENTO ONMOUSEUP ......................................................................... 60
EVENTO ONKEYPRESS......................................................................... 60
EVENTO ONKEYDOWN......................................................................... 60
EVENTO ONKEYUP .............................................................................. 60
EVENTO ONSELECT............................................................................. 61
EVENTO ONSUBMIT ............................................................................ 61
FUNES DA LINGUAGEM JAVASCRIPT ..............................................63
FUNO EVAL .................................................................................... 63
FUNO ISNAN .................................................................................. 64
FUNO PARSEFLOAT ......................................................................... 65
FUNO PARSEINT ............................................................................. 66
FUNES PR-PROGRAMADAS ...........................................................68
IMPRESSO DA PGINA ...................................................................... 68
ADICIONAR AO FAVORITOS ................................................................. 68
JANELA EM MOVIMENTO...................................................................... 69
TEXTO NA BARRA DE STATUS EM MOVIMENTO ...................................... 70
TABELA DE CORES.............................................................................. 72
TEXTO EM MOVIMENTO EM UM CAMPO DE FORMULRIO ......................... 73
OBJETOS PR-CONSTRUDOS .............................................................76
OBJETO DATE .................................................................................... 76
MTODOS DO OBJETO DATE ................................................................ 77
OBJETO STRING .................................................................................78
PROPRIEDADES .................................................................................. 78
PROPRIEDADES DO OBJETO STRING..................................................... 78
MTODOS DO OBJETO STRING............................................................. 78
MTODO ANCHOR............................................................................... 79
MTODO BIG ..................................................................................... 79
MTODO SMALL ................................................................................. 80
MTODO BOLD ................................................................................... 80
MTODO ITALICS ............................................................................... 81
MTODO FIXED .................................................................................. 81
MTODO STRIKE ................................................................................ 82
MTODO FONTCOLOR ......................................................................... 82
CEIL................................................................................................ 113
COS ................................................................................................ 114
EXP................................................................................................. 114
FLOOR............................................................................................. 114
LOG ................................................................................................ 115
MAX ................................................................................................ 115
POW (base,expoente) ....................................................................... 116
RANDOM ......................................................................................... 116
ROUND............................................................................................ 117
SIN ................................................................................................. 118
SQRT .............................................................................................. 118
TAN ................................................................................................ 118
OBJETO DATE .................................................................................. 119
MTODOS GET DO OBJETO DATE ....................................................... 119
MTODO PARSE E UTC ...................................................................... 121
MTODOS SET DO OBJETO DATE........................................................ 122
MTODO TOGMTSCRING ................................................................... 123
MTODO TOLOCALESTRING ............................................................... 123
EXERCCIOS .................................................................................... 126
OBJETO DOCUMENT .......................................................................... 128
PROPRIEDADES DO OBJETO DOCUMENT ............................................. 128
MTODOS DO OBJETO DOCUMENT ..................................................... 132
MTODO CLEAR................................................................................ 132
MTODO CLOSE ............................................................................... 133
MTODO WRITE E WRITELN............................................................... 134
EXERCCIOS .................................................................................... 136
OBJETO LINK .................................................................................... 148
PROPRIEDADES DO OBJETO LINKS ..................................................... 148
UTILIZANDO ARRAYS ....................................................................... 149
ARRAY ANCHORS[] ........................................................................... 153
ARRAY ELEMENTS[] .......................................................................... 154
linguagem
Java,
por
esta
razo,
semelhana
dos
nomes
JavaScript.
JAVA E JAVASCRIPT
Mesmo sendo uma extenso da linguagem HTML, o JavaScript uma
linguagem baseada na linguagem Java. Com isto, o JavaScript suporta a maior
parte das sintaxes e comandos da linguagem Java.
A linguagem Java usada na criao de objetos e os chamados Applets
(aplicativos que so executados em uma pgina da Internet). J a linguagem
JavaScript, usada normalmente pelos programadores que fazem uso da
VBSCRIPT E JAVASCRIPT
Para no ficar com uma tecnologia terceirizada, a MICROSOFT desenvolveu
uma linguagem de scripts similar ao JavaScript denominada VBScript. Uma
extenso da conhecida linguagem Visual Basic. A NETSCAPE por sua vez, no
implementou esta linguagem em seu Browser, impedindo-o qualquer script que
seja desenvolvido na linguagem VBScript de ser executado em seu Browser.
AS VERSES DO JAVASCRIPT
Atualmente a verso utilizada do JavaScript a 1.5 que suportada pelo
Netscape 6.0 e Internet Explorer 5.5, que contm todos os comandos da
linguagem JavaScript.
Verso do JAVASCRIPT:
SUPORTADA PELO:
1.0
1.1
1.2
1.3
1.4
Internet Explorer 5
1.5
um
determinado
determinado
browser,
comando
facilitando
do
JavaScript
ainda
mais
seja
que
suas
executado
pginas
em
sejam
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
MANIPULAO DE OBJETO
A linguagem JavaScript manipula vrios tipos de objetos atravs do uso de
suas propriedades e mtodos. Estes objetos so representados por uma
hierarquia, fazendo com que alguns objetos se tornem propriedades de outros,
observe pelo exemplo da figura a seguir esta hierarquia formada:
Window/
Math
Date
Frame
String
Navigator
Document
Link
Select
Form
Button
Text
Submit
TextArea
Anchor
Radio
Checkbox
sendo
este
objeto
tambm
uma
propriedade
do
objeto
PROPRIEDADES DE OBJETOS
Cada objeto existente na manipulao do JavaScript possuem propriedades
(caractersticas). Exemplo, sabemos que um documento HTML possuem ttulo
e corpo, estas caractersticas do documento podemos chamar de propriedades
que existem neste documento.
Estas
propriedades
existem
de
dois
tipos,
algumas
so
os
objetos
mostrado
no
organograma
apresentado
anteriormente.
nomeObjeto.propriedade
MTODOS DE OBJETOS
Alm das propriedades, os objetos podem conter mtodos que so funes
pr-definidas pela linguagem JavaScript que iro executar determinada
operao. Por exemplo dentro de um documento o usurio poder utilizar o
mtodo de escrever neste documento para exibir um texto qualquer. Os
mtodos estaro sempre associados algum objeto presente no documento e
cada mtodo faz parte de um objeto especfico. No tente usar mtodos em
objetos que no o utilizam, isto faz com que a linguagem JavaScript cause erro
na execuo do script. Na maioria das vezes os mtodos so usados para
nomeObjeto.mtodo(argumento)
EVENTOS
Em linguagens orientadas a objetos comum a manipulao de eventos que
qualquer
reao
ou
ao
que
executar
determinado
procedimento,
normalmente ocorre por ato executado pelo usurio, como clicar em um boto,
selecionar algum objeto e at mesmo pressionar alguma tecla. Resumindo
EVENTOS so quaisquer aes iniciadas por parte do usurio.
<TAG nomeEvento="JavaScript1;JavaScript2;JavaScript3">
EVENTO
MANIPULADOR
DESCRIO
Ocorre
blur
onBlur
quando
usurio
change
onChange
quando
usurio
click
onClick
focus
onFocus
load
onLoad
unload
onUnload
Ocorre
quando
usurio
quando
usurio
usurio
usurio
focaliza o objeto.
Ocorre
quando
carrega a pgina.
Ocorre
quando
abandona a pgina.
Ocorre quando o ponteiro
mouseOver
onMouseOver
ou
ncora.
Vlidos
onSelect
quando
usurio
seleciona um elemento de
um formulrio.
EVENTO
submit
mouseDown
MANIPULADOR
onSubmit
onMouseDown
DESCRIO
Ocorre
quando
usurio
envia um formulrio.
Ocorre quando o boto do
mouse pressionado.
Ocorre quando o ponteiro
mouseMove
onMouseMove
do
mouse
se
movimenta
sobre o objeto.
Ocorre quando o ponteiro
mouseOut
onMouseOut
do
mouse
objeto.
afasta
Vlidos
de
um
apenas
para hiperlinks.
mouseUp
onMouseUp
keyDown
onKeyDown
keyPress
onKeyPress
keyUp
onKeyUp
<HTML>
<HEAD>
<TITLE>Manipuladores de Eventos</TITLE>
</HEAD>
<BODY onLoad="defaultStatus=('Seja Bem Vindo!!!')">
Neste exemplo, o evento onUnLoad, faz com que se o usurio abandonar esta
pgina seja entrando em outra, acessando hiperlinks ou at mesmo fechando o
browser, execute a instruo alert() que tem a funo de exibir uma caixa
de dilogo do Windows com a mensagem definida, permitindo ao usurio,
pressionar o boto de OK para encerra-la.
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
ELEMENTOS DA LINGUAGEM
O JavaScript pode ser diferente em alguns aspectos de outras linguagens, mas
nem por isso no deixa de ser uma linguagem de programao, com isto veja
os elementos existentes dentro da linguagem.
VARIVEIS
Assim como as propriedades que armazenam dados sobre os objetos,
possvel com JavaScript a utilizao das variveis que tm a finalidade de
armazenar temporariamente informaes como textos, valores, datas, entre
outros.
nome=ADRIANO LIMA
idade=25
Soma=2002-25
tempo=Date()
NOMES DE VARIVEIS
O nome de uma varivel poder iniciar-se com uma letra ou atravs do
caractere underscore seguido de letras ou nmeros. Outra semelhana do
JavaScript com outras linguagens a diferenciao de de letras minsculas e
maisculas. Veja alguns nomes vlidos para variveis:
nome
_senac
escola
As variveis definidas fora de uma funo sempre esto disponveis para todas
as funes dentro do script que esto na mesma pgina. Estas variveis so
referenciadas como variveis globais. As variveis que so definidas dentro de
funo, tambm so globais, desde que no seja utilizado a instruo var em
sua declarao.
ou
var nome;
var endereco;
var telefone;
Outro
<HTML>
<HEAD>
<TITLE>CLCULOS</TITLE>
</HEAD>
<BODY>
<script>
valor=30
document.write("Resultado do clculo ",(10*2)+valor)
</script>
Neste exemplo foi definida a varivel valor que armazena o valor 30 em seu
contedo, em seguida, atravs do objeto document foi usado o mtodo write
que escrever no corpo da pgina o texto Resultado do clculo e em seguida
o resultado da expresso (10*2)+valor que resultar em 50.
Caso tenha que executar outro clculo abaixo do primeiro, utilize o tag HTML
<BR> aps o clculo, separando-o com vrgula e entre aspas. Veja o exemplo
abaixo:
lembre-se que estas instrues devero estar entre as tags HTML <SCRIPT>
e </SCRIPT>. No caso de querer utilizar alguma instruo HTML, atribua-as
entre aspas como propriedade do mtodo conforme exemplo mostrado
anteriormente.
LITERAIS
So representaes de nmeros ou strings, estas informaes so fixas, bem
diferente das variveis, no podem ser alteradas. As variveis so criadas na
execuo do programa, j os literais fazem parte do cdigo-fonte. Veja abaixo
alguns exemplos de literais:
52
Nmero inteiro.
2.1518
Texto.
INTEIROS (INTEGER)
Representam nmeros positivos, negativos ou fracionrios. Exemplo:
A=500
B=0.52
C=-32
PONTO FLUTUANTE
Este literal tambm chamado de notao cientfica representado da seguinte
maneira:
2.34e4
O nmero 2.34 multiplicado por dez quarta potncia, ou 2.34*10000.
BOOLEANOS
Este tipo de literal representa valores lgicos que podem ser:
TRUE ou 1
FALSE ou 0
LITERAIS STRING
Este literal representa qualquer cadeia de caracteres envolvida por aspas ou
apstrofo. Veja abaixo alguns exemplos:
Adriano Lima
CFP-INFORMTICA
500
Mesmo sendo nmero, as aspas fazem com que o literal seja uma string.
CARACTERES ESPECIAIS
Estes caracteres so especificados dentro de uma string. Veja na tabela abaixo
estes caracteres e sua descrio:
Caractere
Descrio
\n
\t
\r
Insere um retorno.
\f
\t
Tabulao.
Apstrofo.
Aspas.
\\
Barra Invertida.
Caractere
\XXX
representado
pela
EXPRESSES
Uma expresso normalmente uma combinao de variveis, literais,
mtodos, funes e operadores que retornam um valor qualquer. Usada para
atribuir valores em variveis ou at mesmo para test-la e atribuir uma ao
especfica com base do seu resultado. Veja o exemplo da criao de uma
varivel numrica:
numero=5
numero2=5*2
If numero+numero2 > 10
OPERADORES
X=50
X=30*5/2
X=Y
x += y
x -= y
x *= y
x /= y
x %=y
x = x + y
x = x y
x = x * y
x = x / y
x = x % y
ARITMTICOS
Operador
Descrio
Adio
Subtrao
Multiplicao
Diviso
Mdulo
varivel++ ou ++varivel
varivel-- ou --variavel
x = 10
A = x++
x = 10
A = ++x
______________________________________________________
______________________________________________________
OPERADORES RELACIONAIS
Estes operadores comparam o contedo dos operandos e retornam um valor
booleano TRUE ou FALSE, baseado no resultado da comparao. Veja a
relao destes operadores.
Operador
Descrio
>
Maior que
<
Menor que
>=
Maior ou igual
<=
Menor ou igual
Atribuio
==
Igualdade
===
!=
Diferente
OPERADORES LGICOS
Para estes operadores, so exigidos valores booleanos, como operandos, e
ser retornado um valor lgico.
Operador
Descrio
&& ou AND
|| ou OR
OU
! ou NOT
NO
operador
||
retorna
TRUE
se
uma
das
expresses
forem
A = ADRIANO
B = LIMA
C=A+B
D=Senac+Minas
DECLARAES
Vejamos agora uma relao das declaraes existentes na
linguagem
OPERADOR NEW
Este operador ir permitir que o usurio crie uma nova instncia de um objeto
definido. Veja sua sintaxe:
NomeObjeto=new Tipo(parmetros)
PALAVRA-CHAVE THIS
Esta palavra-chave utilizado para fazer referncia ao objeto corrente. Veja
sua sintaxe:
this.propriedade
BREAK
Esta instruo desvia o JavaScript de uma estrutura controlada e continua sua
execuo na primeira linha aps o bloco da instruo onde foi encontrado. Esta
instruo pode ser utilizada em estruturas baseadas nas seguintes intrues:
for
for...in
while
UTILIZAO DE COMENTRIOS
Assim
como
qualquer
outra
linguagem
de
programao,
linguagem
seu desenvolvimento
ou explicar
determinada
<!--Inicio do JavaScript
Instrues
//Trmino do JavaScript -->
VAR
A palavra-chave var declara o nome de uma varivel e caso queira o usurio
poder atribuir um valor mesma. O contedo da varivel poder ser
visualizado por uma funo ou por outras variveis, declaradas fora da funo
na qual foi criada. Veja alguns exemplos:
var nome
var endereo=R. Tupinambs 1038
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
DESENVOLVIMENTO DE SCRIPTS
As instrues da linguagem JavaScript podem ser escritas em qualquer editor
ASCII, como por exemplo, o Bloco de Notas do Windows e at mesmo o Edit
do MS-DOS, sendo que seu arquivo dever ser salvo com a extenso HTML ou
.JS. Para visualizar a execuo deste script, basta acess-lo atravs do
browser.
os
delimite
atravs
do
Tag
<SCRIPT>
ou
utilize-os
como
<SCRIPT>
instrues do JavaScript...
</SCRIPT>
<SCRIPT LANGUAGE=JAVASCRIPT>
instrues do JavaScript...
</SCRIPT>
<SCRIPT LANGUAGE=JAVASCRIPT1.3>
instrues do JavaScript...
</SCRIPT>
Para isto, o usurio dever criar o cdigo em qualquer editor ASCII da mesma
forma que se cria uma pgina HTML, e ao salv-lo, o usurio dever atribuir ao
seu nome a extenso .JS.
Neste arquivo o usurio no precisar utilizar o Tag HTML para delimitar suas
instrues.
NOTIFICAO DE ERROS
Alm dos comentrios, que iro evitar que os navegadores mais antigos
exibam
algum
cdigo
JavaScript
que
no
reconhecido,
durante
Feito isto, qualquer erro existente em seu programa ser notificado pelo
browser de acordo com a figura abaixo:
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
INSTRUES BSICAS
Neste ponto do treinamento o usurio ir conhecer algumas instrues que
iro facilitar o entendimento e a construo de um programa em JavaScript.
Sero apresentados comandos que permitiro a manipulao e insero de
objetos em documento HTML.
MTODO DOCUMENT.WRITE()
Esta instruo na realidade segue a sintaxe de ponto da linguagem JavaScript,
uma das maneiras de seguir a hierarquia dos objetos presentes na linguagem.
Nesta linha de comando temos o mtodo write() que pertencente ao objeto
document que retrata o documento como um todo. Vejamos um exemplo de
sua utilizao atravs do cdigo apresentado a seguir:
MTODO ALERT()
A finalidade deste mtodo emitir uma caixa de dilogo do windows conforme
mostrado no exemplo passado com uma mensagem e um boto de OK. Este
mtodo pertencente ao objeto window do JavaScript, porm seu uso com a
sintaxe de ponto opcional, assim sendo observe a sintaxe de seu
funcionamento e o exemplo da prxima figura:
ou
MTODO CONFIRM()
Uma outra alternativa alm do mtodo alert() est no mtodo confirm() que
exibe uma caixa de dilogo e os botes de OK e CANCELAR. Caso seja
pressionado o boto OK, o mtodo retornar o valor booleano TRUE e
pressionado o boto CANCELAR, retornado o valor FALSE.
Com isto, o usurio poder determinar uma tomada de deciso dentro de seu
script. Assim como o mtodo alert(), o mtodo confirm pertencente ao
objeto window, sendo seu uso opcional, observe sua sintaxe abaixo e veja o
exemplo da caixa de dilogo presente na figura a seguir:
window.confirm("Tem Certeza??");
ou
confirm("Tem Certeza??");
while (expresso) {
comandos
}
Veja no exemplo seguinte a utilizao do lao while que repetido por total
de 10 vezes:
num=0;
while(num<10){
document.write("Nmero: "+num+"<br>");
num++;
}
Neste exemplo, foi definido a varivel num com o valor zero, em seguida este
valor comparado na condio while que num<10, que caso seja
verdadeira a varivel num incrementada com mais 1 e exibido na tela,
quando ele atinge o valor limite que 10, o cdigo desviado para a primeira
condio aps o lao. Veja agora um exemplo prtico de sua utilizao:
<script>
function condicao(){
while(form1.nome.value==""){
alert("Favor Preencher o campo");
form1.nome.value=prompt("Digite seu nome agora","");
}
alert("Obrigado, "+form1.nome.value);
}
</script>
<pre>
<form name="form1">
Nome:
<input type="text" name="nome" onBlur="condicao(this.value)">
</script>
INSTRUO FOR
A instruo for realiza uma ao at que determinada condio seja satisfeita.
Sua sintaxe bsica :
for (incio;condio;incremento) {
comandos
}
<script>
for (i=1 ; i<=10 ; i++){
document.write("nmero: "+ i +"<br>");
}
</script>
<script>
for (i=1 ; i<=10 ; i=i+2){
document.write("iterao: "+i+"<br>");
}
</script>
INSTRUO FOR...IN
Podemos dizer que o lao for...in uma verso especial da instruo for, que
usada para saber os nomes de propriedades e contedos das propriedades
de objetos no JavaScript. Esta instruo muito usada na depurao de
cdigos. Por exemplo, caso uma parte do cdigo JavaScript no esteja
funcionando corretamente e existe uma suspeita de que existe uma falha do
objeto
JavaScript,
usurio
poder
usar
for...in
para
examinar
as
Neste lao, foi criado uma varivel chamada teste que foi atribudo o contedo
do objeto document. Dentro do lao foi executado a instruo alert que exibe
o contedo da varivel teste.
IF ... ELSE
Realiza determinada ao de acordo com uma condio. Sua sintaxe bsica :
if (condio) {
comandos
} else {
comandos
}
Caso haja mais de uma condio a ser avaliada pode-se fazer o uso da
instruo ELSE IF. Observe sua sintaxe:
if (condio) {
comandos
} else if (condio2) {
comandos
} else {
comandos
}
<script>
function condicao(){
if(form1.nome.value==""){
alert("Favor Preencher o campo");
return form1.nome.focus();
}
}
</script>
<pre>
<form name="form1">
Nome:
<input type="text" name="nome" onBlur="condicao(this.value)">
Neste exemplo foi criada uma funo que testar o contedo da varivel
nome, que ocorrer assim que o usurio retirar o foco do campo, caso o valor
da varivel esteja vazio, ser exibida uma mensagem de alerta informando
para o preenchimento e em seguida o foco ser retornado para o campo
nome. Em caso contrrio, o script continuar seu processamento normal at o
fim. Criaremos agora uma condio alternativa para quando o campo no
estiver vazio, observe:
<script>
function condicao(){
if(form1.nome.value==""){
alert("Favor Preencher o campo");
return form1.nome.focus();
}else{
alert("Obrigado, "+form1.nome.value);
return form1.nome.select();
}
}
</script>
<pre>
<form name="form1">
Nome:
<input type="text" name="nome" onBlur="condicao(this.value)">
J neste exemplo, foi definido a instruo else que determinar o que deve
ocorrer caso a condio seja falsa. No exemplo anterior, caso o campo no
esteja vazio ser exibida outra mensagem de alerta em em seguida foi definido
que como retorno o texto do campo ser selecionado.
RETURN
Esta instruo tem como finalidade marcar o final de uma funo. A linguagem
JavaScript ao encontrar esta instruo ele ir retornar para o ponto
imediatamente aps a chamada da funo. Ela ainda pode ser definida com um
valor de retorno ou no.
Quando um valor includo com esta instruo, a funo ir retornar este valor
definido pela instruo. Quando um valor no incldo com a instruo return,
ento a funo retorna um valor nulo.
Por padro, esta instruo jamais usada fora de uma funo. Quando isto
acontece, a linguagem ir retornar um erro quando a mesma estiver definida
fora de uma funo. Os parnteses apresentados no exemplo abaixo no so
obrigatrios.
Vejamos alguns exemplos de scripts usando a instruo return.
<script>
<!-function teste(){
var valor=5;
if (valor>=5){
return (true);
} else {
return (false);
}
}
-->
</script>
SWITCH
Esta instruo bem semelhante com uma estrutura IF, porm mais
eficiente em razo de ser mais simples sua utilizao e seu entendimento. Veja
a sintaxe utilizada para o uso de instrues SWITCH:
switch (expresso){
case CONSTANTE:
comandos;
break;
case CONSTANTE2:
comandos;
break;
case default:
comandos;
break;
}
INSTRUO WITH
Esta instruo faz com que um objeto se torne default para uma srie de
opes existentes. Normalmente esta instruo utilizada com o objeto Math,
uma vez que ele exige que o usurio especifique o nome do objeto quando
acessar qualquer uma de suas propriedades. Veja sua sintaxe:
with (objeto){
instrues
}
Vejamos alguns exemplos de sua utilizao:
<script>
alert(Math.PI);
alert(Math.round(1234.5678));
</script>
<script>
with (Math){
alert(PI);
alert(round(1234.5678));
}
</script>
FUNES
Funes em JavaScript nada mais so que uma rotina JavaScript que possui
um conjunto de instrues serem executadas. Sua sintaxe compem-se dos
seguintes parmetros:
function nomeFuno(argumentos) {
Comandos
}
function primeiraFuncao(){
alert("Isto uma funo JavaScript");
}
Com isto, o usurio apenas definiu a funo, para que ela seja executada,
necessrio fazer a sua chamada. Para chamar a funo basta incluir seu nome
no local do cdigo que deseja que ela seja executada. No exemplo a seguir,
note que aps a funo foi feita sua chamada, bastando para tanto redigir seu
nome, observe:
function primeiraFuncao(){
alert("Isto uma funo JavaScript");
}
primeiraFuncao();
Uma funo pode ser chamada de diversas formas, dentro da rea do cdigo
JavaScript e at mesmo atravs de um evento dentro de um tag HTML, como
um boto de formulrio ou hiperlink. Veja um exemplo de uso da chamada de
uma funo atravs da ao do usurio ao clicar em um boto de formulrio:
<HTML>
<HEAD>
<TITLE>UTILIZANDO FUNES</TITLE>
</HEAD>
<BODY>
<SCRIPT>
function primeiraFuncao(){
alert("Isto uma funo JavaScript");
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Clique aqui!" onClick="primeiraFuncao()">
</BODY>
</HTML>
O usurio poder atravs do uso de funes passar valores a mesma, com isto
a funo usar os valores no processamento. Vejamos no exemplo abaixo que
foi definido como argumento da funo exemplo a varivel texto, esta
varivel usada como o texto que ser exibido pela instruo alert. Ao
chamar a funo, basta o usurio definir o texto que deseja ser apresentado
como argumento da funo:
<script>
function exemplo(texto){
alert(texto);
}
exemplo("Curso de JavaScript");
</script>
<script>
var ret=prompt("digite o nome","");
var shor=mostranome(ret);
alert(shor);
function mostranome(nome){
if (nome=="" || nome==null)
return ("erro");
else
return (nome);
}
OBJETO ARGUMENTS
Normalmente as funes so declaradas para aceitar um determinado nmero
de parmetros, vejamos um exemplo que usa uma funo que declarada
para usar dois argumentos e usados para exibir os mesmos em uma
mensagem de alerta:
<script>
mensagem("SENAC","Minas Gerais");
function mensagem(mensagem1,mensagem2){
alert(mensagem1);
alert(mensagem2);
}
</script>
claro que se houvesse vrios argumentos serem exibidos, isto seria uma
maneira penosa de programar. Atravs da linguagem JavaScript, o usurio
poder fazer uso do objeto arguments que criado dentro de uma funo.
Este objeto um array que poder receber todos os argumentos necessrios
para passar a funo quando a mesma for chamada. Veja no exemplo a seguir
sua utilizao:
<script>
mensagem("SENAC","Minas Gerais");
mensagem("CFP","Informtica");
function mensagem(){
for (i=0;i<mensagem.arguments.length;i++){
alert(mensagem.arguments[i]);
}
}
</script>
UTILIZANDO EVENTOS
EVENTO ONBLUR
Com o evento onBlur o usurio ir controlar o contedo de um elemento em
um formulrio select, text ou textarea quando o mesmo remove o foco. Veja
pelo exemplo a seguir de uma caixa de texto exibir uma mensagem na tela
assim que o campo perde o foco:
<pre>
<form name="form1">
Digite seu Nome:
<input type="text" name="nome" onBlur="alert('Favor preencher')">
</form>
</pre>
Veja agora outro exemplo, criando uma funo para que caso o usurio deixe o
campo em branco, seja exibida a mensagem de alerta:
<script>
<!-function teste(){
if (form1.campo1.value==""){
alert("FAVOR PREENCHER");
}
}
-->
</script>
<pre>
<form name="form1">
Digite seu Nome:
EVENTO ONCHANGE
Com o evento onChange o usurio poder acionar alguma funo sempre que
for alterado o contedo dos objetos textarea, text ou select. Este evento
bem similar com o evento onBlur, porm ele verifica se o contedo do
elemento foi alterado. Vejamos um exemplo de sua utilizao:
EVENTO ONCLICK
O evento onClick utilizado em links, botes, radio, checkbox, reset. Vejamos
um exemplo de sua utilizao em um boto de formulrio:
EVENTO ONFOCUS
Com o manipulador onFocus o usurio poder criar uma ao sempre que os
elementos select, text ou textarea receberem o foco. Ao contrrio do evento
onBlur que executa aes sempre que o elemento perde o foco. Veja um
exemplo de sua utilizao:
type="text"
name="campo2"
onChange="alert('testando')"
EVENTO ONLOAD
Conforme exemplo mostrando anteriormente, com o evento onLoad executa
alguma ao assim que o documento carregado no browser. Este objeto
aplicado diretamente ao objeto window.
EVENTO ONUNLOAD
Com o evento onUnLoad o usurio pode determinar uma ao assim que o
usurio sai da pgina, seja por meio de um hiperlink ou at mesmo fechando o
navegador. Com base no exemplo anterior foi criado uma mensagem de alerta
assim que o usurio deixa a pgina:
EVENTO ONMOUSEOVER
<a href="http://www.mg.senac.br"
onMouseOver="defaultStatus='Olhe para a barra de
Status'">SENAC</A><BR>
Ser exibida uma mensagem na barra de status, assim que o mouse sair de
cima do link. Para evitar este problema, atribua para este evento a instruo
return true que executar o comando executado sem problemas. Veja pelo
exemplo a seguir:
<a href="http://www.mg.senac.br"
onMouseOver="defaultStatus='Olhe para a barra de Status';
return true">SENAC</A><BR>
Lembre-se que quando quiser executar duas aes para o mesmo evento,
basta separ-las com um ponto e vrgula.
EVENTO ONMOUSEOUT
Com este evento o usurio poder determinar uma ao assim que o mouse
sair de cima de um hiperlink. Pelo exemplo do evento onMouseMove o
usurio consegue atribuir uma mensagem na barra de status, porm a
mensagem permanece, utilizando o evento onMouseOut, o usurio poder
informar o que deve acontecer quando o ponteiro do mouse sair do objeto.
<a href="http://www.mg.senac.br"
onMouseOver="defaultStatus='Olhe para a barra de Status';
return true" onMouseOut=defaultStatus="">SENAC</A><BR>
EVENTO ONMOUSEDOWN
O evento onMouseDown ocorre sempre que pressionado o boto do mouse.
Veja pelo exemplo apresentado abaixo:
<a
href="http://www.mg.senac.br"
onMouseOver="defaultStatus='Olhe
EVENTO ONMOUSEUP
O evento onMouseUp ocorre sempre que o boto do mouse solto. Este
evento segue os mesmos padres do evento apresentado anteriormente.
EVENTO ONKEYPRESS
O evento onKeyPress ocorre sempre que uma tecla pressionada. Este
evento segue os mesmos padres do evento apresentado anteriormente.
EVENTO ONKEYDOWN
O evento onKeyDown ocorre sempre que uma tecla abaixada. Este evento
segue os mesmos padres do evento apresentado anteriormente.
EVENTO ONKEYUP
O evento onKeyUp ocorre sempre que uma tecla solta. Este evento segue os
mesmos padres do evento apresentado anteriormente.
EVENTO ONSELECT
O evento onSelect ocorre sempre quando o usurio seleciona um texto dos
elementos de formulrio text ou textarea.
<form name="form1">
Digite seu Nome:
<input type="text" name="campo1"
onSelect="alert('O usurio selecionou '+this.value)">
EVENTO ONSUBMIT
O evento onSubmit ocorre sempre que o usurio envia o formulrio. Com este
evento o usurio poder determinar ou no o envio do formulrio. Vejamos um
exemplo para sua utilizao:
Com este evento o usurio poder verificar a validao de dados, como por
exemplo se todos os campos do formulrio esto preenchidos.
function teste(){
if (form1.campo1.value==""){
alert("FAVOR PREENCHER");
return(false);
} else {
return(true);
}
}
-->
</script>
<pre>
<form name="form1" onSubmit="teste()">
Digite seu Nome:
<input type="text" name="campo1">
FUNO EVAL
Esta funo avalia uma expresso que poder ser em formato string, o que se
torna prtico quando o usurio deseja estabelecer expresses no momento em
que for preciso. Sua sintaxe formada da seguinte maneira:
eval(expresso);
<script>
valor=5
alert(eval("2*valor"));
</script>
FUNO ISNAN
A funo isNaN tem a finalidade de testar um nmero para determinar se
no se no um nmero. Normalmente esta funo usada para comparar
valores do tipo nmero ou string. Com o emprego desta funo o usurio
poder determinar se um valor contm realmente um valor numrico. Esta
funo pode ser utilizada em conjunto com as funes parseInt e parseFloat
em razo de retornarem a string NaN quando o contedo da varivel no um
nmero. Sua sintaxe tem a seguinte formao:
isNaN(valor);
No exemplo a seguir, foi criado um script bem simples que testa se o valor
digitado no campo de formulrio um nmero.
<script>
function condicao(valor){
if(isNaN(valor)){
alert("No um nmero!!!");
}
}
</script>
<form name="form1">
Nome:
<input type="text" name="nome" onBlur="condicao(this.value)">
FUNO PARSEFLOAT
Com a funo parseFloat, feita a converso de um objeto string, retornando
um valor de ponto flutuante. Com ela convertido uma string em um valor
numrico equivalente. Se a funo encontrar um caractere diferente de um
sinal (+ ou -), nmeros (0 9), ponto decimal ou expoente, ser retornado o
valor at aquele ponto e ignorado o restante. Caso o primeiro caractere no
puder ser convertido para um nmero, parseFloat ir retornar os valores 0
para a plataforma Windows e NaN para as outras plataformas. Sua sintaxe
tem a seguinte formao:
parseFloat(string);
<script>
valor=parseFloat("123,456");
alert(valor)+1;
</script>
FUNO PARSEINT
Com a funo parseInt, o usurio poder converter valores de string em
valores numricos equivalentes. possvel a converso de nmeros de bases
como hexadecimal ou octal em valores decimais. Caso a funo encontra um
caractere diferente de um sinal (+ ou -), nmeros (0 9), ponto decimal ou
expoente, ser retornado o valor at aquele ponto e ignorado o restante. Caso
o primeiro caractere no puder ser convertido para um nmero, a funo
parseInt ir retornar o valor 0 para Windows e NaN para outros sistemas. Sua
sintaxe tem a seguinte formao:
parseInt(string,radix);
valor=parseInt("ff",16);
valor=parseInt("0xff",16);
valor=parseInt("1111",2);
//Converso binrio,
retorna 15
valor=parseInt("765",8);
//Converso octal,
retorna 501
Binrio.
Octal.
10
Decimal.
16
Hexadecimal.
FUNES PRPR-PROGRAMADAS
As funes pr-programadas do JavaScript, permite ao usurio executar
operaes simples como configurar sua pgina como inicial, adicionar uma URL
ao favoritos, imprimir o documento, aumentar sua lgica de raciocnio
facilitando a criao de novos scripts, entre outras operaes. Vejamos alguns
exemplos.
IMPRESSO DA PGINA
ADICIONAR AO FAVORITOS
<script>
<!-var url="http://www.mg.senac.br"
var titulo="Portal Senac Minas"
function Favoritos(){
if (document.all)
window.external.AddFavorite(url,titulo)
}
// -->
</script>
<input type="button" value="Favoritos" onClick=Favoritos()>
JANELA EM MOVIMENTO
Outro Exemplo interessante a abertura de uma pgina que abre uma janela
em movimento. Veja o cdigo abaixo e faa um teste:
function expandingWindow(website) {
var heightspeed=2;//velocidade vertical (valor maior = mais lento)
var widthspeed=7;//velocidade horizontal(valor maior = mais lento)
var leftdist = 0; // distncia do canto esquerdo da janela
var topdist = 0; // distncia do canto superior da janela
if (document.all) {
var winwidth = window.screen.availWidth - leftdist;
var winheight = window.screen.availHeight - topdist;
var sizer = window.open("","","left=" + leftdist + ",top=" +
topdist + ",width=1,height=1,scrollbars=yes");
for (sizeheight = 1; sizeheight < winheight; sizeheight +=
heightspeed) {
sizer.resizeTo("1", sizeheight);
}
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
{
sizer.resizeTo(sizewidth, sizeheight);
}
sizer.location = website;
}
else
window.location = website;
}
// End -->
</script>
<a href="http://javascript.internet.com/"
onClick="expandingWindow('http://www.aglima.ezdir.net/');return
false;">Open JavaScriptSource.com!</a>
<html>
<head>
<script LANGUAGE="JavaScript">
<!
var speed = 10
var pause = 1500
var timerID = null
var bannerRunning = false
var ar = new Array()
ar[0] = "Adriano... "
ar[1] = "Gomes"
ar[2] = "Lima"
ar[3] = "Informtica:"
ar[4] = " cidade de Santos."
var message = 0
var state = ""
clearState()
function stopBanner() {
if (bannerRunning)
clearTimeout(timerID)
timerRunning = false
}
function startBanner() {
stopBanner()
showBanner()
}
function clearState() {
state = ""
for (var i = 0; i < ar[message].length; ++i) {
state += "0"
}
}
function showBanner() {
if (getString()) {
message++
if (ar.length <= message)
message = 0
clearState()
timerID = setTimeout("showBanner()", pause)
} else {
var str = ""
for (var j = 0; j < state.length; ++j) {
str += (state.charAt(j) == "1") ? ar[message].charAt(j) : " "
}
window.status = str
timerID = setTimeout("showBanner()", speed)
}
}
function getString() {
var full = true
for (var j = 0; j < state.length; ++j) {
if (state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = getRandom(ar[message].length)
if (state.charAt(num) == "0")
break
}
state = state.substring(0, num) + "1" + state.substring(num + 1,
state.length)
return false
}
function getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
// --></script>
</head>
<body onLoad=showBanner()>
TABELA DE CORES
<SCRIPT>
function geraTabela() {
document.write('<table border=1 width="100%">');
var valores = "00336699CCFF";
var r, g, b;
var cor;
for (r=0; r<6; r++) {
for (g=0; g<6; g++) {
if (g%2==0) document.write("<tr>");
for (b=0; b<6; b++) {
cor = valores.substr(2*r,2)
+ valores.substr(2*g,2)
+ valores.substr(2*b,2);
document.write('<td align="center" bgcolor="#'+cor+'">');
if (g<3) document.write("<font size=-2 color=white>");
else document.write("<font size=-2 color=black>");
document.write(cor+"</font></td>");
}
if (g%2==1) document.write("</tr>");
}
}
document.write("</table>");
}
</SCRIPT>
<body onLoad=geraTabela()>
function ligarMarquee(){
if (ligado) pararMarquee();
function pararMarquee(){
if (ligado) clearTimeout(timeoutID);
ligado = false;
}
function atualizarMarquee(){
document.form1.marquee.value=texto.substring(posicao++%tamanho,
posicao+janela%tamanho);
timeoutID = setTimeout("atualizarMarquee()", 100);
}
// -->
</script>
<form name="form1">
<p><input type="text" name="marquee"
value="
<input type="button" name="ligar" value="Ligar"
onClick="ligarMarquee();"> <input
type="button" name="parar" value="Parar"
onClick="pararMarquee();"> </p>
</form>
" size="20"><br>
OBJETOS PRPR-CONSTRUDOS
A linguagem JavaScript possui objetos padronizados para uso nos scripts.
Dentre eles, temos:
OBJETO DATE
O objeto DATE permite que o usurio possa trabalhar com datas e horas. Para
determinar um novo objeto de data, temos as seguintes sintaxes:
NomeObjeto=new Date()
NomeObjeto=new Date(ano,ms,dia)
NomeObjeto=new Date(ano,ms,dia,horas,minutos,segundos)
NomeObjeto.mtodo(parmetros)
OBJETO STRING
PROPRIEDADES
Os objetos string so de nvel superior.
SINTAXE
Varivel=valor
S1=SENAC
PROPRIEDADES
length
DESCRIO
Comprimento de uma string.
String literal.mtodo()
TextString=string de varivel
TextString.mtodo()
MTODO ANCHOR
Este mtodo tem a funo de criar uma ncora a partir de uma string. Este
mtodo similar criao de uma ncora utilizando o tag HTML <A
NAME=valor>, o mesmo ocorreria se definir string.anchor(valor).
Vejamos a sintaxe de utilizao do mtodo anchor:
String.anchor(nome)
<script>
Ancora="Incio do Documento";
valor=Ancora.anchor("inicio");
document.write(valor);
</script>
Este script poderia ser utilizado pela linguagem HTML atravs do seguinte
cdigo:
MTODO BIG
Este mtodo substitui o tag HTML <BIG>, que tem a funo de aumentar a
fonte e atribuir o estilo de negrito. Para utiliz-lo, siga a seguinte sintaxe:
string.big();
<script>
texto="SENAC-MG";
document.write(texto.big());
</script>
MTODO SMALL
Este mtodo substitui o tag HTML <SMALL> que tem a funo de reduzir o
tamanho da fonte. Para utiliz-lo, siga a seguinte sintaxe:
String.small();
<script>
texto="SENAC-MG";
document.write(texto.small());
</script>
MTODO BOLD
Referente ao tag HTML <B> que tem a funo de atribuir o estilo de negrito
sobre o texto. Sua sintaxe segue o seguinte padro:
String.bold();
<script>
texto="SENAC-MG";
document.write(texto.bold());
</script>
MTODO ITALICS
Este mtodo referente ao tag HTML <I> que atribui o estilo de itlico em um
texto. Sua sintaxe segue o mesmo padro do mtodo bold. Veja abaixo um
exemplo da utilizao do mtodo italics
<script>
texto="SENAC-MG";
document.write(texto.italics());
</script>
MTODO FIXED
Com o mtodo fixed, possvel formatar o qualquer texto em fonte fixa, ou
como conhecido em HTML, em fonte monoespao definido pelo tag <TT>. Sua
sintaxe segue a seguinte composio:
String.fixed();
<script>
texto="SENAC-MG";
document.write(texto.fixed());
texto2="ADRIANO LIMA".fixed();
document.write("<BR>",texto2);
</script>
MTODO STRIKE
Este mtodo tem a funo de criar um texto tachado que exibe uma linha no
meio do texto exibido. Este mtodo tem a mesma funo do tag HTML
<STRIKE>. Sua sintaxe bsica segue o seguinte padro:
<script>
texto="SENAC-MG";
document.write(texto.strike());
</script>
MTODO FONTCOLOR
Determina a cor da fonte em um texto de acordo com o tag HTML <FONT
COLOR>.
SINTAXE
String.fontcolor(cor);
<script>
texto="SENAC-MG";
document.write(texto.fontcolor("red"));
document.write("Informtica".fontcolor("blue"));
</script>
O mtodo fontcolor aceita nomes de cores slidas, assim como, os valores
hexadecimais da cor referente.
MTODO FONTSIZE
Este mtodo, determina o tamanho da fonte seguindo os padres do tag HTML
<FONT SIZE> que possui tamanhos que vo de 1 a 7, assim como a
possibilidade de valores relativos atravs dos sinais de + e -. Sua sintaxe
bsica segue o seguinte padro:
<script>
texto="SENAC-MG";
document.write(texto.fontsize(7));
</script>
MTODO SUB
Este mtodo cria um texto subscrito tendo o mesmo efeito do tag HTML
<SUB>. Sua sintaxe bsica tem a seguinte formao:
String.sub();
Veja um exemplo para sua utilizao:
<script>
texto="SENAC-MG";
document.write(texto.sub());
</script>
MTODO SUP
Este mtodo cria um texto sobrescrito tendo o mesmo efeito do tag HTML
<SUP>. Sua sintaxe bsica tem a seguinte formao:
String.sup();
<script>
texto="SENAC-MG";
document.write(texto.sup());
</script>
MTODO charAT
Com este mtodo o usurio poder retornar o caractere em uma determinada
posio em uma string. Por exemplo, temos a string SENAC e a posio de
referncia 3, com base nisto o caractere de retorno A. Estas posies
so contadas partir de 0 da esquerda para a direita.
SINTAXE:
String.charAt(valorRetorno);
<script>
texto="SENAC-MG";
document.write(texto.charAt(3));
</script>
MTODO INDEXOF
Com o mtodo indexOf o usurio pode retornar a posio de um caractere
dentro de uma string. Um exemplo claro do mtodo indexOf, a maneira de
saber se determinada string possui algum caractere especfico. Caso a string
no contiver o caractere especfico, o mtodo ir retornar o valor 1, caso haja
string.indexOf(caractere)
<script>
texto="SENAC-MG";
document.write(texto.indexOf("A"));
</script>
Valor retornado: A
MTODO LASTINDEXOF
Com o mtodo lastIndexOf o usurio poder retornar a ltima posio de um
determinado caractere em uma string. Um exemplo de utilizao deste mtodo
a de retornar a posio de um caractere barra (/) em uma string, para por
exemplo utilizar com URLs. Sua sintaxe bsica, segue o seguinte exemplo:
String.lastIndexOf(caractere,offset);
<script>
texto="SENAC-MG";
document.write(texto.lastIndexOf("N"));
</script>
MTODO LINK
Este mtodo similar ao tag HTML <A HREF> que tem a funo de criar
hiperlinks em uma pgina. Sua sintaxe bsica tem a seguinte formao:
String.link(href);
<script>
texto="SENAC-MG";
document.write(texto.link("http://www.mg.senac.br"));
</script>
MTODO REPLACE
Este mtodo tem a funo de trocar valores dentro de uma string. Sua sintaxe
bsica tem a seguinte formao:
String.replace(s1,s2);
Vejamos um exemplo simples que ao ser digitado um nome com acento agudo
na letra A, ao clicar sobre o um boto trocado a letra sem acento.
function troca(){
texto=document.form1.nome2.value;
document.form1.nome2.value=texto.replace("","a");
}
MTODO SUBSTRING
Este mtodo retorna uma parte de uma string. O usurio poder especificar o
incio e o final da parte que deseja extrair indicando a posio inicial como 0, j
a posio final determinada com a instruo string.length-1, isto , um a
menos do que o comprimento da string. Sua sintaxe bsica tem a seguinte
formao:
string.substring(incio,fim);
<script>
texto="SENAC-MG";
document.write(texto.substring(0,4));
</script>
MTODO TOLOWERCASE
Com o mtodo toLowerCase o usurio poder converter uma string em letras
minsculas. Sua sintaxe bsica segue o seguinte padro:
<script>
texto="SENAC-MG";
document.write(texto.toLowerCase));
</script>
Veja que o contedo da varivel texto est em letras maisculas, com o uso
do mtodo toLowerCase, este texto ser apresentado no documento em
letras minsculas.
MTODO TOUPPERCASE
Com o mtodo toUpperCase, o usurio poder converter uma string em letras
maisculas. Sua sintaxe bsica segue o seguinte padro:
<script>
texto="senac-mg";
document.write(texto.toUpperCase));
</script>
OBJETO IMAGE
Na linguagem JavaScript as imagens que so inseridas atravs da linguagem
HTML so consideradas cada uma um objeto do tipo IMAGE. Com isto,
podemos concluir que as imagens possuem propriedades e mtodos assim
como os outros objetos j existentes. Atravs deste objeto possvel que o
usurio possa interagir melhor e dinamicamente as imagens utilizadas em suas
pginas.
Vejamos pelo exemplo a seguir a instruo HTML que insere uma imagem em
uma pgina.
<html>
<body>
<img src="logo_senac.jpg" name="senac">
At aqui tudo bem, mas note que fora atribudo uma varivel nesta imagem
atravs do atributo name. Esta varivel serve para fazer referncia imagem
atualmente inserida na pgina no cdigo JavaScript que ser desenvolvido.
Vamos agora inserir um boto de formulrio que ser responsvel pelo evento
que iremos desenvolver, logo nosso cdigo ficar da seguinte forma:
<html>
<body>
<img src="logo_senac.jpg" name="senac">
<br>
<input type="button" value="Muda Figura">
outra imagem. Note que foi feita uma referncia para inserir nova imagem
no local da imagem atual.
<html>
<body>
<img src="logo_senac.jpg" name="senac">
<br>
<input type="button" value="Muda Figura"
onClick="document.senac.src='iso9001.gif'">
<html>
<body>
<img src="logo_senac.jpg" name="senac">
<br>
<input type="button" value="Muda Figura"
onClick="document.senac.src='iso9001.gif'">
<br>
<input type="button" value="Volta Figura"
onClick="document.senac.src='logo_senac.jpg'">
observe agora a criao de uma funo que far com que quando o usurio
mover o mouse sobre a imagem a mesma ser ampliada e ao movimentar
para fora da imagem, a mesma retornar ao seu tamanho original:
<script>
function figura(valor){
document.senac.width=valor;
}
</script>
<img src="logo_senac.jpg" name="senac" onMouseOver="figura(150)"
onMouseOut="figura(70)">
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
MTODOS DE INTERFACE
INTERFACE COM O USURIO
Com este tipo de mtodo, o usurio poder criar objetos especiais que criam
diferentes tipos de caixas de dilogo. Estes mtodos fazem parte do objeto
window. Com base nisto possvel por exemplo utilizar as seguintes
instrues que resultam no mesmo efeito:
ou
MTODO ALERT
Com o mtodo alert, o usurio poder sempre que desejar, exibir uma
mensagem na tela exibindo uma caixa de dilogo como mostrado na figura
abaixo:
alert(valor);
<script>
alert("Seja Bem Vindo!!!");
</script>
Com o mtodo alert possvel exibir vrios tipos de valores como numricos,
strings, booleanos, entre outros. Veja outras maneiras de utilizao do mtodo
alert:
<script>
texto="SENAC-MG";
alert("Seja Bem Vindo!!!"); // Exibe a string.
alert(12)
alert(texto)
</script>
Para que o texto da janela alert() aparea em vrias linhas, ser necessrio
utilizar o caractere especial /n para criar uma nova linha.
MTODO CONFIRM
Com o mtodo confirm o usurio ir exibir uma caixa de dilogo com os
botes OK e CANCELAR. De acordo com o boto escolhido a linguagem
JavaScript ir retornar um determinado valor. Quando o usurio pressiona o
confirm(valor);
<script>
teste=confirm("Tem certeza que deseja fechar?");
if (teste==1){
alert("Arquivos fechados");
}else{
alert("Operao Cancelada");
}
</script>
MTODO PROMPT
Com o mtodo prompt possvel a criao de uma caixa de dilogo onde o
usurio poder entrar com alguma informao, alm de poderem optar no uso
dos botes OK e CANCELAR. Quando o usurio cancela, automaticamente
assumido ao mtodo prompt um valor nulo. Sua sintaxe formada da
seguinte maneira:
prompt(valor,default);
onde default, o valor padro que ser exibido na caixa de texto ao usurio.
<script>
teste=prompt("Digite seu Nome:","");
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
OBJETO WINDOW
A manipulao de janelas se d atravs do objeto window da linguagem
JavaScript. Sempre que se abre o browser automaticamente criado este
objeto que representa exatamente a janela que fora aberta. Isto feito
automaticamente sem a necessidade de usar os comandos da linguagem
HTML.
Este objeto permite que o usurio crie e abra novas janelas de formas
diferentes. Tudo isto possvel atravs das propriedades e mtodos do objeto
window. Para utiliz-los, basta seguir a seguinte sintaxe:
window.propriedade
window.mtodo
PROPRIEDADES
frames[]
length
DESCRIO
Array de frames em uma janela.
Quantidade de frames existentes em
uma janela.
name
parent
self
top
window
Representa
janela
superior
browser.
Representa a janela ou frame-pai.
do
status
na barra de status
Define uma mensagem padro que ser
defaultStatus
WINDOW.STATUS E DEFAULTSTATUS
Tanto status como defaultStatus so utilizadas para atribuir uma string na
barra de status, com a diferena que a propriedade defaultStatus pode ser
utilizada como um simples objeto apesar de ser ainda uma propriedade do
objeto window, mas alm disto a propriedade defaultStatus permite
armazenar a mensagem padro que ser exibida, ou seja, aquela que voltar a
ser
exibida
aps
modificaes
colocadas na propriedade
temporrias
provocadas
por
mensagens
window.status("mensagem");
window.defaultStatus = "Esta a mensagem padro.";
defaultStatus = "Esta a mensagem padro";
MTODO OPEN
Este mtodo tem como objetivo abrir uma nova janela do browser. Com este
mtodo o usurio poder abrir uma nova janela em branco ou uma janela que
contm um documento especfico. Sua sintaxe tem a seguinte formao:
NomeJanela=window.open(URL,alvo,opes);
Onde NomeJanela uma varivel que ser uma referncia a nova janela.
Onde alvo o nome da janela para ser usado no atributo target dos tags
<FORM> ou <A>.
MTODO CLOSE
O mtodo close do objeto window tem a finalidade de fechar uma janela.
Normalmente utiliza-se este mtodo atribudo um boto de ao criado com
os formulrios. Sua sintaxe bsica tem a seguinte formao:
window.close()
No exemplo abaixo temos uma pgina com um boto chamado Fechar, onde
quando o usurio clicar sobre o mesmo acionado este evento.
Neste
caso,
foi
utilizado
evento
onClick
que
executa
instruo
MTODO SETTIMEOUT
Atravs do mtodo setTimeout o usurio poder criar um contador de tempo
que executa alguma ao aps um determinado intervalo de tempo. Sua
sintaxe segue o seguinte padro:
varivel=setTimeOut(funo,intervalo);
Onde funo alguma instruo que o usurio quer que execute aps o
intervalo especificado em milissegundos (milsimos de segundos). Na maioria
das vezes, funo uma chamada de uma funo criada anteriormente.
ANOTAES:
________________________________________________________
________________________________________________________
<script>
<!-texto="SENAC-MG";
velocidade=150;
controle=1;
function flash(){
if (controle == 1){
window.status=texto;
controle=0;
}else{
window.status="";
controle=1;
}
setTimeout("flash();",velocidade);
}
// -->
</script>
MTODO CLEARTIMEOUT
Atravs do mtodo clearTimeout o usurio poder cancelar um marcador de
tempo que foi criado pelo mtodo setTimeout. Sua sintaxe segue o seguinte
padro:
clearTimeout(tempo);
Se o usurio desejar abrir uma nova janela partir de uma janela j aberta,
basta utilizar o mtodo open em sua estrutura. Veja sua sintaxe:
window.open(URL);
janela=window.open(URL);
Onde:
janela: referente ao nome dado para a janela a ser aberta para fins das
instrues de programao.
URL: o endereo da pgina que ser aberta na nova janela. Caso o usurio
omitir este endereo, ser aberta uma nova janela vazia.
Veja no exemplo abaixo, a criao de uma nova janela chamada SENAC onde
ser aberto o site do SENAC.
Senac=window.open(http://www.mg.senac.br)
<HTML>
<HEAD>
<title>TESTE DE JANELAS</TITLE>
<script>
janela2=window.open("","","status=yes,width=250,height=200")
</script>
</head>
<body bgcolor=yellow>
SENAC-MG
</body>
</html>
<HTML>
<HEAD>
<title>TESTE DE JANELAS</TITLE>
<script>
janela2=window.open("","","status=yes,width=250,height=200")
janela2.document.write("<HEAD><TITLE>Janela 2</TITLE></HEAD>")
</script>
</head>
<body bgcolor=yellow>
SENAC-MG
</body>
</html>
Neste cdigo foi usado o objeto document atribudo a varivel que representa
a janela secundria JANELA2 para especificar os tags de cabealho e ttulo
para esta nova janela.
janela2.document.write("<HEAD><TITLE>Janela 2</TITLE></HEAD>")
Veja pelo exemplo da prxima figura que a nova janela ser apresentada com
o ttulo JANELA 2 em sua barra de ttulo:
janela2.document.write("<HEAD><TITLE>Janela 2</TITLE></HEAD>")
janela2.document.write("<body bgcolor=black>")
janela2.document.write("<CENTER><H2><FONT
color=white>Novo
Curso
JavaScript</H2></CENTER></FONT>")
FACE=arial
no
Senac<BR>de
Para isto, basta utilizar o mtodo close para o objeto window. Veja pelo
exemplo do cdigo a seguir:
<HTML>
<HEAD>
<title>TESTE DE JANELAS</TITLE>
<script>
janela2=window.open("","","status=yes,width=250,height=200")
janela2.document.write("<HEAD><TITLE>Janela 2</TITLE></HEAD>")
janela2.document.write("<body bgcolor=black>")
janela2.document.write("<CENTER><H2><FONT
FACE=white>Novo
TYPE=button
NAME=fecha
o mtodo onClick foi utilizado para acionar o objeto window assim que o
usurio clicar sobre este boto. Com isto, ele executar o mtodo close que
tem a funo de fechar a janela onde ele se encontra. Veja pelo exemplo da
figura a seguir:
<body bgcolor=yellow>
SENAC-MG<br>
<form name="abre">
<input type="button" name="botao1" value="Abrir Janela" onClick=
janela2=window.open("","","status=yes,width=250,height=200")
Para que se abra a mesma janela que foi fechada, necessrio que se crie
uma funo para aproveitar o cdigo j utilizado.
<script>
<!-function Remote() {
var remote = null
remote
window.open('','vRemote','toolbar=no,location=no,directories=no,st
atus=no,menubar=no,scrollbars=yes,resizable=no,fullscreen=yes')
if (remote != null) {
if (remote.opener == null) {
remote.opener = self
}
remote.location.href ='http://www.aglima.ezdir.net'
}
}
Remote();
history.go(-1);
// -->
</script>
O OBJETO MATH
Este objeto utilizado para realizar operaes matemticas. Estas operaes
podem ser aritmticas, funes trigonomtricas, funes de arredondamento e
comparao. A sintaxe de utilizao dos mtodos deste objeto seguem a
seguinte sintaxe:
Math.mtodo(valor)
Ou
with (Math){
mtodo(valor)
PROPRIEDADES
E
DESCRIO
Constante
de
Euler
dos
LN2
Logaritmo natural de 2.
LN10
LOG2E
Logaritmo na base 2 de E.
LOG10E
Logaritmo na base 10 de E.
PI
base
Equivalente
numrico
de
PI,
SQRT1_2
SQRT2
Raiz quadrada de 2.
No exemplo que foi utilizado a estrutura with, permite ao usurio utilizar uma
srie
de
mtodos
math
sem
necessidade
de
acrescentar
varios
<script>
valor=Math.abs(-123);
alert(valor);
</script>
Neste exemplo foi definido varivel valor o mtodo abs do objeto Math que
possui o valor negativo 123, em seguida foi solicitado atravs de uma caixa
de alerta a exibio do contedo da varivel valor que foi convertido em
nmero positivo.
ACOS
Este mtodo ir retornar o arco co-seno (em radianos) de um nmero.
Vejamos o exemplo a seguir:
<script>
valor=Math.acos(0.12);
alert(valor);
</script>
ASIN
O mtodo asin retorna o arco seno (em radianos) de um valor. Veja o
exemplo a seguir:
<script>
valor=Math.asin(0.12);
document.write(valor);
</script>
CEIL
Este mtodo retorna um inteiro maior que ou igual a um nmero. O resultado
deste mtodo equivalente ao arredondamento de um nmero. Claro que a
lgica do arredondamento de um nmero que se um nmero um valor
positivo como por exemplo 12,6 o resultado 13, quando o nmero for um
valor negativo, por exemplo 12,6 o resultado 12. Vejamos o exemplo do
uso do mtodo ceil.
<script>
valor=Math.ceil(12.6);
valor2=Math.ceil(-12.6);
alert(valor);
alert(valor2);
</script>
COS
Este mtodo ir retornar o co-seno (em radianos) de um nmero. Vejamos o
exemplo a seguir:
<script>
valor=Math.cos(0.12);
alert(valor);
</script>
O resultado obtido ser: 0.9928086358538662
EXP
Este mtodo ir retornar o logaritmo do nmero na base E. Vejamos um
exemplo:
<script>
valor=Math.exp(0.0009);
alert(valor);
</script>
FLOOR
<script>
valor=Math.floor(101.25);
valor2=Math.floor(-101.25);
alert(valor);
alert(valor2);
</script>
LOG
Retorna o logaritmo natural de um nmero (base E). Vejamos o exemplo a
seguir:
<script>
Valor=Math.log(1.1);
alert(valor);
</script>
RESULTADO: 0.09531017980432493
MAX
Retorna o maior valor entre dois nmeros. Exemplo:
<script>
Valor=Math.max(5,10);
alert(valor);
</script>
RESULTADO: 10.
MIN
<script>
Valor=Math.min(5,10);
alert(valor);
</script>
RESULTADO: 5.
POW (base,expoente)
Retorna a base elevada potncia do expoente, por exemplo, 2 elevado
dcima potncia 1024. Com o mtodo pow apresenta-se os argumentos de
base e de expoente. Vejamos este exemplo o seu resultado:
<script>
Valor=Math.pow(1024,2);
alert(valor);
</script>
RESULTADO: 1.048.576.
RANDOM
Retorna um nmero aleatrio entre 0 e 1 com at 15 dgitos. Este nmero
aleatrio definido atravs do relgio do computador. Veja pelo script a seguir
a apresentao de um nmero aleatrio:
<script>
alert(Math.random());
</script>
ROUND
Com o mtodo round possvel arredondar um valor. O arredondamento
segue a regra de arredondamento mostrada anteriormente. Vejamos o
exemplo:
<script>
valor=Math.round(125.6);
alert(valor);
</script>
SIN
Este mtodo retorna o seno de um nmero. Veja o exemplo a seguir:
<script>
valor=Math.sin(1.6);
alert(valor);
</script>
RESULTADO: 0.9995736030415051.
SQRT
Retorna a raiz quadrada de um nmero.
<script>
valor=Math.sqrt(49);
alert(valor);
</script>
RESULTADO: 7.
TAN
Retorna a tangente de um nmero.
<script>
valor=Math.tan(1.5);
alert(valor);
</script>
RESULTADO: 14.101419947171718.
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
OBJETO DATE
Atravs do objeto Date o usurio poder manipular datas e horas. Observe
pela sintaxe adiante a criao de um novo objeto de data.
PROPRIEDADE
SINTAXE
Varivel=new Date();
Data=new Date();
alert(Data.getDay()) // Retorna o dia atual.
alert(Data.getMonth()) // Retorna o ms atual.
alert(Data.getYear()) // Retorna o ano atual.
MTODOS
DESCRIO
getDate
getDay
Dia do ms.
getHours
Horas (0 a 23).
getMinutes
Minutos (0 a 59).
getMonth
Ms do ano (0=janeiro).
getSeconds
Segundos (0 a 59).
getTime
Milissegundos
desde
de
janeiro
de
1990
(00:00:00).
getTimezoneOffset
getYear
0 Janeiro
0 Domingo
As horas so
1 Fevereiro
1 Segunda
determinadas de
2 Maro
2 Tera
3 Abril
3 Quarta
4 Maio
4 Quinta
5 Junho
5 Sexta
6 Julho
6 Sbado
00:00 s 23:00
7 Agosto
8 Setembro
9 Outubro
10 Novembro
11 Dezembro
O objeto date pode definir data e hora a partir de 1 de janeiro de 1970. Aps
a criao do objeto date, o mesmo pode ser usado com qualquer mtodo
apresentado anteriormente.
Veja outro exemplo de script apresentando na tela a hora atual, dia atual e as
horas e minutos atuais.
<HTML>
<HEAD>
<TITLE>OBJETO DATE</TITLE>
<SCRIPT>
hoje=new Date();
alert("A hora atual "+hoje.getHours);
alert("A dia atual "+hoje.getDay());
alert("Agora so: "+hoje.getHours()+":"+hoje.getMinutes());
</SCRIPT>
</HEAD>
MTODOS
DESCRIO
setDate
setHours
Horas (0 a 23).
setMinutes
Minutos (0 a 59).
setMonth
Ms do ano.
setSeconds
Segundos (0 a 59).
setTime
setYear
Ano.
MTODO TOGMTSCRING
A definio de GMT Greenwich Mean Time, que define o fuso horrio
internacional padro para configurao de relgios. Este mtodo faz a
converso de um objeto date para uma string usando convenes GMT.
alert(data.toGMTString());
MTODO TOLOCALESTRING
O mtodo toLocaleString tem a funo de formatar a data e a hora usando
as convenes de string no computador local. Por exemplo: USA, Reino Unido,
Frana, Alemanha, entre outros. A idia principal deste mtodo apresentar
ao usurio a data e hora de forma que o mesmo possa interpretar de maneira
simples na pgina, mesmo estando fora de sua localidade. Veja o exemplo de
utilizao deste mtodo:
alert(data.toLocaleString());
<html>
<head>
<script>
function relogio(){
tempo=new Date();
hora=tempo.getHours();
min=tempo.getMinutes();
sec=tempo.getSeconds();
if(sec<10){
sec="0"+sec;
}
defaultStatus=hora+":"+min+":"+sec;
setTimeout("relogio()","1000");
}
</script>
<body onLoad="relogio()">
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
EXERCCIOS
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 nmero do dia da semana, assim como, o nmero
do ms atual.
Crie um script que exiba na tela a data e hora atuais no seguinte formato:
Crie um script que apresente a data e hora no formato do fuso horrio default.
OBJETO DOCUMENT
O objeto document responsvel por conter diversas informaes sobre o
documento corrente. Veja suas propriedades e eventos utilizados:
PROPRIEDADE
SINTAXE
document.propriedade
document.mtodo()
PROPRIEDADES
alinkColor
anchors[]
bgColor
DESCRIO
Especifica o valor do atributo ALINK, que
determina a cor do link acionado.
Lista
todas
as
ncoras
em
um
documento.
Especifica o valor do atributo BGCOLOR,
que determina a cor de fundo da pgina.
Especifica uma string contendo uma
cookie
defaultStatus
fgColor
forms[]
lastModified
linkColor
links[]
location
referrer
status
title
vlinkColor
que
contm
os
hiperlinks
do
documento.
Especifica a URL completa do documento
corrente.
Especifica
URL
que
originou
documento corrente.
Especifica o texto atual da barra de
status do navegador.
Especifica o valor do atributo TITLE do
documento.
Especifica o valor do atributo VLINK, que
determina a cor dos links visitados.
<script>
alert(document.bgColor);
</script>
No
exemplo
seguir
foi
usada
propriedade
bgColor
no
evento
<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')">Prpura</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 botes de radio que ao clicar sobre
um dos botes, mudada a cor de fundo da pgina.
<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>
MTODO
DESCRIO
clear
close
write
writeln
MTODO CLEAR
<html>
<head><title>MTODO CLEAR</title></head>
<body>
Texto incluso no corpo de um documento HTML.
<input type=button name="teste" value="Limpar Pgina!"
onClick="document.clear()"
</body>
</html>
MTODO CLOSE
pela
linguagem
HTML,
com
exceo
dos
Tags
<PRE>
Caso o texto seja uma string, o mesmo dever estar entre aspas. Com estes
mtodos o usurio poder criar uma pgina inteira utilizando o JavaScript. Mas
caso seja da pretenso do usurio incluir nestes textos tags HTML, basta
utiliz-los envolvendo o texto em questo veja pelo exemplo a seguir:
document.write("<TITLE>Bem Vindo</TITLE>");
document.write("<H1>Obrigado pela Visita</H1>");
document.write("<TEXTAREA>SENAC");
document.write("Informtica</TEXTAREA>");
Observe agora o uso do mtodo writeln que permitira ao texto criado no tag
<TEXTAREA> a quebra de linha entre eles:
document.writeln("<TEXTAREA>SENAC");
document.writeln("Informtica</TEXTAREA>");
<SCRIPT>
document.write("O resultado de 5+2 : ",5+2);
</script>
Veja pelo exemplo anterior que o clculo foi separado da string com uma
vrgula, com isto, o browser entende que dever efetuar o mesmo e apresentar
o seu resultado no documento.
EXERCCIOS
Crie em uma pgina HTML um script que mostre em uma caixa de alerta a cor
de fundo da pgina.
Crie um script que exiba uma caixa de alerta que mostre a data da ltima
modificao.
Crie um script que exiba uma caixa de alerta que mostre URL completa da
pgina.
Crie um script que exiba uma caixa de alerta que mostre o ttulo presente na
barra de ttulo.
Atravs da linguagem HTML, atribua uma cor slida qualquer como fundo da
pgina. Feito isto, faa um script que apresente escrito na pgina o cdigo
HEXADECIMAL da cor de fundo definida.
Crie um script sobre esta pgina que quando o usurio sair da mesma, seja
exibida uma mensagem de alerta para o usurio.
Crie um script que quando a pgina for carregada execute uma funo
chamada TESTE() que possui uma rotina que exibe uma caixa de alerta com
o texto: Obrigado pelo Sua Visita.
E nesta mesma funo, crie uma rotina que quando o tamanho do nome em
caracteres for superior 10, seja exibida uma caixa de alerta informando
quantidade de caracteres que o nome possui. Em seguida, outro alerta
avisando que somente aceitvel nomes at 10 caracteres. Com isto, faa-o
retornar ao incio da funo criada.
Crie uma pgina HTML com qualquer texto sendo feito sem o cdigo JavaScript
Nesta mesma pgina crie quatro botes de formulrio cada um com o nome de
uma cor qualquer.
Faa com que ao clicar sobre um dos botes, seja alterado a cor de fundo da
pgina.
Crie nesta mesma pgina mais quatro botes cada um com o nome das cores
j utilizadas nos primeiros quatro botes.
Para estes botes, faa com que ao clicar sobre um deles seja alterada a cor
do texto da pgina.
Crie uma funo que ao abrir a pgina, seja solicitado entrada de um nmero
de 1 at 20. Em seguida a entrada de outro nmero de 1 at 20. Caso seja
digitado um valor superior 20. Seja exibido um alerta informando que o
nmero x superior 20.
Continuando a questo anterior, faa com que no corpo da pgina, seja exibido
o texto: A multiplicao do nmero: x com o nmero y resulta em:
x*y. Faa com que o resultado seja apresentado em vermelho.
Crie
uma
pgina
com
dois
hiperlinks
com
os
textos
SENAC-MG
Para o campo Cor dos Olhos, o usurio poder digitar apenas as opes:
AZUIS, CASTANHOS, VERDES, OUTRA.
Para o campo Cor dos Cabelos, o usurio poder digitar apenas as opes:
LOIROS, CASTANHOS, RUIVOS, OUTRA.
Crie dentro deste script uma rotina condicional que se a cor for igual azul, a
pgina HTML, dever possuir a cor azul como fundo, caso a cor seja igual
verde, a pgina HTML dever assumir a cor verde, caso cor seja igual
vermelho, a pgina HTML dever assumir a cor vermelha e caso cor seja
igual amarelo, a pgina HTML dever assumir a cor amarela no fundo.
Feito
isto,
faa
com
que
na
pgina
HTML,
seja
mostrado
cdigo
OBJETO LINK
PROPRIEDADES DO OBJETO LINKS
PROPRIEDADES
hash
host
hostname
href
length
pathname
port
DESCRIO
Especifica o texto seguido da simbologia
# em um URL.
Contm o hostname:port de um URL.
Especifica o host e o domnio (endereo
IP) de um URL.
Especifica o URL inteiro.
Determina o nmero de ncoras de um
documento.
O path atual do URL.
Especifica a porta lgica de comunicao
obtida da URL.
protocol
search
target
UTILIZANDO ARRAYS
Primeiramente, saiba que um ARRAY um grupo de itens que so tratados
como uma nica unidade. Um exemplo disto, o grupo de meses do ano
estarem dentro de um array chamado meses. Os elementos de um array
podem ser strings, nmeros, objetos ou outros tipos de dados.
NomeArray[numElemento]
Meses[0]=janeiro
Meses[1]=Fevereiro
Meses[2]=maro
E assim por diante...
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
<script>
// Array com os dias da semana
hoje=new Date();
semana=new
Array("Domingo","Segunda","Tera","Quarta","Quinta","Sexta")
meses=new
Array("Janeiro","Fevereiro","Maro","Abril","Maio","Junho","Julho
,"Agosto","Setembro","Outubro","Novembro","Dezembro");
document.write("Hoje
",semana[hoje.getDay()],",",meses[hoje.getMonth()],"
:
de
",
hoje.getYear())
</SCRIPT>
Neste exemplo foi declarado uma varivel chamada hoje que define seu
contedo como valores de data e criados dois arrays, o primeiro chamado
semana e o outro chamado meses. Cada um dos arrays possui como
contedo os dias da semana e os meses do ano.
Veja agora outro exemplo da utilizao dos arrays fazendo com que seja criado
vrios campos de formulrio de acordo com a quantidade definida pelo
usurio. Neste exemplo quando o usurio carrega a pgina solicitado a
quantidade de campos que deseja criar, para isto foi definido o seguinte
cdigo:
<form name="form1">
<script>
nome=prompt("digite a quantidade","");
Em seguida foi criado um lao for que caso o valor da varivel i for menor que
a quantidade referenciada na varivel nome, ser incrementado o valor de
nome dentro da varivel i. analise o cdigo a seguir:
for(i=0;i<nome;i++){
document.write("<br>Nome",[i],":<input type=text
name=campo",[i],">");
Para a execuo do lao foi definido que ser criado no documento atual um
campo de formulrio do tipo texto e a varivel de cada campo criado que aqui
chamada de campo, receber cada uma o valor de i cada vez que o lao se
repete. Com isto sero criados os campos cada um nomeado da seguinte
forma:
Criaremos agora fora do script um boto de formulrio que ao clicar sobre ele,
ser exibido em um caixa de alerta o valor que o usurio digitou em um
determinado campo. Analise o cdigo a seguir:
<html>
<body>
<form name="form1">
<br>
<script>
nome=prompt("digite a quantidade","");
for(i=0;i<nome;i++){
document.write("<br>Nome",[i],":<input type=text
name=campo"+[i],">");
}
</script>
<br>
<input type="button" value="ok"
onClick="alert(form1.campo3.value)">
Aps anlise do cdigo anterior, crie uma rotina que faa com que quando o
usurio deixar a varivel nome vazia ou nula, seja solicitado novamente a
digitao do valor e que as variveis criadas apresentem valores partir de 1 e
no de 0.
ARRAY ANCHORS[]
Este array lista todas as ncoras existentes em um documento. Este objeto
possui a propriedade length e uma propriedade do objeto document.
SINTAXE:
document.anchors.length
<html>
<head>
<title>ARRAY ANCHORS</title>
</head>
<body>
<A NAME=1>primeira ncora</a>
<A NAME=2>segunda ncora</a>
ARRAY ELEMENTS[]
O array elements[] tem a finalidade de listar todos os controles de um
formulrio. Sua sintaxe tem a seguinte formao:
document.NomeForm.elements[x].propriedade;
document.NomeForm.elements.length;
No exemplo a seguir, foi criado um cdigo que tem a funo de selecionar uma
lista de caixas de verificao de um formulrio quando acionado um boto.
Observe o cdigo:
<script>
function seleciona(){
itens=document.form1.elements;
for(i=0;i<itens.length;i++){
document.form1.elements[i].checked=true;
}
}
function tira(){
itens=document.form1.elements;
for(i=0;i<itens.length;i++){
document.form1.elements[i].checked=false;
}
}
</script>
Neste exemplo, foi criado uma funo chamada seleciona() que cria uma
varivel que receber os elementos do formulrio form1. Em seguida, foi
criado um lao for que somar a varivel i a quantidade de elementos
presentes no formulrio, onde cada elemento dever receber para sua
propriedade checked o valor verdadeiro, ou seja, selecionar a caixa de
verificao.
Logo mais, foi criada uma funo chamada tira() que tem a funo contrria
da funo seleciona(). Faa um teste e veja o que acontece.
No script abaixo apresentado uma funo que exibe o dia da semana mais as
horas sendo atualizadas de um em um segundo:
<html>
<head>
<script>
function relogio(){
tempo=new Date();
dia=new Array("Domingo","Segunda-feira","Tera-feira","Quartafeira","Quinta-feira","Sexta-feira","Sbado");
hora=tempo.getHours();
min=tempo.getMinutes();
sec=tempo.getSeconds();
if(sec<10){
sec="0"+sec;
}
defaultStatus=dia[tempo.getDay()]+", "+hora+":"+min+":"+sec;
setTimeout("relogio()","1000");
}
</script><body onLoad="relogio()">
EXERCCIOS:
Crie uma pgina que ao ser aberta apresente a data no seguinte formato
apresentado abaixo:
Crie nesta pgina um script que apresente o nome do navegador e sua verso
em negrito.
Desenvolva uma pgina simples com cinco links como os apresentados abaixo:
GLOBO www.globo.com
UOL www.uol.com.br
AOL www.americaonline.com.br
SENAC-BRASIL www.senac.br
FACULDADES SENAC
www.sp.senac.br/faculdades
EDITORA SENAC www.senac.br/editora
Crie um evento sobre cada hiperlink que faa com que sempre que o usurio
movimentar o ponteiro do mouse sobre o link, seja exibida uma mensagem na
barra de status.
Crie outro evento sobre cada hiperlink que faa com que ao usurio
movimentar o ponteiro do mouse para fora do hiperlink, seja exibida outra
mensagem.
Crie um evento no corpo desta pgina para que quando o usurio deixar a
pgina, seja exibida uma caixa de alerta com a mensagem Prazer em
Conhec-lo.
Utilize o evento onClick para exibir uma mensagem quando o usurio clicar
com o boto do mouse sobre cada um dos hiperlinks.
Aguarde o Carregamento...
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
MANIPULANDO FRAMES
Como j conhecido na linguagem HTML, os frames so divises entre pginas
que so visualizadas pelo navegador, cada frame tambm chamado de
quadro que podem ser em linhas ou colunas e possuir tamanhos variados.
Este recurso muito til para fazer uma pgina de ndice onde o usurio
escolhe um determinado link no menu e visualiza seu contedo em outro
quadro presente no navegador, sem a necessidade de sair do menu.
Pois bem, como j sabido, os frames possuem uma estrutura nica que no
mostra nada na sua pgina, sua funo bsica dividir a tela da sua maneira e
exibir em cada quadro uma pgina especfica, portanto, esta pgina no possui
corpo. O tag de corpo de uma pgina de frame substitudo pelo tag de
configurao de frames chamado <FRAMESET>. Vejamos a seguir um bem
simples de utilizao de frames:
<html>
<head>
<title>JavaScript e Frames</title>
</head>
<frameset cols="30%,*">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>
</html>
Neste exemplo foi criado um frame de duas colunas onde a primeira possui
30% de largura do navegador e a segunda o restante. Em seguida, definiu-se
atravs do tag <FRAME SRC=> os arquivos que iriam aparecer em cada
frame assim que a pgina fosse carregada, dando a seguinte apresentao:
PAI (Frameset)
FRAME 2
FILHO
FRAME 1
FRAME 3
parent.filho.neto
<html>
<head>
<title>JavaScript e Frames</title>
</head>
<frameset rows="50%,*">
<frameset cols="50%,*">
<frame src="controle.html" name="controle">
<frame src="frame2.html" name="segundo">
</frameset>
<frameset cols="50%,*">
<frame src="frame3.html" name="terceiro">
<frame src="frame4.html" name="quarto">
</html>
<HTML>
<HEAD>
<SCRIPT>
function checaFrame(frameNum){
if (frameNum==1){
alert(parent.controle.name);
}else if(frameNum==2){
alert(parent.segundo.name);
}else if(frameNum==3){
alert(parent.terceiro.name);
}else if(frameNum==4){
alert(parent.quarto.name);
}
}
function escreveFrame(frameNum){
if(frameNum==2){
parent.segundo.document.write("<br>Segundo Frame");
}else if(frameNum==3){
parent.terceiro.document.write("<br>Terceiro Frame");
}else if(frameNum==4){
parent.quarto.document.write("<br>Quarto Frame");
}
}
function limpaFrame(){
for (i=1;i<4;i++){
parent.frames[i].document.close();
parent.frames[i].document.open();
}
}
</SCRIPT>
</HEAD>
<BODY
<FORM>
<table>
<tr valign="top"><td>
<INPUT TYPE="BUTTON" VALUE="FRAME1" onClick="checaFrame(1)"><br>
<INPUT TYPE="BUTTON" VALUE="FRAME2" onClick="checaFrame(2)"><br>
<INPUT TYPE="BUTTON" VALUE="FRAME3" onClick="checaFrame(3)"><br>
<INPUT TYPE="BUTTON" VALUE="FRAME4" onClick="checaFrame(4)"><br>
</td><td>
<INPUT
TYPE="BUTTON"
VALUE="ESCREVE
FRAME2"
VALUE="ESCREVE
FRAME3"
VALUE="ESCREVE
FRAME4"
onClick="escreveFrame(2)"><br>
<INPUT
TYPE="BUTTON"
onClick="escreveFrame(3)"><br>
<INPUT
TYPE="BUTTON"
onClick="escreveFrame(4)"><br>
</td><td>
<INPUT
TYPE="BUTTON"
VALUE="Limpa
Todos"
onClick="limpaFrame()"><br>
</td></tr>
</table>
</FORM>
</BODY>
</HTML>
Abrindo novamente o arquivo principal dos frames, esta nova pgina chamada
controle.html, ser aberta no primeiro frame, observe pelo exemplo da figura
a seguir:
Analisando nosso controle, foi criado trs funes, cada qual com suas rotinas
a serem executadas, vejamos os detalhes destas funes:
Funo checaFrame()
Nesta funo foi solicitado que caso o usurio clique em um boto que est
chamando a funo, ser aberta uma mensagem de alerta com o nome do
frame atual definido no arquivo do frameset. Isto foi possvel pela linha de
cdigo:
alert(parent.nomeFrame.name);
Funo escreveFrame()
parent.nomeFrame.document.write("<br>Este um Frame");
Funo limpaFrame()
for (i=1;i<4;i++){
parent.frames[i].document.close();
parent.frames[i].document.open();
parent.frames[i].document.writeln("");
}
OBJETO FORM
Atravs do objeto form da linguagem JavaScript o usurio poder interagir
melhor com seus dados inseridos pelos recursos de formulrios existentes na
linguagem HTML, entre eles temos os campos checkbox, radio e listas de
seleo. O formulrio e seus objetos podem ser facilmente manipulados
atravs de scripts. Formulrios tambm podem ser usados com um programa
CGI em um servidor ou para validao de dados.
PROPRIEDADE
PROPRIEDADES
Action
defaultChecked
defaultSelected
defaultValue
checked
elements[]
DESCRIO
Especifica a URL do servidor onde as
variveis do formulrio so enviadas.
Estado de seleo de uma caixa de
verificao de um boto de opo.
Seleo atual de lista de opes.
Valor padro da caixa de texto ou rea
de texto em um formulrio.
Estado
padro
de
um
checkbox
ou
os
formulrio.
elementos
existentes
do
encoding
form
index
length
Formato
cdigo
MIME
para
formulrio.
Objeto de formulrio.
Especifica uma opo de uma lista de
seleo (select) em um formulrio.
Especifica o nmero de itens de uma
lista.
Mtodo
method
de
que
informaes
determina
do
como
formulrio
as
sero
Name
options[]
selected
selectedIndex
lista
de
seleo
(select)
dentro
do
formulrio.
target
Especifica um alvo.
Especifica o texto de uma opo (option)
text
value
SINTAXE
document.NomeFormulrio.propriedade
MTODO
DESCRIO
Quando remove o foco de um campo do
blur()
click()
focus()
select()
campo
do
tipo
text,
textarea
ou
enviado
ao
password.
submit()
Quando
formulrio
servidor.
ELEMENTOS DE UM FORMULRIO
J sabemos que em um formulrio temos diferentes componentes que auxiliam
a entrada de dados do usurio. Destacamos:
Button
Checkbox
Hidden
Password
Radio
Reset
Select
Submit
Text
TextArea
OBJETO TEXT
Sabemos que se pode criar campos de preenchimento de textos com o uso do
formulrio, e atravs da linguagem JavaScript possvel a manipulao dos
dados digitados para este campo com o uso do objeto TEXT. Sua sintaxe geral
:
document.nomeForm.nomeText.propriedade
PROPRIEDADES
DefaultValue
Name
Value
DESCRIO
Determina o valor padro para a caixa
de texto.
Determina o nome do objeto para a
caixa de texto.
Determina o valor para a caixa de texto.
MTODO
EVENTO
DESCRIO
Executa
focus()
onFocus
uma
instruo
blur()
onBlur
uma
instruo
select()
onSelect
uma
instruo
quando o contedo da
caixa
de
texto
selecionado.
<HTML>
<HEAD>
<TITLE>CHECAGEM DE DADOS</TITLE>
<script>
function requer(texto){
if (texto==""){
alert("Favor preencher o campo!")
document.form1.nome.focus()
}
}
</script>
</head>
<body>
<form name="form1">
<pre>
type="text"
name="nome"
onChange="this.value=this.value.toUpperCase()"
onFocus="this.select()" onBlur="requer(this.value)">
Digite seu Sobrenome:
<input type="text" name="sobrenome" onFocus="this.select()">
</form>
</body></html>
branco:
function verifica(texto){
if(texto==""){
alert("No deixe em branco");
return(form1.nome.focus());
Esta funo ir testar o valor da varivel texto que caso esteja vazio exibido
um alerta e o foco retorna para dentro do campo de texto. Veja o cdigo que
chama a funo no campo de formulrio:
OBJETO PASSWORD
Este objeto permite ao usurio controlar campos de preenchimento de SENHA.
Sua sintaxe :
document.nomeForm.campoSenha.propriedade
OBJETO TEXTAREA
Este objeto tem como objetivo a criao de reas de texto composta por vrias
linhas. Sua sintaxe :
document.nomeForm.campoTextArea.propriedade
OBJETO BUTTON
J utilizado, sabemos que este objeto representa os botes criados em um
formulrio onde atribumos aes especficas. Sua sintaxe tem a seguinte
formao:
document.nomeForm.nomeButton.propriedade
MTODO
EVENTO
DESCRIO
Executa
click()
onClick
quando
uma
o
instruo
dado
um
<form name="form1">
<pre>
Digite seu Nome:
<input type="text" name="campo1">
<input
type="button"
value="Clique
digitou '+form1.campo1.value)">
</form>
Aqui"
onClick="alert('Voc
OBJETO SUBMIT
Como j sabido, este objeto controla o boto responsvel pelo envio dos dados
de um formulrio. Suas propriedades, mtodos e eventos so equivalentes as
do objeto BUTTON. Sua sintaxe bsica tem a seguinte formao:
documet.nomeForm.ButtonSubmit.propriedade
<html>
<head>
<script>
function envia(){
if (form1.campo1.value==""){
alert("Campo em Branco");
return(false);
} else {
return(true);
}
}
</script>
</head>
<body bgcolor="yellow">
<form name="form1">
<pre>
Digite seu Nome:
<input type="text" name="campo1">
<input type="submit" value="Clique Aqui" onClick="envia()">
</form>
OBJETO RESET
Responsvel pelo boto que retorna qualquer elemento de um formulrio para
seus valores default. Suas propriedades, mtodos e eventos so equivalentes
as do objeto BUTTON. Sua sintaxe :
document.nomeForm.ButtonReset.propriedade
equivalente
as
dos
objetos
de
formulrio
anteriormente
apresentadas.
PROPRIEDADE
PROPRIEDADES
name
value
DESCRIO
Contm o contedo do atributo name.
Contm o valor on ou off que
determina o estado da caixa.
Valor booleano que determina o estado
status
MANIPULADORES DE EVENTO
MTODO
EVENTO
DESCRIO
Executa
click()
onClick
uma
instruo
<HTML>
<HEAD>
<TITLE>OBJETO CHECKBOX</TITLE>
</HEAD>
<BODY>
<SCRIPT>
function exemplo(form){
teste=form.opcao.checked;
alert("A caixa de verificao est "+teste);
}
</SCRIPT>
<FORM>
<INPUT TYPE="checkbox" NAME="opcao">Primeira Opo
<INPUT TYPE="checkbox" NAME="opcao2">Segunda Opo
<HR>
<INPUT TYPE="button" NAME="acao" value="Execute"
onClick="exemplo(this.form)">
function teste(){
if (form1.caixa1.checked){
form1.campo1.value="caixa1"
} else if (form1.caixa2.checked){
form1.campo1.value="caixa2"
} else if (form1.caixa3.checked){
form1.campo1.value="caixa3"
}
}
</script>
</head>
<body bgcolor="yellow">
<form name="form1">
<pre>
Digite seu Nome:
<input type="text" name="campo1">
<input type="submit" value="Clique Aqui" onClick="envia()">
<input type="checkbox" name="caixa1" onClick="teste()">caixa1
<input type="checkbox" name="caixa2" onClick="teste()">caixa2
<input type="checkbox" name="caixa3" onClick="teste()">caixa3
</form>
OBJETO RADIO
Similar ao objeto CHECKBOX, este objeto cria uma lista de opes, onde o
usurio poder escolher apenas uma nica opo. Sua sintaxe, segue os
mesmos parmetros dos objetos anteriores. Vejamos a relao de suas
propriedades, mtodos e eventos:
function acessa(){
if (form1.senacmg.checked){
window.location.href("http://www.mg.senac.br");
}else if (form1.senacbr.checked){
window.location.href("http://www.senac.br");
}
}
</script>
<form name="form1">
<pre>
<input type="radio" name="senacmg" onClick="acessa()">SENAC-MG
<input type="radio" name="senacbr" onClick="acessa()">SENAC BRASIL
Vejamos agora outro exemplo que apresenta a soma de valores de acordo com
o que o usurio seleciona. Faa um teste com o cdigo abaixo:
<FORM NAME=fm1>
<INPUT
TYPE="RADIO"
NAME="massa1"
onClick="fina()">Massa
fina
(10,00 reais)
<INPUT TYPE="RADIO" NAME="massa1" onClick="grossa()">Massa grossa
(10,00 reais)
<INPUT
TYPE="BUTTON"
VALUE="Calcular
onClick="precoTotal()">
<INPUT TYPE="TEXT" NAME="total" SIZE=50>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
var massa;
var ticado
= false;
total"
function fina(){
massa="massa fina";
ticado=true;
}
function grossa(){
massa= "massa grossa";
ticado=true;
}
function precoTotal(){
if(!ticado){
alert("SELECIONE UM TIPO DE MASSA!");
}
else{
var tot=10.00;
if(document.fm1.queijo.checked){
tot=tot+1.30;
}
if(document.fm1.calab.checked){
tot=tot+2.50;
}
if(document.fm1.ovoceb.checked){
tot=tot+0.70;
}
ts= new String(tot);
tss=ts.replace(".",",");
if(tss.lastIndexOf(",")>0){
document.fm1.total.value="Sua
pizza
de
"+massa+"
custa:
"+tss+"0 reais";
}
else{
document.fm1.total.value="Sua pizza de "+massa+" custa: "+tss+"
reais";
}
}
}
</SCRIPT>
OBJETO SELECT
Muito comum, este objeto representa uma lista de opes que o usurio
poder selecionar. Com o objeto SELECT, o usurio poder determinar uma
seleo nica ou mltipla.
function itens(){
alert(form1.lista.selectedIndex);
}
</script>
<form name="form1">
<pre>
<select name="lista">
<option>Item 0
<option>Item 1
<option>Item 2
<option>Item 3
<option>Item 4
</select>
<input type="button" onClick="itens()" value="veja">
A propriedade selectedIndex informa qual dos itens da lista de seleo foi
selecionado pelo usurio. Veja abaixo outro exemplo que ao usurio selecionar
um dos itens o valor da opo redireciona para uma determinada URL:
function acessa(texto){
window.location.href=texto;
}
Foi criada uma funo que possui uma varivel como argumento que
armazenar o valor de uma opo da lista de seleo.
<select name="lista"
onChange="acessa(lista.options[selectedIndex].value)">
<option value="http://www.mg.senac.br">Senac
<option value="http://www.sp.senac.br">SenacSp
</select>
J na pgina, foi criada uma lista de seleo que ao alterar o valor da varivel
lista, a funo acessa ir armazenar na sua varivel (texto) o valor da opo
selecionada da lista. Veja que foi definido como valor de cada opo na lista de
seleo um endereo especfico que ser enviado para a varivel da funo
que ser usado como hiperlink na janela do browser.
<script>
function envia(form){
form.submit();
}
</script>
<form name="form1" action="mailto:adrianolima@mg.senac.br"
onSubmit="return false">
Digite seu Nome:
<input type="text" name="nome">
<input type="submit" value="ok" onClick="envia(this.form)">
Observe que foi usado o evento onSubmit que determina a ao a ser tomada
ao enviar o formulrio, foi definido o valor return false que evita que o
formulrio seja enviado, mesmo clicando em um boto.
OBJETO LOCATION
Este objeto bem interessante por conter informaes sobre a URL da pgina.
Cada propriedade do objeto LOCATION representa uma parte diferente do
endereo. A sintaxe utilizada para este objeto possui a seguinte composio:
PROPRIEDADE
DESCRIO
Hash
Host
Href
Pathname
Determina caminho.
Determina a porta de comunicao que
Port
Protocol
Search
TIPO
URL
Web
http://www.dominio.com.br/
Local
File:///disco:/diretrio/pgina html
FTP:
ftp://ftp.local.com.br/diretrio
Mailto:
mailto:nome@dominio.com.br
UseNet
News://news.servidor.com.br
Gopher
Gopher.servidor.com.br
window.location
<HTML>
<HEAD>
<TITLE>BOTO</TITLE>
</HEAD>
<FORM NAME=form1>
<input
type=button
value=SENAC-MG
href=http://www.mg.senac.br/>
</form>
</body>
</html>
onClick=window.location.
EXERCCIOS
Crie um script que possua um campo de formulrio do tipo Texto que solicite a
digitao do nome do usurio e, quando usurio retirar o foco do campo de
texto, seja exibida uma caixa de alerta exibindo o texto:
Crie dentro de um script uma funo chamada exibe e como argumento para
esta funo, defina a varivel (texto). Desenvolva para esta rotina, uma caixa
de alerta que apresente o seguinte texto: Ol visitante texto.
Crie uma funo que determine para os campos NOME, TELEFONE e CEP
preenchimento obrigatrio.
Crie um script que possua dois campos de formulrio do tipo texto e determine
que quando o primeiro campo seja preenchido com algum valor, o segundo
campo possa refletir o que a no primeiro campo.
Crie uma rotina neste exemplo que se for digitado um texto em minsculo no
primeiro campo o segundo campo apresente o texto em maisculo.
Crie um script que possua dois campos de formulrio do tipo texto que ir
armazenar valores numricos.
Crie uma funo para este script que multiplique os valores dos dois campos
de texto e apresente seu resultado em um terceiro campo quando o mesmo
receber um foco pelo usurio.
Faa com que quando o usurio retirar o foco do campo, seja exibida uma
mensagem de alerta informando-o para no os deixarem em branco.
Crie uma rotina para o campo SEXO para que caso seja digitado valores
diferentes de MASCULINO ou FEMININO, seja exibida uma mensagem de
alerta que o valor atual no vlido. EX: valor atual no um sexo
vlido!. Esta rotina dever ocorrer quando o usurio retirar o foco do
campo.
Crie uma varivel chamada AUTENTICA() que ao clicar sobre o boto caso
o login e senha sejam diferentes de aluno e 5245, seja exibida uma caixa
de alerta informando que os dados preenchidos so invlidos.
Crie dois campos de formulrio do tipo texto. Faa com que ao selecionar o
texto digitado dentro do campo 1, seja mostrado seu contedo no campo 2.
Crie um script que seja exibida uma caixa de entrada para o usurio conforme
mostrado na figura a seguir:
Faa com que esta caixa seja acionada quando o usurio clicar sobre um boto
de formulrio. Defina como texto padro a string: http://.
Faa com que quando o usurio clicar sobre o boto OK, o navegador
redirecione para o endereo digitado na caixa.
Crie em uma pgina HTML quatros campos de formulrio do tipo radio e logo
mais atribua um evento que faa com que ao escolher um dos botes
presentes seja alterado a cor de fundo da pgina, como mostrado no exemplo
a seguir:
Azul
Vermelho
Amarelo
Cinza
PROPRIEDADES
length
MTODOS
back
EVENTOS
Nenhum
Forward
go
PROPRIEDADE
Este objeto uma propriedade do objeto window.
Este objeto como um histrico que contm informaes sobre as URLs que o
usurio esteve. Estes endereos ficam armazenados e podem ser acessados
partir dos botes VOLTAR e AVANAR do Browser. Ao acessar pginas na
Internet, o browser armazena as pginas anteriores em um histrico prprio.
Com o objeto HISTORY possvel ao usurio manipular este histrico. Sua
sintaxe formada da seguinte forma:
history.propriedade
MTODO GO
ANOTAES:
______________________________________________________
navigator.propriedade
PROPRIEDADE
appCodeName
appName
appVersion
userAgent
DESCRIO
Especifica o codinome do navegador
utilizado.
Especifica
nome
do
navegador
verso
do
navegador
utilizado.
Especifica
utilizado.
Especifica uma string do vendedor do
navegador.
<HTML>
<HEAD>
<TITLE>NAVEGADOR</TITLE>
</HEAD>
<script>
document.write("O
navegador
utilizado
"+navigator.appName+"<br>")
document.write("A verso deste navegador "+navigator.appVersion)
</script>
</body>
</html>
<script>
function openWin(){
location="view-source:"+window.location;
}
</script>
<body>
<a href="#" onClick="openWin()">Veja o cdigo desta pgina</a>
UTILIZANDO COOKIES
Quem nunca ouviu falar em cookies? Um termo muito falado para os
usurios que trabalham diretamente com internet, porm muito pouco
entendido.
compras e de repente, por algum motivo, cai sua conexo... Acontece que ele
j encheu seu carrinho com um monte de coisas. Ser que o site vai perder
esta venda? Pois, mesmo se o cliente voltar, ser que ele ter pacincia para
comprar tudo outra vez?
Graas aos cookies est tudo bem. Se o cliente retornar ao site e quiser
continuar de onde parou, os cookies lembraro o que tinha dentro do
carrinho e o cliente no precisar comear tudo de novo.
Apenas como esclarecimento, os cookies no transmitem vrus e podem ser
lidos apenas por aqueles que o colocaram no hard disk do usurio, evitando o
trfego aberto de informaes pela rede.
Outra utilidade dos cookies fornecer informao sobre nmero, freqncia e
preferncia dos usurios para que se possa ajustar a pgina de acordo com o
gosto do internauta.
Criando Cookies
O cookie uma propriedade do objeto window.document e possui uma
restrio numrica de 300 cookies no total e no mximo 20 cookies por site,
alm de um tamanho mximo de 4 KB, embora estes nmeros possam variar
conforme a verso do browser.
Quando gravamos um cookie, portanto, apenas inserimos uma varivel string
que contm os valores desejados em um arquivo cookie que associado ao
nosso documento. O exemplo simplificado abaixo nos mostra como os cookies
operam:
<script language="JavaScript">
<!-function DefineCookie(nome, valor, form){
document.cookie = nome+"="+valor+";";
form.Nome.value = "";
form.Valor.value= "";
}
function ExibeCookie(form) {
form.Resultado.value = document.cookie;
}
// -->
</script>
Note que usamos apenas 3 funes, com os objetivos de inserir valores dentro
de
um
cookie,
mostr-lo
ou
reinici-lo.
Note
que
propriedade
seja
separado
do
outro
por
um
";"
como
consta
na
funo
DefineCookie().
Deve ficar claro, portanto, que para armazenarmos vrios pares <valor,
informao> deveremos manipular a string do cookie para obtermos o valor
desejado. Para isso, usamos a funo abaixo, capaz de nos devolver o valor
corrente de um cookie:
function GetCookie(nome) {
var dc = document.cookie;
var prefixo = nome + "=";
var inicio = dc.indexOf(prefixo);
if (inicio == -1) return null;
Vamos agora fazer algo mais interessante, como contar o nmero de vezes
que um determinado usurio visitou nossa pgina. O script abaixo mostra o
uso de um boto que contar o nmero de vezes que o mesmo for clicado, o
que certamente pode ser feito no momento da pgina ser carregada, exibindo
uma mensagem do tipo "Ol, FULANO, que bom que voc voltou! J a Nsima vez que voc nos visita!"
function ContarVisitas(form) {
visitas=GetCookie("Visitas");
if(!visitas) {
visitas = 1;
form.Contador.value="Esta o seu primeiro click!"
} else {
visitas = parseInt(visitas) + 1;
form.Contador.value="Voc j clicou " + visitas + " vezes";
}
document.cookie="Visitas="+visitas+";";
}
Faa seus testes e veja como ocorre.
nome=valor;expires=data-no-formato-GMTString;path=/
nome1=valor1; nome2=valor2; nome3=valor3
Vejamos outro exemplo que ir criar dois campos de texto e um Boto. Ser
colocado o nome do cookie em um campo de texto e o valor em outro campo
de texto. Clicando sobre o boto, ser armazenado no computador do usurio
um registro com nome/valor, num arquivo com a origem da pgina.
function gravaCookie(){
var dataexp = new Date ();
dataexp.setTime (dataexp.getTime() + (24 * 60 * 60 * 1000 * 1));
//vai valer por 1 dia
setCookie
(document.fm1.nome.value,
document.fm1.valor.value,
dataexp);
}
<form name="fm1">
Entre com um nome para o cookie:<input type = "text" name =
"nome">
<p>Entre com um valor para o cookie:<input type = "text" name=
"valor">
<p><input type = "button" value = "Gravar cookie" onClick=
"gravaCookie()">
</form>
<p>Agora v para outra pgina, clicando <a
href="ck2.html">aqui</a>
Assim, atravs dos cookies, possvel manter uma continuao entre vrias
pginas de uma aplicao. Por exemplo: em pginas de uma aplicao de ecommerce com produtos que o usurio seleciona em determinada quantidade.
Estes dados so gravados como cookies. Depois lidos numa outra pgina que
tem um "carrinho de compras".
A lgica de programao destas continuidades pode ser um pouco complicada
usando JavaScript. Ns, particularmente, achamos mais fcil trabalhar (desde
que o browser aceite) com applets do Java e variveis estticas num frame
adicional.
Uma outra razo pela qual no gostamos de usar cookies que muitos
crackers usam esta estrutura de acesso ao disco do usurio, para invadir
sempre bom ento, se voc vai usar cookies, alertar o usurio de que tem
que aceit-los para a aplicao funcionar.
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
rede. Voc no ter que reconfigurar pginas personalizadas a cada vez que
visit-las, por exemplo.
Posso aceitar alguns cookies e rejeitar outros?
Sim, basta configurar seu browser para alert-lo sempre antes de aceitar um
cookie.
DEPURAO DE CDIGO
Qualquer programador que desenvolve programas com alguma linguagem
sabe que erros de cdigo so passveis de ocorrer qualquer momento na
construo do programa. Isso no depende de experincia, seja novato ou
veterano em programao. Contudo, as linguagens de programao ao
encontrar um determinado erro em uma de suas linhas, interrompe a execuo
do programa e exibe uma mensagem informando a origem e qual foi o erro
encontrado. Isto ir facilitar ao programador onde o mesmo dever corrigir o
erro.
ISOLAMENTO DE PROBLEMAS
Normalmente os erros ocorrem durante o processo de edio dos scripts,
portanto bom sempre examinar todo o cdigo ao primeiro sinal de problema.
Existem trs tipos de erros que ocorrem durante a execuo de um programa
em JavaScript:
Erros em tempo de carga (load-time)
Erros em tempo de execuo (run-time)
Erros de lgica
Observe pelo exemplo da figura anterior que ele destaca a linha onde existe o
erro, o caractere que encontra-se errado e o que est faltando, neste caso
esperado o caractere de fechamento do bloco da funo. bom saber que nem
sempre o erro poder estar onde informado, dependendo do erro, ele poder
estar localizado em outra parte do cdigo ou da linha. Para que continue
execuo do programa necessrio confirmar atravs do boto OK.
document(teste);
Sendo o correto:
document.write(teste);
Posicionamento de chaves
Toda string possui aspas. Nunca esquea delas para evitar problemas futuros.
<HTML>
<HEAD>
<TITLE>Pgina bem definida</TITLE>
</HEAD>
<BODY>
<H1>Formatando com HTML</H1>
<SCRIPT>
nome=prompt("Digite seu Nome:","");
if((nome=="")||(nome==null)){
alert("Favor Preecher o campo!");
}else{
document.write("Seja Bem Vindo"+nome);
}
</SCRIPT>
</BODY>
<HTML>
Nomes de Objetos
Outros programadores, preferem ter em mos uma cpia de todo o seu cdigo
para que se possa fazer as devidas correes. Muitas das vezes, o usurio
enxerga no papel o que ele no v na tela.
RESUMO
RESUMO GERAL DE OBJETOS JAVASCRIPT
OBJETO
DESCRIO
Link
anchor (ncora)
de
hipertexto
para
mesma
anchors[] (ncoras)
button
objeto
pertence
ao
objeto
form
(formulrio).
Uma
checkbox
caixa
de
formulrio.
verificao
Este
objeto
de
pertence
um
ao
objeto form.
Date
document
elements[] (elementos)
form (formulrio)
formulrio.
Este
objeto
pertence
ao
objeto document.
forms[] (formulrios)
frame
as
pginas
Cada
frame
divididas
no
possui
um
objeto
document.
Pertencente
ao
objeto window.
frames[]
hidden (oculto)
histoy
link
links[]
location (localizao)
Math
navigator
na
execuo
de
clculos
options[] (opes)
password (senha)
reset
boto
que
limpa
os
campos
do
Lista
de
seleo
um
formulrio.
string
de
Pertencente
do
ao
tipo
alfanumrico.
documento
que
se
encontram.
Elemento de um formulrio que cria um
submit
boto
de
envio
de
dados
em
um
window (janela)
DESCRIO
clear
close
write
documento.
Permite a incluso de texto no corpo do
writeln
DESCRIO
Quando remove o foco de um campo do
blur()
click()
focus()
select()
campo
do
tipo
text,
textarea
ou
enviado
ao
password.
submit()
Quando
servidor.
formulrio
DESCRIO
Retorna
dia
do
ms
da
data
dia
da
semana
da
data
getFullYear
getHours
getMinutes
os
especificada.
minutos
O
na
valor
hora
retornado
getMonth
retornado
corresponde
um
getSeconds
os
segundos
especificada.
valor
da
data
retornado
getTime
de
janeiro
de
1970
uma
data
especfica.
getTimezoneOffset
parse
setDate
setHours
hora
para
uma
data
setMinutes
os
minutos
para
data
setMonth
ms
para
data
setSeconds
data
especificada,
sendo
um
inteiro
entre 0 e 59.
Estabelece o valor do objeto date, sendo
setTime
setYear
toGMTString
toLocaleString
toString
data especificada
Converte
UTC
uma
data
delimitada
por
DESCRIO
Representa
Back
URL
visitada
anteriormente.
Representa a URL que estava antes de
Forward
voltar.
Representa uma URL que esteja na
Go
Asin
Atan
Ceil
Cos
Eval
DESCRIO
Retorna o valor absoluto de um nmero.
Retorna o arco cosseno de um nmero,
em radianos.
Retorna o arco seno de um nmero,
radianos.
Retorna o arco tangente de um nmero,
em radianos.
Retorna o menor inteiro maior ou igual a
um nmero.
Retorna o cosseno de um nmero.
Calcula o contedo de uma expresso.
EVAL uma funo.
Exp1
E.
Retorna o maior inteiro menor ou igual
Floor
ao nmero.
Determina se um valor um nmero ou
isNAN
no.
Retorna o logartmo natural de um
Log
Max(num1,num2)
Min(num1,num2)
Pow(base,expoente)
Random()
1.
Retorna o valor arrendondado de um
Round
inteiro.
Sin
Sqrt
Tan
Big
Blink
Bold
DESCRIO
Cria uma ncora HTML que utilizada
como destino de um link de hipertexto.
Mostra uma string em fonte maior.
Similar ao tag <BIG>.
Apresenta uma string piscante. Similar
ao tag <BLINK>.
Apresenta a string em negrito. Similar
ao tag <B>.
CharAt(ndice)
Concat(s1,s2,s3...)
Fixed
Retorna
caractere
no
ndice
especificado.
Concatena
vrias
strings,
retornando
string
em
fonte
Fontcolor(cor)
especificada.
Similar
ao
tag
<FONT
COLOR=cor>.
Apresenta
Fontsize(tamanho)
determinado.
string
Similar
com
ao
tamanho
tag
<FONT
SIZE=tamanho>.
Retorna a posio dentro da string onde
IndexOf
aparece
em
primeiro
texto
especificado.
Ex.: string.indexOf(valor,[ndice]).
Italics
LastindexOf
Link(href)
Slice (incio,fim)
Small
sub
Apresenta
sup
fonte
em
formato
substring(indexA,indexB)
toLowerCase
string
em
caracteres
string
em
caracteres
minsculos.
Converte
toUpperCase
maisculos.
DESCRIO
Exibe uma caixa de dilogo com o boto
alert
OK.
Exibe uma caixa de dilogo com os
confirm
botes OK e CANCELAR.
Exibe uma caixa de dilogo solicitando a
prompt
DESCRIO
Limpa a janela.
Limpa um contador de tempo definido
clearTimeout
anteriormente
com
setTimeout.
close
open
setTimeout
mtodo