>> 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.