[Prehrávanie hudby] 

DAVID Malan: Toto je CS50. To je začiatok týždňa deväť. A to je to, čo by malo Bol 200. výročie narodenia pána Boole je. Tak toto je chlapi , Ktorým sme sa zmieňoval docela niekedy o použití Booleovské premenné true a false, 1 a 0 a tak. A to bolo to Google Pocta ním dnes. On by sa obrátili 200. Takže ak chcete Pripojte sa k nám na obed CS50, sa pozrieť na tento odkaz na internetových stránkach Course. A také tváre a priateľom ako Tieto vás čakajú tu v Cambridge. Tváre, ako sú tieto na vás čakajú v New Haven. A v skutočnosti, v Ken New Haven láskavo čo sa nazýva animovaný GIF of Eli tu na nedávny lunch-- GIF je doposiaľ iný grafický formát súboru, s ktorou ste familiar--, že vyzerá trochu niečo také. Takže len sled of-- OK. Nikto tu v Cambridgi sa smeje. Ale v New Haven, to je naozaj na smiech, že jo? Dobre. 

Takže sa k nám tam. Tu na Harvarde, konkrétne, túto stredu, ak ste druhák alebo nováčik even-- alebo dokonca junior-- myslenie tvorby prepínač do počítača veda, viem, že tam bude byť SK poradenstvo fair to Streda, krátko po tom, čo triedy v 4:00 hodín v počítači veda budova Maxwell Dworkin. Dáme na ihrisku je to webové stránky zajtra, rovnako. Donuts, ako mi bolo povedané, sa bude podávať. 

Dobre. Takže smiešny story-- ma strká okolo na internete, a našiel som pár starých archívov môjho bývalého webových stránkach. A ukazuje out-- okolo tohto čas, zdá sa, veľmi aktuálna od tej doby som pochopil, že voľby UC Chystáte sa zariadenie znova. Tak som sa uchádzal o UC, prehral nešťastne. A možno to bolo z časti prečo. Tak toto bola moja webové stránky v tej dobe. Z nejakého dôvodu, myslel som, že to dobrý nápad, než hovoriť ľuďom, čo môj platforme bolo a prečo mali hlasovať pre mňa, že majú kliknutím na tlačidlo pre vstup do zistili, že Informácie, čo pri spätnom pohľade je druh plazivý. Ja naozaj neviem, čo to bolo. 

Ale to rozhodne nie pomoc kampaň. Tiež som zistil, že senior rok-- som mal tento kalendár Muppet. Muppets boli trochu v móde vtedy. Alebo možno, že nie. Mal som kalendár Muppet späť. A ja si myslel, že to bude v pohode názve môj počítač v sieti Harvarde frogman.student.harvard.edu. V tej dobe, všetci sme mali jednoznačne identifikovateľné názvy hostiteľov. A vy ste si mohli vybrať nejaký márnosť meno namiesto svojím vlastným menom. A ja som šiel s žabieho muža z nejakého dôvodu. 

A potom som started-- Strávil som veľa čas preklikne týchto odkazov toto ráno. A to bol môj asi strana, ktorý teraz trochu vyzerá rozkošný. Ale tiež to svedčí len ako ďaleko technológií prišiel. Myslím, späť v deň, 486 bolo niečo. V týchto dňoch, je to super, super, extra pomalý a dobre menej než by ste mohli mať vo vašom vlastné vrecká v týchto dňoch. Tam je viac na tam, že bol ešte trápne. Tak som si to nechať tak. Ale to bol môj prvý vpád do web-- oh, no. To nebolo. Môj prvý skutočný vpád do programovania webu Bol na tomto webe, ktorý som práve zabudol. V určitom okamihu, som sa naučil, ako sa aby opakujúce sa obrázky na pozadí. A tak som našiel obklady efektívne, ako hokejista, futbal a golf plesu, alebo čo to je pre webové stránky frosh IMS. A to bolo v skutočnosti, naozaj Prvý webový projekt, vzal som on-- Myslím, že druháku rok, junior rok-- potom, čo vzal CS50 a CS51, jeden spoločných následných o triedach. Som si všimol pri hľadaní cez archívy že jeden z mojich nástupcov a priatelia, Lee, trochu zmenila autorské práva pre seba. Ale toto bolo naozaj niečo, Mám vlastné hanbou. Ale v tej dobe, toto bol prvý webové stránky, ako som povedal pred pár týždňami, ktorým nováčik mohol zaregistrovať intramurální športy. A tak to dopadá že obrázky na pozadí rovnako ako, že nie sú až tak dobrý nápad. Ale web bol nový, a sme boli všetci experimentovali. A to je to, čo som sa zrejme robil v tej dobe. Dobre. Takže bez ďalších okolkov, zapneme kolesá dnes dať, naozaj, Posledným kúskom, ktorý ste mohli nájsť obzvlášť užitočné pre záverečných prác ale tiež to, že sa začne aby bol celý World Wide Web cítiť trochu zrozumiteľnejšie. V skutočnosti, budeme zavádzať ešte jeden programovací jazyk volal JavaScript, ktorý je podobný a líšia sa v rôznych spôsoboch z jazykov sme sa pozrel na tak ďaleko. 

Takže C, odvolanie, je to skompilovaný jazyk. Musíš spustiť pomocou prekladača. Získate zdrojový kód do objektov kódu alebo nuly a ones. A to sú nuly a tie, ktoré váš procesor, Central Processing Unit, skutočne pochopiť. PHP, naopak, nie je kompilované jazyk. To je čo? Je to interpretovaný jazyk. Takže tam je nejaký program nazvaný interpret, ktorý musí prečítať to-- zhora dole, vľavo right-- a zistiť, čo všetko Váš syntax robí a prostriedky, či už je to slučka alebo stav alebo akékoľvek iné číslo programovania konštrukty. Tak to je interpretovaný jazyk. 

Potom sme sa predstavil HTML. A HTML nie je ani programovací jazyk. Mali by sme hovoriť, čo? Značkovací jazyk, ktorý je len druh fantázie spôsob, ako hovoriť to nemá programovacie pojmy ako sme videli aj späť v deň Scratch. Neexistujú žiadne slučky. Neexistujú žiadne podmienky. Je to naozaj je jazyk o označovaní svoje dáta a formátovanie, alebo štruktúrovanie ho nejakým spôsobom. 

CSS, zatiaľ, obdobne nie je programovací jazyk. Je to ešte viac esteticky orientovaná. A to vám umožní triediť z doladiť veci, ako je veľkosť písma a farby a umiestnenie, a to všetko. Potom sme mali 

SQL. Takže SQL je naozaj programovací jazyk v nejakom zmysle, aj keď na mieru konkrétne k databázam. Ale aj keď sme len predstaviť vám vyberte a vložiť a odstrániť, a aktualizovať a pár druhých, Ukazuje sa môžete skutočne písať funkcie, alebo postupy, ako sa im volal, v SQL, ktoré vyzerajú a konajú celkom ako PHP a C funkcií. Takže viem, že tie, ktoré existujú. Ale my ani obťažovať s nimi ako sme práve poškrabať povrch tu. A potom JavaScript, posledný oficiálne predstavil naše jazyky. Takže JavaScript, tiež, je interpretovaný jazyk. A tých, ktorí poznajú, robiť Chcete ju rozlíšiť s niektorými charakteristikou z oboch C a PHP? Čo ho odlišuje? 

Divákov: To nie je zostavený. 

DAVID Malan: znova, povedz? 

Divákov: To nie je zostavený. 

DAVID Malan: To nie je zostavený. Takže to, tiež, je interpretovaný. Takže to nie je zostavený. Ale to robí to tak trochu ako PHP. Ale je to stále odlišné od PHP nejakým prekvapivým spôsobom, aspoň v tom, ako budeme používať. Jo? 

Divákov: To beží na strane klienta. 

DAVID Malan: To beží na strane klienta, zvyčajne. To je skutočne rozlišovaciu Charakteristické pre nás práve teraz. C bola na strane servera v tom zmysle, že sme urobili všetko, čo v CS50 IDE. PHP sa doteraz na strane servera, ak ako to taky, dostane interpreted-- nie je vybudovaný, ale interpreted-- Vnútri CS50 IDE, čo je samozrejme len server alebo servery v cloude. 

