1
00:00:00,000 --> 00:00:09,870

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: Eh bien, nous sommes ici,
le dernier p-set dans CS50.

3
00:00:13,360 --> 00:00:17,040
Vous féliciter d'avoir
venir jusqu'ici depuis votre premier Bonjour

4
00:00:17,040 --> 00:00:20,090
Mondes et d'impression maximale
Pyramides pour Mario.

5
00:00:20,090 --> 00:00:21,930
Vous avez fait un site Web la semaine dernière.

6
00:00:21,930 --> 00:00:25,110
Et nous allons faire un autre
cette semaine, celui qui vous permet de

7
00:00:25,110 --> 00:00:28,570
faire le tour du campus de Harvard, la cueillette
jusqu'à membres du personnel de CS50 et

8
00:00:28,570 --> 00:00:31,910
les ramener à leur
maisons d'habitation.

9
00:00:31,910 --> 00:00:35,400
>> Maintenant, la semaine dernière, nous avons travaillé en PHP,
un langage côté serveur.

10
00:00:35,400 --> 00:00:38,250
Pour cette p-ensemble, nous allons nous introduit
à JavaScript qui est un

11
00:00:38,250 --> 00:00:40,610
client langue de côté.

12
00:00:40,610 --> 00:00:44,020
Donc, nous allons jeter un oeil à quelques-uns des
Code de distribution qui est fourni à

13
00:00:44,020 --> 00:00:46,210
vous pour cette p-ensemble.

14
00:00:46,210 --> 00:00:49,700
Dans le dossier JavaScript, il y aura
un tas de fichiers JavaScript.

15
00:00:49,700 --> 00:00:53,600
>> Il ya buildings.js, qui contient un
ensemble de bâtiments autour de Harvard

16
00:00:53,600 --> 00:00:57,340
campus avec leurs informations
et la position.

17
00:00:57,340 --> 00:01:01,630
Houses.js est un tableau de Harvard
maisons d'habitation avec leur

18
00:01:01,630 --> 00:01:04,030
latitudes et longitudes.

19
00:01:04,030 --> 00:01:08,600
Passengers.js contient un tableau de
passagers, les membres du personnel de CS50

20
00:01:08,600 --> 00:01:11,640
que vous serez amener à dos
leurs maisons d'habitation.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, qui contient beaucoup d'
fonctions à faire avec le mouvement.

22
00:01:16,450 --> 00:01:19,500
Si vous êtes mathématiquement esprit, alors
Je vous invite à jeter un oeil.

23
00:01:19,500 --> 00:01:23,530
Mais vous n'avez pas besoin de comprendre
tout là-dedans.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, qui traite de
le mouvement de la navette.

25
00:01:26,710 --> 00:01:31,450
Et index.html est la page d'accueil où
tout se passe, vraiment, où la

26
00:01:31,450 --> 00:01:33,610
l'utilisateur est en interaction avec le site.

27
00:01:33,610 --> 00:01:39,110
>> Service.css est la feuille de style CSS,
qui, en plus de l'Twitter

28
00:01:39,110 --> 00:01:43,960
Bibliothèque Bootstrap, les contrôles
à quoi ressemble index.html.

29
00:01:43,960 --> 00:01:48,190
Et puis nous avons aussi service.js, qui
contient des fonctions de service pour

30
00:01:48,190 --> 00:01:49,010
la navette.

31
00:01:49,010 --> 00:01:53,010
Et c'est là que vous allez être
remplir une partie de la do à de.

32
00:01:53,010 --> 00:01:56,600
>> Maintenant, nous allons jeter un oeil à des objets et
tableaux associatifs en JavaScript,

33
00:01:56,600 --> 00:01:59,360
qui, pour toutes fins utiles,
sont interchangeables.

34
00:01:59,360 --> 00:02:03,030
Si je voulais faire un objet d'une variable
appelé une baguette, je

35
00:02:03,030 --> 00:02:04,290
déclarer.

