Diferença JQuery e JavaScript
19/09/2015
0
Pelo que notei, diferenças são poucas entre os dois, eu sei, o JQuery é um framework JavaScript, porem não seria reaprender o Javascript?
JQuery
Javascript
JQuery
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
alert('Hello World!');
});
});
</script>
Javascript
<script type="text/javascript">
function displayHello()
{
document.getElementById("demo").innerHTML = "Olá Mundo";
}
</script>
Marcelo Pastore
Curtir tópico
+ 0
Responder
Post mais votado
20/09/2015
Em primeiro lugar permitam-me discordar de que o jQuery é mais complexo e trabalhoso que o uso do JavaScript clássico. Não é mesmo! Isto é fato! E vou tentar esclarecer o porque desta afirmação. Vai ser um post longo então preparem-se, sentem-se que lá vem história.
Só para contextualizar o JavaScript foi desenvolvido pela Netscape Communications na criação do seu browser Netscape em 1995, nos primórdios da boom da web. Na época chama-se LiveSript e adicionava uma extensão ao browser permitindo manipular as página que eram apenas HTML. Com o sucesso do browser Netscape e do Javascript a Sun colaborou e ajudou a aperfeiçoar o Javascript e deixou um pouco parecido com a sintaxe do Java, dai o nome JavaScript. Mas é bom deixar claro que JavaScript não tem nada a ver com Java.
jQuery é uma biblioteca JavaScript cross-browser desenvolvida para permitir que o desenvolvedores pudessem se concentrar na lógica da programação e não nos problemas de incompatibilidade dos browser atuais. Foi criada dezembro de 2006 por John Resig e faz uso da Licença MIT ou da GNU General Public License, portando código aberto.
Uma diferença que deve ser destacada é de que o JavaScript roda nativamente no browsers enquanto que para o jQuery deve ser adicionada uma referência a sua biblioteca no HTML.
Mas no final tudo é JavaScript. A grosso modo jQuery é uma biblioteca JavaScript. Só que é mais simples e permite um economia de código para criar as mesmas funcionalidades que seria usado no JavaScript.
Outro detalhe é jQuery não possui exemplos, na verdade ele possui as funcionalidades prontas para serem usadas, assim não é preciso desenvolver basta usá-las. E de quebra é garantido que será CrossBrowser, vai funcionar em qualquer browser em qualquer versão.
Ai você vão questionar que no exemplo postado inicialmente isto não parece verdade, pois a função que usa JavaScript parece bem mais simples do que a que usa jQuery. E eu esclareço que:
1-Para tarefas simples como escrever no HTML ou exibir um alert, realmente pode não haver muita diferença;
2-O exemplo não é dos melhores pois são duas funções diferentes, um exibi alert outro adiocionar texto via innerHTML, então seria como comparar bananas com limões;
3-O código jQuery pode ser melhorado o do exemplo não esta dos melhores e
4-Para criar funções complicadas e profissionais não existem nem comparação jQuery é infinitamente superior.
Vou criar exemplos com um código melhor e mostrar de forma prática como é esta diferença.
Exemplo de adicionar um texto ao HTML:
Javascript:
JQuery
Como já tinha dito como se trata de um função trivial e muito simples pode-se dizer que são quase iguais. Porém ainda acho, gosto pessoal, o jQuery mais elegante e simples.
Apesar de existirem milhares de sites institucionais apresentado empresas com alguns textos e um formulário de contato o quente no desenvolvimento Web são aplicações corporativas. Então para criar aplicações corporativas para as áreas: financeiras, engenharia, suprimentos, controle de pessoal e por ai vai. Precisamos criar um enorme quantidade de formulários para entrada de dados. Ai aparece a necessidade de se criar máscaras de entradas para diversos tipo de campos: datas, horas, CPF, CNPJ, monetários e etc. É possível criar esta máscaras manualmente usando JavaSript, só que é trabalhoso e requer conhecimentos avançados. No jQuery e só usar o que é "totalmente excelente".
JavaScript:
Como pode ser visto você tem de desenvolver toda a lógica da função e ainda criar uma função para cada máscara. O exemplo acima é para data, depois você teria de criar para: CPF, CNPJ, Hora, Monetárias, Teloefone e etc. Então não é para os fracos, pois é preciso conhecer muito de JavaScript.
No jQuery existe uma biblioteca que é só referenciá-la na sua página utilizar. Vale uma visita a jQuery Mask Plugin
jQuery
HTML:
É indiscutível a facilidade, elegância e robustez do uso do jQuery. Basta adicionar a referência e depois configurar como desejas e a mágica esta feita. E outra vantagem é de que esta funções já foram testadas e aprovados por milhares de usuários, ao passo que ao desenvolver suas próprias funções você certamente encontrará bugs.
A pesar do post gigante, peço desculpar por isso, mas não teria como aborda a questão sendo superficial. E mesmo assim nem arranhamos o universo do jQuery. Eu poderia escrever dezenas de páginas sobre o assunto.
Respondendo o questionamento inicial é tudo Java Script só que cada um com suas especificidades. Se você aprender JavaScript profundamente não terá problemas com jQuery.
Espero que outros participantes do fórum postem suas opiniões, pois assim o post ficará mais rico e completo.
Só para contextualizar o JavaScript foi desenvolvido pela Netscape Communications na criação do seu browser Netscape em 1995, nos primórdios da boom da web. Na época chama-se LiveSript e adicionava uma extensão ao browser permitindo manipular as página que eram apenas HTML. Com o sucesso do browser Netscape e do Javascript a Sun colaborou e ajudou a aperfeiçoar o Javascript e deixou um pouco parecido com a sintaxe do Java, dai o nome JavaScript. Mas é bom deixar claro que JavaScript não tem nada a ver com Java.
jQuery é uma biblioteca JavaScript cross-browser desenvolvida para permitir que o desenvolvedores pudessem se concentrar na lógica da programação e não nos problemas de incompatibilidade dos browser atuais. Foi criada dezembro de 2006 por John Resig e faz uso da Licença MIT ou da GNU General Public License, portando código aberto.
Uma diferença que deve ser destacada é de que o JavaScript roda nativamente no browsers enquanto que para o jQuery deve ser adicionada uma referência a sua biblioteca no HTML.
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
Mas no final tudo é JavaScript. A grosso modo jQuery é uma biblioteca JavaScript. Só que é mais simples e permite um economia de código para criar as mesmas funcionalidades que seria usado no JavaScript.
Outro detalhe é jQuery não possui exemplos, na verdade ele possui as funcionalidades prontas para serem usadas, assim não é preciso desenvolver basta usá-las. E de quebra é garantido que será CrossBrowser, vai funcionar em qualquer browser em qualquer versão.
Ai você vão questionar que no exemplo postado inicialmente isto não parece verdade, pois a função que usa JavaScript parece bem mais simples do que a que usa jQuery. E eu esclareço que:
1-Para tarefas simples como escrever no HTML ou exibir um alert, realmente pode não haver muita diferença;
2-O exemplo não é dos melhores pois são duas funções diferentes, um exibi alert outro adiocionar texto via innerHTML, então seria como comparar bananas com limões;
3-O código jQuery pode ser melhorado o do exemplo não esta dos melhores e
4-Para criar funções complicadas e profissionais não existem nem comparação jQuery é infinitamente superior.
Vou criar exemplos com um código melhor e mostrar de forma prática como é esta diferença.
Exemplo de adicionar um texto ao HTML:
Javascript:
<script type="text/javascript">
window.onload = function(){
document.getElementById('msgid3')
.innerHTML = "This is Hello World by JavaScript";
}
</script>
JQuery
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid1").html("This is Hello World by JQuery 1<BR>");
});
</script>
Como já tinha dito como se trata de um função trivial e muito simples pode-se dizer que são quase iguais. Porém ainda acho, gosto pessoal, o jQuery mais elegante e simples.
Apesar de existirem milhares de sites institucionais apresentado empresas com alguns textos e um formulário de contato o quente no desenvolvimento Web são aplicações corporativas. Então para criar aplicações corporativas para as áreas: financeiras, engenharia, suprimentos, controle de pessoal e por ai vai. Precisamos criar um enorme quantidade de formulários para entrada de dados. Ai aparece a necessidade de se criar máscaras de entradas para diversos tipo de campos: datas, horas, CPF, CNPJ, monetários e etc. É possível criar esta máscaras manualmente usando JavaSript, só que é trabalhoso e requer conhecimentos avançados. No jQuery e só usar o que é "totalmente excelente".
JavaScript:
<html>
<head>
<title>formatado data em javascript</title>
<script type="text/javascript">
function Formatadata(Campo, teclapres)
{
var tecla = teclapres.keyCode;
var vr = new String(Campo.value);
vr = vr.replace("/", "");
vr = vr.replace("/", "");
vr = vr.replace("/", "");
tam = vr.length + 1;
if (tecla != 8 && tecla != 8)
{
if (tam > 0 && tam < 2)
Campo.value = vr.substr(0, 2) ;
if (tam > 2 && tam < 4)
Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2);
if (tam > 4 && tam < 7)
Campo.value = vr.substr(0, 2) + '/' + vr.substr(2, 2) + '/' + vr.substr(4, 7);
}
}
</script>
</head>
<body>
<form method="post" action="arquivo.php">
<p>
<label>Data:</data>
<input type="text" name="data" maxlength="10" onkeyup="Formatadata(this,event)" />
</p>
</form>
</body>
</html>
Como pode ser visto você tem de desenvolver toda a lógica da função e ainda criar uma função para cada máscara. O exemplo acima é para data, depois você teria de criar para: CPF, CNPJ, Hora, Monetárias, Teloefone e etc. Então não é para os fracos, pois é preciso conhecer muito de JavaScript.
No jQuery existe uma biblioteca que é só referenciá-la na sua página utilizar. Vale uma visita a jQuery Mask Plugin
jQuery
$(document).ready(function(){
$('.date').mask('00/00/0000');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.cpf').mask('000.000.000-00', {reverse: true});
);
HTML:
<input type="text" class="date"> <input type="text" class="time"> <input type="text" class="date_time"> <input type="text" class="cep"> <input type="text" class="cpf">
É indiscutível a facilidade, elegância e robustez do uso do jQuery. Basta adicionar a referência e depois configurar como desejas e a mágica esta feita. E outra vantagem é de que esta funções já foram testadas e aprovados por milhares de usuários, ao passo que ao desenvolver suas próprias funções você certamente encontrará bugs.
A pesar do post gigante, peço desculpar por isso, mas não teria como aborda a questão sendo superficial. E mesmo assim nem arranhamos o universo do jQuery. Eu poderia escrever dezenas de páginas sobre o assunto.
Respondendo o questionamento inicial é tudo Java Script só que cada um com suas especificidades. Se você aprender JavaScript profundamente não terá problemas com jQuery.
Espero que outros participantes do fórum postem suas opiniões, pois assim o post ficará mais rico e completo.
Jothaz
Responder
Mais Posts
19/09/2015
Gabriela Monte
Para começar com jquery é necessario pelo menos uma base em javascript.
Responder
19/09/2015
Marcelo Pastore
Claro Gabriela, mas é uma comparação e queria ler opiniões.
Responder
20/09/2015
Marcelo Pastore
Uma aula, um mini artigo, uma ótima explicação, hehehe. No HelloWorld(exemplo) se torna um pouco maior o código, mas nesse ultimo exemplo não tem como comparar! Vamos aguardar mais gente opinar.
Responder
21/09/2015
Marluce Neves
Sem mais Jothaz, me meti no post mas a sua resposta não me deixar perguntar mais e muito menos questionar.
Responder
Clique aqui para fazer login e interagir na Comunidade :)