sexta-feira, 29 de fevereiro de 2008

JavaScript desabilitado

Para verificar se o JavaScript está desabilitado, basta:

<noscript> 
  Ação caso o JavaScript não esteja habilitado
</noscript>

CSS oferece uma forma de selecionar o que imprimir em uma página, ou seja, quais quadros você deseja imprimir.

Isto é definido pela tag @media print. Dentro desta tag você coloca as DIVs que não deseja imprimir. Por exemplo, após ter definido a folha de estilo para seu site, dividido em cabeçalho, conteúdo e rodapé, você pode definir quais DIVs poderão ser impressas. Caso queira que somente o conteúdo seja impresso, a definição de @media print ficaria assim:

@media print 
{
#cabecalho { display: none; }
#rodape { display: none; }
}
Neste caso, impede-se o cabeçalho e o rodapé de serem impressos, ficando apenas o conteúdo!

O PHP dispõe de um tipo de variável que permite que se altere seu nome dinamicamente. A variável que varia!

$var1  = 5;
$var2 = 'var1';
Dessa forma pode-se usar o nome var2 no lugar de var1.

$$var2 = 10;
Isto é o mesmo que:

$var1 = 10;
Várias variáveis que variam invariavelmente!

Uma forma simples de exibir conteúdo conforme a ação do usuário é através de camadas e JavaScript.

Um ícone de ajuda, por exemplo, ao ser clicado pode exibir uma camada com informações pertinentes, e esta mesma camada, ao ser clicada, pode se ocultar.

O evento JavaScript para fazer isto é o sequinte:

function controlaCamada(nomeDiv) 
{
if( document.getElementById(nomeDiv).style.visibility == "hidden" )
{
document.getElementById(nomeDiv).style.visibility = "visible";
} else
{
document.getElementById(nomeDiv).style.visibility = "hidden";
}
}


Ou seja, caso a camada esteja visível, então esconde, caso esteja escondida, então exibe!

O código a ser inserido no HTML é o seguinte:
<div id="nome" onClick="controlaCamada('nome')"> 
Texto desejado
</div>

A camada possui um evento onClick. Quando clicada executa a função controlaCamada() em JavaScript, que faz exatamente o que foi mencionado acima!

Este evento onClick chamando a função JavaScript pode ser adicionado a qualquer elemento, como em um ícone de ajuda por exemplo, que quando clicado, exibe a camada, e a camada ou o ícone, quando clicado de novo, esconde a camada. Magia pura!

Hoje precisei vincular um item a várias categorias. Como estrutura, tinha uma tabela com perguntas e respostas e outra tabela com as categorias que essas perguntas podiam ser vinculadas. Criei uma outra tabela que tinha como chave estrangeira as chaves primárias dessas duas tabelas.

Na interface com o usuário, fiz um cadastro de perguntas e respostas, e na mesma tela o usuário poderia vincular as categorias que a pergunta se encaixava. Como as categorias podiam ser muitas, não quis usar checkbox. Como solução optei pelo select multiple, que definido o tamanho ele habilita a barra de rolagem, caso necessite.

Para pegar os dados desse formulário, fiz o seguinte: criei um campo select com os dados que eu precisava:

<select name="nomeSelect[]" size="5" multiple> 
    <option value="1">Valor 1</option>
    <option value="2">Valor 2</option>
    <option value="3">Valor 3</option>
</select>

Para pegar os dados enviados pelo POST, fiz o seguinte:
for ($i = 0; $i < count($_POST['nomeSelect']); $i++) 
{
  echo $_POST['nomeSelect'][$i];
}

No código, eu usava o laço de repetição para vincular a pergunta a cada categoria selecionada no select multiple, através de INSERT na base de dados!

Eu utilizo um editor JavaScript online para editar alguns conteúdos previamente gravados, como notícias, arquivos com mensagens que são enviadas por e-mail, etc. Cada objeto desses possui sua formatação própria, podendo conter links, aspas simples e duplas, cores, tamanhos e formatos de fontes, dentre outras formas.

O editor JavaScript delimita o conteúdo a ser editado por aspas duplas, ou seja, se dentro do texto tivesse aspas duplas, o editor acusaria erro, pois consideraria a primeira aspa após a delimitação inicial do conteúdo como sendo fim de conteúdo e o restante não seria lido.

Outro erro é que ele não interpreta retorno de carro (ENTER) "\r" (ASCII 13 (0x0D)) e nova linha "\n" (ASCII 10 (0x0A)), ou seja, caso você copie e cole um texto que tenha estes caracteres, ele acusará erro. Para o editor, o texto tem que ser passado em uma única linha.

