Você está na página 1de 13

PROGRAMACAO III DOM e DHTML

Paulo Erick Ricardo Gonalves c Rmulo Andr o e Sidney Teixeira Araguatins-TO 2012

Sumrio a
1 Resumo 2 Abstract 3 DOM Model Object Document 3.1 Introduao . . . . . . . . . . . . . . . . . . . . . c 3.2 DOM . . . . . . . . . . . . . . . . . . . . . . . . 3.3 Como o DOM identica um modelo de Objetos 3.4 Origem do Modelo de Objeto de Documentos . 3.5 Interfaces DOM e Implementaoes DOM . . . . c 3.6 Estrutura DOM . . . . . . . . . . . . . . . . . . 3 3 4 4 4 5 5 6 6 6 7 7 7 7 7 8 8

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

4 Qual o DOM? e 4.1 O DOM separado em trs partes diferentes / n e e veis: . . . . . 5 Objetivo 6 Para que Serve? 7 DOM: Operaes co 7.1 Leitura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7.2 Alteraao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . c 7.3 Criaao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . c 1

8 DOM: Hierarquia 9 DHTML - Dynamic Hyper Text Markup Language 9.1 Introduao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . c 9.2 DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Para que serve o HTML Dinmico? a 11 De acordo com a World Wide Web Consortium (W3C): 12 O que necessrio para rodar o DHTML? e a 13 Exemplo 14 Exerc cio 15 Bibliograa

8 8 8 9 10 10 10 11 12 13

Resumo

DHTML a interao entre trs tecnologias diferentes, HTML, CSS e javascript, e ca e atravs de uma interface conhecida como DOM (Document Object Model). e Todos os navegadores hoje possuem boa complacncia aos padres denidos e o para o HTML e para o javascript, de modo que o desenvolvedor pode ter grande segurana dos resultados. c J em relaao ao DOM, preciso entender algo importante. Todos os navea c e gadores hoje oferecem complacncia mais que suciente ao padro do W3C e a para o DOM, mas a maioria, em especial a Microsoft, gosta de extender esse DOM adicionando funcionalidades e recursos proprietrios. De maneira a geral, tudo o que os recursos proprietrios oferecem pode ser feito satisfatoa riamente com o DOM padro. Ou seja, voc no perde nada em abandonar a e a as extenses proprietrias ao DOM, e ganha signicativa compatibilidade. o a Palavras Chave: tecnologia diferentes, navegadores.

Abstract

DHTML is the interaction between three dierent technologies, HTML, CSS and javascript, through an interface known as DOM (Document Object Model). All browsers today have good compliance with the standards dened for the HTML and javascript, so the developer can have a great safety results. As for the DOM, you need to understand something important. All browsers today oer more than enough compliance to the standard W3C DOM, but most, especially Microsoft, to extend the DOM like adding features and functionality owners. In general, all that the owners oer resources can be done satisfactorily with the DOM standard. That is, you have nothing to lose in abandoning proprietary extensions to the DOM, and gain signicant compatibility. Keywords: technology dierent, browsers.
1

Acadmico do Curso de Licenciatura em Computao e ca IFTO - Araguatins

3
3.1

DOM Model Object Document


Introduo ca

