[MUSIK SPELA] 

DAVID MALAN: Detta är CS50. Detta är början på veckan nio. Och detta är vad som skulle ha varit Mr. Boole 200-årsdag. Så det här är stipendiaterna som vi har nämnt ganska ibland om hur du använder Boolean variabler sant och falskt, 1 och 0 och sådant. Och detta var Googles Hyllning till honom idag. Han skulle ha fyllt 200. Så om du vill ansluta sig till oss för CS50 lunch, ta en titt på länken på kursens hemsida. Och sådana ansikten och vänner som dessa väntar dig här i Cambridge. Ansikten som dessa väntar dig i New Haven. Och, faktiskt, Ken i New Haven vänligt gjort vad som kallas en animerad GIF Eli här på en nyligen lunch-- en GIF ännu annan grafiskt filformat, som du är familiar-- att ser lite ut ungefär så här. Så bara en sekvens of-- OK. Ingen här i Cambridge skrattar. Men i New Haven, detta är verkligen roligt, eller hur? Okej. 

Så gör med oss ​​där. Här på Harvard, specifikt, onsdag, om du är en sophomore eller nybörjare even-- eller ens junior-- funderar på att göra en omkopplare i dator vetenskap, vet att det blir vara en CS rådgivning rättvis detta Onsdag, strax efter klass vid 04:00 i datorn vetenskap byggnad Maxwell Dworkin. Vi kommer att sätta detta på kursens webbplats i morgon, liksom. Munkar, jag har fått veta, kommer att serveras. 

Okej. Så roligt story-- jag peta runt på internet, och jag hittade några gamla arkiv av min tidigare hemsida. Och det visar out-- runt detta tid, verkar det mycket lägligt eftersom jag har förstått att valet UC är på väg att växla upp igen. Så jag körde för UC, förlorade kapitalt. Och kanske det var delvis varför. Så det här var min hemsida på den tiden. Av någon anledning, jag trodde det var en bra idé, innan tala om för folk vad min plattform var och varför de bör rösta på mig, att de har klicka på för att komma in för att ta reda på att information vilken i efterhand är typ av obehagligt. Jag vet inte riktigt vad det var. 

Men det gjorde verkligen inte hjälpa min kampanj. Jag fann också att genom högre year-- Jag hade Muppet kalendern. Muppets var typ av på modet då. Eller kanske de inte. Jag hade en Muppet kalender då. Och jag trodde det skulle vara coolt att namn min dator på Harvards nätverk frogman.student.harvard.edu. Vid den tiden hade vi alla unikt identifierbara värdnamn. Och du kan välja några fåfänga namn i stället för ditt eget namn. Och jag gick med frogman av någon anledning. 

Och då jag started-- jag tillbringade en hel del tid klicka dig vidare dessa länkar den här morgonen. Och detta var mitt om sidan, som nu slags verkar bedårande. Men det vittnar också bara hur långt tekniken har kommit. Jag menar, tillbaka i dag, en 486 var något. Dessa dagar, är det super, super, super långsamt och väl mindre än du kan ha i din egna fickor dessa dagar. Det finns mer där som var ännu mer pinsamt. Så jag lämnar den på det. Men det var min första razzia i web-- oh, nej. Det var inte. Min första riktiga razzia i webbprogrammering var denna webbplats, som jag bara glömt. Vid något tillfälle har jag lärt mig hur man göra repetitiva bakgrundsbilder. Och så jag tyckte att det här upprepas effektiv, som hockeyspelare, fotboll och golf boll, eller vad det nu är för Frosh IM webbplats. Och det var faktiskt verkligen den första webbaserade projekt jag tog on-- Jag tror kanske sophomore år, junior year-- efter att ha tagit CS50 och CS51, en av de vanliga följd på klasser. Jag märkte att titta igenom arkiven att en av mina efterträdare och vänner, Lee, typ av ändrade upphovsrätten till sig själv. Men det var verkligen något som Jag ska äga förlägenhet till. Men på den tiden, detta var det första hemsida, som jag sade för några veckor sedan, genom vilken recentior kunde registrera för intramural sport här. Och så visar det sig att bakgrundsbilder som som inte är en så bra idé. Men banan var ny, och Vi var alla experimentera. Och detta är vad jag tydligen gjorde vid den tidpunkten. Okej. Så utan vidare, vi byter kugghjulen i dag för att ge dig, verkligen, den sista pusselbiten som du kan hitta speciellt användbar för examensarbeten men också som kommer att börja göra hela webben känna lite mer begriplig. I själva verket, vi kommer att införa en mer programmeringsspråk kallas JavaScript som liknar och olika på olika sätt från språk vi har tittat på hittills. 

Så C, minns, detta är sammanställt språk. You got att köra det genom en kompilator. Du får källkoden att invända kod eller nollor och ettor. Och de är nollor och ettor som din CPU, Central Processing Unit, faktiskt förstår. PHP, däremot, är inte en kompilerad språk. Det är en vad? Det är ett tolkat språk. Så det finns något program kallas en tolk som måste läsa det-- topp till botten, vänster för att right-- och räkna ut vad alla din syntax gör och innebär oavsett om det är en loop eller ett tillstånd eller något annat antal programmering konstruktioner. Så det är ett tolkat språk. 

Sedan införde vi HTML. Och HTML är inte ens en programmeringsspråk. Vi skulle kalla det vad? En märkspråk, vilket är bara ett slags finare sätt att säga det inte har programmering konstruktioner som Vi såg även tillbaka i dag av Scratch. Det finns inga slingor. Det finns inga villkor. Det är verkligen ett språk om märkning upp dina data och formatera det eller strukturera den på något sätt. 

CSS, under tiden, på liknande sätt inte ett programmeringsspråk. Det är ännu mer estetiskt orienterad. Och det gör att du kan sortera av finjustera saker som teckenstorlek och färger och placering och allt detta. Sedan hade vi 

SQL. Så SQL är verkligen en programmering språk i någon mening, om än skräddarsydda specifikt till databaser. Men även om vi bara introducera dig till välja och infoga och ta bort och uppdatera och ett par andra, visar sig att du faktiskt kan skrivfunktioner eller förfaranden, eftersom de är heter, i SQL som ser och agerar riktigt gillar PHP och C-funktioner. Så vet att de existerar. Men vi behöver inte ens bry sig om dem som vi skrapar bara på ytan här. Och sedan JavaScript, den sista av våra språk formellt infördes. Så JavaScript, är också ett tolkat språk. Och de känner, gör du vill skilja den med några karakteristiska från både C och PHP? Vad gör det annorlunda? 

PUBLIK: Det är inte sammanställt. 

DAVID MALAN: Säg igen? 

PUBLIK: Det är inte sammanställt. 

DAVID MALAN: Det är inte sammanställt. Så det också tolkas. Så det är inte sammanställt. Men det gör det lite som PHP. Men det är fortfarande skiljer sig från PHP på något slående sätt, åtminstone på det sätt som vi kommer att använda det. Yeah? 

PUBLIK: Det går klientsidan. 

