Many web developers, especially beginners want to know the difference between Javascript and JQuery.
At first sight, it seems the two are different or a little bit related. It may surprise you to learn that they are actually the same.
What? How? Ok, let's dig in to it.
What is JavaScript?
JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements.
Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:
- Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.
- Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.
Source https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction
What is JQuery?
JQuery is a set of JavaScript libraries designed specifically to simplify HTML document traversing, animation, event handling, and Ajax Interactions for rapid web development.
That being said, in order to use either of the two scripting languages, you need to have a foundation or knowledge in Javascript.
If you have good foundation in using Javascript you can easily jump in Jquery coding and you will found out that JQuery meets your common needs with
less and clean code than native Javascript.
Get it now? Let's have a few code example between the two manipulating DOM.
The DOM (Document Object Model) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content.
Now let's study what JavaScript is, what JQuery is, and which scripting language is the better choice for your future web development projects.
Given Elements:
- <button id='my_id' class='my_class'>Click Me!</button>
- <body></body>
| Event | Javascript Code | JQuery Code ($ or jQuery) | |
| get element by id | document.getElementById('my_id'); | $('#my_id');
or $('button#my_id'); |
|
| get element by classname | document.getElementsByClassName('my_class'); | $('.my_class');
or $('button.my_class'); |
|
| on click event | function callClick(){ alert('You clicked me!') ; }<button onclick="callClick()" id='my_id' class='my_class'>Click Me!</button> or document.getElementById("my_id").addEventListener('click', function(){ |
$('button#my_id').click(function(){ alert('You clicked me!'); }); |
|
| change background color | function changeBackground(color) { document.body.style.background = color; } onload="changeBackground('red');" |
$('body').css('background', 'red'); |
NOTES:
- In Javascript getting DOM by classname, if you are wondering why I used ElementsByClassName instead of ElementByClassName. Here is why!
The name of the DOM function is actually getElementsByClassName, not getElementByClassName, simply because more than one element on the page can have the same class, hence: Elements! - In Jquery, before you can use it, you have to include the library in your HTML page. See http://www.w3schools.com/jquery/jquery_get_started.asp
As the example above, you can see the difference between Javascript and JQuery.
Once you digged more deeply in Jquery you will see that it makes the Javascript coding more simply and easy.
One of the great advantages of JQuery or another JavaScript framework is the speed in which code can be written. One line of code can change how a project will interact with a user with very little effort.
Now, which one should you use?
Many Web Developers are debating and arguing whether to use Javascript or JQuery in a given situation. The truth is that both option is possible.
Either option can be used to create and make the same function or effects, but often since Jquery is set of Javascript libraries, it can do it with fewer lines of code.
There are some(few) project that requires Javacript. Nowadays, JQuery is sufficient for most web development projects. Although JQuery maybe the better choice in most scenarios, as a novice web developer you should still take the time to learn both JavaScript and jQuery. It’s important to realize how JavaScript works and how it affects the Document Object Model (DOM).
Remember that the biggest difference between jQuery and JavaScript is that jQuery has been optimized to work with a variety of browsers automatically.
As JQuery says, "write less do more"
Unfortunately, JavaScript still has some issues with cross-browser compatibility due to poor JavaScript implementation practices on the part of web browser developers.
Happy Programming 🙂
Author Profile
