[Zenelejátszási] 

DAVID MALAN: Ez CS50. Ez a hét elején kilenc. És ez az, amit kellett volna volt Mr. Boole 200. születésnapját. Szóval ez a fickó kinek mi már utaltam elég sok alkalommal használatával A logikai változók igaz és hamis, 1 és 0 és ilyen. És ez volt a Google Tisztelgés neki ma. Ő változtatta volna 200. Tehát, ha azt szeretné, hogy csatlakozzon hozzánk CS50 ebéd, vessünk egy pillantást a link A tanfolyam honlapján. És az ilyen arcok és a barátokkal Ezek várják itt Cambridge-ben. Arcok, mint ezek várják Önt New Haven. És, sőt, Ken New Haven kedvesen tette az úgynevezett animált GIF Éli Itt egy újabb lunch-- GIF még Egy másik grafikus fájlformátum, amellyel te familiar--, hogy úgy néz ki, egy kicsit valami ilyesmi. Tehát csak egy sorozat of-- OK. Itt senki Cambridge nevet. De New Havenben, ez nagyon vicces, ugye? Minden rendben. 

Tehát ne csatlakozzon hozzánk ott. Itt a Harvardon, Pontosabban, ez a szerda, ha egy másodéves vagy gólya even-- vagy akár junior-- gondolkodás készítés egy kapcsoló számítógépes tudomány, tudom, hogy hogy lesz- kell a CS tanácsadás tisztességes ezt Szerda, röviddel azután osztály 4:00 órakor a számítógép Science Building Maxwell Dworkin. Fogjuk fel ezt a tanfolyam honlapján holnap is. Donuts, nekem azt mondták, nem szolgálnak fel. 

Minden rendben. Annyira vicces story-- voltam dugta körül az interneten, és találtam néhány régi archívumok Az egykori honlapján. És kiderül out-- körül ezt idő, úgy tűnik, nagyon időszerű mert én veszem, hogy az UC választásokon Arra készül, hogy a felszerelés fel újra. Szóval futottam UC, elveszett szerencsétlenül. És talán ez részben miért. Szóval ez volt a honlapom idején. Valamilyen oknál fogva, azt hittem, Jó ötlet, mielőtt elmondani az embereknek mi a platform volt, és miért kell szavazz rám, hogy van hogy kattintson be, hogy megtudja, hogy információt, amely utólag is fajta hátborzongató. Nem igazán tudom, hogy mi volt az. 

De ez egyáltalán nem segíteni a kampányban. Azt is megállapították, hogy a vezető year-- volt ez a Muppet naptár. Muppets kedvesek voltak divatban, majd vissza. Vagy talán nem voltak. Volt egy Muppet naptári majd vissza. És azt gondoltam, hogy lenne jó, hogy név Sajátgép Harvard hálózati frogman.student.harvard.edu. Abban az időben, mi minden volt egyedileg azonosítható host neveket. És akkor választhat néhány hiúság neve helyett a saját nevét. És mentem békaember valamilyen okból. 

És akkor én started-- Sokat az idő kattintva ezekre a címekre ma reggel. És ez volt az én kb oldalon, amely most egyfajta tűnik imádnivaló. De ez is bizonyítja, hogy csak milyen messzire technológia jött. Úgy értem, vissza a nap, 486 volt valami. Ezek a napok, ez szuper, szuper, szuper lassú és jól kevésbé mint lehet, hogy a saját zsebébe ezekben a napokban. Van még ott, hogy volt, még inkább kínos. Úgyhogy hagyjuk annyiban. De ez volt az első behatolás web-- ó, nem. Ez nem volt. Az első igazi behatolás web programozás volt ezen az oldalon, ami csak elfelejtettem. Egy bizonyos ponton, megtanultam, hogyan kell hogy az ismétlődő háttérképeket. És így találtam ezt a csempézés hatékony, mint a hokis, foci és a golf labda, vagy bármi, ami A Frosh PM honlapján. És ez valójában, valóban a első web-alapú projekt vettem on-- Azt hiszem, talán másodéves évben, junior year-- miután CS50 és CS51, egy A közös nyomon az osztályokról. Észrevettem keres az archívumok hogy az egyik utódai és barátok, Lee, egyfajta megváltozott A szerzői magának. De valóban ez volt valami, ami Azt kéne vennie kellemetlenséget. De abban az időben, ez a volt az első weboldal, mint mondtam, néhány héttel ezelőtt, amellyel gólya lehetett regisztrálj intramuralis sport itt. És így kiderül, Ilyen körülmények képek így nem olyan jó ötlet. De a web új ​​volt, és mindannyian kísérletező. És ez az, amit nyilván nem abban az időben. Minden rendben. Tehát minden további nélkül, akkor kapcsolja fogaskerekek ma, hogy, tényleg, az utolsó darab, hogy lehet találni különösen hasznos a végső projektek de azt is, hogy kezd hogy az egész világhálón érzem egy kicsit érthetőbb. Sőt, mi megy be Még egy programozási nyelv nevű JavaScript amelyekhez hasonló és eltérő a különböző módokon re nyelveken átnéztük eddig. 

Tehát C, emlékszem, ez összeállított nyelven. Neked kell futtatni egy fordító. Kapsz forráskód kifogás kódot, vagy nullák és egyesek. És ezek nullák és egyesek, hogy a CPU, Central Processing Unit, valóban megértsék. PHP, ezzel szemben nem lefordított nyelven. Ez egy mi? Ez egy értelmezett nyelv. Szóval egy kis programot nevű tolmács, hogy el kell olvasni it-- fentről lefelé, balról right-- és kitalálni, mi minden A szintaxis csinál, és azt jelenti, hogy ez egy hurkot, vagy olyan betegségben vagy bármely más számú programozási konstruálja. Szóval ez egy értelmezett nyelv. 

Aztán be HTML. És HTML csak nem is programozási nyelv. Mi nevezném, mi? Egy jelölő nyelv, amely csak egyfajta divatos módja mondván, hogy Nincsenek programozási szerkezeteket, mint láttuk még vissza a nap a Scratch. Nincsenek hurkok. Nincsenek feltételekkel. Ez valóban egy nyelvet megjelölésére fel az adatait és a formázással, vagy strukturálása, hogy valamilyen módon. 

CSS, eközben hasonlóan nem egy programozási nyelv. Ez még inkább esztétikailag orientált. És ez lehetővé teszi, hogy egyfajta finomhangolása dolgok, mint a betűméret és szín és elhelyezése, és minden adott. Aztán volt 

SQL. Így az SQL valóban egy programozási nyelv bizonyos értelemben, bár szabott konkrétan az adatbázisokhoz. De még ha csak be, hogy válassza ki és helyezze be és törölhet és frissíti és néhány másik, Kiderül, akkor tulajdonképpen levelet funkciók vagy eljárások, mivel ők nevű, SQL, hogy néz ki, és úgy járnak igen, mint a PHP és C függvények. Tehát tudjuk, hogy ezek léteznek. De ne is törődjünk velük a mi csak a felszínét itt. Aztán a JavaScript, az utolsó a nyelv hivatalosan is bemutatta. Szóval JavaScript is van egy értelmezett nyelv. És azok ismerik, nem azt szeretné, hogy megkülönböztessék Néhány jellemző mind a C és a PHP? Mi különbözteti meg? 

Közönség: Ez nem összeállítani. 

DAVID MALAN: Mondd még egyszer? 

Közönség: Ez nem összeállítani. 

DAVID MALAN: Ez nem összeállítani. Szóval ez is értelmezik. Tehát ez nem összeállítani. De teszi, hogy egy kicsit, mint a PHP. De ez még mindig eltér PHP valamilyen feltűnő módon, legalábbis ahogy mi fogjuk használni azt. Igen? 

Közönség: Ez fut a kliens-oldali. 

