>> Pořádku.
Takže JavaScript.
Téměř každý v této místnosti Pravděpodobně má určitý stupeň
z pohodlí s ní, zda to bylo při cestě zpět na SC50
nebo to bylo osobní webové projekty nebo dokonce
pokud jste trochu to s letos v PHP základní projekt,
ale pro většinu díl, mnozí z vás,
i když máte nějaké pohodlí
s JavaScript možná nebyla přijata
za samozřejmost, jak jazykové funguje a co se děje
na pod kapotou a co budeme snažit
k tomu je dnes slupkou zpět některé technické vrstev
co JavaScript je, jak se liší od jazyka
jako PHP, jak může být použít nejen na straně klienta
ale také na straně serveru a poté se zaměřit velmi specificky
v tomto rámci, všimnete si ne JS což je v podstatě doba chodu,
program, se kterým jste může spustit kód JavaScript,
na straně serveru a je to stále stále více populární druh
ze na stejném postavení této dny pravděpodobně Ruby a PHP
a Python a uvidíte
že má některé dost výkonné funkce podle způsobu některých
zastavěného-in jazyce konstrukty.
Ale nejprve, některé jednoduché věci jen proto, aby vám připomněl,
o tom, jak tento jazyk funguje a Máte-li potíže vidět jakýkoli
tohoto, jen křičet a my se přizpůsobit.
Tak, jeden jako v PHP je tu žádný pojem hlavní funkce,
stačí začít psát kód
a můžete NĚ interpretovat ji shora dolů.
V souvislosti prohlížeče
nebo na straně serveru něco uvidíme několik příkladů
v trochu.
Podmínky, syntakticky ekvivalent PHP, stejně jako C,
C + + a některé jiné jazyky tak jen proto, aby vám pocit
o tom, jak jsme to mohli uspořádat,
tam je jen kanonické stav.
Booleovské výrazy, přesně stejný syntakticky, jak jste viděli
v týchž další jazyky, a to jak pro ORing
a pro ukončení věci dohromady.
JavaScript musí spínače, podobně jako PHP a ostatních úkolů
a nejste omezeni, jako v C na integrálních primitiv
jako znaky a ints může skutečně dělat i jiné typy hodnot.
Loops. Tak, to je přesně stejné
a asi tucet jazyků, while, dělat, zatímco smyčky
a pak se tento trik zde.
Takže, je to druh známý jako rychlý výčet
a je to velmi chytrý způsob, z, stejně jako v PHP dělat
pro každou FU jako bar můžete podobně,
v objektu JavaScript, kde objekt je název
z proměnné tady, řekněme, var i v objektu a na každé iteraci
této smyčky, i je bude jeden
klíčů od objektu.
Takže, pokud máte objekt student, a student má ID
a název a dům, iterativně i bude
hodnoty ID a jména a dům a můžete k nim index
do objektu, jako by to pole pomocí hranatou závorku
notace získat hodnotu klíče ID nebo název
nebo dům, a tak dále.
A na rozdíl od běžné předpoklad, JavaScript objekty,
vlastnosti nejsou nutně zaručeno, že
ve stejném pořadí, to je také pravda, PHP, takže nenesou
že věci zůstanou ve stejném pořadí
že jste dal ty klíče dvojice hodnot do objektu.
Jak na poli?
Tam je několik způsobů, jak to napsat syntakticky
ale to je pravděpodobně nejvíce obyčejný nyní jen pomocí náměstí
držák notace.
Tak, to je proměnná volání čísla, které obsahují řadu
ze tam šest čísel, Zde je jednoduchý řetězec
a všimněte si, co je přítomen z těchto příkladů,
Co je JavaScript zřejmě chybí.
Jo. Takže, není pojem z psaní, rozhodně ne
V této souvislosti je tady, ale to je opravdu řetězec.
Takže, JavaScript musí typů a že byl opravdu pole
, který je sám o sobě typ a každý z prvků
se tím, že pole bylo typu číslo jako JavaScript jim říká.
Takže, je to volně napsaný jazyk a uvidíme
že JavaScript jako PHP má operátor identity
a jiné mechanismy pro vlastně kontrola na typ
některé proměnné je a to jak pro kontrolu chyb
a pro další aplikace.
A tady je ukázka objekt obsahující jen ID a název.
A teď si všimněte, že jsme pomocí složená závorka notaci,
odsazení a bílá prostor je trochu smysl
a to prohlašuje, proměnná, jejíž jméno je Rob
a jehož ID je 1 a Typ Datum je zde naše číslo
a řetězec, resp.
A pak je to něco mírně odlišné
pokud jste někdy něco s Ajax v těchto dnech?
Pravděpodobně jste použili předmět jako je tento
ale to, co stojí za zmínku tady?
Co je syntakticky vůbec tak odlišné, jen pár
věcí mezi příkladu který je sice menší,
a to větší příklad.
Takže, první Laicky Termín, co je to?
Jaký je typ Zaměstnanci byste řekli?
OK, to je pole, je to řada z čeho?
>> Objekty.
>> OK, to je pole objektů.
A teď, zaměřit se pouze na jeden - některý z těchto objektů,
to, co je mezi to a to?
>> Klíče jsou řetězce.
>> Jo. Tak, klíče jsou řetězce,
a klíče jsou ve skutečnosti řetězce v obou případech
a to je druh idiotský
podle mého názoru historickém designu rozhodnutí, když používáte
JSON, JavaScript Object Notation,
, který je v podstatě přenosový formát
pro odesílání dat obvykle v síti
mezi klientem a serverem, musíte si uvědomit,
, že je to ve skutečnosti platný JSON, a toto je jeden
z těchto FYIs, pokud jste někdy bouchnout hlavou proti zdi
po dobu několika minut bez dobrého důvod, že to není platný JSON
proto, že jsou klíče Není vlastně citoval.
JSON hloupě vyžaduje, aby klíče být uvedeny nejen,
ale že je dvojnásobně citován, jednoduché uvozovky nestačí.
Tak stupidní věc a více zábavné skutečnosti,
pro dnešní účely, ale tento taky by bylo platné JavaScript
je to prostě není - hovořit je ne pravdivý.
Dobrá.
Takže, uvidíme spoustu víc.
Dobrá.
Takže, je to JavaScript syntakticky asi dost
obeznámeni, někdo z vás, kteří mají nikdy použít JavaScript, před
není to obrovský skok od PHP nebo téměř jakýkoli procedurální jazyk
že jste mohli použít.
Takže, dnes se budeme soustředit na je zajímavé aspekty
JavaScript zejména v souvislosti s no JS
, ale ne výhradně, protože až do teď jste pravděpodobně,
pokud jste použili Javascript, používá ji uvnitř prohlížeči.
Takže ne JS je prostředí pak trochu se děje
nám umožní přístup k JavaScript kód klienta -
na straně serveru, ale první, pojďme se podívat
na něco, co je trochu více na straně klienta.
Takže jsem šel dovnitř a je to spojeny na webových stránkách kurzy,
pokud chcete hrát spolu, jsou tam dva podadresáře
v dnešní PSČ volaného zdroj šrouby zip na webových stránkách
a to jsou jen Několik příkladů vzpomínání
věcí, které jste mohli vidět před a jsem trochu postavený jim
až od nejjednodušších až mírně složitější vtipálek
některé z funkcí JavaScript.
Takže, pojďme do toho a vzít podívejte se například na to.
Takže, bohužel tag blink byl zabil před několika lety
jako způsob, jak se dostali hezčí a hezčí
a tag blink byl doslova otevřený držák blikat v blízkosti držáku
a tak nějak ne již s námi.
Ale můžeme ještě vzkřísit tato myšlenka tagu by jen tak
přemýšlení o tom logicky, jak se vám jít
o tom, něco jako Tento blikat intuitivně?
Za předpokladu, že víte málo trochu JavaScriptu a CSS, nebo
v tomto bodě, je to OK, pokud nechcete.
>> Nastavte si oddechový čas a schovat pak poté, co jsem si označit ji
ven a ukázat ji znovu.
>> Jo, dokonalé.
Toto je druh programování 101,
jak byste dosáhnout vizuální efekt takhle?
No, tak nějak muset něco ukázat
a pak se skrýt něco, show, něco, skrýt něco
a jako Jonathan navrhuje používat nějaký time-outu,
nějaký plán, co můžete udělat to opakovaně, aniž byste museli
používat smyčku nebo něco takového.
Takže, nech mě jít do blink-0.html
a dovolte mi, abych zmenšit font trochu
tak, že více to hodí.
A pojďme se podívat na to, co se tady děje.
Takže, v první řadě, Všimněte si, že tělo
na této stránce je super jednoduché, uvnitř těla
stránky je jen div.
Jsem svévolně uveden ID pozdravu
a to by mohlo být něco, tak dlouho, jak je to jedinečné
a pak jsem jen některé jednoduchý text hello world.
Takže, když jsem se posunout nahoru, Všimněte si nějaký načechraný styl.
Takže říkám, ostrý pozdrav, který, jak víte,
CSS prostě znamená jednoznačně identifikaci prvku
s myšlenkou, pozdrav,
Velikost písma se děje libovolně je to, marže a zarovnání textu.
Takže, nezajímavé estetické detaily
zhruba střed textu.
Takže, zajímavá část je ve skriptu tag sem nahoru
které jsem náhodou dal dovnitř hlavy stránky.
Takže, Budeme - můžete to udělat to v mnoha různými způsoby
a uvidíme několik iterace tohoto stejného programu
ale začněme od začátku.
Takže, já jsem deklaroval Funkce tzv. blikání
a zřejmě používá tento vestavěný DOM metody zvané
getElementById který je možná jeden z více silných metod
že se dostanete ven z krabice se hledá JavaScript pro
"Pozdrav" nemusí být dvojité uvozovky, jako by to bylo
v HTML je buď je v pořádku tak dlouho,
jak jste stylisticky konzistentní v těchto dnech Troufám si tvrdit,
mnoho lidí používá Javu, jednoduché uvozovky v JavaScriptu,
dvojité uvozovky v HTML, ale to nezáleží
tak dlouho, jak jste v souladu.
Takže, zde, pokud nejste obeznámeni, můžete skutečně získat přístup
s JavaScript CSS reality na prvky.
Takže, všimněte si, že jsem prohlásil proměnnou s názvem div
a uložena uvnitř z této proměnné,
odkaz na cokoliv že DOM element je.
Takže, pokud si myslíte, že zpět do CS50 nebo každá třída, ve kterém jste si mysleli,
o stromových struktur a DOM, Document Object Model,
je to jen odkaz k uzlu ve stromu,
, který představuje tuto stránku
a je-li div.style.visibility vlastnost rovná, rovná, rovná,
skrytý, pak jsem jen chcete můžete jej
jako Jonathan navrhl jinak chci
přepnete ji do skryté.
Nyní, jak je na straně, proč triple rovná tam?
Nebo co je to proti dvojité rovná?
>> Strict ekvivalent.
>> Omlouvám se.
>> Strict ekvivalent.
Takže, je to na operátorům identity
kde by jste kontrolu není pouze hodnota proměnné
jako rovný, rovné smyslu ale také typ ní.
Takže, i když nemáme uvedeno daleko všechna data
typy pro veškeré proměnné v tento nebo některý z diapozitivů,
je typ související se, že řetězec skryté
s touto hodnotou, skryté a To je samozřejmě řetězce.
Takže, v tomto případě, je nezáleží
protože neexistuje žádný způsob, že budeme spojovat řetězec
o "skryté" s jinou hodnotu
ale to je často dobrý zvyk Řekl bych, že dostat
pomocí stejné, rovné,
znaménko rovná se zpravidla dobrá věc.
To bude váš kód více robustní a to jak v PHP, ale
a v JavaScriptu protože budete spouštět
do občas rohových případech kde hodnota může být nulová
že jste kontrolu a nula může být sjednocen s false
nebo by mohly být, a jak v PHP,
Javascript taky může mít více nepravdivě hodnoty, kde nulou
a false a null a undefined to vše může vyřešit implicitně
na hodnotu false.
Ale pokud jste opravdu chtějí pro kontrolu určité hodnoty
jako nula, číslo, nebo false Boolean, pak máte
použít tento operátor identity.
Takže, může se stát, aby se v každém případě, i když zde,
je to trochu smysl protože víme, že jsme kontrolu
na hodnotu řetězce a je to Nebude to něco jiného.
Takže, tady je to kouzlo a pak, když jsem přejděte na tomto řádku tady,
zřejmě, postavený do objektu window
a to je rys prohlížeče můžete získat přístup
to velmi globální objekt nazvaný Okno,
uvnitř, který je některé funkce,
pokud kus, který je nastaven interval
a to se zřejmě jaké argumenty?
Jo.
>> Funkce volání a čas.
>> Dobrá. Takže, funkce hovoru a doba
a tak zejména odkaz na funkci,
ukazatel na funkci v tom smyslu,
a to je funkce že se děje
být vykonán při každém počtu milisekund a v tomto případě,
je to jednou za 500 milisekund.
Takže, je to způsob, jak přimět účinně a nekonečná smyčka
bez použití iterace, ale místo toho říkat JavaScript
k motoru uvnitř prohlížeče
dělat to každý 500 milisekund nebo se blíží
500 milisekund, jak to může,
Ukazuje se, že pod kapotou,
tam je to, co se nazývá událost smyčka a vrátíme se k tomu
v rámci uzlu JS že jen neustále druh
sedět tam, spinning, čekání na práci je třeba udělat
a jakmile to uvědomit,
500 milisekund uběhlo blink budou se opět nazývá
a znovu a znovu je podél jakékoliv jiné práce
, že musí stihnout.
Takže, co můžeme zlepšit tady?
No, dovolte mi otevřít up blink-1.html
a prokázat blink-1.html
jako esteticky zcela shodné.
Takže to, co bychom mohli zlepšit tady?
Dobře si všimněte, že bylo docela k ničemu
definovat funkce nazývá Blink, protože kolik
v kolika místech Udělal jsem volání funkce blikání?
>> Jen jednou.
>> Tak, jeden.
Takže to nebylo špatné, v Skutečnost, že je to asi dost
rovně vpřed.
I definované funkci blikat, jsem Volání funkce blikat způsobem
tohoto parametru, ale technicky,
nebyl důvod, proč to a společné paradigma
v JavaScriptu, je skutečně využívat lambda funkcí
jak jste si možná pamatujete z 51 nebo anonymní funkce
kde pokud nepotřebujete název pro funkci,
pokud jste jen volat to jistě v jednom místě,
proč se obtěžovat nepřehledná svůj kód, nepřehledná programátoři mysl
a vaše jméno prostoru Opravdu se symboly
že nemáte opravdu je třeba se starat o.
A tak, v této verzi zde,
Všimněte si, že volám Window.setInterval přímo
na samém vrcholu mého script tag pak jsem kolem
v bezejmenné funkci že trvá žádné argumenty
a to je naprosto v pořádku a pak tělo
této funkce je, že se objeví totožný s tím, co bylo před
a pouze syntaktická Rozdíl je nyní
se zde vedle 500..
Zavírám tělo funkce
a pak říkám spustit, že předchozí kód,
každých 500 milisekund.
Takže, velmi marginální změny
ale krok k tomu, co je pravděpodobně více elegantní
provádění tohoto.
Takže, pojďme se tenhle krok dále, kdybych teď jít
v mžiku dvou, budete si muset vybrat viz společnou knihovnu,
účinek, který se děje
být zcela bezvýznamné esteticky, ale pokud půjdeme
do verze dva tady, oznámení , že v horní části hlavy,
Já jsem součástí nejnovější verzi jQuery.
A pak, tady dole, Jen jsem vyčistit
do kódu trochu, je to nebude sranda svět
pokračovat v používání nativní DOM funkce
a třídění surového JavaScript.
Ve skutečnosti, JQuery, jak můžete vím, se stala tak populární,
že většina lidí prostě v rozporu s jQuery JavaScript
ale opravdu jen večeře užitečná knihovna napsaná
kolegou jménem John Resig a od dalších
které mají právě dělá hodně nudné věci
v JavaScriptu jednodušší a stručnější.
Takže, v tomto případě zde to, co se děje?
Takže, mám tento vzhled znak dolaru, o tom více
za chvíli, a pak to je volič CSS.
Takže, je to velmi podobné ducha toho, co jsem dělal předtím,
ale tentokrát jsem doslova pomocí tagu hash
uvést unikátní Identifikátor tzv. pozdrav
a pak zřejmě . Css je metoda postavena
do jakýkoliv objekt, je, že jsem právě vytvořili
a já jsem kontrolu hodnoty průhledové klíče.
A v případě, že hodnota tohoto klíče rovná, rovná, rovná, skrytý,
pak jdu na to přepínat a Chystám se přepínat to tentokrát
za použití stejné metody který zřejmě je přetížen
v tom smyslu, že má dva různé podpisy,
jeden s jedním argumentem a jedna se dvěma argumenty,
druhý z nich je setr,
bývalý, který je kariérista, abych tak řekl.
A pokud zvědaví, a pokud by nikdy se podíval na to,
pokud půjdeme do jquery.css snad top hit je opravdu to
a můžete vidět více formální vysvětlení
že stačí použít to, . Css se jménem nemovitostí
a pak setr je dot CSS
s názvem nemovitostí a hodnoty.
Takže, okrajově čistší, ale Všimněte si druh vzoru zde
s každou iteraci tohoto kodexu,
jsme trochu dělat to víc a víc a víc
a tam říkají, lepší design
protože jsme pomocí někoho jiný kód, který je eliminován
některé složitosti.
Tak, teď pojďme udělat to ještě jednodušší.
A ve skutečnosti, když jsem odstranit všechny citáty uvidíte, všechny
komentář uvidíte, jak jednoduché to dostal.
Jeden rozdíl zde samozřejmě je
že jsem pomocí přepínat metoda, která přichází také vestavěný
do jQuery a to je právě
proto, že někdo jiný napsal kód
že vlastně přepíná Nastavení viditelnosti
jakéhokoliv elementu modelu DOM že ji poslat.
Takže lepší a lepší.
A tak, to je vzor,
i když je to večeře jednoduchý příklad a třídění
z hloupé čistého účinku, který je blikající kus textu,
je to ten druh myšlení proces, který byste měli myslet -
myslet ne nutně první
pasivní psaní něco pro nadcházející projekt
ale jistě, jak iterovat s poradcem nebo se mnou
a vaše schůzky týmu, nebo si jen zkontrolovat své spoluhráče kód
o zpřísnění věci, ne?
Koneckonců, jsou to méně -
a méně řádků kódu budete nakonec mít
v teorii tím méně chyb je pravděpodobné, že budou zvát
proto, že jsou jednoduše méně kód zkazit se.
Dobrá.
Takže, pár stánek s jídlem.
Lambda funkce, anonymní funkce,
z nichž mnohé si neviděli
a pak také jen utahování co se s knihovnou
jako jQuery v této konkrétní případ.
Dobrá.
Jakékoliv dotazy?
Pojďme udělat jednu další na straně klienta aspektem,
ve formě nulové máme Tento čistý efekt.
Super jednoduchý formulář a zřejmě když se pokusím klikněte zaregistrovat zde,
zpočátku mi to říká, že jste registrován, dobře, opravdu ne.
No, proč to je?
No, tady je form-0.html velmi málo kódu,
bez JavaScript vůbec a to je zcela falešný druh
formy, protože akce hodnota je registered.html
což znamená, že bez ohledu na to, jaké Píšu do tohoto formuláře,
kde to bude být odeslána na server?
Jo. Tak, aby registered.html který je jednoznačně soubor HTML
, který je tedy statický soubor, který nemá žádné prostředky,
o přijetí uživatelského vstupu za předpokladu, že neexistuje žádný kód JavaScript
vložené v tom, že je při pohledu na URL
takže je zcela NOOP a že nic se nestane
s předložených údajů, ale si můžete prohlédnout strukturu
o poměrně jednoduchý HTML5 formě
který má několik hesla, několik typů vstupů.
Takže, pojďme vlastně nyní přidat nějakou kontrolu chyb
a uvidíte, jak bychom mohli zlepšit to.
Takže, tady je trochu chudé mužský způsob provádění této
a je to něco ošklivý kus kódu.
Takže, nejprve pojďme svitek dolů na dno
aby viděli, co je to stejné a to, co je odlišné.
Jediná věc jiná nyní mezi tímto
a předchozí verze že jsem dostal formulář a ID
na "registrace" by mohl bývala, co chci
ale jeho má být jednoznačně identifikovatelné dokonce, že to není
nezbytně nutné, protože v případě, že Stránka má jen jednu formu jistě jsem
mohl najít s jedním z metody voliče jQuery je.
Ale takhle prostě dělá to více deterministický.
Takže, když jsem se jít až teď do mého skriptu tag, všimněte si následující,
window.onload rovná anonymní funkce.
Takže, co je to děláš?
Takže, můžete připomenout, že v na straně klienta programování -
JavaScript spíše HTML stránky mají různé akce spojené
s prvky, kliknutím a předkládání a zaostřování
a rozmazání a jiné takové události, které by se mohlo stát
jako uživatel typicky interaguje se stránkou,
window.onload dělá to, co říká.
Na okna celé zatížení
takže jakmile všechny snímky byly stáhnout jednou všechny soubory
byly staženy a jednou Stránka byla načtena,
proveďte následující kód, a Všimněte si, když přejdu na dno
této metody, všimněte si, že nejsou k dispozici žádné závorka
Po složená závorka což znamená,
že nejsem provádění Nyní je tato funkce tady,
prohlížeč se chystá spustit je to pro mě, když to zjistila,
že je stránka načtena.
Takže, pojďme se podívat, co jsme udělali,
document.getElementById registrace
takže jen mi dává odkaz na uzel
na stromě, který je z má ID registrace.
A teď, budu Registrace jinou rutinu události
tím, že dělá form.onsubmit dostane to anonymní funkce
což znamená, že následující Kód by měl provést kdykoli
že forma je předložen.
Nyní, většina z toho je jen trochu nudné logiku.
Takže, pokud hodnota email pole v podobě
"Nic", pak musíte poskytnout svou e-mailovou adresu,
budete křičet na uživatele s upozorní a pak se vrátit false.
A pak jsem si spoustu dalších kontrol,
kontroly pro zadání hesla,
se kontroluje, zda je Hesla jsou stejné,
zkontroluje, zda dohoda je zaškrtnuto políčko nebo není
a jsem křičet na uživatel, pokud některý
z těchto testů skutečně selhat.
A tak, tady je příklad i i když je to trochu nepřirozený
zde fakt, že jsem pomocí rovná, rovná, rovná,
Znamená to, že uživatel nemůže pokusit se mě podvést
zadáním v jaké hodnotě.
Nebo spíš, že jsem opravdu kontrola na přítomnost
na prázdný řetězec, uživatel není napsaný zatím nic.
Pokud uživatel zadali doslova nulové,
"Nula" by se potenciálně mohly být zaměňována s prázdným řetězcem.
A já říkám, že je to trochu odtud smysl
protože samozřejmě i nulový není e-mailová adresa.
Ale pokud to bylo více generické pole jako do textového pole
nebo název nebo popis, nebo něco, co chcete hodnotu za
a to není nutně syntakticky mají
že e-mailová adresa, uživatel mohl psát něco jako nula
a znovu roh případ, ale to je Proto se obvykle kontrola typů je
užitečná věc.
Jste opravdu kontrola uživatel co napsal nic
do tohoto pole.
Takže, co se stane, pokud žádná z těchto testů selže, dobře,
vrací hodnotu true uvnitř z obslužné rutiny události
jako onsubmit prostě znamená, pronajaté původní chování skutečně
propagovat a proto Formulář bude se předloženy.
A to je důvod, proč, když jsem se konečně klepnutí na tlačítko Odeslat, než jsem se dostal
až register.html a když to udělám teď, oznámení,
Jsem si zařval na, pokud nemám poskytnout e-mailovou adresu
a můžu zadat malan@harvard.edu,
crimson [fonetický], karmínový, zaškrtnutím políčka,
a teď se zaregistrujte a to mi říká, opět,
Jste-li registrováni nebo ne.
Dobrá.
Takže, pojďme to vyčistit jen trochu a pak přechod
na novou novější na straně serveru věci.
Takže, když jsem jít do formy-2.html, Všimněte si pár věcí.
Tak, jeden, jsem přinesl jQuery zpět do mixu
takže opět je Tento znak dolaru
a teď jsem s použitím některé metody jQuery.
Takže první, co je o znak dolaru, který je
tak tady speciální?
Co je znak dolaru přichycena Skrz většinu jakéhokoliv kódu jQuery?
Jo.
[Neslyšitelný Poznámka]
OK. Takže, funkce znak dolaru prochází DOM hledáte
pro něco, co s tím zejména voliče CSS.
Tak, to je pravda, ale až příliš přesný.
To je to, co se stane, při předání v řetězci
jako v tomto případě, ale ne Vždy musí projít v řetězci.
Ve skutečnosti, případ v bodě, velmi První řádek je zde to není
Volič CSS, jsem kolem ve funkci Lambda.
Takže obecně - tak, dobrá odpověď, ale příliš přesné.
Obecněji řečeno, to, co je znak dolaru představují?
>> Jen jQuery.
>> Jo. Takže, jen jQuery nebo je to jen funkce
že nějaký chlápek před lety napsal a ostatní lidé mají
protože lepší, že doslova by se standardně nazývá -
pardon, se nazývá jQuery.
Je to jen - to se změní se na rozdíl od mnoha
z jazyků dolaru je dokonale platný symbol použít
na jména proměnné, zatímco
v PHP dolaru samozřejmě má zvláštní význam
ale v JavaScriptu, jako v některé jazyky, znak dolaru
a podtržítko a jiné takové speciální znaky zcela legitimní
pro použití ve vašem vlastním symbolem názvy proměnných.
Takže, někdo se rozhodl že, víte co?
Bude to být docela únavné
aby celý svět typ jQuery po celou dobu,
dovolte mi, abych trochu rostlin podíl v zemi, a řekl,
"Tato knihovna bude použít znak dolaru. "
A ve skutečnosti, to se zvyšuje riziko
že někdo jiný opovážlivě se bude používat znak dolaru
pro své knihovny, ale je tu způsob, jak nějak pojistit
že při použití dolar přihlásit se mapuje na jQuery
protože si můžete otestovat, zda to již bylo přiděleno
k něčemu v podstatě jiného.
Dobrá.
Tak, to je vše, je, že to žádná magie.
Je to prostě sexy vypadající kus syntaxi, která je hezké
a rychlé a snadné psaní.
Takže, co se stane, když se zadejte znak dolaru otevřené závorka
a anonymní funkce.
No, ukázalo se, že se jedná vlastně zkratka zápis
k dokumentu tečkou připravené otevřené závorka.
Tak, jak si všiml, Cynthia dříve jsme už našli jeden
roh případ.
Pokud jste právě předat funkce lambda,
Vliv dolaru znak je trochu jiný.
Ve skutečnosti to, co se skutečně děje je to, že je to ekvivalentní k tomu,
předávání v odkazu na globální objekt dokument
to je globální, stejně jako objekt okno
že vám některé Speciální funkce
která má vliv na celou stránku nebo prohlížeč a změní
z tohoto dokumentu, kdy to zabalit s jQuery,
jQuery podstatě si uvědomuje, oh, to je reference
k tomuto zvláštnímu objektu dokumentu,
dovolte mi, abych se zaregistrujte obslužná rutina událost s názvem připraven
který není nativní JavaScript a DOM související.
Připraven je jQuery věc, která říká, že
když je stránka načtena všechny prvky HTML
, ale ne nezbytně vložen, všechny CSS a obrázky
a JavaScript soubory a blikat soubory a rád.
Takže, je to krok před na zatížení pak jděte do toho
a provést následující.
A vzhůru použití na připravený znamená, že můžete, víte,
že všechny prvky v DOM,
všechny jednoznačně identifikovány věci s ID, existují i
pokud je stránka, jeho obsah jsou stále načítá a nakládání
a máte nějaké rozbité ikony na chvíli
nebo bílá stránka v pozadí.
Jo.
>> Co by se stalo, pokud [neslyšitelný]?
>> Perfektní příklad, perfektní otázka.
Takže, pojďme se podívat, zda můžeme simulovat to právě teď.
Takže, nech mě jít dopředu a odstraňte tyto dva řádky se tady a pak
aniž by se obtěžoval na opravu odsazení, nech mě jít napřed
a toto hodnocení smazat sem - Jejda, tohle tady dole.
A teď mi dovolte, abych přejít na stránky, přejděte do formy-2.html a typu
v rejstříku, nic, co by se zdálo stane, řekněme, proč to bylo,
pojďme do toho a otevřete up Chrome inspektora,
otevřít konzolu prostě vidět kdyby se něco stalo tady, teď,
Registrace, stále nic.
Takže, kód je syntakticky jemný
tak jsem to viděl některý červené chybové hlášení,
ale to, co jasně se neděje?
Žádný z mých kód je v pořádku, nefunguje to tak nikdo
z mých kódů se zdá být provedení, tak proč to je?
No, JavaScript a prohlížeče obecněji provádět
Obsah webové stránky, horní dolů, zleva doprava.
A problém je, že proto, že horní
této stránce je HTML pak zamiřte pak skript pak další skript,
to bude vykonán než to, co je ještě připraven,
nebo dokonce existuje ve stromu zastoupení na stránku.
Forma sama o sobě, ani tělo existuje v tomto bodě.
Takže, jQuery je dost chytrý, se kontrola, že je chyba
že pokud není prvek s Unikátní ID registrace,
že to nebude vyskočit na vás
a jen vyvolat nějakou konzoli chyba a rozbít celou stránku,
to bude tiše ignorovat vy, ale z důvodu, že nikdo
toto číslo stále provádí se
protože když máte registrovaných v tomto odeslat psovoda,
neexistuje žádný prvek připojit jej.
Takže je to trochu ne op tam.
Takže, zadáním místo, počkejte, dokud se věk byl načten
pokud jsme udělali window.onload věc, která je trochu
ze staré školy způsob, jak dělat je nebo sexy jQuery cesta
jako je toto, můžeme řekněte to počkat, dokud se všechny
z těchto HTML tagy mají byl zpracován tak, aby i
v případě, že obrazy nebyly načteny, na Alespoň, že uzel je ve stromu,
pak JQuery lze zajistit že všechno, co tam je.
Jo.
[Neslyšitelný Poznámka]
Ano, dobře, ano, absolutně.
Tak, další řešení to, pokud jste nepoužili tento
nebo si nepamatoval že to existuje,
můžete naprosto pohybovat To vše až na dno
webové stránky, uvnitř tělo stále ale pod formulářem
a které by také tento problém vyřešit.
Je to jen typicky považováno za špatné praxe.
Je to trochu chaotický a nedbalý speciálně
pokud budete mít rušení vše do dolní části stránky,
zvláště když si nechám věci jednoduché tím, že všechny
z mého kódu uvnitř stránky HTML
když samozřejmě můžete určitě se dostat do zvyk
factoringových to do samostatného souboru
na kterém místě je to jen hezké
k centralizaci Soubory v hlavě.
Kromě zde je cena, kterou zaplatíte
tím, že JavaScript další aktiva, jako je CSS souborů
v čele strany, co je riziko, že se dostanete?
>> Pomalejší načítání stránky.
>> Pomalejší načítání stránky, proč?
>> Vzhledem k tomu, že se snažíme načíst všechny knihovny
před [neslyšitelný].
>> Právě proto, že prohlížeče číst kód shora dolů,
zleva doprava, pokud Google analytics jsou pomalé
nebo jQuery CDN je pomalý nebo Facebook API je pomalý
a že soubor právě visí případně v závislosti
na tom, jak načíst tento soubor, Celé stránky by zdánlivě přestat reagovat.
A když vidíte, to hodně upřímně
na webové stránky, které mají hodně nízké kvality inzeráty
na nich, my jsme jen jeden pomalý nebo sestřelil webové stránky by mohly viset stránku
pro některé na dobu neurčitou počet sekund
až nakonec prohlížeč doufejme, že časový limit na to
a pak vám ukáže, Zbytek stránky.
Takže, pokud jste se někdy používá jako Facebook, stejně jako tlačítka,
na své webové stránky, ať mi uvidíme, jestli najdu to
aniž by museli přihlásit zde.
Takže, pokud jdete na Tlačítko Facebook je jako
a klepněte na tlačítko get kód, sakra,
umožňuje zjistit, zda můžeme najít příklad,
Určitě někdo vyslán to.
[Pause]
Dám do několika sekund, pokud nebudeme vidět.
Facebook asynchronní - OK.
Tak, to je kód, a pokud že jsem to změnil v poslední době
že Facebook skutečně doporučuje používat
nahrát svou knihovnu a ve skutečnosti navrhnout
že jste uvedli do Tělo stránky.
Takže, Facebook vám radí vytvořit jakousi hloupou DIV
že prostě má unikátní ID, jako je , pak mají tag script
a všechny tyto složitosti v podstatě dělá následující
a nepoužívejte žádné JQuery protože nechtějí
předpokládat jakékoli jiné závislostí,
dovolte mi, abych přesunout tento více než jen trochu.
Takže, všimněte si, že mají anonymní funkce zde,
více o tom za chvíli,
oni pak použijte document.createElement,
oni vytvoření DOM prvek, to je jako malloc tak říkajíc
případě, že značka je typu skript, to je pak určující
že atribut asynchronní této značky se děje
aby to byla pravda, pak byste pokračovat a zjistit, co URL
z Facebooku JavaScript by měla být
a to je jen fantazie způsob,
z kontroly by to HGP nebo HDPS.
A nakonec, můžete Všimněte si, co Facebook dělá,
že se uzel DOM, které má ID Facebook kořene
což je to, co řekli můžete dát do stránky
a pak se připojit na dítě takže účinek vše je
na druh dynamicky aplikovat Nový skript tag do vaší stránky
jako dítě DIV, který tam vložena tak, že zbytek
o načtení stránky se šťastně
a pak tento kód ve skutečnosti se nahraje asynchronně.
Takže, v podstatě po skutečnost a já odložená zmínka
o anonymní funkce,
Co je to funky Syntaxe s odkazem na zde
když mám nejen funkci otevřít závorka, v blízkosti závorka
a pak složené závorky, Proto otevřené závorka zde
a pak open close, zavřít Paren tam, co to děláš?
>> [Neslyšitelný] definující a poté spuštěním?
>> Přesně tak, je to definování funkce, která je anonymní
ale pouze definování funkce,
samozřejmě nespustí funkce, dokud se to jmenuje
podle názvu, ale samozřejmě to je anonymní funkce
takže nemůžete říkat podle názvu, ale můžete
v JavaScriptu provádět anonymní funkce jen
zapouzdřením celou věc v závorce, jak jsme udělali
s tímto závorka a to Paren tady a pak k zafixování
na konci funkce otevřené závorka, zavřít závorka,
pokud nechcete, aby projít žádnými argumenty.
Ale to se zdá trochu hloupé,
stejně jako důvod, proč tato dodatečná syntaktická složitost
že většina lidí se nezdálo rozpoznat, co je hodnota
v balení těch tři řádky kódu
v anonymní funkci tímto způsobem.
Jo.
>> Aby se zabránilo přepsání hodnotné [neslyšitelné].
>> Přesně tak, aby se zabránilo přepsání proměnné
na existující stránku, že jo?
Facebook je poněkud opovážlivě rozhodl,
jdou použít Proměnná E, je to docela pravděpodobné,
že vy nebo někdo pomocí Facebook jako tlačítko
nebo jakákoli jiná sociální zástrčka
v má proměnnou někde tzv. E. So,
zapouzdřením všech jejich kódu uvnitř
této anonymní funkce, které v podstatě mají svůj vlastní prostor
že nebude riskovat přepisování všechny existující proměnné.
Takže, i toto je ve skutečnosti velmi časté paradigma,
zejména při psaní kód knihovny
nebo pokud jste sami ne Chcete nepořádek název místa
s dalšími proměnnými si Chcete-hodnota žít
a umírá, jakmile ukončíte že blok kódu,
to je pěkná technika v JavaScriptu.
Dobrá.
A tak, pak se k tomuto příkladu tady, všechno, co jsme udělali na konci
se v tomto příkladu je jen uklidil kód.
Takže, je to pořád ještě celý banda přepínačů, celá parta
podmínek zde, ale Všimněte si, trochu syntaxe,
Tento přístup DOM uzel s jedinečný evidenční číslo,
kosmické prostředky vypadají nyní potomek tohoto uzlu,
najít, jestli je to z typu vstup a pak i
pokud jste neviděli tento dříve, možná budete vědět,
že to prostě znamená, že si že se vstupním tag,
vstupní prvky, které má atribut názvu s hodnotou
e-mailů, a nechte mě mávat mou ruku na některé
zbytek není vše, co stimulující
ale opravdu jen syntaxe jQuery pro stejné operace.
Dobrá.
Ale co to není tak důležité, Zde je na straně prohlížeč věci
ale spíše to, že jsme měl čistší a čistší řešení
skutečně dělat že kód práce.
Dobrá.
Jakékoliv dotazy?
[Neslyšitelný Poznámka]
OK. A teď to nejzábavnější.
Takže, node.js Proč?
Koho to zajímá?
Co víte o tom dnes?
Node.js, proč?
Henry [předpokládat, pravopis].
[Neslyšitelný Poznámka]
Resetu baterie?
Co - to je Perfektní útes věšák
pro druhé pololetí roku dnes.
Proč bychom jít a vzít přestávka tady 5 minut,
tam je polovina cukroví stroj tam, pokud by
jako nějaký bonbón bez uvedení čtvrtinu palců