Você está na página 1de 107

WebStandards

Sumrio
1. INTRODUO................................................................................................................................7 2. O QUE SO AS STANDARDS?.....................................................................................................8 2.1 W3C STANDARDS..................................................................................................................8 2.1.1 O que o W3C?.................................................................................................................8 2.1.2 O que a W3C faz?..............................................................................................................9 2.1.3 O que so as standards do W3C?.......................................................................................9 2.1.3.1 HTML 4.0 Linguagem de marcao para hypertexto.............................................9 2.1.3.2 XML 1.0 linguagem extensvel de marcao..........................................................9 2.1.3.3 XHTML 1.0 Linguagem extensvel de marcao de Hypertexto..........................10 2.1.3.4 CSS Folhas de estilo em cascata...........................................................................12 2.1.3.5 DOM1 Document Object Model nivel 1...............................................................12 2.2 ECMA STANDARDS.............................................................................................................13 2.2.1 O que ECMA?...............................................................................................................13 2.2.2 O que faz a ECMA?.........................................................................................................13 2.2.3 O que so as Standards ECMA?......................................................................................13 2.2.3.1 ECMAScrit (standards para JavaScript )..................................................................13 3. QUAS AS VANTAGENS DE SE ADOTAR AS WEB STANDARDS?........................................14 3.1 Acessibilidade..........................................................................................................................14 3.1.1 Para software/mquinas...................................................................................................14 3.1.2 Para pessoas.....................................................................................................................14 3.2 Estabilidade..............................................................................................................................15 4 - A linguagem HTML......................................................................................................................15 4.1 INTRODUO.......................................................................................................................16 4.2 Estrutura do documento html...................................................................................................16 4.2.1 CARACTERSTICAS DAS TAGS HTML..........................................................................16 4.2.2 ATRIBUTOS.........................................................................................................................17 4.2.3 TEXTOS...............................................................................................................................17 4.2.4 CARACTERES ESPECIAIS................................................................................................18 4.3 LISTAS....................................................................................................................................20 4.3.1 LISTAS ORDENADAS.......................................................................................................20 4.3.2 LISTAS NO ORDENADAS...........................................................................................21 4.3.3 EXEMPLO DE LISTA DE CONTEUDO............................................................................22 4.4 HYPERLINKS.........................................................................................................................22 4.4.1 TAG <a>...............................................................................................................................23 4.4.2 CAMINHO RELATIVO.......................................................................................................23 4.4.3 CAMINHO ABSOLUTO.....................................................................................................23 4.4.4 O ATRIBUTO TARGET.......................................................................................................23 4.4.5 USO COM IMAGENS.........................................................................................................24 4.5 TABELAS................................................................................................................................24 ATRIBUTOS DA TABELA......................................................................................................24 01 BORDER......................................................................................................................24 02 CELLSPACING...........................................................................................................24 03 CELLPADDING..........................................................................................................24 04 WIDTH.........................................................................................................................25 www.3way.com.br

WebStandards
05 - ALIGN..........................................................................................................................25 06 BACKGROUND..........................................................................................................25 07 BGCOLOR...................................................................................................................25 08 BORDERCOLOR........................................................................................................25 4.5.1 A TAG <tr>...........................................................................................................................26 Atributos de TR.........................................................................................................................26 1 - BGCOLOR......................................................................................................................26 2.5.2 A TAG <td>...........................................................................................................................26 Atributos de <td>......................................................................................................................26 01 ALIGN..........................................................................................................................26 02 VALIGN.......................................................................................................................27 03 WIDTH.........................................................................................................................27 04 COLSPAN....................................................................................................................27 05 ROWSPAN...................................................................................................................27 2.5.3 A TAG <TH>........................................................................................................................28 4.5.4 ESTRUTURA FORMAL DAS TABELAS..........................................................................28 4.6 IMAGENS...............................................................................................................................30 Atributos de IMG......................................................................................................................30 1 - SRC.................................................................................................................................30 2 - ALT.................................................................................................................................30 3 - ALIGN............................................................................................................................30 4 - WIDTH...........................................................................................................................30 5 - HEIGHT..........................................................................................................................30 6 - BORDER........................................................................................................................31 7 - HSPACE..........................................................................................................................31 8 - VSPACE..........................................................................................................................31 4.7 FORMULRIOS.....................................................................................................................31 4.7.1 A TAG <FORM>..................................................................................................................31 Atributos de FORM..................................................................................................................32 1 - ACTION..........................................................................................................................32 2 - METHOD........................................................................................................................32 4.7.2 A TAG <INPUT>..................................................................................................................32 4.7.3 CAMPOS DE TEXTO..........................................................................................................32 Atributos do Campo de Texto...................................................................................................32 1 Value...............................................................................................................................32 2 - Size..................................................................................................................................32 3 Maxlength.......................................................................................................................33 4.7.4 CAMPOS DE SENHA.........................................................................................................33 4.7.5 CAMPOS DE SELEO.....................................................................................................33 Atributos....................................................................................................................................33 1 Value...............................................................................................................................33 2 - Checked ..........................................................................................................................33 4.7.6 CAMPOS DE ESCOLHA....................................................................................................33 4.7.7 CAMPOS DE LISTA OU MENU........................................................................................34 4.7.8 CAMPOS COM MLTIPLAS LINHAS.............................................................................34 Atributos....................................................................................................................................34 01 Size...............................................................................................................................34 www.3way.com.br

WebStandards
02 Multiple........................................................................................................................34 03 option ...........................................................................................................................34 04 value ............................................................................................................................34 05 text ...............................................................................................................................34 4.7.9 BOTES...............................................................................................................................35 4.7.10 UPLOAD DE ARQUIVOS................................................................................................35 Atributo.....................................................................................................................................35 1 Size.................................................................................................................................35 4.7.11 FIELDSET..........................................................................................................................35 Atributos....................................................................................................................................35 1 Legend............................................................................................................................35 2 Align...............................................................................................................................35 4.7.12 LABEL................................................................................................................................35 4.8 OUTRAS TAGS......................................................................................................................36 1 - Meta informaes <meta>...................................................................................................36 2 - Frames .................................................................................................................................36 3 - IFrame .................................................................................................................................37 5 CASCADING STYLE SHEET CSS............................................................................................37 5.1 INTRODUO.......................................................................................................................37 5.2 USANDO CSS COM HTML..................................................................................................38 5.3 ESTILOS NO PRPRIO ELEMENTO..................................................................................38 5.4 ESTILOS COM ESCOPO DA PGINA................................................................................39 5.5 ESTILOS DEFINIDOS EM ARQUIVOS EXTERNOS.........................................................40 5.6 DECLARAO DE ESTILOS...............................................................................................41 5.7 SELETORES...........................................................................................................................41 5.7.1 SELETORES DE CLASSES...........................................................................................41 5.7.2 SINTAXE ULTILIZADA PARA DEFINIO DE SELETORES.................................42 5.8 PROPRIEDADE DE ESTILO CSS.........................................................................................42 5.8.1 CONFIGURAES ESSENCIAIS................................................................................42 5.8.2 TABELA DE UNIDADES...............................................................................................42 5.8.3 FONTES...........................................................................................................................44 Valores vlidos para as propriedades da fonte......................................................................44 5.8.4 CORES.............................................................................................................................46 Definir cor baseado no sistema operacional do usurio.......................................................48 5.8.5 BORDAS.........................................................................................................................48 Valores vlidos para as propriedades das bordas..................................................................49 5.8.6 BOX MODEL ( MODELO DE CAIXA )........................................................................50 5.8.7 Aplicando ESTILOS AOS PRINCIPAIS ELEMENTOS HTML....................................51 5.8.8 CONFIGURAES PARA BARRA DE ROLATEM....................................................51 5.8.9 LISTAS............................................................................................................................53 Valores vlidos para as propriedades do lista......................................................................53 5.8.10 MARCADORES CUSTOMIZADOS............................................................................53 5.8.11 HYPERLINKS...............................................................................................................54 5.8.12 BOTES........................................................................................................................55 5.8.13 CAMPOS PARA ENTRADA DE TEXTOS..................................................................55 5.8.14 CAIXAS DE SELEO...............................................................................................55 5.8.15 MANIPULANDO CURSORES....................................................................................56 www.3way.com.br

