[Musik spiller] 

DAVID MALAN: Dette er CS50. Dette er starten på uge ni. Og det er, hvad der ville have været Mr. Boole 200 års fødselsdag. Så dette er stipendiaterne til hvem vi har hentydet helt nogle gange om brug Boolean variabler sande og falske, 1 og 0 og sådan. Og det var Googles Hyldest til ham i dag. Han ville have slået 200. Så hvis du gerne vil slutte sig til os for CS50 frokost tage et kig på linket på kursets hjemmeside. Og sådanne ansigter og venner som disse venter dig her i Cambridge. Ansigter som disse venter dig i New Haven. Og faktisk, Ken i New Haven venligt gjort hvad der kaldes en animeret GIF Eli her på en nylig lunch-- en GIF er endnu anden grafisk filformat, som du er familiar-- at ser lidt noget som dette. Så bare en sekvens of-- OK. Ingen her i Cambridge griner. Men i New Haven, dette er virkelig sjovt, ikke? Okay. 

Så du slutte sig til os der. Her på Harvard, specifikt denne onsdag, hvis du er en sophomore eller freshman even-- eller endda junior-- tænker på at gøre en switch i edb videnskab, ved, at der ll være en CS rådgive retfærdig dette Onsdag kort efter klassen kl 4:00 i computeren videnskab bygning Maxwell Dworkin. Vi vil sætte dette på kursets hjemmeside i morgen, så godt. Donuts, jeg har fået fortalt, vil blive serveret. 

Okay. Så sjovt story-- jeg stikke rundt på internettet, og jeg fandt nogle gamle arkiver af min tidligere hjemmeside. Og det viser out-- omkring dette tid, det virker meget rettidig da jeg har forstået, at valget i UC er ved at geare op igen. Så jeg løb for UC, tabte ynkeligt. Og måske dette var en del hvorfor. Så dette var min hjemmeside på det tidspunkt. Af en eller anden grund, jeg troede, det var en god idé, før fortæller folk hvad min platform var, og hvorfor de bør stemme for mig, at de har til at klikke for at indtaste for at finde ud af, at oplysninger, som set i bakspejlet er slags utryg. Jeg ved ikke rigtig, hvad det var. 

Men det er bestemt ikke hjælpe min kampagne. Jeg fandt også, at af den øverste year-- Jeg havde denne Muppet kalender. Muppets var slags på mode dengang. Eller måske var de ikke. Jeg havde en Muppet kalender dengang. Og jeg troede, det ville være cool at navn min computer på Harvards netværk frogman.student.harvard.edu. På det tidspunkt havde vi alle entydigt værtsnavne identificerbare. Og kunne du vælge nogle forfængelighed navn i stedet for dit eget navn. Og jeg gik med Frogman anden grund. 

Og så er jeg started-- Jeg brugte en masse af tid klikke gennem disse links denne morgen. Og dette var min om side, som nu slags synes yndig. Men det er også vidner til lige hvor langt teknologien er kommet. Jeg mener, tilbage i dag, en 486 var noget. Disse dage, det er super, super, super langsom og godt mindre end du måske har i din egne lommer i disse dage. Der er mere om der, var endnu mere pinligt. Så jeg vil lade det blive ved det. Men det var min første razzia i web-- åh, nej. Det var ikke. Min første rigtige strejftog i webprogrammering var denne hjemmeside, som jeg lige har glemt. På et tidspunkt, lærte jeg at gøre gentagne baggrundsbilleder. Og så jeg fandt denne fliselægning effektive, Ligesom ishockeyspiller, fodbold og golf bold, eller hvad der er for Frosh infrastrukturforvaltere hjemmeside. Og det var faktisk, virkelig den første web-baseret projekt, jeg tog on-- Jeg tror måske sophomore år, junior year-- efter at have taget CS50 og CS51, en af de fælles opfølgning på klasser. Jeg har bemærket i leder gennem arkiverne at en af ​​mine efterfølgere og venner, Lee, slags ændret ophavsretten til sig selv. Men det var faktisk noget, Jeg ejer den forlegenhed til. Men på det tidspunkt, denne var den første hjemmeside, som jeg sagde for et par uger siden, hvorved freshman kunne tilmelde intramurale sport her. Og så viser det sig, at baggrundsbilleder gerne, at der ikke sådan en god idé. Men internettet var nyt, og vi alle eksperimentere. Og dette er, hvad jeg tilsyneladende gjorde på det tidspunkt. Okay. Så uden videre, vi skifter tandhjul i dag til at give dig, virkelig, den sidste brik, som du kan finde især nyttigt for afsluttende projekter men også at vil begynde at gøre hele world wide web føler lidt mere forståeligt. Ja, vi kommer til at indføre endnu et programmeringssprog kaldet JavaScript, der ligner og forskellige på forskellige måder fra sprog, vi har kigget på hidtil. 

Så C, husker, er dette kompileret sprog. Du har fået til at køre det igennem en compiler. Du får kildekoden til at gøre indsigelse kode, eller nuller og ettaller. Og dem er nuller og ettaller, der din CPU, Central Processing Unit, faktisk forstår. PHP, derimod, er ikke en kompileret sprog. Det er en hvad? Det er et fortolket sprog. Så der er nogle program kaldes en tolk, at skal læse it-- top til bund, venstre til right-- og finde ud af, hvad alle din syntaks gør, og betyder, uanset om det er en sløjfe eller en tilstand eller et andet nummer af programmeringen konstruktioner. Så det er et fortolket sprog. 

Derefter introducerede vi HTML. Og HTML er ikke engang en programmeringssprog. Vi ville kalde det, hvad? En markup sprog, som er lige en slags fancy måde at sige det ikke har programmering konstruktioner som så vi selv tilbage i dag med Scratch. Der er ingen sløjfer. Der er ingen betingelser. Det er virkelig et sprog om mærkning af dine data og formaterer det eller strukturere det på en eller anden måde. 

CSS mellemtiden tilsvarende ikke et programmeringssprog. Det er endda mere æstetisk orienterede. Og det giver dig mulighed for at sortere i finjustere ting som skriftstørrelse og farver og placering og alt dette. Derefter havde vi 

SQL. Så SQL er faktisk en programmering sprog i en vis forstand, omend skræddersyet specifikt til databaser. Men selv om vi kun præsentere dig for vælge og indsætte og slette og opdatere og et par andre, viser sig du kan faktisk skrivefunktioner eller procedurer, som de er kaldes, i SQL, der ser og handle helt ligesom PHP og C-funktioner. Så ved, at de eksisterer. Men vi ved ikke engang gider med dem som vi lige ridse overfladen her. Og så JavaScript, den sidste af vores sprog formelt indført. Så JavaScript, også er et fortolket sprog. Og de kender, gøre du ønsker at skelne det med nogle karakteristiske fra både C og PHP? Hvad gør det anderledes? 

PUBLIKUM: Det er ikke kompileret. 

DAVID MALAN: Sig igen? 

PUBLIKUM: Det er ikke kompileret. 

DAVID MALAN: Det er ikke kompileret. Så det også tolkes. Så det er ikke kompileret. Men det gør det lidt ligesom PHP. Men det er stadig forskellig fra PHP i nogle slående måde, i det mindste i den måde, vi vil bruge det. Ja? 

PUBLIKUM: Det kører klientsiden. 

