Voiceover: Hello there, and welcome to the next section. 2 2
In this section, we'll use jQuery 3 3
to add some dynamic effects to our web page 4 4
over the next lectures. 5 5
So, what is jQuery? 6 6
jQuery is by far the most popular JavaScript library 7 7
in the world. 8 8
It is completely free and open source software, 9 9
and jQuery makes it incredibly easy to select 10 10
and manipulate HTML elements, create animations, 11 11
or even develop Ajax applications. 12 12
For example, jQuery can be used for 13 13
finding an element in a HTML document 14 14
with a certain property, like all H1 elements, 15 15
and then changing one or more of its CSS attributes 16 16
or making it respond to an event like a mouse click. 17 17
jQuery's architecture allows developers 18 18
to create plug-ins to extend jQuery's function. 19 19
There are literally thousands of jQuery plug-ins 20 20
available on the Internet for free 21 21
that we can download and include in our websites. 22 22
The links in the coursebook will help you 23 23
get started with this. 24 24
So let me start off by showing you some jQuery plug-ins 25 25
so that you can see the endless possibilities 26 26
we have with jQuery. 27 27
So the first plug-in I'm going to show you 28 28
is this Magnific Popup, and this is a responsive lightbox 29 29
and dialogue script where we can create galleries, 30 30
as you can see here, 31 31
and these are actually responsive. 32 32
Or, you can, well this is the same. 33 33
You can, for instance, open a YouTube video, 34 34
or open a Google Map, 35 35
you know, all kinds of stuff 36 36
which require a pop-up. 37 37
So even a model dialogue is possible with this. 38 38
Okay, next up, I have this one called Tooltipster, 39 39
and this allows us to create these tools tips, 40 40
which are additional information which we can see 41 41
when we hover over a certain element. 42 42
And you have probably seen those somewhere, 43 43
like all different kinds of tool tips. 44 44
And, this is kind of easy to use, 45 45
so we have the instructions down here, 46 46
and well, you can use this in your project if you want to. 47 47
And next, is a plug-in called Maplace.Js 48 48
and this helps us to embed Google Maps into our website 49 49
and to even create markers and control menu 50 50
for locations on a map. 51 51
And down here we have some examples, 52 52
simple maps, and then with markers, 53 53
and with even more advanced stuff. 54 54
So this is pretty powerful and allows us 55 55
to do all kinds of stuff with maps, 56 56
and also very easy to use. 57 57
Next we have this one. 58 58
This is, maybe not so useful but I find it kind of cool, 59 59
and it's called Typer.js, 60 60
which is a jQuery plug-in that types 61 61
and it looks just like this here. 62 62
So it deletes the text and writes on your text, 63 63
and you can use this to show multiple content 64 64
in a single line, 65 65
and I think it creates a cool effect. 66 66
And, the last one I want to show you, 67 67
is this One Page Scroll. 68 68
And what this does is, it creates multiple sections 69 69
where we can see always one section 70 70
after the other like this. 71 71
So each section fills the whole viewport hide. 72 72
And you can create some beautiful stuff with this 73 73
like presentation-style websites. 74 74
Alright, and now before we finish this lecture, 75 75
let's just include jQuery in our project 76 76
and create a new JavaScript file, 77 77
which is where we will create all our jQuery code. 78 78
Alright, so to include jQuery, 79 79
we use the Google Hosted Libraries distribution network. 80 80
And so, down here, we scroll down here, alright, 81 81
so down here, we just grab this script, 82 82
and paste it to our website, just as we did before 83 83
with those three scripts. 84 84
So basically, jQuery is also a huge JavaScript file, 85 85
which creates jQuery which we can then use 86 86
to create some powerful stuff 87 87
such as I explained to you before. 88 88
And actually, we should put it not here, 89 89
but before we close the body element. 90 90
So this is the correct, maybe not the correct, 91 91
but it's the perfect place to put the JavaScript files, 92 92
so that they are only called 93 93
after the rest of the web page is loaded. 94 94
And now, the last thing before we finish 95 95
is to create a new JavaScript file, 96 96
and I'm gonna save it and I'm gonna call it Scripts.js . 97 97
And since it's our file it goes into the Resources folder 98 98
and then JavaScript, which is empty but not anymore. 99 99
So let's now use a very basic example 100 100
just to see if jQuery actually works. 101 101
Okay, so every document where we write our jQuery code 102 102
has to start like this. 103 103
So we write document and ready, 104 104
and this ensures that this code can only run 105 105
after the document has been loaded. 106 106
And in here, we have to write this code word function, 107 107
and then open some colored braces, 108 108
and then give it some space. 109 109
And inside of this, we will put all our code. 110 110
Now just to test this, 111 111
let's pretend we want to change the background color 112 112
of the H1 element. 113 113
So in jQuery to select any element, you do it like this. 114 114
So this is the selector and now we can do this 115 115
just like in CSS, so here I'm gonna write H1, 116 116
and now we use a click method. 117 117
So a method is like a function, 118 118
so anyone who clicks that H1 element, 119 119
this is the function that will happen. 120 120
So then we want this, so we select this element, 121 121
and this keyword here now means our H1 element 122 122
because that's what we selected in the first place. 123 123
So let's use the CSS method, 124 124
and in here we can change CSS properties. 125 125
So we can write background color, for example, 126 126
and then as the second value, 127 127
and brackets actually help us here 128 128
by saying we want a string here, 129 129
so, we now say the color. 130 130
And we want it to be red, 131 131
and this is the RGB code for red, if you remember. 132 132
So a string is like a couple of characters grouped together, 133 133
such as this background color or this. 134 134
Okay, now before we can test this code, 135 135
we need of course to incorporate this JavaScript file 136 136
in the index HTML file. 137 137
So down here, where we called 138 138
the other JavaScript files, right? 139 139
So now we add a new script here, and in this case, 140 140
it is on our computer and it is the one we just created. 141 141
So it's in the Resources folder and descript JS. 142 142
And I close it and now this should work. 143 143
And now, we can click this and the background turns red, 144 144
such as we said in our jQuery code. 145 145
So let's quickly review this, 146 146
so we select the H1 element 147 147
and then we use the click method, 148 148
so when we click on the H1 element and select this, 149 149
so the H1 element we selected in the first place, 150 150
and then it changes the CSS style of that element. 151 151
And, in this case, we add a background color 152 152
and make it red, and that's exactly what happened. 153 153
Alright, so we don't need this anymore actually, 154 154
this was just to show you that everything works. 155 155
And now, in the next couple of lectures, 156 156
we're gonna add some real-world jQuery code 157 157
to make our website even better. 158 158
So, see you in the next lecture!