TOMAS REIMERS: Ahoj, všichni. Jmenuji se Tomáš Reimers. 

MIKE RIZZO: A já jsem Mike Rizzo. 

TOMAS REIMERS: Jsme dva CS50s TS. A dnes jsme v čele seminář na JavaScript a CSS pro webové aplikace. Pokud chcete sledovat spolu, odkaz je támhle. A chcete, aby ji na počítači krátce? 

Tady je odkaz. Je to malé místo, které má vazby na všechny zdroje Chystáme se být ukázal vám dnes, a také má spoustu užitečné informace, napsal nám čtěte více do hloubky, když jdete zpátky, a vy se snažíte vzpomenout, co přesně tak jsme si řekli, co jste byli mluví o, et cetera. 

MIKE RIZZO: Dobře. Tak pojďme začít. 

TOMAS REIMERS: Takže chcete začít? OK. 

MIKE RIZZO: Jo. Tak jsme se poprvé chtěli začít s širokým přehled o internetu a typy souborů, při navrhování webových stránek. I když tato prezentace my chceme, aby dostat se do do JavaScriptu mnohem mnohem později, jsme chtěli začít s jen, druh, jako oko pohled z ptačí z čeho webové stránky je a jak přemýšlet o navrhování Webové stránky pro start. 

Takže vy, v tomto bodě - s ním že v pátek večer - by měli mít předložil své CS50 finance Problém sady. Doufejme, že byl dobrý vkus o tom, co webové programování může být. Ale tady chceme, druh, dát si jiný vkus, stejně. 

TOMAS REIMERS: Tak jen shrnout, co se stane, když zadáte adresu URL do váš webový prohlížeč, který dostane URL vzhlédl v počítači. A počítač je připojen k jinému počítači, které hostí tuto webovou stránku. OK, takže když jdete na google.com, že jste připojen k jednomu z Google je počítače, který má soubory na google.com. 

To pak požádá o konkrétní soubor. Takže pokud jdete do - Nevím - example.com / index.html / nebo test.html, budete žádat že konkrétní soubor. A webový server děje vrátit se k vám. 

Poté, co projdete tohoto souboru - jakmile jste počítač dostane, že soubor - je to chystá začít vybudovat webovou stránku. Takže teď má soubor HTML, což je něco jako Struktura webové stránky. HTML soubor by také odkazovat CSS soubory, které definují styl webové stránky. 

JavaScript soubory, které definuje interakce s webovou stránkou. Obrazové soubory, které jsou jen obrazy. A případně odkazy na jiné soubory HTML, které pak můžete navštívit. 

MIKE RIZZO: OK, dobře. Takže vy máte všechno, možná, pečlivě nastavit místního hostitele na vašem virtuálním stroji. A to právě, druh, je místní doména, která váš počítač hostitelem pouze pro vás na vlastní IP adresu. 

Takže v to, že pak můžete přidat k tomu své vlastní webové stránky. Myslím, že v CS50 financí, měli byste mít přidány některé HTML stránky, které jsou, druh, zabalené v PHP obalu. Ale nakonec, jaké jsou vaše PHP stránky se výstup byl HTML. 

Ale vzpomněl si na začátku z pset, jsme museli nastavit oprávnění pro všechno, že jo? Takže to v podstatě jen práskne kdo umí číst, psát, a možná provádět jednotlivé soubory. Takže budeme dělat rychle - hm? 

TOMAS REIMERS: Tak jdeme udělat rychlý demo. Takže jen pro připomenutí, když se připojení k počítači Google - kdo - a požádat o souboru, počítač nejprve je třeba, aby se ujistil, že jste oprávněn skutečně zobrazit tento soubor, nebo četl, že soubor, protože nemůžete jen zeptat pro jakýkoliv soubor na tomto počítači, že jo? To by bylo riziko zabezpečení. 

Takže soubory na systémech, které používáme, jako je Tento CS50 zařízení, mají tři obecně lidé, kteří mohou mít oprávnění k něčemu. Prvním z nich je skutečný majitel uvedeného spisu. Druhá je skupina, která soubor patří. Nebudeme se soustředit příliš mnoho na to. A poslední věc je, něco, jako je svět nebo jako všichni ostatní, kdo je není specifická pro tento soubor, a nemá mít žádná vlastnická práva k ní. 

Takže máme-li vlastník, skupina, a pak se svět. A pak, pro každou z těchto skupin, je může mít jednu ze tří oprávnění, OK, nebo více z nich. Můžete mít oprávnění ke čtení. Můžete mít správná oprávnění. A můžete si spustit oprávnění. 

Takže pokud jde o skutečné typy souborů, přečtěte si Povolení je jako ve skutečnosti čtení obsah souboru. Právo povolení se píše do uvedeného souboru. Vykonávat oprávnění běží soubor jako vy, když musíte spustit některý z Vaše CS50 projekty. 

Takže když budeme přemýšlet o souborech jako když musíme číst HTML Soubor, který musí být svět čitelné, ne? Lze předpokládat, že i majitel chce být schopni upravit tento soubor. Takže majitel bude potřebovat číst a psát oprávnění. Nemají opravdu potřebujete spustit. 

Skupina, jdeme k léčbě stejně jako svět pro teď. Takže oni potřebují oprávnění ke čtení. Ale nemusíte psát nebo vykonat oprávnění. A teď, když si myslíme, že zpět do bývalé PSETs, co si uvědomujeme, je tento druh z vypadají jako binární, že jo? 1 znamená ano. 0 pro ne. A můžeme skutečně překládat to binární. 

Takže 110 v binárním by být 6. 100 bude 4. Stejné je to s světem. Takže číslo, které by se pro oprávnění pro to bude 644. 

MIKE RIZZO: A pokud si myslíte, zpět do když chmoded něco, věřím, dali do problému nastavení příklad, kde byste mohli udělat něco jako chmod 644 a poté název souboru. 644 pak, můžete nyní vidět přímo kde to pochází. Tak doufejme, že dělá, že trochu jasnější. 

A pak pro přehlednost vám chlapa - ach jo, tady je to znovu. Takže 600 by pak být jen příklad dali jsme sem, kde má vlastník čtení a správné oprávnění, zatímco skupina a svět nemají žádné oprávnění přístup k souboru. 

TOMAS REIMERS: A pak jsme rychle Seznam společných oprávnění. Takže adresáře, budete chtít skutečně chmod 711. Rychlé stranou - pro adresář mít spustitelný povolení znamená, že je schopen otevřít adresář. Obrázky, CSS, JavaScript, HTML potřeby 644, protože v podstatě svět potřebuje oprávnění ke čtení. 

A PHP, které vy jste viděli i když nebudeme o tom mluvit přísně je typicky s chmoded povolení 600, protože je to běh s oprávnění vlastníka. Alespoň na zařízení. 

MIKE RIZZO: Takže pokud tomu nejsou výslovně určit, jaký typ souboru Chcete-ve skutečnosti nastavení do této prezentaci - jsme měli problém s tím, protože vše, co nebylo správně chmoded - budete mít, druh, zakázáno chyba, že webové stránky nemá ve skutečnosti mají oprávnění přístup bez ohledu na soubor chcete, aby přístup. A samozřejmě, že může být stanovena - jako problém sada - změnou oprávnění přiměřeně. 

