Inércia Sensorial

Assumindo que você tenha 6 campos de formulário, os três primeiros para representar a data inicial, (inicio_dia, inicio_mes e inicio_ano), e os outros três para representar a data final (fim_dia, fim_mes, fim_ano), usando o Dojo Toolkit é muito fácil colocar nas datas de início a segunda-feira da semana passada e na data final, o domingo da semana passada.

Aqui vai a função que eu uso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function periodo_semana_passada()
{
    var data_atual = new Date();
 
    // Dia da semana atual (1 segunda, 7 domingo)
    var weekday = dojo.date.format(data_atual, '%u');
 
    // O dia do ano servirá para colocarmos no objeto de data um novo valor
    var dia_do_ano = dojo.date.getDayOfYear(data_atual) - 7;
    var data_inicio = dojo.date.setDayOfYear(data_atual, dia_do_ano - (weekday - 2));
    // O final é a segunda-feira mais seis dias
    var data_fim = dojo.date.add(data_inicio, 'day', 6);
 
    document.getElementById('inicio_dia').value = dojo.date.format(data_inicio, '%d');
    document.getElementById('inicio_mes').value = dojo.date.format(data_inicio, '%m');
    document.getElementById('inicio_ano').value = dojo.date.format(data_inicio, '%Y');
    document.getElementById('fim_dia').value = dojo.date.format(data_fim, '%d');
    document.getElementById('fim_mes').value = dojo.date.format(data_fim, '%m');
    document.getElementById('fim_ano').value = dojo.date.format(data_fim, '%Y');
}

Depois é só chamar a função em algum evento, por exemplo:

1

preencher com a semana <a href="#" onclick="periodo_semana_passada();">passada</a>

O Yahoo lançou hoje uma biblioteca com funções javascript, prontinhas para você puxar e usar.

10.000 linhas de código, completamente comentadas… a documentação, com tutoriais, ainda está em falta, aliás, como outras bibliotecas como Dojo ou Mochikit. Mas sendo o Yahoo quem é, eu coloco mais fé que eles irão sentar e digitar explicando como usar a biblioteca do que dois projetos aonde, se você quer saber como usar, é se vira no Wiki.

A biblioteca javascript do Yahoo tem mais de 30 arquivos, com facilidades para manipulação DOM, arrastar e soltar, gerenciamento de eventos e de XMLHttpRequest, animações, além de sliders, visualização em árvore e calendário.

Ultimamente tenho usado o Dojo, mas é nesse final de semana mesmo que eu vou testar esse pacote do Yahoo, que promete…

A seguinte função de Javascript verifica se o argumento é um número, Tab ou Enter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function numero(evtKeyPress)
{
    var nTecla = 0;
    if (document.all) {
        nTecla = evtKeyPress.keyCode;
    } else {
        nTecla = evtKeyPress.which;
    }
    if ((nTecla > 47 && nTecla < 58)
    || nTecla == 8 || nTecla == 127
    || nTecla == 0 || nTecla == 9  // 0 == Tab
    || nTecla == 13) { // 13 == Enter
        return true;
    } else {
        return false;
    }
}

Para forçar o input a aceitar apenas números, e ainda permitir que o Tab mude de campo e o Enter envie o formulário, chame-a assim:

1

<input type="text" onkeypress="return numero(event);"; />

Bom para chamar em campos de Telefone ou Data!

É fácil mudar a função para aceitar vírgula e ponto, caso você precise validar valores em moeda corrente ou com decimal. Dê um alert(nTecla); e veja os códigos de cada tecla que você precisar deixar passar. 🙂

Para controlar quando uma função Javascript será executada, use setTimeout(), que aceita dois argumentos. O primeiro argumento é a nome da função, e o segundo, em quanto tempo a função será executada (em milisegundos).

(more…)

Para criar um checkbox (ou radio) com o Document Object Model, basta fazer:

1
2
3
4

var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'name1';
checkbox.id = 'name1';

Para criar um input radio, basta mudar a propriedade type para “radio”.

Para ter o HTML do checkbox:

1
2
3

var div1 = document.createElement('div');
 
div1.appendChild(checkbox);

Bastando usar div1.innerHTML no seu Javascript para mostrar o checkbox.

