>> Poriadku.
Takže JavaScript.
Takmer každý v tejto miestnosti Pravdepodobne má určitý stupeň
z pohodlia s ňou, či to bolo pri ceste späť na SC50
alebo to bolo osobné webové projekty alebo dokonca
ak ste trochu to s tento rok v PHP základný projekt,
ale pre väčšinu diel, mnohí z vás,
aj keď máte nejaké pohodlie
s JavaScript možná nebola prijatá
za samozrejmosť, ako jazykové funguje a čo sa deje
na pod kapotou a čo budeme snažiť
k tomu je dnes šupkou späť niektoré technické vrstiev
čo JavaScript je, ako sa líši od jazyka
ako PHP, ako môže byť použiť nielen na strane klienta
ale aj na strane servera a potom sa zamerať veľmi špecificky
v tomto rámci, všimnete si nie JS čo je v podstate doba chodu,
program, s ktorým ste môže spustiť kód JavaScript,
na strane servera a je to stále stále viac populárny druh
zo na rovnakom postavení tejto dni pravdepodobne Ruby a PHP
a Python a uvidíte
že má niektoré dosť výkonné funkcie podľa spôsobu niektorých
zastavaného-in jazyku konštrukty.
Ale najprv, niektoré jednoduché veci len preto, aby vám pripomenul,
o tom, ako tento jazyk funguje a Ak máte ťažkosti vidieť akýkoľvek
tohto, len kričať a my sa prispôsobiť.
Tak, jeden ako v PHP je tu žiadny pojem hlavné funkcie,
stačí začať písať kód
a môžete NICH interpretovať ju zhora nadol.
V súvislosti prehliadača
alebo na strane servera niečo uvidíme niekoľko príkladov
v trochu.
Podmienky, syntakticky ekvivalent PHP, rovnako ako C,
C + + a niektoré iné jazyky tak len preto, aby vám pocit
o tom, ako sme to mohli usporiadať,
tam je len kánonické stav.
Booleovské výrazy, presne rovnaký syntakticky, ako ste videli
v tých istých ďalšie jazyky, a to ako pre ORing
a pre ukončenie veci dohromady.
JavaScript musí spínače, podobne ako PHP a ostatných úloh
a nie ste obmedzení, ako v C na integrálnych primitív
ako znaky a ints môže skutočne robiť aj iné typy hodnôt.
Loops. Tak, to je presne rovnaké
a asi tucet jazykov, while, robiť, zatiaľ čo slučky
a potom sa tento trik tu.
Takže, je to druh známy ako rýchly výpočet
a je to veľmi šikovný spôsob, z, rovnako ako v PHP robiť
pre každú FU ako bar môžete podobne,
v objekte JavaScript, kde objekt je názov
z premennej tu, povedzme, var i v objekte a na každej iterácii
tejto slučky, aj je bude jeden
kľúčov od objektu.
Takže, ak máte objekt študent, a študent má ID
a názov a dom, iteratívne aj bude
hodnoty ID a mená a dom a môžete k nim index
do objektu, ako by to poľa pomocou hranatú zátvorku
notácie získať hodnotu kľúče ID alebo názov
alebo dom, a tak ďalej.
A na rozdiel od bežnej predpoklad, JavaScript objekty,
vlastnosti nie sú nutne zaručené, že
v rovnakom poradí, to je tiež pravda, PHP, takže nenesú
že veci zostanú v rovnakom poradí
že ste dal tie kľúče dvojica hodnôt do objektu.
Ako na poli?
Tam je niekoľko spôsobov, ako to napísať syntakticky
ale to je pravdepodobne najviac obyčajný teraz len pomocou námestí
držiak notácie.
Tak, to je premenná volanie čísla, ktoré obsahujú množstvo
zo tam šesť čísel, Tu je jednoduchý reťazec
a všimnite si, čo je prítomný z týchto príkladov,
Čo je JavaScript zrejme chýba.
Jo. Takže, nie je pojem z písania, rozhodne nie
V tejto súvislosti je tu, ale to je naozaj reťazec.
Takže, JavaScript musí typov a že bol naozaj poľa
, Ktorý je sám o sebe typ a každý z prvkov
sa tým, že pole bolo typu číslo ako JavaScript im hovorí.
Takže, je to voľne napísaný jazyk a uvidíme
že JavaScript ako PHP má operátor identity
a iné mechanizmy pre vlastne kontrola na typ
niektoré premenné je a to ako pre kontrolu chýb
a pre ďalšie aplikácie.
A tu je ukážka objekt obsahujúce len ID a názov.
A teraz si všimnite, že sme pomocou zložená zátvorka notáciu,
odsadenie a biela priestor je trochu zmysel
a to prehlasuje, premenná, ktorej meno je Rob
a ktorého ID je 1 a Typ Dátum je tu naša číslo
a reťazec, resp.
A potom je to niečo mierne odlišné
ak ste niekedy niečo s Ajax v týchto dňoch?
Pravdepodobne ste použili predmet ako je tento
ale to, čo stojí za zmienku tu?
Čo je syntakticky vôbec tak odlišné, len pár
vecí medzi príklade ktorý je síce menší,
a to väčší príklad.
Takže, prvý Laicky Termín, čo je to?
Aký je typ Zamestnanci by ste povedali?
OK, to je pole, je to rad z čoho?
>> Objekty.
>> OK, to je pole objektov.
A teraz, zamerať sa iba na jeden - niektorý z týchto objektov,
to, čo je medzi to a to?
>> Kľúče sú reťazce.
>> Jo. Tak, kľúče sú reťazce,
a kľúče sú v skutočnosti reťazca v oboch prípadoch
a to je druh idiotsky
podľa môjho názoru historickom dizajne rozhodnutie, keď používate
JSON, JavaScript Object Notation,
, Ktorý je v podstate prenosový formát
pre odosielanie dát zvyčajne v sieti
medzi klientom a serverom, musíte si uvedomiť,
, Že je to v skutočnosti platný JSON, a toto je jeden
z týchto FYIs, ak ste niekedy buchnúť hlavou proti múru
po dobu niekoľkých minút bez dobrého dôvod, že to nie je platný JSON
preto, že sú kľúče Nie je vlastne citoval.
JSON hlúpo vyžaduje, aby kľúče byť uvedené nielen,
ale že je dvojnásobne spomenie, apostrof nestačí.
Tak stupídny vec a viac zábavné skutočnosti,
pre dnešné účely, ale tento taky by bolo platné JavaScript
je to jednoducho nie je - hovoriť je nie pravdivý.
Dobrá.
Takže, uvidíme veľa viac.
Dobrá.
Takže, je to JavaScript syntakticky asi dosť
oboznámení, niekto z vás, ktorí majú nikdy použiť JavaScript, pred
nie je to obrovský skok od PHP alebo takmer akýkoľvek procedurálny jazyk
že ste mohli použiť.
Takže, dnes sa budeme sústrediť na je zaujímavé aspekty
JavaScript najmä v súvislosti s no JS
, Ale nie výhradne, pretože až do teraz ste pravdepodobne,
ak ste použili Javascript, používa ju vnútri prehliadači.
Takže nie JS je prostredie potom trochu sa deje
nám umožní prístup k JavaScript kód klienta -
na strane servera, ale prvé, poďme sa pozrieť
na niečo, čo je trochu viac na strane klienta.
Takže som šiel dovnútra a je to spojené na webových stránkach kurzy,
ak chcete hrať spolu, sú tam dva podadresáre
v dnešnej PSČ volaného zdroj skrutky zips na webových stránkach
a to sú len Niekoľko príkladov spomínanie
vecí, ktoré ste mohli vidieť pred a som trochu postavený im
až od najjednoduchších až mierne zložitejšie vtipálek
niektoré z funkcií JavaScript.
Takže, poďme do toho a vziať pozrite sa napríklad na to.
Takže, bohužiaľ tag blink bol zabil pred niekoľkými rokmi
ako spôsob, ako sa dostali krajšie a krajšie
a tag blink bol doslova otvorený držiak blikať v blízkosti držiaku
a tak nejako nie už s nami.
Ale môžeme ešte vzkriesiť táto myšlienka tagu by len tak
premýšľanie o tom logicky, ako sa vám ísť
o tom, niečo ako Tento blikať intuitívne?
Za predpokladu, že viete málo trochu JavaScriptu a CSS, alebo
v tomto bode, je to OK, ak nechcete.
>> Nastavte si oddychový čas a schovať potom potom, čo som si označiť ju
von a ukázať ju znova.
>> Jo, dokonalé.
Toto je druh programovania 101,
ako by ste dosiahnuť vizuálny efekt takto?
No, tak nejako musieť niečo ukázať
a potom sa skryť niečo, show, niečo, skryť niečo
a ako Jonathan navrhuje používať nejaký time-outu,
nejaký plán, čo môžete urobiť to opakovane, bez toho aby ste museli
používať slučku alebo niečo také.
Takže, nechaj ma ísť do blink-0.html
a dovoľte mi, aby som zmenšiť font trochu
tak, že viac to hodí.
A poďme sa pozrieť na to, čo sa tu deje.
Takže, v prvom rade, Všimnite si, že telo
na tejto stránke je super jednoduché, vo vnútri tela
stránky je len div.
Som svojvoľne uvedený ID pozdravu
a to by mohlo byť niečo, tak dlho, ako je to jedinečné
a potom som len niektoré jednoduchý text hello world.
Takže, keď som sa posunúť nahor, Všimnite si nejaký našuchorený štýl.
Takže hovorím, ostrý pozdrav, ktorý, ako viete,
CSS jednoducho znamená jednoznačne identifikáciu prvku
s myšlienkou, pozdrav,
Veľkosť písma sa deje ľubovoľne je to, marže a zarovnanie textu.
Takže, nezaujímavé estetické detaily
zhruba stred textu.
Takže, zaujímavá časť je v skripte tag sem hore
ktoré som náhodou dal dovnútra hlavy stránky.
Takže, Budeme - môžete to urobiť to v mnohých rôznymi spôsobmi
a uvidíme niekoľko iterácia tohto rovnakého programu
ale začnime od začiatku.
Takže, ja som deklaroval Funkcie tzv blikania
a zrejme používa tento vstavaný DOM metódy nazývanej
getElementById ktorý je možná jeden z viacerých silných metód
že sa dostanete von z krabice sa hľadá JavaScript pre
"Pozdrav" nemusí byť dvojité úvodzovky, ako by to bolo
v HTML je buď je v poriadku tak dlho,
ako ste štylisticky konzistentné v týchto dňoch Trúfam si tvrdiť,
mnoho ľudí používa Javu, jednoduché úvodzovky v JavaScripte,
dvojité úvodzovky v HTML, ale to nezáleží
tak dlho, ako ste v súlade.
Takže, tu, ak nie ste oboznámení, môžete skutočne získať prístup
s JavaScript CSS reality na prvky.
Takže, všimnite si, že som vyhlásil premennú s názvom div
a uložená vo vnútri z tejto premennej,
odkaz na čokoľvek že DOM element je.
Takže, ak si myslíte, že späť do CS50 alebo každá trieda, v ktorom ste si mysleli,
o stromových štruktúr a DOM, Document Object Model,
je to len odkaz k uzla v strome,
, Ktorý predstavuje túto stránku
a ak je div.style.visibility vlastnosť rovná, rovná, rovná,
skrytý, potom som len chcete môžete ho
ako Jonathan navrhol inak chcem
prepnete ju do skrytej.
Teraz, ako je na strane, prečo triple rovná tam?
Alebo čo je to proti dvojité rovná?
>> Strict ekvivalent.
>> Ospravedlňujem sa.
>> Strict ekvivalent.
Takže, je to na operátorom identity
kde by ste kontrolu nie je iba hodnota premennej
ako rovný, rovné zmysle ale tiež typ nej.
Takže, aj keď nemáme uvedené ďaleko všetky dáta
typy pre všetky ukazovatele v tento alebo niektorý z diapozitívov,
je typ súvisiace sa, že reťazec skryté
s touto hodnotou, skryté a To je samozrejme reťazca.
Takže, v tomto prípade, je nezáleží
pretože neexistuje žiadny spôsob, že budeme spájať reťazec
o "skryté" s inú hodnotu
ale to je často dobrý zvyk Povedal by som, že dostať
pomocou rovnakej, rovné,
znamienko rovná sa spravidla dobrá vec.
To bude váš kód viac robustné a to ako v PHP, ale
a v JavaScriptu pretože budete spúšťať
do občas rohových prípadoch kde hodnota môže byť nulová
že ste kontrolu a nula môže byť zjednotený s false
alebo by mohli byť, a ako v PHP,
Javascript taky môže mať viac nepravdivo hodnoty, kde nulou
a false a null a undefined to všetko môže vyriešiť implicitne
na hodnotu false.
Ale ak ste naozaj chcú pre kontrolu určité hodnoty
ako nula, číslo, alebo false Boolean, potom máte
použiť tento operátor identity.
Takže, môže sa stať, aby sa v každom prípade, aj keď tu,
je to trochu zmysel pretože vieme, že sme kontrolu
na hodnotu reťazca a je to Nebude to niečo iné.
Takže, tu je to čaro a potom, keď som prejdite na tomto riadku tu,
zrejme, postavený do objektu window
a to je rys prehliadača môžete získať prístup
to veľmi globálne objekt nazvaný Okno,
vnútri, ktorý je niektoré funkcie,
ak kus, ktorý je nastavený interval
a to sa zrejme aké argumenty?
Jo.
>> Funkcie hovoru a čas.
>> Dobrá. Takže, funkcia hovoru a čas
a tak najmä odkaz na funkciu,
ukazovateľ na funkciu v tom zmysle,
a to je funkcia že sa deje
byť vykonaný pri každom počte milisekúnd a v tomto prípade,
je to raz za 500 milisekúnd.
Takže, je to spôsob, ako prinútiť účinne a nekonečná slučka
bez použitia iterácie, ale namiesto toho hovoriť JavaScript
k motoru vnútri prehliadača
robiť to každý 500 milisekúnd alebo sa blíži
500 milisekúnd, ako to môže,
Ukazuje sa, že pod kapotou,
tam je to, čo sa nazýva udalosť slučka a vrátime sa k tomu
v rámci uzla JS že len neustále druh
sedieť tam, spinning, čakanie na prácu je potrebné urobiť
a akonáhle to uvedomiť,
500 milisekúnd ubehlo blink budú sa opäť nazýva
a znova a znova je pozdĺž akékoľvek iné práce
, Že musí stihnúť.
Takže, čo môžeme zlepšiť tu?
No, dovoľte mi otvoriť up blink-1.html
a preukázať blink-1.html
ako esteticky úplne zhodné.
Takže to, čo by sme mohli zlepšiť tu?
Dobre si všimnite, že bolo celkom k ničomu
definovať funkcie nazýva Blink, pretože koľko
v koľkých miestach Urobil som volanie funkcie blikanie?
>> Len raz.
>> Tak, jeden.
Takže to nebolo zlé, v Skutočnosť, že je to asi dosť
rovno vpred.
I definovaný funkciu blikať, som Volanie funkcie blikať spôsobom
tohto parametra, ale technicky,
nebol dôvod, prečo to a spoločné paradigma
v JavaScripte, je skutočne využívať lambda funkcií
ako ste si možno pamätáte z 51 alebo anonymné funkcie
kde ak nepotrebujete názov pre funkciu,
ak ste len volať to iste v jednom mieste,
prečo sa obťažovať neprehľadná svoj kód, neprehľadná programátori myseľ
a vaše meno priestoru Naozaj sa symboly
že nemáte naozaj je potrebné sa starať o
A tak, v tejto verzii tu,
Všimnite si, že volám Window.setInterval priamo
na samom vrchole môjho script tag potom som okolo
v bezmennej funkciu že trvá žiadne argumenty
a to je úplne v poriadku a potom telo
tejto funkcie je, že sa objaví totožný s tým, čo bolo pred
a iba syntaktická Rozdiel je teraz
sa tu vedľa 500..
Zatváram telo funkcie
a potom hovorím spustiť, že predchádzajúce kód,
každých 500 milisekúnd.
Takže, veľmi marginálne zmeny
ale krok k tomu, čo je pravdepodobne viac elegantný
vykonávanie tohto.
Takže, poďme sa tento krok ďalej, keby som teraz ísť
v okamihu dvoch, budete si musieť vybrať pozri spoločnú knižnicu,
účinok, ktorý sa deje
byť úplne bezvýznamné esteticky, ale ak pôjdeme
do verzie dva tu, oznámenia , Že v hornej časti hlavy,
Ja som súčasťou najnovšiu verziu jQuery.
A potom, tu dole, Len som vyčistiť
do kódu trochu, je to nebude sranda svet
pokračovať v používaní natívne DOM funkcie
a klasifikácie surového JavaScript.
V skutočnosti, JQuery, ako môžete viem, sa stala tak populárnou,
že väčšina ľudí jednoducho v rozpore s jQuery JavaScript
ale naozaj len večere užitočná knižnica napísaná
kolegom menom John Resig a od ďalších
ktoré majú práve robí veľa nudné veci
v JavaScriptu jednoduchšie a stručnejší.
Takže, v tomto prípade tu to, čo sa deje?
Takže, mám tento vzhľad znak dolára, o tom viac
za chvíľu, a potom to je volič CSS.
Takže, je to veľmi podobné ducha toho, čo som robil predtým,
ale tentoraz som doslova pomocou tagu hash
uviesť unikátny Identifikátor tzv pozdrav
a potom zrejme . Css je metóda postavená
do akýkoľvek objekt, je, že som práve vytvorili
a ja som kontrolu hodnoty priehľadové kľúče.
A v prípade, že hodnota tohto kľúča rovná, rovná, rovná, skrytý,
potom idem na to prepínať a Chystám sa prepínať to tentoraz
za použitia rovnakej metódy ktorý zrejme je preťažený
v tom zmysle, že má dva rôzne podpisy,
jeden s jedným argumentom a jedna s dvoma argumentmi,
druhý z nich je seter,
bývalý, ktorý je karierista, aby som tak povedal.
A ak zvedaví, a ak by nikdy sa pozrel na to,
ak pôjdeme do jquery.css snáď top hit je naozaj to
a môžete vidieť viac formálne vysvetlenie
že stačí použiť to, . Css sa menom nehnuteľností
a potom seter je dot CSS
s názvom nehnuteľností a hodnoty.
Takže, okrajovo čistejšie, ale Všimnite si druh vzoru tu
s každou iterácii tohto kódexu,
sme trochu robiť to viac a viac a viac
a tam hovoria, lepší dizajn
pretože sme pomocou niekoho iný kód, ktorý je eliminovaný
niektoré zložitosti.
Tak, teraz poďme urobiť to ešte jednoduchšie.
A v skutočnosti, keď som odstrániť všetky citáty uvidíte, všetky
komentár uvidíte, ako jednoduché to dostal.
Jeden rozdiel tu samozrejme je
že som pomocou prepínať metóda, ktorá prichádza tiež vstavaný
do jQuery a to je práve
preto, že niekto iný napísal kód
že vlastne prepína Nastavenie viditeľnosti
akéhokoľvek elementu modelu DOM že ju poslať.
Takže lepšie a lepšie.
A tak, to je vzor,
aj keď je to večera jednoduchý príklad a triedenie
z hlúpe čistého účinku, ktorý je blikajúce kus textu,
je to ten druh myslenia proces, ktorý by ste mali myslieť -
myslieť nie nutne prvý
pasívne písanie niečo pre nadchádzajúce projekt
ale iste, ako iterovat s poradcom alebo so mnou
a vaše schôdzky tímu, alebo si len skontrolovať svoje spoluhráčov kód
o sprísnenie veci, nie?
Koniec koncov, sú to menej -
a menej riadkov kódu budete nakoniec mať
v teórii tým menej chýb je pravdepodobné, že budú pozývať
preto, že sú jednoducho menej kód pokaziť sa.
Dobrá.
Takže, pár stánok s jedlom.
Lambda funkcie, anonymné funkcie,
z ktorých mnohé si nevideli
a potom tiež len uťahovanie čo sa s knižnicou
ako jQuery v tejto konkrétny prípad.
Dobrá.
Akékoľvek otázky?
Poďme urobiť jednu ďalšiu na strane klienta aspektom,
vo forme nulovej máme Tento čistý efekt.
Super jednoduchý formulár a zrejme keď sa pokúsim kliknite zaregistrovať tu,
spočiatku mi to hovorí, že ste registrovaný, dobre, naozaj nie.
No, prečo to je?
No, tu je form-0.html veľmi málo kódu,
bez JavaScript vôbec a to je úplne falošný druh
formy, pretože akcie hodnota je registered.html
čo znamená, že bez ohľadu na to, aké Píšem do tohto formulára,
kde to bude byť odoslaná na server?
Jo. Tak, aby registered.html ktorý je jednoznačne súbor HTML
, Ktorý je teda statický súbor, ktorý nemá žiadne prostriedky,
o prijatí užívateľského vstupu za predpokladu, že neexistuje žiadny kód JavaScript
vložené v tom, že je pri pohľade na URL
takže je úplne noop a že nič sa nestane
s predložených údajov, ale si môžete prezrieť štruktúru
o pomerne jednoduchý HTML5 forme
ktorý má niekoľko heslá, niekoľko typov vstupov.
Takže, poďme vlastne teraz pridať nejakú kontrolu chýb
a uvidíte, ako by sme mohli zlepšiť to.
Takže, tu je trochu chudobné mužský spôsob vykonávania tejto
a je to niečo škaredý kus kódu.
Takže, najprv poďme zvitok dole na dno
aby videli, čo je to isté a to, čo je odlišné.
Jediná vec iná teraz medzi týmto
a predchádzajúce verzie že som dostal formulár a ID
na "registrácia" by mohol bývala, čo chcem
ale jeho má byť jednoznačne identifikovateľné dokonca, že to nie je
nevyhnutne potrebné, pretože v prípade, že Stránka má len jednu formu určite som
mohol nájsť s jedným z metódy voliča jQuery je.
Ale takto jednoducho robí to viac deterministický.
Takže, keď som sa ísť až teraz do môjho skriptu tag, všimnite si nasledujúce,
window.onload rovná anonymné funkcie.
Takže, čo je to robíš?
Takže, môžete pripomenúť, že v na strane klienta programovanie -
JavaScript skôr HTML stránky majú rôzne akcie spojené
s prvkami, kliknutím a predkladania a zaostrovanie
a rozmazaniu a iné takéto udalosti, ktoré by sa mohlo stať
ako užívateľ typicky interaguje so stránkou,
window.onload robí to, čo hovorí.
Na okná celé zaťaženie
takže akonáhle všetky snímky boli stiahnuť raz všetky súbory
boli stiahnuté a raz Stránka bola načítaná,
vykonajte nasledujúci kód, a Všimnite si, keď prejdem na dno
tejto metódy, všimnite si, že nie sú k dispozícii žiadne zátvorka
Po zložená zátvorka čo znamená,
že nie som vykonávania Teraz je táto funkcia tu,
prehliadač sa chystá spustiť je to pre mňa, keď to zistila,
že je stránka načítaná.
Takže, poďme sa pozrieť, čo sme urobili,
document.getElementById registrácia
takže len mi dáva odkaz na uzol
na strome, ktorý je z má ID registrácia.
A teraz, budem Registrácia inú rutinu udalosti
tým, že robí form.onsubmit dostane to anonymné funkcie
čo znamená, že nasledujúce Kód by mal vykonať kedykoľvek
že forma je predložený.
Teraz, väčšina z toho je len trochu nudné logiku.
Takže, ak hodnota email pole v podobe
"Nič", potom musíte poskytnúť svoju e-mailovú adresu,
budete kričať na užívateľa s upozorní a potom sa vrátiť false.
A potom som si veľa ďalších kontrol,
kontroly pre zadanie hesla,
sa kontroluje, či je Heslá sú rovnaké,
skontroluje, či dohoda je začiarknuté políčko alebo nie je
a som kričať na užívateľ, ak niektorý
z týchto testov skutočne zlyhať.
A tak, tu je príklad aj aj keď je to trochu neprirodzený
tu fakt, že som pomocou rovná, rovná, rovná,
Znamená to, že užívateľ nemôže pokúsiť sa ma podviesť
zadaním v akej hodnote.
Alebo skôr, že som naozaj kontrola na prítomnosť
na prázdny reťazec, užívateľ nie je napísaný zatiaľ nič.
Ak užívateľ zadali doslova nulové,
"Nula" by sa potenciálne mohli byť zamieňať s prázdnym reťazcom.
A ja hovorím, že je to trochu odtiaľ zmysel
pretože samozrejme aj nulový nie je e-mailová adresa.
Ale ak to bolo viac generické pole ako do textového poľa
alebo názov alebo popis, alebo niečo, čo chcete hodnotu za
a to nie je nevyhnutne syntakticky majú
že e-mailová adresa, užívateľ mohol písať niečo ako nula
a znovu roh prípad, ale to je Preto sa obvykle kontrola typov je
užitočná vec.
Ste naozaj kontrola užívateľ čo napísal nič
do tohto poľa.
Takže, čo sa stane, ak žiadna z týchto testov zlyhá, dobre,
vracia hodnotu true vnútri z obslužnej rutiny udalosti
ako onsubmit jednoducho znamená, prenajaté pôvodné správanie skutočne
propagovať a preto Formulár bude sa predložené.
A to je dôvod, prečo, keď som sa konečne kliknutí na tlačidlo Odoslať, než som sa dostal
až register.html a keď to urobím teraz, oznámenia,
Som si zareval na, ak nemám poskytnúť e-mailovú adresu
a môžem zadať malan@harvard.edu,
crimson [fonetický], karmínová, zaškrtnutím políčka,
a teraz sa zaregistrujte a to mi hovorí, opäť,
Ak ste registrovaný alebo nie.
Dobrá.
Takže, poďme to vyčistiť len trochu a potom prechod
na novú novšie na strane servera veci.
Takže, keď som ísť do formy-2.html, Všimnite si pár vecí.
Tak, jeden, som priniesol jQuery späť do mixu
takže opäť je Tento znak dolára
a teraz som s použitím niektoré metódy jQuery.
Takže prvé, čo je o znak dolára, ktorý je
tak tu špeciálne?
Čo je znak dolára prichytená Skrz väčšinu akéhokoľvek kódu jQuery?
Jo.
[Nepočuteľný Poznámka]
OK. Takže, funkcia znak dolára prechádza DOM hľadáte
pre niečo, čo s tým najmä voliča CSS.
Tak, to je pravda, ale až príliš presný.
To je to, čo sa stane, pri odovzdaní v reťazci
ako v tomto prípade, ale nie Vždy musí prejsť v reťazci.
V skutočnosti, prípad v bode, veľmi Prvý riadok je tu to nie je
Volič CSS, som okolo vo funkcii Lambda.
Takže všeobecne - tak, dobrá odpoveď, ale príliš presné.
Všeobecnejšie povedané, to, čo je znak dolára predstavujú?
>> Len jQuery.
>> Jo. Takže, len jQuery alebo je to len funkcia
že nejaký chlapík pred rokmi napísal a ostatní ľudia majú
pretože lepšie, že doslova by sa štandardne nazýva -
pardon, sa nazýva jQuery.
Je to len - to sa zmení sa na rozdiel od mnohých
z jazykov dolára je dokonale platný symbol použiť
na mená premenné, zatiaľ čo
v PHP dolára samozrejme má zvláštny význam
ale v JavaScripte, ako v niektoré jazyky, znak dolára
a podčiarkovník a iné takéto špeciálne znaky úplne legitímne
pre použitie vo vašom vlastnom symbolom názvy premenných.
Takže, niekto sa rozhodol že, viete čo?
Bude to byť docela únavné
aby celý svet typ jQuery po celú dobu,
dovoľte mi, aby som trochu rastlín podiel v krajine, a povedal,
"Táto knižnica bude použiť znak dolára. "
A v skutočnosti, to sa zvyšuje riziko
že niekto iný opovážlivo sa bude používať znak dolára
pre svoje knižnice, ale je tu spôsob, ako nejako poistiť
že pri použití dolár prihlásiť sa mapuje na jQuery
pretože si môžete otestovať, či to už bolo pridelené
k niečomu v podstate iného.
Dobrá.
Tak, to je všetko, je, že to žiadna mágia.
Je to proste sexy vyzerajúce kus syntax, ktorá je pekné
a rýchle a jednoduché písanie.
Takže, čo sa stane, keď sa zadajte znak dolára otvorenej zátvorka
a anonymné funkcie.
No, ukázalo sa, že sa jedná vlastne skratka firmy
k dokumentu bodkou pripravené otvorené zátvorka.
Tak, ako si všimol, Cynthia skôr sme už našli jeden
roh prípad.
Ak ste práve odovzdať funkcia lambda,
Vplyv dolára znak je trochu iný.
V skutočnosti to, čo sa skutočne deje je to, že je to ekvivalentné k tomu,
odovzdávanie v odkaze na globálny objekt dokument
to je globálny, rovnako ako objekt okno
že vám niektoré Špeciálne funkcie
ktorá má vplyv na celú stránku alebo prehliadač a zmení
z tohto dokumentu, kedy to zabaliť s jQuery,
jQuery podstate si uvedomuje, oh, to je referencie
k tomuto zvláštnemu objektu dokumentu,
dovoľte mi, aby som sa zaregistrujte obslužná rutina udalosť s názvom pripravený
ktorý nie je natívna JavaScript a DOM súvisiace.
Pripravený je jQuery vec, ktorá hovorí, že
keď je stránka načítaná všetky prvky HTML
, Ale nie nevyhnutne vložený, všetky CSS a obrázky
a JavaScript súbory a blikať súbory a rád.
Takže, je to krok pred na zaťaženie potom choďte do toho
a vykonať nasledujúce.
A hor sa použitie na pripravený znamená, že môžete, viete,
že všetky prvky v DOM,
všetky jednoznačne identifikované veci s ID, existujú aj
ak je stránka, jeho obsah sú stále načítava a nakladanie
a máte nejaké rozbité ikony na chvíľu
alebo biela stránka v pozadí.
Jo.
>> Čo by sa stalo, ak [nepočuteľný]?
>> Perfektný príklad, perfektné otázka.
Takže, poďme sa pozrieť, či môžeme simulovať to práve teraz.
Takže, nechaj ma ísť dopredu a odstráňte tieto dva riadky sa tu a potom
bez toho aby sa obťažoval na opravu odsadenie, nechaj ma ísť napred
a toto hodnotenie odstrániť tu - Jejda, toto tu dole.
A teraz mi dovoľte, aby som prejsť na stránky, prejdite do formy-2.html a typu
v registri, nič, čo by sa zdalo stane, povedzme, prečo to bolo,
poďme do toho a otvorte up Chrome inšpektora,
otvoriť konzolu proste vidieť keby sa niečo stalo tu, teraz,
Registrácia, stále nič.
Takže, kód je syntakticky jemný
tak som to videl niektorý červené chybové hlásenie,
ale to, čo jasne sa nedeje?
Žiadny z mojich kód je v poriadku, nefunguje to tak nikto
z mojich kódov sa zdá byť prevedenie, tak prečo to je?
No, JavaScript a prehliadače všeobecnejšie vykonávať
Obsah webovej stránky, horný nadol, zľava doprava.
A problém je, že preto, že horná
tejto stránke je HTML potom zamierte potom skript potom ďalší skript,
to bude vykonaný než to, čo je ešte pripravený,
alebo dokonca existuje v strome zastúpenie na stránku.
Forma sama o sebe, ani telo existuje v tomto bode.
Takže, jQuery je dosť šikovný, sa kontrola, že je chyba
že pokiaľ nie je prvok s Unikátny ID registrácia,
že to nebude vyskočiť na vás
a len vyvolať nejakú konzolu chyba a rozbiť celú stránku,
to bude ticho ignorovať vy, ale z dôvodu, že nikto
toto číslo stále vykonáva sa
pretože keď máte registrovaných v tomto odoslať psovoda,
neexistuje žiadny prvok pripojiť ho.
Takže je to trochu nie op tam.
Takže, zadaním miesto, počkajte, kým sa vek bol načítaný
pokiaľ sme urobili window.onload vec, ktorá je trochu
zo starej školy spôsob, ako robiť je alebo sexy jQuery cesta
ako je toto, môžeme povedzte to počkať, kým sa všetky
z týchto HTML tagy majú bol spracovaný tak, aby aj
v prípade, že obrazy neboli načítané, na Aspoň, že uzol je vo stromu,
potom JQuery možno zabezpečiť že všetko, čo tam je.
Jo.
[Nepočuteľný Poznámka]
Áno, dobre, áno, absolútne.
Tak, ďalšie riešenie to, ak ste nepoužili tento
alebo si nepamätal že to existuje,
môžete úplne pohybovať To všetko až na dno
webové stránky, vo vnútri telo stále ale pod formulárom
a ktoré by tiež tento problém vyriešiť.
Je to len typicky považované za zlé praxe.
Je to trochu chaotický a nedbalý špeciálne
ak budete mať rušenie všetko do dolnej časti stránky,
zvlášť keď si nechám veci jednoduché tým, že všetky
z môjho kódu vnútri stránky HTML
keď samozrejme môžete určite sa dostať do zvyk
factoringových to do samostatného súboru
na ktorom mieste je to len pekné
k centralizácii Súbory v hlave.
Okrem tu je cena, ktorú zaplatíte
tým, že JavaScript ďalšie aktíva, ako je CSS súborov
v čele strany, čo je riziko, že sa dostanete?
>> Pomalší načítania stránky.
>> Pomalší načítania stránky, prečo?
>> Vzhľadom k tomu, že sa snažíme načítať všetky knižnice
pred [nepočuteľný].
>> Práve preto, že prehliadače čítať kód zhora nadol,
zľava doprava, ak Google analytics sú pomalé
alebo jQuery CDN je pomalý alebo Facebook API je pomalý
a že súbor práve visí prípadne v závislosti
na tom, ako načítať tento súbor, Celé stránky by zdanlivo prestať reagovať.
A keď vidíte, to veľa úprimne
na webové stránky, ktoré majú veľa nízkej kvality inzeráty
na nich, my sme len jeden pomalý alebo zostrelil webové stránky by mohli visieť stránku
pre niektoré na dobu neurčitú počet sekúnd
až nakoniec prehliadač dúfajme, že časový limit na to
a potom vám ukáže, Zvyšok stránky.
Takže, ak ste sa niekedy používa ako Facebook, rovnako ako tlačidlá,
na svoje webové stránky, nech mi uvidíme, či nájdem to
bez toho aby museli prihlásiť tu.
Takže, ak idete na Tlačidlo Facebook je ako
a kliknite na tlačidlo get kód, sakra,
umožňuje zistiť, či môžeme nájsť príklad,
Určite niekto vyslaný to.
[Pause]
Dám do niekoľkých sekúnd, ak nebudeme vidieť.
Facebook asynchrónne - OK.
Tak, to je kód, a ak že som to zmenil v poslednej dobe
že Facebook skutočne odporúča používať
nahrať svoju knižnicu a v skutočnosti navrhnúť
že ste uviedli do Telo stránky.
Takže, Facebook vám radí vytvoriť akúsi hlúpu DIV
že jednoducho má unikátne ID, ako je , Potom majú tag script
a všetky tieto zložitosti v podstate robí nasledujúce
a nepoužívajte žiadne JQuery pretože nechcú
predpokladať akékoľvek iné závislostí,
dovoľte mi, aby som presunúť tento viac než len trochu.
Takže, všimnite si, že majú anonymné funkcie tu,
viac o tom za chvíľu,
oni potom použite document.createElement,
oni vytvorenie DOM prvok, to je ako malloc tak povediac
prípade, že značka je typu skript, to je potom určujúci
že atribút asynchrónne tejto značky sa deje
aby to bola pravda, potom by ste pokračovať a zistiť, čo URL
z Facebooku JavaScript by mala byť
a to je len fantázia spôsob,
z kontroly by to HGP alebo HDPS.
A nakoniec, môžete Všimnite si, čo Facebook robí,
že sa uzol DOM, ktoré má ID Facebook koreňa
čo je to, čo povedali môžete dať do stránky
a potom sa pripojiť na dieťa takže účinok všetko je
na druh dynamicky aplikovať Nový skript tag do vašej stránky
ako dieťa DIV, ktorý tam vložená tak, že zvyšok
o načítaní stránky sa šťastne
a potom tento kód v skutočnosti sa nahrá asynchrónne.
Takže, v podstate po skutočnosť a ja odložená zmienka
o anonymné funkcie,
Čo je to funky Syntaxe s odkazom na tu
keď mám nielen funkciu otvoriť zátvorka, v blízkosti zátvorka
a potom zložené zátvorky, Preto otvorené zátvorka tu
a potom open close, zatvoriť Paren tam, čo to robíš?
>> [Nepočuteľný] definujúce a potom spustením?
>> Presne tak, je to definovanie funkcia, ktorá je anonymné
ale iba definovanie funkcie,
samozrejme nespustí funkcie, kým sa to volá
podľa názvu, ale samozrejme to je anonymný funkcia
takže nemôžete hovoriť podľa názvu, ale môžete
v JavaScriptu vykonávať anonymné funkcie len
skompletovaním celú vec v zátvorke, ako sme urobili
s týmto zátvorka a to Paren tu a potom k zafixovaniu
na konci funkcie otvorené zátvorka, zatvoriť zátvorka,
ak nechcete, aby prejsť žiadnymi argumenty.
Ale to sa zdá trochu hlúpe,
rovnako ako dôvod, prečo táto dodatočná syntaktické zložitosť
že väčšina ľudí sa nezdalo rozpoznať, čo je hodnota
v balení tých tri riadky kódu
v anonymnej funkciu týmto spôsobom.
Jo.
>> Aby sa zabránilo prepísanie hodnotné [nepočuteľné].
>> Presne tak, aby sa zabránilo prepísanie premenné
na existujúcu stránku, že jo?
Facebook je trochu opovážlivo rozhodol,
idú použiť Premenná E, je to dosť pravdepodobné,
že vy alebo niekto pomocou Facebook ako tlačidlo
alebo akákoľvek iná sociálna zástrčka
v má premennú niekde tzv E. So,
skompletovaním všetkých ich kódu vnútri
tejto anonymné funkcie, ktoré v podstate majú svoj vlastný priestor
že nebude riskovať prepisovanie všetky existujúce premenné.
Takže, aj toto je v skutočnosti veľmi časté paradigma,
najmä pri písaní kód knižnice
alebo ak ste sami nie Chcete neporiadok názov miesta
s ďalšími premennými si Ak hodnota žiť
a umiera, akonáhle ukončíte že blok kódu,
to je pekná technika v JavaScriptu.
Dobrá.
A tak, potom sa k tomuto príkladu tu, všetko, čo sme urobili na konci
sa v tomto príklade je len upratal kód.
Takže, je to stále ešte celý banda prepínačov, celá partia
podmienok tu, ale Všimnite si, trochu syntaxe,
Tento prístup DOM uzol s jedinečný evidenčné číslo,
kozmické prostriedky vyzerajú teraz potomok tohto uzla,
nájsť, či je to z typu vstup a potom aj
ak ste nevideli tento skôr, možno budete vedieť,
že to jednoducho znamená, že si že so vstupným tag,
vstupné prvky, ktoré má atribút názvu s hodnotou
e-mailov, a nechajte ma mávať moju ruku na niektoré
zvyšok nie je všetko, čo stimulujúce
ale naozaj len syntaxe jQuery pre rovnaké operácie.
Dobrá.
Ale čo to nie je tak dôležité, Tu je na strane prehliadač veci
ale skôr to, že sme mal čistejšie a čistejšie riešenie
skutočne robiť že kód práca.
Dobrá.
Akékoľvek otázky?
[Nepočuteľný Poznámka]
OK. A teraz to najzábavnejšie.
Takže, Node.js Prečo?
Koho to zaujíma?
Čo viete o tom dnes?
Node.js, prečo?
Henry [predpokladať, pravopis].
[Nepočuteľný Poznámka]
Resetu batérie?
Čo - to je Perfektné útes vešiak
pre druhý polrok dnes.
Prečo by sme ísť a vziať prestávka tu 5 minút,
tam je polovica cukroví stroj tam, ak by
ako nejaký cukrík bez uvedenie štvrtinu palcov