JavaScript ganha destaque na lista, deixando para traz outros nomes famosos, como Java, Python e C++.  Caso curioso, o Switft, que foi apresentado ao mundo  pela Apple, em 2014, conseguiu lugar de destaque no ranking e está cada vez mais próximo de entrar no top 10.

A lista deveria ter apenas 20 entradas, mas tem um empate no seu final, acrescentando mais dois nomes à mesma. Confira:

1 JavaScript
2 Java
3 Python
4 PHP
5 C #
6 C ++
7 CSS
8 Ruby
9 C
10 Objetivo-C
11 Swift
12 Shell
12 Scala
14 R
15 Go
15 Perl
17 TypeScript
18 PowerShell
19 Haskell
20 CoffeeScript
20 Lua
20 Matlab

Podemos observar dois pontos desde 2012 no ranking: o poder de permanência notável de Java Script e Java no topo dos rankings. Java nunca esteve abaixo da segunda posição. Já o C++ sempre esteve presente entre as dez principais linguagens.

Fonte: http://redmonk.com/sogrady/2017/06/08/language-rankings-6-17/

Hoje, no entanto, os navegadores melhoraram muito. Podemos usar confortavelmente todos os recursos fornecidos pelo ES5 (Ecmascript 5), e nós temos à nossa disposição APIs HTML 5 impressionantes que tornam o trabalho com o DOM muito mais fácil. Os desenvolvedores estão agora em uma posição onde eles podem optar por deixar de fora jQuery para alguns projetos, e ainda manter sua produtividade.

Não interpretem mal, jQuery ainda é uma biblioteca maravilhosa. No entanto, para pequenos projetos como páginas e interações simples, deveríamos utilizar JavaScript puro, assim economizando um pouco de recursos. Aqui estão 10 dicas que irão ajudá-lo com pequenos trechos de código.

Após ler estas 10 dicas de como escrever JavaScript sem jQuery você será capaz de capturar, alterar, inserir e remover conteúdos do HTML sem a necessidade de utilizar jQuery, como também utilizar os eventos, alterar classes e atributos.

 Este artigo é uma tradução de 10 Tips for Writing JavaScript without jQuery

1. Escutando pelo carregando da página

// Adicionar uma escuta ao carregamento da página, logo após
// chame uma função anonima e execute seu código JavaScript

document.addEventListener('DOMContentLoaded', function () {

    // Diga Olá para o Console :)
    console.log('Olá Console!');

});

2. Selecionando elementos

Antigamente só podemos selecionar elementos por id, classe e nome do elemento. jQuery foi um salva-vidas com os seus seletores estilo css inteligentes. Criadores de Browsers gostaram e introduziram duas APIs importantes – querySelector e querySelectorAll:

3. Adicionar e remover eventos de escuta

Ouvir eventos é uma parte fundamental da construção de uma aplicação web e hoje sua utilização foi simplificada com o addEventListener:

4. Manipulando classes e atributos

Manipular nomes de classes sem jQuery costumava ser muito inconveniente. Não mais, graças à propriedade classList. E se você precisa para manipular atributos, você tem setAttribute.

5. Obter e manipular classes e atributos

jQuery tem os métodos text() e html(). Opcional a isto, podemos usar as propriedades TextContent e innerHTML:

6. Inserindo e removendo elementos

Embora jQuery torna muito mais fácil a adição e remoção de elementos do DOM, hoje com JavaScript puro é relativamente simples. Veja como acrescentar, remover e substituir qualquer elemento:

7. Andando pelo DOM

Como todo verdadeiro ninja JS sabe, há uma grandes segredos escondidos no DOM. Em comparação com jQuery, APIs DOM oferecem funcionalidades limitadas para a seleção de elementos. No entanto, ainda existem muitos recursos que você poderá utilizar para percorrer todo o DOM.

8. Looping sobre matrizes

Alguns dos métodos que utilizamos em jQuery estão disponíveis com o padrão ES5. Para iteração, podemos usar forEach e map em vez de suas versões do jQuery – each() e do map(). Só tome cuidado para as diferenças de argumentos e padrão este valor nos retornos de chamada.

9. Animações

O método animate do jQuery é superior a qualquer coisa que você tentar com JavaScript puro, mas se você precisar de animações complexas , você ainda deve utilizar jQuery. Mas, graças a todas as maravilhas do CSS3, alguns dos casos mais simples podem ser tratadas com uma biblioteca leve como Animate.css, que permite acionar animações, adicionando ou removendo os nomes de classe de elementos.

10. AJAX

AJAX foi outra tecnologia que costumava ser uma bagunça quando se falava de cross-browser. A boa notícia é que agora podemos usar o mesmo código em todos os lugares. A má notícia, porém, é que ele ainda é complicado para instanciar e enviar solicitações de AJAX com XMLHttpRequest, por isso é melhor deixar para uma biblioteca. Mas você não precisa incluir jQuery só para isso. Você pode usar uma das inúmeras bibliotecas leves que estão disponíveis. Aqui está um exemplo a construção de uma solicitação AJAX diretamente, e usando a biblioteca reqwest:

// Este exemplo demonstra a maneira de criar uma requisição, neste exemplo é requisitado uma página e capturado seu conteúdo body e logado no console.

var request = new XMLHttpRequest();
request.open('GET', 'http://localhost', true);

