DAVID MALAN: Okej. Detta är CS50, och detta är I slutet av vecka nio. Det har varit en virvelvind över de senaste dagarna. Och problemet satt sju, om du är knä djupt in i det, inser att det är ganska lite nytt som finns där. Men låt oss se om vi inte kan pussla allt tillsammans här i korthet innan dess vridande sig i ännu en annan riktning och ser var annars kan vi gå. 

Så hittills har vi pratat om HTML. Vi har pratat om CSS. Vi har pratat om PHP. Du har börjat uppleva SQL. Idag ska vi prata lite om JavaScript. Men hur gör alla dessa disparata språk passar ihop? 

Så vi pratade förra veckan om Begreppet att ha en server. Så låt oss bara dra denna rektangel som en webbserver här. Och en webbserver fungerar säkert filer. Och en del av dessa filer kan vara HTML-filer. Så en av de saker som en webbserver kan spotta ut kan vara en fil som Vi ska bara dra ut så här innehåller vissa HTML. Så i lekmannatermer, vad gör HTML kan du göra? 

PUBLIK: Sidan ser trevligt. 

DAVID MALAN: OK, gör en sida ser trevligt, även om jag tror att jag har bevisat som annars. Så HTML låter dig lägga ut sidor strukturellt, och det gör att du kan slags estetiskt märka upp en sida, markera statiskt innehåll, så att du kan sedan visa den med en webbläsare. 

Men det är nyckeln. Det är statiskt innehåll. Du skriver det, spara det, och sedan skickas du det. Och webbservern fungerar sedan det upp till besökarna. 

Men vi stilisera saker med hjälp av en annan språk helt och hållet. Vi började använda en stil attribut på vissa taggar. Och stilen attributet låt oss ställa saker som teckenstorlek och färg. Och du har förmodligen börjat upptäcka, eller du kommer snart att för final projekt potentiellt, men ändå andra egenskaper som du kan använda i CSS. Och så i lekmannatermer, vad egentligen då gör CSS göra? De är bara exempel därav. Vad innebär det att låta dig göra det HTML verkar inte från vad vi har sett så här långt? 

PUBLIK: Definiera stilar själv. 

DAVID MALAN: Definiera stilar själv. Så definiera saker som klasser som du kan ha stött på, eller unikt identifiera noder i ett dokument så att du kan stilisera dem. Men mer specifikt, skulle jag säga att CSS verkligen gör att du kan ta saker i sista kilometern och låter dig ange mycket mer exakt estetik, medan HTML för det mesta låter du strukturera dina sidor. 

Och även om det finns vissa standardvärden, som vi såg taggen för en rubrik tagg, vilket grovt sett gjorde saker stora och djärva. Det är en ganska allmän definition av taggen - stora och djärva. Vilken textstorlek är det? Vilken färg är det? Hur fet är det? Och CSS kan du mer fint tune sånt. Förutom layout, som en del av er har sett. 

Och ärligt talat, är CSS lite av en rörig språk. Det är mycket kraftfull i att du kan göra bokstavligen alla webbplatser som du har ses på webben i dag med det, men det är typ av en smärta i nacken. Och en del av er har slagit i huvudet mot väggarna redan bara för att göra något dumt som centrum en meny på Problemet set sju om du har fått till den punkten redan. 

Men inse, dessa saker bli lättare med tiden. Du börjar märka mönster. Och återigen, kommer Google att bli din vän för de olika sätt på vilka du kan lösa dessa typer av problem. 

Och jag vågar säga med CSS och HTML mer allmänhet, kan man lösa problem i många fler sätt, som alla kanske mycket väl vara korrekt, än du kan i något som C, även nu PHP eller Javascript. Det finns bara många olika sätt att lägga ut saker. 

Men det började få rörigt, sade vi. Bara slags sammanblandning din HTML och din CSS med stil attribut var lite slarvig. Och så vi istället sagt, typ av abstrakt sett, att du borde åtminstone börja faktor ut din CSS förmodligen. Inte din stil attribut, men åtminstone använder stil-taggen inuti vad del av webbsidan? 

PUBLIK: Head. 

DAVID MALAN: I huvudet. Fram till nu hade vi bara titeln upp där, men du kan också lägga till en stil tagga, och du kan lägga din CSS grovt talar mot toppen på sidan. Men sedan tog vi ett steg längre och vi räknade ut det mer i en separat fil. 

Och så dessa två filer var på något sätt nu länkade. Och faktiskt var det tagg som gjorde det. Och vad som var ett av de övergripande motiv för facto titt CSS desto mer? 

PUBLIK: Återanvändning. 

DAVID MALAN: Återanvändning. Rätt? Du kanske har sett i p-set redan sju att en hel del av sidorna, de inköpssidan, säljsidan, den portföljsida, troligen strukturerade något liknande sätt. Det finns en CS50 finans logotypen högst upp om du inte har bestämt dig för att ändra det. Det finns en sidfot på ner på sidorna. Och CSS kan du sedan faktor ut den till en separat fil så att om du vill ändra något globalt över hela din webbplats, kan du verkligen bara ändra på ett ställe. 

Men det finns ett pris som du betalar potentiellt genom att ha vägts in CSS från min HTML-fil i en separat fil referera den med den tag, som vi såg i måndags. Vad kan nackdelen vara på detta? När jag tänker tillbaka en vecka sedan att när vi är talar om HTTP och TCP / IP och hur Internet fungerar. Något över här? 

PUBLIK: Det tar längre tid. 

DAVID MALAN: Det tar längre tid. Varför? 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Ja. Så det utan tvekan tar lite mer tid. Eftersom man är CSS uppenbart inte i samma fil. Så nu har du att göra inte en, men två ansökningar. Och var och en av dessa ansökningar som vi såg i Chrome i den så kallade inspektör, och vi tittade på fliken nätverk, var och av dessa filer kräver en HTTP begäran, som vi såg tar viss tid. Nu, kanske är det inte mycket. Kanske är det bara 20 millisekunder. Det kanske är 200 millisekunder. 

Men tänk på en sida som Facebook, eller CNN eller Google, som är mycket större än de exempel vi har tittat på hittills. Dessa sidor kan ha massor av filer, vilka var och en kan kräva en hämtning av en fil. Så saker kan potentiellt börjar sakta ner. 

Och speciellt i dessa dagar när vi alla har mobiltelefoner i våra fickor och långsammare internetuppkoppling, behöva vänta ytterligare några millisekunder, några mer millisekunder för ytterligare filer kan faktiskt vara långsam. Latens är det ord som beskriver typ för att vänta på att du har att du upplever när väntar någon upplysning. 

Men det finns en uppsida. Så det är inte all slags - det faktiskt är lite av en gungbräda här. Nackdelen nu, men vilka webbläsare kan göra om de är smarta för att undvika behöva begära samma styles.css filen igen kan vara att göra vad? 

Cache den. Så caching - C-A-C-H-E - innebär i allmänhet här bara för att spara filen du begärde första gången, och sedan kontrollera din cache för det. Kontrollera att du är typ av lagringsbehållare, och om du redan har en kopia av styles.css, även om någon annan sida i p-set, eller någon hemsida, begär det igen, bara för att ge den användare samma cachad kopia. Bry dig inte om att begära det. 

Nackdelen där, men som en del av er har snubblade över i p-set. Om du gör en ändring på servern och du går tillbaka till webbläsaren och du ladda om, ibland webbläsaren gör dig en tjänst och inte bry åter hämtar din styles.css fil eftersom, kom igen, vad är oddsen att dessa stilar som Facebook använder kommer att förändras timme för timme eller dag till dag? Det är ganska lågt. De kan förändras över tiden, men inte per minut eller per timme. 

Så ett trick, bara FYI när man gör webb utveckling, ofta hålla ner skiftnyckel till exempel och sedan på ladda i din webbläsare, och att viljan vanligtvis tala om för webbläsaren reload allt, även om du redan har det i cachen. Så återigen, upsides och nackdelar, men alla av dem slutligen utforma beslut. 

Så nu, gjorde vi inte bara avslutar berättelsen här. Om jag nu går tillbaka och tillbaka och tillbaka och tillbaka, började vi att presentera inte bara HTML, men PHP. Så i lekmannatermer, vad gör PHP låt oss göra? 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Vad är det? 

PUBLIK: Införa logik i koden. 

DAVID MALAN: Ja, införa logik i koden. Så det är ett riktigt programmeringsspråk med loopar och variabler och funktioner och villkor, samt alla de saker som vi har använt vägen tillbaka när sedan scratch. Och PHP, vi har sett, kan användas antingen på kommandoraden - det behöver inte ha något att göra med webben, även om det är egentligen dess ursprung och vad det tenderar vara bra på och bidrar till - men du kan använda PHP enbart av naturen av det faktum att den har en print () funktion, och en printf ()-funktionen, eller ett eko ()-funktion. Det finns klasar sätt du kan skriva ut text med PHP. 

Därför kan du använda denna programmering språk till utgång exakt vad vi pratade om tidigare. Du kan dynamiskt generera din HTML. Kanske inte alla av det. Kanske hårda kod saker, som den sidhuvud och sidfot, och logotypen, och dina stilmallar, och allt detta. Men för något som p-set sju, där du manipulera lager och visar användarens portfölj, vilket är kommer att dynamiskt förändra, du kan säkert använda PHP och logiken ger du som programmeringsspråk för att utmatning dynamiskt delmängder på sidan. 

Så när du talar om dynamiska webbplatser, eller webbprogrammering, det är vad du egentligen pratar om. Med hjälp av ett språk som PHP, eller saker heter Python eller Ruby, eller Java, eller ytterligare andra språk, för att fråga en databas ofta, eller en annan server, och sedan dynamiskt spotta ut HTML. 

Nu slutresultatet, som en sidoreplik, är som HTML på de flesta webbplatser, inklusive din p-set sju, är förmodligen kommer att bli en stor oreda om man tittar på käll kod i en webbläsare. Det är inte en stor sak. Vid denna punkt, när vi bryr oss om stil, bryr vi oss om det saker som du skriver. Vi kommer inte att bry sig om saker att det som din kod utgångar. Så oroa dig inte om indrag här om det är PHP som är faktiskt mata grejer. När allt kommer webbläsaren inte vård, och en human inte kommer att leta vid källan ändå. Vi personalen, till exempel, skulle att titta på din PHP. 

Så låt mig ge ett snabbt exempel nu varför annars detta kan vara användbart. Så ärligt talat, jag kan inte minnas den senaste gången jag använde C för att lösa ett problem i den verkliga världen. Det var nog i forskarskolan vid Jag behövde för att använda ett språk som var ganska låg nivå och gav mig möjlighet att göra något mycket hög utföra för att verkligen rädda så många CPU cykler som jag kunde, till stor del eftersom jag använde enorma datamängder, och varje CPU-cykel räknades. Och ärligt talat, även i saker som telefoner dessa dagar och andra enheter där du inte riktigt har så mycket minne och du inte riktigt har så mycket CPU, med hjälp av snabbare språk fortfarande är tilltalande. 

Men i den verkliga världen, när du bara vill kasta något program tillsammans med analysera några data eller du har samlat en hel massa registreringar för några studentgruppen och vill mycket snabbt automatisera skicka e-post en efter en till var och en av dem registranter, du kommer att nå för en högre nivå språk än C så att säga. Något som PHP eller Python eller Ruby, eller ett halvt dussin andra som finns dessa dagar. Men de tre är nog den mest trendiga just nu. 

Och vad detta innebär är att du kan öppna upp en textredigerare som gedit eller mest något annat och sedan bara börja skriva kod utan att behöva oroa om att sammanställa, utan att behöva verkligen oroa minneshantering, tanke om att lite slarv kommer så småningom komma tillbaka bita dig om datamängden blir större eller problemet blir stora. Men vad detta innebär för oss är följande. 

Låt mig gå vidare och köra stavnings från problem set sex. Så det här är min trie-baserad implementering som jag använde på den stora styrelse där jag utförde inte så bra. Vi kommer tillbaka i en veckas tid och se över de som fick sluta på toppen av stor ombord på vår sista föreläsning. Men för nu, låt mig gå vidare och bara kör min lösning i text, så gör vi King James Bible, och nu kör vi. 

Så de är alla de förment felstavade ord av King James Bible. Och min genomförandet tog halv sekund totalt. Så inte alltför illa om detta dator. Men tänk på hur mycket kod jag var tvungen att skriva. Tänk hur mycket kod som du var tvungen att skriva. Tänk hur många timmar du spenderat i D-hallen eller din studentrummet eller var faktiskt koda upp den lösningen. 

Tja, om jag faktiskt har en högre nivå språk som PHP, ta del av vad jag kan göra här. Först antar att detta är i stället din distribution kod. Det här är en fil som heter stava. Det är tillgängligt som en del av dagens fördelning kod. Och jag ska vinka min hand på de flesta av detaljerna, men det är faktiskt ett intressant exempel på hur du kanske port ett språk som C över till PHP. Jag bokstavligen öppnat två textfönster, en med min C-versionen av speller.c, och jag har precis börjat att översätta den i min bege dig till PHP och skriva ut det med hjälp av de närmaste likvärdiga funktioner. 

Så en del av dessa saker är annorlunda. Vi såg förra gången att PHP inte använder inkludera på riktigt samma sätt. Den använder kräver normalt, även om inkluderar existerar. Define är lite annorlunda från # Define i C, men det är hur vi gör en konstant. $ Argc det visar sig förekommer i PHP, så vi har sett det förut. Dessa är bara variabler, allt från som börjar med dollartecken. Minns dessa är bara ett gäng flytande punkter. 

Så lång historia kort, är du välkommen att bläddra igenom detta om nyfiken, är detta nästan en omvandling av linjen-för-line C-versionen av speller.c i PHP. Och du kan göra det här igen för ett halvt dussin andra språk. 

Men det som är intressant är det här. Eller vad är uppriktigt sagt nedslående är detta. Låt mig gå vidare och skriva om dictionary.php, och hävdar att jag är kommer att gå vidare och åter genomföra Problemet set sex här. 

Så låt oss föreslå först att i detta fil, som kommer att genomföras i PHP, så låt mig öppna mina tags som. Låt mig ge mig själv en global variabel, $ storleken blir noll. Och jag ska ge själv en hash-tabell. Jag använder en hashtabell för denna sak. Hur förklarar jag en hashtabell i PHP? Klar. OK. 

Så öppna fäste nära fästet representerar vad i PHP, som vi har sett? En matris, men en array som skulle kunna vara en associativ array. En associativ array är en datastruktur som associerar nycklar med värden. 

Nu på enklast numeriskt indexerad samling, dessa nycklar är vad? Noll, ett, två, tre, eller hur? Old school grejer tillbaka från C. Men det kan också vara strängar som foo, och bar, eller Maxwell, eller någon sådan sträng. Så jag kan utnyttja det på bara ett ögonblick. 

Låt mig gå vidare och förklara en funktion som - låt oss göra load () först. Så fungerar load (). Och PHP är lite annorlunda i det du bokstavligen skriver funktion, men du skriv inte en returtyp. Jag kommer att gå vidare och säga att lastfunktion () bör ta i Argumentet $ ordbok, precis som C-versionen gjorde. Jag gör det från minnet. 

Och jag föreslår att jag är kommer att göra detta. Jag är helt enkelt ska göra foreach. Jag ska ringa en funktion som kallas fil (), som går i namn av att fil, vilket är den rörliga $ Ordlistan som $ ord. Och sedan insidan av min för loop här, jag är kommer att gå vidare och lagra i min $ Tabell som $ ord blir sann. Klar. Vänta. Klar. OK. 

Det är lasten ()-funktionen säger i PHP. Nu, varför det fungerar? Och jag typ av fusk här. 

Så, en, foreach vi såg kort förra gången. Det betyder bara att du kan iterera över en array utan att bry sig med i och n och plus plus, och allt detta. Dictionary är naturligtvis filnamnet, ungefär så stora som små, det två ordböcker som vi använde förra gången. Filen är en funktion som öppnar upp text fil, läser den i rad för rad, och händer dig tillbaka ett stort utbud, var och en av vars element är en linje från den filen. Så det är en kombination av fopen, och fread och while-slinga, och fclose, och allt detta. Slutligen, som ordet betyder bara att det är den variabel jag ska ha tillgång till på varje iteration i denna slinga. 

Så kort sagt, denna liner här betyder öppna filen vars namn är i ordbok, variabeln, iterera över den rad för rad, och varje gång du får en linje, lagra i en variabel som kallas ord, och sedan göra något med ord. Vad vill jag göra? Jag vill sätta ord i min hash-tabell. 

Tja, kan jag sätta något i min hash tabellen precis som i C med hjälp av hakparenteser. Detta är namnet på min hash-tabell. Jag ska till index in i den hash bord på den här platsen. Så inte bracket noll, inte fästet ett. Konsol quote unquote något, oavsett vad det ordet är. Och precis som du kan ha i din hashtabell arbete trie, du bara lagra effektivt en Boolean, implicit eller explicit. Klar. Jag lagrar värdet true. 

Nu finns det ett par saker Jag slarva på här. Tekniskt sett är det att bli en irriterande ny linje, / n, vid slutet av vart och ett av dessa ord. Så jag ska nog ringa en PHP funktion kallas chop (), vilket kommer att bokstavligen hugga av det där. Och jag faktiskt behöver göra en annan sak. Jag borde nog öka storleken på varje iteration, så jag håller koll globalt för vad det är. Och ärligt talat, och detta är en av de stupider aspekter av PHP, om du är med hjälp av en global variabel, måste du uttryckligen säger att du är. Så jag ska faktiskt skriva i den globala $ Storlek, global $ bord, och nu min funktion är klar. 

Så inte riktigt så enkelt som tidigare, men antagligen tog mindre tid än C version, kanske? OK. 

Så nu ska vi göra funktionskontrollen (). Låt oss se om det åtminstone tog timmar i sträck som det tog oss i C. So Låt mig gå vidare och förklara kontrollera som en funktion. Tar i argumentet ord, vilket är kommer att komma från stavningskontroll. Och jag ska bara kolla om det följande variabel isset, bord fäste strtolower av ord - låt oss balansera alla mina parenteser - sedan återvända sant. Else - det var verkligen det hårda del av detta program. Else, returnera false. Klar. Det är check (). 

Nu, varför detta arbete? Tja, som jag passerade i ett ord, vilket är en sträng. Två, Jag kollar insidan av hash bord, som kallas $ bord. Jag tvingar den till gemener genom att ringa en funktion ganska lika tolower () i C, men det gör hela ordet, inte ett enda tecken. Och om det är inställt, med andra ord finns det är ett värde som är inställt, med andra ord, om det är sant, så ja, detta är ett ord. Eftersom jag lagt det där med last (). Och om inte, kommer jag att returnera false. 

Nu de andra är lätt. Funktion storlek (), hur gör jag detta? Jag gör allt väsentligt åter $ storlek. Men jag behöver tekniskt att göra detta irriterande sak. Och faktiskt upp höra, jag skär ett hörn för många. Jag måste verkligen göra global $ bord. 

Men som sagt, lossa). Lasta () är häpnadsväckande. Funktion unload (). Hur jag vill genomföra unload ()? Klar. OK. 

Så lossa (), är minneshantering helt tagit hand om för dig i något som PHP och en hel del högre nivå språk. Så det här är fantastiskt. Liksom varför i helvete har vi spenderat det förflutna åtta plus veckor på C skrift tydligen riktigt långsam, riktigt tid konsumerar problem med tiotals timmar av arbeta under våra bälten? 

Tja, för en sak, detta kan fungera bra för små program. Den rusade verkligen upp min utvecklingstid. Men låt oss se vad som händer i den verkliga världen. 

Låt mig gå in i den här katalogen i ett terminalfönster. Det finns stavningskontroll. Och märker som en åt sidan, och du kanske har stött på detta i problembild sex eller problem set sju. Du behöver inte strikt behöver avslutar PHP-filer med. php. Om du lägger en rad som den första på högst upp, det är en speciell linje av syntax som i huvudsak innebär att hitta det program som kallas PHP och använda den för att tolka denna fil. Så nu ingen vet riktigt att Jag kör ett PHP-program. Jag kan köra det precis som om det var något som sammanställts i C. 

Men här är det. Faktiskt, låt oss göra det här igen. Dropbox/pset6 /. Det finns stavningskontroll. OK, 0,44 sekunder. Det fick fortare denna gång. 

Nu går vi in ​​i PHP-version. Fin touch. Men tänk hur mycket tid Jag sparade på kontorstid. OK. 

Så 3,59 sekunder, som faktiskt låter inte korrekt heller. Men det beror på lång historia kort, när du skriver ut en stor mängd saker till skärmen, som själv saktar ner saker. Vad det verkligen tog processorn i apparaten var 3,59 sekunder, i kontrast till C, som tog 0,44 sekunder senast. Det är verkligen en order av magnitud annorlunda. 

Så var är det pris som kommer från? Varför är det så mycket långsammare? Varför PHP gå så dåligt? Danielle? 

PUBLIK: Du gjorde inte riktigt använda en hash-tabell. 

