>> ZAMYLA CHAN: Eh bien, nous sommes ici, le dernier p-set dans CS50.
Vous féliciter d'avoir venir jusqu'ici depuis votre premier Bonjour
Mondes et d'impression maximale Pyramides pour Mario.
Vous avez fait un site Web la semaine dernière.
Et nous allons faire un autre cette semaine, celui qui vous permet de
faire le tour du campus de Harvard, la cueillette jusqu'à membres du personnel de CS50 et
les ramener à leur maisons d'habitation.
>> Maintenant, la semaine dernière, nous avons travaillé en PHP, un langage côté serveur.
Pour cette p-ensemble, nous allons nous introduit à JavaScript qui est un
client langue de côté.
Donc, nous allons jeter un oeil à quelques-uns des Code de distribution qui est fourni à
vous pour cette p-ensemble.
Dans le dossier JavaScript, il y aura un tas de fichiers JavaScript.
>> Il ya buildings.js, qui contient un ensemble de bâtiments autour de Harvard
campus avec leurs informations et la position.
Houses.js est un tableau de Harvard maisons d'habitation avec leur
latitudes et longitudes.
Passengers.js contient un tableau de passagers, les membres du personnel de CS50
que vous serez amener à dos leurs maisons d'habitation.
>> Math3D.js, qui contient beaucoup d' fonctions à faire avec le mouvement.
Si vous êtes mathématiquement esprit, alors Je vous invite à jeter un oeil.
Mais vous n'avez pas besoin de comprendre tout là-dedans.
Shuttle.js, qui traite de le mouvement de la navette.
Et index.html est la page d'accueil où tout se passe, vraiment, où la
l'utilisateur est en interaction avec le site.
>> Service.css est la feuille de style CSS, qui, en plus de l'Twitter
Bibliothèque Bootstrap, les contrôles à quoi ressemble index.html.
Et puis nous avons aussi service.js, qui contient des fonctions de service pour
la navette.
Et c'est là que vous allez être remplir une partie de la do à de.
>> Maintenant, nous allons jeter un oeil à des objets et tableaux associatifs en JavaScript,
qui, pour toutes fins utiles, sont interchangeables.
Si je voulais faire un objet d'une variable appelé une baguette, je
déclarer.
Et à l'intérieur de ces accolades, je voudrais indiquer, le noyau est licorne, le bois
est la cerise, et la longueur est de 13.
>> Maintenant, je peux également accéder aux valeurs des objets à l'aide
notation de tableau associatif.
Base de l'indice Donc baguette, je peux mettre que l'égalité de licorne, ou
vérifier que si j'ai besoin.
Ou je peux utiliser l'opérateur point wand.wood égale cerise, et
ainsi de suite et ainsi de suite.
Donc, vous voyez que les tableaux associatifs et objets en JavaScript vont être
interchangeable, et la volonté devenir assez pratique.
>> Ensuite, nous voyons un ensemble de bâtiments dans buildings.js,
de plus, un tableau d'objets.
Si je voulais faire un tableau de la meilleure bâtiments sur le campus de Harvard, puis
Je voudrais faire comme suit.
En utilisant cette notation d'objet, où Je stocke la racine, nom, adresse,
latitude, longitude et pour chaque objet de construction unique.
>> Parlons rapidement sur les variables en JavaScript.
Comme PHP, les variables JavaScript sont faiblement ou faiblement typé.
Pour créer une variable locale, vous préfixez le nom de variable avec V-A-R, var.
Maintenant, en JavaScript, les fonctions seront limiter la portée des variables.
Donc si vous avez une variable locale dans une fonction, puis d'autres fonctions
ne peuvent pas y accéder.
>> Mais contrairement au C, des boucles et des conditions ne limiter la portée d'une variable.
Donc, même si vous déclarez à l'intérieur d'un état, l'ensemble de la fonction sera
y avoir accès.
Maintenant, sans var, la variable seront mondiale.
Donc, si vous venez de déclarer le nom et l' attribuer une valeur, alors cette variable
sera une variable globale en JavaScript.
>> Maintenant, dans les maisons, nous avons une associatif tableau d'objets de type d'hôte, où
chaque maison est juste une latitude et une longitude.
Ensuite, nous avons les passagers matrice, qui est un tableau
de type d'objet passager.
Ainsi, chaque passager dispose d'un utilisateur nom, un nom, et une maison.
>> Remarquez que je dis de Type passager, qui a vraiment signifie simplement
que chaque objet a la mêmes paires de valeurs clés.
Ainsi, chaque objet de type passager a un nom d'utilisateur, un nom, et une maison.
Alors, que devons-nous faire pour le p-ensemble?
Eh bien, nous devons permettre aux utilisateurs de choisir jusqu'à membres du personnel, pour afficher tous
les membres du personnel qui sont actuellement en notre navette, et à les déposer.
Et puis nous parlerons également supplémentaire caractéristiques qui peuvent être mises en œuvre pour
la navette p-ensemble.
>> Mais parlons d'abord de ramassage.
Les visages du personnel CS50 ont été planté partout sur le campus, où chaque
visage est mis en œuvre comme un lieu marque 3D sur la Terre, et en tant que
marqueur sur la carte 2D.
Ainsi, lorsque l'utilisateur clique sur le Pickup bouton, nous voulons ajouter proximité
passagers à la navette.
Et nous voulons aussi supprimer leur place marquer du monde et retirer leur
marqueur de la carte, ce qui indique que ils sont dans notre navette maintenant.
>> Alors, comment pouvons-nous détecter si les passagers sont à la portée de notre navette?
Eh bien, la distance de la fonction, de sorte shuttle.distance, en passant dans le
latitude et longitude, calculera la distance entre la position courante
de la navette, au point que vous spécifiez avec cette donnée
latitude et la longitude.
Ainsi, vous pouvez l'utiliser pour calculer la la distance de la navette à l'
passagers.
>> Mais comment savez-vous où les passagers sont?
Eh bien, c'est là que nous devrons modifier la fonction de peupler.
Remplissez les lieux tous les membres du personnel des passagers dans le monde
et dans la carte, mais ne fonctionne pas stocker leur emplacement.
Alors peut-être que vous pouvez stocker leur placer des repères et marqueurs
dans certains réseau mondial.
>> Maintenant, il existe déjà un réseau mondial mémoriser des informations de passagers.
Les magasins passagers de tableau chaque le nom du passager et leur maison.
Alors peut-être que vous pouvez ajouter quelques paramètres là pour les objets à passagers.
>> Pour nous aider à détecter tous les passagers à portée de notre
navette, boucle de laisser passer la totalité de la passagers dans le tableau des passagers.
Une boucle dans JavaScript pourrait ressembler quelque chose comme ça, très semblable à
ceux pour les boucles en C. Ou nous pouvons utiliser un alternative à structure en boucle, pour
var i dans le tableau, où je vais encore être l'indice, mais vous n'avez pas besoin de
spécifier le array.length état et i + +.
>> L'emplacement de chaque passager est donné par leur place marque.
Mais la marque de place n'est pas la latitude et la longitude.
Nous avons pour accéder à ces paramètres par obtenir la géométrie, utilisant get
la géométrie sur la marque de place, puis une fois que nous avons la géométrie, se
soit la latitude ou longitude l'utilisation de ces fonctions.
>> Alors maintenant, nous savons comment détecter si les passagers sont à l'intérieur
gamme de notre navette.
Une fois que nous avons ces passagers, nous allons vouloir ajouter tous les passagers qui sont
dans cette plage.
Nous voulons leur permettre de monter et prendre un siège sur notre navette, mais seulement
si nous avons assez de place pour eux.
>> Le tableau indique shuttle.seats si les sièges sont vides, ou
qui est dans ce siège.
Donc, si un siège est vide, ce siège sera nulle.
Donc parcourir le tableau sièges, vérification de sièges vides, le stockage
passagers dans les sièges jusqu'à ce que vous n'ont pas de sièges plus vides.
Et malheureusement, les autres passagers devront attendre pour la
la prochaine fois que la navette descend.
>> Une fois qu'ils obtiennent sur la navette, nous voulons pour enlever leur place marque, qui
est leur photo dans le monde 3D.
Si je voulais enlever un endroit marque p, alors je voudrais obtenir toutes les caractéristiques
de ma terre, de Google Earth, puis retirez cet endroit spécifique
marquer en utilisant la fonction removeChild.
Puis enfin, nous allons supprimer le marqueur, l'icône sur la carte 2D, pour tout
passagers que nous embarquions.
>> Pour supprimer un marqueur m, alors je vais juste exécuter m.setMap nulle.
Faites cela pour tous les passagers se trouvant à portée, et vous avez terminé le ramassage.
La fonction de la carte doit afficher tout des passagers qui sont dans votre
navette, et le siège vide si vide.
Donc graphique doit parcourir shuttle.seats, l'affichage de l'
information des passagers pour chaque indice, et siège vide si cet indice est nul.
>> Maintenant, si le texte HTML est mis à l'intérieur d'un JavaScript variable, en utilisant
document.getElementById, carte peut modifier le code HTML intérieur de celle donnée
élément en affectant la texte HTML à l'
document.getElementById variable HTML interne.
Lorsque les utilisateurs cliquent sur le bouton Drop Off en index.html, il va appeler le
fonction de limite de dépôt.
Et il est de notre devoir de mettre en oeuvre.
>> En limite de dépôt, nous voulons supprimer tout passagers de la navette que si
nous sommes à portée de leur destination, leur maison d'habitation.
Donc limite de dépôt devra vérifier si la navette est dans la gamme de l'un des
maisons, et retirez tout nécessaire passagers de la navette.
Alors, comment pouvons nous vérifions si nous sommes à portée de toutes les maisons?
Eh bien, encore une fois, nous allons faire usage de la shuttle.distance fonction, en passant
la latitude et la longitude du point que nous vérifions contre.
>> Mais quels sont ces points?
Eh bien, le tableau de maisons, si vous vous souvenez dans houses.js, stocke l'
latitude et la longitude de chaque maison un tableau associatif, où chaque
index est le nom de cette maison.
Ensuite, pour supprimer les passagers -
bien, que si nous sommes dans la gamme de leur maison qu'ils veulent aller.
Encore une fois, rappelez-vous que les passagers stocke la maison que tous les passagers
veut aller.
Si elles sont à portée de leur maison, puis nous enlevons que
passager de shuttle.seats et ensemble leur position dans le tableau à zéro.
>> Maintenant, nous allons parler de quelques fonctionnalités supplémentaires qui peuvent être mises en œuvre dans
le CS50 navette p-ensemble.
Il ya un système de point où de garder une trace du nombre de
souligne un utilisateur.
Pour déposer des passagers succès, ils peuvent obtenir des points.
Mais pour essayer de faire descendre des passagers où il n'y a pas une maison à proximité,
ainsi, ils peuvent obtenir pénalisé pour cela.
Alors peut-être que vous voulez garder une trace de les points dans une variable globale.
>> Vous pouvez mettre en œuvre peut-être une minuterie, où l'utilisateur possède une certaine quantité de
le temps de ramasser et déposer une certain nombre de passagers.
Peut-être même intégrer cette avec le système de points.
Ou vous pouvez éditer Tableau tels que passagers sont classés par maison.
Donc, ce serait sans doute une sorte fonctionner à shuttle.seats.
>> Vous pouvez mettre en œuvre une fonction de vol, où, si l'utilisateur saisit le Konami
code, puis la navette décolle la sol et la navette peuvent voler.
Mais pour une baisse sécuritaire désactivée, le meilleur à faire la navette atterrir ses roues sur le
sol en premier.
Vous pouvez également mettre en œuvre téléportation, où vous faites une liste déroulante des bas
bâtiments index.html.
Et en sélectionnant l'un de ceux, le l'utilisateur sera transporté à
ce bâtiment sur le campus.
OK, mais, à travers voyager les parois de certaines
bâtiments sur votre chemin.
>> Vous pouvez également modifier la vitesse de la navette, permettant à l'utilisateur d'augmenter
ou diminuer la vitesse.
Peut-être que vous voulez une variable globale pour garder une trace de la quantité de carburant
navette a, en baisse comme vous allez le long.
Dès que vous atteignez zéro, cependant, la navette ne sera pas en mesure de se déplacer sauf si vous avez
ravitaillé, peut-être l'aide d'un bouton, ou même faire votre propre station de gaz.
>> Mais ce n'est certainement pas une liste exhaustive.
Consultez les spécifications pour le plein la liste, ou peut-être proposer
votre propre à votre carte de TF.
Le ciel est la limite.
C'est votre dernière CS50 p-ensemble, alors amusez-vous avec elle.
C'était CS50 navette.
>> Je dois dire, ça a été un plaisir faire cela pour vous avec le
équipe de production.
Et j'espère que vous avez en profiter, aussi.
Mon nom est Zamyla.
Et ce fut CS50.