DAVID Malan: Oke. Dit is CS50, en dit is het einde van de week negen. Het is al meer dan een wervelwind de afgelopen dagen. En probleem stelde zeven, als je knie diep in het, beseffen dat er nogal beetje nieuw dat er in zit. Maar laten we eens kijken of we niet kunnen stuk alles samen hier kort daarvóór ruimend af in nog een andere richting en zien waar anders kunnen we gaan. 

Tot nu toe hebben we gesproken over HTML. We hebben gesproken over CSS. We hebben gesproken over PHP. Je bent begonnen met SQL ervaren. Vandaag gaan we een beetje praten over JavaScript. Maar hoe al deze ongelijksoortige doen talen in elkaar passen? 

Dus spraken we vorige week over de begrip hebben van een server. Dus laten we gewoon trekken deze rechthoek als een webserver hier. En een web server dient zeker bestanden. En sommige van deze bestanden kan HTML-bestanden. Dus een van de dingen die een webserver kan spugen kan een bestand dat zullen we gewoon tekenen als deze met een aantal HTML. Dus in lekentaal, wat werkt HTML laten doen? 

PUBLIEK: Pagina blik mooi. 

DAVID MALAN: OK, maak een pagina zien er leuk uit, hoewel ik denk dat ik heb bewezen die anders. Dus HTML doet laat je lay-out pagina's structureel, en het laat je soort van esthetisch markeren van een pagina, markeren statische inhoud, zodat u Vervolgens kunt het bekijken met een web browser. 

Maar dat is de sleutel. Het is statische inhoud. Je schrijft het, je het op te slaan, en dan heb je het schip. En de web server dan dient het aan uw bezoekers. 

Maar we stileren dingen met behulp van een andere taal helemaal. We begonnen met een stijl attribuut gebruiken bepaalde tags. En de stijl attribuut laat ons stellen dingen zoals grootte en kleur lettertype. En je hebt waarschijnlijk begonnen te ontdekken, of je binnenkort voor de definitieve projecten mogelijk, nog andere eigenschappen die u kunt gebruiken in CSS. En dus in lekentaal, wat echt dan doet CSS doen? Dat zijn slechts voorbeelden daarvan. Wat doet het u laten doen dat HTML lijkt niet uit wat we hebben tot nu toe gezien? 

PUBLIEK: Definieer stijlen door jezelf. 

DAVID Malan: Definieer stijlen door jezelf. Dus dingen zoals klassen definiëren als u hebben ondervonden, of uniek nodes te identificeren in een document zodat dat je ze kunt stileren. Maar meer in het bijzonder, zou ik zeggen dat CSS echt laat je dingen de laatste mijl en kunt u aangeven veel nauwkeuriger de esthetiek, terwijl HTML voor het grootste deel laat u uw pagina's te structureren. 

En ook al zijn er een aantal defaults, als we de tag voor zagen een post-tag, die grofweg maakte dingen groot en vet. Dat is een vrij algemene definitie van het label - groot en vet. Wat lettergrootte is dat? Welke kleur is dat? Hoe vet is dat? En CSS kunt u fijner tune dat soort dingen. Naast indeling, zoals sommige van jullie hebben gezien. 

En eerlijk gezegd, CSS is een beetje van een rommelige taal. Het is zeer krachtig in die je kunt maken letterlijk elke website die je hebt gezien op het web vandaag mee, maar het is een soort van een pijn in de nek. En sommigen van jullie hebben je hoofd gestoten tegen de muren al gewoon te doen iets stoms als centrum een ​​menu op probleem stelde zeven als je hebt gekregen om dat punt reeds. 

Maar beseffen, die dingen makkelijker in de tijd. Je begint om patronen te merken. En nogmaals, zal Google je vriend voor de verschillende manieren waarop u kunt oplossen van dergelijke problemen. 

En ik durf te zeggen met CSS en HTML meer algemeen, kun je problemen op te lossen in vele andere manieren, die zou zeer terecht zijn, dan kon in iets als C, zelfs nu PHP of JavaScript. Er zijn gewoon veel verschillende manieren om dingen uit te leggen. 

Maar dit begon te krijgen rommelig, zeiden we. Gewoon een soort van vermenging uw HTML en je CSS met het attribuut stijl was een beetje slordig. En zo zijn we in plaats daarvan zei, soort abstract gesproken, dat je moet tenminste gaan factor uit uw CSS waarschijnlijk. Niet uw stijl kenmerken, maar in ieder geval gebruik maken van de style-tag in wat een deel van de webpagina? 

PUBLIEK: Head. 

DAVID Malan: In het hoofd. Tot nu toe hadden we alleen de titel omhoog , maar je kunt ook een stijl taggen, en u kunt uw CSS ruwweg zetten spreken naar de bovenkant van de pagina. Maar dan hebben we nog een stap verder en we ingecalculeerd dat meer in een apart bestand. 

En dus deze twee bestanden waren een of andere manier nu gekoppeld. En inderdaad was de tag die dat deed. En wat was een van de overkoepelende motivaties voor factoring onze CSS des te meer? 

PUBLIEK: Herbruikbaarheid. 

DAVID Malan: Herbruikbaarheid. Rechts? Je hebt misschien gezien in-p set zeven reeds dat veel van de pagina, de kopen pagina, de verkoop pagina, portfolio pagina, zijn waarschijnlijk gestructureerd enigszins vergelijkbare wijze. Er is een CS50 financiën logo boven tenzij je besloten hebt om het te veranderen. Er is een voettekst onderaan elke pagina. En CSS kunt u dan om het uit factor het in een apart bestand, zodat als u wilt globaal iets te veranderen over je hele site, kan je echt verander het enkel op een plaats. 

Maar er is een prijs die u betaalt potentieel Door het hebben meegenomen uit de CSS van mijn HTML-bestand in een aparte bestand vermeld wordt met de tag, die we zagen op maandag. Wat zou het nadeel zijn van dit? Terugdenkend een week geleden aan als we praten over HTTP en TCP / IP en hoe internet werkt. Iets meer dan hier? 

Publiek: Het kost meer tijd. 

DAVID Malan: Het kost meer tijd. Waarom? 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: Yeah. Dus het duurt misschien wel een beetje meer tijd. Omdat men de CSS uiteraard niet in hetzelfde bestand. Dus nu moet je niet maken een, maar twee verzoeken. En elk van deze verzoeken als we zagen in Chroom in de zogenaamde Inspector, en we keken naar het tabblad netwerk, elk van die bestanden vereist een HTTP verzoek, dat we zagen neemt enige tijd. Nu, misschien is het niet veel. Misschien is het slechts 20 milliseconden. Misschien is het 200 milliseconden. 

Maar na te denken over een pagina als Facebook, of CNN, of Google, die veel zijn groter dan de voorbeelden die we hebben keek tot nu toe. Die pagina's waarschijnlijk tientallen bestanden, die elk kunnen vereisen downloaden van een bestand. Dus dingen kunnen potentieel beginnen te vertragen. 

En vooral deze dagen als we allemaal hebben mobiele telefoons in onze zakken en tragere internetverbindingen, hoeven wachten een paar milliseconden, een paar meer milliseconden voor extra bestanden kan eigenlijk traag. Latency is het woord dat beschrijft de soort te wachten die je hebt dat je ervaren tijdens het wachten op een stukje informatie. 

Maar er is een upside. Dus het is niet allemaal een soort - het is eigenlijk een beetje een wip hier. Nadeel nu, maar wat browsers kan doen als ze slim om te voorkomen met dezelfde styles.css verzoeken bestand weer kan zijn om wat te doen? 

Cache het. Dus caching - C-A-C-H-E - betekent over het algemeen hier alleen maar om te slaan de bestand dat u de eerste keer gevraagd, en controleer dan uw cache voor. Controleer of u bent een soort van opslag container, en als u al een kopie van styles.css, zelfs als sommige andere pagina in het p-set, of een website, vraagt ​​het weer, alleen maar om de te geven gebruiker die hetzelfde cachegeheugen opgeslagen kopie. Doe geen moeite met het verzoek. 

Nadeel daar, hoewel, zoals sommigen van jullie hebben overgenomen struikelde in de p-set. Als u een wijziging aanbrengt op de server en u terug naar de browser te gaan en je herladen, soms de browser doet u een gunst en geen last van opnieuw downloaden van uw styles.css bestand want, kom op, wat zijn de kansen dat deze stijlen die Facebook gebruikt gaan veranderen uur tot uur of dag tot dag? Het is vrij laag. Ze kunnen veranderen in de tijd, maar niet per minuut of per uur. 

Dus een truc, net FYI bij het doen van web ontwikkeling, wordt vaak houdt u de Shift-toets bijvoorbeeld en klik vervolgens op herladen in je browser, en dat zal meestal vertellen de browser reload alles, zelfs als u al in de cache. Dus nogmaals, Pluspunten en minpunten, maar allemaal uiteindelijk ontwerpbeslissingen. 

Dus nu hebben we niet alleen eindigen hier het verhaal. Als ik nu terug en heen en terug te gaan en terug, we begonnen om niet alleen in te voeren HTML, maar PHP. Dus in lekentaal, wat heeft PHP laat ons doen? 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: Wat is dat? 

PUBLIEK: Introduceer logica in de code. 

DAVID MALAN: Ja, introduceren logica in uw code. Dus het is een echte programmeertaal met lussen en variabelen, en functies, en de voorwaarden, en alle de dingen die we hebben gebruik gemaakt van de weg terug wanneer sinds scratch. En PHP, we hebben gezien, kan worden gebruikt hetzij op de command line - het hoeft niet iets te maken hebben met het web, ook al is dat echt zijn oorsprong en wat heeft het de neiging goed in zijn en bevorderlijk te zijn - maar je kunt PHP gebruiken door alleen de natuur Aangezien het een print () functie, en een printf () functie, of een echo ()-functie. Er zijn bossen van manieren waarop je kan tekst af te drukken met PHP. 

Daarom kunt u deze programmering gebruiken taal om de productie precies waar we het eerder over. Je kunt dynamisch genereren uw HTML. Misschien niet alles. Misschien heb je harde code dingen, zoals de header en de footer, en het logo, en uw style sheets, en dat alles. Maar voor iets als-p set zeven, waar je manipuleren van aandelen en waaruit de portefeuille van de gebruiker, dat is gaat om dynamisch te veranderen, kun je zeker gebruik maken van PHP en de logica het geeft u als een programmeertaal te uitgang dynamisch subsets van de pagina. 

Dus als je praat over dynamische websites, of web programmeren, dat is wat je echt over praat. Met behulp van een taal zoals PHP, of dingen genaamd Python of Ruby, of Java, of nog andere talen, op te vragen van een database Vaak of andere server en vervolgens dynamisch spugen HTML. 

Nu het eindresultaat, als een terzijde, is dat de HTML-code van de meeste websites, inclusief uw-p set zeven, is waarschijnlijk gaat een enorme puinhoop als zijn je kijkt naar de bron code in een browser. Dat is geen big deal. Op dit punt, als we de zorg over stijl, we geven om de dingen die je schrijft. We zullen niet de zorg over de spullen dat wat uw code uitgangen. Dus maak je geen zorgen over het inspringen hier als het PHP dat is daadwerkelijk uitvoeren van spullen. Immers, zal de browser niet schelen, en een menselijke niet kijken bij de bron toch. We het personeel, bijvoorbeeld, zou te kijken naar je PHP. 

Dus laat me een snel voorbeeld nu waarom anders dit nuttig zou kunnen zijn. Dus eerlijk gezegd, ik kan me niet herinneren de laatste keer gebruikte ik C om een ​​probleem op te lossen in de echte wereld. Het was waarschijnlijk in graduate school toen Ik moest een taal te gebruiken die was vrij laag niveau en gaf me de gelegenheid om iets heel hoog doen uitvoeren om echt op te slaan als veel CPU cycli als ik kon, voor een groot deel want ik was met behulp van enorme datasets en elke CPU cyclus geteld. En eerlijk gezegd, zelfs in dingen als telefoons deze dagen en andere apparaten waar je niet helemaal zo veel geheugen en je hoeft niet helemaal hebben als veel CPU, met behulp sneller talen is nog steeds aantrekkelijk. 