DAVID MALAN: Det går klientsidan, oftast. Det är verkligen utmärkande kännetecknande för oss just nu. C var på serversidan i den meningen att vi gjorde allt i CS50 IDE. PHP har hittills varit serversidan i den mån som det också blir interpreted-- inte sammanställt, men interpreted-- inne CS50 IDE, vilket naturligtvis är bara en server eller servrar i molnet. 

Men JavaScript, även om du att du kommer att börja skriva den för, säg, pset åtta och kanske final projects-- du kommer till höger det i CS50 IDE och spara den i filer inom CS50 IDE, CS50 IDE och i sin tur, molnet servrar som den är värd, kommer inte att tolka eller köra din kod. Snarare kommer det att sändas i oförändrad form ned till webbläsaren. Och det är då kommer att bli IE eller Chrome eller Firefox eller Safari eller vad som faktiskt tolkar det, uppifrån och ned, från vänster till höger. Så nyckeln särskiljande kännetecknande för idag är att JavaScript är klientsidan och PHP, till exempel, har varit på serversidan. Nu har denna intressanta implikationer för, som, immaterialrätt och vem kan faktiskt se din kod. Och faktiskt, kan du gå på webben och se de flesta någon kod att någon har skriven i JavaScript. Ibland är det läsbar, ibland är det förvrängd. Men mer om detta i god tid. 

Så JavaScript, snyggt nog, är super liknande, syntaktiskt, till C. Och mycket som PHP, det finns ingen huvudfunktion. Om du vill börja skriva JavaScript-kod, som du ser i dag, du bara börja skriva det. Men det är, du ser, i synnerhet användbara i samband med webbläsare. Men min lilla disclaimer-- vanligtvis earlier-- var att säga att du kan allt idag använder JavaScript på serversidan med hjälp av en fin ram kallas Node.js att en del av CS50: s egna program skrivs in. Kontrollera 50 faktiskt använder Node.js. Men vi kommer att fokusera på JavaScript på klientsidan här på ut. 

Så här är en uppsättning villkor i PHP. Tyvärr, in-- faktiskt, att uttalande, är alltför korrekt. Här finns också en uppsättning av förhållandena i JavaScript. Syntaktiskt, är det identisk med C och PHP. Mr Boole s uttryck är, på liknande sätt, syntaktiskt identisk med både C och PHP. Vi har även växlar i JavaScript som ser identiska. Vi har för slingor som är strukturerad identiskt, medan loopar, göra medan slingor. 

Den här är lite annorlunda. PHP hade för varje konstruktion att du kan vara att använda eller kommer att använda i pset sju, kanske. JavaScript har denna specialversion av för där du bokstavligen säga något som för rörlig nyckeln i objektet, vilket är en mycket kortfattad sätt att säga, om jag har en object-- och vi ska prata om de här igen i en moment-- och jag vill iterera över alla av de viktigaste värdeparen inuti, Jag behöver inte räkna ut hur man numeriskt index dem med noll, ett, två, tre. 

Jag kan bokstavligen säga detta. Och på varje iteration, JavaScript för mig kommer att uppdatera variabeltangent att vara den första nyckeln, sedan nästa tangent, sedan nästa tangent, sedan nästa tangent, och så vidare. Och jag kan komma åt sitt värde genom att behandla ett objekt i JavaScript, som vi får se, som om det är en associativ array i PHP. Faktum är att om du slutligen insvept din sinne kring vad en associativ array är i PHP, kan du tänka på det nu som identisk med ett objekt i JavaScript. Men det är en bit av en förenkling. 

Arrayer ser, snyggt nog identiska till PHP utom för ett tecken. Det finns en sak som saknas här att vi såg förra veckan med PHP. Vad utelämnats? Yeah? Ingen dollartecken. Så vi är tillbaka till en mer normal värld där variabler har inte dollartecken. Men du prefix dem med var typiskt. Och var betyder variabel. Och mycket som PHP är löst typed-- varvid det finns typer, Det finns siffror och strängar och flottar och så forth-- JavaScript har liknande typer. Men det är löst skrivit att vi programmerare behöver inte ange dem. Vi måste bara vara medvetna om att olika typer förekommer. 

Variabler är meanwhile-- här hur vi kan förklara "hello, world" som en sträng. Lägg märke till att det är identiskt med PHP men ingen dollartecken. Och detta är något som vi kommer börjar se mer idag, där du har ett objekt med nycklar och värden. Och om du vill prova att dra slutsatsen från förra week-- syntaxen är lite annorlunda. Men en liten sanity check-- hur många nycklar gör detta objekt verkar ha? Så jag ser fyra. Jag ser två. 

Så det är egentligen två. Så det här är en samling av två nyckel-värdepar. Nyckeln är symbol vars värde är FB. Nyckeln är priset vars värde är 101,53. Så de är två nyckel-värdepar. Och kom ihåg, PHP-- och detta är återigen bara typ av syntaktisk skillnad. Det är inte alla som intellektuellt intressant. PHP kan ha skrivit samma sak som follows-- citationstecken, lika. Och jag ändra dessa till hakparenteser. Och sedan jag ändra detta till ett noterat ordet "pris." Och då jag inte använder ett kolon. Vad jag använder i förra veckan? Ja, likhetstecknet pil funky notation. 

Och sedan jag gjorde samma sak här. Samma sak här. Och det är allt. Så det är bra om det här har inte verkligen sjunkit in i minnet bara men eftersom det är verkligen intellektuellt ointressant. Det är bara syntaktiska skillnader. Men idéerna är exakt densamma. Insidan av denna variabel citat i JavaScript är en samling av nyckel-värde-par, en av vilka är symbol, en av vilka är priset. Och jag kan komma åt dessa värden med följande syntax. Precis som i PHP, jag kunde göra något like-- låta mig göra den här rutan lite större. Precis som i PHP, jag kunde gör this-- oh, dammit. Kom igen. 

Precis som i PHP-- OK, vi ska bara använda presentatörsanteckningar. Precis som i PHP, jag kan gör $ citat $ citat ["symbol"] och detta kommer att få mig värdet på "symbol." I JavaScript, det kommer att bli identiska, där jag kan bara göra detta. Det enda som är saknas är dollartecken. 

Så fint nog, så finns det inte så mycket nytt syntax. Så vad vi idag fokuserar på, egentligen, är några av de idéer och program. Och den första program som du kanske har sett om du dök i pset sju redan är syntax. Så i pset sju, om du har sett eller inte sett det ännu, vet att det finns en fil som vi ger du ringde config.json-- JavaScript Object Notation. Varför? Vi ville att kunna förse dig med en mall med några nyckel-värdepar. Vi ville att kunna ge dig en lista av värden, namnet på servern. Vi ville ge dig en platshållare för ditt användarnamn och en platshållare för ditt lösenord. Om du inte ser detta ännu, inte oroa dig. Mer om detta i pset sju [? spec. ?] Och då, självklart vill vi att du att fylla i till-DOS eftersom när du loggar in CS50 IDE, var och en av er har ditt eget användarnamn och lösenord. 

