Quando digo javascript comum, é apenas para dizer javascript convencional, ou seja, a forma que escrevíamos javascript antes de criarem os frameworks e bibliotecas que existem hoje, como Mootools e JQuery.

Escolhi falar sobre o JQuery por alguns motivos. Primeiro, por que é uma ferramenta que está se tornando bem popular, agiliza bastante o desenvolvimento de códigos, muito rica em documentação e tem uma curva de aprendizado boa para quem vai aprender.

Para deixar sua aplicação utilizar as funcionalidades do JQuery é fácil, basta baixar a última versão no site: http://jquery.com/ renomear para jquery.js (por exemplo) e adicionar uma chamada como:

E adicionar uma chamada na área do head do site assim:

<script src="jquery.js" type="text/javascript"></script>

Agora podemos adicionar efeitos, manipular a árvore da página, adicionar eventos aos elementos, utilizar AJAX, carregar outros arquivos de javascript dinamicamente… Tudo isso com a facilidade do JQuery!

Usar JQuery requer apenas que você faça a manipulação dentro de um bloco de código, que nada mais é do que um evento chamado ready (pronto) para o documento, assim:

$(document).ready(function() {
   // aqui fazemos qualquer manipulação com as facilidades do jquery
});

Esse bloco acima é o modelo geral de como funcionam as coisas com JQuery: primeiro temos o elemento que vamos modificar, depois temos o evento que queremos adicionar funcionalidades, ai vem o que chamamos de função de callback, onde podemos usar tanto códigos javascript comum, quanto os do framework.

Como o $(document) que fizemos acima, temos muitas formas para seletores de elementos da página. Esses seletores são flexíveis e poupam muitas linhas de código e algum tempo de raciocínio para a criação de um algoritmo especifico.

Seguem abaixo algumas formas de se selecionar algum elemento da página e o que eles significam:

$("p") = selecionar todos os parágrafos da página (retorna um vetor)

$("#meuIdUnico") = Seleciona o elemento que possui um id com valor meuIdUnico, (retorna um elemento único)

$("input[type=´text´]") = Seleciona todos os input do tipo text

Depois de “selecionar” os elementos para manipulação, podemos adicionar computamentos de uma forma bem interativa, pois podemos criar vários tipos de eventos para um mesmo objeto, basta colocar os blocos com os eventos que precisar, temos eventos para todas as horas: click, focus, change, keypress… Veja abaixo como seria fácil adicionar duas funções a todos os elementos de parágrafo da página, vamos colocar dois eventos, mas fique claro que podemos colocoar quantas precisarmos.

$("p").mouseover(function(){
   //manipular o evento de mouseover
});
$("p").mousedown(function(){
   //manipular o evento de mousedown
});

Uma coisa que é informalmente ligada ao fato de manipularmos eventos de vários elementos de uma só vez, é saber QUAL elemento estamos manipulando em determinado momento, pois as vezes precisamos fazer alterações condicionais de acordo com o elemento.

Isso também é facilmente feito com JQuery, temos a função each que percorre todos os elementos retornador pelo seletor, então, dentro dessa função podemos manipular de uma forma melhor o elemento, para isso temos o this, que para cada iteração feita pelo each, retorna o elemento especifico da iteração.

Por exemplo, se já estamos manipulando todos os formulário em algum bloco e queremos tratar diferente algum formulário especifico podemos fazer:

$("form").each(function() {
  //fazer computamento padrao
  if(this.class == "resetIt")
    this.reset();
});

O que mostrei são apenas pequenos exemplos de como podemos fazer coisas impressionantes com o JQuery. Muitas pessoas já tem muita coisa em javascript e que não quer perder ou ter que refazer… então isso não é problema pois com JQuery podemos intercalar códigos javascript comuns com suas sintaxes. Dentro do bloco de código, ou seja, dentro das chaves de abertura e fechamento de bloco, temos uma área livre para a imaginação, ali podemos fazer o que quiser desde uso de códigos comuns de javascript, até chamadas para funções externas. Assim vemos que temos total controle, pois podemos importar outros scripts e não temos o trabalho de refazer o código para colocar dentro do JQuery, apenas precisamos chamar os códigos externos dentro das funções JQuery.

Para quem quer se aprofundar no Framework, recomendo a documentação oficial: http://docs.jquery.com/Main_Page

Espero ter contribuído com alguma coisa de interesse de todos. Até a próxima!