>> [MUSIC SPILLE]
>> DAVID MALAN: Dette er CS50.
Dette er starten på uken ni.
Og dette er hva som ville ha vært Mr. Boole 200-årsdag.
Så dette er fellows til hvem vi har hentydet
ganske noen ganger om bruk Boolske variabler sant og usant,
1 og 0 og slikt.
Og dette var Googles hyllest til ham i dag.
Han ville ha slått 200.
Så hvis du ønsker å bli med oss ​​for CS50 lunsj
ta en titt på linken på kursets hjemmeside.
Og slike ansikter og venner som disse venter deg her i Cambridge.
Ansikter som disse venter deg i New Haven.
Og, faktisk, i Ken New Haven vennlig gjort
det som kalles en animert GIF av Eli her på en nylig lunch-- en GIF er ennå
en annen grafisk filformat, som du er familiar-- at
ser litt noe sånt som dette.
Så bare en sekvens of-- OK.
Ingen her i Cambridge ler.
Men i New Haven, denne er virkelig morsomt, ikke sant?
Greit.
>> Så bli med oss ​​der.
Her på Harvard, spesifikt, denne onsdagen,
hvis du er en sophomore eller freshman even-- eller junior-- tenker på å gjøre
en bryter inn i datamaskinen vitenskap, vet at det vil
bli en CS rådgivning rettferdig dette Onsdag, kort tid etter klasse
4:00 PM i datamaskinen vitenskapsbygg Maxwell Dworkin.
Vi vil sette dette på kursets nettside i morgen, også.
Donuts, jeg er blitt fortalt, vil bli servert.
>> Greit.
Så morsomt story-- jeg var poking rundt på internett,
og jeg fant noen gamle arkiver av min tidligere nettside.
Og det viser out-- rundt dette tid, virker det svært betimelig
siden jeg samle at UC valget er i ferd med å gire opp igjen.
Så jeg løp for UC, tapte stort.
Og kanskje dette var delvis hvorfor.
Så dette var min hjemmeside på tiden.
For noen grunn, jeg trodde det var en god idé, før fortelle folk
hva min plattformen var og hvorfor de bør stemme på meg, at de har
til å klikke for å gå inn for å finne ut at informasjon, som i ettertid er
litt skummel.
Jeg vet egentlig ikke hva det var.
>> Men det absolutt ikke hjelpe kampanjen min.
Jeg har også funnet at ved senior year-- Jeg hadde denne Muppet kalenderen.
Muppets var slags på moten tilbake da.
Eller kanskje de ikke var.
Jeg hadde en Muppet kalender tilbake da.
Og jeg tenkte at det ville være kult å navn datamaskinen min på Harvard nettverk
frogman.student.harvard.edu.
På den tiden hadde vi alle entydig identifiserbare vertsnavn.
Og du kan velge noen forfengelighet navn i stedet for ditt eget navn.
Og jeg gikk med froskemann eller annen grunn.
>> Og da jeg started-- Jeg tilbrakte mye tid klikke deg inn på disse linkene
denne morgenen.
Og dette var min om side, som nå slags virker søt.
Men det vitner også å bare hvor langt teknologien har kommet.
Jeg mener, tilbake i dag, en 486 var noe.
I disse dager er det super, super, super slow og godt mindre
enn du kan ha i din egne lommer i disse dager.
Det er mer på det som var enda mer pinlig.
Så jeg skal la det bli med det.
Men det var min første streiftog inn web-- oh, nei.
Det var ikke.
Min første virkelige steg inn i web-programmering var dette stedet, som jeg bare glemte.
På et tidspunkt, lærte jeg å gjøre repetitive bakgrunnsbilder.
Og så fant jeg dette flislegging effektive, som hockeyspiller, fotball og golf
ball, eller hva som er for Frosh lynmeldinger nettside.
Og dette var faktisk, oppriktig første web-basert prosjekt jeg tok on--
Jeg tror kanskje sophomore år, junior year--
etter å ha tatt CS50 og CS51, en av felles oppfølgings klasser.
Jeg la merke til i letingen gjennom arkivene
at en av mine etterfølgere og venner, Lee, type endret
opphavsretten til seg selv.
Men dette var faktisk noe som Jeg skal eie forlegenhet til.
Men på den tiden, dette var den første nettsiden,
som jeg sa for noen uker siden, der freshman kunne
registrer for egenutført sport her.
Og så viser det seg at bakgrunnsbilder
sånn er ikke så lurt.
Men nettet var ny, og vi var alle eksperimentere.
Og dette er hva jeg tilsynelatende gjorde på den tiden.
Greit.
Så uten videre, vi bytter tannhjul i dag for å gi deg, egentlig,
den siste brikken som du kan finne spesielt nyttig for avsluttende prosjekter
men også at det vil begynne å gjøre hele world wide web
føler meg litt mer forståelig.
Ja, vi kommer til å introdusere ett programmeringsspråk
kalt Javascript som ligner og forskjellig på forskjellige måter
fra språk har vi sett på så langt.
>> Så C, husker, er dette kompilert språk.
Du er nødt til å kjøre det gjennom en kompilator.
Du får kildekoden til objekt kode, eller nuller og enere.
Og de er nuller og enere som CPU, Central Processing Unit,
faktisk forstår.
PHP, derimot, er ikke et kompilert språk.
Det er en hva?
Det er et tolket språk.
Så det er noen program kalt en tolk som
har å lese it-- topp til bunn, venstre til right--
og finne ut hva alle syntaksen gjør og betyr,
enten det er en sløyfe eller en tilstand eller hvilket som helst annet antall programmerings
konstruerer.
Så det er et tolket språk.
>> Da vi introduserte HTML.
Og HTML er ikke engang en programmeringsspråk.
Vi vil kalle det hva?
En kodespråk, som er like en slags fancy måte å si det
ikke har programmering konstruerer som vi så selv tilbake i dag av Scratch.
Det er ingen løkker.
Det er ingen forhold.
Det er egentlig et språk om merking av dine data
og formatere den eller strukturere det på noen måte.
>> CSS, i mellomtiden, på samme måte ikke et programmeringsspråk.
Det er enda mer estetisk orienterte.
Og det tillater deg å sortere av fininnstille ting som skriftstørrelse og farger
og plassering, og alt dette.
Da hadde vi
>> SQL.
Så SQL er faktisk et programmerings språk i en viss forstand
riktignok skreddersydd spesielt til databaser.
Men selv om vi bare presentere deg for velge og sette inn og slette og oppdatere
og et par andre, viser seg kan du faktisk
skrive funksjoner eller prosedyrer, som de er
heter, i SQL som ser og handle helt som PHP og C-funksjoner.
Så vet at de eksisterer.
Men vi trenger ikke engang bry seg med dem som vi bare skraper i overflaten her.
Og deretter Javascript, den siste av vårt språk formelt innført.
Så Javascript, også er et tolket språk.
Og de som er kjent, gjør du ønsker å skille det
med noen karakteristiske fra både C og PHP?
Hva gjør det annerledes?
>> PUBLIKUM: Det er ikke utarbeidet.
>> DAVID MALAN: Si igjen?
>> PUBLIKUM: Det er ikke utarbeidet.
>> DAVID MALAN: Det er ikke utarbeidet.
Så det også tolkes.
Så det er ikke utarbeidet.
Men det gjør det litt som PHP.
Men det er fortsatt forskjellig fra PHP i noen slående måte,
minst i måten vi vil bruke den.
Yeah?
>> PUBLIKUM: Det kjører på klientsiden.
>> DAVID MALAN: Det kjører klientsiden, vanligvis.
Det er faktisk den karakteristiske karakteristisk for oss akkurat nå.
C var server-side i den forstand at vi gjorde alt i CS50 IDE.
PHP hittil har vært server-side i den utstrekning
som det også, får interpreted-- ikke utarbeidet, men interpreted--
inne CS50 IDE, som selvfølgelig er bare en server eller servere i nettskyen.
>> Men Javascript, selv om du du kommer
å begynne å skrive det for, si, PSet åtte og kanskje endelig projects-- du er
kommer til å rette den opp i CS50 IDE og lagre det
i filer i CS50 IDE, CS50 IDE og i sin tur, de sky servere
som det er vert, ikke kommer å tolke eller kjøre koden din.
Snarere, det kommer til å bli sendt i uforandret form ned til nettleseren.
Og det er da kommer til å være IE eller Chrome eller Firefox eller Safari
eller hva som faktisk tolker det, øverst til nederst, venstre til høyre.
Så nøkkelen sært karakteristisk for i dag
er at Javascript er klientsiden og PHP, for eksempel,
har vært på serversiden.
Nå har dette interessante implikasjoner for, som, intellektuell eiendom
og som faktisk kan se koden din.
Og ja, kan du gå på nettet og se mest
noen kode som noen har skrevet i Javascript.
Noen ganger er det lesbar, Noen ganger er det uklar.
Men mer om det i rett tid.
>> Så Javascript, pent nok, er super lignende, syntaktisk, til C.
Og mye som PHP, det er ingen hovedfunksjon.
Hvis du ønsker å begynne å skrive Javascript-kode, som du ser i dag,
du bare begynne å skrive den.
Men det er, vil du se, spesielt nyttige i forbindelse med nettlesere.
Men min lille disclaimer-- vanligvis earlier--
var å si at du kan stadig i dag bruker Javascript server-side
ved hjelp av en fancy rammeverk kalt Node.js at noen av CS50 egne applikasjoner
er skrevet i.
Sjekk 50 faktisk bruker node.js.
Men vi kommer til å fokusere på Javascript klientsiden her på ut.
>> Så her er et sett av betingelser i PHP.
Beklager, in-- faktisk, at uttalelse, er også riktig.
Her er også et sett med forholdene i Javascript.
Syntaktisk, er det identisk med C og PHP.
Mr. Boole 's uttrykk er, på samme måte, syntaktisk
identisk med både C og PHP.
Vi har også brytere i Javascript som ser identiske.
Vi har for løkker som er strukturert likt,
mens looper, gjøre mens sløyfer.
>> Denne er litt annerledes.
PHP hadde for hver konstruksjon at du kan være å bruke
eller vil bruke i PSet sju, kanskje.
Javascript har denne spesialversjonen av for hvor du bokstavelig talt si noe
som for variabel nøkkelen i objekt, som er en veldig konsis måte å si:
hvis jeg har fått en object-- og vi vil snakke om disse på nytt i en moment--
og jeg ønsker å iterere over alle av de viktigste verdi parene inne,
Jeg trenger ikke å finne ut hvordan du numerisk indeksere dem med null, en,
to, tre.
>> Jeg kan bokstavelig talt si dette.
Og på hver iterasjon, Javascript for meg vil oppdatere variable nøkkelen
å være den første nøkkelen, og deretter den neste tasten, deretter den neste tasten, deretter den neste tasten,
og så videre.
Og jeg kan få sin verdi ved å behandle et objekt i Javascript, som vi skal se,
som om det er en assosiativ array i PHP.
Faktisk, hvis du endelig pakket din tankene rundt hva en assosiativ array er
i PHP, kan du tenke på det for nå som identisk med et objekt i Javascript.
Men det er litt av en overforenkling.
>> Arrays se, pent nok, identisk til PHP unntatt ett tegn.
Det er en ting som mangler her at vi fikk se i forrige uke med PHP.
Hva er utelatt?
Yeah?
Ingen dollartegn.
Så er vi tilbake til en mer normal verden der
variablene ikke har dollartegn.
Men du prefiks dem med var, typisk.
Og Var betyr variabel.
Og mye som PHP er løst typed-- der det er typer,
det er tall og strenger og flyter og så forth--
Javascript tilsvar har typer.
Men det er løst skrevet i at vi programmerere behøver ikke å spesifisere dem.
Vi må bare være klar at ulike typer finnes.
>> Variabler, her er meanwhile-- hvordan vi kan erklære "Hei, verden"
som en streng.
Legg merke til det er identisk med PHP men ingen dollartegn.
Og dette er noe vi vil begynner å se mer i dag,
der du har et objekt med nøkler og verdier.
Og hvis du ønsker å prøve å slutte fra forrige week--
syntaksen er litt annerledes.
Men litt sunn fornuft check-- hvor mange tastene gjør dette objektet ser ut til å ha?
Så jeg ser fire.
Jeg ser to.
>> Så det er faktisk to.
Så dette er en samling av to nøkkelverdipar.
Nøkkelen er symbol der verdien er FB.
Nøkkelen er prisen der verdien er 101,53.
Så de er to nøkkelverdipar.
Og husk, PHP-- og dette er igjen bare slags syntaktisk forskjell.
Det er ikke alle som intellektuelt interessant.
PHP kan ha skrevet denne samme ting som follows-- sitat, likeverdige.
Og jeg endre disse til hakeparenteser.
Og da jeg endre dette til et siterte ord, "pris".
Og da jeg ikke bruker et kolon.
Hva gjorde jeg bruke i forrige uke?
Ja, likhetstegnet arrow funky notasjon.
>> Og så jeg gjorde det samme her.
Samme her.
Og det er alt.
Så det er fint hvis dette har ikke virkelig sunket inn i minnet bare
men fordi det er veldig intellektuelt uinteressant.
Det er bare syntaktiske forskjeller.
Men ideene er nøyaktig det samme.
Innsiden av denne variabelen sitat i Javascript
er en samling av nøkkelverdipar, hvorav den ene er symbol, hvorav
er prisen.
Og jeg kan få på disse verdiene med følgende syntaks.
Akkurat som i PHP, jeg kunne gjøre noe like-- la
meg gjøre denne boksen litt større.
Akkurat som i PHP, jeg kunne gjøre dette-- oh, for faen.
Kom igjen.
>> Akkurat som i PHP-- OK, vil vi bare bruke den som presenterer notater.
Akkurat som i PHP, kan jeg gjøre $ quote $ quote ["symbolet"]
og dette vil få meg verdien av "symbol".
I Javascript, kommer det til å være identiske, der jeg kan bare gjøre dette.
Det eneste som er mangler er dollartegn.
>> Så pent nok, så er det Ikke så mye nytt syntaks.
Så hva vi i dag fokuserer på, egentlig, er noen av ideene og programmene.
Og den første slike applikasjon som du kanskje
har sett hvis du stupte inn PSet sju allerede er dette syntaks.
Så i PSet syv, hvis du har sett eller ikke sett den ennå,
vet at det er en fil som vi gir du ringte config.json-- Java
Object Notation.
Hvorfor?
Vi ønsket å være i stand til å gi deg en mal med noen nøkkelverdipar.
Vi ønsket å være i stand til å gi deg en liste av verten, navnet på serveren.
Vi ønsket å gi deg en plassholder for brukernavnet ditt
og en plassholder for ditt passord.
Hvis du ikke ser dette ennå, for ikke å bekymre deg.
Mer om dette i PSet sju [? spec. ?] Og så,
selvsagt, ønsker vi at du å fylle ut gjøremål
fordi når du logger inn CS50 IDE, hver av dere
har ditt eget brukernavn og passord.
>> Så vi kan har brukt et halvt dusin eller flere forskjellige filformater.
Vi kunne ha brukt en .txt-fil.
Vi kunne brukt en CSV-fil.
Vi kan har brukt en INI-fil, en XML-fil,
en hel haug flere forkortelser som du kanskje ikke har hørt.
Det er litt vilkårlig på slutten av dagen.
Men super populært i disse dager er en tekst format kalt JSON-- Javascript Object
Notation-- som ser ut som dette.
Det er litt kryptisk, men merker mønstrene.
Du starter med et åpent krøllete brace, og du ender med det samme.
Innsiden av det er noe.
Det er en nøkkel-verdi-par.
Så dette er et objekt som jeg er å se på på skjermen her
som har en nøkkel, som har en verdi.
Og akkurat dedusere basert på forrige mønster, hva er nøkkelen her?
Database, ting til venstre side av colon.
>> Nå skjer verdien å være en flere linjer denne gangen.
Men verdien starter med en krøllete spenne og slutter med en klammeparentes.
Så hva ville du foreslår er typen av verdien av databasen?
En ordbok, eller bare mer konsist, et objekt.
Høyre?
Dette er slag av en datastruktur som kan bruke andre strukturer i seg selv.
Så hvis dette hele greia vi er ringer en object-- og et objekt
er bare en haug med nøkkelverdi pairs-- den Verdien av databasen i seg selv er et objekt.
Verdien av databasen har en hel haug av sentrale verdi-par, hvorav den første
er vertskap, deretter navnet, deretter brukernavn, deretter passord,
hver av hvor verdiene, i mellomtiden, er det bare en kjedelig streng i anførselstegn.
>> Så selv om det ikke er super klar ennå,
vet at dette er bare en standard, ganske kjedelig måte
å lagre data i et standardformat.
Men de vanligste feilene du kan gjøre, selv i PSet syv,
er små dumme ting, som hvis du uhell utelate komma der.
Det kommer til å resultere i filen ikke nødvendigvis å være lesbar.
Hvis du ved et uhell utelater ting som sitater, det er ikke til å kunne leses.
Så det er en ganske pirkete filformat, men det er en som er super vanlig.
Og vi måtte bruke den, selv om du ikke bruker noen Javascript ellers
i PSet syv.
>> Greit.
Så husk dette bildet.
Vi snakket om, i HTML, som koden kan se slik ut.
Dette er Hypertext Markup Language [Uhørbart] for bare "hallo, verden."
Men da vi foreslått en stund tilbake at hvis det hjelper,
kan det være lurt å begynne å tenke om dette allerede som et tre.
Faktisk innrykk at vi bruker bare for lesbarhet skyld
eller for stil skyld på venstre kan slags
settes til dette treet, hvor du har noen spesiell rotnoden at vi vil
generisk kalles dokument, under hvilken er roten HTML element eller tag, HTML,
som deretter har to barn, hodet og kroppen.
>> Og så i sin tur har hodet en tittel.
Og tittelen har en tekstverdi.
Og kroppen på samme måte har en tekstverdi.
Så hvis du er komfortabel ordtak at ja, du kan ta denne HTML
og tegner et bilde som dette, høyre side
er en fin mental modell fordi nå at vi har Javascript, et programmerings
språk som nettlesere kan gjennomføre og tolke for deg,
det viser seg at det vi er i ferd med å gjøre i kode
er begynner å manipulere dette trestruktur i minnet.
Vi trenger ikke å bygge treet i minnet.
Vi trenger ikke å gjøre liksom PSet-fem-stil datastruktur
kompleksitet.
Leseren, pent nok, ved tolke HTML topp til bunn,
venstre eller høyre, er bokstavelig talt kommer til å hånd oss ​​tilsvarer en peker
til at hele treet for gratis.
Den gjør alt det harde arbeidet.
Det er det Mozilla og Apple og andre har gjort for oss.
>> Og med Javascript skal vi være i stand til å kontrollere og endre og gjøre
interessante ting til det treet, ellers kjent
som et DOM eller Document Object Model.
Hva slags ting?
Vel, det viser seg at i Javascript, er det
denne vaskeri liste over hendelser som kan skje.
Og vi har egentlig ikke brukt som ord siden uke null og PSet
null når vi snakket om Scratch.
De fleste av dere sannsynligvis ikke bruke en hendelse i Scratch prosjektet.
Men du kanskje husker den enkle Marco Polo
eksempel, der vi hadde to sprites, en av dem sa: Marco.
Den andre av disse og deretter, ved lytting og høre den hendelsen, sa Polo.
Hvis ikke, må du gjerne ser tilbake så langt tilbake.
>> Men dette er bare for å sier, og du kan slags
slutte fra navnene på disse ting, Javascript, viser det seg,
kommer til å gi oss en måte å lytte for mus går ned eller mus går opp
eller tast går ned eller nøkkel går opp eller onsubmit onselect
eller onresizing noe.
Med andre ord, enhver fysisk handling at et menneske kan ta med en nettleser
at du gjør hver dag, kan du skrive kode for som lytter til disse hendelsene
og deretter gjør noe riktig.
>> For eksempel, hvis du bruker Google Maps, hva skjer hvis du klikker og flytte
mus, typisk?
Hvis du klikker og drar?
Yeah?
Nettopp.
Kartet begynner å bevege seg.
Så du kan liksom se hva som er over her, hva som er der borte.
Og hvordan Google gjennomføre det?
Vel, formodentlig, er de ved hjelp av et par av disse hendelsen
lyttere, en som sier, lytte til på mus
down-- så når brukeren fysisk skyver hans styreflaten eller hans eller hennes mus
ned.
Og så ser vi for noe lignende bevegelse
eller annen hendelse som tillater oss å fange dra.
Og faktisk, er å dra på samme måte i denne dot dot dot liste over mulige alternativer.
>> Så dette kommer til å være en kraftig måte å begynne å reagere til brukeren
selv før han eller hun faktisk klikker noe eksplisitt som sender inn.
Men vi kommer til å introdusere et par emner for å komme dit.
Men først, la oss overgang til noen faktiske koden.
Så jeg kommer til å gå videre og åpne opp dom-0,
som er et meget enkelt eksempel her at hvis jeg zoomer inn rett og slett
har denne inngangen her for meg.
Og jeg kommer til å gå videre og skriv inn "David" for mitt navn, og klikk Send.
>> Og så, om enn slags billig, jeg har denne meldingen som dukker opp som sier,
"hallo, David!"
Så dette er slags som vår "Hei, verden"
at vi gjorde en stund tilbake i C og selv i PHP fordi jeg har dynamisk
avgis navnet mitt.
Jeg kan gjøre en annens navn her.
Jeg kunne rett og slett endre dette til, lignende, Hannah, klikk Send.
Og ja, de små pop-up endringer.
>> Nå, pop-ups er en av de de fleste misbrukte funksjoner i nettet.
Og faktisk tilbake dagen pop-up blokkering
kom til mote fordi du ville gå til noen website--
kanskje en tvilsom sted-- som ville så plutselig
starte peprer skjermen med en hel haug med pop-ups.
Og så denne evnen til å dukke opp vinduer i foran brukeren
har ikke vært særlig godt mottatt av menneskeheten.
Så det er derfor du ser dette hindre ting,
som bare gjør dette hele greia stygg.
Så vi kommer til å trenge en bedre måte å spørre brukeren.
Men for nå, virker det til å fungere.
Så bare intuitivt, hva synes å skje her?
Jeg går videre og klikk Send, og så noe skjer, helt klart.
Men hva er det ikke skjer som skjedde forrige uke når jeg klikket inn?
Hva skjedde ikke på skjermen?
Sorry?
Last.
Nettadressen endret ikke i det hele tatt.
Jeg sa at dette var dom-0, og jeg er fortsatt på dom-0.
Normalt ville vi få endret til en annen URL, som register.php eller lignende.
>> Men selv når jeg avvise denne tingen ved å klikke på OK,
Legg merke til at nettadressen forblir helt satt.
Og, faktisk, hvis jeg er litt skeptisk, la meg åpne opp Chrome.
La meg åpne opp kategorien Network.
Og legg merke til det er tomt for øyeblikket.
La meg gå videre og sende Maria.
Det er ingen nettverkstrafikk overhodet.
Så det er ingen HTTP.
>> Så ja, hvis jeg ser på kildekoden for dette-- la meg lukke dette vinduet
og gå til Vis Source.
Interessant.
Det ser ut som det er noen nye koder, blant dem script.
Så la oss ta en titt innenfor CS50 IDE nøyaktig hva jeg sendt til brukeren.
>> Så her er-- la oss fokusere på HTML eneste.
Her er den nederste halvdelen av dom-0.html.
Og legg merke til at det har en tittel, et hode tag, en kropp tag, en form tag.
Men hva hopper ut til deg som annerledes, spesielt hvis du har aldri
skrevet noen Javascript selv.
La meg bla litt til høyre her.
Jeg har en inngang, en annen inngang for klikker.
Jeg har en ID, som er en slags ny.
Men vi fikk se dette med CSS.
Hva annet er definitivt nytt?
Yeah?
Fin.
>> Greit.
Så der det står onsubmit, merke til hva som synes å følge.
Dette er en egenskap i HTML nomenklatur.
Dens verdi er dette sitert streng her.
Og dette ser litt merkelig ved første øyekast.
Det er ikke HTML.
Det er ikke CSS.
Dette er, som du kanskje skjønner, Javascript.
Så det virker som bygges inn i denne nettside er en funksjon som heter hilse.
Og jeg dedusere at bare fordi det er et ord, hilse.
Det har en åpen paren, nære paren, semikolon.
Ser ut som en C-funksjon, ser ut som en PHP-funksjonen.
>> Og ja, det kommer til å være en Javascript-funksjonen.
Så jeg er tilbake falsk.
Vi vil komme tilbake til at i bare et øyeblikk.
Men hvor er denne funksjonen definert?
Vel la meg bla opp til toppen av filen.
Og selv om det er en lang linje, det er relativt grei.
La meg zoome ut her og fokusere på følgende fire linjer.
>> Så i Javascript, bare som PHP, du bare
si, bokstavelig talt, ordet "funksjon" navnet på funksjonen,
og deretter parentes med noen arguments-- ingen argumenter i denne saken.
Og det er ingen returtype i Javascript, akkurat som PHP.
Så det er litt løsere enn C. Åpne klammeparentes, tett krøllete brace.
Bygget inn Javascript er et function-- ikke en anbefalt function--
men en funksjon som heter varsling hvis eneste mål i livet
er å trekke opp det ganske stygt be om at vi så et øyeblikk siden.
>> Nå er dette en slags munnfull.
Hva foregår her?
Så la oss begynne å markere alt her.
Det er det samme argumentet for å varsle.
Og hva er det som skjer?
Dette ser ut som en streng.
Og det viser seg, i motsetning til PHP og i motsetning til C, spiller det ingen rolle i Javascript
hvis du apostrof eller doble anførselstegn.
De vil være tilsvarende.
Og ærlig talt, det er bare populært i disse dager
for Javascript programmerere å alltid bruke enkle anførselstegn for noen grunn.
Det er bare ting å gjøre.
Men vi kunne bruke anførselstegn, så vel.
>> Så pluss er en ny karakter.
Men de av dere som har gjort dette før, hva betyr pluss bety?
Yeah.
Sette sammen.
Så vi så dette i PHP.
Det er bare prikken operatør i PHP som
vil sette sammen to strenger sammen.
C var en smerte i nakken for å gjøre dette.
Recall fra PSet seks, som var en spesielle smerter i nakken,
du må bruke noe som strcat
etter tildele minne på stakken eller haugen.
Du måtte hoppe gjennom ringer bare for å sette sammen to strenger.
I Javascript, er det super enkelt.
Bare bruk pluss operatør mellom dem.
>> Så komplekset utseende ting synes å være denne
fordi ved slutten av Hele denne strengen, jeg bare
sette sammen på et utropstegn.
Så hvis det var dukker opp ble "Hei, David", "hallo, Hannah,"
"Hei, Maria," og så videre, tydelig at middel ting i mellom de to
plusser må gi meg tilgang til hva?
Hva er i det for sikkert?
Yeah.
Så jeg skal late her besvare deres navn, ikke sant?
Slik at deres navn dukket opp i den endelige resultat. Så hva betyr dette?
Vel, jeg foreslo tidligere i at bilde som den såkalte DOM
har denne spesielle root element vei opp toppen kalt dokument.
Og nå viser det seg, som kommer å være en spesiell global variabel
i Javascript, bygget inn som er en hel haug med nyttig funksjonalitet.
Blant nyttig funksjonalitet er evnen til å få til en hvilken som helst etterkommer-node.
De firkanter eller rektangler eller ellipser er bare noder i et tre, så å si.
>> Så det viser seg at bygget inn Javascript dokument objekt
er en funksjon, ellers kjent som en metode, er at kalles getElementById.
Syntaksen for å ringe en funksjon i Javascript
som er på innsiden av et objekt eller en variabelen er bare med dot notasjon.
Og vi så dette i C hva struct syntaks.
Du ser dette i PSet sju, type, liksom, når du ser CS50 :: søket.
Tykktarmen kolon i PHP er et annet måte for å kalle en funksjon som er
innsiden av noen objekt.
>> Men for nå i Javascript, det er bare en prikk.
Og så denne funksjonen, pent nok, type
sier hva det does-- få element av ID.
Et element er bare et annet navn for en tag eller node i DOM.
Og så får element av ID "navn" betyr dette-- her er min HTML.
Og basert på denne HTML, hva node eller hva HTML-kode er jeg
kommer til å programma være handed ved å ringe document.getElementById?
>> Ja, akkurat.
Jeg kommer til å få input element det hvis ID er «navn».
Så spesielt, kan du tenker på denne funksjonen,
getElementById, som en måte å gi sikkerhets en peker til den spesifikke noden
i treet.
Vi har ikke trukket dette treet, men det er en måte
for å få tilgang til det rektangel eller at rektangel
av entydig identifiserer det via sin ID.
>> Nå, hvorfor er dette nyttig?
Vel, det viser seg at når du har fått
at node, som rektangel fra bilde, som node innsiden av den,
i sin tur har en hel haug med properties-- nøkkelverdipar
eller data, hvorav den ene som kalles verdi.
Så bokstavelig, er det en slags munnfull å forklare hele greia.
Men ved slutten av dagen, alt dette gjør er å gi deg
en streng som brukeren har skrevet i i denne hierarkisk måte.
Men jeg liker ikke en par av disse tingene.
Eller rettere sagt, det er litt nysgjerrighet fortsatt.
Alle som så ut til å fungere.
Hvorfor tror du jeg kom tilbake false etter ringer hilse?
Dette ser litt stygg, at Jeg har to uttalelser der
skilles med semikolon.
Gjett.
Hvis jeg fjernet return false, hva kan skje, bare instinktivt?
Beklager, si igjen?
>> Åpne en haug med Windows.
Så potensielt kanskje noe sånt ville skje.
Hva annet?
Kan sende inn en forespørsel der?
Til samme side.
Så, faktisk, det er det jo nærmere svar her,
selv om, i motsetning i det siste, har jeg ikke
spesifiserte handlingen attributt, som normalt har vi å gjøre.
Det viser seg at det er en standard. Hvis du ikke angir handling,
det er som å si sitat, unquote eller navnet på selve filen,
som i dette tilfelle ville være som dom-0.html.
Det er bare slags utledes, eller snarere underforstått.
>> Og så hvis jeg ikke gjør dette, la oss legge merke til.
La meg lagre dette.
Og jeg har fjernet retur falsk.
La meg gå tilbake til denne eksempel og kraft legg det.
Og du har kanskje sett meg foreslå dette på CS50 Diskuter en haug med ganger.
Hvis noe noensinne opptre funky og Nettleseren er ikke oppfører seg som forventet,
Ofte vil du ønsker å holde Skift og klikk Reload.
Som vil tvinge hver fil for å laste og ikke bruke nettleserens lokale cache
eller kopi slik at nå, la meg gå videre og åpne opp min Inspector, kategorien Nettverk.
Jeg kommer til å klikke Bevar Logg fordi jeg
ønsker ikke å slette radene når jeg blir revet vekk andre steder.
>> La meg gå her fremover og type i Andi, klikk Send.
Greit.
Det virker som forventet.
Det sier "hei, Andi."
La meg klikker OK.
Interessant.
Legg merke til at siden endret, om enn i den opprinnelige siden.
Legg merke til URL form av endret.
Det legges et spørsmålstegn, som vanligvis er en indikator
at vi prøvde å sende noe.
Og deretter ved bunnen, enda mer eksplisitt,
her er selve HTTP-forespørsel, som har en respons på 200 som
brakte meg tilbake hit.
>> Så dette er ikke hva vi ønsker å gjøre, ikke sant?
Fordi jeg ønsker ikke å laste hele siden.
Jeg i stedet ønsket å returnere false slik at kortslutning
nettleserens standard oppførsel, som var selvfølgelig å sende siden.
>> Så la oss ta en titt på en marginalt bedre eksempel.
Dette er dom versjon en.
Og legg merke til følgende.
Det er OK hvis du ikke Grok alle linjene med kode.
Men hva er fundamentalt annerledes om denne implementeringen?
Jeg skal fastsette den oppfører seg på samme, gjør det samme.
Hva har jeg tydeligvis gjort annerledes?
Yeah?
>> PUBLIKUM: [uhørlig].
DAVID MALAN: Yeah.
Slik at funksjonen er definert differently-- med andre ord, fraværende fra skjemaet,
oppe på linje 7-- eller heller, linje 8-- ikke lenger
jeg har onsubmit attributtet.
I forrige eksempel, jeg hadde dette.
Og da jeg bokstavelig talt skrev koden min her.
Og så sa jeg return false.
Og hvis det ikke gni du feil vei ennå,
Det bør begynne å utstrekning som, akkurat som i HTML,
da vi begynte å co-mingle det med CSS i stil attributter,
det nettopp begynt å få litt rotete eller føles litt feil.
>> Tilsvar her, hvis du begynner å ta HTML,
og deretter automatisk plop noen Javascript-kode
i midten av en sitert streng, er det ikke kommer til å være meget vedlikeholdsvennlig.
Høyre?
Det er ikke engang klart først plassere hvor Javascript-kode er.
Så det ville være veldig hyggelig som et prinsipp om bedre design,
la oss holde våre HTML helt atskilt fra vår Javascript.
>> Så for å gjøre det, det vi har gjort her er following--
vi bare bruke HTML for markup bare.
Og så i versjon en av denne, alt Jeg har er et skjema med en unik ID.
Og deretter ned her, jeg drar nytte av en spesiell funksjon i Javascript
der jeg kan ha det som er ringte en anonym funksjon.
Så det viser seg at hvis jeg kaller document.getElementById av 'demo'
det er som å gi meg en peker til denne noden i treet mitt, form element,
så å si.
>> Nå, jeg bare vet fra vite litt av HTML
nå er vi å ha lest noen online referanse, som en form element støtter
en hel haug med arrangementet listeners-- i Med andre ord, den vaskeri liste over arrangement
lyttere som vi så for et øyeblikk siden.
Jeg vet fra å lese dokumentasjonen at onsubmit er en gyldig begivenhet
lytteren for en form element.
>> Så når jeg vet det, det er trygt for meg å gjøre
den following-- få som node fra treet, form element,
og nå sin såkalte onsubmit eiendom.
Så prikken betyr bare Dette er en eiendom,
som en spesiell verdi på innsiden av det.
Og hva datatype er jeg tildele, tilsynelatende,
til onsubmit, som er effektivt en variabel inne
av at node i treet?
Det er et felt inne i det struct.
Hva er datatype?
>> En funksjon, ja.
Så det viser seg at PHP har dette.
Og selv om vi ikke fortelle deg om det,
C har også funksjonspekere, de evne til å formidle og tilordne funksjoner
som variabler verdier selv.
Og vi ikke kommer å regress tilbake til C.
Men for nå, viser det seg at på høyre side her,
selv om det ser litt funky, dette betyr, hei nettleser,
gi meg en funksjon.
Jeg kommer ikke til å bry gi det et navn fordi jeg er bokstavelig talt
kommer til å tildele la oss kalle det adressen til denne funksjonen
umiddelbart til onsubmit.
Med andre ord, nettleser, trenger du ikke å vite hva denne funksjonen heter.
Du trenger bare å vite hvor den er i minnet.
Og så det er nok bare å har et likhetstegn der
og ikke å bry navngi denne, som foo eller hilse eller noe annet ord.
Og nå er dette bare en stilistisk ting.
Jeg kunne flytte denne klammeparentes på the-- sorry-- neste linje
som vi vanligvis gjør CS50.
Men i Javascript, er det faktisk stilistisk felles
å bare holde klammeparentes, den en første, på den første linje.
>> Men heretter er det ikke noe interessant.
Det åpne klammeparentes bare avgrenser starten av min funksjon.
Funksjonen er nå identiske, bortsett fra at jeg har
inkludert retur false innsiden av denne funksjonen.
Fordi det viser out-- og du bare ville
vet dette fra lesing den documentation--
at hvis den funksjonen du tildele til onsubmit handler returnerer false,
leseren bare vet og aksepterer ikke å sende inn skjemaet til en server.
Hvis den returnerer sant, vil det sende den til en server for grunner vi vil se
er nyttige i bare et øyeblikk.
>> Og så semikolon etter krøllete brace det bare
betyr at jeg er ferdig med å definere funksjonen.
Du vet hva jeg skal kalle så snart som du hører en innlevering.
Greit.
Dette er fortsatt uten tvil slags stygge.
Så hva mer kan vi gjøre?
>> Vel, det viser seg da i versjon to, som er last--
Og vi vil bare blikk på dette.
Med fare for å gjøre det styggere, viser det seg
at det er et bibliotek i verden kalles jQuery.
Og jQuery er en super populære Javascript-biblioteket
det er så populære at de fleste noen JavaScript-- det er ikke
uvanlig for folk å forvirre jQuery med Javascript.
Hvorfor?
Java selv har svært ordrik måter å gjøre things--
document.getElementById, dadadadadada.
Du ender opp med å ha svært lange linjer med kode.
>> Så en fyr som heter John Resid, som faktisk fungerer for en oppstart
opp i disse dager, kom ut med dette biblioteket år
siden at mange mennesker har bidratt å kalles jQuery som forandrer
syntaksen på følgende måte.
Og bare så du har sett denne, fordi du vil alltid
se dette hvis du gjør en webbasert endelige prosjektet,
dette ville være det samme måte implementere den samme funksjon med
denne spesielle biblioteket.
>> Nå, i stedet for erte den fra hverandre i sin helhet,
la oss bare se på noen mønstre.
Denne syntaksen ser ut til å ha hvor mange anonyme funksjoner
eller navnløse funksjoner eller AKA lambda funksjoner?
To, ikke sant?
Og du vet at selv om du ikke er super skjegg med dette,
bare ved det faktum at det sier funksjon () to ganger.
>> Og det viser seg at hva denne koden er doing--
og vi vil referere til online referanser, til slutt, for litt hjelp med dette.
Det betyr bare at når dokumentet er klar,
gå videre og registrere følgende funksjon
som sender behandleren for HTML element som unik idé er demo.
Og så, når det skjer, kalle disse to linjer med kode.
Og dette er tragisk, en mer ordrik måte å si return false.
Og vi nevnte dette bare fordi vil du se kode som dette på nettet.
Og det er ingenting å være daunted av.
Men heller, husk at det er kommer til å være vanlig i Javascript
er dette paradigmet.
Og så det er derfor vi vise det for nå.
Greit.
Så uten bolig for mye på at syntaks,
er det er spørsmål om disse eksemplene eller ideer så langt?
Greit.
Så la oss bruke dette for noe nyttig.
Å gjøre en nettside som bare sier hei, så og så er ikke alt som er interessant,
ikke å underwhelm.
Dette kommer ikke til å være vakker, men det kommer til å gjøre noe nyttig.
La meg gå tilbake til min katalog her og åpne opp, sier, form 0.html.
>> Så antar at dette er den freshman egenutført sport registreringsside
uten CSS eller noen følelse av design.
Og jeg ønsker å gå videre og registrer deg her med et passord.
Og jeg kommer til å godta vilkårene og betingelser og klikk Registrer.
Og nå nettstedet sier: "Du er registrert! (Vel, egentlig ikke.) "
Det virker som om det fungerte, men la meg gå videre og tvinge reload.
>> Og la meg si, nei, gjør du ikke trenger min faktiske e-postadresse.
Eller kanskje vi skal bare si post der inne.
Passord vil bli, liksom: 12345.
Og så, bare fordi jeg er en idiot, nå er det 123 456 789.
Og jeg kommer ikke til å sjekke boksen.
>> Hmm.
Greit.
Så det er flere muligheter for forbedring her.
Og du vet, eller vil se i PSet sju, som du kan skrive code--
og du må skrive kode i PHP-- å forsvare
mot slike bruker feil fordi brukeren klart
har ikke samarbeidet.
Og han eller hun ikke har gitt deg all den verdier du ønsket eller selv i formatet
at du ville ha dem.
Så du vil se i PSet syv som Vi kunne sikkert ha noen
hvis forholdene som sier Hvis e-postadressen
er ikke en username@something.edu, vi kunne bare
si beklager og beklager til brukeren mye, som du kan være i PSet sju.
Eller hvis de ikke har sjekket den boksen, viser seg i PHP, kan du gjenkjenne det,
også.
Og sikkert hvis passordene samsvarer ikke som i register.php
for PSet sju, kan du gjenkjenne det.
Men det er en smerte i hals i at nå ber de
oss til å gå hele veien til serveren.
Brukeren er informert om feilen.
Og minst mindre du bruker noen mer avansert teknikk,
nå har de til å klikke på tilbakepilen.
Ville det ikke være hyggelig, som en rekke nettsteder i dag,
Hvis du hadde mer umiddelbare tilbakemeldinger, kjapt?
>> Med andre ord, la meg gå til versjon en, som kommer til å bli noe penere.
Men det har denne funksjonen.
Malan, 12345, 123456789, ikke kommer til å krysse av i boksen Register.
Passordene er ikke like.
Så selv om dette pop-up er ugly-- vi kan erstatte dette til slutt
med noe som Bootstrap, som du vil se i PSet sju
er et svært populært library-- jeg gjorde oppdage at passordene ikke stemmer overens.
Greit.
Vel, la meg fikse det som brukeren.
La meg gå videre og si 12345, 12345.
Fortsatt ikke sjekker avtalen.
Du må godta vilkår og betingelser.
Så hvorfor?
>> Hvis vi allerede har hevdet at det er en måte,
og vi har krevd at du i PSet sju for å påvise feil
tilstander som dette server-side, hvorfor skulle jeg
bry også gjøre dette i Javascript?
Hva er et argument i favør av å legge til hva
du er i ferd med å se så some-- det er ekstra kompleksitet.
>> Kanskje er det ingen oppside.
Hva kan det være?
PUBLIKUM: [uhørlig].
DAVID MALAN: Oh, interessant.
Potensielle trusler.
Så sikker på, hvis du ikke håndterer feilaktig brukerundersøkelser så stor,
kanskje det er alle bedre hvis det ikke engang nå serveren din.
Jeg ville presse tilbake dit og si, bør du sannsynligvis
fikse begge disse problemene.
Men det er rettferdig.
Hva annet?
>> PUBLIKUM: [uhørlig].
>> DAVID MALAN: Yeah.
Denne koden, som vi har sagt før, er tolket på klientsiden.
Det plager ikke serveren, noe som betyr at det ikke skjer
påvirke serverens last eller kapasitet.
Og nå, for lite gamle meg, dette har ingen meningsfull effekt
fordi jeg har en bruker akkurat nå.
>> Men hvis du er noe nettside av anstendig størrelse,
spesielt de største, som Facebook, jo mer du kan holde folk utenfor
av serveren jo bedre fordi en server, selvfølgelig,
bare har en begrenset mengde RAM, et endelig antall gigahertz,
et endelig antall ting den kan gjøre pr tidsenhet.
Så hvis det er flere personer i verden treffer din server,
uhell logging feilaktig, like godt hvis du
kan holde at belastningen på serveren din.
Pluss, spesielt på en mobil device-- Hvis du noensinne
logg inn my.harvard eller Yale nettid eller lignende,
det er denne ventetiden med mye nettsteder sånn der det trengs,
aktig, en jævla sekund eller to ganger.
Og så, min Gud, hvis du skriver feil, så må du slå tilbake og gjøre om det.
Så det er ventetid, spesielt på tregere nettverkstilkoblinger.
Men Javascript, fordi det kjører på klienten
og trenger ikke å gå frem og tilbake over et potensielt treg Internett
tilkobling, kan du få nesten momentant tilbakemeldinger.
>> Så la oss se på dette.
La meg åpne opp form 0 og se på HTML her.
Og la oss bare se hva som skjer.
Dette er en form som Handlingen er register.php.
Jeg bare bruker får så at jeg kunne se nettadressen.
Men for passord, ville vi helt sikkert vil å endre dette til å legge i virkeligheten.
Her er en inngang felt av typen tekst.
Her er en annen inngang felt av typen passord.
Her er, hvis du aldri har sett, en inngang på avkrysnings type.
>> Men det er ingen Javascript her overhodet.
Dette er bare HTML som går til register.php.
Men i versjon en, hvor jeg begynte å få disse pop-ups,
la oss se hva som faktisk skjer her.
I versjon en, hva Jeg kommer til å see-- jeg
tenkte jeg kunne stall nok med nok ord, men jeg løp ut.
>> I versjon one-- der vi går.
I versjon en, merke following-- og er ikke den beste gjennomføringen,
men det er min første.
Legg merke til at under form, har jeg et script tag.
Og et skriptmerket betyr, hei, nettleser, her
kommer noen kode i, typisk, Javascript.
Og nå merke til hva jeg gjør.
På line-- jeg kan knapt Les it linje 32, står det,
Var form-- så gi meg en variabel kalt form.
Og så får document.getElementId med "registrering."
Hva er dette?
Vel, la meg spole opp her.
Og legg merke til, ah, jeg ga form element en vilkårlig men beskrivende idé
for registrering.
Så dette gir meg en variabel som tillater meg å hente den node,
som rektangel i treet heter form.
form.onsubmit midler, hei nettleser, registrere en hendelse lytteren
på dette skjemaet.
Med andre ord, når dette skjemaet innsendt, utføre følgende kode.
Det trenger ikke et navn fordi hvorfor gjør du trenger å vite navnet?
Du trenger bare å vite hva du skal utføre, ergo
det er en anonym eller lambda funksjon.
Og at funksjonen er alle disse linjer her.
Og nå, for å være ærlig, selv om du kanskje ikke noensinne har skrevet Javascript
før, det er bare C og PHP logikk.
Så hvis form.email.value == "" - så hvis e-postfeltet er tomt,
kjefte på brukeren med "Du må oppgi din e-postadresse. "
Annet hvis form.password.value er blank kjefte på brukeren,
"Du må oppgi passordet ditt."
>> Mer interessant logisk, hvis form.password.value ikke
lik form.confirmation.value-- hvor kom bekreftelsen kommer fra?
La meg spole tilbake.
Vel, jeg kalte denne inngangen feltet her passord.
Og jeg kalte dette en her bekreftelse.
Jeg kunne ha kalt det passord to eller noe annet.
Jeg er bare logisk å sjekke at disse to er like.
Else-- det viser seg at dette er Mr. Boole igjen-- en boolsk verdi, i boksen.
Så hvis jeg sier, utrops point-- hvis ikke form.agreement.checked,
kjefte på brukeren også.
>> Så dette syntaks som du vil se er svært vanlig i Javascript,
hvor du har dette prikkete notasjon.
Du starter med et objekt her.
Du dykke i dypere til en til en eiendom som passord.
Og så du får på den faktiske verdien.
Og igjen, her er input.
Her er navnet passord.
Og verdien er uansett menneske har faktisk skrevet i.
>> Så i alle disse tilfellene jeg returnerte falsk.
Men hvis ikke, jeg kommer tilbake sant.
Og så nå ser vi en overbevisende bruk av når
du vil returnere false til stopp hva brukerens gjøre
og gjøre ham eller henne å velge igjen eller skriv igjen.
Ellers, vi returnere true.
>> Og la meg presentere én andre variant av denne bare
til frø viss forståelse av disse.
Vel, i versjon 2 av denne, form 2-- Jeg skal gjøre det med en bølge av en hånd.
Dette er, for de nysgjerrige, jQuery versjonen,
de av dere som kanskje ønsker å prøve seg i det aktuelle biblioteket.
Men la oss start-- og noen spørsmål?
La meg ta en pause for øyeblikket fordi som var rask og mye.
>> Men det fine her er at alle av koden er ganske mye det samme.
Den nye ting er hva som er den dom?
Hva er disse rektangler?
Hva er disse nodene?
Hva er en anonym funksjon?
Hva er en hendelsesbehandling?
Men heldigvis, det meste av det er bare full sirkel fra, sier uke null.
Greit.
Så noe litt mer interessant?
Vel, først av alt, la meg gå videre og åpne opp Google Maps.
Og du vil legge merke til at for en øyeblikket, på delt andre,
Legg merke til hva som skjer når Jeg klikker fort nok.
Og denne forbindelsen ved Harvard er så fort at du egentlig ikke merke til det.
Men hva gjør du slags liksom se hvis jeg klikker og drar veldig fort?
De av dere ser på nettet, hvis du bremse dette til 0.5x hastighet,
du kan se dette bedre.
>> Hva skjedde bare før jeg klikket og dratt?
La meg prøve her-- la meg gjøre noe annet, som 90210.
La oss gå langt unna.
Det var veldig fort, også.
Hva med Disney World?
Det vi går.
OK.
Hva så du for en delt andre?
Akkurat, som, torg, ikke sant?
Plassholdere for fliser?
>> Vel, hva er det som skjer her?
Google Maps er et fint eksempel på denne teknologien som kalles AJAX.
Og det er her vi begynner å bruke Javascript i en spesielt
forlokkende måte.
Tilbake i dag, var det Dette nettsted som heter MapQuest.
Og jeg burde ha tatt en skjermbilde av dette fra 1990-tallet,
der hvis du ønsket å se her opp på kartet,
du ville bokstavelig talt klikker en pil opp på toppen som viste deg
en annen firkant på kartet.
Hvis du ønsket å gå til venstre, du klikket en pil som viste deg
en annen firkant på kartet.
Og noen nettsteder fortsatt gjøre dette i dag.
Men selv MapQuest har fått bedre, som Google Maps.
>> I stedet, hva er bedre disse dager er nettsteder som bruker AJAX.
AJAX-- ellers kjent som Asynkron Javascript og XML,
som er bare en fancy måte å si en teknologi eller teknikk som
tillater en nettleser hjelp av Javascript å foreta ytterligere HTTP-forespørsler
etter at siden er lastet.
Så hva betyr dette?
Vel, det ville være snill av irriterende i Gmail
hvis hver gang du ønsket for å sjekke e-posten,
du hadde bokstavelig talt treffer Ctrl-R eller Kommando-R eller klikk Reload knappen
og hele darn side ville laste.
Høyre?
Det ville blinke hvitt trolig for andre.
Du vil se dum fremdriftslinjen.
Og bare for å se om du har ny hele nettsiden og URL-post,
du er på ville måtte lesse.
>> Men det er ikke det som skjer i Gmail.
Høyre?
Når du får en ny e-post i Gmail, hva som skjer på skjermen?
Det viser bare opp, ikke sant?
Det bare vises magisk som en ny rad i tabellen.
Som faktisk innebærer en anstendig mengde kompleksitet.
Faktisk, hvis du tenker på dette treet, som selv om er en enkel en her,
Gmail-- og jeg må se på koden for å være sure--
sannsynligvis har en HTML-tabell eller kanskje en uordnet liste som den gjengir
hver av innboksene e-poster som.
>> Og så hvis du forestille deg dette er det er et tre i minnet når du er
bruker Gmail som ser slags type som dette, når Google innser, ooh,
du har en ny e-post, det gjør det ikke ønsker å gjenoppbygge hele treet.
Snarere ønsker det å finne node i treet som representerer din innboks
og bare sette inn en ny node.
>> Så veldig lik PSet fem, hvor du måtte sette noder i en hash table,
på samme måte gjør Google, via Javascript-kode som den har skrevet,
traverse dette treet, finne ut hvor er at innboksen del av vinduet,
og deretter sette inn en ny rad.
Og en ny rad betyr bare én eller flere nye noder i et tre.
>> Og så AJAX er denne teknikken som gjør det mulig for nettopp det.
Når du har besøkt en URL, Men gal lenge det er,
og når siden har blitt lastet, kan du likevel
hente mer data fra internet-- enten det er
en e-post eller en flis av en map-- grip den bak kulissene
og deretter sette det inn på siden slik at menneske ikke egentlig
må vente på det.
>> Facebook Messenger fungerer på samme måte.
En rekke andre websites-- oh, faktisk, selv dette.
Jeg mener, dette er, ærlig, type en irriterende funksjonen disse dager.
Hvis jeg begynner å søke etter cats-- dette er slag av en fryktelig brukeropplevelse.
Det begynner bare å søke etter meg.
Vel hva er det gjør?
Nettadressen har egentlig ikke endret siden jeg begynte å skrive.
Men hva som skjer på tvers av wire-- OK, hmm interessant.
Hva kommer over tråd her bare blir sprøere.
>> OK.
Så la meg gå videre og inspisere element og gå til kategorien Network
og prøve å gjøre dette teknisk og mindre om katter.
Som jeg skriver, bokstavelig talt, katter og-- hva som skjer
per-- jeg ikke kommer til å klikke det.
Greit.
Så her nede, hva som skjer hver gang jeg skriver et tegn, tilsynelatende?
Liker, lavt nivå?
Hva skjer med hver av dem tegnene jeg skriver på tastaturet?
Yeah?
PUBLIKUM: [uhørlig].
>> DAVID MALAN: Nettopp.
Hver av disse tegnene er kommer til Google, en av gangen.
De bygger opp en streng på deres server som representerer
alt jeg har skrevet i hittil.
Og hver gang jeg skriver en annen karakter, de
bruke sin hemmelige saus av en søke algoritme og finne ut,
mener han denne katten siden eller denne katten siden eller lignende?
Så i en viss forstand, gir det meg med en bedre opplevelse i at jeg ikke engang
trenger for å fullføre min tanke.
Og ja, det er en nyttig ting, autofullfør generelt.
Hvis deres algoritmer er god nok og hvis mine søk er tydelig nok,
Jeg trenger ikke å skrive hele ordet.
De kommer til å fortelle meg hva det er jeg faktisk søker etter.
Så hva Google kaller instant søk er bare å bruke AJAX,
bruker kode som gir dem mulighet til å be om ekstra innhold via en nettleser
bak kulissene ved hjelp av denne nytt språk, Javascript.
Så vi har et par minutter igjen.
Og la meg kalle opp min kompis Colton opp på scenen,
siden det virket spesielt morsomt sist gang
å innføre en teknologi at noen av dere
har uttrykt interesse i for endelig prosjekter.
Vi tenkte det ville være morsomt å bringe opp frivillig, men i dag
vise deg et tillegg til dette som gjør at you-- yeah,
Jeg så denne hånden først.
Kom opp.
Veldig bra gjort.
Godt jobbet.
Jeg kommer til å projisere dette på skjermen i bare et øyeblikk.
Hva heter du for alle?
>> EFA: Jeg er Efa.
>> DAVID MALAN: Etha?
>> EFA: Efa.
>> DAVID MALAN: Efa?
>> EFA: Yeah.
>> DAVID MALAN: Hyggelig å se deg.
Greit.
La meg få dette klart.
Kom over til midten med Colton her.
Hva Colton har i hendene i dag er en fjernkontroll.
Så i stedet for å bare stå der i en tredimensjonal verden ser rundt
som Colton gjorde, nå Efa kan faktisk gå rundt ved å gå opp,
ned, til venstre og høyre som en Nintendo eller Xbox-kontrolleren.
EFA: Jeg kommer til å falle av scenen.
DAVID MALAN: Jeg vil stå omtrent over her.
Men det er en risiko.
OK.
Så gå videre og sette de på.
La meg gå videre og bytte til skjermen her.
La meg dempe lysene.
Og Colton, la meg komme stativ ved siden av deg.
>> Du ønsker å forklare her do med mic hva vi gjør?
Vær så god.
>> COLTON: Sure.
Så akkurat nå er vi laste opp Oculus,
Jeg antar operating-- ikke opererer system, men hovedprogrammet, der
du kan få tilgang til alle spillene og apps som er i biblioteket.
Så akkurat nå, bør det si peke på styreplaten for å begynne.
Touchpad kommer til å være på høyre side av headsettet.
Så sett i gang og tap--
EFA: Oh, mann.
DAVID MALAN: Ja, der du går.
Kvaliteten Efa er å se er mye høyere kvalitet.
Dette er bare Wi-Fi her.
COLTON: Så hva du er kommer til å ønske å gjøre
er å se mot toppen høyre på skjermen.
Jepp, det spillet på den aller øverst til høyre.
Og så når du velger det, trykker du på styreplaten igjen.
Jeg tror sine Dreadhalls.
Og så her er a-- her, la meg holde brillene dine for deg.
>> Så ga jeg bare ham en kontroller.
Så nå kan han styre spillet.
Han kan bevege seg rundt og sånt.
Så gå videre og se opp til toppen.
Du bør se New Game.
Så sett i gang, og du kan gjøre det.
Nå, bør du være i stand til å kontrollere selv med kontrolleren,
også, så snart spillet laster opp her.
Dette kan være litt skummelt.
>> EFA: Nå forteller du meg.
OK.
>> COLTON: All right.
Så bekrefter du at du kan bevege deg rundt.
OK.
Du kan bevege deg rundt.
Perfekt.
Så hvis du ser ned, har du et kart.
Kart viser deg hvor du er.
Du kan se deg rundt i rommet.
Du kan helt snu.
Ja, akkurat.
Snu.
>> Så ser til venstre.
Jeg tror det er noe du kan plukke opp på et fat i rommet.
>> EFA: Hvordan får jeg den kartlegge ut av veien?
COLTON: Se opp.
Bare se opp.
Greit.
Det du går.
Nå gå videre og bare snu.
Så se lenger til venstre.
Hold deg i bevegelse igjen.
Holde utkikk venstre.
Fortsett.
Yeah.
>> EFA: Oh, på den måten.
>> COLTON: Yeah.
Gå mot det med kontrolleren.
Det du går.
Nå bør det si plukke den opp.
Det du går.
Plukk den opp.
Greit.
Nå, la oss komme oss ut av dette rommet.
Gå videre og gå til den døren.
Så du kommer til å hold-- det står hold knappen for å tvinge den åpen.
Så gå videre og hold knappen.
Jepp, tvinger det åpne.
Greit.
Godt jobbet.
Nå er vi vandre ut av rommet.
Så jeg kommer til å la resten opp til deg og se hva du finner ut.
EFA: Jeg har ikke tenkt på det mørke rommet.
Å vent.
Nå må jeg gå ned den mørke hallen?
OK, jeg kommer tilbake [uhørbart].
COLTON: All right.
Noen flere elementer for å plukke opp.
Ser ut som noen mynter.
Det er en lås hakke.
Så hvis du finner en låst dør, kan du bruke den.
Er du redd?
>> EFA: Ikke ennå.
COLTON: OK.
>> Pretend-- ja.
Bare late som du er faktisk står der.
Og hvis du slår around-- du er nødt til å bli vant til det.
Men det er fornuftig.
DAVID MALAN: Og mens Efa fortsetter å spille, siden vi kunne gjøre dette hele dagen,
Vi kan alle tærne her ute.
Men vi har to andre parene, Hvis du ønsker å komme opp og spille.
Ellers vil vi se deg neste onsdag.
Takk til våre frivillige i dag.
[APPLAUSE]
>> [MUSIC - "SEINFELD tema"]
SPEAKER 1: Vel, jeg er sette en ny PL montere på.
Jeg bare endret OLPF--
>> SPEAKER 2: Så hva nøyaktig er det du gjør?
>> SPEAKER 1: Vel, hver og en av these-- her, vil jeg vise deg dette i her.
Du kan se den her.
>> SPEAKER 3: Jeg tror jeg er bra med disse.
Vil du ha litt mer?
>> SPEAKER 4: Nei, jeg er bra. [Uhørbart].
>> SPEAKER 3: Nei, [uhørbart].
Ha litt.
SPEAKER 1: Ulike farger.
SPEAKER 2: OK.
SPEAKER 1: Så til slutt hva det gjør er det justerer farge of--