Category ArchiveJavascript



SOS Javascript & Javascript 13 Nov 2007 01:26 pm

SOS Javascript #3 - Imprimir conteúdo específico

Recebi essa do Breno Saraiva:

"...o imprimir que você disse que tinha feito.. não encontrei no seu blog...

então decidi mandar um email...eu tentei fazer aqui mais ele ta imprimindo

todo o blog...tava pensando... como eu vou estar dentro do post... não tem como 

eu fazer botão imprimir dentro do post.. e selecionar só o que eu quero

imprimir???

Obrigado"

Vou ser sincero me surpreendi, nem eu lembrava mais de ter comentado sobre isso, fiz faz tempo no meu trabalho.

Peguei ele hoje, traduzi, pois estava tudo feito em italiano, e modifiquei para funcionar de acordo com minha biblioteca de scripts.

Serei sincero, não fiz muitos testes, sei que o original funcionava bem, pois testei bastante, esse como posso ter perdido algo enquanto traduzia, ou modificava, pode apresentar algum erro, conto com vocês para “denunciarem” :D

Testei no FF2, IE7, Opera9, Netscape e Safari3 para windows, nestes funcionou bem, não testei no IE6, estou sem aqui.
No IE6 do multiple IE funcionou, mas como sei que tem muita diferença, não da pra levar a sério.

Antes de mais nada devo dizer que a função “print” do Javascript realmente imprime toda a pagina, não tem como escolher o que quer ser impresso, dai partimos para as gambiarras, ou gambware :D

O que fiz no script?

Criei um iframe por código, que carrega o arquivo “imprime.htm”, é este arquivo “imprime.htm” que coloquei a chamada para a função “print”.

Ao clicar em imprimir eu pego o conteúdo da div indicada e jogo para dentro desse iframe, logo ele vai dar o print no iframe, e imprimir somente o conteúdo do mesmo.

E como funciona isso tudo, o que tenho que mudar?

Estou disponibilizando um arquivo de modelo, que é o “index.htm”, como verão neste arquivo, eu incluo 2 arquivos javascript, “fs.js” e “fsprint.js”.

O primeiro são algumas funções prontas para agilizar o trabalho e o segundo é o controle da impressão, onde os objetos são criados etc..

Tem ainda o arquivo “imprime.css”, que é o CSS para poderem estilizar a janela de pré-visualização da impressão.

Para mandar imprimir depois de qualquer lugar da pagina basta inserir o seguinte código no link:

onclick="imprime('id_do_objeto_a_ser_impresso')"

Clique no link abaixo para baixar e ver a pagina de teste:

FS Print - Imprimir com Javascript

Duvidas? erros? sugestões? como sempre, muito bem vindos, escrevam e responderei assim que possível :D

Javascript 07 Nov 2007 12:33 pm

Trabalhando com eventos no Javascript II

Este post é um complemento deste post:
Trabalhando com eventos no javascript

Neste primeiro exemplo expliquei o que são eventos em javascript, como são geridos e dei alguns exemplos.

Agora chegou a hora de explicar de forma mais detalhada os eventos para alguns objetos específicos, nos aprofundar um pouco mais no tema.
Podemos dizer que o Javascript trabalha basicamente com 5 tipos de eventos, form, image, image map, link, e window events.
Estes eventos devem vir sempre associados a tags HTML.

Vamos detalhar um pouco cada um então:

Image Events - Eventos de imagem

  • abort - Quando o usuário cancela a acção.
  • error - Quando ocorre um erro.
  • load - Quando o objeto for completamente carregado.

Image Map Events - Eventos de Mapa de imagens

  • mouseOut - O mouse esta saiu do link mapeado.
  • mouseOver - O mouse esta sobre o link mapeado.

Form Events - Eventos de Formulário

  • blur - Quando o campo perde o foco.
  • change - Se foi modificado é ativado ao perder o foco.
  • focus - Quando o campo recebe foco.
  • reset - Quando o formulário é limpo.
  • select - Quando algum texto for selecionado
  • submit - Quando um formulário é enviado.

Link Events - Eventos de ancora

  • click - Um objeto foi clicado
  • mouseOut - O mouse esta sobre o objeto
  • mouseOver - O mouse saiu de cima do objeto

Window Events - Eventos de Janela

  • blur - Perdeu o foco da janela.
  • error - Um erro ocorreu.
  • focus - A janela recebeu o foco.
  • load - A janela foi carregada.
  • unload - O objeto foi fechado.

Estes são boa parte dos eventos possíveis, que podem ser associados a diversos objetos do documento, todos devem ser usados indicando que aguarda que o evento aconteça, para tanto, basta inserir “on” a frente do nome do evento.

Por exemplo, se quiser pegar quando ocorre um erro com o evento “error”, basta usar dentro do objeto:
onerror=’codigojavascript’

Peço desculpas pela falta de posts, em breve pretendo voltar a ter a frequência de antes, mas preciso terminar algumas coisas antes por aqui.

Mas não deixarei de postar, sempre que surgir um idéia diferente e sobrar um tempinho estarei aqui.

Caso tenham alguma duvida sobre algo, ou tenham algo que precisam e não conseguirem fazer sintam-se a vontade para perguntar aqui no blog, ou enviar um email.

Sempre que possível ajudarei.

Javascript & Desenvolvimento 30 Oct 2007 06:19 am

Fim do primeiro desafio de linguagens Webly

