DAVID MALAN: Okay. Dette er CS50, og det er i slutningen af ​​uge ni. Det har været en hvirvelvind i de sidste par dage. Og problemet sæt syv, hvis du er knæ dybt ind i det, indse, at der er en hel bit nyt, er derinde. Men lad os se om vi ikke kan stykke alt sammen her kort inden da kovending off i endnu anden retning og se hvor ellers vi kan gå. 

Så hidtil har vi talt om HTML. Vi har talt om CSS. Vi har talt om PHP. Du er begyndt at opleve SQL. I dag vil vi tale lidt om JavaScript. Men hvordan gør alle disse uensartede sprog passer sammen? 

Så vi talte i sidste uge om den begrebet have en server. Så lad os bare trække dette rektangel en web-server her. Og en web-server tjener sikkert filer. Og nogle af disse filer kan være HTML-filer. Så en af ​​de ting, som en webserver kan spytte kan være en fil, vi bare tegne som denne indeholder nogle HTML. Så i lægmandssprog, hvad betyder HTML lade dig gøre? 

PUBLIKUM: Side udseende nice. 

DAVID MALAN: OK, lave en side ser pæn, selv om jeg tror, ​​jeg har bevist som ellers. Så HTML lader dig lægge ud sider strukturelt, og det giver dig mulighed for at slags æstetisk markere en side, markere statisk indhold, så du kan derefter se det med en webbrowser. 

Men det er nøglen. Det er statisk indhold. Du skriver det, du gemmer den, og så skal du sende det. Og webserveren så tjener det op til dine besøgende. 

Men vi stilisere tingene ved hjælp af en anden sprog helt. Vi begyndte at bruge en stil attribut visse tags. Og den stil attribut lad os sætte ting som skriftstørrelse og farve. Og du har sikkert begyndt at opdage, eller du snart vil til endelig projekter potentielt, endnu andre egenskaber, som du kan bruge i CSS. Og så i lægmandssprog, hvad virkelig så gør CSS gøre? Disse er blot eksempler deraf. Hvad betyder det lade dig gøre det HTML synes ikke at fra det vi har set hidtil? 

PUBLIKUM: Definer typografier ved dig selv. 

DAVID MALAN: Definer typografier ved dig selv. Så definere ting som klasser, som du kan have stødt på, eller unikt identificere knuder i et dokument, så at du kan stilisere dem. Men mere specifikt, ville jeg sige, at CSS virkelig lader dig tage ting sidste kilometer og giver dig mulighed for at angive meget mere præcist æstetik, hvorimod HTML for det meste lader du strukturere dine sider. 

Og selv om der er nogle defaults, ligesom vi så tag for en overskrift tag, der groft sagt gjort tingene stor og fed. Det er en temmelig generisk definition af tag - stor og fed. Hvad skriftstørrelse er det? Hvilken farve er det? Hvor fed er det? Og CSS giver dig mere fint tune ting som. Samt layout, som nogle af jer har set. 

Og helt ærligt, CSS er en smule en rodet sprog. Det er meget magtfulde i at du kan gøre bogstaveligt enhver hjemmeside, at du har ses på internettet i dag med det, men det er sådan en smerte i nakken. Og nogle af jer har slået hovedet mod væggene allerede bare at gøre noget dumt ligesom centret en menu på Problemet sæt syv, hvis du har fået til dette punkt allerede. 

Men indse, disse ting blive nemmere med tiden. Du begynder at lægge mærke til mønstre. Og igen, vil Google være din ven for de forskellige måder, hvorpå du kan løse den slags problemer. 

Og jeg tør sige med CSS og HTML mere generelt, kan du løse problemer i mange flere måder, som alle kunne de meget vel være korrekt, end du kunne i noget lignende C, selv nu PHP eller JavaScript. Der er lige mange forskellige måder at lægge tingene ud. 

Men det begyndte at få rodet, vi sagde. Lige slags sammenblanding din HTML og din CSS med stil attribut var lidt sjusket. Og så vi i stedet sagt, en slags abstrakt set, at du skal mindst begynde at faktor ud af din CSS sandsynligvis. Ikke er din stil attributter, men mindst bruge stil tag inde i hvad del af websiden? 

PUBLIKUM: Head. 

DAVID MALAN: I hovedet. Indtil nu havde vi kun titlen op der, men du kan også tilføje en stil tagge, og du kan sætte din CSS groft taler mod toppen af ​​siden. Men så tog vi tingene et skridt videre og vi indregnet, at mere i en separat fil. 

Og så disse to filer var en eller anden måde nu forbundet. Og faktisk var det tag, der gjorde det. Og hvad var en af ​​den overordnede motivationer for factoring vores CSS desto mere? 

PUBLIKUM: Genbrugelighed. 

DAVID MALAN: Genbrugelighed. Right? Du har måske set i p-sæt syv allerede at en masse af de sider, hvor køb side, salgs side, portefølje side, er sandsynligvis struktureret noget tilsvarende. Der er en CS50 finans logo øverst medmindre du har besluttet at ændre det. Der er en sidefod på bunden af ​​siderne. Og CSS giver dig så at faktor det ud det i en separat fil, så hvis du ønsker at ændre noget på globalt plan tværs hele dit websted, kan du virkelig bare ændre det på ét sted. 

Men der er en pris, du betaler potentielt ved at have indregnet ud CSS fra min HTML-fil i en separat fil der refereres til den med tag, som vi så på mandag. Hvad kan downside være af denne? Tænker tilbage for en uge siden til, når vi er taler om HTTP og TCP / IP, og hvordan internettet fungerer. Noget herovre? 

PUBLIKUM: Det tager længere tid. 

DAVID MALAN: Det tager længere tid. Hvorfor? 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: Ja. Så det nok tager lidt mere tid. Fordi en, CSS er naturligvis ikke i den samme fil. Så nu er du nødt til at gøre ikke én, men to anmodninger. Og hver af disse anmodninger, som vi så i Chrome i den såkaldte Inspector, og vi kiggede på nettet fanen hver af disse filer kræver en HTTP anmodning, som vi så tager en vis mængde tid. Nu, måske er det ikke en masse. Måske er det kun 20 millisekunder. Måske er det 200 millisekunder. 

Men tænk over en side som Facebook, eller CNN eller Google, som er meget større end de eksempler, vi har så på hidtil. Disse sider kan have snesevis af filer, hver især kan kræve en download af en fil. Så ting kan potentielt begynder at sætte farten ned. 

Og især i disse dage, hvor vi alle har mobiltelefoner i vores lommer, og langsommere internetforbindelser, skulle vente et par millisekunder, et par flere millisekunder til yderligere filer kan faktisk være langsom. Latenstid er det ord, der beskriver den slags venter, at du har, at du oplever, når venter på nogle stykke information. 

Men der er en upside. Så det er ikke alle slags - det faktisk er lidt af en vippe her. Downside nu, men hvad browsere kan gøre hvis de er smarte, for at undgå skulle anmode om det samme styles.css filen igen kan være at gøre hvad? 

Cache det. Så caching - C-A-C-H-E - generelt betyder her blot for at redde fil, du anmodede første gang, og så tjek din cache for det. Kontroller, at du er en slags storage container, og hvis du allerede har en kopi af styles.css, selv om nogle andre siden i p-set, eller enhver hjemmeside, anmoder det igen, bare for at give bruger den samme cachelagrede kopi. Gider ikke anmoder om den. 

Downside der, dog, som nogle af jer have udløst ovre i p-sættet. Hvis du foretager en ændring på serveren og du går tilbage til browseren, og du genindlæse, sommetider browseren gør dig en tjeneste, og ikke gider re-downloade din styles.css fil fordi, kom nu, hvad er oddsene at disse stilarter, at Facebook bruger vil ændre time til time eller dag til dag? Det er temmelig lav. De kan ændre sig over tid, men ikke af det minut eller time for time. 

Så et trick, FYI bare når du laver web udvikling, er ofte holde Shift-tasten nede for eksempel, og klik derefter på genindlæse i din browser, og der vil typisk fortælle browseren reload alt, selv hvis du allerede har det i cachen. Så igen upsides og ulemper, men alle af dem sidste ende design beslutninger. 

Så nu vi ikke bare afslutte historien her. Hvis jeg nu gå tilbage og tilbage og tilbage og tilbage, begyndte vi at introducere ikke bare HTML, men PHP. Så i lægmandssprog, hvad betyder PHP lad os gøre? 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: Hvad er det? 

PUBLIKUM: Indføre logik i koden. 

DAVID MALAN: Yeah, introducere logik i din kode. Så det er en ægte programmeringssprog med løkker og variabler og funktioner og betingelser, og alle de ting, vi har brugt vej tilbage når siden bunden. Og PHP, vi har set, kan anvendes enten på kommandolinjen - det behøver ikke at have noget at gøre med web, men selv det er virkelig sin oprindelse, og hvad det har en tendens at være god til og befordrende for - men du kan bruge PHP blot ved naturen af det faktum, at det har en print () funktion, og et printf () funktion, eller et ekko () funktion. Der er bundter af måder, du kan udskrive tekst med PHP. 

Derfor kan du bruge denne programmering sprog til at udlæse præcist hvad vi talte om før. Du kan dynamisk generere din HTML. Måske ikke det hele. Måske du hårde kode ting, ligesom header og footer, og logoet, og dine style sheets, og alt dette. Men efter noget som p-set syv, hvor du manipulere bestandene og viser brugerens portefølje, som er gå til dynamisk at ændre, kan du sikkert bruge PHP og den logik, det giver du som programmeringssprog til output dynamisk delmængder på siden. 

Så når du taler om dynamiske hjemmesider, eller web-programmering, der er hvad du egentlig taler om. Ved hjælp af et sprog som PHP, eller ting kaldet Python eller Ruby eller Java, eller endnu andre sprog, at forespørge en database ofte, eller anden server, og så dynamisk spytte HTML. 

Nu slutresultatet, som en side, er at HTML de fleste hjemmesider, herunder din p-set syv, er formentlig kommer til at være et stort rod, hvis man ser på kilden kode i en browser. Det er ikke en big deal. På dette tidspunkt, vi når holder stil, vi interesserer os for ting, som du skriver. Vi vil ikke bekymre sig om de ting at hvad din kode udgange. Så du skal ikke bekymre dig om indrykning her, hvis det er PHP, der er faktisk udsende stuff. Efter alt, vil browseren er ligeglad, og et menneske vil ikke være på udkig ved kilden alligevel. Vi personalet, for eksempel, ville se på din PHP. 

Så lad mig give et hurtigt eksempel nu hvorfor ellers dette kan være nyttigt. Så helt ærligt, jeg kan ikke huske den sidste gang jeg brugte C til at løse et problem i den virkelige verden. Det var sandsynligvis i forskerskolen når Jeg havde brug for at bruge et sprog, der var forholdsvis lavt niveau, og gav mig mulighed for at gøre noget meget højt udfører virkelig spare så mange CPU cykler, som jeg kunne, for en stor del fordi jeg var ved hjælp af store datasæt, og hver CPU cyklus tælles. Og helt ærligt, selv i ting som telefoner disse dage og andre enheder hvor man ikke helt har så meget hukommelse, og du ikke helt har så meget CPU, der anvendes hurtigere sprog stadig tiltalende. 

