Javascript Crossbrowser

Javascript Crossbrowser
Os Webstandars, ou padres web, vieram para ficar. Ainda pouco tempo atrs os
programadores "sofriam", justamente pela falta desses padres. Se voc aprendeu DHTML, na
poca da "guerra dos browsers", certamente no gosta nem de ouvir falar no assunto. A poca
marcou o incio do DHTML a Microsoft e a Netscape tinham criado suas prprias verses do
DOM (padro que permite a construo de cdigo Javascript que funciona em qualquer
navegador moderno), tornando um inferno a vida do desenvolvedor que pretendia
desenvolver um script que funcionasse em ambos os navegadores.
A principal finalidade deste treinamento ensin-lo a contornar essa situao que,
infelizmente, continua atingindo a todos.
Um pouco de histria
Quando surgiu comercialmente no mundo, a internet era um ambiente complexo, pois
o usurio precisava conhecer alguns procedimentos tcnicos. Em pouco tempo a
internet popularizou-se e, desde ento, praticamente todos os lares que possuem
computador usam a internet.
Nesse meio tempo ocorreu uma guerra, que at hoje deixa rastros: a guerra dos
browsers. Tudo corria bem: a Netscape, com seu Netscape Navigator, estava com 90%
dos usurios de internet. Porm, a Microsoft percebeu que o mercado no era 100%
explorado, no havia concorrncia, e ento comeou a trabalhar pesado em uma
ferramenta de navegao: o famoso Internet Explorer (IE).
O IE j existia simultaneamente ao Netscape, porm era equivocado perante o
concorrente. Em compensao, o Netscape era uma carroa com a estrutura trincada e
isso, somada conexo muito lenta para a poca, contribuiu para que qualquer um
que lanasse um browser mais veloz para navegao, ganhasse grande parte do
mercado.
Foi o que a Microsoft fez. O IE tornou-se requintado e rpido. Era bvio que ganharia a
maior parte do mercado. Alm disso, a Microsoft embutiu o IE na distribuio do seu
sistema operacional e, desde ento, chegou a bater ao menos 96% da
responsabilidade do mercado no seu mximo. Essa estratgia, apesar de injusta sob
certos aspectos, certamente foi uma das grandes jogadas de marketing da Microsoft
e at hoje o navegador parte integrante das ltimas verses do Windows.
Com cone azul chamativo e botes com design modesto o IE conquistou no somente
pela estratgia, mas tambm pelos conceitos que fixou no modo de navegar na web
(facilidade, agilidade), que tambm permanece at hoje.

Padres WEB
A tal guerra dos browsers acabou, mas no foi a Microsoft ou a Netscape que deu
fim ao impasse; foram os padres web. Tais padres, criados pelo W3C (www.w3.org),
concederam um ambiente comum, e bastante semelhante, a todos os navegadores
atuais. Desde o Internet Explorer (nas verses mais atuais 5, 6 e 7) at o
modernssimo Opera 9.2, passando pelos navegadores baseados no engine Gecko
(Netscape 6,7 e 8; Mozilla FireFox 2 e Firebird), pelos navegadores dos gerenciadores
de janela do Linux (Konkeror KDE e Galeon Gnome), e incluindo o novssimo Safari
da Apple (baseado no engine KHTML, o mesmo do Konqueror) todos os navegadores
atuais possuem considervel suporte aos padres.
"Ferramentas"

O DHTML (Dinamic HTML) a interao entre trs tecnologias diferentes HTML, CSS
e javascript atravs de uma interface conhecida como DOM (Document Object
Model). Todos os navegadores hoje possuem um bom suporte aos padres definidos
para o HTML e para o javascript, de modo que o desenvolvedor tem timos resultados
na criao de suas pginas. J em relao ao CSS, a maioria dos navegadores seguem
corretamente os padres, exceto um: O Internet Explorer. Isso pode representar um
problema se voc precisa usar os recursos mais avanados da linguagem.
J em relao ao DOM, preciso entender algo importante e maravilhoso: Todos os
navegadores hoje oferecem suporte mais que suficiente ao padro do W3C para o
DOM, e a maioria, em especial a Microsoft, gosta de estender esse DOM, adicionando
funcionalidades e recursos proprietrios.
De maneira geral, tudo o que os recursos proprietrios oferecem pode ser feito
satisfatoriamente com o DOM padro. Ou seja: voc no perde nada em abandonar as
extenses proprietrias do DOM e ganha significativa compatibilidade, principal foco
deste treinamento.
Na prtica isso traz apenas uma restrio: no use o material da Microsoft para
aprender. Se voc aprender as coisas do "jeito Microsoft" seus scripts funcionaro
apenas no Internet Explorer. Se aprender a fazer do "jeito W3C" ir produzir com a
mesma eficincia e seus scripts funcionaro em qualquer navegador, inclusive no IE.

Pr-Requisitos
Este no um treinamento especfico de (X)HTML, CSS ou Javascript. Ser abordado o DOM, e
como ele usado para integrar essas trs linguagens. Por isso importante que voc j as
conhea, ainda que superficialmente:
(X)HTML
No so necessrios conhecimentos aprofundados das diferentes verses do (X)HTML e nem
ter decorado a funo de cada tag. Para acompanhar este curso basta uma noo bsica da
estrutura do (X)HTML e de suas tags mais usadas.
CSS
No preciso ser um especialista em layouts tableless e nem conhecer a fundo o
comportamento dos atributos, em cada navegador, para entender o contedo deste curso.
Basta o conhecimento bsico da linguagem, de sua estrutura e dos seletores e atributos mais
utilizados.
Javascript
preciso certa fluncia na linguagem. Compreender o DOM entender como programar com
ele. Por isso voc deve ser fluente em javascript, se no muitos dos exemplos podero parecer
sem sentido. Voc no precisa conhecer os recursos mais avanados da linguagem, como
tratamento de erros ou prototipagem, mas precisar ser fluente em javascript.

Sintaxe
(;) Ponto e vrgula
O ponto e vrgula (;) ao final de cada instruo opcional no javascript, exceto quando voc
estiver escrevendo duas instrues na mesma linha. Veja:
1. var1 = 1
2. var2 = 2
3. resultado = var1 + var2
Ou
1. var1 = 1;
2. var2 = 2;
3. resultado = var1 + var2;
As demonstraes so equivalentes: tanto faz, usar ou no, o ponto e vrgula (;) voc quem
deve decidir qual o melhor padro. Neste curso o ponto e vrgula (;) ser empregado na frente
das expresses.
E lembre-se: O uso do ponto e vrgula (;) obrigatrio nos casos especiais, ou seja: quando
tiver mais de uma instruo numa mesma linha. Veja este exemplo:
1. var1 = 1; var2 = 2;
2. resultado = var1 + var2;

{ } Chaves delimitadoras de cdigo
opcional o uso das chaves delimitadoras de cdigo; elas so necessrias apenas nos blocos
que contenham mais de uma instruo e nos blocos function. Veja um exemplo:
1. for( var i=1;i<30;i++ )
2. {
3. document.write("TreinaWEB");
4. }
Ou:
1. for( var i=1;i<30;i++ )
2. document.write("TreinaWEB");

Adote o padro com o qual voc acha melhor trabalhar. Aqui no treinamento as { } chaves
delimitadoras sero usadas em todas as expresses, pois o cdigo fica mais ntido e fcil de ser
compreendido e tambm porque a maioria das linguagens de programao os utiliza.
IF inline
Dependendo da situao, voc pode precisar de um algoritmo semelhante a este:
1. <script type="text/javascript">
2.
3. x = 8;
4.
5. if ( x<10 ) {
6. alert("X menor que 10");
7. }
8. else {
9. alert("X maior que 10");
10. }
11.
12. </script>

Se o valor de X for inferior a 10 dado o alerta: X menor que 10; se no ele alertar que o
valor de X maior que 10.

A expresso acima poderia ser feita usando a sintaxe If Inline, que ficaria assim:
2.
3. x = 8;
4. x<10 ? alert("X menor que 10") : alert("X maior que 10");
5.
6. </script>

