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

2
00:00:00,988 --> 00:00:09,880
>> [REPRODUCCIÓ DE MÚSICA]

3
00:00:09,880 --> 00:00:13,360
>> ALTAVEU 1: Bé, aquí estem,
l'última sèrie P en CS50.

4
00:00:13,360 --> 00:00:17,040
Feliciti a si mateixos de tenir
arribat tan lluny, ja que la seva primera hola

5
00:00:17,040 --> 00:00:20,090
mons i imprimir
piràmides de Mario.

6
00:00:20,090 --> 00:00:21,930
Vostè ha fet un lloc web la setmana passada.

7
00:00:21,930 --> 00:00:25,110
I estarem fent una altra
aquesta setmana, un que li permet al

8
00:00:25,110 --> 00:00:28,570
conduir pel campus de la Universitat de Harvard, recollint
fins als membres del personal, i CS50

9
00:00:28,570 --> 00:00:31,910
portar de tornada al seu
cases residencials.

10
00:00:31,910 --> 00:00:35,400
>> Ara l'última setmana hem treballat en PHP,
un llenguatge del costat del servidor.

11
00:00:35,400 --> 00:00:38,250
Per a aquest conjunt P, ens anem a introduir
a JavaScript, que és un

12
00:00:38,250 --> 00:00:40,600
llenguatge del costat del client.

13
00:00:40,600 --> 00:00:44,010
Així que donem una ullada a alguns dels
codi de distribució que es proporciona

14
00:00:44,010 --> 00:00:46,210
que per a aquest conjunt P.

15
00:00:46,210 --> 00:00:49,700
>> A la carpeta de JavaScript, haurà
ser un munt d'arxius de JavaScript.

16
00:00:49,700 --> 00:00:53,600
Hi ha buildings.js, que conté un
conjunt d'edificis al voltant de Harvard

17
00:00:53,600 --> 00:00:57,340
campus, amb la seva informació
i la posició.

18
00:00:57,340 --> 00:01:01,630
Houses.js és una matriu de Harvard
cases residencials, amb el seu

19
00:01:01,630 --> 00:01:04,030
latituds i longituds.

20
00:01:04,030 --> 00:01:07,020
Passengers.js conté un
gamma de passatgers -

21
00:01:07,020 --> 00:01:08,600
els membres del personal CS50 -

22
00:01:08,600 --> 00:01:11,640
que vostè va a portar de tornada a
casa residencials.

23
00:01:11,640 --> 00:01:16,450
>> Math3D.js, que conté una gran quantitat de
funcions que fer amb el moviment.

24
00:01:16,450 --> 00:01:19,500
Si vostè és de ment matemàtica,
a continuació, dono la benvinguda a que doneu un cop d'ull.

25
00:01:19,500 --> 00:01:23,530
Però vostè no necessita entendre
tot allà.

26
00:01:23,530 --> 00:01:26,710
Shuttle.js, que s'ocupa de
El moviment de la llançadora.

27
00:01:26,710 --> 00:01:31,450
I index.html és la pàgina principal on
tot passa, en realitat, en què el

28
00:01:31,450 --> 00:01:33,610
usuari està interactuant amb el lloc.

29
00:01:33,610 --> 00:01:39,110
>> Service.css és el full d'estil CSS,
que, a més de la Twitter

30
00:01:39,110 --> 00:01:43,960
Biblioteca Bootstrap, controls
com index.html mirades.

31
00:01:43,960 --> 00:01:48,190
I després també hem service.js, que
conté funcions de servei per

32
00:01:48,190 --> 00:01:49,010
el servei de transport.

33
00:01:49,010 --> 00:01:53,010
I aquí és on vostè va a estar
omplir en alguns dels al DOS.

34
00:01:53,010 --> 00:01:56,600
>> Ara donem una ullada als objectes i
matrius associatives en JavaScript,

35
00:01:56,600 --> 00:01:59,360
que per a tots els efectes,
són intercanviables.