Maar in de echte wereld, als je net willen sommige programma samen te gooien naar analyseren van bepaalde gegevens, of je hebt verzameld een hele hoop inschrijvingen voor sommige studentengroep en u wilt heel snel automatiseren verzenden van e-mails een voor een aan elk van die registranten, je gaat te bereiken voor een hogere programmeertaal dan C zo te zeggen. Iets als PHP of Python of Ruby, of een half dozijn anderen die er bestaan deze dagen. Maar deze drie zijn waarschijnlijk de meest rechtse nu trendy. 

En wat dit betekent is dat u kunt openen een tekst editor zoals gedit of de meeste iets anders en dan gewoon beginnen code te schrijven zonder te hoeven maken over het compileren, zonder echt zorgen te maken over het geheugen management, houden er wel rekening mee dat een beetje slordigheid zal uiteindelijk terug te komen om u te bijten als de dataset wordt groter of het probleem wordt groot. Maar wat dit betekent voor ons is het volgende. 

Laat me ga je gang en lopen speller van probleem ingesteld zes. Dus dit is mijn-trie gebaseerde implementatie die ik heb gebruikt op de grote raad waar ik deed het niet zo goed. We komen terug in een week tijd en opnieuw degenen die uiteindelijk boven op de groot bord bij onze laatste college. Maar voor nu, laat me gaan en gewoon run mijn oplossing in tekst, en we doen de King James Bijbel, en daar gaan we. 

Dus dat zijn allemaal van de zogenaamd verkeerd gespelde woorden uit de King James Bible. En mijn implementatie heeft een halve seconde in totaal. Dus niet al te slecht op dit specifieke computer. Maar denk aan hoeveel code dat ik moest schrijven. Denken hoeveel code je moest schrijven. Bedenk hoeveel uur je besteed in de D-hal of uw dorm of waar eigenlijk codering up die oplossing. 

Nou, als ik eigenlijk een hoger niveau taal zoals PHP, kennis te nemen van wat ik hier kan doen. Ten eerste, stel dat deze plaats uw distributie code. Dit is een bestand genaamd speller. Het is beschikbaar als onderdeel van de hedendaagse verdeelsleutel. En ik ga mijn hand zwaaien naar de meeste van de gegevens, maar dit is eigenlijk een interessant voorbeeld van hoe je misschien poort een taal zoals C naar PHP. Ik letterlijk opende twee tekst ramen, een met mijn C versie van speller.c, en ik net begonnen met het vertalen van het in mijn hoofd naar PHP en te typen met behulp van de dichtstbijzijnde equivalente functies. 

Zodat een aantal van deze dingen zijn anders. We zagen de vorige keer dat PHP niet gebruiken onder meer op precies dezelfde manier. Het maakt gebruik vergen doorgaans, hoewel onder andere bestaat. Te definiëren is een beetje anders # Define in C, maar dat is hoe maken we een constante. $ Argc blijkt bestaat in PHP, dus we hebben eerder gezien dat. Dit zijn slechts variabelen allemaal die beginnen met dollartekens. Recall dit zijn gewoon een stelletje van drijvende punten. 

Zo lang verhaal kort te maken, je bent van harte welkom om blader door deze als nieuwsgierig, dit is bijna een lijn-voor-lijn conversie van de C versie van speller.c in PHP. En je kon dit opnieuw doen voor een half dozijn andere talen. 

Maar wat interessant is dit. Of wat is ronduit ontmoedigend is dit. Laat me ga je gang en typ over dictionary.php, en beweren dat ik ben gaan om verder te gaan en opnieuw te implementeren probleem ingesteld zes hier. 

Dus laten we stellen eerst dat in deze bestand, dat in zal worden uitgevoerd PHP, dus laat ik mijn tags zoals die open kunnen. Ik geef mezelf een globale variabele, $ size krijgt nul. En ik ga geven mezelf een hash table. Ik zal een hash tabel gebruiken voor dit ding. Hoe verklaar ik een hash tabel in PHP? Gedaan. OK. 

Zo open beugel haakje sluiten vertegenwoordigt wat in PHP, zoals we hebben gezien? Een array, maar een array die kon zijn een associatieve array. Een associatieve array is een gegevensstructuur die associeert toetsen met waarden. 

Nu in de eenvoudigste numeriek geïndexeerd array, die sleutels zijn wat? Nul, een, twee, drie, toch? Old school spullen terug van C. Maar het kan ook strings zoals foo en bar, of maxwell, of een dergelijke string. Dus ik kan benutten dat in slechts een moment. 

Laat me gaan en verklaren een functie als - laten we eerst load () doen. Dus functie load (). En PHP is een beetje anders in dat je letterlijk typt functie, maar u typ niet een return type. Ik ga om te gaan en te zeggen dat de load () functie moet nemen in argument $ dictionary, net zoals C versie deed. Ik doe dat uit het geheugen. 

En ik stel voor dat ik ben dit gaat doen. Ik ga gewoon naar foreach doen. Ik ga naar een functie genaamd noemen file (), passeren in de naam van die bestand, dat de variabele $ Woordenboek als $ woord. En dan de binnenkant van mijn lus hier, ik ben gaan om verder te gaan en op te slaan in mijn $ Tabel die $ woord krijgt waar. Gedaan. Oh, wacht. Gedaan. OK. 

Dat is de functie load () zeggen in PHP. Nu, waarom werkt dat? En ik ben soort van vals spelen hier. 

Dus, een, foreach we zagen kort laatste keer. Het betekent gewoon dat je dan kunt herhalen een array zonder gedoe met i en n en plus plus, en dat alles. Woordenboek is natuurlijk de naam van het bestand, iets als groot of klein, de twee woordenboeken gebruikten we de vorige keer. Bestand is een functie die op tekst opent bestand, leest het in lijn per lijn, en handen u een groot scala back, elk waarvan de elementen een regel uit dat bestand. Dus dat is de combinatie van fopen, en fread, en terwijl lus, en fclose, en dat alles. Ten slotte, zoals woord betekent alleen dat is de variabele Ik ga om toegang te krijgen elke iteratie van deze lus. 

Dus in het kort, deze one-liner betekent hier open het bestand dat wier naam in woordenboek, de variabele, itereren over het regel voor regel, en elke keer krijg je een lijn, op te slaan in een woord variabele genaamd, en dan iets met woord. Wat wil ik doen? Ik wil woord in mijn hash tafel. 

Nou, ik kan iets in zet mijn hash table net als in C vierkante haken te gebruiken. Dit is de naam voor mijn hash table. Ik ga index in dat hash tabel op deze locatie. Dus niet beugel nul, niet een beugel. Bracket citaat unquote iets, wat dat woord is. En net zoals je zou kunnen hebben in uw hash table werk trie, je winkel effectief een Boolean, impliciet of expliciet. Gedaan. Ik ben het opslaan van de waarde true. 

Nu is er een paar dingen Ik ben snijden hoeken op hier. Technisch, er gaat een zijn vervelend nieuwe lijn, / n, eind elk van deze woorden. Dus moet ik waarschijnlijk een PHP functie noemen genoemd chop (), die zal letterlijk hak die af. En ik eigenlijk moet doen een ander ding. Ik moet waarschijnlijk verhogen grootte op elke iteratie, dus ik ben het bijhouden wereldwijd van wat het is. En eerlijk gezegd, en dit is een van de dommer aspecten van PHP, als je met behulp van een globale variabele, moet u expliciet te zeggen dat je bent. Dus ik ga om daadwerkelijk te typen in de wereldwijde $ Size, global $ tafel, en nu Mijn functie is voltooid. 

Dus niet zo eenvoudig als voorheen, maar Waarschijnlijk nam minder tijd dan de C versie, misschien? OK. 

Dus nu laten we de cheque ()-functie. Eens kijken of dit in ieder geval nam de urenlang dat het kostte ons in C. Dus laat me gaan en verklaren kijk als een functie. Neemt in argument woord, dat is vandaan moet komen speller. En ik ga gewoon om te controleren of de volgende variabele isset, tafel beugel strtolower van het woord - laten we allemaal van mijn haakjes in evenwicht - dan terug waar. Else - dat was echt de harde onderdeel van dit programma. Else, return false. Gedaan. Dat is cheque (). 

Nu, waarom werkt dit? Nou, degene die ik aangenomen in een woord, die een tekenreeks. Twee, Ik controleer de binnenkant van de hash tafel, die heet $ tafel. Ik forceren naar kleine letters door te bellen naar een functie vrij gelijkaardig tolower () in C, maar dit doet het hele woord, niet een enkel karakter. En als dat is ingesteld, dat wil zeggen er wordt een waarde ingesteld, met andere woorden, als het waar is, dan ja, Dit is een woord. Omdat ik het daar met load (). En zo niet, ga ik return false. 

Nu de anderen gemakkelijk. Functie grootte (), hoe kan ik dit doen? Ik wezen doen terugkeren $ size. Maar ik moet technisch te doe dit vervelende ding. En eigenlijk up hoor, ik was te snijden een hoek te veel. Ik moet echt global $ tafel doen. 

Maar dat gezegd zijnde, lossen). Lossen () is geweldig. Functie unload (). Hoe wil ik implementeren unload ()? Gedaan. OK. 

Dus lossen (), memory management is volledig verzorgd voor u in iets als PHP en veel van hoger niveau talen. Dus dit is geweldig. Net als waarom de hel hebben we hebben de afgelopen acht plus weken op C schrijven blijkbaar erg traag, echt tijd tijdrovende problemen tientallen uren van werken onder onze riemen? 

Nou, voor een ding, dit kan werken prima voor kleine programma's. Het versneld zeker mijn ontwikkelingstijd. Maar laten we eens kijken wat er gebeurt in de echte wereld. 

Laat me gaan in deze map in een terminal venster. Er is speller. En let even terzijde, en je zou heb dit ondervonden in opdracht gesteld zes of probleem stelde zeven. Je hoeft niet strikt hoeft te end PHP-bestanden met. php. Als je een regel zoals die eerste aan de top, dat is een speciale lijn van de syntaxis die in wezen betekent vinden het programma genaamd PHP en gebruik deze om interpreteren dit bestand. Dus nu niemand echt weet dat Ik gebruik een PHP-programma. Ik kan het gewoon draaien alsof het werden iets gecompileerd in C. 

Maar hier is het ding. Eigenlijk, laten we dit nog een keer doen. Dropbox/pset6 /. Er is speller. OK, 0,44 seconden. Het kreeg sneller dit keer. 

Nu laten we gaan naar de PHP-versie. Leuke touch. Maar denk maar hoeveel tijd Ik bespaarde op kantooruren. OK. 

Dus 3.59 seconden, die eigenlijk niet nauwkeurig beide klinken. Maar dat komt omdat lang verhaal kort, wanneer u afdrukt uit een enorme hoeveelheid dingen op het scherm, dat zelf vertraagt ​​dingen naar beneden. Wat nodig was echt de CPU in de apparaat was 3.59 seconden, in In tegenstelling tot C, die 0,44 kostte seconden het meest recent. Dat is echt een orde van verschillende magnitude. 

Dus waar is die prijs vandaan? Waarom is het zo veel langzamer? Waarom heeft PHP presteren zo slecht? Danielle? 

PUBLIEK: Dat heb je niet echt gebruik maken van een hash table. 

