136
WEB HTML, CSS e JavaScript Agosto de 2007 Versão 1

Html css javascript

Embed Size (px)

Citation preview

Page 1: Html css javascript

WEB

HTML, CSS e

JavaScript

Agosto de 2007

Versão 1

Page 2: Html css javascript

Web, HTML, CSS e JavaScript

2 2007 Alfamidia Prow LTDA.

Todos os direitos reservados para Alfamídia Prow LTDA.

AVISO DE RESPONSABILIDADE

As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as

precauções tenham sido tomadas na preparação deste material, a Processor Alfamídia

LTDA. não tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito

à responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou

indiretamente, pelas instruções contidas neste material ou pelo software de computador e

produtos de hardware aqui descritos.

01/08/2007

Alfamídia Prow LTDA

Av. Cristóvão Colombo 1496

Porto Alegre, RS

(51) 3073-2100

http://www.alfamidia.com.br

Page 3: Html css javascript

Web, HTML, CSS e JavaScript

3 2007 Alfamidia Prow LTDA.

WEB, HTML, CSS e

JavaScript

UNIDADE 1 ARQUITETURA DE APLICAÇÕES WEB................................................................................................. 7

1.1 INTERNET – UM POUCO DE HISTÓRIA ............................................................................................... 7 1.2 PÁGINAS ESTÁTICAS ....................................................................................................................... 7 1.3 INTRODUÇÃO A CLIENT SIDE SCRIPTS E SERVER SIDE SCRIPTS ...................................................... 8

1.3.1 Client Side Scripts e Server Side Scripts ................................................................................... 8 1.3.2 Client Side scripts – Javascript ................................................................................................. 8 1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP ..................................................................... 9

1.4 AMBIENTE DE DESENVOLVIMENTO ............................................................................................... 11 1.5 SERVIDORES WEB E DE APLICAÇÃO ............................................................................................. 11

1.5.1 O que é um Servidor WEB? ..................................................................................................... 11 1.5.2 O que é um servidor de aplicações? ........................................................................................ 13

1.6 NAVEGADORES ............................................................................................................................. 13 1.6.1 Padronização e protocolos de acesso ...................................................................................... 14 1.6.2 HTTPS (HyperText Transfer Protocol Secure) ....................................................................... 14

UNIDADE 2 INTRODUÇÃO AO HTML E WEB STANDARDS .................................................................................. 16

2.1 A LINGUAGEM HTML E A INTERNET ............................................................................................ 16 2.2 AS LIMITAÇÕES DO HTML ........................................................................................................... 16 2.3 OS WEB STANDARDS .................................................................................................................... 17 2.4 W3C ............................................................................................................................................. 17 2.5 IMPORTÂNCIA DOS WEB STANDARDS ........................................................................................... 17

UNIDADE 3 HTML – RECURSOS BÁSICOS ............................................................................................................. 19

3.1 POR QUE ENTENDER O HTML? ..................................................................................................... 19 3.2 CONCEITOS BÁSICOS DE HTML ................................................................................................... 19 3.3 TAGS BÁSICAS .............................................................................................................................. 20

3.3.1 Exemplo de HTML com Tags Básicas ..................................................................................... 20 3.3.2 Familiarizando-se com o HTML ............................................................................................. 21

3.4 FORMATAÇÃO DE TEXTOS ............................................................................................................ 21 3.4.1 Exemplo de Títulos e Subtítulos ............................................................................................... 22 3.4.2 Exemplo de Alinhamentos ....................................................................................................... 23 3.4.3 Exemplo de Formatação de Textos.......................................................................................... 25

3.5 CORES EM HTML ......................................................................................................................... 26 3.5.1 Utilizando o Vermelho ............................................................................................................. 27 3.5.2 Utilizando o Vermelho com Verde ........................................................................................... 28

UNIDADE 4 INCLUINDO IMAGENS EM UMA PÁGINA ............................................................................................ 29

4.1 FAZENDO REFERÊNCIA A OUTROS DOCUMENTOS ......................................................................... 29 4.1.1 Referência Relativa ................................................................................................................. 29 4.1.2 Referência Absoluta ................................................................................................................. 29 4.1.3 Referência Externa .................................................................................................................. 30

Page 4: Html css javascript

Web, HTML, CSS e JavaScript

4 2007 Alfamidia Prow LTDA.

4.2 INCLUINDO IMAGENS COM A TAG IMG ......................................................................................... 30 4.2.1 Incluindo Imagens – Exemplo 1 .............................................................................................. 30 4.2.2 Alinhando Imagens – Exemplo2 .............................................................................................. 31

4.3 INCLUINDO IMAGENS NO FUNDO DA PÁGINA – TAG BODY ......................................................... 33 4.3.1 Fundo com Padronagem ......................................................................................................... 34

UNIDADE 5 CRIANDO LINKS .................................................................................................................................... 35

5.1 HIPERLINKS................................................................................................................................... 35 5.1.1 Página com Links – Exemplo 1 ............................................................................................... 35

UNIDADE 6 CRIANDO TABELAS .............................................................................................................................. 37

6.1 TABELAS E LAYOUT DE PÁGINAS .................................................................................................. 37 6.2 CONSTRUINDO UMA TABELA ........................................................................................................ 37

6.2.1 Exemplo de uma Tabela Simples ............................................................................................. 38 6.2.2 Tabelas Mais Sofisticadas ....................................................................................................... 39 6.2.3 Construindo uma Tabela mais Sofisticada .............................................................................. 43 6.2.4 Integrando Recursos em Tabelas............................................................................................. 44

UNIDADE 7 FORMULÁRIOS ...................................................................................................................................... 45

7.1 INTRODUÇÃO A FORMULÁRIOS ..................................................................................................... 45 7.2 CRIANDO UM FORMULÁRIO .......................................................................................................... 45 7.3 UM PRIMEIRO FORMULÁRIO ......................................................................................................... 46 7.4 FORMULÁRIOS COM DIFERENTES TIPOS DO INPUT ...................................................................... 47 7.5 ENTRADA DE VÁRIAS LINHAS DE TEXTO - TEXTAREA ................................................................ 49 7.6 MENUS COM OPÇÕES - SELECT ................................................................................................... 50

UNIDADE 8 INTRODUÇÃO A ESTILOS CSS ............................................................................................................ 52

8.1 O CSS ........................................................................................................................................... 52 8.2 BENEFÍCIOS EM UTILIZAR CSS ..................................................................................................... 52 8.3 CSS PARA SEPARAR CONTEÚDO DA APRESENTAÇÃO ................................................................... 53 8.4 PÁGINAS COM SEMÂNTICA CORRETA ........................................................................................... 54 8.5 SINTAXE DO CSS .......................................................................................................................... 55 8.6 APLICANDO ESTILOS A UMA PÁGINA ............................................................................................. 56

8.6.1 Aplicando estilos a toda a página HTML ................................................................................ 56 8.6.2 Aplicando estilos à apenas uma tag HTML específica ............................................................ 56 8.6.3 Utilizando um arquivo de estilos externo ................................................................................ 57

8.7 FORMAS DE UTILIZAÇÃO DOS SELETORES ..................................................................................... 57 8.7.1 Aplicando estilos à uma tag: ................................................................................................... 57 8.7.2 Definindo estilos para mais um grupo de tags ........................................................................ 58 8.7.3 Definindo uma classe de estilos ............................................................................................... 59 8.7.4 Definindo um ID de estilos ...................................................................................................... 59

8.8 EXERCÍCIOS .................................................................................................................................. 62

UNIDADE 9 CSS NA PRÁTICA .................................................................................................................................. 63

9.1 UTILIZANDO CSS EM SITUAÇÕES REAIS ....................................................................................... 63 9.2 CRIANDO TABELAS COM ESTILOS CSS ......................................................................................... 63 9.3 DADOS EXIBIDOS EM UMA TABELA COM CSS ............................................................................... 63 9.4 ALTERANDO O ESTILO CSS .......................................................................................................... 65 9.5 DADOS E FORMULÁRIOS COM CSS................................................................................................ 66 9.6 EXERCÍCIOS COM CSS ................................................................................................................... 68

UNIDADE 10 INTRODUÇÃO AO JAVASCRIPT ..................................................................................................... 69

Page 5: Html css javascript

Web, HTML, CSS e JavaScript

5 2007 Alfamidia Prow LTDA.

10.1 O QUE É JAVASCRIPT?................................................................................................................... 69 10.2 ONDE OS SCRIPT PODEM SER EXECUTADOS ? ................................................................................ 69

UNIDADE 11 NOÇÕES BÁSICAS DE JAVASCRIPT ............................................................................................. 70

11.1 UTILIZANDO COMENTÁRIOS ......................................................................................................... 70 11.2 TIPOS DE DADOS ............................................................................................................................ 70

11.2.1 Tipos de dados Primitivos (por valor) ................................................................................ 71 11.2.2 Tipos de dados Compostos (por referência) ....................................................................... 71 11.2.3 Tipos de dados especiais (undefined e Null) ....................................................................... 71

11.3 VARIÁVEIS .................................................................................................................................... 72 11.4 OPERADORES ................................................................................................................................ 73 11.5 A ESTRUTURA DE UM SCRIPT JAVASCRIPT .................................................................................... 74 11.6 CRIANDO UM SCRIPT EM UMA PÁGINA HTML ............................................................................... 75 11.7 ESTRUTURAS DE TESTE ................................................................................................................. 75 11.8 ESTRUTURAS DE REPETIÇÃO ......................................................................................................... 77

11.8.1 While ................................................................................................................................... 77 11.8.2 For ...................................................................................................................................... 77

UNIDADE 12 UTILIZANDO FUNÇÕES ................................................................................................................... 79

12.1 UTILIZANDO FUNÇÕES NO JAVASCRIPT ......................................................................................... 79 12.2 AS FUNÇÕES INTRÍNSECAS DO JAVASCRIPT ................................................................................... 79

12.2.1 A função Eval() ................................................................................................................... 79 12.2.2 A função parseInt() e parseFloat() ..................................................................................... 80 12.2.3 Função escape() e unescape() ............................................................................................ 81 12.2.4 A função isNaN() ................................................................................................................ 81

12.3 FUNÇÕES CRIADAS PELO USUÁRIO ................................................................................................ 81

UNIDADE 13 UTILIZANDO OBJETOS ................................................................................................................... 83

13.1 OBJETOS INTRÍNSECOS .................................................................................................................. 83 13.1.1 O Objeto Date ..................................................................................................................... 83 13.1.2 O Objeto Array ................................................................................................................... 84 13.1.3 O Objeto Math .................................................................................................................... 85 13.1.4 O Objeto String ................................................................................................................... 86

13.2 OBJETOS CRIADOS PELO USUÁRIO ................................................................................................. 86 13.3 MÉTODOS ...................................................................................................................................... 87

13.3.1 Métodos estáticos ................................................................................................................ 87 13.3.2 A declaração this ............................................................................................................ 87 13.3.3 A declaração with ............................................................................................................ 87

UNIDADE 14 CONHECENDO OBJECTS DOM ...................................................................................................... 89

14.1 INTRODUÇÃO A DOM: .................................................................................................................. 89 14.2 O QUE É HTML DOM? ................................................................................................................ 89 14.3 QUANDO DEVEMOS USAR JAVASCRIPT ......................................................................................... 89 14.4 AS DIVISÕES DE DOM ................................................................................................................... 89 14.5 ALTERAR CONTEÚDO COM HTML DOM ...................................................................................... 89 14.6 DOCUMENT OBJECTS .................................................................................................................... 90 14.7 PROPRIEDADES DO OBJETO BODY .................................................................................................. 90 14.8 OBJETO FORM ............................................................................................................................... 91

14.8.1 Atributos do Form ............................................................................................................... 93 14.8.2 Métodos de um FORM ........................................................................................................ 93 14.8.3 Eventos de um form ............................................................................................................ 93 14.8.4 “Elements” de um FORM................................................................................................... 94

Page 6: Html css javascript

Web, HTML, CSS e JavaScript

6 2007 Alfamidia Prow LTDA.

14.9 MÉTODO GETELEMENTBYID......................................................................................................... 94 14.10 OBJETO FRAMESET ....................................................................................................................... 95

14.10.1 Atributos do Objeto frameset .............................................................................................. 96 14.10.2 Metodos de Objeto Frameset .............................................................................................. 96 14.10.3 Eventos de objeto de um Frameset ..................................................................................... 96

UNIDADE 15 MANIPULANDO FORMS COM DOM ................................................................................................ 98

15.1 TUTORIAL ..................................................................................................................................... 98 15.2 MAPEANDO EVENTOS DE UM FORMULÁRIO ................................................................................. 102

15.2.1 Mapeando Eventos através da tag script .......................................................................... 102 15.2.2 Mapeando eventos através de funções .............................................................................. 103 15.2.3 Mapeamento de eventos através de atribuição ................................................................. 104

15.3 EXTRAINDO INFORMAÇÕES DOS FORMULÁRIOS HTML .............................................................. 105 15.3.1 Buscando informações de formulários não nomeados ..................................................... 105 15.3.2 Buscando informações de formulários nomeados ............................................................ 106

15.4 VALIDANDO INFORMAÇÕES NO FORMULÁRIO ............................................................................. 107 15.4.1 Validando informações de caixas de texto ........................................................................ 107 15.4.2 Validando listas de seleção simples e múltipla (Combo e ListBox) .................................. 108 15.4.3 Validando caixas de escolha simples e múltipla (RadioButton e CheckBox) ................... 110 15.4.4 Criando uma função para mascaras de campos ............................................................... 112

15.5 VALIDAÇÃO COM REGULAR EXPRESSIONS (REGEX)................................................................... 114

UNIDADE 16 OBJETO WINDOW .......................................................................................................................... 115

7.1 MÉTODOS DO OBJETO WINDOW ................................................................................................... 115

UNIDADE 17 - ANEXO 1 PRINCIPAIS TAGS ....................................................................................................... 119

UNIDADE 18 - ANEXO 2 FRAMES ....................................................................................................................... 124

18.1 ESTRUTURA BÁSICA - FRAMESET ................................................................................................ 124 18.1.1 Atributos de Frameset ....................................................................................................... 125 18.1.2 Frame................................................................................................................................ 130

Page 7: Html css javascript

Web, HTML, CSS e JavaScript

7 2007 Alfamidia Prow LTDA.

Unidade 1 Arquitetura de Aplicações WEB

1.1 Internet – um pouco de história

A Internet teve início nos Estados Unidos em 1969 sob o nome de ARPANET. Composta

inicialmente de quatro computadores interligados, ela tinha como finalidade demonstrar

as potencialidades da construção de redes usando computadores dispersos em uma grande

área. Em 1972, 50 universidades e instituições militares já possuíam conexões.

Hoje a Internet é uma arquitetura de software e hardware interligados que são mantidas

por organizações comerciais e governamentais. Uma de suas principais características é

que não possui um proprietário único, responsável pelo seu funcionamento. Existem

apenas associações e grupos que se dedicam a desenvolver protocolos e procedimentos

para suportar a interligação entre os computadores, ratificar padrões e resolver questões

operacionais.

1.2 Páginas Estáticas

A exibição de páginas estáticas na Web inclui dois componentes: o navegador e o

servidor Web. O processo é o seguinte:

1. O usuário solicita a página digitando a URL em um navegador.

2. O navegador solicita a página ao servidor Web usando o HTTP (Hypertext Transfer

Protocol).

3. O servidor Web envia a página ao navegador no formato HTML.

Page 8: Html css javascript

Web, HTML, CSS e JavaScript

8 2007 Alfamidia Prow LTDA.

Solicitação HTTP

4. O navegador interpreta o HTML e exibe a página para o usuário. Ele também

interpreta algumas linguagens de script, como JavaScript.

Processamento de página pelo navegador

1.3 Introdução a Client Side Scripts e Server Side Scripts

1.3.1 Client Side Scripts e Server Side Scripts

Embora existam diversas linguagens com diferentes objetivos, nos exemplos práticos

deste curso estaremos nos concentrando em dois tipos de linguagens muito utilizados em

aplicações Web: client side scripts e server side scripts.

1.3.2 Client Side scripts – Javascript

São códigos de programa que são processados pela estação cliente. Geralmente em

aplicações voltadas à Internet, o código que é executado no cliente cuida apenas de

pequenas consistências de telas e validações de entrada de dados.

Page 9: Html css javascript

Web, HTML, CSS e JavaScript

9 2007 Alfamidia Prow LTDA.

Tratando-se de páginas web, os client-side scripts terão de ser processados por um

browser. O maior problema de se utilizar este tipo de artifício em uma aplicação é a

incompatibilidade de interpretação da linguagem entre os browsers. O Microsoft Internet

Explorer, por exemplo, é capaz de interpretar o Visual Basic Script, porém o Netscape

não o faz sem o auxílio de um plug in (que foi desenvolvido por terceiros). Há ainda o

problema de versões muito antigas de navegadores, que não conseguem interpretar

nenhum script.

Em grande parte das situações, não é possível exigir que o usuário final disponha de

determinado produto para acessar a aplicação. Portanto é importante pesar todos estes

fatores ao planejar alguma aplicação com client-side scripts.

A linguagem script mais indicada para se construir client-side scripts é o JavaScript,

devido a sua compatibilidade com os diversos browsers (Internet Explorer, FireFox,

Opera, Safári, etc).

Os scripts client-side são geralmente indicados para:

menus dinâmicos

movimento e trocas dinâmicas de imagens e textos

validação de campos de formulários sem acesso ao servidor

efeitos na página de acordo com o movimento do mouse

Funcionamento de scripts client-side

1.3.3 Server Side Scripts – ASP, ASP.NET, PHP e JSP

São códigos de programa que são processados no servidor. Devido a este fato, não é

necessário preocupar-se com a linguagem que o código foi criado: o servidor é quem se

encarrega de interpretá-lo e de devolver uma resposta para o cliente. Em páginas Asp, são

esses códigos os maiores responsáveis pelos resultados apresentados, e a linguagem

default utilizada é o Visual Basic Script. Em páginas PHP, a linguagem é o próprio PHP.

Em páginas JSP, a linguagem utilizada é o Java.

Page 10: Html css javascript

Web, HTML, CSS e JavaScript

10 2007 Alfamidia Prow LTDA.

A cada acesso a uma página, estes scripts geram dinamicamente uma página que é

enviada para o browser. Desta forma, diferente de scripts no cliente, estes nunca são

vistos pelo cliente, não podendo ser copiados.

Os scripts server-side são geralmente indicados para:

acesso a bancos de dados

criação de páginas em tempo real

lojas virtuais com carrinhos de compra

sistemas de cadastro e consulta de dados

sites de busca na Internet

Requisição Normal

Requisição de página dinâmica

Page 11: Html css javascript

Web, HTML, CSS e JavaScript

11 2007 Alfamidia Prow LTDA.

1.4 Ambiente de desenvolvimento

Como scripts, sejam server-side (ASP, PHP) ou client-side (Javascript) são arquivos do

tipo texto (ASCII), eles podem ser escritos em um editor de textos comum – Edit ou

Notepad, por exemplo. Para o desenvolvimento em ASP existe também o MS Visual

Studio(ASP.NET), que proporciona um ambiente mais agradável de desenvolvimento,

mas exige os mesmos conhecimentos do programador.

Diferentes fabricantes desenvolvem ambientes de desenvolvimento, que podem ou não

ser específicos para uma linguagem. A Adobe, por exemplo, tem como produto o

Dreamweaver, que além de definir a digramação de sites, pode da mesma forma ser

utilizado como ambiente de desenvolvimento

Também em software livre existem inúmeros ambientes de desenvolvimento para Java,

PHP e mesmo para linguagens proprietárias como ASP.

1.5 Servidores WEB e de Aplicação

1.5.1 O que é um Servidor WEB?

Um servidor web é um aplicativo responsável por fornecer ao computador do cliente

(usuários de sites e páginas eletrônicas), em tempo real, os dados solicitados. O processo

se inicia com a conexão entre o computador onde está instalado o servidor e o

computador do cliente; como na web não é possível prever a que hora se dará essa

conexão, os servidores precisam estar disponíveis dia e noite. A partir daí é processado o

pedido do cliente, e conforme as restrições de segurança e a existência da informação

solicitada, o servidor devolve os dados.

Quando falamos em servidor web, estamos na verdade falando de servidores capazes de

lidar com o protocolo HTTP, que é o padrão para transmissão de hipertexto. Muitos

servidores trabalham, paralelamente, com outros protocolos, como HTTPS (que é o

HTTP "seguro"), FTP, RPC, etc.

Além de transmitir páginas HTML, imagens e aplicativos (Java, Microsoft, etc), os

servidores também podem executar programas e scripts, interagindo mais com o usuário.

Page 12: Html css javascript

Web, HTML, CSS e JavaScript

12 2007 Alfamidia Prow LTDA.

Computador Cliente: Computador utilizado pelo usuário.

Computador Servidor: Computador utilizado para armazenar sites, sistemas,

arquivos e conteúdos em geral.

Resumo: Servidor WEB é um programa de computador que responde requisições.

Exemplo: quando digito www.alfamidia.com.br na barra de endereços do navegador e

teclo ENTER, o meu computador localiza o servidor onde está hospedado o site, que

responde a minha solicitação. Os servidores mais comuns são o IIS da Microsoft, o

Apache da Apache Software Foundation e o TomCat da Apache Jakarta Project. Abaixo,

listamos alguns servidores existentes no mercado:

Apache HTTP Server

BadBlue

Boa

Caudium, uma derivação do Roxen

Covalent Enterprise Ready Server, baseado no Apache HTTP Server

Fnord

IBM HTTP Server (baseado no Apache HTTP Server), antigo Domino Go

Webserver

Internet Information Services (IIS) da Microsoft, incluso no Windows

Light HTTP Server (lighttpd)

NaviServer

Oracle HTTP Server, baseado no Apache HTTP Server

Roxen

TomCat da Apache Jakarta Project.

thttpd da ACME Laboratories

Zeus Web Server

Page 13: Html css javascript

Web, HTML, CSS e JavaScript

13 2007 Alfamidia Prow LTDA.

1.5.2 O que é um servidor de aplicações?

Um servidor de aplicação é um software que disponibiliza um ambiente para a instalação

e execução de certas aplicações. O objetivo é disponibilizar uma plataforma, que abstraia

do desenvolvedor de software algumas das complexidades de um sistema computacional.

No desenvolvimento de aplicações comerciais, por exemplo, o foco dos desenvolvedores

deve ser a resolução de problemas relacionados ao negócio da empresa, e não de questões

de infraestrutura da aplicação. O servidor de aplicações responde a algumas questões

comuns à todas as aplicações, como segurança, garantia de disponibilidade,

balanceamento de carga e tratamento de exceções.

1.5.2.1 J2EE(Java 2 Enterprise Edition)

Devido a popularização da plataforma Java, o termo servidor de aplicação é

frequentemente uma referência a "Servidor de aplicação J2EE". O servidor WebSphere

