JavaScript - Aula01

Desenvolvimento de Aplicaes para a Internet
Edson Luiz Frana Senne

Professor Adjunto - Departamento de Matemtica
(www.feg.unesp.br/~elfsenne)
!
Contedo:
1. Conceitos Bsicos da Linguagem XHTML
2. Linguagem XHTML
3. Formulrios e Folhas de Estilo em XHTML
4. Linguagem JavaScript
5. Objetos na Programao JavaScript
6. Aplicaes Web com Delphi
7. Aplicaes Web com Acesso a Bancos de Dados
8. Aplicaes Web com Formulrios XHTML
9. Fundamentos da Linguagem XML
10. Documentos XML com JavaScript
ELFS, 2003
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
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
Conceitos Bsicos da Linguagem XHTML

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

Por exemplo:
aula01_01.html
<html>
<head>
<title> Um documento HTML </title>
</head>
<body>
<h1>Demostrao de um documento HTML simples</h1>
<p align="center">Este um pargrafo centralizado.
<p>Este um segundo pargrafo, contendo um texto em <b>negrito</b> e
um texto em <i>itlico</i>. Este pargrafo demonstra o que ocorre
quando o texto maior do que uma linha: ele simplesmente continua na
linha seguinte.
<address>Prof. Senne elfsenne@feg.unesp.br</address>
</body>
</html>
Note que existem marcadores de abertura (como <html>, <h1>, <b>) e

marcadores de fechamento (como </html>, </h1>, </b>). Qualquer
documento HTML deve estar contido entre os marcadores <html> e </html>.
Um documento HTML pode ser dividido em duas partes: cabealho (contido
entre <head> e </head>) e corpo (contido entre <body> e </body>).
ELFS, 2003

!
Um marcador pode possuir atributos. Por exemplo, o marcador <p> 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
</p>, 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:
<q align="center">Este um pargrafo centralizado.
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).
ELFS, 2003

"
documentos HTML contm uma grande quantidade de marcadores

estruturais (como, por exemplo, <p> e <H1>) e estilsticos (como, por
exemplo, <b> e <i>) do que marcadores descritivos (como, por exemplo,
<title> e <address>), 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: <p> e </p>).
"
Marcadores sem contedo (por exemplo, <hr>, que representa uma linha
horizontal) devem usar um formato especial: <hr/>.
"
Todos os elementos devem ser aninhados corretamente (por exemplo:
<m1><m2>contedo</m2></m1>).
"
Os documentos devem possuir estrutura de rvore.
ELFS, 2003

!
Exemplo:
aula01_02.xml
<firstdoc>
<subject>Um documento XML simples</subject>
<docinfo date="21/07/2003" id = "Aula01_02.xml"/>
<greeting>Oi XML</greeting>
<greeting>Oi XHTML</greeting>
<farewell>Adeus SGML</farewell>
<footer>
<author>ELF Senne</author>
<date>21/07/2003</date>
</footer>
</firstdoc>
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.
ELFS, 2003

!
A linguagem XHTML utiliza o vocabulrio da linguagem HTML, mas a sintaxe

da linguagem XML. Um documento XHTML, portanto, um documento bemformado 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 <head> e <body> no podem ser omitidos.
"
o primeiro elemento do marcador <head> deve ser o marcador <title>.
"
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:
<?xml version=1.0 encoding=iso-8859-1?>
ELFS, 2003

"
Tipo de documento: contm a URL (Universal Resource Locator) da DTD

a ser utilizada para validar o documento (se necessrio). Exemplo:
<!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
Partes obrigatrias de um documento XHTML:

"
Cabealho: fornece informaes sobre o documento. Pode conter:
#
<title> (ttulo apresentado na barra do navegador)
#
<meta> (informao sobre o contedo do documento)
#
<link> (informao sobre a ligao com outro documento)
#
<style> (informao sobre folhas de estilo)
#
<object> e <script> (cdigo que no deve ser exibido como parte do
documento)
#
<base> (endereo do documento)
"
Corpo: parte do documento a ser visualizada. Pode conter:
#
Pargrafos <p></p> (normalmente vai existir o espao de uma linha
antes e depois de cada pargrafo)
#
Diviso <div></div> (para ser utilizado com folhas de estilo)
ELFS, 2003

Ttulos <h#></h#> (com # podendo ser um inteiro de 1 a 6; o
tamanho das fontes varia de 24 a 10 pontos)
#
Citaes <blockquote></blockquote> (para apresentar citaes
dentro do documento, com espaamento vertical de uma linha antes
e depois, e espaamento horizontal esquerda e direita)
#
Preservar texto <pre></pre> (para preservar o texto exatamente
como est contido no documento, inclusive os espaos em branco)
Exemplo:
#
aula01_03.htm
<html>
<head>
<title>Exemplo de documento XHTML</title>
</head>
<body>
<p>Um primeiro pargrafo.</p>
<div>Isto uma diviso.</div>
<div>Uma segunda diviso.</div>
<div>E uma terceira. Note que no existe espao vertical
entre as divises.</div>
<p>Um segundo pargrafo. Para apresentar uma listagem de
programa importante preservar os espaos. Por exemplo:</p>
ELFS, 2003
10

