[Powered by Google Translate] [Week 9] [David J. Malan - Harvard University] [Dit is CS50. - CS50.TV] Oke. Welkom terug. Dit is CS50, en dit is het begin van week 9. Vandaag richten we ons met name op het ontwerp, niet meer in de context van C maar in de context van PHP en een beetje van SQL en een beetje JavaScript, in het bijzonder in de richting van een einde van zowel PSET 7 en ook uw uiteindelijke project. In feite, als u zich op dat moment in uw uiteindelijke project waar vermoedelijk vanaf een uur of zo geleden heeft u in ieder geval begonnen na te denken over om je afstudeerproject en je denkt je wilt samenwerken met 1 of 2 klasgenoten, Als u problemen ondervindt met het aansluiten zei klasgenoten, voel je vrij om het formulier invullen op cs50.net/partners/form. Het vraagt ​​je gewoon wie je bent, wat voor soort project dat u denkt over, waar je woont maar om logistieke redenen. En dan als je wilt in de gaten houden de komende week of zo de spreadsheet URL daar, U kunt dan zien een alleen-lezen versie van de Google doc waarin we verzamelen deze informatie. Dus als je wilt werken met iemand, met alle middelen te voelen vrij om uit te reiken naar mensen via dat mechanisme. Maar de meerderheid van de mensen doen het werk solo. Dat is helemaal goed. Dat wil niet zeggen dat dit op enigerlei wijze verplicht. Op vrijdag was het alleen ik en een paar van het team hier, leeg theater voor het grootste deel. Er waren 3 toeristen zitten daar boven, dus dat was een beetje lastig. Wat hadden we het over was databases en spraken we over PSET 7 een beetje. En als je niet toevallig dat vangen op video gewoon nog niet, dat is prima. Ik zal proberen om een ​​van de woorden te definiëren die we anders zouden als vanzelfsprekend gebaseerd op lezing van vrijdag. 

Maar vandaag gaan we proberen om u naar het punt van niet alleen in staat om zoiets te doen PSET 7 maar echt te begrijpen wat er aan de hand onder de motorkap, in het bijzonder een aantal van de abstracties die we in te voeren in de functions.php bestand om uw leven een stuk makkelijker, maar zo dat je uiteindelijk begrijpen zodat wanneer de zijwieltjes eraf in een paar weken kunt u nog steeds overleven in de echte wereld en doen dit spul zonder CS50 kader onder je. Deze $ _SESSION, voor degenen onder u die op de hoogte of die reeds de video betrapt op vrijdag, SESSIE wat doet laten we het doen in een PHP-gebaseerde web applicatie? Dit is een superglobal variabele, wat betekent dat het in dezelfde geest aan GET POST en en een paar anderen, maar wat is dit ding nuttig voor? 

Wat is SESSIE gebruikt? Ja. [Student] Logging in Sorry? [Student] Logging in Logging in inderdaad. In PSET 7 gebruiken we deze sessie superglobal te vergemakkelijken in te loggen En wat er leuk is aan dit superglobal is dat het een associatieve array. Een associatieve array, recall, ligt op slechts een array, maar waarvan de indexen niet meer te zijn getallen zoals 012. Ze kunnen getallen of ze kunnen zelfs strings. En dus als je dook PSET 7 nog, kunt u zich herinneren dat we een sleutel genaamd ID opslaan binnenkant van deze associatieve array waarvan de waarde is zoiets als 123 - ongeacht de momenteel aangemelde gebruiker ID's is. De motivatie hiervoor is dat zelfs nadat de gebruiker heeft bezocht localhost of mijn website meer in het algemeen en dan hebben ze ingelogd, zelfs als ze niet op een koppeling of terug te gaan naar mijn website gedurende 5 minuten of zelfs een uur of zelfs een dag, maar ze laten hun browservenster geopend, via deze superglobal kan ik herinner me dat ze ingelogd 

Met andere woorden, het stelt me ​​in staat om op te slaan een beetje op lange termijn wat ik wil over een gebruiker. En je kunt echt zien als de incarnatie van een winkelwagentje. Plaatsen als Amazon natuurlijk laat je dingen in een winkelwagentje, maar HTTP, het protocol dat drijft op het web, is staatloos in de zin dat wanneer u een website bezoekt, voor het grootste deel u niet beschikt over een aantal constante netwerkverbinding tussen uw browser en de server. Zodra u hebt gedownload van de HTML en de JPEG's en de GIF's en dat alles, de verbinding gaat weg en je hoeft alleen een kopie van de HTML en wat al niet van de server. Maar als de server wil herinner me iets over jou, de last is op de server om daadwerkelijk op te nemen die informatie. En zodat je de programmeur die de controle over de server kan zetten de meeste alles wat je wilt binnenkant van dit superglobal associatieve array en het zal er de volgende keer dat de gebruiker terugkomt, of het nu minuten of zelfs dagen later, tenzij ze sluiten hun browservenster, op welk punt SESSIE verdwijnt. Dus het is vluchtig opslag, het is niet-persistent, en het is bedoeld om weg te gaan zodra de gebruiker sluit de browser - niet alleen dat tabblad, vaak de hele browser, waardoor effectief het loggen van de gebruiker uit. Dus hoe is dit ding werkelijk geïmplementeerd? Laten we eens een snelle blik op een eenvoudig voorbeeld hebben we gekeken naar vrijdag. Voor wie niet vertrouwd, het was zo simpel als dit. Dit is een webpagina met als enige doel in het leven is om te vertellen hoe vaak ik heb bezocht deze pagina. Dit is de eerste keer hier op maandag dat ik het bezocht, dus er staat 0 keer. 

Maar als ik begin herladen deze pagina, het zegt 1 keer, 2, 3, 4, 5, en dit zal uiteindelijk gewoon blijven tellen omhoog, omhoog, omhoog, omhoog, omhoog voor elke keer dat ik echt klikt vernieuwen op. Dus hoe is deze manier van werken? Laat me naar binnen gaan van dit bestand met de naam counter.php. Het bovenste deel van dit alles is blauw commentaar, maar het interessante deel is hier. Op lijn 13 noemen we deze functie session_start, en dat is letterlijk alles wat je moet doen als u toegang wilt hebben om deze speciale superglobal genaamd $ _SESSION. Dat maakt het allemaal mogelijk, en we zullen zien in een moment hoe dat is allemaal mogelijk. In lijn 16 merk op wat ik doe. Als de sleutel, genaamd counter - met andere woorden, de indexwaarde - "counter" bestaat binnenkant van deze array genaamd SESSIE, wat doe ik met het in de regel eronder? Wat is regel 18 aan het doen? 

[Onverstaanbaar student reactie] Wat is dat? [Student] Het opslaan van de waarde. Goed. Het opslaan van de waarde die in SESSIE nu in een nieuw lokaal tijdelijke variabele, $ Teller in kleine letters. Merk op dat PHP al is een beetje lui hier. Let op dat we geen vermelding van int of float of string of iets dergelijks hebben dat omdat PHP is zwak getypt, waarbij je niet het type van een variabele op te geven, en in dit geval hier heb ik nog niet eens verklaard dat hij nog niet. Ik verklaar dat de binnenkant van deze accolades en in tegenstelling tot C, dit is eigenlijk oke. Het maakt niet uit hoe diep een variabele declaratie genest is in PHP - binnenkant van accolade, de binnenkant van accolade en dergelijke - zal op dat moment bestaan ​​in tijd voor de rest van het programma, ten goede of ten kwade. Dus wordt het onmiddellijk mondiale zodra je deze instelt als we hier doen. 

Anders, als ik niet vind dat er iets in de SESSION superglobal, Ik ben blijkbaar het initialiseren van deze variabele teller op 0, daardoor net de veronderstelling dat de gebruiker heeft hier nog nooit eerder geweest. En dan is dit natuurlijk is het verhogen van de teller hoe? Ik ben het bijwerken van de waarde die binnen is van deze associatieve array door het gelijk aan wat teller momenteel + 1. Als ik scroll naar beneden hier om de HTML van de pagina, het is eigenlijk vrij eenvoudig. Alles wat ik heb in het lichaam van deze pagina is: "U hebt deze site bezocht zo-en-zo tijden." En dit is een PHP-construct. Als je dat doet <? =, Dit is gelijk effectief aan wat de functie? Het is echt gelijk aan iets als printf, die we hebben vele malen gezien in C, hoewel zoals u wellicht al weet van de spec in PSET 7, print is ook een functie die net drukt iets uit, is het niet daadwerkelijk gebruik maken van formaat codes, en je kunt eigenlijk zeggen echo ook. Ze zijn allemaal ooit zo iets anders ook al is het netto-effect is uiteindelijk hetzelfde. Dus dit gebruik van het is-gelijk teken is gewoon soort van een elegante manier om het te doen beknopter dan u anders zou kunnen. Dus dat is allemaal deze site doet. Het drukt de waarde van de teller. Hoe is dit allemaal echt gebeurt? U herinnert zich misschien een week of zo geleden zijn we op zoek gegaan naar onder de motorkap hoe een webpagina werkt met behulp van deze inspecteur tabblad. 

Chrome heeft dit zowel in de Mac-versie, de Windows-versie, en zelfs de Linux-versie, en Firefox en IE hebben soortgelijke mechanismen waardoor u deze ingebouwde debugger binnenkant van de browser. Laten we eens een kijkje nemen op de volgende. We hebben een hele hoop tabbladen hier, en herinneren eraan dat de meest linkse men Elements, en hoe godawful de HTML-en JavaScript in een pagina, herinneren eraan dat met het tabblad Elementen je daadwerkelijk kunt de HTML-hiërarchisch navigeren en mooi en netjes. Dus als je probeert te leren van een website zoals Google of Facebook of eigenlijk een website, beseffen dat je waarschijnlijk je beter af naar de broncode zo tegenover de onbewerkte bron, dat kan een puinhoop zijn, zoals we hebben gezien in het bijzonder op het terrein van Google. Dus als ik in plaats daarvan hier klikt u op het tabblad Netwerk, laten we eens kijken wat er gebeurt als ik naar deze pagina. Laat me eerst duidelijk mijn cache. Ik ga naar Instellingen in Chrome en vervolgens naar Geschiedenis gaan en schakel alle browsen gegevens. U zou kunnen worden gebruikt om dit te doen voor andere doeleinden, [gelach] maar als het gaat om het ontwikkelen van websites, het is eigenlijk handig - als je lacht weet je. [Gelach] Het is eigenlijk heel handig als het ontwikkelen van websites, omdat de realiteit is dingen zoals koekjes en dat soort dingen in de cache HTML-bestanden, cache JavaScript-bestanden daadwerkelijk kan worden een grote hoofdpijn, want als om welke reden dan de browser besluit om de cache een bestand en toch heb je wijzigingen aangebracht in het bestand op de server maar de browser is niet echt gerealiseerd dat het bestand is gewijzigd en dus eigenlijk niet opnieuw downloaden, zelfs wanneer u op de knop Opnieuw laden, een van de meest trefzekere manieren om maar zorg ervoor dat de fout niet met uw code, het is met het gedrag van de browser, is om hier te gaan in uw browser en gewoon duidelijk de hele geschiedenis, zodat er geen verwarring. 