TOMAS REIMERS: A poslední poznámka pro Rychle místní rozvoj - jsme přinesl to, ale jen jsme chtěli aby to zase - pokud se zeptáte na serveru - takže místního hostitele, Například, com nebo cokoliv jiného. - a neurčíte konkrétní soubor, soubor, který váš počítač se děje požádat o se nazývá index.html. Nebo v případě, že neexistuje, index.php. 

V pohodě. Takže je to jen rekapitulace všeho, doufejme, že jsme na které se vztahuje sekce a přednášky, a tak daleko CS50. A teď budeme začít mluvit o specificky knihovny. JavaScript a CSS knihovny pro webové aplikace. 

Tak jedna rychlá důvod, proč máme knihovny je programování - je tu spousta problémů programování, které udržují objevovat znovu a znovu a znovu. Můžete si všimnout, že mnoho internetových stránek je třeba schopnost mít rozbalovací menu, například, nebo potřebujete schopnost mít tlačítko velmi standardní styl, který nemusí být nejjednodušší. Teď, když začnete se dostat do HTML, můžete Uvědomuji si, že tlačítka může skutečně vypadají opravdu ošklivě, pokud vám nedělají nic. 

Takže mnoho lidí psali s názvem knihovny. A v této souvislosti, že jsou také volal rámce. Budeme používat dva vzájemně zaměnitelné. A to, co oni jsou, je, že jsou v podstatě premade kusy kódu - Buď CSS nebo JavaScript - že odnést hodně tým máte v kódování. 

Takže předem definovat spoustu tříd, nebo předem definovat spoustu funkcí pro JavaScript je případ, který můžete zavolat později. A pak je to možné, nějak, se přístup k tomuto kódu, aniž by museli něco udělat. Příkladem knihovny bylo CS50.H. To byla knihovna dali jsme vám zpět v týdnu jeden, který dovolil, abys věci, jako že vezmi_int a GetString aniž by bylo nutné psát jakýkoli kód sami. 

MIKE RIZZO: Dobře. Tak tady, stejně jako jsme museli zahrnout v našem c soubory liší knihovny, také bychom měli zahrnout do náš HTML soubory různých knihoven. Například, pokud bychom chtěli zahrnout specifické knihovna JavaScript tady, možná ten, který jsme napsal sami, jak je to místně hostil tzv. script.js, právě jsme použít tento zápis. 

Takže máme typ skriptu rovná JavaScript zdroj rovná JavaScript.js. A pokud si myslíte, že zpět do své CS50 finance problému nastavení, pokud jste se podívali na header.php ve složce šablon, byste měli vidět některé z nich v ceně. Tak to první - skripty - je včetně knihovny JavaScript. Včetně knihovny CSS je trochu jinak. 

Zde, namísto skriptu Tag musíte tag odkazu. A pak, zadejte text CSS je trochu jiný. Nemusíte vždy musí obsahovat rel stylů. Ale myslím, že to, obecně, dobré praxe. 

A nakonec, HREF, který pravděpodobně viděl ve svých ATAGs pro propojení v různých vazeb jen určuje, odkaz, kde najít to. Například, pokud bychom chtěli spojit jiný knihovna - řekněme - že žil v styles.css. A my jsme chtěli spojit to v tom, že je hostované na webu, budeme kopírovat to. A pak ji vložit do jakéhokoliv máme tady místo. 

TOMAS REIMERS: OK, doufejme, že jste kluci jsou již obeznámeni s tím, jak propojit CSS. Vy jste měli udělat, že na Vaše poslední hnědá sada. JavaScript, někteří z vás možná mají nějaké zkušenosti s. Někteří z vás možná ne. 

Takže teď, vím, že soubor JavaScript je velmi podobný souboru CSS v pocit, že můžete odkaz na něj, nebo že můžete zahrnout interně. A to vám umožní skriptu věci. A budeme vás provede Trochu JavaScript později. 

Takže pomocí knihovny - jakmile jste součástí, je to jako jednoduché, jak doslova volá funkce nebo přidání Třída jména do ní. Poslední věc, kterou chceme mluvit o, pokud jde o knihovny - a to je více technické poznámce - Je licencí open source. Takže když zjistíte, tyto skutečné knihovny, si mohou myslet, ze Otázky líbí, je to v pořádku, že jsem jen pomocí kódu někoho jiného, ​​a to zejména protože to je něco, co velmi řekl, že nebude dělat v tomto kurzu. 

Takže v případě open source licencí, Mnoho vývojářů - poté, co jsem napsal knihovnu, který si myslí, že by mohly být užitečné pro ostatní lidi - bude jej publikovat na webu a dát mu licenci. A licence v podstatě říká, že jsem se tímto udělování povolení k další lidé používat tento software s tímto druhem ujednání. 

Jsme zařadili odkaz na dobré stránky na pomůže pochopit licencí v případě, že se dostanete do nich. Společné ujednání jsou věci jako jste vítáni v mé knihovně, aby Dokud mi dát úvěr. Jste vítáni k použití mé knihovny tak dlouho, jako když se rozbije že mě vinit. Jste vítáni k použití mé knihovny tak dlouho, pokud nechcete použít, jak vydělat peníze pro sebe. Jedná se o běžné druhy ujednání. 

Pro tento CS50 posledním projektu, by neměl být super relevantní, protože projekty, které vy používáte jsou pravděpodobně spíše trochu známý. Ale když jste vlastně jít ven do svět a začít používat knihovny, které může, ale nemusí být, stejně realizován jako některé z více populární ty jsme bude prochází. Je dobré, aby bylo možné pochopit, Tyto licence a na pochopit, co znamenají. A vracet. 

MIKE RIZZO: OK. Takže nyní pohybuje na příkladech skutečné CSS. V tomto bodě tak daleko, můžete Není se setkali to. Ale možná jste se setkali s tím v tvůj každodenní život, kde se něco to vypadá na jednu stranu na jednom prohlížeči nemusí vypadat stejně způsob, jak v jiném prohlížeči. 

To se nazývá prohlížeč prohlížeč kompatibilita. A stále je to stále více a větší problém, zejména proto, prohlížeče se stále více a více svobody realizovat věci tak, jak chtějí. Takže překonat to, že tam skutečně je velká knihovna s názvem Normalize.CSS. 

TOMAS REIMERS: zahrnuty odkaz. V tomto bodě, to je užitečné v případě, Máte svůj notebook tam při pohledu na místě. A dáváme vám to hned Nyní jednoduše proto, že CS50 finále Projekt bude skutečně vás vyzve k jeho provedení podobně i přes prohlížeče. 

Takže stačí mít na zadní straně hlava, to je nádherný knihovna , protože to bude, tak nějak, standardizovat věci. Ve Firefoxu, něco, co se může ukázat, jako jeden pixel na levé straně. A pak Chrome může rozhodnout, že ve skutečnosti to, co jste měl na mysli bylo 10 pixelů na levé straně. A chcete standardizovat to. Normalizace bude vlastně dělat opravdu dobrý Úkolem ujistěte se, že vaše stránky vypadá stejně v různých prohlížečích. 

MIKE RIZZO: Takže kdybychom chtěli jen klikněte na odkaz opravdu rychle a ukázat si, co to vypadá, vás Můžete si jej stáhnout pomocí obří tlačítko Download. Nebo bych Doporučujeme vám přečíst více o tom po kliknutí na tento odkaz v dolní v pravém dolním rohu. 