Men i den virkelige verden, når du bare ønsker at smide nogle program sammen til analysere nogle data, eller du har indsamlet en hel bunke af registreringer for nogle studerende gruppe, og du vil meget hurtigt automatisere sende e-mails én efter én til hver enkelt af dem registranter, er du nødt til at nå til højniveausprog end C så at sige. Noget som PHP eller Python, eller Ruby, eller et halvt dusin andre, der findes disse dage. Men de tre er sandsynligvis den mest trendy lige nu. 

Og hvad det betyder er, at du kan åbne en tekst editor som gedit eller de fleste noget andet, og så bare begynde skrive kode uden at skulle bekymre om kompilering, uden at skulle virkelig bekymre sig om hukommelse ledelse, holde sig for øje, selvom at en lille sjusk i sidste ende vil komme tilbage at bide dig, hvis datasættet får større eller problemet bliver stort. Men hvad det betyder for os, er følgende. 

Lad mig gå videre og køre speller fra problem sæt seks. Så dette er min trie-baseret implementering som jeg brugte på den store bord, hvor jeg spillede ikke så godt. Vi kommer tilbage i en uges tid og gense dem, der ikke ender på toppen af stor bestyrelse på vores sidste forelæsning. Men for nu, lad mig gå videre og bare køre min løsning i tekst, og vi vil gøre King James Bible, og her går vi. 

Så dem er alle af den angiveligt forkert stavede ord ud af King James Bible. Og min implementering tog et halvt sekund i alt. Så ikke alt for dårlige på dette bestemt computer. Men tænk på, hvor meget kode jeg skulle skrive. Tænk hvor meget kode, du skulle skrive. Tænk på, hvor mange timer du har brugt på D-hal eller dit kollegieværelse eller hvor faktisk kodning op denne løsning. 

Tja, hvis jeg rent faktisk har et højere niveau sprog som PHP, tage til efterretning hvad jeg kan gøre her. Antag først, at det er i stedet din distribution kode. Dette er en fil kaldet stave. Det er til rådighed som en del af nutidens fordeling kode. Og jeg har tænkt mig at vinke min hånd på de fleste af de detaljer, men det er faktisk et interessant eksempel på, hvordan du måske port et sprog som C over til PHP. Jeg bogstaveligt talt åbnet to tekstvinduer, én med min C version af speller.c, og jeg er lige begyndt at oversætte det i min hovedet til PHP og skrive det ud ved hjælp af De nærmeste tilsvarende funktioner. 

Så nogle af disse ting er anderledes. Vi så sidste gang, at PHP ikke bruger omfatte helt på samme måde. Det bruger kræver typisk, selvom omfatter eksisterer. Definer er lidt anderledes fra # Define i C, men det er hvordan vi laver en konstant. $ Argc det viser sig eksisterer i PHP, så vi har set før. Disse er blot variable, alle der starter med dollartegn. Husk disse er blot en flok flydende punkter. 

Så lang historie kort, er du velkommen til at bladre gennem dette, hvis nysgerrig, det er næsten en linie-for-linie omdannelse af C-versionen af ​​speller.c i PHP. Og du kan gøre det igen for en halv snes andre sprog. 

Men hvad er interessant, er dette. Eller hvad er ærligt nedslående er dette. Lad mig gå videre og skrive om dictionary.php, og påstanden om, at jeg er kommer til at gå videre og re-implementere Problemet sæt seks her. 

Så lad os foreslå først at i dette fil, som vil blive gennemført i PHP, så lad mig åbne mine tags som. Lad mig give mig selv en global variabel, $ størrelse bliver nul. Og jeg har tænkt mig at give selv en hash tabel. Jeg vil bruge en hash tabel for denne ting. Hvordan kan jeg erklære en hash tabel i PHP? Udført. OK. 

Så åbneparentes luk beslag repræsenterer hvad i PHP, som vi har set? Et array, men et array, der kunne være et associativt array. En associativ array er en datastruktur, der associerer nøgler med værdier. 

Nu i den enkleste numerisk indekseret array, disse nøgler er hvad? Zero, en, to, tre, right? Old school ting tilbage fra C. Men det kan også være strenge som foo og bar, eller Maxwell, eller af en sådan streng. Så jeg kan udnytte, at på bare et øjeblik. 

Lad mig gå videre og erklære en funktion som - lad os gøre load () først. Så funktion belastning (). Og PHP er lidt anderledes, idet du bogstaveligt talt skrive funktion, men du skal du ikke skrive en tilbagevenden type. Jeg har tænkt mig at gå videre og sige, at load () funktionen skal tage i argument $ ordbog, bare som C-version gjorde. Jeg gør det fra hukommelsen. 

Og jeg foreslår, at jeg er kommer til at gøre dette. Jeg simpelthen vil gøre foreach. Jeg har tænkt mig at kalde en funktion kaldet fil (), der passerer i navnet på denne fil, som er variabel $ Dictionary som $ ord. Og så inde i mit for-løkke her, er jeg kommer til at gå videre og gemme i min $ Tabel, $ word får sandt. Udført. Åh, vent. Udført. OK. 

Det er belastningen () funktion siger i PHP. Nu, hvorfor det virker? Og jeg slags snyd her. 

Så en, foreach vi så kortvarigt sidste gang. Det betyder bare, at du kan gentage over et array uden at bekymre med i og n og plus plus, og alt dette. Dictionary er selvfølgelig filnavnet, noget som store eller små, de to ordbøger, vi brugte sidste gang. File er en funktion, der åbner op tekst fil, læser det på linje for linje, og hænder, du sikkerhedskopiere et kæmpe udvalg, hver af hvis elementer er en linje fra denne fil. Så det er en kombination af fopen, og fread, og mens løkken, og fclose, og alt dette. Endelig, som ordet betyder blot det er variabel Jeg har tænkt mig at få adgang til på hver iteration i denne sløjfe. 

Så kort sagt, denne ene liner betyder her åbne den fil, hvis navn er i ordbog, variablen, gentage over det linje for linje, og hver gang du får en linje, opbevares i en variabel kaldet ord, og derefter gøre noget med ord. Hvad ønsker jeg at gøre? Jeg ønsker at sætte ord i min hash tabellen. 

Tja, jeg kan sætte noget i min hash tabellen ligesom i C hjælp firkantede parenteser. Dette er betegnelsen for min hash tabel. Jeg har tænkt mig at indekset i at hash bord på denne placering. Så ikke beslag nul, ikke beslaget et. Beslag citat citat slut noget, hvad det ord er. Og ligesom du kan have i din hash tabel arbejde trie, du bare butik effektivt en boolesk, implicit eller eksplicit. Udført. Jeg lagre sande værdi. 

Nu er der et par ting Jeg skære hjørner på her. Teknisk set er der vil være en irriterende ny linje, / n, i slutningen af hver af disse ord. Så jeg skal nok kalde en PHP funktion kaldet chop (), som vil helt bogstaveligt hugge at off. Og jeg faktisk nødt til at gøre en anden ting. Jeg burde nok forøge størrelsen på hver iteration, så jeg holde styr globalt, hvad det er. Og helt ærligt, og det er et af de stupider aspekter af PHP, hvis du er ved hjælp af en global variabel, du har brug for udtrykkeligt at sige, at du er. Så jeg har tænkt mig at faktisk skrive i den globale $ Størrelse, global $ bord, og nu min funktion er afsluttet. 

Så ikke helt så simpelt som før, men sandsynligvis tog mindre tid end C versionen, måske? OK. 

Så lad os nu gøre check () funktion. Lad os se, om det i det mindste tog timevis at det tog os i C. Så lad mig gå videre og erklære kontrollere som en funktion. Tager i argument ord, som er komme fra stavekontrol. Og jeg bare at kontrollere, om Følgende variabel isset, tabel beslag strtolower af ord - Lad os afveje alle mine parenteser - derefter vende tilbage sandt. Else - det var virkelig hårdt del af dette program. Else, return false. Udført. Det er check (). 

Nu, hvorfor det virker? Tja, jeg passerede i et ord, som er en streng. To, jeg tjekker indersiden af ​​hash tabel, der hedder $ bord. Jeg tvinger det til små bogstaver ved at kalde en funktion helt svarer tolower () i C, men det gør hele ordet, ikke et enkelt tegn. Og hvis der er indstillet, med andre ord er der er et værdisæt, med andre ord, hvis det er sandt, så ja, dette er et ord. Fordi jeg sætte det der med belastning (). Og hvis ikke, vil jeg vende tilbage falsk. 

Nu er de andre er let. Funktion størrelse (), hvordan gør jeg det? Jeg hovedsagelig gøre return $ størrelse. Men jeg teknisk set har brug for at gøre denne irriterende ting. Og faktisk op høre, var jeg skære ene hjørne for mange. Jeg har virkelig brug for at gøre global $ bord. 

Men når det er sagt, losse). Unload () er forbløffende. Funktion losse (). Hvordan jeg ønsker at gennemføre unload ()? Udført. OK. 

Så losse (), hukommelse ledelse er helt taget hånd om for dig i noget som PHP og en masse højere niveau sprog. Så det er fantastisk. Ligesom hvorfor fanden vi tilbragte den sidste otte plus uger på C skrivning tilsyneladende virkelig langsom, virkelig tid forbrugende problemer med titusindvis af timer af arbejde under vores bælter? 

Tja, for én ting, dette kan arbejde fint for små programmer. Det er helt sikkert drønede op min udviklingstid. Men lad os se hvad der sker i den virkelige verden. 

Lad mig gå ind i denne mappe i et terminalvindue. Der er stavekontrol. Og bemærk som en sidebemærkning, og du kan have stødt på dette i problem sæt seks eller problem sæt syv. Du behøver ikke strengt at ende PHP-filer med. php. Hvis du sætter en linje som den første i helt i top, det er en særlig linje af syntaks, der væsentligt betyder finde det program, der hedder PHP og bruge det til fortolke denne fil. Så nu ingen rigtig ved, at Jeg kører en PHP-program. Jeg kan køre det bare som om det blev noget samlet i C. 

Men her er de ting. Faktisk, lad os gøre det igen. Dropbox/pset6 /. Der er stavekontrol. OK, 0.44 sekunder. Det fik hurtigere denne gang. 

Lad os nu gå ind i PHP-version. Nice touch. Men tænk bare hvor meget tid Jeg gemte på kontortid. OK. 

Så 3,59 sekund, som rent faktisk lyder ikke præcis enten. Men det er fordi lang historie kort, når du udskriver en enorm mængde ting til skærmen, at selv forsinker tingene ned. Hvad det virkelig tog CPU'en i Apparatet var 3,59 sekund, i kontrast til C, som tog 0,44 sekunder mest nylig. Det er virkelig en rækkefølge størrelsesorden anderledes. 

Så hvor er denne pris kommer fra? Hvorfor er det så meget langsommere? Hvorfor PHP udføre så dårligt? Danielle? 

PUBLIKUM: Du har ikke rigtig bruge en hash tabel. 