DAVID MALAN: Fut kliens oldali, általában. Ez valóban a megkülönböztető jellemző ránk most. C volt kiszolgálóoldali abban az értelemben, hogy mindent megtettünk a CS50 IDE. PHP eddig volt szerver oldali amennyiben mint ez is, jelentkeznek interpreted-- Nem összeállítani, de interpreted-- belsejében CS50 IDE, ami persze Csak egy szerver vagy szerverek a felhő. 

De JavaScript, sőt bár fogsz írásához azt mondjuk, PSET Nyolc és talán végleges projects-- te majd jobbra be CS50 IDE és mentse el A fájlok CS50 IDE, CS50 IDE és viszont, a felhő szerverek amelyen ez adott otthont, nem megy értelmezésére vagy végrehajtására a kódot. Inkább ez lesz elküldve a változatlan formában le a böngészőt. És ez akkor lesz IE vagy a Chrome vagy Firefox vagy a Safari vagy bármi, hogy valóban értelmezi ez, fentről lefelé, balról jobbra. Tehát a legfontosabb megkülönböztető jellemző a mai napra az, hogy a JavaScript a kliens oldali és a PHP, például, vetették szerver oldali. Nos, ez egy érdekes következménye Mert mint, a szellemi tulajdon és aki valóban látni a kódot. És valóban, mehetsz az interneten, és látni a legtöbb bármilyen kódot, hogy valaki írt JavaScript. Néha ez is olvasható, Néha eltorzítva. De még az, hogy a megfelelő időben. 

Tehát a JavaScript, szépen elég, szuper hasonló, szintaktikailag, hogy C. És ugyanúgy, mint a PHP, nincs fő funkciója. Ha meg szeretné kezdeni írásban JavaScript kód, mint látni fogod ma, csak elkezd írás is. De ez, látni fogod, különösen Hasznos keretében böngészők. Azonban az én kis disclaimer-- általában earlier-- az volt, hogy azt mondják, hogy egyre ma JavaScript szerver oldali egy díszes keretben nevű node.js hogy néhány CS50 saját alkalmazások vannak írva. Ellenőrizze 50 ténylegesen használja Node.js. De megyünk összpontosítani JavaScript kliens-oldali Innen ki. 

Tehát itt van egy sor olyan feltételt, PHP nyelven. Sajnáljuk, in-- valójában, hogy nyilatkozatot is helyes. Itt is egy sor feltételeket a JavaScript. Szintaktikailag ez azonos a C és a PHP. Mr. Boole kifejezések, Hasonlóképpen, szintaktikailag azonos mindkét C és PHP. Mi is kapcsolók JavaScript, hogy nézd azonos. Van-e hurkok, amelyek strukturált azonosan, while, do while. 

Ez az ember egy kicsit más. A PHP volt mindegyik konstrukció hogy lehet, hogy a vagy használja a PSET hét, talán. JavaScript ezt a különleges változata A hol szó mondani valamit mint a változó kulcs tárgy, amely Ez egy nagyon tömör megfogalmazásban azt, ha már van egy object-- és mi beszélni ezekről újra moment-- és azt akarom, hogy végighaladni az összes A legfontosabb érték párokat belül, Nem kell, hogy kitaláljuk, hogyan lehet numerikusan index őket nulla, egy, kettő, három. 

Én szó szerint mondom ezt. És minden iterációban JavaScript Nekem frissíti a változó gombját hogy az első gombot, majd pedig a másodikat, majd pedig a másodikat, majd pedig a másodikat, és így tovább. És tudom, hogy annak értéke kezelve egy tárgy JavaScript, mint látni fogjuk, mintha ez egy asszociatív tömb PHP. Sőt, ha végre csomagolva a felfogni, milyen egy asszociatív tömb PHP, akkor gondolom, hogy most a azonos egy objektum a JavaScript. De ez egy kicsit leegyszerűsítés. 

A tömbök néz, szépen elég, azonos PHP kivéve egy karaktert. Van egy dolog hiányzik itt hogy mi volt látni a múlt héten a PHP. Mi kimaradt? Igen? Nem dollár jel. Úgyhogy vissza normálisabb világ, ahol változókat nem dollár jeleket. De te előtag őket var, általában. És var jelenti változó. És ugyanúgy, mint a PHP lazán typed-- ahol vannak típusok, Vannak olyan számok és vonósokra és úszik, és így forth-- JavaScript hasonlóan van típusok. De ez lazán gépelt, hogy a programozók nem kell azokat megadnia. Csak tisztában kell lennünk hogy a különböző típusú léteznek. 

Változók, meanwhile-- itt van, hogyan talán kijelentem "hello, world" mint egy húr. Figyeljük meg, hogy ez megegyezik PHP, de nincs dollár jel. És ez az, amit mi elkezd többet lát ma, ahol van egy objektum A kulcsokat és értékeket. És ha ki szeretné próbálni levezetni utolsó week-- A szintaxis egy kicsit más. De egy kis józanság check-- hány kulcsok ez a tárgy, úgy tűnik, hogy van? Látom négy. Látom kettő. 

Tehát ez valójában kettő. Tehát ez egy gyűjtemény A két kulcs-érték párokat. A kulcs a szimbóluma, amelynek értéke az FB. A legfontosabb az ár, amelynek értéke 101,53. Tehát ez a két kulcs-érték párokat. És ne feledd, PHP-- és ez újra Csak egyfajta szintaktikai különbség. Ez még nem minden, hogy intellektuálisan érdekes. PHP művéből ugyanez dolog, mint follows-- idézet, egyenlő. És én változtatni ezeket a szögletes zárójelben. És akkor ezen változtatni kell jegyzett szót, "árát". És akkor ne használja a kettőspont. Mit tudom használni a múlt héten? Igen, az egyenlőségjel nyíl funky jelöléssel. 

És akkor én is ugyanezt tették ide. Ugyanezt itt. És ez minden. Szóval ez rendben van, ha ez nem Tényleg süllyedt, hogy a memória méretét még, mert ez tényleg szellemileg érdektelen. Ez csak szintaktikai különbség. De az ötletek pontosan ugyanaz. Belül ez a változó idézet a JavaScript gyűjteménye kulcsértékpárok, amelyek közül az egyik szimbólum, amelyek közül az egyik az ár. És tudom, hogy meg ezeket az értékeket a következő szintaxist. Csakúgy, mint a PHP, tudtam tenni valamit az általam elvártnál hagyja nekem, hogy ez a rovat egy kicsit nagyobb. Csakúgy, mint a PHP, tudtam hogy this-- ó, a francba. Gyerünk. 

Csakúgy, mint a PHP-- OK, akkor csak használja a műsorvezető jegyzetek. Csakúgy, mint a PHP, tudok do $ quote $ idézőjelet ["szimbólum"], és ez lesz nekem az értéke "szimbólum." A JavaScript, ez lesz azonos, ahol én is csak ezt. Az egyetlen dolog, ami hiányzik a dollár jel. 

Szóval szépen elég, akkor, ott van Nem olyan sok új szintaxist. Tehát mi ma arra összpontosítunk, tényleg, néhány ötletet és az alkalmazásokat. És az első ilyen alkalmazás, amely lehet, hogy Láthattuk, ha beugrott PSET hét már ez szintaxis. Tehát PSET hét, ha már látott vagy nem látott még, tudom, hogy van egy fájl, amit ad hívott config.json-- JavaScript Objektum jelölés. Miért? Azt akartuk, hogy képes legyen az Ön számára Sablon néhány kulcs-érték párok. Azt akartuk, hogy képes legyen kapsz egy listát A házigazda, a neve a szerveren. Azt akartuk, hogy az Ön helyőrzőjére felhasználónevét és helyőrzőjeként jelszavát. Ha nem látod ez még, hogy ne aggódjon. Erről bővebben PSET hét [? spec. ?] És akkor, Nyilvánvaló, hogy szeretnénk, ha hogy töltse ki a teendőkről mert amikor belép CS50 IDE, minden van a saját felhasználónevét és jelszavát. 