request.onload = function (e) {
    if (request.readyState === 4) {

        // Verifique se a requisição foi efetuada com sucesso.

        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};

// Resgata erros:

request.onerror = function (e) {
    console.error(request.statusText);
};

request.send(null);

// Outro metódo utilizando uma pequena biblioteca chamada Reqwest (1.5Kb), isto pode tornar seu trabalho mais fácil.

reqwest({
    url: 'http://localhost/',
    method: 'get',
    error: function (err) {},
    success: function (resp) {
        console.log(resp);
    }
});

Se você não viu o post anterior, confira este link, será necessário pois existem passos a serem seguidos. O código final do post anterior resultou para compactação + minificação de JS, veja o resultado:

var js  = [
    './js-source/vendor/jquery/*',         // Todos os arquivos do diretório Jquery
    './js-source/vendor/bootstrap/*.*',    // Todos os arquivos do diretório bootstrap e sub diretórios
    './js-source/main.js'                  // Arquivo único
];

// Núcleo do Gulp
var gulp = require('gulp');

// Transforma o javascript em formato ilegível para humanos
var uglify = require("gulp-uglify");

// Agrupa todos os arquivos em um
var concat = require("gulp-concat");

// Tarefa de minificação do Javascript
gulp.task('minify-js', function () {
    gulp.src(js)                        // Arquivos que serão carregados, veja variável 'js' no início
    .pipe(concat('script.min.js'))      // Arquivo único de saída
    .pipe(uglify())                     // Transforma para formato ilegível
    .pipe(gulp.dest('./js/'));          // pasta de destino do arquivo(s)
});

// Tarefa padrão quando executado o comando GULP
gulp.task('default',['minify-js']);

// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".
gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
});

Para trabalhar com CSS é necessário instalar outros plugins, execute o comando abaixo no prompt, lembre, você deve estar na pasta do seu projeto:

npm install --save-dev gulp-cssmin gulp-watch gulp-concat gulp-strip-css-comments

Com os plugins instalados, crie o arquivo gulp.js com o seguinte conteúdo, este arquivo é válido apenas para trabalhar com CSS, no final do post mostraremos os 2 scripts trabalhando em conjunto:

// Definimos o diretório dos arquivos para evitar repetição futuramente

// Todos os arquivos CSS que serão compactados
// Explicação: /* busca todos os arquivos de uma pasta, /**/*.* busca todos os arquivos de uma pasta e sub pasta.
var css = [
	'./css-source/bootstrap/*.css',
	'./css-source/style.css'
];

// Núcleo do Gulp
var gulp = require('gulp');

// Verifica alterações em tempo real, caso haja, compacta novamente todo o projeto 
var watch = require('gulp-watch');

// Minifica o CSS
var cssmin = require("gulp-cssmin");

// Agrupa todos arquivos em UM
var concat = require("gulp-concat");

// Remove comentários CSS
var stripCssComments = require('gulp-strip-css-comments');

// Processo que agrupará todos os arquivos CSS, removerá comentários CSS e minificará.
gulp.task('minify-css', function(){
    gulp.src(css)
    .pipe(concat('style.min.css'))
    .pipe(stripCssComments({all: true}))
    .pipe(cssmin())
    .pipe(gulp.dest('./css/'));
});

// Cria a TASK padrão, esta linha será processada quando o comando "GULP" for executado
gulp.task('default','minify-css');

// Cria a TASK de verificar em tempo real alterações, se detectar alguma alteração, será processado o comando relativo ao arquivo
gulp.task('watch', function() {
  gulp.watch(css, ['minify-css']);
});

Neste exemplo, partimos do pré-suposto que existe a seguinte estrutura de pastas/arquivos:

css-source
    vendor
        bootstrap
            bootstrap.css
    style.css
css(pasta vazia)
gulp.js
package.json

Execute o comando

gulp

Será gerado um arquivo CSS na pasta ‘css’ com o nome de style.min.css com todo o conteúdo de arquivos CSS selecionados. Caso queira que o gulp monitore alterações nos arquivos CSS e compacte automaticamente caso sofra alterações, use o seguinte comando e deixe o prompt aberto.

gulp watch

Agora vamos utilizar os 2 scripts, otimização de CSS e JS:

// Definimos o diretório dos arquivos para evitar repetição futuramente

// Todos os arquivos CSS que serão compactados
// Explicação: /*.css busca todos os arquivos css de uma pasta, /**/*.css busca todos os arquivos css de uma pasta e sub pasta.
var css = [
	'./css-source/bootstrap/*.css',
	'./css-source/style.css'
];

// Todos os arquivos JS que serão compactados
// Explicação: /*.js busca todos os arquivos css de uma pasta, /**/*.js busca todos os arquivos js de uma pasta e sub pasta.
var js  = [
    './js-source/vendor/jquery/*.js',         // Todos os arquivos do diretório Jquery
    './js-source/vendor/bootstrap/*.js',    // Todos os arquivos do diretório bootstrap e sub diretórios
    './js-source/main.js'                  // Arquivo único
];

// Núcleo do Gulp
var gulp = require('gulp');

// Transforma o javascript em formato ilegível para humanos
var uglify = require("gulp-uglify");

// Agrupa todos os arquivos em um
var concat = require("gulp-concat");

// Verifica alterações em tempo real, caso haja, compacta novamente todo o projeto 
var watch = require('gulp-watch');

// Minifica o CSS
var cssmin = require("gulp-cssmin");

// Remove comentários CSS
var stripCssComments = require('gulp-strip-css-comments');

// Processo que agrupará todos os arquivos CSS, removerá comentários CSS e minificará.
gulp.task('minify-css', function(){
    gulp.src(css)
    .pipe(concat('style.min.css'))
    .pipe(stripCssComments({all: true}))
    .pipe(cssmin())
    .pipe(gulp.dest('./css/'));
});

// Tarefa de minificação do Javascript
gulp.task('minify-js', function () {
    gulp.src(js)                        // Arquivos que serão carregados, veja variável 'js' no início
    .pipe(concat('script.min.js'))      // Arquivo único de saída
    .pipe(uglify())                     // Transforma para formato ilegível
    .pipe(gulp.dest('./js/'));          // pasta de destino do arquivo(s)
});

// Tarefa padrão quando executado o comando GULP
gulp.task('default',['minify-js','minify-css']);

// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".
gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
	gulp.watch(css, ['minify-css']);
});

Executando o comando gulp, será compactado css e js, executando o comando gulp watch os arquivos serão monitorados, e caso css ou js seja alterado, será executado a ação correspondendo a cada arquivo.