36
00:02:04,290 --> 00:02:09,350
Et à l'intérieur de ces accolades, je voudrais
indiquer, le noyau est licorne, le bois

37
00:02:09,350 --> 00:02:12,710
est la cerise, et la longueur est de 13.

38
00:02:12,710 --> 00:02:16,370
>> Maintenant, je peux également accéder aux valeurs
des objets à l'aide

39
00:02:16,370 --> 00:02:18,270
notation de tableau associatif.

40
00:02:18,270 --> 00:02:22,610
Base de l'indice Donc baguette, je peux mettre
que l'égalité de licorne, ou

41
00:02:22,610 --> 00:02:24,710
vérifier que si j'ai besoin.

42
00:02:24,710 --> 00:02:28,890
Ou je peux utiliser l'opérateur point
wand.wood égale cerise, et

43
00:02:28,890 --> 00:02:30,280
ainsi de suite et ainsi de suite.

44
00:02:30,280 --> 00:02:33,930
Donc, vous voyez que les tableaux associatifs et
objets en JavaScript vont être

45
00:02:33,930 --> 00:02:37,710
interchangeable, et la volonté
devenir assez pratique.

46
00:02:37,710 --> 00:02:41,570
>> Ensuite, nous voyons un ensemble de bâtiments
dans buildings.js,

47
00:02:41,570 --> 00:02:43,870
de plus, un tableau d'objets.

48
00:02:43,870 --> 00:02:48,500
Si je voulais faire un tableau de la meilleure
bâtiments sur le campus de Harvard, puis

49
00:02:48,500 --> 00:02:49,710
Je voudrais faire comme suit.

50
00:02:49,710 --> 00:02:55,250
En utilisant cette notation d'objet, où
Je stocke la racine, nom, adresse,

51
00:02:55,250 --> 00:03:00,260
latitude, longitude et pour chaque
objet de construction unique.

52
00:03:00,260 --> 00:03:02,930
>> Parlons rapidement sur les variables
en JavaScript.

53
00:03:02,930 --> 00:03:07,760
Comme PHP, les variables JavaScript
sont faiblement ou faiblement typé.

54
00:03:07,760 --> 00:03:14,120
Pour créer une variable locale, vous préfixez
le nom de variable avec V-A-R, var.

55
00:03:14,120 --> 00:03:17,010
Maintenant, en JavaScript, les fonctions seront
limiter la portée des variables.

56
00:03:17,010 --> 00:03:20,600
Donc si vous avez une variable locale dans
une fonction, puis d'autres fonctions

57
00:03:20,600 --> 00:03:22,060
ne peuvent pas y accéder.

58
00:03:22,060 --> 00:03:26,090
>> Mais contrairement au C, des boucles et des conditions ne
limiter la portée d'une variable.

59
00:03:26,090 --> 00:03:30,600
Donc, même si vous déclarez à l'intérieur d'un
état, l'ensemble de la fonction sera

60
00:03:30,600 --> 00:03:32,810
y avoir accès.

61
00:03:32,810 --> 00:03:35,820
Maintenant, sans var, la variable
seront mondiale.

62
00:03:35,820 --> 00:03:39,170
Donc, si vous venez de déclarer le nom et l'
attribuer une valeur, alors cette variable

63
00:03:39,170 --> 00:03:41,900
sera une variable globale
en JavaScript.

64
00:03:41,900 --> 00:03:48,480
>> Maintenant, dans les maisons, nous avons une associatif
tableau d'objets de type d'hôte, où

65
00:03:48,480 --> 00:03:52,100
chaque maison est juste une latitude
et une longitude.

66
00:03:52,100 --> 00:03:55,140
Ensuite, nous avons les passagers
matrice, qui est un tableau

67
00:03:55,140 --> 00:03:57,370
de type d'objet passager.

68
00:03:57,370 --> 00:04:01,620
Ainsi, chaque passager dispose d'un utilisateur
nom, un nom, et une maison.

69
00:04:01,620 --> 00:04:04,840
>> Remarquez que je dis de Type
passager, qui a vraiment signifie simplement

