[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.