>> ZAMYLA CHAN: Wel, hier is ons, die laaste p-stel in CS50.
Geluk julle uit met kom so ver sedert jou eerste Hallo
Wêrelde en Druk Up Piramides vir Mario.
Jy het 'n webwerf het verlede week.
En ons gaan te wees om 'n ander een hierdie week, een wat jy kan
ry om die Harvard-kampus, pluk up CS50 personeellede en
bring hulle terug na hul residensiële huise.
>> Nou, het verlede week ons ​​gewerk het in PHP, 'n bediener kant taal.
Vir hierdie p-reeks, is ons om ingestel om JavaScript, wat 'n
kliënt kant taal.
So laat ons 'n blik op sommige van die verspreiding kode wat voorsien is te
jy vir hierdie p-stel.
In die JavaScript gids, sal daar 'n klomp van die JavaScript-lêers.
>> Daar is buildings.js, wat bevat 'n verskeidenheid van geboue rondom die Harvard
kampus met hul inligting en posisie.
Houses.js is 'n verskeidenheid van Harvard residensiële huise met hul
breedte-en lengte.
Passengers.js bevat 'n verskeidenheid van passasiers, die CS50 personeellede
dat jy sal terug te bring na hul woonhuise.
>> Math3D.js, wat 'n baie bevat funksies te doen het met die beweging.
As jy wiskundig aangelê is, dan Ek is bly jy 'n blik te neem.
Maar jy hoef nie te verstaan alles daar in.
Shuttle.js, wat handel oor die taxi se beweging.
En index.html is die tuisblad waar alles gebeur, regtig, waar die
gebruiker interaksie met die site.
>> Service.css is die CSS style sheet, wat bykomend tot die Twitter
Skoenlus Biblioteek, beheer hoe index.html lyk.
En dan het ons ook service.js, wat bevat diens funksies vir
die taxi.
En hier is waar jy gaan wees vul in 'n paar van die to-do's.
>> Nou kom ons neem 'n blik op voorwerpe en assosiatiewe skikkings in JavaScript,
, wat vir alle praktiese doeleindes, is verwissel.
As ek wou 'n voorwerp te maak 'n veranderlike genoem 'n muur, sou ek
verklaar.
En binne-in die krulhakies, sou ek spesifiseer, die kern is buffel, die hout
is kers, en die lengte is 13.
>> Nou, ek kan ook toegang tot waardes voorwerpe deur
assosiatiewe skikking notasie.
So muur indeks kern, kan ek wat gelykstaande aan buffel, of
seker te maak dat as ek nodig het.
Of ek kan die dot operateur gebruik wand.wood gelyk kers, en
so aan en so voort.
So jy sien dat assosiatiewe skikkings en voorwerpe in JavaScript gaan wees
verwissel, en wil kom in baie handig.
>> Toe sien ons 'n verskeidenheid van geboue in buildings.js,
weer, 'n verskeidenheid van voorwerpe.
As ek wou 'n skikking van die beste te maak geboue op Harvard-kampus, dan
Ek sou dit as volg maak.
Die gebruik van hierdie voorwerp notasie, waar Ek slaan die wortel, naam, adres,
breedte en lengte-vir elke enkele gebou voorwerp.
>> Kom ons vinnig praat oor veranderlikes in JavaScript.
Soos PHP, JavaScript veranderlikes is swak of losweg getik.
'N plaaslike veranderlike te bou, is prefix die veranderlike naam met V-A-R, var.
Nou, in JavaScript, funksies die beperking van die omvang van veranderlikes.
So as jy 'n plaaslike veranderlike binne 'n funksie, dan ander funksies
kan nie toegang tot dit.
>> Maar in teenstelling met C, loops en voorwaardes nie beperking van die omvang van 'n veranderlike.
So selfs as jy dit verkondig binnekant van 'n toestand is, die hele funksie
het toegang tot dit.
Nou, sonder var, die veranderlike globale wees.
So as jy net verklaar dat die naam en Gee 'n waarde het, dan die veranderlike
sal 'n globale veranderlike in JavaScript.
>> Nou, in huise, ons het 'n assosiatiewe verskeidenheid van gasheer tipe voorwerpe, waar
elke huis is net 'n breedte en 'n lengte aan.
Dan het ons die passasiers skikking, wat 'n verskeidenheid
voorwerp tipe passasier.
So elke passasier het 'n gebruiker naam, 'n naam en 'n huis.
>> Let daarop dat ek sê van die tipe passasier, wat eintlik maar net beteken
dat elke voorwerp het die dieselfde sleutel waarde pare.
So elke voorwerp van die tipe passasier het 'n gebruiker se naam, 'n naam en 'n huis.
So wat doen ons nodig het om te doen vir die p-stel?
Wel, moet ons toelaat dat gebruikers te kies up personeellede, al te vertoon
die personeel wat tans in ons shuttle, en hulle af te laai.
En dan sal ons ook praat oor ekstra eienskappe wat vir geïmplementeer kan word
die taxi p-stel.
>> Maar laat ons praat oor die bakkie eerste.
Die gesigte van CS50 personeel is geplant regoor kampus, waar elke
gesig is geïmplementeer as 'n plek merk op die 3D Aarde, en as 'n
merker op die kaart 2D.
So wanneer die gebruiker die bakkie druk knoppie, wil ons na die nabygeleë voeg
passasiers op die bus.
En ons wil ook hul plek te verwyder merk van die wêreld en verwyder hulle
merker op die kaart, wat aandui dat Hulle is in ons pendel nou.
>> So hoe kan ons spoor indien passasiers binne die omvang van ons shuttle?
Wel, die funksie afstand, so shuttle.distance, verby in die
breedte-en lengteligging, sal bereken die afstand vanaf die huidige posisie
van die bus na die punt wat jy spesifiseer met die gegewe
breedte-en lengteligging.
So jy kan dit gebruik om te bereken die afstand van die bus na die
passasiers.
>> Maar hoe weet jy waar die passasiers is?
Wel, dit is waar ons sal moet wysig die ingestuur funksie.
Vul plekke van al die personeel in passasiers in die wêreld
en in die kaart, maar nie slaan hul plek.
So miskien kan jy slaan hulle plaas punte en merkers
in 'n globale skikking.
>> Nou, daar is reeds 'n globale skikking stoor van inligting passasiers.
Die passasiers verskeidenheid winkels elke passasier se naam en hul huis.
So miskien kan jy 'n paar parameters voeg daar aan die passasier voorwerpe.
>> Om ons te help spoor van al die passasiers binne die omvang van ons
pendeltuig, laat se loop deur al die passasiers in die passasiers skikking.
'N lus vir in JavaScript kan kyk iets soos hierdie, baie soortgelyk aan
dié vir sirkelroetes in C. Of ons kan gebruik om 'n alternatiewe vir lus struktuur, vir
var i in skikking, waar ek sal nog steeds die indeks, maar jy hoef nie te
spesifiseer die array.length toestand en ek + +.
>> Elke passasier se plek is gegee deur hul plek merk.
Maar die plek merk is nie die breedte en die lengte aan.
Ons het daardie parameters om toegang te verkry deur om die meetkunde, met behulp van get
meetkunde op die plek mark, en dan Sodra ons die meetkunde, kry
óf die lengte of die lengte- die gebruik van dié funksies.
>> So nou weet ons hoe om op te spoor of passasiers is binne
omvang van ons pendel.
Sodra ons daardie passasiers, sal ons wil enige passasiers wat by te voeg
binne daardie reeks.
Ons wil hulle toelaat om te hop en neem 'n sitplek op ons shuttle, maar slegs
As ons genoeg ruimte vir hulle.
>> Die shuttle.seats skikking sal aandui of sitplekke is leeg, of
wat is in daardie stoel.
So as 'n stoel is leeg, dan daardie setel sal nul wees.
So Itereer oor die sitplekke skikking, nagaan vir leë sitplekke, stoor
passasiers in die sitplekke totdat jy het geen meer leë sitplekke.
En ongelukkig, enige ander passasiers sal moet wag vir die
volgende keer op die bus kom neer.
>> Sodra hulle kry op die bus, sal ons wil hul plek punt te verwyder, wat
is hul foto in die 3D-wêreld.
As ek wou 'n plek merk p te verwyder, dan sou ek al die eienskappe kry
van my aarde, van die Google Earth, en dan verwyder daardie spesifieke plek
merk met behulp van die removeChild funksie.
Dan laastens, laat ons verwyder die merker, die ikoon op die 2D kaart, vir enige
passasier wat ons optel.
>> 'N merker m te verwyder, dan sal ek net voer m.setMap null.
Doen dit vir enige passasiers wat binne die omvang, en jy het die bakkie klaar.
Die grafiek funksie moet al vertoon van die passasiers wat in jou
shuttle en leë stoel indien leeg.
So grafiek moet Itereer oor shuttle.seats, vertoon die
passasier inligting vir elke indeks, en leë stoel as die indeks is leeg.
>> Nou as HTML teks binne in 'n JavaScript veranderlike, dan deur
document.getElementById, kaart kan wysig die binneste HTML van die gegewe
element deur die toeken van die HTML teks na die
document.getElementById innerlike HTML veranderlike.
Wanneer die gebruikers op die Drop Off knoppie in index.html, sal dit noem die
dop van afval funksie.
En dit is ons werk om dit te implementeer.
>> In van afval, sal ons wil 'n te verwyder passasiers van die bus slegs indien
ons is in die reeks van hul bestemming, hul residensiële huis.
So van afval sal hê om te kyk of die bus is in die reeks van enige van die
huise, en verwyder enige nodige passasiers van die bus.
So hoe kan ons kyk of ons in die reeks van huise?
Wel, nog 'n keer, sal ons gebruik maak van die shuttle.distance funksie, verby in
die lengte-en breedte van die punt dat ons kontrolering teen.
>> Maar wat is die punte?
Wel, die huise skikking, as jy onthou in houses.js, stoor die
breedte-en lengteligging van elke huis in 'n assosiatiewe skikking, waar elke
indeks is die naam van die huis.
Toe passasiers te verwyder -
Wel, as ons is in die reeks van hul huis wat hulle wil hê om te gaan.
So weer, onthou dat passasiers slaan die huis wat elke passasier
wil om te gaan.
As hulle binne die omvang van hul huis, dan sal ons verwyder dat
passasier shuttle.seats en stel hul posisie in die skikking te null.
>> Nou kom ons praat oor 'n paar ekstra funksies wat in werking gestel kan word
die CS50 Shuttle p-stel.
Daar is 'n punt stelsel waarvolgens jy hou van hou hoeveel
wys 'n gebruiker.
Vir die val af passasiers suksesvol is, kan hulle kry punte.
Maar om te probeer om passasiers af te laai waar daar nie 'n huis in die buurt,
Wel, hulle kan gestraf daarvoor.
So miskien het jy wil om tred te hou met die punte in 'n globale veranderlike.
>> Jy kan dalk 'n timer, te implementeer waar die gebruiker het 'n sekere bedrag van
tyd om af te haal en af ​​te laai 'n sekere aantal passasiers.
Miskien selfs integreer met die punt stelsel.
Of jy kan Chart Wysig sodanig dat passasiers is gesorteer volgens huis.
So wat sou waarskynlik 'n soort funksioneer shuttle.seats.
>> Jy kan 'n vlieënde funksie implementeer, waar as die gebruiker insette die Konami
kode, dan is die bus lig van die grond en die bus kan vlieg.
Maar vir 'n veilige drop off, die beste te maak die pendeltuig sy wiele beland op die
grond eerste.
Jy kan ook teleportasie implementeer, waar jy 'n drop down list van
geboue in index.html.
En die kies van een van hulle, die gebruiker sal vervoer word
die gebou op die kampus.
OK, al is, deur te reis die mure van 'n paar
geboue op jou pad daar.
>> Jy kan ook die spoed van die verandering shuttle, sodat die gebruiker te verhoog
of verminder die spoed.
Miskien wil jy 'n globale veranderlike hou van hoeveel brandstof die
pendeltuig het, te verminder dit as jy gaan saam.
Sodra jy getref nul, al is, op die bus sal nie in staat wees om te beweeg, tensy jy
brandstof, miskien met behulp van 'n knoppie, of selfs jou eie gas-stasie.
>> Maar dit is beslis nie 'n volledige lys.
Check uit die spec vir die volle lys, of dalk stel
jou eie jou TF.
Die hemel is die limiet.
Dit is jou laaste CS50 p-stel, dus baie pret met dit.
Dit was CS50 Shuttle.
>> Ek het om te sê, dit was 'n plesier die maak van hierdie vir jou met die
produksie span.
En ek hoop dat jy ' geniet dit, as well.
My naam is Zamyla.
En dit was CS50.