Com um visual e funcionamento muito parecido ao explorer do Windows Vista e permite ainda o upload de ficheiros para o servidor.

Corre nos seguintes browsers:

• Internet Explorer 7
• Mozilla Firefox 2 or later
• Safari 3.0.4 or later
• Google Chrome 0.3.154.9 or later
• Netscape Navigator 9 or later

Pode encontrar outras APIs como map drive em http://www.webdavsystem.com

Mats Bryntse “had an idea about checking the most popular javascript frameworks & APIs to see how they differ in terms of global namespace pollution. This page loads all the frameworks separately in an iframe and compares the window object against the one of a fresh iframe. I also included information about which builtin JavaScript classes have been augmented, not sure how that would be useful but it shows a difference in architectural approach between the frameworks. You can click a row to see the details about the global symbols in the framework/API.

The results vary more than I’d expected and it’s interesting to see the different namespacing strategies at play. YUI/Jquery/Ext keep the numbers down by putting everything in one global object. It seems like Microsoft is using their own kind of namespacing using the $ sign as a namespace delimiter rather than using real object properties as the rest of the frameworks do.”

You can check this out via his checker page. An interesting read and you can narrow in on APIs of your choice.

We like to talk about how evil global variables are, but I wonder if we take this a touch too seriously sometimes. Sure there can be collisions and the like, but a lot of projects are doing just fine

via : ajaxian.com

Packed.it é a solução para a Web 2.0, é compatível com a maioria dos browsers e com as melhores práticas em termos de acessibilidade.

artigo completo em :

http://www.maxkiesler.com/index.php/weblog/comments/how_to_minimize_your_javascript_and_css_files_for_faster_page_loads/

http://www.packed.it/

As expressões regulares são padrões utilizados para encontrar combinações de caracteres em Strings. É uma ferramenta muito poderosa porque consegue resumi em algumas linhas de código pesquisas altamente complexas. O principal uso de expressões regulares em Javascript seria na validação de dados.

Em JavaScript, expressões regulares também podem ser tratadas como um objeto. Esses padrões são usados com os métodos exec e test do objeto RegExp, e com os métodos match, replace, search, e split do objeto String.

Algumas das traduções deste artigo não são totalmente fieis. Espero que consigam entender o que a mensagem está passando.

Entendendo as Expressões Regulares

As expressões regulares podem ser criadas de duas formas:

- Escrevendo uma expressão regular:

seek = /padrao/

padrao é a string padrão para ser usada na pesquisa.

- Criando uma instancia do objeto RegExp:

seek = new RegExp(“padrao”);

padrao é a string padrão para ser usada na pesquisa.

Regular Expression é um padrão de texto que consiste de simples caracteres (da letra a até z, ou de 1 até 9) e de uma combinação de caracteres simples e especiais.

Os padrões para a pesquisa de caracteres estão divididos em categorias. Segue abaixo uma lista dos grupos e respectivos caracteres especiais.

Busca posicionada

Literais

A barra invertida (\) é também usada quando você deseja encontrar um caractere especial literalmente. Por Exemplo, se você deseja encontrar o símbolo “$” ao invés de ter um sinal no final da string, use a barra invertida: /\$/

Classes de Caracteres

Repetição

Alternação & Agrupamento

Backreferences

Modificadores de Padrões

Em adição aos caracteres padrões para buscar, você pode usar switches para fazer uma pesquisa global, case– insensitive (ignora minúsculas e maiúsculas) ou ambas.

Entendendo os métodos usados pelas expressões regulares

Quando você quer saber se o padrão foi encontrado na string, use o método test ou search; para maiores informações (mas com execução mais lenta) use o método exec ou match. Se você usar exec ou match e se obter sucesso, esses métodos retornaram um array e atualizaram as propriedades do objeto regular expression associado e também de objetos pré-definidos, RegExp. Se a pesquisa falir, o método exec retornará nulo (no qual converterá para false).

Programando Expressões Regulares

A partir do momento que sabemos quais caracters desejamos devemos partir para a criação do padrão que sera utilizado para pesquisar a String.

Vamos, a partir de agora, criar alguns exemplos práticos de como utilizar Expressões Regulares.

No nosso primeiro exemplo vamos pesquisar na string um padrão que é composto da palavra “de”. O O resultado obtido nos mostrará onde se encontra a primeira e a ultima ocorrência das pesquisas.

Exemplo:

1 <SCRIPT LANGUAGE=”JavaScript”>
2 padrao=/de/g;
3 // padrao = new RegExp(“de”,”g”);
4 texto = “Brasil ganha a medalha de ouro no volei de praia.”;
5 document.write(“<b>padrao » </b>” + padrao + “<br>”);
6 document.write(“<b>Texto utilizado » </b>” + texto + “<br>”);
7 document.write(“O padrao utilizado foi encontrado no <b>” + texto.search(padrao) + “º </b>caractere.<br>”)
8 padrao.exec(texto);
9 document.write(“O ultimo valor encontrado e” o caractere<b> ” + padrao.lastIndex + “º </b>.”);
10 </SCRIPT>

Linha 2 – Declaração da variável padrão com a seqüência de caracteres a serem utilizados nas pesquisas.

Linha 3 – Tem o mesmo funcionamento da linha 2, porém vai criar uma instância do objeto RegExp com a seqüência de caracteres.

Linha 7 – Utilização do método search() para encontrar o padrao na variável texto.

Linha 8 – Utilização do método exec para pesquisar a seqüência padrão na variável texto.

Linha 9 – Utilização da propriedade lastIndex para retornar a última vez que a seqüência de caracteres foi encontrada na variável texto.

Clique aqui para ver o exemplo 01.

Exemplo 02

Este exemplo é um pouco mais complexo. Ele valida a entrada de dados por parte do usuário. O usuário vai digitar um número de telefone como proposto no exemplo.

1 <SCRIPT LANGUAGE = “JavaScript”>
2 padrao = /\(?\d{3}\)?\d{3}-\d{4}/;
3 function testInfo(x) {
4 a = x.Phone.value;
5 OK = padrao.exec(a);
6 if (!OK){
7 window.alert (“Este numero de telefone esta incorreto!”);
8 x.Phone.focus();
9 } else {
10 window.alert (“Obrigado, seu numero de telefone e” » ” + OK[0]);
11 }
12 }
13 </SCRIPT>

Linha 2 – Declaração da variável padrao com a seqüência de caracteres a serem utilizados nas pesquisas.

Linha 3 – Declaração da função testInfo() que recebe um parâmetro com o objeto form a ser utilizado

Linha 4 – Declaração da variável a que armazena o valor do parâmentro x (o formulário) seguido do nome do campo e respectivo valor

Linha 5 – Declaração da variável OK que recebe o valor da verificação se o padrão re está contido na variável a

Linha 6 a 11 – Verificação da negação da variável OK. Se retornar true, uma caixa de mensagem será mostrada com uma mensagem de erro e o campo em questão receberá o foco. Se retornar false uma caixa de mensagem será mostrada com uma mensagem e o número do telefone.

Com todo o código Javascript criado, vamos à criação do código HTML.

1 Digite um número de telefone, como por exemplo » (201)465‑7899.
2 <FORM onSubmit=”return false;”>
3 <INPUT TYPE=”text” NAME=”Phone” onChange=”testInfo(this.form);”>
4 <input type=”button” value=”valida” onClick=”testInfo(this.form);”>
5 </FORM>

Linha 2 – O evento onSubmit retorna false para o formulário não seja enviado.

Linha 3 – O evento onChange da caixa de texto chama a função testInfo() e envia como parâmetro o objeto form.

Linha 4 – O evento onClick do botão chama a função testInfo() e envia como parâmetro o objeto form.

Clique aqui para ver o exemplo 02.

Exemplo 03

Neste exemplo vamos trabalhar com mais métodos e entender onde podemos chegar com apenas algumas linhas de código. Aqui nos dividimos uma string, colocamos seu resultado em uma matriz e ainda ordenamos a mesma.

1 <SCRIPT LANGUAGE=”JavaScript1.2″>
2 nomes = new String (“Thiago Prado ; Bill Gates ; Steve Jobs; Michael Dell ; Chris Hand “);
3 document.write (“<b>String Original</b>” + “<br>” + “<br>”);
4 document.write (nomes + “<br>” + “<br>”);
5 padrao = /\s*;\s*/;
6 listaNomes = nomes.split (padrao);
7
8 padrao = /(\w+)\s+(\w+)/;
9 novalistaNomes = new Array;
10 document.write (“<b>Apos ter sido dividido pela Expressao Regular </b>” + “<br><br>”);
11 for ( i = 0; i < listaNomes.length; i++) {
12 document.write (listaNomes[i] + “<br>”);
13 novalistaNomes[i] = listaNomes[i].replace (padrao, “$2, $1″)
14 }
15 document.write (“<br><b>Nomes revertidos</b>” + “<br><br>”);
16 for ( i = 0; i < novalistaNomes.length; i++) {
17 document.write (novalistaNomes[i] + “<br>”)
18 }
19 novalistaNomes.sort();
20 document.write (“<br> <b>Ordenados</b>” + “<br><br>”);
21 for ( i = 0; i < novalistaNomes.length; i++) {
22 document.write (novalistaNomes[i] + “<br>”)
23 }
24 </SCRIPT>