DAVID MALAN: Jag gjorde inte riktigt använda en hash-tabell. Så jag gjorde typ av. Så det är en associativ array. Troligtvis, om folket på PHP är riktigt smart, använde de under huv en faktisk hashtabell implementeras i något som C eller C + +. Men. Yeah. 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Ja. Så var och en av de funktioner som jag skrev nu - faktiskt, kan du säga det en gång till en lite högre? 

Publik: Var och en av de funktioner som Du ingår har mycket mer fullständig kapacitet än - 

DAVID MALAN: Så det är väldigt sant. Det finns mycket mer overhead att vi är inte riktigt ser genom att fokusera endast på dictionary.php, som jag skrev bara. Däremot finns det en hel tolk gå i bakgrunden. Det är när jag körde det här programmet, det inte köra kompilerade nollor och ettor konstruerad för min Intel CPU. Snarare var det igång rad för rad PHP-kod som ser ut exakt som vi skrev det. Och så när du använder en tolkat språk, du faktiskt betalar detta pris. Det kommer att ta lite tid att läsa filen uppifrån och ner, vänster till höger, och sedan köra varje linje om och om igen. 

Nu i verkligheten, särskilt på nätet, du kan faktiskt påskynda denna process genom caching resultaten av PHP-kod tolkas. Och det är vettigt på webben, eftersom om du inte har en användare som mig här, men 1.000 eller 10.000 användare, då kanske första gången filen är nås den är långsam, men därefter det är mycket snabbare. 

Men detta också, återigen, är en avvägning. Och för något som liknar en forskningsuppgifter in, eller ens något stort som detta, användarna kommer så småningom börjar känna att avmattningen. 

Så kort sagt, tolkade språk mycket i ropet, mycket populär, och ärligt talat är nog de språk du bör nå för vid problemlösning efter CS50. Men inse hur mycket du verkligen tar för givet under huven egentligen de senaste veckorna i hash tabeller och träd och försöker, vilka används i sista hand för att verkligen genomföra saker som öppet fäste, hakparentes, som vi nu kan tacksamt tar för givet. 

Så låt oss ta en titt nu i denna webb-sammanhang. Och jag nämnde förra gången att det finns ett gäng superglobals i PHP som är inte riktigt relevant på kommandoraden. De är mer relevant i sammanhanget med att använda PHP i webbsammanhang. Så kör PHP på en webbserver för att skapa saker som HTML. 

Och vi tittade på $ _GET och $ _POST, och det är där automatiskt användarnas input hamnar helt enkelt om du skickar in en forma till en fil som slutar på. php på en webbsida server som apparaten. Men låt oss titta kort på $ _COOKIE Och $ _SESSION. 

I lekmannaspråk, vad är en cookie som du förstår det i samband med använda webben? 

PUBLIK: Fil på datorn. 

DAVID MALAN: Ja. Det är en fil på användarens dator planterades av vad webbplatsen du råkar besöka. Så när du går till Facebook, när du går till bankofamerica.com, när du går till google.com, när du går till nästan alla webbplats i världen dessa dagar, inklusive cs50.net, är en cookie planterad på din dator, vilket är antingen ett värde som lagras i RAM i dator i webbläsarens minne, eller ibland verkligen en fil som lagras på din hårddisk. 

Och vad är normalt lagrad i den filen är inte ditt användarnamn, inte din lösenord, vanligtvis inte något känsligt om webbplatsen är inte så bra med deras säkerhet, utan snarare det är en stor unik identifierare bland andra saker. Det är ett stort slumptal planterade på din dator men du kan tänka på som typ av en virtuell handstämpel liknande från en klubb eller någon nöjespark som gör det möjligt för personalen, ägarna av det tjänsten, för att komma ihåg vem du är. Så om det stora slumptalet är som 12345678, även om det är uppenbart inte alltför slumpmässigt, tänker på det som handen stämpel som när du besöker facebook.com för första gången, de stämpla det numret på din hand. Och sedan att du talar HTTP, du vara en webbläsare, och eftersom Facebook uppenbarligen talar samma som en webbsida server, säger protokollet HTTP att när du sedan besöka facebook.com, oavsett om det är en sekund senare, en timme senare, även nästa dag, så länge du har inte uttryckligen loggat ut, som effektivt är som att tvätta händerna. HTTP säger att du ska presentera din handen stämpel varje gång du återgå till den webbplatsen. 

Vad Facebook då gör är att de titta på den handen stämpel och de säger, åh, 123456789. Jag vet inte vid första anblicken att detta är David Malan i Cambridge, Massachusetts, men de kan kontrollera sina databas och säger, åh, den person på vars dator vi planterade 123456789 är David Malan från Cambridge, Massachusetts. Låt oss visa att användaren sedan hans profil sida eller hans News Feed. 

Men det finns ett problem här om detta är hur webben verkligen fungerar. Låt oss ta en titt på ett snabbt exempel. Låt oss faktiskt gå att säga facebook.com. Men innan vi kunde åka dit, låt mig gå vidare och öppna upp Chrome Inspector här nere. Låt mig titta på fliken Nätverk. Och nu ska vi gå vidare och skriva i https://facebook.com. Och jag gör det så att vi inte ser alla dessa omdirigeringar och avfall tid att titta igenom dem. Låt mig slå in. 

Okej. Vi ser en massa förfrågningar. Det kommer Facebook. Det finns en hel massa filer. Och här, per min omnämnande av latens förra gången, det är många HTTP-förfrågningar. Men den första är förmodligen de mest intressanta. 

Så låt oss rulla ner hit, och Jag ska zooma in på en sekund. Detta kommer att vara typ av en enda röra, men låt oss se. Facebook skickar oss en massa grejer. 

Men whoa, intressant. De planterar inte en, utan fyra begagnade frimärken på min hand här. Set-Cookie, Set-Cookie, set-kaka, set-cookie. Och det finns några funktioner här. Alla av dem nämna några typ av utgångsdatum. Och det ser ut som Facebook är att hoppas att minnas mig fram till 2015. Så det är förmodligen den tidpunkt då Jag måste logga ut eller de ska bara automatiskt antar jag inte kommer tillbaka. Så det är faktiskt en anständig tid. 

Och det finns några andra saker som händer här. Denna cookie verkar vara våld raderas genom att säga att det löpte ut 1970 före cookies existerade. Så webbläsaren är bara att gå att anta OK, det är som tvätta händerna stämpeln. 

Men nu när min webbläsare gör en senare begäran - Låt mig gå vidare och göra detta igen och ladda om. Låt mig rulla tillbaka till top begäran och gå ner här, begäransrubriker. Lägg märke till detta. Så nu är jag i inte svarshuvuden, men märker det säger begäransrubriker. Och märker att min webbläsare som en del av sin begäran efter att ha visat reload har skickas minst följande information. Inte set-kaka, men kakan. Så detta är den linje, HTTP-rubriken så att tala, där min webbläsare är sort av utan att jag vet att det fram min hand för Facebooks inspektion. 

Så dessa cookies kan vara används sedan för vad? För att komma ihåg vem du är, eller minns hur många gånger du har varit där, eller verkligen någonting. 

Så här är counter.php. Och låt mig zooma in på teckensnittet. Och varje gång jag ladda om denna sida, märker det är att komma ihåg hur många gånger Jag har varit där. Tja, det är inte så imponerande. Låt oss avsluta just den fliken, och nu ska vi gå tillbaka till http://localhost/counter.php. 

Åh, det är intressant. Det mindes fortfarande, även även om jag stängde fliken. Och ärligt talat, om jag stänger webbläsaren, om de genomförs på rätt sätt, jag kan fortfarande komma ihåg att denna användare är vem han eller hon var den första gången, och bara när jag går in i Chromes meny, som hit är här, och gå till Historia och klicka på Rensa webbinformation, som vissa av er kanske har i förbi, först då kommer dina cookies faktiskt utgå under web utveckling. 

Så, om vi går - låt oss stänga gedit här. Och om vi går nu till den här filen. Låt mig gå in på vår vhosts / localhost / allmänheten, och låt mig göra counter.php. Observera att detta är en ganska enkelt program. Det är en ganska enkel hemsida. 

Så upp i filen är bara kommentarer. Men här är en ny linje som du kan redan sett i p-set sju, session_start (). Detta är en linje av PHP-kod som huvudsak berättar webbservern, gör Se till att stämpla händer och göra Glöm inte att kolla handen frimärken. Det är allt som linjen gör, och det gör allt för att processen för oss. Sedan märker jag precis har fått två grenar här. Om räknaren nyckeln insidan av detta särskild global variabel som heter $ _SESSION Är satt - med andra ord, om det finns något värde där - Låt oss få det och förvara det på en lokal variabel som heter $ disk. Else, låt oss tilldela $ räknare standardvärdet 0. 

Nu här är en aspekt av PHP som är både en välsignelse och en förbannelse. PHP är lite slarvig. Så medan i C, vad skulle det omfattningen av räknare har varit antingen här eller här? 

Det skulle ha varit begränsat dessa klammerparenteser. Gissa vad? I PHP, finns det även utanför de Klammerparenteserna, här och här, och här, och här, och även ner nedan. Så jag säger att detta är en välsignelse i den meningen att du inte behöver tänka så hårt som vi gjorde veckor sedan. Men det är också lite av en förbannelse i detta oavsett var du använder en variabel i PHP, åtminstone i ett program som detta, Det är globalt tillgängliga för bättre eller sämre. Så du måste hålla i minnet nu när dina variabler kan inte vara odefinierat. Du kanske har definierat dem någon annanstans. 

Men vad ska jag göra i slutändan? Jag kommer att spara in på den globala variabel som ett värde av räknare nyckel resultatet av gör räknare plus ett. Så det här är bara det aritmetiska som gör uppräkning av den räknaren. Och det faktum att jag lagrar det värde tillbaka här är medel till huvudsak uppdatera databasen till kom ihåg att användaren 123456789 har varit här två gånger. Och när jag gör det igen nästa gång jag ladda om sidan, det kommer att ta min hand stämpla och säger, åh, Användaren 123456789 har nu varit här tre gånger. 

Och så vad PHP och liknande språk gör för oss är att de är att räkna ut hur och var och hur länge att lagra värdena i denna speciella superglobal. Och detta superglobal nästa gång jag besöker sidan är slags magiskt förifylld, fylld med värden som var där förra gången du besökte, oavsett om det var en sekund sedan, en vecka sedan, eller 2013 och vi nu talar ca 2015. PHP och ta hand webbserver av allt detta för dig. 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Variabler i PHP är väsentligen alltid globala såvida du förklara dem inne i en funktion, och då är de lokala till endast funktionen. Men eftersom jag har inte skrivit något funktioner, är de nu på ett effektivt sätt globalt under hela min fil här. 