A primeira expresso, x<10?, avaliada. Se X for menor que 10 ento ser dado o ALERTA: X
menor que 10; se no, alertar que X maior que 10.
Estruturas de dados
Array's
H duas maneiras de se criar um Array em javascript.

Uma utilizando o construtor Array:
1. x= new Array(2,4,6,8,10);
A outra, utilizando os colchetes:
1. x= [2,4,6,8,10];
Essa segunda forma de criar um Array, alm de ser prtica, muito utilizada.

Objetos
A mesma coisa ocorre com Objetos. Voc pode fazer assim:
2.
3. aluno=new Object()
4. aluno.nome="Joo TreinaWEB";
5. aluno.email="email@treinaweb.com.br";
6. aluno.idade=19;
7. aluno.curso="Javascript Crossbrowser";
8.
9. alert(aluno.nome + "\n" + aluno.curso);
10.
11. </script>
Ou pode usar as chaves:
2.
3. Aluno={nome:"Joo TreinaWEB", email:"email@email.com",
4. idade:19, curso:"Javascript Crossbrowser"};
5.
6. alert(Aluno.nome + "\n" + Aluno.curso);
7.
8. </script>

Lembrando que um objeto pode ser acessado como um array:
1. alert(Aluno.nome);

Ou assim:
1. alert(Aluno["nome"]);

Expresses Regulares

Uma expresso regular, muitas vezes abreviada como regexp, regex ou regxp, uma string
que se iguala a um conjunto de strings, de acordo com algumas regras de sintaxe.
Expresses regulares so usadas por muitos editores de texto e utilitrios utilizados na
pesquisa e manipulao de trechos de texto, baseando-se em certos padres. Muitas
linguagens de programao tambm suportam tais expresses. Entre elas podem ser citadas
Java, Perl, PHP e JavaScript.
Veja uma maneira simples de criar expresses regulares em javascript, usando barras:
2.
3. Nome="TreinaWEB";
4. expre1=/e/;
5. expre2=/B/gi;
6.
7. alert(Nome.replace(expre1,"i")); //TriinaWEB
8.
9. alert(Nome.replace(expre2,"P")); //TreinaWEP
10.
11. </script>

A expresso regular comea e termina com barras.
Depois da barra final voc pode acrescentar um i, para tornar a expresso case-insensitive, e
um g para torn-la geral, fazendo com que substitua todas as ocorrncias encontradas e no
apenas a primeira.
Esse assunto no ser aprofundado aqui; d uma pesquisada e descubra que, usando a
criatividade, pode-se fazer muita coisa legal com expresses regulares, validaes e etc.
A seguir sero demonstradas algumas expresses regulares prontas. Este um exemplo para
verificar se o email vlido:
2.
3. var expre = "^([0-9a-zA-Z]+([_.-]?[0-9a-zA-Z]+)*@[0-9a-zA-Z]+"+
4. "[0-9,a-z,A-Z,.,-]*(.){1}[a-zA-Z]{2,4})+$";
5.
6. var str = "treinaweb@@treinaweb.com.br";
7.
8. if (str.match(expre)) {
9. alert("Email Correto");
10. }
11. else {
12. alert("Email Incorreto");
13. }
14.
15. </script>

Veja a lista de algumas expresses regulares prontas para implementao:
Expresso: ^([0-9]|[0,1,2][0-9]|3[0,1])/([d]|1[0,1,2])/d{4}$
Data (dd/mm/aaaa)
Expresso: ^d*[0-9](.d*[0-9])?$
Numero Decimal - Ex:234.342
Expresso: ^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$
Codigo Cor HTML - Ex: #00ccff
Expresso: ^[a-zA-Z0-9-_.]+.(pdf|txt|doc|csv)$
Arquivos Documentos - Ex: nome-do-arquivo.pdf - .txt,doc,csv.
Expresso: ^[a-zA-Z0-9-_.]+.(jpg|gif|png)$
Arquivo de Imagem - Ex: nome-da-imagem.gif - .gif,jpg,png.
Expresso: ^((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2}).){3}(25[0-5]|2[0-4][0-9]|1[0-
9]{2}|[0-9]{1,2})$
Endereco IP - Ex: 192.168.0.1
Expresso: ^[a-zA-Z0-9-_.]+.(swf|mov|wma|mpg|mp3|wav)$
Arquivos Multimedia - Ex: nome-do-arquivo.swf - .mov,wma...
Expresso: ^([0-1][0-9]|[2][0-3])(:([0-5][0-9])){1,2}$
Hora (HH:MM) - Ex: 12:00
Expresso: ^(http[s]?://|ftp://)?(www.)?[a-zA-Z0-9-
.]+.(com|org|net|mil|edu|ca|co.uk|com.au|gov|br)$
URL - Ex: http://www.treinaweb.com.br

Expresses regulares so de grande utilidade. Se voc no souber o suficiente sobre elas,
dedique um tempinho para estud-las.

Orientao a Objeto

Voc aprender a sintaxe para os conceitos bsicos de Orientao a Objeto em javascript.
Embora no esteja diretamente relacionado ao DOM, este conhecimento essencial para que
voc possa escrever scripts realmente reaproveitveis.
Inicia-se criando uma classe. Por mais estranho que isso possa parecer, para quem vem de
outras linguagens, usa-se a palavra-chave function:
2.
3. function Aluno(nome,idade,email,curso) {
4.
5. /*Para criar as propriedades da classe
6. usamos a palavra-chave this*/
7.
8. this.nome=nome;
9. this.idade=idade;
10. this.email=email;
11. this.curso=curso;
12.
13. /* No existe, em javascript, o conceito de mtodo.
14. Um mtodo uma propriedade como outra qualquer,
15. cujo valor uma funo e portanto, executvel. */
16.
17. this.ola=function() {
18. alert("Ol, me chamo " + this.nome +
19. "! Fao curso de " + this.curso + " no TreinaWEB");
20. }
21. }
22.
23. //Criando um objeto da classe Aluno:
24. AlunoTreinaWEB=new Aluno("Pedro", 18, "pedro@treinaweb.com.br",
25. "JavaScript CrossBrowser");
26. //E chamado o mtodo ola
27. AlunoTreinaWEB.ola();
28.
29. </script>

A diferena entre uma funo comum e uma classe que, dentro da classe so definidos os
atributos usando-se a palavra-chave this e, ao cham-la, usa-se a palavra-chave new para criar
um novo objeto.
Herana
Veja um exemplo:
2.
3. function Designer(nome,email) {
4. /* Para criar as propriedades da classe
5. usamos a palavra-chave this */
6. this.nome=nome;
7. this.email=email;
8.
9. /* No existe, em javascript, o conceito de mtodo.
10. Um mtodo uma propriedade como outra qualquer,
11. cujo valor uma funo e, portanto, executvel. */
12. this.ola=function()
13. {
14. alert("Ol, eu sou " + this.nome + "! Trabalho com Design.");
15. }
16. }
17.
18. function Programador(nome,email,linguagem) {
19. // Programador herda as propriedades do Designer
20. this.Designer=Designer;
21. this.Designer(nome,email);
22.
23. /* Mas Programador tem algo que Designer no tem: linguagem,
24. qual linguagem de programao ele programa?! */
25. this.linguagem=linguagem;
26.
27. // E Programador no d "Ol" como o Designer
28. this.ola=function()
29. {
30. alert("Ol, me chamo " + this.nome +
31. "! Trabalho com programao("+this.linguagem+")");
32. }
33. }
34.
35. // Vamos testar, criando um objeto da classe Programador:
36. AlunoTreinaWEB=new Programador("pedro","pedro@treinaweb.com.br",
37. "Delphi");
38. // E chamando o mtodo ola:
39. AlunoTreinaWEB.ola();
40.
41. </script>

Entenda como a herana foi feita: Primeiro foi criada uma propriedade para a classe filho cujo
valor a prpria classe pai. Isso porque no javascript no existe diferena entre classe e
construtor: A classe a prpria funo construtora. Ento, o que se est dizendo que o
Programador tem um mtodo Designer, que o construtor da classe Designer:
1. // Programador herda as propriedades do Designer
2. this.Designer=Designer;