En dan als je echt wilt zijn paranoïde, sluit u de browser, start het opnieuw en dan zorg ervoor dat alles werkt zoals verwacht. Dus in het kort, clearing cache is goed wanneer het doen van ontwikkeling. Dus hier hebben we het tabblad Netwerk. Ik eerder had bezocht de site 9 keer, maar laat me nu ga je gang en klik op Opnieuw laden. En ik ben terug naar 0. Laten we eens echt zien hoe het komt dat deze sessie superglobal wordt uitgevoerd. Ik ga om te klikken op de 1 HTTP-aanvraag die is gemaakt, en dit foutopsporingsvenster laat me naar binnen kijken van dat. Hier zie ik alleen het antwoord van de server, die niet interessant. Ik heb dit in een aantal manieren. Maar wat is technisch gezien interessant zijn de headers. Als ik scroll naar beneden hier en richten zich op het verzoek headers en klik op view source, wat ik ga zien is letterlijk het HTTP-verzoek dat ging gewoon van mijn browser naar de server, GET is het juiste woord en dan / counter.php zijnde de bestandsnaam, HTTP/1.1 gewoon de versie van HTTP dat mijn browser wordt gebruikt. Deze lijn is hier een kleine herinnering van browser tot server wat de naam van de server is te willen praten. En dan de rest van deze is soms interessant, maar niet relevant op dit moment. 

Dit is gewoon een soort van een curiositeit. Cryptic hoewel deze string is, elk moment dat uw browser een website bezoekt het is het informeren van de server welke browser je gebruikt en welk besturingssysteem je gebruikt en welke versie daarvan. Dus als je ooit hebt afgevraagd hoe websites als CNN en wat al niet weten wat de percentages zijn van Mac-gebruikers op het web, pc-gebruikers, IE gebruikers, Chrome-gebruikers en dergelijke, dan is dat omdat al onze browsers vertellen elke website die er zijn wat we zijn. Het bevat niet noodzakelijkerwijs persoonsgegevens, maar het vertellen van de server wat uw IP-adres is en welke browser en besturingssysteem dat u gebruikt. Dus dat is waar deze informatie. Maar wat interessanter nu als het gaat om deze sessies wordt de response header. Laat me klikt bron te bekijken naast reactie. Wat interessant is hier een paar dingen. 1, we hebben weer een statuscode 200. We zien nooit deze status code, omdat dat betekent dat alles in orde is. Het betekent letterlijk goed in tegenstelling tot iets anders. Wat is een aantal zien we soms zo slecht is? [Student] 404. 404, bestand niet gevonden, kan 403 u struikelen over al, wat verboden is, wat betekent dat je vergat te chmod iets, waarschijnlijk. En er is een heleboel anderen. 

Hier beneden, dit is een beetje gek. Ik schreef net dit bestand een paar minuten geleden door plakken in gedit. Waarom heeft deze pagina vervallen in 1981 voordat er echt een Web? Wat is er aan daar? 

[Onverstaanbaar student response] De tijdstempel. Maar waarom? Het is enigszins arbitrair, maar het is eigenlijk nuttig. Wat dit zegt tegen mijn browser is dit PHP bestand dat u zojuist hebt aangevraagd reeds is verstreken. In feite verlopen 30 jaar geleden. Maar wat betekent dat eigenlijk? Het betekent gewoon de volgende keer dat de gebruiker bezoekt deze pagina, hetzij door opnieuw laden of het typen van de URL in de adresbalk, zorg ervoor dat je gaan halen een nieuw exemplaar van het. Dit is een soort van een voorbeeld van cache busting, een stom woord dat betekent alleen maar dat het proberen om browsers te ontmoedigen van de werkelijk caching HTML die is verzonden vanaf een server zodat u niet per ongeluk herladen en dan zie dezelfde versie van het bestand. Je eigenlijk wilt dat de server om een ​​nieuw exemplaar te sturen. Dus het feit dat het 1981 betekent gewoon dat dat is wat het apparaat te kiezen een willekeurige datum in het verleden. Maar de echte sappige lijn is nu deze. Nog voor 50 ben je waarschijnlijk vaag bekend met cookies. Vanaf nu, vooral onder degenen minder comfortabel of tussen, wat is een cookie in uw begrip op dit moment ook al zijn we op het punt om uw begrip meer technische? Wat is een cookie? Ja. [Student] Informatie over de gebruiker, zoals als ze geschreven zijn gebruikersnaam of zoiets. 

Goed. Het is informatie over de gebruiker, of ze hebben getypt al in hun gebruikersnaam. Cookies zijn een manier waardoor servers kunnen iets over een gebruiker te onthouden. En wat een cookie is echt een tekstbestand of een sequentie van bytes dat is geplant door de server binnenkant van uw browser, en de binnenkant van dat bestand of die onder hen bytes is een soort van identificatie. Misschien is het letterlijk uw gebruikersnaam, maar vaker is het iets meer cryptische uitziende als dit ding hier - bo8dal3ct enzovoort - dit is echt grote alfanumerieke tekenreeks dat is echt alleen bedoeld om een ​​unieke id voor u zijn. Of u kunt het zien als een soort van virtuele hand stempel. Als je naar een club of een pretpark, om te onthouden dat je daadwerkelijk hebt betaald en gegaan in, zetten ze een beetje rood sticker op je hand of iets dergelijks, en dat herinnert de mensen aan de balie die je al hebt betaald en je kunt komen en gaan wanneer u wilt. Cookies zijn een beetje in dezelfde geest dat. De eerste keer dat ik een bezoek aan deze website, zoals ik net deed na het wissen van mijn cache, de webserver, het apparaat in dit geval, zet een stempel op mijn hand wiens naam is PHPSESSID, sessie-ID, waarvan de waarde is dit echt lange alfanumerieke tekenreeks. 

Dus dat nu is een soort van emblazoned op mijn hand, zodat de volgende keer dat ik geraakt opnieuw te laden of handmatig naar deze URL in een browser, mijn browser per definitie van HTTP gaat de hand stempel te presenteren opnieuw en opnieuw en opnieuw. Dus ook al is de server niet per se weten wie ik ben, ze in ieder geval weten dat ik dezelfde gebruiker of in ieder geval, meer in het bijzonder, dezelfde browser. En dus is dit uiteindelijk hoe de SESSION superglobal wordt uitgevoerd. De server heeft geen idee wie je bent als je opnieuw een website voor de tweede of de derde keer tenzij u presenteren deze hand stempel. En zodra je die hand stempel te presenteren, de webserver gaat in wezen in een kleine database van de eigen en controles, oke, ik heb net gezien dat de kant stempel van de gebruiker bo8dal3ct enzovoort. Laat me zien welke informatie de programmeur heeft opgeslagen binnenkant van de superglobal over deze gebruiker, en dan laat ik er zeker van dat deze gegevens weer is de binnenkant van de SESSION superglobal zodat de programmeur kan opnieuw toegang tot die gegevens ook al was het een aantal minuten of uren geleden ingesteld. Met andere woorden, koekjes, die een slechte rap enige tijd kreeg als gevolg van onzekerheden in browsers en ze kunnen echt schenden onze privacy en dit alles, ze hebben eigenlijk groot nut want zonder hen zou je voortdurend aan te melden bij elke Facebook-pagina die u bezoekt of om de Gmail e-mail te lezen als de browser niet over een of andere manier van herinneren dat u al geverifieerd. 

Dus op deze manier cookies heen en weer verzonden over de draad. Een andere nieuwsgierigheid over cookies, vooral hier, is dat dit volledig in leesbare tekst. Er is geen encryptie gebeurt hier ook, en inderdaad ik ben met behulp van HTTP op dit moment. Een van onze favorieten momenten in CS50, die nu 2 jaar geleden, werd rond de tijd van een tool genaamd Firesheep kwam. Dit was een gratis stukje software dat werd gemaakt door een security-onderzoeker als een wake-up call voor de gemeenschap om te zeggen hoe gruwelijk geïmplementeerd bepaalde authenticatie mechanismen op het web waren. Dus voor enige tijd, Facebook was bijna volledig via HTTP, HTTPS geen. En zelfs als je geen idee hoe de crypto werkt hebben, S is veilig dus het betekent dat er op zijn minst enige encryptie betrokken. Facebook heeft gebruikt om gebruikersnamen en wachtwoorden te coderen, maar zodra u gekeken naar uw steekt of uw berichten of uw nieuwsfeed, dat alles was niet versleuteld. Dus was Gmail tot net een jaar of 2 geleden. Elke keer dat je ingelogd bent, ja, ze gebruikten veilige encryptie, maar daarna deden ze niet. En waarom zou dat zijn? Waarom niet gewoon de hele tijd te gebruiken cryptografie in gebruik is gevallen als deze? Wat is dat? Ik denk dat ik iets hoorde. [Student] Speed. Snelheid, toch? Er zijn manieren om dit. Maar als je gewoon een soort van denken logisch, als je versleutelen iets, je moet op zijn minst een beetje meer werk te doen. In PSET 2 wanneer u Caesar of Vigenere uitgevoerd of zelfs Crack, gewoon het afdrukken van een string is relatief eenvoudig. Versleutelen en vervolgens het afdrukken van een reeks minimaal vereist een beetje meer werk. 

 Voor super populaire websites zoals Google en Facebook, als je moet meer werk te doen voor elke gebruiker voor elke webpagina die ze bezoeken, dat duurt gewoon meer CPU-tijd. En als u meer CPU-tijd, moet u wellicht meer servers, wat betekent dat je nodig zou kunnen hebben meer geld. En zo nog vele jaren dit gewoon was echt niet best practice. Mensen zouden gebruiken SSL-codering wanneer het nodig was. Maar het bleek, en als deze kerel met Firesheep gemaakt super duidelijk, wanneer jullie die op dit moment op Facebook op dit moment - Uit nieuwsgierigheid, laten we eens kijken of je fess up. Als je op Facebook op dit moment in een aantal tab, zelfs als het niet voorgrond, is uw URL HTTP of HTTPS? [Meerdere studenten] S. S? [Gelach] Oke. Elke HTTP? Slechts 1? Oke. Dus ieder van ons kan hacken die vent Facebook-account op dit moment. Voor het overgrote deel is geworden standaard ingeschakeld, tenminste in sommige websites. En lang verhaal kort, als uw webverkeer is niet versleuteld, niet alleen de HTML heen en weer gaan over de WiFis ongecodeerde, dus maak je dingen zoals koekjes heen en weer te gaan in de lucht zonder enige vorm van encryptie. Dus als je gewoon een beetje van de programmering savvy of een beetje Googlen vaardigheden om gratis software die dit doet vinden, alles wat je hoeft te doen zitten in Starbucks of zitten in een luchthaven waar is over het algemeen niet-versleutelde WiFi en gewoon kijken naar trefwoorden als Set-Cookie: PHPSESSID of want als je over de technische savvy om gewoon kijken naar de WiFi- voor alle bits die stromen door de lucht voor dit patroon, kun je dan zeggen dat kerel PHPSESSID toevallig bo8dal enzovoort. En dan weer als je voldoende technisch onderlegde of het juiste gereedschap, je kunt gewoon opnieuw configureren dan uw eigen browser om te beginnen met de presentatie van die hand stempel naar Facebook.com, en Facebook is gewoon om aan te nemen dat je die vent omdat alles wat ze weten is niet wie je bent, maar dat u deze unieke id hebben. Dus als je steelt, dat unieke identificatie en legt dit aan de webserver als uw eigen, ze zijn gewoon te laten zien dat iemands news feed of die persoon berichten of porren. 

