para mensagem de erro e uma função Javascript identificada por teste_submit(). Quando o botão de enviar for pressionado, vai ser chamada a função Javascript teste_submit(). Essa função pega os objetos do formulário, dos campos do fomulário e do
, verifica se algum dos campos está vazio, e se algum deles estiver vazio, ele grava uma string em uma variável local (msg_erro) e depois faz essa string aparecer na tela. Se os dois campos não estiverem vazios, a função submete (envia) o formulário.
Os passos de pegar os objetos dos elementos do documento são feitos com a função getElementById(), que é uma função do documento, por isso tenho que colocar o document antes da função getElementById(). Como parametro da função getElementById() tenho que colocar o idetificador único do elemento, que se define pelo atributo id.
Se você está usando uma linguagem no lado do servidor (PHP, ASP ou outras), isso faz com que reduza a carga no servidor, pois tratamos certos erros antes de realmente enviar o formulário. E isso agiliza o processo para o cliente também, que não precisa esperar carregar uma nova página para saber que o formulário que ele tentou enviar está faltando alguma coisa ou está errado.
Voltar ao Índice
Tópico 2
Se você colocar o
com o estilo clear: both após o fechamento do elemento pai, o próximo elemento vai ficar corretamente posicionado, mas o elemento pai ainda vai ficar com a altura errada.
Float com Ajuste de Altura por Estilo Overflow
Outro ajuste para fixar a altura correta é colocar o estilo overflow: auto no elemento pai. Ele vai se ajustar automaticamente a altura dos elemento filhos. Mas essa técnica não é muito interessante já que se você quiser utilizar o estilo overflow do elemento pai para algum outro propósito não vai poder.
Se você quiser saber mais sobre o estilo overflow acesse Estilo Overflow (CSS Style Overflow).
Float com Ajuste de Altura por Pseudo Elemento After
Existe uma técnica que chama mais atenção por ser teoricamente melhor, porém é um pouco mais complexa, que é a técnica chamada clearfix, que consiste em fazer o clear com o pseudo elemento after, para os navegadores que tem esse pseudo elemento, e para o IE antigo, que não suporta o pseudo elemento after, fazer com que o elemento pai tenha a propriedade hasLayout. Para o elemento ter a propriedade hasLayout basta colocar o estilo zoom: 1 nele.
Voltar ao Índice
Tópico 3
A primeira linha é uma tag
, tem o atributo id igual a banner_popup - esse id nós vamos utilizar para achar o div no documento pelo Javascript. O outro atributo do div é o style - esse atributo define o estilo do nosso componente, no caso o div. Ele define que o
vai ficar em posição absoluta, a 0 (zero) pixels do topo e da esquerda da página, e não vai ser renderizado (mostrado) na página (display: none;).
Para mais referências de folha de estilo (CSS) entre em Entendendo CSS (folhas de estilo): Cascading Style Sheet - Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet - Parte 2. E para mais informações da propriedade de estilo display entre em Propriedade Display do Elemento (CSS).
Esse é o código HTML do banner propriamente dito, lógico que a tabela dentro do div você pode alterar para ficar de acordo com o seu site, mas não esqueça de colocar sempre algum lugar para fechar o banner, mesmo que ele se feche automaticamente após um tempo. Para entender um pouco mais de tabela acesse Como Funciona a Tabela (tag
) HTML.
No nosso banner a função que vai fecha-lo é a fecha_banner() que está na primeira linha da tabela, no atributo onclick da tag . O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag , que no atributo href, que seria o link que ele iria seguir caso se clicasse nele, mas ele está com uma função Javascript (javascript: void(0);). O nome javascript no início do atributo href indica que eu vou usar um código Javascript nesse atributo, e a função void(0); diz que quando o link for clicado não seguir para lugar nenhum.
Voltar ao Índice
Tópico 4
A função fecha_banner() fecha o banner, obviamente. Ela é chamada quando se clica no Fechar do banner ou quando se passa dez segundos, como vamos ver na próxima função. Ela pega o objeto do banner através da função getElementById() e atribui ao estilo display o valor none, que faz o elemento deixar de ser exibido (renderizado).
A função fecha_banner_timeout() chama a função fecha_banner() após dez segundos, utilizando a função setTimeout() do Javascript. A função setTimeout() do Javascript é bem legal, mas ela é assunto de um post futuro. Basicamente ela executa uma determinada função dado um determindo tempo, em milisegundos.
A função abre_banner(), como o nome diz, abre o banner, ou melhor explicando, faz ele ser exibido. Ela pega o objeto do banner, depois diz onde o banner vai aparecer definindo os estilos top e left (no nosso caso vai aparecer a 200 pixels da esquerda e a 100 pixels do topo), vai também definir o estilo display para vazio, que diz que vai ser utilizado o display padrão do elemento para renderiza-lo. Por fim, ele chama a função fecha_banner_timeout(), que vai esperar dez segundos para fechar o banner.
Voltar ao Índice
Tópico 5
Esse menu é feito sem tabela (tableless), que é um “novo” conceito de desenvolvimento de páginas. Para ser feito assim, normalmente usa-se muito a tag . No código acima temos um
externo, que tem uma classe associada a ele, essa classe veremos na segunda parte do código. Dentro desse
externo, temos um
interno para cada item do menu. Cada
interno tem os atributos class, onmouseover e onmouseout, explicados abaixo:
- esse atributo é usado para definir uma classe de estilo (CSS) para uma tag, e todas as tags dentro dessa tag herdam parte desse estilo.
- esse atributo especifica uma ação a fazer quando o mouse passar por cima do que essa tag exibe, no nosso caso um item do menu. E esse atributo executa um script em Javascript, logo a função que está lá dentro (mouse_over_menu(this);) é uma função Javascript.
- esse atributo especifica uma ação a fazer quando o mouse sai de cima do que essa tag exibe, no nosso caso, quando o mouse sair de cima de um item do menu, esse atributo diz que é para executar a função “mouse_out_menu(this);“, essa é uma função Javascript.
Voltar ao Índice