Em seguida esse construtor executado. Isso vai dar ao Programador tudo o que o Designer
tem:
1. // Vamos dar ao 'programador' tudo o que o 'designer' tem:
2. this.Designer(nome,email);

Est feita a herana: o programador herdou as propriedades (nome e email) do Designer.

DOM e DHTML
Ambos so utilizados em conjunto com o JavaScript e oferecem enormes
possibilidades para se desenvolver aplicativos, mais eficientes e criativos, para os
projetos.

DHTML significa Dynamic HTML, ou seja: Dynamic Hyper Text Markup Language a
possibilidade de tornar as pginas HTML mais dinmicas e interativas atravs do
trabalho conjunto de trs tecnologias HTML, CSS e JavaScript.
O DOM, Document Object Model, uma plataforma e uma interface de linguagem-
neutra que possibilita, aos programas e scritps, acessar e atualizar dinamicamente o
contedo e o estilo de um documento.

DOM um padro W3C (http://www.w3.org/), da Web (web standards); todos os
navegadores atuais vm concedendo suporte a esses padres. Dessa forma, torna-se
mais seguro trabalhar com o DOM, do W3C, pois garante-se o funcionamento dos
scripts na maioria dos browsers, evitando que somente um browser especfico os
execute.

Este padro o mais usado em conjunto com o JavaScript: o cdigo escrito em
JavaScript e o DOM usado para acessar a pgina web e seus elementos. Entretanto,
ele foi desenhado para ser independente de qualquer linguagem de programao em
particular, fazendo a representao estrutural do documento disponvel em uma
simples API consistente. Implementaes do DOM podem ser construdas para
qualquer linguagem.
Introduo ao DOM
O Document Object Model proporciona a representao estrutural de um documento,
habilitando voc a modificar seu contedo e apresentao visual. Essencialmente, ele conecta
pginas web a scripts, ou linguagens de programao.
O DOM fornece a representao estrutural de documentos HTML e XML, definindo a forma
com que a estrutura ser acessada por programas e scripts, possibilitando a modificao na
estrutura do documento, do estilo e do contedo. Neste curso ser utilizada a linguagem
JavaScript.
A representao do documento ocorre atravs de uma rvore de ns (tree of node) em que
cada objeto possui sua propriedade e mtodo.
O DOM fornece a representao estrutural de documentos, com uma representao de cada
objeto na estrutura.
Veja um exemplo:
1. <html>
2.
3. <head>
4. <title>Cursos Online TreinaWeb </title>
5. </head>
6.
7. <body>
8.
9. <h1> TreinaWeb </h1>
10.
11. <p>
12. <b> Cursos online </b>
13. </p>
14.
15. </body>
16.
17. </html>

Representao estrutural desse documento:

Representao estrutural do documento em forma de diagrama:

Para exibir esse documento o navegador cria na memria uma estrutura hierrquica (em
formato de rvore) com representaes de cada objeto exibido. Essa estrutura inicia-se com o
objeto window, que representa a prpria janela aberta do navegador. Cada navegador possui
pequenas particularidades para montar os detalhes dessa estrutura. Mas, de maneira geral,
voc pode se ater ao que eles tm em comum. O exemplo acima, quando exibido pelo
navegador, deve gerar a seguinte estrutura:
window: a janela do navegador, ou frame, onde o documento carregado.
o opener: se for uma janela popup, opener aponta para a janela que a abriu.
o parent: se for um frame, parent aponta para o frame, ou janela pai, que
contm o frameset que carrega a pgina.
o frames: aponta para uma coleo, se houverem frames no documento (neste
exemplo, no h).
o location: um objeto que gerencia a URL da janela atual. Possui, entre outros,
os mtodos reload e replace.
o history: um objeto que gerencia o histrico da janela atual. Possui, entre
outros, os mtodos back e forward.
o document: representa o documento HTML aberto (a partir daqui voc deve
concentrar seu interesse).
title: O ttulo do documento.
body: Representa a tag body, considerada a tag base para o acesso ao
contedo do documento.
childNode 0: O elemento h1 no documento acima, primeiro
filho do body.
childNode 1: O elemento p, segundo filho de body. Esse
elemento tambm possui um filho:
childNode 0: O elemento b dentro do p.

Em forma de diagrama:

Essa estrutura est bem simplificada, pois cada um desses elementos tem mais propriedades e
mtodos. O importante saber que os elementos so representados numa rvore (hierarquia),
como mostrado acima, comeando no elemento window.
Observe outro exemplo (forma estrutural de um documento) com mais propriedades:

Extenso: FireBug
A extenso firebug funciona como uma ferramenta de monitorao e edio da codificao
existente em uma pgina Web. Com ela possvel alterar os cdigos em HTML e CSS, em
tempo real.

O firebug possui um validador HTML e CSS, um console Javascript padro Firefox e um DOM
inspector.

Outros recursos da extenso:

CSS: Exibe todas as medidas de propriedades padding e margin, alinhamentos de elementos e
marcaes atravs de um display prprio, sendo possvel a alterao dos valores
dinamicamente.

Depurador de erros: Trabalha como se fosse um ambiente convencional de programao,
mostrando resumo de erros, marcao para anulao e busca especfica atravs de filtros.

Debug Javascript: possvel buscar por scripts facilmente, interromper ou anular execues,
executar por etapas e outros recursos de um ambiente de programao.
Para instalar a extenso no seu firefox, basta acessar:

http://www.getfirebug.com/
Exemplo
O nvel default (padro) no javascript o nvel do objeto window; as funes e variveis, que
voc cria em seu documento, tornam-se filhas do objeto window.
Por isso tanto faz fazer assim:
1. write("TreinaWEB e-Learning");
2. alert("Escrevi na pgina !!!");

Ou assim:
1. window.write("TreinaWEB e-Learning")
2. window.alert("Escrevi na pgina !!!");

Se voc criar uma funo chamada Soma(), tanto faz cham-la assim:
1. Soma()

Ou assim:
1. window.Soma()
Primeiro exemplo: Acessando um elemento no DOM
1. <html>
2. <head>
3. <title>TreinaWEB e-Learning</title>
4.
6. function Alertar() {
7. var str = document.body.childNodes[0].innerHTML;
8. alert(str);
9. }
10. </script>
11.
12. </head>
13. <body>
14. <h1>H1 - Primeiro filho de body</h1>
15. <h2>H2 - Primeiro filho de body</h2>
16. <p>Texto, texto, texto, <b>texto...</b></p>
17.
18. <a href="#" onClick="Alertar();">click Aqui</a>
19. </body>
20. </html>

Observe que H1 o primeiro filho de body, ou seja: childNodes[0].
um exemplo bem simples, com apenas um dos mtodos (pouco usado) para se acessar um
elemento no DOM. Existem outros mtodos mais prticos.

No Firefox provavelmente esse exemplo no funcionar porque, nele, o ndice dos elementos
comea em childNodes[1] e no em childNodes[0]. Como foi dito, esta forma pouco usada e
existem outras mais prticas de se acessar um elemento.

getElementById()
O mtodo getElementById o mais utilizado no DOM. Sua funo simplesmente retorna o
elemento cujo atributo ID foi especificado. Caso o elemento no exista, ou o ID informado seja
incorreto, ele retornar NULL.
importante lembrar que somente um objeto pode conter um ID especfico, ou seja: no
podem existir dois objetos em uma pgina com o mesmo valor de um atributo ID (como no
CSS).
Exemplo:
Considere o seguinte campo de um formulrio:
1. <input type="text" id="txtnome" name="txtnome">

Para acessar o contedo deste input em javascript, faz-se assim:
1. document.NomeForm.txtnome.value

Ou seja: preciso declarar document mais o nome do formulrio, em que o campo se localiza,
e o nome especificado no atributo name.
Em DOM, utilizando o mtodo getElementById, pode-se acess-lo assim:
1. document.getElementById('txtnome').value

Desta forma, ao invs de informar toda a localizao do objeto, informa-se apenas o atributo
ID ao mtodo getElementById.
Comparao: Voc precisa efetuar uma compra online e vai cadastrar seus dados; ao invs de
informar rua, bairro, cidade e estado onde mora, voc informa apenas o CEP e o nmero de sua
casa.

Detalhe importante:
getElementById diferente de getelementbyid ou getElementbyId. Caso voc escreva
o nome errado ser retornado um erro, ou seja, sempre escreva corretamente:
getElementById

Exemplos de uso do mtodo getElementById
Acompanhe, neste exemplo, duas formas de acessar elementos: a forma tpica de JS; e usando
o mtodo getElementById (DOM).
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8.
10. function AlertaEmailJS() {
11. var name = document.frmexemplo.txtemail.value;
12. alert(name);
13. }
14.
15. function AlertaEmailDom() {
16. var name = document.getElementById('txtemail').value;
17. alert(name);
18. }
19. </script>
20.
21. <h2>Digite seu email</h2>
22.
23. <form name="frmexemplo">
24. <input type="text" id="txtemail" name="txtemail" size="52">
25. <br /><br />
26. <input type="submit" value="Mostrar Email - JS"
27. name="btnJS" onClick="AlertaEmailJS();">
28. <input type="submit" value="Mostrar Email - Dom"
29. name="btnDOM" onClick="AlertaEmailDom();">
30. </form>
31.
32. </body>
33. </html>

Outro Exemplo:
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8.
9. <script type="text/Javascript">
10.
11. function Conteudo()
12. {
13. var name = document.getElementById('divfilha').innerHTML;
14. alert(name);
15. }
16.
17. </script>
18.
19. <div id="divmae">
20.
21. <h2>Exemplo getElementById</h2>
22.
23. <div id="divfilha">
24. <p>TreinaWEB e-Learning</p>
25. </div>
26.
27. </div>
28.
29. <input type="submit" value="Alertar" onclick="Conteudo();">
30.
31. </body>
32.
33. </html>

No esquea: Use sempre getElementById ao invs de
document.nomedoform.nomedocampo.value.

getElementsByTagName()

Esse mtodo recebe uma string, com o nome de uma tag, e retorna um Array com todas as
tags daquele tipo. Exemplo:
1. paragrafos=document.getElementsByTagName("p");

Imagine a seguinte situao: Em uma pgina, em que todos os elementos P (pargrafos) no
tm borda, ser preciso destacar as bordas com o estilo dashed e cor azul.
Para resolver essa questo deve-se proceder assim: identificar todos os P (pargrafos) contidos
na pgina e acrescentar-lhes um estilo, como "2px dashed blue".
Sabe-se que o mtodo getElementsByTagName seleciona todas as tags de uma determinada
pgina, ento ele seria a soluo para selecionar todos os P (pargrafos). Com os pargrafos
"em mos", basta adicionar o estilo desejado (neste caso, uma borda).
Veja na prtica:
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8.
10. function ColocarBordaParagrafos()
11. {
13. var x=0;
14. for(x=0;x<paragrafos.length;x++)
15. {
16. paragrafos[x].style.border="2px dashed blue";
17. }
18. }
19. function TirarBordaParagrafos()
20. {
22. var x=0;
24. {
25. paragrafos[x].style.border="none";
26. }
27. }
28. </script>
29. <input type="submit" value="Colocar Borda"
30. onClick="ColocarBordaParagrafos();">
31. <input type="submit" value="Tirar Borda"
32. onClick="TirarBordaParagrafos();">
33. <br /><br />
34.
35. <div>Elemento DIV</div>
36. <p>Pargrafo</p>
37. <div>Elemento DIV</div>
38. <h1>Elemento H1</h1>
39. <p>Pargrafo</p>
40.
41. </body>
42. </html>

Outro Exemplo:

Imagine agora que ser preciso estilizar os links da pgina, tirando o sublinhado dos mesmos.
Veja:
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8.
10. function EstilizarLinks()
11. {
12. var links = document.getElementsByTagName('a');
13. for(var x = 0; x< links.length; x++)
14. {
15. var links_estilizar = links[x];
16. links_estilizar.style.textDecoration = 'none';
17. }
18. }
19. </script>
20.
21. <input type="submit" value="Estilizar Links"
22. onClick="EstilizarLinks();">
23. <br><br>
24.
25. <a href="http://www.treinaweb.com.br">Link 1</a>
26. <h1>Estilizando Links</h1>
28. <h1>Estilizando Links</h1>
30.
31. </body>
32. </html>

Acompanhe outro exemplo, um pouco mais complexo: dentre pargrafos de diferentes
classes, ser preciso colocar borda apenas nos P (pargrafos) com a classe css "pborda". Veja:
1. <html>
2.
3. <head>
5. </head>
6. <body>
7.
9. function ColocarBordaParagrafos()
10. {
11. paragrafos=document.getElementsByTagName('p');
12. var x=0;
14. {
15. if(paragrafos[x].className=="pborda")
16. {
17. paragrafos[x].style.border="2px dashed blue";
18. }
19. }
20. }
21. </script>
22.
23. <input type="submit" value="Colocar Borda"
24. onClick="ColocarBordaParagrafos();">
25. <br><br>
26. <p>Pargrafo</p>
27. <p class="pborda">Pargrafo - Classe pborda</p>
28. <p>Pargrafo</p>
30. <p>Pargrafo</p>
32. <p>pargrafo</p>
33.
34. </body>
35. </html>

O atributo className contm o nome da classe CSS do elemento. Ento, foi utilizado o
comando IF para selecionar apenas os pargrafos de classe pborda.

Mtodo Style

A propriedade style, utilizada para alterar a aparncia de um elemento, um objeto da classe
CSS StyleDeclaration que contm um membro para cada atributo CSS disponvel no
navegador. A regra muito simples: atributos de nome simples, como padding, mantm seu
nome. Assim, para alterar o padding de determinado elemento usa-se:
1. elemento.style.padding="15px";

Agora, se o atributo desejado formado por mais de uma palavra, como padding-top, remove-
se o hfen >> e altera-se a letra inicial da segunda palavra para maiscula. Assim, para alterar o
padding-top de um elemento usa-se:
1. elemento.style.paddingTop="15px";

Os valores dos atributos so sempre string.

Veja um exemplo:
2. function AbreFechaDiv(id)
3. {
4. var elemento = document.getElementById(id);
5. if(elemento.style.display == "")
6. {
7. elemento.style.display = "none";
8. }
9. else
10. {
11. elemento.style.display = "";
12. }
13. }
14.
15. function TimeOut()
16. {
17. //Deixa visvel a div
18. AbreFechaDiv('divloading');
19. //Aps 6 segundos, oculta a div
20. setTimeout("AbreFechaDiv('divloading')",6000);
21. }
22. </script>

Foi utilizada a propriedade display, das CSS, com o valor none e block, respectivamente, em
conjunto com o mtodo style.

Tem-se duas funes: Uma, responsvel por verificar se a propriedade display da
div(divloading) None. Se for, ele define como Normal(Visvel); se no, ele define a
propriedade display como "None" (ou seja: oculta a div). a funo: AbreFechaDiv(id).

A outra funo responsvel por mostrar a DIV e, aps 6 segundos, ocult-la. a funo:
TimeOut().

ClassName
Semelhante ao mtodo style, o mtodo className tem a funo de alterar o estilo de um
objeto definido por uma classe CSS.
A vantagem do mtodo className que se pode alterar as propriedades do estilo, na folha de
estilo vinculada pgina, ou seja: no preciso alterar o script quando se deseja alterar o
estilo, e sim as propriedades da classe CSS.
Basta que se criem duas classes CSS com os estilos que se quer alternar entre os elementos.

Veja um exemplo:
1. <html>
2.
3. <head>
5.
6. <style type="text/css">
7.
8. .divamarela{
9. background-color:#FFFF99;
10. font.family:Arial, Helvetica, sans-serif; font-size:11px; }
11.
12. .divvermelha{
13. background-color:#FF8888;
14. font.family:Arial, Helvetica, sans-serif; font-size:11px; }
15.
16. </style>
17.
18. </head>
19.
20. 
21. <body>
22.
24.
25. function DivChangeClass()
26. {
27. var obj = document.getElementById("divchange");
28. if(obj.className == "divamarela")
29. {
30. obj.className = "divvermelha";
31. }
32. else
33. {
34. obj.className = "divamarela";
35. }
36. }
37.
38. </script>
39.
40. <input type="submit" value="Mudar Cor" onclick="DivChangeClass();" />
41. <br /><br />
42.
43. <div id="divchange" class="divamarela">
44. <b>Redirecionando ....</b><br /><br />
45. TreinaWEB e-Learning
46. </div>
47.
48. </body>
49.
50. </html>

O mtodo className mais vantajoso que o style porque possibilita alterar o estilo, sem
alterar o script, bastando modificar as propriedades da classe utilizada.
Veja outro exemplo:
Ao usar um handler de evento HTML, como onmouseover ou onclick, o cdigo executado
como mtodo do objeto HTML que recebe o evento. Assim, para detectar um clique num
boto, pode-se usar a palavra-chave this, em referncia ao boto, ao invs de usar algum
mtodo para localiz-lo.
1. <html>
2. <head>
5. input.semfoco{
6. border:1px solid #AAAAAA;
7. background:#FFFFFF;
8. color:black;
9. }
10. input.comfoco{
11. border:1px solid #AAAAAA;
12. background:#FFFFA4;
13. color:black;
14. }
15. </style>
16. </head>
17. <body>
18. <form>
19.
20. <br />Nome:<br /><input type="text" class="semfoco"
21. onFocus="this.className='comfoco'"
22. onblur="this.className='semfoco'" />
23.
24. <br /><br />Email:<br /><input type="text" class="semfoco"
27.
28. <br /><br />Idade:<br /><input type="text" class="semfoco"
31.
32. <br /><br />Curso:<br /><input type="text" class="semfoco"
35. </form>
36. </body>
37. </html>

Mtodo innerHTML

inner = interno.
Ento, innerHTML quer dizer o HTML interno de algo (objeto, tag), sendo esse ltimo um
objeto, ou seja, uma tag.
Assim, para alterar ou inserir o contedo, ou uma marcao HTML em um objeto, utiliza-se o
mtodo innerHTML.
Veja um exemplo de como alterar o contedo de uma tag:
1. <html>
2. <head>
5. div{
7. Padding-Left:10;
8. font-family:Arial, Helvetica, sans-serif;
9. font-size:llpx;
10. }
11. </style>
12. </head>
13.
14. <body>
15.
17. function AlterarHtml() {
18. var obj = document.getElementById("divexemplo");
19. obj.innerHTML = "<H1>TreinaWEB</h1> Este ser o novo contedo.<br><br>";
20. }
21. </script>
22.
23. <input type="submit" value="Alterar HTML"
24. onClick="AlterarHtml();">
25. <br><br>
26.
27. <div id="divexemplo" class="divexemplo">
28. <br> TreinaWEB e-Learning <br><br>
29. </div>
30.
31. </body>
32. </html>

Outro exemplo:

Utilizando o operador de atribuio += pode-se concatenar um contedo tag. Veja este:
1. <html>
2. <head>
5. div{
7. Padding-Left:12;
8. font-family:Arial, Helvetica, sans-serif;
9. font-size:l3px;
10. }
11. </style>
12. </head>
13.
14. <body>
15.
17. function AlterarHtml() {
18. var obj = document.getElementById("divexemplo");
19. var Conteudo = "<h1>DOM</h1>";
20. obj.innerHTML = Conteudo += obj.innerHTML;
21. }
22. </script>
23.
24. <input type="submit" value="Alterar HTML" onClick="AlterarHtml();">
25. <br><br>
26.
28. Significa Document Object Model. No uma linguagem.
29. uma interface, uma maneira de acessar atravs de javascript
30. elemntos criados pelas linguagens HTML e CSS.<br><br>
31. </div>
32.
33. </body>
34. </html>

Mtodos appendChild / createElement
Ao se traduzir os nomes que compem o elemento appendChild, tem-se: append =
acrescentar/anexar e child = filho/criana.
Baseado nisso, pode-se entender o mtodo como o acrscimo de um novo filho.
Ele funciona exatamente dessa maneira: adiciona um n (node, 'filho') ao final da lista de
filhos (children) de um elemento pai (parent node).
Para entender mais, veja este exemplo:
1. // 1 passo
2. var NovoElemento = document.createElement("hr");
3. // 2 passo
4. document.getElementById("divbox").appendChild(NovoElemento);

Em primeiro lugar foi definido o novo elemento, ou a nova tag, a ser criada (neste caso, a tag
hr). Entretanto, ela precisa ser filha (child) de algum pai (parent).

Na segunda linha fez-se referncia ao atributo ID de uma tag, que ser o pai do novo elemento
a ser adicionado. Em seguida, foi utilizado o mtodo appendChild, e informado a ele, a tag
criada na varivel NovoElemento.

Veja:
1. <html>
2.
3. <head>
5.
7. div{
9. padding: 6px 6px 6px 6px;
10. }
11. </style>
12.
13. </head>
14. <body>
15.
17. function NovoFilho () {
18. var newElement = document.createElement("hr");
19. document.getElementById("divexemplo").appendChild(newElement);
20. }
21. </script>
22.
23. <input type="submit" value="Criar elemento"
24. onClick="NovoFilho();">
25. <br><br>
26.
28. TreinaWEB e-Learning<br><br>
29. </div>
30.
31. </body>
32. </html>

Mtodo insertBefore
Anteriormente, voc viu os mtodos utilizados para criar (createElement) e inserir
(appendChild) um elemento no documento.
Voc deve ter notado que o mtodo appendChild insere o objeto sempre como o ltimo filho
(child) de um elemento pai (parent).
Mas isso pode ser inconveniente nos momentos em que preciso inserir algum elemento em
local especfico, e no como o ltimo filho de um pai.
Para tal necessidade utiliza-se o mtodo insertBefore, ao invs do appendChild. Assim, insere-
se a tag onde se desejar. Veja:
1. // 1 passo
2. var newElement = document.createElement(what);
3. // 2 ...
4. newElement.appendChild(document.createTextNode("Ttulo do pargrafo"));
5. // 3 ...
6. var referencia = document.getElementById("paragrafo");
7. // 4 ...
8. var parentTag = referencia.parentNode;
9. // 5 ...
10. parentTag.insertBefore(newElement, referencia);

Primeiramente foi informado o elemento a ser criado, atravs do parmetro (what) da funo.
Em seguida, foi inserido o contedo no elemento criado.

No terceiro passo, fez-se referncia a um elemento atravs do getElementById, na varivel
referencia.

No quarto passo, criou-se a varivel parentTag, concedendo-lhe o valor
referencia.parentNode, ou seja: o elemento como referncia e especificando que ser um n
pai (parentNode).

Para concluir, foi utilizado o mtodo insertBefore anexado varivel parentTag. Os atributos
desse mtodo so os seguintes: newElement (o elemento que ser criado) e referncia (para
saber onde inserir o novo elemento, ou seja: anterior a qual elemento).

Exemplo:
1. <html>
2. <head>
5. div{ background-color:#FFFF99;
6. Padding-Left:12;
7. font=family:Arial, Helvetica, sans-serif;
8. font-size:13px;}
9. </style>
10. </head>
11. <body>
12.
14. function insertTag() {
15. var newElement = document.createElement("h1");
16. newElement.appendChild(document.createTextNode("DOM"));
17. var referencia = getElementById("divexemplo");
18. var parentTag = referencia.parentNode;
19. parentTag.insertBefore(newElement, referencia);
20. }
21. </script>
22.
23. <input type="submit" value="Alterar" onClick="insertTag();"><br><br>
24.
26. Significa Document Object Model. No uma linguagem.
27. uma interface, uma maneira de acessar atravs de javascript
28. elementos criados pelas linguagens HTML e CSS.<br><br>
29. onClick="NovoFilho();">
30. </div>
31.
32. </body>
33. </html>

Mtodo setAttribute
O Mtodo setAttribute tem a finalidade de inserir ou modificar um atributo em um
determinado elemento existente.
Em certos momentos, ao criar um elemento preciso definir-lhe alguns atributos. O mtodo
setAttribute tem esse propsito.
Sua sintaxe :
1. setAttribute('NomeDoAtributo','ValorDoAtributo');

No prximo exemplo ser criado um elemento "div", dinamicamente. Sero adicionados os
eventos onmouseover e onmouseout, usando-se event listeners.
E tambm ser separado em camadas: HTML->CSS->SCRIPTS.
Acompanhe:

index.html
1. <html>
2.
3. <head>
5. <link rel="stylesheet" type="text/css" href="style.css">
6. </head>
7.
8. <body>
9. <div id="conteudo">
10. </div>
11. </body>
12.
13. <script type="text/javascript" src="script.js"></script>
14. </html>

style.css
1.
2. .divcor{
3. background-color:#FFFFFF;
4. padding:5px 5px 5px;
5. border-color:#FFCC00;
6. border-style:solid;
7. border-width:1px;
8. width:200px;
9. }
10.
11. .divsemcor{
13. padding:5px 5px 5px;
14. border-color:#FFCC00;
15. border-style:solid;
16. border-width:1px;
17. width:200px;
18. }

script.js
1. function addEvent(obj, evType, fn){
2. if (obj.addEventListener)
3. obj.addEventListener(evType, fn, true)
4. if (obj.attachEvent)
5. obj.attachEvent("on" +evType, fn)
6. }
7.
8. //criando o elemento
9. var elemento = document.createElement("div");
10. //definindo um texto para o elemento
11. elemento.appendChild(
12. document.createTextNode("TreinaWEB e-Learning"));
13. //definindo o ID do elemento
14. elemento.setAttribute('id','div_treinaweb');
15. //definindo uma 'class' para o elemento
16. elemento.setAttribute('class','divcor');
17. //Inserindo o elemento na pgina
18. var divconteudo = document.getElementById("conteudo");
19. divconteudo.appendChild(elemento);
20.
21. /* Processos para declararmos os eventos:
22. onmouseover e onmouseout nesta div criada dinmicamente */
23.
24. var div = document.getElementById("div_treinaweb");
25.
26. addEvent(div,'mouseover',function() {
27. div.setAttribute('class','divsemcor')}
28. );
29.
30. addEvent(div,'mouseout',function(){
31. div.setAttribute('class','divcor')}
32. );

Mtodo getAttribute
"Pega" o atributo de um elemento. Sua sintaxe simples:
1. getAttribute('NomeDoAtributo');

Veja um exemplo:
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8. <div id="conteudo">
9. <h3>TreinaWEB e-Learning</h3>
10. </div>
11. </body>
12.
14.
15. var elemento = document.getElementById("conteudo");
16. valor = elemento.getAttribute("id");
17.
18. alert(valor);
19.
20. </script>
21.
22. </html>

Foi obtido o valor do atributo id do elemento 'conteudo'.
Ps: Nesse exemplo, o JavaScript foi inserido no fim do documento, entre a tag de fechamento
</body> e a tag de fechamento do documento (</html>), pois os elementos precisam estar
carregados para poderem ser manipulados. Se o JavaScript fosse inserido entre a tag <head>
no se conseguiria manipul-los.

Eventos

Qualquer ao que o usurio execute, em qualquer objeto de uma pgina, chamada de
"evento". H duas maneiras de se associar cdigo a um evento: diretamente no HTML ou
atravs de script (EventListeners).
A mais simples, e muito comum, feita diretamente no HTML. Assim:
1. <input type="button" value="Novo" onclick="NovoRegistro()">

O cdigo acima faz com que o boto, ao receber o evento onclick (quando ele for
pressionado/clicado), execute a funo javascript NovoRegistro().
Em muitos aspectos, a maneira mais fcil de se capturar eventos em uma pgina simples. H,
porm, dois problemas bsicos com esse mtodo:
Falta de flexibilidade

Voc no pode criar de maneira transparente um script que mude o comportamento de um
objeto.
Acoplamento

Um dos objetivos dos Web Standards que voc possa manter separados contedo e
estrutura (HTML), aparncia (CSS) e comportamento (JavaScript). Qualquer encapsulamento,
acoplando o Script ao HTML, destrudo.
Acoplamento a criao de cdigo no-organizado, de modo que alterar uma parte simples do
cdigo pode exigir alteraes em diversas outras partes, que usam ou so usadas por aquela.

EventListeners
possvel se atribuir cdigo, a um evento em um objeto, atravs de script o que garante
grande flexibilidade e evita o acoplamento.
Mas no se iluda: simplesmente conhecer essa tcnica no lhe possibilitar desenvolver
scripts, automaticamente, com bom nvel de encapsulamento; ser preciso certo estudo e
planejamento para isso. Por outro lado, desconhecer esses detalhes ir impedi-lo de separar o
comportamento de contedo.
A recomendao do W3C sugere um mtodo, addEventListener, para se atribuir um handler a
um evento qualquer. Isso funciona adequadamente em todos os navegadores atuais, exceto
no Internet Explorer. Para ele, a Microsoft inventou seu prprio jeito de fazer as coisas: trata-
se do mtodo attachEvent, que faz exatamente o mesmo que o mtodo proposto pelo W3C.
Felizmente, muito fcil criar uma funo compatvel com todos os navegadores:
5. obj.attachEvent("on"+evType,fn)
6. }