DAVID MALAN: Det kører klientsiden, som regel. Det er faktisk kendingsnummer karakteristisk for os lige nu. C var server-side i den forstand, at vi gjorde alt i CS50 IDE. PHP hidtil har været server-side omfang som det også kommer interpreted-- ikke kompileret, men interpreted-- inde CS50 IDE, hvilket naturligvis er bare en server eller servere i skyen. 

Men JavaScript, selv selvom du du vil at begynde at skrive det for, siger, pset otte og måske sidste projects-- du er kommer til at rette det i CS50 IDE og gemme det i filer i CS50 IDE, CS50 IDE og til gengæld de cloud-servere hvor det er hostet, vil ikke at fortolke eller udføre din kode. Snarere, det vil blive sendt i uændret form ned til browseren. Og det er så bliver IE eller Chrome eller Firefox eller Safari eller hvad der rent faktisk fortolker det, top til bund, venstre til højre. Så nøglen kendingsnummer karakteristisk for dag er, at JavaScript er client-side og PHP, for eksempel, har været server-side. Nu, dette har interessante konsekvenser til, ligesom, intellektuel ejendomsret og hvem kan faktisk se din kode. Og ja, kan du gå på internettet og se de fleste enhver kode, nogen har skrevet i JavaScript. Nogle gange er det læsbar, nogle gange er det korrumperet. Men mere om det i god tid. 

Så JavaScript, pænt nok, er Super lignende, syntaktisk, til C. Og meget gerne PHP, der er ingen vigtigste funktion. Hvis du vil begynde at skrive JavaScript-kode, som du kan se i dag, du bare begynde at skrive det. Men det er, du vil se, især nyttige i forbindelse med web-browsere. Men min lille disclaimer-- normalt earlier-- var at sige, at du kan mere og mere i dag brug JavaScript server-side ved hjælp af en fancy ramme kaldet node.js at nogle af CS50 egne programmer er skrevet i. Tjek 50 rent faktisk bruger Node.js. Men vi kommer til at fokusere på JavaScript klientsiden nu af. 

Så her er en række betingelser i PHP. Beklager, in-- faktisk, at erklæring, også er korrekt. Her er også et sæt forhold i JavaScript. Syntaktisk, er det identisk med C og PHP. Mr. Boole s udtryk er, Tilsvarende syntaktisk identisk med både C og PHP. Vi har også kontakter i JavaScript, der ser ens. Vi har for løkker, der er struktureret identisk, mens løkker, gøre, mens sløjfer. 

Denne ene er lidt anderledes. PHP havde for hver konstruktion at du måske skal bruge eller vil bruge i pset syv, måske. JavaScript har denne specielle udgave af for hvor du bogstaveligt talt sige noget lignende for variabel nøgle i objekt, som er en meget kortfattet måde at sige, hvis jeg har fået en object-- Og vi vil tale om disse igen i en moment-- og jeg ønsker at gentage over alt af de centrale værdipar indeni, Jeg behøver ikke at finde ud af at numerisk indeks dem med nul, en, to, tre. 

Jeg kan bogstaveligt talt sige dette. Og på hver iteration, JavaScript for mig vil opdatere den variable nøgle at være den første nøgle, så den næste nøgle, derefter den næste tast, så den næste nøgle, og så videre. Og jeg kan få på sin værdi ved at behandle et objekt i JavaScript, som vi vil se, som om det er en associative array i PHP. Ja, hvis du endelig pakket din tankerne omkring hvad en associativ array er i PHP, kan du tænke på det for nu som identisk med et objekt i JavaScript. Men det er lidt af en oversimplificering. 

Arrays ser, pænt nok, identisk PHP bortset fra én karakter. Der er én ting mangler her at vi kunne se i sidste uge med PHP. Hvad er udeladt? Ja? Ingen dollartegn. Så vi er tilbage til en mere normal verden, hvor variabler har ikke dollartegn. Men du præfiks dem med var, typisk. Og var betyder variabel. Og meget gerne PHP er løst typed-- hvorved der er typer, der er tal og strenge og flåd og så forth-- JavaScript har tilsvarende typer. Men det er løst skrevet i, at vi programmører behøver ikke at angive dem. Vi skal bare være opmærksom på, at der findes forskellige typer. 

Variabler, meanwhile-- her er hvordan vi måske erklære "Hej, verden" som en streng. Bemærker det er identisk med PHP men ingen dollartegn. Og det er noget, vi vil begynde at se mere i dag, hvorved du har et objekt med nøgler og værdier. Og hvis du ønsker at prøve at udlede fra sidste week-- syntaksen er lidt anderledes. Men en lille tilregnelighed check-- hvor mange nøgler er dette objekt synes at have? Så jeg ser fire. Jeg ser to. 

Så det er faktisk to. Så det er en samling af to nøgleværdipar. Det centrale er symbolet hvis værdi er FB. Det centrale er prisen, hvis værdi er 101,53. Så dem er to nøgleværdipar. Og husk, PHP-- og det er igen lige slags syntaktisk forskel. Det er ikke alt, intellektuelt interessant. PHP kunne have skrevet denne samme noget som follows-- tilbud, lig. Og jeg ændre disse til firkantede parenteser. Og så er jeg ændre dette til en citerede ord, "pris". Og så skal jeg ikke bruge et kolon. Hvad gjorde jeg bruge i sidste uge? Ja, lighedstegnet pil funky notation. 

Og så gjorde jeg det samme her. Samme ting her. Og det er alt. Så det er fint, hvis det ikke har virkelig sunket i til hukommelsen bare endnu, fordi det er virkelig intellektuelt uinteressant. Det er bare syntaktiske forskelle. Men ideerne er nøjagtig den samme. Inde i denne variabel citat i JavaScript er en samling af nøgleværdipar, hvoraf den ene er symbol, hvoraf den ene er prisen. Og jeg kan få på disse værdier med følgende syntaks. Ligesom i PHP, kunne jeg gøre noget like-- lade mig gøre dette felt lidt større. Ligesom i PHP, kunne jeg gøre denne-- åh, for helvede. Kom nu. 

Ligesom i PHP-- OK, vi får bare bruge præsentationsnoter. Ligesom i PHP, kan jeg gøre $ quote $ citat ["symbolet"], og dette vil få mig værdien af ​​"symbolet." I JavaScript, det vil være identiske, hvorved jeg kan bare gøre det. Det eneste, der er mangler, er dollartegn. 

Så pænt nok, så er der ikke så meget nyt syntaks. Så hvad vi i dag fokuserer på, virkelig er nogle af de ideer og ansøgningerne. Og den første program, som du måske har set, hvis du investerer i pset syv allerede er denne syntaks. Så i pset syv, hvis du har set eller ikke set det endnu, ved, at der er en fil, som vi giver du kaldte config.json-- JavaScript Objekt Notation. Hvorfor? Vi ønskede at være i stand til at give dig en skabelon med nogle nøgleværdipar. Vi ønskede at være i stand til at give dig en liste af værten, navnet på serveren. Vi ønskede at give dig en pladsholder for dit brugernavn og en pladsholder for din adgangskode. Hvis du ikke kan se dette endnu, ikke at bekymre dig. Mere om dette i pset syv [? spec. ?] Og så, selvfølgelig, vi vil have dig at udfylde gøremål fordi når du logger ind CS50 IDE, hver af jer have dit eget brugernavn og adgangskode. 