Ale JavaScript ani Aj keď idete začať písať to, povedzme, pset osem a možno konečný projects-- ste bude pravdu, že v CS50 IDE a uložte ho v súboroch vnútri CS50 IDE, CS50 IDE a, podľa poradia, sa oblak servery na ktorej je umiestnený, sa nebude interpretovať alebo spustenie kódu. Skôr to bude byť zaslané nezmenenej podobe dole do prehliadača. A to potom bude IE alebo Chrome alebo Firefox alebo Safari alebo čo to vlastne interpretuje to, zhora nadol, zľava doprava. Takže kľúčové rozlišovať charakteristický pre dnešok je to, že JavaScript je na strane klienta a PHP, napríklad, bol na strane servera. Teraz, toto má zaujímavé dôsledky pre, ako, duševné vlastníctvo a kto môže skutočne vidieť váš kód. A skutočne, môžete ísť na webe a pozrite sa najviac akýkoľvek kód, ktorý niekto má napísaný v JavaScripte. Niekedy je to čitateľné, Niekedy je to poplietol. Ale o tom viac v pravý čas. 

Takže JavaScript dosť pekne, je Super podobné, syntakticky, aby C. A podobne ako PHP, nie je hlavné funkcie. Ak chcete začať písať Kód JavaScript, ako uvidíte dnes, stačí začať písať to. Ale to je, uvidíte, zvlášť užitočné v súvislosti s webových prehliadačov. Avšak, môj malý disclaimer-- zvyčajne earlier-- bolo povedať, že môžete stále viac dnes používajú JavaScript na strane servera pomocou fantázie rámca s názvom Node.js že niektoré z vlastnej aplikácie je CS50 sú písané. Skontrolujte, či v skutočnosti používa 50 Node.js. Ale budeme sa sústrediť na JavaScript na strane klienta tu na von. 

Takže tu je súbor podmienok v PHP. Je nám ľúto, in-- skutočnosti, že tvrdenie, tiež je správne. Tu je tiež sada podmienky v JavaScriptu. Syntakticky, to je identická s C a PHP. Výrazy pána Boole sú, Rovnako tak, syntakticky identické s oboma C a PHP. Máme tiež spínače v JavaScript, že vyzerajú totožne. Máme pre slučky, ktoré sú štruktúrované identicky, while, robiť, zatiaľ čo slučky. 

To je trochu iný. PHP mal pre každý konštrukt že by ste mohli byť pomocou alebo budú používať v pset sedem, možno. JavaScript má túto špeciálnu verziu pre, kde ste doslova povedať niečo ako variabilný kľúč v objekte, ktorý je veľmi stručná spôsob, ako povedať, či som dostal object-- a my hovoriť o nich opäť v moment-- a chcem k iterácii cez všetky párov kľúčových hodnôt vo vnútri, Nemám prísť na to, ako sa číselne index je s nula, jedna, dva, tri. 

Môžem doslova povedať. A v každej iterácii, JavaScript pre mňa bude aktualizovať premennú kľúč , Že je prvý kľúč, potom ďalšie kľúč, potom ďalší kľúč, potom ďalší kľúč, a tak ďalej. A môžem dostať na svojej hodnote spracovaním objekt v JavaScripte, ako uvidíme, ako keby je to asociatívne pole v PHP. V skutočnosti, ak ste konečne svoj zabalené myseľ okolo toho, čo asociatívne pole je v PHP, môžete si o tom myslíte teraz as totožný s objektu v JavaScriptu. Ale to je trochu oversimplification. 

Pole vyzerajú dosť pekne, totožný do PHP až na jeden znak. Je tu jedna vec tu chýba že sme videli minulý týždeň s PHP. Čo vynechať? Jo? Žiadne znak dolára. Takže sme späť do A normálnejšie svete, kde premenné nemajú znaky dolára. Ale vy ich prefix s var, typicky. A var znamená premenné. A podobne ako PHP je voľne typed-- pričom tam sú typy, tam sú čísla a reťazce a plaváky a tak forth-- JavaScript má podobne typy. Ale je to voľne napísaný v tom, že sme programátori nemusíte špecifikovať. Len musíme byť vedomí že rôzne druhy existujú. 

Premenné, meanwhile-- tu je návod, ako môžeme prehlásiť "ahoj, svet" ako reťazec. Všimnite si, že je totožný s PHP ale žiadny znak dolára. A to je niečo, čo budeme začnete vidieť viac dnes, kedy máte objekt s kľúčmi a hodnotami. A ak si chcete vyskúšať vyvodiť z posledného week-- Syntax je trochu iný. Ale trochu zdravý rozum check-- koľko Kľúče to objekt sa zdá, že? Tak vidím štyri. Vidím dva. 

Takže je to vlastne dva. Takže toto je kolekcia z dvoch dvojíc kľúč-hodnota. Kľúčom k úspechu je symbol, ktorého hodnota je FB. Kľúčom k úspechu je cena, ktorého hodnota je 101.53. To sú len dva páry kľúč-hodnota. A pamätajte si, PHP-- a to je opäť tak nejako syntaxe rozdielu. To nie je všetko, intelektuálne zaujímavé. PHP môže písali to isté vec ako follows-- citovať, rovná. A ja ich zmeniť na hranatých zátvorkách. A potom som sa zmeniť na kótovaná slovo, "cena". A potom som sa nepoužívajú dvojbodku. Čo som používať minulý týždeň? Jo, znamienko rovnosti šípka funky notácie. 

A potom som urobil to isté tu. To isté tu. A to je všetko. Takže je to v poriadku, ak to nemá naozaj klesol do pamäte len Zatiaľ, pretože je to naozaj intelektuálne nezaujímavé. Je to len syntaktické rozdiely. Ale myšlienky sú úplne rovnaké. Vnútri tejto premennej citácie v JavaScripte je zbierka dvojíc kľúč-hodnota, z ktorých jeden je symbol, z ktorých jedna je cena. A môžem dostať na týchto hodnotách s nasledujúce syntaxou. Rovnako ako v PHP, mohol by som niečo jako-- rokov mi, aby som tento box o niečo väčší. Rovnako ako v PHP, mohol by som aby tohle-- oh, sakra. No ták. 

Rovnako ako v PHP-- OK, budeme stačí použiť prezentujúceho poznámky. Rovnako ako v PHP, môžem robiť $ ["symbol"] Citácia $ citovať, a to ma dostane Hodnota "symbol." V JavaScriptu, že to bude identické, čím som si len to urobiť. Jediná vec, ktorá je chýba, je znak dolára. 

Tak dosť dobre, potom, je tu nie je všetko, že veľa nového syntaxe. Takže to, čo dnes sme sa sústredili na, naozaj, je niektoré myšlienky a aplikácií. A prvé, ako aplikácie, ktoré by vás mohli Videl ste skočil do ak pset seven už je táto syntaxe. Takže pset sedem, ak ste Videl alebo nevidel to ešte, viem, že tam je súbor, ktorý dávame ste volali config.json-- JavaScript Object Notation. Prečo? Chceli sme byť schopní poskytnúť vám šablóny s niektorými dvojíc kľúč-hodnota. Chceli sme byť schopní dať vám zoznam hostiteľa, názov servera. Chceli sme, aby vám vzniku zástupný symbol pre vaše užívateľské meno a zástupný symbol pre heslo. Ak si nie ste vidieť to ešte, nie sa báť. Viac na túto tému v pset siedmich [? špec. ?] A potom, Je zrejmé, že chcete, vyplniť v na-DOS pretože keď sa prihlásite do CS50 IDE, každý z vás mať svoje vlastné užívateľské meno a heslo. 