Para quem não lembra, postei aqui no blog mesmo sobre um desafio de linguagens que estava ocorrendo no forum Webly, onde deveríamos sortear jogos entre 16 seleções pré definidas, até chegar no campeão.

Fiz em Javascript e terminei com 347 caracteres e o código segue abaixo para quem quiser ver:

Comentado:

// Coloca de forma aleatoria o ARRAY e gera aleatoriamente os gols
function c(){
    return Math.floor(Math.random()*6)-1;
}
// Aqui crio uma string, que depois explode com split, vira uma array,
// que mando sortear usando a funcao "c"
t="Itália,França,Alemanha,Portugal,Brasil,Argentina,Inglaterra,Ucrânia,Espanha,
Holanda,Suíça,Suécia,Austrália,México,Uruguai,Gana".split(",").sort(c);

// atalhos para os textos
a = ["Oitavas de f","Quartas de f","Semif","F"];
f = "inal:";

//atalho para usar quebra de linha
q="n";
// iniciando a variavel que guardara todo o texto que sera exibido
// no final
j="";

// um laço para rodar entre todas as etapas
for(i=0;i<4;i++){
    // coloco quebra de linhas, depois o texto indicando
    // que etapa estamos
    // Oitavas, quartas, semi e final
    j+=q+q+a[i]+f;

    // Inicio array temporario
    w=[];

    // Segundo laço para varrer o array, sortear os gols e
    // eliminar os perdedores
    for(o=0;o
        // enquanto os gols nao forem diferentes fica preso no laço
        while((p=c()+1)==(s=c()+1));

        // Poe o resultado e mostra o vencedor de cada jogo, tudo
        // dentro da string
        // e ainda guarda o vencedor no array temporario “w”
         j += q+t[o]+” “+p+” x “+s+” “+t[o+1]+” - “+(w[o/2] = p>s ? t[o] : t[o+1]);
    }
    // passa o valor do array temporario “w” para o principal “t”
    t=w;
}
// Imprime na tela todos os resultados
alert(j+” campeão”);

Somente o código:

function c(){
    return Math.floor(Math.random()*6)-1;
}
t="Itália,França,Alemanha,Portugal,Brasil,Argentina,Inglaterra,Ucrânia,Espanha,
olanda,Suíça,Suécia,Austrália,México,Uruguai,Gana".split(",").sort(c);

a = ["Oitavas de f","Quartas de f","Semif","F"];
f = "inal:";

q="n";
j="";
for(i=0;i<4;i++){
    j+=q+q+a[i]+f;

    w=[];

    for(o=0;o
        while((p=c()+1)==(s=c()+1));

         j += q+t[o]+” “+p+” x “+s+” “+t[o+1]+” - “+(w[o/2] = p>s ? t[o] : t[o+1]);
    }
    t=w;
}

alert(j+” campeão”);

Loucura total, mas foi muito divertido participar do desafio.

Javascript & Desenvolvimento 17 Oct 2007 12:29 pm

1º Quebra-pau De Linguagens Webly, Are you ready?

Estou postando aqui o link do iEvolution/Webly Fóruns, exatamente no ponto onde fala do Desafio de linguagens Webly.

O objetivo desse desafio será avaliar não só o programador, mas também as facilidades de cada linguagem.

Consiste basicamente em formular um código que pega 16 seleçoes de futebol, de nomes fixos e já informados, ordena-las como se fosse uma copa do mundo.
Começando das oitavas de final, fazer essas 16 fazer um jogo e se eliminarem, indo paras quartas, depois semi, e a final.
O código tem que randomizar as oitavas de final, e os resultados das partidas, sendo que os resultados devem conter valor máximo de 5.

Os detalhes de forma exata poder ver no fórum do iEvolution/Webly Fóruns.

Se você sabe programar em qualquer linguagem participe, não ganha nada além do prazer da disputa, mas é muito divertido.

Ganha quem fizer com menor numero de caracteres, caracteres como o $ do php não contam para equilibrar a disputa.

Eu em Javascript estou com um código até agora de 489 caracteres, tem uma boato rondando por la que algum maluco ta rondando os 300 caracteres, deve ser Python.

Entrem no fórum se informem melhor e escrevam ai como esta o andamento de vocês :D

framework & Ajax & Javascript 04 Oct 2007 07:58 am

FS Montaform continuando

Só para escrever que o script de montar formulários continua sendo atualizado, nao estou escrevendo sempre que atualizo, mas sugiro entrarem na pagina caso queiram acompanhar.
Para facilitar no topo tem a data da ultima atualização e horário, sempre do Brasil.
Acho algo bem interessante para analisarem o código, estou trabalhando os os arquivos fs.js que é o que pretendo transformar um dia em um framework :D
o montaform_core.js que é o coração do sistema, e o fsdrag.js, o responsável por controlar os movimentos dos objetos.

Todos precisam ainda de aprimoramento.

Esses códigos estão nos seguintes endereços:

http://www.fazedordesite.com/exemplos/montaform/montaform_core.js
http://www.fazedordesite.com/exemplos/montaform/fs.js
http://www.fazedordesite.com/exemplos/montaform/fsdrag.js

Tem ainda o fsslide.js que faz o slide dos menus a esquerda:

http://www.fazedordesite.com/exemplos/montaform/fsslide.js

Dêem uma olhada em como esta ficando:

FS Montaform

Lembro a todos que é apenas um script conceitual, com foco realmente no aprendizado, meu, e de quem quiser acompanhar.

« Previous PageNext Page »