Criar tabelas dinamicamente com o Document Object Model, adicionando e removendo linhas e células, é extremamente fácil. Basicamente envolve a intercalação das funções createElement e appendChild.

Este artigo não seria possível sem a incrível documentação do Mozilla, especialmente “Traversing an HTML Table with JavaScript and DOM Interfaces“.

(more…)

Esta pequena função foi feita copiando parte do código encontrado no phpMyAdmin. Eu precisava colorir linhas de tabelas conforme o mouse passava por elas, e colorí-las também quando o usuário clicasse nelas.

No Javascript original do phpMyAdmin, o style com as cores de fundo das células estão dentro do <td>. Além disso, como todas as células tem a mesma cor de fundo, bastava pegar a cor do primeiro <td> e aplicá-la na linha inteira.

Como minhas definições de estilo estão dentro de arquivos .css, tive de mudar a maneira de pegá-las. E como algumas colunas possuíam cores de fundo, e outras não, criei uma matriz para guardar os valores originais. Então quando o usuário passa o mouse em um <tr> com esta função, as cores de fundo definidas no arquivo .css são armazenadas, e recuperadas quando o mouse deixa a linha.

(more…)

O pré-carregamento de imagens em Javascript ajuda com troca de imagens, por exemplo nos eventos de clique ou passagem do mouse (onmousedown e onmouseover), pois o visitante não precisará esperar ser carregada a imagem apenas quando o navegador disparar o evento.

O pré-carregamento é feito com o seguinte código (lembre-se de colocar isso dentro de <script> e/ou <head>:

1
2

var imagem = new Image();
imagem.src = "caminho/arquivo.gif";

O código inicia um novo objeto do tipo Image e especifica o atributo scr com o caminho da imagem. Para os mais espertinhos da platéia, sim, isso é o mesmo que:

1

<img src="caminho/arquivo.gif" />

Para cada imagem a ser pré-carregada, você deve iniciar um objeto e especificar o src, duas, três, quatro vezes e assim por diante.

Para facilitar, vale a pena colocar numa matriz todas as imagens que você deseja carregar e apenas dar um laço nela.

1
2
3
4
5
6
7

// Lista do caminho e nome dos arquivos de imagem. Pode ter quantas você quiser :)
imagem_lista = Array('arquivo.gif', 'arquivo2.gif', 'arquivo3.gif');
imagem_qtd = imagem_lista.length;
for (i = 0; i < imagem_qtd; i++) {
    var preload = new Image();
    preload.src = imagem_lista[i];
}

E pronto 🙂 Todas as imagens da matriz imagem_lista serão carregadas pelo navegador quando o script acima rodar.

Depois de penar por uma hora para descobrir uma maneira multi-plataforma de recuperar as posições vertical e horizontal de um objeto na tela, achei uma solução.

Multi-plataforma no sentido que testei no Firefox 1.0.7, IE 6 e Opera 8.5 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function pegarPosicaoX(objeto)
{
    var atual_left = 0;
    if (objeto.offsetParent) {
        while (objeto.offsetParent) {
            atual_left += objeto.offsetLeft
            objeto = objeto.offsetParent;
        }
    }
    return atual_left;
}
 
function pegarPosicaoY(objeto)
{
    var atual_top = 0;
    if (objeto.offsetParent) {
        while (objeto.offsetParent) {
            atual_top += objeto.offsetTop
            objeto = objeto.offsetParent;
        }
    }
    return atual_top;
}

Para usar, supondo que temos um objeto com um id=”exemplo” na página, descobrimos a posição dele fazendo:

1
2
3

elemento = document.getElementById('exemplo');
x = pegarPosicaoX(elemento);
y = pegarPosicaoY(elemento);

Em um próximo post mostrarei porque cargas-da-água precisei descobrir a posição de um elemento (no meu caso, foi uma imagem).

No dia 03/09/2005, publiquei uma introdução ao Ajax. Como dei uma rápida passada nos assuntos principais, como DOM e o XMLHttpRequest, resolvi que era a hora de mostrar mais exemplos práticos, de situações corriqueiras ou interessantes, onde você pode usar Ajax e a biblioteca CPAINT.

Então, vou ensinar como mudar os valores de um <select>, também chamado de combobox ou menu drop-down. E em um próximo artigo, como esses valores podem ser trocados por um retorno XML do Ajax.

(more…)