Så vi kunde har använt ett halvt dussin eller flera olika filformat. Vi kunde ha använt en .txt-fil. Vi kunde använt en CSV-fil. Vi kunde ha använt en INI-fil, en XML-fil, en hel massa fler förkortningar som du kanske aldrig har hört. Det är typ av godtycklig Vid slutet av dagen. Men super populär i dessa dagar är en text format som kallas JSON-- JavaScript Object Notation-- som ser ut så här. Det är lite kryptiskt, men märker mönstren. Du börjar med en öppen lockigt stag, och du sluta med samma. Inuti det är något. Det är en nyckel-värde-par. Så det här är ett objekt som jag tittar på på skärmen här som har en nyckel, vilken har ett värde. Och bara dra slutsatsen baseras på tidigare mönster, vad är nyckeln här? Databas, sak att vänster i tjocktarmen. 

Nu händer värdet vara en flera rader denna gång. Men värdet börjar med en lockig stag och slutar med en lockig stag. Så vad skulle du föreslå är typ av värdet av databasen? En ordbok eller bara mer fattat, ett objekt. Höger? Detta är lite av en datastruktur som kan använda andra strukturer inom sig. Så om allt det här vi är ringer en object-- och ett objekt är bara en massa nyckel värde pairs-- den värdet av själva databasen är ett objekt. Värdet av databasen har en hel drös av nyckelparen värde, av vilka den första är värd, sedan namn, sedan användarnamn, då lösenord, var och en av vars värderingar, under tiden, är det bara en tråkig strängen skrivas inom citationstecken. 

Så även om det inte är Super Clear ännu, vet att detta är bara en standard, ganska tråkigt sätt att lagra data i ett standardformat. Men de vanligaste misstagen du kan göra, även i pset sju, är lite dumma saker, som om du oavsiktligt utelämna komma dit. Det kommer att resultera i filen inte nödvändigtvis vara läsbar. Om du av misstag hoppa över saker som citationstecken, det kommer inte att vara läsbar. Så det är en ganska nitpicky filformat men det är ett som är super vanligt. Och vi råkar använda det, även om du inte använder någon JavaScript annars i pset sju. 

Okej. Så kom ihåg den här bilden. Vi pratade om, i HTML, som koden kan se ut så här. Detta är Hypertext Markup Language [OHÖRBAR] för bara "hello, world." Men sedan vi föreslagit en tag sedan att om det hjälper, kanske du vill börja tänka om detta redan som ett träd. I själva verket, fördjupningen som vi Använd bara för läsbarhet skull eller för stil skull på vänster kan typ av översättas till detta träd, där du har några speciella rotnoden att vi ska allmänt kallad dokument, under vilken är roten HTML element eller tagg, HTML, som då har två barn, huvud och kropp. 

Och sedan i sin tur, har huvudet en titel. Och titel har ett textvärde. Och kroppen har på liknande sätt ett textvärde. Så om du är bekväm tale att ja, kan du ta den här HTML och rita en bild som detta, den högra sidan är en trevlig mental modell för nu att vi har JavaScript, en programmerings språk som webbläsare kan verkställa och tolka för dig, det visar sig att det vi håller på att göra i kod är att börja manipulera denna trädstruktur i minnet. Vi behöver inte bygga trädet i minnet. Vi behöver inte göra sorts pset-five-stil datastruktur komplexitet. Webbläsaren, snyggt nog, på tolka HTML toppen till botten, vänster eller höger, bokstavligen gå till lämna oss motsvarande en pekare till att hela trädet gratis. Det gör allt det hårda arbetet. Det är vad Mozilla och Apple och andra har gjort för oss. 

Och med JavaScript ska vi kunna styra och förändra och göra intressanta saker till trädet, annars känd som ett DOM eller Document Object Model. Vilka saker? Tja, visar det sig att i JavaScript, det finns denna lista av händelser som kan äga rum. Och vi har inte riktigt använt den ord sedan vecka noll och pset noll när vi pratade om Scratch. De flesta av er förmodligen inte använder en händelse i ditt Scratch projektet. Men du kanske kommer ihåg den enkla Marco Polo exempel, där vi hade två sprites, varav sade Marco. Den andra av dem då, vid lyssnande och höra så fall, sade Polo. Om inte, är du välkommen att ser tillbaka så långt tillbaka. 

Men det är bara att säger, och du kan typ av sluta sig namnen på dessa saker, JavaScript, visar det sig, kommer att ge oss ett sätt att lyssna för mus går ner eller mus går upp eller nyckel går ner eller nyckel går upp eller onSubmit onselect eller onresizing något. Med andra ord, någon fysisk handling att en människa kan ta med en webbläsare att du gör varje dag, kan du skriva kod för det lyssnar efter dessa händelser och sedan gör något lämpligt. 

Till exempel, om du använder Google Maps, vad händer om du klickar på och flytta musen, typiskt? Om du klickar och drar? Yeah? Exakt. Kartan börjar röra sig. Så du kan sorts se vad som är hit, vad är borta. Och hur Google genomföra det? Tja, förmodligen, de är med hjälp av ett par av dessa fall lyssnare, en som säger, lyssna efter på mus down-- så när användaren fysiskt skjuter sin styrplattan eller dennes mus ner. Och då vi letar efter något liknande rörelse eller någon annan händelse som ger oss möjlighet att fånga upp drag. Och i själva verket är att dra på samma sätt i detta dot dot dot lista över möjliga alternativ. 

Så det här kommer att bli ett kraftfullt sätt att börja reagera för användaren redan innan han eller hon faktiskt klickar något uttryck liknande klicka. Men vi kommer att införa ett par ämnen att komma dit. Men först, låt oss övergång till viss faktiska koden. Så jag kommer att gå framåt och öppna upp dom-0, vilket är ett mycket enkelt exempel här att om jag zooma in bara har denna ingång här för mig. Och jag kommer att gå vidare och skriva in "David" för mitt namn och klicka på Skicka. 

Och sedan, om än sorts billigt, jag har denna prompt som dyker upp som säger, "Hej, David!" Så det här är en typ av som vår "hello, world" att vi gjorde en stund tillbaka i C och även i PHP eftersom jag har dynamiskt matas mitt namn. Jag kan göra någon annans namn här. Jag kunde helt enkelt ändra detta till liknande, Hannah, klicka på Skicka. Och faktiskt, de små pop-up förändringar. 

Nu, pop-ups är en av de mest missbrukade särdrag hos banan. Och faktiskt, igen dagen popup-blockerare kom på modet eftersom du skulle gå till vissa website-- kanske en tvivelaktig plats-- som skulle då plötsligt börja peppe skärmen med en hel massa popup-fönster. Och så denna förmåga att dyka upp fönster i framför användaren har inte varit särskilt väl emot av mänskligheten. Så det är därför du ser detta hindra sak, som bara gör det hela fula. Så vi kommer att behöva en bättre sätt att uppmana användaren. Men för tillfället verkar det som att arbeta. Så bara intuitivt, vad verkar vara fallet här? Jag går vidare och klicka på Skicka, och då något händer, tydligt. Men vad som inte händer som skedde förra veckan som helst jag klickade på Skicka? Vad hände inte på skärmen? Förlåt? Ladda. Webbadressen förändrades inte alls. Jag sade att detta var dom-0, och jag är fortfarande på dom-0. Normalt skulle vi få förändrats till någon annan URL, liksom register.php eller liknande. 

