Você está na página 1de 234

JavaScript Aplicaes

Interativas para a Web

ADRIANO GOMES LIMA

BELO HORIZONTE
2006

INTRODUO A LINGUAGEM JAVASCRIPT............................................9


JAVA E JAVASCRIPT .............................................................................. 9
VBSCRIPT E JAVASCRIPT ..................................................................... 10
AS VERSES DO JAVASCRIPT .............................................................. 10
COMPATIBILIDADE ENTRE BROWSERS ................................................. 11
GUIA DE REFERNCIA NA INTERNET ..................................................... 11
ORIENTAO A OBJETOS .................................................................... 11
MANIPULAO DE OBJETO .................................................................. 13
PROPRIEDADES DE OBJETOS ............................................................... 14
MTODOS DE OBJETOS ....................................................................... 14
EVENTOS........................................................................................... 15
MANIPULADORES DE EVENTOS UTILIZADOS.......................................... 16
VARIVEIS ........................................................................................ 19
NOMES DE VARIVEIS ........................................................................ 19
LITERAIS ........................................................................................... 22
INTEIROS (INTEGER) .......................................................................... 23
PONTO FLUTUANTE............................................................................. 23
BOOLEANOS ...................................................................................... 23
LITERAIS STRING ............................................................................... 23
CARACTERES ESPECIAIS ..................................................................... 24
EXPRESSES ..................................................................................... 24
OPERADORES..................................................................................... 25
OPERADORES DE INCREMENTO E DECREMENTO .................................... 26
OPERADORES RELACIONAIS ................................................................ 28
OPERADORES RELACIONAIS ................................................................ 28
OPERADORES LGICOS....................................................................... 28
OPERADOR DE CONCATENAO DE STRING .......................................... 29
DECLARAES ....................................................................................30
OPERADOR NEW................................................................................. 30
PALAVRA-CHAVE THIS......................................................................... 30
BREAK............................................................................................... 30

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

MTODO FONTSIZE ............................................................................ 83


MTODO SUB ..................................................................................... 83
MTODO SUP ..................................................................................... 83
MTODO charAT ................................................................................. 84
MTODO INDEXOF .............................................................................. 84
MTODO LASTINDEXOF....................................................................... 85
MTODO LINK .................................................................................... 86
MTODO REPLACE .............................................................................. 86
MTODO SUBSTRING .......................................................................... 87
MTODO TOLOWERCASE ..................................................................... 88
MTODO TOUPPERCASE ...................................................................... 88
OBJETO IMAGE ...................................................................................89
MTODOS DE INTERFACE COM O USURIO.........................................92
MTODO ALERT .................................................................................. 92
MTODO CONFIRM ............................................................................. 93
MTODO PROMPT ............................................................................... 94
OBJETO WINDOW ...............................................................................96
PROPRIEDADES DO OBJETO WINDOW/FRAME........................................ 96
WINDOW.STATUS E DEFAULTSTATUS ................................................... 97
MTODO OPEN ................................................................................... 97
MTODO CLOSE ................................................................................. 98
MTODO SETTIMEOUT ........................................................................ 98
MTODO CLEARTIMEOUT................................................................... 100
TRABALHANDO COM JANELAS .......................................................... 101
ABRINDO PGINAS EM FULLSCREEN (Tela Cheia)................................. 110
O OBJETO MATH ............................................................................... 111
PROPRIEDADES DE CLCULO DO OBJETO MATH................................... 111
MTODOS DO OBJETO MATH ............................................................. 112
ABS ................................................................................................ 112
ACOS .............................................................................................. 112
ASIN ............................................................................................... 113

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

EXERCCIOS: ................................................................................... 157


MANIPULANDO FRAMES ................................................................... 161
HIERARQUIA FRAMESET WINDOW ...................................................... 163
OBJETO FORM................................................................................... 170
PROPRIEDADES DO OBJETO FORMS.................................................... 170
MTODOS DO OBJETO FORM ............................................................. 172
ELEMENTOS DE UM FORMULRIO ....................................................... 172
OBJETO TEXT ................................................................................... 173
MANIPULADORES DE EVENTO PARA FORMULRIOS .............................. 173
OBJETO PASSWORD.......................................................................... 176
OBJETO TEXTAREA ........................................................................... 176
OBJETO BUTTON .............................................................................. 177
OBJETO SUBMIT ............................................................................... 178
OBJETO RESET ................................................................................. 179
OBJETO CHECKBOX (Caixa de Verificao)........................................... 179
MANIPULADORES DE EVENTO ............................................................ 181
OBJETO RADIO................................................................................. 182
EVITANDO O USO DA TECLA ENTER .................................................... 187
OBJETO LOCATION ........................................................................... 189
PROPRIEDADES DO OBJETO LOCATION ............................................... 190
EXERCCIOS .................................................................................... 192
UTILIZANDO O OBJETO HISTORY ....................................................... 203
PROPRIEDADE.................................................................................. 203
MTODOS BACK E FORWARD ............................................................. 203
UTILIZANDO O OBJETO NAVIGATOR ................................................... 205
UTILIZANDO O OBJETO NAVIGATOR ................................................... 205
PROPRIEDADES DO OBJETO NAVIGATOR............................................. 205
ACESSANDO CDIGO-FONTE A PARTIR DE UM LINK ............................. 207
UTILIZANDO COOKIES ..................................................................... 209
Criando Cookies ............................................................................... 210
DEPURAO DE CDIGO .................................................................. 219

ISOLAMENTO DE PROBLEMAS ............................................................ 219


ERROS EM TEMPO DE CARREGAMENTO (Load-Time) ............................. 220
ERROS EM TEMPO DE EXECUO (Run-Time) ...................................... 221
ERROS DE LGICA (Logic Errors) ....................................................... 221
ERROS COMUNS EXISTENTES ............................................................ 222
ANALISANDO A ORIGEM DOS ERROS .................................................. 223
OUTROS ERROS COMUNS .................................................................. 224
RESUMO GERAL DE OBJETOS JAVASCRIPT ....................................... 225
RESUMO GERAL DE MTODOS JAVASCRIPT ...................................... 228
MTODOS DO OBJETO DOCUMENT ..................................................... 228
MTODOS DO OBJETO FORM ............................................................. 228
MTODOS DO OBJETO DATE .............................................................. 229
MTODOS DO OBJETO HISTORY......................................................... 231
MTODOS DO OBJETO MATH ............................................................. 231
MTODOS DO OBJETO STRING........................................................... 232
MTODOS DE INTERFACE COM O USURIO ......................................... 234
MTODOS DO OBJETO WINDOW ........................................................ 234

INTRODUO A LINGUAGEM JAVASCRIPT


Desenvolvida pela NETSCAPE, a linguagem JavaScript foi criada para trabalhar
com aplicaes interativas nas pginas HTML. Esta linguagem teve sua
primeira verso desenvolvida para o browser Netscape Navigator 2.0 e em
seguida, atribudo tambm ao Internet Explorer 3.0. A princpio, chamado
de LiveScript, a Netscape aps o sucesso inicial desta linguagem, recebe uma
colaborao considervel da Sun Microsystems, empresa que h longo tempo
vem se dedicando ao desenvolvimento de aplicaes para a Internet, como
talvez a linguagem mais poderosa da rede, o Java, uma linguagem que requer
um profundo conhecimento de programao e de seu kit de desenvolvimento,
bem diferente do JavaScript que no necessita de tanto. Aps esta
colaborao, podemos dizer que o JavaScript uma linguagem compatvel
com

linguagem

Java,

por

esta

razo,

semelhana

dos

nomes

JavaScript.

Conhecida tambm como uma extenso da linguagem HTML (Linguagem de


Marcao de Hipertexto), os comandos JavaScript so embutidos nas pginas
HTML e interpretados pelo Browser, ou seja, o JavaScript no possui nenhum
procedimento de compilao.

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

linguagem HTML para controlar dinamicamente o comportamento de objetos


nas pginas.

nica limitao da linguagem JavaScript que ela suporta poucos tipos de


dados, e implementa apenas alguns conceitos de orientao a objetos, ao
contrrio da linguagem Java.

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.

Observe pela tabela a seguir, a relao das verses existentes do JavaScript e


a sua aceitao pelos navegadores mais utilizados:

Verso do JAVASCRIPT:

SUPORTADA PELO:

1.0

Netscape 2.0 / Explorer 3.0

1.1

Netscape 3.0 / Explorer 4.0

1.2

Netscape 4.0 e 4.5 / Explorer 4.0

1.3

Netscape 4.6 e 4.7 / Explorer 5.0

1.4

Internet Explorer 5

1.5

Netscape 6.0 / Explorer 5.5

A linguagem JavaScript assim como a linguagem HTML submetida uma


norma internacional, o ECMA que originou a especificao ECMA-262, que
determina o padro para a linguagem JavaScript, tambm conhecida como
ECMAScript.

COMPATIBILIDADE ENTRE BROWSERS


importante que o usurio evite usar comandos JavaScript que foram
inseridos nas ltimas verses, a no ser que o usurio saiba anteriormente
qual o browser so executados. claro que existem maneiras que garantem
que

um

determinado

determinado

browser,

comando
facilitando

do

JavaScript

ainda

mais

seja

que

suas

executado
pginas

em

sejam

compatveis com diversas verses de browsers.

Os comandos mais utilizados dentro da linguagem JavaScript so os que fazem


parte da sua primeira verso, j aqueles que fazem o tratamento de objetos
iro variar de acordo com sua verso.

GUIA DE REFERNCIA NA INTERNET


A NETSCAPE, possui um enorme guia para o JavaScript na Internet. Para ter
acesso a este guia basta acessar o seguinte endereo:

http://developer.netscape.com/  (em ingls)


ORIENTAO A OBJETOS
Diferente da Linguagem HTML, a linguagem JavaScript corresponde a
programao orientada a objetos, isto significa que todos os elementos de uma
pgina da Web so tratados como objetos. Estes objetos so agrupados de
acordo com seu tipo ou finalidade. Dentro da linguagem JavaScript, so
criados automaticamente objetos que permitem que o usurio possa criar
novos objetos de acordo com sua convenincia. Ao ser carregada uma pgina
da Web, criado um determinado nmero de objetos JavaScript, com

propriedades e valores prprios que so ajustados pelo contedo da prpria


pgina. Todos eles seguem uma hierarquia que reflete toda a estrutura de uma
pgina HMTL. A linguagem JavaScript pode ser utilizada para a criao de
scripts tanto do lado cliente como do lado servidor. Seguindo a hierarquia de
objetos da linguagem JavaScript, so criados os seguintes objetos ao ser
carregada uma pgina:
window: O objecto mais acima na hierarquia, contm propriedades que se
aplicam a toda a janela. H tambm um objecto desta classe para todas as
"sub-janelas" de um documento com frames
location: Contm as propriedades da URL actual.
history: Contm as propriedades das URLs visitadas anteriormente.
document: Contm as propriedades do documento contido na janela, tais
como o seu contedo, ttulo, cores, etc

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:

Hierarquia dos Objetos do JavaScript


BROWSER (navegador)

Window/
Math

Date

Frame

String

Navigator

Document

Link

Select

Form

Button

Text

Submit

TextArea

Anchor

Radio

Checkbox

Conforme visto no organograma apresentado, observe que existem vrios


objetos e muitos deles pertencem outros, sendo chamados ento de
propriedades. Veja pelo exemplo do objeto FORM que possui diversas
propriedades,
DOCUMENT.

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

propriamente ditos enquanto outras no. Um exemplo disto, o objeto form


(formulrio) que uma propriedade do objeto document (documento),
conforme

mostrado