Így lehet még használni egy fél tucat vagy több különböző formátumok. Mi volna egy .txt fájlba. Mi lehetne használni egy CSV fájlba. Mi volna használni egy INI fájlban, egy XML fájl, Egy csomó több rövidítést, hogy talán nem is hallottam. Ez egyfajta önkényes a végén a nap. De szuper népszerű manapság egy szöveges formában nevű JSON-- JavaScript Object Notation--, hogy néz ki. Ez egy kicsit rejtélyes, de észre a mintákat. Elkezdesz egy nyitott göndör merevítőt, és a végén az azonos. Aztán az is valami. Ez egy kulcs-érték párt. Tehát ez egy olyan tárgy, én vagyok nézi a képernyőn itt hogy egy gomb található, amely egy értéket. És csak következtetünk alapján előző minta, mi a kulcs itt? Adatbázis, a dolog a bal oldalon a vastagbélben. 

Most, az érték történetesen Egy több vonal ebben az időben. De az értéket kezdődik a göndör melles és a végén egy kapcsos zárójel. Szóval mit javasolna a típusú értéke adatbázisban? A szótár vagy, csak több Tömören, egy tárgy. Jobb? Ez a fajta egy adatszerkezet Használhatja egyéb építmények belül is. Tehát, ha ez az egész dolog vagyunk hív egy object-- és egy objektum csak egy csomó kulcs-érték pairs-- a értéke adatbázis maga egy objektum. Az érték adatbázis egy csomó A kulcs-érték párok, amelyek közül az első a házigazda, akkor a név, akkor felhasználónevet, majd a jelszót, mindegyik amelynek értékei, eközben ez csak egy unalmas karakterlánc idézőjelek között. 

Tehát akkor is, ha ez nem Super Clear csak még, tudjuk, hogy ez csak egy szabvány, meglehetősen unalmas módon az adatok tárolására egy szabványos formátumban. De a közös hibákat Lehet, hogy még PSET hét, alig hülye dolog, mint ha véletlenül kihagyja a vessző van. Ez lesz eredményezheti, hogy a fájl nem feltétlenül áll olvasható. Ha véletlenül kihagyja a dolgok, mint a idézetek, ez nem lesz olvasható. Szóval ez egy elég nitpicky fájlformátum, de ez az egyik, hogy a szuper gyakori. És mi történne használni, annak ellenére, nem használ semmilyen JavaScript különben A PSET hét. 

Minden rendben. Úgy emlékszem, ezt a képet. Beszéltünk, HTML, hogy A kód így fog kinézni. Ez a Hypertext Markup Language [Hallhatatlan] mindössze "hello, world." De akkor mi javasolta kicsit vissza, hogy ha ez segít, érdemes kezdeni gondolkodni erről már, mint egy fa. Tény, hogy a behúzás, hogy mi használja csak az olvashatóság kedvéért vagy stílus kedvéért a A bal oldali fajta le kell fordítani ezt a fát, ahol Van néhány különleges gyökércsomópont, hogy mi lesz általánosan nevű dokumentumot, amely alatt gyökere HTML elemet vagy tag, HTML, amely azután két gyermekek, fej és a test. 

És akkor viszont feje van címe. És cím egy szöveges érték. És a test hasonlóan egy szöveges érték. Tehát ha elégedett mondás hogy igen, meg tudná venni ezt a HTML és rajzoljon egy képet, mint ez, a jobb oldali egy szép mentális modell, mert most hogy van a JavaScript, a programozási nyelv böngésző által végre és értelmezik az Ön számára, kiderül, hogy mi vagyunk arról, hogy itt-kód A kezdeni kezelni ezt fa struktúra a memóriában. Nem kell építeni A fa a memóriában. Nem kell tennie a fajta PSET-öt stílusban adatok szerkezete komplexitás. A böngésző, szépen elég, fel értelmezése HTML fentről lefelé, balra vagy jobbra, a szó valódi fog Kéz amerikai egyenértékű egy mutatót e egész fát ingyen. Ez nem minden a kemény munka. Ez az, amit a Mozilla és az Apple és mások értünk tettél. 

És a JavaScript megyünk képesek ellenőrizni és változtatni, és nem Érdekes dolog, hogy az a fa, más néven a DOM vagy Document Object Model. Miket? Nos, kiderült, hogy JavaScript, ott ez a mosoda listáját eseményeket, hogy sor kerülhet. És akkor még nem igazán használják, hogy szót, mivel a héten a nulla és PSET nulla, ha beszélgettünk Scratch. A legtöbb akkor valószínűleg nem használja egy esemény a Scratch projekt. De lehet felidézni Az egyszerű Marco Polo Például, ahol volt két sprite, akik közül az egyik azt mondta, Marco. A másik akik közül majd, upon hallgatási és a hallás az esetben, mondta, Polo. Ha nem, akkor nyugodtan nézd vissza, hogy amennyire vissza. 

De ez még csak a azt mondják, és akkor milyen következtethetett nevét E dolgokat, JavaScript, kiderül, fog adni nekünk egy módja annak, hogy hallgatni egér lefelé vagy egér megy fel vagy gombot lefelé vagy a gombot megy fel, vagy onsubmit onSelect vagy onresizing valamit. Más szavakkal, bármilyen fizikai beavatkozás hogy az emberi vehet egy böngésző hogy te minden nap, akkor írj kód, amely figyeli az ilyen események majd csinál valamit megfelelő. 

Például, ha a Google Maps, mi történik, ha rákattint, és a lépés az egér, tipikusan? Ha rákattint, és húzza? Igen? Pontosan. A térkép elindul. Szóval lehet egyfajta látni, mi van ide, mi ott. És hogyan működik a Google végre, hogy? Nos, valószínűleg, ők egy pár ilyen esemény hallgatók, az egyik, hogy mondja, figyeljen a képre down-- így amikor a felhasználó fizikailag tolja a trackpad vagy vele egér le. És akkor mi keresünk valami hasonló mozgalom vagy valamilyen más esemény, amely lehetővé teszi számunkra, hogy elfog húzza. És valóban, húzza hasonlóan ebben az dot dot dot listát a lehetséges opciókat. 

Tehát ez lesz erőteljes így kezdeni reagál a felhasználó még mielőtt ő ténylegesen rákattint valami explicit, mint benyújtania. De megyünk bevezetni Pár téma, hogy ott. De először nézzük átmenet Egyes tényleges kódot. Így fogok menni előre, és megnyitja dom-0, ami egy nagyon egyszerű példa Itt, hogy ha én nagyítás egyszerűen van ez a bemeneti itt nekem. És én megyek előre, és írja be "Dávid" az én nevemért, és kattintson a Küldés gombra. 

És akkor, még ha valami olcsón, én ezt azonnal előugrik, hogy azt mondja, "hello, David!" Tehát ez a fajta mint a mi "hello, world" hogy mi volt egy kicsit vissza a C és még a PHP-ben, mert én már dinamikusan outputted a nevem. Meg tudom csinálni, hogy valaki másnak a nevét. Én egyszerűen megváltoztatni ezt, mint, Hannah, kattintson a Küldés gombra. És valóban, a kis pop-up változások. 

Most, pop-up az egyik a legtöbb bántalmazott funkciók a weben. És valóban, vissza A nap popup- jött divatba, mert menne néhány website-- talán egy megkérdőjelezhető place-- hogy aztán hirtelen kezdeni peppering a képernyőn egy csomó pop-up. És így ez a képesség, hogy felbukkan ablakok előtt a felhasználó nem volt különösen jól érkezett az emberiség. Szóval ezért látod ez megakadályozza a dolog, ami csak teszi ezt az egészet csúnya. Szóval lesz szüksége jobb módja annak, hogy figyelmezteti a felhasználót. De most, hogy úgy tűnik, működik. Tehát csak ösztönösen, mit Úgy tűnik, itt történik? Megyek előre, és kattintson a Küldés gombra, és Aztán valami történik, egyértelműen. De mi nem történik, hogy egyáltalán megtörtént A múlt héten bármikor rákattintottam Küldje? Mi nem történt meg a képernyőn? Bocsánat? Reload. Az URL nem változott. Azt mondta, hogy ez dom-0, és én még mindig a dom-0. Normális esetben, mi lennék változott néhány más URL, mint register.php vagy hasonlók. 

