Genoma Web: javascript

Mostrando postagens com marcador javascript. Mostrar todas as postagens

sábado, 1 de março de 2008

Detectar bloqueador de popup

Postado por Anderson Dias às 11:11:00 AM

Site que utilizam popup geralmente têm problemas com os bloqueadores de popup. Internet Banking e outros geralmente abrem uma janela para que o usuário possa continuar navegando no site e concluir o processo que havia iniciado.

Dessa forma se faz necessário detectar antecipadamente se o usuário possui ou não o bloqueador de popup ativado, com isso ele pode ser avisado, desativar o bloqueador e continuar navegando no site.

O script abaixo, em JavaScript, se propõe justamente a isso, detectar se o usuário possui ou não um bloqueador de popups ativado e avisá-lo da situação.

var tentativa = 1;
var aviso = 1;
 
function getBloqueador()
{
    var janela = window.open("#","janelaBloq", "width=10, height=10, top=0, left=0, scrollbars=no, status=no, resizable=no, directories=no, location=no, menubar=no, titlebar=no, toolbar=no");
    if (janela == null)
    {
        if (tentativa == 1)
        {
            alert("Bloqueador de popup ativado. Desabilite para continuar.");
            tentativa++;
            return false;
        } else if ((tentativa > 1) && (tentativa <= 3))
        {
            alert("Tentativa " + tentativa + " de 3: O bloqueador ainda está ativado.");
            tentativa++;
            return false;
        } else if (tentativa > 3) 
        {
            if (aviso == 1)
            {
                if (confirm("O bloqueador de popups ainda está ativado, você pode ter dificuldades para acessar o site.\n\nDeseja continuar assim mesmo?"))
                {
                    aviso = 0;
                    return true;
                } else 
                {
                    aviso = 0;
                    return false;
                }
            }
        }
    } else
    {
        janela.close();
        return true;
    }
}

Este script tenta abrir uma janela popup, caso não consiga, inicia a sequência de avisos ao usuário. Caso consiga abrir a janela, nenhuma mensagem é exibida e o usuário segue a navegação normalmente.

Clique em links que abrem em uma janela não são considerados popup, ou seja, as janelas que abrem automaticamente são consideradas popup.

Este script pode ser usado no <body>, com o evento onLoad(), no evento onMouseOver() de algum elemento (um botão ou link, por exemplo).

sexta-feira, 29 de fevereiro de 2008

Validar checkbox com JavaScript

Postado por Anderson Dias às 10:56:00 AM

Este script valida checkbox gerados dinamicamente, com nomes diferentes.

function validaCheckbox(v)
{ 
    todos = document.getElementsByTagName('input'); 
    for(x = 0; x < todos.length; x++) 
    { 
        if (todos[x].checked) 
        { 
            return true; 
        } 
    } 
    alert("Selecione pelo menos um item!"); 
    return false; 
}

Na chamada do formulário <form [...] > basta colocar onSubmit="return validaCheckbox(this);"

<form action="arquivo.php" method="post" onSubmit="return validaCheckbox(this);">

JavaScript desabilitado

Postado por Anderson Dias às 10:48:00 AM

Para verificar se o JavaScript está desabilitado, basta:

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

Exibir e esconder DIV com JavaScript

Postado por Anderson Dias às 10:35:00 AM

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!

Removendo \\n e \\r de textos com PHP

Postado por Anderson Dias às 10:11:00 AM

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 />.

Banner em resolução maior que 800x600

Postado por Anderson Dias às 9:57:00 AM

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.

domingo, 10 de fevereiro de 2008

Autotab simples com JavaScript

Postado por Anderson Dias às 11:06:00 AM

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

Postado por Anderson Dias às 11:17:00 AM

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

sexta-feira, 4 de janeiro de 2008

Obter Largura e Altura da Tela com JavaScript

Postado por Anderson Dias às 10:53:00 AM

O JavaScript possui funções específicas para obter a resolução da tela do usuário. O seguinte código obtém a altura e largura da resolução do monitor:

<script type="text/javascript">
    function getResolucao()
    {
        if (self.screen)
        {   
            largura = screen.width;
            altura = screen.height;
        }
    }
</script>

Dessa forma as variáveis largura e altura irão possuir respectivamente a largura e a altura da resolução do monitor.

quinta-feira, 3 de janeiro de 2008

Desabilitar Botão Direito do Mouse

Postado por Anderson Dias às 9:58:00 PM