no

organograma

apresentado

anteriormente.

propriedade de ttulo da pgina (title), pertencente ao objeto document no


havendo nenhuma propriedade sobre ela. Concluindo, podemos dizer que a
propriedade form do objeto document um objeto-filho e o objeto
document o objeto-pai. Em geral, as propriedades podem conter valores
(string, nmeros, entre outros tipos). A utilizao de propriedades se d
acompanhada de seu objeto sendo separados por um ponto apenas. Veja
abaixo a sintaxe de utilizao de propriedades:

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

alterar o valor de uma propriedade ou executar uma tarefa especfica. Veja a


sintaxe de utilizao dos mtodos:

nomeObjeto.mtodo(argumento)

Na sintaxe apresentada, nomeObjeto faz referncia ao objeto a ser utilizado e


o qual sofrer uma ao do mtodo, j mtodo o nome de identificao do
mtodo usado e entre parnteses (argumento) a expresso ou valor
opcional que ser usada para alterar sobre o objeto.

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.

Sua utilizao se d como atributos da linguagem HTML, ou seja dentro dos


prprios Tags HTML. Sua sintaxe tem a seguinte formao:

<TAG nomeEvento="Instrues JavaScript">

Onde apresentado TAG uma instruo da linguagem HTML.

Onde evento o nome do evento gerado da linguagem JavaScript.

Onde Instrues JavaScript sero as instrues JavaScript serem


executadas. Elas estaro sempre entre aspas.

Caso haja mais de um comando JavaScript a ser executado para o mesmo


evento estes devero estar separados por ponto e vrgula (;), conforme
mostrado no exemplo a seguir:

<TAG nomeEvento="JavaScript1;JavaScript2;JavaScript3">

MANIPULADORES DE EVENTOS UTILIZADOS

EVENTO

MANIPULADOR

DESCRIO
Ocorre

blur

onBlur

quando

usurio

retira o foco de um objeto


de formulrio.
Ocorre

change

onChange

quando

usurio

muda o valor de um objeto


de formulrio.

click

onClick

focus

onFocus

load

onLoad

unload

onUnload

Ocorre

quando

usurio

clica sobre o objeto.


Ocorre

quando

usurio

usurio

usurio

focaliza o objeto.
Ocorre

quando

carrega a pgina.
Ocorre

quando

abandona a pgina.
Ocorre quando o ponteiro

mouseOver

onMouseOver

do mouse passa sobre um


link

ou

ncora.

Vlidos

apenas para hiperlinks.


Ocorre
select

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

Ocorre quando o boto do


mouse solto.
Ocorre quando uma tecla
segurada.
Ocorre quando uma tecla
pressionada.
Ocorre quando uma tecla
solta.

Vejamos a utilizao dos eventos dentro de alguns TAGs HTML, sem a


necessidade de criarmos rotinas separadas para os mesmos. Vejamos o
exemplo a seguir:

<HTML>
<HEAD>
<TITLE>Manipuladores de Eventos</TITLE>
</HEAD>
<BODY onLoad="defaultStatus=('Seja Bem Vindo!!!')">

No exemplo apresentado anteriormente, foi usado o evento onLoad que


ocorre quando a pgina carregada. Neste evendo foi usada a instruo
defaultStatus que exibe a mensagem SEJA BEM VINDO!!! na barra de
status do navegador.
Outro exemplo que pode ser aplicado atravs de um evento, utilizar o evento
onUnLoad que executar alguma ao quando o usurio sair de sua pgina,
baseado no exemplo anterior, inclua no corpo de sua pgina <BODY> a
seguinte linha abaixo:

<BODY onLoad="defaultStatus=('Seja Bem Vindo!!!')"


onUnLoad="alert('Obrigado pela Visita')">

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.

O contedo de uma varivel pode ser simplesmente atribudo ou vir de um


resultado de uma ao dada de uma expresso ou funo. Veja alguns
exemplos.

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

Na linguagem JavaScript existem dois tipos de variveis que so:

GLOBAIS  usadas em qualquer parte de uma aplicao.

LOCAIS  usadas somente na rotina que foi desenvolvida.

Para criar variveis locais, necessrio que o usurio utilize a palavra-chave


var. Veja a declarao de uma varivel local:

var nome=ADRIANO LIMA


var soma=2002-25

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.

Caso o usurio declare uma varivel dentro de uma funo atravs da


instruo var, esta varivel passa a ser apenas local, ou seja, so utilizadas
apenas para aquela funo onde foi declarada.

bom saber que, as variveis globais ficam na memria mesmo aps a


execuo do script, estas variveis somente so liberadas da memria quando
o documento descarregado.

As variveis podem ser declaradas tambm separadas por vrgula, da seguinte


maneira:

var nome, endereco, telefone;

ou

var nome;
var endereco;
var telefone;

Outro

exemplo prtico de atribuio, atribuir um mesmo valor a mais de

uma varivel, da seguinte maneira:

var campo1 = campo2 = campo3 = 5

No exemplo anterior, foi atribudo o nmero 5 nas variveis campo1, campo2


e campo3.

Veja pelo exemplo do cdigo abaixo como manipular variveis atravs da


linguagem JavaScript:

<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:

document.write("Resultado do clculo ",(10*2)+valor,<BR>)


document.write("A soma de 5+2 : ",5+2)

O resultado iria apresentar os valores dos clculos um abaixo do outro, veja


agora o mesmo exemplo colocando o resultado em negrito atravs do tag
HTML <B>.

document.write("A soma de 5+2 : ","<b>",5+2,"</b>")

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

Nmero de ponto flutuante.

Adriano Gomes Lima

Texto.

Existem vrios tipos de literais, eis os existentes:

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

Insere uma quebra de linha.

\t

Insere uma tabulao.

\r

Insere um retorno.

\f

Insere um caractere de barra.

\t

Tabulao.

Apstrofo.

Aspas.

\\

Barra Invertida.
Caractere

\XXX

representado

pela

codificao Latin-1. Exemplo \251


representa o caractere de copyright .

OBS: As letras dos operadores devem apresentar-se em letras minsculas.

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

Neste exemplo fora atribudo o valor nmero 5 varivel chamada numero.


Esta atribuio de valor pode ser considerada uma expresso. Veja outro
exemplo de expresso:

numero2=5*2

Neste exemplo foi atribudo o resultado da expresso 5*2 varivel chamada


numero2 que neste caso 10. Vejamos outro exemplo em outra situao:

If numero+numero2 > 10

J neste exemplo foi usado a instruo condicional if que testa o resultado da


expresso numero+numero2 e em seguida o compara com o nmero 10. Se
o resultado da expresso for superior 10, a mesma retornar o valor
booleano TRUE, em caso contrrio o valor passa a ser FALSE.

OPERADORES

Os operadores so utilizados em expresses para comparar seus contedos. O


operador mais utilizado em uma linguagem de programao o de atribuio
conhecido como sinal de igualdade (=). Veja abaixo alguns exemplos de sua
utilizao:

X=50
X=30*5/2
X=Y

Alm deste caractere de atribuio, possvel a utilizao de outros


operadores como mostrado seguir:

x += y
x -= y
x *= y
x /= y
x %=y

Analisando os operadores apresentados, podemos defini-los de outra maneira,


conforme mostrado abaixo:

x = x + y
x = x y
x = x * y
x = x / y
x = x % y

Veja a relao dos operadores que so utilizados na linguagem JavaScript:

ARITMTICOS
Operador

Descrio

Adio

Subtrao

Multiplicao

Diviso

Mdulo

OBS: O operador Mdulo retorna o resto da diviso do operandos um e dois.

OPERADORES DE INCREMENTO E DECREMENTO


Alm dos operadores apresentados anteriormente, existe outro tipo de
operador que tm a tarefa de aumentar e/ou diminuir o valor do operando. O

operador incremental representado pelo duplo sinal de adio ++, j o


operador decremental representado pelo duplo sinal de subtrao --". Veja
a seguir alguns exemplos:

varivel++ ou ++varivel
varivel-- ou --variavel

Sempre que o operador for colocado antes do operando, incrementado ou


decrementado o operando e o valor atualizado. Em caso contrrio, ser
retornado o valor do operando para depois ocorrer o incremento ou
decremento. Observe um exemplo:

x = 10
A = x++

Neste exemplo, foi atribudo varivel x o valor numrico 10, e em seguida


atribudo varivel A

o valor de x incrementado, neste caso a varivel A

recebe o valor numrico 11. analisando o caso contrrio:

x = 10
A = ++x

J neste caso x incrementado e o novo valor atribudo em A. O mesmo


ocorre para o operador de decremento.
ANOTAES:

______________________________________________________

______________________________________________________

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

===

Igual e mesmo tipo

!=

Diferente

Somente ser retornado TRUE se a comparao satisfizer a condio.

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

O operador && retorna TRUE somente se todas as expresses forem


verdadeiras.
O

operador

||

retorna

TRUE

se

uma

das

expresses

verdadeiras. Se as duas forem falsas, ser retornado FALSE.

forem

O operador ! nega uma expresso. Se for verdadeira, ser retornado


FALSE. Se for falsa, ser retornado o valor TRUE.

OPERADOR DE CONCATENAO DE STRING


Para concatenar duas ou mais strings, basta utilizar o sinal de adio, veja um
exemplo:

A = ADRIANO
B = LIMA

C=A+B

D=Senac+Minas

DECLARAES
Vejamos agora uma relao das declaraes existentes na

linguagem

JavaScript que so utilizadas na criao da estrutura lgica de um programa.


Normalmente estas declaraes so atribudas s tomadas de decises, laos
repetitivos e funes.

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

JavaScript faz o uso de comentrios que iro permitir ao programador inserir


anotaes referentes ao

seu desenvolvimento

ou explicar

determinada

operao de seu script. Estes comentrios na execuo do script, so


ignorados pelo interpretador (browser). Veja a sintaxe do uso de comentrios
na linguagem JavaScript:

// Comentrio de uma linha de texto.

/* Comentrio de vrias linhas de texto,


continuao do comentrio de vrias linhas */

Conforme visto no exemplo anterior, quando o comentrio for um pequeno


texto que ir ocupar uma linha o usurio far o uso da instruo // caso o
mesmo ir compor mais linhas de texto no incio do comentrio utiliza-se a
instruo /*, e aps a ltima linha de texto encerra-se com a instruo
*/.

Alm destes comentrios recomendvel que utilize antes de iniciar um script


o Tag de comentrio da Linguagem HTML, que ir permitir que navegadores j
ultrapassados no sentido de no reconhecer as instrues JavaScript, possam
ignorar estas instrues evitando erros futuros. A sintaxe de utilizao do Tag
de comentrio em um script formada da seguinte forma:

<!--Inicio do JavaScript
Instrues
//Trmino do JavaScript -->

Observe que no final do script, foi definido um comentrio de uma linha de


texto no JavaScript, encerrando-se com o Tag de Fechamento da Linguagem

HTML. O comentrio do JavaScript somente foi necessrio em razo de haver


um texto de comentrio, caso contrrio, bastaria o Tag de Comentrio do
HTML.

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.

Quando se desenvolve scripts em uma pgina HTML, necessrio que o


usurio

os

delimite

atravs

do

Tag

<SCRIPT>

ou

utilize-os

como

manipuladores de eventos atravs de alguns Tags HTML. Outra maneira


criar um arquivo externo para ser chamado partir de uma pgina HTML. Este
arquivo separado dever possuir a extenso .JS.

DESENVOLVENDO SCRIPTS COM O TAG <SCRIPT>


Com o Tag <SCRIPT> possvel ao usurio incorporar seus scripts dentro de
uma pgina HTML. Veja a sintaxe de utilizao deste Tag:

<SCRIPT>
instrues do JavaScript...
</SCRIPT>

Em alguns casos possvel observar o tag SCRIPT com o seguinte atributo:

<SCRIPT LANGUAGE=JAVASCRIPT>
instrues do JavaScript...
</SCRIPT>

O atributo LANGUAGE de uso opcional, este atributo ir especificar a verso


da linguagem JavaScript utilizado. A sua omisso assume qualquer instruo
do JavaScript independente da sua verso.

Se for especificada verso conforme exemplo abaixo, apenas os browsers


que sejam compatveis com a verso especfica podero executar este script:

<SCRIPT LANGUAGE=JAVASCRIPT1.3>
instrues do JavaScript...
</SCRIPT>

DESENVOLVENDO SCRIPTS ATRAVS DE UM ARQUIVO EXTERNO


As instrues da linguagem JavaScript podem ser executadas de um arquivo
externo. Com isto, o usurio no precisar repetir instrues vrias vezes, isto,
facilita a manuteno do cdigo desenvolvido e a reutilizao do mesmo.

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.

Para que uma pgina HTML possa processar as instrues desenvolvidas no


arquivo externo, basta utilizar o seguinte parmetro na pgina HTML:

<SCRIPT LANGUAGE=JAVASCRIPT SRC=NomeArquivo.js></SCRIPT>


Veja pela figura abaixo o cone que representa um arquivo externo com
instrues da linguagem JavaScript:

Conforme dito anteriomente, a linguagem JavaScript interpretada pelo


browser e que seu cdigo embutido dentro do cdigo HTML entre os tags
<SCRIPT> e </SCRIPT> ou atravs de um arquivo externo que possua a
extenso .JS. Observe o uso de algumas aes que o JavaScript pode
desenvolver atravs da figura a seguir:

Caixa de dilogo criada por uma instruo da Linguagem JavaScript.

Texto inserido no corpo de uma pgina atravs de instrues da Linguagem


JavaScript.

NOTIFICAO DE ERROS
Alm dos comentrios, que iro evitar que os navegadores mais antigos
exibam

algum

cdigo

JavaScript

que

no

reconhecido,

durante

desenvolvimento e execuo do cdigo o programador precisar saber a


origem de qualquer erro existente no seu programa. Para isto, possvel
configurar o browser para exibir uma notificao de erro de script durante seus
testes.

Utilizando o Internet Explorer o usurio poder acessar o menu Ferramentas


e em seguida, Opes da Internet e logo mais acessar a guia Avanada e
selecionar a opo Exibir Notificao sobre cada erro de script conforme
mostrado na figura a seguir:

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:

document.write("Texto inserido com instrues JavaScript");

Atravs do exemplo apresentado anteriormente foi dado como argumento do


mtodo write a string apresentada, determinando-o a se apresentar no corpo
do documento, observe pelo exemplo da figura 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:

window.alert("Meu Primeiro Script");

ou

alert("Meu Primeiro Script");

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??");

COMANDOS CONDICIONAIS E REPETIO


INSTRUO WHILE
A instruo while realiza uma ao enquanto determinada condio for
satisfeita. Sua sintaxe bsica :

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
}

O incio determina o valor inicial do lao for. Normalmente 0 ou 1, porm


poder ser especificado qualquer outro valor. O valor especificado atribudo
em uma varivel, por exemplo i=0, count=1.

A condio determina a expresso que ir controlar o nmero de repeties


do lao. Enquanto esta expresso for verdadeira, o lao continuar, caso o lao
seja falso, o lao terminar. Por exemplo: i<20. Enquanto o valor de i for
menor que 20, a condio verdadeira.

O incremento determina como o lao ir contar, de 1 em 1, 2 em 2, 5 em 5,


10 em 10, enfim. Exemplo: i++. Ser aumentado o valor da varivel i a cada
repetio. Diferente de todas as outras linguagens, em JavaScript, a instruo
for, utiliza ponto e vrgula para separar os argumentos ao invs de vrgula.

Vejamos um exemplo prtico de utilizao do lao for que conta valores de 1


at 10, acrescentando um valor de cada vez:

<script>
for (i=1 ; i<=10 ; i++){
document.write("nmero: "+ i +"<br>");
}
</script>

i a varivel utilizada para armazenar o contador do lao for. Logo mais, o


lao inicia com 1 e continua at 10. A expresso condicional i<10 (i menor
que 10).
Enquanto a expresso condicional for verdadeira, o lao for continua. No
incremento, a cada repetio do lao ser adicionado a varivel i mais 1. Veja
outro exemplo:

<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

propriedades do objeto usado. Sua sintaxe formada da seguinte maneira:

as

for (varivel in objeto){


instrues;
}

Veja pelo exemplo a seguir, o uso do lao for...in para determinar as


propriedades do objeto navigator que contm informaes sobre o browser.
Ao listar todas as propriedades do objeto, o lao automaticamente se
encerrar:

for (teste in document){


alert(teste);
}

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
}

Veja um exemplo da utilizao da instruo if:

<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.

Alm dos mtodos condicionais apresentados, a linguagem JavaScript suporta


um mtodo alternativo para criar expresses condicionais. Este mtodo j
suportado em outras linguagens de programao permite ao usurio construir
um exemplo prtico e simples para sua utilizao. Sua sintaxe bsica tem a
seguinte formao:

(condio) ? Valor verdadeiro : Valor falso;

Onde condio, a expresso ser avaliada.

Onde Valor verdadeiro, especifica a ao que ocorrer se a condio for


verdadeira.
Onde Valor falso, especifica a ao que ocorrer caso a condio seja falsa.

Veja abaixo um exemplo de utilizao deste tipo de expresso condicional:

exemplo=prompt("Digite seu nome ou clique em Cancelar.","");


(exemplo==null) ? alert("O usurio Cancelou!") : alert("O usurio
digitou: "+exemplo);

Assim como na maioria das linguagens de programao a instruo if no est


limitada a utilizao apenas do sinal de igualdade (==). O usurio poder
fazer diferentes tipos de testes lgicos como se os valores so diferentes,
maior que ou menor que, entre outros.

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>

Utilizando a instruo with o usurio ir determinar os valores que deseja


economizando tempo na aplicao. Observe como ficaria estas instrues
aplicadas com a instruo with:

<script>
with (Math){
alert(PI);
alert(round(1234.5678));
}
</script>

Veja pelo exemplo anterior, que o usurio no necessitou utilizar o objeto


Math vrias vezes.

Outra questo, que a instruo with no utilizada somente com o objeto


Math. Ela poder ser usada com a maioria dos outros objetos da linguagem
JavaScript.

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
}

Se a funo possuir argumentos, estes devero estar colocados entre


parnteses aps o nome da funo. O corpo da funo dever ser colocado
entre chaves que indicaro o incio do bloco de instrues e o fim do bloco de
instrues.

Normalmente, as funes so definidas dentro do cabealho da pgina HTML


representados pelo tag <HEAD>. Com isto, todas as funes so carregadas
assim que a pgina carregada, bem antes que o usurio pense em executar
alguma ao.

Vejamos um exemplo simples de uma funo que exibe uma mensagem na


tela:

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();

padro da linguagem JavaScript que ao encontrar a chamada de uma funo,


ele desvia para as instrues respectivas desta funo e ao termin-la, volta
para o primeiro cdigo aps a chamada da funo.

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>

Neste exemplo, foi definido a chamada da funo atravs do evento onClick


que processado assim que o usurio d um clique sobre o boto que
executar a funo.

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>

Em algumas situaes o usurio talvez queira retornar um valor de uma


funo. Para isto, basta fazer o uso da instruo return mais o valor que
queira retornar. Vejamos um exemplo tpico do uso de uma funo que ir
retornar um determinado valor. Observe:

<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:

<input type="text" name="campo1" onBlur="teste()">


</form>

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:

Digite seu Endereo:

<input type="text" name="campo2" onChange="alert('testando')">

EVENTO ONCLICK
O evento onClick utilizado em links, botes, radio, checkbox, reset. Vejamos
um exemplo de sua utilizao em um boto de formulrio:

<input type="button" name="botao" value="Envia"


onClick="alert('Obrigado pelos Dados')">

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:

Digite seu Nome:


<input type="text" name="campo1" onBlur="teste()"
onFocus= "alert ('Digite seu nome completo')">

Digite seu Endereo:


<input

type="text"

name="campo2"

onChange="alert('testando')"

onFocus="this.value='R. Castelo da Beira'">

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.

Veja abaixo um exemplo de exibio de uma mensagem de alerta assim que a


pgina carregada:

<body onLoad="alert('Seja Bem Vindo')">

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:

<body onLoad="alert('Seja Bem Vindo')"


onUnLoad="alert('Obrigado pela visita!')">

EVENTO ONMOUSEOVER

Com o evento onMouseOver o usurio criar uma ao que ser acionada


sempre que o ponteiro do mouse se mover sobre um link. Veja um exemplo de
sua utilizao:

<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.

Avaliando o exemplo anterior, vamos determinar que ao ponteiro do mouse


sair do hiperlink, a mensagem da barra de status ser omitida. Veja pelo
exemplo a seguir:

<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

para a barra de Status';return true" onMouseOut=defaultStatus=""


onMouseDown="alert('testando')">SENAC</A>

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.

Vejamos um exemplo de sua utilizao:

<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:

<form name="form1" onSubmit="alert('Formulrio Enviado')">

Com este evento o usurio poder verificar a validao de dados, como por
exemplo se todos os campos do formulrio esto preenchidos.

Veja agora um exemplo desta utilizao, caso o campo especfico esteja em


branco o usurio receber uma mensagem informando que o campo no foi
preenchido:
<script>
<!--

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">

FUNES DA LINGUAGEM JAVASCRIPT


As funes utilizadas em JavaScript so embutidas no ncleo da linguagem.
Estas funes no pertencem nenhum objeto, elas funcionam com variveis
nmero e as que no so objetos. Com estas funes no necessrio a
declarao de um objeto-pai para us-las, sendo bem diferentes dos mtodos
como por exemplo document.write. Write o mtodo pertencente ao objeto
document.

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);

Criaremos um exemplo que ir avaliar uma expresso que contm nmeros,


operadores e strings. Neste exemplo formaremos um clculo que ser
representado como string. Com o uso da funo eval, ser testado todos os
argumentos da funo fazendo a compreenso de todos os elementos
presentes:

<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);

Veja a seguir um exemplo da utilizao da funo parseFloat.

<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);

Onde apresentado radix, um inteiro que representa a base do valor de


retorno. No exemplo a seguir convertido um valor string em seu valor
numrico equivalente:
<script>
valor=parseInt("123.456");
alert(valor);
</script>

atravs do parmetro radix, possvel a converso de um nmero de uma


base para decimal, j no caso contrrio isto no possvel. Veja um exemplo
de sua utilizao:

valor=parseInt("ff",16);

//Converso hexadecimal, retorna 255

valor=parseInt("0xff",16);

//Converso hexadecimal, retorna 255

valor=parseInt("1111",2);

//Converso binrio,

retorna 15

valor=parseInt("765",8);

//Converso octal,

retorna 501

Vejamos os valores de cada base existente:

 Binrio.

 Octal.

10

 Decimal.

16

 Hexadecimal.

A omisso do parmetro radix, a linguagem JavaScript assume que o valor


definido est no formato decimal.

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

Atravs da funo print(), o usurio poder executar a funo de imprimir


evitando caminhos longos para isto ou facilitar ao usurio iniciante em
informtica, abaixo segue um exemplo simples:

<P onMouseDown='self.print()'">Imprimir Documento</p>

Neste exemplo foi usado o evento onMouseDown que avisa ao navegador


para imprimir o documento atual quando o usurio clicar sobre o texto de
pargrafo.

ADICIONAR AO FAVORITOS

Segue a seguir, um exemplo de insero de uma URL pasta dos Favoritos.


Veja sua utilizao e estude sua lgica, observe que bem simples:

<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>

TEXTO NA BARRA DE STATUS EM MOVIMENTO

<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()>

TEXTO EM MOVIMENTO EM UM CAMPO DE FORMULRIO


<script language="javascript">
<!-var mensagem = "Curso de JavaScript do Senac Minas!!!";
var texto;
var ligado = false;
var timeoutID = null;
var posicao = 0;
var tamanho;
var janela;

function ligarMarquee(){
if (ligado) pararMarquee();

texto = document.form1.marquee.value + mensagem +


document.form1.marquee.value;
tamanho = texto.length;
janela = document.form1.marquee.size;
atualizarMarquee();
ligado = true;
}

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:

DATE  Manipula datas e horas.

STRING Manipula strings.

MATH  Realiza operaes matemticas.

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(ms dia,ano horas:minutos:segundos)

NomeObjeto=new Date(ano,ms,dia)

NomeObjeto=new Date(ano,ms,dia,horas,minutos,segundos)

Veja exemplos conforme sintaxe apresentada anteriomente:

Data=new Date()  atribui a varivel data, a data e hora correntes.

Data=new Date(1975,11,23)  atribui a varivel data, a data 23 de


novembro de 1975.

MTODOS DO OBJETO DATE


Se o usurio desejar utilizar os mtodos do objeto de data, deve-se seguir a
seguinte sintaxe:

NomeObjeto.mtodo(parmetros)

Veja a relao dos mtodos utilizados no objeto DATE:

OBJETO STRING
PROPRIEDADES
Os objetos string so de nvel superior.

SINTAXE

Varivel=valor

S1=SENAC

PROPRIEDADES DO OBJETO STRING

Veja na tabela a seguir a relao das propriedades do objeto String:

PROPRIEDADES
length

DESCRIO
Comprimento de uma string.

MTODOS DO OBJETO STRING


Os mtodos do objeto string permitem a manipulao do objeto. O usurio
poder utilizar string literal ou de variveis. Vejamos sua sintaxe abaixo:

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)

Veja um exemplo de utilizao deste mtodo:

<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:

<A NAME=inicio>Incio do Documento</a>

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();

Veja o exemplo de utilizao deste mtodo:

<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();

Veja o exemplo de utilizao deste mtodo:

<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();

Veja o exemplo de utilizao deste mtodo:

<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();

Exemplo de utilizao do mtodo 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);

Exemplo de utilizao do mtodo fontcolor:

<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();

Veja um exemplo para sua utilizao:

<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);

Veja o exemplo de utilizao do mtodo charAt:

<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

a ocorrncia do caractere procurado, ser retornado o valor 0 ou superior,


sendo que 0 a posio do primeiro caractere da string, 1 a posio do
segundo caractere e assim por diante. Caso exista duplicidade do caractere
especfico, o mtodo ir retornar a posio do primeiro caractere encontrado.
Sua sintaxe segue o seguinte padro:

string.indexOf(caractere)

Veja pelo exemplo a utilizao do mtodo indexOf:

<script>
texto="SENAC-MG";
document.write(texto.indexOf("A"));
</script>

Valor retornado: A

Uma das prticas utilizaes deste mtodo, determinar se determinado valor


de uma string um nmero ou uma letra.

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);

Onde caractere, o caractere que deseja procurar dentro da string.

Onde offset, a posio na string a partir de onde o usurio deseja comear a


pesquisa. Veja abaixo um exemplo que localiza a ltima ocorrncia da letra
N na string SENAC-MG utilizada como exemplo.

<script>
texto="SENAC-MG";
document.write(texto.lastIndexOf("N"));
</script>

O resultado ser 2. bom lembrar que as strings sempre se baseiam em 0).

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);

Onde href a referncia de vnculo do hiperlink.


Vejamos um exemplo:

<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);

Onde s1 o caractere procurado dentro de uma string.


Onde s2 o novo caractere que ser trocado por s1.

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");
}

Logo a seguir o cdigo do boto que chama a funo troca().

<input type="button" onClick="troca()" value="troca">

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);

Vejamos um exemplo da utilizao do mtodo substring:

<script>
texto="SENAC-MG";
document.write(texto.substring(0,4));
</script>

Valor retornado: SENA.

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">

No cdigo a seguir, foi utilizado o evento onClick que determinar a ao para


o boto. Esta ao foi designada para trocar a imagem atualmente inserida por

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'">

Em anlise sobre este cdigo simples, foi determinado que no documento


atual, especificamente no objeto chamado senac que trata a figura atualmente
inserida, ser originada outra imagem iso9001.gif em seu local atual.
Resultando na troca da imagem. Veja agora o mesmo cdigo fazendo
alternao entre as duas imagens de acordo com a opo escolhida, observe:

<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:

alert("Seja Bem Vindo!!!");

ou

window.alert("Obrigado pela Visita");

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:

Este mtodo segue a seguinte sintaxe:

alert(valor);

Veja pelo exemplo do script abaixo, a apresentao de uma mensagem atravs


do mtodo alert:

<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)

// Exibe o valor numrico 12.

alert(texto)

// Exibe o contedo da varivel TEXTO.

alert(texto+" Informtica") // Exibe a varivel mais a string.


alert(true)

// Exibe o valor true.

</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

boto OK, assumido o valor 1, caso seja pressionado o boto CANCELAR,


ser assumido o valor 0. Sua sintaxe bsica formada da seguinte maneira:

confirm(valor);

vejamos um exemplo da utilizao do mtodo confirm:

<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.

Veja um exemplo da utilizao do mtodo prompt:

<script>
teste=prompt("Digite seu Nome:","");

alert(teste+" seja Bem Vindo!");


</script>

Os possveis valores a serem retornados pelo mtodo prompt so:


String, quando o usurio digita um texto e pressiona o boto OK.

String vazia, quando o usurio no digita nada e pressiona OK.

NULO (null), quando o usurio pressiona o boto CANCELAR.

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 DO OBJETO WINDOW/FRAME


As propriedades deste objeto modificam os aspectos em relao da janela do
navegador e de seus frames caso existam.

PROPRIEDADES
frames[]
length

DESCRIO
Array de frames em uma janela.
Quantidade de frames existentes em
uma janela.

name

Nome do objeto window.

parent

Representa a janela ou frame-pai.

self

Representa a janela atual de um frame.

top
window

Representa

janela

superior

browser.
Representa a janela ou frame-pai.

do

Define uma string que ser apresentada

status

na barra de status
Define uma mensagem padro que ser

defaultStatus

apresentada na barra de status.

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

status. A sintaxe bsica das duas propriedades

seguem o seguinte parmetro:

window.status("mensagem");
window.defaultStatus = "Esta a mensagem padro.";
defaultStatus = "Esta a mensagem padro";

Veja o funcionamento disto acionando os botes abaixo:

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 URL o endereo da janela a ser aberta.

Onde alvo o nome da janela para ser usado no atributo target dos tags
<FORM> ou <A>.

Onde opes o parmetro que controla o comportamento da janela.

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.

<input type="button" value="Fechar" onClick="window.close()">

Neste

caso,

foi

utilizado

evento

onClick

que

executa

instruo

window.close() assim que o usurio clica sobre o boto.

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.

Onde intervalo o tempo at que a funo seja executada.

Um dos exemplos mais comuns de uso do mtodo setTimeout o da criao


de contadores em uma pgina e textos rolantes na barra de status. Veja pelo
exemplo do script a seguir, o uso de texto piscante na barra de status:

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);

Onde tempo o manipulador de identificao do timer criado pelo mtodo


setTimeout.

TRABALHANDO COM JANELAS


Qualquer usurio que costuma navegar na Internet, sabe que possvel
manipular a janela aberta de um site atravs de comandos do prprio browser
como por exemplo o comando Tela Cheia encontrado no menu Exibir do
navegador, entre outras opes. Mas atravs da linguagem JavaScript
possvel realizar as mesmas operaes atravs de sua programao.

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.

window.open: OPEN o mtodo do objeto window para abrir uma nova


janela.

URL: o endereo da pgina que ser aberta na nova janela. Caso o usurio
omitir este endereo, ser aberta uma nova janela vazia.

A omisso de uma URL, ser aberta uma nova janela em branco.

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)

possvel atravs de outros argumentos, definir o comportamento de como a


nova janela dever ser apresentada. Veja os argumentos existentes para o
mtodo open:

TOOLBAR permite a exibio da barra de ferramentas do navegador.

LOCATION permite a exibio da barra de endereo do navegador.

DIRECTORIES permite a exibio da barra de links do navegador.

STATUS permite a exibio da barra de status do navegador.

MENUBAR permite a exibio da barra de menu do navegador.

SCROLLBARS permite a exibio das barras de rolagem do navegador.

RESIZABLE permite ao usurio redimensionar a nova janela do navegador.

WIDTH especifica a largura da nova janela do navegador em pixels.

HEIGHT especifica a altura da nova janela do navegador em pixels.

Quaisquer uns destes argumentos possuem valores booleanos (yes/no,1/0).


Se utilizar mais de um argumento, os mesmos devero estar separados por
vrgula. Aquelas opes no definidas iro assumir valores falsos.

No exemplo apresentado a seguir, mostrada a abertura de uma segunda


pgina apenas com a barra de status e com tamanho de 250 x 200 pixels:

<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>

Veja o efeito deste cdigo apresentado na figura a seguir:

Se o usurio desejar controlar o cdigo HTML da janela gerada, basta


determinar no cdigo JavaScript da janela principal os tags especficos para a
segunda janela. Veja pelo exemplo 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>")
</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:

Vamos agora incrementar nosso cdigo, controlando o corpo da nova janela


com cores e at com um texto presente. Veja no cdigo a seguir o uso do
objeto document e seu mtodo write que ir permitir o controle sobre a
segunda janela aberta a partir da primeira:

Vamos adicionar ao nosso script existente a seguinte linha alm da j


existente:

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

teremos o seguinte efeito conforme mostrado na figura a seguir:

Aproveitando a criao desta nova janela, iremos criar um boto de formulrio


onde atribuiremos uma ao de evento que far o fechamento automtico
desta janela.

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

Curso no Senac<BR>de JavaScript</H2></CENTER></FONT>")