PUBLIK: Finns det något sätt för att göra dem lokalt? 

DAVID MALAN: Finns det någon sätt att göra dem lokalt? Endast genom att linda in dem i funktioner. Som i den senaste versionen av PHP, kan du göra det med en anonym funktion. Men mer om det i ramen för JavaScript. Men det korta svaret är nej. Ett längre svar är ja. Nice. Bra frågesport fråga. Okej. 

Så slutligen, är själva sidan faktiskt ganska enkelt. Lägg märke till att när jag avslutar PHP-läge, minns att allt det här ner Nedan är bara att få spotta ut obehandlad till webbläsaren. Vilket är bra, eftersom jag vill skicka användaren någon HTML, men jag vill att dynamiskt uppdatera HTML. Och ett sätt jag kan göra detta är att sortera av mycket snabbt falla tillbaka i PHP läge, användning öppen fäste frågetecken likhetstecknet, och matas sedan ut värdet av disk. 

Eller om det ser lite kryptiskt, detta likhetstecknet är egentligen bara en del syntaktiskt socker för detta printf ($ räknare). Men ärligt talat, det är bara lite ful och lite irriterande att skriva. Så PHP erbjuder mycket fint denna funktion där du kan bara säga det mer fattat på samma sätt. 

Så vad som händer under huven? Låt oss snabbt titta på nätet fliken för counter.php här. Och låt mig gå vidare och först låt oss rensa dina cookies. Låt oss klara sökdata sedan tidernas begynnelse. Låt oss nu gå tillbaka hit. Nu ska vi ladda om sidan. Och jag är tillbaka på noll. Eftersom min hand stämpeln har tvättats, Jag får nu en ny cookie. 

I själva verket, om jag tittar på fliken nätverk och titta på svarshuvuden, meddelande att apparaten sänder mig en cookie vars namn är något godtyckligt, men typ av rimligt, PHPSESSID. Och det är att skicka mig detta verkligen stort slumptal. Det är inte ganska många. Det är inte riktigt hexadecimal. Det är någon form av alfanumerisk sträng, men förmodligen är det slumpmässigt. Och det är den hand stämpel så att tala om att jag hänvisar till. 

Under tiden, om jag klickar på reload och sedan titta på denna andra raden för min andra framställningar, meddelanden nu att min begäran rubriker inkluderar PHPSESSID motsvarar detta, inte ställa in-kaka, men bara cookie. Och det är min webbläsare presentation min hand stämpel. 

Så nu som en teaser, och vi ska prata mer om det här i en vecka eller så, men på vilket sätt gör det att du sårbar, ditt Facebook-konto sårbara, och andra sådana står utsatta? 

PUBLIK: Om någon har din cookie. 

DAVID MALAN: Ja, om någon har din cookie. Jag menar riktigt, ungefär som en del av er kanske har provat på som en klubb eller en nöjespark, om du försöker något så här för att kopiera stämpeln, om än bakåt på en annan persons hand, och sedan han eller hon presenterar det som sin egen, om det faktiskt ser identiska, 123456789, då webben servern är tydligen bara att lita på att användaren är dig. 

Och detta är verkligen en grundläggande hot när du använder cookies för om någon bara kapar så att talar ditt kaka, räknar ut vad det är, antingen genom att verkligen kopiera den genom att titta på din dator och vara som, OK. Davids cookie är JJ3JIK och så vidare, och då de är smarta nog att veta hur sorts skicka manuellt att cookie från en webbläsare eller från en program de skriver, de kunde helt logga in på en webbplats som du. Det är inte så svårt att låtsas vara någon annan om vi inte åter p-set två, som införde vad? 

PUBLIK: Cryptography. 

DAVID MALAN: Lite lite av kryptografi. Enkel kryptering, åtminstone i Standard Edition, men krypto ändå. mindre. Så det visar sig om du krypterar alla dessa rubriker som använder något som du kanske vet nu mer familjärt som SSL, Secure Socket Layer, eller https:// URL: er, då alla dessa saker vi har varit blick på faktiskt krypterad, vilket innebär att det är som du kan inte läsa handstämpel. Endast facebook.com kan, eller google.com, eller i detta fall, apparaten kan Läs den handen stämpel. 

Tragiskt dock, och igen, detta alltför lämpligt med NSA grejer för sent, är till och med SSL brytbar. Och det är faktiskt inte så svårt att ens knäcka den kryptering. Inte så mycket genom att knäcka krypteringen, men genom att lura webbläsare till dekryptering datan i förtid. Men återigen, vi reta dig med detta inom kort. För nu, bara rädd. Det är tragiskt slags sant. 

Okej. Så, när detta lämnar oss nu? Nåväl, låt oss göra detta. Låt oss gå vidare och ta en snabb teaser innan vi tar en paus. Och jag tror att vi kommer att dröja lite längre idag, men vi kommer att dyka in något helt nytt och sexigt, vilket kommer fundera för ännu mer. Så det är teaser. 

Så SQL, började vi prata om någonsin så kort förra gången. Du kommer verkligen få händerna smutsiga med en del av det i p-set sju. Och i lekmannaspråk, gör vad SQL - S-Q-L - göra för dig? Vad är det? Yeah. 

Publik: Låt oss dataåtkomst. 

DAVID MALAN: Yeah. Det låter dig komma åt data i en databas. Structured Query Language. Och detta är i huvudsak en programmeringsspråk. Det finns funktioner i det som Vi kommer inte ens att använda i klassen. Men du kan faktiskt definiera funktioner. De kallas lagrade förfaranden i SQL. Men vi ska hålla det ganska enkelt och bara använda den för vissa grundläggande funktioner såsom välja uppgifter, infoga data, uppdatera data, och ta bort data. 

Och du kan verkligen tänka på en databas, som en SQL-databas, som bara är Microsoft Excel. Eftersom SQL hänvisar till en relationsdatabas databas, där relation betyder bara tabeller. Rader och kolumner. Så allt du kan sätta i ett kalkylblad Gillar du eller Google Docs, Du kan sätta in en SQL-databas genom att förklara ett bord. 

Nu, hur gör du åt faktiskt denna information? Tja, med kommandon eller frågor som denna. SELECT, INSERT, UPDATE och DELETE. Och för det mesta, de är de fyra enda ingredienserna du behöver för att göra något ganska kraftfullt i problem som sju. 

Nu tillbaka i dag, skulle du faktiskt interagera med en databas i en svart och vitt terminalfönster på en blinkande prompt såhär. Och databasen vi kör på Apparaten kallas MySQL, som är fri och öppen källkod databas motor. Om du Google och läsa Wikipedia artikeln, vet du att namnet är lite av övergång för vissa versioner av Linux. Maria databas är faktiskt ett gaffel så att säga av MySQL. 

Lång historia kort, köpte Oracle MySQL. Oracle är ett stort företag. Folk har varit orolig att det skulle inte längre vara lika öppen källkod, så detta är bara en kopia av MySQL som är fortfarande fri, fortfarande öppen källkod, och installeras i Fedora Linux som standard. 

Men det är typ av en smärta i halsen för att bekanta sig med en databasen på detta sätt. Så vi är i CS50 apparaten ett gratis open source verktyg som kallas phpMyAdmin. Bara en tillfällighet att det är skrivet i PHP. Det finns ingen grundläggande behöver för PHP här. Men detta är bara ett webbaserat verktyg som vi ned gratis, installerad i apparaten, som tillåter oss att ha en grafiskt användargränssnitt med vilken att utforska p-set sju databas med som att skapa nya databaser, säga för egen slutlig projekt om du skulle vilja, och i slutändan skapa dynamiska webbplatser som CS50 Finans som gör att du kan ställa frågor om data och uppdatera data dynamiskt. 

Du kommer inte att behöva använda bara en enkel textfil eller CSV. Du kan faktiskt använda en smart databas program så att du kan utföra mer sofistikerade frågor än att bara läsa igenom allt linjärt. 

Så till exempel, är detta vad vi ger du ur lådan för p-set sju. Detta är ett bord med till synes minst tre kolumner, en av vilka är användarnamn, varav en är hash, och av vilka den andra är-ID. 

Men det intressanta, och bara för att locka fram en tanke här, användarnamn är förmodligen redan unikt, rätt? Jag menar, de flesta någon hemsida, om du har ett användarnamn, det kan inte vara två caesars. Det kan inte finnas två Malans. Det kan inte finnas två jharvards. Dess unika. Annars vet de inte vilka jharvard är det faktiskt. Så vad kan vara motivationen för också ha en tredje kolumn till vänster det kallas ID, som ser ut som en nummer som är på liknande sätt unik? Det känns lite överflödigt till mig vid första anblicken. Varför skulle det vara spännande att ha inte bara unikt användarnamn, men också unika nummer? 

Publik: De kunde ha samma lösenord. 

DAVID MALAN: Människor kan ha samma lösenord, säker. Det absolut kunde hända. Men om de har denna unika användarnamn, jag skulle hävda att det inte riktigt materia, för om de skriver i sina användarnamn, jag behöver bara kontrollera deras lösenord, deras hash därav. Varför annars? 

Publik: Snabbare sökning. 

DAVID MALAN: Snabbare sökning. Varför? 

Målgrupp: ID är bara en. 

DAVID MALAN: ID är bara ett tecken, eller för att vara mer exakt, det är ett tal, så det är nog 32 bitar eller nåt sånt. Medan användarnamn, tydligen Jason Hirschhorn är uppe är typ av löjligt lång, och det kommer att ta mig mycket mer tid till sträng jämför H-I-R-S-C-H-H-O-R-N, och kanske a / 0 eller något liknande, i syfte att slå upp Jason, i motsats till bara säga ge mig användarnamn nummer två. Det är 32 bitar. Det är en enda INT som du måste jämföra. Och faktiskt, det är exakt varför databaser tenderar att tilldela unika ID till rader i dem. 

Nu vad andra datatyper är det förutom INT och tydligen strängar som denna? Tja, för att vara mer korrekt, SQL-databaser, som MySQL har CHAR fält. Och röding lite missvisande är inte en enda CHAR. Ett CHAR fält i en MySQL-databas är ett eller flera tecken, men det är en fast antal tecken. 

Så till exempel, om jag går över till phpMyAdmin som du kanske redan har, eller snart kommer ett problem som sju, och jag går till min databas, och bara för skojs skull, Låt oss skapa en ny tabell som heter testa med bara två kolumner. Jag ska klicka på Go. Och det kommer att bli ganska bekant, speciellt när du mixtra runt på egen hand. Här kanske jag skriver ID för att skapa en ny tabell av typen int. Men här jag kan skriva användarnamn återskapa den tidigare tabellen. Och märker jag har ett helt gäng av olika typer att välja mellan. 