DAVID MALAN: Jeg har ikke rigtig bruge en hash tabel. Så jeg slags gjorde. Så det er et associativt array. Mest sandsynligt, hvis folk på PHP er rigtig smart, de brugte under hætte en egentlig hash tabel implementeret i noget lignende C eller C + +. Men. Ja. 

PUBLIKUM: [uhørligt]. 

DAVID MALAN: Ja. Så hver af de funktioner, jeg skrev nu - faktisk kan man sige, at når mere en lidt højere? 

PUBLIKUM: Hver af de funktioner, som du omfattede har en meget mere komplet kapacitet end - 

DAVID MALAN: Så det er meget sandt. Der er meget mere overhead, at vi er ikke rigtig at se ved kun at fokusere på dictionary.php, som jeg lige har skrevet. Derimod er der en hel tolk går i baggrunden. Faktisk, når jeg kørte dette program, det kørte ikke udarbejdet nuller og ettaller designet til min Intel CPU. Snarere var det kører linje for linje PHP-kode, der ser ud præcis ligesom vi har skrevet det. Og så når du bruger en fortolket sprog, du faktisk betaler denne pris. Det kommer til at tage lidt tid til at læse din fil top til bund, venstre til højre, og derefter udføre hver linje igen og igen. 

Nu i virkeligheden, især på internettet, du kan faktisk fremskynde denne proces ved hjælp af caching resultaterne af PHP-kode bliver fortolket. Og det giver mening på nettet, fordi hvis du ikke har en bruger som mig her, men 1.000 eller 10.000 brugere, så måske for første gang filen er tilgås det er langsom, men derefter Det er meget hurtigere. 

Men også dette, igen, er en afvejning. Og for noget som en forsknings-data indstillet, eller endda noget stort lignende dette, dine brugere vil i sidste ende begynder at føle, at afmatning. 

Så kort sagt, fortolket sprog meget på mode, meget populær, og helt ærligt er formentlig de sprog, du skal nå til ved løsning af problemer efter CS50. Men indse, hvor meget du virkelig tager for givet under hætten virkelig de sidste adskillige uger i hash tabeller og træer, og forsøger, som anvendes i sidste ende faktisk gennemføre ting som åbneparentes, firkantet beslag, som vi nu kan taknemmeligt tager for givet. 

Så lad os tage et kig nu i denne web sammenhæng. Og jeg nævnte sidste gang, at der er en flok superglobale i PHP, der er ikke rigtig relevant på kommandolinjen. De er mere relevant i forbindelse for at bruge PHP i en web-sammenhæng. Så kører PHP på en webserver, så at generere ting som HTML. 

Og vi kiggede på $ _GET og $ _POST, og det er her, automatisk brugernes input ender simpelthen, hvis du indsende en dannes til en fil der ender på. php på en web server som apparatet. Men lad os se kort på $ _COOKIE Og $ _SESSION. 

I lægmandssprog, hvad er en cookie som du forstår det i forbindelse med ved hjælp af internettet? 

PUBLIKUM: fil på computeren. 

DAVID MALAN: Ja. Det er en fil på brugerens computer plantet ved hvad hjemmesiden du tilfældigvis til at besøge. Så når du går til Facebook, når du går til bankofamerica.com, når du går til google.com, når du går til næsten enhver hjemmeside i verden i disse dage, herunder cs50.net er en cookie plantet på din computer, som er enten en værdi gemt i RAM i din computer i browserens hukommelse, eller undertiden faktisk gemmes en fil på din harddisk. 

Og hvad er typisk gemt i denne fil er ikke dit brugernavn, ikke din adgangskode, typisk ikke noget følsom medmindre hjemmesiden ikke er så godt med deres sikkerhed, men snarere det er en stor unik identifikation blandt andre ting. Det er et stort tilfældigt tal plantet på din computer, men du kan tænke på som en slags virtuel hånd stempel gerne fra en klub eller nogle forlystelsespark, der giver personalet, ejerne af det tjeneste, at huske, hvem du er. Så hvis store tilfældige tal er som 12345678, selv om det er naturligvis ikke alt for tilfældig, så tænk på, at da hånd stempel, at når du besøger facebook.com for første gang, de stemple dette nummer på din hånd. Og så fordi du taler HTTP, du være en browser, og fordi Facebook naturligvis taler det samme som en web server, siger HTTP, at når som helst du efterfølgende besøg facebook.com, uanset om det er en anden senere, en time senere, selv den næste dag, så længe du ikke har eksplicit logget ud, som effektivt er som at vaske dine hænder. HTTP siger, at du skal præsentere din hånd stempel, hver gang du vende tilbage til denne hjemmeside. 

Hvad Facebook så gør, er at de se på den hånd stempel og de siger, åh, 123456789. Jeg ved ikke, ved første øjekast, at denne er David Malan i Cambridge, Massachusetts, men de kan kontrollere deres database og sige, åh, den person, på hvis computer vi plantede 123456789 er David Malan fra Cambridge, Massachusetts. Lad os vise, at brugeren så hans profil side eller hans News Feed. 

Men der er et problem her, hvis dette er, hvordan internettet faktisk virker. Lad os tage et kig på et hurtigt eksempel. Lad os faktisk gå til at sige facebook.com. Men før vi kunne gå der, så lad mig gå videre og åbne op Chromes Inspector hernede. Lad mig se på fanen Netværk. Og lad os nu gå videre og skrive i https://facebook.com. Og jeg gør det, så vi ikke ser alle disse omdirigeringer og affald tid på at kigge igennem dem. Lad mig slå enter. 

Ok. Vi ser en hel masse af anmodninger. Der kommer Facebook. Der er en hel masse filer. Og her, pr min omtale af latenstid sidste gang, det er en masse af HTTP-anmodninger. Men den første er sandsynligvis de mest interessante. 

Så lad os rulle ned her, og Jeg zoome ind på et sekund. Dette kommer til at være slags en rod, men lad os se. Facebook er at sende os en hel masse ting. 

Men whoa, interessant. De er plantning ikke én, men fire håndstempler på min hånd her. Set-cookie, Set-cookie, set-cookie, set-cookie. Og der er et par funktioner her. Alle af dem nævne nogle slags udløb. Og det ser ud Facebook håber at huske mig indtil 2015. Så det er formentlig den tid, som Jeg skal logge ud, eller de vil bare automatisk antage jeg er kommer ikke tilbage. Så det er faktisk en anstændig mængde tid. 

Og der er nogle andre tingene foregår her. Denne cookie synes at være tvunget slettet ved at sige den udløb i 1970 før cookies eksisterede. Så browseren er bare at antage OK, det er ligesom vaske hænder stempel. 

Men nu da min browser gør en efterfølgende anmodning - lad mig gå videre og gøre det igen og genindlæse. Lad mig nu rulle tilbage til top anmodning og gå ned her, anmode overskrifter. Bemærke dette. Så nu er jeg under ikke respons overskrifter, men bemærker det siger anmodning overskrifter. Og mærke til, at min browser som en del af sin anmodning efter rammer reload har sendes mindst følgende oplysninger. Ikke set-cookie, men cookie. Så dette er den linje, HTTP-headeren, så til at tale, hvor min browser er sortering , uden at jeg ved det præsentere min hånd for Facebooks inspektion. 

Så disse cookies kan være bruges så til hvad? At huske, hvem du er, eller huske, hvordan mange gange du har været der, eller rigtig noget. 

Så her er counter.php. Og lad mig zoome ind på skrifttypen. Og hver gang jeg genindlæse denne side, bemærk det er at huske, hvor mange gange Jeg har været der. Tja, det er ikke alt, imponerende. Lad os bare lukke denne fane og lad os nu gå tilbage til http://localhost/counter.php. 

Åh, det er interessant. Det er stadig huskes, selv selvom jeg lukkede fanen. Og helt ærligt, hvis jeg lukker browseren, hvis det gennemføres på den rigtige måde, jeg kunne stadig huske, at denne bruger er som han eller hun var den første gang, og kun én gang jeg går ind i Chromes menuen, som herovre er her, og gå til Historie, og klik Slet browserdata, som nogle af jer har måske i fortid, først derefter vil dine cookies faktisk slettes under web udvikling. 

Så hvis vi går - Lad os tæt op gedit her. Og hvis vi går nu til denne fil. Lad mig gå ind i vores vhosts / localhost / offentligheden, og lad mig gøre counter.php. Bemærk at dette er en smuk simpelt program. Det er en temmelig simpel hjemmeside. 

Så toppen af ​​filen er kun bemærkninger. Men her er en ny linje, som du kan allerede har set i p-sæt syv, session_start (). Dette er en linje af PHP kode som hovedsagelig fortæller webserveren, gør Sørg for at stemple hænder og gøre Sørg for at tjekke hånd frimærker. Det er alt, denne linje gør, og det gør alt af denne proces for os. Så opdager jeg har bare misforstået to grene her. Hvis tælleren nøgle indersiden af ​​dette særlige globale kaldet variabel $ _SESSION Er indstillet - med andre ord, hvis der er en vis værdi er der - Lad os få det og gemme det i en lokal variabel kaldet $ tæller. Else, lad os tildele $ counter standardværdien på 0. 

Nu her er et aspekt af PHP, der er både en velsignelse og en forbandelse. PHP er lidt sjusket. Så mens det i C, hvad der ville omfanget af tælleren har været enten her eller her? 

Det ville have været begrænset til disse krøllede parenteser. Gæt hvad? I PHP, eksisterer det selv uden for de krøllede parenteser, her, og her, og her, og her, og selv dernede. Så jeg siger dette er en velsignelse i den forstand, at du ikke behøver at tænke så hårdt, som vi gjorde uger siden. Men det er også lidt af en forbandelse, idet uanset hvor du bruger en variabel i PHP, i det mindste i et program som dette, Det er globalt tilgængelig for bedre eller værre. Så du er nødt til at huske på nu, dine variabler kan ikke være udefineret. Du har måske defineret dem andetsteds. 

Men hvad skal jeg gøre i sidste ende? Jeg har tænkt mig at gemme inde i, at den globale variabel som en værdi af counter nøgle resultatet af laver tæller plus 1. Så det er bare det aritmetiske der gør optælling af denne tæller. Og det faktum, at jeg lagring, at værdi tilbage her er midler til at væsentlige opdatere databasen til Husk at brugeren 123456789 har været her to gange. Og når jeg gør det igen næste gang jeg genindlæse siden, det kommer til at kontrollere min hånd stempel og sige, åh, bruger 123456789 har nu været her tre gange. 

Og så hvad PHP og lignende sprog gør for os, er, at de er at regne ud af, hvordan og hvor og hvor længe at lagre værdier i denne særlige superglobal. Og dette superglobal næste gang jeg besøge siden er en slags magisk præ-befolket, fyldt med værdier, var der sidste gang, du har besøgt, om det var en anden siden, en uge siden, eller i 2013, og vi taler nu omkring 2015. PHP og webserveren tage sig af alt dette for dig. 

PUBLIKUM: [uhørligt]. 

DAVID MALAN: Variabler i PHP er væsentlige altid global, medmindre du erklære dem inde i en funktion, og så er de lokale for kun funktionen. Men fordi jeg har ikke skrevet nogen funktioner, de er nu effektivt global gennem hele min fil her. 

