Inércia Sensorial

02 de August de 2006

Preencher datas da semana anterior com Javascript

Filed under: Javascript — inerte @ 11:21

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>

14 de February de 2006

Biblioteca Javascript do Yahoo

Filed under: Javascript — inerte @ 21:35

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…

13 de December de 2005

Validação de caracteres numéricos

Filed under: Javascript — inerte @ 10:09

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

12 de December de 2005

setTimeout() e clearTimeout()

Filed under: Javascript — inerte @ 09:46

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…)

29 de November de 2005

Checkbox e radio com DOM

Filed under: Javascript — inerte @ 16:10

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.

24 de November de 2005

Tabelas dinâmicas

Filed under: Javascript — inerte @ 18:33

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…)

22 de November de 2005

Rollover em linhas de tabelas, clique para marcação

Filed under: Javascript — inerte @ 13:04

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…)

11 de November de 2005

Pré-carregar imagem

Filed under: Javascript — inerte @ 14:16

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.

09 de November de 2005

Posições vertical e horizontal de um elemento

Filed under: Javascript — inerte @ 17:57

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

08 de October de 2005

Select dinâmico

Filed under: Javascript — inerte @ 14:49

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…)

« Newer PostsOlder Posts »

Powered by WordPress