DAVID MALAN: Greit. Dette er CS50, og dette er utgangen av uke ni. Det har vært en virvelvind i løpet de siste dagene. Og problemet satt sju, hvis du er kneet dypt inn i det, skjønner det er litt av en litt nytt som er der inne. Men la oss se om vi ikke kan sette alt sammen her kort før da oppbygning av i ennå en annen retning og seeing hvor ellers vi kan gå. 

Så så langt, har vi snakket om HTML. Vi har snakket om CSS. Vi har snakket om PHP. Du har begynt å oppleve SQL. I dag skal vi snakke litt om Javascript. Men hvordan gjør alle disse uensartede språk passer sammen? 

Så vi snakket i forrige uke om oppfatningen av å ha en server. Så la oss bare tegne dette rektangelet som en web server her. Og en web server serverer sikkert filer. Og noen av disse filene kan være HTML-filer. Så en av de tingene som en web-server kan spytte ut kan være en fil som vi vil bare tegne som dette inneholder noen HTML. Så i lekmann vilkår, hva betyr HTML lar deg gjøre? 

PUBLIKUM: Page look fint. 

DAVID MALAN: OK, lage en side ser fin, selv om jeg tror jeg har bevist som ellers. Så HTML lar deg legge ut sider strukturelt, og det gjør at du kan slags estetisk markere opp en side, merke opp statisk innhold, slik at du Deretter kan du se det med en nettleser. 

Men det er nøkkelen. Det er statisk innhold. Du skriver det, lagrer du det, og deretter sende den. Og webserveren deretter serverer det opp til de besøkende. 

Men vi stilisere ting ved hjelp av en annen language helt. Vi begynte å bruke en stil attributt på noen tagger. Og stilen attributtet la oss sette ting som skriftstørrelse og farge. Og du har sikkert begynt å oppdage, eller du snart vil for endelig prosjekter potensielt, men likevel andre egenskaper som du kan bruke i CSS. Og så i lekmann vilkår, hva egentlig så gjør CSS gjøre? De er bare eksempler av disse. Hva betyr det at du kan gjøre det HTML ser ikke ut til fra hva vi har sett så langt? 

PUBLIKUM: Definer stiler selv. 

DAVID MALAN: Definer stiler selv. Så definere ting som klasser som du kan ha oppstått, eller unikt identifisere noder i et dokument slik at at du kan stilisere dem. Men mer spesifikt, vil jeg si at CSS virkelig lar deg ta ting på siste mil og lar deg spesifisere mye mer presist estetikk, mens HTML for det meste lar du strukturere sidene dine. 

Og selv om det er noen standard, som vi så tag for en overskrift tag, som grovt sett gjort ting stor og fet. Det er en ganske generisk definisjon av koden - stor og fet. Hva skriftstørrelsen er det? Hvilken farge er det? Hvor fet er det? Og CSS lar deg finere tune sånne ting. I tillegg til layouten, som noen av dere har sett. 

Og ærlig talt, er CSS litt av et rotete språk. Det er veldig kraftig i at du kan gjøre bokstavelig talt hvilken som helst nettside som du har sett på nettet i dag med det, men det er litt vondt i halsen. Og noen av dere har slo hodet mot veggene som allerede er bare for å gjøre noe dumt som sentrum en meny på Problemet satt syv hvis du har fått til det punktet allerede. 

Men skjønner, disse tingene bli lettere over tid. Du begynner å legge merke til mønstre. Og igjen, vil Google være din venn for de ulike måtene du kan løse slike problemer. 

Og jeg tør si med CSS og HTML mer generelt, kan du løse problemer i mange flere måter, som alle kan meget godt være riktig, enn du kunne i noe sånt som C, selv nå PHP, eller Javascript. Det er bare mange forskjellige måter å legge ut ting. 

Men dette begynte å bli rotete, sa vi. Bare slags commingling HTML og CSS med stil attributt var litt slurvete. Og så vi i stedet sa, liksom abstrakt sett, at du bør i det minste begynner å faktor ut din CSS sannsynligvis. Ikke din stil attributter, men minst bruke stilen tag inni hva del av web-side? 

PUBLIKUM: Head. 

DAVID MALAN: I hodet. Frem til nå, vi bare hadde tittelen opp der, men du kan også legge til en stil merke, og som du kan sette din CSS grovt snakker mot toppen av siden. Men da vi tok ting et skritt videre og vi priset det ut mer inn i en egen fil. 

Og så disse to filene var en eller annen måte tilknyttet hverandre. Og det var faktisk den kode som gjorde det. Og hva var ett av de overordnede motivasjon for factoring ut våre CSS alle mer? 

PUBLIKUM: Gjenbruk. 

DAVID MALAN: Reusability. Høyre? Du har kanskje sett i p-set syv allerede at mange av sidene, den kjøpe side, salgssiden, portefølje side, er trolig strukturert noe lignende. Det er en CS50 finans logoen øverst med mindre du har bestemt deg for å endre det. Det er en bunntekst på nederst på sidene. Og CSS kan du deretter å faktor det ut det inn i en egen fil, slik at hvis du ønsker å endre noe globalt over hele området, kan du virkelig bare endre det på ett sted. 

Men det er en pris du betaler potensielt etter å ha priset ut CSS fra min HTML-fil i et eget filreferanser det med tag, som vi så på mandag. Hva kan nedsiden være på dette? Tenker tilbake en uke siden til når vi er snakker om HTTP og TCP / IP og hvordan Internett fungerer. Noe over her? 

PUBLIKUM: Det tar mer tid. 

DAVID MALAN: Det tar mer tid. Hvorfor? 

PUBLIKUM: [uhørbart]. 

DAVID MALAN: Yeah. Så det kanskje tar litt mer tid. Fordi en, er CSS åpenbart ikke er i den samme filen. Så nå må du gjøre ikke en, men to forespørsler. Og hver av disse forespørslene som vi så i Chrome i den såkalte Inspector, og vi så på fanen nettverk, hver av disse filene krever en HTTP forespørsel, som vi så tar noen mengde tid. Nå er det kanskje ikke mye. Kanskje det er bare 20 millisekunder. Kanskje det er 200 millisekunder. 

Men tenk om en side som Facebook, eller CNN, eller Google, som er mye større enn eksemplene vi ve sett på så langt. Disse sidene kan ha dusinvis av filer, hvor hver av disse kan kreve en nedlasting av en fil. Så ting kan potensielt begynner å avta. 

Og spesielt i disse dager da vi alle har mobiltelefoner i våre lommer og tregere internettforbindelse, måtte vente noen millisekunder, noen flere millisekunder for ytterligere filer kan faktisk være treg. Ventetid er ordet som beskriver den slags venter på at du har det du oppleve når du venter på noen del av informasjonen. 

Men det er en oppside. Så det er ikke alle slags - det faktisk er litt av en seesaw her. Ulemper nå, men hva nettlesere kan gjøre hvis de er smart for å unngå å måtte be om det samme styles.css fil igjen kan være å gjøre hva? 

Cache det. Så caching - C-A-C-H-E - betyr vanligvis her bare for å redde fil du har bedt om det første gang, og så sjekk bufferen for det. Sjekk at du er liksom beholderen, og hvis du allerede har en kopi av styles.css, selv om en annen side i p-set, eller hvilken som helst nettside, ber om det igjen, bare for å gi den bruker den samme bufret kopi. Ikke bry ber om det. 

Ulemper det, skjønt, som noen av dere har snublet over på p-settet. Hvis du gjør en endring på serveren og du gå tilbake til nettleseren, og du reload, noen ganger nettleseren gjør deg en tjeneste og ikke bry re-laste ned din styles.css fil fordi, kom igjen, hva er oddsen at disse stilene som Facebook bruker kommer til å endre time til time eller dag til dag? Det er ganske lav. De kan endre seg over tid, men ikke ved minutt eller per time. 

Så et triks, bare så dere vet det når du gjør web utvikling, er ofte holder nede skift-tasten for eksempel, og klikk deretter oppdater i nettleseren din, og at viljen vanligvis fortelle leseren reload alt, selv om du allerede har det i cachen. Så igjen, oppsider og ulemper, men alle slutt utforme beslutninger. 

Så nå, gjorde vi ikke bare avslutte historien her. Hvis jeg nå gå tilbake og tilbake og tilbake og tilbake, begynte vi å introdusere ikke bare HTML, men PHP. Så i lekmann vilkår, hva PHP ikke la oss gjøre? 

PUBLIKUM: [uhørbart]. 

DAVID MALAN: Hva er det? 

PUBLIKUM: Introduser logikk inn i koden. 

DAVID MALAN: Yeah, introdusere logikken i koden din. Så det er en sann programmeringsspråk med looper, og variabler, og funksjoner og betingelser, og alle de tingene vi har fått hjelp vei tilbake når siden scratch. Og PHP, vi har sett, kan brukes enten på kommandolinjen - det trenger ikke å ha noe å gjøre med web, selv om det er egentlig sin opprinnelse og hva det har en tendens å være god på og bidrar til - men du kan bruke PHP bare av natur av det faktum at den har et print () funksjon, og en printf ()-funksjonen, eller et ekko ()-funksjonen. Det er bunter av måter du kan skrive ut tekst med PHP. 

Derfor kan du bruke denne programmer språk til utgang nøyaktig hva vi snakket om før. Du kan dynamisk generere HTML. Kanskje ikke alle av det. Kanskje du hardkode ting, som header, og bunntekst, og logoen, og dine stilark og alt dette. Men for noe sånt som p-set syv, Ønsker du å manipulere bestandene og viser brukerens portefølje, som er kommer til å dynamisk endre, kan du sikkert bruke PHP og logikken det gir du som programmeringsspråk for å utgang dynamisk undergrupper på siden. 

Så når du snakker om dynamiske websider, eller web-programmering, det er hva du egentlig snakker om. Ved hjelp av et språk som PHP, eller ting heter Python eller Ruby, eller Java, eller ennå andre språk, å spørre en database ofte, eller en annen server, og så dynamisk spytte ut HTML. 

Nå sluttresultatet, som en side, er at HTML av de fleste nettsteder, inkludert p-satt syv, er trolig kommer til å bli et stort rot hvis du ser på kilden kode i en nettleser. Det er ikke en stor avtale. På dette punktet, når vi bryr oss om stil, vi bryr oss om ting som du skriver. Vi vil ikke bry seg om ting at hva koden din utganger. Så ikke bekymre deg for innrykk her hvis det er PHP som er faktisk gi ut ting. Tross alt, vil nettleseren ikke bryr seg, og en human vil ikke bli ute ved kilden uansett. Vi ansatte, for eksempel, ville være å se på din PHP. 

Så la meg gi et raskt eksempel nå av hvorfor ellers dette kan være nyttig. Så ærlig, jeg kan ikke huske sist gang jeg brukte C for å løse et problem i den virkelige verden. Det var trolig i gradsstudier når Jeg trengte å bruke et språk som var ganske lavt nivå og ga meg mulighet til å gjøre noe veldig høyt utfører å virkelig redde så mange CPU sykluser som jeg kunne, i stor grad fordi jeg brukte store datasett, og hver CPU syklus telles. Og ærlig talt, selv i ting som telefoner i disse dager og andre enheter der du ikke helt har så mye minne og du ikke helt har som mye CPU, hjelp raskere språk er fortsatt attraktivt. 

