Como usar o confirm() no javascript

Publicado em Publicado por gserrano

Muitas vezes é necessário interagir com o visitante que está no seu site, e a forma mais trivial é usar o comando confirm() do javascript para isso.

Com ele você pode parar o fluxo que está acontecendo exibindo uma caixa de diálogo – na qual a mensagem exibida é passada como parâmetro para esse comando – na qual o usuário tem a opção de escolher entre Sim e Não (ou Ok e Cancelar, dependendo do browser). Quando o usuário faz a seleção, o comando retorna true ou false, o que possibilita que o fluxo seja alterado.

Um exemplo de uso:

if(confirm("Deseja realmente fazer isso?")) {
  //faz algo, como chamar uma função que apaga dados
} else {
  alert("Ok, você não quer mesmo fazer isso…");
}

Simples e prático!

Como contar arquivos em uma pasta usando ASP (FSO)

Publicado em Publicado por gserrano

Na intranet de um cliente existe um módulo para distribuição de arquivos para os clientes dele, para isso eu utilizo o File System Object (FSO), que navega pelas pastas especificadas do sistema (onde meu cliente sobe diversos arquivos por FTP), identifica os arquivos e distribui cada arquivo para o respectivo usuário final (o cliente do meu cliente).

Com poucos arquivos a distribuição acontece tranquilamente, os arquivos são movidos para a pasta de cada usuário, cada usuário recebe uma notificação por e-mail com o link para a área de login do sistema com acesso aos arquivos. Porém todo o servidor tem um limite para execução de scripts e muitas vezes simplesmente aumentar esse limite de tempo de execução não é recomendável, pois se alguma coisa der errado (como um loop infinito) vai ficar sobrecarregndo o servidor.

New Folder

Isso sim é organizar os documentos em pastas

 

Começaram a acontecer problemas quando existiam muitos arquivos para mover, pois além da listagem de todos os arquivos o sistema segue uma lógica para identificar de qual usuário é cada arquivo para que a distribução seja feita de forma correta.

A solução para não retornar o erro de limite de tempo excedido e não aumentar loucamente este limite (o usuário certamente vai achar que deu erro quando uma página demorar demais para carregar) foi limitar o número de arquivos movimentados por vez, isso permite dar um feedback entre a "paginação" evitando que o usuário pense que o aplicativo travou ou deu erro e clique repetidamente em botões da interface. Eles gostam disso.

Segue uma parte da solução que adotei.

 

Como contar quantos arquivos tem em uma pasta utilizando o FSO?

Quando procurei informações de como contar quantos arquivos existiam em uma pasta a maioria envolvia um loop por todos os arquivos, e isso me lembrou minha experiência com POG: Não programe isso!

Twittei para ver se alguém conhecia uma solução melhor do que um loop, @chrisloki, @cleiverrr e @alinedecampos responderam com idéias/sugestões, não achei nenhuma documentação completa do FSO (ok, só dei uma googleada básica) mas resolvi testar algumas coisas como UBound (para pegar o índica mais alto de uma array) e depois um count.

O UBound não funciona, o array de arquivos não pode ser tratado como um normal, mas existe o comando COUNT no FSO, segue abaixo o script para contar quantos arquivos existem em uma pasta:

 

dirtowalk = "../web_users/gssolutions/arquivos/"

Set fs = CreateObject("Scripting.FileSystemObject")

Set f = fs.GetFolder(server.mappath(dirtowalk))

Set fc = f.Files

total = fc.count

response.write "Total de arquivos na pasta " & dirtowalk & ": " & total

 

É isso aí, um simples .count no "array" de arquivos retorna o número de arquivos dentro da pasta. Caso existam subpastas, você teria que criar um loop para ir navegando e somando os arquivos dentro de cada subpasta…

Mais funcional e elegante do que um "For Each arquivo In fc"!

Obrigado a todos os que ajudaram e responderam meus pedidos de socorro no twitter, espero ter ajdado também! 🙂

Usando o comando eval()

Publicado em Publicado por gserrano

Javascript não é uma linguagem tipada. Disso já sabemos. Então, muitas vezes, as coisas não funcionam exatamente como esperamos.

Um caso que acontece muito pode ser simulado nesse exemplo que segue: um formulário com dois campos e uma rotina que executa a soma dos valores dos dois campos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemplo de soma</title>
<script type="application/javascript">
    window.onload = function() {
        document.getElementById("calcular").onclick = function() {
            var val1 = document.getElementById("campo1").value;
            var val2 = document.getElementById("campo2").value;
            alert(val1 + val2);
        }
    }
</script>
</head>
<body>
<h1>Soma – exemplo</h1>
<form action="#" method="post">
    <label for="campo1">campo 1:</label><input type="text" id="campo1" />
    <label for="campo1">campo 2:</label><input type="text" id="campo2" />
    <input type="button" id="calcular" value="calcular" />
</form>
</body>
</html>

Faça um teste preenchendo os inputs com valores numéricos, e clique no botão de calcular. Se você preencher com, por exemplo, 5 e 3, ao clicar no botão terá um alert() com o valor 53.
O que aconteceu? O interpretador do javascript entende que são strings (textos), e a soma que ele faz é, na verdade, uma concatenação das strings.