Com ela voc pode adicionar um handler de evento a um objeto, de maneira simples, e que
funcione em qualquer navegador atual.

A sintaxe da funo addEvent esta:
1. addevent('elemento','tipo_do_evento','funcao_a_ser_executada');

Onde:

elemento: elemento que receber o evento.

tipo_de_evento: o evento que este elemento receber (onclick, onchange etc.); deve-se
colocar o evento sem o prefixo "on", por exemplo, se o evento for onclick defina a funo
como "click".funo_a_ser_executada: a funo a ser executada quando o evento for
"disparado".

Veja este exemplo:
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8. <input type="submit" value="click aqui" id="btn"
9. </body>
10.
16. obj.attachEvent("on"+evType, fn)
17. }
18.
19. function Alertar(){
20. alert("TreinaWEB e-Learning");
21. }
22. //Acessa o elemento btn = um boto
23. btn=document.getElementById("btn");
24. //Adiciona um evento ao boto "btn"
25. //addevent(elemento, tipo_do_evento, funcao_a_ser_executada);
26. addEvent(btn, "click", Alertar);
27. </script>
28.
29. </html>

Veja outro exemplo:

index.html
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8. <img src="sem_cor.jpg" id="imgtreina">
9. </body>
10.
11. <script type="text/Javascript" src="script.js"></script>
12.
13. </html>