Application Server da IBM e o WebLogic Server da BEA Systems são dois dos mais

conhecidos servidores J2EE comerciais. Alguns servidores de software livre também são

muito utilizados, como JBoss, JOnAS e Apache Geronimo. Como mencionado, a

linguagem de programação destes softwares é Java. Os módulos Web são implementados

através de servlets e JSP e a lógica de negócio através de EJBs. A plataforma J2EE

disponibiliza padrões para os containers Web e EJB. O Tomcat é um exemplo de

container de software livre, onde os módulos Web podem ser publicados.

1.5.2.2 NET

Na plataforma Microsoft .NET, o servidor de aplicação não é visto como um elemento

separado. O sistema operacional Windows 2003 contém a infraestrutura necessária para

servir aplicações, como o IIS, COM+ e Framework .NET.

1.6 Navegadores

Um dos aspectos mais visados pelos usuários e desenvolvedores é a segurança dos

navegadores, devido ao crescimento e as inovações das técnicas de invasões e infecções

que existem hoje em dia na internet.

Atualmente, os navegadores são “obrigados” a ter proteções contra scripts maliciosos,

javascripts entre outros conteúdos que poderiam existir em sites que os mesmos acessam.

Atualmente o Mozilla Firefox é considerado o navegador mais seguro (principalmente em

relação ao Internet Explorer), mas a Microsoft está lançando periodicamente atualizações

em seu Windows Update. Na área de segurança o Firefox possui um interruptor de scripts

(caso venham a atrapalhar sua navegação ou caso sejam maliciosos) e uma proteção

contra sites falsos que podem ocasionar em ataques do tipo phishing entre outros.

Page 14: Html css javascript

Web, HTML, CSS e JavaScript

14 2007 Alfamidia Prow LTDA.

1.6.1 Padronização e protocolos de acesso