Så kunne vi har brugt et halvt dusin eller flere forskellige filformater. Vi kunne have brugt en .txt-fil. Vi kunne bruges en CSV-fil. Vi kunne have brugt en INI-fil, en XML-fil, en hel masse flere akronymer, der du måske ikke har nogensinde hørt. Det er slags vilkårlig ved udgangen af ​​dagen. Men super populære i disse dage er en tekst format kaldet JSON-- JavaScript Object Notation-- der ligner dette. Det er lidt kryptisk, men bemærker mønstrene. Du starter med en åben krøllet klampe, og du ender med det samme. Inde i det er noget. Det er en nøgle-værdi par. Så det er et formål at jeg ser på på skærmen her der har en nøgle, som har en værdi. Og netop udlede baseret på tidligere mønster, hvad er nøglen her? Database, ting at venstre i tyktarmen. 

Nu sker værdien at være en flere linjer denne gang. Men værdien starter med en krøllet afstive og slutter med en krøllet tandbøjle. Så hvad ville du foreslå, er den type værdien af ​​databasen? En ordbog eller, bare mere kortfattet, et objekt. Højre? Det er lidt af en datastruktur, der kan bruge andre strukturer i sig selv. Så hvis hele denne ting er vi kalde en object-- og et objekt er bare en flok nøgle-værdi pairs-- den værdien af ​​databasen i sig selv er et objekt. Værdien af ​​databasen har en hel masse af Nøgleværdiparrene, hvoraf den første er vært, derefter navnet, så brugernavn, derefter adgangskode, hver af hvis værdier, i mellemtiden, er det bare en kedelig streng i anførselstegn. 

Så selv hvis det ikke er super klar endnu, ved, at dette er blot en standard, temmelig kedelig måde til lagring af data i et standardformat. Men de mest almindelige fejl du kan gøre, selv i pset syv, er små dumme ting, ligesom hvis du uheld udelade komma der. Det kommer til at resultere i filen ikke nødvendigvis at være læsbar. Hvis du ved et uheld udelade ting som citater, er det ikke kommer til at være læsbar. Så det er en temmelig nitpicky filformat, men det er en, der er super almindeligt. Og vi tilfældigvis til at bruge det, selvom du ikke bruger nogen JavaScript ellers i pset syv. 

Okay. Så husk dette billede. Vi talte om, i HTML, at koden kan se sådan ud. Dette er HyperText Markup Language [Uhørligt] for bare "hej, verden." Men så har vi foreslået en stykke tid tilbage, at hvis det hjælper, du måske ønsker at begynde at tænke om dette allerede som et træ. Faktisk indrykningen at vi bruge bare for læsbarhed skyld eller for stil skyld på venstre kan slags oversættes til dette træ, hvor du har nogle særlige rod node, at vi vil generisk kaldes dokument, under hvilken er roden HTML-element eller tag, HTML, som derefter har to børn, hoved og krop. 

Og så til gengæld hoved har en titel. Og titel har en tekstværdi. Og kroppen på samme måde har en tekstværdi. Så hvis du er fortrolig ordsprog at ja, kan du tage denne HTML og tegne et billede som dette, højre side er en dejlig mental model, fordi nu at vi har JavaScript, et programmeringssprog sprog, browsere kan udføre og fortolke for dig, det viser sig, at det vi er ved at gøre i koden er begynde at manipulere dette træstruktur i hukommelsen. Vi behøver ikke at bygge træet i hukommelsen. Vi har ikke at gøre slags pset-fem-stil datastruktur kompleksitet. Browseren, pænt nok efter fortolke HTML top til bund, venstre eller højre, der bogstaveligt talt kommer til at hånd os hvad der svarer til en pegepind til at hele træet gratis. Det gør alt det hårde arbejde. Det er, hvad Mozilla og Apple og andre har gjort for os. 

Og med JavaScript skal vi være i stand til at kontrollere og ændre og gøre interessante ting at det træ, ellers kendt som en DOM eller Document Object Model. Hvilke slags ting? Tja, det viser sig, at i JavaScript, der er denne vaskeri liste over begivenheder, der kan finde sted. Og vi har ikke rigtig brugt, at Ordet siden uge nul og pset nul, når vi talte om Scratch. De fleste af jer sikkert ikke bruge en begivenhed i dit Scratch projekt. Men du måske husker den enkle Marco Polo eksempel hvor vi havde to sprites, hvoraf den ene sagde, Marco. Den anden hvoraf derefter, efter at lytte og høre denne begivenhed, sagde Polo. Hvis ikke, er du velkommen til se tilbage så langt tilbage. 

Men dette er blot for at sige, og du kan slags udlede navnene på disse ting, JavaScript, viser det sig, kommer til at give os en måde at lytte for muse går ned eller mus går op tasten eller gå ned eller nøgle går op eller onSubmit onselect eller onresizing noget. Med andre ord er enhver fysisk handling at et menneske kan tage med en browser at du gør hver dag, kan du skrive kode for det lytter efter disse begivenheder og derefter gør noget passende. 

For eksempel, hvis du bruger Google Maps, hvad der sker, hvis du klikker og flytte musen, typisk? Hvis du klikke og trække? Ja? Præcis. Kortet begynder at bevæge sig. Så du kan slags se hvad der er herovre, hvad er derovre. Og hvordan Google gennemfører det? Nå, formentlig, de er ved hjælp af et par af disse tilfælde lyttere, en, der siger, lyt til på mus down-- så når brugeren fysisk skubber hans pegefeltet eller dennes mus ned. Og så er vi på udkig efter noget lignende bevægelse eller en anden begivenhed, tillader os at fange træk. Og i virkeligheden, træk er ligeledes i dette dot dot dot liste over mulige indstillinger. 

Så dette vil være en kraftfuld måde at begynde at reagere til brugeren endnu før han eller hun rent faktisk klikker noget eksplicit lignende indsende. Men vi kommer til at indføre et par emner at komme dertil. Men først, lad os overgang til nogle konkrete kode. Så jeg har tænkt mig at gå videre og åbne op for dom-0, hvilket er et meget simpelt eksempel her, at hvis jeg zoomer ind simpelthen har denne indgang her for mig. Og jeg har tænkt mig at gå videre og skrive "David" for mit navn, og klik på Send. 

Og så, omend slags billigt, jeg har denne prompt, der popper op, der siger, "Hej, David!" Så dette er slags ligesom vores "Hej, verden" at vi gjorde en stund tilbage i C og selv i PHP, fordi jeg har dynamisk udlæses mit navn. Jeg kan gøre en andens navn her. Jeg kunne blot ændre dette til, lignende, Hannah, klik på Send. Og ja, den lille pop-up-ændringer. 

Nu pop-ups er en af ​​de fleste misbrugte funktioner i nettet. Og faktisk igen dagen pop-up-blokkere kom ind i mode, fordi du ville gå til nogle website-- måske en tvivlsom sted-- der ville så pludselig begynde peppering din skærm med en hel masse pop-ups. Og så denne evne til at poppe op vinduer i foran brugeren har ikke været særlig godt modtaget af menneskeheden. Så det er derfor du ser dette forhindre ting, hvilket bare gør det hele grim. Så vi kommer til at bruge en bedre måde at bede brugeren. Men for nu, der synes at arbejde. Så bare intuitivt, hvad synes at være sker her? Jeg gå videre og klik på Send, og så er der noget der sker, tydeligt. Men hvad der ikke sker det skete sidste uge helst jeg klikkede Indsend? Hvad skete ikke på skærmen? Undskyld? Genindlæse. Den URL ændrede ikke på alle. Jeg sagde det var dom-0, og jeg er stadig på dom-0. Normalt ville vi få ændret til en anden URL, ligesom register.php eller lignende. 