Och detta är också anledningen till phpMyAdmin är ganska trevligt. Det är typ av själv-undervisning i att du kan bara typ av peka och klicka, och titta på rullgardinsmenyer, och utläsa att vilka befogenheter SQL ger dig. 

Och faktiskt, om jag väljer CHAR, jag sedan behöva ange längden, eller hur många värden, hur många tecken. Så mycket gemensamma värderingar är saker som 255, men det är lite lång. Vanligen är åtta för ett användarnamn. Men det är lite små i dessa dagar. Så detta är en design beslut. Är det 8 tecken max, 32, 255, 1000? Det är verkligen upp till dig. Men en CHAR fält är ett fast antal. Så väljer för få och du är typ av skruvas om du vill ha en längre användarnamn. Välj alltför många och vad som är Nackdelen? 

Publik: [OHÖRBAR]. 

DAVID MALAN: Det är slöseri. Precis som i C, om du har en större bit av minne än du behöver, du är bara slöseri med tid och slösa utrymme. Så som ett alternativ, existerar VARCHAR, som löser detta problem genom behandla längd inte som en fast längd, utan som en maximal längd, och med användning av en variabelt antal TECKEN, som sedan tenderar att bara använda så många TECKEN som du faktiskt behöver. Det låter perfekt. 

Varför inte vi bli av med Datatypen CHAR då? Vad kan vara Nackdelen med använder VARCHARs, vilket låter som det är en fin seger? Yeah? 

Publik: [OHÖRBAR]. 

DAVID MALAN: OK, bra. Så om alla dina data är densamma längd, vad är oro? 

Publik: Eftersom du slösar bort data genom att berätta för dem alla. 

DAVID MALAN: Så om alla dina data är samma längd, men skulle jag hävda att ange en maximal längd på VARCHAR är inte annorlunda från ange en fast längd på CHAR om du vet att många i förväg. Men det finns faktiskt, och jag ska sortera på utdrag ur det svaret verkligheten att det fortfarande finns ett max, vilket skulle kunna vara irriterande, särskilt om du möter en persons namn som är ovanligt länge som du inte förutse. Och det är också en lite mindre effektiv att faktiskt söka på VARCHARs som motsätter sig söka TECKEN, speciellt för långa bord som har massor och massor av data. Så även här, är tematiskt igen inget självklart val. 

Så bara för att ge dig en känsla av andra datatyper som kan vara av intresse antingen för p-set sju eller i framtiden, finns INT. Det finns BIGINT, som är som länge länge. Det tenderar att vara 64 bitar. Det finns decimal, vilket du kan se i problemet set, som är en mycket renare svar på de problem som vi påträffas med flottör och flytande punkt imprecision. Och sedan finns det DATETIME. Det är bokstavligen en datatyp som har att se ut som ett år, en månad, en dag, och en timme, minut och sekund. 

Men SQL-databaser har också saker vi ringer index. Och ett index är något som du ange när du skapar tabellen till göra sökningar och andra verksamheter mer effektiv. Specifikt, det finns något som kallas PRIMARY index som du kan fastställa följande. 

Vi gjorde detta för dig med användarna tabell ger vi dig. Men märker om jag manuellt återskapa användarna tabellen här ge det ett namn på användare. Jag specificerat redan ID. Jag specificerade INT. Jag specificerade användarnamn högst 32 tecken. Men om vi håller rullning i detta ganska breda fönster, märker att det finns en massa andra saker som jag kan ange. 

One, kan jag specificera attributen gillar, vet du vad, det här INT bör vara UNSIGNED. Jag vill inte ha negativa tal, så låt oss göra det UNSIGNED. Null är inte relevant här eftersom Jag vill att varje användare ha ett unikt nummer. Jag vill inte att det ska vara noll. 

Men detta är intressant. Jag kan ange att ID är antingen primärnyckel i denna databas, eller det är unikt, eller det är indexerad, eller hela texten. Så för dagens ändamål, lång historia korta, primär betyder att detta skall vara både konceptuellt och tekniskt fältet som vi använder för att unikt identifiera användare. 

Så när vi tittar upp användare, är denna typ av ett löfte att leta upp dem oftast av som unik identifierare. Och databasen kommer att se till att om du har ett användarkonto nummer 3, kan du inte fysiskt infoga en annan användare med samma nummer 3. Databasen kommer bara vägra för att spara dina ändringar. Vilket är en bra sak, eftersom du kan skydda dig från dig själv. själv 

Alternativt, för användarnamn. Så den andra raden, återkallelse, är fältet Användarnamn. Så den andra raden är här användarnamn, som vi gjorde längst till vänster där. 

Så vad mer kan jag vill ange? Jag är inte tillåtet, enligt SQL, att specificera två primärnycklar. Du kan ange en gemensam nyckel där du titta på båda områdena, men de kan inte sig vara primärnycklar. Så det är uteslutet. Så som jag kanske vill välja? 

Tja, är UNIK i samma anda som en primärnyckel där du anger detta område skall vara unikt, men det är inte kommer att vara en Jag använder hela tiden. Och vi kommer inte att använda den här allt den tid för vilken anledning igen? Det är långsammare potentiellt om det är en lång användarnamn. Det är bara ett slöseri med tid. 

INDEX, under tiden, anges att det är inte att vara unik, men jag skulle vilja dig att arbeta din magi under huva för att göra det snabbare för mig att söka på detta område. Så det här är nog inte relevant här. För användarnamn, skulle jag hävda att UNIKA är ett bra svar. Men anta att vi gjort användarna mer intressant än bara användarnamn, hashar och ID-nummer. Tänk om vi gav människor fulla namn? Tänk om vi gav dem adresser och andra uppgifter om dem? 

Tja, om du anger att en kolumn i en databasen är indexerad, innebär att det MySQL eller Oracle, eller vad databas du använder, bör arbeta sin magi och använda någon form av fantasi uppgifter struktur som ett träd, eller en trie, eller en hash-tabell, eller något för att garantera att när du söker efter data med välja på just det - liksom visa mig alla att bor på Oxford Street. En fråga som det. Om du har specificerat i förväg att du vill ha ett index på det området, de sökningar kommer att bli mycket, mycket snabbare. 

Om du inte anger ett index, den bästa du kan göra är en linjär sökning om det är inte sorterade. Men om du anger INDEX, smart människor som gjort databasen - människor som du som nu vet träd och länder och hashtabeller - kommer automatiskt att bygga en sådan uppgifter struktur i RAM för att se till att dessa sökningar är mycket snabbare. 

FULLTEXT tiden är liknande i anden, men du kan göra wildcard sökningar, liksom visa mig alla som bor på gator som börjar med bokstaven O av någon anledning. Du kan göra sökningar med jokertecken så. Eller, mer övertygande saker som show mig alla som har ordet - visa mig alla vars namn börjar med en viss bokstav. Du kan söka efter nyckelord på detta sätt. Okej. 

Så, möjligheter konstruktions det potentiellt. Det finns andra som jag ska våg mina händer på. Det visar sig att man kan ha olika lagringsmotorer. Och det är mer svårbegriplig än vi behöver säkert för problem set sju. Som standard är ni använder något som kallas InnoDB. Du ser omnämnande av detta någonstans i phpMyAdmin gränssnitt troligast. Men vet att det finns annan konstruktion beslut som är av potentiellt intresse kommer slutprojekt om du gör något webbaserat. 

Men låt oss göra detta. Låt oss gå vidare och lägga detta på skärmen som en teaser för en berättelse engagera dig, en rumskompis, och ett glas mjölk. Låt oss ta en två minuters eller så bryter här. Och om du kan stanna kvar, låt oss komma tillbaka, titta lite mer på SQL, och sedan en bit av JavaScript med p-set åtta i åtanke. 

Okej. Så, låt oss få dig att tänka på en hörn fall som kan mycket lätt uppstå i samband med användning av en databas, eller ärligt talat, även med hjälp av verkliga saker som uttagsautomater för att få pengar. Så här är ett kylskåp. Anta att du har en också i din studentrummet eller ditt hus. Och du har en rumskompis, och båda du verkligen gillar mjölk till exempel. 

Så du kommer hem från klass en dag. Han eller hon är ännu inte tillbaka. Du öppnar kylen. Du verkligen vill ha ett stort glas mjölk. Det finns ingen mjölk. Så vad gör du? Du stänger kylskåpet. Du tar tag i dina nycklar. Du går ut till torget. Och du får i kön på CVS på dem själv kassan saker, som alltid ta längre tid än vad som faktiskt med kassörer. Hur som helst. 

Alltså, under tiden, dot dot dot, din rumskompis kommer hem och han eller hon på samma sätt har en längtan för lite mjölk. Så han eller hon öppnar kylen, ser ut inuti, och åh, fan. Ingen mjölk. Så han eller hon ger sig ut, råkar gå till den andra CVS, som var endast en blockera bort av någon anledning, och han eller hon får i kö för att köpa lite mjölk. 

Under tiden, du kommer hem, han eller hon kommer hem, och vad gör du i slutändan ha? Dubbelt så mycket mjölk. Men du egentligen inte gillar mjölk som mycket. Så nu har du så mycket mjölk som nu en av dem är bara att gå sura så småningom. Så det här är ett riktigt dåligt problem. Rätt? 

Så vad har hänt? Så i grunden är denna typ av ett löjligt exempel. Men under huven, det som vi har haft hända här är er båda kontrollerade tillståndet för en viss del av minne, kylskåpet. Ni båda kontrollerade staten av någon variabel. Ni båda drog en slutsats som du sedan agerade på. Men tyvärr, när din rumskamrat var i butiken, tillståndet i det variabel förändrats, han eller hon kom tillbaka och nu vill förändra staten, men det har redan ändrats på honom eller henne. Och naturligtvis, skulle han eller hon inte har gått till affären om de visste att du redan på väg. 

Så i den verkliga världen, hur kunde du undvika detta problem, förutsatt att du har ett kylskåp, har du en rumskompis, och du verkligen gillar mjölk? 

PUBLIK: Kommunicera. 

DAVID MALAN: Kommunicera. OK. Men hur kan du kommunicera? 

PUBLIK: Lämna en anteckning. 

DAVID MALAN: Lämna en anteckning, eller hur? Lämna alltid en anteckning, för fans av showen. Okej, så alltid lämna ett meddelande, eller satte verkligen som ett hänglås eller något på kylskåpet som håller din rumskompis från inspekterande staten denna variabel. 

