[Powered by Google Translate] [Uge 9] [David J. Malan - Harvard University] [Dette er CS50. - CS50.TV] Ok. Velkommen tilbage. Dette er CS50, og dette er begyndelsen af ​​uge 9. I dag har vi især fokusere på design, ikke længere i forbindelse med C men i forbindelse med PHP og lidt af SQL og lidt af JavaScript, især mod en ende af både Pset 7 og også dit afgangsprojekt. I virkeligheden, hvis du er på det punkt i din endelige projekt hvor formodentlig som af en time eller så siden du i det mindste begyndt at give nogle tanker til din endelige projekt, og du tænker du gerne vil samarbejde med 1 eller 2 klassekammerater, hvis du har problemer med at forbinde med de nævnte klassekammerater, velkommen til at udfylde formularen på cs50.net/partners/form. Det bare spørger dig, hvem du er, hvad slags projekt, du tænker på, hvor du bor bare af logistiske grunde. Og så hvis du ønsker at holde øje med i løbet af den næste uge eller så regnearket URL der, du kan derefter se en skrivebeskyttet version af Google doc hvor vi indsamle disse oplysninger. Så hvis du ønsker at arbejde med nogen, med alle midler velkommen til at nå ud til folk via denne mekanisme. Men flertallet af folk gøre arbejdet solo. Det er helt fint. Så du skal ikke føle, at dette på nogen måde er obligatorisk. På fredag ​​var det bare mig og et par af holdet herinde, tom teater for det meste. Der var 3 turister sidder deroppe, så det var en smule akavet. Hvad vi talte om var databaser og vi talte om Pset 7 en lille smule. Og hvis du ikke tilfældigvis til at fange det på video endnu, det er fint. Jeg vil prøve at definere eventuelle vilkår, som vi ellers ville tage for givet baseret på fredagens foredrag. 

Men i dag vil vi forsøge at få dig til det punkt, af ikke bare at være i stand til at gøre noget lignende Pset 7 men virkelig at forstå, hvad der foregår under kølerhjelmen, især nogle af de abstraktioner, som vi kommer på plads i functions.php filen til at gøre jeres liv en smule nemmere, men så du i sidste ende forstå så når støttehjul kommer ud i et par uger, kan du stadig overleve i den virkelige verden og gøre det her uden nogen CS50 rammer under dig. Denne $ _SESSION, for dem af jer der kender eller som allerede fanget den video på fredag, hvad SESSION lad os gøre i et PHP-baseret web-applikation? Dette er en superglobal variabel, hvilket betyder, at det er samme ånd at GET og POST og et par andre, men hvad er det her nyttigt for? 

Hvad er SESSION til? Yeah. [Studerende] Logger ind Undskyld? [Studerende] Logger ind Logger ind Indeed. I Pset 7 vi bruger denne SESSION superglobal at lette logge ind Og hvad er rart om denne superglobal er, at det er et associativt array. Et associativt array, husker, er blot et array, men hvis indekser ikke længere behøver at være tal ligesom 012. De kan være tal eller de kan være selv strenge. Og så hvis du har dykket ned Pset 7 endnu, kan du huske, at vi opbevarer en nøgle kaldet ID indersiden af ​​dette associative array, hvis værdi er noget i retning af 123 - uanset den aktuelt indloggede bruger id er. Motivationen til dette er, at selv efter at brugeren har besøgt localhost eller min hjemmeside mere generelt og derefter de har logget ind, selv om de ikke klikke på et link eller vende tilbage til min hjemmeside i 5 minutter eller endda en time eller endda en dag, men de forlader deres browser vinduet åbent, via denne superglobal kan jeg huske, at de er logget ind 

Med andre ord giver det mig at gemme lidt længere sigt hvad jeg vil om en bruger. Og du kan tænke på det virkelig som inkarnationen af ​​en indkøbsvogn. Steder som Amazon naturligvis lade dig sætte tingene i en indkøbsvogn, men HTTP, protokollen, der driver nettet, er statsløs i den forstand, at når du besøger en hjemmeside, for det meste, du ikke har nogle konstant netværksforbindelse mellem din browser og serveren. Så snart du har downloadet HTML og JPEG og GIF og alt det, forbindelsen går væk og du bare har en kopi af HTML og whatnot fra serveren. Men hvis serveren ønsker at huske noget om dig, byrden er på serveren til rent faktisk at registrere disse oplysninger. Og så du den programmør, der har kontrol over serveren kan sætte de fleste noget, du ønsker inde i denne superglobal associative array og det vil være der næste gang brugeren kommer tilbage, uanset om det er minutter eller endda dage senere, medmindre de lukker deres browser vindue, på hvilket tidspunkt SESSION forsvinder. Så det er flygtig lagring, det er ikke-vedvarende, og det er meningen at gå væk så snart brugeren lukker deres browser - ikke bare, at fanen, ofte hele browseren, derved effektivt at logge brugeren ud. Så hvordan er denne ting faktisk gennemføres? Lad os tage et hurtigt kig på et simpelt eksempel så vi på fredag. For dem bekendt, var det så simpelt som dette. Dette er en webside, hvis eneste formål i livet er at fortælle mig hvor mange gange jeg har besøgt denne side. Det er første gang her i mandags, at jeg besøgte det, så det siger 0 gange. 

Men hvis jeg begynder at genindlæse denne side, det siger 1 gang, 2, 3, 4, 5, og det vil i sidste ende bare holde på at tælle op, op, op, op, op for hver gang jeg faktisk Klik på genindlæs på det. Så hvordan er dette arbejde? Lad mig gå inde i denne fil kaldet counter.php. Den øverste del af det er alle blå kommentarer, men den interessante del er her. På linje 13 kalder vi denne funktion session_start, og det er bogstaveligt talt alt hvad du behøver at gøre, hvis du ønsker at have adgang til denne særlige superglobal kaldet $ _SESSION. Det gør det hele muligt, og vi vil se om et øjeblik, hvordan det er alt muligt. I linie 16 varsel hvad jeg gør. Hvis nøglen, kaldet counter - med andre ord indeksværdien - "tæller" eksisterer inde i dette array kaldet SESSION, så hvad gør jeg med det i linjen nedenfor? Hvad er linie 18 laver? 

[Uhørlig student svar] Hvad er det? [Studerende] Lagring værdien. Godt. Det er lagring af værdi, der er i SESSION lige nu i en ny lokal midlertidig variabel, $ Tæller i alle små bogstaver. Bemærk, at PHP allerede er ved at blive lidt doven her. Bemærk vi har ikke nogen omtale af int eller float eller snor eller noget i den retning fordi PHP svagt er skrevet, hvor du ikke behøver at angive, hvilken type af en variabel, og i dette tilfælde her har jeg ikke engang erklærede det endnu. Jeg erklærer det indersiden af ​​disse krøllede parenteser og i modsætning til C, er det faktisk okay. Ligegyldigt hvor dybt indlejret en variabel erklæring er i PHP - indersiden af ​​klammeparentes, inde i klammeparentes og lignende - Det vil på dette tidspunkt eksisterer for resten af ​​programmet, for bedre eller værre. Så det bliver straks global, så snart du definere det som vi laver her. 

Ellers, hvis jeg ikke finder, at der er noget i SESSION superglobal, Jeg er åbenbart initialiserer denne variabel tæller til 0, derved blot antager, at brugeren har aldrig været her før. Og så dette naturligvis er inkrementere tælleren hvordan? Jeg opdatere den værdi, der er inde i denne associative array ved at sætte det lig med, hvad tæller i øjeblikket er + 1. Hvis jeg rulle ned her til HTML på siden, det er faktisk ret simpelt. Alt, hvad jeg har i kroppen på denne side er: "Du har besøgt denne hjemmeside, så-og-så gange." Og det er en PHP konstruktion. Hvis du gør <? =, Svarer det faktisk til, hvad funktion? Det er virkelig svarer til noget i retning af printf, som vi har set mange gange i C, selvom som du måske allerede kender fra spec i Pset 7, print er også en funktion, der bare udskriver noget ud, betyder det faktisk ikke bruge format koder, og du kan faktisk sige ekko så godt. De er alle nogensinde så lidt anderledes, selvom nettoeffekten er i sidste ende det samme. Så denne brug af lighedstegnet er lige slags en elegant måde at gøre det mere kortfattet end du ellers ville være i stand til. Så det er alt dette site gør. Det udskriver værdien af ​​tælleren. Hvordan alt dette faktisk sker? Du husker måske en uges tid siden vi begyndte at kigge under kølerhjelmen på, hvordan en webside fungerer ved hjælp af denne Inspector fane. 

Chrome har denne både i Mac-version, Windows-versionen, og selv Linux version, og Firefox og IE har lignende mekanismer, hvorved du har denne indbyggede debugger indersiden af ​​browseren. Lad os tage et kig på følgende. Vi har en hel bunke af faner her, og minde om, at den længst til venstre er Elements, og uanset hvor godawful HTML og JavaScript er i en side, minde om, at med den Elements fanebladet kan du faktisk navigere HTML hierarkisk og nice og pænt. Så hvis du forsøger at lære fra en hjemmeside som Google eller Facebook eller virkelig ethvert websted, indse, at du sandsynligvis bedre stillet ser på kildekoden på denne måde i modsætning til at se den rå kilde, som kan være en rod, som vi har set specielt på Googles hjemmeside. Så hvis jeg i stedet klikke på fanen Netværk her, lad os se hvad der sker, når jeg besøger denne side. Først lad mig rydde cachen. Jeg har tænkt mig at gå ind i Indstillinger i Chrome og derefter gå til History og derefter Ryd alle browserdata. Du kan blive brugt til at gøre dette til andre formål, [latter] men når det kommer til at udvikle hjemmesider, det er faktisk nyttigt - hvis du griner du kender. [Latter] Det er faktisk rigtig nyttig, når de udvikler hjemmesider, fordi virkeligheden er ting som cookies og ting som cachelagrede HTML-filer, cachelagrede JavaScript-filer kan faktisk blive en stor hovedpine, fordi hvis en eller anden grund browseren beslutter at cache nogle fil og endnu du har foretaget ændringer i denne fil på serveren men browseren har ikke rigtig indset, at denne fil er ændret og derfor ikke reelt downloade den igen, selv når du klikker på knappen Genindlæs, en af ​​de mest surefire måder at bare sørg fejlen er ikke med din kode, Det er med opførslen af ​​browseren, er at gå i her i din browser og bare rydde hele historie, så der er ingen forvirring. 

