1
00:00:00,000 --> 00:00:00,988

2
00:00:00,988 --> 00:00:09,880
>> [MUSIC PLAYING]

3
00:00:09,880 --> 00:00:13,360
>> SPEAKER 1: Well, here we are,
the last P set in CS50.

4
00:00:13,360 --> 00:00:17,040
Congratulate yourselves from having
come so far since your first hello

5
00:00:17,040 --> 00:00:20,090
worlds and printing out
pyramids for Mario.

6
00:00:20,090 --> 00:00:21,930
You made a website last week.

7
00:00:21,930 --> 00:00:25,110
And we're going to be making another one
this week, one that allows you to

8
00:00:25,110 --> 00:00:28,570
drive around the Harvard campus, picking
up CS50 staff members, and

9
00:00:28,570 --> 00:00:31,910
bringing them back to their
residential houses.

10
00:00:31,910 --> 00:00:35,400
>> Now last week we worked in PHP,
a server side language.

11
00:00:35,400 --> 00:00:38,250
For this P set, we're getting introduced
to JavaScript, which is a

12
00:00:38,250 --> 00:00:40,600
client side language.

13
00:00:40,600 --> 00:00:44,010
So let's take a look at some of the
distribution code that's provided to

14
00:00:44,010 --> 00:00:46,210
you for this P set.

15
00:00:46,210 --> 00:00:49,700
>> In the JavaScript folder, there will
be a bunch of JavaScript files.

16
00:00:49,700 --> 00:00:53,600
There's buildings.js, which contains an
array of buildings around Harvard

17
00:00:53,600 --> 00:00:57,340
campus, with their information
and position.

18
00:00:57,340 --> 00:01:01,630
Houses.js is an array of Harvard
residential houses, with their

19
00:01:01,630 --> 00:01:04,030
latitudes and longitudes.

20
00:01:04,030 --> 00:01:07,020
Passengers.js contains an
array of passengers--

21
00:01:07,020 --> 00:01:08,600
the CS50 staff members--

22
00:01:08,600 --> 00:01:11,640
that you'll be bringing back to
their residential houses.

23
00:01:11,640 --> 00:01:16,450
>> Math3D.js, that contains a lot of
functions to do with the movement.

24
00:01:16,450 --> 00:01:19,500
If you're mathematically minded,
then I welcome you take a look.

25
00:01:19,500 --> 00:01:23,530
But you don't need to understand
everything in there.

26
00:01:23,530 --> 00:01:26,710
Shuttle.js, that deals with
the shuttle's movement.

27
00:01:26,710 --> 00:01:31,450
And index.html is the home page where
everything happens, really, where the

28
00:01:31,450 --> 00:01:33,610
user is interacting with the site.

29
00:01:33,610 --> 00:01:39,110
>> Service.css is the CSS style sheet,
which, in addition to the Twitter

30
00:01:39,110 --> 00:01:43,960
Bootstrap library, controls
how index.html looks.

31
00:01:43,960 --> 00:01:48,190
And then we also have service.js, which
contains service functions for

32
00:01:48,190 --> 00:01:49,010
the shuttle.

33
00:01:49,010 --> 00:01:53,010
And here's where you're going to be
filling in some of the to dos.

34
00:01:53,010 --> 00:01:56,600
>> Now let's take a look at objects and
associative arrays in JavaScript,

35
00:01:56,600 --> 00:01:59,360
which for all intents and purposes
are interchangeable.

36
00:01:59,360 --> 00:02:03,030
If I wanted to make an object a variable
called a wand, I would

37
00:02:03,030 --> 00:02:04,290
declare it.

38
00:02:04,290 --> 00:02:08,789
And inside those curly braces I would
specify the core is unicorn.

39
00:02:08,789 --> 00:02:10,220
The wood is cherry.

40
00:02:10,220 --> 00:02:12,710
And the length is 13.

41
00:02:12,710 --> 00:02:16,370
>> Now I can also access values
of objects using

42
00:02:16,370 --> 00:02:18,270
associative array notation.

43
00:02:18,270 --> 00:02:22,610
So wand index core, I can set
that equal to unicorn, or

44
00:02:22,610 --> 00:02:24,710
check that, if I need.

45
00:02:24,710 --> 00:02:26,510
Or I can use the dot operator.

46
00:02:26,510 --> 00:02:30,280
Wand dot wood equals cherry,
and so on, and so forth.

47
00:02:30,280 --> 00:02:33,930
So you see that associative arrays and
objects in JavaScript are going to be