Men även när jag avfärda denna sak genom att klicka på OK, märker att webbadressen förblir helt lägga. Och, faktiskt, om jag är lite skeptisk, låt mig att öppna upp Chrome. Låt mig att öppna upp på fliken Nätverk. Och märker att det är tomt just nu. Låt mig gå vidare och skicka Maria. Det finns ingen nätverkstrafik som helst. Så det finns ingen HTTP. 

Så ja, om jag tittar på källkoden för this-- låt mig stäng fönstret och gå till Visa källa. Intressant. Det ser ut som om det finns några nya tillägg, bland dem manus. Så låt oss ta en titt i CS50 IDE exakt vad jag skickas till användaren. 

Så här är-- låt oss fokusera på enbart HTML. Här är den nedre halvan av dom-0.html. Och märker att det har fått en titel, ett huvud tag, en body-taggen, en form tagg. Men vad hoppar ut till dig som annorlunda, speciellt om du har aldrig skrivit själv någon JavaScript. Låt mig rulla lite till höger här. Jag har en ingång, en annan ingång för skicka. Jag har ett ID, som är typ av ny. Men vi såg detta med CSS. Vad är definitivt nytt? Yeah? Fin. 

Okej. Så där det står onSubmit, märker vad som verkar följa. Detta är ett attribut i HTML-nomenklaturen. Dess värde är noterade sträng här. Och detta ser lite konstigt vid första anblicken. Det är inte HTML. Det är inte CSS. Detta är, som ni kan gissa, JavaScript. Så det verkar som inbyggd i detta webbsida är en funktion som kallas hälsar. Och jag dra slutsatsen att just eftersom det är ett ord, hälsar. Det har fått en öppen Paren, nära Paren, semikolon. Ser ut som en C-funktion, ser ut som en PHP-funktionen. 

Och faktiskt, det kommer att vara en JavaScript-funktion. Då jag återvänder falskt. Vi ska återkomma till som på bara ett ögonblick. Men var är den här funktionen definieras? Bra låt mig rulla uppåt till början av filen. Och även om det är en lång rad, Det är relativt enkelt. Låt mig zooma ut här och fokusera på dessa fyra linjer. 

Så i JavaScript, bara som PHP, du bara säg, bokstavligen, ordet "funktionen" namnet på funktionen, och sedan parenteser med någon arguments-- inga argument i detta fall. Och det finns ingen returtyp i JavaScript, precis som PHP. Så det är en lite lösare än C. Öppna klammerparentes, nära klammerparentes. Inbyggt i JavaScript är ett function-- inte en rekommenderad function-- men en funktion som kallas alert vars enda syfte i livet är att dra upp det ganska ful be att vi såg för en stund sedan. 

Nu är lite av en munsbit. Vad händer här? Så låt oss börja markera allt här. Det är samma argument för att varna. Och vad är det som händer? Detta ser ut precis som en sträng. Och det visar sig, till skillnad från PHP och till skillnad från C, det spelar ingen roll i JavaScript om du apostrof eller dubbla citattecken. De kommer att vara likvärdiga. Och ärligt talat, det är bara populär i dessa dagar för JavaScript programmerare alltid Använd apostrof av någon anledning. Det är just den sak att göra. Men vi skulle kunna använda citationstecken, liksom. 

Så plus är en ny karaktär. Men de av er som har gjort det här förut, vad betyder plus detta? Yeah. Concatenate. Så vi såg detta i PHP. Det finns bara pricken operatör i PHP som kommer sammanfoga två strängar tillsammans. C var en smärta i nacken för att göra detta. Minns från pset sex, som var en särskild smärta i nacken, du skulle behöva använda något liknande strcat efter allokering av minne på stacken eller högen. Du var tvungen att hoppa genom hoops bara för att sammanfoga två strängar. I JavaScript, det är super enkelt. Använd bara plus operatören mellan dem. 

Så den komplexa utseende sak verkar vara här eftersom i slutet av Hela denna sträng, jag bara concatenate på ett utropstecken. Så om det var poppar upp var "Hej, David", "Hej, Hannah," "Hej, Maria," och så vidare, klart som mellan sak mellan de två plus måste ge mig tillgång till vad? Vad finns där säkert? Yeah. Så jag ska låtsas här besvara deras namn, eller hur? Så deras namn dök upp i finalen resultat. Så vad betyder det? Tja, föreslog jag tidigare i det bild som den så kallade DOM har denna speciella rotelement långt uppe kallas dokument. Och nu visar det sig, det kommer utgöra en särskild global variabel i JavaScript, inbyggd i vilken är en massa användbara funktioner. Bland de användbara funktioner är förmåga att få på någon ättling nod. Dessa kvadrater eller rektanglar eller ellipser är bara noder i ett träd, så att säga. 

Så visar det sig att byggas in JavaScript dokumentobjekt är en funktion, annars känd som en metod, som kallas getElementById. Syntaxen för att ringa en funktion i JavaScript som är inne i ett objekt eller en variabel är bara med punktnotation. Och vi såg detta i C vad struct syntax. Du ser detta i pset sju, typ av, slags, när du ser CS50 :: fråga. Kolon kolon i PHP är en annan sätt att anropa en funktion som är insidan av något föremål. 

Men nu i JavaScript, det är bara en prick. Och så den här funktionen, fint nog, typ av säger vad det does-- få inslag av ID. Ett element är bara ett annat namn för en tagg eller nod i DOM. Och så får del av ID "namn" innebär this-- här är min HTML. Och baserat på denna HTML, vad nod eller vilken HTML-tagg är jag kommer att programmatiskt lämnas genom att ringa document.getElementById? 

Ja, exakt. Jag kommer att få input elementet finns vars ID är "namn." Så specifikt, kan du tänka på den här funktionen, getElementById, som ett sätt att ge tillbaka en pekare till den specifika nod i trädet. Vi har inte dragit denna träd, men det är ett sätt för att få tillgång till den rektangel eller att rektangel genom unikt identifierar den via sin ID. 

Nu, varför är detta bra? Tja, visar det sig att när du har fått denna nod, som rektangel från bild, noden inne i det, i sin tur, har en hel del properties-- par nyckel-värde eller data, ett av vilka kallas värde. Så bokstavligt, det är lite av en munsbit för att förklara det hela. Men i slutet av dagen, allt detta gör är att ge dig en sträng som användaren har skrivit in i detta hierarkiskt sätt. Men jag gillar inte en par av dessa saker. Eller snarare, det finns en viss nyfikenhet fortfarande. Allt detta verkade fungera. Varför tror du att jag återvände false efter ringer hälsar? Detta ser lite ful, att Jag har två uttalanden där separerade med semikolon. Ta en gissning. Om jag bort returnera false, vad kan hända, bara instinktivt? Tyvärr, säger det igen? 