DAVID Malan: Ik heb niet echt gebruik maken van een hash table. Dus ik soort van deed. Dus het is een associatieve array. Het meest waarschijnlijk als de mensen in PHP zijn echt slim, onder de gebruikte ze kap een echte hash table geïmplementeerd in iets als C of C + +. Maar. Yeah. 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: Yeah. Dus elk van de functies die ik schreef - Eigenlijk kun je zeggen dat eens te meer een wat harder? 

Publiek: Elk van de functies die u opgenomen heeft veel meer volledige capaciteit dan - 

DAVID Malan: Dus dat is heel waar. Er is nog veel meer overhead die we niet echt zien door alleen op de dictionary.php, die ik net schreef. Daarentegen is er een hele tolk gaan in de achtergrond. Inderdaad, toen ik liep dit programma, het liep niet gecompileerd nullen en enen ontworpen voor mijn Intel CPU. In plaats daarvan werd het draaiende lijn per lijn PHP code die precies eruit ziet zoals wij getypt het. En dus wanneer u een gebruiken geïnterpreteerde taal, je eigenlijk betalen deze prijs. Het zal enige tijd duren om te lezen uw dossier boven naar beneden, van links naar rechts, en dan telkens laten uitvoeren opnieuw en opnieuw lijn. 

Nu in de werkelijkheid, vooral op het web, je kunt eigenlijk versnellen dit proces door caching de resultaten van de PHP-code wordt geïnterpreteerd. En dat is logisch op het web, omdat als je een gebruiker zoals hebben niet me hier, maar 1000 of 10.000 gebruikers, dan misschien de eerste keer dat het bestand is toegankelijk het is traag, maar daarna het is veel sneller. 

Maar ook dat, nogmaals, is een afweging. En voor iets als een onderzoeksgegevens instellen, of zelfs iets groot als dit, zal uw gebruikers uiteindelijk gaan dat vertraging voelen. 

Dus in het kort, geïnterpreteerde talen zijn erg in de mode, zeer populair, en eerlijk gezegd zijn waarschijnlijk de talen die u moet bereiken voor bij het oplossen van problemen na CS50. Maar beseffen hoeveel je echt nemen voor onder de motorkap verleend echt die afgelopen weken in hash tabellen en bomen, en probeert, die uiteindelijk daadwerkelijk worden gebruikt dingen als haakje openen implementeren, vierkante haken, die we kunnen nu dankbaar voor lief nemen. 

Dus laten we nu eens een kijkje nemen in dit web context. En ik vorige keer dat er een stelletje superglobals in PHP dat zijn niet echt relevant op de opdrachtregel. Ze zijn meer relevant in de context van het gebruik van PHP in een web context. Dus PHP draait op een webserver om om dingen zoals HTML te genereren. 

En we keek naar $ _GET en $ _POST, en dat is waar gebruikers automatisch ' ingang eindigt gewoon als je indienen van een vormen naar een bestand dat eindigt op. php op een webpagina server zoals het apparaat. Maar laten we kort $ _COOKIE En $ _SESSION. 

In termen van de leek, wat is een cookie als u begrijpt het in het kader van via het web? 

PUBLIEK: bestand op de computer. 

DAVID Malan: Yeah. Het is een bestand op de computer van de gebruiker geplant door welke website je toevallig om te bezoeken. Dus als je naar Facebook, als je gaat naar bankofamerica.com, als je gaat naar google.com, wanneer je naar bijna elke website in de wereld deze dagen, waaronder cs50.net, wordt er een cookie geplant op uw computer, dat is ofwel een waarde opgeslagen in het RAM in computer in uw browser geheugen, of soms inderdaad een bestand dat is opgeslagen op uw harde schijf. 

En wat is meestal opgeslagen in dat bestand is niet uw gebruikersnaam, uw password, meestal niet iets gevoelige tenzij de website is niet zo goed met hun veiligheid, maar het is een grote unieke identificatie bij andere. Het is een groot willekeurig getal geplant op uw computer, maar je kunt denken als een soort van virtuele handstempel zoals uit een club of een pretpark dat laat het personeel, de eigenaren van die dienst, om te herinneren wie je bent. Als het grote willekeurige getal is als 12345678, hoewel dat natuurlijk niet te willekeurig, denk aan dat als de handstempel dat wanneer je bezoek facebook.com voor de eerste keer, zij stempel dat nummer op je hand. En dan, omdat je spreekt HTTP, u als een browser, en omdat Facebook uiteraard spreekt hetzelfde als een web server, het protocol HTTP zegt dat wanneer je vervolgens een bezoek facebook.com, of het nu een tweede later, een uur later, zelfs de volgende dag, zolang u expliciet hebt niet uitgelogd, die effectief is als het wassen van je handen. HTTP zegt dat je moet presenteren uw handstempel elke keer dat je terug te keren naar die website. 

Wat Facebook dan is heeft ze kijk naar die hand stempel en ze zeggen, oh, 123456789. Ik weet niet op het eerste gezicht dat deze is David Malan in Cambridge, Massachusetts, maar ze kunnen controleren hun databank en zeggen, oh, de persoon op wiens computer we geplant 123456789 is David Malan uit Cambridge, Massachusetts. Laten zien dat de gebruiker vervolgens zijn profiel pagina of zijn News Feed. 

Maar er is een probleem als dit is hoe het web werkt inderdaad. Laten we eens een kijkje nemen op een snel voorbeeld. Laten we eigenlijk gaan om te zeggen facebook.com. Maar voordat we daar konden gaan, laat mij ga je gang en open Chrome Inspecteur hier beneden. Laat me naar het tabblad netwerk. En laten we nu verder gaan en typ in https://facebook.com. En ik doe dat, zodat we niet zien al die omleidingen en afval tijd aan het zoeken door middel van deze. Laat ik druk op enter. 

Oke. We zien een hele hoop van verzoeken. Er komt Facebook. Er is een hele hoop bestanden. En hier, per mijn vermelding van latency laatste keer, dat is veel HTTP-verzoeken. Maar de eerste waarschijnlijk de meest interessante. 

Dus laten we scroll hier naar beneden, en Ik ben in te zoomen in een tweede. Dit zal soort zijn een puinhoop, maar laten we eens kijken. Facebook is ons een verzendende hele hoop spullen. 

Maar whoa, interessant. Ze zijn het planten van niet een, maar vier handstempel op mijn hand hier. Set-koekje, Set-koekje, set-koekje, set-cookie. En er zijn hier een paar functies. Allemaal op te noemen wat soort van expiratie. En het lijkt erop dat Facebook hoopt mij onthouden tot 2015. Dus dat is waarschijnlijk het moment waarop Ik moet uitloggen of zullen ze gewoon automatisch aannemen ik ben niet terug. Dus dat is eigenlijk een fatsoenlijke tijd. 

En er zijn enkele andere dingen aan de hand hier. Deze cookie lijkt gedwongen zijn verwijderd door te zeggen dat in 1970 verlopen alvorens cookies bestond. Dus de browser is gewoon te veronderstellen OK, dat is net als het wassen van de handen stempel. 

Maar nu wanneer mijn browser maakt een volgende aanvraag - laat me ga je gang en doe dit opnieuw en reload. Laat me nu blader terug naar de top verzoek en ga naar beneden hier, verzoek headers. Merken dit. Dus nu ben ik onder geen response headers, maar merken het zegt requestheaders. En merk dat mijn browser als onderdeel van zijn verzoek na het raken reload heeft verzonden ten minste de volgende gegevens. Niet ingesteld-koekje, maar cookie. Dus dit is de lijn, de HTTP-header zo te spreken, waar mijn browser is een soort van zonder mijn weten presenteren mijn hand voor Facebook inspectie. 

Dus deze cookies kunnen worden vervolgens gebruikt voor wat? Om te onthouden wie je bent, of herinneren hoe vaak je er bent geweest, of echt iets. 

Dus hier is counter.php. En laat me in te zoomen op het lettertype. En elke keer als ik de pagina verversen, bericht het is herinneren hoeveel keer Ik ben er geweest. Nou, dat is niet zo indrukwekkend. Laten we gewoon sluiten dat tabblad, en nu laten we terug gaan naar http://localhost/counter.php. 

Oh, dat is interessant. Hij herinnerde zich nog, zelfs hoewel ik sloot het tabblad. En eerlijk gezegd, als ik de browser sluit, indien uitgevoerd op de juiste manier, I kon nog herinneren dat deze gebruiker wie hij of zij was de eerste keer, en slechts een keer ga ik in het menu van Chrome, die hier is hier, en ga naar Geschiedenis, en klik Browsergegevens wissen zoals sommigen van u kan hebben in de verleden, alleen dan zal je cookies eigenlijk tijdens web worden verwijderd ontwikkeling. 

Dus, als we gaan - laten we close up gedit hier. En als we nu naar dit bestand. Laat me gaan in onze vhosts / localhost / publiek, en laat mij counter.php. Merk op dat dit een vrij eenvoudig programma. Het is een vrij eenvoudige website. 

Dus het begin van het bestand is gewoon commentaar. Maar hier is een nieuwe lijn die je kan reeds in blz zeven gezien, session_start (). Dit is een lijn van PHP-code die vertelt in wezen de webserver, maken ervoor om de handen te stempelen en maken Zorg ervoor dat u de hand stempels controleren. Dat is alles wat die lijn doet, en het doet al van dat proces voor ons. Dan merk ik heb net twee takken hier. Als de teller sleutel binnenkant van deze speciale globale variabele genaamd $ _SESSION Ligt - dat wil zeggen, als er enige waarde daar - laten we het en bewaar het op een lokale variabele genaamd $ teller. Else, laten toewijzen $ teller de standaard waarde van 0. 

Nu hier is een aspect van PHP dat is zowel een zegen als een vloek. PHP is een beetje slordig. Dus terwijl in C, wat zou het reikwijdte van de teller zijn geweest hetzij hier of hier? 

Het zou zijn opgesloten aan die accolades. Wat denk je? In PHP, het bestaat zelfs buiten deze accolades, hier, en hier, en hier, en hier, en zelfs beneden. Dus ik zeg dit is een zegen in de zin dat je niet hoeft na te denken als hard als wij deden weken geleden. Maar het is ook een beetje een vloek in dat ongeacht waar u een variabele te gebruiken in PHP, althans in een programma als dit, het is wereldwijd toegankelijk voor goede of ten kwade. Dus je moet in gedachten te houden nu dat uw variabelen kunnen niet ongedefinieerd. Je zou ze elders hebben gedefinieerd. 

Maar wat moet ik uiteindelijk doen? Ik ga om te slaan in deze globale variabele als een waarde van de Tellers het resultaat van doen teller plus 1. Dus dit is gewoon het rekenkundig dat doet de ophoging van die teller. En het feit dat ik het opslaan van dat waarde terug in hier is betekent wezen database te updaten naar vergeet niet dat de gebruiker 123456789 is geweest Hier twee keer. En als ik het opnieuw doen de volgende keer dat ik de pagina geladen is, het gaat om te controleren mijn hand stempel en zeggen: oh, gebruiker 123456789 heeft nu hier al drie keer. 

En dus wat PHP en soortgelijke talen doen voor ons is dat ze uitzoeken hoe en waar en voor hoe lang waarden opslaan in deze speciale superglobal. En dit superglobal de volgende keer dat ik bezoek de pagina is een soort van magisch vooraf ingevulde, gevuld met waarden die waren er de laatste keer dat u bezocht, of dat een tweede geleden, een week geleden, of in 2013 en we praten nu over 2015. PHP en de webserver take care van dat alles voor u. 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: Variabelen in PHP zijn in wezen altijd global tenzij u verklaren ze binnenkant van een functie, en dan zijn ze lokaal te alleen de functie. Maar omdat ik geen schriftelijke functies, ze zijn eigenlijk wereldwijde gedurende mijn hele bestand hier. 

PUBLIEK: Is er een manier om ze lokaal te maken? 

