[MUSIK SPELA] 

DAVID MALAN: Detta är CS 50, och detta är början av vecka nio. Och vad vi trodde vi skulle göra i dag är inte Stäng bara kapitlet om förra veckans material där vi fokuserade på server sidowebbprogrammering med PHP och SQL, vissa databas grejer. Vi pratar om en bit av säkerhet i dag och sedan Övergången till ett klientsidan programmering språk kallas JavaScript. Men först, en del inlösen. 

Ni minns kanske att på Onsdag, jag ut att skriva en webbplats som tog i användarens input av ett HTML-formulär som sedan lagras den användaren ingångsnamn, telefon siffror, och mobiltelefon bärare i databasen. Och sedan hade jag en liten kommando line script skrivet i PHP som var tänkt att iterera över raderna i databasen och skicka ut textmeddelanden. Trots flera, flera försök, vi fick som arbetande i slutet. 

Så jag tillbringat hela den här veckan arbetar På denna kod för att få oss förbi den punkt där vi slutade, där alla Jag fick i slutet av onsdag var detta textmeddelande från Margo som jag kämpade, följt av ett textmeddelande från en annan klasskamrat, du har fått den här David. Följt av den här, underbart uppmuntrande. Hålls på att gå, mycket uppmuntrande. Jag fick nästan det tills then-- och det är tonen vi slutade på onsdagen. Och sedan faktiskt kanske min favorit, en stund senare kom det in. Fan Live Stream. 

Så idag, vi fixa detta med en snabb titta på vad jag har gjort sedan dess. Så allt detta koden finns tillgänglig online från förra veckans, vecka åtta, källkod. Och du kommer att se att jag gick igenom, och jag faktiskt städat upp saker och ting lite. Jag presenterade ett par andra funktioner i en SQL-databas. Till exempel, i stället för se bara till bärare av var röding som jag tror att jag gjorde i farten förra veckan. Jag stället definierat det som vad som kallas en enum. 

Och en del av er kanske har sett det här som vi undersökt C. Enum är faktiskt en funktion i C, där du kan räkna upp en massa konstanter och tilldela dem automatiska värden, som en, två, tre, fyra utan att hårda kodnummer. Så SQL stöder densamma, varvid om du har en databasfält som du bara vill ta på en av finit värden, kan du bokstavligen ange det som jag har gjort det för fyra populära amerikanska mobiltelefonföretag. 

Så jag gjorde det. Och jag gjorde ett antal förändringar som ja, av vilka de viktigaste var att få e-post som arbetar, därför minns, att detta program åberopas som allmänt kallas ett mail till SMS-gateway, som är bara ett finare sätt att säga att Verizon, och AT & T, och andra folks stödja en server, vari om den mottar e-post, omvandlar den till SMS och skickar ut en text meddelande till någons telefon. Så om jag gjorde det på rätt sätt, här är en ny och förbättrad form som kommer att prata med ny och förbättrad kod, som du kan spela online. Och det kommer förhoppningsvis göra min telefon pip på bara ett ögonblick. 

Så först kommer jag att skriva in mitt namn. För det andra, jag kommer inte att göra detta den här gången. Jag kommer att göra Inspektera Element. Och detta är bara en liten sak så jag inte skapa timmars postproduktion arbeta som jag gjorde förra gången. Det är nu mitt telefonnummer. 

Jag ska välja Verizon. Och här, låt oss slå på mikrofonen Här, och syftar detta på min mobiltelefon. Jag kommer att klicka på Registrera, vilken förhoppningsvis lägga in den i databasen. Nu ska jag gå till kommandorad program, som minns kallades dot slash text, och håll tummarna. Här går vi. 

[PHONE DINGS] 

[Applåder] DAVID MALAN: Så roligare än this-- det är roligt, naturligtvis, om jag får in den. Men det är roligare, tänkte jag, om vi skapat en av dessa film stunder där som något riktigt hemskt har hänt i världen, och som alla NSA folkets mobiltelefoner börjar pipa med textmeddelanden göra dem uppmärksamma på detta faktum. Så jag tänkte att vi skulle försöka att återskapa samma sak här, vari inte använder en databas, Jag stället i förväg skrev ett program som ser ut så här. 

Detta är en index.php-- och jag sätter in den här koden på nätet som well-- som tydligen bara återger form.php, med hjälp av en MVC stil paradigm som vi prata om mer ingående i problem set sju. Denna form är ganska enkel. Det kommer att underkasta sig en fil som heter here.php via post. Och det är uppenbarligen kommer att ställa efter ett namn och ett telefonnummer, och sedan via av s.k. Välj menyn, det är kommer att ge dig minst fyra populära amerikanska mobiltelefonföretag, och sedan kan du på ett effektivt sätt ta närvaro genom att klicka här. 

Och här, under tiden, kommer att låna en del av koden från förra gången. Och om du bara skummar detta, ser du att det finns en hel massa felkontroll. Men skönheten i slutet är att vi inte skriva till en databas i dag. Vi håller det enkelt och bara skicka ut förhoppningsvis ett textmeddelande via funktions I skrev under de senaste dagarna samtal Text, som är i funktioner. php, vilket återigen är tillgängliga online. 

Så om du vill ta del av detta. Vi kommer inte att lagra något. Gå till denna URL här i realtid. Skicka inte in det ännu, men låt oss se om vi kan ha en av dessa filmer stunder där allas mobiltelefon börjar pipa, förhoppningsvis bara en gång i år till skillnad från år 2011 där det gick fruktansvärt snett. Och när du går till den adressen, bör du se en super enkel form att om du har ett namn, en mobiltelefon nummer, samt en mobiltelefon bärare som matchar listan där, gå vidare och fyll i formuläret. Men slå inte lämna ännu. 

Formuläret kommer att se ut så här. Gå vidare och skriv in ditt namn, telefonnummer. Oop, någon kommer före kurvan. Det är OK. OK, alla har fyllt i formuläret. Detta bör fungera på ett telefon, även om du vill. Okej, på era platser, färdiga, gå. Hit här. Vad? Nej. Jag svär vid Gud, testade jag detta flera gånger i dag. Fattar du? 

[Inplacering UTTRYCKER] 