Men selv når jeg afskedige denne ting ved at klikke på OK, bemærke, at webadressen forbliver helt sat. Og i virkeligheden, hvis jeg er lidt skeptisk, lad mig åbne op Chrome. Lad mig åbne op på fanen Netværk. Og bemærk det er tomt i øjeblikket. Lad mig gå videre og sende Maria. Der er ingen som helst netværkstrafik. Så der er ingen HTTP. 

Så ja, hvis jeg ser på kildekoden for denne-- lad mig lukke dette vindue og gå til Vis Kilde. Interessant. Det ser ud som om der er nogle nye mærker, blandt dem script. Så lad os tage et kig indenfor CS50 IDE præcis, hvad jeg sendt til brugeren. 

Så her is-- lad os kun fokusere på HTML. Her er den nederste halvdel af dom-0.html. Og bemærk, at det har fået en titel, et hoved tag, et organ tag, en form tag. Men hvad springer ud til dig som anderledes, især hvis du aldrig har skrevet dig selv enhver JavaScript. Lad mig rulle lidt til højre her. Jeg har et input, en anden indgang til indsende. Jeg har fået et ID, som er form for nyt. Men vi ser dette med CSS. Hvad er absolut nyt? Ja? Nice. 

Okay. Så hvor der står onSubmit, mærke til, hvad der synes at følge. Det er en egenskab i HTML nomenklatur. Dens værdi er dette citeret streng her. Og det ser lidt underligt ved første øjekast. Det er ikke HTML. Det er ikke CSS. Det er, som du kan gætte, JavaScript. Så det lader til, at indbygget i denne webside er en funktion kaldet greet. Og jeg udlede, at bare fordi det er et ord, hilse. Det har fået en åben parentes, tætte parentes, semikolon. Ligner en C-funktion, ligner en PHP funktion. 

Og ja, det vil være en JavaScript-funktion. Så jeg vender tilbage falsk. Vi vil vende tilbage til at på bare et øjeblik. Men hvor er denne funktion defineres? Jamen så lad mig rulle op til toppen af ​​filen. Og selvom det er en lang linje, det er relativt ligetil. Lad mig zoome ud her og fokusere på disse fire linjer. 

Så i JavaScript, bare som PHP, bare du sige, bogstaveligt talt, ordet "funktionen" navnet på den funktion, og derefter parenteser med enhver arguments-- ingen argumenter i denne sag. Og der er ingen returtypen i JavaScript, ligesom PHP. Så det er lidt løsere end C. Åbn krøllet klammeparentes tæt krøllet parentes. Indbygget i JavaScript er et function-- ikke en anbefalet function-- men en funktion kaldet alarm hvis eneste formål i livet er at trække op at stort grimt Spørg, at vi så et øjeblik siden. 

Nu er dette er lidt af en mundfuld. Hvad sker der her? Så lad os starte med fremhæve alt her. Det er det samme argument til at advare. Og hvad sker der? Dette blot ligner en streng. Og det viser sig, i modsætning til PHP og i modsætning til C, betyder det ikke noget i JavaScript hvis du enkelte anførselstegn eller dobbelte anførselstegn. De vil være tilsvarende. Og helt ærligt, det er bare populære i disse dage for JavaScript programmører til at altid bruge enkelte anførselstegn eller anden grund. Det er bare den ting at gøre. Men vi kunne bruge dobbelte anførselstegn, så godt. 

Så plus er en ny karakter. Men de af jer, der har gjort dette før, hvad betyder plus betyde? Ja. Concatenate. Så vi så det i PHP. Der er bare dot operatør i PHP, der vil sammenkæde to strenge sammen. C var en smerte i nakken til at gøre dette. Recall fra pset seks, som var en especial smerter i nakken, ville du nødt til at bruge noget som strcat efter tildeling af hukommelse på stakken eller bunke. Du var nødt til at springe gennem tøndebånd lige til at sammenkæde to strenge. I JavaScript, det er super simpelt. Bare bruge plus operatør mellem dem. 

Så komplekset udseende ting synes at være denne fordi ved udgangen af Hele denne streng, jeg bare sammenkæde på et udråbstegn. Så hvis det, der blev affyret op var "Hej, David", "hej, Hannah," "Hej, Maria", og så videre, klart at midterste ting i mellem de to plusser skal give mig adgang til hvad? Hvad der er i der sikkert? Ja. Så jeg vil lade som her besvare deres navn, ikke? Så deres navn dukkede op i den endelige resultat. Så hvad betyder det? Tja, jeg foreslog tidligere i denne billede, som den såkaldte DOM har denne særlige rod element måde op øverst kaldes dokument. Og nu viser det sig, at der foregår at være en særlig global variabel i JavaScript, indbygget i, som er en hel masse nyttige funktioner. Blandt de nyttige funktioner er evne til at få noget efterkommer node. Disse firkanter eller rektangler eller ellipser er blot noder i et træ, så at sige. 

Så det viser sig, at der er indbygget i JavaScript dokument objekt er en funktion, også kendt som en metode, er der kaldte getElementById. Syntaksen for at kalde en funktion i JavaScript der er inde i et objekt eller en variabel er lige med dot notation. Og vi så det i C hvad struct syntaks. Du ser dette i pset syv, slags, slags, når du ser CS50 :: forespørgsel. Den kolon kolon i PHP er en anden måde at kalde en funktion, der er inde i en genstand. 

Men for nu i JavaScript, det er bare en prik. Og så denne funktion, pænt nok, slags siger, hvad det does-- få element ved ID. Et element er bare et andet navn til et tag eller node i DOM. Og så får element ved ID "navn" betyder denne-- her er min HTML. Og baseret på denne HTML, hvad node eller hvad HTML-tag er jeg vil programmeringsmæssigt afleveres ved at ringe document.getElementById? 

Ja, præcis. Jeg har tænkt mig at få input element der hvis ID er "navn". Så specielt, kan du tænke på denne funktion, getElementById, som en måde at give bakke en pointer til den specifikke node i træet. Vi har ikke draget dette træ, men det er en måde for at få adgang til denne rektangel eller at rektangel ved entydigt identificerer det via sin id. 

Nu, hvorfor er denne nyttige? Tja, det viser sig at når du har fået at node, der rektangel fra billede, at node inde i det, til gengæld har en hel masse properties-- nøgleværdipar eller data, hvoraf den ene kaldes værdi. Så bogstaveligt, det er lidt af et mundfuld at forklare det hele. Men i slutningen af ​​dagen, alt dette gør, er at give dig en streng, som brugeren har skrevet i i denne hierarkiske måde. Men jeg kan ikke lide en par af disse ting. Eller rettere, der er nogle nysgerrighed stadig. Alt dette syntes at arbejde. Hvorfor tror du, at jeg vendte tilbage falsk efter kald hilse? Dette ser lidt grimt, at Jeg har to udsagn der adskilt med semikolon. Gæt. Hvis jeg fjernede return false, hvad kan ske, bare instinktivt? Beklager, siger igen? 