DAVID Malan: Is er een manier om ze lokaal te maken? Alleen door ze te omwikkelen in functies. Die in de laatste versie van PHP, kunt u dit doen met een anonieme functie. Maar meer op dat in de context van JavaScript. Maar het korte antwoord is nee. Een langere antwoord is ja. Leuk. Goede quizvraag. Oke. 

Dus tot slot, de pagina zelf is eigenlijk vrij eenvoudig. Merk op dat zodra ik PHP-modus, recall verlaten dat al deze spullen naar beneden hieronder is gewoon gaat krijgen spugen ruw uit naar de browser. Dat is prima, want ik wil wel sturen de gebruiker een aantal HTML, maar ik wil om dynamisch te updaten die HTML. En een manier kan ik dit te doen is om te sorteren zeer snel te laten vallen terug in PHP mode, gebruik haakje openen vraagteken gelijk-teken, en vervolgens de output van de waarde van de teller. 

Of als dit ziet er een beetje cryptisch, deze gelijk-teken is eigenlijk slechts enkele syntactische suiker voor deze printf ($ teller). Maar eerlijk gezegd, dat is gewoon een beetje lelijk en een beetje vervelend om te typen. Dus PHP biedt zeer mooi deze functie waar je gewoon meer kan zeggen dat het beknopt op dezelfde manier. 

Dus wat is er aan de onderkant de motorkap? Laten we snel kijken naar het netwerk tabblad hier voor counter.php. En laat me ga je gang en de eerste laten we duidelijk uw cookies. Laten we duidelijk browsing data sinds het begin der tijden. Laten we nu terug gaan hier. Laten we nu de pagina geladen is. En ik ben terug op nul. Omdat mijn hand stempel is gewassen, Ik krijg nu een nieuwe cookie. 

Inderdaad als ik kijk naar het tabblad netwerk en kijk naar antwoordheaders, mededeling dat het apparaat stuurt mij een koekje waarvan de naam is enigszins willekeurig, maar soort redelijk, PHPSESSID. En het is deze stuurt me echt groot willekeurig getal. Het is niet helemaal een nummer. Het is niet helemaal hexadecimaal. Het is een soort van alfanumerieke reeks, maar vermoedelijk is het willekeurig. En dat is de hand stempel zo te spreken dat ik bedoel. 

Ondertussen als ik klik reload en vervolgens kijk naar deze tweede lijn voor mijn tweede verzoek, bericht nu dat mijn verzoek headers bevatten PHPSESSID gelijk deze, geen set-koekje, maar gewoon cookie. En dat is de presentatie van mijn browser van mijn hand stempel. 

Dus nu als een teaser, en we praten meer hierover in een week of zo, maar op welke manier heeft dit je maakt kwetsbaar, uw Facebook-account kwetsbaar en andere dergelijke accounts kwetsbaar? 

PUBLIEK: Als iemand uw cookie. 

DAVID MALAN: Ja, als iemand heeft uw cookie. Ik bedoel echt, net zoals sommigen van jullie zou kunnen hebben geprobeerd om als een club of een pretpark, als je iets proberen als dit om de zegel te kopiëren, zij het achterover op de hand van een andere persoon, en dan is hij of zij presenteert het als hun eigen, als het eigenlijk niet uitziet identiek, 123456789, dan is het web server is blijkbaar gewoon gaan vertrouwen dat die gebruiker ben jij. 

En dit is inderdaad een fundamenteel bedreiging wanneer u cookies want als iemand spoofs net zo te spreken uw cookie, zoekt uit wat het is, hetzij door echt het kopiëren door te kijken naar uw computer en wezen als, OK. David's cookie is JJ3JIK enzovoort, en dan zijn ze slim genoeg om te weten hoe soort handmatig verzenden die cookie van een browser of een programma schrijven ze, konden ze helemaal inloggen op een website als u. Het is niet zo moeilijk om te doen alsof ze iemand anders, tenzij we opnieuw p-set twee, die wat ingevoerd? 

PUBLIEK: Cryptografie. 

DAVID Malan: Een beetje beetje van cryptografie. Eenvoudige cryptografie, althans in de standaard editie, maar crypto toch. minder. Dus het blijkt als je versleutelen alle deze headers met behulp van iets dat je nu misschien meer weten vertrouwelijk als SSL, secure socket layer, of https:// URL's, dan al die dingen waar we zijn geweest een blik op zijn eigenlijk gecodeerd, wat betekent dat het is alsof je kan de handstempel niet lezen. Alleen facebook.com kan, of google.com, of in dit geval, het toestel kan gelezen dat de hand stempel. 

Tragisch maar, en nogmaals, dit is al te eventueel samen met de NSA spullen te laat, zelfs SSL is breekbaar. En het is eigenlijk niet zo moeilijk zelfs kraken dat encryptie. Niet zozeer door het kraken van de versleuteling, maar door tricking de browser in ontsleutelen de gegevens voortijdig. Maar nogmaals, laten we u plagen met dat duurde niet lang. Voor nu, gewoon bang. Het is tragisch soort waar. 

Oke. Dus, waar komt dit nu ons verlaten? Nou, laten we dit doen. Laten we verder gaan en neem snel een teaser voordat we een pauze nemen. En ik denk dat we een beetje langer blijven hangen vandaag, maar we gaan duiken in iets nieuw en sexy, dat zal uw eetlust opwekken voor nog meer. Dus dat is de teaser. 

Dus SQL, we begonnen te praten over ooit zo kort vorige keer. Je zult echt je handen vuil met een aantal van deze in p-set zeven. En in lekentaal, wat doet SQL - S-Q-L - voor u doen? Wat is het? Yeah. 

PUBLIEK: Laten we u toegang tot de gegevens. 

DAVID Malan: Yeah. Het u toegang tot gegevens in een database. Structured Query Language. En dit is in wezen een programmeertaal. Er zijn kenmerken van het dat we zullen niet eens gebruik in de klas. Maar je kan effectief definiëren functies. Ze heten opgeslagen procedures in SQL. Maar we zullen het vrij eenvoudig en gewoon blijven gebruik het voor een aantal basishandelingen zoals het selecteren van gegevens, het invoegen van gegevens, bijwerken van de gegevens, en het verwijderen van gegevens. 

En je kunt echt denken aan een databank, als een SQL-database, als gewoon zijnde Microsoft Excel. Omdat SQL verwijst naar een relationele databank, waar relatie betekent gewoon tafels. Rijen en kolommen. Dus alles wat je in een spreadsheet kan zetten zoals dit of Google Docs, je kon in een SQL-database gezet door te verklaren dat een tafel. 

Nu, hoe doe je eigenlijk toegang die informatie? Nou, met commando's of vragen als deze. SELECT, INSERT, UPDATE en DELETE. En voor het grootste gedeelte, dat zijn de vier enige ingrediënten die je nodig hebt om iets heel krachtig in probleem stelde zeven. 

Nu terug in de dag, zou je eigenlijk interactie met een database op een zwart en wit terminal venster op een knipperende prompt als deze. En de database zijn we actief is op het apparaat heet MySQL, die gratis en open source database-engine. Als u Google en lees de Wikipedia artikel, zult u weten dat de naam is een beetje van de overgang voor sommige versies van Linux. Maria database eigenlijk vork zo te zeggen van MySQL. 

Lang verhaal kort, Oracle kocht MySQL. Oracle is een groot bedrijf. Mensen zijn bang dat het zou niet langer blijven vrij als open source, dus dit is gewoon een kopie van MySQL dat is nog vrij, nog open source, en in Fedora Linux standaard geïnstalleerd. 

Maar dit is een soort van pijn in de nek om kennis te maken met een databank op deze manier. Dus we zijn in de CS50 apparaat een gratis open source tool genaamd phpMyAdmin. Gewoon toeval dat het is geschreven in PHP. Er is geen fundamentele nodig voor PHP hier. Maar dit is slechts een web-based tool die we gratis gedownload, geïnstalleerd in Het apparaat, dat ons in staat stelt om een ​​hebben grafische gebruikersinterface waarmee de p-set zeven databank verkennen die om nieuwe databases aan te maken, zeggen voor je eigen afstudeerproject als je zou willen, en uiteindelijk creëren dynamische websites als CS50 Financiën waarmee u gegevens opvragen en data dynamisch te updaten. 

Je bent niet van plan om te gebruiken net een eenvoudig tekstbestand of CSV. U kunt daadwerkelijk gebruik maken van een slimme databank programma, zodat u meer kunt uitvoeren geavanceerde zoekopdrachten uitvoeren dan alleen het lezen door alles lineair. 

Dus bijvoorbeeld, dit is wat we geven je uit de doos voor p-set zeven. Dit is een tabel met schijnbaar minstens drie kolommen, waarvan er gebruikersnaam, waarvan een hash, en waarvan de andere is ID. 

Maar het interessante, en alleen maar om plagen uit een gedachte hier, gebruikersnaam is vermoedelijk al uniek, toch? Ik bedoel, de meeste een website, indien heb je een gebruikersnaam, er kunnen niet twee Caesars. Er kunnen niet twee Malans. Er kunnen niet twee jharvards. Zijn uniek. Anders weten ze niet welke jharvard het eigenlijk is. Dus wat de motivatie voor het ook zou kunnen zijn met een derde kolom aan de linkerkant er geroepen ID, die eruit ziet als een nummer dat is eveneens uniek? Het voelt een beetje overbodig voor mij op het eerste gezicht. Daarom is het misschien dwingend te hebben niet alleen unieke gebruikersnamen, maar ook unieke nummers? 

PUBLIEK: Ze konden hebben hetzelfde wachtwoord. 

DAVID Malan: Mensen kunnen hebben hetzelfde wachtwoord, zeker. Dat kan absoluut gebeuren. Maar als ze deze unieke gebruikersnaam, I beweren dat dat niet echt kwestie, want als ze typen in hun gebruikersnaam, ik moet alleen maar om hun te controleren wachtwoord, hun hash daarvan. Waarom anders? 

PUBLIEK: Snellere zoekfunctie. 

DAVID Malan: Snellere zoekfunctie. Waarom? 

PUBLIEK: ID is slechts een. 

DAVID Malan: ID is slechts een personage, of om preciezer te zijn, het is een getal, dus het is waarschijnlijk 32 bits of iets dergelijks. Overwegende dat de gebruikersnaam, blijkbaar Jason Hirschhorn is daarboven is een soort van belachelijk lang, en het gaat om neem me veel meer tijd aan koord vergelijking H-I-R-S-C-H-H-O-R-N, en misschien a / 0 of iets dergelijks, met het oog op te zoeken Jason, in tegenstelling tot alleen zeggen geef me gebruiker nummer twee. Dat is 32 bits. Het is een enkele INT dat je moet vergelijken. En inderdaad, dat is precies de reden waarom databases hebben de neiging om unieke id's toewijzen aan tr daarin. 

Nu, wat andere data types zijn er Naast INT en blijkbaar strings als deze? Nou, om meer goede, SQL databases, zoals MySQL, hebben CHAR velden. En teken een beetje misleidend is niet een enkele CHAR. Een CHAR veld in een MySQL database is een of meer tekens, maar het is een vaste aantal tekens. 

Dus bijvoorbeeld, als ik ga naar phpMyAdmin zoals je misschien al hebt, of binnenkort zal een probleem stelde zeven, en ik ga naar mijn database en gewoon voor de lol, laten we een nieuwe tabel met de naam testen met slechts twee kolommen. Ik klik op Start. En dit zal vrij bekend geworden, vooral als je sleutelen rond op uw eigen. Hier zou ik ID typen te creëren een nieuwe tabel van het type INT. Maar hier zou ik gebruikersnaam typen om herscheppen dat eerder tafel. En let op, ik heb een hele hoop van soorten om uit te kiezen. 

En dit is ook de reden waarom phpMyAdmin is wel leuk. Het is een soort van zelf-onderwijs in die u kan gewoon een soort van punt en klik, en kijk naar dropdown menu's, en afleiden uit dat wat bevoegdheden SQL geeft. 