janela2.document.write("<INPUT

TYPE=button

NAME=fecha

VALUE=Fechar Janela onClick=window.close()>")


</script>
</head>
<body bgcolor=yellow>
SENAC-MG
</body>
</html>

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:

Criaremos agora na janela principal um novo boto com a finalidade de abrir


uma nova janela, para isto deve-se definir o boto no corpo da janela principal
conforme mostrado no cdigo 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.

ABRINDO PGINAS EM FULLSCREEN (Tela Cheia)


Atravs do argumento fullscreen o usurio poder abrir a janela do browser
em tela cheia, fazendo-o ocupar toda rea do monitor. O cdigo a seguir
permite ao usurio abrir sua pgina em tela cheia

<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 DE CLCULO DO OBJETO MATH

Veja na tabela abaixo a relao das propriedades do objeto Math:

PROPRIEDADES
E

DESCRIO
Constante

de

Euler

dos

logaritmos naturais (prximo de 2,118).

LN2

Logaritmo natural de 2.

LN10

Logaritmo natural de 10.

LOG2E

Logaritmo na base 2 de E.

LOG10E

Logaritmo na base 10 de E.

PI

base

Equivalente

numrico

arrendondado para 3,14.

de

PI,

SQRT1_2

Raiz quadrada de um meio.

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

Math.Objeto, facilitando todo um trabalho.

MTODOS DO OBJETO MATH


ABS
Este mtodo tem a funo de retornar o valor absoluto de um nmero. Isto
significa que o valor ser sempre positivo. Caso seja utilizado um valor
negativo este mtodo. Ele ser retornado como positivo. Por exemplo, caso
seja definido o valor 123, ele ser convertido para 123. Veja o exemplo
abaixo:

<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>

O script acima ir retornar o resultado: 1.4505064444001085

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>

O script acima ir retornar o resultado: 0.12028988239478806

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>

Os resultados retornados sero: 13 e 12.

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>

O resultado obtido ser: 1.0009004051215273

FLOOR

Retorna o maior inteiro menor ou igual a um nmero. Vejamos o exemplo:

<script>
valor=Math.floor(101.25);
valor2=Math.floor(-101.25);
alert(valor);
alert(valor2);
</script>

Com isto teremos o seguinte resultado: 101 e 102.

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

Retorna o menor valor entre dois nmeros. Exemplo:

<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

Este objeto de nvel superior.

SINTAXE

Varivel=new Date();

MTODOS GET DO OBJETO DATE

Os mtodos getDate, getDay entre outros tm a finalidade de recuperar a


data e hora de um objeto date. Ele poder conter a data e hora atuais ou
especficas. Aps a especificao do objeto date, basta especificar qual o
mtodo veja pelos exemplos apresentados abaixo:

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

Dia da semana (0=Domingo).

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

Diferena de fuso horrio em minutos para o GMT.

getYear

2 digitos do ano at 1999. Aps 2000, 4 dgitos.

Este objeto tem a funo de armazenar a data e hora atuais no formato


mm/dd/aa hh:mm:ss. Os valores do ms so contados de 0 at 11 e os dias
da semana de 0 a 6 da seguinte forma:

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.

MTODO PARSE E UTC


O mtodo parse retorna o valor de milissegundos a partir de 1 de janeiro de
1970, 00:00:00, j o mtodo UTC faz a mesma coisa, porm no fuso horrio
GMT. Vejamos um exemplo da apresentao da quantidade milissegundos
contados at o dia 23 de Novembro de 1975.

alert(Date.parse("Nov 23, 1975 GMT"));

Teste e veja se o resultado ser 185932800000 milissegundos contados


desde 1 de janeiro de 1970.

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 SET DO OBJETO DATE


Os mtodos setDate, SetDay entre outros, permitem ao usurio definir a data
e a hora de um objeto date. Estes mtodos so utilizados da mesma forma
dos mtodos get. Vejamos a relao destes mtodos:

MTODOS

DESCRIO

setDate

Dia da semana (0 para Domingo).

setHours

Horas (0 a 23).

setMinutes

Minutos (0 a 59).

setMonth

Ms do ano.

setSeconds

Segundos (0 a 59).

setTime

Milissegundos de 1 de janeiro de 1990.

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.

Veja pelo exemplo a seguir, a converso da hora atual em uma string no


formato GMT. Certifique-se que o computador esteja com a definio de fusohorrio correta.

alert(data.toGMTString());

O resultado, ser a criao de uma string no formato:

Fri, 21 Sep 2001 20:53:44 UTC

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());

O resultado esperado, ser similar ao formato: 09/21/2001 17:58:03

Vejamos agora um exemplo que ir apresentar um relgio digital na barra de


status que far a hora se atualizar de um em um segundo. Analise o cdigo
apresentado abaixo:

<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:

Agora so: hh:mm:ss do dia dd-mm-yy

Crie um script que apresente a data e hora no formato do fuso horrio default.

Altere este script fazendo a data e hora apresentarem-se no formato atual do


fuso horrio local.

Crie um script que apresente na pgina a seguinte condio:

Se horas for menor que 12h, exiba BOM DIA;


Se horas estiver entre 12h e 18h, exiba: BOA TARDE;

Se horas estiver entre 00h e 05h, exiba: BOA MADRUGADA.

Crie um script que apresente na barra de status a data e as horas sendo


atualizado de 1 em 1 segundo. Veja o formato a ser apresentado na barra de
status:

Segunda-feira, 23 de Novembro de 2001. Agora so: hh:mm:ss

OBJETO DOCUMENT
O objeto document responsvel por conter diversas informaes sobre o
documento corrente. Veja suas propriedades e eventos utilizados:

PROPRIEDADE

Este objeto uma propriedade do objeto window.

SINTAXE

document.propriedade
document.mtodo()

Veja na tabela abaixo a lista de propriedades do objeto document.

PROPRIEDADES DO OBJETO DOCUMENT

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

parte da informao que armazenado


no micro do usurio.

defaultStatus

Especifica um texto para a barra de


status do navegador.
Especifica o valor do atributo TEXT, que

fgColor

apresenta a cor dos textos presentes no


documento.

forms[]

lastModified

linkColor

links[]

location

referrer

status

title

vlinkColor

Array que contm todos os formulrios


do documento.
Apresenta a data da ltima modificao
feita no documento.
Especifica o valor do atributo LINK, que
determina a cor dos links no visitados.
Array

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.

Assim como ao abrir uma janela do browser, criado um objeto chamado


window, com ele tambm criado um objeto denominado document.
Grande parte dos objetos em uma pgina so diretamente propriedades do
objeto document, um exemplo claro disto o objeto form que possui vrias
propriedades, porm ele mesmo uma propriedade do objeto document.
Veja a seguir a utilizao de algumas das propriedades apresentadas:

Neste exemplo apresetnada uma mensagem de alerta que exibe o cdigo


HEXADECIMAL da cor de fundo definida para a pgina.

<script>
alert(document.bgColor);
</script>

No

exemplo

seguir

foi

usada

propriedade

bgColor

no

evento

onMouseover que mudar a cor de fundo do documento assim que o ponteiro


do mouse passar sobre o nome de uma cor

<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>

MTODOS DO OBJETO DOCUMENT

Veja a relao dos mtodos utilizados no objeto document.

MTODO

DESCRIO

clear

Limpa a janela (window).

close

Fecha o documento atual.

write

Permite a incluso de texto no corpo do


documento.
Permite a incluso de texto no corpo do

writeln

documento com um caractere de nova


linha anexado.

MTODO CLEAR

Com o mtodo clear() do objeto document possvel ao usurio limpar o


contedo de uma janela.

IMPORTANTE: bom saber que este mtodo no funciona


no Internet Explorer, sendo compatvel apenas para o
Netscape a partir de sua verso 2. Veja um exemplo de
utilizao deste mtodo:

<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

O mtodo close() do objeto document diferente do mtodo clear() tem


como finalidade fechar o documento, sendo utilizado hoje em dia pelo objeto
window, seu uso tambm restrito apenas para algumas verses do
Netscape.

IMPORTANTE: bom saber que este mtodo no funciona


no Internet Explorer, sendo compatvel apenas para o
Netscape a partir de sua verso 2. Veja um exemplo de
utilizao deste mtodo:

MTODO WRITE E WRITELN


Estes mtodos permitem a insero de texto em documento. Estes mtodos
so bem similares, diferenciando-se que o mtodo writeln acrescenta um
caractere de nova linha ao final de uma string. Normalmente este caractere
ignorado

pela

linguagem

HTML,

com

exceo

dos

Tags

<PRE>

<TEXTAREA>. certo que o mtodo mais utilizado em JavaScript o mtodo


write do objeto document. Sua sintaxe bsica tem a seguinte composio:
document.write(texto);
document.writeln(texto);

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>");

Veja outro exemplo a seguir da apresentao de um clculo sendo exibido


atravs do mtodo write.

<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.

Crie um arquivo externo com a extenso .JS e desenvolva o seguinte script:

Crie um script que apresente no documento corrente, a data da ltima


modificao feita no mesmo. Crie uma pgina HTML e faa uma chamada para
o arquivo .JS que contm o arquivo. Observe em qual dos dois arquivos feita
a atualizao da data aps a sua alterao.

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 apresente no corpo do documento o seu nome completo e


no mesmo script apresente Tags HTML em negrito, fonte e cor.

Crie um script que seja apresentado no documento a Data e Hora atuais no


seguinte formato:

Seja Bem Vindo Minha Home Page!


Agora so: hh:mm, do dia dd/mm/aa

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.

Crie um SCRIPT que ao abrir a pgina, seja solicitado a digitao do nome do


usurio, dentro desta funo, crie uma condio que enquanto o nome no for
digitado, seja solicitado continuamente.

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

(www.mg.senac.br) e SENAC-BRASIL (www.senac.br).

Faa com que ao movimentar o ponteiro do mouse sobre um dos hiperlinks


criados. Seja exibida uma segunda janela apenas com barra de status apenas
e com dimenses 300x300 pixels.

Faa com que estas janelas apresentem os seguintes textos:

Janela do SENAC-MG  Portal de Servios do SENAC Minas.

Janela do SENAC-BRASIL  Portal de Informaes do Senac Brasileiro.

Determine que quando o ponteiro estiver fora do hiperlink, as janelas


respectivas sejam fechadas.

Criar um script que ao carregar a pgina, seja solicitado as informaes:


NOME, PESO, ALTURA, COR DOS OLHOS, COR DOS CABELOS, SEXO.

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.

Para o campo Sexo, o usurio poder digitar apenas os dados MASCULINO


ou FEMININO.

Faa com que os valores digitados sejam apresentados no corpo da pgina,


sendo que os dados alfanumricos sejam apresentados em letras maisculas.

Crie uma pgina HTML sem contedo.

Crie um arquivo externo com um script que solicite a digitao do nome do


usurio, e em seguida, solicite o nome de uma cor.

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

HEXADECIMAL da cor assumida.

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

Especifica o protocolo da URL.

search

Especifica a poro search da URL.

target

Determina o link de destino.

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.

Para que se possa declarar um array, use a seguinte sintaxe:

NomeArray = new Array(numElementos)

Veja como declarar um array chamado meses e seus elementos.

Meses = new Array(12)

Outra maneira, declarar os valores para o novo array criado. Observe a


sintaxe abaixo:

Meses = new Array(janeiro,fevereiro,maro,abril,maio, ...)

Quando atribudo o nmero de elementos no array, necessrio declarar os


elementos que faro parte do mesmo. Utilize a seguinte sintaxe:

NomeArray[numElemento]

Meses[0]=janeiro
Meses[1]=Fevereiro
Meses[2]=maro
E assim por diante...

ANOTAES:

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

Veja pelo exemplo do script abaixo a apresentao da data atual presente no


navegador:

<script>
// Array com os dias da semana

hoje=new Date();
semana=new
Array("Domingo","Segunda","Tera","Quarta","Quinta","Sexta")

// Array com os meses do ano

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.

Finalizando, foi utilizado o objeto document.write que apresentar a varivel


hoje com o array correspondente da varivel semana de acordo com seu
mtodo getDay() que apresenta o valor especificado do dia da semana.
Ocorrendo o mesmo com a varivel meses para 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:

Se o usurio informar 5 campos, sero criados cinco campos cada um


chamado de: campo0, campo1, campo2, campo3, campo4. Lembre-se que
um array sempre inicia-se a partir de 0. faa um teste e veja o resultado
obtido.

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:

<input type="button" value="ok"


onClick="alert(form1.campo3.value)">

Veja a seguir o cdigo completo:

<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

Veja um exemplo de um script que informar a quantidade de ncoras


existentes no documento.

