[MUSIC SPILLE] DAVID MALAN: Dette er CS 50, og Dette er begynnelsen av uke ni. Og det vi trodde vi skulle gjøre i dag er ikke bare lukke kapittelet om forrige ukes materiale der vi fokuserte på serveren side web-programmering med PHP og SQL, noen database ting. Vi skal snakke om litt av sikkerhet i dag, og deretter Overgangen til et klientsiden programmering språket kjent som Javascript. Men først, noen forløsning. Du husker kanskje at på Onsdag, jeg satt ut å skrive et nettsted som tok i brukerens input av et HTML-skjema som deretter lagres at brukerundersøkelser navn, telefonnummer tall, og mobiltelefon bærere i databasen. Og så hadde jeg en liten kommando linje skript skrevet i PHP som var ment å iterere over radene i databasen og sende ut tekstmeldinger. Til tross for flere, flere forsøk, vi fikk ikke at arbeiderklassen ved utgangen. Så jeg brukte hele denne uken jobber på at koden for å få oss forbi det punktet der vi slapp, hvor alle Jeg fikk ved utgangen av onsdag var denne tekstmeldingen fra Margo som jeg slet, etterfulgt av en tekstmelding fra en annen klassekamerat, Du har fått dette David. Etterfulgt av denne, fantastisk oppmuntrende. Holdt på å gå, veldig oppmuntrende. Jeg fikk det nesten til then-- og det er notatet vi endte på onsdag. Og deretter faktisk kanskje min favoritt, et øyeblikk senere, dette kom inn. Damn live stream. Så i dag, vi fikse dette med en rask se på hva jeg har gjort siden. Så alt av denne koden er tilgjengelig online fra forrige ukes, uke åtte, kildekoden. Og du vil se at jeg gikk gjennom, og jeg faktisk ryddet opp ting litt. Jeg introduserte et par andre funksjoner i en SQL-database. For eksempel, i stedet for bare gjøre transportør av Var røye som jeg tror jeg gjorde på fly i forrige uke. Jeg i stedet definerte det som det som kalles en enum. Og noen av dere kanskje har sett denne som vi utforsket C. Enum er faktisk en funksjon i C der du kan oppsummere en hel haug med konstanter og tilordne dem automatiske verdier, som en, to, tre, fire uten å måtte harde kodenumre. Så SQL støtter den samme, hvorved Hvis du har en database felt som bare du ønsker å ta på ett av begrenset verdier, kan du bokstavelig talt spesifisere det som jeg har gjort det for fire populære amerikanske mobiltelefon operatører. Så jeg gjorde det. Og jeg gjorde en rekke endringer som vel, det viktigste av disse var å få e-post fungerer fordi tilbakekalling, at dette programmet avhengig av hvilke vanligvis kalles en e-post til SMS gateway, som er bare en fancy måte å si at Verizon, og AT & T, og andre folk støtte en server, der hvis den mottar e-post, konverterer den det til SMS og sender ut en tekst melding til noens telefon. Så hvis jeg gjorde dette riktig, her er en ny og forbedret form som kommer til å snakke med ny og forbedret kode, som du kan spille med på nettet. Og det vil forhåpentligvis gjøre mitt Telefonen piper i bare et øyeblikk. Så først, jeg kommer til å skrive i mitt navn. For det andre, jeg kommer ikke til å gjøre dette på dette tidspunktet. Jeg kommer til å gjøre Inspiser Element. Og dette er bare en liten ting så jeg ikke skape timer med post produksjon jobbe som jeg gjorde forrige gang. Det er nå min telefonnummer. Jeg velger Verizon. Og her, la oss slå på denne mikrofonen her, og tar sikte på dette på telefonen min her. Jeg kommer til å klikke Register, Hvilken bør forhåpentligvis sette det inn i databasen. Nå kommer jeg til å gå til kommandolinje program, som tilbakekalling ble kalt dot slash tekst, og krysser fingrene. Here we go. [PHONE dings] [APPLAUSE] DAVID MALAN: Så mer moro enn dette-- det er gøy, selvfølgelig, hvis jeg kommer inn i det. Men det er mer moro, tenkte jeg, hvis vi skapt en av disse filmøyeblikk der som noe virkelig ille har skjedd i verden, og som alle NSA folks mobiltelefoner begynner å pipe med tekstmeldinger varsle dem om dette faktum. Så jeg tenkte vi skulle prøve å gjenskape den samme her, der du ikke bruker en database, Jeg i stedet på forhånd skrev et program som ser ut som dette. Dette er en index.php-- og jeg setter denne koden online samt-- som tilsynelatende bare gjengir form.php, ved hjelp av en MVC stil paradigme som vi snakke om i mer detalj i Oppgavesettet syv. At formen er ganske enkel. Det kommer til å underkaste seg en fil som heter here.php via post. Og det er tilsynelatende kommer til å spørre etter et navn, og et telefonnummer, og deretter via såkalt Velg menyen, er det kommer til å gi deg minst fire populære amerikanske mobiltelefon operatører, og deretter tillate deg å effektivt ta frammøte ved å klikke her. Og her, i mellomtiden, kommer til å låne noen av koden fra forrige gang. Og hvis du bare skumme dette, vil du se at det er en hel haug med feilsjekking. Men skjønnheten på slutten er at vi ikke skrive til en database i dag. Vi holder det enkelt og bare sende ut forhåpentligvis en tekstmelding via funksjon jeg skrev i løpet av de siste dagene samtale Tekst, som er i funksjoner. php, som igjen er tilgjengelig på nettet. Så hvis du ønsker å delta i dette. Vi kommer ikke til å være lagring av noe. Gå til denne nettadressen her i sanntid. Ikke legg det til ennå, men la oss se om vi kan ha en av disse film øyeblikkene der alles mobiltelefon begynner å pipe, forhåpentligvis bare en gang i år i motsetning til i 2011 hvor dette gikk fryktelig galt. Og når du går til denne adressen, du skal se en super enkel form at hvis du har et navn, en mobiltelefon nummer, og en mobiltelefon carrier som matcher listen der, gå videre og fyll ut skjemaet. Men ikke treffer sender ennå. Skjemaet kommer til å se slik ut. Gå videre og skriver inn ditt navn, telefonnummer. Oop, er noen som kommer i forkant av kurven. Det er OK. OK, alle har fylt ut skjemaet. Dette skal fungere på en telefon, også, hvis du vil. All right, på Klar, ferdig, gå. Hit her. Hva? Nei. Jeg sverger til Gud, jeg testet dette flere ganger i dag. Du fikk den? [Interposing VOICES] DAVID MALAN: OK, brukerfeil kanskje. Det er to. Det fungerte for to ut av en noen hundre, tre, fire. OK, det er bra. Fire av fem for korrekthet hvor om. Så hva skjedde? Så formodentlig, uten å se din skjermer, hvorfor kan det ha errored? Det er nok at vi var bare prøver å gjøre for mange tilkoblinger til e-postserver Harvards alle på en gang fra det samme IP-adresse. Jeg bare gjetter siden jeg ikke gjorde det har luksusen av testing denne koden med noen 300 personer i forveien men for nå innse at at minst bør har fått jobben gjort denne gangen. All right, så hvorfor er dette hele mer relevante for hva som skjer? Vel først, en rask par kunngjøringer. Så en, hvis du ønsker å bli med Chang, og Nick, og andre til lunsj denne fredagen, gjøre RSVP til vanlig nettadresse der. Hvis du tenker på å konsentrere seg i eller gjør en sekundær i CS, enten du er en sophomore, eller freshman, eller til og med junior eller senior på dette punktet og kan fortsatt presse på kursene, innse at ingeniørskole samler gratis Ben og Jerrys iskrem og råd denne onsdagen kort tid etter klasse 4:00 PM i CS bygningen på Maxwell Dworkin. Hvis dette er for fort på skjermen, bare gå å cs50.harvard.edu for en koble til Facebook-event hvor du kan se flere detaljer. I mellomtiden, jeg trodde jeg ville rette en annen ting jeg goofed på onsdag. Det viser seg at Markus ID på Facebook var ikke tre. Det var fire. Det viser seg at han hadde mer test kontoer enn jeg husker. Men hva dette føltes som en mulighet å gjøre er å trekke opp en URL som dette. Så det viser seg at Facebook har en API, Application Programming Interface, som er en mekanisme der du kan be om data programma på Facebook og få tilbake maskinen lesbar informasjon, ikke websider men bare rå tekst, noe kalt Javascript Object Notation. Og faktisk, hvis jeg besøker dette URL, og zoome inn, som standard, dette er Marks offentlig tilgjengelig informasjon. Og interessant detalj her er bare at hans ID er faktisk nummer fire, som jeg realiseres så snart jeg gjorde dette. Du kan gjøre dette selv hvis du vet Facebook-brukernavn hvis du har en. Bare skriv det opp toppen der. Og ingenting av dette er privat. Jeg bare gjør dette selv i inkognitomodus. Så jeg er ikke engang logget inn. Og du ser at jeg tilsynelatende var bruker nummer 6454 på Facebook, som ikke er så ille i disse dager. Så uansett, vil du også se tilleggsinformasjon der. Og nyttig aspekt for det er at du kunne skrive din egen programvare som en eller annen måte integrerer data som dette inn din egen søknad. Du kan styrke brukerne til logge inn på nettstedet ditt, ikke bruker sine egne tilpassede brukernavn og passord, men kanskje deres Facebook login og få informasjon selv om sine venner, hvis de godkjenne sådan, eller lignende. Så merk at CS50, også, har noen av sine egne APIer, en for kurskatalogdata, noen for de hugs menyene i spise haller, alle av bygninger og steder på campus har vi en API for så vel at du kan spørre på samme måte og få tilbake tekstlig data som du kan integrere inn i en PHP eller Javascript, eller enda, men mindre vanlig, en C basert avsluttende prosjekt. Faktisk videre til finalen Prosjektet er noen milepæler. Du fikk en epost fra oss om dagen. Innse at forslaget skyldes denne kommende mandag. Det er ikke nødvendigvis bindende, men du trenger å motta undervisning stipendiater godkjenning før du gjør eventuelle endringer deretter. Og så videre er en rekke andre milepæler. Så for å erte deg, også, med noen muligheter, Vi har en haug med disse hue lyspærer. Og noen av dere nå har noen av disse i din hybel også. Og de også har en API. Så husker de binære pærer uker siden at Dan Bradley og Ansel Duff skapt for oss. De brukte et programvaregrensesnitt til Dette lyspære, som i øyeblikket er koblet til strøm og deretter via trådløst er koblet til en liten ting kalt Bridge her nede, som en liten router proprietær til denne spesielle enhet. Men det viser seg om jeg vet hvordan du sende HTTP-meldinger, som vi alle nå gjør, Jeg kan sende en melding som dette til denne lyspæren for å slå den av eller på eller gjøre en rekke andre operasjoner på det. Legg merke til at det ikke er få, det er ikke poste. Det er en annen en som heter put. Det er faktisk et par andre slike verb. Men legg merke til det er en bane der, slash API, slash ny utvikler, slash lys, skråstrek en, slash tilstand. Det er tydeligvis bare banen at selskapet, Philips, besluttet du må treffe med en HTTP-forespørsel Hvis du ønsker å endre tilstanden av pære ved hjelp av HTTP 1.1. Så oppdager den blanke linjen. Og så til slutt det ser ut som typen en rekke av noe slag, dette igjen kommer til å bli kalt Javascript Object Notation, eller Jason. Og det du ser her, er at er det tre sentrale verdi par. En nøkkel kalles på. Og dens verdi tilsynelatende kommer til å være sant. Lysstyrke er 128, noe som er en slags int. Og så overgangstid er null, som er tilsynelatende hvor lang tid det kommer til å ta å slå denne tingen på. Så akkurat nå er dette lyspære er av. Men hvis jeg gjør akkurat dette-- la meg gå til en liten jukselapp at Dan satt opp i advance-- og jeg kommer å gå videre og kopiere følgende kommando. Curl, som noen av dere kanskje har sanket på CS50 Diskuter er et verktøy som Telnet slikt at du kan simulere HTTP-forespørsler, spesielt setter. Jeg kan sende disse dataene, spesifikt hva vi bare så et øyeblikk siden spesifikt til denne nettadressen over her. Og så Curl kommer til å håndtere alle de nødvendige topptekster og analysering der av. Så alt jeg har å gjøre er å kopiere dette inn i et terminalvindu, og trykk Enter. Og lyspæren fortsetter. Og dette er alt går gjennom min datamaskin trådløst liksom ned til broen, som deretter å snakke med denne lyspære. Jeg kan gjøre noe annet. Jeg kan gjøre denne tingen gå rødt for eksempel. Jeg kan for eksempel gjøre denne tingen gå grønt. Jeg kan gjøre det gå blå. Og legg merke til i hver av disse forekomster, alle som jeg forandrer er den såkalte fargetone verdi til faktisk gi det litt farge. Så la meg lime dette i tillegg. Nå er det blå. Og du kan gjøre enda mer avansert ting where-- la oss gå til grønt. Og jeg kunne gjøre dette av Selvfølgelig med min egen kode. Men selv API selv støtter funky operasjoner som dette, vil som nå bry oss for de neste 30 sekunder. Så det er en smakebit av hva du kanskje gjøre med en API, dette involverer lyspærer. Merk at CS50 har et par par av Google Glass hvis du vil liker å takle noe langs disse linjene, Arduino Unos, som er bitte små datamaskiner, i hovedsak, på en liten kretskort at du kan koble ledninger og andre ting til og faktisk kontroll ditt virkelige verden miljø. Og så er det et par av nye leker som vi har. Denne bokstavelig talt bare kom andre dagen i posten, en Myo Armband. Og jeg syntes det er en måte å få deg opphisset om prosjekter som du kan bruke med denne maskinvaren ville være å spille denne korte klipp at de bruker å erte folk at vi nå lever i fremtiden. [MUSIC SPILLE] DAVID MALAN: Så på bare noen uker, du kan også være at kul på CS50 rettferdig. En annen enhet som vi har en haug med at vi er glade for å låne ut til prosjekter kalles en bevegelseskontroller. Dette er en liten USB-enhet du kobler til en datamaskin som lar deg kommunisere med din bærbare, Mac eller PC, som om du hadde som en Xbox Kinect og faktisk gjøre fysiske bevegelser mye som vi ser i denne visjon av fremtiden. [MUSIC SPILLE] DAVID MALAN: Så selv om du har aner ikke hvordan noe sånt kan muligens bli oppfunnet eller arbeid på et nivå maskinvare, uansett. Selv etter bare noen få måneder med CS50, og en forståelse av programmering mer generelt, og webprogrammering mer nylig, og da også APIer, og HTTP, Du vil få tilgang via programvaregrensesnitt hvis du ønsker å låne en av disse enheter for å faktisk snakke med det og ikke trenger å bekymre deg for den underliggende implementeringen detaljer, noe som er helt forenlig med denne oppfatningen av lagdeling en abstraksjon som vi har sett gjennom hele semesteret. Så også over helgen, så et par biter av nyheter. Gå først, gå til seminarer om du ønsker å lære noe mer på en rekke emner. Se nettadressen der. Og dette ble sendt til meg av Chang, som du vet, hvem som skriver ut vår hær av elefanter. Og det var en overskrift som følger. Jeg er livredd for min nye TV. Hvorfor jeg er redd for å snu dette ting på, og du vil være for. Så vi er nå på peke i semesteret, også, der selv om du har den minste forståelse av hvordan nettet fungerer, og HTTP, og sikkerhet, ting som dette bør begynne å fange øyet. Men også, vil du forstå se om disse ting er eller ikke faktiske trusler. Så jeg tok et par utdrag fra denne artikkelen her. Og historien er som følger. Jeg er nå eier av en ny smart-TV, noe som lover å levere streaming multimedieinnhold, spill, app, sosiale medier, og internett surfing, oh og TV også. Det eneste problemet er at jeg er nå redd for å bruke den, sier forfatteren. Du ville være, også, hvis du leser gjennom 46 Privacy Policy for din TV. Mengden av data dette ting samler er svimlende. Den logger hvor, når, hvordan og hvor lenge du bruker TV-en. Det setter tracking cookies, som vi har diskutert, og beacons designet å oppdage når du har sett bestemt innhold eller en bestemt e-postmelding Hvis du ønsker å sjekke e-post på din TV. Den registrerer appene du bruke, nettstedene du besøker, og hvordan du kommuniserer med innhold, gjør alt dette via smart TV. Det også, creepier yet-- det er min addition-- har et innebygd kamera med ansiktsgjenkjenning. Hensikten er å gi bevegelseskontroll for TV og gir deg mulighet til å logge på personlig konto ved hjelp av ansiktet ditt. På oppsiden, bildene er lagret på TV i stedet for lastet opp til bedriftens server. På nedsiden, internett tilkoblingen gjør hele TV sårbare for hackere som har vist evne å ta fullstendig kontroll over maskinen. Mer problematisk, som om det ikke var smart nok, er mikrofonen. TV skryte av en stemme gjenkjenning som lar seerne til å kontrollere skjermen med talekommandoer. Men tjenesten kommer med en ganske illevarslende advarsel. Vær oppmerksom på at hvis dine talte ord inkluderer personlig eller annen sensitiv informasjon, denne informasjonen vil være blant de data som samles inn og overføres til en tredjepart. Fikk det? Ikke si personlig eller sensitiv ting foran TV-en. Så dette er faktisk på ordentlig. Og det er vanskelig ikke å se om du gå til Best Buy eller liknende for TVer i disse dager. De er alle smart på noen måte. Og de får smartere og creepier. Og de er rett og slett å samle inn data på måter som vi har snakket om og deretter laste det via HTTP eller en annen protokoll til noen server. Så dette var en morsom artikkel i dette online nettsted her, som snakket om en Særlig bug eller feil kode at vi faktisk kan knytte i forrige ukes diskusjon. Så denne overskriften var som følger, historien går her, Josh Breckman jobbet for en selskap som landet en kontrakt å utvikle et innholdshåndteringssystem system, eller CMS som de kalles, for en ganske stor statlig nettside. Mye av prosjektet involvert utvikle et content management system slik at de ansatte ville være stand til å bygge og vedlikeholde stadig skiftende innhold for deres nettsted. Ting gikk ganske bra for noen dager etter går live. Men på dag seks, ting gikk ikke så bra. Alt innholdet på Nettstedet hadde helt forsvunnet. Og alle sidene førte til standard, vennligst skriv innhold nettside. Uff da. Josh ble kalt inn for å undersøke og lagt merke til som en spesielt plagsom ekstern IP-adresse hadde gått inn og slettet alle innholdet på systemet. IP-adressen ikke tilhører til noen oversjøiske hacker bøyd på å ødelegge nyttig offentlig informasjon. Det vedtok å googlebot.com, Googles egen web kryp edderkopp. Uff da. Etter litt forskning og scrambling rundt for å finne en noncorrupt backup, Josh fant problemet. En bruker hadde kopiert og limt inn noe innhold fra en side til en annen, inkludert en Rediger link å redigere innholdet på siden. Normalt vil dette ikke ville være en problem siden en ekstern bruker ville må skrive inn et navn og passord, men CMS autentiseringssystemet, innloggingssystemet, ikke ta hensyn sofistikert hacking teknikker for Google Spider. Uff da. Som det viser seg, Google Spider bruker ikke cookies, som betyr at den kan lett omgå en sjekk for er logget på cookie satt til å være falske. Det heller ikke ta hensyn til Javascript, noe som ville normalt spør og omdirigere brukere som ikke er logget inn. Det gjør imidlertid følge hvert hyperkobling på hver side den finner, inkludert de med Slett side i tittelen. Uff da. Så hva betyr dette i mer tekniske, men ganske tilgjengelig form? Det betyr bare at gjennom deres hjemmeside, de hadde webadresser ikke ulikt denne som du kan se i oppgavesettet sju. Recall i oppgavesettet syv eller vet i oppgavesettet syv at du er utfordret, blant annet å selge aksjer på vegne av brukerne. Men implementere denne funksjonen ved hjelp av få via hyperkoblinger i din bruker grensesnitt, sannsynligvis ikke den smarteste ideen fordi hvis området er liksom tilgjengelig enten med et menneske hvem har klikke rundt eller kjøpe en bot som Googles eller en Spider som de blir kalt det er bare Internett-gjennomgang prøver å indeksere nettet som en søkemotor, de kunne svært lett truffet via få denne type URL. Og det er funksjonelt tilsvarende, i dette tilfellet, selger alle aksjer i Google. Nå ærlig, det er helt asinine at CMS brukte Javascript og informasjonskapsler å gjennomføre sin login system og ikke gjøre det server side, som dere gjør og vil i PSet 7-- det er en login.php file-- alltid, alltid, alltid sikkerhet bør være gjøres på serversiden, ikke på klientsiden, fordi, ettersom dette Artikkelen antyder, og du kanskje deg selv se ved et tidspunkt, er det trivielt for en bruker, gode eller dårlige, å bare slå av Javascript for ikke å nevne cookies. Så det er din daglige WTF. Det er én mer, noe som er bare litt skummelt, så jeg skal nevne det hvis bare som et liv leksjon. Når du bruker et program heter som Snapchat eller lignende som sier disse bildene bare vare i fem sekunder, ti sekunder eller whatnot. De er flyktig Det er absolutt ikke tilfelle. Som det er ingen måte, digitalt, for å implementere en eller annen form av video, eller bilde, eller tekstlig å dele en slik at en mottaker på den andre enden kan ikke en eller annen måte lagre dataene. I den mest naive måte, noen kunne ta telefonen. Og de har en 10 sekunders vindu mens du ser på noen blunk å bare ta et annet telefonnummer og fotografere den, selvsagt. Så du kan bevare noe digitalt på den måten. Noen av dere vet hvordan de skal ta skjermbilder på telefonen. Faktisk, hvis du ikke vet dette, innse at minst Snapchat, og jeg tror andre programmer i disse dager, minst fortelle deg om mottakeren har faktisk tatt en skjermdump av bildet. Men enda verre, dette var snappening, som noen laget det nylig, der noen 100.000 snaps hadde blitt løslatt i det som kalles en torrent-fil på ulike nettsteder slutt. Og disse inneholdt en hel haug av private meldinger og innlegg. Det viser seg de fleste av dem godartet, så ikke hva man kunne forvente. Men fordi folk hadde brukt en tredjeparts nettside, logge inn med sin Snapchat brukernavn og passord, og deretter sparer alle sine snaps på denne tredjeparts nettsted. Og det var at tredjemann nettside som ble hacket, som nettopp mente noen funnet ut hvordan å få alle 100.000 pluss av disse bildene inn i sin egen harddisk for senere deling. Oppriktig, her også, det er liksom av asinine at Snapchat er implementert på en slik måte at en tredjepart kan sortere på skjærings data og at det ikke er knyttet til din egen applikasjon som kjører på telefonen. Men også her, skjønner at disse ting skal ikke ta deg av overraskelse, eller i det minste det burde være et liv leksjon i her. Hvis du ønsker det tekniske detaljer, gå til denne nettadressen der det er i dagens lysbilder. Greit, noen spørsmål om dagens livsvisdom i CS? Slå den av. Noe som helst? Noe som helst? Jeg har fått en masse folk sjekker deres Snapchat eller noe nå. All right, så SQL, Structured Query Language. La oss bryte dette. Og også, selv om vi bare skrape overflaten av denne språk, vil vi gi deg nok av språket i form av PSet 7 slik at du kan takle noen ganske vanlig funksjonalitet. Men innser at det er et par ting vi ikke krever av deg, men de kommer til å være viktig kommet endelige prosjekter og sikkert komme å gjøre faktiske nettsteder med faktiske brukere Dette designbeslutning. Det viser seg at i en MySQL database, du har bunter av valg som de datatyper for kolonner og andre ting, men du har også Valget av en såkalt lagrings motor for alle dine data, slags filsystem, Hvis du er kjent, for alle dine data. Hvilket format er det til syvende og sist lagret i? Og den mest vanlige, kanskje, har vært MyISAM og InnoDB, tekniske termer at vi vil bry seg om bare i den grad at man har og man ikke har følgende funksjon. Anta at du har litt dorm kjøleskap. Og anta at du og din romkamerat, som deler denne kjøleskap, er veldig glad i å si melk. Og dette er, faktisk, hvordan Historien ble fortalt til meg vei tilbake i dag da jeg tok et kurs kalt CS 161 Operating Systems, som på samme måte utforsker dette emnet. Så du har fått dette kjøleskapet. Du er ute av melk. Og du kommer hjem, din romkamerat fortsatt på klassen eller hva, og du bestemmer deg for jeg kommer til å gå ut og få litt melk. Så du lukke kjøleskapet, lockup hybel, gå over gaten til CVS eller der, og få i kø for å kjøpe litt melk. I mellomtiden, får din romkamerat hjem fra klassen, kommer inn i hybel, åpner kjøleskapet, også innser ooph, vi er ute av melk. Slik at han eller hun lukker kjøleskap og deretter skjer å gå til den andre CVS, som skjer for å være ett kvartal unna de andre CVS på torget, og får i kø der for å få litt melk. Nå, selvfølgelig, noen få minutter senere, dere begge komme tilbake, og det verste av alt mulig utfall har skjedd. Begge to har melk. Og du egentlig ikke som melk så mye. Så en av dem er bare kommer til å forsure på enkelte punkt. Så nå har du en overdreven mengde melk i kjøleskapet all grunn hvorfor? [Uhørbart] DAVID MALAN: Ja, det gjorde du ikke en eller annen måte kommunisere med hverandre at du var å få melk. Så i de enkleste måter i den menneskelige verden, hvordan kan du unngå dette dumme scenario skjer slikt at du bare ende opp med en. Tekst dem, ja bra. Men hvor ellers? Post-it-lapper. DAVID MALAN: A Post-it lapp. Enhver form for kommunikasjon som forteller romkameraten ikke gå inn i kjøleskapet for melk. Jeg kommer til å gå fylle opp igjen på min egen. Så du liksom trenger å låse denne ressursen. Så vi kan gjøre dette-- vi kan slags ødelegge historien og forvandles til en CS historie der tenke på dette som akkurat som en variabel, som blir lagring av noen verdi. Og akkurat nå, den verdien av melk er null, som du ikke vil at dine romkamerat å inspisere den variabelen og deretter ta en beslutning ham eller henne selv basert på tilstanden i den variabelen hvis du er i ferd med å å endre tilstanden til den variabelen. Så en av linjene av SQL at vi gi deg i PSet 7 spesifikasjon er denne her. Og vi ikke bruke en stor mengde tid på å snakke om det. Men det viser seg, hvis du prøver å kjøpe noen aksjer i CS50 finans at du allerede har noen aksjer i, du ønsker å være i stand til å gjøre en rekke ting kjapt sammen. Du ønsker å være i stand til å effektivt, på et høyt nivå, kontrollere all right, hvis jeg vil til å kjøpe flere aksjer i Free, penny stock vi snakke om i spec, Jeg vil først sjekke hvor mange aksjer jeg har. Og antar at det er fem. Og antar at jeg vil kjøpe 10 mer, jeg til slutt vil ha 15 aksjer på lager. Så jeg må spørre to spørsmål. Hva er status for variabel? Hva er state of the rad? Hvor mange aksjer har jeg for tiden? Så du ønsker å gå videre og oppdatere den. Så det er analog til melk i at du sjekker rad, og deretter du ønsker å oppdatere den fordi hvis du ønsker å kjøpe 10 aksjer, du ikke ønsker å endre raden til 10, du ønsker å endre det til 5 pluss 10 eller, selvfølgelig, 15. Dette kodelinje sikrer at disse to konseptuelle ideer skje sammen eller ikke i det hele tatt. Ingen, inkludert en annen bruker hvem som er logget inn på samme nettsted, kan liksom avbryte kontroll av raden og oppdatering av den rad, velge og oppdateringen hvis du vil. Og syntaksen er ikke super opplagt, men denne linje, blir det er lang, sikrer at disse to operasjoner sjekk variabel eller sjekk rad og oppdatere raden skje atomically. Oh her vi gå igjen. Tekstmelding på telefonen min. Så la oss gjøre dette til en Litt mer konkret. Anta at du ikke er implementere et kjøleskap, og du ikke implementere PSet 7, men en faktisk bank, eller en minibank, en Automated Teller Maskin, der du liksom ønsker å være i stand til å styrke brukere å overføre penger fra én konto til en annen. OK, henge på. Jeg kommer til å dempe dette nå, takk. Så vi ønsker å flytte penger fra ett kontonummer inn i en annen konto antall, spesielt $ 100. Så dette er litt av en vilkårlig eksempel, der du, ATM, kan det være lurt å kjøre to SQL spørringer, trekke fra én konto, og legge til den andre kontoen. Men du ønsker å sikre at disse to linjer både skje eller ikke i det hele tatt. Du ønsker ikke noe bli avbrutt. Du trenger ikke noen smart bad guy en eller annen måte står ved Bank of America med to minibanker i fronten av ham og liksom liksom skrive i kommandoer på samme tid, forhåpentligvis prøver å trekke $ 200 i stedet på $ 100 og kun ha $ 100 kreditert. Kort sagt, du ønsker at dette skal oppføre seg nøyaktig slik du forventer. Og måten du gjør dette i SQL database er du pakker det inn i hva som er kalt en transaksjon. Bokstavelig talt i SQL, kan du ringe CS50 s spørring funksjon med quote unquote start transaksjon. Deretter kan du utføre en rekke av etterfølgende SQL-spørringer, men ingen av dem tar Effekt på databasen før du ringer spør quote unquote begå, hvis igjen ved hjelp av PHP. Og på denne måten, kan du sikre at selv om du har 1000 brukere treffer databasen på samme tid, SQL vil love at disse to spørsmål vil være implementert en rett etter den andre. Så du ikke ender opp med overskudd av melk eller feil beløp, til slutt, av penger. Så ha dette i bakhodet, ikke så mye for PSet 7 men for endelige prosjekter hvis du er faktisk prøver å flytte data rundt på tvers av bordene som du kanskje her. Men kanskje enda enklere og mer åpen å forstå med et eksempel er denne her. Og noen mailet oss om dette bare den andre dagen da han så noe lignende på nettet. Så vidt jeg vet, pinnesystem er ikke sårbar for dette angrepet. Og jeg aner ikke om det enda bruksområder SQL-databasen under panseret. Men la oss bruke det for skyld diskusjonen. Her er skjermen som Harvard folk har en tendens å se når du logger inn med sin Harvard-ID-nummer og deres pin. Og anta at tappen systemet var implementert i PHP, og med en MySQL database, den kode som noen kunne ha skrevet år siden kan se slik ut. Først erklære en variabel kalt brukernavn. Og bare få det fra POST superglobal. Så får en annen variabel kalt passord og gjøre det samme. Og så bare kjøre denne lange spørring her, Velg stjernen fra brukere der brukernavn lik slik og slik og passord er lik slik og slik. Legg merke til at krøllete bukseseler jeg har brukt her bare bety for PHP, gå fremover og erstatning verdien av de to variabler rett der. De er strengt tatt ikke nødvendig, men de har en tendens til å unngå subtile syntaksfeil. Så dette ser helt riktig ved første øyekast. Og det er. Du kan implementere stiften system på denne måte. Men anta at en super smart og ondsinnet student innspill dette som hans eller hennes pin. Så jeg har fjernet kulen skilt her i uekte opp, og jeg har faktisk avslørt hva han eller hun kan være å skrive. Og det er litt rart. Men hva hopper ut på deg på potensielt betenkelig om brukerens input, selv om du har ingen anelse om hva en SQL-injeksjon angrep betyr. Hvorfor dette ser litt fishy? Hva er det? [Uhørbart] DAVID MALAN: Den eller er litt mistenkelig. Faktisk, det er et søkeord fra SQL. Så det lover ikke godt. Det faktum at det finnes alle disse enkle anførselstegn det-- faktisk en av de enkleste måter å bryte noen databaser er ved å skrive inn et navn som O'Reilly som har en apostrof i det fordi hvis det menneskelige som skrev koden bak kulissene tar ikke hensyn til at det kan være enkle anførselstegn i en brukers innspill, og han eller hun bruker apostrof i koden sin, dårlige ting kan skje. Faktisk enda verre, bør du vurdere dette. Hvis dette var igjen koden at noen på Harvard år siden skrev for pinnen system, merke hva som er i ferd med å bli byttet ut for brukernavn og passord hvis brukeren taster inn igjen skroob som deres brukernavn og deretter en, to, tre, fire, fem, sitat eller quote unquote en equals sitere en. Og legg merke til hva som er nøkkelen her er at brukeren ikke har startet sitt passord eller sin pin med et tilbud. Og de har ikke endte det med et tilbud fordi han eller hun er forutsatt at dersom programmerer var ikke så skarp, de kommer til å ha de apostrof i koden sin. Så her er koden. Og at substitusjonen kan nå skje er dette. Og jeg har understreket hva brukeren har skrevet inn. Så før, etter. Og legg merke til hva som er mildt urovekkende nå om høyre halvdel av denne SQL-kode? Det er litt mer komplisert, riktignok, enn de spørsmål vi har sett. Men dette kan umulig være en god ting hvis du er sier velger stjernen, som er å velge alt fra brukerens tabellen der brukernavn er lik skroob og passord er lik én, to, tre, fire, fem eller en lik en. Hva er den logiske implikasjonen av det siste klausulen formodentlig? Det er bare alltid sant. Og fordi vi har liksom gjettet eller funnet ut ved prøving og feiling at programmerer som skrev ikke denne koden forutse et menneske eller dårlig person skrive i enkle anførselstegn i tillegg, vi kan syntaktisk full SQL-spørringen med noe nonsens men noe som er syntaktisk feil som alltid evalueres til sant. Så hvis denne kode blir brukt for å svare spørsmålet sant eller usant bør denne brukeren få lov til å passere, den Svaret er alltid tilsynelatende kommer til å være sant fordi dette er alltid kommer å velge noe fra databasen fordi man selvfølgelig alltid er lik én. Så hva er løsningen? Vel i PSet 7, vi faktisk unngå dette alle sammen. Vi gir deg en spørring funksjon, og vi oppfordrer deg til å bruke spørsmålstegn som plassholdere, som ligner i ånden til printf s% s, men hva er nøkkelen om spørsmålstegnene her er hvis du faktisk lese gjennom functions.php, hvor vår spørringsfunksjonen iverksettes, disse spørsmålstegnene er rømt, hvor noe potensielt farlig som et enkelt sitat er slått inn en rømt enkelt sitat. Så dette er hva som er virkelig skjer hvis du bruke CS50 spørring funksjon eller hvilket som helst tall av tredjeparts gratis biblioteker som gjøre det samme. Spiller ingen rolle i dette tilfellet, i grønt, hvis brukeren har skrevet i et enkelt sitat fordi spørringen funksjon som vi skrev er kommer til å legge backslashes før enhver slik farlig sitat. Så dette er ikke, i Faktisk kommer til å være legit. Dette er som å skrive i en gal ute passord som er, selvfølgelig, ikke kommer å være skroob faktiske passord. Så takeaway for CS50 er en, absolutt alltid bruke noe som CS50 spørring funksjon eller den underliggende bibliotek, som skjer for å bli kalt PUD. Men aldri, aldri, aldri gjøre kode som dette uten rømme eller skrubbing som de sier dataen. Og du vil på et tidspunkt trolig kommer over noen nettside som dette. Faktisk ser det ut til å være tilfelle som på flyplasser og hoteller på steder der de har gratis Wi-Fi tilgang som du må logge inn på, disse nettstedene er alltid horribly implementert. Og så en slags moro hjemme trening, ikke med onde hensikter eller mer av en morsom på veien mosjon, er å bare skrive en apostrof, et enkelt sitat, til en form på noen nettside og se hva som skjer. Og hvis serveren krasjer eller gir du noen form for feilmelding, det kan godt være at noen har ikke forventet dette. Og så bør du varsle riktig myndigheter og fortsette lenger. Så nå dere skal forhåpentligvis forstå litt mer geek humor her. [Latter] DAVID MALAN: Du vet du er en geek. For neste flere år, vil du huske som små Bobby Tables er på grunn av denne tegnefilmen her. Så holder det i bakhodet når vi kontekst bryter en siste gang dag til Javascript. Vi har brukt relativt lite tid på syntaksen til PHP fordi det er faktisk super lik C. Og pent nok, Javascript for er super lik C sin syntaks så vel som vi vil se i bare et øyeblikk, og som vi vil se senere denne uken spesielt. Hva du kan gjøre med dette språket, skjønt, er desto mer kraftfull, spesielt med APIer. Men først en rask gjennomgang. Så en, i Javascript, er det ingen hovedfunksjon, som er fint. Som med PHP, kan du bare skrive kode. Forhold se slik ut. Og boolske uttrykk kanskje se slik eller slik. Brytere finnes, og de kan se slik ut. Fire sløyfer se slik ut. Mens looper se slik ut. Gjør whiles se slik ut. Og så arrays ligne dette, svært lik PHP. Men legg merke til at i Java deg deklarere en variabel ikke med en krone signere, ikke med en datatype, men bokstavelig talt ved å si Var for variabel før det. Det også er løst skrevet ved at den har typer, men du ikke eksplisitt erklære dem. Og deretter en streng, etter eksempel kan se som dette, at strengen bli kalt s i dette tilfellet. Og deretter et objekt. Og disse vi vil se mer før lenge. Og et objekt er kanskje en av de mest sett datastrukturer i en Javascript-basert programmet fordi det gir du knytte vilkårlig sentrale verdi parene bare som PHP sin assosiative arrays og akkurat som din egen hash table eller prøve som vi implementert et par uker tilbake. Så la oss faktisk se hva vi kan gjøre med Javascript. Og spesielt, er denne et vaskeri liste over funksjoner at nettlesere har som tillate oss å hekte Java inn i en nettside på følgende måte. Javascript er ofte brukt som en klientsiden skriptspråk. Det er ikke utarbeidet. Det også er tolket. Men i motsetning til PHP, som har kjørt på serveren, i web-server, eller dypt inne i kunder, Java er annerledes ved at den vanligvis kjører i nettleseren. Så noen Javascript-kode du begynne å skrive for PSet 8, eller det endelige prosjektet, eller i den virkelige verden er generelt kommer skal lagres på serveren, absolutt i en prikk HTML eller dot JS for Javascript-fil. Men nettleseren kommer for å laste ned at Java koden til din forekomst av Chrome, eller IE eller Firefox, eller hva. Og koden er faktisk kommer til å få henrettet inne i din egen nettleser. Bare for å gjøre dette mer ekte, La oss se dette i konkret form. Vi har ingen anelse om hva denne koden gjør uten egentlig å lese gjennom den. Men la meg gå til Facebook.com uten å logge inn. La meg gå til Inspiser Element og gå til, la oss si, Nettverk og oppdater siden. Og vi vil see-- la meg skifte Last den Side å få alle forespørsler til nye. Og den aller første filen jeg ser er CSS, CSS. Her er det første Javascript-fil, og jeg har ingen anelse om hva dette betyr, men her er noen av Javascript-kode som driver Facebook. Det er ikke engang virkelig at avslørende for å zoome inn. Det er fortsatt like tåpelig. Men du vil se enda der nede, det er enda mer av disse Javascript-filer. Uff da. Det er en ping. La oss gå ned litt videre, videre, videre. Det er ett. Det er ett. Det er ett. Så selv om Facebook, bak scener, er skrevet delvis i PHP og Facebooks egen versjon av denne, det er en enorm mengde av Javascript. Faktisk hvilken som helst av chatter du gjør på Facebook, noen av inline tidslinje oppdateringer at skje i sanntid, alle av at er drevet av Javascript. Yeah? PUBLIKUM: Jeg er ikke sikker hvis dette er Facebook, men jeg tenkte at Facebook utviklet sin egen in-house kode språk? DAVID MALAN: De gjorde. Så det er derfor jeg sier en variasjon av PHP kalt Hip Hop at de faktisk lagt til funksjoner til slik at når Mark først implementert Facebook, den ble skrevet i PHP. Og den slags har forblitt slags front end språk at de bruker for mye av deres koding, men det har ikke vært et språk som er skalerer spesielt godt til milliarder mennesker. Og så har de lagt sine egne forbedringer bak kulissene. Og de bruker en rekke andre språk for ulike deler av sin infrastruktur. Så ja, det er en variasjon av det vi nå kjenner som PHP. Så la oss ta en titt på et par eksempler av hvordan vi kan bruke Java her. I dagens kildekode, har vi en haug med filer, hvorav den første, la oss kalt DOM null. Så DOM null ser ut som følger. La meg gå inn i denne katalogen og åpne opp domzero.html, toppen som har en doc typen erklæringen, sier her kommer HTML 5. Og nå her er en HTML-kode. Her er hodet tag. Og her er hva som er nytt i dag. Vi har nå en script tag innsiden av hodet på siden. Og dette tilsynelatende gjør svært lite, men varsel at jeg har definert en manus, en Javascript. Og som en side, siden dette er en vanlig misforståelse, Java har absolutt ingenting å gjøre med Java, språket at noen av dere kanskje har lært i APCS. Det var mer et markedsførings ting enn noe annet, riding coattails av Java år siden. Men Javascript, ingenting å gjøre med Java, bare på samme måte, og grammatikken, forveksling navngitt. Så her er hvordan du deklarerer en funksjon i Javascript, bokstavelig talt si funksjon, deretter navnet på funksjonen, da noen argumenter det kan ta, akkurat som i PHP. Slår ut i Javascript, en av de mest irriterende funksjoner som eksisterer er Alert. Dette er et lite vindu som vil dukke opp og varsle deg til en viss del av informasjonen. Det er generelt mislikt. Men vi skal bruke det som vår første øvelsen her. Legg merke til et par funksjoner i Javascript. Apostrof og anførselstegn ikke egentlig noen rolle lenger. Apostrof og dobbel sitater kan byttes, mens i C, må du bruke anførselstegn for strenger, og du har to single sitater for tegn. I Java verden, mange mennesker, de fleste bruke enkle anførselstegn rundt strenger bare fordi det er et stilistisk ting. Men hva er pluss operatøren her, som vi ikke har sett før? PUBLIKUM: Sammenkobling. DAVID MALAN: Sammenkobling. Så C har ikke engang dette. PHP har dot operatør, som gjør dette. Java har pluss operatør, som til forveksling er akkurat som Java. Nå hva som skjer her? Så her er der en grunnleggende forståelse av det bildet vi kastet opp et par dager siden kommer inn i bildet. Husker da vi hadde en enkel versjon av en HTML page-- det bare sa hallo verden. Og da vi trakk et tre til høyre, som hadde en haug med rektangler og linjer koble dem som et familietre. Så det er den såkalte DOM eller Document Object Model. Og det viser seg at du kan få tilgang rektangler i det treet med syntaks som følgende. Du bokstavelig talt si dokumentet, som er en spesiell global variabel i en Javascript program som har en funksjon forbundet med det at du kan få tilgang som ligner på et struct, men man simpelthen si prikk og deretter funksjonens navn, få element av ID. Elementet jeg ønsker å få er tilsynelatende sitere unquote navn. Og så jeg ønsker å få sin verdi. Nå får vi i forkant av oss selv. Jeg er ikke engang sikker på hva alt dette handler om. La oss spole frem til HTML på siden, som er super enkelt. Legg merke til at jeg har definert En form her nede. Merke til at jeg har gitt det en unik ID, selv om vi ikke har brukt dette attributtet før. Men dette finnes i HTML. Du kan entydig identifisere noen blings av HTML med en identifikator som dette. Innkalling nå dette-- viser seg HTML støtter, per at vaskeri liste et øyeblikk siden, en hel haug med hendelsesbehandlinger. Og denne hendelsen behandleren står på send. På brukerens innlevering av dette form, ringe følgende kode. Og koden som kommer å bli kalt eller henrettet er akkurat dette, den greske funksjon fulgt av return false. Alt annet bør være ganske kjent. Her er en inngang av type tekst, som ID, i dette tilfelle kommer til å være navn. Vi har ikke en faktisk navn attributt dette tid-- og en send-knappen. Så resultatsiden ser slik ut. Og den resulterende oppførsel, du vil se, ser ut som dette. Siden det lokale verter sier hei David, knapt en estetisk tiltalende måte å hilse en bruker. Men hva som faktisk skjer? Vel, vurdere hva dette er. Dette er et tekstfelt. Og i henhold til HTML her, har jeg gitt det en unik identifikator kalt quote unquote navn. I mellomtiden har jeg sagt når brukeren sender dette skjemaet ved å trykke på Enter eller klikke på Send knappen, kaller funksjonen kalles Greet og deretter tilbake False. La oss vurdere de i revers. Legg merke til når jeg klikker Send inn, den URL for siden endres ikke. Nettleseren ikon ikke begynne å spinne. Jeg fikk ikke gå hvor som helst, og det er bokstavelig talt fordi jeg sa tilbake False. Return false kortslutning eller stopp standardvirkemåten til et skjema. Slik at da etterlater oss med dette et siste spørsmål. Hva gjør Greet gjøre? Vel, Hils tilsynelatende kaller en funksjon som heter Alert, går i ett lang argument som er resultatet av å sette sammen sammen en haug med dels, hallo komma plass, så hva dette returnerer. Så dokument er som en global variabelen til at roten av dette treet, ringer en spesiell funksjon, ellers nå kjent som en metode. En funksjon som er innsiden av en variabel er kalt en fremgangsmåte i stedet for en funksjon. Så får element av ID. Hva element gjør du ønsker å få av sin ID? Quote unquote navn og da spesielt verdsetter. Så med andre ord, at koden bare finner tekstfeltet hvis ID er navn og deretter får sin verdi. Så hvis jeg skulle endre dette og sier Davin i stedet for David, og klikk Send, nå er vi har en hilsen til Davin. Greit, så alt fint og bra. Men la oss se om vi kan gjøre dette litt renere siden like skrive kode som dette er generelt kommer til å bli mislikt. Dette kommer til å se mer skremmende. Men hva er det første forskjellen at du noterer her i denne versjonen foruten den navn endre til DOM en? Hva strukturelt ser annerledes om dette kontra den andre? Yeah? PUBLIKUM: Er formen på toppen av skriptet nå? DAVID MALAN: Ja, er formen på topp av skriptet for noen nysgjerrige grunn. Så det er det første som hopper ut på meg også. Og heldigvis minst, denne delen er identiske. Så det eneste som virker å være annerledes er dette. Så her er det som er ryddig om Javascript to. Og det gjør det vanskelig å forstå ved første øyekast, spesielt for endelige prosjekter hvis du ser på eksempelkode på nettet, men det koker ned til noen grunnleggende syntaktiske funksjoner. Her igjen er at global variabel dokument. Her igjen er at metoden eller funksjon som sier få element av ID. Denne gangen ønsker jeg å få ID kalt demo. Hvor er det? Det er tilsynelatende riktig her, selve skjemaet. Og merker at det nå tydeligvis hvis jeg komme tilbake som node fra treet som representerer skjema seg selv, ikke et tekstfelt, det viser seg at form, at node eller rektangel fra treet, har det vi vil kalle en eiendom, veldig, veldig, veldig lik i ånden til en struct i C. Det er bare en data medlem innsiden av dette rektangel. Så jeg har fått skjemaet her, og jeg legger ved, eller jeg tilordne, til sin On Send behandleren eller snarere På Send eiendom følgende funksjon. Og dette er langt, den galeste ting så langt syntaktisk. Det viser seg i Javascript, og i PHP, og rett og slett for den saks skyld i C, selv om vi ikke gjør det, kan du legge navnløs, anonym eller AKA lambda funksjoner som ikke har et navn men kan kalles likevel. Så det jeg gjør her er jeg tildele Dette On Send eiendom, som er inne i denne noden av min DOM treet, en funksjon, funksjonspeker hvis du vil. At funksjonen har ingen nevne, men som ikke gjør det saken fordi vi vil se i et øyeblikk hvor å kalle det. Når denne funksjonen kalles, denne koden blir utført, deretter false returneres på samme måte som før. Men legg merke til hva jeg har gjort. På dette punktet i historien, har jeg et skjema. Det har en unik ID som heter demo. Her nede, har jeg et script tag som utfører følgende kode. Den festes til den noden i treet til det er On Send Eiendommen denne funksjonen her. Og bare av natur på hvordan nettlesere fungerer, når jeg nå klikker Send eller trykk Enter, den funksjonen kommer til å bli kalt. Det trenger ikke et navn fordi hvem pokker bryr seg om hva det heter. Den eneste gangen det noensinne kommer til å få heter er når jeg sender inn skjemaet. Det er ikke nødvendig for meg, den menneskelige utbygger, å faktisk kalle det noe annet. Nå bare som en teaser, som om det ble ikke noe imot å bøye nok, Vi kan selv gjøre dette ser mer kryptisk hjelp en super populære bibliotek kalt jQuery. Faktisk jQuery og Javascript blir ofte blandet sammen. Og hva vi skal gjøre på onsdag er starten bruker dette språket, og disse bibliotekene å bygge stadig mer asynkron og dynamiske applikasjoner som kartet får programmer, programmer som oppdaterer nettsiden i sanntid tid, mye som Facebook eller Gchat gjøre, og ikke lenger begrense oss til Treffer Send inn etter en get eller bare post alene. Så jeg vil se deg på onsdag. [MUSIC SPILLE]