Linha 2 – Declaração da variável nomes com alguns nomes a serem utilizados no código

Linha 3 a 4 – Mostra na tela a variável nomes sem nenhuma alteração

Linha 5 – Declaração da variável padrao com a seqüência de caracteres a serem utilizados nas pesquisas.

Linha 6 – Criação da matriz listaNomes com a divisão da string nomes a partir do padrão utilizado.

Linha 8 – A variável padrão recebe nova seqüência de caracteres a serem utilizados nas pesquisas.

Linha 10 a 14 – Mostra na tela a lista de Nomes depois da divisão

Linha 13 – A matriz novalistaNomes(indexada da variável do loop) recebe o valor da matriz listaNomes (indexada da variável do loop) que utiliza o método replace para trocar o primeiro nome pelo segundo. Isso é possível por causa do uso da expressão regular.

Linha 15 a 18 – Mostra na tela a lista de Nomes revertidos

Linha 19 – Utilização do método sort para ordernar a matriz novalistaNomes

Linha 20 a 23 – Mostra na tela a lista de Nomes Ordenados

Clique aqui para ver o exemplo 03.

Regular Expression é um assunto muito amplo, e não é possível abordá-lo em apenas alguns exemplos. Mas para o futuro eu vou preparar uma outra matéria com códigos mais poderosos para mostrar o que realmente quero dizer com “resumi em algumas linhas de código pesquisas altamente complexas”.

Fonte: Thiago Prado

O Mochikit é o filho caçula de Bob Ippolito (o participante principal) e está disponível no site do Mochikit. O pacote principal tem aproximadamente 90 Kb (compactado), mas você pode carregá-lo em módulos separados. A biblioteca também é distribuída com a versão do framework do Python para web, chamada de TurboGears.

Nas palavras do Bob:

“Nós analisamos todas as idéias que poderíamos encontrar apartir da nossa experiência com Python e foram adaptadas ao mundo louco do JavaScript”

Assim, em uma visão macro, o Mochikit extrai algumas funcionalidades do Python para sua API. Se você é familiar com o Python, você terá um aprendizado imediato com o Mochikit, embora tenha uma API simples que seja razoavelmente fácil de utilizar. De todas as bibliotecas ressaltadas neste artigo, a API do Mochikit transmite ser a mais “preparada”.

Quando estiver começando com o Mochikit, você precisará:

1. Assistir ao screencast do Bob.
2. Começar utilizando o interpretador interativo excelente do Mochikit. Esta é uma boa maneira de entender a biblioteca e ter uma compreensão básica de como Mochikit trabalha.

O básico sobre Mochikit

Ao trabalhar com o DOM, o Mochikit traz alguns truques na luva:

var warning = P(
 { 'class' : 'warning' },
 "Por favor insira um ", STRONG(null, "endereço de e-mail válido")
);
swapDOM(document.getElementById("notificacoes"), warning);

Este código usará os métodos W3C DOM relevantes para os nós da árvore equivalentes ao código HTML seguinte:

<p class="warning">Please provide a <strong>valid email address</strong></p>

O código do Mochikit está quase mais limpo do que a sintaxe do HTML!

O módulo do Mochikit.DOM contem também outros métodos para a manipulação fácil do DOM, tal como o método do swapDOM mencionado acima e toHTML (que converte um nó de DOM ao HTML que representa).

Assim como na manipulação de eventos, o Mochikit foi projetado para que seja implementado no módulo de Mochikit.Signal. Foi baseado em torno do conceito de conectar um ouvinte a um sinal que fosse emitido por um objeto. Todos os eventos regulares do DOM são sinais, mas você pode criar seus próprios também. O método conectar faz todo o trabalho aqui:

// conecta o sinal do onclick no elemento com id="thing"
// para a função showDialog, com pontos para este elemento.
connect($('thing'), 'onclick', showDialog);

// conecta o sinal do onsubmit para o elemento id="form" para
// o formController.checkSubmit, com pontos para o objeto formController.
connect($('form'), 'onsubmit', formController, 'checkSubmit');

Você pode fazer seus próprios objetos enviar sinais com o método do sinal:

signal(anObject, 'a_signal');

O material de AJAX é segurado pelo módulo Mochit.Async, e pelos objetos auxiliares que se encontram no núcleo de sua implementação. Para executar uma chamada básica de AJAX, use o loadJSONDoc ou doSimpleXMLHttpRequest:

var request = doSimpleXMLHttpRequest('opcoes.php',
   { q : 'desenvolvedor web'}
);

Esta função retorna um objeto auxiliar, em que você pode fazer novas chamadas:

request.addCallbacks(mySuccessFunction, myErrorFunction);

Quando o XMLHttpRequest se executa, a função passada na chamada acima (mySuccessFunction) passa o objeto do XMLHttpRequest como o argumento:

function mySuccessFunction(req) {
 alert(req.responseText);
}

Os objetos auxiliares são úteis para a programação assíncrona e são uma grande idéia. Leia mais sobre o assunto, ou veja o screencast para mais detalhes.

Prós e contras

Primeiramente, a estrutura de log do Mochikit é excelente. Adicionar indicações simplesmente utilizando:

log("Bem melhor que o alert");
log("ERRO Esta coisa está quebrada");

O Mochikit faz uso também de características da programação funcional do Javascript para realçar e simplificar sua biblioteca API. Por exemplo, se você quiser classificar um grupo dos objetos por seus nomes de propriedades, você pode usar o keyComparator criar a função de classificação para você:

var sortedByName = people.sort(keyComparator("name"));

Há também a função counter. Ela cria uma função que retorna um valor que seja incrementado toda vez que for chamada:

var nextId = counter();
nextId(); //=> 1
nextId(); //=> 2
nextId(); //=> 3

Há também várias funções de iteração do estilo-Python, tais como forEach, map e filter.

Quanto a documentação, o Mochikit tem uma documentação boa da API, mas os detalhes em algumas partes muito básicas da biblioteca deixam a desejar. No detalhe, após ter lido toda a documentação, ter prestado atenção no screencast e ter escrito alguns scripts Mochikit, ainda sou incerto sobre qual a melhor versão da biblioteca para toda finalidade. Eu uso a versão compactada ou o Mochikit.js principal? Como posso carregar as partes individuais da biblioteca?

Entretanto, Mochikit tem uma lista de discussão que responde a estes tipos de perguntas.

Yahoo! UI

A biblioteca Yahoo! UI (YUI, como é apelidada) foi desenvolvida pelo Yahoo! para o uso interno, mas teve seu código aberto recentemente junto com uma gama de recursos excelentes para desenvolvedores em developer.yahoo.com.

O YUI é mais uma coleção distinta de “utilidades” do que uma biblioteca (como as que foram tratadas aqui), com cinco scripts principais que tratam de:

• animação
• AJAX
• manipulação DOM
• drag-and-drop
• tratamento de eventos

E há seis controles, chamados de:

• Calendar
• Slider
• Menu
• AutoComplete
• Tree View
• Container classes (com o qual você pode executar janelas no estilo de widgets)

Você pode fazer download de cada um destes scripts separadamente no site developer.yahoo.com.

Cada uma das bibliotecas do Yahoo! dependem somente do arquivo yahoo.js. Por outro lado, esta aproximação oferece uma experiência ligeiramente mais menos coerente para o desenvolvedor e poderia possivelmente introduzir uma determinada quantidade de repetição dentro das bibliotecas.

Uma coisa ineficaz sobre o YUI é o fato de que usa muito espaço inútil de strings. Cada chamada que você faz à biblioteca necessita ser prefixada com uma string do pacote:

var myAnim = new YAHOO.util.Anim(
 'test',
 { height: {to: 10} },
 1,
 YAHOO.util.Easing.easeOut
);
myAnim.animate();

O básico sobre YUI

A biblioteca de tratamento de eventos do YUI tem uma API muito familiar daquelas que são usadas nativamente no browser. Entretanto, tem algumas surpresas agradáveis que o desenvolvedor do Yahoo!, Dustin Diaz, explicou em detalhes neste site. Você pode adicionar um simples “ouvinte” como este:

YAHOO.util.event.addListener('object_id', 'click', callBackFunction);

Uma característica muito poderosa da biblioteca de eventos é seu chamado ouvintes de evento. Essencialmente, se você tentar unir um “ouvinte” a um elemento que não exista porque a página não carregou ainda, esperará essa página para tornar-se disponível antes de unir ao evento. Esta é uma solução que talvez confunda e frustre muitos novatos de DHTML.

A biblioteca de DOM resume as inconsistências do browser, permitindo o ajuste de estilos das propriedades do elemento. Entretanto, enquanto toma cuidado das tarefas comuns, existem algumas surpresas aqui:

• get é versão da função $ no YUI.
• Um método interessante é o generateId, que pode ser usado gerar IDs para elementos para que você possa rapidamente acessá-los em outros pontos do script.

