[Powered by Google Translate] [Seminár: jQuery] [Vipul Shekhawat, Harvard University] [To je CS50.] [CS50.TV] Ak ste po spolu doma, môžete skutočne prístup k mojim snímok on-line tým, že pôjdete na tento odkaz. Je to TjjRWj na bit.ly. Môžete tiež len prejsť na adresu URL priamo, ktorý je cloud.cs50.net / ~ vshekhawat, čo je moje meno, a jQuery. Veľmi Vám odporúčam sledovať spolu, ak ste sledoval doma, a ak ste tu tiež, pretože to je celkom interaktívne prezentácie. 

Takže dnes budem hovoriť o jQuery a prvá otázka je, čo je jQuery? Tento rok, viem, že vy sa nevzťahuje JavaScript tak podrobne, ako sme v minulých rokoch. JavaScript je v prvom rade, len client-side jazyk ktoré ak používate spúšťať skripty a kód každého používateľa počítača. Takže máte server, ktorý poskytuje webové stránky pre ľudí, ale možno budete chcieť robiť veci na svojom počítači, požiadať svojho počítača odosielať požiadavky na server každých 30 sekúnd, alebo niečo také. Môžete to urobiť pomocou JavaScriptu. JQuery len poskytuje viac funkcií na vrchole JavaScriptu ktorý robí ďalšie veci pre vás. Pozriete Ak sa na obsah na vrchole, , Ktorý opisuje niektoré z vecí, ktoré ste schopní urobiť. Takže celkovo to bolo vytvorené v januári 2006. To bolo prvýkrát predstavil v auguste 2005. Bolo to asi za pár rokov, a je to naozaj súčasťou nového hnutia Web 2.0 že je vyrobený na internete tak lesklé. Je to najpoužívanejší JavaScript knižnica. Viac ako 19,6 milióna webové stránky používať, a využitie stále rastie podľa builtwith.com, čo, zdá sa, za posledný rok, bolo práve neustále zvyšuje pomerne lineárne. Medzi najlepších 10 miliónov stránok, je tu ešte - asi 40% z nich sú v súčasnej dobe používať. Facebook používa to, veľa iných webových stránkach v súčasnej dobe používať. Môžete sa pozrieť na tie štatistiky na vlastnú päsť, ak budete chcieť. A môžete povedať, že je to dôveryhodne, pretože má základ a 13 členov správnej rady, spolu s tímom 20 ľudí, ktorí na ňom pracujú pravidelne. Takže je to veľmi často používa, má. Org URL, je to fantázia, to má vedľajšie účinky na iné veci, tak je to veľký problém. 

Prečo by ste mali používať? JQuery je veľmi ľahký. To znamená, že to nie je veľký súbor. Tu si môžete stiahnuť minified súbor, ktorý je bez všetkých medzerou a pripomienky, a je to len 32 kB. Takže je to jednoduché stačí hodiť na vaše webové stránky a jednoducho začať používať. Je to tiež veľmi efektívne napísané, takže nezaberá veľa - to nie je spomaliť svoje webové stránky moc, keď ju použijete. To vám umožní realizovať veci, ktoré boli predtým neuskutočniteľné. Tam sú niektoré funkčné aspekty, ako je vytváranie animácií, ktoré by za normálnych okolností byť veľmi, veľmi ťažké. Ale v jQuery oni sú vlastne veľmi jednoduché. A tam sú niektoré veci, ktoré sú nepríjemné robiť, možné v JavaScripte, ako je posielanie požiadavke POST ale odoslať požiadavku na server, musíte napísať päť alebo šesť alebo sedem riadkov kódu. Teraz stačí to urobiť v jednom riadku kódu v jednom volaní funkcie. To zjednodušuje naozaj veľa vecí, ktoré robíte. A všetky tie skvelé deti používať. Tým, že mám na mysli mňa. V mojom poslednom projekte v minulom roku, čo je news.whrb.org, ktorý je určený pre rozhlasové stanice, vytvoril som tento blog ktorý hostí všetky relácie, ktoré sme urobili a MP3 súbory pre nich. Môžete prechádzať minulosti ukazuje, a to všetko vykonané pomocou jQuery. Môžete povedať, , Pretože všetky tieto animácie, v podstate. Takže ak máte - ak vytvárate nový príspevok, vidíte tie malé slideDowns, to všetko je urobené pomocou jQuery. A to fade - tak, že tieto veci sa tak deje pomocou jQuery, a nemusíte neustále znovu načítať stránku prechádzať web. Ďalšia cool vec, ktorá sa vykonáva pomocou jQuery je táto prezentácia. Ja používam tento open source, čomu sa hovorí scrolldeck, ktorý niekto napísal na vrchole jQuery. Ak sa skutočne pozrieť na zdroje, môžete vidieť, že že používate tento znak dolára, doláre sa používajú v jQuery znamenať, že je funkcia jQuery funkcie. Takže oni definovanie obal na vrchole jQuery , Ktorý umožňuje vytvoriť prezentáciu takhle, a môžete vidieť, že tu to vrátane pôvodnej jQuery súbor čo je to, čo budete musieť zahrnúť, ak chcete používať jQuery vo vašich vlastných webových stránkach. 