Dúvidas? Sugestões? Deixe nos comentários.

Para quem não sabe, automatizador de tarefas é uma ferramenta que agiliza o processo de desenvolvimento em ações repetitivas. Exemplo, minificar arquivos Javascript e CSS. Testar se o código Javascript está correto, agrupar diversos arquivos em um, ofuscar código Javascript… São diversas opções, você pode conferir todos os pacotes visitando o link de Plugins.

Chega de explicações e vamos fazer na prática.

Obrigatório ter o node.js instalado, caso não tenha, entre no site node.js, faça download e instale.

Crie uma pasta com um nome desejado, entre nesta pasta e crie o arquivo package.json com o conteúdo abaixo:

{
  "name": "aprendendo",
  "version": "1.0.0",
  "description": "Aprendendo Gulp",
  "author": "Seu nome<seu@email.com.br>",
  "devDependencies": {
	"gulp": "*",
	"gulp-uglify" : "*",
	"gulp-concat" : "*"
  }
}

Após o arquivo criado, adicione seu nome e e-mail na linha “author” de acordo com o formato exemplificado. Depois, instale as dependências via linha de comando ( obrigatório estar na pasta criada ):

npm install

Agora, crie o arquivo gulp.js que será onde ficará as configurações do Gulp e insira o conteúdo:

var js  = [
    './js-source/vendor/jquery/*',         // Todos os arquivos do diretório Jquery
    './js-source/vendor/bootstrap/*.*',     // Todos os arquivos do diretório bootstrap e sub diretórios
    './js-source/main.js'                  // Arquivo único
];

// Núcleo do Gulp
var gulp = require('gulp');

// Transforma o javascript em formato ilegível para humanos
var uglify = require("gulp-uglify");

// Agrupa todos os arquivos em um
var concat = require("gulp-concat");

// Tarefa de minificação do Javascript
gulp.task('minify-js', function () {
    gulp.src(js)                        // Arquivos que serão carregados, veja variável 'js' no início
    .pipe(concat('script.min.js'))      // Arquivo único de saída
    .pipe(uglify())                     // Transforma para formato ilegível
    .pipe(gulp.dest('./js/'));          // pasta de destino do arquivo(s)
});

// Tarefa padrão quando executado o comando GULP
gulp.task('default',['minify-js']);

// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".
gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
});

Neste arquivo, estamos supondo que estamos com a seguinte estrutura:

js-source
    vendor
        jquery
            jquery.js
        bootstrap
            bootstrap.main.js
            bootstrap.plugins.js
    main.js
js(pasta vazia)
gulp.js
package.json

Execute o comando abaixo:

gulp

Após executar o comando gulp, será gerado o arquivo script.min.js na pasta js. Desta forma, após alterações nos arquivos o comando deverá ser disparado novamente para gerar a nova versão. Um pouco trabalhoso, mas existe uma maneira de automatizar isto.

Vamos utilizar a TASK “watch” para fazer isto por nós. Digite “gulp watch” e deixe a janela aberta, não cancele pois o processo ficará monitorando os arquivos, caso algum tenha alguma alteração, o arquivo final será gerado novamente.

Este exemplo é válido para compactar, ofuscar e gerar um arquivo único de javascript. No próximo tutorial vamos mostrar como fazer isto com arquivos CSS.

Uma citação da W3C Schools que vale nossa atenção, ela é mencionada comparando com os Cookies:

Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Fonte: http://www.w3schools.com/html/html5_webstorage.asp

Nós publicamos um artigo falando sobre Web SQL Database que veio para suprir esta necessidade, mas, infelizmente publicamos uma tecnologia que está obsoleta (gafe nossa) e por isso não indicamos a utilizá-la.

A vantagem de utilizarmos o HTML 5 Web Storage é a facilidade, a compatibilidade já que, ele é suportado na maiores dos browser e por incrível que pareça, a partir do IE8 você pode utilizá-lo (isto chega a nos surpreender).

Testados e suportados: 

Um detalhe que deve ser conhecido é, o Local Storage é por domínio e os dados podem ser armazenados/acessados por todas as páginas do mesmo.

Bom, chega de explicações, vamos a prática.

Métodos utilizados

localStorage.setItem(name, value);
localStorage.getItem(name);
localStorage.clear();
localStorage.length;

Testando se o Browser suporta Web Storage

if(typeof(Storage) !== "undefined") {
    // Código para localStorage/sessionStorage
} else {
    // Implemente outra solução, está não funciona. :/
}

Observação: O Web Storage não armazena objetos e  arrays em JavaScript, por isto utilizamos o JSON.stringify e JSON.parse para converter os objetos de forma apropriada para armazenar.

Armazenando uma informação

// Forma declarativa
localStorage.setItem("employer", "Turbosite"); 	// Armazena o valor
localStorage.getItem("employer"); 		// Resgata o valor "Turbosite"

// Forma comprimida
localStorage.employer = "Turbosite";		// Armazena o valor
localStorage.employer; 				// Resgata o valor "Turbosite"

Verificando o tamanho do Web Storage

// Verificando o tamanho do Storage ( itens armazenados )
localStorage.length

Removendo itens

// Remover um item pela API
localStorage.removeItem("employer");

// Remover um item via Javascript nativo
delete(localStorage.employer);

Zerando o Web Storage

// Remover tudo
localStorage.clear();			// Reseta os dados

Armazenando objetos em Javascript

data_employer = {
	"name": "Turbosite",
	"phones" : [
		"4003-2322",
		"4062-1020",
		"0800 888 2322"
	],
	"location": {
		"city": "Belo Horizonte",
		"state": "Minas Gerais",
		"country": "Brasil"
	}
}

localStorage.data_employer = data_employer;
localStorage.data_employer; // Resultado: "[object Object]"

Como podem ver, o resultado não foi o esperado, o Web Storage converteu o objeto para toString() e em vez de armazenar os dados do objeto, armazenou a string [object Object].