DAVID MALAN: OK, användarfel kanske. Det är två. Det fungerade för två av en några hundra, tre, fyra. OK, det är bra. Fyra av fem för riktighet vad sägs om. 

Så vad var det som hände? Så förmodligen, utan att se din skärmar, varför skulle det ha errored? Det är nog att vi var bara försöker göra för många anslutningar Harvard-postserver på en en gång från samma IP-adress. Jag bara gissar eftersom jag inte gjorde det har lyxen av att testa denna kod med vissa 300 personer i förväg men nu inser att att åtminstone bör har fått jobbet gjort denna gång. 

Okej, så varför är detta allt mer relevant för vad som händer? Väl först, en snabb några tillkännagivanden. Så en, om du skulle vilja gå med Chang, och Nick, och andra på lunch på fredag, gör RSVP vid vanlig webbadress där. Om du funderar på att koncentrera i eller göra en sekundär i CS, oavsett om du är en sophomore, eller nybörjare, eller till och med junior eller senior på denna punkt och fortfarande kan klämma in kurserna, inse att verkstadsskolan samlar gratis Ben och Jerrys glass och råd kort efter denna onsdag klass vid 04:00 på CS byggnaden vid Maxwell Dworkin. Om detta är för snabb på skärmen, bara gå att cs50.harvard.edu för en länk till Facebook-evenemanget där du kan se fler detaljer. 

Under tiden tänkte jag att jag skulle rätta en annan sak jag goofed på onsdagen. Visar sig att Marks ID på Facebook var inte tre. Det var fyra. Det visade sig att han hade mer tester konton än jag minns. Men vad detta kändes som en möjlighet göra är att dra upp en URL som denna. 

Så visar det sig att Facebook har en API, Application Programming Interface, som är en mekanism som gör du kan begära uppgifter programmering på Facebook och få tillbaka maskinen läsbar information, inte webbsidor men bara rå text, något kallas JavaScript Object Notation. Och faktiskt, om jag besöker detta URL, och zooma in, som standard, Detta är Marks offentligt tillgänglig information. 

Och intressant detalj här är bara det att hans ID är verkligen, nummer fyra, som jag insåg så fort jag gjorde detta. Du kan göra det själv om du vet ditt Facebook-användarnamn om du har en. Bara skriva det där uppe där. Och inget av detta är privat. Jag gör bara detta ännu i inkognitoläge. Så jag inte ens loggat in. Och du ser att jag tydligen var användarnummer 6454 på Facebook, vilket inte synd i dessa dagar. Så hur som helst, kommer du också se Ytterligare information finns. 

Och den användbara aspekten av det är att du skulle kunna skriva en egen mjukvara som på något sätt integrerar uppgifter som denna in i din egen applikation. Du kan ge användarna möjlighet att logga in din hemsida, inte använder sina egna användarnamn och lösenord men kanske deras Facebook-inloggning och annan information även om sina vänner, om de godkänner sådana, eller liknande. Så notera att CS50 också, har några av sina egna API: er, en för kurskatalogdata, några för kramar menyerna i matsalen hallar, alla av byggnader och platser på campus har vi ett API för såväl att du kan fråga på samma sätt och få back textdata som du kan integrera i en PHP eller JavaScript, eller till och med, men mer sällan, en C baserade slutprojekt. 

Faktum framåt för final projekt finns några delmål. Du fick ett mail från oss häromdagen. Inse att förslaget beror denna kommande måndag. Det är inte nödvändigtvis bindande, men du behöver ta emot dina undervisnings medmänniskor godkännande innan förändringar därefter. Och sedan framåt är en antal andra milstolpar. 

Så för att retas med dig också, med vissa möjligheter, Vi har ett gäng dessa nyans glödlampor. Och en del av er har nu någon av dessa i ditt studentrum också. Och de har också ett API. Så minns dessa binära lökar veckor sedan som Dan Bradley och Ansel Duff skapat för oss. De använde en programvara gränssnitt till denna lampa, som för tillfället är ansluten till el och sedan via trådlöst är ansluten till en liten sak kallas bron här nere, som en liten router proprietär till denna enhet. 

Men det visar sig, om jag vet hur man skicka HTTP-meddelanden, som vi alla nu gör, Jag kan skicka ett meddelande som detta till denna lampa för att slå på eller av eller gör valfritt antal andra operationer på det. Lägg märke till att det inte blir, det är inte posta. Det finns en annan som heter put. Det finns faktiskt ett par andra sådana verb. Men märker att det finns en väg där, slash API, snedstreck ny utvecklare, slash ljus, snedstreck en, snedstreck staten. 

Det är tydligen bara väg som företaget, Philips, beslutade du måste träffa med en HTTP-begäran om du vill ändra tillståndet av löken med HTTP 1.1. Då märker den tomma raden. Och sedan slutligen vad som ser ut typ av en uppsättning av något slag, detta igen kommer att kallas JavaScript Object Notation, eller Jason. Och vad du ser här är att det finns tre nyckelpar value. 

En nyckel heter på. Och dess värde tydligen kommer att vara sant. Ljusstyrkan är 128, vilket är någon form av int. Och sedan övergångstiden är noll, vilket uppenbarligen är hur lång tid det kommer att vidta för att vända denna sak på. 

Så just nu denna lampa är släckt. Men om jag gör exakt this-- låt mig gå till en liten fusklapp att Dan inrättades advance-- och jag kommer att gå vidare och kopiera följande kommando. Curl, som några av er kanske har gleaned på CS50 Diskutera är ett verktyg som Telnet sådan att man kan simulera HTTP-förfrågningar, specifikt sätter. Jag kan skicka dessa data, specifikt vad vi just såg en stund sedan specifikt till denna URL här. Och sedan Curl kommer att hantera alla nödvändiga rubriker och tolka det på. 

Så allt jag behöver göra är att kopiera detta till ett terminalfönster och sedan trycka Enter. Och glödlampan tänds. Och detta allt går igenom min dator trådlöst på något sätt ner till bron, som Därefter talar till denna glödlampa. Jag kan göra något annat. Jag kan göra det här go rött till exempel. Jag kan till exempel göra denna sak går grönt. Jag kan göra det gå blå. 