Takže sme mohli sme použiť pol tucta alebo viacerých rôznych formátov súborov. Mohli sme použili súbor TXT. Mohli by sme použiť súbor vo formáte CSV. Mohli sme použitý INI súbor, súbor vo formáte XML, celá partia ďalšie skratky, ktoré ste možno ešte nikdy nepočul. Je to trochu ľubovoľný na konci dňa. Ale mimoriadne populárne v týchto dňoch je text formát nazvaný JSON-- JavaScript Object Notation-- že vyzerá takto. Je to trochu záhadný, nevšimnúť vzory. Začnete s otvorenou kučeravé rovnátka, a vy skončíte s rovnaké. Vnútri to je niečo. Je to pár kľúč-hodnota. Takže to je objekt, ktorý ja som pri pohľade na na obrazovke tu že má jeden kľúč, ktorý má jednu hodnotu. A práve odvodzovať založený na predchádzajúci model, aký je kľúč tu? Databáza je vec ľavá hrubého čreva. 

Teraz, hodnota sa stane byť A viac riadkov tejto dobe. Ale hodnota začína kučeravé rovnátka a končí s zložená zátvorka. Takže to, čo by ste navrhovali je typ hodnoty databázy? Slovník, alebo len viac stručne, objekt. Je to tak? To je druh dátové štruktúry, ktoré Môžete použiť aj iné štruktúry v sebe. Takže ak celá tá vec, že ​​sme zvolať object-- a objekt je len banda kľúč-hodnota pairs-- hodnota samotnej databázy je objekt. Hodnota databázy má veľa kľúčových párov hodnôt, z ktorých prvý je hostiteľ, pomenujte, a potom užívateľské meno, potom heslo, každý z ktorých hodnoty, zatiaľ, je to len nudný reťazec v úvodzovkách. 

Takže aj keď to nie je super jasný ešte nie, viem, že to je len štandard, docela nudný spôsob, ukladanie dát v štandardnom formáte. Ale spoločné chybách ktore ste tu by mohol robiť, a to aj v pset sedem, sú malé hlúpe veci, ako keď náhodne vynechať čiarku tam. To bude mať za následok súboru nie nevyhnutne byť čitateľný. Ak omylom vynecháte veci, ako je citácie, to nebude čitateľný. Takže je to celkom nitpicky formát súboru, ale to je ten, ktorý je mimoriadne bežné. A my náhodou používať, aj keď nechcete používať niektorý kódu JavaScript inak, V pset sedem. 

Dobre. Takže pamätajte tento obrázok. Hovorili sme o, v HTML, že kód môže vyzerať napríklad takto. To je HyperText Markup Language [Nepočuteľný] len za "Hello, World". Ale potom sme navrhli zatiaľ čo späť, že ak to pomôže, možno budete chcieť začať premýšľať o tom už ako strom. V skutočnosti, že zárez používať len pre čitateľnosť príčinu alebo kvôli na štýl je ľavá môže druh byť preložený do tohto stromu, kde na vás mať nejaký špeciálny koreňový uzol, že budeme druhovo nazvaný dokument, pod ktorou je koreňom HTML element alebo tag, HTML, ktorý potom má dva deti, hlava a telo. 

A potom zase hlava má titul. A titul má hodnotu textu. A telo má podobne ako textovú hodnotu. Takže ak vám vyhovuje príslovia že áno, mohol by ste tento HTML a nakresliť obrázok, ako je to je pravá strana je pekný mentálny model, pretože teraz že máme JavaScript programovanie jazyk, ktorý prehliadačov vykonávať a interpretovať pre vás, Ukazuje sa, že to, čo sa chystáme urobiť v kóde sa začne manipulovať tento stromová štruktúra v pamäti. Nemusíme budovať strom v pamäti. Nemusíme robiť druh Štruktúra dátovej pset-five-style zložitosť. Prehliadač, pekne dosť, na tlmočenie HTML zhora nadol, vľavo alebo vpravo, je doslova chystá ruka USA ekvivalent ukazovateľ k tomu celý strom zadarmo. To robí všetky tvrdej práce. To je to, čo Mozilla a Apple a iní urobili pre nás. 

A s JavaScript budeme byť schopný ovládať a meniť a robiť zaujímavých vecí že strom, inak známy ako DOM alebo Document Object Model. Aké veci? No, to ukáže, že v JavaScripte, je tu tento pranie zoznam udalosti, ktoré sa môžu uskutočniť. A my sme naozaj používal to Slovo od týždňa nulou a pset nulu, keď sme hovorili o Scratch. Väčšina z vás asi nepoužil udalosť vo vašom Scratch projektu. Ale vy ste možno pamätáte jednoduché Marco Polo Príkladom, kde sme mali dve škriatkovia, z ktorých jeden z nich povedal, Marco. Druhý z ktorých potom po počúvaní a počuť, že udalosti, povedal, Polo. Ak nie, neváhajte obzrieť sa, že ďaleko dozadu. 

Ale to je len preto, aby hovoria, a môžete druh vyvodiť z názvov týchto veci, JavaScript, to dopadá, sa chystá dať nám spôsob, ako počúvať pre myš ísť dole alebo myšou ísť hore klávesy alebo ísť dole, alebo klávesa ísť hore alebo onSubmit onSelect alebo onresizing niečo. Inými slovami, akýkoľvek fyzikálne pôsobenie že človek môže mať s prehliadačom , Čo robíte každý deň, môžete písať kód, ktorý počúva na tieto udalosti a potom robí niečo vhodné. 

Napríklad, ak používate Google Maps, čo sa stane, keď kliknete na tlačidlo a presunúť myši, zvyčajne? Ak kliknete na tlačidlo a pretiahnite? Jo? Presne tak. Mapa začne pohybovať. Takže môžete nejako vidieť, čo je tu čo je tam. A ako to, že Google implementovať? No, podľa všetkého, sú to za použitia pár týchto udalosti poslucháči, jeden, ktorý hovorí, počúvajte, na myš down-- takže keď sa používateľ fyzicky tlačí jeho trackpade alebo jeho alebo jej myš nadol. A potom hľadáme niečo ako pohyb alebo niektorá iná udalosť nám umožňuje zachytiť odpor. A v skutočnosti, pretiahnite je podobne v tomto dot dot dot zoznam možných volieb. 

Takže to bude silný spôsob, ako začať reagovať na užívateľovi ešte predtým, ako on alebo ona vlastne klikne niečo ako explicitné odoslať. Ale my chystá zaviesť pár tém sa tam dostať. Prechod ale najprv, poďme do určitej aktuálny kód. Takže ja idem vpred a otvoriť dom-0, čo je veľmi jednoduchý príklad tu, že keď som sa priblížiť jednoducho má tento vstup tu na mňa. A ja sa do toho pustite a zadajte "David" pre moje meno a kliknite na tlačidlo Odoslať. 

A potom, aj keď nejako lacno, I majú túto výzvu, ktorý sa objaví, ktorá hovorí, "Ahoj, Davide!" Takže to je druh Rovnako ako naše "ahoj, svet" že sme urobili chvíľu späť v C a dokonca v PHP, pretože som dynamicky výstup moje meno. Môžem robiť tú meno niekoho iného. Mohol som jednoducho zmeniť to, ako, Hannah, kliknite na tlačidlo Odoslať. A skutočne, tie malé pop-up zmenám. 

Teraz, pop-up sú jedným z väčšina zneužívané vlastnosti webu. A v skutočnosti, v roku jednodňové pop-up blokátory prišiel do módy, pretože vás by ísť do nejakej website-- možná diskutabilné place-- že by potom náhle začať zasypával obrazovky s celou partiou pop-up okná. A tak táto schopnosť pop-up okná pred používateľom nebola zvlášť dobre prijatý ľudstva. Takže to je dôvod, prečo ste vidieť to zabrániť vec, ktorý jednoducho robí to celé škaredé. Takže budeme potrebovať lepší spôsob, ako vyzvať užívateľa. Ale teraz, to zdá sa k práci. Takže len intuitívne, čo Zdá sa, že sa to tu deje? Idem do toho a kliknite na tlačidlo Odoslať, a potom sa niečo deje, jasne. Ale to, čo sa nestane, že sa stalo Minulý týždeň kedykoľvek klikol som Odoslať? Čo sa nestalo na obrazovke? Prosím? Obnoviť. Adresa URL nezmenil vôbec. Povedal som, že to dom-0, a ja som stále na DOM-0. Za normálnych okolností by sme sa prezliecť k niektorým iný URL, ako register.php alebo podobne. 

