What the difference between JavaScript vs jQuery

This article is mainly for those developers who are new to web development. People who start their career usually question - why jQuery while there is JavaScript; or the difference between JavaScript and jQuery; which is better to use - JavaScript or jQuery; is jQuery an alternative for JavaScript; or will jQuery replace JavaScript etc.

Let us first look at what is JavaScript and what is jQuery.

What is JavaScript

JavaScript (JS) is a dynamic programming language. It is an interpreted language. Other than the unfortunate similarity in name, it has nothing to do with Java programming language. As the name suggests, JavaScript is a scripting language.

It is most commonly used for appealing UI (like moving objects, flashy elements in the screen), user interactions (client-side validation, showing pop-up etc.) and for controlling the document content displayed to the user.

There is nothing you need to include in the browser to support JavaScript. This is because it was considered as the language of the web since its birth. It runs in all modern browsers without any additional plugins.

What you mean by JavaScript is dynamic

Most programming languages have dynamic behaviors. But in the case of JavaScript, pretty much everything is dynamic.

All variables are dynamic in type and existence. You declare a variable as,

var msg = "Hello World!";  

The code written in JavaScript is dynamic, you can create a variable at runtime, and the type is determined at runtime.

You can create new functions or replace existing functions at runtime.

New codes are added to the browser when more script files are loaded and you can add any number of files at any time.

What is jQuery

jQuery website defines jQuery (jQ) as “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”.

jQuery is not a programming language instead it is a cross-platform JavaScript library. There are many other JavaScript libraries available like MooTools, Knockout or even Angular (Though Angular uses TypeScript, it compiles to JavaScript at the end) and jQuery is one of the most popular among them.

jQuery is a fast feature-rich JavaScript library. It is created to help programmers with creating common UI and take care of the browser compatibility issues more easily.

jQuery, in fact, is nothing but JavaScript. All the code you write in jQuery is converted to JavaScript internally. One line of code written using jQuery may be equal to many lines of code written using JavaScript which means programmers will have to write only lesser lines of code.

To start using jQuery on your page, you need to include one line of code in the header of your page like,

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script > 

The above line includes a jQuery library to your page using the Microsoft CDN (Content Delivery Network). The jQuery library is a single JavaScript file.

You can also include the jQuery library as a local resource from your project folder.

But there are benefits using the CDN. If you use the minified version of the library, you will get the advantage of concurrent connections and multiple servers.

JavaScript Vs jQuery

Now, we can discuss the questions mentioned at the beginning of this article. Most of those questions may arise because of the lack of clear understanding of JavaScript and jQuery.

Since jQuery is nothing but a library of JavaScript, it cannot replace JavaScript. All jQuery code is JavaScript, but jQuery doesn’t include all the JavaScript code.

One thing you should understand is that they are not two programming languages; instead, they both are JavaScript. jQuery is just optimized to do the common scripting functions with fewer lines of code.

Lines of code

Many actions like Animate, Delay, Fade-In can be done using jQuery with very few lines of code. On the other hand, JavaScript will take lots of lines of code for the same.

We can consider a simpler example,

Suppose I want to select all elements having class- simple-li,

If I use JavaScript,

document.getElementsByClassName("simple-li");  

On the other hand, if I use jQuery,

$('simple-li') 

Performance

If you check the performance of the two, you can find that plain JavaScript is faster than jQuery for accessing DOM. But JavaScript can be slower when you write some complex logic given the fact that we may make major mistakes or use poor code which may lead to a performance hit. On the other hand, jQuery has been tested for years to use best and fast JavaScript codes.

In my view, it is not right to compare the two or you cannot say one is better than the other. We need to use whichever is better suited to our requirement.

A few points to remember

Advantages of jQuery

• You can code most common JS actions using jQuery with fewer lines of code.
• Browser compatibility – you can write code which runs across browsers without having to know the various browser intricacies and won’t break.
• Lets you write JavaScript quicker and easier.
• Avoids common browser errors
• Simplification of usually complicated operations – complex operations like Ajax interactions, animation, event handling etc. are handled by jQ with the best lines of code.
• jQ is battle tested and uses the fast and best lines of code for accomplishing most tasks.

Conclusion

In short, we can say that for rapid web development it is good to use JQuery, as it also takes care of common browser errors and through its ready to use library functions things gets faster. Though it totally depends on your need to choose any one of them, still most of the web development projects work fine with JQuery rather than JavaScript. For initial product versions, you can start with JQuery as debugging time will also get reduced, while later you can switch to JavaScript.

jQuery is well suited for most applications, especially ones which need rapid development. jQuery takes care of the common browser errors by ironing the fixes right into the library. jQuery also takes care of browser compatibility issue which is a developer’s nightmare during deployment.

Using JavaScript or jQuery really depends on your need and other factors. Most of the web development projects will work perfectly fine using jQuery. But there will be a small percentage that does require JavaScript.

Since pure JavaScript is the best performing method of client-side development, there is a reason to use it. But a library like jQuery will help you to get to market faster and cheaper. So, it is  better to depend heavily on jQuery for the initial versions of your product. Once your product is established in the marked and you have got the revenues to go back and refactor the code, you can go ahead and custom code all the script.

Thank you for reading!

#JavaScript #jQuery #difference

What is GEEK

Buddha Community

JavaScript vs jQuery — Learn DOM manipulation without using jQuery

jQuery has been the savior for so many new and coming Web Developers, including myself. If you wanted to learn Web Development back in the day, learning jQuery was an absolute given. This was mainly because jQuery took much of the cross-browser compatibility issues out and enabled developers to write code without having to worry about whether the features that they are implementing will work on all browsers.

But with improvements in browser standards and most of jQuery’s API’s integrated into JavaScript, jQuery has become a little redundant. Moreover, with native browser API’s it is so much easier to debug code, and being native, most of these API’s offer better performance than jQuery’s API’s. Besides, you will have one less library to add to your script imports. If you’re still not sold on parting with jQuery maybe this answer will help.

So, if you’re considering a move away from jQuery, I have compiled a list of common jQuery methods and API’s that people use, with their Vanilla JS alternatives (Vanilla JS is a fancy name for plain JavaScript code without the use of any libraries). Let’s dive in!

Querying the DOM

The bread and butter of jQuery is it’s amazing ability to query DOM elements. This is demonstrated below:

jQuery('div.home')

However, you can achieve the same thing with JavaScript using it **document.querySelector() **and document.querySelectorAll() methods. Below is their implementation.

#javascript #replace-jquery #jquery #jquery-vs-javascript #faisal-rashid

Java Vs. JavaScript: Know the Difference

What a mess it could be to share the same name — especially if you are a programming language. Even if you are already over 20 years old, IT newbies periodically confuse you with your namesake. This happens all the time with Java and JavaScript, although they are not related at all! As someone on the internet said. They correlate in much the same way as a car and a carpet.

Why do these two languages have such similar names? How do they differ from each other, and what else do they have in common? This article will provide the answers to these questions.

In the Beginning, It Was Java

The Same Year, A Little Bit Later: Meet JavaScript!

Technical Differences Between Java and JavaScript

What Can You Build in Java and JavaScript?

…

#java #javascript #javascript-development #java-development #learn-to-code-java #learn-javascript #programming #java-vs-javascript

Java vs. JavaScript: Know The Difference

Java vs. JavaScript

#java #javascript #Java vs. JavaScript #Java vs JavaScript #programming

What the difference between JavaScript vs jQuery

This article is mainly for those developers who are new to web development. People who start their career usually question - why jQuery while there is JavaScript; or the difference between JavaScript and jQuery; which is better to use - JavaScript or jQuery; is jQuery an alternative for JavaScript; or will jQuery replace JavaScript etc.

Let us first look at what is JavaScript and what is jQuery.

What is JavaScript

JavaScript (JS) is a dynamic programming language. It is an interpreted language. Other than the unfortunate similarity in name, it has nothing to do with Java programming language. As the name suggests, JavaScript is a scripting language.

It is most commonly used for appealing UI (like moving objects, flashy elements in the screen), user interactions (client-side validation, showing pop-up etc.) and for controlling the document content displayed to the user.

There is nothing you need to include in the browser to support JavaScript. This is because it was considered as the language of the web since its birth. It runs in all modern browsers without any additional plugins.

What you mean by JavaScript is dynamic

Most programming languages have dynamic behaviors. But in the case of JavaScript, pretty much everything is dynamic.

All variables are dynamic in type and existence. You declare a variable as,

var msg = "Hello World!";  

The code written in JavaScript is dynamic, you can create a variable at runtime, and the type is determined at runtime.

You can create new functions or replace existing functions at runtime.

New codes are added to the browser when more script files are loaded and you can add any number of files at any time.

What is jQuery

jQuery website defines jQuery (jQ) as “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.”.

jQuery is not a programming language instead it is a cross-platform JavaScript library. There are many other JavaScript libraries available like MooTools, Knockout or even Angular (Though Angular uses TypeScript, it compiles to JavaScript at the end) and jQuery is one of the most popular among them.

jQuery is a fast feature-rich JavaScript library. It is created to help programmers with creating common UI and take care of the browser compatibility issues more easily.

jQuery, in fact, is nothing but JavaScript. All the code you write in jQuery is converted to JavaScript internally. One line of code written using jQuery may be equal to many lines of code written using JavaScript which means programmers will have to write only lesser lines of code.

To start using jQuery on your page, you need to include one line of code in the header of your page like,

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script > 

The above line includes a jQuery library to your page using the Microsoft CDN (Content Delivery Network). The jQuery library is a single JavaScript file.

You can also include the jQuery library as a local resource from your project folder.

But there are benefits using the CDN. If you use the minified version of the library, you will get the advantage of concurrent connections and multiple servers.

JavaScript Vs jQuery

Now, we can discuss the questions mentioned at the beginning of this article. Most of those questions may arise because of the lack of clear understanding of JavaScript and jQuery.

Since jQuery is nothing but a library of JavaScript, it cannot replace JavaScript. All jQuery code is JavaScript, but jQuery doesn’t include all the JavaScript code.

