Celta Informática - Web designer (pdf apostila)

Sumário

O QUE É HTML DINÂMICO _____________________ 3HTML DINÂMICO É UM SCRIPT NO LADO DO CLIENTE. ___________ 3HTML DINÂMICO É DOM ________________________________ 4HTML DINÂMICO É CSS _________________________________ 4

CONCEITOS BÁSICOS DE HTML ________________ 5

FOLHAS DE ESTILO - CSS_______________________ 5COMO A CSS TRABALHA __________________________________ 5CSS LOCAIS, GLOBAIS E LINKADOS _________________________ 6ESTILOS EM FONTES ______________________________________ 8CONFIGURAÇÃO DE FONTES ________________________________ 8CONTROLANDO O TAMANHO DO TEXTO ________________________ 9ESTILOS EM CORES _____________________________________ 17CONTROLANDO IMAGENS DE FUNDO _________________________ 22POSIÇÕES _____________________________________________ 24CONTROLANTO ELEMENTOS POSICIONADOS ____________________ 25O PODER DA INVISIBILIDADE _______________________________ 26DICAS E TRUQUES PARA ESTILOS EM CSS ____________________ 27

CONCEITOS BÁSICOS DE JAVASCRIPT _________ 30O QUE É JAVASCRIPT ____________________________________ 30O QUE JAVASCRIPT PODE FAZER ____________________________ 31CARACTERÍSTICAS DA LINGUAGEM __________________________ 31TIPOS DE DADOS________________________________________ 34DECLARAÇÃO DE VARIÁVEIS _______________________________ 37OPERADORES __________________________________________ 39ESTRUTURAS DA LINGUAGEM ______________________________ 43REQUISITOS DE SISTEMA _________________________________ 52

Celta Informática

Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Trisquel Informática Ltda. (Celta Informática), poderá ser reproduzida total ou parcialmente, por qualquer processo, eletrônico, fotocópia, mecânico ou sistema de processamento de dados. Temos diversos títulos, consulte nossa página: www.celtainformatica.com.br Celta Informática [email protected] Fone: (11) 4331-1586

CONCEITOS BÁSICOS DE ASP_________________ 52VBSCRIPT E ASP _____________________________________ 53OBJETOS ASP ________________________________________ 55ESTRUTURAS DA LINGUAGEM _____________________________ 59TIPOS DE DADOS ______________________________________ 61FUNÇÕES DE DADOS ____________________________________ 62

CONCEITOS BÁSICOS DE PHP ________________ 73REQUISITOS DE SISTEMA ________________________________ 73SIMBOLOGIA E CONVENÇÃO DA LINGUAGEM _________________ 74ESTRUTURA DO CÓDIGO_________________________________ 74ESTRUTURAS DA LINGUAGEM _____________________________ 75TIPOS DE DADOS ______________________________________ 77FUNÇÕES DE DADOS ____________________________________ 78

JUNTANDO TUDO ____________________________ 83CONTEÚDO DO ARQUIVO ESTILOS.CSS ___________________ 84CONTEÚDO DO ARQUIVO DHTML.JS _____________________ 87CONTEÚDO DO ARQUIVO DHTML.HTM ___________________ 94CONTEÚDO DO ARQUIVO DHTML.ASP ____________________ 100CONTEÚDO DO ARQUIVO DHTML.PHP ____________________ 103

Página: 3

WEBDESIGNER

Celta Informática - F: (11) 4331-1586

WEBDESIGNERWEBDESIGNERWEBDESIGNERWEBDESIGNERWEBDESIGNERO QUE É HTML DINÂMICOInicialmente, HTML Dinâmico (ou DHTML) não é uma tecnologia especí-fica como Javascript, Vbscript ou ActiveX, tem tão pouco uma tag ou umplug-in no Browser. Na verdade é um dos avanços mais interessantesdos últimos tempos na Internet, um conceito que agrupa as tecnologiasexistentes como Javascript, VBScript, Document Object Model (DOM),Layers e Style Sheets (CSS). Por isso, neste livro estaremos abordando4 tecnologias que são as mais utilizadas para o principal comportamentodo DHTML, e são elas HTML, JavaScript, ASP e CSS.

DHTML é uma página com instruções básicas de HTML que podem sermodificadas dinamicamente mesmo após a página ter sido carregada nobrowser. Um parágrafo pode se tornar azul quando o mouse passa so-bre ele, ou um quadro pode se movimentar através da tela, ou seja,qualquer coisa que possa ser feito em HTML pode ser refeito após aspáginas serem carregadas.

Então, como pode o HTML ser modificado após seu download? Pararesponder esta pergunta, teremos que analisar antes alguns conceitossobre as tecnologias envolvidas neste processo.

HTML DINÂMICO É UM SCRIPT NO LADO DO CLIENTE.Isso significa que depois de carregada a página, ela não precisará denenhum outro tipo de conexão para suas ações mecânicas, por isso elase torna um script “cliente-side”. Geralmente Javascript e Vbscript sãomuito utilizados em particular para modificar o HTML. Uma imagem podeser manipulada através de eventos com o mouse, por exemplo, e os

Página: 4

WEBDESIGNER


browsers a partir da geração 4 tanto da Microsoft quanto Netscape, per-mitem mais elementos das páginas serem acessíveis através de lingua-gens de script. Esse mecanismo de tratar elementos através destas lin-guagens são denominados de Document Object Model (DOM).

HTML DINÂMICO É DOMO centro da tecnologia que envolve o HTML dinâmico são os DocumentObject Model, que fazem com que o HTML seja modificável. O DOM éuma hierarquia de elementos que estão presentes no browser disponí-veis a qualquer momento de qualquer modo. As informações sobre oambiente, tais como, data, hora, propriedades do browser (nome e ver-são), propriedades da janela (URL) e tags de HTML. Assim, o Browserdisponibiliza para as linguagens de script, acesso a estes componentesdo DOM e mesmo que alguns deles não possam ser modificados, comodata e hora, por exemplo, servem para modificar outros elementos.

Um detalhe interessante é que o DOM no Netscape é muito mais limita-do do que no Internet Explorer. O tratamento de Layers neste segundotorna qualquer idéia do programador simples de serem implementadas,o que não acontece com tanta facilidade no Netscape. Por isso existemtécnicas de balanceamento entre browsers, ou seja, construir detalhesdiferentes para versões de browsers para uma mesma página, o quedificulta muito o trabalho do programador.

O DOM também possui o chamado “event model”, que são na verdadeos gatilhos para disparar as modificações das páginas. Eles são eventoscomo movimento de mouse (onmouseover), carregamento da página(onload), submissão de um form (onsubmit) ou entradas de campos(onfocus).

HTML DINÂMICO É CSSComo são parte do DOM, as propriedades CSS são acessíveis para lin-guagens de script e possibilitam quase todas as maneiras de mudançavisuais nas páginas.

Somando tudo isso: CSS (e o HTML básico) que são as partes que vocêmodifica, o DOM que faz com que estes itens sejam modificáveis e aslinguagens de Script, temos então o HTML Dinâmico.

Página: 5

WEBDESIGNER


CONCEITOS BÁSICOS DE HTMLUm documento HTML pode ser criado através de editores de texto ousoftwares específicos. Um simples editor como o Bloco de Notas doWindows já é suficiente para sua criação, porém para isso, você já deve-rá estar familiarizado com a linguagem. Outros softwares comoDreamweaver ou FrontPage inserem automaticamente comandos, com-ponentes e atalhos. Por eles criarem o código HTML automaticamente,algumas vezes este código fica demasiadamente grande, enquanto queuma mesma página criada com o Bloco de Notas teria um código menor.

Apesar disso, estes dois programas, possuem uma tecnologia chamadade WYSIWYG (What you see is what you get) que basicamente signifi-ca, que em tempo de projeto, o que você visualiza na sua tela será omesmo que o navegante visualizará no site depois de pronto, tornando aconstrução de páginas mais rápida caso utilizassemos um outro editorHTML ou de texto.

Nesta apostila, iremos utilizar preferencialmente o Bloco de Notas doWindows, e um pré-requisito que você conheça o básico da linguagemHTML, pois trataremos aqui apenas da parte dinâmica desta linguagem.

FOLHAS DE ESTILO - CSSCSS (Cascading Style Sheets - folhas de estilo em cascata) é um meca-nismo simples para controlar o estilo de um documento Web, sem com-prometer sua estrutura. Através da separação dos elementos de designvisual (fontes, cores, margens e outros) da estrutura lógica de uma pági-na, o CSS permite que os Web Designers controlem sem muito sacrifí-cio a integração dos dados, o que também proporciona uma rápida ma-nutenção e sua usabilidade em múltiplos ambientes. Além disso, a defi-nição de uma página em um único pedaço de código permite que sejafeito um download mais rápido de todo o conteúdo.

COMO A CSS TRABALHAA CSS sobrescreve as configurações padrão do browser para interpretarcomo as tags deverão ser exibidas, permitindo que você utilize qualquerelemento em HTML indicado pela abertura e fechamento de tags (inclu-sive a tag <p>) para aplicar atributos de estilos definidos localmente ounas folhas de estilo (style sheet).

Página: 6

WEBDESIGNER


As folhas de estilo contém regras compostas por seletores e declara-ções que definem como estes estilos serão aplicados a determinado ele-mento. O seletor (um elemento em HTML redefinido) é o link entre odocumento em HTML e o estilo. Existem dois diferentes tipos de seletores:tipos (Tags de elementos HTML) e atributos (como class e ID Names).

Uma declaração de CSS é dividida em duas partes: seletor e uma listacontendo o nome da propriedade e seu valor. No exemplo abaixo, temosque o seletor P terá as propriedades font-size e color modificadas.

seletor {propriedade 1: valor 1; propriedade 2: valor:2} “P {font-size: 8pt; color: red}

CSS LOCAIS, GLOBAIS E LINKADOS

LocalUma declaração de folha de estilo, específica para uma instância únicade uma página, pode ser utilizada em uma tag simples como <font> porexemplo, para definir a margem, a cor, o tipo e etc.

<p style=”font size: small; color: red; font-weight:bold; font-family: Arial, Helvetica, non-serif”>Este éo local de uma declaração de folha de estilo.</p>

GlobalUma declaração de folha de estilo, aplicável a todo o documento, que édefinida entre as tags <style></style> dentro da sessão header (<head></head>) do documento em HTML.

<html><head><title>Título</title><style type=”text/css”><!—[LOCAL DAS DEFINIÇÕES DE CSS]—></style></head><body>[CORPO DO DOCUMENTO]</body></html>

Página: 7

WEBDESIGNER


LinkadosUma declaração de uma única folha de estilo escrita em arquivo separa-do, salvo com o sufixo .css para definir múltiplas páginas. Um arquivo.css está no formato texto contendo valores e regras como as descritasa seguir:

P {font-family: non-serif; font-size: medium; color:red}H1 {font-family: serif; font-size: x-large; color: green}H2 {font-family: serif; font-size: large; color: blue}

Para aplicar ligar um arquivo .css (“estilo.css” no exemplo abaixo) em umapágina HTML, utiliza-se a tag <link> na sessão header do documento:

<head><link rel=”stylesheet” href=”estilo.css” type=”text/css”></head>

HerançaÉ a característica de podermos utilizar estilos que são baseados em es-tilos pré-existentes, através do uso de um segundo seletor. Observe oexemplo e veja que o seletor P original é ancestral de outros dois seletores:P.a e P.c.

<html><head><style type=”text/css”><!—P {font-size: 20pt; font-family: arial}P.a{color:red}P.c{font-family:verdana}—></style></head><body><p>Texto com fonte arial tamanho 20 pontos.</p><p class=a>Texto com fonte arial tamanho 20 pontos evermelho.</p><p class=c>Texto com fonte verdana tamanho 20 pon-tos.</p></body></html>

Página: 8

WEBDESIGNER


Nos casos onde estilos locais, globais e linkados se conflitam, o estilomais específico irá geralmente ter precedência: local precede global, glo-bal precede linkados. Similarmente, atributo em estilos local se sobre-põe como ID sobre a class e class sobre stylesheets padrões de elemen-tos HTML.

ESTILOS EM FONTES

Chamando fontes por nomesComo dizer ao browser qual fonte exibir? Você apenas digita o nome dafonte após o atributo font-family, correto? Infelizmente é um pouco maiscomplicado do que isso. Fontes nem sempre são chamadas da mesmamaneira em plataformas diferentes. Por exemplo, Courier no Mac é ge-ralmente chamada de Corier New em uma máquina Windows.Como então saber qual o nome correto das fontes em plataformas dife-rentes? Depende da plataforma:

Usuários de Windows: utilizam o nome das fontes exatamente comoaparece nos menus de fontes, como por exemplo no Microsoft Word,.

Usuários de Mac: não acreditam no que os aplicativos dizem! Ao invésde utilizar o nome da fonte exibido no Fonts Folder, especifique nostylesheet o nome como ela é realmente pronunciada.

Propriedade font-familyfont-family é a propriedade CSS utilizada para chamar uma fonte peloseu nome. A sintaxe básica se parece com isso:

H2 { font-family: helvetica, impact, sans-serif }

O Browser interpreta o comando de Stylesheet da seguinte maneira:Procura pela primeira fonte da lista (Helvetica) e a utiliza se estiver insta-lada no sistema. Se esta não existir, procura pela segunda fonte da lista(Impact) e procede da mesma maneira, caso não exista, vai para terceirafonte da lista (Sans-Serif).

CONFIGURAÇÃO DE FONTESNa lista de configuração de fontes, você pode especificar na verdade,quantas quiser! Esta característica pode ser útil se você não tem certezade qual fonte está instalada nas diferentes plataformas dos visitantes.

Página: 9

WEBDESIGNER


Os browsers são configurados de forma a exibir todos os nomes de fon-tes em minúsculo. Algumas vezes eles reconhecem nomes de fontescom as iniciais maiúsculas. Caso você esteja em algum momento de-senvolvendo uma página com a utilização de estilos CSS, seria muitoimportante testa-las antes de sua publicação, para evitar maiores cons-trangimentos. Principalmente no que tange a estas regras de interpreta-ção de códigos em diferentes plataformas.

Sempre é uma boa idéia utilizar fontes genéricas, ou seja, aquelas quesão comuns a quase todas as plataformas, ao invés de fontes específi-cas, principalmente em instalações de certos programas. Veja algumasdas mais genéricas existentes:

serif (tipo Times)sans-serif (tipo Arial ou Helvetica)cursive (tipo Comic Sans)monospace (tipo Courier)

Se o nome da fonte for composto com mais de uma palavra, como ComicSans por exemplo, coloque-as entre aspas na definição de CSS:

BODY { font-family: “comic sans”, “new baskerville”,serif }

Para estilos inline, utilize aspas-simples, para não conflitarem com asaspas normais iniciais:

<P STYLE=”font-family: ‘comic sans’, ‘new baskerville’,serif”>O texto vai aqui</P>

CONTROLANDO O TAMANHO DO TEXTOSe você acha que só é possível a utilização de apenas 7 tipos diferentesde tamanho na declaração <FONT SIZE=x>, você está enganado!

font-sizeUtilizando a propriedade font-size, você terá a sua disposição, mais doque 7 tipos diferentes de fontes.

Página: 10

WEBDESIGNER


Propriedades existentes:

points, ems, pixels;palavras-chaves;valores percentuais;

Points:

P { font-size: 16pt }Este código diz ao browser para exibir um texto em 16 pontos. Um pontoé uma unidade de medida familiar para designers. É uma excelente uni-dade de medida para especificar o tamanho de um texto por que funcio-na muito bem em diferentes plataformas de browsers. O único problemaé que por padrão, as fontes parecem ser mais largas nos monitores dePC´s que nos monitores de MAC.

Se este for um problema, utilize técnicas de reconhecimento de platafor-ma através do JavaScript para especificar arquivos e declarações dife-renciadas de CSS de acordo com a plataforma.

Pontos, como as outras unidades, trabalham em pequenas ou grandesunidades, como 8 pontos ou 80 pontos por exemplo.

Em:P { font-size: 20pt }B { font-size: 1.5em }