Ale aj keď som sa odbiť táto vec kliknutím na tlačidlo OK, Všimnite si, že adresu URL zostáva úplne dal. A v skutočnosti, keď som trochu skeptický, dovoľte mi, aby som otvoriť Chrome. Dovoľte mi, aby som otvoriť kartu Sieť. A všimnite si, že je to prázdny v túto chvíľu. Nechaj ma ísť dopredu a znovu Maria. Neexistuje žiadny sieťovú prevádzku vôbec. Takže nie je HTTP. 

Takže naozaj, keď som sa pozrieť do zdrojového kódu pre tohle-- dovoľte mi, aby som toto okno zavrieť a ísť do zobrazenia zdroj. Zaujímavé. Vyzerá to, že tam je nejaký Nové značky, medzi nimi aj scenár. Takže poďme sa pozrieť vnútri CS50 IDE presne to, čo som poslal k užívateľovi. 

Tak tu je-- poďme sa zameriavajú iba na HTML. Tu je spodná polovica DOM-0.html. A všimnite si, že to má titul, tag hlava, telo značky, značka forma. Ale to, čo vyskočí na vás, ako rôzne, najmä ak ste nikdy napísal akýkoľvek JavaScript sami. Dovoľte mi, aby som sa trochu posunúť k práve tu. Mám vstup, ďalší vstup pre odoslať. Mám ID, ktorý je tak trochu nové. Ale my sme sa vidieť s CSS. Čo iného je určite nové? Jo? Nice. 

Dobre. Takže tam, kde sa hovorí onSubmit, Všimnite si, čo sa zdá nasledovať. Toto je atribút HTML názvoslovie. Jeho hodnota je tento reťazec v úvodzovkách tu. A to vyzerá trochu divný na prvý pohľad. Nie je to HTML. Nie je to CSS. To je, ako asi tušíte, JavaScript. Takže sa zdá, že vstavaný do toho webová stránka je funkcia nazvaná pozdraviť. A ja odvodzovať, že práve pretože je to slovo, pozdraviť. Má to otvorené zátvorka, zavrieť dvorenia, bodkočiarka. Vyzerá to, že funkcia C, vyzerá ako funkcie PHP. 

A skutočne, to bude je funkcia JavaScript. Potom Vraciam false. Vrátime sa do že za chvíľu. Ale kde je táto funkcia definovaná? No dovoľte mi, aby som posúvať nahor na začiatok súboru. A aj keď je to dlhá fronta, je to pomerne jednoduché. Dovoľte mi, aby som tu a oddialiť zamerať sa na týchto štyroch riadkoch. 

Takže v jazyku JavaScript, len ako PHP, stačí povedzme, doslovne, slovo "funkcie" názov funkcie, a potom zátvoriek s akýmkoľvek arguments-- žiadne argumenty v tomto prípade. A nie je to žiadny typ návrate v JavaScriptu, rovnako ako PHP. Takže je to trochu voľnejšie ako C. Otvorená zložená zátvorka, v jeho blízkosti je zložená zátvorka. Zabudované do JavaScriptu je function-- neodporúča sa function-- ale funkcia nazvaná upozornenia ktorých jediným účelom v živote je vytiahnuť, že celkom škaredý vyzve, že sme videli pred chvíľou. 

Teraz to je druh sústo. Čo sa to tu deje? Takže poďme začať zvýrazniť tu všetko. To je rovnaký argument upozorniť. A čo sa deje? To len vyzerá ako reťazec. A ukázalo sa, na rozdiel od PHP a na rozdiel od C, nezáleží na tom, v JavaScripte ak ste jednoduché úvodzovky alebo dvojité úvodzovky. Budú rovnocenné. A úprimne povedané, je to len populárne v týchto dňoch pre programátorov JavaScript vždy používať apostrofy z nejakého dôvodu. Je to len vec. Ale my sme mohli použiť úvodzoviek, rovnako. 

Tak a je nový znak. Ale tí z vás, ktorí ste urobil predtým, čo to naviac znamená? Jo. Zřetězit. Tak sme to videli v PHP. Je tu len bodka operátor v PHP, ktorý bude zřetězit dva reťazce dohromady. C bola bolesť v krku, ako to urobiť. Pripomeňme z pset šiestich, ktorý bol Špeciálne, bolesť v krku, budete musieť použiť niečo ako strčí po prideľovanie pamäte na zásobníku alebo haldy. Museli ste preskočiť obručou Len zřetězit dva reťazce. V JavaScriptu, je to super jednoduché. Stačí použiť operátor a navyše medzi nimi. 

Takže komplexné vyzerajúci vec sa zdá, že je to preto, že na konci Celý tento reťazec, len som zřetězit na výkričníkom. Takže ak to, čo sa objavovať sa "Dobrý deň, David", "ahoj, Hannah," "Dobrý deň, Mária," a tak ďalej, jasne že stredná vec medzi dvoma plusy mi musí dať prístup k čomu? Čo je tam pre istotu? Jo. Takže budem tu predstierať odpovie svoje meno, že jo? Takže ich meno objavilo vo finále výsledok. Takže čo to znamená? No, som navrhol, že predtým v Obraz, ktorý tzv DOM má tento osobitný koreňový element spôsob up top s názvom dokumentu. A teraz sa ukazuje, že sa deje za zvláštne globálne premenná v JavaScripte, vstavaný do čo je celý rad užitočných funkcií. Medzi užitočné funkcie je schopnosť dostať za každú potomok uzla. Tieto štvorce či obdĺžniky alebo elipsy sú len uzlov v strome, aby som tak povedal. 

Tak to dopadá, že vstavaný do JavaScript je objekt dokumente je funkcia, inak známy ako metóda, ktorá sa nazýva getElementById. Syntax pre volanie funkcie v JavaScriptu že je vo vnútri objektu alebo premenná je práve s tečkové notácie. A my sme videli to v C aký syntaxe struct. Vidíte to v pset sedem, druh, druh, keď vidíte CS50 :: dotazu. Dvojbodka dvojbodka v PHP je ďalší spôsob volanie funkcie, ktorá je vnútri nejakého objektu. 

Ale teraz v jazyku JavaScript je to len bodka. A tak táto funkcia, dosť pekne, druh hovorí, že to, čo does-- dostať element ID. Prvok je len iný názov pre uzol etikety alebo v DOM. A tak si prvok podľa ID "meno" znamená tohle-- tu je môj HTML. A na základe tejto HTML, čo uzol, alebo to, čo HTML tag som ja bude programovo byť odovzdaný volaním document.getElementById? 

Jo, presne tak. Chystám sa dostať vstup element existuje, ktorého ID je "názov." Takže konkrétne, môžete myslíte o tejto funkcie, getElementById, ako spôsob, ako dať späť ukazovateľ na túto konkrétnu uzol vo stromu. Ešte sme to vypracované strom, ale je to spôsob, ako ako získať prístup k tejto obdĺžnik alebo že obdĺžnik by jednoznačne ju identifikovať pomocou jeho ID. 

A teraz, prečo je to užitočné? No, to dopadá že akonáhle ste sa dostali že uzol, že obdĺžnik od obrázok, že uzol vnútri nej, naopak, má veľa párov properties-- kľúč-hodnota alebo dáta, z ktorých jeden sa nazýva hodnota. Takže doslova, je to niečo ako sústo vysvetliť celú vec. Ale na konci dňa, to všetko robí, je, aby vám reťazec, ktorý užívateľ zadal V tomto hierarchicky. Ale ja nepáči niekoľko z týchto vecí. Alebo skôr, je tu ešte nejaký zvedavosť. To všetko sa zdalo, že funguje. Prečo myslíte, že som sa vrátil false po zavolaní pozdraviť? To vyzerá trochu škaredé, že Mám dve vyhlásenia tu oddelené bodkočiarkami. Hádať. Ak by som odstránil return false, čo Môže sa stať, jednoducho inštinktívne? Ospravedlňujeme sa, ale ešte raz? 

