ROGER ZURAWICKI: Ahoj všichni. Mohu získat vaši pozornost? Díky, kluci. Dnes chci mluvit o Meteor. Jedná se o rámcovou JavaScript. Budeme se prochází, jak můžete aby opravdu cool webové aplikace. Než jsme se dostali do JavaScriptu, jen jsem Chcete říct, že kluci, že to bude se - budete mít později poskládat tento semestr. Mělo by to být o JavaScriptu. Myslím, že [neslyšitelný] je nejprve bude pokrývají web HTML PHP věci, než jsme přesunout do JavaScriptu. A CS50, JavaScript je považován za jako kód klienta. Takže je to jen dostane spustit v webový prohlížeč. Ale díky nedávné pokroky v technologie, jsme nyní podařilo spustit JavaScript jako server. Tak tohle se vytvořil opravdu cool rámec, protože nyní můžete psát oprávněně stejný kód klient a server. A při definování funkce ve vašem Server, klient může volat ty, stejné funkce. A to dělá to mnohem jednodušší. Zatímco dříve, pokud používáte PHP na serveru, JavaScript na přední straně konec, budete muset napsat funkci PHP a pak verze Java scripty z stejnou funkci dělat stejný druh práce. Takže než začneme, chci ukázat vám ukázku toho, co Meteor může udělat pro vás. Ukážu vám demo, což je to, co budete moci vytvořit pomocí Konec tohoto semináře. Právě jsme se jít tady. To je aplikace Leaderboard. Je to vlastně vychází z příkladu že Meteor vám dává. Meteor je velmi příjemné, protože když nainstalujte ji jako balíček, můžete v podstatě hrát si s Tyto čtyři dema. A Leaderboard je První z těchto ukázek. Po semináři, Chtěl bych vyzvat vás všechny jen prozkoumat další ukázky protože si myslím, že jsou opravdu cool, a oni vám ukázat sílu Meteor. Takže, co to je, to je umístěn na žebříčku. To je jen upřímně seznam jmen. A můžete si vybrat lidi. Oni se zbarví žlutě. A pak si můžete dát je pět bodů. A zjistíte, že seznam je tříděné, protože jak jsem se dát sám sebe více a více bodů, já jsem teď na vrcholu. Tak tohle je místo, kde začneme. A co budete moci odnést z tohoto semináře je několik dalších funkce jsem přidány do Leaderboard. Budeme se zde zabývat, jak, stejně jako přidat pět bodů hráči, můžeme odstranění hráče, můžeme přidávat nové hráče, a můžeme si vybrat, jak chceme, je seřadit. A to všechno jsou velmi jednoduché volání API že Meteor poskytuje pro vás. Máte také funkci zde randomize skóre. Takže to, co je opravdu v pohodě o tom Je vy můžete vlastně jít všichni na místě. Dám to do větší textu zde. One-skupinu-olovo erboard.meteor.com. A když vy jděte na stránky, vám by měl být schopen upravovat stránky, a všechny vaše úpravy budou viditelné pro všechny ostatní. Tak můžete - jsou vy všichni schopni se připojit k webu? Takže hrát si s ním. Jdi a začít odstraněním některých jmen. Podívejte se, co se stane. Tak vidíte, každý může hrát. To je jen výchozí zabezpečení režim pro Meteor. Můžete vidět, že každý může změnit navzájem údaje. Nebojte se. Meteor má mít jistotu. To je velmi snadno implementovat funkce, kde jste si mohli nastavit uživatele a přihlášení. Ale právě teď, každý, kdo navštíví stránky mohou dát sami, jak mnoho zdůrazňuje, jak chtějí. Takže jsem vždycky takhle, protože to je zábavný způsob, jak začít. A pak se budeme jen mluvit o podrobnostech, jak Meteor je to možné. Tak jdu na pokrytí co Meteor je, a pak budeme jen potřebovat na pokrytí dva předpoklady, které CS50 se nevztahuje dost. Ale do konce funkčního období, měli byste být spokojeni jak s HTML a JavaScript opravdu dostat své ruce špinavé práci s Meteor. A myslím, že je to prostě skvělý způsob, jak pro dokonce i méně pohodlné studenti dělat Konečné projekty, protože může opravdu pobyt v jednom jazyce, a oni si viz změny jejich pracovat hned. Takže tento snímek ukazuje jen některé z hlavní technologie, které Meteor JS dává na vás. Meteor není nová technologie na jeho vlastní. Je to opravdu konglomerátem všechny tyto různé věci máme na internetu. Stejně jako HTML, CSS, JavaScript, jsme mají některé technologie, jako Node.js, což je to, co umožňuje spouštět JavaScript na zadním konci na vašem serveru, jakož i některé JavaScript knihovny, jako jQuery, podtržítko. Všechny z nich budou seznámeni se jste na konci semestru. A také se používat databázi s názvem MongoDB, což je opravdu populární databáze nyní Tyto nové startech. Můžete myslet na to, jak jako MySQL, ale funguje to velmi pěkně s JavaScriptem. A tam je nějaké jiné technologie zde a mnoho dalších jsem uveden že všechny interface opravdu pěkně se Meteor. Musím dát tento snímek, protože Někdy mám zmatek o tom. Meteor je pouze JavaScript. Není PHP. Je to Ruby on Rails. Takže pokud píšete kód, pokud chcete napsat projekt Meteor, opravdu nelze použít Ruby kód. Vy opravdu nemusíte používat PHP. I když uvidíme, že rozdíly v kód a syntax nemusí být, že jiný, chci zdůraznit vám, že Meteor vše, co je kód pouze v JavaScriptu. A vše, co ukázat uživatel bude HTML CSS. Ale vy vlastně používáte některý z další jazyky, které ostatní semináře by se měla týkat. Co Meteor je také je webový server. Takže i když nemáte žádné JavaScript, a vy prostě chcete sloužit CSS a HTML soubory, Meteor může udělat pro vás. A tady je odkaz znovu demo, které jsem vám kluci začal hrát s. Ale pojďme se přesunout na HTML. Kolik lidí tady má žádný nápad, co je HTML? OK skvěle. A to je naprosto v pořádku. Vy opravdu nemusíte vědět nic o to proto, že půjdeme přes použití velmi jednoduše. To je to, co jednoduché HTML stránka vypadá. To může být stejně jako vaše Hello, World pro HTML, zatímco jsme začali v jazyce C s ahoj, svět. Nechci, abys důraz na Podrobnosti o tom, co HTML, jakou hlavu, co tělo, co titul je tam dělá. Chci jen zdůraznit strukturu, jak máte tagy. A to je lomené závorky. A to je místo, kde máte Vaše deskriptory. Takže můžete mít dokument HTML. A pak budete zavřete dokument ve formátu HTML s lomítkem stejnou věc. A budete mít různé druhy značek. A všimněte si, že jsou to všechno uzavřeno. Budete mít jako tagu body a pak v blízkosti těla tag. A uvnitř tagu body, které bude obsah své webové stránky. Tak to webová stránka by se jednoduše zobrazit na bílém pozadí a černý text ahoj, svět. Znamená to, že má smysl? OK. Teď jdu rychle pokrytí JavaScript. Slovy předchozího TF, "JavaScript je nejlepší programovací jazyk v současné době v existenci. Ostatní lidé budou snažit řeknu jinak. Mýlí se. "JavaScript je dost pěkné, a já vám ukážu, proč. Tak to je klasický příklad začneme se v C. Máme ahoj, svět. A zjistíte, že i když se zmenšit to, musíte mít alespoň dva řádků kódu zde. Mám několik řádků kódu. To lze provést velmi jednoduše. Jeden řádek v JavaScriptu se console.log, a pak se vaše řetězec, ahoj, svět. Nyní, i když jdeme do nového jazyk JavaScript, téměř všechny dovednosti, které se naučili od kódování v C jsou přímo přenosné. Takže řetězce, myšlenka řetězců v dvojité uvozovky, je to stejné. Středník, že je to stejné. Užitečná funkce o JavaScriptu ve skutečnosti je to, že vám Nemusíte středník. Lze odhadnout, že byste měli dát středník tam. Ale to řekl, měli byste se vždy snažit aby vaše středníky tam. To je považováno za dobrý styl. A také, že to není hlavní funkcí. Stačí jen začít v horní části souboru a číst věci, řádek po řádku. Tak to je to, co je zapotřebí, aby že ahoj, svět programu. A pak zjistíte, že budete muset aby ahoj a pak spustit ahoj. S JavaScriptu, je to považováno za interpretovaný jazyk. Co potřebujete vědět, je, že není výroba. Není kompilace. Stačí jen spustit uzel. A pamatujte uzel je program, který poběží váš JavaScript na konzole, na černém poli, nikoliv webové stránky. Takže stačí dát soubor, a to bude tisknout ahoj, svět. Budu vlastně dělat trochu demo že pro vás tady. Takže pojďme se k mé Node.js terminál. OK. Pojďme se sem. Takže já jdu začít uzel. A já ti ukážu vám lidi v právě sec, jak se dostat, že nainstalován, pokud nemáte. Dovolte mi, abych to trochu větší. OK. Doufám, že vy můžete vidět. Tak jsem psát kód, jako jsem to udělal než v console.log. Ahoj, Roger. A všimněte si nemám dělat středník, ale pak jsem si to divný nedefinované věc. No vlastně, to nevadí o nedefinované věc. Věci, chci abyste si všimli, že vám nepotřebují zde hlavní funkce spustit spuštění kódu. A není to žádný konec lomítko. Tam je několik málo funkcí, které JavaScript může udělat pro vás. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Ach jo. Je mi líto, že. A že šipka znamená jen uzel je připraven na další příkaz. Takže si můžete nechat udělat jednoduché matematika, jako 1 plus 1. A stejně jako v C, tyto matematiky symboly jsou stejně. Mohu console.log čísla. A pak se to vytiskne dvě. JavaScript je příjemné v tom smyslu, protože i když dva je int, stejně jako v C, pokud jste printf se dva, měli byste si chybu. Ale JavaScript ví, oh, jsi tisk něco. Budu potřebovat řetězec. Takže mi dovolte převést, že dva do řetězce pro vás. A můžete si také udělat nějaké podivné věci jako hi a pak plus dva. To je jen další příklad toho, jak dva mohou být převedeny v i tam. Takže se, že z cesty, pojďme jen pokrytí trochu víc JavaScript. Takže v C, máme typy. Kdykoliv jsme vytvořili novou proměnnou, můžeme musím říct, že to je to char * nebo řetězec v případě CS50. Nebo když jsme měli desetinné číslo, jsme museli říkat plavat. Pokud bychom potřebovali Boolean, jsme museli říci, b. A pak jednou jsme měli něco, co byla b, musela zůstat bool. Nemohli jsme mávnutím kouzelného proutku změnit jej na int, pokud jsme psali v závorky, int B. V JavaScript, nejsou typy. Myslíš si, že to jako var. A var je, jak si vytvořit nový typ. Takže to může mít var y je řetězec, var n je plovák, a var b je pravdivý. A ještě jedna věc, kterou nemůžete udělat v C je Nyní mohu říci, po tomto řádku, b se rovná celé číslo. A to funguje v pohodě. Zatímco v C, bylo by to řekl, jako vaše číslo není bool. Nemůžu to udělat za vás. Nebo [neslyšitelný] by házet chybu. A já se rychle vrátit do uzlu a ukazují některé z těchto funkcí. Takže můžu mít var a. Nazvěme to "Apple". Takže teď, když jsem se tisku, Získám řetězec "Apple". Ale mohu také nyní říci, rovná 3. A všimněte si, že to není chyba. A teď se rovná 3. Jakékoliv dotazy tak daleko? Ano. DIVÁKŮ: Počkejte, tak console.log je v podstatě printf, že jo? ROGER ZURAWICKI: Console.log je vaše printf. DIVÁKŮ: Správně. Tak jak to, že pokud jste právě zadat osm nebo [neslyšitelné], co dělá, že [Neslyšitelný]? ROGER ZURAWICKI: Správně. Tak to je - věci zeleně se vytiskne na konzole. A to, co uvidíme dál, je když jsme se přesunout na web strana, nebudeme dělat - JavaScript se s HTML šablony, které budu pokrytí Meteor část semináře. A to je místo, kde si můžete říct, dej mi hodnota, a to bude dát in vaše webové stránky. Protože každý webový prohlížeč ve skutečnosti má malou konzoli. A když se podíváte pečlivě, můžete by se získat nějaké informace, jako je vaše printf se tam objevit se každé webové stránky načíst. DIVÁKŮ: Jak jste se dostal na obrazovce shellu? ROGER ZURAWICKI: Takže tam je příkaz tzv. uzel, a je dodáván s Meteor. Tak jsem si jen skončit ven. Uzel je program, který běží JavaScript. Pokud půjdete do meteor.com, můžete můžete nainstalovat Meteor, a Meteor přichází s uzlem. Vzhledem k tomu, Meteor je jen sbírka všech těchto softwarových balíků. Když jsme se k našemu příkladu, budu chodit všichni přes instalaci Meteor, a pak můžete hrát se uzel sami. OK, dobře. Takže další skvělá vlastnost o práci s JavaScript smyčky jsou stejné. Skoro přesně totéž. Pro smyčky, while, dělat while, if else. Je to všechno stejné s závorek. Je to stejná syntaxe. V případě cyklu for, malý detail, že musíte věnovat pozornost aby se namísto int i se rovná 0, musíme říci, var i rovná 0. Ale to je proto, že z proměnných typy, které jsme mluvili předtím. Všimněte si, že printf se log, console.log. A nepotřebujeme k tomu procenta p zpětné lomítko n a pak předat i. Stačí si jen říct, že jsem. A to by tisknout čísla od nuly do čtyř. Pokud vy chcete zkusit, protože jste vychováván dobrý postřeh. Pokud byste chtěli spustit tento kód na vašem vlastní prohlížeč, bych doporučil, aby Všichni se otevře prohlížeč Google Chrome. Google Chrome nebo jakýkoli webový prohlížeč ve skutečnosti, ale líbí se mi Google Chrome protože je to velmi standardizované. Můžete jít, věřím, že pokud klepnete pravým klikněte na libovolné webové stránky, jen v bílý prostor, uvidíte možnost tzv. Zkontrolujte Element. Je to obvykle poslední. A když na něj kliknete, měli byste si věc na dně se zde objevují. Dovolte mi přiblížit zde. A máme několik záložek zde. Ten vám záleží je konzole. A to je konzole JavaScript že nyní můžete pracovat. Skvělé. Takže můžu zadat stejné věci Byl jsem psát před v uzlu. Jedna plus jedna jsou dvě. Var se rovná "Apple". A pak bych vytisknout, a je "Apple". Takže v libovolném webovém prohlížeči, Firefox, Chrome, Safari, co použít, protože pokud máte přístup k JavaScriptu konzole, stejný druh Kód jsem běžel v uzel, který lze spustit ve vašem vlastním konzole. DIVÁKŮ: [neslyšitelné]? ROGER ZURAWICKI: Jak dostat do konzole? Musíte klikněte pravým tlačítkem myši na prázdné místo na stránce, a pak jdete na Zkontrolujte Element. Takže vlastně, rád bych vás kluci jen ujistit, že můžete Zkontrolujte, zda prvek v prohlížeči Chrome. A vidíte, když napíšete nějaký kód do konzole že to běží správně. Neváhejte se zeptat nějaké otázky, pokud něco není jasné, zde. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Jakýkoliv typ, že jo. Je tu jen jeden typ pro všechny proměnné v JavaScriptu. A když máte deklarovat proměnná, říkáte var. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Jo. To ano, ale v JavaScriptu, je to velmi chytrý o přidělování paměti. Neexistuje žádný malloc. Neexistuje zdarma. Takže se nemusíte bát, že. To je další pěkná vlastnost, že JavaScript poskytuje. Takže bych chtěl jít dál. Bylo by to v pořádku? OK. Skvělé. DIVÁKŮ: Já jsem jen potíže hledání [? Zkontrolujte Element. ?] ROGER ZURAWICKI: Tak Safari vzhled trochu jiná, ale vy mají Chrome nebo Firefox? Ti, kteří jsou jednodušší ty s ním pracovat. A pro vaše projekty, doporučuji držet se jednoho prohlížeče následujících důvodů budete mít spoustu chyb téměř protože každý prohlížeč zachází JavaScript HTML trochu jinak. Takže myslím, že tvůj život bude mnohem jednodušší, pokud se budete držet na Chrome, protože je k dispozici u všech strojů. A to je velmi populární prohlížeč. OK? Takže další téma, které bychom měli pokrytí v JavaScriptu - Omlouvám se za formátování zde. Musel jsem natáhnout snímky tak, aby odpovídaly širokoúhlý projektor. Ale já bych teď chtěl mluvit o jak to děláte funkce. V jazyce C, musíme prohlásit, každá funkce. Stejně jako int přidat, a to trvá int do x, a int y, a pak přidáme jim a vrátí jej. V JavaScriptu, funkce jsou ve skutečnosti jiný typ proměnné. Takže jsme prostě říct var přidat, a se rovná funkci. Funkce, která vezme x a y. A co to má funkce dělat? Vrátí X plus Y v přesně stejné syntaxe jako v C. A zjistíte, že v JavaScript, nebudete říkat, co Funkce vrací, protože od proměnné nemají typy stejně, je to to opravdu není produktivní, myslím, být určení všech vašich typy ve svých funkcích. A pak, když voláte funkci, je to přesně stejný syntax jako C. vás jen projít ve svých dvou argumentů. Chtěl bych to zkusit v mém uzlu. Mohu změnit snímek? DIVÁKŮ: [neslyšitelné]. Budeme si kopii snímky? ROGER ZURAWICKI: Ano. Takže pojďme zpět k uzlu. OK. Tak jsem si řekl var add rovná funkci. Užívání x, přičemž v y. A pak ví, že prohlášení je není dokončena. Takže v uzlu, nebo ve vaší konzole, si všimnete dot dot dot. Takže můžete mít zadáním kódu. A teď řeknu return x navíc y. A pak zavřete rovnátka. A ve chvíli, kdy jsem se zavřít rovnátka, je vidí, že prohlášení je dokončena. A teď můžu říct, přidat jeden a dva. A já dostanu tři z. Všimněte si, že když jsem se přidat, je mi říká, že je to funkce. A ještě jedna věc, kterou prostě věnovat pozornost je-li vám to dát špatné číslo argumenty, bude to dělat. To bude fungovat, ale můžete dostat některé opravdu podivné výsledky. Něco jako hodnoty na odpadky, můžete myslet na to. Takže prosím, jděte do toho a zkuste to ve vašich prohlížečích. OK, tak v zájmu času, budu Nyní se přesuneme na další funkcí v JavaScript. Takže jsme mluvili o funkcích. Mluvili jsme o smyčkách, if příliš. Syntaxe je stejná jako C a proměnných. A teď chci mluvit o pole. Je mi líto, že snímky dostal trochu odříznut. Ale ve skutečnosti, v první části, vše, co potřebujete bude fungovat. Takže máme jiný typ pro proměnné s názvem pole. A používáme hranaté závorky jejich označení. Takže v prvním příkladu, var arr, prázdná pole. Toto je seznam prázdný, takže pole neobsahující žádné prvky. A můžete mít také řadu se třemi řetězci. V jazyce C, každý prvek v poli musel být stejného typu. Ale protože v JavaScriptu je jen jeden druh, může pole ve skutečnosti mají různé typy hodnot. Stejně jako tady, máme pole s float, bool a int. Způsob, jak získat délku pole, nemáte skutečně nutné použít velikost nebo tak něco. Stačí říct, pole a pak dot délku. A tato délka tečka, může si myslíte, že je to něco jako struct, jak každý pole je pole, navíc proměnnou uvnitř je tzv. délka, která udržuje informace o tom, jak dlouho vaše pole je. Takže jsem jen rychle jít do uzlů a ukázat vám, kluci to samé. Takže můžu mít celou řadu. To může být prázdný seznam. A to mi bude tisknout zpět prázdný seznam. Skvělé. Nyní mohu říci, že pole má 1 a 2.3, a pravda. Takže všechny různé typy. A zjistíte, že funguje v pohodě. Pole se vrátím podpěry všechny hodnoty dal jsem to. Pokud bych se chtěl dostat na první prvek pole, syntaxe je vlastně stejně jako v C. Ty Dá se říci, pole nulové. A dostanete jeden. Mohu říci totéž pole dva, a já si to pravda. Pokud se mi něco mimo pole, JavaScript je bezpečný jazyk protože nebudu mít poruchu seg. Dojdu definován. A to undefined, můžete druh o tom přemýšlet jako null. Ale může to být opravdu nepříjemné, když jste Kód protože budete muset zkontrolovat, zda téměř všechno, co děláte, budete práce s není definováno. A uvidíme několik příkladů , když pracujeme v Meteor. I když řada čtyři je undefined, Mohu přiřadit mu hodnotu. Tak jsem si řekl, že se rovná jedné. A pak když jsem jít na pole, jsem mají přidanou hodnotu tam. A všimněte si, že pole tři, což také byla definována, zůstává nedefinovaný. Takže jsem teď mít pole s díra ve středu. Ale když jsem vytisknout řadu čtyři, Já bych si ho. Kdybych to udělal řadu tři, dostanu nedefinované. Tak pěkná vlastnost, že JavaScript můžete udělat, je, že seznam může změnit velikost. Pole, pole jsou seznamy, se změní velikost. A můžete zadat libovolné místo uvnitř nich. A všechny mezery budou vyplněny s těmito nedefinované hodnoty. Takže jsme mluvili o pole. Nyní, poslední věc, kterou chci pokrývat JavaScript, a to je velmi důležité, k pochopení kódu, který Chystám se vám ukázat, bude objekty. A objekty jsou termín v - v podstatě, že jsou přítomny ve mnoho programovacích jazyků. A každý programovací jazyk má rád myslíte, že z nich trochu jinak. Ale myslím, že pro Meteor, dobré Analogie je C struct. V jazyce C, chceme-li najít struct student, museli bychom specifikovat všechny věci uvnitř něj. Tak to má mít jméno. To má mít rok. To musí mít pohlaví. Ale musíme také dát typy všech těchto věcí. A teď, když máme tuto formu pro struct tzv. student, můžeme mít nové struct, a pak můžeme ručně říci, co každý z polí. A to je místo, kde budeme používat dot název, dot rok, dot pohlaví. A pak jsme se jen v posledním řádku Kód tady, já jsem jen vytisknout jméno na struct studenta. Ve světě JavaScript, je žádná taková věc jako struct studenta. Nemusíte vytvářet předvolby strukturu. Vy vlastně jen v těchto závorkách, můžete říci, co všechno je. A to je to divný zápis s tlustého střeva a pak čárka, ale budete zvyknout si na to brzy. A je to vlastně velmi jednoduché, flexibilní způsob, jak jen manipulace s objekty. Všimněte si, že pokud chci teď dostat jméno od s, jen jsem to s.name. Existují nějaké dotazy ohledně tohoto? To obvykle bylo velmi matoucí téma, když jsme se představit lidem JavaScript. Budu dělat nějaké příklady tohoto v uzlu. Ano? DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Takže myslíš, mají například násobek proměnné tohoto typu. DIVÁKŮ: [neslyšitelné]. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: OK. Takže myslím, že tak, jak byste jít o je byste klást žádné předměty do pole, a teď budete mít pole objektů. Znamená to, že odpověď na vaši otázku? DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Ano. S je jeden objekt. Takže můžeme jít do uzlu a jen pohrajte si trochu. DIVÁKŮ: [neslyšitelné]? ROGER ZURAWICKI: Oh, OK. Takže pokud se ptáte, jaké třídy jsou, Třídy se zachází velmi rozdílně, a mají opravdu divný systém tzv. prototypů, které ne potřebujete vědět. Neexistuje žádný pevný způsob, jak to udělat. Takže pokud chcete generovat více, vám by se jen tak mají funkci nebo tak něco. Můžete vytvářet své vlastní funkce. A vy byste se vrátit objekt. To by bylo nejjednodušší způsob, jak to udělat. Má to smysl? OK. Skvělé. Takže jakmile máme pochopení JavaScript objekty, které jsou - ach, ano. DIVÁKŮ: [neslyšitelné] například, jaký je rozdíl mezi "Roger" s uvozovkami srovnání [Neslyšitelný] s apostrofy. ROGER ZURAWICKI: OK. Takže je to v C, máme jeden citace představující znaky, a poklepejte citace představující řetězce. JavaScript vlastně hází to pryč protože můžete mít řetězce s jednoduché nebo dvojité uvozovky, a tam je žádná taková věc jako jeden char. Ale pokud jste právě zkopírovali stejné C kód, JavaScript by zacházejte s ní v pohodě. Což je důvod, proč jsem se zachází jako - To je důvod, proč jsem si doslova portu kód v tomto smyslu. A chci vám ukázat příklad složitějšího objektu. Takže si můžete všimnout, že jeden objekt může mít řetězce jako hodnoty. To může mít další seznam hodnot. To by mohlo mít seznam objekty jako hodnoty. Je tu opravdu žádný limit na to. Tak tady je to jen dobrá demonstrace o tom, jak se můžete dostat hodně různé typy děje vše v jednom objektu. Má to smysl? Nyní můžete mít pole objektů. A tady je trochu podobný tomu, co zeptal se, jestli můžete mít předměty stejného typu. Ale problém je, že neexistuje žádná pevná formát pro objekty v JavaScriptu. Takže budete muset zadat sami. A musíte se ujistit, že jsou jednotné. Takže tady, když jsem se vytvořit objekt, mám Ujistěte se, že každý z nich má pojmenovat, a každý z nich má dům. A pak mám řadu těch, a to může být moje chata. A pak zde můžete druh viz pro smyčky děje. Pro smyčky, že jen opravdu běžné způsob, jak přejít přes pole v JavaScriptu. Všimněte si, že tento model je velmi podobný na ekvivalent C, kde vám mají int i rovná nule. já je menší než délka. A pak jsem plus plus. Je to skoro stejný kód, až na pár detailů. Takže to všichni pochopili co objekt je? Jen si myslím o tom jako C struct. A jak můžete přistupovat pole je jen s tečkou. A tak dlouho, jak si vzpomenete, jak se použít tečku, budete v pořádku. OK, tak teď může každý četl, že odkaz? Toto je odkaz na projekt. Je někdo potíže vidět odkaz? OK, pojďme to změnit pak. Není to - Jo, to je asi Nejjednodušší způsob, jak to udělat. Skvělé. Takže pokud jdete na těchto stránkách, proto by měly být být některé instrukce, že budu přejít na to, jak můžeme nainstalovat Meteor a dostat naše ukázkové projektu v chodu. Chci, aby se ujistil, každý má odkaz dole, než jsem pohnout. Můžu dál? OK, dobře. Tak jsem tady na webu. Určitě jste si všimli v souboru readme, máme nějaké instrukce o tom, jak aby se tý nastavit. Musíte být buď v CS50 zařízení nebo jen na Mac. Windows nebude fungovat. Ale v podstatě cokoli, co není Windows by měly pracovat s těmito Pokyny v pohodě. Ale můžu, aby to trochu jakož i větší. Takže budete spouštět první pár příkazů. Tihle kluci se jen nainstalovat Meteor. Můžu jít do mého terminálu. A když jsem spustit totéž teď, Já už mám nainstalovaný. Takže je to o něco kratší. To může trvat trochu déle pro vás. Ale já chci, aby nejprve se ujistěte, že máme Meteor chod. Po nainstalován Meteor, měli byste mít možnost získat uzel v konzole. DIVÁKŮ: Ptají k zadání hesla. ROGER ZURAWICKI: To by bylo vaše uživatelské heslo, pokud jste na počítači Mac. Je to prostě potřebuje povolení k změnit některé systémové soubory. Takže otázka je, jestli vás to zeptá na heslo, je to jen s dotazem, Pro vaše uživatelské jméno a heslo, pokud se přihlásíte do vašeho počítače Mac. A je to tak, že můžete změnit systémové soubory. A když budete chtít, můžete přejít na k dalšímu kroku, který bude kopírovat Ukázkový kód mám z webových stránek. A budete mít nový adresář ve vašem domovský adresář s názvem leaderboard, a můžeme začít pracovat odtamtud. Takže jsem jen kopírování a vkládání těchto příkazy do mého terminálu. A pro mě, už jsem klonovat ho. Tak jsem si právě teď pohybovat do žebříčku. A měl jsem několik Soubory v tam. Jakékoliv dotazy? DIVÁKŮ: [neslyšitelné] nefunguje. ROGER ZURAWICKI: Oh, možná budete Potřebujete git nainstalován stejně. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Je nám líto? DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Oh, OK. OK. To proto, že možná budete muset být přihlásit se GitHub, aby se tento odkaz. Pokud vy můžete vidět, že nejjednodušší způsob, jak dělat to bych tedy říci, stáhnout zip. A to bude jen stahovat všechny soubory. A pak, jakmile dáte ji do stáhnout nebo váš domovský adresář - Doporučuji uvedení ve vašem domovský adresář, takže se všichni můžeme spustit stejné příkazy. Tak dlouho, jak budeme mít soubory, budeme moci začít pracovat s nimi. Dejte mi vědět, jestli jsou lidé s Potíž stahování souborů. DIVÁKŮ: Do domovského adresáře, máte na mysli - ROGER ZURAWICKI: Tak domovský adresář by být John Harvard, pokud jste v CS50 spotřebiče. Chcete-li získat do svého domovského adresáře, stačí zadat C. DIVÁKŮ: [neslyšitelné] CS50 zařízení [neslyšitelný]. ROGER ZURAWICKI: Ano. Chcete-li spustit příkazy v terminálu. DIVÁKŮ: [neslyšitelné]. Dostal jsem chybu, která říká, že ne takový soubor nebo adresář. ROGER ZURAWICKI: Můžeme mít rychlý zlomit a jen se ujistěte, že každý má nainstalován Meteor, a budu jen tak se snaží pomáhat lidem ven. Prosím, pokuste se vzájemně si pomáhat v případě, utíkáš do problémů. Omlouváme se, jo. Jste oba v přístroji? DIVÁKŮ: Jo. Mám Risa ROGER ZURAWICKI: OK. Vydáte-li se zpět na internetových stránkách, jít přejděte až na vrchol. A tam je to HTTPS. DIVÁKŮ: Zkopírujte toto? ROGER ZURAWICKI: Jo. A pak budete chtít zadejte příkaz git clone. Takže pokud jste stiskněte Ctrl A - DIVÁKŮ: Tady? A to [neslyšitelný]? ROGER ZURAWICKI: G-I-T. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Git a pak klonovat. Takže je to velmi podobný příkazu, měl výše, ale URL změnilo. Takže před tím, než byl tento, teď je to to. Dovolte mi, abych aktualizace - jo. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Toto je stáhnout. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Aha, tak to ani klon správně. Budu napravit. Je tu chyba, se snahou ke stažení souborů. Dovolte mi, abych aktualizovat příkaz pro vás takže mohu ujistit, že to bude fungovat. Je mi líto, že. To by mělo být stejné pro Macs nebo CS50 zařízení. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Aktualizoval jsem Příkaz k je-li číslo dvě, aktualizovat stránku. A s tím, URL, měli byste být schopny stahovat soubory. DIVÁKŮ: Takže když jsme ještě stahování [neslyšitelný]. ROGER ZURAWICKI: Pokud jste Stále stažení Meteor? DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Ano, chcete-li rozvíjet na vašem počítači Mac. Ale musíte se Xcode vývojáře nástroje instalované. Testoval jsem tyto příkazy na CS50 zařízení, takže mohu zaručit , že to bude fungovat. Ano. nech mě jít a pomůže vám. DIVÁKŮ: [neslyšitelné]. Dávám své heslo. To je Mac. A pak jsem si [neslyšitelný]. ROGER ZURAWICKI: OK. Chtěl bych zkusit spustit všechny příkazy pouze v CS50 spotřebiče terminálu. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Já bych si to pracovat První na terminálu, na CS50 zařízení, a poté terminál Mac. DIVÁKŮ: Takže pokud jste to na CS50 spotřebičem, jako že, [neslyšitelný]. ROGER ZURAWICKI: Chtěl bych se pohybovat , ale pokud lidé stále mají Problém nastavení Meteor, Kevin je více než rádi pomohou vám kluci ven, Kevin v šedé košili. Co bychom měli mít, je budeme spusťte poslední příkaz, číslo tři, ve náš terminál. Když to uděláme, budeme spouštět Meteor. A vy byste měli - oh, už mám Meteor běží. Takže to nenechá - dovolte mi, abych Jen zavřu další Meteor. Při spuštění Meteor, ty by měl nyní vidět, že - měli byste vidět aktuální adresář že to slouží. A teď se to řekne serveru běží na http://localhost. To je URL, které chcete dát ve ve Vašem webovém prohlížeči. A na té URL, měli byste být schopni přístup pěknou žebříčku. Tak zjistíte, že je to na localhost, což znamená, že pokud provedete některou změny, nebudeš se viz navzájem změny. Vzhledem k tomu, na internetových stránkách jsem vám ukázal na začátku, mohli bychom získat Změny všichni jsou, protože všichni byl přístup na stejné webové stránky. Takže dovolte mi jít na [? slovo?] 3000. Takže byste měli být schopni jen potvrdit , že funkce funguje. Můžete si vybrat různé lidi, a můžete dát jim různé body. Tak jsem se dát někoho bodů. Můžete také vidět, že oni se zvednou v pořadí. Nyní, v zájmu času, tam jsou tři vlastnosti, které jsem realizován. A budeme realizovat mazání Uživatelé jsou naší první prvek. Ale dříve, než budeme pokračovat, jsou Existují nějaké otázky? Měl jsi ruku. Ano? DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Je možné zjistit že Meteor je nainstalován? DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Místní hostitel 3000? A ty jsi v CS50 zařízení? Můžu dělat - nemusíte být na Mac. To bude fungovat v přístroji. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: V normální webový prohlížeč, jo. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Je Meteor běží? Takže OK, tam je rozdíl tady. Pokud používáte jej ve spotřebič, co musíte udělat, localhost uvnitř spotřebiče. Pokud používáte jej ve vašem počítači Mac, jako já, pak mohu udělat můj Mac Google Chrome. Ale pokud používáte CS50 spotřebiče co musíte udělat vše, v přístroji. Takže budete muset použít Google Chrome v přístroji. DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Je to stále nefunguje? DIVÁKŮ: [neslyšitelné]. ROGER ZURAWICKI: Tak jen zopakovat, jak si přístup na webové stránky nyní. Máte URL tady na localhost 3000. Pokud jste v CS50 spotřebiče musíte otevřít CS50 spotřebič v Google Chrome. A v tom Google Chrome v rámci zařízení, můžete zadat tuto adresu URL, a měli byste vidět žebříčku. Takže budu jen dát to pryč na straně tady trochu. A teď jdu otevřít můj textový editor tady. Takže jen se ujistěte, že kód je v pořádku. OK. Skvělé. Rád bych se nyní projít Kód trochu. A první soubor Chtěl bych začít s IS leaderboard.html. Budete mít možnost získat tento kód po seminář, takže chci jen ukázat, jste na mém počítači to, co se děje. Takže doufám, že si každý může vidět. Takže na začátku souboru, jsme mají naši hlavu a titul, který je podobné tomu, co jsme viděli v každém HTML dokumentu. A pak budeme mít tag tady tělo. Co jsem vybrán, je hlavním tělo, v podstatě to, co je bude se zobrazuje. Ale tam jsou některé nové non-HTML věci, a to v dvojité lomené závorky. A to jsou šablony tagy. Takže uvidíte tu tento držák držák nový leaderboard. A je to druh - myslet na to, jako volání funkce pro HTML. Toto je speciální verze HTML. Je to verze, která Meteor používá, což je důvod, proč si můžete zobrazit různé věci, jako je například žebříčku Jména a tlačítka. Ale leaderboard vám řekne, jít na šablona s názvem žebříčku. Takže šablona nedostane zobrazit sama o sobě, ale je to funkce, takže bude dorovnán. A budete nahradit v tom všem Kód tady do žebříčku. Zajímavá část žebříčku tady je právě tato tabulka. Pokud jste právě číst, přečtěte si tento kód nahlas, by mělo být intuitivní protože leaderboard, vše, co zde je tabulka. Toto číslo třída věci nemusíte je třeba se obávat. Jen vím, že tam je záhlaví tabulky. To je to thead. A zjistí, že jména a skóre. Všechny tyto značky, jako thtable, thead, budete jen naučit za pochodu. To není důležité, že jste zapamatovat to proto, že můžete jen přístup k jakékoliv reference on-line. Nebo na konci semestru, tyto bude jen velmi dobře obeznámeni s vámi. Po záhlaví tabulky, část, která chci nakreslit svůj pozornost, je to h tag. Vzhledem k tomu, že je do dvojitých hranatých závorek, je to šablona. Takže to znamená, že pro každý z hráčů, bez ohledu na hráči je, musíme zobrazit. A jdeme na šablonu přehrávače. Pokud se posunout dolů trochu víc - Doufám, že každý může vidět, že. Máme šablonu přehrávač. A tato šablona v podstatě definuje buňky tabulky, kde si dát do názvu tu a skóre. Zoomování se nyní můžeme vidět že tento kus kódu - a to byl náš hráč tam dole - vymezuje jeden z těchto buněk. Každá věc, kterou jsem klepněte na tlačítko zežloutne. Jednoduchý způsob, jak bych to teď změnit. Ujistěte se, že Meteor je stále spuštěn. Meteor by měl být proces serveru, takže stačí nechat běží, když jste vyvinuli. Řekněme, že jsem chtěl změnit všechny názvy nebo skóre. A řekl bych, že jdu sem přidat body. Takže změna, kterou jsem tady dělal bylo, místo toho jen skóre, I přidat skóre prostoru bodů. Chystám se vzdálíte, a já jsem jít zachránit svůj soubor. A poté, co jsem zachránit svou soubor, musím aby se ujistil, Meteor běží. Je mi to líto. Chci vám ukázat editace se provádí v reálném čase. Tak jsem si jen změnit nějaký text. Klepněte na přehrávač. Dávám to ve všech velkých písmenech. A to tak, že, je-li tento pracovní správně, když uložím to, že by se aktualizovat. Myslím, že právě teď je problém Nejsem ve správném adresáři. OK. Je mi líto, že. Tak tady, co zjistíte, je můj změna prošla. Teď říkají, že chcete vrátit změny. Chci se vrátit k tomu, co jsem měl. Jdu na to psát normálně. Klepněte na přehrávač. V okamžiku, kdy jsem ji uložit, místo osvěžuje pro mě. A vidím svou změnu na místo okamžitě. To je opravdu užitečné funkce při ladění, protože nyní Nemám na - když píšeme kód v C, ne jen my má soubor uložit, ale museli jsme aby jej a spusťte jej znovu. Meteor je velmi pěkné, protože na rozdíl od C v okamžiku, kdy uložíte HTML nebo JavaScript soubor, změna se objeví okamžitě. Jedna otázka je, v těchto šablonách, jak získám hodnoty, jako jsou přehrávače nebo vyberte jméno? Mám-li přiblížit zde na mém kódu, Vidím to u každého hráče. Takže ví, že šablona Mám hráče nějak. A ví, že tam je vybrané jméno. Kde se to tu vzalo? To pochází z jazyka JavaScript. A pokud jdete na leaderboard.js, tento soubor, teď, když jsem jít sem, máme několik příkazů definovány. Toto je speciální syntaxe, Meteor. Všimněte si, že nemusíte Vars nebo tak něco. Ale to jsou jen struktur na základě struktur na základě struktur nebo těchto objektech. A všechno, co jsem definování je šablona tzv. leaderboard. Leaderboard by měl dostat čemu se říká hráče. A co je hráči? Je to, co tento výraz vrací. A co je vybrán název? Je to trochu více kódu. Podrobnosti o kód, který jsme si pokrytí o něco později. Ale teď chci, abyste pochopili, že v tomto kódu, bereme hráčů, a dáváme mu hodnotu. V tomto případě, je to funkce že dostane popraven. Takže můžeme získat hodnotu zpět když jsme se spustit funkci. To je log. Má to smysl? Mohu změnit způsob, jakým se to třídit. Tady, tam je druh objektu. A co to říká, že je budu třídit podle skóre sestupně první a pojmenujte vzestupně. Je-li to změnit na jeden, to se děje třídit skóre vzestupně. Takže nula by měl být na vrcholu. A když jsem se přiblížit na mých webových stránkách, jsme Nyní vidíme, že webové stránky aktualizovány. A výsledek je zlézt. Další funkce jen chci k pokrytí je kliknutí přírůstek. Ze zájmu času, nebudu být schopen pokrýt více Meteor kód, ale existuje spousta zdrojů, k dispozici, a budu zde po semináři. Ale jen chci pokrýt Leaderboard události. Tato syntaxe se dozvíte něco později v přednášce. To je JavaScript. Jsme jen říkám, když jsme se cvaknutí, a to je na přírůstku, to hash prostě znamená ID. Na štítku přírůstek ID, pak chceme aktualizovat - klíčová slova, chci tě sledovat je aktualizace a vybrat a hráč. Takže podle toho, co hráč je zvolen, jsme ji aktualizovat. A to, co děláme, je, že přírůstek jeho skóre pět. A to popsat činnost Máme zde. Po skončení tohoto semináře, budeme být schopni vidět nějaký další kód. Ale jít zpátky do svého cíle, že chci, aby změnit místo, chtěl jsem sem přidat tlačítko Odebrat tak Můžu smazat přehrávač. Takže k tomu, že musím udělat dvě věci. Musím aktualizovat HTML, aktualizovat zobrazit to, co dostane zobrazí uživateli, a pak nějaký JavaScript, který při stisknutí tlačítka, Meteor se děje něco udělat. Bude to odstranit tento přehrávač. Takže tam je spousta kousky kódu , které mají v podstatě již byl pro mě udělal. Když se podívám tady, už mám cestu jak se dostat do vybraného hráče. To je to věc, pokud ho vidíte. Takže když jsem - Budu mít další akci. Takže budu kopírovat to, co mám. Protože se jedná o seznam, Potřebuju jen čárku. Takže teď budu Klepněte na tlačítko Odstranit. A pak místo hráčů aktualizace, Budu dělat hráčů vymazat. A všichni hráči odstranění potřeby je zvolen hráčem. Takže tato funkce je vše, co potřebujeme. Já třeba přidat některé HTML zde ačkoli. Takže když jsem se procházet sem, To je pohled HTML. Měli jsme něco tady, který byl tag. Nemusíte se obávat, že. Na čem záleží na vás je toto ID přírůstek. A to je to, co nám umožnilo říci, kdy jsme klikli přírůstek, musíme dát pět bodů. A uvidíte, že je to tlačítko. To je to, co BTN znamená. A text v tlačítku je dát pět bodů. Takže, co budu dělat, je, že jsem bude kopírovat tento řádek. Chystám se změnit ID, kterou chcete odstranit. A já jdu pro změnu text zde odstranit. Takže ujistěte se, že vše, co je uloženo. Chci se vrátit do mého JavaScript aby se ujistil, že mám odstranit postavili zde. Dobrá. Takže jdu zachránit oba soubory. Po uložení obou souborů jsme Můžete se vrátit ke dnu. A nyní vidíme, máme Tlačítko vymazání. A ještě jeden krok. Všimněte si, můžete dostat chyba, protože když jsem klepněte na tlačítko odstranit, nic se neděje. Způsob, jak ladit to je jít zpět na Zkontrolujte Element. Já dělám schválně, takže můžete vidět, jak byste ladit něco. V Zkontrolujte Element, máme všechny naše textu tady dole. Chci se vrátit do konzole. A co se stane, když jsem jít sem je, že jsem si nějaké chyby. To říká, že neexistuje žádný způsob odstranění. Takže, co to říká, je, když jdu zpět na kód, volal jsem přehrávač odstranit zde. Odstranit je ve skutečnosti není právo příkazu. Takže zjistit, co je správné příkaz je, že je Meteor API. Dokumentace Chci tě upozornit kluci, je jen na meteor.com. Tak jsem si to tady. To je jen tak vy víte, kde se dozvíte více. Tam je odkaz na dokumentaci. A v podstatě, mohu jen se najít pro odstranění. A to, co vidíte, odstraňte je skutečně odstranit. To je příkaz, který Musím zavolat. Takže teď, když víme, že jdu změnit toto odstranit odstranit. Takže teď, když jsem se vrátit do mého žebříčku místo, budu klikněte odstranit, a teď jsem pryč. K dispozici je více Roger. A mohu pokračovat odstraněním každý Jediný dokud nebudu mít nic. Takže to bylo trochu náhled o tom, jak používat Meteor. Budete se učit mnohem víc JavaScript HTML a nezbytné, aby se to vypadá hezčí, které budeme pokrývat tento týden [? kus?] nastaven na HTML a JavaScript v příštím [? kus?] nastavena. Takže se nemusíte si dělat starosti, ne-li všechny tohle přijde snadné pro vás. To bude v době konečný projekt. Díky za ukazovat. Odkaz budu aktualizovat brzy po seminář, takže můžete vidět některé další příklady, které jsem realizované na tom, jak získat více pokročilé žebříčku že mám na těchto webových stránkách zde na jedno-skupinu-leaderboard.meteor. Děkuju. [APPLAUSE]