Navegadores se comunicam com servidores Web usando o protocolo HTTP (HyperText

Transfer Protocol), que são por sua vez identificadas por uma URL (ex:

http://www.alfamidia.com.br). O protocolo HTTP permite aos navegadores tanto

recuperar como submeter informações para um servidor de Internet. O formato de

arquivo que uma página usa geralmente é o HTML, sendo identificado no protocolo

HTTP através de um indicador do seu tipo de conteúdo (content type) MIME.

A maioria dos navegadores suporta uma grande variedade de formatos em adição ao

HTML, tais como JPEG, GIF e PNG para imagens, e também podem geralmente ser

estendidos para suportar outros formatos através de plugins. Da mesma forma, muitos

navegadores suportam vários outros tipos de URLs com seus protocolos correspondentes,

tais como ftp, gopher, https(uma versão encriptada via SSL do HTTP). A combinação do

tipo de conteúdo e da URL do protocolo de transferência de arquivos permite que

desenvolvedores de páginas Web publiquem imagens, animações, sons e vídeo nas

mesmas, ou tornem tais conteúdos acessíveis através dessas páginas.

1.6.2 HTTPS (HyperText Transfer Protocol Secure)

É uma implementação do protocolo HTTP sobre uma camada SSL (Secure Sockets

Layer), criado pela Netscape Corporation e vem se tornando sinônimo de segurança para

aplicações que utilizam a internet para efetuarem negócios on-line. O SSL foi concebido

primordialmente pela necessidade de se ter um mecanismo que possibilitasse o sigilo

absoluto dos dados e a garantia de autenticidade dos mesmos nas transações eletrônicas

on-line. Desde sua concepção, o protocolo SSL vem se tornando padrão de fato a cada

dia. As principais características do SSL são:

Segurança em conexões cliente/servidor: o SSL garante o sigilo dos dados trocados

entre as partes envolvidas na conexão através do uso de criptografia simétrica. A fim

de evitar que as mensagens, mesmo decifradas, sejam modificadas e com isso um

ataque de escuta ativa seja possível, o SSL adiciona à todas as mensagens um MAC

(Message Authentication Code). Calculado a partir de funções de hash seguras, o

MAC garante a integridade das mensagens trocadas. Além de sigilo e integridade, o

SSL ainda provê a autenticação das partes envolvidas a fim de garantir e verificar a

identidade das mesmas. Neste processo, o SSL utiliza criptografia assimétrica e

certificados digitais (ex: todas as URLs que aparecem o https:// antes do endereço).

Independência de protocolo: o SSL roda sobre qualquer protocolo de transporte

confiável. Porém, a maioria das implementações são feitas para redes TCP/IP.

Interoperabilidade: dado a sua especificação bem detalhada e o uso de algoritmos

criptográficos conhecidos, diferentes implementações do protocolo tem a garantia de

interagir entre si.

Extensibilidade: dado a necessidade, permitir que novos parâmetros e métodos de

criptografia (assimétrica ou simétrica) sejam incorporados ao protocolo, sem que seja

necessária a criação de um novo protocolo ou a implementação inteira de uma nova

biblioteca.

Page 15: Html css javascript

Web, HTML, CSS e JavaScript

15 2007 Alfamidia Prow LTDA.

Eficiência: devido a demanda por recursos computacionais que este tipo de operação

requer, o protocolo dispõe da opção de armazenamento em cache de informações

referentes a sessão, diminuindo desta forma o esforço computacional em sucessivas

conexões.

Vantagens: O SSL preenche todos os critérios que o fazem aceitável para o uso nas

transmissões das mais sensíveis informações, como dados pessoais e números do

cartão de crédito. A aplicação pode optar entre utilizar todos ou somente uma parte

desses critérios dependendo do tipo e natureza das transações que estão sendo

efetuadas.

A criptografia é a arte de empregar certas regras em mensagens ou informações de forma

a esconder seu verdadeiro conteúdo. A mensagem ou informação codificada pelo uso da

criptografia, que pode ser transmitida por meios de comunicação considerados inseguros,

pois só o receptor, conhecedor das regras poderá reverter o processo e ler o documento

original.

Com o SSL, uma conexão é estabelecida onde todos os dados trafegam criptografados

pela rede, sem que haja o risco de serem interceptados e decifrados por alguém. Para

garantir a integridade dos dados, é necessário um protocolo seguro para orientar a

conexão, como por exemplo, o TCP/IP. O uso do SSL se disseminou por meio de sua

implementação nos EURZVHUV da Netscape, fornecendo aos usuários uma forma

segura de acessar servidores ZHE, permitindo inclusive a execução de transações

comerciais. Sua versão mais recente é a 3.0.

Seu funcionamento ocorre por meio do sistema de criptografia de chaves públicas e

privadas desenvolvido por Rivest, Shamir e Adleman, o RSA. O SSL é mais usado nos

browsers, como Mozilla, Internet Explorer entre outros.

Page 16: Html css javascript

Web, HTML, CSS e JavaScript

16 2007 Alfamidia Prow LTDA.

Unidade 2 Introdução ao HTML e

Web Standards

2.1 A Linguagem HTML e a Internet

Um dos principais elementos que levaram a popularização da Internet foi a World Wide

Web (teia de abrangência mundial), também conhecida como WWW. Trata-se de uma

nova forma dos usuários navegarem pelas informações e arquivos disponíveis nos vários

computadores ligados a Internet. O modelo WWW é tratar todos os dados da Internet

como hipertexto, isto é, vinculações entre diferentes documentos, para permitir que as

informações sejam exploradas interativamente e não apenas de uma forma linear.

A principal linguagem que popularizou a Web, e que ainda é a linguagem mais utilizada é

o HTML (Hypertext Markup Language), uma linguagem criada com o objetivo de

formatar informações de um texto e definir os hiperlinks entre um texto e outro, ou seja,

os pontos de vinculação entre documentos.

Hoje existem diversas ferramentas que permitem navegar na Internet e visualizar as

páginas HTML. Estas ferramentas são popularmente conhecidas como navegadores ou

browsers. Da mesma forma, existem também inúmeros editores visuais, dos quais o

Adobe Dreamweaver é o mais utilizado, que gravam arquivos no formato HTML.

2.2 As Limitações do HTML

A linguagem HTML originalmente tinha como propósito apenas definir a estrutura de um

documento e os hiperlinks entre documentos. Assim, ela permitia especificar quando

iniciava e terminava um parágrafo, definir títulos, sub-títulos, listas numeradas, textos em

itálico e negrito e outras características semelhantes.

Quase que imediatamente após seu surgimento, porém, novos recursos começaram a ser

criados, principalmente voltados para a construção de layouts mais sofisticados. Neste

momento surgiram recursos para especificar imagens de fundo, alinhar elementos em

tabelas, posicionar imagens, entre outros. Muitas destas novidades eram iniciativa das

empresas que desenvolviam os principais navegadores utilizados na internet, o que muitas

vezes obrigava o Web Designer a criar páginas diferentes para cada navegador, para

aproveitar ao máximo os novos recursos recém lançados.

Dois problemas tiveram sua origem derivada deste contexto: a falta de uma padronização,

pois diferentes empresas criavam novos recursos próprios para o HTML, e a mistura entre

layout e conteúdo. Ambos, problemas endereçados pelos Web Standards, como será visto

ao longo deste curso.

Page 17: Html css javascript

Web, HTML, CSS e JavaScript

17 2007 Alfamidia Prow LTDA.

2.3 Os Web Standards

O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos

reguladores, estabeleceu tecnologias para criação e interpretação de conteúdo para a Web,

visando resolver de forma definitiva os problemas mencionados anteriormente.

Estas tecnologias, a que chamamos Web Standards, têm como objetivo principal fazer

com que o conteúdo desenvolvido dentro destes padrões possa ser visualizado

independente do equipamento (computador, PDA, celular), do tipo do navegador (IE,

Mozilla, Opera, Netscape, etc) e da forma (banda de conexão) com que o usuário estiver

acessando a Internet. É um conceito de acessibilidade estendido.

Um dos objetivos dos Web Standards é a separação do conteúdo, definido através de

linguagens estruturais como XHTML e XML, e do layout, definido através de linguagens

de apresentação, em particular o CSS (Cascading Style Sheet). Outros Web Standards,

como o DOM (Document Object Model) e o ECMAScript 262 (versão padrão do

JavaScript) são voltados para a programação em páginas Web.

2.4 W3C

O que é o W3C?

O World Wide Web Consortium (W3C) é um consorcio de indústrias dedicado em levar a

Web ao seu potencial máximo. Fundada em 1994 por Tim Berners-Lee (invertor da

Web), o W3C tem mais de 450 organizações associadas, incluindo Microsoft, America

Online (incorporou a Netscape Communications), Apple ,Adobe, Macromedia, Sun

Microsystems, e uma variedade de outras empresas fabricantes de hardware e software,

provedores de conteúdo, instituições acadêmicas e empresas de telecomunicações. O

consórcio tem o apoio (estrutura física e intelectual) de três instituições de pesquisa: MIT

nos EUA, INRIA na Europa e Keio University no Japão.

Qual a sua função?

O W3C desenvolve especificações abertas (padrões) para aumentar a interoperabilidade

de produtos relacionados com a Web. As recomendações do W3C são desenvolvidas por

grupos de trabalhos originados das organizações membros e experts convidados.

2.5 Importância dos Web Standards

Conceber e construir sites usando estes padrões simplifica o processo e reduz os custos de

produção, obtendo-se ao mesmo tempo sites acessíveis a um maior número de pessoas e

dispositivos com acesso a Internet. Os sites desenvolvidos desta forma continuarão a

funcionar corretamente à medida que os browsers tradicionais evoluem e novos

dispositivos de Internet surgem no mercado.

"Web standards têm o objetivo de ser uma base comum... um fundamento para a World

Wide Web para que navegadores e outros programas compreendam o mesmo

vocabulário básico".

Page 18: Html css javascript

Web, HTML, CSS e JavaScript

18 2007 Alfamidia Prow LTDA.

Eric Meyer – Autor do livro Cascading Style Sheets: The Definitive Guide.

Page 19: Html css javascript

Web, HTML, CSS e JavaScript

19 2007 Alfamidia Prow LTDA.

Unidade 3 HTML – Recursos Básicos

3.1 Por que Entender o HTML?

O HTML é uma linguagem de marcação utilizada para criar e formatar páginas ou

documentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dos

documentos. O HTML permite criar documentos com componentes como cabeçalhos

(h1,h2,....), parágrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul, ol),

imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading Style

Sheets (CSS), responsável pela apresentação (formatação visual) dos documentos.

Novas especificações HTML não serão mais definidas. HTML 4.1 é o último padrão

HTML, e agora substituído pelo XHTML 1.0. No entanto, o XHTML não é

substancialmente diferente do HTML, sendo na verdade um subconjunto do HTML que

segue as regras do XML. Assim sendo, ao dominarmos o HTML, estaremos também

adquirindo os conhecimentos necessários para desenvolver também em XHTML.

3.2 Conceitos Básicos de HTML

Quando um browser exibe uma página HTML, ele lê um arquivo texto (que pode ser

aberto em qualquer editor de texto) com o conteúdo do site e marcações, chamadas tags,

que informam os elementos da página e sua formatação.

As marcações do HTML - tags - consistem do sinal (<), (o símbolo de "menor que"),

seguida pelo nome da marcação e fechada por (>) ("maior que").

De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O

símbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido

por uma barra (/) e precedido pelo texto referente.

No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível de

cabeçalho e </H1> avisa que o cabeçalho acabou.

Há tags que não exigem o fechamento, funcionando – via de regra – com ou sem a

definição de uma tag de fechamento, como é o caso da tag de definição de parágrafo <P>.

O padrão mais recente de uso do HTML, entretanto, recomenda que esta tag seja sempre

fechada, para termos um padrão mais próximo do utilizado em XHTML, como será

explicado nas unidades finais desta apostila.

Outras tags efetivamente não tem marcações de final, como a tag <BR> que apenas

define uma linha em branco, e a tag <HR> que exibe uma linha divisória.

Este tutorial tem por objetivo mostrar como criar e exibir páginas HTML. Tais páginas

são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da

linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão .html

ou .htm

Page 20: Html css javascript

Web, HTML, CSS e JavaScript

20 2007 Alfamidia Prow LTDA.

3.3 Tags Básicas

A seguir apresentamos as tags básicas de uma página HTML, que são suficientes para

criar uma página mínima. Nas lições seguintes apresentaremos diretamente exercícios

que incluirão novas tags que permitirão controlar diversas características da página.

Estas e todas as futuras tags são mostradas dentro de uma estrutura de tabela, para

facilitar sua consulta, e são repetidas em anexo ao final deste material, de forma a facilitar

seu uso no futuro como material de referência.

TAG O QUE FAZ

<!-- comentários --> Insere comentários nas páginas

<html> Toda página HTML deve estar entre o tag de início de um documento HTML e o tag de fim deste documento.

<head> Envolvem a seção de cabeçalho do documento, no qual são especificadas informações que não são exibidas na página, como título do documento e informações sobre o assunto da página.

<title> Indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na barra de título da sua Janela no Windows

<body> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND.

<br> Insere uma quebra de linha

3.3.1 Exemplo de HTML com Tags Básicas

Todo documento HTML deve ser identificado como HTML ( <html>...</html> ), ter uma

área de cabeçalho ( <head>...</head> ) com o nome do documento ( <title> </title> ), um

título principal e uma área definida como corpo ( <body>...</body> ) do conteúdo do

documento. Como o exemplo a seguir, basico1.html:

<html>

<head>

<title>Minha primeira página</title>

</head>

<body>

<!-- aqui temos um comentário que não aparecerá no browser -->

Page 21: Html css javascript

Web, HTML, CSS e JavaScript

21 2007 Alfamidia Prow LTDA.

Minha Primeira Página

</body>

</html>

3.3.2 Familiarizando-se com o HTML

Seguindo as orientações do instrutor, construa agora a sua primeira página HTML. Copie

ou crie um texto, utilizando o Dreamweaver, o bloco de notas do Windows ou qualquer

editor de texto. Salve e abra pelo browser que estiver instalado no computador.

Apenas com os códigos acima apresentados, é fácil perceber limitações. Não há ainda

como definir títulos, salientar palavras ou frases ou fazer qualquer tipo de estruturação da

informação, exceto quebrar os parágrafos utilizando a tag <BR>.

Para começar a melhorar sua primeira página, observe a seção seguinte. Acompanhe os

exemplos mostrados com o instrutor e desenvolva novas páginas conforme orientação.

3.4 Formatação de Textos

Mesmo em uma página apenas com textos, é fundamental podermos estruturar a

informação, de forma a deixá-la mais legível. Para tanto, novas tags se fazem necessárias,

como as mostradas na próxima tabela.

TAG O QUE FAZ

<hn> Marca um título. Sendo que “n” representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o número 1 é o maior tamanho do título.

<hr> Insere uma linha horizontal

<p> Marca um parágrafo

<center> Centraliza todo o conteúdo entre as tags <center> e </center>

<b> Coloca o texto em negrito

<i> Coloca o texto em itálico

Page 22: Html css javascript

Web, HTML, CSS e JavaScript

22 2007 Alfamidia Prow LTDA.

<u> Coloca o texto sublinhado

<tt> Coloca o texto em fonte monoespaçada. (fonte Courier,como máquina de escrever)

<font> Modifica a formatação do texto.

Atributos:

Size = define o tamanho da letra. Ex: <font size=5>Texto</font>

Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>

Color = define a cor da letra. Ex:<font color=red>Texto</font>

<pre> Marca um trecho formatado com fonte monoespaçada. A formatação com espaços e entrada de parágrafos é respeitada.

<basefont> Modifica a formatação padrão do texto.

Ex: <basefont size=5>

3.4.1 Exemplo de Títulos e Subtítulos

Na listagem abaixo faremos um novo exemplo e utilizaremos algumas das novas tags.

Digite a listagem abaixo e salve com o nome basico2.html.

<!-- início do documento html-->

<html>

<head>

<title>Melhorando minha home page</title>

</head>

<!-- início do corpo da página-->

<body>

<h1>Este é o título Principal</h1>

<h2>Este é o título Secundário</h2>

<h3>Estou adorando criar páginas</h3>

<hr>

<p>Este é o 1º primeiro paragráfo

<br>Esta é 2ª linha do 1º paragráfo

</p>

<p>Com este recurso inicio um paragráfo

<br>E com este recurso quebro uma linha

Page 23: Html css javascript

Web, HTML, CSS e JavaScript

23 2007 Alfamidia Prow LTDA.

</p>

<hr>

<!-- fim do corpo da página -->

</body>

</html>

<!-- fim do documento html-->

Veja o resultado no browser.

3.4.2 Exemplo de Alinhamentos

O alinhamento padrão que vem configurado nos navegadores é a esquerda, porém em

muitos casos podemos querer que todo ou parte do texto tenha outros alinhamentos Para

entender isto, digite a listagem abaixo, e salve como basico3.html, e acompanhe o

conceito de tag que marcam o alinhamento dos títulos e parágrafos nas páginas.

<html>

<head>

<title>Tags para Alinhamentos</title>

</head>

<body>

<h4 align=center>Título Centralizado</h4>

<h4 align=right>Título À Direita</h4>

<h4 align=left> Título À Esquerda<h4>

<hr>

<p align=center > Parágrafo ao Centro </p>

<p align=right >Parágrafo à direita </p>

Page 24: Html css javascript

Web, HTML, CSS e JavaScript

24 2007 Alfamidia Prow LTDA.

<p align=left >Paragráfo à esquerda </p>

<p align=justify >Este é um texto justificado. Na linguagem HTML temos vários tipos de alinhamentos que você poderá aplicar em sua página. Nesta parte do livro,veremos como alinhar linhas, parágrafos e cabeçalhos. </p>

<br>

<br>

<hr width=50% align=center >

<blockquote>Texto com mais margem</blockquote >

<blockquote><blockquote>Tem com mais margem ainda </blockquote> </blockquote>

</body>

</html>

Para ver o resultado deste exemplo abra o browser:

Page 25: Html css javascript

Web, HTML, CSS e JavaScript

25 2007 Alfamidia Prow LTDA.

3.4.3 Exemplo de Formatação de Textos

Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de

fonte e estilo. Para entender isto, digite a listagem abaixo, e salve como basico4.html,

<html>

<head>

<title>Formatando Estilos</title>

</head>

<body>

<center>Mudando o Estilo dos Caracteres</center>

<p>

<b>Texto em Negrito</b><br>

<i>Texto em Itálico</i><br>

<u>Texto sublinhado</u><br>

<tt>Texto Monoespaçado</tt><br>

<br><font color=red >Texto em Vermelho</font>

<br><font size=5>Texto em Tamanho 5</font>

<br><font face=verdana>Texto com a letra Verdana</font>

<br><center>

<font color=blue face=verdana size=5><b>Olá Mundo!!!</b></font></center>

<br>Você poderá os atributos para cada tipo de letra!

<br>

<font color=blue size=6>O</font><font color=red size=4>lá Mundo</font>

<br>

<pre>

Estamos progredindo

no curso de HTML.

Este tag permite que todos os espaços feitos no código fonte

sejam respeitados. Certo?

</pre>

</p>

</body>

</html>

Page 26: Html css javascript

Web, HTML, CSS e JavaScript

26 2007 Alfamidia Prow LTDA.

3.5 Cores em HTML

A definição de cores já foi vista como atributo da tag <font>. Entretanto, para

efetivamente utilizarmos as cores de forma eficiente no código HTML e necessário

entender como as mesmas são especificadas na linguagem.

O uso de cores em HTML pode ser feito através de duas formas básicas, utilizando o

nome em inglês de algumas cores específicas ou fazendo uso do código hexadecimal

RGB. O segundo método é mais recomendável pois permite a definição de todas as cores

possíveis.

Exemplos de uso de cores em fonte:

<font color=#000000>texto em preto</font>

<font color=#ffffff>texto em branco</font>

<font color=#ff0000>texto em vermelho</font>

Nos exemplos acima, valores diferentes de código permitem a definição de cores

diferentes. É importante entendermos como estas cores são formadas para podermos

manipular estes códigos, porém na prática geralmente normalmente será utilizado algum

Page 27: Html css javascript

Web, HTML, CSS e JavaScript

27 2007 Alfamidia Prow LTDA.

editor visual para escolher a cor desejada. Abaixo vamos fazer alguns exercícios para

entendermos melhor o uso de cores, utilizando as tags que já vimos anteriormente.

3.5.1 Utilizando o Vermelho

Digite o código abaixo como cores1.html

<html>

<head><title>vermelhos</title></head>

<body>

<br>

<font color=#330000>vermelho escuro, apenas 51 de vermelho e 0 de verde e azul

</font>

<br>

<font color=#660000>vermelho menos escuro

</font>

<br>

<font color=#990000>vermelhos cada vez mais claros

</font>

<br>

<font color=#cc0000>vermelho claro

</font>

<br>

<font color=#ff0000>o vermelho mais claro e puro possível

</font>

</body>

</html>

Observe o resultado em seu browser para poder conferir as tonalidades e note que não

foram utilizadas as cores verde e azul. Obviamente podemos criar vários tons de

vermelho com parcelas também das outras cores.

Page 28: Html css javascript

Web, HTML, CSS e JavaScript

28 2007 Alfamidia Prow LTDA.

3.5.2 Utilizando o Vermelho com Verde

O exemplo abaixo, cores2.html, utiliza cores misturando tons vermelhos e verde. Abaixo,

uma imagem mostra a tela resultante, mas é recomendável visualizar no browser para

observar as cores em si.

<html>

<head>

<title>vermelhos e verdes</title>

</head>

<body>

<br><font color=#ff9900>laranja: vermelho com algum verde</font>

<br><font color =#ffff00>amarelo (vermelho + verde)</font>

<br><font color =#99ff00>amarelo esverdeado</font>

<br><font color =#00ff00>verde puro</font>

</body>

</html>

Observe a imagem abaixo em seu browser para poder conferir as cores:

Page 29: Html css javascript

Web, HTML, CSS e JavaScript

29 2007 Alfamidia Prow LTDA.

Unidade 4 Incluindo Imagens em uma Página

4.1 Fazendo Referência a Outros Documentos

Como foi mostrado anteriormente, uma página HTML é apenas uma texto com algumas

tags que definem características da página. Entretanto, quando observamos uma página

HTML normalmente visualizamos elementos gráficos que não podem ser definidos desta

forma, como, por exemplo, fotos.

A forma que o HTML trata esta questão é muito simples: todas as imagens da página –

assim como muitos outros elementos que veremos ao longo deste curso – não estão no

mesmo arquivo da página HTML, mas sim em outros arquivos.

Antes de analisarmos a tag que define a utilização de imagens, vamos primeiro entender

algumas formas de referência externa que podemos encontrar em documentos HTML

4.1.1 Referência Relativa

Vamos imaginar que os arquivos que desejamos referenciar estejam no mesmo diretório

de nossa página HTML. Neste caso, a referência pode ser feita simplesmente

especificando o nome do arquivo em questão. Observe a parte em negrito do exemplo

abaixo (os outros elementos serão estudados em seguida):

<img src=banner1.jpg>

Também podemos ter uma imagem ou outro arquivo referenciado que esteja em outro

diretório, acima ou abaixo do diretório em que está nossa página HTML, como nos

exemplos abaixo:

<img src=imagens/banner1jpg>

<img src=../banner1.jpg>

4.1.2 Referência Absoluta

Em alguns casos, pode não ser interessante mantermos apenas referências relativas, em

especial se nosso site for um pouco mais complexo. Podemos ter muitas páginas que

desejamos colocar em diferentes diretórios que utilizem uma mesma imagem. Nestes

casos, muitas vezes é mais interessante criarmos um diretório padrão que seja

referenciado por todas as páginas da mesma forma, independente da localização de cada

página. O exemplo abaixo mostra este caso, fazendo uso de um diretório imagens na raiz

do site:

<img src=/imagens/banner1.jpg>

Page 30: Html css javascript

Web, HTML, CSS e JavaScript

30 2007 Alfamidia Prow LTDA.

4.1.3 Referência Externa

Poderemos ter ainda situações em que temos sites em diferentes domínios fazendo

referência ao mesmo arquivo, ou podemos querer utilizar, por exemplo, uma imagem que

esteja localizada em outro site da Internet. Nestes casos fazemos uma referência externa

especificando a URL completa do site:

<img src=http://www.alfamidia.com.br/imagens/banner1.jpg>

Obs: nestes casos nos podemos nos abster de incluir a especificação http://, de outro

modo o browser não tem como saber que não se trata de um diretório local.

4.2 Incluindo Imagens com a Tag IMG

Uma vez entendido o conceito de fazer referências a outros arquivos, incluir imagens se

tornou bastante simples, basta conhecermos algumas características da tag imagem,

conforme apresentado na tabela abaixo.

TAG O QUE FAZ

<img> Insere uma imagem

Atributos

src=indica o nome da imagem a ser carregado.

align=middle centraliza o base do texto com o centro da imagem

align=left faz a imagem flutuar a esquerda enquanto o texto circunda imagem à direita.

align=top alinha o texto no topo

align=right faz a imagem flutuar a direita enquanto o texto circunda imagem à esquerda.

alt=”n” indica o texto para ser exibido quando o navegador não exibe a imagem. Sendo que n é o título que identifique a imagem.

Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”>

4.2.1 Incluindo Imagens – Exemplo 1

Neste exercício exercitaremos os tags que permitem a inserção de imagens em uma

página. Utilizaremos uma imagem do próprio site da Alfamídia. Crie o arquivo como

imagem1.html

<html>

Page 31: Html css javascript

Web, HTML, CSS e JavaScript

31 2007 Alfamidia Prow LTDA.

<head><title>Imagens</title>

</head>

<body>

<h1>Agora estamos trabalhando com imagens</h1>

<img src=http://www.alfamidia.com.br/images/banner1.jpg>

<br>O comando acima inseriu uma imagem do site da Alfamídia nesta página.

</body>

</html>

4.2.2 Alinhando Imagens – Exemplo2

Neste exemplo trabalharemos com o alinhamento da imagem e do texto. Para entender

isto, digite a listagem a seguir, e salve como imagens2.html

<html>

<head><title>Imagens</title>

</head>

<body>

Note neste exemplo que a imagem <img src=imagem1.gif> está entre o texto

<br><hr><br>

<img src=imagem1.gif align=top>

Neste exemplo a imagem está à esquerda e o texto está no topo.

Observe que quando o texto continua na linha seguinte ele segue para abaixo da imagem

<br><hr><br>

Page 32: Html css javascript

Web, HTML, CSS e JavaScript

32 2007 Alfamidia Prow LTDA.

<img src=imagem1.gif align=middle>A imagem está à esquerda e o texto no centro, porém a

situação da quebra de linha persiste, com o texto seguindo, na linha seguinte, para

abaixo da imagem.

<br><hr><br>

<img src=imagem1.gif align=left>Neste exemplo a imagem ficou alinhada à esquerda,

permitindo que o texto ficasse todo à direita ao redor da imagem. Utilize este recurso

toda vez que desejar que o texto fique ao lado da imagem

<br><hr><br>

<img src=imagem1.gif align=right>Neste exemplo a imagem ficou alinhada à direita,

permitindo que o texto ficasse todo à esquerda ao redor da imagem.

</body>

</html>

Acompanhe com o professor como cada comando de alinhamento posiciona de forma

diferente o texto e a imagem.

Page 33: Html css javascript

Web, HTML, CSS e JavaScript

33 2007 Alfamidia Prow LTDA.

4.3 Incluindo Imagens no Fundo da Página – Tag BODY

É muito comum encontrarmos páginas com uma imagem ou padronagem como fundo.

Para entendermos como isto é feito, teremos que utilizar um parâmetro de uma tag vista

anteriormente, a tag <BODY>.

<body> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND.

Quando definimos uma imagem para o fundo de uma página, se a página mostrada for

maior que a imagem, ela será replicada na horizontal, vertical ou em ambas as dimensões.

Page 34: Html css javascript

Web, HTML, CSS e JavaScript

34 2007 Alfamidia Prow LTDA.

Esta característica pode inclusive ser utilizada com um recurso de layout, permitindo, por

exemplo, a repetição de um padrão.

4.3.1 Fundo com Padronagem

No exemplo a seguir, imagem3.html, uma padronagem é utilizada como fundo. Em geral,

para um resultado esteticamente interessante, são utilizadas padronagens muito mais

suaves, ou imagens maiores que a tela.

<html>

<head><title>Exemplo com Fundo</title>

</head>

<body background=padrao.gif>

<img src=imagem1.gif>

</body>

</html>

Page 35: Html css javascript

Web, HTML, CSS e JavaScript

35 2007 Alfamidia Prow LTDA.

Unidade 5 Criando Links

5.1 Hiperlinks

Hiperlink é o elemento fundamental da navegação pela internet. O conceito é simples:

selecionando-se determinado elemento em uma página Web, somos levados para uma

nova página.

Para criarmos um site inteiro precisamos fazer uso destes links para estabelecer a ligação

entre as páginas de nosso site, de forma que, através de um único clique sobre a frase ou

imagem, navegarmos para algum lugar no site ou na WEB.

Como padrão em nosso curso, observe a tag utilizada para a definição dos hiperlinks e

trabalhe junto com o instrutor nos exemplos:

TAG O QUE FAZ

<a> Define um link

Atributos

Href = indica o endereço do link.

Target = define onde o link será aberto:

_blank define que será aberta uma nova janela.

_top define que irá abrir na mesma janela.

_self define que será aberto no mesmo Frame.

_parent define que irá abrir a em um Frame Pai.

5.1.1 Página com Links – Exemplo 1

Confira a página link1.html:

<html>

<head><title>Estudando links</title></head>

<body>

<h3>Exemplo de links internos</h3>

<a href=exemplo1.html>Exemplo1</a>

<a href=exemplo2.html>Exemplo2</a>

<hr>

<h3>Exemplo de links externos</h3>

Page 36: Html css javascript

Web, HTML, CSS e JavaScript

36 2007 Alfamidia Prow LTDA.

<a href=http://www.alfamidia.com.br>Visite o site da alfamídia</a>

<br><a href=http://www.adobe.com>Site da Adobe</a>

<h3>Você também pode usar imagens como links, mas é recomendável utilizar borda=0 para não aparecer uma moldura de link.. Observe que neste exemplo o link abre em uma nova janela</h3>

<a href=exemplo3.html target=_top><img src= imagem1.gif></a>

</body>

</html>

Veja o resultado na figura a seguir:

Page 37: Html css javascript

Web, HTML, CSS e JavaScript

37 2007 Alfamidia Prow LTDA.

Unidade 6 Criando TABELAS

6.1 Tabelas e Layout de Páginas

O recurso de tabelas foi originalmente criado, no HTML, com o objetivo de organizar

informações e exibir dados na forma de planilhas. Este ainda é um dos principais usos de

planilhas em HTML, e será bastante explorado nesta unidade.

Entretanto, com este recurso também foi possível exercer um controle muito maior sobre

o layout de uma página HTML. Utilizando uma série de técnicas envolvendo imagens de

1 pixel de altura, planilhas com bordas invisíveis e formas inteligentes de posicionar

imagens, é possível criar layouts bastante sofisticados.

Esta técnica está caindo em desuso, porém, pois com o HTML 4.1 e o CSS é possível

controlar de forma bastante precisa a diagramação de um site sem ter que utilizar as

tabelas como um subterfúgio. Nas próximas unidades serão apresentadas técnicas de

diagramação sem o uso de tabelas (tableless design), enquanto que nesta unidade o foco é

no uso de tabelas para a exibição de informações em planilhas.

6.2 Construindo uma Tabela

Tabelas são definidas, em HTML, com a definição das linhas e, dentro das linhas, das

células de cada coluna. Com apenas 4 tags, vistas na tabela seguinte, é possível definir

diversos tipos de tabelas:

TAG O QUE FAZ

<table> Define uma tabela. Antes e depois de uma tabela, acontece sempre uma quebra de linha.

Atributos

Border: define espessura da borda da tabela

Cellspacing: espaço entre cada célula

Cellpadding: distância entre borda e conteúdo de cada célula.

Width: largura da tabela, em pixels ou valor percentual

<tr> Define uma linha normal da tabela (table row).

Atributos

Align: valores left, right e center definem o alinhamento

Page 38: Html css javascript

Web, HTML, CSS e JavaScript

38 2007 Alfamidia Prow LTDA.

horizontal.

Valign: valores top, middle e bottom definem o alinhamento vertical.

<td> Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas células é alinhado a esquerda.

Atributos

Align: valores left, right e center definem o alinhamento horizontal.

Valign: valores top, middle e bottom definem o alinhamento vertical.

Nowrap: não há quebra de linhas dentro das células

Colspan: número de colunas que a célula irá ocupar

Rowspan: número de linhas que a célula irá ocupar

Width: largura da célula, em pixels ou valor percentual

<th> Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquer célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito.

Atributos: os mesmos apresentados acima, para td

6.2.1 Exemplo de uma Tabela Simples

O exemplo tabelas1.html abaixo mostra uma tabela utilizando as tags apresentadas. A

figura em seqüência apresenta a imagem desta página:

<table border=1>

<!-- linha 1-->

<tr>

<td>Itens/Mês</td>

<th>Janeiro</th><th>Fevereiro</th><th>Março</th>

</tr>

<!-- linha 2-->

<tr>

<th>Usuarios</th><td>80</td><td>93</td><td>120</td>

</tr>

<!-- linha 3-->

<tr>

<th>Linhas</th><td>3</td><td>3</td><td>5</td>

</tr>

Page 39: Html css javascript

Web, HTML, CSS e JavaScript

39 2007 Alfamidia Prow LTDA.

</table>

Como foi dito, a tabela é construída linha a linha. Observe os comentários no código

acima.

6.2.2 Tabelas Mais Sofisticadas

As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de

alguns atributos mostrados na tabela anterior. Vamos ver os principais em exemplos

práticos:

Tabela2.html – exemplo de alinhamento horizontal (align)

<table border=1>

<tr>

<td>Primeira célula</td><td>Segunda célula</td><td>Terceira célula</td>

</tr>

<tr>

<td align=center>centro</td>

<td align=left>esquerda</td>

<td align=right>direita</td>

</tr>

</table>

Tabela3.html – alinhamento vertical (valign)

<table border=1>

<tr>

<td> Teste para alinhamento<br>

com relação a bordas<br>

Page 40: Html css javascript

Web, HTML, CSS e JavaScript

40 2007 Alfamidia Prow LTDA.

inferior e superior<br>

</td>

<td valign=top> TOP </td>

<td valign=middle>MIDDLE</td>

<td valign=botton>BOTTOM</td>

</tr>

</table>

Tabela4.html – Célula em várias colunas (colspan)

<table border=1>

<tr>

<td colspan=3>3colunas</td>

<td>normal</td>

<td>normal</td>

</tr>

<tr>

<td>col 1</td>

<td>col 2</td>

<td>col3</td>

<td>col 4</td>

<td>col 5</td>

</tr>

</table>

Tabela5.html – Célula em várias linhas (rowspan)

<table border=1>

<tr>

<td rowspan=3>3 linhas</td>

<td>col 2</td>

<td>col 3</td>

Page 41: Html css javascript

Web, HTML, CSS e JavaScript

41 2007 Alfamidia Prow LTDA.

<td>col4</td>

<td>col5</td>

</tr>

<tr>

<td>col 2</td>

<td>col 3</td>

<td>col4</td>

<td>col 5</td>

</tr>

<tr>

<td>col 2</td>

<td>col 3</td>

<td>col4</td>

<td>col 5</td>

</tr>

</table>

Tabela6.html – borda maior (border)

<table border=5>

<tr>

<td>teste1</td> <td>teste2</td> <td>teste3</td>

</tr>

<tr>

<td>teste4</td> <td>teste5</td> <td>teste6</td>

</tr>

</table>

Tabela7.html – Espaço entre células (cellspacing)

<table border=2 cellspacing=5>

<tr>

Page 42: Html css javascript

Web, HTML, CSS e JavaScript

42 2007 Alfamidia Prow LTDA.

<td>teste1</td> <td>teste2</td> <td>teste3</td>

</tr>

<tr>

<td>teste4</td> <td>teste5</td> <td>teste6</td>

</tr>

</table>

Tabela 8.html – Espaçamento interno a célula (cellpadding)

<table border=2 cellpadding=8>

<tr>

<td>teste1</td> <td>teste2</td> <td>teste3</td>

</tr>

<tr>

<td>teste4</td> <td>teste5</td> <td>teste6</td>

</tr>

</table>

Tabela9.html – largura da tabela em percentuais (width)

<table border=1 width=90%>

<tr>

<td>segunda</td>

<td>ter&ccedil;a</td>

<td>quarta</td>

</tr>

<tr>

<td>quinta</td>

<td>sexta</td>

<td>s&aacute;bado</td>

</tr>

</table>

Page 43: Html css javascript

Web, HTML, CSS e JavaScript

43 2007 Alfamidia Prow LTDA.

Tabela10.html – espaçamento em célula (width)

<table border=1 width=90%>

<tr>

<td width=70% >segunda</td>

<td>terça</td>

<td>quarta</td>

</tr>

<tr>

<td>quinta</td>

<td>sexta</td>

<td>sábado</td>

</tr>

</table>

6.2.3 Construindo uma Tabela mais Sofisticada

Tente reproduzir a tabela mostrada na figura abaixo utilizando códigos HTML. Observe

um cuidado especial com os detalhes de alinhamento.

Page 44: Html css javascript

Web, HTML, CSS e JavaScript

44 2007 Alfamidia Prow LTDA.

6.2.4 Integrando Recursos em Tabelas

Crie agora uma tabela, utilizando sua imaginação, fazendo uso do maior número possível

de recursos vistos anteriormente. Inclua imagens, links para outras páginas e as

formatações de textos vistos anteriormente.

Page 45: Html css javascript

Web, HTML, CSS e JavaScript

45 2007 Alfamidia Prow LTDA.

Unidade 7 Formulários

7.1 Introdução a Formulários

Até o presente momento vimos diversos recursos do HTML para criar uma página,

definindo seu layout e conteúdo. Neste capítulo apresentaremos a forma principal de

obter dados do usuário e poder assim interagir com ele.

O elemento FORM, da linguagem HTML, é o responsável por tal interação. Ele provê

uma maneira agradável e familiar para coletar dados do usuário através da criação de

formulários com janelas de entrada de textos, botões e outros elementos de entrada de

dados.

Os dados que o usuário preenche em uma página HTML são enviados para o servidor,

para serem então processados por um programa, por exemplo um CGI em linguagem

PERL ou um página de acesso a banco de dados em ASP ou PHP. Também é possível

processar localmente um campo de formulário utilizando um script em JavaScript ou

VBScript, o que muitas vezes é feito para validar um campo antes do mesmo ser enviado

ao servidor.

Nesta lição iremos nos concentrar em aprender todos os tags HTML de criação de

formulários e a diferença entre eles.

7.2 Criando um Formulário

Observe na tabela a seguir, os principais tags utilizados na criação de formulários, e

observe os exercícios seguintes:

TAG O QUE FAZ

<form> Define um formulário

Atributos

method: get, que envia as informações na própria URL, ou post, que envia de forma não visível para o usuário

action: url que será chamada, a priori um aplicativo capaz de tratar os dados enviados pelo formulário (PHP, ASP, JSP).

<input> Define uma entrada de dados

Atributos

Type: text, campo tipo texto; password, para senhas;

Page 46: Html css javascript

Web, HTML, CSS e JavaScript

46 2007 Alfamidia Prow LTDA.

hidden, não aparece para o usuário; checkbox, para marcar; radio, para escolher entre um conjunto de opções. submit cria um botão para enviar os dados e reset um botão para limpar o formulário.

Name: nome do campo

Value: valor pré-definido para o campo

Size: tamanho do campo a ser exibido

Maxlength: tamanho máximo de caracteres

Checked: para campos checkbox e radio, define como marcado

<textarea> Define uma entrada de texto com várias linhas

Atributos

Rows: número de linhas

Cols: número de colunas

<select> Define uma lista de opções para selecionar

Atributos

Name: nome do campo

Multiple: permite selecionar vários campos da lista

Site: define o número de linhas a serem exibidas

<option> Item de uma lista aberta

Atributos

Value: valor do campo se este item for selecionado

Selected: indica que este valor está selecionado

7.3 Um Primeiro Formulário

O exemplo a seguir mostra um formulário simples, form1.html, que apenas pergunta o

nome da pessoa. Ele ainda não tem um botão para confirmar, porém ao pressionar

ENTER o formulário será acionado.

Form1.html – utlizando um campo de formulário

<form method=get>

Qual o seu primeiro nome?

<input type="text" name="primeiro_nome" value="carlos" size="10" maxlength="15">

</form>

Page 47: Html css javascript

Web, HTML, CSS e JavaScript

47 2007 Alfamidia Prow LTDA.

Observe que o formulário não tem um comando action, o que significa que, ao ser

acionado, o formulário irá chamar a própria página. Digite seu nome, pressione ENTER e

observe a URL no topo da página mudar para incluir o parâmetro do formulário.

Experimente substituir o método de envio para POST.

7.4 Formulários com Diferentes Tipos do INPUT

Vamos agora estudar vários exemplos de pequenos formulários, cada um apresentando

um recurso diferente. Teste cada um deles para se familiarizar com a tag apresentada:

Form2.html – utilizando tipo password

<form method="post" action="teste.php">

Informe sua senha de acesso (8 caracteres):

<input type="password" value="xpto" name="sua_senha" size="8" maxlength="8">

</form>

Obs: neste exemplo não faz sentido utilizarmos o método get, pois a função do tipo

password perderia o sentido.

Form3.html – Botões de limpar e enviar formulário (submit e reset)

<form method="get">

Qual o seu primeiro nome? <input type="text"><br>

<input type="reset" value="limpa campos">

<input type="submit">

Page 48: Html css javascript

Web, HTML, CSS e JavaScript

48 2007 Alfamidia Prow LTDA.

</form>

Form4.html – Campos para marcar opções (checkbox)

<form method="get">

<p>

<input type="checkbox" name="boletim" checked>Sim, eu desejo receber o boletim de notícias.

</p>

<p>

<input type="checkbox" name="info">Sim, eu gostaria de receber mais informações turísticas.

</p>

<input type="reset" value="limpa campos">

<input type="submit">

</form>

Form5.html – campos de opção (radio)

<form method=get>

Suas preferências na viagem:

<dl>

<dd>Classe do bilhete:

<input type="radio" name="classe" value="eco">econômica

<input type="radio" name="classe" value="exe">executiva

<input type="radio" name="classe" value="pri" checked>primeira

</dd>

<dd>Localização:

<input type="radio" name="local" value="frente">área fumante

<input type="radio" name="local" value="tras">área não fumante

</dd>

</dl>

Page 49: Html css javascript

Web, HTML, CSS e JavaScript

49 2007 Alfamidia Prow LTDA.

<input type="reset" value="limpa campos">

<input type="submit">

</form>

Obs: neste exemplo os dois grupos de botões tem o valor “name” diferente. Se fosse o

mesmo, só poderia ser selecionada uma entre todas as cinco opções.

7.5 Entrada de várias linhas de texto - TEXTAREA

Observe o exemplo a seguir. Se você deseja que um texto seja exibido no campo textual

ao abrir o formulário, simplesmente coloque este texto entre as marcações de início e fim

da TEXTAREA. É recomendável utilizar o método post para este tipo de campo, pois

existe uma limitação para o máximo de informações que podem ser transmitidas através

do método get.

Form6.hrml – Texto em várias linhas

<form method="post">

Por favor, escreva aqui suas sugestões, dúvidas e críticas:<br>

<textarea name="critica" rows="3" cols="40">

gostaria de obter mais informações sobre

este servidor. grato.

</textarea>

<input type="reset" value="limpa campos">

<input type="submit">

</form>

Page 50: Html css javascript

Web, HTML, CSS e JavaScript

50 2007 Alfamidia Prow LTDA.

7.6 Menus com opções - SELECT

A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções de

menu ficam entre a marcação de início <SELECT> e a de fim </SELECT>. Observe os

dois exemplos a seguir:

Form7.html – Menu de opções

<form method="get">

Onde você pretende fazer turismo nas férias?

<select name="lugares_para_ver">

<option>fortaleza

<option value="sul">Florianópolis ou Porto alegre

<option>Rio de janeiro

<option selected>Brasília

<option value="amazonia">Manaus

</select>

<br>

<input type="reset" value="limpa campos">

<input type="submit">

</form>

Page 51: Html css javascript

Web, HTML, CSS e JavaScript

51 2007 Alfamidia Prow LTDA.

Form8.html – Opção com múltiplas escolhas

<form method="get">

Onde você pretende fazer turismo nas férias?

<select multiple size=3 name="lugares_para_ver">

<option>fortaleza

<option value="sul">Florianópolis ou Porto alegre

<option>Rio de janeiro

<option selected>Brasília

<option value="amazonia">Manaus

</select>

<br>

<input type="reset" value="limpa campos">

<input type="submit">

</form>

Page 52: Html css javascript

Web, HTML, CSS e JavaScript

52 2007 Alfamidia Prow LTDA.

Unidade 8 Introdução a Estilos CSS

8.1 O CSS

O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) é uma linguagem de

