>> [GIOCO MUSICA]
>> SPEAKER 1: Bene, eccoci qui, l'ultima serie P in CS50.
Congratularmi con voi stessi di avere fatto tanta strada da quando la prima ciao
mondi e stampare piramidi di Mario.
Hai fatto un sito web la settimana scorsa.
E stiamo andando a fare un altro questa settimana, quella che consente di
guidare intorno al campus di Harvard, raccogliendo fino membri dello staff CS50, e
riportarli al loro case residenziali.
>> Ora la settimana scorsa abbiamo lavorato in PHP, un linguaggio lato server.
Per questo P insieme, stiamo ottenendo introdotto a JavaScript, che è un
linguaggio lato client.
Quindi, diamo uno sguardo ad alcuni dei codice di distribuzione che ha fornito a
per questa P set.
>> Nella cartella JavaScript, non ci sarà essere un gruppo di file JavaScript.
C'è buildings.js, che contiene un serie di edifici intorno Harvard
campus, con le loro informazioni e posizione.
Houses.js è un array di Harvard case residenziali, con il loro
latitudini e longitudini.
Passengers.js contiene un array di passeggeri -
i membri del personale CS50 -
che sarete portando indietro le loro case residenziali.
>> Math3D.js, che contiene un sacco di funzioni a che fare con il movimento.
Se sei matematicamente mentalità, allora Accolgo con favore dare un'occhiata.
Ma non c'è bisogno di capire tutto lì.
Shuttle.js, che si occupa di il movimento della navetta.
E index.html è la home page dove tutto accade, in realtà, dove la
utente interagisce con il sito.
>> Service.css è il foglio di stile CSS, che, oltre al Twitter
Biblioteca Bootstrap, controlli come index.html sguardi.
E poi abbiamo anche service.js, che contiene le funzioni di servizio per
la navetta.
E qui è dove si sta andando ad essere compilando alcuni dei dos.
>> Ora diamo uno sguardo a oggetti e array associativi in ​​JavaScript,
che per tutti gli effetti sono intercambiabili.
Se volevo fare un oggetto variabile chiamato una bacchetta, vorrei
dichiararla.
E dentro queste parentesi graffe mi sarei specificare il nucleo è unicorno.
Il legno è ciliegia.
E la lunghezza è 13.
>> Ora posso anche accedere ai valori di oggetti utilizzando
notazione array associativo.
Nucleo indice Così bacchetta, è possibile impostare che la parità di unicorno, o
verificare che, se ho bisogno.
Oppure posso usare l'operatore punto.
Legno Wand dot uguale ciliegio, e così via, e così via.
Così si vede che gli array associativi e oggetti in JavaScript stanno per essere
intercambiabili, e la volontà tornare molto utile.
>> Poi vediamo una serie di edifici in buildings.js.
Ancora una volta, una matrice di oggetti.
Se volevo fare una selezione dei migliori edifici nel campus di Harvard, poi
Vorrei fare come segue.
Usando questa notazione oggetto, dove Devo conservare la radice, il nome, l'indirizzo,
latitudine e longitudine di ogni edificio oggetto singolo.
>> Parliamo rapidamente sulle variabili in JavaScript.
Come PHP, variabili JavaScript sono debolmente o debolmente tipizzato.
Per creare una variabile locale, è prefisso il nome della variabile con il V-A-R, var.
>> Ora in JavaScript, le funzioni saranno limitare la portata delle variabili.
Quindi, se avete una variabile locale all'interno una funzione, poi altre funzioni
non può accedervi.
Ma a differenza di C, loop e le condizioni non lo fanno limitare l'ambito di una variabile.
>> Quindi, anche se si dichiara all'interno di un condizione, l'intera funzione sarà
avere accesso ad esso.
Ora, senza var, la variabile sarà globale.
Quindi, se avete appena dichiara il nome e l' assegnare un valore, allora quella variabile
sarà una variabile globale in JavaScript.
>> Ora in case, abbiamo un associativa array di oggetti di tipo casa, dove
ogni casa è solo una latitudine e una longitudine.
Poi abbiamo i passeggeri matrice, che è una matrice
del tipo di oggetto passeggero.
Così, ogni passeggero ha un nome utente, un nome, e una casa.
Si noti che sto vedendo di tipo passeggeri, che in realtà significa solo
che ogni oggetto ha la stessa coppia chiave-valore.
Così ogni oggetto di tipo passeggero ha un nome utente, un nome e una casa.
>> Quindi cosa dobbiamo fare per il set di P?
Bene, abbiamo bisogno di consentire agli utenti di scegliere up membri dello staff, per visualizzare tutti
i membri dello staff che sono attualmente in la nostra navetta, e farli cadere fuori.
E poi ci sarà anche parliamo supplementare funzionalità che possono essere implementate per
P set navetta.
>> Ma parliamo di pick-up prima.
I volti del personale CS50 sono stati piantati tutto il campus, dove ogni
volto è implementato come un segno posto sulla terra 3D, e come
marcatore sulla mappa 2D.
Così, quando l'utente fa clic sul pick-up bottone, vogliamo aggiungere nelle vicinanze
passeggeri verso la navetta.
E vogliamo anche rimuovere il loro posto segnare dal mondo, e rimuovere la loro
segnalino dalla mappa, indicando che sono nel nostro shuttle ora.
>> Quindi, come possiamo rilevare se i passeggeri sono entro il raggio della nostra navetta?
Beh, la distanza di funzione -
così shuttle distanza punto, passando la latitudine e la longitudine, la volontà
calcolare la distanza dagli attuali posizione della navetta per la
punto specificato con che data latitudine e longitudine.
Quindi, è possibile utilizzare questo per calcolare il distanza dalla navetta per l'
passeggeri.
>> Ma come fai a sapere dove i passeggeri sono?
Beh, è ​​lì che dovremo modificare la funzione di popolamento.
Popolare posti tutti i membri del personale e passeggeri nel mondo,
e all'interno della mappa, ma non lo fa conservare la loro posizione.
Quindi, forse è possibile memorizzare il loro inserire marchi e marcatori
in qualche matrice globale.
>> Ora già esiste una matrice globale memorizzazione delle informazioni da parte dei passeggeri.
I negozi passeggeri matrice ciascuno il nome del passeggero e la loro casa.
Quindi forse è possibile aggiungere alcuni parametri vi agli oggetti dei passeggeri.
>> Per aiutarci a rilevare tutti i passeggeri entro il raggio della nostra navetta, andiamo
scorrere tutti i passeggeri nella matrice passeggeri.
Un ciclo for in JavaScript potrebbe apparire qualcosa di simile, molto simile a
quelli per il ciclo in C. Oppure possiamo usare un alternativa a struttura ad anello.
>> Per var i in array, dove ho sarà ancora l'indice.
Ma non è necessario specificare la lunghezza della matrice di punti
condizioni, e io plus plus.
Ogni posizione del passeggero è data dal loro segno posto.
>> Ma il marchio posto non è l' latitudine e la longitudine.
Dobbiamo accedere a tali parametri ottenere la geometria, utilizzando get
geometria sul marchio posto.
E poi una volta abbiamo la geometria, ottenere sia la latitudine o la
longitudine, l'utilizzo di tali funzioni.
>> Così ora sappiamo come rilevare se i passeggeri sono a
gamma della nostra navetta.
Una volta che abbiamo i passeggeri, faremo voler aggiungere eventuali passeggeri che sono
all'interno di tale intervallo.
Vogliamo permettere loro di salire su, e prendere posto sulla nostra navetta, ma solo
se abbiamo abbastanza spazio per loro.
>> La matrice sedili dot Shuttle indicano se posti sono vuoti, o
chi è in quella sede.
Quindi se il sedile è vuoto, allora che la sede sarà nullo.
Quindi scorrere la matrice sedili, verifica di posti vuoti, la memorizzazione
passeggeri in quei posti, fino a non hanno alcun posti più vuoti.
E purtroppo, tutti gli altri passeggeri dovrà attendere il
la prossima volta la navetta viene intorno.
>> Una volta che ottengono sullo shuttle, ci vogliamo per rimuovere il segno posto, che
è la loro foto nel mondo 3D.
Se avessi voluto rimuovere un segno posto p, poi vorrei avere tutte le caratteristiche
dalla mia terra, da Google Earth, e quindi rimuovere quel luogo specifico
contrassegnare utilizzando la funzione removeChild.
Poi, infine, cerchiamo di rimuovere il marcatore, l'icona sulla mappa 2D per qualsiasi
passeggeri che stiamo raccogliendo.
Per rimuovere un marcatore, m, allora io basta eseguire m dot setMap null.
Fate questo per eventuali passeggeri entro il raggio, e hai finito pickup.