PUBLIKUM: Er der en måde at gøre dem lokalt? 

DAVID MALAN: Er der nogen måde at gøre dem lokale? Kun ved at pakke dem ind i funktioner. Hvilket i den nyeste version af PHP kan du gøre dette med en anonym funktion. Men mere om det i rammerne af JavaScript. Men det korte svar er nej. En længere er svaret ja. Nice. God quiz-spørgsmål. Ok. 

Så endelig selve siden er faktisk ret simpelt. Bemærk, at når jeg afslutter PHP mode, tilbagekaldelse at alle disse ting ned nedenfor er bare at få spytte ud rå til browseren. Hvilket er fint, fordi jeg ønsker at sende brugeren nogle HTML, men jeg ønsker til dynamisk opdatere denne HTML. Og en måde jeg kan gøre dette på er at sortere meget hurtigt falde tilbage ind i PHP tilstand, brug åbneparentes spørgsmålstegn lighedstegnet, og derefter sende værdien af tælleren. 

Eller hvis det ser lidt kryptisk, dette lighedstegnet er faktisk bare nogle syntaktisk sukker for dette printf ($ counter). Men helt ærligt, det er bare lidt grim og lidt irriterende at skrive. Så PHP meget pænt tilbyder denne funktion hvor du kan bare sige det mere kortfattet på samme måde. 

Så hvad der foregår nedenunder hætten? Lad os hurtigt se på nettet Fanen her for counter.php. Og lad mig gå videre og først lad os rydde dine cookies. Lad os klare browserdata siden begyndelsen af ​​tid. Lad os nu gå tilbage herovre. Lad os nu genindlæse siden. Og jeg er tilbage på nul. Fordi min hånd stempel er blevet vasket, Jeg får nu en ny cookie. 

Faktisk, hvis jeg ser på fanebladet netværk og se på respons overskrifter, varsel at apparatet sender mig en cookie, hvis navn er noget vilkårligt, men slags rimelighed, PHPSESSID. Og det er at sende mig dette virkelig store tilfældige tal. Det er ikke helt et nummer. Det er ikke helt hexadecimal. Det er en slags alfanumerisk streng, men formodentlig er det tilfældigt. Og det er den hånd stempel således at tale, at jeg henviser til. 

I mellemtiden, hvis jeg klikker reload og derefter ser på denne anden linje for min anden anmodning, meddelelse nu, at min anmodning overskrifter omfatter PHPSESSID lig dette, ikke set-cookie, men bare cookie. Og det er min browser præsentation af min hånd stempel. 

Så nu som en teaser, og vi vil tale mere om dette i en uge eller deromkring, men På hvilken måde gør det gøre dig sårbare, din Facebook-konto sårbare, og andre sådanne tegner sårbar? 

PUBLIKUM: Hvis nogen har din cookie. 

DAVID MALAN: Ja, hvis nogen har din cookie. Jeg mener virkelig, ligesom nogle af jer måske har prøvet på ligesom en klub eller en forlystelsespark, hvis du prøver noget som denne til at kopiere stempel, omend bagud på en anden persons hånd, og så han eller hun præsenterer det som deres egne, hvis den faktisk ser identiske, 123456789, så web server er tilsyneladende bare at tillid til, at brugeren er dig. 

Og det er faktisk en fundamental trussel helst du bruger cookies fordi hvis nogen bare spoofer så at taler din cookie, tal ud af, hvad det er enten ved virkelig at kopiere det ved at se på din computer og være ligesom, OK. Davids cookie er JJ3JIK og så videre, og så er smart nok til at vide hvordan slags manuelt at sende, at cookie fra en browser eller fra en program, de skriver, de kunne helt logge ind i en hjemmeside, som du. Det er ikke så svært at foregive at være en anden, medmindre vi revidere p-sæt to, der indførte hvad? 

PUBLIKUM: Kryptografi. 

DAVID MALAN: Lidt bit kryptering. Simpel kryptografi, i det mindste i standard udgave, men krypto alligevel. mindre. Så det viser sig, hvis du kryptere alle disse overskrifter ved hjælp af noget, som du måske nu kender mere familiært som SSL, secure socket layer, eller https:// URL'er, så alle disse ting vi har været kigger på er faktisk krypteret, hvilket betyder, at det er ligesom du kan ikke læse hånd stempel. Kun facebook.com kan, eller google.com, eller i dette tilfælde, kan apparatet læse, at hånd stempel. 

Tragisk selv om, og igen, det er alt for passende med NSA ting for sent, selv SSL er skør. Og det er faktisk ikke så svært at selv knække denne kryptering. Ikke så meget ved krakning af kryptering, men ved at narre browser til at dekryptere data for tidligt. Men igen, vil vi drille dig med det inden længe. For nu, bare være bange. Det er tragisk slags sandt. 

Ok. Så hvor kommer denne nu forlade os? Nå, lad os gøre det. Lad os gå videre og tage en hurtig teaser før vi tager en pause. Og jeg tror, ​​vi vil dvæle lidt længere i dag, men vi kommer til at dykke ned i noget helt nyt og sexet, som vil skærpe din appetit til endnu mere. Så det er teaser. 

Så SQL, begyndte vi at tale om nogensinde så kortvarigt sidste gang. Du vil virkelig få dine hænder beskidte med noget af det i p-sæt syv. Og i lægmandssprog, hvad betyder SQL - S-Q-L - gøre for dig? Hvad er det? Ja. 

PUBLIKUM: lader dig få adgang til data. 

DAVID MALAN: Ja. Det lader dig få adgang til data i en database. Structured Query Language. Og det er hovedsagelig en programmeringssprog. Der er funktioner i det at Vi vil ikke engang bruge i klassen. Men du effektivt kan definere funktioner. De kaldes gemt procedurer i SQL. Men vi vil holde det forholdsvis enkel og bare bruge det til nogle grundlæggende operationer ligesom udvælgelse af data, indsætte data, opdatering af data, og sletning af data. 

Og du kan virkelig tænke på en database, ligesom en SQL-database, som bare være Microsoft Excel. Fordi SQL refererer til en relationel database, hvor forhold betyder bare tabeller. Rækker og kolonner. Så alt du kan sætte i et regneark som dette eller Google Docs, du kan sætte ind i en SQL-database ved at erklære en tabel. 

Nu, hvordan kan du faktisk få adgang til disse oplysninger? Nå, med kommandoer eller spørgsmål som dette. SELECT, INSERT, UPDATE og DELETE. Og for det meste, der er fire kun ingredienser, du bliver nødt til at gøre noget helt kraftfuldt i problemet sæt syv. 

Nu tilbage i dag, ville du faktisk interagere med en database på en sort og hvid terminal vindue på en blinkende prompt som dette. Og databasen, vi kører på Apparatet kaldes MySQL, der er gratis og open source-database motor. Hvis du Google og læse Wikipedia artikel, vil du vide, at navnet er en smule overgang for nogle versioner af Linux. Maria database er faktisk en gaffel så at sige af MySQL. 

Lang historie kort, Oracle købte MySQL. Oracle er en stor virksomhed. Folk har været bekymret for, at det ville ikke længere være helt så open source, så dette er blot en kopi af MySQL der er stadig gratis, stadig open source, og installeret i Fedora Linux som standard. 

Men det er sådan en smerte i hals til at stifte bekendtskab med en database på denne måde. Så vi medtage i CS50 apparatet et gratis open source værktøj kaldet phpMyAdmin. Bare en tilfældighed, at det er skrevet i PHP. Der er ingen grundlæggende behov for PHP her. Men dette er kun en web-baseret værktøj, der vi downloades gratis, er installeret i apparatet, der tillader os at have en grafisk brugergrænseflade, som at undersøge p-sæt syv database som at oprette nye databaser, sige for dit eget projekt, hvis du vil lignende, og i sidste ende skabe dynamiske websites som CS50 Finance der giver dig mulighed for at forespørge data og opdatere data dynamisk. 

Du er ikke nødt til at bruge bare en simpel tekst-fil eller CSV. Du kan faktisk bruge en smart database program, så du kan udføre mere avancerede søgninger end bare at læse gennem alt lineært. 

Så for eksempel, det er det, vi giver dig ud af boksen for p-sæt syv. Dette er et bord med tilsyneladende mindst tre søjler, hvoraf den ene er brugernavn, hvoraf den ene er hash og den anden er-id. 

Men det interessante ting, og bare for at drille en tanke her, brugernavn er formentlig allerede enestående, right? Jeg mener, de fleste helst hjemmeside, hvis du har et brugernavn, der kan ikke være to Caesars. Der kan ikke være to Malans. Der kan ikke være to jharvards. Dens unikke. Ellers kan de ikke vide, hvilke jharvard det faktisk er. Så hvad kunne være motivationen for også at have en tredje kolonne til venstre der hedder id, der ligner en nummer, der er ligeledes unik? Det føles lidt overflødig til mig ved første øjekast. Hvorfor kunne det være overbevisende at have ikke kun unikke brugernavne, men også unikke numre? 

PUBLIKUM: De kunne have den samme adgangskode. 

DAVID MALAN: Folk kan have den samme adgangskode, sikker. Det kunne absolut ske. Men hvis de har denne unikke brugernavn, jeg vil hævde, at der ikke rigtig sag, fordi hvis de skriver i deres brugernavn, jeg behøver kun at kontrollere deres adgangskode, deres hash deraf. Hvorfor ellers? 

PUBLIKUM: Hurtigere søgning. 

DAVID MALAN: Hurtigere søgning. Hvorfor? 

PUBLIKUM: ID er blot én. 

DAVID MALAN: ID er blot ét tegn, eller for at være mere præcis, det er et tal, så det er nok 32 bit eller noget lignende. Mens brugernavn, tilsyneladende Jason Hirschhorn er deroppe er en slags latterligt lang, og det kommer til at tage mig en masse mere tid til snor sammenligne H-I-R-S-C-H-H-O-R-N, og måske a / 0 eller sådan noget, for at se op Jason, i modsætning til blot siger give mig bruger nummer to. Det er 32 bit. Det er en enkelt INT der du nødt til at sammenligne. Og ja, det er præcis derfor, databaser tendens til at tildele entydige id'er til rækker i dem. 

Nu, hvad andre datatyper er der foruden INT og tilsyneladende strings som denne? Nå, for at være mere korrekt, SQL databaser, ligesom MySQL, har CHAR felter. Og fjeldørred lidt misvisende er ikke en enkelt CHAR. En char felt i en MySQL-database er et eller flere tegn, men det er en fast antal tegn. 

Så for eksempel, hvis jeg går over til phpMyAdmin, som du måske allerede har, eller snart vil et problem sæt syv, og jeg går til min database, og bare for sjov, Lad os oprette en ny tabel kaldet teste med blot to kolonner. Jeg vil klik derefter på Go. Og det vil blive nogenlunde fortrolig, især da du pille rundt på egen hånd. Her kunne jeg skrive id for at oprette en ny tabel af typen INT. Men her jeg kan skrive brugernavn til genskabe den tidligere tabel. Og bemærk jeg har en hel masse af typer at vælge imellem. 