Dotyk na tom, ako ho nainštalovať? Môžete jednoducho ísť do jQuery.com a stiahnuť súbor, pridať do webového adresára a zahrnúť ho. Tak práve na vrchole, v hlave tag súboru HTML svojho hlavného súboru HTML, len tento riadok kódu správnu verzií, pre ktorú verziu jQuery, ktorú používate. Môžete si ho stiahnuť tým, že pôjdete jQuery.com, Kliknite na "Download jQuery," a máš to. To je všetko. A v skutočnosti, môžeme sa pozrieť na to, čo to vyzerá. Pokiaľ kliknete na stiahnutie tu, jQuery je to. Je to len jedna veľká JavaScript súbor, ktorý urobí všetku magickú veci pre vás. Toto je minified verzia, ktorá nie je čitateľný vôbec. Môžete sa tiež pozrieť na vývojové verziu, ktorá je čitateľná ale stále veľmi, veľmi zdĺhavé. Je to veľa vecí tam. Môžete tiež spojiť s hostiteľom verziu Google nej. Takže to umožňujú len spoliehať na Google poskytnúť. Poskytujú všetky verzie toho, k dispozícii po celú dobu. Takže sa môžete spoľahnúť na Google pravdepodobne hostiť za vás. Alebo môžete prepojiť vlastný jQuery najnovšiu verziu. Majú adresu URL, ktorá je vždy aktualizovaný na najnovšiu verziu. Je to jQuery-posledná, a je tu jeden problém s tým, a to, že v prípade, že aktualizácia jQuery a niektoré z predchádzajúcej funkcie oni sa retrograded alebo zastarané, Možno to nie je - to môže začať už nedostal podporované. Takže ak píšete webové stránky pomocou verzie 1.8.2, v čase, keď verzie 2.7 vychádza niektoré z funkcií, ktoré napísal už nefungujú. Takže je lepšie len stiahnuť 32 kB súbor, dať na svoje webové stránky, a to bude fungovať navždy. 

Chystám sa ísť ďalej a začať hovoriť o skutočnej funkčnosti jQuery. Prvá vec je, selektory. To je to, čo bolo pôvodne koncipované jQuery poskytnúť. A môžete kliknúť na dokumentáciu sa pozrieť na podrobná dokumentácia pre voliča Budem sa tu zaoberať. Myšlienka voliča je, že si môžete vybrať prvky HTML na stránke. Prvky na stránke mať ID a triedy a ďalšie identifikačné aspekty k nim. K dispozícii je tiež - Už sú v rôznom poradí. Niektorí v čase, keď sú zanorené do seba. JQuery umožňuje vytvoriť jednoduché otázky, ktoré načítavajú prvky zo stránky. Potom môžete manipulovať s tými prvkami pomocou jQuery funkcie, ktorý je manipulácia časť sa dostaneme neskôr. Môžete zmeniť HTML, CSS, zmeniť môžete animovať a pridať funkcie, ktoré aktivujú na určité udalosti. Tak napríklad, ak niečo klikol, ktoré chcete aby sa niečo stalo, môžete to urobiť pomocou jQuery rovnako. A existuje obrovské množstvo spôsobov, ako vybrať prvky. Väčšina z nich som nikdy nepoužíval, ale tam sú tie základné, ktoré sú veľmi dôležité. Výber prvku, napríklad, ak ste práve výberom nič to je div - vlastne mám kód otvorený pre túto prezentáciu snímok. Tak, napríklad, tu je prvá snímka. Tu máme div. Ak by sme skutočne vybrať všetky divy na stránke, to bude len nám rad všetkých tagy Div, ktoré existujú v tomto súbore. ID selektor umožňuje vybrať čokoľvek s daným ID. Takže ak to, napríklad, to, čo má ID "Čo je," a keď sme to urobili s #, čo miesto nejakého ID, , Že by sa len vráti pole, ktoré má jeden prvok, a to je, že prvok na stránke. Môžeme tiež kombinovať selektory túto cestu tým, že vybrať iba veci s ID, ktoré sú divs. Tak jo. Iba vyberte divy, ktoré majú toto ID. Pre triedu stačí použiť bodku, je to to isté, ako CSS. Potomok tiež funguje, takže ak máte nejaké triedy a to vnorené prvky v ňom - ​​tak, napríklad, tam je nejaká trieda a má kotevné tag ako odkaz na inú stránku, môžete použiť túto syntax načítať odkaz. Môžete vybrať aj viac vecí naraz, stačí ich oddeliť čiarkami, použiť akýkoľvek volič, ktorý chcete, a budete chcete vybrať všetky naraz, v jednom poli. A potom je tu tiež nie je volič, takže si môžete vybrať všetky divy ktoré nemajú určité triedy. A to je len spôsob, ako získať užitočné úvod o tom, ako táto voľba funguje. Ukážem niekoľko konkrétnych príkladov v druhej. 

Pokročilé selektory sú - to je len niekoľko príkladov. Existujú desiatky z nich, ale ak chcete vybrať všetky obrazové značky vnútri nejakého prvku, potom stačí urobiť: snímka. Ak chcete vybrať aj prvky, napríklad ak existuje 20 z nich, Ak chcete zvoliť 0, 2, 4, 6 a tak ďalej, vy: i, alebo môžete vykonať tiež: odd. Jedná sa o pseudo voliča, čo znamená, že v skutočnosti počítať každý ďalší prvok, skôr než len ísť a výberu všetkých z nich. Môžete tiež - každý prvok môže mať špecifické vlastnosti. Tak, napríklad, class = stred je tiež atribút. Z tohto kotva tag href, hypertext referencie, je tiež atribút. Takže si môžete vybrať niečo, čo odkazuje na konkrétnu stránku alebo len - je to naozaj všeobecne. Môžete si vybrať čokoľvek s akoukoľvek atribút, ktorý by ste chceli. A potom, aj, atribút obsahuje. Ak ste napríklad chceli vybrať všetky vstupné prvky ktoré majú slovo "pass" ako meno ich, ak stránka obsahuje vstupný blok textu tomu sa hovorí "heslo", že by jeden spôsob, ako by ste mohli vybrať to. A existuje mnoho ďalších. Môžete ísť dopredu a pozrieť sa na dokumentáciu a vidieť konkrétne príklady, ako to funguje. 

