3317 javascript
TRANSCRIPT
JavaScript Aplicaes Interativas para a Web
ADRIANO GOMES LIMA
BELO HORIZONTE 2006
INTRODUO A LINGUAGEM JAVASCRIPT............................................9 JAVA E JAVASCRIPT .............................................................................. 9 VBSCRIPT E JAVASCRIPT ..................................................................... 10 AS VERSES DO JAVASCRIPT .............................................................. 10 COMPATIBILIDADE ENTRE BROWSERS ................................................. 11 GUIA DE REFERNCIA NA INTERNET ..................................................... 11 ORIENTAO A OBJETOS .................................................................... 11 MANIPULAO DE OBJETO .................................................................. 13 PROPRIEDADES DE OBJETOS ............................................................... 14 MTODOS DE OBJETOS ....................................................................... 14 EVENTOS........................................................................................... 15 MANIPULADORES DE EVENTOS UTILIZADOS.......................................... 16 VARIVEIS ........................................................................................ 19 NOMES DE VARIVEIS ........................................................................ 19 LITERAIS ........................................................................................... 22 INTEIROS (INTEGER) .......................................................................... 23 PONTO FLUTUANTE............................................................................. 23 BOOLEANOS ...................................................................................... 23 LITERAIS STRING ............................................................................... 23 CARACTERES ESPECIAIS ..................................................................... 24 EXPRESSES ..................................................................................... 24 OPERADORES..................................................................................... 25 OPERADORES DE INCREMENTO E DECREMENTO .................................... 26 OPERADORES RELACIONAIS ................................................................ 28 OPERADORES RELACIONAIS ................................................................ 28 OPERADORES LGICOS....................................................................... 28 OPERADOR DE CONCATENAO DE STRING .......................................... 29 DECLARAES ....................................................................................30 OPERADOR NEW................................................................................. 30 PALAVRA-CHAVE THIS......................................................................... 30 BREAK............................................................................................... 30
UTILIZAO DE COMENTRIOS............................................................ 31 VAR .................................................................................................. 32 DESENVOLVIMENTO DE SCRIPTS........................................................33 DESENVOLVENDO SCRIPTS COM O TAG ................................ 33 DESENVOLVENDO SCRIPTS ATRAVS DE UM ARQUIVO EXTERNO............. 34 NOTIFICAO DE ERROS ....................................................................36 INSTRUES BSICAS .......................................................................38 MTODO DOCUMENT.WRITE().............................................................. 38 MTODO ALERT() ............................................................................... 39 MTODO CONFIRM() ........................................................................... 39 COMANDOS CONDICIONAIS E REPETIO .........................................41 INSTRUO WHILE ............................................................................. 41 INSTRUO FOR ................................................................................ 42 INSTRUO FOR...IN .......................................................................... 43 IF ... ELSE ......................................................................................... 44 RETURN............................................................................................. 47 SWITCH ............................................................................................ 48 INSTRUO WITH .............................................................................. 49 OBJETO ARGUMENTS .......................................................................... 54 UTILIZANDO EVENTOS .......................................................................56 EVENTO ONBLUR ................................................................................ 56 EVENTO ONCHANGE ........................................................................... 57 EVENTO ONCLICK............................................................................... 57 EVENTO ONFOCUS.............................................................................. 57 EVENTO ONLOAD................................................................................ 58 EVENTO ONUNLOAD ........................................................................... 58 EVENTO ONMOUSEOVER ..................................................................... 58 EVENTO ONMOUSEOUT ....................................................................... 59 EVENTO ONMOUSEDOWN .................................................................... 60 EVENTO ONMOUSEUP ......................................................................... 60 EVENTO ONKEYPRESS......................................................................... 60
EVENTO ONKEYDOWN......................................................................... 60 EVENTO ONKEYUP .............................................................................. 60 EVENTO ONSELECT............................................................................. 61 EVENTO ONSUBMIT ............................................................................ 61 FUNES DA LINGUAGEM JAVASCRIPT ..............................................63 FUNO EVAL .................................................................................... 63 FUNO ISNAN .................................................................................. 64 FUNO PARSEFLOAT ......................................................................... 65 FUNO PARSEINT ............................................................................. 66 FUNES PR-PROGRAMADAS ...........................................................68 IMPRESSO DA PGINA ...................................................................... 68 ADICIONAR AO FAVORITOS ................................................................. 68 JANELA EM MOVIMENTO...................................................................... 69 TEXTO NA BARRA DE STATUS EM MOVIMENTO ...................................... 70 TABELA DE CORES.............................................................................. 72 TEXTO EM MOVIMENTO EM UM CAMPO DE FORMULRIO ......................... 73 OBJETOS PR-CONSTRUDOS .............................................................76 OBJETO DATE .................................................................................... 76 MTODOS DO OBJETO DATE ................................................................ 77 OBJETO STRING .................................................................................78 PROPRIEDADES .................................................................................. 78 PROPRIEDADES DO OBJETO STRING..................................................... 78 MTODOS DO OBJETO STRING............................................................. 78 MTODO ANCHOR............................................................................... 79 MTODO BIG ..................................................................................... 79 MTODO SMALL ................................................................................. 80 MTODO BOLD ................................................................................... 80 MTODO ITALICS ............................................................................... 81 MTODO FIXED .................................................................................. 81 MTODO STRIKE ................................................................................ 82 MTODO FONTCOLOR ......................................................................... 82
MTODO FONTSIZE ............................................................................ 83 MTODO SUB ..................................................................................... 83 MTODO SUP ..................................................................................... 83 MTODO charAT ................................................................................. 84 MTODO INDEXOF .............................................................................. 84 MTODO LASTINDEXOF....................................................................... 85 MTODO LINK .................................................................................... 86 MTODO REPLACE .............................................................................. 86 MTODO SUBSTRING .......................................................................... 87 MTODO TOLOWERCASE ..................................................................... 88 MTODO TOUPPERCASE ...................................................................... 88 OBJETO IMAGE ...................................................................................89 MTODOS DE INTERFACE COM O USURIO.........................................92 MTODO ALERT .................................................................................. 92 MTODO CONFIRM ............................................................................. 93 MTODO PROMPT ............................................................................... 94 OBJETO WINDOW ...............................................................................96 PROPRIEDADES DO OBJETO WINDOW/FRAME........................................ 96 WINDOW.STATUS E DEFAULTSTATUS ................................................... 97 MTODO OPEN ................................................................................... 97 MTODO CLOSE ................................................................................. 98 MTODO SETTIMEOUT ........................................................................ 98 MTODO CLEARTIMEOUT................................................................... 100 TRABALHANDO COM JANELAS .......................................................... 101 ABRINDO PGINAS EM FULLSCREEN (Tela Cheia)................................. 110 O OBJETO MATH ............................................................................... 111 PROPRIEDADES DE CLCULO DO OBJETO MATH................................... 111 MTODOS DO OBJETO MATH ............................................................. 112 ABS ................................................................................................ 112 ACOS .............................................................................................. 112 ASIN ............................................................................................... 113
CEIL................................................................................................ 113 COS ................................................................................................ 114 EXP................................................................................................. 114 FLOOR............................................................................................. 114 LOG ................................................................................................ 115 MAX ................................................................................................ 115 POW (base,expoente) ....................................................................... 116 RANDOM ......................................................................................... 116 ROUND............................................................................................ 117 SIN ................................................................................................. 118 SQRT .............................................................................................. 118 TAN ................................................................................................ 118 OBJETO DATE .................................................................................. 119 MTODOS GET DO OBJETO DATE ....................................................... 119 MTODO PARSE E UTC ...................................................................... 121 MTODOS SET DO OBJETO DATE........................................................ 122 MTODO TOGMTSCRING ................................................................... 123 MTODO TOLOCALESTRING ............................................................... 123 EXERCCIOS .................................................................................... 126 OBJETO DOCUMENT .......................................................................... 128 PROPRIEDADES DO OBJETO DOCUMENT ............................................. 128 MTODOS DO OBJETO DOCUMENT ..................................................... 132 MTODO CLEAR................................................................................ 132 MTODO CLOSE ............................................................................... 133 MTODO WRITE E WRITELN............................................................... 134 EXERCCIOS .................................................................................... 136 OBJETO LINK .................................................................................... 148 PROPRIEDADES DO OBJETO LINKS ..................................................... 148 UTILIZANDO ARRAYS ....................................................................... 149 ARRAY ANCHORS[] ........................................................................... 153 ARRAY ELEMENTS[] .......................................................................... 154
EXERCCIOS: ................................................................................... 157 MANIPULANDO FRAMES ................................................................... 161 HIERARQUIA FRAMESET WINDOW ...................................................... 163 OBJETO FORM................................................................................... 170 PROPRIEDADES DO OBJETO FORMS.................................................... 170 MTODOS DO OBJETO FORM ............................................................. 172 ELEMENTOS DE UM FORMULRIO ....................................................... 172 OBJETO TEXT ................................................................................... 173 MANIPULADORES DE EVENTO PARA FORMULRIOS .............................. 173 OBJETO PASSWORD.......................................................................... 176 OBJETO TEXTAREA ........................................................................... 176 OBJETO BUTTON .............................................................................. 177 OBJETO SUBMIT ............................................................................... 178 OBJETO RESET ................................................................................. 179 OBJETO CHECKBOX (Caixa de Verificao)........................................... 179 MANIPULADORES DE EVENTO ............................................................ 181 OBJETO RADIO................................................................................. 182 EVITANDO O USO DA TECLA ENTER .................................................... 187 OBJETO LOCATION ........................................................................... 189 PROPRIEDADES DO OBJETO LOCATION ............................................... 190 EXERCCIOS .................................................................................... 192 UTILIZANDO O OBJETO HISTORY ....................................................... 203 PROPRIEDADE.................................................................................. 203 MTODOS BACK E FORWARD ............................................................. 203 UTILIZANDO O OBJETO NAVIGATOR ................................................... 205 UTILIZANDO O OBJETO NAVIGATOR ................................................... 205 PROPRIEDADES DO OBJETO NAVIGATOR............................................. 205 ACESSANDO CDIGO-FONTE A PARTIR DE UM LINK ............................. 207 UTILIZANDO COOKIES ..................................................................... 209 Criando Cookies ............................................................................... 210 DEPURAO DE CDIGO .................................................................. 219
ISOLAMENTO DE PROBLEMAS ............................................................ 219 ERROS EM TEMPO DE CARREGAMENTO (Load-Time) ............................. 220 ERROS EM TEMPO DE EXECUO (Run-Time) ...................................... 221 ERROS DE LGICA (Logic Errors) ....................................................... 221 ERROS COMUNS EXISTENTES ............................................................ 222 ANALISANDO A ORIGEM DOS ERROS .................................................. 223 OUTROS ERROS COMUNS .................................................................. 224 RESUMO GERAL DE OBJETOS JAVASCRIPT ....................................... 225 RESUMO GERAL DE MTODOS JAVASCRIPT ...................................... 228 MTODOS DO OBJETO DOCUMENT ..................................................... 228 MTODOS DO OBJETO FORM ............................................................. 228 MTODOS DO OBJETO DATE .............................................................. 229 MTODOS DO OBJETO HISTORY......................................................... 231 MTODOS DO OBJETO MATH ............................................................. 231 MTODOS DO OBJETO STRING........................................................... 232 MTODOS DE INTERFACE COM O USURIO ......................................... 234 MTODOS DO OBJETO WINDOW ........................................................ 234
INTRODUO A LINGUAGEM JAVASCRIPTDesenvolvida 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 JAVASCRIPTMesmo sendo uma extenso da linguagem HTML, o JavaScript uma linguagem baseada na linguagem Java. Com isto, o JavaScript suporta a maior parte das sintaxes e comandos da linguagem Java. A linguagem Java usada na criao de objetos e os chamados Applets (aplicativos que so executados em uma pgina da Internet). J a linguagem JavaScript, usada normalmente pelos programadores que fazem uso da
linguagem HTML para controlar dinamicamente o comportamento de objetos nas pginas.
nica limitao da linguagem JavaScript que ela suporta poucos tipos de dados, e implementa apenas alguns conceitos de orientao a objetos, ao contrrio da linguagem Java.
VBSCRIPT E JAVASCRIPTPara no ficar com uma tecnologia terceirizada, a MICROSOFT desenvolveu uma linguagem de scripts similar ao JavaScript denominada VBScript. Uma extenso da conhecida linguagem Visual Basic. A NETSCAPE por sua vez, no implementou esta linguagem em seu Browser, impedindo-o qualquer script que seja desenvolvido na linguagem VBScript de ser executado em seu Browser.
AS VERSES DO JAVASCRIPTAtualmente a verso utilizada do JavaScript a 1.5 que suportada pelo Netscape 6.0 e Internet Explorer 5.5, que contm todos os comandos da linguagem JavaScript.
Observe pela tabela a seguir, a relao das verses existentes do JavaScript e a sua aceitao pelos navegadores mais utilizados:
Verso do JAVASCRIPT: 1.0 1.1 1.2 1.3 1.4 1.5
SUPORTADA PELO: Netscape 2.0 / Explorer 3.0 Netscape 3.0 / Explorer 4.0 Netscape 4.0 e 4.5 / Explorer 4.0 Netscape 4.6 e 4.7 / Explorer 5.0 Internet Explorer 5 Netscape 6.0 / Explorer 5.5
A linguagem JavaScript assim como a linguagem HTML submetida uma norma internacional, o ECMA que originou a especificao ECMA-262, que determina o padro para a linguagem JavaScript, tambm conhecida como ECMAScript.
COMPATIBILIDADE ENTRE BROWSERS importante que o usurio evite usar comandos JavaScript que foram inseridos nas ltimas verses, a no ser que o usurio saiba anteriormente qual o browser so executados. claro que existem maneiras que garantem que um determinado browser, comando facilitando do JavaScript mais s que seja suas executado pginas em
determinado
ainda
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 INTERNETA 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 OBJETOSDiferente da Linguagem HTML, a linguagem JavaScript corresponde a programao orientada a objetos, isto significa que todos os elementos de uma pgina da Web so tratados como objetos. Estes objetos so agrupados de acordo com seu tipo ou finalidade. Dentro da linguagem JavaScript, so criados automaticamente objetos que permitem que o usurio possa criar novos objetos de acordo com sua convenincia. Ao ser carregada uma pgina da Web, criado um determinado nmero de objetos JavaScript, com
propriedades e valores prprios que so ajustados pelo contedo da prpria pgina. Todos eles seguem uma hierarquia que reflete toda a estrutura de uma pgina HMTL. A linguagem JavaScript pode ser utilizada para a criao de scripts tanto do lado cliente como do lado servidor. Seguindo a hierarquia de objetos da linguagem JavaScript, so criados os seguintes objetos ao ser carregada uma pgina: window: O objecto mais acima na hierarquia, contm propriedades que se aplicam a toda a janela. H tambm um objecto desta classe para todas as "sub-janelas" de um documento com frames location: Contm as propriedades da URL actual. history: Contm as propriedades das URLs visitadas anteriormente. document: Contm as propriedades do documento contido na janela, tais como o seu contedo, ttulo, cores, etc
ANOTAES: ______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
MANIPULAO DE OBJETOA 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 JavaScriptBROWSER (navegador)
Window/ Math Date Frame Navigator String
Document
Link
Form
Anchor
Button Select Submit
Text TextArea Radio Checkbox
Conforme visto no organograma apresentado, observe que existem vrios objetos e muitos deles pertencem outros, sendo chamados ento de propriedades. Veja pelo exemplo do objeto FORM que possui diversas propriedades, DOCUMENT. sendo este objeto tambm uma propriedade do objeto
PROPRIEDADES DE OBJETOSCada 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. Veja abaixo a sintaxe de utilizao de propriedades:
nomeObjeto.propriedade
MTODOS DE OBJETOSAlm das propriedades, os objetos podem conter mtodos que so funes pr-definidas pela linguagem JavaScript que iro executar determinada operao. Por exemplo dentro de um documento o usurio poder utilizar o mtodo de escrever neste documento para exibir um texto qualquer. Os mtodos estaro sempre associados algum objeto presente no documento e cada mtodo faz parte de um objeto especfico. No tente usar mtodos em objetos que no o utilizam, isto faz com que a linguagem JavaScript cause erro na execuo do script. Na maioria das vezes os mtodos so usados para
alterar o valor de uma propriedade ou executar uma tarefa especfica. Veja a sintaxe de utilizao dos mtodos:
nomeObjeto.mtodo(argumento)
Na sintaxe apresentada, nomeObjeto faz referncia ao objeto a ser utilizado e o qual sofrer uma ao do mtodo, j mtodo o nome de identificao do mtodo usado e entre parnteses (argumento) a expresso ou valor opcional que ser usada para alterar sobre o objeto.
EVENTOSEm 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.
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 Ocorre
DESCRIO quando o usurio
blur
onBlur
retira o foco de um objeto de formulrio. Ocorre quando o usurio
change
onChange
muda o valor de um objeto de formulrio.
click
onClick
Ocorre
quando
o
usurio
clica sobre o objeto. Ocorre quando o usurio
focus
onFocus
focaliza o objeto. Ocorre quando o usurio
load
onLoad
carrega a pgina. Ocorre quando o usurio
unload
onUnload
abandona a pgina. Ocorre quando o ponteiro
mouseOver
onMouseOver
do mouse passa sobre um link ou ncora. Vlidos
apenas para hiperlinks. Ocorre select onSelect quando o usurio
seleciona um elemento de um formulrio.
EVENTO submit
MANIPULADOR onSubmit Ocorre
DESCRIO quando o usurio
envia um formulrio. Ocorre quando o boto do mouse pressionado. Ocorre quando o ponteiro
mouseDown
onMouseDown
mouseMove
onMouseMove
do
mouse
se
movimenta
sobre o objeto. Ocorre quando o ponteiro mouseOut onMouseOut do mouse afasta de um
objeto.
Vlidos
apenas
para hiperlinks. mouseUp onMouseUp Ocorre quando o boto do mouse solto. Ocorre quando uma tecla segurada. Ocorre quando uma tecla pressionada. Ocorre quando uma tecla solta.
keyDown
onKeyDown
keyPress
onKeyPress
keyUp
onKeyUp
Vejamos a utilizao dos eventos dentro de alguns TAGs HTML, sem a necessidade de criarmos rotinas separadas para os mesmos. Vejamos o exemplo a seguir:
Manipuladores de Eventos
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: ______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
ELEMENTOS DA LINGUAGEMO 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.
VARIVEISAssim 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 VARIVEISO nome de uma varivel poder iniciar-se com uma letra ou atravs do caractere underscore seguido de letras ou nmeros. Outra semelhana do JavaScript com outras linguagens a diferenciao de de letras minsculas e maisculas. Veja alguns nomes vlidos para variveis:
nome
_senac
escola
Na linguagem JavaScript existem dois tipos de variveis que so:
GLOBAIS
usadas em qualquer parte de uma aplicao.
LOCAIS
usadas somente na rotina que foi desenvolvida.
Para criar variveis locais, necessrio que o usurio utilize a palavra-chave var. Veja a declarao de uma varivel local:
var nome=ADRIANO LIMA var soma=2002-25
As variveis definidas fora de uma funo sempre esto disponveis para todas as funes dentro do script que esto na mesma pgina. Estas variveis so referenciadas como variveis globais. As variveis que so definidas dentro de funo, tambm so globais, desde que no seja utilizado a instruo var em sua declarao.
Caso o usurio declare uma varivel dentro de uma funo atravs da instruo var, esta varivel passa a ser apenas local, ou seja, so utilizadas apenas para aquela funo onde foi declarada.
bom saber que, as variveis globais ficam na memria mesmo aps a execuo do script, estas variveis somente so liberadas da memria quando o documento descarregado.
As variveis podem ser declaradas tambm separadas por vrgula, da seguinte maneira:
var nome, endereco, telefone;
ou
var nome; var endereco; var telefone;
Outro
exemplo prtico de atribuio, atribuir um mesmo valor a mais de
uma varivel, da seguinte maneira:
var campo1 = campo2 = campo3 = 5
No exemplo anterior, foi atribudo o nmero 5 nas variveis campo1, campo2 e campo3.
Veja pelo exemplo do cdigo abaixo como manipular variveis atravs da linguagem JavaScript:
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.
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.LITERAISSo 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 2.1518 Adriano Gomes LimaNmero inteiro.
Nmero de ponto flutuante. Texto.Existem vrios tipos de literais,
eis os existentes:INTEIROS (INTEGER)Representam nmeros positivos,
negativos ou fracionrios. Exemplo:A=500 B=0.52 C=-32PONTO
FLUTUANTEEste 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.BOOLEANOSEste tipo de literal representa
valores lgicos que podem ser:TRUE ou 1 FALSE ou 0LITERAIS
STRINGEste literal representa qualquer cadeia de caracteres
envolvida por aspas ou apstrofo. Veja abaixo alguns exemplos:
Adriano Lima CFP-INFORMTICA 500Mesmo sendo nmero, as aspas fazem
com que o literal seja uma string.CARACTERES ESPECIAISEstes
caracteres so especificados dentro de uma string. Veja na tabela
abaixo estes caracteres e sua descrio:Caractere \n \t \r \f \t \ \
\\Descrio Insere uma quebra de linha. Insere uma tabulao. Insere um
retorno. Insere um caractere de barra. Tabulao. Apstrofo. Aspas.
Barra Invertida. Caractere representado pela\XXXcodificao Latin-1.
Exemplo \251 representa o caractere de copyright .OBS: As letras
dos operadores devem apresentar-se em letras minsculas.EXPRESSESUma
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=5Neste 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*2Neste 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 > 10J neste
exemplo foi usado a instruo condicional if que testa o resultado da
expresso numero+numero2 e em seguida o compara com o nmero 10. Se o
resultado da expresso for superior 10, a mesma retornar o valor
booleano TRUE, em caso contrrio o valor passa a ser
FALSE.OPERADORESOs 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=YAlm
deste caractere de atribuio, possvel a utilizao de outros
operadores como mostrado seguir:x += y x -= y x *= y x /= y x
%=yAnalisando 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 % yVeja a relao dos operadores que so utilizados na
linguagem JavaScript:ARITMTICOS Operador + * / % Adio Subtrao
Multiplicao Diviso Mdulo DescrioOBS: O operador Mdulo retorna o
resto da diviso do operandos um e dois.OPERADORES DE INCREMENTO E
DECREMENTOAlm dos operadores apresentados anteriormente, existe
outro tipo de operador que tm a tarefa de aumentar e/ou diminuir o
valor do operando. Ooperador 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 --variavelSempre 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 Arecebe o valor numrico 11.
analisando o caso contrrio:x = 10 A = ++xJ neste caso x
incrementado e o novo valor atribudo em A. O mesmo ocorre para o
operador de decremento.
ANOTAES:____________________________________________________________________________________________________________OPERADORES
RELACIONAISEstes 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 > < >=
SWITCHEsta instruo bem semelhante com uma estrutura IF, porm mais
eficiente em razo de ser mais simples sua utilizao e seu
entendimento. Veja a sintaxe utilizada para o uso de instrues
SWITCH:switch (expresso){ case CONSTANTE: comandos; break;case
CONSTANTE2: comandos; break;case default: comandos; break; }INSTRUO
WITHEsta 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.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.FUNESFunes 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,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"); } 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");
elsereturn (nome); }OBJETO ARGUMENTSNormalmente 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 Digite
seu Nome: EVENTO ONCHANGECom 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
ONCLICKO evento onClick utilizado em links, botes, radio, checkbox,
reset. Vejamos um exemplo de sua utilizao em um boto de
formulrio:EVENTO ONFOCUSCom o manipulador onFocus o usurio poder
criar uma ao sempre que os elementos select, text ou textarea
receberem o foco. Ao contrrio do evento onBlur que executa aes
sempre que o elemento perde o foco. Veja um exemplo de sua
utilizao:Digite seu Nome: Digite seu Endereo: EVENTO ONLOADConforme
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
ONUNLOADCom o evento onUnLoad o usurio pode determinar uma ao assim
que o usurio sai da pgina, seja por meio de um hiperlink ou at
mesmo fechando o navegador. Com base no exemplo anterior foi criado
uma mensagem de alerta assim que o usurio deixa a pgina:EVENTO
ONMOUSEOVERCom 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 ONMOUSEOUTCom este
evento o usurio poder determinar uma ao assim que o mouse sair de
cima de um hiperlink. Pelo exemplo do evento onMouseMove o usurio
consegue atribuir uma mensagem na barra de status, porm a mensagem
permanece, utilizando o evento onMouseOut, o usurio poder informar
o que deve acontecer quando o ponteiro do mouse sair do
objeto.Avaliando o exemplo anterior, vamos determinar que ao
ponteiro do mouse sair do hiperlink, a mensagem da barra de status
ser omitida. Veja pelo exemplo a seguir:SENAC
EVENTO ONMOUSEDOWNO evento onMouseDown ocorre sempre que
pressionado o boto do mouse. Veja pelo exemplo apresentado
abaixo:SENACEVENTO ONMOUSEUPO evento onMouseUp ocorre sempre que o
boto do mouse solto. Este evento segue os mesmos padres do evento
apresentado anteriormente.EVENTO ONKEYPRESSO evento onKeyPress
ocorre sempre que uma tecla pressionada. Este evento segue os
mesmos padres do evento apresentado anteriormente.EVENTO ONKEYDOWNO
evento onKeyDown ocorre sempre que uma tecla abaixada. Este evento
segue os mesmos padres do evento apresentado anteriormente.EVENTO
ONKEYUPO evento onKeyUp ocorre sempre que uma tecla solta. Este
evento segue os mesmos padres do evento apresentado
anteriormente.EVENTO ONSELECTO 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 ONSUBMITO evento onSubmit ocorre sempre que o usurio envia o
formulrio. Com este evento o usurio poder determinar ou no o envio
do formulrio. Vejamos um exemplo para sua utilizao:Com este evento
o usurio poder verificar a validao de dados, como por exemplo se
todos os campos do formulrio esto preenchidos.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:
Digite seu Nome: FUNES DA LINGUAGEM JAVASCRIPTAs 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 EVALEsta 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")); FUNO ISNANA 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. function condicao(valor){ if(isNaN(valor)){
alert("No um nmero!!!"); } } Nome: FUNO PARSEFLOATCom 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; FUNO
PARSEINTCom 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); valor=parseInt("0xff",16);
valor=parseInt("1111",2); valor=parseInt("765",8);//Converso
hexadecimal, retorna 255 //Converso hexadecimal, retorna 255
//Converso binrio, //Converso octal, retorna 15 retorna 501Vejamos
os valores de cada base existente:2 8 10 16Binrio. Octal. Decimal.
Hexadecimal.A omisso do parmetro radix, a linguagem JavaScript
assume que o valor definido est no formato decimal.PRFUNES
PR-PROGRAMADASAs 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
PGINAAtravs 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:"); for
(b=0; b
PROBJETOS PR-CONSTRUDOSA linguagem JavaScript possui objetos
padronizados para uso nos scripts. Dentre eles, temos:DATEManipula
datas e horas.STRINGManipula strings.MATHRealiza operaes
matemticas.OBJETO DATEO 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) novembro de
1975.atribui a varivel data, a data 23 deMTODOS DO OBJETO DATESe o
usurio desejar utilizar os mtodos do objeto de data, deve-se seguir
a seguinte sintaxe:NomeObjeto.mtodo(parmetros)Veja a relao dos
mtodos utilizados no objeto DATE:OBJETO STRINGPROPRIEDADESOs
objetos string so de nvel
superior.SINTAXEVarivel=valorS1=SENACPROPRIEDADES DO OBJETO
STRINGVeja na tabela a seguir a relao das propriedades do objeto
String:PROPRIEDADES lengthDESCRIO Comprimento de uma string.MTODOS
DO OBJETO STRINGOs 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 varivelTextString.mtodo()MTODO ANCHOREste 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 DocumentoMTODO
BIGEste 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: texto="SENAC-MG"; document.write(texto.big()); MTODO
SMALLEste 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
BOLDReferente 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()); MTODO ITALICSEste
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 FIXEDCom 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); MTODO STRIKEEste 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
FONTCOLORDetermina a cor da fonte em um texto de acordo com o tag
HTML .SINTAXEString.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.MTODO FONTSIZEEste 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 SUBEste
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 SUPEste mtodo cria um texto
sobrescrito tendo o mesmo efeito do tag HTML . Sua sintaxe bsica
tem a seguinte formao:String.sup();Veja um exemplo para sua
utilizao: texto="SENAC-MG"; document.write(texto.sup()); MTODO
charATCom este mtodo o usurio poder retornar o caractere em uma
determinada posio em uma string. Por exemplo, temos a string SENAC
e a posio de referncia 3, com base nisto o caractere de retorno A.
Estas posies so contadas partir de 0 da esquerda para a
direita.SINTAXE:String.charAt(valorRetorno);Veja o exemplo de
utilizao do mtodo charAt: texto="SENAC-MG";
document.write(texto.charAt(3)); MTODO INDEXOFCom o mtodo indexOf o
usurio pode retornar a posio de um caractere dentro de uma string.
Um exemplo claro do mtodo indexOf, a maneira de saber se
determinada string possui algum caractere especfico. Caso a string
no contiver o caractere especfico, o mtodo ir retornar o valor 1,
caso hajaa 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: AUma das
prticas utilizaes deste mtodo, determinar se determinado valor de
uma string um nmero ou uma letra.MTODO LASTINDEXOFCom o mtodo
lastIndexOf o usurio poder retornar a ltima posio de um determinado
caractere em uma string. Um exemplo de utilizao deste mtodo a de
retornar a posio de um caractere barra (/) em uma string, para por
exemplo utilizar com URLs. Sua sintaxe bsica, segue o seguinte
exemplo:String.lastIndexOf(caractere,offset);Onde caractere, o
caractere que deseja procurar dentro da string.Onde offset, a posio
na string a partir de onde o usurio deseja comear a pesquisa. Veja
abaixo um exemplo que localiza a ltima ocorrncia da letra N na
string SENAC-MG utilizada como exemplo. texto="SENAC-MG";
document.write(texto.lastIndexOf("N")); O resultado ser 2. bom
lembrar que as strings sempre se baseiam em 0).MTODO LINKEste mtodo
similar ao tag HTML que tem a funo de criar hiperlinks em uma
pgina. Sua sintaxe bsica tem a seguinte
formao:String.link(href);Onde href a referncia de vnculo do
hiperlink. Vejamos um exemplo: texto="SENAC-MG";
document.write(texto.link("http://www.mg.senac.br")); MTODO
REPLACEEste mtodo tem a funo de trocar valores dentro de uma
string. Sua sintaxe bsica tem a seguinte
formao:String.replace(s1,s2);Onde s1 o caractere procurado dentro
de uma string. Onde s2 o novo caractere que ser trocado por
s1.Vejamos um exemplo simples que ao ser digitado um nome com
acento agudo na letra A, ao clicar sobre o um boto trocado a letra
sem acento.function troca(){ texto=document.form1.nome2.value;
document.form1.nome2.value=texto.replace("","a"); }Logo a seguir o
cdigo do boto que chama a funo troca().MTODO SUBSTRINGEste 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)); Valor retornado: SENA.MTODO
TOLOWERCASECom 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 TOUPPERCASECom 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)); OBJETO IMAGENa 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 poroutra 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:
function figura(valor){ document.senac.width=valor; }
ANOTAES:__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________INTERFACE
MTODOS DE INTERFACE COM O USURIOCom 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!!!");ouwindow.alert("Obrigado pela Visita");MTODO ALERTCom o
mtodo alert, o usurio poder sempre que desejar, exibir uma mensagem
na tela exibindo uma caixa de dilogo como mostrado na
figuraabaixo:Este mtodo segue a seguinte sintaxe:alert(valor);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) alert(texto) // Exibe o valor numrico 12. //
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 CONFIRMCom 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 oboto 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 PROMPTCom 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:","");alert(teste+"
seja Bem Vindo!"); Os possveis valores a serem retornados pelo
mtodo prompt so: String, quando o usurio digita um texto e
pressiona o boto OK.String vazia, quando o usurio no digita nada e
pressiona OK.NULO (null), quando o usurio pressiona o boto
CANCELAR.ANOTAES:______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________OBJETO
WINDOWA manipulao de janelas se d atravs do objeto window da
linguagem JavaScript. Sempre que se abre o browser automaticamente
criado este objeto que representa exatamente a janela que fora
aberta. Isto feito automaticamente sem a necessidade de usar os
comandos da linguagem HTML.Este objeto permite que o usurio crie e
abra novas janelas de formas diferentes. Tudo isto possvel atravs
das propriedades e mtodos do objeto window. Para utiliz-los, basta
seguir a seguinte sintaxe:window.propriedade
window.mtodoPROPRIEDADES DO OBJETO WINDOW/FRAMEAs propriedades
deste objeto modificam os aspectos em relao da janela do navegador
e de seus frames caso existam.PROPRIEDADES frames[] length name
parent self top windowDESCRIO Array de frames em uma janela.
Quantidade de frames existentes em uma janela. Nome do objeto
window. Representa a janela ou frame-pai. Representa a janela atual
de um frame. Representa browser. Representa a janela ou frame-pai.
a janela superior dostatusDefine uma string que ser apresentada na
barra de status Define uma mensagem padro que ser apresentada na
barra de status.defaultStatusWINDOW.STATUS E DEFAULTSTATUSTanto
status como defaultStatus so utilizadas para atribuir uma string na
barra de status, com a diferena que a propriedade defaultStatus
pode ser utilizada como um simples objeto apesar de ser ainda uma
propriedade do objeto window, mas alm disto a propriedade
defaultStatus permite armazenar a mensagem padro que ser exibida,
ou seja, aquela que voltar a ser exibida aps modificaes temporrias
provocadas por mensagenscolocadas na propriedadestatus. A sintaxe
bsica das duas propriedadesseguem o seguinte
parmetro:window.status("mensagem"); window.defaultStatus = "Esta a
mensagem padro."; defaultStatus = "Esta a mensagem padro";Veja o
funcionamento disto acionando os botes abaixo:MTODO OPENEste mtodo
tem como objetivo abrir uma nova janela do browser. Com este mtodo
o usurio poder abrir uma nova janela em branco ou uma janela que
contm um documento especfico. Sua sintaxe tem a seguinte
formao:NomeJanela=window.open(URL,alvo,opes);Onde NomeJanela uma
varivel que ser uma referncia a nova janela.Onde URL o endereo da
janela a ser aberta.Onde alvo o nome da janela para ser usado no
atributo target dos tags ou .Onde opes o parmetro que controla o
comportamento da janela.MTODO CLOSEO mtodo close do objeto window
tem a finalidade de fechar uma janela. Normalmente utiliza-se este
mtodo atribudo um boto de ao criado com os formulrios. Sua sintaxe
bsica tem a seguinte formao:window.close()No exemplo abaixo temos
uma pgina com um boto chamado Fechar, onde quando o usurio clicar
sobre o mesmo acionado este
evento.Nestecaso,foiutilizadooeventoonClickqueexecutaainstruowindow.close()
assim que o usurio clica sobre o boto.MTODO SETTIMEOUTAtravs do
mtodo setTimeout o usurio poder criar um contador de tempo que
executa alguma ao aps um determinado intervalo de tempo. Sua
sintaxe segue o seguinte
padro:varivel=setTimeOut(funo,intervalo);Onde funo alguma instruo
que o usurio quer que execute aps o intervalo especificado em
milissegundos (milsimos de segundos). Na maioria das vezes, funo
uma chamada de uma funo criada anteriormente.Onde intervalo o tempo
at que a funo seja executada.Um dos exemplos mais comuns de uso do
mtodo setTimeout o da criao de contadores em uma pgina e textos
rolantes na barra de status. Veja pelo exemplo do script a seguir,
o uso de texto piscante na barra de
status:ANOTAES:________________________________________________________________________________________________________________
MTODO CLEARTIMEOUTAtravs do mtodo clearTimeout o usurio poder
cancelar um marcador de tempo que foi criado pelo mtodo setTimeout.
Sua sintaxe segue o seguinte padro:clearTimeout(tempo);Onde tempo o
manipulador de identificao do timer criado pelo mtodo
setTimeout.TRABALHANDO COM JANELASQualquer usurio que costuma
navegar na Internet, sabe que possvel manipular a janela aberta de
um site atravs de comandos do prprio browser como por exemplo o
comando Tela Cheia encontrado no menu Exibir do navegador, entre
outras opes. Mas atravs da linguagem JavaScript possvel realizar as
mesmas operaes atravs de sua programao.Se o usurio desejar abrir
uma nova janela partir de uma janela j aberta, basta utilizar o
mtodo open em sua estrutura. Veja sua sintaxe:window.open(URL);
janela=window.open(URL);Onde:janela: referente ao nome dado para a
janela a ser aberta para fins das instrues de
programao.window.open: OPEN o mtodo do objeto window para abrir uma
nova janela.URL: o endereo da pgina que ser aberta na nova janela.
Caso o usurio omitir este endereo, ser aberta uma nova janela
vazia.A omisso de uma URL, ser aberta uma nova janela em
branco.Veja no exemplo abaixo, a criao de uma nova janela chamada
SENAC onde ser aberto o site do
SENAC.Senac=window.open(http://www.mg.senac.br) possvel atravs de
outros argumentos, definir o comportamento de como a nova janela
dever ser apresentada. Veja os argumentos existentes para o mtodo
open:TOOLBARpermite a exibio da barra de ferramentas do
navegador.LOCATIONpermite a exibio da barra de endereo do
navegador.DIRECTORIESpermite a exibio da barra de links do
navegador.STATUSpermite a exibio da barra de status do
navegador.MENUBARpermite a exibio da barra de menu do
navegador.SCROLLBARSpermite a exibio das barras de rolagem do
navegador.RESIZABLEpermite ao usurio redimensionar a nova janela do
navegador.WIDTHespecifica a largura da nova janela do navegador em
pixels.HEIGHTespecifica a altura da nova janela do navegador em
pixels.Quaisquer uns destes argumentos possuem valores booleanos
(yes/no,1/0). Se utilizar mais de um argumento, os mesmos devero
estar separados por vrgula. Aquelas opes no definidas iro assumir
valores falsos.No exemplo apresentado a seguir, mostrada a abertura
de uma segunda pgina apenas com a barra de status e com tamanho de
250 x 200 pixels: TESTE DE JANELAS
janela2=window.open("","","status=yes,width=250,height=200")
SENAC-MG Veja o efeito deste cdigo apresentado na figura a
seguir:Se o usurio desejar controlar o cdigo HTML da janela gerada,
basta determinar no cdigo JavaScript da janela principal os tags
especficos para a segunda janela. Veja pelo exemplo a seguir: TESTE
DE JANELAS
janela2=window.open("","","status=yes,width=250,height=200")
janela2.document.write("Janela 2") SENAC-MG Neste cdigo foi usado o
objeto document atribudo a varivel que representa a janela
secundria JANELA2 para especificar os tags de cabealho e ttulo para
esta nova janela.janela2.document.write("Janela 2")Veja pelo
exemplo da prxima figura que a nova janela ser apresentada com o
ttulo JANELA 2 em sua barra de ttulo:Vamos agora incrementar nosso
cdigo, controlando o corpo da nova janela com cores e at com um
texto presente. Veja no cdigo a seguir o uso do objeto document e
seu mtodo write que ir permitir o controle sobre a segunda janela
aberta a partir da primeira:Vamos adicionar ao nosso script
existente a seguinte linha alm da j
existente:janela2.document.write("Janela 2")
janela2.document.write("") janela2.document.write("Novo Curso no
FACE=arial Senac
deJavaScript")teremos o seguinte efeito conforme mostrado na figura
a seguir:Aproveitando a criao desta nova janela, iremos criar um
boto de formulrio onde atribuiremos uma ao de evento que far o
fechamento automtico desta janela.Para isto, basta utilizar o mtodo
close para o objeto window. Veja pelo exemplo do cdigo a seguir:
TESTE DE JANELAS
janela2=window.open("","","status=yes,width=250,height=200")
janela2.document.write("Janela 2") janela2.document.write("")
janela2.document.write("NovoCurso no Senac
de JavaScript") janela2.document.write("") SENAC-MG o mtodo onClick
foi utilizado para acionar o objeto window assim que o usurio
clicar sobre este boto. Com isto, ele executar o mtodo close que
tem a funo de fechar a janela onde ele se encontra. Veja pelo
exemplo da figura a seguir:Criaremos agora na janela principal um
novo boto com a finalidade de abrir uma nova janela, para isto
deve-se definir o boto no corpo da janela principal conforme
mostrado no cdigo a seguir: SENAC-MG
O OBJETO MATHEste objeto utilizado para realizar operaes
matemticas. Estas operaes podem ser aritmticas, funes
trigonomtricas, funes de arredondamento e comparao. A sintaxe de
utilizao dos mtodos deste objeto seguem a seguinte
sintaxe:Math.mtodo(valor)Ouwith (Math){mtodo(valor)}PROPRIEDADES DE
CLCULO DO OBJETO MATHVeja na tabela abaixo a relao das propriedades
do objeto Math:PROPRIEDADES E LN2 LN10 LOG2E LOG10E PI
ConstanteDESCRIO de Euler e a base doslogaritmos naturais (prximo
de 2,118). Logaritmo natural de 2. Logaritmo natural de 10.
Logaritmo na base 2 de E. Logaritmo na base 10 de E. Equivalente
numrico de PI,arrendondado para 3,14.SQRT1_2 SQRT2Raiz quadrada de
um meio. Raiz quadrada de 2.No exemplo que foi utilizado a
estrutura with, permite ao usurio utilizar uma srie de mtodos math
sem a necessidade de acrescentar variosMath.Objeto, facilitando
todo um trabalho.MTODOS DO OBJETO MATH ABSEste mtodo tem a funo de
retornar o valor absoluto de um nmero. Isto significa que o valor
ser sempre positivo. Caso seja utilizado um valor negativo este
mtodo. Ele ser retornado como positivo. Por exemplo, caso seja
definido o valor 123, ele ser convertido para 123. Veja o exemplo
abaixo: valor=Math.abs(-123); alert(valor); Neste exemplo foi
definido varivel valor o mtodo abs do objeto Math que possui o
valor negativo 123, em seguida foi solicitado atravs de uma caixa
de alerta a exibio do contedo da varivel valor que foi convertido
em nmero positivo.ACOSEste mtodo ir retornar o arco co-seno (em
radianos) de um nmero. Vejamos o exemplo a seguir:
valor=Math.acos(0.12); alert(valor); O script acima ir retornar o
resultado: 1.4505064444001085ASINO mtodo asin retorna o arco seno
(em radianos) de um valor. Veja o exemplo a seguir:
valor=Math.asin(0.12); document.write(valor); O script acima ir
retornar o resultado: 0.12028988239478806CEILEste mtodo retorna um
inteiro maior que ou igual a um nmero. O resultado deste mtodo
equivalente ao arredondamento de um nmero. Claro que a lgica do
arredondamento de um nmero que se um nmero um valor positivo como
por exemplo 12,6 o resultado 13, quando o nmero for um valor
negativo, por exemplo 12,6 o resultado 12. Vejamos o exemplo do uso
do mtodo ceil.valor=Math.ceil(12.6); valor2=Math.ceil(-12.6);
alert(valor); alert(valor2); Os resultados retornados sero: 13 e
12.COSEste mtodo ir retornar o co-seno (em radianos) de um nmero.
Vejamos o exemplo a seguir: valor=Math.cos(0.12); alert(valor); O
resultado obtido ser: 0.9928086358538662EXPEste mtodo ir retornar o
logaritmo do nmero na base E. Vejamos um exemplo:
valor=Math.exp(0.0009); alert(valor); O resultado obtido ser:
1.0009004051215273FLOORRetorna o maior inteiro menor ou igual a um
nmero. Vejamos o exemplo: valor=Math.floor(101.25);
valor2=Math.floor(-101.25); alert(valor); alert(valor2); Com isto
teremos o seguinte resultado: 101 e 102.LOGRetorna o logaritmo
natural de um nmero (base E). Vejamos o exemplo a seguir:
Valor=Math.log(1.1); alert(valor); RESULTADO:
0.09531017980432493MAXRetorna o maior valor entre dois nmeros.
Exemplo: Valor=Math.max(5,10); alert(valor); RESULTADO: 10.
MINRetorna o menor valor entre dois nmeros. Exemplo:
Valor=Math.min(5,10); alert(valor); RESULTADO: 5.POW
(base,expoente)Retorna a base elevada potncia do expoente, por
exemplo, 2 elevado dcima potncia 1024. Com o mtodo pow apresenta-se
os argumentos de base e de expoente. Vejamos este exemplo o seu
resultado: Valor=Math.pow(1024,2); alert(valor); RESULTADO:
1.048.576.RANDOMRetorna um nmero aleatrio entre 0 e 1 com at 15
dgitos. Este nmero aleatrio definido atravs do relgio do
computador. Veja pelo script a seguir a apresentao de um nmero
aleatrio:alert(Math.random()); ROUNDCom o mtodo round possvel
arredondar um valor. O arredondamento segue a regra de
arredondamento mostrada anteriormente. Vejamos o exemplo:
valor=Math.round(125.6); alert(valor); SINEste mtodo retorna o seno
de um nmero. Veja o exemplo a seguir: valor=Math.sin(1.6);
alert(valor); RESULTADO: 0.9995736030415051.SQRTRetorna a raiz
quadrada de um nmero. valor=Math.sqrt(49); alert(valor); RESULTADO:
7.TANRetorna a tangente de um nmero. valor=Math.tan(1.5);
alert(valor); RESULTADO:
14.101419947171718.ANOTAES:____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________OBJETO
DATEAtravs do objeto Date o usurio poder manipular datas e horas.
Observe pela sintaxe adiante a criao de um novo objeto de
data.PROPRIEDADEEste objeto de nvel superior.SINTAXEVarivel=new
Date();MTODOS GET DO OBJETO DATEOs mtodos getDate, getDay entre
outros tm a finalidade de recuperar a data e hora de um objeto
date. Ele poder conter a data e hora atuais ou especficas. Aps a
especificao do objeto date, basta especificar qual o mtodo veja
pelos exemplos apresentados abaixo:Data=new Date();
alert(Data.getDay()) // Retorna o dia atual. alert(Data.getMonth())
// Retorna o ms atual. alert(Data.getYear()) // Retorna o ano
atual.MTODOS getDate getDay getHours getMinutes getMonth getSeconds
getTime getTimezoneOffset getYearDESCRIO Dia da semana (0=Domingo).
Dia do ms. Horas (0 a 23). Minutos (0 a 59). Ms do ano (0=janeiro).
Segundos (0 a 59). Milissegundos (00:00:00). Diferena de fuso
horrio em minutos para o GMT. 2 digitos do ano at 1999. Aps 2000, 4
dgitos. desde 1 de janeiro de 1990Este objeto tem a funo de
armazenar a data e hora atuais no formato mm/dd/aa hh:mm:ss. Os
valores do ms so contados de 0 at 11 e os dias da semana de 0 a 6
da seguinte forma:0 1 2 3 4 5 6 7 8 9 10 11Janeiro Fevereiro Maro
Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro0 1
2 3 4 5 6Domingo Segunda Tera Quarta Quinta Sexta SbadoAs horas so
determinadas de 00:00 s 23:00O objeto date pode definir data e hora
a partir de 1 de janeiro de 1970. Aps a criao do objeto date, o
mesmo pode ser usado com qualquer mtodo apresentado
anteriormente.MTODO PARSE E UTCO mtodo parse retorna o valor de
milissegundos a partir de 1 de janeiro de 1970, 00:00:00, j o mtodo
UTC faz a mesma coisa, porm no fuso horrio GMT. Vejamos um exemplo
da apresentao da quantidade milissegundos contados at o dia 23 de
Novembro de 1975.alert(Date.parse("Nov 23, 1975 GMT"));Teste e veja
se o resultado ser 185932800000 milissegundos contados desde 1 de
janeiro de 1970.Veja outro exemplo de script apresentando na tela a
hora atual, dia atual e as horas e minutos atuais. OBJETO DATE
hoje=new Date(); alert("A hora atual "+hoje.getHours); alert("A dia
atual "+hoje.getDay()); alert("Agora so:
"+hoje.getHours()+":"+hoje.getMinutes()); MTODOS SET DO OBJETO
DATEOs mtodos setDate, SetDay entre outros, permitem ao usurio
definir a data e a hora de um objeto date. Estes mtodos so
utilizados da mesma forma dos mtodos get. Vejamos a relao destes
mtodos:MTODOS setDate setHours setMinutes setMonth setSeconds
setTime setYearDESCRIO Dia da semana (0 para Domingo). Horas (0 a
23). Minutos (0 a 59). Ms do ano. Segundos (0 a 59). Milissegundos
de 1 de janeiro de 1990. Ano.MTODO TOGMTSCRINGA definio de GMT
Greenwich Mean Time, que define o fuso horrio internacional padro
para configurao de relgios. Este mtodo faz a converso de um objeto
date para uma string usando convenes GMT.Veja pelo exemplo a
seguir, a converso da hora atual em uma string no formato GMT.
Certifique-se que o computador esteja com a definio de fusohorrio
correta.alert(data.toGMTString());O resultado, ser a criao de uma
string no formato:Fri, 21 Sep 2001 20:53:44 UTCMTODO
TOLOCALESTRINGO mtodo toLocaleString tem a funo de formatar a data
e a hora usando as convenes de string no computador local. Por
exemplo: USA, Reino Unido, Frana, Alemanha, entre outros. A idia
principal deste mtodo apresentar ao usurio a data e hora de forma
que o mesmo possa interpretar de maneira simples na pgina, mesmo
estando fora de sua localidade. Veja o exemplo de utilizao deste
mtodo:alert(data.toLocaleString());O resultado esperado, ser
similar ao formato: 09/21/2001 17:58:03Vejamos agora um exemplo que
ir apresentar um relgio digital na barra de status que far a hora
se atualizar de um em um segundo. Analise o cdigo apresentado
abaixo: function relogio(){ tempo=new Date();
hora=tempo.getHours(); min=tempo.getMinutes();
sec=tempo.getSeconds(); if(sec Azul Azul Fraco Azul Claro Vermelho
Verde Verde Claro Rosa Cinza Prpura Laranja Magenta Amarelo Preto J
neste outro exemplo foi criado quatro botes de radio que ao clicar
sobre um dos botes, mudada a cor de fundo da pgina. Azul Vermelho
Amarelo Cinza MTODOS DO OBJETO DOCUMENTVeja a relao dos mtodos
utilizados no objeto document.MTODO clear close writeDESCRIO Limpa
a janela (window). Fecha o documento atual. Permite a incluso de
texto no corpo do documento. Permite a incluso de texto no corpo
dowritelndocumento com um caractere de nova linha anexado.MTODO
CLEARCom o mtodo clear() do objeto document possvel ao usurio
limpar o contedo de uma janela.IMPORTANTE: bom saber que este mtodo
no funciona no Internet Explorer, sendo compatvel apenas para o
Netscape a partir de sua verso 2. Veja um exemplo de utilizao deste
mtodo: MTODO CLEAR Texto incluso no corpo de um documento HTML.
Segundo Frame"); }else if(frameNum==3){
parent.terceiro.document.write("
Terceiro Frame"); }else if(frameNum==4){
parent.quarto.document.write("
Quarto Frame"); } }function limpaFrame(){ for (i=1;iNote que usamos
apenas 3 funes, com os objetivos de inserir valores dentro de um
cookie, mostr-lo ou reinici-lo. Note que a
propriedadedocument.cookie , de fato, uma string, com a conveno de
que cada cookie seja separado do outro por um ";" como consta na
funoDefineCookie(). Deve ficar claro, portanto, que para
armazenarmos vrios pares deveremos manipular a string do cookie
para obtermos o valor desejado. Para isso, usamos a funo abaixo,
capaz de nos devolver o valor corrente de um cookie:function
GetCookie(nome) { var dc = document.cookie; var prefixo = nome +
"="; var inicio = dc.indexOf(prefixo); if (inicio == -1) return
null;var final = document.cookie.indexOf(";",inicio); if (final ==
-1) final = dc.length;return
unescape(dc.substring(inicio+prefixo.length, final)); }Vamos agora
fazer algo mais interessante, como contar o nmero de vezes que um
determinado usurio visitou nossa pgina. O script abaixo mostra o
uso de um boto que contar o nmero de vezes que o mesmo for clicado,
o que certamente pode ser feito no momento da pgina ser carregada,
exibindo uma mensagem do tipo "Ol, FULANO, que bom que voc voltou!
J a Nsima vez que voc nos visita!" function ContarVisitas(form) {
visitas=GetCookie("Visitas"); if(!visitas) { visitas = 1;
form.Contador.value="Esta o seu primeiro click!" } else { visitas =
parseInt(visitas) + 1; form.Contador.value="Voc j clicou " +
visitas + " vezes"; } document.cookie="Visitas="+visitas+";"; } Faa
seus testes e veja como ocorre.Veja uma relao de cookies
armazenados na subpasta Cookie presente na pasta Windows conforme
mostrado na figura a seguir:Os nomes de cookies seguem um padro do
login da mquina acompanhado do local do domnio ou parte no restante
do nome do arquivo. A sintaxe utilizada no contedo do arquivo do
cookie, segue o seguinte
padro:nome=valor;expires=data-no-formato-GMTString;path=/
nome1=valor1; nome2=valor2; nome3=valor3Vejamos outro exemplo que
ir criar dois campos de texto e um Boto. Ser colocado o nome do
cookie em um campo de texto e o valor em outro campo de texto.
Clicando sobre o boto, ser armazenado no computador do usurio um
registro com nome/valor, num arquivo com a origem da pgina.function
gravaCookie(){ var dataexp = new Date (); dataexp.setTime
(dataexp.getTime() + (24 * 60 * 60 * 1000 * 1)); //vai valer por 1
dia setCookie dataexp); } (document.fm1.nome.value,
document.fm1.valor.value, Entre com um nome para o cookie: Entre
com um valor para o cookie: Agora v para outra pgina, clicando
aquiAssim, atravs dos cookies, possvel manter uma continuao entre
vrias pginas de uma aplicao. Por exemplo: em pginas de uma aplicao
de ecommerce com produtos que o usurio seleciona em determinada
quantidade. Estes dados so gravados como cookies. Depois lidos numa
outra pgina que tem um "carrinho de compras". A lgica de programao
destas continuidades pode ser um pouco complicada usando
JavaScript. Ns, particularmente, achamos mais fcil trabalhar (desde
que o browser aceite) com applets do Java e variveis estticas num
frame adicional. Uma outra razo pela qual no gostamos de usar
cookies que muitos crackers usam esta estrutura de acesso ao disco
do usurio, para invadirmquinas. E muita gente, com medo, desativa a
aceitao de cookies (veja abaixo como se faz no IE), o que invalida
toda sua aplicao. sempre bom ento, se voc vai usar cookies, alertar
o usurio de que tem que aceit-los para a aplicao
funcionar.ANOTAES:________________________________________________________________________________________________________________________________________________________________________________________________________________________FAQ
SOBRE COOKIESCookies - so simplesmente bits de informao, pequenos
arquivos texto (arquivos com terminacao .txt), geralmente com menos
de 1Kb, que o seu browser capta em alguns sites e guarda em seu
hard disk. De onde surgem os cookies? De voc! A maioria das vezes
os dados contidos nos arquivos texto vm de informaes que voc
forneceu. Essas informaes podem ser o seu e-mail, o seu endereco ou
qualquer informao que voc tenha fornecido em um formulrio online.
Para que eles so utilizados? Em pginas personalizadas, nais quais a
cada vez que voc visita surgem opes que voc selecionou previamente.
Sem cookies, voc teria de se registrar e resselecionar opes a cada
vez que acessasse uma destas pginas. Com os cookies, o web site
pode "lembrar" quem voc e quais as suas preferncias. Para que mais
eles so utilizados? Compras online e registro de acesso so outros
motivos correntes de utilizao. Quando voc faz compras via Internet,
cookies so utilizados para criar um "carriho de compras virtual",
onde seus pedidos vo sendo registrados e calculados. Se voc tiver
de desconectar do site antes de terminar as compras, seus pedidos
ficaro guardados at que voc retorne ao site. Webmasters e
desenvolvedores de sites costumam utilizar os cookies para coleta
de informaes. Eles podem dizer ao webmaster quantas visitas o seu
site recebeu, qual a freqncia com que os usurios retornam, que
pginas eles visitam e de que eles gostam. Essas informaes ajudam a
gerar pginas mais eficientes, que se adaptem melhor as preferncias
dos visitantes.Qual a utilizao dos cookies na publicidade? Algumas
companhias j utilizaram, ou ainda utilizam cookies para coletar
informaes pessoais sobre os usurios e posteriormente enviar-lhes
anncios publicitrios. O mais comum so os chamados spam mails, ou
seja, mensagens no solicitadas que voc recebe via e-mail,
geralmente anunciando a venda de algum produto. Essa prtica tem
sido amplamente criticada e, atualmente, considerado bastante
anti-tico utilizar-se das informaes providas por cookies, ou
repass-las para empresas interessadas em atingir um determinado
pblico. Se cookies so arquivos texto, quem pode ler esses arquivos?
Um cookie s pode ser lido pelo site que o criou. Webmasters no
podem intrometer-se no diretrio onde os cookies esto armazenados em
seu computador para obter informaes a seu respeito. Um cookie pode
trazer um virus para o meu computador? No. Vrus somente so
trasportados por arquivos executveis. Sendo cookies arquivos texto,
no h perigo de carregarem nenhum virus anexado eles. Ento qual o
problema? Por que algumas pessoas detestam cookies? Alguns
sentimentos anti-cookie so provocados apenas por desinformao.
Cookies so simples arquivos texto, no podem entrar em seu hard disk
e capturar nenhuma informao sobre voc. Eles apenas guardam
informaes que voc voluntriamente forneceu ao visitar um site. E os
browsers revelam alguma informao sobre voc de qualquer forma, mesmo
sem a utilizao dos cookies: o seu endereo de IP, seu sistema
operacional, tipo de browser utilizado, etc. Voce precisa aceitar
cookies? No, no preciso. A maioria dos browers pode ser configurada
para recusar cookies, embora no aceitando voc vai perder muitos
aspectos providos pelarede. Voc no ter que reconfigurar pginas
personalizadas a cada vez que visit-las, por exemplo. Posso aceitar
alguns cookies e rejeitar outros? Sim, basta configurar seu browser
para alert-lo sempre antes de aceitar um cookie.DEPURAO DE
C