formatação proposta pelo W3C. Visa remover a formatação dos documentos (X)HTML,

separando conteúdo e formatação.

A especificação inicial, chamada CSS1, tornou-se uma recomendação do W3C no final

de 1996 e define praticamente todos estilos de apresentação utilizados hoje em dia. A

segunda versão da especificação, chamada CSS2, foi aprovada em 1998 e acrescentou

vários estilos novos, principalmente na área de posicionamento e tabelas. Uma nova

versão está em desenvolvimento e espera-se que seja aprovada em um futuro próximo.

Todos os browser atuais, o Internet Explorer 6, Netscape Navigator 7, Mozilla Firefox 1,

Opera 7 e Safari suportam o CSS. Entretanto o suporte ao CSS Nível 2 foi implementado

em níveis diferentes, o que torna a adoção dos conceitos de posicionamento via CSS, ou

Tableless, como é conhecido, ainda um pouco complicado, necessitando muitas vezes de

truques de correção, conhecido como CSS Hacks.

Algumas considerações sobre CSS:

Os estilos definem para o browser como devem ser exibidos os elementos do

(X)HTML.

Os estilos são geralmente definidos em folhas de estilo.

O CSS foi implementado na versão HTML 4.0 para resolver o problema de

separação entre conteúdo e formatação.

Os estilos quando armazenados em folhas de estilo externas (arquivos .css) e

compartilhadas entre documentos do mesmo website, poupam muito trabalho e

simplificam enormemente a manutenção.

Definições de estilo múltiplas serão refletidas em cascata em uma definição

resultante final.

8.2 Benefícios em Utilizar CSS

Utilizar CSS além de ser essencial para o XHTML para garantir a separação entre

conteúdo e formatação, possibilita inúmeros benefícios a desenvolvedores e usuários:

Page 53: Html css javascript

Web, HTML, CSS e JavaScript

53 2007 Alfamidia Prow LTDA.

Produtividade aumentada.

Facilidade em criar sites com identidade visual unificada e coerente.

Facilidade em fazer mudanças em todo o site – basta alterar um arquivo CSS

invés de mudar todas as páginas HTML.

Arquivos mais leves => download mais rápido => experiência de usuário

melhorada.

Menos código na página => mais fácil codificar.

Permitir que visitantes alterem suas preferências definindo estilos

dinamicamente.

Mais acessível para uma ampla variedade de aparelhos.

Mais controle sobre o código - interpretação do código na ordem correta para os

leitores de tela.

Disponibiliza versões para impressão sem duplicação de conteúdo, somente

alternando o CSS.

Permite formatar elementos do HTML como formulários e barras de rolagem,

impossível via atributos HTML.

Permite controlar aspectos visuais como tipo e cor de borda, posicionamento,

visibilidade e margens – propriedades inexistentes no HTML.

8.3 CSS para Separar Conteúdo da Apresentação

Uma das metas ao se utilizar os conceitos do Web Standards é remover toda a

apresentação do código (X)HTML, deixando-o limpo e semanticamente correto.

Enquanto o (X)HTML define a estrutura, O CSS fica responsável pela formatação visual

e posicionamento de elementos dentro de uma página Web.

Utilizando CSS, um desenvolvedor pode definir elementos da apresentação (o layout,

fonts, cores, bordas, etc), independentemente da marcação do documento Web. Os estilos

podem (e devem, na maioria dos casos) serem definidos em um documento separado com

extensão .css e compartilhados entre todos ou um grupo de documentos relacionados do

mesmo website. Desta forma, alterar ou implementar novos estilos é tarefa fácil, bastando

para isso alterar somente um arquivo do projeto, já que ele está referenciado entre

diversos documentos, sendo renderizado dinamicamente na medida que o browser

carrega o arquivo de definições ou a folha de estilos externa (.css).

Page 54: Html css javascript

Web, HTML, CSS e JavaScript

54 2007 Alfamidia Prow LTDA.

Ao separar formatação do conteúdo, você está tornando seu código semanticamente

correto. Ou seja, não utilizando marcação de conteúdo (HTML) para formatação (uso

incorreto).

Outra vantagem na separação é a possibilidade de tornar disponível o mesmo conteúdo

para múltiplos devices (aparelhos) sem necessidade de duplicar o conteúdo, alterando

somente a formatação (CSS). Isto inclusive pode ser feito de forma dinâmica ou

utilizando linguagem script (Javascript, por exemplo). Entre os devices que suportam

conteúdo Web podemos citar:

Browsers.

Impressoras.

PDAs (Personal Digital Assistants).

Telefones Celulares.

Equipamentos wireless.

Para obter uma demonstração do que pode ser conseguido visualmente por meio de um

design baseado em CSS, acesse o site Zen Garden, onde diferentes desenvolvedores

criaram para o mesmo conteúdo (documento HTML), diferentes arquivos CSS,

resultando em documentos com o design 100% diferentes entre si.

Vale a pena conferir! http://www.csszengarden.com/tr/portuguese/

8.4 Páginas Com Semântica Correta

Uma marcação semanticamente correta utiliza elementos HTML para o seu objetivo

definido. Um HTML bem estruturado tem significado semântico para um amplo número

de User Agents (navegadores sem folhas de estilo, navegadores baseados em texto,

PDAs, sites de busca, etc.).

Utilizar código semanticamente correto é uma forma de organizar e estruturar a

informação na Web.

Você deve utilizar HTML padrão e evitar fazer com que os elementos HTML se pareçam

com outros elementos HTML. Ou seja:

Para cabeçalhos e títulos, utilize elementos de header começando com o <h1>

para o título de maior importância.

Para títulos em tabelas, utilize a tag <th> em vez da tag <td>.

Para listas, utilize elementos de lista <li>, <ol> e <ul>.

Para o layout, utilize a tag <div> em vez de <table>.

Page 55: Html css javascript

Web, HTML, CSS e JavaScript

55 2007 Alfamidia Prow LTDA.

Conceito concebido pelo físico inglês Tom Berners-Lee, o criador do World Wide Web,

cuja proposta, ainda em desenvolvimento, por um grupo de pesquisadores do W3C, por

ele liderado, é estruturar todo o conteúdo disponível na Internet. Essa estruturação será

baseada num conjunto de regras, que permitirá a localização eficiente e precisa da

informação desejada.

Por mais sofisticados que sejam os mecanismos de buscas, atualmente existentes, todos,

sem exceção, oferecem para cada solicitação um grande número de páginas, que, em sua

maioria, não atendem às necessidades do usuário. Esse é, então, obrigado a verificar uma

a uma, até encontrar exatamente o que procura.

A Web semântica se propõe objetivar essa busca, de modo que o conteúdo exato seja

encontrado em uma única consulta. Esse conceito baseia-se na inserção, em cada arquivo

da Web, de tags personalizadas, definidas pela linguagem XML e, com isso, indexar toda

a informação disponível de forma precisa. A localização exata da informação que se

busca estará a cargo de agentes. O conceito de Web semântica prevê ainda o uso de RDF,

um padrão de descrição, composto por trios de informação, em que cada unidade terá

função própria, como sujeito, verbo e objeto, em uma frase.

Para cada diferente significado de uma palavra e sua função numa frase será criada uma

identificação (URI). O maior desafio da Web semântica é a padronização desses URIs.

Para isso prevê-se o uso de ontologias, que fornecerão aos agentes o vocabulário

necessário para identificar de modo preciso a informação que se busca.

A tempo: URL significa Uniform Resource Locator, ou Identifier, no caso de URI.

Servem para localizar qualquer recurso na Internet.

8.5 Sintaxe do CSS

A sintaxe do CSS é uma sintaxe de marcação, definindo o elemento(s) a ser formatado, a

propriedade e o valor:

body {

font-size : 70%;

color : #000000;

background-color : #F1F1F1;

margin : 0;

}

As informações sobre os estilos podem ser armazenadas:

Interno - No cabeçalho de um documento HTML.

Inline ou Em Linha - Junto a uma determinada tag.

Externo – Em um documento .css separado vinculado ao documento HTML

através de uma referência externa no cabeçalho do documento.

Page 56: Html css javascript

Web, HTML, CSS e JavaScript

56 2007 Alfamidia Prow LTDA.

8.6 Aplicando estilos a uma página

Como mencionado, existem 3 formas de aplicar estilos à uma página HTML, que

veremos à seguir:

8.6.1 Aplicando estilos a toda a página HTML

Neste caso, utilizamos as tags HTML <style> e </style> dentro da seção de cabeçalho

(<head>) de uma página:

<html> <head> <title>Utilizando CSS em uma página HTML</title> <style type=”text/css”> seletor { propriedade: valor; } </style> </head> <body> </body> </html>

8.6.2 Aplicando estilos à apenas uma tag HTML específica

Para isso utilizamos o parâmetro style, que pode ser utilizado por praticamente qualquer

tag HTML

<html>

<head>

<title>Utilizando CSS em uma tag HTML</title>

</head>

<body>

<font style=”propriedade: valor;”>Teste de Estilos</font>

</body>

</html>

Neste caso específico dispensamos o seletor, pois estamos aplicando o estilo diretamente

em uma tag.

Page 57: Html css javascript

Web, HTML, CSS e JavaScript

57 2007 Alfamidia Prow LTDA.

8.6.3 Utilizando um arquivo de estilos externo

Esta é a forma mais utilizada pelos profissionais, pois com ela podemos aplicar diversos

estilos diferentes à diversas páginas HTML.

Primeiramente é criado o arquivo de estilos, que deve ser salvo com a extensão .css:

Arquivo 1: estilos.css

seletor { propriedade: valor; propriedade: valor; } seletor { propriedade: valor; }

Feito isto, criamos um arquivo HTML que fará referência ao arquivo de estilos que será

utilizado através da tag <LINK>:

Arquivo 2: estilos.html

<html>

<head>

<title>Utilizando css em um arquivo externo</title>

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

</head>

<body>

</body>

</html>

8.7 Formas de utilização dos Seletores

Como vimos anteriormente, um seletor pode ser o nome de uma tag HTML, um grupo de

tags, uma classe ou um ID. Veremos agora exemplos práticos de como utilizar cada caso:

8.7.1 Aplicando estilos à uma tag:

Primeiro devemos definir à qual tag queremos aplicar os estilos. Neste exemplo

alteraremos o estilo das tags <FONT>:

<html>

<head>

<title>Alterando o estilo da tag font</title>

Page 58: Html css javascript

Web, HTML, CSS e JavaScript

58 2007 Alfamidia Prow LTDA.

<style type=”text/css”>

font

{

propriedade: valor;

}

</style>

</head>

<body>

<font> Esta tag recebe os estilos definidos no cabeçalho.</font>

<br><br>

<font> Esta tag também recebe os estilos que foram definidos.</font>

</body>

</html>

Note que qualquer tag <FONT> contida nesta página automaticamente receberá aplicação

dos estilos definidos.

8.7.2 Definindo estilos para mais um grupo de tags

Semelhante ao primeiro caso, sendo que nosso seletor será uma lista de tags, separadas

por vírgulas (,). Agora veremos como podemos aplicar estilos às tags <FONT> e <P>

utilizando apenas uma definição de estilo:

<html>

<head>

<title>Alterando o estilo da tag font</title>

<style type=”text/css”>

font, p

{

propriedade: valor;

}

</style>

</head>

<body>

<font> Esta tag recebe os estilos definidos no cabeçalho.</font>

<br><br>

<font> Esta tag também recebe os estilos que foram definidos.</font>

<p>

Este parágrafo recebe os estilos definidos no cabeçalho.

Qualquer outra tag p utilizada nesta página também os receberá.

</p>

</body>

</html>

Page 59: Html css javascript

Web, HTML, CSS e JavaScript

59 2007 Alfamidia Prow LTDA.

8.7.3 Definindo uma classe de estilos

Para definirmos uma classe de estilos, devemos iniciar o seletor por um ponto (.) e a(s)

tag(s) que forem receber estes estilos devem fazer referência à esta classe através do

parâmetro CLASS.

Veja no exemplo à seguir a aplicação de uma classe de estilos à apenas uma tag

<FONT>:

<html>

<head>

<title>Alterando o estilo da tag font</title>

<style type=”text/css”>

.estilo1

{

propriedade: valor;

}

</style>

</head>

<body>

<font class=”estilo1”> Esta tag recebe os estilos definidos na classe estilo01. Note que o valor do parâmetro class não possui o ponto.</font>

<br><br>

<font> Esta tag não recebe os estilos que foram definidos, pois não possui o parâmetro class.</font>

</body>

</html>

8.7.4 Definindo um ID de estilos

Um ID de estilos é idêntico à uma classe, pois também possui a função de agrupar

diversos estilos em uma única estrutura nomeada. Existem apenas 2 diferenças entre um

ID e uma classe:

- IDs são iniciados pelo caractere sustenido (#).

- IDs são referenciados pelo parâmetro ID

Veja no exemplo à seguir a aplicação de um ID de estilos à apenas uma tag:

<html>

<head>

<title>Alterando o estilo da tag font</title>

Page 60: Html css javascript

Web, HTML, CSS e JavaScript

60 2007 Alfamidia Prow LTDA.

<style type=”text/css”>

#estilo1

{

propriedade: valor;

}

</style>

</head>

<body>

<font id=”estilo1”> Esta tag recebe os estilos definidos no id estilo01. note que o valor do parâmetro id não possui o sustenido.</font>

<br><br>

<font> Esta tag não recebe os estilos que foram definidos, pois não possui o parâmetro id.</font>

</body>

</html>

A tabela abaixo apresenta os principais atributos com suas descrições, valores e como

usamos no código:

Atributo Descrição Valores Permitidos Exemplos

background Especifica uma imagem de segundo plano ou cor.

URL ou o código da cor

{background:#33CC00}

border Especifica a lateral da borda que sofre o efeito

top / left / right / center

{border-left}

border-color Especifica a cor da borda.

Nome ou código da cor.

{border-color: blue}

border-style Especifica o estilo da borda.

dotted / dashed / solid / double / none / grove / ridge / inset / outset

{border-style: grove}

border-width Especifica a largura da borda.

thin / thick / medium

{border-width: medium}

color Especifica a cor do texto.

Nome ou código da cor.

{color: blue}

Page 61: Html css javascript

Web, HTML, CSS e JavaScript

61 2007 Alfamidia Prow LTDA.

font-family Seleciona o tipo de fonte.

Nome da fonte (de acordo com o Windows)

{font-family: courier}

{font-family: arial}

font-size Ajusta o tamanho da fonte.

points (pt)

inches (in)

centimeters (cm)

pixels (px)

{font-size: 12pt}

font-style Aplica o efeito itálico.

normal

italic

{font-style: italic}

font-weight Ajusta a espessura da fonte.

extra-light

light

demi-light

medium

demi-bold

bold

extra-bold

{font-weight: bold}

{font-weight: extra-bold}

line-height Especifica a distância entre as linhas.

points (pt)

inches (in)

centimeters (cm)

pixels (px)

percentage(%)

{line-height: 24pt}

margin-left Ajusta a distância da margem da esquerda.

points (pt)

inches (in)

centimeters (cm)

pixels (px)

{margin-left: 5in}

margin-right Ajusta a distância da borda direita da página.

points (pt)

inches (in)

centimeters (cm)

pixels (px)

{margin-right: 1cm}

Page 62: Html css javascript

Web, HTML, CSS e JavaScript

62 2007 Alfamidia Prow LTDA.

margin-top Ajusta a distância da borda superior da página

points (pt)

inches (in)

centimeters (cm)

pixels (px)

{margin-top: -20px}

text-align Especifica o alinhamento do texto.

left

center

right

{text-align: right}

text-decoration Aplica efeitos no texto.

none

underline

italic

line-trough

{text-decoration: none}

text-indent Especifica a distância entre o texto e a margem esquerda.

points (pt)

inches (in)

centimeters (cm)

pixels (px)

{text-indent: 0.5in}

8.8 Exercícios

Aplique três estilos a uma página HTML:

Um estilo que se aplique à toda a página, um estilo que se aplique à apenas uma tag

contida nesta página e um estilo que se aplique à todas as tags <FONT>

Transfira estes estilos para um arquivo externo e referencie-o nesta página HTML.

Page 63: Html css javascript

Web, HTML, CSS e JavaScript

63 2007 Alfamidia Prow LTDA.

Unidade 9 CSS Na Prática

9.1 Utilizando CSS em Situações Reais

Na unidade anterior os recursos básicos do CSS foram apresentados. O objetivo desta

unidade é exercitar o uso do CSS na criação de layouts redefinindo os vários elementos

vistos nas primeiras unidades deste curso.

Com isto, objetiva-se dar ao aluno a percepção da enorme pontencialidade do CSS e

prepará-lo para utilizar este recurso em seus próprios projetos, facilitando e acelerando a

construção e edição dos layouts que ele desenvolve.

A referência completa do CSS é muito grande, e na prática praticamente nenhum Web

Designer decora todos os comandos CSS, geralmente consultando uma documentação na

web sempre que busca utilizar um parâmetro com o qual não esteja familiarizado. Por

exemplo, pode ser utilizada a documentação oficial em http://www.w3.org/TR/REC-

CSS1 e http://www.w3.org/TR/REC-CSS2/.

9.2 Criando Tabelas com Estilos CSS

O formato básico do layout de tabelas dificilmente é adequado para o layout do site que

você está desenvolvendo. Para programadores, muitas vezes o layout pré-definido é

muito grotesco e ocupa muito espaço, não permitindo a exibição de todas as informações

que são lidas de um banco de dados de forma eficiente. Para designers, as cores e fontes

usadas podem não corresponder ao restante do site.

Embora seja possível controlar estas características sem o CSS, como foi visto nas

primeiras unidades, os exemplos abaixo mostrarão como o CSS pode nos auxiliar.

9.3 Dados Exibidos em uma Tabela com CSS

Observe o exemplo abaixo e a imagem do mesmo:

CSS1.html

<head>

<style type="text/css">

<!--

table

{

border-collapse: collapse;

}

Page 64: Html css javascript

Web, HTML, CSS e JavaScript

64 2007 Alfamidia Prow LTDA.

td.titulo

{

font-family: Arial, Helvetica, sans-serif;

font-size: 8pt;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

border-top: 1px solid #000000;

border-left: 1px solid #000000;

background-color: #C3C3C3;

padding: 2px 2px 2px 2px;

}

td

{

font-family: Arial, Helvetica, sans-serif;

font-size: 8pt;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

border-top: 1px solid #000000;

border-left: 1px solid #000000;

background-color: #FFFFFF;

padding: 2px 2px 2px 2px;

}

-->

</style>

</head>

<body>

<table>

<tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr>

<tr><td>alberto</td><td>Estagiário</td></tr>

<tr><td>pedro</td><td>Assessor de vendas</td></tr>

<tr><td>rafael</td><td>Gerente de vendas</td></tr>

<tr><td>sandro</td><td>Diretor comercial</td></tr>

</table>

</body>

</html>

Page 65: Html css javascript

Web, HTML, CSS e JavaScript

65 2007 Alfamidia Prow LTDA.

Observe que a construção da tabela em si está bastante simples, facilitando sua criação

dinâmica por um programa que, por exemplo, consulte um banco de dados. Observe,

adicionalmente, que o layout está definido na parte em CSS – que inclusive pode estar em

um arquivo separado. Com isto, designers e programadores podem trabalhar em partes

independentes do código, de forma simultânea, um definindo detalhes do layout em CSS

enquanto o outro constrói o programa que monta dinamicamente os dados da tabela.

Obs: o parâmetro border-collapse permite definir que as bordas das células internas serão

‘grudadas’ umas nas outras. É um comando muito interessante de ser utilizado na

definição de layouts de tabelas.

9.4 Alterando o Estilo CSS

Observe o novo exemplo de estilo CSS e seu resultado no exemplo. Estamos, alterando

apenas o CSS, em negrito, criando a tabela em tons verdes e com um leve efeito 3D.

Css2.html

<head>

<style type="text/css">

<!--

table

{

border-collapse: collapse;

}

td.titulo

{

font-family: Arial, Helvetica, sans-serif;

font-size: 8pt;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

border-top: 1px solid #AADDAA;

border-left: 1px solid #AADDAA;

background-color: #99CC99;

padding: 2px 2px 2px 2px;

}

td

{

font-family: Arial, Helvetica, sans-serif;

font-size: 8pt;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

border-top: 1px solid #000000;

border-left: 1px solid #AADDAA;

background-color: #CCFFCC;

padding: 2px 2px 2px 2px;

Page 66: Html css javascript

Web, HTML, CSS e JavaScript

66 2007 Alfamidia Prow LTDA.

}

-->

</style>

</head>

<body>

<table>

<tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr>

<tr><td>alberto</td><td>Estagiário</td></tr>

<tr><td>pedro</td><td>Assessor de vendas</td></tr>

<tr><td>rafael</td><td>Gerente de vendas</td></tr>

<tr><td>sandro</td><td>Diretor comercial</td></tr>

</table>

</body>

</html>

9.5 Dados e Formulários com CSS

No exemplo a seguir, além das tabelas, também os elementos de um formulário são

redefinidos para seguir um layout em tons verdes.

Css3.html

<head>

<style type="text/css">

<!--

table

{

border-collapse: collapse;

}

td.titulo

Page 67: Html css javascript

Web, HTML, CSS e JavaScript

67 2007 Alfamidia Prow LTDA.

{

font-family: Arial, Helvetica, sans-serif;

font-size: 8pt;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

border-top: 1px solid #AADDAA;

border-left: 1px solid #AADDAA;

background-color: #99CC99;

padding: 2px 2px 2px 2px;

}

td

{

font-family: Arial, Helvetica, sans-serif;

font-size: 8pt;

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

border-top: 1px solid #000000;

border-left: 1px solid #AADDAA;

background-color: #CCFFCC;

padding: 2px 2px 2px 2px;

}

input

{

font:8pt arial, helvetica, sans-serif;

background-color: #AADDAA;

color: #000000;

}

select

{

font:8pt arial, helvetica, sans-serif;

background-color: #AADDAA;

color: #000000;

}

-->

</style>

</head>

<body>

<form method=post action=consulta_funcionarios>

<table>

<tr><td colspan=2 class=titulo>Consulta por nome e cargo</td></tr>

<tr><td>Nome</td><td><input name=nome></td></tr>

<tr><td>Cargo</td><td><select name=cargo><option>Assessor de Vendas<option>Diretor Comercial<option>Estagiário<option>Gerente de Vendas</select></td></tr>

<tr><td colspan=2><input type=submit value=pesquisar></td></tr>

</table>

Page 68: Html css javascript

Web, HTML, CSS e JavaScript

68 2007 Alfamidia Prow LTDA.

<br><br>

<table>

<tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr>

<tr><td>Alberto</td><td>Estagiário</td></tr>

<tr><td>Pedro</td><td>Assessor de Vendas</td></tr>

<tr><td>Rafael</td><td>Gerente de Vendas</td></tr>

<tr><td>Sandro</td><td>Diretor Comercial</td></tr>

</table>

</body>

</html>

9.6 Exercícios com CSS

1. Altere o código acima, criando um layout diferente, utilizando outros tons no lugar do

verde. Sinta-se livre para também alterar fontes e criar efeitos diferente.

2. Crie uma página com textos, em que outros elementos vistos anteriormente são

também redefinidos, como parágrafos e listas ordenadas. Não coloque nenhuma

informação de layout fora do CSS e compare a página com e sem CSS.

Page 69: Html css javascript

Web, HTML, CSS e JavaScript

69 2007 Alfamidia Prow LTDA.

Unidade 10 Introdução ao JavaScript

10.1 O que é JavaScript?

O que é JavaScript?

O JavaScript é uma linguagem de script que, incorporado nas tag's Html, permite

incrementar a apresentação e interatividade das páginas Web. Funções escritas em

JavaScript podem ser embutidas dentro de seu documento HTML, a fim de permitir

maior interatividade com as páginas HTML.

Com JavaScript você tem muitas possibilidades para "incrementar" seu documento

HTML com elementos interessantes. Por exemplo, você será capaz de responder

facilmente a eventos iniciados pelo usuário. Existem, atualmente, muitos exemplos sobre

JavaScript na Internet.

JavaScript é uma linguagem de script interpretada de forma “just-in-time”, sendo

utilizado apenas para operações mais simples. Podemos entender uma linguagem de

“script” como uma espécie de “roteiro” simples para execução de tarefas. As linguagens

de script, como o JavaScript, são compostas apenas por um conjunto de instruções em

formato texto que são interpretadas pelo computador no momento da sua execução.

10.2 Onde os Script podem ser executados ?

Os scripts escritos em JavaScript podem hoje ser executados na maior parte dos browsers.

Desde a introdução da linguagem JavaScript no desenvolvimento Web, que se iniciou a

partir do lançamento do Netscape 2.0, a linguagem sofreu uma série de atualizações, e

hoje possui um conjunto muito grande de recursos, suportados na maior parte dos

browsers disponíveis no mercado.

Page 70: Html css javascript

Web, HTML, CSS e JavaScript

70 2007 Alfamidia Prow LTDA.

Unidade 11 Noções básicas de JavaScript

11.1 Utilizando Comentários

A estrutura de comentários da linguagem JavaScript é extremamente semelhante a

estrutura da linguagem C++ e da linguagem Java. O Javascript permite comentários em

linha única ou em bloco.

Os comentários em linha única são representados pelos caracteres ( // ), e transformam

todo e qualquer texto colocado na mesma linha após este símbolo em comentário,

conforme exemplo a seguir:

sProcessor = “Atribuição a variavel !”; // Este texto é comentário

Os comentários também podem ser criados em blocos no Javascript, utilizando a notação

/* e */. Através desta notação, todo o texto colocado dentro destes dois delimitadores é

considerado como comentário para a linguagem de script, conforme o exemplo a seguir:

/* Aqui iniciamos um comentário em bloco

note que mesmo estando em outra linha, este texto continua sendo comentário

até que seja colocado o delimitador de fim de comentário */

<SCRIPT LANGUAGE=’Javascript’>

var dtToday = new Date();

sProcessor = “Atribuição a variavel !”; // Este texto é em linha

</script>

11.2 Tipos de dados

No javascript não existe uma tipagem explicita de dados na declaração de váriaveis. Isto

ocorre porque o Javascript não possui tipos explícitos de dados (relacionados a declaração

das variáveis), toda e qualquer variável dentro de um código Javascript pode receber

qualquer tipo de dado. A tipagem dos dados ocorre no momento da atribuição de valores

as váriavies, ou seja, ao atribuir um valor número a uma variável, esta assume um tipo de

dado “numérico”, ao atribuir um valor string a uma variavel, esta assume o valor string.

Apesar de não existir uma tipagem explícita de dados no JavaScript, a linguagem

interpreta alguns tipos de dados, divididos em três categorias:

Page 71: Html css javascript

Web, HTML, CSS e JavaScript

71 2007 Alfamidia Prow LTDA.

11.2.1 Tipos de dados Primitivos (por valor)

Nos tipos de dados primitivos podemos encontrar os tipos Numérico (que representam

números inteiros ou fracionados), Strings (que representam caracteres ou um conjunto de

caracteres), e Boolean ( que representam valores booleanos True/False).

<SCRIPT LANGUAGE=’Javascript’>

var nNumber, sString, bBoolean; //As variáveis ainda não assumiram um tipo

específico

nNumber = 10; //nNumber assume tipo numérico

sString = “Exemplo”; //sString assume tipo string / texto

bBoolean = true; //bBoolean assume tipo booleano

</script>

11.2.2 Tipos de dados Compostos (por referência)

Dentre os tipos de dados compostos, podemos encontrar tipos mais complexos como o

objeto do tipo Date (utilizado para representar datas e horas), o tipo Array (utilizado para

representar um conjunto de dados), e objetos (utilizado para quaisquer outros objetos

disponíveis na linguagem.

<SCRIPT >

var dtDate, aArray;

dtDate = new Date(); //Variável do tipo objeto date

aArray = new Array(10); //Virável do tipo Array com 10 posições

</script>

11.2.3 Tipos de dados especiais (undefined e Null)

Os tipos de dados especiais são utilizados geralmente em expressões de teste em conjunto

com os tipos de dados compostos.

O tipo undefined representa uma propriedade inexistente em um objeto criado dentro de

um código javascript. O tipo null representa uma váriavel ou objeto sem valor, ou seja,

uma váriavel ou objeto sem conteúdo.

<SCRIPT >

dtDate = new Date();

/* typeOf devolve como resultado o tipo da variável,

neste caso ele vai disparar no alert o tipo de dados que este método

apresenta o valor que aparecerá na tela é “undefined” pois não existe

buscaDia dentro do objeto Date */

Page 72: Html css javascript

Web, HTML, CSS e JavaScript

72 2007 Alfamidia Prow LTDA.

alert(typeof(dtDate.buscaDia));

dtDate = null; // Define a variável como null / nula

</script>

11.3 Variáveis

Assim como qualquer linguagem de programação, o Javascript permite a criação de

variáveis dentro dos scripts. As váriaveis em JavaScript possuem dois escopos, um

escopo global, que são variáveis declaradas fora de funções, e um escopo local que são

váriaveis declaradas dentro de funções.

As variáveis são declaradas utilizando a instrução var onde deve ser informado o nome

das variáveis que devem ser declaradas. É possível declarar mais de uma variável em

mesmo comando var, conforme o exemplo a seguir:

<html>

<script>

var mensagem; //Variável global

mensagem = "Hoje é dia: "; //Atribuindo valor à variável

function dataAtual(){

var dtHoje = new Date(); //variável local

var sDia, sMes, sAno; //atribuição de 3 variáveis em uma linha

sDia = dtHoje.getDate(); //Porque getDay é o dia da semana

sMes = dtHoje.getMonth() + 1; //Porque ele pega o mês sendo com um

índice, ou seja, inicia com o 0

sAno = dtHoje.getFullYear();

alert(mensagem + sDia + "/" + sMes + "/" + sAno);

}

</script>

<body>

<a href="javascript:dataAtual();">Data Atual</a>

</body>

</html>

Como podemos ver no exemplo acima, a atribuição de variáveis é feita através do

operador de atribuição =, e pode ser feita tanto na declaração da variável como

posteriormente ao longo do código de script.

Page 73: Html css javascript

Web, HTML, CSS e JavaScript

73 2007 Alfamidia Prow LTDA.

11.4 Operadores

A linguagem Javascript possui um conjunto de operadores muito semelhante a qualquer

linguagem de programação convencional, que permitem tanto realizar operações

aritméticas como operações booleanas. Os operadores estão divididos em três grupos

principais: Computacionais, Lógicos e de Atribuição.

Dentre os operadores computacionais, podemos encontrar os operadores que realizam

operações aritméticas, bem como operadores utilizados para realizar concatenações de

strings. A lista dos operadores computacionais pode ser visualizada abaixo:

Operador Símbolo

Incremento ++

Decremento --

Multiplicação *

Divisão /

Módulo %

Adição/Concatenação +

Subtração -

Dentre os operadores lógicos, encontramos os operadores para testes lógicos

convecionais, como equalidade e inequalidade. É importante ressaltar a diferença entre o

operador de atribuição = e o operador lógico de igualdade ==. Muitas vezes os

desenvolvedores tendem a utilizar o operador de atribuição para realizar testes de

igualdade, o que acarreta em erros de lógico nos scripts. Operadores lógicos podem ser

visualizados a seguir.

Operador Símbolo

Não Lógico !

Menor que <

Maior que >

Menor ou igual a <=

Maior ou igual a >=

Igual ==

Diferente (não igual) !=

E Lógico (AND) &&

OU Lógico (OR) ||

Além destes dois conjuntos de operadores, ainda temos os operadores de atribuição. O

operador de atribuição é representado pelo símbolo =, que pode ser combinado com

qualquer operador computacional a fim de combinar o valor atual da variável com o valor

que está sendo atribuido. Para utilizar esta funcionalidade, basta inserir o operador

computacional na frente do operador de atribuição (Ex.: +=, -=, *=, /=).

A seguir podemos ver uma série de exemplos para utilização de operadores:

Page 74: Html css javascript

Web, HTML, CSS e JavaScript

74 2007 Alfamidia Prow LTDA.

<script>

var nNumero1, nNumero2, nResultado;

// Atribuição de 0 ao número

nNumero1 = 1;

nNumero2 = 2;

// Atribui uma soma ao resultado

nResultado = nNumero1 + nNumero2;

// Incrementa o resulta em 1

nResultado++;

// Soma 10 ao valor atual do resultado

nResultado+=11;

// Dispara o alert true caso a variável nResultado seja igual a 25 ou false

caso não seja.

alert(nResultado == 25);

</script>

11.5 A estrutura de um script JavaScript

Assim como outras linguagens de script, o Javascript é criado a partir de um código

escrito em texto simples, composto por uma série de instruções de script, conjuntos ou

blocos de instruções e comentários. Dentro de um script, você pode utilizar variáveis para

armazenar informações ou mesmo realizar cálculos.

Uma instrução escrita em JavaScript pode ser representada por uma ou mais expressões,

palavras-chave, comandos, ou operadores, e em geral são escritos em uma linha de

código no arquivo que contém o script. No javascript, cada instrução contendo comandos

é separada por um símbolo “;”, o que permite escrever uma instrução em mais uma linha,

desde que ao final do comando seja colocado o caractere “;”.

Abaixo podemos ver um exemplo de duas linhas de comando escritas em JavaScript.

sProcessor = “Este é o curso de JavaScript da Processor !”; // Atribui um texto

à variável

var dtHoje = new Date(); // Atribui o dia de hoje para a variável

O javascript permite ainda que conjuntos de instruções sejam agrupados em blocos,

utilizando os delimitadores de chaves ( { } ). Instruções agrupadas em blocos, são

consideradas como um único comando na linguagem javascript, e são utilizados, em

geral, onde a linguagem necessita de “comando únicos”, como em instruções de teste,

estruturas de repetição e funções.

A seguir podemos ver um exemplo de um código JavaScript que utiliza delimitadores de

bloco de instruções.

Page 75: Html css javascript

Web, HTML, CSS e JavaScript

75 2007 Alfamidia Prow LTDA.

//Testa se a hora atual é maior que 18

if (dtHoje.getHours() > 18){

// Bloco de instruções. Caso a hora seja maior que 18 entra neste bloco

alert(“Boa noite ! Este é o curso de JavaScript !”);

alert(“A hora atual é :” + dtHoje.getHours());

}

else

{

// Bloco de instruções. Caso a hora não seja maior que 18 entra neste bloco

alert(“Boa tarde ! Este é o curso de JavaScript !”);

alert(“A hora atual é :” + dtHoje.getHours());

}

11.6 Criando um script em uma página HTML

Para utilizar o JavaScript, é necessário criar uma página HTML e dentro desta página

inserir uma tag delimitadora de script, a fim de executar o script na abertura da página

HTML. Um bloco javascript é delimitado utilizando a tag <script> nas páginas HTML.

Todo o código colocado dentro destas tags é considerado como um bloco de script pelo

browser.

<HTML>

<BODY>

<H1> Página de teste </H1>

<SCRIPT >

var dtToday = new Date();

sHoje = “Hoje é ” + dtToday.toString();

alert(sHoje);

</SCRIPT>

11.7 Estruturas de teste

Para uma utilização eficaz dos operadores disponíveis no JavaScript, é necessário

entender como funcionam as estruturas de teste utilizadas pela linguagem. Dentro do

JavaScript possuimos dois comandos para realização de testes lógicos dentro dos scripts

(if e switch).

No comando if, é necessário informar dentro de parênteses a expressão a ser testada, e

caso ela seja verdadeira, o comando ou bloco de comandos subsequente ao comando if

será executado. O comando if ainda possui uma cláusula else opcional, que pode conter

uma expressão ou conjunto de expressões a serem executadas caso a condição testada no

comando if não seja verdadeira.

A seguir podemos verificar um exemplo do comando if:

Page 76: Html css javascript

Web, HTML, CSS e JavaScript

76 2007 Alfamidia Prow LTDA.

<script>

var nDia;

var dtData = new Date();

var sPeriodo;

nDia = dtData.getDay();

// Comando if com apenas uma expressão após o teste

if(nDia%2==0)

alert("Dia par!");

else

alert("Dia ímpar");

// Comando if com um bloco de expressões

if(dtData.getHours() > 12)

{

sPeriodo = " Tarde";

alert(sPeriodo);

}

else

{

sPeriodo = "Manhã";

alert(sPeriodo);

}

</script>

Além do comando if, o comando switch pode ser utilizado para realizar testes lógicos na

linguagem JavaScript. O comando switch é um comando de teste de seleção múltipla, ou

seja, não testa a expressão lógica apenas por um valor específico, mas sim por uma série

de valores informados no código de script. O comando script requer um bloco de

comando inserido logo após a expressão lógica, que irá conter os comandos executados

no caso de cada uma das expressões. Ao final de cada conjunto de instruções de uma

condição swicth, é necessário informar o comando break, para que o javascript não

execute as condições posteriores ao teste, conforme o exemplo a seguir:

<script>

var nMes;

var dtData = new Date();

var sMes;

// Atribuição do Mês a variável

nMes = dtData.getMonth();

switch (nMes)

{

case 0:

sMes = "Janeiro";

break;

case 1:

sMes = "Fevereiro";

break;

Page 77: Html css javascript

Web, HTML, CSS e JavaScript

77 2007 Alfamidia Prow LTDA.

case 2:

sMes = "Março";

break;

case 3:

sMes = "Abril";

break;

case 4:

sMes = "Maio";

break;

case 5:

sMes = "Junho";

break;

}

alert(sMes);

</script>

11.8 Estruturas de repetição

11.8.1 While

O comando while é utilizado para repetir um determinado conjunto de instruções de

acordo com uma expressão lógica definida no código de script.

Para utilizar o comando while basta informar entre parênteses a expressão lógica a ser

testada, e após o comando, a instrução ou bloco de instruções a serem executados.

Podemos ver um exemplo de utilização do comando while no código abaixo:

<script>

var nNumero = 0;

while(nNumero < 10)

{

alert("Iteração de número: " + nNumero);

//Incrementa o Número

nNumero++;

}

</script>

11.8.2 For

Além do comando while, temos o comando for, que pode ser utilizado para repetir um

determinado conjunto de instruções de acordo com um índice número especificado no

próprio comando for. No comando for é necessário informar a variável que servirá como

índice, a condição para execução do for, e o incremento utilizado para execução da

estrutura de repetição. Podemos ver um exemplo de utilização do comando for a seguir.

Page 78: Html css javascript

Web, HTML, CSS e JavaScript

78 2007 Alfamidia Prow LTDA.

<script>

var nNumero = 0;

for(nNumero; nNumero<10; nNumero++)

{

alert("Iteração de número: " + nNumero);

}

</script>

O comando for ainda pode ser utilizado com a cláusula in para realizar enumerações de

propriedades em objetos ou mesmo itens contidos em arrays. Para a utilização da cláusula

in, é necessário definir uma variável que irá receber o valor de cada membro solicitado

dentro de cada iteração da estrutura de repetição. Com a cláusula in podemos, por

exemplo, buscar todas as propriedades disponíveis de um determinado objeto criado no

JavaScript. No exemplo a seguir podemos visualizar todas as propriedades disponíveis no

objeto window, que representa a janela do browser.

<script>

var prop;

for(prop in window)

{

var sMensagem;

sMensagem = "Propriedade da janela do Browser: ";

sMensagem += prop;

alert(sMensagem);

}

</script>

Page 79: Html css javascript

Web, HTML, CSS e JavaScript

79 2007 Alfamidia Prow LTDA.

Unidade 12 Utilizando Funções

12.1 Utilizando Funções no Javascript

Como já podemos perceber, o Javascript possui inúmeros recursos e funções disponíveis

para tornar as páginas o mais interativas possíveis. Além de toda a estrutura de

programação já apresentada, o javascript ainda permite ao desenvolvedor utilizar funções

próprias do JavaScript e criar suas próprias funções.

12.2 As funções intrínsecas do Javascript

O Javascript possui uma série de funções intrínsecas que podem ser chamadas em

qualquer ponto do código JavaScript. As funções intrínsecas mais comuns são

apresentadas a seguir.

12.2.1 A função Eval()

A função Eval() serve para executar um bloco de script criado dinamicamente. Com o

comando Eval é possivel criar comandos em tempo de execução do script e executá-los

no mesmo escopo do script em que o comando Eval está rodando. Podemos ver um

exemplo disso no código a seguir:

Exemplo 1:

<script >

var nContador;

for(nContador=0;nContador<5;nContador++)

{

eval("var sTeste" + nContador + ";");

eval("sTeste" + nContador + "=" + nContador + ";");

}

for(nContador=0;nContador<5;nContador++)

{

eval("alert(sTeste" + nContador + ");");

}

</script>

Page 80: Html css javascript

Web, HTML, CSS e JavaScript

80 2007 Alfamidia Prow LTDA.

Exemplo 2:

<html>

<script>

function compute(f)

{

f.result.value = eval(f.expr.value);

}

</script>

<body>

<form name="teste">

Digite uma expressáo matemática (exemplo: 2+2 ou 3*5):

<input type="text" name="expr" Size="15">

<input type="button" value="Calcula" onclick="javascript:compute(this.form)">

<BR>

Resultado:

<input type="text" name="result" size="15">

</form>

</body>

</html>

12.2.2 A função parseInt() e parseFloat()

As funções parseInt e parseFloat são utilizadas para converter valor do formato string

(texto) para o formato numérico. A função parseInt é utiizada para converter valores

inteiros e a função parseFloat é utilizada para converter valores fracionados. Estas

funções são extremamente úteis quando se faz necessária a conversão de um valor

textual, informado pelo usuário ou não, para um tipo número. A partir da conversão é

possível utilizar os valores para cálculos numéricos.

Podemos ver exemplos destas duas funções no script a seguir:

<script >

var nContador;

var sValor1, sValor2;

var sResultado, nResultado;

sValor1 = "10"; //Valor String

sValor2 = "1.5"; // Valor Fracionado

sResultado = sValor1 + sValor2;

nResultado = parseInt(sValor1) + parseFloat(sValor2);

// Contatenação

alert(sResultado);

// Soma numérica

alert(nResultado);

Page 81: Html css javascript

Web, HTML, CSS e JavaScript

81 2007 Alfamidia Prow LTDA.

</script>

12.2.3 Função escape() e unescape()

Estas funções são utilizadas para converter uma string em um formato legível em

qualquer computador, ou seja, remove caracteres que podem ser considerados inválidos

para um formato padrão. Este formato padrão é representado por um símbolo % e um

valor hexadecimal (podemos observar esta conversão comumente em barras de

navegação de browsers).

Podemos ver um exemplo de utilização das funções escape e unescape no exemplo a

seguir.

Podemos ver exemplos destas duas funções no script a seguir:

<script >

var sURL;

sURL = "http://www.processor.com.br/jscript?Param1=Curso de Java

Script&Param2=áéíóú";

sURL = escape(sURL);

alert(sURL);

sURL = unescape(sURL);

alert(sURL);

</script>

12.2.4 A função isNaN()

A função isNaN é utilizada para verificar se uma variável contém um valor especial NaN.

O valor representa uma conversão númerica mal sucedida (NaN = Not a Numeric).

Quando tentamos converter uma string (Ex.: ABC) para um valor númerico utilizando as

funções parseInt e parseFloat, o resultado da função é um valor NaN.

12.3 Funções criadas pelo usuário

Além das funções disponíveis, por padrão no JavaScript, a linguagem nos permite criar

nossas próprias funções, chamadas funções definidas pelo usuário. Para criar funções

devemos utilizar a cláusula function, que é utilizada para criar as funções no JavaScript.

A sintaxe para a criação das funções no Javascript é:

function <Nome da Função> ([param1], [param2], ... , [paramn])

{

...

Page 82: Html css javascript

Web, HTML, CSS e JavaScript

82 2007 Alfamidia Prow LTDA.

}

Como podemos ver a função pode conter diversos parâmetros de entrada que podem ser

utilizados para cálculos ou algum processamento especial dentro do corpo da função.

Para definir os parâmetros, basta informar os nomes das variávies que irão representar os

parâmetros na função. Podemos ver um exemplo de função no código abaixo:

<script>

function MostraMensagem(sMsg)

{

var dtData = new Date();

var sData;

sData = dtData.getDay() + "/" + dtData.getMonth() + "/" +

dtData.getFullYear();

alert(sData + " - " + sMsg);

}

MostraMensagem("Mensagem de Teste !");

</script>

As funções do Javascript ainda permitem que o usuário retorne valores. Para

retornar um valor em uma função, basta criar a função da mesma forma como

apresentado no exemplo anterior, porém com a utilização do comando return. O comando

return serve para interromper o processamento de uma função ou um bloco de script, com

a opção de retornar um valor no caso de estar dentro de uma função. Podemos ver um

exemplo de utilização do comando return a seguir.

<script>

function Soma(nNumero1, nNumero2)

{

return nNumero1+nNumero2;

}

alert(Soma(10,5));

</script>

Page 83: Html css javascript

Web, HTML, CSS e JavaScript

83 2007 Alfamidia Prow LTDA.

Unidade 13 Utilizando Objetos

13.1 Objetos intrínsecos

Além da utilização de funções intrisecas e funções de usuário, o JavaScript possui uma

série de objetos intrínsecos que permitem o uso de números de recursos dentro da

linguagem. As próprias funções intrínsecas que vimos no módulo anterior estão

colocadas dentro de um objeto intrínseco chamado Global, mas por estarem colocadas

dentro deste objeto elas tem um escopo global, permitindo sua utilização sem a chamada

explícita ao objeto.

Os objetos são compostos por métodos, que funcionam exatamente da mesma forma que

as funções em uma linguagem de programação, e são utilizadas para de alguma forma

executar alguma ação sobre o objeto em questão. Além dos métodos os objetos possuem

propriedades que dão características específicas as instacias dos objetos utilizados.

Para utilizarmos um objeto no JavaScript é necessário instanciá-lo inicialmente. Para

iniciarmos um objeto precisamos criar uma variável que irá armazenar a instancia do

objeto e atribuir a esta variável uma nova instancia do objeto em questão. Para criar uma

nova instancia de um objeto, devemos utilizar o comando new.

A seguir veremos os objetos instrínsecos do javascript mais utilizados.

13.1.1 O Objeto Date

Em nossos exemplos anteriores já vimos o objeto date sendo utilizado diversas vezes

para verificar a data atual. O objeto Date é um dos objetos intrínsecos do Javascript,

utilizado para o gerenciamento de datas. Para criar uma nova instancia do objeto basta

criar uma nova variável e atribuir uma nova instancia do objeto Date. O objeto date é

sempre inicializado com a Data e Hora atuais. Um exemplo de criação de um objeto Date

pode ser visto a seguir.

<script >

var dtData, nMes, nHora, sMes, sPeriodo;

dtData = new Date();

nMes = dtData.getMonth();

nHora = dtData.getHours();

</script>

Page 84: Html css javascript

Web, HTML, CSS e JavaScript

84 2007 Alfamidia Prow LTDA.

13.1.2 O Objeto Array

O objeto Array é a representação de um conjunto de valores dentro do JavaScript. Para

criarmos um array dentro do JavaScript, utilizamos a mesma sintaxe que utilizamos até o

momento com as datas, através do comando new. Deve-se lembrar que a primeira posição

de um array é 0, então um Array de tamanho 6, começa na posição 0 e acaba na posição

5. A seguir vemos uma série de exemplos de criação de arrays.

var sNomes = new Array();

var sValores = new Array(6);

Como mostrado no exemplo anterior, os array podem ser criados com um tamanho inicial

ou não. Caso não seja informado o tamanho inicial, podemos aumentar seu tamanho a

medida que criamos os elementos dentro do array.

Para criar e acessar elementos em um array em Javascript devemos utilizar colchetes [ ]

para informar qual o início do array que queremos gravar ou ler. Caso o início não exista

e o script tente atribuir um valor ao array, o array será redimensionado automaticamente.

Um exemplo de utilização de variáveis dentro do array pode ser visto abaixo:

<script >

var sNomes = new Array();

var sValores = new Array(6);

sNomes[0] = "André";

sNomes[1] = "Bruno";

sNomes[2] = "Carlos";

sValores[0] = 1;

sValores[1] = 2;

sValores[2] = 3;

sValores[3] = 4;

</script>

Caso o array esteja sendo preenchido de forma dinâmica, sem informar um número de

elementos, podemos a qualquer momento consultar a propriedade length para verificar

quantos elementos estão contidos dentro do array.

Além da armazenagem de objetos, os array podem ser utilizados para outras finalidades

como ordenação de dados. Para isto devemos utilizar os métodos disponíveis dentro do

array, como o método sort para ordenar por ordem alfabética e o método reverse para

ordernar por ordem decrescente.

Um exemplo de utilização de um array para ordenação pode ser visto abaixo:

Page 85: Html css javascript

Web, HTML, CSS e JavaScript

85 2007 Alfamidia Prow LTDA.

<script>

var sNomes = new Array();

sNomes[0] = "Carlos";

sNomes[1] = "Bruno";

sNomes[2] = "Mauricio";

sNomes[3] = "José";

sNomes[4] = "André";

sNomes.sort();

var nCount;

alert(“Ordem Crescente”);

for(nCount=0;nCount<sNomes.length;nCount++)

{

alert(sNomes[nCount]);

}

sNomes.reverse();

alert(“Ordem Decrescente”);

for(nCount=0;nCount<sNomes.length;nCount++)

{

alert(sNomes[nCount]);

}

</script>

13.1.3 O Objeto Math

O objeto Math é um objeto com um comportamento um pouco diferente dos demais. Para

utilizarmos o objeto Math, não é necessário criar um nova instância deste em uma

variável, basta chamarmos seus métodos e propriedades diretamente.

Este objeto é utilizado para realizar cálculos matemáticos mais avançados, que não

podem ser realizados utilizando os operadores mais simples do JavaScript.

Podemos ver um exemplo de utilização do objeto Math no exemplo a seguir.

<script>

var nNumero1 = 10.5;

var nNumero2 = -10.5;

var nNumero3 = 4;

alert(Math.abs(nNumero1));

alert(Math.abs(nNumero2));

alert(Math.sqrt(nNumero3));

Page 86: Html css javascript

Web, HTML, CSS e JavaScript

86 2007 Alfamidia Prow LTDA.

</script>

13.1.4 O Objeto String

O objeto string representa variáveis string dentro do Javascript. Os objetos string são

criados ou através do comando string ou através da atribuição direta de um valor string

para uma variável. O objeto string possui uma série de métodos que permitem manipular

as strings no JavaScript.

Um dos métodos disponíveis é o método substring que permite pegar uma fração da

string, de acordo com uma posição passada como parâmetro. Além desses métodos, ainda

temos a propriedade length, que pode ser utilizada para verificar o tamanho atual da

string. Podemos ver a implementação desses métodos no exemplo abaixo:

<script>

var sString1 = "string criado diretamente";

var sString2 = new String("string criado com o new");

sString1 = sString1.toUpperCase();

sString2 = sString2.toUpperCase();

alert(sString1);

alert(sString2);

alert(sString2.replace(“STRING”, “string”));

alert(sString1.substring(0,5));

alert("O tamanho da String1 é: " + sString1.length);

</script>

13.2 Objetos criados pelo usuário

Além dos objetos intrínsecos, o Javascript também nos permite criar objetos definidos

pelo usuário, com propriedades próprias definidas no próprio script.

Para criarmos um objeto definido pelo usuário no Javascript, devemos criar uma variável

e atribuir uma nova instancia de um objeto do tipo Object. Após criar esta variável, basta

atribuir as propriedades ao objeto que elas serão criadas de forma automática. Podemos

visualizar a utilização de objetos definidos pelo usuário no exemplo abaixo:

<script>

var oContato = new Object();

oContato.Nome = "Sr. Teste";

oContato.Telefone = "(51) 1234-56789";

oContato.Endereco = "Rua Q Sobe e Desce 1000";

Page 87: Html css javascript

Web, HTML, CSS e JavaScript

87 2007 Alfamidia Prow LTDA.

for(prop in oContato)

{

var sMsg;

sMsg = "O objeto contém a propriedade ";

sMsg += prop;

sMsg += " com o valor de " + oContato[prop];

alert(sMsg);

}

</script>

13.3 Métodos

Os métodos de um objeto são funções que pertencem a um objeto. Repare que enquanto

que as propriedades correspondem a variáveis, os métodos correspondem a funções.

13.3.1 Métodos estáticos

Alguns objetos oferecem métodos estáticos. Esses métodos diferem dos métodos normais

pelo fato de não pertencerem a um objeto criado com a instrução new.

13.3.2 A declaração this

A declaração this representa o próprio objeto em que é usada. Esse objeto pode ser uma

função, uma ligação de hipertexto, uma imagem, etc. Esta declaração é bastante útil em

HTML Dinâmico porque nos ajuda muito a construir funções que respondem a eventos

sabendo sempre qual foi o objeto que originou o evento e funcionam corretamente em

todos os browsers. Para aprender mais sobre esta matéria veja um dos exercícios que

estão mais abaixo.

13.3.3 A declaração with

Esta declaração estabelece o objeto ao qual se aplica uma série de instruções. Os dois

exemplos seguintes usam o objeto Math para ilustrar o uso desta declaração e são

totalmente equivalentes.

Versão 1:

x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10)

y = Math.tan(14 * Math.E)

Versão 2: (equivalente à anterior.) Repare que não foi preciso colocar a parte Math. antes

dos nomes dos métodos cos(), sin() ou tan().

Page 88: Html css javascript

Web, HTML, CSS e JavaScript

88 2007 Alfamidia Prow LTDA.

with (Math) {

x = cos(3 * PI) + sin (LN10)

y = tan(14 * E)

}

Quando o número de instruções é pequeno não vale a pena usar a declaração with, mas se

esse número crescer muito o código será mais compacto e fácil de ler se usarmos esta

declaração.

Page 89: Html css javascript

Web, HTML, CSS e JavaScript

89 2007 Alfamidia Prow LTDA.

Unidade 14 Conhecendo Objects DOM

14.1 Introdução a DOM:

O W3C (World Wide Web Consortium) desenvolveu o padrão DOM para padronizar a

forma de acesso a XML e suas estruturas e como os browsers e as aplicações da Web

manipulam e interagem com as páginas da Web. Todos os browsers modernos

implementam estes padrões. Apesar de essas implementações serem geralmente

incompletas, elas são suficientes para que possamos programar quase tudo numa forma

que funciona em todos os browsers dominantes.

14.2 O que é HTML DOM?

Dom significa Document Object Model.

E HTML DOM é Document Object Model para HTML.

O HTML DOM define objetos padrões para HTML, e para acessar componentes padrões

das estruturas do HTML representadas como marcações.

14.3 Quando devemos usar JavaScript

A DOM HTML é uma plataforma e linguagem independente, pode ser usada com varias

linguagens de programação como Java, Javascript, e Vbscript. Este módulo trata o uso de

DOM com Javascript.

14.4 As divisões de DOM

DOM esta dividida em 3 partes:

DOM

XML DOM

(X)HTML DOM

14.5 Alterar conteúdo com HTML DOM

Este exemplo de script mostra como pode ser alterado, o atributo background para cor

amarela com JAVASCRIPT e DOM.

Page 90: Html css javascript

Web, HTML, CSS e JavaScript

90 2007 Alfamidia Prow LTDA.

<html>

<head>

<script type="text/javascript">

function ChangeColor()

{

document.body.bgColor="yellow"

}

</script>

</head>

<body>

<input type=”button” onclick=” ChangeColor()” value=”altere a cor de

Fundo”>

</body>

</html>

14.6 Document Objects

HTML DOM define documentos HTML como uma coleção de Objetos. O Objeto

“document”, é o pai de todos os outros objetos de um documento HTML. O Objeto

“document.body”, representa o elemento <BODY> em um documento HTML. O objeto

“document”, é o pai de “body”, por isso devemos sempre acessar “body” pelo pai.

Exemplo:

document.body

14.7 Propriedades do objeto body

Objeto document tem várias propriedades, também chamado de atributos. A propriedade

“document.body.bgColor” define a cor de fundo de corpo de um documento HTML,

como visto no exemplo anterior, onde definiu a cor de fundo como amarelo.

Syntax: body.property_name

atributos Descrição

accessKey Seta ou retorna o comando chave para acessar o comando chave do objeto body

aLink Seta ou retorna a cor dos links ativados no documento html.

Page 91: Html css javascript

Web, HTML, CSS e JavaScript

91 2007 Alfamidia Prow LTDA.

background Seta ou retorna a imagem que ficara no plano de fundo do documento Html

bgColor Seta ou retorna a cor de fundo do documento HTML

id Seta ou retorna o id do objeto Body (no IE 4 este atributo é read-only)

link Seta a cor dos links no documento html

text Seta ou retorna o cor dos textos no documento HTML

vLink Seta ou retorna a cor dos links visitados no documento HTML

14.8 Objeto Form

FORM é usado para o usuário inserir informações no documento HTML, podemos usar

elementos FORM com text fields, radio buttons, checkbox e listas de seleção. O conteúdo

inserido normalmente é postado para o servidor para processar as informações.

Exemplo:

<html>

<head>

<script type="text/javascript">

function formReset()

{

var x=document.forms.MeuForm

x.reset()

}

</script>

</head>

<body>

<form name="MeuForm">

<p>Preencha os campos abaixo e pressione o botão “Reset Form”</p>

<input type="text" size="20"><br />

<input type="text" size="20"><br />

<br />

<input type="button" onclick="formReset()" value="Reset form">

</form>

Page 92: Html css javascript

Web, HTML, CSS e JavaScript

92 2007 Alfamidia Prow LTDA.

</body>

</html>

Caso existir mais de um form no documento este objeto poderá ser acessado como um

array.

Exemplo:

<html>

<head>

<script type="text/javascript">

function formReset()

{

var x=document.forms[0];

x.reset()

}

</script>

</head>

<body>

<form name="Form1">

<p>Preencha os campos a baixo e veja como funciona o botão Reset</p>

<input type="text" size="20"><br />

<input type="text" size="20"><br />

<br />

<input type="button" onclick="formReset()" value="Reset form">

</form>

<form name="Form2">

<p>Preencha o campo a baixo, ele faz parte de um outro formulário por isto não sera alterado quando o botão reset for pressionado</p>

<input type="text" size="20"><br />

<br />

</form>

</body>

</html>

Neste exemplo o form esta sendo acessado como o primeiro form do documento.

Page 93: Html css javascript

Web, HTML, CSS e JavaScript

93 2007 Alfamidia Prow LTDA.

14.8.1 Atributos do Form

atributos descrição

Action Seta ou retorna a url para onde vai ser submetido o FORM

Encoding Seta ou retorna o MIME encoding para o Form

Enctype Seta ou retorna o MIME encoding para o Form

Id Seta ou retorna o id do objeto Body

Length Seta ou Retorna o numero de elementos de um form

Method Seta ou retorna a forma em que vai ser submetido o form ("get" ou "post")

Name Seta ou retorna o nome do form

tabIndex Seta ou retorna o índice que foi definido o ordem de tabulação para o form

Target Seta ou retorna o alvo em que o response vai processar apos a submissão, normalmente é um frame ou iframe.

14.8.2 Métodos de um FORM

Método Descrição

reset() Coloca o valor inicial nos elementos do form

submit() Submete o form

14.8.3 Eventos de um form

Event Description

onReset Executa quando o evento reset ocorrer

Page 94: Html css javascript

Web, HTML, CSS e JavaScript

94 2007 Alfamidia Prow LTDA.

onSubmit Executa quando o evento submit ocorrer

14.8.4 “Elements” de um FORM

Um form é constituído de vários objetos para interagir um usuário, neste caso DOM

disponibiliza um vetor de elementos. Para facilitar na validação dos objetos.

Exemplo:

Function validaIdade(){

If(document.forms[0].elements[0].value < 0)

{

alert(“digite a idade válida”);

}

}

Esta função valida o primeiro campo, do primeiro form do documento Html.

Coleções descrição

elements[] Retorna um array contendo cada elemento de um FORM

14.9 Método getElementById

Este método retorna um objeto que foi encontrado em toda arvore no documento, com o

ID correspondente. Ele pode ser usado em qualquer posição dos nodos da árvore de

objetos da API DOM.

Exemplo:

Var valor1, valor2;

var telefone = document.forms[0].getElementById(“telefone”);

valor1 = telefone.value;

// ou podemos atribuir diretamente o value à variável

Valor2 = document.forms[0].getElementById(“telefone”).value;

no trecho de código desenvolvido acima, representa um busca dentro do primeiro FORM

pelo id do objeto igual a “telefone”.

Este método poderia ter sido usado dentro de qualquer estrutura da API.

Page 95: Html css javascript

Web, HTML, CSS e JavaScript

95 2007 Alfamidia Prow LTDA.

Exemplo:

var telefone = document.getElementById(“telefone”);

var valor = telefone.value;

Mostrando que este método não é proprietário do objeto FORM, caso ele encontre mais

de um objeto o retorno vai ser um array de elementos.

14.10 Objeto Frameset

O objeto Frameset representa o frameset HTML.

Contendo a mesma limitação quanto a indisponibilidade em uma grande variedades

browsers.

Exemplo de mapeamento de frameset:

<html>

<frameset id="myFrameset" cols="50%,50%">

<frame id="leftFrame" src="frame_a_noresize.htm">

<frame id="rightFrame" src="frame_a.htm">

</frameset>

</html>

frame_a.htm

<html>

<body bgcolor="#66CCFF">

<h3>Frame A</h3>

</body>

</html>

frame_a_noresize.htm

<html>

<head>

<script type="text/javascript">

function disableResize()

{

parent.document.getElementById("leftFrame").noResize=true

parent.document.getElementById("rightFrame").noResize=true

}

function enableResize()

{

Page 96: Html css javascript

Web, HTML, CSS e JavaScript

96 2007 Alfamidia Prow LTDA.

parent.document.getElementById("leftFrame").noResize=false

parent.document.getElementById("rightFrame").noResize=fals

e

}

</script>

</head>

<body bgcolor="#EFE7D6">

<form>

<input type="button" onclick="disableResize()" value="No

resize">

<input type="button" onclick="enableResize()"

value="Resize">

</form>

<p>Aula de javascript com DOM</p>

</body>

</html>

14.10.1 Atributos do Objeto frameset

Atributo descrição

Cols Seta ou retorna o numero de colunas ocupadas em um frame.

Id Seta ou retorna o id de um frameset

Rows Seta ou retorna o numero de linhas ocupadas em um frame.

14.10.2 Metodos de Objeto Frameset

Métodos descrição

blur() Remove o foco de um frameset

focus() Recebe o foco

14.10.3 Eventos de objeto de um Frameset

Event Description

Page 97: Html css javascript

Web, HTML, CSS e JavaScript

97 2007 Alfamidia Prow LTDA.

onBlur Executado quando o foco sai de um frameset

onFocus Executado quando um frameset recebe o foco.

Page 98: Html css javascript

Web, HTML, CSS e JavaScript

98 2007 Alfamidia Prow LTDA.

Unidade 15Manipulando forms com DOM

15.1 Tutorial

Para tirarmos o máximo de proveito dos recursos da linguagem Javascript devemos saber

como a linguagem interage com as páginas HTML. O Javascript tem acesso a diversos

objetos disponíveis em uma página HTML, visto que o próprio código Javascript é

colocado dentro da página HTML.

O Javascript consegue acessar os elementos da página HTML de forma hierárquica, ou

seja, temos um objeto chamado document que é acessível a qualquer script colocado na

página. A partir do objeto document, é possível acessar todos os elementos da páginas,

desde os frames até os próprios elementos de um formulário contido dentro da página.

Abaixo podemos ver um exemplo de como funciona esta hierarquia.

A partir do objeto document podemos ter acesso a qualquer elementos contido dentro da

página HTML, como por exemplo uma caixa de texto de um formulário.

O próprio objeto document possui uma série de propriedades e métodos que podem ser

utilizadas pelo JavaScript para interagir ou modificar a aparecia do documento.

Podemos visualizar uma série de propriedades do objeto document com o script abaixo:

<script>

alert(document.location);

alert(document.referrer);

alert(document.fgColor );

alert(document.forms.length );

alert(document.images.length);

alert(document.links.length);

alert(document.readyState );

</script>

document

Forms[] Formulários

HTML)

Frames[] Frames

Elementos[] Elementos

Page 99: Html css javascript

Web, HTML, CSS e JavaScript

99 2007 Alfamidia Prow LTDA.

Além de poder visualizar as informações referentes ao documento, o Javascript ainda

pode interagir com diversos elementos contidos no HTML. Tomemos como exemplo o

HTML abaixo:

<HTML>

<HEAD>

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">

<TITLE></TITLE>

</HEAD>

<BODY>

<img src="mmc.gif">

<img>

<img>

<img>

<br>

</BODY>

</HTML>

Como podemos ver o HTML possui três elementos do tipo IMG, que representam

imagens dentro do documento. Também podemos notar que somente a primeira imagem

possui a propriedade src definida. Através do Javascript, podemos perfeitamente acessar a

coleção de imagens de um documento através da propriedade images. A propriedade

images contém uma coleção de todas as imagens disponíveis dentro de um documento.

No script abaixo vemos um exemplo onde utilizamos a propriedade src da primeira

imagem para carregar as demais imagens do document.

<script>

alert("Note que as imagens não estão carregadas !");

document.images[1].src = document.images[0].src;

document.images[2].src = document.images[0].src;

alert("Agora as imagens estão carregadas !");

</script>

Além de poder acessar as imagens de um documento, podemos também acessar a coleção

de links disponíveis. O objeto document possui acesso a coleção de links disponíveis na

página através da propriedade links. Através desta propriedade podemos acessar e até

modificar cada um dos links da página. Tomemos como exemplo o HTML abaixo.

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

Page 100: Html css javascript

Web, HTML, CSS e JavaScript

100 2007 Alfamidia Prow LTDA.

<a href=""></a><br>

<a href=""></a><br>

<a href=""></a><br>

<a href=""></a><br>

<a href=""></a><br>

<br>

<input type="button" value="Inserir Links" onClick="javascript:popula();">

</BODY>

</HTML>

Através de um bloco de javascript podemos perfeitamente alterar as características

dos links disponíveis na página, acessando a propriedade links do objeto document. Ao

acessar cada um dos links podemos perfeitamente alterar o caminho para o qual o link

está apontando, bem como o texto contido dentro do link. O exemplo abaixo mostra

como alterar os links no HTML apresentado acima.

<script>

function popula(){

var sAlunos = new Array();

sAlunos[0] = "Andre";

sAlunos[1] = "Joao";

sAlunos[2] = "Maria";

sAlunos[3] = "Jose";

sAlunos[4] = "Carlos";

sAlunos.sort();

for(nCount=0;nCount<sAlunos.length;nCount++)

{

document.links[nCount].href =

"http://www.processor.com.br/alunos/" + sAlunos[nCount];

document.links[nCount].innerHTML = sAlunos[nCount];

}

}

</script>

Além de alterar propriedades dos elementos podemos criar conteúdo dinâmico no

documento através do JavaScript. Isto pode ser obtido através da utilização do método

write do objeto document. Com o método write podemos escrever conteúdo dentro do

HTML no mesmo ponto onde se encontra o código script de forma dinâmica. Um

exemplo de implementação do método write pode ser observado abaixo.

<script>

Page 101: Html css javascript

Web, HTML, CSS e JavaScript

101 2007 Alfamidia Prow LTDA.

var sAlunos = new Array();

sAlunos[0] = "Andre";

sAlunos[1] = "Joao";

sAlunos[2] = "Maria";

sAlunos[3] = "Jose";

sAlunos[4] = "Carlos";

sAlunos.sort();

for(nCount=0;nCount<sAlunos.length;nCount++)

{

document.write(sAlunos[nCount] + "<br>");

}

</script>

Além de criar conteúdo dinâmico, podemos alterar outras propriedades do documento,

como por exemplo sua própria localização. Alterando a localização do documento faz

com que a página seja automaticamente redirecionada para outra página especificada pelo

script. O exemplo abaixo mostra como podemos alterar a localização do documento

através de um script. A alteração é feita acessando a propriedade location do document. A

propriedade location é um objeto que contém diversas informações sobre a localização

atual do documento. Para alterar o documento para outra página do site, devemos trocar a

propriedade href.

<script>

var dtData = new Date();

if(dtData.getHours() > 12)

document.location.href = "tarde.htm";

else

document.location.href = "manha.htm";

</script>

Além de alterar a localização, podemos também recarregar o documento através do

comando reload. O exemplo abaixo mostra como recarregar o documento após um

determinado intervalo de tempo. setTimeout, que executa uma instrução Javascript após

um determinado intervalo de tempo, especificado como parâmetro na função.

<script>

var dtData = new Date();

document.write(dtData.getHours() + ":"

+ dtData.getMinutes() + ":"

+ dtData.getSeconds());

Page 102: Html css javascript

Web, HTML, CSS e JavaScript

102 2007 Alfamidia Prow LTDA.

setTimeout("document.location.reload();", 2000);

</script>

15.2 Mapeando eventos de um formulário

Antes de verificarmos como buscar as informações digitadas pelo usuário em um

formulário devemos compreender como funciona o processo de mapeamento de eventos

em um formulário HTML.

O mapeamento de eventos é um processo que ocorre em resposta a alguma interação do

usuário com o formulário, como por exemplo um clique em um botão. Podemos associar

os eventos de diversos elementos HTML a diversos eventos disponíveis. Cada elemento

possui seu próprio conjunto de eventos, que refletem as características específicas do

elemento de entrada de dados. Para mapearmos eventos de um elemento em um

formulário HTML podemos utilizar três técnicas.

Exemplo

function click()

{

if (event.button == 1)

{

if(document.bgColor == "#ffff00")

{

document.bgColor = "red";

}

else

{

document.bgColor="#ffff00";

}

}

if (event.button == 2){alert("Copyright mann");}

}

document.onmousedown=click;

15.2.1 Mapeando Eventos através da tag script

Uma das maneiras que podemos utilizar para mapear eventos em um formulário HTML é

através da própria tag script. A tag script possui parâmetros que nos permitem indicar

qual elemento do documento HTML e qual evento do elemento queremos mapear.

Para mapearmos um evento de um objeto no documento HTML devemos informar na tag

SCRIPT do HTML os atributos EVENT e FOR. O atributo FOR indica para qual elemento

do documento o código de script em questão irá executar. O atributo EVENT indica em

Page 103: Html css javascript

Web, HTML, CSS e JavaScript

103 2007 Alfamidia Prow LTDA.

qual evento do objeto indicado no atributo FOR o script será executado. Tomemos como

exemplo o HTML com o formulário abaixo:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !">

</FORM>

</BODY>

</HTML>

Se quisermos mapear o evento clique no botão criado no formulário HTML mostrado

acima, devemos criar um bloco de script com o atributo FOR indicando para o botão com

o nome de btnOK, e o atributo EVENT indicando para o evento “onclick”. Podemos ver

um exemplo do mapeamento deste evento no bloco de script apresentado abaixo.

Parte superior do formulário

Parte inferior do formulário

<SCRIPT FOR=btnOk EVENT="onclick">

alert("Você clicou no botão !");

</SCRIPT>

Esta técnica de mapeamento de eventos pode ser utilizada para mapear eventos não só

dos elementos HTML em geral, mas também eventos do próprio documento, como o

evento de carregamento. O exemplo abaixo mostra um bloco de script que mapeia o

evento OnLoad do documento contido na janela do browser.

<SCRIPT FOR=window EVENT="onload">

alert("O documento foi carregado !");

</SCRIPT>

15.2.2 Mapeando eventos através de funções

Outra técnica que podemos utilizar para mapear eventos é através de funções. Para

mapearmos eventos através desta técnica, é necessário o desenvolvimento de uma função

para cada evento que queremos mapear de um determinado objeto.

Tendo criado a função que irá mapear o evento, é necessário especificar um novo atributo

no elemento do formulário o qual queremos mapear o evento. O nome deste atributo será

o nome do próprio evento a ser mapeado (Ex.: onclick, onload, onkeypress, onkeydown,

Page 104: Html css javascript

Web, HTML, CSS e JavaScript

104 2007 Alfamidia Prow LTDA.

onchange, etc.), e o valor contido neste atributo será o nome da função utilizada para

mapear o evento. O exemplo a seguir mostra o mesmo HTML mostrado no exemplo

anterior, porém utilizando a técnica de mapeamento por funções.

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick=”click_btnOk()”>

</FORM>

</BODY>

</HTML>

Note que incluímos um novo atributo na tag do botão que representa o evento a ser

mapeado. O conteúdo deste atributo é o nome da função que irá executar no momento em

que o evento for acionado, exibida abaixo:

<SCRIPT>

function btnOk_click()

{

alert("O documento foi carregado !");

}

</SCRIPT>

É importante salientar que para este tipo de implementação é sempre aconselhável

colocar o código da função de mapeamento de evento ANTES da tag de definição do

elemento, de preferência dentro da tag <HEAD> do documento, em virtude de alguns

browsers não reconhecerem as funções declaradas após o elemento que utilizará a função.

15.2.3 Mapeamento de eventos através de atribuição

Esta técnica é muito semelhante a técnica de mapeamento de eventos através de funções,

porém a associação da função com o elemento não é feita através da tag do elemento que

irá mapear o evento, e sim através de um outro código de script. Para esta técnica

utilizaremos o mesmo HTML do primeiro exemplo, apresentado abaixo:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<FORM>

<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !">

</FORM>

</BODY>

Page 105: Html css javascript

Web, HTML, CSS e JavaScript

105 2007 Alfamidia Prow LTDA.

</HTML>

Ao invés de utilizarmos os atributos FOR e EVENT para mapear o eventos,

continuaremos utilizando a função de mapeamento, porém associaremos a função de

mapeamento com o objeto em outro bloco de script.

<SCRIPT>

function btnOk_click()

{

alert("O documento foi carregado !");

}

</SCRIPT>

<SCRIPT>

document.forms[0].btnOk.onclick=btnOk_click;

</SCRIPT>

15.3 Extraindo informações dos formulários HTML

Agora que já sabemos como mapear os eventos dos elementos de um formulário, iremos

buscar informações deste formulário, afim de realizar validações e alterações nas

características deste formulário.

A extração de dados de um formulário começa pela busca da referencia do formulário que

contém o elemento com os dados que queremos utilizar. Esta referencia ao formulário

pode ser feita de diversas formas, que vão variar de acordo com o formato do formulário

15.3.1 Buscando informações de formulários não nomeados

A maior parte dos elementos em um formulário HTML possui um atributo chamado

NAME, que é utilizado para buscar a referencia a este elemento dentro de um código de

script ou no destino final da página (web server). O próprio formulário HTML, na

maioria dos casos, possui um nome associado.

O problema é que o atributo nome não é um atributo obrigatório, nem para os elementos

do formulário, nem para o formulário em si. No caso de o formulário não possuir um

nome, devemos acessá-lo através da coleção forms, contida no objeto document. Cada

formulário possui como propriedades cada um dos elementos contidos dentro dele. Se um

formulário contém um elemento “caixa de texto”, com o nome de txtNome, para o código

javascript este formulário terá uma propriedade chamada txtNome, que representara o

elemento caixa de texto do formulário.

Tomemos como exemplo o HTML abaixo:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

Page 106: Html css javascript

Web, HTML, CSS e JavaScript

106 2007 Alfamidia Prow LTDA.

<BODY>

<FORM>

<INPUT TYPE=TEXT NAME=txtNome><BR>

<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick="btnOk_click()">

</FORM>

</BODY>

</HTML>

Como este formulário não possui um nome associado, precisamos acessá-lo através da

coleção forms do objeto document. A coleção forms possui um conjunto completo com

todos os formulários disponíveis dentro do document HTML. Como só temos um

formulário dentro de nosso documento, o formulário que queremos é o formulário de

índice 0, conforme apresentado no bloco de script abaixo:

<SCRIPT>

function btnOk_click()

{

alert(document.forms[0].txtNome.value);

}

</SCRIPT>

O código de script acima, busca uma referencia a caixa de texto contida dentro do

formulário do documento e exibe a propriedade value da mesma, que representa o

conteúdo textual da caixa de texto.

15.3.2 Buscando informações de formulários nomeados

Quando os formulários são nomeados, o processo de busca de informações fica mais

fácil, pois é possível referenciar diretamente o formulário que contém o controle que

queremos buscar as informações. Se utilizarmos o mesmo HTML utilizado anteriormente,

porém com um formulário com a propriedade name, podemos alterar nosso código de

script para utilizar este nome associado ao formulário.

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<FORM NAME=frmDados>

<INPUT TYPE=TEXT NAME=txtNome><BR>

<INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick="btnOk_click()">

</FORM>

</BODY>

</HTML>

Page 107: Html css javascript

Web, HTML, CSS e JavaScript

107 2007 Alfamidia Prow LTDA.

Como temos a propriedade NAME associado ao FORM, podemos utilizar nosso

script desta forma:

<SCRIPT>

function btnOk_click()

{

alert(document.frmDados.txtNome.value);

}

</SCRIPT>

15.4 Validando informações no formulário

Agora que sabemos como buscar as informações do formulário HTML, devemos verificar

como extrair as informações dos elementos do formulário. Para isso, devemos conhecer

um pouco mais dos principais tipos de elementos disponíveis nos formulários HTML

15.4.1 Validando informações de caixas de texto

As caixas de texto são os elementos mais simples de um formulário HTML, porém são

também os elementos mais flexíveis. As caixas de texto possuem como propriedade

principal a propriedade value, que devolve o conteúdo da caixa de texto. A propriedade

value nada mais é do que um objeto String do JavaScript que já vimos anteriormente,

contendo todas as suas propriedades e características.

No exemplo abaixo podemos ver um formulário que solicita informações de usuário e

senha em um formulário HTML.

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<FORM ACTION="">

Usuário: <INPUT TYPE=TEXT NAME=txtUsuario><BR>

Senha: <INPUT TYPE=PASSWORD NAME=txtSenha><BR><BR>

<INPUT TYPE=BUTTON NAME=btnOk VALUE="Efetuar Logon" onclick="btnOk_click()">

</FORM>

</BODY>

</HTML>

Para criarmos uma função que faça a validação deste formulário, basta criarmos o

mapeamento para o evento onclick do botão efetuar logon e apenas submeter o formulário

no caso de as informações solicitadas estarem corretas. O código de script abaixo realiza

esta validação.

Page 108: Html css javascript

Web, HTML, CSS e JavaScript

108 2007 Alfamidia Prow LTDA.

<SCRIPT>

function btnOk_click()

{

if(document.frmDados.txtUsuario.value.length == 0)

{

alert("Informe o usuário !");

document.frmDados.txtUsuario.focus();

return;

}

if(document.frmDados.txtSenha.value.length < 6)

{

alert("A senha deve ter no mínimo 6 dígitos !");

document.frmDados.txtSenha.focus();

return;

}

document.frmDados.submit();

}

</SCRIPT>

No bloco de script acima, utilizamos a propriedade value do objeto txtUsuario para

verificarmos se o campo está ou não preenchido. Note que estamos utilizando a

propriedade length para fazermos esta verificação. A propriedade length pertence ao

objeto String, que representa o conteúdo textual da caixa de texto.

Note que caso o usuário não tenha entrado com as informações no campo usuário, é

apresentado um alerta ao usuário e o foco do campo é posicionado no campo que está

com erro no formulário. O foco é trocado através do método focus, que está presente em

todos os controles de interação com usuário dos formulários HTML. Após a troca do

foco, é chamado o comando return, para que a execução da função seja interrompida.

A validação do controle de senha é feita de forma semelhante a validação do campo de

usuário, porém neste caso estamos verificando se o usuário digitou no mínimo 6 dígitos

para a senha.

Caso as condições estejam satisfeitas, o formulário HTML é submetido para o

WebServer.

15.4.2 Validando listas de seleção simples e múltipla (Combo e ListBox)

As listas de seleção simples múltiplas possuem o mesmo comportamento dentro de um

formulário HTML. Em ambos os casos é possível verificar se o usuário selecionou

algum item na lista ou se está com algum item da lista selecionado.

Tomemos o HTML abaixo como exemplo

Page 109: Html css javascript

Web, HTML, CSS e JavaScript

109 2007 Alfamidia Prow LTDA.

<HTML>

<BODY>

<FORM NAME=frmDados ACTION="">

Pesquisa Vagas<BR>

<BR>

Cidade:

<SELECT SIZE=1 NAME=cmbCidade>

<OPTION VALUE="">-- Selecione a cidade --</OPTION>

<OPTION VALUE="1">Belo Horizonte</OPTION>

<OPTION VALUE="2">Porto Alegre</OPTION>

<OPTION VALUE="3">Rio de Janeiro</OPTION>

<OPTION VALUE="4">São Paulo</OPTION>

</SELECT><BR>

<BR>

Cargos:<BR>

<SELECT SIZE=5 NAME=lstCargo multiple="multiple">

<OPTION VALUE="1">Analista de Sistemas</OPTION>

<OPTION VALUE="2">DBA</OPTION>

<OPTION VALUE="3">Programador</OPTION>

<OPTION VALUE="4">Programador/Analista</OPTION>

<OPTION VALUE="5">Web-Designer</OPTION>

</SELECT><BR><BR>

<INPUT TYPE=BUTTON NAME=btnOk VALUE="Pesquisar" onclick="btnOk_click()">

</FORM>

</BODY>

</HTML>

Neste HTML temos uma caixa de seleção simples e uma caixa de seleção múltipla. Para

testarmos se o usuário selecionou ou não as informações destes controles utilizaremos o

código de script a seguir.

<SCRIPT>

function btnOk_click()

{

if(document.frmDados.cmbCidade.options[0].selected==true)

{

alert("Selecione a cidade !");

document.frmDados.cmbCidade.focus();

return;

}

if(document.frmDados.lstCargo.value == "")

{

alert("Selecione o cargo !");

document.frmDados.lstCargo.value = "";

return;

}

Page 110: Html css javascript

Web, HTML, CSS e JavaScript

110 2007 Alfamidia Prow LTDA.

document.frmDados.submit();

}

</SCRIPT>

Para a validação do primeiro campo utilizamos a coleção options do controle cmbCidade.

A coleção options contém uma referencia a cada um dos itens existentes dentro da caixa

de seleção. Os itens podem ser acessados da mesma forma que um array simples em

JavaScript. Cada item das caixas de seleção, representados na coleção options, possuem

uma série de propriedades, dentre elas a propriedade selected. A propriedade selected

devolve um valor verdadeiro caso o item esteja selecionado, e falso caso não esteja

selecionado. No caso de caixas de seleção múltipla, é possível testar se mais de um item

foi selecionado através da coleção options, testando cada um dos valores da propriedade

selected de cada item.

document.frmDados.lstCargo.options[0].value;

document.frmDados.lstCargo.options[0].innerHTML;

document.frmDados.lstCargo.options[0].selected;

As caixas de seleção também possuem, assim como as caixas de texto, a propriedade

value, que indica o valor do item selecionado. No caso da segunda caixa de seleção,

estamos fazendo um teste para verificar se o valor da caixa de seleção é branco ou não, o

que indica que o usuário não selecionou nenhum item. Caso as condições sejam

satisfeitas, o formulário é submetido ao servidor para o processamento.

15.4.3 Validando caixas de escolha simples e múltipla (RadioButton e CheckBox)

Para finalizarmos o módulo de validação de dados em formulários HTML, devemos

verificar a validação das caixas de escolha simples e múltipla. Estas caixas permitem ao

usuário selecionar itens de forma múltipla ou simples em um formulário.

Tomemos o HTML que segue como exemplo:

<HTML>

<HEAD>

</HEAD>

<BODY>

Selecione o grau de escolaridade:<br>

<input type=radio name=optEscolaridade value="1">Analfabeto<br>

<input type=radio name=optEscolaridade value="2">1º Grau<br>

<input type=radio name=optEscolaridade value="3">2º Grau<br>

<input type=radio name=optEscolaridade value="4">Superior Incompleto<br>

<input type=radio name=optEscolaridade value="5">Superior Completo<br>

<input type=radio name=optEscolaridade value="6">Pós, mestrado<br>

<br>

Page 111: Html css javascript

Web, HTML, CSS e JavaScript

111 2007 Alfamidia Prow LTDA.

<input type=checkbox name=chkAtividadeFisica value="A">Pratica Atividade Física

<input type=checkbox name=chkFumante value="F">Fumante

<br><Br>

<input type=button value="Enviar" onclick="Validar()">

</BODY>

</HTML>

Para validarmos o formulário HTML acima utilizaremos a função Validar, que está

mapeada para o clique do botão Enviar, apresentada no bloco de script abaixo

<script>

function Validar()

{

var nCount;

var bSelecionou = false;

for(nCount=0; nCount<document.frmDados.optEscolaridade.length; nCount++)

{

if(document.frmDados.optEscolaridade[nCount].checked)

{

bSelecionou = true;

break;

}

}

if(bSelecionou == false)

{

alert("Selecione o grau de escolaridade !");

return;

}

if(document.frmDados.optEscolaridade.value=="")

{

alert("Selecione o grau de escolaridade !");

return;

}

if(document.frmDados.chkFumante.checked == true)

{

alert("O Ministério da saúde adverte. Fumar faz mal a saúde !");

}

document.frmDados.submit();

}

</script>

Note que para validarmos ambos os controles estamos utilizando a propriedade checked.

A propriedade checked é utilizada para verificar se um controle de seleção está marcado

ou desmarcado, e serve tanto para radiobuttons como para checkbox.

Na primeira validação, note que temos um conjunto de options com o mesmo nome. Isto

faz com que o script interprete os controles como um array de controles, nos obrigando a

Page 112: Html css javascript

Web, HTML, CSS e JavaScript

112 2007 Alfamidia Prow LTDA.

informar o índice de cada um dos controle antes de acessá-los. Criamos uma variável

bSelecionou para verificarmos se o usuário selecionou pelo menos um option button.

Caso ele encontre um option button com a propriedade checked igual a true, a variável

bSelecionou será definida para true, validando o formulário.

Para os outros dois campos, apenas estamos testando a propriedade checked para dar um

alerta para o usuário.

15.4.4 Criando uma função para mascaras de campos

O conteúdo desenvolvido abaixo é para demonstrar a aplicação de alguns comandos em

javascript, desenvolva o script e veja o resultado.

<HTML>

<HEAD>

</HEAD>

<BODY>

<input type=text name=”CPF” onkeypress=”return EditMask(this,

´999.999.999-99´, event);” >

<input type=text name=”Fone” onkeypress=”return EditMask(this,

´(99)9999.9999´, event);” >

</BODY>

</HTML>

Criaremos uma função que manipule a tag para que o formato digitado seja o pré-definido

no código:

<script language=”javascript”>

function EditMask(objField, sMask, evtKeyPress) {

var i, nCount, sValue, fldLen, mskLen,bolMask, sCod, nTecla;

if(document.all) { // Internet Explorer

nTecla = evtKeyPress.keyCode; }

else if(document.layers) { // Nestcape

nTecla = evtKeyPress.which;

}

sValue = objField.value;

// Limpa todos os caracteres de formatação que

// já estiverem no campo.

sValue = sValue.toString().replace( "-", "" );

sValue = sValue.toString().replace( "-", "" );

sValue = sValue.toString().replace( ".", "" );

sValue = sValue.toString().replace( ".", "" );

sValue = sValue.toString().replace( "/", "" );

Page 113: Html css javascript

Web, HTML, CSS e JavaScript

113 2007 Alfamidia Prow LTDA.

sValue = sValue.toString().replace( "/", "" );

sValue = sValue.toString().replace( "(", "" );

sValue = sValue.toString().replace( "(", "" );

sValue = sValue.toString().replace( ")", "" );

sValue = sValue.toString().replace( ")", "" );

sValue = sValue.toString().replace( " ", "" );

sValue = sValue.toString().replace( " ", "" );

fldLen = sValue.length;

mskLen = sMask.length;

i = 0;

nCount = 0;

sCod = "";

mskLen = fldLen;

while (i <= mskLen) {

bolMask = ((sMask.charAt(i) == "-") || (sMask.charAt(i) ==

".") || (sMask.charAt(i) == "/"))

bolMask = bolMask || ((sMask.charAt(i) == "(") ||

(sMask.charAt(i) == ")") || (sMask.charAt(i) == " "))

if (bolMask) {

sCod += sMask.charAt(i);

mskLen++; }

else {

sCod += sValue.charAt(nCount);

nCount++;

}

i++;

}

objField.value = sCod;

if (nTecla != 8) { // backspace

if (sMask.charAt(i-1) == "9") { // apenas números...

return ((nTecla > 47) && (nTecla < 58)); } // números de 0 a

9

else { // qualquer caracter...

return true;

} }

else {

return true;

}

}

</script>

Page 114: Html css javascript

Web, HTML, CSS e JavaScript

114 2007 Alfamidia Prow LTDA.

15.5 Validação com Regular Expressions (RegEx)

Uma Expressão Regular, REGEX ou REGEXP é, basicamente, uma seqüência de

Caracteres Gráficos dispostos sob uma determinada regra, de modo a coincidir com um

fragmento padrão de texto particular - presente em um determinado documento. A baixo

usamos esta lógica para validação de um campo email.

Modelos de Regular Expressions:

Testa valor String filtro utilizada

CEP /^[0-9]{5}-[0-9]{3}$/

CPF /^([0-9]{3}\.){2}[0-9]{3}-[0-9]{2}$/

Datas até 2099 formato (YYYYMMDD) /^20[0-9][0-9]([012][0-9]|[3][01])([0][0-9]|[1][012])$/

MacAddress /^(([0-9a-f]{2}):){5}([0-9a-f]{2})$/

IP 1]?[0-9]{1,2}|2([0-4][0-9]|5[0-5]))\.){3}([1]?[0-9]{1,2}|2([0-4][0-9]|5[0-5]))$/