En inderdaad, als ik ervoor kies CHAR, ik dan moet de lengte, of hoe specificeren veel waarden, hoeveel Chars. Dus zeer gemeenschappelijke waarden zijn zaken als 255, maar dat is een beetje lang. Vaak is acht voor een gebruikersnaam. Maar dat is een beetje klein deze dagen. Dus dit is een ontwerp beslissing. Is het max. 8 tekens, 32, 255, 1000? Het is echt aan jou. Maar een char veld is een vast nummer. Dus kies te weinig en je bent soort van geschroefd als je een langere gebruikersnaam. Kies te veel en wat is de keerzijde? 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: Het is verspilling. Net als in C, als je een grotere hebt stuk van het geheugen dan je nodig hebt, je bent gewoon tijd verspilling en verspilling van ruimte. Dus als alternatief bestaat VARCHAR, die dit probleem oplost door behandelen length geen vaste lengte, maar als een maximumlengte en met een variabel aantal tekens, die vervolgens heeft de neiging om slechts zoveel chars gebruiken als u daadwerkelijk nodig heeft. Dat klinkt perfect. 

Waarom gaan we niet te ontdoen van de Char data typ? Wat zou het nadeel zijn van gebruik VARCHARs, dat klinkt alsof het een mooie overwinning? Yeah? 

PUBLIEK: [onverstaanbaar]. 

DAVID MALAN: OK, goed. Dus als al uw gegevens is hetzelfde lengte, wat is de zorg? 

PUBLIEK: Omdat je verspilt gegevens door ze allemaal te vertellen. 

DAVID Malan: Dus als al uw gegevens dezelfde lengte, hoewel, zou ik pleiten dat het opgeven van een maximumlengte op VARCHAR is niet anders dan specificeren van een vaste lengte op CHAR als weet je dat nummer op voorhand. Maar er is inderdaad, en ik zal een soort van uittreksel uit dat het antwoord van de werkelijkheid dat er nog steeds een max, die zou kunnen vervelend zijn, zeker als je tegenkomen naam van een persoon die ongewoon lang dat je dat niet deed anticiperen. En het is ook een beetje minder efficiënt om daadwerkelijk zoeken op VARCHARs als tegenstelling tot het zoeken Chars, vooral lange tafels die partijen hebben en veel data. Dus ook hier, thematisch weer geen duidelijke keuze. 

Dus gewoon om u een gevoel van andere geven soorten gegevens die van belang kunnen zijn hetzij voor blz zeven of de toekomst, er is INT. Er is BIGINT, die is als lange lange. Het heeft de neiging om zijn 64 bits. Er is DECIMAAL, waar je ziet in het probleem set, die een veel schoner antwoord op de problemen die we ondervonden met vlotter en zwevende wijzen onnauwkeurigheid. En dan is er DATETIME. Er is letterlijk een soort gegevens dat moet te kijken als een jaar, een maand, een dag, en een uur, minuten en seconden. 

Maar SQL-databases hebben ook dingen die we zullen indexen noemen. En een index is iets dat je opgeven bij het maken van de tabel te maken zoekopdrachten en andere operaties efficiënter. In het bijzonder, is er iets geroepen de voornaamste parameter die je zou kunnen verklaren als volgt. 

We deden dit voor u met de gebruikers tabel geven wij u. Maar merk als ik handmatig recreëren de tabel gebruikers hier geven het een naam van de gebruikers. Ik heb al opgegeven ID. Ik heb opgegeven INT. Ik heb opgegeven gebruikersnaam met maximaal 32 tekens. Maar als we blijven scrollen in dit vrij breed venster, bericht is er een heleboel andere dingen die ik kan geven. 

One, kan ik attributen opgeven zoals, weet je wat, dit INT moet UNSIGNED zijn. Ik heb geen negatieve getallen wilt, dus laten we het niet ondertekend. Null is hier niet relevant, omdat Ik wil elke gebruiker hebben een uniek nummer. Ik wil het niet op null zijn. 

Maar dit is interessant. Ik kan aangeven dat ID is ofwel de primaire sleutel van deze databank, of het is uniek, of het is geïndexeerd, of de volledige tekst. Dus voor doeleinden van vandaag, lang verhaal Kortom, PRIMARY betekent dat deze zal zowel conceptueel en technisch het veld dat we gebruiken om een ​​unieke identificeren van gebruikers. 

Dus als we kijken gebruikers, dit is een soort van een belofte om ze kijken vooral door die unieke identifier. En de database zal ervoor zorgen dat als je heb een gebruiker nummer 3, dat kan niet fysiek plaats een andere gebruiker met hetzelfde nummer 3. De databank zal alleen weigeren om uw wijzigingen op te slaan. Dat is een goede zaak, want je kunt jezelf te beschermen tegen jezelf. zelf 

Als alternatief voor de gebruikersnaam. Dus de tweede rij, rappel, is het veld gebruikersnaam. Dus de tweede rij is hier gebruikersnaam, als we op de daar uiterst links. 

Dus wat zou ik willen opgeven? Ik ben niet toegestaan, volgens SQL, twee primaire sleutels specificeren. kunt u een gezamenlijke sleutel op te geven waar u kijk beide velden in, maar ze kunnen niet afzonderlijk worden primaire sleutels. Dus dat is uit den boze. Dus waar zou ik willen kiezen? 

Nou, UNIEK is in dezelfde geest een primaire sleutel waar u dit aangeven veld moet uniek, maar het is niet van plan om de ene Ik gebruik de hele tijd. En we zijn niet van plan om dit alles tot een te gebruiken de tijd om welke reden ook alweer? Het is trager potentieel als het is een lange gebruikersnaam. Het is gewoon een verspilling van tijd. 

INDEX, ondertussen, geeft aan dat het niet van plan om uniek te zijn, maar ik zou graag je om je magie te werken onder de kap om het sneller voor mij om zoeken op dit gebied. Dus dit waarschijnlijk is hier niet relevant. Voor gebruikersnaam, zou ik zeggen dat UNIQUE is een goed antwoord. Maar stel dat we gebruikers meer interessanter dan alleen gebruikersnamen, hashes, en ID-nummers. Wat als we de volle namen gaf de mensen? Wat als we gaven hen behandelt en andere gegevens over hen? 

Nou, als je aangeven dat een kolom in een databank wordt geïndexeerd, dat wil zeggen dat MySQL of Oracle, of wat dan ook databank u gebruikt, moet zijn magische werk en het gebruik van een soort van mooie data structuur als een boom, of een Trie, of een hash table, of iets om te garanderen dat wanneer u zoeken naar gegevens met behulp van Selecteer op dat gebied - graag zien mij iedereen die woont op Oxford Street. Een query als dat. Als u hebt opgegeven bij voorbaat dat u een index op dat gebied willen, de zoekacties zullen veel zijn, veel sneller. 

Als je niet een index, de beste specificeren je kunt doen is een lineair zoekopdracht als het is niet gesorteerd. Maar als je INDEX opgeeft, de slimme mensen die de database gemaakt - mensen zoals u die nu kent bomen en probeert en hash tabellen - zal een dergelijke gegevens automatisch op te bouwen structuur in het RAM om ervoor te zorgen dat deze zoekopdrachten zijn veel sneller. 

FULLTEXT ondertussen is gelijkaardig in geest, maar stelt u in staat om te doen wildcard zoekopdrachten, zoals toon mij iedereen die leven op straten die beginnen met de letter O om welke reden. U kunt wildcard opzoekingen doen als dat. Of, meer dwingende dingen zoals tonen ik iedereen die het woord - toon mij iedereen wiens achternaam begint met een bepaalde letter. U kunt zoeken op trefwoorden op deze manier. Oke. 

Dus, ontwerpmogelijkheden er potentieel. Er zijn anderen die ik zal zwaaien mijn handen op. Het blijkt dat je kunt hebben verschillende storage engines. En dit is meer mysterieuze dan we nodig hebben zeker voor het probleem stelde zeven. Standaard worden jullie gebruik iets genaamd InnoDB. Je zult zien vermelding van deze ergens in interface van phpMyAdmin's het meest waarschijnlijk. Maar weet dat er andere ontwerp beslissingen die van potentiële belangstelling komen als laatste projecten je iets webgebaseerde doen. 

Maar laten we dit doen. Laten we verder gaan en zet deze op de scherm als een teaser voor een verhaal met u, een huisgenoot, en een glas melk. Laten we eens een twee minuten of zo breken hier. En als je rond kunt vasthouden, laten we terugkeren terug, kijken een beetje meer op SQL, en dan een beetje van JavaScript met p-set acht in het achterhoofd. 

Oke. Dus, laten we u het denken over een hoek zaak die heel gemakkelijk kan ontstaan in de context van een database of eerlijk gezegd, zelfs met behulp van echte wereld dingen graag geldautomaten om geld te krijgen. Dus hier is een koelkast. Stel, je hebt er ook een in uw dorm of uw huis. En je hebt een kamergenoot, en beiden kregen je echt graag melk bijvoorbeeld. 

Dus kom je thuis van de klas een dag. Hij of zij is nog niet terug. U opent de koelkast. Wil je echt een groot glas melk. Er is geen melk. Dus wat doe je dan? U sluit de koelkast. Je pak je sleutels. Je gaat uit naar het plein. En krijg je in de rij bij CVS op die self-checkout dingen, die altijd langer dan daadwerkelijk hebben kassiers. Hoe dan ook. 

Zo dan, ondertussen, dot dot dot, uw kamergenoot komt thuis en hij of zij heeft eveneens een hunkering voor wat melk. Zodat hij of zij opent de koelkast, ziet er binnen, en oh, verdomd. Geen melk. Zodat hij of zij hoofden uit, gebeurt om te gaan de andere CVS, die slechts een blok weg om wat voor reden, en hij of krijgt ze in de rij om wat melk te kopen. 

Ondertussen kom je thuis, hij of ze thuiskomt, en wat doen je uiteindelijk? Twee keer zo veel melk. Maar je hoeft niet echt leuk melk dat veel. Dus nu heb je zoveel melk dat nu een van hen is gewoon om te gaan zuur uiteindelijk. Dus dit is echt een slechte probleem. Rechts? 

Dus wat is er gebeurd? Zo fundamenteel, is dit soort van een belachelijke voorbeeld. Maar onder de motorkap, wat wij hebben gehad gebeuren hier is jullie beiden gecontroleerd de toestand van een stukje geheugen, de koelkast. Jullie beiden controleerde de toestand enkele variabele. U beiden trok een conclusie die u vervolgens gehandeld. Maar helaas, terwijl je kamergenoot was in de winkel, de staat die variabele veranderd, hij of zij terug kwam en wil nu de staat te veranderen, maar het is al veranderd op hem of haar. En natuurlijk, zou hij of zij niet gegaan naar de winkel als ze wisten dat je al onderweg. 

Dus in de echte wereld, hoe kon je dit probleem te voorkomen, ervan uitgaande dat je een koelkast, heb je een kamergenoot, en je wil eigenlijk melk? 

PUBLIEK: Communiceren. 

DAVID Malan: Communiceren. OK. Maar hoe kun je communiceren? 

PUBLIEK: Laat een briefje. 

DAVID Malan: Laat een briefje achter, toch? Laat altijd een notitie, voor het fans van de show. Oke, dus altijd een briefje of zet echt als een hangslot of iets op de koelkast die je houdt kamergenoot van het inspecteren van de toestand van die variabele. 