Uma solução seria, converter o objeto para string e armazená-lo, existe a função nativa JSON.stringify, desta forma ficaria:

data_employer = {
	"name": "Turbosite",
	"phones" : [
		"4003-2322",
		"4062-1020",
		"0800 888 2322"
	],
	"location": {
		"city": "Belo Horizonte",
		"state": "Minas Gerais",
		"country": "Brasil"
	}
}

localStorage.data_employer = JSON.stringify(data_employer);
localStorage.data_employer; // "{"name":"Turbosite","phones":["4003-2322","4062-1020","0800 888 2322"],"location":{"city":"Belo Horizonte","state":"Minas Gerais","country":"Brasil"}}"

Como agora é uma string, não pode ser trabalhada como um objeto, mas, basta agora utilizar a JSON.parse que novamente será um objeto manipulável, exemplo:

data_employer = JSON.parse(localStorage.data_employer); // Object {name: "Turbosite", phones: Array[3], location: Object}

Muito simples e tranquilo de trabalhar e como a própria W3C disse, mais seguro e rápido, nada de sobrecarregar servidores com COOKIES gigantescos. Dicas e comentários são sempre bem vindos, correções também.

Ele traz uma API de banco de dados SQL Web, por enquanto ainda é uma especificação separada do HTML 5, mas já introduz um conjunto de APIs para manipular base de dados do lado do cliente utilizando SQL.

Estamos supondo que você já conheça e trabalhe com o SQL, mas caso não saiba o que é, recomendamos um mini curso de MySQL.

Por enquanto, Web SQL Database está suportado nas últimas versões do Chorme, Safari e Opera.

Esta postagem é baseada no artigo em inglês: Web SQL Database

Os métodos principais:

Há três seguintes métodos fundamentais definidos na especificação de que vamos mostrar nesta postagem:

1. openDataBase: Este método cria o objeto de banco de dados, depois utiliza um banco de dados existente ou criar um novo.
2. transaction: Este método controlar a transação e  nos retorna uma confirmação ou anulação com base no que foi executado.
3. executeSql: Este método é usado para executar um consulta SQL.

Abrindo Base de dados:

O openDataBase método cuida da abertura de um banco de dados se ele já existe, este método irá criá-lo se ele não existe.

Para criar e abrir um banco de dados, use o seguinte código:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

Acima método tem quatro parâmetros:

1. Nome do banco
2. Número da versão
3. Descrição de texto
4. Tamanho da base de dados

Execução de consultas:

Para executar uma consulta, deve ser utilizado a função database.transaction (). Esta função precisa de um único argumento, mas pode ser passado o 2º e 3º parametro para verificar se foi completado com sucesso o comando, segue exemplo de duas consultas, uma simples e outra debugando:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

// Simples
db.transaction (function (tx) {  
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");
});

// Debugando
db.transaction (function (tx) {  
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)",
       function(tx){
           /*Sucesso*/
       },
       function(erro){
           /*Error*/
       });
});

As consultas acima irão criar uma tabela chamada LOGS na base de dados “Teste’.

Inserir dados:

Para inserir dados  na tabela, utilizamos a função transaction() também, só que, desta vez com o INSERT para popular a tabela, veja o exemplo:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
   tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");

   // Os 3 null represetam
   // 1º - Um array contendo dados
   // 2º - Função para sucesso
   // 3º - Função para Erro
   // Vamos explicá-los mais abaixo
   tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 01') ", null, null, null);
   tx.executeSql ("INSERT INTO LOGS (log) VALUES ('Resultado do Log de Teste 02') ", null, null, null);
});

Também podemos passar valores dinâmicos, utilizamos a seguinte sintaxe:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {

  var novo_log = 'Resultado do Log de Teste 01';

   // Os 3 null estão sendo mostrados aqui
   // 1º - Um array contendo dados, estamos passando apenas um valor com o novo_log
   // 2º - Função para sucesso
   // 3º - Função para Erro
   // Vamos explicá-los mais abaixo
  tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log)");
  tx.executeSql ("INSERT INTO REGISTROS (log) VALUES (?)",[novo_log],null,null);						
});

Aqui novo_log é uma variável e executeSql mapeia cada item no argumento de matriz para o “?”, isto é, poderíamos ter vários “?” e no final teríamos [var_1,var_2,var_3], sendo que, ele utilizará a ordem exata das variáveis para popular a query.

Lendo os dados:

Para ler os registros já existentes usamos um callback para capturar os resultados da seguinte forma:

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
    tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);
});

db.transaction (function (tx) {
   tx.executeSql ('SELECT * FROM LOGS', [], function (tx, results) {
   var len = results.rows.length, i;
   msg = "<p> Registros encontrados:" + len + "</ p>";
   for (i = 0; i <len; i ++) {
      console.log(results.rows.item(i) .log);
   }
 }, null);
});

Exemplo final:

Então, finalmente, vamos  criar um exemplo em HTML 5,  este exemplo está funcional e testado no Chrome versão Versão 39.0.2171.71 m.

var db = openDatabase ('Teste', '1.0', 'Teste Web SQL Database', 2 * 1024 * 1024);