Nu, varför skulle detta vara relevant för Problemet satt sju, eller till uttagsautomater. Tja, tänk dig en värld i en bankomat där du kanske kan gå upp till en ATM maskin här, och en annan bankomat här. Och det händer ganska ofta. Och antar att du hade två ATM-kort, vilket är möjligt att erhålla. Och du loggar in båda maskinerna effektivt samtidigt, förhoppningsvis medan ingen tittar. Och sedan skriva in din PIN-kod ungefär samtidigt. Och sedan göra en balansfråga för att se hur mycket pengar du har. Och låt oss säga att du har $ 100 kvar på kontot. Så i huvudsak samtidigt, du säger ett, noll, noll, anger. Och du förhoppningsvis få tillbaka lite pengar. 

Men hur mycket pengar kan du få tillbaka? Nu datorer i slutet av dagen, särskilt om de pratar med servrar, inte nödvändigtvis göra saker i den ordning som förväntas. 

Så antar att vad som händer, på grund av oavsett nätverks frågor hastighet där är, eller CPU-frågor finns det, eller något liknande, anta att första ATM kontrollerar ditt saldo och ser, åh, denna person har $ 100. Men sedan blir distraherad eftersom kanske en säkerhetskopia som händer och så är det saktar ner. Eller kanske vid kontroll, nätverket anslutning fick en lite långsammare eftersom det händer bara. De är fysiska enheter. Så under tiden, är den andra ATM frågar samma fråga. Hur mycket pengar David har? $ 100 är svaret. Men eftersom den första ATM har ännu inte skickade meddelandet subtrahera $ 100, både Bankomater har inspekterat bankens valv, ser att det finns $ 100 där, och nu båda maskinerna potentiellt är kommer att spotta ut ett svar. 

Nu är det bra för dig i någon mening om vad banken gör i slutändan är ändra beloppet till minus 100 av sätta variabeln lika med din bankkonto lika med 0, i motsats att göra minus 100. Nu i värsta fall för banken - eller i bästa för banken, under tiden, de ger dig $ 200, och ditt bankkonto visar nu negativa $ 100, som verkligen inte gynna dig alls. Men poängen är att denna ras tillstånd för två rumskamrater uppta mjölk, eller för två bankomater försöker få pengar och ändra tillståndet hos ett valv samtidigt föreligger någon gång du har en databas. 

Nu i problemet satt sju, denna fråga uppstår i den meningen att om du köper en andel av Facebook lager, och sedan för exempel du köpa en andra del av Facebook lager, måste du göra ett beslut som programmeraren. För att avgöra hur du uppdaterar databas, oddsen är att du kommer att har en rad för detta bestånd, och detta är ett sätt att genomföra den. Och du kommer att ha en andel av FB, vilket är deras aktiesymbol för detta användarnamn, eller denna användare ID, en unik identifierare. 

Men samma historia kan hända här. Om du gör en SELECT i SQL, som du ser i problembild sju när du ser, åh, har David en aktie av Facebook lager. Låt mig nu ändra detta till att vara två aktier, eftersom han vill köpa en andra aktie. Men antar att David hade faktiskt två webbläsarfönster öppnas, eller anta att det är ett gemensamt konto med två makar, och båda av dem försöker utföra samma operation, där också den potential för ett beslut om att vara görs utifrån den tidigare tillståndet i världen - kontot har en aktie - och både människor, eller båda servrarna, nu försök att säga öka det till två aktier. Men i detta fall, kanske du har laddat mig pengar för båda aktierna, men ökas just det en gång. 

Så kort sagt, det grundläggande problemet här, som med skämt om att lämna ett notera, eller sätta ett hänglås på det, är om två personer, eller två trådar - tänker tillbaka på scratch - kan inspektera tillståndet för en viss variabel och sedan försöka ändra på det rörliga, men dessa två saker inte händer på samma tid men kan bli avbruten av andra saker som händer, uppgifter kan komma in i en väldigt konstig tillstånd. Och du kan dra eller du kan drabbas i betydelsen av de pengar som exempel. 

Så i problem set sju, vi ger dig detta en rad kod, som länge historia kort, löser detta problem i MySQL. Detta mycket lång instruktion som inte även passar på en linje på Skärmen här ser till att din verksamhet är vad som kallas atom. Allt händer på en gång, eller det händer inte alls. Detta mycket lång fras kan inte får avbrytas delvis. 

Och vad den gör är bokstavligen vad den säger. Sätt in en tabell med följande tre områden dessa specifika värden, men den dubbla nyckel, inte gör en insats. Gör en uppdatering. Så det här är som att göra en SELECT och en INSERT så att säga på samma gång. Och det är nyckeln som är nog hänvisas till här? 

Det visar sig, och du kommer att se detta i Problemet set sju s spec, eftersom Vi har förklarat att det finns en unik nyckel på denna särskilda bord så att du kan inte ha flera rader för samma användare med Samma öre aktiesymbol - i detta exempel här, är DVN.V en dum öre lager som vi hänvisa till i spec. Eftersom vi har förklarat att det är unikt, Vad detta betyder är att om du Försök att sätta in en dubblett rad, du istället kommer att uppdatera den utan någon annan som har en chans att förändra tillståndet i världen heller. Så kort sagt, säkerställer detta saker är atom. 

Mer allmänt though, databaser som MySQL - och du inte behöver den här funktionen för p-set sju, men ha det i åtanke för framtiden - stödja så kallade transaktioner, där du kan säga START TRANSbokstavligen. Du kan sedan köra två SQL-satser. Och en SQL-sats, som du ser i p-set sju, ser lite ungefär så här. Uppdatera en tabell som heter konto. Ställ in balansen kolumnen motsvarar vad balansen kolumnen för närvarande är minus 1,000 där antalet, den kontonummer, som användar-ID, är lika med 2, och sedan uppdatera konto dot dot dot. 

Så i lekmannatermer, vad gör dessa två frågor verkar göra i verkliga världen känsla av bank? 

PUBLIK: Överföra till besparingar. 

DAVID MALAN: Exakt. Överföring av medel från en konto till den andra. Och här är ett annat exempel där man verkligen vill att dessa två saker att hända eller inte hända. Du vill inte något att komma i mitten av dem och potentiellt förstöra matten, eller röra upp hur mycket pengar du har, eller hur mycket pengar banken har. Så vad är riktigt nice om transaktioner i MySQL är det, och databaser mer allmänt, är att de och smarta människor som har genomförts dessa funktioner lista ut hur man gör Se till att båda dessa saker hända eller inte alls. 

Och om du verkligen strävar efter att göra en webbplats som används av människor på campus, människor i den verkliga världen, gör något i start bemärkelse, det är dessa typer av designbeslut som blir aldrig så viktigt. Annars börjar du att förlora data, förlorar användare, eller i värsta fall som vi har sett här, potentiellt förlora pengar. Så återigen, mer om det i problembild sju, samt kanske för en del av du i slutprojekt. 

Så låt oss ändra den bilden vi hade nyss bara på ytterligare ett sätt. Så låt mig faktiskt se om jag kan - nope, det är borta. Där är det. 

Så det är där vi slutade förra gången. Och det visar sig att vi kommer att kasta en sak i mixen här - ett språk som kallas Javascript. Så JavaScript faktiskt passar i detta stycke - och jag hade inte riktigt tillräckligt med utrymme, så det är inte nu i skala. OK, detta är verkligen patetiskt. OK, så det är JavaScript. Okej. Jag verkligen gör det en björntjänst. Okej. 

Så JavaScript är en annan programmering språk, och vår sista, om det hjälper försäkra att det finns inte mycket mer av brandposter här. Så JavaScript är också ett tolkat språk, vilket innebär att du inte sammanställa det i ettor och nollor. Du kör bara det. Men vad är fundamentalt annorlunda med JavaScript oftast är att du inte köra det på din webbserver. Det blir inte köras i Apparaten i sig. Snarare blir det hämtas av en användare via HTTP i sin webbläsare - Chrome, Safari, Internet Explorer, Firefox, vad som helst - och det är den webbläsare som utför detta visst programmeringsspråk. 

Så för att vara tydlig, PHP hittills varit utförs antingen på kommandoraden i vår svarta och vita fönster, på en server liknande apparaten en dator gillar apparaten, eller det har varit exekveras av en webbserver körs på en dator. Men temat här är att PHP hittills har utförts på serversidan, så användaren och användarens webbläsare aldrig ser en rad av PHP-kod. 

Faktum är att om du någonsin öppna en webbläsare för annan din webbplats eller och du faktiskt se PHP-kod i ditt fönster, någon har skruvas upp. Eftersom det inte är tänkt att vara skickas till en webbläsare direkt. Det är tänkt att utföras och vände till något som HTML. 

Men JavaScript är huvudsakligen tvärtom. Det är tänkt att köras normalt inne av användarens webbläsarfönster. Och vilka typer av webbplatser använder JavaScript då dessa dagar? 

Som bokstavligen varje populära hemsidan. Varje webbplats som ni antagligen använder dagligen använder JavaScript för enklaste och även den sexigaste funktionerna. 

Så något liknande Facebook Chatta om du använder det. Hur fungerar det egentligen? Väl hittills, alla de saker vi har gjort med HTML och PHP förutsätter att du drar upp en URL, och du trycker Enter, och du ser några HTML-innehåll. Och du klickar på länken, som ändrar URL, ändras på sidan och omladdningar lite nytt innehåll. Klicka på en annan webbadress eller skicka ett formulär, du får forslas till en annan sida och du se några nya innehållet. 

Men med hjälp av något som Facebook Chat, eller Gchat, eller Google Maps, sällan gör hela sidan uppdateras så att du ser en vit skärm ett kort ögonblick och sedan nytt innehåll. Snarare webbsidor idag är dynamiskt få uppdaterad igen och igen och igen alla slags av bakom kulisserna. Och det visar sig att när du går till något som Facebook, eller Gchat, eller Gmail, och uppdateras sidan automatiskt utan att ladda om hela skärmen, vad som har hänt är att din webbläsare har gjort slags hemlighet ytterligare HTTP-förfrågningar - inte för hela webbsidor, men bara för små bitar av data, såsom snabbmeddelande om att din vän bara skickade dig, eller statusuppdateringen som någon precis skickat, eller tweet att någon precis skickat. Det är bara att göra lite förfrågningar om uppgifter, och sedan med hjälp av JavaScript, detta programmeringsspråk, för att ändra det webbsidan ser ut utan server att hjälpa, utan servern som result HTML. 

Så kort sagt, kan JavaScript användas då att inte bara hämta nya data från servern utan att ladda om hela sidan eller skicka in ett formulär. Den kan också användas för att ändra den så kallade DOM - Document Object Model - vilket är precis det finare sätt för säger träd HTML som vi såg förra gången. 