En ik zou nu Google hoe je misschien HTTPS te activeren voor Facebook. Maar het is echt zo simpel als dat. En dus Facebook en Google en dergelijke hebben gekregen echt goed in, maar houd een oogje in het zeil des te meer voor de websites die u bezoekt die geen gebruik maken HTTP en hebben een soort van gevoelige informatie over hen, of het nu financieel of persoonlijk of dergelijke. Als ze niet met behulp van deze, kan misschien wel cookies als dit heel gemakkelijk gestolen en dan gesmeed, en dat is precies wat Firesheep deed. Je hoefde niet naar een programmeur te zijn. Het enige wat je moest doen was hebben een Internet-verbinding, download dit gratis tool, en wat het zou doen is je aanmelden en dan kunt u zien op de Facebook-namen van iedereen in Sanders in dit bijzondere demonstratie, om je heen en alles wat je moest doen was klikken op hun naam en de software geautomatiseerd proces van snuiven dat cookie, de presentatie van het aan Facebook als uw eigen, en, voila, je bent ingelogd Dus dit is weer een van die "doe dit niet" officieel. Als u uw eigen thuisnetwerk en je wilt sleutelen, met alle middelen, maar beseffen dat dit wel over de streep op een universitaire omgeving. 

Maar het doel is hier echt te benadrukken niet hoe dit te doen maar hoe te verdedigen tegen dit soort dingen. En het triviale oplossing hier, ook al is het zelf onjuist is, is om echt te verminderen gebruik van sites die niet met HTTPS voortdurend. Dus sites als Facebook en Google steeds meer selectievakjes waar u kunt kiezen om in dit soort dingen, en banken hebben dit al jaren om soortgelijke redenen. Dus gewoon een beetje een factor angst als we kunnen. Maar dat is het in een notendop. Dat is hoe een server onthoudt wie je bent. En zodra ze zich kunnen herinneren wie je bent, kunnen ze zich iets herinneren over jou dat de programmeur heeft binnen opgeslagen van deze speciale superglobal genaamd $ _SESSION. En voor PSET 7 gebruiken we het triviaal gewoon naar een int herinneren, namelijk de unieke ID van de gebruiker die is ingelogd, zodat wij weten dat ze er al geweest. Hebt u vragen dan op sessies of cookies en dergelijke? Firesheep werkt niet meer zo goed werkt, en je moet je computer in een speciale promiscuous mode dus je bent daadwerkelijk te luisteren voor het verkeer naast jezelf. Dus als u op dit moment het downloaden van Firesheep, beseffen dat het niet zo gemakkelijk als het ooit was om aan te tonen. Oke. En doe het dan niet in Sanders. Doe het thuis. Databases. Een van de dingen die we deden in PSET 7 zeer bewust werd geven wij u een voorbeeld database tabel voor gebruikers die sommige gebruikers-ID's heeft, sommige gebruikersnamen, en een aantal gecodeerde wachtwoorden daarin. En zoals u zult zien, als je dat nog niet gedaan, je gaat te hebben om de tabel te wijzigen een beetje. Je gaat te hebben om wat cache toe te voegen aan elk van de gebruikers in die tabel, en je gaat te hebben om een ​​andere geschiedenis tafel, een portfolio tabel toe te voegen, of misschien noem het iets anders. Maar in termen van na te denken over hoe dit te doen, laten we open deze tool die we gebruikten op vrijdag, maar als onbekende, het apparaat wordt geleverd met een gereedschap riep phpMyAdmin die toevallig is geschreven in PHP, maar zijn doel in het leven, nadat ik hier aanmelden als jharvard met karmozijn, is om mij een gebruiksvriendelijke manier van kijken en het veranderen van mijn database. 

De database die ik die op het apparaat wordt genoemd MySQL. Dit is erg populair, en het is een gratis open source database die is heerlijk eenvoudig te gebruiken, vooral met vooreinden zo. Wat deze tool kan ik doen om, bijvoorbeeld, is porren rond tafels. Laat me ga je gang en doen. Op vrijdag hebben we een tabel met de naam studenten die was super eenvoudig. Het had 3 kolommen - id, naam en e-mail - en ik handmatig ingevoegd een paar rijen als David en Mike in dit specifieke voorbeeld. Laten we dit een beetje verder, en laten we aannemen dat we meer willen herinneren dan alleen naam en e-mail over een gebruiker. Laat me klik Structuur hier omhoog naar de top. En nogmaals, de PSET loopt u door de vereiste stappen hier, dus maak je geen zorgen als sommige van deze is een beetje snel. Dan ga ik hier op. Ik ga een bepaald aantal kolommen na e-mail toe te voegen want ik wil iets als huis toe te voegen. Ik ben vergeten om een ​​student het huis op te nemen. Laat me klik op Ga naar, en nu hebben we deze vorm, dat helaas een beetje breed is van links naar rechts, maar ik ga naar de naam van dit veld huis te bellen, en dan het type ik nu moet kiezen. Dus laten we eens een korte praten over de verschillende soorten in MySQL want waar PHP is zwak getypt en het soort speelt zo nauw nemen met typen, in een database in het bijzonder het is super belangrijk om daadwerkelijk te typen gebruiken in uw voordeel omdat een van de dingen die MySQL en andere database-engines voor u kan doen is ervoor te zorgen dat u geen valse gegevens in uw database. Dit is een soort van gratis foutcontrole voor u beschikbaar. 

Voor huis we natuurlijk niet willen dat het een int, dat is een 32-bits waarde in MySQL zijn. We hebben praten kort op vrijdag over varchar, wat staat voor variabele lengte char. Wat is dit? Hiermee kunt u aangeven dat u wilt dat dit een string van een soort zijn. Je hoeft niet echt op voorhand weet hoe lang het is, dus we zullen willekeurig zeggen dat een huis naam kan 255 tekens, maar je zou kunnen gaan met 32, 64 - een aantal echt. Maar het voordeel van het gebruik van een varchar over een veld met de naam char is wat? Net intuïtief als ik naar beneden scrollen hier, ziet er char is en er is varchar. Varchar is variabele lengte char, char is een vaste lengte char. Dus alleen gebaseerd op die definitie, wat is het voordeel of nadeel van elk van deze? Met andere woorden, die geeft om het onderscheid, of waarom heeft dat met jou? 

Ja. [Student] Varchar heeft meer flexibiliteit, maar neemt meer geheugen in beslag. Goed. Varchar neemt meer - Laten we eens kijken. Ik weet niet zeker of ik dat goed gehoord. Kun je zeggen dat als meer? [Student] Ik zei varchar waarschijnlijk meer flexibiliteit heeft, maar het neemt wel meer geheugen. Interessant. Oke. Varchar geeft je waarschijnlijk meer flexibiliteit maar neemt meer geheugen. Dat laatste is niet noodzakelijk waar. Het hangt af van de context, maar laten we terugkeren naar dat. 

[Onverstaanbaar student reactie] Precies. Het is eigenlijk zo dat char zal typisch meer geheugen kunnen gebruiken omdat een char, net als in C, is als een string, het is een array van karakters. Dus als je zegt een char veld van lengte 255, de database wordt letterlijk gaat geven u 255 tekens. En als het huis eindigt in MATHER en 6 tekens in totaal, je verspilt meer dan 200 tekens. 

Dus een varchar effectief gebruikt alleen zoveel tekens in als nodig is tot een maximum bedrag. Maar de prijs die u betaalt is eigenlijk de prestaties, mogelijk. Als je van tevoren weet dat al je snaren gaan worden 8 karakters - Bijvoorbeeld, stel dat je wachtwoorden van lengte 8 vereist - het voordeel van het gebruik van een char veld af en toe, maar niet vaak, is een vaste lengte iets geven zoals een wachtwoord want nu de database kan nog slimmer worden. Indien zij weet dat elke char veld elke string in een kolom dezelfde lengte, je terug de functie van random access. U kunt rond te springen tussen de verschillende char velden in uw database tabel omdat denken aan een database als rijen en kolommen. Als elk van de strings even lang, u dat de eerste byte 0 is, de volgende byte is 8 en vervolgens 16 en 24 enzovoort. Dus als alle snaren zijn van dezelfde lengte, kun je springen rond veel efficiënter. Dus dat kan een voordeel in termen van prestaties, maar meestal u niet beschikt over de luxe van van tevoren te weten, dus een varchar is de weg te gaan. Hier is nog een detail dat zelfs Facebook kwam uiteindelijk. Ints zijn geweldig, en we soort van ze te gebruiken standaard elk gewenst moment willen we een aantal, maar het is slechts 32 bits. 

En hoewel Facebook niet helemaal hebben nu 4 miljard gebruikers, er is zeker een aantal mensen die er zijn met meerdere accounts of accounts die zijn geopend en weer gesloten, en dus Facebook zelf geloof ik een paar jaar geleden moest de overgang van int om, zoals wordt treffend noemde, bigint, die op slechts 64 bits in plaats daarvan. Dus dit is ook een ontwerpbeslissing. Je zou verbazingwekkend geluk spreken als je afstudeerproject gaat opstarten, heeft 4 miljard en 1 gebruikers, geven of te nemen, in welk geval het gebruik ints misschien een beetje kortzichtig. Maar in werkelijkheid, uw gebruikers tafel is waarschijnlijk prima met ints. Maar voor iets als PSET 7, zoals uw geschiedenis tafel, u zou kunnen hebben duizenden, miljoenen gebruikers als je evolueren naar etrade.com. Dus terwijl je misschien niet meer dan 4 miljard gebruikers, deze gebruikers heb je wel zou kunnen hebben meer dan 4 miljard transacties in de tijd - koopt en verkoopt en dingen die er in hun geschiedenis. Dus als je verwacht - nogmaals, dit zijn goede problemen te hebben als je zoveel data - als je anticiperen op gegevens van meer dan de grootte van een int, gaan met iets als bigint is een richting die niet vaak genoeg door ontwerpers omdat mensen cijfer dat niet gaat om een ​​probleem te zijn, maar het is zo gemakkelijk om uit te kiezen iets dat groter is dan dat. Decimaal we gebruiken in PSET 7, die vaste precisie specificeert zodat u kunt voorkomen dat de kwesties met betrekking tot praalwagens en tweepersoonskamers en realen en dergelijke. 