De akkor is, ha azt utasítsa ez a dolog az OK gombra kattintva, észre, hogy az URL- marad teljesen fel. És valóban, ha én vagyok egy kicsit szkeptikus, hadd nyissa meg a Chrome. Hadd nyissa meg a Hálózat fülre. És észre, hogy ez üres pillanatában. Hadd menjen előre, és küldje el újra Maria. Nincs hálózati forgalom nélkül. Szóval nincs HTTP. 

Tehát valóban, ha megnézem a forráskódot A this-- hadd zárja be az ablakot és menjen a Nézet Forrás. Érdekes. Úgy néz ki, van némi Új tag, köztük forgatókönyvet. Szóval vessünk egy pillantást belül CS50 IDE pontosan mit küldeni a felhasználónak. 

Tehát itt is-- nézzük összpontosítson a HTML csak. Itt van az alsó fele a dom-0.html. És észre, hogy van egy cím, egy fej tag, a body tag, egy form tag. De mi ugrik ki az Ön számára, mint más, különösen, ha soha nem írt JavaScript magát. Hadd lépjünk egy kicsit Az itt. Van egy input, Egy másik bemenet benyújtania. Van egy azonosítót, ami egyfajta új. Azt azonban látni ezt a CSS. Mi mást határozottan új? Igen? Szép. 

Minden rendben. Tehát, ha azt mondja onsubmit, észre, amit úgy tűnik, hogy kövesse. Ez egy attribútum HTML nómenklatúra. Értéke ez idézőjel itt. És ez úgy néz ki, egy kicsit fura első pillantásra. Ez nem a HTML. Ez nem CSS. Ez, ahogy sejteni lehet, a JavaScript. Tehát úgy tűnik, hogy építettük be a weboldal egy olyan függvény is köszönt. És én következtetnek arra, hogy csak mert egy szót, üdvözölje. Van rajta egy nyitott zárójel, közel zárójel, pontosvessző. Úgy néz ki, mint egy C függvény, úgy néz ki, mint egy PHP függvény. 

És valóban, ez lesz a egy JavaScript függvényt. Akkor én visszatér hamis. Majd jönnek vissza hogy csak egy pillanatra. De hol van ez a funkció határozza meg? Hát hadd felfelé A fájl tetejére. És bár ez egy hosszú sorban, ez viszonylag egyszerű. Hadd kicsinyítés itt és összpontosítani a négy sort. 

Tehát a JavaScript, csak mint a PHP, csak mondjuk, a szó szoros értelmében, a szó "funkciót" A függvény neve, majd zárójelben bármilyen arguments-- nem érvek ebben az esetben. És nincs visszatérési típus A JavaScript, csakúgy, mint a PHP. Szóval ez egy kicsit lazább, mint C. Nyílt kapcsos zárójel, kapcsos zárójel bezár. Épített JavaScript function-- nem egy ajánlott function-- de olyan függvény is riasztást amelyeknek egyetlen célja az életben az, hogy húzza fel, hogy elég csúnya kéri, hogy láttunk egy pillanattal ezelőtt. 

Most ez a fajta egy falatot. Mi folyik itt? Szóval kezdjük a jelölje ki itt minden. Ez ugyanaz az érv, hogy figyelmeztessék. És mi a helyzet? Ez csak úgy néz ki, mint egy húr. És kiderül, ellentétben a PHP és ellentétben C, akkor nem számít a JavaScript ha egyetlen vagy dupla idézőjel. Ők lesznek egyenértékűek. És őszintén szólva, ez csak népszerű manapság A JavaScript programozó, hogy mindig egyszerű idézőjeleket valamilyen okból. Ez csak a dolog. De tudtuk használni idézőjelek között is. 

Szóval, plusz egy új karaktert. De azok, akik már csinált ezt korábban is, mit jelent plusz jelent? Igen. Összefűzni. Így látta ezt a PHP. Már csak a pont PHP-ben, hogy összefűzi a két húrok össze. C volt a fájdalom a nyak erre. Emlékezzünk vissza az PSET hat, amely Egy különös fájdalom a nyakban, meg kellett volna használni olyasmi, mint strcat után memórialefoglalás a veremben, a kupac. Meg kellett ugrani a karikán csak hogy összefűzni két húr. A JavaScript, ez szuper egyszerű. Csak használja a plusz üzemeltető közöttük. 

Így a komplex kinézetű a dolog úgy tűnik, hogy ez a mert a végén ez az egész szöveg, csak összefűzni egy felkiáltójel. Tehát, ha mi felbukkanó ben "hello, David", "hello, Hannah," "hello, Maria," és így tovább, világosan hogy középső dolog a kettő között impulzusra kell adni nekem való hozzáférést, mi? Mi van ott, az biztos? Igen. Úgyhogy úgy tesz, mintha itt a válaszolni a nevüket, nem igaz? Tehát a nevük bukkant fel a végső eredményt. Tehát mit jelent ez? Nos, én korábban javasolt, hogy kép, amely az úgynevezett DOM van ez a különleges gyökér elem egészen top nevezett dokumentumot. És most, kiderült, hogy fog hogy egy speciális globális változó A JavaScript épített, amely egy csomó hasznos funkció. Között hasznos funkció a képessége, hogy bármely leszármazottja csomópontot. Azok négyzet vagy téglalap vagy ellipszis csak azok a csomópontok egy fa, hogy úgy mondjam. 

Így kiderül, hogy a beépített JavaScript dokumentum objektum egy olyan funkció, más néven a módszer, hogy hívják getElementById. A szintaxis a hívását függvényében a JavaScript hogy belül van egy tárgy vagy egy változó csak a dot jelöléssel. És láttuk ezt a C mi a struct szintaxist. Látod ezt a PSET hét, egyfajta, fajta, amikor látod CS50 :: lekérdezés. A vastagbél vastagbél PHP egy másik módja egy funkció, ami belsejében néhány tárgyat. 

De most a JavaScript, ez csak egy pont. És így ez a funkció, szépen elég, egyfajta mondja, amit does-- kap elem ID. Egy elem is csak egy nevet Egy tag vagy csomópont a DOM. És így kap elemet azonosító "name" azt jelenti, this-- itt van a HTML. És ennek alapján a HTML, mit node vagy mi HTML tag vagyok lesz, hogy programozottan kell adni hívja document.getElementById? 

Igen, pontosan. Megyek, hogy a bemeneti eleme van, amelynek ID "nevet." Tehát konkrétan, akkor gondolni ezt a funkciót, getElementById, mint egy módja, amely vissza a mutatót, hogy adott csomópont a fán. Még nem húzott ezt fa, de ez egy módja Az, hogy igénybe, hogy téglalap vagy négyszög által egyedileg azonosító is keresztül ID. 

Most, hogy miért van ez hasznos? Nos, kiderült, hogy ha egyszer már ütött a csomóponton, hogy négyszögek képet, hogy node belsejébe, viszont van egy csomó properties-- kulcsértékpárok vagy adat, amelyek közül az egyik az úgynevezett érték. Tehát szó szerint, ez egyfajta falatot elmagyarázni az egészet. De a végén a nap, Mindez persze nem kapsz karakterlánc, amely a felhasználó begépelt ebben a hierarchikus módon. De én nem szeretem a Pár ezeket a dolgokat. Vagy inkább, van némi kíváncsiság is. Minden, ami úgy tűnt, működik. Mit gondolsz, miért tértem vissza hamis hívása után köszönt? Ez úgy néz ki, egy kicsit csúnya, hogy Van két állítás van elválasztva. Találd ki. Ha én el return false, mit könnyen előfordulhat, ösztönösen? Sajnáljuk, mondjuk újra? 