Para resolver estes problemas é simples, remover os caracteres que ele não aceita! As funções abaixo se referem a linguagem PHP.

Removendo aspas duplas

$conteudo = str_replace("\"", "'", $conteudo);

Troco as aspas duplas por aspas simples

Removendo retorno de carro (ENTER)
$conteudo = str_replace(chr(13), "", $conteudo);

Troco o \r por vazio

Removendo nova linha
$conteudo = str_replace(chr(10), "", $conteudo);

Troco \n por vazio

Com isso, o editor não acusará mais erros referentes aos problemas aqui expostos.

---

Update
Existe a função nl2br que faz o trabalho de trocar \n por <br />.

Muitos sites utilizam o recurso de exibir banners de propaganda no canto direito do navegador quando a resolução do usuário é maior que 800x600.

Para implementar este recurso, basta:
1. Criar uma DIV onde será armazenado o conteúdo da propaganda.

<div id="publicidade" style="display:none;">
Conteúdo da propaganda
</div>

2. Incluir um código JavaScript que exibirá a DIV com a propaganda caso a largura da resolução do monitor do usuário seja maior que 800.
window.onload = function()
{
if(screen.width > 800)
{
document.getElementById("publicidade").style.display = "block";
}
}

Dessa forma, quando um usuário com resolução maior que 800x600 acessar seu site, será exibida na tela uma coluna à direita com um conteúdo qualquer, geralmente propaganda.

quinta-feira, 14 de fevereiro de 2008

Consultar CEP

O site República Virtual oferece gratuitamente o serviço de consulta a CEP e cotação do dólar. Para utilizar é simples.

Retorna em formato string as informações pertinentes ao CEP

http://cep.republicavirtual.com.br/web_cep.php?cep=32150240formato=query_string

Retorna em formato XML as informações pertinentes ao CEP
http://cep.republicavirtual.com.br/web_cep.php?cep=32150240formato=xml


Pode ser usado em qualquer linguagem de programação, uma vez que o retorno é tratado por qualquer uma delas.

Ferramenta grátis para quem precisa!

domingo, 10 de fevereiro de 2008

Autotab simples com JavaScript

Alguns campos como CEP, número de telefone, CPF e CNPJ, possuem um limite máximo de caracteres. Com base nisso, pode-se implementar uma função em JavaScript que salte automaticamente os campos de um formulário a medida que eles forem sendo preenchidos.

Isto é comumente chamado de autotab (auto-tab, auto tab, auto tabulação) e é implementado em JavaScript.

Abaixo a função responsável pela auto-tabulação.

function autotab(elemento)
{
if (elemento.value.length < elemento.getAttribute("maxlength")) return;
var formulario = elemento.form;
var els = formulario.elements;
var x, autotab;
for (var i = 0, len = els.length; i < len; i++)
{
x = els[i];
if (elemento == x && (autotab = els[i+1]))
{
if (autotab.focus) autotab.focus();
}
}
}
A partir desta função em JavaScript, define-se o evento no campo desejado, como segue:
<input onKeyUp="autotab(this);" name="campo" type="text" value="" maxlength="5" />

É necessário que seja definido no elemento o valor maxlength, que será responsável por verificar a quantidade de caracteres digitados e avançar para o próximo elemento.

sábado, 9 de fevereiro de 2008

print_r em JavaScript

Este post é um clone do post do blog do Anselmo Battisti.

Pra quem programa em PHP e conhece a função print_r(), abaixo segue uma função em JavaScript que se propõe a fazer o mesmo, exibir todas as entradas de um vetor passado como parâmetro.

function print_r(theObj)
{
if(theObj.constructor == Array || theObj.constructor == Object)
{
document.write("<ul>");
for(var p in theObj)
{
if(theObj[p].constructor == Array || theObj[p].constructor == Object)
{
document.write("<li>["+p+"] => "+typeof(theObj)+"</li>");
document.write("<ul>");
print_r(theObj[p]);
document.write("</ul>");
} else
{
document.write("<li>["+p+"] => "+theObj[p]+"</li>");
}
}
document.write("</ul>");
}
}
Para testar a função basta:
var vetor = new Array( "casa", "loja", "barraco", "apartamento", "piscina", "carro" );
print_r(vetor)
O resultado é algo como:

* [0] => casa
* [1] => loja
* [2] => barraco
* [3] => apartamento
* [4] => piscina
* [5] => carro