Email /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

HTML (substitui tags por nada) “<[^>]*>”, “”

function checkMail()

{

// atribui a variável x o valor do campo email do formulário

var x = document.forms[0].email.value;

/* cria uma variável com o filtro para fazer a pesquisa na string (neste caso é

para validar um emaill) */

var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-

9]{2,4})+$/;

//Faz consistência com o método test da variável x

if (filter.test(x)) alert(Email válido!');

else alert('Email inválido!');

}

Page 115: Html css javascript

Web, HTML, CSS e JavaScript

115 2007 Alfamidia Prow LTDA.

Unidade 16 Objeto window

7.1 Métodos do objeto window

É o objeto principal na hierarquia e contém as propriedades e métodos para controlar a

janela do navegador. Dele dependem todos os demais objetos da hierarquia. Vamos ver a

lista de suas propriedades e métodos.

Método Descrição

alert(texto) Apresenta uma janela de alerta onde se pode ler o texto que recebe por parâmetro.

back() Ir uma página atrás no histórico de páginas visitadas. Funciona como o botão de voltar da barra de ferramentas. (Javascript 1.2)

blur()

Tirar o foco da janela atual. (Javascript 1.1)

captureEvents(eventos) Captura os eventos que se indiquem por parâmetro (Javascript 1.2).

