javascript - aula01

ELFS, 2003 1

Desenvolvimento de Aplicaes para a Internet

Edson Luiz Frana SenneProfessor Adjunto - Departamento de Matemtica

(www.feg.unesp.br/~elfsenne)

! Contedo:

1. Conceitos Bsicos da Linguagem XHTML2. Linguagem XHTML3. Formulrios e Folhas de Estilo em XHTML4. Linguagem JavaScript5. Objetos na Programao JavaScript6. Aplicaes Web com Delphi7. Aplicaes Web com Acesso a Bancos de Dados8. Aplicaes Web com Formulrios XHTML9. Fundamentos da Linguagem XML10. Documentos XML com JavaScript

ELFS, 2003 2

Desenvolvimento de Aplicaes para a Internet

! Material do curso disponvel a partir do endereo:http://www.feg.unesp.br/~elfsenne/IntraFEG/LP/DAI

! Avaliao:" Duas provas ( feitas em laboratrio e com consulta ao material )" NA = (P1 + 2*P2)/3" Poder ser considerada tambm a possibilidade de um trabalho para

melhorar a nota. Neste caso, a nota final ser a mdia aritmtica entre NA e a nota do trabalho.

! Referncias Bibliogrficas:" Boumphrey, F.; Greer, C.; Raggett, D.; Ragget, J.; Schnitzenbaumer, S.;

Wugofski, T. Beginning XHTML, Wrox." Wilton, P. Beginning JavaScript. Wrox, 2000." Oliveira, A.G. Programando com Delphi 4 para Internet. Advanced, 1999." Holzner, S. Desvendando XML. Campus, 2001.

ELFS, 2003 3

1. Conceitos Bsicos da Linguagem XHTML

! Neste curso, estaremos preocupados com uma parte da Internet conhecida como Web.

! Na Web, quando um usurio aponta um navegador para uma pgina na Internet, primeiramente o navegador empacota os dados referentes requisio do usurio usando o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol). Em seguida, utiliza um segundo protocolo: HTTP(HyperText Transfer Protocol) para transferir a informao do computador servidor (que contm a informao desejada) para o computador cliente (do usurio).

! Desde 1996, um consrcio W3C (World Wide Web Consortium) zela pelo desenvolvimento da Web, estabelecendo padronizaes, protocolos, linguagens, para que a Web possa ser plenamente utilizada por todos (http://www.w3.org).

! Uma pgina Web um texto escrito na linguagem HTML (HyperText Markup Language).

! A mensagem enviada de um navegador para um servidor Web denomina-se solicitao HTTP. Ao receber esta mensagem o servidor ir empacotar a informao HTML referente solicitao (usando o protocolo TCP/IP), enderea os pacotes (usando o protocolo HTTP) e envia uma mensagem, denominada resposta HTTP, de volta ao navegador.

ELFS, 2003 4

Conceitos Bsicos da Linguagem XHTML

! Um documento HTML composto de texto a ser exibido e marcadores (tags). Por exemplo:

! Note que existem marcadores de abertura (como , , ) e marcadores de fechamento (como , , ). Qualquer documento HTML deve estar contido entre os marcadores e . Um documento HTML pode ser dividido em duas partes: cabealho (contido entre e ) e corpo (contido entre e ).

Um documento HTML

Demostrao de um documento HTML simplesEste um pargrafo centralizado.Este um segundo pargrafo, contendo um texto em negrito e um texto em itlico. Este pargrafo demonstra o que ocorre quando o texto maior do que uma linha: ele simplesmente continua na linha seguinte.Prof. Senne [email protected]

aula01_01.html

ELFS, 2003 5


! Um marcador pode possuir atributos. Por exemplo, o marcador que inicia um pargrafo pode ter o atributo align (que indica se o texto est alinhado esquerda, direita ou centralizado). Note que o marcador de fechamento , que encerra um pargrafo, opcional em HTML.

! Quando um navegador no consegue entender um comando HTML, ele simplesmente desconsidera este comando. Isto permite que o documento HTML seja exibido mesmo contendo algumas linhas incompreensveis para o navegador. Por exemplo, verifique o que acontece com o comando:

! A linguagem HTML uma dentre diversas linguagens de marcadores criadas a partir de uma meta-linguagem denominada SGML (Standard Generalized Markup Language). A partir da linguagem SGML possvel construir um conjunto de regras conhecidas como DTD (Document Type Definition) que definem uma linguagem de marcao.

! A linguagem HTML apresenta alguns problemas:" a possibilidade de haver documentos mal-escritos, ou seja, contendo

marcadores no padronizados. A capacidade de interpretar pginas mal escritas torna os navegadores mais complexos, exigindo mais recursos (que podem no existir em equipamentos como celulares e agendas eletrnicas).

Este um pargrafo centralizado.

ELFS, 2003 6


" documentos HTML contm uma grande quantidade de marcadores estruturais (como, por exemplo, e ) e estilsticos (como, por exemplo, e ) do que marcadores descritivos (como, por exemplo, e ), o que dificulta a indexao automtica (feita por robs de busca) de documentos.

! A linguagem XML pretende resolver estes problemas. A linguagem XML compatvel com SGML mas prioriza os marcadores descritivos (marcadores que indicam o que um elemento e no como ele deve ser apresentado). Documentos XML (conhecidos como documentos bem-formados) devem obedecer rigidamente as seguintes regras:" Todos os elementos devem ter marcadores de abertura e fechamento do

mesmo tipo (por exemplo: e )." Marcadores sem contedo (por exemplo, , que representa uma linha

horizontal) devem usar um formato especial: ." Todos os elementos devem ser aninhados corretamente (por exemplo:

contedo)." Os documentos devem possuir estrutura de rvore.

ELFS, 2003 7


! Exemplo: Um documento XML simples

Oi XMLOi XHTMLAdeus SGML

ELF Senne21/07/2003

Devido extenso .xml, o navegador apresenta o documento, simplesmente, como uma estrutura de rvore (notar a presena dos smbolos e +). O smbolo + esconde detalhes deste n da rvore. Note que docinfo um marcador vazio, mas com atributos.

aula01_02.xml

ELFS, 2003 8


! A linguagem XHTML utiliza o vocabulrio da linguagem HTML, mas a sintaxe da linguagem XML. Um documento XHTML, portanto, um documento bem-formado e ser visualizado sempre da mesma maneira, independentemente do navegador.

! Algumas caractersticas importantes da linguagem XHTML:" a linguagem diferencia letras maisculas de minsculas: os marcadores

devem ser escritos em letras minsculas." os marcadores e no podem ser omitidos." o primeiro elemento do marcador deve ser o marcador ." os valores dos atributos devem ser sempre escritos entre aspas.

Estruturao de documentos XHTML

! O documento pode conter as seguintes partes opcionais:" Declarao de verso: torna-se obrigatria se o valor do atributo

encoding (conjunto de caracteres utilizado no documento) no for um dos valores padro (UTF-4 ou UTF-8). Exemplo:

ELFS, 2003 9


" Tipo de documento: contm a URL (Universal Resource Locator) da DTD a ser utilizada para validar o documento (se necessrio). Exemplo:

! Partes obrigatrias de um documento XHTML:" Cabealho: fornece informaes sobre o documento. Pode conter:

# (ttulo apresentado na barra do navegador)# (informao sobre o contedo do documento)# (informao sobre a ligao com outro documento)# (informao sobre folhas de estilo)# e (cdigo que no deve ser exibido como parte do

documento)# (endereo do documento)

" Corpo: parte do documento a ser visualizada. Pode conter:# Pargrafos (normalmente vai existir o espao de uma linha

antes e depois de cada pargrafo)# Diviso (para ser utilizado com folhas de estilo)

ELFS, 2003 10


# Ttulos (com # podendo ser um inteiro de 1 a 6; o tamanho das fontes varia de 24 a 10 pontos)

# Citaes (para apresentar citaes dentro do documento, com espaamento vertical de uma linha antes e depois, e espaamento horizontal esquerda e direita)

# Preservar texto (para preservar o texto exatamente como est contido no documento, inclusive os espaos em branco)

! Exemplo:

Exemplo de documento XHTML

Um primeiro pargrafo.Isto uma diviso.Uma segunda diviso.E uma terceira. Note que no existe espao vertical

entre as divises.Um segundo pargrafo. Para apresentar uma listagem de

programa importante preservar os espaos. Por exemplo:

aula01_03.htm

ELFS, 2003 11


! Exerccio: Verificar o documento acima em um navegador.

if (a < b) {a = b*b;printf("valor de a = %d\n", a);

}

Observe que um texto preservado normalmente apresentado

com fonte Courier."Isto uma citao. Note os espaamentos horizontal

e vertical. Note tambm que uma citao deve estarcontida entre aspas no documento"

Ttulo de nvel 1Ttulo de nvel 1Ttulo de nvel 1Ttulo de nvel 1Ttulo de nvel 1Ttulo de nvel 1

ELFS, 2003 12


! Marcadores descritivos bsicos" Abreviao " Acrnimo " Citao em itlico " Cdigo " Definio " nfase " Exemplo " Negrito " Varivel

! Estes marcadores descritivos, mesmo quando no possuem efeito visual algum (em certos navegadores) so importantes pois podem ser usados por robs de busca para interpretar partes do documento.

! Marcadores de estilo bsicos" Grande " Negrito " Itlico " Sublinhado

ELFS, 2003 13


" Pequeno " Riscado " Subscrito " Sobrescrito " Teclado " Quebra de linha " Linha horizontal

! O estilo Teclado ir exibir o contedo em fonte Courier, sem espaamento horizontal antes e depois. Note a existncia de um espao em branco antes da barra / nos dois ltimos marcadores de estilo.

! Listas no numeradas: criadas entre os marcadores e . Cada elemento da lista deve estar contido entre os marcadores e . O smbolo usado antes de cada elemento da lista pode ser definido com o atributo type do marcador . Os tipos de smbolos usados em listas no numeradas podem ser: circle (crculo vazio), disc (crculo cheio) ou square (quadrado). O valor padro disc.