Men i den virkelige verden, når du bare ønsker å kaste noe program sammen for å analysere noen data, eller du har samlet en hel haug med registreringer for noen studentgruppe og du vil veldig raskt automatisere sende e-post en etter en til hver og en av dem registranter, du kommer til å strekke seg etter et høyere nivå språk enn C så å si. Noe som PHP eller Python, eller Ruby, eller et halvt dusin andre som eksisterer disse dager. Men de tre er trolig det mest trendy akkurat nå. 

Og hva dette betyr er at du kan åpne opp en tekst editor som gedit eller de fleste noe annet, og så bare begynne skrive kode uten å måtte bekymre seg om kompilering, uten å måtte virkelig bekymre minnehåndtering, husk skjønt at litt slurv vil etter hvert komme tilbake til å bite deg hvis datasettet blir større eller problemet blir stort. Men hva dette betyr for oss er følgende. 

La meg gå videre og kjøre stavekontroll fra problem satt seks. Så dette er min trie-basert gjennomføring som jeg brukte på den store bord hvor jeg spilte ikke så godt. Vi vil komme tilbake i en ukes tid og revidere de som ender opp på toppen av stort bord på vår siste forelesning. Men for nå, la meg gå videre og bare kjøre min løsning i teksten, og vi vil gjøre King James Bible, og her vi går. 

Så de er alle av den antatte feilstavede ord ut av King James Bible. Og min gjennomføringen tok et halvt sekund totalt. Så ikke så ille på dette bestemt datamaskin. Men tenk på hvor mye kode jeg måtte skrive. Tenk hvor mye kode du måtte skrive. Tenk hvor mange timer du har brukt i D-hall eller sovesal eller hvor faktisk koding opp den løsningen. 

Vel, hvis jeg faktisk har et høyere nivå språk som PHP, legg merke til hva jeg kan gjøre her. Først anta at dette er stedet distribusjonen din kode. Dette er en fil som heter stavekontroll. Den er tilgjengelig som en del av dagens fordeling kode. Og jeg kommer til å vinke min hånd på de fleste av detaljene, men dette er faktisk et interessant eksempel på hvordan du kan portere et språk som C over til PHP. Jeg bokstavelig talt åpnet to tekst vinduer, ett med min C-versjonen av speller.c, og jeg bare begynte å oversette det i min hodet til PHP og skrive den ut ved hjelp de nærmeste tilsvarende funksjoner. 

Så noen av disse tingene er forskjellige. Vi så sist gang at PHP ikke bruker inkludere i helt samme måte. Den bruker krever vanligvis, selv om inkludere eksisterer. Definer er litt forskjellig fra # Define i C, men det er hvordan vi lager en konstant. $ Argc det viser seg eksisterer i PHP, så vi har sett det før. Disse er bare variabler, som alle som starter med dollartegn. Recall dette er bare en gjeng av flytende poeng. 

Så lang historie kort, du er velkommen til bla gjennom dette hvis nysgjerrig, er dette nesten en linje-for-linje omdannelse av C-versjonen av speller.c i PHP. Og du kan gjøre dette igjen for et halvt dusin andre språk. 

Men det som er interessant er dette. Eller hva er ærlig nedslående er dette. La meg gå videre og skrive om dictionary.php, og hevder at jeg er kommer til å gå videre og re-implementere Problemet satt seks her. 

Så la oss foreslå første at i denne fil, som vil bli implementert i PHP, så la meg åpne mine koder sånn. La meg gi meg selv en global variable, får $ size zero. Og jeg kommer til å gi meg selv en hash table. Jeg skal bruke en hash tabell for denne tingen. Hvordan erklærer jeg en hash table i PHP? Ferdig. OK. 

Så åpen brakett tett brakett representerer hva i PHP, som vi har sett? En matrise, men en matrise som kunne være en assosiativ array. En assosiativ array er en datastruktur som tilknyttede taster med verdier. 

Nå i den enkleste numerisk indeksert array, disse nøklene er hva? Null, én, to, tre, ikke sant? Old school ting tilbake fra C. Men det kan også være strenger som foo og bar, eller Maxwell, eller en hvilken som helst slik streng. Slik at jeg kan utnytte at på bare et øyeblikk. 

La meg gå videre og erklære en funksjon som - la oss gjøre load () først. Så funksjon belastning (). Og PHP er litt annerledes ved at du bokstavelig talt skriver funksjon, men du ikke skriv en retur type. Jeg kommer til å gå foran og si at belastning ()-funksjonen bør ta i argument $ ordbok, akkurat som C-versjonen gjorde. Jeg gjør det fra hukommelsen. 

Og jeg foreslår at jeg er kommer til å gjøre dette. Jeg er rett og slett kommer til å gjøre foreach. Jeg kommer til å kalle en funksjon kalt filen (), passerer i navnet at fil, er der variabelen $ Ordbok som $ ord. Og så innsiden av min for loop her, jeg kommer til å gå videre og lagre i min $ Tabell som $ ordet kommer sant. Ferdig. Oh, vent. Ferdig. OK. 

Det vil si at lasten ()-funksjonen si i PHP. NÃ¥, hvorfor det fungerer? Og jeg er litt juks her. 

Så, ett, foreach vi så kort sist. Det betyr bare at du kan iterere over en matrise uten å bry seg med i og n og pluss pluss, og alt det. Ordbok er selvfølgelig filnavnet, noe som er store eller små, de to ordbøker vi brukte forrige gang. Filen er en funksjon som åpner opp tekst file, leser den i linje for linje, og hender deg tilbake et stort utvalg, hver av med elementer som er en linje fra den filen. Så det er kombinasjonen av fopen, og fread, og mens loop, og fclose, og alt dette. Til slutt, som ordet betyr bare det er variable Jeg kommer til å ha tilgang til på hver iterasjon i denne sløyfen. 

Så kort sagt, dette en liner her betyr åpne opp filen hvis navn er i ordbok, variabelen, iterere over det linje for linje, og hver gang du får en linje, lagre i en variabel kalt ord, og deretter gjøre noe med ord. Hva ønsker jeg å gjøre? Jeg ønsker å sette ord i min hash table. 

Vel, jeg kan sette noe i min hash table akkurat som i C ved hjelp av hakeparenteser. Dette er navnet på min hash table. Jeg kommer til å indeksen inn at hasj bord på dette stedet. Så ikke braketten null, ikke beslaget et. Bracket quote unquote noe, hva det ordet er. Og akkurat som du kan ha i din hash table arbeid trie, du bare butikken effektivt en boolsk, implisitt eller eksplisitt. Ferdig. Jeg lagrer verdien true. 

Nå er det et par ting Jeg kutter hjørner på her. Teknisk sett, kommer det til å være en irriterende ny linje, / n, på slutten av hvert av disse ord. Så jeg bør nok ringe en PHP-funksjon kalt chop (), som vil helt bokstavelig hugge det av. Og jeg faktisk trenger å gjør en annen ting. Jeg bør nok øke størrelsen på hver iterasjon, så jeg holder styr globalt av hva det er. Og ærlig talt, og dette er en av de dummere aspekter av PHP, hvis du er ved hjelp av en global variabel, må du å eksplisitt si at du er. Så jeg kommer til å faktisk skrive i global $ Størrelse, global $ tabellen, og nå min funksjon er fullført. 

Så ikke fullt så enkelt som før, men sannsynligvis tok mindre tid enn C versjon, kanskje? OK. 

Så nå la oss gjøre sjekken ()-funksjonen. La oss se om dette i det minste tok timevis at det tok oss i C. Så la meg gå videre og erklære sjekk som en funksjon. Tar i argumentet ord, som er kommer til å komme fra stavekontroll. Og jeg skal bare sjekke om Følgende variable isset, bord brakett strtolower av ordet - la oss balansere alle mine parentes - deretter returnere true. Else - det var virkelig hardt en del av dette program. Else, return false. Ferdig. Det er sjekk (). 

Nå, hvorfor ikke dette fungerer? Vel, jeg gikk i et ord, som er en streng. To, jeg sjekker innsiden av hasj tabell, som heter $ tabellen. Jeg tvinger det til små bokstaver ved å ringe en funksjon ganske lik tolower () i C, men dette gjør hele ordet, ikke en enkelt karakter. Og hvis det er satt, med andre ord det er en verdisettet, med andre ord, hvis det er sant, så ja, dette er et ord. Fordi jeg setter det der med last (). Og hvis ikke, kommer jeg til å returnere false. 

Nå de andre er lette. Funksjon størrelse (), hvordan gjør jeg dette? Jeg hovedsak gjøre returnere $ størrelse. Men jeg teknisk sett må gjøre dette irriterende ting. Og faktisk opp høre, ble jeg kutte det ene hjørnet for mange. Jeg trenger virkelig å gjøre global $ tabellen. 

Men når det er sagt, losse). Losse () er fantastisk. Funksjon losse (). Hvordan ønsker jeg å gjennomføre losse ()? Ferdig. OK. 

Så losse (), er minnehåndtering helt tatt vare på for deg i noe som PHP og mye av høyere nivå språk. Så dette er fantastisk. Som hvorfor i helvete gjorde vi brukt den siste åtte pluss uker på C skriving tydeligvis veldig sakte, virkelig tid tidkrevende problemer med titalls timer av arbeid under våre belter? 

Vel, for en ting, dette kan fungere fint for små programmer. Det absolutt sped opp min utviklingstid. Men la oss se hva som skjer i den virkelige verden. 

La meg gå inn i denne katalogen i en terminal vindu. Det er stavekontroll. Og legg merke til som en side, og du kan har støtt på dette i oppgavesettet seks eller problem satt sju. Du trenger strengt tatt ikke trenger å ende PHP-filer med. php. Hvis du putter en linje som det første på Helt øverst, det er en spesiell linje syntaks som i hovedsak betyr finne programmet heter PHP og bruke den til å tolke denne filen. Så nå er det ingen som egentlig vet at Jeg kjører et PHP program. Jeg kan kjøre det akkurat som om det ble noe samlet i C. 

Men her er tingen. Egentlig, la oss gjøre dette igjen. Dropbox/pset6 /. Det er stavekontroll. OK, 0,44 sekunder. Det går raskere denne gangen. 

Nå la oss gå inn i PHP-versjon. Nice touch. Men bare tenk hvor mye tid Jeg sparte på kontortid. OK. 

Så 3.59 sekunder, noe som faktisk høres ikke nøyaktig heller. Men det er fordi lang historie kort, når du skriver ut et stort beløp ting til skjermen, som selv bremser ting ned. Hva det virkelig tok CPU i apparatet var 3,59 sekunder, i kontrast til C, noe som tok 0.44 sekunder senest. Det er virkelig en bestilling av magnitude annerledes. 