A unidade “em” é uma unidade de distância igual ao tamanho de umponto para uma fonte. Quando utilizada em estilos, esta unidade se refe-re ao tamanho do elemento pai.

Pixels:P { font-size: 20px }

Do ponto de vista do desenvolvimento, o pixel é uma unidade de medidafamiliar e pode ter o mesmo resultado aparente em diferentes platafor-mas. A única desvantagem é que as páginas não serão impressas demodo consistente.

Página: 11

WEBDESIGNER


Outras unidades:in = polegadascm = centímetrosmm = milimetrospc = picasex = x-height

Palavras-chaves:P { font-size: large }

Existem sete palavras chave e elas correspondem ao valor numérico dautilização da declaração <FONT SIZE>:

1 - xx-small2 - x-small3 - small4 - medium5 - large6 - x-large7 - xx-large

Com estes valores, o Browser fica livre para decidir qual tamanho defonte é mais apropriado para cada palavra-chave. Por exemplo, x-large éexibido em 28 pontos no Netscape e 24 no Internet Explorer do Mac e 18no Internet Explorer do Windows. Além disso, você pode utilizar outraspalavras-chave relativas:

smallerlarger

Um valor de “smaller” diz ao browser para ajustar o tamanho da fontecom o tamanho do texto corrente. Por exemplo, se uma declaração“large” tiver “smaller” aplicado sobre ela, o resultado será um texto mé-dio. A declaração large trabalha vice-versa este conceito.

Valores percentuais:A terceira forma de especificar um tamanho de fonte é através de valo-res percentuais. Veja o exemplo:

P { font-size: 15pt }B { font-size: 300% }

Página: 12

WEBDESIGNER


Estas regras traduzem o seguinte: Qualquer texto em negrito (tag <B>)que esteja em um parágrafo (tag <P>) será três vezes maior ou terá 45pontos. Os valores percentuais interferem no tamanho de acordo com ovalor do elemento pai do elemento especificado.

Faça o exercício abaixo:

<html><head> <title>Untitled</title> <style type=”text/css”> <!— P {font-size: 10pt; font-family: verdana} —> </style></head><body> <p>Texto 10 pontos.</p> <p><b style=”font-size: 200%”>Texto negrito 200%.</b></p> <p><b style=”font-size: 20pt”>Texto negrito 20 pon-tos.</b></p></body></html>

Página: 13

WEBDESIGNER


Propriedade font-styleEsta é a propriedade parar controlar o estilo itálico das fontes:

H3 { font-style: italic }

Propriedade font-weightEsta é a propriedade para controlar o estilo negrito das fontes:

P { font-weight: bold }

Ao invés de se utilizar a palavra “bold”, você poderia especificar um valorcomo 100, 200, 300, 400...900. Um texto normal sem ser negrito possuium valor de 400. quanto maior for o número, mais intenso será o negrito,porém somente a faixa compreendida entre 700-900 terá aparência denegrito.

Propriedade font-variantUtilizado para exibir um texto normal em small-caps:

H2 { font-variant: small-caps }B { text-transform: uppercase }

Valores possíveis:

uppercase – Faz com que todas as sentenças fiquem em letras maiús-culas.lowercase – Faz com que todos os caracteres fiquem em letras minús-culas.capitalize – Faz com que todas as iniciais de frases fiquem capituladas.none - ignora as regras e exibe o texto como foi programado.

Propriedade fontTodos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73.Nenhuma parte deste livro, sem prévia autorização por escrito de TrisquelInformática Ltda. (Celta Informática), poderá ser reproduzida total ouparcialmente, por qualquer processo, eletrônico, fotocópia, mecânico ousistema de processamento de dados.

Página: 14

WEBDESIGNER


0A propriedade font é utilizada para resumir, em uma única sentença,várias propriedades que modificam a fonte. Ele possui os seguintes va-lores:

<font-style>| <font-variant> | <font-weight> | <font-size> | <line-height> |<font-family>

P { font: italic bold 12pt times, serif }

Propriedade text-decorationPor muito tempo, utilizou-se na internet, o conceito de links sublinhados,e na verdade isso pode atrapalhar muito a estética da página. A partirdesta necessidade, surgiu a propriedade “text-decoration”, que permiteem outra palavras, modificar estilos de exibição para efeitos decorativosinclusive em componentes web como hiperlinks.

No exemplo abaixo, configuramos a tag <b> para que sempre além donegrito, aplique também, sublinhado (underline):

B { text-decoration: underline }

Valores possíveis:

underline – Sublinha o texto.overline – Adiciona uma linha acima do texto.line-through – Acrescenta uma linha sobre o texto.blink – Faz com que o texto fique piscando.none – Ignora as regras e exibe o texto como o programado.

Atenção: O navegador Communicator não suporta overline, O InternetExplorer 4 e 5 não suportam blink e Internet Explorer 3 não suporta ne-nhum dos valores.

Mas daí você se pergunta: “Para que eu vou utilizar none? Se eu nãoquiser nenhuma propriedade, simplesmente não à configuro, correto?”Sinto – lhe informar mas Errado!

Para sumir com o sublinhado de links, você pode configurar a proprieda-de text-decoration como none para a tag <a>, veja:

Página: 15

WEBDESIGNER


a:link { text-decoration: none }a:active { text-decoration: none }a:visited { text-decoration: none }

Estas classes definidas para a tag <a> representam o seguinte: a:link épara o link normal que ainda não foi visitado; a:active é para o link que vocêestá clicando e a:visited é para o link que já foi visitado anteriormente.

Se você prestar bastante atenção, dentro do que aprendemos até agora(e iremos aprender no próximo tópico), torna-se possível a configuraçãopersonalizada para esta situação de acordo com suas necessidades, porexemplo, você poderia configurar os links já visitados sem sublinhado,mas com uma cor “amarela” e com 12 pontos de tamanho. Creio quenão, ficaria feio. Use a sua criatividade.

Exercício:Neste exercício iremos construir uma página que possui os três tipos defolhas de estilo: linkado, global e local, e herança entre estilos. Serãonecessários dois arquivos, um contendo as declarações (estilo.css) e ooutro a página propriamente dita (sonhos.htm).

Estilos.css