Og så hvis du virkelig ønsker at være paranoid, lukke browseren, skal du genstarte den, og derefter sørge for alt fungerer som forventet. Så kort sagt, er clearing cache god, når du laver udvikling. Så her har vi fanen Netværk. Jeg havde tidligere besøgt webstedet 9 gange, men lad mig gå videre nu, og klik Reload. Og jeg er tilbage ned til 0. Lad os faktisk se, hvordan det er, at denne session superglobal bliver gennemført. Jeg har tænkt mig at klikke på 1 HTTP-anmodning, der blev gjort, og denne debugging vindue lader mig se ind i det. Her ser jeg bare svar fra serveren, hvilket ikke er interessant. Jeg har set det i en række forskellige måder. Men hvad er teknisk interessant, er overskrifterne. Hvis jeg rulle ned her og fokusere på de overskrifter i anmodninger og klik på Vis kilde, hvad jeg har tænkt mig at se er bogstaveligt talt den HTTP-anmodning der bare gik fra min browser til serveren, GET være den udløsende ord og derefter / counter.php er filnavnet, HTTP/1.1 bare at være den version af HTTP, at min browser bruger. Denne linje her er der en lille påmindelse fra browser til server, hvad navnet på serveren er at det ønsker at tale med. Og derefter resten af ​​dette er til tider interessant, men ikke relevant lige nu. 

Dette er blot lidt af en nysgerrighed. Cryptic selvom denne streng er, når som helst din browser besøger et websted det er at informere serveren hvilken browser du bruger og hvilket operativsystem du bruger, og hvilken version deraf. Så hvis du nogensinde har spekuleret over, hvordan websites som CNN og whatnot vide, hvad de procenter er af Mac-brugere på nettet, pc-brugere, IE-brugere, Chrome-brugere og lignende, er det fordi alle vores browsere fortæller hver enkelt hjemmeside derude, hvad vi er. Det behøver ikke nødvendigvis indeholde personligt identificerbare oplysninger, men det gør fortælle serveren, hvad din IP-adresse er, og hvad browser og operativsystem du bruger. Så det er, hvor disse oplysninger er. Men hvad er mere interessant nu, når det kommer til disse møder er svaret header. Lad mig klikke på Vis kilde ved siden af ​​svar. Hvad er interessant her er et par ting. 1, vi fik tilbage en status kode 200. Vi ser aldrig denne status kode, fordi det betyder, alt er godt. Det betyder bogstaveligt okay i modsætning til noget andet. Hvad er et tal, vi sommetider se det er skidt? [Studerende] 404. 404, filen blev ikke fundet, kan 403 du humpe allerede, som er forbudt, hvilket betyder, at du har glemt at chmod noget, mest sandsynlige. Og der er en masse andre. 

Hernede, dette er en lidt skør. Jeg virkelig bare skrev denne fil for få minutter siden ved at indsætte det i gedit. Hvorfor denne side udløbe i 1981, før der virkelig var en Web? Hvad sker der? 

[Uhørlig student svar] The tidsstempel. Men hvorfor? Det er noget vilkårlig, men det er faktisk nyttigt. Hvad dette siger til min browser er denne PHP fil, du lige har anmodet om, er allerede udløbet. Faktisk udløbet det for 30 år siden. Men hvad betyder det egentlig? Det betyder bare, at det næste gang brugeren besøger denne side, enten ved at genindlæse eller skrive URL i adresselinjen, Sørg for du gå og hente en ny kopi af det. Det er en slags et eksempel på cache sprænge, en dum ord, der betyder bare forsøger at afskrække browsere fra faktisk caching HTML, der er blevet sendt fra en server så du ikke ved et uheld ramte reload og derefter se den samme version af filen. Du faktisk ønsker, at serveren til at sende en ny kopi. Så det faktum, at det er 1981 betyder blot, at det er, hvad apparatet er at vælge som en vilkårlig dato i fortiden. Men den virkelige saftigt linje er nu denne ene. Allerede inden 50 er du sikkert vagt bekendt med cookies. Som for lige nu, især blandt de mindre behagelige eller i mellem, hvad er en cookie i din forståelse lige nu selv om vi er ved at gøre din forståelse mere teknisk? Hvad er en cookie? Yeah. [Studerende] Information om brugeren, ligesom hvis de har skrevet deres brugernavn eller noget. 

Godt. Det er disse oplysninger om brugeren, uanset om de har indtastet i deres brugernavn allerede. Cookies er en måde, hvorved servere kan huske noget om en bruger. Og hvad en cookie er virkelig er en tekstfil eller en sekvens af bytes der er plantet af serveren indersiden af ​​din browser, og inde i denne fil eller blandt de bytes er en slags identifikator. Måske er det bogstaveligt talt dit brugernavn, men oftere er det noget mere kryptiske udseende som denne ting her - bo8dal3ct og så videre - dette virkelig store alfanumerisk streng der er virkelig bare ment som et entydigt id for dig. Eller du kan tænke på det som en slags virtuel hånd stempel. Hvis du går til nogle klub eller en forlystelsespark, at huske, at du rent faktisk har betalt og gået i, de sætter en lille rød mærkat på din hånd af en slags, og det minder folk på tælleren, du allerede har betalt og du kan komme og gå som du venligst. Cookies er en lille ligner i ånden til det. Første gang jeg besøgte denne hjemmeside, som jeg gjorde lige når du har ryddet min cache, webserveren, apparatet i dette tilfælde sætte et stempel på min hånd hvis navn er PHPSESSID, session-id, hvis værdi er dette virkelig lang alfanumerisk streng. 

Så det er nu slags emblazoned på min hånd, så næste gang jeg ramte genindlæse eller manuelt besøge denne URL i en browser, min browser ved definition af HTTP vil præsentere hånd stempel igen og igen og igen. Så selvom serveren ikke nødvendigvis ved, hvem jeg er, de i det mindste vide, at jeg er den samme bruger eller i det mindste mere specifikt den samme browser. Og så dette er i sidste ende, hvordan SESSION superglobal gennemføres. Serveren har ingen idé om, hvem du er, når du besøger en hjemmeside for anden eller tredje gang medmindre du præsenterer denne hånd stempel. Og så snart du præsenterer denne hånd stempel, webserveren det væsentlige går ind i en lille database for sig og checks, okay, jeg har lige set hånd stempel brugerens bo8dal3ct og så videre. Lad mig se, hvilke oplysninger programmøren har gemt indersiden af ​​superglobal om denne bruger, og så lad mig sørge for, at disse data er igen inde i SESSION superglobal således at programmøren kan re-adgang til disse data selv om det blev sat nogle minutter eller timer siden. Så med andre ord, cookies, som fik en dårlig rap i nogen tid på grund af usikkerhed i browsere og de kan virkelig overtræder vores privatliv og alt dette, de faktisk har stor nytte, fordi uden dem De ville hele tiden være at logge ind på hver Facebook-side, du besøger eller hver Gmail e-mail, du læser hvis browseren ikke havde nogen måde at huske som du allerede har godkendt. 

Så på denne måde cookies sendes frem og tilbage over tråden. En anden nysgerrighed om cookies, især her, er, at dette er helt i klartekst. Der er ingen kryptering foregår her overhovedet, og faktisk jeg bruger HTTP i øjeblikket. En af vores favoritter øjeblikke i CS50, som nu er 2 år siden, blev omkring det tidspunkt et værktøj kaldet Firesheep kom ud. Dette var en gratis stykke software, der blev foretaget af en sikkerhedsekspert som et wake-up call for samfundet at sige, hvor afskyeligt implementeret visse autentificeringsmekanismer på internettet var. Så for et stykke tid, var Facebook næsten udelukkende via HTTP, ingen HTTPS. Og selv hvis du har ingen idé om, hvordan den krypto virker, S er sikker så det betyder, at der er i det mindste nogle kryptering involveret. Facebook har brugt til at kryptere brugernavne og adgangskoder, men så snart du kigget på din stikker eller dine beskeder eller din news feed, alt dette er ukrypteret. Så var Gmail indtil bare et år eller 2 siden. Hver gang du loggede på, ja, de brugte sikker kryptering, men derefter gjorde de ikke. Og hvorfor er det? Hvorfor ikke bare bruge kryptografi hele tiden i use cases som denne? Hvad er det? Jeg tror, ​​jeg har hørt noget. [Studerende] Speed. Hastighed, right? Der er måder omkring dette. Men hvis du bare slags tænker over det logisk, hvis du krypterer noget, du er nødt til at gøre mindst en lidt mere arbejde. I Pset 2, når du implementeret Cæsar eller Vigenere eller endda Knæk, bare udskriver en streng er forholdsvis let. Kryptering og derefter udskrive en streng minimalt kræver lidt mere arbejde. 

 For super populære hjemmesider som Google og Facebook, hvis du er nødt til at gøre mere arbejde for hver bruger for hver enkelt webside, de besøger, der bare tager mere CPU-tid. Og hvis du har brug for mere CPU-tid, skal du måske flere servere, hvilket betyder, at du måske brug for flere penge. Og så i mange år dette bare virkelig var ikke den bedste praksis. Folk ville bruge SSL-kryptering, når de havde brug for. Men det viste sig, og da denne fyr med Firesheep gjorde super klar, når du fyre, der er i øjeblikket på Facebook lige nu - Ud af nysgerrighed, lad os se om du vil Fess op. Hvis du er på Facebook lige nu i nogle fane, selvom det ikke er i forgrunden, er din URL HTTP eller HTTPS? [Flere studerende] S. S? [Latter] Okay. Enhver HTTP? Bare 1? Okay. Så vi alle kan hacke den fyrs Facebook-konto lige nu. For det meste er dette blevet slået til som standard, i det mindste i nogle hjemmesider. Og lang historie kort, hvis din webtrafik ikke er krypteret, ikke alene HTML gå frem og tilbage over de WiFis ukrypterede, så du skal ting som cookies gå frem og tilbage i hele luften uden nogen form for kryptering. Så hvis du har bare en smule af programmeringen kyndige eller en smule Googling færdigheder at finde gratis software, der gør dette, er alt du skal gøre sidde i Starbucks eller sidde i en lufthavn, hvor der er generelt ukrypteret WiFi og bare holde øje med søgeord som Set-Cookie: eller PHPSESSID fordi hvis du har den tekniske kyndige bare for at se den WiFi for alle de bits, der flyder igennem luften for dette mønster, du kan da sige, at fyrens PHPSESSID sker for at være bo8dal og så videre. Og så igen, hvis du er tilstrækkeligt teknisk kyndige eller har det rigtige værktøj, du kan derefter bare omkonfigurere din egen browser for at begynde at fremsætte denne hånd stempel til Facebook.com, og Facebook er lige til at antage, at du er den fyr fordi alle de ved ikke er, hvem du er, men at du har denne unikke identifikator. Så hvis du stjæler den unikke identifikator og præsentere det til webserveren som din egen, de er lige til at vise dig denne persons news feed eller denne persons beskeder eller pokes. 