Ďalšia vec je DOM manipulácia. Potom, čo vyberieme prvky, sa chceme skutočne robiť veci s nimi. Zatiaľ sme sa pozrel na to vôbec, ale keď sa pozriete na dokumentáciu, je to naozaj veľa, že by sme mohli urobiť. Na tomto mieste budeme voliť prvkov na tejto prezentácii a manipulovať s nimi pomocou jQuery. Pretože toto je implementované pomocou jQuery, máme prístup k jQuery knižnice, a môžeme použiť tieto funkcie v rámci tohto kódu. Jedna užitočná vec, ktorú nemusí vedieť, je konzola. A Google Chrome je to, čo som pomocou. Môžete stlačiť alt príkaz J alebo alt riadenie J pre otvorenie konzoly. Vo Firefoxe si myslím, že je to príkaz alebo ovládací K posunu radiacej K. V Safari budete musieť ísť meniť niektoré nastavenia. Tam je odkaz, ak chcete to urobiť, ale ja odporúčam dostať Chrome alebo Firefox. Takže poďme otvoriť konzolu, je to tu. To umožňuje v podstate len to, čo chcete. Takže stačí zadať vytvoriť premennú s názvom X, x = 5, pozrime sa, čo x + 2 je. Môžete dokonca urobiť niečo ako CS + Pozrime sa, x + 45, ktorý bude CS50. Stačí si len urobiť nejaké typické JavaScript veci. Ale môžete si tiež urobiť jQuery tu. 

Tak sa poďme pozrieť na prvého aspektu tu. Chystáme sa vytvoriť premennú s názvom HTML, čo je reťazec. Má značka odseku v tom, že sa hovorí nejaký nový text. Takže máme tento HTML, je to nejaký nový text v bode tagy. Teraz vlastne chceme pridať na stránku. Nastavil som to tak, že HTML na tento odsek, tento titul tu, append ID. Zvolíme Ak pripájací ID a pripojiť k nemu HTML premenné som vytvoril, bude dodať, že HTML na konci, hneď po tomto tagu odseku. Takže keď to urobíme - sme si vybrali tento odsek, a zavolali sme na pripájací funkciu s premenlivou HTML som práve pridali, bude dodať, že nový text tu na stránke. Môžeme tiež predradiť, čo znamená, že pôjde skôr, na začiatku tohto prvku. Takže tam je nejaký nový text na začiatku a po ňom. Môžem ísť dopredu a osviežiť sa zbaviť tejto veci som práve urobil. Ale to je príklad toho, ako môžete použiť predradený a pripojiť metódy manipulovať veci na stránke, pridať nejaký HTML. 

Môžete tiež zmeniť tried. Späť v tomto súbore štýle, vytvoril som to na win triedy ktorá má červenú farbu textu, farbu pozadia nejaký a tieňa textu. Vyzerá to odporné, ale ja v skutočnosti - tomto odseku zodpovedá triede ID. Takže môžem pridať triedu pre víťazstvo. Môžem spustiť túto funkciu v konzole, a pridá túto triedu, a teraz to vyzerá, odporný, ako sa očakávalo. CSS sa automaticky dostane aplikovať na triedy, ktoré - v prípade, že je CSS pre triedu, automaticky dostane použitá ak zmeníte triedu elementu. Potom sa môžeme len odstrániť pomocou odobratie triedy. Takže ak máte nejaké preddefinované triedy, ako je červená alebo zvýraznená, a potom chcete použiť tie na prvky, nemusíte robiť všetku CSS styling zakaždým. Proste pridáte triedu k elementu, a potom sa automaticky stane - bude automaticky hľadať vhodný pre danú triedu. Môžeme tiež odstrániť veci, takže budem vyberte všetky divy na stránke a odstrániť ich. Čo to bude vyzerať? Bude to vyzerať ako nič, takže je to vlastne nič nezostalo. Moja prezentácia je preč. Môžem obnoviť a priviesť ju späť, našťastie, pretože je to práve beží raz, ale to je príklad odstránenie, ak chcete úplne zničiť prvok mimo stránku. 

Môžete tiež prepísať, a budem chcete vybrať všetky odseky tagy na stránke a ísť v nich a nahradiť čokoľvek textu, ktorý majú v nich len s slovo "skúšky". Ak tak urobíte, budete nahradiť každý odsek na stránke s týmto testovaním. Jo. Všetci sú nahradené testovanie. Tak to je príklad prístupu k textu a prepísanie. Môžete tiež získať informácie, a to je naozaj cool vstupných polí. Ak máte vstupné pole, ktoré ľudia píšete veci, do ľudia píšu veci do neho, Tu vyberieme vstup, nejaký vstupný tag s typom textu. V tomto prípade existuje iba jeden vstupný polia v celej prezentácii, a tak sme si len vybrať ten prvý, a potom zavoláme funkciu val na to. , Ktorá vracia hodnotu, a pre vstupné pole, hodnota je len čo sa stane, že je v nej. Takže ak to urobíme, to jednoducho vracia reťazec veci. A keď hovoríme to znovu po napísaní viacerých vecí, sa premení v ďalšej veci. To je jeden skvelý spôsob, ako získať prístup prvkami vstupného poľa a potom skontrolovať, je táto platná e-mailová adresa, je to platný dátum, napríklad. Môžete len získať veci okamžite, ako ľudia píšu to, a skontrolujte, či je to platné, zašlite ho späť na server, robiť, čo chcete s ňou. A to je, ako pristupovať čo je vo vnútri tých krabíc. 

