Javascript Aplicações

8/14/2019 Javascript Aplicaes

1/234

JavaScript AplicaesInterativas para a Web

ADRIANO GOMES LIMA

BELO HORIZONTE2006


2/234

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

JAVA E JAVASCRIPT ..............................................................................9

VBSCRIPT E JAVASCRIPT..................................................................... 10AS 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 .................................... 26OPERADORES RELACIONAIS ................................................................ 28

OPERADORES RELACIONAIS ................................................................ 28

OPERADORES LGICOS....................................................................... 28

OPERADOR DE CONCATENAO DE STRING .......................................... 29

DECLARAES ....................................................................................30

OPERADOR NEW................................................................................. 30

PALAVRA-CHAVE THIS......................................................................... 30BREAK............................................................................................... 30


3/234

UTILIZAO DE COMENTRIOS............................................................ 31

VAR .................................................................................................. 32

DESENVOLVIMENTO DE SCRIPTS........................................................33

DESENVOLVENDO SCRIPTS COM O TAG ................................ 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 ............................................................................................ 48INSTRUO WITH .............................................................................. 49

OBJETO ARGUMENTS .......................................................................... 54

UTILIZANDO EVENTOS .......................................................................56

EVENTO ONBLUR................................................................................ 56

EVENTO ONCHANGE ........................................................................... 57

EVENTO ONCLICK............................................................................... 57

EVENTO ONFOCUS.............................................................................. 57EVENTO ONLOAD................................................................................ 58

EVENTO ONUNLOAD ........................................................................... 58

EVENTO ONMOUSEOVER ..................................................................... 58

EVENTO ONMOUSEOUT ....................................................................... 59

EVENTO ONMOUSEDOWN.................................................................... 60

EVENTO ONMOUSEUP ......................................................................... 60

EVENTO ONKEYPRESS......................................................................... 60


4/234


5/234

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...............................................................................96PROPRIEDADES 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 ..........................................................101ABRINDO 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


6/234

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 ................................................................... 123MTODO TOLOCALESTRING............................................................... 123

EXERCCIOS .................................................................................... 126

OBJETO DOCUMENT..........................................................................128

PROPRIEDADES DO OBJETO DOCUMENT ............................................. 128

MTODOS DO OBJETO DOCUMENT ..................................................... 132

MTODO CLEAR................................................................................ 132

MTODO CLOSE ............................................................................... 133MTODO WRITE E WRITELN............................................................... 134

EXERCCIOS .................................................................................... 136

OBJETO LINK....................................................................................148

PROPRIEDADES DO OBJETO LINKS..................................................... 148

UTILIZANDO ARRAYS .......................................................................149

ARRAY ANCHORS[] ........................................................................... 153

ARRAY ELEMENTS[] .......................................................................... 154


7/234

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................................................................................. 182EVITANDO 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 ............................................................. 203UTILIZANDO 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


8/234

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


9/234

INTRODUO A LINGUAGEM JAVASCRIPTINTRODUO A LINGUAGEM JAVASCRIPTINTRODUO A LINGUAGEM JAVASCRIPTINTRODUO 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 a linguagem Java, por esta razo, a 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


10/234


11/234

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 comando do JavaScript s seja executado emdeterminado browser, facilitando ainda mais que suas pginas 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 pginada Web, criado um determinado nmero de objetos JavaScript, com


12/234

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:

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________


13/234

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

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, sendo este objeto tambm uma propriedade do objeto

DOCUMENT.

BROWSER nave ador

Math DateWindow/

FrameNavigator String

Document

FormLink Anchor

SelectButton

Submit

Text

TextAreaRadio Checkbox


14/234

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

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


15/234

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:

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.


16/234

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:

MANIPULADORES DE EVENTOS UTILIZADOS

EVENTO MANIPULADOR DESCRIO

blur onBlurOcorre quando o usurioretira o foco de um objeto

de formulrio.

change onChange

Ocorre quando o usurio

muda o valor de um objeto

de formulrio.

click onClick


clica sobre o objeto.

focus onFocusOcorre quando o usurio

focaliza o objeto.

load onLoadOcorre quando o usurio

carrega a pgina.

unload onUnloadOcorre quando o usurio

abandona a pgina.