Og jeg vil Google nu, hvordan du aktiverer HTTPS for Facebook måske. Men det er virkelig så simpelt er det. Og så Facebook og Google og lignende har fået rigtig god til dette, men hold øje desto mere for eventuelle websteder, du besøger, der ikke bruger HTTP og har en form for følsomme oplysninger om dem, uanset om det er økonomisk eller personlig eller lignende. Hvis de ikke bruger dette, kan muligvis cookies som dette være meget nemt stjålet og derefter forfalsket, og det er præcis, hvad Firesheep gjorde. Du behøvede ikke at være programmør. Alt du havde at gøre, var har en internetforbindelse, skal du hente det gratis værktøj, og hvad det ville gøre, er at du logger ind og så ville det vise dig de Facebook-navne af alle i Sanders, i dette særlige demonstration, omkring dig og alt hvad du havde at gøre var at klikke på deres navn og den software, automatiseret proces af sniffing denne cookie, forelægger det for Facebook som din egen, og voila, du er logget ind Så dette er en anden af ​​dem "ikke gøre det" officielt. Hvis du har dit eget hjemmenetværk, og du ønsker at pille, med alle midler, men indse dette gør passere linjen på et universitet miljø. 

Men målet her er virkelig at understrege ikke hvordan du gør dette men hvordan man forsvare sig mod den slags ting. Og den trivielle løsning her, selvom det i sig selv er fejlbehæftet, er virkelig reducere brugen af ​​alle websteder, der ikke bruger HTTPS konstant. Så sites som Facebook og Google i stigende grad har afkrydsningsfelter hvor man kan tilvælge denne slags ting, og bankerne har haft dette i årevis af lignende grunde. Så bare en lille smule af en frygt faktor, hvis vi kan. Men det er det i en nøddeskal. Det er sådan en server husker hvem du er. Og så snart de kan huske hvem du er, kan de huske noget om dig at programmøren har gemt inde i denne særlige superglobal kaldet $ _SESSION. Og for Pset 7 vi bruger det trivielt bare at huske en int, nemlig den unikke ID for den bruger, der er logget ind, så vi ved, at de har været der før. Eventuelle spørgsmål derefter på sessioner eller cookies eller lignende? Firesheep virker ikke så godt mere, og du er nødt til at sætte din computer i en speciel flane mode så du faktisk lytter til trafik end dig selv. Så hvis du i øjeblikket er ved at hente Firesheep, indser det er ikke helt så let som det engang var at demonstrere. Ok. Og gør det ikke i Sanders. Gør det derhjemme. Databaser. En af de ting, vi gjorde i Pset 7 meget bevidst blev vi giver dig en eksempeldatabase tabel for brugere, der har nogle bruger-id'er, nogle brugernavne, og nogle krypterede passwords deri. Og som du kan se, hvis du ikke allerede har, er du nødt til at ændre bordets en lille smule. Du er nødt til at tilføje nogle cache til hver af brugerne i denne tabel, og du bliver nødt til at tilføje en anden historie bord, en porteføljer bord, eller måske kalde det noget andet. Men i forhold til at tænke over, hvordan du gør dette, lad os åbne dette værktøj som vi brugte på fredag, men hvis uvant, apparatet kommer med et værktøj kaldet phpMyAdmin der tilfældigvis skrevet i PHP, men dens formål i livet, efter jeg logger ind her som jharvard med purpur, er at give mig en brugervenlig måde at se og ændre min database. 

Databasen som jeg kører på apparatet hedder MySQL. Dette er meget populært, og det er et gratis open source-database, der er dejligt nemt at bruge, især med frontends som denne. Hvad dette værktøj tillader mig at gøre, for eksempel, er poke omkring borde. Lad mig gå videre og gøre det. På fredag ​​har vi oprettet en tabel kaldet studerende, der var super simpelt. Det havde 3 kolonner - ID, navn og e-mail - og jeg manuelt indsat et par rækker ligesom David og Mike i dette særlige eksempel. Lad os tage dette lidt videre, og lad os antage, at vi ønsker at huske mere end blot navn og e-mail om en bruger. Lad mig klik Struktur heroppe på toppen. Og igen, det Pset fører dig gennem de nødvendige skridt her, så du skal ikke bekymre dig, hvis nogle af disse er lidt hurtig. Så jeg har tænkt mig at klikke på her. Jeg har tænkt mig at tilføje nogle flere kolonner efter e-mail fordi jeg ønsker at tilføje noget lignende hus. Jeg glemte at optage en elev hus. Lad mig klikker på Start, og nu har vi denne form, som desværre er lidt bred fra venstre mod højre, men jeg har tænkt mig at kalde navnet på dette felt hus, og derefter den type jeg nu nødt til at vælge. Så lad os få en kort snak om de forskellige typer i MySQL fordi hvorimod PHP svagt der skrives, og den slags spiller kispus med typer, i en database især det er super vigtigt at rent faktisk at bruge skrive til din fordel fordi en af ​​de ting, MySQL og andre database motorer kan gøre for dig er at sikre, at du ikke sætter falske data ind i din database. Det er en slags gratis fejlkontrol til rådighed for dig. 

For hus vi naturligvis ikke ønsker at være en int, som er en 32-bit værdi i MySQL. Vi gjorde tale kort på fredag ​​om varchar, som står for variabel længde char. Hvad er det? Dette giver dig mulighed for at angive, at du ønsker, at dette skal være en streng af en slags. Du behøver ikke virkelig vide på forhånd, hvor lang tid det er, så vi vilkårligt sige et hus navn kan være 255 tegn, men du kunne gå med 32, 64 - helst antal virkelig. Men fordelen ved at anvende en varchar over et område kaldet char er hvad? Bare intuitivt hvis jeg rulle ned her, bemærker, at der er char, og der er varchar. Varchar er variabel længde char, char er en fast længde char. Så kun er baseret på denne definition, hvad er fordel eller ulempe af hver af disse? Med andre ord, hvem bekymrer sig om den sondring, eller hvorfor skulle du pleje? 

Yeah. [Studerende] Varchar har mere fleksibilitet, men fylder meget i hukommelsen. Godt. Varchar fylder mere - Lad os se. Jeg er ikke sikker på, om jeg hørte denne ret. Kan du sige det igen? [Studerende] Jeg sagde varchar sandsynligvis har mere fleksibilitet, men det fylder meget i hukommelsen. Interessant. Okay. Varchar sandsynligvis giver dig mere fleksibilitet, men fylder meget i hukommelsen. Sidstnævnte er ikke nødvendigvis sandt. Det afhænger af konteksten, men lad os komme tilbage til det. 

[Uhørlig student svar] Præcis. Det er faktisk sådan, at char typisk vil bruge mere hukommelse fordi en char, som i C, er som en streng, det er en vifte af tegn. Så hvis du siger en char felt af længde 255, databasen er bogstaveligt talt vil give dig 255 karakterer. Og hvis huset ender med at blive Mather og 6 tegn i alt, du spilder mere end 200 tegn. 

Så en varchar effektivt kun bruger så mange tegn som det er nødvendigt op til et maksimalt beløb. Men den pris, du betaler, er faktisk performance, potentielt. Hvis du på forhånd ved, at alle dine strenge vil være 8 tegn - for eksempel antage, at du har brug for passwords af længde 8 - opadrettede for at bruge en char felt på lejlighed, men ikke ofte, er at specificere en fast længde for noget som en adgangskode fordi nu databasen kan være endnu smartere. Hvis den ved, at hver char felt, hver streng i en søjle har samme længde, du får tilbage funktionen af ​​random access. Du kan springe rundt mellem de forskellige char felter i din database tabel fordi tænke på en database, som rækker og søjler. Så hvis hver af strengene har samme længde, du ved, at den første er i byte 0, det næste er ved byte 8 og derefter 16 og derefter 24 og så videre. Så hvis alle strengene er af samme længde, kan du springe rundt langt mere effektivt. Så det kan være en fordel i form af funktionsdygtighed, men typisk du ikke har den luksus at vide på forhånd, så en varchar er vejen at gå. Her er en anden detalje, at selv Facebook løb ind i sidste ende. Ints er stor, og vi slags bruger dem som standard helst vi ønsker et nummer, men det er kun 32 bit. 

Og selv om Facebook ikke helt har 4 milliarder brugere nu, Der er helt sikkert nogle mennesker derude med flere konti eller konti, der er blevet åbnet og lukket, og så Facebook selv jeg tror et par år siden havde overgang fra int til, som er rammende kaldes, bigint, som ligger kun 64 bits i stedet. Så dette er også et design beslutning. Du ville være utrolig heldig, hvis din endelige projekt bliver opstart, har 4 mia.kr., og 1 brugere, give eller tage, i hvilket tilfælde bruger int'er kan være lidt kortsigtet. Men i virkeligheden er dine brugere tabellen sandsynligvis fint med int'er. Men for noget som Pset 7, ligesom din historie bord du har måske tusinder, millioner af brugere, hvis du udvikle sig til etrade.com. Så mens du måske ikke har mere end 4 milliarder brugere, disse brugere du har måske mere end 4 milliarder transaktioner over tid - køber og sælger, og ting i deres historie. Så hvis du forventer - igen, disse er gode problemer at have, hvis du har så mange data - hvis du forventer data der er større end en int, gå med noget som bigint er en retning, der ikke ofte nok vedtaget af designere fordi folk tal, der kommer ikke til at være et problem, men det er så nemt at vælge noget større end det. Decimal vi bruger i Pset 7, som specificerer fast præcision så du kan undgå de problemer, der involverer flåd og doubler og Reals og lignende. 