Åbn en flok af Windows. Så potentielt måske noget som det ville ske. Hvad ellers? Måske indsende en anmodning hvor? Til den samme side. Så i virkeligheden, det er, at jo tættere svaret her, selvom modsætning i fortiden, har jeg ikke specificeret handlingen attribut, som normalt vi skal gøre. Viser sig der er en standard. Hvis du ikke angiver handling, Det er ligesom at sige tilbud, citat slut eller navnet på selve filen, hvilket i dette tilfælde ville være som dom-0.html. Det er bare sådan udledes, eller rettere underforstået. 

Og så, hvis jeg ikke gør det, så lad os lægge mærke til. Lad mig gemme denne. Og jeg har fjernet afkast falsk. Lad mig gå tilbage til dette eksempel og kraft genindlæse den. Og du måske har set mig foreslå dette på CS50 Diskutere en masse gange. Hvis noget nogensinde har handler funky og browser er ikke opfører sig som du forventer, oftentimes du ønsker at holde Skift og klik derefter på Reload. Det vil tvinge hver fil for at genindlæse og ikke bruge browserens lokal cache eller kopi, så det nu, lad mig gå videre og åbne op for min Inspector, på fanen Netværk. Jeg har tænkt mig at klikke Bevar Log fordi jeg vil ikke have det til at slette rækkerne når jeg bliver ført væk andre steder. 

Lad mig gå videre her og typen i Andi, klik på Send. Okay. Det virker som forventet. Den siger "Hej, Andi." Lad mig klikke på OK. Interessant. Bemærk, at siden ændret sig, om end den oprindelige side. Læg mærke til URL slags ændret. Den tilføjede et spørgsmålstegn, som normalt er en indikator at vi forsøgte at indsende noget. Og derefter ved bunden, endnu mere eksplicit, her er den faktiske HTTP-anmodning, som fik et svar på 200, som bragte mig tilbage her. 

Så dette hvad man ikke er vi ønsker at gøre, ikke? Fordi jeg ønsker ikke at genindlæse hele siden. Jeg stedet ønskede at vende tilbage falsk således at kortslutning browserens standard opførsel, som var naturligvis, at indsende siden. 

Så lad os tage et kig på en marginalt bedre eksempel. Dette er dom udgave én. Og bemærk følgende. Det er OK, hvis du ikke grok alle linjer kode. Men hvad er fundamentalt anderledes om denne gennemførelse? Jeg vil fastsætte det opfører den samme, gør det samme. Hvad har jeg selvfølgelig gjort anderledes? Ja? 

PUBLIKUM: [uhørligt]. DAVID MALAN: Ja. Så funktionen er defineret differently-- med andre ord, ude af form, deroppe på linje 7-- eller snarere line 8-- ikke længere har jeg onSubmit attribut. I det foregående eksempel, jeg havde dette. Og så er jeg bogstaveligt talt skrev min kode her. Og så sagde jeg return false. Og hvis det ikke gnide du den forkerte vej endnu, Det bør begynde at omfang som, ligesom i HTML, da vi begyndte at co-blande det med CSS i stil attributter, det bare begyndt at få lidt rodet eller føle sig lidt forkert. 

Ligeledes her, hvis du begynder at tage HTML, og så du automatisk plop nogle JavaScript-kode i midten af ​​en streng i anførselstegn, er det ikke vil være meget vedligeholde. Højre? Det er ikke engang tydeligt ved første sted, hvor JavaScript-kode er. Så det ville være virkelig rart, som et princip om bedre design, lad os holde vores HTML helt adskilt fra vores JavaScript. 

Så for at gøre det, hvad vi har gjort her er following-- vi blot bruge HTML til kun markup. Og så i version en af ​​denne, alle Jeg har, er en form med et unikt id. Og derefter ned her, jeg udnytter af et særligt kendetegn ved JavaScript hvorved jeg kan have, hvad der er kaldes en anonym funktion. Så det viser sig, at hvis jeg kalder document.getElementById af 'demo' det er ligesom at give mig en pointer til denne knude i mit træ, form element, så at sige. 

Nu vil jeg bare kender fra kende lidt af HTML nu er vi have læst nogle online reference, at en form element understøtter en hel masse begivenhed listeners-- i med andre ord, vasketøjet listen begivenhed lyttere, som vi så for et øjeblik siden. Jeg ved fra at læse dokumentationen at onSubmit er en gyldig begivenhed lytteren til en form element. 

Så når jeg ved, at, det er sikkert for mig at gøre den following-- få denne node fra træet, formen element, og gå sin såkaldte onSubmit ejendom. Så dot betyder bare Dette er en egenskab, som en særlig værdi inde i den. Og hvad datatype er jeg tildele, tilsyneladende, at onSubmit, hvilket er effektivt en variabel inde af denne knude i træet? Det er et felt inde i denne struct. Hvad er den datatype? 

En funktion, ja. Så det viser sig, at PHP har dette. Og selv om vi ikke fortælle dig om det, C har også funktionspointere, de evne til at passere og tildele funktioner som variable værdier selv. Og vi vil ikke at relatere tilbage til C. Men for nu, viser det sig, at på højre side her, selv om det ser lidt funky, dette betyder, hey browser, give mig en funktion. Jeg har ikke tænkt mig at selv gider give det et navn, fordi jeg er bogstaveligt talt kommer til at tildele lad os kalde det adressen på denne funktion straks at onSubmit. Med andre ord, browser, behøver du ikke at vide, hvad denne funktion hedder. Du skal bare brug for at vide hvor det er i hukommelsen. Og så er det tilstrækkeligt blot at har et lighedstegn der og ikke gider at navngive dette, ligesom foo eller hilse eller andre ord. Og nu er det bare en stilistisk ting. Jeg kunne flytte denne krøllede tandbøjle på til-- sorry-- næste linje ligesom vi normalt gør CS50. Men i JavaScript, er det faktisk stilistisk fælles at bare holde den krøllede klammeparentes, den første, på den første linje. 

Men det følgende, der er intet interessant. At åbne krøllede klammeparentes bare afgrænser starten af ​​min funktion. Funktionen er nu identiske, bortset fra jeg har omfattede return false indersiden af ​​denne funktion. Fordi det viser sig out-- og du ville kun kender det fra læsning den documentation-- at hvis den funktion, du tildeler til onSubmit handleren returnerer false, browseren bare kender og accepterer ikke at sende formularen til en server. Hvis den returnerer sand, vil den forelægge den til en server til grunde, vi vil se er nyttige på blot et øjeblik. 

Og så semikolon efter den krøllede klammeparentes der bare betyder, at jeg er færdig definere funktionen. Du ved, hvad så hurtigt at kalde som du hører en indsendelse. Okay. Dette er stadig velsagtens slags grimme. Så hvad mere kan vi gøre? 

Tja, det viser sig så i udgave to, som er last-- og vi vil bare blik på dette. Med fare for at gøre det grimmere, viser det sig at der er et bibliotek i verden kaldet jQuery. Og jQuery er en super populære JavaScript-bibliotek det er så populært, at de fleste enhver JavaScript-- det er ikke ualmindeligt for folk at forveksle jQuery med JavaScript. Hvorfor? JavaScript selv har meget verbose måder at gøre things-- document.getElementById, dadadadadada. Du ender med at have meget lange linjer kode. 

Så en fyr ved navn John Resid, der rent faktisk arbejder for en start op disse dage, kom ud med dette bibliotek år siden, at mange mennesker har bidraget til den kaldte jQuery der ændrer syntaksen på følgende måde. Og bare så du har set det, fordi du vil uvægerligt se dette, hvis gør en webbaseret afsluttende projekt, dette ville være den samme måde gennemførelse af den samme funktion ved hjælp denne særlige bibliotek. 