70
00:04:04,840 --> 00:04:08,150
que chaque objet a la
mêmes paires de valeurs clés.

71
00:04:08,150 --> 00:04:12,830
Ainsi, chaque objet de type passager a
un nom d'utilisateur, un nom, et une maison.

72
00:04:12,830 --> 00:04:14,850
Alors, que devons-nous
faire pour le p-ensemble?

73
00:04:14,850 --> 00:04:20,779
Eh bien, nous devons permettre aux utilisateurs de choisir
jusqu'à membres du personnel, pour afficher tous

74
00:04:20,779 --> 00:04:25,080
les membres du personnel qui sont actuellement en
notre navette, et à les déposer.

75
00:04:25,080 --> 00:04:29,395
Et puis nous parlerons également supplémentaire
caractéristiques qui peuvent être mises en œuvre pour

76
00:04:29,395 --> 00:04:30,980
la navette p-ensemble.

77
00:04:30,980 --> 00:04:33,610
>> Mais parlons d'abord de ramassage.

78
00:04:33,610 --> 00:04:37,480
Les visages du personnel CS50 ont été
planté partout sur le campus, où chaque

79
00:04:37,480 --> 00:04:41,750
visage est mis en œuvre comme un lieu marque
3D sur la Terre, et en tant que

80
00:04:41,750 --> 00:04:44,020
marqueur sur la carte 2D.

81
00:04:44,020 --> 00:04:47,880
Ainsi, lorsque l'utilisateur clique sur le Pickup
bouton, nous voulons ajouter proximité

82
00:04:47,880 --> 00:04:49,590
passagers à la navette.

83
00:04:49,590 --> 00:04:53,650
Et nous voulons aussi supprimer leur place
marquer du monde et retirer leur

84
00:04:53,650 --> 00:04:58,060
marqueur de la carte, ce qui indique que
ils sont dans notre navette maintenant.

85
00:04:58,060 --> 00:05:02,520
>> Alors, comment pouvons-nous détecter si les passagers
sont à la portée de notre navette?

86
00:05:02,520 --> 00:05:06,670
Eh bien, la distance de la fonction, de sorte
shuttle.distance, en passant dans le

87
00:05:06,670 --> 00:05:10,630
latitude et longitude, calculera
la distance entre la position courante

88
00:05:10,630 --> 00:05:14,220
de la navette, au point que
vous spécifiez avec cette donnée

89
00:05:14,220 --> 00:05:15,860
latitude et la longitude.

90
00:05:15,860 --> 00:05:19,180
Ainsi, vous pouvez l'utiliser pour calculer la
la distance de la navette à l'

91
00:05:19,180 --> 00:05:20,310
passagers.

92
00:05:20,310 --> 00:05:24,040
>> Mais comment savez-vous où
les passagers sont?

93
00:05:24,040 --> 00:05:27,510
Eh bien, c'est là que nous devrons
modifier la fonction de peupler.

94
00:05:27,510 --> 00:05:32,500
Remplissez les lieux tous les membres du personnel
des passagers dans le monde

95
00:05:32,500 --> 00:05:36,300
et dans la carte, mais ne fonctionne pas
stocker leur emplacement.

96
00:05:36,300 --> 00:05:39,850
Alors peut-être que vous pouvez stocker leur
placer des repères et marqueurs

97
00:05:39,850 --> 00:05:41,570
dans certains réseau mondial.

98
00:05:41,570 --> 00:05:45,780
>> Maintenant, il existe déjà un réseau mondial
mémoriser des informations de passagers.

99
00:05:45,780 --> 00:05:49,960
Les magasins passagers de tableau chaque
le nom du passager et leur maison.

100
00:05:49,960 --> 00:05:54,985
Alors peut-être que vous pouvez ajouter quelques paramètres
là pour les objets à passagers.

101
00:05:54,985 --> 00:05:58,150
>> Pour nous aider à détecter tous les passagers
à portée de notre