Nyisson meg egy csomó Windows-t. Tehát potenciálisan talán valami ilyesmi fog történni. Mi más? Lehet kérelmet benyújtaniuk, ahol? Ugyanarra az oldalra. Szóval, sőt, ez van A szorosabb válaszolni itt, még akkor is, ellentétben a múltban, én már nem megadva az action attribútum, amely általában meg kell tennünk. Kiderült, hogy van egy alapértelmezett. Ha nem adja akció, ez, mintha azt mondanánk idézet, idézet vége vagy a fájl nevét is, amely ebben az esetben lenne lenni, mint Dom-0.html. Ez csak egyfajta következtetni, vagy inkább burkolt. 

És így, ha ezt nem teszi meg, hadd észre. Hadd menteni ezt. És én már eltávolították vissza hamis. Térjünk vissza erre Például, és erőt töltse be újra. És lehet, hogy látott engem arra utalnak, ez a CS50 megvitassák egy párszor. Ha valami valaha eljáró funky és a böngésző nem úgy viselkedik, ahogy gondolja, sokszor akkor szeretnénk tartani Shift és kattintson a Reload. Hogy fogja kényszeríteni minden fájl újratölteni és nem használja a böngésző helyi cache vagy példányt, hogy őt, hadd menjen előre, és nyissa fel a felügyelő, a Hálózat fülre. Megyek kattintson Őrizze Belépés mert Nem akarom, hogy törölje a sorok ha kapok vert el máshol. 

Hadd menjen előre itt, és típusú Andi, kattintson a Küldés gombra. Minden rendben. Úgy tűnik, ez a várakozásoknak. Azt mondja, "hello, Andi." Hadd kattintson az OK gombra. Érdekes. Figyeljük meg, hogy a lap megváltozott, bár az eredeti oldalra. Figyeljük meg az URL-t a fajta megváltozott. Hozzátette, egy kérdőjel, amely általában egy indikátor hogy megpróbáltuk, hogy nyújtson valamit. És majd az alján, még nyíltabban, Itt van az aktuális HTTP kérés, amely kaptam választ a 200, hogy hozott haza. 

Tehát ez nem az, amit akarunk csinálni, ugye? Mert nem akarom újratölti az egész oldal. Én inkább akart visszatérni hamis úgy, hogy rövidzárlat A böngésző alapértelmezett viselkedés, amely volt, persze, hogy nyújtson be az oldalra. 

Szóval vessünk egy pillantást marginálisan jobb példa. Ez dom verzió egyik. És észre a következő. Nem baj, ha nem grokkolni minden sornyi kódot. De mi alapvetően más erről a végrehajtás? Majd kikötik, hogy viselkedik a ugyanaz, ugyanazt csinálja. Mi közöm nyilván másképpen? Igen? 

Közönség: [hallható]. DAVID MALAN: Igen. Tehát a funkció határozza differently-- Más szóval, hiányzik a forma, ott a sorban 7-- vagy Inkább vonal 8-- már nem nem tudom a onsubmit attribútum. Az előző példában, már ez. És aztán szó szerint írtam ide a kódot. És akkor azt mondta, vissza hamis. És ha ez nem dörzsöli meg a rossz irányba, mégis, meg kell kezdeni, hogy amennyiben as, csakúgy, mint a HTML, amikor elkezdtük együtt elvegyülve meg a CSS stílus attribútumok, ez csak most kezdődött, hogy egy kicsit rendetlen vagy egy kicsit rossz. 

Hasonlóképpen ide, ha elkezdi az HTML, és akkor automatikusan puff néhány JavaScript kódot közepén jegyzett húr, ez Nem lesz nagyon karbantartható. Jobb? Ez nem is nyilvánvaló első hely, ahol a JavaScript kód. Így lenne igazán szép, mint elv jobb tervezés, maradjunk a HTML teljesen elkülönítve a JavaScript. 

Így kell csinálni, hogy amit mi már itt történik a following-- egyszerűen használja a HTML a jelölésre csak. És így verzióban az egyik, hogy nem minden Nekem van egy formája egy egyedi azonosító. És akkor itt lent vagyok, kihasználva A különlegessége JavaScript ahol tudok mit nevezett egy névtelen függvényt. Így kiderül, hogy ha hívom document.getElementById a "demo" ez olyan, mint hogy nekem egy mutatót ez a csomópont az én fa, az űrlap elem, hogy úgy mondjam. 

Nos, én csak tudom, honnan tudva egy kicsit a HTML Most már olvasta el néhány online hivatkozás, hogy a űrlapelem támogatja egy csomó esemény listeners-- a Más szóval, a mosoda listáját esemény hallgatók, hogy láttunk egy pillanattal ezelőtt. Tudom, hogy ettől a dokumentáció olvasása hogy onSubmit egy érvényes esemény hallgató egy űrlap elem. 

Tehát, ha tudom, hogy, hogy biztonságos, mit tegyek A following-- kap, hogy a csomópont a fáról, az űrlap elem, és a hozzáférés az úgynevezett onsubmit ingatlan. Tehát a pont csak azt jelenti, ez egy olyan tulajdonság, mint egy speciális érték belsejébe. És milyen adatokat típusú vagyok hozzárendelésével, úgy tűnik, hogy onSubmit, amely hatékonyan változó belül Az, hogy a fában? Ez egy területen belül az adott struktúra. Mi az adat típusát? 

A funkció, igen. Így kiderül, hogy a PHP ezt. És még akkor is, Nem mondani róla, C is függvénymutatók, a képessége, hogy át és hozzá funkciók változóként "értékek magukat. És nem megyünk visszafejlődni vissza C. De most, kiderül, hogy a jobb oldali itt, bár úgy néz ki, egy kicsit funky, ez azt jelenti, hé böngésző, adj egy funkciót. Én nem fogom is zavar, amely ez a név, mert én vagyok a szó szoros értelmében fog rendelni nevezzük A címe ez a funkció azonnal onSubmit. Más szóval, a böngésző, akkor nem kell tudni, mi ez a funkció hívják. Csak azt kell tudni, ahol ez a memóriában. És ez így elegendő csak a Van egy egyenlőségjel van és nem zavarja, hogy hívjuk ezt, mint a ize vagy üdvözölje vagy bármilyen más szót. És most ez csak egy stilisztikai dolog. Nem tudtam mozgatni ezt a kapcsos zárójel ra the-- sorry-- következő sorban mint szoktunk csinálni CS50. De a JavaScript, ez valójában stilisztikailag közös hogy csak tartsa a kapcsos zárójel, a első, erre az első sort. 

De ezután, ott Semmi különös. Hogy a nyílt kapcsos zárójel csak kijelölte kezdete én funkciót. A funkció most kivételével azonos voltam tartalmazza a return false belül ez a funkció. Mert kiderül out-- és akkor csak Ismerem ezt a Reading A documentation-- hogy ha a funkció hozzárendelése A onsubmit felvezető false értékkel tér vissza, A böngésző csak tudja, és egyetért azzal, hogy ne küldje el az űrlapot a szerveren. Ha igazat ad vissza, akkor benyújtja egy szerverre okokból majd meglátjuk hasznosak csak egy pillanatra. 

És akkor a pontosvessző után A kapcsos zárójel ott csak azt jelenti végzek meghatározó funkciót. Tudod, mit kell hívni, amint ahogy hallom egy beadványt. Minden rendben. Ez még mindig vitathatatlanul ilyen csúnya. Szóval mit tehettünk még? 

Nos, kiderült, majd változat két, amely a last-- és mi csak pillantást erre. Azzal a veszéllyel jár, hogy ez csúnyább, kiderül, hogy van egy könyvtár A világ úgynevezett jQuery. És jQuery egy szuper népszerű JavaScript könyvtár ez annyira népszerű, hogy a legtöbb minden JavaScript-- ez nem Nem gyakori, hogy az emberek összekeverik jQuery JavaScript. Miért? JavaScript maga is nagyon bőbeszédű módon csinálja things-- document.getElementById, dadadadadada. Akkor a végén miután nagyon hosszú sornyi kódot. 