Så hvor er at prisen kommer fra? Hvorfor er det så mye tregere? Hvorfor utfører PHP så dårlig? Danielle? 

PUBLIKUM: Du gjorde egentlig ikke bruke en hash table. 

DAVID MALAN: Jeg gjorde egentlig ikke bruke en hash table. Så jeg slags gjorde. Så det er en assosiativ array. Mest sannsynlig dersom personene i PHP er virkelig smart, de brukte under hette en faktisk hash table implementert i noe sånt som C eller C + +. Men. Yeah. 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: Yeah. Så hver av funksjonene jeg skrev nå - faktisk kan man si at når mer en litt høyere? 

PUBLIKUM: Hver av funksjonene som du inkluderte har mye mer full kapasitet enn - 

DAVID MALAN: Så det er veldig sant. Det er mye mer overhead at vi er egentlig ikke se ved å fokusere bare på dictionary.php, som jeg nettopp skrev. Derimot, det er en hel tolk kommer i bakgrunnen. Faktisk, når jeg kjørte dette programmet, det kjørte ikke utarbeidet nuller og enere designet for min Intel CPU. Snarere var det kjører linje for linje PHP-kode som ser akkurat ut liker vi skrev den. Og så når du bruker en tolket språk, du faktisk må betale denne prisen. Det kommer til å ta litt tid til å lese filen topp til bunn, fra venstre mot høyre, og deretter utføre hver stille igjen og igjen. 

Nå i virkeligheten, spesielt på nettet, du faktisk kan fremskynde denne prosessen ved å mellomlagre resultatene av PHP-koden blir tolket. Og det gir mening på nettet, fordi hvis du ikke har en bruker som meg her, men 1000 eller 10.000 brukere, og deretter kanskje første gang filen er vist det går sakte, men etterpå det er mye raskere. 

Men også dette, igjen, er en trade off. Og etter noe som en forskningsdata satt, eller noe stort som dette, brukerne vil til slutt begynner å føle at nedgangen. 

Så kort sagt, tolket språk er veldig mye på moten, veldig populært, og ærlig er trolig de språkene du bør strekke seg etter når løse problemer Etter CS50. Men innser hvor mye du er virkelig tar for gitt under panseret egentlig de siste ukene i hash tabeller, og trær, og prøver, som blir brukt til slutt til faktisk implementere ting som åpen brakett, hakeparentes, som vi kan nå takknemlig tar for gitt. 

Så la oss ta en titt nå i denne web sammenheng. Og jeg nevnte forrige gang at det er en haug med superglobals i PHP som er egentlig ikke relevant på kommandolinjen. De er mer relevant i sammenheng for å bruke PHP i en web-sammenheng. Så kjører PHP på en web server for å generere ting som HTML. 

Og vi kikket på $ _GET og $ _POST, og det er der automatisk brukernes innspill ender opp bare hvis du sender en danne til en fil som slutter på. php på en nettside server som apparatet. Men la oss se litt på $ _COOKIE Og $ _SESSION. 

I lekmann vilkår, er hva en cookie som du forstår det i sammenheng med ved hjelp av web? 

PUBLIKUM: File på datamaskinen. 

DAVID MALAN: Yeah. Det er en fil på brukerens datamaskin plantet av hva nettstedet du kommer til å besøke. 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 nesten alle nettsiden i verden i disse dager, inkludert cs50.net, er en cookie plantet på datamaskinen, er som enten en verdi som er lagret i RAM i din datamaskin i nettleserens minne, eller noen ganger faktisk en fil lagret på harddisken. 

Og hva som er typisk lagret i denne filen er ikke ditt brukernavn, ikke din passord, vanligvis ikke noe sensitive mindre nettstedet er ikke så bra med deres sikkerhet, men heller det er en stor unik identifikator blant andre ting. Det er en stor tilfeldig nummer plantet på datamaskinen, men du kan tenke på som liksom en virtuell hånd stempel som fra en klubb eller noen fornøyelsespark som lar de ansatte, eierne av at service, å huske hvem du er. Så hvis det store tilfeldige tall er som 12345678, selv om det er åpenbart ikke så tilfeldig, tenk på at etter hvert som hånd stempel som når du besøker facebook.com for første gang, de stemple det nummeret på hånden din. Og da fordi du snakker HTTP, du å være en nettleser, og fordi Facebook åpenbart snakker samme som en web server, sier protokollen HTTP at når du senere gå facebook.com, enten det er en andre senere, en time senere, selv neste dag, så lenge du har ikke eksplisitt logget ut, som effektivt er som å vaske hendene. HTTP sier at du bør presentere din hånd-stempel hver gang du tilbake til det nettstedet. 

Hva Facebook da gjør er at de se på den hånden stempel og de sier, oh, 123456789. Jeg vet ikke ved første øyekast at dette er David Malan i Cambridge, Massachusetts, men de kan sjekke deres database og si, oh, den personen på hvis datamaskinen plantet vi 123456789 er David Malan fra Cambridge, Massachusetts. La oss vise at brukeren deretter sin profil side eller hans News Feed. 

Men det er et problem her hvis dette er hvordan nettet faktisk fungerer. La oss ta en titt på en rask eksempel. La oss faktisk gå å si facebook.com. Men før vi kunne gå dit, la meg gå videre og åpne opp Chrome Inspektør ned her. La meg se på fanen nettverk. Og nå la oss gå videre og skriver i https://facebook.com. Og jeg gjør det slik at vi ikke ser alle disse viderekoblinger og avfall tid på å se gjennom dem. La meg trykk enter. 

OK. Vi ser en hel haug med forespørsler. Det kommer Facebook. Det er en hel haug med filer. Og her, per min omtale av latency siste gang, det er mye av HTTP-forespørsler. Men den første er trolig den mest interessante. 

Så la oss bla nedover her, og Jeg vil zoome inn på et sekund. Dette kommer til å være slags et rot, men la oss se. Facebook er å sende oss en hel haug med ting. 

Men whoa, interessant. De er å plante ikke bare én, men fire hånd frimerker på min hånd her. Set-cookie, Set-cookie, set-cookie, set-cookie. Og er det noen funksjoner her. Alle av dem nevne noen slags utløp. Og det ser ut som Facebook er håp å huske meg før 2015. Så det er antagelig den tiden der Jeg må logge ut, eller de vil bare automatisk anta jeg er ikke kommer tilbake. Så det er faktisk en anstendig tidsperiode. 

Og er det noen andre ting som skjer her. Denne informasjonskapselen ser ut til å være tvangs slettes ved å si det utløpt i 1970 før cookies eksisterte. Så nettleser er bare kommer å anta OK, er sånn vaske hendene stempel. 

Men nå når nettleseren min gjør en etterfølgende forespørsel - la meg gå videre og gjøre dette igjen og reload. Nå la meg bla tilbake til topp forespørsel og gå ned her, be om overskrifter. Legg merke til dette. Så nå jeg er under ikke respons overskrifter, men merker det sier forespørselshodene. Og legg merke til at nettleseren min som en del av sin forespørsel etter trykket reload har sendes i det minste følgende informasjon. Ikke sett-cookie, men cookie. Så dette er linjen, HTTP header så å snakke, der nettleseren min er liksom av uten at jeg vet det presentere min hånd for Facebooks inspeksjon. 

Så disse informasjonskapslene kan være brukes deretter for hva? Å huske hvem du er, eller huske hvordan mange ganger du har vært der, eller virkelig noe. 

Så her er counter.php. Og la meg zoome inn på skriften. Og hver gang jeg laster denne siden, varsel det er å huske hvor mange ganger Jeg har vært der. Vel, det er ikke alle som imponerende. La oss bare lukke den fanen, og nå la oss gå tilbake til http://localhost/counter.php. 

Å, det er interessant. Det fortsatt husket, selv om jeg lukket fanen. Og ærlig talt, hvis jeg lukker nettleseren, hvis implementert på riktig måte, jeg kan fortsatt huske at denne brukeren er hvem han eller hun var den første gangen, og bare en gang jeg går inn i Chrome-menyen, som over her er her, og gå til Historie, og klikk Fjern søkedata som noen av dere kan ha i siste, først da vil dine cookies faktisk bli slettet i løpet av web utvikling. 

Så, hvis vi går - La oss lukke opp gedit her. Og hvis vi går nå til denne filen. La meg gå inn i vår vhosts / localhost / public, og la meg gjøre counter.php. Legg merke til at dette er en ganske enkelt program. Det er en ganske enkel nettside. 

Så toppen av filen er bare kommentarer. Men her er en ny linje som du kan har sett allerede i p-set syv, session_start (). Dette er en linje av PHP-kode som hovedsak forteller webserveren, gjør Husk å stemple hender og gjøre Husk å sjekke hånd frimerker. Det er alt som linjen gjør, og det gjør alt for at prosessen for oss. Da merker jeg har nettopp fått to grener her. Hvis disken nøkkelen innsiden av dette spesiell global variabel kalt $ _SESSION Er satt - med andre ord, hvis det er noen verdi der - la oss få det og lagre det i en lokal variabel kalt $ teller. Else, la oss tildele $ teller standardverdien på 0. 

Nå her er ett aspekt av PHP som er både en velsignelse og en forbannelse. PHP er litt slurvete. Så mens i C, hva ville det Omfanget av disken har vært enten her eller her? 

Det ville ha vært begrenset til disse klammeparentes. Gjett hva? I PHP, finnes det også utenfor de klammeparentes, her, og her, og her, og her, og selv ned nedenfor. Så jeg sier dette er en velsignelse i den forstand at du ikke trenger å tenke som hardt som vi gjorde uker siden. Men det er også litt av en forbannelse i den uansett hvor du bruker en variabel i PHP, i hvert fall i et program som dette, det er globalt tilgjengelig for bedre eller verre. Så du må huske på nå som variablene kan ikke være udefinert. Du har kanskje definert dem andre steder. 

Men hva skal jeg gjøre slutt? Jeg kommer til å lagre innsiden av det globale variabel som en verdi av Counter et resultat av gjør teller pluss en. Så dette er bare den aritmetiske som gjør incrementation av at telleren. Og det faktum at jeg er lagring som verdi tilbake i her er betyr å hovedsak oppdatere databasen til Husk at bruker 123456789 har vært her to ganger. Og når jeg gjør det igjen neste gang jeg oppdater siden, kommer det til å sjekke min hånd stempel og si, oh, bruker 123456789 har nå vært her tre ganger. 

Og så hva PHP og lignende språk gjør for oss er at de er å finne ut hvordan og hvor og hvor lenge å lagre verdier i denne spesielle superglobal. Og dette superglobal neste gang jeg besøke siden er liksom magisk forhåndsutfylt, fylt med verdier som var der forrige gang du besøkte, om det var en andre siden, en uke siden, eller i 2013, og vi snakker nå ca 2015. PHP og webserveren ta vare av alt dette for deg. 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: Variabler i PHP er egentlig alltid global mindre du erklære dem inne i en funksjon, og da de er lokale for funksjonen bare. Men fordi jeg ikke har skrevet noen funksjoner, er de nå effektivt global hele mitt hele fil her. 

