1
00:00:00,000 --> 00:00:07,920

2
00:00:07,920 --> 00:00:10,850
>> JASON HIRSCHHORN: Welcome,
everyone, to week nine.

3
00:00:10,850 --> 00:00:14,800
We have an exciting week ahead of us
because we have our final problem set.

4
00:00:14,800 --> 00:00:18,330
We also have a brand new language,
JavaScript, that you are already in

5
00:00:18,330 --> 00:00:22,690
the midst of using not only for this
problem set, but many of you will

6
00:00:22,690 --> 00:00:24,780
probably utilize it for final
projects, especially

7
00:00:24,780 --> 00:00:26,000
web-based final projects.

8
00:00:26,000 --> 00:00:32,330
So that's what we'll go over today after
talking briefly about resources,

9
00:00:32,330 --> 00:00:33,180
which we do every week.

10
00:00:33,180 --> 00:00:36,850
We'll jump into JavaScript, and then
we'll spend all of section with a

11
00:00:36,850 --> 00:00:44,460
hands-on activity coding Dolphin Trainer
2K13, which is like Madden

12
00:00:44,460 --> 00:00:48,650
2013, but for dolphins
and in JavaScript.

13
00:00:48,650 --> 00:00:49,910
>> [LAUGHTER]

14
00:00:49,910 --> 00:00:53,670
>> JASON HIRSCHHORN: So as always, a list
of resources for you to check out.

15
00:00:53,670 --> 00:01:00,040
These resources are especially important
because next week on

16
00:01:00,040 --> 00:01:05,630
Wednesday is quiz one, your second
and final quiz in this course.

17
00:01:05,630 --> 00:01:10,700
Just like quiz zero, it is 75 minutes
and starts a little after 1 PM.

18
00:01:10,700 --> 00:01:16,400
It covers everything since day zero
of this course, but it certainly

19
00:01:16,400 --> 00:01:20,360
emphasizes everything that has
happened since quiz one.

20
00:01:20,360 --> 00:01:23,610
>> But of course, we covered for loops
in the beginning of the year.

21
00:01:23,610 --> 00:01:27,130
For loops are probably still going to
be a part of this quiz, so it's not

22
00:01:27,130 --> 00:01:31,050
like you can ignore everything that
happened before week five or quiz zero

23
00:01:31,050 --> 00:01:32,910
because this course builds
on itself a lot.

24
00:01:32,910 --> 00:01:37,080
But certainly the emphasis will be on
things we've learned since week six.

25
00:01:37,080 --> 00:01:42,520
That includes PHP, JavaScript, SQL to
be sure, and also the more advanced

26
00:01:42,520 --> 00:01:46,560
data structures we talked about in C.
A whole host of other topics, but we

27
00:01:46,560 --> 00:01:49,860
will discuss that next week
as we review for the quiz.

28
00:01:49,860 --> 00:01:52,940
>> And also, as always, if you have any
questions about the quiz as you're

29
00:01:52,940 --> 00:01:56,690
preparing, feel free to
send them my way.

30
00:01:56,690 --> 00:02:00,230
Right now, does anybody have any
quick questions about the quiz?

31
00:02:00,230 --> 00:02:03,140

32
00:02:03,140 --> 00:02:03,380
>> OK.

33
00:02:03,380 --> 00:02:06,440
Don't need to worry about it or freak
out about right now, but keep that in

34
00:02:06,440 --> 00:02:10,130
the back of your mind, because that's
happening a week and a day from now.

35
00:02:10,130 --> 00:02:15,030
>> Finally, I know we're running towards
the end of the semester--

36
00:02:15,030 --> 00:02:19,910
there are only two sections left after
this-- but I am still excited and

37
00:02:19,910 --> 00:02:21,930
eager for your feedback
if you have any.

38
00:02:21,930 --> 00:02:24,500
I want to make those the
best two sections ever.

39
00:02:24,500 --> 00:02:27,670
They probably will be, because each
section is amazing and the best ever.

40
00:02:27,670 --> 00:02:32,260
I don't know how that's possible, but
they've all been fantastic, I think.

41
00:02:32,260 --> 00:02:37,560
>> The feedback I've gotten has trailed off
to nothing and none since for the

42
00:02:37,560 --> 00:02:40,880
last couple of weeks, so please give
me some feedback if you have it.

43
00:02:40,880 --> 00:02:42,910
It takes three minutes.

44
00:02:42,910 --> 00:02:44,900
You can tell me good things you
want me to keep doing or

45
00:02:44,900 --> 00:02:46,080
things I can work on.

46
00:02:46,080 --> 00:02:49,700
I'm trying to be the best teacher
possible, or I'm trying to do the best

47
00:02:49,700 --> 00:02:52,920
I can, but I can't do that if I don't
know how you guys are doing.

48
00:02:52,920 --> 00:02:55,080
And it's hard to tell why you're falling
asleep in class, so let me

49
00:02:55,080 --> 00:02:58,250
know after why that was the case.

50
00:02:58,250 --> 00:03:00,940
>> I showed you this image last week.

51
00:03:00,940 --> 00:03:06,910
This is the Teenage Mutant Ninja Turtles
bike I had when I was younger,

52
00:03:06,910 --> 00:03:12,350
and we are continuing to push you guys
without training wheels as we immerse

53
00:03:12,350 --> 00:03:13,630
you in another language.

54
00:03:13,630 --> 00:03:18,420
But rest assured, JavaScript, like PHP,
is very similar to things you've

55
00:03:18,420 --> 00:03:18,990
done in the past.

56
00:03:18,990 --> 00:03:24,100
A lot of the logic transfers over, if
not the syntax, exactly one-for-one.

57
00:03:24,100 --> 00:03:26,910
But again, all of these languages that
we've gone over in the past couple of

58
00:03:26,910 --> 00:03:30,175
weeks, though they seem overwhelming,
are incredibly powerful and will allow

59
00:03:30,175 --> 00:03:34,440
you to do a lot in your final project
and probably other websites that you

60
00:03:34,440 --> 00:03:36,180
code in the future.

61
00:03:36,180 --> 00:03:41,000
>> So without further ado, we're going
to start diving into JavaScript.

62
00:03:41,000 --> 00:03:44,630
We're going to talk about it briefly and
then really get into the hands-on

63
00:03:44,630 --> 00:03:48,300
coding portion of this section.

64
00:03:48,300 --> 00:03:53,000
So JavaScript is a client-side scripting
language, which means it's

65
00:03:53,000 --> 00:03:56,740
different than PHP and it's different
than C. JavaScript's not compiled and

66
00:03:56,740 --> 00:03:58,740
it's not executed by the server.

67
00:03:58,740 --> 00:04:02,090
Rather, you load it.

68
00:04:02,090 --> 00:04:06,710
You load a JavaScript page when you load
a web page, and then it executes

69
00:04:06,710 --> 00:04:08,020
on your machine.

70
00:04:08,020 --> 00:04:11,120
Which means you can see all the
JavaScript code that was

71
00:04:11,120 --> 00:04:12,240
sent to your computer.

72
00:04:12,240 --> 00:04:21,750
>> Sometimes it's shortened or coded a
bit, encrypted a bit, so that you

73
00:04:21,750 --> 00:04:23,390
can't tell explicitly what's going on.

74
00:04:23,390 --> 00:04:26,920
For example, if you check out CS50 or
the staff solution for this week's

75
00:04:26,920 --> 00:04:31,260
problem set, and you go to service.js,
you'll notice you can't actually tell

76
00:04:31,260 --> 00:04:32,560
what to do from what we gave you.

77
00:04:32,560 --> 00:04:37,020
We encrypted it a bit to make
that a bit more difficult.

78
00:04:37,020 --> 00:04:40,450
Nevertheless, you can see the exact
JavaScript file that we are executing

79
00:04:40,450 --> 00:04:42,010
and our program is running on.

80
00:04:42,010 --> 00:04:46,510
So that's what it means to be a
client-side scripting language.

81
00:04:46,510 --> 00:04:51,280
>> Similar to C and PHP, though, JavaScript
has for loops, if/else

82
00:04:51,280 --> 00:04:52,715
conditions, while loops.

83
00:04:52,715 --> 00:04:58,290
Similar to PHP, it has a
foreach loop as well.

84
00:04:58,290 --> 00:05:02,270
And again, very similar to the
syntaxes that we have seen in

85
00:05:02,270 --> 00:05:04,430
languages that we've already
worked with.

86
00:05:04,430 --> 00:05:07,650
>> Finally, one of the coolest parts of
JavaScript, and something we'll be

87
00:05:07,650 --> 00:05:10,010
doing a lot today, and probably you'll
be doing a lot with your P set if you

88
00:05:10,010 --> 00:05:13,810
haven't experienced it already, is you
can check out all the errors you have

89
00:05:13,810 --> 00:05:16,290
in your code via JavaScript Console.

90
00:05:16,290 --> 00:05:17,770
We looked at it a bit last week.

91
00:05:17,770 --> 00:05:21,800
We looked at a different type of console
to inspect a page, but in

92
00:05:21,800 --> 00:05:28,420
Chrome, again, you can see the layout,
the HTML, document that your page is

93
00:05:28,420 --> 00:05:29,310
showing you on the screen.

94
00:05:29,310 --> 00:05:33,820
You can also see all of the JavaScript
form that page, and you can also, like

95
00:05:33,820 --> 00:05:36,410
I said, see all of the errors
in the JavaScript Console.

96
00:05:36,410 --> 00:05:40,110
And we'll experience that more in
a bit when we start coding.

97
00:05:40,110 --> 00:05:42,380
>> One thing to note about
JavaScript variables.

98
00:05:42,380 --> 00:05:46,950
Like PHP variables, they're
loosely-typed, so you don't need to

99
00:05:46,950 --> 00:05:48,690
give them a specific type.

100
00:05:48,690 --> 00:05:52,330
In terms of scope, that is defined
by the "var" keyword.

101
00:05:52,330 --> 00:05:54,890
So if you don't put a keyword in front
of something, you just write the name

102
00:05:54,890 --> 00:05:57,870
of the variable, then an assignment
operator, in this case the equal sign.

103
00:05:57,870 --> 00:06:00,360
I'm forgetting a semicolon right there,
but assume there's a semicolon

104
00:06:00,360 --> 00:06:01,590
right there.

105
00:06:01,590 --> 00:06:03,520
>> Then you're creating
a global variable.

106
00:06:03,520 --> 00:06:06,960
If you put the "var" keyword, then
you're giving it some type of local

107
00:06:06,960 --> 00:06:10,050
scope, whether that's to
a function or a loop.

108
00:06:10,050 --> 00:06:12,215
So that is one thing to
note for variables.

109
00:06:12,215 --> 00:06:15,650

110
00:06:15,650 --> 00:06:17,550
>> JavaScript is the language.

111
00:06:17,550 --> 00:06:21,830
jQuery is the library built on top of
the JavaScript language, and you have

112
00:06:21,830 --> 00:06:24,180
seen it before in lecture.

113
00:06:24,180 --> 00:06:28,010
I highly recommend, if you're going to
be using JavaScript in your final

114
00:06:28,010 --> 00:06:29,690
project, that you get to know jQuery.

115
00:06:29,690 --> 00:06:33,140
It makes everything you want
to do much, much easier.

116
00:06:33,140 --> 00:06:36,730
It also comes with wonderful
documentation and examples to help get

117
00:06:36,730 --> 00:06:37,080
you started.

118
00:06:37,080 --> 00:06:39,430
Today we're going to be
using jQuery as well.

119
00:06:39,430 --> 00:06:43,320
>> These, what I have on this slide,
are the very basics of jQuery.

120
00:06:43,320 --> 00:06:47,200
In the top of your HTML file or
whatever-- your index.php file, your

121
00:06:47,200 --> 00:06:50,070
index.html file-- you need to
include these two lines.

122
00:06:50,070 --> 00:06:51,540
These are pretty generic lines.

123
00:06:51,540 --> 00:06:57,350
The first line includes the jQuery
JavaScript file, and the second line

124
00:06:57,350 --> 00:07:00,410
includes wherever you've written
your own JavaScript code.

125
00:07:00,410 --> 00:07:03,240
And of course, because in your
JavaScript code you've probably used

126
00:07:03,240 --> 00:07:07,800
some jQuery library functions,
that needs to go after the

127
00:07:07,800 --> 00:07:09,650
jQuery inclusion script.

128
00:07:09,650 --> 00:07:12,560

129
00:07:12,560 --> 00:07:15,550
We will explore this
again in a moment.

130
00:07:15,550 --> 00:07:21,640
>> And finally, in the JavaScript file,
I call this one index.js.

131
00:07:21,640 --> 00:07:22,640
It could be scripts.js.

132
00:07:22,640 --> 00:07:26,510
Whatever it is, whatever JavaScript
file have you, you start generally

133
00:07:26,510 --> 00:07:30,780
with this line of code, dollar sign,
open paren, document, close paren,

134
00:07:30,780 --> 00:07:34,810
period, ready, open paren, function,
open paren, close paren, and then

135
00:07:34,810 --> 00:07:35,490
curly brace.

136
00:07:35,490 --> 00:07:38,930
Throw your code inside there, and then
end it with a curly brace, close

137
00:07:38,930 --> 00:07:40,590
paren, semicolon.

138
00:07:40,590 --> 00:07:42,550
>> So take this as a given.

139
00:07:42,550 --> 00:07:47,250
If you're going to be using jQuery, wrap
all of your jQuery code inside

140
00:07:47,250 --> 00:07:49,230
this line of code.

141
00:07:49,230 --> 00:07:53,150
And we'll see that again in a second.

142
00:07:53,150 --> 00:07:56,170
>> Again we'll be working with jQuery,
and please ask questions as we go

143
00:07:56,170 --> 00:07:58,420
today, but does anybody have any
questions about jQuery or

144
00:07:58,420 --> 00:07:59,670
JavaScript right now?

145
00:07:59,670 --> 00:08:11,410

146
00:08:11,410 --> 00:08:11,780
>> OK.

147
00:08:11,780 --> 00:08:16,780
So without further ado, I present
to you Dolphin Trainer 2K13.

148
00:08:16,780 --> 00:08:20,656
I am super excited about this latest
version of the product.

149
00:08:20,656 --> 00:08:22,620
>> Oh, no!

150
00:08:22,620 --> 00:08:23,590
I was so excited.

151
00:08:23,590 --> 00:08:28,030
I was going to show it to you guys,
but it looks like we haven't

152
00:08:28,030 --> 00:08:28,720
implemented it yet.

153
00:08:28,720 --> 00:08:30,340
Let's make this a bit bigger.

154
00:08:30,340 --> 00:08:35,789
So if I load the code for Dolphin
Trainer-- dang it.

155
00:08:35,789 --> 00:08:37,210
I'm sorry, guys.

156
00:08:37,210 --> 00:08:38,520
I was working on this before class.

157
00:08:38,520 --> 00:08:40,350
I thought I'd have it finished,
but I guess I still have some

158
00:08:40,350 --> 00:08:41,210
work left to be done.

159
00:08:41,210 --> 00:08:44,400
But thankfully, you guys all have some
JavaScript and jQuery practice, so

160
00:08:44,400 --> 00:08:48,110
let's go ahead and finish
this together.

161
00:08:48,110 --> 00:08:50,360
>> I think I sent you guys copies of this,
because I was super excited

162
00:08:50,360 --> 00:08:52,710
about it, so you should have
the same code that I have.

163
00:08:52,710 --> 00:08:55,490
Let's head into--

164
00:08:55,490 --> 00:08:56,600
dang it, guys, I'm sorry.

165
00:08:56,600 --> 00:08:59,280
Let's head into the terminal, though.

166
00:08:59,280 --> 00:09:02,770
>> Just like with your past problem
sets, if you have my--

167
00:09:02,770 --> 00:09:05,130
let's make this a bit bigger,
too, for you guys--

168
00:09:05,130 --> 00:09:06,740
you took my zip file.

169
00:09:06,740 --> 00:09:10,670
You presumably unzipped it.

170
00:09:10,670 --> 00:09:12,970
Let's go here.

171
00:09:12,970 --> 00:09:22,360
And then hopefully, you moved it into
the same directory where you saved

172
00:09:22,360 --> 00:09:23,540
your problem set eight code.

173
00:09:23,540 --> 00:09:26,780
And we save in that directory so I can
access it-- or we all can access the

174
00:09:26,780 --> 00:09:31,740
code in the Chrome browser
on our computer.

175
00:09:31,740 --> 00:09:36,880
>> And again, to get to that code, you
simply type in the address found at

176
00:09:36,880 --> 00:09:41,180
the bottom, right hand side of
your appliance, down here.

177
00:09:41,180 --> 00:09:42,490
You find your IP address.

178
00:09:42,490 --> 00:09:45,260
You type that into the Chrome browser
on your computer, and in this case,

179
00:09:45,260 --> 00:09:49,110
since we're the section nine folder,
we also have to add a

180
00:09:49,110 --> 00:09:51,340
slash section nine.

181
00:09:51,340 --> 00:09:52,820
>> Let me--

182
00:09:52,820 --> 00:09:54,070
oops.

183
00:09:54,070 --> 00:09:55,610

184
00:09:55,610 --> 00:09:58,980
I'm going to minimize this so I don't
have to keep clicking through that.

185
00:09:58,980 --> 00:10:00,150
>> So that's how I set up this code.

186
00:10:00,150 --> 00:10:01,710
I've already done that already.

187
00:10:01,710 --> 00:10:04,080
I'm not going to go through those
steps because that's what the

188
00:10:04,080 --> 00:10:06,090
beginning of the problem set walks
you through how to do.

189
00:10:06,090 --> 00:10:11,520
So go ahead and you'll get to set this
up in a second, but first let's

190
00:10:11,520 --> 00:10:14,740
explore this code as a group.

191
00:10:14,740 --> 00:10:15,990
>> Let's see what I did.

192
00:10:15,990 --> 00:10:18,340
I tried to get most of it done
before class, but I think I

193
00:10:18,340 --> 00:10:20,140
was a little behind.

194
00:10:20,140 --> 00:10:22,643
So let's open up index.html.

195
00:10:22,643 --> 00:10:36,600

196
00:10:36,600 --> 00:10:36,920
>> OK.

197
00:10:36,920 --> 00:10:39,780
And index.html is a really simple
page because I didn't

198
00:10:39,780 --> 00:10:40,630
want to get too crazy.

199
00:10:40,630 --> 00:10:43,200
I really wanted to make sure it
was working, but I guess I

200
00:10:43,200 --> 00:10:44,830
didn't get that far.

201
00:10:44,830 --> 00:10:48,600
>> Here's the head, which comes right
inside those HTML tags, and we notice

202
00:10:48,600 --> 00:10:50,180
a couple things right off the bat.

203
00:10:50,180 --> 00:10:55,320
We have the CSS file right
here and the appropriate

204
00:10:55,320 --> 00:10:57,600
location of the CSS file.