En dan is er nog een aantal andere velden hier. We zwaaien onze handen op hen tot op zekere hoogte. Maar data, tijden hebben allemaal een voorgeschreven formaat in MySQL, en het voordeel van het opslaan van data als data en niet varchars betekent dat de database daadwerkelijk kan ze opnieuw formatteren in verschillende formaten, of er een US-formaat of Europese formaat of iets dergelijks - maar je wilt - veel efficiënter dan wanneer het slechts enkele generieke varchar. En dan is er nog een aantal andere binaire, varbinary, blobs. Dit zijn binaire grote objecten, en u kunt ook opslag van binaire gegevens evenals geometrische gegevens in een database. Maar voor ons zullen we meestal de zorg over ints en varchars en dergelijke. Laten we eindigen dit voorbeeld met huis. Huis Ik ga willekeurig zeggen zal 255 tekens. Dan standaardwaarde kunnen we dit doen. We kunnen standaard zetten iedereen in Mather House, bijvoorbeeld. Dat is hoe we aangeven waarmee de databank moet ervoor zorgen dat iemand altijd een waarde heeft. Maar ik laat dat. In feite, voor mensen die leven buiten de campus en niet in een huis, misschien heb ik eigenlijk willen aangeven dat de standaardwaarde voor huis NULL is, en dan moet ik deze doos te controleren en de database is het goed als de gebruiker het huis is NULL vertellen. 

Nogmaals, dit is een ander afweermechanisme u kunt in plaats dus je hoeft niet eens te se in je PHP-code. De database zal ervoor zorgen dat de dingen wel of niet NULL. En dan tot slot, attributen. Geen van deze zijn echt relevant. Binaire, unsigned - geen van die relevant zijn voor een varchar. Index. Weet iemand of onthouden of een keuze maken van wat een index is voor iets als huis? Ook dit is in feite een belangrijke en relatief eenvoudig ontwerpbeslissing. Voor degenen die nog niet hebben gezien, op vrijdag spraken we kort over primaire sleutels. In een database tabel, een primaire sleutel is het veld of de kolom dat een unieke identificatie van rijen in de tabel. Dus in de huidige tabel hebben we id's, we hebben namen en e-mails. Welke van deze is de beste kandidaat om een ​​primaire sleutel zijn, wiens rol is om uniek te identificeren rijen? Waarschijnlijk ID. Ongetwijfeld kunnen we ook gebruik maken van wat wel? Misschien kun je gebruik maken van e-mail omdat in theorie is het unieke tenzij mensen delen e-mailaccounts. Maar de realiteit is dat als u gebruik maakt van een numeriek ID als 1234, dat is slechts 32 bits, terwijl een e-mailadres kan dit aantal bytes of dit aantal bytes. Dus in termen van efficiëntie voor unieke identificatoren, het de neiging om goede praktijken net naar een int gebruiken zelfs als je een stukje tekst kandidaat die je kon misschien wel gebruiken. 

Voor iets als huis, mag dit niet als een primaire sleutel omdat toen slechts 1 persoon kon leven in Mather en 1 persoon in Currier en dergelijke. Ook moet dit niet uniek zijn. Het verschil tussen primaire en uniek is dat bij de huidige tabel ID zou zijn primaire, maar e-mail is niet primair voor de reden dat we zojuist genoemde - prestaties - maar het moet nog steeds uniek. Zo kunt u nog steeds af te dwingen uniciteit zonder dat de vordering dat het een super belangrijke primaire veld. Maar deze is heel nuttig: Index. Als u weet bij voorbaat voor uw afstudeerproject, voor PSET 7, of in het algemeen, dat dit veld huis gaat om iets wat je zoeken op een stuk met behulp van de select trefwoord of iets anders, dan kunt u preventief vertellen de database zijn magische werk en zorg ervoor dat het creëert in het geheugen een fancy data structuren die nodig zijn om zoekopdrachten op basis van huis te versnellen. Misschien zal het een hash-tabel te gebruiken, misschien zal het gebruik maken van een gelinkte lijst. In werkelijkheid, neigt het gebruik van een boom, vaak genaamd een B-tree - niet een binaire boom maar een B-tree - dat een zeer breed boom dat je zou kunnen zien in een klasse, zoals CS124, de datastructuren klasse. Maar in het kort, hoeft u zich geen zorgen te maken over dat bij het gebruik van slimme database software. Je kunt gewoon vertellen, "Index dit veld, dus ik kan zoeken op het efficiënter." 

Als u dit af en je probeert te zoeken voor iedereen in de database die woont in Mather, het zal evolueren in lineair zoeken. En als je hebt 6.000 undergrads alle levende in sommige huis, je gaat de hele tabel te zoeken naar de Matherites te vinden, terwijl als je zegt Index, hopelijk zal het iets dicht bij een logaritmische zoektocht om dat soort studenten te vinden. Dit is slechts een gratis functie aan te zetten, hoewel is een prijs van ongeveer ruimte. Tot slot, auto-increment, dit AI veld, wat betekent dat gewoon als het een int en u niet wilt dat om de zorg te verhogen het zelf elke keer als er een nieuwe gebruiker moet je dat, en elke gebruiker die wordt geplaatst krijgt automatisch een nieuwe ID. Laten we op Opslaan, en nu laten we fout vinden in dit ontwerp. Als ik in Bladeren, merk op dat zowel Mike en mijn huis NULL is. Ik kan gebruik maken van phpMyAdmin om dit handmatig te bewerken. Ik kan naar binnen gaan en typ in Mather en druk dan op Enter, en nu ziet de tafel anders is. Maar let op ik kon iets anders doen ook. David's ID is 1, dus phpMyAdmin weer is slechts een administratieve tool; dit is niet iets wat je gebruikers ooit zult zien. Dus als ik in plaats daarvan klikt u op het tabblad SQL-up top - en opnieuw, zal PSET 7 u kennismaken met meer van deze vragen - Ik kan handmatig uitvoeren van de SQL Structured Query Language commando UPDATE gebruikers SET huis = 'Pfoho' WHERE id = 1. Deze SQL-query's zijn, mooi genoeg, mooi leesbaar van links naar rechts. Werk de gebruikers tabel, stelt u het veld genaamd huis Pfoho waar de gebruiker-ID is 1. Of ik zou zelfs doen wanneer e-mail = 'malan@harvard.edu'. Zolang dat uniek is mij identificeert, zou dat zo goed werkt. Maar ID heeft de neiging om hogere prestaties, dus laten we dat doen. Laten we klik op Go. Oke, geen lecture.users niet bestaat. Wat is mijn fout? Wat is de tabel hier eigenlijk wel? Het heet studenten, alleen maar omdat dat is wat we deden hier boven links bovenaan. Het heet studenten, niet-gebruikers. Dus klik op Ga nu. 1 rij getroffen. Query duurde 0,01 seconden. Als ik klik op Nu Bladeren, Malan woont in Pfoho. Dus dat is een ander smaak van SQL, maar de PSET zal je door een beetje meer van dat. 

Er is een domme beslissing die ik al heb hier gemaakt. Ik zou zeggen dat dit database-ontwerp inefficiënt is want hoe meer mensen ik toevoegen aan de studenten tafel, hoe meer van ons ik beginnen met het toevoegen, des te meer van de TFS ik beginnen met het toevoegen, we gaan beginnen om te zien wat ontslagen in deze tabel? 

Ja. [Student] Toen hij zag dat het in studenten, gebruiken we dezelfde [onverstaanbaar] Dezelfde - Juist, precies. Dus als 400 mensen wonen in Mather, geven of te nemen, uiteindelijk deze tabel gaat tot 400 rijen die "Mather," "Mather zeggen hebben" "Mather," "Mather," "Mather." We verliezen al deze bytes, en er zijn een paar afhaalrestaurants daar. 1, is er de gekke hoek geval als iemand betaalt een hoop geld en hernoemt Mather, hebben we nu onze hele database tabel te wijzigen. Dat gaat niet vaak gebeuren, hoewel Pfoho was ooit de naam North House 15 jaar geleden, zo gebeurt. Maar dat is niet alles wat dwingend. Aantrekkelijker dan een hoek geval als dat van om de gegevens in bulk te werken voor een database is de reden waarom je het opslaan MATHER opnieuw en opnieuw en opnieuw en opnieuw? Dat is een hoop van tekens, 6 tekens. Kunnen we nog beter doen dan dat, vooral voor Pforzheimer? Zo kunnen we beter doen dan dat veel personages. Waarom niet gewoon associëren een unieke identificatie met elk huis en opslaan dat voor elke gebruiker? Dus laten we dit proberen. In plaats van gewoon gebruik maken van de studenten tafel, laat me naar mijn lezing database up hier links bovenaan. Let hier staat Maak tafel. Laat me maak een nieuwe tabel met de naam huizen. Het aantal kolommen zal worden 2. Enter. Nu heb ik 2 velden. Ik ga noemen dit de naam, en het gaat om een ​​varchar met lengte 255, 

maar dat is vrij willekeurig. Laat ik dit hier beneden volgens afspraak. Dus zet een ID hier. Laten we elk huis een unieke identificatie. Laten we elk huis een naam. Laten we aangeven dat de identifier zal unsigned net volgens afspraak alleen positieve getallen. Laten we verder gaan en geven deze een auto-increment veld voor nu. En doen we nog iets nodig? Laten we verder gaan en klik op Opslaan. Nu heb ik een tweede tabel. Let nog even terzijde dit is het iets cryptisch SQL-opdracht dat je had moeten handmatig zo niet met behulp van een administratieve tool zoals phpMyAdmin. Dus een andere reden waarom we het gebruiken. Het is heerlijk handig soort van pedagogische, want je kunt klikken om en uitzoeken hoe dingen werken door gewoon kopiëren en plakken wat phpMyAdmin gedaan. Maar de Create tafel commando is wat net uitgevoerd, en hier is mijn tafel. Laat me nu gaan en gebruik maken van ruwe SQL in plaats van te simpel door te klikken op het tabblad Invoegen. Laat me niet INSERT INTO huizen, en ik ga zeggen de naam van het huis gaat een waarde van 'Mather' hebben. Dat is het. Deze syntax is een beetje meer cryptisch. Dit is de naam van de velden we willen voegen. Dit zijn de waarden die we willen invoegen in die velden. Laat mij klik op Go. Geplaatst is 1 rij duurde 0,02 seconden. Laat ik klik nu op Bladeren. 