PUBLIKUM: Er det en måte for å gjøre dem lokalt? 

DAVID MALAN: Er det noen måte å gjøre dem lokalt? Bare ved å pakke dem inn i funksjoner. Som i den nyeste versjonen av PHP, kan du gjøre dette med en anonym funksjon. Men mer om det i sammenheng med JavaScript. Men det korte svaret er nei. En lengre svaret er ja. Nice. Bra quiz spørsmål. OK. 

Så til slutt, er selve siden faktisk ganske enkelt. Legg merke til at når jeg går ut av PHP-modus, husker at alt dette ting ned Nedenfor er bare kommer til å få spytte ut rå til nettleseren. Som er greit, fordi jeg ønsker å sende brukeren litt HTML, men jeg ønsker ikke å dynamisk oppdatere som HTML. Og en måte jeg kan gjøre dette på er å sortere av svært raskt falle tilbake i PHP modus og bruk av åpen brakett spørsmålstegn likhetstegn, og deretter utgang verdien av disken. 

Eller hvis dette ser litt kryptisk, dette likhetstegnet er faktisk bare noen syntaktisk sukker for dette printf ($ teller). Men ærlig talt, det er bare litt stygg og litt irriterende å skrive. Så PHP meget pent tilbyr denne funksjonen hvor du kan bare si det mer konsist på samme måte. 

Så hva som skjer under panseret? La oss raskt se på nettverket tab her for counter.php. Og la meg gå videre og første la oss slette informasjonskapslene. La oss klare logg siden begynnelsen av tid. Nå la oss gå tilbake hit. Nå la oss oppdater siden. Og jeg er tilbake på null. Fordi min hånd stempel har blitt vasket, Jeg får nå en ny cookie. 

Faktisk hvis jeg ser på nettverket fanen og se på respons overskrifter, merker at apparatet sender meg en cookie som heter noe vilkårlig, men slags rimelig, PHPSESSID. Og det er å sende meg dette virkelig stort tilfeldig tall. Det er ikke helt et tall. Det er ikke helt heksadesimal. Det er en slags alfanumerisk streng, men antagelig er det tilfeldig. Og det er hånden stempel så å taler det jeg henviser til. 

I mellomtiden hvis jeg klikker på nytt og deretter se på denne andre linjen for min andre forespørsel, merker nå at min forespørsel overskrifter inkluderer PHPSESSID lik denne, ikke set-cookie, men bare cookie. Og det er nettleseren min presentasjon av min hånd stempel. 

Så nå som en teaser, og vi skal snakke mer om dette i en uke eller så, men på hvilken måte gjør dette deg sårbare, Facebook-kontoen sårbare, og andre slike kontoer sårbare? 

PUBLIKUM: Hvis noen har en cookie. 

DAVID MALAN: Ja, hvis noen har din cookie. Jeg mener virkelig, mye som noen av dere kanskje har prøvd på som en klubb eller en fornøyelsespark, hvis du prøver noe som dette for å kopiere stempel, om enn bakover på en annen persons hånd, og så han eller hun presenterer det som sine egne, hvis det faktisk ser identiske, 123456789, så web Serveren er tilsynelatende bare kommer til å stoler på at brukeren er deg. 

Og dette er faktisk en fundamental trussel som helst du bruker cookies fordi hvis noen etterligner bare så å snakke informasjonskapselen, tallene ut hva det er, enten ved virkelig å kopiere den ved å se på datamaskinen og å være som, OK. Davids cookie er JJ3JIK og så videre, og da de er smart nok til å vite hvordan å sortere manuelt sende som cookie fra en nettleser eller fra en program skriver de, kunne de helt logger på en nettside som deg. Det er ikke så vanskelig å late som å være noen andre med mindre vi besøker p-set to, som introduserte hva? 

PUBLIKUM: Cryptography. 

DAVID MALAN: En liten bit av kryptografi. Enkel kryptografi, i hvert fall i standard utgave, men krypto likevel. mindre. Så det viser seg hvis du krypterer alle disse overskrifter ved å bruke noe som du kan nå vite mer fortrolig som SSL, secure socket layer, eller https:// webadresser, så alle disse tingene vi har vært skotter på er faktisk kryptert, noe som betyr at det er som du kan ikke lese hånd stempel. Bare facebook.com kan, eller google.com, eller i dette tilfellet, apparatet kan lest at hånd-stempel. 

Tragisk skjønt, og igjen, dette er altfor hensiktsmessig med NSA ting i det siste, er enda SSL knuselig. Og det er faktisk ikke så vanskelig å selv knekke krypteringen. Ikke så mye ved å knekke krypteringen, men ved å lure leseren inn dekryptering dataene for tidlig. Men igjen, vi vil erte deg med det før lenge. For nå, bare være redd. Det er tragisk slags sant. 

OK. Så, hvor kommer dette nå forlate oss? Vel, la oss gjøre dette. La oss gå videre og ta en rask teaser før vi tar en pause. Og jeg tror vi vil somle litt lenger i dag, men vi kommer til å dykke inn noe helt nytt og sexy, noe som vil skjerpe appetitten for enda mer. Så det er den teaseren. 

Så SQL, begynte vi å snakke om aldri så kort sist. Du vil virkelig få hendene skitne med noe av det i p-set syv. Og i lekmann vilkår, gjør SQL hva - S-Q-L - gjøre for deg? Hva er det? Yeah. 

PUBLIKUM: lar deg få tilgang til data. 

DAVID MALAN: Yeah. Det lar deg få tilgang til data i en database. Structured Query Language. Og dette er i hovedsak en programmeringsspråk. Det er trekk ved det som vi vil ikke engang bruke i klassen. Men du kan effektivt definere funksjoner. De kalles lagret prosedyrer i SQL. Men vi vil holde det ganske enkelt og bare bruke den for noen grunnleggende operasjoner som å velge data, sette inn data, oppdatere data, og sletting av data. 

Og du kan egentlig tenke på en database, som en SQL-database, som bare å være Microsoft Excel. Fordi SQL refererer til en relasjons database, der forhold betyr bare tabeller. Rader og kolonner. Så alt du kan putte i et regneark som dette eller Google Docs, du kan sette inn i en SQL-database ved å erklære et bord. 

Nå, hvordan kan du faktisk få tilgang denne informasjonen? Vel, med kommandoer eller spørsmål som dette. SELECT, INSERT, UPDATE og DELETE. Og for det meste, de er fire eneste ingrediensene du trenger for å gjøre noe ganske kraftig i oppgavesettet syv. 

Nå tilbake i dag, ville du faktisk samhandle med en database i en svart og hvit terminalvindu på en blinkende meldingen som dette. Og databasen vi kjører på Apparatet kalles MySQL, som er gratis og åpen kildekode-databasemotor. Hvis du Google og lese Wikipedia artikkelen, vil du vite at navnet er litt overgang for noen versjoner av Linux. Maria database er faktisk en gaffel så å si av MySQL. 

Lang historie kort, kjøpte Oracle MySQL. Oracle er et stort selskap. Folk har blitt bekymret for at det ville ikke lenger forbli ganske så åpen kildekode, så dette er bare en kopi av MySQL som er fortsatt gratis, fremdeles åpen kildekode, og installert i Fedora Linux som standard. 

Men dette er en slags smerte i hals for å bli kjent med en database på denne måten. Så vi inkluderer i CS50 apparatet en gratis open source verktøy kalt phpMyAdmin. Bare en tilfeldighet at det er skrevet i PHP. Det er ingen fundamental trenger for PHP her. Men dette er bare et web-basert verktøy som vi lastet ned gratis, installert i apparatet, som gjør det mulig for oss å ha en grafisk brukergrensesnitt som å utforske p-set syv database med som å opprette nye databaser, si for din egen endelige prosjektet hvis du hadde lignende, og derved skape dynamiske websider som CS50 Finance som gjør at du kan spørre data og oppdatere data dynamisk. 

Du er ikke nødt til å bruke bare en enkel tekstfil eller CSV. Du kan faktisk bruke en smart database program slik at du kan utføre mer avanserte søk enn bare å lese gjennom alt lineært. 

SÃ¥ for eksempel, er dette det vi gir deg ut av boksen for p-set syv. Dette er en tabell med tilsynelatende minst tre kolonner, hvorav den ene er brukernavn, hvorav den ene er hasj, og den andre av hvilke er ID. 

Men det interessante, og bare for å erte ut en tanke her, brukernavn er formodentlig allerede unikt, ikke sant? Jeg mener, de fleste hvilken som helst nettside, hvis du har et brukernavn, det kan ikke være to Cæsars. Det kan ikke være to Malans. Det kan ikke være to jharvards. Dens unike. Ellers har de ikke vet hvilke jharvard det faktisk er. Så hva som kan være motivasjonen for også har en tredje kolonne på venstre det kalles ID, som ser ut som en tall som er på samme måte unik? Det føles litt overflødig til meg ved første øyekast. Hvorfor kan det være attraktivt å ha ikke bare unike brukernavn, men også unike numre? 

PUBLIKUM: De kunne ha det samme passordet. 

DAVID MALAN: Folk kan ha det samme passordet, sikkert. Det kan absolutt skje. Men hvis de har denne unike brukernavn, jeg vil hevde at det ikke egentlig saken, fordi hvis de skriver i sitt brukernavn, jeg trenger bare å sjekke deres passord, deres hash av disse. Hvorfor ellers? 

PUBLIKUM: Raskere søker. 

DAVID MALAN: Raskere søker. Hvorfor? 

PUBLIKUM: ID er bare en. 

DAVID MALAN: ID er bare ett tegn, eller for å være mer presis, det er et tall, så det er nok 32 bits eller noe sånt. Mens brukernavn, tilsynelatende Jason Hirschhorn er der oppe er liksom latterlig lang, og det kommer til å tar meg mye mer tid til streng sammenlign H-I-R-S-C-H-H-O-R-N, og kanskje a / 0 eller noe sånt, for å slå opp Jason, i motsetning til bare sa gi meg bruker nummer to. Det er 32 bits. Det er et enkelt INT som du har å sammenligne. Og ja, det er akkurat hvorfor databaser en tendens til å tilordne unike IDer til rader i dem. 

Nå hva andre datatyper er det foruten INT og tilsynelatende strenger som dette? Vel, for å være mer korrekt, SQL databaser, som MySQL, har CHAR felt. Og røye litt villedende er ikke en eneste CHAR. En CHAR felt i en MySQL database er ett eller flere tegn, men det er en fast antall tegn. 

Så for eksempel, hvis jeg går over til phpMyAdmin som du kanskje allerede har, eller snart vil et problem satt syv, og jeg går til min database, og bare for moro skyld, la oss lage en ny tabell kalt teste med bare to kolonner. Jeg vil deretter Start. Og dette vil bli ganske kjent, særlig ettersom du tinker rundt på egen hånd. Her kan jeg skrive ID for å skape en ny tabell av type int. Men her jeg kan skrive brukernavn til gjenskape den tidligere tabellen. Og legg merke til jeg har en hel haug av typer å velge mellom. 