Og det er også grunden til phpMyAdmin er lidt rart. Det er slags selv-undervisning i, at du kan bare form for punkt, og klik, og se på dropdown menuer, og udlede der hvilke beføjelser SQL giver dig. 

Og ja, hvis jeg vælger CHAR, jeg så nødt til at angive længden, eller hvordan mange værdier, hvor mange tegn. Så meget fælles værdier er ting som 255, men det er en lidt lang. Almindeligvis er otte om et brugernavn. Men det er lidt lille i disse dage. Så dette er en design beslutning. Er det 8 tegn max, 32, 255, 1000? Det er virkelig op til dig. Men en CHAR felt er et fast antal. Så vælg alt for få og du er slags skruet hvis du ønsker en længere brugernavn. Vælg for mange og hvad er downside? 

PUBLIKUM: [uhørligt]. 

DAVID MALAN: det er uøkonomisk. Ligesom i C, hvis du har en større luns af hukommelse end du har brug for, er du bare spilder tid og spild af plads. Så som et alternativ, findes der VARCHAR, som løser dette problem ved behandling af længde ikke som en fast længde, men som en maksimal længde, og ved hjælp af en variabelt antal tegn, som derefter tendens til kun at bruge så mange tegn, som du faktisk har brug for. Det lyder perfekt. 

Hvorfor vi ikke slippe af med Tegndatatype så? Hvad kunne være bagsiden af ​​medaljen hjælp VARCHARs, som lyder ligesom det er en dejlig sejr? Ja? 

PUBLIKUM: [uhørligt]. 

DAVID MALAN: OK, godt. Så hvis alle dine data er den samme længde, hvad er den bekymring? 

PUBLIKUM: Fordi du spilder data ved at fortælle dem alle. 

DAVID MALAN: Så hvis alle dine data samme længde, vil jeg dog argumentere at angive en maksimal længde på VARCHAR er ikke anderledes end at angive et fast længde på CHAR hvis du ved, at antallet i forvejen. Men der er faktisk, og jeg vil slags uddrag fra dette svar virkeligheden at der stadig er et max, der kunne være irriterende, især hvis du støder på en persons navn, der er usædvanlig lang, at du ikke gjorde det forudse. Og det er også en lidt mindre effektiv til rent faktisk at søge på VARCHARs som modsætning til at søge tegn, især for lange borde, der har masser og masser af data. Så her også, tematisk er igen ingen indlysende valg. 

Så bare for at give dig en følelse af andre datatyper, der kunne være af interesse enten til p-sat syv eller fremtiden, er der INT. Der er BIGINT, som er ligesom lang lang. Det har tendens til at være 64 bits. Der er DECIMAL, som du kan se i problemet sæt, som er en meget renere svar på de problemer, vi stødt med float og flydende peger upræcise. Og så er der DATETIME. Der er bogstaveligt talt en datatype, der har at ligne et år, en måned, en dag, og en time, minut og sekund. 

Men SQL databaser har også ting, vi ringer indekser. Og et indeks er noget, du angive, når du opretter tabellen til at foretage søgninger og andre operationer mere effektiv. Konkret er der noget, der hedder det primært indeks, som du kunne erklære som følger. 

Vi gjorde det for dig med den brugere bord vi giver dig. Men læg mærke hvis jeg manuelt genskabe brugerne tabellen her give det et navn brugere. Jeg allerede angivne id. Jeg specificeret INT. Jeg angivne brugernavn med maksimalt 32 tegn. Men hvis vi holder rulle i dette forholdsvis bredt vindue, bekendtgørelse er der en masse andre ting, jeg kan angive. 

One, kan jeg angive attributter ligesom, ved du hvad, det INT burde være usigneret. Jeg ønsker ikke negative tal, så lad os gøre det usigneret. Null er ikke relevant her, fordi Jeg ønsker alle brugere have et unikt nummer. Jeg ønsker ikke at være nul. 

Men det er interessant. Jeg kan angive, at id er enten primære nøgle i denne database, eller det er unikke, eller det er indekseret, eller fuld tekst. Så for nutidens formål, lang historie kort, PRIMARY betyder, at dette skal være både konceptuelt og teknisk det felt, vi bruger til entydigt identificere brugere. 

Så når vi ser op brugere, dette er en slags af et løfte om at slå dem op for det meste af den unikke identifikator. Og databasen vil sikre, at hvis du har en bruger nummer 3, kan du ikke fysisk indsætte en anden bruger med det samme nummer 3. Databasen vil bare nægte at gemme dine ændringer. Hvilket er en god ting, fordi du kan beskytte dig mod dig selv. selv 

Alternativt for brugernavn. Så den anden række, tilbagekaldelse, er brugernavnet felt. Så den anden række her er brugernavn, som vi gjorde på det yderste venstre der. 

Så hvad ellers kan jeg ønsker at angive? Jeg er ikke tilladt, i henhold til SQL, at angive to primære nøgler. du kan angive en fælles nøgle, hvor du se på begge felter, men de kan ikke enkeltvis være primære nøgler. Så det er udelukket. Så der kunne jeg vil vælge? 

Nå, UNIQUE ligner i ånden til en primær nøgle, hvor du angiver dette område skal være unikke, men det er ikke kommer til at være den ene Jeg bruger hele tiden. Og vi kommer ikke til at bruge denne ene alle den tid, hvad grunden til igen? Det er langsommere potentielt hvis det er en lang brugernavn. Det er bare spild af tid. 

INDEX, i mellemtiden, præciserer, at det er ikke kommer til at være unikke, men jeg vil gerne dig at arbejde din magi under hætte for at gøre det hurtigere for mig at søg på dette område. Så dette er sandsynligvis ikke relevant her. For brugernavn, ville jeg argumentere for, at UNIQUE er et godt svar. Men formoder, at vi gjort brugerne mere interessant end blot brugernavne, hashes, og ID-numre. Hvad hvis vi gav folk fulde navne? Hvad hvis vi gav dem adresser og andre data om dem? 

Tja, hvis du angiver, at en kolonne i et database er indekseret, der betyder, at MySQL eller Oracle, eller hvad database du bruger, bør arbejde sin magi og bruge en form for fancy data struktur som et træ eller en trie, eller en hash tabel, eller noget til at garantere at når du søger efter data ved hjælp af vælger på det pågældende område - ligesom vise mig alle, at bor på Oxford Street. En forespørgsel sådan. Hvis du har angivet på forhånd, at du vil have et indeks på dette område, at søgninger vil være meget, meget hurtigere. 

Hvis du ikke angiver et indeks, den bedste du kan gøre, er en lineær søgning, hvis det er ikke sorteret. Men hvis du angiver INDEX, smart mennesker, der gjorde databasen - folk som dig, der nu kender træer og lande og hash-tabeller - vil automatisk bygge sådan en data- struktur i RAM for at sikre, at disse søgninger er meget hurtigere. 

FULLTEXT mellemtiden er ens i ånden, men tillader dig at gøre wildcard søgninger, ligesom vise mig alle, at bor på gader, der begynder med bogstavet O, uanset grunden. Du kan gøre med jokertegn sådan. Eller mere overbevisende ting som show mig alle, der har ordet - vise mig alle, hvis navn begynder med et bestemt bogstav. Du kan søge efter nøgleord på denne måde. Ok. 

Så, design muligheder der potentielt. Der er andre, som jeg vil bølge mine hænder på. Det viser sig, at du kan have forskellige opbevaring motorer. Og det er mere mystisk end vi har brug i hvert fald for problemet sæt syv. Som standard er du fyre hjælp noget, der hedder InnoDB. Du vil se omtale af dette sted i phpMyAdmin interface mest sandsynlige. Men ved, at der er andre design beslutninger, som er af potentiel interesse kommer afgangsprojekter hvis du gør noget web-baseret. 

Men lad os gøre det. Lad os gå videre og sætte dette på skærmen som en teaser til en historie involverer dig, en værelseskammerat, og et glas mælk. Lad os tage en to minutters eller så pause her. Og hvis du kan holde sig rundt, så lad os komme tilbage, se lidt mere på SQL, og så en smule af JavaScript med p-sæt otte i tankerne. 

Ok. Så lad os få dig til at tænke sig om en hjørne sag, der kan meget nemt opstå i forbindelse med anvendelse af en database eller helt ærligt, selv ved brug af virkelige verden tingene ligesom pengeautomater for at få penge. Så her er et køleskab. Antag, at du har fået en alt for i din kollegieværelset eller dit hus. Og du har en værelseskammerat, og begge af du virkelig gerne mælk for eksempel. 

Så du kommer hjem fra klassen en dag. Han eller hun er endnu ikke tilbage. Du åbner køleskabet. Du ønsker virkelig et stort glas mælk. Der er ingen mælk. Så hvad gør du? Du lukker køleskabet. Du fat i dine nøgler. Du går ud til pladsen. Og du får i linje på CVS på dem self checkout ting, som altid tage længere tid end egentlig have kasserere. Alligevel. 

Så, i mellemtiden, dot dot dot, din roommate kommer hjem, og han eller hun ligeledes har hang for nogle mælk. Så han eller hun åbner køleskabet, ser ud indvendigt, og åh, pokkers. Ingen mælk. Så han eller hun hoveder ud, sker for at gå til den anden CVS, som kun var en blok væk eller anden grund, og han eller hun får i kø for at købe nogle mælk. 

I mellemtiden, du kommer hjem, han eller hun kommer hjem, og hvad gør du i sidste ende har? Dobbelt så meget mælk. Men du kan ikke rigtig lide mælk, meget. Så nu har du så meget mælk, at nu en af ​​dem er bare at gå sur til sidst. Så dette er en virkelig dårlig problem. Right? 

Så hvad er der sket? Så fundamentalt, det er lidt af en latterlig eksempel. Men under hætten, hvad vi har haft ske her er både du tjekket tilstanden af ​​nogle stykke hukommelse, køleskabet. Begge du tjekket staten nogle variabel. Du begge trak en konklusion at du derefter har handlet på. Men desværre, mens din værelseskammerat var i butikken, staten at variabel ændret sig, han eller hun kom tilbage og nu ønsker at ændre tilstanden, men det er allerede blevet ændret på ham eller hende. Og selvfølgelig ville han eller hun ikke har gået til butikken, hvis de vidste, at du allerede var undervejs. 

Så i den virkelige verden, hvordan kunne du undgå dette problem, forudsat du har et køleskab, du har en værelseskammerat, og du faktisk kan lide mælk? 

PUBLIKUM: Kommunikation. 

DAVID MALAN: Kommunikation. OK. Men hvordan kan du kommunikere? 

PUBLIKUM: Efterlad en note. 

DAVID MALAN: Efterlad en note, right? Sørg altid for en bemærkning, fans af showet. Okay, så altid forlade en note, eller sætte virkelig som en hængelås eller noget på køleskabet, der holder din værelseskammerat inspicere tilstanden af denne variabel. 