Let op, als ik klik op Bladeren, er is Mather, waarvan de id is door automatisering het getal 1. Laat mij er nog een. Laat me gaan in de SQL-tabblad. INSERT INTO huizen. De naam van het huis zal een waarde hebben Pfoho enzovoort. Go. En ik kan blijven doen opnieuw en opnieuw en opnieuw. Of als je te vervelen met behulp van phpMyAdmin, kunt u gewoon gebruik maken van het tabblad Invoegen en niet naar de ruwe SQL typen. Je kunt gewoon bang it out sneller door te typen, bijvoorbeeld Currier, Enter, en nu als we op Bladeren klikt, is er Currier met een ID van 3. Dus dit is wat we bedoelen met auto-increment. Maar nu moeten we iets vast te stellen in studenten. In de studenten wat moet het gegevenstype van het huis veld nu zijn? Het moet een int zijn, toch? Dus het doel hier is om factor uit, ook bekend als normaliseren de tabellen zodat we niet redundant opslaan van informatie in een van mijn tabellen. En nogmaals, is het pad dat we waren hier gaat Mather, Mather zeggen, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, die zeer redundant in termen van de verspilling van de tekens. Dus laat me ga je gang en dit veranderen door te klikken op Structuur, en laat mij ga je gang en afvinken het huis veld, klikt u op Wijzigen, en nu ga ik dit veranderen naar een int zijn. 255 is niet meer relevant. Laat me ga je gang en zeg dat is prima als het nog NULL. Opslaan. Nu tabel studenten met succes is gewijzigd, en nogmaals opmerken huis is een int. Even terzijde, negeer het aantal tussen haakjes als het gaat om ints. 

Dit is voor legacy redenen. Terug in de dag wanneer u niet GUI's hebben, je in plaats daarvan had een command line omgeving, de 10 en 11 respectievelijk aangegeven hoeveel tekens je moet zien in het terminal-venster om daadwerkelijk weer te geven velden. Het heeft niets te maken met de bitlengte van de werkelijke veld, dus we zullen alleen dat negeren voor nu. Nu moet ik gaan in deze tabel. En als David woont in Mather, mag huis niet 0 zijn, dat is een standaard int waarde die het dichtst op NULL. Hij moet leven in huis 1. Laten we willekeurig zeggen dat Mike woont in Pfoho, dus huisnummer 2. Nu is mijn tafel ziet er een beetje meer cryptisch. Maar rekening houden met de efficiëntie. Ik ben nu met behulp van slechts 32 bits om het huis te identificeren, wat betekent dat er slechts 1 canonieke definitie van mijn huis Mather en Pfoho en dat is in de huizen tabel. Dus als ik nu weer aan deze tabellen, denk aan het op deze manier. Hier heb ik mijn studenten tafel, en aan de rechterkant is er deze nummers, 1 en 2. 1 is Mather, 2 Pfoho. We hebben die dezelfde nummers in deze andere tabel, genaamd huizen 1 en 2 en 3 voor de drie huizen. Wat we nu willen doen is de mogelijkheid in code, PHP en SQL, te sorteren van deze weer aan tafels, waar als deze zijn de studenten en dit zijn de huizen, willen we een of andere manier te combineren, zodat een lijn staat met 1, 2 lijnen met 2, en zodat we kunnen achterhalen waar David en waar Mike en waar iedereen woont. Om dit te doen kunnen we het uitvoeren van een SQL-query als volgt uit. SELECT * FROM studenten huizen JOIN ON - En nu, wat velden willen we mee aan de hand? Dus students.house = houses.id. 

Een beetje cryptisch, maar dit deel betekent letterlijk een nieuwe tijdelijke tabel dat is het resultaat van de toetreding tot de studenten en huizen. En hoe wil je hier combineren de toppen van mijn vingers? Stel de studenten huis veld gelijk is aan de huizen 'ID-veld. En als ik nu klik op Start, ik terug ben precies wat ik hoopte te. David is in Mather, Mike is in Pfoho, en ik zie ook de unieke identificatoren. Maar het punt is nu heb ik een volledige tabel. En dus is de afhaalmaaltijden hier voor PSET 7 of echt voor het afstudeerproject: Als u vindt dat u een stuk van informatie redundant opslaan, of het nu een huis, misschien is het een stad, staat en postcode waar ZIP kan meestal, maar niet altijd gebruikt worden als een unieke identificatie, gaan wel door de uitoefening mentaal en dan met iets als phpMyAdmin van factoring erop dat gemeenschappelijke gegevens want vooral als uw website krijgt meer goed gebruikt en meer populair, dit is hoe je ervoor zorgen dat alles is super snel, door aan de database veel aanwijzingen om unieke mogelijk. Dat was veel. Nog vragen? Oke. Laten we daar neemt een 5-minuten pauze en te hergroeperen. Oke. Het volgende is een voorbeeld dat werd enkele jaren geleden gebruikt toen ik CS161, dat is de besturingssystemen klasse op het college die bekend staat om zijn geweldig, maar een gekke hoeveelheid werk, en het richt zich echt op een aantal van de low-level problemen die zich voordoen in besturingssystemen en zelfs in de wereld van databases. 

Het verhaal dat werd verteld door mijn professor, Margo Seltzer, dat jaar was als volgt. Stel dat je een beetje slaapzaal koelkast voor u en uw kamergenoot hebben en jullie beiden echt leuk melk. Dus je komt thuis uit de klas op een dag, je kamergenoot is er nog niet, het openen van de koelkast, en je realiseert je: "Oh damn, we hebben geen melk." Dus u de koelkast sluit, loop je de overkant van de straat om CVS en krijgen in de steeds lange rijen om wat melk te kopen bij CVS. Ondertussen, je kamergenoot komt thuis van zijn of haar klas, komt de kamer, opent de koelkast echt willen wat melk, opent de koelkast en: "Verdomme, geen melk." Zodat hij of zij sluit de koelkast, loopt de deur uit, en gaat ABP om of ergens anders dan CVS waar je niet van plan om tegen elkaar aan om te gaan krijgen wat melk. Natuurlijk een paar minuten later, jullie beiden terug naar huis en nu heb je twee keer zoveel melk als je eigenlijk wilde. En omdat melk, nu het gaat om te gaan slecht, omdat je melk maar dat is niet echt zoals melk, dus nu heb je te veel melk, dus het gaat verzuren. Dit is een vreselijke, vreselijke situatie. Wat zou hebben opgelost deze hachelijke situatie als je de eerste kamergenoot thuis? Ja. [Student] Je had moeten een briefje. [Gelach] Goed. Je had moeten een briefje. Je moet hebben een Post-it notitie of iets dergelijks te zeggen: "Gone voor melk," en dan je kamergenoot conceptueel zou zijn uitgesloten van eigenlijk om dat te doen. Of je kan een stap verder gaan. Je kon de koelkast letterlijk te vergrendelen met een soort van hangslot, en nu je kamergenoot zal letterlijk worden uitgesloten van de koelkast. Als we terug generaliseren van de programmering, je kunt bijna denken aan de koelkast als een soort variabele of een struct, een soort container voor informatie. Het probleem fundamenteel is dat jullie beiden mochten inspecteren of lees de toestand van deze gegevens structuur, maar je zag het op verschillende momenten en toch jullie beiden een beslissing genomen gebaseerd op de toestand van de wereld op de verschillende tijdstippen. Dus had je opgesloten de koelkast, zou je op zijn minst kunnen worden vermeden je kamergenoot van hebben kunnen de toestand van de wereld inspecteren zodat hij of zij kon niet gemaakt heeft, deze beslissing. Dus databases, zo blijkt, voortdurend hebben dit probleem. 

Laten we eens kijken of we een scenario te construeren. Stel dat je een soort van slechte kerel en je gaat aan Bank of America of een van de andere plaatsen op het plein dat een paar geldautomaten naast elkaar te hebben, en een of andere manier je bedacht hoe een pinpas dupliceren - niet zo moeilijk. Het is gewoon een magneetstrip. En dus wat je wilt proberen te doen is dit spel te spelen waarbij je er 1 kaart in 1 machine, een andere kaart in de andere machine, en je wezen wilt proberen om tegelijkertijd geld opnemen, voorstellen want dat verhaal gaat als volgt. De machine op de linker neemt uw kaart en uw PIN-code, en dan zeg je: "Geef me $ 100." De ATM is geprogrammeerd om eerst een select doen op de database of het equivalent - wat-database het is gebruikt - om te zien heeft deze gebruiker zijn ten minste $ 100 in zijn of haar account? Zo ja, dan spugen de $ 100 en aftrekken $ 100 van hun evenwicht. Maar natuurlijk als er meerdere machines hier of meerdere manieren van de inspectie van de toestand van deze wereld, de bankkluis, om te zien hoeveel geld je hebt, veronderstellen dat enkel toevallig de machine links en rechts zowel die vraag op ongeveer hetzelfde moment in de tijd. 

En dit kan zeker gebeuren. Geldautomaten zijn computers deze dagen. Dus als de machine op de linker zegt: "Ja, je moet ten minste $ 100," ondertussen de machine aan de rechterkant zegt: "Ja, u ten minste $ 100 hebben," dan beiden gaan naar hun programma's af en eigenlijk spugen de $ 100 en zeggen: "Voorheen je 200 dollar had." "Laat me het actualiseren van de variabele nu tussen de € 100 nog in de rekening." Maar als beiden hebben uw account gecontroleerd balans en vond dat het 200 dollar en beiden dan doen de wiskunde en bijvoorbeeld 200 - 100, de machines hebben mogelijk uitspugen twee $ 100 rekeningen in elke machine, maar ze hebben alleen bijgewerkt uw som saldo op $ 100. Met andere woorden, je hebt genomen van $ 200, maar omdat ze inspecteerde de toestand van de wereld gelijktijdig en maakte vervolgens een beslissing op basis van die waarde, ze misschien niet de wiskunde uiteindelijk goed. Dus in een bank situatie te je echt wilt een soort van lock-out hebben zodat zodra je de toestand van sommige variabele gecontroleerd dat is echt belangrijk, zoals uw rekeningsaldo, laat niemand anders beslissingen nemen op basis van dat totdat je klaar bent doe je ding, waar in dit geval bent u de ATM aan de linkerkant. Lock iedereen uit. U kunt dit effect daadwerkelijk te realiseren in een paar verschillende manieren. 

De eenvoudigste manier in MySQL is een lijn van SQL dat we je gaf in het probleem set specificatie die lijkt precies op deze. In te voegen in de tabel - wat het ook heet - een id, een symbool, en een aandeel, een aantal aandelen, de volgende waarden, bijvoorbeeld. Als u nog niet hebt gelezen de spec, dit is een voorbeeld met betrekking tot hoe ga je over het het kopen van 10 aandelen van deze penny stock for President Skroob, waarvan gebruikers-ID gebeurt te zijn het getal 7? Dit zegt INSERT INTO tabel worden de volgende id, symbool, en het aantal aandelen van 7, 'DVN.V' en 10. Maar - maar, maar, maar - de tweede regel is het belangrijkste. ON DUPLICATE KEY UPDATE aandelen = aandelen + VALUES (aandelen). Zo totaal cryptisch uitziende op het eerste gezicht. Maar dat deze SQL query, hoewel wikkelt op 2 lijnen, is 1 lange query, het betekent dat het atoom is in de zin dat deze zoekopdracht ofwel wordt samen of helemaal niet uitgevoerd. En per definitie van MySQL, dat is hoe ze deze query uitgevoerd. Het is per definitie in de handleiding gegarandeerd alle voeren tegelijk of helemaal niet. De reden hiervoor is als volgt. Als in dit geval je probeert om 10 aandelen van voorraad te kopen, het is een soort van hetzelfde verhaal als de melk, het is een soort van hetzelfde verhaal als de ATM. 

