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

2
00:00:00,988 --> 00:00:09,880
>> [MUSIQUE JEU]

3
00:00:09,880 --> 00:00:13,360
>> INTERLOCUTEUR 1: Eh bien, nous sommes ici,
le dernier jeu de P dans CS50.

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

5
00:00:17,040 --> 00:00:20,090
mondes et imprimer
pyramides pour Mario.

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

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

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

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

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

11
00:00:35,400 --> 00:00:38,250
Pour cette série P, nous allons nous introduit
à JavaScript qui est un

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

13
00:00:40,600 --> 00:00:44,010
Donc, nous allons jeter un oeil à quelques-uns des
Code de distribution qui est fourni à

14
00:00:44,010 --> 00:00:46,210
vous pour ce P ensemble.

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

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

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

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

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

20
00:01:04,030 --> 00:01:07,020
Passengers.js contient un
tableau de passagers -

21
00:01:07,020 --> 00:01:08,600
les membres du personnel CS50 -

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

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

24
00:01:16,450 --> 00:01:19,500
Si vous êtes mathématiquement esprit,
alors je me réjouis de vous jetez un oeil.

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

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

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

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

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

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

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

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

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

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

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

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

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

38
00:02:04,290 --> 00:02:08,789
Et à l'intérieur de ces accolades Je voudrais
préciser le noyau est licorne.

39
00:02:08,789 --> 00:02:10,220
Le bois est la cerise.

40
00:02:10,220 --> 00:02:12,710
Et la longueur est de 13.

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

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

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

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

45
00:02:24,710 --> 00:02:26,510
Ou je peux utiliser l'opérateur point.

46
00:02:26,510 --> 00:02:30,280
Bois baguette de points est égal à la cerise,
et ainsi de suite, et ainsi de suite.

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

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

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

50
00:02:41,570 --> 00:02:43,870
Encore une fois, un tableau d'objets.

51
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

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

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

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

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

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

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

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

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

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

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

62
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

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

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

65
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

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

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

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

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

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

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

72
00:04:01,620 --> 00:04:04,840
Remarquez que je vois de genre
passager, qui a vraiment signifie simplement

73
00:04:04,840 --> 00:04:08,150
que chaque objet a la
même paire de valeur de la clé.

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

75
00:04:12,830 --> 00:04:14,850
>> Alors, que devons-nous
faire pour l'ensemble de P?

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

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

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

79
00:04:29,280 --> 00:04:30,980
la navette P ensemble.

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

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

82
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

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

84
00:04:44,030 --> 00:04:47,880
Ainsi, lorsque l'utilisateur clique sur le pick-up
bouton, nous voulons ajouter proximité

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

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

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

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

89
00:05:02,520 --> 00:05:04,610
Eh bien, la distance de fonction -

90
00:05:04,610 --> 00:05:08,770
si la distance de point de navette, en passant
la latitude et la longitude, la volonté

91
00:05:08,770 --> 00:05:12,030
calculer la distance à partir du courant
position de la navette à l'

92
00:05:12,030 --> 00:05:15,850
point que vous spécifiez avec qui
donné la latitude et la longitude.

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

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

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

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

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

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

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

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

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

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

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

104
00:05:54,985 --> 00:05:59,290
>> Pour nous aider à détecter tous les passagers
à portée de notre navette, nous allons

105
00:05:59,290 --> 00:06:02,500
boucle par tous les passagers
dans le tableau de passagers.

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

107
00:06:07,790 --> 00:06:12,910
ceux de la boucle en C. Ou nous pouvons utiliser un
alternative à la structure de boucle.

108
00:06:12,910 --> 00:06:17,130
>> Pour var i dans le tableau, où je
sera toujours l'indice.

109
00:06:17,130 --> 00:06:20,740
Mais vous n'avez pas besoin de spécifier
le tableau de longueur de point

110
00:06:20,740 --> 00:06:23,310
état, et je plus plus.

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

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

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

114
00:06:34,575 --> 00:06:35,900
la géométrie sur la marque de lieu.

115
00:06:35,900 --> 00:06:39,630
Et puis une fois que nous avons la géométrie,
obtenir soit la latitude ou l'

116
00:06:39,630 --> 00:06:42,600
longitude, l'utilisation de ces fonctions.

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

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

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

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

121
00:06:53,140 --> 00:06:57,580
Nous voulons leur permettre de sauter sur et
prendre place sur la navette, mais seulement

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

123
00:06:59,640 --> 00:07:04,120
>> Le tableau sièges navette de points sera
indiquent si les sièges sont vides, ou

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

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

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

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

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

129
00:07:23,330 --> 00:07:26,000
la prochaine fois que la navette vient autour.

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

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

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

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

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

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

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

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

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

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