Nu, waarom is dit wellicht relevant voor probleem stelde zeven, of geldautomaten. Nou, stel je een wereld in een ATM waar je misschien wel op te gaan naar een geldautomaat staat machine hier, en een andere ATM hier. En dit gebeurt regelmatig. En stel dat je twee ATM-kaarten gehad, die kunnen worden verkregen. En je inlogt op beide machines effectief tegelijk, hopelijk terwijl niemand kijkt. En typt u uw pincode ongeveer tegelijkertijd. En dan een opvragen saldo heb je om te zien hoeveel geld je hebt. En laten we zeggen dat je $ 100 links in uw account. Dus in wezen gelijktijdig, u zeggen een, nul, nul, in te voeren. En hopelijk nog wat geld terug. 

Maar hoeveel geld zou je terug? Nu computers aan het eind van de dag, vooral als ze praat met servers, hoeft niet per se dingen doen in de volgorde dat is te verwachten. 

Dus stel wat gebeurt er, als gevolg van wat netwerksnelheid problemen daar zijn, of CPU problemen er zijn, of iets dergelijks, veronderstellen dat de eerste ATM controleert uw saldo en ziet, oh, deze persoon heeft $ 100. Maar dan wordt afgeleid, want misschien een back-up gebeurt en dus is het vertragen. Of misschien tijdens het controleren, het netwerk aansluiting kreeg een beetje langzamer, omdat dit gebeurt gewoon. Ze zijn fysieke apparaten. Dus ondertussen de tweede ATM is dezelfde vraag. Hoeveel geld heeft David hebben? $ 100 is het antwoord. Maar omdat de eerste ATM heeft nog niet stuurde het bericht aftrekken $ 100, beide Geldautomaten zijn kluis van de bank geïnspecteerd, zien er $ 100 daar, en nu beide machines mogelijk zijn gaat spugen een antwoord. 

Nu, dit is geweldig voor je in zekere zin als wat de bank doet uiteindelijk is verandering het bedrag minus 100 door het instellen van de variabele gelijk aan uw bankrekening gelijk is aan 0, in tegenstelling tot het doen van minus 100. Nu in het slechtste geval voor de bank - of het beste voor de bank, ondertussen, ze geven je $ 200, en uw bankrekening staat nu negatief $ 100, die echt niet profiteert u op alle. Maar het punt is dat deze race voorwaarde voor twee kamergenoten krijgen melk, of voor twee geldautomaten proberen om geld te krijgen en wijzig de instelling van een gewelf tegelijkertijd bestaat elke keer dat u een database. 

Nu in probleem stelde zeven, deze kwestie ontstaat in de zin dat als je koopt een aandeel van Facebook voorraad, en vervolgens voor je bijvoorbeeld een tweede deel van kopen Facebook voorraad, moet u ervoor een besluit als de programmeur. Om te beslissen hoe te actualiseren van de databank, is de kans groot dat je gaat hebben een rij voor dat bestand, en dit is een manier om het uit te voeren. En je gaat op een aandeel van hebben FB, dat is hun ticker symbool voor deze gebruikersnaam, of deze gebruiker ID, de unieke identificatie. 

Maar hetzelfde verhaal kan hier gebeuren. Als je een SELECT in SQL, zoals u zult zien in probleem stelde zeven als je ziet, oh, David heeft een aandeel van Facebook voorraad. Laat ik nu veranderen deze twee aandelen, omdat hij wil kopen een tweede quotum. Maar stel dat David had eigenlijk twee browservensters openen, of veronderstellen dat Het is een gezamenlijke rekening met twee echtgenoten, en beiden probeert uit te voeren dezelfde handeling, ook daar de mogelijkheid bestaat voor een beslissing te zijn gebaseerd op het vorige toestand van de wereld - de rekening heeft een aandeel - en beide mensen, of beide servers, nu proberen te zeggen deze te verhogen tot twee aandelen. Maar in dit geval, zou u hebben gebracht me geld voor beide aandelen, maar opgehoogd net die ene keer. 

Dus in het kort, het fundamentele probleem Hier, net als bij de grap over verlaten van een nota, of het zetten van een hangslot op het, is als twee mensen of twee threads - denk terug aan scratch - kan de toestand van sommige variabele inspecteren en dan proberen om die variabele veranderen, maar die twee dingen niet gebeuren op het hetzelfde moment, maar kan gestoord door andere dingen gebeuren, gegevens kunnen krijgen in een heel raar staat. En u kunt profiteren of u kunt lijden in de zin van het geld voorbeeld. 

Dus probleem stelde zeven, geven wij u dit een regel code, die lange tijd verhaal kort te maken, lost dit probleem in MySQL. Deze zeer lange instructie die niet doet zelfs passen op een lijn op de scherm hier zorgt ervoor dat uw operatie is wat atomaire genoemd. Het gebeurt allemaal in een keer, of het gebeurt niet op alle. Deze zeer lange zin kan niet krijgen gedeeltelijk onderbroken. 

En wat het doet is letterlijk wat het zegt. Invoegen in sommige tabel worden de volgende drie gebieden die specifieke waarden maar op dubbele sleutel, doe een insert niet doen. Doe een update. Dus dit is als het doen van een SELECT en een INSERT dus op hetzelfde moment om te spreken. En wat is de sleutel dat is waarschijnlijk wordt hier bedoeld? 

Het blijkt, en je zult dit zien in probleem stelde zeven spec, want we daar hebben verklaard om een ​​unieke sleutel op deze bijzondere tafel, zodanig dat je kunt niet meerdere rijen voor dezelfde gebruiker met de dezelfde penny stock symbool - in dit voorbeeld hier, DVN.V is een domme penny stock dat we zie in de spec. Omdat we hebben verklaard dat deze uniek zijn, wat dit betekent is dat als je proberen om een ​​dubbele rij in te voegen, je bent in plaats daarvan gaan het updaten zonder iemand anders een kans om te veranderen de toestand van de wereld niet. Dus in het kort, dit zorgt ervoor dingen zijn atoom. 

Meer in het algemeen echter, databases zoals MySQL - en je hoeft deze functie niet nodig voor p-set zeven, maar houd het in gedachten voor de toekomst - ondersteunen wat transacties genoemd, waar je kunt zeggen START TRANSACTIE letterlijk. U kunt dan uitvoeren twee SQL-statements. En een SQL-instructie, zoals u zult zien in-p set zeven, ziet er een beetje zoiets als dit. Bijwerken van een tabel met de naam. Stel de kolom saldo gelijk aan wat de kolom saldo momenteel is minus 1000 waar het aantal, de rekeningnummer, zoals de gebruikers-ID, gelijk aan 2, en dan update rekening dot dot dot. 

Dus in lekentaal, wat betekenen deze twee queries lijken te doen in de echte wereld gevoel van bankieren? 

PUBLIEK: Overstappen naar besparingen. 

DAVID Malan: Precies. De overdracht van middelen van de ene rekening naar de andere. En dit is een ander voorbeeld waar u echt willen deze twee dingen gebeuren of niet gebeuren. Je wilt niet iets in de te krijgen midden van hen en mogelijk verknoeien de wiskunde, of verknoeien hoeveel geld je hebt, of hoeveel het geld van de bank heeft. Dus wat is echt leuk over transacties in MySQL is dat, en databases algemeen, is dat zij en slimme mensen die hebben geïmplementeerd deze functies erachter te komen hoe om te maken ervoor dat beide van die dingen gebeuren of helemaal niet. 

En als je echt ambitie hebben om te maken een website die wordt gebruikt door mensen op campus, mensen in de echte wereld, het doen iets in de startup zin, Dit zijn de soorten ontwerpbeslissingen die worden steeds zo belangrijk. Anders begin je data verliest, verlies gebruikers, of in het ergste geval als we hebben hier te zien, potentieel geld verliezen. Dus nogmaals, meer op dat in opdracht gesteld zeven, en misschien voor sommige u in afstudeerprojecten. 

Dus laten we veranderen dat beeld dat we hadden een moment geleden net op een manier. Dus laat me eigenlijk zien als ik kan - nope, dat is weg. Daar is het. 

Dus dit is waar we vertrokken vorige keer. En het blijkt dat we gaan gooien nog een ding in de mix hier - een taal genaamd webbrowser. Dus JavaScript eigenlijk past in dit stuk - en ik niet helemaal voldoende ruimte laat, dus dit is nu niet op schaal. OK, dit is echt zielig. OK, dus dat is JavaScript. Oke. Ik ben het echt een slechte dienst. Oke. 

JavaScript is zo een andere programmeertaal taal, en onze laatste, als dat helpt gerust te stellen dat er niet veel meer van de brandkranen hier. JavaScript is dus ook een geïnterpreteerde taal, wat betekent dat je niet compileren in nullen en enen. Je loopt het gewoon. Maar wat is fundamenteel verschillend met JavaScript meestal is dat je niet draaien op uw webserver. Wordt het niet uitgevoerd in de apparaat zodanig. Integendeel, het wordt gedownload door een gebruiker via HTTP in hun browser - Chrome, Safari, Internet Explorer, Firefox, wat dan ook - en het is de browser die deze uitvoert bepaalde programmeertaal. 

Dus om duidelijk te zijn, PHP tot nu toe is uitgevoerd hetzij op de opdrachtregel in onze zwart en wit venster, op een server als het apparaat een computer zoals het apparaat, of het is al uitgevoerd door een webserver uitgevoerd op een computer. Maar het thema hier is dat PHP tot nu toe is uitgevoerd op de server, zodat de gebruiker en de browser van de gebruiker nooit ziet een lijn van PHP-code. 

In feite, als je ooit een browser te openen voor uw website of een ander en je eigenlijk zien PHP code in uw venster, iemand heeft verpest. Want het is niet bedoeld om te worden verzonden naar een browser direct. Het moet worden uitgevoerd en draaide in iets als HTML. 

Maar JavaScript is in wezen het tegenovergestelde. Het is bedoeld om meestal binnen worden uitgevoerd van het browservenster van een gebruiker. En welke soorten websites maken gebruik van JavaScript dan tegenwoordig? 

Zoals letterlijk elke populaire website. Elke website die jullie waarschijnlijk dagelijks gebruik gebruiken JavaScript om de eenvoudigste en zelfs de sexiest functies. 

Dus iets als Facebook Chat als je die gebruikt. Hoe werkt dat eigenlijk? Wel nu toe zijn alle spullen die we hebben gedaan met HTML en PHP veronderstelt dat trek je een URL, en je druk op Enter, en je ziet een aantal HTML-inhoud. En u de koppeling, dat verandert de klik URL, verandert de pagina en herladen wat nieuwe content. Klik op een andere URL of een formulier indienen, u krijgen meegetroond naar een andere pagina en u een aantal nieuwe inhoud te zien. 

Maar het gebruik van iets als Facebook Chat, of Gchat, of Google Maps, zelden doet de hele pagina te vernieuwen, zodat u een wit scherm te zien tijdelijk en dan nieuwe content. Integendeel, webpagina's zijn vandaag dynamisch krijgen opnieuw bijgewerkt en steeds weer allerlei van achter de schermen. En het blijkt dat als je naar iets als Facebook, of Gchat, of Gmail, en de pagina updates automatisch, zonder herladen van de hele scherm, wat er gebeurd is dat Uw browser heeft een soort van geheim gemaakt extra HTTP-verzoeken - niet voor de hele webpagina's, maar alleen voor kleine stukjes van de gegevens, zoals de chatbericht dat je vriend gewoon u, of de status update gestuurd die iemand die je, of de tweet net stuurde dat iemand net stuurde. Het is alleen het maken van weinig aanvragen voor gegevens, en vervolgens met behulp van JavaScript, dit programmeertaal, welke verandering de webpagina eruit ziet zonder de server te helpen, zonder dat de server genereren die HTML. 

Dus in het kort, JavaScript kan worden dan gebruikt om niet alleen nieuwe gegevens op te halen uit de server zonder herladen een hele pagina of het indienen van een formulier. Het kan ook worden gebruikt om veranderingen de zogenaamde DOM - document object model - dat is gewoon de mooie manier voor de boom van HTML zeggen dat zagen we vorige keer. 