WebStandards
Alterando em todo o documento..........................................................................................56 Alterando em algumas partes do documento.......................................................................57 Cursores personalizados.......................................................................................................57 5.8.16 TABELAS......................................................................................................................57 Borda Simples......................................................................................................................57 Bordas sobrepostas...............................................................................................................58 6 JAVASCRIPT..................................................................................................................................58 6.1 Introduo................................................................................................................................58 6.2 DENTRO DE UM DOCUMENTO HTML.............................................................................59 6.3 EM UM ARQUIVO EXTERNO.............................................................................................59 6.4 TRATADORES DE EVENTOS..............................................................................................59 6.5 SINTAXE DA LINGUAGEM.................................................................................................60 Comentrios..............................................................................................................................60 Separao de instrues............................................................................................................60 6.6 DECLARAO DE VARIVEIS..........................................................................................60 6.7 PALAVRAS RESERVADAS...................................................................................................61 6.8 TIPOS DE DADOS.................................................................................................................61 Tipo de dados numrico............................................................................................................61 Tipo boleano..............................................................................................................................62 Tipo de dados cadeia de caracteres...........................................................................................62 Caracteres de escape em cadeias de texto.................................................................................62 6.9 OPERADORES.......................................................................................................................63 Operadores Lgicos..................................................................................................................63 Operadores Matemticos...........................................................................................................63 6.10 COMANDOS CONDICIONAIS E LAOS.........................................................................64 01 - Comando IF.......................................................................................................................64 02 - Comando FOR...................................................................................................................64 03 - ComandoWHILE...............................................................................................................64 04 - O comando switch.............................................................................................................65 05 - Operador Ternrio..............................................................................................................65 6.11 ARRAYS................................................................................................................................66 6.11.1 CRIAO E INICIALIZAO DE ARRAYS............................................................66 6.11.2 ACESSANDO OS ELEMENTOS DO ARRAY............................................................67 6.11.3 MTODOS ESPECIAIS................................................................................................67 01 join(sep)........................................................................................................................67 02 length............................................................................................................................67 03 - pop()..............................................................................................................................67 05 reverse()........................................................................................................................67 06 shift...............................................................................................................................68 07 slice(ini[, fim)...............................................................................................................68 08 - sort(func_comp)............................................................................................................68 09 - splice(iniNdx, quant, [elm1][, ..., elmN]).....................................................................69 10 toString()......................................................................................................................69 6.12 FUNES.............................................................................................................................69 Funes embutidas na prpria linguagem. ...............................................................................70 www.3way.com.br

WebStandards
01 eval ..............................................................................................................................70 02 parseInt.........................................................................................................................70 03 parseFloat.....................................................................................................................70 04 date().............................................................................................................................70 Funes tipicamente Matemticas:...........................................................................................70 6.13 CLASSES UTILITRIA.......................................................................................................71 6.13.1 STRING.........................................................................................................................71 01 O objeto String.............................................................................................................71 02 A propriedade length....................................................................................................72 03 anchor(nome)................................................................................................................72 04 big()..............................................................................................................................72 05 blink()...........................................................................................................................72 06 Bold()............................................................................................................................72 07 charAt(index)................................................................................................................73 08 charCodeAt(index).......................................................................................................73 09 - concat(str2, str3 [, ..., strN])..........................................................................................73 10 fixed()...........................................................................................................................73 11 fontcolor(cor)................................................................................................................73 12 fontsize(sz)...................................................................................................................74 13 fromCharCode(cod1,cod2,...,codN).............................................................................74 14 indexOf(Str, index).......................................................................................................74 15 - lastIndexOf(Str, index)..................................................................................................74 16 link(href).......................................................................................................................75 17 - replace(rExp, nStr)........................................................................................................75 18 - search(rExp)..................................................................................................................75 19 - slice(iniNdx, fimNdx)...................................................................................................75 20 - split(sep, lim)................................................................................................................75 21 - substr(ini [, compr])......................................................................................................76 22 - substring(ndx1, ndx2)...................................................................................................76 23 toLowerCase()..............................................................................................................76 25 toUpperCase()..............................................................................................................76 6.13.2 DATE.............................................................................................................................77 01 O objeto Date().............................................................................................................77 02 getDate().......................................................................................................................77 03 getDay()........................................................................................................................78 04 getFullYear().................................................................................................................78 05 getHours().....................................................................................................................78 06 getMilliseconds()..........................................................................................................78 07 getMinutes().................................................................................................................78 08 getMonth()....................................................................................................................78 09 getSeconds().................................................................................................................78 10 getTime()......................................................................................................................79 11 getTimezoneOffset().....................................................................................................79 12 - setFullYear(nAno [, nMes, nDia]).................................................................................79 13 - setHours(nHora, nMin, nSeg, nMs)..............................................................................79 14 - setMinutes(nMin [, nSeg, nMs])...................................................................................80 15 - setMonth(nMes [, nDia])...............................................................................................80 www.3way.com.br

WebStandards
16 - setSeconds(nSeg [, nMs]).............................................................................................80 17 - setTime(nMs)................................................................................................................80 18 toLocaleString()............................................................................................................80 6.14 OBJETO WINDOW..............................................................................................................81 Propriedades do objeto window................................................................................................81 Mtodos de window em Javascript...........................................................................................82 6.15 OBJETO DOCUMENT.........................................................................................................83 Propriedades do objeto document.............................................................................................83 Mtodos do document...............................................................................................................84 6.16 OBJETO FORM - FORMULRIO......................................................................................85 Propriedades:.............................................................................................................................85 01 - action.............................................................................................................................85 02 - elements........................................................................................................................85 03 - encoding........................................................................................................................85 04 - length.............................................................................................................................85 05 - method...........................................................................................................................86 06 - name..............................................................................................................................86 07 - target..............................................................................................................................86 Mtodos:....................................................................................................................................86 01 - submit().........................................................................................................................86 6.17 DILOGOS...........................................................................................................................89 MTODO ALERT() .................................................................................................................89 MTODO CONFIRM()............................................................................................................89 6.18 STATUS.................................................................................................................................90 6.19 NAVIGATOR.........................................................................................................................90 Propriedades:.............................................................................................................................90 6.20 HISTORY..............................................................................................................................91 Propriedades:.............................................................................................................................91 Mtodos:....................................................................................................................................91 7 CONTROLE DE DOCUMENTO VIA DOM.................................................................................92 7.1 DOM API.................................................................................................................................92 01 getElementsByTagName...................................................................................................92 02 childNodes........................................................................................................................92 03 createTextNode(text).........................................................................................................92 04 appendChild( new Child ).................................................................................................92 05 createElement(newElementName)....................................................................................92 06 removeChild(theChild).....................................................................................................93 07 getAttribute(nome)............................................................................................................93 08 setAttribute(nome, valor)..................................................................................................93 7.2 Marcar ou desmacar um conjunto de checkboxes...................................................................94 7.3 EVITANDO DUPLO CLIQUE DO USURIO......................................................................95 7.4 VALIDANDO CAMPOS OBRIGATRIOS...........................................................................95 7.5 Validando o tamanho dos campos............................................................................................96 7.6 COOKIES................................................................................................................................97 8 DOM STYLE..................................................................................................................................99 8.1 Categorias do Style Object:.....................................................................................................99 8.1.1 PROPRIEDADES BACKGROUND...............................................................................99 www.3way.com.br

WebStandards
8.1.2 PROPRIEDADES DE BORDA E MARGEM..............................................................100 8.1.3 PROPRIEDADES DE LAYOUT..................................................................................103 8.1.4 PROPRIEDADES DE TEXTO......................................................................................104 8.2 Alterando componentes do formulrio baseado na seleo de um elemento da lista...........105

www.3way.com.br

WebStandards
1.INTRODUO
Tim Berners-Lees sonha para sua inveno, a World Wide Web, um espao de uso comunitrio onde compartilha-se informaes de trabalho, lazer e socializao (The World Wide Web, A very short personal history). Como desenvolvedores Web criando sites corporativos, sociais e educacionais, ns transformamos este sonho em realidade. Mas, nesta poca de crescimento avassalador, a Web necessita de orientao para desenvolver seu pleno potencial. As Web standards so estas orientaes. As standards asseguram que todos tenham acesso s informaes e tambm tornam o processo de desenvolvimento Web mais rpido e mais agradvel. Conformidade com as standards facilitam o acesso a Web aos usurios portadores de necessidades especiais. Pessoas cegas podem se valer de leitores de pginas Web. Pessoas com reduzido grau de viso podem rearranjar as pginas web e aumentar o tamanho para facilitar a leitura. E, pessoas usando dispositivos portteis podem navegar to facilmente quanto aquelas em grandes workstations. Como explicaremos mais adiante existem muitas razes prticas para que os desenvolvedores Web estejam engajados com as standards. Por exemplo: motores de busca encontraro maior facilidade na indexao do site. O uso de cdigo especfico para determinado browser frequentemente duplica ou triplica o trabalho de criao das pginas Web e ainda no contempla futuros novos tipos de mdia. Esta situao s assume este aspecto catico, pelo no uso das standards. Alguns temem as standards por acreditar que elas impem limites. Na verdade, elas eliminam muito do trabalho tedioso de desenvolvimento Web, proporcionando ao desenvolvedor mais tempo e maior flexibilidade para livre criao. As standards compatibilizam documentos Web tanto para aplicaes futuras quando para tecnologias passadas. Muitos usos da Web, inclusive aqueles que hoje em dia no passam de sonhos, no sero possveis ou sero bem mais difceis sem uma total compatibilidade com as standards. Atualmente os sistemas e software amplamente usados, so universalmente aceitos, mas, quem sabe o que est por vir no futuro? Amarrar-nos tecnologias proprietrias significa entregar nosso futuro ao sabor do sucesso ou insucesso de um fornecedor. Confiar em standards de abrangncia universal, proporcionar a sobrevivncia da Web, motivando a continuao de inovaes ao ritmo atual.

www.3way.com.br

WebStandards
2.OQUESOASSTANDARDS?
2.1W3CSTANDARDS 2.1.1 O que o W3C?
O World Wide Web Consortium (W3C) um consrcio de mbito internacional dedicado a "conduzir a Web ao seu pleno potencial". dirigida por Tim Berners-Lee, o inventor da Web. Fundado em 1994, o W3C tem mais de 400 organizaes membro incluindo a a Microsoft, America Online (proprietria da Netscape Communications), Apple Computer, Adobe, Macromedia, Sun Microsystems, e uma vasta gama de fabricantes de hardware e software, fornecedores de contedos, instituies acadmicas e companhias de telecomunicaes. O Consrcio est hospedado em trs instituies de pesquisas :

MIT nos EUA INRIA na Europa Keio University no Japo.

2.1.2 O que a W3C faz?


O W3C desenvolve especificaes abertas (de fato standards) para aumentar a interoperabilidade dos produtos para Web. As Recomendaes do W3C so desenvolvidas por grupos de trabalho formados por menbros do Consrcio e experts convidados. Os grupos de trabalho criam esboos e propostas de recomendaes , baseados em um consenso comum de companhias e organizaes interessadas na criao de aplicaes Web. Estas so ento submetidas apreciao dos membros do W3C e seu diretor para aprovao formal como uma Recomendao. Maiores detalhes sobre este processo e seus vrios estgios, podem ser obtidos no website do W3C ( www.w3.org ).

2.1.3 O que so as standards do W3C?


2.1.3.1HTML4.0Linguagemdemarcaoparahypertexto
A linguagem de marcao para hypertexto (HTML) universalmente usada para estruturar textos nos documentos Web. Os browsers interpretam estes documentos e apresentam sua estrutura conforme a mdia do usurio. Por exemplo: browsers visuais apresentam o elemento strong (<strong> ... </strong>) em texto negrito, ao passo que um leitor de tela imprimir nfase ao texto quando o ler. Com o uso das Folhas de estilos em cascata (CSS) os autores podem definir como os elementos estruturais sero apresentados, sobrescrevendo as apresentaes padro (defaut) dos browsers.

www.3way.com.br

WebStandards
2.1.3.2XML1.0linguagemextensveldemarcao
Linguagem extensvel de marcao (XML) uma linguagem parecida com o HTML, mas em lugar de utilizar um conjundo fixo e definido de elementos, permite que voc defina seus prprios elementos - ou use um conjunto definido por outra pessoa. Permite at o uso de vrios conjuntos de elementos em um mesmo documento - atravs do uso do XML namespaces. Algumas aplicaes XML, tais como XHTML e MathML, j se tornaram Recomendaes do W3C Outras esto em fase de esboo no W3C. As standards para folhas de estilo, tais como CSS e XSL, contemplam uma grande variedade de opes para especificar como os documentos XML devem ser renderizados. Os browsers ainda oferecem suporte espordico renderizao direta de documentos XML, por isto o uso de HTML (ou XHTML) com as CSS para estilizao, a soluo a ser adotada. Atualmente o XML mais usando para comunicao entre aplicaes. XML mais flexvel do que HTML, sobretudo por permitir a criao de elementos e sistemas de estruturao prprios. Isto torna o XML um formato ideal para a organizao de grandes quantidades de dados, sendo, hoje, usado em muitos bancos de dados e motores de busca. Exemplo de XML usado para comunicar com um swf e fazer rotao de banners. <banners> <banner> <caminho>img/banners/01563.jpg</caminho> <link>http://www.3way.com.br</link> </banner> <banner> <caminho>img/banners/2513.jpg</caminho> <link/> </banner> </banners> Representao grfica da estrutura do XML em ns:

banners banner banner

caminho

link

caminho

link

www.3way.com.br

WebStandards
2.1.3.3XHTML1.0LinguagemextensveldemarcaodeHypertexto
XHTML 1.0 uma reformulao do HTML como aplicao XML. XHTML 1.0 pode ser vista como uma linguagem ideal nascida do HTML 4.01, e tecnicamente bem mais precisa devido a influncia do XML. XHTML ser apresentado no seu browser de maneira idntica ao seu HTML equivalente. Voc pode optar pelo uso do XHTML quando houver interesse em servir seu contedo de diferentes maneiras, por exemplo, para um PDA; A sintaxe precisa das regras do XML torna muito mais fcil e menos dispendioso o processamento do XHTML quando comparado com o do HTML comum. Ideologicamente, XHTML 1.0 herda os seguintes conceitos do HTML 4.01:

A apresentao dos documentos deve ser separada da formatao via folhas de estilos Os documentos devem ser acessveis Os documentos devem ter carter internacional

XHTML 1.0 tambm usa o modelo das trs DTDs (Document type definitions Definio de Tipo de Documento), este modelo surgiu com o HTML 4.0 e continuou com o HTML 4.01:

Strict

Enfatiza a separao entre contedo e forma e comportamento do usurio, quer dizer que seu cdigo est seguindo a risca os padres; Deve ser usada na transio de HTML anterior verso 4 para as marcaes atuais. Contm 11 elementos de apresentao e um conjunto de atributos j no utilizados na verso Strict. Permite o uso de marcaes que no so aceitas pelo grau "strict". Por exemplo, pode-se declarar: <font size=12 face=Arial>Al, pessoal!</font> e o browser interpret-la corretamente (o modo "strict" no aceita marcaes de fontes) usada para pginas com frames.

Transitional

Frameset

Algumas prticas do XML aplicveis ao XHTML incluem:


Todos os tipos de documentos so declarados por um correta declarao DOCTYPE A estrutura do documento constituda por:

uma declarao DOCTYPE o elemento html com o respectivo namespace XHTML declarado o elemento head incluindo o elemento title o elemento body

Todos os nomes de elementos e atributos so escritos em letras minsculas e o nome de atributos escritos entre aspas. Elementos no vazios (ex: p, li) devem ter tags de fechamento

www.3way.com.br

WebStandards

<p>...</p> - <li>...</li> <br />, <hr />, <img />

Elementos vazios (ex: br, hr, img) devem ter suas tags terminadas por uma barra

Documentos devem validar contra as DTD neles declaradas XHTML 1.1 est constituda em trs partes bsicas:

DTD Strict da XHTML 1.0 (com pequenas modificaes) Modularizao XHTML Anotao Ruby

A redao de documentos em XHTML 1.1, pode ser feita de duas maneiras. A primeira delas com o uso da DTD pblica para XHTML 1.1, que no permitindo qualquer atributo de apresentao, resulta em documentos extremamente estruturados. A separao entre a estrutura e a apresentao total, sendo toda a apresentao servida atravs de folha de estilo. A outra maneira de redigir documentos em XHTML 1.1 com o uso da modularizao XHTML. A modularizao consiste na compartimentao dos conhecidos componentes do HTML e do XHTML (tais como os textos, as tabelas, os frames, os formulrios) em mdulos distintos. Voc pode escrever sua prpria DTD e usar somente os componentes que necessite. a caracterstica extensvel da linguagem, possibilitando ao autor Web a oportunidade de criar uma marcao "customizada". A anotao Ruby uma maneira especial de tratar as anotaes para determinados caracteres asiticos. Ruby faz parte do trabalho desenvolvido com vistas a internacionalizao da Web.

2.1.3.4CSSFolhasdeestiloemcascata
Folha de Estilos em Cascata (CSS) um mecanismo para alterar a aparncia dos elementos do HTML ou do XML , atravs da definio de estilos aplicveis ao diferentes elementos, classes de elementos ou instncias individuais. Folhas de estilos podem ser usadas para definir a aparncia de todo o site. Seguindo a introduo das CSS, o W3C recomenda que definies especficas para layout sejam retiradas do HTML e entregues s folhas de estilos, ensejando assim, a criao de uma World Wide Web mais simples e estrutural.

2.1.3.5DOM1DocumentObjectModelnivel1
A insero de uma linguagem de scripts (tais como ECMAScript, a verso standard do JavaScript) em uma pgina Web e o mximo aproveitamento de todo o poder e interatividade do script, possivel graas ao DOM. (Em termos de programao o Document Object Model (DOM) Nvel 1 um "Application Programming Interface" (API) para interao com pginas web.) Ele possibilita ao script, acesso fcil estrutura, ao contedo e apresentao de um documento escrito em linguagens tais como o HTML e as CSS.

www.3way.com.br

WebStandards
O DOM compatvel com futuras melhorias tecnolgicas; ele permitir a todas as linguagens de script interagir com qualquer linguagem usada no documento. Esta standard no s tornar mais fcil programar HTML dinmico, como tambm simplificar a tarefa de adaptaes para futuras tecnologias da Internet.

2.2ECMASTANDARDS 2.2.1 O que ECMA?


O European Computer Manufacturers Association (ECMA) - Associao Europia de Fabricantes de Computadores - uma organizao oficialmente fundada em 1961 com a finalidade de levantar necessidades para elaborao de standards para os formatos operacionais de computadores, incluindo linguagem de programao e cdigos input/output. A ECMA tem sua sede em Genebra, Suia, prxima ao quartel general da International Organization for Standardization (ISO) e da International Electrotechnical Commission (IEC). Em 1994, com a finalidade de representar melhor a diversificao das suas atividades, o nome da organizao foi mudado para ECMA - European Association for Standardizing Information and Communication Systems.

2.2.2 O que faz a ECMA?


O principal objetivo da ECMA a eleborao de Standards e produo de Relatrios Tcnicos na rea das tecnologias de comunicaes e informao. ECMA no um instituto oficial para normatizao e sim uma associao de companhias que frequentemente colabora com instituies oficiais nacionais e internacionais. As Standards da ECMA tm sido aceitas como base para standards europias e internacionais. J foram publicadas mais de 270 ECMA Standards e 70 Relatrios Tcnicos. Das standards, 85 foram tornadas standards internacionais pela International Organization for Standardization (ISO) e 25, tornadas standards europias pelo European Telecommunications Standards Institute (ETSI).

2.2.3 O que so as Standards ECMA?


2.2.3.1ECMAScrit(standardsparaJavaScript)
ECMAScrip uma linguagem standard de script, baseada nas largamente enpregadas JavaScript da Netscape e JScript da Microsoft. A standard para ECMAScript definida pelo ECMAs Technical Committee 39 (TC-39). O principal uso de ECMAScript, que uma linguagem baseada em objetos, a manipulao dos objetos definidos pelo Document Object Model (DOM) em uma pgina Web. Estes objetos (na prtica, os elementos que compem uma pgina Web ou a prpria pgina como um todo) podem ser adicionados, suprimidos, movidos ou ter suas propriedades alteradas. Isto possibilita ao desenvolvedor web implementar efeitos tais como animao de textos, rollovers de imagens e mudana de pginas baseada em inputs do usurio.

www.3way.com.br

WebStandards
A atual especificao para ECMAScript a ECMA Standard ECMA-262, ECMAScript Language Specification, 2nd edition.

3.QUASASVANTAGENSDESEADOTARASWEB STANDARDS?
3.1Acessibilidade 3.1.1 Para software/mquinas
Pginas em conformidade com as standards tero grande visibilidade em resultados de buscas na Web. Documentos conformes, graas a sua estruturao, facilitam e fornecem informaes detalhadas aos mecanismos de busca, resultando em uma indexao mais apurada. Os softwares, quer instalados do lado do cliente quer do lado do servidor tero maior facilidade em entender a estrutura de documentos em conformidade com as standards e a tarefa de instalar um mecanismo de busca dentro do prprio site torna-se mais fcil e propicia melhores resultados. As standards so escritas de modo a que os browsers antigos entendam a estrutura bsica dos documentos. Mesmo que eles, browsers antigos, sejam incapazes de entender as mais recentes e sofisticadas implementaes das standards, estaro aptos a renderizar os contedos do site. Certamente, o mesmo se aplica para sistemas robotizados que coletam informaes do site para motores de busca ou outros indexadores. Cdigos em conformidade com as standards so passveis de serem validados em servios de validao. Os validadores processam os documentos e reportam uma lista de erros, tornando a tarefa de busca e correo de erros bem mais fcil e rpida. Documentos conformes so mais facilmente convertidos para outros formatos, tais como bancos de dados ou documentos Word. Isto possibilita maior versatilidade no uso das informaes contidas em um documento da World Wide Web, e simplifica a migrao para novos sistemas - hardware bem como software - incluindo dispositivos como TVs e PDAs.

3.1.2 Para pessoas


Acessibilidade um conceito atrelado a variadas web standards, especialmente ao HTML. Significa no somente acesso web para pessoas portadoras de necessidades especiais, como tambm usurios com browsers no convencionais, incluindo-se a os browsers de voz, que lem os documentos para pessoas com restries visuais, os browsers Braille que convertem textos para a escrita Braille, os browsers portteis com monitores minsculos, as tela para tele-textos e demais dispositivos no usuais. Com a crescente diversidade de meios para acesso a Web, os ajustes ou duplicaes dos websites para atender aos novos dispositivos torna-se uma tarefa cada vez mais difcil (na verdade, pode-se dizer, uma tarefa impossvel nos dias atuais). As standards so um grande passo para a soluo deste problema. Sites em conformidade com as standards sero

www.3way.com.br

WebStandards
consistentemente renderizados no s em browsers convencionais novos e antigos como tambm em browsers no usuais e sofisticados tipos de mdia. Algumas das conseqncias de se ignorar as standards so bvias: a mais evidente a restrio de acesso ao site. Para os seus negcios, qual o sentido em limitar o acesso a uma frao do total de pessoas interessadas em visitar seu site? Para um site comercial, negar acesso mesmo que seja para uma frao mnima de seu pblico alvo, pode fazer uma diferena muito grande para o faturamento. Para um site educacional, evidente assegurar acesso no s aos estudantes com sofisticados browsers grficos, como tambm queles menos favorecidos, usando browsers de textos ou estudantes portadores de necessidades especiais usando browsers especiais. O mesmo princpio aplica-se a qualquer tipo de website ainda que seja grande a tentao de se afastar das standards e tirar o mximo proveito de solues proprietrias os ganhos em acessibilidade com as standards, so bem mais compensadores a longo prazo.

3.2Estabilidade
A grande maioria das web standards so em geral projetadas com vistas a compatibilidade com o passado e com o futuro assim documentos projetados em conformidade com verses antigas das standards continuaro vlidos para novos browsers, e aqueles projetados em conformidade com as standards atuais "degradaro graciosamente" produzindo um resultado aceitvel em browsers antigos. Durante sua existncia, um website pode vir a ser gerenciado por vrias equipes de designers e importante que qualquer um compreenda e edite o cdigo com facilidade. As web standards baseiam-se em um conjunto de regras que qualquer desenvolvedor Web capaz de seguir, entender e estar familiarizado. Quando um desenvolvedor projeta segundo as standards, outro desenvolvedor capaz de assumir sem qualquer problema ou soluo de continuidade.

www.3way.com.br

WebStandards
4AlinguagemHTML
4.1INTRODUO
Apesar dessa aparente sofisticao, as pginas Web no passam de documentos de texto simples. Podem ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferena que as pginas Web contm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos so marcados como ttulos, outros como pargrafos. As marcaes so usadas tambm para indicar os links que levam a outros documentos na rede. Essas marcas so chamadas de tags e esto especificadas dentro da linguagem utilizada para criar as pginas Web, HTML.

4.2Estruturadodocumentohtml
A estrutura bsica de um documento HTML a seguinte: <HTML> ... </HTML> <HEAD> ... </HEAD> <TITLE> ... </TITLE> <BODY> ... </BODY> Onde:

<HTML> ... </HTML>

So usados para delimitar os comandos HTML, indicam o incio e o fim de um documento. O Browser reconhece a TAG HTML e indica que o documento que vir a seguir deve ser interpretado como HTML.

<HEAD> ... </HEAD>

Delimita a seo do cabealho do documento onde sero definidos poucos comandos de linguagem, o mais importante o ttulo que exibido na barra de ttulos do browser.

<TITLE> ... </TITLE>

Definem o ttulo da pgina que exibido na barra de ttulos do browser. Estas TAGs devem estar sempre detro das TAGs <head></head>. <BODY> ... </BODY> Dentro desta TAG esto os elementos da pgina Web. onde esto localizados os textos, imagens, links, etc.

4.2.1CARACTERSTICASDASTAGSHTML
Os comandos em HTML so chamados de TAGs, compreendem de marcas padres que so ultilizadas para fazer indicaes a um browser. Assim, como em outras linguagens, os comandos tem uma sintaxe prpria e obedecem a algumas regras:

As TAGs sempre aparecem entre os sinas menor que(<) e maior que(>);

www.3way.com.br

WebStandards

Geralmente so usadas aos pares e a TAG de finalizao de um comando qualquer finalizada com a precedncia de uma barra(/) Em geral: <nome da tag> texto </nome da tag> onde: <nome da tag>: indica o incio da TAG </nome da tag>: indica o final da TAG.

4.2.2ATRIBUTOS
Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo aps o nome do elemento, precedido de um espao e composto de um nome de atributo, um sinal de igual (=) e um valor de atributo, cercado por aspas duplas (") ou simples (). Um bom exemplo de atributo o id, que serve para identificar, de maneira nica, um elemento dentro de um documento HTML. Exemplo: <p id="nome"> Outro bom exemplo o atributo href, usado para definir uma referncia de hipertexto (link) em um elemento A ou LINK. Exemplo: <a href="http://www.3way.com.br"> A tag alt referida no incio do texto , na verdade, um atributo, usado para definir um texto, que deve substituir uma imagem, caso a mesma no esteja disponvel ou no seja suportada pelo user-agent (alt abreviatura de alternate, que significa substituto). Exemplo: <img src="/img/bruno_um_milhao.jpg" alt="Foto">

4.2.3TEXTOS
H duas formas de formatar seu texto: Tags de ttulo <H> - "Headings" Com elas voc pode apenas definir o tamanho das letras, mas no o tipo de fontes. Veja agora como ficam as tags "headings" para cabealhos que vo do tamanho 1 at 6: <H1> Este o <H2> Este o <H3> Este o <H4> Este o <H5> Este o <H6> Este o Tag <FONT> primeiro nvel </H1> segundo nvel </H2> terceiro nvel </H3> quarto nvel </H4> quinto nvel </H5> sexto nvel </H6>

Voc pode tambm usar as tags de fonte no lugar das tags de "headings". Este tipo de tag a mais usada, pois voc pode definir mais facilmente o tamanho do texto e fonte que voc deseja, e personalizar ainda mais a sua pgina. A tag <FONT>, e dentro dela voc pode definir vrios parmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes:

Atributo face Uma evoluo que permite a escolha da fonte (tipo de letra) para os textos, a tag

www.3way.com.br

WebStandards
feita assim: <FONT face=fonte_da_letra>Texto</FONT> Exemplos: <FONT face=Times>Fonte Times New Roman </FONT> <FONT face=Arial>Fonte Arial </FONT> <FONT face=Courier>Fonte Courier New </FONT> Atributo COLOR e SIZE <font size="3"> A palavra ter o tamanho 3</font> <font color="red"> A palavra ter a cor vermelha </font> Podemos tambm combinar as tags acima: <font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font>

4.2.4CARACTERESESPECIAIS
As formas de representar caracteres especiais, atravs de uma notao especfica, so chamadas de Entidades. Existem Entidades de Caracter e Entidades Numricas. Exemplo:

Caracter

Entidade de Caracter
&ccedil;

Entidade Numrica
&#231;

Descrio
c cedilha (minsculo)

HTML permite que caracteres especiais sejam representados por seqncias de escape, indicadas por trs partes: um & (e () comercial) inicial, um nmero ou cadeia de caracteres correspondente ao caracter desejado, e um ; (ponto e vrgula) final. Exemplo:

Caracter

Entidade de Caracter
&atilde;

Entidade Numrica
&#227;

Descrio
a c/ til

Um caracter bastante til o espao no ignorvel, o &nbsp; (Non-breaking space). Este caracter importante quando desejamos forar o browser a no ignorar espaos em branco entre palavras.

Caracter
Non-breaking space Exemplo:

Entidade de Caracter
&nbsp;

Entidade Numrica

Descrio
Espao no ignorvel

<body> <p>Veja como fica com &nbsp;&nbsp;&nbsp;&nbsp; espao no ignorvel!</p> </body> Visualizao pelo Browser: Veja como fica com espao no ignorvel! Os caracteres ASCII < (menor que), > (maior que), e & (e () comercial) tem

www.3way.com.br

WebStandards
significados especiais para indicar um comando HTML. Mas por vezes queremos exibir estes smbolos na tela e so usados dentro de documentos seguindo a correspondncia:

Caracter
& < >

Entidade de Caracter
&amp; &lt; &gt;

Entidade Numrica
&#38; &#60; &#62;

Descrio
E() comercial Menor que Maior que

Outras seqncias de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com as entidades mais utilizados em Portugus: Tabela de Caracteres Especiais e Acentuao

Caracter

Entidade de Caracter
&nbsp;

Entidade Numrica
&#09;

Descrio
Tabulao Horizontal Espao no ignorvel

"

&quot; &Agrave; &Aacute; &Acirc; &Atilde; &Ccedil; &Eacute; &Ecirc; &Iacute; &Oacute; &Ocirc; &Otilde; &Uacute; &Uuml; &agrave; &aacute; &acirc; &atilde; &ccedil;

&#34; &#192; &#193; &#194; &#195; &#199; &#201; &#202; &#205; &#211; &#212; &#213; &#218; &#220; &#224; &#225; &#226; &#227; &#231;

Aspas A c/ crase A c/ acento agudo A c/ acento circunflexo A c/ til C cedilha (maisculo) E c/ acento agudo E c/ acento circunflexo I c/ acento agudo O c/ acento agudo O c/ acento circunflexo O c/ til U c/ acento agudo U c/ trema a c/ crase a c/ acento agudo a c/ acento circunflexo a c/ til c cedilha (minsculo)

www.3way.com.br

WebStandards
&eacute; &ecirc; &iacute; &ntilde; &oacute; &ocirc; &otilde; &uacute; &uuml; &#233; &#234; &#237; &#241; &#243; &#244; &#245; &#250; &#252; e c/ acento agudo e c/ acento circunflexo i c/ acento agudo n c/ til o c/ acento agudo o c/ acento circunflexo o c/ til u c/ acento agudo u c/ trema

Veja outras entidades numricas: Tabela de Caracteres Especiais e Acentuao

Caracter
# $ %

Entidade de Caracter

Entidade Numrica
&#35; &#36; &#37;

Descrio
Tralha Cifro Percente

Por que usar estas formataes ? Os browsers costumam tambm mostrar corretamente os caracteres acentuados normalmente. Essa prtica, embora facilite sobremaneira a digitao dos documentos, no recomendada "ainda", devido a um problema relativo a transmisso desses caracteres. Chama-se conjunto de caracteres uma representao digital de texto. Um caracter um smbolo cujas diversas representaes devem significar a mesma coisa para uma comunidade de pessoas. Na prtica, porm, existem alguns conjuntos que associam dois nmeros distintos a um mesmo caracter. Os Browser j permitem que se escolha a codificao adequada ao conjunto de caracteres relativo aos documentos a serem recuperados. Mas para garantir a interpretao apropriada de um documento, pode-se inserir uma indicao do esquema de codificao, atravs do campo: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Na World Wide Web, os acentos da Lngua Portuguesa chegam a travar os Browsers de usurios em outros pases, que usam um conjunto de caracteres diferentes do ISO Latin 1 apesar do ISO Latin 1 ser padro na Web.

4.3LISTAS
Uma boa forma de organizar as pginas Web. Podem servir como resumos ou ndices de todo o site, contendo links para as outras pginas criadas por voc ou outras pessoas.

www.3way.com.br

WebStandards
4.3.1LISTASORDENADAS
<OL> e </OL> Marcam o incio e o fim de uma lista ordenada. Os itens da lista so colocados em ordem e recebem na primeira linha um nmero ou letra. Devem ser usados junto com o tag <LI>. Exemplo: <OL> <LI>Item 1</LI> <LI>Item 2</LI> </OL>

Atributo: START=n

Especifica o nmero a partir do qual os itens da lista comeam a ser contados. Sendo que n pode ser um nmero ou uma letra. Tambm podem ser utilizados nmeros romanos. Exemplo: <OL START=3> <LI>Item 1</LI> <LI>Item 2</LI> </OL> Atributo: TYPE Define o tipo de numerao empregada na lista. Pode assumir os valores "1 (1, 2, 3, 4, etc) ", "I" (I, II, III, IV, etc), "i" (i, ii, iii, iv, etc), "A" (A,B, ..., Z) ou "a" (a, b, ..., z). Exemplo: <ol type="A"> <li> Treinamento </li> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li> </ol>

4.3.2LISTASNOORDENADAS
<UL> e </UL> Marcam o incio e o fim de uma lista no ordenada. Deve ser usado junto com o tag <LI>. Os itens da lista recebem marcas grficas na primeira linha conhecidas como bullets. Exemplo: <UL> </UL>

<LI>Item 1 <LI>Item 2 Atributo: TYPE

Indica qual o smbolo deve ser usado para demarcar cada elemento da lista. Pode ser os valores "disc" (), "circle" () ou "square"(s). Exemplo: <ul type="circle"> <li> Treinamento </li>

www.3way.com.br

WebStandards
</ul> <li> Consultoria </li> <li> Desenvolvimento </li> <li> Manuteno </li>

4.3.3EXEMPLODELISTADECONTEUDO
Listas de Definio Estas listas so chamadas tambm Listas de Glossrio, uma vez que tm o formato: <DL> <DT>termo a ser definido <DD>definio <DT>termo a ser definido <DD>definio

</DL> Que produz:

termo a ser definido definio termo a ser definido definio Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas.
<DL> <DT>termo a ser definido <DD>definio <OL> <LI>item de uma lista numerada <LI>item de uma lista numerada <UL> <LI>item de uma lista </UL> <LI>item de uma lista numerada </OL> <DT>termo a ser definido <DD>definio </DL> Sada:

termo a ser definido definio 1. item de uma lista numerada 2. item de uma lista numerada item de uma lista 3. item de uma lista numerada termo a ser definido definio

www.3way.com.br

WebStandards
4.4HYPERLINKS
O principal poder do HTML vem da capacidade de interligar partes de um texto e imagens a outro documento. As interligaes entre documentos no se restringe somente a ligaes com outras pginas. Em pginas muito longas onde o assunto tem vrios tpicos, podemos utilizar ndices onde os links tem a funo de interligar os tpicos de um texto e que com apenas um clique em um dos tpicos do ndice o item exibido.

4.4.1TAG<a>
<a> e </A> Marca o incio e o fim de um link.

Atributos

href=URL: indica para onde o link levar (sendo URL o endereo para onde o link est apontando).

Exemplo: <a href=http://www.3way.com.br>3 Way</A>

4.4.2CAMINHORELATIVO
O caminho relativo pode ser usado sempre que queremos fazer referncia a um documento armazenado no mesmo servidor do documento atual. Atravs do campo de endereo do browser, vemos que este documento est localizado em um diretrio /www/ do servidor www.3way.com.br. Para escrevermos um link deste documento para o documento doc2.html no diretrio /www/exemplos/, tudo que precisamos fazer escrever: <a href="exemplos/doc2.html">Exemplo de caminho relativo</A>.

4.4.3CAMINHOABSOLUTO
Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo: <a href="http://www.3way.com.br/">SITE DA 3WAY</A> que oferece um link para um documento no servidor WWW da 3Way Networks. Com a mesma sintaxe, possvel escrever links para qualquer servidor de informaes da Internet.

4.4.4OATRIBUTOTARGET
A funo do atributo target basicamente indicar o nome de um frame na pgina onde um documento deve ser aberto. Outro controle que voc pode ter com ele se o documento lincado deve ser aberto na prpria janela ou no prprio frame (target:_self) onde o prprio link se encontra ou se a URL do link deve ser aberta em outra janela (target=_blank) do seu browser. Essa a nica funo do atributo target e basicamente tudo o que precisar saber sobre ele. Veja o exemplo:

www.3way.com.br

WebStandards
<a <a <a <a href="slide.html" target="_self">slide 1.</a> - ir abrir na mesma pgina. href="slide.html" target="_blank">slide 2.</a> - ir abrir em outra janela. href="slide2.html" target="dynamic">slide 3.</a> - ir abrir no frame dynamic href="www.google.com target="miolo">Google</a> - ir abrir no frame miolo

4.4.5USOCOMIMAGENS
Para usar imagens em vez de texto nos links s colocar entre as tags <a></A> as TAGS de imagem quer veremos um pouco mais a frente. Exemplo: <a href=www.google.com.br><IMG SRC = foto.jpg></A>

4.5TABELAS
Assim como as listas, no HTML existem elementos especficos para a criao e formatao de tabelas. O recurso de tabelas muito interessante e muito usado nas pginas Web. O conceito o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseo delas esto as clulas. Na linguagem HTML voc pode inserir nas clulas tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e at outras tabelas. TABLE <table>...</table> Indica o incio e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e clulas - somente sero consideradas se incluidas entre <table> e </table>. <table> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table>

ATRIBUTOS DA TABELA
01BORDER
Se presente, a tabela apresenta bordas. Se for atributo o valor 0 (zero), no somente a tabela no apresentar bordas, como o espao usualmente reservado para bordas ser liberado, permitindo a confeco de tabelas mais compactas. Exemplo: <table border="4">

02CELLSPACING
Indica quanto espao, em pixels, deve ser inserido entre as clulas da tabela. Exemplo: <table cellspacing="10">

www.3way.com.br

WebStandards
03CELLPADDING
Indica quanto espao, em pixels, deve ser inserido entre as bordas das clulas e seu contedo. Exemplo: <table cellpadding="5">

04WIDTH
Indica a largura da tabela. Usa-se como medida o nmero de pixels desejado ou uma porcentagem da largura do documento. Exemplo: <table width="300">

05ALIGN
Indica a posio da tabela no documento. Pode assumir os valores "LEFT" ou "RIGHT", indicando, respectivamente, que a tabela deve estar a esquerda ou a direita do documento, e com o texto "fluindo" sua volta. Exemplo: <table align="center">

06BACKGROUND
Especifica uma imagem que ser utilizada como "background" da tabela. A imagem ser "TILED", isto , repetida de forma a cobrir todo o fundo da tabela. Exemplo: <table border background="imagem.gif">

07BGCOLOR
Especifica uma cor de fundo para a tabela. Exemplo: <table border bgcolor="yellow">

08BORDERCOLOR
Especifica uma cor para as bordas da tabela. Exemplo: <table border bgcolor="yellow" bordercolor="blue"> OBS: Todos os atributos de uma tabela so opcionais. Uma tabela padro no possui bordas e sua altura e largura so as mnimas necessrias para suportar seu contedo.

www.3way.com.br

WebStandards
4.5.1ATAG<tr>
TR <tr>...</tr> Indica o incio e o final de uma determinada linha da tabela (Table Row). Uma linha composta de elementos. Exemplo: <table> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table>

Atributos de TR
1BGCOLOR
Define a cor de fundo de uma linha da tabela. Exemplo: <table> <tr bgcolor="red"> <td>Texto A</td> <td>Texto B</td> </tr> </table>

2.5.2ATAG<td>
Indica um elemento (clula) da tabela, vindo do ingls "Table Data". Os elementos contm os dados da tabela, sejam eles texto, links, imagens, etc. Exemplo: <table> <tr> <td>Texto A</td> <td>Texto B</td> </tr> </table>

Atributos de <td>
01ALIGN
Define se o contedo da clula estar alinhado a esquerda ("LEFT"), centralizado ("CENTER") ou a direita ("RIGHT"). Se omitido, o alinhamento fica esquerda. Exemplo:

www.3way.com.br

WebStandards
<table> <tr> <td align="ceter">Texto A</td> <td>Texto B</td> </tr> </table>

02VALIGN
Define se o contedo da clula estar alinhado com seu topo ("TOP"), centralizado ("MIDDLE") ou com sua base ("BOTTOM"). Se omitido o alinhamento fica ao meio. Exemplo: <table> <tr> <td valign="middle">Texto A</td> <td>Texto B</td> </tr> </table>

03WIDTH
Define a largura da clula. Pode ser expressa em pixels ou como uma porcentagem da largura total da tabela. Exemplo: <table> <tr> <td width="30%">Texto A</td> <td width="70%">Texto B</td> </tr> </table>

04COLSPAN
Indica quantas "clulas de largura" (colunas) a respectiva clula deve ocupar. ( Mesclagem) Exemplo: <table> <tr> <td colspan="2">Texto A</td> </tr> <tr> <td>Texto B</td> </tr> </table>

05ROWSPAN
Indica quantas "clulas de altura" (linhas) a respectiva clula deve ocupar.

www.3way.com.br

WebStandards
Exemplo: <table> <tr> <td rowspan="2">Texto A</td> <td>Texto B</td> </tr> <tr> <td>Texto C</td> </tr> </table>

2.5.3ATAG<TH>
TH <th>...</th> Indica um elemento da tabela. A nica diferena para "TD" que o elemento identificado como "HEADER" (cabealho) da tabela. Exemplo: <table> <tr> <th>Texto A</th> </tr> </table> Os atributos da TAG <TH> so os mesmos da TAG <td>. Nota: Usualmente os Browsers exibem o contedo de <TH> em negrito e centralizado.

4.5.4ESTRUTURAFORMALDASTABELAS
<TABLE width="500" cellspacing="0" border="1" cellpadding="0" align="center"> <tr> <td align="center" colspan="5" bgcolor="red">Tabela de Preo</td> </tr> <tr align="center" bgcolor="Gray"> <td>Supermercado</td> <td>Arroz</td> <td>Feijo</td> <td>leo</td> <td>Aucar</td> </tr> <tr align="center"> <td align="left" bgcolor="#CCCCCC">Rede Aleluia</td> <td>R$5,00</td> <td>R$7,35</td> <td>R$1,95</td> <td>R$2,39</td> </tr> <tr align="center"> <td align="left" bgcolor="#CCCCCC">Alaio</td> <td>R$4,59</td> <td>R$6,53</td> <td>R$2,34</td> <td>R$2,49</td>

www.3way.com.br

WebStandards
</tr> </TABLE>

www.3way.com.br

WebStandards
4.6IMAGENS
IMG <img> Este TAG responsvel por ligar uma imagem ao documento.

Atributos de IMG
1SRC
Obrigatrio, indica a URL da imagem a ser exibida. Podem ser usadas URL absoluto (http://www.3way.com.br/images/imagem.gif) ou URL relativo (/images/imagem.gif). Exemplo: <img src="/images/imagem.gif">

2ALT
Indica um texto asociado imagem. Quando a imagem no puder ser exibida, o texto exibido em seu lugar. Este texto tambm exibido quando o cursor fica parado sobre a imagem. Exemplo: <img src="/images/imagem.gif" alt="Logotipo">

3ALIGN
Determina o alinhamento da imagem em relao ao texto existente na mesma linha. Os valores vlidos so "TOP", "MIDDLE", "BOTTOM","LEFT" e "RIGHT". Exemplo: <img src="/images/imagem.gif" align="top">

4WIDTH
Determina a largura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" width="600">

5HEIGHT
Determina a altura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" height="60">

www.3way.com.br

WebStandards
6BORDER
Determina a largura, em pixels, da imagem. Exemplo: <img src="/images/imagem.gif" border="2">

7HSPACE
Determina a quantidade de espao deixado em branco aos lados da imagem, de forma que ela no fique demasiadamente prxima dos outros elementos da pgina. Exemplo: <img src="/images/imagem.gif" hspace="10">

8VSPACE
Determina a quantidade de espao deixado em branco acima e abaixo da imagem. Exemplo: <img src="/images/imagem.gif" vspace="10">

4.7FORMULRIOS
Formulrios so de grande utilidade para a Web, pois permitem a interatividade entre o usurio, a pessoa que visualiza as pginas e o Servidor Web. Assim, atravs da Web, pode-se ler e gravar informaes em Banco de Dados, gerando enormes possibilidades de uso para a Internet, como por exemplo a de um servio de venda. Formulrios tambm podem ser gerados para a navegao entre pginas e Sites na Web.

4.7.1ATAG<FORM>
<form>...</form> Indica a existncia de um formulrio, isto , um local da pgina utilizado pelo usurio para enviar informaes para um local predeterminado (usualmente um Script CGI). Exemplo: <form method="POST" action="http://www.form.com.br"> <p> <input type="text" name="T1" size="20"> <input type="submit" value="Submit" name="B1"> <input type="reset" value="Reset" name="B2"> </p> </form>

www.3way.com.br

WebStandards
Atributos de FORM
1ACTION
Indica a localizao (URL) do script que ir receber e interpretar os dados enviados pelo formulrio. Exemplo: <form action="http://www.form.com.br">

2METHOD
Indica o formato no qual os dados sero enviados. Pode assumir os valores "GET" (indica como os dados sero passados pelo script) ou "POST" (envia os dados para entrada padro do sistema operacional). <form method="POST" action="http://www.form.com.br">

4.7.2ATAG<INPUT>
Muitos elementos de um formulrio HTML so definidos pela tag <INPUT>. Cada tipo de elemento possui parmetros prprios, mas todos possuem pelo menos dois parmetros em comum: 1 TYPE Define o tipo de elemento. 2 NAME Define o nome daquele elemento.

4.7.3CAMPOSDETEXTO
<input type="text" name="" value="" size="" maxlength=""> O campo mais comum em formulrios. Exibe na tela um campo para entrada de texto com apenas uma linha.

Atributos do Campo de Texto


1Value
o valor pr-definido do elemento, que aparecer quando a pgina for carregada.

2Size
O tamanho do elemento na tela, em caracteres.

www.3way.com.br

WebStandards
3Maxlength
O tamanho mximo do texto contido no elemento, em caracteres.

4.7.4CAMPOSDESENHA
<input type="password" name="" value="" size="" maxlength=""> Tipo de campo semelhante ao anterior, com a diferena que neste caso os dados digitados so substitudos por asteriscos, e por isso so os mais recomendados para campos que devam conter senhas. importante salientar que nenhuma criptografia utilizada. Apenas no aparece na tela o que est sendo digitado. Possui os mesmos atributos do Campo de Texto: Value, Size e Maxlength.

4.7.5CAMPOSDESELEO
<input type="checkbox" name="" value="" checked> Utilizado para campos de mltipla escolha, onde o usurio pode marcar mais de uma opo.

Atributos.
1Value
O valor que ser enviado ao servidor quando o formulrio for submetido, no caso do campo estar marcado.

2Checked
O estado inicial do elemento. Quando presente, o elemento j aparece marcado.

4.7.6CAMPOSDEESCOLHA
<input type="radio" name="" value="" checked> Utilizado para campos de mltipla escolha, onde o usurio pode marcar apenas uma opo. Para agrupar vrios elementos deste tipo, fazendo com que eles sejam exclusivos, basta atribuir o mesmo nome a todos do grupo. Possui os mesmos atributos do Campo de Seleo.

www.3way.com.br

WebStandards
4.7.7CAMPOSDELISTAOUMENU
<select name=""> <option value="">texto</option> </select> Exibe na tela uma "select list".

4.7.8CAMPOSCOMMLTIPLASLINHAS
<select name="" size="" multiple> <option value="">texto</option> </select> a mesma TAG usada no Campo de Lista ou Menu, porem, se o parmetro "size" tiver o valor 1 e no houver o parmetro "multiple", exibe na tela uma "combo box". Caso contrrio, exibe na tela uma "select list".

Atributos
01Size
Nmero de linhas exibidas. Default: 1;

02Multiple
Parmetro que, se presente, permite que sejam selecionadas duas ou mais linhas, atravs das teclas Control ou Shift;

03option
Cada item do tipo "option" acrescenta uma linha ao select;

04value
Valor a ser enviado ao servidor se aquele elemento for selecionado. Default: o texto do item;

05text
Valor a ser exibido para aquele item. No definido por um parmetro, mas pelo texto que fica entre as tags <option> e </option> OBS: Os Atributos da TAG <SELECT> serve tanto para os Campos de Lista ou Menu quanto para os Campos com Mltiplas Linhas.

www.3way.com.br

WebStandards
4.7.9BOTES
<input type="button" name="" value=""> Utilizado normalmente para ativar funes de scripts client-side (JavaScript, por exemplo). Sem essa utilizao, no produz efeito algum Atributo 1 Value - O texto que aparecer no corpo do boto.

4.7.10UPLOADDEARQUIVOS
<input type="file" name="" size=""> Exibe na tela do browser um campo de texto e um boto, que ao clicado abre uma janela para localizar um arquivo no disco. Para utilizar este tipo de componente, o formulrio dever utilizar o mtodo "POST" e ter o parmetro "enctype" com o valor "multipart/formdata".

Atributo
1Size
O tamanho do campo de texto exibido.

4.7.11FIELDSET
As Tag de Fieldset so usados para dividir controles similares de formulrios em grupos.

Atributos
1Legend
Ttulo da FieldSet;

2Align
Usado para alinhar o Ttulo da FieldSet.

4.7.12LABEL
A tag <label> utlizada em conjunto com elementos de formulrio, propiciando uma maior facilidade de acesso a esses elementos.

www.3way.com.br

WebStandards
4.8OUTRASTAGS 1 - Meta informaes <meta>
Meta tags so cdigos html, esses cdigos ajudam alguns sites de busca, como Altavista e vrios outros, a encontrar o seu site mais rapidamente. Esses cdigos organizam as informaes que os sistemas de busca precisam para mostrar a sua pgina em um resultado de busca feita por um usurio. Esse cdigo contm informaes sobre o ttulo, palavras-chave e descrio do seu site. As tags ficam entre os comandos <head> e </head>, que ficam bem no topo da pgina. Eles podem ser colocados em todas as pginas do seu site, somente nas principais, ou ainda s na pgina inicial. Esta outra meta usada para informar quem o autor da pgina, voc pode por exemplo caso, queira, informar seu nome e tambm seu email. Exemplo: <meta name= "author" content="Czar Augusto cezar@3way.com.br"> Insere a descrio da pgina que aparecer em alguns sistemas de buscas. Pequena porque esta deve conter por volta de 255 caracteres, ou seja, uma breve descrio. Exemplo: <meta name= "description" content="descricao do seu site"> Esta tag meta usada para indicar a alguns sites de busca palavras chave (keywords) que podem ser usadas para identificar o contedo do seu site. Elas so separadas por uma vrgula (,). Exemplo: <meta name= "keywords" content="Palavras-chave sempre separadas por vrgula">

2 - Frames
Frames ou quadros permitem a diviso da tela de exposio do browser em diferentes reas onde pode-se apresentar diferentes pginas. Isso possibilita, por exemplo, que se determine uma rea da tela para ser a pgina principal e outras reas para menus ou links. Isso usado de maneira coordenada pode ser de grande ajuda na navegabilidade pelas pginas de seu site. O primeiro passo para se criar uma estrutura usando frames definir o Frameset ou conjunto de frames, que indica como ser estruturado cada quadro na tela em termos de linhas (rows) e colunas (cols) , e quais pginas devero ser apresentadas em cada um desses quadros. No primeiro exemplo vamos dividir a tela em duas reas : um menu lateral e uma rea principal ocupando a maior parte da tela. <frameset cols="100 , * "> <frame src= menu.html name = "area-menu"> <frame src= apresentacao.html name="area-principal"> </frameset>

www.3way.com.br

WebStandards

No exemplo acima temos a tela dividida em duas reas, definidas por duas colunas verticais. A primeira , com tamanho de 100 pixels , recebeu o nome de area-menu e nela estamos apresentando a pgina menu.html. A segunda ocupa o restante da tela ( indicado por "*" ), recebeu o nome de area principal, e nela estamos apresentando inicialmente a pgina apresentacao.html.

3 - IFrame
O iframe um recurso em desuso, embora seja muito funcional. Ele muito prtico pois cria uma janela onde voc quiser para colocar uma pgina de html. Basta voc colocar o seguinte cdigo aonde deseja que a sua janela do Iframe aparea: <iframe name=enquete src="enquete.html" frameBorder=0 width=400 height=150 scrolling=auto></iframe> Onde:

name: o nome da janela, ele ser usado caso voc queira criar links que abram dentro do iframe, usando o atributo target da TAG de links <a></a>. src: a pgina que ser aberta dentro do iframe. frameborder: borda do frame. width e height: largura e altura do iframe, respectivamente. scrolling: barra de rolagem.

No caso de colocar um iframe num post, voc deve fazer o upload do arquivo html e das figuras (se tiver) e depois colocar o cdigo acima no post alterando os dados como voc preferir. Lembre-se que o HTML trabalha sempre com referncias. Todos os arquivos vo ficar no mesmo nvel, portanto no utilize nome de pastas para os atributos "src", tanto das imagens quando do iframe.

5CASCADINGSTYLESHEETCSS
5.1INTRODUO
A CSS traz para a WEB a mesma convenincia de um s lugar para definir os estilos

www.3way.com.br

WebStandards
que esto disponveis na maioria dos editores de texto. Voc pode definir uma CSS em uma localizao central para afetar a aparncia das tags HTML em uma nica pgina da WEB ou em todo um site da WEB. Embora a metodologia da CSS funcione com a HTML, no HTML. Em vez disso, a CSS um cdigo separado que amplia as capacidades da HTML, permitindo que voc redefina o modo como as tags HTML funcionam.

5.2USANDOCSSCOMHTML
O melhor da folha de estilo em cascata que ela incrivelmente fcil de configurar. No exige plug-ins ou softwares diferente apenas regras. Podemos definir regras que dizem a uma tag HTML especifica o seu contedo, ou pode criar regras genricas e, em seguida, aplic-las s TAGS como quiser. Existem trs etapas na regras da CSS. 1 - Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo: p {font: bold 12pt times;} 2 - Classe: Uma classe uma regra de agente livre que pode ser aplicada a qualquer tag HTML de acordo com a sua vontade. Voc pode dar classe o nome que quiser. Uma classe o tipo de seletor mais verstil. Exemplo: .minhaclasse{font bold 12pt times;} 3 - ID: As regras de ID funcionam como os seletores de classe, porque podem ser aplicadas, a qualquer Tag HTML. Os seletores de ID, porm, geralmente so aplicados somente uma vez na pgina a determinada TAG HTML para criar um objeto para ser usado com uma funo JavaScript. Exemplo: #objeto{font bold 12pt times;}

5.3ESTILOSNOPRPRIOELEMENTO
Embora a CSS signifique nunca ter que definir a aparncia de cada tag individualmente, voc ainda tem a liberdade de definir os estilos dentro das TAGS individuais. Isso particularmente til para substituir cada um dos outros estilos que esto definidos para a pgina. Veja o exemplo abaixo: <html> <head> <title>CSS</title> </head> <body style="background-color:black;"> <br> <h1 style="color:red">Cascading Style Sheet</h1> <h2 style="color:yellow">CSS</h2> <BR> <P style="color:White"> HTML <br>

www.3way.com.br

WebStandards
HTML <br> </p> </body> </html>

5.4ESTILOSCOMESCOPODAPGINA
A principal utilizao da CSS para definir as regras de todo um documento. Para fazer isso, voc deve inclui as regras de estilo no ttulo do documento aninhado dentro de um conteiner de estilo. Embora os resultados do acrscimo de estilo dessa forma possam parecer idnticos ao acrscimo dos estilos diretamente em uma TAG HTML, a colocao dos estilos em uma localizao comum permite alterar os estilos de um documento a partir de um nico lugar. Veja o mesmo exemplo acima como ficaria: <html> <head> <title>CSS</title> <style type="text/css"> body{background-color:black;} h1{color:red;font-size:25px;} h2{color:yellow;font-size:80px;} p{color:white;} </style> </head> <body> <br> <h1>Cascading Style Sheet</h1> <h2>CSS</h2> <BR> <P> HTML<br> HTML <br> </P> </body> </html>

www.3way.com.br

WebStandards

5.5ESTILOSDEFINIDOSEMARQUIVOSEXTERNOS
um arquivo de texto normal, que pode ter qualquer extenso, apesar de podermos atribuir a extenso .css para lembrarmos que tipo de arquivo . O texto que devemos incluir deve ser escrito exclusivamente em sintaxe CSS, ou seja, seria errado incluir o cdigo HTML nas TAGS e etc.

LINKANDO A PGINA COM A FOLHA DE ESTILOS


Para isso, vamos colocar a TAG <LINK> com os atributos:

rel="STYLESHEET" indicando que o link com uma folha de estilos type="text/css" porque o arquivo de texto, em sintaxe CSS href="estilos.css" indica o nome do arquivo fonte dos estilos Vejamos uma pgina web inteira que linka com a declarao de estilos anterior.

<html> <head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>P&aacute;gina que l estilos</title> </head> <body> <h1>P&aacute;gina que l estilos</h1> Esta p&aacute;gina tem no cabealho a etiqueta necessria para linkar com a folha de estilos. muito f&aacute;cil. <br> <br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Isto est&aacute; dentro de um TD, logo tem estilo prprio, declarado no arquivo externo</td> </tr> <tr>

www.3way.com.br

WebStandards
</tr> </table> </body> </html> <td>A segunda fila do TD</td>

5.6DECLARAODEESTILOS
Declarao de estilos o fragmento de uma regra CSS dentro dos colchetes { }. A declarao CSS compe-se de duas partes: a propriedade e o valor e uma regra CSS pode conter vrias declaraes separadas por um ponto-e-vrgula. Por exemplo: P { font-size : 12pt; font-family : arial,helvetica; font-weight : normal; font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666;

} H1{

} TD{

} BODY { background-color : #006600; font-family : arial; color : White; }

5.7SELETORES
Seletor uma entidade que identifica um elemento HTML ou define uma classe ou pseudo classe na qual a regra de estilo ser aplicada. Por exemplo: p{fontsize:12px;} O seletor p (elemento HTML pargrafo) e a regra CSS escrita determina que os pargrafos tero uma fonte de tamanho 12px.

5.7.1 SELETORES DE CLASSES


Seletor tipo classe tem uma abrangncia mais ampla. um seletor cujo nome voc

www.3way.com.br

WebStandards
"inventa" e pode ser aplicado a qualquer elemento HTML. A sintaxe para este tipo de seletor um nome (nome da classe) precedido de um . (ponto) O nome pode conter letras de a-z, A-Z, nmeros de 0-9, hfen, ou caracter de escape. Caracteres Unicode 161-255, bem como qualquer caracter Unicode de cdigo nmerico, contudo no podem comear com um (trao) ou um nmero. Exemplo: .minhaclasse{color:#FF0000;}

5.7.2 SINTAXE ULTILIZADA PARA DEFINIO DE SELETORES


A sintaxe de uma regra css obedece o seguinte padro: seletor { propriedade: valor }

5.8PROPRIEDADEDEESTILOCSS
As propriedades de formatao em CSS possuem duas dimenses: a dimenso textual (o cdigo) e a dimenso visual (o efeito dos cdigos).

5.8.1 CONFIGURAES ESSENCIAIS


As configuraes mais essenciais realizadas com as propriedades CSS em relao a tabelas <table></table>, blocos que ficam entre as TAGS <div></div>, Tags de marcao como:

<span></span> - utilizada para a configurao de trechos de pargrafos; <strong></strong> - ultilizada no HTML para deixar o texto em negrito; <p></p> - marcao de pargrafos.

Essas configuraes na maioria das vezes so setadas para alterao no visual de textos e alterao no posicionamento de determinadas partes do documento.

5.8.2 TABELA DE UNIDADES


As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direo). O formato para declarar o valor de uma unidade de medida CSS um nmero com ou sem ponto decimal imediatamente precedido do sinal '+' (mais) ou do sinal '-' (menos), sendo o sinal '+' (mais) o valor "default" e imediatamente seguido por uma unidade identificadora (medida CSS vlida - p.ex., px, em, deg, etc...). A unidade identificadora opcional quando se declara um valor '0' (zero). Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoo de valores negativos podem complicar a formatao do elemento e devem ser usados com cautela. Se valores negativos no forem suportados pela aplicao de usurio, eles sero convertidos para o valor mais prximo suportado (e isso pode tornar-se desastroso para um layout).

www.3way.com.br

WebStandards
So dois os tipos de unidade de medida de comprimento CSS: Unidade relativa - aquela tomada em relao a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas so mais apropriadas para ajustes de uso em diferentes tipos de mdia. (p. ex., de uma tela de monitor para uma impressora laser). O valor tomado em relao:

em: ...ao tamanho da fonte ('font-size') herdada; ex: ...a altura da letra x (xis) da fonte herdada; px: ...ao dispositivo (midia) de exibio; %: ... a uma medida previamente definida.

Unidade absoluta - aquela que no esta referenciada a qualquer outra unidade e nem herdada. So unidades de medida de comprimento definidas nos sistemas de medidas pela fsica e em fim so os conhecidos "centmetros, polegadas etc...). So indicadas para serem usadas quando as mdias de exibio so perfeitamente conhecidas.

pt - point :1/72 in; pc - pica :12 points ou 1/6 in; mm - milmetro :1/10 cm; cm - centmetro :1/100 m; in - polegada :2,54 cm; Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:

div { margin: 1.5em; } h4 { margin: 2ex; } p { font-size: 14px; } .classe { padding: 90%; } hr { width: 14pt; } h1 { margin: 1pc; } h2 { font-size: 4mm; } p.classe { padding: 0.3cm; } h5.classe { padding: 0.5in; } Entendendo as unidades de medida CSS Vamos a seguir definir e analisar cada uma das unidades de medida CSS. 1 - A unidade de medida - pixel A unidade de medida de comprimento pixel relativa a resoluo do dispositivo de exibio (a tela de um monitor). Sem entrar em maiores consideraes tericas a mais simplista definio de pixel que encontrei esta: Pixel o menor elemento em um dispositivo de exibio, ao qual possivel atribuir-se uma cor. Considere um dispositivo de exibio construido com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definio, a referncia padro para pixel igual a um ponto no citado dispositivo. Da pode-se concluir que 1 pixel naquele dispositivo de exibio igual a 1/90 inch = 0,28 mm.

www.3way.com.br

WebStandards
Para uma densidade de 300 dpi 1 pixel igual a 1/300 inch = 0,085mm Assim, pixel uma medida relativa a resoluo do dispositivo de exibio. 2 - A unidade de medida - em A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento referencia-se ao valor inicial (default) do tamanho de fonte (letra). Os exemplos abaixo esclarecem as definies: h1 { font-size: 1.2em } line-height de <h1> ser 20% maior do que o tamanho das letras de <h1> h1 { font-size: 1.2em } font-size de <h1> ser 20% maior do que o tamanho das letras herdado por <h1>, exemplo: se h1 estiver contido numa div com font-size=10px ento font-size de h1 = 12px 3 - A unidade de medida - ex A unidade de medida de comprimento ex igual a altura da letra x(xis) minscula. 4 - A unidade de medida - percentagem, % Valores em percentagem so relativos a um outro valor anterior declarado. Este valor anterior h que estar bem definido e em geral esta definio est em uma determinada propriedade do mesmo elemento, na propriedade do elemento "pai" (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatao (por exemplo: a largura do bloco de contedo). p { font-size: 10px } p { line-height: 120% }

5.8.3 FONTES
As propriedades para as fontes, definem as caractersticas (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML. As propriedades bsicas para fontes so as listadas abaixo:

color:...................cor da fonte font-family:..........tipo de fonte font-size:.............tamanho de fonte font-style:............estilo de fonte font-variant:.........fontes maisculas de menor altura font-weight:.........quanto mais escura a fonte (negrito) font:....................maneira abreviada para todas as propriedades

Valoresvlidosparaaspropriedadesdafonte

color: 1. cdigo hexadecimal: #FFFFFF 2. cdigo rgb: rgb(255,235,0) 3. nome da cor: red, blue, green...etc font-family: 1. family-name: define-se pelo nome da fonte,

www.3way.com.br

WebStandards

p. ex:"verdana", "helvetica", "arial", etc. 2. generic-family: define-se pelo nome genrico, p. ex:"serif", "sans-serif", "cursive", etc. font-size: 1. xx-small 2. x-small 3. small 4. medium 5. large 6. x-large 7. xx-large 8. smaller 9. larger 10.length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) 11.% font-style: 1. normal: fonte normal na vertical 2. italic: fonte inclinada 3. oblique:fonte obliqua font-variant: 1. normal: fonte normal 2. small-caps: transforma em maisculas de menor altura font-weight: 1. normal 2. bold 3. bolder 4. lighter 5. 100 6. 200 7. 300 8. 400 9. 500 10.600 11.700 12.800 13.900

Exemplo: <html> <head> <style> div{font-family: Purisa; font-size:50px; font-style: italic; } </style> </head> <body> <div>Texto na Fonte Purisa,<br> tamanho de 50px<br> estilo em itlico </div> </body> </html>

www.3way.com.br

WebStandards

5.8.4 CORES
Basicamente existem 6 maneiras diferentes de definir cores no CSS. E, se considerarmos que para as duas primeiras regras vlido usar letras minsculas, existem 8 maneiras de se definir uma cor em uma regra CSS. Exemplos para definir a cor vermelho: TR TR TR TR TR TR {background-color: {background-color: {background-color: {background-color: {background-color: {background-color: #FF0000;} #F00;} rgb(255, 0, 0);} rgb(100%, 0%, 0%);} red;} ThreeDShadow;}

Definir uma cor pelo seu cdigo hexadecimal Esta a maneira mais conhecida de definir uma cor. Convm ressaltar que em uma regra CSS indiferente usar letras maisculas ou minsculas na sintaxe hexadecimal de cores e tambm que vlido abreviar a notao para trs dgitos. Na notao abreviada cada um dos trs dgitos automaticamente dobrado conforme exemplos a seguir:

#FFF = #FFFFFF #CF9 = #CCFF99 #cde = #ccddee #49c = #4499cc


No do escopo desta apostila detalhar o cdigo hexadecimal, contudo ressaltamos que os dezesseis dgitos hexadecimais so: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente eles so vlidos para definir uma cor, podendo em geral ser usada qualquer combinao deles. Assim: #FFDDHH no define uma cor, pois H no vlido.

www.3way.com.br

WebStandards
Definir uma cor pelo seu cdigo rgb RGB abreviatura para: r = red (vermelha) g = green (verde) b = blue (azul) Assim o cdigo rgb(xxx, yyy, zzz) indica uma cor obtida com a mistura de uma quantidade xxx de vermelho com yyy de verde e com zzz de azul. Duas so as maneiras de se definir a quantidade de cada uma das trs cores: - Uma faixa de nmerao de 0 (zero) at 255 - Em percentagem de 0% at 100% No vlido usar em uma definio nmero e percentagem. Exemplos: definies vlidas rgb(145, 230, 50) - rgb(20%, 0%, 70%) definio no vlida rgb(255, 20%, 120) Definir cor por palavra-chave Voc pode definir uma cor usando o nome da cor. Os nomes de cor vlidos so os listados nas recomendaes CSS do W3C. As Recomendaes para CSS listam as seguintes 17 cores:

Palavra-Chave
Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Orange

Cdigo Hexadecimal
#00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 #000080 #808000 #FFA500

Cdigo RGB 0,255,255 0,0,0 0,0,255 255,0,0 128,128,128 0,128,0 0,255,0 128,0,0 0,0,128 128,128,0 255,165,0

www.3way.com.br

WebStandards
Purple Red Silver Teal White Yellow Exemplo: p {color: aqua;} div {background-color: teal;} #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00

128,0,128 255,0,0 192,192,192 0,128,128 255,255,255 255,255,0

Definircorbaseadonosistemaoperacionaldousurio
As recomendaes para CSS preconizam a definio da cor baseado nas cores adotadas pelo sistema operacional do usurio. Este tipo de unidade de definio de cor denominado System Colors est em desuso e no dever constar das futuras Recomendaes CSS3. Trata-se de uma lista de nomes de cores vlidas semelhana da listagem de cores por palavra-chave e que se refere a reas do sistema operacional. As cores previstas so: ActiveBorder, ActiveCaption, AppWorkspace, Background, Buttonface, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDface, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText Embora os valores CSS sejam "case insensitives" recomenda-se usar a grafia com letras maisculas e minsculas ao se escrever o nome das cores de sistema por razes de legibilidade. Exemplos: p {color: ThreeDLightShadow;} div {background: ButtonShadow;}

5.8.5 BORDAS
As propriedades para as bordas, definem as caractersticas (os valores na regra CSS) das quatro bordas de um elemento HTML. As propriedades para as bordas so as listadas abaixo:

border-width:................espessura da borda border-style:................estilo da borda border-color:................cor da borda

www.3way.com.br

WebStandards

border-top-width:............espessura da borda superior border-top-style:............estilo da borda superior border-top-color:............cor da borda superior border-right-width:.........espessura da borda direita border-right-style:..........estilo da borda direita border-right-color:..........cor da borda direita border-bottom-width:.........espessura da borda inferior border-bottom-style:.........estilo da borda inferior border-bottom-color:.........cor da borda inferior border-left-width:...........espessura da borda esquerda border-left-style:...........estilo da borda esquerda border-left-color:...........cor da borda esquerda border-top:...maneira abreviada para todas as propriedades da borda superior border-right:..maneira abreviada para todas as propriedades da borda direita border-bottom:..maneira abreviada para todas as propriedades da borda inferior border-left:..maneira abreviada para todas as propriedades da borda esquerda border:.........maneira abreviada para todas as quatro bordas

Valoresvlidosparaaspropriedadesdasbordas

color: 1. cdigo hexadecimal: #FFFFFF 2. cdigo rgb: rgb(255,235,0) 3. nome da cor: red, blue, green...etc style: 1. none: nenhuma borda 2. hidden: equivalente a none 3. dotted: borda pontilhada 4. dashed: borda tracejada 5. solid: borda contnua 6. double: borda dupla 7. groove: borda entalhada 8. ridge: borda em ressalto 9. inset: borda em baixo relevo 10.outset: borda em alto relevo width:

www.3way.com.br

WebStandards
1. 2. 3. 4. thin: borda fina medium: borda mdia thick: borda grossa length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

5.8.6 BOX MODEL ( MODELO DE CAIXA )


O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opes de ajuste de margens, bordas, padding e contedo para cada elemento. Para ilustrar este conceito, considere um cabealho de nvel 1 e um pargrafo, conforme marcao a seguir: h1 { background-color:#99CC99; } p { background-color:#FFCCCC;} A seguir acresentamos uma regra CSS para a largura dos elementos : h1 { background-color:#99CC99; width:400px; } p { background-color:#FFCCCC; width:350px; } No prximo passo acrescentamos uma regra CSS para as bordas dos elementos: h1 { background-color:#99CC99; width:400px; border:10px solid #FF0000; background-color:#FFCCCC; width:350px; border:5px solid #0000FF; A seguir acresentamos uma regra CSS para os espaamentos dos elementos: h1 { background-color:#99CC99; width:400px; border:10px solid #FF0000; padding:20px; background-color:#FFCCCC; width:350px; border:5px solid #0000FF; padding:10px;

} p {

} p {

www.3way.com.br

WebStandards
A seguir acrescentamos uma regra CSS para as margens dos elementos: h1 { background-color:#99CC99; width:400px; border:10px solid #FF0000; padding:20px; margin:50px; background-color:#FFCCCC; width:350px; border:5px solid #0000FF; padding:10px; margin:50px;

} p {

5.8.7 Aplicando ESTILOS AOS PRINCIPAIS ELEMENTOS HTML


Para aplicar estilos aos elementos HTML, como j dito, so declarar no seletor a TAG em que voc quer definir as propriedades do css. Existem outros dois modos de aplicar estilos a um determinado elemento no HTML: classes e ids. Usando as classes, voc pode inventar um nome ao seletor e atribuir propriedades CSS ao mesmo. Exemplo: .minhaClasse{ color:#red; font-style: bold; } Para que as propriedades definidas no classe minhaClasse tenham efeito, devemos colocar o nome da classe no atributo class de qualquer elemento HTML. Exemplo: <p class=minhaClasse> Imprime esse texto na cor Vermelha e em negrito</p> <strong class=minhaClasse>Outro elemento com as mesmas propriedades</strong> Construindo nossos documentos HTML, em determinado momento queremos aplicar uma bloco de propriedades CSS a um nico elemento. Quando esse tipo de definio se faz essencial necessrio incluirmos no elemento um ID setando dentro dele qualquer nome, que o atributo pelo qual vamos declarar as propriedades CSS. Exemplo: <div id=corpo>...</div> Aplicando as propriedades CSS ao elemento: #corpo{ border-top:2px dotted #FF00FF; font-family: Verdana; color: #C0C0C0; padding: 2px; } De acordo como definimos o seletor acima, as propriedades s iro ser aplicadas para o elemento no qual seu ID for corpo. Dessa maneira aplicamos efeitos CSS a um nico elemento, visando a integridade do seu documento HTML.

5.8.8 CONFIGURAES PARA BARRA DE ROLATEM


Existem propriedades no CSS capaz de estilizar a barra de rolagem do Internet

www.3way.com.br

WebStandards
Explorer. No pera este recurso no est ativado por padro, nem a fixao disponveis na interface do usurio. O usurio tem que adicionar uma linha ao seu arquivo opera6.ini. Na "[User Prefs]", a linha a seguir deve ser adicionado: Enable Scrollbar Colors=1 Outros browsers no suportam esse recurso. Qualquer prtica de estilizao que interfira diretamente com o navegador do usurio, pode estar dificultando acessibilidade ou conflitando com preferncias pessoais, portanto, use todo seu esforo e poder de persuaso no sentido de convencer seu cliente a no adotar esta prtica pois uma tecnologia particular e deve ser evitada.

scrollbar-arrow-color scrollbar-3dlight-color scrollbar-highlight-color scrollbar-face-color scrollbar-shadow-color

scrollbar-darkshadow-color scrollbar-track-color

Exemplo: body { scrollbar-arrow-color:#000000; scrollbar-3dlight-color:#000000; scrollbar-highlight-color:#FF0000; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#0000FF; scrollbar-darkshadow-color:#FFFF00; scrollbar-track-color:#00FF00; }

www.3way.com.br

WebStandards
5.8.9 LISTAS
A propriedade list define as caractersticas (valores) das listas HTML. As propriedades list so as listadas abaixo: list-style-position..........onde o marcador da lista posicionado; list-style-type...............tipo do marcador da lista; list-style........................maneira abreviada para todas as propriedades;
Valoresvlidosparaaspropriedadesdolista

list-style-position: 1. outside: marcador fora do alinhamento do texto 2. inside: marcador alinhado com texto list-style-type: 1. none: sem marcador 2. disc: crculo (bolinha cheia) 3. circle: circunferncia (bolinha vazia) 4. square: quadrado cheio 5. decimal: nmeros 1, 2, 3, 4, ... 6. decimal-leading-zero 7. lower-roman: romano minsculo i, ii, iii, iv, ... 8. upper-roman: romano maisculo I, II, III, IV, ... 9. lower-alpha: letra minscula a, b, c, d, ... 10.upper-alpha: letra maiscula A, B, C, D, ... 11.lower-greek 12.lower-latin 13.upper-latin 14.hebrew 15.armenian 16.georgian 17.cjk-ideographic 18.hiragana 19.katakana 20.hiragana-iroha 21.katakana-iroha

5.8.10 MARCADORES CUSTOMIZADOS


Usando a propriedade list-style-image possvel customizar os marcadores das listas HTML usando uma imagem qualquer. O valor dessa propriedade definido pela URL ( caminho ) da imagem que se quer ter como marcador.

list-style-image: 1. none 2. URL: url(caminho/marcador.gif)

www.3way.com.br

WebStandards
Exemplos: <html> <head><title>LISTA CUSTOMIZADO</title> <style> ul { list-style-image: url("img/marcador.gif"); } </style> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>

5.8.11 HYPERLINKS
Os efeitos em links so possveis atravs de declaraes de regras de estilo para as pseudo classes do elemento <a> do HTML. As pseudo classes so usadas em CSS, para adicionar efeitos diferentes a alguns seletores, ou a uma instncia de alguns seletores. A sintaxe das pseudo classes: seletor : pseudo classe {propriedade: valor} As classes em CSS podem tambm ser usadas com pseudo classes. Esta regra permite que voc defina diferentes efeitos para links localizados em diferentes lugares em uma mesma pgina. No ltimo item deste tutorial "Diferentes estilos de links em uma mesma pgina web" veremos este efeito. seletor.class:pseudo-class { propriedade: valor } So quatro as pseudo classes dos links: 1. a:link........define o estilo do link no estado inicial; 2. a:visited...define o estilo do link visitado; 3. a:hover.....define o estilo do link quando passa-se o mouse sobre ele; 4. a:active....define o estilo do link ativo (o que foi "clicado"). Exemplo:

www.3way.com.br

WebStandards
a:active{ color:#FF0000; } a:houver{ color:#0000FF; } a:link{ color:#00FF00; } a:visited{ color:C0C0C0; }

5.8.12 BOTES
Os efeitos CSS em botes so gerados a partir de uma classe. Exemplo:
.botao { border: 1px solid #000000; - Definio da borda do boto font-family: Verdana; padding: 2px; background: #CCCCCC; } Esse mesmo efeito pode ser gerado a partir do seletor input, entretanto todos os campos input do documento receberiam essas declaraes. Exemplo: input { border: 1px solid #000000; font-family: Verdana; padding: 2px; }

5.8.13 CAMPOS PARA ENTRADA DE TEXTOS


Os efeitos CSS em Campos de entrada de textos ( input com o atrituto type = text ) so declaradas a partir de uma classe ou declaradas no prprio elemento. O elemento input tem, geralmente, as mesmas propriedades para todos as diferenciaes de tipos: Exemplo: .formulario { border:1px solid #006699; - define as propriedades da borda do campo; font-family:Verdana; - define qual ser a fonte do campo texto; size:12px; - define o tamanho da fonte; background: #CCCCCC; - define a cor de fundo. }

5.8.14 CAIXAS DE SELEO


Exemplo:

www.3way.com.br

WebStandards
.select { border:1px solid #000000; - define a propriedade da borda ( no aceito no IE ) font-family:Arial; - define qual ser a fonte do campo background: #FF00FF; size: 10px; }

5.8.15 MANIPULANDO CURSORES


Usando o CSS possvel alterar o cursor em algumas partes do documento ou em seu contedo geral. Abaixo segue a lista de cursores disponveis por padro no Windows. default (seta) crosshair (cruz) e-resize (seta que aponta direita) hand (mo) help (sinal de pergunta) move (cruz com setas nas extremidades) n-resize (seta que aponta para cima) ne-resize (seta que aponta ao nordeste) nw-resize (seta que aponta ao noroeste) pointer (mo) s-resize (seta que aponta para baixo) se-resize (seta que aponta para o sudeste) sw-resize (seta que aponta para o sudoeste) text (I-beam) w-resize (seta que aponta esquerda) wait (relgio de areia)

Alterandoemtodoodocumento
<html> <title>Alterando o cursos em todo o documento</title> <head> <style type="text/css"> body {cursor: crosshair} </style> </head> <body> </body>

www.3way.com.br

WebStandards
</html>

Alterandoemalgumaspartesdodocumento
<html> <head> <title>Mudar o cursor</title> </head> <body> <p style="cursor: default">default</p> <p style="cursor: crosshair">crosshair</p> <p style="cursor: pointer">pointer</p> <p style="cursor: move">move</h4> <p style="cursor: nw-resize">nw-resize</p> <p style="cursor: ne-resize">ne-resize</p> <p style="cursor: n-resize">n-resize</p> <p style="cursor: e-resize">e-resize</p> <p style="cursor: help">help</p> <p style="cursor: text">text</p> <p style="cursor: wait">wait</p> </body> </html>

Cursorespersonalizados
<html> <head> <title>Mudar o cursor</title> <style type="text/css"> body {cursor : url("qualquer_imagem.cur")} </style> </head> <body> </body> </html>

5.8.16 TABELAS
BordaSimples
table.comBordaSimples { border-collapse: collapse; - retira as bordas duplas nas clulas da tabela background: #FFFFF0; } table.comBordaSimples td define propriedades para a tag td da tabela {

www.3way.com.br

WebStandards
} border: 1px solid black; table.comBordaSimples th define propriedades para o tag th da tabela { border: 1px solid black; border-bottom: 2px solid black; - propriedades para a borda inferior background: #F0FFF0; }

Bordassobrepostas
1. Bordas com estilo ('border-style') 'hidden' so suprimidas (ocultas) e tm precedncia sobre todas as outras bordas conflitantes/coincidentes. 2. Se nenhuma das bordas tem estilo 'hidden', a borda mais larga (maior 'borderwidth') tem precedncia. 3. Se vrias bordas tiverem o mesmo 'border-width', o estilo tem precedncia, nesta ordem: (maior) 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', 'inset' (menor). 4. Bordas com 'border-style' igual a 'none' (nenhum) tm sempre a menor prioridade.

Exemplo de bordas:

6JAVASCRIPT
6.1Introduo
JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HyperText Mark-up Language). Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos. Os pargrafos soltos so executados na sequncia em que aparecem na pgina (documento) e os atrelados a eventos so executados apenas quando o evento ocorre.

www.3way.com.br

WebStandards
6.2DENTRODEUMDOCUMENTOHTML
Para inserir pargrafos de programao dentro do HTML necessrio identificar o incio e o fim do set de JavaScript, da seguinte forma: <SCRIPT> Set de instrues </SCRIPT> Este procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor visualizao e facilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio do documento, atravs da criao de funes a serem invocadas quando se fizer necessrio (normalmente atreladas a eventos). Os comandos JavaScript so sensveis ao tipo de letra (maisculas e minsculas) em sua sintaxe. Portanto, necessrio que seja obedecida a forma de escrever os comandos, de acordo com a forma apresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando da escrita de um comando, o JavaScript interpretar, o que seria um comando, como sendo o nome de uma varivel.

6.3EMUMARQUIVOEXTERNO
Voc pode tambm usar seus cdigos em arquivos externos usando o atributo SRC=url-do-arquivo, mas lembre-se que sempre que voc colocar seus cdigos em arquivos externos voc precisar nome-los com a extenso .JS exemplo : <script src=meucodigo.js></script>

6.4TRATADORESDEEVENTOS
So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode definir aes a serem realizadas pelo programa. Abaixo apresentamos a lista dos eventos possveis, indicando os momentos em que os mesmos podem ocorrer, bem como, os objetos passveis de sua ocorrncia. 01 onload - Ocorre na carga do documento. Ou seja, s ocorre no BODY do documento. 02 onunload - Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY. 03 onchange - Ocorre quando o objeto perde o focus e houve mudana de contedo. Vlido para os objetos Text, Select e Textarea. 04 onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudana. Vlido para os objetos Text, Select e Textarea. 05 onfocus - Ocorre quando o objeto recebe o focus. Vlido para os objetos Text, Select e Textarea. 06 onclick - Ocorre quando o objeto recebe um Click do Mouse. Vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. 07 onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto. Vlido apenas para Link. 08 onselect - Ocorre quando o objeto selecionado. Vlido para os objetos Text e Textarea.

www.3way.com.br

WebStandards
09 onsubmit - Ocorre quando um boto tipo Submit recebe um click do mouse. Vlido apenas para o Form.

6.5SINTAXEDALINGUAGEM
A linguagem Javascript tem uma sintaxe muito parecida a de Java por estar baseado nele. Tambm muito parecida a da linguagem C, de modo que se o leitor conhece alguma destas duas linguagens poder manejar com facilidade com o cdigo.

Comentrios
Um comentrio uma parte de cdigo que no interpretada pelo navegador e cuja utilidade radica em facilitar a leitura ao programador. O programador, a medida que desenvolve o script, vai deixando frases ou palavras soltas, chamadas comentrios, que ajudam a ele ou a qualquer outro a ler mais facilmente o script na hora de modific-lo ou depur-lo. Existem dois tipos de comentrios na linguagem. Um deles, a barra dupla, serve para comentar uma linha de cdigo. O outro comentrio podemos utilizar para comentar vrias linhas e se indica com os signos /* para comear o comentrio e */ para termin-lo. Vejamos uns exemplos: <script> //Este um comentrio de uma linha /*Este comentrio pode se expandir por vrias linhas. As que quiser*/ </script>

Separao de instrues
As distintas instrues que contm nossos scripts devem ser separadas convenientemente para que o navegador no indique os correspondentes erros de sintaxe. Javascript tem duas maneiras de separar instrues. A primeira atravs do caractere ponto e vrgula (;) e a segunda atravs de uma quebra de linha.

6.6DECLARAODEVARIVEIS
A varivel criada automaticamente, pela simples associao de valores a mesma. Ex. NovaVariavel = "Jose" Foi criada a varivel de nome NovaVariavel que, passou a conter a string Jose. As variveis podem ser Locais ou Globais. As variveis que so criadas dentro de uma funo so Locais e referenciveis apenas dentro da funo. As variveis criadas fora de funes so Globais, podendo serem referenciadas em qualquer parte do documento. Desta forma, variveis que precisam ser referenciadas por vrias funes ou em outra parte do documento, precisam ser definidas como globais. Embora no seja recomendvel, em uma funo, pode ser definida uma varivel local com o mesmo nome de uma varivel global. Para isso utiliza-se o mtodo de definio var. Ex.

www.3way.com.br

WebStandards
Varivel Global: MinhaVariavel = ""; Varivel Local: var MinhaVariavel = "";

6.7PALAVRASRESERVADAS
Existem vrias palavras que so reservadas para o JavaScript as quais so listadas abaixo. Essas palavras no podem ser utilizadas para identificar variveis ou funes. abstract case continue double false function in native protected super throws var boolean cath default else final goto instanceof new public switch transcient void break char debugger enum finally if int null return synchronized true volatile byte class delete export float implements interface package short this try while catch const do extends for import long private static throw typeof with

6.8TIPOSDEDADOS
Vemos os trs tipos de dados que suporta javascript: numrico, boleano e texto. O Javascript trabalho com variveis de diversas classes de informao, como textos ou nmeros. Cada uma destas classes de informao o tipo de dados. Javascript distingue entre trs tipos de dados e todas as informaes que se podem salvar em variveis vo estar encaixadas em algum destes tipos de dados. Vejamos detalhadamente quais so estes trs tipos de dados.

Tipo de dados numrico


Nesta linguagem s existe um tipo de dados numrico, ao contrrio do que ocorre na maioria das linguagens mais conhecidas. Todos os nmeros so portanto, do tipo numrico, independentemente da preciso que tenham ou se so nmeros reais ou inteiros. Os nmeros inteiros so nmeros que no tm vrgula, como 3 ou 339. Os nmeros reais so nmeros fracionrios, como 2.69 ou 0.25, que tambm se podem escrever em nota cientfica, por exemplo, 2.482e12. Com Javascript tambm podemos escrever nmeros em outras bases, como a hexadecimal. As bases so sistemas de numerao que utilizam mais ou menos dgitos para

www.3way.com.br

WebStandards
escrever os nmeros. Existem trs bases com as que podemos trabalhar:

Base 10, o sistema que utilizamos habitualmente, o sistema decimal. Qualquer nmero, por padro, se entende que est escrito em base 10. Base 8, tambm chamado sistema octal, que utiliza dgitos do 0 ao 7. Para escrever um nmero em octal basta simplesmente escrever este nmero precedido de um 0, por exemplo 045. Base 16 ou sistema hexadecimal, o sistema de numerao que utiliza 16 dgitos, os compreendidos entre o 0 e o 9 e as letras de A F, para os dgitos que faltam. Para escrever um nmero em hexadecimal devemos escrev-lo precedido de um zero e um xis, por exemplo, 0x3EF.

Tipo boleano
para O tipo boleano, boolean em ingls, serve para realizar operaes lgicas, geralmente realizar aes se o contedo de uma varivel verdadeiro ou falso. Se uma varivel verdadeira, ento: Executo umas instrues Se no Executo outras Os dois valores que podem ter as variveis boleanas so true ou false.

minhaBoleana = true minhaBoleana = false

Tipo de dados cadeia de caracteres


O ltimo tipo de dados o que serve para salvar um texto. Javascript s tem um tipo de dados para salvar texto e nele, se podem introduzir qualquer nmero de caracteres. Um texto pode estar composto de nmeros, letras e qualquer outro tipo de caracteres e signos. Os textos se escrevem entre aspas, duplas ou simples. meuTexto = "Miguel vai pescar" meuTexto = '23%%$ Letras & *--*' Tudo o que se coloca entre aspas, como nos exemplos anteriores tratado como uma cadeia de caracteres independentemente do que coloquemos no interior das aspas. Por exemplo, em uma varivel de texto podemos salvar nmeros e nesse caso temos que ter em conta que as variveis de tipo texto e as numricas no so a mesma coisa e que enquanto as de numricas nos servem para fazer clculos matemticos, as de texto no servem.

Caracteres de escape em cadeias de texto.


Existe uma srie de caracteres especiais que servem para expressar em uma cadeia de texto determinados controles como pode ser uma quebra de linha ou um tabulador. Estes so os caracteres de escape e se escrevem com uma nota especial que comea por uma contrabarra (uma barra inclinada ao contrrio da normal '\') e logo se coloca o cdigo do caractere a mostrar. Um caractere muito comum a quebra de linha, que se consegue escrevendo \n. Outro caractere muito habitual colocar umas aspas, pois se colocamos umas aspas sem seu caractere especial nos fechariam as aspas que colocamos para iniciar a cadeia de caracteres. Temos ento que introduzir as aspas com \" ou \' (aspas duplas ou simples). Existem outros caracteres de escape, que veremos na tabela abaixo mais resumidos, apesar de que tambm

www.3way.com.br

WebStandards
h que destacar como caractere habitual o que se utiliza para escrever uma contra-barra, para no confundi-la com o incio de um caractere de escape, que a dupla contra-barra \\. Exemplo de caracteres de escape: Quebra de linha: \n Aspas simples: \' Aspas dupla: \" Tabulador: \t Enter: \r Avance de pgina: \f Retroceder espao: \b Contra-barra: \\

6.9OPERADORES Operadores Lgicos


So operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE. Os comandos condicionais sero vistos mais a frente. == != > >= < <= && || Igual Diferente Maior Maior ou Igual Menor Menor ou Igual E Ou

Operadores Matemticos
So operadores a serem utilizados em clculos, referncias de indexadores e manuseio de strings. Ao longo do manual estes operadores sero largamente utilizados, dando, assim, uma noo mais precisa do seu potencial. + * / adio de valor e concatenao de strings subtrao de valores multiplicao de valores diviso de valores

www.3way.com.br

WebStandards
% += obtem o resto de uma diviso. Ex: 150 % 13 retornar 7 concatena /adiciona ao string/valor j existente. Ou seja: x += y o mesmo que x = x + y da mesma forma podem ser utilizados: -= , *= , /= ou %= Um contador pode ser simplificado utilizando-se : X++ ou X-- o que equivale as expresses: X = X + 1 ou X = X - 1 respectivamente. Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

6.10COMANDOSCONDICIONAISELAOS
So comandos que condicionam a execuo de uma certa tarefa veracidade ou no de uma determinada condio, ou enquanto determinada condio for verdadeira. So eles:

01 - Comando IF
if (condio) { ao para condio satisfeita } else { ao para condio no satisfeita } Exemplo: if (Idade < 18) {Categoria = "Menor"} else {Categoria = "Maior"}

02 - Comando FOR
for(criao de varivel de controle;condio;incremento da varivel de controle;) { ao } Exemplo: for (x = 0 ; x <= 10 ; x++) {alert ("X igual a " + x) }

03 - ComandoWHILE
Executa uma ao enquanto determinada condio for verdadeira. while(condio) { ao } Ex.

www.3way.com.br

WebStandards
var contador = 10 while (contador > 1) { contador-- }

04 - O comando switch
O comando switch do JavaScript1.2 nada mais do que um case, assim como no C ou no PHP, ou at podendo se comparar com um simples case do VB. Caso voc trabalhe com C, PHP ou outras linguagens, voc provavelmente j sabe o que o comando faz. Mas lembre-se que este comando no JavaScript serve apenas para o JavaScript1.2, ou seja, serve apenas para Netscape e Internet Explorer nas suas verses 4.X. switch (variavel_de_controle) { opo1 : comandos ; break; opo2 : comandos ; break; default : comandos; } Exemplo: var teste = prompt(digite um valor de 1 at 5); switch(teste) { case 1: alert(seu valor foi 1);break; case 2: alert(seu valor foi 2); break; case 3: alert(seu valor foi 3); break; case 4: alert(seu valor foi 4); break; case 5: alert(seu valor foi 5); break; default: alert(seu valor nao foi nenhum valor entre 1 e 5); }

05 - Operador Ternrio
receptor = ((condio) ? verdadeiro : falso) Ex. NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino") OBS: Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a condio principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma ao (se determinada condio ocorrer) mas volta para o loop.

www.3way.com.br

WebStandards
6.11ARRAYS
Nas linguagens de programao existem estruturas de dados especiais que nos servem para salvar informaes mais complexas do que simples variveis. Uma estrutura tpica em todas as linguagens o Array, que como uma varivel onde podemos introduzir vrios valores, ao invs de somente um como ocorre com as variveis normais. Os arrays nos permitem salvar vrias variveis e acess-las de maneira independente, como ter uma varivel com distintos compartimentos onde podemos introduzir dados distintos. Para isso utilizamos um ndice que nos permite especificar o compartimento ou posio ao qual estamos nos referindo. Os arrays foram introduzidos em verses Javascript 1.1 ou superiores, ou seja, somente podemos utiliz-los a partir dos navegadores 3.0. Para navegadores antigos se pode simular o array utilizando sintaxe de programao orientada a objetos, mas dada a complexidade desta tarefa, pelo menos no momento em que nos encontramos e as poucas ocasies que os deveremos utilizar, vamos ver como utilizar o autntico array de Javascript.

6.11.1 CRIAO E INICIALIZAO DE ARRAYS


O primeiro passo para utilizar um array cri-lo. Para isso utilizamos um objeto Javascript j implementado no navegador. Esta a sentena para criar um objeto array: var meuArray = new Array() Isto cria um array na pgina que est se executando. O array se cria sem nenhum contedo, ou seja, no ter nenhum campo ou compartimento criado. diasSemana = new Array('Segunda','Tera','Quarta','Quinta','Sexta','Sbado','Domingo') No exemplo acima criamos um array com os dias da semana e cada dia recebeu um ndice que comea pelo zero. Tambm podemos criar o array especificando o nmero de compartimentos que vai ter. var meuArray = new Array(10) Neste caso indicamos que o array vai ter 10 posies, ou seja, 10 campos onde salvar dados. importante observarmos que a palavra Array em cdigo Javascript se escreve com a primeira letra em maiscula. Como em Javascript as maisculas e minsculas sim que importam, se escrevemos em minscula no funcionar. Podemos introduzir no array qualquer dado, tanto se indicamos ou no o nmero de campos do array. Se o campo est criado se introduz simplesmente e se o campo no estava criado se cria e logo, se introduz o dado, com o qual o resultado final ser o mesmo. Esta criao de campos dinmica e se produz ao mesmo tempo, que os scripts se executam. Vejamos a seguir como introduzir valores em nossos arrays. meuArray[0] = 290 meuArray[1] = 97 meuArray[2] = 127 Introduzem-se indicando entre colchetes o ndice da posio onde queramos salvar o dado. Neste caso introduzimos 290 na posio 0, 97 na posio 1 e 127 na 2. Os arrays comeam sempre na posio 0, portanto, um array que tenha por exemplo 10 posies, ter campos do 0 ao 9. Para recolher dados de um array fazemos da mesma forma: colocando entre colchetes o ndice da posio a qual queremos acessar.

www.3way.com.br

WebStandards
6.11.2 ACESSANDO OS ELEMENTOS DO ARRAY
Para acessar os elementos de um array bastaria saber o tamanho do mesmo e acesslos em um loop. Exemplo: var nomes = new Array(Pedro,Joo,Carlos,Edvaldo,Paulo,Roberto); ///Acessando os elementos for(i = 0; i<=nomes.length; i++) ///nomes.length retorna o tamanho do Array { alert(No indice de numero + i + contem o nome: + nome[i] ); }

6.11.3 MTODOS ESPECIAIS


01join(sep)
Junta seqencialmente os elementos de uma array usando o caractere (ou caracteres) dados por sep. Se ele no indicado, usa a vrgula como default. Exemplo: nivel str_1 str_2 str_3 = = = = new Array("baixo","medio","alto"); nivel.join(); //resulta "baixo,mdio,alto" em str_1 nivel.join(", "); //resulta "baixo, mdio, alto" em str_2 nivel.join("/"); //resulta "baixo/mdio/alto" em str_3

02length
Indica o nmero de elementos em uma array. Pode ser usado para diminuir o comprimento de um objeto j definido. No pode aumentar. Exemplo: nivel = new Array("baixo","medio","alto","muito alto"); alert(nivel.length); //Exibe no alerta o numero 4 nivel.length = 3; //reduz o tamanho de 4 para 3

03pop()
Remove e retorna o ltimo elemento de uma array, reduzindo o seu tamanho. Exemplo: nivel = new Array("baixo","medio","alto","muito alto"); eliminado = nivel.pop; //a varivel eliminado contm "muito alto" 04 push(valor1, valor2, ...) Adiciona um ou mais elementos (valor1, valor2, etc) ao final de uma array, retornando o seu novo tamanho. Exemplo: a varivel novo ser 4 e os dois elementos sero adicionados. nivel = new Array("baixo","medio"); novo = nivel.push("alto","muito alto");

05reverse()
Inverte a ordem dos elementos. O primeiro se torna o ltimo e o ltimo se torna o primeiro. Exemplo: (nivel[0], nivel[1] e nivel[2] sero respectivamente "alto", "mdio" e "baixo"). nivel = new Array("baixo","medio","alto");

www.3way.com.br

WebStandards
nivel.reverse();

06shift
Remove o primeiro elemento e retorna esse elemento, reduzindo o tamanho da array. Exemplo: (a varivel removido ter "muito baixo" e a nivel no ter esse elemento). nivel = new Array("muito baixo","baixo","medio","alto"); removido = nivel.shift();

07slice(ini[,fim)
Extrai uma parte de uma array e retorna uma nova com essa parte. O parmetro ini o ndice base zero a partir do qual comea a extrao. Os elementos so extrados at, mas no incluindo, o ndice base zero dado por fim. Se este no indicado, a operao se d at o final da seqncia. A funo no altera o objeto original. Os valores so copiados para a nova array. Exemplo: (escreve: "baixo,mdio,alto"). nivel = new Array("muito baixo","baixo","medio","alto","muito alto"); document.write(nivel.slice(1,4);

08sort(func_comp)
Ordena os elementos de uma array segundo o critrio da funo de comparao func_comp. Se esta no dada, a ordenao se d como se fosse um dicionrio. No caso de strings de texto, em geral essa operao desejada. No caso de nmeros, pode no ser, uma vez que, por exemplo, 12 fica antes de 4. A funo de comparao deve ser uma do tipo comparar(a,b) tal que: - se retornar valor < 0, b fica em ndice menor que - se retornar valor = 0, a e b no mudam de ndice. - se retornar valor > 0, b fica em ndice maior que Para comparar function comparar(a, b) { return a b; } Exemplo: function comparar(a, b) { return a b; } num = new Array("11", "10", "7", "8", "9"); document.write(num.sort()); //escreve 10,11,7,8,9 document.write("<br>"); //avana uma linha document.write(num.sort(comparar)); //escreve 7,8,9,10,11 nmeros, a funo pode ser simplesmente:

www.3way.com.br

WebStandards
09splice(iniNdx,quant,[elm1][,...,elmN])
Muda o contedo de uma array, adicionando novos elementos e removendo outros. iniNdx o ndice base zero a partir do qual a operao comea. quant um inteiro indicando o nmero de elementos a remover. Se zero, nenhum elemento removido, mas deve ser indicado pelo menos um novo elemento. elm1 ... elemN so os novos elementos a adicionar. Se no indicados, a funo apenas remove elementos. Se o nmero de elementos a adicionar diferente do nmero de elementos a remover, o tamanho da arrray alterado. A funo retorna uma array com os elementos removidos. Exemplos: num = new Array("10", "20", "30", "40"); document.write(num); //escreve 10,20,30,40 document.write("<br>"); //avana uma linha de_fora = num.splice(2,0,"25"); document.write(num); //escreve 10,20,25,30,40 document.write("<br>"); //avana uma linha de_fora = num.splice(2,1,"28"); document.write(num); //escreve 10,20,28,30,40 document.write("<br>"); //avana uma linha document.write(de_fora); //escreve 25

10toString()
Retorna uma string com os elementos dispostos seqencialmente e separados por vrgula. Exemplo: num = new Array("10", "20", "30", "40"); str = num.toString(); //str contm "10,20,30,40" 11 - unshift(elm1,..., elmN) Adiciona um ou mais elementos no incio da array e retorna seu novo tamanho. Os parmetros (elm1, ..., elmN) so os novos elementos. Exemplo (escreve: "baixo,mdio,alto"): nivel = new Array("baixo","medio","alto","muito alto"); nivel.unshift("muito baixo"); document.write(nivel); //escreve "muito baixo,baixo,medio,alto,muito alto"

6.12FUNES
Uma funo um set de instrues, que s devem ser executadas quando a funo for acionada. A sintaxe geral a seguinte: function NomeFuno(Parmetros) { Ao(es) } Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou

www.3way.com.br

WebStandards
menor de idade, recebendo como parmetro a sua idade. function Idade (Anos) { if(Anos > 17) { alert("Maior de Idade") }else { alert("menor de Idade") } }

Funes embutidas na prpria linguagem.


A sintaxe geral a seguinte:

01eval
Calcula o contedo da string

02parseInt
Transforma string em inteiro

03parseFloat
Transforma string em nmero com ponto flutuante

04date()
Retorna a data e a hora (veja o captulo manipulando datas) Exemplo: Result = eval ( " (10 * 20) + 2 - 8") ex2: Result = eval (string) No primeiro exemplo Result seria igual a 194. No segundo, depende do contedo da string, que tambm pode ser o contedo (value) de uma caixa de texto.

Funes tipicamente Matemticas:


Essas funes abaixo so chamadas de funes Matemticas e fazem parte das classes ultilitrias. 01 Math.abs(n) - retorna o valor absoluto do nmero (ponto flutuante) 02 Math.ceil(n) - retorna o prximo valor inteiro maior que o nmero 03 Math.floor(n) - retorna o prximo valor inteiro menor que o nmero 04 Math.round(n) - retorna o valor inteiro, arredondado, do nmero

www.3way.com.br

WebStandards
05 Math.pow(base, expoente) - retorna o clculo do exponencial 06 Math.max(n1, n2) - retorna o maior nmero dos dois fornecidos 07 Math.min(n1, n2) - retorna o menor nmero dos dois fornecidos 08 Math.sqrt(n) - retorna a raiz quadrada do nmero 09 Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414) 10 Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707) 11 Math.sin(n) - retorna o seno de um nmero (anglo em radianos) 12 Math.asin(n) - retorna o arco seno de um nmero (em radianos) 13 Math.cos(n) - retorna o cosseno de um nmero (anglo em radianos) 14 Math.acos(n) - retorna o arco cosseno de um nmero (em radianos) 15 Math.tan(n) - retorna a tangente de um nmero (anglo em radianos) 16 Math.atan(n) - retorna o arco tangente de um nmero (em radianos) 17 Math.pi - retorna o valor de PI (aproximadamente 3.14159) 18 Math.log(n) - retorna o logartmo de um nmero 19 Math.E - retorna a base dos logartmos naturais (aproximadamente 2.718) 20 Math.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693) 21 Math.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442) 22 Math.LN10 - retorna o valor do logartmo de 10 (aproximadamente 2.302) 23 Math.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434)

6.13CLASSESUTILITRIA
Clsses ultilitrias so as classes elementares do JavaScript.

6.13.1 STRING
01OobjetoString
criado atravs de: new String(str). Onde str uma string qualquer. Notar a diferena entre string literal e string objeto. Exemplos: str_1 = "abc" (string literal) e str_2 = new String("abc") (string objeto). Na prtica, quaisquer das funes aqui dadas podem ser usadas com strings literais. A linguagem cria um objeto temporrio e o descarta aps a execuo.

www.3way.com.br

WebStandards
02Apropriedadelength
Indica o comprimento Exemplo (a varivel len assume valor 7); str = "Bom dia"; len = str.length; (nmero de caracteres) da string.

03anchor(nome)
Cria uma ncora no documento HTML com o atributo NAME igual a nome. Exemplo: str = "Incio da pgina"; document.write(str.anchor("inicio_pagina")); Produz o mesmo resultado da seguinte linha HTML: <a name="inicio_pagina">Incio da pgina</A>

04big()
Faz a string aparecer como se estivesse entre as marcas <BIG> e </BIG> de HTML. Exemplo: str = "Bom dia"; document.write(str.big()); Produz o mesmo resultado da seguinte linha HTML: <big>Bom dia</big>

05blink()
Faz a string piscar como se estivesse entre as marcas <BLINK> e </BLINK> de HTML (Netscape somente). Exemplo: str = "Bom dia"; document.write(str.blink()); Produz o mesmo <blink>Bom dia</blink>

resultado

da

seguinte

linha

HTML:

06Bold()
Faz a string aparecer em negrito como se estivesse entre as marcas <B> e </B> de HTML. Exemplo: str = "Bom dia"; document.write(str.bold()); Produz o mesmo resultado da seguinte linha HTML: <b>Bom dia</b>

www.3way.com.br

WebStandards
07charAt(index)
Retorna o caractere da posio especificada por index, um inteiro entre 0 e comprimento da string menos um (-1). Exemplo (a varivel str_2 ser "o"): str_1 = "Bom dia"; str_2 = str_1.charAt(1);

08charCodeAt(index)
Retorna o valor ASCII do caractere na posio especificada por ndx, um inteiro entre 0 e comprimento da string menos 1. Se no indicado, o valor 0 assumido. Exemplo (a varivel val ser 97, o valor ASCII de "a"): str = "Bom dia"; val = str.charCodeAt(6);

09concat(str2,str3[,...,strN])
Combina duas ou mais strings, retornando uma nova. str2, ..., strN so as strings a combinar. Exemplo (a varivel nova_str contm "Bom dia"): str = "Bom "; nova_str = str.concat("dia");

10fixed()
Faz a string ser exibida com uma fonte de largura fixa, como se estivesse entre as marcas <tt> e </tt> de HTML. Exemplo: str = "Bom dia"; document.write(str.fixed()); Produz o mesmo <tt>Bom dia</tt>

resultado

da

seguinte

linha

HTML:

11fontcolor(cor)
Exibe a string na cor especificada, como se estivesse entre as marcas <font color=cor> e </font> de HTML. O parmetro cor uma string literal da cor reconhecida pelo navegador ou na forma RGB hexadecimal. Por exemplo, "FF0000" para vermelho. Exemplo: str = "Bom dia"; document.write(str.fontcolor("blue")); Produz o mesmo resultado da seguinte linha HTML: <font color="blue">Bom dia</font>

www.3way.com.br

WebStandards
12fontsize(sz)
Exibe a string no tamanho de fonte especificado, como se estivesse entre as marcas <FONT SIZE=sz> e </FONT> de HTML. O parmetro sz o tamanho da fonte. Exemplo: str = "Bom dia"; document.write(str.fontsize("3")); Produz o mesmo resultado da seguinte linha HTML: <font size="3">Bom dia</font>

13fromCharCode(cod1,cod2,...,codN)
Retorna uma string (no objeto String) com os caracteres dados pelos valores ASCII cod1, ...,codN. Deve ser sempre usado na forma String.fromCharCode(...) em vez de um objeto string criado. Exemplo (retorna "abc"): String.fromCharCode(97,98,99); Observao: os eventos KeyDown, KeyPress e KeyUp contm os cdigos ASCII da tecla usada. Para saber o smbolo da tecla, pode-se usar a propriedade which: String.fromCharCode(KeyDown.which);

14indexOf(Str,index)
Retorna o ndice da primeira ocorrncia de Str, comeando de index ou de 0 se ele no dado. Se Str no encontrado, retorna -1. sensvel a letras maisculas e minsculas. Exemplos: "Bom "Bom "Bom "Bom dia".indexOf("Bom") dia".indexOf("Bon") dia".indexOf("d") dia".indexOf("bom") //retorna //retorna //retorna //retorna 0. -1. 4. -1.

15lastIndexOf(Str,index)
Retorna o ndice da ltima ocorrncia de Str ou -1 se no encontrado. A procura feita na ordem inversa (direita para esquerda), comeando do ndice index ou do comprimento da string se ele no indicado. Caracteres so indexados da esquerda para a direita, a partir de 0. A procura sensvel a letras maisculas e minsculas. Exemplos: "Boa noite".lastIndexOf("Boa") retorna 0. "Boa noite".lastIndexOf("o") retorna 5. "Boa noite".lastIndexOf("b") retorna -1.

www.3way.com.br

WebStandards
16link(href)
Cria um link de hipertexto HTML para a URL (absoluta ou relativa) dada por href. Exemplo: str = "Pgina inicial da 3way"; url = "http://www.3way.com.br"; document.write(str.link(url); Produz o mesmo resultado da seguinte linha HTML: <a href="http://www.3way.com.br">Pgina inicial da 3way</A>

17replace(rExp,nStr)
Procura ocorrncias da expresso regular em uma string e substitui por nStr. rExp o nome da expresso regular, podendo ser uma varivel ou literal. nStr pode ser substituda por uma funo. O contedo do objeto string original no alterado. Uma nova string retornada. Exemplo (retorna "Boa noite"): str = "Boa tarde"; re = /'tarde/gi; str_1 = str.replace(re,"noite"); document.write(str_1);

18search(rExp)
Procura um dado formato especificado pela expresso regular rExp, que pode ser uma varivel ou literal. Se encontrado, retorna o ndice da expresso na string. Caso contrrio, retorna -1. Exemplo: strMail = new String("fulano@nome.com.br"); re = /^[^@]+@[^@]+.[a-z]{2,}$/i; if(strMail.search(re) == -1) document.write("O endereo de email no vlido");

19slice(iniNdx,fimNdx)
Extrai parte de uma string, retornando uma nova. iniNdx o ndice base zero inicial e fimNdx o ndice base zero final. Se no especificado, a operao se d at o final da string. Valor negativo para fimNdx indica deslocamento a partir do final. Por exemplo, slice(1,-1) extrai do segundo at o penltimo caracter. Exemplo (escreve "tarde"): str = "Boa tarde"; str_1 = str.slice(4); document.write(str_1);

20split(sep,lim)
Separa uma string em um conjunto (array) de strings, usando como separador o

www.3way.com.br

WebStandards
caractere indicado por sep. O parmetro opcional lim um inteiro que limita o nmero de separaes. Exemplo (no resultado, str_2[0] contm "AA", str_2[1] contm "BB", str_2[2] contm "CC" e str_2[3] contm "DD"): str_1 = new String("AA,BB,CC,DD"); str_2 = str.split(",");

21substr(ini[,compr])
Extrai parte de uma string, comeando no ndice base zero dado por ini. Se este negativo, significa ndice a partir do final da string. O parmetro opcional compr nmero de caracteres a extrair a partir do ndice dado. Se omitido, a operao se d at o final da string. Exemplo (resulta "dia"): str = "Bom dia"; document.write(str.substr(4,3));

22substring(ndx1,ndx2)
Extrai parte de uma string, comeando do ndice base zero ndx1 e terminando, mas no incluindo, no ndice base zero ndx2. Exemplo (resulta "Bom"): str = "Bom dia"; document.write(str.substring(0,3));

23toLowerCase()
Retorna a string original com os caracteres minsculos. No altera a original. Exemplo (resulta "bom dia"): str = "Bom dia"; document.write(str.toLowerCase()); 24 toString() Retorna a string do objeto especificado. Exemplo (resulta "Bom dia"): str = new String("Bom dia"); document.write(str.toString());

25toUpperCase()
Retorna a string original com os caracteres maisculos. No altera a original. Exemplo (resulta "BOM DIA"): str = "Bom dia"; document.write(str.toUpperCase());

www.3way.com.br

WebStandards
6.13.2 DATE
01OobjetoDate()
Permite trabalhar com datas e horas. Pode ser criado por uma das formas abaixo: - new Date() - new Date(ms) - new Date(string_de_data) - new Date(nAno, nMs, nDia [, nHora, nMin, nSeg, nMs] ) A data dada em milissegundos, a partir de 00:00:00 h GMT de 01 de janeiro de 1970. Se nenhum parmetro fornecido (primeira forma), so assumidas a data e hora locais, isto , do computador que executa o script. Parmetros: 01 ms: milissegundos desde a data inicial dada acima. 02 string_de_data: uma seqncia de caracteres em um formato suportado. Exemplo: "Mon, 27 Dec 2004 12:00:00 GMT". 03 - nAno, nMs, nDia, etc: valores inteiros representando partes da data. Exemplo: Janeiro 0, Fevereiro 1, etc. Exemplo 1: a varivel intervalo armazena o tempo de execuo em milissegundos das outras instrues. tempo_1 = // outras tempo_2 = intervalo new Date(); instrues new Date(); = tempo_2 tempo_1

Exemplo 2: este um exemplo dinmico, que atualiza o objeto Date() a cada segundo, permitindo um relgio na tela em vez da simples hora e data do carregamento da pgina. O script abaixo deve estar entre <head> e </head> da pgina: <script language="JavaScript"> function DataHora() { var data = new Date(); tempo.innerHTML = data; setTimeout("DataHora()",1000) } </script> O cdigo seguinte deve estar dentro de <body>: onLoad="DataHora()" E este no corpo da pgina (entre <body> e </body>): <span id=tempo></span>

02getDate()
Retorna um nmero inteiro entre 1 e 31, que representa o dia do ms do objeto Date. Exemplo: a varivel dia contm dia do ms da data atual. data = new Date(); dia = data.getDate();

www.3way.com.br

WebStandards
03getDay()
Retorna um nmero inteiro do dia da semana. Domingo 0, segunda 1, tera 2, etc. Exemplo: a varivel dia_semana contm o dia da semana da data atual. data = new Date(); dia_semana = data.getDay();

04getFullYear()
Retorna o ano do objeto Date em nmeros Exemplo: a varivel ano contm o ano da data atual. data = new Date(); ano = data.getFullYear(); absolutos, por exemplo 1998.

05getHours()
Retorna Exemplo: a hora do objeto Date, um nmero inteiro entre 0 e 23.

data = new Date(); hora = data.getHours();

06getMilliseconds()
Retorna Exemplo: os milissegundos do objeto Date, um inteiro entre 0 e 999.

data = new Date(); ms = data.getMilliseconds();

07getMinutes()
Retorna os minutos do objeto Date, um inteiro entre 0 e 59. Exemplo: data = new Date(); min = data.getMinutes();

08getMonth()
Retorna o ms do objeto Date, um inteiro entre 0 e 11 (0 janeiro, 1 fevereiro, etc). Exemplo: data = new Date(); mes = data.getMonth();

09getSeconds()
Retorna Exemplo: os segundos do objeto Date, um nmero inteiro entre 0 e 59.

www.3way.com.br

WebStandards
data = new Date(); seg = data.getSeconds();

10getTime()
Retorna o nmero de milissegundos da data conforme informado no primeiro tpico. Em geral usado para especificar a data e hora de um outro objeto Date. Exemplo: certo_dia = new Date("May 15, 1998"); outro_dia = new Date(); outro_dia.setTime(certo_dia.getTime());

11getTimezoneOffset()
Retorna Exemplo: a diferena, em minutos, entre a hora local e a hora GMT.

data = new Date(); dif_gmt_horas = data.getTimezoneOffset() / 60;

12setFullYear(nAno[,nMes,nDia])
Especifica um ano (em 4 dgitos) para um objeto date existente. nAno um inteiro de 4 dgitos representando o ano, nMes um inteiro de 0 a 11 para o ms (0 janeiro, 1 fevereiro, etc) e nDia um inteiro de 1 a 31 para o dia do ms. Se dado um valor para nDia, obrigatrio um valor para nMes. Se um parmetro especificado fora da faixa, a funo tenta atualizar os demais de forma coerente. Exemplo: se um valor de 15 dado para nMes, o ano aumentado de 1 e o valor 4 usado para nMes. Exemplo: certo_dia = new Date(); certo_dia.setFullYear(1995);

13setHours(nHora,nMin,nSeg,nMs)
Especifica a hora para um objeto Date. nHora um inteiro entre 0 e 23. Os demais parmetros so opcionais: nMin (inteiro entre 0 e 59), nSeg (inteiro entre 0 e 59) e nMs (inteiro entre 0 e 999 para os milissegundos). Se nSeg fornecido, nMin tambm deve ser dado. Se nMs especificado, nMin e nSeg tambm devem ser. Se um parmetro especificado fora da faixa, a funo tenta atualizar os demais de forma coerente. Exemplo: se 70 dado para nMin, a hora aumentada de 1 e 10 usado para nMin. Exemplo: certo_dia = new Date(); certo_dia.setHours(10);

www.3way.com.br

WebStandards
14setMinutes(nMin[,nSeg,nMs])
Especifica os minutos para um objeto Date. nMin deve ser um inteiro entre 0 e 59. Os demais parmetros so opcionais: nSeg (inteiro entre 0 e 59) e nMs (inteiro entre 0 e 999 para os milissegundos). Se nSeg especificado, nMin tambm deve ser. Se nMs dado, nMin e nSeg tambm devem ser. Se um parmetro dado fora da faixa, a funo tenta atualizar os demais de forma coerente. Exemplo: se nSeg 80, os minutos so aumentados de 1 e 20 usado para os segundos. Exemplo: certo_dia = new Date(); certo_dia.setMinutes(25);

15setMonth(nMes[,nDia])
Especifica o ms de um objeto Date. nMes deve ser um inteiro entre 0 e 11 (0 janeiro, 1 fevereiro, etc). nDia um parmetro opcional para o dia do ms (inteiro entre 0 e 31). Se um parmetro dado fora da faixa, a funo tenta atualizar o objeto de forma coerente. Exemplo: se 12 dado para o ms, o ano aumentado de 1 e 1 usado para o ms. Exemplo: certo_dia = new Date(); certo_dia.setMonth(4);

16setSeconds(nSeg[,nMs])
Especifica os segundos de um objeto Date. nSeg deve ser um inteiro entre 0 e 59. nMs um parmetro opcional para os milissegundos (inteiro entre 0 e 999). Se um parmetro dado fora da faixa, a funo tenta atualizar o objeto de forma coerente. Exemplo: se 70 dado para nSeg, os minutos so aumentados de 1 e 10 usado para os segundos. Exemplo: certo_dia = new Date(); certo_dia.setSeconds(15);

17setTime(nMs)
Especifica um valor para o objeto Date. nMs um inteiro correspondente ao nmero de milissegundos desde 01 de janeiro de 1970 00:00:00 h. Exemplo: certo_dia = new Date("May 15, 1998"); outro_dia = new Date(); outro_dia.setTime(certo_dia.getTime());

18toLocaleString()
Retorna uma seqncia de caracteres (string) de data, com formato definido pelas

www.3way.com.br

WebStandards
configuraes do sistema operacional. Exemplo: <script language="JavaScript"> var d = new Date(); document.write(d.toLocaleString()); </script> Sada: Qui 17 Abr 2008 15:01:33 BRT

6.14OBJETOWINDOW
o objeto principal na hierarquia e contm as propriedades e mtodos para controlar a janela do navegador. Dele dependem todos os demais objetos da hierarquia. Vamos ver a lista de suas propriedades e mtodos.

Propriedades do objeto window


A seguir podemos ver as propriedades do objeto window. Existem algumas muito teis e outras menos. 01 closed - Indica a possibilidade de que tenha fechado a janela. (Javascript 1.1) 02 defaultStatus - Texto que se escreve por padro na barra de estado do navegador. 03 document - Objeto que contem na pgina web que est sendo mostrada. 04 Frame - Um objeto frame de uma pgina web. Acessa-se pelo nome dele. 05 frames array - O vetor que contem todos os frames da pgina. Acessa-se pelo ndice a partir de 0. 06 history - Objeto histrico de pginas visitadas. 07 innerHeight - Tamanho em pixels do espao onde se visualiza a pgina, na vertical. (Javascript 1.2) 08 innerWidth - Tamanho em pixels do espao onde se visualiza a pgina, na horizontal. (Javascript 1.2) 09 length - Nmero de frames da janela. 10 location - A URL do documento que est sendo visualizando. Podemos mudar o valor desta propriedade para irmos a outra pgina. Ver tambm a propriedade location do objeto document. 11 locationbar - Objeto barra de endereos da janela. (Javascript 1.2) 12 menubar - Objeto barra de menus da janela. (Javascript 1.2) 13 name - Nome da janela. Atribumos quando abrimos uma nova janela. 14 opener - Faz referncia janela do navegador que abriu a janela onde estamos trabalhando. Ser vista com mais detalhes no tratamento de janelas com Javascript. 15 outherHeight - Tamanho em pixels do espao de toda a janela, na vertical. Isto inclui as barras de deslocamento, botes, etc. (Javascript 1.2) 16 outherWidth - Tamanho em pixels do espao de toda a janela, na horizontal. Isto inclui as barras de deslocamento. (Javascript 1.2)

www.3way.com.br

WebStandards
17 parent - Faz referncia janela onde est situado o frame que estamos trabalhando. Veremos detalhadamente ao estudar o controle de frames com Javascript. 18 personalbar - Objeto barra pessoal do navegador. (Javascript 1.2) 19 self - Janela ou frame atual. 20 scrollbars - Objeto das barras de deslocamento da janela. 21 status - Texto da barra de estado. 22 statusbar - Objeto barra de estado do navegador. (Javascript 1.2) 23 toolbar - Objeto barra de ferramentas. (Javascript 1.2) 24 top - Faz referncia janela onde est situado o frame que estamos trabalhando. Como a propriedade parent. 25 window - Faz referncia janela atual, assim como a propriedade self.

Mtodos de window em Javascript


O objeto window de Javascript tem a disposio dos programadores uma longa lista de mtodos. Estudaremos e veremos exemplos. Vamos ver agora os distintos mtodos que tem o objeto window. Muitos destes mtodos tero que ser vistos separadamente porque so muito teis e ainda no o utilizamos, agora vamos lista-los e j veremos alguns exemplos. 01 alert(texto) - Apresenta uma janela de alerta onde se pode ler o texto que recebe por parmetro. 02 back() - Ir uma pgina atrs no histrico de pginas visitadas. Funciona como o boto de voltar da barra de ferramentas. (Javascript 1.2) 03 blur() - Tirar o foco da janela atual. (Javascript 1.1) 04 captureEvents(eventos) - Captura os eventos que se indiquem por parmetro (Javascript 1.2). 05 clearInterval() - Elimina a execuo de sentenas associadas a um intervalo indicadas com o mtodo setInterval().(Javascript 1.2) 06 clearTimeout() - Elimina a execuo de sentenas associadas a um tempo de espera indicadas com o mtodo setTimeout(). 07 close() - Fecha a janela. (Javascript 1.1)

08 confirm(texto) - Mostra uma janela de confirmao e permite aceitar ou rejeitar. 09 find() - Mostra uma janelinha de busca. (Javascript 1.2 para Netscape) 10 focus() - Coloca o foco da aplicao na janela. (Javascript 1.1) 11 forward() - Ir uma pgina adiante no histrico de pginas visitadas. Como se clicssemos o boto de adiante do navegador. (Javascript 1.2) 12 home() - Ir pgina de incio o explorador que tenha configurado. (Javascript 1.2) 13 - moveBy(pixelsX, pixelsY) - Move a janela do navegador os pixels que se indicam por parmetro para a direita e para baixo. (Javascript 1.2)

www.3way.com.br

WebStandards
14 - moveTo(pixelsX, pixelsY) - Move a janela do navegador posio indicada nas coordenadas que recebe por parmetro. (Javascript 1.2) 15 open() - Abre uma janela secundria do navegador. 16 print() - Como se clicssemos o boto de imprimir do navegador. (Javascript 1.2) 17 prompt(pergunta,inicio_da_resposta) - Mostra uma caixa de dilogo para pedir um dado. Devolve o dado que se escreveu. 18 releaseEvents(eventos) - Deixa de capturar eventos do tipo que se indique por parmetro. (Javascript 1.2) 19 resizeBy(pixelslargo,pixelsAlto) - Redimensiona o tamanho da janela, acrescentando ao seu tamanho atual os valores indicados nos parmetros. O primeiro para a altura e o segundo para a largura. Admite valores negativos se se deseja reduzir a janela. (Javascript 1.2) 20 resizeTo(pixelslargo,pixelsAlto) - Redimensiona a janela do navegador para que ocupe o espao em pixels que se indica por parmetro (Javascript 1.2) 21 routeEvent() - Encaminha um evento pela hierarquia de eventos. (Javascript 1.2) 22 scroll(pixelsX,pixelsY) - Faz um scroll da janela para a coordenada indicada por parmetro. Este mtodo est desaconselhado, pois agora se debera utilizar scrollTo() (Javascript 1.1) 23 scrollBy(pixelsX,pixelsY) - Faz um scroll do contedo da janela relativo posio atual. (Javascript 1.2) 24 scrollTo(pixelsX,pixelsY) - Faz um scroll da janela posio indicada pelo parmetro. Este mtodo tem que ser utilizado ao invs do scroll. (Javascript 1.2) 25 setInterval() - Define um script para que seja executado indefinidamente em cada intervalo de tempo. (Javascript 1.2) 26 setTimeout(sentena,segundos) - Define um script para que seja executado uma vez depois de um tempo de espera determinado. 27 stop() - Como clicar o boto de stop da janela do navegador. (Javascript 1.2)

6.15OBJETODOCUMENT
Com o objeto document controla-se a pgina web e todos os elementos que contem. O objeto document a pgina atual que est sendo visualizada nesse momento. Depende do objeto window, mas tambm pode depender do objeto frame no caso de que a pgina esteja sendo mostrada em um frame.

Propriedades do objeto document


Vejamos uma lista das propriedades do objeto document e logo veremos algum exemplo. 01 alinkColor - Cor dos links ativos 02 Anchor - Uma ncora da pgina. Consegue-se name="nome_da_ancora">. Acessa-se pelo seu nome. 03 - anchors array - Um array das ncoras do documento. com a etiqueta <a

www.3way.com.br

WebStandards
04 Applet - Um applet da pgina. Acessa-se pelo seu nome. (Javascript 1.1) 05 - applets array - Um array com todos os applets da pgina. (Javascript 1.1) 06 Area - Uma etiqueta <area>, das que esto vinculadas aos mapas de imagens (Etiqueta ). Acessa-se pelo seu nome. (Javascript 1.1) 07 bgColor - A cor de fundo do documento. 08 classes As classes definidas na declarao de estilos CSS. (Javascript 1.2) 09 cookie - Uma cookie 10 domain - Nome do domnio do servidor da pgina. 11 Embed - Um elemento da pgina incrustado com a etiqueta <embed>. Acessa-se pelo seu nome. (Javascript 1.1) 12 - embeds array - Todos os elementos da pgina incrustados com <embed>. (Javascript 1.1) 13 fgColor - A cor do texto. Para ver as mudanas h que reescrever a pgina. 14 From - Um formulrio da pgina. Acessa-se pelo seu nome. 15 - forms array - Um array com todos os formulrios da pgina. 16 ids - Para acessar a estilos CSS. (Javascript 1.2) 17 Image - Uma imagem da pgina web. Acessa-se pelo seu nome. (Javascript 1.1) 18 - images array - Cada uma das imagens da pgina introduzidas em um array. (Javascript 1.1) 19 lastModified - A data de ltima modificao do documento. 20 linkColor - A cor dos links. 21 Link - Um link da pgina. Acessa-se pelo seu nome. 22 - links array - Um array com cada um dos links da pgina. 23 location - A URL do documento que se est visualizando. somente de leitura. 24 referrer - A pgina da qual vem o usurio. 25 tags - Estilos definidos s etiquetas de HTML na pgina web. (Javascript 1.2) 26 title - O ttulo da pgina. 27 URL - O mesmo que location, mas aconselhvel utilizar location j que URL no existe em todos os navegadores. 28 vlinkColor - A cor dos links visitados.

Mtodos do document
Vemos uma lista dos eventos disponveis no objeto document,localizado abaixo do objeto window na hierarquia de objetos de Javascript. 01 captureEvents() - Para capturar os eventos que acontecem na pgina web. Recebe como parmetro o evento que se deseja capturar. 02 close() - Fecha o fluxo do documento. (Ser visto mais adiante neste manual um artigo sobre o fluxo do documento)

www.3way.com.br

WebStandards
03 contextual() - Oferece uma linha de controle dos estilos da pgina. No caso de desejarmos especific-los com Javascript. 04 getSelection() - Devolve um string que contem o texto que foi selecionado. Funciona somente em Netscape. 05 handleEvent() - Invoca o manipulador de eventos do elemento especificado. 06 open() - Abre o fluxo do documento. 07 releaseEvents() - Libera os eventos capturados do tipo que se especifique, enviando-os aos objetos seguintes na hierarquia. 08 routeEvent() - Passa um evento capturado atravs da hierarquia de eventos habitual. 09 write() - Escreve dentro da pgina web. Podemos escrever etiquetas HTML e texto normal. 10 writeln() - Escreve igual que o mtodo write(), embora coloque uma quebra de linha no final.

6.16OBJETOFORMFORMULRIO
No JavaScript utiliza-se um objecto, denominado form, para referenciar os elementos dos formulrios, que so os tradicionalmente usados em HTML. Contudo, um documento pode conter vrias forms, razo pela qual os objectos de tipo form se agrupam em arrays de forms. Vejamos uma descrio do que o objecto form e qual o conjunto de propriedades e mtodos que utiliza.

Propriedades:
01action
Uma string contendo o valor a atribuir ao atributo "action", do elemento HTML <form>, que contm o script CGI a ser executado quando o contedo do formulrio submetido.

02elements
Um array contendo uma entrada correspondente a cada elemento existente no formulrio (campos de texto, caixas de escolha, etc...).

03encoding
Tipo de codificao MIME utilizado no contedo enviado para o servidor (correspondente ao atributo "enctype", do elemento HTML <form>.

04length
Nmero de elementos contidos no formulrio, ou seja, o comprimento do array elements.

www.3way.com.br

WebStandards
05method
Identifica o atributo "method".

06name
String contendo o nome da form (correspondente ao atributo name).

07target
Por fim, este parmetro que traduz o "target" do elemento <form> e que utilizado para conter o nome da Frame e que a form utilizada.

Mtodos:
01submit()
Submete o formulrio para o programa CGI ou server side script correspondente. Os formulrios em HTML so construdos com base num conjunto de elementos distintos, usados para a entrada dos dados. Os scripts JavaScript operaram sobre os elementos componentes dos formulrios, bem como sobre os seus contedos, utilizando, para tal, as propriedades e mtodos dos objectos associados. Exemplo do uso desses objetos para a validao de formulrios: <html> <head> <title> Encomenda de Pizzas </title> <script language = "JavaScript"> function validar(form) { // Testa se o utilizador escolheu pelo menos 1 Pizza if(form.pizza.selectedIndex == 0 || form.quantp.selectedIndex == 0 ) { window.alert("Tem que seleccionar pelo menos 1 Pizza!"); return(false); }else { // Testa se os dados para entrega esto preenchidos var s = form.nome.value; var s1 = form.morada.value; var s2 = form.telefone.value; if( (s.length < 5) || (s1.length < 6) || (s2.length < 9) ) { window.alert("preencha correctamente o seu Nome, Morada e Telefone"); return(false); }else { // Testa se os dados de pagamento esto correctos if (form.pag[0].checked != true && form.pag[1].checked != true &&form.pag[2].checked != true ) { window.alert("Escolha a forma de pagamento!");

www.3way.com.br

WebStandards
return(false); } else { if(form.pag[0].checked == true && form.nvisa.value.length != 12) { window.alert("Introduza correctamente o seu numero VISA"); return(false); }else { return(true); // S neste caso e que autorizada a encomenda! } } } } } </script> </head> <body> <h2> Ficha de Encomenda de Pizzas </h2><p/> <form name = "PizzaExp" method="post" action = "mailto:encom@pizzas.pt" onSubmit = "return validar(document.PizzaExp)"> <table> <tr> <td> Qual a Pizza a encomendar? </td> <td> <select name="pizza"> <option> Marguerita </option> <option> Capriciosa </option> <option> Quatro Estaes </option> <option> Calzone </option> <option> Tropical </option> <option> Maritima </option> </select> </td> <td> Quantidade: </td> <td> <select name = "quantp"> <option> 0 </option> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> <option> 6 </option> </select> </td> </tr> <tr> <td> Qual a bebida? </td> <td> <select name="bebida"> <option> Coca Cola </option> <option> Seven Up </option>

www.3way.com.br

WebStandards
</td> <td> Quantidade: </td> <td> <select name = "quantb"> <option> 0 </option> <option> 1 </option> <option> 2 </option> <option> 3 </option> <option> 4 </option> <option> 5 </option> <option> 6 </option> </select> </td> </tr> </table> <table> <tr> <td> <td> <td> <td> </tr> </table> <hr/> <table> <tr> </tr> <tr> <td> <td> <td> <td> </tr> <tr> <td> Telefone: </td> <td> <input type = "text" name = "telefone" > </td> </tr> </table> <hr/> <table> <tr> </tr> <tr> <td> <input type = "radio" name = "pag" /> VISA </td> <td> <input type = "radio" name = "pag" /> Contra entrega </td> <td> <input type = "radio" name = "pag" /> Factura (30 dias,+15% ) Nome: </td> <input type = "text" name="nome" size = "40" > </td> Morada: </td> <input type = "text" name= "morada" size = "40" > </td> <input <input <input <input type="checkbox" type="checkbox" type="checkbox" type="checkbox" name= name= name= name= "opcao1" "opcao2" "opcao3" "opcao4" /> /> /> /> Extra Queijo </td> Massa Grossa </td> Pimentos </td> Cogumelos </td> <option> gua </option> <option> Cerveja </option> </select>

<td> <strong> Dados para entrega: </strong> </td>

<td> <strong> Forma de pagamento: </strong> </td>

</td> </tr> </table> <table> <tr>

www.3way.com.br

WebStandards
<td> Nmero do carto VISA </td> <td> <input type = "text" name = "nvisa" /> </td> </tr> </table> <hr/> <input type = "submit" value = "Enviar!" /> <input type = "reset" value = "Limpar" /> </form> </body> </html>

6.17DILOGOS MTODO ALERT()


A finalidade deste mtodo emitir uma caixa de dilogo do windows conforme mostrado no exemplo passado com uma mensagem e um boto de OK. Este mtodo pertencente ao objeto window do JavaScript, porm seu uso com a sintaxe de ponto opcional, assim sendo observe a sintaxe de seu funcionamento e o exemplo da prxima figura: window.alert("Meu Primeiro Script"); ou alert("Meu Primeiro Script");

MTODO CONFIRM()
Uma outra alternativa alm do mtodo alert() est no mtodo confirm() que exibe uma caixa de dilogo e os botes de OK e CANCELAR. Caso seja pressionado o boto OK, o mtodo retornar o valor booleano TRUE e pressionado o boto CANCELAR, retornado o valor FALSE. Com isto, o usurio poder determinar uma tomada de deciso dentro de seu script. Assim como o mtodo alert(), o mtodo confirm pertencente ao objeto window, sendo seu uso opcional, observe sua sintaxe abaixo e veja o exemplo da caixa de dilogo presente na

www.3way.com.br

WebStandards
figura a seguir: window.confirm("Tem Certeza??"); ou confirm("Tem Certeza??");

6.18STATUS
Para adicionar status em sua pgina na web, nos links, etc..., basta usar o metodo status() do objeto window. Exemplo: 01 - Ao carregar a pgina: <body onload=window.status('Site do fulano de tal')> texto, imagem, links, midia... <body> 02 No link: <body> <a href=www.google.com.br onmouseover=window.status('site do Google')>G</a> <a href=www.3way.com.br onmouseover=window.status('site da 3way')>3Way</a> </body> O mtodo status pode ser usado em qualquer elemento HTML se ele suportar algum evento.

6.19NAVIGATOR
Neste objeto ficam armazenadas as informaes sobre o browser que est sendo utilizado. Forma geral: Navigator.propriedade

Propriedades:
01 appCodeName - Armazena o codnome do browser. 02 appName - Armazena o nome do browser. 03 appVersion - Armazena a verso do browser. 04 userAgent - Armazena o cabealho (user-agent) que enviado para o servidor, no protocolo HTTP, isto serve para que o servidor identifique o software que est sendo usado pelo

www.3way.com.br

WebStandards
cliente. Exemplo: <script language="javascript"> document.write("Code Name: "+ navigator.appCodeName +"<br>"); document.writeln("Nome: "+ navigator.appName +"<br>"); document.writeln("Verso: "+ navigator.appVersion +"<br>"); document.writeln("Agente: "+ navigator.userAgent +"<br>"); </script>

Sada:

6.20HISTORY
Este objeto armazena todas as URL das pginas HTML por onde o usurio passou durante a sesso atual do browser. uma cpia das informaes armazenadas na opo Go da barra de menu do Navigator.

Forma geral:
history.propriedade history.mtodo

Propriedades:
01 lenght - Informa a quantidade de pginas visitadas.

Mtodos:
back - Retorna pgina anterior, de acordo com a relao de pginas do objeto history. Equivale a clicar o boto (Voltar) do browser. Ex: history.back() forward - Passa para a prxima pgina, de acordo com a relao de pginas do objeto history. Equivale a clicar o boto (Prxima Pgina) do browser. Ex: history.forward() go - Permite que qualquer URL que esteja presente na relao de pginas visitadas do objeto history, seja carregada. Ex: history.go(parmetro) Existem duas possibilidades para "parmetro": 1 - parmetro um nmero: Ao definir um nmero, este deve ser inteiro. Se for positivo, a pgina alvo est "parmetro"pginas frente. Ao passo que se for negativo, a pgina alvo est "parmetro" pginas para traz. 2 - parmetro uma string: Neste caso, o alvo a URL que mais se assemelhe ao valor da string definida por "parmetro".

www.3way.com.br

WebStandards
7CONTROLEDEDOCUMENTOVIADOM
Dom em Portugus significa Modelo de Objetos de Documentos, a interface de programao ultilizada para acesso e manipulao de dados em documentos HTML e XML. um modelo que disponibiliza os dados como um conjunto de ns, os quais podem ser acessados por meio de um cdigo JavaScript. Os ns seguem uma hierarquia, tornando, portanto, mais organizado o acesso, a inscluso, a alterao e a excluiso de informaes. Exemplo de ns:

ul

li

li

li

texto 01

texto 02

texto 03

7.1DOMAPI 01 getElementsByTagName
Retorna um array contento a relao dos nodos filhos do elemento especificado.

02 childNodes
Indica uma lista contendo todos os filhos desse nodo.

03 createTextNode(text)
(text). Cria um nodo de texto com a string especificada, retornando um objeto do tipo texto

04 appendChild( new Child )


Adiciona um nodo no final da lista de filhos do nodo especificado.

05 createElement(newElementName)
Cria um elemento do tipo especificado. A instncia retornada implementa a interface do elemento, e, portanto, os atributos podem ser especificados no objeto de retorno. Se o nome informado possuir algum caractere invlido, ser gerada a exceo INVALID_CHARACTER_ERR.

www.3way.com.br

WebStandards
06 removeChild(theChild)
Remove o nodo especificado na lista de filhos e o retorna.

07 getAttribute(nome)
Pega o atributo de um determinado elemento.

08 setAttribute(nome, valor)
Atribui um valor a um determinado atributo do elememeto. Exemplos: Script que adiciona nodos filhos a uma lista de nomes. <html> <head> <script> function InserirNome() { var nome = document.Form.nome.value; //pega o valor digitado no campo nome var lista = document.getElementById('listaNomes'); //referencia pelo atributo id a lista var novoElemento = document.createElement('li'); var novoNome = document.createTextNode(nome); lista.appendChild(novoElemento); novoElemento.appendChild(novoNome); } </script> </head> <body> <form name="Form"> <input type="text" name="nome"> <input type="button" value="inserir" onClick="InserirNome()"> </form> <ul id="listaNomes"> <li><b>Esta e minha lista</b></li> </ul> <body> </html>

Acessando os elementos de ns usando os mtodos. Lista de Nomes Joo Maria Zezinho Paulo www.3way.com.br

WebStandards

Francisco

<html> <head> <script> function MostraFilhos() { var nomes = document.getElementsByTagName('li'); for(i = 1; i < nomes.length; i++ ) { var nome = nomes[i].childNodes; alert(nome[0].nodeValue); } } </script> </head> <body> <ul id="listaNomes"> <li><b>Esta e minha lista</b></li> <li>Jo&atilde;o</li> <li>Maria</li> <li>Zezinho</li> <li>Paulo</li> <li>Francisco</li> </ul><br> <a href="javascript:MostraFilhos()">Mostrar Filhos</a> <body> </html>

7.2Marcaroudesmacarumconjuntodecheckboxes
<html> <head> <title>Marcar e Desmarcar um conjunto de checkebox</title> <script> function selecionarTodos(marcacao, total) { for( i=1; i<=total; i++ ) { document.getElementById('chk_'+i).checked = marcacao; } } </script> </head> <body> <input type="checkbox" name="marcador" onclick="selecionarTodos(this.checked,5);">Marcar Todos <div id="itens"> <input type="checkbox" id="chk_1"> Item 1<br> <input type="checkbox" id="chk_2"> Item 2<br> <input type="checkbox" id="chk_3"> Item 3<br> <input type="checkbox" id="chk_4"> Item 4<br> <input type="checkbox" id="chk_5"> Item 5<br>

www.3way.com.br

WebStandards
</div> </body> </html>

O exemplo acima nos mostra um das maneiras de selecionar vrios checkbox. Na funo selecionarTodos pegamos como parmetro a marcao do checkbox que usamos como marcador e o nmero de checkbox que devemos selecionar. Depois criamos um lao e usando o mtodo document.getElementById indentificamos os checkbox a serem selecionados e atribuimos a eles o valor de seleo passado como parmetro.

7.3EVITANDODUPLOCLIQUEDOUSURIO
O ondblclick um evento que ocorre em quase todos os elementos do HTML embora seja mais usado na Tag body. Ele o evento responsvel pelo duplo clique e podemos executar nele qualquer funo. Veja um exemplo para evitar o duplo clique: <body ondblclick=alert('No permitido duplo clique nesse site')></body>

7.4VALIDANDOCAMPOSOBRIGATRIOS
<html> <head> <title>Validao via DOM</title>

www.3way.com.br

WebStandards
<script language="javascript"> function valida(form){ var elementos = form.elements; for(var i=0; i< elementos.length; i++){ if (elementos[i].getAttribute("type")=="text"){ if (elementos[i].getAttribute("obrigatorio")=="sim") { if (elementos[i].value=="") { alert("O campo "+elementos[i].getAttribute("name") +" obrigatorio."); return false; } } } } return true; } </script> </head> <body> <form onSubmit="return valida(this);"> <input type="text" name="Nome" obrigatorio="sim"><br> <input type="text" name="E-mail" obrigatorio="nao"><br> <input type="submit" name="submit"> </form> </body> </html> No exemplo acima, fizemos uma validao de formulrio via Javascript e DOM. Foi atribuda a varivel elementos um array contendo uma entrada correspondente a cada elemento existente no formulrio. Percorrendo esse array verificamos qual o tipo de elemento equivalente ao ndice do array e foi verificado o atributo obrigatrio no elemento.

7.5Validandootamanhodoscampos
<html> <head> <title>Validao via DOM</title> <script language="javascript"> function verificaTamanho(campo,n) { var tamanho = campo.getAttribute('tamanho'); if( n > tamanho ) alert("Campo "+campo.getAttribute('name')+" deve ter no maximo "+tamanho+" caracteres!"); campo.value = campo.value.substr(0,tamanho); } </script> </head> <body> <form> <input type="text" name="Nome" tamanho="30" onblur="verificaTamanho(this,this.value.length)"><br> <input type="text" name="E-mail"><br> <textarea name="Mensagem" tamanho="100"

www.3way.com.br

WebStandards
onkeyup="verificaTamanho(this,this.value.length)"></textarea><br> <input type="submit" name="submit"> </form> </body> </html> Na funo verificaTamanho(), passado como parmetro a indentificao do campo e o tamanho de caracteres que ele pode suportar. Enquanto o usurio utiliza o campo adicionando informaes, usamos o evento onkeyUp para verificar o tamanho do campo, essa verificao ocorre quando o usurio libera uma tecla do teclado.

7.6COOKIES
Um cookie um grupo de dados trocados entre o navegador e o servidor de pginas, colocado num arquivo (ficheiro) de texto criado no computador do usurio. A sua funo principal a de manter a persistncia de sesses HTTP. A utilizao e implementao de cookies foi um adendo ao HTTP e muito debatida na altura em que surgiu o conceito, introduzido pela Netscape, devido s consequncias de guardar informaes confidenciais num computador - j que por vezes pode no ser devidamente seguro, como o uso costumeiro em terminais pblicos. Um exemplo aquele cookie que um site cria para que voc no precise digitar sua senha novamente quando for ao site outra vez. Em JavaScript, podemos criar um script para manipul-los utilizando document.cookie. Esta propriedade contm uma String com o valor de todos os cookies que pertencem ao espao de nomes (domnio/caminho) do documento que possui a propriedade. A propriedade document.cookie usada tanto para criar como para ler cookies. Para definir um novo cookie, basta atribuir um string em um formato vlido para o cabealho HTTP Set-Cookie propriedade document.cookie. Como cookies no podem ter espaos, ponto-e-virgula e outros caracteres especiais, pode-se usar a funo escape(String) antes de armazenar o cookie, para garantir que tais caracteres sero preservados em cdigos hexadecimais: nome="usuario"; valor=escape("Joo Grando"); // converte para Jo%E3o%20Grand%E3o vencimento="Monday, 22-Feb-99 00:00:00 GMT"; document.cookie = nome + "=" + valor + "expires=" + vencimento; A propriedade document.cookie no um tipo string convencional. No possvel apagar os valores armazenados simplesmente atribundo um novo valor propriedade. Novos valores passados document.cookie criam novos cookies e aumentam a string: document.cookie = "vidacurta=" + escape(" s por hoje!"); document.cookie = "vidalonga=" + escape(" por duas semanas!") + "expires=" + vencimento; Os cookies esto todos armazenados na propriedade document.cookie, em um string que separa os cookies pelo ;. Se o valor de document.cookie for impresso agora: document.write(document.cookie); O texto a seguir ser mostrado na pgina, com os trs cookies separados por ;: usuario=Jo%E3o%20Grand%E3o; vidacurta=%C9%20s%F3%20por%20hoje%21; vidalonga=%C9%20por%20duas%20semanas%21

www.3way.com.br

WebStandards
As letras acentuadas, espaos e outros caracteres especiais foram substitudos pelo seu cdigo hexadecimal, aps o %. Para decodificar o texto, pode-se usar unescape(): document.write(unescape(document.cookie)); Se no for definido um campo expires com uma data no futuro, o cookie s sobreviver sesso atual do browser. Assim que o browser for fechado, ele se perder. Por exemplo, se a sesso atual do browser for encerrada e o browser for novamente iniciado, carregando a pgina que imprime document.cookie, teremos apenas dois cookies, e no trs como antes. Isto porque o cookie vidacurta foi definido sem o campo expires: usuario=Jo%E3o%20Grand%E3o; vidalonga=%C9%20por%20duas%20semanas%21 Geralmente queremos definir o tempo de validade de um cookie de acordo com um intervalo relativo de tempo e no uma data absoluta. O formato de data gerado pelo mtodo toGMTString() de Date compatvel com o formato aceito pelos cookies. Sendo assim, podemos criar, por exemplo, uma funo para definir um cookie com validade baseada em um nmero de dias a partir do momento atual: function setCookie(nome, valor, dias) { diasms = (new Date()).getTime() + 1000 * 3600 * 24 * dias; dias = new Date(diasms); expires = dias.toGMTString(); document.cookie = escape(nome) + "=" + escape(valor) + "; expires=" + expires; } A funo acima pode ser chamada tanto para criar cookies como para matar cookies no mesmo espao de nomes. Para criar um novo cookie, com durao de 12 horas: setCookie("cook", "Um, dois, tres", 0.5); Para matar o cookie criado com a instruo acima, basta criar um homnimo com data

de

vencimento no passado. Podemos fazer isto passando um nmero negativo como tempo de validade em setCookie(): setCookie("cook", "", -365); Para extrair as informaes teis de um cookie, usamos os mtodos de String que realizam operaes com caracteres (indexOf(), substring(), split()). Uma invocao do mtodo split(";") coloca todos os pares nome/valor em clulas individuais de um vetor. cookies = document.cookie.split(";"); // cookies[0] = "usuario=Jo%E3o%20Grand%E3o" // cookies[1] = "vidacurta=%C9%20s%F3%20por%20hoje%21" // cookies[2] = "vidalonga=%C9%20por%20duas%20semanas%21" Uma segunda invocao de split(), desta vez sobre cada um dos pares nome/valor obtidos acima, separando-os pelo =, cria um vetor bidimensional. O string cookies[i] se transforma em um vetor para receber o retorno de split("="). Criamos ento duas novas propriedades: name e value para cada cookie, que contm respectivamente, o nome e valor, j devidamente decodificados: for (i = 0; i < cookies.length; i++) { cookies[i] = cookies[i].split("="); cookies[i].name = unescape(cookies[i][0]); cookies[i].value = unescape(cookies[i][1]); }

www.3way.com.br

WebStandards
8DOMSTYLE
O DOM STYLE representa um estilo individual declarao. O Estilo objeto pode ser acessado a partir do documento ou a partir dos elementos a que esse estilo aplicado. Sintaxe para a utilizao das propriedades Style Object: document.getElementById("id").style.property = "valor"

8.1CategoriasdoStyleObject:

8.1.1 PROPRIEDADES BACKGROUND


01 background: define todas as propriedades de fundo. Sintaxe: Object.style.background=background-color background-attachment background-position Exemplo: document.body.style.background="#FFCC80 url(bgdesert.jpg) repeat-y"; 02 backgroundAttachment: define se uma imagem de fundo fixa ou rola com a pgina. Sintaxe: Object.style.backgroundAttachment=scroll|fixed Exemplo: document.body.style.backgroundAttachment="fixed"; 03 backgroundColor: define a cor de fundo de um elemento. Sintaxe: Object.style.backgroundColor=color-name|color-rgb|color-hex|transparent Exemplo: document.body.style.backgroundColor="#FFCC80"; 04 backgroundImage: define a imagem de fundo de um elemento. Sintaxe: Object.style.backgroundImage=url(URL)|none Exemplo: document.body.style.backgroundImage=url(foto.jpg); 05 backgroundPosition: define a posio inicial de uma imagem de fundo. Sintaxe: Object.style.backgroundPosition=position Parmetros: 01 top left - top center - top right - center left - center center - center right - bottom left bottom center - bottom right: Se voc especificar apenas uma palavra-chave, o segundo valor ser "center". background-image background-repeat

www.3way.com.br

WebStandards
02 x% - y%: O valor x indica a posio horizontal e y o valor indica a posio vertical. O canto esquerdo superior de 0% 0%. O canto inferior direito 100% 100%. Se voc especificar apenas um valor, o outro valor ser de 50%. 03 xpos ypos: O valor x indica a posio horizontal e y o valor indica a posio vertical. O canto superior esquerdo, est 0 0. As unidades podero ser pixels (0px 0px) ou quaisquer outras unidades CSS. Se voc especificar apenas um valor, o outro valor ser de 50%. Voc pode misturar% e unidades. Exemplo: document.body.style.backgroundPosition = bottom center; 06 backgroundPositionX: define a posio horizontal de uma imagem de fundo. Sintaxe: Object.style.backgroundPositionX=position Parmetros: left, center, right, x% ( 0% esquerdo e 100% direito ), xpos . Exemplo: document.body.style.backgroundPositionX = right; 07 backgroundPositionY: define a posio vertical de uma imagem de fundo. Sintaxe: Object.style.backgroundPositionY=position Parmetros: top, center, bottom, y% ( 0% topo e 100% canto inferior ), ypos. Exemplo: document.body.style.backgroundPositionY = center; 08 backgroundRepeat: define se/como uma imagem de fundo vai se repetir. Sintaxe: Object.style.backgroundRepeat=repeat_value Parmetros: repeat ( Default ), repeat-x, repeat-y, no-repeat. Exemplo: document.body.style.backgroundRepeat = repeat-x;

8.1.2 PROPRIEDADES DE BORDA E MARGEM


01 border: Conjuntos de todas as propriedades para as quatro fronteiras em um elemento. Sintaxe: Object.style.border=borderWidth borderStyle borderColor Parmetros: borderWidth ( espessura ) : thin, medium, thick, lenght. borderStyle: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. borderColor: color-name, color-rgb, color-hex, transparent.

www.3way.com.br

WebStandards
Exemplo: document.getElementById(id).style.border = 1px dotted #FF0000; 02 borderBottom, borderLeft, borderTop, borderRight: define as propriedades para a borda inferior, esquerda, do topo e a borda direita respectivamente. Sintaxe: Object.style.borderBottom=borderWidth borderStyle borderColor Object.style.borderLeft=borderWidth borderStyle borderColor Object.style.borderTop=borderWidth borderStyle borderColor Object.style.borderRight=borderWidth borderStyle borderColor Parmetros: os mesmos da propriedade border. Exemplo: document.getElementByTagName('p').style.borderBottom document.getElementByTagName('p').style.borderLeft = document.getElementByTagName('p').style.borderBottom rgb(187,187,187); document.getElementByTagName('p').style.borderBottom = thick solid black; 2px outset red; = thick inset = 6px solid #FF00FF;

03 borderLeftColor, borderBottomColor, borderRightColor, borderTopColor: define a cor para a borda correspondente. Sintaxe: Object.style.borderLeftColor = color-name | color-rgb | color-hex Exemplo: document.getElementById(id).style.borderLeftColor = document.getElementById(id).style.borderBottomColor document.getElementById(id).style.borderLeftColor = document.getElementById(id).style.borderLeftColor = #0000FF; = red; rgb(128,128,128); #F0F0F0;

04 borderLeftWidth, borderBottomWidth, borderRightWidth, borderTopWidth: define as espessuras das respectivas bordas. Sintaxe: Object.style.borderLeftWidth = thin | medium | thick | length; Exemplo: document.getElementById(id).style.borderLeftWidth = thin; document.getElementById(id).style.borderBottomWidth = medium; document.getElementById(id).style.borderRightWidth = 2px; document.getElementById(id).style.borderTopWidth = thick; 05 borderLeftStyle, borderBottomStyle, borderRightStyle, borderTopStyle: define os estilos das bordas correspondentes. Sintaxe: Object.style.borderRightStyle= none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset Exemplo:

www.3way.com.br

WebStandards
document.getElementById(id).style.borderLeftStyle = none; document.getElementById(id).style.borderBottomStyle = dotted; document.getElementById(id).style.borderRightStyle = double; document.getElementById(id).style.borderTopStyle = groove; 06 margin: Define as margens de um elemento (pode ter at quatro valores).

Se voc especificar um valor, tais como: div{margin: 50 pixels} - todas as quatro margens sero 50 pixels Se voc especificar dois valores, tais como: div { margin: 10px 50 pixels } - as margens superiores e inferiores sero 50 pixels, margens esquerda e direita ser 10px Se voc especificar trs valores, tais como: div { margin: 10px 20px 50 pixels } - a margem superior ser 10 pixels, esquerda e direita margem ser 20px, margem inferior ser 50px Se voc especificar quatro valores, tais como: div { margin: 10px 20px 30px 50 pixels } - a margem superior ser 50 pixels, margem direita ser 10px, ser 20px margem inferior, margem esquerda ser 30px.

Sintaxe: Object.style.margin= pos | %; Exemplo: document.getElementById('id').margin = 10px; document.getElementByTagName('div').margin = 5%; 07 marginLeft, marginBottom, marginRight, marginTop: define, respectivamente, a margem esquerda, inferior, direita e superior do elemento. Sintaxe: Object.style.marginRight = pos | %; Exemplo: document.getElementById('id').marginLeft = 25px; document.getElementByTagName('div').marginBottom = 15%; document.body.style.marginRight = 50px; document.getElementById('id').marginTop = 0px; 08 padding: Define o estofamento, preenchimento de um elemento (pode ter at quatro valores). o espao entre a fronteira do elemento e o seu contedo.

Se voc especificar um valor, tais como: div { padding: 50 pixels } - todos os quatro lados tero um preenchimento de 50 pixels ; Se voc especificar dois valores, tais como: div { padding: 10px 50 px } - o topo e canto inferior ter o preenchimento de 10 pixels, esquerda e direita ser estofado com 50px ; Se voc especificar trs valores, tais como: div { padding: 10px 20px 50 px } - o preenchimento superior ser de 10 pixels, esquerda e direita ser estofado com 20px, e o inferior ser de 50px; Se voc especificar quatro valores, tais como: div {padding: 10px 20px 30px 50 px } o estofo superior ser de 10px, o direitor ser de 20px, inferior de 30px e o esquerdo de 50px.

Sintaxe: Object.style.padding = padding; Exemplo:

www.3way.com.br

WebStandards
document.getElementById('id').padding = 2cm; 09 paddingLeft, paddingBottom, paddingRight, paddingTop: define, respectivamente, o preenchimento esquerdo, inferior, direito e superior de um elemento. Sintaxe: Objetct.style.paddingLeft = lenght | % ( percentagem em relao ao total da algura do documento); Exemplo: document.getElementById('id').paddingLeft = 2px; document.getElementById('id').paddingBottom = 5%; document.getElementById('id').paddingRight = 3cm; document.getElementById('id').paddingTop = 10%;

8.1.3 PROPRIEDADES DE LAYOUT


01 cursor: define o tipo de cursor exibido no documento. Sintaxe: Object.style.cursor=cursortype Parmetros: url, default, auto, crosshair, pointer, move, e-resize, ne-resize, nw-resize, nresize, se-resize, sw-resize, s-resize, w-resize, text, help, wait. Exemplo: document.getElementById('id').cursor = help; 02 display: define como um elemento ser exibido. Sintaxe: Object.style.display=value Possveis valores:

none: o elemento no ser exibido; block: elemento ser apresentado como um elemento de nvel de bloco, com uma quebra de linha antes e depois do elemento; inline: o elemento ser apresentado como um elemento inline, sem qualquer linha antes ou aps do elemento; list-item: o elemento ser apresentado como uma lista; run-in: o elemento ser apresentado ou em nvel de bloco ou em elemento inline, depende do contexto; compact: o mesmo que run-in; table: o elemento ser apresentado como um bloco table( <table> ), com uma quebra de linha antes e depois da tabela;

Exemplo: document.getElementById(id).style.display = none; 03 visibility: define se um elemento deve ser visvel ou no. Sintaxe: Objetct.style.visibility = visible | hidden | collapse

www.3way.com.br

WebStandards
Parmetros: visible: default o elemento pode ser visto. hidden: o elemento no visvel mais afeta o layout. collapse: Quando usado em uma linha ou coluna, o elemento no ser visvel. O espao invisvel do elemento utilizado para outros contedos. Exemplo: document.getElementById('texto').style.visibility = 'hidden';

8.1.4 PROPRIEDADES DE TEXTO


01 color: define a cor do texto. Sintaxe: Object.style.color = color-hex | color-name | color-rgb Exemplo: document.getElementById('texto').style.display = '#00FF00'; document.getElementById('texto').style.display = 'red'; document.getElementById('texto').style.display = 'rgb(0,0,255)'; 02 font: define todas as propriedades de texto. Sintaxe: Objetct.style.font = fontStyle, fontVariant, fontWeight, fontSize, fontFamily. Exemplo: document.getElementByName('texto').style.font = 'italic bold 12px arial,serif'; 03 fontFamily: especifica uma lista de font-family ou generic-font para o elemento. Sintaxe: Object.style.fontFamily = font1, font2,... Exemplo: document.getElementById('texto').style.fontFamily = 'arial,sans-serif'; 04 fontSize: define o tamanho da fonte no elemento. Sintaxe: Object.style.fontSize = xx-small | x-small | small | medium | large | x-large | xxlarge | smaller | larger | length | % Exemplo: document.getElementById('txt').style.fontSize = 'small'; 05 fontStyle: define o estilo da fonte no elemento. Sintaxe: Object.style.fontStyle = normal | italic | oblique Exemplo: document.getElementById('txt').style.fontStyle = 'italic'; 06 fontWeight: define a audcia da fonte. Sintaxe: Object.style.fontWeight = value. Possveis valores:

www.3way.com.br

WebStandards

normal: caracteres normais; lighter: define lighter caracteres; bold: define thick caracteres; bolder: define thicker caracteres; 100 900: define a espessura a partir de nmeros que vo de 100 a 900. 400 o mesmo que o normal, e 700 o mesmo que negrito.

Exemplo: document.getElementById('txt').style.fontWight = '900';

8.2Alterandocomponentesdoformulriobaseadonaseleodeum elementodalista
Para fazer um formulrio acessvel e dinmico, usamos Javascript com a API DOM. Abaixo temos um exemplo de formulrio usando DOM Style para alterar e/ou inserir novos componentes ao formulrio. <html> <head> <title>Formul&aacute;rio</title> <script language="javascript"> function mostraCampo(marcador,campo) { var dc = document.getElementById(campo); if(marcador) dc.style.display = 'block'; else dc.style.display = 'none'; } Acima a funo mostraCampo() responsvel por mostrar o objeto campo passado como parmetro se um objeto checkbox tambm passado por parmetro estiver selecionado. function validaFormulario(formulario) { elemento = formulario.elements; for(i = 0; i<elemento.length; i++) { if(elemento[i].getAttribute('obrigatorio')=='s') { if(elemento[i].value.length==0) { alert('O campo '+elemento[i].getAttribute('name')+' e obrigatorio!'); return false; break; } } } return true; }

www.3way.com.br

WebStandards
A funo validaFormulario() como o prprio nome dela j diz, a funo responsvel pela falidao do formulrio, obedece o mesmo raciocnio apresentado em um de nossos exemplos anteriores. function retornaCampos(total) { dc = document.getElementById('recebe_campos'); dc.innerHTML = ''; for( i = 1; i<=total; i++) { novoElemento = document.createElement('input'); quebraLinha = document.createElement('br'); novoElemento.setAttribute('type','text'); novoElemento.setAttribute('name','nome'+i); novoElemento.setAttribute('obrigatorio','s'); novoNome = document.createTextNode('Nome '+i+' '); dc.appendChild(novoNome); dc.appendChild(novoElemento); dc.appendChild(quebraLinha); } } Usando a funo retornaCampos() possvel adicionar ao formulrio campos do tipo texto para a insero de informaes, neste caso, insero do(s) nome(s) do(s) filho(s) do usurio se ele tiver filhos. </script> </head> <tr> <form onsubmit="return validaFormulario(this)"> <table width="700px" cellspacing="0" border="0" cellpadding="0" align="center"> <tr><td width="35%">Nome</td> <td><input type="text" name="nome" id="nome" obrigatorio="s"></td> </tr> <tr><td width="35%">Conjuge</td> <td><input type="text" name="conjuge" id="conjuge" obrigatorio="s"></td> </tr> No checkbox abaixo inserimos no evento onclick dele a funo mostraCampo que envia como parmetro o estado dele. Se estiver selecionado permitir o surgimento do campo de telefone. <tr><td>Possui telefone? <input type="checkbox" name="verif_tel" value="true" onclick="mostraCampo(this.checked,'num_tel')">Sim</td> <td> <input type="text" name="telefone" id="num_tel" obrigatorio="n" style="display:none;" value="numero" onfocus="this.value=''" onblur="if(this.value.length==0){ this.value = 'numero'; }"> </td> </tr> <tr> <td valign="top"> Ao inserir no campo Total de Filhos o numero correspondente ao total de filhos, a funo retornaCampos cria campos de texto para o usurio informar o nome dos filhos e esses

www.3way.com.br

WebStandards
campos j vem definidos como obrigatrio. Total de Filhos <input type="text" size="2" name="total_filhos" maxlength="1" onkeyup="retornaCampos(this.value)"> </td> <td id="recebe_campos"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Enviar Formul&aacute;rio"> </td> </tr> </table> </form> </body> </html>

www.3way.com.br