Och varsel var och en av dessa fall, alla som jag förändras är den så kallade nyans värde faktiskt ge det lite färg. Så låt mig klistrar här i också. Nu är det blått. 

Och du kan göra ännu snyggare saker where-- låt oss gå till grönt. Och jag kunde göra detta på kurs med min egen kod. Men även API själv stöder funky operationer så här, kommer som nu bry oss för de kommande 30 sekunder. 

Så det är ett smakprov på vad du kanske göra med ett API, detta involverar glödlampor. Observera att CS50 har ett par par av Google Glass om du skulle vilja att ta itu med något i dessa linjer, Arduino Unos, vilket är små små datorer, i huvudsak, på en liten kretskort att du kan ansluta ledningar och andra saker till och faktiskt kontroll er verklig miljö. Och så finns det ett par av nya leksaker som vi har. Detta bokstavligen bara kom häromdagen med post, en Myo Armband. Och jag tänkte att det är ett sätt att få dig upphetsad om projekt som du kan använda med denna hårdvara skulle vara att spela detta korta klipp som de använder för att retas folks att vi nu lever i framtiden. 

[MUSIK SPELA] 

DAVID MALAN: Så på bara några veckor, du också kan vara så cool på CS50 mässan. En annan enhet som vi har ett gäng att vi är gärna låna ut till projekt kallas en rörelsekänsliga handkontrollen. Detta är en liten USB-enhet du ansluter till en dator som kan du interagera med din bärbara dator, Mac eller PC, som om du hade som en Xbox Kinect och faktiskt göra fysiska rörelser mycket som vi ser i den här framtidsvision. 

[MUSIK SPELA] 

DAVID MALAN: Så även om du har ingen aning om hur något sådant skulle kunna uppfinnas eller arbete på en hårdvarunivå, oavsett. Även efter bara några månader av CS50, och en förståelse för programmering mer allmänt, och webbprogrammering mer nyligen, och sedan även API: er, och HTTP, du har tillgång via programvaru API om du vill låna en av dessa enheter att faktiskt prata med den och inte behöver oroa sig för den underliggande genomförande information, vilket är helt överensstämmer med denna föreställning om skiktning en abstraktion som vi har sett över hela terminen. 

Så även under helgen, såg ett par bitar av nyheter. Gå först, gå på seminarier om du skulle vilja lära sig något mer på valfritt antal ämnen. Se URL där. Och den här skickades till mig av Chang, som ni vet, vem skriver ut vår armé av elefanter. Och det var en rubrik som följer. Jag är livrädd för min nya TV. Varför jag är rädd för att vända detta sak på och du skulle vara för. Så vi är nu på peka på terminen, också, där även om du har den minsta förståelse hur banan fungerar och HTTP, och säkerhet, saker som detta bör börja för att fånga ögat. Men också, kommer du att förstå om dessa saker är eller inte är verkliga hot. 

Så jag tog några utdrag från artikeln här. Och historien är som följer. Jag är nu ägare till en ny smart tv, vilket lovar att leverera streaming multimedieinnehåll, spel, app, sociala medier och internet surfning, oh och TV också. Det enda problemet är att jag är nu rädd för att använda den, säger författaren. Du skulle vara också, om du läser igenom den 46 sida sekretesspolicy för din TV. Mängden data här sak samlar är häpnadsväckande. Den loggar var, när, hur, och hur länge du använder TV: n. Det ställer tracking cookies, som vi har diskuterat, och fyrar konstruerade att upptäcka när du har visade särskilt innehåll eller ett visst e-postmeddelande om du vill kontrollera e-post på din TV. Det registrerar de program du använda, de webbplatser du besöker, och hur du interagerar med innehåll, gör allt detta via din smarta tv. Det också, creepier yet-- det är min addition-- har en inbyggd kamera med ansiktsigenkänning. 

Syftet är att åstadkomma rörelsekontroll för TV och ger dig möjlighet att logga in på personligt konto med ditt ansikte. På uppåtsidan och bilderna är sparas på TV istället för uppladdade till en företagsserver. På nedåtsidan, internet anslutning gör hela TV sårbara för hackare som ha visat förmåga att ta fullständig kontroll över maskinen. 

Mer oroande, som om det inte var smart nog, är mikrofonen. TV har en röst igenkänningsfunktion som låter tittarna att styra skärmen med röstkommandon. Men tjänsten kommer med en ganska illavarslande varning. Tänk på att om dina talade ord innefattar personlig eller annan känslig information att information kommer att vara bland de data som fångas och överförs till en tredje part. Fick det? Säg inte personlig eller känslig grejer framför TV: n. 

Så det här är faktiskt på riktigt. Och det är svårt att inte se om du gå till Best Buy eller liknande för TV-apparater dessa dagar. De är alla smarta på något sätt. Och de får smartare och creepier. Och de är helt enkelt att samla in data på ett sätt som vi har talat om och sedan ladda upp den via HTTP eller något annat protokoll till en viss server. 

Så det här var en rolig artikel i detta online webbplats här, som talade om en synnerhet fel eller felaktiga koden att vi faktiskt kan knyta i förra veckans diskussion. Så denna rubrik var som följer, historien går här, Josh Breckman arbetade för en företag som landade ett kontrakt att utveckla ett content management systemet, eller CMS som de kallas, för en ganska stor regeringens hemsida. Mycket av den berörda projektet utveckla ett content management system så att de anställda skulle vara kunna bygga och underhålla den ständigt föränderliga innehåll för deras webbplats. Det gick ganska bra för några dagar efter går live. Men på dag sex, det gick inte så bra. Allt innehåll på hemsida hade helt försvunnit. Och alla sidor ledde till standard, Var vänlig ange innehålls webbsida. Hoppsan. Josh kallades in till utreda och märkte att en särskilt besvärlig extern IP-adress hade gått in och raderade alla innehållet i systemet. 

IP-adressen inte tillhörde till vissa utomeuropeiska hacker böjd på att förstöra hjälp statlig information. Det beslutades att googlebot.com, Googles egen webbsökning spindel. Hoppsan. Efter lite forskning och förvränga runt för att hitta en noncorrupt backup, Josh hittat problemet. 