205
00:10:57,600 --> 00:11:02,080
We have the jQuery library right here,
and you'll notice something different

206
00:11:02,080 --> 00:11:03,470
about this.

207
00:11:03,470 --> 00:11:06,070
The source is something
really, really long.

208
00:11:06,070 --> 00:11:07,500
ajax.googleapis.com/--

209
00:11:07,500 --> 00:11:12,880
sort of looks like a URL, but it
doesn't certainly look like

210
00:11:12,880 --> 00:11:15,380
js/jquery.js.

211
00:11:15,380 --> 00:11:20,280
>> And that's because I decided that I
don't want to have to download the

212
00:11:20,280 --> 00:11:23,750
jQuery file, and drag it and save
it in my library, and be

213
00:11:23,750 --> 00:11:25,150
responsible for it.

214
00:11:25,150 --> 00:11:31,040
Rather, I'm just going to take the
JavaScript file that Google hosts.

215
00:11:31,040 --> 00:11:34,880
So Google actually hosts a number of
libraries, and jQuery, since it is one

216
00:11:34,880 --> 00:11:36,930
of the most popular, it hosts
that one as well.

217
00:11:36,930 --> 00:11:40,670
>> And because it's hosting it, I don't
need to worry about it, and they

218
00:11:40,670 --> 00:11:43,520
update it, though when they do update it
I'll probably have to change these

219
00:11:43,520 --> 00:11:44,640
numbers right here.

220
00:11:44,640 --> 00:11:47,570
But that's just to make my whole file
system a little less clean.

221
00:11:47,570 --> 00:11:49,380
I don't really like hosting
all these files.

222
00:11:49,380 --> 00:11:51,780
It's much nicer if Google
has to host them for me.

223
00:11:51,780 --> 00:11:55,180
So this, again, is getting the whole
JavaScript file, but it's just being

224
00:11:55,180 --> 00:11:59,920
hosted by Google instead of on my
file system on my computer.

225
00:11:59,920 --> 00:12:05,490
>> We also see that I put in two more
files dolphins.js and trainer.js.

226
00:12:05,490 --> 00:12:07,070
We'll look at those in a second.

227
00:12:07,070 --> 00:12:10,550
And finally, this title right here.

228
00:12:10,550 --> 00:12:13,980
Who can tell me what this code inside
these title tags, where

229
00:12:13,980 --> 00:12:18,316
that goes on my page?

230
00:12:18,316 --> 00:12:21,560
>> AUDIENCE: Like that thing that
the toolbar or whatever?

231
00:12:21,560 --> 00:12:23,500
>> JASON HIRSCHHORN: Yeah, the little tab
on the top of the Chrome window.

232
00:12:23,500 --> 00:12:25,650
That's where that text goes.

233
00:12:25,650 --> 00:12:28,680
>> Inside the body, as you can
see, not much stuff here.

234
00:12:28,680 --> 00:12:30,900
I have just three divs.

235
00:12:30,900 --> 00:12:33,130
I give them some IDs, and
I put a little text in.

236
00:12:33,130 --> 00:12:37,350
But I guess that's why we don't
see anything over here.

237
00:12:37,350 --> 00:12:39,350
Actually, we see Dolphin Trainer 2K13.

238
00:12:39,350 --> 00:12:39,810
We see TODO.

239
00:12:39,810 --> 00:12:42,510
I don't know where that's coming from
because I don't see that here.

240
00:12:42,510 --> 00:12:44,510
So maybe that's in one of
my JavaScript files.

241
00:12:44,510 --> 00:12:46,630
We'll check that out in a second.

242
00:12:46,630 --> 00:12:50,120
>> Can somebody else tell me what
this ID means right here?

243
00:12:50,120 --> 00:12:54,890

244
00:12:54,890 --> 00:13:00,210
>> AUDIENCE: It's a way of calling the
specific section in the [INAUDIBLE]

245
00:13:00,210 --> 00:13:00,440
file?

246
00:13:00,440 --> 00:13:01,250
>> JASON HIRSCHHORN: Yeah.

247
00:13:01,250 --> 00:13:03,980
It's just a way to reference
this particular div.

248
00:13:03,980 --> 00:13:07,830
IDs are ideally unique.

249
00:13:07,830 --> 00:13:09,150
OK?

250
00:13:09,150 --> 00:13:10,050
Tough crowd.

251
00:13:10,050 --> 00:13:12,690
So, IDs are generally unique.

252
00:13:12,690 --> 00:13:15,210
You give them to one specific
element in your code.

253
00:13:15,210 --> 00:13:18,040

254
00:13:18,040 --> 00:13:21,540
>> What if I wanted to reference a number
of elements, whether that's for CSS

255
00:13:21,540 --> 00:13:23,350
styling or jQuery?

256
00:13:23,350 --> 00:13:25,610
What attribute can I give them?

257
00:13:25,610 --> 00:13:26,330
>> AUDIENCE: Class.

258
00:13:26,330 --> 00:13:27,270
>> JASON HIRSCHHORN: A class, exactly.

259
00:13:27,270 --> 00:13:28,480
Right.

260
00:13:28,480 --> 00:13:32,610
>> OK, so index.html, again,
not much going on here.

261
00:13:32,610 --> 00:13:42,550
So let's open another file.

262
00:13:42,550 --> 00:13:43,930
Let's see what I have.

263
00:13:43,930 --> 00:13:44,700
That's all I have in here.

264
00:13:44,700 --> 00:13:48,455
Let's go into the JS folder.

265
00:13:48,455 --> 00:13:51,570
I'm not going to worry about
the CSS for now.

266
00:13:51,570 --> 00:13:55,268
Let's open up dolphins.js.

267
00:13:55,268 --> 00:13:56,900
>> Oops.

268
00:13:56,900 --> 00:13:58,150
Or rather--

269
00:13:58,150 --> 00:14:03,470

270
00:14:03,470 --> 00:14:03,860
OK.

271
00:14:03,860 --> 00:14:07,650
So, dolphins.js, it actually looks
pretty similar to some of the code you

272
00:14:07,650 --> 00:14:10,210
were given in problem set eight.

273
00:14:10,210 --> 00:14:12,870
You can scroll through it.

274
00:14:12,870 --> 00:14:15,730
Can anybody tell me, though,
what is DOLPHINS?

275
00:14:15,730 --> 00:14:16,840
This all caps DOLPHINS?

276
00:14:16,840 --> 00:14:17,810
What is that?

277
00:14:17,810 --> 00:14:19,810
What type of data is that?

278
00:14:19,810 --> 00:14:20,570
>> AUDIENCE: Array.

279
00:14:20,570 --> 00:14:22,560
>> JASON HIRSCHHORN: It's an array.

280
00:14:22,560 --> 00:14:25,280
And we know it's an array because I
see these square brackets here.

281
00:14:25,280 --> 00:14:29,335
And somebody else, what's
it an array of?

282
00:14:29,335 --> 00:14:30,229
>> AUDIENCE: Objects?

283
00:14:30,229 --> 00:14:32,900
>> JASON HIRSCHHORN: It's
an array of objects.

284
00:14:32,900 --> 00:14:33,740
And you can see that.

285
00:14:33,740 --> 00:14:35,996
And how do you know it's
an array of objects?

286
00:14:35,996 --> 00:14:41,105
>> AUDIENCE: Because you have this colon
boot between curly braces?

287
00:14:41,105 --> 00:14:41,700
>> JASON HIRSCHHORN: Right.

288
00:14:41,700 --> 00:14:44,760
So I have these curly braces right here,
and then you can see the comma

289
00:14:44,760 --> 00:14:47,830
separating the different
objects in this array.

290
00:14:47,830 --> 00:14:52,040
And then inside each object, I have
something colon and something else.

291
00:14:52,040 --> 00:14:54,920
And what is generally this first part,
the thing to the left of the colon?

292
00:14:54,920 --> 00:14:57,070
What's that called?

293
00:14:57,070 --> 00:14:57,450
Generically?

294
00:14:57,450 --> 00:14:59,090
How do we refer to that?

295
00:14:59,090 --> 00:15:00,335
>> AUDIENCE: Index?

296
00:15:00,335 --> 00:15:02,810
>> JASON HIRSCHHORN: Index, or probably
more generally, the key.

297
00:15:02,810 --> 00:15:04,750
And then on the right hand
side, the value.

298
00:15:04,750 --> 00:15:05,670
So index, key.

299
00:15:05,670 --> 00:15:07,590
But if we're talking about those,
we generally mean the thing on

300
00:15:07,590 --> 00:15:08,770
the left hand side.

301
00:15:08,770 --> 00:15:11,450
>> In a simple array, again,
we had indices 0.

302
00:15:11,450 --> 00:15:11,900
1.

303
00:15:11,900 --> 00:15:12,220
2.

304
00:15:12,220 --> 00:15:12,510
3.

305
00:15:12,510 --> 00:15:13,580
4.

306
00:15:13,580 --> 00:15:17,640
And in dolphins, we'll have dolphin 0,
dolphins 1, dolphins 2, dolphins 3,

307
00:15:17,640 --> 00:15:18,640
dolphins 4.

308
00:15:18,640 --> 00:15:24,900
We also have, inside this object, we
won't generally reference things.

309
00:15:24,900 --> 00:15:29,460
Or if we just have this object right
here, we're not going to say object 0,

310
00:15:29,460 --> 00:15:30,480
object 1, object 2.

311
00:15:30,480 --> 00:15:35,460
We're going to say object name, or
object type, object length, et cetera.

312
00:15:35,460 --> 00:15:38,120
And that's how we'll get the value
on the right hand side.

313
00:15:38,120 --> 00:15:41,460
So if we said object name, for example,
we would get this string,

314
00:15:41,460 --> 00:15:43,200
"Grace."

315
00:15:43,200 --> 00:15:47,510
>> So as you guys have told me, dolphins
is simply an array of objects.

316
00:15:47,510 --> 00:15:49,875
And you see all of the objects
have a name, a type, a genus.

317
00:15:49,875 --> 00:15:51,920
Is that pronounced correctly?

318
00:15:51,920 --> 00:15:52,880
Anyone?

319
00:15:52,880 --> 00:15:53,420
Genus?

320
00:15:53,420 --> 00:15:53,935
Great.

321
00:15:53,935 --> 00:15:55,465
>> A length, a weight.

322
00:15:55,465 --> 00:15:56,620
Is that pronounced correctly?

323
00:15:56,620 --> 00:15:57,340
I think so.

324
00:15:57,340 --> 00:16:01,870
And a picture, just a URL
to some file online.

325
00:16:01,870 --> 00:16:05,700
And right here, we close the array,
right down there in the very left hand

326
00:16:05,700 --> 00:16:06,930
side of my screen.

327
00:16:06,930 --> 00:16:08,543
So that's all the dolphins.js is.

328
00:16:08,543 --> 00:16:17,310

329
00:16:17,310 --> 00:16:18,530
>> Oh, my goodness.

330
00:16:18,530 --> 00:16:19,530
This explains it.

331
00:16:19,530 --> 00:16:20,930
I thought I'd finished
everything, but look.

332
00:16:20,930 --> 00:16:22,840
There are all these TODOs.

333
00:16:22,840 --> 00:16:25,500
OK, hopefully we can
do those together.

334
00:16:25,500 --> 00:16:27,540
But let's first, before we do
that, just walk through

335
00:16:27,540 --> 00:16:29,190
this code very quickly.

336
00:16:29,190 --> 00:16:33,600
>> So as I mentioned, we see at the very
beginning this line that I had in the

