DAVID J. MALAN: All right, så dette her er Myo arm band, et par som vi har for CS50 endelige prosjekter. Og det var en demonstrasjon vi i kø deg opp på forhånd hvor essensielt dette ganske stram arm bandet opp her lytter til dine muskulære bevegelser som deretter kartlagt i programvare til Colton laptop over her som hadde iTunes og at sang allerede i kø. Snarere enn meg demoing dette, Colton har vært i laboratoriet klart hele uken å få en demonstrasjon klar for en modig frivillig. Hvis noen ønsker å komme på opp-- så hånden først. Kom opp. [00:01:09] OK. Og hva er ditt navn? [00:01:13] PUBLIKUM: Uh, Maria. [00:01:14] DAVID J. MALAN: Maria, hyggelig å se deg. Kom over her. La meg introdusere deg til Colton. Colton, dette er Maria. [00:01:21] Colton: Hei, hyggelig å møte deg. [00:01:23] DAVID J. MALAN: All rett, så steg en, vi er nødt til du putter dette videre til din underarm slik at det er ganske tett opp nær albuen. Og i mellomtiden, la oss ha sette på vår Google Glass og vi vil blande teknologi i dag. [00:01:33] Colton: Først må vi koble dette til ting. [00:01:36] DAVID J. MALAN: OK. Egentlig, la oss sette armen som nær denne som mulig kabelen slik at vi kan først synkronisere den opp. [00:01:41] Colton: La oss gjøre dette. [00:01:42] DAVID J. MALAN: Og i mellomtiden, så at alle kan få en nærmere blikk, vi vil kaste Andrew kamera opp på skjermen der. Så vi har en USB-kabel som er blir koblet til Maria på strak arm. Og la meg kaste Colton skjerm opp på projektoren neste. [00:02:00] Så Colton registrerer enheten nå som en Myo koblet til denne kabelen. Og hva nå Marias kommer til å gjøre et øyeblikk er faktisk gå gjennom trinnene kalibrerings og lære programvaren hvordan hennes musklene svarer når hun gjøre visse forhåndsdefinerte gestures at programvaren forstår. Hvis du ønsker å gå i foran skjermen. OK, fortsette å prøve. [00:02:30] Colton: Gå som dette. Og sånn. Og helt til høyre. Gå tilbake. [00:02:35] DAVID J. MALAN: OK. Annet perspektiv. Det er ikke deg. Det er oss. [00:02:40] MARIA: OK. DAVID J. MALAN: Nei. La oss flytte den høyere opp, så det er nærmere albuen, eller enda strammere. OK. [00:02:52] Here we go. Dette ville være et godt tidspunkt for CS52X. Det vi går. [00:02:57] Veldig hyggelig. OK. Tommel til Pinky. [00:03:02] Veldig hyggelig. Spre fingrene. Good. Wave rett. Det er merkelig å vise du med venstre hand-- [00:03:17] Colton: Ja, det er merkelig. DAVID J. MALAN: Wave til høyre og gå videre. Spol frem til å hoppe over eller ved siden. Det er OK Wave rett. [00:03:25] MARIA: Jeg don't-- vente. [00:03:26] DAVID J. MALAN: Trenger du hjelp? [00:03:28] Colton: Så du kommer som dette. MARIA: Det er å snu andre ting, skjønt. Colton: Det er det. DAVID J. MALAN: Ja jeg vet ikke hvorfor det viser deg en leftie. Colton: Hvorfor ikke try-- bare prøve å gå som dette. [00:03:38] DAVID J. MALAN: Nei? Kanskje kommer armen ut litt rettere og gjøre det mer brå som dette. Ja, OK, kom igjen. [00:03:48] MARIA: Jeg beklager. DAVID J. MALAN: Det er ikke din feil. Colton: Det er greit. DAVID J. MALAN: All Right. Samt-- [00:03:56] MARIA: Skal vi hoppe over dette, da? DAVID J. MALAN: Ja, la oss la deg av kroken. Så hvis noen ønsker å gjøre en avsluttende prosjekt ved hjelp av denne cutting edge maskinvare, skjønner det kan bare ta litt tid å bli vant til. Og dette-- realiteten er dette er faktisk veldig blødning kanten. [00:04:10] Dette er det som kalles utviklersettet, som er ment å være i hovedsak en pre-release slik at folk kan gjøre akkurat dette-- kjempe med det, figur ut hvordan folks kropper fungerer med teknologien. Så hvis du vil etterpå, etter en forelesning, Vi kan la deg komme og ta en annen stikke på det. Men ellers, en runde med applaus, hvis vi kunne, for Maria for å komme videre opp. [00:04:26] MARIA: Takk. [00:04:28] DAVID J. MALAN: Takk. Vi vil henge seg på dette, men vi vil gi you-- hva med en stress ball her? Oh, og-- if-- ja, takk. OK. Så for den nysgjerrige, hvis du var ukjent med godt valg at vi har gjort det tidligere, en fantastisk TV viser at du bør absolutt være binge-watching på Netflix er denne her. [00:04:51] SPEAKER 1: Mine damer og herrer, en magiker ved navn Josh. [00:05:04] DAVID J. MALAN: Og tilsynelatende er det en ting å tekst meg under forelesning nå. Jeg blir fortalt at Maria hadde bursdag i går. Så gratulerer med dagen fra CS50 til Maria også. [00:05:18] Så du kanskje har lest i siste måned at dette herrene her, Steve Ballmer, som faktisk var klasse av 1977 ved høgskolen, nylig pensjonert for Microsoft. Han var en undervisning her, deretter et par år senere befant seg på Stanford Business School da han fikk en telefon ringe fra en venn av ham som hadde levd nede i gangen fra ham her på Harvard. Navnet på vennen var Bill Gates, og på den tiden, han prøvde å rekruttere Steve å være den første bedriften person, egentlig, på et lite selskap nevne Microsoft. [00:05:45] En lang historie kort, Steve ble til slutt vunnet over, sluttet Microsoft når de hadde bare 30 ansatte. Og etter den tid han pensjonert ganske nylig, Selskapet hadde 100.000 ansatte i løpet av de siste årene. Og så et nettsted kjent som The Verge utarbeidet denne hyllesten på video at vi trodde vi skulle delt som gir deg en følelse av hvor mye energi Steve bringer til en presentasjon han gir. [VIDEO PLAYBACK] -Microsoft Er som et fjerde barn. Barn gjør forlate huset. I dette tilfellet, antar jeg Jeg forlater huset. Hei Bill, whazzap? [00:06:23] -Wazzap? [00:06:24] -Hei, Wazzap? Vi har fått en enorm mulighet. Og Bill ga oss denne muligheten. Jeg vil takke Bill for det. Jeg vil du skal også. Innovasjonstakten ikke kommer til å avta. [00:06:42] Det kommer til å bli raskere og raskere. Det kan være noen konkurrenter som dessverre eliminert! [00:06:54] Jeg elsker dette selskapet. Ja! Jeg er en PC, og jeg elsker dette selskapet [00:07:08] Utviklere, utviklere, utviklere, utviklere, utviklere, utviklere, utviklere, utviklere. Ja! Webutviklere! [00:07:19] Webutviklere! Webutviklere! Lytt til hva annet du får uten ekstra kostnad! [00:07:28] Den MS-DOS Executive, en avtale kalender, et kort haug, en notatblokk, en klokke, et kontrollpanel. Og, kan du tro det? Reversie! [00:07:35] Brenne dem på CD! Legge dem til MSN! Du sende dem til venner! [00:07:40] Alle med ett klikk! En Microsoft, en strategi, en team-- fokusert, disiplinert, profesjonell, og ekspert i alt vi gjør. La meg bruke en linje fra en gammel film. [00:07:52] Relasjoner er som haier. De beveger seg fremover eller de dør. Jeg tror faktisk tech selskaper er de samme. [00:08:01] [END VIDEO PLAYBACK] DAVID J. MALAN: Så vi er så glad for å annonsere at Steve vil bli med oss her i CS50 neste onsdag på vanlig sted og tid her. Plass vil trolig være begrenset. Og så å bli med oss ​​i person, kan hodet i dag eller kort tid etterpå å cs50.harvard.edu/register. [00:08:22] Og vi vil følge opp med Tirsdag bekrefter flekker. Ser frem til at neste Onsdag under forelesning i CS50. Nå, i andre nyheter, jeg skjedd å kommer over dette i The Crimson bare den andre dagen. [00:08:34] Det viser seg at en av CS50 ansatte og minst en av CS50 studenter kjører for øyeblikket for UC president og visepresident, som brakte meg tilbake til mine egne dager tilbake da jeg mistet UC valget stort. Men silver lining i at jeg alltid fortelle historien er at en av de jeg er sikker mange grunner til at jeg mistet valget var en fullstendig mangel av et talent for å tale offentlig. Og så helt ærlig, det kjørte meg, at erfaring Jeg tror min junior året, å faktisk signere opp for Harvard Computer Society, som er gruppen på campus som innehar ulike tekniske samtaler og andre ting. Og jeg tok over undervisningen seminarer og derfor hadde en mulighet, en fantastisk mulighet, å begynne å jobbe på akkurat dette. Men også, jeg hadde en mulighet i løpet av denne erfaringen å lære meg alle mer HTML. Og så jeg utsatte i går kveld etter ser gjennom HTML basert nettsted Jeg gjorde i som 1997, '98, for min kampanje som ser ut som dette her. Jeg vet. [00:09:29] Because-- og selvfølgelig, varsel dette fantastisk design beslutning i 1998 eller whatnot. Det første du vil at brukerne å gjøre når du besøker nettstedet ditt er å måtte klikke en annen link bare å skrive inn ditt nettsted her med munken bak som en innhyllet gardin der tydeligvis min kampanje plattformen var. Og dette er alt du får i dag er bare en skjermdump. Men jeg leste gjennom, som, kampanjeplakater går kveld og min plattform. [00:09:50] Og jeg var så sint på den tiden. Min plattform var-- det var interessant. Så jeg har roet seg siden da. Men en dag, vil jeg løpe igjen, og forhåpentligvis bedre denne gangen. [00:10:03] Så HTML, at språket som jeg har gjort at in-- du snart gjøre mye mer-- er noe vi har vært snakker om i det siste og i stor grad å ta for gitt nå at vi har gått videre til andre språk. Men la oss ta en pause for et øyeblikk og sette noen av disse tingene i sammenheng. Så i en setning, hva er HTML? [00:10:18] Eller, hva som er brukt for? Anyone? Ja. [00:10:20] PUBLIKUM: Markup for nettsteder. DAVID J. MALAN: Markup for nettstedet. Så det er et kodespråk som kan du strukturere en nettside. Header går opp her, tittel går her, går kroppen her. Dette er fet skrift, dette er italics-- den slags detalj. [00:10:33] OK, bra. Så CSS lar you-- og jeg tok noen friheter det med fet vendte og kursiv fordi som er bedre gjennomført med dette. CSS er-- hva? Sier i en setning. Noen i det hele tatt. Yeah. [00:10:46] Målgruppe: Utsmykninger og ting, som hvordan å designe den. DAVID J. MALAN: OK, bra. Pynt som lar deg å designe det eller stilisere det med ting som fet skrift og kursiv og farger og også flere fine kornet posisjonering av elementene. Den lar liksom du tar ting de siste mil slik at hvis, for eksempel, i Pset7, har du kanskje lagt merke til på din porteføljen siden hvis du er på dette punktet allerede som en standardtabellen som du gjøre for å vise brukerens lager beholdninger og kontanter ser sannsynligvis ganske heslig som standard med noe hvitt område. Alt er slags crammed sammen i rader og kolonner. [00:11:18] Vel, med litt CSS, som du kanskje skjønner, du faktisk kan finpusse det og gjøre det noe mye mer kjent og mye penere å se på. Så CSS handler om stilisering av nettsteder. Men da vi introduserte enda en språk, PHP, som lar oss gjøre hva? [00:11:36] La oss bare gjøre hva? Noen. Fikk å våge utenfor de første par rader. Yeah. [00:11:40] PUBLIKUM: generere dynamisk innhold. DAVID J. MALAN: Perfect. Generere dynamisk innhold. Og du kan gjøre dette i en rekke språk. Vi tilfeldigvis bruke PHP fordi det er delvis så lik C syntaks. [00:11:50] Men PHP gjør nettopp det. Det kan du dynamisk generere utgang. Og noen av at produksjonen kan være HTML, som vi har vanligvis gjort. Og det er også, fordi det er et programmeringsspråk, er mekanismen via som Vi kan snakke med databaser. [00:12:03] Og vi kan lage spørringer til andre servere som Yahoos og programma gjøre noe virkelig at du ellers ønsker å tvinge en datamaskin til å gjøre. Så PHP lar oss starte dynamisk gi ut innhold. Så ved denne logikken, hadde jeg ikke en dynamisk nettside i 1998. [00:12:16] Det var bare en statisk nettside. Min innhold måtte endres etter manuelt med gedit eller noen tilsvarende. Men PHP er hva vi brukte eller kunne ha brukt snarere for noe som Frosh direktemeldinger nettside, som skulle ta registreringer og administrere en liste over users-- ting som faktisk endring over gang, selv om vi skje å bruke Perl, en annen språket på den tiden. [00:12:35] Og så til slutt, vi introduserte SQL-- Structured Query Language. Så enda et annet språk som brukes for hva? Brukes til hva? Kan vi våge slight-- OK, vi kommer ikke til å få mye lenger enn orkesteret her. PUBLIKUM: Det er en protokoll brukes til å snakke med databaser. DAVID J. MALAN: En protokoll brukes til å snakke med databaser. La meg tweak. Det er et naturlig språk som brukes å snakke med databases-- velger og setter inn og sletter og oppdateringer og faktisk enda flere funksjoner som vi har ikke engang dykket inn, men det kan være lurt å explore-- ha å lete etter, si, et avsluttende prosjekt. Så det er disse ulike delene. [00:13:09] Og forhåpentligvis Pset7, selv om spesifikasjonen er ganske lang, det er bevisst lang å gå deg gjennom hvordan disse tingene kan alle skrives sammen. Nå på mandag, vi introdusert vår siste språk at vi vil formelt innføre i den course-- det vil Javascript. Dette, som PHP, er en tolket språk. [00:13:25] Men en viktig forskjell Jeg foreslo på mandag er at mens PHP utfører eller blir tolket på serveren, som i dette tilfellet er den CS50 apparatet, eller kan være noen kommersiell web server på internett, Java generelt er et språk som kjører klientsiden ikke server-siden, så i nettleseren. Som er å si, akkurat som da jeg åpnet opp Facebook kildekoden og fant alle av disse JS-filer, implikasjonen var at når du besøker Facebook eller mest nettsteder i disse dager, får du ikke bare HTML, ikke bare CSS, men en hel haug med Javascript kode ofte i form av JS-filer. Og så er det den browser-- din egen Mac eller PC-- som utfører den koden. [00:14:03] Men nettleseren din utfører det. Du kan tenke i form av en sandkasse. Slik at Javascript-kode ikke bør være i stand til å slette filer på datamaskinen din. Det bør ikke være i stand til å sende e-post på dine vegne. Nettleseren slags begrenser hva du kan gjøre med det. [00:14:17] Så i den forstand, er det litt mindre kraftig, kanskje, enn C. Men Java kan, som en side, skal brukes på serveren, om vi får en tendens til ikke å snakke om det i den konteksten. Så nå la oss binde disse sammen. En uke pluss siden presenterte vi noen HTML på left-- super kjedelig nettside. [00:14:34] Bare sier hei verden. Og så jeg foreslått på rett vi kan slags stjele ideer fra vår diskusjon av datastrukturer i C og tenke på hvordan dette hierarkiske markup språk i venstre kunne trekkes eller implementert i minnet som en faktisk trestruktur med noder og pekere og slike detaljer. På høyre, kaller vi at en DOM-- Document Objekt Model-- som er bare en fancy måte å si tre. [00:14:56] Nå, hvorfor er dette nyttig å Tenk på det på denne måten? Fordi nå med Javascript, fordi vi har kode som får spille i denne miljø, selve HTML som er blitt sendt til nettleseren allerede, og har allerede blitt lastet inn i minnet ved Nettleseren inn i et tre i din datamaskins RAM som dette, kan vi bruke Java å faktisk krysse eller gå eller søk eller endre det DOM treet men vi ønsker. Så faktisk, hvis du tror om facebook.com, hvis du bruker chat-funksjon, hvis du bruk Gmail og Gchat funksjonen, noe der du har meldinger som kommer igjen og igjen og igjen, disse meldingene er trolig, lignende, LI tag, listeelement tags, kanskje. [00:15:35] Eller kanskje de er bare divs som holder vises hver gang du får en direktemelding. Og så det betyr bare hva Facebook eller Google gjør er helst du få en meldingen fra serveren, de bruker antakelig Java å bare legge til en annen node til dette tree-- annen node til dette tre som deretter visuelt bare ser som en ny linje med tekst på skjermen. Men de setter inn inn i denne datastruktur. [00:15:57] Så i klasser som CS124 og andre, vil du faktisk skrive mer kode mot datastrukturer som dette. Men for nå i Javascript, får vi bare anta vi får all denne funksjonaliteten gratis fra språket selv. Så la oss se på et eksempel. [00:16:09] La meg åpne opp en fil som heter form.html. Det er super enkelt. Det bare ser slik ut. [00:16:15] Ingen CSS, uten tanke for estetikk. Det er rent funksjonelle og tilsynelatende jeg er ber om en e-post, passord, passordet på nytt, og deretter en sjekk å godta noen vilkår og betingelser. Hva kildekoden for dette ser ut som er trolig noe du kan gjette med en Litt av tanken nå. Jeg har fått en form tag her. [00:16:32] En handling er tilsynelatende kommer til å gå til en fil som heter register.php. Metoden jeg kommer til å bruke er å få. Og så har jeg fått en tekst feltet som heter e-post. [00:16:40] Jeg har fått et passordfelt hvis navn er passord. Jeg har fått en annen passordfeltet hvis navn er noe vilkårlig bekreftelse. Det er bare en annen HTTP parameter. [00:16:49] Og så har vi vi ikke brukt disse unntatt siden Frosh direktemeldinger demo i class-- en avkrysningsboks som er skriver du bare lik sjekk. Og jeg vil kalle den avtalen. Så jeg har på en måte tilfeldig, men beleilig heter disse feltene. Så det nå når dette skjemaet blir innsendt, la oss se hva som skjer. Hvis jeg gjør malan@harvard.edu, Jeg skal gjøre et passord for rød. Jeg skal gjøre et passord av ingenting. La oss ikke samarbeide. [00:17:10] Og jeg vil ikke merke av i boksen. La meg Klikk Register. Og den sier, hm, du er registrert. Ikke egentlig. [00:17:16] Men nettadressen endret. Så dette skjemaet var tydelig lov å sende til register.php. Men antagelig, bør jeg være fange noen av disse feilene. Nå, i Pset7 og noen av våre forelesnings eksempler, vi ville vanligvis skrive ut en stor rød feilmelding her sier, mangler navn, eller mangler passord. Vi har gjort det før, og vi har gjort server side feildeteksjon. [00:17:37] Men mange nettsteder i disse dager gjøre klientsiden feildeteksjon hvor nettadressen ikke endres. Hele siden oppdateres ikke. Du får umiddelbar tilbakemelding fra nettleseren. Noe går kanskje rødt. [00:17:48] Kanskje du får en pop up. Men du trenger ikke kaste bort tid på å sende til serveren data som er ufullstendig. Så la oss se hvordan vi kan oppnå den funksjonen også. [00:17:56] La meg gå til form1.html, som ser den samme. Men hvis denne gang jeg gjør malan@harvard.edu og jeg skriver crimson og jeg ikke samarbeider lenger men klikk Register, merke nå. Det er ikke den mest sexy løsning. Jeg har i hvert fall fanget opp denne feilen. Og jeg har brukt varselet funksjon i JavaScript-- som vi bare bruker i klassen. Generelt bør du ikke bruke denne fordi det kan raskt komme seg ut av kontroll. Men passord ikke sams er feilen. [00:18:19] La meg gå videre og klikk på OK. Men hva nøkkelen takeaway her er at nettadressen ikke endret. Så jeg har ikke brydd sløse serverens tid på å spørre det et spørsmål som jeg kunne ha funnet ut svaret til meg selv. [00:18:30] Og brukeren, selv om vært snakket om dette lenger enn brukerens kommer til å tenke på dette, kommer til å ha umiddelbar tilbakemelding. Det er ingen ventetid med nettverkstilkoblingen. Så la oss se på denne kildekoden. [00:18:40] Form1.html utseende strukturelt ligner her oppe. Skjemaet er faktisk den samme. Men la oss se hva jeg gjorde her nede. Og det er forskjellige måter å gjøre dette. Og jeg har gjort det meste rett etterfølger, men ikke mest elegante måten enda. Jeg har en script tag. Jeg så ring document.getElementById ('registrering'). Og jeg lagrer denne verdien i form, en variabel. [00:19:04] Så hva har jeg gjort? Du kan tenke på document.getElementById som en spesiell funksjon som Java gir deg som bokstavelig talt hendene du en pekeren til en av nodene eller rektangler i dette treet. Så nå det er det skjemaet vårt variabel i Javascript er faktisk peker på. [00:19:21] Så nå syntaksen er forskjellig fra C. Men vi gjør et par ting her. One, er dette en litt merkelig ser, absolutt versus C. Men se på linje 35. Så på venstre form.onsubmit. Husker at onsubmit er som et felt i en struct. Hvis du tenker på formen variabel er bare å være en C struct, det kan ha noen felt. [00:19:42] Tilbake i dag, hadde vi studenter navn, IDer, hus, de slags felt. Bare tenk på onsubmit som et annet felt. Men det er et spesielt felt fordi Nettleseren er forhåndsprogrammert til å forvente .onsubmit å ikke være en verdi som et tall eller streng, men faktisk å være en funksjon eller adressen til en funksjon i datamaskinens minne. [00:20:02] Og ja, det er det dette søkeordet her gjør. Dette sier, gi meg en ny funksjon. Men hva er dens navn kommer til å være, tydeligvis? [00:20:09] Tenker tilbake til mandag. Hva er navnet på denne funksjon basert på denne syntaksen? Nei, jeg mener, det er klart no name associated-- sikkert ikke i det jeg har uthevet her. [00:20:21] Men det er faktisk OK. Dette er en anonym funksjon, eller en lambda funksjon som noen kanskje kaller det. Og det betyr bare det er fortsatt en funksjon. Det er bare, du kan ikke kalle den ved navn. Men det er OK. Fordi igjen, har nettleseren vært forhåndsprogrammert av selskaper som Google eller Microsoft eller Mozilla eller andre til bare vet at hvis .onsubmit feltet innsiden av en form element har de verdi, behandle det som en function-- en funksjonspeker, om man vil. Og kaller det når skjemaet er sendt. [00:20:46] Så hva koden skal bli henrettet når skjemaet er sendt inn? Angivelig, alt innsiden av klammeparentes. Og dette er bare stilistisk. [00:20:53] Du kan gjøre dette som vi pleier å gjøre i CS50. Men i Javascript, folk flest en tendens til å holde den på samme linje bare fordi det tydeligere er forbundet med dette søkeordet funksjon. Så nå hva gjør jeg? [00:21:03] Hvis form.email.value lik equals tom streng eller ingenting, her et varsel der jeg kommer til å si, du må oppgi din e-postadresse, og deretter return false. Og det er at avkastningen falsk som hindrer skjemaet blir sendt inn. I mellomtiden, hvis passordet verdien er blank, jeg kommer til å kjefte på brukeren og si, du må oppgi et passord. [00:21:21] Imens ting blir litt mer avansert her. Hvis form.password.value ikke lik form.confirmation.value, det andre feltet, kjefte på brukeren om at passord samsvarer ikke som de gjorde ikke et øyeblikk siden. Og så dette er en litt mer sexy fordi jeg vet jeg visste konseptuelt at sjekket er en avmerkingsboks navn. [00:21:40] Så jeg kan bare bruke et utrops poeng å si hvis sjekken ikke checked-- det er boolsk verdi, sant eller false-- Jeg skal kjefte på brukeren av den grunn. Ellers, hvis vi får gjennom alle disse betingelser, la oss bare returnere true. La skjemaet sendes inn. Og dette vil da skje. [00:21:56] La oss skrive inn Crimson. La oss sjekke boksen, klikker du på Registrer. Og nå går jeg gjennom til bestemmelsesstedet. Nå er det ingen database der. Det er ikke noe interessant i register.php. Jeg trengte noe å faktisk snakke med. Så la meg pause, her. Eventuelle spørsmål om hva vi nettopp har gjort eller hva noen av denne nye syntaksen er? OK, ja? [00:22:17] PUBLIKUM: Så noen avkrysnings er automatisk en boolsk. Du trenger ikke å erklære det sånn. [00:22:21] DAVID J. MALAN: Riktig. Enhver avkrysnings som er sendt til deg fra et HTML-skjema til Javascript-koden vil bli behandlet, ja, som en Boolsk value-- sant eller usant. Det er et godt spørsmål. Mens de andre verdiene, av Selvfølgelig har vært tekst, AKA strenger. [00:22:36] Greit, så la meg spole litt lenger. Hva var hele poenget med dette? Bare for å være klar. Som vi allerede vet, selv fra Pset7 og selv fra forrige ukes forelesning eksempler, at vi selvsagt kan sjekke $ _GET $ _POST Se om brukeren gi oss en tom verdi. Husk den tomme funksjon i PHP. [00:22:54] Så bare for å være klar, hva som er en grunn vi kan også ønsker å gjøre dette feilsjekking innsiden av nettleseren? Hva er motivasjonen her? Yeah. [00:23:06] PUBLIKUM: Raskere, og du ikke gjør det sende ubrukelig data til serveren. DAVID J. MALAN: Good. Det er raskere. Du sender ikke ubrukelig data til serveren. [00:23:12] Så du får tilbake en mer umiddelbar respons. Og samlet, brukeren erfaring er bedre. Tenk på alternativet. [00:23:17] Hvis for Gmail-- og var er tilfelle for mange år siden. Tenk deg at du har fått en ny e-post Gmail konto, men den eneste vei gjennom for å se det er å, som, laste hele siden. Eller antar du klikker på en kobling til å lese en e-post. [00:23:29] Alt har å lesse så at du kan se e-posten. Eller Facebook-- du får en chat-melding. Du ser det ikke før du laster siden eller klikk noen kobling. [00:23:36] Liker, dette ville være en fryktelig irriterende brukeropplevelse. Og dette er hva det var, tydelig, tilbake når jeg kjørte for UC og nettet var mye mindre dynamisk og Java var ikke så populært som det er nå. Og ting blir mye mer dynamisk og mye mer klientsiden i den forstand. [00:23:49] Men det er en hake her, og dette er slags en irriterende fikser. Bare fordi du legger til klientsiden deteksjon som dette betyr ikke du kan eller bør forlate server side deteksjon. Du i hovedsak ønsker å sette ditt Feilkontroll på begge steder. Fordi det var en av leksjonen lært fra artikkelen jeg leste noen utdrag fra med denne dumme CMS system-- Content Management System-- som var implementere sitt godkjenningssystem, sin innlogging via hvilken mekanisme? Javascript. [00:24:20] PUBLIKUM: Javascript. DAVID J. MALAN: Javascript, nøyaktig, ikke sant? Det var ved hjelp av Javascript. Og bokstavelig talt, dere har spilt litt trolig med Chrome Inspector. Og hvis jeg kan finne det, inspisere element. [00:24:30] La meg gå over til å gjøre alle Chrome alternativer. Og dette er hvor lett det er å deaktivere Javascript i nettleseren. Sjekk, ikke mer Script. [00:24:38] Så i rettferdighet, mye av nettet i disse dager er bare kommer til å bryte fordi Gmail og andre sites-- Facebook-- anta at Javascript er aktivert. Men hvis du gjør noe dumt som bare validere brukere innspill og sjekke det for feil på klientsiden, en motstander kan enkelt gjøre dette. Og så enda smartere motstander som dere nå kunne bruke Telnet eller Curl eller bare kommandolinjekommandoer og faktisk sende meldinger til serveren som på samme måte er ikke feil kontrollert. [00:25:05] Så dette er mer av en brukergrensesnitt avgjørelse enn det er en faktisk teknisk improvement-- implementere noe klientsiden som dette. Så nå et raskt blikk, men da Jeg skal utsette til den elektroniske gange gjennom for denne. I skjemaet to, vi faktisk gikk gjennom og ryddet opp koden litt. Men la meg utsette til en av videoene vil vi trolig embed i Pset8 som bare viser deg en lignende syntaks bruke et bibliotek kalt jQuery, som er en super, super populært bibliotek i Javascript som oppriktig folk flest bare bruke disse dager og selv forvirre som vesen Java selv. [00:25:37] Og det har en tendens til å involvere noen dollartegn og søkeord som dokument i parentes her. Men igjen, la meg utsette til noen tregere tutorials online heller enn å bli bundet opp i bare syntaks. La oss gå videre til noe litt kjøligere i form av anvendelser av dette. [00:25:50] Så spesielt, la meg gå videre og åpne opp dette her. Kom igjen. Det vi går. [00:25:59] La meg åpne opp dette bildet her. Unødvendig komplisert ser, men det beskriver en teknikk som kalles AJAX-- Asynkron Javascript og XML, der X for XML er faktisk ikke lenger virkelig brukes. Det har en tendens til å bruke noe annet kalt JSON. [00:26:13] Men her er hvordan noe sånt Google Maps eller Google Earth fungerer. La oss prøve dette på sparket, faktisk. La meg gå videre og åpne opp Chrome nettleseren min. [00:26:21] Og la meg gå inn, si, maps.google.com. Og faktisk, hvis du er gammel nok til å huske hva, lignende, var MapQuest som tilbake i dag, og kanskje de fortsatt jobber som dette. Når du brukte for å søke etter something-- 33 Oxford Street, Cambridge, Mass, la oss gjøre dette-- deg ville faktisk, hvis du ønsket å panorere opp og ned, venstre og høyre, du ville se ut som en stor pil på toppen, og det ville vise deg en annen rammen av kartet her oppe. Eller ville du klikke venstre og du ville gå over her, eller en annen klikk og du ville gå over her. Men i stedet disse dager, vi selvfølgelig bare ta for gitt at vi kan gå rundt Cambridge ganske raskt bare ved å klikke og dra. Men legg merke til det er noen glitches. [00:26:59] Hvis jeg gjør dette raskt nok, hva synes å skje som jeg drar litt for fort til datamaskinen for å holde opp? Hva ser du? Yeah. [00:27:07] PUBLIKUM: Pikslene ikke oppdatere. DAVID J. MALAN: The piksler ikke oppdatere. Det er actually-- og du kunne se dette, faktisk, hvis du ser på nettet og pause dette, eller faktisk bremser ned ting for once-- vil du se at det er fliser, firkanter eller rektangler som mangler fra kartet før et brøkdels sekund senere, mer data, flere bilder faktisk vises på skjermen. Og faktisk, hvis vi gjør dette ved å se opp Chrome's-- la oss si, Chrome-- la oss se. Vi kan ikke gjøre det. [00:27:31] Oh, whoops. La oss åpne opp maps.google.com. La meg gjøre vinduet større igjen. [00:27:36] Gå tilbake til 33 Oxford Street. Hva var nettsiden jeg var på nylig? Jeg hadde dette, som, private rant til meg selv at jeg hadde da direktemelding noen venn som var på nettet som ønsket å høre det. Det er noen nettside. Jeg tror det er Comcast-- så en veldig stor amerikansk ISP. Du kan, når du registrerer deg for ny kabel modem eller kabel-TV-tjenesten, de har en form som meget rimelig der de ber deg for din adresse. Og har denne fantastiske funksjon som heter autofullfør, som Google, begynner det å fylle i svaret på spørsmålet ditt. [00:28:04] Problemet er, de gjør autofullfør på de første tingene som du skriver. Så hvis du begynner å skrive i 33, det vil vise deg bokstavelig talt alle hus i Amerika som starter med tallet 33 før du fortsetter å forventer du å skrive mer. Så hvis du skriver 33 Oxford, så det viser deg hver gate i Amerika som har 33 Oxford i sitt navn, uavhengig av byen at du er i. [00:28:25] Og så du fortsetter å skrive. Og til slutt, innser det at de ikke gjør det tilbyr service til ditt hjem i Cambridge eller noe sånt. Men poenget er at dette er den mest asinine implementering av auto fullføre noensinne. [00:28:34] Og jeg bare gå av på denne tangent igjen. Men det finnes gode måter å bruke Javascript og dårlige måter. Og det er ikke nødvendigvis det beste. [00:28:40] Men poenget her, før dette tirade, var å åpne opp verktøy her nede og åpne opp utviklerverktøy, som vi har oppfordret før, og for å se nettverk Kategorien som jeg klikker veldig fort. Og legg merke til en hel haug av få forespørsler skjedde. Alt dette skjedde siden jeg dro. [00:28:57] Og mest sannsynlig, ja mange av disse radene Nå er bildestrek JPEG MIME-typer eller innholdstyper. Det er fordi det krom gjør hver gang jeg klikker og drar, klikk og dra, er det er å realisere, oh, jeg trenger å gå spør Google for flis på kartet som er over her, raskt laste den ned via HTTP, og deretter legge den til den såkalte DOM til nettlesere i minnet treet representasjon, slik at brukeren, meg, ser at oppdatert flis. Og dette er på grunn av en teknikk kalt AJAX. Tilbake i dag, det virkelig var tilfellet at hvis du ønsket å endre hva som skjer på skjermen, du må klikke opp, ned, venstre, høyre. Og så en ny side ville åpne. Men i disse dager, alt er mer dynamisk. Det skjer på den måten vi mennesker ville håper det faktisk ville interaktivt. Og det oppnår dette ved i form av en teknikk som kalles AJAX, som er kanskje best forklares med et eksempel. Først, la meg gå videre og åpne opp en fil kalt quote.php i dagens fordeling kode. [00:29:53] Og så la meg gjøre symbol-- whoops. La meg gjøre symbol = GOOG for bare noen lager. Eller faktisk, la oss gjøre det en fra PSet GRATIS. Enter. [00:30:05] Og nå merke til hva jeg får tilbake. Så dette er en virkelig kort PHP-fil som jeg skrev at bare låner kode fra Pset7 oppslagsfunksjon og spytter ut ved hjelp av denne krøllete brace og sitater og tykktarm notasjon, tilsynelatende, dagens lager prisen for selskap som du passerer inn via get. Så dette er annerledes fra det meste av det vi har gjort i at varsel er jeg bokstavelig talt spytter ut det ser ut som Javascript-kode. [00:30:27] Faktisk er dette en Javascript-objekt. Faktisk bare å være mer tydelig, Javascript Object Notation-- JSON-- er bare en fancy måte å si at du kan representere data i Javascript mye som du kan i PHP bruke nøkkel verdi-par. Så hvis jeg ønsket å erklære en variabel i Javascript å representerer Zamyla, for instance-- en struct for Zamyla-- og vi kaller det student, denne variabelen. Hennes ID er en, huset er Winthrop, og navn er Zamyla. [00:30:53] Men jeg kan også ha en rekke objekter. Så hvis jeg faktisk ønsket å ha en matrise i Javascript som inneholder flere slike objekter, dette tid som representerer ansatte, Jeg kan ha disse tre biter av kode tilbake til rygg mot rygg for disse tre tidligere ansatte. Så syntaksen, pen lik both-- til PHP. Men dette er spesielt Script. Det er objekt notasjon. Så hva er dette nyttig for? [00:31:17] Hvis jeg skrive kode som spytter ut JSON-- Javascript Object Notation-- ting som ser ut som dette, eller ting som ser ut som Zamyla struktur, Jeg kan faktisk bruke denne i programmer skriver jeg. La meg gå til ajax0.html. Og dette også-- ikke mye trodde gitt til estetikk. Men se hva som skjer. [00:31:34] La meg gå videre og skrive fritt her. Klikk få tilbud. Og legg merke til nettadressen er ikke endret. Men jeg fikk en pop up med tilsynelatende dagens penny stock pris på $ 0,15. Så det er ikke så ille. Men forskjellen er at en eller annen måte, disse dataene kom tilbake til meg direkte. Men la oss ta et skritt mot noe mer kjent. I versjon en av denne, la meg skriv fri igjen, klikker du på Hent sitat, og now-- oh, dette var faktisk jQuery versjonen. Så la me-- jeg gjorde ikke spole fremover ganske langt nok. La meg gå til versjon to, som er der jeg ønsket. Legg merke til hva jeg har gjort her. Jeg har en web page-- en super enkel versjon av en nettside du kan bruke i dag med et tekstfelt her gratis, og tilsynelatende bare tekst. [00:32:14] Dette er ikke en form her, tydeligvis. Men hvis jeg klikker får sitat, merke min nettside er i ferd med å endre seg som om jeg akkurat fått en ny direktemelding eller som om jeg nettopp flyttet kart og nødvendig for å få mer data lagt dynamisk til nettsiden uten URL skiftende og brukeren opplevelse å bli avbrutt. Faktisk, jeg er fortsatt på nøyaktig samme sted-- ajax2.html. [00:32:35] Så la oss se bare på dette eksempelet og se hvordan dette skjer. La meg gå inn ajax2.html. Og legg merke til formen først. [00:32:44] Ned her, jeg snu off bilen fullstendig. Noen ganger blir det irriterende hvis nettleseren prøver å vise deg hele historien. Så du kan gjøre det i HTML ved sier bare auto full av. [00:32:53] Jeg har gitt dette tekstfeltet en symbol-- snarere en ID på symbol. Og nå, dette er en interessant funksjon. Vi har ikke snakket om span, men du kan tenke på det som et ledd tag eller div tag. Det er det som kalles en in-line element, som betyr at du ikke vil få et avsnitt brekke over og under det. Det er bare kommer til å bo i-linje uten treffer tilsvarende inn. Så jeg har gitt denne del av HTML skal fastsettes en unik identifikator at jeg vilkårlig kalt pris. Og jeg har en Send-knappen. [00:33:21] Fordi nå opp her-- og dette er faktisk super utrolig hvor lite kode du kan skrive å gjøre relativt ryddig things-- Legg merke til hva jeg har gjort her oppe hvis jeg bla opp til hodet på denne siden. Jeg har tatt med først i hodet mitt et script tag som faktisk refererer til en Javascript-filen et annet sted. Dette er fra organisasjonen som skriver jQuery, og dette er bare å gi deg den nyeste versjon av deres jQuery biblioteket. [00:33:42] Så dette er typen som skarp inkludere i C eller krever i PHP. Du bruker script tag med en kilde attributt. Men nå er min egen kode er kommer til å være rett i her. [00:33:52] Merker jeg har en funksjon som heter Quotes. Og det ser litt kryptisk ved første øyekast. Men la oss erte dette fra hverandre. Gi meg en variabel kalt URL. Tildele det bokstavelig talt denne strengen. Så, enkle sitater, doble anførselstegn i Java bare gir meg en streng. Hva gjør pluss gjøre? Sammenkobling. [00:34:08] Så dette nå er jQuery syntaks som tar litt tid å bli vant til. Men dette betyr bare gå få meg DOM node som unik identifikator er symbol. Hashtag det betyr unik identifikator symbol. [00:34:21] Dollartegnet i Parenteser bare bety, pakk dette i jQuery en slags hemmelig saus slik du får mer funksjonalitet. Og så .val er tilsynelatende en funksjon, eller som vi sier nå, en fremgangsmåte innsiden av denne noden som bare gir deg verdi. Så kort sagt, stygg og forvirrende da dette ser ut ved første øyekast, Dette betyr bare får med brukeren skrev i, sette den på slutten av strengen ved å lenke sammen den. Det er alt. [00:34:43] Så nå, siste tre linjer. Du kan presse en masse funksjonalitet ut av tre linjer. Denne dollartegn, som en side, er bare et kallenavn for en spesiell global variabel kalt bokstavelig jQuery. [00:34:55] Dollartegn bare ser kult. Så jQuery samfunnet bare slags brukte det som sitt spesialsymbol. Det betyr ikke hva det betyr i PHP. I Javascript, er dollartegn akkurat som en bokstav i alfabetet eller et tall for en variabel. [00:35:07] Du kan bare ha det som navnet. Bare ser kult. Så samfunnet vedtatt det som kallenavn for sitt eget bibliotek kalt jQuery. [00:35:13] Og det er super populære. Så får JSON er akkurat det. Det er en funksjon som folk på jQuery skrev som får JSON fra en server-- Javascript Object Notation. Fra hva URL går det for å få denne informasjonen? Angivelig fra denne nettadressen her. [00:35:27] Og hva skal leseren gjøre som snart det blir tilbake dette svaret? Og dette er den magiske AJAX, så å speak-- Asynchronous Javascript XML. Det er vanskelig å se med et slikt enkelt eksempel som vi hadde her. [00:35:41] Men dette var asynkron i den forstand at min kode når henrettet sendte en melding til serveren for å gå få meg noen JSON. Og det skjedde super rask at jeg fikk et svar. Men det som er interessant er at denne kodelinje ikke henge min datamaskin. [00:35:55] Jeg fikk ikke se en spinnende ikon. Jeg mistet ikke evne til å flytte musen. Nettleseren min var faktisk helt greit. [00:36:01] Fordi måten Java håndterer respons fra serveren er som følger. Du registrerer deg hva du vil kalle en tilbakeringingsfunksjon som betyr bare, hei, Script. Så snart serveren svarer med JSON, vennligst ring dette anonym funksjon. [00:36:18] Og vær så snill gått inn i denne funksjonen uansett streng serveren spytte ut som et argument kalt data. Så med andre, ord, hvis Jeg monterer dynamisk en URL quote.php passerer i dette symbol som GRATIS eller GOOG eller whatnot, Jeg deretter fortelle Java gå får denne nettadressen. Husk at nettleseren kommer til å returnere noe som ser ut som vi så earlier-- dette. [00:36:42] Og hva det andre argumentet her for å få JSON sier er kalle denne funksjonen når serveren kommer tilbake enten det er 10 millisekunder fra nå eller 10 sekunder fra nå. Og så snart du gjør det, legge prisen til siden. Denne syntaksen her bare betyr gå får noden fra treet hvis unike identifikator er price-- at span vi så tidligere. [00:37:01] Denne metoden kalles HTML bare sier, gå erstatte HTML som er der med data.price. Hva er data.price? Vel, leseren, husker, viste meg dette kommer tilbake. Så dette er data. [00:37:14] Og så er det litt kryptisk å se komma her. Men faktisk, la meg gjøre dette. La meg bare lime dette virkelig fort inn i gedit og vise dette som vi viste Zamyla struktur tidligere. [00:37:27] Hva serveren sender tilbake en lite objekt som ser ut som dette. Og så data.price er bare gi meg 0,1515. Så mange bevegelige deler her på en gang. [00:37:39] Men de viktigste takeaways er at vi har denne muligheten for å gjøre ekstra HTTP forespørsler ved hjelp av Javascript uten å måtte laste siden på nytt. Og da kan vi faktisk endre nettsiden på fly. Og det viser seg at Javascript og andre språk kan brukes nå ikke bare å mutere nettsider, men å faktisk skrive programvare i en faktisk datamaskin, ikke bare begrenset til Chrome eller lignende. [00:38:00] Faktisk if-- Colton, ville du gjerne bli med oss ​​tilbake her oppe med lab-kode, og Chang også? La oss gå videre, etter å ha snakket om anonyme funksjoner og tilbakeanrop og virkelig friste skjebnen her med en live demo med blødning edge-teknologi, en av disse Elite Motion enheter. Nå, denne enheten, husker, er en liten USB-enhet samt at-- det er beautiful-- som plugges inn i USB-portene. [00:38:25] Og så gir innspill i form av menneskelige bevegelser ved å oppdage ved hjelp av infrarøde stråler, hovedsak, bevegelser fra armen. Så mens det Maria prøvde på før var muskuløs, faktisk følelsen hva som endring armen din, er dette infrarød basert. Så den ser etter bevegelser innen slags sfære av en fot eller så av selve enheten. [00:38:46] Så hvorfor ikke jeg ta en stikke på dette først? Og la oss gå videre og kaste deg opp på overhead her. Så la oss sette Colton laptop opp her. Vi har fått Andrew på TV. Og hva ville du at jeg skal gjøre først? [00:39:00] Colton: Gå videre og bare legger hendene over denne fyren og du vil se noen fantastiske glitter. [00:39:04] DAVID J. MALAN: Very nice. Dette er alt skjer i sanntid. OK. All right, og jepp. Så hyggelig. Greit, hva annet kan vi gjøre? [00:39:15] Colton: Gå til neste skjerm og se. [00:39:17] DAVID J. MALAN: All right. [00:39:19] Colton: En morsom liten lek hvor du får til å lage roboter. [00:39:21] DAVID J. MALAN: Greit, så dette er falske hender som viser meg hva jeg skal gjøre. Colton: Ja Så sett i gang og hente en av blokkene og sette den på toppen av at robot kropp. DAVID J. MALAN: Åh, det er min hånd. Oh. OK, bedårende. Vent litt, OK. Det vi går. [00:39:41] COLTON: Jeg gjorde en på ulykke. [00:39:43] DAVID J. MALAN: OK, jeg får denne fyren. Faen! Da vi øvde denne siste natt, vet du hva dette devolved inn? [00:39:51] Som dette. OK. Neste? [00:39:55] COLTON: Sure. [00:39:56] DAVID J. MALAN: All right, og det er en tredje. OK. Colton: Og i denne, får du to-- DAVID J. MALAN: Oh, denne er vakker. Colton: --yeah, plukke fra hverandre denne blomsten. DAVID J. MALAN: OK. Nei? Savnet. [00:40:14] Colton: Åh, det du går. [00:40:15] DAVID J. MALAN: Ah, se på det. Veldig hyggelig. Vel, hvorfor ikke 'vi tar ut en frivillig her som ønsker å komme videre opp. Hva med rett der i grønt, er det? [00:40:27] Greit, og la oss have-- stedet for å gjøre det, noen av dere kanskje vet dette spillet her-- kutte tauet, kanskje? La oss se. Vi har våre briller på over her? [00:40:37] OK. Takk. Hva heter du? [00:40:39] PUBLIKUM: Laura. [00:40:40] DAVID J. MALAN: Laura? Hyggelig å se. Hvis du ikke har noe imot å sette Google Glass i løpet av brillene dine. Dette er Colton. [00:40:46] Colton: Hei. Hyggelig å møte deg. [00:40:48] DAVID J. MALAN: OK, kom igjen rundt. Greit, så hva du kommer til å gjøre her, etter å ha spilt dette før, er satt hånden over Leap Motion her. Og nå pilen skal flytte. Oh, nope. [00:40:57] PUBLIKUM: Nei. [00:40:58] DAVID J. MALAN: Vi ønsker ikke å slutte enda. OK, vent. Over her. Så oppdager du holder din finger over noe, musen begynner å bli grønne, som er hvordan du klikker. [00:41:06] Så sveve over Play. Og bare én finger er fine. Og nå klikke på den lille grønne fyren til venstre. Og nå holder til det fyller opp grønt. Good. Nå, like, nivå en opp toppen. [00:41:16] PUBLIKUM: Ja, vi ønsker nivå en, her. [00:41:20] DAVID J. MALAN: Good. OK, så alt du trenger å gjøre er å kutte tauet. Markøren er den hvite der nede. [00:41:28] Veldig hyggelig. Greit, det handler om å få hardere. Så hold fingeren kommende nå. Good. Dette er vanskelig. [00:41:39] PUBLIKUM: Oh crap. OK. Den ønsker å gå den veien. Oh crap, at-- [00:41:44] DAVID J. MALAN: Yeah. Sekundært mål er å få alle stjernene. Greit, neste. [00:41:53] La oss se om du kan få dette tredje. Good. OK, gå over der. [00:42:06] Jada. Oh, very nice. OK. [00:42:11] Så hvorfor ikke vi utsette her i dag? La noen komme videre opp som ønsker å spille. Takk så mye til Laura vår frivillig. Og vi vil se deg på mandag. [00:42:18] PUBLIKUM: Du har sannsynligvis vil disse tilbake. [00:42:21] SPEAKER 2: Ved neste CS50--