En användare hade kopierat och klistras del innehåll från en sida till en annan, inklusive en Redigera hyperlänk att redigera innehållet på sidan. Normalt skulle detta inte vara en fråga eftersom en utanför användaren skulle behöva ange ett användarnamn och lösenord, men CMS autentiseringssystem, inloggningssystemet, inte tog hänsyn till sofistikerad hacking tekniker för Google Spider. Hoppsan. 

Som det visar sig, Google Spider använder inte cookies, vilket innebär att det kan lätt förbi en check på loggas på kaka inställd för att vara falsk. Det skall heller inte uppmärksamma JavaScript, som normalt skulle uppmana och omdirigera användare vem har inte loggat in. Det spelar dock följa varje hyperlänk på varje sida om den, inklusive dem med Ta bort sida i titeln. Hoppsan. 

Så vad betyder detta i mer tekniska men ganska tillgängligt sätt? Det betyder bara att hela deras hemsida, de hade webbadresser inte olik denna som du kan se i problembild sju. Recall i problemet satt sju eller har problem satt sju att du utmanas, bl att sälja aktier till förmån för användarna. Men genomförandet av denna funktion med hjälp av får via hyperlänkar i ditt användarnamn gränssnitt, förmodligen inte den smartaste idén för om din webbplats är på något sätt nås antingen genom en människa vem klicka runt eller köpa en bot som Googles eller en Spider som de kallas det är bara söka webben försöker index webben som en sökmotor, de kunde mycket lätt hit via få denna typ av URL. Och det är funktionellt ekvivalent med, i detta fall, säljer alla aktier i Google. 

Nu uppriktigt sagt, det är helt åsnelikt att CMS begagnad JavaScript och cookies att genomföra sin inloggningssystem och inte göra det serversidan, som ni gör och kommer i pset 7-- det finns en login.php file-- alltid, alltid, alltid säkerheten bör vara görs på serversidan, inte på klientsidan, därför att, eftersom detta Artikeln föreslår och du kanske själv se vid någon tidpunkt, är det trivial för en användare, bra eller dåligt, att bara stänga av JavaScript att inte tala om cookies. Så det är din dagliga WTF. 

Det finns en mer, vilket är bara typ av skrämmande, så jag ska nämna det om bara som ett liv lektion. När du använder ett program heter som Snapchat eller liknande som säger dessa bilder bara varar fem sekunder, tio sekunder, eller whatnot. De är efemära Det är absolut inte fallet. Liksom det finns inget sätt, digitalt, att genomföra någon form av video, eller bild, eller text dela en sådan att en mottagare på den andra änden kan inte på något sätt spara uppgifterna. 

I den mest naiva sättet, någon kunde ta sin telefon. Och de har en 10 sekunders fönster medan du tittar på några snap att bara ta något annat telefonnummer och fotografera det, uppenbarligen. Så du kan bevara något digitalt på det sättet. En del av er vet hur man tar skärmdumpar på telefonen. Faktum är att om du inte vet detta, inse att åtminstone Snapchat, och jag tror att andra program dessa dagar, åtminstone berätta om mottagaren har faktiskt tagit en skärmdump av din bild. 

Men värre ändå, detta var snappening, som någon myntade nyligen, där några 100.000 snaps hade släppts i vad som kallas en torrent-fil på olika webbplatser i slutändan. Och dessa innehöll en hel drös privata meddelanden och inlägg. Det visar sig de flesta godartade, så inte vad du kanske tror. Men eftersom folk hade använde en tredje parts webbplats, logga in med sin Snapchat användarnamn och lösenord och sedan spara alla sina snaps På denna tredje parts webbplats. Och det var den tredje parten hemsida som var hackad, som just innebar någon räknat ut hur att få alla 100.000 plus av dessa bilder till sin egen hårddisk för efterföljande delning. Ärligt talat, även här är det slags av åsnelikt att Snapchat genomförs på ett sådant sätt att en tredje part kan sortera av intercept data och att det inte är knuten till ditt egen applikation som körs på telefonen. Men även här, inser att dessa saker ska inte fånga dig på sängen, eller åtminstone det bör vara ett liv lektion i här. Om du vill att tekniska information, gå till den URL där det är i dagens bilder. Okej, frågor om dagens liv lektioner i CS? Stäng av det där. Vad som helst? Vad som helst? Jag har en massa människor som checkar deras Snapchat eller något nu. 

Okej, så SQL, Structured Query Language. Låt oss slå in detta. Och också, även om vi bara repa ytan av detta språk, ger vi dig nog av språket i form av pset 7 så att du kan ta itu med några ganska vanligt funktionalitet. Men inser att det finns ett par saker som vi inte kräver av dig, men de kommer att bli viktigt kommer examensarbeten och verkligen komma att göra den faktiska webbplatser med verkliga användare är detta beslut design. 

Det visar sig att i en MySQL-databas, du har klasar av val som datatyper för dina kolumner och andra saker, men du har också Valet av en s.k. lagring motor för alla dina data, den typ av filsystem, om du är bekant, för alla dina data. Vilket format är det i slutändan sparas in? Och den vanligaste, kanske, har varit MyISAM och InnoDB, tekniska termer att vi ska bry sig om endast till den grad att en har och en inte har följande funktion. 

Antag att du har lite student kylskåp. Och antar att du och din rumskamrat, som delar denna kyl, är verkligen förtjust i att säga mjölk. Och det är, faktiskt, hur berättelse berättades för mig vägen tillbaka i dag när jag tog en kurs heter CS 161 operativsystem, vilket liknande sätt utforskar detta ämne. Så du har fått det här kylskåpet. Du är ute på mjölk. Och du kommer hem, din rumskompis fortfarande på klass eller vad som helst, och du bestämmer jag ska gå ut och få lite mjölk. Så du stänger kylskåpet, låsning studentrum, gå över gatan till CVS eller var, och få i kö för att köpa lite mjölk. 

