1 00:00:01,301 --> 00:00:05,114 Hello there, and welcome to the next section. 2 00:00:05,114 --> 00:00:07,371 In this section, we'll use jQuery 3 00:00:07,371 --> 00:00:09,795 to add some dynamic effects to our web page 4 00:00:09,795 --> 00:00:11,712 over the next lectures. 5 00:00:12,971 --> 00:00:14,554 So, what is jQuery? 6 00:00:15,897 --> 00:00:19,101 jQuery is by far the most popular JavaScript library 7 00:00:19,101 --> 00:00:20,184 in the world. 8 00:00:21,275 --> 00:00:25,825 It is completely free and open source software, 9 00:00:25,825 --> 00:00:28,890 and jQuery makes it incredibly easy to select 10 00:00:28,890 --> 00:00:33,042 and manipulate HTML elements, create animations, 11 00:00:33,042 --> 00:00:35,875 or even develop Ajax applications. 12 00:00:37,110 --> 00:00:39,506 For example, jQuery can be used for 13 00:00:39,506 --> 00:00:42,488 finding an element in a HTML document 14 00:00:42,488 --> 00:00:46,472 with a certain property, like all H1 elements, 15 00:00:46,472 --> 00:00:50,373 and then changing one or more of its CSS attributes 16 00:00:50,373 --> 00:00:54,540 or making it respond to an event like a mouse click. 17 00:00:56,475 --> 00:00:59,039 jQuery's architecture allows developers 18 00:00:59,039 --> 00:01:03,423 to create plug-ins to extend jQuery's function. 19 00:01:03,423 --> 00:01:06,572 There are literally thousands of jQuery plug-ins 20 00:01:06,572 --> 00:01:08,773 available on the Internet for free 21 00:01:08,773 --> 00:01:12,730 that we can download and include in our websites. 22 00:01:12,730 --> 00:01:14,680 The links in the coursebook will help you 23 00:01:14,680 --> 00:01:16,513 get started with this. 24 00:01:17,578 --> 00:01:21,173 So let me start off by showing you some jQuery plug-ins 25 00:01:21,173 --> 00:01:23,736 so that you can see the endless possibilities 26 00:01:23,736 --> 00:01:25,403 we have with jQuery. 27 00:01:27,387 --> 00:01:29,476 So the first plug-in I'm going to show you 28 00:01:29,476 --> 00:01:33,600 is this Magnific Popup, and this is a responsive lightbox 29 00:01:33,600 --> 00:01:37,767 and dialogue script where we can create galleries, 30 00:01:40,149 --> 00:01:41,816 as you can see here, 31 00:01:43,982 --> 00:01:46,808 and these are actually responsive. 32 00:01:46,808 --> 00:01:49,725 Or, you can, well this is the same. 33 00:01:52,994 --> 00:01:57,453 You can, for instance, open a YouTube video, 34 00:01:57,453 --> 00:01:59,203 or open a Google Map, 35 00:02:01,194 --> 00:02:03,527 you know, all kinds of stuff 36 00:02:04,750 --> 00:02:06,667 which require a pop-up. 37 00:02:08,940 --> 00:02:12,857 So even a model dialogue is possible with this. 38 00:02:15,461 --> 00:02:19,529 Okay, next up, I have this one called Tooltipster, 39 00:02:19,529 --> 00:02:22,928 and this allows us to create these tools tips, 40 00:02:22,928 --> 00:02:26,272 which are additional information which we can see 41 00:02:26,272 --> 00:02:28,475 when we hover over a certain element. 42 00:02:28,475 --> 00:02:32,794 And you have probably seen those somewhere, 43 00:02:32,794 --> 00:02:35,961 like all different kinds of tool tips. 44 00:02:39,231 --> 00:02:41,981 And, this is kind of easy to use, 45 00:02:42,937 --> 00:02:45,974 so we have the instructions down here, 46 00:02:45,974 --> 00:02:50,906 and well, you can use this in your project if you want to. 47 00:02:50,906 --> 00:02:54,667 And next, is a plug-in called Maplace.Js 48 00:02:54,667 --> 00:02:58,317 and this helps us to embed Google Maps into our website 49 00:02:58,317 --> 00:03:02,330 and to even create markers and control menu 50 00:03:02,330 --> 00:03:04,689 for locations on a map. 51 00:03:04,689 --> 00:03:06,640 And down here we have some examples, 52 00:03:06,640 --> 00:03:09,566 simple maps, and then with markers, 53 00:03:09,566 --> 00:03:12,805 and with even more advanced stuff. 54 00:03:12,805 --> 00:03:14,685 So this is pretty powerful and allows us 55 00:03:14,685 --> 00:03:17,298 to do all kinds of stuff with maps, 56 00:03:17,298 --> 00:03:19,465 and also very easy to use. 57 00:03:21,268 --> 00:03:22,801 Next we have this one. 58 00:03:22,801 --> 00:03:27,364 This is, maybe not so useful but I find it kind of cool, 59 00:03:27,364 --> 00:03:29,628 and it's called Typer.js, 60 00:03:29,628 --> 00:03:32,623 which is a jQuery plug-in that types 61 00:03:32,623 --> 00:03:35,444 and it looks just like this here. 62 00:03:35,444 --> 00:03:39,388 So it deletes the text and writes on your text, 63 00:03:39,388 --> 00:03:42,906 and you can use this to show multiple content 64 00:03:42,906 --> 00:03:44,323 in a single line, 65 00:03:46,460 --> 00:03:49,648 and I think it creates a cool effect. 66 00:03:49,648 --> 00:03:51,911 And, the last one I want to show you, 67 00:03:51,911 --> 00:03:54,350 is this One Page Scroll. 68 00:03:54,350 --> 00:03:58,912 And what this does is, it creates multiple sections 69 00:03:58,912 --> 00:04:01,803 where we can see always one section 70 00:04:01,803 --> 00:04:03,970 after the other like this. 71 00:04:05,077 --> 00:04:08,910 So each section fills the whole viewport hide. 72 00:04:10,546 --> 00:04:13,193 And you can create some beautiful stuff with this 73 00:04:13,193 --> 00:04:15,943 like presentation-style websites. 74 00:04:18,382 --> 00:04:22,318 Alright, and now before we finish this lecture, 75 00:04:22,318 --> 00:04:25,766 let's just include jQuery in our project 76 00:04:25,766 --> 00:04:28,065 and create a new JavaScript file, 77 00:04:28,065 --> 00:04:32,232 which is where we will create all our jQuery code. 78 00:04:33,847 --> 00:04:36,424 Alright, so to include jQuery, 79 00:04:36,424 --> 00:04:41,370 we use the Google Hosted Libraries distribution network. 80 00:04:41,370 --> 00:04:45,890 And so, down here, we scroll down here, alright, 81 00:04:45,890 --> 00:04:49,242 so down here, we just grab this script, 82 00:04:49,242 --> 00:04:53,898 and paste it to our website, just as we did before 83 00:04:53,898 --> 00:04:55,981 with those three scripts. 84 00:04:57,984 --> 00:05:02,151 So basically, jQuery is also a huge JavaScript file, 85 00:05:04,462 --> 00:05:08,363 which creates jQuery which we can then use 86 00:05:08,363 --> 00:05:11,428 to create some powerful stuff 87 00:05:11,428 --> 00:05:14,261 such as I explained to you before. 88 00:05:15,190 --> 00:05:18,523 And actually, we should put it not here, 89 00:05:20,237 --> 00:05:23,320 but before we close the body element. 90 00:05:25,360 --> 00:05:28,634 So this is the correct, maybe not the correct, 91 00:05:28,634 --> 00:05:33,510 but it's the perfect place to put the JavaScript files, 92 00:05:33,510 --> 00:05:35,148 so that they are only called 93 00:05:35,148 --> 00:05:38,565 after the rest of the web page is loaded. 94 00:05:39,850 --> 00:05:42,740 And now, the last thing before we finish 95 00:05:42,740 --> 00:05:45,657 is to create a new JavaScript file, 96 00:05:46,885 --> 00:05:51,052 and I'm gonna save it and I'm gonna call it Scripts.js . 97 00:05:56,847 --> 00:05:59,737 And since it's our file it goes into the Resources folder 98 00:05:59,737 --> 00:06:03,904 and then JavaScript, which is empty but not anymore. 99 00:06:06,529 --> 00:06:08,828 So let's now use a very basic example 100 00:06:08,828 --> 00:06:12,729 just to see if jQuery actually works. 101 00:06:12,729 --> 00:06:17,396 Okay, so every document where we write our jQuery code 102 00:06:17,396 --> 00:06:19,313 has to start like this. 103 00:06:21,088 --> 00:06:24,362 So we write document and ready, 104 00:06:24,362 --> 00:06:27,079 and this ensures that this code can only run 105 00:06:27,079 --> 00:06:30,771 after the document has been loaded. 106 00:06:30,771 --> 00:06:35,368 And in here, we have to write this code word function, 107 00:06:35,368 --> 00:06:38,201 and then open some colored braces, 108 00:06:39,374 --> 00:06:41,847 and then give it some space. 109 00:06:41,847 --> 00:06:45,504 And inside of this, we will put all our code. 110 00:06:45,504 --> 00:06:47,002 Now just to test this, 111 00:06:47,002 --> 00:06:50,485 let's pretend we want to change the background color 112 00:06:50,485 --> 00:06:51,985 of the H1 element. 113 00:06:53,828 --> 00:06:58,739 So in jQuery to select any element, you do it like this. 114 00:06:58,739 --> 00:07:01,700 So this is the selector and now we can do this 115 00:07:01,700 --> 00:07:05,450 just like in CSS, so here I'm gonna write H1, 116 00:07:07,412 --> 00:07:09,920 and now we use a click method. 117 00:07:09,920 --> 00:07:12,462 So a method is like a function, 118 00:07:12,462 --> 00:07:15,249 so anyone who clicks that H1 element, 119 00:07:15,249 --> 00:07:18,416 this is the function that will happen. 120 00:07:20,682 --> 00:07:24,682 So then we want this, so we select this element, 121 00:07:26,464 --> 00:07:30,400 and this keyword here now means our H1 element 122 00:07:30,400 --> 00:07:34,567 because that's what we selected in the first place. 123 00:07:35,450 --> 00:07:37,644 So let's use the CSS method, 124 00:07:37,644 --> 00:07:41,061 and in here we can change CSS properties. 125 00:07:42,103 --> 00:07:45,936 So we can write background color, for example, 126 00:07:47,223 --> 00:07:50,427 and then as the second value, 127 00:07:50,427 --> 00:07:52,830 and brackets actually help us here 128 00:07:52,830 --> 00:07:55,025 by saying we want a string here, 129 00:07:55,025 --> 00:07:57,108 so, we now say the color. 130 00:07:59,692 --> 00:08:02,443 And we want it to be red, 131 00:08:02,443 --> 00:08:06,100 and this is the RGB code for red, if you remember. 132 00:08:06,100 --> 00:08:09,827 So a string is like a couple of characters grouped together, 133 00:08:09,827 --> 00:08:12,994 such as this background color or this. 134 00:08:14,494 --> 00:08:18,326 Okay, now before we can test this code, 135 00:08:18,326 --> 00:08:23,306 we need of course to incorporate this JavaScript file 136 00:08:23,306 --> 00:08:25,223 in the index HTML file. 137 00:08:27,242 --> 00:08:29,994 So down here, where we called 138 00:08:29,994 --> 00:08:32,954 the other JavaScript files, right? 139 00:08:32,954 --> 00:08:37,099 So now we add a new script here, and in this case, 140 00:08:37,099 --> 00:08:41,209 it is on our computer and it is the one we just created. 141 00:08:41,209 --> 00:08:45,209 So it's in the Resources folder and descript JS. 142 00:08:47,200 --> 00:08:50,533 And I close it and now this should work. 143 00:08:52,459 --> 00:08:56,395 And now, we can click this and the background turns red, 144 00:08:56,395 --> 00:08:59,312 such as we said in our jQuery code. 145 00:09:00,574 --> 00:09:02,420 So let's quickly review this, 146 00:09:02,420 --> 00:09:04,670 so we select the H1 element 147 00:09:06,461 --> 00:09:09,108 and then we use the click method, 148 00:09:09,108 --> 00:09:13,531 so when we click on the H1 element and select this, 149 00:09:13,531 --> 00:09:16,805 so the H1 element we selected in the first place, 150 00:09:16,805 --> 00:09:21,472 and then it changes the CSS style of that element. 151 00:09:21,472 --> 00:09:24,154 And, in this case, we add a background color 152 00:09:24,154 --> 00:09:28,321 and make it red, and that's exactly what happened. 153 00:09:29,483 --> 00:09:31,782 Alright, so we don't need this anymore actually, 154 00:09:31,782 --> 00:09:34,534 this was just to show you that everything works. 155 00:09:34,534 --> 00:09:36,484 And now, in the next couple of lectures, 156 00:09:36,484 --> 00:09:39,584 we're gonna add some real-world jQuery code 157 00:09:39,584 --> 00:09:42,251 to make our website even better. 158 00:09:43,415 --> 00:09:46,082 So, see you in the next lecture!