JavaScript - Aula03

7/24/2019 JavaScript - Aula03

1/29

ELFS, 2003 52

3. Formulrios e Folhas de Estilo em XHTML

! Formulrios introduzem em pginas XHTML a possibilidade de interao comusurio. A informao introduzida em um formulrio pode ser submetida paratratamento por um servidor Web ou ser tratada diretamente no lado clientepor uma linguagem descript , como JavaScript.

! O primeiro padro para tratamento de informao pelo lado servidor foi oCGI(Common Gateway Interface ), para servidores baseados em Unix. Emboraqualquer linguagem possa ser usada para escrever programas CGI, a maisutilizada a linguagemPerl(http://www.perl.com/).

! Atualmente, as linguagens ASP( Active Server Pages ) e JSP(Java ServerPages ) e PHPpermitem que programas sejam includos em pginas de forma

similar a scripts. A linguagem ASP suportada pelo servidor IIS (InternetInformation Server ), enquanto JSP e PHP so suportadas pelos servidores IISe Apache.

! Para incluir um formulrio em uma pgina XHTML devem ser usados osmarcadores e dentro do elemento . O elemento pode ter os seguintes atributos:

" action : define a URL que ir receber os dados do formulrio.Normalmente a URL ser o endereo de uma pgina ou de um script, masno precisa, necessariamente, usar o protocolo HTTP. Por exemplo:


2/29

ELFS, 2003 53

Formulrios e Folhas de Estilo em XHTML

" method : define o mtodo usado para envio do formulrio; valorespossveis: GET ou POST." name : nome do formulrio, para ser referenciado em outras partes do

documento (por exemplo:scripts )" target : nome do frame onde os dados devem ser processados" enctype : define o mecanismo utilizado para codificar os dados a seremenviados.

Submisso de Formulrios! Normalmente, um formulrio contm um boto do tiposubmit para o envio

dos dados do formulrio ao servidor. Cada dado a ser enviado da forma:nome=valor , onde nome identifica o componente do formulrio (uma caixade texto, um boto de rdio, etc) evalor corresponde ao valor atribudo aocomponente (o contedo de uma caixa de texto, o valor de um boto derdio, etc). Para transmitir mais de um valor utilizado o smbolo & entrecada par (nome, valor). Espaos em branco so codificados como +. Oscaracteres (exceto: @ _ . *) so codificados como seu valor hexadecimalprecedido do smbolo % (por exemplo: ! = %21).

! Existem duas maneiras de enviar dados ao servidor:" Omtodo GET: os dados codificados so adicionados ao final da URL e

enviados ao servidor.


3/29

ELFS, 2003 54


" Omtodo POST: os dados codificados so enviados juntamente com ocabealho HTTP da pgina.! O mtodo POST prefervel em relao ao mtodo GET pelas razes:

" POST pode tratar uma quantidade ilimitada de informao, enquanto GETest limitado ao tamanho mximo de uma URL

" GET menos seguro, pois como os dados so enviados junto com a URL,os dados so visveis na barra de endereo do navegador! O mtodo GET, no entanto, permite reenviar os dados de um formulrio

armazenados nocache do navegador (pois os dados fazem parte da URL).Exemplo:

Formulrio XHTML

Digite seu nome:

aula03_01.htm


4/29

ELFS, 2003 55


Exerccio: Altere o valor do atributo action do formulrio para:http://www.wrox.com/Consumer/Errata/3439/post-echo.asp

e veja a resposta do servidor.Controles em Formulrios! Os elementos permitem que as informaes possam ser fornecidasde diversas maneiras. Os diversos tipos associados ao elemento so

conhecidos comocontroles de formulrios. Os controles de formulrios podemusar os seguintes atributos:

" name : define o nome do controle." value : estabelece o valor a ser enviado ao servidor; para um boto,corresponde ao texto exibido na face do boto." disabled : permite desabilitar um controle (disabled=disabled ).

! O elemento pode assumir os seguintes tipos:text , password ,file , submit , reset , button , image , checkbox , radio , hidden .

Controle do tipo texto! Controles do tipo texto permitem que o usurio digite um texto no formulrio.

Um controle do tipo texto estabelecido com o elemento com oatributotype assumindo um dos seguintes valores:

" text : uma caixa de texto simples." password : o texto digitado no mostrado.


5/29

ELFS, 2003 56


" file : inroduz no formulrio uma caixa de texto (onde deve-se digitar onome de um arquivo) e um botoBrowse com cdigo embutido, quepode ser usado para localizar o arquivo.

! Controles do tipo texto podem ter os seguintes atributos:" size : tamanho da caixa (size="n" )" maxlength : nmero mximo de caracteres que a caixa pode conter(maxlength="n" )" readonly : o contedo da caixa s pode ser lido, mas no modificado

(readonly=readonly" )

Exemplo:

Formulrio XHTML

Controles de Texto

Digite seu login:

aula03_02.htm


6/29

ELFS, 2003 57


Controle do tipo boto! Pode assumir os seguintes tipos (valor do atributotype ):

" submit : permite transmitir todos os pares (nome, valor) ao servidor" reset : permite que todos os controles assumam seus valores de

definio (ou um valor em branco, se no houver valor de definio)"

button : um boto comum (o atributovalue define o texto da face);no envia nada ao servidor (para ser til deve ser usado comscripts )" image : deve ter os atributossrc e alt ; ao ser clicado, envia ao servidor

todos os pares (nome, valor) juntamente com a coordenada do pontoonde houve o clique na imagem.

Digite sua senha:Selecione um arquivo:


7/29

ELFS, 2003 58


Exerccio:Reproduzir a pgina ao lado.Controle do tipo boto de rdio! Pode ser dos seguintes tipos:

" checkbox : caixa de seleo; oatributochecked=checked podeser usado para que a caixa de seleoaparea selecionada inicialmente; emum formulrio vrios elementoscheckbox podem ter o mesmo nomee, neste caso, todas as caixasselecionadas sero enviadas aoservidor.

" radio : diferentemente dos elementoscheckbox , se diversos elementosradio tiverem o mesmo nome esteselementos sero mutuamenteexclusivos, ou seja, somente um par(nome, valor) ser enviado ao servidor.

Exerccio: Reproduzir a pgina ao lado.

aula03_03.htm

aula03_04.htm


8/29

ELFS, 2003 59


Controle do tipo hidden! Elementos do tipohidden tm um papel importante em

formulrios. Estes elementos no podem ser vistos ou editados pelosusurios, mas podem armazenar informao em um formulrio.

Desabilitao de elementos ! Qualquer elemento pode ser desabilitado utilizando-se o atributodisabled . Por exemplo:

Elemento ! Este elemento corresponde a uma grande caixa onde o usurio poder digitarum texto que ocupa vrias linhas. O tamanho da caixa definido pelosatributoscols e rows . Barras de rolagem sero acrescentadasautomaticamente se o texto for maior do que o tamanho da caixa.

Elementos e ! Os elementos e so usados para definir uma caixa de

seleo. A caixa de seleo ter tantos itens quantos forem os elementos existentes entre os elementos e . Oatributosize do elemento define quantas escolhas sero exibidasao usurio e se h necessidade de barra de rolagem para exibir as demais.


9/29

ELFS, 2003 60


O atributomultiple do elemento indica se mais de umaseleo possvel(multiple=true ).

Exerccio:! Reproduzir o formulrio ao lado.

Note que o Ramo de Atividade Indstria deve estar selecionadoinicialmente. Considere que as

opes de Estado so: SP, RJ, MG e RS.

aula03_05.htm


10/29

ELFS, 2003 61


Folhas de Estilo! Folhas de estilo so utilizadas em documentos XHTML para atribuir diversas

propriedades ao mesmo tempo aos elementos de uma pgina. Por exemplo,fazer com que todos os ttulos de nvel 1 da pgina ( ) sejamapresentados usando fonte Arial de tamanho 18 e na cor azul.

! A linguagem mais utilizada para definir estilos em um documento XHTML aCSS (Cascading Style Sheets ).! Vantagens em utilizar folhas de estilo:

" Pode-se alterar completamente a aparncia de um documento com poucoesforo, pois estilos permitem a separao da parte funcional de umdocumento de seus aspectos de apresentao, definidos nas folhas deestilo.

" Uma mesma folha de estilos pode ser aplicada a diversos documentos." Os marcadores no documento tornam-se mais simples (com menos

atributos e propriedades) e as pginas tornam-se mais compreensveis e

podem ser mantidas mais facilmente." possvel um controle melhor da apresentao dos documentos, pois

algumas propriedades de folhas de estilo no tm equivalentes emmarcadores XHTML.

" Melhor adaptao a diferentes navegadores, pois como a apresentao do

documento definida separadamente, pode-se criar para um mesmo


11/29

ELFS, 2003 62


documento, estilos especficos para diferentes navegadores. Por exemplo,para navegadores clssicos (como Netscape e Internet Explorer) pode-seenfatizar as cores, fontes ou tamanhos, enquanto que para umsintetizador de voz, a tonalidade e o volume podem ser enfatizados.

" As propriedades das folhas de estilo podem ser herdadas de um elemento

para outro. Por exemplo: Se em um pargrafo com propriedadesdefinidas em uma folha de estilo para ser apresentado com fonte Arial detamanho 14 e na cor azul for includo um atributo ou uma outrapropriedade para que o texto seja apresentado em negrito, o texto serapresentado em negrito, com fonte Arial de tamanho 14 e na cor azul.

! Desvantagem em utilizar folhas de estilo" Nem todas as propriedades de folhas de estilo so interpretadas

corretamente pelos navegadores atuais. Para verificar as propriedades defolhas de estilo interpretadas pelos navegadores pode-se consultar:http://webreview.com/pub/guides/style/style.html

Criao e Definio de Folhas de Estilo

p {font-size:12; font-style: italic; color:blue}

elemento ao qual oestilo se aplica

ponto-e-vrgula separandoas propriedades

propriedade valor da propriedade


12/29

ELFS, 2003 63


! A criao de estilos feita utilizando a seguinte sintaxe: elemento ao qual oestilo se aplica, seguido da lista de propriedades e seus respectivos valores aserem aplicadas ao elemento delimitada por chaves { e }. Dentro da lista, ospares propriedade:valor so separados por pontos-e-vrgulas. Para folhas deestilo, no existe diferena entre letras maisculas e minsculas.

!

Estilos podem ser definidos em trs nveis: local, interno e externo. Umdocumento pode usar estilos de qualquer nvel. Estilos locais anulam estilosinternos e estilos internos anulam estilos externos.

Definio de Estilos Locais! Estilo local o definido dentro de elementos de uma pgina. Por exemplo:

Estilos Locais

Estilos Locais

Pargrafo mostrado com fonte maior do que o

normal.

Pargrafo mostrado com fonte de tamanho normal,

mas na cor azul.

aula03_06.htm


13/29

ELFS, 2003 64


! A definio de estilos locais pode ser feita com o elemento paraindicar que o estilo se aplica apenas a uma parte de um elemento. Porexemplo:

! A definio de estilos locais pode ser feita tambm com o elementopara indicar que o estilo se aplica a todos os elementos internos diviso. Porexemplo, a pgina:

Estilos Locais

Estilos Locais

Este pargrafo mostra que estilos podem ser aplicados a

apenas algumas partesdo elemento.

aula03_07.htm


14/29

ELFS, 2003 65


pode ser obtida com:

Definio de Estilos Internos! A definio de estilos internos deve ser feita entre os elementos e

e dentro do elemento da pgina. Por exemplo:

Estilos Locais

Estilos Locais

Este o primeiro pargrafo.

Este o segundo. Note que o mesmo estilo se aplica a

ambos os pargrafos.

aula03_08.htm

Estilos Internos

p {font-family:Arial; font-style:italic; font-size:90%}

aula03_09.htm


15/29

ELFS, 2003 66


h1 {color:blue}h2 {color:red; font-size:120%}

b {color:green}

Apresentao de Documentos
definida em folha de estilo

Ttulo de nvel 2


Este o segundo. Note que o mesmo estilo se aplica a

ambos os pargrafos.


16/29

ELFS, 2003 67


! possvel atribuir uma mesma definio de estilo para vrios elementos. Porexemplo:h1, h2, h3 { color:blue } , faz com que os ttulos de nveis1, 2 e 3 sejam apresentados na cor azul.

Definio de Estilos Externos!

A definio de estilos pode ser feita em um documento separado (que,normalmente, tem a extenso.css ). O elemento deve ser utilizadopara aplicar uma folha de estilo ao documento, com a atributohref definindoa URL da folha de estilos externa. Por exemplo:

Estilos Externos

Apresentao de Documentos

definida em folha de estiloTtulo de nvel 2


Este o segundo. Note que o mesmo estilo

se aplica a ambos os pargrafos.

aula03_10.htm

Note que estedocumentono teminformaesde estilo. Oestilo importado deum arquivoexterno.


17/29

ELFS, 2003 68


! Exerccio: Verificar o resultado obtido pela pginaaula03_10.htm , que usao arquivo de folha de estilomeu_estilo.css , e compare com a pginaobtida pelo documentoaula03_09.htm .

Herana de Propriedades em Folhas de Estilo! A pgina a seguir ser construda usando estilos externo, interno e local.

p {font-family:Arial; font-style:italic; font-size:90%}h1 {color:blue}h2 {color:red; font-size:120%}

b {color:green}

meu_estilo.css


18/29


19/29

ELFS, 2003 70


Algumas Propriedades de Folhas de Estilo! Cores . A maneira mais fcil de estabelecer o valor da propriedadecolor

usar um dos 16 nomes das cores padro da paleta de cores VGA:aqua ,black , blue , fuchsia , grey , green , lime , maroon , navy , olive ,purple , red , teal , silver , white , yellow . Outra possibilidade especificar a cor desejada por um valor RGB hexadecimal, por exemplo:color:#006699 .

! Ligaes Hipertexto . Os elementosa:link , a:visited e a:activeestabelecem a apresentao de ligaes no visitadas, visitadas e que se esttentando visitar no momento. Exemplos:text-decoration:none (suprimeo sublinhado de uma ligao),background-color:uma-cor (adiciona umacor de fundo a uma ligao).

! Textura de Fundo . Estabelecida pela propriedadebackgound-image doelementobody . O valor da propriedade deve ser escrito comourl (arquivo-de-imagem). Exemplo:body {background-image:url(gato.gif)} .

Este o segundo pargrafo. Note que a ele se aplicam somenteos estilos interno e externo no havendo definio deestilo local ao pargrafo.


20/29

ELFS, 2003 71


Outras propriedades:background-position (valores possveis:top ,bottom , left , center , right , podendo haver combinaes consistentes devalores, como:top left ou bottom center ) e background-repeat(valores possveis:repeat , repeat-x , repeat-y , no-repeat ).

Exemplo:


21/29

ELFS, 2003 72


! Exerccio: Testar outras combinaes de valores para as propriedadesbackground-position e background-repeat .

Textura de Fundo

body {background-image:url(pantera.gif);

background-position:bottom center; background-repeat:repeat-x}

Textura de Fundo

A aplicao de uma textura a um documento requer adefinio de uma imagem que deve ser utilizada comofundo do documento. Se a imagem no ocupar a totalidadeda pgina ela poder ser repetida quantas vezes forem necessrias para ocupar toda a pgina.

aula03_12.htm


22/29

ELFS, 2003 73


! Bordas e Margens . A figura a seguir mostra como so entendidos osconceitos de borda e margem em relao a um elemento qualquer de umdocumento XHTML.

! Para a margem, os valores:auto , um-tamanho , uma-porcentagem devem seratribudos s propriedades:margin-top , margin-right , margin-bottom ,margin-left ou margin .

! A borda estabelecida pela propriedade border, que pode assumir um dosseguintes valores:solid , dotted , dashed , double , groove , ridge ,inset , outset . Para a espessura da borda, os valores:thin , medium ,thick e um-tamanho devem ser atribudos s propriedades:border-top-width , border-right-width , border-bottom-width , border-left-width ou border-width .

contedo

margem

borda


23/29


24/29

ELFS, 2003 75


!

As propriedadesmargin-top e margin-bottom podem ser usadas tambmpara definir o espaamento acima e abaixo de ttulos em um documentoXHTML. Por exemplo:

! possvel tambm a definio declassespara a definio de estilos. Porexemplo:

body {margin-left:10%; margin-right:10%}

h1 {margin-top:20%; margin-bottom:5%}

h2.secao {margin-top:3em; margin-bottom:2em}

...Ttulo da seo

pontos (1 ponto = 1/72 polegadas)ptporcentagem%milmetrosmmpixelspxcentmetroscmaltura da letra xexpolegadasinaltura da fonte do elementoem

Medidas absolutasMedidas relativas


25/29

ELFS, 2003 76


!Indentao de Pargrafos . A propriedadetext-indent usada paraestabelecer um recuo na primeira linha de um pargrafo (indentao). Porexemplo:

! Controle de Fontes de Caracteres . As propriedades de folhas deestilo tambm devem ser usadas para controlar como os caracteres seroapresentados em um documento XHTML. As seguintes propriedades estodisponveis:

" font-size : normalmente definido empt ou %, mas pode ser expressocom os valores:small , large , normal .

" font-style : valores possveis:italic , oblique ou normal ." font-weight : nmero de 100 a 900 (nvel de negrito) ou os valores:

bold , light e normal ." text-transform : upercase ou lowercase ." line-height : espaamento entre linhas; pode assumir os seguintes

valores: nmero de vezes o espaamento normal, valor em porcentagemdo espaamento normal, valor empt , ou normal .

p {text-indent: 15%}


26/29

ELFS, 2003 77


"

font-family : define os nomes das fontes a serem usadas; pode definirvrios nomes alternativos (ser usada a primeira disponvel nocomputador). Exemplo:

Definio de Estilos Prprios! Atravs do atributoclass possvel definir estilos personalizados, como ocorre

em processadores de texto usuais. Exemplo:

p {font-family:Georgia, Times New Roman, Garamond, Vivaldi, Arial}


27/29

ELFS, 2003 78


Textura de Fundo

h1.especial {font-size:18pt;font-family:Arial;color:blue;text-align:center; }

p.cor {text-indent: 15%;

background:yellow; margin-left:5%;

font-size:normal; }

p.normal {font-weight:bold;font-size:normal;color:black;

margin-left:20%; }

aula03_14.htm


28/29


29/29

ELFS, 2003 80

Formulrios e Folhas de Estilo em XHTML aula03_15.htm

JavaScript - Aula03

Documents

Transcript of JavaScript - Aula03