TOMAS REIMERS: A pokud skutečně klepněte na tlačítko Číst více tady - klepněte na zdroj na GitHub - budete skutečně vidět open source licence na LICENSE.md tady. A uvidíte, je zde velmi populární licence MIT. Opět platí, že pokud si přečtete v textu, budete moci najít na stránkách jsme odkazované před a být schopen pochopit, aniž byste museli číst prostřednictvím právního žargonu. 

MIKE RIZZO: OK, dobře. Tak to je Normalizace. Chtěli jsme, aby vám že opravdu rychle. Oh, máte nějakou otázku? 

DIVÁKŮ: Takže když si ji stáhnout, je jen sledovat ten kód, který mají pod tlačítkem stažení? 

TOMAS REIMERS: Ano, tak když si stáhnete - 

MIKE RIZZO: Oh, to je skvělé místo. Takže otázka je, jak to jsme vlastně ji stáhnout? Takže pokud klikneme na odkaz, vidíme, že skutečně objeví ve zdrojovém kódu. Tak, jak to udělat, co jsme mohli to je jen klepněte na příkaz Uložit jako. Uložit jako a že by vychovávat soubor. A pak můžeme zvolit uložení to jako normalize.CSS. A pak budete muset propojit ji do - 

TOMAS REIMERS: stejným způsobem odkazují v jakémkoli jiném souboru. A jakmile se propojit ji, co je skvělé o Normalizace je to skutečně starat se o všechny těžké fungovat sama o sobě. To znamená, že nemáte přidat nějaké třídy. 

Nemusíte dělat nic divného. To bude normalizovat bez tebe dělat něco dalšího. Ano, budete muset zahrnout. Google Chrome nereaguje. 

Jen rychlý stranou - Všiml jsem si, jsme skočili do toho. Zbytek této prezentace je Bude rychlý přehled. Přehled knihoven. 

V podstatě to, co oni jsou. To, co dělají. Jak jsou užitečné. Jak jste je mohli realizovat. Pokud chcete začít hledat na ně, Následující spolu, a přečtení jim, bych velmi povzbudit, že. 

Případně, jste vítáni i se začít stahovat je a včetně je v očích jen proto, aby viděli, co vypadat nebo co dělat, když máte váš laptop před vámi. Pokud ne, jste vítáni, aby se poslechu nám mluvit. Budeme dál mluvit. A máme čas na konci, doufejme, že budeme skutečně dostat do ukáže vám, to, co některé z těchto knihoven vypadat. 

MIKE RIZZO: Cool. Dobře, takže teď pojďme hovořit o Písmo Skvělé. 

TOMAS REIMERS: tak Font Úžasné je opravdu hezké místo, a to zejména pro ty, z nás, kteří jsou méně umělecky talentovaný. Ignorování název písma Úžasné, to dává Jste banda ikon, které jsou velmi užitečné. Takže mnohokrát budete realizovat icon budete chtít jako pěknou X tak, které můžete uzavřít tak něco. 

Nebo možná budete chtít nějaké tlačítko Edit s kresba tužkou, jako je všichni ostatní. A to je, když jste se dozvěděli, že kreslení ty ikony mohou být velmi zdlouhavé a obtížné. Font Awesome - pokud jste skutečně jít na stránky - vám dává spoustu ikon pod Ikony v horní části. Jo, jen nahoře. To vám dá hodně ikon zdarma. 

Takže tady vidíte, máme věci, jako je hvězdička, bary, blesk, kalendář, chyba, knihy, et cetera. To může být velmi užitečné. Způsob, jak zahrnout je zahrnout doslova souboru CSS. A poté, co jste součástí souboru CSS, to, co můžete udělat, je vytvořit tag s názvem I. satands pro icon s třídou FA stojí za font Awesome. A pak, bez ohledu na třídu budete chtít. 

Takže když jsem chtěl ikonu tohoto Plus náměstí, přímo tady, bych dát je třída FA. A pak FA pomlčku a spojovník náměstí. 

MIKE RIZZO: Cool, OK. 

TOMAS REIMERS: A pak, poslední CSS knihovna se chceme dostat přes jsme se snaží udržet minimální na CSS knihovny, protože si uvědomujeme Název této prezentace je JavaScript knihovny. Ale my jsme si mysleli, že jsme se může i Představujeme Vám k jiným knihovnám když jsme mluvili o knihovnách. 

Je to Google Web Fonts. A to, co Google Web Fonts Vám umožní udělat, je přidat písma na vaše webové stránky, což je opravdu snadný způsob, jak to hezká a odlišit sady od každého jiného je, pokud má pěkné písmo, nebo v případě, že má pěkný kolekce písem. Google Web Fonts je pěkný rozdíl od jiných knihovny v tom smyslu, že je to opravdu řídit instalace. 

Takže pokud budete následovat odkaz, je to google.com / fonts, věřím. Pokud se budete držet, aby vás mohou vybrat své písmo. Můžete si vybrat, na levé straně od tloušťka, sklon, et cetera. A pak, jakmile jste si vybrali jeden, můžete klepnutím na tlačítko rychlé použití. Přesně tam. V pravém dolním rohu okna. 

A pak, přejděte dolů. Za prvé, že vám CSS, které budete muset skutečně odkaz na něj. Je to tady. Stačí si jen zkopírovat a vložit, že dovnitř A pěkná věc, o tomhle je nemusíte vlastně ani potřeba stáhnout soubor. 

Co to udělá, je, že to bude odkaz na Google verzí toho. Takže zpět k co to znamená. To znamená, že když uživatel stáhne soubor - stáhne vaše stránky HTML - váš HTML Stránka se bude odkazovat na tento soubor. 

Takže, váš počítač bude vidět, oh, to je hostována na google.com spíše než na theirsite.com. Nech mě jít požádat Google o tomto souboru. A pak, že to bude zahrnovat je to skoro, jako kdyby se jednalo o součástí vašich vlastních stránek. 

TOMAS REIMERS: Cool. A jakmile se patří, pak se zahrnout ji do svého CSS, to vám dává aktuální řádek. Takže můžete nastavit rodinného majetku písma rovnající se název vašeho písma. 

MIKE RIZZO: OK. Tak jsme právě dokončili s CSS. A někteří z vás si možná myslet, dobře, jsme měli nějaké CSS na CS50 financí. Ale CSS knihovna byla bootstrap. Jsme vlastně patří Bootstrap málo později v JavaScriptu, protože se knihovna Bootstrap CSS také přichází se spoustou JavaScript, který Bootstrap nebo Twitter - kdo dělal Bootstrap - používá pro správu všech jejich CSS. 

TOMAS REIMERS: Má někdo nějaké otázky dosud o CSS obecně? Jsme dobrý? Úžasné. 

MIKE RIZZO: Skvělé. 

TOMAS REIMERS: Takže stěhování na JavaScript. 

MIKE RIZZO: Tak jsme chtěli mluvit o jQuery začít. Má někdo slyšel o jQuery před nebo použil? Jo, pár? Takže pokud jste právě pracovat s nativním JavaScript, zjistíte sami psaní hodně dlouhých selektorů hodně. Takže to, co jQuery dělá, je, že poskytuje pěkný obal pro JavaScript jazyk, který vám umožní snadno zvolit a manipulovat s různými prvky v dokumentu objekt modelu webové stránky nebo DOM, což si myslím, vy jste slyšeli v přednáška v tomto bodě. 

TOMAS REIMERS: Pokud jste ještě neslyšeli o to, nebo pokud jste sledovali přednáška přesto, Document Object Model je v podstatě, jak se věci zastoupeny. Takže HTML trochu vypadá jako strom když jste skutečně čerpat ji. Máte HTML element na vrcholu. Máte hlavu a tělo. 