Samtidigt kommer hem din rumskamrat från klass, kommer in i studentrummet, öppnar kylskåpet, även inser ooph, är vi ut ur mjölk. Så att han eller hon stänger kyl och sedan händer att gå till den andra CVS, som råkar vara ett kvarter bort från de andra CVS på torget, och blir i linje där för att få lite mjölk. Nu, naturligtvis, några minuter senare, ni båda kommer tillbaka, och det värsta av allt är möjligt utfall hänt. Ni båda har mjölk. Och du egentligen inte som mjölk så mycket. Så en av dem är bara kommer att sura någon gång. Så nu har du en överdriven mängd mjölk i kylskåpet alla eftersom varför? 

[OHÖRBAR] DAVID MALAN: Ja, det gjorde du inte på något sätt kommunicera med varandra att du fick mjölk. Så i det enklaste av sätt i den mänskliga världen, Hur kan du undvika den här fåniga scenario inträffar sådana att du bara sluta med ett. Text dem, ja bra. Men hur annars? Post-it-lappar. DAVID MALAN: A Post-it not. Någon form av kommunikation som berättar din rumskamrat gå inte in i kylskåpet för mjölk. Jag kommer att gå förnya på min egen. Så du på något sätt behöver för att låsa denna resurs. Så vi kan göra this-- vi kan typ av förstöra berättelsen och förvandlas till en CS berättelse vari tänker på detta som precis som en variabel, vilket lagrar ett visst värde. Och just nu, den värdet av mjölk är noll, som du inte vill att ditt rumskamrat att inspektera den variabeln och sedan fatta ett beslut sig själv baserat på tillståndet hos den variabeln om du är i färd med att ändra tillståndet hos denna variabel. 

Så en av linjerna i SQL som vi ge dig in pset 7 specifikation är detta en här. Och vi behöver inte spendera en enorm tid att prata om det. Men det visar sig, om du försöker att köpa några aktier i CS50 finans att du redan har vissa aktier, du vill kunna göra ett antal saker direkt tillsammans. Du vill kunna ett effektivt sätt, på en hög nivå, kolla okej, om jag vill att köpa fler aktier i Free, öre på lager prata om i spec, Jag vill kontrollera först hur många aktier jag har. Och antar att det är fem. Och antar att jag vill köpa 10 fler, jag slutligen vill ha 15 aktier i lager. Så jag måste ställa två frågor. Vad är läget för rörliga? Vad är tillståndet i rad? Hur många aktier kommer jag har för närvarande? Då du vill gå vidare och uppdatera den. Så det är den analoga till den mjölk i att du kontrollerar rad, och då du vill uppdatera den för om du vill köpa 10 aktier, du inte vill ändra raden till 10, du vill ändra det till 5 plus 10 eller, naturligtvis, 15. 

Den här kodraden gör att dessa två konceptuella idéer ske tillsammans eller inte alls. Ingen, inklusive någon annan användare vem som är inloggad på samma webbplats, kan på något sätt avbryta kontroll av raden och uppdatering av raden, välja och uppdateringen om du kommer. Och syntaxen inte är super självklart, men denna linje, lång är det, säkerställer att dessa två operationer kontrollera variabeln eller kolla raden och uppdatera raden hända Atomically. 

Åh var det dags igen. Textmeddelande på min telefon. Så låt oss göra detta till en lite mer konkret. Anta att du inte är genomföra ett kylskåp, och du inte genomföra Pset 7 men en faktisk bank, eller en bankomat, en Automated Teller Machine, där man på något sätt vill kunna ge användare att överföra pengar från ett konto till ett annat. OK, hänga på. Jag kommer att stänga detta nu, tack. Så vi vill flytta pengar från ett kontonummer till ett annat konto nummer, i synnerhet 100 kr. Så det här är typ av en godtycklig exempel, där man, ATM, kanske vill köra två SQL frågor, subtrahera från ett konto, och lägg till det andra kontot. Men du vill se till att dessa två linjer både hända eller inte alls. Du vill inte något att bli avbruten. Du behöver inte några smarta bad guy på något sätt står vid Bank of America med två uttagsautomater i fronten av honom och på något sätt sorts skriva i kommandon samtidigt, förhoppningsvis försöka dra av $ 200 i stället på $ 100 och bara har $ 100 krediteras. Kort sagt, vill du detta till beter sig precis som du förväntar dig. 

Och hur du gör detta i SQL-databas är du linda in det i vad som är kallas för en transaktion. Bokstavligen i SQL, kan du ringa CS50 s sökfunktion med citat unquote start transaktion. Sedan kan du köra valfritt antal av följande SQL-frågor, men ingen av dem ta effekt på databasen tills du kallar fråge quote unquote begå, om igen med PHP. Och på detta sätt kan du se till att även om du har 1.000 användare allt träffa din databas på samma gång, SQL kommer att lova att dessa två förfrågningar kommer att vara genomfört en rätt efter den andra. Så du behöver inte sluta med överskott av mjölk eller fel belopp, i slutändan, pengar. 

Så ha detta i åtanke, inte så mycket för pset 7 men för examensarbeten Om du är faktiskt försöker flytta data runt över bord som du kanske här. Men kanske ännu enklare och mer självklart att förstå med ett exempel är detta en här. Och någon mailade oss om detta häromdagen när han såg något liknande på nätet. 

Så vitt jag vet, stiftet systemet är inte sårbara för denna attack. Och jag har ingen aning om det ännu användningsområden SQL-databasen under huven. Men låt oss använda den för diskussionens skull. Här är skärmen som Harvard folk tenderar för att se när du loggar in med sina Harvard ID-nummer och deras stift. Och antar att stiftet systemet var förs i PHP och med en MySQL databas, den kod som någon kanske har skrivit år sedan kan se ut så här. Först, deklarera en variabel som heter username. Och bara få det från POST superglobal. Då kan du få en annan variabel kallas lösenord och göra samma sak. Och sedan bara köra denna långa fråga här, välj stjärna från användare där användarnamn är lika så och så och lösenord är lika så och så. 

Lägg märke till att lockigt tandställning jag har använt här bara betyder för PHP, gå framåt och ersättare värdet av dessa två variabler just där. De är inte absolut nödvändigt, men De tenderar att undvika subtila syntaxfel. Så detta ser helt korrekt vid första anblicken. Och det är. Du kan genomföra stift systemet på detta sätt. 

