JavaScript Exercício Comportamentos Dinâmicos

Tamanho: px

Começar a partir da página:

Download "JavaScript Exercício Comportamentos Dinâmicos"

Catarina Beltrão Bennert
9 Há anos
Visualizações:

1 JavaScript Exercício Comportamentos Dinâmicos Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar um exemplo simples de utilização de JavaScript em páginas web. Neste exemplo, três imagens são apresentadas e, o texto associado a cada imagem, é apresentado apenas quando o rato é colocado sobre a imagem. A imagem em baixo ilustra o que se pretende obter no final. Introdução JavaScript é uma linguagem de programação que permite adicionar dinamismo a páginas web. A linguagem HTML permite definir a estrutura dos documentos, a linguagem CSS permite definir a apresentação dos documentos e a linguagem JavaScript permite definir o comportamento dos documentos face a acontecimentos. Estes acontecimentos podem ser desencadeados pelos utilizadores (p.e. passar com o rato sobre algo) ou podem ser automáticos (p.e. serem 22:00). O funcionamento do JavaScript é baseado nos conceitos de eventos e acções. Os eventos despoletam uma ou mais acções. Por exemplo, alterar a cor do texto (acção) quando o utilizador carrega sobre a imagem (evento). O Macromedia Dreamweaver facilita a criação deste tipo de comportamentos, oferecendo um conjunto de acções predefinidas. No Dreamweaver, utiliza-se o termo Behaviors para designar os comportamentos feitos em JavaScript.

2 Reunir Imagens Para este exercício, é necessário reunir três imagens. Use o Flickr ( em particular a secção Explore Flickr para reunir três imagens à escolha. Depois de gravadas, as imagens devem ser reduzidas de forma a terem 250 pixels de largura e 175 pixels de altura. É importante não distorcer as imagens! Estruturar Documento em HTML Para o documento HTML use a seguinte estrutura base. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>explorar Behaviors em JavaScript</title> <link rel="stylesheet" type="text/css" href="behaviors.css"> </head> <body> </body> </html> Pretende-se estruturar em HTML um documento composto por três secções. Cada secção é composta por uma fotografia, um título e um parágrafo. Antes das secções deve existir um título e um parágrafo. Assim, altere o documento HTML da seguinte forma: Defina uma área (DIV) base que vai englobar todo o conteúdo. Atribua a esta área a classe base. Esta divisão permitirá centrar todo o conteúdo na horizontal. Defina um título principal para o documento com o texto Três Fotografias. Após o título defina um parágrafo com o texto - Passe com o rato sobre as imagens para ver o texto associado a cada uma. Defina três áreas (DIV) da classe seccao. Dentro de cada uma das secções defina: o Uma imagem. o Uma quebra de linha. o Um título hierarquicamente inferior ao principal. Coloque um texto livre aqui. o Um parágrafo, também com um texto livre. Como pretendemos controlar a visibilidade do título e do texto associado a cada imagem (em cada secção), é necessário identificar de forma única cada uma destas áreas. Assim,

defina três áreas que englobem, cada uma, o título e o parágrafo de cada imagem. Em termos de estrutura global, pretende-se algo idêntico ao que é ilustrado na imagem seguinte.

3 defina três áreas que englobem, cada uma, o título e o parágrafo de cada imagem. Em termos de estrutura global, pretende-se algo idêntico ao que é ilustrado na imagem seguinte. Um aspecto importante destas novas áreas é o facto de serem únicas. Em todo o documento HTML não podem existir outras áreas com a mesma referência. Ao contrário das áreas do tipo seccao, as legendas não se repetem. Existem três tipos de legendas: legenda1, legenda2, legenda3. Como temos a certeza que estas áreas são únicas, em vez de usarmos o atributo class, usamos o atributo id. Teremos por exemplo: <div id="legenda1">... </div> Concluída esta fase, veja o resultado no browser.

4 Formatações em CSS Antes de introduzirmos os comportamentos em JavaScript, vamos alterar a apresentação do documento definindo um documento CSS behaviors.css. Vamos apenas definir algumas alterações simples. Assim, defina regras CSS para: A largura do corpo deve ser de 900 pixels. As margens esquerda e direita devem ser definidas automaticamente (auto). O tipo de letra base deve ser verdana. Cada área da classe seccao deve ter uma largura de 270 pixels, flutuar para a esquerda e ter um espaçamento interno esquerdo e direito de 10 pixels. Finalmente, cada uma das legendas deve ser posicionada de forma relativa. No entanto, como neste caso foi usado o atributo id e não o atributo class, a regra CSS deve ser definida da seguinte forma (reparar no uso do cardinal em vez do ponto). div#legenda1, div#legenda2, div#legenda3 { position: relative; } Voltar a consultar a página web num browser. Introduzir Comportamentos Dinâmicos Show/Hide No Dreamweaver, os comportamentos são definidos usando o subpainel Behaviors existente no painel Design. Antes de introduzir comportamentos, garanta que está activado o item IE 6.0 na opção Show Events For. Para definir um comportamento, em primeiro lugar é necessário seleccionar o elemento que vai activar a acção. Assim, para cada imagem: Garantir que a imagem está seleccionada. Seleccionar o (+) na janela Behaviors e escolher a opção Show-Hide Layers. Fazer show da área respectiva e finalizar. Mantendo a imagem seleccionada, seleccionar novamente a opção Show-Hide Layers. Fazer hide da área respectiva e finalizar. Na coluna Events, escolher a opção onmouseover para a acção que mostra (show). Na coluna Events, escolher a opção onmouseout para a acção que esconde (hide). Testar os comportamentos no browser.

Garantir Estado Inicial - OnLoad Ao abrir a página pela primeira vez, todas as legendas aparecem visíveis. Apenas depois de passar o rato uma vez sobre as imagens, o comportamento é o esperado.

5 Garantir Estado Inicial - OnLoad Ao abrir a página pela primeira vez, todas as legendas aparecem visíveis. Apenas depois de passar o rato uma vez sobre as imagens, o comportamento é o esperado. É possível definir um comportamento que garanta que, ao carregar a página, todas as áreas são colocadas invisíveis. Para tal, seleccione o corpo do documento (body) e crie um novo comportamento do tipo Show-Hide Layers. Neste caso, coloque todas as legendas como invisíveis (hide). Para terminar, confirme que o evento onload está seleccionado. Comportamentos Dinâmicos Associados às Imagens Swap Imagem O comportamento anterior (Show-Hide Layers) permite mostrar ou esconder uma determinada área de uma página. Neste passo final vamos usar outro comportamento (Swap Image) para também trocar a imagem quando o rato é colocado sobre ela. Primeiro, é necessário produzir, para cada imagem, uma nova imagem alternativa. Usando o Photoshop, converta cada imagem para preto e branco e grave com um novo nome. No HTML, troque as referências das imagens de forma a ser usada a nova imagem produzida. Desta forma, quando o documento é aberto pela primeira vez as imagens apresentadas são aquelas a preto e branco. Finalmente, para introduzir os comportamentos que permitem fazer a troca da imagem, seguir os passos: Seleccionar a imagem. Definir um nome para a imagem usando o painel de propriedades. No painel Behaviors, adicionar um novo comportamento Swap Imagem. No painel que surge, escolher a imagem a alterar e definir a nova fonte (source). Manter as opções Preload Images e Restore Images onmouseout seleccionados.

Documentos relacionados

CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário

CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de