Öppna ett gäng Windows. Så potentiellt kanske något sånt skulle hända. Vad annars? Kan lämna in en ansökan där? Till samma sida. Så i själva verket är att det närmare svara här, även om, till skillnad från i det förflutna, jag har inte specificerad åtgärds attribut, som normalt vi måste göra. Det visade sig att det finns en standard. Om du inte anger åtgärder, Det är som att säga citat, unquote eller namnet på själva filen, som i detta fall skulle vara som dom-0.html. Det är bara typ av slutsatsen, eller snarare underförstådda. 

Och så om jag inte gör det, låt oss märka. Låt mig spara denna. Och jag har tagit bort return false. Låt mig gå tillbaka till exempel och kraft i det igen. Och du kanske har sett mig föreslå detta på CS50 Diskutera ett gäng gånger. Om något någonsin agerar funky och webbläsare är inte beter sig som du förväntar dig, Ofta du vill hålla Skift och sedan klicka på Uppdatera. Det kommer att tvinga alla filer att ladda och inte använda webbläsarens lokal cache eller kopiera så att nu, låt mig gå vidare och öppna upp min inspektör, på fliken Nätverk. Jag kommer att klicka Bevara Logga eftersom jag inte vill att det ska ta bort raderna när jag får forslas bort på annat håll. 

Låt mig gå vidare här och typ i Andi, klicka på Skicka. Okej. Det verkar som förväntat. Det säger "Hej, Andi." Låt mig klicka på OK. Intressant. Lägg märke till att sidan ändras, om än till den ursprungliga sidan. Lägg märke till URL typ av förändrad. Den tillade ett frågetecken, som vanligtvis är en indikator att vi försökte lämna något. Och sedan vid botten, ännu tydligare, här är den verkliga HTTP-begäran, som fick ett svar av 200 som förde mig tillbaka hit. 

Så det här är inte vad vi vill göra, eller hur? För att jag inte vill ladda om hela sidan. Jag ville i stället att återvända falsk, så att kortslutning webbläsarens standardbeteendet, som var, naturligtvis, för att lämna sidan. 

Så låt oss ta en titt på en marginellt bättre exempel. Detta är dom version en. Och lägg märke till följande. Det är OK om du inte grok alla de rader kod. Men vad är fundamentalt annorlunda om detta genomförande? Jag ska föreskriva att det beter sig samma, gör samma sak. Vad har jag självklart gjort annorlunda? Yeah? 

PUBLIK: [OHÖRBAR]. DAVID MALAN: Ja. Så funktionen definieras differently-- med andra ord, ute ur formen, uppe på linjen 7-- eller snarare, rad 8-- inte längre jag har onSubmit attribut. I föregående exempel hade jag redan. Och då jag bokstavligen skrev min kod här. Och då sa jag returnera false. Och om det inte gnugga du på fel sätt ännu, Det ska börja i den mån som, precis som i HTML, när vi började att blandas det med CSS i formatattribut, det bara börjat få lite stökigt eller känner sig lite fel. 

På samma sätt här, om du börjar ta HTML, och sedan automatiskt plopp några JavaScript-kod i mitten av ett noterat sträng, det är inte kommer att vara mycket att underhålla. Höger? Det är inte ens självklart först ort där JavaScript-kod är. Så det skulle vara riktigt nice en princip om bättre design, Låt oss hålla vår HTML helt skild från vår JavaScript. 

Så för att göra det, vad vi har gjort här är following-- vi helt enkelt använda HTML för endast uppmärkning. Och så i version ett av denna, alla Jag har är en form med ett unikt ID. Och sedan ner här, jag tar fördel av en speciell egenskap hos JavaScript där jag kan ha vad som är kallas en anonym funktion. Så det visar sig att om jag kallar document.getElementById av "demo" det är som att ge mig en pekare till denna nod i mitt träd, formelement, så att säga. 

Nu, jag vet bara från veta lite HTML nu är vi att ha läst några online- referens, att ett formulärelement stöder en hel massa evenemang listeners-- i andra ord, den lista av händelse lyssnare som vi såg för en stund sedan. Jag vet från att läsa dokumentationen att onSubmit är en giltig händelse avlyssnare för en formulärelement. 

Så när jag vet det, det är säkert för mig att göra den following-- få den noden från trädet, formulärelement, och komma åt så kallade onSubmit egenskap. Så punkten betyder bara Detta är en egenskap, som ett särskilt värde i den. Och vad datatyp jag tilldela, tydligen, att onSubmit, vilket är i själva verket en variabel inuti av den noden i trädet? Det är ett område inne i den struct. Vad är datatypen? 

En funktion, ja. Så visar det sig att PHP har detta. Och även om vi inte berätta om det, C har även funktionspekare, de förmåga att passera och tilldela funktioner som variabler värderingar själva. Och vi kommer inte att regrediera tillbaka till C. Men nu visar det sig att på den högra sidan här, även om det ser lite skraj, detta medel, hej webbläsare, ge mig en funktion. Jag tänker inte ens bry ge den ett namn eftersom jag bokstavligen kommer att tilldela låt oss kalla det adressen till denna funktion omedelbart att onSubmit. Med andra ord, webbläsare, behöver du inte att veta vad den här funktionen kallas. Du behöver bara veta där den är i minnet. Och så räcker det bara har ett likhetstecken där och inte bry namnge detta, liksom foo eller hälsar eller något annat ord. Och nu detta är bara en stilistisk sak. Jag kunde röra denna klammerparentes på the-- sorry-- nästa rad som vi brukar göra CS50. Men i JavaScript, det är faktiskt stilist gemensamma att bara hålla klammerparentes, den först en, på den första raden. 

Men hädanefter, det finns inget intressant. Det öppna klammerparentes bara avgränsar början av min funktion. Funktionen är nu identiska, förutom att jag har inkluderade returnera false insidan av denna funktion. Eftersom det visar out-- och du skulle bara vet detta från läsning den documentation-- att om den funktion som du tilldelar till onSubmit handler returnerar false, webbläsaren bara vet och samtycker inte att skicka formuläret till en server. Om det returnerar true, kommer det fram den till en server av skäl som vi kommer att se är användbara på bara ett ögonblick. 

Och sedan semikolon efter den lockiga stag där bara betyder att jag klar att definiera funktionen. Du vet vad man ska kalla så snart när du hör en inlaga. Okej. Detta är fortfarande utan tvekan slags ful. Så vad mer kan vi göra? 

Tja, visar det sig då i version två, som är den last-- och vi ska bara blick på detta. Med risk för att göra det fulare, visar det sig att det finns ett bibliotek i världen som kallas jQuery. Och jQuery är en super populära JavaScript-bibliotek det är så populär att de flesta någon JavaScript-- det inte ovanligt att människor förvirra jQuery med JavaScript. Varför? JavaScript själv har mycket verbose sätt att göra saker-- document.getElementById, dadadadadada. Du sluta med mycket långa rader av kod. 