a {text-decoration: none; color: #003399}a:hover {text-decoration: underline}p {color: #000066; font: 15 Verdana,Arial; text-align:justify}

Sonhos.htm

<html><head><title>Sonhos</title>

<link rel=”stylesheet” href=”estilos.css”type=”text/css”><style type=”text/css”> a.vm {color: #993300; font-weight:bold} a.vm:hover {color: #ff0000} p.aut {font:bold; text-align:right}

Página: 16

WEBDESIGNER


</style></head><body><a name=”topo”><h2 style=”font: Verdana, Arial; text-align: center;color:#ff3300">NOSSOS SONHOS</h2><p>O que é a vida sem um sonho? Pense nisso.</p><p>”Há quem diga que todas as noites são de <a href=”#sonho”>sonhos</a>. Mas há também quemgaranta que nem todas, só as de <a href=”#verao”class=”vm”>verão</a>. No fundo, isso não tem importância. O que interessa mesmonão é a noite em si, são os sonhos. Sonhos que o homem sonha sem-pre, em todos os lugares, em todas as épocas do ano, dormindo ouacordado.”</p><p class=”aut”>(Shakespeare, Sonhos de Uma Noite deVerão)</p><br><br><br><br><br><br><br><br><br><br><br><a name=”sonho”><p>Sonho<br> Seqüência de fenômenos psíquicos (imagens, repre-sentações, atos, idéias, etc.) que involuntariamente ocorrem du-rante o sono.</p><p class=”aut”><a href=”#topo”>topo</a><br><br><br><br><br><br><br><br><br><a name=”verao”><p>Verão<br> Estação do ano que sucede à primavera e antecedeo outono. No hemisfério sul principia quando o Sol alcança osolstício de dezembro e termina quando ele atinge o equinóciode março.</p><p class=”aut”><a href=”#topo”>topo</a><br><br><br><br><br><br><br><br><br><br>fim</body></html>

Página: 17

WEBDESIGNER


ESTILOS EM CORES

Propriedade colorEsta propriedade herda as mesmas características de valores do HTML.Por isso não soará muito estranho para você esta nova propriedade:

B { color: #333399 }

Com esta regra, todos os textos em negrito de sua página (tag <b>)serão exibidos nesta cor, no exemplo acima teremos um azul marinho.Na realidade, esta configuração intefere na propriedade “foreground-color”do texto.

Existem três modos para definição de cores em CSS, são eles:

Nomes das coresAs 16 cores básicas são: aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, purple, red, silver, teal, white e yellow.

Página: 18

WEBDESIGNER


Valores HexadecimaisPara um controle mais avançado, utilize cores em hexa, que estão noformato #RRGGBB onde RR representa Red (Vermelho); GG represen-ta Green (Verde) e BB representa Blue (Azul). Dentro de cada grade devalores, você poderá especificar códigos em Hexadecimal (0 a F). Ascores preenchem valores de 00 a FF, onde 00 representa a ausência dacor e FF a sua maior intensidade. Como você deve saber, todas as coressão misturas de diferentes intensidades de Vermelho, Verde e Azul. Nãoentraremos em muitos detalhes aqui neste livro sobre estas nomeclaturas,mas você poderá encontrar na Internet, sites que oferecem um bom con-teúdo sobre este assunto.

#FF0000 = Vermelho #00FF00 = Verde#0000FF = Azul #FFFF00 = Amarelo

Valores RGBA notação RGB é muito utilizada em aplicações gráficas como oPhotoshop e o CorelDraw. Como você aprendeu no tópico anterior, Rcorresponde a Vermelho, G corresponde a Verde e B corresponde a Azule suas faixas numéricas vão de 0 à 255. Sendo 00 a ausência da cor eFF a sua maior intensidade.

B { color: rgb (vermelho, verde, azul)}B { color: rgb(51,204,0) }

Background-Color (cor de fundo)Utilize esta propriedade para configurar as cores de fundo de qualquerelemento em uma página, incluindo imagens:

P.yellow { background-color: #FFFF66 }

A regra acima é aplicável a um parágrafo (tag <p>) inteiro. As regraspara definição de cores são as mesmas já explicadas nos tópicos anteri-ores, como nomes de cor, valores hexadecimais ou RGB.

Estas regras são aplicaveis não só a parágrafos, mas se desejar, a pala-vras únicas também. Além disso, seria possível também configurar umvalor de background para transparente.

Página: 19

WEBDESIGNER


Exercício:

No exercício a seguir será construída uma tabela que mostrará diversascores e seus respectivos nomes.

Cores.htm

<html><head><title>DHTML</title><style type=”text/css”> .cor_aqua {border-color: #000000; background-color:#00ffff} .cor_navy {border-color: #000000; background-color:“navy”} .cor_black {border-color: #000000; background-color: #000000} .cor_olive {border-color: #000000; background-color: “olive”} .cor_blue {border-color: #000000; background-color:#0000ff} .cor_purple {border-color: #000000; background-color: “purple”} .cor_fuchsia {border-color: #000000; background-color: “fuchsia”} .cor_red {border-color: #000000; background-color:“red”} .cor_gray {border-color: #000000; background-color:#808080} .cor_silver {border-color: #000000; background-color: “silver”} .cor_green {border-color: #000000; background-color: #008000} .cor_teal {border-color: #000000; background-color:“teal”} .cor_lime {border-color: #000000; background-color:00ff00} .cor_white {border-color: #000000; background-color: #ffffff} .cor_maroon {border-color: #000000; background-color: “maroon”}

Página: 20

WEBDESIGNER


.cor_yellow {border-color: #000000; background-color: “yellow”} .fonte{font:bold arial; border-color:#000000; text-align:center }</style></head><body><table border=”1" width=”100%” cellspacing=”0"cellpadding=”0"> <tr> <td width=”25%” class=”cor_aqua”> </td> <td width=”25%” class=”fonte”>aqua</td> <td width=”25%” class=”cor_navy”> </td> <td width=”25%” class=”fonte”>navy</td> </tr> <tr> <td width=”25%” class=”cor_black”> </td> <td width=”25%” class=”fonte”>black</td> <td width=”25%” class=”cor_olive”> </td> <td width=”25%” class=”fonte”>olive</td> </tr> <tr> <td width=”25%” class=”cor_blue”> </td> <td width=”25%” class=”fonte”>blue</td> <td width=”25%” class=”cor_purple”> </td> <td width=”25%” class=”fonte”>purple</td> </tr> <tr> <td width=”25%” class=”cor_fuchsia”> </td> <td width=”25%” class=”fonte”>fuchsia</td> <td width=”25%” class=”cor_red”> </td> <td width=”25%” class=”fonte”>red</td> </tr> <tr> <td width=”25%” class=”cor_gray”> </td> <td width=”25%” class=”fonte”>gray</td> <td width=”25%” class=”cor_silver”> </td> <td width=”25%” class=”fonte”>silver</td> </tr> <tr>

Página: 21

WEBDESIGNER


<td width=”25%” class=”cor_green”> </td> <td width=”25%” class=”fonte”>green</td> <td width=”25%” class=”cor_teal”> </td> <td width=”25%” class=”fonte”>teal</td> </tr> <tr> <td width=”25%” class=”cor_lime”> </td> <td width=”25%” class=”fonte”>lime</td> <td width=”25%” class=”cor_white”> </td> <td width=”25%” class=”fonte”>white</td> </tr> <tr> <td width=”25%” class=”cor_maroon”> </td> <td width=”25%” class=”fonte”>maroon</td> <td width=”25%” class=”cor_yellow”> </td> <td width=”25%” class=”fonte”>yellow</td> </tr></table></body></html>

Página: 22

WEBDESIGNER


CONTROLANDO IMAGENS DE FUNDOTodo bom site possui imagens integradas ao texto ou ao fundo das pági-nas. As imagens ajudam a tornar estas páginas mais atraentes para ointernauta, motivando ainda mais as suas visitas.

Background-ImageCom as folhas de estilo, você pode colocar uma imagem atrás de qual-quer elemento em uma página, através da propriedade background-image:

B { background-image: url(/imagens/fundo.gif) }

A regra acima aplica a imagem “fundo.gif” em textos que possuam a tag<b>. Você também poderia aplicar uma imagem de fundo em apenasduas ou três palavras, não importa, e também no documento inteiro pelaconfiguração de estilo para a tag <body>.

Esta propriedade também suporta o valor “none” para deixar o elementoespecificado sem a imagem de fundo.

Os programadores utilizam uma técnica bastante interessante no uso deimagens de fundo, a boa idéia é especificar uma cor de fundo junto coma imagem de fundo, para que esta cor seja exibida enquanto a imagemestiver carregando.

background-repeatPara evitar que as imagens de fundo se repitam infinitamente, poderiamosutilizar esta propriedade com o valor no-repeat:P { background-repeat: no-repeat; background-image: url(/imagens/background.gif) }Para que as imagens se repitam apenas verticalmente, utilize o valorrepeat-y e para que as imagens se repitam apenas horizontalmente, uti-lize o valor repeat-x.

background-attachmentPara que uma imagem não acompanhe o movimento de scroll da páginautilize esta propriedade com o valor fixed:BODY { background-attachment: fixed; background-image: url(/imagens/background.gif) }

Página: 23

WEBDESIGNER


Valores possíveis:

Withscroll – a imagem de fundo irá acompanhar o scroll normalmente.Withfixed – a imagem de fundo não irá acompanhar o scroll.

background-positionFinalmente, você poderá posicionar a imagem de fundo, exatamente ondeela deva começar:

P { background-position: center bottom; background-image: url(background.gif) }

Existem três formas de se especificar os valores:

Valores possíveis

top – Alinha a imagem ao topo.bottom – Alinha a imagem para o rodapé.left – Posiciona a imagem ao lado esquerdo.right – Posiciona a imagem ao lado direito.center – centraliza a imagem verticalmente (junto com vertically) ou ho-rizontalmente (junto com horizontally)

ValoresPara se especificar as posições iniciais em pixels mais precisamente:

P { background-position: 70px 10px; background-repeat:repeat-y; background-image: url(background.gif) }

Valores PercentuaisPodemos também utilizar valores percentuais para especificar as posi-ções iniciais:

P { background-position: 75% 50%; background-image:url(background.gif) }

Propriedade backgroundCom esta propriedade podemos definir de uma única vez, todas as outraspropriedades de fundo já mencionadas. Ela possui os seguintes valores: <background-color> | <background-image> | <background-repeat> |

Página: 24

WEBDESIGNER


<background-attachment> | <background-position>

P { background: #CCFFCC url(fundo.gif) repeat-y topright }

Esta regra será aplicada para qualquer parágrafo (tag <p>), configuran-do-o com a imagem fundo.gif, a cor de fundo #CCFFCC, com repetiçãovertical (repeaty-y), alinhado ao topo (top) e a direita (right).

POSIÇÕESA propriedade position permite que especifiquemos a forma deposicionamento de um elemento, utilizando referências relativas ou ab-solutas:

Posicionamento absolutoEsta linha de comando abaixo, diz ao browser para posicionar tags <h4>exatamente a 100 pixels do canto esquerdo e exatamente 43 pixels abai-xo do topo de sua janela.

H4 { position: absolute; left: 100px; top: 43px }

Left indica a distância entre o elemento e o lado esquerdo da janela etop indica a distância entre o elemento e o topo da janela.

Para definir as distâncias, podemos utilizar as unidades já vistas anteri-ormente, como pixels, valores percentuais, pontos, polegadas e etc.

O posicionamento é muitíssimo utilizado hoje em dia em páginas dinâmi-cas, pois podemos posicionar parágrafos, palavras especificas, gifs, jpegs,filmes em quicktime, ou seja qualquer coisa.

Posicionamento relativoDiferente do posicionamento absoluto, este posicionamento permite queo controle seja feito apenas dentro do elemento relativo ao elementoespecificado:

I { position: relative; left: 40px; top: 10px }Este regra se aplica a todas as tags <i> para que elas tomem distância aesquerda em 40 pixels e ao topo em 10 pixels, tendo como referência aposição que o objeto ocuparia caso não utilizassemos position.

Página: 25

WEBDESIGNER


CONTROLANTO ELEMENTOS POSICIONADOS

widthControla a largura do elemento posicionado, através das unidades jáverificadas como valores percentuais, pixels, pontos, polegadas etc:

DIV { position: absolute; left: 200px; top: 40px; width:150px }

Cria uma divisão <div> com posicionamento absoluto à 200 pixels naesquerda e 40 pixels do topo, com uma largura de 150 pixels.

heightControla a altura do elemento posicionado, através das unidades jáverificadas:

DIV { position: absolute; left: 200px; top: 40px; height:150px }

Cria uma divisão <div> com posicionamento absoluto à 200 pixels naesquerda, 40 pixels ao topo, e com uma altura de 150 pixels.

OverflowPermite controlar o que acontecerá com o conteúdo caso este ultrapas-se as medidas de width e heigth especificadas:

DIV { width: 150px; height: 150px; overflow: scroll }

Valores posíveis:

Visible – todo o conteúdo será exibido, mesmo que este ultrapasse asmedidas de altura e largura especificadas.Hidden – não exibe o conteúdo que ultrapassou as medidas de altura elargura especificadas.Auto – controla automaticamente se deverá exibir ou não o conteúdodentro dos limites estabelecidos.Scroll – exibe o conteúdo porém com uma barra de rolagem (scrollbar).

Página: 26

WEBDESIGNER


O PODER DA INVISIBILIDADE

visibilityControla a visibilidade de elementos dentro do browser:

H4 { visibility: hidden }

Faz com que todas as tags <h4> fiquem escondidas.

Valores possíveis:

visible – faz com que o elemento se torne visível.hidden – faz com que o elemento se torne invisível.Inherit – herda a visibilidade do elemento pai.

clipEsta propriedade permite controlar exatamente qual parte do elementoserá visível e qual parte será invisível:

H2 { clip: rect(10px 200px 100px 40px) }

Faz com que todas as tags <h2> tenham uma região em retângulo (so-mente esta forma é suportada até o momento), com inicio em 10 pixels àesquerda e 200 pixels ao topo com o tamanho inicial de 100 pixels delargura por 40 pixels de comprimento.

z-indexQuando posicionamos múltiplos elementos e eles se sobrepõe, utilizamosa propriedade z-index para especificar qual deverá aparecer primeiro:

H2 { position: relative; left: 10px; top: 0px; z-index: 10 }H1 { position: relative; left: 33px; top: -45px; z-index: 1 }

Posiciona as tags <h2> e <h1> relativamente, à 10 x 33 pixels à esquer-da e 0 x –45 pixels ao topo fazendo com que a tag <h2> se sobreponhaa tag <h1> devido ao seu z-index ser maior.

Página: 27

WEBDESIGNER


DICAS E TRUQUES PARA ESTILOS EM CSSVamos dar uma olhada em alguns truques para criar stylesheets avan-çados:

Utilize nomes de estilos semelhantes a tags em htmlVeja o código da figura 1 onde a classe cor vem precedida do nome realda cor a ser utilizada.

Duplique valores de propriedadesPara se ter certeza que um parágrafo irá ser azul, por exemplo, utilize apropriedade font-color como azul no estilo css e na tag <font color> dohtml.

Esconda elementos desnecessáriosDeixe-os com a propriedade invisível, assim eles não irão atrapalhar,caso haja algum imprevisto na exibição da página.

Exercício:Neste exercício, podemos constatar facilmente a aplicação dos estilosem um documento HMLT. Digite o código a seguir no Bloco de Notas esalve-o como impressão.htm.

Impressão.htm

<html><head><title>TESTANDO IMPRESSÃO</title><style type=”text/css”> h3 {color: green; font-size: 37px; font-family: impact} p.car {text-indent:1cm; background:yellow; font-family: courier} a {color: red; font-size: 20px; font-family: arial} b {color: blue} P.pri {color: green} /*o texto do parágrafo ver-de*/ P.seg {color: purple} P.ter {color: gray}</style></head><body><font face=”verdana” size=”2">

Página: 28

WEBDESIGNER


<a href=”javascript:window.print()”> <img src=”imprimir.gif” border=”0"></a> <b>CLIQUE AQUI PARA IMPRIMIR</b></font><br><br><font face=”verdana” size=”1"><h3>Estilos CSS: Uma ferramenta para fazer páginaslegais!</h3><p class=”car”>Impressione seus amigos e detone seusinimigos!</p><br><br><a>AQUI ESTÁ MEU PRIMEIRO ESTILO</a><br><br><b>Todas as minhas páginas irão usar estilos em<i>quatro</i> semanas.</b><br><br><br>Para armazenar estilos em outro arquivo, utilize:<br><br><p align=”center”><LINK REL=stylesheetHREF=”meuestilo.css” TYPE=”text/css”><br></p><p class=”pri”>O primeiro parágrafo, com uma classchamada “primeiro”.</P><p class=”seg”>O segundo parágrafo, com uma class cha-mada “segundo”.</P><p class=”ter”>O terceiro parágrafo, com uma classchamada “terceiro”.</P></font></body></html>

Página: 29

WEBDESIGNER


Página: 30

WEBDESIGNER


CONCEITOS BÁSICOS DE JAVASCRIPT

O QUE É JAVASCRIPTJavascript é uma linguagem de programação leve, com capacidade deorientação à objeto. Poderosa e dinâmica, permite controles e funciona-lidades às páginas da Web criando “vida” e destaque na interação daspáginas com o usuário. O Javascript no lado do cliente, permite querotinas executáveis possam ser introduzidas em páginas Web sem anecessidade de compilação (por isso é script!), isso significa que a pági-na não precisa ser estática, mas pode ser interativa com o usuário,controladora e gerenciadora do browser e criar códigos HTML dinamica-mente em tempo de execução.

A linguagem se assemelha com o C, C++ e Java, com constructors comoif, while, loop e operadores em geral. Esta semelhança é apenas sintáti-ca, pois em sua forma de programação, tem peculiaridades diferentesdas outras linguagens, pois não precisa de declarações específicas devariáveis e acesso à memória, e etc.

Javascript não é Java, esta realidade acaba com muitos equívocos queas pessoas fazem acreditando inclusive que é uma versão simplificadada linguagem Java. Além da semelhança sintática (porém incompleta),tanto o Java quanto o Javascript proporcionam funcionalidades à Web, epodem assim serem “bons parceiros”. O Javascript pode controlar o com-portamento do Browser e seu conteúdo, mas não pode desenhar gráfi-cos e se relacionar com uma rede, por exemplo. O Java por seu lado,não pode controlar o comportamento do browser, mas pode criar gráfi-cos, controlar a rede, processos do lado cliente ou do servidor entre ou-tras utilidades. O javascript pode interagir e controlar applets em Javaem uma página da Web. Ainda nesta apostila discutiremos mais esteassunto no tópico “Integrando Javascript com Java”.

O nome inicial da linguagem foi LiveScript, mas por uma questão deMarketing foi mudada quase que instantaneamente para JavaScript. Éde propriedade da Netscape, e difere-se em forma e conteúdo da lingua-gem criada pela Microsoft (de menor poder e inferior) Jscript.

Página: 31

WEBDESIGNER


O QUE JAVASCRIPT PODE FAZERO JavaScript possui muitas capacidades. Note porém que estas estãorelacionadas exclusivamente ao browser e ao documento HTML.

Enumerando suas capacidades e suas diferenças temos que:

A linguagem não tem capacidade de gerar gráficos, mas pode mani-pular dinamicamente gráficos em um documento HTML, como tam-bém tabelas, frames, forms, fontes e etc;

A linguagem não tem capacidade de manipular arquivos do lado doservidor (por razões de segurança)

A linguagem não suporta qualquer tipo de comunicação em rede, comexceção de acessos à URL’s, CGI’s, Emails e Newsgroups.

CARACTERÍSTICAS DA LINGUAGEM

Distinção entre maiúsculas e minúsculasJavaScript é uma linguagem que diferencia as letras maiúsculas dasminúsculas (case-sensitive). Isso significa que as palavras-chaves, vari-áveis, nomes de funções e outros indentificadores devem sempre serdigitados com uma capitalização consistente. A palavra reservada “while”por exemplo, deve ser digitada como “while” mas não como “While” ou“WHILE”. De maneira similar, online, Online, OnLine e ONLINE são vari-áveis distintas com nomes diferentes.

Por outro lado, o HTML não faz distinção entre maiúsculas e minúsculas.Para não haver confusão, é interessante o uso de letras maiúsculas emcódigos HTML e letras minúsculas em códigos JavaScript.

ComentáriosQualquer texto após // é considerado comentário e é ignorado peloJavaScript. Também, qualquer texto entre /* e */ é tratado como co-mentário.

Um fato muito curioso é que o JavaScript reconhece a abertura de comen-tário do HTML <!— só que não reconhece o fim do comentário em HTML—>. Isso se torna muito útil, pois a inserção de rotinas em páginas HTMLpodem produzir um efeito muito desastroso em browsers que não supor-tam JavaScript. Por isso é aconselhável deixar a rotina entre o comentáriodo HTML afim de que ela fique oculta caso isso aconteça. Exemplo:

Página: 32

WEBDESIGNER


<HTML><HEAD><script language=”javascript”><!— ... local do script ...//—></script>

Literais, Identificadores e Palavras reservadasUm literal é um dado que aparece diretamente em um programa.

Os identificadores são simplesmente nomes atribuídos a variáveis e fun-ções e são tratados como propriedades de objetos. A partir do JavaScript1.2, eles são utilizados para proporcionar identificações que geram loops(loop label) no código em JavaScript. O primeiro caracter de umidentificador deve ser um caracter em ASCII (maiúsculo ou minúsculo),um underline ( _ ) ou um sinal de cifrão ($). Nunca são aceitos númerosno início dos nomes dos identificadores.

Literais Identificadores12 Inull valor_bruto“olha o texto” t30true _wnadafalse $string

Como em todas as linguagens, JavaScript também possui palavras re-servadas. Elas são palavras que não podem ser utilizadas comoidentificadores (nomes de variáveis, nomes de funções e loop labels).Veja abaixo as palavras reservadas do JavaScript.

alert escape Mathparsefloat setTimeout argumentseval menubar parseIntArray find moveBypersonalbar statusbar blurfocus moveTo printstop Boolean framesname prompt stringbreak do function

Página: 33

WEBDESIGNER


null typeof calleeFunction NaN prototypetoolbar caller historynetscapeRegExp top captureEventshome Number reseaseEventstoString case elseif return varclearInterval Infinity ObjectresizeBy unescape clearTimeoutinnerHeight open resizeTounwatch close innerWidthopener routeEvent valueOfclosedisFinite outerHeight scroll voidconfirm isNaN outerWidthscrollbars watch constructorjavaPackages scrollBy whilecontinue export importswitch window Datelength pageXOffset scrollTowith status defaultfalsein this defaultStatuslocation pageYOffset selfdelete for newtruedocument locationbar parentsetInterval

A tabela a seguir mostra algumas palavras reservadas que não são utili-zadas em JavaScript, mas fazem parte do padrão ECMA e também doJava. Foram assim classificadas para uma futura integração comJavaScript.

abstract final intprivatesynchronized boolean floatinterface protected throwsbyte goto longpublic transient catchconst enum finallythrow

Página: 34

WEBDESIGNER


char implements nativeshort double classdebugger extends supertry instanceof packagestatic

TIPOS DE DADOS

NuméricosTodos o números em JavaScript, diferente das outras linguagens, sãotratados como ponto-flutuante. Eles compreendem do maior número ±1.7976931348623157x10308 e do menor número ± 5x10324.

Quando um número aparece em Javascript, denominamo-os de literalnumérico. Um literal numérico pode ser precedido por um sinal de me-nos para classificá-lo como negativo, porém este operador não faz parteda sintase numérica.

O JavaScript suporta literais numéricos inteiros, ou seja, os inteiros debase 10 que se iniciam desde o zero e estão entre –9007199254740992(-253) e 9007199254740992 (253). Suporta literais numéricos no formatooctal, ou seja, números na base 8 (são sequências de até oito dígitosentre 0 e 7). Tem ainda os literais numéricos hexadecimais, que se inici-am com “0x” ou “0X”, seguidos de um dígito de 0 à 9 ou letras de A à Fque são utilizados para representar valores de 10 à 15.

Os literais de ponto flutuante exclusivamente, são utilizados para deno-tar números científicos. Um número em ponto flutuante, é parte de umnúmero seguido de sua parte decimal e fatorial.

AlfanuméricosOs literais alfanuméricos são qualquer sequência de caracteres (strings)com letras, números, pontos e etc, que estão entre aspas simples ouaspas duplas. Para se inserir aspas simples ou aspas duplas em strings,é preciso alternar o uso delas, por exemplo acrescentar aspas duplasem uma palavra que contenha asplas simples e vice-versa. Outra manei-ra é fazer uso das sequências de escape. Como em outras linguagens,as sequencias de escape são ativadas com barras invertidas:String Significado‘JavaScript’ Utilizando aspas simples

Página: 35

WEBDESIGNER


“JavaScript é poderoso” Utilizando aspas duplas‘nome=”José Roberto”’ Combinando aspas simples

com duplas“Linguagem ‘JavaScript’” Combinando aspas duplas

com simples‘wterm=\”ttyp7\”’ Utilizando seqüência de

escape

As sequências de escape podem ser resumidas em:

Seqüência Significado\b Backspace\f Avanço de página\n Nova linha\r Retorno de Carro\t Tabulação\’ Apóstrofo ou Aspas Simples\” Aspas Duplas\\ Barra invertida\xxx Um caracter xxx em hexadecimal\uxxxx Um caracter xxxx em hexadecimal

BooleanosOs valores booleanos são somente dois: true (verdadeiro) ou false (fal-so). Eles são geralmente resultados de comparações feitas no decorrerde um programa. Estas comparações são chamadas de controles emestruturas, com por exemplo em if/else onde estes dois valores terãorepresentação fundamental. Eles podem ser comparados com “on”, “sim”ou “yes”, “1” para true e “off”, “não” ou “no”, “0” para false.

DatasO objeto Date no JavaScript não tem papel fundamental como os outrostipos de dados mostrados previamente. A Data em JavaScript pode serconsiderada como uma classe ou objeto, onde através de suas proprie-dades, torna-se possível a extração de data e hora. O Objeto Date écriado com o operador new e o constructor Date() (o operador new seráanalisado no livro mais adiante).É possível a conversão de datas para strings, usando tanto a hora localcomo no formato GMT.

Página: 36

WEBDESIGNER


FunçõesUma função é um pedaço de um código fonte de um programa, que podeser executado quantas vezes forem desejadas. Em JavaScript, não dife-rente de outras linguagens, as funções aceitam parametros ou argumen-tos, especificando o valor ou os valores que a função deverá trabalhar.

Uma característica interessante, é que as funções em JavaScript sãocomo tipos de dados. Em muitas linguagens, incluindo Java, as funçõestem características sintáticas, ou seja, elas podem ser definidas einvocadas, mas não se comportam como dados. O fato é que destamaneira, as funções em JavaScript permitem uma série de flexibilidadespara a linguagem. Pois é possível armazená-las em variáveis, arrays eobjetos, fazendo possível inclusive a utilização de propriedades e méto-dos destes componentes individualmente. Veja abaixo como uma fun-ção em JavaScript pode ser definida:

function potenciacao(x,y) { return x^y}

E agora como ela pode ser acessada:

...var x=4;var y=2;z = potenciacao(x,y);...

Esta é uma das maneiras, pois elas também podem ser definidas comoliterais:

var z = new function(“x”,”y”, “return x^y”);

Quando uma função é definida assim, ela é chamada de “função anôni-ma”, pois ela não tem nome. Este é um método diferente para se escre-ver funções, mas algumas vezes poderá ser um pouco desastroso seuuso, considerando que todo o corpo da função será codificado em umastring entre aspas.

Página: 37

WEBDESIGNER


Um Objeto em JavaScript, é uma coleção de “pedaços” de dados,referenciado em propriedades de objetos. Para se referenciar a uma pro-priedade de um objeto, primeiro deve-se referenciar ao próprio objetoseguido por um período e o nome de sua propriedade. Por exemplo, oobjeto image tem propriedades chamadas width e height (largura e altu-ra respectivamente) e poderíamos acessá-las assim:

image.widthimage.height

DECLARAÇÃO DE VARIÁVEISAntes de se utilizar variáveis em JavaScript, é preciso declará-las. Asvariáveis são declaradas com a palavra-chave “var”:

var x;var total;

Pode-se também declarar várias variáveis em uma única declaração var:

var x, total;

E pode-se combinar declaração de variáveis com inicialização de variá-veis também:

var x=0;var x=0, y=30, z=10;var linguagem=”JavaScript 1.2”;

Se na declaração da variável, não for especificado nenhum valor, a vari-ável será definida, mas seu valor será “undefined” ou seja “indefinido”.Elas também podem aparecer em parte de estruturas da linguagem comoo loop for/in, por exemplo:

for (var x=0; x < 10; x++) document.write(x, “<BR>”);

Variáveis declaradas com “var” são permanentes, e não podem serdeletadas com o operador delete a partir do JavaScript 1.2. Declarando-as desta maneira, previne-se também que sejam consideradas peloJavaScript como “variáveis globais”, ou seja, que possam ser enxergadas

Página: 38

WEBDESIGNER


em um script por inteiro. Para distinguirmos este papel da palavra-chave“var”, vamos entender como funcionam os escopos das variáveis.

O escopo de uma variável é a região do programa onde ela foi definida.Uma variável global por exemplo possui um escopo “Global” – isso signi-fica que ela está definida em qualquer parte do script. As variáveis decla-radas dentro de uma função, serão reconhecidas apenas no corpo destafunção. A isso chamamos de “variáveis locais”, e possuem um escopo“Local”. Uma variável em um corpo de uma função, declarada como lo-cal, não afetará o valor de uma variável global que se situa fora da fun-ção. Analise o exemplo a seguir, onde o código imprime no Browser, apalavra “local”:

var escopo = “global”; //Declara uma variávelglobal.function ChecaEscopo() { var escopo = “local”; //Declara uma variá-vel local com o

// mesmo nome da global. document.write(escopo); //Usa a variável lo-cal, ignorando

//a global.}ChecaEscopo();

Agora no código a seguir, iremos omitir a palavra-chave “var” e se decla-rarmos a variável interna da função com o mesmo nome da externa, estareceberá seu valor e poderá inclusive mudá-lo:

escopo = “global”; // Declara uma variávelglobal, sem “var”.function ChecaEscopo() { escopo = “local”; // Muda o valor da vari-ável global. document.write(escopo); // Imprime no Browser:local.}ChecaEscopo();

Página: 39

WEBDESIGNER


OPERADORES

Operadores gerais e seus significadosPara programadores em C, C++ e Java, os operadores em JavaScriptnão representam problemas. Pois a semelhança é muito grande. Na ta-bela abaixo, estão relacionados os operadores, seu tipo e uma brevedescrição de seus significados. Maiores detalhes virão a seguir.

Operador Tipo Significado. Objeto, propriedade Acesso à pro-

priedades[] Array, inteiro Index de umarray( ) Função, argumentos Chamada defunção++ Números Incremento— Números Decremento- Números Subtração~ Inteiro Complemento

Bitwise! Booleano Complemento

Lógicodelete Variáveis Apaga uma

propriedadenew Chamada de constructor Cria um novo

objetotypeof Qualquer Retorna um

tipo de dadovoid Qualquer Retorna um

valor não-definido

*, /, % Números Multiplica-ção, Divisãoe Resto

+, - Números Adição e Sub-tração

+ Strings Concatenação<< Inteiros Deslocamento

à esquerda

Página: 40

WEBDESIGNER


>> Inteiros Deslocamentoà direita com

Sinal>>>> Inteiros Deslocamento

à direita<, <= Números ou strings Menor que,

Menor ouigual

>, >= Números ou strings Maior que,Maior ouigual

= = Qualquer Teste deigualdade

!= Qualquer Teste de diferença

= = = b Qualquer Teste deidentidade

!= = b Qualquer Teste de não-identidade

& Inteiros Bitwise E(AND)

^ Inteiros Bitwise XOR| Inteiros Bitwise OR&& Booleano E lógico|| Booleano OU lógico?: Booleano, qualquer Operador

ternáriocondicional

= Variável, qualquer Designação*=, /=, %=, Variável, qualquer Designação

com operador+=, -=, <<= e>>=

>>>=, &=, ^= e Qualquer Determinadormúltiplo|=

Página: 41

WEBDESIGNER


Comportamento individual dos operadoresNão diferente das outras linguagens, e principalmente de todo o padrãoaritmético, o JavaScript utiliza as simbologias existentes para efetuarcálculos aritméticos em suas expressões. Veja a seguir os pricipais sím-bolos aritméticos, operadores e seus significados:

Operador Significado+ Adciona operadores numéricos, concatena

strings.- Subtrae operadores numéricos, e converte

dados em números etransforma valores positivos em negativos.

* Operador de Multiplicação./ Operador de Divisão. Diferente da lingua

gem C, o JavaScriptconsidera todos os números como ponto-flu-tuante.

% Operador Módulo. Retorna o resto de umadivisão.

++ Incremento. Adiciona +1 a variável desig-nada. Pode serutilizado antes ou depois desta variável.

— Decremento. Opera de modo inverso ao incremento, subtraindo –1da variável designada. Pode ser utilizadaantes ou depois davariável.

== Igualdade. Retorna verdadeiro (true) se doisoperandos sãoiguais ou falso (false) se são diferentes.

!= Diferença. Opera de modo inverso ao de igual-dade, retornandoverdadeiro (true) se dois operandos sãodiferentes ou falso(false) se são iguais.

=== Identicidade. Compara dois operandosretornando verdadeiro(true) se eles forem idênticos sem qualquer tipo de conversão.

Página: 42

WEBDESIGNER


!== Não identicidade. Compara dois operandosretornando verdadeiro(true) se eles forem exatamento o opostoum do outro.

< Menor que. Compara dois operandos retornandoverdadeiro (true)se o primeiro for menor do que o segundo.

> Maior que. Compara dois operandos retornandoverdadeiro (true)se o primeiro for maior do que o segundo.

<= Menor ou igual que. Compara dois operandosretornando verdadeiro (true) se o primeirofor menor ou igual ao segundo.

>= Maior ou igual que. Compara dois operandosretornandoverdadeiro (true) se o primeiro for maiorou igual ao segundo.

&& E lógico. Compara expressões ou testes lógicos, verificando seo primeiro operando E o segundo são verda-deiros.

|| OU lógico. Compara Expressões ou testeslógicos, verificando seo primeiro operando OU o segundo são ver-dadeiros.

! NÃO lógico. Compara expressões ou testeslógicos, verificando a negação entreeles.

& E em nível de bit.| OU em nível de bit.^ XOU em nível de bit.~ NÃO em nível de bit.<< Deslocamento de bit à esquerda.>> Deslocamento de bit à direita.>>> Deslocamento de bit à diretira (zero fill)

Página: 43

WEBDESIGNER


ESTRUTURAS DA LINGUAGEM

ifÉ o controle fundamental de condições que permite a tomada de deci-sões. Existem várias maneiras de ser utilizado, por exemplo sem o usode chaves “{ }”, onde a necessidade de se veficar somente se a expres-são é verdadeira ou falsa, executando apenas uma afirmação:

if (meu_email == null) meu_email = “[email protected]”;

ou

if (meu_email == null) meu_email =“[email protected]”;

ou

if (!meu_email) meu_email = “[email protected]”;

Agora com o uso de chaves, por existir mais de uma afirmação após oteste condicional:

if ((meu_email == null) || (meu_email == “”)) { meu_email = “undefined”; alert(“Por favor, entre com um endereço de emailválido.”);}

Pode-se também utilizar a cláusula else, afim de criar-se rotinas dife-rentes quando as condições forem satisfeitas de maneira diferente:

if (visitante == null) visitante = prompt(“Seja Bem-Vindo! Por favor,digite seu nome”); document.write(visitante);else { document.write(visitante);}

Página: 44

WEBDESIGNER


Outro aspecto importante é o uso correto da indentação ou dos ninhosde if, afim de tornar o código, não propenso à erros e elegante. A medidaque o teste condicional se torna mais complexo, mais complexa se tornasua indentação e maior é o número de chaves “{}” necessárias nacodificação. Veja o exemplo abaixo, talvez uma codifição diferente paraeste caso, poderia levar o programador à loucura procurando o erro deseu teste, mas seguindo este padrão, além de tornar a visualização deerros mais fácil, será também mais difícil comete-los.

x = 3;y = 2;w = z = 3;if (x == y) { if (w == z) { document.write(“x é igual à y e w é igual àz”); }} else { if (w != z) { document.write(“w não é igual à z”); } else { document.write(“w é igual à z”); }}

else ifO else if se torna uma cláusula muito útil dentro de ninhos de if, porpermitir ao programador suprimir linhas no código fonte. Eu aconselho aprogramadores que ainda não estão experientes, a olharem com carinhocódigos utilitários como este, principalmente se estivermos falando deprogramação na Web. Pois quanto mais compacto for o seu código fon-te, tanto em JavaScript quanto HTML, menor a quantidade de bytes queterão de trafegar do servidor ao browser do usuário, levando assim me-nos tempo e deixando as páginas e programas na Web muito mais rápi-dos. Verifique as duas formas de codificação abaixo, e repare como autilização do else if pode tornar um trecho do código mais compacto.

Página: 45

WEBDESIGNER


Sem else if:

if (w == 1) { alert(“executou bloco 1”);} else { if (w == 2) { alert(“executou bloco 2”); } else { if (w == 3) { alert(“executou bloco 3”); } else { if (w == 4) { alert(“executou bloco 4”); } } }}

Com else if:if (w == 1) { alert(“executou bloco 1”);} else if (w == 2) { alert(“executou bloco 2”);} else if (w == 3) { alert(“executou bloco 3”);} else if (w == 4) { alert(“executou bloco 4”);}

switchSe a junção do if, else, else if já lhe surpreendeu, o switch então vaideixá-lo de queixo caído. Mas acredite, as vezes não é a melhor soluçãopara seus problemas, dependendo do caso é melhor a utilização de ifmesmo. Vamos com o switch dar uma melhor programação para nossoexemplo anterior. Note que em sua sintaxe é necessária a utilização dapalavra chave break.

Página: 46

WEBDESIGNER


switch (w) { case 1: alert(“executou o bloco 1”); break; case 2: alert(“executou o bloco 2”); break; case 3: alert(“executou o bloco 3”); break; case 4: alert(“executou o bloco 4”); break;}

whilePermite que o JavaScript execute ações repetidas vezes, de acordo como controle do programador. É chamado de laço, assim como o for ou odo while. Ele funciona avaliando uma expressão se é verdadeira, e exe-cutando assim suas operações. Quando a condição não for mais satis-feita, o programa sai deste laço e continua a execução do resto do script.O nome da volta que um script executa em um laço como este é chama-do de loop. Repare no exemplo abaixo, onde o laço while será executa-do enquanto a variável count for menor que 10, escrevendo em cadalinha do browser seu respectivo valor.

w_cont = 0;while (w_cont <= 10) { document.write(w_cont + “<br>”); w_cont++;}

do/whileO do while funciona exatamente como o while, porém está presenteapesar da versão JavaScript 1.2. A principal diferença entre o while, éque neste caso, a condição é avaliada no rodapé do laço. Veja nossoexemplo anterior escrito agora com o do while:

Página: 47

WEBDESIGNER


w_cont = 0;do { document.write(w_cont + “<br>”);} while (w_cont++ < 10);

forEste comando também é um laço de execução. Seu objetivo é facilitar acompreensão das rotinas, facilitando a programação de laços, uma vezque o controle do incremento é feito de maneira clara na declaração docontrole, e não através de testes condicionais que por vezes se tornamarriscados em laços como o while. A sua sintaxe é muito particular, poisé necessário que se inicialize a variável, declare o teste afim de determi-nar seu fim e indique seu tipo de incremento. Veja agora nosso exemploescrito com o laço for:

for (w_cont = 0; w_cont <= 10; w_cont++) { document.write(w_cont + “<br>”);}

for/inO for/in é semelhante ao laço for, porém é muito útil para efetuar aces-sos à arrays e objetos. Sua sintaxe básica é:

for (variável in objeto) { ... rotina ...}

Onde variável deve ser o nome de uma variável, um elemento de umarray ou a propriedade de um objeto. Veja no exemplo abaixo, a criaçãode um array, utilizando o operador new e o constructor array() e a utili-zação do for/in para percorrer seus elementos:

alunos = new Array();alunos[0] = “João”;alunos[1] = “Maria”;alunos[2] = “Felipe”;alunos[3] = “Roberto”;alunos[4] = “Catarina”;

Página: 48

WEBDESIGNER


for (nomes in alunos) { document.write(“Elemento: “ + nomes + “; Alu-no: “ + alunos[nomes] + “<br>”);}

LabelsLabels são “marcas” que podem ser atribuidas à pedaços de códigos emum script, deixando assim estas marcas acessíveis (futuramente) emqualquer parte de um script e em qualquer lugar através do uso da pala-vra reservada goto utilizada no programa para realizar pulos estratégi-cos, desviando-se de sua execução normal. Na estrutura switch, esteslabels são utilizados, e no JavaScript em geral podem ser utilizada qual-quer palavra contanto que não seja uma palavra reservada. Estes labelssão distintos de nomes de variáveis e funções, portanto não se preocupecom possíveis semelhanças entre nomes de labels e nomes de variá-veis ou funções que possam acontecer.

Marcando um pedaço de código com um label (geralmente em laços deloops como o while, do while, for e for/in) você pode utilizar comandosbreak, continue ou exit em qualquer lugar do seu programa. Veja nossoexemplo anterior sendo marcado com um label com o mesmo nome davariável utilizada em seu laço (pois como disse, não há problemas, pode-ria ser o mesmo nome ou outro qualquer):

alunos:for (nomes in alunos) { document.write(“Elemento: “ + nomes + “; Alu-no: “ + alunos[nomes] + “<br>”);}

breakO break faz com que um loop ou um switch sejam interrompidos imedi-atamente após sua execução. Pode ser utilizado em conjunto com umlabel para se referenciar qual loop deve ser interrompido. Quando utiliza-do com o switch, ele impede que o script dê continuidade nas próximasrotinas de identificação da cláusula. Isso pode até parecer estranho, masseu uso neste caso é imprescindível. Veja o exemplo abaixo, onde exis-tem dois laços for um dentro do outro, e de acordo com determinadascondições testadas com if, os laços serão interrompidos por break atra-vés da identificação com labels:

Página: 49

WEBDESIGNER


LoopExterno:for (i = 0; i < 10; i++) { LoopInterno: for (j = 0; j < 10; j++) { if (j > 3) break; if (i == 2) break LoopInterno; if (i == 4) break LoopExterno; document.write(“i = “ + i + “; j = “ + j +“<br>”); }}document.write(“Final i = “ + i + “; j = “ + j +“<br>”);

continueAo contrário do break, o continue executa um pulo na execução dolaço, para seu próximo loop, ou seja, executa uma nova interação oureinicia um loop. Pode também ser utilizado em conjunto com um label,referenciando quando ou onde o pulo deve ser executado. Veja o exem-plo anterior, agora utilizando em uma das condições o continue:

LoopExterno:for (i = 0; i < 10; i++) { LoopInterno: for (j = 0; j < 10; j++) {

if (j > 3) break;

if (i == 2) break LoopInterno;

if (i == 4) continue LoopExterno; document.write(“i = “ + i + “; j = “ + j +“<br>”); }}document.write(“Final i = “ + i + “; j = “ + j +“<br>”);

Página: 50

WEBDESIGNER


varPropicia a declaração explicita de variáveis criando assim uma proprie-dade para esta variável utilizada com outras palavras reservadas da lin-guagem. Pode também ser utilizado nas declarações das variáveis noslaços for e for/in. Veja os exemplos abaixo:

var w, x, z = 0;var i;var visitante = “Seja Bem-Vindo, amigo!”;for (var j = 0; j <= 10; j++) document.write(j +“<br>”);for (var nomes in alunos) document.write(“Elemento:“ + nomes + “; Aluno: “ + alunos[nomes] + “<br>”);

functionÉ a declaração utilizada para se definir uma função em JavaScript. Suasintaxe básica é:

function nome_da_função([arg1 [, arg2 [..., argn]]]){ declarações}

O nome da função será considerado como um identificador, portanto nãopode ser uma string ou uma expressão. Ele poderá ser precedido deargumentos entre parênteses separados por vírgulas, e estes argumen-tos poderão ser utilizados no corpo da função. O corpo da função é com-posto por declarações de programação em JavaScript como se fossemrotinas, e deverão estar entre as chaves desde seu início até seu fim.Estas declarações do corpo da função, não são executadas quando afunção é definida, ao contrário, elas são compiladas e associadas com oobjeto new function, para ser executados somente quando a função forinvocada. Em JavaScript é possível também a programação de funçõesrecursivas, ou seja, funções que invocam a si mesmas.

returnÉ utilizado para especificar o valor retornado por uma função. Sua sinta-xe é:

Página: 51

WEBDESIGNER


return [ expressão ];

Quando o return é executado, a expressão é avaliada e retornada comofalor da função. Uma função tem sua execução suspensa quando o returné executado, mesmo que ainda haja declarações no resto do corpo dafunção. Pode também ser utilizado sem nenhuma expressão, apenaspara determinar o fim de execução de uma função sem nenhum valor deretorno. Neste caso, se for avaliado o valor retornado da função, oJavaScript mostrará um valor indefinido (undefined).

withO with é uma declaração muito interessante para otimizar e reduzir, emalguns momentos, a programação em JavaScript. Em JavaScript, o trata-mento de objetos, classes ou funções no script é dado de forma hierárqui-ca, dificultando em alguns momentos a sua programação. Sua sintaxe é:with (objeto) declarações

O que ele faz é colocar o objeto na frente do escopo das correntes emexecução, ou seja, criar um atalho para a hierarquia do objeto. Repareno exemplo abaixo, a diferença do código sem e com o with:

frames[1].document.forms[0].address_field.value =“”;frames[1].document.forms[0].name.value = “”;frames[1].document.forms[0].email.value = “”;

ou

with (frames[1].document.forms[0]) { address_field.value = “”; name.value = “”; email.value=””;}

A desvantagem de se utilizar o with é que ele torna o script em JavaScriptmais lento do que o código equivalente sem ele. Ainda por cima, ocor-rem problemas quase que inexplicáveis quando se define funções ou se

Página: 52

WEBDESIGNER


inicializa variáveis no corpo desta instrução. Por isso, dou aqui uma dicapara quando isso acontecer e você quiser optmizar o código fonte semutilizar o with. Veja:

var form = frames[1].document.forms[0];form.address_field.value = “”;form.name.value = “”;form.email.value = “”;

CONCEITOS BÁSICOS DE ASPASP são as iniciais de Active Server Pages, ou mais precisamente “Ser-vidor Ativo de Páginas”, uma linguagem de programação desenvolvidapela Microsoft para se criar páginas dinâmicas para a Web. Ela foi de-senvolvida a partir do Windows NT Server com IIS3 e hoje em dia já estámais difundida em Windows 2000 com IIS4 ou superior. Além disso, tam-bém é possível sua configuração no programa Personal WebServer doWindows 98. Para que o ASP funcione, necessariamente precisaremoster um destes três recursos, pois na verdade o servidor processa umscript que no final o usuário navegando só enxergará o conteúdo emHTML, sendo que todo o script ficará transparente a ele.

A linguagem é muito utilizada quando nas páginas Web é necessária aconsulta a qualquer banco de dados, mas serve também para o envio erecebimento de correio eletrônico (os famosos WebMails são escritostambém com ASP) ou para a criação de rotinas rotativas utilizadas naautenticação e identificação de usuários e senhas, para leituras de arqui-vos textos e uma infinidade de outras aplicações.

REQUISITOS DE SISTEMAPara utilizar ASP em suas páginas, são necessários alguns requisitosque devem ser preenchidos, caso contrário elas não funcionarão. Para aedição das páginas, você pode utilizar o FrontPage ou o Visual InterDev,programa parte do Microsoft Visual Studio, mas como já dito anterior-mente, você também pode utilizar livremente o Bloco de Notas doWindows aplicando tudo o que já aprendemos.

Antes de mais nada:

Página: 53

WEBDESIGNER


Certifique-se que o computador que hospedará as páginas roda WindowsNT Server, Windows NT Workstation, Windows 98, Windows 2000 ouWindows XP.

Certifique-se que você possui o Microsoft Internet Information Server(IIS), o ou o Personal Web Server (PWS) instalado neste computador. OWindows NT 4.0 vem com a versão 2.0 do IIS, que não é suficiente.Procure na Internet (http://www.microsoft.com/iis) o IIS versão 3 ou 4.

Se você pretende usar os recursos de acesso a bancos de dados, certi-fique-se que os dados estejam acessíveis através de ODBC. Você preci-sará de um driver de ODBC instalado e funcionando no servidor. Se vocêoptou por usar o Access, instale uma versão 7.0 (95) ou superior noServidor. Isto garantirá a presença do driver ODBC e facilitará a criaçãodos seus bancos de dados. Se você preferir utilizar o SQL Server, garan-ta que o driver ODBC esteja instalado.

Se você pretende usar os recursos de acesso a bancos de dados, verifi-que a existência de uma “Fonte de Dados” ODBC para este banco dedados. Isto é feito usando a opção “ODBC” do “Painel de Controle” doWindows. Se for usar o SQL Server, crie um usuário com direito paraacessar este banco de dados.

Crie um diretório para guardar as páginas ASP no seu servidor. Incluaeste diretório na lista do IIS/PWS, dando direito de “Execute/Execução”.As páginas ASP só podem ser rodadas a partir de um diretório com odireito de “Execução”. Não habilite a opção de “Read/Leitura”, para au-mentar sua segurança neste diretório.

VBSCRIPT E ASPA linguagem ASP se originou quando o VBScript e o ActiveX foram fun-didos para utilização na Web. O Active X entrando como uma coleção deobjetos e o VBScript como uma linguagem de script (semelhante aoJavaScript em termos de fins de utilização) com heranças do Visual Basic,porém com algumas limitações por motivos de segurança.

As funções em Active X captam parâmetros de entradas de dados, ma-nipula-os de acordo com suas funções e os envia para um componentede saída.

Página: 54

WEBDESIGNER


Uma vez que a linguagem ASP é usada apenas em alguns “pedaços” depáginas HTML, existe um símbolo para diferenciar o que é programaçãoHTML e o que é programação ASP: <% código asp %>.

Veja o exemplo abaixo:

<html><head><title>DHTML</title></head><body bgcolor=”#FFFFFF”><p>Meu primeiro código em ASP</p><%response.write “<p>Meu primeiro código em ASP</p>”%><p><%=”Meu primeiro código em ASP”%></p></body></html>

No exemplo acima, o texto “Meu primeiro código em ASP” foi escrito nobrowser de três formas diferentes. O primeiro modo não é mistério paravocê, pois foi em HTML puro. Já o segundo e o terceiro, utilizam ASP. Nosegundo, digamos que é ASP puro e no terceiro uma mistura de HTMLcom ASP. É possível a criação de páginas com a mesclagem de códigosHTML e ASP, e a única exigência para isso é que o código da páginatenha pelo menos uma linha em ASP e sua extensão seja .asp. Somen-te assim o servidor irá distinguir quais páginas deve processar antes deenviar o conteúdo ao Browser.

Simbologia e Convenção da linguagem<% - Marca o início do trecho de código ASP.

%> - Marca o final do trecho de código ASP.

‘ (aspas simples) - Utilizadas para comentários dentro do código .

= - Utilizado no modo de programação por mesclagem de códigos HTMLe ASP.

Página: 55

WEBDESIGNER


OBJETOS ASP

Objeto ResponseO objeto Response é toda informação enviada do servidor para o browserdo usuário.

Response.write

Sintaxe: response.write texto/variável

Envia textos ao browser, muito interessante na construção de tex-tos que mixam textos prontos e variáveis.

Response.redirectSintaxe: response.redirect(URL)

Redireciona o browser do usuário para a página especificada. Estafunção só pode ser usada antes do browser divulgar alguma infor-mação na tela.

Response.buffer

Sintaxe: response.buffer = true/false

Avisa o browser do usuário que a página só deverá ser mostradaapós estar totalmente carregada. É interessante para usar com afunção response.redirect.

Response.cookie

Sintaxe: response.cookie(<nome do cookie>)... = tipo de dado

Grava informações no cookie do browser.

Objeto RequestSe refere a todos os dados requisitados pelo servidor ao cliente, ou seja,qualquer informação requisitada pelo servidor ao browser do usuário.

Página: 56

WEBDESIGNER


Request.form

Sintaxe: request.form(“nomedavariavel”) ou request(“nomedavariavel”)

Recupera valores de variáveis enviadas via formulário pelo método post.

Request.QueryString

Sintaxe: request.querystring(“nomedavariavel”) ourequest(“nomedavariavel”)

Recupera valores de variáveis enviadas via formulário pelo méto-do get.

Request.servervariables

Sintaxe: request.servervariables(“valorsolicitado”)

Recupera informações sobre o browser do usuário e sobre o servi-dor WEB.

Request.cookies

Sintaxe: request.cookies(“nomedocookie”)(“parâmetrodocookie”)

Recupera informações do cookie do browser do usuário.

Request.clientcertificate

Sintaxe: request.clientcertificate(parâmetro[sub-parâmetro])

Mostra informações sobre o certificado de segurança do usuário.Somente é usado em sites com transmissão segura de dados(https).

Objeto ServerPermite o acesso e a configuração de algumas funções e métodos dire-tamente ligados ao servidor.

Página: 57

WEBDESIGNER


Server.ScriptTimeOut

Sintaxe: server.ScriptTimeOut = tempo

Configura o tempo máximo para execução e carregamento da página. Otempo padrão é de 90 segundos.

Server.HTMLEncode

Sintaxe: server.HTMLEncode(“string”)

Utilizado para codificar textos que contenham caracteres especiais, taiscomo > ou <. Codificado, o Browser saberá que o caractere faz parte dotexto, e então, este caractere não será interpretado com código. É usadotambém para codificar caracteres de outros idiomas, de forma que oBrowser identifique o idioma, e então exiba os símbolos corretos na tela.

Server.URLEncode

Sintaxe: request.URLEncode(“string”)

URLs (Uniform Resource Locators) são usados para requisitar arquivose informações em servidores WEB. Muitas vezes, os URLs não contémapenas no nome do arquivo, mas também carregam com eles valores devariáveis no formato QueryString. O comando Server.URLEncode trans-forma strings de texto em strings no formato QueryString.

Server.MapPath

Sintaxe: server.MapPath(“path virtual”)

Retorna o path físico do arquivo a partir do path virtual.No caso de arqui-vos que não tenham homônimos no mesmo domínio, esta função é ca-paz de localizar o arquivo no domínio e retornar o path físico.

Server.CreateObject

Sintaxe: Set nomedadoaoobjeto = Server.CreateObject(“iddoobjeto”)

É utilizado para gerar instâncias de componentes para uso nos Scripts.

Página: 58

WEBDESIGNER


Por padrão, cada objeto criado a partir do componente é automatica-mente destruído ao acabar o processamento da página.

Com este objeto, podemos utilizar o componente DataBase Access paraacessarmos dados em um Banco de Dados Access, SQL Server, DBF,Oracle etc. O componente Database Access permite a consulta, inser-ção, alteração e exclusão de dados nos bancos de dados. Tais opera-ções são, geralmente, feitas através de comandos SQL (Structured QueryLanguage), a qual será exemplificada mais abaixo. Os comandos e mé-todos mais utilizados estão citados abaixo:

Conecta-se ao componente.Set Conn = Server.CreateObject(“ADODB.Connection”)

Abre o Banco de Dados.Conn.Open “nome da ligação ODBC ou path do BD”, “UserID”,

“Senha”

Executa commandos em SQL.Set rsQuery = Conn.Execute(“string SQL”)

Abre um banco de dados para gravação.Set RS = Server.CreateObject(“ADODB.RecordSet”)

Abre a “tabela” com a conexão “Conn” mostrada no exemplo acima.RS.Open “tabela”, Conn , adOpenKeyset, adLockOptimistic

Para que estes componentes funcionem, é necessário que o arquivoadovbs.inc seja incluído no arquivo.

O componente RS configurado acima, permite a utilização de outros re-cursos, dentre eles, destacamos:

Rs.bof – Retorna Verdadeiro caso o ponteiro tenha chegado ao inicio doarquivo.Rs.eof – Retorna Verdadeiro caso o ponteiro tenha chegado ao final doarquivo.Rs.movefirst – Posiciona o ponteiro para o início do arquivo.Rs.movelast – Posiciona o ponteiro para o fim do arquivo.Rs.movenext – Move o ponteiro um registro a frente do atual.

Página: 59

WEBDESIGNER


Rs.moveprevious – Move o ponteiro um registro atrás do atual.Rs.addnew – Adciona um novo registro ao banco de dados.Rs.update – Salva alterações realizadas no banco de dados.


If...Then...ElseÉ o controle fundamental de condições que permite a tomada de deci-sões. Verifica se uma variável está de acordo ou não com o critério deseleção.

<html><body><%variavel_qualquer = “X”If variavel_qualquer = “Y” then response.write “A variável não é X”Else response.write “A variável é X”End if%></body></html>

Select CasePermite um maior controle sobre o conteúdo de variáveis.

<html><body><%variavel_qualquer = “Z”select case variavel_qualquer case “A” response.write “Esta variável é A” case “B” response.write “Esta variável é B” case “C” rsponse.write “Esta variável é C” case else

Página: 60

WEBDESIGNER


response.write “Esta variável é Z”end select%></body></html>

Do…LoopExecuta uma determinada rotina até que sua condição se torne verda-deira.

<html><body><%x = 0Do Until x=10 x = x + 1Loopresponse.write x%></body></html>

For…NextExecuta uma determinada rotina até que o contador atinja um valor de-terminado.

<html><body><%For i=1 to 50 response.write inext%></body></html>

While…WendExecuta uma determinada rotina até que a condição imposta sejaalcançada.

Página: 61

WEBDESIGNER


<html><body><%q = “SELECT * FROM cadastro where cidade = ‘SãoPaulo’”connstring = “DBQ=c:\teste.mdb;Driver={MicrosoftAccess Driver (*.mdb)}”Set Conexao =Server.CreateObject(“ADODB.Connection”)Conexao.Open connstring, “”,””Set tabela = Conexao.Execute (q)While not tabela.EOF response.write tabela(“nome”).valuewend%></body></html>

TIPOS DE DADOSO VBScript herda do Visual Basic o tipo de dado Variant, que pode arma-zenar qualquer tipo de dados, e de acordo com este tipo, é possívelclassifica-lo de acordo com os subtipos relacionados abaixo:

Subtipo DescriçãoEmpty Variável que contém 0 para valores numéri-

cos e (string vazia) para strings.Null Variável que não contém dado algum.Boolean Contém True ou FalseByte Números inteiros entre 0 e 255Integer Números inteiros no intervalo de -32,768 a

32,767.Long Números inteiros no intervalo de -

2,147,483,648 a2,147,483,647.

Single Números com ponto flutuante de precisãosimples na faixa de-3.402823E38 a -1.401298E-45 para númerosnegativos e1.401298E-45 a 3.402823E38 para númerospositivos.

Página: 62

WEBDESIGNER


Double Números com ponto flutuante de dupla precisão na faixa de-1.79769313486232E308 a -4.94065645841247E-324 para númerosnegativos e 4.94065645841247E-324 a1.79769313486232E308 paranúmeros positivos.

Date (Time)Dados no formato de Data (data e tempo) nafaixa de 1 dejaneiro de 100 a 31 de dezembro de 999.(January 1, 100 aDecember 31, 9999).

String Contém dados no formato de string, que podem ter atéaproximadamente 2 bilhões de caracteres detamanho.

FUNÇÕES DE DADOS

FUNÇÕES DE VERIFICAÇÃOIsArray

Sintaxe: IsArray(nomedavariavel)

Retorna True caso a variável seja um array, caso contrário, retornaFalse.

IsDate

Sintaxe: IsDate(nomedavariavel)

Retorna True caso o valor da variável possa ser convertido em data,caso contrário, retorna False.

IsEmpty

Sintaxe: IsEmpty(nomedavariavel)

Página: 63

WEBDESIGNER


Retorna True caso a variável contenha o valor 0 ou “”, caso contrário,retorna False.

IsNull

Sintaxe: IsNull(nomedavariavel)

Retorna True caso a variável não contenha dados válidos.

IsNumeric

Sintaxe: IsNumeric(nomedavariavel)

Retorna True caso o valor da variável possa ser convertido para algumtipo de dado numérico.

Funções de Conversão

CBool

Sintaxe: CBool(nomedavariavel ou expressão)

Retorna True ou False (0 ou 1), de acordo com a expressão analisadaou com o valor da variável.

CByte

Sintaxe: CByte(nomedavariavel ou expressão)

Converte a expressão em um dado do subtipo Byte.

CDate

Sintaxe: CDate(nomedavariavel)

Converte a expressão em um dado do subtipo Date.

CDbl

Sintaxe: CDbl(nomedavariavel ou expressão)

Página: 64

WEBDESIGNER


Converte a expressão em um dado do subtipo Double.

CInt

Sintaxe: CInt(nomedavariavel ou expressão)

Converte a expressão em um dado do subtipo Integer.

CLng

Sintaxe: Clng(nomedavariavel ou expressão)

Converte a expressão em um dado do subtipo Long.

CStr

Sintaxe: CStr(nomedavariavel ou expressão)

Converte a expressão em um dado do subtipo String. Qualquer outrotipo de dado, dos listados acima, pode ser convertido em String.

CSng

Sintaxe: CSng(nomedavariavel ou expressão)

Converte a expressão dada em um dado do subtipo Single.

Manipulando Números

Abs

Sintaxe: Abs(número)

Retorna o módulo do valor de entrada.

Atn

Sintaxe: Atn(número)

Página: 65

WEBDESIGNER


Retorna o valor do arcotangente do número (resposta em radianos)

Cos

Sintaxe: Cos(angulo)

Retorna o valor do cosseno do ângulo (entrar ângulo em radianos)

Exp

Sintaxe: Exp(numero)Retorna o valor de e (euler) elevado ao valor de entrada (e^x)

Fix

Sintaxe: Fix(número)

Retorna a parte inteira do número.

Int

Sintaxe: Int(número)

Retorna a parte inteira do número. Caso o número seja negativo, éretornado o valor imediatamente menor.

Log

Sintaxe: Log(número)

Retorna o valor do Log do número na base e.

Sin

Sintaxe: Sin(ângulo)

Retorna o valor do seno do ângulo em radianos.

Página: 66

WEBDESIGNER


Sqr

Sintaxe: Sqr(numero)

Retorna o valor da raiz quadrada do número que deve ser maior ou iguala zero.

Tan

Sintaxe: Tan(ângulo)

Retorna o valor da tangente do ângulo (entrar angulo em radianos).

Manipulando Datas

CDate

Sintaxe: CDate(nomedavariavel)

Converte a expressão dada em um dado do subtipo Date.

Date

Sintaxe: Date

Retorna a data do sistema (a data que consta no relógio do servidor).

DateSerial

Sintaxe: DateSerial(year, month, day)

Retorna um valor do subtipo data para um determinado valor de ano,mês e dia, ou seja, entrando esses 3 valores respectivamente, a funçãoDateSerial retorna a data respectiva no formato Date.

Day

Sintaxe: Day(data)

Página: 67

WEBDESIGNER


Retorna um número entre 1 e 31, representando o dia de uma determi-nada data.

Hour

Sintaxe: Hour

Retorna um número entre 0 e 23 representando a hora de uma determi-nada expressão de tempo.

IsDate

Sintaxe: IsDate(nomedavariavel)Retorna True caso o valor da variável possa ser convertido em data,caso contrário, retorna False.

Minute

Sintaxe: Minute(tempo)

Retorna um número entre 0 e 59 representando os minutos de uma de-terminada expressão de tempo.

Month

Sintaxe: Month(data)

Retorna um número entre 1 e 12 representando o mês de uma determi-nada data.

Now

Sintaxe: Now

Retorna a data e o horário do relógio do servidor.

Second

Sintaxe: Second(tempo)

Página: 68

WEBDESIGNER


Retorna um número entre 0 e 59 representando os minutos do sistema(o minuto que consta no relógio do servidor).

Time

Sintaxe: Time

Retorna o horário do relógio do sistema.

TimeSerial

Sintaxe: TimeSerial(hora,minuto,segundo)

Retorna uma expressão do tipo Date contendo o tempo para uma dadahora, minuto e segundo.

WeekDay

Sintaxe: Weekday(date)

Retorna o dia da semana de uma determinada data.

Year

Sintaxe: Year(data)

Retorna o ano de uma determinada data.

Manipulando Strings

Asc

Sintaxe: Asc(string)

Retorna o caracter (pela tabela ANSI) correspondente à primeira letra dastring de entrada.

Chr

Sintaxe:Chr(codigo)

Página: 69

WEBDESIGNER


Retorna o caracter correspondente a um determinado codigo (numerico)da tabela ANSI.

Cstr

Sintaxe: CStr(expressão)

Converte uma expressão para o formato String. Caso uma variável sejaum número, ela será convertida numa string que represente tal número.Se for uma data, essa data será convertida numa string que representetal data.

InStr

Sintaxe:InStr(posicaoinicial, string, stringdecomparação)

Retorna a posição da primeira ocorrência de uma string dentro da outra.É possível delimitar a partir de qual caracter será feita tal procura.

Lcase

Sintaxe: LCase(string)

Converte todos os caracteres de uma string para minúsculas.

Left

Sintaxe: Left(string, numerodecaracteres)

Retorna um determinado número de caracteres a partir do lado esquer-do da string.

Len

Sintaxe: Asc(string/expressão)

Retorna o número de caracteres numa string (contando espaços em bran-co), ou, no caso de variáveis numéricas, ou no formato Date, retorna aquantidade de bytes necessários para armazenar aquela expressão.

Página: 70

WEBDESIGNER


Ltrim

Sintaxe: LTrim(string)

Retorna a cópia da string de entrada, sem os espaços no começo dolado esquerdo.

Mid

Sintaxe: Mid(string, posicaoinicial, tamanho)

Função usada para “cortar” uma string. Delimita-se a posição inicial, astring e a quantidade de caracteres a partir da posição inicial que devemser “capturados”.

Right

Sintaxe: Right(string, numerodecaracteres)

Retorna um determinado número de caracteres a partir do lado direito dastring.

Rtrim

Sintaxe: RTrim(string)Retorna uma cópia da string de entrada, mas sem os espaços no final dastring.Trim

Sintaxe: Trim(string)

Retorna uma cópia da string de entrada, mas sem os espaços no início eno final da string.

Ucase

Sintaxe: UCase(string)

Converte toda a string para MAIÚSCULAS.

Página: 71

WEBDESIGNER


Operadores

+Sintaxe: resultado = expressão1 + expressão2

Usado para somar dois valores numéricos._

Sintaxe:resultado = número1 - número2

Faz a subtração entre dois números ou indica valor negativo numa ex-pressão numérica.

*Sintaxe: resultado = expressão1 * expressão2

Usado para multiplicar dois valores numéricos.

/Sintaxe: resultado = numerador/denominador

Usado para dividir um valor por outro.

\

Sintaxe: resultado = numerador/denominador

Usado para dividir um valor por outro, e retornar um valor inteiro.

And

Sintaxe: resultado = expressão1 and expressão2

Usado para “validar” um conjunto de duas expressões lógicas. Se, esomente se as duas expressões tiverem como resulado TRUE, éretornado TRUE. Caso contrário, é retornado FALSE.

&

Sintaxe: resultado = string1 & string2

Usado para somar duas cadeias de caracteres (strings).

Página: 72

WEBDESIGNER


EqvSintaxe: resultado = expressão1 Eqv expressão2

Usado para “validar” um conjunto de expressões lógicas

^Sintaxe: resultado = número1^número2

Usado para “elevar” um número a outro.

ImpSintaxe: resultado = expressão1 Imp expressão2

Usado para “validar” um conjunto de expressões lógicas (ImplicaçãoLógica)

ModSintaxe: resultado = número1 Mod número2

Usado para dividir dois números e retornar apenas o resto.

NotSintaxe: resultado = Not expressão

Usado para inverter, ou negar o resultado de uma comparação.

OrSintaxe: resultado = expressão1 or expressão2

Usado para “validar” um conjunto de expressões lógicas.

XorSintaxe: resultado = expressão1 Xor expressão2

Usado para “validar” um conjunto de expressões lógicas

Página: 73

WEBDESIGNER


CONCEITOS BÁSICOS DE PHPAcrônimo de Hypertext Preprocessor (Pré-processador de Hipertexto), oPHP é uma linguagem semelhante ao ASP, assim como o JavaScript ésemelhante ao VBScript e assim como o Delphi é semelhante ao VisualBasic, ou seja, as finalidades são as mesmas. É uma linguagem de pro-gramação embutida ou não em códigos de HTML, processada ao ladodo Servidor e transparente ao navegante da Web. E agora você se per-gunta: Por que PHP? Há tantas outras opções como ASP, Cold Fusion,Perl, Java, Phyton...

Realmente existem várias alternativas, porém o PHP é uma lin-guagem de Código Aberto, projetada especificamente para traba-lhar na Web e neste ambiente ela se distingue, pois pode acessare consultar um banco de dados com apenas 2 ou 3 linhas de códi-go. O sistema de processamento de scripts PHP é muito bemoptimizado para os tempos de resposta necessários dos aplicativosWeb, podendo mesmo fazer parte do próprio servidor Web, me-lhorando ainda mais seu desempenho. Para programadores queestiverem habituados com Basic, o ASP com certeza será a me-lhor opção, mas para aqueles que conhecem C e procuram pormais profissionalismo em suas páginas escolhem o PHP.

REQUISITOS DE SISTEMAPara efetivar a programação do lado do Servidor, você vai precisar deum servidor Web em sua máquina. Pode ser um IIS na plataformaWindows ou Apache tanto no Windows quanto nos ambientes Unix (Unixe Linux). Hoje em dia, o Apache detem 60% da Web, na plataforma Unix.Com base em testes, o PHP foi bem mais rápido neste ambiente, masnão haverá problema se você quiser utiliza-lo no Windows 98, WindowsNT ou Windows 2000 como já mencionado.

Para a programação, basta um editor de textos como o Bloco deNotas ou o Vi do Linux.Vamos assumir neste livro que você esteja utilizando algum sistemaoperacional Microsoft, para fins de estudo de todo o conjunto de DHTMLque é apresentado.

Primeiramente, entre no site http://www.php.net e baixe a versão mais

Página: 74

WEBDESIGNER


recente do binário para Windows do PHP, este é um executável e prati-camente fará todo o resto sozinho, basta apenas você seguir a orienta-ção do programa de instalação. Lá você encontrará também receitaspara a instalação do PWS do Windows ou a configuração do PHP no IISdo NT ou Windows 2000.

SIMBOLOGIA E CONVENÇÃO DA LINGUAGEM<?php - Marca o início do trecho de código PHP.

?> - Marca o final do trecho de código PHP.

// - Utilizado para comentários dentro do código.

ESTRUTURA DO CÓDIGO<html><head><title>DHTML</title></head><body bgcolor=”#FFFFFF”><p>Meu primeiro código em PHP</p><?phpecho(“<p>Meu primeiro código em PHP</p>”);?><p><?php echo(“Meu primeiro código em PHP”); ?></p></body></html>

No exemplo acima, o texto “Meu primeiro código em PHP” foi escrito nobrowser de três formas diferentes. O primeiro modo não é mistério paravocê, pois foi em HTML puro mais uma vez. Já o segundo e o terceiro,utilizamos PHP. No segundo, digamos que é PHP puro e no terceiro umamistura de HTML e PHP. Este parágrafo não lhe é estranho, realmente,as semelhanças na codificação como ASP são incríveis, mas ao contrá-rio, desta forma a extensão do arquivo deveria ser .php para que funcio-nasse. Somente assim o servidor irá distinguir quais páginas deve pro-cessar antes de enviar o conteúdo ao Browser.

Página: 75

WEBDESIGNER



IfUm dos recursos mais importantes da linguagem de programação, per-mite que se executem linhas somente quando certas condições foremverdadeiras.

<html><body><?php$variavel_qualquer = “X”;if ($variavel_qualquer == “Y”) { echo “A variável não é X”;} else { echo “A variável é X”;}?></body></html>

Outras formas de utilização:

If (5 < 4) echo (“Isto será escrito”);

If ($h < 0) { Echo (“Negativo”);} else { Echo (“Positivo”);}

if ($h < 0) { Echo (“Negativo”);} elseif ($h == 0) { Echo (“Zero”);} else { Echo (“Positivo”);}

Página: 76

WEBDESIGNER


SwitchTesta o conteúdo de uma variável

Switch ($variavel_qualquer) { Case “A”: Echo “Esta variável é A”; Break; Case “B”: Echo “Esta variável é B”; Break; Case “C”: Echo “Esta variável é C”; Break; Default: Echo “Esta variable é Z”;}

WhileTesta a condição antes e depois de cada interação e executa o loopnovamente somente se a condição for verdadeira.

$x = 11;while (—$x) { if (verifica_valor($x) == “error”) { break; } ++$num}$x = 0;while (++$x) { if (numero_impar($x) == “true”) { continue; // pula para a próxima interação } ++$num}

Página: 77

WEBDESIGNER


do...whileSemelhante ao loop While, porém a condição é testada no final decada interação.

$x = 0;do { echo “Esta é a linha $x”;} while (++$x < 10);

ForPermanece no Loop até que o valor da condição seja estabelecido.For ($x = 0; $x < 10; ++$x) { Echo “Esta é a linha $x”;}

TIPOS DE DADOSA linguagem PHP tem três tipos básicos de dados: integer, double estring. Muitas linguagens contém um tipo de dado lógico chamado Booleanpara representar valores lógicos True e False. A PHP ao invés disso,utiliza expressões dos outros três tipos que são avaliadas como verda-deiro e falso, sendo 0 como um valor falso e qualquer valor acima delecomo verdadeiro.

Uma variável é declarada automaticamente em PHP quando se atribuium valor a ela. A atribuição é realizada como operador de atribuição (=).No capítulo Operadores, veremos com mais detalhes estas atribuições.

Toda variável em PHP é precedida pelo símbolo de cifrão ($) e sua con-versão é realizada de maneira simples, ou seja, uma variável do tipoInteger pode ser transformada a qualquer momento em String sem mai-ores complicações:

$x = 10; // $x é um integer com valor 10$x = 2.5 // $x agora é um valor double de 2.5$x = “PHP” // $x agora é uma string com valor PHP

Página: 78

WEBDESIGNER


FUNÇÕES DE DADOS

Funções de Verificação

Gettype()Determina o tipo de dado de uma variável. Retorna se ela é integer,double, string, array, object, class ou “unknow type” (desconhecido).

If (gettype($x) == “integer”) { Echo “Esta é uma variável integer”;}

Settype()Especifica explicitamente o tipo de uma variável.

$x = 2.5 // $x é doubleSettype($x, “integer”); // converteu $x para integerIf (settype($x, “array”)) { Echo “Conversão bem-sucedida.”;} else { Echo “Erro na conversão.”;}Isset() e Unset()A função Unset() é utilizada para destruir uma variável e a função Isset()é utilizada para determinar se uma variável já recebeu um valor ou não.

$x = “PHP”;if (isset($x)) { echo “A variável já recebeu um valor”;}unset($x); // removemos o valor de $xif (isset($x)) { echo “A variável já recebeu um valor”; // issonão será impresso} else { echo “A variável não possui nenhum valor”; //isso será impresso}

Página: 79

WEBDESIGNER


Empty()Retorna verdadeiro caso a variável contenha o um valor zero ou se foruma string vazia. Caso contrário retornará falso.

$x = 10;echo empty($x); // exibirá falso

$x = 0;echo empty($x); // exibirá true

$x = “PHP”;echo empty($x); // exibirá falso

$x = “”;echo empty($x); // exibirá true

$x = 2.5;echo empty($x); // exibirá false

unset($x);echo empty($x); // exibirá true

Is...()As funções is_int(), is_integer() e is_long() são funções sinônimas quedeterminam se uma variável é um inteiro.

As funções is_double(), is_float() e is_real() são funções sinônimas quedeterminam se uma variável é um double.

As funções is_string(), is_array() e is_object() são funções sinônimas quedeterminam se uma variável é string, array ou object respectivamente.

Manipulando Datas

CheckdateSintaxe: checkdate(mês, dia, ano);

Valida a data especificada, retorna verdadeiro (true) se a data é valida,senão retorna falso (false)

Página: 80

WEBDESIGNER


Date

Sintaxe: date(formato, [timestamp]);

Formata uma data/hora local, se nenhum carimbo de horário for forneci-do, a hora atual é utilizada.

Getdate

Sintaxe: getdate(timestamp);

Retorna uma matriz associativa com configurações de data/hora para otimestamp especificado.

Gettimeofday

Sintaxe: gettimeofday();

Retorna uma matriz associativa com configurações para o horário atual.

Time

Sintaxe: time();

Retorna o horário atual no formato Unix.

Manipulando Strings

Addslashes

Sintaxe: addslashes(string);

Adciona barras de scape para da string.

Chop

Sintaxe: chop(string);

Remove espaços em branco da string.

Página: 81

WEBDESIGNER


Chr

Sintaxe: chr(ascii);

Retorna o caractere representado pelo código ASCII especificado.

Echo

Sintaxe: echo(string);

Produz uma ou mais strings.

Ltrim

Sintaxe: ltrim(string);

Remove espaços em branco no início da string.

Str_replace

Sintaxe: str_replace(pattern, replace, string);

Substitui na String todas as ocorrencias de “pattern” por “replace”.

Strlen

Sintaxe: strlen(string);

Retorna o comprimento da string.

Strtolower

Sintaxe: strtolower(string);

Converte a string especificada em minúsculo.

Strtoupper

Sintaxe: strtoupper(string);

Converte a string especificada em maiúsculo.

Página: 82

WEBDESIGNER


Substr

Sintaxe: substr(string, start, [length]);Retorna o comprimento (length) em caracteres na string da posiçãoespecificada por “start”.

Trim

Sintaxe: trim(string);Remove os espaços em branco no início e no final da string especificada.

Operadores

+Usado para somar dois valores, sejam eles números ou variáveis.-Usado para subtrair dois valores, sejam eles números ou variáveis.*Usado para multiplicar dois valores, sejam eles números ou variáveis./Usado para dividir dois valores, sejam eles números ou variáveis.%Usado para calcular o módulo (resto da divisão) entre dois valores, se-jam eles números ou variáveis.- (como operador unário)Usado como um valor único para neggar um número, ou seja, tornar umnúmero positivo em negativo e um número negativo em positivo, sejameles números ou variáveis.=Operador de atribuição variável, o que estiver a esquerda do sinal, rece-be o valor enquanto o que estiver a direita, atribui o valor.==Verifica se um número ou uma variável é igual à outra.<Verifica se um número ou uma variável é menor do que a outraVerifica se um número ou uma variável é maior do que a outra.<<>>>

Página: 83

WEBDESIGNER


<=Verifica se um número ou uma variável é menor ou igual do que a outra.>=Verifica se um número ou uma variável é maior ou igual do que a outra.!=Verifica se um número ou uma variável é diferente da outra.<>Verifica se um número ou uma variável é diferente da outra.&&Operador (E), utilizado para “validar” um conjunto de duas expressõeslógicas.||Operador (OU), utilizado para “validar” um conjunto de expressões lógicas.AndSimilar ao &&.OrSimilar ao ||..Utilizado para concatenar strings.

JUNTANDO TUDOAgora já temos base suficiente para começara a programar em DHTML.Nos exemplos a seguir, tentaremos conciliar tudo o que foi aprendido atéagora, tanto em HTML, como CSS, JavaScript, ASP e PHP.

Vamos desenvolver um pequeno banco de dados em Access que seráacessado via um driver ODBC por ASP e PHP. O mesmo exemplo apre-sentado de três formas, simplesmente em HTML e depois nestas duaslinguagens citadas.

Basicamente, teremos uma pequena tabela de nome DHTML que pode-rá ser arrastada para qualquer parte dentro do browser, e seu visual serámuito parecido com as janelas do windows. Dentro, teremos uma planilhadividida em três colunas que apresentará compras de produtos, com assuas respectivas datas e preços.

Página: 84

WEBDESIGNER


Só nisso, englobaremos programação em JavaScript (arrastar e soltarda janela e ordenação do conteúdo da planilha) e Estilos CSS (visualgráfico da janela e da planilha). O resto é por conta do PHP e do ASP.Antes de mais nada, crie um arquivo chamado “estilos.css”, dentro deleprogramaremos todos os stylesheets utilizados no exemplo:

CONTEÚDO DO ARQUIVO ESTILOS.CSS:1. .table_border {background-color: #c0c0c0;2. BORDER-BOTTOM: rgb(128,128,128)

thin inset;3. BORDER-LEFT: rgb(210,215,215) thin

outset;4. BORDER-RIGHT: rgb(128,128,128) thin

inset;5. BORDER-TOP: rgb(210,215,215) thin

outset; }6.7. .td_titulo {background-color: #033330;8. font-family: verdana;9. font-size: 8pt;10. color: #FFFFFF;

Página: 85

WEBDESIGNER


11. font-weight: bold;12. cursor: hand;}13.14. .td_corpo {background-color: #C0c0c0;15. BORDER-BOTTOM: #C0C0C0;16. BORDER-LEFT: #C0C0C0;17. BORDER-RIGHT: #C0C0C0;18. BORDER-TOP: #C0C0C0; }19.20. .div_tabela {background-color: #ffffff;21. position:absolute;22. top:10;23. left:20;}24.25. .planilha { border-style: solid; border-width: 1;26. font-family: verdana;27. font-size: 8pt;28. color: #000000;}29.30. .cabecalho { background-color: #808080;31. border-style: solid; border-width: 1;32. font-family: verdana;33. font-size: 10pt;34. color: #ffffff;35. font-weight: bold;36. text-align: center;37. cursor: hand; }

Assim, acabamos de criar seis classes que serão utilizadas:

Table_borderPossui um background acinzentado, e controla as bordas no estilo decor RGB.

Td_tituloPossui um background esverdeado, configura a fonte para Verdana, ta-manho 8pt (pontos), na cor branca e em negrito. Configura também aaparência do mouse (cursor) no estilo de mãos (hand).

Td_corpoPossui background e bordas no tom acinzentado.

Página: 86

WEBDESIGNER


Div_tabelaConfigura o Layer para transparente (fundo branco), com posição abso-luta e iniciando à esquerda 20 pixels e ao topo 10 pixels.

PlanilhaConfigura o design da planilha, com borda sólida de tamanho 1 e preta,com fonte Verdana de 8 pontos.

CabeçalhoConfigura o cabeçalho da planilha, na cor cinza escuro, com fonte Verdanade 10 pontos, negrito, centralizado e com cursor no estilo de mão.

Agora, crie um arquivo com o nome “dhtml.js”, que conterá nossa pro-gramação de JavaScript:

Página: 87

WEBDESIGNER


CONTEÚDO DO ARQUIVO DHTML.JS:38. // Funções para Movimentação da Janela39.40. var origem = new Array();41. origem[“x”]=20;42. origem[“y”]=10;43.44. var height=100;45. var width=500;46. var capturar=0;47. var offsetTop=0;48. var offsetLeft=0;49.50. function desenhar() {51. tabela.style.left = origem[“x”];52. tabela.style.top = origem[“y”];53. tabela.style.height = height;54. tabela.style.width = width;55. }56.57. function mover() {58. tabela.style.left = origem[“x”];59. tabela.style.top = origem[“y”];60. }61.62. function capturar_mouse() {63. capturar = 1;64. offsetLeft = event.x - origem[“x”];65. offsetTop = event.y - origem[“y”];66.67. }68.69. function soltar_mouse() {70. capturar = 0;71. }72.73. function arrastar() {74. if (capturar == 1) {75. origem[“x”] = event.x - offsetLeft;76. origem[“y”] = event.y - offsetTop;77. mover();78. }79. }80.

Página: 88

WEBDESIGNER


81. // Funções para Ordenação da Planilha82.83. ColunaCorrente = 084. ColunaAnterior = -185.86. function CompararAlpha(a, b) {87. if (a[ColunaCorrente] < b[ColunaCorrente]) {

return -1; }88. if (a[ColunaCorrente] > b[ColunaCorrente]) {

return 1; }89. return 0;90. }91.92. function CompararAlphaIgnorar(a, b) {93. strA = a[ColunaCorrente].toLowerCase();94. strB = b[ColunaCorrente].toLowerCase();95. if (strA < strB) { return -1; }96. else {97. if (strA > strB) { return 1; }98. else { return 0; }99. }100. }101.102. function CompararData(a, b) {103. // Esta função trabalha com formatos de

data mm/dd/yyyy104. datA = new Date(a[ColunaCorrente]);105. datB = new Date(b[ColunaCorrente]);106. if (datA < datB) { return -1; }107. else {108. if (datA > datB) { return 1; }109. else { return 0; }110. }111. }112.113. function CompararDataEuro(a, b) {114. // Esta função trabalha com formatos de

data dd.mm.yyyy115. strA = a[ColunaCorrente].split(“.”);116. strB = b[ColunaCorrente].split(“.”);117. datA = new Date(strA[2], strA[1], strA[0]);118. datB = new Date(strB[2], strB[1], strB[0]);119. if (datA < datB) { return -1; }120. else {

Página: 89

WEBDESIGNER


121. if (datA > datB) { return 1; }122. else { return 0; }123. }124. }125.126. function CompararDataBrasileira(a, b) {127. // Esta função trabalha com formatos de

data dd/mm/yyyy128. strA = a[ColunaCorrente].split(“/”);129. strB = b[ColunaCorrente].split(“/”);130. datA = new Date(strA[2], strA[1],

strA[0]);131. datB = new Date(strB[2], strB[1],

strB[0]);132. if (datA < datB) { return -1; }133. else {134. if (datA > datB) { return 1; }135. else { return 0; }136. }137. }138.139. function CompararNumerico(a, b) {140. numA = a[ColunaCorrente]141. numB = b[ColunaCorrente]142. if (isNaN(numA)) { return 0;}143. else {144. if (isNaN(numB)) { return 0; }145. else { return numA - numB; }146. }147. }148.149. function CompararMoeda(a, b) {150. strA = a[ColunaCorrente].replace(“R$”,

“”);151. strA = strA.replace(“,”,”.”);152. strB = b[ColunaCorrente].replace(“R$”,

“”);153. strB = strB.replace(“,”,”.”);154. numA = new Number(strA);155. numB = new Number(strB);156. if (isNaN(numA)) { return 0; }157. else {158. if (isNaN(numB)) { return 0; }159. else { return numA - numB; }

Página: 90

WEBDESIGNER


160. }161.162. }163.164. function OrdenarTabela(myTable, myCol, myType) {165. // Cria dois arrays dimensionais e os

preenche com o conteúdo da tabela166. var meusDados = document.all(myTable);167. var MinhasLinhas = meusDados.rows.length;168. var MinhasColunas =

meusDados.rows(0).cells.length;169. ColunaCorrente = myCol170. MeuVetor = new Array(MinhasLinhas)171. for (i=0; i < MinhasLinhas; i++) {172. MeuVetor[i] = new Array(MinhasColunas)173. for (j=0; j < MinhasColunas; j++) {174. MeuVetor[i][j] =

document.all(myTable).rows(i).cells(j).innerText175. }176. }177.178. if (myCol == ColunaAnterior) {179. MeuVetor.reverse(); // clicou na mesma

coluna - reverte a ordenação180. }181. else { // clicou em uma nova coluna - faz nova

ordenação182. switch (myType) {183. case “a”:184. MeuVetor.sort(CompararAlpha);185. break;186. case “ai”:187.

MeuVetor.sort(CompararAlphaIgnorar);188. break;189. case “d”:190. MeuVetor.sort(CompararData);191. break;192. case “de”:193. MeuVetor.sort(CompararDataEuro);194. break;195. case “br”:196.

MeuVetor.sort(CompararDataBrasileira);

Página: 91

WEBDESIGNER


197. break;198. case “n”:199. MeuVetor.sort(CompararNumerico);200. break;201. case “v”:202.

MeuVetor.sort(CompararMoeda);203. break;204. default:205. MeuVetor.sort()206. }207. }208.209. // Re-escreve o conteúdo da tabela210. for (i=0; i < MinhasLinhas; i++) {211. for (j=0; j < MinhasColunas; j++) {212. meusDados.rows(i).cells(j).innerText =

MeuVetor[i][j]213. }214. }215.216. ColunaAnterior = myCol; // Armazena a coluna

clicada anteriomente217. return 0;218. }

Este arquivo foi dividido em duas partes, na primeira, temos as funçõespara a movimentação da janela e na segunda os controles de ordenaçãoda planilha:

Declaração de VariáveisNas linhas de 3 à 11, temos as declarações de variáveis, com a criaçãode um array de duas posições, altura e largura, offsets e flag de captura.Nas linhas 46 e 47, temos as declarações de variáveis para Coluna Cor-rente e Coluna Anterior, que serão úteis quando as colunas foremreordenadas.

Função DesenharEsta função, posiciona a tabela nas posições definidas nas declaraçõesde variáveis. A tabela possui um id de nome “tabela” onde é referenciadana função para a manipulação de suas propriedades.

Página: 92

WEBDESIGNER


Função MoverEsta função é utilizada para mover a tabela após um evento do mouse.

Função Capturar_MouseEsta função é tratada quando o mouse é clicado na barra de arrastar esoltar, justamente no click, modificando assim o flag de captura para 1(clicado) e referenciando o valor dos offsets para a posição atual do mousemenos a posição inicial da janela.

Função Soltar_MouseEsta função apenas zera o flag de captura para informar que o mousenão está mais clicado na barra de arrastar e soltar.

Função ArrastarEsta é a principal função, pois ela verifica se o flag de captura está como1 (mouse clicado na barra) e redefine as posições originais para a posi-ção corrente do mouse, menos o offset detectado na função anterior.

Função CompararAlphaEsta função foi criada para verificar o índice alfanumérico crescente oudecrescente de colunas que sejam configuradas como alfanuméricas.

Função CompararAlphaIgnorarTem a mesma utilidade da função anterior, porém ela ignora a sensibili-dade das letras, podendo reordenar de modo crescente ou decrescentemesmo que se utilizem letras capituladas.

Função CompararDataEsta função verifica qual data é maior ou menor para ordenação cres-cente ou decrescente respectivamente, no formato americano.

Função CompararDataEuroIdêntica à função anterior, porém para o formato europeu.

Função CompararDataBrasileiraO nome já diz tudo!

Página: 93

WEBDESIGNER


Função CompararNumericoEsta função foi criada para verificar o índice numérico crescente ou de-crescente de colunas que sejam configuradas como numéricas.

Função CompararMoedaEsta função foi criada para verificar o índice de valor monetário crescen-te ou decrescente de colunas que sejam configuradas como valor.

Função OrdenarTabelaEsta é a função principal, pois ela ordenará as colunas, detectando qualtabela, qual coluna e qual o tipo. O tipo é que estabelece se ela seráordenada com base na função CompararAlpha, CompararAlphaIgnorar,CompararData, CompararDataEuro, CompararMoeda,CompararDataBrasileira, ou CompararNumerico. No final ela grava qualfoi a última coluna ordenada para reverter a ordenação.

Agora, crie um arquivo de nome “dhtml.htm”, que conterá nosso primeiroexemplo de resultado:

Página: 94

WEBDESIGNER


CONTEÚDO DO ARQUIVO DHTML.HTM:1. <HTML>2. <HEAD>3. <TITLE></TITLE>4. <script src=”dhtml.js”></script>5. <link rel=”stylesheet” href=”estilos.css”

type=”text/css”>6. </HEAD>7. <body onLoad=”desenhar()”

onMouseMove=”arrastar()”>8.9. <div id=”tabela” class=”div_tabela”>10. <table border=”1" width=”100%”

class=”table_border”>11. <tr>12. <td class=”td_titulo”

onmousedown=”capturar_mouse()”onmouseup=”soltar_mouse()”>DHTML</td>

13. </tr>14. <tr>15. <td class=”td_corpo”>16. <table border=”0" width=”100%”>17. <tr>18. <td valing=”top” width=”100%”

bgcolor=”#C0C0C0">19. <table border=”0" width=”100%”

cellspacing=”0" bgcolor=”#FFFFFF” style=”border: 1solid #000000" cellpadding=”0">

20. <thead>21. <tr>22. <td width=”30%” class=”cabecalho”

onclick=”OrdenarTabela(‘compras’, 0,‘ai’)”>Produto</td>

23. <td width=”20%” class=”cabecalho”onclick=”OrdenarTabela(‘compras’, 1, ‘br’)”>Datada Compra</td>

24. <td width=”10%” class=”cabecalho”onclick=”OrdenarTabela(‘compras’, 2, ‘v’)”>Preço</td>

25. </tr>26. </thead>27. <tbody id=”compras”>28. <tr>29. <td class=”planilha”>Agua Mineral</

Página: 95

WEBDESIGNER


td>30. <td class=”planilha”

align=”center”>01/12/2002</td>31. <td class=”planilha”

align=”center”>R$ 2,50</td>32. </tr>33. <tr>34. <td class=”planilha”>Detergente</td>35. <td class=”planilha”


align=”center”>R$ 3,70</td>37. </tr>38. <tr>39. <td class=”planilha”>Macarrão

Instantaneo Seven Boys</td>40. <td class=”planilha”


align=”center”>R$ 4,00</td>42. </tr>43. <tr>44. <td class=”planilha”>Bolacha Nestlé

Bono</td>45. <td class=”planilha”


align=”center”>R$ 5,00</td>47. </tr>48. <tr>49. <td class=”planilha”>Farinha Láctea</

td>50. <td class=”planilha”


align=”center”>R$ 7,50</td>52. </tr>53. <tr>54. <td class=”planilha”>Sabão em Pó</td>55. <td class=”planilha”


align=”center”>R$ 8,00</td>57. </tr>

Página: 96

WEBDESIGNER


58. </tbody>59. </table>60. </td>61. </tr>62. </table>63. </td>64. </tr>65. </table>66. </div>67. </BODY>68. </HTML>

Na linha 4, declaramos o alvo para o arquivo “dhtml.js”, que será nossoprovedor de JavaScript.Na linha 5, declaramos o alvo para o arquivo “estilos.css”, que será nos-so provedor de StyleSheet (CSS).Na linha 7, configuramos o evento onLoad da página para executar afunção Desenhar, que vai inicialmente exibir a nossa janela na posiçãoinicial. Além disso, configuramos que no evento onMouseMove do corpoda página, a função arrastar seja executada.

Na linha 9, criamos o layer da tabela, com a classe de estilo div_tabelapara ela se tornar transparente.

Na linha 10, iniciamos a modelagem da tabela “tabela” (nomeada peloid) com a classe table_border.

Na linha 12, uma coluna é classificada como uma tarja de arrastar esoltar através do controle de enventos onMouseDown que faz a chama-da da função capturar_mouse e onMouseUp que faz a chamada para afunção soltar_mouse. Nesta coluna, a classe td_titulo controla o seu es-tilo, principalmente para aparecer o cursor do mouse no formato de mão.

Após a inicialização de outra tabela (linha 16) que será nossa planilha,definimos na linha 20 um thead que significa “cabeçalho da tabela” edentro dela, as colunas Produto, Data da Compra e Preço com a classecabeçalho de nossos estilos CSS. Todas elas possuem o evento onClickque chama a função OrdenarTabela, passando como parâmetro, o nomeda tabela, o número da coluna e o tipo que ela representa.

Página: 97

WEBDESIGNER


Na linha 27, criamos um tbody que significa “corpo da tabela” e ela rece-be o nome de compras, que foi utilizada como parâmetro para a funçãoOrdernarTabela vista anteriormente. Cada linha dentro da tabela, recebe3 colunas configuradas com a classe Planilha e com os respectivos con-teúdos que serão exibidos em seu corpo.

Da linha 58 em diante, fechamos as tags das tabelas e do documento.

Enfim, nosso exemplo foi criado. Tente agora testa-lo, arrastando a jane-la para qualquer canto do Browser e clicando nos cabeçalhos das planilhaspara reordenar seu conteúdo.Vamos verificar agora, como seria construído este exemplo utilizando-seASP e PHP.

Antes, vamos criar um banco de dados no access (dhtml.mdb) com ascolunas Produtos, Data da Compra e Preço (tabela compras) e utilizan-do os mesmos valores do exercício anterior.

Insira os dados na tabela:

Página: 98

WEBDESIGNER


Agora, no Painel de Controle dê um clique duplo no ícone Fontes dedados ODBC para criar uma nova conexão DSN de ODBC com o nomeDHTML.

Clique no botão Adicionar:

Escolha o driver do Microsoft Access e clique em Concluir:

Página: 99

WEBDESIGNER


No campo “Nome da fonte de dados”, digite DHTML, em seguida, cliqueno botão “Selecionar” e escolha o arquivo “dhtml.mdb” que criamos como Access.

Em seguida, clique em Ok. Não esquecendo de percorrer o caminhoonde salvou o arquivo do Access.

Página: 100

WEBDESIGNER


Pronto, assim acabamos de criar uma fonte de dados ODBC que seráacessada pelo código em ASP e PHP.

Vamos iniciar pelo ASP, crie um arquivo com o nome dhtml.asp:

CONTEÚDO DO ARQUIVO DHTML.ASP:1. <%2. Set Conn =

Server.CreateObject(“ADODB.Connection”)3. Conn.Open “DHTML”, “”,””4. SQLQuery = “SELECT * FROM compras”5. Set RS = Conn.Execute(SQLQuery)6. %>7. <HTML>8. <HEAD>9. <TITLE></TITLE>10. <script src=”dhtml.js”></script>

Página: 101

WEBDESIGNER


11. <link rel=”stylesheet” href=”estilos.css”type=”text/css”>

12. </HEAD>13. <body onLoad=”desenhar()”






cellspacing=”0" bgcolor=”#FFFFFF” style=”border: 1solid #000000" cellpadding=”0">

26. <thead>27. <tr>28. <td width=”30%” class=”cabecalho”

onclick=”OrdenarTabela(‘compras’, 0, ‘ai’)”><%=RS.fields(0).name %></td>

29. <td width=”20%” class=”cabecalho”onclick=”OrdenarTabela(‘compras’, 1, ‘br’)”><%=RS.fields(1).name %></td>

30. <td width=”10%” class=”cabecalho”onclick=”OrdenarTabela(‘compras’, 2, ‘v’)”><%=RS.fields(2).name %></td>

31. </tr>32. </thead>33. <tbody id=”compras”>34. <% Do While Not RS.EOF %>35. <tr>36. <td class=”planilha”><%=

RS.fields(0).value %></td>37. <td class=”planilha”

align=”center”><%= RS.fields(1).value %></td>38. <td class=”planilha”

Página: 102

WEBDESIGNER


align=”center”><%=FormatCurrency(RS.fields(2).value,2) %></td>

39. </tr>40. <%41. RS.MoveNext42. Loop43. RS.Close44. Set RS = Nothing45. Conn.Close46. Set Conn = Nothing47. %>48. </tbody>49. </table>50. </td>51. </tr>52. </table>53. </td>54. </tr>55. </table>56. </div>57. </body>58. </html>

Entre as linhas 01 e 06, temos nosso código em ASP inicial. Na linha 02,criamos um novo objeto ADODB.Connection. Em seguida, abrimos afonte de dados odbc DHTML com o objeto Conn criado.

Na linha 4, criamos uma variável SQLQuery com a string em SQL para aconsulta na tabela compras de nosso arquivo em Access. E na linha 5,setamos um recordset com o resultado de uma consulta executada peloobjeto Conn.

O que este código fará é escrever automaticamente o conteúdo do ar-quivo e os nomes das colunas nos cabeçalhos da planilha. Repare queeste código é muito semelhante ao nosso dhtml.htm porém com menoslinhas.

Nas linhas 28, 29 e 30 ao invés de digitarmos os nomes das colunasmanualmente, deixamos que o ASP faça isso, através do nome das co-lunas capturadas pelo recordset.

Entre as linhas 34 e 42, temos o loop principal com o conteúdo do recordset

Página: 103

WEBDESIGNER


e a cada coluna (linhas 35, 37 e 38), programamos a exibição dos valo-res capturados pelo recordset.

Na linha 41 procuramos pelo próximo registro do recordset.

Nas linhas 43 à 46 fechamos todos os objetos criados anteriormente.

Crie agora, um arquivo com o nome dhtml.php:

CONTEÚDO DO ARQUIVO DHTML.PHP:1. <?php2.3. $DSN = “dhtml”;4. $userId = “”;5. $passWd = “”;6.7. function formataPHPdate($data=””) {

Página: 104

WEBDESIGNER


8. $dia = ($data ? substr($data,8,2) :date(“d”,time()));

9. $mes = ($data ? substr($data,5,2) :date(“m”,time()));

10. $ano = ($data ? substr($data,0,4) :date(“Y”,time()));

11. return $dia.”/”.$mes.”/”.$ano;12. }13.14. function formataPHPValor($valor=0) {15. return “R$ “ . number_format($valor, 2,

chr(44), “”);16. }17.18. $link = odbc_pconnect($DSN, $userId, $passWd);19. $query = odbc_do($link, “SELECT * FROM compras”);20.21. ?>22. <HTML>23. <HEAD>24. <TITLE></TITLE>25. <script src=”dhtml.js”></script>26. <link rel=”stylesheet” href=”estilos.css”

type=”text/css”>27. </HEAD>28. <body onLoad=”desenhar()”






cellspacing=”0" bgcolor=”#FFFFFF” style=”border: 1

Página: 105

WEBDESIGNER


solid #000000" cellpadding=”0">41. <thead>42. <tr>43. <td width=”30%” class=”cabecalho”

onclick=”OrdenarTabela(‘compras’, 0, ‘ai’)”><?phpecho odbc_field_name($query, 1); ?></td>

44. <td width=”20%” class=”cabecalho”onclick=”OrdenarTabela(‘compras’, 1, ‘br’)”><?phpecho odbc_field_name($query, 2); ?></td>

45. <td width=”10%” class=”cabecalho”onclick=”OrdenarTabela(‘compras’, 2, ‘v’)”><?phpecho odbc_field_name($query, 3); ?></td>

46. </tr>47. </thead>48. <tbody id=”compras”>49. <?php50.51. while ($row = odbc_fetch_row($query)) {52.53. ?>54. <tr>55. <td class=”planilha”><?php echo

odbc_result($query, 1); ?></td>56. <td class=”planilha”

align=”center”><?php echoformataPHPDate(odbc_result($query, 2)); ?></td>

57. <td class=”planilha”align=”center”><?php echoformataPHPValor(odbc_result($query, 3)); ?></td>

58. </tr>59. <?php60.61. }62.63. ?>64. </tbody>65. </table>66. </td>67. </tr>68. </table>69. </td>70. </tr>71. </table>72. </div>

Página: 106

WEBDESIGNER


73. </BODY>74. </HTML>

Entre as linhas 1 e 21 temos a inicialização de nosso código em PHP.Nas linhas 3, 4 e 5 definimos as variáveis que serão utilizadas para aabertura do banco de dados via ODBC, com o nome do DSN igual àDHTML.

Entre a linha 7 e 12, definimos a função formataPHPDate, que converteum formato de data mm/dd/yyyy para o formato brasileiro dd/mm/yyyy.

Entre as linhas 14 e 16, definimos a função formataPHPValor, que con-verte um formato numérico em uma máscara monetária em Reais. Re-pare que antes, no código em ASP, já tínhamos uma função interna daprópria linguagem que fez este serviço para nós.

Na linha 18 abrimos a conexão ODBC e na linha 19 ativamos uma con-sulta na tabela Compras de nosso arquivo em Access.

Nosso objetivo é o mesmo que o explicado no código em ASP, ou seja,diminuir a quantidade de linhas do código HTML através de uma cons-trução dinâmica do código que pesquise em um banco de dados.

Nas linhas 43, 44 e 45, escrevemos os nomes dos cabeçalhos da planilha,de acordo com o nome das colunas de nosso banco de dados, atravésda função interna do PHP odbc_field_name, que retorna o nome da co-luna da consulta.

Entre a linha 49 e 53 temos um loop while, carregando uma variável $rowcom o conteúdo do que foi encontrado na pesquisa, abaixo dela naslinhas 55, 56 e 57 descarregamos o conteúdo da pesquisa através dafunção interna de resultado das colunas.

Nos três exemplos mostrados acima, o resultado final deverá ser este:

Página: 107

WEBDESIGNER


Enfim, acabamos de aprender DHTML, onde a junção de tecnologiaspermite uma flexibilidade maior na programação e no resultado final daspáginas Web. Cabe agora à você, colocar sua criatividade em prática,pesquisar um pouquinho na Internet e construir seus códigos com tudoisso que aprendeu.

Boa sorte!!!

Celta Informáticahttp://www.celtainformatica.com.br

Documents

Celta Informática - Web designer (pdf apostila)