Môžete tiež upraviť CSS priamo, takže namiesto pridania Trieda, ktorá má niektoré preddefinované vlastnosti, stačí pridať čokoľvek CSS chcete niečo. Takže poďme vybrať telo, ktoré je celé prezentácie, a farba je vlastnosť, ktorá definuje, čo sa farby je text. Ak zmeníme ju na červenú, bude všetok text na stránke rozsvieti červeno. Môžeme urobiť niečo ako modrú farbu pozadia, tam ideme, je to krásne. Môžete si robiť, čo chcete s tým. Pomocou vlastnosti CSS, môžete naozaj zmeniť, ako niečo vyzerá kedykoľvek. Ďalšia vec je účinky. Efekty sú v podstate to isté ako úpravou CSS, ale skutočne poskytujú niektoré ďalšie animáciu na to. Takže namiesto toho len ukazovať, alebo niečo skrýva, alebo zmenou farby, môžete vlastne robiť to oživila. Tu je dokumentácia, ak sa chcete pozrieť na rozsiahlou dokumentáciou pre ňu. Ale ja idem na pokrytie hlavnej. Existujú zobraziť a skryť vlastnosti. Zobraziť / skryť ID skutočne zodpovedá celý tento box takže keď som ju skryť, bude to len tak zmiznúť. A môžem ho znova zobraziť, ak chcem, aby to vrátiť. A je to späť. To však v skutočnosti nezmizne, Nechcel som vlastne odstrániť zo stránky, len som nastaviť vlastnosť CSS viditeľnosti na skryté takže nemôžete vidieť už nie. K dispozícii je tiež kĺzať hore a posuňte nadol, ktoré vám umožní mať tento účinok. Kĺže až zmizne, a potom, čo zmizne môžete posuňte ho smerom nadol, aby sa vrátil. A teraz je to späť. K dispozícii je tiež to fade efekt, ktorý sa - fade ID zodpovedá do tohto boxu. Keby som jej prepadnete von, potom to pomaly zmizne. Môžem tiež slabnúť ju, a že sa vráti. Môžete si tiež urobiť fade k, ktorý je špecifický pre funkciu fade. Môžete mať to fade na konkrétne netransparentnosti, ktoré chcete. Takže ak ste jej prepadnete pomaly 0,5, bude to stať sa polovica viditeľné. Môžem sa ísť do 0,1, a späť na 1, aby bolo plne viditeľné znova. To je len ďalší animácie, ktoré môžete urobiť. 

Tam sú tiež klopné účinky. Takže budem vyberte prepínací ID, ktorý zodpovedá tento box a na tom div môžete volať prepínať, ak je to vidieť, že sa stane neviditeľným, či je to neviditeľné, že bude opäť viditeľné. Tak som to nazval prepínací funkciu dvakrát, prvý z nich bol to isté ako koža, druhá výzva bola rovnaká vec ako show. A tiež môžete urobiť s fade prepínač, ktorý robí to isté, okrem toho, že vlastne miznú. A to isté sa šmýkačkou prepínať. K dispozícii sú zreťazené efekty tiež, čo znamená, že ak vyberiete prvok a stačí zavolať veľa animačných metód na to, ak by ste chceli, aby zatmívání, posuňte nadol, a potom sa schovať a potom slabnúť, bude to robiť im v rade. Tak zmizol, vrátil sa - z nejakého dôvodu sa skryť nestalo. Skúsme to. Jo, tak to vyblednuté a potom vykĺzla. A existuje veľa ďalších. Môžete použiť funkciu animovať vytvoriť si vlastné animácie, čo je pomerne zložitá, ale to vám poskytuje nekonečné rozšíriteľnosť. Môžete si vytvoriť akýkoľvek druh animácie, ktoré chcete. Môžete tiež použiť frontu do fronty viac animácií naraz. Takže ak chcete niečo prelietať stránky, snímka z pravom hornom rohu do ľavého dolného rohu, môžete to urobiť, a len majú veľa akciám, ktoré idú jeden po druhom. 