mouseOver onMouseOver

Ocorre quando o ponteiro

do mouse passa sobre um

link ou ncora. Vlidos

apenas para hiperlinks.

select onSelect


seleciona um elemento de

um formulrio.


17/234

EVENTO MANIPULADOR DESCRIO

submit onSubmitOcorre quando o usurio

envia um formulrio.

mouseDown onMouseDownOcorre quando o boto do

mouse pressionado.

mouseMove onMouseMove


do mouse se movimenta

sobre o objeto.

mouseOut onMouseOut


do mouse afasta de umobjeto. Vlidos apenas

para hiperlinks.

mouseUp onMouseUpOcorre quando o boto do

mouse solto.

keyDown onKeyDownOcorre quando uma tecla

segurada.

keyPress onKeyPressOcorre quando uma tecla

pressionada.

keyUp onKeyUpOcorre 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 oexemplo a seguir:

Manipuladores de Eventos


18/234

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 a

seguinte linha abaixo:

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:

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________


19/234

ELEMENTOS DA LINGUAGEMELEMENTOS DA LINGUAGEMELEMENTOS DA LINGUAGEMELEMENTOS 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


20/234

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 quandoo documento descarregado.

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

maneira:

var nome, endereco, telefone;


21/234

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:

CLCULOS

valor=30

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

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.


22/234

Caso tenha que executar outro clculo abaixo do primeiro, utilize o tag HTML

aps o clculo, separando-o com vrgula e entre aspas. Veja o exemplo

abaixo:

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

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 .

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

lembre-se que estas instrues devero estar entre as tags HTML

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


23/234

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


24/234

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.

\XXX

Caractere 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


25/234

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


26/234

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


27/234

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:

______________________________________________________

______________________________________________________


28/234

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


29/234

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


30/234

DECLARAESDECLARAESDECLARAESDECLARAES

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

BREAKEsta 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


31/234

UTILIZAO DE COMENTRIOS