Com JavaScript é possível desabilitar o menu contextual que aparece quando se clica com o botão direito do mouse em um site. Vale ressaltar que este é apenas um método para incrementar a segurança, não sendo referência definitiva no quesito segurança. Qualquer usuário com um pouco mais de conhecimento pode desabilitar ou burlar esta função.

O seguinte código desabilita o menu contextual exibido a partir do clique com o botão direito do mouse:

<script language=JavaScript>
    function desabilitaConexto()
    {
        alert("Tratamento qualquer para a chamada da função.");
        return false;
    }

    document.onContextMenu = desabilitaConexto();
</script>

Lembrando que qualquer script deve estar entre as tags <head> e </head>.

Validação em JavaScript e Segurança

Postado por Anderson Dias às 2:54:00 PM

O termo "validação em JavaScript" é um pouco incorreto para descrever o processo de amparar os usuários no momento de preencher corretamente formulários. Na verdade, a linguagem server-side adotada executa a validação - JavaScript meramente provê uma assistência. Mas quando a validação e a assistência não vem da mesma origem, não faz mais do que confundir as pessoas.

Formulários web são os meios pelos quais o HTML se faz interativo - é através destes formulários que as aplicações web recebem dados dos usuários. As vezes estes dados podem não possuir restrições. Em outras ocasiões, os dados devem ser avaliados para garantir que os dados inseridos estão no formato correto, particularmente informações como endereços de e-mail, URLs e cartões de crédito. É sabido que a chave para dados bem formatados é a validação no lado do servidor, e o JavaScript apenas ajuda o usuário a saber o formato correto desejado sem ter que esperar por um processamento no lado do servidor. Desenvolvedores têm combinado funcionalidades do JavaScript com validações no lado do servidor. Contudo, a maioria das formas de validação realizam a mesma tarefa, usando tecnologias diferentes. Um sistema bem implementado e relativamente seguro implementa validações no lado do servidor e utiliza JavaScript para melhorar a interatividade com o usuário.

Estritamente falando a validação com JavaScript não é uma validação - apenas auxilia na entrada de dados. Qualquer um pode burlar o JavaScript; é uma ajuda, não a palavra final. Ele simplesmente ajuda a dar confiança para o usuário no momento de pressionar o botão para submeter as informações.

JavaScript fornece assistência quando construído separadamente à validação no lado do servidor, mas não é o ideal. Na pior das hipóteses, as duas validações irão funcionar diferentemente, e o que é válido no cliente não é válido no servidor. Na melhor das hipóteses, as validações irão trabalhar corretamente. Mas com a validação em vários locais, há uma crescente probabilidade de que apenas uma irá receber os dados atualizados quando mudanças forem requeridas, obtendo neste ponto resultados inconsistentes.

Um exemplo da obrigatoriedade do uso de validações no lado do servidor é quando da entrada de dados pelo usuário, onde tais dados interagem com o banco de dados. Dependendo de como os scripts do aplicativo web foram construídos, existe a possibilidade de tentar uma invasão indireta. Suponha que uma página tenha um campo que permite ao usuário digitar um palavra a ser buscada. Quando insere os dados e envia ao servidor, o script cria uma consulta simples:

SELECT * FROM tabela WHERE campo = 'padrao';

Como neste caso o caractere delimitador usado é o apóstrofo, pode-se enganar o sistema digitando algo como:

"padrao'; DELETE * FROM tabela;"

O resultado disto é que todos os dados da tabela "tabela" serão apagados. Ou seja, se existe apenas um mecanismo de validação em JavaScript que impessa de entrar com caracteres especiais SQL, este mecanismo pode ser facilmente burlado e a string contendo funções SQL irá para o servidor e será executada.

Finalmente, a validação no lado do servidor é requerida. JavaScript auxilia de maneira agradável. Se você busca segurança, pense primeiro em todas as possibilidades de validações no lado do servidor e só então valide com JavaScript.

Livre tradução de JavaScript: It's Just Not Validation!
Adaptado por Anderson Dias

Genoma Web

Detectar bloqueador de popup

Validar checkbox com JavaScript

JavaScript desabilitado

Exibir e esconder DIV com JavaScript

Removendo \\n e \\r de textos com PHP

Banner em resolução maior que 800x600

Autotab simples com JavaScript

print_r em JavaScript

Obter Largura e Altura da Tela com JavaScript

Desabilitar Botão Direito do Mouse

Validação em JavaScript e Segurança

Categorias

Mais do Mesmo

Arquivo

Ofertas

Confira