Como Criar Sites | Aprenda grátis como fazer seu site » Javascript http://www.comocriarsites.com Aprenda a criar sites, html e manhas para fazer seu site. Wed, 06 Jan 2010 12:51:19 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Função getElementById() do Javascript http://www.comocriarsites.com/javascript/funcao-getelementbyid-do-javascript/ http://www.comocriarsites.com/javascript/funcao-getelementbyid-do-javascript/#comments Wed, 08 Apr 2009 07:21:52 +0000 Raoni Novellino http://www.comocriarsites.com/?p=131 A função getElementById() do Javascript é uma função muito utilizada quando queremos fazer um site mais interativo. Essa função pode retornar o objeto de qualquer elemento na página que tenha um id único, e também funciona na maioria dos navegadores.

A função getElementById() do Javascript é bem fácil de usar, e é útil em muitas ocasiões. Vamos exemplificar algumas para melhor entendimento.

getElementById() para Tratamento e Envio de Formulário

Vamos supor que eu quero fazer alguma verificações do formulário antes de envia-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Vamos ao código:

<html>
<head>
	<title>Exemplo de getElementById() no Formulário</title>

<style type="text/css">

#msg_erro {
	color: red;
	font-weight: bold;
}

</style>

</head>
<body>

<script language="JavaScript">

function teste_submit()
{
	var obj_form = document.getElementById('form_teste');
	var obj_nome = document.getElementById('nome_teste');
	var obj_cargo = document.getElementById('cargo_teste');
	var obj_msg_erro = document.getElementById('msg_erro');
	var msg_erro = '';

	if(obj_nome.value == '')
		msg_erro = 'campo NOME vazio';
	else if(obj_cargo.value == '')
		msg_erro = 'campo CARGO vazio';

	if(msg_erro == '')
		obj_form.submit();
	else
		obj_msg_erro.innerHTML = msg_erro;
}

</script>

<form id="form_teste" action="http://www.comocriarsites.com" method="post">
Nome: <input type="text" id="nome_teste" name="nome_teste"><BR>
Cargo: <input type="text" id="cargo_teste" name="cargo_teste"><BR>
<input type="Button" value="Enviar" onclick="teste_submit();">
</form>
<div id="msg_erro"></div>

</body>
</html>

Algumas pessoas que conhecem um pouco de Javascript podem dizer “eu posso fazer a mesma coisa com o onSubmit“, mas nós não estamos vendo o onSubmit e sim o getElementById(). :P

Você pode ver esse exemplo da função getElementById() funcionando em Exemplo de getElementById() no Formulário.

No código acima temos um formulário HTML com dois campos e um botão de enviar, uma tag <div> 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 <div>, 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.

]]> http://www.comocriarsites.com/javascript/funcao-getelementbyid-do-javascript/feed/ 0 Popup com DIV sem Nova Janela (Float Popup) http://www.comocriarsites.com/javascript/popup-com-div-sem-nova-janela-float-popup/ http://www.comocriarsites.com/javascript/popup-com-div-sem-nova-janela-float-popup/#comments Sat, 21 Mar 2009 06:39:40 +0000 Raoni Novellino http://www.comocriarsites.com/?p=19 Nesse post vou mostrar como fazer uma janela popup sem que o navegador abra realmente uma nova janela, com a tag div. Isso é bom pois todos os navegadores hoje bloqueiam popup de nova janela, mas é muito díficil ter bloqueado o Javascript, que é o que utilizaremos também para fazer o div aparecer e desaparecer.

Vamos dividir esse código em arquivos, abaixo descrevo os arquivos:

index.html: Esse arquivo pode ser qualquer arquivo HTML que você queira colocar o banner.

banner.js: Arquivo onde ficarão todos os códigos javascript para mostrar e esconder o popup.

banner.css: Arquivo que contém as classes de estilo. Pode conter outras classes dentro dele ou você pode modificar as classes do popup.

O Arquivo index.html

No arquivo index.html, você precisa chamar os outros dois arquivos, banner.js e banner.css. Para chamar o banner.js, use a seguinte linha:

<script language="JavaScript" src="http://url.para/script/banner.js"></script>

Mude a url no atributo src para a url correta onde está o arquivo banner.js.

Para chamar o arquivo banner.css, use a seguinte linha:

<link href="http://url.para/estilo/banner.css" rel="stylesheet" type="text/css" />

Mude a url no atributo href para a url correta onde está o arquivo banner.css.

Essas linhas normalmente são chamadas dentro do cabeçalho do documento html (entre a tag <head> e </head>).

O Código HTML

No corpo do documento html (entre as tags <body> e </body>), entra o código:

<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td>
		</tr>
		<tr>
			<td>
				<a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a>
			</td>
		</tr>
	</table>
</div>

A primeira linha é uma tag <div>, 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 <div> 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 <table>) 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 <a>. O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag <a>, 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.

Nesse código temos duas imagens, uma faz parte do fechar do banner e a outra é o banner propriamente dito.

A Chamada Javascript

A última parte no nosso arquivo index.html é a chamda para a função Javascript que irá abrir o banner. Abaixo o código:

<script language="JavaScript">
if(document.getElementById('banner_popup'))
	abre_banner();
</script>

Esse código deve vir logo antes da tag </body>, ou podemos colocar a função abre_banner() no atributo onload do próprio <body>. Esse código só faz verificar se existe um elemento com o identificador banner_popup, e se houver, chama a função para exibir o banner.

O Arquivo index.html Completo

