ZAMYLA CHAN: Bene, eccoci qui, l'ultimo p-set in CS50. Congratularmi con voi stessi di avere fatto tanta strada da quando la prima Ciao Mondi e stampa Fino 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 up personale CS50 e riportarli al loro case residenziali. 

Ora, la scorsa settimana abbiamo lavorato in PHP, un linguaggio lato server. Per questo p-set, 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 residenziali case con le loro latitudini e longitudini. Passengers.js contiene una serie 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 Vi do il benvenuto a dare un'occhiata. Ma non c'è bisogno di capire tutto lì. Shuttle.js, che si occupa di il movimento dello Shuttle. 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 Shuttle. E qui è dove si sta andando ad essere compilando alcuni dei to-do di. 

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 quelle parentesi graffe, vorrei specifica, 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 wand.wood uguale ciliegia, 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, di nuovo, 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 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 casa, abbiamo un associativa array di oggetti di tipo di accoglienza, 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 dispone di un utente nome, un nome e una casa. 

Si noti che sto dicendo di tipo passeggeri, che in realtà significa solo che ogni oggetto ha la stesse coppie di valori chiave. Così ogni oggetto di tipo passeggero ha un nome utente, un nome e una casa. Quindi cosa dobbiamo fare per il p-set? 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 il 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 Pickup bottone, vogliamo aggiungere nelle vicinanze passeggeri verso la navetta. E vogliamo anche rimuovere il loro posto segnare dal mondo e rimuovere i 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, in modo shuttle.distance, passando il latitudine e longitudine, calcolerà la distanza dalla posizione attuale della navetta al punto che si specifica con quel dato 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 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, c'è già 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, ciclo di let attraverso tutte le passeggeri nella matrice passeggeri. Un ciclo for in JavaScript potrebbe apparire qualcosa di simile, molto simile a quelli per i loop in C. Oppure possiamo usare un alternativa a struttura ad anello, per var i in array, dove sarò ancora l'indice, ma non c'è bisogno di specificare il array.length condizioni ed i + +. 

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 che abbiamo la geometria, ottenendo sia la latitudine e 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 e prendere un seggio nostra navetta, ma solo se abbiamo abbastanza spazio per loro. 

La matrice shuttle.seats indicherà 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 scende. 

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 in 2D, per qualsiasi passeggeri che stiamo raccogliendo. 

Per rimuovere un marcatore m, allora io basta eseguire m.setMap null. Fate questo per eventuali passeggeri entro il raggio, e hai finito pickup. La funzione grafico dovrebbe visualizzare tutti dei passeggeri che sono nel vostro navetta e seggiolino vuoto se vuoto. Quindi grafico dovrebbe iterare shuttle.seats, visualizzando la informazioni sui passeggeri per ogni indice, e sedia vuota se tale indice è nullo. 

Ora, se testo HTML viene messo all'interno di un JavaScript variabile, quindi tramite document.getElementById, grafico può modificare il codice HTML interiore di quella data elemento assegnando l' Testo HTML al document.getElementById variabile HTML interno. Quando gli utenti fanno clic sul pulsante Drop Off in index.html, sarà chiamare il funzione di abbandono. Ed è nostro compito di attuare tale. 

In dropoff, dobbiamo provare a rimuovere eventuali passeggeri della navetta solo se siamo nella gamma della loro destinazione, la loro casa residenziale. Quindi abbandono dovrà verificare se la navetta è nella gamma di uno dei case e rimuovere eventuali necessarie passeggeri dalla navetta. Quindi, come possiamo controlliamo se siamo nel raggio di alcune case? Bene, ancora una volta, faremo uso del funzione shuttle.distance, passando la latitudine e longitudine del punto che stiamo controllando contro. 

Ma quali sono questi punti? Beh, la matrice case, se ti ricordi in houses.js, memorizza il latitudine e longitudine di ogni casa in un array associativo, dove ogni indice è il nome di quella casa. Poi per rimuovere i passeggeri - bene, solo se siamo nella gamma della loro casa che vogliono andare a. Così ancora una volta, ricordate che i passeggeri memorizza la casa che ogni passeggero vuole andare. Se sono entro la portata della loro casa, poi ci togliamo che passeggeri da shuttle.seats e set la loro posizione nella matrice null. 

Ora parliamo di alcune caratteristiche extra che può essere implementato in il CS50 Shuttle p-set. C'è un sistema di punti in base al quale tenere traccia di quante punti un utente. Per lasciare i passeggeri correttamente, possono ottenere punti. Ma per cercare di scendere passeggeri dove non c'è alcuna casa vicina, bene, possono ottenere penalizzati per questo. Così forse si vuole tenere traccia di i punti in una variabile globale. 

È possibile implementare forse un timer, dove l'utente ha una certa quantità di il tempo di far salire e scendere un certo numero di passeggeri. Forse anche integrare questo con il sistema a punti. Oppure si può modificare Grafico tale che i passeggeri sono ordinati per casa. Così che sarebbe probabilmente una sorta funzione per shuttle.seats. 

È possibile implementare una funzione di volano, dove se l'utente immette il Konami codice, poi la navetta solleva dal terra e la navetta può volare. Ma per una caduta sicura off, meglio fare la navetta terra le ruote sul terra prima. È inoltre possibile implementare il teletrasporto, dove fate un elenco a discesa di edifici in index.html. E selezionando uno di quelli, l' utente verrà trasportato che la costruzione del campus. OK, però, di viaggiare attraverso pareti di alcuni edifici sulla strada lì. 

È inoltre possibile modificare la velocità del navetta, permettendo all'utente di aumentare o diminuire la velocità. Forse si vuole una variabile globale tenere traccia di quanto carburante shuttle ha, diminuendo come si va avanti. Una volta raggiunto lo zero, però, la navetta non sarà in grado di muoversi a meno che non hai rifornimento, magari utilizzando un pulsante, o anche fare la propria stazione di gas. 

Ma che certamente non è un elenco esaustivo. Scopri le specifiche per la piena elencare, o forse proporre proprio per il vostro TF. Il cielo è il limite. Questa è la tua ultima CS50 p-set, così divertirsi con essa. Questo era CS50 Shuttle. 

Ho avuto modo di dire, è stato un piacere rendendo questi per voi con il team di produzione. E spero che hai goderne, pure. Il mio nome è Zamyla. E questo era CS50.