Como resolver isso?

Existe um comando nativo do javascript, eval(param), que recebe um parâmetro e o interpreta. Mude a linha que faz a soma para

alert(eval(val1) + eval(val2));

E você verá que a soma, que antes era uma concatenação, vai ser feita da forma esperada: somando realmente os valores.

Mas, fica o alerta: usar o comando eval() deve sempre ser muito bem analisado se vale a pena. Uma vez que ele interpreta qualquer comando que está em uma string, você acaba abrindo o seu código para ser executado por terceiros.

Num próximo post mostro como fazer essa soma de uma forma mais elegante!

Como imprimir aspas no Javascript

Publicado em Publicado por gserrano

Esta semana eu liberei novamente a Vitrine Fácil Buscapé, que permite a criação e gerenciamento de Vitrines personalizadas para o programa de afiliado Buscapé. Quando estava liberando a aplicação em beta tive problemas para implementar um sistema de rastreamento de clicks.

Muito bem, voltando ao assunto vou explicar o contexto do meu problema, eu tinha um link que era impresso em Javascript, e precisava adicionar o atributo onClick nele, que ficaria no resultado final assim:

onClick="funcao(´var1´,´var2´)"

Mas no Javascript, se eu fosse usar um document.write ou qualquer outro método de alguma biblioteca (jQuery, no meu caso) quando eu utilizasse a aspa simples automaticamente estaria fechando a string (não sei se string é o correto para o que eu quero definir, sorry) do Javascript, ou seja, estaria "cortando" a minha linha que seria exibida no código pela metade.

Uma pesquisa rápida em fóruns e encontrei a solução: você precisa utilizar uma barra invertida (lembrouexpressões regulares, utiliza a barra para transformar o próximo caracter em "normal"), então ficaria assim no Javascript:

document.write("onClick="funcao(´var1´,´var2´)" ")

Antes das duas aspas VERMELHAS você deve inserir uma barra invertida, não consegui exibir ela aqui pois o sistema de publicação "engole" as barras (depois irei verificar).

Utilizei o document.write apenas como exemplo da possibilidade de uso, no meu caso utilizei as barras invertidas em um $("#link123").html("onClick….") sem problema nenhum.

 

Uma dica simples que para quem trabalha com Javascript não deve ser novidade, mas lembro de ter tido problemas com isso em um passado distante, como tive o mesmo problema agora resolvi fazer o post para ajudar quem pode precisar (e evitar ter que googlear novamente este mesmo problema).

 

Dúvidas, dicas e críticas nos comentários 🙂

 

Flex – o meu Hello World

Publicado em Publicado por gserrano

Por vários motivos, comecei a dar uma olhada em Flex, o framework da Adobe para criação de RIAs (Rich Internet Application) baseado no Flash.

Nunca me atrevi a abrir um .fla na minha vida; pelo pouco que conheci do Flash na épcoa do action script 1 e 2, achei que era muito confuso para o resultado final, e que o AS1 e 2 eram voltados a designers (nada contra) que precisavam de poucos recursos nos seus swfs. Por isso que quando saiu o action script 3 eu já fiquei mais animado, pois ele estava muito melhor estruturado, com pacotes de componentes melhor divididos, boa orientação a objetos (e seus paradigmas), documentação online

Quem já trabalhou com qualquer linguagem orientada a eventos (VB, Delphi, C++ Builder) se sente muito confortável, e quem está acostumado a OO só tem o trabalho de descobrir as features do framework. A SDK pode ser baixada livremente.
A Adobe comercializa o Adobe Flex Builder, que permite uma maior facilidade na implementação das interfaces.

Eu não baixei pois queria trabalhar direto no mxml, que é o formato (uma espécie de xml) concebido para os arquivos onde são escritos os códigos de um projeto Flex.

Basicamente, os passos para um Hello World – algo simples – são, além de ter a SDK do Flex na sua máquina, criar o .mxml e compilar o mesmo, para gerar o swf.

O mxml ficou da seguinte forma (pode fazer download aqui):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:explorer="*"
    width="100%" height="100%" pageTitle="Hello World">
   
    <mx:HDividedBox width="100%" height="100%">
        <mx:Text>
            <mx:text>Olá Mundo!</mx:text>
        </mx:Text>
    </mx:HDividedBox>
   
</mx:Application>

Application é o nó pai do documento, seria como no html a tag <html>. Nele, digo que o swf gerado terá largura e altura de 100%.

Então insiro um objeto HDividedBox, que insere uma divisão horizontal nela, e dentro dela uma área de texto (Text).

Com isso, é só salvar (salvei como hello.mxml) e compilar o mesmo, com o comando

../bin/mxmlc -use-network=false hello.mxml

*aponte ../bin para a pasta bin que fica dentro da SDK do Flex da sua máquina.

O swf gerado foi esse aqui

O que achei do Flex? A vantagem é a facilidade na componentização de elementos da interface, com uma qualidade gráfica que CSS/javascript não alcançam com facilidade.