337
00:16:33,600 --> 00:16:36,030
slides, (document).ready(function().

338
00:16:36,030 --> 00:16:38,710
And essentially what that's going to
do is wait till everything in your

339
00:16:38,710 --> 00:16:42,690
pages has been loaded, so wait until
it's all array, everything's good to

340
00:16:42,690 --> 00:16:45,490
go, and then start executing
this code.

341
00:16:45,490 --> 00:16:49,230
So if you needed to run some PHP, if
you needed to get some images,

342
00:16:49,230 --> 00:16:53,280
whatever it is, all the code has been
set and ready to go in your index page

343
00:16:53,280 --> 00:16:56,270
or whatever page has been loaded,
and now you're going to start

344
00:16:56,270 --> 00:16:58,810
executing your code.

345
00:16:58,810 --> 00:17:02,020
>> So the first thing we do is
we set up this array.

346
00:17:02,020 --> 00:17:04,599
And I don't have the var keyword
there, so what is the

347
00:17:04,599 --> 00:17:05,650
scope of this array?

348
00:17:05,650 --> 00:17:06,530
>> AUDIENCE: It's global.

349
00:17:06,530 --> 00:17:09,730
>> JASON HIRSCHHORN: It's global, so
ocean_array can be accessed from

350
00:17:09,730 --> 00:17:11,380
anywhere in this file.

351
00:17:11,380 --> 00:17:14,130
>> And then we see this for loop.

352
00:17:14,130 --> 00:17:18,930
It doesn't say foreach, but this
is essentially a foreach loop.

353
00:17:18,930 --> 00:17:24,010
And this is just JavaScript's version,
so for each var dolphin in DOLPHINS,

354
00:17:24,010 --> 00:17:25,780
what data type?

355
00:17:25,780 --> 00:17:30,260
Even though, again, JavaScript doesn't
have these data types per se, what

356
00:17:30,260 --> 00:17:31,335
data type is dolphin?

357
00:17:31,335 --> 00:17:32,460
>> AUDIENCE: An object.

358
00:17:32,460 --> 00:17:34,290
>> JASON HIRSCHHORN: It's an object.

359
00:17:34,290 --> 00:17:37,590
We're getting each object
in the DOLPHINS array.

360
00:17:37,590 --> 00:17:42,630
So in here, it looks like I forgot to
put all of these dolphins from our

361
00:17:42,630 --> 00:17:46,300
giant DOLPHINS think into the
ocean_array, so we should probably do

362
00:17:46,300 --> 00:17:47,410
that first.

363
00:17:47,410 --> 00:17:50,880
>> And then, something called
this pool variable.

364
00:17:50,880 --> 00:17:52,490
I'm setting it to null.

365
00:17:52,490 --> 00:17:55,080
And then I call this function
draw_ocean.

366
00:17:55,080 --> 00:17:56,580
I train a dolphin when its
picture is clicked--

367
00:17:56,580 --> 00:17:58,140
I haven't done that-- and
set a dolphin free when

368
00:17:58,140 --> 00:17:59,530
the button is clicked.

369
00:17:59,530 --> 00:18:01,550
>> So these are the things I need to do.

370
00:18:01,550 --> 00:18:04,770
I guess I should give you some
background on what I was trying to do.

371
00:18:04,770 --> 00:18:08,930
So if we go here, what I really wanted
this to look like was an array up

372
00:18:08,930 --> 00:18:12,740
here, rather than it saying "TODO," I
wanted a table, essentially, with the

373
00:18:12,740 --> 00:18:14,750
pictures of all the dolphins.

374
00:18:14,750 --> 00:18:18,150
And then when you click on one picture,
I wanted it to put it down in

375
00:18:18,150 --> 00:18:21,320
the bottom half of the screen and give
you all the information on it, and

376
00:18:21,320 --> 00:18:24,170
that would be the dolphin in the pool,
the dolphin you were training.

377
00:18:24,170 --> 00:18:25,040
>> So I thought it would be really cool.

378
00:18:25,040 --> 00:18:27,980
You have all these dolphins in the ocean
up here, then you click on one,

379
00:18:27,980 --> 00:18:30,230
and it'd go to the pool, and
then you could train it.

380
00:18:30,230 --> 00:18:31,590
So that's what I was trying to do.

381
00:18:31,590 --> 00:18:33,890
And then there'd be a button down here
in the pool, and you could click,

382
00:18:33,890 --> 00:18:36,950
like, "Set Free," and you could set the
dolphin free, and it would go back

383
00:18:36,950 --> 00:18:38,030
into the ocean.

384
00:18:38,030 --> 00:18:40,390
>> So that's what I was trying to create,
but again, I'm going to need your help

385
00:18:40,390 --> 00:18:41,490
to create it.

386
00:18:41,490 --> 00:18:44,790
So hopefully, some of these keywords
or some of these terms will start

387
00:18:44,790 --> 00:18:47,890
making sense now in the context
of this program.

388
00:18:47,890 --> 00:18:49,640
>> Let's keep looking through this file.

389
00:18:49,640 --> 00:18:50,830
We call this function draw_ocean.

390
00:18:50,830 --> 00:18:56,650
It's the one and only function we call
from the document.ready section.

391
00:18:56,650 --> 00:19:01,600
So we call this draw_ocean function, and
it looks like it creates a string,

392
00:19:01,600 --> 00:19:03,010
a variable, here.

393
00:19:03,010 --> 00:19:06,790
Put's something in the string, adds more
stuff to the string, adds more

394
00:19:06,790 --> 00:19:11,750
stuff of the string, and
then this line of code.

395
00:19:11,750 --> 00:19:14,270
I say that prints out the HTML string.

396
00:19:14,270 --> 00:19:19,230
And somebody explain to me what
this line of code does?

397
00:19:19,230 --> 00:19:21,800
Well, first of all, what does
that dollar sign mean?

398
00:19:21,800 --> 00:19:26,550

399
00:19:26,550 --> 00:19:30,914
It's not a PHP variable, but what
does that dollar sign mean?

400
00:19:30,914 --> 00:19:34,680
>> AUDIENCE: Linking to the HTML ID of--

401
00:19:34,680 --> 00:19:37,220
it's like it links to the HTML code?

402
00:19:37,220 --> 00:19:38,430
>> JASON HIRSCHHORN: What about
that dollar sign?

403
00:19:38,430 --> 00:19:40,662
What does that dollar sign indicate?

404
00:19:40,662 --> 00:19:43,364
>> AUDIENCE: Linking to the HTML somehow?

405
00:19:43,364 --> 00:19:46,630
>> JASON HIRSCHHORN: Where have we seen
this dollar sign before in JavaScript?

406
00:19:46,630 --> 00:19:47,920
We saw it in lecture.

407
00:19:47,920 --> 00:19:48,360
We talked about it.

408
00:19:48,360 --> 00:19:50,150
What does the dollar sign mean?

409
00:19:50,150 --> 00:19:51,220
>> AUDIENCE: Something with jQuery?

410
00:19:51,220 --> 00:19:52,380
>> JASON HIRSCHHORN: Exactly right.

411
00:19:52,380 --> 00:19:54,270
This has something to do with jQuery.

412
00:19:54,270 --> 00:19:59,310
This dollar sign means I am using
a jQuery library function here.

413
00:19:59,310 --> 00:20:00,980
Exactly right.

414
00:20:00,980 --> 00:20:04,560
>> So we write the dollar sign, and then
we have this open paren and closed

415
00:20:04,560 --> 00:20:09,150
paren, and inside there, what goes
inside there when you're using a

416
00:20:09,150 --> 00:20:13,380
jQuery library function, or you're
using the jQuery library?

417
00:20:13,380 --> 00:20:14,690
Again, you saw this in lecture.

418
00:20:14,690 --> 00:20:16,840
Can somebody give me-- and you
also see something here.

419
00:20:16,840 --> 00:20:18,090
What goes inside of there?

420
00:20:18,090 --> 00:20:22,220

421
00:20:22,220 --> 00:20:23,550
>> Jeff, give me a guess.

422
00:20:23,550 --> 00:20:27,000
What does this look like, #ocean?

423
00:20:27,000 --> 00:20:28,270
Where have we seen that before?

424
00:20:28,270 --> 00:20:29,920
>> AUDIENCE: Is it a library
or something?

425
00:20:29,920 --> 00:20:30,720
I have no idea.

426
00:20:30,720 --> 00:20:36,420
>> JASON HIRSCHHORN: Well, let
me open index dot--

427
00:20:36,420 --> 00:20:37,710
nope, wrong place.

428
00:20:37,710 --> 00:20:44,220

429
00:20:44,220 --> 00:20:46,600
>> So we see we have something
called ocean here.

430
00:20:46,600 --> 00:20:50,870
Where have we seen the #ocean hashtag
ocean, syntax before?

431
00:20:50,870 --> 00:20:53,490

432
00:20:53,490 --> 00:20:53,950
Yeah?

433
00:20:53,950 --> 00:20:55,190
>> AUDIENCE: CSS?

434
00:20:55,190 --> 00:20:56,810
>> JASON HIRSCHHORN: In CSS.

435
00:20:56,810 --> 00:21:00,720
So we wanted to style something,
remember we would put the hashtag CSS

436
00:21:00,720 --> 00:21:05,360
selector, or hashtag ocean, for example,
and all of the formatting

437
00:21:05,360 --> 00:21:09,270
that we wanted to give to the thing
with ID ocean we put inside there.

438
00:21:09,270 --> 00:21:15,470
>> So inside here it's not CSS
selector goes in here.

439
00:21:15,470 --> 00:21:17,630
jQuery defines its own
type of selectors.

440
00:21:17,630 --> 00:21:21,650
But it's the same idea, and actually
a lot of them overlap with CSS.

441
00:21:21,650 --> 00:21:24,710
So inside these open parentheses, you
put a selector, and whatever the

442
00:21:24,710 --> 00:21:28,670
selector refers to, that's what
you're going to be using.

443
00:21:28,670 --> 00:21:32,320
>> So in this case, I'm
selecting ID ocean.

444
00:21:32,320 --> 00:21:33,690
If I had a class--

445
00:21:33,690 --> 00:21:38,830
let's say I have a class of things
called "images," and I give that to a

446
00:21:38,830 --> 00:21:45,662
lot of elements, how do I reference
a class of things called "images?"

447
00:21:45,662 --> 00:21:47,110
>> AUDIENCE: I think it was dot.

448
00:21:47,110 --> 00:21:48,140
>> JASON HIRSCHHORN: With a dot.

449
00:21:48,140 --> 00:21:50,830
So if instead I put dot images in here,
that would give me the class of

450
00:21:50,830 --> 00:21:51,980
things called "images."

451
00:21:51,980 --> 00:21:54,810
>> Of course, this is super powerful, and
you can reference a lot of things.

452
00:21:54,810 --> 00:21:59,970
In fact, I could reference basically
any tag in HTML.

453
00:21:59,970 --> 00:22:04,630
So if I wanted to do that, td, that's
a tag that we've seen before when

454
00:22:04,630 --> 00:22:05,750
creating a table.

455
00:22:05,750 --> 00:22:10,060
You're probably familiar with
that from P set seven.

456
00:22:10,060 --> 00:22:12,470
In this case, it's actually going
to select all of them.

457
00:22:12,470 --> 00:22:14,920
It's going to give me array
of all the td tags.

458
00:22:14,920 --> 00:22:16,760
But that can get a little overwhelming,
so fro right now we're

459
00:22:16,760 --> 00:22:19,390
going to stick to just
referencing IDs.

460
00:22:19,390 --> 00:22:23,510
>> So what this does, again, is
that gets, in this case--

461
00:22:23,510 --> 00:22:23,970
sorry.

462
00:22:23,970 --> 00:22:27,020
Go here, to index.html.

463
00:22:27,020 --> 00:22:33,510
It's an ocean, rather the ocean ID
references a div, so this part of this

464
00:22:33,510 --> 00:22:37,130
line of code gets that div.

465
00:22:37,130 --> 00:22:42,610
>> And then this dot means I'm calling
a function, and the name of that

466
00:22:42,610 --> 00:22:44,460
function is HTML.

467
00:22:44,460 --> 00:22:48,725
And that's short for, if you guys saw
before, dollar sign, document, dot get

468
00:22:48,725 --> 00:22:52,200
element by ID, dot inner HTML.

469
00:22:52,200 --> 00:22:54,350
This is just jQuery's version.

470
00:22:54,350 --> 00:22:57,200
So the HTML function just
gets the inner HTML.

471
00:22:57,200 --> 00:22:58,920
Of that element.

472
00:22:58,920 --> 00:23:03,690
So again, if we look back here, we'll
see there's no inner HTML.

473
00:23:03,690 --> 00:23:07,990
And so if I did this, I would
be trying to get the HTML.

474
00:23:07,990 --> 00:23:10,390
When I type this, I'm
setting the HTML.

475
00:23:10,390 --> 00:23:13,110
So I'm passing this function to string,
the string that I've created

476
00:23:13,110 --> 00:23:18,560
here, and saying put that
inside the ocean div.

477
00:23:18,560 --> 00:23:18,980
Yeah?

478
00:23:18,980 --> 00:23:21,550
>> AUDIENCE: When you get the
HTML, you're just getting

479
00:23:21,550 --> 00:23:22,972
a copy if it, right?

480
00:23:22,972 --> 00:23:25,070
You're not removing it.

481
00:23:25,070 --> 00:23:25,710
>> JASON HIRSCHHORN: Right.

482
00:23:25,710 --> 00:23:28,640
If I did this and wanted
to save this in var--

483
00:23:28,640 --> 00:23:31,120
oops.

484
00:23:31,120 --> 00:23:34,840
That would get all the information that
was there and save it in another

485
00:23:34,840 --> 00:23:35,800
variable, make a copy of it.

486
00:23:35,800 --> 00:23:36,384
>> AUDIENCE: OK.

487
00:23:36,384 --> 00:23:37,634
Got it.

488
00:23:37,634 --> 00:23:39,900

489
00:23:39,900 --> 00:23:43,860
>> JASON HIRSCHHORN: So we created some
HTML, save that in the string.

490
00:23:43,860 --> 00:23:44,590
We save some more.

491
00:23:44,590 --> 00:23:47,720
Here you see that TODO string.

492
00:23:47,720 --> 00:23:51,300
So that's probably where we are
getting that TODO from when

493
00:23:51,300 --> 00:23:52,730
we go into our page.

494
00:23:52,730 --> 00:23:56,610
And actually, if I right click on TODO,
inspect Element, we talked about

495
00:23:56,610 --> 00:23:57,240
this last week.

496
00:23:57,240 --> 00:24:02,400
That's how we could see the HTML
structure of our page.

497
00:24:02,400 --> 00:24:03,980
>> You'll notice that down here--

498
00:24:03,980 --> 00:24:05,230
let's make this a bit bigger, too--

499
00:24:05,230 --> 00:24:08,060

500
00:24:08,060 --> 00:24:11,390
we have our div ID ocean right here.

501
00:24:11,390 --> 00:24:14,390
Everybody see that line of code?

502
00:24:14,390 --> 00:24:16,330
And that's what we types
in index.html.

503
00:24:16,330 --> 00:24:18,880

504
00:24:18,880 --> 00:24:30,430
>> Inside of it, we see now this
table line of code.

505
00:24:30,430 --> 00:24:34,800
And what that table line of code is,
that's the code we just inserted into

506
00:24:34,800 --> 00:24:35,770
this element.

507
00:24:35,770 --> 00:24:39,650
And it we look inside of it, we never
typed colgroup and tbody.

508
00:24:39,650 --> 00:24:42,330
That was added for us because
we did some fancy stuff.

509
00:24:42,330 --> 00:24:47,590
But you'll notice there's the tr,
there's the td with TODO.

510
00:24:47,590 --> 00:24:50,680
>> So it looks like, again, the
code that we wrote here.

511
00:24:50,680 --> 00:24:52,300
That's exactly what this
line was doing.

512
00:24:52,300 --> 00:24:56,940
It was taking our HTML string and
putting it inside this div right here.

513
00:24:56,940 --> 00:24:59,010
It initially has nothing.

514
00:24:59,010 --> 00:25:01,660
This page gets loaded.

515
00:25:01,660 --> 00:25:03,160
Dollar sign, document.ready.

516
00:25:03,160 --> 00:25:04,490
This starts executing.

517
00:25:04,490 --> 00:25:08,010
We call the draw_ocean function, and
inside the draw_ocean function we take

518
00:25:08,010 --> 00:25:10,010
this HTML and put it inside that div.

519
00:25:10,010 --> 00:25:12,860

520
00:25:12,860 --> 00:25:14,230
>> We just went through
a lot right there.

521
00:25:14,230 --> 00:25:16,270
Does anybody have any questions
about that?

522
00:25:16,270 --> 00:25:19,050

523
00:25:19,050 --> 00:25:21,110
Or how that works, or jQuery?

524
00:25:21,110 --> 00:25:25,190
Because if you understand that, then
jQuery should hopefully come

525
00:25:25,190 --> 00:25:25,760
relatively easy.

526
00:25:25,760 --> 00:25:26,780
Yeah?

527
00:25:26,780 --> 00:25:29,370
>> AUDIENCE: What you had inside the
parentheses under the printout HTML

528
00:25:29,370 --> 00:25:32,150
string, that is the name of
the HTML variable that you

529
00:25:32,150 --> 00:25:32,815
have declared earlier?

530
00:25:32,815 --> 00:25:33,890
>> JASON HIRSCHHORN: This right here?

531
00:25:33,890 --> 00:25:34,440
>> AUDIENCE: Yes

532
00:25:34,440 --> 00:25:34,720
>> JASON HIRSCHHORN: Yes.

533
00:25:34,720 --> 00:25:36,600
AUDIENCE: So if you had named that
something else, that something else

534
00:25:36,600 --> 00:25:37,590
was what you would put in here.

535
00:25:37,590 --> 00:25:38,335
>> JASON HIRSCHHORN: Exactly right.

536
00:25:38,335 --> 00:25:39,740
And that's a good point.

537
00:25:39,740 --> 00:25:42,600
This is a little confusing because
I have HTML, html.

538
00:25:42,600 --> 00:25:46,930
This inside here is the name of my
variable, and this right here is the

539
00:25:46,930 --> 00:25:48,680
name of the jQuery function.

540
00:25:48,680 --> 00:25:52,090
>> AUDIENCE: But in order for the jQuery
function to work, you have to give it

541
00:25:52,090 --> 00:25:53,295
some HTML input?

542
00:25:53,295 --> 00:25:55,030
>> JASON HIRSCHHORN: Exactly.

543
00:25:55,030 --> 00:25:56,530
OR you have to give it a string.

544
00:25:56,530 --> 00:26:00,840
It will put that string inside
of the div or whatever.

545
00:26:00,840 --> 00:26:01,670
This is just a string.

546
00:26:01,670 --> 00:26:05,590
It doesn't know this is HTML, but
obviously format it on purpose to be

547
00:26:05,590 --> 00:26:07,770
valid HTML.

548
00:26:07,770 --> 00:26:08,760
Does that answer the question?

549
00:26:08,760 --> 00:26:09,480
>> AUDIENCE: Yes.

550
00:26:09,480 --> 00:26:10,120
>> JASON HIRSCHHORN: OK.

551
00:26:10,120 --> 00:26:10,590
Yeah?

552
00:26:10,590 --> 00:26:14,380
>> AUDIENCE: What if the ocean referred
to a button or something?

553
00:26:14,380 --> 00:26:16,250
What would the .html do?

554
00:26:16,250 --> 00:26:18,086
Would that change the
text of the button?

555
00:26:18,086 --> 00:26:23,610
>> JASON HIRSCHHORN: So the question is
what if it referred to a button?

556
00:26:23,610 --> 00:26:25,970
It will change the inner
HTML of something.

557
00:26:25,970 --> 00:26:29,250
So if it has an open tag and a close
tag, it will put something in between

558
00:26:29,250 --> 00:26:30,610
the open and close tag.

559
00:26:30,610 --> 00:26:33,280
If there's no open and close
tag, it won't do anything.

560
00:26:33,280 --> 00:26:35,040
>> AUDIENCE: It's literally a copy
and paste sort of thing?

561
00:26:35,040 --> 00:26:35,732
>> JASON HIRSCHHORN: Yeah.

562
00:26:35,732 --> 00:26:39,175
It copies and pastes something from
whatever variable I pass it, the

563
00:26:39,175 --> 00:26:41,410
string I pass it, inside those
open and close tags.

564
00:26:41,410 --> 00:26:44,460

565
00:26:44,460 --> 00:26:45,270
>> Let's look down here.

566
00:26:45,270 --> 00:26:48,950
Oh, my goodness. draw_pool didn't
do anything right there.

567
00:26:48,950 --> 00:26:50,580
That's a bummer.

568
00:26:50,580 --> 00:26:51,640
Train, wow.

569
00:26:51,640 --> 00:26:54,290
OK, so not much else besides that.

570
00:26:54,290 --> 00:26:56,652
>> So let's get started, and
let's fix this up.

571
00:26:56,652 --> 00:27:01,780
I am going to need everybody's
help to get this done.

572
00:27:01,780 --> 00:27:04,030
There aren't actually that many lines
of code, I think, to write.

573
00:27:04,030 --> 00:27:07,270
I think I did this a couple years ago
for the 2K12 version, and there

574
00:27:07,270 --> 00:27:08,880
shouldn't be that many lines
of code to write.

575
00:27:08,880 --> 00:27:09,230
I shouldn't have deleted that code.

576
00:27:09,230 --> 00:27:10,920
I should have just saved it.

577
00:27:10,920 --> 00:27:11,900
Oh, crazy.

578
00:27:11,900 --> 00:27:14,170
>> Anyway, let's get started.

579
00:27:14,170 --> 00:27:18,850
So I'm in this array, or I'm in this
line, and I have my ocean_array.

580
00:27:18,850 --> 00:27:24,110
And I want to put all of this,
everything from this file, into my

581
00:27:24,110 --> 00:27:25,170
ocean_array.

582
00:27:25,170 --> 00:27:27,390
So how can I take everything from
there, and put it into the

583
00:27:27,390 --> 00:27:27,630
ocean_array?

584
00:27:27,630 --> 00:27:29,390
It's one line of code.

585
00:27:29,390 --> 00:27:32,530
Who can give me that line of code or
tell me, have some idea what that line

586
00:27:32,530 --> 00:27:33,755
of code should do?

587
00:27:33,755 --> 00:27:36,350
Why won't we start here, and then we'll
continue moving around the room

588
00:27:36,350 --> 00:27:37,410
answering questions.

589
00:27:37,410 --> 00:27:37,780
Kurt?

590
00:27:37,780 --> 00:27:38,890
What's first?

591
00:27:38,890 --> 00:27:41,165
>> AUDIENCE: Ocean_array,
bracket, dolphin.

592
00:27:41,165 --> 00:27:47,120

593
00:27:47,120 --> 00:27:50,380
Equals DOLPHINS, bracket, dolphin?

594
00:27:50,380 --> 00:27:52,265
DOLPHINS with a capital everything.

595
00:27:52,265 --> 00:27:57,590

596
00:27:57,590 --> 00:27:58,210
>> JASON HIRSCHHORN: OK.

597
00:27:58,210 --> 00:28:00,250
Let's walk through the syntax.

598
00:28:00,250 --> 00:28:04,260
Right here, this is like a foreach loop,
so it's actually doing a lot of

599
00:28:04,260 --> 00:28:05,180
things for us.

600
00:28:05,180 --> 00:28:07,220
And dolphin is an object.

601
00:28:07,220 --> 00:28:09,790
So we don't need to write something
like dolphins, dolphin, because

602
00:28:09,790 --> 00:28:12,480
dolphin itself is the
object that I want.

603
00:28:12,480 --> 00:28:13,495
It's not the index.

604
00:28:13,495 --> 00:28:14,510
Does that make sense?

605
00:28:14,510 --> 00:28:15,830
>> AUDIENCE: Yeah.

606
00:28:15,830 --> 00:28:18,870
>> JASON HIRSCHHORN: So how do you
propose changing your code?

607
00:28:18,870 --> 00:28:23,110

608
00:28:23,110 --> 00:28:24,360
If we know we're given the index?

609
00:28:24,360 --> 00:28:33,969

610
00:28:33,969 --> 00:28:35,240
>> Oh, sorry.

611
00:28:35,240 --> 00:28:36,100
You're good.

612
00:28:36,100 --> 00:28:41,180
But how--

613
00:28:41,180 --> 00:28:43,740
let me ask a different question.

614
00:28:43,740 --> 00:28:46,485
If we want to--

615
00:28:46,485 --> 00:28:47,400
let's actually write this.

616
00:28:47,400 --> 00:28:48,170
Never mind.

617
00:28:48,170 --> 00:28:49,080
We're going to write this.

618
00:28:49,080 --> 00:28:49,910
That's great.

619
00:28:49,910 --> 00:28:50,440
Sorry.

620
00:28:50,440 --> 00:28:52,790
I was just very confusing there.

621
00:28:52,790 --> 00:28:55,910
>> Let's leave that there for now, and
we'll come back to training a dolphin,

622
00:28:55,910 --> 00:28:56,480
setting a dolphin.

623
00:28:56,480 --> 00:28:59,840
Let's just first fix this drawing ocean
function, and we'll come back to

624
00:28:59,840 --> 00:29:00,930
that, Kurt.

625
00:29:00,930 --> 00:29:03,490
But so far, so good.

626
00:29:03,490 --> 00:29:06,290
>> Let's look inside draw_ocean.

627
00:29:06,290 --> 00:29:09,500
The line that looks to be wrong is this
"store pictures of dolphins in

628
00:29:09,500 --> 00:29:13,320
the ocean in an HTML string." And right
now, I just like TODO, but I

629
00:29:13,320 --> 00:29:17,230
really want to put the dolphins
pictures in the ocean.

630
00:29:17,230 --> 00:29:21,780
So what, Noah, do you think is
the first thing I should do?

631
00:29:21,780 --> 00:29:24,570
If I want to go through the entire
array, what is the first

632
00:29:24,570 --> 00:29:25,270
thing I should do?

633
00:29:25,270 --> 00:29:26,713
>> AUDIENCE: We need to
create a for loop.

634
00:29:26,713 --> 00:29:27,610
>> JASON HIRSCHHORN: A for loop.

635
00:29:27,610 --> 00:29:29,740
And what should that
for loop look like?

636
00:29:29,740 --> 00:29:30,990
>> AUDIENCE: For--

637
00:29:30,990 --> 00:29:36,660

638
00:29:36,660 --> 00:29:40,940
we need to go through each dolphin
in the ocean array.

639
00:29:40,940 --> 00:29:47,093
So for var dolphin in--

640
00:29:47,093 --> 00:29:48,830
can you write ocean array?

641
00:29:48,830 --> 00:29:56,200

642
00:29:56,200 --> 00:29:57,450
>> JASON HIRSCHHORN: Like that?

643
00:29:57,450 --> 00:30:00,654

644
00:30:00,654 --> 00:30:04,495
>> AUDIENCE: Probably that's right.

645
00:30:04,495 --> 00:30:06,280
>> JASON HIRSCHHORN: Let's stick with
that for now, and then we'll

646
00:30:06,280 --> 00:30:07,060
come back to it.

647
00:30:07,060 --> 00:30:09,055
And you're going to be responsible
for that line.

648
00:30:09,055 --> 00:30:11,260
So I have by for loop.

649
00:30:11,260 --> 00:30:12,560
Michael, you're up now.

650
00:30:12,560 --> 00:30:15,896
What should I do now?

651
00:30:15,896 --> 00:30:23,045
>> AUDIENCE: You would have to take the
store pictures from dolphins.

652
00:30:23,045 --> 00:30:25,830
>> JASON HIRSCHHORN: So where
is that stored?

653
00:30:25,830 --> 00:30:28,318
>> AUDIENCE: In the dolphin array?

654
00:30:28,318 --> 00:30:33,298

655
00:30:33,298 --> 00:30:36,650
>> JASON HIRSCHHORN: I'm confused now
too about what's happening.

656
00:30:36,650 --> 00:30:38,380
Let's figure out how we can do debug
this, and then I'll come

657
00:30:38,380 --> 00:30:40,700
back to you, OK?

658
00:30:40,700 --> 00:30:43,920
What's the equivalent of
printf in JavaScript?

659
00:30:43,920 --> 00:30:44,813
Annie?

660
00:30:44,813 --> 00:30:47,315
>> AUDIENCE: It's a document that write?

661
00:30:47,315 --> 00:30:50,020
>> JASON HIRSCHHORN: Or how can
I see something in the

662
00:30:50,020 --> 00:30:51,200
console down at the bottom?

663
00:30:51,200 --> 00:30:51,940
>> AUDIENCE: Console.log.

664
00:30:51,940 --> 00:30:53,870
>> JASON HIRSCHHORN: Console.log,
exactly.

665
00:30:53,870 --> 00:30:59,810
So let's do console.log, and let's
just put "dolphin" in, OK?

666
00:30:59,810 --> 00:31:02,710
Ideally if this works, we're going to
have-- let's see, back in that file

667
00:31:02,710 --> 00:31:06,030
dolphins.js, there were six dolphins,
so I should get six or something

668
00:31:06,030 --> 00:31:08,180
hopefully printed out to
the console, right?

669
00:31:08,180 --> 00:31:11,850
That's where we are so far because we
did Kurt's line up here, and then we

670
00:31:11,850 --> 00:31:14,630
did Noah's for loop, and we have this
line, so hopefully we should see six

671
00:31:14,630 --> 00:31:16,120
things printed to the console.

672
00:31:16,120 --> 00:31:22,032
So let's go here, let's open up our
console and refresh our page.

673
00:31:22,032 --> 00:31:27,290
>> OK, so it looks like
we saw six indices.

674
00:31:27,290 --> 00:31:28,390
Zero, one, two, three,
four five, yeah.

675
00:31:28,390 --> 00:31:30,486
>> AUDIENCE: How do you get to
that page inside your--

676
00:31:30,486 --> 00:31:32,260
>> JASON HIRSCHHORN: how do I get
to this thing down here?

677
00:31:32,260 --> 00:31:35,830
>> AUDIENCE: No, the Chrome page inside
[INAUDIBLE] appliance.

678
00:31:35,830 --> 00:31:36,892
Can we see that or not?

679
00:31:36,892 --> 00:31:38,220
>> JASON HIRSCHHORN: This Chrome
page right here?

680
00:31:38,220 --> 00:31:38,490
>> AUDIENCE: Yeah.

681
00:31:38,490 --> 00:31:43,180
>> JASON HIRSCHHORN: So just like in P set
eight, I've opened a Chrome window

682
00:31:43,180 --> 00:31:46,410
on my desktop, on my
Macintosh desktop.

683
00:31:46,410 --> 00:31:51,980
And if you notice up here this URL up on
the top left, that matches this IP

684
00:31:51,980 --> 00:31:54,630
address down here.

685
00:31:54,630 --> 00:31:58,000
So to do this, though, the beginning
of the problem set spec walks you

686
00:31:58,000 --> 00:31:59,860
through exactly how to do this.

687
00:31:59,860 --> 00:32:02,650
But I just followed that, and instead
of with the shuttle code, I just did

688
00:32:02,650 --> 00:32:04,070
our own code.

689
00:32:04,070 --> 00:32:05,970
>> The cool thing is we can also
inspect ocean_array.

690
00:32:05,970 --> 00:32:09,530

691
00:32:09,530 --> 00:32:13,080
So it looks like ocean_array is
an array of six objects, and

692
00:32:13,080 --> 00:32:14,570
let's open each one.

693
00:32:14,570 --> 00:32:15,950
Boom!

694
00:32:15,950 --> 00:32:16,580
One.

695
00:32:16,580 --> 00:32:19,920
>> So Kurt, it looks like your
code worked perfectly.

696
00:32:19,920 --> 00:32:23,510
Everything got started in ocean_array.

697
00:32:23,510 --> 00:32:24,995
Because I misspoke earlier.

698
00:32:24,995 --> 00:32:26,570
But yes, awesome job.

699
00:32:26,570 --> 00:32:30,330
The ocean_array is correct, and it looks
like now we see that dolphin is

700
00:32:30,330 --> 00:32:35,400
a number from 0 to 5, so it looked
like an indices in an array.

701
00:32:35,400 --> 00:32:37,510
So given that knowledge, Michael,
what should we do now?

702
00:32:37,510 --> 00:32:43,080

703
00:32:43,080 --> 00:32:43,870
Think out loud.

704
00:32:43,870 --> 00:32:45,600
What is something we want to do?

705
00:32:45,600 --> 00:32:51,260
>> AUDIENCE: We want to get the
JPEG for each dolphin.

706
00:32:51,260 --> 00:32:51,800
>> JASON HIRSCHHORN: OK.

707
00:32:51,800 --> 00:32:53,206
So how can we reference--

708
00:32:53,206 --> 00:32:54,760
how can we get the JPEG?

709
00:32:54,760 --> 00:33:01,172

710
00:33:01,172 --> 00:33:03,726
Where do we start?

711
00:33:03,726 --> 00:33:05,390
Where is everything stored?

712
00:33:05,390 --> 00:33:07,610
>> AUDIENCE: In the ocean_array?

713
00:33:07,610 --> 00:33:08,320
>> JASON HIRSCHHORN: OK.

714
00:33:08,320 --> 00:33:11,450
>> AUDIENCE: So ocean_array, dolphin--

715
00:33:11,450 --> 00:33:16,392

716
00:33:16,392 --> 00:33:19,280
>> JASON HIRSCHHORN: How do we
get something inside--

717
00:33:19,280 --> 00:33:20,860
so this gives us that object.

718
00:33:20,860 --> 00:33:22,770
And we've seen this before
with the struc.

719
00:33:22,770 --> 00:33:26,710
So what kind of notation
do we need to use?

720
00:33:26,710 --> 00:33:28,450
>> AUDIENCE: It would be the dot.

721
00:33:28,450 --> 00:33:29,400
>> JASON HIRSCHHORN: A dot.

722
00:33:29,400 --> 00:33:30,960
And then what field?

723
00:33:30,960 --> 00:33:31,510
>> AUDIENCE: Picture?

724
00:33:31,510 --> 00:33:33,816
Or that's not a field--

725
00:33:33,816 --> 00:33:37,400
>> JASON HIRSCHHORN: What's it
called in dolphins.js?

726
00:33:37,400 --> 00:33:38,270
And see, you can look.

727
00:33:38,270 --> 00:33:38,970
We can just go back here.

728
00:33:38,970 --> 00:33:40,700
We can see ocean_array,
we can explore it.

729
00:33:40,700 --> 00:33:41,380
What's it called?

730
00:33:41,380 --> 00:33:42,287
>> AUDIENCE: Type.

731
00:33:42,287 --> 00:33:43,688
Wait.

732
00:33:43,688 --> 00:33:44,155
Picture?

733
00:33:44,155 --> 00:33:45,560
I said picture.

734
00:33:45,560 --> 00:33:46,370
>> JASON HIRSCHHORN: Picture.

735
00:33:46,370 --> 00:33:47,610
Right.

736
00:33:47,610 --> 00:33:49,510
You didn't sound like you know what
you were talking about, though.

737
00:33:49,510 --> 00:33:50,630
It sounded more like a guess.

738
00:33:50,630 --> 00:33:53,700
So that picture, so that would give
us the URL of the picture.

739
00:33:53,700 --> 00:33:54,720
Jeff, you have a question?

740
00:33:54,720 --> 00:33:57,375
>> AUDIENCE: Yeah, I can't get what
you have on your Chrome

741
00:33:57,375 --> 00:33:59,320
browser on my computer.

742
00:33:59,320 --> 00:34:05,915
I just get an "uncaught reference
error, console is not defined."

743
00:34:05,915 --> 00:34:07,780
>> JASON HIRSCHHORN: You've
set up everything?

744
00:34:07,780 --> 00:34:10,090
>> AUDIENCE: Well, I think I
did everything that you

745
00:34:10,090 --> 00:34:11,800
did on the big screen.

746
00:34:11,800 --> 00:34:13,510
>> JASON HIRSCHHORN: And you
chmodded all the files?

747
00:34:13,510 --> 00:34:16,343
And did you go through
the whole setup?

748
00:34:16,343 --> 00:34:17,600
>> AUDIENCE: I'll try it again.

749
00:34:17,600 --> 00:34:18,300
>> JASON HIRSCHHORN: OK.

750
00:34:18,300 --> 00:34:20,630
I skipped over that a lot at the
beginning, but you need to go through

751
00:34:20,630 --> 00:34:22,199
the whole setup just like at the
beginning of the problem set spec.

752
00:34:22,199 --> 00:34:24,770
Chmod everything and
make sure it's in.

753
00:34:24,770 --> 00:34:26,360
>> AUDIENCE: I will go and
double check it.

754
00:34:26,360 --> 00:34:28,655
I thought I did it, but
I'll double check.

755
00:34:28,655 --> 00:34:30,270
>> JASON HIRSCHHORN: So, this looks
like it'll give us the

756
00:34:30,270 --> 00:34:30,960
string and a picture.

757
00:34:30,960 --> 00:34:31,370
Great.

758
00:34:31,370 --> 00:34:32,760
We have the URL of the picture.

759
00:34:32,760 --> 00:34:35,320
How do we now put it in--

760
00:34:35,320 --> 00:34:38,030
what happens if we write
just this, Michael?

761
00:34:38,030 --> 00:34:40,150
>> AUDIENCE: It just gets the picture.

762
00:34:40,150 --> 00:34:41,420
It doesn't actually display it.

763
00:34:41,420 --> 00:34:42,840
>> JASON HIRSCHHORN: Let's
see what happens.

764
00:34:42,840 --> 00:34:43,514
We'll save that.

765
00:34:43,514 --> 00:34:44,780
We'll run it here.

766
00:34:44,780 --> 00:34:49,460

767
00:34:49,460 --> 00:34:50,510
It looks like we don't get anything.

768
00:34:50,510 --> 00:34:56,179
If I explore this table,
it looks like inside--

769
00:34:56,179 --> 00:34:58,170
yeah, looks like I don't get anything.

770
00:34:58,170 --> 00:34:59,963
>> AUDIENCE: Do we have to--

771
00:34:59,963 --> 00:35:05,225

772
00:35:05,225 --> 00:35:07,270
>> JASON HIRSCHHORN: This is a string,
this code right here.

773
00:35:07,270 --> 00:35:08,615
Where do I want to put this string?

774
00:35:08,615 --> 00:35:11,250

775
00:35:11,250 --> 00:35:16,000
>> AUDIENCE: You want to
put it in the ocean?

776
00:35:16,000 --> 00:35:16,040
>> JASON HIRSCHHORN: OK.

777
00:35:16,040 --> 00:35:19,230
And down here I'm putting a string
called html in the ocean.

778
00:35:19,230 --> 00:35:26,350
>> AUDIENCE: So would it be dollar
sign, ocean, html [INAUDIBLE].

779
00:35:26,350 --> 00:35:27,985
>> JASON HIRSCHHORN: That would
put it straight in there.

780
00:35:27,985 --> 00:35:29,440
But what if I want to add it to--

781
00:35:29,440 --> 00:35:30,740
I'm already creating a string, right?

782
00:35:30,740 --> 00:35:33,740
To put in the ocean, what's
the name of that string?

783
00:35:33,740 --> 00:35:34,610
>> AUDIENCE: HTML.

784
00:35:34,610 --> 00:35:35,250
>> JASON HIRSCHHORN: HTML.

785
00:35:35,250 --> 00:35:36,355
So what do I write next?

786
00:35:36,355 --> 00:35:37,310
>> AUDIENCE: Equals, equals.

787
00:35:37,310 --> 00:35:38,990
Or just equals?

788
00:35:38,990 --> 00:35:41,170
>> JASON HIRSCHHORN: What will
happen if I write equals?

789
00:35:41,170 --> 00:35:45,940

790
00:35:45,940 --> 00:35:49,222
>> AUDIENCE: Won't that set it
equal-- or won't that--

791
00:35:49,222 --> 00:35:51,744

792
00:35:51,744 --> 00:35:53,016
>> AUDIENCE: Assign?

793
00:35:53,016 --> 00:35:55,680
>> JASON HIRSCHHORN: It will assign it,
but what will happen to everything

794
00:35:55,680 --> 00:35:56,565
that was stored in it before?

795
00:35:56,565 --> 00:35:57,570
>> AUDIENCE: It'll get rid of it.

796
00:35:57,570 --> 00:35:58,660
>> JASON HIRSCHHORN: It'll get rid of it.

797
00:35:58,660 --> 00:35:59,993
So how can I add it to the end?

798
00:35:59,993 --> 00:36:02,836

799
00:36:02,836 --> 00:36:04,120
I would just copy the--

800
00:36:04,120 --> 00:36:04,530
>> AUDIENCE: Plus equals.

801
00:36:04,530 --> 00:36:06,260
>> JASON HIRSCHHORN: Plus
equals, perfect.

802
00:36:06,260 --> 00:36:07,120
That's exactly right.

803
00:36:07,120 --> 00:36:08,380
So now let's check out what this does.

804
00:36:08,380 --> 00:36:12,500

805
00:36:12,500 --> 00:36:12,760
Boom!

806
00:36:12,760 --> 00:36:14,580
Oh, my goodness.

807
00:36:14,580 --> 00:36:16,580
That is just a lot of text.

808
00:36:16,580 --> 00:36:17,580
OK.

809
00:36:17,580 --> 00:36:20,640
>> So it looks like we got a lot
of text, but that's great.

810
00:36:20,640 --> 00:36:21,750
You guys have done--

811
00:36:21,750 --> 00:36:23,160
I know this is hard, this is new.

812
00:36:23,160 --> 00:36:24,970
So far the three of you guys
have done fantastic.

813
00:36:24,970 --> 00:36:26,600
>> OK, you're next.

814
00:36:26,600 --> 00:36:27,960
What should we do next?

815
00:36:27,960 --> 00:36:29,830
We obviously don't want it
to play just the string.

816
00:36:29,830 --> 00:36:30,120
Yeah?

817
00:36:30,120 --> 00:36:30,690
>> AUDIENCE: I just have a question.

818
00:36:30,690 --> 00:36:35,410
You know, when you do ocean_array,
dolphin, in the brackets, isn't

819
00:36:35,410 --> 00:36:37,550
dolphin like an associative
array in itself?

820
00:36:37,550 --> 00:36:38,230
>> JASON HIRSCHHORN: I misspoke.

821
00:36:38,230 --> 00:36:41,515
Dolphin's the index.

822
00:36:41,515 --> 00:36:44,280
>> AUDIENCE: but isn't var
dolphin in ocean--

823
00:36:44,280 --> 00:36:49,540
I mean, when you initially load it as
well, var dolphin in dolphins, isn't

824
00:36:49,540 --> 00:36:51,950
that dolphin an associative array?

825
00:36:51,950 --> 00:36:52,970
>> JASON HIRSCHHORN: This dolphin?

826
00:36:52,970 --> 00:36:53,650
>> AUDIENCE: Yeah.

827
00:36:53,650 --> 00:36:54,230
>> JASON HIRSCHHORN: No.

828
00:36:54,230 --> 00:36:56,366
This dolphin is the index.

829
00:36:56,366 --> 00:36:57,950
>> AUDIENCE: OK.

830
00:36:57,950 --> 00:36:59,320
So is there a dolphin variable?

831
00:36:59,320 --> 00:37:02,610
I mean, like dolphin key in
the associative array?

832
00:37:02,610 --> 00:37:04,150
>> JASON HIRSCHHORN: Right here?

833
00:37:04,150 --> 00:37:05,075
Like, dolphin.name?

834
00:37:05,075 --> 00:37:10,440
>> AUDIENCE: Yeah, is there
like dolphin dot--

835
00:37:10,440 --> 00:37:13,090
like isn't dolphin meant
to be each object?

836
00:37:13,090 --> 00:37:15,580
>> AUDIENCE: Yeah, that's
what I thought, too.

837
00:37:15,580 --> 00:37:19,985
>> AUDIENCE: I thought dolphin was like
the associative array in DOLPHINS.

838
00:37:19,985 --> 00:37:22,240
Because there's six associative
arrays in DOLPHINS, right?

839
00:37:22,240 --> 00:37:24,050
>> JASON HIRSCHHORN: Right.

840
00:37:24,050 --> 00:37:26,790
The way we have this written
now, it's not.

841
00:37:26,790 --> 00:37:29,300
>> AUDIENCE: Why is it?

842
00:37:29,300 --> 00:37:36,690
>> JASON HIRSCHHORN: We could do that, and
there's actually a jQuery function

843
00:37:36,690 --> 00:37:39,660
called .each which gives
you each thing.

844
00:37:39,660 --> 00:37:41,670
But this syntax is not--

845
00:37:41,670 --> 00:37:44,130
I misspoke earlier-- this syntax
is not that's index.

846
00:37:44,130 --> 00:37:45,780
This is just giving us the indices.

847
00:37:45,780 --> 00:37:48,490
But you could do dollar sign .each,
which is a jQuery function.

848
00:37:48,490 --> 00:37:51,730
That would give you each
associate array.

849
00:37:51,730 --> 00:37:52,930
So check that out.

850
00:37:52,930 --> 00:37:55,205
But that's what all this code does.

851
00:37:55,205 --> 00:37:59,020
>> AUDIENCE: So this first for loop, I
guess that would iterate six times

852
00:37:59,020 --> 00:37:59,765
because you have six indices.

853
00:37:59,765 --> 00:38:02,550
And then the second for loop,
isn't that iterating the

854
00:38:02,550 --> 00:38:03,880
same amount of times?

855
00:38:03,880 --> 00:38:04,540
>> JASON HIRSCHHORN: Yeah.

856
00:38:04,540 --> 00:38:07,920
>> AUDIENCE: So there's really no-- we
could have written the first for loop

857
00:38:07,920 --> 00:38:09,700
again, and it would have worked.

858
00:38:09,700 --> 00:38:11,265
Like, var dolphin in DOLPHINS?

859
00:38:11,265 --> 00:38:13,400
>> JASON HIRSCHHORN: Yes, but we're
now using an ocean_array.

860
00:38:13,400 --> 00:38:18,010
We've moved everything into the
ocean_array because say we ever want

861
00:38:18,010 --> 00:38:23,970
to change what's in dolphins.js, or if
we want to manipulate ocean_array

862
00:38:23,970 --> 00:38:27,140
later on, we don't want to manipulate
dolphins, the variable.

863
00:38:27,140 --> 00:38:29,940
We want to manipulate a copy of it,
because if we want to take something

864
00:38:29,940 --> 00:38:31,740
out, this way we're just
going to be safe.

865
00:38:31,740 --> 00:38:32,820
Does that make sense.

866
00:38:32,820 --> 00:38:33,085
>> AUDIENCE: Yeah.

867
00:38:33,085 --> 00:38:34,390
>> JASON HIRSCHHORN: OK.

868
00:38:34,390 --> 00:38:39,830
So, Carlos, how do I take this string
and make it an image instead, and get

869
00:38:39,830 --> 00:38:40,860
the actual image?

870
00:38:40,860 --> 00:38:42,260
You've see this code before.

871
00:38:42,260 --> 00:38:45,541
How I do include an image on a page?

872
00:38:45,541 --> 00:38:51,400
>> AUDIENCE: Is it the thing we did about
that HTML plus equals te call dash

873
00:38:51,400 --> 00:38:53,344
width, she deleted it?

874
00:38:53,344 --> 00:38:56,068
>> JASON HIRSCHHORN: This
stuff right here?

875
00:38:56,068 --> 00:38:57,036
>> AUDIENCE: Yeah.

876
00:38:57,036 --> 00:38:57,520
Kind of.

877
00:38:57,520 --> 00:38:58,900
>> JASON HIRSCHHORN: don't
worry about that.

878
00:38:58,900 --> 00:39:00,520
That just starts the HTML string.

879
00:39:00,520 --> 00:39:03,980
If I want to include an image in my
HTML web page, what tag do I use?

880
00:39:03,980 --> 00:39:06,210
>> AUDIENCE: I don't remember.

881
00:39:06,210 --> 00:39:07,050
>> JASON HIRSCHHORN: OK.

882
00:39:07,050 --> 00:39:08,343
Avie, help him out?

883
00:39:08,343 --> 00:39:10,985
>> AUDIENCE: Would it be anchor,
href, and then you link it?

884
00:39:10,985 --> 00:39:12,790
>> JASON HIRSCHHORN: So A as in Anchor.

885
00:39:12,790 --> 00:39:14,790
>> AUDIENCE: You don't need to
link it, though, right?

886
00:39:14,790 --> 00:39:17,370
>> JASON HIRSCHHORN: What if I just
want to create an image?

887
00:39:17,370 --> 00:39:24,640
>> AUDIENCE: It would be img, and then
src equals whatever the string is?

888
00:39:24,640 --> 00:39:27,400
>> JASON HIRSCHHORN: OK, so
that's right, img.

889
00:39:27,400 --> 00:39:28,635
Carlos, you're going to
take it from here.

890
00:39:28,635 --> 00:39:32,760
img stands for "image," and src stands
for "source." and you need to give it

891
00:39:32,760 --> 00:39:35,200
a URL or some--

892
00:39:35,200 --> 00:39:35,940
not even a URL.

893
00:39:35,940 --> 00:39:39,040
Some location where that
image is stored.

894
00:39:39,040 --> 00:39:46,490
So I know that that will get me an
image, so now how do I put this all

895
00:39:46,490 --> 00:39:49,310
together, thought?

896
00:39:49,310 --> 00:39:51,920
I have some syntax I need to fix.

897
00:39:51,920 --> 00:39:54,632
What exactly do I need
to type, Carlos?

898
00:39:54,632 --> 00:39:56,862
>> AUDIENCE: I don't get what
you're trying to do.

899
00:39:56,862 --> 00:40:00,185
So you're trying to put all
the images into a table?

900
00:40:00,185 --> 00:40:04,790
>> JASON HIRSCHHORN: We want to display
all the images in the page.

901
00:40:04,790 --> 00:40:12,000
And we saw how this line of code right
here added strings to our HTML string

902
00:40:12,000 --> 00:40:13,275
and printed them out like this.

903
00:40:13,275 --> 00:40:17,990

904
00:40:17,990 --> 00:40:21,830
We instead want to display images.

905
00:40:21,830 --> 00:40:25,780
And we realized, Maru, told us
that this line of code--

906
00:40:25,780 --> 00:40:26,750
so let's look right here.

907
00:40:26,750 --> 00:40:31,745
If we went and explored, we'll
edit this as HTML.

908
00:40:31,745 --> 00:40:35,110

909
00:40:35,110 --> 00:40:54,270
Maru, said, if we do this kind
of syntax, we get an image.

910
00:40:54,270 --> 00:40:57,810

911
00:40:57,810 --> 00:40:59,400
So does that make sense?

912
00:40:59,400 --> 00:41:02,650

913
00:41:02,650 --> 00:41:05,630
>> This is the type of string that we
really want to put inside the ocean

914
00:41:05,630 --> 00:41:09,080
dive, not simply the text itself.

915
00:41:09,080 --> 00:41:12,080
>> AUDIENCE: [INAUDIBLE]

916
00:41:12,080 --> 00:41:12,940
>> JASON HIRSCHHORN: Sorry?

917
00:41:12,940 --> 00:41:16,240
>> AUDIENCE: Can't you just copy
that one that Kianna gave,

918
00:41:16,240 --> 00:41:17,810
and put it into that--

919
00:41:17,810 --> 00:41:19,570
>> JASON HIRSCHHORN: Copy this,
and put this right here?

920
00:41:19,570 --> 00:41:20,820
>> AUDIENCE: Yeah.

921
00:41:20,820 --> 00:41:23,354

922
00:41:23,354 --> 00:41:25,813
>> JASON HIRSCHHORN: That's close, but
there's one problem with this, and

923
00:41:25,813 --> 00:41:27,063
what's that?

924
00:41:27,063 --> 00:41:30,920

925
00:41:30,920 --> 00:41:36,370
HTML is a string, and we need
to add strings to it.

926
00:41:36,370 --> 00:41:37,855
>> AUDIENCE: So then you put it-- nah.

927
00:41:37,855 --> 00:41:40,860
>> JASON HIRSCHHORN: And we have three--
this right here is not a string.

928
00:41:40,860 --> 00:41:42,921
How do we make it a string?

929
00:41:42,921 --> 00:41:45,474
How do you always make
something a string?

930
00:41:45,474 --> 00:41:47,242
>> AUDIENCE: I don't know.

931
00:41:47,242 --> 00:41:49,570
>> JASON HIRSCHHORN: If I have text,
how do I make it a string?

932
00:41:49,570 --> 00:41:51,615
Like up here on this line right here?

933
00:41:51,615 --> 00:41:54,160
>> AUDIENCE: Put it in a table?

934
00:41:54,160 --> 00:41:56,450
>> JASON HIRSCHHORN: What about this?

935
00:41:56,450 --> 00:41:57,290
>> AUDIENCE: Quote.

936
00:41:57,290 --> 00:41:58,670
>> JASON HIRSCHHORN: Double
quotes, right?

937
00:41:58,670 --> 00:42:00,860
Double quotes makes something
a string.

938
00:42:00,860 --> 00:42:03,720
So that makes that a string,
and this is a string.

939
00:42:03,720 --> 00:42:05,990
How do I put two strings
together in JavaScript?

940
00:42:05,990 --> 00:42:06,842
>> AUDIENCE: Dot.

941
00:42:06,842 --> 00:42:07,960
>> JASON HIRSCHHORN: Not dot.

942
00:42:07,960 --> 00:42:10,462
That's PHP.

943
00:42:10,462 --> 00:42:11,358
>> AUDIENCE: Plus.

944
00:42:11,358 --> 00:42:13,200
>> JASON HIRSCHHORN: Plus, exactly right.

945
00:42:13,200 --> 00:42:15,900
So plus, and then what do you
propose I do over here?

946
00:42:15,900 --> 00:42:20,900

947
00:42:20,900 --> 00:42:22,400
>> AUDIENCE: Another quote.

948
00:42:22,400 --> 00:42:24,100
>> JASON HIRSCHHORN: Another quote, OK.

949
00:42:24,100 --> 00:42:32,300

950
00:42:32,300 --> 00:42:34,322
How do I end a string?

951
00:42:34,322 --> 00:42:35,660
>> AUDIENCE: Another quote.

952
00:42:35,660 --> 00:42:36,180
>> JASON HIRSCHHORN: Another quote.

953
00:42:36,180 --> 00:42:38,740
And how do I put this string
together with this string?

954
00:42:38,740 --> 00:42:39,810
A plus.

955
00:42:39,810 --> 00:42:40,630
That's exactly right.

956
00:42:40,630 --> 00:42:41,540
You just did this for us.

957
00:42:41,540 --> 00:42:42,590
This is perfect.

958
00:42:42,590 --> 00:42:46,320
>> So now let's render this.

959
00:42:46,320 --> 00:42:49,050
And look, we've got a whole
bunch of images.

960
00:42:49,050 --> 00:42:49,860
Oh, my God.

961
00:42:49,860 --> 00:42:50,770
Those are scary.

962
00:42:50,770 --> 00:42:51,720
We're going to explore
them in a second.

963
00:42:51,720 --> 00:42:52,010
Yeah, Noah?

964
00:42:52,010 --> 00:42:54,520
>> AUDIENCE: I know it doesn't really
matter, but should you close your

965
00:42:54,520 --> 00:42:56,005
elements with image tag?

966
00:42:56,005 --> 00:42:58,250
>> JASON HIRSCHHORN: We could, if
we wanted, close our image

967
00:42:58,250 --> 00:43:02,284
tag just like that.

968
00:43:02,284 --> 00:43:04,719
Let's render that.

969
00:43:04,719 --> 00:43:06,330
On, no, we can't do that.

970
00:43:06,330 --> 00:43:07,580
>> AUDIENCE: Oh, I broke it.

971
00:43:07,580 --> 00:43:09,090
>> JASON HIRSCHHORN: I think this
is validation, though.

972
00:43:09,090 --> 00:43:12,380
I don't think you need
the closing slash.

973
00:43:12,380 --> 00:43:13,490
OK, this is great.

974
00:43:13,490 --> 00:43:14,150
Carlos, thank you.

975
00:43:14,150 --> 00:43:16,270
So far the four of you guys
have done an awesome job.

976
00:43:16,270 --> 00:43:19,650
>> Of course, as you can see, we're
creating some type of table bevel.

977
00:43:19,650 --> 00:43:21,490
And I want these things
to be in a table.

978
00:43:21,490 --> 00:43:24,970
So how do I put these
things in a table?

979
00:43:24,970 --> 00:43:27,020
I clearly need some more HTML.

980
00:43:27,020 --> 00:43:28,680
Assam, what kind of HTML am I missing?

981
00:43:28,680 --> 00:43:32,388

982
00:43:32,388 --> 00:43:33,370
>> AUDIENCE: What do you
want to do, sorry?

983
00:43:33,370 --> 00:43:37,430
>> JASON HIRSCHHORN: I want to put all
these images in a table, so each image

984
00:43:37,430 --> 00:43:41,020
should be in one column of the table.

985
00:43:41,020 --> 00:43:42,480
How do I say this is one column?

986
00:43:42,480 --> 00:43:45,090

987
00:43:45,090 --> 00:43:46,010
You've seen this code before.

988
00:43:46,010 --> 00:43:46,910
This is in P set seven.

989
00:43:46,910 --> 00:43:48,870
>> AUDIENCE: I remember one was tr?

990
00:43:48,870 --> 00:43:50,120
>> JASON HIRSCHHORN: tr is for row.

991
00:43:50,120 --> 00:43:53,904

992
00:43:53,904 --> 00:43:56,430
>> AUDIENCE: I don't know it off
my heart, but I could check.

993
00:43:56,430 --> 00:43:57,140
>> JASON HIRSCHHORN: Does
somebody remember?

994
00:43:57,140 --> 00:43:57,870
>> AUDIENCE: td?

995
00:43:57,870 --> 00:44:01,250
>> JASON HIRSCHHORN: td, exactly right.
td puts it as a column.

996
00:44:01,250 --> 00:44:03,150
So if I put the td there, Assam,
what do I need put?

997
00:44:03,150 --> 00:44:04,600
What else do I need to add?

998
00:44:04,600 --> 00:44:05,620
>> AUDIENCE: You have to close it?

999
00:44:05,620 --> 00:44:06,240
>> JASON HIRSCHHORN: Exactly.

1000
00:44:06,240 --> 00:44:07,490
Where does that go?

1001
00:44:07,490 --> 00:44:09,747

1002
00:44:09,747 --> 00:44:11,090
>> AUDIENCE: Right there?

1003
00:44:11,090 --> 00:44:11,970
>> JASON HIRSCHHORN: Right here?

1004
00:44:11,970 --> 00:44:13,850
>> AUDIENCE: I think so.

1005
00:44:13,850 --> 00:44:17,104

1006
00:44:17,104 --> 00:44:18,600
>> JASON HIRSCHHORN: What's this
closing right here?

1007
00:44:18,600 --> 00:44:19,340
What's this for?

1008
00:44:19,340 --> 00:44:20,320
That blue thing?

1009
00:44:20,320 --> 00:44:21,280
>> AUDIENCE: That's for the image.

1010
00:44:21,280 --> 00:44:22,100
It should go after, I think.

1011
00:44:22,100 --> 00:44:24,770
>> JASON HIRSCHHORN: OK, exactly right.

1012
00:44:24,770 --> 00:44:26,020
So let's see what this did.

1013
00:44:26,020 --> 00:44:29,110

1014
00:44:29,110 --> 00:44:30,960
Oh, that's awkward.

1015
00:44:30,960 --> 00:44:35,780

1016
00:44:35,780 --> 00:44:39,470
Let's open up ocean, table,
table body, tr.

1017
00:44:39,470 --> 00:44:44,410
So we have a ton, but I
don't see the images.

1018
00:44:44,410 --> 00:44:45,110
That's weird.

1019
00:44:45,110 --> 00:44:48,360
It looks like it built it but
didn't show me the images.

1020
00:44:48,360 --> 00:44:50,425
Any ideas why that might be the case?

1021
00:44:50,425 --> 00:44:56,910

1022
00:44:56,910 --> 00:44:59,140
Any thoughts?

1023
00:44:59,140 --> 00:45:01,550
>> AUDIENCE: If you scroll
down, you'll see them.

1024
00:45:01,550 --> 00:45:02,430
>> JASON HIRSCHHORN: Boom!

1025
00:45:02,430 --> 00:45:06,130
So they're there, but that's weird that
they're all the way down there.

1026
00:45:06,130 --> 00:45:07,670
>> AUDIENCE: They're also all in a row.

1027
00:45:07,670 --> 00:45:11,280
>> JASON HIRSCHHORN: And they're all in a
row, and they're all different sizes.

1028
00:45:11,280 --> 00:45:14,440
So Assam, give me one more line of code
if I can make every image the

1029
00:45:14,440 --> 00:45:17,420
same size, and it looks like I've
already indicated the size I

1030
00:45:17,420 --> 00:45:18,440
want them to be.

1031
00:45:18,440 --> 00:45:20,025
How can I make each image
the same size?

1032
00:45:20,025 --> 00:45:22,978

1033
00:45:22,978 --> 00:45:24,540
Give a wild guess.

1034
00:45:24,540 --> 00:45:35,290

1035
00:45:35,290 --> 00:45:36,595
>> What about this line of code?

1036
00:45:36,595 --> 00:45:41,345

1037
00:45:41,345 --> 00:45:43,650
>> AUDIENCE: Can you make
Like a constant?

1038
00:45:43,650 --> 00:45:46,740
>> JASON HIRSCHHORN: Or where is another
place I could put this line of code,

1039
00:45:46,740 --> 00:45:47,740
if I just copy it?

1040
00:45:47,740 --> 00:45:49,280
>> AUDIENCE: All the way down
on that same line?

1041
00:45:49,280 --> 00:45:52,000
>> JASON HIRSCHHORN: OK, let's put
it in here, exactly right.

1042
00:45:52,000 --> 00:45:54,320
And now let's see what happens.

1043
00:45:54,320 --> 00:45:56,030
Oh, my goodness!

1044
00:45:56,030 --> 00:46:00,290
Now it looks like we're starting to get
something, and it looks like they

1045
00:46:00,290 --> 00:46:06,950
all sort of fit in the table that
we've constructed in each td.

1046
00:46:06,950 --> 00:46:10,195
>> Also, Assam, let's say I like their
heights to be a little bit more--

1047
00:46:10,195 --> 00:46:12,700

1048
00:46:12,700 --> 00:46:19,260
the heights thing is throwing me off, so
what should I set at their height?

1049
00:46:19,260 --> 00:46:20,210
Pick any number.

1050
00:46:20,210 --> 00:46:20,860
>> AUDIENCE: 200?

1051
00:46:20,860 --> 00:46:21,000
>> JASON HIRSCHHORN: 200.

1052
00:46:21,000 --> 00:46:22,380
I'm going to pick 100.

1053
00:46:22,380 --> 00:46:22,940
That's great.

1054
00:46:22,940 --> 00:46:25,540
For really like 200.

1055
00:46:25,540 --> 00:46:26,140
There we go!

1056
00:46:26,140 --> 00:46:31,830
OK, now this is starting to look a bit
better and a bit more organized.

1057
00:46:31,830 --> 00:46:35,020

1058
00:46:35,020 --> 00:46:38,170
>> Any other thoughts for what we need to
do to store pictures of dolphins?

1059
00:46:38,170 --> 00:46:38,530
Yeah?

1060
00:46:38,530 --> 00:46:42,810
>> AUDIENCE: Are the quotes, or the single
quotes, around the values for

1061
00:46:42,810 --> 00:46:45,015
source, height, width,
are those optional?

1062
00:46:45,015 --> 00:46:46,710
>> JASON HIRSCHHORN: Where
are single quotes?

1063
00:46:46,710 --> 00:46:50,340
>> AUDIENCE: Like in some of the examples,
you'd have like height

1064
00:46:50,340 --> 00:46:53,050
equals quote "150." Is
that not necessary.

1065
00:46:53,050 --> 00:46:54,510
>> JASON HIRSCHHORN: So let's
look down here.

1066
00:46:54,510 --> 00:47:04,120
If we click on ocean, go into table,
you'll notice down here it actually

1067
00:47:04,120 --> 00:47:05,540
added those quotes for me.

1068
00:47:05,540 --> 00:47:08,310
>> AUDIENCE: OK.

1069
00:47:08,310 --> 00:47:12,080
>> JASON HIRSCHHORN: And so I realize what
we're doing seems painfully slow.

1070
00:47:12,080 --> 00:47:14,950
We've only written three lines of code
so far, or four lines of code, but

1071
00:47:14,950 --> 00:47:18,130
this is in fact the process that
I go through every time I want

1072
00:47:18,130 --> 00:47:18,990
to make this website.

1073
00:47:18,990 --> 00:47:22,800
Line by line, using the console down
here, exploring things and figuring

1074
00:47:22,800 --> 00:47:24,320
out step-by-step what I want to do.

1075
00:47:24,320 --> 00:47:28,580
So hopefully, this mimics for you guys
in a good, pedagogical way what you

1076
00:47:28,580 --> 00:47:31,055
will actually be doing when
you create your website.

1077
00:47:31,055 --> 00:47:34,260

1078
00:47:34,260 --> 00:47:35,410
>> Let's move on.

1079
00:47:35,410 --> 00:47:36,500
We've created these things.

1080
00:47:36,500 --> 00:47:37,240
I'm going to actually--

1081
00:47:37,240 --> 00:47:40,950
Avie, I have a big question for you.

1082
00:47:40,950 --> 00:47:43,350
I don't know, we'll move on.

1083
00:47:43,350 --> 00:47:48,950
Let's go to "train dolphin when its
picture is clicked." How do you

1084
00:47:48,950 --> 00:47:51,288
propose I write that line of a code?

1085
00:47:51,288 --> 00:47:54,235
>> AUDIENCE: There is a function
called "train."

1086
00:47:54,235 --> 00:47:57,030
>> JASON HIRSCHHORN: There's a function
called "train," exactly right.

1087
00:47:57,030 --> 00:47:59,520
>> AUDIENCE: It expects an index.

1088
00:47:59,520 --> 00:48:02,630
>> JASON HIRSCHHORN: Train expects
an index, so, OK.

1089
00:48:02,630 --> 00:48:05,020
Avie, this is exactly the reasoning
that I love to see.

1090
00:48:05,020 --> 00:48:06,320
Train expects an index.

1091
00:48:06,320 --> 00:48:08,230
>> AUDIENCE: So you're going
to have a for loop.

1092
00:48:08,230 --> 00:48:11,540
>> JASON HIRSCHHORN: Well, I want to do
when a picture is clicked, so Avie,

1093
00:48:11,540 --> 00:48:15,140
how do I monitor when a
picture is clicked?

1094
00:48:15,140 --> 00:48:16,380
There's a couple ways to do that.

1095
00:48:16,380 --> 00:48:20,330
This is the power of JavaScript and
jQuery, but also the toughest part.

1096
00:48:20,330 --> 00:48:22,950
>> AUDIENCE: If parenthesis, not.

1097
00:48:22,950 --> 00:48:27,390
Or if parenthesis event, or something
relatively simple?

1098
00:48:27,390 --> 00:48:30,850
>> JASON HIRSCHHORN: So we saw a couple
ways to do this in lecture.

1099
00:48:30,850 --> 00:48:36,860
One thing was to, down here, you could
do something like you could create a

1100
00:48:36,860 --> 00:48:39,340
function like on click, or do
something like on click.

1101
00:48:39,340 --> 00:48:41,620
Everybody remember seeing
something like that?

1102
00:48:41,620 --> 00:48:46,630
You do it inside the HTML tag.

1103
00:48:46,630 --> 00:48:47,910
I see some blank faces.

1104
00:48:47,910 --> 00:48:49,910
Some people are like, what
is he talking about?

1105
00:48:49,910 --> 00:48:52,150
>> That's fine because I think that's the
more complicated way to do it.

1106
00:48:52,150 --> 00:48:55,110
We're going to do a much easier
way using jQuery.

1107
00:48:55,110 --> 00:48:55,560
So, Avie?

1108
00:48:55,560 --> 00:48:57,350
>> AUDIENCE: Hm?

1109
00:48:57,350 --> 00:49:00,280
>> JASON HIRSCHHORN: If I want to do
something jQuery, I obviously start,

1110
00:49:00,280 --> 00:49:05,090
like before, with this dollar sign, open
paren, close paren, and double

1111
00:49:05,090 --> 00:49:06,120
quotes in here.

1112
00:49:06,120 --> 00:49:07,660
Now we know I need a selector in here.

1113
00:49:07,660 --> 00:49:11,720
What selector do you propose would apply
to every single image or every

1114
00:49:11,720 --> 00:49:14,680
single picture?

1115
00:49:14,680 --> 00:49:16,160
>> AUDIENCE: Image?

1116
00:49:16,160 --> 00:49:17,840
>> JASON HIRSCHHORN: That's
exactly right.

1117
00:49:17,840 --> 00:49:20,240
That will apply to every single image.

1118
00:49:20,240 --> 00:49:20,940
Gets all of them.

1119
00:49:20,940 --> 00:49:24,005
It's not an ID, it's not a class, it's
a type of tag, and this is going to

1120
00:49:24,005 --> 00:49:24,970
get every single one.

1121
00:49:24,970 --> 00:49:27,610
>> And now I'm going to tell you this
for now, and you can look up more

1122
00:49:27,610 --> 00:49:33,540
documentation on it later, but this
thing called "on" deals with events.

1123
00:49:33,540 --> 00:49:37,370
So what you get to do now, and which is
super powerful, is say what type of

1124
00:49:37,370 --> 00:49:40,260
event you're looking for and what
you want to do when you

1125
00:49:40,260 --> 00:49:41,160
receive that event.

1126
00:49:41,160 --> 00:49:43,155
So I'm going to give you a little
bit more code, Avie, then

1127
00:49:43,155 --> 00:49:44,200
you've got to go, OK?

1128
00:49:44,200 --> 00:49:46,700
>> AUDIENCE: OK.

1129
00:49:46,700 --> 00:49:50,030
>> AUDIENCE: On-- we're going to say
"click" in this case, which you'll

1130
00:49:50,030 --> 00:49:50,750
generally use.

1131
00:49:50,750 --> 00:49:54,460
So on click, and then we're going to
pass it an anonymous function.

1132
00:49:54,460 --> 00:50:01,840

1133
00:50:01,840 --> 00:50:04,100
And this syntax you're going to see
a lot, and hopefully you will

1134
00:50:04,100 --> 00:50:05,210
be writing a lot.

1135
00:50:05,210 --> 00:50:10,350
What this does is, again, on the click
of something called image, whatever,

1136
00:50:10,350 --> 00:50:14,960
anything called image, we are going
to run this anonymous function.

1137
00:50:14,960 --> 00:50:16,260
>> I'm not giving it a name.

1138
00:50:16,260 --> 00:50:18,180
I'm not passing it any arguments.

1139
00:50:18,180 --> 00:50:21,870
I'm just, like, creating here's a
function, and here's what the code

1140
00:50:21,870 --> 00:50:22,750
you're going to do.

1141
00:50:22,750 --> 00:50:24,310
That's with this syntax means.

1142
00:50:24,310 --> 00:50:27,500
And also, as you'll notice, it looks
very similar to this up here that we

1143
00:50:27,500 --> 00:50:29,310
wrote before.

1144
00:50:29,310 --> 00:50:30,400
>> OK, Avie.

1145
00:50:30,400 --> 00:50:34,720
So you want to call train on index.

1146
00:50:34,720 --> 00:50:35,690
Is that what you want to do?

1147
00:50:35,690 --> 00:50:36,400
>> AUDIENCE: Yes.

1148
00:50:36,400 --> 00:50:36,800
>> JASON HIRSCHHORN: That is?

1149
00:50:36,800 --> 00:50:37,840
OK.

1150
00:50:37,840 --> 00:50:38,610
Let's see what happens.

1151
00:50:38,610 --> 00:50:39,420
>> AUDIENCE: Wait, though.

1152
00:50:39,420 --> 00:50:41,240
Index isn't a variable right now.

1153
00:50:41,240 --> 00:50:42,520
>> JASON HIRSCHHORN: So index isn't
a variable right now.

1154
00:50:42,520 --> 00:50:43,780
I don't know where you got it from.

1155
00:50:43,780 --> 00:50:45,030
>> AUDIENCE: [INAUDIBLE].

1156
00:50:45,030 --> 00:50:47,440

1157
00:50:47,440 --> 00:50:51,280
So do you need to first figure out
which dolphin got clicked?

1158
00:50:51,280 --> 00:50:52,440
>> JASON HIRSCHHORN: Excellent.

1159
00:50:52,440 --> 00:50:55,260
You need to figure out which
dolphin got clicked.

1160
00:50:55,260 --> 00:50:56,840
This is a wild shot in the dark.

1161
00:50:56,840 --> 00:50:59,355
Anybody have any idea how I can figure
out what dolphin got clicked?

1162
00:50:59,355 --> 00:51:03,280
If not, I'll just give it to you,
because this is pretty crazy.

1163
00:51:03,280 --> 00:51:04,350
OK.

1164
00:51:04,350 --> 00:51:06,670
So let's print out via console.log.

1165
00:51:06,670 --> 00:51:17,440

1166
00:51:17,440 --> 00:51:19,550
>> This thing.

1167
00:51:19,550 --> 00:51:25,830
So, dollar sign, open paren,
this close paren.

1168
00:51:25,830 --> 00:51:28,110
So when I click on this image, I'm going
to print this to the console,

1169
00:51:28,110 --> 00:51:29,030
and let's see what happens.

1170
00:51:29,030 --> 00:51:30,820
Let's go back here.

1171
00:51:30,820 --> 00:51:31,640
Let's go to console.

1172
00:51:31,640 --> 00:51:33,950
No errors, thank goodness.

1173
00:51:33,950 --> 00:51:35,420
>> OK.

1174
00:51:35,420 --> 00:51:36,040
I clicked.

1175
00:51:36,040 --> 00:51:37,660
Let me do that again.

1176
00:51:37,660 --> 00:51:43,290
I clicked this first image, and this
got printed to the console,

1177
00:51:43,290 --> 00:51:44,200
this line of things.

1178
00:51:44,200 --> 00:51:47,230
I'm going to be using the
word "this" a lot.

1179
00:51:47,230 --> 00:51:52,000
This thing right here, this, is very
special, and it's doing exactly what

1180
00:51:52,000 --> 00:51:53,340
Avie wants it to do.

1181
00:51:53,340 --> 00:51:57,640
It's getting whatever was
clicked on or whatever.

1182
00:51:57,640 --> 00:52:01,850
Because again, this selector happens
to deal with many things, we don't

1183
00:52:01,850 --> 00:52:05,310
necessarily know which thing we're
talking about, so we want to figure

1184
00:52:05,310 --> 00:52:08,300
out which thing we're talking
about via this syntax.

1185
00:52:08,300 --> 00:52:12,320
In this case right here, hashtag ocean,
we always know what thing we're

1186
00:52:12,320 --> 00:52:14,740
going to be talking about, so
we never really needed this

1187
00:52:14,740 --> 00:52:15,880
inside a hashtag ocean.

1188
00:52:15,880 --> 00:52:18,430
It's always the ocean, that div.

1189
00:52:18,430 --> 00:52:21,770
It's an ID, only one possible thing.

1190
00:52:21,770 --> 00:52:25,840
>> But in this case, this applies to a lot
of images, in fact, six images,

1191
00:52:25,840 --> 00:52:28,180
and so we want to know what particular
image was clicked on.

1192
00:52:28,180 --> 00:52:33,022
And it looks like this is the
type of information we get.

1193
00:52:33,022 --> 00:52:41,540
We get it looks like some large
string, and we get all of this

1194
00:52:41,540 --> 00:52:43,890
information with this.

1195
00:52:43,890 --> 00:52:46,550
We get tons and tons
and tons of stuff.

1196
00:52:46,550 --> 00:52:48,020
jQuery is super powerful.

1197
00:52:48,020 --> 00:52:53,890
It's giving us a ton of information
about this particular HTML element.

1198
00:52:53,890 --> 00:52:58,484
Avie, what do we want to know
about this HTML element?

1199
00:52:58,484 --> 00:53:00,306
>> AUDIENCE: Something like an ID.

1200
00:53:00,306 --> 00:53:01,190
>> JASON HIRSCHHORN: An ID.

1201
00:53:01,190 --> 00:53:04,375
Well, we have a source,
a width, and a height.

1202
00:53:04,375 --> 00:53:06,246
>> AUDIENCE: We can use a source.

1203
00:53:06,246 --> 00:53:07,190
>> JASON HIRSCHHORN: We
can use the source.

1204
00:53:07,190 --> 00:53:09,140
That'll give us a string,
a URL string.

1205
00:53:09,140 --> 00:53:10,330
What are we going to do with
that once we have that?

1206
00:53:10,330 --> 00:53:11,800
How do we get back to our
index in ocean_array?

1207
00:53:11,800 --> 00:53:14,725
>> AUDIENCE: We can compare
it to the other.

1208
00:53:14,725 --> 00:53:16,910
>> JASON HIRSCHHORN: So we could
loop through each.

1209
00:53:16,910 --> 00:53:21,350
Now we could loop again
and then compare this.

1210
00:53:21,350 --> 00:53:23,860
Envision what would be a simpler way,
if you could just imagine one?

1211
00:53:23,860 --> 00:53:25,564
>> AUDIENCE: Not having to loop.

1212
00:53:25,564 --> 00:53:26,930
>> JASON HIRSCHHORN: Not having to loop.

1213
00:53:26,930 --> 00:53:29,210
>> AUDIENCE: Just figuring out
dolphin, [INAUDIBLE].

1214
00:53:29,210 --> 00:53:31,430
>> JASON HIRSCHHORN: Figuring
out what dolphin.

1215
00:53:31,430 --> 00:53:31,940
OK.

1216
00:53:31,940 --> 00:53:34,780
So let's save that information
in this image tag.

1217
00:53:34,780 --> 00:53:37,370
And again, right now, part of this stuff
is just magical because I might

1218
00:53:37,370 --> 00:53:39,950
be showing you this for the first time,
but hopefully these are things

1219
00:53:39,950 --> 00:53:41,140
you're going to be doing.

1220
00:53:41,140 --> 00:53:43,440
So this is something
magical you can do.

1221
00:53:43,440 --> 00:53:46,500
You can save some extra metadata
in an element.

1222
00:53:46,500 --> 00:53:48,080
It won't show up, it won't
affect anything.

1223
00:53:48,080 --> 00:53:49,370
You can just save it there.

1224
00:53:49,370 --> 00:53:54,170
And I propose we save the
index with each image.

1225
00:53:54,170 --> 00:54:03,020
>> So the way you do that is you create
an attribute called data dash, and

1226
00:54:03,020 --> 00:54:04,750
then whatever name you
want to give it.

1227
00:54:04,750 --> 00:54:08,940
Data dash is a special thing that is
given to you, and it says this is

1228
00:54:08,940 --> 00:54:10,990
something the user is going to create.

1229
00:54:10,990 --> 00:54:17,380
So we are creating this thing called
index, this key called index.

1230
00:54:17,380 --> 00:54:21,530
>> And inside of it, we are going to put
not just one every time, but what do

1231
00:54:21,530 --> 00:54:22,710
we put inside of it, Avie?

1232
00:54:22,710 --> 00:54:23,960
What goes right here?

1233
00:54:23,960 --> 00:54:28,002

1234
00:54:28,002 --> 00:54:29,954
>> AUDIENCE: Dolphin.

1235
00:54:29,954 --> 00:54:31,140
>> JASON HIRSCHHORN: Dolphin.

1236
00:54:31,140 --> 00:54:33,370
That is not that word.

1237
00:54:33,370 --> 00:54:34,920
Dolphin.

1238
00:54:34,920 --> 00:54:38,300
And again, we already printed dolphin
earlier, that 0, 1, 2, 3, 4, 5, and

1239
00:54:38,300 --> 00:54:39,590
we're saving that with the image.

1240
00:54:39,590 --> 00:54:42,250

1241
00:54:42,250 --> 00:54:48,580
>> So now, if I do-- and again,
we save that metadata.

1242
00:54:48,580 --> 00:54:50,070
How do you access that metadata?

1243
00:54:50,070 --> 00:54:52,690
It's with a function just called "data."
And you need to pass it one

1244
00:54:52,690 --> 00:54:57,960
and only one argument, which
is the name of the thing.

1245
00:54:57,960 --> 00:55:00,150
So I'm going to print this out,
and then I'll take questions.

1246
00:55:00,150 --> 00:55:04,800
But essentially, I'm saying give me this
object that was clicked on, look

1247
00:55:04,800 --> 00:55:07,790
at all of its data attributes,
and the one called "indexed,"

1248
00:55:07,790 --> 00:55:09,080
give me that value.

1249
00:55:09,080 --> 00:55:11,580
>> And let's see what happens when
we refresh this page.

1250
00:55:11,580 --> 00:55:14,910

1251
00:55:14,910 --> 00:55:17,580
Exactly what we expected.

1252
00:55:17,580 --> 00:55:18,910
Again, that was pretty magical.

1253
00:55:18,910 --> 00:55:20,680
We just did a lot right there.

1254
00:55:20,680 --> 00:55:22,360
Who has any questions about that?

1255
00:55:22,360 --> 00:55:22,560
Yeah?

1256
00:55:22,560 --> 00:55:24,540
>> AUDIENCE: I just have a question
about your live code.

1257
00:55:24,540 --> 00:55:27,590
You use like a single quote, double
quote, like right there.

1258
00:55:27,590 --> 00:55:28,534
>> JASON HIRSCHHORN: Right here.

1259
00:55:28,534 --> 00:55:29,006
>> AUDIENCE: Yeah.

1260
00:55:29,006 --> 00:55:33,300
Is there a reason why you do the
single quote, double quote?

1261
00:55:33,300 --> 00:55:35,190
>> JASON HIRSCHHORN: There's a reason,
and this goes back to what Marcus

1262
00:55:35,190 --> 00:55:35,830
asked earlier.

1263
00:55:35,830 --> 00:55:38,940
In this line, I was being a
bit better at my coding.

1264
00:55:38,940 --> 00:55:43,810
I want this, and this is what I honestly
should have done all of the

1265
00:55:43,810 --> 00:55:46,240
time, for width and height
in particular.

1266
00:55:46,240 --> 00:55:49,090
Let's look down here.

1267
00:55:49,090 --> 00:55:50,280
You'll see right here,
can you see that?

1268
00:55:50,280 --> 00:55:54,620
I know it's kind of small, but data
dash index is in double quotes.

1269
00:55:54,620 --> 00:55:56,240
Those things always need
to be in double quotes.

1270
00:55:56,240 --> 00:55:58,630
The value always needs to
be in double quotes.

1271
00:55:58,630 --> 00:56:01,910
>> But here, if I did a double quote, that
would end this string right here,

1272
00:56:01,910 --> 00:56:03,930
and now I wouldn't be
typing in a string.

1273
00:56:03,930 --> 00:56:09,600
So I get around that by just using a
single quote, because a single quote

1274
00:56:09,600 --> 00:56:13,120
doesn't end the JavaScript string, but
in HTML it doesn't care if you're

1275
00:56:13,120 --> 00:56:14,270
giving it single quotes
or double quotes.

1276
00:56:14,270 --> 00:56:16,395
It'll just interpret it
like double quotes.

1277
00:56:16,395 --> 00:56:17,460
Does that make sense?

1278
00:56:17,460 --> 00:56:17,855
Yeah?

1279
00:56:17,855 --> 00:56:21,225
>> AUDIENCE: How do you get that IP address
in the bottom of your client?

1280
00:56:21,225 --> 00:56:22,473
Mine says no IP address.

1281
00:56:22,473 --> 00:56:24,450
Is there something I should
have done in [INAUDIBLE].

1282
00:56:24,450 --> 00:56:26,385
>> JASON HIRSCHHORN: In your appliance,
it has nothing?

1283
00:56:26,385 --> 00:56:27,043
>> AUDIENCE: Yes.

1284
00:56:27,043 --> 00:56:29,540
>> JASON HIRSCHHORN: There is something
you can do to fix it, but I'm not

1285
00:56:29,540 --> 00:56:31,030
going to spend time walking
through that right now.

1286
00:56:31,030 --> 00:56:33,705
But we can do it after section.

1287
00:56:33,705 --> 00:56:38,520
>> AUDIENCE: If you go back to
the console, why was the

1288
00:56:38,520 --> 00:56:41,168
number listed 012321?

1289
00:56:41,168 --> 00:56:42,480
>> JASON HIRSCHHORN: Console?

1290
00:56:42,480 --> 00:56:44,760
Oh, because I just was clicking
around wildly.

1291
00:56:44,760 --> 00:56:45,440
>> AUDIENCE: Oh, OK.

1292
00:56:45,440 --> 00:56:46,410
Never mind.

1293
00:56:46,410 --> 00:56:50,754
>> JASON HIRSCHHORN: And again, I can click
on something a bajillion times.

1294
00:56:50,754 --> 00:56:53,500
>> AUDIENCE: I have a question about
your loop again, your for loops.

1295
00:56:53,500 --> 00:56:56,450
Because you know in P set eight, they
use a different form of that loop.

1296
00:56:56,450 --> 00:57:02,210
So they do like var i equals 0, i less
than, ocean_array.length, i++.

1297
00:57:02,210 --> 00:57:04,160
Are those equivalent?

1298
00:57:04,160 --> 00:57:06,070
>> JASON HIRSCHHORN: That is
a standard for loop.

1299
00:57:06,070 --> 00:57:07,570
Or yeah, that's the for loops.

1300
00:57:07,570 --> 00:57:08,565
In fact, we've seen that's equivalent.

1301
00:57:08,565 --> 00:57:10,450
>> AUDIENCE: So that's equivalent
to what you've done here?

1302
00:57:10,450 --> 00:57:12,030
Is one considered better
than the other?

1303
00:57:12,030 --> 00:57:13,280
>> JASON HIRSCHHORN: No.

1304
00:57:13,280 --> 00:57:17,010

1305
00:57:17,010 --> 00:57:20,110
>> So, again, we have gone
over some things.

1306
00:57:20,110 --> 00:57:23,170
We've now moved out our comfort zone
and started doing some really cool

1307
00:57:23,170 --> 00:57:26,840
things that we haven't necessarily gone
over in class before, but will

1308
00:57:26,840 --> 00:57:28,870
hopefully be very powerful
for you when coding.

1309
00:57:28,870 --> 00:57:30,670
>> Avie, let's go back up here.

1310
00:57:30,670 --> 00:57:31,890
I have the index of the dolphin.

1311
00:57:31,890 --> 00:57:32,850
Now what do I need to do?

1312
00:57:32,850 --> 00:57:34,760
>> AUDIENCE: You need to train it.

1313
00:57:34,760 --> 00:57:39,985
So instead of putting console.log, you
can set a variable equal to that?

1314
00:57:39,985 --> 00:57:40,680
>> JASON HIRSCHHORN: OK.

1315
00:57:40,680 --> 00:57:41,440
So?

1316
00:57:41,440 --> 00:57:44,450
>> AUDIENCE: I'm not sure
if you can do that.

1317
00:57:44,450 --> 00:57:46,880
>> JASON HIRSCHHORN: So var x equals
this, whatever this returns,

1318
00:57:46,880 --> 00:57:47,650
it'll return it.

1319
00:57:47,650 --> 00:57:48,350
Doesn't matter.

1320
00:57:48,350 --> 00:57:49,490
It can return any variable.

1321
00:57:49,490 --> 00:57:51,580
There's no types here.

1322
00:57:51,580 --> 00:57:53,970
>> AUDIENCE: Or you could just
do the function call.

1323
00:57:53,970 --> 00:57:55,465
>> JASON HIRSCHHORN: Yeah,
why don't I do that?

1324
00:57:55,465 --> 00:57:58,191
Just do the function call.

1325
00:57:58,191 --> 00:57:59,105
>> AUDIENCE: Yeah.

1326
00:57:59,105 --> 00:58:01,100
Put another set of parentheses.

1327
00:58:01,100 --> 00:58:02,330
>> JASON HIRSCHHORN: Perfect.

1328
00:58:02,330 --> 00:58:03,580
That's exactly right.

1329
00:58:03,580 --> 00:58:07,250

1330
00:58:07,250 --> 00:58:08,830
So that will call the train function.

1331
00:58:08,830 --> 00:58:14,020
Of course, nothing is in the train
function, so propose, Akshar, what I

1332
00:58:14,020 --> 00:58:15,440
should do in the train function.

1333
00:58:15,440 --> 00:58:16,400
Give me some pseudo code.

1334
00:58:16,400 --> 00:58:20,940
>> AUDIENCE: I think you should remove the
dolphin from the original table.

1335
00:58:20,940 --> 00:58:24,130

1336
00:58:24,130 --> 00:58:27,010
>> JASON HIRSCHHORN: And this is getting
to Noah earlier why we copy

1337
00:58:27,010 --> 00:58:30,510
it into a new array.

1338
00:58:30,510 --> 00:58:34,650
Right, because we don't to edit our
dolphins array because what if another

1339
00:58:34,650 --> 00:58:37,390
program's using it or what if we want
to access it somewhere else?

1340
00:58:37,390 --> 00:58:41,005
We do want to make a copy, and that's
the one we're going to edit.

1341
00:58:41,005 --> 00:58:46,565
>> AUDIENCE: Then you position
it in your new location.

1342
00:58:46,565 --> 00:58:48,990
>> JASON HIRSCHHORN: And what do
we need to do after that?

1343
00:58:48,990 --> 00:58:53,298
>> AUDIENCE: And then you print out the
information about the dolphin.

1344
00:58:53,298 --> 00:58:56,050

1345
00:58:56,050 --> 00:58:57,970
>> JASON HIRSCHHORN: That's
exactly right.

1346
00:58:57,970 --> 00:59:03,835
We remove it from the ocean_array, we
put it in the pool, and then we draw

1347
00:59:03,835 --> 00:59:06,870
the ocean in the pool.

1348
00:59:06,870 --> 00:59:09,625
How do I remove the dolphin
from the ocean_array?

1349
00:59:09,625 --> 00:59:12,102
>> AUDIENCE: You go to the index.

1350
00:59:12,102 --> 00:59:13,280
Oh, OK.

1351
00:59:13,280 --> 00:59:16,076
Use a splice function.

1352
00:59:16,076 --> 00:59:17,720
>> JASON HIRSCHHORN: OK, So that's right.

1353
00:59:17,720 --> 00:59:20,950
I could use a splice function which
takes something out from an array and

1354
00:59:20,950 --> 00:59:22,250
condenses it.

1355
00:59:22,250 --> 00:59:23,560
That's something new we
haven't seen before.

1356
00:59:23,560 --> 00:59:26,120
But I actually want to keep a space
there because I want to print out a

1357
00:59:26,120 --> 00:59:28,092
blank space in the ocean.

1358
00:59:28,092 --> 00:59:36,480
>> AUDIENCE: So then you can set the image
of that index, the ocean_array

1359
00:59:36,480 --> 00:59:39,636
index dot picture.

1360
00:59:39,636 --> 00:59:41,730
>> JASON HIRSCHHORN: OK,
ocean_array, index.

1361
00:59:41,730 --> 00:59:43,125
>> AUDIENCE: Dot picture.

1362
00:59:43,125 --> 00:59:44,300
>> JASON HIRSCHHORN: Dot picture.

1363
00:59:44,300 --> 00:59:45,910
>> AUDIENCE: And you set it to null?

1364
00:59:45,910 --> 00:59:47,080
>> JASON HIRSCHHORN: Equals null.

1365
00:59:47,080 --> 00:59:49,440
OK.

1366
00:59:49,440 --> 00:59:53,230
So nothing's there, so then
how do I put in the pool?

1367
00:59:53,230 --> 00:59:56,880
Constantine, how do I
put it in the pool?

1368
00:59:56,880 --> 01:00:00,140
We have this variable we called,
called pool, up here.

1369
01:00:00,140 --> 01:00:10,810
>> AUDIENCE: Do we just do equals
ocean_array index?

1370
01:00:10,810 --> 01:00:12,575
>> AUDIENCE: Shouldn't you
switch the order?

1371
01:00:12,575 --> 01:00:14,325
>> JASON HIRSCHHORN: One sec.

1372
01:00:14,325 --> 01:00:14,770
Yeah?

1373
01:00:14,770 --> 01:00:16,980
>> AUDIENCE: Yeah, that was
actually a good point.

1374
01:00:16,980 --> 01:00:19,890

1375
01:00:19,890 --> 01:00:24,372
>> JASON HIRSCHHORN: What goes here?

1376
01:00:24,372 --> 01:00:25,510
>> AUDIENCE: Is it index?

1377
01:00:25,510 --> 01:00:27,240
>> JASON HIRSCHHORN: Index, exactly.

1378
01:00:27,240 --> 01:00:29,400
And what did you say, Constantine,
is something we should do?

1379
01:00:29,400 --> 01:00:31,530
>> AUDIENCE: We should maybe
switch the order.

1380
01:00:31,530 --> 01:00:34,300
>> JASON HIRSCHHORN: And why should
we switch the order, maybe?

1381
01:00:34,300 --> 01:00:36,166
>> AUDIENCE: Because at that
point it's already null.

1382
01:00:36,166 --> 01:00:39,755
>> JASON HIRSCHHORN: So it's not all null,
but we've lost the image URL.

1383
01:00:39,755 --> 01:00:42,295

1384
01:00:42,295 --> 01:00:43,615
Have we lost it forever?

1385
01:00:43,615 --> 01:00:47,878

1386
01:00:47,878 --> 01:00:48,970
>> AUDIENCE: Technically no?

1387
01:00:48,970 --> 01:00:50,540
>> JASON HIRSCHHORN: Have
we lost it forever?

1388
01:00:50,540 --> 01:00:51,290
>> AUDIENCE: No.

1389
01:00:51,290 --> 01:00:52,780
>> JASON HIRSCHHORN: Well, where is it?

1390
01:00:52,780 --> 01:00:54,220
>> AUDIENCE: In your original dolphin--

1391
01:00:54,220 --> 01:00:56,310
>> JASON HIRSCHHORN: It's in dolphins,
but in ocean_array

1392
01:00:56,310 --> 01:00:57,630
we've lost it forever.

1393
01:00:57,630 --> 01:01:01,910
So Constantine, can you propose a
better way to write this line?

1394
01:01:01,910 --> 01:01:03,350
Actually, sorry, it's saved in pool.

1395
01:01:03,350 --> 01:01:08,640
We have it in pool because
pool is an object, right?

1396
01:01:08,640 --> 01:01:12,310
Ocean_array index, an ocean_array
is an array of objects.

1397
01:01:12,310 --> 01:01:15,590
>> So pool is an object, and we have
a URL in there, and down

1398
01:01:15,590 --> 01:01:16,220
here it's set to null.

1399
01:01:16,220 --> 01:01:19,280
So actually, we haven't
lost it forever.

1400
01:01:19,280 --> 01:01:20,080
It's just saved in pool.

1401
01:01:20,080 --> 01:01:23,730
But it's certainly not in ocean_array,
and like you said, Carlos, it is in

1402
01:01:23,730 --> 01:01:25,010
the dolphins array.

1403
01:01:25,010 --> 01:01:25,720
>> So this looks sweet.

1404
01:01:25,720 --> 01:01:27,550
And then how do we draw the
ocean and the pool?

1405
01:01:27,550 --> 01:01:27,780
Mario?

1406
01:01:27,780 --> 01:01:33,060
>> AUDIENCE: You can just call
draw_pool and draw_ocean?

1407
01:01:33,060 --> 01:01:36,060
So like, draw_pool, and then--

1408
01:01:36,060 --> 01:01:39,522
well, yeah, it doesn't take anything.

1409
01:01:39,522 --> 01:01:40,840
>> JASON HIRSCHHORN: Great.

1410
01:01:40,840 --> 01:01:42,350
What's draw_pool going to do?

1411
01:01:42,350 --> 01:01:43,715
>> AUDIENCE: Draw the pool?

1412
01:01:43,715 --> 01:01:45,360
>> JASON HIRSCHHORN: Yeah, well,
what's it going to do?

1413
01:01:45,360 --> 01:01:46,605
>> AUDIENCE: Sorry.

1414
01:01:46,605 --> 01:01:48,310
You could do the same
thing, like have a--

1415
01:01:48,310 --> 01:01:49,670
>> JASON HIRSCHHORN: Hold on,
we're going to get there.

1416
01:01:49,670 --> 01:01:49,880
Nothing.

1417
01:01:49,880 --> 01:01:50,950
It does nothing right now.

1418
01:01:50,950 --> 01:01:52,080
Let's see if this works, though.

1419
01:01:52,080 --> 01:01:52,520
Who gave us that code?

1420
01:01:52,520 --> 01:01:54,640
Akshar and Constantine
gave us that code?

1421
01:01:54,640 --> 01:01:56,640
OK, let's see what happens.

1422
01:01:56,640 --> 01:01:57,810
>> Ah!

1423
01:01:57,810 --> 01:01:59,650
That was so exciting.

1424
01:01:59,650 --> 01:02:00,790
It's gone.

1425
01:02:00,790 --> 01:02:01,810
Oh, boy.

1426
01:02:01,810 --> 01:02:03,060
That's kind of ugly.

1427
01:02:03,060 --> 01:02:04,670
Well, we can go back
and fix that later.

1428
01:02:04,670 --> 01:02:06,490
I wonder where it is?

1429
01:02:06,490 --> 01:02:07,890
We saved it in that pool variable.

1430
01:02:07,890 --> 01:02:10,160
How can I figure out if it's
in that pool variable?

1431
01:02:10,160 --> 01:02:15,780
Well, again, the power of JavaScript,
and in particular the tools that

1432
01:02:15,780 --> 01:02:18,280
Chrome gives you, is you can now
inspect that pool variable.

1433
01:02:18,280 --> 01:02:19,220
It's global, remember?

1434
01:02:19,220 --> 01:02:20,960
We didn't put the var keyword.

1435
01:02:20,960 --> 01:02:23,430
So if I type Enter right here,
Constantine, what do you think I'm

1436
01:02:23,430 --> 01:02:24,800
going to get when I hit Enter?

1437
01:02:24,800 --> 01:02:29,095

1438
01:02:29,095 --> 01:02:30,950
>> AUDIENCE: I don't know.

1439
01:02:30,950 --> 01:02:31,470
>> JASON HIRSCHHORN: Guess.

1440
01:02:31,470 --> 01:02:32,110
>> AUDIENCE: Nothing?

1441
01:02:32,110 --> 01:02:33,680
>> JASON HIRSCHHORN: Nothing, wrong.

1442
01:02:33,680 --> 01:02:35,030
That was a good guess, though.

1443
01:02:35,030 --> 01:02:35,920
I got the object.

1444
01:02:35,920 --> 01:02:37,680
Remember you gave me
that line of code.

1445
01:02:37,680 --> 01:02:41,550
Pool, you saved in that
variable an object.

1446
01:02:41,550 --> 01:02:45,180
And indeed, we see the object
you saved in it.

1447
01:02:45,180 --> 01:02:46,710
That's awesome.

1448
01:02:46,710 --> 01:02:48,510
We can inspect from here.

1449
01:02:48,510 --> 01:02:52,110
It's almost like real time GDB that
we can look through our code and

1450
01:02:52,110 --> 01:02:53,520
figure stuff out.

1451
01:02:53,520 --> 01:02:55,780
That is super cool and super powerful.

1452
01:02:55,780 --> 01:02:56,860
>> OK, let's finish this up.

1453
01:02:56,860 --> 01:02:59,710
Let's draw the pool in five minutes.

1454
01:02:59,710 --> 01:03:02,960

1455
01:03:02,960 --> 01:03:05,370
Maru, give me a line of
code to draw the pool.

1456
01:03:05,370 --> 01:03:08,975
>> AUDIENCE: You could have another
variable HTML, but/for.

1457
01:03:08,975 --> 01:03:11,070
>> JASON HIRSCHHORN: Let's make
it very simple for now.

1458
01:03:11,070 --> 01:03:14,156
Let's just print the name of
the dolphin we're training.

1459
01:03:14,156 --> 01:03:20,910
>> AUDIENCE: And then you can do dollar
sign, open parentheses,

1460
01:03:20,910 --> 01:03:23,850
and then open quote.

1461
01:03:23,850 --> 01:03:26,420
I guess pound pool, if
that was a thing.

1462
01:03:26,420 --> 01:03:27,240
I don't remember.

1463
01:03:27,240 --> 01:03:28,950
>> JASON HIRSCHHORN: Let's look back.

1464
01:03:28,950 --> 01:03:29,570
I think it's a thing.

1465
01:03:29,570 --> 01:03:30,660
>> AUDIENCE: OK, yeah.

1466
01:03:30,660 --> 01:03:36,460
And then close quote, close parentheses
.html, open parentheses,

1467
01:03:36,460 --> 01:03:45,880
and then I guess pool, like open bracket
0 or something like that.

1468
01:03:45,880 --> 01:03:47,500
Close dot name.

1469
01:03:47,500 --> 01:03:49,720
I don't know if that works.

1470
01:03:49,720 --> 01:03:51,723
>> AUDIENCE: OK, let's see what happens.

1471
01:03:51,723 --> 01:03:55,507

1472
01:03:55,507 --> 01:03:59,040
"Cannot read property name of
undefined." So again, here's what

1473
01:03:59,040 --> 01:03:59,770
we're going to check out.

1474
01:03:59,770 --> 01:04:00,500
We're going to explore this.

1475
01:04:00,500 --> 01:04:02,710
You did pool, open bracket0, .name.

1476
01:04:02,710 --> 01:04:06,060
Again, I do this all the time, and I'm
confused what's going on, what does

1477
01:04:06,060 --> 01:04:07,040
this warning mean.

1478
01:04:07,040 --> 01:04:09,140
Let's look at pool.

1479
01:04:09,140 --> 01:04:12,520
Let's look at pool bracket
0, undefined.

1480
01:04:12,520 --> 01:04:14,430
So that's where we're running
into our problem, right?

1481
01:04:14,430 --> 01:04:16,130
Pool bracket 0 does not,
obviously, exist.

1482
01:04:16,130 --> 01:04:19,760
What do you think does exist?

1483
01:04:19,760 --> 01:04:21,885
>> AUDIENCE: Is pool just
an object by itself?

1484
01:04:21,885 --> 01:04:23,550
>> JASON HIRSCHHORN: Well, what
does it say right here?

1485
01:04:23,550 --> 01:04:25,850
When we hit Enter on pool,
what does it say it is?

1486
01:04:25,850 --> 01:04:26,510
>> AUDIENCE: Object.

1487
01:04:26,510 --> 01:04:28,076
>> JASON HIRSCHHORN: It is an object, so?

1488
01:04:28,076 --> 01:04:28,860
>> AUDIENCE: Oh, yeah.

1489
01:04:28,860 --> 01:04:30,700
So just pool.name instead of--

1490
01:04:30,700 --> 01:04:34,650
>> JASON HIRSCHHORN: Pool.name gives
exactly what you wanted.

1491
01:04:34,650 --> 01:04:38,060
And I realize I'm going through this
slowly and belaboring this point, but

1492
01:04:38,060 --> 01:04:39,720
this is exactly how I do this stuff.

1493
01:04:39,720 --> 01:04:42,270
You're going to run into these bugs
during your final project, so I hope

1494
01:04:42,270 --> 01:04:44,360
this is empowering you to be able
to use all these tools.

1495
01:04:44,360 --> 01:04:47,780
These are crucial and will
get you super duper far.

1496
01:04:47,780 --> 01:04:50,050
>> So I don't want to just
print out the name.

1497
01:04:50,050 --> 01:04:54,375
Let's make it a little
bit nicer than this.

1498
01:04:54,375 --> 01:04:56,000
>> AUDIENCE: What else do we want to do?

1499
01:04:56,000 --> 01:04:56,460
>> JASON HIRSCHHORN: OK, fine.

1500
01:04:56,460 --> 01:04:57,390
We'll do just this.

1501
01:04:57,390 --> 01:04:57,760
Ugh.

1502
01:04:57,760 --> 01:05:00,354
Guys, you have no life.

1503
01:05:00,354 --> 01:05:02,720
>> OK, boom, got it.

1504
01:05:02,720 --> 01:05:04,040
Looks good.

1505
01:05:04,040 --> 01:05:09,910
You'll see, Akshar, down here,
we have null, not found.

1506
01:05:09,910 --> 01:05:14,760
So it looks like it's still trying to
find some image, and that didn't do

1507
01:05:14,760 --> 01:05:15,720
exactly what we wanted to do.

1508
01:05:15,720 --> 01:05:18,690
We're not going to go into that now, but
there's probably a cleaner way of

1509
01:05:18,690 --> 01:05:19,835
doing this.

1510
01:05:19,835 --> 01:05:24,475
>> AUDIENCE: Could you leave like
a blank space for the image?

1511
01:05:24,475 --> 01:05:27,080
Like instead of setting it to null,
could you set it to like a blank

1512
01:05:27,080 --> 01:05:28,732
string or something?

1513
01:05:28,732 --> 01:05:30,020
>> JASON HIRSCHHORN: Like this?

1514
01:05:30,020 --> 01:05:31,270
>> AUDIENCE: Yeah.

1515
01:05:31,270 --> 01:05:36,894

1516
01:05:36,894 --> 01:05:38,144
>> JASON HIRSCHHORN: [INAUDIBLE].

1517
01:05:38,144 --> 01:05:42,000

1518
01:05:42,000 --> 01:05:42,860
Not found.

1519
01:05:42,860 --> 01:05:44,810
So there's a better way of doing it.

1520
01:05:44,810 --> 01:05:46,290
I would propose doing this.

1521
01:05:46,290 --> 01:05:50,130

1522
01:05:50,130 --> 01:05:53,080
Just setting null there.

1523
01:05:53,080 --> 01:05:54,200
Then of course, what's
going to happen?

1524
01:05:54,200 --> 01:05:56,050
It's going to go away entirely.

1525
01:05:56,050 --> 01:06:01,420
So if we wanted to keep a space and do
that, we probably want to do something

1526
01:06:01,420 --> 01:06:05,140
up here as well.

1527
01:06:05,140 --> 01:06:06,650
I'm going to get you started.

1528
01:06:06,650 --> 01:06:09,076
Akshar, give me this line
of code really quick.

1529
01:06:09,076 --> 01:06:17,480
>> AUDIENCE: If ocean_array, dolphin,
equals, equals, equals-- equals null?

1530
01:06:17,480 --> 01:06:20,342
Yeah.

1531
01:06:20,342 --> 01:06:21,466
>> JASON HIRSCHHORN: Then what?

1532
01:06:21,466 --> 01:06:24,046
>> AUDIENCE: Then do html.

1533
01:06:24,046 --> 01:06:27,920
You just copy the bottom code, really.

1534
01:06:27,920 --> 01:06:29,100
>> JASON HIRSCHHORN: Copy what?

1535
01:06:29,100 --> 01:06:30,290
>> AUDIENCE: You can copy the--

1536
01:06:30,290 --> 01:06:30,340
>> JASON HIRSCHHORN: This?

1537
01:06:30,340 --> 01:06:31,310
>> AUDIENCE: Yeah.

1538
01:06:31,310 --> 01:06:33,115
>> JASON HIRSCHHORN: All of it?

1539
01:06:33,115 --> 01:06:35,082
We don't have an image.

1540
01:06:35,082 --> 01:06:37,386
>> AUDIENCE: I mean you
can just leave a--

1541
01:06:37,386 --> 01:06:39,651
yeah, you can just close it.

1542
01:06:39,651 --> 01:06:41,560
But I think you have to set the width.

1543
01:06:41,560 --> 01:06:45,280
>> JASON HIRSCHHORN: Well, just
create an empty column.

1544
01:06:45,280 --> 01:06:45,910
OK.

1545
01:06:45,910 --> 01:06:48,480
And then in that case, we'll probably
want to do this as well.

1546
01:06:48,480 --> 01:06:54,587

1547
01:06:54,587 --> 01:06:55,837
>> Oops.

1548
01:06:55,837 --> 01:06:58,810

1549
01:06:58,810 --> 01:06:59,820
Oh.

1550
01:06:59,820 --> 01:07:01,800
Didn't work, but we're not
getting that error.

1551
01:07:01,800 --> 01:07:03,090
Let's see what happened down here.

1552
01:07:03,090 --> 01:07:07,400

1553
01:07:07,400 --> 01:07:09,690
>> So there's nothing there, so what
did you say we should add?

1554
01:07:09,690 --> 01:07:14,746
>> AUDIENCE: We should set
the width of the row.

1555
01:07:14,746 --> 01:07:15,585
>> JASON HIRSCHHORN: To what?

1556
01:07:15,585 --> 01:07:17,590
>> AUDIENCE: I think it's 150.

1557
01:07:17,590 --> 01:07:19,650
>> AUDIENCE: Yeah, it was 150.

1558
01:07:19,650 --> 01:07:21,390
>> JASON HIRSCHHORN: We'll put this here
to keep my code consistent.

1559
01:07:21,390 --> 01:07:21,730
But this isn't one.

1560
01:07:21,730 --> 01:07:22,350
OK, good.

1561
01:07:22,350 --> 01:07:23,050
Posted.

1562
01:07:23,050 --> 01:07:25,650
OK?

1563
01:07:25,650 --> 01:07:28,241
So it's still going away.

1564
01:07:28,241 --> 01:07:29,780
>> AUDIENCE: Oh, call width?

1565
01:07:29,780 --> 01:07:32,570

1566
01:07:32,570 --> 01:07:35,140
>> JASON HIRSCHHORN: It looks
like the width is 150.

1567
01:07:35,140 --> 01:07:36,290
Let's see.

1568
01:07:36,290 --> 01:07:39,375
Now we're going to do the final,
cool, powerful thing that I'm

1569
01:07:39,375 --> 01:07:40,500
going to show you.

1570
01:07:40,500 --> 01:07:43,830
We're not going to finish this code, but
online before we quit, all of this

1571
01:07:43,830 --> 01:07:44,580
code will be correct.

1572
01:07:44,580 --> 01:07:48,970
I'll email you the corrected version
with some of my own styling after

1573
01:07:48,970 --> 01:07:51,020
section, and that'll be posted online.

1574
01:07:51,020 --> 01:07:53,920
I encourage you to keep exploring this
and use this as a reference, but I

1575
01:07:53,920 --> 01:07:58,250
want to show you the final tool for this
class, and that is over here on

1576
01:07:58,250 --> 01:07:58,920
the right hand side.

1577
01:07:58,920 --> 01:08:01,700
And we looked at this last week, but now
hopefully it's a bit more familiar

1578
01:08:01,700 --> 01:08:02,970
to you and comfortable.

1579
01:08:02,970 --> 01:08:06,730
>> You can dynamically play
with the CSS of a page.

1580
01:08:06,730 --> 01:08:09,570
We've actually already seen us
dynamically play with the HTML.

1581
01:08:09,570 --> 01:08:13,470
Remember we did the right
click Edit As HTML?

1582
01:08:13,470 --> 01:08:14,090
Right here?

1583
01:08:14,090 --> 01:08:16,080
So we've dynamically played
with the HTML.

1584
01:08:16,080 --> 01:08:20,620
>> In the console, you can dynamically play
with the JavaScript of a page.

1585
01:08:20,620 --> 01:08:24,899
For example, that's a valid
JavaScript line.

1586
01:08:24,899 --> 01:08:26,870
Boom, I got exactly what I wanted.

1587
01:08:26,870 --> 01:08:30,060
So we can dynamically play with the
HTML, dynamically play with the

1588
01:08:30,060 --> 01:08:30,550
JavaScript.

1589
01:08:30,550 --> 01:08:32,810
Now we're going to dynamically
play with the CSS.

1590
01:08:32,810 --> 01:08:36,630
>> And all of this is because it's like
instant, live GDB feedback, and so you

1591
01:08:36,630 --> 01:08:39,979
can know something's right before having
to go your code, and you can

1592
01:08:39,979 --> 01:08:41,790
not guess what something's
going to look like.

1593
01:08:41,790 --> 01:08:43,050
So this is super duper cool.

1594
01:08:43,050 --> 01:08:45,850
>> And let's finally look at dynamically
playing with the CSS.

1595
01:08:45,850 --> 01:08:49,560
That's over here on the right
hand side, element.style.

1596
01:08:49,560 --> 01:08:50,420
Let's go to this.

1597
01:08:50,420 --> 01:08:51,740
Here's our element.

1598
01:08:51,740 --> 01:08:54,689
Let's give it some extra CSS.

1599
01:08:54,689 --> 01:09:00,300
>> Or sorry, we could give it some extra
CSS, but we probably, in this case,

1600
01:09:00,300 --> 01:09:03,330
want to change this attribute.

1601
01:09:03,330 --> 01:09:05,535
So let's go down here to this line.

1602
01:09:05,535 --> 01:09:06,785
Oh, I can't do that here.

1603
01:09:06,785 --> 01:09:11,109

1604
01:09:11,109 --> 01:09:11,689
Sorry.

1605
01:09:11,689 --> 01:09:12,939
Edit AS--

1606
01:09:12,939 --> 01:09:17,410

1607
01:09:17,410 --> 01:09:19,270
so that is how you could edit the CSS.

1608
01:09:19,270 --> 01:09:21,804
We are not going to edit the CSS at this
second, but we do want to edit

1609
01:09:21,804 --> 01:09:24,439
the HTML and give it
an extra attribute.

1610
01:09:24,439 --> 01:09:26,762
What did you propose changing this to?

1611
01:09:26,762 --> 01:09:30,069

1612
01:09:30,069 --> 01:09:31,170
I thought Avie had a suggestion.

1613
01:09:31,170 --> 01:09:32,420
>> AUDIENCE: Col width?

1614
01:09:32,420 --> 01:09:38,880

1615
01:09:38,880 --> 01:09:40,560
>> JASON HIRSCHHORN: That looked like
it didn't do anything either.

1616
01:09:40,560 --> 01:09:43,390

1617
01:09:43,390 --> 01:09:45,803
Let's try the CSS.

1618
01:09:45,803 --> 01:09:46,707
>> AUDIENCE: [INAUDIBLE] class?

1619
01:09:46,707 --> 01:09:48,310
>> JASON HIRSCHHORN: It says
it doesn't work.

1620
01:09:48,310 --> 01:09:49,260
It gives that yellow thing.

1621
01:09:49,260 --> 01:09:51,660
>> AUDIENCE: But [INAUDIBLE].

1622
01:09:51,660 --> 01:09:56,883
>> AUDIENCE: Aren't you setting the width
of an image to 150 when you do that?

1623
01:09:56,883 --> 01:09:59,741
Like wouldn't you just use width?

1624
01:09:59,741 --> 01:10:00,740
>> JASON HIRSCHHORN: Yeah.

1625
01:10:00,740 --> 01:10:02,785
>> AUDIENCE: But we don't have
an image anymore.

1626
01:10:02,785 --> 01:10:03,340
>> JASON HIRSCHHORN: No.

1627
01:10:03,340 --> 01:10:04,290
We don't have anything in there.

1628
01:10:04,290 --> 01:10:07,990
So we're not going to solve
the specific problem.

1629
01:10:07,990 --> 01:10:11,190
We're going to go back to Akshar's
solution, because I want to set a

1630
01:10:11,190 --> 01:10:14,160
dolphin free for the time being,
or that's the last

1631
01:10:14,160 --> 01:10:14,710
thing I want to finish.

1632
01:10:14,710 --> 01:10:18,340
So we're going to leave this here
while recognizing it's not quite

1633
01:10:18,340 --> 01:10:19,870
correct, and we're going
to come back to it.

1634
01:10:19,870 --> 01:10:21,230
>> Sorry.

1635
01:10:21,230 --> 01:10:23,380
I said we can dynamically
change the CSS.

1636
01:10:23,380 --> 01:10:26,060
Let's look at that and do
that really quickly.

1637
01:10:26,060 --> 01:10:28,910
So if I inspect this element down here,
and say I want to make it blue,

1638
01:10:28,910 --> 01:10:32,850
you can come over here, color, because
I know that changes the color of

1639
01:10:32,850 --> 01:10:36,710
something, and we saw how
it changed it blue.

1640
01:10:36,710 --> 01:10:38,850
So that's me dynamically
changing the CSS.

1641
01:10:38,850 --> 01:10:42,150
Doesn't change it for good, but then
I can go back into my CSS file and

1642
01:10:42,150 --> 01:10:44,990
change the color of an object.

1643
01:10:44,990 --> 01:10:46,610
>> OK.

1644
01:10:46,610 --> 01:10:48,180
That was a lot.

1645
01:10:48,180 --> 01:10:50,480
We didn't finish my amazing program.

1646
01:10:50,480 --> 01:11:00,352
Let me just show you it real quick,
and then we'll head out.

1647
01:11:00,352 --> 01:11:01,860
Oh, where is it?

1648
01:11:01,860 --> 01:11:02,710
No!

1649
01:11:02,710 --> 01:11:03,960
Hold on.

1650
01:11:03,960 --> 01:11:19,650

1651
01:11:19,650 --> 01:11:24,350
>> OK, so as you're packing up, an
amazing preview, or front

1652
01:11:24,350 --> 01:11:25,330
view, of next time.

1653
01:11:25,330 --> 01:11:30,880
This is Dolphin Trainer 2013,
and it doesn't work.

1654
01:11:30,880 --> 01:11:32,048
Great.

1655
01:11:32,048 --> 01:11:36,240
>> [LAUGHTER]

1656
01:11:36,240 --> 01:11:37,300
>> JASON HIRSCHHORN: Oh!

1657
01:11:37,300 --> 01:11:38,085
Boom!

1658
01:11:38,085 --> 01:11:38,950
What does this mean?

1659
01:11:38,950 --> 01:11:39,700
>> AUDIENCE: You didn't chmod.

1660
01:11:39,700 --> 01:11:41,430
>> JASON HIRSCHHORN: I didn't chmod it.

1661
01:11:41,430 --> 01:11:42,680
>> AUDIENCE: Row one.

1662
01:11:42,680 --> 01:11:52,774

1663
01:11:52,774 --> 01:11:54,930
>> JASON HIRSCHHORN: Oh, look at that.

1664
01:11:54,930 --> 01:11:55,710
OK.

1665
01:11:55,710 --> 01:11:57,280
So, I have my six dolphins.

1666
01:11:57,280 --> 01:11:57,730
What happens?

1667
01:11:57,730 --> 01:11:58,060
Let's see.

1668
01:11:58,060 --> 01:12:02,595
If I train one, now training Lili.

1669
01:12:02,595 --> 01:12:04,910
Oh, I want to set you free, Lili.

1670
01:12:04,910 --> 01:12:06,660
There you go, back in the ocean.

1671
01:12:06,660 --> 01:12:07,950
>> So that was this week.

1672
01:12:07,950 --> 01:12:09,500
If you have any questions,
we'll be outside.

1673
01:12:09,500 --> 01:12:11,340
And again, I'll send you
the rest of this code.

1674
01:12:11,340 --> 01:12:12,590
Thank you, guys.

1675
01:12:12,590 --> 01:12:15,723