A pak, v rámci které si mají všechno ostatní. To je odkazoval se na jako DOM - Document Object Model. Takže model, který reprezentuje objekty dokument je snadný způsob, jak myslet o tom. A jedním z velkých věcí o jQuery Je to opravdu dělá traverzování že a manipulace s prvky v rámci že neuvěřitelně jednoduché. 

Tak jednoduché, ve skutečnosti, že většina JavaScript knihovny, nebo ne, pokud Většina, velký většina ty uvidíte ve skutečnosti vyžadují, jQuery, takže že lze spustit sami jednoduše protože pokud jste neměli jQuery, vás by odpad spoustu času se snaží přijít na to, jak vybrat určité prvky a jak dělat jiné věci. A další skvělá věc, o jQuery je, že je to cross kompatibilní se všemi prohlížeči. 

Takže pamatujte zpět, když jsme řekli, že ne všechny prohlížeče implementovat věci stejným způsobem? To platí i v JavaScriptu. A jedním z velkých věcí, o jQuery je, že to bude detekovat prohlížeč a odhalit vhodná metoda. 

Takže pokud budete potřebovat vybrat prvek, Internet Explorer by se říci, že jste dělat tímto způsobem. Firefox by se říci, správné způsob, jak je tento způsob. jQuery nestará. Když řeknete jQuery vybrat prvek bude zjistit, jak je to dělat to v prohlížeči uživatel je v současné době, a poté proveďte to tak. 

MIKE RIZZO: Tak pojďme o tom mluvit využití jQuery trochu. Stejně jako PHP, jQuery má zejména láska na znak dolaru. Tak zjistíte, že žádný jQuery - dobře, není všechno. Někdy můžete nahradit dolar přihlásit se slovem jQuery. Ale obecně, jen proto, že je to kratší, když vidíte, že jQuery používá to bude s znakem dolaru. 

Tak tady jsme jen ukazuje na začátek volič pro element v DOM. Zde máme následovat znak dolaru otevřenými závorkami a poté citace. A v uvozovek jít naše voliče pro různé prvky. Stejně jako v CSS, jsme potřebovali voliče, aby moci styl různých prvků v rámci stránky. Tyto různé selektory překládat přesně na jQuery a JavaScript, z větší části. 

Takže tady máme dot foo. Takže pokud si pamatujete z přednášky, tečka prostě znamená třídu. Takže jsme vyberete prvek s třídou foo. Takže když jsem se jít dopředu a otevřít naše JavaScript console zde opravdu rychle jen demonstrovat to, jestli jsem typ znak dolaru, vidíme, že je to nějaký funkce, která přijde. A to je jen definovaný jQuery. 

TOMAS REIMERS: Pro ty z vás, neznámé, konzole je nástroj v Chrome, který umožňuje, v podstatě, běh JavaScript aktuální stránka. To zjistíte, neuvěřitelně užitečné, když jste vlastně ladění a musí být stejně jako to, co je aktuální Hodnota nějaké globální proměnné nebo co je něco jiného? Je to něco jako GDB s výjimkou že můžete skutečně manipulovat s prvky na stránce se je v mnohem jednodušší módě. A také to není, v podstatě, zkontrolujte, zda s vámi, než se s tím nic nedělá. 

Takže vzhledem k tomu, GDB může být rád, jsi jisti, že chcete spustit další krok? Konzole je ve skutečnosti. Tak jako webová stránka je vykreslování a dělat, co to dělá, Rada je také běží vedle ní. A vy můžete dát přičítat kód do že konzole, která bude být provozován na stránce. 

MIKE RIZZO: Tak vstoupit do konzole, Myslím, že bych měl stručně zmínit, jak na to. V posledních problémy, které mohou mít ojeté Chrome je kontrolovat prvek funkce nebo zobrazit zdrojový stránku - a ty jsou přístupné jen tím, že právo Kliknutím na stránky nebo specifické prvek a tím buď prohlédnout prvek nebo zobrazení zdroje stránky. Můžeme také přístup JavaScript konzole přímo výběr kontrolovat prvek. Takže pak stačí kliknout na konzole na pravé straně. 

Případně můžete také pryč na pravém horním rohu, který je odříznut na této obrazovce, kde má tři vodorovné pruhy. A jdete dolů k nástrojům a pak konzole JavaScript tady, kde můžete vidět - alespoň v systému Windows - zkratka je Shift Control J. Tak pokud bychom chtěli vybrat prvek na této stránce, stejně jako jsem ukázal, dříve, uděláme znak dolaru otevřené závorky a pak cituje. 

Zajímavostí je, obecně, jednoduché uvozovky a dvojité uvozovky jsou vyměnitelná. Takže mnoho lidí stačí použít jeden uvozovky, protože jsou rychlejší typ než uvozovkách, protože nemáte muset držet stisknutou klávesu Shift. Tak jsem si jen to, že právě teď. 

Takže chci vybrat něco, s třídou. Kontejner, jen proto, že vím, že je to něco, co je v našich webové stránky právě teď. A já jsem stiskněte klávesu Enter. A vidíme, že vybral to. Tak to se ukáže, že vrátil se daný objekt. Tak to je základní výběr. Pokud bychom chtěli skutečně manipulovat, budete muset něco říkat na tento výběr, který se dostaneme do později. 

TOMAS REIMERS: Takže stačí se podívat na to více do hloubky, to se neliší než volání funkce, které jsme provedli v C. Název funkce je zde trochu divný. Je to znak dolaru. Je to jen název funkce. Na tom není nic zvláštního. 

Máme otevřené závorky. Pak máme jeden argument, který v tomto případě se stane, že je řetězec, , což je pro něj volič. A pak, máme uzavřená závorka. To je to. 

Není to tak diametrálně odlišná. I když to vypadá velmi divně. A to může být trochu, lepení bod pro mnoho lidí. 

MIKE RIZZO: Takže podobně, pokud bychom chtěli vyberte prvek, který má ID, Nyní chceme vybrat podle ID namísto třídy. Bylo by to něco podobného, ​​kde jsme prostě ostrý znak pro ID. Takže jsme vyberete zde vše prvky, které mají ID bar. 

TOMAS REIMERS: A to rozšiřuje. To CSS rozšiřuje. Stejně jako v CSS, můžete si vybrat vše odkazy, které mají třídy foo. Tady je to totéž. 

Dalo by se udělat a.foo, které by výběr všechny odkazy s třídním foo. Dalo by se udělat ostrou tyč, která by vyberte odkaz s ID baru a tak, dále a tak dále. Každý volič CSS je platný jQuery voliče. 

MIKE RIZZO: Jo. OK, takže teď pojďme do trochu manipulace, které můžeme udělat s naše jQuery. Takže jQuery má zvláštní typ notace, kde stačí použít tečka na konci. A vy můžete myslet na to jako na C, jak jsme měli různé structs. A jít do těch struktur, byste použijte tečku, aby se do nich. 

To je druh, něco podobného. Teprve nyní máme funkce v rámci této volič, který můžeme nazvat na něj. Takže tady je první příklad můžete vidět, je selektor CSS. A v podstatě, co to dělá, je to se vztahuje na první prvek CSS na to věc, kterou jste vybrali - Tento prvek, který jste vybrali - s hodnotou tohoto. 