clearInterval() Elimina a execução de sentenças associadas a um intervalo indicadas com o método setInterval().(Javascript 1.2)

clearTimeout()

Elimina a execução de sentenças associadas a um tempo de espera indicadas com o método setTimeout().

close() Fecha a janela. (Javascript 1.1)

confirm(texto)

Mostra uma janela de confirmação e permite aceitar ou rejeitar

find()

Mostra uma janelinha de busca. (Javascript 1.2 para Netscape)

focus() Coloca o foco da aplicação na janela. (Javascript 1.1)

forward() Ir uma página adiante no histórico de páginas visitadas. Como se clicássemos o botão de adiante do navegador. (Javascript 1.2)

Page 116: Html css javascript

Web, HTML, CSS e JavaScript

116 2007 Alfamidia Prow LTDA.

home() Ir à página de início o explorador que tenha configurado. (Javascript 1.2)

moveBy(pixelsX, pixelsY) Move a janela do navegador os pixels que se indicam por parâmetro para a direita e para baixo. (Javascript 1.2)

moveTo(pixelsX, pixelsY) Move a janela do navegador à posição indicada nas coordenadas que recebe por parâmetro. (Javascript 1.2)

open() Abre uma janela secundária do navegador.

print()

Como se clicássemos o botão de imprimir do navegador. (Javascript 1.2)