Men anta att en super smart och elak elev input detta som hans eller hennes stift. Så jag har tagit bort kulan tecken här i mock up, och jag har faktiskt avslöjat vad han eller hon kan vara att skriva. Och det är lite konstigt. Men vad hoppar ut på dig på potentiellt oroande om användarens input, även om du har ingen aning om vad SQL-injektionsangrepp innebär. Varför detta ser lite skumt? Vad är det? [OHÖRBAR] DAVID MALAN: Den eller är lite misstänksam. I själva verket är det ett nyckelord från SQL. Så det inte bådar gott. Det faktum att det finns alla dessa apostrof there-- i själva verket en av de enklaste sätt att bryta vissa databaser är genom att skriva in ett namn som O'Reilly som har en apostrof i den för om människan som skrev koden bakom kulisserna tar inte hänsyn till att det kan vara enkla citattecken i en användares ingång, och han eller hon använder enkla citationstecken i deras kod, dåliga saker kan hända. 

I själva verket, ännu värre, överväga detta. Om detta var igen koden att någon på Harvard år sedan skrev för stiftet systemet, märker vad som är på väg att få ersätta för användarnamn och lösenord Om användaren skriver in igen skroob som deras användarnamn och sedan en, två, tre, fyra, fem, citat eller citat unquote en jämlikar citera en. Och märker vad som är nyckeln här är att användaren inte har startade sitt lösenord eller deras stift med en offert. Och de har inte slutade det med ett citat för att han eller hon utgår från att om programmerare var inte så skarp, de kommer att ha dem apostrof i sin kod. 

Så här är koden. Och ersättning som kan nu hända är detta. Och jag har strukna vad användaren har skrivit in. Så innan, efter. Och märker vad som är milt oroande nu om den högra halvan av den här SQL-kod? Det är lite mer komplicerat, visserligen, än de frågor som vi har sett. Men det kan möjligen vara bra om du är säger välj stjärna, vilket är att välja allt från användarens bordet där användarnamn är lika skroob och lösenord lika med ett, två, tre, fyra, fem eller ett är lika med ett. Vad är den logiska implikationen av den sista meningen förmodligen? Det är bara alltid sant. 

Och eftersom vi har sorts gissat eller räknat ut genom trial and error att programmeraren som skrev den här koden inte räknar med en människa eller dålig människa skriva i apostrof också, vi kan syntaktiskt slutföra SQL-fråga med något meningslösa utan något som är syntaktiskt felaktigt som alltid utvärderas till true. Så om den här koden används för att svara frågan sant eller falskt bör denna användare tillåtas att passera, den Svaret är alltid tydligen går för att vara sant eftersom det kommer alltid att välja något från databasen eftersom en av kursen motsvarar alltid en. 

Så vad är lösningen? Väl i pset 7, vi faktiskt undvika detta alla tillsammans. Vi ger dig en sökfunktion, och vi uppmuntrar dig att använda frågetecken som platshållare, liknande i anden till printf s% s, men vad är nyckeln om frågetecken här är om du faktiskt läser igenom functions.php, där vår frågefunktion är införd, dessa frågetecken ska undantas, vari något potentiellt farliga som ett enda anbud slås in en förrymd enda anbud. 

Så det här är vad som är verkligen händer om du Använd CS50: s sökfunktion eller valfritt antal av tredje parts fria bibliotek som göra samma sak. Spelar ingen roll i det här fallet, i grönt, om användaren har matat in i en och samma pris eftersom fråge funktion som vi skrev är kommer att lägga snedstreck före sådan farlig citat. Så detta är inte, i faktiskt kommer att vara legit. Detta är som att skriva in en galen ser lösenord som är, naturligtvis, inte kommer vara skroob faktiska lösenord. 

Så takeaway för CS50 är en, absolut alltid använda något som CS50: s sökfunktion eller den underliggande bibliotek, som råkar vara kallad PDO. Men aldrig, aldrig, aldrig göra koden så här utan att fly eller skrubb som de säger ingångarna. Och du kommer någon gång förmodligen stött på någon hemsida som denna. I själva verket verkar det vara fallet som på flygplatser och hotell på platser där de har gratis Wi-Fi tillgång som man måste logga in på, dessa webbplatser är alltid fruktansvärt genomföras. Och så en sorts roligt hemma träning, inte för ont uppsåt eller mer en kul på vägen motion, är att bara skriva en apostrof, ett enda anbud, in i ett formulär på en viss webbplats och se vad som händer. Och om servern kraschar eller ger du någon form av felmeddelande, Det kan mycket väl vara så att någon har inte förutsett detta. Och så ska du larma rätt myndigheter och gå längre. 

Så nu ni ska förhoppningsvis förstå lite mer geekhumor här. 

[LAUGHTER] DAVID MALAN: Du vet att du är en nörd. För nästa flera år, kommer du ihåg som små Bobby Tabeller är på grund av denna tecknade här. Så ha det i åtanke när vi kontext switch en sista gång idag till JavaScript. Vi har tillbringat ganska lite tid på syntaxen i PHP eftersom det är faktiskt super lik C. Och fint nog, Javascript för är super likt C: s syntax liksom vi ser i bara en stund och när vi ska se senare i veckan i synnerhet. Vad du kan göra med detta språk, dock, är desto mer kraftfulla, speciellt med API: er. 

Men först en snabb rundtur. Så en, i JavaScript, det finns ingen huvudfunktion, vilket är trevligt. Som med PHP, kan du bara skriva kod. Villkor se ut så här. Och booleska uttryck kanske se ut så här eller så här. Växlar existerar, och de kan se ut så här. Fyra slingor se ut så här. Medan slingor se ut så här. Vill whiles se ut så här. Och sedan arrayer ser ut detta, mycket likt PHP. Men märker att det i JavaScript dig deklarerar en variabel inte med en dollar underteckna, inte med en datatyp men bokstavligen genom att säga var för variabel innan. Det är alltför löst skrivit genom att den har olika typer, men du behöver inte explicit deklarera dem. Och sedan en sträng, för Exempelvis kan se så här, sträng som kallas s i detta fall. Och sedan ett objekt. Och dessa får vi se mer inom kort. Och ett objekt är kanske en av de oftast ses datastrukturer i ett JavaScript baserat programmet eftersom det tillåter du associera godtyckliga Nyckelvärdesparen bara som PHP: s associativa arrayer och precis som din egen hashtabell eller försök som vi genomfört ett par veckor tillbaka. Så låt oss faktiskt se vad vi kan göra med JavaScript. Och framför allt, det är en lista av funktioner att webbläsare har att tillåter oss att koppla JavaScript på en webbplats på följande sätt. Javascript används ofta som en klientsidan skriptspråk. Det är inte sammanställt. Det också tolkas. Men till skillnad från PHP, som har varit igång på servern, i webbservern, eller djupt inne i klienter, Javascript är annorlunda i det att den vanligtvis körs i webbläsaren. 