TOMAS REIMERS: Tak snadný překlad že by bylo, kdyby jQuery, v podstatě, jen se foo. A pak v CSS řekl, barva červená a zavřít. Je to stejný nápad. Co to dělá, je to zvoleno všechny foo prvky. A pak se to aplikovat. Něco, barva nemovitosti se rovná červené. 

MIKE RIZZO: Podobně můžeme také změnit skutečný obsah toho, co je ukazuje na HTML stránky, která Je opravdu skvělé, protože to znamená, že vaše Webové stránky mohou být nyní zcela dynamický a nemusí být statická které tisknete s použitím PHP na samém začátku Stránka se načítá. Takže tady, když jsme chtěli změnit aktuální HTML stránky, by nyní volání funkce HTML, který pak už jen vložky, co jsme se určují na že prvek, který jsme si vybrali. Takže tady máme výběr prvku s class foo a pak řekl, že je to HTML teď je to hello world. 

TOMAS REIMERS: A když se nad tím zamyslíte jaké jsou užitečné aplikace tohle, tohle CSS jedno, první věc, která můžete začít přemýšlet o tom, z hlediska dokonce drop-down menu. Dalo by se začít dělat věci, jako, když uživatel se vznáší nad horní části z rozbalovacího, chcete, aby se spodní část viditelná. Je to tak? 

Takže v CSS, máme vlastnosti udělat něco viditelného. Věci jako displej tlustého střeva nikdo by bylo neviditelné. Zobrazit blok by se zobrazil. Nebo dokonce, pokud chcete jít jednodušší, vás mít věci, jako je viditelnosti se rovná viditelné, a viditelnost se rovná skryté. 

A můžete začít provádět věci jako rozbalovací menu vpravo poté, co se dostanete přes myšlenky o tom, jak můžete zjistit, když se to otevře, které dostaneme přes velmi stručně. Ale můžeme začít vidět aplikace to. V podobném smyslu, pokud jste měli zkusit a realizovat, řekněme, chatu motoru a chcete, aby se trochu bublinu přijít kdykoli jste dostal novou zprávu, jakmile se dostanete nová zpráva, můžete si trochu bublinu přijít změnou HTML stránky, ne? Přidáním že další bublinu s extra textu tam. Jo? 

DIVÁKŮ: Takže byste vložit to do HTML kód něco jako [Neslyšitelný]? 

MIKE RIZZO: Správně. Jo, dostaneme se k tomu v trochu. Jo, je to podobné trochu PHP. Ne tak docela podobné. 

Dobrý rozdíl, aby se to, co to je ve skutečnosti upravujete, když jsme editovat stránky, protože to nebude editaci skutečný soubor, který je uchovávány na serveru, protože svět by neměly mít oprávnění editovat soubory. To je právě upravujete, co je na stránce a to, co je zobrazeno v prohlížeč. Takže pokud jste se po načtení stránky, říci, mazání něco jako my vidět, co můžeme udělat s remove volání, že věc by se pak znovu objeví. 

TOMAS REIMERS: Takže jediný způsob, jak přemýšlet o tom, to je, když jsem počítač a Mike je, tak nějak, serveru. Co se stane, je, že budu zeptejte se Mike, hej, mohu mít kopii tato webová stránka? A on mi dá jeho kopii. 

Ne, to není originální věc. Je to jen kopie. A pak by to bylo, oh, tam je JavaScript tady. Je jasné, že bych měl upravit Stránka se takhle. A já jsem v úpravách kopii. 

Ale to není znemožnění aktuální kopie. A když jsem se ho znovu zeptat aktualizovat stránku, - Ahoj, můžu mít čistou kopii - že se chystá dát mi další čisté kopie. A pak, já udělám to samé jako, oh, to JS tady, že říká, že upravit to. A budu to dělat. 

MIKE RIZZO: Tak to opravdu super věc které můžete dělat s jQuery je ve skutečnosti přidat různé typy animací na vaše stránky. Já nevím, jestli jste někdy viděli, kde snažíte se vyplnit formulář on-line a nechcete vyplnit věci správně. Tak trochu to klouže dolů nahoře a říká, že Neudělal to správně. Zkuste to prosím znovu. A pak, že by i jen klouzat nahoru. 

Ukázalo se, že jQuery má vestavěnou funkcí že aby to všechno animace opravdu snadné. Takže tam je první fade out funkce, které můžete volat na něco. A to je způsob, jak změnit CSS na tento prvek v animovaném způsobem. Tak to trvá bez ohledu na prvek říkáte, že mizí na. A pak se pomalu mění, že je to krytí dokud to jde zcela transparentní. 

TOMAS REIMERS: další populární je sklouznout dolů, což umožní něco, co se objeví posunutím dolů. Takže v případě, že v nabídce pokles dolů, znovu, když jsme se dozvěděli, jak rozpoznat když to bylo vznášel nad, můžete jen říci toto dno část posuňte se dolů. A pak, zdá se, posunutím dolů. 

MIKE RIZZO: A pak, máte-li nějaký druh animace na paměti, že jQuery nemusí nutně poskytovat. Například, řekněme, jQuery se poskytují vám se skluzavkou dolů a posuňte nahoru. No, řekněme, že jste chtěl klouzat něco z levé nebo z správný druh jako CS50 Hlavní strana dělá vždy, když jdete do nového panelu. Ty by se pak pravděpodobně implementovat sami pomocí animovat funkce v jQuery. 

Takže podobně, stačí animovat. A pak, v něm trvá Slovník různých hodnot že jste měl projít. Takže tady, pokud bychom chtěli animovat foo element tak, že jeho šířka buď rozpíná nebo naopak smršťuje až 80 bodů, v závislosti na tom, co v současné době je. Rádi bychom jen projít, že jako Argument v něm. 

Animace také nějaké další argumenty že byste mohli projít, například, rychlost animace které chcete dát. A k tomu bych jen říct, rychle Google jQuery animace. A pak, čímž se na tuto stránku, můžete vidět, že má spoustu různé vlastnosti, které u nás můžete absolvovat ji. 

A já povzbudit vás - vždy, když přišel přes něco, co nechcete vědět, nebo jen chcete dozvědět více o zejména způsob, který můžete volat na něco - jen Google to. jQuery je velmi dobře zdokumentovány. A často dokonce existuje spousta příklady, které poskytují pro vás. Pokud se posunout dolů - směrem dolů - které můžeme použít, stejně. 

Opět platí, že pokud developer vlastně jde přes potíže psaní knihovna, oni obvykle chtějí někdo ji používat. Takže spolu se chystá být dokumentace. A že dokumentace může být obvykle najdete na stránce projektu, která je Proto jsme vám dali, že původní místo ve začátek, který vás spojuje se Stránky projektu, takže můžete vidět, že v dokumentaci. 

Typicky, stránka projektu v případě, z [neslyšitelné], to vám řekl o názvy tříd. V případě JavaScript, dává si název funkce. Mimochodem, když jsme přejděte až na vrchol, rychlé boční poznámka o funkcích je když vidíte, funkce implementované takhle se těžko držáky ve středu, to znamená, že že majetek je volitelná. Jen heads up. Viděl jsem spoustu otázek o tom. 

Takže zde můžeme vidět, že živý se vlastnosti jako nezbytné argumentaci. A všechno ostatní je volitelný. Boční Poznámka - můžete myslet na to, třídění z, jako manuálové stránky. Manuálové stránky jsou dokumentace pro C a pro mnoho dalších věcí, stejně. 

MIKE RIZZO: Tak jsme se dozvěděli, jak se změnit jiné CSS na stránce, animovat jej a vyjměte přidat HTML. Ale jeden z opravdu nejsilnější věci, o JavaScriptu a zejména jQuery - to, co můžete udělat, je reagovat na různé prvky, které se dějí. Například, máme zde obslužnou rutinu události. A to právě znamená, že vždy, když to událost stane, budeme s ní zacházet v určitým způsobem. 

Tak tady je obecný jQuery události Psovod je tečka na. A pak, první věc, kterou jste zadali Je to událost, že by bude poslouchat. Tak tady je to cvaknutí, které jsme čekali. 

TOMAS REIMERS: Případně, máte na visení, který je velmi populární. Takže zpět k mému rozbalovací nabídce nápad. Budete mít horní jeden na visu. A pak byste mohl změnit. 

MIKE RIZZO: Správně. A pak, když se to stane, je to jen vykonává tuto funkci, že dáme jako argument, a že upozorní ahoj a ahoj. 

TOMAS REIMERS: Takže v případě JavaScript, toto je místo, musíme odstranit sami od C. Můžeme skutečně se funkce jako argumenty. A existuje spousta opravdu komplexní způsoby, jak to udělat. Budeme podporovat jednu stranu, které je můžete definovat pracovat tam. 

Takže když se ptáte na funkci jako parametr, jste v podstatě jen bude definovat funkce na místě. A tak, jak definovat funkci v JavaScriptu je vám doslova říkají funkce. Poté, obvykle, název funkce. Ale my nikdy odkazovat tato funkce znovu. Tak jsme ho nechat bezejmenný. 

Pak závorky, pak kudrnatý šle, a pak kód v to. Takže chápeme to může být trochu matoucí. Tak jsme vám obecný tvar co rutina událost vypadá níže, která je na události. A pak, váš kód uvnitř, že. 

MIKE RIZZO: Existují nějaké otázky o tom? To může být trochu matoucí Poprvé ji vidět. 

TOMAS REIMERS: Vy opravdu chcete otevřít soubor a ukázat jim některé jQuery právě teď? 

MIKE RIZZO: Jo, jdem na to. OK. 

TOMAS REIMERS: Tak teď jsme v přístroji. A to, co jsme udělali je, že jsme si vzít svoboda vytvářet jak je index.html soubor, který odkazuje na soubor JavaScript. A můžeme otevřít - jo. No, to dělá dvě věci. 

Prvním z nich je, že odkazy na soubor JavaScript. A uvidíme, že až tady. Vidíme, že v čele HTML dokument, a to zejména. Takže uvidíte tam, že jsme se v podstatě říci, SRC, což je zkratka pro zdroj. A to je URL. 

Tak tady si můžete říct, že jsme si včetně jQuery. A my jsme také skripty. Jiný způsob, jak zahrnout JavaScript je , který může obsahovat vložené skript tag, jak jsme se ve spodní části, kde se říká, že typ skriptu je textový JavaScript. 

Takže říkáme, poslouchej, my jsme o zařadit skript. A typ tohoto skriptu je JavaScript, což je typ textu. Velmi jednoduché. 

MIKE RIZZO: Takže to, druh, k míči se Váš dotaz o tom, jak jsou JavaScript v našich souborech, protože když jsme se se PHP, děláme něco takového. A pak, máme své PHP funkce - řekněme, že zásoby dělat co s tím - jde tam. Nicméně, nyní máme tagy skriptu že jsme se dát, které jsou ve skutečnosti součástí HTML sám, protože to není předstírá, že soubor HTML, jako to je v PHP, protože pokud jste skutečně jít a podívat se na zdroj stránky, uvidíte tyto tagy skriptu tam s JavaScript spojené s jim v tom. 

Takže, pokud bychom chtěli napsat nějaký JavaScript - řekněme, že bychom chtěli změnit tělo protože teď nemám všechny ostatní značky, které jsem si opravdu upravovat vedle těla. Řekněme, že jsem chtěl, aby změnit CSS z toho. Takže budeme pokračovat a změna barva to na červenou. 

Tak jsem soubor uložte. Vraťme se na našich webových stránkách, obnovit, a to automaticky dělá , protože to nevypadalo, jako by čekal, vůbec, protože jsme nebyli poslech na akci nebo něco podobného. 

TOMAS REIMERS: Takže když se vrátíme k tomu soubor zejména - HTML soubor - co budete vidět je máme - si uvědomit, že toto je načten, druh, chronologicky. Takže máme první hlavu. načte ty dva soubory. Pak jdeme k tělu. A vidíme, Hello World. Tak jsme činí Hello World. 

A pak poslední věc, kterou máme je máme tag script. Tak to běží tag script, protože je to neříká to nic čekat. A to je to nejzákladnější způsob, jak spustit JavaScript. 

Díky, že řekl, můžete si dát skript označit v záhlaví jen ukázat tento bod? A spustit to. Budeme všimnout, že nezměnil barvu. A to je jeden z problémů JavaScript je, že věci jsou načteny v chronologickém pořadí. 

A tak v době, kdy tento kód běžel, jsme si vybrali - zpět - tag tělo. Tag tělo ještě neexistuje, protože JavaScript je v souladu s HTML. Takže prohlížeč je jako vyberte těle. Je tu ještě žádná taková věc. Takže můžeme ignorovat. A budeme pokračovat. 

A pak jsme se definovat tag těla. Ale nikdy se aktualizuje. Takže, když jste provádění skriptu tagy, ujistěte se, že místo po tagu body. Další snímek. 

MIKE RIZZO: OK. Tak jsme něco změnili. Ale to nevypadalo, jako by reagoval na nám vůbec, protože je to jen trochu to udělal, jakmile načtení stránky. Takže teď, místo toho dělal to, proč Co kdybychom přidat obslužnou rutinu události. 

Takže pojďme něco udělat k tělu znovu. A řekněme, že jsme to na - klepněte na tlačítko. Budeme-li přidat funkci. 

Tomáš Reimers: Změňme je to barva na červenou znovu. Proč ne? 

MIKE RIZZO: Jo, pojďme změnit jeho "barvu na červenou znovu. Dobrá. Takže pojďme znovu načtete stránku. OK, uvidíme - jak se očekávalo, to není zase ještě červená. Ale pak můžeme jít do toho a klikněte na něj. 

TOMAS REIMERS: A to zčervená. 

MIKE RIZZO: A to dělá zčervená, jak se očekávalo. 

TOMAS REIMERS: A vidíme, jak můžeme začít budovat velmi jednoduchý interakce. Další věci, které jsme mohli chtít udělat, je, pokud nechceme, aby se tělo barva červená, pojďme dělat HTML pozadí barva červená. Stejně tak je to stejné CSS. 

A když jsme se to změnit, můžeme vidět Velmi dramatický efekt změny celá stránka. Takže znovu, pokud jste se provádí věci, můžete mít jednu složku který je určen k klikl na. Řekněme, že tlačítko Exit a celý další komponenty, který je určen k reakci. Takže byste odstranit okno když se to stane. 

MIKE RIZZO: OK. Jen jako příklad - jste nedostal vidět dříve - Ukážu vám, jak to vypadá Líbí se mi, když jsme se schovat něco. Takže budu pokračovat a to posunutím nahoru. 

TOMAS REIMERS: Chcete zabalit, že v Typ odstavec dříve než my, že? 

MIKE RIZZO: OK. Jo, proč ne my, že jen proto, můžeme vybrat to trochu víc. 

TOMAS Reimers: A pojďme dát třídu. 

MIKE RIZZO: Jo. OK, tak se pojďme podívat. Namísto výběru vlastní tělo teď, budu jen vybrat vše, co se třída ahoj, který jsme tady jen jednu věc. Takže bychom neměli mít na obávat, že. 

Takže budu aktualizovat jej. Půjdu do toho a klikněte na něj. A to, trochu, udělal divný Slide se věc, která nevypadala, že atraktivní. Obecně platí, že vypadají docela pěkné. Myslím, že tento - pro některé důvod - ne. Budu prostě dělat fade out, takže se můžete podívat na to taky. Mnohem hezčí. 

A pak, když jsem otevřít JavaScript konzole znovu a chceme vidět, co to vypadá, jako když jsme slábnout ji dovnitř Nyní, jen říkám slábnout v tom. A to vybledne zpět dovnitř 

Podobně bychom mohli vlastně také předat argument vyblednout nebo fade out, která je, druh, rychlost to. Tak pojďme do toho a že chceme to jít pomalu mizí dovnitř Takže myslím, že to ještě zdálo, docela rychle. Ale to bylo pomalejší než dříve. 

TOMAS REIMERS: A chcete-li najít Více informací o těchto věcech, opět, stačí jít do dokumentace jQuery, který jsme vám dal, a přečtěte si přes to. Oni dokumentovat jejich funkce neuvěřitelně dobře. 

MIKE RIZZO: OK. Takže si myslím, vraťme se k tomu. A můžeme mluvit o naší poslední stránce. No, můžeme skončit s Bootstrap. A pak si otevřete ji na některé otázky. A jestli vy máte nějaké nápady, které byste chtěli, aby se pokusili hodit nahoru a vidět v případě, že je můžeme realizovat s JavaScript rychle. 

Takže opravdu rychle o Bootstrap, která byla automaticky zahrnuty do Vaše poslední problém nastavit ve složce CSS a ve skutečnosti spojeny s ve vaší header.PHP. Takže byste mohli jste přidali tříd, které jsou definovány v rámci Bootstrap k němu. A to by se automaticky stylu ty věci podle toho. 

TOMAS REIMERS: Tak Bootstrap je velmi magická věc vyvinut lidmi na Twitteru. A co to bylo chtěl udělat, bylo - Před webové stránky byly opravdu těžké, aby se Sluší ti to, zvláště když jsme měli hodně společných prvků. Takže hodně tlačítek na web vypadal stejně. 

Mnoho textových polí mohou být provedeny vypadají lépe než standardní text pole, které pravděpodobně znáte z opravdu Staré webové stránky nebo opravdu špatně provedena webové stránky, které stejně vypadají jako doslovný textová pole bez jakékoliv formě textu stín nebo jakékoliv pěkné osnovy. Takže to, co Bootstrap udělal, bylo, že řekl, dobře, Máme spoustu společných stylů. Proč děláme jednu společnou sadu CSS a společný soubor JavaScriptu, jak dobře, což je styl jako je, a který může dát lidem věci, jako je pokles down menu, které může dát lidem věci jako modální slovesa. 

Modal je to, co se objeví na stránce vždy, když je to přísně vzato něco, který dále inhibuje interakce, dokud komunikovat s ním. Něco takového je, jste si jisti, Chcete-li odstranit tuto věc? Nemůžete dělat nic jiného, dokud se říct ano nebo ne. 

Trvalo to vše a to balí ji dohromady a řekl, jdeme na to. Lidé nyní mohou použít. A najdete ji na getbootstrap.com. To byl automaticky zahrnuty do Vaše poslední problém nastavit. A vy jste více než vítáni použít jej na svém posledním projektu. A chcete-li z toho, že propojit, aby se Bootstrap. 

Uvidíte zde Zaveden CSS stránky. Uvidíte Bootstrap. A pokud se posunout dolů, uvidíte jak stáhnout, jak se nainstalovat, et cetera. 

MIKE RIZZO: A můžete také, dost zajímavé, přizpůsobit tak, aby se bez ohledu na druh témat které chcete. Vím, že je to něco, co jsem udělal pro mé Konečný projekt, když jsem vzal třídu bylo přizpůsobit se. Jiná verze Bootstrap, že měl jiné barevné schéma a různé tvary některých různé věci. Tak jsem se povzbudit, abyste si s tím. Je to docela zábavné dělat. 

TOMAS REIMERS: Pohled přes horní znovu, je to velmi podobné písmo Super místo. Mnoho dokumentace začne vypadat podobně, když jste viděl dost. Takže tady máme CSS součást tohoto. A uvidíte, jak to můžete styl věci. Takže pokud kliknete na tabulkách, například, můžete okamžitě provést Tabulka docela jednoduše přidáním třída stůl k ní. 

Stejné věci na knoflíky. Pokud jednoduše přidat třídu BTN a BTN výchozí nebo BTN primární, můžete se některý z těchto tlačítek s těmito pre-made styly. A pak, pokud hledáte pro něco složitější, než jen rekonstruuje, co w již více než na Karta JavaScript celé horní my mají spoustu dílů. 

Takže tady máme přechodů, modální slovesa, rozbalovacích nabídkách, karty a popisky. Tooltip je to, co se objeví pod vaším myši, když podržíte na něco. Popovers, upozornění, tlačítka, skládací harmoniky je to, co oni jsou obvykle nazývá. Kolotoče, který Flip až jako obrazy. 

Takže to jsou komponenty z Bootstrap. Chtěl bych vás povzbudit, aby vysoce jít na ně podívat. Tam je složka JavaScript a složka CSS. Neváhejte a používat je jako ty. Nebudeme se moc jít do nich protože máme pocit, že dokumentace Je opravdu dobře. A jo. Máte nějaké dotazy týkající se, že? 

MIKE RIZZO: Tak, jak jsou opravdu rychlé strana, design této webové stránky, která jsme se rychle dát dohromady tato prezentace je ve skutečnosti provádí pomocí Bootstrap. Jak můžete vidět, když klikneme na nich různé karty, my jsme vlastně nikdy opuštění tohoto proudu index.html stránku. Takže to, co máme, je různé divs v tomto index.html. A pak, když jsme klepněte na jiný karta, je to jen změnou která něčí představení. 

Tak to tedy pozice je, změní HTML stránky tak, aby Karta proud je označen jako aktivní, takže zdá se jinak a vzhled opravdu pěkné. 

TOMAS REIMERS: Takže to všechno bylo provedeno aniž by nám psát téměř každý CSS. Také viz záhlaví v horní, které barvy jsou u nás. Ale skutečné uvedení na Horní část stránky a dělat to svitek byl Bootstrap. A pak i pro jiné knihovny - to není ta, kterou jsme mluvili o, ale jeden můžete Google, pokud budete chtít. To se nazývá prettify.js. A to bude zvýraznění syntaxe kódu Pro použití i CSS a JavaScript. 

Poslední věc, kterou chceme mluvit o tom, předtím, než jsme se uvolnit vás do Svět se podívat na knihovny přijít na to, jak je používat a, doufejme, přečtěte si dokumentaci a najít to, co jste Potřeba je, jak najít knihovny. Takže první je, že jsme jen bude tlačit Google. Jdi Google. 

To je doslova to, co budeme dělat, když jsme musíte udělat něco, co je Google my. Je zde knihovna JavaScript, který mi umožňuje manipulovat čas užitečný způsob, jak? Takže, pokud já vím, že některé uživatelské vytváření účtu zde, a to je aktuální čas, jak mohu spočítat Rozdíl, který, aniž by museli vypočítat to sám? Takže to je vlastně běžná věc, JavaScript doba knihovny. A tady jsme Moment.js-- jeden z nejoblíbenějších. 

Pokud budeme potřebovat knihovnu pro manipulaci něco jako barva, aby bylo možné generovat spoustu náhodných barev - případně, pro generování styl nebo tak něco - mohli bychom se Google něco jako JavaScript barva knihovna. A jsem si jistý, že by se pop-up s tisíc a jeden z nich. Jste vítáni, aby si přes ně. 

Takže většina věcí - když je najdete - se chystáte být umístěn na jednom z stránky, které hostitel kód. Jsou to několik z nich populární. Nejvíce populární tím, že Zatím je github.com. A pokud jdete na GitHub, že je to ve skutečnosti kde Normalizace moderoval. Takže pokud se chcete vrátit k té jedné. Ukažte jim, že. 

MIKE RIZZO: A to je vlastně, kde to je hostována taky, jestli jste si všimli. 

TOMAS REIMERS: Jo. Takže pokud půjdete přes normalizovat a jít na GitHub. Byly to je? 

MIKE RIZZO: To je malá kočka, co je symbol GitHub. 

TOMAS REIMERS: Oh. Takže GitHub používá metodu nazvanou Git k uložení kódu. Je nevíte, co to je nebo to vás děsí, to je v pořádku. Nemusíte vědět, co Git je protože GitHub má tlačítko Stáhnout v pravém dolním rohu. 

Další užitečná věc vědět o GitHub je většina výrobků bude mít read me. A pokud nemají webové stránky, číst, abych se bude mluvit o tom, jak nainstalovat, jak ji používat, co to ano, et cetera, et cetera, et cetera. To, co jsme v podstatě byli chůze vás. 

MIKE RIZZO: Internet je přestat kouřit. 

TOMAS REIMERS: To je v pořádku. Poslední dvě věci, které jsme chtěli mluvit - jsme mluvili o Gitu - je řešení problémů. A tohle není relevantní pro konečného výrobku, jak je když necháte 50. A když se dostanete do produktů provádění knihovny nebo provádění svůj vlastní projekt, budete li mít dotazy nebo jste bude vypadat na otázky. 

Opět platí, Google ho. To je doslova to, co děláme. To bude znít hloupě. Ale doslova jsme ho Google. A opět, jedna z prvních věcí, budete obvykle běží na je stackoverflow.com, což je nádherný Otázka a odpověď zrak. 

Je to úžasné, protože jak můžete post otázky a hledat na odpovědi, ale také proto, že to už je hodně předem vyplněny obsah tam. Takže většinou, když se Google v programování otázka v rámci první pár hitů, které jste již spustili do něj během vašich problémů sad. 

A pak, konečně opravdu krátká věc je JSFIDDLE, což je - dnes máme dělal hodně práce s JavaScript HTML CSS. JSFIDDLE je webová aplikace, která v podstatě umožňuje, aby se vaše HTML, YOUR JavaScript vlevo dole, a vaše CSS v pravém horním rohu. A pak to může vytvořit rychlý render IT a uvidíte, jak to ovlivňuje. Je to velmi užitečné, když se lidé snaží udělat proof of concept, jako To je, jak byste to rozbalovací menu. Možná, že rychlý odhalit nebo cokoliv jiného. 

MIKE RIZZO: Tak jdeme na to dopředu a klikněte na to. Krátká poznámka - vzhledem k tomu, než jsme byli dělá na kliknutí. Ukázalo se, že JCorey Korea má také vestavěný V click obslužné rutiny události, která je používá jen proto, že čísla jste bude chtít dělat spoustu věcí, pokud chcete klepněte na něco. 

Podobně, má také vznášet. Ale dostat plný rozsah ty, podívej se na jQuery dokumentace a udělat to. Udělal jsem něco hloupého zde. 

TOMAS REIMERS: Tak jsem se opravdu rychle Program tady, který říká, tlačítko na myši. Pak máme pro smyčce. U i je menší než 404. Je to prostě bude pop-up Tyto výstražné zprávy. 

MIKE RIZZO: A co bylo kód 404 stál v HTML? Pamatuje si někdo? Nebyl nalezen, vpravo. Chrome také přidal to čistý věc, kde můžete - 

TOMAS REIMERS: Protože lidé jako Mike začal dělat to hodně a otravné uživatele, což umožňuje můžete vidět informace. 

MIKE RIZZO: Jo. 

TOMAS REIMERS: Máme nějaké dotazy o tom, o JavaScriptu knihovny, najít knihovny, nebo co vývoj webových vzhled stejně jako v reálném světě? Jsme běh proti času. Takže si nejsem jistý, jedeme mít čas na provedení pokud je to opravdu rychle. Jsme dobrý? 

MIKE RIZZO: něco, co lidi chtěli vidět opravdu rychle, tak za dva minut nebo méně? 

TOMAS REIMERS: Cokoliv můžeme objasnit? Jak psát - 

DIVÁKŮ: [neslyšitelné]? 

MIKE RIZZO: Ano, tak to je - 

TOMAS REIMERS: Můžete jen hit Control-U na internetových stránkách. 

MIKE RIZZO: Oh, nevěděl jsem, že. 

TOMAS REIMERS: Myslím, že jo. Control-U. Jo. 

MIKE RIZZO: Aha, tak to je Kód pro webové stránky. Ale pokud si opravdu chcete stáhnout naše soubory a vše, to je hostována na github.com 

TOMAS REIMERS: lomítko mé jméno - Tomáš Reimers - slash CS50 pomlčka seminář. 

MIKE RIZZO: A můžete zde vše tam. 

TOMAS REIMERS: To je to, co GitHub vypadá, mimochodem. Takže znovu, když vidíte open source projekt, typicky, že bude čtení mě tam, že si můžete přečíst. A když se vrátíte, zjistíte, že budete mít stahování zip, který bude vám umožní stáhnout zdroj kódu produkt ve své vlastní věci. 

MIKE RIZZO: Jo, a když jsme stačí kliknout na index.html opravdu rychle - 

TOMAS REIMERS: Uvidíte tady Zdrojový kód pro naše webové stránky. 

MIKE RIZZO: Také jsem zapomněl posunout vpravo dříve s velkým stolem je v ceně, ale je tu také tabulka z chmods, že jsme součástí pouze pro přehlednost. Ale pokud budeme procházet celou cestu dolů do dno, jsme neměli vlastně dělat velmi hodně se JavaScriptu věci vůbec s tím. Je to výhradně od všeho jiného, ​​co jsme měli. 

Takže děkuji kluci přišli a poslechu. Doufáme, že to bylo opravdu užitečné. Máte-li jakékoli JavaScript související otázky, nebo jen chcete o tom mluvit co jiného, ​​jako to, co další skvělé věci můžete to udělat pomocí JavaScriptu, rádi bychom s tebou mluvit. 

TOMAS REIMERS: Máte-li otázku o projektu, nebo jestli to může být relevantní, pravděpodobně budeme držet kolem trochu po tomto. Ale jiné, než to, že mají dobrý víkend. 

MIKE RIZZO: Jo, baví. Uvidíme se. 

TOMAS REIMERS: Měj se.