Og så er der nogle andre områder her. Vi vil bølge vores hænder på dem i nogen grad. Men datoer, tidspunkter har alle et foreskrevet format i MySQL, og fordelen ved lagring datoer som datoer og ikke varchars betyder, at databasen faktisk kan omformatere dem i forskellige formater, hvorvidt en amerikansk format eller europæisk format eller lignende - men du vil have det - langt mere effektivt, end hvis det var blot nogle generiske varchar. Og så er der nogle andre binær, varbinary, klatter. Disse er binære store genstande, og du kan også gemme binære data såvel som geometriske data i en database. Men for os vil vi typisk bekymre sig om int'er og varchars og lignende. Lad os slutte op dette eksempel med hus. Hus vil jeg vilkårligt sige vil være 255 tegn. Så standardværdi vi kunne gøre dette. Vi kunne som standard sætte alle i Mather House, for eksempel. Det er, hvordan vi kunne præcisere, at databasen bør sikre, at en person altid har en værdi. Men jeg vil overlade det være. I virkeligheden, for folk, der bor uden for campus og ikke i et hus måske jeg rent faktisk ønsker at præcisere, at standardværdien for huset er NULL, og så jeg har brug for at markere dette felt og fortælle den database, det er okay, hvis brugerens hus er NULL. 

Igen, det er en anden forsvarsmekanisme du kan sætte på plads så du behøver ikke engang at sætte det i din PHP-kode nødvendigvis. Databasen vil sikre, at tingene er eller ikke er NULL. Og så endelig Attributter. Ingen af ​​disse er meget relevant. Binary, usigneret - ingen af ​​dem er relevante for en varchar. Index. Er der nogen kender eller huske eller har et gæt på, hvad et indeks er for noget som hus? Også dette er faktisk en vigtig og relativt let design beslutning. For dem, der endnu ikke har set det, vi på fredag ​​talte kort om primære nøgler. I en database tabel, er en primær nøgle feltet eller kolonne der entydigt identificerer rækker i tabellen. Så i den aktuelle tabel vi har id'er, har vi navne og e-mails. Hvilken af ​​disse er den bedste kandidat til at være en primær nøgle, hvis rolle er at entydigt at identificere rækker? Sandsynligvis ID. Velsagtens, kunne vi også bruge det selv? Måske du kunne bruge e-mail, fordi der i teorien er det unikt medmindre folk deler e-mail konti. Men virkeligheden er, at hvis du bruger en numerisk ID ligesom 1234, det er kun 32 bit, mens en e-mail-adresse kan være så mange byte eller så mange bytes. Så med hensyn til effektivitet for entydige identifikatorer, det plejer at være god praksis blot at bruge en int selvom du har nogle streng kandidat, som du velsagtens kunne bruge. 

For noget lignende hus, bør dette ikke være en primær nøgle fordi så kun 1 person kunne leve i Mather og 1 person i Currier og lignende. Ligeledes bør det ikke være unik. Forskellen mellem primære og unikke er, at i tilfælde af vores nuværende tabel, ID ville være primær, men e-mail er ikke primært af den grund, vi lige har nævnt - ydeevne - men det bør stadig være unik. Så du kan stadig håndhæve unikke uden at gøre krav at det er en super vigtig primære felt. Men dette er ganske nyttigt: Index. Hvis du kender på forhånd for din endelige projekt, for Pset 7 eller i almindelighed, at dette felt hus vil være noget du søge på en masse ved hjælp af select søgeord eller noget andet, så kan du preemptively fortælle databasen til at arbejde sin magi og sørg for, at det skaber i hukommelsen nogen dekorativ datastrukturer nødvendige at fremskynde søgninger baseret på huset. Måske det vil bruge en hash tabel, måske den vil bruge en sammenkædet liste. I virkeligheden tendens til at anvende et træ, ofte en struktur, der kaldes en B-træ - ikke et binært træ, men en B-træ - hvilket er et meget bredt træ at du kan se i en klasse som CS124, de data strukturer klasse. Men kort sagt, behøver du ikke at bekymre dig om at når du bruger intelligent database-software. Du kan bare sige det, "Indeks dette område, så jeg kan søge på det mere effektivt." 

Hvis du forlader denne slukket, og du forsøger at søge efter alle i databasen, der bor i Mather, det vil udvikle sig til lineær søgning. Og hvis du har 6.000 undergrads alle lever i nogle hus, du kommer til at søge i hele tabellen for at finde de Matherites, hvorimod hvis du siger Index, forhåbentlig vil det være noget nær en logaritmisk søgning at finde den slags studerende. Dette er blot en gratis funktion til at tænde, selv om det kommer til en pris af en vis mængde af plads. Endelig auto-tilvækst, dette AI felt, hvilket blot betyder, at hvis det er en int, og du ikke ønsker at pleje at forøge det selv hver gang der er en ny bruger, skal du kontrollere, at og hver bruger, der bliver indsat vil automatisk få en ny ID. Lad os klikke på Gem og lad os nu finde fejl med dette design. Hvis jeg går ind i Gennemse, meddelelse om, at både Mike og mit hus er NULL. Jeg kan bruge phpMyAdmin til at redigere det manuelt. Jeg kan gå ind her og skriv Mather og derefter trykke på Enter, og nu bemærke tabellen er anderledes. Men bemærk jeg kunne gøre noget andet også. Davids id er 1, så phpMyAdmin igen er bare et administrativt værktøj; dette er ikke noget dine brugere nogensinde kommer til at se. Så hvis jeg i stedet klikke på SQL fanen up top - og igen, vil Pset 7 introducere dig til flere af disse spørgsmål - Jeg kan manuelt udføre SQL Structured Query Language kommando UPDATE brugere SET hus = 'Pfoho' WHERE id = 1. Disse SQL-forespørgsler er pænt nok, temmelig læses fra venstre mod højre. Opdater brugere tabellen, skal du indstille feltet kaldet hus til Pfoho hvor brugerens ID er 1. Eller jeg kunne endda gøre, hvor email = 'malan@harvard.edu «. Så længe, ​​der entydigt identificerer mig, ville der fungerer så godt. Men ID tendens til at være højere ydelse, så lad os gøre det. Lad os klikke på Gå. Okay, er lecture.users ikke eksisterer. Hvad er min fejl? Hvad er tabellen faktisk kaldt her? Det hedder studerende, bare fordi det er, hvad vi gjorde op her øverst til venstre. Det hedder studerende, ikke brugerne. Så klik på Gå nu. 1 række berørt. Query tog 0,01 sekunder. Hvis jeg klikker på Gennemse nu, nu Malan liv i Pfoho. Så det er en anden smag af SQL, men det Pset vil lede dig gennem en smule mere af det. 

Der er en dum beslutning, jeg har allerede lavet her. Jeg vil hævde, at denne database design er ineffektiv fordi jo flere mennesker jeg føjer til studerende bordet, jo flere af os jeg begynde at tilføje, at flere af de TF'er jeg begynde at tilføje, vil vi begynde at se, hvad afskedigelser i denne tabel? 

Yeah. [Studerende] Se, at det er i de studerende, bruger vi den samme [uhørlig] Det samme - Højre, præcis. Så hvis 400 mennesker bor i Mather, give eller tage, i sidste ende denne tabel vil have 400 rækker, der siger "Mather", "Mather," "Mather", "Mather", "Mather." Vi spilder alle disse bytes, og der er et par grillbarer der. 1, der er den skøre hjørne tilfælde, hvor hvis nogen betaler en masse penge og omdøber Mather, vi nu nødt til at ændre hele vores database tabel. Det kommer ikke til at ske ofte, selvom Pfoho engang blev kaldt North House 15 år siden, så sker det. Men det er ikke alt, overbevisende. Mere overbevisende end et hjørne sag som den om at skulle opdatere dataene i løs vægt for en database hvorfor er du gemme MATHER igen og igen og igen og igen? Det er en masse chars, 6 tegn. Kan vi ikke gøre det endnu bedre end det, især for Pforzheimer? Vi må da kunne gøre det bedre end at mange tegn. Hvorfor ikke bare knytte en entydig identifikator med hvert hus og butik, der for hver bruger? Så lad os prøve dette. Snarere end blot bruge studerende tabellen, lad mig gå op til mit foredrag database op her øverst til venstre. Bemærk her det siger Opret en tabel. Lad mig oprette en ny tabel kaldet huse. Antallet af kolonner vil være 2. Enter. Nu har jeg 2 felter. Jeg har tænkt mig at kalde dette navn, og det vil være en varchar af længde 255, 

men det er temmelig vilkårlig. Lad mig sige dette hernede ved konvention. Så læg et ID op her. Lad os give hvert hus en entydig identifikator. Lad os give hvert hus et navn. Lad os præcisere, at identifikator vil være usigneret lige efter sædvane kun bruge positive tal. Lad os gå videre og give dette en auto-tilvækst felt for nu. Og har vi brug for noget andet? Lad os gå videre og klik på Gem. Nu har jeg en anden tabel. Meddelelse som en sidebemærkning er det lidt kryptiske SQL-kommando at du ville have haft for at skrive manuelt hvis du ikke bruger en administrativ værktøj som phpMyAdmin. Så en anden grund vi bruger det. Det er vidunderligt nyttigt slags pædagogisk fordi du kan klikke rundt og regne ud, hvordan tingene fungerer ved blot kopiere og indsætte hvad phpMyAdmin gjorde. Men CREATE TABLE kommandoen er, hvad var lige henrettet, og her er mit bord. Lad mig gå videre nu, og bruge rå SQL i stedet forsimple ved at klikke på fanen Indsæt. Lad mig gøre INSERT INTO huse, og jeg har tænkt mig at sige navnet på huset kommer til at have en værdi af 'Mather «. Det er det. Denne syntaks er lidt mere kryptisk. Dette er navnet på de felter, vi ønsker at indsætte. Det er de værdier, vi ønsker at indsætte i disse felter. Lad mig klik på Gå. 1 indsat række tog 0,02 sekunder. Lad mig klikke på Gennemse nu. 