Nu, hvorfor kan dette være relevant for Problemet sæt syv eller pengeautomater. Nå, forestille sig en verden i en ATM hvor du måske være i stand til at gå op til en ATM maskine her, og en anden ATM her. Og det sker ret ofte. Og formoder, du havde to ATM-kort, hvilket er muligt at opnå. Og du logger ind begge maskiner effektivt samtidig forhåbentlig mens ingen kigger. Og så skriver i din PIN-kode nogenlunde samtidigt. Og så skal du gøre en balance forespørgsel for at se, hvor mange penge du har. Og lad os sige du har $ 100 tilbage på din konto. Så det væsentlige samtidigt, du sige en, nul, nul, skal du indtaste. Og du forhåbentlig komme tilbage nogle penge. 

Men hvor mange penge kan du få tilbage? Nu computere i slutningen af ​​dagen, især hvis de taler til servere, ikke nødvendigvis gør tingene i den rækkefølge, der er forventet. 

Så formoder, hvad der sker på grund af uanset netværk hastighed spørgsmål der er, eller CPU problemer der er, eller noget lignende, antage, at første ATM kontrollerer din balance og ser, åh, denne person har 100 dollars. Men derefter bliver distraheret fordi måske en backup der sker, og så det er langsommere. Eller måske, mens du kontrollerer, netværket forbindelse fik lidt langsommere, fordi dette sker bare. De er fysiske enheder. Så i mellemtiden, den anden ATM stiller det samme spørgsmål. Hvor mange penge David har? $ 100 er svaret. Men fordi den første ATM endnu ikke sendt beskeden trække $ 100, både Pengeautomater har inspiceret bankens hvælving, se der er $ 100 der, og nu begge maskiner potentielt er kommer til at spytte ud et svar. 

Nu, dette er godt for dig i en vis forstand hvis hvad banken gør i sidste ende er ændre beløbet til minus 100 af indstille den variable svarende til din bankkonto lig med 0, i modsætning til at gøre minus 100. Nu i værste fald for banken - eller i den bedst for banken, i mellemtiden, de giver dig $ 200, og din bankkonto viser nu negativ $ 100, som virkelig ikke gavne dig på alle. Men pointen er, at dette løb betingelse for to bofæller få mælk eller to pengeautomater forsøger at få kontanter og ændre tilstanden af ​​en hvælving samtidig eksisterer nogen gang du har en database. 

Nu i problemet sæt syv, dette emne opstår i den forstand, at hvis du køber en andel af Facebook bestand, og derefter for eksempel kan du købe en anden andel af Facebook lager, skal du gøre en beslutning som programmør. For at afgøre, hvordan du opdaterer database, odds er du kommer til at har én række for den pågældende bestand, og det er en måde at gennemføre den. Og du kommer til at have en andel af FB, som er deres børssymbol for dette brugernavn, eller denne bruger Id, den entydige identifikator. 

Men den samme historie kan ske her. Hvis du gør en SELECT i SQL, som du vil se i problemet sæt syv, når du ser, Åh, David har én aktieklasse på Facebook lager. Lad mig nu ændre dette at være to aktier fordi han ønsker at købe en anden kvote. Men formoder David havde faktisk to browservinduer åbne, eller formoder, at Det er en fælles konto med to ægtefæller, og begge forsøger at udføre den samme operation, der også, det potentiale for en beslutning om at være foretaget på grundlag af den tidligere verdens tilstand - kontoen har én aktie - og både mennesker, eller begge servere, nu prøv at sige forøge det til to aktier. Men i dette tilfælde, du måske har opkrævet mig penge for begge aktier, men inkrementeres netop én gang. 

Så kort sagt, det grundlæggende problem her, som med vittighed om at forlade en Bemærk, eller sætte en hængelås på det, er hvis to mennesker, eller to tråde - tænke tilbage på bunden - kan inspicere nogle variable og derefter forsøge at ændre denne variabel, men disse to ting ikke ske på samme tid, men kan blive afbrudt af andre ting, der sker, data kan komme ind i en meget underlig tilstand. Og du kan drage fordel, eller du kan lide i den forstand eksempel penge. 

Så i problem sæt syv, giver vi dig denne linje kode, som længe historie kort, løser dette problem i MySQL. Denne meget lang instruktion, der ikke endda være på en enkelt linje på skærm her sikrer, at din operation er, hvad der kaldes atom. Det hele sker på én gang, eller det sker ikke på alle. Denne meget lange sætning kan ikke få afbrudt delvist. 

Og hvad det gør, er bogstaveligt talt hvad den siger. Sæt ind i nogle tabel følgende tre felter disse specifikke værdier, men om duplikeret nøgle, ikke gør en indsats. Gør en opdatering. Så det er ligesom at gøre en SELECT og en INSERT så at sige på samme tid. Og hvad er den nøgle, der er nok der henvises til her? 

Det viser sig, og du vil se dette i problem sæt syv spec, fordi vi har erklæret, at der er en unik nøgle på denne særlige tabel, så du kan ikke have flere rækker for den samme bruger med det samme penny stock symbol - i dette eksempel her, DVN.V er en dum penny stock, at vi henvises til i spec. Fordi vi har erklæret, at det unikke, hvad det betyder er, at hvis du forsøger at indsætte en dublet række, du er i stedet kommer til at opdatere det uden nogen andre har en chance for at ændre tilstand verden enten. Så kort sagt, dette sikrer tingene er atomare. 

Mere generelt selvom, databaser som MySQL - og du behøver ikke denne funktion p-sæt syv, men holde det i tankerne for fremtiden - støtte det, der kaldes transaktioner hvor man kan sige START TRANSACTION bogstaveligt. Du kan derefter udføre to SQL udsagn. Og en SQL-sætning, som du vil se i p-sæt syv, ser lidt noget som dette. Opdater en tabel kaldet konto. Indstil balance kolonne svarer til, hvad kolonnen i øjeblikket balance er minus 1,000 hvor nummeret, kontonummer, som bruger-id, lig 2, og derefter opdatere konto dot dot dot. 

Så i lægmandssprog, hvad gør disse to forespørgsler synes at gøre i virkelige verden følelse af banksektoren? 

PUBLIKUM: Overførsel til besparelser. 

DAVID MALAN: Præcis. Overførsel af midler fra en konto til den anden. Og dette er et andet eksempel, hvor du virkelig ønsker, at disse to ting til at ske eller ikke ske. Du ønsker ikke noget at komme i midten af ​​dem og potentielt rodet op matematik, eller rodet op, hvor meget penge du har, eller hvor meget penge har banken. Så hvad er virkelig rart om transaktioner i MySQL er, og databaser mere generelt, er, at de og intelligente mennesker, der har gennemført disse funktioner finde ud af at gøre sikker på, at begge disse ting sker eller slet ikke. 

Og hvis du virkelig ønsker at gøre en hjemmeside, der bruges af folk på campus, folk i den virkelige verden, gør noget i opstart forstand, det er disse former for design beslutninger, der blive stadig så vigtigt. Ellers, du begynder at miste data, mister brugere, eller i værste fald som vi har set her, potentielt tabe penge. Så igen, mere om det i problem sæt syv, samt måske for nogle af du i de afsluttende projekter. 

Så lad os ændre det billede, vi havde for et øjeblik siden bare i endnu en måde. Så lad mig faktisk se, hvis jeg kan - nope, der er gået. Der er det. 

Så dette er, hvor vi forlod sidste gang. Og det viser sig, vi kommer til at kaste en ting mere i blandingen her - et sprog kaldet JavaScript. Så JavaScript faktisk passer i dette stykke - og jeg ikke helt nok plads, så det er nu ikke til at skalere. OK, det er virkelig ynkeligt. OK, så det er JavaScript. Ok. Jeg er virkelig gør det en bjørnetjeneste. Ok. 

Så JavaScript er anden programmering sprog, og vores sidste, hvis det hjælper berolige, at der er ikke meget mere af brandhaner her. Så JavaScript er også et fortolket sprog, hvilket betyder, at du ikke gør kompilere det i nuller og ettaller. Du skal bare køre den. Men hvad er fundamentalt anderledes med JavaScript regel er, at du ikke køre det på din webserver. Det bliver ikke køre i Apparatet per se. Snarere, det bliver hentet af en bruger via HTTP i deres browser - Chrome, Safari, Internet Explorer, Firefox, uanset hvad - og det er den browser, der udfører dette bestemt programmeringssprog. 

Så for at være klar, PHP hidtil har været henrettet enten på kommandolinjen i vores sorte og hvide vindue, på en server ligesom apparatet en computer gerne apparatet, eller det har været udføres af en web-server kører på en computer. Men temaet her er, at PHP hidtil er blevet udført server-side, så brugeren og brugerens browser aldrig ser en linje af PHP kode. 

I virkeligheden, hvis du nogensinde åbne en browser for dit andet websted eller, og du faktisk se PHP kode i dit vindue, nogen har skruet op. Fordi det ikke er beregnet til at være sendes til en browser direkte. Det er meningen at blive henrettet, og drejes til noget som HTML. 

Men JavaScript er hovedsagelig det modsatte. Det er beregnet til at blive kørt typisk inde af en brugers browser-vindue. Og hvilke typer af hjemmesider bruger JavaScript så disse dage? 

Ligesom bogstaveligt hver populær hjemmeside. Hvert websted, du fyre sandsynligvis bruger dagligt bruge JavaScript for enkleste og endda mest sexede funktioner. 

Så noget som Facebook Chat, hvis du bruger det. Hvordan det rent faktisk arbejder? Nå hidtil, alle de ting vi har gøres med HTML og PHP antager, at du trækker op en URL, og du trykker Enter, og du se nogle HTML-indhold. Og du klikker på linket, der ændrer URL, skifter siden, og genindlæser nogle nye indhold. Klik på en anden URL eller indsende en formular, du få ført til en anden side, og du se nogle nye indhold. 

Men ved hjælp af noget som Facebook Chat, eller Gchat eller Google Maps, sjældent gør hele siden genopfriske sådan, at du ser en hvid skærm øjeblik og så nyt indhold. Snarere, websider i dag er dynamisk få opdateret igen, og igen og igen alle slags af bag kulisserne. Og det viser sig, at når du går til noget som Facebook eller Gchat, eller Gmail, og siden opdateres automatisk uden at genindlæse hele skærmen, hvad der er sket, er, at din browser har gjort slags hemmeligt yderligere HTTP-anmodninger - ikke for hele websider, men bare for små klumper af data, ligesom det instant message, at din ven bare sendt dig, eller statusopdatering, at nogen lige sendt dig, eller tweet at nogen netop sendt. Det er bare at lave små anmodninger om data, og derefter bruge JavaScript, dette programmeringssprog, at ændre, hvad websiden ligner uden server hjælper, uden serveren genererer, at HTML. 

Så kort kan JavaScript bruges så til ikke kun at hente nye data fra serveren uden at genindlæse hele side eller sender en formular. Det kan også bruges til at ændre det såkaldte DOM - Document Object Model - som er lige den fancy måde for siger træet HTML at vi så sidste gang. 

Så for at berolige, JavaScript er syntaktisk så ligner C så godt. Der er ingen hovedfunktion. Du skal bare begynde at skrive koden og det vil blive udført, eller fortolket mere korrekt. Betingelser vil se sådan ud. Ikke forskellige fra C eller PHP for den sags skyld. Boolske udtryk eller-ed sammen vil se sådan ud. Anded sammen ligne dette. 

