1
00:00:00,000 --> 00:00:02,690
[Seminar: JQUERY]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvard University]

3
00:00:04,790 --> 00:00:08,000
[This is CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
If you're following along at home, you can actually access my slides online

5
00:00:10,640 --> 00:00:13,310
by going to this link. 

6
00:00:13,310 --> 00:00:18,650
It's TjjRWj, on bit.ly. 

7
00:00:18,650 --> 00:00:20,700
You can also just go to the URL directly, 

8
00:00:20,700 --> 00:00:27,300
which is cloud.cs50.net/~vshekhawat, which is my name, 

9
00:00:27,300 --> 00:00:32,409
and jquery. 

10
00:00:32,409 --> 00:00:34,920
I highly encourage you to follow along if you're watching at home, 

11
00:00:34,920 --> 00:00:40,650
and if you're here, also, because this is a pretty interactive presentation. 

12
00:00:40,650 --> 00:00:43,160
>> So today I'm going to be talking about jQuery, and the first question is, 

13
00:00:43,160 --> 00:00:45,300
what is jQuery?

14
00:00:45,300 --> 00:00:47,090
This year, I know you guys haven't covered JavaScript

15
00:00:47,090 --> 00:00:51,080
in as much detail as we have in past years. 

16
00:00:51,080 --> 00:00:53,150
JavaScript is, first of all, just a client-side language

17
00:00:53,150 --> 00:00:58,390
that you use to run scripts and code on each user's machine. 

18
00:00:58,390 --> 00:01:00,660
So you have a server that provides web pages to people, 

19
00:01:00,660 --> 00:01:02,600
but you might want to do stuff on their machine, 

20
00:01:02,600 --> 00:01:08,060
ask their machine to send requests to your server every 30 seconds or something like that. 

21
00:01:08,060 --> 00:01:10,420
You can do that using JavaScript. 

22
00:01:10,420 --> 00:01:13,190
JQuery just provides more functionality on top of JavaScript

23
00:01:13,190 --> 00:01:15,680
that does extra stuff for you. 

24
00:01:15,680 --> 00:01:17,710
If you look at the contents on top, 

25
00:01:17,710 --> 00:01:21,410
that describes some of the stuff that you're able to do. 

26
00:01:21,410 --> 00:01:23,500
So overall, it was created in January 2006. 

27
00:01:23,500 --> 00:01:26,560
It was first conceived of in August 2005. 

28
00:01:26,560 --> 00:01:31,370
It's been around for a couple years, and it's really part of the new Web 2.0 movement

29
00:01:31,370 --> 00:01:34,330
that's made the Internet so shiny. 

30
00:01:34,330 --> 00:01:37,630
It's the most widely used JavaScript library. 

31
00:01:37,630 --> 00:01:41,450
Over 19.6 million websites are using it, and the usage is still increasing

32
00:01:41,450 --> 00:01:45,640
according to builtwith.com, which, apparently, over the last year, 

33
00:01:45,640 --> 00:01:49,710
has just been continuously increasing fairly linearly. 

34
00:01:49,710 --> 00:01:52,870
Among the top 10 million sites, there's still--

35
00:01:52,870 --> 00:01:55,180
around 40% of them are currently using it. 

36
00:01:55,180 --> 00:01:58,540
Facebook uses it, lots of other websites currently use it. 

37
00:01:58,540 --> 00:02:01,540
You can look at those statistics on your own, if you'd like. 

38
00:02:01,540 --> 00:02:05,820
And you could tell it's legit because it has a foundation and 13 board members, 

39
00:02:05,820 --> 00:02:11,910
along with a team of 20 people who work on it on a regular basis. 

40
00:02:11,910 --> 00:02:16,110
So it's very widely used, it has a .org URL, it's fancy,

41
00:02:16,110 --> 00:02:21,660
it has spin-offs for other stuff, so it's a big deal. 

42
00:02:21,660 --> 00:02:24,510
>> Why should you use it? JQuery is very lightweight. 

43
00:02:24,510 --> 00:02:27,270
That means it's not a huge file. You can download

44
00:02:27,270 --> 00:02:31,540
the minified file, which is without all the white space and comments, and it's only 32 kB.

45
00:02:31,540 --> 00:02:33,600
So it's easy to just toss onto your web page

46
00:02:33,600 --> 00:02:35,910
and just to start using it. 

47
00:02:35,910 --> 00:02:39,630
It's also very efficiently written, so it doesn't take up a lot of--

48
00:02:39,630 --> 00:02:42,550
it doesn't slow down your website much when you use it. 

49
00:02:42,550 --> 00:02:45,770
It lets you implement things that were previously unfeasible. 

50
00:02:45,770 --> 00:02:47,790
There are some aspects of functionality,

51
00:02:47,790 --> 00:02:51,780
like creating animations, that normally would be very, very difficult to do. 

52
00:02:51,780 --> 00:02:54,300
But in jQuery they're actually very simple. 

53
00:02:54,300 --> 00:02:57,040
And there are some things that are annoying to do, 

54
00:02:57,040 --> 00:02:59,610
possible in JavaScript, like sending a POST request, 

55
00:02:59,610 --> 00:03:02,190
but to send a request to a server, you have to write

56
00:03:02,190 --> 00:03:04,320
five or six or seven lines of code. 

57
00:03:04,320 --> 00:03:07,200
Now you can just do it in a single line of code, in a single function call.

58
00:03:07,200 --> 00:03:11,790
That really simplifies a lot of the stuff that you're doing. 

59
00:03:11,790 --> 00:03:15,950
And all the cool kids are using it. By that, I mean me. 

60
00:03:15,950 --> 00:03:19,270
In my final project last year, which is news.whrb.org, 

61
00:03:19,270 --> 00:03:22,530
which is for the radio station, I created this blog

62
00:03:22,530 --> 00:03:29,750
which hosts all the shows that we've done and the MP3 files for them. 

63
00:03:29,750 --> 00:03:32,070
You can browse through the past shows, 

64
00:03:32,070 --> 00:03:34,130
and it's all done using jQuery. You can tell 

65
00:03:34,130 --> 00:03:37,340
because of all these animations, essentially. 

66
00:03:37,340 --> 00:03:42,360
So if you have--if you're creating a new post, 

67
00:03:42,360 --> 00:03:45,980
you see these little slideDowns; that's all done using jQuery.

68
00:03:45,980 --> 00:03:49,140
And this fade--so that kind of stuff is all done using jQuery, 

69
00:03:49,140 --> 00:03:52,720
and you don't have to constantly reload the page to navigate the site. 

70
00:03:52,720 --> 00:03:57,220
Another cool thing that's made using jQuery is this presentation. 

71
00:03:57,220 --> 00:03:59,700
I'm using this open source thing called scrolldeck, 

72
00:03:59,700 --> 00:04:03,250
which someone wrote on top of jQuery. 

73
00:04:03,250 --> 00:04:04,870
If you actually look at the source, you can see that 

74
00:04:04,870 --> 00:04:07,830
they're using this dollar sign; dollar signs

75
00:04:07,830 --> 00:04:12,110
are used in jQuery to signify that a function is a jQuery function. 

76
00:04:12,110 --> 00:04:15,020
So they're defining a wrapper on top of jQuery 

77
00:04:15,020 --> 00:04:18,570
that allows you to make a presentation like this, 

78
00:04:18,570 --> 00:04:21,200
and you can see that here they're including the original jQuery file, 

79
00:04:21,200 --> 00:04:24,120
which is what you'll have to include if want to use jQuery

80
00:04:24,120 --> 00:04:30,450
in your own websites. 

81
00:04:30,450 --> 00:04:32,790
>> Touching on that, how do you install it? 

82
00:04:32,790 --> 00:04:36,150
You can just go to jQuery.com and download the file, 

83
00:04:36,150 --> 00:04:38,320
add it to a web directory and include it.

84
00:04:38,320 --> 00:04:42,200
So just on top, in the head tag of your HTML file

85
00:04:42,200 --> 00:04:45,400
of your main HTML file, just have that line of code

86
00:04:45,400 --> 00:04:49,490
with the correct version for which version of jQuery you're using. 

87
00:04:49,490 --> 00:04:51,340
You can download it by going to jQuery.com, 

88
00:04:51,340 --> 00:04:55,130
click "download jQuery," and you've got it. That's it. 

89
00:04:55,130 --> 00:04:58,880
And actually, we can take a look at what it looks like. 

90
00:04:58,880 --> 00:05:01,080
If you click on download here, jQuery is this. 

91
00:05:01,080 --> 00:05:05,260
It's just one big JavaScript file that does all the magic stuff for you. 

92
00:05:05,260 --> 00:05:09,270
This is the minified version, which is not readable at all. 

93
00:05:09,270 --> 00:05:13,180
You can also look at the development version, which is readable 

94
00:05:13,180 --> 00:05:15,370
but still very, very lengthy. 

95
00:05:15,370 --> 00:05:17,980
It's a lot of stuff in there. 

96
00:05:17,980 --> 00:05:20,240
You can also link to Google's hosted version of it. 

97
00:05:20,240 --> 00:05:23,820
So that'll allow you to just rely on Google to provide it. 

98
00:05:23,820 --> 00:05:29,310
They provide every version of it, available at all times. 

99
00:05:29,310 --> 00:05:31,530
So you can probably rely on Google to host it for you. 

100
00:05:31,530 --> 00:05:33,270
Or you can link to jQuery's own latest version. 

101
00:05:33,270 --> 00:05:36,400
They have a URL that's always updated to the latest version. 

102
00:05:36,400 --> 00:05:40,850
It's jQuery-latest, and there's one problem with that, 

103
00:05:40,850 --> 00:05:44,350
which is that if the updated jQuery and some of the previous functionality

104
00:05:44,350 --> 00:05:47,250
they had becomes retrograded or deprecated, 

105
00:05:47,250 --> 00:05:49,620
it may not--it may start to not get supported anymore. 

106
00:05:49,620 --> 00:05:52,940
So if you write a website using version 1.8.2, 

107
00:05:52,940 --> 00:05:55,000
by the time version 2.7 comes out

108
00:05:55,000 --> 00:05:57,000
some of the functions you wrote don't work anymore. 

109
00:05:57,000 --> 00:05:59,930
So it's better to just download the 32 kB file, 

110
00:05:59,930 --> 00:06:04,100
put it on your web page, and it'll work forever. 

111
00:06:04,100 --> 00:06:07,450
>> I'm going to go ahead and start talking about the actual functionality of jQuery. 

112
00:06:07,450 --> 00:06:13,090
The first thing is selectors. This is what jQuery was initially conceived to provide. 

113
00:06:13,090 --> 00:06:15,500
And you can click on documentation to look at 

114
00:06:15,500 --> 00:06:18,690
the detailed documentation for the selectors I'm going to be covering. 

115
00:06:18,690 --> 00:06:24,120
The idea behind selectors is that you can select HTML elements on a page. 

116
00:06:24,120 --> 00:06:28,790
Elements on a page have IDs and classes and other identifying aspects to them. 

117
00:06:28,790 --> 00:06:30,500
There's also--they're in different orders. 

118
00:06:30,500 --> 00:06:32,570
Some of the time they're nested inside each other. 

119
00:06:32,570 --> 00:06:38,120
JQuery allows you to construct simple queries that retrieve elements from the page. 

120
00:06:38,120 --> 00:06:41,890
Then you can manipulate these elements using jQuery functions, 

121
00:06:41,890 --> 00:06:43,990
which is the manipulation section we'll get to later. 

122
00:06:43,990 --> 00:06:46,040
You can change the HTML, change the CSS, 

123
00:06:46,040 --> 00:06:50,500
you can also animate and add functions that activate on certain events. 

124
00:06:50,500 --> 00:06:52,710
So, for example, if something's clicked, you want something to happen, 

125
00:06:52,710 --> 00:06:55,210
you can do that using jQuery as well. 

126
00:06:55,210 --> 00:06:57,380
And there are a huge number of ways to select elements. 

127
00:06:57,380 --> 00:07:00,310
Most of them I've never used, but there are the basic ones, 

128
00:07:00,310 --> 00:07:02,340
which are pretty important. 

129
00:07:02,340 --> 00:07:05,750
The element selector, for example, if you're just selecting anything 

130
00:07:05,750 --> 00:07:10,640
that is a div--I actually have the code open for this slide presentation. 

131
00:07:10,640 --> 00:07:13,450
So, for example, here's the first slide. 

132
00:07:13,450 --> 00:07:17,430
Here we have a div. If we actually select all the divs on the page, 

133
00:07:17,430 --> 00:07:22,300
it'll just give us an array of all the divs that exist in this file. 

134
00:07:22,300 --> 00:07:27,040
The ID selector lets you select anything with a given ID. 

135
00:07:27,040 --> 00:07:32,230
So if this, for example, this thing has the ID "what,"

136
00:07:32,230 --> 00:07:37,160
and if we did this with #what instead of some ID, 

137
00:07:37,160 --> 00:07:42,920
it would just return an array that has a single element and that is that element of the page. 

138
00:07:42,920 --> 00:07:45,490
We can also combine selectors this way by having

139
00:07:45,490 --> 00:07:48,260
only select things with IDs that are divs. 

140
00:07:48,260 --> 00:07:51,810
So yeah. Only select divs that have that ID. 

141
00:07:51,810 --> 00:07:55,260
For class you just use a dot, it's the same thing as CSS. 

142
00:07:55,260 --> 00:07:57,500
Descendant also works; so if you have some class

143
00:07:57,500 --> 00:08:00,170
and it has nested elements within it--so, for example, 

144
00:08:00,170 --> 00:08:03,260
there is some class and it has an anchor tag to link to another page, 

145
00:08:03,260 --> 00:08:08,510
you can use this syntax to retrieve the link. 

146
00:08:08,510 --> 00:08:12,420
You can also select multiple things at once; just separate them by commas, 

147
00:08:12,420 --> 00:08:17,360
use any selector you'd like, and you will select all of them at once, in a single array.

148
00:08:17,360 --> 00:08:19,650
And then there's also the not selector, so you can select all divs

149
00:08:19,650 --> 00:08:24,210
that do not have some specific class. 

150
00:08:24,210 --> 00:08:28,790
And that's just a helpful way to get an introduction to how this selection works. 

151
00:08:28,790 --> 00:08:32,270
I'll show some concrete examples in a second. 

152
00:08:32,270 --> 00:08:35,480
>> Advanced selectors are--these are just a few examples. 

153
00:08:35,480 --> 00:08:38,840
There are dozens of these, but if you want to select all the image tags

154
00:08:38,840 --> 00:08:42,799
within some element, then you just do :image. 

155
00:08:42,799 --> 00:08:45,340
If you want to select the even elements, for example, if there are 20 of them, 

156
00:08:45,340 --> 00:08:48,290
you want to select 0, 2, 4, 6 and so on, 

157
00:08:48,290 --> 00:08:51,630
you do :even, or you can also do :odd. 

158
00:08:51,630 --> 00:08:55,470
These are pseudo selectors, which means that they actually compute 

159
00:08:55,470 --> 00:09:00,960
every other element rather than just going and selecting all of them. 

160
00:09:00,960 --> 00:09:05,510
You can also--each element can also have specific attributes. 

161
00:09:05,510 --> 00:09:10,580
So, for example, class = center is also an attribute.

162
00:09:10,580 --> 00:09:16,500
For this anchor tag, href, hypertext reference, is an attribute also. 

163
00:09:16,500 --> 00:09:21,150
So you can select something that links to a specific page or just--it's really general. 

164
00:09:21,150 --> 00:09:25,410
You can select anything with any attribute that you'd like.

165
00:09:25,410 --> 00:09:27,470
And then, also, attribute contains. 

166
00:09:27,470 --> 00:09:30,420
If you, for example, wanted to select all the input elements

167
00:09:30,420 --> 00:09:32,700
that have the word "pass" as the name of them,  

168
00:09:32,700 --> 00:09:37,560
if a page has an input text block 

169
00:09:37,560 --> 00:09:41,050
that's called "password," that'd be one way you could select that. 

170
00:09:41,050 --> 00:09:43,020
And there are many more. You can go ahead and look at the documentation 

171
00:09:43,020 --> 00:09:46,950
and see specific examples of how it works. 

172
00:09:46,950 --> 00:09:48,840
>> The next thing is DOM manipulation. 

173
00:09:48,840 --> 00:09:52,500
After we select elements, we will want to actually do stuff with them. 

174
00:09:52,500 --> 00:09:55,500
So far we haven't looked at that at all, but if you look at the documentation, 

175
00:09:55,500 --> 00:09:57,950
there's really a lot that we could do. 

176
00:09:57,950 --> 00:10:02,900
At this point, we're going to select elements on this presentation 

177
00:10:02,900 --> 00:10:04,890
and manipulate them using jQuery. 

178
00:10:04,890 --> 00:10:08,290
Because this is implemented using jQuery, we have access to the jQuery library, 

179
00:10:08,290 --> 00:10:13,580
and we can use those functions within this code. 

180
00:10:13,580 --> 00:10:16,200
One useful thing that you may not know about is the console.

181
00:10:16,200 --> 00:10:19,340
And Google Chrome is what I'm using. You can press alt command J

182
00:10:19,340 --> 00:10:21,720
or alt control J to open the console. 

183
00:10:21,720 --> 00:10:26,130
In Firefox I think it's command shift K or control shift K. 

184
00:10:26,130 --> 00:10:28,880
In Safari you have to go change some settings.

185
00:10:28,880 --> 00:10:35,460
There's a link if you'd like to do it, but I recommend getting Chrome or Firefox. 

186
00:10:35,460 --> 00:10:37,750
So let's open up the console, it's down here. 

187
00:10:37,750 --> 00:10:41,170
It allows you to basically just do anything you want. 

188
00:10:41,170 --> 00:10:45,100
So you can just type in create a variable called x, 

189
00:10:45,100 --> 00:10:49,200
x = 5, let's see what x + 2 is. 

190
00:10:49,200 --> 00:10:57,670
You can even do something like CS + let's see, x + 45, that will be CS50. 

191
00:10:57,670 --> 00:11:00,530
You can just do some typical JavaScript stuff. 

192
00:11:00,530 --> 00:11:02,730
But you can also do jQuery in here. 

193
00:11:02,730 --> 00:11:06,200
>> So let's look at this first aspect here. 

194
00:11:06,200 --> 00:11:09,500
We're going to create a variable called HTML, which is a string. 

195
00:11:09,500 --> 00:11:15,890
It has a paragraph tag in it, that's called some new text. 

196
00:11:15,890 --> 00:11:19,420
So we have this HTML, it's some new text, in paragraph tags. 

197
00:11:19,420 --> 00:11:21,800
Now we actually want to add it to the page. 

198
00:11:21,800 --> 00:11:28,310
I set it up so that the HTML for this paragraph, this title here, is append ID. 

199
00:11:28,310 --> 00:11:32,320
If we select append ID and then append to it

200
00:11:32,320 --> 00:11:34,560
the HTML variable I just created, 

201
00:11:34,560 --> 00:11:40,370
it will add that HTML at the end, right after this paragraph tag. 

202
00:11:40,370 --> 00:11:43,730
So if we do that--we selected this paragraph, 

203
00:11:43,730 --> 00:11:47,590
and we've called the append function with the HTML variable I just added, 

204
00:11:47,590 --> 00:11:50,960
it will add that new text right there on the page. 

205
00:11:50,960 --> 00:11:54,970
We can also prepend, which means it will go before, at the beginning of that element. 

206
00:11:54,970 --> 00:11:58,290
So there is some new text at the beginning and afterwards. 

207
00:11:58,290 --> 00:12:01,660
I can go ahead and refresh to get rid of this stuff I've just done. 

208
00:12:01,660 --> 00:12:05,280
But that's an example of how you can use the prepend and append methods

209
00:12:05,280 --> 00:12:08,910
to manipulate stuff on the page, add some HTML. 

210
00:12:08,910 --> 00:12:11,080
>> You can also change classes. 

211
00:12:11,080 --> 00:12:14,970
Back in this style file, I've created this for the win class

212
00:12:14,970 --> 00:12:19,990
that has text color red, some background color, and a text shadow. 

213
00:12:19,990 --> 00:12:23,810
It looks hideous, but I can actually--

214
00:12:23,810 --> 00:12:26,410
this paragraph corresponds to class ID. 

215
00:12:26,410 --> 00:12:29,860
So I can add the class for the win. 

216
00:12:29,860 --> 00:12:31,870
I can execute this in the console, 

217
00:12:31,870 --> 00:12:35,480
and that will add that class, and now it looks hideous, as expected. 

218
00:12:35,480 --> 00:12:39,680
The CSS automatically gets applied to the classes that you--

219
00:12:39,680 --> 00:12:42,680
if there's CSS for a class, it automatically gets applied 

220
00:12:42,680 --> 00:12:44,680
if you change the class of an element. 

221
00:12:44,680 --> 00:12:49,230
Then we can just remove it using remove class. 

222
00:12:49,230 --> 00:12:53,690
So if you have some predefined classes like red or highlighted, 

223
00:12:53,690 --> 00:12:55,990
and then you want to apply those to elements, 

224
00:12:55,990 --> 00:12:58,230
you don't have to do all the CSS styling every time. 

225
00:12:58,230 --> 00:13:01,510
You can just add the class to an element, and then it will automatically become--

226
00:13:01,510 --> 00:13:05,580
it will automatically look appropriate for that class. 

227
00:13:05,580 --> 00:13:07,900
We can also remove things; so I'm going to select all the divs

228
00:13:07,900 --> 00:13:10,830
on the page and remove them. 

229
00:13:10,830 --> 00:13:13,990
What is that going to look like? 

230
00:13:13,990 --> 00:13:16,170
It's going to look like nothing, so there's actually nothing left. 

231
00:13:16,170 --> 00:13:18,170
My presentation is gone. 

232
00:13:18,170 --> 00:13:21,290
I can refresh and bring it back, fortunately, 

233
00:13:21,290 --> 00:13:24,420
because it's just running once, 

234
00:13:24,420 --> 00:13:29,460
but that's an example of removing, if you want to completely destroy an element off the page. 

235
00:13:29,460 --> 00:13:33,180
>> You can also overwrite, and I'm going to select all the paragraph tags on the page

236
00:13:33,180 --> 00:13:36,850
and go inside them and replace whatever text they have in them

237
00:13:36,850 --> 00:13:39,690
with just the word "testing."

238
00:13:39,690 --> 00:13:46,520
If you do this, you'll replace every paragraph on the page with this testing. 

239
00:13:46,520 --> 00:13:49,150
Yep. They're all replaced with testing. 

240
00:13:49,150 --> 00:13:53,270
So that's an example of accessing the text and overwriting it. 

241
00:13:53,270 --> 00:13:57,490
You can also retrieve information, and this is really cool for input boxes. 

242
00:13:57,490 --> 00:14:00,470
If you have an input box that people are typing stuff into, 

243
00:14:00,470 --> 00:14:03,880
people are typing stuff into it, 

244
00:14:03,880 --> 00:14:09,030
here we select the input, any input tag with a type of text. 

245
00:14:09,030 --> 00:14:13,800
In this case, there's only one input box in the whole presentation, 

246
00:14:13,800 --> 00:14:17,260
so we'll just select the first one, and then we call the val function on it. 

247
00:14:17,260 --> 00:14:19,570
That returns the value, and for an input box, 

248
00:14:19,570 --> 00:14:24,330
the value is just whatever happens to be inside it. 

249
00:14:24,330 --> 00:14:31,880
So if we do this, it just returns the string stuff. 

250
00:14:31,880 --> 00:14:36,860
And if we call it again after writing more stuff, it turns into more stuff. 

251
00:14:36,860 --> 00:14:40,760
That's one great way to access elements of an input box, and then check, 

252
00:14:40,760 --> 00:14:45,060
is this a valid email address, is this a valid date, for example. 

253
00:14:45,060 --> 00:14:49,600
You can just retrieve stuff instantly as people are typing it, 

254
00:14:49,600 --> 00:14:54,830
and then check whether it's valid, send it back to a server, do anything you want with it.

255
00:14:54,830 --> 00:14:57,720
And that's how you access what's inside those boxes. 

256
00:14:57,720 --> 00:15:00,090
>> You can also modify CSS directly, so instead of adding

257
00:15:00,090 --> 00:15:02,510
a class that has some predefined properties, 

258
00:15:02,510 --> 00:15:08,120
you can just add whatever CSS you want to anything. 

259
00:15:08,120 --> 00:15:10,350
So let's select body, which is the entire presentation, 

260
00:15:10,350 --> 00:15:14,370
and color is the property that defines what the colors the text is. 

261
00:15:14,370 --> 00:15:19,420
If we change it to red, all the text in the page will turn to red. 

262
00:15:19,420 --> 00:15:26,310
We can do something like background color blue, 

263
00:15:26,310 --> 00:15:30,680
there we go; it's beautiful.

264
00:15:30,680 --> 00:15:33,840
You can do anything you want with this. 

265
00:15:33,840 --> 00:15:39,250
Using the CSS property, you can really modify how anything looks at any time. 

266
00:15:39,250 --> 00:15:41,630
The next thing is effects. 

267
00:15:41,630 --> 00:15:45,710
Effects are basically the same thing as modifying the CSS, 

268
00:15:45,710 --> 00:15:48,870
but they actually provide some extra animation to it. 

269
00:15:48,870 --> 00:15:53,380
So instead of just showing or hiding something or changing the color, 

270
00:15:53,380 --> 00:15:56,130
you can actually make it animated. 

271
00:15:56,130 --> 00:16:00,760
Here's the documentation, if you want to take a look at the extensive documentation for it. 

272
00:16:00,760 --> 00:16:04,760
But I'm going to cover the main ones. 

273
00:16:04,760 --> 00:16:12,030
There are the show and hide properties. 

274
00:16:12,030 --> 00:16:14,510
Show/hide ID actually corresponds to this whole box, 

275
00:16:14,510 --> 00:16:18,190
so if I hide it, it will just disappear. 

276
00:16:18,190 --> 00:16:24,210
And I can show it again if I want to make it come back. 

277
00:16:24,210 --> 00:16:26,340
And it's back. It didn't actually disappear, 

278
00:16:26,340 --> 00:16:30,670
I didn't actually remove it from the page, I just set the CSS property of visibility to hidden

279
00:16:30,670 --> 00:16:34,030
so you can't see it anymore. 

280
00:16:34,030 --> 00:16:39,250
There's also slide up and slide down; that allows you to have this effect. 

281
00:16:39,250 --> 00:16:47,050
It slides up to disappear, and after it disappears

282
00:16:47,050 --> 00:16:53,210
you can slide it down to make it come back. And now it's back. 

283
00:16:53,210 --> 00:16:57,650
There's also this fade effect, which--fade ID corresponds to this box. 

284
00:16:57,650 --> 00:17:01,200
If I fade it out, then it'll slowly disappear. 

285
00:17:01,200 --> 00:17:04,490
I can also fade it in, and it will come back. 

286
00:17:04,490 --> 00:17:08,930
You can also do fade to, which is specific to the fade function. 

287
00:17:08,930 --> 00:17:12,589
You can have it fade to any specific opacity that you want.

288
00:17:12,589 --> 00:17:16,869
So if you fade it slowly to .5, it'll become half visible. 

289
00:17:16,869 --> 00:17:22,630
I can make it go to .1, and back to 1 to make it fully visible again. 

290
00:17:22,630 --> 00:17:24,760
That's just another animation that you can do. 

291
00:17:24,760 --> 00:17:26,750
>> There are also the toggle effects. 

292
00:17:26,750 --> 00:17:33,410
So I'm going to select the toggle ID, which corresponds to this box, 

293
00:17:33,410 --> 00:17:38,970
and on that div you can call toggle; if it's visible it will become invisible, 

294
00:17:38,970 --> 00:17:42,320
if it's invisible it will become visible again. 

295
00:17:42,320 --> 00:17:44,440
So I just called this toggle function twice; the first one was 

296
00:17:44,440 --> 00:17:48,380
the same thing as hide, the second call was the same thing as a show. 

297
00:17:48,380 --> 00:17:53,510
And you can also do this with a fade toggle, 

298
00:17:53,510 --> 00:17:55,730
which does the same thing, except it actually fades. 

299
00:17:55,730 --> 00:17:59,410
And same thing with the slide toggle. 

300
00:17:59,410 --> 00:18:01,460
There are chained effects as well, which means 

301
00:18:01,460 --> 00:18:05,520
if you select an element and just call a bunch of animation methods on it, 

302
00:18:05,520 --> 00:18:07,400
if you wanted it to fade out, then slide down, 

303
00:18:07,400 --> 00:18:11,040
and then hide and then fade in, it will do them in a row. 

304
00:18:11,040 --> 00:18:24,920
So disappeared, came back--for some reason, the hide didn't happen. 

305
00:18:24,920 --> 00:18:30,030
Let's try it out. Yeah, so it faded out and then it slid away. 

306
00:18:30,030 --> 00:18:32,230
And there are plenty more. You can use the animate function 

307
00:18:32,230 --> 00:18:35,370
to create your own animations, which is fairly complex, 

308
00:18:35,370 --> 00:18:38,790
but it provides you with infinite extensibility. 

309
00:18:38,790 --> 00:18:40,630
You can make any kind of animation you want. 

310
00:18:40,630 --> 00:18:44,230
You can also use queue to queue up multiple animations at a time. 

311
00:18:44,230 --> 00:18:47,340
So if you want something to fly across the page, 

312
00:18:47,340 --> 00:18:49,860
slide from the top right to the bottom left, you can do that, 

313
00:18:49,860 --> 00:18:55,240
and just have a bunch of actions going one after the other. 

314
00:18:55,240 --> 00:18:57,490
>> The next thing we're going to talk about is events. 

315
00:18:57,490 --> 00:19:02,090
Events allow you--so far, we've just been typing things into the console

316
00:19:02,090 --> 00:19:04,870
and that is one way to make this happen, 

317
00:19:04,870 --> 00:19:08,020
but on an actual page, you're not going to be able to 

318
00:19:08,020 --> 00:19:10,020
make the user type things into the console. 

319
00:19:10,020 --> 00:19:12,050
You want things to happen automatically. 

320
00:19:12,050 --> 00:19:18,060
For that, you need to use events that activate on some certain event happening. 

321
00:19:18,060 --> 00:19:21,340
You can check the documentation for the full details.

322
00:19:21,340 --> 00:19:24,030
So let's see. We want to hide or show the box, 

323
00:19:24,030 --> 00:19:29,340
but right now this button doesn't do anything because I didn't implement it yet. 

324
00:19:29,340 --> 00:19:35,420
I'm going to go to the actual HTML page. 

325
00:19:35,420 --> 00:19:38,560
Here's the slide. There's a div for the slide.

326
00:19:38,560 --> 00:19:41,230
It has the class of slide. 

327
00:19:41,230 --> 00:19:46,890
There's the text. Now, there's this box and the box button. 

328
00:19:46,890 --> 00:19:52,900
How would we actually make this disappear? 

329
00:19:52,900 --> 00:19:58,250
First of all, let's write a function that makes the box ID disappear. 

330
00:19:58,250 --> 00:20:01,820
This is the syntax for funtion, let's just call it hideTheBox. 

331
00:20:01,820 --> 00:20:06,130
It doesn't take any arguments, because there are no arguments to be taken. 

332
00:20:06,130 --> 00:20:08,950
We can select the box ID. 

333
00:20:08,950 --> 00:20:15,020
So using the jQuery select, we can select box ID, 

334
00:20:15,020 --> 00:20:17,700
and then just make it disappear. 

335
00:20:17,700 --> 00:20:20,690
Let's make it fade out. 

336
00:20:20,690 --> 00:20:27,390
If we ran this function in the actual console, 

337
00:20:27,390 --> 00:20:33,380
we could define this function; we can call hideTheBox, and it works. 

338
00:20:33,380 --> 00:20:36,650
But we want it to happen when the button is actually pressed. 

339
00:20:36,650 --> 00:20:40,950
To do that, we have to use an event.

340
00:20:40,950 --> 00:20:45,500
To bind an event to some specific button or some action happening, 

341
00:20:45,500 --> 00:20:50,040
we have to select the element that the event will trigger--

342
00:20:50,040 --> 00:20:52,650
or that will trigger the event, sorry. 

343
00:20:52,650 --> 00:20:57,220
>> So first of all, let's select the box button ID

344
00:20:57,220 --> 00:20:59,610
because that's the button, and now, for that button, 

345
00:20:59,610 --> 00:21:02,750
we want to create an animation when it's clicked. 

346
00:21:02,750 --> 00:21:05,040
So there's this click function. 

347
00:21:05,040 --> 00:21:08,470
It allows you to bind another function to it. 

348
00:21:08,470 --> 00:21:12,320
This function takes another function as an argument

349
00:21:12,320 --> 00:21:14,310
we can pass in the hideTheBox function, 

350
00:21:14,310 --> 00:21:20,950
and whenever this button is clicked, that function will automatically execute. 

351
00:21:20,950 --> 00:21:24,850
So this will work if we save this, I'll refresh, 

352
00:21:24,850 --> 00:21:33,460
and--one second, I'm sorry. 

353
00:21:33,460 --> 00:21:44,770
Let me fix this really quickly. 

354
00:21:44,770 --> 00:21:50,680
Okay. There we go. So now the box is disappearing when we click the button. 

355
00:21:50,680 --> 00:21:55,470
We can also change this to just fadeToggle, 

356
00:21:55,470 --> 00:22:00,020
change it just to hide or show the box, 

357
00:22:00,020 --> 00:22:03,850
and this will also work too, if we refresh. 

358
00:22:03,850 --> 00:22:08,550
We can hide it, we can also show it, and that will continue to work. 

359
00:22:08,550 --> 00:22:12,210
Another thing we can do is, we don't actually have to define this hideTheBox function

360
00:22:12,210 --> 00:22:15,050
before we call the click function. 

361
00:22:15,050 --> 00:22:17,640
So instead of defining the function and calling hideTheBox, 

362
00:22:17,640 --> 00:22:20,310
we're only going to call it if this thing is clicked. 

363
00:22:20,310 --> 00:22:22,310
So we can define it anonymously in here, 

364
00:22:22,310 --> 00:22:25,070
which is a feature that JavaScript has. 

365
00:22:25,070 --> 00:22:29,720
You can define a function; normally, we would say function hideTheBox

366
00:22:29,720 --> 00:22:34,490
with arguments, but instead, we can just say function no arguments, 

367
00:22:34,490 --> 00:22:36,870
start the curly brace to define the function, 

368
00:22:36,870 --> 00:22:40,780
close that curly brace, and then just define the function in here, 

369
00:22:40,780 --> 00:22:45,130
within the first parenthesis and the last parenthesis

370
00:22:45,130 --> 00:22:47,860
that correspond to the arguments of the click function. 

371
00:22:47,860 --> 00:22:53,320
So we're passing in this function, we can copy this line of code right here, 

372
00:22:53,320 --> 00:22:55,450
and that will do the exact same thing. 

373
00:22:55,450 --> 00:22:57,290
And now we don't have this random fadeTheBox function 

374
00:22:57,290 --> 00:22:59,960
that is sitting around for no apparent reason. 

375
00:22:59,960 --> 00:23:02,070
The function was defined anonymously, it doesn't have a name. 

376
00:23:02,070 --> 00:23:08,060
It will only execute when we click on the box button. 

377
00:23:08,060 --> 00:23:12,180
So refreshing once more, one more time, and you can see that it still works. 

378
00:23:12,180 --> 00:23:16,700
And that's how you create events. 

379
00:23:16,700 --> 00:23:19,190
>> There are a lot of different events that we can use. 

380
00:23:19,190 --> 00:23:23,540
I'm going to switch back to using the console to just show you how these work. 

381
00:23:23,540 --> 00:23:28,210
The IDs for each of these correspond to each box. 

382
00:23:28,210 --> 00:23:33,020
So this box is click ID, this one is key ID, and this one is mouse ID. 

383
00:23:33,020 --> 00:23:36,120
One more thing is that there's this action function; rather than typing it out every time, 

384
00:23:36,120 --> 00:23:41,610
I actually went ahead and defined this action function down here.

385
00:23:41,610 --> 00:23:46,860
It does the same thing as the hideTheBox function. 

386
00:23:46,860 --> 00:23:51,340
It gets this box and either fades it out or fades it in. 

387
00:23:51,340 --> 00:23:54,110
And that's why we're able to use it here. 

388
00:23:54,110 --> 00:24:00,350
So if we click on this click ID, we want to make the box disappear or reappear. 

389
00:24:00,350 --> 00:24:03,610
It's the same thing as the button that we had in the last slide. 

390
00:24:03,610 --> 00:24:07,450
Now after we call that, we can click on this and the box will disappear, 

391
00:24:07,450 --> 00:24:10,160
then click on it again and the box will reappear. 

392
00:24:10,160 --> 00:24:12,480
That's pretty simple. Double click does the same thing, 

393
00:24:12,480 --> 00:24:15,660
except it requires a double click. 

394
00:24:15,660 --> 00:24:19,030
So if you click on it once and click on it again nothing will happen,

395
00:24:19,030 --> 00:24:21,140
but if you double click quickly, it'll disappear. 

396
00:24:21,140 --> 00:24:23,310
If you double click again, it will come back. 

397
00:24:23,310 --> 00:24:25,250
So that's pretty simple. 

398
00:24:25,250 --> 00:24:31,170
Keyboard input is kind of weird; I don't think it actually works in this example

399
00:24:31,170 --> 00:24:37,670
because the key down, key up and key press and other key actions

400
00:24:37,670 --> 00:24:47,190
activate no matter what element you bind it to. 

401
00:24:47,190 --> 00:24:51,410
For example, even if I bound key down to body or something else completely, 

402
00:24:51,410 --> 00:24:55,950
then it would still activate no matter--it's not specific. 

403
00:24:55,950 --> 00:25:00,190
I don't have to be clicking on this and press a key to make anything disappear. 

404
00:25:00,190 --> 00:25:04,470
It would be activated regardless of what element I'm currently in. 

405
00:25:04,470 --> 00:25:06,880
So these don't actually work in this example 

406
00:25:06,880 --> 00:25:13,180
because it doesn't recognize me as entering input into the keyboard input div. 

407
00:25:13,180 --> 00:25:15,740
>> But if you look at the mouse actions, 

408
00:25:15,740 --> 00:25:19,620
the first one is hover, and it can do some of this using CSS. 

409
00:25:19,620 --> 00:25:24,280
If you use CSS, you can create it so that if you hover over something, 

410
00:25:24,280 --> 00:25:28,940
then its style changes. 

411
00:25:28,940 --> 00:25:32,170
But using jQuery you can change the styles of other things as well. 

412
00:25:32,170 --> 00:25:37,120
So, for example, we're going to call action if we hover over this div. 

413
00:25:37,120 --> 00:25:39,660
That means if we hover over it, then the box will disappear.

414
00:25:39,660 --> 00:25:42,430
If we move away from it, the box will reappear. 

415
00:25:42,430 --> 00:25:45,090
If we call this and hover over it, the box does disappear, 

416
00:25:45,090 --> 00:25:47,050
and as soon as we move away, it comes back. 

417
00:25:47,050 --> 00:25:49,750
If we call this hover function on the mouse ID, 

418
00:25:49,750 --> 00:25:54,380
which corresponds to this box, then if we hover over the box, 

419
00:25:54,380 --> 00:26:00,440
then the box will actually disappear--it's being funky right now, but--

420
00:26:00,440 --> 00:26:06,310
if we move away from it, it will reappear. Right now it's backwards for some reason. 

421
00:26:06,310 --> 00:26:12,720
The mouse enter and mouse move functions are somewhat similar, but slightly different. 

422
00:26:12,720 --> 00:26:16,470
Mouse enter only activates when the mouse enters the box, as expected. 

423
00:26:16,470 --> 00:26:19,210
So if you move into it, it'll disappear. 

424
00:26:19,210 --> 00:26:23,210
But it won't reappear when you move away; you'll have to move back onto it for it to come back. 

425
00:26:23,210 --> 00:26:25,590
There's also the mouse move function, which will activate

426
00:26:25,590 --> 00:26:29,300
whenever the mouse is even present in the box. 

427
00:26:29,300 --> 00:26:32,430
So it'll just keep on going, fading in and out. 

428
00:26:32,430 --> 00:26:35,660
And it's actually logging--it seems like it's just fading in and out, 

429
00:26:35,660 --> 00:26:39,140
but it's actually logging a lot more actions than this, 

430
00:26:39,140 --> 00:26:43,550
so when you move away it'll just keep going because it logged like a thousand of them. 

431
00:26:43,550 --> 00:26:46,620
Maybe not a thousand. Maybe five. 

432
00:26:46,620 --> 00:26:50,200
It logs more than that. 

433
00:26:50,200 --> 00:26:53,280
The point is, all the mouse actions, there are a lot of them. 

434
00:26:53,280 --> 00:26:55,480
You can read up on the other ones, but they are all slightly different, 

435
00:26:55,480 --> 00:26:57,700
and you can pick whichever one you need 

436
00:26:57,700 --> 00:27:02,130
for whichever specific purpose you're trying to do. 

437
00:27:02,130 --> 00:27:05,060
>> The next thing I'm going to talk about is AJAX. 

438
00:27:05,060 --> 00:27:09,340
AJAX, I know we didn't cover JavaScript in as much depth this year, 

439
00:27:09,340 --> 00:27:11,770
so I'm just going to talk about AJAX in general for a minute. 

440
00:27:11,770 --> 00:27:15,210
AJAX stands for Asynchronous JavaScript and XML. 

441
00:27:15,210 --> 00:27:19,030
It's basically, for example, when you're on Facebook and it pushes you a notification, 

442
00:27:19,030 --> 00:27:23,060
that's because AJAX is running on your web browser. 

443
00:27:23,060 --> 00:27:25,800
Every couple of seconds your web browser's actually 

444
00:27:25,800 --> 00:27:29,420
going to Facebook's servers, asking them, do you have anything new for me, 

445
00:27:29,420 --> 00:27:31,980
and then it comes back to you. 

446
00:27:31,980 --> 00:27:36,320
This allows you to send requests to a server

447
00:27:36,320 --> 00:27:38,660
without actually having to load the page. 

448
00:27:38,660 --> 00:27:42,040
So normally, if you're just using PHP and a database, 

449
00:27:42,040 --> 00:27:45,480
you have to refresh the page before you can get new information from the server. 

450
00:27:45,480 --> 00:27:48,770
But using AJAX, you can pull for that new information constantly, 

451
00:27:48,770 --> 00:27:52,250
or pull for it when you click a button or anything like that. 

452
00:27:52,250 --> 00:27:56,140
So this allows us to send requests without reloading the page, 

453
00:27:56,140 --> 00:27:58,130
and we can use either GET or POST requests. 

454
00:27:58,130 --> 00:28:05,370
>> GET requests are, for example, if you to to Google.com

455
00:28:05,370 --> 00:28:10,900
and do q=test. That's giving them a query test. 

456
00:28:10,900 --> 00:28:15,890
And that's a GET request because it's passing in those parameters into the URL itself. 

457
00:28:15,890 --> 00:28:19,250
A POST request is as if you're sending them via post. 

458
00:28:19,250 --> 00:28:22,500
It's like you put it in a letter and ship it off to them, 

459
00:28:22,500 --> 00:28:25,140
but they don't actually see the contents. They're not visible in the URL. 

460
00:28:25,140 --> 00:28:31,040
You can't directly type it in; you have to send it almost secretly. 

461
00:28:31,040 --> 00:28:33,880
It's in a post. 

462
00:28:33,880 --> 00:28:38,660
But using jQuery, you can do GET and POST requests 

463
00:28:38,660 --> 00:28:42,740
much more easily than you normally could using just plain JavaScript. 

464
00:28:42,740 --> 00:28:50,140
You can query APIs using GET requests, and you can also check for login information. 

465
00:28:50,140 --> 00:28:54,400
On the next page, I created this, which asks, "What's for lunch?"

466
00:28:54,400 --> 00:28:58,230
using the Harvard food API, so let's pull that up.

467
00:28:58,230 --> 00:29:01,840
This is just an example of how you can use jQuery to do a GET request to an API

468
00:29:01,840 --> 00:29:04,200
and get information back from it. 

469
00:29:04,200 --> 00:29:07,090
So we want to see the menu for today, 

470
00:29:07,090 --> 00:29:10,560
and we want to see what's for lunch. 

471
00:29:10,560 --> 00:29:16,500
Here's the URL to create a GET request in jQuery. 

472
00:29:16,500 --> 00:29:18,600
you use the $.get function. 

473
00:29:18,600 --> 00:29:22,290
The first argument is the URL, so exactly what you're querying. 

474
00:29:22,290 --> 00:29:27,200
Then the next argument is a function that executes when the GET request is complete.

475
00:29:27,200 --> 00:29:29,980
So you send off some request to the server, wait for it to come back.

476
00:29:29,980 --> 00:29:33,770
When it does come back, you're going to take some action with the data that's back from the server. 

477
00:29:33,770 --> 00:29:37,520
Let's go ahead and code this as well.   

478
00:29:37,520 --> 00:29:42,110
I didn't code this either, on purpose. 

479
00:29:42,110 --> 00:29:46,660
Here's the TODO. First of all, let's use the event binding

480
00:29:46,660 --> 00:29:50,820
so that when this button is pressed, we send off a GET request. 

481
00:29:50,820 --> 00:29:53,410
And when that GET request returns with some data, 

482
00:29:53,410 --> 00:29:57,290
we're going to write it into this meal info ID div. 

483
00:29:57,290 --> 00:30:02,860
First of all, let's select the food button ID. 

484
00:30:02,860 --> 00:30:07,320
When it's clicked, we want it to do something. 

485
00:30:07,320 --> 00:30:11,930
Let's just make it an anonymous fuction, as before. 

486
00:30:11,930 --> 00:30:15,550
Can wrap those curly braces, 

487
00:30:15,550 --> 00:30:18,530
and when this button is pressed, we want to send a GET request

488
00:30:18,530 --> 00:30:20,750
to check what's for lunch. 

489
00:30:20,750 --> 00:30:24,970
To do that, we can just type in $.get. 

490
00:30:24,970 --> 00:30:28,850
This is a jQuery function, using the dollar sign. 

491
00:30:28,850 --> 00:30:31,430
It takes a couple of arguments. The first one is the URL, 

492
00:30:31,430 --> 00:30:34,450
the second one is the callback function, the function that's called 

493
00:30:34,450 --> 00:30:37,740
when that request actually returns. 

494
00:30:37,740 --> 00:30:39,890
Let's just build the URL first. 

495
00:30:39,890 --> 00:30:44,650
We can get it from the API that David wrote up. 

496
00:30:44,650 --> 00:30:51,360
Going here, we can see that it's food.cs50.net/api/1.3/menus, 

497
00:30:51,360 --> 00:30:54,140
and then you just pass in the names of the parameters that you would like. 

498
00:30:54,140 --> 00:30:57,760
So parameter 1 is value 1. 

499
00:30:57,760 --> 00:31:00,910
It looks like standard date, start date, defaults to today

500
00:31:00,910 --> 00:31:03,110
if you don't enter anything, and end date also defaults

501
00:31:03,910 --> 00:31:05,930
to today if you don't enter anything. 

502
00:31:05,930 --> 00:31:10,790
That's what we want. We want to just get the information for today. 

503
00:31:10,790 --> 00:31:12,950
>> We want the format to be in JSON. 

504
00:31:12,950 --> 00:31:15,570
That's just arbitrary; you can use any form that you want. 

505
00:31:15,570 --> 00:31:18,950
You can use CSV, but JSON is JavaScript Object Notation. 

506
00:31:18,950 --> 00:31:24,150
It's very easy for JavaScript to understand what it means,

507
00:31:24,150 --> 00:31:27,110
and we can print it out more easily that way. 

508
00:31:27,110 --> 00:31:30,490
So let's request it in JSON, and let's request lunch. 

509
00:31:30,490 --> 00:31:37,660
So meal = lunch. Just to write up that URL, we go back here. 

510
00:31:37,660 --> 00:31:41,290
There's menus. The first parameter is output = JSON

511
00:31:41,290 --> 00:31:44,640
because that's what we want, and you separate the parameters with an 'and.'

512
00:31:44,640 --> 00:31:48,940
The second parameter is--I don't remember. 

513
00:31:48,940 --> 00:31:52,170
Meal. And we want meal = lunch. 

514
00:31:52,170 --> 00:31:57,390
You can test this URL by typing it into your browser and going to it. 

515
00:31:57,390 --> 00:32:03,120
It will give you some output. It's just a bunch of stuff that's for lunch. 

516
00:32:03,120 --> 00:32:10,410
It's in this ugly format. We want to print it onto our page in a better format. 

517
00:32:10,410 --> 00:32:12,580
So the URL is correct, now we just need to write a function

518
00:32:12,580 --> 00:32:18,300
to call back when the request is successful. 

519
00:32:18,300 --> 00:32:20,430
This function will actually take an argument. It will be data. 

520
00:32:20,430 --> 00:32:25,650
The data is what comes back from the GET request after the GET request is done. 

521
00:32:25,650 --> 00:32:28,860
We can do the curly braces; in here we write the anonymous function

522
00:32:28,860 --> 00:32:33,900
that executes, using that data when we get the information back. 

523
00:32:33,900 --> 00:32:37,840
So data, when we typed in this URL, 

524
00:32:37,840 --> 00:32:41,540
this is what the data's going to look like. It's going to be this huge string. 

525
00:32:41,540 --> 00:32:48,610
But the good thing is, JavaScript can parse it by using the JSON.parse function.  

526
00:32:48,610 --> 00:32:54,950
So let's create a new variable called parse data. 

527
00:32:54,950 --> 00:32:57,060
And parse data is an array of objects. 

528
00:32:57,060 --> 00:33:04,200
Each object contains information such as--well, let's take a look. 

529
00:33:04,200 --> 00:33:08,980
It has a date, a meal, category, recipe, all this other stuff. 

530
00:33:08,980 --> 00:33:10,860
So let's just print out the name for each one. 

531
00:33:10,860 --> 00:33:13,790
Let's iterate over the whole array of stuff that we get back from it, 

532
00:33:13,790 --> 00:33:17,570
and just print out each one--print out the name of each one. 

533
00:33:17,570 --> 00:33:22,670
This is a for loop. 

534
00:33:22,670 --> 00:33:26,030
>> JavaScript has this helpful syntax where you can create a variable and loop over an array, 

535
00:33:26,030 --> 00:33:30,150
and var i is just the iterator, so instead of having to do var i = 0, 

536
00:33:30,150 --> 00:33:40,290
i was less than the length, i++, you can just do var i in parsed data. 

537
00:33:40,290 --> 00:33:47,060
In this example, parsed data(i) will correspond to the current element 

538
00:33:47,060 --> 00:33:49,850
of the array, the actual object. 

539
00:33:49,850 --> 00:33:51,720
And we want to get the name out of it. 

540
00:33:51,720 --> 00:33:54,170
So let's just do name. 

541
00:33:54,170 --> 00:33:57,000
And the last thing is, we're going to have some jQuery again. 

542
00:33:57,000 --> 00:34:02,660
Actually add it to the div, this meal info div that's currently empty. 

543
00:34:02,660 --> 00:34:05,430
So let's select that. 

544
00:34:05,430 --> 00:34:13,870
We'll use jQuery and select meal info div ID, or meal info ID, sorry. 

545
00:34:13,870 --> 00:34:16,580
We want to append to this. 

546
00:34:16,580 --> 00:34:21,030
If we did test, for example, it would just overwrite it every single time. 

547
00:34:21,030 --> 00:34:29,190
So we can just append this. 

548
00:34:29,190 --> 00:34:31,889
The current element in the array, we'll get the name out of it, 

549
00:34:31,889 --> 00:34:38,159
and we'll append it to the end of the meal info ID div. 

550
00:34:38,159 --> 00:34:40,120
And then just to make it look cleaner, 

551
00:34:40,120 --> 00:34:51,550
we'll also append a line break so it's not all on one line. 

552
00:34:51,550 --> 00:34:55,280
So if all goes well, that should be good to--

553
00:34:55,280 --> 00:34:57,220
first of all, whenever this button is clicked, 

554
00:34:57,220 --> 00:35:00,070
it will send off a GET request to this URL. 

555
00:35:00,070 --> 00:35:02,500
When the data comes back from it, it'll parse it, 

556
00:35:02,500 --> 00:35:06,950
turn it into JSON, loop over the whole array representing that data, 

557
00:35:06,950 --> 00:35:10,310
and then append the name and a line break

558
00:35:10,310 --> 00:35:16,500
to every line in this meal info ID which was previously empty. 

559
00:35:16,500 --> 00:35:18,910
So going back to this page, we'll refresh, 

560
00:35:18,910 --> 00:35:23,690
click, find out--it does not work. That's unfortunate. 

561
00:35:23,690 --> 00:35:25,830
And this is where debugging comes in. 

562
00:35:25,830 --> 00:35:30,070
Index.html, line 1. 

563
00:35:30,070 --> 00:35:57,210
That's interesting. 

564
00:35:57,210 --> 00:35:59,720
All right, well, rather than spend time doing this, I'm just going to 

565
00:35:59,720 --> 00:36:07,070
pull up the done file that I have, which is the completed version. 

566
00:36:07,070 --> 00:36:13,710
I'm not sure what the difference is, but we can just open this up instead. 

567
00:36:13,710 --> 00:36:19,740
And we go to the AJAX, and this should work correctly. 

568
00:36:19,740 --> 00:36:21,730
That is what was for lunch today, 

569
00:36:21,730 --> 00:36:24,870
in no particular order, with quotes around it, so it's not the prettiest. 

570
00:36:24,870 --> 00:36:27,090
But, obviously, if you were doing this for a final project, 

571
00:36:27,090 --> 00:36:30,120
you would make it look better. 

572
00:36:30,120 --> 00:36:32,530
But that's just a simple example of how you do the GET request. 

573
00:36:32,530 --> 00:36:34,580
And if we look at the actual code, I'm guessing, I'm pretty sure

574
00:36:34,580 --> 00:36:39,690
it's still pretty much the same. 

575
00:36:39,690 --> 00:37:04,990
Oh, I forgot to convert it to a string, that's it. 

576
00:37:04,990 --> 00:37:07,920
No, it's still not working. Regardless, here's the actual completed code

577
00:37:07,920 --> 00:37:10,300
for what this should look like, 

578
00:37:10,300 --> 00:37:16,400
and it does the same thing as what I just implemented. 

579
00:37:16,400 --> 00:37:22,760
When you click on the button, it uses GET JSON to automatically parse the data. 

580
00:37:22,760 --> 00:37:29,190
It takes the data back from it and loops through the whole array 

581
00:37:29,190 --> 00:37:32,770
and prints out the--whatever's for lunch today, the name of it, 

582
00:37:32,770 --> 00:37:38,020
and appends a line break after each line. 

583
00:37:38,020 --> 00:37:41,100
That's how you use the GET function.

584
00:37:41,100 --> 00:37:44,040
>> You can also use POST, which I didn't have time

585
00:37:44,040 --> 00:37:47,940
to write up an example for it, but we can look at the documentation. 

586
00:37:47,940 --> 00:37:53,220
If you look at jquery.post, 

587
00:37:53,220 --> 00:37:55,510
you can see that it's almost the same thing. 

588
00:37:55,510 --> 00:38:01,650
You have a URL, but instead of passing parameters using--

589
00:38:01,650 --> 00:38:03,990
just putting them in the string for the URL itself, 

590
00:38:03,990 --> 00:38:06,300
you have to pass in this data variable 

591
00:38:06,300 --> 00:38:11,990
that is basically an array, a dictionary that maps parameters to values. 

592
00:38:11,990 --> 00:38:17,690
You pass that in, and that sends them in using a POST. 

593
00:38:17,690 --> 00:38:20,790
And once you have that, then you can have a success function

594
00:38:20,790 --> 00:38:23,930
that executes when the data comes back. 

595
00:38:23,930 --> 00:38:26,430
Otherwise, it's exactly the same. So using POST, 

596
00:38:26,430 --> 00:38:29,970
you might want to use POST, for example, if you have an input form

597
00:38:29,970 --> 00:38:35,780
you let people input passwords into it, and send those passwords off

598
00:38:35,780 --> 00:38:41,850
to your back-end script, to check in the database whether that user is valid or not. 

599
00:38:41,850 --> 00:38:46,700
You can do that all using jQuery instead of having to refresh the page at all. 

600
00:38:46,700 --> 00:38:52,160
That's how I implemented in the blog that I showed you earlier. 

601
00:38:52,160 --> 00:38:59,530
If we go to the end portal and log out, log out, 

602
00:38:59,530 --> 00:39:02,600
Log out doesn't work. 

603
00:39:02,600 --> 00:39:13,360
Well, let me just open it up in a new window. 

604
00:39:13,360 --> 00:39:16,580
Here there is a password, and I was going to type in something random. 

605
00:39:16,580 --> 00:39:18,590
It doesn't work, but you can see that we didn't

606
00:39:18,590 --> 00:39:20,840
actually have to refresh the page at all. 

607
00:39:20,840 --> 00:39:24,610
The code, if you want to look at it, 

608
00:39:24,610 --> 00:39:37,460
is all available in here. 

609
00:39:37,460 --> 00:39:45,680
So the code I wrote last year sometime. 

610
00:39:45,680 --> 00:39:47,790
As you can see here, we're sending a POST request. 

611
00:39:47,790 --> 00:39:50,400
I have a file called login.php in the back end, 

612
00:39:50,400 --> 00:39:53,860
which checks if the password is valid. 

613
00:39:53,860 --> 00:39:56,000
The parameters we pass in are password, mapped to 

614
00:39:56,000 --> 00:40:00,030
the input that's in this input box currently. 

615
00:40:00,030 --> 00:40:04,110
And when the data comes back, we check.

616
00:40:04,110 --> 00:40:07,680
If the data is false, then we say incorrect password, slide it down, 

617
00:40:07,680 --> 00:40:09,580
and just make it disappear after that. 

618
00:40:09,580 --> 00:40:12,320
Otherwise, we load the admin page. 

619
00:40:12,320 --> 00:40:15,080
And this was all done using JSON. 

620
00:40:15,080 --> 00:40:18,510
In this many lines of code, you can just pass the data to the back end, 

621
00:40:18,510 --> 00:40:21,020
check whether it's correct, check whether you logged in correctly, 

622
00:40:21,020 --> 00:40:24,200
and actually respond to it, redirecting the person to the correct page

623
00:40:24,200 --> 00:40:29,760
or not letting them log in and telling them that they had an incorrect password. 

624
00:40:29,760 --> 00:40:33,040
So that's an example of how you could use jQuery POST

625
00:40:33,040 --> 00:40:37,010
to send a POST request to your back end, 

626
00:40:37,010 --> 00:40:42,400
checking whether someone's logged in correctly. 

627
00:40:42,400 --> 00:40:44,820
>> All right, so that's all the examples I had, and all the stuff I wanted to cover. 

628
00:40:44,820 --> 00:40:47,110
Those are the major things that jQuery allows you to do: 

629
00:40:47,110 --> 00:40:52,640
select elements, modify them using DOM manipulation, 

630
00:40:52,640 --> 00:40:56,340
you can add effects, activate things on certain events, 

631
00:40:56,340 --> 00:41:00,430
and also do AJAX requests very seamlessly and easily. 

632
00:41:00,430 --> 00:41:02,840
So thank you for coming or watching, 

633
00:41:02,840 --> 00:41:06,230
and if you have any questions, just let me know. Yeah?

634
00:41:06,230 --> 00:41:12,730
[Student] Back when you showed, you had JSON after the POST request in quotes, 

635
00:41:12,730 --> 00:41:15,170
and I was just wondering what that did.

636
00:41:15,170 --> 00:41:20,070
>>Yeah, I see. The question was that, in the example I just showed, 

637
00:41:20,070 --> 00:41:25,790
there was the word JSON in quotes around the--

638
00:41:25,790 --> 00:41:31,690
I'll just pull it up again--around the POST function. 

639
00:41:31,690 --> 00:41:43,320
I'm just pulling it up to show. 

640
00:41:43,320 --> 00:41:46,890
So here's this POST request, and there's this JSON in quotes. 

641
00:41:46,890 --> 00:41:50,280
That just defines what we're expecting the output to be. 

642
00:41:50,280 --> 00:41:54,070
So if we pass in JSON as the expected data type, 

643
00:41:54,070 --> 00:41:56,070
it's not a requirement, but if we pass it in, 

644
00:41:56,070 --> 00:41:58,590
then the data will automatically be parsed as JSON. 

645
00:41:58,590 --> 00:42:00,600
So we don't have to call the JSON parse function on it, 

646
00:42:00,600 --> 00:42:02,620
it'll just happen automatically. 

647
00:42:02,620 --> 00:42:05,150
And if you take a look at the documentation for POST, 

648
00:42:05,150 --> 00:42:09,850
there is this data type variable, the type of data expected from the server. 

649
00:42:09,850 --> 00:42:12,660
It defaults to an intelligent guess that can be wrong, 

650
00:42:12,660 --> 00:42:15,520
so you can leave it blank, but it's just the type of data

651
00:42:15,520 --> 00:42:21,680
in coding that you're using, whether it's JSON or XML or something else. 

652
00:42:21,680 --> 00:42:25,280
>> Any other questions? 

653
00:42:25,280 --> 00:42:27,300
All right. If you have any other questions, feel free to email me

654
00:42:27,300 --> 00:42:30,830
at vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
and the slides and code should be available online pretty soon. 

656
00:42:34,860 --> 00:42:42,810
Good luck with your final projects, hope you use jQuery. 

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]