ApostilaDHTML PDF

Assunto: Identificação: Versão: Folha / Nº:
Introdução ao HTML dinâmico MAN 1.0 1 / 83
Introdução ao HTML dinâmico

DHTML (Dynamic HTML)
Elaborado / Revisado por: Aprovado para uso por:

Júlio César de Lima Costa
09/04/2010 <<data>>
Grupo Assessor Público

Índice
Índice ................................................................................................................................................................. 2
Índice de imagens .............................................................................................................................................. 4
Introdução .......................................................................................................................................................... 5
HTML ................................................................................................................................................................. 6
Prefácio ......................................................................................................................................................... 6
Publicação ..................................................................................................................................................... 6
Comentários .................................................................................................................................................. 6
Tag ................................................................................................................................................................ 6
Estrutura básica do documento..................................................................................................................... 8
Hyperlink...................................................................................................................................................... 10
Lista ............................................................................................................................................................. 10
Formatação de estilos de textos ................................................................................................................. 11
Tabela.......................................................................................................................................................... 12
Formulário ................................................................................................................................................... 14
Iframe .......................................................................................................................................................... 18
CSS.................................................................................................................................................................. 19
Prefácio ....................................................................................................................................................... 19
Publicação ................................................................................................................................................... 19
Comentários ................................................................................................................................................ 19
Sintaxe básica ............................................................................................................................................. 20
Aplicando CSS em um documento ............................................................................................................. 20
Cores e fundos ............................................................................................................................................ 22
Fontes .......................................................................................................................................................... 25
Textos .......................................................................................................................................................... 27
Links ............................................................................................................................................................ 29
Agrupamento de elementos por Class e Id ................................................................................................. 29
Margin e Padding ........................................................................................................................................ 32
Bordas ......................................................................................................................................................... 33
Altura e Largura ........................................................................................................................................... 37
Exibição ....................................................................................................................................................... 38
Visibilidade .................................................................................................................................................. 39
Cursor .......................................................................................................................................................... 40
Posicionamento de elementos .................................................................................................................... 41
Javascript ......................................................................................................................................................... 44

Prefácio ....................................................................................................................................................... 44
Publicação ................................................................................................................................................... 44
Comentários ................................................................................................................................................ 45
Onde colocar os scripts? ............................................................................................................................. 45
O elemento <noscript> ................................................................................................................................ 46
Tratamento de eventos ............................................................................................................................... 46
Valores e variáveis ...................................................................................................................................... 52
Palavras reservadas .................................................................................................................................... 52
Controles Especiais ..................................................................................................................................... 52
Operadores Lógicos .................................................................................................................................... 53
Operadores Matemáticos ............................................................................................................................ 53
Comandos Condicionais ............................................................................................................................. 54
Estrutura dos Loops .................................................................................................................................... 54
Escrevendo Scripts ..................................................................................................................................... 57
Caixa de diálogo .......................................................................................................................................... 57
Funções ....................................................................................................................................................... 59
Funções Intrínsecas .................................................................................................................................... 60
Funções tipicamente Matemáticas: ............................................................................................................. 61
Criando Instâncias ....................................................................................................................................... 62
Variáveis estáticas ...................................................................................................................................... 63
Manipulando Arrays .................................................................................................................................... 64
Manipulando String's ................................................................................................................................... 65
Manipulando Datas ..................................................................................................................................... 66
Timer e Date ................................................................................................................................................ 68
Janela Popup .............................................................................................................................................. 71
DOM................................................................................................................................................................. 72
Prefácio ....................................................................................................................................................... 72
Como DOM trabalha ................................................................................................................................... 73
Como acessar elementos............................................................................................................................ 74
A propriedade Style ..................................................................................................................................... 75
A propriedade InnerHTML ........................................................................................................................... 78
Manipulando elementos .............................................................................................................................. 78
Cases .......................................................................................................................................................... 81
Bibliografia ....................................................................................................................................................... 83

Índice de imagens
Imagem 1: Definição dos atributos cellpading e cellspacing. ......................................................................... 12

Imagem 2: Exemplo de tabela aninhada. ....................................................................................................... 13
Imagem 3: Definição da regra CSS para tags. ............................................................................................... 20
Imagem 4: Valores possíveis para o atributo Border-Width. .......................................................................... 33
Imagem 5: Exemplo de cores RGB, padrão utilizado em CSS. ..................................................................... 34
Imagem 6: Valores possíveis para a regra CSS Border-Style. ...................................................................... 34
Imagem 7: Resultado da utilização da regra CSS display com o valor block. ............................................... 38
Imagem 8: Resultado da utilização da regra CSS display com o valor inline. ............................................... 38
Imagem 9: Resultado da utilização da regra CSS display com o valor none................................................. 38
Imagem 10: Resultado da utilização da regra CSS visibility com valor padrão. ............................................ 39
Imagem 11: Resultado da utilização da regra CSS visibility com valor hidden.............................................. 39
Imagem 12: Valores possíveis para a regra CSS cursor. .............................................................................. 40
Imagem 13: Princípios de posicionamento de elementos em CSS. .............................................................. 41
Imagem 14: Exemplo de objeto posicionado utilizando regras CSS. ............................................................. 42
Imagem 15: Palavras reservadas do Javascript. ............................................................................................ 52
Imagem 16: Documento HTML segundo a interpretação do DOM. ............................................................... 73
Imagem 17: Tabela de atributos CSS em DOM. ............................................................................................ 76
Imagem 18: Tabela de atributos CSS em DOM (Continuação). .................................................................... 77

Introdução
Dynamic HTML, mais conhecido como DHTML, é a união das tecnologias HTML, CSS, Javascript e DOM
(Document Object Model) para modificar dinamicamente as páginas web sem a necessidade de novos
acessos ao servidor web.
O DOM foi introduzido pela primeira vez em 1995 pela Netscape na segunda versão de seu navegador.
Graças ao DHTML hoje podemos interagir com as páginas web de forma parecida da que interagimos com
sistemas desktop.
O objetivo deste treinamento é capacitar profissionais que consigam criar, entender e modificar os scripts
criados utilizando a tecnologia DTHML e, dessa forma, tornar ainda mais dinâmicas as telas dos sistemas
web desenvolvidos por nossa empresa.

HTML
Prefácio
HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de
Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.
Documentos HTML podem ser interpretados por navegadores.
Publicação
Sempre o nome do arquivo principal será índex. Os arquivos criados devem ser salvos com a extensão
".html". É comum vermos arquivos salvos com a extensão ".htm". Não há diferença alguma entre um e
outro, mas por padrão é correto trabalhar com a extensão completa, ou seja, ".html".
Comentários
Os comentários em HTML são muito fáceis de colocar. É como uma etiqueta que tem um início e um fim.
Todo o texto que colocar dentro está comentado, ou seja, não aparecerá na página. Dentro de um
comentário pode colocar o texto ou código HTML, como etiquetas.
O comentário começa por 
Tag
Todo documento HTML apresenta tags, elementos entre angulares <tag>; esses elementos são os
comandos de formatação da linguagem. A maioria das tags tem sua correspondente de fechamento:
ATENÇÃO:
Todos os elementos podem ter ID, NAME, STYLE e/ou CLASS.
Em elementos de formulário o atributo NAME é obrigatório
<tag>...</tag>

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção do documento, e
assim marcamos onde começa e termina o texto com a formatação especificada por ela. Alguns elementos
são chamados "vazios", pois não marcam uma região de texto, apenas inserem algum elemento no
documento:
<tag />
Uma tag é formada por comandos, atributos e valores. Os atributos modificam os resultados padrões dos
comandos e os valores caracterizam essa mudança. Exemplo:
<hr color="red" />
No qual:
HR: comando que desenha uma barra horizontal
Color: atributo que especifica a cor da barra
Red: valor do atributo color, que é a cor da barra que será desenhada
Cada comando tem seus atributos possíveis e seus valores. Um exemplo é o atributo size que pode ser
usado com o comando FONT, com o HR, mas que não pode ser usado com o comando BODY. Isso quer
dizer que devemos saber exatamente quais os atributos e valores possíveis para cada comando.

Estrutura básica do documento
A estrutura de um documento HTML apresenta os seguintes componentes:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título do Documento</title>
</head>
<body>
texto,
imagem,
links,
</body>
</html>
As tags HTML não são case sensitive (sensíveis à caixa), portanto tanto faz escrever <HTML>, <Html>,
<html> ou <HtMl>.
As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:
<html>: define o início de um documento HTML e indica ao navegador que todo conteúdo
posterior deve ser tratado como uma série de códigos HTML.
<head>: define o cabeçalho de um documento HTML, que traz informações sobre o

documento que está sendo aberto.
<body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento

HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda
a página, como cor de fundo, margens, e outras formatações.

Cabeçalho
Dentro do cabeçalho podemos encontrar os seguintes comandos:
<title>: define o título da página, que é exibido na barra de título dos navegadores.
<style>: define formatação em CSS.
<script>: define programação de certas funções em página com scripts, podendo adicionar
funções de JavaScript.
<link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc.
<meta>: define propriedades da página, como codificação de caracteres, descrição da

página, autor, etc. São meta informações sobre documento.
Obs.: as tags <style> e <script> servem tanto para delimitar o espaço usado pelos códigos na página
quanto para invocar códigos existentes em outros arquivos externos.
Corpo
Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página, como por exemplo:
<h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto

menor for o número, maior será o tamanho da letra)
<p>: novo parágrafo, possui margem superior e inferior predefinida.
<br />: quebra de linha.
<span>:Tag sem valor de formatação;
<div>: determina uma divisão na página a qual pode possuir variadas formatações.
<img />: imagem, informa o path da imagem no atributo "src" e legenda no atributo "alt".
Exemplo: <img src="minhaimagem.jpg" alt="Legenda da imagem" />
<a>: hiper-ligação para outro local seja uma página, um e-mail ou outro serviço informa o
caminho do destino em seu atributo "href" e a legenda no atributo "title".
Exemplo: <a href="destino.html" title="Legenda deste link">Meu link</a>

