Web Class: A Bite-Sized Guide to JQuery

Web Class: A Bite-Sized Guide to JQuery

You can access the full course here: Bite-Sized jQuery

Transcript 1

Hello everyone, my name is Laghu Pieris, and welcome to the jQuery course. jQuery is the most used java script library in the world because, it does operations that are very very basic.

We do things like searching for elements, changing element values and adding classes so, things that are used whenever you are performing web development work that are not included by the full in Javascript. With jQuery you can also perform rich interactions. You can perform click events, you can listen for whenever you change values in a forum, in a drop down menu.

And, we’re also going to be able to work with data. Whenever you’re working with jQuery and whenever you’re working with web development in general, you need to keep in mind something called DOM. This is D-O-M. Document Object Model. It’s kind of the base object whenever you’re working with the web.

So, we have a DOM for this image. For this text here. For this style. For this paragraph. So, there are objects everywhere in the web page and, we need to be able to know how to manipulate all of these objects. There’s some requirements to learn this course, even though something, this is going to be a very light introduction. You need to know how to work with HTML.

Something very basic, very introductory. You also need to know how to work with CSS. Javascript is essential because well, we’re going to work with Javascript to be able to communicate with jQuery. And, you also need two, at this point, two different pieces of software. You need to have Google Chrome installed and, you’re also going to need a code editor.

We’re going to use an open source one, okay, a free one to use, which is Atom. Another very important link for you to have open at all times, whenever you’re developing with jQuery, is api.jquery.com. So, now that we have gone through this introductory lesson, We’re now going to move to the next video where we’re going to set up our entire environment and work with jQuery. See you soon.

Transcript 2

The first thing we need to know right in the beginning of this project is how to use jQuery. So, I’m going to need click on this big download jQuery button. There you go, you have it. Using jQuery with a CDN. And to use CDNs, you can can go here to code.jquery.com.

If you click here on uncompressed, for example. You’re going to have instructions on how to use it. You just copy this tag and paste into your HTML file. So back to jQuery here I’m going to download the uncompressed development version. Download link file, or just download file. I’m going to copy it, okay. And now that we have this file here we need to create our project. For making projects I like to have a projects’ folder under my home folder. We have the zenva folder here. And now, I’m going to right click, choose new folder. And I’m going to name this jQueryCourse.

Inside this folder we’re going to make a few other folders. So I’m going to create a new folder. This one is going to be called js. We’re going to have CSS and I’m also going to make an assets folder. And the first step here is to go to the JavaScript folder and paste our jQuery file. Now, we’re going to Atom. Okay, assuming you already have downloaded Atom. And I’m going to create some files.

So we go to file, new file. I’m going to save this new file here in projects, zenva, jQueryCourse and I’m going to name it as index.html. But we also need a file for JavaScript and CSS. Control N, or Command N. Save it and in js this is going to be main.js. You save it here in CSS. And this is going to be named style.css. So first of all let’s add the html tags. Like this, I’m going to add the head tag, the body tag. In the head tag we’re going to include our scripts in our style sheet.

So this should be pretty simple. We add a script tag and the source on this script tag is going to be js/jquery-3.3.1.js. We’re going to add another script tag with the source, js.main.js, style sheet. The type is going to be text/CSS. And the href, well that going to be CSS/style.css. And, what we need to know now is how to work with jQuery. How can I use, how can I add dynamically the text hello world to the body? We’re going to work with this in the next video.

Transcript 3

So we’re going to do something really common and necessary in every jQuery application. First of all, we want to call jQuery, and we do this by typing either jQuery, which is quite lengthy, or typing the dollar sign, which is much cleaner.

So dollar sign, we open and close parentheses, and between parentheses I’m going to type document. So we’re going to work with the document object as a jQuery object. Okay? Then dot ready. This is going to be a function call.

We’re going to write what’s going to be the ready call back here. So, let’s open and close parentheses and add a semicolon. And here I’m going to type a function, open and close parentheses and open and close curly braces. So whenever the document is ready, this function is going to be executed.

And here I’m just going to type console.log and the message, “We are ready!” Like this. So we’re going to save this script. And here in Google Chrome, I’m going to refresh the page, and we have the message we are ready. Okay, so that’s perfect.

Since we are now ready to work, and we have this ready function, then that means our path is clear into changing the body tags and adding whatever content we want here.

Interested in continuing? Check out the full Bite-Sized jQuery course, which is part of our Bite-Sized Coding Academy.