Otvorte veľa Windows. Takže potenciálne možno niečo ako že sa to stane. Čo ešte? Možno podať žiadosť Kde? Na rovnakej stránke. Takže v skutočnosti, že je to čím bližšie odpovedať tu, aj keď, na rozdiel od V minulosti som nie zadaný atribút akcie, ktorý normálne musíme urobiť. Ukázalo sa, že je tu predvolené. Ak nechcete určiť akciu, to je ako povedať ponuku, koniec citátu alebo názov súboru sám, čo by v tomto prípade byť ako dom-0.html. Je to len druh vyvodil, alebo skôr implicitné. 

A tak keď sa mi to urobiť, poďme si všimnúť. Dovoľte mi, aby som to zachrániť. A ja som odstránil return false. Nechajte ma vrátiť sa k tomu príklad a silu znova načítať. A ste mohli vidieť mi navrhnúť to na CS50 Diskutujte veľa časov. Ak niečo sa niekedy jedná funky a prehliadač nie je správa podľa predpokladov, často budete chcieť držať Shift a potom kliknite na tlačidlo Načítať znovu. To bude nútiť každý súbor znovu načítať a nesmú používať vo svojom prehliadači medzipamäť miestnej alebo kópiu tak, že teraz, nechaj ma ísť dopredu a otvoria svoje Inspector na kartu Sieť. Budem kliknite Zachovať Prihlásiť preto, že som Nechceme, odstrániť riadky Raz som si odviedol preč inde. 

Nechaj ma ísť dopredu a tu zadajte Andi, kliknite na tlačidlo Odoslať. Dobre. To vyzerá, ako sa očakávalo. To hovorí, že "ahoj, Andi." Dovoľte mi, aby som na tlačidlo OK. Zaujímavé. Všimnite si, že stránka zmenila, aj keď na pôvodnú stránku. Všimnite si URL druh zmenil. Dodala, otáznik, čo je zvyčajne indikátorom že sme sa snažili predložiť niečo. A potom sa na dne, ešte jasnejšie, Tu je aktuálna požiadavka HTTP, ktorý má odozvu 200, ktoré priviedol ma sem. 

Takže to nie je to, čo chceme urobiť, nie? Pretože nechcem, aby znovu načítať celú stránku. Namiesto toho som sa chcel vrátiť false tak, aby sa skratu predvolené správanie prehliadača, ktorý bol, samozrejme, aby predložila stránky. 

Takže poďme sa pozrieť na okrajovo lepší príklad. To je dom verzia raz. A všimnite si nasledujúce. To je v poriadku, ak nechcete Grok všetky riadkov kódu. Ale to, čo je zásadne odlišný o tomto plnení? Budem stanovuje, že sa chová To isté, robí to isté. Čo som zrejme urobil inak? Jo? 

Divákov: [Nepočuteľné]. DAVID Malan: Jo. Takže funkcia je definovaná differently-- inými slovami, neprítomných z formulára, tam hore na linke 7-- alebo skôr, linka 8-- už mám tú onSubmit atribút. V predchádzajúcom príklade, mal som to. A potom som doslova napísal môj kód tu. A potom som povedal return false. A ak to nebolo trieť ste ešte na zlú cestu, to by malo začať, ak as, rovnako ako v HTML, kedy sme začali spolupracovať zmiešať ju s CSS v atribúty štýlu, to práve začal trochu chaotický, alebo cítiť trochu zle. 

Rovnako tak tu, ak začnete HTML, a potom automaticky PLOP nejaký kód JavaScriptu v stredu reťazec v úvodzovkách, je to Nebude veľmi udržiavateľný. Je to tak? Nie je to ani zjavné na prvý pohľad miesto, kde je kód JavaScript je. Tak to by bolo naozaj pekné, ako princíp lepšieho dizajnu, poďme sa udržať naše HTML úplne oddeliť od nášho JavaScript. 

Takže na to, že to, čo máme tu urobil je following-- jednoducho pomocou HTML len pre značkovanie. A tak v prevedení jednej z toho, všetko Mám je forma s jedinečným ID. A potom tu dole, som využil zo špeciálnej funkcii JavaScriptu ktorým môžem mať to, čo je volal anonymné funkcie. Tak to dopadá, že keď hovorím document.getElementById o "demo" to je ako, že mi ukazovateľ tento uzol v mojom strome, forma prvok, tak povediac. 

Teraz, ja len viem od vedel, trochu HTML teraz sme čítali niektoré on-line referencie, že forma prvok podporuje celá partia akcie v listeners-- Inými slovami, zoznam bielizeň akcie poslucháči, že sme videli pred chvíľou. Viem, že pri čítaní dokumentácie že onSubmit je platný udalosťou poslucháč na element formulára. 

Takže akonáhle Viem, že, je to bezpečné pre mňa following-- dostať ten uzol zo stromu, forma prvok, a prístup k jeho tzv onSubmit vlastnosť. Takže bodka jednoducho znamená, To je vlastnosť, ako zvláštne hodnoty vnútri nej. A aký typ dát som ja priraďovanie, zdá sa, na onSubmit, čo je účinne premennú vnútri tohto uzla vo stromu? Je to pole vo vnútri tohto struct. Aký je dátový typ? 

Funkcie, jo. Tak to dopadá, že PHP má tento. A aj keď sme Nepovedal vám o tom, C má tiež ukazovatele na funkcie, o schopnosť prejsť a priradiť funkcie ako samotných hodnôt premenných. A my nejdeme vracať sa späť na C. Ale teraz, sa ukazuje, že Na pravej strane sa tu, aj keď to vyzerá trochu funky, to znamená, hej prehliadač, daj mi funkciu. Nebudem sa ani neobťažoval dať to meno, pretože som doslova chystá priradiť nazvime to adresa tejto funkcie okamžite onSubmit. Inými slovami, prehliadača, nepotrebujete vedieť, čo táto funkcia sa nazýva. Musíte len vedieť, ak je v pamäti. A tak stačí len preto, aby majú znamienko rovnosti tam a nezaťažovať vymenovať to, ako foo alebo pozdraviť alebo akékoľvek iné slovo. A teraz je to len štylistický vec. Mohol by som presunúť zložená zátvorka na the-- sorry-- ďalší riadok ako my zvyčajne robia CS50. Ale v JavaScriptu, je to skutočne štýlovo obyčajný len držať zloženú zátvorkou sa Prvý z nich, v tomto prvom riadku. 

Ale ďalej, je tu nič zaujímavé. To open zložená zátvorka len vymedzuje začiatok mojej funkcie. Funkcia je teraz totožné, s výnimkou som zahŕňali return false vnútri tejto funkcie. Vzhľadom k tomu, že sa otočí out-- A vy by ste len viem, že to od čítania documentation-- že ak funkciu, ktorú priradíte na onSubmit psovod vráti hodnotu false, prehliadač proste vie a súhlasí s tým, Nie je odoslať formulár na server. Ak sa vráti hodnotu true, bude predkladať že k serveru z dôvodov, uvidíme, sú užitočné len na chvíľu. 

A potom sa po bodkočiarka Kučeravý rovnátka tam proste znamená, že som urobil definovanie funkcie. Viete, čo máte čo najskôr zavolať ako počujete podanie. Dobre. To je stále pravdepodobne trochu škaredé. Takže čo viac môžeme urobiť? 

No, to dopadá potom v verzia dve, čo je last-- a my si len pohľad na to. Na existuje nebezpečenstvo, že to škaredšie, sa ukazuje, že je tu knižnica svet volal jQuery. A jQuery je super populárne knižnica JavaScript to je tak populárne, že väčšina akýkoľvek JavaScript-- to nie je nezvyčajné pre ľudí pletú jQuery s JavaScript. Prečo? Samotný JavaScript má veľmi verbose spôsoby, ako robiť things-- document.getElementById, dadadadadada. Môžete skončiť s veľmi dlhých riadkov kódu. 

Takže chlapík menom John Resid, kto vlastne pracuje pre uvedenie do prevádzky up v týchto dňoch, vyšiel s touto knižnicou rokov Pred, že mnoho ľudí prispelo k tzv jQuery, ktorý mení syntaxe v nasledujúcom spôsobom. A len tak ste videli to, pretože budete vždy pozri, pokiaľ Doing záverečný projekt web-based, to by bolo ekvivalentné spôsob ktorým sa vykonáva, že rovnaké funkcie pomocou Táto špeciálna knižnica. 

