Tecnologia WEB I - Instituto Siegen · minha ausência, meus pais Mirtes e Günter por terem criado meu caminho, aos meus alunos que viabilizaram este trabalho e a todos os autores

1

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Tecnologia WEB I Prof. Erwin Alexander Uhlmann

Dos princípios do HTML, estruturação com CSS e automação com Javascript

UHLMANN, Erwin Alexander. Dos princípios do

HTML, estruturação com CSS e automação com

Javascript. Instituto Siegen. Guarulhos, 2012.

2


Agradecimentos

Agradeço à minha esposa Kátia por entender

minha ausência, meus pais Mirtes e Günter por

terem criado meu caminho, aos meus alunos que

viabilizaram este trabalho e a todos os autores

de livros e bibliotecas que consultei para que

pudesse devidamente embasar este.

3


Sumário Agradecimentos ...............................................................................................................2

Introdução ....................................................................................................................... 6

Aula 1 .................................................................................................................................7

Pré-requisitos ................................................................................................................7

Software ....................................................................................................................7

HTML ............................................................................................................................ 9

Títulos ...................................................................................................................... 14

Aula 2 ............................................................................................................................... 16

Tabelas ........................................................................................................................ 16

Cores ........................................................................................................................ 17

Junção de colunas .................................................................................................. 17

Junção de linhas ..................................................................................................... 18

Linhas e colunas fundidas ...................................................................................... 18

Aula 3 ............................................................................................................................... 19

Listas ............................................................................................................................ 19

Listas ordenadas ..................................................................................................... 19

Listas aninhadas e mistas ....................................................................................... 19

Aula 4 ............................................................................................................................... 21

Formulários ................................................................................................................. 21

Exercício .................................................................................................................. 22

iFrame .......................................................................................................................... 22

Aula 5 .............................................................................................................................. 24

HTML 5 ....................................................................................................................... 24

Audio ....................................................................................................................... 25

Vídeo ........................................................................................................................ 25

4


Aula 6 .............................................................................................................................. 26

CSS .............................................................................................................................. 26

Seletores class e id ............................................................................................ 27

Listas ........................................................................................................................... 28

Aula 7 ............................................................................................................................... 31

CSS – Menu cascata .................................................................................................... 31

Aula 8 ...............................................................................................................................37

Float .................................................................................................................................37

Desenho com CSS .......................................................................................................... 40

Aula 9 .............................................................................................................................. 42

Javascript ................................................................................................................... 42

Alert ........................................................................................................................ 44

Aula 10 ............................................................................................................................ 48

Aritmética, controladores, repetidores e funções .................................................. 48

Conversões ............................................................................................................. 49

Operadores ................................................................................................................ 49

Igualdade, while, do…while, for. ......................................................................... 49

Temporizadores, Alert, Prompt, Confirm. ............................................................... 50

Aula 11 ............................................................................................................................. 54

Rollovers .................................................................................................................... 54

Como criar um menu de navegação? ................................................................... 54

Aula 12 ..............................................................................................................................57

Função Return ............................................................................................................57

Validação de campos ..................................................................................................57

Relógio ....................................................................................................................... 58

Aula 13............................................................................................................................. 59

5


Animações .................................................................................................................. 59

Bibliografia ...................................................................................................................... 61

6


Introdução O objetivo deste trabalho é introduzir as técnicas basilares para construção de um

website seguindo os preceitos e padrões definidos pelo W3C (www.w3c.br), o

esperado pelo mercado e que seja simples de produzir, manter e modificar.

http://www.w3c.br/

7


Aula 1

Pré-requisitos

Software

Amaya

Este é o software referência em edição da marcação HTML. Criado pelo W3C, o

Amaya é um editor WYSIWYG (What You See Is What You Get – Editor visual de

marcação HTML) que já aplica as definições do W3C com avisos de erros de

codificação ou desconformidades.

$ : Grátis.

Avaliação: -----

http://www.w3.org/Amaya/User/BinDist.html

8


Dreamweaver

Este é o melhor! O problema é que é pago, e bem pago. Este editor da Adobe tem

longa história de desenvolvimento. Atende diversas ferramentas que permitem até

um usuário com pouco conhecimento criar uma página, além de suporte à diversas

linguagens de programação e Banco de Dados.

http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=pt_br

$: US$ 229,00 (13/12/2011)

Avaliação: -----

Expression Web

A Microsoft definitivamente entrou para a briga dos editores web. Para encarar o

Dreamweaver ela lançou o Expression Web 4, que pode ser avaliado como uma

versão antiga, de uma ou duas gerações passadas, do software da Adobe. Pago mas

com diversos recursos, segue a linha do principal concorrente.

http://www.microsoft.com/expression/products/web_overview.aspx

$: US$149,00

Avaliação: -----

http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=pt_br

9


Existem diversos editores HTML, ao longo deste trabalho, iremos utilizar o Amaya,

pois além de gratuito é a referência.

HTML Hypertext Markup Language é o significado do HTML, isto é, uma linguagem de

marcação de hipertexto (texto comum também). O HTML básico segue a seguinte

estrutura:

<html> <!—Isto é um comentário em HTML. Aqui começa a página.--> <head> <!—Esta parte pertence ao cabeçalho--> <title>Título da página </title> </head> <body> <!—Aqui fica a parte visível do site--> <p>Olá, seja benvindo ao seu primeiro site!</p> <!—Você notou que as TAGs “<...>” sempre terminam com “</...>”?--> </body> </html> Agora é com você, Construa uma página usando o HTML com o título “Página

do...(seu nome)”, e com alguns conteúdos visíveis, seu são:

10


Página do XXX Æ em título 1. Como??? <h1>Página do XXX</h1>

Exercício de escrita em marcação HTML Æ em título 2. Como??? <h2>...</h2>

Exercício 1 Æ Título 3. Como??? Última chance! <h3>...</h3>

Então, posso ir colocando <hX> enquanto quiser títulos?

Não, você pode colocar de 1 até 6.

E por que devo colocar títulos?

GOOGLE!!! Se você não colocar títulos, ele não vai te ranquear devidamente, a isto

se chama SEO (Search Engine Optimization). Saiba mais em:

http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=35291

Outra coisa interessante, você notou que quando uma tag é aberta (<body>, <h1>)

outra a encerra (</body>, </h1>)? Mas nem todas são assim, as tags que marcam

conteúdos devem ser encerradas, as tags que são estruturantes, como <meta />,

<hr /> e outras se autoencerram. Como?

Vamos pegar o exemplo da linha horizontal, <hr />, depois da identificação da tag,

adicione um espaço uma barra e feche. O interessante desta tag, assim como

veremos em outras, você pode adicionar atributos. Vamos ver algumas (das 91

recomendas pelo W3C) tags e atributos:

Elemento Descrição Atributos

a Link accesskey = atalho de teclado (<a accesskey=”l’’...)

href = endereço de destino (<a href=”link.html”...)

name = nome do elemento (<a name=”nome”...)

target = onde vai abrir? _self, na mesma janela,