One thing you should understand is that they are not two programming languages; instead, they both are JavaScript. jQuery is just optimized to do the common scripting functions with fewer lines of code.

Lines of code

Many actions like Animate, Delay, Fade-In can be done using jQuery with very few lines of code. On the other hand, JavaScript will take lots of lines of code for the same.

We can consider a simpler example,

Suppose I want to select all elements having class- simple-li,

If I use JavaScript,

document.getElementsByClassName("simple-li");  

On the other hand, if I use jQuery,

$('simple-li') 

Performance

If you check the performance of the two, you can find that plain JavaScript is faster than jQuery for accessing DOM. But JavaScript can be slower when you write some complex logic given the fact that we may make major mistakes or use poor code which may lead to a performance hit. On the other hand, jQuery has been tested for years to use best and fast JavaScript codes.

In my view, it is not right to compare the two or you cannot say one is better than the other. We need to use whichever is better suited to our requirement.

A few points to remember

Advantages of jQuery

• You can code most common JS actions using jQuery with fewer lines of code.
• Browser compatibility – you can write code which runs across browsers without having to know the various browser intricacies and won’t break.
• Lets you write JavaScript quicker and easier.
• Avoids common browser errors
• Simplification of usually complicated operations – complex operations like Ajax interactions, animation, event handling etc. are handled by jQ with the best lines of code.
• jQ is battle tested and uses the fast and best lines of code for accomplishing most tasks.

Conclusion

In short, we can say that for rapid web development it is good to use JQuery, as it also takes care of common browser errors and through its ready to use library functions things gets faster. Though it totally depends on your need to choose any one of them, still most of the web development projects work fine with JQuery rather than JavaScript. For initial product versions, you can start with JQuery as debugging time will also get reduced, while later you can switch to JavaScript.

jQuery is well suited for most applications, especially ones which need rapid development. jQuery takes care of the common browser errors by ironing the fixes right into the library. jQuery also takes care of browser compatibility issue which is a developer’s nightmare during deployment.

Using JavaScript or jQuery really depends on your need and other factors. Most of the web development projects will work perfectly fine using jQuery. But there will be a small percentage that does require JavaScript.

Since pure JavaScript is the best performing method of client-side development, there is a reason to use it. But a library like jQuery will help you to get to market faster and cheaper. So, it is  better to depend heavily on jQuery for the initial versions of your product. Once your product is established in the marked and you have got the revenues to go back and refactor the code, you can go ahead and custom code all the script.

Thank you for reading!

#JavaScript #jQuery #difference

Understand and Use JavaScript's .forEach() vs. jQuery's .each()

Your knowledge of JavaScript and jQuery is incomplete if you don’t know how to loop with .forEach() and .each() methods. This tutorial helps you to quickly master JavaScript .forEach() & jQuery .each() in 2 minute time.

There are two methods to deal with an array on client-side – JavaScript .forEach() and jQuery .each(). Here, I will teach you how to use both of these methods in different scenarios.

Defination of these 2 methods

a. JavaScript .forEach() Method

The .forEach() method of JavaScript executes a given function once for each element of the array.

For example -

var arr = ['a', 'b', 'c'];    
arr.forEach(function(element) {  
    console.log(element);  
});  

The above JavaScript code will print – ‘a’, ‘b’, & ‘c’ in the console window.

b. jQuery .each() Method

jQuery has it’s own method called jQuery Each method and it is used to loop over arrays, array of object and matched elements of the DOM. See the below code:

var arr = ['a', 'b', 'c'];  
$.each(arr , function (index, value){  
  console.log(arr);   
});  

The above jQuery code will print – ‘a’, ‘b’, & ‘c’ in the console window.

Looping through DOM elements

a. JavaScript .forEach() Method

Suppose you want to extract all the anchor tags from the web page, and then loop through each of them. In that case first you have to get all the anchors using document.getElementsByTagName(“a”) and then convert it into an array. This is because JavaScript .forEach() method loops only through an array.

See the below code:

var links = document.getElementsByTagName("a");    
var Arr = Array.from(links);    
Arr.forEach(someFunction);    
    
function someFunction(currentValue) {    
    console.log(currentValue);    
}    

I used Array.from() method to convert to an array.

b. jQuery .each() Method

In case of .each() method you simply loop through all the anchor tags, like shown in the below code, as jQuery Each method can loop through arrays, array of objects and matched element of the DOM. So you don’t have to do the conversion to an array like JavaScript .forEach() method.

See the below code:

$("a").each(function (index, value) {   
  console.log($(this).attr("href"));   
});  

Clearly you can see in this case the lines of codes are very less than compared to .forEach() method of JavaScript.

Which one you should choose?

Case 1: DOM Manipulations

When working with DOM elements the jQuery Each method has a great advantage because it removes a lot of code lines. So prefer this method during DOM manipulations.

Case 2: Website is using jQuery from before

If your website is already using jQuery then you should use jQuery Each method because this will bring code consistency in your project.

In all other cases use JavaScript .forEach() method.

Conclusion

Both of these above methods are very good and they make the codes easy to understand. I would recommend every web developer to know both of these methods.

Thank you for reading.

#JavaScript #jQuery #ES6 #javascript