>> [MUSIC PLAYING]
>> SPEAKER 1: Well, here we are, the last P set in CS50.
Congratulate yourselves from having come so far since your first hello
worlds and printing out pyramids for Mario.
You made a website last week.
And we're going to be making another one this week, one that allows you to
drive around the Harvard campus, picking up CS50 staff members, and
bringing them back to their residential houses.
>> Now last week we worked in PHP, a server side language.
For this P set, we're getting introduced to JavaScript, which is a
client side language.
So let's take a look at some of the distribution code that's provided to
you for this P set.
>> In the JavaScript folder, there will be a bunch of JavaScript files.
There's buildings.js, which contains an array of buildings around Harvard
campus, with their information and position.
Houses.js is an array of Harvard residential houses, with their
latitudes and longitudes.
Passengers.js contains an array of passengers--
the CS50 staff members--
that you'll be bringing back to their residential houses.
>> Math3D.js, that contains a lot of functions to do with the movement.
If you're mathematically minded, then I welcome you take a look.
But you don't need to understand everything in there.
Shuttle.js, that deals with the shuttle's movement.
And index.html is the home page where everything happens, really, where the
user is interacting with the site.
>> Service.css is the CSS style sheet, which, in addition to the Twitter
Bootstrap library, controls how index.html looks.
And then we also have service.js, which contains service functions for
the shuttle.
And here's where you're going to be filling in some of the to dos.
>> Now let's take a look at objects and associative arrays in JavaScript,
which for all intents and purposes are interchangeable.
If I wanted to make an object a variable called a wand, I would
declare it.
And inside those curly braces I would specify the core is unicorn.
The wood is cherry.
And the length is 13.
>> Now I can also access values of objects using
associative array notation.
So wand index core, I can set that equal to unicorn, or
check that, if I need.
Or I can use the dot operator.
Wand dot wood equals cherry, and so on, and so forth.
So you see that associative arrays and objects in JavaScript are going to be
interchangeable, and will come in quite handy.
>> Then we see an array of buildings in buildings.js.
Again, an array of objects.
If I wanted to make an array of the best buildings on Harvard campus, then
I would make it as follows.
Using this object notation, where I store the root, name, address,
latitude, and longitude for every single building object.
>> Let's quickly talk about variables in JavaScript.
Like PHP, JavaScript variables are weakly or loosely typed.
To create a local variable, you prefix the variable name with the V-A-R, var.
>> Now in JavaScript, functions will limit the scope of variables.
So if you have a local variable within a function, then other functions
can't access it.
But unlike C, loops and conditions don't limit the scope of a variable.
>> So even if you declare it inside of a condition, the whole function will
have access to it.
Now without var, the variable will be global.
So if you just declare the name and assign a value, then that variable
will be a global variable in JavaScript.
>> Now in houses, we have an associative array of house type objects, where
every house is just a latitude and a longitude.
Then we have the passengers array, which is an array
of object type passenger.
So every passenger has a username, a name, and a house.
Notice that I'm seeing of type passenger, which really just means
that every object has the same key value pair.
So every object of type passenger has a user name, a name, and a house.
>> So what do we need to do for the P set?
Well, we need to allow users to pick up staff members, to display all of
the staff members that are currently in our shuttle, and to drop them off.
And then we'll also talk about extra features that can be implemented for
the shuttle P set.
>> But let's talk about pickup first.
The faces of CS50 staff have been planted all over campus, where each
face is implemented as a place mark on the 3D earth, and as a
marker on the 2D map.
So when the user clicks the pickup button, we want to add nearby
passengers to the shuttle.
And we also want to remove their place mark from the world, and remove their
marker from the map, indicating that they're in our shuttle now.
>> So how do we detect if passengers are within range of our shuttle?
Well, the function distance--
so shuttle dot distance, passing in the latitude and longitude, will
calculate the distance from the current position of the shuttle to the
point that you specify with that given latitude and longitude.
So you can use this to calculate the distance from the shuttle to the
passengers.
>> But how do you know where the passengers are?
Well, that's where we'll have to edit the populate function.
Populate places all of the staff members and passengers into the world,
and into the map, but doesn't store their location.
So perhaps you can store their place marks and markers
in some global array.
>> Now there already is a global array storing information from passengers.
The passengers array stores each passenger's name and their house.
So maybe you can add a few parameters there to the passenger objects.
>> To help us detect all the passengers within range of our shuttle, let's
loop through all of the passengers in the passengers array.
A for loop in JavaScript might look something like this, very similar to
those for loop in C. Or we can use an alternative for loop structure.
>> For var i in array, where I will still be the index.
But you don't need to specify the array dot length
condition, and i plus plus.
Every passenger's location is given by their place mark.
>> But the place mark isn't the latitude and the longitude.
We have to access those parameters by getting the geometry, using get
geometry on the place mark.
And then once we have the geometry, getting either the latitude or the
longitude, using those functions.
>> So now we know how to detect whether passengers are within
range of our shuttle.
Once we have those passengers, we'll want to add any passengers that are
within that range.
We want to allow them to hop on, and take a seat on our shuttle, but only
if we have enough room for them.
>> The shuttle dot seats array will indicate whether seats are empty, or
who's in that seat.
So if a seat is empty, then that seat will be null.
So iterate over the seats array, checking for empty seats, storing
passengers into those seats until you don't have any more empty seats.
And unfortunately, any other passengers will have to wait for the
next time the shuttle comes around.
>> Once they get on the shuttle, we'll want to remove their place mark, which
is their photo in the 3D world.
If I wanted to remove a place mark p, then I would get all of the features
from my earth, from the Google Earth, and then remove that specific place
mark using the removeChild function.
Then lastly, let's remove the marker, the icon on the 2D map for any
passenger that we are picking up.
To remove a marker, m, then I'll just execute m dot setMap null.
Do this for any passengers within range, and you've finished pickup.