script.js
6. }
7.
8. function ChangeImgCOR(){
9. img = document.getElementById("imgtreina");
10. img.src = "cor.jpg";
11. }
12. function ChangeImgSEMCOR(){
13. img = document.getElementById("imgtreina");
14. img.src = "sem_cor.jpg";
15. }
16.
17. img=document.getElementById("imgtreina");
18. //Ao passar o mouse, executa a funo
19. addEvent(img,"mouseover", ChangeImgCOR);
20. //Ao tirar o mouse, executa a funo
21. addEvent(img,"mouseout",ChangeImgSEMCOR);

Viu como simples separar contedo de comportamento?

No exemplo a aplicao foi separada em camadas: HTML de um lado, SCRIPT de outro.

Outro exemplo:

index.html
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8. <select id="select">
9. <option value="Valor 1">Valor 1</option>
14. </select>
15. </body>
16.
18.
19. </html>

script.js
6. }
7.
8. function alerta(){
9. alert("Voc selecionou um item.");
10. }
11.
12. elemento=document.getElementById("select");
13. //Ao selecionar um item
14. addEvent(elemento, "change", alerta);

Cancelando Eventos
Tambm existem diferenas entre os navegadores para se cancelar um evento. Chama-se
"cancelar um evento" quando se evita que a ao padro, disparada pelo evento, ocorra. Por
exemplo, o clique em um boto submit de formulrio faz com que o formulrio seja
submetido; cancelar esse evento, fazer com que o formulrio no seja submetido, essencial
na validao de formulrio.
Segundo a documentao do W3C, para cancelar um evento qualquer preciso chamar o
mtodo preventDefault do objeto de evento. No Internet Explorer um pouco diferente: para
cancelar um evento preciso fazer com que a funo que est tratando o evento retorne
false.
Acompanhe a criao de uma pequena funo de tratamento de eventos, que testa a
possibilidade de chamar preventDefault. Se o mtodo existir, ser executado. E ela retornar
false de qualquer forma:
1. function CancelarEvento(e)
2. {
3. if(e.preventDefault)e.preventDefault()
4. return false
5. }