Teraz, skôr než dráždiť že od seba v celom svojom rozsahu, nech to len pozrieť na niektoré vzory. Táto syntax vyzerá, že má koľko anonymné funkcie alebo bezmenných funkcie alebo AKA lambda funkcie? Dva, jo? A viete, že aj v prípade, nie ste mimoriadne pohodlné s tým, len tým, že skutočnosť, že sa hovorí, že funkcia () dvakrát. 

A ukázalo sa, že čo tento kód je doing-- a budeme odkazovať na on-line referencií, nakoniec, o nejakú pomoc s tým. To jednoducho znamená, že pri Dokument je teraz pripravený, pokračovať a zaregistrovať nasledujúce funkcie ako predložiť handler pre HTML prvok, ktorého jedinečný nápad, je demo. A potom, keď sa to stane, volať tieto dva riadky kódu. A to je, tragicky, viac verbose spôsob, ako hovoriť return false. A sme spomenuli to len preto, uvidíte kód, ako je tento online. A nie je to nič, aby sa odradiť. Ale skôr, majte na pamäti, že to, čo je Bude obyčajný v JavaScripte to je paradigma. A tak to je dôvod, prečo sme to ukázať teraz. Dobre. Takže bez obydlia príliš veľa na tom syntax, sú tam sú nejaké otázky týkajúce Tieto príklady alebo nápady tak ďaleko? Dobre. Takže poďme použiť pre niečo užitočného. Tvorba webovú stránku, ktorá jednoducho hovorí ahoj, tak a tak nie je všetko tak zaujímavé, nie chladným. Ten to nebude byť krásne, ale to bude robiť niečo užitočného. Nechaj ma ísť späť do môjho adresára tu a otvoriť, povedzme, form-0.html. 

Takže predpokladám, že je to nováčik intramurální športové registračnej stránke bez akéhokoľvek CSS alebo žiadnom zmysle dizajnu. A ja chcem, aby do toho pustite a registrovať tu s heslom. A budem súhlasiť s podmienkami a podmienky, a kliknite na tlačidlo Registrovať. A teraz na internetových stránkach hovorí: "Si registrovaný! (No, nie tak celkom.) " To sa zdá, ako by to fungovalo, ale nechaj ma ísť napred a donútiť Znova načítať. 

A dovoľte mi povedať, nie, to nie potrebovať moju skutočnú e-mailovú adresu. Alebo možno budeme len povedať, poštu tam. Heslo bude, rovnako ako, 12345. A potom, práve preto, že som idiot, teraz je to 123456789. A ja nebudem skontrolovať políčko. 

Hmm. Dobre. Takže tam je niekoľko príležitostí pre zlepšenie tu. A ty vieš, alebo budú vidieť v pset seven, že môžete písať code-- a budete musieť písať Kód v PHP-- na obranu proti týmto druhom užívateľa Chyby pretože užívateľ jasne nespolupracovala. A on alebo ona vám nedal všetky hodnoty ste chceli, alebo dokonca vo formáte že ste ich chceli. Tak uvidíte v pset siedmich že by sme mohli iste mať nejaké ak podmienky, ktoré hovoria, ak e-mailovú adresu nie je username@something.edu, Mohli by sme ospravedlniť a ospravedlniť sa užívateľovi veľa, rovnako ako by ste mohli byť v pset sedem. Alebo, ak to nie je zaškrtnutá tú krabicu, Ukazuje sa v PHP, môžete zistiť, že, taky. A určite, ak hesiel nezodpovedajú ako v register.php pre pset sedem, môžete zistiť, že. Ale to je bolesť v krk v tom, že teraz si vyžiadajú aby sme išli celú cestu na server. Užívateľ je informovaný o chybe. A aspoň pokiaľ nepoužijete niektoré milovník techniky, teraz majú kliknúť na šípku späť. Nebolo by pekné, ako mnoho internetových stránok dnes, ak ste mali viac bezprostrednej spätná väzba, okamžite? 

Inými slovami, nechaj ma ísť na verziu človek, ktorý sa chystá byť krajší. Ale to predsa má túto funkciu. Malan, 12345, 123456789, nie chystá označte políčko, Register. Heslá sa nezhodujú. Takže aj keď to pop-up je ugly-- môžeme nahradiť to nakoniec s niečím, ako bootstrap, ktoré uvidíte v pset siedmich je veľmi populárny library-- som urobil zistí, že heslá sa nezhodujú. Dobre. No, dovoľte mi, aby som opraviť, že ako užívateľ. Nechaj ma ísť ďalej a povedať, 12345, 12345. Stále nie je kontrola dohodu. Musíte súhlasiť s podmienky. Tak prečo? 

Ak sme už predpokladal že existuje spôsob, a my sme vás požadované pset siedmich odhaliť chyby podmienky, ako to server-side, prečo by som mal obťažovať tiež robí v JavaScriptu? Čo je to argument priazeň pridávanie čo ste asi vidieť, ako some-- je tu ďalší zložitosť. 

Možno, že nie je hore. Čo by to mohlo byť? Divákov: [Nepočuteľné]. DAVID Malan: Oh, zaujímavé. Potenciálne využije. Takže si istý, ak si nie ste manipuláciu chybný vstup používateľa, ktorý skvele, Možno je to všetko lepšie, keď to nedosahuje ani váš server. Ja by som tlačiť tam a povedzme, asi by ste mali opraviť oba tieto problémy. Ale to je fér. Čo ešte? 

Divákov: [Nepočuteľné]. 

DAVID Malan: Jo. Tento kód, ako sme povedali skôr, je interpretované na strane klienta. To neobťažuje servera, čo znamená, že to nie je vplyv zaťaženie servera alebo kapacity. A teraz, pre malá stará ma, nemá žiadny podstatný vplyv preto, že mám jedného používateľa práve teraz. 

Ale ak ste niektorý Webové stránky slušné veľkosti, najmä najväčší, ako je Facebook, tým viac môžete udržať ľudí off Vášho servera, tým lepšie preto, že server, samozrejme, má iba obmedzené množstvo pamäte RAM, konečný počet gigahertzov, konečný počet vecí to môže urobiť za jednotku času. Takže ak existuje viac ľudí v Svet biť váš server, náhodne prihlásenie nesprávne, rovnako tak dobre, ak vy Môžete si tú záťaž z vášho servera. Navyše, a to najmä na mobil device-- ak ste niekedy prihláste sa alebo my.harvard Yaleův NetID alebo podobne, Tam je to latencia s množstvom webové stránky, ako to, kedy to berie, ako, sakramentsky sekundu alebo dve niekedy. A potom, Bože môj, ak napíšete, potom musíte trafiť späť a znovu ju. Takže tam je čakacia doba, a to najmä na pomalších pripojenie k sieti. Ale JavaScript, pretože to beží na strane klienta a nemusí ísť tam a späť cez potenciálne pomalý internet pripojenie, môžete získať takmer okamžitá spätná väzba. 

Takže poďme sa pozrieť na to. Dovoľte mi, aby som otvárajú form-0 a pozrite sa na HTML tu. A nech to len zistiť, čo sa deje. Toto je forma, ktorej akcia je register.php. Ja som len pomocou sa tak že som mohol vidieť URL. Ale pre heslá, by sme určite chceme zmeniť tento post v skutočnosti. Tu je vstupné pole typu text. Tu je ďalší vstup poľa zadajte heslo. Tu je, ak ste nikdy nevideli, vstup zaškrtávacie políčko typu. 

Ale nie je JavaScript tu vôbec. To je len, že HTML ide do register.php. Ale v jednej verzii, kde som začal dostať tie pop-up, poďme sa pozrieť, čo sa tu vlastne deje. Vo verzii jedna, čo Budem see-- Aj Myslel som, že by mohol zastaviť dosť s dostatočným počtom slov, ale ja bežal von. 