Ďalšia vec, ktorú budeme hovoriť o udalosti. Udalosti umožňujú - tak ďaleko, že sme práve boli písať veci do konzoly a to je jeden spôsob, ako sa to stalo, ale na skutočné stránky, nebudete mať možnosť robiť veci, ktoré užívateľ zadať do konzoly. Chcete čo sa stane automaticky. Za to, že budete musieť použiť udalosti, ktoré aktivujú na nejaké určité udalosti deje. Môžete skontrolovať dokumentáciu pre všetky podrobnosti. Tak uvidíme. Chceme skryť alebo zobraziť okno ale teraz toto tlačidlo sa nič robiť, pretože som nemal realizovať to ešte. Chystám sa ísť na aktuálnej HTML stránky. Tu je snímka. Je to div na snímke. To má triedu snímky. Tam je text. Teraz, tam je to box a box tlačidlo. Ako by sme vlastne robiť to zmizne? Po prvé, poďme napísať funkciu, ktorá robí box ID zmizne. To je syntax pre funtion, poďme len zavolať, že hideTheBox. Neberie žiadne argumenty, pretože neexistujú žiadne argumenty, ktoré sa majú prijať. Môžeme zvoliť pole ID. Takže pomocou jQuery vyberte si môžeme vybrať medzi poľa ID, a potom už len, aby to zmizne. Urobme to mizne. Keď sme bežali túto funkciu v aktuálnej konzole by sme mohli definovať funkciu, môžeme nazvať hideTheBox, a funguje to. Ale my chceme, aby sa stalo, keď je tlačidlo stlačené skutočnosti. K tomu musíme použiť udalosť. Zviazať udalosti nejaké konkrétne tlačidla alebo nejakej akcie happening, musíme vybrať prvok, ktorý udalosť vyvolať - alebo že spustí udalosť, je mi ľúto. 

Takže v prvom rade, poďme zaškrtnite políčko tlačidlo ID pretože to je tlačidlo, a teraz, keď na to tlačidlo, Chceme vytvoriť animáciu, keď je kliknutie. Takže tam, kliknite funkciu. To umožňuje nadviazať inú funkciu k nemu. Táto funkcia má inú funkciu ako argument môžeme odovzdať funkciu hideTheBox, a pri každom kliknutí na toto tlačidlo, bude táto funkcia automaticky spustiť. Takže to bude fungovať, ak uložíme to, budem aktualizovať, a - jednu sekundu, je mi ľúto. Opraviť to naozaj rýchlo. Dobre. Tam ideme. Takže teraz box sa vytráca, keď kliknite na tlačidlo. Môžeme tiež zmeniť len fadeToggle, zmeniť len skryť alebo zobraziť okno a to bude tiež fungovať taky, ak budeme aktualizovať. Môžeme sa skryť, môžeme tiež ukázať, a že bude pokračovať v práci. Ďalšia vec, ktorú môžeme urobiť, je, že vlastne nemáte definovať túto funkciu hideTheBox než zavoláme tlačidlom vo funkcii. Takže namiesto toho, definovanie funkcie a volania hideTheBox, budeme baviť iba volať, ak táto vec kliknutí. Takže môžeme definovať to anonymne tu, čo je funkcia, ktorá má JavaScript. Môžete definovať funkciu, normálne, povedali by sme, že funkcia hideTheBox s argumentmi, ale môžeme len povedať, funkcia bez argumentov, spustiť zložená zátvorka definovať funkciu, uzavrieť, že zloženú zátvorku, a potom už len definovať funkciu tu v prvej zátvorke a posledná zátvorka , Ktoré zodpovedajú argumenty click funkcie. Takže sme okolo v tejto funkcii môžeme skopírovať tento riadok kódu tu, a ktorý bude robiť presne to isté. A teraz nemáme túto funkciu náhodný fadeTheBox ktorá je sedieť bez zjavného dôvodu. Táto funkcia bola definovaná anonymne, to nemá meno. To sa vykoná iba, keď kliknete na tlačidlo Kváder. Takže osviežujúci ešte raz, ešte raz, a môžete vidieť, že to ešte funguje. A to je, ako vytvárať udalosti. 

Existuje mnoho rôznych udalostí, ktoré môžeme použiť. Chystám sa prepnúť späť na pomocou konzoly len ukázať, ako tieto práce. ID je pre každú z nich zodpovedajú každej krabici. Takže toto políčko, je kliknúť ID, toto je kľúč ID, a toto je myš ID. Ešte jedna vec je, že je táto akcia funkcia, skôr než písať to zakaždým, Vlastne som išiel dopredu a definoval akčný funkciu sem. To robí to isté ako hideTheBox funkciu. To dostane toto políčko a buď sa stráca to vybledne alebo sa dovnútra A to je dôvod, prečo sme schopní ho tu. Takže ak klikneme na tomto cvaknutie ID, chceme, aby okno zmizne a znova. Je to to isté ako tlačidlo, ktoré sme mali v poslednom snímke. Teraz po hovoríme, že môžeme kliknite na tento a okno zmizne, kliknite na ňu znova a znova sa objaví okno. Je to celkom jednoduché. Dvojklikom robí to isté, okrem toho vyžaduje dvojklik. Takže ak na neho kliknete raz a kliknite na neho opäť sa nič nestane, ale ak dvakrát kliknete rýchlo, bude to zmizne. Pokiaľ kliknete dvojklikom znova, bude to vrátiť. Tak to je celkom jednoduché. Vstup z klávesnice je trochu divné, ja si nemyslím, že to skutočne funguje v tomto príklade pretože kľúč dolu, kľúč a stlačenie tlačidla a ďalšie kľúčové podujatia aktivovať bez ohľadu na to, čo prvok, ktorý viazať. Napríklad, aj keď som viazaný tlačidla dole k telu, alebo niečo úplne iné, potom by to ešte aktivovať bez ohľadu na to - nie je to špecifické. Nemám sa kliknutím na toto pole a stlačte kláves, aby sa niečo zmizne. By mohla byť aktivovaná bez ohľadu na to, čo element som práve nachádzate Takže tieto nie sú v skutočnosti pracujú v tomto prípade pretože neuznáva ma vstupu vstup do div vstup z klávesnice. 