<html>
<head>
	<title>Banner Popup</title>
<link href="banner.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="banner.js"></script>
</head>
<body>

<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td>
		</tr>
		<tr>
			<td>
				<a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a>
			</td>
		</tr>
	</table>
</div>

<script language="JavaScript">
if(document.getElementById('banner_popup'))
	abre_banner();
</script>

</body>
</html>

O Arquivo banner.js

No arquivo banner.js vamos colocar todas nossas funções Javascript. Abaixo o conteúdo do arquivo:

function fecha_banner()
{
	var banner_obj = document.getElementById('banner_popup');
	banner_obj.style.display = 'none';
}

function fecha_banner_timeout()
{
	setTimeout('fecha_banner()', 10000);
}

function abre_banner()
{
	var banner_obj = document.getElementById('banner_popup');

	banner_obj.style.left = '200px';
	banner_obj.style.top = '100px';

	banner_obj.style.display = '';

	fecha_banner_timeout();
}

A função fecha_banner()

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()

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()

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.

O Arquivo banner.css

No arquivo banner.css vamos colocar somente o estilo do link de fechar, ela pode conter outros estilos caso necessite. Abaixo o código:

.linksFechar:link
{
 	text-decoration: none;
	font-size: 14px;
	color: #000000;
}

Nesse arquivo só é definido esse estilo, que o texto não vai ser sublinhado, a fonte vai ter tamanho 14 pixels e a cor vai ser preta.

E juntando tudo isso vamos ter um banner popup sem abrir uma nova janela, utilizando Javascript.

Para ver esse exemplo funcionando, entre em Exemplo de Banner Popup.

]]> http://www.comocriarsites.com/javascript/popup-com-div-sem-nova-janela-float-popup/feed/ 3 Pegando Posição Absoluta de um Elemento HTML (Javascript) http://www.comocriarsites.com/javascript/pegando-posicao-absoluta-de-um-elemento-html-javascript/ http://www.comocriarsites.com/javascript/pegando-posicao-absoluta-de-um-elemento-html-javascript/#comments Mon, 02 Mar 2009 06:36:42 +0000 Raoni Novellino http://www.comocriarsites.com/?p=23 Uma maneira simples de saber qual a posição absoluta de um elemento HTML (posição onde o elemento está em relação a área de exibição de páginas do navegador), é usando um algorítimo em Javascript. Esse algorítimo pega a posição relativa do elemento, e depois a posição relativa do elemento pai (parent), depois do pai do pai e assim até um elemento não ter um elemento pai.

O algorítimo:

function findPosX(obj)
{
	var curleft = 0;
	if(obj.offsetParent)
		while(1)
		{
			curleft += obj.offsetLeft;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.x)
		curleft += obj.x;

	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

São dois algorítimos, um para a posição horizontal (findPosX) e outro para a posição vertical (findPosY). Os dois recebem um atributo de nome obj que é o objeto do elemento que você quer saber a posição e retornam um inteiro, que é a posição do elemento no documento HTML.

As funções do Javascript offsetLeft e offsetTop, retornam um inteiro que é a distântcia em pixels entre o elemento passado como paramatro e o elemento pai desse elemento passado comoparametro. A diferença entre as duas é que a primeira (offsetLeft), retorna a distância da esquerda entre o elemento e seu elemento pai, e a segunda (offsetTop), retorna a distância de cima entre o elemento e seu elemento pai.

Abaixo um exemplo de uso:

<html>
<head>
	<title>Teste de Posicionamento em Javascript</title>
</head>
<body>

<script language="JavaScript">

function findPosX(obj)
{
  var curleft = 0;
  if(obj.offsetParent)
      while(1)
      {
        curleft += obj.offsetLeft;
        if(!obj.offsetParent)
          break;
        obj = obj.offsetParent;
      }
  else if(obj.x)
      curleft += obj.x;
  return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if(obj.offsetParent)
		while(1)
		{
			curtop += obj.offsetTop;
			if(!obj.offsetParent)
				break;
			obj = obj.offsetParent;
		}
	else if(obj.y)
		curtop += obj.y;

	return curtop;
}

</script>

<table>
	<tr>
		<td>Linha 1</td>
	</tr>
	<tr>
		<td>Linha 2</td>
	</tr>
	<tr>
		<td>
		<table>
			<tr>
				<td id="td_posicao">Quero saber a posicao desse TD</td>
			</tr>
		</table>
		</td>
	</tr>
</table>

<script language="JavaScript">

var td_pos_obj = document.getElementById('td_posicao');

var x = findPosX(td_pos_obj);
var y = findPosY(td_pos_obj);

alert('pos x: ' + x + ' - pos y: ' + y);

</script>

</body>
</html>

Algumas explicações:

A linha “var td_pos_obj = document.getElementById(’td_posicao’);” faz a variável td_pos_obj ficar identificando o elemento que e quero saber a posição. Pode ver que na tag <td> que eu quero saber a posição, tem um atributo id, com valor igual a td_posicao. Isso serve para eu identificar o elemento e depois poder saber qual ele é facilmente utilizando a função getElementById do Javascript. Essa função é boa porque funciona tanto no IE (acho que pelo menos no 6 e no 7) e no Firefox (testado na versao 2 e 3).

Se você quer saber a diferênça entre os valores do estilo (style) position, acesse: CSS Style Position: Diferença entre Relative, Absolute e Static

]]> http://www.comocriarsites.com/javascript/pegando-posicao-absoluta-de-um-elemento-html-javascript/feed/ 0