JavaScript: Máscara para validar um CPF ou CNPJ no mesmo campo

Ótima mascara para validar um CPF ou CNPJ no mesmo campo em JavaScript.

Código JavaScript:

        function mascaraMutuario(o, f) {

            v_obj = o

            v_fun = f

            setTimeout('execmascara()', 1)

        }

        function execmascara() {

            v_obj.value = v_fun(v_obj.value)

        }

        function cpfCnpj(v) {

            //Remove tudo o que não é dígito

            v = v.replace(/\D/g, "")

            if (v.length <= 14) { //CPF

                //Coloca um ponto entre o terceiro e o quarto dígitos

                v = v.replace(/(\d{3})(\d)/, "$1.$2")

                //Coloca um ponto entre o terceiro e o quarto dígitos

                //de novo (para o segundo bloco de números)

                v = v.replace(/(\d{3})(\d)/, "$1.$2")

                //Coloca um hífen entre o terceiro e o quarto dígitos

                v = v.replace(/(\d{3})(\d{1,2})$/, "$1-$2")

            } else { //CNPJ

                //Coloca ponto entre o segundo e o terceiro dígitos

                v = v.replace(/^(\d{2})(\d)/, "$1.$2")

                //Coloca ponto entre o quinto e o sexto dígitos

                v = v.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")

                //Coloca uma barra entre o oitavo e o nono dígitos

                v = v.replace(/\.(\d{3})(\d)/, ".$1/$2")

                //Coloca um hífen depois do bloco de quatro dígitos

                v = v.replace(/(\d{4})(\d)/, "$1-$2")

            }

            return v

        }

Código HTML:

<input type='text' name='cpfcnpj' onkeypress='mascaraMutuario(this,cpfCnpj)' onblur='clearTimeout()'>

Leia mais em: http://blogdetecnologia.com.br/?p=908

Oracle - Converter para inteiro resultado de uma estrutura CASE para utilização no c#