Og dette er også grunnen til at phpMyAdmin er litt fint. Det er en slags selv undervisning i at du kan bare slags punkt, og klikk, og se på rullegardinmenyer, og slutte fra at hva krefter SQL gir deg. 

Og ja, hvis jeg velger CHAR, jeg da må spesifisere lengden, eller hvordan mange verdier, hvor mange tegn. Så veldig felles verdier er ting som 255, men det er litt lang. Vanligvis er åtte for et brukernavn. Men det er litt lite i disse dager. Så dette er et design beslutning. Er det 8 tegn maks, 32, 255, 1000? Det er egentlig opp til deg. Men en CHAR feltet er et fast antall. Så velger for få og du er slags skrudd hvis du ønsker en lengre brukernavn. Velg for mange, og hva som er nedsiden? 

PUBLIKUM: [uhørbart]. 

DAVID MALAN: Det er sløsing. Akkurat som i C, hvis du har en større del av minnet enn du trenger, er du bare å kaste bort tid og kaste bort plass. Så som et alternativ, det finnes VARCHAR, som løser dette problemet ved å behandling av lengden ikke som en fast lengde, men som en maksimal lengde, og ved hjelp av en variabelt antall tegn, som deretter har en tendens til å bare bruke så mange tegn som du faktisk trenger. Det høres perfekt. 

Hvorfor kan ikke vi bli kvitt den Char-datatype da? Hva kan være nedsiden av bruker VARCHARs, som lyder som det er en fin seier? Yeah? 

PUBLIKUM: [uhørbart]. 

DAVID MALAN: OK, bra. SÃ¥ hvis alle dine data er det samme lengde, hva er bekymring? 

PUBLIKUM: Fordi du kaster bort data ved å fortelle dem alle. 

DAVID MALAN: Så hvis alle dine data er samme lengde, skjønt, vil jeg hevde som spesifiserer en maksimal lengde på VARCHAR er ikke forskjellig fra spesifisere en fast lengde på CHAR hvis du vet at antall på forhånd. Men det er faktisk, og jeg skal liksom trekke ut fra det svaret virkeligheten at det fortsatt er en max, som kunne være irriterende, spesielt hvis du støter på en persons navn som er uvanlig lang at du ikke gjorde det forutse. Og det er også en litt mindre effektiv å faktisk søke på VARCHARs som motsetning til søker tegn, spesielt for langbord som har mye og mye data. Så også her, er tematisk igjen ingen opplagte valget. 

Så bare for å gi deg en følelse av andre datatyper som kan være av interesse enten for p-set syv eller i fremtiden, er det INT. Det er BIGINT, som er som lang lang. Det har en tendens til å være 64 biter. Det er DESIMAL, som du vil se i problemet set, som er en mye renere svar på de problemene vi oppstått med flottør og flytende peke imprecision. Og så er det DATETIME. Det er bokstavelig talt en datatype som har å se ut som et år, en måned, en dag, og en time, minutt og sekund. 

Men SQL databaser har også ting vi kaller indekser. Og en indeks er noe som du angir når du oppretter tabellen til foreta søk og andre operasjoner mer effektiv. Nærmere bestemt, er det noe som heter primærindeksen som du kunne erklære som følger. 

Vi gjorde dette for deg med brukere tabellen gir vi deg. Men legg merke til hvis jeg var manuelt gjenskape bruker tabell her gi det et navn på brukere. Jeg har allerede angitt ID. Jeg anga INT. Jeg spesifiserte brukernavn med maksimum 32 tegn. Men hvis vi holder rulle i denne ganske stort vindu, merker det er en haug med andre ting jeg kan angi. 

One, kan jeg spesifisere attributter lignende, vet du hva, dette INT bør være UNSIGNED. Jeg ønsker ikke negative tall, så la oss gjøre det UNSIGNED. Null er ikke relevant her fordi Jeg ønsker alle brukere til har et unikt nummer. Jeg vil ikke at det skal være null. 

Men dette er interessant. Jeg kan spesifisere at ID er enten primærnøkkel av denne databasen, eller det er unik, eller det er indeksert, eller fulltekst. Så for dagens formål, lang historie Kort sagt betyr PRIMÆR at dette skal være både konseptuelt og teknisk feltet som vi bruker til å unikt identifisere brukerne. 

Så når vi ser opp brukere, er denne typen av et løfte om å slå dem opp det meste av som unik identifikator. Og databasen vil sikre at hvis du har en bruker nummer tre, kan du ikke fysisk sette inn en annen bruker med det samme tallet 3. Databasen vil bare nekte for å lagre endringene. Som er en god ting, fordi du kan beskytte deg mot deg selv. selv 

Alternativt, for brukernavn. SÃ¥ den andre raden, husker, er brukernavnet feltet. SÃ¥ den andre raden her er brukernavn, som vi gjorde helt til venstre der. 

Så hva annet kan jeg ønsker å spesifisere? Jeg får ikke lov, ifølge SQL, å spesifisere to primærnøkler. du kan spesifisere en felles nøkkel der du se på begge felt, men de kan ikke enkeltvis være primærnøkler. Så det er uaktuelt. Så hvilke kanskje jeg vil velge? 

Vel, er UNIK ligner i ånden til en primærnøkkel der du angir denne Feltet skal være unikt, men det er ikke kommer til å være den Jeg bruker hele tiden. Og vi kommer til å bruke denne en alle tiden for hva grunnen igjen? Det er tregere potensielt hvis det er en lang brukernavn. Det er bare bortkastet tid. 

INDEX, i mellomtiden, presiserer at det er ikke kommer til å være unik, men jeg vil gjerne du å jobbe din magi under panseret for å gjøre det raskere for meg å søke på dette feltet. Så dette er trolig ikke relevant her. For brukernavn, vil jeg hevde at UNIK er et godt svar. Men anta at vi har gjort brukerne mer interessant enn bare brukernavn, hashes, og ID-numre. Hva om vi ga folk fulle navn? Hva om vi ga dem adresser og andre data om dem? 

Vel, hvis du angir at en kolonne i et database er indeksert, det betyr at MySQL, eller Oracle, eller hva database du bruker, bør arbeide sin magi og bruke noen form for fancy data struktur som et tre, eller en trie, eller en hash table, eller noe å garantere at når du søke etter data ved hjelp velge på det aktuelle feltet - som viser meg alle at bor på Oxford Street. En spørring sånn. Hvis du har spesifisert på forhånd at du vil ha en indeks på dette feltet, det søkene vil være mye, mye raskere. 

Hvis du ikke angir en indeks, den beste du kan gjøre er en lineær søk hvis det er ikke sortert. Men hvis du angir INDEX, smart folk som har gjort databasen - folk som deg som nå kjenner trær og prøver og hash tabeller - vil automatisk bygge en slik data struktur i RAM for å sørge for at disse søkene er mye raskere. 

FULLTEXT er i mellomtiden lik i ånden, men lar deg gjøre wildcard søk, som viser meg alle at bor på gatene som begynner med bokstaven O uansett grunn. Du kan gjøre jokertegnsøk sånn. Eller, mer overbevisende ting som showet meg alle som har ordet - Vis meg alle med navn som starter med en bestemt bokstav. Du kan søke etter nøkkelord på denne måten. OK. 

Så, design muligheter det potensielt. Det er andre som jeg vil vinke hendene mine på. Det viser seg at du kan ha ulike lagrings motorer. Og dette er mer uforståelige enn vi trenger sikkert for oppgavesettet sju. Som standard er det dere bruker noe som kalles InnoDB. Du vil se omtale av dette et sted i phpMyAdmin grensesnitt mest sannsynlig. Men vet at det er andre design beslutninger som er av potensiell interessen kommer endelig prosjekter hvis du gjør noe web-basert. 

Men la oss gjøre dette. La oss gå videre og sette dette på skjermen som en teaser for en historie involverer deg, en samboer, og et glass melk. La oss ta en to minutters eller så bryte her. Og hvis du kan holde rundt, la oss komme tilbake, se litt mer på SQL, og deretter en bit av Javascript med p-satt åtte i tankene. 

OK. Så, la oss få deg å tenke på en hjørne saken som svært lett kan oppstå i sammenheng med bruk av en database, eller ærlig, selv ved hjelp av reelle ting som minibanker for å få penger. Så her er et kjøleskap. Anta at du har en også i dorm eller huset ditt. Og du har en romkamerat, og begge du virkelig liker melk for eksempel. 

Så du kommer hjem fra klassen en dag. Han eller hun er ennå ikke tilbake. Du åpner kjøleskapet. Vil du virkelig ha et stort glass melk. Det er ikke noe melk. Så hva gjør du da? Du lukker kjøleskapet. Du hente nøklene. Du går ut til torget. Og du får i kø på CVS på de selv kassa ting, som alltid ta lengre tid enn faktisk ha kasser. Anyhow. 

Så da, i mellomtiden, dot dot dot, din romkamerat kommer hjem, og han eller hun Tilsvarende har en hankering for litt melk. Så han eller hun åpner kjøleskapet, ser inne, og oh, jævla. Ingen melk. Så han eller hun hodet ut, skjer for å gå til den andre CVS, som var bare en sperre bort av en eller annen grunn, og han eller hun får i kø for å kjøpe melk. 

I mellomtiden, kommer du hjem, han eller hun kommer hjem, og hva gjør du til slutt ha? Dobbelt så mye melk. Men du egentlig ikke liker melk så mye. Så nå har du så mye melk som nå en av dem er bare kommer til å gå sure slutt. Så dette er en veldig dårlig problem. Høyre? 

Så hva har skjedd? Så fundamentalt, er denne typen av en latterlig eksempel. Men under panseret, hva vi har hatt skje her er dere begge sjekket tilstanden for et visst stykke hukommelse, kjøleskapet. Begge du sjekket staten av noen variable. Dere begge trakk en konklusjon at du da handlet på. Men dessverre, mens romkameraten var i butikken, staten som variabel forandret, han eller hun kom tilbake og nå ønsker å endre tilstanden, men det er allerede blitt endret på ham eller henne. Og selvfølgelig, vil han eller hun ikke har gått til butikken om de visste at du allerede var underveis. 

Så i den virkelige verden, hvordan kunne du unngå dette problemet, forutsatt at du har et kjøleskap, har du en samboer, og du faktisk liker melk? 

PUBLIKUM: Å kommunisere. 

DAVID MALAN: Å kommunisere. OK. Men hvordan kan du kommunisere? 

PUBLIKUM: Legg igjen en lapp. 

DAVID MALAN: Legg igjen en kommentar, ikke sant? Alltid forlate et notat, for fans av showet. Ok, så du alltid la et notat, eller satt virkelig som en hengelås eller noe på kjøleskapet som holder romkamerat fra inspisere tilstanden til den variabelen. 