Så en man vid namn John Resid, som faktiskt fungerar för en start upp dessa dagar, kom ut med detta bibliotek år sedan att många människor har bidragit att kallas jQuery att förändringar syntaxen på följande sätt. Och bara så du har sett denna, eftersom du kommer alltid se detta om att göra en webbaserat slutprojekt, detta skulle vara den motsvarande sätt att genomföra samma funktion genom att använda denna specialbibliotek. 

Nu, i stället för retas isär i sin helhet, låt oss titta bara på vissa mönster. Denna syntax verkar ha hur många anonyma funktioner eller namnlösa funktioner eller AKA lambda funktioner? Två, eller hur? Och du vet att även om du inte super comfy med detta, bara genom det faktum att det säger function () två gånger. 

Och det visar sig att vad denna kod är doing-- och vi kommer att hänvisa till online referenser, i slutändan, om hjälp med detta. Det betyder bara att när dokumentet är färdigt, gå vidare och registrera följande funktion som lämna hanteraren för HTML element vars unik idé är demo. Och sedan, när det händer, kalla dessa två rader kod. Och det är tragiskt, en mer utförlig sätt att säga return false. Och vi nämnde detta bara för att ser du koden så här på nätet. Och det är inget att avskräcks av. Men i stället, tänk på att det är kommer att bli vanliga i JavaScript är detta paradigm. Och så det är därför vi visa det för nu. Okej. Så utan bostad för mycket på den syntax, finns det finns några frågor om dessa exempel eller idéer hittills? Okej. Så låt oss använda detta för något nyttigt. Att göra en webbsida som bara säger hej, så och så är inte så intressant, att inte underwhelm. Detta kommer inte att vara vacker, men det kommer att göra något nyttigt. Låt mig gå tillbaka till min katalog här och öppna upp, säger, form 0.html. 

Så antar att detta är nybörjare registrering intramural sportsida utan CSS eller känsla för design. Och jag vill gå vidare och registrera dig här med ett lösenord. Och jag kommer att gå med på villkoren och villkor och klicka på Registrera. Och nu webbplatsen säger, "Du är registrerad! (Tja, inte riktigt.) " Det verkar som om det fungerade, men Låt mig gå vidare och tvinga reload. 

Och låt mig säga, nej, det gör du inte behöver min riktiga e-postadress. Eller kanske vi ska bara säga e-post där. Lösenord kommer att, liksom, 12345. Och sedan, bara för att jag är en idiot, det är nu 123.456.789. Och jag tänker inte att kontrollera din box. 

Hmm. Okej. Så det finns flera möjligheter för förbättringar här. Och du vet, eller kommer att se i pset sju, som du kan skriva code-- och du måste skriva kod i PHP-- att försvara mot dessa typer av användare fel eftersom användaren klart har inte samarbetat. Och han eller hon inte har gett dig alla värderar du ville eller ens i formatet att du ville ha dem. Så du ser i pset sju som Vi skulle säkert ha lite om villkor som säger Om e-postadressen är inte en username@something.edu, vi kunde bara säga förlåt och be om ursäkt till användaren mycket, som du kan vara i pset sju. Eller om de inte har kontrollerat detta fält, visar sig i PHP, kan du upptäcka det, också. Och visst, om lösenorden matchar inte som i register.php för pset sju, kan du upptäcka det. Men det är en smärta i hals i det nu begära de oss att gå hela vägen till servern. Användaren informeras om felet. Och åtminstone om du inte använder vissa snyggare tekniker, Nu måste de klicka på bakåtpilen. Skulle det inte vara trevligt, liksom många webbplatser idag, om du hade mer omedelbar feedback, omedelbart? 

Med andra ord, låt mig gå till version en, som kommer att finnas någon vackrare. Men det har den här funktionen. Malan, 12345, 123456789, inte kommer att markera rutan, registret. Lösenorden matchar inte. Så även om detta pop-up är ugly-- Vi kan ersätta denna så småningom med något som Bootstrap, som du ser i pset sju är en mycket populär library-- jag gjorde detektera att lösenorden inte stämmer överens. Okej. Nåväl, låt mig fixa det som användaren. Låt mig gå vidare och säga 12345, 12345. Fortfarande inte kontrollera avtalet. Du måste godkänna de villkor. Så varför? 

Om vi ​​redan har belägen att det finns ett sätt, och vi har krävt att du i pset sju för att upptäcka fel tillstånd som detta serversidan, varför skulle jag bry också göra detta i JavaScript? Vad är ett argument förmån för tillsats vad du är på väg att se som some-- det finns ytterligare komplexitet. 

Kanske finns det ingen upp. Vad kan det vara? PUBLIK: [OHÖRBAR]. DAVID MALAN: Åh, intressant. Potentiella bedrifter. Så säker, om du inte hanterar felaktiga indata från användaren så bra, kanske det är desto bättre om det inte ens nå din server. Jag skulle driva tillbaka dit och säga, bör du antagligen fixa båda dessa problem. Men det är rättvist. Vad annars? 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Ja. Denna kod, som vi sagt tidigare, är tolkas på klientsidan. Det bryr sig inte servern, vilket betyder att det inte påverka serverns belastning eller kapacitet. Och nu, för lite gamla mig, Detta har ingen betydelsefull effekt eftersom jag har en användare just nu. 

Men om du är någon webbplats anständigt storlek, särskilt de största, som Facebook, ju mer du kan hålla folk utanför av din server desto bättre eftersom en server, naturligtvis, endast har en ändlig mängd RAM, ett begränsat antal gigahertz, ett ändligt antal saker den kan göra per tidsenhet. Så om det finns fler människor i världen träffa din server, oavsiktligt loggning felaktigt, lika bra om du kan hålla det avlastar servern. Plus, särskilt på en mobil device-- om du har någonsin logga in my.harvard eller Yales nätid eller liknande, Det är det här latensen med en hel del webbplatser som att där det tar, som en jävla sekund eller två ibland. Och sedan, min Gud, om du skriver fel, då måste man slå tillbaka och göra om den. Så det finns latens, särskilt på långsammare nätverksanslutningar. Men JavaScript, eftersom det körs på klienten och behöver inte gå fram och tillbaka över en potentiellt långsam internet anslutning kan du få nästan ögonblicklig respons. 

Så låt oss titta på det här. Låt mig öppna upp form 0 och titta på HTML här. Och låt oss bara se vad som händer. Detta är en form vars åtgärd är register.php. Jag bara använda får så att jag kunde se webbadressen. Men för lösenord, skulle vi säkert vill att ändra på detta för att skriva i verkligheten. Här är en inmatningsfält av typen text. Här är en annan ingång fält av typen lösenord. Här är, om du aldrig har sett, en ingång av typen kryssrutan. 

Men det finns ingen JavaScript här som helst. Detta är bara HTML som går till register.php. Men i version ett, där jag började att få dessa pop-ups, låt oss se vad som faktiskt händer här. I version ett, vad Jag kommer att see-- I trodde att jag kunde stanna tillräckligt med tillräckligt många ord, men jag sprang ut. 