Hyperlink
Uma propriedade importante dos documentos HTML é a possibilidade de fazer hiperligações. Para isso usa-
se a tag <a> (do inglês, anchor). Esta tem os atributos: href que define o alvo da hiperligação (que pode ser
uma página de Internet, uma parte da mesma página ou um endereço de email) ou name que define um
alvo nessa página (a onde se pode fazer uma hiperligação usando a tag <a> com o atributo href).
Exemplos:
<a href="http://www.assessorpublico.com.br/">Clique aqui para acessar nosso site.</a>
<a href="http://www.assessorpublico.com.br/" target="_blank">Abrir em outra janela.</a>
<a name="nome">texto</a>
Em que nome e texto podem ser substituídos por o que se desejar. Depois usa-se <a href="#nome"> </a>
para hiperligar a este "anchor".
Lista
Em HTML é possível a criação de listas de itens, estas lista podem ser iniciadas por duas tags diferentes,
são elas: <ul> que cria uma lista com marcadores, e <ol> que cria uma lista numerada.
Dentro do escopo destas tags é necessário o uso da tag <li> para marcar o inicio e fim de cada item da lista.
Exemplos:
<ul>Lista de marcadores
<li type="square">Item 1</li> 
<li>Item 2</li>
</ul>
<ol>Lista numerada
<li>Item 1</li>
<li>Item 2</li>
</ol>
A tag <li> pode ou não possuir o atributo type, este atributo altera o tipo do marcador. Os valores definidos
para este atributo podem ser: 1, A, a, I, i, disc, square, circle .

Formatação de estilos de textos
A formatação de textos é realizada através de diversas tags, que em diversos casos demonstram seus
próprios nomes. Como por exemplo a tag <b> que significa "bold", que em português é "negrito".
A tag <font> é utilizada para definir qual será a font utilizada, qual será o tamanho e sua cor, possui os
atributos: face, size e color.
Exemplos:
<font face="Verdana, Arial, Times New Roman" size="+1" color="#ff0000">
Estou aprendendo HTML
</font>
Face: Modelo da fonte utilizada. Pode declarar apenas um tipo, mas se o computador do cliente não
possuir a fonte especificada o navegador automaticamente escolherá uma fonte para substituí-la.
Caso haja a especificação de diversas fontes e o computador não possua a primeira fonte
especificada ele automaticamente escolhe usa a segunda e assim em diante.
Size: Tamanho da fonte, pode ser valores de -1 à -7, 0 à 7 e +1 à +7;
Color: Cor do texto pode utilizar o nome da cor em inglês, ou o tripleto hexadecimal
(Tabela de cores)
Também é possível utilizar juntamente a tag font outras tags de formatação para definir se o texto será
negrito, itálico
Exemplos:
<font face="Georgia, Times New Roman, Times, serif" size="+7">
<s>Riscado</s>
<u>Sublinhado</u>
<b>Negrito</b>
<i><u><b>Negrito,Itálico e Sublinhado</b><u></i>
</font>

Todos os textos que estão dentro do escopo da tag font ficarão formatados segundo o que foi definido em
seus atributos. É possível utilizar diversas formatações em um único escopo de texto, como o que foi feito
no texto Itálico no exemplo acima.
Tabela
Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a
partir dos atributos que nos oferece a própria tag <table>. A seguir, estão aqueles que nos podem parecer à
principio mais importantes:
Align: Alinha horizontalmente a tabela em relação ao seu entorno.
Background: Permite-nos colocar um fundo para a tabela desde um link a uma imagem.
Bgcolor: Dá cor de fundo à tabela.
Border: Define o número de pixels da borda principal.
Bordercolor: Define a cor da borda.
Cellpadding: Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma.
Cellspacing: Define o espaço entre as bordas (em pixels).
Height: Define a altura da tabela em pixels ou porcentagem.
Width: Define a largura da tabela em pixels ou porcentagem.
Os atributos que definem as dimensões, height e width, funcionam de uma maneira análoga ao das células,
tal como vimos no capítulo anterior. Contrariamente, o atributo align não nos permite justificar o texto de
cada una das células que compõem a tabela, mas sim que permite justificar a própria tabela em relação ao
seu entorno.
Os atributos cellpading e cellspacing ajudarão a dar a nossa tabela um aspecto mais estético. A princípio
pode nos parecer um pouco confuso seu uso, mas com um pouco de prática já será suficiente para saber
utilizá-los.
Na seguinte imagem podemos ver graficamente o significado destes atributos:
Imagem 1: Definição dos atributos cellpading e cellspacing.

Tabelas aninhadas
O uso de tabelas aninhadas também é muito útil. Da mesma forma que podíamos incluir listas dentro de
outras listas, as tabelas podem ser incluídas dentro de outras. Assim, podemos incluir uma tabela dentro da
célula de outra. A forma de funcionamento continua sendo o mesmo apesar de que a situação pode se
complicar se o número de tabelas incluídas dentro de outras for elevado.
Abaixo temos um exemplo de tabelas aninhadas e seu respectivo código HTML.
Imagem 2: Exemplo de tabela aninhada.
<table cellspacing="10" cellpading="10" Border="3">
<tr>
<td align="center"> Célula da tabela principal</td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabela aninhada, célula 1</td>
</tr>
<tr>
<td>Tabela unida, célula 3</td>
</tr>
</table>
</td>
</tr>
</table>

Formulário
Um formulário é uma área que pode conter elementos de formulário. Esta área é definida pela tag <form>.
Os elementos de formulário são elementos que permitem ao usuário entrada de valores (como campos de
texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.) em um
formulário.
Os dados que são inseridos em um formulário podem ser enviados para outra página.
Exemplos:
<form action="destino.php">
...<br />
Escopo do formulário<br />
...
</form>
Alguns atributos importantes:
Method: Método de envio de dados que será utilizado, pode ser POST ou GET.
Action: Pagina para onde serão encaminhados os dados informados nos elementos dos formulários,
neste caso, destino.php.
Observação:
Todos os elementos de formulário possuem os atributos readonly e disabled, que são muito utilizados:
Disabled: Desabilita o conteúdo e os elementos do formulário.
Readonly: Permite apenas a leitura dos conteúdos dos elementos do formulário.

Campos de texto
Os campos de texto são usados quando você quer que o usuário digite letras, números, etc. em um
formulário.
Exemplos:
<form>
Primeiro nome:
<input type="text" name="firstname" size="25" value="Seu nome" maxlength="25" />
<br />
Último nome:
<input type="text" name="lastname" disabled="disabled" />
</form>
Alguns atributos importantes:
Name: Nome do elemento;
Type: Tipo do input que estamos utilizando, neste caso, text.
Value: Valor inicial deste elemento.
Size: Largura do campo, contado em caracteres.
Maxlength: Máximo de caracteres que podem ser digitados.
Campos de senha
Os campos de senha campos que possuem mascara de caracteres, ao digitar um determinado valor ele
apresenta "*" no lugar deles, e armazena em si mesmo o valor digitado.
Exemplos:
Senha:
<input type="password" name="firstname" size="8" maxlength="8" />

Área de texto
Este elemento é definido pela tag <textarea>, e possui atributos diferentes a tag input.
Exemplos:
<textarea cols="8" rows="6" maxlength="500">
Aqui fica o valor inicial, é opcional.
</textarea>
Cols: Largura, baseado na quantidade de colunas que serão utilizadas.
Rows: Altura, baseado na quantidade de linhas que serão utilizados. Caso a quantidade digitada
ultrapasse a quantidade informada, o campo exibe uma barra de rolagem dentro deste elemento.
Maxlength: Máximo de caracteres que podem ser digitados.
Campos radiais
Botões Radiais são usados quando você quer que o usuário selecione uma entre uma quantidade limitada
de escolhas. O atributo "name" destes elementos deve ser igual, e o atributo "value" deve ser diferente.
Exemplos:
<input type="radio" name="sex" value="male" /> Masculino
<br />
<input type="radio" name="sex" value="female" /> Feminino
Campos de Checagem
Os Campos de checagem são usados quando você quer que o usuário selecione uma ou mais opções de
uma quantidade limitada de escolhas.
Exemplos:
<input type="checkbox" name="bike">Eu tenho uma bicicleta
<input type="checkbox" name="car">Eu tenho um carro

Campos de seleção
Campos de seleção, mais conhecidos como dropdown, são utilizados para exibir a partir de um click os
dados de uma lista de opções. É iniciado pela tag <select> e dentro desta são informados as suas opções,
definidas pela tag <option>, como no exemplo mostrado abaixo:
Exemplos:
<select name="estado">
<option value="SP" selected>São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
<option value="ES">Espírito Santo</option>
</select>
Atributos importantes:
Value: Valor que, quando selecionado, representará o valor do select.
Selected: Demonstra qual é o option que virá selecionado como padrão.
Campos arquivo
São utilizados para permitir ao usuário escolher fisicamente um arquivo que encontra-se em seu
computador. Sempre que este campo for inserido em um formulário é necessário adicionar o atributo
enctype="multipart/form-data" na declaração da tag <form>do formulário. Adicionando esse atributo o
navegador irá saber que se trata de um formulário que possui envio de arquivos ao servidor.
Exemplos:
<input type="file" name="arquivo" />

Botões
Existem três tipos de botões, o Button (Não possui ação), o Reset (Devolve o valor padrão aos campos) e o
Submit (Envia os dados digitados no formulário para a página que foi definida no "action" do formulário).
Exemplos:
<input type="Button" value="Sem ação" />
<input type="Reset" value="Limpar o formulário" />
<input type="Submit" value="Enviar" />
Obs. Também é possível utilizar uma imagem como botão submit, fazendo da seguinte forma:
<input type="image" value="" src="imagem.jpg" />
Iframe
É um código HTML que faz com que uma determinada página seja aberta dentro de outra.
Trata-se de um código HTML, portanto só é possível utilizar um Iframe em páginas que aceitem HTML.
Confira um exemplo.
<IFRAME name="palco" src="iframe_0.html" frameBorder="0" width="400" height="150"

scrolling="auto"></IFRAME>
Onde:
Name: é o nome da janela, ele será usado caso você queira criar links que abram dentro do iframe,
é o valor do target.
Src: é a página que será aberta dentro do iframe.
Frameborder: borda do frame.
Width e Height: largura e altura do iframe, respectivamente.
Scrolling: Controla o aparecimento da barra de rolagem, altere para "no" caso não queira que ela
não seja exibida.
Obs. Caso queira fazer com que links que estão na página sejam abertos dentro do iframe, é necessário
adicionar o atributo target na tag <a> e este deve possuir o valor do name do iframe. Note que o name de
nosso iframe no exemplo acima é "palco", abaixo temos um exemplo de link que será aberto dentro de
nosso iframe:

Exemplos:
<a href="http://www.assessorpublico.com.br" target="palco">Assessor Público</a>
Ao clicar neste link iremos ver o site do Assessor Público sendo aberto dentro do iframe com o atributo
name com o valor "palco".
CSS
Prefácio
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a
apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal
benefício é prover a separação entre o formato e o conteúdo de um documento.
Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma
página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando
quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
Através dele é possível definir o layout de documentos HTML. Por exemplo, CSS controla fontes, cores,
margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais.
Publicação
Os arquivos criados devem ser salvos com a extensão ".css". E é recomendável que os mesmos sejam
salvos em uma pasta onde ficarão apenas os arquivos css que serão utilizados no projeto.
Comentários
Os comentários em CSS são abertos com uma barra e um asterisco e fechados com um asterisco e uma
barra, e são inseridos no documento apenas para organizar, lembrar, anotar, etc.
Exemplo:
/* Os links visitados e não visitados deste documento serão disparados em vermelho e não
sublinhados */
A:link { color: red; text-decoration: none; }

Sintaxe básica
Digamos que precisamos definir qual será a cor do plano de fundo de uma página, em HTML faríamos
assim:
<body bgcolor="#FF0000"></body>
Já utilizando CSS faríamos assim:
body { background: #FF0000; }
Imagem 3: Definição da regra CSS para tags.
Aplicando CSS em um documento
Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão
exemplificados a seguir. Recomendamos que você foque no terceiro método, ou seja o método externo.
Modo 1: In-Line (atributo Style)

Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo
mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a
seguir:
<body style="background-color: #FF0000;">
Página com o plano de fundo vermelho!
</body>

Modo 2: Interno (tag Style)

Outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir:
<head>
<title>Modo Interno</title>
<style type="text/css">
body { background: #FF0000; }
</style>
</head>
<body>
Página com o plano de fundo vermelho!
</body>
Modo 3: Externo
O método recomendado é o de lincar para uma folha de estilos externa. Usaremos este método nos
exemplos deste tutorial.
Uma folha de estilos externa é um simples arquivo de texto com a extensão .css. Tal como com qualquer
outro tipo de arquivo você pode colocar uma folha de estilos tanto no servidor como no disco rígido.
Digamos que digitamos em um arquivo de texto puro o conteúdo abaixo:
body {
background-color: #FF0000;
Vamos supor que salvamos esse arquivo como "style.css" e está localizada no diretório "css" que esta na
raiz de seu web site. Então iremos inserir no cabeçalho da pagina a seguinte tag:
<link rel="stylesheet" type="text/css" href="css/style.css" />
A partir deste momento todas as tags body dos documentos que possuírem a linha acima terá seu
background com a cor vermelho (#FF0000).

Cores e fundos
Neste tópico veremos como aplicar cores de texto e cores de fundo no seu web site. Abordaremos ainda os
métodos avançados de controle e posicionamento de imagens de fundo.
Color
Atributo para definição da cor do texto no elemento em questão.
h1 {
color: #ff0000;
Background-color
Define a cor do plano de fundo do elemento em questão.
body {
color: #ff0000;
background-color: #000000;
Background-image
Define a imagem do plano de fundo do elemento em questão.
body {
color: #ff0000;
background-image: url(images/topo.jpg);

Background-repeat
Define a forma de repetição do plano de fundo do elemento em questão.
Background-repeat: repeat-x - A imagem se repete na horizontal.
background-repeat: repeat-y - A imagem se repete na vertical.
background-repeat: repeat - A imagem se repete na tanto na horizontal como na vertical.
background-repeat: no-repeat - A imagem não se repete.
body {
color: #ff0000;
background-repeat: no-repeat;
Background-attachment
A propriedade background-attachment define se a imagem será fixa ou se irá rolar juntamente com o
elemento que a contém.
Background-attachment: scroll A imagem rola com a página.
Background-attachment: fixed A imagem é fixa.
body {
color: #ff0000;
background-attachment: fixed;

Background-position
Por padrão uma imagem de fundo é posicionada no canto superior esquerdo da tela. A propriedade
background-position permite alterar este posicionamento padrão e colocar a imagem em qualquer lugar na
tela.
background-position: 2cm 2cm A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na

página
background-position: 50% 25% A imagem é centrada na horizontal e a um quarto (25%) para baixo
na página
background-position: top right A imagem é posicionada no canto superior direito da página
body {
color: #ff0000;
background-attachment: fixed;
background-position: right bottom;
Background
A propriedade background é uma abreviação para todas as propriedades listadas anteriormente.
body {background: #000000 url(images/topo.jpg) no-repeat fixed right bottom; }

Fontes
Font-family
A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um
elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá
ser usada a segunda e assim por diante até ser encontrada uma fonte instalada.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Font-style
A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos
as cabeçalhos <h2> serão em itálico.
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
Font-variant
A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps
é aquela que usa letras maiúsculas de tamanhos reduzidos.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Font-weight
A propriedade font-weight define quão negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode
ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para
definir o peso da fonte.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Font-size
O tamanho da fonte é definido pela propriedade font-size.
Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da
fonte. Neste tutorial nós usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Font
Poderíamos abreviar algumas regras de formatação da fonte, segue um exemplo abaixo:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
Que ficaria desta forma:
p {
font: italic bold 30px arial, sans-serif;

Textos
Formatar e estilizar textos é um item chave para qualquer web designer. Nesta lição você será apresentado
às interessantes oportunidades que as CSS proporcionam para adicionar layout aos textos.
Text-indent
A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. No exemplo
a seguir um recuo de 30px é aplicado à todos os textos marcados com <p>:
p { text-indent: 30px;}
Text-align
A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser
alinhados à esquerda (left), à direita (right) ou centrados (center). E temos ainda o valor justify que faz com
o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é
usado em jornais e revistas.
No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas
células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:
th { text-align: right; }
td { text-align: center; }
p { text-align: justify;}
Text-decoration
A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você pode por
exemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a
seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos
<h3> são cortados por uma linha.
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through;}

Letter-spacing
O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta
propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as
letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a
seguir deverá ser usado.
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }
Text-transform
A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode escolher
capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no código HTML.
Como exemplo tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO"
ou "Cabeçalho". São quatro os valores possíveis para text-transform:
Capitalize: Capitaliza a primeira letra de cada palavra. Por exemplo: "John doe" transforma-se para
"John Doe".
Uppercase: Converte todas as letras para maiúscula. Por exemplo: "John doe" transforma-se
para"JOHN DOE".
Lowercase: Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se
para"John doe".
None: Sem transformações - o texto é apresentado como foi escrito no código HTML.
Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento <li>
(item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras
maiúsculas.
Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os
textos no código foram escritos com todas as letras em minúsculas.
h1 { text-transform: uppercase; }
li { text-transform: capitalize; }

Links
É possível aplicar aos links tudo que aprendeu nas lições anteriores (i.e. mudar cores, fontes, sublinhados,
etc.). A novidade aqui é que você pode definir as propriedades de maneira diferenciada de acordo com o
estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita
adicionar interessantes efeitos ao seu web site. Para estilizar estes efeitos você usará as chamadas
pseudo-classes.
O que é pseudo-classe?
Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma
propriedade de estilo para uma tag HTML.
Vamos ver um exemplo. Como você já sabe, links são marcados no HTML com tags <a>. Podemos então
usar a como um seletor CSS:
a { color: blue; }
Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. Você usará
pseudo-classes para estilizar links visitados e não visitados.
a:link { color: blue; } /*Estado normal do elemento*/
a:visited { color: green; } /*Elemento que já foi clicado*/
a:active { color: red; } /*Selecionado neste momento*/
a:hover { color: blue; } /*Com o mouse sobre o elemento*/
Agrupamento de elementos por Class e Id
Em alguns casos você deseja aplicar estilos a um elemento ou grupo de elementos em particular. Neste
tópico veremos como usar class e id para estilizar elementos.

Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de uvas usadas na produção de vinho
branco e de vinho tinto. O código HTML conforme mostrado abaixo:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Queremos que os links para vinho branco sejam na cor amarela, para vinho tinto na cor vermelha e os
demais links na página permaneçam na cor azul.
Para conseguir isto, dividimos os links em duas categorias. Isto é feito atribuindo uma classe para cada link,
usando o atributo class.
Vamos especificar esta classe no exemplo a seguir:
<p>Uvas para vinho branco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Uvas para vinho tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Agora podemos definir propriedades específicas para links pertencentes as classes whitewine e redwine,
respectivamente.
a { color: blue; }
a.whitewine { color: #FFBB00; }
a.redwine { color: #800000; }
Como mostrado no exemplo acima, pode-se definir propriedades para estilização dos elementos
pertencentes a uma determinada classe usando um .nomedaclasse na folha de estilos do documento.
Identificando um elemento com uso de id

Além de agrupar elementos podemos querer atribuir identificação a um único elemento. Isto é feito usando o
atributo id.
O que há de especial no atributo id é que não poderá existir dois ou mais elementos com a mesma id, ou
seja em um documento apenas um e somente um elemento poderá ter uma determinada id. Cada id é
única. Para casos em que haja necessidade de mais de um elemento com a mesma identificação usamos o
atributo class. A seguir um exemplo de possível uso de id:
<h1>Capítulo 1</h1>
...
<h2>Capítulo 1.1</h2>
...
<h2>Capítulo 1.2</h2>
...

O exemplo acima simula os cabeçalhos de um documento estruturado em capítulos e parágrafos. É comum

atribuir uma id para cada capítulo como mostrado a seguir:
<h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
Vamos supor que o cabeçalho do capítulo 1.2 deva ser na cor vermelha e o capítulo 1 deva ser na cor
verde. Isto pode ser feito conforme mostrado na folha de estilo a seguir:
#c1-2 { color: red; }
#c1 { color: green; }
Margin e Padding
Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a
distância entre os lados de elementos vizinhos (ou às bordas do documento) .
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
Ou, adotando uma sintaxe mais elegante:
body { margin: 100px 40px 10px 70px; }

Definindo padding de um elemento

Padding pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado
na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do
elemento.
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
h2 {
background: orange;
padding-left:120px;
Bordas
Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de
linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.
Border-width
A espessura das bordas é definida pela propriedade border-width, que pode assumir os valores thin,
medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas
espessuras de bordas:
Imagem 4: Valores possíveis para o atributo Border-Width.

Border-color
A propriedade border-color define as cores para as bordas. Os valores são expressos em código ou nome
de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow" .
Imagem 5: Exemplo de cores RGB, padrão utilizado em CSS.

Border-style
Existem vários tipos de bordas disponíveis para escolha. A seguir apresentamos 8 tipos diferentes de
bordas e como elas são renderizadas Internet Explorer 5.5. Todos os exemplos são mostrados na cor "gold"
e com espessura "thick", mas você pode usar qualquer cor e espessura ao seu gosto.
Os valores none ou hidden podem ser usados quando não se deseja a existência de bordas.
Imagem 6: Valores possíveis para a regra CSS Border-Style.

Exemplos de definição de bordas

As três propriedades explicadas acima podem ser definidas juntas para cada elemento e resultam em
diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>,
<ul> e <p>. O resultado pode não ser uma obra prima, mas, ilustra bem algumas das inúmeras
possibilidades de estilização de bordas:
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
ul {
border-width: thin;
border-style: solid;
border-color: orange;

É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior,
inferior, direita e esquerda). Veja o exemplo a seguir:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
Border
Assim como para muitas outras propriedades, você pode usar uma declaração abreviada para bordas.
Vamos a um exemplo:
p { border-width: 1px; border-style: solid; border-color: blue; }
Pode ser abreviada assim:
p { border: 1px solid blue; }

Altura e Largura
Até agora ainda não fizemos qualquer consideração sobre as dimensões dos elementos com que
trabalhamos.
Atribuindo largura
A propriedade width destina-se a definir a largura de um elemento.
O exemplo a seguir constrói um box dentro do qual podemos digitar um texto:
#box {
width: 200px;
border: 1px solid black;
background: orange;
Atribuindo altura
No exemplo acima a altura será determinada pelo conteúdo inserido no box. Você pode definir a altura de
um elemento com a propriedade height. Como exemplo, vamos fazer a altura do box anterior igual a 500px:
#box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;

Exibição
A propriedade display permite que você defina a maneira como determinado elemento HTML deve ser
renderizado.
Este é um campo <input name="CampoTeste" type="text" value="Meu texto" /> de texto
Exemplo:
input { display: none; }
Display: block
A declaração display: block faz com que o elemento HTML seja renderizado como bloco, tal como os
parágrafos e os cabeçalhos o são. Um bloco contém um espaço em branco tanto em cima como embaixo e
não permite outros elementos HTML ao lado.
Imagem 7: Resultado da utilização da regra CSS display com o valor block.

Display: inline
A propriedade display: inline faz com que o elemento HTML seja renderizado inline, dentro do bloco na
mesma linha. Quando o elemento encontra-se entre dois blocos ele forma o chamado 'bloco anônimo' e é
renderizado com a menor largura possível.
Imagem 8: Resultado da utilização da regra CSS display com o valor inline.

Display: none
A declaração display: none faz com que o elemento HTML não seja renderizado (assim sendo você não o
verá no exemplo a seguir, é o segundo bloco. Ver código fonte).
Imagem 9: Resultado da utilização da regra CSS display com o valor none.

Visibilidade
A propriedade visibility Define se um elemento é ou não visível. Os elementos invisíveis continuam a

ocupar espaço na página. Para que um elemento não ocupe espaço, deve ser formatado com: display:none.
Por padrão o visibility já vem visible.
visibility: hidden | visible
Exemplo:
Imagem 10: Resultado da utilização da regra CSS visibility com valor padrão.
Agora vamos tornar invisíveis os objetos da tag input:
input { visibility: hidden; }
Imagem 11: Resultado da utilização da regra CSS visibility com valor hidden.
Os espaço que pertence ao objeto continua, mas o mesmo fica invisível.

Cursor
Com a propriedade cursor possível definir qual será o cursor utilizado em um determinado elemento, abaixo
temos uma tabela definindo quais os valores adicionar a propriedade cursor, e quais cursores iremos obter:
Imagem 12: Valores possíveis para a regra CSS cursor.
Exemplo:
body { cursor: pointer; }
O trecho acima fará com que ao passar pelo conteúdo da tag body o mouse se torne uma mão, que
representa o cursor "pointer".

Posicionamento de elementos
Com posicionamento CSS podemos colocar um elemento em uma posição exata na página.
O princípio de posicionamento CSS

Considere a janela do navegador como um sistema de coordenadas:
Imagem 13: Princípios de posicionamento de elementos em CSS.
O princípio de posicionamento CSS estabelece que você pode posicionar um elemento em qualquer lugar
na tela usando um sistema de coordenadas. Vamos supor que queremos posicionar um cabeçalho:
Se quisermos o cabeçalho posicionado a 100px do topo e a 200px à esquerda, usamos o seguinte CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;

O resultado é mostrado a seguir:
Imagem 14: Exemplo de objeto posicionado utilizando regras CSS.
Posicionamento absoluto
Um elemento posicionado absolutamente não cria nenhum espaço no documento. Isto significa que não
deixa nenhum espaço vazio após ser posicionado.
Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute.
Você pode então usar as propriedades left, right, top, e bottom para definir as coordenadas e posicionar o
elemento.
Para exemplificar o posicionamento absoluto escolhemos colocar quatro boxes nos quatro cantos da
página:
#box1 { position:absolute; top: 50px; left: 50px; }
#box2 { position:absolute; top: 50px; right: 50px; }
#box3 { position:absolute; bottom: 50px; right: 50px; }

Posicionamento relativo
Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A
diferença entre os dois tipos de posicionamento é a maneira como o posicionamento é calculado.
O posicionamento para posição relativa é calculado com base na posição original do elemento no
documento. Isto significa uma movimentação do elemento para a esquerda, para a direita, para cima ou
para baixo. Assim fazendo o elemento ocupa um espaço após ser posicionado.
Como exemplo de posicionamento relativo vamos tentar posicionar três imagens relativamente as suas
posições originais na página. Notar como as imagens deixam um espaço vazio nas suas posições originais
no documento:
#dog1 { position:relative; top: 200px; left: 350px; bottom: 150px; }

Javascript
Prefácio
JavaScript é uma linguagem de programação criada pela Netscape em 1995, que em princípio se chamava
LiveScript, a Netscape após o sucesso inicial desta linguagem, recebe uma colaboração considerável da
Sun, após esta colaboração, podemos dizer que o JavaScript é uma linguagem compatível com a linguagem
Java, por esta razão, a semelhança dos nomes "JavaScript".
A linguagem foi criada para atender, principalmente, as seguintes necessidades:
Validação de formulários no lado cliente (programa navegador);
Interação com a página;
Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do Java, mas é
totalmente diferente no conceito e no uso.
De acordo com seu sistema de tipos JavaScript é:
Fraca - sua tipagem é mutável;
Dinâmica - uma variável pode assumir vários tipos diferentes durante a execução;
Implícita - as variáveis são declaradas sem tipo.
É interpretada, ao invés de compilada;
Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
Oferece bom suporte a expressões regulares (característica também comum a linguagens de

script).
Publicação
Os arquivos criados devem ser salvos com a extensão ".js". É recomendado que este tipo de arquivo seja
salvo em um diretório onde apenas ficarão arquivos com a extensão ".js".

Comentários
Em Javascript, podemos utilizar comentários de duas formas
Comentários de única linha;
Comentários de múltiplas linhas.
Exemplos de comentários:
<script language="javascript" type="text/javascript">
//Este comentário ocupa uma única linha
/*Já este comentário
pode utilizar várias
linhas*/
</script>
Onde colocar os scripts?
Os scripts devem ser escritos dentro do cabeçalho do documento (<head>), utilizando a tag <script>.
Vemos em muitos documentos desenvolvedores inserindo os scripts dentro do corpo da página (<body>),
que é errado, embora isso possa funcionar.
Tradicionalmente indicamos na tag o atributo "language", mas segundo a sintaxe HTML indicada pela W3C
é correto indicar o MIME-TYPE do linguagem em uso, "text/javascript" neste caso.
Exemplo:
//Inserir o código aqui
</script>

O elemento <noscript>
Diversos browsers não oferecem suporte a javascript, e alguns deles oferecem o recurso de desabilitar o
javascript. Neste caso é interessante usar o elemento noscript para avisar o usuário que seu browser não
oferece suporte à linguagem.
Exemplo:
<html>
<head>
alert("Javascript habilitado!");
</script>
</head>
<body>
<noscript>Habilite o Javascript em seu browser!</noscript>
</body>
</html>
Irá aparecer uma janela de alerta com a mensagem "Javascript habilitado!" caso o javascript esteja
habilitado. Caso contrário, irá aparecer a mensagem "Habilite o Javascript em seu browser!" no corpo da
página.
Tratamento de eventos
Os eventos são a maneira que temos em Javascript de controlar as ações dos visitantes e definir um
comportamento da página quando se produzam. Quando um usuário visita uma página web e interage com
ela se produzem os eventos e com Javascript podemos definir o que queremos que ocorra quando se
produzam.
Com Javascript podemos definir o que acontece quando se produz um evento como poderia ser que um
usuário clique sobre um botão, edite um campo de texto ou abandone a página

OnAbort
Executa um código JavaScript quando o usuário interrompe o carregamento de uma imagem, por exemplo,
com um clique no botão Parar. Deve ser usado com o objeto imagem (IMG) de HTML.
Exemplo:
<IMG NAME="foto" SRC="minha_foto.gif" onAbort="alert('Você não viu minha foto')" />
OnBlur
Executa um código JavaScript quando um elemento, janela ou quadro, perde o foco. Usado para Button,
Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window, na forma
onBlur="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<INPUT TYPE="text" VALUE="OnBlur" NAME="nome" onBlur="alert('Você saiu do campo')" />
OnChange
Executa um código JavaScript quando um campo perde o foco e tem seu valor modificado. Usado para
FileUpload, Select, Text, Textarea, na forma onChange="algumaCoisa", onde "algumaCoisa" é uma função
ou código de JavaScript.
Exemplo:
<INPUT TYPE="text" VALUE="OnChange" NAME="nome" onChange="alert('Mudou o valor')" />
OnClick
Executa um código JavaScript quando um objeto é clicado. Usado para Button, document, Checkbox, Link,
Radio, Reset, Submit, na forma onClick="algumaCoisa", onde "algumaCoisa" é uma função ou código de
JavaScript.
Exemplo 1:
<A HREF="http://www.assessorpublico.com.br/" onClick="return confirm('Abre Assessor

Público?')">Onclick</A>
Se o usuário clica no link, abre a caixa de confirmação. Se, nessa caixa, o botão Cancelar é clicado, o link
não é aberto.

Exemplo 2:
<INPUT TYPE="button" VALUE="Onclick" onClick="alert('Você clicou no botão')" />
OnDblClick
Executa um código JavaScript quando um duplo clique é dado no objeto. Usado para document, Link, na
forma onDblClick="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<INPUT Type="button" Value="onDblClick" onDblClick="alert('Foi dado um duplo clique')" />
OnFocus
Executa um código JavaScript quando o objeto recebe o foco. Usado para Button, Checkbox, FileUpload,
Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window, na forma onFocus="algumaCoisa",
onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<INPUT TYPE="text" VALUE="onFocus" NAME="nome" onFocus="alert('Ganhou foco')" />
OnKeyDown
Executa um código JavaScript quando uma tecla é pressionada. Usado para document, Image, Link, Text,
Textarea, na forma onKeyDown="algumaCoisa", onde "algumaCoisa" é uma função ou código de
JavaScript.
Exemplo:
<INPUT TYPE="text" VALUE="onkeydown" NAME="nome" onkeydown=" alert('Você pressionou')" />
OnKeyPress
Executa um código JavaScript quando o usuário pressiona ou mantém pressionada uma tecla. Usado para
document, Image, Link, Text, Textarea, na forma onKeyPress="algumaCoisa", onde "algumaCoisa" é uma
função ou código de JavaScript.
Exemplo:
<INPUT TYPE="text" VALUE=" onkeydown " NAME="nome" onkeydown="alert('A tecla esta

pressionada')" />

OnKeyUp
Executa um código JavaScript quando o usuário libera uma tecla que foi pressionada. Usado para
document, Image, Link, Text, Textarea, na forma onKeyUp="algumaCoisa", onde "algumaCoisa" é uma
função ou código de JavaScript.
Exemplo:
<INPUT TYPE="text" VALUE="OnKeyDown" NAME="nome" onkeydown=" alert('Você soltou a

tecla')">
OnLoad
Executa um código JavaScript quando o navegador termina o carregamento de uma janela, de todos os
quadros dentro de um FRAMESET, de uma imagem. Usado para Image, Layer, window, na forma
onLoad="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo :
<BODY onLoad="window.alert('Este é o nosso site!')">
OnMouseDown
Executa um código JavaScript quando o usuário pressiona um botão do mouse. Usado para Button,
document, Link, na forma onMouseDown="algumaCoisa", onde "algumaCoisa" é uma função ou código de
JavaScript.
Exemplo:
<IMG src="imagem.jpg" onmousedown="alert('Pressionou o click sobre a imagem')" />
OnMouseMove
Executa um código JavaScript quando o usuário move o cursor com o mouse. Usado na forma
onMouseMove="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Notar que não é associado a nenhum evento em particular por ser bastante freqüente.

OnMouseOut
Executa um código JavaScript quando o usuário move o cursor de dentro para fora de uma determinada
área (mapa de imagem ou link). Usado para Layer, Link, na forma onMouseOut="algumaCoisa", onde
"algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<IMG src="imagem.jpg" onmouseout="alert('Tirou o cursor de cima da imagem')" />
OnMouseOver
Executa um código JavaScript quando o usuário move o cursor de fora para dentro de uma determinada
área (mapa de imagem ou link). Usado para Layer, Link, na forma onMouseOver="algumaCoisa", onde
"algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<IMG src="imagem.jpg" onmouseover="alert('Passou o mouse sobre a imagem')" />
OnMouseUp
Executa um código JavaScript quando o usuário libera um botão do mouse. Usado para Button, document,
Link, na forma onMouseUp="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<IMG src="imagem.jpg" onmouseup="alert('Soltou o click do mouse')" />
OnReset
Executa um código JavaScript quando o usuário clica o botão Reset de um formulário. Usado para Form, na
forma onReset="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<FORM NAME="form1" onReset="alert('Pressionado o botão Limpar')">
Meio de envio:
<INPUT TYPE="text" NAME="forma" VALUE="Via aérea" SIZE="2"_>
<INPUT TYPE="reset" NAME="padrao" VALUE="Limpar">
</FORM>

O código dado avisa que o meio padrão será considerado se o usuário clicar no botão "Limpar" do
formulário.
OnResize
Executa um código JavaScript quando o usuário redimensiona uma janela ou um frame. Usado para
window, na forma onResize="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<BODY onResize="alert('Redimencionou a janela')">
onSelect
Executa um código JavaScript quando o usuário seleciona um texto em uma caixa. Usado para Text,
Textarea, na forma onSelect="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
<select name="teste" onselect="alert('Você selecionou');">

<option value="1">Um</option>
</select>
onSubmit
Executa um código JavaScript quando o usuário clica o botão Submeter de um formulário. Usado para
Form, na forma onSubmit="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<FORM NAME="form1" action="pagina.php" onSubmit="return verificarDados(this)">
<input type="text" name="nome" /><input type="submit" value="Enviar" />
</FORM>
No código dado, a função a ser desenvolvida, "verificarDados(a)", deve retornar True se os dados são
válidos e False caso contrário.
onUnload
Executa um código JavaScript quando o usuário sai da janela. Usado para window, na forma
onUnload="algumaCoisa", onde "algumaCoisa" é uma função ou código de JavaScript.
Exemplo:
<BODY onUnload="alert("Saiu da janela")">

Valores e variáveis
Em Javascript, um fragmento da informação é um valor, e existem diversos tipos de valor. Um valor String é
uma ou mais palavras ou números não calculáveis declarados entre aspas. Um número é um valor
calculável.
Exemplo:
var nome = "Júlio de Lima";
ATENÇÃO: O Javascript é uma linguagem case sensitive!!!
var nome = "Júlio de Lima";
var Nome = "Júlio"; //São duas variáveis diferentes
Palavras reservadas
Segue abaixo as palavras reservadas ao Javascript:
Imagem 15: Palavras reservadas do Javascript.
Controles Especiais
\n - new Nova linha
\r – Retorno do carrinho
\t – Caracteres TAB
Os delimitadores naturais para uma string são " ou ' . Caso seja necessário a utilização destes caracteres
como parte da string, utilize \ precedendo " ou '.
alert ("Cuidado com o uso de \" ou \' em uma string");

Operadores Lógicos
São operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE. Os
comandos condicionais serão vistos mais a frente.
= = Igual
!= Diferente
> Maior
>= Maior ou Igual
< Menor
<= Menor ou Igual
&& E
|| Ou
Operadores Matemáticos
São operadores a serem utilizados em cálculos, referências de indexadores e manuseio de strings. Ao

longo do manual estes operadores serão largamente utilizados, dando, assim, uma noção mais precisa do
seu potencial.
+ adição de valor e concatenação de strings
- subtração de valores
* multiplicação de valores
/ divisão de valores
% obtém o resto de uma divisão:
Ex: 150 % 13 retornará 7
7 % 3 retornará 1
+= concatena /adiciona ao string/valor já existente.
Ou seja: x += y é o mesmo que x = x + y
da mesma forma podem ser utilizados: -= , *= , /= ou %=

Um contador pode ser simplificado utilizando-se : X++ ou X-- o que equivale as expressões:
X = X + 1 ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.
Comandos Condicionais
São comandos que condicionam a execução de certa tarefa à veracidade ou não de uma determinada
condição, ou enquanto determinada condição for verdadeira.
São eles:
Comando IF
if (condição)
ação para condição satisfeita;
else
ação para condição não satisfeita;
Exemplo com mais de uma linha no escopo:
if (idade < 18){
categoria = "Menor";
} else {
categoria = "Maior";
alert(categoria);
IF ternário
receptor = ( (condição) ? verdadeiro : falso);
Exemplo:
var NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino");
Estrutura dos Loops

Comando FOR
for ( [inicialização/criação de variável de controle]; [condição];
[incremento da variável de controle] )
ação
Exemplo:
for (x = 0 ; x <= 10 ; x++) {
alert ("X igual a " + x) ;
Comando WHILE
Executa uma ação enquanto determinada condição for verdadeira.
while (condição){
ação
Exemplo:
var contador = 10
while (contador > 1){
alert("Valor do contador: "+contador);
contador--;
OBS: Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a condição
principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma ação (se determinada
condição ocorrer) mas volta para o loop.

Comando do...While
Executa o laço e faz a verificação ao fim.
do {
ação
} while (condição);
Exemplo:
var contador = 0;
do {
document.write(contador+"<br />");
contador++;
} while (contador < 1);
Comando For...In
Nos permite varrer vários elementos de um objeto.
for (variavel in objeto){
ação
Exemplo:
var propriedades;
for (propriedades in window) {
document.write(propriedades+"<br />");
O resultado serão todas as propriedades encontradas no objeto.

Escrevendo Scripts
Neste primeiro script iremos usar tudo o que aprendemos até agora para gerar algo realmente complexo.
Utilizando Javascript iremos escrever "Hello World" no navegador!
<html>
<head>
<title>Título do documento</title>
</head>
<body>
document.write("Hello World");
</script>
</body>
</html>
Caixa de diálogo
Alert
As caixas de diálogo de alerta são simples e informativas. Elas, geralmente, são utilizadas em validação de
formulários ou bloqueio de ações.
Sua função é mostrar apenas uma mensagem com um botão de confirmação para que esta seja fechada.
Para chamar esta caixa de diálogo usamos a função alert(). Esta função recebe como parâmetro uma string
que será a mensagem a ser exibida. Vejamos o código abaixo:
Exemplo:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
alert("Esta é uma caixa de diálogo ALERT do JavaScript!");
</SCRIPT>
Em caixas de diálogo há a possibilidade de controlar o fluxo de texto usando \n para a quebra de linhas.

Exemplo:
alert ("JavaScript \n Caixa de diálogo \n Alert");
</SCRIPT>
Prompt
A caixa de diálogo de prompt nos possibilita requerer uma entrada ao usuário apesar de não ser tão útil,
pois esse recurso pode facilmente ser substituído por um campo de texto feito em HTML.
Para chamarmos esta caixa de diálogo, usamos a função prompt() que recebe uma string como parâmetro.
Esse parâmetro será a mensagem a ser exibida dentro da caixa de diálogo.
A caixa de diálogo de prompt possui três elementos: um campo input para texto, um botão OK e outro
CANCELAR.
A função prompt() sempre irá retornar um valor, ou seja, podemos gravar o resultado da função em uma
variável ou algo assim. Se clicarmos no botão OK, o valor a ser retornado será o que estiver escrito no
campo de texto, mesmo se ele estiver vazio. Se clicarmos em CANCELAR, o valor retornado será null.
Abaixo criamos um exemplo no qual exige que o usuário digite o nome dele. Para isso, colocamos o prompt
dentro de uma estrutura de repetição while que tem a seguinte condição: se o resultado for null (ou seja, se
o usuário clicar em cancelar), ou então, se o resultado for vazio (ou seja, se o usuário não digitar nada e
clicar no OK), neste caso, deve-se executar a repetição.
Dessa forma nos asseguramos que o usuário sempre irá digitar alguma coisa dentro da caixa de diálogo.
Exemplo:
var nome = null;
while (nome == null || nome == ""){
nome = prompt("Qual é o seu nome?");
alert("Seu nome é "+nome);
</SCRIPT>

Confirm
A caixa de diálogo de confirmação é chamada pela função confirm() e tem apenas dois botões: um OK e
outro CANCELAR. Assim como a função prompt(), a função confirm() também retorna um valor que pode
ser true (verdadeiro) ou false (falso).
Como confirm() retorna um valor booleano, isso o torna ideal para ser usado com uma estrutura seletiva if.
Por exemplo, podemos usar a caixa de diálogo de confirmação antes de redirecionarmos uma página para
executar uma rotina para apagar algum registro do banco de dados.
No exemplo abaixo, não iremos tão profundamente quanto o cenário acima, pois envolve mais do que
simples JavaScript. Aqui, apenas iremos demonstrar o resultado do clique em algum dos dois botões.
decisao = confirm("Clique em um botão!");
if (decisao){
alert ("Você clicou no botão OK,\n"+ "porque foi retornado o valor: "+decisao);
} else {
alert ("Você clicou no botão CANCELAR,\n"+ "porque foi retornado o valor:

"+decisao);
</SCRIPT>
Funções
Criando Funções
Uma função é um set de instruções, que só devem ser executadas quando a função for acionada. A sintaxe
geral é a seguinte:
function NomeFunção (Parâmetros)
Ação

Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor de idade,
recebendo como parâmetro a sua idade.
function Idade(Anos) {
if (Anos > 17){
alert ("Maior de Idade")
} else {
alert ("menor de Idade") }
Para acionar esta função, suponha uma caixa de texto, em um formulário, na qual seja informada a idade e,
a cada informação, a função seja acionada.
<form>
<input type="text" size="2" maxlength="2" name="Tempo"

onchange="Idade(this.value)">
</form>
Observe-se que o parâmetro passado (quando ocorre o evento "onchange") foi o conteúdo da caixa de texto
This.value (Valor deste objeto) e que, na função, chamamos de "Anos". Ou seja, não existe co-relação entre
o nome da variável passada e a variável de recepção na função. Apenas o conteúdo é passado.
Funções Intrínsecas
São funções embutidas na própria linguagem. A sintaxe geral é a seguinte:
Exemplo:
Result = função (informação a ser processada)
eval = Calcula o conteúdo da string
parseInt - Transforma string em inteiro
parseFloat - Transforma string em número com ponto flutuante
date() - Retorna a data e a hora (veja o capítulo manipulando datas)

Exemplo 1:
Result = eval ( " (10 * 20) + 2 - 8");
Exemplo 2:
Result = eval (string);
No primeiro exemplo Result seria igual a 194. No segundo, depende do conteúdo da string, que também
pode ser o conteúdo (value) de uma caixa de texto.
Funções tipicamente Matemáticas:
Math.abs(número) - retorna o valor absoluto do número (ponto flutuante)
Math.ceil(número) - retorna o próximo valor inteiro maior que o número
Math.floor(número) - retorna o próximo valor inteiro menor que o número
Math.round(número) - retorna o valor inteiro, arredondado, do número
Math.pow(base, expoente) - retorna o cálculo do exponencial
Math.max(número1, número2) - retorna o maior número dos dois fornecidos
Math.min(número1, número2) - retorna o menor número dos dois fornecidos
Math.sqrt(número) - retorna a raiz quadrada do número
Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)
Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)
Math.sin(número) - retorna o seno de um número (anglo em radianos)
Math.asin(número) - retorna o arco seno de um número (em radianos)
Math.cos(número) - retorna o cosseno de um número (anglo em radianos)
Math.acos(número) - retorna o arco cosseno de um número (em radianos)
Math.tan(número) - retorna a tangente de um número (anglo em radianos)
Math.atan(número) - retorna o arco tangente de um número (em radianos)

Math.pi retorna o valor de PI (aproximadamente 3.14159)
Math.log(número) - retorna o logarítmo de um número
Math.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)
Math.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)
Math.LOG2E - retorna a base do logarítmo de 2 (aproximadamente 1.442)
Math.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)
Math.LOG10E - retorna a base do logarítmo de 10 (aproximadamente 0.434)
Criando Instâncias
Através do operador new podem ser criadas novas instâncias a objetos já existentes, mudando o seu
conteúdo, porém, mantendo suas propriedades. A sintaxe geral é a seguinte:
NovoObjeto = new ObjetoExistente(parâmetros);
Exemplo 1:
MinhaData = new Date();
MinhaData passou a ser um objeto tipo Date, com o mesmo conteúdo existente em Date
(data e hora atual)
Exemplo 2:
MinhaData = new Date(1996, 05, 27);
MinhaData passou a ser um objeto tipo Date, porém, com o conteúdo de uma nova data.
Exemplo 3:
Suponha a existência do seguinte objeto chamado Empresas
function Empresas (Emp, Nfunc, Prod){
this.Emp = Emp;
this.Nfunc = Nfunc;
this.Prod = Prod;

Podemos criar novas instâncias, usando a mesma estrutura, da seguinte forma:
Elogica = new Empresas("Elogica", "120", "Serviços");
Pitaco = new Empresas("Pitaco", "35", "Software");
Corisco = new Empresas("Corisco", "42", "Conectividade");
E usá-las da seguinte forma:
alert(Elogica.Emp);
//Um caixa de dialogo alert irá apresentar o valor "Elogica";
document.write("Temos "+Pitaco.Nfunc+" funcionários");
//Apresenta na tela a mensagem: "Temos 35 funcionários"
Variáveis estáticas
Um aspecto interessante da natureza das funções como objetos é que você pode criar variáveis estáticas
(static). Uma variável static é uma variável na extensão local cujo valor persiste em outras chamadas da
mesma função.
Exemplo:
<html>
<head>
Function Somar(x, y){
Somar.total += x + y;
return(Somar.total);
</script>
</head>
<body>

Somar.total = 0;
document.write(Somar(5, 10)+"<br />"); 
document.write(Somar(5, 10)+"<br />"); 
</script>
</body>
</html>
Manipulando Arrays
O JavaScript não tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays
é necessário a criação de um objeto com a propriedade de criação de um array.
Exemplo:
var NomeDia = new Array() ;
NomeDia[0] = "Domingo" ;
NomeDia[1] = "Segunda";
NomeDia [2] = "Terça";
NomeDia[3] = "Quarta";
NomeDia[4] = "Quinta";
NomeDia[5] = "Sexta" ;
NomeDia[6] = "Sábado" ;
Podemos trabalhar com arrays também desta maneira:
var Atividade = new Array("Analista" , "Programador", "Operador", "Conferente",

"Digitador");
Agora poderemos obter os dados diretamente dos arrays.
var DiaSemana = NomeDia[4] ;
var Ocupacao = Atividade[1] ;
DiaSemana passaria a conter "Quinta" e Ocupacao conteria "Programador".

Outra forma de se trabalhar com arrays é criar novas instâncias dentro do próprio objeto do array, o que
proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito da seguinte forma:
function Empresas (Emp, Nfunc, Prod) {
this.Emp = Emp;
this.Nfunc = Nfunc;
this.Prod = Prod;
TabEmp = new Array();
var QuantidadeElogica = 120;
var QuantidadePitaco = 35;
var QuantidadeCorisco = 42;
TabEmp["um"] = new Empresas("Elogica", QuantidadeElogica, "Serviços") ;
TabEmp[2] = new Empresas("Pitaco", QuantidadePitaco, "Software") ;
TabEmp["tres"] = new Empresas("Corisco", QuantidadeCorisco, "Conectividade");
Assim, poderemos obter a atividade da empresa número 3, cuja resposta seria Conectividade, da seguinte
forma:
Atividade = TabEmp["tres"].Prod
Manipulando String's
O JavaScript é bastante poderoso no manuseio de String´s, fornecendo ao programador uma total

flexibilidade quanto ao conteúdo.
Abaixo apresentamos os métodos disponíveis para manuseio de string´s.
string.length - retorna o tamanho da string (quantidade de bytes)
string.charAt(posição) - retorna o caracter da posição especificada (inicia em 0)
string.indexOf("string") - retorna o número da posição onde começa a primeira "string"

string.lastindexOf("string") - retorna o número da posição onde começa a última "string"
string.substring(inicio, fim) - retorna o conteúdo da string que corresponde ao intervalo especificado.
Exemplo:
Todo = "Elogica"
Parte = Todo.substring(1, 4) ;//(A variável Parte receberá a palavra log)
alert(Parte);
alert(Todo.toUpperCase()); //Transforma o conteúdo da string p/ maiúsculo (Caixa Alta)
alert(Todo.toLowerCase()); //Transforma o conteúdo da string p/ minúsculo (Caixa Baixa)
alert(escape(" ")); //retorna o valor ASCII da string (vem precedido de %)
alert(unescape("%20")); //retorna o caracter a partir do valor ASCII (precedido de %)
Manipulando Datas
Existe apenas uma função para que se possa obter a data e a hora. É a função Date(). Esta função devolve
data e hora no formato:Dia da semana, Nome do mês, Dia do mês, Hora:Minuto:Segundo e Ano.
Exemplo: Fri May 24 16:58:02 1996
Para se obter os dados separadamente, existem os seguintes métodos:
getDate() - Obtém o dia do mês (numérico de 1 a 31)
getDay() - Obtém o dia da semana (0 a 6)
getMonth() - Obtém o mês (numérico de 0 a 11)
getYear() - Obtém o ano
getHours() - Obtém a hora (numérico de 0 a 23)
getMinutes() - Obtém os minutos (numérico de 0 a 59)
getSeconds() - Obtém os segundos (numérico de 0 a 59)

No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a variável DataToda para armazenar
data/hora e a variável DiaHoje para armazenar o número do dia da semana.
var DataToda = new Date();
var DiaHoje = DataToda.getDay();
Para obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana e utilizar a
variável DiaHoje como indexador.
var NomeDia = new Array();
NomeDia[0] = "Domingo";
NomeDia[2] = "Terça";
NomeDia[3] = "Quarta";
NomeDia[4] = "Quinta";
NomeDia[5] = "Sexta";
NomeDia[6] = "Sábado";
var DiaSemana = NomeDia[DiaHoje];
Para criar uma variável tipo Date com o conteúdo informado pela aplicação, existe o método set. Assim,
temos os seguintes métodos:
setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds.
Seguindo o exemplo acima, para mudar o mês para novembro, teríamos:
DataToda.setMonth(10);
Exemplos adicionais serão encontrados no tópico "Timer e Date"

Timer e Date
É um método que permite a programação para que uma determinada ação só ocorra após o transcurso de
um determinado tempo.
variavel = setTimeout("ação", tempo);
Onde:
Variavel é uma variável apenas para controle do timer ação é a ação que se quer realizar. tempo é o tempo
de espera para que a ação ocorra, em milissegundos.
Obs.:
É importante observar que a ação só ocorrerá uma vez. Para que a ação volte a ocorrer, será necessário
repetir o comando dentro da ação, obtendo-se, assim, um LOOP.
Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte método:
clearTimeout(variavel);
Onde:
Variavel é o nome da variável de controle do timer.
Abaixo encontra-se um exemplo de um formulário que apresenta a data e hora atual, atualizando os dados
a cada um segundo, tendo dois botões de rádio que tem a função de ativar e desativar a atualização dos
dados. Apresenta também, fora do formulário, a data contendo dia e mês por extenso.
function Hoje() {
var ContrRelogio = setTimeout ("Hoje()", 1000);
var Hr = new Date();
var dd = Hr.getDate();
var mm = Hr.getMonth() + 1;

var aa = Hr.getYear();
var hh = Hr.getHours() ;
var min = Hr.getMinutes();
var seg = Hr.getSeconds();
var DataAtual = ((dd < 10) ? "0" + dd + "/" : dd + "/");
DataAtual += ((mm < 10) ? "0" + mm + "/" + aa : mm + "/" + aa);
HoraAtual = ((hh < 10) ? "0" + hh + ":" : hh + ":");
HoraAtual += ((min < 10) ? "0" + min + ":" : min + ":");
HoraAtual += ((seg < 10) ? "0" + seg : seg) ;
document.DataHora.Data.value = DataAtual;
document.DataHora.Hora.value = HoraAtual;
var NomeDia = new Array();
NomeDia[0] = "Domingo" ;
NomeDia[2] = "Terça";
NomeDia[3] = "Quarta" ;
NomeDia[4] = "Quinta" ;
NomeDia[5] = "Sexta";
NomeDia[6] = "Sábado" ;
var NomeMes = new Array() ;
NomeMes[0] = "Janeiro";
NomeMes[1] = "Fevereiro";
NomeMes[2] = "Março" ;
NomeMes[3] = "Abril";

NomeMes[4] = "Maio" ;
NomeMes[5] = "Junho";
NomeMes[6] = "Julho" ;
NomeMes[7] = "Agosto" ;
NomeMes[8] = "Setembro" ;
NomeMes[9] = "Outubro";
NomeMes[10] = "Novembro";
NomeMes[11] = "Dezembro";
var Data1 = new Date() ;
var dia = Data1.getDate();
var dias = Data1.getDay();
var mes = Data1.getMonth();
var ano = Data1.getYear() ;
document.write("Recife, " + NomeDia[dias] + " " + dia + " de " + NomeMes[mes] + "
de " + (ano));
</script>
<form name="DataHora">
Data : <input type="text" size="10" maxlength="10" name="Data"><br />
Hora : <input type="text" size="10" maxlength="10" name="Hora"><br />
<input type="radio" name="Botao" value="Para Relogio"

onclick="clearTimeout(ContrRelogio)" checked />Desativa
<input type="radio" name="Botao" value="Ativa Relogio" onclick="var ContrRelogio =

setTimeout('Hoje()', 1000)" />Ativa
</form>

Janela Popup
A sintaxe geral deste método é a seguinte:
window.open("Url", "Nome da janela", "Opções");
Onde:
Url - Endereço Internet onde a janela será aberta. Normalmente você estará utilizando a sua
própria Url, neste caso, preencha com "".
Nome da Janela - É o nome que aparecerá no top da janela (Título)
Opções - São as opções que definem as características da janela, quais sejam:
o toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.
o location - Abre a barra de location do browser
o directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.
o status - Abre uma barra de status no rodapé da janela
o scrollbars - Abre barras de rolamento vertical e horizontal
o menubar - Cria uma barra de menu tipo "File", "Edit", etc.
o resizable - Permite ao usuário redimensionar a janela
o width - Especifica a largura da janela, em pixels
o height - Especifica a altura da janela, em pixels
Exemplo :
<input type="button" name="Abre" value="Abre Janela" onclick=" window.open(

"JanelaPopup.html", "myWindow", "status = 1, height = 300, width = 300, resizable = 0"
);" />
Fechando a Janela
Para fechar a janela, utilize o seguinte método:
window.close();

DOM
Prefácio
DOM (Document Object Model - Modelo de Objetos de Documentos) é uma especificação da W3C,
independente de plataforma e linguagem, onde pode-se dinamicamente alterar e editar a estrutura,
conteúdo e estilo de um documento eletrônico. Ou seja, permitindo que o documento seja mais tarde
processado e os resultados desse processamento sejam incorporados de volta no próprio documento. A API
DOM oferece uma maneira padrão de se acessar os elementos de um documento, além de se poder
trabalhar com cada um desses elementos separadamente, e por esses motivos criar páginas altamente
dinâmicas.
Exemplo:
<html>
<head>
function AlteraObjeto(obj){
var objeto = obj.style;
if (objeto.fontWeight == 'bold')
objeto.fontWeight = 'normal';
else
objeto.fontWeight = 'bold';
</script>
</head>
<body>
<p style="font-weight: bold; cursor: pointer;" onclick="AlteraObjeto(this)">
Esse parágrafo encontra-se em negrito.</p>
</body>
</html>

Como DOM trabalha
O Dom vê o documento inteiro como uma árvore. É possível representar qualquer documento HTML como
uma árvore. A única exigência é que o documento seja muito bem formatado, erro como o não fechamento
de tags faz com que o documento deixe de ter sua estrutura como árvore.
De um modo um pouco mais formal, podemos dizer que uma árvore é um conjunto finito de nós, no qual,
existe um nó denominado raiz.
A seguir, temos a ilustração de uma árvore de documento HTML simples:
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=http://www.assessorpublico.com.br>My link</a>
<h1>My header</h1>
</body>
</html>
Abaixo temos um exemplo de documento HTML, e como o DOM o interpreta:
Imagem 16: Documento HTML segundo a interpretação do DOM.

Como acessar elementos
Existem dois métodos independentes de browser, segundo a W3C, que você pode usar para acessar
elementos, são eles:
getElementById(id) : Retorna a referencia de um nó para um elemento, obtidos pelo atributo id;
getElementsByTagName(tagname): Retorna a referencia de um conjunto de elementos, obtidos

pela tag;
Outros existem, mas não são renderizados em todos navegadores, um deles é o:
getElementsByName(atributo name): Retorna a referencia de um conjunto de elementos, obtidos

pelo atributo name;
Exemplo:
<body>
<input value="Meu primeiro parágrafo" />
<input value="Meu segundo parágrafo" />
<span id="meuTexto" name="meuTexto">Aqui um texto qualquer.</span>
<img name="imagens" src="img1.jpg" /><img name="imagens" src="img2.jpg" />
</body>
var texto = document.getElementById("meuTexto");
var campo = document.getElementsByTagName("input");
var imagem = document.getElementsByName("imagens");
document.write("Texto do ID meuTexto: "+texto.name);
document.write("Texto do primeiro campo: "+ campo[0].value);
document.write("src da segunda imagem: "+ imagem[1].src);
</script>

No exemplo acima, utilizando as ferramentas para acesso a elementos, referenciamos o objeto que possui o
Id "meuTexto" e todos os seus atributos e valores à variavel "texto". Também referenciamos todos os
objetos que possuem a tag "input" à variavel "campo", e as imagens foram referenciadas a variável
"imagem".
Tendo em mãos os objetos já referenciados as variáveis podemos utilizar seus atributos e alguns recursos
do DOM para receber ou alterar conteúdos destes objetos.
No exemplo acima utilizamos os atributos:
Name da tag <span>, através de seu ID;
Value da primeira tag <input>, através de sua tag;
Src da segunda tag <img>, através de seu atributo name;
A propriedade Style
Utilizando DOM é possível, em tempo de execução, alterar em qualquer atributo CSS de um elemento
referenciado.
Utilizando as técnicas já obtidas durante todo esse treinamento é possível realizar diversas alterações
dinâmicas na estrutura de nossos documentos.
Exemplo:
<p id="meuElemento">Texto sem formatação</p>
A forma de estilização dos elementos acontece da seguinte forma:
var estiloObjeto = document.getElementById("meuElemento").style;
ou
var estiloObjeto = document.getElementById("meuElemento");
estiloObjeto.style.propriedade = "valor";

A partir de agora, são acrescentadas propriedades DOM, bem semelhantes as css para estilizar o elemento,
abaixo temos alguns exemplos do que podemos fazer:
estiloObjeto.style.fontSize = "16px";
estiloObjeto.style.fontWeight = "bold";
No exemplo acima conseguimos alterar dinamicamente a estética em tempo de execução. Este objeto
agora é um parágrafo que possui a fonte com o size de 16px e Negrito.
Abaixo segue a tabela de propriedades CSS em DOM:
Imagem 17: Tabela de atributos CSS em DOM.

Imagem 18: Tabela de atributos CSS em DOM (Continuação).

A propriedade InnerHTML
Através do uso do DOM também é possível a manipulação do texto contido entre a abertura e fechamento
das tags. Desta forma podemos realizar a manipulação deste conteúdo de forma simples.
Exemplo:
<span id="meuTexto">Olá este é um <b>texto em negrito</b></span>
Podemos utilizar o innerHTML para ler o conteúdo do id "meuTexto" da seguinte forma:
var texto = document.getElementById("meuTexto").innerHTML;
document.write(texto);
O código acima apresenta o texto "Olá este é um <b>texto em negrito</b>" no navegador. Podemos
também agora inserir um texto diferente no lugar do que já existe:
document.getElementById("meuTexto").innerHTML = "Júlio de Lima";
O comando acima limpa o texto que esta no elemento indicado e insere em seu lugar o texto "Júlio de
Lima".
Manipulando elementos
A partir de agora vamos criar e manipular elementos e seus atributos em tempo de execução. Digamos que
queremos criar um novo parágrafo no corpo de nosso documento a partir do clique de um botão.
Então iremos referenciar o corpo de nosso documento a uma variável, neste caso "corpoDoc":
var corpoDoc = document.getElementsByTagName("body")[0];
Agora, utilizando a propriedade createElement referenciamos a criação do objeto a uma variável;
var paragrafo = document.createElement("p");
Onde "p", é o elemento a ser criado.

Iremos agora definir os atributos "Id" e "Style" deste parágrafo utilizando a propriedade setAttribute, seu id
será "pdinamico" e seu style possuirá as regras que definem que o texto será negrito e o tamanho da fonte
será de 20px:
paragrafo.setAttribute('id','pdinamico');
paragrafo.setAttribute('style','font-weight: bold; font-size: 20px;');
Em HTML isto ficaria desta forma:
<p id="pdinamico" style="font-weight: bold; font-size: 20px;"></p>
Utilizando a propriedade innerHTML iremos inserir um texto neste elemento, veja o exemplo abaixo:
paragrafo.innerHTML = "<i>Este é um paragrafo criado dinamicamente</i>";
E agora iremos adicionar este elemento criado ao corpo do documento, que esta atualmente referenciado a
nossa variável corpoDoc. O novo elemento será criado depois do último elemento dentro do corpo:
corpoDoc.appendChild(paragrafo);
Pronto, abaixo mostrarei como ficaria o código completo, e como executar esta ação a partir do clique de
um botão:
<html>
<head>
function CriarElemento(par){
var corpoDoc = document.getElementsByTagName("body")[0];
var paragrafo = document.createElement("p");
paragrafo.setAttribute('id','pdinamico');
paragrafo.setAttribute('style','font-weight: bold; font-size: 20px;');
paragrafo.innerHTML = "<i>Este é um paragrafo criado dinamicamente</i>";
corpoDoc.appendChild(paragrafo);

</script>
</head>
<body>
<input type="button" onclick="AlteraObjeto(this)" />
</body>
</html>
Podemos também exibir o conteúdo dos atributos de um determinado elemento utilizando a propriedade
getAttribute:
alert(paragrafo.getAttribute("style"));
Ou simplesmente utilizar o elemento seguido de um ponto seguido do seu atributo.

Exemplo:
alert(paragrafo.id);
Utilizando a propriedade removeAttribute podemos remover algum dos atributos de um elemento
paragrafo.removeAttribute("style");

Cases
Abaixo estão algumas implementações que foram realizadas nos sistemas web desenvolvidos aqui no
Assessor Público. Iremos utilizá-los como exemplos para testar nossos conhecimentos:
Try Catch
- Atribuição de valores vindos de campos que podem ser ID ou NAME com segurança;
exemplo. Receber o valor de um campo que possui o internalName JULIO sem saber se é ID ou NAME
Atributos
- Recebendo manipulando funções e valores contidos nos atributos dos campos;
exemplo. Adicionando Mais uma clausula a função OnBlur que já vem no Genexus. Alterando a imagem SRC que
esta no elemento. Trocando o href do elemento. Retirando o onclick do elemento.
Janelas
- Manipulação de janelas alertas em eventos dos elementos Genexus;
exemplo. Atribuindo valores a variáveis no AfterCampo e mostrando o mesmo através de um alert ao sair de um
campo;
Transporte de valores entre janelas e Frames

- Realizando transporte dos valores de uma janela aberta para seu Opener;
exemplo. Passando valores de uma popup ou um modal para qualquer elemento da tela anterior.
Conversão de Valores
- Alteração dos tipos de determinadas variáveis;
exemplo. Ao receber o conteúdo do OnBlur de um campo, é necessário converte-lo para string e ai sim alterar algo.
Valores
- Correta manipulação dos VALUE's e INNERHTML's providentes de elementos;
exemplo. Objetos de formulários tratam seus valores como VALUE e objetos do tipo SPAN tratam seus valores como
INNERHTML, e quando isso ocorre também é criado um campo do tipo HIDDEN contendo o valor do campo.
Manipulação Visual dos Elementos

- Escondendo e mostrando elementos que foram criados, alterando cores, tamanhos e efeitos;
exemplo. Utilizando o atributo Display do Elemento para alterar exibição, cor, tamanho, formato e etc.

Criando Elementos em Tempo de execução

- Gerando em tempo de execução elementos que ainda não existem, e fazendo com que estes possam
receber valores de outros;

Bibliografia
Livro Dominando Ajax, Edson Gonçalves, Editora Ciência Moderna – 07 de abril de 2010
http://pt.wikipedia.org/wiki/HTML - 07 de abril de 2010
http://www.criarweb.com/artigos/88.php - Miguel Angel Alvarez - Tradução de JML - 07 de abril de 2010
http://www.clem.ufba.br/tuts/html/c11.htm - 07 de abril de 2010
http://www.pt-br.html.net/tutorials/css/ - 07 de abril de 2010
http://maujor.com/tutorial/propriedade-css-display.php - 08 de abril de 2010
http://juliogreff.net/javascript-orientado-a-objetos-parte-1/ - 08 de abril de 2010
http://www.mspc.eng.br/info/jscriptContrEv.shtml - 08 de abril de 2010
http://pt.wikipedia.org/wiki/CSS - 08 de abril de 2010
http://pt.wikipedia.org/wiki/JAVASCRIPT - 08 de abril de 2010

ApostilaDHTML PDF

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

ApostilaDHTML PDF

Caricato da

Copyright:

Formati disponibili

Assunto: Identificação: Versão: Folha / Nº:

Introdução ao HTML dinâmico MAN 1.0 1 / 83

Introdução ao HTML dinâmico

Elaborado / Revisado por: Aprovado para uso por:

Grupo Assessor Público

Grupo Assessor Público

Grupo Assessor Público

Imagem 1: Definição dos atributos cellpading e cellspacing. ......................................................................... 12

Grupo Assessor Público

Grupo Assessor Público

O comentário começa por

Todos os elementos podem ter ID, NAME, STYLE e/ou CLASS.

Em elementos de formulário o atributo NAME é obrigatório

Grupo Assessor Público

<hr color="red" />

HR: comando que desenha uma barra horizontal

Color: atributo que especifica a cor da barra

Grupo Assessor Público

Estrutura básica do documento

A estrutura de um documento HTML apresenta os seguintes componentes:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>: define o cabeçalho de um documento HTML, que traz informações sobre o

<body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento

Grupo Assessor Público

Dentro do cabeçalho podemos encontrar os seguintes comandos:

<style>: define formatação em CSS.

<meta>: define propriedades da página, como codificação de caracteres, descrição da

<h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto

<p>: novo parágrafo, possui margem superior e inferior predefinida.

<br />: quebra de linha.

<span>:Tag sem valor de formatação;

Grupo Assessor Público

<a href="http://www.assessorpublico.com.br/">Clique aqui para acessar nosso site.</a>

<a href="http://www.assessorpublico.com.br/" target="_blank">Abrir em outra janela.</a>

<li type="square">Item 1</li>

Grupo Assessor Público

Formatação de estilos de textos

<font face="Verdana, Arial, Times New Roman" size="+1" color="#ff0000">

Estou aprendendo HTML

Size: Tamanho da fonte, pode ser valores de -1 à -7, 0 à 7 e +1 à +7;

<font face="Georgia, Times New Roman, Times, serif" size="+7">

Grupo Assessor Público

Align: Alinha horizontalmente a tabela em relação ao seu entorno.

Bgcolor: Dá cor de fundo à tabela.

Border: Define o número de pixels da borda principal.

Bordercolor: Define a cor da borda.

Cellpadding: Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma.

Cellspacing: Define o espaço entre as bordas (em pixels).

Height: Define a altura da tabela em pixels ou porcentagem.

Width: Define a largura da tabela em pixels ou porcentagem.

Imagem 1: Definição dos atributos cellpading e cellspacing.

Grupo Assessor Público

Imagem 2: Exemplo de tabela aninhada.

<table cellspacing="10" cellpading="10" Border="3">

<td align="center"> Célula da tabela principal</td>

<table cellspacing="2" cellpadding="2" border="1">

<td>Tabela aninhada, célula 1</td>

<td>Tabela aninhada, célula 2</td>

<td>Tabela unida, célula 3</td>

<td>Tabela aninhada, célula 4</td>

Grupo Assessor Público

Escopo do formulário<br />