Nå, hvorfor kan dette være viktig til Problemet satt syv, eller minibanker. Vel, tenk en verden i en minibank der du kan være i stand til å gå opp til en minibank maskin her, og en annen minibank her. Og dette skjer ganske ofte. Og anta at du hadde to ATM-kort, som er mulig å oppnå. Og du logger inn begge maskinene effektivt samtidig, forhåpentligvis mens ingen ser. Og så du skriver inn PIN-koden omtrent samtidig. Og så gjør du en balanse spørring for å se hvor mye penger du har. Og la oss si at du har $ 100 igjen på kontoen din. Så egentlig samtidig, du sier en, null, null, skriv. Og du forhåpentligvis få tilbake noen penger. 

Men hvor mye penger kan du komme tilbake? Nå datamaskiner på slutten av dagen, spesielt hvis de snakker med servere, ikke nødvendigvis gjør ting i den rekkefølgen som er forventet. 

Så vel hva som skjer på grunn av uansett nettverk hastighet problemer der er, eller CPU problemer er det, eller noe sånt, antar at første ATM sjekker saldoen og ser, oh, har denne personen 100 kr. Men så blir distrahert fordi kanskje en backup som skjer, og slik at det er bremse ned. Eller kanskje mens du sjekker, nettverket forbindelse fikk en litt tregere fordi dette bare skjer. De er fysiske enheter. Så i mellomtiden, er den andre ATM spør det samme spørsmålet. Hvor mye penger har David? $ 100 er svaret. Men fordi den første ATM har ennå ikke sendte meldingen trekke fra $ 100, begge Minibanker har inspisert hvelvet bankens, se det er $ 100 der, og nå begge maskinene potensielt er kommer til å spytte ut et svar. 

Nå, dette er flott for deg i en viss forstand hvis hva banken gjør slutt er å endre beløpet til minus 100 ved sette variabelen lik din bankkonto lik 0, i motsetning å gjøre minus 100. Nå i verste fall for banken - eller i det beste for banken, i mellomtiden, de gir deg $ 200, og bankkontoen viser nå negativ $ 100, noe som egentlig ikke til nytte for deg i det hele tatt. Men poenget er at dette løpet betingelse for to romkamerater får melk, eller for to minibanker prøver å få penger og endre status for et hvelv Samtidig eksisterer noen gang du har en database. 

Nå i oppgavesettet syv, dette problemet oppstår i den forstand at hvis du kjøper en andel av Facebook lager, og deretter for eksempel du kjøper en andre del av Facebook lager, må du gjøre en beslutning som programmerer. For å bestemme hvordan du oppdaterer database, oddsen er at du kommer til å har en rad for det lager, og denne er en måte å gjennomføre det. Og du kommer til å ha en andel av FB, som er deres børssymbol for dette brukernavnet, eller denne brukeren ID, den unike identifikator. 

Men den samme historien kan skje her. Hvis du gjør en SELECT i SQL, som du vil se i oppgavesettet syv når du ser, oh, har David en aksje av Facebook lager. La meg nå endre dette til å være to aksjer, fordi han ønsker å kjøpe en andre aksje. Men antar at David hadde faktisk to nettleservinduer åpne, eller anta at det er en felles konto med to ektefeller, og begge forsøker å utføre samme operasjon, er det også, i potensial for en beslutning om å være gjort basert på den forrige tilstanden i verden - kontoen har én aksje - og både mennesker, eller begge serverne, nå prøv å si øke det til to aksjer. Men i dette tilfellet, kan du ha belastet meg penger for både aksjer, men økes bare at en gang. 

Så kort sagt, den grunnleggende problem her, som med spøk om å forlate en oppmerksom på, eller å sette en hengelås på det, er Hvis to personer, eller to tråder - tenker tilbake til scratch - kan sjekke status på noen variable og deretter prøve å endre den variabelen, men de to tingene ikke skjer på samme tid, men kan bli avbrutt av andre ting som skjer, data kan komme inn i en veldig merkelig tilstand. Og du kan ha nytte eller du kan lide som omhandlet i eksempel penger. 

Så i oppgavesettet syv, gir vi deg dette en kodelinje, som lenge historie kort, løser dette problem i MySQL. Denne svært lang opplæring som ikke selv plass på én linje på skjermen her sikrer at driften er det som kalles atom. Det skjer alt på en gang, eller det skjer ikke i det hele tatt. Denne svært lang setning kan ikke bli avbrutt delvis. 

Og hva den gjør er bokstavelig talt hva den sier. Sett inn noen tabell følgende tre felt de bestemte verdier, men på like nøkler, ikke gjør en innsats. Gjør en oppdatering. Så dette er som å gjøre en SELECT og en SETT så å si på samme tid. Og hva er nøkkelen det er sannsynligvis blir referert til her? 

Det viser seg, og du vil se dette i Problemet satt syv sin spec, fordi vi har erklært at det skal være en unik nøkkel på denne tabellen slik at du kan ikke ha flere rader for samme bruker med samme penny stock symbol - i dette eksempelet her, er DVN.V en dum penny stock at vi se i spec. Fordi vi har erklært det å være unik, hva dette betyr er at hvis du prøver å sette inn en kopi rad, er du i stedet kommer til å oppdatere den uten noen andre som har en sjanse til å snu tilstanden av verden heller. Så kort sagt, sikrer dette ting er atom. 

Mer generelt skjønt, databaser som MySQL - og du ikke trenger denne funksjonen for p-satt sju, men holde det i tankene for fremtiden - støtter det som kalles transaksjoner, der du kan si START TRANS bokstavelig. Du kan deretter utføre to SQL-setninger. Og en SQL-setning, som du vil se ip-satt sju, ser litt noe sånt som dette. Oppdatere en tabell kalt konto. Innstill balansen kolonnen lik uansett balansen kolonnen for tiden er minus 1000 hvor tallet, den kontonummer, som bruker-ID, lik 2, og deretter oppdatere konto dot dot dot. 

Så i lekmann vilkår, hva gjør disse to spørsmål synes å være å gjøre i virkelige verden følelse av bank? 

PUBLIKUM: Overføring til besparelser. 

DAVID MALAN: Nettopp. Overføre penger fra en kontoen til den andre. Og dette er et annet eksempel hvor du virkelig ønsker disse to ting til å skje eller ikke skje. Du ønsker ikke noe å komme i midten av disse, og potensielt rote regnestykket, eller rote opp hvor mye penger du har, eller hvor mye pengene i banken har. Så hva er egentlig fint om transaksjoner i MySQL er det, og databaser mer generelt, er at de og smarte folk som har implementert disse funksjonene finne ut hvordan de skal gjøre sikker på at begge disse tingene skje eller ikke i det hele tatt. 

Og hvis du er virkelig håper å gjøre et nettsted som brukes av folk på campus, folk i den virkelige verden, gjør noe i oppstarts forstand, disse er de typer design beslutninger som blitt aldri så viktig. Ellers begynner du å miste data, mister brukere, eller i verste fall i vi har sett her, potensielt tape penger. Så igjen, mer om det i oppgavesettet syv, samt kanskje for noen av du i slutt prosjekter. 

Så la oss endre det bildet vi hadde et øyeblikk siden bare på enda en måte. Så la meg faktisk se om jeg kan - nope, det er borte. Det er det. 

Så det er her vi igjen sist. Og det viser seg at vi kommer til å kaste en ting inn i miksen her - et språk som heter Javascript. Så Java faktisk passer inn i dette stykket - og jeg visste ikke helt forlate nok plass, så dette er ikke nå å skalere. OK, dette er virkelig patetisk. OK, så det er Script. OK. Jeg er virkelig gjør det en bjørnetjeneste. OK. 

Så Javascript er et annet programmerings språk, og vår siste, hvis det hjelper berolige at det er ikke mye mer av brannhydranter her. Så Javascript er også en tolket språk, noe som betyr at du ikke kompilere den inn nuller og enere. Du bare kjøre den. Men hva er fundamentalt annerledes med Java regel er at du ikke kjøre den på webserveren din. Det blir ikke kjørt i Apparatet per se. Snarere blir det lastet ned av en bruker via HTTP i nettleseren - Chrome, Safari, Internet Explorer, Firefox, uansett - og det er nettleseren som utfører dette bestemt programmeringsspråk. 

Så for å være klar, PHP hittil har vært utføres enten på kommandolinjen i vår svarte og hvite vinduet, på en server ut av apparatet, en datamaskin liker apparatet, eller det har vært henrettet av en web-server kjører på en datamaskin. Men temaet her er at PHP hittil har blitt utført på serversiden, så brukeren og brukerens nettleser aldri ser en linje av PHP-kode. 

Faktisk, hvis du noen gang åpne en nettleser for din nettside eller en annen, og du faktisk se PHP-kode i vinduet, noen har skrudd opp. Fordi det ikke er ment å være sendes til en browser direkte. Det er ment å bli henrettet og slått til noe som HTML. 

Men Javascript er egentlig motsatt. Det er ment for å kjøres vanligvis inne av en brukers nettleser vindu. Og hva slags nettsteder bruker Java deretter i disse dager? 

Som bokstavelig talt hver populære nettsiden. Hver nettside som dere sannsynligvis bruker daglig bruker Javascript for at den enkleste og selv sexiest funksjoner. 

Så noe sånt som Facebook Chat hvis du bruker det. Hvordan det faktisk fungerer? Vel så langt, alle de ting vi har gjøres med HTML og PHP forutsetter at du trekker opp en URL, og du trykker på Enter, og du se noen HTML-innhold. Og du klikker på linken, som endrer URL, endrer siden, og laster noe nytt innhold. Klikk på en annen URL eller sende inn et skjema, du bli tatt til en annen side og du se noe nytt innhold. 

Men å bruke noe sånt som Facebook Chat, eller Gchat eller Google Maps, sjelden ikke hele siden oppdatere slik at du ser en hvit skjerm øyeblikk og deretter nytt innhold. Snarere nettsider i dag er dynamisk å bli oppdatert igjen og igjen og igjen alle slags av bak kulissene. Og det viser seg at når du går til noe sånt som Facebook, eller Gchat, eller Gmail, og oppdateres siden automatisk uten å laste hele skjermen, hva som har skjedd, er at nettleseren har gjort slags hemmelighet flere HTTP-forespørsler - ikke for hele nettsider, men bare for små biter av data, som direktemelding at vennen din bare sendte deg, eller statusoppdateringen som noen har akkurat sendt deg, eller tweet at noen bare sendt. Det er bare å lage små forespørsler om data, og deretter bruke JavaScript, dette programmeringsspråk, for å endre det web-siden ser ut uten Serveren hjelpende, uten at serveren genererer som HTML. 

Så kort sagt, kan JavaScript brukes deretter å ikke bare hente nye data fra serveren uten omlasting helhet side eller sende inn et skjema. Den kan også brukes til å endre den såkalte DOM - Document Object Model - som er akkurat den fancy måte for sier tre av HTML som vi så forrige gang. 