O Gerenciador de Conexão contem toda a mágica do AJAX no YUI, e seguindo a linha das outras bibliotecas, escolhe não fazer exame de uma aproximação alto-nível. Não faz nada mais do que fornecer uma relação cross browser ao XMLHttpRequest:

YAHOO.util.Connect.asyncRequest(
 'GET',
 'http://www.yahoo.com',
 callback
);

Um destaque é a rica interface callback, que permite que você defina um objeto que envolva suas funções callback com alguma configuração extra. Veja um exemplo de objeto callback:

var callback = {
 success: function(resp) { alert('WOO!!'); }, // called on success
 failure: function(resp) { alert('BOO!'); }, // called on error
 argument: arguments, // user defined arguments
 scope: formController // scope the callbacks are called within
}

Prós e contras

A documentação fornecida pelo Yahoo! para a biblioteca é excelente. O site tem a documentação formal da API, vários exemplos, uma lista de discussão e algumas explicações breves das características principais de cada parte da biblioteca. O melhor lugar para verificar para ver se há artigos sobre YUI é no site de Dustin Diaz, desenvolvedor do Yahoo!.

Como eu citei acima, a implementação do controle de eventos é um dos atrativos do YUI. Entretanto, o restante da biblioteca, ao ser muito funcional, não contem tantas características inovadoras como no Mochikit, Dojo e Prototype, e por causa dos longos nomes de pacotes, desenvolver com o YUI se torna, às vezes, uma tarefa longa.

Contudo a lista crescente dos componentes é muito rica. Por exemplo, o componente de calendário (Calendar) suporta diversas línguas e múltiplas seleções da data, e as classes do Container dão-lhe o poder de implementar todos os tipos interface com janelas. Um ponto ruim de usar estes componentes é que tendem a ser muito dependente de outras bibliotecas; neste discurso, Dean Edwards destaca como exemplo o controle do treeview, que se usa em torno de 260 Kb do Javascript.

Conclusão: Qual a melhor?

Bem, uma resposta curta a esta pergunta é que não há nenhuma solução pronta que preencha todas as situações.

A biblioteca Prototype é a que possui uma documentação mais detalhada. É também a biblioteca mais difundida neste momento. Naturalmente, caminha para ser a escolha natural dos desenvolvedores Ruby porque abstrai várias características do Ruby on Rails. Outra coisa importante sobre o Prototype é que tem um peso dos Rails por trás e, em conseqüência, há muitos desenvolvedores que fornecem reparos e remendos do erro ao Prototype. Finalmente, oferece uma riqueza de bibliotecas adicionais tais como scriptaculous, Rico, e Behaviour que o faz uma boa e sólida escolha para muitos desenvolvedores.

Por outro lado, o Prototype tem um framework de tratamento de eventos em-desenvolvimento, que é o problema principal para uma biblioteca tão poderosa. Também – e esta é exclusivamente uma questão de gosto – a aproximação pragmática do Prototype às coisas (como o uso excessivo da propriedade do innerHTML) pode parecer um pouco “suja” às vezes.

Para projetos menores, a forma que foi projetada e seus componentes, fazem do YUI um grande atrativo. É muito fácil de excluir um Gerenciador de Conexão ou a biblioteca de Eventos e começar fazendo algumas tarefas básicas sem ter que atravessar uma curva de aprendizagem demasiada. No geral, contudo, não tem muito a oferecer nos termos de características poderosas.

O Dojo é definitivamente destaque deste grupo. E o foco do Dojo no desempenho é um fator absoluto se você estiver planeando uma aplicação com uso intensivo de Javascript. A implementação de widget tem também um potencial enorme para a construção de complexos UIs. Entretanto é realmente grande – ambos nos termos de tamanho de arquivo e do tamanho da API – assim eu não o recomendaria para projetos menores.

Na minha opinião, o Mochikit é muito bem projetado e o melhor dos quatro, e desenvolvedores do Python/Twisted/Nevow acharão sua API muito familiar. Entretanto, sua documentação é escassa em alguns lugares (por exemplo, eu ainda tenho dúvida a respeito de qual versão do Mochikit inserir no script). Também, algumas das técnicas funcionais que usa podem ser confusas para os novatos ou aqueles que não tem tanta prática em em técnicas de programação. Entretanto, vale a pena dar olha olhada. As funcionalidades do Mochikit provavelmente surpreenderão você – a função createDOM, as ferramentas da iteração e a arquitetura assíncrona são um trabalho de arte.
Fonte:cirofeitosa