Ale keď sa pozriete na akcie myši, Prvý z nich je pohybovať, a to môže urobiť niečo z toho pomocou CSS. Ak používate CSS, môžete ju vytvoriť tak, že ak sa vznášajú nad niečím, potom jeho zmeny štýlu. Ale s použitím jQuery môžete zmeniť štýly iných vecí tiež. Tak, napríklad, budeme nazývať opatrenia, ak sa vznášať nad týmto div. To znamená, že ak budeme vznášať sa nad ňu, a potom okno zmizne. Ak sa vzďaľujete, bude okno znovu objaví. Nazveme ak tento a vznášať sa nad ním, okno sa zmiznúť, a akonáhle sa vzdiali, vráti sa späť. Nazveme ak túto funkciu hover na myš ID, čo zodpovedá tento box a potom keď sme vznášať sa nad poľami, potom sa okno skutočne zmizne - je to byť funky hneď, ale - ak sa vzďaľujete, bude to znova. Práve teraz je to obrátene z nejakého dôvodu. Myš zadať a funkcie pohybu myši sú trochu podobné, ale mierne odlišné. Myš zadať iba sa aktivuje, ak kurzor myši vstúpi na pole, podľa očakávania. Takže ak budete pohybovať do nej, bude to zmizne. Ale nebude to objaví znovu, keď sa vzďaľujete, budete musieť vrátiť na neho pre to, aby sa vrátil. K dispozícii je tiež funkcia pohybu myši, ktorý bude aktivovať keď myš je prítomná v krabici. Takže to bude len pokračovať ďalej, blednutiu a von. A je to vlastne prihlásenie - Vyzerá to, že je to len vyblednutiu dovnútra a von, ale je to vlastne prihlásenie oveľa viac akcie, ako to, takže pri odchode to bude len ďalej, pretože prihlásený ako tisíce z nich. Možno nie tisíc. Možno päť. Sa prihlási viac než to. Ide o to, všetky akcie myši, existuje veľa z nich. Môžete si prečítať na tie ostatné, ale všetky sú mierne odlišné, a môžete si vybrať podľa toho, čo ten, ktorý potrebujete podľa toho, čo pre konkrétny účel sa snažíte robiť. 

Ďalšia vec, ktorú budem hovoriť, je AJAX. AJAX, ja viem, že sa netýkala JavaScript toľko hĺbky v tomto roku, tak som len tak hovoriť o AJAX všeobecne za minútu. AJAX je skratka pre Asynchronous JavaScript and XML. Je to v podstate, napríklad, keď ste na Facebooku a tlačí vás oznámenia, to preto, že AJAX je spustená vo Vašom webovom prehliadači. Každých pár sekúnd váš webový prehliadač je vlastne ísť k serverom Facebook je, žiadať ich, máte niečo nové pre mňa, a potom sa vráti k vám. To vám umožní odosielať požiadavky na server bez toho aby ste museli načítanie stránky. Tak normálne, ak ste len pomocou PHP a databázy, Musíte aktualizovať stránku, ako môžete získať nové informácie zo servera. Ale pomocou AJAX, môžete vytiahnuť z tohto neustále nové informácie, alebo vytiahnuť na to, keď kliknete na tlačidlo, alebo niečo podobné. Tak to nám umožňuje poslať žiadosť bez prekládky stránku a môžeme použiť buď GET alebo POST. 

GET požiadaviek, napríklad ak vám Google.com in a to q = test. To im dotazu test. A to je požiadavka GET, pretože je to odovzdaním týchto parametrov do samotnej URL. Požiadavka POST je ako keby ste posielal poštou. Je to ako dať do listu a zaslať ho na ne, ale oni nie sú v skutočnosti vidieť obsah. Oni nie sú viditeľné v URL. Nemôžete priamo zadajte ho, musíte ho poslať skoro tajne. Je to v príspevku. Ale s použitím jQuery, môžete tak urobiť GET a POST požiadavky omnoho ľahšie, než by ste normálne mohli používať len obyčajný JavaScript. Otázka možno pomocou API GET požiadavky, a môžete tiež skontrolovať prihlasovacie údaje. Na ďalšej stránke, som vytvoril toto, ktorý sa pýta: "Čo je na obed?" pomocou Harvard potravín API, takže sa poďme vytiahnuť, že až. To je len príklad toho, ako môžete použiť jQuery robiť GET požiadavku na API a získať informácie späť z neho. Takže chceme, aby sa zobrazila ponuka pre dnešný deň, a my chceme vidieť, čo je na obed. Tu je URL vytvoriť požiadavku GET v jQuery. Používate $. Dostať funkciu. Prvý parameter je URL, takže presne to, čo ste dotazovanie. Potom ďalší argument je funkcia, ktorá sa spúšťa pri GET je kompletný. Takže si odoslať nejaký požiadavku na server, počkajte, až sa to vráti. Keď to príde späť, budete mať nejakú akciu s dátami, ktorá je späť zo servera. Poďme ďalej a kódovanie to rovnako. Nechcel som to kódovať buď zámerne. Tu je TODO. Po prvé, poďme použiť udalosti viazanie takže keď je toto tlačidlo stlačené, pošleme preč GET požiadavku. A keď sa žiadostí o priznanie s niektorými údajmi, budeme písať do tohto identifikačným jedlo info div. Po prvé, poďme vybrať jedlo tlačidlo ID. Keď je klepnutie, chceme, aby to niečo urobiť. Povedzme, aby to anonymný fuction, ako predtým. Môžete zabaliť tie zložené zátvorky, a keď je toto tlačidlo stlačené, chceme poslať GET požiadavku skontrolovať, čo je na obed. K tomu môžeme len písať v $. Dostať. Jedná sa o jQuery funkcie, pomocou dolára. To trvá niekoľko argumentov. Prvý z nich je URL, druhá je funkcia spätného volania, funkcia, ktorá sa nazýva keď taká požiadavka skutočne vráti. Povedzme postaviť URL ako prvý. Môžeme si ju z API, ktoré Dávid napísal hore. Chystáte sa tu môžeme vidieť, že je to food.cs50.net/api/1.3/menus, a potom stačí prejsť v názvoch parametrov, ktoré by ste chceli. Takže parameter 1 je hodnota 1. Vyzerá to, že štandardné dáta, dátum, predvolená hodnota je dnes ak nezadáte nič, a konečný dátum tiež východiskových hodnôt do dneška, ak nezadáte nič. To je to, čo chceme. Chceme len získať informácie pre dnešok. 