_blank, em uma nova janela,_parent, na janela pai,

_top, no topo do documento (<a target=”_blank”...)

tabindex = ordem de uso da tecla TAB para

usabilidade (<a tabindex=”0”...)

b Negrito <b>Palavra</b>

body Corpo background = “imagem.jpg”

http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=35291

11


bgcolor = cor de fundo (#FFFFFF)

text = cor de todo texto contido no body

link = cor dos links

vlink = links visitados

alink = links ativos

hlink = ao passar o mouse sobre

br Quebra de

linha

<br /> Æ Observe que este elemento não marca

nenhum texto, por isso se auto encerra.

div Divisão Uma div (<div>...</div>)deve conter uma classe (<div

class=”topo”>) e tudo o que for criado dentro desta

div irá obedecer o que foi criado na classe topo (Veja

mais em CSS)

em Ênfase Itálico

fieldset Caixa Cria um acaixa entorno de elementos comuns,

apenas visual.

form Formulári

o

Cria um elemento que o que estiver dentro dele,

exceto textos do formulário, será enviado.

method = post – envia os dados de forma oculta e

get que utiliza a url para enviar (veja mais na sessão

formulário)

h1 a h6 Título <h1></h1>

align = center, left, right, justify Æalinhamento do

texto

head Cabeçalho Informações sobre o documento como o nome,

documentos relacionados, idioma, autoria, palavras

chave, entre outros.

iframe Quadro Cria uma “janela” para outro documento

<iframe src=”documento.html” width=”100”

height=”100” scrolling=”auto|yes|no”

frameborder=”1”

align=”center|left|right|justify”></iframe>

12


img Imagem <img src=”imagem.jpg” width=”253” height=”128”

align=”bottom|middle|top|left|right” alt=”nome da

imagem” />

input Comunica

ção

Este é um elemento do formulário

<input

type=”text” = caixa de texto

password = senha

checkbox = caixa de “ticar”(tic|check)

radio = semelhante o check, mas permite apenas uma

opção

submit = botão de enviar

file = para procurar arquivos no seu micro

hidden = oculto. Para enviar informações.

Image = um botão com uso de alguma imagem

Button = sem ação, para uso do Javascript

li Lista Marcador ou numerador em associação com a ul ou

ol

ol Ordinate

list

Lista ordenada, numerada, associada ao li

option Opção Associada ao select

p Parágrafo <p></p>

Select Seleção <select><option

value=”XPTO”>XPTO</option>...</select>

O objetivo desta parte do curso é escrever – não é programar, HTML não é uma

linguagem, mas sim uma marcação– uma página web que seja válida, mas por que

validar uma página? Simples, todos navegadores abrirão? Todos funcionarão da

mesma forma? Todos recursos serão válidos e apresentarão os mesmos resultados?

Para validar uma página você deve estar de acordo com as regras definidas pelo

W3C - http://www.w3.org/ - e pode ser consultado seu escritório no Brasil -

http://www.w3c.br/ - e a validação pelo endereço - http://validator.w3.org/ -. PRESTE

http://www.w3.org/

http://www.w3c.br/

http://validator.w3.org/

13


ATENÇÃO! Estes endereços são de suma importância e merecem ser adicionados

como favoritos.

Crie a página e submeta-a, seja via endereço num servidor ou via upload. Se a página

estiver correta, o W3C lhe oferecerá um selo para o HTML,

certificando sua página.

Vamos criar a seguinte página:

Figura 1 - Primeira página HTML

Para tanto vamos começar pela estrutura básica.

1. <?xml version="1.0" encoding="iso-8859-1"?> Nesta linha o documento é especificado como xml, codificado para o padrão

europeu ocidental de fontes.

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

14


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE é o tipo de document – de novo??? Sim, ele também pode ser um

documento tipo... – html público, seguindo as regras do W3C.

3. <html xmlns="http://www.w3.org/1999/xhtml"> Aqui começa o html. Ele obedecerá aos padrões definidos pelo W3C no endereço

referenciado.

4. <head> Na head – que deve ser encerrada por </head> - estão as informações sobre o

documento, como título - <title>Aqui fica o título</title> - e as metatags.

5. <body> O body contém a parte visível do site.

Títulos

Para o título vamos utilizar a tag <h1>. Esta tag abre o título de maior tamanho e

encerra com </h1>, desta forma:

<h1>Tecnologia Web I</h1> Estes títulos podem ir de h1 à h6.

Para escrevermos os elementos textuais, vamos utilizar a tag <p>Texto</p>.

Existem diversos elementos textuais, mas vamos estuda-los aos poucos, conforme

necessidade.

Para navegar vamos utilizar a tag <a>link</a>. No entanto todo link deve ter um

endereço, assim vamos adicionar o parâmetro href que é o endereço de destino,

ficando <a href=”pagina.html”>Texto do link</a>. Podemos ainda informar

que o navegador poderá abrir uma nova página, na mesma somente no topo

quando dividida ou ainda na parte principal, usando o target, assim, <a

href=”paginas.html” target=”_parent”>nome do link</a>.

Assim como no link praticamente todas as tags de marcação aceitam mais

parâmetros formatadores como cores, tamanhos e alinhamento.

<h1><font color="#DD3333">Tecnologia Web I</font></h1>

15


Para quebra de linha vamos utilizar o <br /> e outro elemento interessante é a linha

horizontal <hr />. Note que a quebra de linha não aceita conteúdo

(<br>Texto</br>) nem aparece, por isso não há parâmetros, no entanto a tag hr

aceita, como <hr width=”75%” align=”right” />.

Para as imagens os navegadores interpretam como tal quando há a tag <img />. Ele

vai renderizar como imagem, então é preciso informar qual com o parâmetro src,

<img src=”imagem.jpg” />, podendo estar na raiz, numa pasta

(src=”pasta/imagem.jpg”) ou num endereço da internet

(src="http://www.w3.org/Icons/valid-xhtml10), além deste elemento é importante

informar o texto alternativo alt e as dimensões width e height.

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />

16


Aula 2

Tabelas Para as tabelas vamos construir um passo a passo. Toda tabela começa com a tag

<table>.

<table></table> - Abre a tabela

<tr></tr> - Abre a linha

<td></td> - Abre a linha

Vamos construir uma pequena tabela de 2 x 2.

Figura 2 - Tabela 2 x 2

<table border="0" width="50%"> <tr> <td bgcolor="#FF0000"> </td> <td bgcolor="#00FF00"> </td> </tr> <tr> <td bgcolor="#0000FF"> </td> <td bgcolor="#FFFF00"> </td> </tr> </table> Explicando:

<table border - borda com espessura 0 (invisível);

width=50% - ocupe metade da página;

<tr> - Linha;

<td> - coluna;

bgcolor – cor de fundo;

17


Cores Tabela 1 - Tabela de cores

Cor Código

Preto = black #000000

Branco = white #FFFFFF

Azul = blue #0000FF

Amarelo = yellow #FFFF00

Verde = green #008000

Lima = lime #00ff00

Marron = maroon #800000

Oliva = olive #808000

Azul Celeste = aqua #00ffff

Lilás = fuchsia #ff00ff

Cinza = gray #808080

Azul escuro = navy #000080

Roxo = purple #800080

Verde escuro = teal #008080

Cinza claro = silver #c0c0c0

Vermelho = red #FF0000

Junção de colunas

<table width="50%" border="1"> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

18


Junção de linhas

<table width="50%" border="1"> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Linhas e colunas fundidas

<table border="1" width="50%"> <tr> <td colspan="4"> </td> </tr> <tr> <td rowspan="2"> </td> <td colspan="2" rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td colspan="3"> </td> <td> </td> </tr> </table>

19


Aula 3

Listas As listas podem ser ordenadas (ordinate [ol]) e desordenadas (unordinate[ul]).

Vamos ver:

Listas ordenadas

1. Item 1

2. Item 2

3. Item 3

Código HTML

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Listas desordenadas

x Item 1

x Item 2

x Item 3

Código HTML

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Listas aninhadas e mistas

1. Item 1

1.1. Item 1.1

1.2. Item 1.2

2. Item 2

•Item 2.1

20


•Item 2.2

3. Item 3

3.1. Item 3.1

•Item 3.1.1

•Item 3.1.2

3.2. Item 3.2

Código HTML

<ol> <li>Item 1 <ol> <li>Item 1.1 </li> </ol> </li> <ol> <li>Item 1.2</li> </ol> <li>Item 2 <ul> <li>Item 2.1</li> <li>Item 2.2</li> </ul> </li> <li>Item 3 <ol> <li>Item 3.1 <ul> <li>Item 3.1.1</li> <li>Item 3.1.2</li> </ul> </li> <li>Item 3.2</li> </ol> </li> </ol>

21


Aula 4

Formulários Os formulários são os elementos de comunicação da Internet . Vamos estudar

alguns tipos e elementos.

Um formulário é iniciado com a tag <form> e se encerra com </form>. Para que se

enviem as informações, poderemos utilizar duas formas, GET e POST, sendo que a

GET utilizará a URL como meio de envio e a POST se valerá da comunicação direta

de envio de dados para o servidor via navegador, assim, as informações do GET

serão visíveis e reutilizáveis e as do POST ocultas e voláteis. Vamos ver:

<form method=”get” action=”aula4.html”> </form> O parâmetro action é obrigatório, pois conterá o endereço para onde as

informações serão enviadas.

Dentro do form iremos inserir os elementos à serem preenchidos, os inputs.

Texto

<input type="text" name="nome" size="50" />

Área de Texto

<textarea name=”mensagem” cols=”50” rows=”10”></textarea>

Checkbox

<input name="checkbox" type="checkbox" checked="checked" value="SIM!!! Desejo SPAMS!!!" />

22


Radio

<input type="radio" name="Genero" value="M" id="Genero_0" />

Menu

<select name="estado"> <option>Escolha</option> <option value="SP">São Paulo</option> <option value="MG">Minas Gerais</option> <option value="SC">Santa Catarina</option> <option value="RS">Rio Grande do Sul</option> </select>

Submit

<input type="submit" value="Enviar" name="enviar" />

Existem outros tipos, mas como dito anteriormente, vamos aprender

essencialmente o necessário para a confecção do site apresentado e complementar

quando da necessidade.

Exercício

Construa um formulário para envio de um currículo. O candidato deverá cadastrar

todos os dados necessários. Escolha um currículo como padrão e desenvolva.

Sugestão:

http://candidatos.infojobs.com.br/Candidate/CV/Insert1.aspx?utm_source=inf&

utm_medium=mail&utm_campaign=inf_mail_bienv_can

iFrame O iframe é um interessante comando presente no HTML para incluir uma página em

outra, isto significa que nosso formulário pode ser único e incluído em diversas

páginas. E? Bem, simples, e se o site tiver 100 páginas e seu cliente pede para incluir

ou excluir um item? Fazer 100 vezes??? iframe!

<iframe frameborder="0" scrolling="no" src="menu.html" height="15px"> </iframe>

http://candidatos.infojobs.com.br/Candidate/CV/Insert1.aspx?utm_source=inf&utm_medium=mail&utm_campaign=inf_mail_bienv_can

http://candidatos.infojobs.com.br/Candidate/CV/Insert1.aspx?utm_source=inf&utm_medium=mail&utm_campaign=inf_mail_bienv_can

23


Abra o iframe, indique a espessura de sua borda, se terá barra de rolagem, qual o

caminho da página que será incorporada e suas dimensões e por fim, encerre.

Simples!

24


Aula 5

HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e

padronização de plataformas e navegadores (motores).

Compare as estruturas do html4 e do 5, abaixo:

HTML 4 HTML 5 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> </head> <body> </body> </html>

<!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title></title> </head> <body> </body> </html>

É claro que são as duas estruturas base e validadas pelo W3C.

Veja um formulário em html5:

<form method="post" action="aula5.html"> Nome:<input type="text" name="nome" placeholder="Digite seu nome!" autofocus required /><br /> Idade:<input type="range" min="10" max="100" value="18" name="idade" required /><br /> Busca:<input type="search" name="busca" placeholder="Busca" /><br /> Telefone:<input type="number" pattern="\([0-9]{2})[\s][0-9]{4}-[0-9]{4}" name="telefone" /><br /> e-mail:<input type="email" required name="email" /><br /> <input type="submit" value="Enviar" /> </form>

25


Figura 3 – Formulário em HTML5

Audio <audio src="09 Midnight.mp3" controls="controls"></audio>

Vídeo <video src=”video.mp4” controls=”controls”></video>

26


Aula 6

CSS O CSS (Cascading Style Sheet), folha de estilo em cascata é uma codificação que

pode ser incluído ou à parte da codificação html. Ele tem este nome por permitir a

herança dos estilos de pai para filho, em cascata.

Basicamente o CSS obedece a seguinte estrutura:

Seletor {Propriedade: Valor} Ou seja...

O seletor é uma tag html ou uma classe que você poderá criar, como <h1>, <p>,

<img>, ou no caso das classes, .topo, .navegacao, .rodape. Note que as classes são

iniciadas com um ponto e NUNCA possuem acentos, espaços, caracteres especiais,

etc. Exemplos:

p { color: #FFFFFF} Todos os parágrafos da página html terão cor branca. Observe que no CSS os sinais

“<” e “>” não são escritos.

h1 { color: #000000; background-color: #ffff00; font-style: italic; text-align: right; } ou

img { float: left; padding: 5px; } No primeiro exemplo a cor dos títulos será preta, o background amarelo, com a

fonte itálica alinhada à direita, no segundo exemplo a imagem está alinhada à

esquerda, independente do texto, por isso o float e com um distanciamento de 5

pixels de qualquer objeto. Os dois casos são válidos, porém no primeiro, o ; separa

as instruções, assim como no segundo que está separado por linhas.

Há também os casos de multivaloração, como:

h1{ font-family: "Times New Roman"; color: #AAFFDD;

27


text-shadow: /*0.1em 0 0.2em #88AAFF,*/ -0.1em 0 0.2em #88AAFF, 0 0.1em 0.2em #88AAFF/*, 0 -0.1em 0.2em #88AAFF*/; font-size: 50px; text-align: center; } Veja o seletor text-shadow, que cria sombras no texto que ele trabalha da seguinte

forma: Deslocamento para a direita (para esquerda coloque um valor negativo),

para cima (adivinhe como faz para ser para baixo...), sua difusão, 0 para cópia

idêntica do texto e quanto maior o valor maior a difusão e por fim a cor. Ele pode

ter várias sombras, por isso é multivalorado.

Você viu o comentário /*...*/?

Quando a fonte tiver espaço no nome, adicione aspas.

Seletores class e id

Um seletor class aplica-se à toda gama que for identificada como pertencente à

uma classe, assim:

p.destaque {color: #ff0000; } Dentro de um parágrafo que possuir a classe destaque obedecerá à esta

configuração, exemplo:

<p class=”destaque”>Oferta!</p> Já para os seletores id, identificados pelo #, o css será aplicado somente à aquela

instância, assim:

#topo {font-family: Tahoma;} No html:

<div id=”topo”>Título</div> Quando queremos aplicar um design diferenciado à uma parte específica de uma

página, criamos as divs.

No CSS

.topo { font-family: "Eras Demi ITC"; font-size: 50px; color: #0099CC; background-color: #000066; } Alguns exemplos

28


/*Isto é um comentário*/ body{ margin: 0 0 0 0; background-color:#009966; font-family:Tahoma, Geneva, sans-serif; } h1{ font-family:"Times New Roman", Times, serif; font-size:50px; color:#009966; text-shadow:5px 5px 10px #FFF, -5px 5px 10px #FFF, 5px -5px 10px #FFF, -5px -5px 10px #FFF;/*exceto IE*/ } p:first-letter{ font-family:Tahoma, Geneva, sans-serif; color:#FFF; letter-spacing:0.5em; font-size:50px; text-shadow: 5px 5px 10px #ccc, -5px 5px 10px #ccc, 5px -5px 10px #ccc, -5px -5px 10px #ccc; } .classe_a{ margin:0 5px 10px 20px; padding:0 5px 10px 20px; background-color:#CCC; font-family:"Courier New", Courier, monospace; color:#003; } .classe_b{ background-color:#FFF; float:right; width:10%; } p{ border: solid 1px white; border-radius: 1em; box-shadow: black 0.5em 0.5em 0.3em; background:#FFF; }

Listas Vamos criar uma lista?

x Item 1 x Item 2 x Item 3 x Item 4 x Item 5

A codificação será assim:

HTML

29


<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> CSS

None Para fazer com que os pontos da lista sejam quadrados, escreva o CSS assim:

#navlist li { list-style-type: square; } Mas por quê???

Você notou no html que o id da lista é navlist? O CSS pode ser feito com um . no

lugar do #.Então os itens li dentro do navlist terão o tipo de estilo de lista quadrado,

square.

Ok, mãos à obra!

Crie listas com outros elementos como imagens e símbolos do word.

Agora vamos criar a seguinte lista:

Neste caso foram criadas linhas separadoras, vejamos o código

HTML

<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item um</a></li> <li><a href="#">Item dois</a></li> <li><a href="#">Número três</a></li> <li><a href="#">Item quatro</a></li> <li><a href="#">O ponto cinco</a></li> </ul> </div>

30


CSS

#navlist { padding-left: 0; margin-left: 0; border-bottom: 1px solid gray; width: 200px; } #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; } #navlist li a { text-decoration: none; }

31


Aula 7

CSS – Menu cascata Agora vamos elaborar um menu de navegação em cascata.

Primeiro precisamos elaborar uma lista de possíveis links em html.

<ul> <li><a href="#">link1</a> <ul> <li><a href="#">link1.1</a></li> <li><a href="#">link1.2</a></li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul> </li> <li><a href="#">link3</a> <ul> <li><a href="#">link3.1</a></li> <li><a href="#">link3.2</a></li> </ul> </li> <li><a href="#">link4</a> <ul> <li><a href="#">link4.1</a></li> <li><a href="#">link4.2</a></li> </ul> </li> </ul> O resultado deverá ser este:

32


O primeiro passo é eliminar os marcadores de texto. Crie um arquivo CSS e escreva:

ul { list-style:none;

} Agora vamos fazer com que os subitens(li) da lista (ul) fiquem ocultos.

li ul{ display:none; } Mas se ficarem ocultos, não vai ter graça, eles devem ser acessíveis!

li:hover ul { display:block; } Agora ele vai ficar se remoldando o menu em cada vez que eu passar sobre os itens?

li ul{ position: absolute; display:none; } Você reparou que é o mesmo item já anteriormente criado? A posição dele foi

definida como absoluta, ou seja, depende do valor inserido, como não há ainda, ele

obedece ao fim do parágrafo escrito, o link pai.

Adicione então, o comando left: 200px;, pois iremos definir que a largura do

menu será de 200 pixels, em ul, com o comando width: 200px;.

Agora vamos fazer o alinhamento dos subitens (li) dentro das uls. Espera! Não

entendi! Não era isso que foi criado?

A ul li vai comandar a ul pai e suas li. Já a li ul vai comandar os subitens, as

listas (ul) dentro das lis. Tem certeza? Vamos ver...

ul li{ position:relative; border:#CCC 1px solid; } li ul{ position: absolute; left: 200px; top: 0; display:none; background-color:#CCC; } Observe que não foram criados novos seletores, apenas adicionamos propriedades

aos já criados, com exceção da ul li.

33


Na ul li a posição é relativa ao site e adicionamos uma borda à ele, já na li ul, a

posição é absoluta, depois do bloco ul li e um background cinza para ilustrar onde

age cada seletor.

Mas e aquele top: 0;? Alinha o menu ao topo da ul li.

Agora começam alguns elementos de design que ajudarão na identificação.

Observe os seletores:

li:hover ul { display:block; } Ok, este já existia, nem vamos mais mexer nele.

ul li:hover{ background-color:#CCC; } Este é o novo, é o comportamento dentro da ul pai, no seletor li quando passar

sobre, pinte de cinza, afinal a ul dentro da li é cinza, (li ul).

Adicione o seletor valorado padding: 5px; na ul e na ul li.

ul li a{ display:block padding: 5px; } Para exibir os links.

Veja agora o código completo, para os efeitos visuais.

body{ margin 0 0 0 0; } ul{ list-style:none; border: #CCC 3px solid; width: 200px; padding: 5px; background-color:#FFF; } ul li{ position:relative; border:#CCC 1px solid; padding: 5px; } li ul{ position: absolute; left: 199px; top: 0;

34


display:none; background-color: #CCC; } ul li a{ display:block; text-decoration:none; padding: 5px; border: 1px solid #CCC; border-bottom:0; background-color:#CCC; } li:hover ul { display:block; } Remova a linha...

ul li:hover{ background-color:#CCC; } Não tem mais função, claro.

Cara, muito legal!!! Mas.... e se tiver mais um nível?

<ul> <li><a href="#">link1</a> <ul> <li><a href="#">link1.1</a></li> <li id="pre"><a href="#">link1.2</a> <ul id="sub"> <li><a href="#">link1.2.1</a></li> <li><a href="#">link1.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul> . . . . Esta parte foi adicionada. Veja que agora a ul tem um id e um li também.

Então fica fácil!

35


Adicione estas duas linhas, pois elas agem diretamente no item identificado(id).

ul#sub{ display:none; } li#pre:hover ul#sub{ display:block; } E se for horizontal?

CSS

body{ margin 0 0 0 0; } ul { list-style:none; border: #69C 3px solid; padding:3px; background-color:#CCC; width: 25%; text-align:center; border-radius: 2em; box-shadow:#000 10px 10px 10px; } li{ border: #FFF 1px solid; padding: 2px; background-color #CCC; } ul li{ display:inline; padding: 2px; } li ul{ display:none; position:absolute; padding: 3px; } li:hover ul { display:block; } .links a:hover{ color:#69C; text-decoration:underline; } HTML

36


<ul> <li><a href="#">link1</a> <ul> <li class="links"><a href="#">link1.1</a></li> <li><a href="#">link1.2</a></li> </ul> </li> <li><a href="#">link2</a> <ul> <li><a href="#">link2.1</a></li> <li><a href="#">link2.2</a></li> </ul> </li> . . .

37


Aula 8

Float O float é a flutuação de um objeto. Ele aceita somente o alinhamento à esquerda ou

à direta.

Crie uma imagem alinhada à esquerda e o texto à sua direita, assim:

Para este efeito o código será:

CSS

None HTML

<p> <img src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer... </p> Para alinhas o quadrado à direta, adicione o código:

CSS

.floatright { float: right; } HTML

<p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer... </p>

38


CSS

.floatright { float: right; } HTML


CSS

.floatright { float: right; margin: 0 0 10px 10px; } HTML


39


CSS

.floatright { float: right; margin: 0 0 10px 10px; border: 1px solid #666; } HTML


CSS

.floatright { float: right; margin: 0 0 10px 10px; border: 1px solid #666; padding: 2px; } HTML

<p> <img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer...

40


</p>

CSS

.floatright { float: right; margin: 0 0 10px 10px; border: 1px solid #666; padding: 2px; } HTML


Desenho com CSS Vamos desenhar um quadrado com quatro cores diferentes.

HTML

<div class="quadcolor" id="quadcolor"></div> O CSS

.quadcolor { width: 50px; height: 50px; border: 15px solid; border-color: #FF0 #00F #0F0 #F00; } E o resultado...

41


Ok. Se é possível construir com 4 bordas de cores diferentes e o centro vazio, por

que não com 2 cores diferentes e sem centro?

HTML

<div class="triangulo" id="triangulo"></div> E o CSS

.triangulo{ width: 0; height: 0; border-bottom: 50px solid; border-left: 50px solid; border-right: 50px solid; border-top: 50px solid; border-color: #009966 #009966 #F00 #F00; } E se quiséssemos

Criar um triangulo não triangulo-retângulo?

42


<HTML> <HEAD> <TITLE>Titulo</TITLE> </HEAD> <BODY> </BODY> </HTML>

Aula 9

Javascript Vamos aprender passo-a-passo. Então, para quê o JAVASCRIPT?

O Javascript é uma linguagem tipo script, ou seja, é

interpretada linha a linha, para executar funções em

seu navegador, esteja ele online ou não.

Agora que conhecemos o HTML e o CSS, podemos

entender um pouco mais de Javascript.

A estrutura HTML segue um padrão único. Dentro desta estrutura vamos posicionar

nosso Javascript. Primeiramente no próprio arquivo HTML, depois em um arquivo

externo.

De forma geral os scripts podem ser escritos dentro da HEAD, por uma razão

simples. ORGANIZAÇÃO! Organize-se, chega de ser bagunceiro!

Mas e se eu colocar fora?

Vai funcionar do mesmo jeito, mas naquela bagunça. Onde é HTML, CSS, PHP, JS....

O script se escreve assim:

<script> e terminamos com </script> Mas que tipo de script?.... Ok, vamos especificar então.

<script type="text/javascript"> e encerrado simplesmente com </script>,

ok?

Mas nem todo lugar precisa ter uma inscrição de script, como dentro das TAGs

HTML que já aceitam o Javascript por natureza de seus navegadores.

O JavaScript pode escrever frases no navegar e deve ser chamado com o

manipulador de eventos do HTML onload, dentro do body, veja:

<script type="text/javascript">

43


function olaMundo() { var msg = "Olá Mundo!!!"; document.open(); document.write(msg); document.close(); } </script> E no body…

<body onload="olaMundo()"> Você também pode associar funções, como o caso do alert.

<body onload="alert('Olá mundo!');"> Outros manipuladores de eventos:

onclick = quando o mouse clicar sobre o item;

onmouseover = quando o mouse passar sobre o elemento;

onmouseout = quando o mouse sair sobre o elemento;

onfocus = quando o elemento receber o foco, seja pelo mouse ou pelo teclado;

onblur = quando o elemento perder o foco.

Estes manipuladores podem ser associados ao body ou ao img, afinal são associados

ao carregamento de algo.

Vamos lá, respire fundo, tome muita coragem e teste! Teste até doer, mas teste!!!

Incrível não? Até você deve estar se achando inteligente, mas calma, as coisas não

acabaram faltam muitas páginas...

Agora vamos escrever um pouco. Um texto pode ser escrito pelo JavaScript da

seguinte forma:

1. <script type="text/javascript"> 2. //Isto é um comentário de uma linha 3. /*E este é 4. de múltiplas linhas.*/ 5. document.write("Código JavaScript"); 6. </script>

44


Alert

A função alert serve para situações em que o usuário deverá ver o alerta, como no

preenchimento de formulário ou ao ler um texto.

Escreva!

<script type="text/javascript"> alert("Clique em 'OK' para formatar seu micro!"); </script> Observe que a palavra OK está com aspas simples, isto por que se você colocar

aspas duplas o texto se encerrará ali! Dentro das aspas duplas, somente as simples.

Compreendeu 02?

Mas e se eu quiser que o texto tenha aspas duplas? Simples! Adicione \ antes das

aspas duplas, assim.

alert("Clique em \"OK\" para formatar seu micro!"); Então quer dizer que se eu escrever vai aparecer esta janela?

Figura 4 – Alert

E onde é que eu escrevo?

Se você escrever antes do <title> antes dele o popup irá se apresentar, se escrever

antes do <body>, adivinhe! Então escreva onde melhor lhe convir!

Quer uma boa sacada?

Como funciona o carregamento do HTML?

O desafio é fazer aparecer um popup explicativo para cada parte (antes dela) a ser

carregada.

Então vamos fundir o CSS aprendido antes com o Javascript.

45


Crie um formulário com 2 botões para alterar o visual e carregar CSSs diferentes.

Vamos criar um CSS assim:

1. body{ 2. margin: 0 0 0 0; 3. background-color: #99DDFF; 4. } 5. .caixa1{ 6. background-color: #88AAFF; 7. width: 100px; 8. height: 100px; 9. position: absolute; 10. top: 150px; 11. left: 50px; 12. border: solid navy 2px; 13. } 14. .caixa2 { 15. background-color: #009966; 16. width: 300px; 17. height: 400px; 18. position: absolute; 19. top: 150px; 20. left: 200px; 21. border: dashed #00FF99 2px; 22. font-family: 'Times New Roman',Times,serif; 23. font-size: 50px; 24. text-align: center; 25. color: white; 26. }

No HTML vamos criar duas DIVs, assim:

1. <?xml version="1.0" encoding="iso-8859-1"?> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <html xmlns="http://www.w3.org/1999/xhtml"> 5. <meta http-equiv="content-type" content="text/html; charset=iso-

8859-1" /> 6. <title>Tecnologia Web I - Javascript</title> 7. <!—-Link o CSS à página --> 8. <link rel="stylesheet" href="twi.css" type="text/css" /> 9. </head> 10. <body> 11. <h1>Tecnologia Web I - Javascript</h1> 12. <hr id="hrsup" width="75%" /> 13. <div class="caixa1" id="cx1">Leia a primeira linha<br

/>EWM3</div> 14. <div class="caixa2" id="cx2">Agora você consegue ver?<hr

/>EWM3<hr /> CEGO!!!</div> 15. <!—formulário --> 16. <form action=""> 17. <input type="button" value="Visual 1"

onclick="visual1();"></input> 18. <input type="button" value="Visual 2"

onclick="visual2();"></input> 19. </form>

46


20. <hr id="hrinf" width="75%" /> 21. </body> 22. </html>

Agora vamos criar o script para interagir com o HTML, na HEAD.

<script type="text/javascript"> //função 1 function visual1(){ var tipo = document.getElementById('cx1'); if(tipo.style.visibility == 'hidden') tipo.style.visibility='visible'; else tipo.style.visibility='hidden'; } //função 2 function visual2(){ var tipo = document.getElementById('cx2'); if(tipo.style.display=='none') tipo.style.display='inline'; else tipo.style.display='none'; } </script> Na função 1, primeiro crie a função. visual1.

Crie uma variável chamada tipo. À esta variável vamos pedir gentilmente ao

javascript para localizar neste document o elemento cx1 com o uso da função

getElementById, que como diz o nome, seleciona o elemento pelo id.

Com o uso da função if (SE), com a seguinte condição, se a variável tipo, a style

visibility for igual à hidden, ou seja, se estiver oculta, estabeleça como visible,

se não (ELSE), esconda (hidden).

A função 2, é semelhante, porém utiliza as funções CSS display. A diferença é que a

visibility esconde o conteúdo, mas mantém a área da camada da DIV e a display

oculta tudo, conteúdo e camada.

Por fim, para efeito de validação junto ao W3C, para permitir a validação com o

Javascript na forma correta, seu comentário indicativo de javascript é:

<script type="text/javascript"> //<![CDATA[ function ... e encerrado;

//]]> </script>

47


E caso o navegador não possua o Javascript habilitado, use a função

<noscript></noscript> com uma frase indicando que o Javascript não está habilitado

para este navegador.

48


Aula 10

Aritmética, controladores, repetidores e

funções A aritmética é simples!

<script type="text/javascript"> //<![CDATA[ //aritmética //A função receberá os controles desejados e será chamada por algum disparador function resultado(){ //Crie as variáveis e atribua valores à elas var b1 = 5; var b2 = 6; //Realize a operação var resultado = ((b1+b2)/2); //diga como mostrar o resultado alert(resultado); } //]]> </script> E este é o disparador:

<p onclick="resultado();">Calcule!</p> Também podemos criar, no lugar do alert, o document.write();.O que se deve

prestar atenção é que o segundo modo, quando na head, ele deve abrir, escrever e

fechar, senão irá ficar carregando indefinidamente, experimente:

<script type="text/javascript"> //<![CDATA[ //aritmética function resultado(){ var b1 = 5; var b2 = 6; var resulta = (b1+b2)/2; //alert(resultado); //document.open(); document.write(resulta); //document.close(); } //]]> </script> Remova os comentários das funções document.open(); e document.close(); e

teste novamente.

49


Conversões <script type="text/javascript"> var numero; document.write("<p>"+typeof(numero)+"</p>"); numero = 5.5; document.write("<p>"+typeof(numero)+"</p>"); numero = "TecWebI"; document.write("<p>"+typeof(numero)+"</p>"); numero = true; document.write("<p>"+typeof(numero)+"</p>"); //concatenar numero = "34"; document.write("<p>"+(numero+1)+"</p>"); //aritmética numero = "34"; document.write("<p>"+(30+numero-1)+"</p>"); numero = "34"; document.write("<p>"+(Number(numero)+1)+"</p>"); numero = "34twi"; document.write("<p>"+(parseFloat(numero))+"</p>"); numero = "34.5"; document.write("<p>"+(parseInt(numero))+"</p>"); </script>

Operadores

Igualdade, while, do…while, for.

<script type="text/javascript"> //<![CDATA[ //primeiro se declara a variável, que pode ter ou não um valor atribuído var A; var B; //agora atribua um valor às variáveis A = 10; B = A - 5; alert("O valor de B é: "+B); function operIgual(){ var numA = 3.0; var numB = "3.0"; //nomeDaVariável = (condição) ? valorSeVerdadeiro : valorSeFalso; if(numA == numB){ alert("São \"inguais quenem\"!!!"); } else{ alert("São \"indisiguais\" um do outro nos dois!"); } } //Operador de igualdade de valor e de string (===) function operFullIgual(){ var numC = 3.0; var numD = "3.0"; if(numC === numD){

50


alert("São inguais quenem!!!"); } else{ alert("São indisiguais um do outro nos dois!"); } } //operador lógico (>, <, >=, <=) function operLogico(){ var numE = 5; var numF = 10; var comparCondic = (numE >= numF) ? "O valor de numE ("+numE+") é menor que "+numF : "O valor de numE ("+numE+") é menor que "+numF; alert(comparCondic); } //while function operEnquanto(){ var numG = ""; var numH = 5; while (numH <= 10){ numG+=numH; numH++; } alert(numG); } //do...while function operPorEnquanto(){ var numI = ""; var numJ = 15; do{ numI+=numJ; numJ++; } while (numJ <= 20); alert(numI); } //for function operFor(){ for (var numK = 0; numK < 10; numK++){ document.writeln(numK); } } //]]> </script>

Temporizadores, Alert, Prompt, Confirm. Os temporizadores são funções interessantes que podem ter diversas aplicações,

desde animações, repaginações até interações com o usuário.

Vamos começar a construir um javascript e adicionar o comando setTimeout que

dispara APENAS UMA VEZ.

<script type="text/javascript"> //<!CDATA[ function tempoAlertaUnico(){

51


setTimeout("alert('Então, dormiu? Vamos trabalhar?');", 5000); } //]]> </script> Claro, toda função pressupõe um disparador, um manipulador de evento. Vamos

utilizar o manipulador de evento onload no body.

<body onload="tempoAlertaUnico();"> Já o temporizador setInterval é disparado indefinidamente.

function tempoAlertaConstante(){ setInterval("alert('Alerta a cada 5 segundos');", 5000); } Como regra geral, os temporizadores funcionam com a seguinte sintaxe:

função("ação", tempo); Trabalho:

Crie uma página com um smile e depois de 10 segundos ele ficará triste.

Agora vamos fazer o seguinte, não basta o smile ficar triste, se o usuário deixar de

interagir ele ficará triste. Para interagir vamos criar um prompt box em que o

usuário irá escrever seu nome.

function cumprimento(){ var usuNome = prompt("Qual seu nome?", "Digite seu nome aqui, por favor..."); var comprNome = usuNome.length; if(usuNome!=""){ alert("O nome "+ usuNome +" tem "+comprNome+" letras."); } } Como dito antes, pelo fato de ter sido criada uma função (function) deve ser

criado um gatilho.

<p onclick="cumprimento();">Clique aqui e saiba!</p> Agora que você já conhece os passos, crie um site que o smile apareça sorrindo, se

em 10 segundos o usuário não interagir, ele ficará triste, mas se interagir, ele deve

voltar a ficar feliz.

Claro, eu sei que você espera a resposta, mas pense antes de ver.

.

.

52


.

Vai desistir?

.

.

.

<html> <head> <title>TecWeb I - Javascript - Aula 4</title> <link rel="stylesheet" href="twi.css" type="text/css" /> <script type="text/javascript"> //<!CDATA[ function demora(){ setTimeout("document.getElementById('ovo').src='img/ovo.gif';", 5000); } function cumprimento(){ var usuNome = prompt("Qual seu nome?", "Digite seu nome aqui, por favor..."); var comprNome = usuNome.length; if(usuNome!=""){ alert("O nome "+ usuNome +" tem "+comprNome+" letras."); document.getElementById('ovo').src='img/ovo_sorrindo.gif'; setTimeout("document.getElementById('ovo').src='img/ovo.gif';", 5000); } } //]]> </script> </head> <body onload="demora();"> <p>Quantas letras tem seu nome?</p> <p onclick="cumprimento();">Clique aqui e saiba!</p> <img alt="Ovo" src="img/ovo_sorrindo.gif" id="ovo" /> </body> </html> Por fim, vamos aprender o confirm. Os valores do confirm são: false e true.

Vamos fazer uma instrução simples, ao passar o mouse sobre a figura, ele emitirá

um comfirm box com um pergunta simples, assim:

function confirma(){ var confirma = confirm("É sua última chance, vou ficar triste!"); if(confirma == true){ history.back(); }

53


Então, ficou assim, se o usuário responder OK, ou seja, true, se ele concorda com a

pergunta, ele retornará à página anterior (history.back), caso contrário, o tempo

continua, a fila anda!

Aprendeu?

Agora é o seguinte, se em 10 segundos o usuário não responder corretamente a

pergunta, ele voltará uma página. Utilize as funções history.back, prompt, if/else

e temporizadores.

Tente!

Agora vamos tentar adicionar uma função bem interessante: Redimensionar o

conteúdo conforme o tamanho o browser.

Na mesma página vamos fazer o seguinte:

function adapta(){ document.getElementById('ovo').style.height="50%"; } E vamos adicionar o manipulador de evento onresize no body.

<body onload="demora();" onresize="adapta();"> SIM! Podemos ter dois manipuladores!!!

Experimente!

54


Aula 11

Rollovers

Como criar um menu de navegação?

Bem o primeiro passo é criar os botões, precisaremos de 3 imagens, uma para o

botão normal, outra para quando o passar o mouse sobre a imagem para que ela

pareça que salta e a terceira para quando pressionado.

O rollover é bem simples, precisamos primeiro exibir uma imagem, assim:

<img alt="Ovo" src="img/ovo.gif" id="ovo"> Agora vamos adicionar um manipulador de evento onmouseover.

…onmouseover="this.src='img/ovo_sorrindo.gif';"> Nesta linha dentro do manipulador adicionamos o this para chamar o objeto

onmouseover [quando um manipulador chama uma função ele deve ter o nome

dela, quando não há função, atribui-se o this], o src, tem a mesma função do html,

para informar qual imagem e onde ela se encontra.

Verifique se funcionou!

Para que haja a troca ao passar o mouse sobre o botão, adicione o manipulador

onmouseout.

...onmouseout="this.src='img/ovo.gif';"> Verifique!

Agora, para os botões funcionem como tal, vamos adicionar a função de

redirecionamento com o manipulador onclick.

…onclick="location.assign('endereco.html');"… Ok, mas eu estava reparando e a imagem demora para trocar, não é?

Para evitar que a imagem só troque depois de carregada, vamos adicionar o

seguinte script:

<script> var img1 = new Image();

55


img1.src="img/img1.gif"; var img2 = new Image(); img2.src="img/oimg2vo_sorrindo.gif"; </script> E no html, basta substituir as imagens de:

onmouseover="this.src='img/ovo_sorrindo.gif';" por:

onmouseover="this.src=ovoSorrindo.src;" E para finalizar, ao clicar, chamaremos a 3ª imagem:

onmousedown="this.src='img/img3_pressionado.gif';"> Mas aprender a dar más vindas ao site é fácil, eu quero resolver problemas!!!!

Ok, então o problema é esse: Você foi contratado para trabalhar numa agência de

webdesign a designwebdesign e a página de um de seus clientes não estava lá

grande coisa...

O símbolo do cliente, um OVO, deveria interagir com as pessoas ao entrar. O cliente

também queria que a pessoa fosse ao menos cumprimentada, pelo nome, claro. O

que devemos pensar então?

1. Crie o HTML; 2. Vamos criar uma função chamada clicaOvo. Assim: function clicaOvo();

Toda função tem os parênteses para poder neles, inserir os parâmetros da

função.

3. Dentro desta função vamos criar uma variável para receber o nome do caboclo, conforme o cliente pediu, assim: var usuario.

var é a função que cria uma variável e usuario (sem acento) é o nome da variável.

a. Nesta variável vamos adicionar o comando prompt que irá abrir uma caixa que permitirá o usuário escrever seu nome, assim: prompt();

Quer pronto? Então sofra!

1. <HTML> 2. <HEAD> 3. <TITLE>Tecnologia Web I</TITLE> 4. <link rel="stylesheet" href="twi.css" type="text/css" /> 5. <script type="text/javascript"> 6. function clicaOvo () {

56


7. var usuario = prompt("Diga seu nome, o mané!", "Adivinha onde você deve escrever, estúpido... É! Aqui!!! Homo Sapiens nem tão Sapiens...");

8. if (usuario) { 9. alert ("O... "+usuario + ", boa sorte. Você vai precisar..."); 10. document.getElementById("ovoimg").src = "img/ovo_sorrindo.gif"; 11. } //Você consegue reparar na linha 6, onde abre a funcition? Veja que lá é aberta a

primeira chave"{" que é fechada aqui. 12. } //E na linha 8 é a berta a segunda, que se encerra aqui. Dãããããã... 13. </script> 14. </HEAD> 15. <BODY onload="alert('Olá mundo!');"> 16. <h1>Tecnologia Web I</h1> 17. <img src="img/ovo.gif" id="ovoimg" alt="Ovo" onclick="clicaOvo();" /> 18. </BODY> 19. </HTML>

57


Aula 12

Função Return Quando queremos que uma função retorne algum valor, utilizamos a declaração

return, a qual tem o papel de especificar o valor retornado pela função.

function calculo(valor1,valor2) { total = valor1 * valor2; return total; } // Chamando a função através do alert(). alert(calculo(58,10)); ou

<input type="text" onblur="return calculo();">

Validação de campos A validação dos campos é simples. Leia o conteúdo de um campo em um formulário,

compare com o os dados desejados e retorne a resposta. Vamos passo a passo.

Em um formulário simples:

<form name="form" method="post" action="teste.html"> <label>Nome:</label><br /><input name="nome" type="text" /><br /> <label>e-mail:</label><br /><input name="email" type="text" /><br /> <input name="enviar" type="submit" value="Enviar" /> </form> Note que o nome do formulário é form e os campos estão devidamente nomeados.

Agora vamos criar a validação no javascript.

function validaCampos(){ var nome = document.form.nome.value; if(nome==""||nome==null||nome.lenght<=3){ alert("Ops. O campo nome precisa ser preenchido!"); return false; } Ok. Para o campo e-mail você também pode utilizar a função indexOf(“”), assim:

if(email==""||email==null||email.length<=5||email.value.indexOf('@')==-1||email.value.indexOf('.')==-1){ indexOf(‘@’) pode ser comparado com ==-1 (caso não haja) ou também <1

Crie a validação para este campo!

58


Ótimo! Gostei, mas sinceramente, se eu quiser criar um objeto para diversos

formulários?

Bem, neste caso, pode ser que não saibamos quantos campos tem um formulário,

logo, precisamos contá-los!

function contaCampos(){ var x = document.form; for(var i=0;i<x.length;i++){ alert(x.elements[i].name); } } Chame-o com o manipulador de eventos no form assim:

<form name="form" method="post" action="teste.html" onsubmit="return contaCampos();"> Agora vamos juntar as funções e fazer a validação para qualquer formulário!

function validaCampos(){ var local = document.form;//form é o nome do formulário! for(var i=0;i<local.length;i++){ if(local.elements[i].value==""){//elements=elementos! alert("Ops.... O campo "+local.elements[i].name+" precisa ser preenchido!"); return false; } } } E chame-o no formulário!

<form name="form" method="post" action="teste.html" onsubmit="return validaCampos();">

Relógio <script type="text/javascript"> function relogio(){ momentoAtual = new Date(); hora = momentoAtual.getHours(); minuto = momentoAtual.getMinutes(); segundo = momentoAtual.getSeconds(); imprimir = hora + " : " + minuto + " : " + segundo; document.form_relogio.relogio.value = imprimir; setTimeout("relogio()",1000); } </script> ... <body onload="moveRelogio()">

59


Aula 13

Animações <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>TecWeb I - Javascript - Aula 5</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <link rel="stylesheet" href="twi.css" type="text/css" /> <script type="text/javascript"> //<![CDATA[ //toda function precisa de um manipulador de evento //neste caso, o manipulador está na própria função(onload) //------------------------------------------------------------ window.onload=function (){ //estabeleça a cor de fundo à DIV bloco document.getElementById("bloco").style.backgroundColor="#99DDFF"; //com o setTimeout, em 300 milisegundos, mude o valor para 255 setTimeout("mudaCor(255)",300); } //------------------------------------------------------------ //crie uma função com uma variável chamada novaCor function mudaCor(novaCor){ //crie uma variável valHexa com a função toString(16) //esta função serve para transformar os valores em hexadecimal var valHexa = novaCor.toString(16); //quando os valores atingirem números menores que 2 dígitos (100, 99, 98...) if (valHexa.length < 2){ //adicione um 0 à ele valHexa= "0" + valHexa; } //adicione este valor à codificação da cor, na posição desejada //"#" + valHexa + "ffff" //"#ff" + valHexa + "ff" //"#ffff" + valHexa + "ff" var valorDaCor = "#" + valHexa + "ffff"; var divBloco = document.getElementById("bloco"); divBloco.style.backgroundColor=valorDaCor; //se a nova cor criada for maior que 0, ou seja, o fim do processo if (novaCor > 0){ //decremente 5 do valor novaCor-=5; //e altere bruscamente a cor, em 50 milisegundos setTimeout("mudaCor(" + novaCor + ")", 50); } } //]]> </script> </head> <body> <div id="bloco">

60


<h1 id="titulo">Tecnologia Web I - Javascript - Aula 5</h1> <hr id="hrsup" width="75%" /> <img alt="Ovo" src="img/ovo_sorrindo.gif" id="ovo" /> <p></p> </div> <a href="js_aula4.html">Aula 4</a> | <a href="js_aula6.html">Aula 6</a> <hr id="hrinf" /> </body> </html> Agora o código limpo

<script type="text/javascript"> //<![CDATA[ window.onload=function (){ document.getElementById("bloco").style.backgroundColor="#FFFFFF"; setTimeout("mudaCor(255)",1000); } function mudaCor(novaCor){ var valHexa = novaCor.toString(16); if (valHexa.length < 2){ valHexa= "0"+valHexa; } var valorDaCor = "#FFFF"+valHexa; var divBloco = document.getElementById("bloco"); divBloco.style.backgroundColor=valorDaCor; if (novaCor > 0){ novaCor-=5; setTimeout("mudaCor(" + novaCor + ")", 50); } } //]]> </script>

61


Bibliografia HOGAN, Brian P. Web Design para Desenvolvedores. Rio de Janeiro. Editora Ciência

Moderna, 2011.Pressman, Roger S. Engenharia Web. Rio de Janeiro. LTC, 2009.

PRESSMAN, Roger S. Engenharia Web. Rio de Janeiro. LTC, 2009.

CYBIS, Walter. Ergonomia e Usabilidade: conhecimentos, métodos e aplicações. São

Paulo. Novatec, 2007.

SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por

folhas de estilo em cascata. São Paulo. Novatec, 2008.

POWERS, Shelley. Aprendendo Javascript. São Paulo. Novatec, 2010.

SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HMTL e

CSS. São Paulo. Novatec, 2008.

Documents

Tecnologia WEB I - Instituto Siegen · minha ausência, meus pais Mirtes e Günter por terem criado meu caminho, aos meus alunos que viabilizaram este trabalho e a todos os autores