102
00:05:58,150 --> 00:06:02,485
navette, boucle de laisser passer la totalité de la
passagers dans le tableau des passagers.

103
00:06:02,485 --> 00:06:07,790
Une boucle dans JavaScript pourrait ressembler
quelque chose comme ça, très semblable à

104
00:06:07,790 --> 00:06:13,200
ceux pour les boucles en C. Ou nous pouvons utiliser un
alternative à structure en boucle, pour

105
00:06:13,200 --> 00:06:18,680
var i dans le tableau, où je vais encore être
l'indice, mais vous n'avez pas besoin de

106
00:06:18,680 --> 00:06:23,310
spécifier le array.length
état et i + +.

107
00:06:23,310 --> 00:06:26,130
>> L'emplacement de chaque passager est
donné par leur place marque.

108
00:06:26,130 --> 00:06:29,800
Mais la marque de place n'est pas la
latitude et la longitude.

109
00:06:29,800 --> 00:06:34,170
Nous avons pour accéder à ces paramètres par
obtenir la géométrie, utilisant get

110
00:06:34,170 --> 00:06:38,180
la géométrie sur la marque de place, puis
une fois que nous avons la géométrie, se

111
00:06:38,180 --> 00:06:42,580
soit la latitude ou longitude
l'utilisation de ces fonctions.

112
00:06:42,580 --> 00:06:45,680
>> Alors maintenant, nous savons comment détecter si
les passagers sont à l'intérieur

113
00:06:45,680 --> 00:06:47,920
gamme de notre navette.

114
00:06:47,920 --> 00:06:52,050
Une fois que nous avons ces passagers, nous allons
vouloir ajouter tous les passagers qui sont

115
00:06:52,050 --> 00:06:53,140
dans cette plage.

116
00:06:53,140 --> 00:06:57,580
Nous voulons leur permettre de monter et prendre
un siège sur notre navette, mais seulement

117
00:06:57,580 --> 00:06:59,630
si nous avons assez de place pour eux.

118
00:06:59,630 --> 00:07:04,120
>> Le tableau indique shuttle.seats
si les sièges sont vides, ou

119
00:07:04,120 --> 00:07:05,890
qui est dans ce siège.

120
00:07:05,890 --> 00:07:11,160
Donc, si un siège est vide,
ce siège sera nulle.

121
00:07:11,160 --> 00:07:15,930
Donc parcourir le tableau sièges,
vérification de sièges vides, le stockage

122
00:07:15,930 --> 00:07:20,020
passagers dans les sièges jusqu'à ce que vous
n'ont pas de sièges plus vides.

123
00:07:20,020 --> 00:07:23,330
Et malheureusement, les autres passagers
devront attendre pour la

124
00:07:23,330 --> 00:07:26,000
la prochaine fois que la navette descend.

125
00:07:26,000 --> 00:07:30,280
>> Une fois qu'ils obtiennent sur la navette, nous voulons
pour enlever leur place marque, qui

126
00:07:30,280 --> 00:07:32,580
est leur photo dans le monde 3D.

127
00:07:32,580 --> 00:07:38,030
Si je voulais enlever un endroit marque p,
alors je voudrais obtenir toutes les caractéristiques

128
00:07:38,030 --> 00:07:42,820
de ma terre, de Google Earth,
puis retirez cet endroit spécifique

129
00:07:42,820 --> 00:07:45,910
marquer en utilisant la fonction removeChild.

130
00:07:45,910 --> 00:07:51,360
Puis enfin, nous allons supprimer le marqueur,
l'icône sur la carte 2D, pour tout

131
00:07:51,360 --> 00:07:53,650
passagers que nous embarquions.

132
00:07:53,650 --> 00:07:59,790
>> Pour supprimer un marqueur m, alors je vais
juste exécuter m.setMap nulle.

133
00:07:59,790 --> 00:08:03,670
Faites cela pour tous les passagers se trouvant à portée,
et vous avez terminé le ramassage.