Varsel, hvis jeg klikker på Gennemse, der er Mather, hvis ID er ved automatisering nummer 1. Lad mig gøre en anden. Lad mig gå ind i SQL fanen. INSERT INTO huse. Navnet på huset vil have en værdi på Pfoho og så videre. Go. Og jeg kan holde gør det igen og igen og igen. Eller hvis du keder bruge phpMyAdmin, kan du bare bruge fanen Indsæt og ikke behøver at skrive den rå SQL. Du kan bare bang det ud hurtigere ved at skrive, for eksempel Currier, Enter, og nu, hvis vi klikker på Gennemse, er der Currier med en ID på 3. Så dette er hvad vi mener med auto-tilvækst. Men nu er vi nødt til at ordne noget i de studerende. I de studerende hvad skal datatypen af ​​huset feltet nu være? Det bør være en int, right? Så målet her er at faktor ud, også kendt som normalisere, tabellerne så vi ikke gemmer oplysninger redundant i nogen af ​​mine tabeller. Og igen, er den vej, vi var på her vil sige Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, som er meget redundant med hensyn til spild af tegn. Så lad mig gå videre og ændre dette ved at klikke på Struktur, og lad mig gå videre og tjekke ud i huset, skal du klikke på Skift, og nu jeg har tænkt mig at ændre dette for at være en int. 255 er ikke længere relevant. Lad mig gå videre og sige, det er fint, hvis det stadig er NULL. Gem. Nu tabel studerende er blevet ændret med succes, og bemærk igen hus er en int. Som en sidebemærkning, ignorere tallet i parentes, når det kommer til int'er. 

Dette er til ældre årsager. Tilbage i dag, hvor du ikke har GUI, du i stedet havde en kommandolinje miljø, de 10 og 11 angivet, hvor mange tegn du skal vise i terminalvinduet til rent faktisk at vise felter. Det har intet at gøre med bit længden af ​​den faktiske felt, så vi vil bare ignorere det for nu. Nu har jeg nødt til at gå ind i denne tabel. Og hvis David bor i Mather, bør hus ikke være 0, hvilket er en standard int værdi tættest på NULL. Han skulle bo i hus 1. Lad os vilkårligt sige, at Mike bor i Pfoho, så husnummer 2. Nu mit bord ser lidt mere kryptisk. Men overveje effektiviteten. Jeg bruger nu kun 32 bit til at identificere huset, hvilket betyder, at der er kun 1 kanoniske definition af mit hus Mather og Pfoho og det er i husene tabellen. Så hvis jeg ønsker at nu genindtræde disse tabeller, så tænk på det på denne måde. Her har jeg mine elever bord, og på den højre side er der disse tal, 1 og 2. 1 er Mather, 2 er Pfoho. Vi har de samme numre i denne anden tabel, der kaldes huse, 1 og 2 og 3 for de tre huse. Hvad vi nu ønsker at gøre, er at have evnen i kode, PHP og SQL, at sortere i genindtræde disse tabeller, hvor hvis det er de studerende og det er disse huse, vi ønsker at en eller anden måde kombinere dem, så 1 linjer op med 1, 2 linjer op med 2, og således at vi kan regne ud, hvor David og hvor Mike og hvor alle andre bor. For at gøre dette kan vi udføre en SQL-forespørgsel som følgende. SELECT * FROM studerende JOIN huse ON - Og nu hvilke felter vi ønsker at deltage på? Så students.house = houses.id. 

Lidt kryptisk, men denne del forstås bogstaveligt oprette en ny midlertidig tabel Det er resultatet af sammenføjning studerende og huse. Og hvordan vil du kombinere spidserne af mine fingre her? Indstil de studerendes hus felt svarende til husenes ID. Og hvis jeg nu klikker på Start, jeg kommer tilbage, hvad jeg håbede på. David er i Mather, Mike er i Pfoho, og jeg kan også se de unikke identifikatorer. Men pointen er nu har jeg et komplet bord. Og så takeaway her for Pset 7 eller virkelig for det endelige projekt: Hvis du opdager, at du ønsker at indkode enhver oplysning redundant, uanset om det er et hus, måske er det en by, stat og postnummer hvor ZIP kan sædvanligvis, men ikke altid anvendes som en unik identifikator, går gennem udøvelse mentalt og derefter med noget lignende phpMyAdmin af factoring ud, at de fælles data, fordi især da din hjemmeside bliver mere godt bruges og mere populære, dette er, hvordan du sørge for, at alt er super hurtig, ved at give databasen så mange vink om, unikke som muligt. Det var en masse. Eventuelle spørgsmål? Ok. Lad os tage en 5-minutters pause der og omgruppere. Ok. Det følgende er et eksempel, der blev brugt for nogle år siden, da jeg tog CS161, som er den operativsystemer klasse på skolen som er kendt for at være fantastisk, men en vanvittig mængde arbejde, og det fokuserer virkelig på nogle af de lavt niveau problemer, der opstår i operativsystemer og også selv i en verden af ​​databaser. 

Den historie, der blev fortalt af min professor, Margo Seltzer, det år var som følger. Antag at du har en lille dorm køleskab for dig og din roommate og begge du virkelig gerne mælk. Så du kommer hjem fra klassen en dag, din værelseskammerat er endnu ikke der, du åbner køleskabet, og du indser, "Oh damn, vi er ude af mælk." Så du lukker køleskabet, du gå på tværs af gaden til CVS og komme i de stadig mere lange linjer til at købe nogle mælk på CVS. I mellemtiden din værelseskammerat kommer hjem fra hans eller hendes klasse, kommer ind i lokalet, åbner køleskabet virkelig ønsker nogle mælk, åbner køleskabet, og "Damn, ingen mælk." Så han eller hun lukker køleskabet, går ud af døren, og går til ABP eller et andet sted end CVS, hvor du ikke kommer til at støde ind i hinanden at gå få nogle mælk. Selvfølgelig et par minutter senere, både af jer kommer hjem og nu har du dobbelt så meget mælk som du rent faktisk ønskede. Og bliver mælk, nu er det kommer til at gå dårligt, fordi du kan lide mælk men du kan ikke rigtig lide mælk, så nu du har for meget mælk, så det kommer til sur. Dette er en forfærdelig, forfærdelig situation. Hvad kunne have løst dette dilemma, hvis du var den første roommate hjem? Ja. [Studerende] Du skulle have efterladt en note. [Latter] Godt. Du skulle have efterladt en note. Du skulle have sat en Post-it note eller som at sige, "Gone for mælk," og så vil din roommate konceptuelt ville være blevet låst ude af faktisk at gøre det. Eller du kan gå 1 skridt videre. Du kan bogstavelig talt låse køleskabet med en slags hængelås, og nu din roommate vil bogstaveligt blive låst ud af køleskabet. Hvis vi generaliserer tilbage til programmering, du kan næsten tænke på køleskabet som en slags variabel eller en struct, eller anden form for beholder til information. Problemet fundamentalt her er, at begge du fik lov til at inspicere eller læs tilstand denne datastruktur, men du har set det på forskellige tidspunkter og alligevel jer begge taget en beslutning baseret på verdens tilstand på disse forskellige tidspunkter. Så havde du låst køleskabet, ville du have mindst undgået din værelseskammerat fra at have været i stand til at inspicere verden, så han eller hun ikke kunne have gjort det samme afgørelse. Så databaser, som det viser sig har dette problem konstant. 

Lad os se om vi kan konstruere et scenario. Antag, at du er en slags dårlig fyr, og du går til Bank of America eller et af de andre steder i kvadrat, der har et par pengeautomater side om side, og på en måde du regnet ud, hvordan at kopiere en ATM-kort - ikke så svært. Det er bare en magnetstribe. Og så hvad du ønsker at prøve at gøre er at spille dette spil hvorved du lægger 1 kort i 1 maskine, et andet kort i den anden maskine, og du hovedsagelig vil forsøge at hæve penge samtidig, fordi forestille mig, at historien går som følger. Maskinen til venstre tager dit kort og din pinkode, og så siger du: "Giv mig 100 dollars." ATM er programmeret til først at gøre en udvalgt på sin database eller tilsvarende - uanset database det er ved hjælp - at se er denne bruger har mindst $ 100 i hans eller hendes konto? Hvis ja, spytter så ud $ 100 og trække $ 100 fra deres balance. Men selvfølgelig, hvis der er flere maskiner her eller flere måder at inspicere den tilstand af denne verden, bankboks, for at se hvor mange penge du har, antage, at bare tilfældigt maskinen på venstre og højre begge stille dette spørgsmål på nogenlunde samme tidspunkt. 

Og det kan helt sikkert ske. Pengeautomater er computere i disse dage. Så hvis maskinen til venstre siger: "Ja, du har mindst $ 100," mellemtiden maskinen på højre siger, "Ja, du har mindst $ 100," så de begge videre til slut deres programmer og faktisk spytte ud $ 100 og sige, "Tidligere du havde 200 dollars." "Lad mig opdatere variablen til nu være $ 100 tilbage på kontoen." Men hvis de begge har tjekket din konto saldo og fandt, at det er $ 200 og begge af dem så gøre det math og sige 200 - 100, maskinerne har potentielt spytte ud to $ 100 regninger i hver maskine, men de har kun opdateret din sum kontosaldo til at være 100 dollars. Med andre ord, du har taget ud $ 200, men fordi de inspicerede verdens tilstand samtidigt og derefter foretaget en beslutning baseret på denne værdi, de måske ikke gøre det math i sidste ende rigtigt. Så i en bank situation, for du virkelig ønsker at have en form for lockout således at så snart du har tjekket status for nogle variable det er virkelig vigtigt, ligesom saldoen på din konto, lad ikke nogen anden træffe beslutninger baseret på, at indtil du er færdig med at gøre dine ting, hvor i dette tilfælde er du ATM til venstre. Lås alle andre ud. Du kan faktisk opnå denne effekt i et par forskellige måder. 

Den enkleste måde i MySQL er en linje af SQL, som vi gav dig i det problem indstillede specifikation, der ser ud præcis som dette. Indsæt i tabellen - hvad det nu hedder - et id, et symbol, og en aktie, et antal aktier, følgende værdier, f.eks. Hvis du ikke har læst spec endnu, dette er et eksempel involverer hvordan kan du gå om køb af 10 aktier i dette penny bestand for præsident Skroob, hvis bruger-id sker for at være nummer 7? Det siger INSERT INTO tabel følgende id, symbol, og antallet af aktier af 7,. 'DVN.V «, og 10 Men - men, men, men - den anden linje er den vigtigste. ON duplikeret nøgle UPDATE aktier = aksjer + VALUES (aktier). Så helt kryptisk-ser ved første øjekast. Men det faktum, at denne SQL-forespørgsel, selvom det ombrydes på 2 linjer, er 1 lang forespørgsel, betyder det, at det er atomar i den forstand, at denne forespørgsel enten vil blive udført alle sammen eller slet ikke. Og ved definition af MySQL, er, at hvordan de implementeres denne forespørgsel. Det er per definition i manualen garanteret at udføre alle på en gang eller slet ikke. Motivationen for dette er som følger. Hvis der i dette tilfælde, du forsøger at købe 10 aktier i bestanden, det er lidt af den samme historie som mælken, det er lidt af den samme historie som ATM. 