Skifter vil se sådan ud. For løkker vil se sådan ud. Mens loops vil se sådan ud. Gør mens loops vil se sådan ud. 

Dette er nyt. Så JavaScript ikke har en foreach konstruere per se, men dette konstruere for variabel i i array, og jeg i denne tilfælde bliver en indeksværdi. Så det er lidt forskelligt fra det foreach, skønt nye versioner af JavaScript kommer ud hele tiden, så selv disse sprog har er under udvikling. 

Og som en sidebemærkning, JavaScript disse dage kan også bruges på en server, ligesom PHP ved hjælp af en ramme, der kaldes Node.js. Et af CS50 s TFs, Kevin, har medført en seminar om Node.js der er til rådighed på cs50.net/seminars. Så hvis du er nysgerrig, ved, at du kan bruge dette på serveren side, som godt, men det er en forholdsvis ny trend, men en kraftig en af ​​slagsen. 

Dette er en lidt anderledes. Dette er et array i JavaScript. Og hvad slår dig som anderledes versus C eller PHP? Der er et par hurtige historier Vi kan fortælle her. Hvad mangler versus PHP? 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: Ja? Beklager, siger igen? 

PUBLIKUM: Ikke erklære typen af ​​variabel. 

DAVID MALAN: Vi er ikke erklære typen af ​​variabel. Så egentlig ganske ligesom PHP, vi er ikke angivelse af de typer af denne variabel. Snarere vi er mere generisk siger VaR variabel. Vi har ikke PHP gener for dollartegn, hvilket samtidig besværligt at typen, gør mere klart, at noget er en variabel. Betragtninger her, er vi slags tilbage til C tilgang ved blot at kalde en variabel ved navn, vi ønsker at give det, ligesom tal. Og også som PHP, har vi firkantede parenteser for værdier inde denne array. 

Så variabler i JavaScript også kunne se sådan ud. Bemærk her er en streng kaldet s, men ligeledes har vi ikke specificeret at det er en streng. Her er dog en funktion, der ikke eksisterer i nøjagtig samme måde i PHP, men en smule tilsvarende. Dette er et objekt i JavaScript. Og objekter slags den schweiziske hær Kniv af en datastruktur i, at du kan bruge dem til en række ting. 

Her, for eksempel, vi erklære en variabel kaldet citat. Den type af denne variabel er et objekt. Du kan tænke på det som en C struct der har nøgler og værdier. Symbol er en nøgle. FB er en værdi, tilsyneladende en bestand symbol. Komma. Prisen er en anden nøgle, og dens værdi er tilsyneladende et decimaltal, eller en nummer mere generelt i JavaScript, for 49,26 dollar. 

SÃ¥ PHP har ikke - vi ikke har set i PHP objekter helt som dette, men vi kunne se en analog, hvilket var, hvad? 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: Associative arrays. Så mens PHP har associative arrays hvis syntaks er stadigt en smule, så anderledes - vi oplevede de firkantede parenteser. Vi så de underlige pile symboler. JavaScript har objekter, men dette er for det meste en semantisk forskel, og en anderledes synonym for nu. Men som en sidebemærkning, PHP har også objekter på en måde, Java og andet sprog har objekter i objektorienteret programmering. Men vi vil bruge disse blot for datatyper til nu. Objekter og associative arrays. 

Dette kunne man gøre det lidt mere klart. Her er hvorfor et objekt er nyttigt. Når du ønsker at erklære en elev, Ligesom Zamyla, kan vi faktisk indkapsle så at sige indersiden af ​​det objekt ved hjælp krøllede parenteser ligesom før en hel masse nøgler og værdier i her. Vi har et ID, et hus, og et navn til Zamyla, efterfulgt af et semikolon som sædvanlig i slutningen. 

Hernede også, det er lidt anderledes, men også meget kraftfuld disse dage. Her er et array, og jeg ved, at fordi der er en firkantet beslag op top og en kantet parentes nederst. Og dette er en vifte af hvilke data skriv tilsyneladende i JavaScript? Dette er en matrix af det ser ligesom tre objekter. Og jeg ved, det er kun et objekt på grund af de krøllede parenteser. Og bemærk at der er åbent klammeparentes, nogle ting tæt klammeparentes, komma, derefter nogle flere, komma, og derefter nogle flere. Så det er tre argumenter adskilt af to komma. 

Så dette er en vifte af tre objekter. Og hver af disse objekter synes at være en studerende eller ansat af nogle slags, hver med et ID, hus, og navn. Men jeg har kaldt det noget kaldet JSON - JavaScript Object Notation. Og dette er et dataformat, der faktisk er så meget populære og mode i disse dage, at hvis du skriver en program, der bruger Facebook API, Twitter API, virkelig næsten enhver API derude i disse dage, herunder nogle af CS50 egen den data, du får tilbage er ikke i gamle skole CSV-format. 

Fordi huske, at CSV er super simpelt. Det er kun kolonner adskilt af kommaer. JSON data giver dig flere metadata. Det knytter en nøgle med hver værdi, så de behøver ikke at bare antage, at nulte søjle er en værdi, kolonne den ene er den anden, den anden kolonne er en anden. Alt i et JSON objekt her er en slags af selv-beskrive, fordi hver et af navnene i denne fil har bogstaveligt navn foran det som en citeret streng. 

Så lad os tage et kig på en par eksempler her. Lad mig gå ind i apparatet. Og lad mig gå ind i vores vhost biblioteket i offentligheden. Og lad mig gå ind i JavaScript bibliotek. Og lad os gå videre og åbne op DOM-0.html, hvor DOM betyder blot dokument objekt model. Det er træet ting, som Jeg nævnte tidligere. 

Og lad mig foreslå følgende. Her er en webside, hvis krop er temmelig simpel. Så hernede på bunden, Bemærk, at jeg har en formular. Vi har set dem før. Den har to indgange, hvoraf den ene har en ID navn, hvoraf den ene har en type af indsende, og den første ens type er tekst. Så det faktisk lyder ret simpelt. 

Lad os gå her. Lad os gå tilbage til denne side her. Lad os gå ind i localhost, og gå ind i vores JavaScript-bibliotek, og gå til DOM-0, og her har vi denne formular. Så det er tilsyneladende al denne side gør. Det har et navn felt med knappen Send. Men jeg har ikke tænkt mig at bruge PHP her. Jeg har tænkt mig at gøre alt klientsiden så at sige i JavaScript som følger. 

Bemærk, at jeg faktisk har givet navnet inden for denne indgang et unikt identifikator, som rent faktisk vil spare mig noget tid på et øjeblik. Og bemærk jeg har introduceret en anden tag i hovedet af min webside, den  tag. 

Så det er i denne forstand, at JavaScript er en klient-side programmeringssprog. I dette tilfælde, ligesom CSS, har jeg lagt det lige inde i min HTML. Men bemærk jeg har erklæret en funktion der ser lidt ligesom PHP syntaktisk, men det er faktisk JavaScript, fordi igen, det er client-side i browseren. Og tage et gæt, hvad det kommer til at gøre, selv om nogle af syntaksen her er ny. 

PUBLIKUM: Sig goddag til hvem. 

DAVID MALAN: Det kommer til at sige goddag til hvem besøger denne side. Så hvordan? 

Så bemærker, viser det sig i JavaScript der er en alert () funktion. Dette er en meget slags trist funktion, virkelig bare en tendens til at irritere brugerne. Det er ikke en du skal virkelig bruge typisk, men det er en hurtig og beskidt måde slags udskrive noget til en grafisk brugergrænseflade grænseflade, som en browser. Bemærk her, at jeg har fået en streng i enkelte anførselstegn. Det viser sig, at i modsætning til C, JavaScript kan faktisk have du bruger single citater, og helt ærligt det er bare lidt af den stilistiske konvention blandt JavaScript programmører at bruge enkelte anførselstegn. PHP, de rent faktisk har lidt anden betydning. Men for nu, bare vide, at det er den eneste grund. Konventionen i JavaScript er ofte at Brug apostroffer, men vi kunne bruge anførselstegn i begge steder. 

Så det er interessant. Husk sidste gang, at vi havde at billede på skærmen, der trak et træ hvor du havde HTML node, og hovedet node, og kroppen node, og så noget tekst. Men der var en særlig knude på meget top, at jeg kaldte dokumentet. Tja, det viser sig i JavaScript, enhver gang du skriver et program i JavaScript i en browser, har du adgang til en særlig global variabel. Tilsvarende i ånden til PHP s superglobale, denne ene kaldes i alle små bogstaver dokument. 

Det er ligesom en struct, men denne struct også har funktioner inde i det. Så en C struct bare har data typisk. Men en JavaScript objekt som denne teknisk er også har funktioner, også kendt som metoder inde i den. Og du kan kalde en funktion inde i dette objekt helt bogstaveligt gør sit navn, prik, og derefter navnet på funktionen, eller igen metode. Det er bare et synonym, virkelig. 

Og hvad betyder denne funktion gøre? Du kan slags gætte fra navnet. Få element af id. Så det kommer til at søge på websiden, søge det træ, på udkig efter uanset node, AKA element, har en unikt id citat unquote navn. Og hvad skal jeg gøre? Jeg har tænkt mig at få værdien indersiden af at node i træet, og jeg har tænkt mig en eller anden måde at sige goddag til det navn. 

Så tag et gæt, selvom vi ikke har set det endnu, hvad gør det plus symboler betyder her og her sandsynligvis? 

PUBLIKUM: sammenkæde. 

DAVID MALAN: sammenkæde. Right, og disse er blot slags design beslutninger mennesker gjort år siden. I PHP, du sammenkæde ting med prikker. I C, du hoppe gennem flere hoops og kalde funktioner som strcopy () eller strcat () eller andre lignende funktioner. Men i JavaScript, du bruger plusser. Så dette er blot concatenating tre strygere - hej, et navn, og derefter et udråbstegn. 

Så hvornår og hvorfor er denne funktion kaldet selv? Nå, tage et gæt fra HTML nederst. Hvorfor er hilse () kaldes, eller hvornår? 

Tilsyneladende, så godt jeg kan fortælle, om indsende, når denne formular er forelagt, Jeg har tænkt mig at gøre, hvad er indersiden af ​​disse citater. Og specielt, jeg vil kalde hilse () og derefter vende tilbage falsk. 

Nå, lad os se hvad nettet effekt her er først. Så lad mig gå videre og skrive i, siger, Loren, Send. Hej Loren. Lad os se, om dette måske var bare en heldig gennemførelse. Nope. Så det er at skrive ud, hvad navn jeg faktisk lagt der. 

Men bemærk, hvad der ikke ændrer sig. Webadressen er stadig DOM-0.html. Der er ingen register.php. Der er ingen anden fil. Der er ingen handling attribut. Så hvad er denne tilbagevenden falsk formentlig gør? Hvorfor kalder jeg hilse (), og derefter returnere falsk sandsynligvis? Hvad der normalt sker, når du klikker på Indsend en formular, at selv vi har set i den forløbne uge? 