<html>
<head>
<title>ARRAY ANCHORS</title>
</head>
<body>
<A NAME=1>primeira ncora</a>
<A NAME=2>segunda ncora</a>

<A NAME=3>terceira ncora</a>


<A NAME=4>quarta ncora</a>
<script>
<!-ancoras=document.anchors.length;
alert(Esta pgina possui +ancoras);
// -->
</script>

No script apresentado, foi definido na pgina quatro ncoras a partir do tag


HTML <A NAME> e em seguida j no script, foi criada a varivel ancoras que
contar a quantidade de ncoras existentes na pgina atravs da propriedade
length e logo depois, executado a instruo alert que tem a funo de
exibir uma mensagem na tela informando o contedo da varivel ancoras.

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;

x o nmero de elementos presentes dentro do formulrio tambm iniciado


com zero.

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:

Segunda-feira, 17 de Setembro de 2001

Crie nesta pgina um script que apresente o nome do navegador e sua verso
em negrito.

Crie um link HTML nesta pgina que v para outra pgina.

Na nova pgina, crie um boto de formulrio que tenha a mesma funo de


voltar do navegador.

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.

Defina uma segunda ao para o evento onClick de cada hiperlink, fazendo-os


exibir outra mensagem de alerta com o seguinte texto:

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.

Teoricamente, os frames visualmente parecem simples de criar, porm so


bastante complexos que podem fazer com que o usurio se confunda
dependendo do projeto que esteja desenvolvendo. Espero que voc tenha
aprendido isto de forma clara e praticado bastante este recurso, porque
inicialmente parece bem confuso, por isso, pratique mesmo a sua utilizao
para que seu entendimento seja claro.

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:

Um detalhe importante na utilizao de scripts em pginas com frames, a


nomeao dos frames atravs do atributo NAME, no exemplo anterior os dois
frames criados foram chamados de frame1 e frame2.

HIERARQUIA FRAMESET WINDOW


bom saber que, cada frame considerado uma janela separada para o
navegador, em razo de cada uma possuir seu prprio cdigo HTML. Estas
janelas de frame estaro sempre subordinadas pela janela principal, aquela
que contm o tag <FRAMESET>. Como dito anteriormente, esta janela no
possui corpo sua funo dividir a tela e mostrar suas pginas filho. Entenda
ento que a pgina que contm o tag <FRAMESET> a pgina PAI, enquanto
que as que esto subordinadas ela so as pginas FILHO.

PAI (Frameset)

FRAME 2
FILHO
FRAME 1

FRAME 3

Caso o usurio faa diversos frames aninhados, sero apresentadas janelas


netas que so subordinadas as janelas do frame-filho, com isto temos a
seguinte sintaxe no JavaScript:

parent.filho.neto

Concluindo, a pgina filho nome da janela que est subordinada a janela


principal, a do frameset (pai). J a pgina neto o nome de uma janela que
est subordinada sob a janela de frame-filho.

Vejamos a utilizao de cdigo JavaScript para o gerenciamento dos frames


dividindo o navegador em 4 frames nomeados da seguinte forma: frame1,
frame2, frame3 e frame4 conforme exemplo mostrado na figura a seguir:

<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>

Com este cdigo teremos a seguinte estrutura visualizada no navegador:

Criaremos agora um arquivo de controle para nosso frame que possuir


algumas instrues JavaScript. No exemplo do cdigo seguir, trocaremos o
frame superior esquerdo por esta pgina desenvolvida, veja o resultado na
prxima figura:

<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);

O objeto parent, especifica o documento que possui o frameset.


A propriedade nomeFrame, especifica o frame que est sendo referenciado.
A propriedade name define o nome para esta janela.

Funo escreveFrame()

Esta funo que tambm chamada com o clique sobre um boto de


formulrio ir permitir que o usurio possa escreve algum texto em um frame
especfico, isto possvel atravs do cdigo:

parent.nomeFrame.document.write("<br>Este um Frame");

O objeto parent, especifica o documento que possui o frameset.


A propriedade nomeFrame, especifica o frame que est sendo referenciado.
A propriedade document define a janela especificada.
O mtodo write foi usado para escrever no documento especificado.

Funo limpaFrame()

J esta funo permite que o usurio ao clicar em um boto limpe o contedo


de todos os frames presentes. O cdigo que permite esta ao :

for (i=1;i<4;i++){

parent.frames[i].document.close();
parent.frames[i].document.open();
parent.frames[i].document.writeln("");
}

Neste cdigo foi manipulado todos os frames fazendo o uso do array


frames[]. Analisando este cdigo:

O objeto parent, especifica o documento que possui o frameset.


frames[] um array.
document define a janela especificada.
close, open so mtodos para o documento da janela de frames.

Cada elemento do array frames[] contm um frame. feita a contagem em 0


para o primeiro frame, 1 para o segundo, 2 para o terceiro. Para que no seja
omitido o frame que possui o controle, veja que a contagem foi iniciada em
um, em razo do frame de controle ser o primeiro ele assume zero e conta at
3. Cada frame limpo em cada lao da instruo for.

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

Este objeto uma propriedade do objeto document.

Veja na tabela abaixo a relao das propriedades do objeto form.

PROPRIEDADES DO OBJETO FORMS

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

botes do tipo radio em um formulrio.


Lista

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

processadas atravs dos valores GET ou


POST.

Name
options[]

selected

Nomeia um objeto do formulrio.


Lista de opes de uma lista (select)
dentro do formulrio.
Estado atual de uma caixa de verificao
ou um boto de opo (radio).
Determina a opo selecionada de uma

selectedIndex

lista

de

seleo

(select)

dentro

do

formulrio.
target

Especifica um alvo.
Especifica o texto de uma opo (option)

text

de uma lista de seleo (select) do


formulrio.

value

Nome dado ao texto de uma caixa de


texto ou rea de texto (text e areatext).

SINTAXE

document.NomeFormulrio.propriedade

MTODOS DO OBJETO FORM

MTODO

DESCRIO
Quando remove o foco de um campo do

blur()

tipo text, textarea e campos de senha


password.
Quando dado um clique sobre um

click()

elemento de boto em formulrio ou


campos do tipo radio e checkbox.
Quando dado o foco sobre um campo

focus()

do tipo text, textarea e campos de


senha password.
Quando selecionado o contedo de um

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

Todos estes componentes apresentados, j estamos familiarizados no uso da


linguagem HTML.

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

Veja abaixo a relao das propriedades existentes para o objeto TEXT:

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.

MANIPULADORES DE EVENTO PARA FORMULRIOS

MTODO

EVENTO

DESCRIO
Executa

focus()

onFocus

uma

instruo

quando o dado o foco


sobre o campo de texto.
Executa

blur()

onBlur

uma

instruo

quando retirado o foco


sobre o campo de texto.
Executa

select()

onSelect

uma

instruo

quando o contedo da
caixa

de

texto

selecionado.

Vejamos um exemplo JavaScript que quando o usurio retirar o foco da caixa


de texto, ser exibida uma mensagem informando para no deixar o campo
em branco e em outro situao aps o preenchimento do campo em letras
minsculas seu contedo ser convertido para letras maisculas:

<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>

Digite seu Nome:


<input

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>

No script apresentado, fora criado uma funo que determina se o usurio


deixar o

campo de preenchimento em branco ser exibida uma mensagem

avisando-o. J no corpo, temos dois campos de texto que utiliza o evento


onChange que ir colocar o contedo do campo texto em letras maisculas e
o evento onBlur que executa a funo requer criada no incio do documento.
Temos tambm o evento onFocus que seleciona o contedo do campo quando
o usurio utiliza a tecla TAB.

Veja o resultado na figura seguir, quando o usurio deixa o campo em

branco:

Vejamos um exemplo prtico que permite que quando o usurio deixa um


campo vazio exibida uma mensagem de alerta e o cursor continua presente
dentro do campo de texto:

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:

<input type="text" name="nome" onBlur="verifica(this.value)">

A chamada da funo feita quando o usurio retira o foco do campo que


executa a funo verifica que armazena o valor atual do campo. Havendo
vrios campos que so de preenchimento obrigatrio, esta funo poder ser
reutilizada.

OBJETO PASSWORD
Este objeto permite ao usurio controlar campos de preenchimento de SENHA.
Sua sintaxe :

document.nomeForm.campoSenha.propriedade

As propriedades e mtodos deste objeto, so os mesmos do objeto TEXT


apresentados anteriormente.

OBJETO TEXTAREA
Este objeto tem como objetivo a criao de reas de texto composta por vrias
linhas. Sua sintaxe :

document.nomeForm.campoTextArea.propriedade

Suas propriedades, mtodos e eventos equivalem as mesmas do objeto TEXT.

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

clique sobre o boto.

Veja pelo exemplo do script a seguir a exibio de uma mensagem de alerta


informando o que foi digitado na caixa de texto assim que o usurio pressiona
um boto:

<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

Veja no exemplo a seguir um script que verificar se determinado campo foi


preenchido, caso no tenha sido preenchido o JavaScript no envira o
formulrio:

<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

OBJETO CHECKBOX (Caixa de Verificao)


Este objeto cria uma lista onde o usurio poder marcar vrias opes. Sua
sintaxe

equivalente

as

dos

objetos

de

formulrio

anteriormente

apresentadas.

PROPRIEDADE

Este objeto uma propriedade do objeto form.

Veja abaixo a relao das propriedades existentes para o objeto CHECKBOX:

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

da caixa, selecionado (True) ou no


selecionado (False).

Valor booleano que indica se o estado


defaultStatus

padro do boto definido pelo atributo


checked.

MANIPULADORES DE EVENTO

MTODO

EVENTO

DESCRIO
Executa

click()

onClick

uma

instruo

assim que o usurio clica


sobre o elemento.

Os botes de formulrio do tipo CHECKBOX so botes que o usurio pode


ativar e desativar. O atributo checked determina o estado default da caixa de
verificao. Esta propriedade assume valores booleanos, quando ativada
assume o valor true e desativada o valor false. Vejamos um exemplo:

<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)">

Veja um outro exemplo de utilizao do objeto checkbox:

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:

Veja agora a utilizao de um script no uso do objeto radio do formulrio:

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="CHECKBOX" NAME="queijo">Mussarela (+ 1,30 reais)