36
00:01:59,360 --> 00:02:03,030
Si volgués fer un objecte una variable
anomenat una vareta, em

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

38
00:02:04,290 --> 00:02:08,789
I dins d'aquestes claus que ho faria
especificar el nucli és unicorn.

39
00:02:08,789 --> 00:02:10,220
La fusta és la cirera.

40
00:02:10,220 --> 00:02:12,710
I la longitud és de 13.

41
00:02:12,710 --> 00:02:16,370
>> Ara també puc accedir als valors
dels objectes que utilitzen

42
00:02:16,370 --> 00:02:18,270
notació de matriu associativa.

43
00:02:18,270 --> 00:02:22,610
Índex estructural Així vareta, puc establir
que potser l'unicorn, o

44
00:02:22,610 --> 00:02:24,710
comprovar que, si el que necessito.

45
00:02:24,710 --> 00:02:26,510
O puc utilitzar l'operador punt.

46
00:02:26,510 --> 00:02:30,280
Fusta dot Vareta equival cirera,
i així successivament, i així successivament.

47
00:02:30,280 --> 00:02:33,930
Així que ja veus que les matrius associatives i
objectes en JavaScript seran

48
00:02:33,930 --> 00:02:37,720
intercanviables, i la voluntat
venir en molt pràctic.

49
00:02:37,720 --> 00:02:41,570
>> Després veiem una sèrie d'edificis
en buildings.js.

50
00:02:41,570 --> 00:02:43,870
Un cop més, una sèrie d'objectes.

51
00:02:43,870 --> 00:02:48,500
Si volgués fer una sèrie dels millors
edificis al campus de Harvard, i després

52
00:02:48,500 --> 00:02:49,710
Jo ho faria de la següent manera.

53
00:02:49,710 --> 00:02:55,250
Usant aquesta notació objecte, on
Emmagatzemo l'arrel, el nom, l'adreça,

54
00:02:55,250 --> 00:03:00,260
latitud i longitud per a cada
objecte únic edifici.

55
00:03:00,260 --> 00:03:02,930
>> Anem ràpidament a parlar de les variables
en JavaScript.

56
00:03:02,930 --> 00:03:07,760
Com PHP, les variables JavaScript
estan feblement o mal escrit.

57
00:03:07,760 --> 00:03:14,120
Per crear una variable local, el prefix
el nom de la variable amb el V-A-R, var.

58
00:03:14,120 --> 00:03:17,010
>> Ara en JavaScript, les funcions es
limitar l'abast de les variables.

59
00:03:17,010 --> 00:03:20,600
Així que si vostè té una variable local dins
una funció, llavors altres funcions

60
00:03:20,600 --> 00:03:22,060
no poden accedir-hi.

61
00:03:22,060 --> 00:03:26,090
Però a diferència de C, els bucles i les condicions no ho fan
limitar l'abast d'una variable.

62
00:03:26,090 --> 00:03:30,600
>> Així que fins i tot si es declara dins d'un
condicions, tota la funció es

63
00:03:30,600 --> 00:03:32,810
tenir accés.

64
00:03:32,810 --> 00:03:35,820
Ara sense var, la variable
serà global.

65
00:03:35,820 --> 00:03:39,170
Així que si vostè acaba de declarar el nom i
assignar un valor, llavors aquesta variable

66
00:03:39,170 --> 00:03:41,900
serà una variable global
en JavaScript.

67
00:03:41,900 --> 00:03:48,480
>> Ara bé, a les cases, tenim un associativa
array d'objectes de tipus casa, on

68
00:03:48,480 --> 00:03:52,100
cada casa és només una latitud
i una longitud.

69
00:03:52,100 --> 00:03:55,140
Després tenim als passatgers
matriu, que és una matriu

70
00:03:55,140 --> 00:03:57,370
del tipus d'objecte de passatgers.

71
00:03:57,370 --> 00:04:01,620
Així que cada passatger té un nom d'usuari,
un nom, i una casa.