Oracle - Converter para inteiro resultado de uma estrutura CASE para utilização no c#

                A seguir demonstrarei como converter uma string para inteiro (Int32 – c#) utilizando o case dentro de um select.

--Correta (Neste caso, o valor que retornar no case, será convertido para Number(5), ou seja Int32 em c#)

SELECT CAST(CASE WHEN 'campo_tabela' = 'campo_tabela' THEN '1' ELSE '2' END AS NUMBER(5)) AS ORIGEM

FROM dual;

A seguir demonstrarei o problema que estava tendo ocorrendo na conversão utilizando o case.

--Incorreta (Neste caso, o cast estava sendo feito nos valores dentro do case (1 e 2), e de forma implícita o case converte para decimal).

SELECT  CASE WHEN 'campo_tabela' = 'campo_tabela' THEN CAST('1' AS NUMBER(5)) ELSE CAST('2' AS NUMBER(5)) END AS ORIGEM

FROM  dual;

Definir Auto-Replace no PL/SQL

Definir Auto-Replace no PL/SQL

A seguir vou demonstrar como definir automaticamente a substituição de palavras / comandos / querys no PL/SQL.

                Por exemplo, se digitar “FRON” desejo que apareça “FROM”, pode definir este e diversos outros casos.

Como definir:

1.       Abra o PL/SQL:

2.       Clique em Tools > Preferences.

3.       No menu do lado esquerdo localize (User Interface) e clique em Editor.

4.       Na tela central localize “Auto Replece”, neste campo devemos setar o caminho de um arquivo .txt contendo as palavras que gostaríamos de auto modificar, conforme exemplo a seguir:

AutoReplace.txt (Nome do arquivo)

WHERER=WHERE
ADN =AND
S*F = SELECT * FROM
FROn =FROM

Clique em apply.

PL/SQL - Como definir palavras chaves como maiúsculas

Como definir palavras chaves como maiúsculas no PL/SQL

O padrão de desenvolvimento é um requisito muito importante em uma equipe de desenvolvimento,

a seguir irei demonstrar uma maneira simples e eficaz de definir automáticamente todas as palavras chaves em maiúscula (caixa alta) ao digitar sua query.

Como definir:

1.       Abra o PL/SQL

2.       Clique no menu tools > Preferences > No menu esquerdo, localize (User Interface) e clique em Editor.

3.       Localize Keyword Case e marque a opção Uppercase.

4.       Clique em Apply.

Pronto, com este procedimento já está configurado as palavras chaves automaticamente ao montar sua query.

Abra um SQL Window e digita uma query e verifique, se a mesma esta definindo automaticamente todas as palavras chaves.

Obrigado e até a próxima dica. 

Como centralizar imagens com textos na div (CSS)

Centralizando imagem com texto na mesma div

<html>

<head>

<style type="text/css">

.div{

       width: 100px;

       height: 100px;

       line-height: 100px;

       background-color: #f44;

}

/* Centralizar a imagem verticalmente na div */

.div img {

       vertical-align:middle;

}

</style>

</head>

<body>

       <div class="div">

             <img src="C:\Users\publico\desktop\clientes.png" alt="Clientes" />Caixa 1

       </div>

</body>

</html>

A seguir o resultado final:

Como centralizar divs dentro de div?

Centralizar divs dentro de div

          A seguir foi implementado um código que permite centralizar div's dentro de div, situação bastante utilizada no dia a dia.

<html>

<head>

<style type="text/css">

.conteudo{

       background-color: #eee;

       border: 1px solid #ddd;

       text-align: center;

}

.divCentralizada{

       margin: 0 auto;

       background-color: #f44;

       padding: 0 50px;

       margin: 0 20px;

       display: inline;

}

</style>

</head>

<body>

<div class="conteudo">

            <div class="divCentralizada">Caixa 1</div>

                    <div class="divCentralizada">Caixa 2</div>

                    <div class="divCentralizada">Caixa 3</div>

</div>

</body>

</html>

Comentando o código utilizado: 

.conteudo{

       background-color: #eee; /* Definindo a cor da div */

       border: 1px solid #ddd; /* Difinindo a cor da borda da div */

       text-align: center;     /* Alinhando conteudo da div */

}

.divCentralizada{

    margin: 0 auto;     /* Definido as margem top e botton como 0 e definindo automaticamente as margens left e right */

    background-color: #f44; /* Definindo a cor da div */

    padding: 0 50px;   /* define um valor para os espaçamentos entre o conteúdo e as bordas da div */

    margin: 0 20px;    /* define um valor para espessura das margens da div */

    display: inline;   /* Define a maneira como o elemento deve ser renderizado (em linha) */

} 

   A seguir a imagem do resultado final:

Oracle: Consultar campo que contém mais de X registros

Consultar campo que contém mais de X registros

--Por exemplo, preciso consultar as pessoas com mais de 2 documentos cadastrados

SELECT pedo.pess_id_pessoa,

       COUNT(pedo.pess_id_pessoa) AS qtd_repetido

  FROM tb_pessoas_documentos pedo

 WHERE pedo.pedo_dt_termino IS NULL              -- Retorna somente os ATIVOS, onde o cliente está com data de termino nulo

 GROUP BY pedo.pess_id_pessoa                    -- Agrupa o retorno por identificador da pessoa

HAVING COUNT(pedo.pess_id_pessoa) > 2            -- Apartir do resultado acima, retorna somente as pessoas com mais de 2 documentos

 ORDER BY qtd_repetido DESC;                     -- Ordena pela pessoa com mais documentos

Estrutura de um documento HTML 5

DOCTYPE

          

         A instrução DOCTYPE indica para o navegador qual a versão do HTML. Utilizamos <!DOCTYPE html>, que indica para o navegador a utilização da versão mais recente do HTML - a versão 5, atualmente.

O elemento HTML

          

         O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.

<html lang="pt-br">

                O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento.

                Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

Metatag Charset

          

         A MetaTag Charset é responsável por chavear qual tabela de caracteres a página está utilizando. 

<meta charset="utf-8">

section

          

         A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.

nav

          

         O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.

article

          

         O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.

aside

          

         O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O asidepode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.

header

          

         O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.

footer

          

         O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.

time

          

         Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano.

Estrutura HTML5

<!DOCTYPE html>

<html lang="pt-br">

<head>

                <title>Título do documento HTML</title>

                <meta charset="utf-8" />

</head>

<body>

                <header>

                               <!-- Conteúdo do cabeçalho -->

                               <nav>

                                               <ul>

                                                               <li><a href="#">Item do menu 1</a></li>

                                                               <li><a href="#">item do menu 2</a></li>

                                               </ul>

                               </nav>

                </header>

                <section id="main">

                               <!-- Conteúdo principal -->
                               <article>
                                    <h1>Título</h1>

                                    <p>Início</p>

                                    <h2>Subtítulo</h2>

                                    <p>Texto</p>

                                    <p>Mais texto</p>

                               </article>

                </section>

                <section id="segundo">

                <!-- Segundo Painel-->

                </section>

                <footer>

                               <!-- Conteúdo do rodapé -->

                </footer>

</body>

</html>

         

         Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS:

·         align como atributo da tag caption, iframe, img, input, object, legend, table,

·         hr, div,h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr.

·         alink, link, text e vlink como atributos da tag body.

·         background como atributo da tag body.

·         bgcolor como atributo da tag table, tr, td, th e body.

·         border como atributo da tag table e object.

·         cellpadding e cellspacing como atributos da tag table.

·         char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr.

·         clear como atributo da tag br.

·         compact como atributo da tag dl, menu, ol e ul.

·         frame como atributo da tag table.

·         frameborder como atributo da tag iframe.

·         height como atributo da tag td e th.

·         hspace e vspace como atributos da tag img e object.

·         marginheight e marginwidth como atributos da tag iframe.

·         noshade como atributo da tag hr.

·         nowrap como atributo da tag td e th.

·         rules como atributo da tag table.

·         scrolling como atributo da tag iframe.

·         size como atributo da tag hr.

·         type como atributo da tag li, ol e ul.

·         valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr.

·         width como atributo da tag hr, table, td, th, col, colgroup e pre.

Alguns atributos do HTML4 não são mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles serão discutidos.

·         rev e charset como atributos da tag link e a.

·         shape e coords como atributos da tag a.

·         longdesc como atributo da tag img and iframe.

·         target como atributo da tag link.

·         nohref como atributo da tag area.

·         profile como atributo da tag head.

·         version como atributo da tag html.

·         name como atributo da tag img (use id instead).

·         scheme como atributo da tag meta.

·         archive, classid, codebase, codetype, declare e standby como atributos da tag object.

·         valuetype e type como atributos da tag param.

·         axis e abbr como atributos da tag td e th.

·         scope como atributo da tag td.

Atributos

Alguns elementos ganharam novos atributos:

·         O atributo autofocus pode ser especificado nos elementos input (exceto quando há atributohidden atribuído), textarea, select e button.

·         A tag a passa a suportar o atributo media como a tag link.

·         A tag form ganha um atributo chamado novalidate. Quando aplicado o formulário pode ser enviado sem validação de dados.

·         O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado os indicadores da lista são colocados na ordem inversa, isto é, da forma descendente.

·         O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de fieldset são desativados.

·         O novo atributo placeholder pode ser colocado em inputs e textareas.

·         O elemento area agora suporta os atributos hreflang e rel como os elementos a e link

·         O elemento base agora suporta o atributo target assim como o elemento a. O atributo target também não está mais descontinuado nos elementos a e area porque são úteis para aplicações web.

·          

Os atributos abaixo foram descontinuados:

·         O atributo border utilizado na tag img.

·         O atributo language na tag script.

·         O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name.

·         O atributo summary na tag table.

·          

O W3C mantém um documento atualizado constantemente nesta página:http://www.w3.org/TR/2010/WD-html5-diff-20100624/.

Boa prática - Indentação

                Uma prática sempre recomendada, ligada à limpeza e utilizada para facilitar a leitura do código, é o uso correto de recuos, ou indentação, no HTML. Costumamos alinhar elementos “irmãos” na mesma margem e adicionar alguns espaços ou um tab para elementos “filhos”.

Boa prática - Comentários

                A utilização de comentários permite manter o código mais legível, é recomendada a adição de comentários antes da abertura e após o fechamento de tags estruturais (que conterão outras tags). Dessa maneira, nós podemos identificar claramente quando um elemento está dentro dessa estrutura ou depois da mesma.

<!-- início do cabecalho -->

<div id="header">

<p>Esse parágrafo está "dentro" da área principal.</p>

</div>

<!-- fim do cabecalho -->

<p>Esse parágrafo está "depois" da área principal.</p>