Tehát egy fickó, John Resid, aki valóban működik egy startup ezekben a napokban, kijött Ezzel a könyvtárral év ezelőtt, hogy sok ember járult hogy hívják jQuery, amely megváltoztatja A szintaxis a következő módon. És csak hogy láttad ezt, mert akkor mindig látja ezt, ha csinálsz egy web-alapú projekt végső, ez az egyenértékű lenne módja végrehajtó ugyanazt a funkciót használva ezt a különleges könyvtárban. 

Most, ahelyett, kötekedik szét teljes egészében, nézzük csak meg néhány mintát. Ez szintaxis tűnik, hogy Hány névtelen függvények vagy névtelen függvények vagy AKA lambda funkciók? Két, ugye? És tudod, hogy még ha te nem szuper kényelmes ezzel, csak az a tény, hogy ez mondja function () kétszer. 

És kiderül, hogy a mi ez a kód doing-- és mi utalnak internetes hivatkozásokat, végül egy kis segítség ezzel. Ez csak azt jelenti, hogy ha a dokumentum elkészült, megy előre, és regisztrálj A következő függvény mint a 'Küldés' felvezető a HTML elem, amelynek egyedülálló ötlet demo. És akkor, amikor ez megtörténik, hívja a két sornyi kódot. És ez tragikus, egy bőbeszédű szóval vissza hamis. És mi említette ezt csak azért, mert látni fogod kódot, mint az online. És ez semmit nem lehet daunted. De inkább ne feledje, hogy mi lesz gyakori JavaScript ez paradigma. És hogy ezért megmutatjuk, hogy most. Minden rendben. Tehát anélkül, hogy firtatni is sokat, hogy szintaktikai, vannak kérdések merülnek fel Ezek a példák vagy ötleteket eddig? Minden rendben. Úgyhogy ezt használjuk valami hasznosat. Csinálok egy weboldal, amely csak azt mondja, hello, így és így egyáltalán nem olyan érdekes, nem underwhelm. Ez az ember nem lesz szép, de ez meg fog tenni valami hasznosat. Hadd menjek vissza a könyvtárba Itt és nyit, azt mondják, a forma-0.html. 

Tegyük fel, hogy ez a gólya intramuralis sportok regisztrációs oldalon nélkül CSS vagy bármilyen értelemben design. És azt akarom, hogy menjen előre és regisztrálj itt egy jelszót. És fogok elfogadja a feltételeket feltételek és kattintson Register. És most a honlapján azt mondja: "Te regisztrált! (Nos, nem igazán.)" Úgy tűnik, mint ez működött, de hadd menjen előre, és kényszerített újratöltése. 

És hadd mondjam, nem, nem Szükségem van a tényleges e-mail címre. Vagy talán csak annyit, posta van. Jelszó lesz, mint, 12345. És akkor, csak azért, mert én vagyok egy idióta, most már 123456789. És nem fogom, hogy ellenőrizze a dobozt. 

Hmm. Minden rendben. Szóval van több lehetőséget A javulás itt. És tudod, vagy látni fogja a PSET Hét, hogy írhatsz code-- és akkor meg kell írni kódot PHP-- megvédeni elleni ilyen típusú felhasználó hibák, mert a felhasználó egyértelműen nem működött. És ő nem adott Önnek minden értékek akartál vagy akár a formátum hogy meg akart nekik. Szóval majd meglátjuk PSET hét, hogy akkor pedig van némi ha a körülmények azt mondják ha az e-mail címét nem egy username@something.edu, Így egyszerűen azt sajnálom, és elnézést, hogy a felhasználó sok, mint akkor lehet, PSET hét. Vagy ha még nem ellenőrizte, hogy a doboz, Kiderül, PHP, meg fogja találni, hogy is. És természetesen, ha a jelszavakat nem egyeznek mint register.php A PSET hét, meg fogja találni, hogy. De ez a fájdalom a nyak, hogy most arra kérik hogy menjünk végig a szerverre. A felhasználó értesítést a hiba. És legalább hacsak nem használja néhány érdekesebb technikák, most már, hogy kattintson a vissza nyilat. Nem lenne szép, mint a egy csomó honlapok ma, ha már több azonnali visszajelzést, azonnal? 

Más szóval, hadd menjen verzió Egy, ami megy, hogy nincs szebb. De ez van ezt a funkciót. Malan, 12345, 123456789, nem fogja ellenőrizni a dobozt, regisztráljon. A jelszavak nem egyeznek. Így, bár ez a pop-up ugly-- tudjuk helyettesíteni ezt végül valami ilyesmit Bootstrap, amely látni fogod PSET hét egy nagyon népszerű library-- tettem érzékeli, hogy a jelszavak nem egyeznek. Minden rendben. Nos, hadd rögzítse, hogy a felhasználó. Hadd menjen előre, és azt mondják, 12345, 12345. Még mindig nem ellenőrzi a megállapodást. El kell fogadnod a Felhasználási feltételek. Akkor miért? 

Ha már őszinteséggel hogy van egy módja annak, és mi már megkövetelte a PSET hét észlelni hiba feltételekkel, mint ez szerver oldali, miért is tenném zavarta is, hogy mindezt a JavaScript? Mi az az érv javára hozzátéve, hogy mit te arról, hogy a some-- ott tovább bonyolítaná. 

Talán nincs is fejjel. Mi lehet ez? Közönség: [hallható]. DAVID MALAN: Ó, érdekes. Potenciális hasznosítja. Tehát biztos, ha nem kezelése hibás felhasználói hogy a nagy, talán minden jobb, ha sem éri el a szervert. Azt tolja vissza és mondjuk, akkor valószínűleg fix mind a két problémát. De ez fair. Mi más? 

Közönség: [hallható]. 

DAVID MALAN: Igen. Ez a kód, mint már említettük, az értelmezni a kliens-oldali. Ez nem zavarja a szerver, ami azt jelenti, ez nem befolyásolhatja a szerver terhelés vagy kapacitást. És most, kicsit öreg hozzám, ennek nincs jelentős hatása mert van egy felhasználó most. 

De ha minden honlapján tisztességes méretű, különösen a legnagyobb, mint a Facebook, minél többet tud az ember a A szerver a jobb mert a szerveren, természetesen, csak véges mennyiségű RAM, véges számú gigahertz, véges számú dolog tehet egységnyi idő. Tehát, ha több ember A világ üti a szerver, Véletlenül bejelentkezés helytelenül, csakúgy, ha lehet tartani, hogy a terhelést ki a szerver. Plusz, különösen egy mobil device-- Ha valaha jelentkezzen be my.harvard vagy Yale NETID vagy hasonlók, itt van ez a várakozási idő, sok weboldalak, mint hogy ahol tart, mint egy rohadt két másodpercet néha. És akkor, Istenem, ha ködös, akkor meg kell ütni vissza és újra azt. Szóval van látencia, különösen A kis sebességű hálózati kapcsolattal. De JavaScript, mert fut a kliens és nem kell, hogy menjen előre és hátra az egész egy potenciálisan lassú internet kapcsolat, akkor kap szinte azonnali visszajelzést. 

Szóval nézzük meg ezt. Hadd nyit form-0 és nézd meg a HTML itt. És nézzük meg, mi folyik itt. Ez egy formája, amelynek akció register.php. Én csak használ ennyire hogy láttam az URL. De a jelszavak, mi lenne biztosan szeretné hogy ez megváltozzon, hogy tegye a valóságban. Itt van egy beviteli mező típusú szöveget. Itt egy újabb input területén írja be a jelszó. Itt van, ha soha nem látott, bemeneti típusú jelölőnégyzetet. 

De nincs JavaScript Itt sincs. Ez csak HTML megy register.php. De verzió egyik, hol elkezdtem azon pop-up, lássuk, mi is történik itt. Verzióban, mihez Megyek see-- I gondoltam, istálló elég elég szó, de elfogyott. 

