ZAMYLA CHAN: No, jsme tady, poslední p-nastavit CS50. Gratuluji sami od s tak daleko od svého prvního Dobrý den, Světy a tisk Up Pyramidy pro Mario. Udělal jsi webové stránky minulý týden. A my bude dělat jiný tento týden, ten, který vám umožňuje jezdit na Harvard areálu, vybírání se členy CS50 zaměstnanců a přivést je zpět k jejich obytné domy. Nyní, minulý týden jsme pracovali v PHP, side jazyk serveru. V tomto p-set, budeme se představil JavaScriptu, který je na straně klienta jazyka. Takže pojďme se podívat na některé z Distribuce kód, který se připravili jste v tomto p-set. Ve složce JavaScript, bude tam být banda souborů JavaScript. K dispozici je buildings.js, která obsahuje řada budov po celém Harvardu Areál s jejich informacemi a pozice. Houses.js je řada Harvardu bytové domy s jejich zeměpisné šířky a délky. Passengers.js obsahuje řadu cestující, členové CS50 zaměstnanci že budete dobývat do jejich obytné domy. Math3D.js, že obsahuje velké množství Funkce dělat s pohybem. Pokud jste matematicky smýšlející, pak Vítám vás podívat. Ale nemusíte rozumět všechno, co tam je. Shuttle.js, která se zabývá pohyb raketoplánu. A index.html je domovská stránka, kde všechno, co se děje, opravdu, kde uživatel interakci s webem. Service.css je CSS stylů, který kromě Twitteru Bootstrap Knihovna, kontroly jak index.html vypadá. A pak tu máme také service.js, které obsahuje servisní funkce pro Shuttle. A tady je místo, kde budete mít vyplnění některých Do to-je. Nyní se pojďme podívat na objekty a asociativní pole v JavaScriptu, který pro všechny záměry a účely, jsou zaměnitelné. Kdybych chtěl, aby se objekt proměnnou volal hůlka, bych prohlásit ji. A uvnitř těchto složených závorek, bych specifikovat, jádro je jednorožec, dřevo je třešeň, a délka je 13. Nyní jsem také přístup k hodnotám objektů pomocí asociativní pole notace. Takže hůlka index jádro, lze nastavit která se rovná jednorožec, nebo zkontrolujte, že když budu potřebovat. Nebo mohu použít operátor tečka wand.wood rovná třešeň, a a tak dále a tak dále. Takže vidíte, že asociativní pole a objekty v JavaScriptu se bude zaměnitelné, a bude přijde docela vhod. Pak vidíme řadu domů v buildings.js, opět, pole objektů. Pokud bych chtěl udělat celou řadu nejlepších stavby na Harvard akademické půdě, pak Chtěl bych, aby to takto. Pomocí tohoto objektu zápis, pokud I uložit kořenový, jméno, adresa, šířky a délky pro každý jeden objekt objekt. Pojďme rychle mluvit o proměnných v JavaScriptu. Stejně jako PHP, JavaScript proměnné jsou slabě nebo volně zadali. Chcete-li vytvořit lokální proměnné, můžete prefix název proměnné s V-A-R, var. Nyní, v JavaScriptu, bude funkce omezit rozsah proměnné. Takže pokud máte lokální proměnné v rámci funkce, pak další funkce Nelze přistupovat. Ale na rozdíl od C, smyčky a podmínky ne omezit rozsah proměnné. Takže i když se to deklarovat uvnitř stav, bude celá funkce mají přístup k němu. Nyní, bez var proměnná bude globální. Takže pokud jste právě deklarovat jméno a přiřadit hodnotu, pak tato proměnná bude globální proměnné v JavaScriptu. Nyní, v domech, máme asociativní Pole typu hostitel objektů, kde každý dům je jen šířka a délky. Pak máme cestující pole, což je pole typu objektu cestujícího. Takže každý cestující má uživatele jméno, název a dům. Všimněte si, že říkám typu cestujících, což ve skutečnosti znamená jen že každý objekt má Stejná dvojice klíč hodnota. Takže každý objekt typu cestujících má uživatelské jméno, název a dům. Takže to, co potřebujeme, aby udělat pro p-set? No, musíme umožnit uživatelům vybrat nahoru zaměstnanců, zobrazit všechny se zaměstnanci, které jsou v současné době naše kyvadlová doprava, a je odjet. A pak budeme také mluvit o další funkce, které mohou být realizovány na Shuttle p-set. Ale pojďme mluvit o vyzvednutí první. Tváře CS50 zaměstnanci byli zasadil po celém areálu, kde každý obličej je implementován jako místo značka na 3D Zemi, a jak značka na 2D mapě. Takže, když uživatel klepne na Pickup tlačítko, chceme přidat poblíž cestující do raketoplánu. A také chceme odstranit své místo označit ze světa a odstranit jejich značka z mapy, což naznačuje, že jsou v našem raketoplánu nyní. Tak jak jsme se zjistit, zda cestující jsou v dosahu našeho raketoplánu? No, vzdálenostní funkce, takže shuttle.distance, předáním zeměpisné šířky a délky, se vypočítá vzdálenost od aktuální polohy z raketoplánu do té míry, že Zadáte se, že vzhledem zeměpisné šířky a délky. Takže můžete použít k výpočtu vzdálenost od raketoplánu, aby cestující. Ale jak víte, kde cestující jsou? No, to je místo, kde budeme muset upravit funkci naplnit. Naplnit umístí všechny zaměstnance cestujících do světa a do mapy, ale není uložit jejich umístění. Takže možná si můžete uložit své místo známky a značky v některých globálním poli. Nyní již existuje globální pole ukládání informací od cestujících. Obchody Cestující pole každý Jméno cestujícího a jejich dům. Takže možná, můžete přidat pár parametrů tam objekty pro cestující. Chcete-li nám pomoci odhalit všechny cestující v rozsahu naší kyvadlová doprava, pojďme smyčka přes všechny cestující v poli cestujících. Pro smyčky v JavaScriptu může vypadat něco takového, velmi podobné těch, pro smyčky v C. Nebo můžeme použít alternativa pro strukturu smyčky, pro var i v poli, kde se bude i nadále index, ale nemusíte se určit Array.length stav a i + +. Umístění Každý cestující je vzhledem k jejich místo značkou. Ale místo známka není zeměpisné šířky a délky. Máme přístup k těmto parametry získání geometrie, pomocí get geometrie na místě značku, a pak jakmile budeme mít geometrii, jak buď šířka nebo délka pomocí těchto funkcí. Takže teď víme, jak zjistit, zda cestující jsou v rámci Rozsah našeho raketoplánu. Jakmile budeme mít ty cestující, budeme Chcete přidat nějaké cestující, které jsou v tomto rozsahu. Chceme, aby mohli naskočit a vzít sídlo na naší raketoplánu, ale pouze pokud budeme mít dostatek prostoru k nim. Shuttle.seats pole bude ukazovat zda sedadla jsou prázdná, nebo který je v tomto sedadle. Takže, pokud je sedadlo prázdné, pak že sídlo bude mít hodnotu null. Takže iteraci přes pole sedadla, kontrola prázdných míst, skladování cestující do těchto míst, dokud se nemají žádné další prázdná místa. A bohužel, všechny ostatní cestující bude muset počkat příště raketoplán přijde. Jakmile se dostanete na raketoplánu, budeme chtít odstranit jejich značku místa, které je jejich fotografie ve 3D světě. Pokud bych chtěl odstranit místo známky p, pak bych dostat všechny funkce z mého Země, z Google Earth, a pak odstranit, že konkrétní místo označit pomocí funkce removeChild. Pak konečně, pojďme odstranit značku, ikona na 2D mapě, pro všechny cestujících, které jsme vyzvednout. Chcete-li odstranit marker m, pak budu stačí spustit m.setMap null. Udělej to pro všechny cestující v dosahu, a vy jste skončil pickup. Funkce tabulka by se měla zobrazit všechny cestujících, které jsou ve vašem kyvadlová doprava, a prázdné místo, pokud je prázdná. Takže graf by měl iteraci shuttle.seats, zobrazení Informace o cestujících pro každý index, a prázdné místo, pokud je, že index je null. Nyní, když text HTML je kladen uvnitř JavaScript proměnná, pak pomocí document.getElementById, graf může upravit vnitřní kód HTML, který daný prvek přiřazením HTML text document.getElementById vnitřní HTML variabilní. Když uživatel klikne na tlačítko Drop Off v index.html, bude to volání Funkce dropoff. A to je naším úkolem realizovat to. Ve údajů o opuštění, budeme chtít odstranit jakékoliv cestující z raketoplánu pouze tehdy, pokud jsme v rozsahu svého určení, jejich obytný dům. Takže dropoff bude muset zkontrolovat, zda Kyvadlová doprava je v dosahu některé z domy, a odstraňte potřeby cestující z raketoplánu. Tak jak jsme se zkontrolovat, zda jsme v řadě jiných domů? No, ještě jednou, budeme využívat v shuttle.distance funkce, předáním zeměpisné šířky a délky z bodu že jsme kontrolu proti. Ale co jsou ty body? No, domy pole, pokud si vzpomenete v houses.js, ukládá zeměpisná šířka a délka každého domu asociativní pole, kde každý Obsah je název tohoto domu. Pak odstranit cestujících - dobře, jen když jsme v rozsahu jejich dům, který chtějí jít. Takže znovu, nezapomeňte, že cestující ukládá dům, který každý cestující chce jít. Pokud jsou v dosahu jejich dům, pak budeme odstranit, aby Cestující z shuttle.seats a sady jejich postavení v poli na hodnotu null. Nyní pojďme hovořit o některých dalších funkcích , které mohou být prováděny v CS50 Shuttle p-set. Tam je bodový systém, kdy budete mít přehled o tom, kolik body uživatel. Pro vypadnutí cestujících úspěšně, mohou získat body. Ale snaží vysadit cestující tam, kde není žádný dům v okolí, dobře, že může dostat penalizaci za to. Tak snad chcete sledovat body v globální proměnné. Můžete implementovat snad časovač, kde uživatel má určité množství čas zvednout a odjet A určitý počet cestujících. Možná, že dokonce integrovat tento s bodovým systémem. Nebo si můžete upravit graf takový, že cestující jsou řazeny podle domě. Tak to by asi bylo trochu fungovat na shuttle.seats. Můžete implementovat létání funkci, kde v případě, že uživatel zadá Konami kód, pak raketoplán zvedne pozemní a kyvadlová doprava může létat. Ale pro bezpečné odejdou, nejlepší, aby se Raketoplán přistane na jeho kola na zem jako první. Můžete také provést teleportaci, kde uděláte rozevírací seznam dolů budovy v index.html. A výběrem jedné z těch, uživatel bude převezen do že stavba na akademické půdě. OK, i když, cestovat přes stěny některých stavby na vaší cestě tam. Můžete také změnit rychlost kyvadlová doprava, což umožňuje uživateli zvýšit nebo snížení rychlosti. Možná budete chtít globální proměnnou sledovat, kolik paliva Kyvadlová doprava má klesající to, jak jdete dál. Jakmile dosáhnete nuly, i když raketoplán nebude schopen se pohybovat, pokud jste natankoval, snad pomocí tlačítka nebo dokonce vytvořit svůj vlastní čerpací stanice. Ale to rozhodně není vyčerpávající seznam. Podívejte se na spec pro plné seznam, nebo třeba navrhnout vlastní na vaší TF. Nebe je limit. Toto je vaše poslední CS50 p-set, takže bavit se s ním. To bylo CS50 Shuttle. Musím říct, že to bylo potěšení takže to pro vás Produkční tým. A doufám, že jste si je, stejně. Jmenuji se Zamyla. A to bylo CS50.