134
00:08:03,670 --> 00:08:07,890
La fonction de la carte doit afficher tout
des passagers qui sont dans votre

135
00:08:07,890 --> 00:08:11,000
navette, et le siège vide si vide.

136
00:08:11,000 --> 00:08:14,420
Donc graphique doit parcourir
shuttle.seats, l'affichage de l'

137
00:08:14,420 --> 00:08:21,350
information des passagers pour chaque indice,
et siège vide si cet indice est nul.

138
00:08:21,350 --> 00:08:26,160
>> Maintenant, si le texte HTML est mis à l'intérieur d'un
JavaScript variable, en utilisant

139
00:08:26,160 --> 00:08:31,950
document.getElementById, carte peut
modifier le code HTML intérieur de celle donnée

140
00:08:31,950 --> 00:08:36,140
élément en affectant la
texte HTML à l'

141
00:08:36,140 --> 00:08:40,840
document.getElementById variable HTML interne.

142
00:08:40,840 --> 00:08:46,180
Lorsque les utilisateurs cliquent sur le bouton Drop Off
en index.html, il va appeler le

143
00:08:46,180 --> 00:08:47,160
fonction de limite de dépôt.

144
00:08:47,160 --> 00:08:49,510
Et il est de notre devoir de mettre en oeuvre.

145
00:08:49,510 --> 00:08:54,150
>> En limite de dépôt, nous voulons supprimer tout
passagers de la navette que si

146
00:08:54,150 --> 00:08:58,740
nous sommes à portée de leur destination,
leur maison d'habitation.

147
00:08:58,740 --> 00:09:03,300
Donc limite de dépôt devra vérifier si
la navette est dans la gamme de l'un des

148
00:09:03,300 --> 00:09:08,200
maisons, et retirez tout nécessaire
passagers de la navette.

149
00:09:08,200 --> 00:09:11,020
Alors, comment pouvons nous vérifions si nous sommes
à portée de toutes les maisons?

150
00:09:11,020 --> 00:09:16,630
Eh bien, encore une fois, nous allons faire usage de la
shuttle.distance fonction, en passant

151
00:09:16,630 --> 00:09:20,990
la latitude et la longitude du point
que nous vérifions contre.

152
00:09:20,990 --> 00:09:22,730
>> Mais quels sont ces points?

153
00:09:22,730 --> 00:09:27,210
Eh bien, le tableau de maisons, si vous vous souvenez
dans houses.js, stocke l'

154
00:09:27,210 --> 00:09:32,790
latitude et la longitude de chaque maison
un tableau associatif, où chaque

155
00:09:32,790 --> 00:09:35,980
index est le nom de cette maison.

156
00:09:35,980 --> 00:09:37,590
Ensuite, pour supprimer les passagers -

157
00:09:37,590 --> 00:09:41,820
bien, que si nous sommes dans la gamme de leur
maison qu'ils veulent aller.

158
00:09:41,820 --> 00:09:46,380
Encore une fois, rappelez-vous que les passagers
stocke la maison que tous les passagers

159
00:09:46,380 --> 00:09:48,850
veut aller.

160
00:09:48,850 --> 00:09:51,670
Si elles sont à portée de leur
maison, puis nous enlevons que

161
00:09:51,670 --> 00:09:57,200
passager de shuttle.seats et ensemble
leur position dans le tableau à zéro.

162
00:09:57,200 --> 00:10:00,220
>> Maintenant, nous allons parler de quelques fonctionnalités supplémentaires
qui peuvent être mises en œuvre dans

163
00:10:00,220 --> 00:10:02,690
le CS50 navette p-ensemble.

164
00:10:02,690 --> 00:10:05,850
Il ya un système de point où
de garder une trace du nombre de

165
00:10:05,850 --> 00:10:07,520
souligne un utilisateur.

166
00:10:07,520 --> 00:10:11,120
Pour déposer des passagers
succès, ils peuvent obtenir des points.

167
00:10:11,120 --> 00:10:15,100
Mais pour essayer de faire descendre des passagers
où il n'y a pas une maison à proximité,