Als u de fout niet het gebruik van deze syntaxis maar in plaats daarvan selecteren uit de database om het aantal aandelen van deze penny stock te zien heeft de Voorzitter Skroob hebben, en veronderstel dat hij heeft 10 aandelen, en dan nog wat fractie van een seconde later je dan doen een UPDATE-instructie, dat is een ander statement in SQL die zegt ga je gang en voeg 10 meer aandelen aan zijn huidige 10 zodat idealiter het totaal is 20, het probleem is dat in de database van de huidige systemen en omdat in de huidige computers je hebt meerdere processors, meerdere cores - met andere woorden, kunnen computers letterlijk moeten doen meerdere dingen tegelijk - er is geen garantie dat uw SELECT en uw UPDATE in dit geval gaan gebeuren rug aan rug. Dus een slechte scenario zou zijn doe je op de SELECT om te zien hoeveel aandelen van deze penny stock heeft Skroob hebben, en dan gewoon bij toeval een andere database query wordt uitgevoerd - misschien zijn Skroob in een ander browservenster proberen om 10 aandelen te kopen in een ander venster geheel, net als de ATM - en stel dat een andere query krijgt in tussen SELECT en UPDATE. Zo kan het gebeuren dat Skroob nu een aantal aantal aandelen verliest zijn omdat een ander proces wordt de inspectie van de staat van zijn wereld, of krijgt hij meer aandelen dan hij zou moeten hebben. We zullen niet ingaan op de details van wat die bepaalde verhaallijnen zou zijn, maar het punt is als je een variabelen waarde controleren en vervolgens een beslissing nemen, als er een risico dat iemand anders iets tussen die twee verklaringen, zoals kan gebeuren in multiprocessor-systemen, in multicore-systemen, computers met de mogelijkheid om meerdere dingen tegelijk te doen, kan er slechte dingen gebeuren zoals bankrekeningen verkeerd gedebiteerd, kopen twee keer zo veel melk, of in dit geval het verkeerde aantal aandelen. Maar er is een eenvoudiger manier om na te denken over dit. 

Het blijkt dat SQL ondersteunt, als u correct te configureren uw tafel, iets genaamd transacties, die ik zou willen stellen is eigenlijk nog makkelijker te begrijpen dan dit, maar het is niet een 1-liner, dus het is eigenlijk een beetje meer betrokken. Er is letterlijk een statement in SQL genaamd START TRANSACTIE. Net zoals er SELECT, UPDATE, INSERT, DELETE, JOIN en en een hoop anderen, Er zijn zoekwoorden als START TRANSACTIE. En wat je dan doen in het kader van PSET 7 - je hoeft dit niet te doen voor PSET 7, het is nadrukkelijk gewezen, niet noodzakelijk is, maar voor de laatste projecten kan het nuttig zijn - als je belt een query van START TRANSACTIE en dan een andere query en een query en andere, nog een en nog, die vragen zullen niet daadwerkelijk worden uitgevoerd totdat u de SQL-instructie COMMIT, op welk punt, of het nu 2 stellingen of 20 verklaringen, zullen ze allemaal in een keer te worden uitgevoerd, wat betekent dat niemand anders kan per ongeluk kopen te veel melk of betaalkaart te veel geld of kopen te veel aandelen omdat al uw vragen zullen uitvoeren rug aan rug aan rug aan rug. En dit is super belangrijk, vooral als je iets als dit te doen. Dit is een willekeurige voorbeeld dat zegt laten we het actualiseren van de bankrekening door het instellen van een evenwicht dat gelijk is aan balans - $ 1000 waar de rekening nummer 2. En dan de tweede verklaring is laten we nu neerleggen dat 1000 dollar in andermans bankrekening waarvan het rekeningnummer is: 1. 

Met andere woorden, dit is een perfect voorbeeld van waar u wilt er zeker van dat beide verklaringen gebeuren of helemaal omdat anders de klant gaat krijgen geschroefd en je gaat om hun geld te nemen en niet elders deponeren, of de bank gaat om geschroefd waar je naartoe gaat om het geld te storten maar niet echt trek deze af van de rekening van de gebruiker. Dus je wilt ze allebei uit te voeren samen. Zo komt in de wereld transacties. Dus dat is iets om in de rug van je geest, niet zozeer ten behoeve van slechts een afstudeerproject, maar als u wilt uw uiteindelijke project ergens te nemen, als je wilt op te starten wat gezelschap rond het, als je wilt een aantal studenten groep probleem op te lossen op de campus en eigenlijk een live, actieve website, dit zijn de soort van subtiele bugs die kunnen ontstaan als je niet helemaal door te denken wat er kan gebeuren als 2 personen proberen toegang tot uw website op letterlijk hetzelfde moment in de tijd, waarbij hun vragen anders zou raken met elkaar verweven. 

Klaar voor wat JavaScript, een teaser daarvan? Dit is onze laatste taal voor het semester. Oke. Gelukkig, JavaScript ziet er heel, heel, heel vergelijkbaar met de 2 talen, C en PHP, we hebben tot nu toe gedaan. Er is geen JavaScript PSET 7, maar het is een ongelooflijk nuttig instrument als het gaat om het doen van web-based laatste projecten of eigenlijk alleen maar web programmeren in het algemeen. Dus een snel overzicht van iets genaamd DOM. Hier is een super eenvoudige web-pagina die gewoon echt zegt hallo, wereld zowel in de titel en in het lichaam. De inkeping is voorgesteld enige tijd, Er is inderdaad een hiërarchie aan webpagina's. Ik kon tekenen ditzelfde stukje HTML als een boom, terugdenkend aan onze discussies van de data structuren in C, als volgt. Ik heb een aantal speciale root node genaamd de document node, en we zullen zien de analoge van dit in JavaScript in slechts een moment. Het eerste kind en enige kind van dat in dit geval is de HTML-tag. Er is geen directe mapping van de doctype. Dat is een speciale ding, dus moeten we het gewoon negeren als het gaat om deze DOM, Dit Document Object Model boom. Merk op dat de HTML-tag, die ik willekeurig heb afgebeeld als een rechthoek, heeft 2 kinderen: hoofd en lichaam. 

Die worden op dezelfde wijze getekend als rechthoeken. Het is zinvol picturaal dat hoofd naar links van het lichaam. De implicatie is dat het hoofd eerst komt in de boom. Dus er is eigenlijk een bestelling tot een boom als je tekenen als dit, hoewel de vormen en wat al niet zijn willekeurig. Hoofd heeft inmiddels een kind genaamd titel, en de titel heeft eigenlijk zijn eigen kind, dat is "hello, world", die ik met opzet trok als een ovaal hier om het enigszins afwijken van de rechthoek. Deze vakken zijn elementen, terwijl hello, world is echt een tekst node. Dus het is een knooppunt in de boom, maar het is een ander soort knooppunt dus ik trok het willekeurig anders. Ook heeft het lichaam een ​​kind genaamd hello, wereld ook, zo verschillend knooppunt hoewel ze toevallig zijn dezelfde tekst, maar ik heb getekend met behulp van dezelfde vorm. Dus who cares? Nou, wat is er leuk over HTML is dat het hoeft deze hiërarchische aard. En wat leuk over JavaScript en met name de bibliotheken die vrij beschikbaar en populaire zoals jQuery, kunt u navigeren door de boomstructuur zo verbazingwekkend eenvoudig. Elk van de dingen die we in C deden met pointers en doorlopen van bomen en recursing op knooppunten linker kind naar rechts kind, opeens kunnen we sorteren van voor lief nemen als zijnde verbazingwekkend verhelderend, zo niet een beetje frustrerend maar lang niet op een efficiënte manier om te gaan over het programmeren. En dus met deze hogere programmeertalen zoals JavaScript zullen we in staat zijn om deze boom navigeren nog veel meer intuïtief. 

En inderdaad de syntaxis gaat worden heel vertrouwd. Als je nog nooit hebt gezien JavaScript eerder, dit is echt een mooie referentie van de Mozilla mensen, de mensen die Firefox, dus voel je vrij om dat te bladeren op uw gemak. Wat vindt u - en deze dia's zijn identiek aan wat we vroeger de andere dag - Op dezelfde wijze wordt de belangrijkste weg. Dus als u een programma in JavaScript te schrijven, is er geen hoofdfunctie. Je gewoon beginnen schrijven van code. Maar een belangrijk onderscheid tussen JavaScript en C en PHP is dat terwijl C en PHP tot nu toe zijn uitgevoerd server-side door het apparaat in dit geval of meer algemeen door een server, Javascript via ontwerp wordt meestal uitgevoerd door een browser. Met andere woorden, kunt u schrijven JavaScript-code, zoals we gaan, op een server in het apparaat, maar u opnemen onder uw HTML, onder uw CSS, onder uw GIF's en uw PNG's en uw JPEG-afbeeldingen zodat wanneer de gebruiker uw webpagina bezoekt, als je JavaScript gebruikt, dat JavaScript code komt van de server naar de browser, en het is de browser die daadwerkelijk uitvoert. Dit heeft dus betekenisvolle gevolgen voor zelfs intellectuele eigendom. Het is een beetje dom om te denken aan het beschermen van uw IP als het gaat om JavaScript-code omdat door de aard van de taal het wordt gewoonlijk uitgevoerd browser kant. 

U kunt verduisteren het, wat betekent dat je kunt maken het er gek en lelijk zonder witruimte, vreselijke namen van variabelen, zodat het moeilijker voor mensen om uw IP te stelen, maar de belangrijkste is dat het browser zijde uitgevoerd. Ook al als een terzijde JavaScript gebruikt kan worden server-side, de meest voorkomende use case op dit moment nog op de browser. En hier is hoe het eruit ziet. Hier is een if-else-if-else constructie, net als C, net als PHP. Hier is een Booleaanse expressie wanneer u "of" 2 dingen samen. Hier is wanneer je "en" 2 dingen samen. Hier is een switch, die vergelijkbaar is met PHP in dat je kunt schakelen op verschillende soorten waarden. Loops eveneens hebben voor lussen hier, die identiek zijn gestructureerd aan wat we al eerder gezien. Terwijl loops, we nog hebt doen terwijl loops. Variabelen, ooit zo iets anders. Je hoeft variabelen op zoals je in PHP en C, maar eveneens is JavaScript zwak getypt. Je hoeft niet te specificeren int of float of string of iets dergelijks meestal. U kunt opgeven var. Je hoeft niet te var opgeven, maar het heeft gevolgen als je dat niet doet. Meestal als je weglaten var, u per ongeluk een globale variabele in plaats van lokaal. Dus laat me voorstellen dat je gewoon bijna altijd var zeggen en dan de naam van de variabele. Het is niet een soort, het is gewoon var voor variabele. Dit zou een voorbeeld zijn, of het nu 123 of "hello, world". Arrays zijn aanwezig en syntactisch vergelijkbaar met PHP. Ik zeg var getallen en dan moet ik weer vierkante haken gebruiken om een ​​variabele te declareren waarvan het type matrix dat deze specifieke getallen in het gescheiden door komma heeft. En tenslotte is de enige die echt er anders uit. Bedenk dat in PHP we een associatieve array hebben geïmplementeerd voor een student zoals Zamyla dat kan er zo uitzien, waar de variabele wordt genoemd student. De vierkante haken betekenen hier komt een array. 