I version en-- där vi går. I version en, märker following-- och är inte den bästa genomförande, men det är min första. Lägg märke till att under den formulär, jag har en script-tagg. Och en script-tagg innebär hey, webbläsare, här kommer en del kod i, typiskt, JavaScript. Och nu märke till vad jag gör. På line-- Jag kan knappt Läs det-- linje 32, den säger, var form-- så ge mig en variabel som heter form. Och sedan få document.getElementId av "registrering." Vad är detta? Nåväl, låt mig spola tillbaka upp här. Och varsel, ah, gav jag formulärelement en godtycklig men beskrivande idé för registreringen. Så det här ger mig en variabel som tillåter mig att ta den nod, att rektangel i trädet kallas form. form.onsubmit medel, hej webbläsare, registrera en händelseavlyssnare i detta formulär. Med andra ord, när denna form är lämnats köra följande kod. Det behöver inte ett namn eftersom varför behöver du veta namnet? Du behöver bara veta vad man ska köra, ergo det är en anonym eller lambda funktion. Och att funktionen är alla dessa linjer här. Och nu, för att vara ärlig, även om du kanske inte har någonsin skrivit JavaScript innan, det är bara C och PHP logik. Så om form.email.value == "" - så om e-fältet är tomt, skrika på användaren med "Du får din e-postadress. " Annars om form.password.value är tom skrika åt användaren, "Du måste ange ditt lösenord." 

Mer intressant logiskt, om form.password.value inte lika form.confirmation.value-- där fick bekräftelse ifrån? Låt mig bakåt. Tja, jag ringde denna ingång fältet här lösenord. Och jag kallade detta en här bekräftelse. Jag kunde ha kallat det lösenord två eller något annat. Jag är bara logiskt kontroll att dessa två är desamma. Else-- det visar sig detta är Mr Boole igen-- ett booleskt värde, kryssrutan. Så om jag säger, utrop point-- om inte form.agreement.checked, skrika på användaren också. 

Så här syntaxen du ser är mycket vanliga i JavaScript, där du har denna avdelad. Du börjar med ett föremål här. Du dyka djupare till en till en egenskap som lösenord. Och sedan får du till verkligt värde. Och återigen, här är ingången. Här är namnet lösenord. Och dess värde är oberoende av människa har faktiskt skrivits in. 

Så i alla dessa fall, återvände jag falskt. Men om inte, återvänder jag sant. Och så nu ser vi en övertygande användning av när du skulle returnera false till stoppa vad användarens göra och göra honom eller henne välja igen eller skriv igen. Annars återvänder vi sant. 

Och låt mig presentera en andra variant av detta bara att ympa en viss förståelse därav. Tja, i version 2 av detta form 2-- Jag gör det med en våg av en hand. Detta är, för alla som är nyfikna, jQuery versionen, de av er som kanske vill plaska i just den biblioteket. Men låt oss start-- och några frågor? Låt mig stanna upp stund eftersom Det var snabbt och mycket. 

Men det fina är att alla av koden är ganska mycket samma. Den nya saker är vad är dom? Vilka är dessa rektanglar? Vilka är dessa noder? Vad är en anonym funktion? Vad är en händelsehanterare? Men tack och lov, de flesta av som bara full cirkel från, säg, vecka noll. Okej. Så något lite mer intressant? Jo, först och främst, låt mig gå vidare och öppna upp Google Maps. Och du kommer att märka att för ett ögonblick, på bråkdels sekund, märker vad som händer när Jag klickar tillräckligt snabbt. Och detta sammanhang vid Harvard är så snabbt att du inte riktigt märker det. Men vad gör du slags slags se om jag klickar och drar riktigt snabbt? De av er att titta på nätet, Om du sakta detta till 0,5x hastighet, Du kan se detta bättre. 

Vad som hände bara innan jag klickade och drog? Låt mig försöka här-- låta mig göra något annat, som 90210-. Låt oss gå långt borta. Det var verkligen snabb, alltför. Vad sägs om Disney World? Det går vi. OK. Vad såg du för en sekund? Precis, som, torg, eller hur? Platshållare för plattor? 

Tja, vad händer här? Google Maps är ett bra exempel på denna teknik som kallas AJAX. Och det är där vi ska börja använda JavaScript på ett särskilt lockande sätt. Tillbaka i dag, var det denna hemsida som heter MapQuest. Och jag borde ha tagit en skärmdump av detta från 1990-talet, där om du ville leta upp här på kartan du skulle bokstavligen klicka en pil upp på toppen som visade dig en annan fyrkant på kartan. Om du vill flytta vänster, du klickade en pil som visade dig en annan fyrkant på kartan. Och vissa webbplatser fortfarande gör detta i dag. Men även MapQuest har fått bättre, som Google Maps. 

Istället, vad är bättre dessa dagar är webbplatser som använder AJAX. AJAX-- annars känd som Asynchronous JavaScript and XML, som ligger bara ett fint sätt att säga en teknik eller teknik som tillåter en webbläsare med JavaScript att göra ytterligare HTTP-förfrågningar efter sidan har laddats. Så vad betyder det? Tja, skulle det vara snäll av irriterande i Gmail Om varje gång du ville att kontrollera din e-post, du hade bokstavligen slå Ctrl-R eller Kommando-R eller klicka på Ladda-knappen och hela jäkla sidan skulle ladda om. Höger? Det skulle blinka vitt antagligen för andra. Du skulle se dum förloppsindikator. Och bara för att se om du har ny hela webbsidan och URL-post, du är på måste ladda om. 

Men det är inte vad som händer i Gmail. Höger? När du får ett nytt e-postmeddelande i Gmail, vad som händer på skärmen? Det visar bara upp, eller hur? Det bara magiskt visas som en ny rad i tabellen. Som faktiskt innebär en anständig mängd komplexitet. I själva verket, om du tycker om det här trädet, som trots är enkel här, Gmail-- och jag skulle behöva se på koden att vara sure-- förmodligen har en HTML-tabell eller kanske en oordnad lista som den gör alla dina inkorgar e-post som. 

Och så om ni föreställa er detta finns är ett träd i minnet när du är använder Gmail som ser typ av sorts så här, när Google inser, ooh, du har en ny e-post, det gör det inte vill bygga om hela trädet. Snarare vill man att hitta noden i trädet som representerar din inkorg och bara sätta in en ny nod. 

Så mycket lik PSET fem, där du var tvungen att sätta noder i en hashtabell, liknande gör Google, via JavaScript-kod som den har skrivit, travers detta träd, räkna ut var är att inkorgen delen av fönstret, och sedan sätta in en ny rad. Och en ny rad betyder bara en eller fler nya noder i ett träd. 

Och så AJAX är denna teknik som möjliggör just detta. När du har besökt en webbadress men galet lång tid det är, och när sidan har laddats, kan du fortfarande ta mer data från den internet-- oavsett om det är e-post eller en platta av en map-- greppa den bakom kulisserna och sedan in den i sidan så att den mänskliga egentligen inte måste vänta på det. 

