[Přehrávání hudby] DAVID Malan: Toto je CS50. To je začátek týdne devět. A to je to, co by mělo Byl 200. výročí narození pana Boole je. Tak tohle je chlapi , kterým jsme se zmiňoval docela někdy o použití Booleovské proměnné true a false, 1 a 0 a tak. A to bylo to Google Pocta ním dnes. On by se obrátili 200. Takže pokud chcete Připojte se k nám na oběd CS50, se podívat na tento odkaz na internetových stránkách Course. A takové tváře a přátelům jako Tyto vás čekají tady v Cambridge. Tváře, jako jsou tyto na vás čekají v New Haven. A ve skutečnosti, v Ken New Haven laskavě co se nazývá animovaný GIF of Eli zde na nedávný lunch-- GIF je dosud jiný grafický formát souboru, s níž jste familiar--, že vypadá trochu něco takového. Takže jen sled of-- OK. Nikdo tady v Cambridgi se směje. Ale v New Haven, to je opravdu k smíchu, že jo? Dobře. Takže se k nám tam. Tady na Harvardu, konkrétně, tuto středu, pokud jste druhák nebo nováček even-- nebo dokonce junior-- myšlení tvorby přepínač do počítače věda, vím, že tam bude být CS poradenství fair to Středa, krátce poté, co třídy v 4:00 hodin v počítači věda budova Maxwell Dworkin. Dáme na hřišti je to webové stránky zítra, stejně. Donuts, jak mi bylo řečeno, se bude podávat. Dobře. Takže legrační story-- mě strká kolem na internetu, a našel jsem pár starých archivů mého bývalého webových stránkách. A ukazuje out-- kolem tohoto čas, zdá se, velmi aktuální od té doby jsem pochopil, že volby UC Chystáte se zařízení znovu. Tak jsem se ucházel o UC, prohrál nešťastně. A možná to bylo z části proč. Tak tohle byla moje webové stránky v té době. Z nějakého důvodu, myslel jsem, že to dobrý nápad, než říkat lidem, co můj platformě bylo a proč měli hlasovat pro mě, že mají klepnutím na tlačítko pro vstup do zjistili, že Informace, což při zpětném pohledu je druh plazivý. Já opravdu nevím, co to bylo. Ale to rozhodně ne pomoc kampaň. Také jsem zjistil, že senior rok-- jsem měl tento kalendář Muppet. Muppets byly trochu v módě tehdy. Nebo možná, že ne. Měl jsem kalendář Muppet zpátky. A já si myslel, že to bude v pohodě názvu můj počítač v síti Harvardu frogman.student.harvard.edu. V té době, všichni jsme měli jednoznačně identifikovatelné názvy hostitelů. A vy jste si mohli vybrat nějaký marnost jméno namísto svým vlastním jménem. A já jsem šel s žabího muže z nějakého důvodu. A pak jsem started-- Strávil jsem hodně čas prokliká těchto odkazů dnes ráno. A to byl můj asi strana, který nyní trochu vypadá rozkošný. Ale také to svědčí jen jak daleko technologií přišel. Myslím, zpět v den, 486 bylo něco. V těchto dnech, je to super, super, extra pomalý a dobře méně než byste mohli mít ve vašem vlastní kapsy v těchto dnech. Tam je více na tam, že byl ještě trapné. Tak jsem si to nechat tak. Ale to byl můj první vpád do web-- oh, no. To nebylo. Můj první skutečný vpád do programování webu Byl na tomto webu, který jsem právě zapomněl. V určitém okamžiku, jsem se naučil, jak se aby opakující se obrázky na pozadí. A tak jsem našel obklady efektivní, jako hokejista, fotbal a golf plesu, nebo co to je pro webové stránky Frosh IMS. A to bylo ve skutečnosti, opravdu První webový projekt, vzal jsem on-- Myslím, že druháku rok, junior rok-- poté, co vzal CS50 a CS51, jeden společných následných o třídách. Jsem si všiml při hledání přes archivy že jeden z mých nástupců a přátelé, Lee, trochu změnila autorská práva pro sebe. Ale tohle bylo opravdu něco, Mám vlastní ostudou. Ale v té době, toto byl první webové stránky, jak jsem řekl před pár týdny, kterým nováček mohl zaregistrovat intramurálních sporty. A tak to dopadá že obrázky na pozadí stejně jako, že nejsou až tak dobrý nápad. Ale web byl nový, a jsme byli všichni experimentovali. A to je to, co jsem se zřejmě dělal v té době. Dobře. Takže bez dalších okolků, zapneme kola dnes dát, opravdu, Posledním kouskem, který jste mohli najít obzvláště užitečné pro závěrečných prací ale také to, že se začne aby byl celý World Wide Web cítit trochu srozumitelnější. Ve skutečnosti, budeme zavádět ještě jeden programovací jazyk volal JavaScript, který je podobný a liší se v různých způsobech z jazyků jsme se podíval na tak daleko. Takže C, odvolání, je to zkompilovaný jazyk. Musíš spustit pomocí překladače. Získáte zdrojový kód do objektů kódu nebo nuly a ones. A to jsou nuly a ty, které váš procesor, Central Processing Unit, skutečně pochopit. PHP, naopak, není kompilované jazyk. To je co? Je to interpretovaný jazyk. Takže tam je nějaký program nazvaný interpret, který musí přečíst to-- shora dole, vlevo right-- a zjistit, co všechno Váš syntax dělá a prostředky, ať už je to smyčka nebo stav nebo jakékoli jiné číslo programování konstrukty. Tak to je interpretovaný jazyk. Pak jsme se představil HTML. A HTML není ani programovací jazyk. Měli bychom říkat, co? Značkovací jazyk, který je jen druh fantazie způsob, jak říkat to nemá programovací pojmy jako jsme viděli i zpátky v den Scratch. Neexistují žádné smyčky. Neexistují žádné podmínky. Je to opravdu je jazyk o označování svá data a formátování, nebo strukturování jej nějakým způsobem. CSS, zatím, obdobně není programovací jazyk. Je to ještě více esteticky orientovaná. A to vám umožní třídit z doladit věci, jako je velikost písma a barvy a umístění, a to vše. Pak jsme měli SQL. Takže SQL je opravdu programovací jazyk v nějakém smyslu, i když na míru konkrétně k databázím. Ale i když jsme jen představit vám vyberte a vložit a odstranit, a aktualizovat a pár druhých, Ukazuje se můžete skutečně psát funkce, nebo postupy, jak se jim volal, v SQL, které vypadají a jednají docela jako PHP a C funkcí. Takže vím, že ty, které existují. Ale my ani obtěžovat s nimi jak jsme právě poškrábat povrch zde. A pak JavaScript, poslední oficiálně představil naše jazyky. Takže JavaScript, také, je interpretovaný jazyk. A ty, kteří znají, dělat Chcete ji rozlišit s některými charakteristikou z obou C a PHP? Co ho odlišuje? Diváků: To není sestaven. DAVID Malan: znovu, řekni? Diváků: To není sestaven. DAVID Malan: To není sestaven. Takže to, také, je interpretován. Takže to není sestaven. Ale to dělá to tak trochu jako PHP. Ale je to pořád odlišné od PHP nějakým překvapivým způsobem, alespoň v tom, jak budeme používat. To jo? Diváků: To běží na straně klienta. DAVID Malan: To běží na straně klienta, obvykle. To je skutečně rozlišovací Charakteristické pro nás právě teď. C byla na straně serveru v tom smyslu, že jsme udělali vše, co v CS50 IDE. PHP se dosud na straně serveru, pokud jak to taky, dostane interpreted-- není kompilován, ale interpreted-- Uvnitř CS50 IDE, což je samozřejmě jen server nebo servery v cloudu. Ale JavaScript, ani I když jdete začít psát to, řekněme, pset osm a možná konečný projects-- jste bude pravdu, že v CS50 IDE a uložte jej v souborech uvnitř CS50 IDE, CS50 IDE a, podle pořadí, se oblak servery na které je umístěn, se nebude interpretovat nebo spuštění kódu. Spíše to bude být zaslány nezměněné podobě dolů do prohlížeče. A to pak bude IE nebo Chrome nebo Firefox nebo Safari nebo co to vlastně interpretuje to, shora dolů, zleva doprava. Takže klíčové rozlišovat charakteristický pro dnešek je to, že JavaScript je na straně klienta a PHP, například, byl na straně serveru. Nyní, toto má zajímavé důsledky pro, jako, duševní vlastnictví a kdo může skutečně vidět váš kód. A skutečně, můžete jít na webu a podívejte se nejvíce jakýkoli kód, který někdo má napsaný v JavaScriptu. Někdy je to čitelné, Někdy je to popletl. Ale o tom více v pravý čas. Takže JavaScript, dost hezky, je Super podobné, syntakticky, aby C. A podobně jako PHP, není hlavní funkce. Pokud chcete začít psát Kód JavaScript, jak uvidíte dnes, stačí začít psát to. Ale to je, uvidíte, zvláště užitečné v souvislosti s webových prohlížečů. Nicméně, můj malý disclaimer-- obvykle earlier-- bylo říci, že můžete stále více dnes používají JavaScript na straně serveru pomocí fantazie rámce s názvem Node.js že některé z vlastní aplikace je CS50 jsou psány. Zkontrolujte, zda ve skutečnosti používá 50 Node.js. Ale budeme se soustředit na JavaScript na straně klienta tady na ven. Takže tady je soubor podmínek v PHP. Je nám líto, in-- skutečnosti, že tvrzení, také je správné. Zde je také sada podmínky v JavaScriptu. Syntakticky, to je identická s C a PHP. Výrazy pana Boole jsou, Stejně tak, syntakticky identické s oběma C a PHP. Máme také spínače v JavaScript, že vypadají totožně. Máme pro smyčky, které jsou strukturované identicky, while, dělat, zatímco smyčky. To je trochu jiný. PHP měl pro každý konstrukt že byste mohla být pomocí nebo budou používat v pset sedm, možná. JavaScript má tuto speciální verzi pro, kde jste doslova říci něco jako variabilní klíč v objektu, který je velmi stručná způsob, jak říct, jestli jsem dostal object-- a my mluvit o nich opět v moment-- a chci k iteraci přes všechny párů klíčových hodnot uvnitř, Nemám přijít na to, jak se číselně index je s nula, jedna, dva, tři. Můžu doslova říct. A v každé iteraci, JavaScript pro mě bude aktualizovat proměnnou klíč , že je první klíč, pak další klíč, pak další klíč, pak další klíč, a tak dále. A můžu dostat na své hodnotě zpracováním objekt v JavaScriptu, jak uvidíme, jako kdyby je to asociativní pole v PHP. Ve skutečnosti, pokud jste konečně svůj zabalené mysl kolem toho, co asociativní pole je v PHP, můžete si o tom myslíte teď as totožný s objektu v JavaScriptu. Ale to je trochu oversimplification. Pole vypadají dost hezky, totožný do PHP až na jeden znak. Je tu jedna věc tu chybí že jsme viděli minulý týden s PHP. Co vynechat? To jo? Žádné znak dolaru. Takže jsme zpátky do A normálnější světě, kde proměnné nemají znaky dolaru. Ale vy je prefix s var, typicky. A var znamená proměnné. A podobně jako PHP je volně typed-- přičemž tam jsou typy, tam jsou čísla a řetězce a plováky a tak forth-- JavaScript má podobně typy. Ale je to volně napsaný v tom, že jsme programátoři nemusíte specifikovat. Jen musíme být vědomi že různé druhy existují. Proměnné, meanwhile-- tady je návod, jak můžeme prohlásit "ahoj, svět" jako řetězec. Všimněte si, že je totožný s PHP ale žádný znak dolaru. A to je něco, co budeme začnete vidět více dnes, kdy máte objekt s klíči a hodnotami. A pokud si chcete vyzkoušet vyvodit z posledního week-- Syntaxe je trochu jiný. Ale trochu zdravý rozum check-- kolik Klíče to objekt se zdá, že? Tak vidím čtyři. Vidím dva. Takže je to vlastně dva. Takže tohle je kolekce ze dvou dvojic klíč-hodnota. Klíčem k úspěchu je symbol, jehož hodnota je FB. Klíčem k úspěchu je cena, jehož hodnota je 101.53. To jsou jen dva páry klíč-hodnota. A pamatujte si, PHP-- a to je opět tak nějak syntaktického rozdílu. To není všechno, intelektuálně zajímavé. PHP může psali to stejné věc jako follows-- citovat, rovná. A já je změnit na hranatých závorkách. A pak jsem se změnit na kotovaná slovo, "cena". A pak jsem se nepoužívají dvojtečku. Co jsem používat minulý týden? Jo, rovnítko šipka funky notace. A pak jsem udělal to samé tady. Totéž zde. A to je vše. Takže je to v pořádku, pokud to nemá opravdu klesl do paměti jen Zatím, protože je to opravdu intelektuálně nezajímavé. Je to jen syntaktické rozdíly. Ale myšlenky jsou naprosto stejné. Uvnitř této proměnné citace v JavaScriptu je sbírka dvojic klíč-hodnota, z nichž jeden je symbol, z nichž jedna je cena. A můžu dostat na těchto hodnotách s následující syntaxí. Stejně jako v PHP, mohl bych něco jako-- let mi, abych tento box o něco větší. Stejně jako v PHP, mohl bych aby tohle-- oh, sakra. No tak. Stejně jako v PHP-- OK, budeme stačí použít předvádějícího poznámky. Stejně jako v PHP, mohu dělat $ ["symbol"] Citace $ citovat, a to mě dostane Hodnota "symbol." V JavaScriptu, že to bude identické, čímž jsem si jen to udělat. Jediná věc, která je chybí, je znak dolaru. Tak dost dobře, pak, je tu není všechno, že mnoho nového syntaxe. Takže to, co dnes jsme se zaměřili na, opravdu, je některé myšlenky a aplikací. A první, jako aplikace, které by vás mohly Viděl jste skočil do pokud pset seven už je tato syntaxe. Takže pset sedm, pokud jste Viděl nebo neviděl to ještě, vím, že tam je soubor, který dáváme jste volali config.json-- JavaScript Object Notation. Proč? Chtěli jsme být schopni poskytnout vám šablony s některými dvojic klíč-hodnota. Chtěli jsme být schopni dát vám seznam hostitele, název serveru. Chtěli jsme, aby vám vzniku zástupný symbol pro vaše uživatelské jméno a zástupný symbol pro heslo. Pokud si nejste vidět to ještě, ne se bát. Více na toto téma v pset sedmi [? spec. ?] A pak, Je zřejmé, že chcete, vyplnit v na-DOS protože když se přihlásíte do CS50 IDE, každý z vás mít své vlastní uživatelské jméno a heslo. Takže jsme mohli jsme použít půl tuctu nebo více různých formátů souborů. Mohli jsme použili soubor TXT. Mohli bychom použít soubor ve formátu CSV. Mohli jsme použit INI soubor, soubor ve formátu XML, celá parta další zkratky, které jste možná ještě nikdy neslyšel. Je to trochu libovolný na konci dne. Ale mimořádně populární v těchto dnech je text formát nazvaný JSON-- JavaScript Object Notation-- že vypadá takto. Je to trochu záhadný, nevšimnout vzory. Začnete s otevřenou kudrnaté rovnátka, a vy skončíte s stejné. Uvnitř to je něco. Je to pár klíč-hodnota. Takže to je objekt, který já jsem při pohledu na na obrazovce zde že má jeden klíč, který má jednu hodnotu. A právě odvozovat založen na předchozí model, jaký je klíč tady? Databáze je věc levá tlustého střeva. Nyní, hodnota se stane být A více řádků této době. Ale hodnota začíná kudrnaté rovnátka a končí s složená závorka. Takže to, co byste navrhovali je typ hodnoty databáze? Slovník, nebo jen více stručně, objekt. Je to tak? To je druh datové struktury, které Můžete použít i jiné struktury v sobě. Takže pokud celá ta věc, že ​​jsme svolat object-- a objekt je jen banda klíč-hodnota pairs-- hodnota samotné databáze je objekt. Hodnota databáze má spoustu klíčových párů hodnot, z nichž první je hostitel, pojmenujte, a pak uživatelské jméno, pak heslo, každý z jejichž hodnoty, zatím, je to jen nudný řetězec v uvozovkách. Takže i když to není super jasný ještě ne, vím, že to je jen standard, docela nudný způsob, ukládání dat ve standardním formátu. Ale společné chybách ktere jste zde by mohl dělat, a to iv pset sedm, jsou malé hloupé věci, jako když náhodně vynechat čárku tam. To bude mít za následek souboru ne nutně být čitelný. Pokud omylem vynecháte věci, jako je citace, to nebude čitelný. Takže je to docela nitpicky formát souboru, ale to je ten, který je mimořádně běžné. A my náhodou používat, i když nechcete používat některý kódu JavaScript jinak, V pset sedm. Dobře. Takže pamatujte tento obrázek. Mluvili jsme o, v HTML, že kód může vypadat například takto. To je HyperText Markup Language [Neslyšitelný] jen za "Hello, World". Ale pak jsme navrhli zatímco zpět, že pokud to pomůže, možná budete chtít začít přemýšlet o tom již jako strom. Ve skutečnosti, že zářez používat jen pro čitelnost příčinu nebo kvůli na styl je levá může druh být přeložen do tohoto stromu, kde na vás mít nějaký speciální kořenový uzel, že budeme druhově nazvaný dokument, pod níž je kořenem HTML element nebo tag, HTML, který pak má dva děti, hlava a tělo. A pak zase hlava má titul. A titul má hodnotu textu. A tělo má podobně jako textovou hodnotu. Takže pokud vám vyhovuje přísloví že ano, mohl byste tento HTML a nakreslit obrázek, jako je to je pravá strana je pěkný mentální model, protože nyní že máme JavaScript, programování jazyk, který prohlížečů provádět a interpretovat pro vás, Ukazuje se, že to, co se chystáme udělat v kódu se začne manipulovat tento stromová struktura v paměti. Nemusíme budovat strom v paměti. Nemusíme dělat druh Struktura datové pset-five-style složitost. Prohlížeč, pěkně dost, na tlumočení HTML shora dolů, vlevo nebo vpravo, je doslova chystá ruka USA ekvivalent ukazatel k tomu celý strom zdarma. To dělá všechny tvrdé práce. To je to, co Mozilla a Apple a jiní udělali pro nás. A s JavaScript budeme být schopen ovládat a měnit a dělat zajímavých věcí že strom, jinak známý jako DOM nebo Document Object Model. Jaké věci? No, to ukáže, že v JavaScriptu, je tu tento praní seznam události, které se mohou uskutečnit. A my jsme opravdu používal to Slovo od týdne nulou a pset nulu, když jsme mluvili o Scratch. Většina z vás asi nepoužil událost ve vašem Scratch projektu. Ale vy jste možná pamatujete jednoduché Marco Polo Příkladem, kde jsme měli dvě skřítci, z nichž jeden z nich řekl, Marco. Druhý z nichž pak po poslechu a slyšet, že události, řekl, Polo. Pokud ne, neváhejte ohlédnout se, že daleko dozadu. Ale to je jen proto, aby říkají, a můžete druh vyvodit z názvů těchto věci, JavaScript, to dopadá, se chystá dát nám způsob, jak poslouchat pro myš jít dolů nebo myší jít nahoru klávesy nebo jít dolů, nebo klávesa jít nahoru nebo onsubmit onSelect nebo onresizing něco. Jinými slovy, jakýkoliv fyzikální působení že člověk může mít s prohlížečem , co děláte každý den, můžete psát kód, který naslouchá na tyto události a pak dělá něco vhodného. Například, pokud používáte Google Maps, co se stane, když klepnete na tlačítko a přesunout myši, obvykle? Pokud klepnete na tlačítko a přetáhněte? To jo? Přesně tak. Mapa začne pohybovat. Takže můžete nějak vidět, co je sem, co je tam. A jak to, že Google implementovat? No, podle všeho, jsou to za použití pár těchto události posluchači, jeden, který říká, poslouchejte, na myš down-- takže když se uživatel fyzicky tlačí jeho trackpadu nebo jeho nebo její myš dolů. A pak hledáme něco jako pohyb nebo některá jiná událost nám umožňuje zachytit odpor. A ve skutečnosti, přetáhněte je podobně v tomto dot dot dot seznam možných voleb. Takže to bude silný způsob, jak začít reagovat na uživateli ještě předtím, než on nebo ona vlastně klikne něco jako explicitní odeslat. Ale my chystá zavést pár témat se tam dostat. Přechod ale nejprve, pojďme do určité aktuální kód. Takže já jdu vpřed a otevřít dom-0, což je velmi jednoduchý příklad zde, že když jsem se přiblížit jednoduše má tento vstup tady na mě. A já se do toho pusťte a zadejte "David" pro mé jméno a klepněte na tlačítko Odeslat. A pak, i když nějak levně, I mají tuto výzvu, který se objeví, která říká, "Ahoj, Davide!" Takže to je druh Stejně jako naše "ahoj, svět" že jsme udělali chvíli zpátky v C a dokonce v PHP, protože jsem dynamicky výstup mé jméno. Můžu dělat tu jméno někoho jiného. Mohl jsem jednoduše změnit to, jako, Hannah, klepněte na tlačítko Odeslat. A skutečně, ty malé pop-up změnám. Nyní, pop-up jsou jedním z většina zneužívané vlastnosti webu. A ve skutečnosti, v roce jednodenní pop-up blokátory přišel do módy, protože vás by jít do nějaké website-- možná diskutabilní place-- že by pak náhle začít zasypával obrazovky s celou partou pop-up okna. A tak tato schopnost pop-up okna před uživatelem nebyla zvlášť dobře přijat lidstva. Takže to je důvod, proč jste vidět to zabránit věc, který prostě dělá to celé ošklivé. Takže budeme potřebovat lepší způsob, jak vyzvat uživatele. Ale teď, to zdá se k práci. Takže jen intuitivně, co Zdá se, že se to tady děje? Jdu do toho a klikněte na tlačítko Odeslat, a pak se něco děje, jasně. Ale to, co se nestane, že se stalo Minulý týden kdykoli kliknul jsem Odeslat? Co se nestalo na obrazovce? Litovat? Obnovit. Adresa URL nezměnil vůbec. Řekl jsem, že to dom-0, a já jsem stále na DOM-0. Za normálních okolností bychom se převléknout k některým jiný URL, jako register.php nebo podobně. Ale i když jsem se odbýt tahle věc klepnutím na tlačítko OK, Všimněte si, že adresu URL zůstává zcela dal. A ve skutečnosti, když jsem trochu skeptický, dovolte mi, abych otevřít Chrome. Dovolte mi, abych otevřít kartu Síť. A všimněte si, že je to prázdný v tuto chvíli. Nech mě jít dopředu a znovu Maria. Neexistuje žádný síťový provoz vůbec. Takže není HTTP. Takže opravdu, když jsem se podívat do zdrojového kódu pro tohle-- dovolte mi, abych toto okno zavřít a jít do zobrazení zdroj. Zajímavé. Vypadá to, že tam je nějaký Nové značky, mezi nimi i scénář. Takže pojďme se podívat uvnitř CS50 IDE přesně to, co jsem poslal k uživateli. Tak tady je-- pojďme se zaměřují pouze na HTML. Zde je spodní polovina DOM-0.html. A všimněte si, že to má titul, tag hlava, tělo značky, značka forma. Ale to, co vyskočí na vás, jak různé, zvláště pokud jste nikdy napsal jakýkoli JavaScript sami. Dovolte mi, abych se trochu posunout k právě tady. Mám vstup, další vstup pro odeslat. Mám ID, který je tak trochu nové. Ale my jsme se vidět s CSS. Co jiného je určitě nového? To jo? Nice. Dobře. Takže tam, kde se říká onsubmit, Všimněte si, co se zdá následovat. Toto je atribut HTML názvosloví. Jeho hodnota je tento řetězec v uvozovkách tady. A to vypadá trochu divný na první pohled. Není to HTML. Není to CSS. To je, jak asi tušíte, JavaScript. Takže se zdá, že vestavěný do toho webová stránka je funkce nazvaná pozdravit. A já odvozovat, že právě protože je to slovo, pozdravit. Má to otevřené závorka, zavřít paren, středník. Vypadá to, že funkce C, vypadá jako funkce PHP. A skutečně, to bude je funkce JavaScript. Pak Vracím false. Vrátíme se do že za chvíli. Ale kde je tato funkce definována? No dovolte mi, abych posouvat nahoru na začátek souboru. A i když je to dlouhá fronta, je to poměrně jednoduché. Dovolte mi, abych tady a oddálit zaměřit se na těchto čtyřech řádcích. Takže v jazyce JavaScript, jen jako PHP, stačí řekněme, doslovně, slovo "funkce" název funkce, a pak závorek s jakýmkoliv arguments-- žádné argumenty v tomto případě. A není to žádný typ návratu v JavaScriptu, stejně jako PHP. Takže je to trochu volnější než C. Otevřená složená závorka, v blízkosti je složená závorka. Zabudované do JavaScriptu je function-- nedoporučuje se function-- ale funkce nazvaná upozornění jejichž jediným účelem v životě je vytáhnout, že docela ošklivý vyzve, že jsme viděli před chvílí. Teď to je druh sousto. Co se tam děje? Takže pojďme začít zvýraznit tady všechno. To je stejný argument upozornit. A co se děje? To jen vypadá jako řetězec. A ukázalo se, na rozdíl od PHP a na rozdíl od C, nezáleží na tom, v JavaScriptu pokud jste jednoduché uvozovky nebo dvojité uvozovky. Budou rovnocenné. A upřímně řečeno, je to jen populární v těchto dnech pro programátory JavaScript vždy používat apostrofy z nějakého důvodu. Je to jen věc. Ale my jsme mohli použít uvozovek, stejně. Tak a je nový znak. Ale ti z vás, kteří jste udělal předtím, co to navíc znamená? To jo. Zřetězit. Tak jsme to viděli v PHP. Je tu jen tečka operátor v PHP, který bude zřetězit dva řetězce dohromady. C byla bolest v krku, jak to udělat. Připomeňme z pset šesti, který byl Speciální, bolest v krku, budete muset použít něco jako strcat po přidělování paměti na zásobníku nebo haldy. Museli jste proskočit obručí Jen zřetězit dva řetězce. V JavaScriptu, je to super jednoduché. Stačí použít operátor a navíc mezi nimi. Takže komplexní vypadající věc se zdá, že je to proto, že na konci Celý tento řetězec, jen jsem zřetězit na vykřičníkem. Takže pokud to, co se objevovat se "Dobrý den, David", "ahoj, Hannah," "Dobrý den, Maria," a tak dále, jasně že střední věc mezi dvěma plusy mi musí dát přístup k čemu? Co je tam pro jistotu? To jo. Takže budu tady předstírat odpoví své jméno, že jo? Takže jejich jméno objevilo ve finále výsledek. Takže co to znamená? No, jsem navrhl, že dříve v Obraz, který tzv DOM má tento zvláštní kořenový element způsob up top s názvem dokumentu. A teď se ukazuje, že se děje za zvláštní globální proměnná v JavaScriptu, vestavěný do což je celá řada užitečných funkcí. Mezi užitečné funkce je schopnost dostat za každou potomek uzlu. Tyto čtverce či obdélníky nebo elipsy jsou jen uzlů ve stromu, abych tak řekl. Tak to dopadá, že vestavěný do JavaScript je objekt dokumentu je funkce, jinak známý jako metoda, která se nazývá getElementById. Syntaxe pro volání funkce v JavaScriptu že je uvnitř objektu nebo proměnná je právě s tečkové notace. A my jsme viděli to v C jaký syntaxe struct. Vidíte to v pset sedm, druh, druh, když vidíte CS50 :: dotazu. Dvojtečka dvojtečka v PHP je další způsob volání funkce, která je uvnitř nějakého objektu. Ale teď v jazyce JavaScript, je to jen tečka. A tak tato funkce, dost hezky, druh říká, že to, co does-- dostat element ID. Prvek je jen jiný název pro uzel etikety nebo v DOM. A tak si prvek podle ID "jméno" znamená tohle-- tady je můj HTML. A na základě této HTML, co uzel, nebo to, co HTML tag jsem já bude programově být předán voláním document.getElementById? Jo, přesně tak. Chystám se dostat vstup element existuje, jehož ID je "název." Takže konkrétně, můžete myslíte o této funkce, getElementById, jako způsob, jak dát zpět ukazatel na tuto konkrétní uzel ve stromu. Ještě jsme to vypracovány strom, ale je to způsob, jak jak získat přístup k této obdélník nebo že obdélník by jednoznačně ji identifikovat pomocí jeho ID. A teď, proč je to užitečné? No, to dopadá že jakmile jste se dostali že uzel, že obdélník od obrázek, že uzel uvnitř ní, naopak, má spoustu párů properties-- klíč-hodnota nebo data, z nichž jeden se nazývá hodnota. Takže doslova, je to něco jako sousto vysvětlit celou věc. Ale na konci dne, to vše dělá, je, aby vám řetězec, který uživatel zadal V tomto hierarchicky. Ale já nelíbí několik z těchto věcí. Nebo spíš, je tu ještě nějaký zvědavost. To vše se zdálo, že funguje. Proč myslíte, že jsem se vrátil false po zavolání pozdravit? To vypadá trochu ošklivé, že Mám dvě prohlášení zde oddělené středníky. Hádej. Pokud bych odstranil return false, co Může se stát, prostě instinktivně? Omlouváme se, ale ještě jednou? Otevřete spoustu Windows. Takže potenciálně možná něco jako že se to stane. Co dalšího? Možná podat žádost Kde? Na stejné stránce. Takže ve skutečnosti, že je to čím blíže odpovědět tady, i když, na rozdíl od V minulosti jsem ne zadán atribut akce, který normálně musíme udělat. Ukázalo se, že je tu výchozí. Pokud nechcete určit akci, to je jako říct nabídku, konec citátu nebo název souboru sám, což by v tomto případě být jako dom-0.html. Je to jen druh dovodil, nebo spíše implicitní. A tak když se mi to udělat, pojďme si všimnout. Dovolte mi, abych to zachránit. A já jsem odstranil return false. Nechte mě vrátit se k tomu příklad a sílu znovu načíst. A jste mohli vidět mi navrhnout to na CS50 Diskutujte spoustu časů. Pokud něco se někdy jedná funky a prohlížeč není chová podle očekávání, často budete chtít držet Shift a potom klepněte na tlačítko Načíst znovu. To bude nutit každý soubor znovu načíst a nesmějí používat ve svém prohlížeči mezipaměť místní nebo kopii tak, že teď, nech mě jít dopředu a otevřou své Inspector na kartu Síť. Budu klikněte Zachovat Přihlásit proto, že jsem Nechceme, odstranit řádky Jednou jsem si odvedl pryč jinde. Nech mě jít dopředu a tady zadejte Andi, klepněte na tlačítko Odeslat. Dobře. To vypadá, jak se očekávalo. To říká, že "ahoj, Andi." Dovolte mi, abych na tlačítko OK. Zajímavé. Všimněte si, že stránka změnila, i když na původní stránku. Všimněte si URL druh změnil. Dodala, otazník, což je obvykle indikátorem že jsme se snažili předložit něco. A pak se na dně, ještě jasněji, Zde je aktuální požadavek HTTP, který má odezvu 200, které přivedl mě sem. Takže to není to, co chceme udělat, ne? Protože nechci, aby znovu načíst celou stránku. Místo toho jsem se chtěl vrátit false tak, aby se zkratu výchozí chování prohlížeče, který byl, samozřejmě, aby předložila stránky. Takže pojďme se podívat na okrajově lepší příklad. To je dom verze jednou. A všimněte si následující. To je v pořádku, pokud nechcete Grok všechny řádků kódu. Ale to, co je zásadně odlišný o tomto plnění? Budu stanoví, že se chová Totéž, dělá totéž. Co jsem zřejmě udělal jinak? To jo? Diváků: [Neslyšitelné]. DAVID Malan: Jo. Takže funkce je definována differently-- jinými slovy, nepřítomných z formuláře, tam nahoře na lince 7-- nebo spíše, linka 8-- již mám tu onsubmit atribut. V předchozím příkladu, měl jsem to. A pak jsem doslova napsal můj kód zde. A pak jsem řekl return false. A pokud to nebylo třít jste ještě na špatnou cestu, to by mělo začít, pokud as, stejně jako v HTML, kdy jsme začali spolupracovat smísit ji s CSS v atributy stylu, to právě začal trochu chaotický, nebo cítit trochu špatně. Stejně tak zde, pokud začnete HTML, a pak automaticky plop nějaký kód JavaScriptu ve středu řetězec v uvozovkách, je to Nebude velmi udržovatelný. Je to tak? Není to ani zjevné na první pohled místo, kde je kód JavaScript je. Tak to by bylo opravdu pěkné, jak princip lepšího designu, pojďme se udržet naše HTML zcela oddělit od našeho JavaScript. Takže k tomu, že to, co máme tady udělal je following-- jednoduše pomocí HTML pouze pro značkování. A tak v provedení jedné z toho, vše Mám je forma s jedinečným ID. A pak tady dole, jsem využil ze speciální funkci JavaScriptu kterým můžu mít to, co je volal anonymní funkce. Tak to dopadá, že když říkám document.getElementById o "demo" to je jako, že mi ukazatel tento uzel v mém stromě, forma prvek, abych tak řekl. Teď, já jen vím od věděl, trochu HTML teď jsme četli některé on-line reference, že forma prvek podporuje celá parta akce v listeners-- Jinými slovy, seznam prádlo akce posluchači, že jsme viděli před chvílí. Vím, že při čtení dokumentace že onsubmit je platný událostí posluchač na element formuláře. Takže jakmile Vím, že, je to bezpečné pro mě following-- dostat ten uzel ze stromu, forma prvek, a přístup k jeho tzv onsubmit vlastnost. Takže tečka prostě znamená, To je vlastnost, jako zvláštní hodnoty uvnitř ní. A jaký typ dat jsem já přiřazování, zdá se, na onsubmit, což je účinně proměnnou uvnitř tohoto uzlu ve stromu? Je to pole uvnitř tohoto struct. Jaký je datový typ? Funkce, jo. Tak to dopadá, že PHP má tento. A i když jsme Neřekl vám o tom, C má také ukazatele na funkce, o schopnost projít a přiřadit funkce jak samotných hodnot proměnných. A my nejdeme vracet se zpět na C. Ale teď, se ukazuje, že Na pravé straně se zde, i když to vypadá trochu funky, to znamená, hej prohlížeč, dej mi funkci. Nebudu se ani neobtěžoval dát to jméno, protože jsem doslova chystá přiřadit nazvěme to adresa této funkce okamžitě onsubmit. Jinými slovy, prohlížeče, nepotřebujete vědět, co tato funkce se nazývá. Musíte jen vědět, je-li v paměti. A tak stačí jen proto, aby mají rovnítko tam a nezatěžovat jmenovat to, jako foo nebo pozdravit nebo jakékoli jiné slovo. A teď je to jen stylistický věc. Mohl bych přesunout složená závorka na the-- sorry-- další řádek jako my obvykle dělají CS50. Ale v JavaScriptu, je to skutečně stylově obyčejný jen držet složenou závorkou se První z nich, v tomto prvním řádku. Ale dále, je tu nic zajímavého. To open složená závorka jen vymezuje začátek mé funkce. Funkce je nyní totožné, s výjimkou jsem zahrnovaly return false uvnitř této funkce. Vzhledem k tomu, že se otočí out-- A vy byste jen vím, že to od čtení documentation-- že pokud funkci, kterou přiřadíte na onsubmit psovod vrátí hodnotu false, prohlížeč prostě ví a souhlasí s tím, Není odeslat formulář na server. Pokud se vrátí hodnotu true, bude předkládat že k serveru z důvodů, uvidíme, jsou užitečné jen na chvíli. A pak se po středník Kudrnatý rovnátka tam prostě znamená, že jsem udělal definování funkce. Víte, co máte co nejdříve zavolat jak uslyšíte podání. Dobře. To je stále pravděpodobně trochu ošklivé. Takže co víc můžeme udělat? No, to dopadá pak v verze dvě, což je last-- a my si jen pohled na to. Na existuje nebezpečí, že to ošklivější, se ukazuje, že je tu knihovna svět volal jQuery. A jQuery je super populární knihovna JavaScript to je tak populární, že většina jakýkoli JavaScript-- to není neobvyklé pro lidi pletou jQuery s JavaScript. Proč? Samotný JavaScript má velmi verbose způsoby, jak dělat things-- document.getElementById, dadadadadada. Můžete skončit s velmi dlouhých řádků kódu. Takže chlapík jménem John Resid, kdo vlastně pracuje pro uvedení do provozu up v těchto dnech, vyšel s touto knihovnou let Před, že mnoho lidí přispělo k tzv jQuery, který mění syntaxe v následujícím způsobem. A jen tak jste viděli to, protože budete vždy viz, pokud Doing závěrečný projekt web-based, to by bylo ekvivalentní způsob kterým se provádí, že stejné funkce pomocí Tato speciální knihovna. Nyní, spíše než dráždit že od sebe v celém svém rozsahu, ať to jen podívat na některé vzory. Tato syntaxe vypadá, že má kolik anonymní funkce nebo bezejmenných funkce nebo AKA lambda funkce? Dva, jo? A víte, že i v případě, nejste mimořádně pohodlné s tím, jen tím, že skutečnost, že se říká, že funkce () dvakrát. A ukázalo se, že co tento kód je doing-- a budeme odkazovat na on-line referencí, nakonec, o nějakou pomoc s tím. To prostě znamená, že při Dokument je nyní připraven, pokračovat a zaregistrovat následující funkce jak předložit handler pro HTML prvek, jehož jedinečný nápad, je demo. A pak, když se to stane, volat tyto dva řádky kódu. A to je, tragicky, více verbose způsob, jak říkat return false. A jsme zmínili to jen proto, uvidíte kód, jako je tento online. A není to nic, aby se odradit. Ale spíše, mějte na paměti, že to, co je Bude obyčejný v JavaScriptu to je paradigma. A tak to je důvod, proč jsme to ukázat nyní. Dobře. Takže bez obydlí příliš hodně na tom syntaxi, jsou tam jsou nějaké otázky týkající Tyto příklady nebo nápady tak daleko? Dobře. Takže pojďme použít pro něco užitečného. Tvorba webovou stránku, která prostě říká ahoj, tak a tak není všechno tak zajímavé, ne chladným. Ten to nebude být krásné, ale to bude dělat něco užitečného. Nech mě jít zpátky do mého adresáře tady a otevřít, řekněme, form-0.html. Takže předpokládám, že je to nováček intramurální sportovní registrační stránce bez jakéhokoliv CSS nebo žádném smyslu designu. A já chci, aby do toho pusťte a registrovat zde s heslem. A budu souhlasit s podmínkami a podmínky, a klepněte na tlačítko Registrovat. A nyní na internetových stránkách říká: "Jsi registrovaný! (No, ne tak docela.) " To se zdá, jako by to fungovalo, ale nech mě jít napřed a donutit Znovu načíst. A dovolte mi říci, ne, to ne potřebovat mou skutečnou e-mailovou adresu. Nebo možná budeme jen říct, poštu tam. Heslo bude, stejně jako, 12345. A pak, právě proto, že jsem idiot, teď je to 123456789. A já nebudu zkontrolovat políčko. Hmm. Dobře. Takže tam je několik příležitostí pro zlepšení zde. A ty víš, nebo budou vidět v pset seven, že můžete psát code-- a budete muset psát Kód v PHP-- na obranu proti těmto druhům uživatele Chyby protože uživatel jasně nespolupracovala. A on nebo ona vám nedal všechny hodnoty jste chtěli, nebo dokonce ve formátu že jste je chtěli. Tak uvidíte v pset sedmi že bychom mohli jistě mít nějaké pokud podmínky, které říkají, pokud e-mailovou adresu není username@something.edu, Mohli bychom omluvit a omluvit se uživateli hodně, stejně jako byste mohli být v pset sedm. Anebo, pokud to není zaškrtnuta tu krabici, Ukazuje se v PHP, můžete zjistit, že, příliš. A určitě, pokud hesel neodpovídají jako v register.php pro pset sedm, můžete zjistit, že. Ale to je bolest v krk v tom, že teď si vyžádají abychom šli celou cestu na server. Uživatel je informován o chybě. A alespoň pokud nepoužijete některé milovník techniky, teď mají kliknout na šipku zpět. Nebylo by hezké, jako mnoho internetových stránek dnes, pokud jste měli více bezprostřední zpětná vazba, okamžitě? Jinými slovy, nech mě jít na verzi člověk, který se chystá být hezčí. Ale to přece má tuto funkci. Malan, 12345, 123456789, nikoli chystá zaškrtněte políčko, Register. Hesla se neshodují. Takže i když to pop-up je ugly-- můžeme nahradit to nakonec s něčím, jako bootstrap, které uvidíte v pset sedmi je velmi populární library-- jsem udělal zjistí, že hesla se neshodují. Dobře. No, dovolte mi, abych opravit, že jako uživatel. Nech mě jít dál a říct, 12345, 12345. Stále není kontrola dohodu. Musíte souhlasit s pravidla a podmínky. Tak proč? Pokud jsme již předpokládal že existuje způsob, a my jsme vás požadováno pset sedmi odhalit chyby podmínky, jako to server-side, proč bych měl obtěžovat také dělá v JavaScriptu? Co je to argument přízeň přidávání co jste asi vidět, jak some-- je tu další složitost. Možná, že není vzhůru. Co by to mohlo být? Diváků: [Neslyšitelné]. DAVID Malan: Oh, zajímavé. Potenciální využije. Takže si jistý, pokud si nejste manipulaci chybný vstup uživatele, který skvěle, Možná je to všechno lepší, když to nedosahuje ani váš server. Já bych tlačit tam a řekněme, asi byste měli opravit oba tyto problémy. Ale to je fér. Co dalšího? Diváků: [Neslyšitelné]. DAVID Malan: Jo. Tento kód, jak jsme řekli dříve, je vykládány na straně klienta. To neobtěžuje serveru, což znamená, že to není vliv zatížení serveru nebo kapacity. A teď, pro malá stará mě, nemá žádný podstatný vliv proto, že mám jednoho uživatele právě teď. Ale pokud jste některý Webové stránky slušné velikosti, zejména největší, jako je Facebook, tím více můžete udržet lidi off Vašeho serveru, tím lépe proto, že server, samozřejmě, má pouze omezené množství paměti RAM, konečný počet gigahertzů, konečný počet věcí to může udělat za jednotku času. Takže pokud existuje více lidí v Svět bít váš server, náhodně přihlášení nesprávně, stejně tak dobře, pokud vy Můžete si tu zátěž z vašeho serveru. Navíc, a to zejména na mobil device-- pokud jste někdy přihlaste se nebo my.harvard Yaleův NetID nebo podobně, Tam je to latence se spoustou webové stránky, jako to, kdy to bere, jako, zatraceně vteřinu nebo dvě někdy. A pak, Bože můj, pokud napíšete, pak musíte trefit zpět a znovu ji. Takže tam je čekací doba, a to zejména na pomalejších připojení k síti. Ale JavaScript, protože to běží na straně klienta a nemusí jít tam a zpět přes potenciálně pomalý internet připojení, můžete získat téměř okamžitá zpětná vazba. Takže pojďme se podívat na to. Dovolte mi, abych otevírají form-0 a podívejte se na HTML zde. A ať to jen zjistit, co se děje. Toto je forma, jejíž akce je register.php. Já jsem jen pomocí se tak že jsem mohl vidět URL. Ale pro hesla, bychom určitě chceme změnit tento post ve skutečnosti. Zde je vstupní pole typu text. Zde je další vstup pole zadejte heslo. Tady je, pokud jste nikdy neviděli, vstup zaškrtávací políčko typu. Ale není JavaScript tady vůbec. To je jen, že HTML jde do register.php. Ale v jedné verzi, kde jsem začal dostat ty pop-up, pojďme se podívat, co se tu vlastně děje. Ve verzi jedna, co Budu see-- I Myslel jsem, že by mohl zastavit dost s dostatečným počtem slov, ale já běžel ven. Ve verzi one-- tam jedeme. Ve verzi jedna, všimnete following-- a není nejlepší provádění, ale je to moje první. Všimněte si, že pod forma, mám tag script. A tag script znamená, hej, prohlížeč, zde přijde nějaký kód, typicky, JavaScript. A teď si všimněte, co dělám. Na line-- mohu sotva číst to-- potrubím 32, říká, var form-- tak mi dej proměnná s názvem formuláře. A pak se document.getElementId "registrace". Co je to? No, dovolte mi, abych převíjení sem. A upozornění, ach, já jsem dal tvarový prvek libovolný ale popisný nápad registrace. Tak to mi dává proměnnou, která mi umožňuje uchopit tento uzel, že obdélník ve stromu s názvem formulář. form.onsubmit prostředky, hej prohlížeč, zaregistrovat posluchače událostí na tomto formuláři. Jinými slovy, když tato forma je předloženy, spusťte následující kód. To nepotřebuje jméno, protože Proč potřebujete znát název? Musíte jen vědět, co vykonat, ergo je to anonymní nebo lambda funkci. A to je funkce , všechny tyto řádky zde. A teď, abych byl upřímný, i když nemuselo kdy byla napsána JavaScript předtím, je to jen C a PHP logiku. Takže pokud form.email.value == "" - takže v případě, že e-mail pole prázdné, křičet na uživatele s "Musíš poskytnout svou e-mailovou adresu. " Else pokud form.password.value prázdné křičet na uživatele, "Musíte zadat své heslo." Zajímavější logicky, pokud není form.password.value rovný form.confirmation.value-- kde se potvrzení pocházejí? Dovolte mi, abych přetočit. No, volal jsem tento vstup Pole zde heslo. A tady Volal jsem tenhle potvrzení. Mohl jsem to nazval Heslo dvou nebo cokoliv jiného. Jenom logicky kontrolu že tyto dva jsou stejné. Else-- to dopadá to je pan Boole again-- zaškrtávací políčko logickou hodnotu,. Takže když řeknu, zvolání point-- pokud ne form.agreement.checked, křičet na uživatele, jakož. Takže tato syntaxe uvidíte, je velmi časté v JavaScriptu, kde máte tuto formátu s tečkami. Začnete s objektem zde. Se ponoříte hlouběji do A do vlastnost jako heslo. A pak se dostanete na jeho skutečné hodnotě. A opět, tady je vstup. Zde je název heslo. A jeho hodnota je bez ohledu na člověk skutečně zadat. Takže všechny tyto případy, jsem se vrátil false. Ale pokud ne, vraťte mi pravda. A tak teď vidíme přesvědčivé využití při byste se vrátit false zastavit to, co uživatel dělá a učinit ho, nebo jí vybrat znovu nebo zadejte znovu. V opačném případě vrátíme true. A dovolte mi představit jeden Druhá varianta z toho jen na osivo z toho určité pochopení. No, ve verzi 2 tohoto článku, form-2-- Udělám to s mávnutím ruky. To je pro ty, zvědavý, verze jQuery, ty z vás, kteří by mohli chtít fušovat v této konkrétní knihovny. Ale pojďme start-- a nějaké otázky? Dovolte mi, abych na chvíli pozastavit následujících důvodů to bylo rychlé a hodně. Ale pěkná věc je, že všechny kódu je skoro stejný. Nový materiál je to, co je dom? Jaké jsou tyto obdélníky? Jaké jsou tyto uzly? Co je to anonymní funkce? Co je to zpracování události? Ale naštěstí, většina z toho je jen kruh od, řekněme, týden nula. Dobře. Takže něco trochu zajímavější? No, v první řadě, nechte mě jít vpřed a otevřít Google Maps. A všimněte si, že pro moment, na zlomek vteřiny, Všimněte si, co se stane, když I klepněte na tlačítko dostatečně rychle. A toto spojení na Harvardu, je tak rychle, že nemáte opravdu nevšiml. Ale co tak nějak nějak vidět když jsem kliknout a táhnout opravdu rychle? Ti z vás, sledování on-line, pokud se zpomalí toto rychlosti 0,5x, můžete vidět lépe. Co se děje právě Než jsem kliknul a táhl? Zkusím here-- mě nech dělat něco jiného, ​​jako je 90210. Pojďme daleko. To byl opravdu rychlý, taky. Jak se o Disney World? Tam jedeme. DOBŘE. To, co jste viděl na zlomek sekundy? Stejně, jako, náměstí, ne? Zástupné znaky pro dlaždice? No, co se to tady děje? Mapy Google je pěkný příklad tato technologie, která se nazývá AJAX. A to je místo, kde budeme začít použijte JavaScript v obzvláště vyzývavý způsobem. Zpět v den, tam byl Tato webová stránka s názvem MapQuest. A já jsem měl přijato screenshot to z 1990, kde, pokud jste chtěli vyhledat tady na mapě, byste doslova klepněte na šipku up na vrcholu, který vám ukázal, jiný čtverec mapy. Pokud byste chtěli, aby pohyb doleva, ty klepnutí na šipku, která vám ukázal, jiný čtverec mapy. A některé webové stránky ještě udělat to dnes. Ale i MapQuest dostal lepší, stejně jako Google Maps. Místo toho, co je lepší tyto dny se webové stránky, které používají AJAX. AJAX-- jinak známý jako Asynchronous JavaScript a XML, což je jen fantazie způsob, jak říkat technologie nebo technika, která umožňuje prohlížeč pomocí JavaScript provést další požadavky HTTP poté, co byla stránka načtena. Takže co to znamená? No, bylo by to být laskavý otravné v Gmailu pokud pokaždé, když chtěl zkontrolovat poštu, jste se doslova hit Control-R nebo Command-R nebo klepněte na tlačítko Načíst znovu a celý zatraceně stránka by se znovu načíst. Je to tak? To by blikat bílá asi za sekundu. Ty by viděl hloupý progress bar. A jen proto, aby zjistili, zda máte nový mailu, celé webové stránky a URL jste na bude muset znovu načíst. Ale to není to, co se děje v Gmailu. Je to tak? Když se dostanete nový e-mail do Gmail, co se děje na obrazovce? To jen ukáže, že jo? Je to jen zázrakem se zdá jako nový řádek v tabulce. Že ve skutečnosti zahrnuje slušné množství složitosti. Ve skutečnosti, pokud si myslíte, že o tohoto stromu, který, i když je jednoduchá zde Gmail-- a já bych se podívat v kódu být sure-- má pravděpodobně tabulku HTML nebo možná neuspořádané seznam, který je činí každý z vašich složek s doručenou poštou e-maily jako. A tak, když si představíme to tam je strom v paměti, když jste Gmail, který vypadá trochu druh takhle, když Google si uvědomuje, ooh, máte nový e-mail, to není chcete přestavět celý strom. Spíše to chce najít uzel v strom, který reprezentuje vaší schránky a stačí vložit nový uzel. Takže velmi podobný pset pět, kde na vás musel vložit uzly do hash tabulky, Stejně tak dělá Google, prostřednictvím JavaScript kód, který to napsal, Traverse tohoto stromu, zjistit, kde je, že e-mailové schránky části okna, a pak vložte nový řádek. A nový řádek právě znamená jeden nebo více nových uzlů ve stromu. A tak AJAX, je tato technika , která umožňuje přesně to. Poté, co jste navštívil URL, ale blázen dlouho to je, a jakmile je stránka nahrán, můžete stále odtáhnout více dat z internet-- ať už je to e-mail nebo dlaždice z map-- chytit ji v zákulisí a vložte ji do stránky tak, aby se lidská není opravdu muset počkat na to. Facebook Messenger funguje stejným způsobem. Libovolný počet dalších websites-- oh, vlastně, i tento. Myslím, že to je, upřímně řečeno, druh otravné mají v těchto dnech. Mám-li začít hledat cats-- to je něco hrozného uživatelské zkušenosti. Je to prostě začne vyhledávat pro mě. No, co se to dělá? Adresa URL se příliš nezměnil od té doby jsem začal psát. Ale to, co se děje v celé EU wire-- OK, hmm zajímavé. Co se to děje napříč drát tady prostě dostane divnější. DOBŘE. Tak nech mě jít dopředu a zkontrolujte element a přejděte na kartu Síť a snaží se, aby to technické a méně o kočkách. Jak jsem typ, a to doslova, kočky a-, co se děje per-- Nebudu kliknout to. Dobře. Tak tady, co se děje každý když jsem zadejte znak, zřejmě? Stejně jako, nízká úroveň? Co se děje s každým z nich znaky Píšu na svou klávesnici? To jo? Diváků: [Neslyšitelné]. DAVID Malan: Přesně tak. Každá z těchto postav je jít do Google, jeden po druhém. Jsou budování řetězec na svém serveru, který představuje všechno, co jsem napsal v tak daleko. A pokaždé, když jsem typ další charakter, oni používat jejich tajný recept z A vyhledávací algoritmus a přijít na to, tím má na mysli tuto stránku kočka nebo tato kočka stránku nebo podobně? Tak v určitém smyslu, že poskytuje mě s lepší zkušenosti v tom, že nemám ani je třeba dokončit svůj myšlenku. A skutečně, je to užitečný věc, automatického dokončování obecně. Pokud se jejich algoritmy jsou dost dobré a jestli mé vyhledávání jsou dostatečně zřejmé, Nemám zadejte celé slovo. Chystají se mi říct, co to je, že jsem vlastně hledal. Takže to, co Google nazývá instant vyhledávání jen pomocí AJAX, pomocí kódu, který jim umožňuje požadovat dodatečný obsah pomocí webového prohlížeče v zákulisí pomocí tohoto nový jazyk, JavaScript. Takže máme pár minut odešel. A dovolte mi zavolat můj kamarád Colton up na jeviště, protože se zdálo, zejména zábava naposledy zavést technologii že někteří z vás vyjádřily zájem pro finální projekty. Mysleli jsme si, že by bylo zábavné, aby up dobrovolník, i když, dnes ukázat vám doplněk k to, že umožňuje vás-- jo, Viděl jsem tuto hru jako první. Pojď nahoru. Velmi dobře. Dobrá práce. Chystám se na tomto projektu Na obrazovce se za chvíli. Jaké je tvé jméno pro každého? EFA: Jsem Efa. DAVID Malan: Etha? EFA: Efa. DAVID Malan: Efa? EFA: Jo. DAVID Malan: Rád tě vidím. Dobře. Dovolte mi, abych si to připraven. Pojď k střední s Colton zde. Co Colton má ve svých rukou dnes je dálkové ovládání. Takže spíše než jen tak stát v trojrozměrný svět rozhlížet jako Colton udělal, teď Efa může vlastně chodit tím, že jde nahoru, dolů, doleva a doprava se jako Nintendo nebo Xbox řadič. EFA: Chystám se spadnout z pódia. DAVID Malan: Budu stát zhruba sem. Ale, že je zde riziko. DOBŘE. Takže jděte do toho a dát ti na. Nech mě jít dopředu a přepněte na obrazovku zde. Dovolte mi, abych ztlumit světla. A Colton, dovolte mi, abych přijít stánek vedle vás. Chcete vysvětlit zde s mikrofonem, co děláme? Tady máš. COLTON: Jistě. Takže teď jsme naložení do Oculus, Myslím, že není v provozu operating-- systém, ale hlavní program, kde máte přístup ke všem hry a Aplikace, které jsou ve vaší knihovně. Takže teď, měl by říci, klepněte na touchpad začít. Touchpad to bude na na pravé straně headsetu. Tak jděte do toho a tap-- EFA: Oh, člověče. DAVID Malan: Jo, tam jdete. Kvalita Efa je vidět je mnohem vyšší kvalita. To je jen Wi-Fi zde. COLTON: Takže to, co jste bude chtít dělat je dívat se směrem nahoru pravé části obrazovky. Jo, že hra na velmi horním rohu. A pak, když jste výběru to, klepněte na touchpad znovu. Myslím, že jeho Dreadhalls. A pak je zde je-- sem, ať mi držet své brýle pro vás. Tak jsem mu prostě dal regulátor. Takže teď můžete ovládat hru. Může se pohybovat a tak podobně. Tak jděte do toho a podívejte se až na vrchol. Měli byste vidět novou hru. Tak jděte do toho a vy můžete udělat. Nyní byste měli být schopni ovládat si s regulátorem, také, jakmile Hra načte tady. To může být trochu děsivé. EFA: Teď mi řekněte. DOBŘE. COLTON: Dobře. Takže potvrzují, že se můžete pohybovat kolem. DOBŘE. Můžete se pohybovat kolem. Perfektní. Takže když se podíváte dolů, máte mapu. Mapa vám ukazuje, kde se právě nacházíte. Můžete se podívat po místnosti. Můžete úplně otočit. Jo, přesně tak. Otočit se. Tak se podívejte na levé straně. Myslím, že je to něco, co můžete vyzvednout na sudu v místnosti. EFA: Jak mohu získat map z cesty? COLTON: Najděte. Stačí se podívat nahoru. Dobře. Tady máš. Nyní jděte do toho a jen otočit. Tak se podívejte dál na levé straně. Pohybujte se doleva. Dívej odešel. Pokračuj. To jo. EFA: Oh, že cesta. COLTON: Jo. Procházka k ní s regulátorem. Tady máš. Teď to měl říct si ji vyzvednout. Tady máš. Vyzvednout. Dobře. Nyní, pojďme dostat z této místnosti. Jděte do toho a chodit na ty dveře. Takže se chystáte hold-- říká podržte tlačítko přinutit ji otevřít. Tak jděte do toho a podržte tlačítko. Jo, nutit to otevřít. Dobře. Dobrá práce. Teď jdeme ven z místnosti. Takže já jdu nechat zbytek nahoru pro vás a uvidíte, co zjistíte. EFA: Já nejdu v temné místnosti. OH Počkej. Teď musím jít dolů temnou chodbu? OK, já vracím [neslyšitelných]. COLTON: Dobře. Některé další položky k vyzvednutí. Vypadá to, že některé mince. To je zámek pick. Takže pokud zjistíte, zamčené dveře, můžete ho použít. Jsi vyděšený? EFA: Ještě ne. COLTON: OK. Pretend-- jo. Jen předstírat, že jste ve skutečnosti tam stál. A pokud se dáte around-- musíš se na to zvyknout. Ale to má smysl. DAVID Malan: A když Efa pokračuje hrát, protože jsme mohli udělat to celý den, můžeme všichni tip-toe tady. Ale máme další dva páry, pokud byste chtěli přijít a hrát. Jinak budeme vidět příštím středu. Děkuji našemu dobrovolníkovi dnes. [APPLAUSE] [MUSIC - "Seinfeld THEME"] Reproduktor 1: No, já jsem uvedení nové PL namontovat. Právě jsem změnil OLPF-- SPEAKER 2: Takže to, co přesně děláte? Reproduktor 1: No, každý z these-- tady, ukážu vám to jeden v sem. Můžete to vidět právě zde. SPEAKER 3: Myslím, že jsem dobře s nimi. Chcete víc? SPEAKER 4: Ne, já jsem dobrý. [Neslyšitelný]. SPEAKER 3: No, [neslyšitelný]. Mají některé z nich. Reproduktor 1: Různé barvy. SPEAKER 2: OK. Reproduktor 1: Takže nakonec to, co to dělá, je to upraví barvu of--