Het feit dat ik niet numerieke indices maar snaren met behulp van - id, huis, en naam - betekent dat dit een associatieve array, en deze pijlen met de gelijk-teken en de schuine beugel betekent dat de sleutel "id", de waarde 1; de sleutel is "huis", is de waarde Winthrop House; de sleutel is "naam", de waarde is Zamyla Chan. Zodat er 3 sleutels binnenkant van deze associatieve array, die elk zijn eigen waarde. We hebben gezien dat in PSET 7, of je al snel zal in JavaScript hetzelfde idee, maar het gaat er als volgt uitzien. Dus var student - geen dollarteken en geen melding van het type nog steeds, maar var - is gelijk aan en open vervolgens accolades omdat in JavaScript als je sleutel waarde paren, u daadwerkelijk gebruik maken van zoiets als een object. En degenen onder u die rekening heeft APCS of iets dergelijks zou kunnen herinneren voorwerpen uit Java of soortgelijke talen. JavaScript is niet Java, in de eerste plaats. Het was een bewuste ontwerpbeslissing jaar geleden naar knock off iets anders dat populair was, zijn naam, ook al is het geen fundamentele relatie tot zichzelf Java heeft. JavaScript heeft objecten en u deze maken door middel van de accolade-notatie. Objecten in JavaScript zijn vrij veel overeen met associatieve arrays in PHP als het gaat om het opslaan van gegevens in hen. 

Maar nog krachtiger in JavaScript kan je associeert heel gemakkelijk functies binnenkant van een object, en hoewel u kunt dit doen in andere talen, het is nogal een gemeenschappelijk paradigma, zoals we zullen zien. Kortom, dit object vertegenwoordigt een student, die is bijzonder Zamyla, en het is vergelijkbaar conceptueel, maar syntactisch anders dan dit. Laten we eigenlijk JavaScript te gebruiken in een bestand. Het blijkt dat er een script-tag. We hebben gezien een stijl tag en we hebben gezien andere HTML-tags. Het script tag ook daadwerkelijk wat JavaScript code bevatten. Laat me gaan in het apparaat, waar we een aantal broncode pre-gemaakt. Ik heb nog niet gepost nog niet op de website, maar ik zal dat doen na de les. Laten we open deze, blink.html. Terug in de jaren 1990, was er letterlijk een HTML-tag genoemd de blink-tag, en dit was een van de meest heerlijk overused tags op het internet waarbij je zou een bezoek brengen aan jaren 1990 stijl webpagina en beginnen met het zien tekst knipperen je van deze, de resultaten van de markies tag, had die tekst gaat als volgt. Een van de weinige momenten waarop de wereld daadwerkelijk heeft overeenstemming bereikt over een web-standaard, iedereen over de hele linie doodde de blink-tag een aantal jaren geleden. Maar we kunnen leven in te blazen met JavaScript als een demonstratie van de kracht die je hebt als je een programma schrijven binnen van een webpagina. Laten we eerst overslaan van de nieuwe dingen en richten zich alleen op de oude. 

Hier is het oude spul in dit voorbeeld. Ik heb een HTML-tag, een hoofd-tag, en een titel tag. Daarna heb ik een body-tag hebben hier met een div, die recall is gewoon een rechthoekige indeling van de pagina die ik heb gegeven een unieke ID willekeurig van "begroeting" op, zodat ik een manier uniek te verwijzen naar het hebben, dat heeft een aantal zeer eenvoudige tekst: hello, wereld. Laat me nu omhoog te scrollen naar de top van dit bestand en zien wat er nieuw is. Het eerste ding dat is nieuw-up top is de script-tag, en de binnenkant van het script tag aankondiging die ik heb verklaard een functie. Om een ​​functie in JavaScript, redelijk vergelijkbaar met PHP te verklaren, je letterlijk schrijft functie dan is de naam van de functie, haakjes, en misschien wat argumenten als het duurt enige. Dan heb ik mijn accolade zoals gewoonlijk, en nu hebben we een aantal enigszins nieuwe code, maar laten we eens kijken wat dit betekent. Dus var div, betekent dit dat geef me een variabele genaamd div. Ik had noemde het foo, maar ik wilde dat het genoemd worden div om redenen die duidelijk zijn in een tweede. Dan blijkt in JavaScript - en dit is JavaScript code die is ingesloten in mijn web pagina - is er een speciale globale variabele van soorten genoemd document. JavaScript is in feite een object-georiënteerde taal. We zullen niet in detail treden in 50 over wat dat betekent, maar weet voor nu dat een object is vrij veel als een struct. Zoals we zagen de weg terug toen in een van de vroegste probleem stelt waar we veel informatie in een struct, op gelijke wijze wordt gedocumenteerd een speciale struct die wordt geleverd met de browser, wordt geleverd met een webpagina. Het is niet iets wat ik gemaakt. Binnenkant van dit document structuur, hoewel, je hebt niet alleen gegevens maar je hebt ook functies. 

En elke keer dat je een functie binnen een structuur, binnenkant van een object, het heet een methode. Maar het is hetzelfde. Een methode is een functie die gewoon zo gebeurt te zijn binnenkant van iets anders. Dit betekent dus dat deze speciale globale variabele document met de naam heeft een functie genaamd getElementById dat letterlijk doet. Het zal je een element uit de DOM, Document Object Model boom, waarvan de ID is in dit geval begroeting. Met andere woorden, al die tijd hebben we besteed aan datastructuren in het spel komt hier. Deze foto van een DOM-dat we een moment geleden, ook al is de pagina is een beetje anders, als ik een div op deze foto, wat document.getElementById zouden terugkeren om me daadwerkelijk zal een pointer aan de rechthoek in de boom, een verwijzing naar de rechthoek in de boom. Dus dat is wat het betekent om daadwerkelijk op te roepen een van die functies. Ook in dit geval is het een div. Het is niet een lichaam of een titel. Dus laten we eens kijken wat ik dan doen met deze div nu dat ik het binnen heb van deze variabele genaamd div. Het blijkt met JavaScript heeft u de mogelijkheid om de CSS van uw pagina dynamisch te veranderen. Tot nu toe, alle van de CSS die we hebben, gedaan zij het beperkte, is in stijlkenmerken, of waar anders hebben we CSS? Ik soort van verwend die ene. In de stijl label aan het begin van het bestand. Of derde plaats is in? 

Een extern bestand, iets. Css. Dus dat zijn de 3 plaatsen waar we CSS tot nu toe gedaan, maar de vangst is dat we moeilijk het allemaal gecodeerd. U beslist als je dook PSET 7, hebben we besloten voordat de les wat onze CSS zou zijn. Maar als u wilt uw CSS te veranderen, kun je eigenlijk doen als je eenmaal een echte programmeertaal. CSS, HTML - niet programmeertalen. JavaScript is. Dus het blijkt dat zodra je een van die rechthoeken hebben van de boom genaamd de DOM, heeft zelf een aantal gegevens binnen van het. Dus de div die ik net pakte uit de boom heeft wat we noemen een woning binnen van het riep stijl en de stijl woning heeft zichzelf een eigenschap genaamd zichtbaarheid. Ik zou weten dit alleen door het opzoeken van een CSS handleiding. Het blijkt dat er een zicht CSS-eigenschap die doet wat het zegt. Het maakt iets zichtbaar of niet, zichtbaar of niet. En hoe je dat doet is het volgende. Ik programmatisch vraag of de zichtbaarheid van deze div is verborgen, wat moet ik veranderen in? Zichtbaar. Else if de zichtbaarheid van deze pagina is niet verborgen, logisch ik maken het verborgen. Ik heb geen idee waarom het zichtbare en verborgen en niet zichtbare en onzichtbare. Dit was een slecht ontwerp besluit langs de weg. Maar die zijn inderdaad tegenstellingen in CSS: zichtbare en verborgen. Dit zorgt er alleen betekent wijzigt u de CSS van mijn dossier aan en uit, aan en uit voor die div. Maar nogmaals, dit is een functie genaamd knipperen. Wanneer is het knipperen functie genaamd? Het blijkt dat er nog een speciale globale variabele genaamd venster, in dezelfde geest te documenteren, maar dat dit document verwijst naar uw webpagina, zoals de DOM-structuur, de HTML-u verzonden vanaf de server, venster verwijst naar de chromen omheen, de adresbalk, de titelbalk, en al dat spul rond uw webpagina. 

En het blijkt dat het window-object een speciale functie binnen van het genoemd setInterval heeft dat doet wat het zegt. Zij zal een interval - in dit geval om de 500 milliseconden - en, neem een ​​gok, wat gaat het om om de 500 milliseconden doen? Het gaat om die functie uit te voeren knipperen. En wat is leuk hier is dat we dit hebben gedaan in C ook al hebben we nooit gedaan. C heeft wel iets te noemen functie pointers, waar u kunt functies pas rond als argumenten. Ook in JavaScript kan je langs de naam van een functie in een andere functie. En let op wat ik doe. Ik doe dit niet. Als ik tussen haakjes achter het knipperen, dan zou dat betekenen noemen het knipperen functie. Als ik weglaten, dat betekent hier is het knipperen functie zodat setInterval kunnen noemen om de 500 milliseconden. Dus het eindresultaat, afschuwelijk het ook is, is dat als ik naar localhost en ga naar blink.html, Ik heb nu dit gebeurt opnieuw en opnieuw. En als ik eigenlijk Element inspecteren, laten we eens kijken of we kunnen dit zien. Laat me Inspecteer element, laat me naar beneden scrollen een klein beetje, ik bepaal Elements hier, en let op de DOM binnenkant van inspecteur Chrome. Het is letterlijk het veranderen van heen en weer om de 500 milliseconden. Als we naar onze vriend Nate, Als je je ooit afgevraagd hoe dit werkt, vergelijkbaar idee met een interval, maar Nate is eigenlijk het maken van een zeer effectief gebruik van kleur in dit specifieke geval. Dus wat kunnen we nog meer eigenlijk doen met dit? Laten we openen een ander voorbeeld en probeer iets dat is programmatisch nog nuttiger dan het maken van dingen knipperen. Laat me gaan in onze formulieren directory vandaag en gaan in form0. Dit was de lelijkste mogelijke vorm die ik kon bedenken, en laat me gewoon je te laten zien hoe het eruit ziet in een browser. 