Verzióban one-- ott vagyunk. Verzióban egy, észre a following-- és nem a legjobb kivitelezés, de ez az első. Figyeljük meg, hogy elmarad a formában, van egy script tag. És a script tag jelent, hé, böngésző, ide jön egy kis kódot, Jellemzően a JavaScript. És most, figyeld meg, mit csinálok. On line-- alig tudok olvasni it-- 32. sor, azt mondja, var form-- ezért adj változó nevű formában. És akkor kap document.getElementId A "regisztráció". Mi ez? Nos, hadd visszatekerés itt. És észre, ah, én adtam az űrlap elem tetszőleges, de leíró ötlet A regisztráció. Szóval ez ad nekem egy változó, lehetővé teszi számomra, hogy megragad, hogy csomópont, E négyszögben a fán nevű formában. form.onsubmit úton, hé böngésző, regisztrálj egy esemény hallgató ebben a formában. Más szavakkal, amikor ez a forma benyújtott, hajtsa végre a következő kódot. Nem kell egy nevet, mert miért kell tudni a nevét? Csak azt kell tudni, mit kell végrehajtani, ergo ez egy névtelen vagy lambda funkció. És ez a funkció az összes ezeket a sorokat itt. És most, hogy őszinte legyek, még akkor is, Lehet, hogy nem a valaha írt JavaScript előtt, ez csak a C és a PHP logika. Tehát, ha form.email.value == "" - így ha az e-mail mező üres, kiabálni a felhasználó "Meg kell adja meg e-mail címét. " Else if form.password.value üres kiabálni a felhasználó, "Meg kell adnia a jelszót." 

Még érdekesebb logikusan, ha form.password.value nem egyenlő form.confirmation.value-- hol visszaigazolás származik? Hadd visszatekerés. Nos, hívtam ezt a bemeneti mezőny jelszót. És felhívtam ezt itt megerősítést. Tudtam volna nevezte Jelszó két vagy bármi más. Én csak logikailag ellenőrzése hogy ez a két azonos. Else-- kiderül, ez Mr. Boole again-- egy logikai érték, a négyzetet. Tehát, ha azt mondom, felkiáltás point-- ha nem form.agreement.checked, kiabálni a felhasználónak is. 

Szóval ez a szintaxis látni fogja Nagyon gyakori a JavaScript, ahol van, ez a pontozott jelöléssel. Elkezdesz egy tárgy van. Merülés mélyebb egy a egy ingatlant, mint jelszavát. És akkor kap meg annak aktuális értékét. És megint itt van a bemenet. Itt látható a nevet jelszót. És az értéke, amit a emberi ténylegesen beírt. 

Tehát mindezen esetekben, visszatértem hamis. De ha nem, vissza igaz. És így most azt látjuk, kényszerítő használata során akkor return false hogy hagyd abba, amit a felhasználó csinál és hogy őt válassza újra, vagy be újra. Ellenkező esetben, vissza igaz. 

És hadd mutassam be az egyik más változata ennek csak A magvető némi megértést cikke. Nos, a 2-es verziója ennek, forma-2-- Megcsinálom a hullám a kezét. Ez, azok számára, kíváncsi, A jQuery változata, Azoknak, akik esetleg érdemes pancsolás, hogy az adott könyvtárban. De nézzük start-- és bármilyen kérdése? Hadd szünet pillanatban, mert Ez gyors volt, és sokat. 

De a szép dolog az, hogy minden A kód nagyjából ugyanaz. Az új cucc, amit a dom? Mik ezek téglalapok? Mik ezek a csomópontok? Mi egy névtelen függvényt? Mi egy eseménykezelő? De szerencsére a legtöbb, ami csak teljes kört, mondjuk heti nulla. Minden rendben. Tehát valami kicsit érdekesebb? Nos, először is, hadd menjen előre, és nyissa meg a Google Maps. És észre fogod venni, hogy a pillanatban, a másodperc töredéke alatt, észre, mi történik, ha Én kattintson elég gyors. És ezzel kapcsolatban a Harvard annyira gyorsan, hogy nem igazán észre. De mit fajta egyfajta lásd ha én kattintson rá és húzza nagyon gyors? Azoknak, néz online, ha lassú ez a 0.5x sebesség, látható, ez jobb. 

Mi történik most mielőtt rákattintottam, és húzni? Hadd próbáljam here-- hadd csináljam valami mást, mint 90210. Menjünk messze. Ez volt igazán gyors is. Mit szólnál Disney World? Ott vagyunk. OKÉ. Mit láttál egy pillanatra? Csak, mint, terek, ugye? Helyőrzői csempe? 

Nos, mi folyik itt? A Google Maps egy szép példája ez a technológia, hogy hívják AJAX. És ez az, ahol elkezdjük a Használja a JavaScript egy különösen csábító módon. Vissza a nap, nem volt Ezen a honlapon az úgynevezett MapQuest. És én kellett volna egy screenshot ennek az 1990-es, ahol ha akart felnéz itt a térképen, akkor a szó szoros értelmében kattintson egy nyíl akár a tetején, hogy mutattam neked Más téren a térkép. Ha akarta, hogy balra, akkor kattintott egy nyíl, hogy mutattam neked Más téren a térkép. És néhány honlapok még ezt ma. De még MapQuest ütött Jobb, mint a Google Maps. 

Ehelyett mi a jobb ezeknek nap használó oldalakon AJAX. AJAX-- más néven Aszinkron JavaScript és XML, ami csak egy divatos szóval technológia vagy technika lehetővé teszi a böngészőben a JavaScript hogy tegyenek további HTTP kérések miután az oldal betöltése. Tehát mit jelent ez? Nos, ez lenne ilyen bosszantó a Gmailben Ha minden alkalommal, amikor akarta, hogy ellenőrizze a mail, Ön már szó szerint a control-R vagy Command-R vagy kattintson a Frissítés gombra és az egész rohadt oldal újratöltődik lenne. Jobb? Ez villogni fehér Valószínűleg a második. Látnád a hülye progress bar. És csak azért, hogy lássa, van új mail, az egész weboldal és az URL-t ha már itt volna újratölteni. 

De ez nem az, hogy mi történik a Gmail. Jobb? Amikor kap egy új e-mail Gmail, mi történik a képernyőn? Ez csak azt mutatja, ugye? Ez csak varázsütésre megjelenik mint egy új sort a táblázatban. Hogy valóban jár tisztességes mennyiségű bonyolultságát. Sőt, ha úgy gondolja, erről a fáról, amely jóllehet egy egyszerű, egy itt, Gmail-- és azt kell nézni a kódot kell sure-- Valószínűleg van egy HTML táblázat vagy talán rendezetlen listát, hogy teszi minden a beérkezett levelek e-maileket. 

És így ha ezt elképzelni ott egy fa a memóriában, ha éppen Gmail használatát, hogy néz ki, milyen fajta mint ez, amikor a Google rájön, ó, van egy új e-mail, ez nem szeretné újjáépíteni az egész fa. Inkább azt akarja, hogy megtalálják a csomópont A fa, ami az Ön postaládájába és csak helyezzen be egy új csomópontot. 

Szóval nagyon hasonló PSET öt, ahol Be kellett illesztenünk a csomópontok egy hash tábla, Hasonlóan működik a Google, via JavaScript kód, amely azt írta, elmozdulási ezt a fát, kitalálni, hogy hol az, hogy a postaládájába része az ablak, majd helyezzen be egy új sort. És egy új sort csak azt jelenti, egy vagy több új csomópontok egy fa. 

És így AJAX lehet ezzel a módszerrel amely lehetővé teszi a pontosan. Egyszer már felkeresett URL, Azonban őrült idő van, és ha az oldal rendelkezik betöltve, akkor is megragad több adatot a internet-- hogy ez e-mail vagy cserép egy map-- fogd meg a színfalak mögött majd helyezze be az oldalra úgy, hogy a humán nem igazán meg kell várni rá. 