PUBLIKUM: [uhørligt]. 

DAVID MALAN: Det går et eller andet sted, ikke? Det går til nogle destination URL. Men jeg ønsker ikke at det skal ske her. Jeg vil have min webside for at være helt dynamisk som Gmail, hvor når du er der, du bor der. URL'en ændrer ikke på en måde, angiver hele siden er ved at reloade. Snarere, jeg bare ønsker at ændre noget ligesom at udskrive noget her på skærmen. 

Jamen så lad mig rense dette op en lille smule. Lad mig åbne op ikke dom-0, men lad mig åbne dom-2. Bare så du har set nogle syntaks her. 

Det viser sig, at det, vi bare gjorde bruger rå JavaScript. Så dette er virkelig det sprog JavaScript. Nogle af jer måske kender et bibliotek kaldet jQuery. 

Så jQuery er ikke det samme ting som JavaScript. Det er bare et bibliotek, en rigtig smart fyr skrev og populariseret sådan at næsten alle i verden nu bruger jQuery, når du bruger JavaScript. Og ved første øjekast, helt ærligt, det ser lidt mere kryptisk. Men du vil finde, især hvis du går der for din afsluttende projekt med web udvikling, vil du opdage, at dette renser tingene op og sparer dig en ganske få linjer kode. 

Så lad os bare kaste et blik på, hvordan denne formular fungerer. Læg mærke til hvad jeg fjerner tilsyneladende fra min HTML? Der er ingen på indsende handleren så at sige. Der er ingen attribut. Fordi du ved, hvad Jeg vidste ikke rigtig kan lide? Jeg følte, at vi var ved at falde i gamle vaner der. Ligesom det var begyndt at føle sig sjusket at blande både CSS med HTML, fordi du slags smide forskellige sprog over hele sted, ligeledes havde dette begynder at føle som en dårlig vej at gå, hvor Jeg sætter JavaScript-kode inde i mit HTML snarere end factoring det. 

Så det er den lektie her. I dom-2.html, jeg factoring det ud. Og jeg gør tingene lidt forskelligt. For nu, vil jeg vinke mine hænder på, hvad det virkelig betyder under hætten. Men netop for nu antage, at der først linje kode i dette bibliotek kaldet jQuery betyder blot, når dokumentet er klar, skal du gøre følgende. 

Fordi websider kan tage lidt tid at indlæse. Du kan være på en langsom internet tilslutning, og det kan være spinning og spinning, og endelig den er indlæst. Denne linje kode bare siger vent hele siden er klar, at dokumentet er klar, før du udfører denne kode. 

Og nu mærke til, det er nok de mest nyttige først tage væk fra jQuery. Denne linje her er meget ens i ånd denne meget længere linje her. Betragtninger i rå JavaScript-kode, der eksisterer et dokument global objekt, har en funktion kaldet getElementById () de mennesker, der skrev jQuery forenklet at bare at sige dollar tegn, og derefter inde i parenteser lægge to citater, og derefter sætte en hash symbol efterfulgt af unikt id, du ønsker at få fat. Så svarer det til document.getElementById. 

Mellemtiden. Indsende betyder blot på indsendelse uanset form, du er henvise til venstre, gå fremad og udføre dette. Men det er nu den nysgerrighed også. Hvad er underligt om, hvad Jeg har fremhævet her? Ikke alene er den slags syntaktisk ny, er der også mangler noget. 

PUBLIKUM: Det er bare kaldte funktion? Det er ikke kaldet alarm? 

DAVID MALAN: Ja. Nå, så alert () er nede her, for at være fair. Men der er ingen omtale af en navn, ligesom du kender, foo eller noget op her. Og ja, det er en af ​​de funktioner, af JavaScript, der er helt kraftfuld, men også helt nye. Og PHP faktisk har det så godt. 

Lad mig gå videre og gøre noget hurtigt. Lad mig gå videre og sætte dette ud her. Lad mig gøre det. Funktion. Lad os kalde dette handleren (). En fører funktion, så at sige. Noget, der håndterer nogle operation. Lad mig rydde op i min indrykning. Og sætte dette her. Og sætte det her. Yep. OK. 

Så nu har jeg en funktion kaldet handleren (), at jeg ikke rigtig kender hvad det gør endnu. Det har bare stadig, at ting. Whoops. Tog for meget. Lad os gøre det. Ok. Undskyld. Ok. Lad mig gøre det. OK. Det ser pænt og lige videresende nu. Lad mig gøre det. Gør dette. Og OK. Så nu, lad os sætte dette herovre. Ikke mere programmering på flue. OK. 

Så nu, lad os gå tilbage til hvor historien begyndte. Tidligere sagde jeg, at denne linje her betyder, når dokumentet er klar, gå videre og gøre dette. Hvad ønsker jeg at gøre? Nå specifikt, jeg ønsker at gå videre og gøre følgende. Udfør denne linje kode, og derefter hvad jeg vil have dig til at gøre, er at kalde dette at fungere, når formularen er sendt. 

Nu er dette, hvad der er interessant. Dette er ikke i sig selv en funktion. Bemærk jeg ikke sætte parenteser her på den normale måde. Jeg er bogstaveligt talt passerer en funktion kaldet handleren () til en anden funktion kaldet indsende () som et argument som selv om det er ligesom en variabel. Og det er en af ​​funktionerne i JavaScript, er funktioner, selv er virkelig bare objekter. I virkeligheden, de er virkelig bare variabler af en slags. Og hvis navnet på den funktion er handleren (), er der ingen grund til at jeg ikke kan lade det som et argument her. Og det betyder, når formularen med id af demo er forelagt, kalder denne funktion. 

Men nu, hvis jeg fortryde alt dette, hvorfor så jeg måske gøre dette for et øjeblik siden? Nå, det er en anonym funktion. Fordi ærligt, jeg forstod, hvorfor er jeg generer at spilde tid erklære en funktion kaldet handleren () kun at kalde det i én og kun ét sted? Hvis jeg ikke har brug for det navn, og jeg gør ikke brug for at kalde det mere end et sted, lad os bare implementere funktionen lige hvor jeg har brug for det. Og så JavaScript og PHP støtte det kaldes anonyme funktioner, Tillad mig at gøre præcis det her. 

Men vi bare ridse overfladen. Lad os drille med blot et par afsluttende eksempler her. 

Hvis jeg går ind i quote.php. Bemærk, at det er faktisk en PHP funktion, en PHP-program, at jeg skrev der forventer en HTTP parameter kaldet symbol, og jeg kan passere i en værdi som FB. Og hvis vi rent faktisk se på kilden kode, dette forespørge en gratis hjemmeside kaldet Yahoo Finance, ligesom p-sæt syv, og det er at vende tilbage til mig noget i tilsyneladende format kendt er JSON - JavaScript Object Notation. Det er bare et objekt. Læg mærke til de krøllede parenteser, citater, tyktarmen, og komma. 

Nu i mellemtiden, det er temmelig cool. Fordi jeg nok kan bruge en programmering sprog til at generere URL'er der ligner dette dynamisk, ret? Jeg kan ændre dette til Google og komme tilbage Googles aktiekurs på $ 1,017.55. Så lad os se om vi ikke kan bruge det nu. 

Lad mig gå til ajax-0 her, hvilket ligner følgende. Det er bare et websted, der har en formular med en knap. Lad mig her gå videre og skrive i YHOO for Yahoos bestand symbol Klik på Hent Quote, og nu mærke til jeg har fået en alarm med 32,86. 

Lad mig faktisk gå til en mere avanceret udgave på denne side, version to, og skrive i lad os sige Microsoft, MSFT. Get Quote. Og nu mærke, ingen alarm. Læg mærke til hvor der står pris skal bestemmes? Der er den enkleste af eksempler, antyder hvad Gchat og Facebook Chat, og Gmail, og andre sådanne websites gør ved faktisk ændre websiden. 

Bemærk dette. Lad mig genindlæse siden. Lad mig åbne Chromes Inspector. Lad mig gå til elementerne fanen hernede. Bemærk nu, hvis jeg zoome ind hernede og åbne denne op, bemærke, at dette er min HTML DOM - mit dokument objekt model. Dette er min HTML. Men nu mærke til, selvom det går at være lidt svært at se det i både steder på en gang, hvis jeg skriver i FB heroppe, se bunden på skærmen alene. 

Det er faktisk ændrer min HTML på flue. Og det gør det ganske enkelt ved at gøre noget som dette. Hvis jeg åbner ajax-2, bekendtgørelse om gennemførelse noget så sexet som at selv om det er temmelig grimme, men så sofistikerede som der funktionelt, har det nogle HTML nederst. Men bemærk Jeg plejede at mærke. Vi har ikke brugt det før, men dette er ligesom en, men det gør ikke tvinge alt på en ny linje. Det bare gør et rektangulært område på samme linje væsentlige. 

Bemærk, at jeg gav det en ID på prisen. Og det viser sig ved anvendelse af den samme JavaScript bibliotek, jeg har en funktion kaldet citat (), der kaldes, når formularen er sendt. Og hvad jeg gør, er dette. Jeg erklære en variabel i JavaScript kaldet url, gemme værdien quote.php? symbol =. Med andre ord, jeg selv begynder at udarbejde en HTTP-anmodning, og derefter Jeg concatenating på, at med et plus uanset elementet med ID symbol er, hvor meddelelsen er, at tekstfelt lige hernede. Så ligesom vi havde formularer i fortiden. 

Og så viser det sig i jQuery, hvis du opkald. val (), der kalder på en val funktion, en værdi funktion, der får hvad brugeren har skrevet i. Og så alle de netværkstrafik der sker, er dette. $. GetJSON. 

Og som en sidebemærkning, dollar tegn er blot en forkortet notation. Det er virkelig jQuery.getJSON. Få mig til JSON fra denne webadresse, og da anmodningen kommer tilbage, kalder dette funktion og passere ind som argument hvad kom tilbage fra serveren. 

Så med andre ord, hvis jeg gå tilbage til browseren, og jeg går tilbage til quote.php, hvad min browser gør, er at få denne luns af data. Og når jeg går til denne webside her, varsel, hvis vi i stedet gå til netværket fanen og klare det, og indtast derefter noget som GOOG for Google og Get Citat, mærke siden ændrede sig ikke. Men en HTTP-anmodning blev fremsat, og hvad kom tilbage her, hvis vi ser på svar er en hel bunke af JSON at vi adgang til sidst med denne enkle linje her. 

Data der blev fået fra serveren. Prisen er navnet på den nøgle jeg ligeglad. Så data.price giver mig det. 

Nu mellemtiden, og dette er det sidste eksempel. Du kan gøre endnu mere med siden. En faktisk godt to. Vi kan bringe tilbage tagge, hvis du husker dette. Det er JavaScript. Vi kan gøre det. Meget spændende. Vi vil overlade som en cliffhanger. 

Men mere spændende, kan du gøre ting som dette. Hvis jeg går til geolocation-1, viser det sig at Chrome ved, at vi er på breddegrad længdegrad 42.37. -71,10. Så der er endnu mere der til din rådighed. Men mere om det i næste uge. Se dig mandag.