db.transaction (function (tx) {
    tx.executeSql ("CREATE TABLE IF NOT EXISTS LOGS (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, log TEXT)",null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 01'],null,null);
    tx.executeSql ("INSERT INTO LOGS (log) VALUES (?)",['Resultado do Log de Teste 02'],null,null);
   console.log('Log mensagem criada e linha inserida');
});

db.transaction(function(tx){
    tx.executeSql(       
        "SELECT * FROM LOGS",
        [],
        function(tx, result){
            console.log('Deu certo!');
            var len = result.rows.length, i;
            for(i=0;i<len;i++){
                console.log( result.rows.item(i) );
            }
        },
        function(tx, error){
            console.log('Deu errado!');
            console.log(error);
        }
    );
});

Isso produziria o seguinte resultado:

Log mensagem criada e linha inserida
Deu certo!
Object {id: 1, log: "Resultado do Log de Teste 01"}
Object {id: 2, log: "Resultado do Log de Teste 02"}

Conclusão:

É bem simples utilizar e depende apenas de um pouco de treino, nos testes detectamos que a sua persistência é como uma sessão, ao fechar o browser perde-se o objeto, mas ao trocar de página dentro do mesmo domínio o mesmo permanece.

Já pensou em utilizar esta nova funcionalidade com o evento onBeforeUnload para rastrear todo o caminho que um usuário caminhou dentro do seu site? A utilização ficará por conta da imaginação de vocês.

Um exemplo que encontramos no GitHub e que vale a pena ver:
Link original do código aqui.

https://gist.github.com/andyj/1599544

Link de uma aplicação feita com Web Sql.
HTML5 webSQL app synching with a php MySQL server

Se gostaram, compartilhem e façam comentários, sugestões, correções e correções sempre são bem vindas. A Turbosite tem o comprometimento em divulgar conhecimento!

Quer servidores Seguros, Estáveis, com uptime de 99,9%, no Brasil e de baixo Custo? A Turbosite é sua resposta.

Hospedagem de Sites, Data Center e Registro de Domínio Grátis só aqui!

O evento que vamos utilizar é o “onBeforeUnload”.

Este evento é sempre invocado quando o usuário tenta sair da página atual, mas, ele por si só não resolve o problema, para resolvermos, precisamos dizer ao browser o que fazer quando isto acontecer.

Um exemplo de código seria:

$('body').on('click', function(){
    window.onbeforeunload = function(){
        return 'Os dados do formulário não foram salvos, deseja permanecer nesta página?';
    };
});

Desta forma, quando o evento foi setado, ao mudar de página ou qualquer ação que faça ele fechar a página, será enviada uma mensagem ao browser, como o exemplo abaixo:

Então, uma forma de fazer isto em um formulário seria, quando carregar a página salvar o estado do formulário para comparar, caso ele tome alguma ação que saia da página, sendo quê, temos que desconsiderar o “SUBMIT”, pois neste caso a ação é desejada.

Exemplo de código:

$( function(){

	var init_form = $('#id_form').serialize();
	// Result example: "name=&email=&message="

	// Cancel event onbeforeunload when Submit form
	$(':submit').click(function() {
		window.onbeforeunload = null;
	});
	
	window.onbeforeunload = function(){
		var check_form = $('#id_form').serialize();
		
		if( check_form === init_form )
		return null;
		
		return 'Os dados do formulário não foram salvos, deseja permanecer nesta página?';
	};
});

Conclusão:

Isto pode ser utilizado para diversas formas, avisar o preenchimento de um formulário não enviado, salvar o rascunho de um e-mail/mensagem, dar um desconto em um produto caso o usuário feche a tela de concluir a compra e outras milhares de formas que vocês imaginarem.

Dicas e sugestões:
Deixem nos comentários.

$(function () {
    var selections = [];
    $(".niners").click(function () {
        selections.push(this.prop ("name"));
    });
});

A equipe da Turbosite repassamos esse conhecimento com a postagem abaixo.

O que é um closure?

Um closure é uma função interior que tem acesso a variáveis de uma função exterior – cadeia de escopo. O closure tem três cadeias de escopo: o seu próprio escopo; escopo externo, tendo acesso as variáveis da função exterior; e tem acesso as variáveis globais.

A função interior tem acesso não somente as variáveis da função exterior, mas também aos parâmetros dela. Note que a função interior não pode chamar o objeto(arguments) da função exterior, entretanto, pode chamar parâmetros da função externa diretamente.

Você cria um closure adicionando uma função dentro de outra função.

function showName (firstName, lastName) {
    var nameIntro = "Your name is ";
 
    //esta função interior tem acesso as variáveis da função exterior, incluindo os parâmetros
    function makeFullName () {
        return nameIntro + firstName + " " + lastName;
    }
 
    return makeFullName ();
}
 
showName ("Michael", "Jackson"); //Your name is Michael Jackson

Regra dos Closures e Efeitos Colaterais

1. Closures tem acesso a variável das funções exteriores mesmo após o retorno da função exterior

Uma da mais importante e delicada característica dos closures é que a função interior continua tendo acesso as variáveis da função exterior mesmo após ela ter retornado.  Quando funções no JavaScript executam, elas usam a mesma cadeia de escopo que estava em vigor quando foram criadas. Isso significa que mesmo depois da função exterior retornar, a função interior continua tendo acesso as variáveis da função exterior. Portanto, você pode chamar a função interior depois em seu programa. Este exemplo demonstra isso:

function celebrityName (firstName) {
    var nameIntro = "This celebrity is ";
 
    //essa função interior tem acesso as variáveis da função exterior, incluindo os parâmetros
    function lastName (theLastName) {
        return nameIntro + firstName + " " + theLastName;
    }
    return lastName;
}
 
var mjName = celebrityName ("Michael");
//Nesta conjuntura, a função exterior celebrityName foi retornada
 
//O closure (lastName) é chamado aqui depois da função exterior ter retornado acima
//Sim, o closure continua tendo acesso as variáveis da função exterior e parâmetros
mjName ("Jackson"); //This celebrity is Michael Jackson

2. Closures armazenam referências para as variáveis da função exterior

Eles não armazenam o valor real. Closures ficam mais interessantes quando o valor da variável da função exterior muda antes que o closure seja chamado, e esta poderosa característica pode ser aproveitada de formas criativas, como este exemplo de variável privada primeiramente demonstrada por Douglas Crockford:

function celebrityID () {
    var celebrityID = 999;
    //Nós retornamos um objeto com algumas funções interiores
    //Todas as funções interiores têm acesso as variáveis'da função exterior
    return {
        getID: function () {
            //Esta função interior vai retornar a variável celebrityID ATUALIZADA
            return celebrityID;
        },
        setID: function (theNewId) {
            //Esta função interior vai mudar a variável da função exterior a qualquer hora
            celebrityID = theNewId;
        }
    }
}
 
var mjID = celebrityID (); //Nesta atual conjuntura, a função exterior celebrityID já retornou
mjID.getID(); //999
mjID.setID(567); //Muda a variável da função exterior
mjID.getID(); //567 - retorna o valor atualizado da variável celebrityID

3. Closures que deram errado

Por causa dos closures terem acesso ao valor atualizado das variáveis das funções exteriores, eles podem também conduzir a erros quando a variável da função exterior muda com um loop for. Assim:

//Este exemplo é explicado em detalhe abaixo (logo após este bloco de código)
function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i += 1) {
        theCelebrities[i]["id"] = function () {
            return uniqueID + i;
        }
    }
 
    return theCelebrities;
}
 