Så någon JavaScript-kod som du börjar skriva för pset 8, eller ditt slutprojekt, eller i den verkliga världen i allmänhet går ska sparas på servern, absolut i ett punkt HTML eller dot JS för JavaScript-fil. Men webbläsaren går att hämta att JavaScript kod till din egen instans av Chrome, eller IE eller Firefox, eller vad som helst. Och koden faktiskt kommer att få exekveras insidan av din egen webbläsare. Bara för att göra detta mer verkliga, låt oss se detta i konkret form. 

Vi har ingen aning om vad denna kod gör utan att egentligen läsa igenom det. Men låt mig gå till Facebook.com utan att logga in. Låt mig gå till Inspektera Element och gå till, låt oss säga, Nätverk och ladda om sidan. Och vi kommer see-- låt mig flytta Ladda den Sida att få alla förfrågningar till nya. Och den allra första fil jag ser är CSS, CSS. Här är den första JavaScript-fil, och jag har ingen aning om vad detta innebär, men här är några av de JavaScript-kod som driver Facebook. Det är inte ens riktigt att avslöjar att zooma in. Det är fortfarande lika meningslöst. 

Men du kommer att se ännu nere, det finns ännu mer av dessa JavaScript-filer. Hoppsan. Det är en ping. Låt oss gå ner lite ytterligare, vidare, vidare. Det finns en. Det finns en. Det finns en. 

Så även om Facebook, bakom scener, är skriven delvis i PHP och Facebooks egen version av dessa, det finns en enorm mängd av JavaScript. I själva verket vilken som helst av den chattar du gör på Facebook, någon av inline tidslinjeuppdateringar att hända i realtid, allt detta drivs av JavaScript. Yeah? 

PUBLIK: Jag är inte säker om detta är Facebook, men jag trodde att Facebook utvecklat sin egen in-house kodspråk? DAVID MALAN: De gjorde. Så det är därför jag säger en varians PHP heter Hip Hop som de faktiskt tilläggsfunktioner så att när Mark genomfört första Facebook, det var skrivet i PHP. Och den sortens förblivit den typ av främre språk som de använder för mycket av deras kodning, men det har inte varit ett språk som är skalar särskilt väl till miljarder människor. Och så de har lagt till sin egen förbättringar bakom kulisserna. Och de använda valfritt antal av andra språk för olika delar av sin infrastruktur. Så ja, det är en varians vad vi nu känner som PHP. 

Så låt oss ta en titt vid ett par exempel om hur vi kan använda JavaScript här. I dagens källkod, vi har en massa filer, av vilka den första, låt oss kallade DOM noll. Så DOM noll ser ut som följer. Låt mig gå in i den här katalogen och öppna upp domzero.html, vars topp har en doc typ deklarationen, säger här kommer HTML 5. Och nu här är en HTML-tagg. Här är huvudet taggen. Och här är vad som är nytt idag. 

Vi har nu en script-tagg insidan av huvudet på sidan. Och detta tydligen inte väldigt lite, men varsel som jag har definierat en manus, ett JavaScript. Och som en sidoreplik, eftersom detta är en vanlig missuppfattning, JavaScript har absolut ingenting att göra med Java, språket att några av er kanske har lärt sig i APC. Det var mer av en marknadsföring sak än något annat, ridning coattails av Java år sedan. Men JavaScript, inget att göra med Java, precis på samma sätt, och irriterande, förvillande namngivna. 

Så här är hur du deklarerar en funktion i JavaScript, bokstavligen säga funktion, sedan namnet på funktionen, sedan någon argument som den kan komma att vidta, precis som i PHP. Visar sig i JavaScript, en av de mest irriterande funktioner som finns är alert. Detta är ett litet fönster som kommer att dyka upp och varna dig till viss del av informationen. Det är allmänt ogillande. Men vi ska använda det som vår första övningen här. 

Lägg märke till några funktioner i JavaScript. Apostrof och dubbla citationstecken egentligen inte någon roll längre. Apostrof och dubbel citat kan bytas ut mot varandra, medan det i C, måste du använda dubbla citattecken för strängar, och du har två singel citerar för tecken. I JavaScript världen, många människor, de flesta människor använda enkla citattecken runt strängar bara för att det är en stilistisk sak. Men vad är det plusoperatören här, som vi inte har sett förut? 

PUBLIK: Sammanlänkning. DAVID MALAN: Sammanlänkning. Så C har inte ens detta. PHP har punktoperatorn, som gör detta. JavaScript har plusoperatören, som förvirrande är precis som Java. Nu vad som händer här? 

Så här är då en grundläggande förståelse för den bilden Vi kastade upp ett par dagar sedan kommer in i bilden. Kommer du ihåg när vi hade en enkel version av en HTML page-- Det sa bara, hallå världen. Och sedan drog vi ett träd till höger, vilket hade ett gäng rektanglar och linjer ansluter dem som ett släktträd. Så det är den så kallade DOM eller Document Object Model. Och det visar sig att du kan komma åt rektanglar i det trädet med syntax som följande. Du säger bokstav dokument, vilket är ett speciell global variabel i en JavaScript program som har en funktion i samband med det att du kan komma åt liknar en struct, men du helt enkelt säger prick och sedan funktionens namn, få del av ID. 

Elementet jag vill komma är tydligen citera unquote namn. Och så vill jag få dess värde. Nu vi får framför oss själva. Jag är inte ens säker på vad allt detta handlar om. Låt oss spola fram till HTML på den sida, som är super enkelt. 