Vo verzii one-- tam ideme. Vo verzii jedna, všimnete following-- a nie je najlepší vykonávania, ale je to moja prvá. Všimnite si, že pod forma, mám tag script. A tag script znamená, hej, prehliadač, tu príde nejaký kód, typicky, JavaScript. A teraz si všimnite, čo robím. Na line-- môžem sotva čítať to-- potrubím 32, hovorí, var form-- tak mi daj premenná s názvom formulára. A potom sa document.getElementId "registrácia". Čo to je? No, dovoľte mi, aby som prevíjanie sem. A upozornenie, ach, ja som dal tvarový prvok ľubovoľný ale opisný nápad registrácie. Tak to mi dáva premennú, ktorá mi umožňuje uchopiť tento uzol, že obdĺžnik v strome s názvom formulár. form.onsubmit prostriedky, hej prehliadač, zaregistrovať poslucháča udalostí na tomto formulári. Inými slovami, keď táto forma je predložené, spustite nasledujúci kód. To nepotrebuje meno, pretože Prečo potrebujete poznať názov? Musíte len vedieť, čo vykonať, ergo je to anonymné alebo lambda funkciu. A to je funkcia , Všetky tieto riadky tu. A teraz, aby som bol úprimný, aj keď nemuselo kedy bola napísaná JavaScript predtým, je to len C a PHP logiku. Takže ak form.email.value == "" - takže v prípade, že e-mail pole prázdne, kričať na užívateľa s "Musíš poskytnúť svoju e-mailovú adresu. " Else ak form.password.value prázdne kričať na užívateľov, "Musíte zadať heslo." 

Zaujímavejšie logicky, pokiaľ nie je form.password.value rovný form.confirmation.value-- kde sa potvrdenie pochádzajú? Dovoľte mi, aby som pretočiť. No, volal som tento vstup Pole tu heslo. A tu Volal som tento potvrdenie. Mohol som to nazval Heslo dvoch alebo čokoľvek iného. Len logicky kontrolu že tieto dva sú rovnaké. Else-- to dopadá to je pán Boole again-- zaškrtávacie políčko logickú hodnotu ,. Takže keď poviem, zvolanie point-- ak nie form.agreement.checked, kričať na používateľa, ako. 

Takže táto syntaxe uvidíte, je veľmi časté v JavaScripte, kde máte túto formáte s bodkami. Začnete s objektom tu. Sa ponoríte hlbšie do A do vlastnosť ako heslo. A potom sa dostanete na jeho skutočnej hodnote. A opäť, tu je vstup. Tu je názov heslo. A jeho hodnota je bez ohľadu na človek skutočne zadať. 

Takže všetky tieto prípady, som sa vrátil false. Ale ak nie, vráťte mi pravda. A tak teraz vidíme presvedčivé využitie pri by ste sa vrátiť false zastaviť to, čo používateľ robí a urobiť ho, alebo jej vybrať znovu alebo zadajte znova. V opačnom prípade vrátime true. 

A dovoľte mi predstaviť jeden Druhá varianta z toho len na osivo z toho určité pochopenie. No, vo verzii 2 tohto článku, form-2-- Urobím to s mávnutím ruky. To je pre tých, zvedavý, verzia jQuery, tých z vás, ktorí by mohli chcieť fušovať v tejto konkrétnej knižnice. Ale poďme start-- a nejaké otázky? Dovoľte mi, aby som na chvíľu pozastaviť nasledujúcich dôvodov to bolo rýchle a veľa. 

Ale pekná vec je, že všetky kódu je skoro rovnaký. Nový materiál je to, čo je dom? Aké sú tieto obdĺžniky? Aké sú tieto uzly? Čo je to anonymný funkcie? Čo je to spracovanie udalosti? Ale našťastie, väčšina z toho je len kruh od, povedzme, týždeň nula. Dobre. Takže niečo trochu zaujímavejšie? No, v prvom rade, nechajte ma ísť vpred a otvoriť Google Maps. A všimnite si, že pre moment, na zlomok sekundy, Všimnite si, čo sa stane, keď Aj kliknite na tlačidlo dostatočne rýchlo. A toto spojenie na Harvarde, je tak rýchlo, že nemáte naozaj nevšimol. Ale čo tak nejako nejako vidieť keď som kliknúť a ťahať naozaj rýchlo? Tí z vás, sledovanie on-line, ak sa spomalí tento rýchlosti 0,5x, môžete vidieť lepšie. 

Čo sa deje práve Než som klikol a ťahal? Skúsim here-- ma nechaj robiť niečo iné, ako je 90210. Poďme ďaleko. To bol naozaj rýchly, taky. Ako sa o Disney World? Tam sme ísť. OK. To, čo ste videl na zlomok sekundy? Rovnako, ako, námestie, nie? Zástupné znaky pre dlaždice? 

No, čo sa to tu deje? Mapy Google je pekný príklad táto technológia, ktorá sa nazýva AJAX. A to je miesto, kde budeme začať použite JavaScript v obzvlášť vyzývavý spôsobom. Späť v deň, tam bol Táto webová stránka s názvom MapQuest. A ja som mal prijaté screenshot to z 1990, kde, ak ste chceli vyhľadať tu na mape, by ste doslova kliknite na šípku up na vrchole, ktorý vám ukázal, iný štvorec mapy. Ak by ste chceli, aby pohyb doľava, ty kliknutí na šípku, ktorá vám ukázal, iný štvorec mapy. A niektoré webové stránky ešte urobiť to dnes. Ale aj MapQuest dostal lepší, rovnako ako Google Maps. 

Namiesto toho, čo je lepšie tieto dni sa webové stránky, ktoré používajú AJAX. AJAX-- inak známy ako Asynchronous JavaScript a XML, čo je len fantázia spôsob, ako hovoriť technológia alebo technika, ktorá umožňuje prehliadač pomocou JavaScript vykonať ďalšie požiadavky HTTP potom, čo bola stránka načítaná. Takže čo to znamená? No, bolo by to byť láskavý otravné v Gmail ak zakaždým, keď chcel skontrolovať poštu, ste sa doslova hit Control-R alebo Command-R alebo kliknite na tlačidlo Obnoviť a celý sakramentsky stránka by sa znovu načítať. Je to tak? To by blikať biela asi za sekundu. Tie by videl hlúpy progress bar. A len preto, aby zistili, či máte nový mailu, celé webové stránky a URL ste na bude musieť znovu načítať. 

Ale to nie je to, čo sa deje v Gmail. Je to tak? Keď sa dostanete nový e-mail do Gmail, čo sa deje na obrazovke? To len ukáže, že jo? Je to len zázrakom sa zdá ako nový riadok v tabuľke. Že v skutočnosti zahŕňa slušné množstvo zložitosti. V skutočnosti, ak si myslíte, že o tohto stromu, ktorý, aj keď je jednoduchá tu Gmail-- a ja by som sa pozrieť v kóde byť sure-- má pravdepodobne tabuľku HTML alebo možno neusporiadané zoznam, ktorý ich robí každý z vašich zložiek s doručenou poštou e-maily ako. 

A tak, keď si predstavíme to tam je strom v pamäti, keď ste Gmail, ktorý vyzerá trochu druh takto, keď Google si uvedomuje, ooh, máte nový e-mail, to nie je chcete prestavať celý strom. Skôr to chce nájsť uzol v strom, ktorý reprezentuje vašej schránky a stačí vložiť nový uzol. 

Takže veľmi podobný pset päť, kde na vás musel vložiť uzly do hash tabuľky, Rovnako tak robí Google, prostredníctvom JavaScript kód, ktorý to napísal, Traverse tohto stromu, zistiť, kde je, že e-mailové schránky časti okna, a potom vložte nový riadok. A nový riadok práve znamená jeden alebo viac nových uzlov v strome. 

A tak AJAX, je táto technika , Ktorá umožňuje presne to. Potom, čo ste navštívil URL, ale blázon dlho to je, a akonáhle je stránka nahraný, môžete stále odtiahnuť viac dát z internet-- či už je to e-mail alebo dlaždice z map-- chytiť ju v zákulisí a vložte ju do stránky tak, aby sa ľudská nie je naozaj musieť počkať na to. 

Facebook Messenger funguje rovnakým spôsobom. Ľubovoľný počet ďalších websites-- oh, vlastne, aj tento. Myslím, že to je, úprimne povedané, druh otravné majú v týchto dňoch. Mám chcete začať hľadať cats-- to je niečo hrozného užívateľské skúsenosti. Je to proste začne vyhľadávať pre mňa. No, čo sa to robí? Adresa URL sa príliš nezmenil od tej doby som začal písať. Ale to, čo sa deje v celej EÚ wire-- OK, hmm zaujímavé. Čo sa to deje naprieč drôt tu jednoducho dostane divnejšie. 