Chceme formát byť v JSON. To je jednoducho ľubovoľná, môžete použiť ľubovoľný formulár, ktorý chcete. Môžete použiť CSV, ale je JSON objekt JavaScript notácie. Je to veľmi jednoduché pre JavaScript, aby pochopili, čo to znamená, a môžeme ju vytlačiť ľahšie týmto spôsobom. Takže poďme sa o to požiadajú vo formáte JSON, a poďme žiadosť obed. Takže jedlo = obed. Len spísať túto adresu URL, ideme späť. K dispozícii je menu. Prvý parameter je výstup = JSON pretože to je to, čo chceme, a oddeľte parametre sa slovami "a". Druhý parameter je - Nespomínam si. Meal. A chceme jedlo = obed. Taktiež si môžete vyskúšať zadaním URL do prehliadača a ísť na to. To vám dá nejaký výstup. Je to len banda vecí, ktoré je k obedu. Je to v tejto škaredé formáte. Chceme vytlačiť na našej stránke v lepšom formáte. Takže URL je správne, teraz stačí napísať funkciu zavolať späť, keď je žiadosť úspešná. Táto funkcia bude skutočne prijať argument. Bude údaje. Dát je to, čo sa vráti z GET po GET je hotovo. Môžeme robiť zložené zátvorky, v tú píšeme anonymné funkcie že vykonáva pomocou týchto dát, keď dostaneme informácie späť. Takže údaje, keď sme zadali túto adresu URL, to je to, čo sa deje údaje vyzerať. Bude to byť tak obrovský reťazec. Ale dobrá vec je, že JavaScript je analyzovať pomocou JSON.parse funkcie. Takže poďme vytvoriť novú premennú s názvom rozobrať údaje. A rozobrať dát je pole objektov. Každý objekt obsahuje informácie ako - no, poďme sa pozrieť. To má dátum, jedlo, kategóriu, recept, všetko to ďalšie veci. Takže povedzme vytlačiť názov pre každú z nich. Poďme iterovat cez celý rad vecí, ktoré sa vrátime z nej, a len vytlačiť každú z nich - vytlačiť názov každého z nich. Toto je pre slučku. 

JavaScript musí tejto užitočné syntax, kde si môžete vytvoriť premenné a slučky cez polia, a var i len iterátor, takže namiesto toho, aby museli robiť var i = 0, som bol menší ako dĺžka, i + +, môžete jednoducho var aj v analyzovaných dát. V tomto príklade bude analyzované dáta (i) zodpovedá aktuálnej prvok z poľa, skutočný objekt. A chceme, aby sa meno z nej. Takže poďme jednoducho meno. A posledná vec je, že budeme mať nejaký jQuery znova. Vlastne pridať ho do div, to jedlo info div, že je v súčasnej dobe prázdny. Takže poďme vybrať to. Budeme používať jQuery a vyberte jedlo info div id, alebo sa najesť informácie ID, ospravedlňujem sa. Chceme k tomu pripojiť. Ak sme urobili skúšku, napríklad, by to len prepísať to zakaždým. Takže sme si len doplniť to. Aktuálne prvok v poli, dostaneme meno z toho, a budeme pripojiť ju ku koncu číslo jedla info div. A potom už len, aby to vyzeralo čistejšie, budeme tiež pridať zalomenie riadku, takže to nie je všetko na jednom riadku. Takže ak všetko pôjde dobre, že by to bolo dobré - Po prvé, pri každom kliknutí na toto tlačidlo, to bude odoslať požiadavku GET na túto adresu URL. Ak dáta vráti z nej, bude to rozoberie ho, otočte ho do formátu JSON, slučky celé pole predstavuje, že údaje, a pripojiť názov a zalomenie riadku na každom riadku v tomto ID jedla info, ktorá bola predtým prázdne. Takže návrat k tejto stránke, budeme aktualizovať, kliknite na tlačidlo, zistiť - to nefunguje. To je nešťastné. A to je miesto, kde ladenie vypovedaciu Index.html, riadok 1. To je zaujímavé. Dobre, dobre, skôr než tráviť čas robiť to, ja som jednoducho ísť vytiahnuť vykonanú súbor, ktorý mám, ktorý je dokončený verzii. Nie som si istý, aký je rozdiel, ale môžeme len otvoriť toto hore miesto. A ideme na AJAX, a to by malo fungovať správne. To je to, čo bolo dnes na obed, v žiadnom konkrétnom poradí, s citáciami okolo nej, takže to nie je najkrajší. Ale, samozrejme, ak ste to robili pre konečný projekt, by ste, aby to vyzeralo lepšie. Ale to je len jednoduchý príklad, ako to urobiť GET požiadavku. A ak sa pozrieme na skutočný kód hádam, som si istý, je to stále skoro rovnaké. Zabudol som ho previesť na reťazec, to je ono. Nie, je to stále nefunguje. Bez ohľadu na to, tu je skutočné vyplnenie kódu za to, čo by to malo vyzerať, a to robí to isté ako to, čo som práve zaviedol. Keď kliknete na tlačidlo, používa GET JSON automaticky analyzovať dáta. Trvá dáta späť z neho a prechádza celým radom a vytlačí sa - bez ohľadu na to dnes na obed, meno toho, a pripojí zalomenie riadku na konci každého riadku. To je, ako použiť funkciu GET. 