prompt(pergunta,inicio_da_resposta) Mostra uma caixa de diálogo para pedir um dado. Devolve o dado que se escreveu.

releaseEvents(eventos) Deixa de capturar eventos do tipo que se indique por parâmetro. (Javascript 1.2)

resizeBy(pixelslargo,pixelsAlto) Redimensiona o tamanho da janela, acrescentando ao seu tamanho atual os valores indicados nos parâmetros. O primeiro para a altura e o segundo para a largura. Admite valores negativos se se deseja reduzir a janela. (Javascript 1.2)

resizeTo(pixelslargo,pixelsAlto) Redimensiona a janela do navegador para que ocupe o espaço em pixels que se indica por parâmetro (Javascript 1.2)

routeEvent() Encaminha um evento pela hierarquia de eventos. (Javascript 1.2)

scroll(pixelsX,pixelsY)

Faz um scroll da janela para a coordenada indicada por parâmetro. Este método está desaconselhado, pois agora se debería utilizar scrollTo()(Javascript 1.1)

scrollBy(pixelsX,pixelsY) Faz um scroll do conteúdo da janela relativo à posição atual. (Javascript 1.2)

scrollTo(pixelsX,pixelsY) Faz um scroll da janela à posição indicada pelo parâmetro. Este método tem que ser utilizado ao invés do scroll. (Javascript 1.2)

Page 117: Html css javascript

Web, HTML, CSS e JavaScript

117 2007 Alfamidia Prow LTDA.

setInterval() Define um script para que seja executado indefinidamente em cada intervalo de tempo. (Javascript 1.2)

setTimeout(sentença,segundos) Define um script para que seja executado uma vez depois de um tempo de espera determinado.

stop()

Como clicar o botão de stop da janela do navegador. (Javascript 1.2)

Exemplo do uso de algumas funções da propriedade window:

<script>

function Abrejanela(Opcao) {

Versao = navigator.appVersion

Versao = Versao.substring(0, 1)

Local = ""

if (Versao < 3) {

Local = document.location

UltLoc = Local.lastIndexOf("/")

Local = Local.substring(0, UltLoc + 1)

}

NovaJanela = window.open ("", "OutraJanela", "width=300,height=400")

NovaJanela.document.open()

NovaJanela.document.write ("<html><head><title>Nova Janela")

NovaJanela.document.write ("</title></head><body bgcolor='white'>")

NovaJanela.document.write ("<form>")

if (Opcao == 1)

{

NovaJanela.document.write ("<br>Logomarca Elogica<hr><br>")

NovaJanela.document.write

("<img width=200 height=200 src=" + Local + "Marcaelo.gif>")

}

else

{

NovaJanela.document.write ("<br>Recife Alto Astral<hr><br>")

NovaJanela.document.write

("<img width=150 height=200 src=" + Local + "Recife.gif>")

}

//

NovaJanela.document.write ("<br><hr><p></p></form>")

NovaJanela.document.write ("<form><input type='button' name='Fecha'" +

"value='Fecha Janela'" + "onclick='window.close()'>")

NovaJanela.document.write ("<input type='button' name='imprime'" +

"value='imprimir Janela'" + "onclick='window.print()'>")

NovaJanela.document.write ("</form></body></html>")

NovaJanela.document.close()

Page 118: Html css javascript

Web, HTML, CSS e JavaScript

118 2007 Alfamidia Prow LTDA.

}

</script>

<body>

<p></p>

<p>Escolha a foto a ser apresentada na nova janela:</p>

<form method="POST" name="Form1">

<p>

<input type=radio name="Opcao" value="1" checked>Elogica

<input type=radio name="Opcao" value="2">Recife

</p> <p>

<input type="button" name="Envia" value="Nova Janela"

onclick="if (Form1.Opcao[0].checked == true){Abrejanela(Form1.Opcao[0].value) }

else {Abrejanela(Form1.Opcao[1].value) } "><strong></strong>

</p>

</form>

</body>

Page 119: Html css javascript

Web, HTML, CSS e JavaScript

119 2007 Alfamidia Prow LTDA.

Unidade 17 - Anexo 1 Principais tags

Neste anexo apresentamos todas as tabelas de tags HTML apresentadas nas unidades

anteriores, para facilitar a consulta:

TAG O QUE FAZ

<!-- comentários --> Insere comentários nas páginas

<html> Toda página HTML deve estar entre o tag de início de um documento HTML e o tag de fim deste documento.

<head> Envolvem a seção de cabeçalho do documento, no qual são especificadas informações que não são exibidas na página, como título do documento e informações sobre o assunto da página.

<title> Indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na barra de título da sua Janela no Windows

<body> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND.

<br> Insere uma quebra de linha

TAG O QUE FAZ

<hn> Marca um título. Sendo que “n” representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o número 1 é o maior tamanho do título.

<hr> Insere uma linha horizontal

<p> Marca um parágrafo

<center> Centraliza todo o conteúdo entre as tags <center> e </center>

<b> Coloca o texto em negrito

<i> Coloca o texto em itálico

Page 120: Html css javascript

Web, HTML, CSS e JavaScript

120 2007 Alfamidia Prow LTDA.

<u> Coloca o texto sublinhado

<tt> Coloca o texto em fonte monoespaçada. (fonte Courier,como máquina de escrever)

<font> Modifica a formatação do texto.

Atributos:

Size = define o tamanho da letra. Ex: <font size=5>Texto</font>

Face = define o estilo da letra. Ex: <font face=verdana>Texto</font>

Color = define a cor da letra. Ex:<font color=red>Texto</font>

<pre> Marca um trecho formatado com fonte monoespaçada. A formatação com espaços e entrada de parágrafos é respeitada.

<basefont> Modifica a formatação padrão do texto.

Ex: <basefont size=5>

TAG O QUE FAZ

<ol> Marca o início e o fim de uma lista ordenada. Recebem na primeira linha um número ou letra.

Atributos:

Start = especifica o número a partir do qual os itens começam a ser contados. Ex: <ol start=3>

Type = modifica o tipo do numerador que pode ser: número, letras ou algarismo romano.

<ul> Marca o início e o fim de uma lista não ordenada, ou seja, os itens da lista recebem símbolos na primeira linha.

Atributos

Type = modifica o tipo do marcador (símbolo), que pode ser:

Circle = um círculo vazio.

Disc = um círculo cheio.

Square = um quadrado cheio

<li> Marca um item de uma lista, ordenada ou não ordenada.

Page 121: Html css javascript

Web, HTML, CSS e JavaScript

121 2007 Alfamidia Prow LTDA.

TAG O QUE FAZ

<img> Insere uma imagem

Atributos

src indica o nome da imagem a ser carregado.

align=middle centraliza o base do texto com o centro da imagem

align=left faz a imagem flutuar a esquerda enquanto o texto circunda imagem à direita.

align=top alinha o texto no topo

align=right faz a imagem flutuar a direita enquanto o texto circunda imagem à esquerda.

alt=”n” indica o texto para ser exibido quando o navegador não exibe a imagem. Sendo que n é o título que identifique a imagem.

Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”>

TAG O QUE FAZ

<a> Define um link

Atributos

Href: indica o endereço do link.

Target: define onde o link será aberto: _blank define que será aberta uma nova janela.

TAG O QUE FAZ

<table> Define uma tabela. Antes e depois de uma tabela, acontece sempre uma quebra de linha.

Atributos

Border: define espessura da borda da tabela

Cellspacing: espaço entre cada célula

Cellpadding: distância entre borda e conteúdo de cada célula.

Width: largura da tabela, em pixels ou valor percentual

<tr> Define uma linha normal da tabela (table row).

Atributos

Page 122: Html css javascript

Web, HTML, CSS e JavaScript

122 2007 Alfamidia Prow LTDA.

Align: valores left, right e center definem o alinhamento horizontal.

Valign: valores top, middle e bottom definem o alinhamento vertical.

<td> Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas células é alinhado a esquerda.

Atributos

Align: valores left, right e center definem o alinhamento horizontal.

Valign: valores top, middle e bottom definem o alinhamento vertical.

Nowrap: não há quebra de linhas dentro das células

Colspan: número de colunas que a célula irá ocupar

Rowspan: número de linhas que a célula irá ocupar

Width: largura da célula, em pixels ou valor percentual

<th> Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquer célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito.

Atributos: os mesmos apresentados acima, para td

TAG O QUE FAZ

<form> Define um formulário

Atributos

method: get, que envia as informações na própria URL, ou post, que envia de forma não visível para o usuário

action: url que será chamada, a priori um aplicativo capaz de tratar os dados enviados pelo formulário (PHP, ASP, JSP).

<input> Define uma entrada de dados

Atributos

Type: text, campo tipo texto; password, para senhas; hidden, não aparece para o usuário; checkbox, para marcar; radio, para escolher entre um conjunto de opções. submit cria um botão para enviar os dados e reset um botão para limpar o formulário.

Page 123: Html css javascript

Web, HTML, CSS e JavaScript

123 2007 Alfamidia Prow LTDA.

Name: nome do campo

Value: valor pré-definido para o campo

Size: tamanho do campo a ser exibido

Maxlength: tamanho máximo de caracteres

Checked: para campos checkbox e radio, define como marcado

<textarea> Define uma entrada de texto com várias linhas

Atributos

Rows: número de linhas

Cols: número de colunas

<select> Define uma lista de opções para selecionar

Atributos

Name: nome do campo

Multiple: permite selecionar vários campos da lista

Site: define o número de linhas a serem exibidas

<option> Item de uma lista aberta

Atributos

Value: valor do campo se este item for selecionado

Selected: indica que este valor está selecionado

Page 124: Html css javascript

Web, HTML, CSS e JavaScript

124 2007 Alfamidia Prow LTDA.

Unidade 18 - Anexo 2 Frames

18.1 Estrutura Básica - Frameset

O "Frame Document" é um arquivo onde se define a estrutura das janelas para seu

hiperdocumento em HTML. Quantas serão e qual sua distribuição em tela. Neste

documento as marcações <body> e seu par </body> são substituídas por <frameset> e

</frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nível

na estrutura do seu serviço de informações baseado em WWW.

Pronto, agora é preciso definir cada frame/janela internamente à(s) área(s) de frameset.

Ou seja, as características de cada janela e seus "conteúdos" - URL incial. Cada

janela/frame é antecedido da marcação <frame>, como numa lista cada item é antecedido

por <li>. Usualmente, uma URL virá associada a cada frame.

A estrutura mínima do frame document será então:

<html>

<head>

<title></title>

</head>

<frameset ...>

<frame src="URL">

<frame src="URL">

</frameset>

</html>

Atenção: Note que com apenas essas

marcações o documento da estrutura - Frame

Document - não funciona. É necessário que

esteja definido algum atributo para as áreas

de frameset, assim como associadas urls a

cada frame, como veremos mais adiante.

Atenção II: Você poderá ter - e

provavelmente terá - vários <frameset>

intercalados. Da mesma foma como é

possível intercalar listas, ou tabelas em

HTML.

Cada uma destas marcações - <frameset> e <frame> - aceita extensões, valores e

atributos, como veremos a seguir.

Page 125: Html css javascript

Web, HTML, CSS e JavaScript

125 2007 Alfamidia Prow LTDA.

18.1.1 Atributos de Frameset

Frameset aceita os atributos ROWS e COLS, referentes divisões horizontais(como linhas

em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a

marcações FRAMESET só poderão aparecer outras FRAMESET, FRAME ou

NOFRAMES.

Importante: Não podem ser utilizadas as marcações válidas entre marcações

<BODY></BODY> nem internamente a marcações FRAMESET, nem antes dela, senão

FRAMESET será ignorada.

ATRIBUTOS

1. ROWS (<frameset rows=“valor, valor, valor...”>)

Define divisões horizontais.entre janelas. Vem sempre acompanhado de valores

associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada

janela a ser criada deverá haver um valor associado. Estes valores devem vir separados

por vírgulas.

Este valor poderá ser:

Numérico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou janela)

deve ocupar. A desvantagem desta notação é que não é possível ter controle do valor total

de pixels que o cliente do usuário compreende.

Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual, sempre

somando um valor de 100%.

É o método mais simples.

Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o

primeiro frame vai ocupar dois terços da tela, e o segundo um terço.

Exemplos :

1. Para dividir a tela do browser em três janelas horizontais, sendo que a do meio é mais

larga que as de cima e de baixo:

Page 126: Html css javascript

Web, HTML, CSS e JavaScript

126 2007 Alfamidia Prow LTDA.

<html>

<head>

<title></title>

</head>

<frameset rows="20%, 60%, 20%">

<frame src="cell1.html">

<frame src="cell2.html">

<frame src="cell3.html">

</frameset>

</html>

2.Três janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o

frame central deverá ocupar o restante do espaço:

<html>

<head>

<title></title>

</head>

<frameset rows="30, *, 50">

<frame src="cell1.html">

<frame src="cell2.html">

<frame src="cell3.html">

</frameset>

Page 127: Html css javascript

Web, HTML, CSS e JavaScript

127 2007 Alfamidia Prow LTDA.

</html>

Page 128: Html css javascript

Web, HTML, CSS e JavaScript

128 2007 Alfamidia Prow LTDA.

2. COLS (<frameset cols=“valor, valor, valor.. “>)

Funciona exatamente como a marcação anterior, no entanto, divide a tela em frames ou

janelas verticais.

Exemplos

Para dividir a tela do browser em três janelas verticais

1.Três colunas, sendo que a do meio é mais larga que as de cima e de baixo:

<html>

<head>

<title></title>

</head>

<frameset cols="20%, 60% ,20%">

<frame src="cell1.html">

<frame src="cell2.html">

<frame src="cell3.html">

</frameset>

</html>

Page 129: Html css javascript

Web, HTML, CSS e JavaScript

129 2007 Alfamidia Prow LTDA.

2.Três janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame

central deverá ocupar o restante do espaço:

<html>

<head>

<title></title>

</head>

<frameset cols="200, *, 100">

<frame src="cell1.html">

<frame src="cell2.html">

<frame src="cell3.html">

</frameset>

</html>

Atenção, para intercalar janelas verticais e horizontais, será necessário definir várias

áreas "FRAMESET". Para cada área delimitida como "FRAMESET" você poderá definir

número de linhas OU colunas. Veremos como fazê-lo mais adiante. Não é possível

definir COLS e ROWS para uma mesma área “FRAMESET”.

Page 130: Html css javascript

Web, HTML, CSS e JavaScript

130 2007 Alfamidia Prow LTDA.

18.1.2 Frame

A marcação FRAME define cada janela contida em uma área “frameset”. Esta marcação

não necessita de uma tag de finalização (</frame>) e aceita 6 atributos possíveis:

1. SRC="url"

O atributo SRC define a URL que será exibida em cada frame.

2. NAME="nome_da_janela"

Este atributo é utilizado para associar um nome a uma janela. Deve ser usado quando uma

janela - frame - for o destino de um link em outro documento (normalmente é no mesmo

documento. Um frame apontando para outro. Tipo um índice abrindo várias urls em

outras janelas).

Este atributo é opcional. Por padrão, os frames não tem nome.

Importante, o nome_da_janela deve começar por caracter alfanumérico.

3. MARGINWIDTH="valor"

Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distância

entre o conteúdo da página e as margens da janela. O valor associado será um valor

absoluto em pixels. O menor valor aceito será 1.

Este atributo é opcional, caso não venha definido, o browser usará o seu padrão para

definir as margens no frame/janela.

4. MARGINHEIGHT="valor"

Também é um atributo opcional. Funciona exatamente como o anterior, só que determina

as margens superior/inferior em cada frame.

5. SCROLLING="yes/no/auto"

Novamente, é um atributo opcional, que define se uma janela deve possuir barra de

rolagem ou não. Caso seja definido como YES, a janela sempre possuirá uma barra de

rolagem visível. Caso seja definido como NO, nunca haverá barra de rolagem. E,

finalmente, se vier como AUTO, o browser aplicará a barra quando necessário.

O padrão é AUTO, portanto, se o atributo scrolling não vier definido, o browser aplicará

a barra de rolagem, sempre que necessário.

6. NORESIZE

Page 131: Html css javascript

Web, HTML, CSS e JavaScript

131 2007 Alfamidia Prow LTDA.

Este atributo não possui valor associado. Quando ele não aparece, o usuário poderá

alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padrão é que

todas as janelas possam ter seu tamanho alterado. NORESIZE é opcional

Um frame, com todos os atributos definidos seria escrito assim, por exemplo:

<frame src=“http://www.empresa.com.br” name=“home” marginwidth=“5”

marginheight=“5” scrolling=“auto” noresize>

Page 132: Html css javascript

Web, HTML, CSS e JavaScript

132 2007 Alfamidia Prow LTDA.

Noframes

Esta marcação possibilita que se crie uma opção de navegação na página para quem não

possui um browser que entende frames.

Esta marcação aparece no documento de estrutura "Frame document", e sempre é usada

em pares (<noframes>.. conteúdo... </noframes>).

Quando o acesso for feito através de um browser que entenda frames, o que estiver entre

as marcações "noframes" será simplesmente ignorado.

Internamente a uma área "noframes" deverá ser usada a estrutura padrão de documentos

html (<head> </head>, <title> </title> <body> </body>, etc...).

Page 133: Html css javascript

Web, HTML, CSS e JavaScript

133 2007 Alfamidia Prow LTDA.

Um exemplo:

<html>

<head>

<title>Teste, uso de frames</title>

</head>

<FRAMESET ROWS="15%, 85%">

<NOFRAMES>

<body bgcolor="#000000" text="#ffff00" link="#ff0000" >

Bem-vindo a uma página de teste.<p>

Para acessá-la, você deve utilizar a versão 2.0 ou acima do <i>browser</i><a href="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</a>

</p>

<hr>

</body>

</NOFRAMES>

<FRAMESET COLS="25%, 75%">

<FRAME NAME="1" SRC="teste1.htm" NORESIZE>

<FRAME NAME="2" SRC="teste2.htm" NORESIZE>

</FRAMESET>

<FRAMESET COLS="30%, 70%">

<FRAME NAME="3" MARGINWIDTH="50" SRC="teste3.htm">

<FRAMESET ROWS="65%, 35%">

<FRAME NAME="4" SRC="teste4.htm" NAME="chat">

<FRAME NAME="5" SRC="teste5.htm">

</FRAMESET>

</FRAMESET>

</FRAMESET>

</html>

Page 134: Html css javascript

Web, HTML, CSS e JavaScript

134 2007 Alfamidia Prow LTDA.

Veja como ela é exibida, por exemplo, com o MOSAIC (não lê frame) e com o

INTERNET EXPLORER (lê frame).

MOSAIC - não lê frame INTERNET EXPLORER - lê frame

Links entre frames

A marcação TARGET, permite que se controle em qual janela um link específico será

exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela lateral

com uma espécie de indíce do serviço de informação e outra janela em que a navegação

propriamente dita vai ocorrer. Desta forma, o índice está permanentemente disponível

durante toda a consulta.

Para utilizar este recurso você deverá:

Atribuir um "name" a cada frame em seu "frame document" (name="valor").

No documento onde será criado um link, que vai aparecer em outra janela, ao criar o link,

acrescentar a marcação target="valor"" à âncora, da seguinte forma:

<a href="URL" target="valor">

Onde este valor é idêntico àquele associado à marcação name no frame document.

Exemplo:

Page 135: Html css javascript

Web, HTML, CSS e JavaScript

135 2007 Alfamidia Prow LTDA.

Page 136: Html css javascript

Web, HTML, CSS e JavaScript

136 2007 Alfamidia Prow LTDA.

O frame document deverá ser escrito assim: o documento que contém o índice de navegação

(barra.htm), será assim:

<html>

<HEAD>

<title>Apostila de HTML</title>

</head>

<frameset rows="30%, 70%">

<frame src="cell1.html" name=frame1>

<frame src="cell2.html" name=frame1>

</frameset>

</html>

<HTML>

<BODY>

<a href="pagina1.html" target=frame1>Link

1</a> -

<a href="pagina2.html" target=frame1>Link

2</a>

<a href="pagina3.html" target=frame1>Link

3</a>

</BODY>

</HTML>