Nu, i stedet drille det fra hinanden i sin helhed, lad os bare se på nogle mønstre. Denne syntaks synes at have hvor mange anonyme funktioner eller navnløse funktioner eller AKA lambda funktioner? To, ikke? Og du ved, at selv om du ikke er super comfy med dette, blot ved, at det siger funktion () to gange. 

Og det viser sig, at hvad denne kode er doing-- og vi vil henvise til online referencer, i sidste ende, for noget hjælp med dette. Det betyder blot, at når dokumentet er klar, gå videre og registrere følgende funktion som forelægger handleren for HTML element hvis unikke idé er demo. Og så, når det sker, kalder disse to linjer kode. Og det er tragisk, en mere verbose måde at sige return false. Og vi nævnt dette, bare fordi du vil se koden som denne online. Og det er ikke noget at være skræmt af. Men snarere, husk på, at hvad der er kommer til at være fælles i JavaScript er dette paradigme. Og så det er derfor vi vise det for nu. Okay. Så uden bolig for meget på, at syntaks, er der er nogen spørgsmål om disse eksempler eller ideer hidtil? Okay. Så lad os bruge dette til noget nyttigt. Gør en webside, der bare siger hej, så og så er ikke alt, interessant, ikke at underwhelm. Denne ene kommer ikke til at være smuk, men det kommer til at gøre noget nyttigt. Lad mig gå tilbage til min mappe her og åbne op, siger, formular-0.html. 

Så formoder det er den freshman intramurale sport registrering side uden CSS eller nogen sans for design. Og jeg ønsker at gå videre og registrere her med en adgangskode. Og jeg har tænkt mig at acceptere vilkårene og betingelser, og klik på Tilmeld. Og nu hjemmesiden siger, "Du er registreret! (Nå, ikke rigtig.) " Det ser ud som det virkede, men lad mig gå videre og tvinge reload. 

Og lad mig sige, nej, ikke dig brug for min faktiske e-mail-adresse. Eller måske vil vi bare sige mail derinde. Kodeord bliver, ligesom, 12345. Og så, bare fordi jeg er en idiot, nu er det 123456789. Og jeg har ikke tænkt mig at tjekke din boks. 

Hmm. Okay. Så der er flere muligheder til forbedringer her. Og du ved, eller vil se i pset syv, at du kan skrive code-- og du bliver nødt til at skrive kode i PHP-- at forsvare mod disse former for bruger fejl, fordi brugeren klart har ikke samarbejdet. Og han eller hun ikke har givet dig alle de værdier, du ønskede eller endda i formatet at du ønskede dem. Så du kan se i pset syv, der Vi kunne sikkert have nogle hvis forholdene, der siger hvis den e-mailadresse er ikke en username@something.edu, vi kunne bare sige undskyld og undskylder til brugeren meget, ligesom du muligvis i pset syv. Eller hvis de ikke har kontrolleret, at boksen viser sig i PHP, kan du registrere, at, også. Og slet hvis adgangskoderne passer ikke som i register.php til pset syv, kan du registrere det. Men det er en smerte i halsen i, at nu anmode de os at gå hele vejen til serveren. Brugeren informeres om fejlen. Og i hvert fald, medmindre du bruger nogle amatør teknikker, nu er de nødt til at klikke på pil tilbage. Ville det ikke være rart, ligesom en masse hjemmesider i dag, hvis du havde mere umiddelbar feedback, øjeblikkeligt? 

Med andre ord, lad mig gå til version én, som vil være noget smukkere. Men det har denne funktion. Malan, 12345, 123456789, ikke kommer til at markere feltet, Register. Passwords er ikke ens. Så selvom denne pop-up er ugly-- Vi kan erstatte dette i sidste ende med noget som Bootstrap, som du kan se i pset syv er en meget populær library-- jeg gjorde opdage, at adgangskoderne ikke stemmer overens. Okay. Nå, lad mig ordne det som brugeren. Lad mig gå videre og sige 12345, 12345. Stadig ikke kontrol af aftalen. Du skal acceptere den vilkår og betingelser. Så hvorfor? 

Hvis vi allerede har postuleret at der er en måde, og vi har behov for dig i pset syv til påvisning fejl betingelser som denne server-side, hvorfor skulle jeg gider også at gøre dette i JavaScript? Hvad er et argument i fordel for tilsætning hvad du er ved at se som some-- Der er yderligere kompleksitet. 

Måske er der ingen upside. Hvad kunne det være? PUBLIKUM: [uhørligt]. DAVID MALAN: Åh, interessant. Potentielle exploits. Så sikker, hvis du ikke håndterer fejlagtige brugerinput, at store, måske er det desto bedre, hvis det ikke engang nå din server. Jeg vil skubbe tilbage der og siger, bør du nok fix begge disse problemer. Men det er fair. Hvad ellers? 

PUBLIKUM: [uhørligt]. 

DAVID MALAN: Ja. Denne kode, som vi sagde før, er fortolkes på klientsiden. Det generer ikke serveren, hvilket betyder det ikke påvirke serverens belastning eller kapacitet. Og nu, for lidt gamle mig, dette har ingen relevant virkning fordi jeg har en bruger lige nu. 

Men hvis du er nogen hjemmeside anstændig størrelse, især de største, som Facebook, jo mere du kan holde folk væk af din server bedre fordi en server, selvfølgelig, kun har en begrænset mængde RAM, et endeligt antal gigahertz, et endeligt antal ting det kan gøre per tidsenhed. Så hvis der er flere mennesker i verden ramme din server, uheld logge forkert, lige så godt, hvis du kan holde, at belastningen fra din server. Plus, især på en mobiltelefon device-- hvis du har nogensinde logge ind my.harvard eller Yales NetID eller lignende, der er denne latensen med en masse hjemmesider som det, hvorved det tager, lignende, en pokkers sekund eller to gange. Og så, min Gud, hvis du skriver forkert, så er du nødt til at slå tilbage og lave det igen. Så der er ventetid, især på langsomme netværksforbindelser. Men JavaScript, fordi det kører på klienten og behøver ikke at gå frem og tilbage på tværs af en potentielt langsom internet forbindelse, kan du få næsten øjeblikkelige feedback. 

Så lad os se på dette. Lad mig åbne op formular-0 og se på HTML her. Og lad os bare se, hvad der foregår. Dette er en form, hvis handling er register.php. Jeg er bare ved hjælp af få så at jeg kunne se URL'en. Men for adgangskoder, ville vi helt sikkert have at ændre dette for at skrive i virkeligheden. Her er et input felt af typen tekst. Her er en anden indgang felt af typen password. Her er, hvis du aldrig har set, en indgang på afkrydsningsfelt type. 

Men der er ingen JavaScript her overhovedet. Dette er blot HTML, går til register.php. Men i version én, hvor jeg begyndt at få disse pop-ups, lad os se, hvad der faktisk sker her. I version én, hvad Jeg har tænkt mig at see-- I troede jeg kunne stall nok med nok ord, men jeg løb ud. 