Så for å berolige, er JavaScript syntaktisk så lik C også. Det er ingen hovedfunksjon. Du bare begynne å skrive koden og det vil bli utført, eller tolkes mer riktig. Forholdene vil se slik ut. Ikke forskjellig fra C eller PHP for den saks skyld. Boolske uttrykk eller-ed sammen vil se slik ut. Anded sammen se slik ut. 

Brytere vil se slik ut. For løkker vil se slik ut. Mens løkker vil se slik ut. Gjøre mens loops vil se slik ut. 

Dette er nytt. Så JavaScript har ikke en foreach konstruere per se, men denne konstruere for variabel i i array, og jeg i dette saken blir en indeksverdi. Så det er litt forskjellig fra det foreach, men nye versjoner av JavaScript kommer ut hele tiden, så selv disse språk har er i utvikling. 

Og som en digresjon, JavaScript disse dager kan også brukes på en server i likhet PHP bruker et rammeverk kalt node.js. En av CS50 er TFS, Kevin, har ledet en seminar om Node.js som er tilgjengelig på cs50.net/seminars. Så hvis du er nysgjerrig, vet at du kan bruke denne på serversiden som vel, men det er en ganske nylig trend, men en kraftig en på det. 

Dette er litt annerledes. Dette er en array i JavaScript. Og det som slår deg som annerledes versus C eller PHP? Det er noen raske historier vi kan si her. Hva mangler versus PHP? 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: Ja? Beklager, si igjen? 

PUBLIKUM: Ikke erklære variabeltypen. 

DAVID MALAN: Vi er ikke erklære variabeltypen. Så egentlig helt som PHP, vi er ikke spesifisere hvilke typer denne variabelen. Snarere er vi mer generelt sier Div. for variabel. Vi har ikke PHP ordensforstyrrelser av dollartegn, som samtidig kjedelig å type, gjør mer klart at noe er en variabel. Mens her er vi liksom tilbake til C tilnærming ved bare å ringe en variabel ved navn vi ønsker for å gi den, som tall. Og også som PHP, har vi klammer for verdier inne denne matrisen. 

Så variabler i JavaScript også kan se slik ut. Legg merke til her dette er en streng som heter s, men på samme måte har vi ikke spesifisert at det er en streng. Her er skjønt en funksjon som ikke eksistere på nøyaktig samme måte i PHP, men litt på samme måte. Dette er et objekt i JavaScript. Og objekter er liksom den sveitsiske hæren Kniv av en datastruktur i at du kan bruke dem for en rekke ting. 

Her, for eksempel, vi erklære en variabel kalt sitat. Typen av den variabel er et objekt. Du kan tenke på dette som en C struct som har nøkler og verdier. Symbol er en nøkkel. FB er en verdi, tilsynelatende en aksje symbol. Komma. Prisen er en annen tast, og verdien er tilsynelatende et flyttall, eller en nummer mer generelt i JavaScript, for $ 49,26. 

SÃ¥ PHP ikke har - vi ikke har sett i PHP gjenstander ganske som dette, men vi fikk se en analog, som var det? 

PUBLIKUM: [uhørlig]. 

DAVID MALAN: assosiative arrays. Så mens PHP har assosiative matriser hvis syntaks er alltid litt slik annerledes - vi så hakeparenteser. Vi så de rare piler symboler. JavaScript har gjenstander, men dette er det meste en semantisk forskjell og en annet synonym for nå. Men som en digresjon, har PHP også gjenstander på en måte som Java og annen språk har objekter i objektorientert programmering. Men vi vil bruke disse bare for datatyper for nå. Objekter og assosiative matriser. 

Dette kan gjøre det litt mer tydelig. Her er hvorfor et objekt er nyttig. Når du ønsker å erklære en student, som Zamyla, kan vi faktisk kapsle så å si inne i det objekt med klammeparentesene akkurat som før en hel haug med nøkler og verdier i her. Vi har en ID, et hus, og et navn Zamyla, etterfulgt av et semikolon som vanlig ved slutten. 

Ned her også, er dette litt forskjellig, men også meget kraftig disse dager. Her er en matrise, og jeg vet at fordi det er en hakeparentes opp topp og en firkantet brakett nederst. Og dette er et utvalg av hva data skriver tilsynelatende i Javascript? Dette er et utvalg av det ser ut som tre stedene. Og jeg vet det er et objekt bare på grunn av de klammeparentes. Og legg merke til det er åpent klammeparentes, noen ting, tett krøllete brace, komma, deretter litt mer, komma, og deretter litt mer. Så det er tre argumenter atskilt med to komma. 

Så dette er en rekke tre stedene. Og hver av disse objektene ser ut til å være en student eller ansatt av noen sortere, hver med en ID, huset, og navn. Men jeg har kalt dette noe kalt JSON - Javascript Object Notation. Og dette er et dataformat som faktisk er så veldig populær og i moten i disse dager at hvis du skriver en program som bruker Facebook API, Twitter API, egentlig nesten noen API ute i disse dager, inkludert noen av CS50 sin egen, den data du får tilbake er ikke i gamle skolen CSV-format. 

Fordi tilbakekalling som CSV er super enkelt. Det er bare kolonner adskilt med komma. JSON data gir deg flere metadata. Det knytter en nøkkel med hver verdi så de trenger ikke å bare anta at zeroth kolonnen er en verdi, kolonne en er et annet, to kolonne er en annen. Alt i en JSON objekt her er liksom av selvbeskrivende, fordi hver ett av navnene i denne filen har bokstavelig talt navn foran det som en sitert streng. 

Så la oss ta en titt på en par eksempler her. La meg gå inn i apparatet. Og la meg gå inn i vår vhost katalog i offentligheten. Og la meg gå inn i Java katalogen. Og la oss gå videre og åpne opp dom-0.html, hvor DOM betyr bare Document Object Model. Det er tre ting som Jeg refererte til tidligere. 

Og la meg foreslå følgende. Her er en nettside som har Kroppen er ganske enkel. Så her nede på bunnen, merker jeg har et skjema. Vi har sett dem før. Den har to innganger, hvorav den ene har en ID av navnet, hvorav den ene har en type sende, og den første ens typen er tekst. Så dette faktisk høres ganske enkel. 

La oss gå her. La oss gå tilbake til denne siden her. La oss gå inn localhost, og gå inn i vår Java katalogen, og gå til dom-0, og her har vi dette skjemaet. Så det er tydeligvis all denne siden gjør. Den har en navnefeltet med en Send-knappen. Men jeg har ikke tenkt å bruke PHP her. Jeg kommer til å gjøre alt klientsiden så å si i Javascript som følger. 

Legg merke til at jeg har faktisk gitt navnet felt av denne inngangen en unik identifikator, som faktisk vil spare meg litt tid i et øyeblikk. Og legg merke til jeg har introdusert en annen tag i hodet av min webside,  tag. 

Så det er i denne forstand at Javascript er en klient-side programmeringsspråk. I dette tilfellet, akkurat som CSS, har jeg satt det rett på innsiden av min HTML. Men merker jeg har erklært en funksjon som ser litt ut som PHP syntaktisk, men dette er egentlig Javascript, fordi igjen, er det klientsiden i nettleseren. Og ta en gjetning på hva dette kommer til å do, selv om noen av syntaksen her er nye. 

PUBLIKUM: Si hei til den som. 

DAVID MALAN: Det kommer til å si hei til den som besøker denne siden. Så hvordan? 

Så legger merke til, det viser seg i Javascript det er et varsel ()-funksjonen. Dette er en meget slags trist funksjon som egentlig bare har en tendens til å irritere brukerne. Det er ikke en du bør virkelig bruke typisk, men det er en rask og skitten måte å liksom skrive noe til et grafisk brukergrensesnitt grensesnitt, som en nettleser. Legg merke til her at jeg har fått en streng i enkle anførselstegn. Det viser seg at i motsetning til C, Java kan faktisk ha du bruke singel sitater, og ærlig talt det er bare snill av den stilistiske konvensjonen blant Javascript programmerere å bruke apostrof. PHP, de faktisk har litt annen betydning. Men for nå, bare vet at det er den eneste grunnen. Konvensjonen i Javascript er ofte å bruke apostrof, men vi kunne bruke doble anførselstegn i begge steder også. 

Så dette er interessant. Husker sist gang at vi hadde som bilde på skjermen som trakk et tre hvor du hadde HTML-noden, og hodet node, og legemet node, og litt tekst. Men det var en spesiell node på Helt øverst på at jeg kalte dokumentet. Vel, det viser seg i Javascript, noe gang du skriver et program i Javascript i en nettleser, har du tilgang til en spesiell global variabel. Lignende i ånden til PHPs superglobals, dette kalles i små bokstaver dokument. 

Det er som en struct, men dette struct har også funksjoner inne for det. Så en C struct bare har data typisk. Men en Javascript-objekt som dette teknisk er også har funksjoner, ellers kjent som fremgangsmåter, på innsiden av den. Og du kan kalle en funksjon innsiden av dette objektet bokstavelig talt gjør sitt navn, prikk, og deretter navnet på funksjon, eller igjen metode. Det er bare et synonym, egentlig. 

Og hva gjør denne funksjonen gjør? Du kan slags gjette fra navnet. Få element av ID. Så dette kommer til å søke på nettsiden, søke det treet, på jakt etter uansett node, AKA element, har en unik ID sitat unquote navn. Og hva skal jeg gjøre? Jeg kommer til å få verdien på innsiden av at node i treet, og jeg kommer å liksom si hei til det navnet. 

Så ta en gjetning, selv om vi har ikke sett denne ennå, hva gjør pluss symbolene betyr her og her trolig? 

PUBLIKUM: Slå sammen. 

DAVID MALAN: Slå sammen. Høyre, og disse er bare slags utforme beslutninger folk gjorde år siden. I PHP, sette sammen du ting med prikker. I C, hoppe deg gjennom flere hoops og kaller funksjoner som strCopy () eller strcat () eller andre slike funksjoner. Men i Javascript, bruker du plusser. Så dette er bare lenke sammen tre strenger - hei, et navn, og deretter et utropstegn. 

Så når og hvorfor er denne funksjonen heter skjønt? Vel, ta en gjetning fra HTML nederst. Hvorfor er hilse () kalt, eller når? 

Angivelig, som best kan jeg fortelle, på sende, når dette skjemaet er sendt, Jeg kommer til å gjøre det som er innsiden av disse sitatene. Og spesielt, jeg kommer til å ringe hilse () og deretter returnere false. 

Vel, la oss se hva netto Effekten her er først. Så la meg gå videre og skriver i, sier Loren, Submit. Hei Loren. La oss se om kanskje dette var bare en heldig gjennomføring. Nope. Så det å skrive ut uansett nevne jeg faktisk satt der. 

Men legg merke til hva som ikke forandrer seg. Webadressen er fortsatt dom-0.html. Det er ingen register.php. Det er ingen andre filen. Det er ingen handling attributt. Så hva er denne avkastningen falsk antagelig gjør? Hvorfor kaller Jeg hilser () og deretter returnere falsk trolig? Hva vanligvis skjer når du klikker Send inn på et skjema at selv vi har sett i den siste uken? 