168
00:10:15,100 --> 00:10:16,980
ainsi, ils peuvent obtenir pénalisé pour cela.

169
00:10:16,980 --> 00:10:21,790
Alors peut-être que vous voulez garder une trace de
les points dans une variable globale.

170
00:10:21,790 --> 00:10:25,970
>> Vous pouvez mettre en œuvre peut-être une minuterie, où
l'utilisateur possède une certaine quantité de

171
00:10:25,970 --> 00:10:29,800
le temps de ramasser et déposer une
certain nombre de passagers.

172
00:10:29,800 --> 00:10:33,280
Peut-être même intégrer cette
avec le système de points.

173
00:10:33,280 --> 00:10:39,970
Ou vous pouvez éditer Tableau tels que
passagers sont classés par maison.

174
00:10:39,970 --> 00:10:45,250
Donc, ce serait sans doute une sorte
fonctionner à shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Vous pouvez mettre en œuvre une fonction de vol,
où, si l'utilisateur saisit le Konami

176
00:10:49,240 --> 00:10:53,460
code, puis la navette décolle la
sol et la navette peuvent voler.

177
00:10:53,460 --> 00:10:58,890
Mais pour une baisse sécuritaire désactivée, le meilleur à faire
la navette atterrir ses roues sur le

178
00:10:58,890 --> 00:11:00,700
sol en premier.

179
00:11:00,700 --> 00:11:05,910
Vous pouvez également mettre en œuvre téléportation,
où vous faites une liste déroulante des bas

180
00:11:05,910 --> 00:11:08,380
bâtiments index.html.

181
00:11:08,380 --> 00:11:12,270
Et en sélectionnant l'un de ceux, le
l'utilisateur sera transporté à

182
00:11:12,270 --> 00:11:14,220
ce bâtiment sur le campus.

183
00:11:14,220 --> 00:11:16,760
OK, mais, à travers voyager
les parois de certaines

184
00:11:16,760 --> 00:11:19,290
bâtiments sur votre chemin.

185
00:11:19,290 --> 00:11:22,960
>> Vous pouvez également modifier la vitesse de la
navette, permettant à l'utilisateur d'augmenter

186
00:11:22,960 --> 00:11:25,490
ou diminuer la vitesse.

187
00:11:25,490 --> 00:11:28,840
Peut-être que vous voulez une variable globale pour
garder une trace de la quantité de carburant

188
00:11:28,840 --> 00:11:31,520
navette a, en baisse
comme vous allez le long.

189
00:11:31,520 --> 00:11:35,860
Dès que vous atteignez zéro, cependant, la navette
ne sera pas en mesure de se déplacer sauf si vous avez

190
00:11:35,860 --> 00:11:40,610
ravitaillé, peut-être l'aide d'un bouton, ou
même faire votre propre station de gaz.

191
00:11:40,610 --> 00:11:43,240
>> Mais ce n'est certainement pas
une liste exhaustive.

192
00:11:43,240 --> 00:11:46,340
Consultez les spécifications pour le plein
la liste, ou peut-être proposer

193
00:11:46,340 --> 00:11:47,840
votre propre à votre carte de TF.

194
00:11:47,840 --> 00:11:48,950
Le ciel est la limite.

195
00:11:48,950 --> 00:11:53,110
C'est votre dernière CS50 p-ensemble,
alors amusez-vous avec elle.

196
00:11:53,110 --> 00:11:56,360
C'était CS50 navette.

197
00:11:56,360 --> 00:11:59,230
>> Je dois dire, ça a été un plaisir
faire cela pour vous avec le

198
00:11:59,230 --> 00:12:00,400
équipe de production.

199
00:12:00,400 --> 00:12:04,330
Et j'espère que vous avez
en profiter, aussi.

200
00:12:04,330 --> 00:12:06,040
Mon nom est Zamyla.

201
00:12:06,040 --> 00:12:08,310
Et ce fut CS50.

202
00:12:08,310 --> 00:12:16,363