var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];
 
var createIdForActionCelebs = celebrityIDCreator(actionCelebs);
 
var stalloneID = createIdForActionCelebs[0];
 
console.log(stalloneID.id()); //103

No exemplo anterior, quando a função anônima é chamada, o valor de i é 3 (a contagem do array e então seus incrementos). O número 3 foi adicionado ao uniqueID para criar 103 para TODOS os celebrityID. Então cada posição no array retornado obteve o id = 103, ao invés do valor pretendido 100, 101, 102.

A razão para isso acontecer foi porque, assim como nós discutimos no exemplo anterior, o closure (função anônima neste exemplo) teve acesso a variável da função exemplo por referência, não por valor. Então, igual ao exemplo anteriormente mostrado onde nós acessamos o valor atualizado da variável com o closure, neste exemplo, similarmente acessamos a variável i quando ela foi alterada, depois que a função exterior rodou o loop for inteiro e retornou o último valor, que foi 103.

Para consertar este efeito colateral (bug) nos closures, você pode usar uma Expressão de Função Imediatamente Invocada (IIFE – Immediately Invoked Function Expression), como no exemplo seguinte:

function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i += 1) {
        theCelebrities[i]["id"] = function (j) { //a variável paramétrica j é o i passado na invocação da IIFE
            return function () {
                return uniqueID + j;
                //cada iteração do loop for passa no valor atual de i dentro desta IIFE e salva o valor correto no array
            } () //Adicionando () no fim da função, nós estamos executando-a imediatamente e retornando somente o valor de uniqueID + j, ao invés de retornar uma função
        } (i); //invocando imediatamente a função passando a variável i como um parâmetro
    }
    return theCelebrities;
}
 
var actionCelebs = [{name: "Stallone", id:0}, {name: "Cruise", id:0}, {name: "Willis", id:0}];
 
var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
 
var stalloneID = createIdForActionCelebs [0];
console.log(stalloneID.id); //100
 
var cruiseID = createIdForActionCelebs [1];
console.log(cruiseID.id); //101

Anonymous Closures (Closures Anônimos)

Anonymous Closures são o construto fundamental em Module Pattern que tornam tudo isso possível e são uma das melhores característica de JavaScript: é possível criar uma função anônima e executá-la imediatamente. Todo o código que é executado dentro da função esta no escopo do closure (algo como “fechamento”), o que proporciona privacidade e estado durante toda a vida da aplicação.

(function () {
    // Todas variáveis e funções estão somente neste escopo
    // e ainda mantêm acesso a todos os globais
}());

Observe a () em torno da função anônima. Isto é requerido pela linguagem, uma vez que declarações que começam com a função de token são sempre considerados declarações de função. Incluir () cria uma expressão de função.

Global Import

JavaScript tem um recurso conhecido como implied globals (globals implícitas). Sempre que um nome é usado, o interpretador volta pela cadeia de escopo em busca de uma declaração de variável (var) para esse nome. Se nada for encontrado, a variável é assumida como global; se é usado em um assignmente, o global é criado se não existir. Isso significa que o uso ou a criação de variáveis ​​globais em um closure anônimo é fácil. Infelizmente, isso leva a código difícil de gerir, já que não é óbvio (para humanos) que as variáveis ​​são globais em um determinado arquivo.

Felizmente, o recurso de função anônima fornece uma alternativa fácil a isso. Ao passar globais como parâmetros para a função anônima, que os importa para o código. Eis um exemplo:

(function ($, YAHOO) {
    // Agora se tem acesso às globais jQuery (como "$") e YAHOO nesse código
}(jQuery, YAHOO));

Module Export

Às vezes, você não quer apenas usar globais, mas quer declará-los. É possível fazer isso facilmente ao exportá-los, usando o valor de retorno da função anônima. Se o fizer, completará o Padrão de Módulo básico. Veja um exemplo completo:

var MODULE = (function () {
    var my = {},
             privateVariable = 1;
 
    function privateMethod() {
        // ...
    }
 
    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };
 
    return my;
}());

Observe que foi declarado um módulo global chamado MODULE com duas propriedades públicas: um método chamado MODULE.moduleMethod e uma variável chamada MODULE.moduleProperty. Além disso, ele mantém o estado interno privada usando o closure da função anônima — e também é possível importar globais necessários usando o padrão mostrado anteriormente.

Augmentation

Uma limitação do Module Pattern até agora é que o módulo inteiro deve estar em um arquivo. Quem já trabalhou em uma grande base de código entende o valor de divisão de código em vários arquivos. Felizmente, existe uma boa solução: Augmentation (Ampliação). Em primeiro lugar, é preciso importar o módulo; então, são adicionadas novas propriedades e; por fim, ele é exportado.

Aqui está um exemplo de uso de Augmentation:

var MODULE = (function (my) {
    my.anotherMethod = function () {
        // Método adicionado...
    };
    return my;
}(MODULE));

Loose Augmentation