Så för att lugna, är JavaScript syntaktiskt så liknar C också. Det finns ingen huvudfunktion. Du börjar bara skriva koden och det kommer att bli avrättade, eller tolkas mer korrekt. Villkor kommer att se ut så här. Ingen annan än C eller PHP för den delen. Booleska uttryck eller-ed tillsammans kommer att se ut så här. -Behandlas tillsammans se ut så här. 

Växlar kommer se ut så här. För slingor kommer att se ut så här. Medan slingor kommer se ut så här. Gör medan slingorna kommer se ut så här. 

Detta är nytt. Så JavaScript har inte en foreach konstruera per se, men denna konstruktion för variabel i i matrisen, och jag i detta fall blir ett indexvärde. Så det är lite annorlunda från det foreach, även nya versioner av JavaScript kommer ut hela tiden, så även dessa språkfunktioner utvecklas. 

Och som en sidoreplik, JavaScript dessa dagar kan också användas på en server precis som PHP med hjälp av ett ramverk som kallas Node.js. En av CS50 s TF, Kevin, har lett en seminarium om Node.js som är tillgänglig på cs50.net/seminars. Så om du är nyfiken, vet att du kan använda detta på serversidan som väl, men det är en ganska ny trend, men en kraftfull sådan. 

Det här är lite annorlunda. Detta är en array i JavaScript. Och det som slår dig så olika kontra C eller PHP? Det finns några snabba historier Vi kan tala om här. Det som saknas jämfört med PHP? 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Ja? Tyvärr, säger igen? 

PUBLIK: Inte förklara typen av variabel. 

DAVID MALAN: Vi ska inte förklara typen av variabel. Så faktiskt ganska som PHP, är vi inte beskriva olika kategorier av denna variabel. Snarare är vi mer allmänt säger var för variabel. Vi har inte PHP: s olägenhet av dollartecken, vilket samtidigt jobbigt att typ, gör mer klart att något som är en variabel. Av följande skäl: här är vi slags tillbaka till C: s strategi genom att bara ringa ett variabel med namnet vi vill för att ge det, som siffror. Och även som PHP, vi har hakparenteser för värden inuti som matris. 

Så variabler i JavaScript också skulle kunna se ut så här. Lägg märke till här är en sträng som kallas s, men på samma sätt har vi inte specificerat att det är en sträng. Här är dock en funktion som inte existerar på exakt samma sätt i PHP, men lite på liknande sätt. Detta är ett objekt i JavaScript. Och föremål är slags den schweiziska armén Kniven av en datastruktur i att man kan använda dem för en rad olika saker. 

Här, till exempel, vi förklara en variabel som heter citat. Typen av den variabeln Ett ändamål. Du kan se det som en C-struct som har nycklar och värden. Symbol är en nyckel. FB är ett värde, till synes en aktiesymbol. Kommatecken. Priset är en annan nyckel, och dess värde är tydligen ett flyttal, eller en antal mer allmänt i JavaScript, på $ 49,26. 

Så PHP inte har - Vi har inte sett i PHP-objekt helt så här, men vi såg en analog, vilket var vad? 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Associativa arrayer. Så medan PHP har associativa arrayer vars syntax är aldrig något så annorlunda - vi såg hakparenteserna. Vi såg konstiga pilar symboler. JavaScript har objekt, men detta är mestadels en semantisk skillnad och en annan synonym för nu. Men, som en sidoreplik, har PHP också Objekten i ett sätt som Java och andra språk har föremål i objektorienterad programmering. Men vi kommer att använda dessa bara för datatyper för nu. Objekt och associativa arrayer. 

Detta skulle man kunna göra det lite mer tydlig. Här är varför ett objekt är användbart. När du vill deklarera en student, som Zamyla, vi kan faktiskt kapsla in så att säga inne i det objekt med klamrar precis som innan en hel nyckelknippa och värderingar i här. Vi har ett ID, ett hus, och ett namn Zamyla, följt av ett semikolon som vanligt i slutet. 

Här nere är också detta något olika, men också mycket kraftfulla dessa dagar. Här är en matris, och jag vet att eftersom det finns en hakparentes upp topp och en hakparentes vid bottnen. Och detta är en samling av vilka data skriver tydligen i JavaScript? Detta är en samling av det ser som tre objekt. Och jag vet att det är ett objekt bara grund av klammerparenteser. Och märker att det finns öppen klammerparentes, vissa grejer, nära klammerparentes, kommatecken, sedan lite mer, kommatecken, och sedan lite mer. Så det är tre argument åtskilda av två kommatecken. 

Så detta är en array med tre objekt. Och var och en av dessa objekt verkar vara en student eller anställd av någon sortera, var och en med ett ID, hus, och namn. Men jag har kallat detta något kallas JSON - JavaScript Object Notation. Och detta är ett dataformat som faktiskt är så mycket populär och i vogue dessa dagar att om du skriver en program som använder Facebook API, Twitter API, egentligen nästan någon API ute dessa dagar, inklusive några av CS50 egen, den data du får tillbaka är inte i old school CSV-format. 

Eftersom återkallelse som CSV är super enkelt. Det är bara kolumner separeras med kommatecken. JSON uppgifter ger dig mer metadata. Det associerar en nyckel med varje värde så De behöver inte bara anta att den nollte kolumnen är ett värde, kolumn en är en annan, är kolumn två varandra. Allt i ett JSON objekt är här sortens av självbeskrivande, eftersom varje ett av namnen i den här filen har bokstavligen namn framför det som en citerade strängen. 

Så låt oss ta en titt på en några exempel här. Låt mig gå in i apparaten. Och låt mig gå in på vår vhost katalog till allmänheten. Och låt mig gå in i JavaScript katalogen. Och låt oss gå vidare och öppna upp dom-0.html, där DOM betyder bara Document Object Model. Det är trädet grejer som Jag hänvisade till tidigare. 

Och låt mig föreslå följande. Här är en webbsida vars kroppen är ganska enkel. Så här nere på botten, märker jag har ett formulär. Vi har sett dem förut. Den har två ingångar, en av vilka har en ID av namn, varav en har en typ av lämna, och den första ens typ är text. Så här låter faktiskt ganska enkelt. 

Låt oss gå hit. Låt oss gå tillbaka till den här sidan här. Låt oss gå in localhost, och gå in i vår JavaScript katalog, och gå till dom-0, och här har vi det här formuläret. Så det är tydligen all denna sidan gör. Den har ett namn fält med en Skicka-knapp. Men jag tänker inte använda PHP här. Jag kommer att göra sidan allt klient så att säga i JavaScript som följer. 

Lägg märke till att jag faktiskt har fått namnet området för denna ingång en unik identifierare, som faktiskt kommer att rädda mig någon gång i en stund. Och märker har jag infört en annan etikett i huvudet på min hemsida, den  tag. 

Så det är i denna mening att JavaScript är en klientsidan programmeringsspråk. I det här fallet, precis som CSS, har jag lagt det rakt insidan av min HTML. Men märker jag har förklarat en funktion som ser lite ut som PHP syntaktiskt, men detta är faktiskt JavaScript, eftersom igen, det är klientsidan i webbläsaren. Och ta en gissa vad detta kommer att göra, även om vissa av syntaxen här är nya. 

Publik: Säg hej till vem. 

DAVID MALAN: Det kommer att säga hej till den som besöker den här sidan. Så hur? 

Så varsel, visar det sig i JavaScript det finns en varning () funktionen. Detta är en väldigt sorts sorgligt funktion som verkligen tenderar bara att irritera användarna. Det är inte något du verkligen bör använda typiskt, men det är en snabb och smutsig sätt slags skriva något till ett grafiskt användargränssnitt gränssnitt, som en webbläsare. Lägg märke till här att jag har fått en sträng inom enkla citattecken. Det visar sig att till skillnad från C, JavaScript kan faktiskt ha dig använda enkel citat, och ärligt talat är det bara typ av den stilistiska konventionen bland JavaScript programmerare att använda enkla citattecken. PHP, har de faktiskt en aning olika innebörd. Men för nu, vet bara att det är den enda anledningen. Konventionen i JavaScript är ofta Använd apostrof, men vi skulle kunna använda citationstecken på båda ställena liksom. 

Så det här är intressant. Minns förra gången som vi hade att bild på skärmen som drog ett träd där du hade HTML noden, och huvud nod, och kroppen noden, och lite text. Men det fanns en speciell nod på toppen att jag ringde dokumentet. Tja, det visar sig i JavaScript, något gång du skriver ett program i JavaScript i en webbläsare, har du tillgång till en särskild global variabel. I samma anda som PHP: s superglobals, denna kallas i gemener dokument. 

Det är som en struct, men detta struct också har funktioner inne i det. Så ett C struct har bara data normalt. Men ett JavaScript-objekt eftersom detta tekniskt också har funktioner, annars känd som metoder, inne i den. Och du kan ringa en funktion inuti detta objekt bokstavligen gör sitt namn, prick, och sedan namnet på funktionen, eller igen metod. Det är bara en synonym, egentligen. 

Och vad gör den här funktionen? Du kan typ av gissning från sitt namn. Få inslag av ID. Så detta kommer att söka på webbsidan, söka det trädet, söker oavsett nod, AKA inslag, har en unikt ID för offert unquote namn. Och vad ska jag göra? Jag kommer att få värdet inuti som nod i trädet, och jag kommer att på något sätt säga hej till det namnet. 

Så ta en gissning, även om vi har inte sett detta ännu, vad gör det plus symbolerna betyder här och här förmodligen? 

PUBLIK: Sammanfoga. 

DAVID MALAN: Sammanfoga. Rätt, och dessa är bara sorts designbeslut folk gjorde år sedan. I PHP, du sammanfoga saker med prickar. I C, hoppar du genom flera hoops och kalla funktioner som strCopyDatabaseOK () eller strcat () eller andra sådana funktioner. Men i JavaScript, använder du plus. Så det här är bara sammanfoga tre strängar - hej, ett namn, och sedan ett utropstecken. 

Så när och varför är denna funktion heter men? Tja, ta en gissning från HTML längst ner. Varför hälsar () anropas eller när? 

Tydligen så gott jag kan berätta, om in, då detta formuläret skickas, Jag kommer att göra vad som Insidan av dessa citat. Och speciellt, jag ska ringa hälsar () och sedan returnera false. 

Nåväl, låt oss se vad nätet Effekten här är först. Så låt mig gå vidare och skriva i, säg, Loren, Submit. Hej Loren. Låt oss se om kanske det var bara en lycklig genomförande. Nope. Så det är att skriva ut vad namnge jag faktiskt lagt där. 

Men märker vad som inte förändras. Webbadressen är fortfarande dom-0.html. Det finns ingen register.php. Det finns ingen andra filen. Det finns ingen handling attribut. Så vad är denna återgång falskt förmodligen gör? Varför jag kallar hälsar () och sedan vänder falsk förmodligen? Vad som normalt händer när du klickar på Skicka ett formulär att även vi har sett under den senaste veckan? 

