Sumário
O QUE É HTML DINÂMICO _____________________ 3
HTML
DINÂMICOÉUMSCRIPTNOLADODOC
LIENTE. ___________ 3
HTML
DINÂMICOÉDOM ________________________________ 4
HTML
DINÂMICOÉCSS _________________________________ 4
CONCEITOS BÁSICOS DE HTML ________________ 5
FOLHAS DE ESTILO - CSS _______________________ 5
C
OMOACSS
TRABALHA__________________________________ 5
CSS L
OCAIS, G
LOBAISEL
INKADOS_________________________ 6
E
STILOSEMFONTES______________________________________ 8
C
ONFIGURAÇÃODEF
ONTES________________________________ 8
C
ONTROLANDOOTAMANHODOTEXTO________________________ 9
E
STILOSEMC
ORES_____________________________________ 17
C
ONTROLANDOI
MAGENSDEF
UNDO_________________________ 22
P
OSIÇÕES_____________________________________________ 24
C
ONTROLANTOELEMENTOSPOSICIONADOS____________________ 25
O
PODERDAINVISIBILIDADE_______________________________ 26
D
ICASET
RUQUESPARAESTILOSEMCSS ____________________ 27
CONCEITOS BÁSICOS DE JAVASCRIPT _________ 30
O
QUEÉJ
AVAS
CRIPT____________________________________ 30
O
QUEJ
AVASCRIPTPODEFAZER____________________________ 31
C
ARACTERÍSTICASDAL
INGUAGEM__________________________ 31
T
IPOSDEDADOS________________________________________ 34
D
ECLARAÇÃODEVARIÁVEIS_______________________________ 37
O
PERADORES__________________________________________ 39
E
STRUTURASDAL
INGUAGEM______________________________ 43
R
EQUISITOSDES
ISTEMA_________________________________ 52
CONCEITOS BÁSICOS DE ASP _________________ 52
VBS
CRIPTEASP _____________________________________ 53
O
BJETOSASP ________________________________________ 55
E
STRUTURASDAL
INGUAGEM_____________________________ 59
T
IPOSDED
ADOS______________________________________ 61
F
UNÇÕESDED
ADOS____________________________________ 62
CONCEITOS BÁSICOS DE PHP ________________ 73
R
EQUISITOSDES
ISTEMA________________________________ 73
S
IMBOLOGIAEC
ONVENÇÃODAL
INGUAGEM_________________ 74
E
STRUTURADOC
ÓDIGO_________________________________ 74
E
STRUTURASDAL
INGUAGEM_____________________________ 75
T
IPOSDED
ADOS______________________________________ 77
F
UNÇÕESDED
ADOS____________________________________ 78
JUNTANDO TUDO ____________________________ 83
C
ONTEÚDODOA
RQUIVOESTILOS.CSS ___________________ 84
C
ONTEÚDODOA
RQUIVODHTML.JS _____________________ 87
C
ONTEÚDODOA
RQUIVODHTML.HTM ___________________ 94
C
ONTEÚDODOA
RQUIVODHTML.ASP ____________________ 100
C
ONTEÚDODOA
RQUIVODHTML.PHP ____________________ 103
WEBDESIGNER
WEBDESIGNER
WEBDESIGNER
WEBDESIGNER
WEBDESIGNER
O QUE É HTML DINÂMICO
Inicialmente, HTML Dinâmico (ou DHTML) não é uma tecnologia especí-fica como Javascript, Vbscript ou ActiveX, tem tão pouco uma tag ou um plug-in no Browser. Na verdade é um dos avanços mais interessantes dos últimos tempos na Internet, um conceito que agrupa as tecnologias existentes como Javascript, VBScript, Document Object Model (DOM), Layers e Style Sheets (CSS). Por isso, neste livro estaremos abordando 4 tecnologias que são as mais utilizadas para o principal comportamento do DHTML, e são elas HTML, JavaScript, ASP e CSS.
DHTML é uma página com instruções básicas de HTML que podem ser modificadas dinamicamente mesmo após a página ter sido carregada no browser. 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 as páginas serem carregadas.
Então, como pode o HTML ser modificado após seu download? Para responder esta pergunta, teremos que analisar antes alguns conceitos sobre 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á de nenhum outro tipo de conexão para suas ações mecânicas, por isso ela se torna um script “cliente-side”. Geralmente Javascript e Vbscript são muito utilizados em particular para modificar o HTML. Uma imagem pode ser manipulada através de eventos com o mouse, por exemplo, e osbrowsers 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 É DOM
O centro da tecnologia que envolve o HTML dinâmico são os Document Object 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 o ambiente, tais como, data, hora, propriedades do browser (nome e ver-são), propriedades da janela (URL) e tags de HTML. Assim, o Browser disponibiliza para as linguagens de script, acesso a estes componentes do DOM e mesmo que alguns deles não possam ser modificados, como data e hora, por exemplo, servem para modificar outros elementos. Um detalhe interessante é que o DOM no Netscape é muito mais limita-do limita-do que no Internet Explorer. O tratamento de Layers neste segunlimita-do torna qualquer idéia do programador simples de serem implementadas, o que não acontece com tanta facilidade no Netscape. Por isso existem técnicas de balanceamento entre browsers, ou seja, construir detalhes diferentes para versões de browsers para uma mesma página, o que dificulta muito o trabalho do programador.
O DOM também possui o chamado “event model”, que são na verdade os gatilhos para disparar as modificações das páginas. Eles são eventos como movimento de mouse (onmouseover), carregamento da página (onload), submissão de um form (onsubmit) ou entradas de campos (onfocus).
HTML DINÂMICO É CSS
Como 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ça visuais 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 as linguagens de Script, temos então o HTML Dinâmico.
CONCEITOS BÁSICOS DE HTML
Um documento HTML pode ser criado através de editores de texto ou softwares específicos. Um simples editor como o Bloco de Notas do Windows já é suficiente para sua criação, porém para isso, você já deve-rá estar familiarizado com a linguagem. Outros softwares como Dreamweaver 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 que uma mesma página criada com o Bloco de Notas teria um código menor. Apesar disso, estes dois programas, possuem uma tecnologia chamada de 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á o mesmo que o navegante visualizará no site depois de pronto, tornando a construção de páginas mais rápida caso utilizassemos um outro editor HTML ou de texto.
Nesta apostila, iremos utilizar preferencialmente o Bloco de Notas do Windows, e um pré-requisito que você conheça o básico da linguagem HTML, pois trataremos aqui apenas da parte dinâmica desta linguagem.
FOLHAS DE ESTILO - CSS
CSS (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 design visual (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 proporsacrifí-ciona 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 seja feito um download mais rápido de todo o conteúdo.
COMO A CSS TRABALHA
A CSS sobrescreve as configurações padrão do browser para interpretar como as tags deverão ser exibidas, permitindo que você utilize qualquer elemento em HTML indicado pela abertura e fechamento de tags (inclu-sive a tag <p>) para aplicar atributos de estilos definidos localmente ou nas folhas de estilo (style sheet).
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 o documento 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 lista contendo o nome da propriedade e seu valor. No exemplo abaixo, temos que 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
Local
Uma declaração de folha de estilo, específica para uma instância única de uma página, pode ser utilizada em uma tag simples como <font> por exemplo, 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>
Global
Uma 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>
Linkados
Uma 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 descritas a 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 uma pá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 o exemplo 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 e vermelho.</p>
<p class=c>Texto com fonte verdana tamanho 20 pon-tos.</p>
Nos casos onde estilos locais, globais e linkados se conflitam, o estilo mais 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 nomes
Como dizer ao browser qual fonte exibir? Você apenas digita o nome da fonte após o atributo font-family, correto? Infelizmente é um pouco mais complicado do que isso. Fontes nem sempre são chamadas da mesma maneira 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 como aparece nos menus de fontes, como por exemplo no Microsoft Word,. Usuários de Mac: não acreditam no que os aplicativos dizem! Ao invés de utilizar o nome da fonte exibido no Fonts Folder, especifique no stylesheet o nome como ela é realmente pronunciada.
Propriedade font-family
font-family é a propriedade CSS utilizada para chamar uma fonte pelo seu 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 terceira fonte da lista (Sans-Serif).
CONFIGURAÇÃO DE FONTES
Na lista de configuração de fontes, você pode especificar na verdade, quantas quiser! Esta característica pode ser útil se você não tem certeza de qual fonte está instalada nas diferentes plataformas dos visitantes.
Os browsers são configurados de forma a exibir todos os nomes de fon-tes em minúsculo. Algumas vezes eles reconhecem nomes de fonfon-tes com as iniciais maiúsculas. Caso você esteja em algum momento de-senvolvendo uma página com a utilização de estilos CSS, seria muito importante 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 que são comuns a quase todas as plataformas, ao invés de fontes específi-cas, principalmente em instalações de certos programas. Veja algumas das 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 Comic Sans 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 as aspas normais iniciais:
<P STYLE=”font-family: ‘comic sans’, ‘new baskerville’, serif”>O texto vai aqui</P>
CONTROLANDO O TAMANHO DO TEXTO
Se você acha que só é possível a utilização de apenas 7 tipos diferentes de tamanho na declaração <FONT SIZE=x>, você está enganado!
font-size
Utilizando a propriedade font-size, você terá a sua disposição, mais do que 7 tipos diferentes de fontes.
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 de PC´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 grandes unidades, 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 um ponto 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 medida familiar e pode ter o mesmo resultado aparente em diferentes platafor-mas. A única desvantagem é que as páginas não serão impressas de modo consistente.
Outras unidades:
in = polegadas cm = centímetros mm = milimetros pc = picas ex = x-heightPalavras-chaves:
P { font-size: large }Existem sete palavras chave e elas correspondem ao valor numérico da utilização da declaração <FONT SIZE>:
1 - xx-small 2 - x-small 3 - small 4 - medium 5 - large 6 - x-large 7 - xx-large
Com estes valores, o Browser fica livre para decidir qual tamanho de fonte é mais apropriado para cada palavra-chave. Por exemplo, x-large é exibido em 28 pontos no Netscape e 24 no Internet Explorer do Mac e 18 no Internet Explorer do Windows. Além disso, você pode utilizar outras palavras-chave relativas:
smaller larger
Um valor de “smaller” diz ao browser para ajustar o tamanho da fonte com 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% }
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á 45 pontos. Os valores percentuais interferem no tamanho de acordo com o valor 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>
Propriedade font-style
Esta é a propriedade parar controlar o estilo itálico das fontes: H3 { font-style: italic }
Propriedade font-weight
Esta é 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 valor como 100, 200, 300, 400...900. Um texto normal sem ser negrito possui um 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 de negrito.
Propriedade font-variant
Utilizado 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 font
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.
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-decoration
Por 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 partir desta necessidade, surgiu a propriedade “text-decoration”, que permite em outra palavras, modificar estilos de exibição para efeitos decorativos inclusive em componentes web como hiperlinks.
No exemplo abaixo, configuramos a tag <b> para que sempre além do negrito, 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 Internet Explorer 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ão quiser 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-proprieda-decoration como none para a tag <a>, veja:
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ção personalizada para esta situação de acordo com suas necessidades, por exemplo, você poderia configurar os links já visitados sem sublinhado, mas com uma cor “amarela” e com 12 pontos de tamanho. Creio que não, ficaria feio. Use a sua criatividade.
Exercício:
Neste exercício iremos construir uma página que possui os três tipos de folhas de estilo: linkado, global e local, e herança entre estilos. Serão necessários dois arquivos, um contendo as declarações (estilo.css) e o outro 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}
</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 quem garanta 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 mesmo nã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 ou acordado.”</p>
<p class=”aut”>(Shakespeare, Sonhos de Uma Noite de Verã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 antecede o outono. No
hemisfério sul principia quando o Sol alcança o solstício de
dezembro e termina quando ele atinge o equinócio de março.</p>
<p class=”aut”><a href=”#topo”>topo</a> <br><br><br><br><br><br><br><br><br><br>fim </body></html>
ESTILOS EM CORES
Propriedade color
Esta 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 cores
As 16 cores básicas são: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.
Valores Hexadecimais
Para um controle mais avançado, utilize cores em hexa, que estão no formato #RRGGBB onde RR representa Red (Vermelho); GG represen-ta Green (Verde) e BB represenrepresen-ta Blue (Azul). Dentro de cada grade de valores, você poderá especificar códigos em Hexadecimal (0 a F). As cores preenchem valores de 00 a FF, onde 00 representa a ausência da cor e FF a sua maior intensidade. Como você deve saber, todas as cores são misturas de diferentes intensidades de Vermelho, Verde e Azul. Não entraremos 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 RGB
A notação RGB é muito utilizada em aplicações gráficas como o Photoshop e o CorelDraw. Como você aprendeu no tópico anterior, R corresponde a Vermelho, G corresponde a Verde e B corresponde a Azul e suas faixas numéricas vão de 0 à 255. Sendo 00 a ausência da cor e FF 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 qualquer elemento em uma página, incluindo imagens:
P.yellow { background-color: #FFFF66 }
A regra acima é aplicável a um parágrafo (tag <p>) inteiro. As regras para 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 um valor de background para transparente.
Exercício:
No exercício a seguir será construída uma tabela que mostrará diversas cores 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”}
.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>
<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>
CONTROLANDO IMAGENS DE FUNDO
Todo 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 o internauta, motivando ainda mais as suas visitas.
Background-Image
Com 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 apenas duas ou três palavras, não importa, e também no documento inteiro pela configuração de estilo para a tag <body>.
Esta propriedade também suporta o valor “none” para deixar o elemento especificado sem a imagem de fundo.
Os programadores utilizam uma técnica bastante interessante no uso de imagens de fundo, a boa idéia é especificar uma cor de fundo junto com a imagem de fundo, para que esta cor seja exibida enquanto a imagem estiver carregando.
background-repeat
Para evitar que as imagens de fundo se repitam infinitamente, poderiamos utilizar 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 valor repeat-y e para que as imagens se repitam apenas horizontalmente, uti-lize o valor repeat-x.
background-attachment
Para que uma imagem não acompanhe o movimento de scroll da página utilize esta propriedade com o valor fixed:
BODY { background-attachment: fixed; background-image: url(/imagens/ background.gif) }
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-position
Finalmente, você poderá posicionar a imagem de fundo, exatamente onde ela deva começar:
P { 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)
Valores
Para 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 Percentuais
Podemos também utilizar valores percentuais para especificar as posi-ções iniciais:
P { background-position: 75% 50%; background-image: url(background.gif) }
Propriedade background
Com esta propriedade podemos definir de uma única vez, todas as outras propriedades de fundo já mencionadas. Ela possui os seguintes valores: <background-color> | <background-image> | <background-repeat> |
<background-attachment> | <background-position>
P { background: #CCFFCC url(fundo.gif) repeat-y top right }
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ção vertical (repeaty-y), alinhado ao topo (top) e a direita (right).
POSIÇÕES
A propriedade position permite que especifiquemos a forma de posicionamento de um elemento, utilizando referências relativas ou ab-solutas:
Posicionamento absoluto
Esta 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 e top 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 especifidinâmi-cas, gifs, jpegs, filmes em quicktime, ou seja qualquer coisa.
Posicionamento relativo
Diferente do posicionamento absoluto, este posicionamento permite que o controle seja feito apenas dentro do elemento relativo ao elemento especificado:
I { position: relative; left: 40px; top: 10px }
Este regra se aplica a todas as tags <i> para que elas tomem distância a esquerda em 40 pixels e ao topo em 10 pixels, tendo como referência a posição que o objeto ocuparia caso não utilizassemos position.
CONTROLANTO ELEMENTOS POSICIONADOS
width
Controla 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 na esquerda e 40 pixels do topo, com uma largura de 150 pixels.
height
Controla 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 na esquerda, 40 pixels ao topo, e com uma altura de 150 pixels.
Overflow
Permite 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 as medidas de altura e largura especificadas.
Hidden – não exibe o conteúdo que ultrapassou as medidas de altura e largura especificadas.
Auto – controla automaticamente se deverá exibir ou não o conteúdo dentro dos limites estabelecidos.
O PODER DA INVISIBILIDADE
visibility
Controla 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.
clip
Esta propriedade permite controlar exatamente qual parte do elemento será 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 de largura por 40 pixels de comprimento.
z-index
Quando posicionamos múltiplos elementos e eles se sobrepõe, utilizamos a 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 sobreponha a tag <h1> devido ao seu z-index ser maior.
DICAS E TRUQUES PARA ESTILOS EM CSS
Vamos dar uma olhada em alguns truques para criar stylesheets avan-çados:
Utilize nomes de estilos semelhantes a tags em html
Veja o código da figura 1 onde a classe cor vem precedida do nome real da cor a ser utilizada.
Duplique valores de propriedades
Para se ter certeza que um parágrafo irá ser azul, por exemplo, utilize a propriedade font-color como azul no estilo css e na tag <font color> do html.
Esconda elementos desnecessários
Deixe-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 estilos em um documento HMLT. Digite o código a seguir no Bloco de Notas e salve-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>
<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áginas legais!</h3>
<p class=”car”>Impressione seus amigos e detone seus inimigos!</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 a l i g n = ” c e n t e r ” > & l t ; L I N K R E L = s t y l e s h e e t HREF=”meuestilo.css”
TYPE=”text/css”><br></p>
<p class=”pri”>O primeiro parágrafo, com uma class chamada
“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 class chamada
“terceiro”.</P> </font></body></html>
CONCEITOS BÁSICOS DE JAVASCRIPT
O QUE É JAVASCRIPT
Javascript é uma linguagem de programação leve, com capacidade de orientação à objeto. Poderosa e dinâmica, permite controles e funciona-lidades às páginas da Web criando “vida” e destaque na interação das páginas com o usuário. O Javascript no lado do cliente, permite que rotinas executáveis possam ser introduzidas em páginas Web sem a necessidade 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 como if, while, loop e operadores em geral. Esta semelhança é apenas sintáti-ca, pois em sua forma de programação, tem peculiaridades diferentes das outras linguagens, pois não precisa de declarações específicas de variáveis e acesso à memória, e etc.
Javascript não é Java, esta realidade acaba com muitos equívocos que as pessoas fazem acreditando inclusive que é uma versão simplificada da linguagem Java. Além da semelhança sintática (porém incompleta), tanto o Java quanto o Javascript proporcionam funcionalidades à Web, e podem 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 Java em uma página da Web. Ainda nesta apostila discutiremos mais este assunto no tópico “Integrando Javascript com Java”.
O nome inicial da linguagem foi LiveScript, mas por uma questão de Marketing 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.
O QUE JAVASCRIPT PODE FAZER
O JavaScript possui muitas capacidades. Note porém que estas estão relacionadas 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 do servidor (por razões de segurança)
A linguagem não suporta qualquer tipo de comunicação em rede, com exceção de acessos à URL’s, CGI’s, Emails e Newsgroups.
CARACTERÍSTICAS DA LINGUAGEM
Distinção entre maiúsculas e minúsculas
JavaScript é uma linguagem que diferencia as letras maiúsculas das minúsculas (case-sensitive). Isso significa que as palavras-chaves, vari-áveis, nomes de funções e outros indentificadores devem sempre ser digitados 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 em códigos HTML e letras minúsculas em códigos JavaScript.
Comentários
Qualquer texto após // é considerado comentário e é ignorado pelo JavaScript. 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 comencomen-tário em HTML —>. Isso se torna muito útil, pois a inserção de rotinas em páginas HTML podem produzir um efeito muito desastroso em browsers que não supor-tam JavaScript. Por isso é aconselhável deixar a rotina entre o comentário do HTML afim de que ela fique oculta caso isso aconteça. Exemplo:
<HTML><HEAD> <script language=”javascript”> <!— ... local do script ... //—> </script>
Literais, Identificadores e Palavras reservadas
Um 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 JavaScript 1.2, eles são utilizados para proporcionar identificações que geram loops (loop label) no código em JavaScript. O primeiro caracter de um identificador deve ser um caracter em ASCII (maiúsculo ou minúsculo), um underline ( _ ) ou um sinal de cifrão ($). Nunca são aceitos números no início dos nomes dos identificadores.
Literais
Identificadores
12
I
null
valor_bruto
“olha o texto”
t30
true
_wnada
false
$string
Como em todas as linguagens, JavaScript também possui palavras re-servadas. Elas são palavras que não podem ser utilizadas como identificadores (nomes de variáveis, nomes de funções e loop labels). Veja abaixo as palavras reservadas do JavaScript.
alert
escape
Math
parsefloat
setTimeout
arguments
eval
menubar
parseInt
Array
find
moveBy
personalbar
statusbar
blur
focus
moveTo
stop
Boolean
frames
name
prompt
string
break
do
function
null
typeof
callee
Function
NaN
prototype
toolbar
caller
historynetscape
RegExp
top
captureEvents
home
Number
reseaseEvents
toString
case
else
if
return
var
clearInterval
Infinity
Object
resizeBy
unescape
clearTimeout
innerHeight
open
resizeTo
unwatch
close
innerWidth
opener
routeEvent
valueOfclosed
isFinite
outerHeight
scroll void
confirm
isNaN
outerWidth
scrollbars
watch
constructorjava
Packages
scrollBy
while
continue
export
import
switch
window
Date
length
pageXOffset
scrollTo
with
status
defaultfalse
in
this
defaultStatus
location
pageYOffset
self
delete
for
new true
document
locationbar
parent
setInterval
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 do Java. Foram assim classificadas para uma futura integração com JavaScript.
abstract
final
int private
synchronized
boolean
float
interface
protected
throws
byte
goto
long
public
transient
catch
char
implements
native
short
double
class
debugger
extends
super
try
instanceof
packagestatic
TIPOS DE DADOS
Numéricos
Todos o números em JavaScript, diferente das outras linguagens, são tratados 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 literal numé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 parte da sintase numérica.
O JavaScript suporta literais numéricos inteiros, ou seja, os inteiros de base 10 que se iniciam desde o zero e estão entre –9007199254740992 (-253) e 9007199254740992 (253). Suporta literais numéricos no formato
octal, ou seja, números na base 8 (são sequências de até oito dígitos entre 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 à F que 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 um número seguido de sua parte decimal e fatorial.
Alfanuméricos
Os literais alfanuméricos são qualquer sequência de caracteres (strings) com letras, números, pontos e etc, que estão entre aspas simples ou aspas duplas. Para se inserir aspas simples ou aspas duplas em strings, é preciso alternar o uso delas, por exemplo acrescentar aspas duplas em uma palavra que contenha asplas simples e vice-versa. Outra manei-ra é fazer uso das sequências de escape. Como em outmanei-ras linguagens, as sequencias de escape são ativadas com barras invertidas:
String
Significado
“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
Booleanos
Os valores booleanos são somente dois: true (verdadeiro) ou false (fal-so). Eles são geralmente resultados de comparações feitas no decorrer de um programa. Estas comparações são chamadas de controles em estruturas, com por exemplo em if/else onde estes dois valores terão representação fundamental. Eles podem ser comparados com “on”, “sim” ou “yes”, “1” para true e “off”, “não” ou “no”, “0” para false.
Datas
O objeto Date no JavaScript não tem papel fundamental como os outros tipos de dados mostrados previamente. A Data em JavaScript pode ser considerada 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 local como no formato GMT.
Funções
Uma função é um pedaço de um código fonte de um programa, que pode ser 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ão como tipos de dados. Em muitas linguagens, incluindo Java, as funções tem características sintáticas, ou seja, elas podem ser definidas e invocadas, mas não se comportam como dados. O fato é que desta maneira, as funções em JavaScript permitem uma série de flexibilidades para a linguagem. Pois é possível armazená-las em variáveis, arrays e objetos, 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 como literais:
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 seu uso, considerando que todo o corpo da função será codificado em uma string entre aspas.
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 objeto seguido por um período e o nome de sua propriedade. Por exemplo, o objeto image tem propriedades chamadas width e height (largura e altu-ra respectivamente) e poderíamos acessá-las assim:
image.width
image.height
DECLARAÇÃO DE VARIÁVEIS
Antes de se utilizar variáveis em JavaScript, é preciso declará-las. As variá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 como o 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 ser deletadas com o operador delete a partir do JavaScript 1.2. Declarando-as desta maneira, previne-se também que sejam consideradDeclarando-as pelo JavaScript como “variáveis globais”, ou seja, que possam ser enxergadas
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 desta funçã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, a palavra “local”:
var escopo = “global”;
//Declara uma variável
global.
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, esta receberá seu valor e poderá inclusive mudá-lo:
escopo = “global”;
// Declara uma variável
global, sem “var”.
function ChecaEscopo() {
escopo = “local”;
// Muda o valor da
vari-ável global.
document.write(escopo); // Imprime no Browser:
local.
}
OPERADORES
Operadores gerais e seus significados
Para programadores em C, C++ e Java, os operadores em JavaScript não representam problemas. Pois a semelhança é muito grande. Na ta-bela abaixo, estão relacionados os operadores, seu tipo e uma breve descrição de seus significados. Maiores detalhes virão a seguir.
Operador Tipo Significado
. Objeto, propriedade Acesso à
pro-priedades
[] Array, inteiro Index de um
array ( ) Função, argumentos C h a m a d a d e função ++ Números Incremento — Números Decremento - Números Subtração ~ Inteiro Complemento Bitwise ! Booleano Complemento Lógico
delete Variáveis Apaga uma
propriedade
new Chamada de constructor Cria um novo
objeto
typeof Qualquer Retorna um
tipo de dado
void Qualquer Retorna um
valor não-definido
*, /, % Números
Multiplica-ção, Divisão e Resto
+, - Números Adição e
Sub-tração
+ Strings Concatenação
<< Inteiros Deslocamento
>> Inteiros Deslocamento à direita com Sinal
>>>> Inteiros Deslocamento
à direita <, <= Números ou strings Menor que,
Menor ou igual >, >= Números ou strings Maior que,
Maior ou igual = = Qualquer Teste de igualdade != Qualquer Teste de di ferença = = = b Qualquer Teste de identidade
!= = 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ário condicional
= Variável, qualquer Designação
*=, /=, %=, Variável, qualquer Designação com operador +=, -=, <<= e >>=
>>>=, &=, ^= e Qualquer Determinador múltiplo |=
Comportamento individual dos operadores
Não diferente das outras linguagens, e principalmente de todo o padrão aritmético, o JavaScript utiliza as simbologias existentes para efetuar cá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 e
transforma valores positivos em negativos. * Operador de Multiplicação.
/ Operador de Divisão. Diferente da lingua gem C, o JavaScript
considera todos os números como ponto-flu-tuante.
% Operador Módulo. Retorna o resto de uma divisão.
++ Incremento. Adiciona +1 a variável desig-nada. Pode ser
utilizado antes ou depois desta variável. — Decremento. Opera de modo inverso ao in
cremento, subtraindo –1
da variável designada. Pode ser utilizada antes ou depois da
variável.
== Igualdade. Retorna verdadeiro (true) se dois operandos são
iguais ou falso (false) se são diferentes. != Diferença. Opera de modo inverso ao de
igual-dade, retornando
verdadeiro (true) se dois operandos são diferentes ou falso
(false) se são iguais.
=== Identicidade. Compara dois operandos retornando verdadeiro
(true) se eles forem idênticos sem qual quer tipo de conversão.
!== Não identicidade. Compara dois operandos retornando verdadeiro
(true) se eles forem exatamento o oposto um do outro.
< Menor que. Compara dois operandos retornando verdadeiro (true)
se o primeiro for menor do que o segundo. > Maior que. Compara dois operandos retornando
verdadeiro (true)
se o primeiro for maior do que o segundo. <= Menor ou igual que. Compara dois operandos retornando verdadeiro (true) se o primeiro for menor ou igual ao segundo.
>= Maior ou igual que. Compara dois operandos retornando
verdadeiro (true) se o primeiro for maior ou igual ao segundo.
&& E lógico. Compara expressões ou testes ló gicos, verificando se
o primeiro operando E o segundo são verda-deiros.
|| OU lógico. Compara Expressões ou testes lógicos, verificando se
o primeiro operando OU o segundo são ver-dadeiros.
! NÃO lógico. Compara expressões ou testes lógicos, verificando a negação entre eles.
& 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.
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 uso de 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 = “carlos@vlcnet.com.br”;
ou
i f ( m e u _ e m a i l = = n u l l ) m e u _ e m a i l =
“carlos@vlcnet.com.br”;
ou
if (!meu_email) meu_email = “carlos@vlcnet.com.br”;
Agora com o uso de chaves, por existir mais de uma afirmação após o teste condicional:
if ((meu_email == null) || (meu_email == “”)) {
meu_email = “undefined”;
alert(“Por favor, entre com um endereço de email
vá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);
}
Outro aspecto importante é o uso correto da indentação ou dos ninhos de if, afim de tornar o código, não propenso à erros e elegante. A medida que o teste condicional se torna mais complexo, mais complexa se torna sua indentação e maior é o número de chaves “{}” necessárias na codificação. Veja o exemplo abaixo, talvez uma codifição diferente para este caso, poderia levar o programador à loucura procurando o erro de seu teste, mas seguindo este padrão, além de tornar a visualização de erros 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 if
O else if se torna uma cláusula muito útil dentro de ninhos de if, por permitir ao programador suprimir linhas no código fonte. Eu aconselho a programadores que ainda não estão experientes, a olharem com carinho códigos utilitários como este, principalmente se estivermos falando de programação na Web. Pois quanto mais compacto for o seu código fon-te, tanto em JavaScript quanto HTML, menor a quantidade de bytes que terã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 a utilização do else if pode tornar um trecho do código mais compacto.
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”);
}
switch
Se a junção do if, else, else if já lhe surpreendeu, o switch então vai deixá-lo de queixo caído. Mas acredite, as vezes não é a melhor solução para seus problemas, dependendo do caso é melhor a utilização de if mesmo. Vamos com o switch dar uma melhor programação para nosso exemplo anterior. Note que em sua sintaxe é necessária a utilização da palavra chave break.
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;
}
while
Permite que o JavaScript execute ações repetidas vezes, de acordo com o controle do programador. É chamado de laço, assim como o for ou o do 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, escrevenexecuta-do em cada linha do browser seu respectivo valor.
w_cont = 0;
while (w_cont <= 10) {
document.write(w_cont + “<br>”);
w_cont++;
}
do/while
O do while funciona exatamente como o while, porém está presente apesar 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 nosso exemplo anterior escrito agora com o do while:
