[Powered by Google Translate] [Seminář: jQuery] [Vipul Shekhawat, Harvard University] [To je CS50.] [CS50.TV] Pokud jste po spolu doma, můžete skutečně přístup k mým snímků on-line tím, že půjdete na tento odkaz. Je to TjjRWj na bit.ly. Můžete také jen přejít na adresu URL přímo, který je cloud.cs50.net / ~ vshekhawat, což je mé jméno, a jQuery. Velmi Vám doporučuji sledovat spolu, pokud jste sledoval doma, a pokud jste tu také, protože to je docela interaktivní prezentace. 

Takže dnes budu mluvit o jQuery a první otázka je, co je jQuery? Tento rok, vím, že vy se nevztahuje JavaScript tak podrobně, jak jsme v minulých letech. JavaScript je v první řadě, jen client-side jazyk které používáte-li spouštět skripty a kód každého uživatele počítače. Takže máte server, který poskytuje webové stránky pro lidi, ale možná budete chtít dělat věci na svém počítači, požádat svého počítače odesílat požadavky na server každých 30 sekund, nebo něco takového. Můžete to udělat pomocí JavaScriptu. JQuery jen poskytuje více funkcí na vrcholu JavaScriptu který dělá další věci pro vás. Podíváte-li se na obsah na vrcholu, , který popisuje některé z věcí, které jste schopni udělat. Takže celkově to bylo vytvořeno v lednu 2006. To bylo poprvé představil v srpnu 2005. Bylo to asi za pár let, a je to opravdu součástí nového hnutí Web 2.0 že je vyroben na internetu tak lesklé. Je to nejpoužívanější JavaScript knihovna. Více než 19,6 milionu webové stránky používáte, a využití stále roste podle builtwith.com, což, zdá se, za poslední rok, bylo právě neustále zvyšuje poměrně lineárně. Mezi nejlepších 10 milionů stránek, je tu ještě - asi 40% z nich jsou v současné době používat. Facebook používá to, spousta jiných webových stránkách v současné době používat. Můžete se podívat na ty statistiky na vlastní pěst, pokud budete chtít. A můžete říct, že je to důvěryhodně, protože má základ a 13 členů správní rady, spolu s týmem 20 lidí, kteří na něm pracují pravidelně. Takže je to velmi často používá, má. Org URL, je to fantazie, to má vedlejší účinky na jiné věci, tak je to velký problém. 

Proč byste měli používat? JQuery je velmi lehký. To znamená, že to není velký soubor. Zde si můžete stáhnout minified soubor, který je bez všech mezerou a připomínky, a je to jen 32 kB. Takže je to jednoduché stačí hodit na vaše webové stránky a prostě začít používat. Je to také velmi efektivně napsáno, takže nezabírá mnoho - to není zpomalit své webové stránky moc, když ji použijete. To vám umožní realizovat věci, které byly dříve neproveditelné. Tam jsou některé funkční aspekty, jako je vytváření animací, které by za normálních okolností být velmi, velmi obtížné. Ale v jQuery oni jsou vlastně velmi jednoduché. A tam jsou některé věci, které jsou nepříjemné dělat, možné v JavaScriptu, jako je posílání požadavku POST ale odeslat požadavek na server, musíte napsat pět nebo šest nebo sedm řádků kódu. Nyní stačí to udělat v jednom řádku kódu v jednom volání funkce. To zjednodušuje opravdu hodně věcí, které děláte. A všechny ty skvělé děti používat. Tím, že mám na mysli mě. V mém posledním projektu v loňském roce, což je news.whrb.org, který je určen pro rozhlasové stanice, vytvořil jsem tento blog který hostí všechny pořady, které jsme udělali a MP3 soubory pro ně. Můžete procházet minulosti ukazuje, a to vše provedeno pomocí jQuery. Můžete říct, , protože všechny tyto animace, v podstatě. Takže pokud máte - pokud vytváříte nový příspěvek, vidíte ty malé slideDowns, to vše je provedeno pomocí jQuery. A to fade - tak, že tyhle věci se tak děje pomocí jQuery, a nemusíte neustále znovu načíst stránku procházet web. Další cool věc, která se provádí pomocí jQuery je tato prezentace. Já používám tento open source, čemu se říká scrolldeck, který někdo napsal na vrcholu jQuery. Pokud se skutečně podívat na zdroje, můžete vidět, že že používáte tento znak dolaru, dolary se používají v jQuery znamenat, že je funkce jQuery funkce. Takže oni definování obal na vrcholu jQuery , který umožňuje vytvořit prezentaci takhle, a můžete vidět, že tady to včetně původní jQuery soubor což je to, co budete muset zahrnout, pokud chcete používat jQuery ve vašich vlastních webových stránkách. 

Dotyk na tom, jak jej nainstalovat? Můžete prostě jít do jQuery.com a stáhnout soubor, přidat do webového adresáře a zahrnout jej. Tak právě na vrcholu, v hlavě tag souboru HTML svého hlavního souboru HTML, jen tento řádek kódu správnou verzí, pro kterou verzi jQuery, kterou používáte. Můžete si jej stáhnout tím, že půjdete jQuery.com, Klikněte na "Download jQuery," a máš to. To je všechno. A ve skutečnosti, můžeme se podívat na to, co to vypadá. Pokud kliknete na stažení zde, jQuery je to. Je to jen jedna velká JavaScript soubor, který udělá všechnu magickou věci pro vás. Toto je minified verze, která není čitelný vůbec. Můžete se také podívat na vývojové verzi, která je čitelná ale stále velmi, velmi zdlouhavé. Je to spousta věcí tam. Můžete také odkazy na hostované verzi Google ní. Takže to umožňují jen spoléhat na Google poskytnout. Poskytují všechny verze toho, k dispozici po celou dobu. Takže se můžete spolehnout na Google pravděpodobně hostit za vás. Nebo můžete propojit vlastní jQuery nejnovější verzi. Mají adresu URL, která je vždy aktualizován na nejnovější verzi. Je to jQuery-poslední, a je tu jeden problém s tím, a to, že v případě, že aktualizace jQuery a některé z předchozí funkce oni se retrograded nebo zastaralé, Možná to není - to může začít už nedostal podporovány. Takže pokud píšete webové stránky pomocí verze 1.8.2, v době, kdy verze 2.7 vychází některé z funkcí, které napsal už nefungují. Takže je lepší jen stáhnout 32 kB soubor, dát na své webové stránky, a to bude fungovat navždy. 

Chystám se jít dál a začít mluvit o skutečné funkčnosti jQuery. První věc je, selektory. To je to, co bylo původně koncipováno jQuery poskytnout. A můžete kliknout na dokumentaci se podívat na podrobná dokumentace pro voliče Budu se zde zabývat. Myšlenka voliče je, že si můžete vybrat prvky HTML na stránce. Prvky na stránce mít ID a třídy a další identifikační aspekty k nim. K dispozici je také - Už jsou v různém pořadí. Někteří v době, kdy jsou zanořené do sebe. JQuery umožňuje vytvořit jednoduché dotazy, které načítají prvky ze stránky. Pak můžete manipulovat s těmi prvky pomocí jQuery funkce, který je manipulace část se dostaneme později. Můžete změnit HTML, CSS, změnit můžete animovat a přidat funkce, které aktivují na určité události. Tak například, pokud něco kliknul, které chcete aby se něco stalo, můžete to udělat pomocí jQuery stejně. A existuje obrovské množství způsobů, jak vybrat prvky. Většina z nich jsem nikdy nepoužíval, ale tam jsou ty základní, které jsou velmi důležité. Prvek voliče, například, pokud jste právě výběrem nic to je div - vlastně mám kód otevřený pro tuto prezentaci snímků. Tak, například, tady je první snímek. Zde máme div. Pokud bychom skutečně vybrat všechny divy na stránce, to bude jen nám řadu všech tagy Div, které existují v tomto souboru. Identifikační voliče můžete vybrat cokoliv s daným ID. Takže pokud to, například, to, co má ID "Co je," a když jsme to udělali s #, co místo nějakého ID, , že by se jen vrátí pole, které má jeden prvek, a to je, že prvek na stránce. Můžeme také kombinovat selektory tuto cestu tím, že vybrat pouze věci s ID, které jsou divs. Tak jo. Pouze vyberte divy, které mají toto ID. Pro třídu stačí použít tečku, je to totéž, jako CSS. Potomek také funguje, takže pokud máte nějaké třídy a to vnořené prvky v něm - tak, například, tam je nějaká třída a má kotevní tag jako odkaz na jinou stránku, můžete použít tuto syntaxi načíst odkaz. Můžete vybrat i více věcí najednou, stačí je oddělit čárkami, použít jakýkoli volič, který chcete, a budete-li vybrat všechny najednou, v jednom poli. A pak je tu také není volič, takže si můžete vybrat všechny divy které nemají určité třídy. A to je jen způsob, jak získat užitečné úvod o tom, jak tato volba funguje. Ukážu několik konkrétních příkladů v druhé. 

Pokročilé selektory jsou - to je jen několik příkladů. Existují desítky z nich, ale pokud chcete vybrat všechny obrazové značky uvnitř nějakého prvku, pak stačí udělat: snímek. Chcete-li vybrat i prvky, například pokud existuje 20 z nich, Chcete-li zvolit 0, 2, 4, 6 a tak dále, vy: i, nebo můžete provést také: odd. Jedná se o pseudo voliče, což znamená, že ve skutečnosti počítat každý další prvek, spíše než jen jít a výběru všech z nich. Můžete také - každý prvek může mít specifické vlastnosti. Tak, například, class = střed je také atribut. Z tohoto kotva tag href, hypertext reference, je také atribut. Takže si můžete vybrat něco, co odkazuje na určitou stránku nebo jen - je to opravdu obecně. Můžete si vybrat cokoliv s jakoukoliv atribut, který byste chtěli. A pak, i, atribut obsahuje. Pokud jste například chtěli vybrat všechny vstupní prvky které mají slovo "pass" jako jméno jich, pokud stránka obsahuje vstupní blok textu tomu se říká "heslo", že by jeden způsob, jak byste mohli vybrat to. A existuje mnoho dalších. Můžete jít dopředu a podívat se na dokumentaci a vidět konkrétní příklady, jak to funguje. 

Další věc je DOM manipulace. Poté, co vybereme prvky, se chceme skutečně dělat věci s nimi. Zatím jsme se podíval na to vůbec, ale když se podíváte na dokumentaci, je to opravdu hodně, že bychom mohli udělat. Na tomto místě budeme volit prvků na této prezentaci a manipulovat s nimi pomocí jQuery. Protože toto je implementováno pomocí jQuery, máme přístup k jQuery knihovny, a můžeme použít tyto funkce v rámci tohoto kódu. Jedna užitečná věc, kterou nemusí vědět, je konzole. A Google Chrome je to, co jsem pomocí. Můžete stisknout alt příkaz J nebo alt řízení J pro otevření konzole. Ve Firefoxu si myslím, že je to příkaz nebo ovládací K posunu řadicí K. V Safari budete muset jít měnit některá nastavení. Tam je odkaz, pokud chcete to udělat, ale já doporučuji dostat Chrome nebo Firefox. Takže pojďme otevřít konzoli, je to tady. To umožňuje v podstatě jen to, co chcete. Takže stačí zadat vytvořit proměnnou s názvem X, x = 5, podívejme se, co x + 2 je. Můžete dokonce udělat něco jako CS + Podívejme se, x + 45, který bude CS50. Stačí si jen udělat nějaké typické JavaScript věci. Ale můžete si také udělat jQuery zde. 

Tak se pojďme podívat na prvního aspektu zde. Chystáme se vytvořit proměnnou s názvem HTML, což je řetězec. Má značku odstavce v tom, že se říká nějaký nový text. Takže máme tento HTML, je to nějaký nový text v bodě tagy. Teď vlastně chceme přidat na stránku. Nastavil jsem to tak, že HTML na tento odstavec, tento titul tady, append ID. Zvolíme-li přidávací ID a připojit k němu HTML proměnné jsem vytvořil, bude dodat, že HTML na konci, hned po tomto tagu odstavce. Takže když to uděláme - jsme si vybrali tento odstavec, a my jsme volal append funkci s proměnnou HTML jsem právě přidali, bude dodat, že nový text tady na stránce. Můžeme také předřadit, což znamená, že půjde dříve, na začátku tohoto prvku. Takže tam je nějaký nový text na začátku a po něm. Můžu jít dopředu a osvěžit se zbavit této věci jsem právě udělal. Ale to je příklad toho, jak můžete použít předřazený a připojit metody manipulovat věci na stránce, přidat nějaký HTML. 

Můžete také změnit tříd. Zpět v tomto souboru stylu, vytvořil jsem to pro win třídy která má červenou barvu textu, barvu pozadí nějaký a stínu textu. Vypadá to odporné, ale já ve skutečnosti - tomto odstavci odpovídá třídě ID. Takže můžu přidat třídu pro vítězství. Mohu spustit tuto funkci v konzoli, a přidá tuto třídu, a teď to vypadá, odporný, jak se očekávalo. CSS se automaticky dostane aplikovat na třídy, které - v případě, že je CSS pro třídu, automaticky dostane použita pokud změníte třídu elementu. Pak se můžeme jen odstranit pomocí odebrání třídy. Takže pokud máte nějaké předdefinované třídy, jako je červená nebo zvýrazněna, a pak chcete použít ty na prvky, nemusíte dělat všechnu CSS styling pokaždé. Prostě přidáte třídu k elementu, a poté se automaticky stane - bude automaticky hledat vhodný pro danou třídu. Můžeme také odstranit věci, takže budu vyberte všechny divy na stránce a odstranit je. Co to bude vypadat? Bude to vypadat jako nic, takže je to vlastně nic nezbylo. Moje prezentace je pryč. Mohu obnovit a přivést ji zpět, naštěstí, protože je to právě běží jednou, ale to je příklad odstranění, pokud chcete zcela zničit prvek mimo stránku. 

Můžete také přepsat, a budu-li vybrat všechny odstavce tagy na stránce a jít v nich a nahradit cokoliv textu mají v nich se jen slovo "zkoušky". Pokud tak učiníte, budete nahradit každý odstavec na stránce s tímto testováním. Jo. Všichni jsou nahrazeny testování. Tak to je příklad přístupu k textu a přepsání. Můžete také získat informace, a to je opravdu cool vstupních polí. Máte-li vstupní pole, které lidé píšete věci, do lidé píší věci do něj, Zde vybereme vstup, nějaký vstupní tag s typem textu. V tomto případě existuje pouze jeden vstupní pole v celé prezentaci, a tak jsme si jen vybrat ten první, a pak zavoláme funkci val na to. , Která vrací hodnotu, a pro vstupní pole, hodnota je jen co se stane, že je v ní. Takže pokud to uděláme, to prostě vrací řetězec věci. A když říkáme to znovu po napsání více věcí, se promění v další věci. To je jeden skvělý způsob, jak získat přístup prvky vstupního pole a pak zkontrolujte, je tato platná e-mailová adresa, je to platné datum, například. Můžete jen získat věci okamžitě, jak lidé píší to, a zkontrolujte, zda je to platné, zašlete jej zpět na server, dělat, co chcete s ní. A to je, jak přistupovat co je uvnitř těch krabic. 

Můžete také upravit CSS přímo, takže namísto přidání Třída, která má některé předdefinované vlastnosti, stačí přidat cokoliv CSS chcete něco. Takže pojďme vybrat tělo, které je celé prezentace, a barva je vlastnost, která určuje, jaké barvy je text. Pokud změníme ji na červenou, bude veškerý text na stránce rozsvítí červeně. Můžeme udělat něco jako modrou barvu pozadí, tam jdeme, je to krásné. Můžete si dělat, co chcete s tím. Pomocí vlastnosti CSS, můžete opravdu změnit, jak něco vypadá kdykoliv. Další věc je účinky. Efekty jsou v podstatě totéž jako úpravou CSS, ale skutečně poskytují některé další animaci na to. Takže místo toho jen ukazovat, nebo něco skrývá, nebo změnou barvy, můžete vlastně dělat to oživila. Zde je dokumentace, chcete-li se podívat na rozsáhlou dokumentací pro ni. Ale já jdu na pokrytí hlavní. Existují zobrazit a skrýt vlastnosti. Zobrazit / skrýt ID skutečně odpovídá celý tento box takže když jsem ji skrýt, bude to jen tak zmizet. A můžu ho znovu zobrazit, pokud chci, aby to vrátit. A je to zpátky. To však ve skutečnosti nezmizí, Nechtěl jsem vlastně odstranit ze stránky, jen jsem nastavit vlastnost CSS na Skrytý takže nemůžete vidět už ne. K dispozici je také klouzat nahoru a posuňte dolů, které vám umožní mít tento účinek. Klouže až zmizí, a poté, co zmizí můžete posuňte jej směrem dolů, aby se vrátil. A teď je to zpátky. K dispozici je také to fade efekt, který se - fade ID odpovídá do tohoto boxu. Kdybych jí propadnete ven, pak to pomalu zmizí. Mohu také slábnout ji, a že se vrátí. Můžete si také udělat Vadne, která je specifická pro blednutí funkce. Můžete mít to fade na konkrétní neprůhlednosti, které chcete. Takže pokud jste jí propadnete pomalu 0,5, bude to stát se polovina viditelné. Můžu se jít do 0,1, a zpět na 1, aby bylo plně viditelné znovu. To je jen další animace, které můžete udělat. 

Tam jsou také klopné účinky. Takže budu vyberte přepínací ID, který odpovídá tento box a na tom div můžete volat přepínat, pokud je to vidět, že se stane neviditelným, jestli je to neviditelné, že bude opět viditelné. Tak jsem to nazval přepínací funkci dvakrát, první z nich byl totéž jako kůže, druhá výzva byla stejná věc jako show. A také můžete udělat s fade přepínač, který dělá totéž, kromě toho, že vlastně mizí. A totéž se skluzavkou přepínat. K dispozici jsou zřetězené efekty také, což znamená, že pokud vyberete prvek a stačí zavolat spoustu animačních metod na to, pokud byste chtěli, aby zatmívání, posuňte dolů, a pak se schovat a pak slábnout, bude to dělat jim v řadě. Tak zmizel, vrátil se - z nějakého důvodu se skrýt nestalo. Zkusme to. Jo, tak to vybledl a pak vyklouzla. A existuje spousta dalších. Můžete použít funkci animovat vytvořit si vlastní animace, což je poměrně složitá, ale to vám poskytuje nekonečné rozšiřitelnost. Můžete si vytvořit jakýkoliv druh animace, které chcete. Můžete také použít frontu do fronty více animací najednou. Takže pokud chcete něco přelétat stránky, snímek z pravém horním rohu na levém dolním rohu, můžete to udělat, a jen mají spoustu akcím, které jdou jeden po druhém. 

Další věc, kterou budeme mluvit o události. Události umožňují - tak daleko, že jsme právě byli psát věci do konzole a to je jeden způsob, jak se to stalo, ale na skutečné stránky, nebudete mít možnost dělat věci, které uživatel zadat do konzole. Chcete co se stane automaticky. Za to, že budete muset použít události, které aktivují na nějaké určité události děje. Můžete zkontrolovat dokumentaci pro všechny podrobnosti. Tak uvidíme. Chceme skrýt nebo zobrazit okno ale teď toto tlačítko se nic dělat, protože jsem neměl realizovat to ještě. Chystám se jít na aktuální HTML stránky. Zde je snímek. Je to div na snímku. To má třídu snímku. Tam je text. Nyní, tam je to box a box tlačítko. Jak bychom vlastně dělat to zmizí? Za prvé, pojďme napsat funkci, která dělá box ID zmizí. To je syntaxe pro funtion, pojďme jen zavolat, že hideTheBox. Nebere žádné argumenty, protože neexistují žádné argumenty, která mají být přijata. Můžeme zvolit pole ID. Takže pomocí jQuery vyberte si můžeme vybrat mezi pole ID, a pak už jen, aby to zmizí. Udělejme to mizí. Když jsme běželi tuto funkci v aktuální konzoli bychom mohli definovat funkci, můžeme nazvat hideTheBox, a funguje to. Ale my chceme, aby se stalo, když je tlačítko stisknuto skutečnosti. K tomu musíme použít událost. Chcete-li svázat události nějaké konkrétní tlačítka nebo nějaké akce happening, musíme vybrat prvek, který událost bude spouštět - nebo že spustí událost, je mi líto. 

Takže v první řadě, pojďme zaškrtněte políčko tlačítko ID protože to je tlačítko, a teď, když na to tlačítko, Chceme vytvořit animaci, když je klepnutí. Takže tam, klikněte funkci. To umožňuje navázat jinou funkci k němu. Tato funkce má jinou funkci jako argument můžeme předat funkci hideTheBox, a při každém klepnutí na toto tlačítko, bude tato funkce automaticky spustit. Takže to bude fungovat, pokud uložíme to, budu aktualizovat, a - jednu vteřinu, je mi líto. Opravit to opravdu rychle. Dobře. Tam jdeme. Takže teď box se vytrácí, když klepněte na tlačítko. Můžeme také změnit jen fadeToggle, změnit jen skrýt nebo zobrazit okno a to bude také fungovat taky, pokud budeme aktualizovat. Můžeme se skrýt, můžeme také ukázat, a že bude pokračovat v práci. Další věc, kterou můžeme udělat, je, že vlastně nemáte definovat tuto funkci hideTheBox než zavoláme tlačítkem ve funkci. Takže místo toho, definování funkce a volání hideTheBox, budeme bavit pouze volat, pokud tato věc klepnutí. Takže můžeme definovat to anonymně tady, což je funkce, která má JavaScript. Můžete definovat funkci, normálně, řekli bychom, že funkce hideTheBox s argumenty, ale můžeme jen říct, funkce bez argumentů, spustit složená závorka definovat funkci, uzavřít, že složenou závorku, a pak už jen definovat funkci zde v první závorce a poslední závorka , které odpovídají argumenty click funkce. Takže jsme kolem v této funkci můžeme zkopírovat tento řádek kódu tady, a který bude dělat přesně to samé. A teď nemáme tuto funkci náhodný fadeTheBox která je sedět bez zjevného důvodu. Tato funkce byla definována anonymně, to nemá jméno. To se provede pouze, když klikneme na tlačítko Kvádr. Takže osvěžující ještě jednou, ještě jednou, a můžete vidět, že to ještě funguje. A to je, jak vytvářet události. 

Existuje mnoho různých událostí, které můžeme použít. Chystám se přepnout zpět na pomocí konzoly jen ukázat, jak tyto práce. ID je pro každou z nich odpovídají každé krabici. Takže toto políčko, je kliknout ID, tohle je klíč ID, a tohle je myš ID. Ještě jedna věc je, že je tato akce funkce, spíše než psát to pokaždé, Vlastně jsem šel dopředu a definoval akční funkci sem. To dělá totéž jako hideTheBox funkci. To dostane toto políčko a buď se ztrácí to vybledne nebo se dovnitř A to je důvod, proč jsme schopni jej zde. Takže pokud klikneme na tomto cvaknutí ID, chceme, aby okno zmizí a znovu. Je to totéž jako tlačítko, které jsme měli v posledním snímku. Nyní po říkáme, že můžeme klikněte na tento a okno zmizí, klepněte na ni znovu a znovu se objeví okno. Je to docela jednoduché. Dvojklikem dělá totéž, kromě toho vyžaduje dvojí klepnutí. Takže pokud na něj klepnete jednou a klikněte na něj opět se nic nestane, ale pokud dvakrát kliknete rychle, bude to zmizí. Pokud kliknete dvojklikem znovu, bude to vrátit. Tak to je docela jednoduché. Vstup z klávesnice je trochu divné, já si nemyslím, že to skutečně funguje v tomto příkladu protože klíč dolů, klíč a stisknutí tlačítka a další klíčové akce aktivovat bez ohledu na to, co prvek, který vázat. Například, i když jsem vázán tlačítka dolů orgánu nebo něco úplně jiného, pak by to ještě aktivovat bez ohledu na to - není to specifické. Nemám být kliknutí na tento odkaz a stiskněte klávesu, aby se něco zmizí. By mohla být aktivována bez ohledu na to, co element jsem právě nacházíte Takže tyto nejsou ve skutečnosti pracují v tomto případě protože neuznává mě vstupu vstup do div vstup z klávesnice. 

Ale když se podíváte na akce myši, první, kdo se pohybují, a to může udělat něco z toho pomocí CSS. Pokud používáte CSS, můžete ji vytvořit tak, že pokud se vznášejí nad něčím, pak jeho změny stylu. Ale s použitím jQuery můžete změnit styly dalších věcí, stejně. Tak, například, budeme nazývat opatření, pokud se vznášet nad tímto div. To znamená, že pokud budeme vznášet se nad ni, a pak okno zmizí. Pokud se vzdalujete, bude okno znovu objeví. Nazveme-li tento a vznášet se nad ním, políčko se zmizet, a jakmile se vzdálí, vrátí se zpět. Nazveme-li tuto funkci hover na myš ID, což odpovídá tento box a pak když jsme vznášet se nad poli, pak se okno skutečně zmizí - je to být funky hned, ale - pokud se vzdalujete, bude to znovu. Právě teď je to obráceně z nějakého důvodu. Myš zadat a funkce pohybu myši jsou poněkud podobné, ale mírně odlišné. Myš zadat pouze se aktivuje, pokud kurzor myši vstoupí na pole, podle očekávání. Takže pokud budete pohybovat do ní, bude to zmizí. Ale nebude to objeví znovu, když se vzdalujete, budete muset vrátit na něj pro to, aby se vrátil. K dispozici je také funkce pohybu myši, který bude aktivovat když myš je přítomna v krabici. Takže to bude jen pokračovat dál, blednutí a ven. A je to vlastně přihlášení - Vypadá to, že je to jen blednutí dovnitř a ven, ale je to vlastně přihlášení mnohem více akce, než to, takže při odchodu to bude jen dál, protože přihlášen jako tisíce z nich. Možná ne tisíc. Možná pět. Se přihlásí víc než to. Jde o to, všechny akce myši, existuje mnoho z nich. Můžete si přečíst na ty ostatní, ale všechny jsou mírně odlišné, a můžete si vybrat podle toho, co ten, který potřebujete podle toho, co pro konkrétní účel se snažíte dělat. 

Další věc, kterou budu mluvit, je AJAX. AJAX, já vím, že se netýkala JavaScript tolik hloubky v letošním roce, tak jsem jen tak mluvit o AJAX obecně za minutu. AJAX je zkratka pro Asynchronous JavaScript and XML. Je to v podstatě, například, když jste na Facebooku a tlačí vás oznámení, to proto, že AJAX je spuštěna ve Vašem webovém prohlížeči. Každých pár sekund váš webový prohlížeč je vlastně jít k serverům Facebook je, žádat je, máte něco nového pro mě, a pak se vrátí k vám. To vám umožní odesílat požadavky na server aniž byste museli načtení stránky. Tak normálně, pokud jste jen pomocí PHP a databáze, Musíte aktualizovat stránku, než můžete získat nové informace ze serveru. Ale pomocí AJAX, můžete vytáhnout z tohoto neustále nové informace, nebo vytáhnout na to, když klepnete na tlačítko, nebo něco podobného. Tak to nám umožňuje poslat žádost bez překládky stránku a můžeme použít buď GET nebo POST. 

GET požadavků, například pokud vám Google.com in a to q = test. To jim dotazu test. A to je požadavek GET, protože je to předáním těchto parametrů do samotné URL. Požadavek POST je jako kdyby jste posílal poštou. Je to jako dát do dopisu a zaslat ho na ně, ale oni nejsou ve skutečnosti vidět obsah. Oni nejsou viditelné v URL. Nemůžete přímo zadejte ho, musíte jej poslat skoro tajně. Je to v příspěvku. Ale s použitím jQuery, můžete tak učinit GET a POST požadavky mnohem snadněji, než byste normálně mohli používat jen obyčejný JavaScript. Dotaz lze pomocí API GET požadavky, a můžete také zkontrolovat přihlašovací údaje. Na další stránce, jsem vytvořil toto, který se ptá: "Co je k obědu?" pomocí Harvard potravin API, takže se pojďme vytáhnout, že až. To je jen příklad toho, jak můžete použít jQuery dělat GET požadavek na API a získat informace zpět z něj. Takže chceme, aby se zobrazila nabídka pro dnešní den, a my chceme vidět, co je k obědu. Zde je URL vytvořit požadavek GET v jQuery. Používáte dolarů. dostat funkci. První argument je URL, takže přesně to, co jste dotazování. Pak další argument je funkce, která spustí, když požadavek GET je kompletní. Takže si odeslat nějaký požadavek na server, počkejte, až se to vrátí. Když to přijde zpátky, budete mít nějakou akci s daty, která je zpátky ze serveru. Pojďme dál a kódování to stejně. Nechtěl jsem to kódovat buď záměrně. Zde je TODO. Za prvé, pojďme použít události vázání takže když je toto tlačítko stisknuto, pošleme pryč GET požadavek. A když se žádostí o přiznání s některými údaji, budeme psát do tohoto identifikačním jídlo info div. Za prvé, pojďme vybrat jídlo tlačítko ID. Když je klepnutí, chceme, aby to něco udělat. Řekněme, aby to anonymní fuction, jako předtím. Můžete zabalit ty složené závorky, a když je toto tlačítko stisknuto, chceme poslat GET požadavek zkontrolovat, co je k obědu. K tomu můžeme jen zadat $. Dostat. Jedná se o jQuery funkce, pomocí dolaru. To trvá několik argumentů. První z nich je URL, druhá je funkce zpětného volání, funkce, která se nazývá pokud tento požadavek skutečně vrátí. Řekněme postavit URL jako první. Můžeme si ji z API, které David napsal nahoru. Chystáte se tady můžeme vidět, že je to food.cs50.net/api/1.3/menus, a pak stačí předat názvy parametrů, které byste chtěli. Takže parametr 1 je hodnota 1. Vypadá to, že standardní data, datum, výchozí hodnota je dnes pokud nezadáte nic, a konečné datum také výchozích hodnot do dneška, pokud nezadáte nic. To je to, co chceme. Chceme jen získat informace pro dnešek. 

Chceme formát být v JSON. To je prostě libovolná, můžete použít libovolný formulář, který chcete. Můžete použít CSV, ale JSON JavaScript Object Notation je. Je to velmi snadné pro JavaScript pochopit, co to znamená, a můžeme ji vytisknout snadněji tímto způsobem. Takže pojďme se o to požádají ve formátu JSON, a pojďme žádost oběd. Takže jídlo = oběd. Stačí sepsat tuto adresu URL, jdeme zpátky. K dispozici je menu. První parametr je výstup = JSON protože to je to, co chceme, a oddělte parametry se slovy "a". Druhý parametr je - Nevzpomínám si. Meal. A chceme jídlo = oběd. Rovněž si můžete vyzkoušet zadáním URL do prohlížeče a jít na to. To vám dá nějaký výstup. Je to jen banda věcí, které je k obědu. Je to v této ošklivé formátu. Chceme vytisknout na naší stránce v lepším formátu. Takže URL je správné, teď stačí napsat funkci, zavolat zpět, když je žádost úspěšná. Tato funkce bude skutečně přijmout argument. Bude údaje. Dat je to, co se vrátí z GET po GET je hotovo. Můžeme dělat složené závorky, v tu píšeme anonymní funkce že provádí pomocí těchto dat, když dostaneme informace zpět. Takže údaje, když jsme zadali tuto adresu URL, to je to, co se děje údaje vypadat. Bude to být tak obrovský řetězec. Ale dobrá věc je, že JavaScript je analyzovat pomocí JSON.parse funkce. Takže pojďme vytvořit novou proměnnou s názvem rozebrat údaje. A rozebrat dat je pole objektů. Každý objekt obsahuje informace jako - no, pojďme se podívat. To má datum, jídlo, kategorii, recept, všechno to další věci. Takže řekněme vytisknout název pro každou z nich. Pojďme iterovat přes celou řadu věcí, které se vrátíme z ní, a jen vytisknout každou z nich - vytisknout název každého z nich. Toto je pro smyčku. 

JavaScript musí této užitečné syntaxi, kde si můžete vytvořit proměnné a smyčky přes pole, a var i jen iterátor, takže místo toho, aby museli dělat var i = 0, jsem byl menší než délka, i + +, můžete prostě var i v analyzovaných dat. V tomto příkladu bude analyzovány data (i) odpovídá aktuální prvek z pole, aktuální objekt. A chceme, aby se jméno z ní. Takže pojďme prostě jméno. A poslední věc je, že budeme mít nějaký jQuery znovu. Vlastně přidat ho do div, to jídlo info div, že je v současné době prázdný. Takže pojďme vybrat to. Budeme používat jQuery a vyberte jídlo info div id, nebo se najíst informace ID, omlouvám se. Chceme k tomu připojit. Pokud jsme udělali zkoušku, například, bylo by to jen přepsat to pokaždé. Takže můžeme jen doplnit to. Aktuální prvek pole, dostaneme jméno z toho, a budeme připojit ji ke konci číslo jídla info div. A pak už jen, aby to vypadalo čistší, budeme také přidat zalomení řádku, takže to není vše na jednom řádku. Takže pokud vše půjde dobře, že by to bylo dobré - Za prvé, kdykoliv klepnete na toto tlačítko, to bude odeslat požadavek GET na tuto adresu URL. Pokud data vrátí z ní, bude to rozebere ho, otočte jej do formátu JSON, smyčky celé pole prohlašujete, že údaje, a připojit název a zalomení řádku ke každé linii v tomto ID jídla info, která byla dříve prázdné. Takže návrat k této stránce, budeme aktualizovat, klikněte, zjistit - to nefunguje. To je nešťastné. A to je místo, kde ladění vypovídací Index.html, řádek 1. To je zajímavé. Dobře, dobře, spíše než trávit čas dělat to, já jsem prostě jít vytáhnout provedenou soubor, který mám, který je dokončen verzi. Nejsem si jistý, jaký je rozdíl, ale můžeme jen otevřít tuto nahoru místo. A jdeme na AJAX, a to by mělo fungovat správně. To je to, co bylo dnes k obědu, v žádném konkrétním pořadí, s citacemi kolem ní, takže to není nejhezčí. Ale, samozřejmě, pokud jste to dělali pro konečný projekt, byste, aby to vypadalo lépe. Ale to je jen jednoduchý příklad, jak to udělat GET požadavek. A pokud se podíváme na skutečný kód, hádám, jsem si jistý, je to pořád skoro stejné. Zapomněl jsem jej převést na řetězec, to je ono. Ne, je to stále nefunguje. Bez ohledu na to, tady je skutečné vyplnění kódu za to, co by to mělo vypadat, a to dělá to samé jako to, co jsem právě zavedl. Když klepnete na tlačítko, používá GET JSON automaticky analyzovat data. Trvá data zpět z něj a prochází celou řadou a vypíše - bez ohledu na to dnes k obědu, jméno toho, a připojí zalomení řádku na konci každého řádku. To je, jak použít funkci GET. 

Můžete také použít POST, které jsem neměl čas sepsat příklad, ale můžeme podívat na dokumentaci. Když se podíváte na jquery.post, můžete vidět, že je to skoro to samé. Máte URL, ale namísto předávání parametrů pomocí - jen jejich uvádění do řetězce pro samotné URL, musíte projít v této proměnné data , který je v podstatě pole, slovník, který mapuje parametry na hodnoty. Minete, že, a že pošle jim pomocí POST. A až budete mít, pak můžete mít úspěch funkci který vykonává když data vrátí. Jinak je to přesně to samé. Takže pomocí POST budete chtít použít POST, například máte-li vstupní formulář dát lidem vstupní hesla do něj, a poslat ty hesla vypnout k back-end skriptu pro kontrolu v databázi, zda uživatel je platný, nebo ne. Můžete to udělat vše pomocí jQuery místo museli obnovovat stránku vůbec. To je, jak jsem implementoval v blogu, který jsem vám ukázal dříve. Pokud půjdeme do koncové portálu odhlásit, odhlásit se Odhlásit nefunguje. No, dovolte mi, abych ho otevřete v novém okně. Zde je heslo, a chtěl jsem psát v něčem náhodné. To nefunguje, ale můžete vidět, že jsme neměli skutečně obnovit stránku vůbec. Kód, pokud se chcete podívat na to, vše je k dispozici zde. Takže kódu jsem napsal loni někdy. Jak můžete vidět tady, budeme odeslání POST požadavku. Mám soubor s názvem login.php na zadním konci, který zkontroluje, zda je heslo platné. Parametry míjíme v jsou hesla, mapovány na vstup, který je v tomto vstupním poli v současné době. A když se data vrátí, můžeme zkontrolovat. Pokud jsou údaje nepravdivé, pak říkáme, nesprávné heslo, posuňte jej dolů, a jen aby to zmizí po tom. V opačném případě si načíst stránku Admin. A to vše bylo provedeno pomocí JSON. V tomto mnoha řádků kódu, stačí předat data na zadním konci, zkontrolovat, zda je to správné, zkontrolujte, zda jste přihlášeni správně, a dokonce na něj reagovat, přesměrování osobu na správnou stránku nebo ne nechat je se přihlásit a říkat jim, že mají nesprávné heslo. Tak to je příklad toho, jak byste mohli použít jQuery POST poslat požadavek POST do back-end, ověření, zda někdo přihlášen správně. 

Dobře, takže to všechny příklady jsem měl, a všechny věci jsem chtěl pokrýt. To jsou hlavní věci, které jQuery umožňuje dělat: vyberte prvky, upravovat je pomocí DOM manipulace, můžete přidat efekty, aktivujte věci na určité události, a také dělat AJAX požadavky velmi hladce a snadno. Takže děkuji za účast nebo sledování, a pokud budete mít nějaké dotazy, dejte mi vědět. Jo? [Student] Tehdy, když ses objevil, museli jste JSON po požadavku POST v uvozovkách, a já jsem jen přemýšlel, co to udělal. >> Jo, vidím. Otázkou bylo, že v tomto příkladu jsem ukázal, tam bylo slovo JSON v uvozovkách kolem - Budu znovu vyjměte měrku - kolem POST funkce. Já jsem jen tahem to ukázat. Tak tady to je požadavek POST, a tam je to JSON v uvozovkách. To jen definuje, co čekáme byl výstup. Takže když jsme se projít do formátu JSON a očekávaný datový typ, není to podmínkou, ale pomineme-li ji, pak se data budou automaticky analyzovat jako JSON. Takže nemáme volat parsování JSON funkci na to, to bude jen tak automaticky. A pokud se podíváte na dokumentaci POST, je to datový typ proměnné, typ dat očekávaných z serveru. Implicitně je to inteligentní odhadu, že může být špatně, takže si můžete nechat prázdné, ale je to jen typ dat v kódování, které používáte, ať už je to JSON nebo XML nebo něco jiného. 

Nějaké další otázky? Dobrá. Máte-li jakékoli další dotazy, neváhejte a napište mi na vshekhawat@college.harvard.edu, a diapozitivy a kód by měl být k dispozici on-line brzy. Hodně štěstí s vaším závěrečných prací, doufám, že budete používat jQuery. [CS50.TV]