Genoma Web

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.

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!

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.

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

Para os entusiastas do idioma inglês e adeptos do Firefox, existe uma extensão que permite alterar entre idiomas no Firefox, ou seja, independente do idioma da versão que você instalou, tal idioma pode ser modificado.

O primeiro passo para modificar o idioma do Firefox é instalar a extensão Locale Switcher, que permite alternar entre os idiomas instalados. Feito isso basta escolher o idioma desejado no (veja logo abaixo como fazer isso) e instalá-lo. A Locale Switcher irá criar um menu adicional em Ferramentas->Idiomas, onde será possível alterar o idioma do Firefox.

Para acessar o repositório de idiomas do Firefox, siga os seguintes passos:

1. Entre no site http://releases.mozilla.org/pub/mozilla.org/firefox/releases/
2. Selecione a versão do seu Firefox (ou uma compatível);
3. Clique na pasta do seu sistema operacional;
4. Abra a pasta xpi (uma das últimas da listagem);
5. Faça o download do idioma desejado.
   

Siglas:
C ou P Capital ou Principal
J Juro
i Taxa de juro
M Montante
n Número de períodos

Juros simples são sempre calculados sobre o valor inicial da transação, não importando o montante final e o período.
J = P * i * n (Quanto vai pagar de juro)
M = P + (i * P) (Montante)

Exemplo: Um homem tem uma dívida de R$ 1000,00 que deve ser paga com juros de 8% a.m. (ao mês) pelo regime de juros simples e deve pagá-la em 1 meses. Os juros que o homem pagará serão:
J = P * i * n
J = 1000 * 0.08 * 1
J = R$ 80,00

Qual o total que terá que pagar no final?
M = P + (i * P)
M = 1000 + (0.08 * 1000)
M = R$ 1080,00

Juros compostos de cada período de tempo é calculado sobre o saldo no início do período anterior, ou seja, os juros de cada intervalo de tempo é incorporado ao capital inicial e passa a render juros também.
M = P * (1 + i)n

Exemplo: Um homem empresta R$ 1000,00 com juros de 10% a.m. (ao mês) para ser pago em 1 ano.
M = 1000 * (1 + 0.10)12
M = R$ 3138,42

A taxa de juros e o número de períodos devem ser equivalentes, ou seja, se a taxa de juro é mensal, o cálculo deve levar em consideração os meses. No exemplo, o homem irá pagar a dívida em 1 ano, ou seja, 12 meses. Dessa forma a medida de períodos se iguala a medida da taxa de juro.

Quando se fala em segurança, o que se deve ter em mente é a integridade dos dados no banco de dados e a possível utilização de formulários para fins não esperados.

A função abaixo em PHP é um exemplo simples - não totalmente abrangente e completo - para se evitar injeções de códigos em formulários de sites.

/**
 * @abstract Tratamento de injections em formulários.
 * @return string
 */ 
function antiInjection($str) 
{
  # Remove palavras suspeitas de injection.
  $str = preg_replace(sql_regcase("/(\n|\r|%0a|%0d|Content-Type:|bcc:|to:|cc:|Autoreply:|from|select|insert|delete|where|drop table|show tables|#|\*|--|\\\\)/"), "", $str);
  $str = trim($str);    # Remove espaços vazios.
  $str = strip_tags($str);  # Remove tags HTML e PHP.
  $str = addslashes($str);  # Adiciona barras invertidas à uma string.
  return $str;
}

Para garantir que nenhum dado passado por formulário, seja ele GET ou POST, ou passado via URL (GET), contenha qualquer tipo de código malicioso, deve-se validar todos os valores que são passados. O código a seguir exemplifica como isto pode ser feito. No exemplo é abordado o vetor POST, mas o mesmo pode ser aplicado aos demais vetores, como GET, COOKIE, SESSION, etc.

UPDATE

Como formulários podem conter vetores dentro de vetores (p.e. vetor de checkbox dentro do POST, que é um vetor), adicionei mais uma função que faz essa verificação, ou seja, se existir um vetor dentro de um vetor, para cada valor existente é verificado os injections.

/**
 * @abstract Antes de tratar os injections, verifica se é vetor ou não.
 */ 
function validaParametro($vetor)
{
  if (is_array($vetor))
  {
    foreach ($vetor as $chave => $valor) 
    {
      if (is_array($valor)) 
      {
        $vetor[$chave] = validaParametro($valor); 
      } else $vetor[$chave] = antiInjection($valor);
    }
  } else $vetor[$chave] = validaParametro($valor);
  return $vetor;
}

Para chamar a função basta:

# Para cada entrada de POST, faz a verificação de possíveis injections.
$_POST = validaParametro($_POST);

Caso queira fazer um teste, basta criar um formulário com campos normais e vetores e, ao final dar um var_dump($_POST); para ver o resultado.

A dica de validar vetores internos foi do Anselmo Battisti, meu parceiro de faculdade!