Môžete tiež použiť POST, ktoré som nemal čas spísať príklad, ale môžeme pozrieť na dokumentáciu. Keď sa pozriete na jquery.post, môžete vidieť, že je to skoro to isté. Máte URL, ale namiesto odovzdávanie parametrov pomocou - len ich uvádzanie do reťazca pre samotné URL, musíte prejsť v tejto premennej dáta , Ktorý je v podstate poľa, slovník, ktorý mapuje parametre na hodnoty. Miniete, že, a že pošle im pomocou POST. A až budete mať, potom môžete mať úspech funkciu ktorý vykonáva keď dáta vráti. Inak je to presne to isté. Takže pomocou POST budete chcieť použiť POST, napríklad ak máte vstupný formulár dať ľuďom vstupné heslá do neho, a poslať tie heslá vypnúť k back-end skriptu pre kontrolu v databáze, či užívateľ je platný, alebo nie. Môžete to urobiť všetko pomocou jQuery miesto museli obnovovať stránku vôbec. To je, ako som implementoval v blogu, ktorý som vám ukázal skôr. Ak pôjdeme do koncovej portálu odhlásiť odhlásiť sa Odhlásiť nefunguje. No, dovoľte mi, aby som ho otvorte v novom okne. Tu je heslo, a chcel som písať v niečom náhodné. To nefunguje, ale môžete vidieť, že sme nemali skutočne obnoviť stránku vôbec. Kód, ak chcete, aby sa na to pozrieť, všetko je k dispozícii tu. Takže kódu som napísal vlani niekedy. Ako môžete vidieť tu, budeme odoslanie POST požiadavke. Mám súbor s názvom login.php na zadnom konci ktorý skontroluje, či je heslo platné. Parametre míňame v sú heslá, mapované na vstup, ktorý je v tomto vstupnom poli v súčasnej dobe. A keď sa dáta vráti, môžeme skontrolovať. Ak sú údaje nepravdivé, potom hovoríme, nesprávne heslo, posuňte ho nadol, a len aby to zmizne po tom. V opačnom prípade si načítať stránku Admin. A to všetko bolo vykonané pomocou JSON. V tomto mnohých riadkov kódu, stačí odovzdať dáta na zadnom konci, skontrolovať, či je to správne, skontrolujte, či ste prihlásení správne, a dokonca na neho reagovať, presmerovanie osobu na správnu stránku alebo nie nechať ich sa prihlásiť a hovoriť im, že majú nesprávne heslo. Tak to je príklad toho, ako by ste mohli použiť jQuery POST poslať požiadavku POST do back-end, overenie, či niekto prihlásený správne. 

Dobre, takže to všetky príklady som mal, a všetky veci som chcel pokryť. To sú hlavné veci, ktoré jQuery umožňuje robiť: vyberte prvky, upravovať ich pomocou DOM manipulácie, môžete pridať efekty, aktivujte veci na určité udalosti, a tiež robiť AJAX požiadavky veľmi hladko a ľahko. Takže ďakujem za účasť alebo sledovanie, a ak budete mať nejaké otázky, dajte mi vedieť. Jo? [Študent] Vtedy, keď si sa objavil, museli ste JSON po požiadavke POST v úvodzovkách, a ja som len premýšľal, čo to urobil. >> Jo, vidím. Otázkou bolo, že v tomto príklade som ukázal, tam bolo slovo JSON v úvodzovkách okolo - Budem znovu vyberte mierku - okolo POST funkcie. Ja som len ťahom to ukázať. Tak tu to je požiadavka POST, a tam je to JSON v úvodzovkách. To len definuje, čo čakáme bol výstup. Takže keď sme sa prejsť do formátu JSON a očakávaný dátový typ, nie je to podmienkou, ale opomenieme ak ju, potom sa dáta budú automaticky analyzovať ako JSON. Takže nemáme volať parsovanie JSON funkciu na to, to bude len tak automaticky. A ak sa pozriete na dokumentáciu POST, je to dátový typ premennej, typ očakávaných dát z servera. Implicitne je to inteligentný odhadu, že môže byť zle, takže si môžete nechať prázdne, ale je to len typ dát v kódovaní, ktoré používate, či už je to JSON alebo XML alebo niečo iné. 

Nejaké ďalšie otázky? Dobrá. Ak máte akékoľvek ďalšie otázky, neváhajte a napíšte mi na vshekhawat@college.harvard.edu, a diapozitívy a kód by mal byť k dispozícii on-line čoskoro. Veľa šťastia s vaším záverečných prác, dúfam, že budete používať jQuery. [CS50.TV]