Enquanto o exemplo acima requer a criação inicial do módulo em primeiro lugar e a ampliação acontecer depois disso, isso nem sempre é necessário. Uma das melhores coisas que um aplicativo JavaScript pode fazer em relação a desempenho é carregar scripts de forma assíncrona. É possível criar módulos flexíveis de várias partes que podem se carregar em qualquer ordem com o Loose Augmentation (Ampliação Fraca). Cada arquivo deve ter a seguinte estrutura:

var MODULE = (function (my) {
    // Adiciona recursos...
    return my;
}(MODULE || {}));

Neste padrão, a instrução var é sempre necessária. Note que a importação vai criar o módulo se ele ainda não existir. Isto significa que você pode usar uma ferramenta como LABjs e carregar todos os seus arquivos de módulo em paralelo, sem a necessidade de bloquear.

Tight Augmentation

Tight Augmentation (Ampliação Forte) é excelente, mas coloca algumas limitações no módulo, dentre as quais se destaca a impossibilidade de poder substituir as propriedades do módulo de maneira segura. Também não é possível usar as propriedades do módulo de outros arquivos durante a inicialização — embora seja possível em tempo de execução após a inicialização. Loose Augmentation implica numa ordem estabelecida de carregamento, mas permite substituições.

Eis um exemplo simples (ampliando o módulo-exemplo original):

var MODULE = (function (my) {
    var old_moduleMethod = my.moduleMethod;
 
    my.moduleMethod = function () {
        // sobrescrita de método com acesso ao antigo através de old_moduleMethod foi 
    };
 
    return my;
}(MODULE));

Cloning and Inheritance (Clonagem e Herança)

Dentre os Padrões de Module Pattern, talvez este seja a opção mais flexível. Ele permite que algumas composições elegantes, mas que vem à custa da flexibilidade: propriedades que são objetos ou funções não serão duplicadas e existirão como um objeto com duas referências. Mudando uma, mudará a outra. Isso pode ser corrigido para objetos com um processo de clonagem recursiva, mas, provavelmente, não pode ser fixado para funções — exceto, talvez, com eval().

var MODULE_TWO = (function (old) {
    var my = {},
           key;
 
    for (key in old) {
        if (old.hasOwnProperty(key)) {
            my[key] = old[key];
        }
    }
 
    var super_moduleMethod = old.moduleMethod;
    my.moduleMethod = function () {
        // sobrescreve método ao clonar, acesso ao super através de super_moduleMethod
    };
 
    return my;
}(MODULE));

Cross-File Private State (Estado Privado Entre-Arquivos)

Uma limitação grave de dividir um módulo em vários arquivos é que cada arquivo mantém seu próprio estado privado e não tem acesso ao estado privado dos outros arquivos. Mas isso pode ser corrigido. Aqui está um exemplo de um módulo com Ampliação Fraca que vai manter o estado privado em todos as ampliações:

var MODULE = (function (my) {
    var _private = my._private = my._private || {},
        _seal = my._seal = my._seal || function () {
            delete my._private;
            delete my._seal;
            delete my._unseal;
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };
 
        // Acesso permanente a _private, _seal e _unseal
 
        return my;
}(MODULE || {}));

Qualquer arquivo pode definir propriedades em sua variável local _private e esta será imediatamente disponível para os outros. Uma vez que este módulo foi completamente carregado, o aplicativo deve chamar MODULE._seal(), que irá impedir o acesso externo ao interno _private.

Se este módulo fosse ampliado novamente, mais à frente na vida aplicativo um dos métodos internos, em qualquer arquivo, pode chamar _unseal() antes de carregar o novo arquivo e _seal() novamente depois de ter sido executado.

Submódulo

O padrão de Module Pattern Submódulo (Sub-module) é considerado pela maioria como o mais simples. Há muitos bons casos para a criação de submódulos. É como criar módulos regulares:

MODULE.sub = (function () {
    var my = {};
    // ...
    return my;
}());

Embora isso possa parecer bastante óbvio, vale a pena ser mencionado em um artigo desse tipo, haja vista que submódulos têm todas as capacidades avançadas de módulos normais, incluindo ampliação e estado privado.

Conclusão

A maioria dos Padrões Avançados de Module Pattern podem ser combinados uns com os outros para criar padrões mais úteis. Não raramente é possível encontrar, em aplicações mais complexas, a combinação de Ampliação Fraca, Estado Privado e Submódulos.

No decorrer do artigo, não se mencionou a respeito de performance, mas uma nota rápida sobre isso seria: Module Pattern é bom para performance! Ele passa por minificação muito bem, o que faz com que o download seja mais rápido. Usar Loose Augmentation permite downloads paralelos, fáceis e sem bloqueios. O tempo de inicialização é, provavelmente, um pouco mais lento do que outros métodos, mas o custo-benefício vale a pena. Desempenho em tempo de execução não deve sofrer penalidades desde que globais sejam importados corretamente e, provavelmente, há aumento de velocidade em submódulos, encurtando a cadeia de referência com variáveis ​​locais.

Para fechar sobre Module Patterns, aqui está um exemplo de um submódulo que se carrega dinamicamente a seu parent (criando-se se ele não existe) — o estado privado foi deixado de fora para que o exemplo fique mais conciso, mas incluir isso seria simples.

var UTIL = (function (parent, $) {
    var my = parent.ajax = parent.ajax || {};
 
    my.get = function (url, params, callback) {
        // Um pouquinho de trapaça... xD
        return $.getJSON(url, params, callback);
    };
 
    // etc
 
    return parent;
}(UTIL || {}, jQuery));

JavaScript puro ou Vanilla JavaScript (felizmente) está voltando. E com força. Mas, quando você decide continuar nos estudos e começa a inspecionar códigos alheios, inevitavelmente você se depara com algo como:

(function (window, document, undefined) {
    //
})(window, document);

Frequentemente desenvolvedores descobrindo (ou redescobrindo) o JavaScript puro se perguntam sobre IIFE (Expressão de Função Imediatamente Invocada ou Immediately-Invoked Function Expression), frequentemente apresentado da seguinte maneira:

(function (window, document, undefined) {
    //
})(window, document);

Escopo privado em IIFE

JavaScript tem maneiras interessantes de trabalhar com escopo de função; então, primeiramente essa expressão cria um “âmbito privado” (private scope). Por exemplo:

(function (window, document, undefined) {
    var name = 'Foo';
})(window, document);
console.log(name); // "name" não definido, está em um escopo diferente

Como funciona IIFE

Uma função normal se parece com isso:

var logMyName = function (name) {
    console.log(name);
};
logMyName('Foo');

Ela é chamada (invoke) quando necessário, por escolha do programador, em qualquer ponto do código em que se queira e/ou seja possível.

A razão pela qual essa IIFE em JavaScript foi criada, foi para ser uma expressão de função imediatamente invocada, o que significa que elas são imediatamente chamadas em tempo de execução – também, não é possível chamá-la novamente, já que elas só rodam uma vez, mais ou menos assim:

var logMyName = (function (name) {
    console.log(name); // Todd
})('Todd');

(function () {
})();

O par de parênteses extra é necessário. Isso não funciona:

function () {
}();

!function () {
}();

+function () {
}();
 
-function () {
}();
 
~function () {
}();

Mas não é preciso se forçar a decorar isso para usar a todo momento para fazer uma IIFE.

Argumentos da IIFE

Agora que foi explicado como isso funciona, passemos para os argumento da IIFE:

(function (window) {
})(window);

Então, o que mais é possível fazer? Passar tudo o que for necessário! Por exemplo, passar o Objeto document:

(function (window, document) {
    // é possível usar "window" e "document" normalmente
})(window, document);

A resolução de variáveis ​​locais é mais rápida que a de variáveis ​​globais, mas esta está numa escala enorme e dificilmente alguém vai perceber o aumento da velocidade – mas vale a pena considerar se há muitas referências a globais!

E sobre o undefined?

Em ECMAScript 3, undefined é mutável. Isso significa que o valor poderia ser transferido com, por exemplo, undefined = true;…! Felizmente, no ECMAScript 5 em modo estrito ('use strict';) o parser lança um erro quando se depara com isso. Antes disso, começou-se a proteger uma IIFE da maneira já vista:

(function (window, document) {
    // é possível usar "window" e "document" normalmente
})(window, document);

(function (window, document, undefined) {
})(window, document);

undefined = true;
(function (window, document, undefined) {
    // "undefined" é uma variável local undefined
})(window, document);

Minificando

Ao minificar as variáveis ​​locais é que a grandiosidade do padrão IIFE realmente pode ser vista. Nomes de variáveis ​​locais não são realmente necessários se estas foram passadas dessa maneira​​, então, é possível dar o nome que quiser para elas.

Por exemplo, mudar disso:

(function (window, document, undefined) {
    console.log(window); // Object window
})(window, document);

Pra isso:

(function (a, b, c) {
    console.log(a); // Object window
})(window, document);

Imagine todas as referências a bibliotecas e window e document minificadas. Claro que você não precisa parar por aí; é possível passar jQuery, também, ou qualquer outra coisa que esteja disponível dentro no escopo léxico:

(function ($, window, document, undefined) {
    // use $ para se referir à jQuery
    // $(document).addClass('test');
})(jQuery, window, document);
 
(function (a, b, c, d) {
    // Se torna
    // a(c).addClass('test');
})(jQuery, window, document);

Isso também significa que você não precisa chamar jQuery.noConflict(); ou qualquer coisa como $ é atribuído localmente ao módulo. Aprender como escopos e variáveis ​​globais/locais funcionam ajuda ainda mais.

Passar o código por um bom minificador certamente garantirá a renomeação de undefined para c (por exemplo, e apenas se for usado). É importante atentar para o fato de que o nome undefined é irrelevante; só é preciso saber que o Objeto referenciado é indefinido (undefined) e, como undefined não tem qualquer significado especial – undefined é o valor que o JavaScript dá às coisas que são declaradas mas não têm nenhum valor (nem em IIFE).

Ambientes globais não-navegador

Devido a algumas tecnologias, Node.js, o navegador não é sempre o Objeto global, o que pode ser realmente problemático se você está tentando criar uma IIFE para funcionar em múltiplos ambientes. Por esta razão, há determinadas “alternativas”, como isso:

(function (root) {
})(this);

Em um navegador, o ambiente global this se refere ao Objeto window, de modo que não é preciso passar em window, é sempre possível reduzir para this.

Alguns preferem o nome root, já que ele pode se referir tanto a ambientes não-navegador, quanto à raiz do browser.

Se você estiver interessado em uma solução universal (muito útil para ser usada para a criação de módulos em projetos de código aberto) é o UMD (Universal Module Definition):

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(factory);
    } else if (typeof exports === 'object') {
        module.exports = factory;
    } else {
        root.MYMODULE = factory();
    }
})(this, function () {
    // 
});

A função está sendo invocado com outra função sendo passada para ela. É possível, então, atribuí-la ao ambiente relevante “de dentro”. No navegador, root.MYMODULE = factory(); é o módulo IIFE; em qualquer outro ambiente (como Node.js), será usado module.exports ou requireJS se define === 'function' && define.amd resolver como true.

Conclusão

Como foi visto, usar IIFE (Expressão de Função Imediatamente Invocada ou Immediately-Invoked Function Expression) é extramente benéfico. Além de ajudar na performance, por permitir que não seja preciso lookups no código a procura de variáveis globais, permite que seu código possa ficar “isolado”, protegendo o escopo de uma porção de código ou módulo do ambiente em que foi colocado.

O fato de diversos frameworks e bibliotecas JavaScript de renome como jQuery, Backbone.js, Modernizr e outros usarem IIFE já é bastante significativo. Use código de qualidade para fazer código de qualidade.