Hvis du laver den fejl ikke at bruge denne syntaks men i stedet vælge fra databasen for at se, hvor mange aktier i dette penny stock siger præsident Skroob har, og antager, at han har 10 aktier, og derefter nogle splitsekund senere du så gøre en UPDATE-sætning, som er en anden erklæring i SQL, der siger gå videre og tilføje 10 flere aktier til sin nuværende 10, så ideelt set det samlede tal er 20, Problemet er da i dagens databasesystemer og fordi nutidens computere du har flere processorer, flere kerner - med andre ord, kan computere bogstaveligt gøre flere ting på én gang - der er ingen garanti for, at din SELECT og din UPDATE i dette tilfælde kommer til at ske ryg mod ryg. Så en dårlig scenario ville være du gøre det SELECT at se, hvor mange aktier i dette penny stock har Skroob har, og så bare tilfældigt anden database forespørgslen udføres - måske dens Skroob i et andet browservindue forsøger at købe 10 aksjer i et andet vindue helt, ligesom ATM - og antage, at en anden forespørgsel kommer ind mellem SELECT og UPDATE. Det kunne være tilfældet, at Skroob nu mister nogle antal aktier fordi en anden proces inspicere tilstanden af ​​hans verden, eller han får flere aktier, end han burde have. Vi vil ikke gå ind i de nærmere oplysninger om, hvad disse særlige historie linjer ville være, men pointen er, hvis du nødt til at tjekke en variable værdi og derefter træffe en beslutning, hvis der er en risiko for, at en anden gør noget i mellem de 2 udsagn, som kan ske i multiprocessorsystemer, i systemer med flere kerner, computere med evnen til at gøre flere ting på én gang, kan dårlige ting ske ligesom bankkonti bliver debiteret forkert, at købe dobbelt så meget mælk, eller i dette tilfælde et forkert antal aktier. Men der er en lettere måde at tænke over dette. 

Det viser sig, at SQL understøtter også, hvis du konfigurerer din tabel korrekt, noget, der hedder transaktioner, som jeg vil hævde er faktisk endnu nemmere at forstå end dette, men det er ikke en 1-liner, så det er faktisk en smule mere involveret. Der er bogstaveligt talt en erklæring i SQL kaldet START TRANSAKTION. Ligesom der er SELECT, UPDATE, INSERT, DELETE, og JOIN og en flok andre, Der er søgeord som START TRANSAKTION. Og hvad du så gøre i forbindelse med Pset 7 - du behøver ikke at gøre dette for Pset 7, det er udtrykkeligt fraskrives som ikke er nødvendigt, men for de endelige projekter kan det være nyttigt - hvis du kalder en forespørgsel på START TRANSAKTION, og derefter en anden forespørgsel og derefter en anden forespørgsel og derefter en anden, en anden, og en anden, disse forespørgsler vil faktisk ikke blive udført, indtil du kalder SQL-sætning COMMIT, på hvilket tidspunkt, uanset om det er 2 udsagn eller 20 erklæringer vil de alle blive henrettet på en gang, hvilket betyder, at ingen andre kan ved et uheld købe for meget mælk eller betalingskort for mange penge eller købe for mange aktier, idet alle dine forespørgsler vil udføre tilbage til tilbage til back to back. Og det er super vigtigt, især når du laver noget som dette. Dette er et vilkårligt eksempel, der siger lad os opdatere bankkonto ved at finde en balance svarende til balance - $ 1000 hvor kontonummeret er 2. Og så den anden erklæring er nu lad os deponere at $ 1000 i en andens bankkonto, hvis kontonummer er 1. 

Med andre ord er dette et perfekt eksempel på, hvor du vil være sikker at begge disse udsagn ske eller slet ikke fordi ellers kunden kommer til at få skruet og du kommer til at tage deres penge og ikke deponere den et andet sted, eller banken vil få skruet hvor du vil deponere penge men faktisk ikke trække det fra brugerens konto. Så du vil have dem begge til at gennemfører et projekt sammen. Således indgår verdens transaktioner. Så det er noget at holde på bagsiden af ​​dit sind, ikke så meget med henblik på bare et afsluttende projekt, men hvis du ønsker at tage din endelige projekt et eller andet sted, hvis du ønsker at starte op nogle selskab omkring det, hvis du ønsker at løse nogle studerende gruppes problem på campus og faktisk har en levende, aktiv hjemmeside, disse er den slags subtile fejl, der kan opstå hvis du ikke helt tænke igennem, hvad der kan ske, hvis 2 personer forsøger at få adgang til din hjemmeside på bogstaveligt talt samme tidspunkt, hvorved deres forespørgsler ellers bliver sammenvævet. 

Klar til nogle JavaScript, en teaser deraf? Dette er vores sidste sprog for semester. Ok. Heldigvis JavaScript ser meget, meget, meget lig de 2 sprog, C og PHP, vi har gjort hidtil. Der er ingen JavaScript i Pset 7, men det er et utroligt nyttigt redskab når det kommer til at gøre web-baserede afgangsprojekter eller egentlig bare webprogrammering mere generelt. Så et hurtigt overblik over noget, der hedder DOM. Her er en super simpel webside, der virkelig bare siger hej, verden både i titlen og i kroppen. Da fordybningen er tyder i nogen tid, Der er faktisk et hierarki til websider. Jeg kunne trække den samme stump HTML som et træ, tænker tilbage på vores drøftelser af datastrukturer i C, som følger. Jeg har nogle særlige rodnoden kaldet dokument node, og vi vil se den analoge af dette i JavaScript på bare et øjeblik. Det første barn og eneste barn af at i dette tilfælde er det HTML-tag. Der er ingen direkte kortlægning af doctype. Det er en speciel ting, så skulle vi bare ignorere det, når det kommer til denne DOM, dette Document Object Model træ. Bemærk, at HTML-tag, som jeg har skildret arbitrært som et rektangel, har 2 børn: hoved og krop. 

Dem, er ligeledes tegnet som rektangler. Det er meningsfuldt billedligt at hovedet er til venstre for kroppen. Konsekvensen er, at hovedet kommer først i træet. Så der er faktisk en bestilling til et træ, når du tegner det på denne måde, selv om figurerne og whatnot er vilkårlige. Hoved i mellemtiden har et enkelt barn kaldet titel, og titel faktisk har sit eget barn, som er "Hello, World", som jeg bevidst tegnede som en oval her for at gøre det lettere forskelligt fra det rektangel. Disse rektangler er elementer, hvorimod hej, verden er virkelig en tekst node. Så det er en knude i træet, men det er en anden type node så jeg trak det vilkårligt anderledes. Tilsvarende har krop have et barn kaldet hej, verden så godt, så forskellige node selvom det er tilfældigvis den samme tekst, men jeg har tegnet det med den samme form. Så hvem bekymrer sig? Nå, hvad er rart om HTML er, at det har denne hierarkiske natur. Og hvad er rart om JavaScript og især biblioteker, der er frit tilgængelige og populær som jQuery, kan du navigere træstrukturen så forbavsende nemt. Enhver af de ting, vi gjorde i C med pointere og gennemkører træer og rekursiv på noder venstre barn til højre barn, pludselig kan vi sortere i tager for givet som værende utrolig oplysende, hvis ikke en smule frustrerende men ikke nær en effektiv måde at gå om programmering. Og så med disse højere niveau sprog som JavaScript vi vil være i stand til at navigere dette træ langt mere intuitivt. 

Og faktisk syntaksen vil være helt fortrolig. Hvis du aldrig har set JavaScript før, er dette en virkelig rart henvisning fra Mozilla folk, hvem de mennesker gør Firefox, så du er velkommen til at gennemse det på din bekvemmelighed. Hvad du vil finde - og disse dias er identiske med, hvad vi brugte den anden dag - Tilsvarende er main væk. Så når du skriver et program i JavaScript, er der ingen hovedfunktion. Du skal bare begynde at skrive kode. Men en vigtig skelnen mellem JavaScript og C og PHP er, at mens C og PHP hidtil er blevet henrettet server side af apparatet i denne sag eller mere generelt af en server, JavaScript ved design er normalt udføres af en browser. Med andre ord, kan du skrive JavaScript-kode, som vi er ved at, på en server i apparatet, men du medtage det blandt din HTML, blandt din CSS, blandt dine GIF'er og dine PNG og dine JPEG således at når brugeren besøger din webside, hvis du bruger JavaScript, , at JavaScript-kode kommer fra server til browser, og det er den browser, der rent faktisk udfører det. Så det har meningsfulde konsekvenser for selv intellektuel ejendomsret. Det er slags fjollet at selv tænke om at beskytte din IP, når det kommer til JavaScript-kode grund af arten af ​​det sprog, den bliver henrettet sædvanligvis browser side. 

Du kan sløre det, hvilket betyder at du kan gøre det ser vanvittigt og grim med ingen mellemrum, forfærdelige variabelnavne, for at gøre det sværere for folk at stjæle din IP men nøglen er at den udføres browser side. Selvom som en sidebemærkning JavaScript kan bruges server side, den mest almindelige brug sag lige nu er stadig på browseren. Og her er hvad det ligner. Her er en if-else if-else konstruere ligesom C, ligesom PHP. Her er en boolesk udtryk, når du "eller" 2 ting sammen. Her er, når du "og" 2 ting sammen. Her er en switch-statement, som svarer til PHP i, at du kan skifte på forskellige typer af værdier. Loops ligeledes har efter sløjfer her, som er opbygget på samme måde, hvad vi har set før. Mens loops, vi har gøre, mens sløjfer. Variabler, nogensinde så lidt anderledes. Du erklærer variabler som du gør i PHP og C, men ligeledes er JavaScript svagt skrives. Du behøver ikke angive int eller float eller snor eller noget lignende, der normalt. Du kan angive var. Du behøver ikke at angive var, men det har konsekvenser, hvis man ikke gør det. Normalt hvis du udelader var, du ved et uheld oprette en global variabel i stedet for lokale. Så lad mig foreslå, at du næsten altid bare sige var, og derefter navnet på variablen. Det er ikke en type, det er bare var for variabel. Det ville være et eksempel, uanset om det er 123 eller "hej, verden". Arrays er til stede og syntaktisk ligner PHP. Jeg vil sige was numre og derefter jeg bruge kantede parenteser igen at erklære en variabel hvis type er array, der har disse særlige tal i det adskilt af kommaer. Og så endelig, dette er den eneste, der virkelig ser anderledes ud. Husk på, at i PHP ville vi have gennemført et associativt array for en studerende ligesom Zamyla at kunne se sådan ud, hvor variablen kaldes elev. De kantede parenteser betyder her kommer et array. 