Lägg märke till att jag har definierat a bildar här nere. Märker jag har gett det en unik ID, även om vi inte har använt detta attribut innan. Men det finns i HTML. Du kan unikt identifiera en viss bit HTML med en identifierare som denna. 

Observera nu this-- visar sig HTML stöder, per den tvätt lista för en stund sedan, en hel gäng händelsehanterare. Och denna händelse handler står på skicka. På användar inlämnandet av detta formuläret, ring följande kod. Och den kod som händer att kallas eller avrättas är just detta, den grekiska funktion följt av return false. Allt annat bör vara ganska bekant. 

Här är en ingång av typen text, vars ID, i detta fall, kommer att bli känt. Vi har inte en faktisk namn attribut denna time-- och en skicka-knappen. Så den sida som ser ut så här. Och det resulterande beteende, du ser, ser ut så här. Sidan det lokala värdar säger: hej David, knappast en estetiskt tilltalande sätt att hälsa en användare. Men vad som egentligen händer? 

Tja, fundera på vad det här är. Detta är ett textfält. Och i enlighet med den HTML här har jag gett den en unik identifierare kallas citat unquote namn. Under tiden har jag sagt när användaren skickar formuläret genom att trycka på Enter eller klicka på Skicka knappen, anropa funktionen kallas Greet och sedan återvända Falskt. Låt oss betrakta dem i omvänd ordning. Lägg märke till när jag klickar på Skicka, den Webbadressen till den här sidan ändras inte. Webbläsaren ikon inte börja snurra. Jag ville inte gå någonstans, och det är bokstavligen för att jag sa returnera False. Return false kortslutning eller stannar standardbeteendet för ett formulär. Så att då lämnar oss med detta en sista fråga. Vad betyder Greet göra? Tja, Hälsa tydligen anropar en funktion som kallas Alert, passerar i en långa argument som är resultatet av att sammanfoga tillsammans en gäng strängar, hej kommatecken utrymme, då vad detta tillbaka. Så dokument är som en global variabel till den rot det trädet, ringer en speciell funktion, annars numera känd som en metod. En funktion som är insidan av en variabel är kallas en metod i stället för en funktion. 

Så få inslag av ID. Vilken faktor gör du vill komma med sitt ID? Citera unquote namn och då specifikt värde. Så med andra ord, den koden helt enkelt finner textfält vars ID är namnet och sedan får sitt värde. Så om jag skulle ändra på detta och säger Davin istället för David, och klicka på Skicka, nu har vi har en hälsning till Davin. 

Okej, så alla fina och bra. Men låt oss se om vi kan göra detta lite renare eftersom bara skriva kod som detta är generellt kommer att vara rynkade på. Detta kommer att se skrämmande. Men vad är det första skillnaden att du noterar här i denna version förutom namn byta till DOM en? Vad strukturellt ser annorlunda om detta jämfört med andra? Yeah? PUBLIK: Är formuläret på toppen av skriptet nu? DAVID MALAN: Ja, är formen på topp av manus till någon nyfikna anledning. Så det är det första som hoppar ut på mig också. Och lyckligtvis åtminstone, denna del är identiska. Så det enda som verkar att vara annorlunda är detta. 

Så här är vad som är snyggt om JavaScript 2. Och det gör det svårt att förstå vid första anblicken, speciellt för examensarbeten om så du tittar på exempelkod på nätet, men det kokar ner till några grundläggande syntaktiska funktioner. Här är återigen att global variabel dokument. Här är återigen att metoden eller funktion som säger att få elementet genom ID. Den här gången vill jag få ID kallas demo. Var är det? Det är tydligen rätt här, själva formuläret. 

Och nu märker att tydligen om jag få tillbaka den noden från trädet som representerar formen själv, inte ett textfält, det visar sig att formen, som nod eller rektangel från trädet, har vad vi kallar en fastighet, mycket, mycket, mycket likt i anden till en struct i C. Det är bara en datamedlem insidan av denna rektangel. 

Så jag har fått formen här, och jag är fästa, eller jag tilldela, till dess On Submit handler eller snarare på Submit egendom följande funktion. Och detta är den absolut galnaste sak hittills syntaktiskt. Det visar sig i JavaScript och PHP, och ärligt talat för den delen i C, även om vi inte gör det, kan du lägga namnlös, anonym, eller AKA lambda funktioner som inte har ett namn men kan kallas ändå. 

Så vad jag gör här är att jag tilldela Detta On Skicka egendom, som är inne i denna nod i min DOM-trädet, en Funktionen, funktionspekaren om du kommer. Den funktionen har ingen namn, men det betyder inte roll eftersom vi får se i ett ögonblick hur man kalla det. När denna funktion anropas, denna kod blir avrättad, då false returneras precis som förut. 

Men lägg märke till vad jag har gjort. Vid denna punkt i historia, jag har ett formulär. Det har fått ett unikt ID som kallas demo. Här nere har jag en script-tagg som utför följande kod. Den fäster till den nod i trädet att det är på Submit egenskapen av denna funktion här. Och precis som på grund av hur webbläsare fungerar, När jag nu klicka på Skicka eller tryck Enter, denna funktion kommer att bli synad. Det behöver inte ett namn för vem fan bryr sig om vad den heter. Den enda gången det någonsin kommer att få heter är när jag skicka formuläret. Det finns ingen anledning för mig, den humana utvecklare, att faktiskt kalla det någon annanstans. 

Nu är det bara som en teaser, som om det var inte emot att böja tillräckligt, Vi kan även göra detta ser mer kryptiskt med hjälp av en super populär bibliotek som heter jQuery. Faktum jQuery och JavaScript är ofta sammanblandade. Och vad vi ska göra på onsdag är start med hjälp av detta språk och dessa bibliotek att bygga alltmer asynkron och dynamiska applikationer liknande karta få tillämpningar, tillämpningar att uppdatera webbsidan i realtid tiden, ungefär som Facebook eller Gchat göra, och inte längre begränsa oss till Att slå in med en get eller bara inlägg ensam. Så jag kommer att se dig på onsdag. 

[MUSIK SPELA]