72
00:04:01,620 --> 00:04:04,840
Observi que estic veient de tipus
de passatgers, que en realitat només significa

73
00:04:04,840 --> 00:04:08,150
que cada objecte té el
mateix parell de valors clau.

74
00:04:08,150 --> 00:04:12,830
Així que cada objecte de tipus passatger té
un nom d'usuari, un nom, i una casa.

75
00:04:12,830 --> 00:04:14,850
>> Llavors, què hem de
fer per al conjunt P?

76
00:04:14,850 --> 00:04:20,779
Bé, hem de permetre als usuaris triar
fins als membres del personal, mostrar tots

77
00:04:20,779 --> 00:04:25,090
els membres del personal que estan actualment en
el nostre servei de transport, i per deixar-los anar.

78
00:04:25,090 --> 00:04:29,280
I després també parlarem addicional
característiques que es poden implementar per

79
00:04:29,280 --> 00:04:30,980
el conjunt P de transport.

80
00:04:30,980 --> 00:04:33,610
>> Però parlarem de pickup primer.

81
00:04:33,610 --> 00:04:37,480
Els rostres de personal CS50 han estat
plantat per tot el campus, on cada

82
00:04:37,480 --> 00:04:41,750
la cara s'implementa com una marca de lloc
a la terra 3D, i com

83
00:04:41,750 --> 00:04:44,030
marcador al mapa 2D.

84
00:04:44,030 --> 00:04:47,880
Així, quan l'usuari fa clic a la camioneta
botó, volem afegir proper

85
00:04:47,880 --> 00:04:49,590
els passatgers a la llançadora.

86
00:04:49,590 --> 00:04:53,650
I també volem treure el seu lloc
marca del món, i retiri el seu

87
00:04:53,650 --> 00:04:58,060
marcador al mapa, el que indica que
que estan al servei de transport ja.

88
00:04:58,060 --> 00:05:02,520
>> Llavors, com detectar si els passatgers
estan dins de l'abast del nostre servei de trasllat?

89
00:05:02,520 --> 00:05:04,610
Doncs bé, la funció distància -

90
00:05:04,610 --> 00:05:08,770
de manera que la distància de punts d'enllaç, passant
la latitud i la longitud, la voluntat

91
00:05:08,770 --> 00:05:12,030
calcular la distància des del corrent
posició de la llançadora a la

92
00:05:12,030 --> 00:05:15,850
assenyala que especifiqui amb aquesta
donada la latitud i longitud.

93
00:05:15,850 --> 00:05:19,180
Així que vostè pot utilitzar això per a calcular la
distància des del transport a la

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

95
00:05:20,310 --> 00:05:24,040
>> Però, com saber on
els passatgers són?

96
00:05:24,040 --> 00:05:27,510
Bé, aquí és on haurem de
editar la funció poblar.

97
00:05:27,510 --> 00:05:32,500
Omplir tots els llocs dels membres del personal
i els passatgers en el món,

98
00:05:32,500 --> 00:05:36,300
i al mapa, però no ho fa
emmagatzemar la seva ubicació.

99
00:05:36,300 --> 00:05:39,850
Així que potser vostè pot emmagatzemar el seu
col · locar marques i marcadors

100
00:05:39,850 --> 00:05:41,570
d'alguna matriu global.

101
00:05:41,570 --> 00:05:45,780
>> Ara ja hi ha una matriu global
emmagatzemar la informació dels passatgers.

102
00:05:45,780 --> 00:05:49,960
Les botigues de passatgers cada array
El nom del passatger i de casa.

103
00:05:49,960 --> 00:05:54,985
Així que potser vostè pot afegir alguns paràmetres
allà als objectes de passatgers.

104
00:05:54,985 --> 00:05:59,290
>> Per ajudar-nos a detectar tots els passatgers
dins de l'abast del nostre servei de transport, anem a

105
00:05:59,290 --> 00:06:02,500
bucle a través de tots els passatgers
en la matriu de passatgers.