Det faktum, at jeg ikke bruger numeriske indeks, men bånd - id, hus, og navn - betyder, at dette er et associativt array, og disse pile med lighedstegnet og den vinklede beslag betyder, at nøglen er "id", værdien er 1; nøglen er "hus", er værdien Winthrop House; nøglen er "navn", er værdien Zamyla Chan. Så der er 3 nøgler inde i denne associative array, som hver har sin egen værdi. Vi har set, at i Pset 7, eller du snart vil i JavaScript samme idé, men det kommer til at se sådan ud. Så var elev - ingen dollartegn og ingen omtale af type stadig, men var - lig og derefter åbne krøllede parenteser, fordi i JavaScript, når du har vigtige værdi par, du rent faktisk bruger noget, der hedder et objekt. Og dem af jer der tog APCS eller lignende husker muligvis genstande fra Java eller lignende sprog. JavaScript er ikke Java, først og fremmest. Det var et bevidst design beslutning år siden for at banke off noget andet, der var populær, navn, selv om det ikke har nogen grundlæggende relation til Java selv. JavaScript har objekter, og du opretter dem ved hjælp af klammeparentes notation. Objekter i JavaScript er stort set svarer til associative arrays i PHP når det drejer sig om lagring af data inde i dem. 

Men endnu mere magtfuldt i JavaScript kan du knytte meget nemt funktioner indersiden af ​​et objekt, og selvom du kan gøre dette på andre sprog, det er en ganske almindelig paradigme, som vi vil se. Kort sagt, repræsenterer dette objekt en studerende, der er særligt Zamyla, og det ligner begrebsmæssigt, bare syntaktisk forskellig fra denne. Lad os faktisk bruge JavaScript i en fil. Det viser sig, at der er et script-tag. Vi har set en stil tag og vi har set andre HTML-tags. Scriptet tag rent faktisk vil indeholde nogle JavaScript-kode. Lad mig gå ind i apparatet, hvor vi har nogle kildekoden pre-made. Jeg har ikke lagt det endnu på hjemmesiden, men jeg vil gøre det efter klasse. Lad os åbne op denne ene, blink.html. Tilbage i 1990'erne, var der bogstaveligt talt en HTML-tag kaldet blink tag, og dette var en af ​​de mest vidunderligt overused mærker på Internettet hvorved du ville besøge nogle 1990'erne stil webside og begynde at se tekst blinker dig sådan her, resultaterne af marquis tag, havde som tekst går sådan her. En af de få gange, hvor verden har faktisk aftalt på en web-standard, alle over hele linjen dræbte blink tag nogle år siden. Men vi kan genoplive det med JavaScript som en demonstration af magt, du har når du kan skrive et program inde i en webside. Først lad os springe over de nye ting og kun fokusere på den gamle. 

Her er den gamle ting i dette eksempel. Jeg har en HTML-tag, et hoved-tag, og en titel tag. Så jeg har en krop tag her med en div, som husker er bare en rektangulær division af siden at jeg har givet et unikt id vilkårligt af "hilsen" til, bare så jeg har en måde entydigt at henvise til det, som har nogle meget enkle tekst: hej, verden. Lad mig nu rulle op til toppen af ​​denne fil og se, hvad der er nyt. Den første ting, der er ny op toppen er script-tag, og indersiden af ​​script-tag varsel jeg har erklæret en funktion. At erklære en funktion i JavaScript, temmelig ligner PHP, du bogstaveligt skrive funktion og derefter navnet på den funktion, parenteser og måske nogle argumenter, hvis det tager nogen. Så jeg har fået mit klammeparentes som sædvanlig, og nu har vi nogle lidt ny kode, men lad os se hvad det betyder. Så var div, bare det betyder at give mig en variabel kaldet div. Jeg kunne have kaldt det foo, men jeg ville have det til at blive kaldt div af årsager, der vil blive tydelig i en anden. Så viser det sig i JavaScript - og det er JavaScript-kode indlejret i min webside - der er et særligt global variabel slags kaldes dokument. JavaScript er faktisk et objekt-orienteret sprog. Vi vil ikke gå i detaljer i 50, hvad det betyder, men for nu vide, at et objekt er temmelig meget ligesom en struct. Ligesom vi så helt tilbage når i en af ​​de tidligste problem sætter hvor vi sætter en masse oplysninger i en struct, ligeledes er dokumentere en særlig struct, der kommer med browseren, kommer med enhver webside. Det er ikke noget, jeg har oprettet. Inde i dette dokument struktur, selvom du har ikke kun data men du har også funktioner. 

Og når som helst du har en funktion inde i en struktur, inde i et objekt, det kaldes en metode. Men det er det samme. En metode er en funktion, der bare så sker for at være inde i noget andet. Så det betyder, at denne særlige globale variabel kaldet dokument har en funktion kaldet getElementById, der bogstaveligt talt gør det. Det vil få dig et element fra DOM, Document Object Model træ, hvis ID er i dette tilfælde hilsen. Med andre ord kommer al den tid vi har brugt på datastrukturer i spil her. Dette billede af en DOM, at vi havde et øjeblik siden, selvom siden er lidt anderledes, hvis jeg havde en div i dette billede, hvad document.getElementById ville vende tilbage til mig, ville faktisk være en pegepind til rektanglet i træet, en henvisning til rektanglet i træet. Så det er hvad det betyder rent faktisk at kalde en af ​​disse funktioner. I dette tilfælde er igen det er en div. Det er ikke et organ eller en titel. Så lad os se, hvad jeg så gøre med denne div nu, at jeg har det inde i denne variabel kaldet div. Det viser sig med JavaScript du har evnen til at nappe CSS på din side dynamisk. Indtil nu er alle de CSS, vi har gjort, omend begrænset, i stil-attributter, eller hvor ellers har vi lagt CSS? Jeg slags fordærvet, at én. I den stil-kode i toppen af ​​filen. Eller tredje sted har været i? 

En ekstern fil, noget. Css. Så det er de 3 steder, vi har gjort CSS hidtil, men fangsten er vi har hårdt kodet det hele. Du besluttede som du dykkede ind i Pset 7, besluttede vi før belære hvad vores CSS ville være. Men hvis du ønsker at ændre din CSS, kan du faktisk gøre det når du har et virkeligt programmeringssprog. CSS, HTML - ikke programmeringssprog. JavaScript er. Så viser det sig, at så snart du har en af ​​disse rektangler fra træet kaldet DOM, har den selv nogle data i den. Så div at jeg greb blot fra træet har, hvad vi vil kalde en ejendom inde i det kaldes stil, og den stil Ejendommen har selv en ejendom kaldet synlighed. Jeg ville vide det kun ved at kigge op en CSS brugervejledning. Det viser sig, at der er en synlig CSS ejendom, der gør hvad det siger. Det gør noget synligt eller ej, er synlig eller ej. Og hvordan du gør det er det. Jeg spørger programmering, hvis synligheden af ​​denne div er skjult, hvad skal jeg ændre det til? Synlig. Else hvis synligheden af ​​denne side ikke er skjult, logisk jeg gør det skjult. Jeg har ingen idé om, hvorfor det er synligt og skjult og ikke synlige og usynlige. Det var en dårlig design beslutning undervejs. Men de er faktisk modsætninger i CSS: synlig og skjult. Alt dette gør, er det betyder at ændre CSS fra min fil til og fra, til og fra for den pågældende div. Men igen, dette er en funktion kaldet blink. Hvornår er blink-funktionen hedder? Det viser sig, at der er en anden speciel global variabel kaldet vindue, samme ånd til dokumentet, men henviser til, at dokumentet refererer til din webside, ligesom DOM-træet, sendte HTML dig fra serveren, vindue refererer til krom omkring det, adresselinjen, titellinjen, og alle de ting omkring din webside. 

Og det viser sig, at vinduet objekt har en speciel funktion inde i det der kaldes setInterval det er hvad det siger. Det vil angive et interval - i dette tilfælde for hver 500 millisekunder - og tage et gæt, hvad det kommer til at gøre hver 500 millisekunder? Det kommer til at udføre denne funktion blinker. Og hvad er rart her er, at vi kunne have gjort dette i C, selvom vi aldrig gjorde. C har dog noget, der hedder funktionspointere hvor du kan passere funktioner omkring som argumenter. Ligeledes i JavaScript kan du passerer navnet på en funktion til en anden funktion. Og mærke til, hvad jeg laver. Jeg laver ikke det her. Hvis jeg sætter parentes efter blink, ville det betyde kalde blink funktion. Hvis jeg udelader dem, betyder det her er blink-funktion således at setInterval kan kalde det hver 500 millisekunder. Så det endelige resultat, grusomme selv om det er, er, at hvis jeg går ind i localhost og gå til blink.html, Jeg har nu det sker igen og igen. Og hvis jeg faktisk Inspect Element, lad os se om vi kan se det. Lad mig Inspect Element, lad mig rulle ned bare en lille smule, lad mig vælge Elements herovre, og bemærk DOM indersiden af ​​Chromes inspektør. Det er bogstaveligt talt skiftende frem og tilbage hver 500 millisekunder. Hvis vi går til vores ven Nate, hvis du nogensinde spekuleret over, hvordan det fungerer, lignende ide med et interval, men Nate er faktisk gør meget effektiv brug af farver i dette særlige tilfælde her. Så hvad mere kan vi faktisk gøre med dette? Lad os åbne op et andet eksempel og prøve noget det er programmatisk endnu mere nyttigt end at gøre tingene blinker. Lad mig gå ind i vores formularer bibliotek i dag og gå ind form0. Dette var den grimmeste mulige form, at jeg kunne komme op med, og lad mig bare vise dig, hvad det ser ud i en browser. 