Facebook Messenger fungerar på samma sätt. Valfritt antal andra websites-- åh, faktiskt, även detta. Jag menar, detta är, ärligt talat, typ av en irriterande har dessa dagar. Om jag börjar söka efter cats-- detta är lite av en hemsk användarupplevelse. Det bara börjar söka efter mig. Väl vad gör det? Webbadressen har verkligen inte förändrats sedan jag började skriva. Men vad som händer över wire-- OK, hmm intressant. Vad händer över tråd här blir bara konstigare. 

OK. Så låt mig gå vidare och inspektera elementet och gå till fliken Nätverk och försöka göra detta teknisk och mindre om katter. Som jag skriver, bokstavligen, katter och-- vad som händer per-- Jag tänker inte klicka på den. Okej. Så här nere, vad som händer varje gång jag skriver ett tecken, tydligen? Liksom, låg nivå? Vad händer med var och en av dem tecken jag skriver på mitt tangentbord? Yeah? PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Exakt. Var och en av dessa tecken är gå till Google, en i taget. De bygger upp en sträng på deras server som representerar allt jag har skrivit i hittills. Och varje gång jag skriver en annan karaktär, de använda sin hemliga sås av en sökalgoritm och räkna ut, menar han denna katt sidan eller denna katt sida eller liknande? Så i någon mening, det ger mig en bättre upplevelse eftersom jag inte ens behöver för att slutföra min tanke. Och faktiskt, det är en bra sak, automatisk komplettering i allmänhet. Om deras algoritmer är bra nog och om mina sökningar är uppenbara nog, Jag behöver inte skriva in hela ord. De kommer att tala om för mig vad det är jag faktiskt söker efter. Så vad Google kallar snabb sökning bara använder AJAX, med hjälp av kod som gör det möjligt för dem att begära ytterligare innehåll via en webbläsare bakom kulisserna med hjälp av detta nytt språk, JavaScript. Så vi har ett par minuter kvar. Och låt mig kalla upp min kompis Colton upp på scenen, eftersom det verkade särskilt roligt förra gången att införa en teknik att några av er har uttryckt intresse i för examensarbeten. Vi trodde att det skulle vara kul att få en volontär, men idag visa ett tillägg till detta som gör du-- yeah, Jag såg denna hand först. Kom upp. Väldigt bra gjort. Bra jobbat. Jag kommer att projicera detta på skärmen på bara ett ögonblick. Vad heter du för alla? 

EFA: Jag är EFA. 

DAVID MALAN: Etha? 

EFA: Efa. 

DAVID MALAN: Efa? 

EFA: Ja. 

DAVID MALAN: Trevligt att se dig. Okej. Låt mig få detta klart. Kom över till mitten med Colton här. Vad Colton har i sina händer idag är en fjärrkontroll. Så istället för att bara stå där i en tredimensionell värld titta runt som Colton gjorde, nu Efa kan faktiskt gå runt genom att gå upp, nedåt, åt vänster och höger som en Nintendo eller Xbox-handkontrollen. EFA: Jag kommer att ramla av scenen. DAVID MALAN: Jag kommer stå ungefär hit. Men det finns en risk. OK. Så gå vidare och lägga dem på. Låt mig gå vidare och växla till skärmen här. Låt mig dämpa belysningen. Och Colton, låt mig kommer stå bredvid dig. 

Vill du förklara här med mikrofonen vad vi gör? Här får du. 

COLTON: Visst. Så just nu är vi laddar upp Oculus, Jag antar att operating-- fungerar inte systemet, men huvudprogrammet, där du kan komma åt alla spel och appar som finns i biblioteket. Så just nu, bör det stå knacka på pekplattan för att börja. Pekplatta kommer att vara på höger sida av headsetet. Så gå vidare och tap-- EFA: Åh, man. DAVID MALAN: Ja, det du går. Kvaliteten Efa är att se är mycket högre kvalitet. Detta är bara Wi-Fi här. COLTON: Så vad du är kommer att vilja göra är att titta mot toppen till höger på skärmen. Japp, det spelet på den mycket längst upp till höger. Och sedan när du väljer det, peka på pekplattan igen. Jag tror att dess Dreadhalls. Och så här är A-- här, låt mig hålla dina glasögon för dig. 

Så jag gav honom bara en styrenhet. Så nu kan han styra spelet. Han kan flytta runt och sånt. Så gå vidare och ser upp till toppen. Du bör se New Game. Så sätt igång och du kan göra det. Nu ska du kunna styra själv med den registeransvarige, samt, så snart som spelet laddar upp här. Det kan vara lite skrämmande. 

EFA: Nu kan du berätta för mig. OK. 

COLTON: Okej. Så bekräfta att du kan flytta runt. OK. Du kan flytta runt. Perfekt. Så om du tittar ner, har en karta. Karta visar var du är. Du kan titta runt i rummet. Du kan helt vända. Ja, exakt. Vänd dig om. 

Så se till vänster. Jag tror att det är något du kan plocka upp på ett fat i rummet. 

EFA: Hur får jag staka ut vägen? COLTON: Slå upp. Titta bara upp. Okej. Här har du. Nu gå vidare och bara vända. Så ser längre till vänster. Hålla sig i rörelse åt vänster. Hålla ser vänster. Fortsätt. Yeah. 

EFA: Åh, så att. 

COLTON: Ja. Gå mot den med regulatorn. Här har du. Nu bör det säga plocka upp den. Här har du. Plocka upp den. Okej. Nu ska vi komma ut ur detta rum. Gå vidare och gå till dörren. Så du kommer att hold-- det står håll knappen för att tvinga den öppna. Så sätt igång och håll nere. Japp, tvingar den öppnas. Okej. Bra jobbat. Nu ska vi gå ut ur rummet. Så jag ska lämna resten upp till dig och se vad du hittar ut. EFA: Jag tänker inte i det mörka rummet. Oh vänta. Nu måste jag gå ner den mörka korridoren? OK, jag kommer tillbaka [OHÖRBAR]. COLTON: Okej. Några fler objekt att plocka upp. Ser ut som några mynt. Det är ett lås plockning. Så om du hittar en låst dörr, kan du använda det. Är du rädd? 

EFA: Inte ännu. COLTON: OK. 

Pretend-- ja. Bara låtsas du är faktiskt står där. Och om du slår around-- du har att vänja sig. Men det är vettigt. DAVID MALAN: Och medan Efa fortsätter att spela, eftersom vi kunde göra detta hela dagen, Vi kan alla tå härute. Men vi har två andra par, Om du vill komma upp och spela. Annars kommer vi att se nästa på onsdag. Tack till vår volontär i dag. [Applåder] 

[MUSIK - "Seinfeld TEMA"] TALARE 1: Tja, jag är sätta en ny PL montera på. Jag ändrade bara OLPF-- 

TALARE 2: Så vad exakt gör du? 

TALARE 1: Tja, var och en av these-- här, ska jag visa dig den här här. Du kan se det här. 

TALARE 3: Jag tror att jag är bra med dessa. Vill du ha mer? 

TALARE 4: Nej, jag är bra. [OHÖRBAR]. 

TALARE 3: Nej, [OHÖRBAR]. Ha några. TALARE 1: Olika färger. TALARE 2: OK. TALARE 1: Så i slutändan vad det gör det justerar färgen of--