48
00:02:33,930 --> 00:02:37,720
interchangeable, and will
come in quite handy.

49
00:02:37,720 --> 00:02:41,570
>> Then we see an array of buildings
in buildings.js.

50
00:02:41,570 --> 00:02:43,870
Again, an array of objects.

51
00:02:43,870 --> 00:02:48,500
If I wanted to make an array of the best
buildings on Harvard campus, then

52
00:02:48,500 --> 00:02:49,710
I would make it as follows.

53
00:02:49,710 --> 00:02:55,250
Using this object notation, where
I store the root, name, address,

54
00:02:55,250 --> 00:03:00,260
latitude, and longitude for every
single building object.

55
00:03:00,260 --> 00:03:02,930
>> Let's quickly talk about variables
in JavaScript.

56
00:03:02,930 --> 00:03:07,760
Like PHP, JavaScript variables
are weakly or loosely typed.

57
00:03:07,760 --> 00:03:14,120
To create a local variable, you prefix
the variable name with the V-A-R, var.

58
00:03:14,120 --> 00:03:17,010
>> Now in JavaScript, functions will
limit the scope of variables.

59
00:03:17,010 --> 00:03:20,600
So if you have a local variable within
a function, then other functions

60
00:03:20,600 --> 00:03:22,060
can't access it.

61
00:03:22,060 --> 00:03:26,090
But unlike C, loops and conditions don't
limit the scope of a variable.

62
00:03:26,090 --> 00:03:30,600
>> So even if you declare it inside of a
condition, the whole function will

63
00:03:30,600 --> 00:03:32,810
have access to it.

64
00:03:32,810 --> 00:03:35,820
Now without var, the variable
will be global.

65
00:03:35,820 --> 00:03:39,170
So if you just declare the name and
assign a value, then that variable

66
00:03:39,170 --> 00:03:41,900
will be a global variable
in JavaScript.

67
00:03:41,900 --> 00:03:48,480
>> Now in houses, we have an associative
array of house type objects, where

68
00:03:48,480 --> 00:03:52,100
every house is just a latitude
and a longitude.

69
00:03:52,100 --> 00:03:55,140
Then we have the passengers
array, which is an array

70
00:03:55,140 --> 00:03:57,370
of object type passenger.

71
00:03:57,370 --> 00:04:01,620
So every passenger has a username,
a name, and a house.

72
00:04:01,620 --> 00:04:04,840
Notice that I'm seeing of type
passenger, which really just means

73
00:04:04,840 --> 00:04:08,150
that every object has the
same key value pair.

74
00:04:08,150 --> 00:04:12,830
So every object of type passenger has
a user name, a name, and a house.

75
00:04:12,830 --> 00:04:14,850
>> So what do we need to
do for the P set?

76
00:04:14,850 --> 00:04:20,779
Well, we need to allow users to pick
up staff members, to display all of

77
00:04:20,779 --> 00:04:25,090
the staff members that are currently in
our shuttle, and to drop them off.

78
00:04:25,090 --> 00:04:29,280
And then we'll also talk about extra
features that can be implemented for

79
00:04:29,280 --> 00:04:30,980
the shuttle P set.

80
00:04:30,980 --> 00:04:33,610
>> But let's talk about pickup first.

81
00:04:33,610 --> 00:04:37,480
The faces of CS50 staff have been
planted all over campus, where each

82
00:04:37,480 --> 00:04:41,750
face is implemented as a place mark
on the 3D earth, and as a

83
00:04:41,750 --> 00:04:44,030
marker on the 2D map.

84
00:04:44,030 --> 00:04:47,880
So when the user clicks the pickup
button, we want to add nearby

85
00:04:47,880 --> 00:04:49,590
passengers to the shuttle.

86
00:04:49,590 --> 00:04:53,650
And we also want to remove their place
mark from the world, and remove their

87
00:04:53,650 --> 00:04:58,060
marker from the map, indicating that
they're in our shuttle now.

88
00:04:58,060 --> 00:05:02,520
>> So how do we detect if passengers
are within range of our shuttle?

89
00:05:02,520 --> 00:05:04,610
Well, the function distance--

90
00:05:04,610 --> 00:05:08,770
so shuttle dot distance, passing in
the latitude and longitude, will

91
00:05:08,770 --> 00:05:12,030
calculate the distance from the current
position of the shuttle to the

92
00:05:12,030 --> 00:05:15,850
point that you specify with that
given latitude and longitude.

93
00:05:15,850 --> 00:05:19,180
So you can use this to calculate the
distance from the shuttle to the

