WEBVTT

0
00:00.510 --> 00:01.230
All right guys.

1
00:01.230 --> 00:07.530
Now in this module I want to introduce you to the most popular Javascript library and it's of course

2
00:07.760 --> 00:08.870
jQuery.

3
00:09.120 --> 00:15.090
Now there's thousands of Javascript libraries out there, and in later modules we're going to be exploring

4
00:15.090 --> 00:16.380
some of these libraries,

5
00:16.620 --> 00:23.310
but none of these libraries have been used or downloaded as often as jQuery.

6
00:23.430 --> 00:24.900
So why is that?

7
00:25.020 --> 00:27.830
Well let's take a look at some code that we've written before.

8
00:27.870 --> 00:33.690
So if we break this code down, essentially what it's doing is it's looking inside the entire document

9
00:34.050 --> 00:39.450
and it's querying for all the elements that have the selector of button,

10
00:39.450 --> 00:46.440
so all of the HTML button elements. And then we're going to add an event listener that is going to detect

11
00:46.470 --> 00:52.470
for clicks on the button. And when it does get detected then we're going to run the callback function

12
00:52.770 --> 00:58.980
to again look through the document and query for the selector of h1, and then we're going to change

13
00:58.980 --> 01:06.720
the style, namely the color of that h1 to the color red, and we're using a for loop to traverse through

14
01:06.930 --> 01:14.820
all of the buttons on our web page in order to add this event listener and this behavior to all of those

15
01:14.820 --> 01:15.330
buttons.

16
01:15.390 --> 01:17.810
So we wrote this code in our drumkit.

17
01:18.000 --> 01:23.460
And this is pure Javascript and it's actually a little bit crazy, if you really think about it, in order

18
01:23.460 --> 01:25.580
to do something relatively simple,

19
01:25.590 --> 01:29.380
why does it require so many lines of code,

20
01:29.520 --> 01:33.270
and who's going to take care of all our joint pain from all this typing?

21
01:33.270 --> 01:37.770
Now you know how sometimes you have these thoughts and you moan and complain about it a little bit and

22
01:37.770 --> 01:39.430
then you kind of get over yourself, right?

23
01:39.720 --> 01:41.030
But not this guy.

24
01:41.160 --> 01:49.190
This is John Resig, and he was really unhappy with the way that Javascript worked in web development.

25
01:49.200 --> 01:55.590
He was really frustrated by how unnecessarily complex and lengthy the code had to be.

26
01:55.590 --> 01:59.830
So whereas most of us probably had that thought and we promptly forgot about it,

27
01:59.940 --> 02:06.840
not this guy. John decided that he was going to write a library that would do exactly the same as all

28
02:06.900 --> 02:08.700
of this Javascript code,

29
02:08.700 --> 02:12.480
but it was as short and as sweet as this.

30
02:12.510 --> 02:14.580
And so jQuery was born.

31
02:14.850 --> 02:16.260
It's a library,

32
02:16.260 --> 02:23.130
so a bunch of code that somebody else wrote that you can incorporate into your own projects and use to

33
02:23.130 --> 02:27.770
improve your own projects or to make your life simply a lot easier.

34
02:27.780 --> 02:30.100
Now we've come across libraries before.

35
02:30.210 --> 02:36.660
Previously we created web sites and we incorporated the Bootstrap library in order to be able to incorporate

36
02:36.660 --> 02:44.760
code that somebody else wrote in the Bootstrap library to make our lives much easier and make it much

37
02:44.760 --> 02:48.840
quicker to improve the user interface of our Web site.

38
02:48.840 --> 02:54.510
Now what jQuery allows you to do is take a line of code, say this, where we're looking through the

39
02:54.510 --> 03:00.490
DOM of our web site, we're selecting the document and we're querying for the selector h1.

40
03:00.500 --> 03:03.280
So we're looking for the h1 element in our web page.

41
03:03.330 --> 03:09.420
Now if we were to use the jQuery library, then we can get rid of all of that and simply say 

42
03:09.690 --> 03:11.430
jQuery("h1").

43
03:11.670 --> 03:18.080
And if you want to be even shorter, the shorthand way to write jQuery is simply a dollar sign.

44
03:18.150 --> 03:28.230
So $("h1") does exactly the same as document.querySelector

45
03:28.230 --> 03:29.910
("h1").

46
03:29.940 --> 03:36.030
And you can see that it's a lot lot shorter and that will make our Javascript code a lot easier to read,

47
03:36.360 --> 03:39.540
a lot easier to debug and a lot faster to write,

48
03:39.720 --> 03:44.530
so we don't have to end up breaking our fingers by typing so much Javascript code.