Dus om gerust te stellen, JavaScript is syntactisch zo vergelijkbaar met C ook. Er is geen hoofdfunctie. Je begint gewoon schrijven van de code en het zal worden uitgevoerd, of geïnterpreteerd meer goed. Omstandigheden zal er zo uitzien. Niet anders dan C of PHP voor die kwestie. Booleaanse uitdrukkingen of-ed samen zal er zo uitzien. Samen ge-AND uitzien. 

Schakelaars zal er zo uitzien. Voor lussen zal er zo uitzien. While loops zal er zo uitzien. Do while loops zal er zo uitzien. 

Dit is nieuw. Heeft dus JavaScript niet een foreach construct per se, maar dit construct voor variabele i in array, en ik in dit geval wordt een indexwaarde. Dus het is een beetje anders dan dat foreach, maar nieuwe versies van JavaScript komen uit de hele tijd, dus zelfs deze taalfuncties evolueren. 

En als een terzijde, JavaScript deze dagen kan ook worden gebruikt op een server net als PHP met behulp van een kader genaamd Node.js. Een van CS50's TFs, Kevin, heeft geleid een seminar over Node.js dat is verkrijgbaar bij cs50.net/seminars. Dus als je nieuwsgierig bent, weet dat je kunnen dit gebruiken op de server kant als goed, maar dat is een vrij recente trend, maar een krachtige een op dat. 

Dit is een beetje anders. Dit is een array webbrowser. En wat valt je als verschillende versus C of PHP? Er zijn een paar snelle verhalen kunnen we hier vertellen. Wat ontbreekt versus PHP? 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: Ja? Sorry, zeg nogmaals? 

PUBLIEK: niet declareren het type variabele. 

DAVID Malan: We zijn niet te verklaren het type variabele. Dus eigenlijk heel zoals PHP, we zijn niet uitwerking van de soorten van deze variabele. Integendeel, we zijn meer algemeen zeggen var voor variabele. We hebben geen PHP overlast van het hebben dollarteken, die weliswaar vervelend om type, maakt meer duidelijk dat iets is een variabele. Terwijl hier, we zijn een soort terug naar C's aanpak door gewoon te bellen naar een variabele door de naam die we willen te geven dezelfde nummers. En ook zoals PHP, hebben wij vierkante haken voor de waarden binnen die array. 

Dus variabelen in JavaScript ook kan er zo uitzien. Let hier op dit is een string genaamd s, maar evenzo hebben we niet gespecificeerd dat het een string. Hier is echter een kenmerk dat niet doet bestaan ​​op dezelfde wijze PHP, maar wat eveneens. Dit is een object in JavaScript. En objecten zijn een soort van het Zwitserse leger Mes van een gegevensstructuur in u kunt ze gebruiken voor een aantal dingen. 

Hier, bijvoorbeeld, we verklaren een variabele genaamd offerte. Het type dat variabele Een doel. U kunt denken aan dit als een C struct dat heeft sleutels en waarden. Symbol is een sleutel. FB is een waarde, blijkbaar een voorraad symbool. Komma. Prijs is een ander belangrijk, en de waarde ervan is blijkbaar een floating point, of een aantal meer in het algemeen in JavaScript, van $ 49,26. 

Dus PHP heeft geen - we hebben niet helemaal gezien in PHP objecten als dit, maar we zagen een analoge, die wat? 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: associatieve arrays. Dus terwijl PHP heeft associatieve arrays waarvan de syntax is ooit iets zo andere - we zagen de vierkante haken. We zagen de vreemde pijlen symbolen. JavaScript heeft voorwerpen, maar dit is vooral een semantisch verschil en een verschillende synoniem voor nu. Echter, als een terzijde, PHP heeft ook objecten op een manier die Java en andere talen voorwerpen object-georiënteerd programmeren. Maar we zullen gewoon gebruik maken van deze voor data types voor nu. Objecten en associatieve arrays. 

Dit zou men kunnen maken een beetje meer duidelijk. Hier is waarom een ​​object nuttig is. Wanneer u een student verklaren, zoals Zamyla, kunnen we eigenlijk kapselen zodat de binnenkant van dat spreken bezwaar door accolades net als voordat een hele sleutelbos en waarden hier. We hebben een ID, een huis, en een naam voor Zamyla, gevolgd door een puntkomma als gebruikelijke eind. 

Hierna ook dit licht verschillend, maar ook zeer krachtig deze dagen. Hier is een array, en ik weet dat, omdat er is een vierkant haakje omhoog top en een vierkant haakje onderaan. En dit is een array van welke gegevens Typ blijkbaar in JavaScript? Dit is een reeks lijkt als drie objecten. En ik weet dat het een object alleen vanwege de accolades. En merkt dat er geopend accolade, wat spullen, sluit accolade, komma, dan nog wat meer, komma, en dan nog wat meer. Dus dat is drie argumenten gescheiden door twee komma. 

Dus dit is een serie van drie objecten. En elk van deze objecten lijkt een student of medewerker van een aantal sorteren, elk met een ID, huis, en de naam. Maar ik heb dit iets genaamd riep JSON - JavaScript Object Notation. Dit is een dataformaat dat daadwerkelijk is dus erg populair en in mode deze dagen dat als je een schrijven toepassing die gebruik maakt van de Facebook- API, de Twitter API, echt bijna elke API die er deze dagen, waaronder een aantal van CS50's eigen, het gegevens je terug is niet in oude school CSV-formaat. 

Omdat herinneren dat CSV is super eenvoudig. Het is gewoon kolommen gescheiden door komma's. JSON data geeft je meer metadata. Het associeert een sleutel bij elke waarde zo zij niet gewoon aannemen dat de kolom nulde een waarde kolom is een andere, tweede kolom is een andere. Alles in een JSON object hier is een soort van zichzelf beschrijven, omdat elke een van de namen in dit dossier heeft letterlijk naam in de voorkant van het als een tekenreeks tussen aanhalingstekens. 

Dus laten we eens een kijkje nemen op een paar voorbeelden hier. Laat me gaan in het apparaat. En laat me gaan in onze vhost directory in het openbaar. En laat me gaan in het JavaScript directory. En laten we verder gaan en open te stellen dom-0.html, waar DOM betekent alleen document object model. Het is de boom spul waarnaar Ik verwees naar eerder. 

En laat ik het volgende voor te stellen. Hier is een webpagina waarvan lichaam is vrij eenvoudig. Dus hier beneden op de bodem, merkt Ik heb een formulier. We hebben deze eerder gezien. Het heeft twee ingangen, waarvan er een ID van naam, waarvan er een soort indienen, en de eerste iemands type is tekst. Dus dit klinkt eigenlijk vrij simpel. 

Laten we gaan hier. Laten we terug gaan naar deze pagina hier. Laten we naar localhost, en ga in onze JavaScript directory, en ga naar dom-0, en hier hebben we dit formulier. Dus dat is blijkbaar al deze pagina doet. Het heeft een naam veld met een knop Verzenden. Maar ik ben niet van plan om PHP te gebruiken hier. Ik ga alles client side doen dus in JavaScript te spreken als volgt. 

Merk op dat ik inderdaad heb de naam gebied van deze ingang een unieke identifier, die ook daadwerkelijk bespaart me wat tijd in een moment. En zie ik heb een andere label geïntroduceerd in het hoofd van mijn webpagina, de  tag. 

Dus het is in deze zin dat JavaScript is een client-side programmeertaal. In dit geval, net als CSS, heb ik het rechtstreeks binnenkant van mijn HTML. Maar merk ik heb een functie gedeclareerd dat zoals PHP ziet er een beetje syntactisch, maar dit is eigenlijk JavaScript, want nogmaals, het is client-side in de browser. En neem een ​​raden wat dit gaat doen, hoewel sommige van de syntax hier is nieuw. 

PUBLIEK: Zeg hallo tegen wie. 

DAVID Malan: Het gaat om gedag te zeggen naar wie bezoekt deze pagina. Ja, hoe? 

Dus aankondiging, het blijkt in JavaScript er is een waarschuwing ()-functie. Dit is een zeer soort van verdrietig functie die echt gewoon de neiging om gebruikers te ergeren. Het is niet een moet je echt gebruiken typisch, maar het is een snelle en vuile manier van het soort afdrukken iets een grafische gebruikersinterface interface als een browser. Let hier op dat ik heb een tekenreeks in enkele aanhalingstekens. Het blijkt dat in tegenstelling tot C, JavaScript kan eigenlijk heb je enkel gebruiken citaten, en eerlijk gezegd is het gewoon een soort van de stilistische conventie onder JavaScript programmeurs om enkele aanhalingstekens te gebruiken. PHP, ze eigenlijk hebben iets andere betekenis. Maar voor nu, weet alleen dat dat is de enige reden. De conventie in JavaScript is vaak te Gebruik enkele aanhalingstekens, maar we konden gebruiken dubbele aanhalingstekens in beide plaatsen ook. 

Dit is zo interessant. Recall laatste keer dat we dat hadden beeld op het scherm, dat een boom trok waar u de HTML-knooppunt, en het had hoofdnode, en het lichaam knooppunt, en dan wat tekst. Maar er was een speciale knooppunt op de top dat ik het document genoemd. Nou, het blijkt in JavaScript, elke wanneer u een programma in JavaScript schrijven in een browser, hebt u toegang tot een speciale globale variabele. In dezelfde geest te superglobals PHP, dit wordt genoemd in alle kleine letters document. 

Het is als een structuur, maar dit struct ondersteunt ook erin. Dus een C struct heeft gewoon data typisch. Maar een JavaScript-object als dit technisch gezien is heeft ook functies, ook wel bekend als werkwijzen, erin. En je kunt een functie bellen binnenkant van Dit object letterlijk doet haar naam, dot, en vervolgens de naam van de functie of opnieuw methode. Het is gewoon een synoniem, echt. 

En wat betekent deze functie te doen? Je kan soort van gok van zijn naam. Get element door ID. Dus dit gaat om de webpagina te zoeken, zoeken die boom, op zoek naar wat knooppunt, AKA element, heeft een unieke ID van citaat unquote naam. En wat ga ik doen? Ik ga naar de waarde te krijgen binnenkant van die knoop in de boom, en ik ga om een ​​of andere manier hallo te zeggen tegen die naam. 

Dus neem een ​​gok, hoewel we hebben niet toch is dit gezien, wat doet de plus symbolen betekenen hier en hier waarschijnlijk? 

PUBLIEK: Aaneenschakelen. 

DAVID Malan: Concatenate. Recht, en dit zijn slechts soort van ontwerp beslissingen mensen maakten jaren geleden. In PHP, je aaneenschakelen dingen met stippen. In C, je springen door een aantal hoepels en noemen functies zoals strcopy () of strcat () of andere dergelijke activiteiten. Maar in JavaScript, plussen gebruikt u. Dus dit is gewoon het aaneenschakelen drie snaren - hello, een naam, en vervolgens een uitroepteken. 

Dus wanneer en waarom is deze functie al genoemd? Nou, neem een ​​gok van de HTML onderaan. Waarom is greet () aangeroepen, of wanneer? 

Blijkbaar, zo goed als ik kan vertellen, op indienen, wanneer dit formulier wordt ingediend, Ik ga doen wat binnenkant van deze citaten. En in het bijzonder, ik ga bellen greet () en vervolgens return false. 

Nou, laten we zien wat de netto effect is hier eerste. Dus laat me gaan en typ in, zeg, Loren, Indienen. Hallo Loren. Eens kijken of misschien was dit gewoon een gelukkige implementatie. Nope. Dus het is het typen van wat noem ik eigenlijk daar te zetten. 

Maar let op wat er niet verandert. De URL is nog steeds dom-0.html. Er is geen register.php. Er is geen tweede bestand. Er is geen attribuut actie. Dus wat is deze terugkeer vals vermoedelijk aan het doen? Daarom roep ik begroeten () en vervolgens terugkerende valse waarschijnlijk? Wat gebeurt normaal wanneer u op Dienen over een vorm die zelfs wij hebben gezien in de afgelopen week? 