Um documento XML quando analisado representado como uma estrutura e hierrquica de arvore na memria. a o Essa estrutura de arvore contm os elementos do documento, seus atribu e tos e contedos. u O XML DOM dene uma caminho para acesso e manipulaao do documento c XML. No sentido de facilitar essas tarefas, o W3C estabeleceu a recomendaao c DOM Document Object Model. No contexto do DOM, documentos XML so representados em uma estrutura de arvore que reete a sua estrutura a lgica hierrquica. o a DOM uma API (Aplication Programming Interface) que dene uma forma e de acesso e manipulaao ` arvore de objetos correspondente ao documento. c a Assim, DOM permite que programas ou scripts acessem e manipulem dinamicamente a estrutura, contedo e estilo de apresentaao de documentos u c XML e HTML. DOM foi proposto para facilitar a computao sobre documentos: um proca cessador DOM recebe um arquivo XML e disponibiliza sua representao ca como uma arvore de objetos para aplicaoes. DOM suporta a manipulao c ca da estrutura e contedo do documento, permitindo que programas possam u adicionar, modicar ou apagar ns da rvore de objetos a ele associada. o a O objetivo de DOM fornecer uma interface de programaao padro que e c a possa ser usada em uma grande variedade de ambientes e aplicaes. co

3.2

DOM

E modelo de objeto de documento para o XML. E uma plataforma de linguagem independente. DOM dene uma norma de deniao para os objetos XMl, e uma norma c no caminho para acesso e manipulao XML. ca 4

O XML DOM uma norma da W3C. e O nome Modelo de Objeto de Documentosfoi escolhido porque um mode elo de objetosno sentido tradicional de desenho orientado a objeto.

3.3

Como o DOM identica um modelo de Objetos

As interfaces e os objetos utilizados na representao e manipulao de um ca ca documento; A semntica destas interfaces e objetos - incluindo-se o comportamento e a atributos; Os relacionamentos e colaboraes entre estas interfaces e os objetos. co

3.4

Origem do Modelo de Objeto de Documentos

O DOM comeou como uma especicao para permitir que scripts em c ca JavaScript e programas em Java fossem portveis entre browsers Web. a O HTML dinmicofoi o antecessor imediato do Modelo de Objeto de Doca umentos e foi inicialmente concebido com uma idia de browsers. e Contudo, o Grupo de Trabalho DOM foi formado na W3C.

Figura 1: Modelo de Objeto de Docmento

3.5

Interfaces DOM e Implementaes DOM co

O DOM especica interfaces que podem ser utilizadas para o gerenciamento de documentos XML. E importante notar que estas interfaces so uma abstraao - muito parea c cida com as classes de base de abstraoesem Java. Elas so um meio de c a especicaao de um caminho para acessar e manipular uma representaao c c interna de um documento. As interfaces no implicam uma implementaao concreta em particular. a c

3.6

Estrutura DOM

Carrega os dados da origem; Separa os diversos tipos de dados elementos, cadeias de caracteres, comentrios, etc; a Verica se o documento vlido; e a Monta uma estrutura que represente o documento; Navega por essa estrutura e acessar cada componente do documento, etc; Os elementos, seus textos, e seus atributos so todos vistos como ns; a o Seu contedo pode ser modicado ou deletado, e novos elementos podem u se criados.

Qual o DOM? e

O DOM um padro W3C (World Wide Web Consortium); e a O DOM dene um padro para aceder aos documentos como XML e HTML: a O W3C Document Object Model (DOM) uma interface de plataforma e e linguagem neutra que permite que programas e scripts dinamicamente acessar e atualizar o contedo, estrutura e estilo de um documento.; u

O DOM dene os objetos e propriedades de todos os elementos do documento, e os mtodos (interface) para acess-los. e a

4.1

O DOM separado em trs partes diferentes / e e n veis:

Core DOM ou Ncleo DOM - modelo padro para qualquer documento u a estruturado; XML DOM - modelo padro para documentos XML; a HTML DOM - modelo padro para documentos HTML a

Objetivo

Oferecer uma interface de programao uniforme, independente de plataforma ca e linguagem, para aplicaoes que manipulam XML. c

Para que Serve?


Criar um novo documento XML Navegar na rvore XML a Modicar, remover ou adicionar ns (elementos, o Atributos, texto, comentrios, PIs, etc.) a

7
7.1

DOM: Operaes co
Leitura

Passo 1: carregar o documento e identicar os tokens Passo 2: identicar elementos e outros ns (pode usar SAX) o Passo 3: montar a arvore (pode ser feito durante o passo 2)

7.2

Alterao ca

Localiza o n de referncia o e Remove, altera, muda posio, cria n antes ou depois. ca o

7.3

Criao ca

Cria raiz; cria elemento raiz; cria elementos lho e atributos; cria NOS de texto; Monta arvore: coloca atributos em elementos, coloca NOS de texto em el ementos, coloca elementos lho em elementos pai, coloca elemento raiz na raiz

DOM: Hierarquia

Figura 2: DOM - Hierrquia a

9
9.1

DHTML - Dynamic Hyper Text Markup Language


Introduo ca

Ao contrrio do que se pensa, DHTML no uma linguagem de programao, a a e ca mas sim um conjunto de tcnicas de programaao que combinam as linguae c gens HTML e JavaScript para tornar o HTML dinmico. Da o nome DHTML a 8

- Dynamic Hyper Text Markup Language. Nos anos 80, com o advento dos computadores pessoais, surgiu uma linguagem de programaao que permitia transportar arquivos grcos no forc a mato texto, e depois eles seriam remontados como grcos para ser exibidos. a E a chamada HTML. Com os avanos tecnolgicos na area da Internet, c o logo foi possivel enviar esses arquivos HTML pela rede, e assim surgiram as Pginas Web. Mas nesse momento o HTML perdia muito em performance, a pois era necessrio enviar a pgina pela internet, para que ela fosse visuala a izada no navegador cliente. A grande desvantagem do HTML sempre foi o fato de ser totalmente esttica, a ou seja, depois de interpretado o codigo e montada a pagina graca, nada poderia acontecer. A primeira mudana nesse aspecto no veio na linguagem, c a mas sim nos navegadores. A partir da segunda geraao de navegadores, c os Links passaram a ser sublinhados, tendo comportamento diferente do restante do texto. Mas isso no estava ao alcance do programador, e sim a pr-programado no interpretador da linguagem. e Os links ativos foram o pontap inicial para uma grande revoluao: se era e c poss trocar a formataao do link em milesimos de segundos no browser, vel c porque no fazer o mesmo com o resto do texto??? Assim surguia os primeiros a esboos da linguagem JavaScript, criada pela Netscape e lanada na verso c c a 2.0 do seu navegador. Anos depois, em um acordo entre a Microsoft e a Netscape, foi criada uma conveno internacional que homologou a linguagem ca JavaScript. Os navegadores Internet Explorer e Netscape, a partir das verses ` o 3.0, passaram a ter suporte a essa linguagem, e assim as paginas HTML gan` haram vida nas telas do browsers. O conceito DHTML surguiu em meados dos anos 90 com o Netscape 3.0, que trazia o reconhecimento de eventos, o que tornava o HTML interativo com o usurio. A Microsoft no cou pra traz e lanou a verso 3.0 do IE, a a c a que tambem trazia a interpretaao de eventos, e ainda adicionava um novo c conceito ao DHTML, chamado CSS - Cascating StyleSheet que permitia armazenar em um trecho de script separado do HTML as regras de formatao ca e que passou a ser usado para congurar a atividade do JavaScritp no que se refere a mudana dinamica de formataao. c c

9.2

DHTML

DHTML no uma linguagem; a e 9

DHTML um termo que descreve a arte de fazer pginas web dinmicas e a a e interativas; DHTML a arte de combinar HTML, JavaScript, DOM e CSS. e

10

Para que serve o HTML Dinmico? a

O DHTML pode ser usado para criar menus avanados, painis de texc e todinmicos, movimentar os elementos sobre a pgina, etc. a a As aplicaes mais uteis so aquelas que contribuem para dar mais ecincia co a e a forma como um website transmite a informaao que contm. Muitas delas ` c e sobastante elaboradas e no podem ser ilustradas de forma simples. a a