OK. Tak nechaj ma ísť dopredu a skontrolujte element a prejdite na kartu Sieť a snaží sa, aby to technické a menej o mačkách. Ako som typ, a to doslova, mačky a-, čo sa deje per-- Nebudem kliknúť to. Dobre. Tak tu, čo sa deje každý keď som zadajte znak, zrejme? Rovnako ako, nízka úroveň? Čo sa deje s každým z nich znaky Píšem na svoju klávesnicu? Jo? Divákov: [Nepočuteľné]. 

DAVID Malan: Presne tak. Každá z týchto postáv je ísť do Google, jeden po druhom. Sú budovanie reťazec na svojom serveri, ktorý predstavuje všetko, čo som napísal v tak ďaleko. A zakaždým, keď som typ ďalšie charakter, oni používať ich tajný recept z A vyhľadávací algoritmus a prísť na to, tým má na mysli túto stránku mačka alebo táto mačka stránku alebo podobne? Tak v určitom zmysle, že poskytuje ma s lepšie skúsenosti v tom, že nemám ani je potrebné dokončiť svoj myšlienku. A skutočne, je to užitočný vec, automatického dokončovania všeobecne. Ak sa ich algoritmy sú dosť dobré a či moje vyhľadávanie sú dostatočne zrejmé, Nemám zadajte celé slovo. Chystajú sa mi povedať, čo to je, že som vlastne hľadal. Takže to, čo Google nazýva instant vyhľadávanie len pomocou AJAX, pomocou kódu, ktorý im umožňuje požadovať dodatočný obsah pomocou webového prehliadača v zákulisí pomocou tohto nový jazyk, JavaScript. Takže máme pár minút odišiel. A dovoľte mi zavolať môj kamarát Colton up na javisko, pretože sa zdalo, najmä zábava naposledy zaviesť technológiu že niektorí z vás vyjadrili záujem pre finálnu projekty. Mysleli sme si, že by bolo zábavné, aby up dobrovoľník, aj keď, dnes ukázať vám doplnok k to, že umožňuje vás-- jo, Videl som túto hru ako prvý. Poď hore. Veľmi dobre. Dobrá práca. Chystám sa na tomto projekte Na obrazovke sa za chvíľu. Aké je tvoje meno pre každého? 

EFA: Som Efa. 

DAVID Malan: Etha? 

EFA: Efa. 

DAVID Malan: Efa? 

EFA: Jo. 

DAVID Malan: Rád ťa vidím. Dobre. Dovoľte mi, aby som si to pripravený. Poď k stredné s Colton tu. Čo Colton má vo svojich rukách dnes je diaľkové ovládanie. Takže skôr než len tak stáť v trojrozmerný svet rozhliadať ako Colton urobil, teraz Efa môže vlastne chodiť tým, že ide hore, dole, doľava a doprava sa ako Nintendo alebo Xbox radič. EFA: Chystám sa spadnúť z pódia. DAVID Malan: Budem stáť zhruba sem. Ale, že je tu riziko. OK. Takže choďte do toho a dať ti na. Nechaj ma ísť dopredu a prepnite na obrazovku tu. Dovoľte mi, aby som stlmiť svetlá. A Colton, dovoľte mi, aby som prísť stánok vedľa vás. 

Chcete vysvetliť tu s mikrofónom, čo robíme? Nech sa páči. 

COLTON: Iste. Takže teraz sme naloženie do Oculus, Myslím, že nie je v prevádzke operating-- systém, ale hlavný program, kde máte prístup ku všetkým hry a Aplikácie, ktoré sú vo vašej knižnici. Takže teraz, mal by povedať, kliknite na touchpad začať. Touchpad to bude na na pravej strane headsetu. Tak choďte do toho a tap-- EFA: Oh, človeče. DAVID Malan: Jo, tam idete. Kvalita Efa je vidieť je oveľa vyššia kvalita. To je len Wi-Fi tu. COLTON: Takže to, čo ste bude chcieť robiť je pozerať sa smerom nahor pravej časti obrazovky. Jo, že hra na veľmi hornom rohu. A potom, keď ste výberu to, kliknite na touchpad znova. Myslím, že jeho Dreadhalls. A potom je tu je-- sem, nech mi držať svoje okuliare pre vás. 

Tak som mu jednoducho dal regulátor. Takže teraz môžete ovládať hru. Môže sa pohybovať a tak podobne. Tak choďte do toho a pozrite sa až na vrchol. Mali by ste vidieť novú hru. Tak choďte do toho a vy môžete urobiť. Teraz by ste mali byť schopní ovládať si s regulátorom, tiež, akonáhle Hra načíta tu. To môže byť trochu desivé. 

EFA: Teraz mi povedzte. OK. 

COLTON: Dobre. Takže potvrdzujú, že sa môžete pohybovať okolo. OK. Môžete sa pohybovať okolo. Perfektné. Takže keď sa pozriete dole, máte mapu. Mapa vám ukazuje, kde sa práve nachádzate. Môžete sa pozrieť po miestnosti. Môžete úplne otočiť. Jo, presne tak. Otoč sa. 

Tak sa pozrite na ľavej strane. Myslím, že je to niečo, čo môžete vyzdvihnúť na sude v miestnosti. 

EFA: Ako môžem získať máp z cesty? COLTON: Nájdite. Stačí sa pozrieť hore. Dobre. A je to. Teraz choďte do toho a len otočiť. Tak sa pozrite ďalej na ľavej strane. Pohybujte sa doľava. Pozeraj odišiel. Pokračuj. Jo. 

EFA: Oh, že cesta. 

COLTON: Jo. Prechádzka k nej s regulátorom. A je to. Teraz to mal povedať si ju vyzdvihnúť. A je to. Zdvihni to. Dobre. Teraz, poďme dostať z tejto miestnosti. Choďte do toho a chodiť na tie dvere. Takže sa chystáte hold-- hovorí podržte tlačidlo prinútiť ju otvoriť. Tak choďte do toho a podržte tlačidlo. Jo, nútiť to otvoriť. Dobre. Dobrá práca. Teraz ideme von z miestnosti. Takže ja idem nechať zvyšok hore pre vás a uvidíte, čo zistíte. EFA: Ja nejdem v temnej miestnosti. OH, počkaj. Teraz musím ísť dole temnú chodbu? OK, ja vraciam [nepočuteľných]. COLTON: Dobre. Niektoré ďalšie položky na vyzdvihnutie. Vyzerá to, že niektoré mince. To je zámok pick. Takže ak zistíte, zamknuté dvere, môžete ho použiť. Bojíš sa? 

EFA: EÅ¡te nie. COLTON: OK. 

Pretend-- jo. Len predstierať, že ste v skutočnosti tam stál. A ak sa dáte around-- musíš sa na to zvyknúť. Ale to má zmysel. DAVID Malan: A keď Efa pokračuje hrať, pretože sme mohli urobiť to celý deň, môžeme všetci tip-toe tu. Ale máme ďalšie dva páry, ak by ste chceli prísť a hrať. Inak budeme vidieť budúcom stredu. Ďakujem nášmu dobrovoľníkovi dnes. [APPLAUSE] 

[MUSIC - "Seinfeld THEME"] Reproduktor 1: No, ja som uvedenie novej PL namontovať. Práve som zmenil OLPF-- 

SPEAKER 2: Takže to, čo presne robíte? 

Reproduktor 1: No, každý z these-- tu, ukážem vám to jeden v sem. Môžete to vidieť práve tu. 

SPEAKER 3: Myslím, že som dobre s nimi. Chcete viac? 

SPEAKER 4: Nie, ja som dobrý. [Nepočuteľný]. 

SPEAKER 3: No, [nepočuteľný]. Majú niektoré z nich. Reproduktor 1: Rôzne farby. SPEAKER 2: OK. Reproduktor 1: Takže nakoniec to, čo to robí, je to upraví farbu of--