106
00:06:02,500 --> 00:06:07,790
Un bucle en JavaScript podria veure
alguna cosa com això, molt similar a la

107
00:06:07,790 --> 00:06:12,910
els de bucle en C. O podem utilitzar un
alternativa per a l'estructura de bucle.

108
00:06:12,910 --> 00:06:17,130
>> Per var i a la matriu, on em
seguirà sent l'índex.

109
00:06:17,130 --> 00:06:20,740
Però vostè no necessita especificar
la longitud de la matriu de punts

110
00:06:20,740 --> 00:06:23,310
condició, i jo plus plus.

111
00:06:23,310 --> 00:06:26,140
La ubicació de cada passatger és
donada per la seva marca de lloc.

112
00:06:26,140 --> 00:06:29,800
>> Però la marca de lloc no és el
la latitud i la longitud.

113
00:06:29,800 --> 00:06:34,575
Hem d'accedir a aquests paràmetres per
aconseguir la geometria, fent servir get

114
00:06:34,575 --> 00:06:35,900
la geometria en la marca del seu lloc.

115
00:06:35,900 --> 00:06:39,630
I després, una vegada que tenim la geometria,
obtenir ja sigui la latitud o la

116
00:06:39,630 --> 00:06:42,600
longitud, utilitzant aquestes funcions.

117
00:06:42,600 --> 00:06:45,680
>> Així que ara que sabem com detectar si
els passatgers estan a

118
00:06:45,680 --> 00:06:47,920
gamma del nostre transport.

119
00:06:47,920 --> 00:06:52,050
Un cop tinguem els passatgers, anem a
voleu afegir qualsevol passatger que són

120
00:06:52,050 --> 00:06:53,140
dins d'aquest rang.

121
00:06:53,140 --> 00:06:57,580
Volem que els permeti pujar a, i
seure al nostre servei de transport, però només

122
00:06:57,580 --> 00:06:59,640
si tenim prou espai per a ells.

123
00:06:59,640 --> 00:07:04,120
>> La matriu de seients de punts d'enllaç es
indiquen si els seients estan buits, o

124
00:07:04,120 --> 00:07:05,890
que està en aquest seient.

125
00:07:05,890 --> 00:07:11,170
Així que si hi ha un seient buit,
aquest seient serà nul.

126
00:07:11,170 --> 00:07:15,930
Així iterar sobre la matriu de seients,
la comprovació de seients buits, emmagatzemar

127
00:07:15,930 --> 00:07:20,020
els passatgers als seients fins que
no tenen cap escó més buides.

128
00:07:20,020 --> 00:07:23,330
I, per desgràcia, cap resta dels passatgers
haurà d'esperar que el

129
00:07:23,330 --> 00:07:26,000
propera vegada que el servei de transport, torna.

130
00:07:26,000 --> 00:07:30,280
>> Una vegada que aconsegueixen a l'autobús, anem a voler
per eliminar la seva empremta lloc, que

131
00:07:30,280 --> 00:07:32,540
és la seva foto en el món 3D.

132
00:07:32,540 --> 00:07:38,030
Si volgués suprimir un lloc mark p,
llavors m'agradaria tenir totes les característiques

133
00:07:38,030 --> 00:07:42,790
de la meva terra, des del Google Earth,
i després eliminar aquest lloc específic

134
00:07:42,790 --> 00:07:45,910
marcar utilitzant la funció removeChild.

135
00:07:45,910 --> 00:07:51,360
Després, finalment, anem a eliminar el marcador,
la icona del mapa en 2D per a qualsevol

136
00:07:51,360 --> 00:07:53,650
passatgers que estem recollint.

137
00:07:53,650 --> 00:07:59,790
Per eliminar un marcador, m, llavors vaig a
només cal executar m dot setMap nul.

138
00:07:59,790 --> 00:08:02,920
Feu això per als passatgers dins de la gamma,
i que hagi acabat la collita.

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