About javascript and jquery

jQuery vs. JavaScript | What’s the difference?

Here is a question I hear often: What’s the difference between JavaScript and jQuery? To understand the difference you need to look at a little bit of code.

Now, don’t worry if you don’t understand the code. The main point of this is to see how jQuery and JavaScript do the same thing in different ways and what makes jQuery so much easier for some of the things you’ll want to do. Trust us. You’ll be fine.

JavaScript Basics

So let’s say we’ve made a simple web site — it just says “Hello” and “Goodbye” (not a terribly inviting web site, but it’s just here to make a point) — and we want there to be a little bit of interactivity in it. So our web site is built of three basic frontend languages. You’re going to have a little HTML, a little CSS, and a little JavaScript.

If you’ve seen our earlier video on what JavaScript is, you know it’s there to add interactive elements to the site. It can be complex interactive elements, like a clickable “button” or simpler things like changing the text color when you click on it. Those are all doable because of languages like jQuery and JavaScript.

JavaScript Examples vs. jQuery Examples

To see the difference between them, let’s look at a simple example of one application of these: making a line of text change color. If we want to do that using JavaScript, this is what the code would look like:

var d = document.getElementsByClassName(«goodbye»); var i; for (i = 0; i

If you don’t code much you’d be forgiven for getting lost in all that! It’s a lot of code for one action and if you’re new to coding, it kind of looks like five lines of nonsense.

The same action in jQuery looks like this:

You can see it’s one line that says “grab this class and add this extra class from CSS to it.” Essentially, it takes all those steps you saw in the JavaScript and makes them into one command.

You can kind of think of it like this. When you have to ask someone to do a task with a lot of steps — like making a pot of coffee — you don’t tell them to do the steps again and again, you just say, “Hey, could you make some coffee?”

That’s jQuery. A group of developers said, “Look. There are these things we have to do all the time in JavaScript an it takes us five complicated lines every time we have to do that.” And they didn’t want to write five lines every time, so they came up with a way to do that in just a line or two.

Getting Started with jQuery

This is what we see when we look at jQuery. We see a list of familiar titles — Animate, Delay, Fade-In — all these things that would have taken lots of lines of code in JavaScript, and now you can just click on them and write them out as maybe five or six lines total. That is jQuery in a nutshell. It’s all the functionality of JavaScript, but it simplifies the process immensely.

To get started with jQuery, you just have to type this one bit of code into the header of your project:

It’s kind of like in The Matrix when Neo (aka Keanu Reeves) gets an injection of knowledge uploaded into his brain and he wakes up and is all like “I know kung fu.”

By typing this jQuery line into the top of your code, your code is all of a sudden like, “I know what animate means” and “I know what animate AddClass means” with one line of code.

Takeaways

• jQuery is a framework that lets you write JavaScript quicker and easier.
• The developers of jQuery created it to condense common JavaScript tasks into fewer lines of code.
• You can code most common JavaScript actions using jQuery (and you can actually check out their API page for a complete list of what you can do)
• To get started using jQuery visit the website https://jquery.com/

Chris Castiglione Follow Co-founder of Console.xyz. Adjunct Prof at Columbia University Business School.

• Learn to Code

• #differences between javascript and jquery
• #JavaScript
• #javascript example code
• #javascript jquery video
• #javascript vs. jquery
• #Jquery
• #jquery example code
• #jquery tutorial video
• #learn to code javascript
• #learn to code jquery
• #Web Development
• #what is jquery

Источник

Key Differences Between jQuery and JavaScript: An Expert Guide

When I first started learning to code, I found it difficult to navigate through the terminology, jargon, and acronyms that seem to accompany every technology I played with.

And it can get even harder when things sound very similar, or operate in a similar ecosystem.

One of my earliest questions was “What is the difference between JavaScript and jQuery?” Are they one and the same, or are they completely independent?

In this article we’re going to demystify that question, and leave you with a better understanding of what both of these technologies are, as well as the benefits of using them. Let’s dive in!

1. What exactly is JavaScript?

Another question novices often find themselves asking is, “So, JavaScript is just like Java, right?” Unfortunately not—there’s no relation between the programming language Java and JavaScript, other than a little bit of syntax and an unfortunate naming choice.

JavaScript was created in the mid-90s, by Brendan Eich while working at a company called Netscape as part of the Netscape Navigator project, an early web browser. The language was standardized in June of 1997, when Ecma International released the first version of its standard, which included JavaScript as one of its implementations.

JavaScript has since then been widely considered as the language of the web. It can be run by all modern web browsers without needing any additional plugins.

It has also exploded in popularity in the past couple of years. It has been used to develop frontend frameworks to help developers create complex web applications, to develop native applications and it has even started to be used server-side, thanks to projects such as Node.js, which makes it a full-stack language. If you’d like to learn more about how that works, then our beginner’s guide to Node.js will explain all.

It’s consistently up at the top of Stack Overflow’s most-wanted languages list. What’s more, our research on JavaScript developer salaries shows that this language is a nice earner, too.

All in all, there seems to be no better time than now to learn JavaScript and I can’t encourage you enough to take a look at it. In this video Abhishek, one of our in-house developers, takes you through the first steps:

2. So what is JQuery then?

JQuery is a library, written in JavaScript, that is used to simplify frontend code that manipulates HTML.

Wow, there was quite a bit of jargon in that definition. Let’s take a minute to define some of it.

A library, like where I get books?

In programming, a library is a collection of useful code, grouped together to be reused later.

Libraries have a well-defined interface that makes it easier to perform the functions it was designed to do. They generally make it so you have to write less code to accomplish the same amount of work.

So let’s say you wanted to write a program, which at some point saves some data to your hard drive. You could write that entire program yourself, which would be quite a bit of work. Or you could use libraries someone already created, to make some parts of that program easier to code.

The code that actually writes the data on your hard drive would be quite complicated to implement, and would require you to know how to work with low level programming. But if someone already figured it out and made that code available, that would be a library you could add to your program so you don’t have to think about it.

Another example of a popular JavaScript library is React.js, which you can learn more about in our React guide.

3. Perfect, now what is frontend code?

Typical web applications can be thought of as having two parts—the backend (server-side) and the frontend. Knowing the difference between the two is essential to being a web developer.

The server-side code is code your users never see. It’s the code that is responsible for the logic of your application, the code that saves data to a database, etc.

The frontend code is your web page and everything that your user sees. It includes the HTML that gives your web page its structure, the CSS that makes that page look great, and the JavaScript, or in our case the JQuery, code that gives it functionality.

4. What does JQuery do exactly?

JQuery makes it easier for you as a developer to interact and modify your HTML and the data it contains. For example, let’s say you want to disable that button so it can’t be clicked again. You could do that with the following JQuery code:

$(“#my-button”).prop(“disabled”, true);

JQuery is used twice in there. The first being the selector, which is represented by the $. This will go through your web page and it will return an HTML element with the i.d. “my-button” if there is one. Then through the use of the .prop method, it will change that element’s properties, to include the “disabled” property with a value of true. And voilà—you can’t click your button anymore.

As you can see, the code above looks just like JavaScript, and that’s because JQuery is written in JavaScript, which makes its syntax really similar. Furthermore, it can be used in any web page that JavaScript can, as long as you include it as part of your webpage’s code.

We could also accomplish the same thing as above with normal JavaScript by writing the following code:

document.getElementById(“my-button”).disabled = true;

Though the code isn’t that much more complicated for our simple example, I would need a much more complicated explanation to explain what document refers to and why we can use the getElementById function on it.

JQuery’s $ effectively replaces JavaScript’s document.getElementById, so you don’t have to worry about it. Plus, it saves you quite a bit of typing!

Plain JavaScript examples get a lot longer when you try to implement some more complex features, such as event handling or AJAX calls. I recommend you look at JQuery’s documentation to learn more about those advanced use cases and how much work JQuery can really save you.

The JQuery Foundation also has a lot of other libraries to simplify other aspects of front-end development. Such as their JQuery UI library, which allows developers to easily create user interface elements that are commonly used in websites, such as date pickers, menus and popup boxes. These elements require a tremendous amount of work to implement in JavaScript alone.

5. Downsides to JQuery to be aware of

It’s important to note that even though it is one of the most popular JavaScript libraries used on the web today, JQuery does have its limits.

It is very useful in small or medium applications, but large codebases written exclusively with JQuery can get unwieldy, due to its lack of imposed structure.

The newly developed frontend frameworks make it easier to write large, complex frontend applications and are a good alternative to JQuery for large codebases.

6. Where should I go from here?

As you learn to code and work on building your development skills, I highly recommend dedicating quite a bit of your time towards JavaScript.

It has gained so much popularity recently and has evolved into a much more versatile and useful language, which makes it worth learning.

And I would also recommend looking through JQuery’s documentation to see if it can be applied in your next project. I recommend the JQuery UI library, it has saved me quite a bit of work in the past and it will always have a special place in my heart.

If you’re looking to read a bit more on JavaScript and similar languages, have a look at these articles:

What You Should Do Now

1. Get a hands-on introduction to web development and build your first website from scratch with our free, self-paced Web Development Short Course.
2. Take part in one of our FREE live online web development events with industry experts , and check out recent graduate Tanimara’s successful career-change story.
3. Become a qualified web developer in just 5-10 months—complete with a job guarantee.
4. This month, we’re offering reduced tuition to the first 100 applicants —worth up to $1,370 off all our career-change programs 🥳 To secure your spot, speak to one of our advisors today!

Web Development

Alexandre Ouellette has been working in the tech industry for around seven years, and right now is working as an IT Technician in Ottawa, Canada. He studied web development with CareerFoundry.

Related Web Development Articles

7 Great Coding Prompts for ChatGPT: A Beginner’s Guide

Should You Learn TypeScript? A Beginner’s Guide

A Beginner’s Guide to NYC Coding Bootcamps

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.

Источник