Desta forma, quando for preciso cancelar um evento, deve-se executar a funo que trata o
evento:
1. Cancelarevento(e)

Veja um exemplo:

index.html
1. <html>
2.
3. <head>
5. </head>
6.
7. <body>
8. <a id="link1"href="http://www.treinaweb.com.br">
9. AcessarWebSite</a>
10. </body>
11.
13.
14. </html>

script.js
5. obj.attachEvent("on"+evType, fn)
6. }
7.
8. function CancelarEvento(e)
9. {
10. if(e.preventDefaul)e.preventDefault()
11. return false
12. }
13.
14. //----------------------------------------------
15.
16. function clicou(e){
17. alert("Cancelandoo evento...")
18. //Cancela o evento, evitando a navegao
19. return CancelarEvento(e);
20. }
21.
22. function CriarOnclick(){
23. var elemento = document.getElementById("link1"
24. addEvent(elemento, "click",clicou);
25. }
26.
27. //Disparando o evento Onload, executando a funo CriarOnclick()
28. addEvent(Window,"load", CriarOnclick);

Formulrios
Formulrio o assunto que gera mais dvidas em quem est aprendendo HTML. No
diferente com javascript e DHTML. Porm, basta um pouco de persistncia no estudo e logo
voc estar dominando os mtodos e propriedades de cada tipo de campo de formulrio.
A primeira tarefa ser referenciar o formulrio atravs de script. Para facilitar as coisas sero
estudados dois, entre os diversos mtodos de se referenciar um formulrio:
document.NomeDoFormulario e document.nomedoform.
O mtodo document.NomeDoFormulario simples e resolve boa parte das necessidades,
uma vez que geralmente o formulrio possui um atributo name. Se voc quiser acessar um
formulrio sem name, ou deseja trabalhar com todos os formulrios da pgina, use o objeto
document que contm um Array chamado forms.
Exemplo Referenciando com o mtodo Forms, para trabalhar com todos formulrios da
pgina:

index.html
1. <html>
2.
3. <head>
5. <script src="script.js"></script>
6.
7. </head>
8. <body onLoad="CorDeFundo();">
9.
10. 
11. <form action="http://www.google.com.br/search">
12. <br>
13. Pesquisa Google: <input name="q" size="30">
14. <input type="submit" value="Pesquisar">
15. <br><br>
16. </form><br>
17.
18. 
19. <form action="http://www.exemplo.com.br">
20. <br>
21. Teste de formulrio: <input name="q"size="30">
22. <input type="submit" value="Teste">
23. <br><br>
24. </form><br>
25.
26. <input type="submit" value="Cor de fundo"
27. onClick="CorDeFundo();">
28.
29. </body>
30. </html>

script.js
1. function RandomColor()
2. {
3. R=parseInt(192+Math.random()*64)
4. G=parseInt(192+Math.random()*64)
5. B=parseInt(192+Math.random()*64)
6. return "rgb("+R+","+G+","+B+")"
7. }
8.
9. function CorDeFundo()
10. {
11. for(var i=0;i<document.forms.length;i++)
12. {
13. document.forms[i].style.background=RandomColor();
14. }
15. }

Exemplo em execuo

Referenciando de forma simples

1. document.NomeDoFormulario

Veja este exemplo:

index.html
1. <html>
2.
3. <head>
6.
7. </head>
8. <body onLoad="CorDeFundo();">
9. 
10. <form name="form1" action="http://www.google.com.br/search">
11. <br>
12. Pesquisa Google: <input name="q" size="30">
13. <input type="submit" value="Pesquisar">
14. <br><br>
15. </form><br>
16.
17. 
18. <form name="form2" action="http://www.exemplo.com.br">
19. <br>
20. Teste de formulrio: <input name="q" size="30">
21. <input type="submit" value="Teste">
22. <br><br>
23. </form><br>
24.
25. <input type="submit" value="Cor de fundo"
26. onClick="CorDeFundo();">
27. </body>
28. </html>

script.js
2. {
3. R=parseInt(192+Math.random()*64)
4. G=parseInt(192+Math.random()*64)
5. B=parseInt(192+Math.random()*64)
6. return "rgb("+R+","+G+","+B+")"
7. }
8.
10. {
11. //colorindo form1
12. document.form1.style.backgroundColor=RandomColor();
13. //colorindo form1
14. document.form2.style.background=RandomColor();
15. }

Observe a forma como foi referenciado o formulrio "document.nomedoform".

Agora voc aprender a encontrar campos dentro de um formulrio. Sero demonstradas duas
formas: uma bem simples, document.formulario.nomedocampo; e a outra, usando o Array
formulario.elements.

Exemplo utilizando o Array formulario.elements :

index.html
1. <html>
2. <head>
5.
6. </head>
7. <body>
8. <form name="form1">
9. <input type="text" />
10. <input type="text" />
11. <input type="text" /><br />
12. <textarea rows="2" name"S1" cols="20">TreinaWEB</textarea>
15. <input type="checkbox" name="C1" value="ON">
18. <input type="radio" value="V1" name="R1">
19. <input type="radio" value="V2" name="R1">
20. <input type="radio" value="V3" checked name="R1"><br>
21. <select size="1" name="D1">
22. <option>www.treinaweb.com.br</option>
23. <option>www.treinaweb.com.br</option>
24. </select>
25. </form>
26.
27. <input type="button" value="Colorir" onClick="CorDeFundo()">
28. </body>
29. </html>

script.js
1.
3. {
4. R=parseInt(192+Math.random()*64);
5. G=parseInt(192+Math.random()*64);
6. B=parseInt(192+Math.random()*64);
7. return "rgb("+R+","+G+","+B+")";
8. }
9.
11. {
12. var frm=document.form1;
13. for(var i=0;i<frm.elements.length;i++)
14. {
15. frm.elements[i].style.background=RandomColor();
16. }
17. }

Exemplo utilizando a forma simples, document.formulario.campo.

script.js
1. function RandomText()
2. {
3. var strarray = ["Nome 1","Nome 2","Nome 3","Nome 4","Nome 5"];
4. var i = Math.round(5*Math.random());
5. return strarray[i];
6. }
7.
9. {
10. var frm=document.form1;
11. frm.edit1.style.background=randomColor();
12. frm.edit2.value=RandomText();
13. }
14.
15. function randomColor()
16. {
17. R=parseInt(192+Math.random()*64);
18. G=parseInt(192+Math.random()*64);
19. B=parseInt(192+Math.random()*64);
20. return "rgb("+R+","+G+","+B+")";
21. }

index.html
1. <html>
2. <head>
4.
6.
7. </head>
8. <body>
10. <input name="edit1" type="text">
11. <input name="edit2" type="text">
12. </form>
13.
14. <input type="button" value="Colorir" onclick="CorDeFundo()">
15.
16. </body>
17. </html>
Radio, Checkbox e Select

Programadores iniciantes geralmente tm dificuldades em acessar propriedades e mtodos
desses elementos de formulrio. A grande maioria dos problemas acontece ao acessar os
objetos select, checkbox e radio.
Select

A maior dificuldade dos desenvolvedores com o select o fato de ele no possuir um atributo
value. Os problemas ocorrem porque o Internet Explorer oferece um atributo value. Muitos
desenvolvedores programam assim: select.value, e testam apenas no IE; quando tentam abrir
em outro navegador (NetScape) no funciona a comeam a "paular" o navegador.

O objeto select contm dois membros fundamentais para acessar seu valor: o Array options e
a propriedade selectedIndex. O Array options contm os options do select, e cada um deles
possui duas propriedades: value, que contm o valor do atributo HTML (value daquele option);
e text, que contm o texto da opo. O atributo selectedIndex um nmero, o ndice da
opo selecionada. Assim, para obter o valor de um select, voc deve fazer o seguinte:
1. ObjetoSelect.options[ObjetoSelect.selectedIndex].value;

Exemplo:
1. <html>
2.
3. <head>
5. </head>
6.
8. </head>
9.
11.
12. function ObterURL(se1){
13. //obtem o valor do item selecionado
14. url = se1.options[se1.selectedIndex].value;
15. //Coloca este valor no edit
16. document.form1.txturl.value = url;
17. }
18.
19. </script>
20.
21. </body>
22.
24. <select size="1" name="opcoes" onChange="ObterURL(this)">
25. <option selected value="www.treinaweb.com.br">
26. TreinaWEB</option>
27. <option value="www.googlecom.br">Google</option>
28. </select><br><br>
29. <b>Url:</b> <input type="text" name="txturl" size="50">
30. </form>
31.
32. </body>
33.
34. </html>

Agora, para descobrir os valores selecionados numa caixa de seleo mltipla voc precisa
varrer o Array de options, por exemplo:
1. <html>
2. <head>
4. </head>
5.
7. function ObterURL(sel){
8. // Inicia a varivel que receber os dados selecionados
9. selecionados="";
10.
11. // Itera sobre os itens selecionados do SELect
12. for(var i=0;i<sel.options.length;i++)
13. if(sel.options[i].selected){
14.
15. // Auto incrementamos ( += ) na varivel os itens selecionados
16. selecionados += sel.options[i].text + " - ";
17.
18. }
19.
20. // Escreve no input o valor atual da varivel
21. document.form1.txtdados.value = selecionados;
22. }
23. </script>
24.
25. </body>
26.
28. <select size="5" name="sel" onChange="ObterURL(this)" multiple="multiple">
29. <option selected value="www.treinaweb.com.br">TreinaWEB</option>
30. <option value="www.outrosite.com.br">Outro site</option>
31. <option value="www.outrosite.com.br">Outro site 2</option>
32. <option value="http://www.google.com.br">Google</option>
33. </select>
34.
35. <br /><br />
36. <b>Nome:</b> <input type="text" name="txtdados" size="50" />
37. </form>
38.
39. </body>
40. </html>

Ps: Observe que o Select possui um atributo chamado multiple, que informa que ele deve ser
de mltipla escolha.

Exemplo em execuo:<br/ ><br/ >

Proposta de exerccio:

Veja que, no exemplo acima, o ltimo elemento selecionado ficou com um " - ":

Faa com que o ltimo elemento selecionado no tenha esse caractere (hfen), ficando desta
forma, por exemplo:

Agora voc aprender como criar novas opes dentro de um Select. Os navegadores proveem
uma funo, Option, construtor de um objeto option. Veja a sintaxe:
1. NewOpt= new Option(texto,valor);

Acompanhe este exemplo:
1. <html>
2. <head>
3. <style>select{width:300px;}</style>
5.
6. <script>
7. function GetText(sel){
8. url = sel.options[sel.selectedIndex].value;
9. document.forml.txtvalor.value = url;
10. }
11.
12. function criar(){
13. var txttext= prompt("Digite o texto da opo: ","");
14. var txtvalor= prompt("Digite o valor da opo: ","");
15.
16. var newopt=new Option(txttext,txtvalor);
17.
18. var sel = document.forml.opcoes.options;
19. sel[sel.length]=newopt;
20. }
21. </script>
22.
23. </head>
24. </body>
25.
26. <form name="forml">
27. selecione um item:<br>
28. <select name="opcoes" size="8" onChange="GetText(this)">
29. </select><br><br>
30. valor: <input type="text" name="txtvalor" size="40"><br><br>
31. <input type="button" value="Criar opo" onClick="criar()">
32. </form>
33.
34. </body>
35. </html>

Para remover uma opo de um select basta fazer o seguinte:
1. objectoselect.options[objetoselect.selectedIndex]=null;

Checkbox
Para saber se um checkbox est ou no marcado, acesse sua propriedade checked. Tambm
possvel alter-la. Acompanhe o exemplo:
1. <html>
2. <head>
3.
5.
6. <script>
7.
8. function inverter(){
9. var frm = document.forml;
10. frm.checkl.checked=!frm.checkl.checked;
11. frm.check2.checked=!frm.check2.checked;
12. frm.check3.checked=!frm.check3.checked;
13. }
14.
15. </script>
16.
17. </head>
18. <body>
19.
20. <form name="forml">
21. <input type="button" value="Inverter"
22. onClick="inverter()"><br><br>
23. <input type="checkbox" name="checkl">
24. <input type="checkbox" name="check2">
25. <input type="checkbox" name="check3">
26. </form>
27.
28. </body>
29. </html>

Radio
Dificilmente algum achar til um nico objeto radio. Eles sempre aparecem em grupos de
objetos com o mesmo nome e podem ser acessados com facilidade, usando um Array.
Acompanhe o exemplo:
1. <html>
2.
3. <head>
5. </head>
6.
8. function Show() {
9. var Radio=document.form1.r1;
10. for(var i=0;i<Radio.length;i++)
11. if(Radio[i].checked) {
12. var valor = Radio[i].value;
13. document.form1.txt.value = valor;
14. }
15. }
16. </script>
17.
18. <body>
20. <input type="radio" value="JavaScript CrossBrowser" name="r1"
21. onclick="Show()">JavaScript CrossBrowser<br>
22. <input type="radio" value="Ajax" name="r1" onclick="Show()">Ajax<br>
23. <input type="radio" value="DHTML" name="r1" onclick="Show()">DHTML<br>
24. <input type="radio" value="CSS" name="r1" onclick="Show()">CSS
25.
26. <br><br>Opo selecionada: <input type="text" name="txt" size="35">
27. </form>
28.
29. </body>
30. </html>

Cada item do Array possui uma propriedade checked, que funciona exatamente como no
checkbox.

setTimeout e setInterval
Ambas so funes Javascript, que controlam quando uma funo deve ser chamada.
1. setTimeout([funo], [tempo de espera, em milisegundos])

O setTimeout() executa a funo passada por ele, aps o tempo determinado, apenas uma
vez. Exemplo:
1. setTimeout("alert('Ol, apareci depois de 4 segundos.')", 4000);

O cdigo acima faz com que o alert seja executado apenas 4 segundo aps a chamada.
1. setInterval([funo], [tempo de repetio, em milisegundos]);

Diferentemente da setTimeout(), a funo setInterval() executa repetidamente a funo
passada por ela, em intervalos de tempo iguais.
1. setInterval("alert('Ol, irei aparecer a cada 6 segundos.')", 6000);

O resultado ser um alert a cada 6 segundos. Porm, em certos casos, isso pode ser um
inconveniente. Por isso h o clearInterval(), que finaliza o intervalo entre as chamadas.

Exemplo:
1. <html>
2.
3. <head>
5.
7. var num = 1;
8. objInter = setInterval("show()", 3000);
9.
10. function show()
11. {
12. alert("Irei aparecer 3x apenas.");
13. num++;
14. if(num > 3)
15. {
16. //termina com o intervalo
17. clearInterval(objInter);
18. }
19. }
20.
21. </script>
22. </head>
23.
24. <body>
25.
26. <b>A mensagem se repetir a cada (3) segundos. por 3 vezes.</b>
27. </body>
28. </html>

Javascript Crossbrowser

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Javascript Crossbrowser

Enviado por

Direitos autorais:

Formatos disponíveis

Javascript Crossbrowser

Você também pode gostar