Javascript vs. jQuery - Day 23

What is Javascript?

Before we get into the differences between jQuery & Javascript, it’s important to know what Javascript actually is and how it differs from other languages.

HTML vs. CSS vs. JS

These 3 are very often grouped together when being talked about because they are the backbone of the internet and are the only languages that truly work in the browser. 100% of the websites on the internet are built using a combination of one or all of these languages and they all serve different purposes. HTML is the structure or the framework of the webpage. I am going to use a house analogy and when it is being built think of HTML as the wood framing of a house without any enclosed walls, electric or plumbing. CSS is the styling of a webpage and for a house would be like the walls/paint to make the house look nice. Javascript is the only real programming languages out of these 3 because it is the only one that can perform functions on a website. When you visit a website and there’s a popup, some animation or most of the time when anything is moving on the page, it is done by performing functions which is Javascript. In our house analogy the electricity and plumbing to actually make the house loveable can be seen as the Javascript.

JS vs. jQuery

Now that we know a bit more about Javascript let’s get into the differences between Javascript from jQuery. Unlike above where HTML, CSS & JS are all used for different purposes on a website, Javascript & jQuery both perform the same functionality in the web browser. To take it even further jQuery is actually just a wrapper (otherwise called a library) around plain javascript so anything you can do in jQuery, you can do in plain javascript. To add another wrench in it, unlike Javascript, you can’t just start using it on any page, you have to include the jQuery library in order to use jQuery seen below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You may be thinking, “then why the hell would we use jQuery instead of javascript?“. Well that’s a very good question, and the best way to answer it is to show the differences between the code.

Plain Javascript

document.getElementsByTagName("p")
document.getElementsByClassName("class")
document.getElementById("id")

jQuery

$('p')
$('.class')
$('#id')

All three statements above perform the same exact functionality and at first look it’s clear that plain javascript is just longer to write out, but why does that matter? Imagine writing out these statements out 100 times, which one do you think you will mistype first? There is a lot more room for error typing with plain javascript and it isn’t always easy to find the issue either. jQuery is more clear & concise through all 3 selectors and simply easier to remember the correct formatting.

Advantages of jQuery

  • Easier to read & write
  • Faster to debug
  • Most additional libraries require jQuery to work anyway
  • Same functionality with less code

Disadvantages of jQuery

  • Requires you to add jQuery library to work

Conclusion

Check out the video below for a more in-depth overview for the Zero to Startup in 30 Days Challenge.

Javascript vs. jQuery

Coming Tomorrow -----> How to Create A Pop-up Window

Want To Learn How To Turn Your Ideas Into Code?


Written by Tim Moreton who lives and works
in Philadelphia building useful things.