PUBLIKUM: [uhørbart]. 

DAVID MALAN: Det går et sted, ikke sant? Det går til noen URL destinasjon. Men jeg ønsker ikke at det skal skje her. Jeg vil ha min webside for å være helt dynamisk som Gmail, der når du er der, holde deg der. Nettadressen endrer ikke på en måte som indikerer hele siden er omlasting. Snarere, jeg bare ønsker å endre noe liker å skrive ut noe her på skjermen. 

Vel la meg rense dette opp en liten bit. La meg åpne opp ikke dom-0, men la meg åpne opp dom-2. Bare så du har sett noen syntaks her. 

Det viser seg at det vi bare gjorde bruker rå Javascript. Så dette er virkelig språket Javascript. Noen av dere kanskje vet om et bibliotek kalt jQuery. 

Så jQuery er ikke det samme ting som Javascript. Det er bare et bibliotek som en virkelig smart fyren skrev og popularisert slik at nesten alle i verden nå bruker jQuery ved bruk av Javascript. Og ved første øyekast ærlig, det ser litt mer kryptisk. Men du vil finne, særlig hvis du går der for det endelige prosjektet med web utvikling, vil du finne at dette renser ting opp og sparer deg ganske få linjer med kode. 

Så la oss bare se på hvordan denne formen fungerer. Legg merke til hva jeg fjerne tilsynelatende fra min HTML? Det er ingen på sende til behandleren så å si. Det er ingen attributt. Fordi du vet, hva Jeg gjorde egentlig ikke liker? Jeg følte at vi holdt på å falle i gamle vaner der. Akkurat som det var begynt å føle slurvete å blander både CSS med HTML, fordi du er slags kaste forskjellige språk over hele sted, på samme måte gjorde dette begynner å føle som en dårlig vei å gå ned der Jeg setter Javascript-kode på innsiden av min HTML snarere enn facto det ut. 

Så det er lærdommen her. I dom-2.html, jeg facto det ut. Og jeg gjør ting litt en annen måte. For nå, kommer jeg til å vifte med hendene på hva dette egentlig gjør under panseret. Men bare for nå antar at den første linje med kode i dette biblioteket kalt jQuery betyr bare når Dokumentet er klar, gjør følgende. 

Fordi websider kan ta litt tid å laste. Du kan være på et tregt internett tilkobling, og det kan bli spinning og spinne, og til slutt er det lastet. At linje med kode bare sier vente til hele siden er klar, dokumentet er klar, før du utfører denne koden. 

Og nå legger merke til, er dette trolig den mest nyttige først ta bort fra jQuery. Denne linjen her er veldig lik i ånden til dette mye lengre linje her. Mens det i rå Javascript-kode, det Det finnes en global objekt dokument som har en funksjon som heter getElementById (), folk som skrev jQuery forenklet som å bare si dollartegn, og deretter innsiden av parentes sette to sitater, og deretter sette en firkantsymbol etterfulgt av unik ID du ønsker å ta. Så dette tilsvarer document.getElementById. 

I mellomtiden. Sende betyr bare på innsending av hvilken form du er henviser til venstre, gå videre og gjennomføre dette. Men dette er nå nysgjerrighet også. Hva er rart om hva Jeg har fremhevet her? Ikke bare er det slags syntaktisk nytt, det er også noe som mangler. 

PUBLIKUM: Det er bare kalt funksjon? Det er ikke kalt varsling? 

DAVID MALAN: Yeah. Vel, så alert () er nede her, for å være rettferdig. Men det er ingen omtale av en navn, som du vet, foo eller noe opp her. Og ja, dette er en av de funksjonene av Javascript som er ganske kraftig, men også ganske ny. Og PHP faktisk har dette også. 

La meg gå videre og gjøre noe virkelig rask. La meg gå videre og sette dette ut her. La meg gjøre dette. Funksjon. La oss kalle denne behandleren (). En hundefører funksjon så å si. Noe som håndterer noen operasjon. La meg rydde opp min innrykk. Og sette dette her. Og sette det her. Jepp. OK. 

Så nå har jeg en funksjon som heter behandleren () at jeg egentlig ikke vet hva det gjør ennå. Den har bare fortsatt at ting. Whoops. Tok for mye. La oss gjøre dette. OK. Unnskyld. OK. La meg gjøre dette. OK. Som ser fin og rett fremover nå. La meg gjøre dette. Gjør dette. Og OK. Så nå, la oss sette dette over her. Ingen flere programmering på fly. OK. 

Så nå, la oss gå tilbake til der historien begynte. Tidligere sa jeg at denne linjen her betyr når dokumentet er ferdig, gå videre og gjøre dette. Hva ønsker jeg å gjøre? Vel spesifikt, ønsker jeg å gå videre og gjøre følgende. Utfør denne linjen med kode, og deretter hva jeg vil du skal gjøre er å ringe dette fungere når skjemaet er sendt. 

Nå er dette hva som er interessant. Dette er i seg selv ikke er en funksjon. Legg merke til at jeg ikke setter parentes her på vanlig måte. Jeg er bokstavelig talt passerer en funksjon som heter håndterer () til en annen funksjon kalt sende () som et argument som selv om det er som en variabel. Og dette er en av funksjonene i Javascript er funksjoner selv er egentlig bare objekter. Faktisk, de er egentlig bare variabler av noe slag. Og hvis navnet på funksjonen er behandleren (), er det ingen grunn til at jeg ikke kan passere den inn som et argument her. Og dette betyr da form med ID-demo er innlevert, kaller denne funksjonen. 

Men nå hvis jeg angre alt dette, hvorfor da gjorde jeg kanskje gjøre dette en stund siden? Vel, dette er en anonym funksjon. Fordi ærlig, skjønte jeg hvorfor jeg gidde å kaste bort tid på å erklære en Funksjonen kalles handler () bare å ringe det i ett og bare ett sted? Hvis jeg ikke trenger navnet, og jeg gjør ikke trenger å kalle det mer enn ett sted, la oss bare implementere funksjonen akkurat der jeg trenger det. Og så Javascript og PHP støtte det kalles anonyme funksjoner som tillate meg å gjøre akkurat det her. 

Men vi er bare toppen av isfjellet. La oss erte med bare et par endelige eksempler her. 

Hvis jeg går inn quote.php. Legg merke til at dette er faktisk en PHP funksjon, et PHP-program, som jeg skrev som forventer en HTTP-parameter som heter symbol, og jeg kan passere i en verdi som FB. Og hvis vi faktisk se på kilden kode, er dette spørring en gratis nettside heter Yahoo Finance, akkurat som p-sett sju, og det er tilbake til meg noe i tilsynelatende format kjent er JSON - Javascript Object Notation. Det er bare et objekt. Legg merke til de klammeparentes, sitater, tykktarmen, og komma. 

Nå i mellomtiden, er dette ganske kult. Fordi jeg kan sikkert bruke et programmerings språk å generere webadresser som ser ut som dette dynamisk, ikke sant? Jeg kan endre dette til Google og komme tilbake Googles aksjekursen på $ 1,017.55. Så la oss se om vi ikke kan bruke denne nå. 

La meg gå til ajax-0 her, som ser slik ut. Det er bare en nettside som har et skjema med en knapp. La meg her gå videre og skriver i YHOO for Yahoo-aksjen symbol, klikker du på Hent Quote, og nå merker jeg har fått et varsel med 32.86. 

La meg faktisk gå til en mer avansert versjon på denne siden, versjon to, og skriver i la oss si Microsoft, MSFT. Get Quote. Og nå legger merke til, ikke noe varsel. Legg merke til hvor det står pris skal fastsettes? Det er den enkleste av eksempler som hint på hva Gchat, og Facebook Chat og Gmail, og andre slike nettsteder gjør ved faktisk endre nettsiden. 

Legg merke til dette. La meg oppdater siden. La meg åpne opp Chrome Inspector. La meg gå til elementene tappen ned her. Nå merke hvis jeg zoomer inn her nede, og åpner dette opp, legge merke til at dette er min HTML DOM - min dokumentobjekt modell. Dette er min HTML. Men nå legger merke til, selv om det kommer å være litt vanskelig å se det i både steder på en gang, hvis jeg skriver i FB opp her, se nederst av skjermen bare. 

Det er faktisk skiftende min HTML på fly. Og det gjør dette ganske enkelt ved å gjøre noe som dette. Hvis jeg åpner opp ajax-2, varsel implementere noe så sexy som at selv om det er ganske stygg, men så avansert som det funksjonelt, har det noen HTML nederst. Men merker jeg pleide å tagge. Vi har ikke brukt dette før, men dette er som en, men det betyr ikke tvinge alt på en ny linje. Det gjør bare en rektangulær region på samme linje hovedsak. 

Legg merke til at jeg ga det en ID på pris. Og det viser seg ved å bruke samme Javascript-bibliotek, jeg har en funksjon kalt quote () som kalles når skjemaet er sendt. Og det jeg gjør er dette. Jeg erklære en variabel i Javascript kalt url, sparer verdi quote.php? symbol =. Med andre ord, jeg meg selv begynner å utarbeide en HTTP-forespørsel, og deretter Jeg concatenating på at med en pluss uansett elementet med ID av symbol er, som varsel er at tekstfeltet rett ned her. Så akkurat som vi hadde formene i det siste. 

Og så viser det seg i jQuery, hvis du ringe. val (), som kaller for en val funksjon, en verdi funksjon, blir den hva brukeren har skrevet i. Og så all nettverkstrafikk som skjer er dette. $. GetJSON. 

Og som en side, er dollartegn bare en kortform. Det er virkelig jQuery.getJSON. Få meg til JSON fra denne nettadressen, og når forespørselen kommer tilbake, kaller dette funksjon og pass på så det argumentet hva kom tilbake fra serveren. 

Så med andre ord, hvis jeg går tilbake til den leseren, og jeg går tilbake til quote.php, hva nettleseren min gjør er å få denne mengde data. Og når jeg går til denne nettsiden her, merke hvis vi i stedet gå til nettverket tab og klare det, og skriv deretter inn noe som GOOG for Google og Get Quote, merke siden ble ikke endret. Men en HTTP-forespørsel ble gjort, og hva kom tilbake hit hvis vi ser på respons er en hel haug med JSON at vi får tilgang til slutt med denne enkle linje her. 

Data er det som ble fått fra serveren. Prisen er navnet på Nøkkelen jeg bryr meg om. Så data.price gir meg det. 

Nå i mellomtiden, og denne er det siste eksempel. Du kan gjøre enda mer med den siden. En faktisk, vel to. Vi kan bringe tilbake tagge, hvis du husker dette. Det er Script. Vi kan gjøre det. Veldig spennende. Vi vil forlate det som en cliffhanger. 

Men mer spennende, kan du gjøre ting som dette. Hvis jeg går til geolocation-en, viser det seg at Chrome vet at vi er på lengde-/breiddegrad 42.37. -71,10. Så det er enda mer der til din disposisjon. Men mer om det i neste uke. Se deg mandag.