Facebook Messenger ugyanígy működik. Bármilyen számú egyéb websites-- Ó, valóban, még ez. Úgy értem, ez, őszintén szólva, milyen egy idegesítő funkció ezekben a napokban. Ha elkezdek keres cats-- ezt egyfajta borzalmas felhasználói élményt. Csak kezd el keresni. Hát mit csinál? Az URL nem igazán változott mióta elkezdtem gépelni. De mi folyik szerte wire-- OK, hmm érdekes. Mi folyik szerte huzal itt csak lesz furább. 

OKÉ. Szóval hadd menjen előre, és vizsgáljuk elem és menjen a Hálózat fülre és igyekszem, hogy ez műszaki és kevésbé a macskákról. Ahogy írja, a szó szoros értelmében, macskák és-- mi történik per-- nem fogom, hogy kattintson a. Minden rendben. Szóval itt lent, mi történik minden Mire írja egy karakter, nyilván? Mint, alacsony? Mi történik a szóban forgó valamennyi karakterek vagyok gépelni az én billentyűzet? Igen? Közönség: [hallható]. 

DAVID MALAN: Pontosan. Minden karakterre van megy a Google, egyesével. Építik fel egy string saját szerver, amely képviseli mindent, amit beírtam eddig. És minden alkalommal, amikor írja másik karaktert, akkor Használja a titkos szósz egy kereső algoritmus, és kitalálni, nem ő jelenti ez a macska oldal vagy ez a macska az oldal vagy hasonló? Tehát bizonyos értelemben, ez ad nekem egy jobb élményt, hogy én nem is kell befejezni az én gondolatom. És valóban, ez egy hasznos dolog, autocomplete általában. Ha az algoritmusok elég jók ahhoz, és ha én keresések elég nyilvánvaló, Nem kell, hogy írja be a teljes szót. Ők fognak mondani, miről hogy én vagyok valójában keresnek. Tehát mi a Google kéri azonnali keresés csak az AJAX, kód használatával, amely lehetővé teszi számukra, hogy kérheti kiegészítő tartalom webböngészőn keresztül a színfalak mögött használja ezt új nyelv, JavaScript. Tehát van egy pár perc van hátra. És hadd hívjam fel a haverom Colton fel a színpadra, mivel úgy tűnt, különösen szórakoztató utoljára bevezetni a technológiát hogy néhányan közületek érdeklődését fejezte ki A végső projektek. Úgy gondoltuk, hogy lenne szórakoztató, hogy akár önkéntesként, bár ma hogy mutassa meg kiegészítésének ez lehetővé teszi, hogy you-- igen, Láttam ezt a kezét először. Gyere fel. Nagyon jól sikerült. Szép munka. Megyek vetíteni ezt A képernyőn csak egy pillanatra. Mi a neve mindenki számára? 

EFA: Én vagyok Efa. 

DAVID MALAN: Etha? 

EFA: Efa. 

DAVID MALAN: Efa? 

EFA: Igen. 

DAVID MALAN: Örülök, hogy látlak. Minden rendben. Jól értem kész. Gyere át a középen Colton itt. Milyen Colton van a kezében ma egy távirányító. Tehát ahelyett, hogy csak ott állni egy háromdimenziós világban körülnézve mint Colton tette, most Efa is valóban sétálni megy fel, le, balra és jobbra, mint egy Nintendo és az Xbox vezérlő. EFA: Megyek esik le a színpadról. DAVID MALAN: én állni nagyjából ide. De ez egy kockázat. OKÉ. Így megy előre, és tesz azok tovább. Hadd menjen előre, és váltani a képernyő itt. Hadd homályos a fények. És Colton, hadd gyere állni melletted. 

Szeretné, hogy itt most A mikrofon, mit csinálunk? Tessék. 

COLTON: Persze. Akkor most mi vagyunk feltöltését a Oculus, Azt hiszem operating-- nem működik rendszer, de a fő program, ahol akkor a hozzáférés minden a játékok és alkalmazásokat, amelyek a könyvtár. Tehát most, meg kell mondani érintse meg az érintőpadot kezdeni. Touchpad lesz a jobb oldalon a fülhallgatót. Így megy előre, és tap-- EFA: Ó, ember. DAVID MALAN: Igen, tessék. A minőségi Efa lát jóval magasabb minőségű. Ez csak a Wi-Fi hozzáférést. COLTON: Szóval azt akarnak csinálni van nézd teteje felé A képernyő jobb. Ja, hogy a játék a legtetején van. És akkor, amikor kiválasztja ez, érintse meg az érintőpadot újra. Azt hiszem, hogy Dreadhalls. És akkor itt van egy-- itt, hadd fogjam a szemüvegét az Ön számára. 

Szóval én csak adtam neki egy kontroller. Tehát most tudja irányítani a játékot. Ő lehet mozogni, és ilyesmi. Így megy előre, és keresse fel a csúcsra. Látnia kell új játékot. Így megy előre, és meg tudod csinálni ezt. Most, akkor képesnek kell lennie, hogy ellenőrizzék magát a vezérlő, valamint, amint A játék betölti itt. Ez lehet egy kicsit ijesztő. 

EFA: Most mondd meg. OKÉ. 

COLTON: Rendben. Szóval hogy tud mozogni. OKÉ. Lehet mozogni. Tökéletes. Tehát, ha lenéznek, van egy térkép. Térkép megmutatja, hogy hol van. Akkor nézz körül a szobában. Akkor teljesen megfordulni. Igen, pontosan. Fordulj meg. 

Így néz ki a bal oldalon. Azt hiszem, van valami, amit vegye fel a hordót a szobában. 

EFA: Hogyan jutok el a Térkép az útból? COLTON: Nézz fel. Csak nézz fel. Minden rendben. Nesze. Most megy előre, és csak megfordul. Így néz távolabb a bal oldalon. Mozogj maradt. Keresd maradt. Ne állj meg. Igen. 

EFA: Ó, ez így. 

COLTON: Igen. Séta felé azt a vezérlő. Nesze. Most meg kell mondani, vedd fel. Nesze. Felvenni. Minden rendben. Most pedig nézzük, hogy ki ez a szoba. Menj, és gyalog azon az ajtón. Szóval fogsz hold-- azt mondja tartja a gombot, hogy erőt nyitva. Így megy előre, és tartsuk lenyomva a gombot. Ja, arra kényszerítve, nyissa. Minden rendben. Szép munka. Most már kisétált a szobából. Így fogok hagyni a többit fel Önnek és mit kitalálni. EFA: Nem megyek a sötét szobában. Ó várj. Most mennem kell a sötét folyosón? OK, megyek vissza [hallhatatlan]. COLTON: Rendben. Még egy kis tételek, hogy vegye fel. Úgy néz ki, néhány érme. Ez egy lock pick. Tehát, ha talál egy lezárt ajtót, akkor használd. Félsz? 

EFA: Még nem. COLTON: OK. 

Pretend-- igen. Csak úgy, mintha te valóban ott áll. És ha kikapcsolod around-- neked kell szokni. De van értelme. DAVID MALAN: És míg Efa továbbra is játszani, hiszen tudtuk ezt egész nap, mindannyian lábujjhegyen itt. De van két másik pár, Ha azt szeretné, hogy jöjjön fel, és játszani. Ellenkező esetben, látni fogjuk, Jövő szerdán. Köszönöm, hogy mi önkéntes ma. [Taps] 

[ZENE - "Seinfeld téma"] 1. Előadó: Nos, én vagyok amivel egy új PL felmászik. Most megváltozott a OLPF-- 

Hangszóró 2: Tehát mi Pontosan csinálsz? 

1. Előadó: Nos, minden egyes these-- Itt, megmutatom neked ezt itt. Láthatjuk, hogy itt van. 

Hangszóró 3: Azt hiszem, jó vagyok ezekkel. Akarsz még? 

Hangszóró 4: Nem, nem vagyok jó. [Hallható]. 

Hangszóró 3: Nem, [hallhatatlan]. Van néhány. 1. Előadó: Különböző színű. Hangszóró 2: OK. 1. Előadó: Így végül mi nem az, hogy szabályozza a színt of--