<pre>
if (a < b)
{
a = b*b;
printf("valor de a = %d\n", a);
}
</pre>
<p>Observe que um texto preservado normalmente apresentado
com fonte Courier.</p>
<blockquote>"Isto uma citao. Note os espaamentos horizontal
e vertical. Note tambm que uma citao deve estar
contida entre aspas no documento"</blockquote>
<h1>Ttulo de nvel 1</h1>
</body>
</html>
Exerccio: Verificar o documento acima em um navegador.
ELFS, 2003
11

!
Marcadores descritivos bsicos

"
Abreviao
<abbr></abbr>
"
Acrnimo
<acronym></acronym>
"
Citao em itlico <cite></cite>
"
Cdigo
<code></code>
"
Definio
<dfn></dfn>
"
nfase
<em></em>
"
Exemplo
<samp></samp>
"
Negrito
<strong></strong>
"
Varivel
<var></var>
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
<big></big>
"
Negrito
<b></b>
"
Itlico
<i></i>
"
Sublinhado
<u></u>
ELFS, 2003
12

"
"
"
"
"
"
"
Pequeno
Riscado
Subscrito
Sobrescrito
Teclado
Quebra de linha
Linha horizontal
<small></small>
<strike></strike>
<sub></sub>
<sup></sup>
<kbd></kbd>
<br />
<hr />
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 <ul> e </ul>. Cada

elemento da lista deve estar contido entre os marcadores <li> e </li>. O
smbolo usado antes de cada elemento da lista pode ser definido com o
atributo type do marcador <ul>. 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
13

aula01_04.htm
Exerccio: Escrever o
documento XHTML
correspondente pgina
exibida ao lado. Usar os
seguintes marcadores:
<html>
<head>
<title>
<body>
<h1>
<p>
<strong>
<u>
ELFS, 2003
<sup>
<div>
<ul>
<li>
<i>
<hr />
<big>
<br />
<cite>
14

!
Listas numeradas: criadas entre os marcadores <ol> e </ol>. Como no caso

das listas no-numeradas, cada elemento da lista deve estar contido entre os
marcadores <li> e </li>. O tipo de numerao dos elementos da lista pode
ser definido com o atributo type do marcador <ol>. Os valores possveis so:
1 (arbico), a ou A (alfabtico minsculo ou maisculo) e i ou I (romano
minsculo ou maisculo). Exemplo:
<html>
<head>
<title>Exemplo de Lista Numerada</title>
</head>
<body>
<p>Lista numerada em dois nveis</p>
<ol>
<li>Primeiro item do nvel 1</li>
<ol type="a">
<li>Primeiro item do nvel 2</li>
<li>Segundo item do nvel 2</li>
</ol>
<li>Segundo item do nvel 1</li>
</ol>
</body>
aula01_05.htm
</html>
ELFS, 2003
15

!
Listas de definio: criadas entre os marcadores <dl> e </dl>. Cada termo a

ser definido deve estar contido entre os marcadores <dt> e </dt> e sua
definio deve estar contida entre os marcadores <dd> e </dd>. Exemplo:
aula01_06.htm
<html>
<head>
<title>Uma Lista de Definio</title>
</head>
<body>
<dl>
<dt>Elemento</dt>
<dd>Um elemento compreende um
marcador e um contedo.</dd>
<dt>Atributo de elemento</dt>
<dd>Um atributo uma propriedade do
marcador de um elemento.</dd>
<dt>Valor de atributo</dt>
<dd>Corresponde a um valor possvel
de um atributo de elemento.</dd>
</dl>
</body>
</html>
ELFS, 2003
16

!
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 :
style=propriedade de folha de estilos:valor da propriedade;
propriedade de folha de estilos:valor da propriedade;
...
$
ELFS, 2003
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).
17

!
Exemplo:
aula01_07.htm
<html>
<head>
<title>Usos do Atributo style</title>
</head>
<body style="background-color:yellow">
<div style="color:blue; font-size:16pt;
font-family:arial">
Primeira linha.</div>
<div style="color:red">Segunda linha.</div>
<div style="font-family:'courier new'">
Terceira linha.</div>
</body>
</html>
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
18