11

De acordo com a World Wide Web Consortium (W3C):

Dynamic HTML um termo usado por alguns fornecedores para descrever a e combinao de HTML, folhas de estilo e scripts que permite que documentos ca sejam animados.

12

O que necessrio para rodar o DHTML? e a

O Javascript, por necessitar de um interpretador, impe algumas restries o co ao uso do DHTML: O navegador Internet Explorer at sua verso 2.0 no reconhece JavaScript; e a a O navegador Netscape na verso 2.0 no reconhece eventos, mas pera a mite efeitos de linha de tempo (entre outros usos do JavaScript sem relaao com DHTML); c O navegador Netscape a partir da verso 3.0 reconhece JavaScript 1.0 ` a Os demais navegadores reconhecem JavaScript, mas podem apresentar comportamento distinto do obtido no IE e no Netscape Como a linguagem est em constante desenvolvimento, h determinadas funa a cionalidades que no apresentam o mesmo comportamento em todos os navea gadores, como tambm h comandos e funes que no so reconhecidos em e a co a a 10

algumas verses, por serem mais recentes que essas funes. o co Cabe ao programador testar seus scripts em diversos navegadores, e expor notas de verso, ou ento tratar o cdigo para s executar algo se o navega a o o ador suportar. Uma boa soluao no caso de um navegador no suportar seus c a scripts, redirecionar o browser para uma pgina sem scripts. e a Alm do JavaScript, o CSS tambm apresenta problemas de no reconhecie e a mento no Nestcape e no IE em verses inferiores ` 3.0. o a

13

Exemplo

A programaao em DHTML permite uma maior interaao entre o usurio e c c a a pgina web uma vez que pode-se reagir rapidamente a uma determinada a interao. ca Vamos ao cdigo de nosso exemplo. o

Figura 3: Cdigo o

11

14

Exerc cio

1. Crie comandos que ampliem e reduzam o tamanho de um determinado elemento de forma gradativa (zoom).

2. Cria uma pgina com temas que mude o visual ao passar o mouse. a

3. Crie um cdigo que aparea uma lmpada, e ao clicar na mesma, ela o c a acenda e com um novo clique ela se apague.

4. Seguindo o cdigo acima, incremente-o, inserindo um interruptor ao o mesmo, para acender e apagar a lmpada. a

12

15

Bibliograa

Referncias e
[1] http://www.cefetrn.br/ placido/disciplina/tecnologiaWeb/material/DOM.pdf [2] Cavalcante.us/Concursos/Analista-de-Sistemas/.../xml100-7.pdf [3] http://www.di.ubi.pt/ [4] http://www.macoratti.net/dhtml-1.htm

13

Você também pode gostar