Lad mig gå ind i localhost / former, og det er form0. Dette er en super grim HTML-formular, der har et par felter til e-mail, for password, adgangskode, og derefter en lille afkrydsningsfelt til at acceptere nogle betingelser og vilkår. Fangsten er, hvis jeg besøger denne form, og jeg ønsker ikke at give dig min e-mail-adresse, Jeg ønsker ikke at acceptere de vilkår og betingelser måske kan jeg klikke på Registrer og den lader mig igennem alligevel. Dette sker for at underkaste sig en dum PHP fil kaldet dump.php. Alt det gør, er udskrive indholdet af $ _GET bare til diagnostiske formål. Det var, hvad der blev fremlagt af brugeren lige nu. Men formoder, at vi rent faktisk ønsker at validere brugerens formularafsendelse. Lad mig gå ind i version 1. Dette er form1.html. Det ser æstetisk lige så slemt, men bemærk, hvordan fancy det er. Hvis jeg klikker på Tilmeld uden samarbejde, får jeg råbte på. "Du skal oplyse din email-adresse." Ok. Så lad mig prøve det. Så malan@harvard.edu. Jeg har ikke brug for en adgangskode. Register. "Du skal angive et kodeord." Ok. Så jeg vil give en adgangskode blodrød. Register. "Adgangskoderne stemmer ikke overens." Jeg er nødt til nu skrive i højrød her. Jeg ved et uheld tjekket det. Register. "Du skal acceptere de vilkår og betingelser." Ok. Enig der. Register. Og nu viser mig den diagnostiske output derovre. 

Så hvad der lige er sket? Vi har haft denne evne til at validere formularer. Faktisk, hvis du gjorde dykke ind i Pset 7 der er en undskylder funktion der gør det temmelig nemt at råbe på brugeren med en meddelelse på skærmen. Jeg bruger en lidt anderledes mekanisme, alarm funktion, der er ikke en funktion, der er smilet fordi det gør meget grimme brugermeddelelser. Men lad os se, hvad jeg laver her. Det er form1.html, og læg mærke til, at jeg har nogle temmelig bekendt syntaks: kroppen tag, form tag, action attribut, metode attribut. Men bemærk Jeg har givet min form et unikt id for nemheds skyld. Så jeg har fået en e-mail felt, hvis type er tekst, et password felt, hvis type er password, bekræftelse felt, hvis type er password, og derefter et afkrydsningsfelt, hvis navn er enighed herovre, type er afkrydsningsfelt. Og så har jeg fået en submit knap. Men bemærk øverst hvad mere jeg har. Først og fremmest er der en anden brug af script-tag. Hvis du har nogle JavaScript-kode i en anden fil, ligesom med CSS kan du medtage det. Og du gør det med script kilde, og derefter mærke jeg connecting tilsyneladende at googleapis.com til en meget lang vej, men hvis filnavnet slutter i jquery.min for minimum. js. jQuery er en super populær bibliotek for JavaScript, der bare gør JavaScript desto mere brugervenlig at bruge. Det er faktisk blevet en de facto standard. Så selvom hvad du er ved at se, er ikke ren JavaScript per se, Det er et bibliotek på toppen af ​​JavaScript ligesom den CS50 biblioteket er et lag oven på lav-niveau C-kode, virkeligheden er næsten alle på internettet bruger det. Så dette er ikke støttehjul. Dette er bare bedst øve disse dage. Læg nu mærke nedenfor, er mit eget script tag, og læg mærke til hvad jeg har gjort her. Det viser sig, at jQuery gør noget lidt fancy. JavaScript har dollartegn, men de er meningsløse. 

De er som bogstavet A eller B eller C. jQuery har simpelthen vedtaget konventionen eller slags gjort krav på, at at $ vil være deres specielle symbol. Så så snart du lægger denne globale JavaScript-fil op her med script-tag, du har adgang til en særlig global variabel der hedder $. Det er mere korrekt kaldes jQuery, men det ser ikke nær så sexet som $. Men $ har ingen speciel betydning. I PHP havde speciel betydning. Du skulle have det foran en variabel. Dette er blot en sexet ting, de tog på. Hvad sker der her? Bemærk jeg passerer den jQuery funktion min globale variabel dokument og så jeg ringer. klar. Hvad jQuery væsentlige gør, er det giver dig mulighed for at tage nogle vanille JavaScript ting ligesom dokumentet objekt, vinduet objekt og hvis du passerer det i den jQuery funktion - og igen, for at være klar, dette er en funktion kaldet jQuery - hvad det gør, er det tilbage til dig en speciel version af dokument der har mere funktionalitet tilknyttet. Så i rå JavaScript er der ingen klar funktion, men hvis du passerer dokument til den jQuery funktion først, den vender tilbage til dig en speciel version af dokumentet objekt der har flere smarte funktioner. Og det er derfor, folk kan lide det. Det bare gør tingene lettere at gøre, da vi er ved at se. Så hvad betyder denne linje kode betyder? Denne linje kode her betyder, når dokumentet er klar - med andre ord browseren gang er færdig med at læse denne fil top til bund - gå videre og udføre følgende funktion. Hvad er virkelig interessant i JavaScript - og PHP har det så godt - er anonyme funktioner. I JavaScript kan du erklære funktioner, der har noget navn, men de har en krop. Læg mærke til hvad der sker her. 

Dette er en funktion kaldet klar, og det betyder blot gøre følgende når hele webside er klar, når det hele er blevet læst ind fra serveren. Hvad vil du gøre? Jeg ønsker at udføre et stykke kode. Bemærk, at vi ikke ønsker at udføre denne kode med det samme. Hvis jeg udeladt dette, ville det betyde straks begynde gennemførelsen af ​​disse linjer kode. Men det faktum, at jeg siger nej, nej, nej, wrap dette i en anonym funktion som denne betyder ikke udføre det endnu, kalder det i sidste ende. Vi så for et øjeblik siden i vores tidligere form eksempel. Hvilken funktion har vi kalde til sidst, 500 millisekunder senere? Blink. Så den samme idé. Igen, selvom det ser lidt mærkeligt, bare tage for nu om tro at erklære en anonym funktion, der hedder til sidst, du blot skrive function () { Så hvad kode skal vi eksekvere sidst? Følgende. Også dette ser lidt nyt, men det betyder her er den jQuery funktion, og dette nu er en genvej. Denne stump HTML nederst på skærmen naturligvis har nogle træ repræsentation. Det er ikke det. Denne side er mere interessant end denne hello, world eksempel. Men der er nogle træ, der svarer til denne HTML. Det ville være en smerte i nakken for at skulle gennemføre en form for rekursiv funktion til at starte ved roden node og derefter finde den node, hvis ID er registreret. Så hvad jQuery gør super nemt for os er bogstavelig talt det. Gå videre og få mig hvad div eller anden form, uanset HTML-element har et id for registrering. Dette svarer til document.getElementById ("registreringen"). 

Hvorfor gør folk som jQuery? Fordi det er kortere at skrive. Men det er alt det er. Det er den samme idé. Hent mig tag hvis ID er registreret. Og når det tag, der sker for at være en form, der er indgivet, gå videre og udføre denne kode. Så lad os tage et kig nu på, hvordan vi laver form validering. Syntaksen er ganske vist kryptisk i starten, men hvad sker der? Hvis denne linje kode er sandt, vil jeg råbe på brugeren om at give hans eller hendes e-mail-adresse. Så hvad er denne linje kode? $ Betyder jQuery. Nu bemærke dette. Det er lidt ligesom CSS. Hvis du har dykket ned CSS endnu, vil du vide, at dette betyder, at elementet hvis ID er registreret. Rummet betyder finde et barn eller en efterkommer af registreringen, hvis navn er input. Og så denne ting i firkantede parenteser er en lille filter. Og selv hvis dette virker kryptisk, dette betyder blot gå til form, hvis ID er registrering, gå til indgangen element inde i det, hvis navn er e-mail, og derefter få sin værdi, uanset dens værdi sker for at være - asdf hvis det er alt jeg har skrevet eller malan@harvard.edu hvis det er det jeg har skrevet. Så hvis værdien af ​​formen e-mail felt == ingenting, råbe på brugeren. Else, hvis værdien af ​​password feltet == ingenting, råbe på brugeren. 

Else, hvis værdien af ​​feltet til adgangskode ikke modsvare værdien af ​​bekræftelsesfeltet som var den anden form element, råbe på brugeren. Og så endelig - og det ene også har nogle nye syntaks af sine egne, men når du har set det, det er i det mindste lidt mere fornuftigt - ellers hvis den form, hvis ID er registreringen har en indgang element, hvis navn er enighed og det kontrolleres, gå videre og råbe på brugeren. Så jeg er helt indrømme det er helt overvældende ved første øjekast. Det er en masse ny syntaks. Men alle jQuery følger den slags mønstre. Og ærligt, jeg ikke engang kender dette eksisterede indtil for et par minutter siden. Jeg googlede, "Hvordan kan du kontrollere, om en checkboks er markeret i jQuery?" og dette er den syntaks, fordi der er forskellige måder at gøre det med den faktiske rå JavaScript-kode. Så som den allerførste side af Problem sæt 7 understreger, Pset 7 er i høj grad en øvelse i bootstrapping selv hvor vi har forhåbentlig en begrebsramme med til at tackle Pset. 

Men som det ofte er tilfældet med web-design, er det op til dig virkelig at stikke rundt, inkorporere kodedele og eksempler fra nettet, så længe du citerer dem I henhold til vilkårene på det første ark, og indse, at lære HTML, CSS, JavaScript og endda SQL der egentlig menes at være denne at-home øvelse, når vi begynder at tage disse støttehjul off. Og indser også der er så mange flere ting, du kan gøre med en browser. Inde i de fleste af disse elementer der er andre ting der kaldes hændelseshandlere. Og selvom vi kiggede bare på dem, kaldet onSubmit og onready, du kan gøre ting som onkeydown, onkeyup, gerne, når brugeren rører en tast, kan du lytte til det og nøgle op. Gmail har tastaturgenveje. Hvordan Google gennemfører tastaturgenveje som C for komponere? De lytter til arrangementer, som de kaldes, ligesom onkeypress eller onkeyup og onkeydown. Hvis du nogensinde har svævede musen over nogle menupunkt og lige pludselig, voila, vises en menu eller den grafiske skifter farve, hvordan gør de det? Snarere end at lytte til onready eller ved afsendelse, du lytter til onmouseover eller onMouseOut. 

Så kort sagt, med disse meget enkle grundlæggende, at vi er begyndt at ridse overfladen af ​​i dag og vi vil dykke i yderligere til på onsdag, du har, i stigende grad, magt til at gennemføre den slags ting, som du allerede kender. Så lad os slutte der, og vi vil fortsætte med dette på onsdag. 

[CS50.TV]