94
00:05:19,180 --> 00:05:20,310
passengers.

95
00:05:20,310 --> 00:05:24,040
>> But how do you know where
the passengers are?

96
00:05:24,040 --> 00:05:27,510
Well, that's where we'll have to
edit the populate function.

97
00:05:27,510 --> 00:05:32,500
Populate places all of the staff members
and passengers into the world,

98
00:05:32,500 --> 00:05:36,300
and into the map, but doesn't
store their location.

99
00:05:36,300 --> 00:05:39,850
So perhaps you can store their
place marks and markers

100
00:05:39,850 --> 00:05:41,570
in some global array.

101
00:05:41,570 --> 00:05:45,780
>> Now there already is a global array
storing information from passengers.

102
00:05:45,780 --> 00:05:49,960
The passengers array stores each
passenger's name and their house.

103
00:05:49,960 --> 00:05:54,985
So maybe you can add a few parameters
there to the passenger objects.

104
00:05:54,985 --> 00:05:59,290
>> To help us detect all the passengers
within range of our shuttle, let's

105
00:05:59,290 --> 00:06:02,500
loop through all of the passengers
in the passengers array.

106
00:06:02,500 --> 00:06:07,790
A for loop in JavaScript might look
something like this, very similar to

107
00:06:07,790 --> 00:06:12,910
those for loop in C. Or we can use an
alternative for loop structure.

108
00:06:12,910 --> 00:06:17,130
>> For var i in array, where I
will still be the index.

109
00:06:17,130 --> 00:06:20,740
But you don't need to specify
the array dot length

110
00:06:20,740 --> 00:06:23,310
condition, and i plus plus.

111
00:06:23,310 --> 00:06:26,140
Every passenger's location is
given by their place mark.

112
00:06:26,140 --> 00:06:29,800
>> But the place mark isn't the
latitude and the longitude.

113
00:06:29,800 --> 00:06:34,575
We have to access those parameters by
getting the geometry, using get

114
00:06:34,575 --> 00:06:35,900
geometry on the place mark.

115
00:06:35,900 --> 00:06:39,630
And then once we have the geometry,
getting either the latitude or the

116
00:06:39,630 --> 00:06:42,600
longitude, using those functions.

117
00:06:42,600 --> 00:06:45,680
>> So now we know how to detect whether
passengers are within

118
00:06:45,680 --> 00:06:47,920
range of our shuttle.

119
00:06:47,920 --> 00:06:52,050
Once we have those passengers, we'll
want to add any passengers that are

120
00:06:52,050 --> 00:06:53,140
within that range.

121
00:06:53,140 --> 00:06:57,580
We want to allow them to hop on, and
take a seat on our shuttle, but only

122
00:06:57,580 --> 00:06:59,640
if we have enough room for them.

123
00:06:59,640 --> 00:07:04,120
>> The shuttle dot seats array will
indicate whether seats are empty, or

124
00:07:04,120 --> 00:07:05,890
who's in that seat.

125
00:07:05,890 --> 00:07:11,170
So if a seat is empty, then
that seat will be null.

126
00:07:11,170 --> 00:07:15,930
So iterate over the seats array,
checking for empty seats, storing

127
00:07:15,930 --> 00:07:20,020
passengers into those seats until you
don't have any more empty seats.

128
00:07:20,020 --> 00:07:23,330
And unfortunately, any other passengers
will have to wait for the

129
00:07:23,330 --> 00:07:26,000
next time the shuttle comes around.

130
00:07:26,000 --> 00:07:30,280
>> Once they get on the shuttle, we'll want
to remove their place mark, which

131
00:07:30,280 --> 00:07:32,540
is their photo in the 3D world.

132
00:07:32,540 --> 00:07:38,030
If I wanted to remove a place mark p,
then I would get all of the features

133
00:07:38,030 --> 00:07:42,790
from my earth, from the Google Earth,
and then remove that specific place

134
00:07:42,790 --> 00:07:45,910
mark using the removeChild function.

135
00:07:45,910 --> 00:07:51,360
Then lastly, let's remove the marker,
the icon on the 2D map for any

136
00:07:51,360 --> 00:07:53,650
passenger that we are picking up.

137
00:07:53,650 --> 00:07:59,790
To remove a marker, m, then I'll
just execute m dot setMap null.

138
00:07:59,790 --> 00:08:02,920
Do this for any passengers within range,
and you've finished pickup.

139
00:08:02,920 --> 00:08:05,056