Laat me gaan in localhost / vormen, en dit is form0. Dit is een super lelijke HTML-formulier dat een paar velden voor e-mail heeft, voor een password, wachtwoord en dan een beetje selectievakje in te stemmen met een aantal voorwaarden. De vangst is als ik naar dit formulier in en ik wil niet dat u mijn e-mail adres, Ik wil niet misschien ga akkoord met de algemene voorwaarden, kan ik klik Registreer en het laat me door hoe dan ook. Dit gebeurt te onderwerpen aan een domme PHP bestand met de naam dump.php. Alles wat het doet is het afdrukken van de inhoud van de $ _GET alleen voor diagnostische doeleinden. Dat was wat werd ingediend door de gebruiker op dit moment. Maar stel dat we eigenlijk willen de gebruiker het indienen van formulieren te valideren. Laat me gaan in versie 1. Dit is form1.html. Het ziet er esthetisch net zo slecht, maar merken hoe luxe het is. Als ik klik op Registreer zonder samenwerking, word ik uitgescholden. "U moet uw e-mailadres." Oke. Dus laat me proberen. Dus malan@harvard.edu. Ik heb geen behoefte aan een wachtwoord. Registreren. "Je moet een wachtwoord." Oke. Dus ik zal een wachtwoord van karmozijnrood. Registreren. "Wachtwoorden komen niet overeen." Ik moet nu typen in karmozijnrood hier. Ik heb per ongeluk gecontroleerd dat. Registreren. "Je moet akkoord gaan met de voorwaarden." Oke. Mee eens daar. Registreren. En nu toont me de diagnostische uitvoer daar. 

Dus wat is er gebeurd? We hebben dit vermogen om formulierverzendingen valideren. In feite, als je dat deed duik in PSET 7, er is een excuses functie dat maakt het vrij makkelijk om schreeuwen tegen de gebruiker met een bericht op het scherm. Ik ben met behulp van een iets ander mechanisme, de alert functie, dat is niet een functie die is glimlachte op, omdat het maakt erg lelijk gebruiker berichten. Maar laten we eens kijken wat ik hier doe. Dit is form1.html, en merk dat ik een aantal mooie bekende syntax hebben: body-tag, form-tag, action attribuut, methode attribuut. Maar let op ik heb gezien mijn vorm een ​​unieke ID voor het gemak. Dan heb ik een e-mail veld waarvan het type is tekst, een wachtwoord veld waarvan het type is met een wachtwoord, bevestiging veld waarvan het type is met een wachtwoord, en vervolgens een vakje waarvan de naam is akkoord hier, type checkbox. En dan heb ik een submit knop. Maar let op de top wat ik nog meer heb. In de eerste plaats is er een ander gebruik van het script tag. Als u een aantal JavaScript-code in een ander bestand, net als met CSS kun je opnemen. En dat doe je met een script de bron, en dan merk ik blijkbaar het aansluiten van om googleapis.com om een ​​zeer lange weg, maar waarvan de bestandsnaam eindigt in jquery.min voor minimum. js. jQuery is een super populaire bibliotheek voor JavaScript dat maakt JavaScript des te meer gebruiksvriendelijke te gebruiken. Het is effectief een de facto standaard. Dus ook al wat je gaat zien is niet zuiver JavaScript op zich, Het is een bibliotheek op de top van JavaScript net als de CS50 bibliotheek is een laag op de top van low-level C-code, de realiteit is bijna iedereen op het internet het gebruikt. Dus dit zijn geen zijwieltjes. Dit is gewoon de beste oefenen deze dagen. Nu hieronder zien dat is mijn eigen script-tag, en let op wat ik hier heb gedaan. Het blijkt dat jQuery doet iets speciaals. JavaScript heeft dollartekens, maar ze zijn zinloos. 

Zij zijn als de letter A of B of C. jQuery is gewoon aangenomen conventie of soort van aanspraak op het feit dat $ zullen hun speciale symbool. Dus zodra het laden van deze wereldwijde JavaScript-bestand hier met de script-tag, heeft u toegang tot een speciale globale variabele die heet $. Het is meer behoorlijk heet jQuery, maar dat ziet er niet bijna net zo sexy als $. Maar $ heeft geen speciale betekenis. In PHP had een speciale betekenis. Je moest het hebben in de voorkant van een variabele. Dit is gewoon een sexy ding dat ze nam. Wat is hier aan de hand? Merk op dat ik ben langs de jQuery functie mijn globale variabele document en dan ga ik bellen. klaar. Wat jQuery in wezen doet is het u toestaat om te nemen wat vanille JavaScript dingen als het document object, het window-object, en als je doorgeven in de jQuery functie - en weer, om duidelijk te zijn, dit is een functie genaamd jQuery - wat het doet is het weer bij u een speciale versie van het document dat meer functionaliteit gekoppeld. Dus in ruwe JavaScript is er geen klaar-functie, maar als je langs document naar de jQuery functie eerst, Het weer bij u een speciale versie van het document object dat heeft meer fancy features. En dat is waarom mensen het leuk vinden. Het maakt gewoon dingen makkelijker te doen, want we staan ​​op het punt om te zien. Dus wat doet deze regel code bedoel je? Deze regel code betekent hier wanneer het document klaar is - Met andere woorden, zodra de browser wordt uitgevoerd lezen van dit bestand boven naar beneden - ga je gang en voer de volgende functie. Wat is echt interessant in JavaScript - en PHP heeft dit ook - is anoniem functies. In javascript kunt u verklaren functies die geen naam hebben, maar ze hebben wel een lichaam. Let op wat hier gebeurt. 

Dit is een functie genaamd klaar, en het betekent gewoon het volgende doen wanneer de hele webpagina klaar is, als het allemaal is al lezen in van de server. Wat wil je doen? Ik wil een stuk van code uit te voeren. Merk op dat we niet willen deze code uit te voeren meteen. Als ik weggelaten dit, zou dit onmiddellijk betekenen beginnen de uitvoering van deze regels code. Maar het feit dat ik zeg nee, nee, nee, wikkel dit in een anonieme functie als deze betekent nog niet uit te voeren is; uiteindelijk noemen. We zagen dit een moment geleden in onze vorige vorm voorbeeld. Welke functie hebben we uiteindelijk te bellen, 500 milliseconden later? Blink. Dus hetzelfde idee. Nogmaals, zelfs als dit ziet er een beetje raar, gewoon voor nu op het geloof dat om een ​​anonieme functie die uiteindelijk heet verklaren, je gewoon schrijft function () { Dus wat code gaan we uiteindelijk uit te voeren? De volgende. Dit ziet er ook een beetje nieuw, maar dit betekent hier is de jQuery functie, en dit is nu een snelkoppeling. Dit stukje HTML aan de onderkant van het scherm heeft natuurlijk een boom vertegenwoordiging. Het is niet deze. Deze pagina is interessanter dan deze hello, world voorbeeld. Maar er is een boom die overeenkomt met deze HTML. Het zou een pijn in de nek te hebben om een ​​soort van recursieve functie te implementeren om te beginnen bij de wortel knoop en zoek het knooppunt waarvan de ID is registratie. Dus wat jQuery maakt super makkelijk voor ons is letterlijk dit. Ga je gang en geef me alles wat div of welke vorm dan ook, wat dan ook HTML-element heeft een ID van de registratie. Dit komt overeen met document.getElementById ('registratie'). 

Waarom doen mensen zoals jQuery? Omdat het korter te typen. Maar dat is alles wat het is. Het is hetzelfde idee. Geef me de tag waarvan het ID is registratie. En als die tag, die toevallig ook een formulier, wordt ingediend, ga je gang en voer deze code. Dus laten we eens een nu kijken hoe we het doen formulier validatie. De syntaxis is weliswaar cryptisch op het eerste, maar wat gebeurt er? Als deze regel code waar is, ga ik schreeuwen tegen de gebruiker zijn of haar e-mailadres op te geven. Dus wat is deze regel code? $ Betekent jQuery. Nu merken. Dit is een soort CSS. Als je hebt gedoken in CSS nog, weet je dat dit het element waarvan de ID is registratie betekent. De ruimte betekent vinden van een kind of een afstammeling van de registratie van wie de naam wordt ingevoerd. En dan dit ding tussen vierkante haken is een beetje filter. En zelfs als deze cryptische ziet, betekent dit dat ga je gewoon naar het formulier waarvan het ID is registratie, ga naar het input element binnenkant van die waarvan de naam is e-mail, en dan krijgt zijn waarde, ongeacht de waarde ervan ook mag zijn - asdf als dat is alles wat ik getypt of malan@harvard.edu als dat is wat ik heb getypt. Dus als de waarde van e-mail van het formulier veld == niets, schreeuwen tegen de gebruiker. Anders als de waarde van het wachtwoord veld == niets, schreeuwen tegen de gebruiker. 

Else if de waarde van het wachtwoordveld niet gelijk aan de waarde van de bevestigingsveld dat was de andere vorm element, schreeuwen tegen de gebruiker. En dan tot slot - en deze heeft ook een aantal nieuwe syntaxis van de eigen, maar als je eenmaal hebt gezien, het is op zijn minst een beetje meer redelijk - anders als het formulier waarvan het ID is registratie heeft een input element waarvan de naam is het erover eens en het wordt gecontroleerd, ga je gang en schreeuwen tegen de gebruiker. Dus ik ben het helemaal toegeven dat dit volledig overweldigend op het eerste gezicht. Het is een stuk van de nieuwe syntax. Maar al jQuery volgt dit soort patronen. En eerlijk gezegd, ik wist niet eens dat dit bestond tot een paar minuten geleden. Ik googlede, "Hoe weet je controleren of een checkbox is aangevinkt in jQuery?" en dit is de syntaxis, want er is op verschillende manieren om het te doen met de werkelijke rauwe JavaScript-code. Dus als de eerste pagina van het probleem Set 7 benadrukt, PSET 7 is heel erg een oefening in bootstrapping jezelf waar geven we, hopelijk, een conceptueel kader waarmee de PSET aan te pakken. 

Maar zoals vaak het geval is met web design, het is aan jou echt rondneuzen, nemen stukjes code en voorbeelden van het web zo lang als je daarnaar verwijzen Volgens de voorwaarden op die eerste plaat, en beseffen dat het leren van HTML, CSS, JavaScript en zelfs SQL is echt bedoeld om dit thuis oefenen als we beginnen met deze opleiding wielen opstijgen zijn. En beseffen ook dat er zo veel meer dingen die je kunt doen met een browser. Binnenkant van de meeste van deze elementen zijn er andere dingen genoemd event handlers. En hoewel we keek alleen maar naar degenen genoemd onsubmit en onready, je kunt dingen doen als onkeydown, onkeyup, zoals wanneer de gebruiker een toets aanraakt, kunt u luisteren naar dat en omhoog. Gmail heeft sneltoetsen. Hoe Google te implementeren sneltoetsen zoals C voor componeren? Ze luisteren naar gebeurtenissen, zoals ze genoemd, zoals onkeypress of onkeyup en onkeydown. Als je ooit zweefde de muis over een aantal menu-optie en alle van een plotselinge, voila, verschijnt er een menu of de grafische verandert van kleur, hoe doen ze dat? In plaats van luisteren onready of onsubmit, je luistert naar onmouseover of onmouseout. 

Dus in het kort, met deze zeer eenvoudige basics die we hebben begonnen met het oppervlak van vandaag krassen en we zullen duiken verder naar op woensdag, je hebt, in toenemende mate, macht om de dingen die je al bekend bent met implementeren. Dus laten we daar een einde, en we zullen dit blijven op woensdag. 

[CS50.TV]