ELFS, 2003 14


Exerccio: Escrever o documento XHTML correspondente pgina exibida ao lado. Usar os seguintes marcadores:

aula01_04.htm

ELFS, 2003 15


! Listas numeradas: criadas entre os marcadores e . Como no caso das listas no-numeradas, cada elemento da lista deve estar contido entre os marcadores e . O tipo de numerao dos elementos da lista pode ser definido com o atributo type do marcador . Os valores possveis so: 1 (arbico), a ou A (alfabtico minsculo ou maisculo) e i ou I (romano minsculo ou maisculo). Exemplo:

Exemplo de Lista Numerada

Lista numerada em dois nveis

Primeiro item do nvel 1

Primeiro item do nvel 2Segundo item do nvel 2

Segundo item do nvel 1

aula01_05.htm

ELFS, 2003 16


! Listas de definio: criadas entre os marcadores e . Cada termo a ser definido deve estar contido entre os marcadores e e sua definio deve estar contida entre os marcadores e . Exemplo:

Uma Lista de Definio

ElementoUm elemento compreende um

marcador e um contedo.Atributo de elementoUm atributo uma propriedade do

marcador de um elemento.Valor de atributoCorresponde a um valor possvel

de um atributo de elemento.

aula01_06.htm

ELFS, 2003 17


! Atributos: propriedades de um elemento. Pelas regras de XML, devem ser colocados em marcadores de abertura. Podem ser divididos nos seguintes grupos:" Atributos Universais: podem ser utilizados por qualquer marcador. So:

# id: identificar de maneira unvoca cada elemento do documento. O valor do atributo deve comear com uma letra ou por um caractere de sublinhado ( _ ) e pode conter qualquer caractere alfanumrico;

# class: especifica a classe de um elemento;# title: especifica o ttulo de um elemento, a partir do qual o

elemento pode ser referenciado no documento;# style: permite adicionar informaes de estilo a um marcador. Em

documentos XHTML deve-se dar preferncia s folhas de estilo, que deixam as informaes de estilo separadas da estrutura do documento. A forma geral deste atributo :

$ Algumas propriedades de folha de estilos: color (cor da fonte), background-color (cor de fundo), font-size (tamanho da fonte), font-family (nome da fonte, escrito entre apstrofos).

style=propriedade de folha de estilos:valor da propriedade;propriedade de folha de estilos:valor da propriedade;...

ELFS, 2003 18


! Exemplo:

Usos do Atributo style

Primeira linha.

Segunda linha.

Terceira linha.

aula01_07.htm

Observe que os valores do atributo para um marcador valem apenas dentro deste marcador, ou seja, at que seja encontrado o marcador de fechamento correspondente.

ELFS, 2003 19


" Atributos de Apresentao: so atributos introduzidos em verses anteriores de HTML e que atualmente, na grande maioria, fazem parte das folhas de estilo. Um documento bem-formado deve conter folhas de estilo. Assim, documentos XHTML devem evitar a utilizao dos atributos de apresentao apresentados a seguir:# align: alinhamento do texto; pode assumir os valores left, right

e center.# apresentao de :

! background: URL de uma imagem para fundo de pgina! bgcolor: cor do fundo da pgina! text: cor do texto da pgina! link: cor de hiperlinks antes de serem usados! vlink: cor de hiperlinks j usados! alink: cor de hiperlinks enquanto esto sendo usados

# apresentao de listas:! type: tipo de marcador ou forma de numerao

# apresentao de :! align: posio da linha (left, right, center)! noshade: linha sem sombra! size: espessura da linha

ELFS, 2003 20


! width: porcentagem que indica a largura da linha em relao pgina

# apresentao do documento:! font: define as caractersticas do texto com base nos atributos

size (tamanho da fonte; inteiro de 1 a 5; padro 3), color (cor da fonte) e face (nome da fonte)

! basefont: estabelece os valores padres para todo o documento onde font no tenha sido usado especificamente.

Ligaes Hipertexto e Objetos Embutidos

! Ligao: texto ou imagem que quando clicado, conduz o navegador a um local diferente no mesmo documento ou a um documento diferente. O elemento (ncora) utilizado em XHTML para conter informaes sobre ligaes hipertexto. O atributo href do marcador indica o local de destino do navegador. Exemplos:

Pgina da FEGDa FEG!Pgina presente no mesmo diretrio.Pgina de outro diretrio.

aula01_08.htm

ELFS, 2003 21


! O marcador ncora pode ser tambm o destino de uma ligao. Neste caso deve-se usar o marcador para etiquetar a ncora. Exemplos:

! Imagens tambm podem ser usadas para ligaes. Exemplo:

! Ligaes tambm podem ser utilizadas para transferncia de arquivos (usando o protocolo FTP) ou para acessar um cliente de e-mail para enviar uma mensagem. Exemplos:

Pgina da FEG

Para acessar o link para a pgina da FEG, clique aqui.Ou aqui.

aula01_09.htm

Clique na imagem, para acessar a pgina da FEG

aula01_10.htm

Arquivos do CNPqE-mail para Senne

aula01_11.htm

javascript - aula01

Documents