I version en-- der vi gå. I version én, bemærke den following-- og er ikke den bedste implementering, men det er min første. Bemærk, at under formular, jeg har et script-tag. Og et script-tag betyder, hey, browser, her kommer noget kode ind, typisk JavaScript. Og nu, mærke til, hvad jeg laver. På line-- jeg kan knap nok læse det-- linje 32, den siger, Var form-- så giv mig en variabel kaldet form. Og derefter få document.getElementId af "registrering." Hvad er dette? Nå, lad mig tilbage op her. Og varsel, ah, jeg gav i form element en vilkårlig men beskrivende idé for registrering. Så det giver mig en variabel, tillader mig at få fat i den node, dette rektangel i træet kaldes form. form.onsubmit midler, hey browser, registrere en begivenhed lytteren på denne formular. Med andre ord, når denne formular er indsendt, udføre følgende kode. Det behøver ikke et navn, fordi hvorfor har du brug for at kende navnet? Du skal bare brug for at vide hvad til at udføre, ergo Det er en anonym eller lambda-funktion. Og denne funktion er alle disse linjer her. Og nu, for at være ærlig, selvom du måske ikke nogensinde har skrevet JavaScript før, det er bare C og PHP logik. Så hvis form.email.value == "" - så hvis e-mail-feltet er tomt, yell på brugeren med "Du skal give din e-mail-adresse. " Else hvis form.password.value er tomt hyl på brugeren, "Du skal angive din adgangskode." 

Mere interessant logisk, hvis form.password.value ikke lige form.confirmation.value-- hvor kom bekræftelse fra? Lad mig spole tilbage. Tja, jeg kaldte denne indgang felt her adgangskode. Og jeg kaldte denne ene her bekræftelse. Jeg kunne have kaldt det adgangskode to eller noget andet. Jeg er bare logisk kontrol at disse to er de samme. Else-- det viser sig det er Mr. Boole igen-- en Boolesk værdi, afkrydsningsfeltet. Så hvis jeg siger, udråbstegn point-- hvis ikke form.agreement.checked, yell på brugeren så godt. 

Så denne syntaks, du ser, er meget almindelig i JavaScript, hvor du har denne punktnotation. Du starter med en genstand her. Du dykke dybere til en til en egenskab som adgangskode. Og så du får på dens faktiske værdi. Og igen, her er input. Her er navnet adgangskode. Og dens værdi er uanset menneske har faktisk skrevet i. 

Så i alle disse tilfælde, vendte jeg tilbage falsk. Men hvis ikke, jeg vender tilbage sandt. Og så nu ser vi en overbevisende brug af, når du ville return false til stoppe, hvad brugerens gør og gøre ham eller hende med at vælge igen eller skriv igen. Ellers, vi vender tilbage sandt. 

Og lad mig præsentere en anden variant af dette blot til frø vis forståelse heraf. Tja, i version 2 i denne, formular-2-- Jeg vil gøre det med en bølge af en hånd. Det er, for dem nysgerrige, jQuery-version, dem af jer der måske ønsker at fuske i det pågældende bibliotek. Men lad os start-- og eventuelle spørgsmål? Lad mig pause øjeblik, fordi der var hurtig og meget. 

Men det gode her er, at alle af koden er stort set den samme. Den nye ting er, hvad der er den dom? Hvad er disse rektangler? Hvad er disse knudepunkter? Hvad er en anonym funktion? Hvad er en event handler? Men heldigvis er de fleste af det er bare fuld cirkel fra fx uge nul. Okay. Så noget lidt mere interessant? Nå, først og fremmest, lad mig gå videre og åbne op Google Maps. Og du vil opdage, at for en øjeblik, på den splitsekund, mærke til, hvad der sker, når Jeg klikker hurtigt nok. Og denne forbindelse på Harvard er så hurtigt, at du ikke rigtig mærke til det. Men hvad gør du slags slags se hvis jeg klikke og trække virkelig hurtigt? De af jer, ser online, hvis du bremse denne til 0,5x hastighed, du kan se dette bedre. 

Hvad der skete bare før jeg klikkede og slæbt? Lad mig prøve her-- lade mig gøre noget andet, ligesom 90.210. Lad os gå langt væk. Det var virkelig hurtig, også. Hvad med Disney World? Der vi går. OK. Hvad har du se et splitsekund? Bare, ligesom, torve, right? Pladsholdere til fliser? 

Nå, hvad sker der her? Google Maps er et dejligt eksempel på denne teknologi, der kaldes AJAX. Og det er her, vi vil begynde at bruge JavaScript i en særlig dragende måde. Tilbage i dag, var der denne hjemmeside kaldet MapQuest. Og jeg skulle have taget en screenshot af dette fra 1990'erne, hvor, hvis du ønskede at se op her på kortet, ville du bogstaveligt talt klikke en pil op på toppen, der viste dig en anden firkant af kortet. Hvis du ønskede at gå til venstre, du klikkede en pil, der viste dig en anden firkant af kortet. Og nogle hjemmesider stadig gør det i dag. Men selv MapQuest har fået bedre, ligesom Google Maps. 

I stedet, hvad er bedre disse dage er websteder, der bruger AJAX. AJAX-- også kendt som Asynchronous JavaScript og XML, som er blot en fancy måde at sige en teknologi eller teknik, tillader en browser med JavaScript at foretage yderligere HTTP-forespørgsler efter siden er indlæst. Så hvad betyder det? Tja, det ville være venlig irriterende i Gmail Hvis hver gang du ønskede at tjekke din post, du havde bogstaveligt ramt Ctrl-R eller Kommando-R eller klik på knappen Genindlæs og hele darn siden ville genindlæse. Højre? Det ville flash hvidt sandsynligvis for sekund. Du ville se dumme statuslinjen. Og bare for at se, om du har nye mail, hele websiden og URL du er på ville have til at genindlæse. 

Men det er ikke det, der sker i Gmail. Højre? Når du får en ny e-mail i Gmail, hvad der sker på skærmen? Det viser blot op, ikke? Det bare magisk vises som ny række i tabellen. Det faktisk indebærer en anstændigt beløb af kompleksitet. Faktisk, hvis du tænker over dette træ, som selvom er en simpel en her, Gmail-- og jeg ville have til at se på den kode til at være sure-- har sandsynligvis en HTML-tabel eller måske en uordnet liste, som den gør hver af dine indbakker e-mails som. 

Og så hvis du forestille dig dette er der er et træ i hukommelsen, når du er bruger Gmail, der ser slags slags som denne, når Google indser, ooh, du har en ny e-mail, det ikke vil genopbygge hele træet. Snarere, det ønsker at finde den node i træet, der repræsenterer din indbakke og bare indsætte en ny knude. 

Så meget lig pset fem, hvor man skulle indsætte knudepunkter i en hash tabel, ligeledes gør Google via JavaScript-kode, at det har skrevet, traverse dette træ, regne ud hvor er, at inbox del af vinduet, og derefter indsætte en ny række. Og en ny række betyder blot én eller flere nye knudepunkter i et træ. 

Og så AJAX er denne teknik der giver mulighed for netop dette. Når du har besøgt en URL, men vanvittigt længe det er, og når har er indlæst, kan du stadig grab flere data fra internet-- uanset om det er en e-mail eller en flise af en map-- Grib det bag kulisserne og derefter indsætte det i siden således at den menneskelige egentlig ikke nødt til at vente på det. 

Facebook Messenger fungerer på samme måde. En række andre websites-- oh, faktisk selv dette. Jeg mener, det er helt ærligt, slags en irriterende funktion i disse dage. Hvis jeg begynder at søge efter cats-- dette er lidt af en forfærdelig brugeroplevelse. Det bare begynder at søge efter mig. Nå, hvad er det gør? Webadressen har ikke rigtig ændret sig siden jeg begyndte at skrive. Men hvad der foregår på tværs af wire-- OK, hmm interessant. Hvad sker der på tværs af wire her bliver bare mærkelig. 