PUBLIEK: [onverstaanbaar]. 

DAVID Malan: Het gaat ergens, toch? Het gaat om een ​​aantal bestemmings-URL. Maar ik denk niet dat dat hier gebeurt. Ik wil mijn website volledig te zijn dynamische zoals Gmail, waar als je eenmaal bent daar, blijf daar. De URL niet zodanig veranderen dat geeft aan dat de hele pagina wordt herladen. Integendeel, ik wil gewoon om iets te veranderen zoals het afdrukken van iets hier op het scherm. 

Nou laat me deze schoon een klein beetje. Laat me open te stellen niet dom-0, maar laat me openstellen dom-2. Net dus je hebt wat syntaxis gezien hier. 

Het blijkt dat wat we net heeft gebruikt rauw webbrowser. Dus dit is echt de taal JavaScript. Sommigen van u wellicht weet van een bibliotheek genaamd jQuery. 

Dus jQuery is niet hetzelfde zoiets als webbrowser. Het is gewoon een bibliotheek die een echt slim guy schreef en gepopulariseerd dergelijke dat bijna iedereen in de wereld nu maakt gebruik van jQuery bij het gebruik van JavaScript. En op het eerste gezicht, eerlijk gezegd, het ziet er een beetje meer cryptisch. Maar je zult vinden, vooral als je gaat er voor uw afstudeerproject met web ontwikkeling, vindt u dat deze reinigt dingen op en bespaart u heel paar regels code. 

Dus laten we gewoon een blik werpen op hoe deze vorm werkt. Let op wat heb ik blijkbaar te verwijderen uit mijn HTML? Er is geen op submit handler zo te zeggen. Er is geen attribuut. Omdat je weet, wat Ik heb niet echt vinden? Ik voelde alsof we vielen in oude gewoonten daar. Net zoals het begon te slordig voelen zowel CSS vermengen met HTML, omdat je soort gooien verschillende talen over de hele plaats, zo ook is dit begonnen te voelen als een slechte weg naar beneden te gaan waar Ik zet JavaScript-code binnenkant van mijn HTML in plaats van factoring het uit. 

Dus dat is de les hier. In dom-2.html, ik factoring het uit. En ik dingen iets doen anders. Voor nu, ga ik mijn handen zwaaien op wat dit werkelijk doet onder de motorkap. Maar alleen voor nu aannemen dat die eerste regel code in deze bibliotheek genaamd jQuery betekent alleen wanneer de document klaar is, doe het volgende. 

Omdat webpagina's kan nemen wat tijd om te laden. Je zou op een trage internet verbinding, en het zou spinnen en spinnen, en tenslotte het is geladen. Dat regel code zegt enkel wachten tot de hele pagina klaar is, wordt het document is klaar, voor het uitvoeren van deze code. 

En let nu op, dit is waarschijnlijk de meest nuttige eerste weg te nemen van jQuery. Deze lijn is hier zeer vergelijkbaar in de geest om deze veel langere lijn hier. Terwijl in ruwe JavaScript-code, er Er bestaat een document globale object dat heeft een functie genaamd getElementById () de mensen die schreef jQuery vereenvoudigd dat om gewoon te zeggen dollarteken, en dan de binnenkant van haakjes zet twee citaten, en vervolgens zet een hekje gevolgd door de unieke ID dat u wilt grijpen. Dus dit is gelijk aan document.getElementById. 

Ondertussen. Indienen betekent gewoon op indiening van welke vorm je bent verwijzend naar links, ga vooruit en voer dit. Maar dit is nu de nieuwsgierigheid ook. Wat is er raar over wat Ik heb hier uitgelicht? Niet alleen is het soort syntactisch nieuw, er is ook iets ontbreekt. 

Publiek: Het is gewoon aangeroepen functie? Het is niet alert genoemd? 

DAVID Malan: Yeah. Nou, dus alert () is down hier, om eerlijk te zijn. Maar er is geen sprake van een naam, zoals u weet, foo of iets hier. Inderdaad is dit een van de functies van JavaScript dat is heel krachtig, maar ook vrij nieuw. En PHP heeft eigenlijk dit ook. 

Laat me ga je gang en doen iets echt snel. Laat me ga je gang en zet deze hier. Laat mij dit doen. Functie. We noemen deze handler (). Een handler functie zo te zeggen. Iets dat sommige bediening omgaat. Laat me opruimen mijn inspringen. En zet deze hier. En we deze hier. Yep. OK. 

Dus nu heb ik een functie genaamd handler () dat ik niet echt weet maar wat het doet. Het moet alleen nog dat spul. Whoops. Nam te veel. Laten we dit doen. Oke. Sorry. Oke. Laat mij dit doen. OK. Dat ziet er mooi recht vooruit nu. Laat mij dit doen. Doe dit. En OK. Dus nu, laten we dit dan hier. Nooit meer de programmering op de vlieg. OK. 

Dus nu, laten we terug gaan naar waar het verhaal begon. Eerder heb ik gezegd dat deze lijn hier betekent dat wanneer het document klaar is, gaat gang en dit te doen. Wat wil ik doen? Wel bijzonder, ik wil gaan gang en doe het volgende. Voer deze regel code, en vervolgens wat ik wil dat je doet is roepen dit werken wanneer het formulier wordt ingediend. 

Nu is dit wat interessant. Dit is op zichzelf geen functie. Let op, ik ben niet tussen haakjes zetten Hier op de normale manier. Ik ben letterlijk het passeren van een functie genaamd handler () naar een andere functie genaamd submit () als argument als al is het als een variabele. En dit is een van de kenmerken van JavaScript is functies zelf zijn eigenlijk alleen maar objecten. In feite, ze zijn echt gewoon variabelen van een soort. En als de naam van de functie is handler (), is er geen reden kan ik niet doorgeven in als argument hier. En dit betekent dat wanneer de vorm met de ID van de demo is ingediend, noemen deze functie. 

Maar als ik nu ongedaan dit alles, waarom dan heb ik misschien doen dit een ogenblik geleden? Nou, dit is een anonieme functie. Want eerlijk gezegd, besefte ik waarom ben ik lastig om tijd te verspillen waarbij een functie genaamd handler () alleen om te bellen het in een en slechts een plek? Als ik niet de naam nodig, en ik doe niet nodig om het meer dan een plaats, bel laten we gewoon de uitvoering van de functie precies waar ik het nodig heb. En zo is JavaScript en PHP-ondersteuning wat worden anoniem functies genoemd die staat u mij toe dat hier precies doen. 

Maar we zijn gewoon krassen op het oppervlak. Laten we plagen met slechts een paar laatste voorbeelden hier. 

Als ik in quote.php. Merk op dat dit eigenlijk een PHP functie, een PHP-programma, dat ik schreef dat een HTTP parameter genaamd verwacht symbool, en ik kan passeren een waarde als FB. En als we daadwerkelijk kijken naar de bron code, dit is het bevragen van een gratis website genaamd Yahoo Finance, net als p-set zeven, en het is terug te keren naar mij iets in blijkbaar de formaat dat bekend is JSON - JavaScript Object Notation. Het is gewoon een object. Let op de accolades, de citaten, de dikke darm, en de komma's. 

Nu ondertussen, dit is wel cool. Want ik kan waarschijnlijk gebruik maken van een programmering taal om URL's te genereren die er uitzien als deze dynamisch, toch? Ik kan dit veranderen in Google en weer terug van Google beurskoers van $ 1,017.55. Dus laten we kijken of we nu niet kunnen gebruiken deze. 

Laat me gaan naar ajax-0 hier, die ziet er als volgt uit. Het is gewoon een website die heeft een formulier met een knop. Laat me hier verder te gaan en typ in YHOO voor Yahoo's aandelen symbool, klik op Get Citaat, en nu merk ik heb gekregen een waarschuwing met 32.86. 

Laat me eigenlijk naar een liefhebber versie van deze pagina, versie twee, en typ in pakweg Microsoft, MSFT. Offerte aanvragen. En let nu op, geen waarschuwing. Let op waar het zegt prijs worden bepaald? Er is de eenvoudigste voorbeelden die hints naar wat Gchat en Facebook Chatten, en Gmail, en andere dergelijke websites aan het doen zijn door daadwerkelijk het veranderen van de webpagina. 

Merken dit. Laat ik de pagina geladen is. Laat me openstellen Chrome's Inspector. Laat me gaan naar de elementen tabblad hier beneden. Nu merken als ik inzoomen hier beneden en open deze up, merken dat dit mijn HTML DOM - mijn document object model. Dit is mijn HTML. Maar let nu op, ook al gaat om een ​​beetje moeilijk om het te zien in beide plaatsen tegelijk, als ik typ in FB hier, kijk naar de bodem van het scherm alleen. 

Het is eigenlijk het veranderen mijn HTML on the fly. En het doet dit heel eenvoudig door zoiets als dit te doen. Als ik open ajax-2, merkt uitvoering iets zo sexy als dat, ook al is het vrij lelijk, maar zo geavanceerd als die functioneel, het heeft een aantal HTML onderaan. Maar merk ik gebruikt om te taggen. We hebben dit niet eerder gebruikt, maar dit is als een, maar dwingt alles op een nieuwe regel. Het is gewoon een rechthoekig gebied op dezelfde lijn wezen. 

Merk op dat ik gaf het een ID van de prijs. Het blijkt met dezelfde JavaScript-bibliotheek, ik heb een functie riep citaat () dat heet wanneer het formulier is verzonden. En wat ik doe is het volgende. Ik ben declareren van een variabele in JavaScript riep url, het opslaan van de waarde quote.php? symbool =. Met andere woorden, ik ben mezelf beginnen om een ​​HTTP-verzoek voor te bereiden, en vervolgens Ik ben het aaneenschakelen op dat met een plus ongeacht het element met ID van het symbool is, wat opvalt is dat tekstveld recht naar beneden hier. Dus net zoals we hadden vormen in het verleden. 

En dan blijkt in jQuery, als je bellen. val (), die oproept van een val functie een waarde functie, die wordt wat de gebruiker heeft getypt inch En vervolgens alle netwerkverkeer dat gebeurt is het volgende. $. GetJSON. 

En als een terzijde, dollarteken is slechts een verkorte schrijfwijze. Het is echt jQuery.getJSON. Breng me naar JSON van deze URL, en wanneer het verzoek komt terug, noemen dit functie en pas in als argument wat terug van de server kwam. 

Dus met andere woorden, als ik terug naar de browser, en ik ga terug naar quote.php, wat mijn browser doet is steeds dit stuk van gegevens. En als ik naar deze webpagina hier, merken als we in plaats daarvan naar het netwerk tab en verwijder het, en typ vervolgens in iets als GOOG voor Google en Get Citaat, let op de pagina niet veranderen. Maar een HTTP-verzoek is gedaan, en wat kwam hier terug als we kijken naar de antwoord is een hele hoop van JSON we toegang tenslotte met deze eenvoudige lijn hier. 

Data is wat gekregen van de server. De prijs is de naam van de sleutel waar ik om geef. Dus data.price geeft me dat. 

Nu ondertussen en deze is het laatste voorbeeld. Nog meer je kunt doen met de pagina. Men eigenlijk, goed twee. We kunnen terug te brengen van de taggen, als je dit onthouden. Dat is webbrowser. We kunnen dat doen. Erg spannend. We vertrekken die als een cliffhanger. 

Maar meer spannende, kunt u dit soort dingen doen. Als ik naar geolocatie-1, het blijkt dat Chrome weet dat we op breedte lengte 42.37. -71,10. Dus er is nog meer daar tot uw beschikking. Maar meer daarover volgende week. Ik zie je maandag.