"
ELFS, 2003
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 <body>:
! 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 <hr />:
! align: posio da linha (left, right, center)
! noshade: linha sem sombra
! size: espessura da linha
19

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
<a> (ncora) utilizado em XHTML para conter informaes sobre ligaes
hipertexto. O atributo href do marcador <a> indica o local de destino do
navegador. Exemplos:
aula01_08.htm
<a href="http://www.feg.unesp.br">Pgina da FEG</a>
<h1><a href="http://www.feg.unesp.br">Da FEG!</a></h1>
<a href="aula01_06.htm">Pgina presente no mesmo diretrio.</a>
<p><a href="../aula02/aula02_01.htm">Pgina de outro diretrio.</a></p>
ELFS, 2003
20

!
O marcador ncora pode ser tambm o destino de uma ligao. Neste caso
deve-se usar o marcador <id> para etiquetar a ncora. Exemplos:
<a id="ancora1" href="http://www.feg.unesp.br">
Pgina da FEG</a>
<br /><br /><br /><br /><br /><br /><br />
<p>Para acessar o link para a pgina da FEG,
<a href="aula01_09.htm#ancora1">clique aqui.</a></p>
<p><a href="#ancora1">Ou aqui.</a></p>
Imagens tambm podem ser usadas para ligaes. Exemplo:

<p>Clique na imagem, para acessar a pgina da FEG</p>
<a href="http://www.feg.unesp.br">
<img src="feg.jpg"></a>
aula01_09.htm
aula01_10.htm
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:
aula01_11.htm
<p><a href="ftp://ftp.cnpq.br/">Arquivos do CNPq</a></p>

<a href="mailto:elfsenne@feg.unesp.br">E-mail para Senne</a>
ELFS, 2003
21

JavaScript - Aula01

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JavaScript - Aula01

Transféré par

Droits d'auteur :

Formats disponibles

Desenvolvimento de Aplicaes para a Internet

Edson Luiz Frana Senne

Desenvolvimento de Aplicaes para a Internet

Material do curso disponvel a partir do endereo:

1. Conceitos Bsicos da Linguagem XHTML

Neste curso, estaremos preocupados com uma parte da Internet conhecida

Conceitos Bsicos da Linguagem XHTML

Um documento HTML composto de texto a ser exibido e marcadores (tags).

Note que existem marcadores de abertura (como <html>, <h1>, <b>) e

Conceitos Bsicos da Linguagem XHTML

A linguagem HTML uma dentre diversas linguagens de marcadores criadas a

Conceitos Bsicos da Linguagem XHTML

documentos HTML contm uma grande quantidade de marcadores

A linguagem XML pretende resolver estes problemas. A linguagem XML

Conceitos Bsicos da Linguagem XHTML

Devido extenso .xml, o

Conceitos Bsicos da Linguagem XHTML

A linguagem XHTML utiliza o vocabulrio da linguagem HTML, mas a sintaxe

Estruturao de documentos XHTML

O documento pode conter as seguintes partes opcionais:

Conceitos Bsicos da Linguagem XHTML

Tipo de documento: contm a URL (Universal Resource Locator) da DTD

Partes obrigatrias de um documento XHTML:

Conceitos Bsicos da Linguagem XHTML

Conceitos Bsicos da Linguagem XHTML

Exerccio: Verificar o documento acima em um navegador.

Conceitos Bsicos da Linguagem XHTML

Marcadores descritivos bsicos

Conceitos Bsicos da Linguagem XHTML

O estilo Teclado ir exibir o contedo em fonte Courier, sem espaamento

Listas no numeradas: criadas entre os marcadores <ul> e </ul>. Cada

Conceitos Bsicos da Linguagem XHTML

Conceitos Bsicos da Linguagem XHTML

Listas numeradas: criadas entre os marcadores <ol> e </ol>. Como no caso

Conceitos Bsicos da Linguagem XHTML

Listas de definio: criadas entre os marcadores <dl> e </dl>. Cada termo a

Conceitos Bsicos da Linguagem XHTML

Atributos: propriedades de um elemento. Pelas regras de XML, devem ser

Algumas propriedades de folha de estilos: color (cor da fonte),

Conceitos Bsicos da Linguagem XHTML

Observe que os valores do atributo para um

Conceitos Bsicos da Linguagem XHTML

Atributos de Apresentao: so atributos introduzidos em verses

Conceitos Bsicos da Linguagem XHTML

Ligaes Hipertexto e Objetos Embutidos

Ligao: texto ou imagem que quando clicado, conduz o navegador a um local

Conceitos Bsicos da Linguagem XHTML

Imagens tambm podem ser usadas para ligaes. Exemplo:

Ligaes tambm podem ser utilizadas para transferncia de arquivos (usando

<p><a href="ftp://ftp.cnpq.br/">Arquivos do CNPq</a></p>

Vous aimerez peut-être aussi