<INPUT TYPE="CHECKBOX" NAME="calab">Calabresa (+ 2,50 reais)
<INPUT TYPE="CHECKBOX" NAME="ovoceb">Ovo e cebola (+ 0,70 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.

Este objeto ir permitir ao usurio controlar os itens de uma lista de opes


criada com o tag HTML <SELECT>. Veja um exemplo de utilizao do objeto
select.

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.

EVITANDO O USO DA TECLA ENTER


Normalmente na maioria dos formulrios, caso o usurio estando em algum
dos campos presentes, ao pressionar a tecla ENTER, o mesmo enviado
imediatamente, muitos usurios se perdem na navegao quando este
problema ocorre dependendo da situao. Atravs do JavaScript possvel ao
usurio evitar que o mesmo seja enviado quando se pressiona a tecla ENTER.

claro que este recurso ir cancelar o envio do formulrio mesmo se o usurio


clicar sobre o boto de submisso, bastando ao usurio a criao de uma
funo que envie o formulrio. Vejamos o cdigo a seguir para este recurso:

<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.

J para que o formulrio seja enviado, foi criado um boto simples de


formulrio que ao ser acionado, ser executada a funo envia(this.form)
para este formulrio. Na funo foi definido a instruo form.submit() que
enviar o formulrio.

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:

Protocolo:hostname:port path seach hash

Vejamos o significado da representao mostrada acima.

PROPRIEDADE

DESCRIO

Hash

Determina nome de ncora.

Host

Determina parte hostname:port URL

Href

Determina uma URL

Pathname

Determina caminho.
Determina a porta de comunicao que

Port

utilizado no servidor para comunicao.

Protocol

Incio de uma URL.

Search

Determina uma pesquisa.

Vejamos agora a relao dos tipos de URL conhecidas:

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

PROPRIEDADES DO OBJETO LOCATION


Para definir propriedades do objeto Location, siga a seguinte sintaxe:

window.location

Caso o objeto location esteja fazendo referncia a janela corrente, no


necessrio utilizar o objeto window. Caso o usurio deseja retornar o URL da
janela corrente, basta utilizar o seguinte comando:

location.href; // URL da janela corrente.

location.host; // Parte da URL.

Veja um exemplo de um hiperlink usado em um boto de formulrio:

<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:

Como vai, <NomeUsurio>

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.

No corpo da pgina, crie um campo de formulrio do tipo texto, que execute a


funo atribuindo varivel definida o valor digitado pelo usurio assim que o
mesmo retirar o foco do campo de texto.

Crie um formulrio contendo os campos Nome, Endereo, Telefone, CEP,


CIDADE, ESTADO.

Crie uma funo que determine para os campos NOME, TELEFONE e CEP
preenchimento obrigatrio.

Crie uma funo que determine para o campo telefone o preenchimento de


valores nmericos exibindo uma caixa de alerta quando o preenchimento
estiver incompatvel.

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.

Desenvolva um script que possua trs campos: NOME, ENDEREO e


SEXO.

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 dois campos de formulrio, o primeiro para o preenchimento de um


LOGIN do tipo TEXT e o outro do tipo PASSWORD chamado SENHA e um
boto de ao.

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 um formulrio com um campo de formulrio do tipo texto. Crie um evento


que ao carregar pgina, seja exibida uma mensagem na barra de status e
que o cursor aparea posicionado dentro do campo de formulrio.

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 dois campos de formulrio, sendo o primeiro do tipo password e o


segundo do tipo texto. Crie um script que faa com que ao digitar uma senha
no primeiro campo seja digitado o que a pessoa digitou. Crie um evento que
ao carregar a pgina, o campo senha venha com o cursor posicionado.

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

UTILIZANDO O OBJETO HISTORY

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

MTODOS BACK E FORWARD


Os mtodos back e forward representam a funo dos botes de Avanar e
Voltar presentes no browser. Veja o exemplo de utilizao destes mtodos:

history.back() // Retorna a URL anterior.


history.forward() // Retorna a URL posterior.

MTODO GO

O mtodo go permite a especificao de uma URL do histrico, basta fornecer


o nmero da URL que deseja ir. Veja pelo exemplo a seguir o deslocamento
para a quarta URL anterior:

history.go(-4) // Vai para a quarta URL anterior.


History.go(5)

// Vai para a quinta URL a frente.

Dentre os mtodos utilizados o mtodo go mais verstil por ser utilizado


para controlar o histrico amplamente.

ANOTAES:
______________________________________________________

UTILIZANDO O OBJETO NAVIGATOR


Este objeto possui informaes sobre o navegador utilizado pelo usurio como,
verso e nome do mesmo. Para utilizar suas propriedades, deve-se seguir a
seguinte sintaxe:

navigator.propriedade

Vejamos a relao de suas propriedades:

PROPRIEDADES DO OBJETO NAVIGATOR

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.

Vejamos agora um exemplo que mostrar informaes sobre o navegador


utilizado.

<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>

veja o resultado deste script pela figura a seguir:

ACESSANDO CDIGO-FONTE A PARTIR DE UM LINK


Alguns usurios para facilitar a visualizao do cdigo-fonte de sua pgina,
criam hiperlinks que fazem com que seus visitantes tenham uma maneira mais
simples de visualizar seu cdigo. Veja o exemplo a seguir:

<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.

Os Cookies so pequenos textos ( de geralmente 1Kb ), colocados em seu


disco rgido por alguns sites que voc visitou.
Eles contm informaes que o prprio internauta forneceu ao site como email, preferncias, o que voc comprou, seu nome, etc...Mas apenas o que o
internauta forneceu. Se ele apenas entrou no site e no digitou informao
nenhuma, ento o cookie no conter nenhuma informao.
Alguns sites de comrcio eletrnico colocam estes cookies no disco rgido do
usurio com o objetivo de personalizar os prximos atendimentos. Por
exemplo, o usurio entrou em uma loja virtual e comprou o livro E o vento
Levou . Pagou com carto de crdito e forneceu seu nome e mais alguns
dados para que a compra pudesse ser raizada.
Em seu prximo acesso a este mesmo site, este usurio receber uma
mensagem em sua tela dizendo: Bom dia Fulano de Tal, que tal conhecer E o
vento Levou 2 ? . Ou seja, o atendimento foi personalizado para este usurio.
Ele foi reconhecido e um livro que provavelmente ser de seu agrado lhe foi
oferecido.
Assim o cliente pode ser atendido de acordo com seu perfil e suas
preferncias, e o site ter uma maior probabilidade de vender outro livro. Este
tipo de operao envolvendo cookies e personalizando o atendimento visa criar
um vnculo com o cliente com o objetivo que este volte outras vezes ao site.
Nos sites de comrcio eletrnico, os cookies tambm so utilizados para criar
os carrinhos de compras. Digamos que o usurio esteja num site fazendo

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

document.cookie , de fato, uma string, com a conveno de que cada


cookie

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;

var final = document.cookie.indexOf(";",inicio);


if (final == -1) final = dc.length;

return unescape(dc.substring(inicio+prefixo.length, final));


}

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.

Veja uma relao de cookies armazenados na subpasta Cookie presente na


pasta Windows conforme mostrado na figura a seguir:

Os nomes de cookies seguem um padro do login da mquina acompanhado


do local do domnio ou parte no restante do nome do arquivo. A sintaxe
utilizada no contedo do arquivo do cookie, segue o seguinte padro:

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

mquinas. E muita gente, com medo, desativa a aceitao de cookies (veja


abaixo como se faz no IE), o que invalida toda sua aplicao.

sempre bom ento, se voc vai usar cookies, alertar o usurio de que tem
que aceit-los para a aplicao funcionar.

ANOTAES:

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

FAQ SOBRE COOKIES

Cookies - so simplesmente bits de informao, pequenos arquivos texto


(arquivos com terminacao .txt), geralmente com menos de 1Kb, que o seu
browser capta em alguns sites e guarda em seu hard disk.
De onde surgem os cookies?
De voc! A maioria das vezes os dados contidos nos arquivos texto vm de
informaes que voc forneceu. Essas informaes podem ser o seu e-mail, o
seu endereco ou qualquer informao que voc tenha fornecido em um
formulrio online.
Para que eles so utilizados?
Em pginas personalizadas, nais quais a cada vez que voc visita surgem
opes que voc selecionou previamente. Sem cookies, voc teria de se
registrar e resselecionar opes a cada vez que acessasse uma destas pginas.
Com os cookies, o web site pode "lembrar" quem voc e quais as suas
preferncias.
Para que mais eles so utilizados?
Compras online e registro de acesso so outros motivos correntes de
utilizao. Quando voc faz compras via Internet, cookies so utilizados para
criar um "carriho de compras virtual", onde seus pedidos vo sendo
registrados e calculados. Se voc tiver de desconectar do site antes de
terminar as compras, seus pedidos ficaro guardados at que voc retorne ao
site.
Webmasters e desenvolvedores de sites costumam utilizar os cookies para
coleta de informaes. Eles podem dizer ao webmaster quantas visitas o seu
site recebeu, qual a freqncia com que os usurios retornam, que pginas
eles visitam e de que eles gostam. Essas informaes ajudam a gerar pginas
mais eficientes, que se adaptem melhor as preferncias dos visitantes.

Qual a utilizao dos cookies na publicidade?


Algumas companhias j utilizaram, ou ainda utilizam cookies para coletar
informaes pessoais sobre os usurios e posteriormente enviar-lhes anncios
publicitrios. O mais comum so os chamados spam mails, ou seja,
mensagens no solicitadas que voc recebe via e-mail, geralmente anunciando
a venda de algum produto. Essa prtica tem sido amplamente criticada e,
atualmente, considerado bastante anti-tico utilizar-se das informaes
providas por cookies, ou repass-las para empresas interessadas em atingir
um determinado pblico.
Se cookies so arquivos texto, quem pode ler esses arquivos?
Um cookie s pode ser lido pelo site que o criou. Webmasters no podem
intrometer-se no diretrio onde os cookies esto armazenados em seu
computador para obter informaes a seu respeito.
Um cookie pode trazer um virus para o meu computador?
No. Vrus somente so trasportados por arquivos executveis. Sendo cookies
arquivos texto, no h perigo de carregarem nenhum virus anexado eles.
Ento qual o problema? Por que algumas pessoas detestam cookies?
Alguns sentimentos anti-cookie so provocados apenas por desinformao.
Cookies so simples arquivos texto, no podem entrar em seu hard disk e
capturar nenhuma informao sobre voc. Eles apenas guardam informaes
que voc voluntriamente forneceu ao visitar um site. E os browsers revelam
alguma informao sobre voc de qualquer forma, mesmo sem a utilizao dos
cookies: o seu endereo de IP, seu sistema operacional, tipo de browser
utilizado, etc.
Voce precisa aceitar cookies?
No, no preciso. A maioria dos browers pode ser configurada para recusar
cookies, embora no aceitando voc vai perder muitos aspectos providos pela

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.

Sabemos que, quando algo deixa de funcionar corretamente como foi


designado pelo programador, isto chamado de BUG. O processo de
eliminao destes bugs chamado de depurao ou como trata algumas
linguagens debugging. Caso o usurio encontre problemas na execuo de
seus scripts, basta entender um pouco como os erros ocorrem para saber o
que fazer posteriormente. preciso entender o que so erros, o que eles
significam e principalmente, como corrig-los. bom tambm, saber quais so
as mensagens de erro mais comuns que so exibidas quando o programador
estiver escrevendo e testando seus scripts em JavaScript.

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

ERROS EM TEMPO DE CARREGAMENTO (Load-Time)


Este tipo de erro ocorre sempre que o browser carrega o script. Eles so os
principais responsveis pelo mal funcionamento de todo o script. durante o
processo de carregamento que detectado todos os erros srios que
ocasionaro uma falha em todo o script. Com isto, o script no poder ser
carregado corretamente enquanto o erro existir.

Neste tipo de erro, a causa maior para ocorrer so normalmente os erros na


sintaxe de alguma instruo. Um exemplo claro disto, quando o usurio na
criao de qualquer funo esquece de delimitar o bloco de suas instrues
com caractere de bloco que so as chaves. Para auxiliar a identificao do
problema. O JavaScript exibe uma caixa de alerta informando que ocorreu um
erro em tempo de carregamento.

Esta caixa de dilogo apresentada quando o usurio d um duplo clique


sobre a mensagem que aparece na barra de status do Internet Explorer 6.
Caso o usurio esteja utilizando uma verso anterior, esta mensagem exibida
imediatamente.

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.

ERROS EM TEMPO DE EXECUO (Run-Time)


Neste tipo de erro, o problema ocorre quando o script est sendo executado,
diferente dos erros em tempo de carregamento que aparecem no momento
que o documento est sendo carregado. Normalmente so causados quando o
usurio utiliza os cdigos JavaScript de maneira incorreta. Um exemplo disto
est quando o usurio faz uma referncia a uma varivel sem que ela tenha
sido definida ou quando o usurio aplica incorretamente os objetos JavaScript.
Vejamos um exemplo:

document(teste);

Sendo o correto:

document.write(teste);

ERROS DE LGICA (Logic Errors)


J o erro de lgica ocorre sempre quando o script executa algo bem diferente
do que foi programado a executar. Neste caso, no devido aos parnteses ou
chaves mal posicionados, mas sim, na construo do script. necessrio que o
usurio proteja seu cdigo contra erros de lgica sempre que puder. Por
exemplo, caso o usurio defina dois campos de formulrio do tipo texto e a

cada um defina um nome de varivel, e em seguida, deseja que seja mostrado


o contedo de uma das variveis, s que especifica a outra varivel,
conseqentemente os dados estaro trocados.

ERROS COMUNS EXISTENTES


Muitas das vezes o usurio notar que os erros encontrados so causados
pelos simples erros existentes. Vejamos os mais comuns:

Posicionamento de chaves

comum o usurio esquecer de delimitar o bloco de instrues presentes em


uma funo com os caracteres de bloco, que so as chaves. Seu uso
obrigatrio para que a linguagem compreenda onde comea e termina sua
funo.

Strings entre aspas

Toda string possui aspas. Nunca esquea delas para evitar problemas futuros.

Cdigo de script correto

Sempre verifique o tipo de componente a ser usado. Saiba diferenciar


instrues, mtodos, propriedades, funes e objetos (quando esto em
conjunto, so denominados entidades). Sempre analise seu script mais de uma
vez e verifique se as entidades esto escritas de forma correta. comum os
programadores formatarem seus scripts com quebras de linha e tabulaes
(indentaes) para criar uma espcie de hierarquia das entidades. Com certeza
isso ir facilitar o acompanhamento e o relacionamento da ao de cada script.
Vejamos um exemplo de script escrito de forma consistente:

<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

Sempre verificar os nomes dos objetos se esto escritos corretamente,


principalmente na diferenciao de letras maisculas e minsculas. Um
exemplo disto est no uso dos objetos Date e Math que possuem suas iniciais
maisculas, j os outros comeam com letras minsculas.

ANALISANDO A ORIGEM DOS ERROS


importante que o usurio na reparao de erros encontrados em seus
scripts, isole suas funes e rotinas de modo que possa analisar etapa por

etapa de seu programa. Verificar minuciosamente cada trecho das linhas do


script de maneira que encontre possveis erros.

Muitos erros lgicos so causados por valores incorretos atribudos as


variveis. Para facilitar a localizao destes erros, basta que o usurio defina
reas de observao em vrios locais de seu script. Estas reas na maioria das
vezes podem ser caixas de alerta para determinar se a execuo do programa
est chegando quele ponto que se encontra. Logo aps a depurao de todo o
script, o usurio ter apenas que remover estas reas de observao.

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.

OUTROS ERROS COMUNS


1. Deixar de utilizar aspas em strings.

2. M utilizao das aspas e apstrofos (aspas simples).

3. Sinal de igualdade individual para expresses de comparao.

4. Utilizar o objeto de formulrio pertencente ao Documento e no a Janela.

5. Utilizao dos mtodos com outros objetos que no os possuem.

6. Criao de laos infinitos.

7. Falta da instruo return em uma funo.

RESUMO
RESUMO GERAL DE OBJETOS JAVASCRIPT

OBJETO

DESCRIO
Link

anchor (ncora)

de

hipertexto

para

mesma

pgina. As ncoras dependem do objeto


document (documento).

anchors[] (ncoras)

Array que contm todas as ncoras no


documento.
Cria um boto para um formulrio. Este

button

objeto

pertence

ao

objeto

form

(formulrio).
Uma
checkbox

caixa

de

formulrio.

verificao

Este

objeto

de

pertence

um
ao

objeto form.
Date

Define a Data/Hora atuais. Este um


objeto de nvel superior.
Visualiza outros objetos no corpo de

document

uma pgina. Este objeto pertence ao


objeto window.
Array que apresenta todos os elementos

elements[] (elementos)

de um formulrio. Todos os elementos


pertencem ao objeto form.
Contm qualquer objeto criado em um

form (formulrio)

formulrio.

Este

objeto

pertence

ao

objeto document.
forms[] (formulrios)

frame

Array que contm todos os formulrios


em documento.
Determina
navegador.

as

pginas

Cada

frame

divididas

no

possui

um

objeto

document.

Pertencente

ao

objeto window.
frames[]

Array de frames do objeto window.


Elemento de formulrio que cria uma

hidden (oculto)

caixa de texto oculta. Pertencente ao


objeto form.

histoy

link
links[]
location (localizao)

Math

navigator

Histrico de todas as pginas visitadas.


Pertence ao objeto document.
Link de hipertexto. Pertence ao objeto
document.
Array dos links de um documento.
URL (endereo) do documento atual.
Pertence ao objeto document.
Utilizado

na

execuo

de

clculos

matemticos. Objeto de nvel superior.


Informaes sobre o browser. Objeto de
nvel superior.
Array de itens de uma lista de seleo

options[] (opes)

(select) em um formulrio. Pertencente


ao objeto form.
Elemento de um formulrio que cria

password (senha)

uma caixa de texto do tipo senha.


Pertencente ao objeto form.
Elemento de um formulrio que cria cria

radio (boto de opo)

botes de opo. Pertencente ao objeto


form.
Elemento de um formulrio que cria um

reset

boto

que

limpa

os

campos

do

formulrio. Pertencente ao objeto form.

select (lista de opes)

Lista

de

seleo

um

formulrio.

Pertencente ao objeto form.


Variveis

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

formulrio. Pertencente ao objeto form.


Elemento do formulrio que cria um
text (caixa de texto)

campo de texto. Pertencente ao objeto


form.
Elemento do formulrio que cria uma

textarea (rea de texto)

rea de digitao de texto. Pertencente


ao objeto form.

window (janela)

Representa a janela do browser. Objeto


de nvel superior.

RESUMO GERAL DE MTODOS JAVASCRIPT


MTODOS DO OBJETO DOCUMENT
MTODO

DESCRIO

clear

Limpa a janela (window).

close

Fecha o documento atual.


Permite a incluso de texto no corpo do

write

documento.
Permite a incluso de texto no corpo do

writeln

documento com um caractere de nova


linha anexado.

MTODOS DO OBJETO FORM


MTODO

DESCRIO
Quando remove o foco de um campo do

blur()

tipo text, textarea e campos de senha


password.
Quando dado um clique sobre um

click()

elemento de boto em formulrio ou


campos do tipo radio e checkbox.
Quando dado o foco sobre um campo

focus()

do tipo text, textarea e campos de


senha password.
Quando selecionado o contedo de um

select()

campo

do

tipo

text,

textarea

ou

enviado

ao

password.
submit()

Quando
servidor.

formulrio

MTODOS DO OBJETO DATE


MTODO
getDate

DESCRIO
Retorna

dia

do

ms

da

data

especificada a partir de um objeto date.


Retorna

dia

da

semana

da

data

especificada. O valor retornado um


getDay

valor inteiro correspondente ao dia da


semana, sendo 0 para Domingo, 1 para
Segunda-feira e assim por diante

getFullYear

Retorna o ano composto de 4 dgitos.


Retorna a hora para a data especificada.

getHours

O valor retornado corresponde a um


nmero inteiro entre 0 e 23.
Retorna

getMinutes

os

especificada.

minutos
O

na

valor

hora

retornado

corresponde a um nmero inteiro entre


0 e 59.
Retorna o ms da data especificada. O
valor

getMonth

retornado

corresponde

um

nmero inteiro entre 0 a 11, sendo 0


para janeiro, 1 para fevereiro e assim
por diante
Retorna

getSeconds

os

segundos

especificada.

valor

da

data

retornado

corresponde a um nmero inteiro entre


0 e 59.
Retorna o nmero de segundos entre 1

getTime

de

janeiro

de

1970

uma

data

especfica.
getTimezoneOffset

Retorna a diferena de fuso horrio em

minutos para a localidade atual.


getYear

Retorna o ano de uma data especfica.


Retorna o nmero de milessegundos de

parse

uma data a partir de 1 de janeiro de


1970, 00:00:00
Estabelece o dia do ms para uma data

setDate

especificada sendo um inteiro entre 1 ou


31.
Estabelece

setHours

hora

para

uma

data

especificada, sendo um inteiro entre 0 e


23, representando a hora dia.
Estabelece

setMinutes

os

minutos

para

data

especificada, sendo um inteiro entre 0 e


59.
Estabelece

setMonth

ms

para

data

especificada, sendo um inteiro entre 0 e


11 para o ms.
Estabelece o nmero de segundos para

setSeconds

data

especificada,

sendo

um

inteiro

entre 0 e 59.
Estabelece o valor do objeto date, sendo
setTime

um inteiro representando o nmero de


milisegundos desde 1 de janeiro de
1970.

setYear
toGMTString

toLocaleString

Define o ano de uma data especfica


Converte a data para string usando as
convenes da GMT.
Converte uma data para string, usando
as convenes locais.

Retorna uma string representando a

toString

data especificada
Converte

UTC

uma

data

delimitada

por

vrgulas para o nmero de segundos a


partir de 1 de janeiro de 1970.

MTODOS DO OBJETO HISTORY


EVENTO

DESCRIO
Representa

Back

URL

visitada

anteriormente.
Representa a URL que estava antes de

Forward

voltar.
Representa uma URL que esteja na

Go

relao de URLs visitadas.

MTODOS DO OBJETO MATH


MTODOS
Abs
Aos

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.

Retorna o logartmo do mmero na base

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

nmero (base E).

Max(num1,num2)

Retorna o maior valor de dois nmeros.

Min(num1,num2)

Retorna o menor valor de dois nmeros.

Pow(base,expoente)

Retorna a base elevada ao expoente.


Retorna um nmero aleatrio entre 0 e

Random()

1.
Retorna o valor arrendondado de um

Round

inteiro.

Sin

Retorna o seno de um nmero.

Sqrt

Retorna a raiz quadrada de um nmero.

Tan

Retorna a tangente de um nmero.

MTODOS DO OBJETO STRING


MTODOS
Anchor

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

uma nova string.


Apresenta

string

em

fonte

monoespao. Similar ao tag <TT>.


Apresenta uma string com uma cor

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

Apresenta o texto em itlico da mesma


forma que o tag <I>.
Retorna a posio dentro da string da

LastindexOf

ltima ocorrncia do texto procurado.


Ex: string.lastIndexOf(valor,[ndice]).

Link(href)

Cria um link HTML. Similar ao tag


<A HREF>.
Extrai uma parte de uma string. Onde

Slice (incio,fim)

incio o caractere inicial da string e fim


o caractere final.

Small

sub

Apresenta a fonte em tamanho menor


da mesma forma do tag <SMALL>.
Apresenta a fonte em formato subscrito,
da mesma forma do tag <SUB>.

Apresenta
sup

fonte

em

formato

sobrescrito, da mesma forma do tag


<SUP>.

substring(indexA,indexB)

Retorna um pedao de um objeto string.


Converte

toLowerCase

string

em

caracteres

string

em

caracteres

minsculos.
Converte

toUpperCase

maisculos.

MTODOS DE INTERFACE COM O USURIO


MTODOS

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

entrada de informao ao usurio.

MTODOS DO OBJETO WINDOW


MTODOS
clear

DESCRIO
Limpa a janela.
Limpa um contador de tempo definido

clearTimeout

anteriormente

com

setTimeout.
close

Fecha uma janela.

open

Abre uma janela

setTimeout

Define um contador de tempo.

mtodo

Você também pode gostar