OK. Så lad mig gå videre og inspicere element og gå til fanen Netværk og forsøge at gøre dette tekniske og mindre om katte. Som jeg skriver, bogstaveligt talt, katte og-- hvad der sker per-- Jeg har ikke tænkt mig at klikke det. Okay. Så hernede, hvad der sker hver gang jeg skriver et tegn, tilsyneladende? Ligesom, lavt niveau? Hvad sker der med hver af dem, karakterer jeg skriver på mit tastatur? Ja? PUBLIKUM: [uhørligt]. 

DAVID MALAN: Præcis. Hver af disse tegn er gå til Google, en ad gangen. De opbygger en streng på deres server, der repræsenterer alt, hvad jeg har skrevet i hidtil. Og hver gang jeg skriver en anden karakter, de bruge deres hemmelige sauce af et søgealgoritme og finde ud af, mener han denne kat side eller denne kat side eller lignende? Så i en vis forstand, det giver mig en bedre oplevelse i at jeg ikke engang nødt til at fuldføre min tanke. Og ja, det er en nyttig ting, autofuldførelse i almindelighed. Hvis deres algoritmer er gode nok og hvis mine søgninger er indlysende nok, Jeg behøver ikke at skrive hele ordet. De vil fortælle mig, hvad det er jeg faktisk søger efter. Så hvad Google kalder øjeblikkelig søgningen er bare bruger AJAX, ved hjælp af kode, der giver dem mulighed for at anmode om ekstra indhold via en webbrowser bag kulisserne ved hjælp af denne nyt sprog, JavaScript. Så vi har et par minutter tilbage. Og lad mig kalde min kammerat Colton op på scenen, da det lod særlig sjovt sidste gang at indføre en teknologi at nogle af jer har udtrykt interesse i for de endelige projekter. Vi troede, det ville være sjovt at bringe en frivillig, selv om, i dag til at vise dig en tilføjelse til dette, der tillader du-- yeah, Jeg så denne hånd først. Kom op. Meget godt klaret. Godt arbejde. Jeg har tænkt mig at projicere dette på skærmen på blot et øjeblik. Hvad er dit navn for alle? 

EFA: Jeg er Efa. 

DAVID MALAN: Etha? 

EFA: Efa. 

DAVID MALAN: Efa? 

EFA: Ja. 

DAVID MALAN: Rart at se dig. Okay. Lad mig få denne klar. Kom over til den midten med Colton her. Hvad Colton har i sine hænder dag er en fjernbetjening. Så i stedet for bare stå der i en tre-dimensionelle verden ser rundt som Colton gjorde, nu Efa kan faktisk gå rundt ved at gå op, ned, til venstre og til højre som en Nintendo eller Xbox-controller. EFA: Jeg har tænkt mig at falde ned fra scenen. DAVID MALAN: jeg vil stå nogenlunde herovre. Men det er en risiko. OK. Så gå videre og sætte dem på. Lad mig gå videre og skifte til skærmbilledet her. Lad mig dæmpe lyset. Og Colton, lad mig komme stå ved siden af ​​dig. 

Har du lyst til at forklare her med mikrofonen hvad vi laver? Vær så god. 

COLTON: Selvfølgelig. Så lige nu er vi lastning op Oculus, Jeg gætter operating-- ikke opererer system, men de vigtigste program, hvor du kan få adgang til alle de spil og apps, der er i biblioteket. Så lige nu, skal det sige trykke på pegefeltet for at begynde. Touchpad kommer til at være på den højre side af headsettet. Så gå videre og tap-- EFA: Åh, mand. DAVID MALAN: Ja, der du går. Kvaliteten Efa er at se er meget højere kvalitet. Dette er blot Wi-Fi her. COLTON: Så hvad du er vil ønsker at gøre er ser mod toppen til højre på skærmen. Jep, det spil på den meget øverst til højre. Og så når du vælger det, skal du trykke på touchpad igen. Jeg tror, ​​dens Dreadhalls. Og så her er en-- her, lad mig holde dine briller for dig. 

Så jeg gav ham bare en controller. Så nu kan han styre spillet. Han kan flytte rundt og den slags. Så gå videre og se op til toppen. Du bør se New Game. Så gå videre og du kan gøre det. Nu skulle du være i stand til at kontrollere dig selv med controlleren, samt, så snart spillet indlæser heroppe. Dette kan være en lille smule skræmmende. 

EFA: Nu du fortæller mig. OK. 

COLTON: Okay. Så bekræfte, at du kan bevæge dig rundt. OK. Du kan flytte rundt. Perfekt. Så hvis du ser ned, har du et kort. Kort viser dig, hvor du er. Du kan se rundt i lokalet. Du kan helt vende rundt. Ja, præcis. Vend om. 

Så se til venstre. Jeg tror, ​​der er noget, du kan samle op på en tønde i rummet. 

EFA: Hvordan får jeg den kort af vejen? COLTON: Kig op. Bare se op. Okay. Værs'go. Nu gå videre og bare vende rundt. Så ser længere til venstre. Hold dig i bevægelse til venstre. Hold udkig venstre. Bliv ved. Ja. 

EFA: Åh, den vej. 

COLTON: Ja. Gå hen imod det med controlleren. Værs'go. Nu skal det sige samle den op. Værs'go. Saml det op. Okay. Lad os nu komme ud af dette rum. Gå videre og gå til den dør. Så du kommer til at hold-- det siger hold knappen for at tvinge den åben. Så gå videre og hold knappen. Jep, tvinger det åbne. Okay. Godt arbejde. Nu vi gå ud af lokalet. Så jeg har tænkt mig at lade resten op til dig og se, hvad du finder ud af. EFA: Jeg har ikke tænkt i mørke rum. Åh vent. Nu jeg nødt til at gå ned den mørke hal? OK, jeg vil tilbage [uhørligt]. COLTON: Okay. Nogle flere elementer til at samle op. Ligner nogle mønter. Det er en lås pick. Så hvis du finder en låst dør, kan du bruge det. Er du bange? 

EFA: Ikke endnu. COLTON: OK. 

Pretend-- ja. Bare lade som du er faktisk stående der. Og hvis du slår around-- du har fået til at vænne sig til det. Men det giver mening. DAVID MALAN: Og mens Efa fortsætter med at spille, da vi kunne gøre det hele dagen, vi alle kan tip-tå herude. Men vi har to andre par, Hvis du gerne vil komme op og spille. Ellers vil vi se dig næste onsdag. Tak til vores frivillige i dag. [Applaus] 

[MUSIC - "Seinfeld TEMA"] SPEAKER 1: Jamen, jeg er sætte en ny PL montere på. Jeg har lige ændret OLPF-- 

SPEAKER 2: Så hvad præcis laver du? 

SPEAKER 1: Nå, hver enkelt af these-- her, vil jeg vise dig denne ene i her. Du kan se det lige her. 

SPEAKER 3: Jeg tror, ​​jeg er godt med disse. Vil du have noget mere? 

SPEAKER 4: Nej, jeg er god. [Uhørligt]. 

SPEAKER 3: Nej, [uhørligt]. Tag noget. SPEAKER 1: Forskellige farver. SPEAKER 2: OK. SPEAKER 1: Så i sidste ende, hvad det gør, er det justerer farven of--