Assim como qualquer outra linguagem de programao, a 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 ainstruo /*, 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 Tagde comentrio em um script formada da seguinte forma:

Observe que no final do script, foi definido um comentrio de uma linha detexto no JavaScript, encerrando-se com o Tag de Fechamento da Linguagem


32/234

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:

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________


33/234

DESENVOLVIMENTO DE SCRIPTSDESENVOLVIMENTO DE SCRIPTSDESENVOLVIMENTO DE SCRIPTSDESENVOLVIMENTO 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 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

Com o Tag possvel ao usurio incorporar seus scripts dentro de

uma pgina HTML. Veja a sintaxe de utilizao deste Tag:

instrues do JavaScript...

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



34/234

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:


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 mesmaforma 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 noarquivo externo, basta utilizar o seguinte parmetro na pgina HTML:

Veja pela figura abaixo o cone que representa um arquivo externo com

instrues da linguagem JavaScript:


35/234

Conforme dito anteriomente, a linguagem JavaScript interpretada pelo

browser e que seu cdigo embutido dentro do cdigo HTML entre os tags

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


36/234

NOTIFICAO DE ERROSNOTIFICAO DE ERROSNOTIFICAO DE ERROSNOTIFICAO DE ERROS

Alm dos comentrios, que iro evitar que os navegadores mais antigos

exibam algum cdigo JavaScript que no reconhecido, durante o

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:


37/234

Feito isto, qualquer erro existente em seu programa ser notificado pelo

browser de acordo com a figura abaixo:

ANOTAES:

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________


38/234

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


39/234

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


40/234

window.confirm("Tem Certeza??");

ou

confirm("Tem Certeza??");


41/234

COMANDOS CONDICIONAIS E REPETIOCOMANDOS CONDICIONAIS E REPETIOCOMANDOS CONDICIONAIS E REPETIOCOMANDOS 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


42/234

}

alert("Obrigado, "+form1.nome.value);

}

Nome:

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


43/234

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

at 10, acrescentando um valor de cada vez:

for (i=1 ; i


44/234

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:


45/234

if (condio) {

comandos

} else if (condio2) {

comandos

} else {

comandos

}

Veja um exemplo da utilizao da instruo if:

function condicao(){

if(form1.nome.value==""){

alert("Favor Preencher o campo");

return form1.nome.focus();

}

}

Nome:

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


46/234

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

}

}

Nome:

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 noesteja 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 aseguinte formao:

(condio) ? Valor verdadeiro : Valor falso;

Onde condio, a expresso ser avaliada.


47/234

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


48/234

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;

}


49/234

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:

alert(Math.PI);

alert(Math.round(1234.5678));

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:

with (Math){

alert(PI);

alert(round(1234.5678));

}

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

Math vrias vezes.


50/234

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.


51/234

FUNESFUNESFUNESFUNES

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


52/234

note que aps a funo foi feita sua chamada, bastando para tanto redigir seu

nome, observe:



}

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:

UTILIZANDO FUNES



}


53/234

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:

function exemplo(texto){

alert(texto);

}

exemplo("Curso de JavaScript");

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:

var ret=prompt("digite o nome","");

var shor=mostranome(ret);

alert(shor);

function mostranome(nome){

if (nome=="" || nome==null)

return ("erro");

else


54/234

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:

mensagem("SENAC","Minas Gerais");

function mensagem(mensagem1,mensagem2){

alert(mensagem1);

alert(mensagem2);

}

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:

mensagem("SENAC","Minas Gerais");

mensagem("CFP","Informtica");

function mensagem(){

for (i=0;i


55/234

alert(mensagem.arguments[i]);

}

}


56/234

UTILIZANDOUTILIZANDOUTILIZANDOUTILIZANDO EVENTOSEVENTOSEVENTOSEVENTOS

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:

Digite seu Nome:

Veja agora outro exemplo, criando uma funo para que caso o usurio deixe o

campo em branco, seja exibida a mensagem de alerta:

Digite seu Nome:


57/234

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:

EVENTO ONCLICK

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

EVENTO ONFOCUS

Com o manipulador onFocus o usurio poder criar uma ao sempre que os

elementos select, text ou textarea receberem o foco. Ao contrrio do evento

onBlur que executa aes sempre que o elemento perde o foco. Veja um

exemplo de sua utilizao:


58/234

Digite seu Nome:

Digite seu Endereo:

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:

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 alertaassim que o usurio deixa a pgina:

EVENTO ONMOUSEOVER


59/234

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:

SENAC

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:

SENAC

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


60/234

SENAC

EVENTO ONMOUSEDOWN

O evento onMouseDown ocorre sempre que pressionado o boto do mouse.

Veja pelo exemplo apresentado abaixo:

SENAC

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


61/234

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:

Digite seu Nome:

EVENTO ONSUBMIT

O evento onSubmit ocorre sempre que o usurio envia o formulrio. Com este

evento o usurio poder determinar ou no o envio do formulrio. Vejamos um

exemplo para sua utilizao:

Com este evento o usurio poder verificar a validao de dados, como porexemplo 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:


62/234

function teste(){

if (form1.campo1.value==""){

alert("FAVOR PREENCHER");

return(false);

} else {

return(true);

}

}

-->

Digite seu Nome:


63/234

FUNES DA LINGUAGEM JAVASCRIPTFUNES DA LINGUAGEM JAVASCRIPTFUNES DA LINGUAGEM JAVASCRIPTFUNES 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:

valor=5

alert(eval("2*valor"));


64/234

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.


65/234

function condicao(valor){

if(isNaN(valor)){

alert("No um nmero!!!");

}

}

Nome:

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.

valor=parseFloat("123,456");

alert(valor)+1;


66/234

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:

valor=parseInt("123.456");

alert(valor);

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:


67/234

2 Binrio.

8 Octal.

10 Decimal.

16 Hexadecimal.

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

definido est no formato decimal.


68/234

FUNES PRFUNES PRFUNES PRFUNES PR----PROGRAMADASPROGRAMADASPROGRAMADASPROGRAMADAS

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:


69/234

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)

{


70/234

sizer.resizeTo(sizewidth, sizeheight);

}

sizer.location = website;

}

else

window.location = website;

}

// End -->

Open JavaScriptSource.com!

TEXTO NA BARRA DE STATUS EM MOVIMENTO

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)


71/234

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


72/234

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

}

// -->

TABELA DE CORES

function geraTabela() {

document.write('');

var valores = "00336699CCFF";

var r, g, b;

var cor;

for (r=0; r


73/234


74/234

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

}

// -->


75/234


76/234

OBJETOS PROBJETOS PROBJETOS PROBJETOS PR----CONSTRUDOSCONSTRUDOSCONSTRUDOSCONSTRUDOS

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.


77/234

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:


78/234

OBJETO STRINGOBJETO STRINGOBJETO STRINGOBJETO 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 DESCRIO

length 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


79/234

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

Ancora="Incio do Documento";

valor=Ancora.anchor("inicio");

document.write(valor);

Este script poderia ser utilizado pela linguagem HTML atravs do seguinte

cdigo:

Incio do Documento

MTODO BIG

Este mtodo substitui o tag HTML , 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:


80/234

texto="SENAC-MG";

document.write(texto.big());

MTODO SMALL

Este mtodo substitui o tag HTML que tem a funo de reduzir o

tamanho da fonte. Para utiliz-lo, siga a seguinte sintaxe:

String.small();


texto="SENAC-MG";

document.write(texto.small());

MTODO BOLD

Referente ao tag HTML que tem a funo de atribuir o estilo de negrito

sobre o texto. Sua sintaxe segue o seguinte padro:

String.bold();


texto="SENAC-MG";

document.write(texto.bold());


81/234

MTODO ITALICS

Este mtodo referente ao tag HTML 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

texto="SENAC-MG";

document.write(texto.italics());

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

sintaxe segue a seguinte composio:

String.fixed();

Exemplo de utilizao do mtodo fixed:

texto="SENAC-MG";

document.write(texto.fixed());texto2="ADRIANO LIMA".fixed();

document.write("
",texto2);


82/234

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

. Sua sintaxe bsica segue o seguinte padro:

texto="SENAC-MG";

document.write(texto.strike());

MTODO FONTCOLOR

Determina a cor da fonte em um texto de acordo com o tag HTML .

SINTAXE

String.fontcolor(cor);

Exemplo de utilizao do mtodo fontcolor:

texto="SENAC-MG";document.write(texto.fontcolor("red"));

document.write("Informtica".fontcolor("blue"));

O mtodo fontcolor aceita nomes de cores slidas, assim como, os valores

hexadecimais da cor referente.


83/234

MTODO FONTSIZE

Este mtodo, determina o tamanho da fonte seguindo os padres do tag HTML

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:

texto="SENAC-MG";

document.write(texto.fontsize(7));

MTODO SUB

Este mtodo cria um texto subscrito tendo o mesmo efeito do tag HTML

. Sua sintaxe bsica tem a seguinte formao:

String.sub();

Veja um exemplo para sua utilizao:

texto="SENAC-MG";

document.write(texto.sub());

MTODO SUP

Este mtodo cria um texto sobrescrito tendo o mesmo efeito do tag HTML

. Sua sintaxe bsica tem a seguinte formao:


84/234


85/234

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:

texto="SENAC-MG";

document.write(texto.indexOf("A"));

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


86/234


87/234

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

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:

texto="SENAC-MG";

document.write(texto.substring(0,4));


88/234

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:

texto="SENAC-MG";

document.write(texto.toLowerCase));

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:

texto="senac-mg";

document.write(texto.toUpperCase));


89/234

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

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:

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


90/234

outra imagem. Note que foi feita uma referncia para inserir nova imagem

no local da imagem atual.

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:

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:


91/234

function figura(valor){

document.senac.width=valor;

}

ANOTAES:

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________

______________________________________________________


92/234

MTODOS DE INTERFACMTODOS DE INTERFACMTODOS DE INTERFACMTODOS DE INTERFACE COM O USURIOE COM O USURIOE COM O USURIOE 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);


93/234

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

do mtodo alert:

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

Com o mtodo alert possvel exibir vrios tipos de valores como numricos,

strings, booleanos, entre outros. Veja outras maneiras de utilizao do mtodo

alert:

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.

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


94/234

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:

teste=confirm("Tem certeza que deseja fechar?");

if (teste==1){

alert("Arquivos fechados");

}else{

alert("Operao Cancelada");

}

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:

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


95/234

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

Os possveis valores a serem retornados pelo mtodo prompt so:

String, quando o usurio digita um t

Documents

Javascript Aplicações