[Powered by Google Translate] [Vecka 9]
[David J. Malan - Harvard University]
[Detta är CS50. - CS50.TV]
Okej. Välkommen tillbaka. Detta är CS50, och detta är början av vecka 9.
Idag fokuserar vi särskilt på design, inte längre i samband med C-
men i samband med PHP och lite av SQL och lite JavaScript,
särskilt mot en ände av både pset 7 och även din sista projekt.
Faktum är att om du är vid den punkten i ditt slutgiltiga projekt
där förmodligen som en timme eller så sedan du åtminstone börjat fundera
till din slutliga projektet och du tänker du vill samarbeta med 1 eller 2 klasskamrater,
om du har problem med att ansluta med nämnda klasskamrater,
gärna fylla i formuläret på cs50.net/partners/form.
Man ställer bara du vem du är, vilken typ av projekt du funderar,
där du bor bara av logistiska skäl.
Och sedan om du vill hålla ett öga på under nästa vecka eller så kalkylbladet URL där,
Du kan då se en skrivskyddad version av Google doc
där vi samlar denna information.
Så om du vill arbeta med någon, med alla medel gärna nå ut till människor
genom denna mekanism.
Men majoriteten av folk utföra arbete solo. Det är helt bra.
Så tycker inte att det är på något sätt obligatoriskt.
På fredag ​​var det bara jag och några i teamet här,
tom teater för det mesta.
Det fanns 3 turister sitter där, så det var lite pinsamt.
Vad vi pratade om var databaser och vi pratade om pset 7 lite.
Och om du inte råkar fånga det på video ännu, det är bra.
Jag ska försöka definiera några termer som vi annars skulle ta för givet
baserat på fredagens föreläsning.
>> Men idag ska vi försöka få dig till den punkt
att inte bara kunna göra något liknande pset 7
men egentligen förstå vad som händer under huven,
särskilt några av de abstraktioner som vi infört i functions.php filen
att göra era liv lite lättare, men så att du i slutändan förstår
så att när stödhjul lossna om några veckor kan du fortfarande överleva
i den verkliga världen och göra det här utan att någon CS50 ram under dig.
Detta $ _SESSION, för dem av er som är bekanta
eller som redan fångat videon på fredag, vad SESSION låt oss göra
i en PHP-baserad webbapplikation?
Detta är en superglobal variabel, vilket betyder att det är likadana i andemening som GET och POST
och några andra, men vad är det här bra för?
>> Vad är SESSION för? Ja. [Elev] Logga in
Ursäkta? [Elev] Loggar in Logga in faktiskt.
I pset 7 vi använder den här sessionen superglobal att underlätta logga in
Och vad är trevligt om denna superglobal är att det är en associativ array.
En associativ array, minns, är bara en array men vars index inte längre vara tal
som 012. De kan vara tal eller de kan vara ännu strängar.
Och så om du har dykt in pset 7 ännu, kanske ni minns att vi lagrar en nyckel som heter ID
insidan av denna associativ array vars värde är något som 123 -
oavsett inloggad användarens ID är.
Motiveringen till detta är att även efter det att användaren har besökt localhost
eller min hemsida mer generellt och sedan har loggat in,
även om de inte klickar på en länk eller återgå till min hemsida i 5 minuter
eller ens en timme eller ens en dag, men de lämnar sina fönster öppna,
via denna superglobal kan jag komma ihåg att de loggat in
>> Med andra ord, gör det mig att lagra något långsiktigt något jag vill om en användare.
Och du kan tänka på det verkligen som en inkarnation av en kundvagn.
Platser som Amazon låter självklart du sätter saker i en kundvagn,
men HTTP protokollet som driver webben, är statslös
i den meningen att när du besöker en webbplats,
för det mesta du inte har någon konstant nätverksanslutning
mellan din webbläsare och servern.
Så snart du har hämtat HTML och JPEG och GIF och allt det där,
anslutningen går bort och du behöver bara en kopia av HTML och allt från servern.
Men om servern vill minnas något om dig,
bördan är på servern att faktiskt registrera denna information.
Och så programmeraren som har kontroll över servern
kan sätta de flesta vad du vill inne i denna superglobal associativ array
och det kommer att vara där nästa gång användaren kommer tillbaka,
oavsett om det är minuter eller till och med dagar senare, om de inte stänger sina fönster,
vid vilken punkt SESSION försvinner.
Så det är flyktig lagring, är det icke-ihållande, och det är tänkt att försvinna
så snart användaren stänger sin webbläsare - inte bara den fliken, ofta hela webbläsaren,
därigenom effektivt logga användaren ut.
Så hur är det här genomförs egentligen?
Låt oss ta en snabb titt på ett enkelt exempel vi tittat på på fredag.
För de som känner var det så enkelt som det.
Detta är en webbsida vars enda syfte i livet är att berätta
hur många gånger jag har besökt den här sidan.
Detta är första gången här på måndag som jag besökte det, så det säger 0 gånger.
>> Men om jag börjar ladda om den här sidan står det 1 gång, 2, 3, 4, 5,
och detta kommer så småningom bara hålla på att räkna upp, upp, upp, upp, upp
för varje gång jag faktiskt på Ladda om den.
Så hur är det arbete? Låt mig gå in i denna fil som heter counter.php.
Den övre delen av det är alla blå kommentarer, men den intressanta delen är här.
På rad 13 vi kallar denna funktion session_start,
och det är bokstavligen allt du behöver göra om du vill ha tillgång
denna speciella superglobal kallas $ _SESSION.
Det gör det möjligt, och vi kommer att se i ett ögonblick hur det är allt möjligt.
I linje 16 meddelande vad jag gör.
Om nyckeln, kallad mot - med andra ord, indexvärdet - "räknare"
finns inuti denna array kallas sessionscookies, vad gör jag med den i raden nedan?
Vad är linje 18 med?
>> [Ohörbart elev svar] Vad är det? [Elev] Lagra värdet. Bra.
Det lagrar det värde som finns i SESSION just nu i en ny lokal temporär variabel,
$ Räknare i gemener.
Lägg märke till att PHP redan är lite lat här.
Märker vi inte har någon omnämnande av int eller float eller string eller något liknande
eftersom PHP är svagt skrivit, där du inte behöver ange vilken typ av en variabel,
och i detta fall här jag inte har ens förklarade det ännu.
Jag förklarar det inne dessa klammerparenteser och till skillnad från C, är detta faktiskt okej.
Oavsett hur djupt kapslade en variabel deklaration är i PHP -
inne i klammerparentes, inuti klammerparentes och liknande -
Det kommer vid denna tidpunkt finns för återstoden av programmet,
på gott och ont.
Så det blir omedelbart globala så snart du definiera det som vi gör här.
>> Annars, om jag inte hittar att det finns något i SESSION superglobal,
Jag tydligen initierar den här variabeln mot 0,
vilket bara förutsatt att användaren aldrig har varit här förut.
Och så detta är naturligtvis att inkrementera räknaren hur?
Jag uppdaterar det värde som finns inuti denna associativ array
genom att ställa det lika oavsett motströms är + 1.
Om jag rulla ner hit till HTML av sidan, det är faktiskt ganska enkelt.
Allt jag har i kroppen denna sida är: "Du har besökt denna webbplats så-och-så gånger."
Och detta är en PHP konstruktion.
Om du gör <? = Motsvarar detta effektivt vilken funktion?
Det är verkligen motsvarar ungefär printf, som vi har sett många gånger i C,
men som ni kanske redan vet från spec i pset 7,
tryck är också en funktion som bara skriver ut något, inte faktiskt använda formatkoder,
och du kan faktiskt säga eko också.
De är alla någonsin så något annorlunda även om nettoeffekten är ytterst densamma.
Så denna användning av likhetstecknet är bara sorts ett elegant sätt att göra det
mer koncist än du annars kunna.
Så det är allt detta platsen gör. Den skriver ut värdet av disken.
Hur allt detta faktiskt händer?
Du kan hämta en vecka sedan vi började titta under huven
på hur en webbsida fungerar genom att använda denna Inspector fliken.
>> Chrome har detta både i Mac-version, Windows-versionen, och även Linux-version,
och Firefox och IE har liknande mekanismer där du har detta inbyggt debugger
insidan av webbläsaren.
Låt oss ta en titt på följande.
Vi har en hel massa flikar här och minns att den vänstra en är Elements,
och oavsett hur godawful HTML och JavaScript i en sida,
ihåg att med elementen fliken du faktiskt kan navigera HTML hierarkiskt
och trevlig och prydligt.
Så om du försöker lära från en webbplats som Google eller Facebook
eller egentligen någon hemsida, inse att du är förmodligen bättre
tittar på källkoden på detta sätt i stället för att visa den råa källa,
som kan vara en enda röra, som vi har sett, särskilt på Googles webbplats.
Så om jag klickar istället på fliken Nätverk här,
låt oss se vad som händer när jag besöker den här sidan.
Låt mig först rensa cacheminnet.
Jag ska gå in på Inställningar i Chrome och sedan gå till historien
och avmarkera alla webbinformation.
Du kan användas för att göra detta för andra ändamål, [skratt]
men när det gäller att utveckla webbplatser, det är faktiskt bra -
om du skrattar du vet. [Skratt]
Det är faktiskt riktigt bra när man utvecklar webbplatser, eftersom verkligheten är
saker som kakor och saker som cachelagrade HTML-filer, cachade JavaScript-filer
kan faktiskt bli en stor huvudvärk, för om någon anledning
webbläsaren beslutar att cacha lite fil och ändå du har gjort ändringar i den filen på servern
men webbläsaren inte riktigt insett att filen har ändrats
och därför egentligen inte ladda ned den även när du klickar på Ladda-knappen,
en av de mest bombsäkert sätt att bara se till att felet inte är med din kod,
Det är med beteendet i webbläsaren, är att gå in här i din webbläsare
och bara rensa hela historien, så att det finns ingen förvirring.
>> Och sedan om du verkligen vill vara paranoid, avslutar webbläsaren, starta om den,
och sedan se till att alla fungerar som förväntat.
Så kort sagt, är clearing cache bra när man gör utvecklingen.
Så här har vi fliken Nätverk.
Jag hade tidigare besökt webbplatsen 9 gånger, men låt mig gå vidare nu och klicka på Uppdatera.
Och jag är tillbaka till 0.
Låt oss faktiskt se hur det är att denna session superglobal genomförs.
Jag ska klicka på 1 HTTP-begäran som gjordes,
och detta felsökning fönstret låter mig titta in i den.
Här ser jag bara svar från servern, vilket inte är intressant.
Jag har sett detta i ett antal olika sätt.
Men vad är tekniskt intressant är rubrikerna.
Om jag bläddra ner här och fokusera på begäran rubriker och klicka på Visa källa,
vad jag kommer att se är bokstavligen HTTP-begäran
som gick bara från min webbläsare till servern,
GET är den avgörande ordet och sedan / counter.php är filnamnet,
HTTP/1.1 är bara den version av HTTP som min webbläsare använder.
Denna linje här är en liten påminnelse från webbläsaren till servern vad namnet på servern är
att man vill prata med.
Och sedan resten av detta är ibland intressant men inte relevant just nu.
>> Detta är bara lite av en nyfikenhet.
Cryptic om denna sträng är, när som helst webbläsaren besöker en webbplats
det informera servern vilken webbläsare du använder
och vilket operativsystem du använder och vilken version av dessa.
Så om du någonsin undrat hur webbplatser som CNN och allt
vet vad de procentsatser är av Mac-användare på nätet, PC-användare,
IE-användare, användare krom och liknande, är det för att alla våra webbläsare
säger varenda webbsida där ute vad vi är.
Det behöver inte nödvändigtvis innehåller personlig information,
men det talar servern vad din IP-adress är och vilken webbläsare och operativsystem du använder.
Så det är där denna information är.
Men vad är mer intressant nu när det gäller dessa sessioner är svarshuvudet.
Låt mig klicka på Visa källa bredvid svar.
Det intressanta här är några saker.
1, vi fick tillbaka en statuskod på 200.
Vi ser aldrig denna statuskod eftersom det betyder allt är bra.
Det betyder bokstavligen okej i motsats till något annat.
Vad är ett nummer vi ibland ser att det är dåligt? [Elev] 404.
404, filen inte hittas, kanske 403 du snavar på redan,
vilket är förbjudet, vilket innebär att du glömde att chmod något, troligen.
Och det finns en massa andra.
>> Här nere är det lite galen.
Jag verkligen bara skrev den här filen för några minuter sedan genom att klistra in den i gedit.
Varför har den här sidan löper ut 1981 innan det verkligen var en webbsida?
Vad händer där?
>> [Ohörbart elev respons] Den tidsstämpel. Men varför?
Det är något godtyckligt, men det är faktiskt bra.
Vad detta säger till min webbläsare är PHP-filen du just begärt redan löpt ut.
I själva verket ut det 30 år sedan.
Men vad betyder det egentligen?
Det betyder bara nästa gång användaren besöker sidan,
antingen genom omlastning eller skriva adressen i adressfältet,
se till att du gå och hämta en ny kopia av den.
Detta är typ av ett exempel på cache busting,
en dum ord som bara innebär att försöka avskräcka webbläsare
från att faktiskt caching HTML som har skickats från en server
så att du inte av misstag slår reload och sedan se samma version av filen.
Du vill verkligen att servern skicka en ny kopia.
Så det faktum att det är 1981 betyder bara att det är vad apparaten är att välja
som en godtycklig tidpunkt i det förflutna.
Men den verkliga saftiga linjen är nu här.
Redan innan 50 du förmodligen vagt bekant med kakor.
Från och med nu, särskilt bland de mindre bekväm eller mittemellan,
Vad är en cookie i din förståelse just nu
även om vi är på väg att göra din förståelse mer teknisk?
Vad är en cookie? Ja.
[Eleven] Information om användaren, som om de har skrivit sitt användarnamn eller något.
>> Bra. Det är information om användaren, oavsett om de har skrivit i sitt användarnamn redan.
Cookies är ett sätt där servrar kan minnas något om en användare.
Och vad en cookie egentligen är en textfil eller någon sekvens av bytes
som är planterad av servern inne i din webbläsare,
och insidan av filen eller bland de byte är någon form av identifierare.
Kanske är det bokstavligen ditt användarnamn, men oftare är det något mer kryptiska utseende
som denna sak här - bo8dal3ct och så vidare - det riktigt stora alfanumerisk sträng
som verkligen är bara tänkt att vara en unik identifierare för dig.
Eller så kan du se det som en slags virtuell handen stämpel.
Om du går till en viss klubb eller en nöjespark, att komma ihåg att du faktiskt har betalat
och gått in, sätter de en liten röd klistermärke på din hand av något slag,
och som påminner människorna vid disken som du redan har betalat
och du kan komma och gå som du vill.
Cookies är lite liknande anda som.
Första gången jag besökte denna webbplats, eftersom jag bara gjorde efter rensa min cache,
webbservern, apparaten i detta fall sätta en stämpel på handen
vars namn PHPSESSID, sessions-ID,
vars värde är detta verkligen lång alfanumerisk sträng.
>> Så det är nu sortens tryckt på min hand, så att nästa gång jag slog ladda
eller manuellt besöka denna URL i en webbläsare,
min webbläsare per definition av HTTP kommer att presentera handen stämpeln
igen och igen och igen.
Så även om servern inte vet nödvändigtvis vem jag är,
de åtminstone veta att jag är samma användare, eller åtminstone närmare bestämt samma webbläsare.
Och så detta är ytterst hur SESSION superglobal genomförs.
Servern har ingen aning om vem du är när du besöker en webbplats för andra eller tredje gången
om du presenterar denna hand stämpel.
Och så fort du presenterar den handen stämpel,
webbservern går i huvudsak till en liten databas över sin egen
och kontroller, okej, jag har sett bara hand stämpel användarens bo8dal3ct och så vidare.
Låt mig se vilken information programmeraren har lagrat
insidan av superglobal om den här användaren,
och låt mig se till att dessa uppgifter är återigen inne i SESSION superglobal
så att programmerare kan åter komma åt dessa data
även om den var inställd några minuter eller timmar sedan.
Så med andra ord, cookies, vilket fick en dålig rap under en tid
på grund av osäkerhet i webbläsare och de kan verkligen kränka vår integritet och allt detta,
de faktiskt har stor nytta för utan dem
skulle du ständigt att logga in på alla Facebook-sida du besöker
eller varje Gmail e-post du läser om webbläsaren inte har något sätt att komma ihåg
att du redan har verifierats.
>> Så på detta sätt cookies skickas fram och tillbaka tvärs över viran.
En annan kuriositet om cookies, speciellt här är att det är helt i klartext.
Det finns ingen kryptering pågår här som helst,
och faktiskt jag använder HTTP för tillfället.
En av våra favoriter ögonblick i CS50, som nu 2 år sedan,
var runt tiden ett verktyg som heter Firesheep kom ut.
Detta var en fri mjukvara som gjordes av en säkerhet forskare
som väckarklocka för samhället att säga hur vedervärdigt genomförts
vissa autentiseringsmekanismer på webben var.
Så för en tid, var Facebook nästan helt över HTTP, ingen HTTPS.
Och även om du har ingen aning om hur krypto fungerar, S säkert
så det betyder att det finns åtminstone någon kryptering.
Facebook har används för att kryptera användarnamn och lösenord,
men så snart du tittat på din petar eller dina meddelanden eller ditt nyhetsflöde,
allt som var okrypterat.
Så var Gmail tills bara ett år eller 2 sedan.
Varje gång du inloggad, ja, de använde säker kryptering
men därefter gjorde de inte. Och varför skulle det vara?
Varför inte bara använda kryptografi hela tiden i användningsfall som detta?
Vad är det? Jag tror att jag hörde något. [Elev] Hastighet.
Hastighet, eller hur? Det finns vägar runt detta.
Men om du bara typ av tänka på det logiskt, om du krypterar något,
du måste göra åtminstone lite mer arbete.
I pset 2 när du genomfört Caesar eller Vigenère eller ens knäcka,
bara skriva ut en sträng är relativt lätt.
Kryptera och sedan skriva ut en sträng minimalt kräver lite mer arbete.
>> För super populära webbplatser som Google och Facebook,
Om du måste göra mer arbete för varje användare för varje enskild webbsida de besöker,
som tar bara mer CPU-tid.
Och om du behöver mer CPU-tid, kanske du behöver fler servrar,
vilket innebär att du kanske behöver mer pengar.
Och så i många år detta bara verkligen inte de bästa metoderna.
Folk skulle använda SSL-kryptering endast när de behövde.
Men det visade sig, och som den här mannen med Firesheep gjorde Super Clear,
när ni som för närvarande på Facebook just nu -
Av nyfikenhet, låt oss se om du fess upp.
Om du är på Facebook just nu i någon flik, även om det inte är förgrunden,
är din webbadress HTTP eller HTTPS?
[Flera studenter] S. S? [Skratt]
Okej. Någon HTTP? Bara 1? Okej.
Så vi alla kan hacka den killen Facebook-konto just nu.
För det mesta har detta blivit aktiverad som standard, åtminstone i vissa webbplatser.
Och lång historia kort, om din webbtrafik är inte krypterad,
inte bara går HTML fram och tillbaka över WiFis okrypterade,
så gå saker som kakor och tillbaka hela luften
utan någon form av kryptering.
Så om du har bara lite programmering kunniga eller lite googla kunskaper
att hitta gratis programvara som gör detta, är att sitta allt du behöver göra i Starbucks
eller sitta på en flygplats där det finns generellt okrypterade WiFi
och bara titta på för sökord som Set-Cookie: eller PHPSESSID
för om du har den tekniska kunniga att bara titta på WiFi
för alla de bitar som flödet genom luften för detta mönster,
Du kan då säga att killen PHPSESSID råkar vara bo8dal och så vidare.
Och sedan igen om du är tillräckligt tekniskt kunniga eller har rätt verktyg,
Du kan sedan bara konfigurera din egen webbläsare för att börja presentera den handen stämpel
att Facebook.com och Facebook är bara kommer att anta att du är den där killen
eftersom alla de vet inte vem du är, men att du har denna unika identifierare.
Så om du stjäl den unika identifieraren och presentera den till webbservern som din egen,
de bara kommer att visa dig den personens nyhetsflöde
eller den personens meddelanden eller petar.
>> Och jag skulle Google nu hur man aktiverar HTTPS för Facebook kanske.
Men det är verkligen så enkelt är det.
Och så Facebook och Google och liknande har fått riktigt bra på detta,
men håll utkik allt mer för alla webbplatser du besöker som inte använder HTTP
och har någon form av känslig information på dem,
oavsett om det är ekonomiska eller personliga eller liknande.
Om de inte använder detta, kan mycket möjligt cookies som denna är mycket lätt stulna
och sedan smidda, och det är precis vad Firesheep gjorde.
Du behövde inte vara en programmerare.
Allt du behövde göra var att ha en Internet-anslutning, ladda ner denna gratis verktyg,
och vad det skulle göra är att du loggar in och sedan skulle visa dig Facebook namnen
av alla i Sanders, i detta demonstration omkring dig
och allt du hade att göra var klicka på deras namn och mjukvaran automatiserat processen
av sniffning som cookie presentera det på Facebook som din egen,
och voila, du loggat in
Så det här är en annan av de "gör inte detta" officiellt.
Om du har en egen hemnätverk och du vill att mixtra, med alla medel,
men inser att detta inte passera linjen på en universitetsmiljö.
>> Men målet här är verkligen betona inte hur man gör detta
men hur det ska skydda mot dessa typer av saker.
Och den triviala lösningen här, även om det i sig är bristfällig,
är att verkligen minska användningen av webbplatser som inte använder HTTPS ständigt.
Så som Facebook och Google har allt kryssrutor
där du kan välja att den här sortens saker,
och bankerna har haft detta i flera år av liknande skäl.
Så bara en liten bit av en rädsla faktor om vi kan. Men det är det i ett nötskal.
Det är så en server minns vem du är.
Och så snart de kan komma ihåg vem du är, kan de komma ihåg någonting om dig
att programmeraren har lagrat inuti denna speciella superglobal kallas $ _SESSION.
Och för pset 7 vi använder det trivialt bara komma ihåg en int,
nämligen ett unikt ID för den användare som har loggat in,
så att vi vet att de har varit där förut.
Har du frågor så om sessioner eller cookies eller liknande?
Firesheep fungerar inte lika bra längre,
och du måste sätta din dator till en speciell promiskuöst läge
så att du faktiskt lyssnar efter trafik förutom själva.
Så om du nu ladda ner Firesheep, inser att det är inte riktigt så enkelt
som det en gång var att visa.
Okej. Och gör det inte i Sanders. Gör det hemma.
Databaser.
En av de saker som vi gjorde i pset 7 mycket medvetet
var vi ge dig en tabell exempeldatabas för användare som har vissa användarnamn,
Vissa användarnamn och vissa krypterade lösenord däri.
Och som du ser, om du inte redan har, du kommer att behöva ändra tabellen lite.
Du kommer att behöva lägga till några cache för varje användare i den tabellen,
och du kommer att behöva lägga en annan historia bord, en portföljer bord,
eller kanske kalla det något annat.
Men när det gäller att tänka på hur man gör detta, låt oss öppna detta verktyg
som vi på fredag, men om främmande kommer apparaten med ett verktyg
kallas phpMyAdmin som tillfälligtvis är skriven i PHP,
men dess syfte i livet, när jag loggar in här som jharvard med crimson,
är att ge mig ett användarvänligt sätt att se och ändra min databas.
>> Den databas som jag kör på apparaten heter MySQL.
Detta är mycket populär, och det är ett gratis open source databas som är underbart lätt att använda,
särskilt med främre ändar så här.
Vad detta verktyg tillåter mig att göra, till exempel, är säcken runt borden.
Låt mig gå vidare och göra det.
På fredag ​​har vi skapat en tabell som heter studenter som var super enkelt.
Det hade 3 kolumner - ID, namn och e-post - och jag manuellt in ett par rader
som David och Mike i detta speciella exempel.
Låt oss ta detta lite längre, och låt oss anta att vi vill minnas mer
än bara namn och e-post om en användare.
Låt mig klicka Struktur upp här på toppen.
Och återigen, promenader pset dig genom de nödvändiga stegen här,
så oroa dig inte om en del av detta är lite snabbt.
Sen ska jag klicka här.
Jag ska lägga till några antal kolumner efter e-post
eftersom jag vill lägga till något i stil med huset.
Jag glömde att spela in en student hus.
Låt mig klicka på Go, och nu har vi denna form som tyvärr är lite bred från vänster till höger,
men jag ska ringa namnet på detta fält hus,
och sedan typ jag har nu att välja.
Så låt oss ta en kort pratstund om de olika typerna i MySQL
eftersom medan PHP är svagt skrivit och det slags spelar snabbt och lös med typer,
i en databas, särskilt det är super viktigt att faktiskt använda skriva till din fördel
eftersom en av de saker som MySQL och andra motorer databas kan göra för dig
är att se till att du inte lägger falska data i din databas.
Detta är en slags fri felkontroll tillgängliga för dig.
>> För hus vi självklart inte vill att det ska vara en int som är en 32-bitars värde i MySQL.
Vi talade kort på fredag ​​om varchar, som står för variabel längd röding.
Vad är det här? Detta gör att du kan ange att du vill att detta ska vara en sträng av något slag.
Du vet inte riktigt i förväg hur lång tid det är,
så vi godtyckligt säga ett hus namn kan vara 255 tecken,
men du kan gå med 32, 64 - valfritt antal verkligen.
Men fördelen med att använda en varchar över ett fält som heter röding är vad?
Bara intuitivt om jag bläddra ner hit, märker att det finns röding och det finns varchar.
Varchar är variabel längd char, char är en fast längd röding.
Så baseras enbart på den definitionen, är vad fördel eller nackdel för vart och ett av dessa?
Med andra ord, vem bryr sig om skillnaden, eller varför ska du bry dig?
>> Ja. [Elev] Varchar har mer flexibilitet men tar upp mer minne.
Bra. Varchar tar upp mer - Låt oss se. Jag är inte säker på om jag hörde det rätt.
Kan du säga det en gång till?
[Elev] Jag sa varchar förmodligen har mer flexibilitet, men det tar upp mer minne.
Intressant. Okej. Varchar ger förmodligen dig mer flexibilitet, men tar upp mer minne.
Det senare är inte nödvändigtvis sant.
Det beror på sammanhanget, men låt oss återkomma till detta.
>> [Ohörbart elev svar] Exakt.
Det är faktiskt så att röding normalt kommer att använda mer minne
eftersom en röding, som i C, är som en sträng, det är en rad tecken.
Så om du säger en röding fält av längd 255,
databasen bokstavligen kommer att ge dig 255 tecken.
Och om huset hamnar är Mather och 6 tecken totalt,
du slösar över 200 tecken.
>> Så en varchar effektivt använder endast så många tecken som behövs
upp till ett maximalt belopp.
Men priset du betalar är faktiskt prestanda, potentiellt.
Om du vet i förväg att alla dina strängar kommer att vara 8 tecken -
till exempel, anta att du behöver lösenord av längd 8 -
Fördelen med att använda en röding fält ibland, men inte ofta,
är att ange en fast längd för något som ett lösenord
för nu databasen kan vara ännu smartare.
Om den vet att varje röding fält, är varje sträng i en kolonn på samma längd,
du får tillbaka funktionen av random access.
Du kan hoppa runt mellan de olika röding fält i databasen tabellen
eftersom tänka på en databas som rader och kolumner.
Så om var och en av strängarna har samma längd,
du vet att den första är vid byte 0, är ​​nästa en vid byte 8
och därefter 16 och därefter 24 och så vidare.
Så om alla strängarna är av samma längd, kan du hoppa runt mycket mer effektivt.
Så det kan vara en fördel när det gäller prestanda,
men oftast behöver du inte lyxen att veta i förväg,
så en varchar är vägen att gå.
Här är en annan detalj som även Facebook sprang in så småningom.
Ints är stor, och vi typ av använda dem som standard varje gång vi vill ha ett nummer,
men det är bara 32 bitar.
>> Och även om Facebook inte riktigt har 4 miljarder användare nu,
Det finns definitivt en del människor där ute med flera konton
eller konton som öppnats och sedan stängts,
och så Facebook själv tror jag för några år sedan hade övergången från int
att, som träffande kallas, bigint, som ligger bara 64 bitar i stället.
Så detta är för en design beslut.
Du skulle vara otroligt lycklig om din slutliga projektet blir start,
har ger 4 miljarder och 1 användare, eller ta,
i vilket fall med Ints kan vara lite kortsiktigt.
Men i verkligheten är dina användare tabellen förmodligen bra med Ints.
Men för något som pset 7, liksom din historia tabellen,
du kan ha tusentals, miljontals användare om du utvecklas till etrade.com.
Så medan du kanske inte har mer än 4 miljarder användare,
de användare du har kan ha mer än 4 miljarder transaktioner över tiden -
köper och säljer och saker i deras historia.
Så om du räknar med - igen, det är bra problem att ha om du har så mycket information -
om du räknar data som överstiger storleken på en int,
gå med något som bigint är en riktning som inte tillräckligt ofta antagits av formgivare
eftersom människor siffra som inte kommer att vara ett problem,
men det är det lätt att välja något större än så.
Decimal vi använder i pset 7, som anger fasta precision
så att du kan undvika de problem som rör flöten och dubblar och reals och liknande.
>> Och sedan finns en del andra områden här. Vi ska vifta våra händer på dem i viss utsträckning.
Men datum, tider har alla en föreskriven form i MySQL,
och fördelen med att lagra datum som datum och inte varchars
innebär att databasen kan faktiskt formatera dem i olika format,
om en amerikansk format eller europeiskt format eller liknande - men du vill ha den -
mycket mer effektivt än om det var bara några generiska varchar.
Och sedan finns någon annan binär, varbinary, blobbar.
Dessa är binära stora objekt, och du kan även lagra binära data
liksom geometriska data i en databas.
Men för oss kommer vi vanligtvis bryr oss om Ints och varchars och liknande.
Låt oss avsluta det här exemplet med huset.
Hus ska jag godtyckligt säga att vara 255 tecken.
Sedan standardvärde vi kunde göra detta.
Vi kunde som standard sätta alla i Mather House, till exempel.
Det är så vi kan ange att databasen
bör se till att någon alltid har ett värde. Men jag lämnar det vara.
Faktum är att för människor som lever utanför campus och inte i ett hus,
kanske jag vill verkligen att specificera att standardvärdet för huset är NULL,
och då måste jag markera rutan och berätta databasen är det okej om användarens huset är NULL.
>> Återigen, detta är en annan försvarsmekanism kan införa
så du behöver inte ens lägga den i din PHP-kod nödvändigtvis.
Databasen kommer att se till att saker och ting är eller inte är NULL.
Och sedan slutligen attribut.
Ingen av dessa är riktigt relevanta.
Binary, osignerad - ingen av dem är relevanta för en varchar.
Index.
Vet någon eller komma ihåg eller har en gissning om vad ett index är
för något som huset?
Detta är också faktiskt en viktig och relativt lätt konstruktion beslut.
För dem som ännu inte sett den, på fredag ​​vi pratade kort om primärnycklar.
I en databastabell, är en primärnyckel fältet eller kolumnen
som identifierar rader i tabellen.
Så i den aktuella tabellen har vi ID, vi har namn och e-post.
Vilken av dessa är den bästa kandidaten för att vara en primärnyckel,
vars uppgift är att identifiera rader?
Förmodligen ID.
Förmodligen skulle vi kunna använda också vad då?
Kanske kan du använda e-post på grund i teorin är det unikt
såvida personer delar e-postkonton.
Men verkligheten är att om du använder ett numeriskt ID som 1234,
det är bara 32 bitar, medan en e-postadress kan vara så många byte eller här många byte.
Så när det gäller effektivitet för unika identifierare,
det brukar vara god praxis att bara använda en int
även om du har någon sträng kandidat som du kan hävdas använda.
>> För något som huset bör detta inte vara en primärnyckel
för då bara 1 person kunde leva i Mather och 1 person i Currier och liknande.
På samma sätt bör det inte vara unik.
Skillnaden mellan primär och unikt är att i fallet med vår nuvarande bord,
ID skulle vara primär men e-post är inte primärt av den anledningen som vi just nämnde -
prestanda - men det bör ändå vara unikt.
Så du kan fortfarande upprätthålla unika utan att göra anspråk
att det är en super betydelsefullt område.
Men den här är ganska bra: Index.
Om du vet på förhand för din sista projekt, pset 7, eller i allmänhet,
att detta fält huset kommer att vara något du söker på en hel
med SELECT sökord eller något annat,
då kan du förebyggande syfte tala om databasen för att arbeta sin magi
och se till att det skapar i minnet någon fancy datastrukturer behövs
att påskynda sökningar baserade på huset.
Kanske kommer det att använda en hash-tabell, kanske det kommer att använda en länkad lista.
I verkligheten, det tenderar att använda ett träd, som kallas ofta en struktur en B-träd -
inte ett binärt träd, men en B-träd - som är ett mycket brett träd
som du kan se i en klass som CS124, data strukturer klassen.
Men kort sagt, behöver du inte oroa dig för att när du använder smarta databasprogram.
Du kan bara säga det, "Index detta fält så att jag kan söka på det mer effektivt."
>> Om du lämnar ut och du försöker söka efter alla i databasen som bor i Mather,
kommer det att överlåta till en linjär sökning.
Och om du har 6.000 undergrads alla lever i vissa hus,
du kommer att söka igenom hela tabellen för att hitta Matherites,
medan om du säger Index, förhoppningsvis blir det något som liknar en logaritmisk sökning
att hitta dessa typer av studenter.
Detta är bara en fri funktion för att aktivera,
även om det kommer till ett pris av en viss mängd utrymme.
Slutligen automatisk ökning, detta AI område,
vilket betyder bara om det är en int och du inte vill bry att öka det själv
varje gång det finns en ny användare, kontrollera att,
och varje användare som får in kommer automatiskt att få ett nytt ID.
Låt oss klicka på Spara och nu ska vi hitta fel med denna design.
Om jag går in Bläddra, att bägge Mike och mitt hus är NULL.
Jag kan använda phpMyAdmin för att redigera det manuellt.
Jag kan gå in här och skriv in Mather och sedan trycka Enter,
och nu märker bordet är olika.
Men märker jag kunde göra något annat också.
Davids ID är 1, så phpMyAdmin igen är bara ett administrativt verktyg;
detta är inte något dina användare någonsin kommer att se.
Så om jag klickar i stället SQL fliken uppe -
och igen, kommer pset 7 introducera dig till flera av dessa frågor -
Jag kan manuellt köra SQL strukturerade kommandot Query Language
UPPDATERING användare SET hus = 'Pfoho' där id = 1.
Dessa SQL-frågor är fint nog, ganska läsbar från vänster till höger.
Uppdatera användare tabellen, ställ in område som kallas huset till Pfoho
där användarens ID är 1.
Eller jag kan även göra där e = 'malan@harvard.edu ".
Så länge som identifierar mig, skulle det fungera lika bra.
Men id tenderar att vara högre prestanda, så låt oss göra det.
Låt oss klicka på Gå. Okej, existerar lecture.users inte. Vad är mitt fel?
Vad är bordet egentligen kallas här?
Det kallas studenter bara för att det är vad vi gjorde upp här uppe till vänster.
Det kallas studenter, inte användare. Så på Gå nu.
1 rad påverkas. Fråga tog 0,01 sekunder.
Om jag klickar på Bläddra nu, nu Malan liv i Pfoho.
Så det är en annan smak av SQL, men pset kommer att gå igenom lite mer av det.
>> Det finns en dum beslut jag har redan gjort här.
Jag skulle vilja påstå att denna databas design är ineffektiv
eftersom ju fler människor jag lägger till studenter tabellen,
ju fler vi börjar jag lägga till, desto mer av TF jag börjar lägga,
vi kommer att börja se vad Uppsägningar i tabellen?
>> Ja. [Elev] Ser att det är i studenter, vi använder samma [ohörbart]
Samma - Just det, precis.
Så om 400 personer bor i Mather, ge eller ta,
småningom denna tabell kommer att få 400 rader som säger "Mather", "Mather,"
"Mather", "Mather", "Mather."
Vi slösar alla dessa bytes, och det finns ett par takeaways där.
1, finns det galna hörnet fall om någon betalar en massa pengar
och döper Mather, har vi nu ändra hela vår databastabell.
Det kommer inte att hända ofta, men Pfoho kallades en gång North House 15 år sedan,
så händer. Men det är inte alla som övertygande.
Mer övertygande än en hörna fall likt att behöva uppdatera data i bulk
för en databas varför du lagrar Mather igen och igen och igen och igen?
Det är en hel del tecken, 6 tecken.
Kan vi inte göra ännu bättre än så, speciellt för Pforzheimer?
Visst kan vi göra bättre än så många tecken.
Varför inte bara associera en unik identifierare för varje hus
och butik som för varje användare? Så låt oss prova det här.
Snarare än att bara använda studenter tabellen, låt mig gå upp till min föreläsning databas upp här uppe till vänster.
Observera Här står Skapa tabell.
Låt mig skapa en ny tabell som heter hus.
Antalet kolumner kommer att bli 2. Enter.
Nu har jag 2 fält.
Jag ska kalla detta namn, och det kommer att bli en varchar av längd 255,
>> men det är ganska godtycklig. Låt mig sätta detta här nere i konventionen.
Så satte ett ID här. Låt oss ge varje hus en unik identifierare.
Låt oss ge varje hus ett namn.
Låt oss klargöra att identifieraren ska osignerad bara genom konventionen att endast använda positiva tal.
Låt oss gå vidare och ge det en auto-steg fältet för nu.
Och behöver vi något annat?
Låt oss gå vidare och klicka på Spara.
Nu har jag en andra tabellen.
Kallelse som bortsett detta är något kryptiska SQL-kommando
som du skulle ha haft att skriva in manuellt om du inte använder ett administrativt verktyg som phpMyAdmin.
Så en annan anledning som vi använder den.
Det är underbart bra sorts pedagogiskt eftersom du kan klicka runt
och räkna ut hur saker och ting fungerar genom att bara kopiera och klistra in vad phpMyAdmin gjorde.
Men CREATE TABLE kommandot vad som just avrättades, och här är mitt bord.
Låt mig gå vidare nu och använda rå SQL istället förenklingarna genom att klicka på fliken Infoga.
Låt mig inte in i hus,
och jag ska säga namnet på huset kommer att ha ett värde på "Mather".
Det var allt. Den här syntaxen är lite mer kryptisk.
Detta är namnet på de fält som vi vill infoga.
Dessa är de värden vi vill infoga i dessa områden. Låt mig klicka på Gå.
1 rad infogas tog 0,02 sekunder. Låt mig klicka på Bläddra nu.
>> Märka om jag klickar på Bläddra, det finns Mather, vars ID är genom automatisering numret 1.
Låt mig göra en annan. Låt mig gå in i SQL-fliken.
INSERT INTO hus. Namnet på huset kommer att ha ett värde av Pfoho och så vidare.
Go. Och jag kan fortsätta att göra det igen och igen och igen.
Eller om du får uttråkad med phpMyAdmin kan du bara fliken Infoga
och inte behöva skriva den råa SQL.
Du kan bara bang ut snabbare genom att skriva till exempel Currier, Enter,
och nu när vi klickar på Bläddra, det finns Currier med ID 3.
Så detta är vad vi menar med automatisk ökning.
Men nu måste vi fixa något i studenter.
I studenter vad ska datatypen i huset fältet vara nu?
Det bör vara en int, eller hur?
Så målet här är att faktor ut, annars känd som normalisera, tabellerna
så att vi lagrar inte uppgifter redundant i någon av mina tabeller.
Och återigen är den väg vi var på här kommer att säga Mather, Mather,
Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, som är mycket överflödig
i termer av slöseri av tecken.
Så låt mig gå vidare och ändra detta genom att klicka på Struktur,
och låt mig gå vidare och kolla upp huset fältet klickar du på Ändra,
och nu ska jag ändra detta för att vara en int.
255 är inte längre relevant.
Låt mig gå vidare och säga att det är bra om det fortfarande NULL. Spara.
Nu tabell studenter har förändrats framgångsrikt,
och märker igen huset är en int.
Som en parentes, ignorera siffran inom parentes när det gäller vare sin.
>> Detta är för äldre skäl.
Tillbaka i dag när du inte har GUI, hade du istället en miljö kommandorad,
de 10 respektive 11 specificerade hur många tecken du bör visa
i terminalfönstret att faktiskt visa fält.
Det har ingenting att göra med bitlängden av den faktiska fältet, så vi bara ignorera det för nu.
Nu måste jag gå in i denna tabell.
Och om David bor i Mather, bör huset vara 0,
vilket är en standard int värdet närmast NULL.
Han ska bo i huset 1.
Låt oss säga godtyckligt att Mike bor i Pfoho, så hus nummer 2.
Nu mitt bord ser lite mer kryptisk.
Men anser effektiviteten.
Jag använder nu bara 32 bitar för att identifiera huset,
vilket innebär att det bara finns 1 kanoniska definition av mitt hus Mather och Pfoho
och det är i husen tabellen.
Så om jag vill nu återförenas dessa tabeller, tänk på det här sättet.
Här har jag mina elever bord, och på den högra sidan finns dessa nummer, 1 och 2.
1 är Mather, är 2 Pfoho.
Vi har samma nummer i denna andra tabellen, som kallas hus,
1 och 2 och 3 för de 3 hus.
Vad vi nu vill göra är att ha sådan förmåga i koden, PHP och SQL,
att sortera om återförenas dessa tabeller där om dessa är studenter och dessa är husen,
Vi vill på något sätt kombinera dem så att 1 rader med 1,
2 rader upp med 2, och så att vi kan räkna ut var David
och där Mike och där alla andra lever.
För att göra detta kan vi köra en SQL-fråga som följande.
SELECT * FROM studenter JOIN hus på -
Och nu vilka områden vi vill gå på?
Så students.house = houses.id.
>> Lite kryptisk, men denna del innebär att skapa bokstavligen en ny temporär tabell
Det är resultatet av att gå studenter och hus.
Och hur du vill kombinera tips av mina fingrar här?
Ställ studenternas hus fältet motsvarar husen "ID-fältet.
Och om jag nu klicka på Go, får jag tillbaka exakt vad jag hoppades.
David är i Mather, Mike i Pfoho, och jag ser också de unika identifierare.
Men poängen är nu har jag en komplett tabell.
Och så takeaway här pset 7 eller verkligen för den slutliga projektet:
Om du upptäcker att du lagrar all upplysning redundant,
oavsett om det är ett hus, kanske det är en stad, stat, och ZIP
där ZIP kan oftast men inte alltid användas som en unik identifierare,
går igenom övningen mentalt och sedan med något liknande phpMyAdmin
av factoring påpekar att gemensamma data eftersom särskilt som din webbplats får mer väl används
och mer populära, det är hur du ser till att allt är supersnabb,
genom att ge databasen så många tips om unika som möjligt.
Det var en hel del.
Några frågor? Okej. Låt oss ta en 5-minuters paus där och omgruppera.
Okej.
Följande är ett exempel som användes för några år sedan när jag tog CS161,
som är den operativsystem klassen på skolan
som är känd för att vara fantastisk men en galen mängd arbete,
och fokuserar verkligen på några av de låg nivå problem som uppstår i operativsystem
och även med i en värld av databaser.
>> Den historia som berättades av min professor, Margo Seltzer, det året var följande.
Anta att du har en liten sovsal kylskåp för dig och din rumskompis
och ni båda gillar verkligen mjölk.
Så du kommer hem från klass en dag, är din rumskompis som ännu inte finns,
du öppnar kylskåpet, och du inser, "Åh fan, vi är ur mjölk."
Så du stänger kylskåpet, går du över gatan till CVS
och få i de allt långa rader för att köpa lite mjölk i CVS.
Samtidigt kommer din rumskompis hem från sin klass,
kommer in i rummet, öppnar kylskåpet verkligen vilja lite mjölk,
öppnar kylskåpet och, "Fan, ingen mjölk."
Så att han eller hon stänger kylskåpet, går ut genom dörren, och går till Abp
eller någon annanstans än CVS där du inte kommer att stöta på varandra
att hämta lite mjölk.
Naturligtvis några minuter senare, ni båda kommer hem
och nu har du dubbelt så mycket mjölk som du egentligen ville.
Och att vara mjölk, nu det kommer att gå illa för att du gillar mjölk
men du inte gillar mjölk, så nu har du för mycket mjölk, så det kommer att sura.
Detta är en fruktansvärt, fruktansvärt läge.
Vad kunde ha löst detta predikament om du var den första rumskompis hem? Ja.
[Eleven] Du bör ha lämnat en anteckning. [Skratt]
Bra. Du borde ha lämnat en anteckning.
Du borde ha satt en post it-lapp eller liknande att säga: "Gått för mjölk,"
och sedan din rumskompis begreppsmässigt skulle ha utelåst från att faktiskt göra det.
Eller så kan du gå 1 steg längre.
Du kan bokstavligen låsa kylskåpet med någon form av hänglås,
och nu din rumskompis kommer bokstavligen att utelåst från kylskåpet.
Om vi ​​generaliserar tillbaka till programmering,
Du kan nästan tänka kylskåpet som någon slags variabel eller en struct,
någon form av behållare för information.
Problemet i grunden här är att ni båda fick inspektera
eller läsa tillståndet hos denna datastruktur,
men du såg det vid olika tillfällen och ändå ni båda fattat ett beslut
baserat på tillståndet i världen vid de olika tidpunkter.
Så hade du låst kylskåpet, skulle du ha minst undvikit din rumskompis
från att ha kunnat inspektera tillståndet i världen,
så att han eller hon inte kunde ha gjort samma beslut.
Så databaser, som det visar sig, har detta problem hela tiden.
>> Låt oss se om vi kan bygga ett scenario.
Anta att du är typ av en dålig kille och du går till Bank of America
eller en av de andra platserna på torget som har ett par uttagsautomater sida vid sida,
och på något sätt du listat ut hur man duplicera en ATM-kort - inte så svårt.
Det är bara en magnetremsa.
Och så vad du vill försöka göra är att spela det här spelet
där du sätter 1 kort i 1 maskin, ett annat kort i den andra maskinen,
och du vill i huvudsak att försöka ta ut pengar samtidigt,
eftersom föreställa sig historien är som följer.
Maskinen till vänster tar ditt kort och din PIN-kod,
och då säger du: "Ge mig $ 100."
ATM är programmerad att först göra en utvald sin databas eller motsvarande -
vilken databas det med - att se har den här användaren minst $ 100 i hans eller hennes konto?
Om så är fallet, sedan spotta ut $ 100 och subtrahera $ 100 från sin balans.
Men naturligtvis om det finns flera maskiner här eller flera sätt för kontroll av
tillstånd att världen, bankvalv, för att se hur mycket pengar du har,
anta att bara av en slump maskinen på vänster och höger
båda frågar den frågan vid ungefär samma tidpunkt.
>> Och detta kan säkert hända. Uttagsautomater finns datorer i dessa dagar.
Så om maskinen till vänster säger: "Ja, du har minst $ 100,"
under tiden maskinen på rätt säger: "Ja, du har minst $ 100,"
då båda går att avsluta sina program och faktiskt spotta ut $ 100
och säga: "Tidigare du hade $ 200."
"Låt mig uppdatera variabeln nu $ 100 kvar på kontot."
Men om båda har kontrollerat ditt konto och funnit att det är $ 200
och båda gör då matten och säga 200 till 100,
maskinerna har spotta potentiellt ut två $ 100 räkningar i varje maskin,
men de har bara uppdaterat ditt saldo summa konto för att $ 100.
Med andra ord har du tagit ut $ 200, men eftersom de inspekterade tillståndet i världen
samtidigt och sedan gjort ett beslut baserat på detta värde,
de kanske inte göra matten slutändan korrekt.
Så i en bank situation också du verkligen vill ha någon form av lockout
så att så fort du har markerat tillstånd viss variabel
Det är verkligen viktigt, liksom ditt kontosaldo,
inte låta någon annan fatta beslut baserat på det tills du är klar gör din grej,
där i det här fallet är du ATM till vänster.
Lås alla andra ute.
Du kan faktiskt uppnå denna effekt i ett par olika sätt.
>> Det enklaste sättet i MySQL är en linje av SQL som vi gav dig
i problemet inställda specifikationen som ser exakt ut så här.
Infoga i tabellen - vad det heter - ett id, en symbol, och en andel, ett antal aktier,
följande värden, till exempel.
Om du inte har läst spec ännu, är detta ett exempel där hur du går om
köpa 10 aktier i denna öre lager för president Skroob,
vars användar-ID råkar vara nummer 7?
Detta säger INSERT INTO tabell följande id, symbol och antal aktier
av 7, "DVN.V" och 10.
Men - men, men, men - den andra raden är den viktigaste.
PÅ dubbla nyckel UPDATE aktier = aktier + VÄRDEN (aktier).
Så totalt kryptiska-looking vid första anblicken.
Men det faktum att denna SQL-fråga, även om det sveper in 2 rader,
är 1 lång fråga, betyder det att det är atomär
i den meningen att denna fråga antingen köras tillsammans eller inte alls.
Och per definition av MySQL, det är hur de genomfört denna fråga.
Det är genom definition i handboken garanterade att utföra alla på en gång eller inte alls.
Motiveringen för detta är som följer.
Om i detta fall försöker köpa 10 aktier i lager,
det är typ av samma historia som mjölken, det är lite av samma historia som ATM.
>> Om du gör misstaget att använda inte denna syntax
utan väljer från databasen för att se hur många aktier av detta öre lager
har president Skroob och antar att han har 10 aktier,
och lite bråkdels sekund senare du då en UPDATE uttalande,
vilket är ett annat uttalande i SQL som säger gå vidare och lägga 10 fler aktier
till sin nuvarande 10 så att idealt den sammanlagda summan är 20,
problemet är att i dagens databassystem och eftersom dagens datorer
du har flera processorer, flera kärnor -
Med andra ord kan datorer bokstavligen göra flera saker samtidigt -
det finns ingen garanti för att din SELECT och din uppdatering i det här fallet
kommer att hända rygg mot rygg.
Så en dålig scenario skulle vara du göra SELECT
för att se hur många aktier av detta öre lager behöver Skroob har,
och sedan bara av en slump en annan databas fråga utförs -
kanske dess Skroob i ett annat webbläsarfönster försöker köpa 10 aktier
i ett annat fönster helt, ungefär som ATM -
och antar att en annan fråga får i mellan SELECT och UPDATE.
Det kan vara så att Skroob nu förlorar ett visst antal aktier
eftersom en annan process inspektera tillståndet i hans värld,
eller han får fler aktier än han borde ha.
Vi kommer inte att gå in uppgifter om exakt vad dessa särskilda repliker skulle vara,
men poängen är om du måste kontrollera en variablerna värde och sedan fatta ett beslut,
om det finns en risk för att någon annan gör något i mellan dessa 2 påståenden,
som kan hända i multiprocessorsystem i flerkärniga system,
datorer med möjlighet att göra flera saker samtidigt, kan dåliga saker hända
som bankkonton som debiteras felaktigt köpa dubbelt så mycket mjölk,
eller i detta fall fel antal aktier.
Men det finns ett enklare sätt att tänka på detta.
>> Det visar sig att SQL stöder också, om du konfigurerar din tabell rätt,
något som kallas transaktioner, som jag skulle vilja påstå är faktiskt ännu enklare att förstå
än detta, men det är inte en 1-liner, så det är faktiskt lite mer delaktiga.
Det är bokstavligen ett uttalande i SQL heter START TRANSAKTION.
Precis som det finns SELECT, UPDATE, INSERT, DELETE och JOIN och ett gäng andra,
Det finns sökord som START TRANSAKTION.
Och vad du gör då i samband med pset 7 -
du behöver inte göra det för pset 7, det är uttryckligen disclaimed som inte är nödvändigt,
men för slutliga projekt kan det vara användbart -
om du ringer en fråga av START TRANSAKTION och sedan en annan fråga
och sedan en annan fråga och sedan en annan, en annan, och en annan,
dessa frågor kommer faktiskt inte att utföras förrän du kallar SQL COMMIT,
vid vilken punkt, oavsett om det är 2 uttalanden eller 20 uttalanden, kommer de alla att utföras på en gång,
vilket innebär att ingen annan av misstag kan köpa för mycket mjölk eller betalkort för mycket pengar
eller köpa för många aktier eftersom alla dina frågor kommer att utföra
rygg mot rygg mot rygg mot rygg.
Och detta är super viktigt, speciellt när du gör något sånt här.
Detta är en godtycklig exempel som säger låt oss uppdatera bankkonto
genom att sätta en balans motsvarande saldo - $ 1000 där kontonumret är 2.
Och sedan den andra satsen Låt oss nu göra motsvarande $ 1000
i någon annans bankkonto vars kontonummer är 1.
>> Med andra ord är detta ett perfekt exempel på där du vill vara säker på
att båda dessa påståenden hända eller inte alls
annars att kunden kommer att få skruvas
och du kommer att ta deras pengar och inte sätta den någon annanstans,
eller banken kommer att få skruvas där du kommer att sätta in pengar
men faktiskt inte subtrahera det från användarens konto.
Så du vill båda att utföra tillsammans.
Således ingår världen transaktioner.
Så det är något att hålla i bakhuvudet,
inte så mycket för att bara en sista projekt,
men om du vill ta din sista projekt någonstans,
om du vill starta något företag runt det,
om du vill lösa några studenter gruppens problem på campus
och faktiskt har en levande, aktiv hemsida, det är den typ av subtila buggar som kan uppstå
om du inte riktigt tänka igenom vad som kan hända om 2 personer
försöker komma åt din webbplats bokstavligen samma tidpunkt,
varigenom sina frågor annars blir sammanvävda.
>> Redo för JavaScript, en teaser detta?
Detta är vår sista språk för terminen. Okej.
Tack och lov ser JavaScript mycket, mycket, mycket likt de 2 språken, C och PHP,
vi har gjort hittills.
Det finns ingen JavaScript pset 7, men det är ett otroligt användbart verktyg
när det gäller att göra webbaserade slutliga projekt eller egentligen bara webbprogrammering mer allmänt.
Så en snabb överblick över något som kallas DOM.
Här är en super enkel webbsida som egentligen bara säger hej, värld
både i titeln och i kroppen.
Eftersom fördjupningen har tyder på en viss tid,
Det är verkligen en hierarki på webbsidor.
Jag kunde dra samma sträng med HTML som ett träd,
tänker tillbaka till våra diskussioner om datastrukturer i C, enligt följande.
Jag har några speciella rotnod kallas dokumentet noden,
och vi får se den analoga detta i JavaScript på bara ett ögonblick.
Det första barnet och enda barn som i detta fall är den HTML-taggen.
Det finns ingen direkt kartläggning av doctype.
Det är en speciell sak, så vi bara ska ignorera det när det kommer till detta DOM,
denna Document Object Model träd.
Observera att HTML-taggen, som jag har visat godtyckligt som en rektangel,
har 2 barn: huvud och kropp.
>> De är på liknande sätt dras som rektanglar.
Det är meningsfullt bildmässigt att huvudet är till vänster om kroppen.
Slutsatsen är att huvudet kommer först i trädet.
Så det finns faktiskt en beställning till ett träd när du ritar det så här,
även om formerna och allt är godtyckliga.
Huvud har tiden ett enda barn som heter titel,
och titel har faktiskt ett eget barn, som är "Hello, world",
vilket jag medvetet drog som en oval här för att göra det lite annorlunda från rektangeln.
Dessa rektanglar är grundämnen, medan hej, är världen verkligen en text nod.
Så det är en nod i trädet, men det är en annan typ av nod
så jag drog det godtyckligt annorlunda.
Likaså har kroppen ett barn som heter hej, världen också,
så olika nod även om de är slump samma text,
men jag har ritat den med samma form. Så vem bryr sig?
Tja, vad är trevligt om HTML är att den har denna hierarkiska karaktär.
Och vad är trevligt om JavaScript och särskilt bibliotek som är fritt tillgängliga
och populär som jQuery, kan du navigera trädstrukturen så himla lätt.
Någon av de saker vi gjorde i C med pekare och träd som trafikerar och recursing på noder
vänster barn till höger barnet plötsligt att vi kan sortera om ta för givet
som otroligt upplysande om inte lite frustrerande
men inte alls ett effektivt sätt att gå om programmering.
Och så med dessa högre nivå språk som JavaScript
Vi kommer att kunna navigera detta träd mycket mer intuitivt.
>> Och faktiskt syntaxen kommer att bli ganska bekant.
Om du aldrig har sett JavaScript tidigare, är detta en riktigt trevlig referens
från Mozilla folk, de människor som gör Firefox,
så gör gärna bläddra det när det passar dig.
Vad du hittar - och dessa bilder är identiska med vad vi använde häromdagen -
samma sätt är främsta borta.
Så när du skriver ett program i JavaScript, finns det ingen huvudfunktion.
Du startar bara skriva kod.
Men en viktig skillnad mellan JavaScript och C och PHP
är att medan C och PHP hittills har genomförts serversidan
av apparaten i detta fall eller mer generellt av en server,
JavaScript genom design brukar utföras av en webbläsare.
Med andra ord kan du skriva JavaScript-kod, som vi håller på att,
på en server i apparaten, men du inkludera det bland HTML, bland din CSS,
bland dina GIF och dina PNG och dina JPEG
så att när användaren besöker din webbsida, om du använder JavaScript,
att JavaScript-kod kommer från servern till webbläsaren,
och det är webbläsaren som faktiskt utför det.
Så detta är meningsfulla konsekvenser för ens immateriella rättigheter.
Det finns en slags dumt att ens tänka på att skydda din IP när det kommer till JavaScript-kod
grund av naturen av språket det blir utförs vanligtvis webbläsare sida.
>> Du kan fördunkla den, vilket innebär att du kan få det att se galen och ful
utan blanksteg, hemsk variabelnamn, för att göra det svårare för människor att stjäla din IP,
men det viktigaste är att det körs i webbläsaren sida.
Även om som en sidoreplik JavaScript kan användas serversidan,
den vanligaste användningen fallet just nu är fortfarande på webbläsaren.
Och här är vad det ser ut. Här är en om-annars om-annars konstruera precis som C, precis som PHP.
Här är ett booleskt uttryck när du "eller" 2 saker tillsammans.
Här är när du "och" 2 saker tillsammans.
Här är en switch-sats som liknar PHP
i att du kan slå på olika typer av värden.
Loopar har på samma sätt för slingor här, som är strukturerade identiskt med vad vi har sett tidigare.
Medan loopar, vi har göra medan slingor.
Variabler, någonsin så något annorlunda.
Du deklarerar variabler som du gör i PHP och C,
men liknande är JavaScript svagt skrivs.
Du inte anger int eller float eller string eller något liknande brukar.
Du kan ange var.
Du behöver inte ange var, men det har konsekvenser om man inte gör det.
Vanligtvis om du utelämnar var skapar du av misstag en global variabel i stället för lokala.
Så låt mig föreslå att du nästan alltid bara säga var och sedan namnet på variabeln.
Det är inte en typ, det är bara var för variabel.
Detta skulle vara ett exempel, oavsett om det är 123 eller "hej, världen".
Arrayer är närvarande och syntaktiskt liknar PHP.
Jag ska säga VAR siffror och sedan använder jag hakparenteser igen att deklarera en variabel
vars typ är array som har just dessa nummer i den separerade med kommatecken.
Och då slutligen, är detta det enda som verkligen ser annorlunda ut.
Minns att i PHP vi skulle ha genomfört en associativ array för en student
Liksom Zamyla som kan se ut så här, där variabeln kallas elev.
Hakparenteserna betyder här kommer en matris.
>> Det faktum att jag inte använder numeriska index, men strängar - id, hus och namn -
innebär att detta är en associativ array,
och dessa pilar med likhetstecknet och den vinklade fästet
innebär att nyckeln är "id", är värdet 1;
nyckeln är "hus", är värdet Winthrop House;
nyckeln är "namn", är värdet Zamyla Chan.
Så det finns 3 nycklar inne i denna associativ array, som alla har sitt eget värde.
Vi har sett att i pset 7, eller du snart kommer i JavaScript samma idé,
men det kommer att se ut så här.
Så var student - ingen dollartecken och ingenting av typ fortfarande men var -
jämlikar och öppna sedan klammerparenteser eftersom JavaScript när du har viktiga värdepar,
du faktiskt något som kallas ett objekt.
Och de av er som tog APC eller liknande kanske kommer ihåg föremål från Java
eller liknande språk.
JavaScript är inte Java, först av alla.
Det var ett medvetet design beslut år sedan att slå ut något annat som var populärt,
sitt namn, trots att den inte har någon grundläggande relation till JAVA själv.
JavaScript har objekt och du skapar dem med hjälp av klammerparentes notation.
Objekt i Javascript är ganska likvärdiga med associativa arrayer i PHP
när det gäller lagring av data inuti dem.
>> Men även mer kraftfullt i JavaScript kan du koppla enkelt fungerar
inuti ett objekt, och även om du kan göra detta på andra språk,
Det är ganska vanligt paradigm, som vi får se.
Kort sagt, är detta objekt en student, som är särskilt Zamyla,
och det är lika begreppsmässigt, bara syntaktiskt annorlunda här.
Låt oss verkligen använda JavaScript i en fil.
Det visar sig att det finns ett skript tagg.
Vi har sett en stil tag och vi har sett andra HTML-taggar.
Manuset taggen faktiskt innehåller några JavaScript-kod.
Låt mig gå in i apparaten, där vi har några källkod pre-made.
Jag har inte skrivit det ännu på webbplatsen, men jag ska göra det efter lektionen.
Vi öppnar upp här, blink.html.
Tillbaka på 1990-talet, det var bokstavligen en HTML-tagg som kallas blink-taggen,
och detta var en av de mest underbart overused taggar på Internet
där du skulle besöka några 1990 sidformatmallen webb och börja se text blinkar dig så här,
resultatet av markis taggen, som hade att gå på det här sättet.
En av de få gånger där världen har faktiskt enats om en webb standard,
alla över hela linjen dödade blink-taggen för några år sedan.
Men vi kan återuppliva den med JavaScript som en demonstration av makt du har
när du kan skriva ett program inne i en webbsida.
Låt oss först hoppa över den nya grejer och bara fokusera på de gamla.
>> Här är den gamla saker i detta exempel.
Jag har en HTML-tagg, ett huvud tag och en titel tagg.
Sen har jag en kropp tagg här med en div, vilket minns bara en rektangulär fördelning av sidan
att jag har gett ett unikt ID godtyckligt av "hälsning" till,
bara så jag har ett sätt att unikt hänvisa till det, som har några mycket enkel text:
hej, världen.
Låt mig rulla upp till toppen av denna fil och se vad som är nytt.
Det första som är nytt uppe är script-taggen,
och insidan av skripttagg märker jag har förklarat en funktion.
Att deklarera en funktion i JavaScript, ganska lik PHP,
du skriver bokstavligen fungerar sedan namnet på funktionen, parenteser,
och kanske några argument om det tar några.
Sen har min klammerparentes som vanligt, och nu har vi några lite ny kod,
men låt oss se vad detta innebär.
Så var div innebär detta bara ge mig en variabel kallad div.
Jag kunde ha kallat det foo, men jag ville att den skulle kallas div
av skäl som kommer att framgå i en sekund.
Då visar det sig i JavaScript - och detta är JavaScript-kod inbäddad i min hemsida -
det finns en speciell global variabel slags handling som kallas.
JavaScript är faktiskt ett objektorienterat språk.
Vi kommer inte att gå in i detalj i 50 vad det betyder,
men nu vet att ett föremål är ganska mycket som en struct.
Som vi såg vägen tillbaka när en av de tidigaste problemet sätter
där vi lägger en hel del information i en struktur,
liknande är dokumentera en speciell struktur som kommer med webbläsaren,
kommer med en webbsida. Det är inte något jag skapat.
Inuti detta dokument struktur, men har du inte bara data
men du har också funktioner.
>> Och varje gång du har en funktion inne i en struktur, inuti ett objekt,
det kallas en metod. Men det är samma sak.
En metod är en funktion som bara så råkar vara inne i något annat.
Så detta betyder att denna speciella global variabel som heter dokument
har en funktion som kallas getElementById som bokstavligen gör det.
Det får du ett element från DOM, Document Object Model träd,
vars ID är i detta fall hälsning.
Med andra ord, kommer hela tiden vi tillbringade på datastrukturer i spel här.
Denna bild av en DOM att vi hade för en stund sedan,
även om sidan är lite annorlunda, om jag hade en div på bilden,
vilken document.getElementById skulle återvända till mig skulle effektivt vara en pekare
den rektangel i trädet, en hänvisning till rektangeln i trädet.
Så det är vad det innebär att faktiskt ringa en av dessa funktioner.
I det här fallet igen är det en div. Det är inte ett organ eller en titel.
Så låt oss se vad jag då göra med den här div nu när jag har det inuti detta kallas variabel div.
Det visar sig med JavaScript har du möjlighet att justera CSS på din sida dynamiskt.
Hittills är allt CSS vi har gjort, om än begränsade, i stil attribut,
eller där annars har satt vi CSS?
Jag slags bortskämd som en. I stil taggen längst upp i filen.
Eller tredje plats har varit i?
>> En extern fil, något. Css.
Så de är de 3 platser vi har gjort CSS hittills,
men kruxet är vi hårt har kodat allt.
Du bestämde som ni dök in pset 7, beslutade vi innan föreläsa vad vår CSS skulle vara.
Men om du vill ändra din CSS, kan du faktiskt göra det
När du har en faktisk programmeringsspråk.
CSS, HTML - inte programmeringsspråk. Javascript är.
Så det visar sig att så fort du har en av dessa rektanglar från trädet
kallas DOM har det själv några data i den.
Så div som jag bara tog från trädet har vad vi kallar en egenskap insidan av det
heter stil och stil egenskapen själv en fastighet som kallas synlighet.
Jag skulle veta detta endast genom att slå upp en CSS bruksanvisning.
Det visar sig att det finns en synlig CSS-egenskapen som gör vad den säger.
Det gör något synligt eller ej, syns eller inte.
Och hur du gör det är det.
Jag frågar programmatiskt om synligheten för denna div döljs,
vad jag ändra det till? Synliga.
Else if synligheten på denna sida inte är dolt, logiskt jag gör det dolda.
Jag har ingen aning varför det är synligt och dolt och inte synliga och osynliga.
Detta var en dålig design beslut längs vägen.
Men de är verkligen motsatser i CSS: synliga och dolda.
Allt detta gör det betyder att ändra CSS för min fil på och av, på och av
för just div.
Men återigen, detta är en funktion som kallas blinkar. När är blink funktion som kallas?
Det visar sig att det finns en annan speciell global variabel som heter fönster,
likadana i andemening som dokument, men medan det i dokumentet hänvisas till din webbsida,
som DOM-trädet, skickade HTML dig från servern,
Fönstret avser krom runt det, adressfältet, namnlisten,
och allt det där runt din webbsida.
>> Och det visar sig att fönstret objektet har en speciell funktion inuti det kallas setInterval
som gör vad den säger.
Det kommer att vara ett intervall - i detta fall var 500 millisekund -
och ta en gissning, är vad det kommer att göra varje 500 millisekunder?
Det kommer att utföra denna funktion blinkar.
Och vad är trevligt här är att vi kunde ha gjort detta i C även om vi aldrig gjorde.
C har något som kallas funktionspekare där du kan skicka funktioner runt
som argument.
Likaså i JavaScript kan du skicka namnet på en funktion i en annan funktion.
Och märker vad jag gör. Jag gör inte det här.
Om jag sätter parenteser efter blinkning, skulle det innebära ringa blinkfunktion.
Om jag utelämnar dem betyder att här är blinkfunktion
så att setInterval kan kalla det var 500 millisekunder.
Så slutresultatet, avskyvärda men det är, är att om jag går in localhost och gå till blink.html,
Jag har nu detta händer om och om igen.
Och om jag verkligen Inspektera Element, låt oss se om vi kan se detta.
Låt mig Inspektera element, låt mig scrolla ner bara lite,
låt mig välja element här, och märker DOM insidan av Chrome inspektör.
Det är bokstavligen förändras fram och tillbaka var 500 millisekunder.
Om vi ​​går till vår vän Nate,
Om du någonsin undrat hur det fungerar, liknande idé med ett intervall,
men Nate är faktiskt att mycket effektiv användning av färg i detta fall här.
Så vad mer kan vi göra egentligen med detta?
Vi öppnar upp ett annat exempel och prova något
Det är programmatiskt ännu mer användbar än att göra saker blinkar.
Låt mig gå in i vårt formulär katalog idag och gå in form0.
Detta var den fulaste möjliga form som jag kunde komma på,
och låt mig bara visa dig hur det ser ut i en webbläsare.
>> Låt mig gå in localhost / former, och det här är form0.
Detta är en super ful HTML-formulär som har några fält för e-post, för lösenord,
lösenord och sedan lite kryssruta för att godkänna vissa villkor.
Fångsten är om jag besöker detta formulär, och jag vill inte ge er min e-postadress,
Jag vill inte gå med på villkoren kanske kan jag klicka på Registrera
och det låter mig igenom ändå.
Det händer att underkasta sig en dum PHP fil som heter dump.php.
Allt det gör är att skriva ut innehållet i $ _GET bara för diagnostiska ändamål.
Det var vad som lämnats in av användaren just nu.
Men antag att vi faktiskt vill validera användarens formulär.
Låt mig gå in version 1.
Detta är form1.html. Det ser estetiskt lika illa, men märker hur fint det är.
Om jag klickar på Registrera utan att samarbeta, får jag skrek åt.
"Du måste ange din e-postadress."
Okej. Så låt mig prova det. Så malan@harvard.edu. Jag behöver inte ett lösenord.
Registrera. "Du måste ange ett lösenord." Okej.
Så jag kommer att ge ett lösenord crimson. Registrera.
"Lösenorden stämmer inte överens." Jag måste nu skriva in crimson här.
Jag kollade misstag det. Registrera.
"Du måste godkänna villkoren." Okej. Överens där. Registrera.
Och nu visar mig den diagnostiska effekt där.
>> Så vad hände?
Vi har haft denna förmåga att validera formulär inlagor.
Faktum är att om du gjorde dyka in pset 7, det finns en ursäkt funktion
som gör det ganska lätt att skrika på användaren med ett meddelande på skärmen.
Jag använder en något annorlunda mekanism, larm funktion,
som inte är en funktion som är log mot eftersom det gör väldigt ful användarmeddelanden.
Men låt oss se vad jag gör här.
Detta är form1.html, och märker att jag har några ganska bekant syntax:
body-taggen, formulär tag, handling attribut, metod attribut.
Men märker jag har gett min form ett unikt ID för bekvämlighet.
Sen har jag en e-fält vars typ är text,
ett fält för lösenord vars typ är lösenord, bekräfta fält vars typ är lösenord,
och sedan en kryssruta som heter överenskommelse om här, typ kryssrutan.
Och då har jag en submit-knapp.
Men märker upptill vad mer jag har.
Först av allt, det finns en annan användning av skripttagg.
Om du har några JavaScript-kod i en annan fil, precis som med CSS kan du inkludera det.
Och du gör det med manus källa, och sedan märker jag ansluta tydligen
att googleapis.com till en mycket lång väg men vars filnamn slutar med jquery.min
för minimal. js.
jQuery är en super populär bibliotek för Javascript som bara gör JavaScript
allt mer användarvänliga att använda.
Det har faktiskt blivit en de facto-standard.
Så även om det du ska se är inte ren JavaScript sig,
Det är ett bibliotek på toppen av JavaScript likt CS50 biblioteket är ett skikt
ovanpå låg nivå C-kod, verkligheten är nästan alla på Internet använder det.
Så dessa är inte stödhjul. Detta är bara bäst öva i dessa dagar.
Nu märker nedan som är min egen script-taggen, och lägg märke till vad jag har gjort här.
Det visar sig att jQuery gör något lite fantasi.
JavaScript har dollartecken, men de är meningslösa.
>> De är som bokstaven A eller B eller C.
jQuery har helt enkelt antagit konventionen eller typ av anspråk på att
att $ blir deras speciell symbol.
Så snart som du laddar denna globala JavaScript-fil här uppe med script-taggen,
du har tillgång till en speciell global variabel som heter $.
Det är mer korrekt kallas jQuery, men som inte ser alls lika sexig som $.
Men $ har ingen speciell betydelse. I PHP hade speciell betydelse.
Du var tvungen att ha det framför en variabel.
Detta är bara en sexig sak som de tog den.
Vad händer här?
Notera att jag går till jQuery funktion min globala variabel dokument
och då jag ringer. redo.
Vilken jQuery huvudsak gör det kan du ta del vanilj JavaScript saker
som dokumentet objektet fönstret objektet,
och om du skickar den till jQuery funktion -
och igen, att vara tydlig, detta är en funktion som kallas jQuery -
vad den gör är det återgår till en speciell version av dokumentet
som har mer funktioner i anslutning till den.
Så i rå JavaScript finns det ingen klar funktion,
men om du klarar dokument till jQuery funktion först,
återgår den till dig en speciell version av dokumentet objektet
som har fler fina egenskaper.
Och det är därför folk gillar det. Det gör bara saker enklare att göra, eftersom vi är på väg att se.
Så vad betyder den här kodraden?
Denna kodrad menas här när dokumentet är klart -
med andra ord, när webbläsaren görs läser denna fil topp till botten -
gå vidare och utföra följande funktion.
Vad är riktigt intressant i JavaScript - och PHP har detta också -
är anonyma funktioner.
I JavaScript kan du deklarera funktioner som inte har något namn, men de har en kropp.
Lägg märke till vad som händer här.
>> Detta är en funktion som kallas redo, och det betyder bara göra följande
när hela webbsidan är klar, när allt är lästs in från servern.
Vad vill du göra? Jag vill köra en bit av kod.
Observera att vi inte vill köra denna kod direkt.
Om jag utelämnas detta, skulle detta innebära omedelbart börja köra dessa rader kod.
Men det faktum att jag säger nej, nej, nej, linda detta i en anonym funktion som denna
medel kör inte det ännu, kalla det så småningom.
Vi såg detta nyss i vårt tidigare form exempel.
Vilken funktion har vi kallar småningom 500 millisekunder senare? Blink.
Så samma idé.
Igen, även om det ser lite konstigt, bara ta för nu tro
att förklara en anonym funktion som heter så småningom,
Du skriver helt enkelt function () {
Så vad koden ska vi köra så småningom? Följande.
Detta ser alltför lite nytt, men detta innebär här är jQuery funktion,
och detta är nu en genväg.
Denna sträng HTML längst ned på skärmen naturligtvis har några träd representation.
Det är inte det här. Denna sida är mer intressant än detta hej, värld exempel.
Men det finns en del träd som motsvarar denna HTML.
Det skulle vara en smärta i nacken att genomföra någon form av rekursiv funktion
att börja på rotnoden och sedan hitta noden vars ID är registrering.
Så vad jQuery gör super lätt för oss är bokstavligen detta.
Gå vidare och få mig vad div eller någon form, oavsett HTML-element
har ett ID för registrering.
Detta motsvarar document.getElementById ('registrering').
>> Varför människor som jQuery?
Eftersom det är kortare att skriva. Men det är allt det är. Det är samma idé.
Ge mig taggen vars ID är registrering.
Och när den taggen, som råkar vara en form, in,
gå vidare och köra denna kod.
Så låt oss ta en titta nu på hur vi gör formulär validering.
Syntaxen är visserligen kryptiskt först, men vad händer?
Om den här kodraden är sant, jag ska skrika på användaren att tillhandahålla hans eller hennes e-postadress.
Så vad är denna kodrad?
$ Betyder jQuery. Nu märker detta.
Detta är ungefär som CSS.
Om du har dök in CSS ännu vet du att detta betyder att elementet vars ID är registrering.
Utrymmet innebär att hitta ett barn eller en ättling till registrering vars namn matas in.
Och då denna sak inom hakparentes är lite filter.
Och även om det ser kryptisk, innebär detta bara att gå till formuläret vars ID är registrering,
gå till ingångselementet insidan av den vars namn är e-post,
och sedan få dess värde, oavsett dess värde råkar vara -
asdf om det är allt jag skrivit eller malan@harvard.edu om det är vad jag skrev.
Så om värdet av formen e fält == ingenting, skrika på användaren.
Annars om värdet lösenordsfältet == ingenting, skrika på användaren.
>> Annars om värdet av lösenordet fältet inte lika med värdet av bekräftelsen fältet,
som var den andra formelement, skrika på användaren.
Och sedan slutligen - och här har även några nya syntaxen för sin egen,
men när du har sett det, det är åtminstone lite mer rimligt -
else if formen vars ID är registreringen har en ingång element vars namn är överens
och det kontrolleras, gå vidare och skrika på användaren.
Så jag erkänner helt detta är helt överväldigande vid första anblicken.
Det är en hel del ny syntax. Men alla jQuery följer dessa typer av mönster.
Och ärligt talat, jag vet inte ens det existerade tills för några minuter sedan.
Jag googlade, "Hur kan du kontrollera om en kryssruta är markerad i jQuery?"
och detta är syntaxen, eftersom det finns olika sätt att göra det
med den faktiska rå JavaScript-kod.
Så som den allra första sidan i problembild 7 betonar
pset 7 är mycket en övning i bootstrapping själv
där vi har gett, förhoppningsvis, en tankeram som man kan ta itu med pset.
>> Men som ofta är fallet med webbdesign, är det upp till dig verkligen att rota,
införliva kodavsnitt och exempel från webben så länge du citerar dem
Enligt villkoren på den första plåten,
och inse att lära HTML, CSS, Javascript och även SQL
är verkligen tänkt att vara det at-home motion som vi börjar ta dessa stödhjul av.
Och inser också att det finns så många fler saker du kan göra med en webbläsare.
Inuti de flesta av dessa element finns det andra saker som kallas händelsehanterare.
Och även om vi bara tittat på dem som kallas onSubmit och onready,
Du kan göra saker som onKeyDown, onKeyUp,
som när användaren rör en nyckel, kan du lyssna på det och uppåt.
Gmail har kortkommandon.
Hur genomför Google kortkommandon som C komponera?
De lyssnar efter händelser, som de kallas, som onkeypress eller onKeyUp och onKeyDown.
Om du någonsin svävade musen över vissa menyalternativ
och helt plötsligt, voila, visas en meny eller grafiken ändrar färg,
Hur gör de det?
Hellre än att lyssna efter onready eller onSubmit, lyssnar du onMouseOver och onMouseOut.
>> Så kort sagt, med dessa mycket enkla grunderna som vi har börjat skrapa på ytan av dagens
och vi dyka i ytterligare onsdagen du har, allt,
befogenhet att genomföra den typen av saker som du redan är bekant med.
Så låt oss sluta där, och vi kommer att fortsätta med detta på onsdag.
>> [CS50.TV]