Voiceover: Hello there, and welcome to the next section.
In this section, we'll use jQuery
to add some dynamic effects to our web page
over the next lectures.
So, what is jQuery?
jQuery is by far the most popular JavaScript library
in the world.
It is completely free and open source software,
and jQuery makes it incredibly easy to select
and manipulate HTML elements, create animations,
or even develop Ajax applications.
For example, jQuery can be used for
finding an element in a HTML document
with a certain property, like all H1 elements,
and then changing one or more of its CSS attributes
or making it respond to an event like a mouse click.
jQuery's architecture allows developers
to create plug-ins to extend jQuery's function.
There are literally thousands of jQuery plug-ins
available on the Internet for free
that we can download and include in our websites.
The links in the coursebook will help you
get started with this.
So let me start off by showing you some jQuery plug-ins
so that you can see the endless possibilities
we have with jQuery.
So the first plug-in I'm going to show you
is this Magnific Popup, and this is a responsive lightbox
and dialogue script where we can create galleries,
as you can see here,
and these are actually responsive.
Or, you can, well this is the same.
You can, for instance, open a YouTube video,
or open a Google Map,
you know, all kinds of stuff
which require a pop-up.
So even a model dialogue is possible with this.
Okay, next up, I have this one called Tooltipster,
and this allows us to create these tools tips,
which are additional information which we can see
when we hover over a certain element.
And you have probably seen those somewhere,
like all different kinds of tool tips.
And, this is kind of easy to use,
so we have the instructions down here,
and well, you can use this in your project if you want to.
And next, is a plug-in called Maplace.Js
and this helps us to embed Google Maps into our website
and to even create markers and control menu
for locations on a map.
And down here we have some examples,
simple maps, and then with markers,
and with even more advanced stuff.
So this is pretty powerful and allows us
to do all kinds of stuff with maps,
and also very easy to use.
Next we have this one.
This is, maybe not so useful but I find it kind of cool,
and it's called Typer.js,
which is a jQuery plug-in that types
and it looks just like this here.
So it deletes the text and writes on your text,
and you can use this to show multiple content
in a single line,
and I think it creates a cool effect.
And, the last one I want to show you,
is this One Page Scroll.
And what this does is, it creates multiple sections
where we can see always one section
after the other like this.
So each section fills the whole viewport hide.
And you can create some beautiful stuff with this
like presentation-style websites.
Alright, and now before we finish this lecture,
let's just include jQuery in our project
and create a new JavaScript file,
which is where we will create all our jQuery code.
Alright, so to include jQuery,
we use the Google Hosted Libraries distribution network.
And so, down here, we scroll down here, alright,
so down here, we just grab this script,
and paste it to our website, just as we did before
with those three scripts.
So basically, jQuery is also a huge JavaScript file,
which creates jQuery which we can then use
to create some powerful stuff
such as I explained to you before.
And actually, we should put it not here,
but before we close the body element.
So this is the correct, maybe not the correct,
but it's the perfect place to put the JavaScript files,
so that they are only called
after the rest of the web page is loaded.
And now, the last thing before we finish
is to create a new JavaScript file,
and I'm gonna save it and I'm gonna call it Scripts.js .
And since it's our file it goes into the Resources folder
and then JavaScript, which is empty but not anymore.
So let's now use a very basic example
just to see if jQuery actually works.
Okay, so every document where we write our jQuery code
has to start like this.
So we write document and ready,
and this ensures that this code can only run
after the document has been loaded.
And in here, we have to write this code word function,
and then open some colored braces,
and then give it some space.
And inside of this, we will put all our code.
Now just to test this,
let's pretend we want to change the background color
of the H1 element.
So in jQuery to select any element, you do it like this.
So this is the selector and now we can do this
just like in CSS, so here I'm gonna write H1,
and now we use a click method.
So a method is like a function,
so anyone who clicks that H1 element,
this is the function that will happen.
So then we want this, so we select this element,
and this keyword here now means our H1 element
because that's what we selected in the first place.
So let's use the CSS method,
and in here we can change CSS properties.
So we can write background color, for example,
and then as the second value,
and brackets actually help us here
by saying we want a string here,
so, we now say the color.
And we want it to be red,
and this is the RGB code for red, if you remember.
So a string is like a couple of characters grouped together,
such as this background color or this.
Okay, now before we can test this code,
we need of course to incorporate this JavaScript file
in the index HTML file.
So down here, where we called
the other JavaScript files, right?
So now we add a new script here, and in this case,
it is on our computer and it is the one we just created.
So it's in the Resources folder and descript JS.
And I close it and now this should work.
And now, we can click this and the background turns red,
such as we said in our jQuery code.
So let's quickly review this,
so we select the H1 element
and then we use the click method,
so when we click on the H1 element and select this,
so the H1 element we selected in the first place,
and then it changes the CSS style of that element.
And, in this case, we add a background color
and make it red, and that's exactly what happened.
Alright, so we don't need this anymore actually,
this was just to show you that everything works.
And now, in the next couple of lectures,
we're gonna add some real-world jQuery code
to make our website even better.
So, see you in the next lecture!