>> JASON HIRSCHHORN: Welcome, everyone, to week nine.
We have an exciting week ahead of us because we have our final problem set.
We also have a brand new language, JavaScript, that you are already in
the midst of using not only for this problem set, but many of you will
probably utilize it for final projects, especially
web-based final projects.
So that's what we'll go over today after talking briefly about resources,
which we do every week.
We'll jump into JavaScript, and then we'll spend all of section with a
hands-on activity coding Dolphin Trainer 2K13, which is like Madden
2013, but for dolphins and in JavaScript.
>> [LAUGHTER]
>> JASON HIRSCHHORN: So as always, a list of resources for you to check out.
These resources are especially important because next week on
Wednesday is quiz one, your second and final quiz in this course.
Just like quiz zero, it is 75 minutes and starts a little after 1 PM.
It covers everything since day zero of this course, but it certainly
emphasizes everything that has happened since quiz one.
>> But of course, we covered for loops in the beginning of the year.
For loops are probably still going to be a part of this quiz, so it's not
like you can ignore everything that happened before week five or quiz zero
because this course builds on itself a lot.
But certainly the emphasis will be on things we've learned since week six.
That includes PHP, JavaScript, SQL to be sure, and also the more advanced
data structures we talked about in C. A whole host of other topics, but we
will discuss that next week as we review for the quiz.
>> And also, as always, if you have any questions about the quiz as you're
preparing, feel free to send them my way.
Right now, does anybody have any quick questions about the quiz?
>> OK.
Don't need to worry about it or freak out about right now, but keep that in
the back of your mind, because that's happening a week and a day from now.
>> Finally, I know we're running towards the end of the semester--
there are only two sections left after this-- but I am still excited and
eager for your feedback if you have any.
I want to make those the best two sections ever.
They probably will be, because each section is amazing and the best ever.
I don't know how that's possible, but they've all been fantastic, I think.
>> The feedback I've gotten has trailed off to nothing and none since for the
last couple of weeks, so please give me some feedback if you have it.
It takes three minutes.
You can tell me good things you want me to keep doing or
things I can work on.
I'm trying to be the best teacher possible, or I'm trying to do the best
I can, but I can't do that if I don't know how you guys are doing.
And it's hard to tell why you're falling asleep in class, so let me
know after why that was the case.
>> I showed you this image last week.
This is the Teenage Mutant Ninja Turtles bike I had when I was younger,
and we are continuing to push you guys without training wheels as we immerse
you in another language.
But rest assured, JavaScript, like PHP, is very similar to things you've
done in the past.
A lot of the logic transfers over, if not the syntax, exactly one-for-one.
But again, all of these languages that we've gone over in the past couple of
weeks, though they seem overwhelming, are incredibly powerful and will allow
you to do a lot in your final project and probably other websites that you
code in the future.
>> So without further ado, we're going to start diving into JavaScript.
We're going to talk about it briefly and then really get into the hands-on
coding portion of this section.
So JavaScript is a client-side scripting language, which means it's
different than PHP and it's different than C. JavaScript's not compiled and
it's not executed by the server.
Rather, you load it.
You load a JavaScript page when you load a web page, and then it executes
on your machine.
Which means you can see all the JavaScript code that was
sent to your computer.
>> Sometimes it's shortened or coded a bit, encrypted a bit, so that you
can't tell explicitly what's going on.
For example, if you check out CS50 or the staff solution for this week's
problem set, and you go to service.js, you'll notice you can't actually tell
what to do from what we gave you.
We encrypted it a bit to make that a bit more difficult.
Nevertheless, you can see the exact JavaScript file that we are executing
and our program is running on.
So that's what it means to be a client-side scripting language.
>> Similar to C and PHP, though, JavaScript has for loops, if/else
conditions, while loops.
Similar to PHP, it has a foreach loop as well.
And again, very similar to the syntaxes that we have seen in
languages that we've already worked with.
>> Finally, one of the coolest parts of JavaScript, and something we'll be
doing a lot today, and probably you'll be doing a lot with your P set if you
haven't experienced it already, is you can check out all the errors you have
in your code via JavaScript Console.
We looked at it a bit last week.
We looked at a different type of console to inspect a page, but in
Chrome, again, you can see the layout, the HTML, document that your page is
showing you on the screen.
You can also see all of the JavaScript form that page, and you can also, like
I said, see all of the errors in the JavaScript Console.
And we'll experience that more in a bit when we start coding.
>> One thing to note about JavaScript variables.
Like PHP variables, they're loosely-typed, so you don't need to
give them a specific type.
In terms of scope, that is defined by the "var" keyword.
So if you don't put a keyword in front of something, you just write the name
of the variable, then an assignment operator, in this case the equal sign.
I'm forgetting a semicolon right there, but assume there's a semicolon
right there.
>> Then you're creating a global variable.
If you put the "var" keyword, then you're giving it some type of local
scope, whether that's to a function or a loop.
So that is one thing to note for variables.
>> JavaScript is the language.
jQuery is the library built on top of the JavaScript language, and you have
seen it before in lecture.
I highly recommend, if you're going to be using JavaScript in your final
project, that you get to know jQuery.
It makes everything you want to do much, much easier.
It also comes with wonderful documentation and examples to help get
you started.
Today we're going to be using jQuery as well.
>> These, what I have on this slide, are the very basics of jQuery.
In the top of your HTML file or whatever-- your index.php file, your
index.html file-- you need to include these two lines.
These are pretty generic lines.
The first line includes the jQuery JavaScript file, and the second line
includes wherever you've written your own JavaScript code.
And of course, because in your JavaScript code you've probably used
some jQuery library functions, that needs to go after the
jQuery inclusion script.
We will explore this again in a moment.
>> And finally, in the JavaScript file, I call this one index.js.
It could be scripts.js.
Whatever it is, whatever JavaScript file have you, you start generally
with this line of code, dollar sign, open paren, document, close paren,
period, ready, open paren, function, open paren, close paren, and then
curly brace.
Throw your code inside there, and then end it with a curly brace, close
paren, semicolon.
>> So take this as a given.
If you're going to be using jQuery, wrap all of your jQuery code inside
this line of code.
And we'll see that again in a second.
>> Again we'll be working with jQuery, and please ask questions as we go
today, but does anybody have any questions about jQuery or
JavaScript right now?
>> OK.
So without further ado, I present to you Dolphin Trainer 2K13.
I am super excited about this latest version of the product.
>> Oh, no!
I was so excited.
I was going to show it to you guys, but it looks like we haven't
implemented it yet.
Let's make this a bit bigger.
So if I load the code for Dolphin Trainer-- dang it.
I'm sorry, guys.
I was working on this before class.
I thought I'd have it finished, but I guess I still have some
work left to be done.
But thankfully, you guys all have some JavaScript and jQuery practice, so
let's go ahead and finish this together.
>> I think I sent you guys copies of this, because I was super excited
about it, so you should have the same code that I have.
Let's head into--
dang it, guys, I'm sorry.
Let's head into the terminal, though.
>> Just like with your past problem sets, if you have my--
let's make this a bit bigger, too, for you guys--
you took my zip file.
You presumably unzipped it.
Let's go here.
And then hopefully, you moved it into the same directory where you saved
your problem set eight code.
And we save in that directory so I can access it-- or we all can access the
code in the Chrome browser on our computer.
>> And again, to get to that code, you simply type in the address found at
the bottom, right hand side of your appliance, down here.
You find your IP address.
You type that into the Chrome browser on your computer, and in this case,
since we're the section nine folder, we also have to add a
slash section nine.
>> Let me--
oops.
I'm going to minimize this so I don't have to keep clicking through that.
>> So that's how I set up this code.
I've already done that already.
I'm not going to go through those steps because that's what the
beginning of the problem set walks you through how to do.
So go ahead and you'll get to set this up in a second, but first let's
explore this code as a group.
>> Let's see what I did.
I tried to get most of it done before class, but I think I
was a little behind.
So let's open up index.html.
>> OK.
And index.html is a really simple page because I didn't
want to get too crazy.
I really wanted to make sure it was working, but I guess I
didn't get that far.
>> Here's the head, which comes right inside those HTML tags, and we notice
a couple things right off the bat.
We have the CSS file right here and the appropriate
location of the CSS file.
We have the jQuery library right here, and you'll notice something different
about this.
The source is something really, really long.
ajax.googleapis.com/--
sort of looks like a URL, but it doesn't certainly look like
js/jquery.js.
>> And that's because I decided that I don't want to have to download the
jQuery file, and drag it and save it in my library, and be
responsible for it.
Rather, I'm just going to take the JavaScript file that Google hosts.
So Google actually hosts a number of libraries, and jQuery, since it is one
of the most popular, it hosts that one as well.
>> And because it's hosting it, I don't need to worry about it, and they
update it, though when they do update it I'll probably have to change these
numbers right here.
But that's just to make my whole file system a little less clean.
I don't really like hosting all these files.
It's much nicer if Google has to host them for me.
So this, again, is getting the whole JavaScript file, but it's just being
hosted by Google instead of on my file system on my computer.
>> We also see that I put in two more files dolphins.js and trainer.js.
We'll look at those in a second.
And finally, this title right here.
Who can tell me what this code inside these title tags, where
that goes on my page?
>> AUDIENCE: Like that thing that the toolbar or whatever?
>> JASON HIRSCHHORN: Yeah, the little tab on the top of the Chrome window.
That's where that text goes.
>> Inside the body, as you can see, not much stuff here.
I have just three divs.
I give them some IDs, and I put a little text in.
But I guess that's why we don't see anything over here.
Actually, we see Dolphin Trainer 2K13.
We see TODO.
I don't know where that's coming from because I don't see that here.
So maybe that's in one of my JavaScript files.
We'll check that out in a second.
>> Can somebody else tell me what this ID means right here?
>> AUDIENCE: It's a way of calling the specific section in the [INAUDIBLE]
file?
>> JASON HIRSCHHORN: Yeah.
It's just a way to reference this particular div.
IDs are ideally unique.
OK?
Tough crowd.
So, IDs are generally unique.
You give them to one specific element in your code.
>> What if I wanted to reference a number of elements, whether that's for CSS
styling or jQuery?
What attribute can I give them?
>> AUDIENCE: Class.
>> JASON HIRSCHHORN: A class, exactly.
Right.
>> OK, so index.html, again, not much going on here.
So let's open another file.
Let's see what I have.
That's all I have in here.
Let's go into the JS folder.
I'm not going to worry about the CSS for now.
Let's open up dolphins.js.
>> Oops.
Or rather--
OK.
So, dolphins.js, it actually looks pretty similar to some of the code you
were given in problem set eight.
You can scroll through it.
Can anybody tell me, though, what is DOLPHINS?
This all caps DOLPHINS?
What is that?
What type of data is that?
>> AUDIENCE: Array.
>> JASON HIRSCHHORN: It's an array.
And we know it's an array because I see these square brackets here.
And somebody else, what's it an array of?
>> AUDIENCE: Objects?
>> JASON HIRSCHHORN: It's an array of objects.
And you can see that.
And how do you know it's an array of objects?
>> AUDIENCE: Because you have this colon boot between curly braces?
>> JASON HIRSCHHORN: Right.
So I have these curly braces right here, and then you can see the comma
separating the different objects in this array.
And then inside each object, I have something colon and something else.
And what is generally this first part, the thing to the left of the colon?
What's that called?
Generically?
How do we refer to that?
>> AUDIENCE: Index?
>> JASON HIRSCHHORN: Index, or probably more generally, the key.
And then on the right hand side, the value.
So index, key.
But if we're talking about those, we generally mean the thing on
the left hand side.
>> In a simple array, again, we had indices 0.
1.
2.
3.
4.
And in dolphins, we'll have dolphin 0, dolphins 1, dolphins 2, dolphins 3,
dolphins 4.
We also have, inside this object, we won't generally reference things.
Or if we just have this object right here, we're not going to say object 0,
object 1, object 2.
We're going to say object name, or object type, object length, et cetera.
And that's how we'll get the value on the right hand side.
So if we said object name, for example, we would get this string,
"Grace."
>> So as you guys have told me, dolphins is simply an array of objects.
And you see all of the objects have a name, a type, a genus.
Is that pronounced correctly?
Anyone?
Genus?
Great.
>> A length, a weight.
Is that pronounced correctly?
I think so.
And a picture, just a URL to some file online.
And right here, we close the array, right down there in the very left hand
side of my screen.
So that's all the dolphins.js is.
>> Oh, my goodness.
This explains it.
I thought I'd finished everything, but look.
There are all these TODOs.
OK, hopefully we can do those together.
But let's first, before we do that, just walk through
this code very quickly.
>> So as I mentioned, we see at the very beginning this line that I had in the
slides, (document).ready(function().
And essentially what that's going to do is wait till everything in your
pages has been loaded, so wait until it's all array, everything's good to
go, and then start executing this code.
So if you needed to run some PHP, if you needed to get some images,
whatever it is, all the code has been set and ready to go in your index page
or whatever page has been loaded, and now you're going to start
executing your code.
>> So the first thing we do is we set up this array.
And I don't have the var keyword there, so what is the
scope of this array?
>> AUDIENCE: It's global.
>> JASON HIRSCHHORN: It's global, so ocean_array can be accessed from
anywhere in this file.
>> And then we see this for loop.
It doesn't say foreach, but this is essentially a foreach loop.
And this is just JavaScript's version, so for each var dolphin in DOLPHINS,
what data type?
Even though, again, JavaScript doesn't have these data types per se, what
data type is dolphin?
>> AUDIENCE: An object.
>> JASON HIRSCHHORN: It's an object.
We're getting each object in the DOLPHINS array.
So in here, it looks like I forgot to put all of these dolphins from our
giant DOLPHINS think into the ocean_array, so we should probably do
that first.
>> And then, something called this pool variable.
I'm setting it to null.
And then I call this function draw_ocean.
I train a dolphin when its picture is clicked--
I haven't done that-- and set a dolphin free when
the button is clicked.
>> So these are the things I need to do.
I guess I should give you some background on what I was trying to do.
So if we go here, what I really wanted this to look like was an array up
here, rather than it saying "TODO," I wanted a table, essentially, with the
pictures of all the dolphins.
And then when you click on one picture, I wanted it to put it down in
the bottom half of the screen and give you all the information on it, and
that would be the dolphin in the pool, the dolphin you were training.
>> So I thought it would be really cool.
You have all these dolphins in the ocean up here, then you click on one,
and it'd go to the pool, and then you could train it.
So that's what I was trying to do.
And then there'd be a button down here in the pool, and you could click,
like, "Set Free," and you could set the dolphin free, and it would go back
into the ocean.
>> So that's what I was trying to create, but again, I'm going to need your help
to create it.
So hopefully, some of these keywords or some of these terms will start
making sense now in the context of this program.
>> Let's keep looking through this file.
We call this function draw_ocean.
It's the one and only function we call from the document.ready section.
So we call this draw_ocean function, and it looks like it creates a string,
a variable, here.
Put's something in the string, adds more stuff to the string, adds more
stuff of the string, and then this line of code.
I say that prints out the HTML string.
And somebody explain to me what this line of code does?
Well, first of all, what does that dollar sign mean?
It's not a PHP variable, but what does that dollar sign mean?
>> AUDIENCE: Linking to the HTML ID of--
it's like it links to the HTML code?
>> JASON HIRSCHHORN: What about that dollar sign?
What does that dollar sign indicate?
>> AUDIENCE: Linking to the HTML somehow?
>> JASON HIRSCHHORN: Where have we seen this dollar sign before in JavaScript?
We saw it in lecture.
We talked about it.
What does the dollar sign mean?
>> AUDIENCE: Something with jQuery?
>> JASON HIRSCHHORN: Exactly right.
This has something to do with jQuery.
This dollar sign means I am using a jQuery library function here.
Exactly right.
>> So we write the dollar sign, and then we have this open paren and closed
paren, and inside there, what goes inside there when you're using a
jQuery library function, or you're using the jQuery library?
Again, you saw this in lecture.
Can somebody give me-- and you also see something here.
What goes inside of there?
>> Jeff, give me a guess.
What does this look like, #ocean?
Where have we seen that before?
>> AUDIENCE: Is it a library or something?
I have no idea.
>> JASON HIRSCHHORN: Well, let me open index dot--
nope, wrong place.
>> So we see we have something called ocean here.
Where have we seen the #ocean hashtag ocean, syntax before?
Yeah?
>> AUDIENCE: CSS?
>> JASON HIRSCHHORN: In CSS.
So we wanted to style something, remember we would put the hashtag CSS
selector, or hashtag ocean, for example, and all of the formatting
that we wanted to give to the thing with ID ocean we put inside there.
>> So inside here it's not CSS selector goes in here.
jQuery defines its own type of selectors.
But it's the same idea, and actually a lot of them overlap with CSS.
So inside these open parentheses, you put a selector, and whatever the
selector refers to, that's what you're going to be using.
>> So in this case, I'm selecting ID ocean.
If I had a class--
let's say I have a class of things called "images," and I give that to a
lot of elements, how do I reference a class of things called "images?"
>> AUDIENCE: I think it was dot.
>> JASON HIRSCHHORN: With a dot.
So if instead I put dot images in here, that would give me the class of
things called "images."
>> Of course, this is super powerful, and you can reference a lot of things.
In fact, I could reference basically any tag in HTML.
So if I wanted to do that, td, that's a tag that we've seen before when
creating a table.
You're probably familiar with that from P set seven.
In this case, it's actually going to select all of them.
It's going to give me array of all the td tags.
But that can get a little overwhelming, so fro right now we're
going to stick to just referencing IDs.
>> So what this does, again, is that gets, in this case--
sorry.
Go here, to index.html.
It's an ocean, rather the ocean ID references a div, so this part of this
line of code gets that div.
>> And then this dot means I'm calling a function, and the name of that
function is HTML.
And that's short for, if you guys saw before, dollar sign, document, dot get
element by ID, dot inner HTML.
This is just jQuery's version.
So the HTML function just gets the inner HTML.
Of that element.
So again, if we look back here, we'll see there's no inner HTML.
And so if I did this, I would be trying to get the HTML.
When I type this, I'm setting the HTML.
So I'm passing this function to string, the string that I've created
here, and saying put that inside the ocean div.
Yeah?
>> AUDIENCE: When you get the HTML, you're just getting
a copy if it, right?
You're not removing it.
>> JASON HIRSCHHORN: Right.
If I did this and wanted to save this in var--
oops.
That would get all the information that was there and save it in another
variable, make a copy of it.
>> AUDIENCE: OK.
Got it.
>> JASON HIRSCHHORN: So we created some HTML, save that in the string.
We save some more.
Here you see that TODO string.
So that's probably where we are getting that TODO from when
we go into our page.
And actually, if I right click on TODO, inspect Element, we talked about
this last week.
That's how we could see the HTML structure of our page.
>> You'll notice that down here--
let's make this a bit bigger, too--
we have our div ID ocean right here.
Everybody see that line of code?
And that's what we types in index.html.
>> Inside of it, we see now this table line of code.
And what that table line of code is, that's the code we just inserted into
this element.
And it we look inside of it, we never typed colgroup and tbody.
That was added for us because we did some fancy stuff.
But you'll notice there's the tr, there's the td with TODO.
>> So it looks like, again, the code that we wrote here.
That's exactly what this line was doing.
It was taking our HTML string and putting it inside this div right here.
It initially has nothing.
This page gets loaded.
Dollar sign, document.ready.
This starts executing.
We call the draw_ocean function, and inside the draw_ocean function we take
this HTML and put it inside that div.
>> We just went through a lot right there.
Does anybody have any questions about that?
Or how that works, or jQuery?
Because if you understand that, then jQuery should hopefully come
relatively easy.
Yeah?
>> AUDIENCE: What you had inside the parentheses under the printout HTML
string, that is the name of the HTML variable that you
have declared earlier?
>> JASON HIRSCHHORN: This right here?
>> AUDIENCE: Yes
>> JASON HIRSCHHORN: Yes.
AUDIENCE: So if you had named that something else, that something else
was what you would put in here.
>> JASON HIRSCHHORN: Exactly right.
And that's a good point.
This is a little confusing because I have HTML, html.
This inside here is the name of my variable, and this right here is the
name of the jQuery function.
>> AUDIENCE: But in order for the jQuery function to work, you have to give it
some HTML input?
>> JASON HIRSCHHORN: Exactly.
OR you have to give it a string.
It will put that string inside of the div or whatever.
This is just a string.
It doesn't know this is HTML, but obviously format it on purpose to be
valid HTML.
Does that answer the question?
>> AUDIENCE: Yes.
>> JASON HIRSCHHORN: OK.
Yeah?
>> AUDIENCE: What if the ocean referred to a button or something?
What would the .html do?
Would that change the text of the button?
>> JASON HIRSCHHORN: So the question is what if it referred to a button?
It will change the inner HTML of something.
So if it has an open tag and a close tag, it will put something in between
the open and close tag.
If there's no open and close tag, it won't do anything.
>> AUDIENCE: It's literally a copy and paste sort of thing?
>> JASON HIRSCHHORN: Yeah.
It copies and pastes something from whatever variable I pass it, the
string I pass it, inside those open and close tags.
>> Let's look down here.
Oh, my goodness. draw_pool didn't do anything right there.
That's a bummer.
Train, wow.
OK, so not much else besides that.
>> So let's get started, and let's fix this up.
I am going to need everybody's help to get this done.
There aren't actually that many lines of code, I think, to write.
I think I did this a couple years ago for the 2K12 version, and there
shouldn't be that many lines of code to write.
I shouldn't have deleted that code.
I should have just saved it.
Oh, crazy.
>> Anyway, let's get started.
So I'm in this array, or I'm in this line, and I have my ocean_array.
And I want to put all of this, everything from this file, into my
ocean_array.
So how can I take everything from there, and put it into the
ocean_array?
It's one line of code.
Who can give me that line of code or tell me, have some idea what that line
of code should do?
Why won't we start here, and then we'll continue moving around the room
answering questions.
Kurt?
What's first?
>> AUDIENCE: Ocean_array, bracket, dolphin.
Equals DOLPHINS, bracket, dolphin?
DOLPHINS with a capital everything.
>> JASON HIRSCHHORN: OK.
Let's walk through the syntax.
Right here, this is like a foreach loop, so it's actually doing a lot of
things for us.
And dolphin is an object.
So we don't need to write something like dolphins, dolphin, because
dolphin itself is the object that I want.
It's not the index.
Does that make sense?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: So how do you propose changing your code?
If we know we're given the index?
>> Oh, sorry.
You're good.
But how--
let me ask a different question.
If we want to--
let's actually write this.
Never mind.
We're going to write this.
That's great.
Sorry.
I was just very confusing there.
>> Let's leave that there for now, and we'll come back to training a dolphin,
setting a dolphin.
Let's just first fix this drawing ocean function, and we'll come back to
that, Kurt.
But so far, so good.
>> Let's look inside draw_ocean.
The line that looks to be wrong is this "store pictures of dolphins in
the ocean in an HTML string." And right now, I just like TODO, but I
really want to put the dolphins pictures in the ocean.
So what, Noah, do you think is the first thing I should do?
If I want to go through the entire array, what is the first
thing I should do?
>> AUDIENCE: We need to create a for loop.
>> JASON HIRSCHHORN: A for loop.
And what should that for loop look like?
>> AUDIENCE: For--
we need to go through each dolphin in the ocean array.
So for var dolphin in--
can you write ocean array?
>> JASON HIRSCHHORN: Like that?
>> AUDIENCE: Probably that's right.
>> JASON HIRSCHHORN: Let's stick with that for now, and then we'll
come back to it.
And you're going to be responsible for that line.
So I have by for loop.
Michael, you're up now.
What should I do now?
>> AUDIENCE: You would have to take the store pictures from dolphins.
>> JASON HIRSCHHORN: So where is that stored?
>> AUDIENCE: In the dolphin array?
>> JASON HIRSCHHORN: I'm confused now too about what's happening.
Let's figure out how we can do debug this, and then I'll come
back to you, OK?
What's the equivalent of printf in JavaScript?
Annie?
>> AUDIENCE: It's a document that write?
>> JASON HIRSCHHORN: Or how can I see something in the
console down at the bottom?
>> AUDIENCE: Console.log.
>> JASON HIRSCHHORN: Console.log, exactly.
So let's do console.log, and let's just put "dolphin" in, OK?
Ideally if this works, we're going to have-- let's see, back in that file
dolphins.js, there were six dolphins, so I should get six or something
hopefully printed out to the console, right?
That's where we are so far because we did Kurt's line up here, and then we
did Noah's for loop, and we have this line, so hopefully we should see six
things printed to the console.
So let's go here, let's open up our console and refresh our page.
>> OK, so it looks like we saw six indices.
Zero, one, two, three, four five, yeah.
>> AUDIENCE: How do you get to that page inside your--
>> JASON HIRSCHHORN: how do I get to this thing down here?
>> AUDIENCE: No, the Chrome page inside [INAUDIBLE] appliance.
Can we see that or not?
>> JASON HIRSCHHORN: This Chrome page right here?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: So just like in P set eight, I've opened a Chrome window
on my desktop, on my Macintosh desktop.
And if you notice up here this URL up on the top left, that matches this IP
address down here.
So to do this, though, the beginning of the problem set spec walks you
through exactly how to do this.
But I just followed that, and instead of with the shuttle code, I just did
our own code.
>> The cool thing is we can also inspect ocean_array.
So it looks like ocean_array is an array of six objects, and
let's open each one.
Boom!
One.
>> So Kurt, it looks like your code worked perfectly.
Everything got started in ocean_array.
Because I misspoke earlier.
But yes, awesome job.
The ocean_array is correct, and it looks like now we see that dolphin is
a number from 0 to 5, so it looked like an indices in an array.
So given that knowledge, Michael, what should we do now?
Think out loud.
What is something we want to do?
>> AUDIENCE: We want to get the JPEG for each dolphin.
>> JASON HIRSCHHORN: OK.
So how can we reference--
how can we get the JPEG?
Where do we start?
Where is everything stored?
>> AUDIENCE: In the ocean_array?
>> JASON HIRSCHHORN: OK.
>> AUDIENCE: So ocean_array, dolphin--
>> JASON HIRSCHHORN: How do we get something inside--
so this gives us that object.
And we've seen this before with the struc.
So what kind of notation do we need to use?
>> AUDIENCE: It would be the dot.
>> JASON HIRSCHHORN: A dot.
And then what field?
>> AUDIENCE: Picture?
Or that's not a field--
>> JASON HIRSCHHORN: What's it called in dolphins.js?
And see, you can look.
We can just go back here.
We can see ocean_array, we can explore it.
What's it called?
>> AUDIENCE: Type.
Wait.
Picture?
I said picture.
>> JASON HIRSCHHORN: Picture.
Right.
You didn't sound like you know what you were talking about, though.
It sounded more like a guess.
So that picture, so that would give us the URL of the picture.
Jeff, you have a question?
>> AUDIENCE: Yeah, I can't get what you have on your Chrome
browser on my computer.
I just get an "uncaught reference error, console is not defined."
>> JASON HIRSCHHORN: You've set up everything?
>> AUDIENCE: Well, I think I did everything that you
did on the big screen.
>> JASON HIRSCHHORN: And you chmodded all the files?
And did you go through the whole setup?
>> AUDIENCE: I'll try it again.
>> JASON HIRSCHHORN: OK.
I skipped over that a lot at the beginning, but you need to go through
the whole setup just like at the beginning of the problem set spec.
Chmod everything and make sure it's in.
>> AUDIENCE: I will go and double check it.
I thought I did it, but I'll double check.
>> JASON HIRSCHHORN: So, this looks like it'll give us the
string and a picture.
Great.
We have the URL of the picture.
How do we now put it in--
what happens if we write just this, Michael?
>> AUDIENCE: It just gets the picture.
It doesn't actually display it.
>> JASON HIRSCHHORN: Let's see what happens.
We'll save that.
We'll run it here.
It looks like we don't get anything.
If I explore this table, it looks like inside--
yeah, looks like I don't get anything.
>> AUDIENCE: Do we have to--
>> JASON HIRSCHHORN: This is a string, this code right here.
Where do I want to put this string?
>> AUDIENCE: You want to put it in the ocean?
>> JASON HIRSCHHORN: OK.
And down here I'm putting a string called html in the ocean.
>> AUDIENCE: So would it be dollar sign, ocean, html [INAUDIBLE].
>> JASON HIRSCHHORN: That would put it straight in there.
But what if I want to add it to--
I'm already creating a string, right?
To put in the ocean, what's the name of that string?
>> AUDIENCE: HTML.
>> JASON HIRSCHHORN: HTML.
So what do I write next?
>> AUDIENCE: Equals, equals.
Or just equals?
>> JASON HIRSCHHORN: What will happen if I write equals?
>> AUDIENCE: Won't that set it equal-- or won't that--
>> AUDIENCE: Assign?
>> JASON HIRSCHHORN: It will assign it, but what will happen to everything
that was stored in it before?
>> AUDIENCE: It'll get rid of it.
>> JASON HIRSCHHORN: It'll get rid of it.
So how can I add it to the end?
I would just copy the--
>> AUDIENCE: Plus equals.
>> JASON HIRSCHHORN: Plus equals, perfect.
That's exactly right.
So now let's check out what this does.
Boom!
Oh, my goodness.
That is just a lot of text.
OK.
>> So it looks like we got a lot of text, but that's great.
You guys have done--
I know this is hard, this is new.
So far the three of you guys have done fantastic.
>> OK, you're next.
What should we do next?
We obviously don't want it to play just the string.
Yeah?
>> AUDIENCE: I just have a question.
You know, when you do ocean_array, dolphin, in the brackets, isn't
dolphin like an associative array in itself?
>> JASON HIRSCHHORN: I misspoke.
Dolphin's the index.
>> AUDIENCE: but isn't var dolphin in ocean--
I mean, when you initially load it as well, var dolphin in dolphins, isn't
that dolphin an associative array?
>> JASON HIRSCHHORN: This dolphin?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: No.
This dolphin is the index.
>> AUDIENCE: OK.
So is there a dolphin variable?
I mean, like dolphin key in the associative array?
>> JASON HIRSCHHORN: Right here?
Like, dolphin.name?
>> AUDIENCE: Yeah, is there like dolphin dot--
like isn't dolphin meant to be each object?
>> AUDIENCE: Yeah, that's what I thought, too.
>> AUDIENCE: I thought dolphin was like the associative array in DOLPHINS.
Because there's six associative arrays in DOLPHINS, right?
>> JASON HIRSCHHORN: Right.
The way we have this written now, it's not.
>> AUDIENCE: Why is it?
>> JASON HIRSCHHORN: We could do that, and there's actually a jQuery function
called .each which gives you each thing.
But this syntax is not--
I misspoke earlier-- this syntax is not that's index.
This is just giving us the indices.
But you could do dollar sign .each, which is a jQuery function.
That would give you each associate array.
So check that out.
But that's what all this code does.
>> AUDIENCE: So this first for loop, I guess that would iterate six times
because you have six indices.
And then the second for loop, isn't that iterating the
same amount of times?
>> JASON HIRSCHHORN: Yeah.
>> AUDIENCE: So there's really no-- we could have written the first for loop
again, and it would have worked.
Like, var dolphin in DOLPHINS?
>> JASON HIRSCHHORN: Yes, but we're now using an ocean_array.
We've moved everything into the ocean_array because say we ever want
to change what's in dolphins.js, or if we want to manipulate ocean_array
later on, we don't want to manipulate dolphins, the variable.
We want to manipulate a copy of it, because if we want to take something
out, this way we're just going to be safe.
Does that make sense.
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: OK.
So, Carlos, how do I take this string and make it an image instead, and get
the actual image?
You've see this code before.
How I do include an image on a page?
>> AUDIENCE: Is it the thing we did about that HTML plus equals te call dash
width, she deleted it?
>> JASON HIRSCHHORN: This stuff right here?
>> AUDIENCE: Yeah.
Kind of.
>> JASON HIRSCHHORN: don't worry about that.
That just starts the HTML string.
If I want to include an image in my HTML web page, what tag do I use?
>> AUDIENCE: I don't remember.
>> JASON HIRSCHHORN: OK.
Avie, help him out?
>> AUDIENCE: Would it be anchor, href, and then you link it?
>> JASON HIRSCHHORN: So A as in Anchor.
>> AUDIENCE: You don't need to link it, though, right?
>> JASON HIRSCHHORN: What if I just want to create an image?
>> AUDIENCE: It would be img, and then src equals whatever the string is?
>> JASON HIRSCHHORN: OK, so that's right, img.
Carlos, you're going to take it from here.
img stands for "image," and src stands for "source." and you need to give it
a URL or some--
not even a URL.
Some location where that image is stored.
So I know that that will get me an image, so now how do I put this all
together, thought?
I have some syntax I need to fix.
What exactly do I need to type, Carlos?
>> AUDIENCE: I don't get what you're trying to do.
So you're trying to put all the images into a table?
>> JASON HIRSCHHORN: We want to display all the images in the page.
And we saw how this line of code right here added strings to our HTML string
and printed them out like this.
We instead want to display images.
And we realized, Maru, told us that this line of code--
so let's look right here.
If we went and explored, we'll edit this as HTML.
Maru, said, if we do this kind of syntax, we get an image.
So does that make sense?
>> This is the type of string that we really want to put inside the ocean
dive, not simply the text itself.
>> AUDIENCE: [INAUDIBLE]
>> JASON HIRSCHHORN: Sorry?
>> AUDIENCE: Can't you just copy that one that Kianna gave,
and put it into that--
>> JASON HIRSCHHORN: Copy this, and put this right here?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: That's close, but there's one problem with this, and
what's that?
HTML is a string, and we need to add strings to it.
>> AUDIENCE: So then you put it-- nah.
>> JASON HIRSCHHORN: And we have three-- this right here is not a string.
How do we make it a string?
How do you always make something a string?
>> AUDIENCE: I don't know.
>> JASON HIRSCHHORN: If I have text, how do I make it a string?
Like up here on this line right here?
>> AUDIENCE: Put it in a table?
>> JASON HIRSCHHORN: What about this?
>> AUDIENCE: Quote.
>> JASON HIRSCHHORN: Double quotes, right?
Double quotes makes something a string.
So that makes that a string, and this is a string.
How do I put two strings together in JavaScript?
>> AUDIENCE: Dot.
>> JASON HIRSCHHORN: Not dot.
That's PHP.
>> AUDIENCE: Plus.
>> JASON HIRSCHHORN: Plus, exactly right.
So plus, and then what do you propose I do over here?
>> AUDIENCE: Another quote.
>> JASON HIRSCHHORN: Another quote, OK.
How do I end a string?
>> AUDIENCE: Another quote.
>> JASON HIRSCHHORN: Another quote.
And how do I put this string together with this string?
A plus.
That's exactly right.
You just did this for us.
This is perfect.
>> So now let's render this.
And look, we've got a whole bunch of images.
Oh, my God.
Those are scary.
We're going to explore them in a second.
Yeah, Noah?
>> AUDIENCE: I know it doesn't really matter, but should you close your
elements with image tag?
>> JASON HIRSCHHORN: We could, if we wanted, close our image
tag just like that.
Let's render that.
On, no, we can't do that.
>> AUDIENCE: Oh, I broke it.
>> JASON HIRSCHHORN: I think this is validation, though.
I don't think you need the closing slash.
OK, this is great.
Carlos, thank you.
So far the four of you guys have done an awesome job.
>> Of course, as you can see, we're creating some type of table bevel.
And I want these things to be in a table.
So how do I put these things in a table?
I clearly need some more HTML.
Assam, what kind of HTML am I missing?
>> AUDIENCE: What do you want to do, sorry?
>> JASON HIRSCHHORN: I want to put all these images in a table, so each image
should be in one column of the table.
How do I say this is one column?
You've seen this code before.
This is in P set seven.
>> AUDIENCE: I remember one was tr?
>> JASON HIRSCHHORN: tr is for row.
>> AUDIENCE: I don't know it off my heart, but I could check.
>> JASON HIRSCHHORN: Does somebody remember?
>> AUDIENCE: td?
>> JASON HIRSCHHORN: td, exactly right. td puts it as a column.
So if I put the td there, Assam, what do I need put?
What else do I need to add?
>> AUDIENCE: You have to close it?
>> JASON HIRSCHHORN: Exactly.
Where does that go?
>> AUDIENCE: Right there?
>> JASON HIRSCHHORN: Right here?
>> AUDIENCE: I think so.
>> JASON HIRSCHHORN: What's this closing right here?
What's this for?
That blue thing?
>> AUDIENCE: That's for the image.
It should go after, I think.
>> JASON HIRSCHHORN: OK, exactly right.
So let's see what this did.
Oh, that's awkward.
Let's open up ocean, table, table body, tr.
So we have a ton, but I don't see the images.
That's weird.
It looks like it built it but didn't show me the images.
Any ideas why that might be the case?
Any thoughts?
>> AUDIENCE: If you scroll down, you'll see them.
>> JASON HIRSCHHORN: Boom!
So they're there, but that's weird that they're all the way down there.
>> AUDIENCE: They're also all in a row.
>> JASON HIRSCHHORN: And they're all in a row, and they're all different sizes.
So Assam, give me one more line of code if I can make every image the
same size, and it looks like I've already indicated the size I
want them to be.
How can I make each image the same size?
Give a wild guess.
>> What about this line of code?
>> AUDIENCE: Can you make Like a constant?
>> JASON HIRSCHHORN: Or where is another place I could put this line of code,
if I just copy it?
>> AUDIENCE: All the way down on that same line?
>> JASON HIRSCHHORN: OK, let's put it in here, exactly right.
And now let's see what happens.
Oh, my goodness!
Now it looks like we're starting to get something, and it looks like they
all sort of fit in the table that we've constructed in each td.
>> Also, Assam, let's say I like their heights to be a little bit more--
the heights thing is throwing me off, so what should I set at their height?
Pick any number.
>> AUDIENCE: 200?
>> JASON HIRSCHHORN: 200.
I'm going to pick 100.
That's great.
For really like 200.
There we go!
OK, now this is starting to look a bit better and a bit more organized.
>> Any other thoughts for what we need to do to store pictures of dolphins?
Yeah?
>> AUDIENCE: Are the quotes, or the single quotes, around the values for
source, height, width, are those optional?
>> JASON HIRSCHHORN: Where are single quotes?
>> AUDIENCE: Like in some of the examples, you'd have like height
equals quote "150." Is that not necessary.
>> JASON HIRSCHHORN: So let's look down here.
If we click on ocean, go into table, you'll notice down here it actually
added those quotes for me.
>> AUDIENCE: OK.
>> JASON HIRSCHHORN: And so I realize what we're doing seems painfully slow.
We've only written three lines of code so far, or four lines of code, but
this is in fact the process that I go through every time I want
to make this website.
Line by line, using the console down here, exploring things and figuring
out step-by-step what I want to do.
So hopefully, this mimics for you guys in a good, pedagogical way what you
will actually be doing when you create your website.
>> Let's move on.
We've created these things.
I'm going to actually--
Avie, I have a big question for you.
I don't know, we'll move on.
Let's go to "train dolphin when its picture is clicked." How do you
propose I write that line of a code?
>> AUDIENCE: There is a function called "train."
>> JASON HIRSCHHORN: There's a function called "train," exactly right.
>> AUDIENCE: It expects an index.
>> JASON HIRSCHHORN: Train expects an index, so, OK.
Avie, this is exactly the reasoning that I love to see.
Train expects an index.
>> AUDIENCE: So you're going to have a for loop.
>> JASON HIRSCHHORN: Well, I want to do when a picture is clicked, so Avie,
how do I monitor when a picture is clicked?
There's a couple ways to do that.
This is the power of JavaScript and jQuery, but also the toughest part.
>> AUDIENCE: If parenthesis, not.
Or if parenthesis event, or something relatively simple?
>> JASON HIRSCHHORN: So we saw a couple ways to do this in lecture.
One thing was to, down here, you could do something like you could create a
function like on click, or do something like on click.
Everybody remember seeing something like that?
You do it inside the HTML tag.
I see some blank faces.
Some people are like, what is he talking about?
>> That's fine because I think that's the more complicated way to do it.
We're going to do a much easier way using jQuery.
So, Avie?
>> AUDIENCE: Hm?
>> JASON HIRSCHHORN: If I want to do something jQuery, I obviously start,
like before, with this dollar sign, open paren, close paren, and double
quotes in here.
Now we know I need a selector in here.
What selector do you propose would apply to every single image or every
single picture?
>> AUDIENCE: Image?
>> JASON HIRSCHHORN: That's exactly right.
That will apply to every single image.
Gets all of them.
It's not an ID, it's not a class, it's a type of tag, and this is going to
get every single one.
>> And now I'm going to tell you this for now, and you can look up more
documentation on it later, but this thing called "on" deals with events.
So what you get to do now, and which is super powerful, is say what type of
event you're looking for and what you want to do when you
receive that event.
So I'm going to give you a little bit more code, Avie, then
you've got to go, OK?
>> AUDIENCE: OK.
>> AUDIENCE: On-- we're going to say "click" in this case, which you'll
generally use.
So on click, and then we're going to pass it an anonymous function.
And this syntax you're going to see a lot, and hopefully you will
be writing a lot.
What this does is, again, on the click of something called image, whatever,
anything called image, we are going to run this anonymous function.
>> I'm not giving it a name.
I'm not passing it any arguments.
I'm just, like, creating here's a function, and here's what the code
you're going to do.
That's with this syntax means.
And also, as you'll notice, it looks very similar to this up here that we
wrote before.
>> OK, Avie.
So you want to call train on index.
Is that what you want to do?
>> AUDIENCE: Yes.
>> JASON HIRSCHHORN: That is?
OK.
Let's see what happens.
>> AUDIENCE: Wait, though.
Index isn't a variable right now.
>> JASON HIRSCHHORN: So index isn't a variable right now.
I don't know where you got it from.
>> AUDIENCE: [INAUDIBLE].
So do you need to first figure out which dolphin got clicked?
>> JASON HIRSCHHORN: Excellent.
You need to figure out which dolphin got clicked.
This is a wild shot in the dark.
Anybody have any idea how I can figure out what dolphin got clicked?
If not, I'll just give it to you, because this is pretty crazy.
OK.
So let's print out via console.log.
>> This thing.
So, dollar sign, open paren, this close paren.
So when I click on this image, I'm going to print this to the console,
and let's see what happens.
Let's go back here.
Let's go to console.
No errors, thank goodness.
>> OK.
I clicked.
Let me do that again.
I clicked this first image, and this got printed to the console,
this line of things.
I'm going to be using the word "this" a lot.
This thing right here, this, is very special, and it's doing exactly what
Avie wants it to do.
It's getting whatever was clicked on or whatever.
Because again, this selector happens to deal with many things, we don't
necessarily know which thing we're talking about, so we want to figure
out which thing we're talking about via this syntax.
In this case right here, hashtag ocean, we always know what thing we're
going to be talking about, so we never really needed this
inside a hashtag ocean.
It's always the ocean, that div.
It's an ID, only one possible thing.
>> But in this case, this applies to a lot of images, in fact, six images,
and so we want to know what particular image was clicked on.
And it looks like this is the type of information we get.
We get it looks like some large string, and we get all of this
information with this.
We get tons and tons and tons of stuff.
jQuery is super powerful.
It's giving us a ton of information about this particular HTML element.
Avie, what do we want to know about this HTML element?
>> AUDIENCE: Something like an ID.
>> JASON HIRSCHHORN: An ID.
Well, we have a source, a width, and a height.
>> AUDIENCE: We can use a source.
>> JASON HIRSCHHORN: We can use the source.
That'll give us a string, a URL string.
What are we going to do with that once we have that?
How do we get back to our index in ocean_array?
>> AUDIENCE: We can compare it to the other.
>> JASON HIRSCHHORN: So we could loop through each.
Now we could loop again and then compare this.
Envision what would be a simpler way, if you could just imagine one?
>> AUDIENCE: Not having to loop.
>> JASON HIRSCHHORN: Not having to loop.
>> AUDIENCE: Just figuring out dolphin, [INAUDIBLE].
>> JASON HIRSCHHORN: Figuring out what dolphin.
OK.
So let's save that information in this image tag.
And again, right now, part of this stuff is just magical because I might
be showing you this for the first time, but hopefully these are things
you're going to be doing.
So this is something magical you can do.
You can save some extra metadata in an element.
It won't show up, it won't affect anything.
You can just save it there.
And I propose we save the index with each image.
>> So the way you do that is you create an attribute called data dash, and
then whatever name you want to give it.
Data dash is a special thing that is given to you, and it says this is
something the user is going to create.
So we are creating this thing called index, this key called index.
>> And inside of it, we are going to put not just one every time, but what do
we put inside of it, Avie?
What goes right here?
>> AUDIENCE: Dolphin.
>> JASON HIRSCHHORN: Dolphin.
That is not that word.
Dolphin.
And again, we already printed dolphin earlier, that 0, 1, 2, 3, 4, 5, and
we're saving that with the image.
>> So now, if I do-- and again, we save that metadata.
How do you access that metadata?
It's with a function just called "data." And you need to pass it one
and only one argument, which is the name of the thing.
So I'm going to print this out, and then I'll take questions.
But essentially, I'm saying give me this object that was clicked on, look
at all of its data attributes, and the one called "indexed,"
give me that value.
>> And let's see what happens when we refresh this page.
Exactly what we expected.
Again, that was pretty magical.
We just did a lot right there.
Who has any questions about that?
Yeah?
>> AUDIENCE: I just have a question about your live code.
You use like a single quote, double quote, like right there.
>> JASON HIRSCHHORN: Right here.
>> AUDIENCE: Yeah.
Is there a reason why you do the single quote, double quote?
>> JASON HIRSCHHORN: There's a reason, and this goes back to what Marcus
asked earlier.
In this line, I was being a bit better at my coding.
I want this, and this is what I honestly should have done all of the
time, for width and height in particular.
Let's look down here.
You'll see right here, can you see that?
I know it's kind of small, but data dash index is in double quotes.
Those things always need to be in double quotes.
The value always needs to be in double quotes.
>> But here, if I did a double quote, that would end this string right here,
and now I wouldn't be typing in a string.
So I get around that by just using a single quote, because a single quote
doesn't end the JavaScript string, but in HTML it doesn't care if you're
giving it single quotes or double quotes.
It'll just interpret it like double quotes.
Does that make sense?
Yeah?
>> AUDIENCE: How do you get that IP address in the bottom of your client?
Mine says no IP address.
Is there something I should have done in [INAUDIBLE].
>> JASON HIRSCHHORN: In your appliance, it has nothing?
>> AUDIENCE: Yes.
>> JASON HIRSCHHORN: There is something you can do to fix it, but I'm not
going to spend time walking through that right now.
But we can do it after section.
>> AUDIENCE: If you go back to the console, why was the
number listed 012321?
>> JASON HIRSCHHORN: Console?
Oh, because I just was clicking around wildly.
>> AUDIENCE: Oh, OK.
Never mind.
>> JASON HIRSCHHORN: And again, I can click on something a bajillion times.
>> AUDIENCE: I have a question about your loop again, your for loops.
Because you know in P set eight, they use a different form of that loop.
So they do like var i equals 0, i less than, ocean_array.length, i++.
Are those equivalent?
>> JASON HIRSCHHORN: That is a standard for loop.
Or yeah, that's the for loops.
In fact, we've seen that's equivalent.
>> AUDIENCE: So that's equivalent to what you've done here?
Is one considered better than the other?
>> JASON HIRSCHHORN: No.
>> So, again, we have gone over some things.
We've now moved out our comfort zone and started doing some really cool
things that we haven't necessarily gone over in class before, but will
hopefully be very powerful for you when coding.
>> Avie, let's go back up here.
I have the index of the dolphin.
Now what do I need to do?
>> AUDIENCE: You need to train it.
So instead of putting console.log, you can set a variable equal to that?
>> JASON HIRSCHHORN: OK.
So?
>> AUDIENCE: I'm not sure if you can do that.
>> JASON HIRSCHHORN: So var x equals this, whatever this returns,
it'll return it.
Doesn't matter.
It can return any variable.
There's no types here.
>> AUDIENCE: Or you could just do the function call.
>> JASON HIRSCHHORN: Yeah, why don't I do that?
Just do the function call.
>> AUDIENCE: Yeah.
Put another set of parentheses.
>> JASON HIRSCHHORN: Perfect.
That's exactly right.
So that will call the train function.
Of course, nothing is in the train function, so propose, Akshar, what I
should do in the train function.
Give me some pseudo code.
>> AUDIENCE: I think you should remove the dolphin from the original table.
>> JASON HIRSCHHORN: And this is getting to Noah earlier why we copy
it into a new array.
Right, because we don't to edit our dolphins array because what if another
program's using it or what if we want to access it somewhere else?
We do want to make a copy, and that's the one we're going to edit.
>> AUDIENCE: Then you position it in your new location.
>> JASON HIRSCHHORN: And what do we need to do after that?
>> AUDIENCE: And then you print out the information about the dolphin.
>> JASON HIRSCHHORN: That's exactly right.
We remove it from the ocean_array, we put it in the pool, and then we draw
the ocean in the pool.
How do I remove the dolphin from the ocean_array?
>> AUDIENCE: You go to the index.
Oh, OK.
Use a splice function.
>> JASON HIRSCHHORN: OK, So that's right.
I could use a splice function which takes something out from an array and
condenses it.
That's something new we haven't seen before.
But I actually want to keep a space there because I want to print out a
blank space in the ocean.
>> AUDIENCE: So then you can set the image of that index, the ocean_array
index dot picture.
>> JASON HIRSCHHORN: OK, ocean_array, index.
>> AUDIENCE: Dot picture.
>> JASON HIRSCHHORN: Dot picture.
>> AUDIENCE: And you set it to null?
>> JASON HIRSCHHORN: Equals null.
OK.
So nothing's there, so then how do I put in the pool?
Constantine, how do I put it in the pool?
We have this variable we called, called pool, up here.
>> AUDIENCE: Do we just do equals ocean_array index?
>> AUDIENCE: Shouldn't you switch the order?
>> JASON HIRSCHHORN: One sec.
Yeah?
>> AUDIENCE: Yeah, that was actually a good point.
>> JASON HIRSCHHORN: What goes here?
>> AUDIENCE: Is it index?
>> JASON HIRSCHHORN: Index, exactly.
And what did you say, Constantine, is something we should do?
>> AUDIENCE: We should maybe switch the order.
>> JASON HIRSCHHORN: And why should we switch the order, maybe?
>> AUDIENCE: Because at that point it's already null.
>> JASON HIRSCHHORN: So it's not all null, but we've lost the image URL.
Have we lost it forever?
>> AUDIENCE: Technically no?
>> JASON HIRSCHHORN: Have we lost it forever?
>> AUDIENCE: No.
>> JASON HIRSCHHORN: Well, where is it?
>> AUDIENCE: In your original dolphin--
>> JASON HIRSCHHORN: It's in dolphins, but in ocean_array
we've lost it forever.
So Constantine, can you propose a better way to write this line?
Actually, sorry, it's saved in pool.
We have it in pool because pool is an object, right?
Ocean_array index, an ocean_array is an array of objects.
>> So pool is an object, and we have a URL in there, and down
here it's set to null.
So actually, we haven't lost it forever.
It's just saved in pool.
But it's certainly not in ocean_array, and like you said, Carlos, it is in
the dolphins array.
>> So this looks sweet.
And then how do we draw the ocean and the pool?
Mario?
>> AUDIENCE: You can just call draw_pool and draw_ocean?
So like, draw_pool, and then--
well, yeah, it doesn't take anything.
>> JASON HIRSCHHORN: Great.
What's draw_pool going to do?
>> AUDIENCE: Draw the pool?
>> JASON HIRSCHHORN: Yeah, well, what's it going to do?
>> AUDIENCE: Sorry.
You could do the same thing, like have a--
>> JASON HIRSCHHORN: Hold on, we're going to get there.
Nothing.
It does nothing right now.
Let's see if this works, though.
Who gave us that code?
Akshar and Constantine gave us that code?
OK, let's see what happens.
>> Ah!
That was so exciting.
It's gone.
Oh, boy.
That's kind of ugly.
Well, we can go back and fix that later.
I wonder where it is?
We saved it in that pool variable.
How can I figure out if it's in that pool variable?
Well, again, the power of JavaScript, and in particular the tools that
Chrome gives you, is you can now inspect that pool variable.
It's global, remember?
We didn't put the var keyword.
So if I type Enter right here, Constantine, what do you think I'm
going to get when I hit Enter?
>> AUDIENCE: I don't know.
>> JASON HIRSCHHORN: Guess.
>> AUDIENCE: Nothing?
>> JASON HIRSCHHORN: Nothing, wrong.
That was a good guess, though.
I got the object.
Remember you gave me that line of code.
Pool, you saved in that variable an object.
And indeed, we see the object you saved in it.
That's awesome.
We can inspect from here.
It's almost like real time GDB that we can look through our code and
figure stuff out.
That is super cool and super powerful.
>> OK, let's finish this up.
Let's draw the pool in five minutes.
Maru, give me a line of code to draw the pool.
>> AUDIENCE: You could have another variable HTML, but/for.
>> JASON HIRSCHHORN: Let's make it very simple for now.
Let's just print the name of the dolphin we're training.
>> AUDIENCE: And then you can do dollar sign, open parentheses,
and then open quote.
I guess pound pool, if that was a thing.
I don't remember.
>> JASON HIRSCHHORN: Let's look back.
I think it's a thing.
>> AUDIENCE: OK, yeah.
And then close quote, close parentheses .html, open parentheses,
and then I guess pool, like open bracket 0 or something like that.
Close dot name.
I don't know if that works.
>> AUDIENCE: OK, let's see what happens.
"Cannot read property name of undefined." So again, here's what
we're going to check out.
We're going to explore this.
You did pool, open bracket0, .name.
Again, I do this all the time, and I'm confused what's going on, what does
this warning mean.
Let's look at pool.
Let's look at pool bracket 0, undefined.
So that's where we're running into our problem, right?
Pool bracket 0 does not, obviously, exist.
What do you think does exist?
>> AUDIENCE: Is pool just an object by itself?
>> JASON HIRSCHHORN: Well, what does it say right here?
When we hit Enter on pool, what does it say it is?
>> AUDIENCE: Object.
>> JASON HIRSCHHORN: It is an object, so?
>> AUDIENCE: Oh, yeah.
So just pool.name instead of--
>> JASON HIRSCHHORN: Pool.name gives exactly what you wanted.
And I realize I'm going through this slowly and belaboring this point, but
this is exactly how I do this stuff.
You're going to run into these bugs during your final project, so I hope
this is empowering you to be able to use all these tools.
These are crucial and will get you super duper far.
>> So I don't want to just print out the name.
Let's make it a little bit nicer than this.
>> AUDIENCE: What else do we want to do?
>> JASON HIRSCHHORN: OK, fine.
We'll do just this.
Ugh.
Guys, you have no life.
>> OK, boom, got it.
Looks good.
You'll see, Akshar, down here, we have null, not found.
So it looks like it's still trying to find some image, and that didn't do
exactly what we wanted to do.
We're not going to go into that now, but there's probably a cleaner way of
doing this.
>> AUDIENCE: Could you leave like a blank space for the image?
Like instead of setting it to null, could you set it to like a blank
string or something?
>> JASON HIRSCHHORN: Like this?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: [INAUDIBLE].
Not found.
So there's a better way of doing it.
I would propose doing this.
Just setting null there.
Then of course, what's going to happen?
It's going to go away entirely.
So if we wanted to keep a space and do that, we probably want to do something
up here as well.
I'm going to get you started.
Akshar, give me this line of code really quick.
>> AUDIENCE: If ocean_array, dolphin, equals, equals, equals-- equals null?
Yeah.
>> JASON HIRSCHHORN: Then what?
>> AUDIENCE: Then do html.
You just copy the bottom code, really.
>> JASON HIRSCHHORN: Copy what?
>> AUDIENCE: You can copy the--
>> JASON HIRSCHHORN: This?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: All of it?
We don't have an image.
>> AUDIENCE: I mean you can just leave a--
yeah, you can just close it.
But I think you have to set the width.
>> JASON HIRSCHHORN: Well, just create an empty column.
OK.
And then in that case, we'll probably want to do this as well.
>> Oops.
Oh.
Didn't work, but we're not getting that error.
Let's see what happened down here.
>> So there's nothing there, so what did you say we should add?
>> AUDIENCE: We should set the width of the row.
>> JASON HIRSCHHORN: To what?
>> AUDIENCE: I think it's 150.
>> AUDIENCE: Yeah, it was 150.
>> JASON HIRSCHHORN: We'll put this here to keep my code consistent.
But this isn't one.
OK, good.
Posted.
OK?
So it's still going away.
>> AUDIENCE: Oh, call width?
>> JASON HIRSCHHORN: It looks like the width is 150.
Let's see.
Now we're going to do the final, cool, powerful thing that I'm
going to show you.
We're not going to finish this code, but online before we quit, all of this
code will be correct.
I'll email you the corrected version with some of my own styling after
section, and that'll be posted online.
I encourage you to keep exploring this and use this as a reference, but I
want to show you the final tool for this class, and that is over here on
the right hand side.
And we looked at this last week, but now hopefully it's a bit more familiar
to you and comfortable.
>> You can dynamically play with the CSS of a page.
We've actually already seen us dynamically play with the HTML.
Remember we did the right click Edit As HTML?
Right here?
So we've dynamically played with the HTML.
>> In the console, you can dynamically play with the JavaScript of a page.
For example, that's a valid JavaScript line.
Boom, I got exactly what I wanted.
So we can dynamically play with the HTML, dynamically play with the
JavaScript.
Now we're going to dynamically play with the CSS.
>> And all of this is because it's like instant, live GDB feedback, and so you
can know something's right before having to go your code, and you can
not guess what something's going to look like.
So this is super duper cool.
>> And let's finally look at dynamically playing with the CSS.
That's over here on the right hand side, element.style.
Let's go to this.
Here's our element.
Let's give it some extra CSS.
>> Or sorry, we could give it some extra CSS, but we probably, in this case,
want to change this attribute.
So let's go down here to this line.
Oh, I can't do that here.
Sorry.
Edit AS--
so that is how you could edit the CSS.
We are not going to edit the CSS at this second, but we do want to edit
the HTML and give it an extra attribute.
What did you propose changing this to?
I thought Avie had a suggestion.
>> AUDIENCE: Col width?
>> JASON HIRSCHHORN: That looked like it didn't do anything either.
Let's try the CSS.
>> AUDIENCE: [INAUDIBLE] class?
>> JASON HIRSCHHORN: It says it doesn't work.
It gives that yellow thing.
>> AUDIENCE: But [INAUDIBLE].
>> AUDIENCE: Aren't you setting the width of an image to 150 when you do that?
Like wouldn't you just use width?
>> JASON HIRSCHHORN: Yeah.
>> AUDIENCE: But we don't have an image anymore.
>> JASON HIRSCHHORN: No.
We don't have anything in there.
So we're not going to solve the specific problem.
We're going to go back to Akshar's solution, because I want to set a
dolphin free for the time being, or that's the last
thing I want to finish.
So we're going to leave this here while recognizing it's not quite
correct, and we're going to come back to it.
>> Sorry.
I said we can dynamically change the CSS.
Let's look at that and do that really quickly.
So if I inspect this element down here, and say I want to make it blue,
you can come over here, color, because I know that changes the color of
something, and we saw how it changed it blue.
So that's me dynamically changing the CSS.
Doesn't change it for good, but then I can go back into my CSS file and
change the color of an object.
>> OK.
That was a lot.
We didn't finish my amazing program.
Let me just show you it real quick, and then we'll head out.
Oh, where is it?
No!
Hold on.
>> OK, so as you're packing up, an amazing preview, or front
view, of next time.
This is Dolphin Trainer 2013, and it doesn't work.
Great.
>> [LAUGHTER]
>> JASON HIRSCHHORN: Oh!
Boom!
What does this mean?
>> AUDIENCE: You didn't chmod.
>> JASON HIRSCHHORN: I didn't chmod it.
>> AUDIENCE: Row one.
>> JASON HIRSCHHORN: Oh, look at that.
OK.
So, I have my six dolphins.
What happens?
Let's see.
If I train one, now training Lili.
Oh, I want to set you free, Lili.
There you go, back in the ocean.
>> So that was this week.
If you have any questions, we'll be outside.
And again, I'll send you the rest of this code.
Thank you, guys.