Upload
juliano-dos-santos-da-silva
View
215
Download
0
Embed Size (px)
Citation preview
8/14/2019 Javascript Aplicaes
1/234
JavaScript AplicaesInterativas para a Web
ADRIANO GOMES LIMA
BELO HORIZONTE2006
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
4/234
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
10/234
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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
Ocorre quando o usurio
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
Ocorre quando o usurio
seleciona um elemento de
um formulrio.
8/14/2019 Javascript Aplicaes
17/234
EVENTO MANIPULADOR DESCRIO
submit onSubmitOcorre quando o usurio
envia um formulrio.
mouseDown onMouseDownOcorre quando o boto do
mouse pressionado.
mouseMove onMouseMove
Ocorre quando o ponteiro
do mouse se movimenta
sobre o objeto.
mouseOut onMouseOut
Ocorre quando o ponteiro
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
8/14/2019 Javascript Aplicaes
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:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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;
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
______________________________________________________
______________________________________________________
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
8/14/2019 Javascript Aplicaes
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:
instrues do JavaScript...
8/14/2019 Javascript Aplicaes
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:
instrues do JavaScript...
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:
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
37/234
Feito isto, qualquer erro existente em seu programa ser notificado pelo
browser de acordo com a figura abaixo:
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
40/234
window.confirm("Tem Certeza??");
ou
confirm("Tem Certeza??");
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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;
}
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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,
8/14/2019 Javascript Aplicaes
52/234
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:
UTILIZANDO FUNES
function primeiraFuncao(){
alert("Isto uma funo JavaScript");
}
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
55/234
alert(mensagem.arguments[i]);
}
}
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
62/234
function teste(){
if (form1.campo1.value==""){
alert("FAVOR PREENCHER");
return(false);
} else {
return(true);
}
}
-->
Digite seu Nome:
8/14/2019 Javascript Aplicaes
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"));
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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;
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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)
{
8/14/2019 Javascript Aplicaes
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)
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
73/234
8/14/2019 Javascript Aplicaes
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);
}
// -->
8/14/2019 Javascript Aplicaes
75/234
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
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();
Veja o exemplo de utilizao deste mtodo:
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();
Veja o exemplo de utilizao deste mtodo:
texto="SENAC-MG";
document.write(texto.bold());
8/14/2019 Javascript Aplicaes
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);
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
84/234
8/14/2019 Javascript Aplicaes
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.
8/14/2019 Javascript Aplicaes
86/234
8/14/2019 Javascript Aplicaes
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));
8/14/2019 Javascript Aplicaes
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));
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:
8/14/2019 Javascript Aplicaes
91/234
function figura(valor){
document.senac.width=valor;
}
ANOTAES:
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
8/14/2019 Javascript Aplicaes
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);
8/14/2019 Javascript Aplicaes
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
8/14/2019 Javascript Aplicaes
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:","");
8/14/2019 Javascript Aplicaes
95/234
alert(teste+" seja Bem Vindo!");
Os possveis valores a serem retornados pelo mtodo prompt so:
String, quando o usurio digita um t