PUBLIK: [OHÖRBAR]. 

DAVID MALAN: Det går någonstans, eller hur? Det går till viss destinationsadress. Men jag vill inte att det ska ske här. Jag vill att min webbsida för att vara helt dynamik som Gmail, där när du är det, du stannar där. Adressen ändras inte på ett sätt som visar hela sidan laddar om. Snarare, jag vill bara ändra något som att skriva ut något här på skärmen. 

Nåväl låt mig rengöra upp lite. Jag öppnar inte dom-0, men låt mig öppna upp dom-2. Bara så du har sett några syntax här. 

Det visar sig att det som vi just gjorde använder rå JavaScript. Så det här är verkligen det språk JavaScript. Några av er kanske känner till ett bibliotek som heter jQuery. 

Så jQuery är inte samma sak som JavaScript. Det är bara ett bibliotek som en riktigt smart kille skrev och populariserade sådan att nästan alla i världen nu använder jQuery vid användning av Javascript. Och vid första anblicken, ärligt talat, det ser lite mer kryptisk. Men du kommer att hitta, särskilt om du går där för din slutgiltiga projektet med web utveckling, ser du att detta rensar upp saker och sparar en hel några rader kod. 

Så låt oss bara blick på hur denna form fungerar. Lägg märke till vad gjorde jag bort tydligen från min HTML? Det finns ingen på skicka handler så att säga. Det finns inget attribut. Eftersom du vet, vad Jag visste inte riktigt gillar? Jag kände mig som om vi faller i gamla vanor där. Precis som det börjar känna sig slarvigt att blandas både CSS med HTML, eftersom du typ att kasta olika språk över hela plats, på samma sätt gick det börjar känna som en dålig väg att gå ner där Jag sätter JavaScript-kod på insidan av mitt HTML snarare än facto ut det. 

Så det är lektionen här. I dom-2.html, jag facto det. Och jag gör saker och ting en aning annorlunda. För nu kommer jag att våg mina händer på vad detta egentligen innebär under huven. Men bara för att nu anta att det första kodrad i detta bibliotek heter jQuery betyder bara när dokumentet är klar, gör följande. 

Eftersom webbsidor kan ta lite tid att ladda. Du kan vara på en långsam internet anslutning, och den skulle kunna snurra och spinning, och slutligen den är laddad. Denna kodrad bara säger vänta tills hela sidan är klar, det dokument är klar, innan du utför den här koden. 

Och nu märker är detta förmodligen den mest användbara första ta ifrån jQuery. Denna linje här är mycket lika i anden till detta mycket längre linje här. Medan rå JavaScript-kod, där föreligger ett dokument globala objektet som har en funktion som kallas getElementById () de personer som skrev jQuery förenklat att bara säga dollartecken, och sedan inne i parentes satte två citat, och sedan sätta en hash symbol följt av unikt ID som du vill ta. Så det här är likvärdigt med document.getElementById. 

Samtidigt. Skicka bara innebär på inlämning av vilken form du är hänvisa till vänster, gå framåt och utföra detta. Men det är nu den nyfikenhet också. Vad är konstigt om vad Jag har markerat här? Inte bara är det typ av syntaktiskt nytt, det finns också något som saknas. 

PUBLIK: Det bara kallas funktionen? Det kallas inte vaken? 

DAVID MALAN: Ja. Tja, så alert () är nere här, för att vara rättvis. Men det finns inget omnämnande av en namn, som ni vet, foo eller upp något här. Och faktiskt, det är en av de funktioner av JavaScript som är helt kraftfull, men också ganska nytt. Och PHP faktiskt har detta också. 

Låt mig gå vidare och göra något riktigt snabbt. Låt mig gå vidare och lägga ut det här. Låt mig göra det här. Funktion. Låt oss kalla hanteraren (). En hanterarfunktion så att säga. Något som hanterar någon operation. Låt mig städa mitt indrag. Och sätta detta här. Och sätta det här. Yep. OK. 

Så nu har jag en funktion som heter handler () som jag inte riktigt vet vad den gör ännu. Det har bara fortfarande det där. Whoops. Tog för mycket. Nu gör vi det här. Okej. Ursäkta. Okej. Låt mig göra det här. OK. Det ser fint och rakt framåt nu. Låt mig göra det här. Gör det här. Och OK. Så nu, låt oss sätta det här. Inget mer programmering i farten. OK. 

Så nu, låt oss gå tillbaka till där historien började. Tidigare sade jag att denna linje här innebär när dokumentet är klart, gå vidare och göra det. Vad vill jag göra? Jo specifikt, jag vill gå vidare och göra följande. Utför denna kodrad, och sedan vad jag vill att ni ska göra är att ringa det fungera när formuläret skickas. 

Nu är det här vad som är intressant. Detta är inte i sig en funktion. Lägg märke till att jag inte sätter parenteser här på vanligt sätt. Jag bokstavligen passerar en funktion som heter hanterare () till en annan funktion kallas in () som ett argument som även om det är som en variabel. Och detta är en av funktionerna i JavaScript är funktionerna själva är egentligen bara objekt. Faktum är att de är egentligen bara variabler av något slag. Och om namnet på funktionen är hanterare (), finns det ingen anledning att jag kan inte låta det gå i som ett argument här. Och detta innebär att när formuläret med ID för demo är lämnats in, kallar denna funktion. 

Men nu, om jag ångra allt detta, varför då gjorde jag kanske göra detta för en stund sedan? Nåväl, detta är en anonym funktion. Eftersom ärligt talat, insåg jag varför är jag bry sig om att slösa tid att förklara en Funktionen kallas handler () bara för att ringa det i en och endast en plats? Om jag inte behöver namn, och jag gör inte behöva kalla det mer än en plats, låt oss bara implementera funktionen precis där jag behöver det. Och så JavaScript och PHP stöd vad kallas anonyma funktioner som Tillåt mig att göra just det här. 

Men vi bara skrapat på ytan. Låt oss retas med bara ett par slutgiltiga exempel här. 

Om jag går in i quote.php. Lägg märke till att detta faktiskt är en PHP funktion, ett PHP-program, som jag skrev som förväntar sig en HTTP parameter kallad symbol, och jag kan passera in ett värde som FB. Och om vi verkligen titta på käll kod, är det att fråga en gratis hemsida kallas Yahoo Finance, precis som p-set sju, och det är att återvända till mig något i tydligen format som kallas är JSON - JavaScript Object Notation. Det är bara ett objekt. Lägg märke till de klammerparenteser, citat, tjocktarmen, och kommatecken. 

Nu under tiden, det är ganska coolt. För jag kan nog använda en programmerings språk för att generera webbadresser att se ut så här dynamiskt, rätt? Jag kan ändra detta till Google och få tillbaka Googles aktiepris på $ 1,017.55. Så låt oss se om vi inte kan använda det här nu. 

Låt mig gå till ajax-0 här, vilket ser ut som följande. Det är bara en webbplats som har ett formulär med en knapp. Låt mig här gå vidare och skriva in yhoo för Yahoos aktiesymbol, klickar du på Hämta Citat, och nu märker jag har fått en varning med 32,86. 

Låt mig faktiskt gå till en snyggare version på denna sida, version två, och Skriv in låt oss säga Microsoft, MSFT. Få offert. Och nu märker, ingen varning. Lägg märke där det står pris som skall fastställas? Det är den enklaste av exempel som tips på vad Gchat, och Facebook Chatta, och Gmail och andra sådana webbplatser gör genom att faktiskt ändra webbsidan. 

Lägg märke till detta. Låt mig ladda om sidan. Låt mig öppna Chrome Inspector. Låt mig gå till elementen fliken här nere. Nu märker om jag zooma in här nere och öppna upp detta, märker att det här är min HTML DOM - min Document Object Model. Det här är min HTML. Men nu märker, även om det kommer vara lite svårt att se det i både ställen samtidigt, om jag skriver på FB upp här, titta på botten på skärmen bara. 

Det är faktiskt förändras min HTML i farten. Och det gör det helt enkelt genom att göra något som detta. Om jag öppnar ajax-2, meddelande om genomförande något så sexigt som att även om det är ganska fult, men så sofistikerade som det funktionellt, den har några HTML längst ner. Men märker jag brukade tagga. Vi har inte använt det förut, men det är som ett, men det tvingar inte allt på en ny rad. Det gör bara ett rektangulärt område på samma linje i huvudsak. 

Lägg märke till att jag gav det ett ID i pris. Och det visar sig genom att använda samma JavaScript-bibliotek, jag har en funktion kallas citat () som heter när formuläret skickas. Och vad jag gör är det här. Jag förklara en variabel i JavaScript kallas url, spara värdet quote.php? symbolen =. Med andra ord, jag själv börjar att förbereda en HTTP-begäran, och sedan Jag sammanfoga in på det med ett plus oavsett elementet med ID-nummer av symbolen är, vilket meddelande är att textfält ända ner hit. Så precis som vi hade former i det förflutna. 

Och då visar det sig i jQuery, om du ringa. val (), som kallar på en val funktion, ett värde funktion, blir det vad användaren har matat in i. Och så all nätverkstrafik som händer är detta. $. GetJSON. 

Och som en sidoreplik, är dollartecken bara en förkortning notation. Det är verkligen jQuery.getJSON. Ta mig till JSON från denna URL, och när begäran kommer tillbaka, kalla detta funktion och passera som argument allt kom tillbaka från servern. 

Så med andra ord, om jag går tillbaka till webbläsaren, och jag går tillbaka till quote.php, vad min webbläsare gör är att få denna bit av data. Och när jag går på denna webbsida här, märka om vi i stället gå till nätverket fliken och avmarkera den och skriv in något som GOOG för Google och få Citat, märker sidan ändrades inte. Men en HTTP-begäran gjordes, och vad kom tillbaka hit om vi tittar på svaret är en hel massa JSON som vi åt till slut med denna enkla linje här. 

Data är det som fått från servern. Priset är namnet på den nyckel jag bryr mig om. Så data.price ger mig det. 

Nu under tiden, och detta är det sista exemplet. Du kan göra ännu mer med sidan. Ett faktiskt, väl två. Vi kan föra tillbaka tagga, om du kommer ihåg det. Det är JavaScript. Vi kan göra det. Mycket spännande. Vi lämnar det som en cliffhanger. 

Men mer spännande, kan du göra saker som denna. Om jag går till geolocation-1, visar det sig att Chrome vet att vi är på latitud longitud 42,37. -71,10. Så det finns ännu mer där till ditt förfogande. Men mer om det nästa vecka. Vi ses måndag.