[Powered by Google Translate] [Week 9] [David J. Malan - Harvard Universiteit] [Hierdie is CS50. - CS50.TV] Alles reg. Welkom terug. Dit is CS50, en dit is die begin van die week 9. Vandag het ons fokus in die besonder op die ontwerp, nie meer in die konteks van die C maar in die konteks van PHP en 'n bietjie van SQL en 'n bietjie van JavaScript, veral na 'n einde van beide pset 7 en ook jou finale projek. In werklikheid, as jy by daardie punt in jou finale projek waar vermoedelik van 'n uur of so gelede het jy ten minste begin om 'n paar gedagtes te gee jou finale projek en jy dink jy wil om saam te werk met 1 of 2 klasmaats, as jy sukkel om met klasmaats, voel vry om te vul die vorm op cs50.net/partners/form. Dit vra net wie jy is, watter soort van die projek wat jy dink oor, waar jy leef net vir logistiese redes. En dan as jy wil om 'n ogie te hou oor die volgende week of so die spreadsheet URL daar, jy kan sien 'n slegs-lees-weergawe van die Google doc wat ons daardie inligting te versamel. So as jy wil om te werk met iemand, deur al beteken voel vry om uit te reik na mense via daardie meganisme. Maar die meerderheid van die mense werk solo. Dit is heeltemal fyn. So voel nie dat dit op enige manier verplig is. Op Vrydag was dit net ek en 'n paar van die span hier, leë teater vir die grootste deel. Daar is 3 toeriste sit daar, so dit was 'n bietjie ongemaklik. Wat het ons gepraat oor databasisse en ons gepraat oor pset 7 'n bietjie. En as jy nie gebeur dat op video op te vang net nog, dit is fyn. Ek sal probeer om enige terme te definieer wat ons andersins nie sou neem vir toegestaan gebaseer op Vrydag se lesing. 

Maar vandag gaan ons probeer om jou te kry tot op die punt nie net in staat is om iets te doen soos pset 7 maar regtig verstaan ​​wat gaan aan onder die enjinkap, veral sommige van die abstraksies wat ons in plek in die functions.php lêer jou lewe 'n bietjie makliker te maak, maar sodat jy uiteindelik verstaan sodat wanneer die opleiding wiele kom af in 'n paar weke kan jy nog steeds oorleef in die werklike wêreld en hierdie dinge doen sonder enige CS50 raamwerk onder jou. Dit $ _SESSION, vir diegene van julle wat vertroud is of wat reeds gevang die video op Vrydag, wat beteken SESSIE laat ons doen in 'n PHP-gebaseerde web aansoek? Dit is 'n superglobal veranderlike, wat beteken dat dit is soortgelyk in die gees te kry en post en 'n paar ander, maar wat is hierdie ding nuttig? 

Wat is SESSIE gebruik word vir? Ja. [Student] Teken in Jammer? [Student] Teken in Teken in Inderdaad. In pset 7 ons met behulp van hierdie sessie superglobal te fasiliteer jou aan te meld. En wat is mooi oor hierdie superglobal is dat dit 'n associatieve array. 'N associatieve array, onthou, is net 'n skikking, maar wie se indekse nie meer hoef te wees getalle soos 012. Hulle kan getalle of hulle kan selfs snare. En so, as jy duik in pset 7 nie, kan jy onthou dat ons 'n sleutel genoem ID stoor binnekant van die associatieve array wie se waarde is iets soos 123 - ongeag die tans aangemeld gebruiker se ID is. Die motivering hiervoor is dat selfs nadat die gebruiker localhost besoek het of my webwerf meer algemeen en dan het hulle aangemeld, selfs as hulle kliek nie 'n skakel of terug te keer na my webwerf vir 5 minute of selfs 'n uur of selfs 'n dag maar hulle laat hul blaaier venster oop, via hierdie superglobal kan ek onthou dat hulle in geteken nie. 

Met ander woorde, dit laat my effens langtermyn enigiets wat ek wil oor 'n gebruiker te stoor. En jy kan dink dit regtig as die inkarnasie van 'n shopping cart. Plekke soos Amazon natuurlik laat jy dinge in 'n shopping cart, maar HTTP, die protokol dat die bevoegdhede wat die Web, is staatloos in die sin dat wanneer jy 'n webtuiste besoek, vir die grootste deel jy nie 'n paar konstante netwerkverbinding tussen jou webleser en die bediener. Sodra jy die HTML-kode en die JPEG en die GIFs het afgelaai en alles wat, die verbinding gaan weg en jy het 'n afskrif van die HTML en noem van die bediener. Maar as die bediener wil iets oor jou te onthou, die las op die bediener om werklik te teken dat die inligting. En sodat jy die programmeerder wat beheer oor die bediener kan die meeste enigiets wat jy wil binne in jou geplaas hierdie superglobal associatieve array en dit sal daar wees om die volgende keer dat die gebruiker kom terug, of dit minute of selfs dae later, tensy hulle hul blaaier venster toemaak, op watter punt SESSIE verdwyn. So dit is efemere stoor, dit is nie-aanhoudende, en dit is bedoel om weg te gaan sodra die gebruiker sluit die leser - nie net dat die blad, wat dikwels die hele leser, sodoende effektief te meld die gebruiker. So hoe hierdie ding is eintlik geïmplementeer? Kom ons neem 'n vinnige blik op 'n eenvoudige voorbeeld wat ons het op Vrydag. Vir diegene wat nie vertroud is, dit was so eenvoudig soos hierdie. Dit is 'n webblad wie se enigste doel in die lewe is om my te vertel hoeveel keer ek het hierdie bladsy besoek. Dit is die eerste keer hier op Maandag dat ek dit besoek het, so dit sê 0 times. 

Maar as ek begin herlaai van hierdie bladsy, sê dit 1 keer, 2, 3, 4, 5, en dit sal net uiteindelik hou op toe,,,, tot vir elke keer wat ek eintlik kliek Reload op dit. So, hoe is hierdie werk? Laat my binne gaan van hierdie lêer genaamd counter.php. Die boonste deel van dit alles is blou kommentaar, maar die interessante deel is hier. On line 13 noem ons hierdie funksie session_start, en dit is letterlik alles wat jy nodig het om te doen as jy toegang wil hê tot te noem hierdie spesiale superglobal $ _SESSION. Dit maak dit alles moontlik gemaak, en ons sal sien in 'n oomblik hoe dit is alles moontlik. In lyn 16 kennisgewing wat ek doen. Indien die sleutel, counter genoem - met ander woorde, die indeks waarde - "counter" bestaan ​​die binnekant van die skikking met die naam SESSIE, dan wat doen ek met dit in die lyn hieronder? Wat is die lyn 18 te doen? 

[Onhoorbaar student antwoord] Wat is dit? [Student] Berging van die waarde. Goed. Dit is die stoor van die waarde wat in sitting is nou in 'n nuwe plaaslike tydelike veranderlike, $ Toonbank in alle kleinletters. Let daarop dat PHP is reeds hier 'n bietjie lui. Kennisgewing ons het nie enige melding van int of float of tou of iets soos dat want PHP is swak getik, waardeur jy nie die tipe van 'n veranderlike te spesifiseer, en in hierdie geval hier Ek het nie eens verklaar dit nog nie. Ek verklaar dat dit binnekant van hierdie kode tussen krulhakies en in teenstelling met C, dit is eintlik okay. Maak nie saak hoe diep geneste 'n veranderlike se verklaring is in PHP - binnekant van krullerige brace, binnekant van krullerige stut en die wil - sal dit op daardie oomblik in die tyd vir die res van die program bestaan, vir 'n beter of vir slegter. So word dit onmiddellik globale so gou as jy dit definieer as ons hier doen. 

Andersins, indien ek nie dat daar iets in die sessie superglobal, Ek glo die inisialisering van hierdie veranderlike toonbank tot 0, sodoende net die aanvaarding van die gebruiker nog nooit hier voor. En dan is dit natuurlik die verhoog van die toonbank hoe? Ek die opdatering van die waarde wat die binnekant van hierdie associatieve array deur dit gelyk aan enige toonbank tans + 1. As ek scroll down hier om die HTML-kode van die bladsy, dit is eintlik eenvoudig. Al wat ek het in die liggaam van hierdie bladsy is, "Jy het hierdie site besoek so-en-so tye." En dit is 'n PHP-konstruk. As jy dit doen <=, dit is gelykstaande doeltreffend aan watter funksie?? Dit is regtig gelykstaande aan iets soos printf, wat ons baie keer gesien het in C, alhoewel as jy dalk al weet van die spec in pset 7, druk is ook 'n funksie wat net iets druk uit, maak dit nie eintlik formaat kodes gebruik, en jy kan eintlik sê eggo as well. Hulle is al ooit so effens anders, selfs al is die netto effek is uiteindelik dieselfde. So het hierdie gebruik van die gelykaanteken is net 'n soort van 'n elegante manier om dit te doen meer bondig as u sou in staat wees om. So dit is al hierdie webwerf nie. Dit druk die waarde van die toonbank. Hoe dit alles eintlik? Jy kan 'n week onthou of so gelede het ons begin soek onder die kap hoe om 'n webblad werk deur gebruik te maak van hierdie Inspekteur tab. 

Chrome het dit beide in die Mac-weergawe, die Windows-weergawe, en selfs die Linux-weergawe, en Firefox en IE soortgelyke meganismes waardeur jy het hierdie ingeboude in debugger binnekant van die leser. Kom ons neem 'n blik op die volgende. Ons het 'n hele klomp van die tabs hier, en onthou dat die linker een is Elemente, en maak nie saak hoe godawful die HTML en JavaScript is in 'n bladsy, onthou dat jy met die blad Elemente kan eintlik navigeer die HTML hiërargies en mooi en netjies. So as jy probeer om te leer van 'n webwerf soos Google of Facebook of eintlik enige webwerf, besef dat jy waarskynlik is beter af op soek na die bron kode van hierdie manier, in teenstelling met die lees van die rou bron, wat 'n gemors kan wees, soos ons gesien het veral op die webwerf van Google. So as ek in plaas kliek op die blad Netwerk hier, Kom ons kyk wat gaan aan toe ek hierdie bladsy besoek. Eerste laat my duidelik my kas. Ek gaan om te gaan na Stellings in Chrome en gaan dan na Geskiedenis en dan Duidelik dat alle blare data. Jy kan gebruik word om om dit te doen vir ander doeleindes, [lag] maar wanneer dit kom by die ontwikkeling van webwerwe, is dit werklik nuttig - as jy lag jy weet. [Lag] Dit is eintlik regtig nuttig wanneer die ontwikkeling van webtuistes want die werklikheid is dinge soos koekies en dinge soos die kas HTML-lêers, cached JavaScript-lêers kan eintlik 'n groot kopseer, want as vir watter rede ookal die leser besluit lêer in die kas en nog wat jy gemaak het veranderinge in die lêer op die bediener maar die leser het regtig nie besef dat die lêer verander en dus nie eintlik nie weer dit aflaai, selfs wanneer jy kliek op die Reload knop gedruk, een van die mees betroubaar maniere om te maak net seker dat die fout is nie met jou kode, dit is met die gedrag van die leser, hier is om te gaan in jou 'browser' en net duidelik dat die hele geskiedenis, sodat daar geen verwarring. 

En dan as jy regtig wil wees paranoïes, sluit die leser, open dit weer, en dan maak seker dat al die werk soos verwag. Dus, in kort, die cache het skoongemaak is goed wanneer ontwikkeling. So hier het ons die Netwerk blad. Ek voorheen besoek het die site 9 keer, maar laat my nou voort te gaan en kliek Reload. En ek is terug na 0. Kom ons eintlik sien hoe dit is dat hierdie sessie superglobal geïmplementeer word. Ek gaan om te klik op die 1 HTTP-versoek wat gemaak is, en debugging venster laat my binnekant van die kyk. Hier sien ek net die reaksie van die bediener, wat is nie interessant. Ek het gesien dat dit in 'n aantal maniere. Maar wat is tegnies interessant is die headers. As ek scroll down hier en fokus op die versoek headers en klik Bekyk bronteks, wat ek gaan om te sien, is letterlik die HTTP-versoek wat het net van my blaaier na die bediener, Synde die operatiewe woord en dan / counter.php synde die lêernaam, HTTP/1.1 net synde die weergawe van HTTP dat my browser gebruik. Hierdie lyn hier is 'n bietjie herinnering van die leser aan 'n bediener wat die naam van die bediener is dat dit wil om te praat. En dan die res van hierdie is soms interessant maar nie relevant right now. 

Dit is net 'n soort van 'n nuuskierigheid. Kriptiese al hierdie string is, enige tyd jou blaaier besoek 'n webwerf dit is die bediener die leser wat jy gebruik en watter bedryfstelsel jy gebruik en watter weergawe daarvan. So as jy al ooit gewonder hoe om webwerwe soos CNN en noem maar op weet wat die persentasies van Mac-gebruikers op die web, PC-gebruikers, Gebruikers van Internet Explorer, Chrome gebruikers en dies meer, is dit omdat al ons blaaiers vertel elke enkele webwerf wat daar is wat ons is. Dit beteken nie noodwendig persoonlik identifiseerbare inligting bevat, maar dit is nie die bediener vertel wat jou IP-adres is en wat webleser en bedryfstelsel jy gebruik. So dit is waar hierdie inligting is. Maar wat is nou meer interessant wanneer dit kom by hierdie sessies word die reaksie kop. Laat my bron kliek langs reaksie sien. Wat is interessant hier is 'n paar dinge. 1, het ons 'n status kode van 200 terug. Ons sien nooit hierdie status kode, want dit beteken dat alles goed gaan. Dit beteken letterlik okay in teenstelling met iets anders. Wat is 'n paar wat ons soms sien wat is sleg? [Student] 404. 404, lêer nie gevind nie, kan 403 jy struikel word op reeds wat is verbode, wat beteken jy het vergeet om te chmod iets, waarskynlik. En daar is 'n klomp van die ander. 

Hier, dit is 'n bietjie mal. Ek het regtig net hierdie lêer geskryf het 'n paar minute gelede plak dit in gedit. Waarom het hierdie bladsy in 1981 verstryk voordat daar was regtig 'n Web? Wat gaan daar aan? 

[Onhoorbaar student reaksie] Die tyd stempel. Maar hoekom? Dit is ietwat arbitrêre, maar dit is werklik nuttig. Wat dit sê vir my browser is hierdie PHP lêer wat jy het nou net versoek het reeds verstryk. In werklikheid is dit 30 jaar gelede verstryk. Maar wat beteken dit werklik? Dit beteken net die volgende keer dat die gebruiker hierdie bladsy besoek, hetsy deur die herlaai of tik die URL in die adres bar, maak seker dat jy 'n nuwe kopie van dit te gaan haal. Dit is soort van 'n voorbeeld van die inhoud van die cache breker, 'n dom woord wat beteken net probeer blaaiers te ontmoedig van eintlik caching HTML wat is gestuur vanaf 'n bediener sodat jy nie per ongeluk getref herlaai en dan sien die dieselfde weergawe van die lêer. Jy eintlik wil die bediener om 'n nuwe kopie te stuur. So is die feit dat dit 1981 beteken net dat dit is wat die toestel is die keuse van as 'n arbitrêre datum in die verlede. Maar die werklike sappige lyn is nou hierdie een. Selfs voor 50 is jy waarskynlik vaagweg bekend met koekies. As van reg nou, veral onder diegene wat minder gemaklike of tussen wat is nou 'n koekie in jou verstand selfs al is ons oor te maak jou begrip meer tegniese? Wat is 'n koekie? Ja. [Student] Inligting oor die gebruiker, soos as hulle hul gebruikersnaam of iets geskryf het. 

Goed. Dit is inligting oor die gebruiker, of hulle het getik in hul gebruikersnaam reeds. Koekies is 'n manier waardeur bedieners iets oor 'n gebruiker kan onthou. En wat 'n koekie is regtig is 'n tekslêer of 'n reeks van grepe wat geplant is deur die bediener binnekant van jou blaaier, en binnekant van die lêer of onder diegene bytes is 'n soort van identifikasie. Miskien is dit letterlik jou gebruikersnaam, maar meer dikwels is dit iets meer kriptiese-looking soos dit vir 'n ding hier bo8dal3ct en so meer - dit regtig groot alfanumeriese string wat eintlik maar net bedoel om 'n unieke identifiseerder vir jou te wees. Of jy kan dink aan dit as 'n soort van 'n virtuele hand stamp. As jy na 'n klub of 'n pretpark, om te onthou dat jy eintlik betaal het en gegaan, hulle het 'n bietjie rooi plakker op jou hand van een of ander aard, en wat herinner aan die mense by die toonbank wat jy reeds betaal het en jy kan kom en gaan soos jy wil. Koekies is 'n bietjie soortgelyk in die gees op daardie. Die eerste keer dat ek hierdie webwerf besoek, as ek net na die skoonmaak van my kas, die web bediener, die toestel in hierdie geval, 'n stempel op my hand wie se naam is PHPSESSID, sessie-ID, waarvan die waarde hierdie baie lang alfanumeriese string. 

So dit is nou soort van vervoerd op my hand, sodat die volgende keer wat ek getref herlaai of met die hand na hierdie URL in 'n leser, my browser deur die definisie van HTTP gaan die hand stempel aan te bied weer en weer en weer. Dus, selfs al is die bediener nie noodwendig nie weet wie ek is, hulle ten minste weet dat ek dieselfde gebruiker of ten minste, meer spesifiek, die selfde blaaier. En so het dit is uiteindelik hoe die sessie superglobal geïmplementeer word. Die bediener het geen idee wie jy is wanneer jy weer 'n webwerf vir die tweede of die derde keer tensy jy hierdie hand stempel. En so gou as wat jy bied dat die hand stamp, die webbediener gaan in wese in 'n klein databasis van sy eie word en tjeks, okay, ek het net gesien die hand stempel van die gebruiker bo8dal3ct en so meer. Laat my sien watter inligting die programmeerder gestoor binnekant van die superglobal oor hierdie gebruiker, en dan moet ek seker maak dat data weer binnekant van die sessie superglobal sodat die programmeerder kan weer toegang tot daardie data selfs al is dit 'n paar minute of ure gelede. So met ander woorde, koekies, wat het 'n slegte rap vir 'n geruime tyd as gevolg van onsekerhede in blaaiers en hulle kan regtig ons privaatheid skend en al hierdie, hulle eintlik het 'n groot nut want sonder hulle jy sal voortdurend meld aan elke Facebook-bladsy wat jy besoek of elke Gmail e-pos wat jy lees indien die leser nie die een of ander manier van onthou dat jy reeds geverifieer. 

Dus, op hierdie manier koekies heen en weer gestuur oor die draad. Nog 'n nuuskierigheid oor koekies, veral hier, is dat dit heeltemal in clear text. Daar is geen enkripsie gaan hier hoegenaamd, en inderdaad het ek met behulp van HTTP op die oomblik. Een van ons gunstelinge oomblikke in CS50, wat nou 2 jaar gelede, rondom die tyd 'n hulpmiddel genaamd Firesheep uitgekom. Dit was 'n gratis stukkie van die sagteware wat gemaak is deur 'n sekuriteit navorser as 'n wake-up call vir die gemeenskap om te sê presies hoe afgrijselijk geïmplementeer sekere verifikasie meganismes op die web was. So vir 'n geruime tyd, Facebook is byna geheel en al oor HTTP, geen HTTPS. En selfs as jy het geen idee hoe om die crypto werk, S is veilig so dit beteken daar is ten minste 'n paar enkripsie betrokke. Facebook het wat gebruik word om gebruikers name en wagwoorde te enkripteer, maar pokes so gou as jy kyk na jou of jou boodskappe of jou news feed, almal wat ongeënkripteerde. So was Gmail totdat net 'n jaar of 2 gelede. Enige tyd as jy aangemeld is, ja, hulle veilige enkripsie gebruik, maar daarna het hulle nie gedoen nie. En hoekom sou dit wees? Waarom nie net gebruik kriptografie al van die tyd in gebruik gevalle soos hierdie? Wat is dit? Ek dink ek het iets gehoor. [Student] Speed. Spoed, reg? Daar is maniere om hierdie. Maar as jy net soort van dink oor dit logies, as jy enkripteer iets, jy het ten minste 'n bietjie meer werk te doen. In pset 2 wanneer jy geïmplementeer Caesar of Vigenere of selfs Crack, net die druk van 'n string is relatief maklik. Enkripteer en dan druk 'n string minimaal vereis 'n bietjie meer werk. 

 Vir super gewilde webtuistes soos Google en Facebook, as jy meer werk te doen vir elke gebruiker vir elke enkele web bladsy wat hulle besoek, Dit neem net meer SVE-tyd. En as jy meer SVE-tyd nodig het, moet jy dalk meer bedieners, wat beteken dat jy kan meer geld nodig het. En so vir baie jare dit net regtig was nie die beste praktyk. Mense sou SSL enkripsie net wanneer hulle nodig het om te gebruik. Maar dit blyk, en as hierdie man met Firesheep super duidelike, wanneer jy ouens wat tans op Facebook right now - Uit nuuskierigheid, laat ons kyk of jy Gesny up. As jy nou in sommige blad op Facebook, selfs al is dit nie die voorgrond, is jou URL HTTP-of HTTPS? [Verskeie studente] S. S? [Lag] Okay. Enige HTTP? Net 1? Okay. So almal van ons kan daardie man se Facebook-rekening nou hack. Vir die grootste deel dit geword het standaard aangeskakel, ten minste in 'n paar webtuistes. En 'n lang storie kort te maak, indien jou web verkeer is nie geïnkripteer, nie alleen die HTML heen en weer oor die WiFis ongeënkripteerde, so dinge soos koekies dwarsdeur die lug heen en weer sonder enige vorm van enkripsie. So as jy net 'n bietjie van programmering vaardig of 'n bietjie van Googlen vaardighede vrye sagteware te vind wat dit doen, is al wat jy hoef te doen is om in Starbucks sit of sit in 'n lughawe waar daar is oor die algemeen WiFi ongeënkripteerde en net kyk vir sleutelwoorde soos Set-Koekie: PHPSESSID want as jy die tegniese vaardig om net te kyk na die WiFi vir al die stukkies wat vloei regdeur die lug vir hierdie patroon, kan jy dan sê dat die man se PHPSESSID gebeur bo8dal en so meer. En dan weer as jy genoeg tegnies vaardig of die regte gereedskap, jy kan dan net die funksionaliteit jou eie leser te begin dat die hand stempel Facebook.com en Facebook is net gaan om te aanvaar dat jy dat die man want al wat hulle weet is nie wie jy is nie, maar dat jy hierdie unieke identifikasienommer. So as jy daardie unieke identifikasienommer steel en dit aan die webbediener as jou eie, hulle is net gaan om te wys jy daardie persoon se news feed of daardie persoon se boodskappe of steek. 

En ek wil nou Google hoe HTTPS Facebook miskien te aktiveer. Maar dit is regtig so eenvoudig soos dit. En so Facebook en Google en dies meer gekry het regtig 'n goeie by hierdie, maar hou 'n oog uit al hoe meer vir enige webwerwe wat jy besoek wat nie HTTP gebruik en het 'n soort van sensitiewe inligting op hulle, of dit nou finansiële of persoonlike of die wil. As hulle dit nie gebruik, kan heel moontlik koekies soos hierdie baie maklik gesteel word en dan vervals is, en dit is presies wat Firesheep het. Jy het nie 'n programmeerder te wees. Al wat jy moes doen, was om 'n internet konneksie, laai hierdie gratis hulpmiddel, en wat dit sou doen, is jy inteken en dan sal dit wys jy die Facebook-name van almal in Sanders, in hierdie spesifieke demonstrasie, rondom jou en alles wat jy het om te doen is kliek op sy naam en die sagteware geoutomatiseer die proses snuif die koekie, om dit as jou eie op Facebook, , en voila, jy ingeteken So, dit is nog een van daardie "dit nie doen nie" amptelik. As jy jou eie huis netwerk en jy wil geknoei, deur al beteken, maar besef dit nie oor die lyn op 'n universiteit-omgewing. 

Maar die doel hier is regtig te beklemtoon nie hoe om dit te doen maar hoe om te verdedig teen hierdie soort van dinge. En die triviale oplossing hier, selfs al is dit self is gebrekkig, is om werklik die gebruik van enige webwerwe wat nie HTTPS gebruik van voortdurend verminder. So webwerwe soos Facebook en Google toenemend blok waar jy kan kies in hierdie soort van ding, en banke het dit vir jare vir soortgelyke redes. So net 'n bietjie van 'n vrees faktor as wat ons kan. Maar dit is dit in 'n neutedop. Dit is hoe 'n bediener onthou wie jy is. En so gou as wat hulle kan onthou wie jy is, kan hulle onthou iets waaroor jy wat 'n programmeerder binne gestoor van hierdie spesiale superglobal genoem $ _SESSION. En ons vir pset 7 gebruik dit trivially net 'n int om te onthou, naamlik die unieke ID van die gebruiker wat aangeteken het, sodat ons weet hulle het daar tevore. Enige vrae en dan op sessies of koekies of iets dergeliks? Firesheep nie so goed werk nie, en jy het om jou rekenaar te sit in 'n spesiale gemengde modus sodat jy werklik luister vir verkeer behalwe julleself. So as jy tans Firesheep aflaai, besef dit is nie heeltemal so maklik soos dit eens was om te demonstreer. Alles reg. En doen nie dit in Sanders. Doen dit by die huis. Databasisse. Een van die dinge wat ons gedoen het in pset 7 baie doelbewus is ons gee jou 'n voorbeeld van 'n databasistabel vir gebruikers wat het 'n paar gebruikers-ID's, sommige gebruikers name, en 'n paar geïnkripteer wagwoorde daarin. En soos u sal sien, as jy nog nie het nie, jy gaan te hê aan die tafel 'n bietjie verander. Jy gaan 'n kas te voeg aan elk van die gebruikers in daardie tafel, en jy gaan 'n ander geskiedenis tafel, 'n portefeuljes tabel te voeg, of dalk noem dit iets anders. Maar in terme van dink oor hoe om dit te doen, laat ons hierdie hulpmiddel wat ons gebruik op Vrydag, maar indien onbekende, die toestel kom met 'n instrument genoem phpMyAdmin wat toevallig in PHP geskryf is, maar sy doel in die lewe, nadat ek hier inloggen as jharvard met karmosyn, is om te gee vir my 'n gebruiker-vriendelike manier van kyk en die verandering van my databasis. 

Die databasis wat ek hardloop op die toestel genoem MySQL. Dit is baie gewild, en dit is 'n gratis open source databasis wat is wonderlik maklik om te gebruik, veral met die voorkant eindig soos hierdie. Wat hierdie hulpmiddel kan my te doen, byvoorbeeld, is poke om tafels. Laat my gaan voort en doen dit. Op Vrydag het ons 'n tabel genaamd studente wat was super eenvoudige. Dit het 3 kolomme - id, naam, en e-pos - en ek handmatig plaas 'n paar rye soos Dawid en Mike in hierdie spesifieke voorbeeld. Laat dit 'n bietjie verder te neem, en laat ons aanneem dat ons wil meer om te onthou as net die naam en e-pos oor 'n gebruiker. Laat my Struktuur kliek hier aan die bokant. En weer, die pset loop jy deur middel van die nodige stappe hier, so moenie bekommerd wees as sommige van hierdie is 'n bietjie vinnig. Dan gaan ek te kliek op hier. Ek gaan 'n aantal van die kolomme na die e-pos te voeg want ek wil iets huis toe te voeg. Ek het vergeet om 'n student se huis aan te teken. Laat my klik op Go, en nou het ons hierdie vorm wat ongelukkig 'n bietjie wyd van links na regs, maar ek gaan die naam van hierdie gebied huis te roep, en dan die tipe wat ek nou moet kies. So laat ons het 'n kort gesprek oor die verskillende tipes in MySQL want terwyl PHP is swak getik en dit soort van speel vinnig en los met tipes, in 'n databasis, veral dit is super belangrik om werklik tot jou voordeel gebruik tik want een van die dinge wat MySQL en ander databasis enjins vir jou kan doen is om seker te maak dat jy nie bogus data in jou databasis. Dit is soort van gratis foutopsporing tot jou beskikking. 

Vir die huis wat ons natuurlik nie wil hê om dit te 'n int, wat is 'n 32-bis waarde in MySQL. Ons het praat kortliks op Vrydag oor varchar, wat staan ​​vir veranderlike lengte char. Wat is dit? Dit laat jou toe om te spesifiseer dat jy dit wil 'n string van een of ander aard te wees. Jy nie regtig weet vooraf hoe lank dit is, so ons sal arbitrêr sê 'n huis se naam kan 255 karakters, maar jy kan gaan met 32, 64 - enige getal regtig. Maar die voordeel van die gebruik van 'n varchar oor 'n veld met die naam kar is wat? Net intuïtief as ek scroll down hier, merk daar is 'n char en daar is varchar. Varchar veranderlike lengte char char is 'n vaste lengte char. So wat slegs gebaseer is op daardie omskrywing, wat is die voordeel of nadeel van elk van hierdie? Met ander woorde, wat omgee oor die onderskeid, of hoekom moet jy omgee? 

Ja. [Student] varchar meer buigsaamheid, maar neem meer geheue. Goed. Varchar neem meer - Kom ons kyk. Ek is nie seker of ek dit reg gehoor. Kan jy sê dat weer? [Student] Ek sê varchar waarskynlik meer flexibiliteit, maar dit neem meer geheue. Interessant. Okay. Varchar gee jy waarskynlik meer buigsaamheid, maar neem meer geheue. Laasgenoemde is nie noodwendig waar nie. Dit hang af van die konteks, maar kom ons kom terug na daardie. 

[Onhoorbaar student reaksie] Presies. Dit is eintlik die geval dat die kar sal tipies gebruik meer geheue omdat 'n char, soos in C, is soos 'n string, dit is 'n verskeidenheid van die karakters. So as jy sê 'n char gebied van lengte 255, die databasis is letterlik gaan gee jou 255 karakters. En as die huis beland MATHER en 6 karakters in totaal, jy mors meer as 200 karakters. 

So 'n varchar doeltreffend gebruik slegs as baie karakters as wat nodig is tot 'n maksimum bedrag. Maar die prys wat jy betaal is eintlik prestasie, potensieel. As jy vooraf weet dat al jou snare gaan wees 8 karakters - byvoorbeeld, veronderstel dat jy nodig het wagwoorde van lengte 8 - die positiewe kant van die gebruik van 'n char veld op die geleentheid, maar nie dikwels, is 'n vaste lengte vir iets soos 'n wagwoord te spesifiseer want nou is die databasis kan selfs slimmer wees. As dit weet dat elke char veld, elke string in 'n kolom is dieselfde lengte, jy terug die funksie van die random access. Jy kan spring rond tussen die verskillende char velde in jou databasis tabel want dink van 'n databasis as rye en kolomme. So as elke een van die snare is dieselfde lengte, jy weet dat die eerste een is op byte 0, die volgende een is op byte 8 en dan 16 en dan 24 en so meer. So as al die snare van dieselfde lengte, kan jy spring rond baie meer doeltreffend. So wat kan 'n voordeel in terme van die prestasie, maar tipies jy het nie die luukse om te weet by voorbaat, so 'n varchar is die pad om te gaan. Hier is 'n ander detail dat selfs Facebook in uiteindelik gehardloop. Ints is groot, en ons soort van gebruik dit by verstek enige tyd wat ons wil 'n nommer, maar dit is slegs 32 stukkies. 

En alhoewel Facebook nie heeltemal nie 4 miljard gebruikers nou, daar is beslis 'n paar mense daar buite met verskeie rekeninge of rekeninge wat geopen is en dan gesluit word, en so Facebook self glo ek 'n paar jaar gelede gehad het om die oorgang van int om, soos gepas genoem, bigint, wat net 64 bisse plaas. So, dit is ook 'n ontwerp-besluit. Jy sal ongelooflik gelukkig wees as jou finale projek draai opstart, het 4 miljard en nie 1 gebruikers, gee of neem, in welke geval die gebruik van ints dalk 'n bietjie kortsigtig. Maar in werklikheid, jou gebruikers tabel is waarskynlik fyn met ints. Maar vir iets soos pset 7, soos jou geskiedenis tafel, jy dalk duisende, miljoene gebruikers as jy ontwikkel in etrade.com. So terwyl jy kan nie meer as 4 miljard gebruikers, die gebruikers jy het meer as 4 miljard transaksies met verloop van tyd kan hê - koop en verkoop en dinge in hul geskiedenis. So as jy verwag - weer, dit is 'n goeie probleme te hê as jy het hierdie baie data - as jy verwag data van meer as die grootte van 'n int, gaan met iets soos bigint is 'n rigting nie dikwels genoeg Goedkeuring deur ontwerpers omdat mense figuur wat nie gaan om 'n probleem te wees, maar dit is so maklik om iets groter as dit te kies. Desimale ons gebruik in pset 7, wat bepaal vaste presisie sodat jy kan verhoed dat die kwessies wat dryf en dubbelspel en reals en dies meer. 

En dan is daar 'n ander velde hier. Ons sal beweeg ons hande op hulle tot 'n sekere mate. Maar datums, tye het almal 'n voorgeskrewe formaat in MySQL, en die voordeel van die stoor datums as datums en nie varchars beteken dat die databasis kan herformateer hulle in verskillende formate, of 'n US-formaat of Europese formaat of dies meer - maar jy wil dit - baie meer doeltreffend as al was dit net 'n paar generiese varchar. En dan is daar 'n ander binêre, varbinary, druppels. Hierdie is 'n binêre groot voorwerpe, en jy kan ook binêre data stoor sowel as geometriese data in 'n databasis. Maar vir ons sal tipies omgee ints en varchars en dies meer. Kom ons klaarmaak hierdie voorbeeld met die huis. Huis ek gaan na willekeur te sê 255 karakters. Toe het standaard waarde wat ons kan doen. Ons kon by verstek sit almal in Mather House, byvoorbeeld. Dit is hoe ons kan spesifiseer dat die databasis moet seker maak dat iemand altyd 'n waarde. Maar ek sal laat wees. Om die waarheid te sê, vir die mense wat daar woon buite die kampus, en nie in 'n huis, miskien is ek eintlik wil om te spesifiseer dat die standaard waarde vir die huis is NULL, en dan moet ek hierdie boks en die databasis dis okay as die gebruiker se huis is NULL vertel. 

Weereens, dit is 'n verdedigingsmeganisme wat jy kan in plek gestel so jy hoef nie eens om dit te sit in jou PHP-kode noodwendig. Die databasis sal verseker dat dinge is of nie NULL. En dan laastens, attribute. Nie een van hierdie is regtig relevant. Binêre, unsigned - nie een van daardie is wat relevant is tot 'n varchar. Indeks. Is daar iemand weet of onthou of 'n raaiskoot wat 'n indeks is vir iets soos die huis? Dit is ook eintlik 'n belangrike en relatief maklik ontwerp besluit. Vir diegene wat dit nog nie gesien het, op Vrydag ons gesels kortliks oor primêre sleutels. 'N primêre sleutel in 'n databasistabel, is die veld of kolom wat as unieke identifikasie van rye in die tabel. So, ons het in die huidige tabel het ons IDs name en e-pos. Watter een van hierdie is die beste kandidaat om 'n primêre sleutel, wie se rol is om te identifiseer rye? Waarskynlik ID. Argumentsonthalwe, kan ons ook gebruik wat al? Miskien het jy kan gebruik e-pos, want in teorie is dit uniek tensy mense is deel van e-pos rekeninge. Maar die werklikheid is dat as jy die gebruik van 'n numeriese ID soos 1234, dit is net 32 ​​bisse, terwyl 'n e-pos adres kan dit baie bytes of hierdie baie bytes. Dus, in terme van doeltreffendheid vir unieke identifiseerders nie, dit is geneig om goeie praktyk wees om net 'n int te gebruik selfs as jy het 'n paar string kandidaat wat jy kan waarskynlik gebruik. 

Vir iets soos die huis, moet dit nie wees om 'n primêre sleutel want dan slegs 1 persoon kan lewe in Mather en 1 persoon in die Currier en dies meer. Net so, moet dit nie uniek wees. Die verskil tussen primêre en unieke, is dat in die geval van ons huidige tafel, ID sou wees primêre maar e-pos is nie vir die rede waarom ons nou net genoem primêre - prestasie - maar dit moet nog steeds uniek wees. So jy kan nog steeds uniekheid sonder om die eis afdwing dat dit 'n super belangrik primêre veld. Maar hierdie een is baie nuttig: Index. As jy weet by voorbaat vir jou finale projek vir pset 7, of in die algemeen, dat hierdie veld huis gaan om iets wat jy soek op 'n baie deur gebruik te maak van die Gekose navraag of iets anders, dan kan jy preemptively die databasis vertel sy magie te werk en maak seker dat dit in die geheue skep enige fancy datastrukture wat nodig is soektogte wat gebaseer is op die huis te bespoedig. Miskien is dit 'n hash tafel gebruik, miskien is dit sal gebruik om 'n geskakelde lys. In werklikheid, is dit geneig om 'n boom te gebruik, wat dikwels 'n struktuur genaamd 'n B-boom - nie 'n binêre boom, maar 'n B-boom - wat is 'n baie wye boom wat jy kan sien in 'n klas soos CS124, die data strukture klas. Maar in kort, het jy nie hoef te bekommer oor dat wanneer die gebruik van smart databasis sagteware. Jy kan net sê dit, "Index hierdie veld, sodat ek dit meer doeltreffend te kan soek." 

As jy laat dit af, en jy probeer om te soek vir almal in die databasis wat woon in Mather, dit sal oorgaan in 'n lineêre soek. En as jy het 6000 voorgraads waar al wat lewe, saamkom in 'n huis, jy gaan die hele tabel te soek die Matherites te vind, terwyl as jy sê Index, hopelik sal dit iets naby aan 'n logaritmiese soektog daardie soorte van studente te vind. Dit is net 'n gratis funksie om te draai op, selfs al is dit kom teen 'n prys van 'n paar bedrag van die ruimte. Ten slotte, motor-inkrement hierdie AI veld, wat beteken dat net as dit is 'n int en jy nie wil hê om te sorg om dit self te inkrementeer elke keer as daar is 'n nuwe gebruiker is, maak seker dat, en elke gebruiker wat kry ingevoeg sal outomaties 'n nuwe ID. Kom ons kliek op Stoor en nou laat ons fout vind met hierdie ontwerp. As ek gaan in Dadaïsten, kennis dat beide Mike en my huis is NULL. Ek kan gebruik phpMyAdmin dit handmatig te wysig. Ek kan gaan in hier en tik Mather en dan druk Enter en nou op die tafel is anders. Maar let ek kon iets anders as goed te doen. Dawid se ID is 1, so phpMyAdmin weer is net 'n administratiewe hulpmiddel; dit is nie iets wat jou gebruikers ooit gaan om te sien. So as ek kliek op die SQL-blad plaas tot bo - en weer, sal pset 7 stel om jou te meer van hierdie navrae - Ek kan met die hand voer die SQL-gestruktureerde navraagtaal opdrag UPDATE gebruikers SET huis = 'Pfoho' WHERE id = 1. Hierdie SQL queries, mooi genoeg, mooi leesbare van links na regs. Werk die gebruikers-tabel, stel die veld genaamd huis Pfoho waar die gebruiker se ID is 1. Of ek kan selfs waar e-pos = 'malan@harvard.edu'. So lank as wat my uniek identifiseer, sou dit so goed werk. Maar ID is geneig om hoër prestasie, so laat doen. Kom se klik op Go. Okay, lecture.users nie bestaan ​​nie. Wat is my fout? Wat is die tafel eintlik genoem hier? Dit is genoem studente net omdat dit is wat ons gedoen het hier op links bo. Dit is genoem studente, nie-gebruikers. So kliek Gaan nou. 1 ry geraak. Query het 0,01 sekondes. As ek kliek nou Blaai nou Malan lewens in Pfoho. So dit is 'n ander smaak van SQL, maar die pset sal loop jy deur middel van 'n bietjie meer van daardie. 

Daar is 'n dom besluit wat ek reeds hier gemaak. Ek sou argumenteer dat hierdie databasis ontwerp is ondoeltreffend want hoe meer mense ek by die studente-tabel, die meer van ons begin ek byvoeg, die meer van die TFS ek begin te voeg, ons gaan begin om te sien wat in hierdie tabel ontslag? 

Ja. [Student] Aangesien dit is in studente, is ons met behulp van dieselfde [onhoorbaar] Dieselfde reg, presies. So as 400 mense woon in Mather, gee of neem, uiteindelik hierdie tabel 400 rye wat sê: "Mather," "Mather, gaan te hê" "Mather," "Mather," "Mather." Ons mors van hierdie grepe, en daar is daar 'n paar van die wegneemetes. 1, daar is die gek hoek geval waar as iemand 'n klomp geld betaal en hernoemt Mather, ons het nou ons hele databasis tabel te verander. Dit gaan nie dikwels gebeur, maar Pfoho was eens bekend as Noord-House 15 jaar gelede, dit gebeur ook. Maar dit is nie al wat dwingende. Meer oortuigend as 'n hoek geval soos dié van die behoefte om die data in grootmaat te werk vir 'n databasis is die rede waarom jy die stoor MATHER weer en weer en weer en weer? Dit is 'n baie van karakters, 6 karakters. Kan ons nie doen selfs beter as dit, veral vir Pforzheimer? Waarlik, ons kan beter doen as wat baie karakters. Waarom nie net 'n unieke identifikasienommer assosieer met elke huis en die winkel wat vir elke gebruiker? Kom ons probeer dit. Eerder as om net die studente-tabel gebruik, laat my gaan na my lesing databasis up hier links bo. Kennisgewing hier is dit sê Skep tabel. Laat my 'n nuwe tabel genaamd huise. Die getal kolomme gaan wees 2. Enter. Nou het ek het 2 velde. Ek gaan om te noem dit die naam, en dit gaan 'n varchar van lengte 255, 

maar dit is redelik arbitrêre. Laat my hier deur konvensie sit. So sit 'n ID hier. Kom ons gee elke huis 'n unieke identifikasienommer. Kom ons gee elke huis 'n naam. Kom ons spesifiseer dat die identifikasie sal unsigned net deur konvensie om slegs positiewe getalle. Kom ons gaan voort en gee dit 'n outo-inkrement veld vir nou. En doen ons moet iets anders? Kom ons gaan voort en klik op Save. Nou het ek 'n tweede tabel. Let op as 'n eenkant is die effens kriptiese SQL opdrag dat jy sou gehad het met die hand te tik as dit nie 'n administratiewe hulpmiddel soos phpMyAdmin gebruik. Sodat 'n ander rede waarom ons dit gebruik. Dit is wonderlik nuttige soort van pedagogies, want jy kan kliek om en uitvind hoe dinge werk deur net kopieer en plak wat phpMyAdmin het. Maar die CREATE TABLE opdrag is wat was net uitgevoer word, en hier is my tafel. Laat my nou voort te gaan en gebruik rou SQL eerder as om eenvoudig deur te kliek op die Voeg in-oortjie. Laat my INSERT INTO huise, en ek gaan om te sê die naam van die huis gaan om 'n waarde te hê van 'Mather'. Dit is dit. Hierdie syntax is 'n bietjie meer kripties. Dit is die naam van die velde wat ons wil voeg. Dit is die waardes wat ons wil in te voeg in daardie velde. Laat my klik op Go. 1 ry ingevoeg het 0,02 sekondes. Laat my nou klik op Blaai. 

Kennisgewing as ek klik op Blaai, daar is Mather, wie se ID is deur automatisering die aantal 1. Laat my doen die ander een. Laat my gaan in die SQL-blad. INSERT INTO huise. Die naam van die huis is gaan 'n waarde van Pfoho te hê en so meer. Gaan. En ek doen dit weer en weer en weer kan hou. Of as jy verveeld met behulp van phpMyAdmin, kan jy net gebruik die Voeg in-oortjie en nie die rou SQL te tik. Jy kan net bang dit vinniger deur te tik, byvoorbeeld, Currier, Enter, en nou as ons klik op Blaai, daar is Currier met 'n ID van 3. So, dit is wat ons bedoel met auto-inkrement. Maar nou moet ons iets op te los in studente. In studente wat die data tipe van die huis veld moet nou wees? Dit moet 'n int wees, reg? Dus is die doel hier is om aan 'n faktorontleding, andersins bekend as normaliseer, die tafels sodat ons stoor nie inligting kere in enige van my tafels. En weer, is die pad wat ons hier gaan om te sê Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, wat is baie oorbodige in terme van die verkwisting van die karakters. So laat ek gaan voort en verander deur te kliek Struktuur, en laat my voort te gaan en maak seker van die huis af veld en klik op failed, en nou is ek gaan om dit te verander na 'n int te wees. 255 is nie meer relevant nie. Laat my gaan voort en sê dit is goed as dit is nog steeds NULL. Red. Nou tafel studente is suksesvol verander, en weer oplet huis is 'n int. As 'n eenkant, die nommer in hakies ignoreer wanneer dit kom by ints. 

Dit is vir nalatenskap redes. Terug in die dag wanneer jy nie het GUIs, jy plaas 'n command line omgewing, die 10 en 11 onderskeidelik gespesifiseer hoeveel karakters wat jy moet wys in die terminale venster om werklik te vertoon velde. Dit het niks te doen het met die bietjie lengte van die veld, so ons sal net ignoreer dat vir nou. Nou ek het om te gaan in hierdie tabel. En as Dawid in Mather woon, moet die huis nie 0, wat is 'n standaard int waarde naaste aan VRYGEMAAK. Hy moet lewe in die huis 1. Kom ons arbitrêr sê dat Mike lewens in Pfoho, so huis nommer 2. Nou is my tafel lyk 'n bietjie meer kripties. Maar die doeltreffendheid oorweeg. Ek is nou met behulp van slegs 32 stukkies om die huis te identifiseer, wat beteken daar is net 1 kanoniese definisie van my huis Mather en Pfoho en dit is in die huise-tabel. So as ek wil nou weer by hierdie tabelle, dink dit op hierdie manier. Hier het ek my studente tafel, en op die regterkant is daar hierdie getalle, 1 en 2. 1 is Mather, 2 is Pfoho. Ons het daardie getalle in hierdie ander tabel, wat genoem word huise, 1 en 2 en 3 vir die 3 huise. Wat ons nou wil doen is het die vermoë om in die kode, PHP en SQL, te sorteer weer by hierdie tabelle, waar as dit is die studente en dit is die huise, ons wil kombineer hulle op een of ander manier, sodat 1 lyne met 1, 2 lyne met 2, en sodat ons kan uitvind waar Dawid en waar Mike en waar almal woon. Om dit te doen, kan ons 'n SQL query soos die volgende uit te voer. SELECT * FROM sluit studente aan by huise op - En nou wat velde wil ons aan te sluit? So students.house = houses.id. 

'N bietjie kripties, maar hierdie deel beteken letterlik 'n nuwe tydelike tabel dit is die gevolg van die deelname van studente en huise. En hoe wil jy die punte van my vingers om hier te kombineer? Stel die studente se huis veld gelyk aan die huise se ID-veld. En as ek nou kliek Gaan ek terug te kry presies wat ek gehoop het. Dawid is in Mather, Mike is in Pfoho, en ek sien ook die unieke identifiseerders nie. Maar die punt is nou het ek 'n volledige tabel. En so het die afhaal hier vir pset 7 of werklik vir die finale projek: As jy vind dat jy 'n stuk van inligting stoor kere, of dit is 'n huis, miskien is dit 'n stad, provinsie, en zip waar zip kan altyd gewoonlik, maar nie gebruik word as 'n unieke identifikasie, gaan deur die oefening geestelik en dan met iets soos phpMyAdmin factoring daarop dat gemeenskaplike data, want veral as jou webwerf kry meer goed gebruik en meer gewild, dit is hoe jy seker maak dat alles is super vinnig, deur die gee van die databasis soveel wenke te uniekheid as moontlik. Dit was 'n baie. Enige vrae? Alles reg. Kom ons neem 'n 5-minute breek daar en hergroepeer. Alles reg. Die volgende is 'n voorbeeld wat 'n paar jaar gelede, toe ek CS161, wat is die bedryfstelsels klas by die kollege wat is bekend vir sy ongelooflike, maar 'n gek bedrag van die werk, en dit fokus regtig op 'n paar van die lae-vlak probleme wat ontstaan ​​in bedryfstelsels en ook selfs in die wêreld van databasisse. 

Die storie wat vertel is deur my professor, Margo Seltzer, daardie jaar was soos volg. Veronderstel dat jy 'n bietjie dorm yskas vir jou en jou kamermaat en beide van julle het regtig soos melk. So jy tuis kom van klas een dag, jou kamermaat is nog nie daar nie, jy die yskas oopmaak, en jy besef: "Ag damn, ons is uit melk." So sluit jy die yskas, jy loop oor die straat na CVS en kry in die toenemend lang lyne om melk te koop by CVS. Intussen, jou kamermaat by die huis kom van sy of haar klas, kom in die kamer, maak die yskas wat regtig wil 'n paar melk, maak die yskas oop en "Damn, geen melk." Sodat hy of sy die yskas sluit, loop uit die deur, en gaan na ABP of iewers anders as CVS waar jy is nie van plan om te stamp in mekaar om te gaan kry 'n paar melk. Natuurlik 'n paar minute later, albei van julle kry terug by die huis en nou het jy twee keer soveel melk as jy eintlik wou. En synde melk, nou is dit gaan sleg gaan, want jy wil melk maar jy doen nie regtig soos melk, so nou het jy te veel melk, so dit gaan versuur. Dit is 'n aaklige, aaklige situasie. Wat kan opgelos het hierdie penarie as jy was die eerste kamermaat huis? Ja. [Student] Jy moet 'n nota gelos het. [Lag] Goed. Jy moet 'n nota gelos het. Jy moet 'n Post-it nota of die soos om te sê, "Gone vir melk," en dan is jou kamermaat konseptueel sou gewees het gesluit uit eintlik om dit te doen. Of jy kan 1 stap verder gaan. Jy kan letterlik sluit die yskas met 'n soort van die slot, en nou is jou kamermaat sal letterlik toegesluit word uit die yskas. As ons terug te veralgemeen tot programmering, jy kan amper dink die yskas as 'n soort van 'n veranderlike of 'n struct, 'n soort van die houer vir meer inligting. Die probleem is fundamenteel hier is dat beide van julle is toegelaat om te inspekteer of lees die toestand van hierdie data struktuur, maar jy het dit gesien op verskillende tye en tog is albei van julle het 'n besluit gemaak gebaseer op die toestand van die wêreld op daardie verskillende oomblikke in tyd. So het jy die yskas gesluit, sou jy ten minste jou kamermaat vermy in staat was om die toestand van die wêreld te inspekteer, sodat hy of sy kon nie daardie besluit gemaak het. So databasisse, soos dit blyk, het hierdie probleem voortdurend. 

Kom ons kyk of ons kan 'n scenario te bou. Veronderstel dat jy soort van 'n slegte man, en jy gaan na die Bank van Amerika of een van die ander plekke in die vierkant wat het 'n paar OTM langs mekaar, en op een of ander manier het jy uitgepluis het hoe om 'n OTM-kaart te dupliseer - nie almal wat hard. Dit is net 'n magnetiese strook. En so wat jy wil om te probeer om dit te doen is speel die spel waardeur jy 1 kaart in 1 masjien, 'n ander kaart in die ander masjien, en jy in wese wil om te probeer om geld te gelyktydig onttrek, want dink dat die storie gaan soos volg. Die masjien aan die linkerkant neem jou kaart en jou PIN, en dan sê jy, "Gee my $ 100." Die OTM is geprogrammeer om eerste te doen op die databasis of die ekwivalent daarvan 'n uitgesoekte - watter databasis gebruik - om te sien nie hierdie gebruiker ten minste $ 100 in sy of haar rekening? As dit so is, dan spoeg uit die $ 100 en aftrek $ 100 uit hul balans. Maar natuurlik as daar is veelvuldige masjiene hier of verskeie maniere te inspekteer die toestand van daardie wêreld, die bank kluis, om te sien hoeveel geld jy het, veronderstel dat net deur kans om die masjien aan die linkerkant en die reg beide daardie vraag vra op min of meer dieselfde oomblik in tyd. 

En dit kan seker gebeur. OTM'e is rekenaars hierdie dae. So as die masjien aan die linkerkant sê: "Ja, jy het ten minste $ 100," Intussen het die masjien aan die regterkant sê: "Ja, jy het ten minste $ 100," dan beide van hulle voortgaan om hul programme te voltooi en eintlik spoeg uit die $ 100 en sê: "Voorheen moes jy $ 200." "Laat my die veranderlike bywerk nou $ 100 in die rekening." Maar as albei van hulle het die saldo van u rekening nagegaan en gevind dat dit is $ 200 en beide van hulle dan doen die wiskunde en sê 200 - 100, die masjiene spoeg potensieel twee $ 100 wetsontwerpe in elke masjien, maar hulle het net by jou som rekening balans te wees 100 $. Met ander woorde, het jy geneem uit $ 200, maar omdat hulle van die toestand van die wêreld gelyktydig en dan 'n besluit op grond van daardie waarde, hulle kan dit nie doen die wiskunde uiteindelik korrek. So ook in 'n bank wat jy regtig wil 'n soort van uitsluiting te hê sodat so gou as jy die toestand van sommige veranderlike nagegaan wat is werklik belangrik, soos die saldo van u rekening, moenie toelaat dat iemand anders besluite te neem op grond van dat, totdat jy klaar is om jou ding te doen, waar in hierdie geval jy is die OTM op die linkerkant. Sluit almal anders uit. Jy kan hierdie effek te bereik in 'n paar verskillende maniere. 

Die eenvoudigste manier om in MySQL is 'n lyn van SQL dat ons julle gegee het die probleem stel spesifikasie wat lyk presies soos hierdie. INSERT INTO die tafel - wat dit ookal genoem - 'n ID, 'n simbool en 'n aandeel, 'n aantal van die aandele, die volgende waardes, byvoorbeeld. As jy nog nie die spec te lees nie, dit is 'n voorbeeld met betrekking tot hoe gaan jy oor 10 aandele van die pennie voorraad te koop vir president Skroob, wie se gebruiker ID gebeur met die getal 7? Dit sê INSERT INTO tabel die volgende id, simbool, en die getal aandele van 7, DVN.V ", en 10. Maar - maar, maar, maar - die tweede reël is die belangrike een. Duplikaatsleutel UPDATE aandele = aandele + WAARDES (aandele). So heeltemal kriptiese-soek met die eerste oogopslag. Maar die feit dat hierdie SQL-navraag, selfs al is dit op die 2 lyne vou, 1 lang navraag, beteken dit dit is atoom in die sin dat hierdie navraag sal óf almal saam of nie uitgevoer word op alle. En deur definisie van MySQL, dit is hoe dit geïmplementeer hierdie navraag. Dit is per definisie in die handleiding wat gewaarborg is om almal op een slag of nie uitvoer nie op alle. Die motivering hiervoor is soos volg. As jy in hierdie geval jy probeer om 10 aandele van voorraad te koop, dit is soort van dieselfde storie as die melk, dit is soort van dieselfde storie as die OTM. 

As jy die fout maak nie gebruik van hierdie sintaksis maar in plaas daarvan kies uit die databasis te sien hoeveel aandele van die pennie voorraad Voorsitter Skroob, en dink hy het 10 aandele, en dan n paar breukdeel van 'n sekonde later julle dan doen 'n UPDATE verklaring, wat is 'n ander verklaring in SQL wat sê gaan voort en voeg 10 meer aandele tot sy huidige 10 sodat ideaal die totaal is 20, die probleem is, want in vandag se databasis stelsels en omdat in vandag se rekenaars jy het verskeie verwerkers, verskeie cores - met ander woorde, rekenaars kan letterlik doen verskeie dinge op een slag - daar is geen waarborg dat jou SELECT en jou UPDATE in hierdie geval gaan gebeur rug aan rug. So 'n slegte scenario sou wees jy die SELECT om te sien hoeveel aandele van hierdie pennie voorraad Skroob het, en dan net deur kans om 'n ander databasis navraag uitgevoer word - miskien sy Skroob in 'n ander blaaier venster probeer om 10 aandele te koop heeltemal in 'n ander venster, baie soos die ATM - en veronderstel dat 'n ander navraag tussen SELECT en die update kry. Dit kan die geval dat Skroob nou sekere aantal aandele verloor omdat 'n ander proses is om die toestand van sy wêreld te inspekteer, of hy kry meer aandele as wat hy behoort te hê. Ons sal nie in die besonderhede van presies wat daardie spesifieke storie lyne sou wees, maar die punt is as jy het 'n veranderlikes waarde om te kyk en dan 'n besluit neem, indien daar is 'n risiko van iemand anders om iets te doen in tussen die 2 state, kan gebeur in multiprocessor stelsels, in multicore stelsels, rekenaars met die vermoë om verskeie dinge om te doen in 'n keer, kan slegte dinge gebeur soos bankrekeninge verkeerdelik gedebiteer, twee keer soveel melk te koop, of in hierdie geval die verkeerde aantal aandele. Maar daar is 'n makliker manier om te dink oor hierdie. 

Dit blyk dat SQL ondersteun ook, as jy konfigureer jou tafel korrek, iets genoem transaksies, wat ek sou argumenteer is selfs makliker om te verstaan as dit nie, maar dit is nie 'n 1-liner, so dit is eintlik 'n bietjie meer betrokke te raak. Daar is letterlik 'n verklaring in SQL BEGIN TRANSAKSIE genoem. Net soos daar kies, UPDATE, INSERT, verwyder, en daarby aan te sluit en 'n klomp van die ander, daar sleutelwoorde soos BEGIN transaksie. En wat jy dan doen in die konteks van pset 7 - jy hoef nie dit te doen vir pset 7; dit uitdruklik ontken nie nodig nie, maar vir finale projekte kan dit nuttig wees - indien u 'n navraag van die begin transaksie en dan 'n ander navraag en dan 'n ander navraag en dan 'n ander, 'n ander, en 'n ander, die navrae sal eintlik nie uitgevoer word totdat jy die SQL-stelling te noem PLEEG, op watter punt, of dit nou 2 state of 20 state, sal alles wat hulle uitgevoer word in 'n keer, wat beteken dat niemand anders per ongeluk te veel melk of debietorder te veel geld kan koop of te veel aandele koop omdat al jou vrae sal strafgerigte rug aan rug Terug na. En dit is super belangrik, veral wanneer jy iets soos hierdie doen. Dit is 'n arbitrêre voorbeeld wat sê laat se werk die bankrekening deur die oprigting van 'n balans gelyk aan balans - $ 1000 waar die rekening nommer 2. En dan die tweede stelling is nou laat deponeer dat $ 1000 in iemand anders se bankrekening wie se rekening nommer is 1. 

Met ander woorde, dit is 'n perfekte voorbeeld van waar jy wil om seker te maak dat beide van hierdie stellings gebeur of glad nie want anders sal die kliënt gaan kry geskroef en jy gaan om hul geld te neem en dit nie deponeer elders, of die bank gaan kry geskroef waar jy gaan om die geld te deponeer maar nie eintlik aftrek van die gebruiker se rekening. So jy wil hê dat beide van hulle saam te voer. Dus gaan in die wêreld transaksies. So dit is iets om te hou in die agterkant van jou gees, nie soseer vir die doeleindes van net 'n finale projek, maar as jy jou finale projek om iewers te neem, as jy wil om te begin 'n paar maatskappy rondom dit, as jy wil sommige student se probleem op te los op die kampus en eintlik het 'n lewendige, aktiewe webwerf, dit is die soort van subtiele foute wat kan ontstaan as jy nie heeltemal dink deur middel van wat kan gebeur as 2 mense probeer om toegang tot jou webwerf letterlik dieselfde oomblik in tyd, waardeur hul navrae anders kan verweef raak. 

Gereed vir 'n paar JavaScript, 'n teaser daarvan? Dit is ons laaste taal vir die semester. Alles reg. Gelukkig, JavaScript lyk baie, baie, baie soortgelyk aan die 2 tale, C en PHP, het ons tot dusver gedoen het. Daar is geen JavaScript in pset 7, maar dit is 'n baie nuttige instrument wanneer dit kom by die web-gebaseerde finale projekte te doen of werklik net webprogrammeren meer algemeen. So 'n vinnige oorsig van iets genoem DOM. Hier is 'n super eenvoudige webblad wat eintlik net sê hello, wêreld beide in die titel en in die liggaam. Soos die inkeping is wat daarop dui vir 'n geruime tyd, daar is inderdaad 'n hiërargie webblaaie. Ek kan hierdie HTML-trek soos 'n boom, dink terug aan ons besprekings van datastrukture in C, soos volg. Ek het 'n paar spesiale wortel node het die dokument node, en ons sal die analoog van hierdie in JavaScript sien in net 'n oomblik. Die eerste kind en enigste kind van daardie in hierdie geval is die HTML-tag. Daar is geen direkte kartering van die DOCTYPE. Dit is 'n spesiale ding, so ons moet net dit ignoreer wanneer dit kom by hierdie DOM, hierdie Document Object Model boom. Let daarop dat die HTML-tag, wat ek arbitrêr uitgebeeld as 'n reghoek, het 2 kinders: die kop en lyf. 

Dit is insgelyks as reghoeke geteken. Dit is betekenisvol picturaal dat die kop is aan die linkerkant van die liggaam. Die implikasie is dat kop kom eerste in die boom. So daar is eintlik 'n bestel aan 'n boom wanneer jy trek dit soos hierdie, selfs al is die vorms en noem maar op is arbitrêr. Kop het intussen 'n enkele kind genoem title, en die titel het eintlik sy eie kind, wat is "Hello, world", wat ek doelbewus as 'n ovaal hier om te maak dit effens verskil van die reghoek getrek het. Hierdie reghoeke is elemente, terwyl hello, wêreld is regtig 'n teks node. So dit is 'n nodus in die boom, maar dit is 'n ander tipe van die node so ek het dit arbitrêr anders. Net so het die liggaam 'n kind genoem hello, wêreld, sowel so anders node selfs al is hulle is toevallig dieselfde teks, maar ek het dit opgestel deur gebruik te maak van die dieselfde vorm. So wat omgee? Wel, wat is mooi oor HTML is dat dit nie hierdie hiërargiese aard. En wat is mooi oor JavaScript en veral biblioteke wat vrylik beskikbaar is en populêre soos jQuery, kan jy navigeer die boom struktuur so ongelooflik maklik. Enige van die dinge wat ons gedoen het in C met wysers en polygonisatie bome en recursing op nodes links kind na regs kind, almal van 'n skielike ons kan sorteer as vanselfsprekend aanvaar ongelooflik insiggewend indien nie 'n bietjie frustrerend maar nie naastenby 'n doeltreffende manier om te gaan oor programmering. En so met hierdie hoër vlak tale soos JavaScript sal ons in staat wees om hierdie boom baie meer intuïtief navigeer. 

En inderdaad die sintaks is redelik vertroud te wees. As jy nog nooit JavaScript gesien het, dit is 'n baie mooi verwysing van die Mozilla mense, die mense wat maak Firefox, so voel vry om te blaai op jou gemak. Wat jy sal vind - en hierdie skyfies is identies aan wat ons gebruik om die ander dag - insgelyks, hoof weg. So wanneer jy skryf 'n program in JavaScript, is daar geen hooffunksie. Jy moet net begin kode skryf. Maar 'n belangrike onderskeid tussen JavaScript en C en PHP is dat terwyl C en PHP tot dusver uitgevoer is bediener kant deur die toestel in hierdie geval of meer in die algemeen deur 'n bediener, JavaScript deur die ontwerp word gewoonlik uitgevoer deur 'n leser. Met ander woorde, kan jy JavaScript-kode skryf, as ons is om te op 'n bediener in die toestel, maar jy sluit dit onder jou HTML, onder jou CSS, onder jou GIFs en jou PNGs en jou JPEG sodat wanneer die gebruiker besoek jou web bladsy, as jy JavaScript gebruik, dat die JavaScript-kode kom vanaf bediener browser, en dit is die leser wat dit werklik voer. So, dit het betekenisvolle implikasies vir selfs intellektuele eiendom. Dit is soort van dom om selfs te dink oor die beskerming van jou IP wanneer dit kom by die JavaScript-kode want deur die aard van die taal kry dit gewoonlik uitgevoer browser kant. 

Jy kan verduisteren, wat beteken dat jy kan maak dat dit lyk mal en lelik met geen spasie, verskriklike veranderlike name, maak dit moeiliker vir mense om jou IP te steel, maar die sleutel is dat dit die leser kant is uitgevoer. Selfs al as 'n eenkant JavaScript gebruik kan word bediener-kant, die mees algemene gebruik geval is nou nog op die leser. En hier is hoe dit lyk. Hier is 'n if-else if-else bou net soos C, net soos PHP. Hier is 'n Boole-uitdrukking wanneer jy "of" 2 dinge saam. Hier is wanneer jy "en" 2 dinge saam. Hier is 'n skakelaar verklaring, wat is soortgelyk aan PHP dat jy kan skakel oor die verskillende tipes van waardes. Loops insgelyks hier vir loops, wat identies gestruktureer om wat ons nog nooit gesien nie. Terwyl loops, ons het te doen terwyl loops. Veranderlikes, ooit so effens anders. Jy het verklaar veranderlikes soos jy doen in PHP en C, maar soortgelyk is swak JavaScript getik. Jy spesifiseer nie int of float of tou of iets wat gewoonlik. Jy kan spesifiseer var. Jy het nie var te spesifiseer, maar dit het implikasies as jy dit nie doen nie. Gewoonlik as jy weglaat var, het jy per ongeluk 'n globale veranderlike in plaas van die plaaslike. So laat ek stel voor dat jy net sê byna altyd var en dan die naam van die veranderlike. Dit is nie 'n tipe, dit is net var vir veranderlike. Dit sou 'n voorbeeld te wees, of dit nou 123 of "Hello, world". Skikkings is teenwoordig en sintakties soortgelyk aan PHP. Ek sal sê var getalle en dan het ek weer tussen vierkantige hakies gebruik om 'n veranderlike te verklaar wie se tipe is verskeidenheid wat hierdie spesifieke getalle in, geskei deur kommas. En dan laastens, dit is die enigste een wat werklik anders lyk. Onthou dat ons in PHP geïmplementeer het 'n assosiatiewe skikking vir 'n student soos Zamyla wat kan lyk soos hierdie, waar die veranderlike genoem student. Die vierkantige hakies beteken hier kom 'n skikking. 

Die feit dat ek nie met behulp van numeriese indekse maar snare - id, huis, en die naam - beteken dat hierdie is 'n assosiatiewe skikking, en hierdie pyle met die gelykaan teken en die reghoekige hakie beteken dat die sleutel is "id", die waarde is 1; die sleutel is "huis", die waarde is Winthrop House; die sleutel is "Naam", die waarde is Zamyla Chan. So daar is 3 sleutels binnekant van hierdie assosiatiewe skikking, wat elkeen het sy eie waarde. Ons het gesien dat in pset 7, of jy sal binnekort in JavaScript dieselfde idee, maar dit gaan om te kyk soos hierdie. So var student - nie 'n dollar-teken, en geen melding gemaak van die tipe nog maar var - gelyk is aan en maak dan krullerige draadjies omdat in JavaScript wanneer jy 'n sleutel waarde pare, gebruik jy eintlik iets wat 'n voorwerp genoem word. En dié van julle kan onthou wat het APCS of soortgelyke voorwerpe uit Java of soortgelyke tale. JavaScript is nie Java, die eerste van alles. Dit was 'n doelbewuste ontwerp besluit jaar gelede af te klop iets anders wat gewild was, sy naam, al is dit het geen fundamentele verhouding om homself te Java. JavaScript voorwerpe, en jy kan dit deur middel van die krullerige brace notasie. Voorwerpe in JavaScript is pretty much gelykstaande aan assosiatiewe skikkings in PHP wanneer dit kom by die stoor van data binne hulle. 

Maar selfs meer kragtig in JavaScript kan jy baie maklik assosieer funksies binnekant van 'n voorwerp, en al wat jy kan doen in ander tale, dit is nogal 'n algemene paradigma, soos ons sal sien. In kort, hierdie voorwerp 'n student, wat is veral Zamyla, en dit is soortgelyk konseptueel, net sintakties verskillende van hierdie. Kom ons eintlik gebruik JavaScript in 'n lêer. Dit blyk uit daar is 'n script tag. Ons het gesien hoe 'n styl-tag en ons het gesien ander HTML tags. Die script tag eintlik sal sommige JavaScript-kode bevat. Laat my gaan in die toestel, waar ons 'n paar bronkode pre-made. Ek het nie gepos dit nog op die webwerf, maar ek sal dit na die klas. Kom ons hierdie een, blink.html. Terug in die 1990's, was daar letterlik 'n HTML-tag wat die knip genoem tag, en dit was een van die mees wonderlike oorbenut tags op die Internet waardeur jy sowat 1990's styl webblad besoek en begin sien teks flikker jy soos hierdie, die resultate van die markies tag, wat die teks soos hierdie. Een van die min kere waar die wêreld het eintlik op 'n web standaard ooreengekom, almal oor die hele linie n paar jaar gelede vermoor die knip tag. Maar ons kan wek dit as 'n demonstrasie van die krag wat jy het met JavaScript as jy 'n program skryf binnekant van 'n web bladsy. Eers laat slaan oor die nuwe dinge en fokus net op die ou. 

Hier is die ou dinge in hierdie voorbeeld. Ek het 'n HTML-tag, 'n kop-tag, en 'n titel tag. Dan het ek 'n liggaam tag hier met 'n div, wat herroep is net 'n reghoekige afdeling van die bladsy dat ek 'n unieke ID wat arbitrêr "groet" na, Ek het net so 'n manier van 'n unieke verwys na dit, wat het 'n paar baie eenvoudige teks: hello, wêreld. Nou laat my blaai na die top van hierdie lêer en sien wat is nuut. Die eerste ding wat is nuut op die top is die script tag, en binnekant van die script tag kennisgewing Ek het 'n funksie verklaar. 'N funksie in JavaScript, redelik soortgelyk aan PHP te verklaar, jy letterlik funksie dan skryf die naam van die funksie, hakies, en miskien 'n paar argumente as wat dit neem nie. Toe het ek het my krullerige stut soos gewoonlik, en nou is ons het 'n paar effens nuwe kode, maar laat ons sien wat dit beteken. So var div, beteken dit gee my net 'n veranderlike genoem div. Ek kon genoem het cat, maar ek wou dit genoem word div vir redes wat duidelik sal wees in 'n tweede. Toe dit blyk uit in JavaScript - en dit is 'n JavaScript-kode ingebed in my web bladsy - daar is 'n spesiale globale veranderlike van die spesies genoem dokument. JavaScript is in werklikheid 'n objek-georiënteerde taal. Ons sal nie in detail in 50 wat dit beteken, maar vir nou weet dat 'n voorwerp is pretty much soos 'n struct. Soos ons gesien pad terug toe in een van die vroegste probleem sit waar ons 'n baie inligting in 'n struct insgelyks is dokumenteer 'n spesiale struct wat kom met die leser, kom met 'n web bladsy. Dit is nie iets wat ek geskep het. Binnekant van hierdie dokument struktuur, maar jy het nie net data maar jy moet ook funksies. 

En enige tyd wat jy het 'n funksie binnekant van 'n struktuur, binnekant van 'n voorwerp, dit is 'n metode genoem. Maar dit is dieselfde ding. 'N metode is 'n funksie wat net so gebeur binnekant van iets anders te wees. So dit beteken dat hierdie spesiale globale veranderlike genaamd dokument het 'n funksie genoem getElementById wat letterlik wat dit doen. Dit sal kry jy 'n element van die DOM, Document Object Model boom, wie se ID is in hierdie geval groet. Met ander woorde, al daardie tyd wat ons spandeer op data strukture kom in die spel hier. Hierdie beeld van 'n DOM dat ons het 'n oomblik gelede, selfs al is die bladsy is 'n bietjie anders, as ek 'n div in hierdie prentjie, watter document.getElementById sou na my toe terugkom, sal effektief wees om 'n wyser die reghoek in die boom, 'n verwysing na die reghoek in die boom. So dit is wat dit beteken om werklik te bel een van daardie funksies. Weer in hierdie geval is dit 'n div. Dit is nie 'n liggaam of 'n titel. So laat ons sien wat ek dan doen met hierdie div nou dat ek dit binnekant van hierdie veranderlike genoem div. Dit blyk uit met JavaScript, jy het die vermoë om die CSS van jou bladsy te dinamies aanpas. Tot nou toe, al van die CSS ons gedoen het, al is dit beperk, is in styl eienskappe, of waar anders sit ons CSS? Ek soort van bederf dat 'n mens. In die styl tag op die top van die lêer. Of 'n derde plek is? 

'N eksterne lêer, iets. Css. So dit is die 3 plekke het ons CSS tot dusver gedoen het, maar die vangs is dat ons hard gekodeer het dit alles. Jy besluit om as jy duik in pset 7, het ons besluit om voor die lesings wat ons CSS sou wees. Maar as jy wil jou CSS te verander, kan jy eintlik doen nie wanneer jy 'n werklike programmeertaal. CSS, HTML - nie programmeringstale. JavaScript is. So dit blyk dat sodra jy een van daardie reghoeke uit die boom genoem die DOM, dit het self n paar data binnekant van dit. So het die div dat ek net uit die boom gegryp het wat ons sal noem 'n eiendom binnekant van dit genoem styl, en die styl eiendom het self 'n eiendom met die naam van sigbaarheid. Ek wil weet dit net deur na 'n CSS gebruiker se handleiding. Dit blyk uit daar is 'n sigbaarheid CSS eiendom wat doen wat dit sê. Dit maak iets sigbaar of nie, sigbaar is of nie. En hoe jy dit doen is dit. Ek programmaties vra of die sigbaarheid van hierdie div weggesteek is, wat kan ek dit verander? Sigbaar is. Anders as die sigbaarheid van hierdie bladsy is nie verborge, logies ek maak dit verborge. Ek het geen idee waarom dit is sigbare en verborge en nie sigbare en onsigbare. Dit was 'n swak ontwerp besluit langs die pad. Maar dit is inderdaad teenoorgesteldes in CSS: sigbare en verborge. Dit alles is, beteken dit die CSS van my lêer verander op en af, op en af vir daardie spesifieke div. Maar weer, dit is 'n funksie genoem knip. Wanneer is die knip funksie genoem? Dit blyk dat daar is 'n ander spesiale globale veranderlike genoem venster, soortgelyke in gees na 'n dokument, maar terwyl die dokument verwys na jou web bladsy, soos die DOM boom, die HTML-kode van die bediener gestuur, venster verwys na die chroom rondom dit, die adres bar, die titel bar, en al die van daardie dinge rondom jou web bladsy. 

En dit blyk dat die venster voorwerp het 'n spesiale funksie binnekant van dit genoem setInterval dit beteken wat dit sê. Dit sal 'n interval te stel - in hierdie geval elke 500 millisekondes - en neem 'n raaiskoot, wat dit gaan elke 500 millisekondes om te doen? Dit gaan daardie funksie knip uit te voer. En wat is lekker hier, is dat ons kon gedoen het in C, selfs al het ons nooit gedoen het nie. C het iets genoem funksie pointers waar jy funksies kan slaag om as argumente. Net so kan jy in JavaScript slaag die naam van 'n funksie in 'n ander funksie. En let op wat ek doen. Ek is nie om dit te doen. As ek tussen hakies na die knip, sou dit beteken die knip-funksie te roep. As ek dit weglaat, wat beteken hier is die knip funksie so dat setInterval kan noem dit elke 500 millisekondes. Sodat die eindresultaat, gruwelike alhoewel dit is, is dat as ek kom in die local host en gaan na blink.html, Ek nou het dit gebeur weer en weer. En as ek eintlik Element Inspekteer, laat ons kyk of ons kan sien. Laat my Inspekteer Element, laat my net 'n bietjie scroll down, laat my kies Elements hier, en let op die DOM binnekant van Chrome se inspekteur. Dit is letterlik verander heen en weer elke 500 millisekondes. As ons na ons vriend Nate, As jy al ooit gewonder hoe dit werk, soortgelyke idee met 'n interval, maar Nate is eintlik baie effektiewe gebruik van kleur in hierdie spesifieke geval hier. So, wat meer kan ons werklik te doen met dit? Kom ons oopmaak nog 'n voorbeeld en probeer om iets dit is programmaties selfs meer bruikbaar as die maak van dinge knip. Laat my gaan vandag in ons vorms en gaan in form0. Dit was die lelikste moontlike vorm wat ek kon kom met, en laat my net wys hoe dit lyk in 'n leser. 

Laat my gaan in localhost / vorms, en dit is form0. Dit is 'n super lelik HTML vorm wat het 'n paar velde vir e-pos, vir die wagwoord, wagwoord, en dan 'n klein boks te stem tot 'n paar terme en voorwaardes. Die vangs is as ek hierdie vorm besoek en ek wil nie op te gee jy my e-pos adres, Ek wil nie in te stem tot die terme en voorwaardes miskien kan ek kliek Registreer en dit laat my deur in elk geval. Dit gebeur voor te lê aan 'n dom PHP lêer genaamd dump.php. Al wat dit doen is om die druk van die inhoud van $ _GET net vir diagnostiese doeleindes. Dit was wat ingedien is nou net deur die gebruiker. Maar veronderstel ons eintlik wil hê dat die gebruiker se vorm voorlegging te valideer. Laat my gaan in weergawe 1. Dit is form1.html. Dit lyk esteties net so sleg, maar let hoe fancy dit is. As ek kliek op registreer sonder saam, kry ek geskree. "Jy moet jou e-pos adres verskaf." Alles reg. So laat ek probeer. So malan@harvard.edu. Ek hoef nie 'n wagwoord. Registreer. Msgstr "U moet 'n wagwoord verskaf nie." Alles reg. So ek sal 'n wagwoord van karmosyn. Registreer. "Wagwoorde stem nie ooreen nie." Ek het nou tik in bloedrooi hier. Ek het per ongeluk nagegaan. Registreer. "Jy moet toestem tot die terme en voorwaardes." Alles reg. Saamstem dat daar. Registreer. En nou is dit wys vir my die diagnostiese opbrengs daar. 

So, wat het gebeur? Ons het hierdie vermoë om vorm voorleggings te valideer. In werklikheid, as jy gedoen het duik in pset 7, daar is 'n verskoning te vra funksie wat maak dit redelik maklik om te skreeu op die gebruiker met 'n boodskap op die skerm. Ek gebruik 'n effens ander meganisme, die waarskuwing funksie, wat nie 'n funksie wat goedgunstelik op, aangesien dit baie lelik gebruiker boodskappe. Maar laat ons sien wat ek hier doen. Dit is form1.html, en let op dat ek het 'n paar mooi vertroud sintaksis: liggaam tag, vorm tag, optrede kenmerk, metode kenmerk. Maar let ek my vorm 'n unieke ID vir gerief. Dan het ek het 'n e-pos veld wie se soort is teks, 'n wagwoord veld waarvan die tipe wagwoord bevestiging gebied waarvan die tipe met 'n wagwoord, en dan 'n boks wie se naam is ooreenkoms hier, tipe boks. En dan het ek 'n submit-knoppie. Maar let op die top wat meer Ek het. Eerste van alles, daar is 'n ander gebruik van die script tag. As jy 'n JavaScript-kode in 'n ander lêer, jy kan dit net soos met CSS. En jy doen dit met script bron, en dan sien ek blykbaar is die koppeling van googleapis.com na 'n baie lang pad, maar waarvan die lêernaam eindig in jquery.min minimum js. jQuery is 'n super gewilde biblioteek vir JavaScript wat net JavaScript maak al die meer gebruiker-vriendelik te gebruik. Dit is effektief 'n de facto standaard. So selfs al wat jy oor om te sien nie suiwer is nie JavaScript per se, dit is 'n biblioteek op die top van JavaScript baie soos die CS50 biblioteek is 'n laag op die top van lae-vlak C-kode, die werklikheid is byna almal op die Internet gebruik. So dit is nie opleiding wiele. Dit is net die beste oefen hierdie dae. Nou onder sien dat dit my eie script tag, en let op wat ek hier gedoen het. Dit blyk dat die jQuery iets 'n bietjie fancy. JavaScript dollar tekens, maar hulle is betekenisloos. 

Hulle is soos die letter A of B of C. jQuery het eenvoudig die konvensie aanvaar of soort van laid eis aan die feit dat $ hul spesiale simbool. So gou as wat jy hierdie globale JavaScript-lêer laai hier met die script tag, jy het toegang tot 'n spesiale globale veranderlike wat genoem $. Dit is meer behoorlik genoem jQuery, maar dit lyk nie naastenby so sexy as $. Maar $ het geen spesiale betekenis. In PHP spesiale betekenis gehad het. Jy het om dit te hê in die voorkant van 'n veranderlike. Dit is net 'n sexy ding wat hulle het. Wat gaan hier aan? Kennisgewing ek verby my globale veranderlike dokument aan die jQuery funksie en toe ek vra gereed. Watter jQuery nie in wese is dit kan jou 'n paar vanielje JavaScript dinge te neem soos die dokument voorwerp, die venster voorwerp, en as jy dit in die jQuery funksie slaag - en weer, om duidelik te wees, dit is 'n funksie genoem jQuery - wat dit doen, is dit terug na jou 'n spesiale weergawe van die dokument wat meer funksionaliteit wat verband hou met dit. So in rou JavaScript daar is geen gereed funksie, maar as jy slaag dokument eers na die jQuery funksie, dit terug na jou 'n spesiale weergawe van die dokument voorwerp wat meer fancy funksies. En dit is hoekom mense dit wil hê. Dit maak net dinge makliker om te doen, as ons oor om te sien. So, wat beteken hierdie reël van die kode? Hierdie lyn van die kode hier beteken wanneer die dokument is gereed - met ander woorde, wanneer die leser is die lees van hierdie lêer bo na onder - gaan voort en voer die volgende funksie. Wat is regtig interessant in JavaScript en PHP het dit so goed - is anoniem funksies. In JavaScript jy kan verklaar funksies wat geen naam nie, maar hulle het 'n liggaam. Let op wat hier gebeur. 

Dit is 'n funksie genoem gereed, en dit beteken net doen die volgende wanneer die hele web bladsy is gereed om, wanneer dit al gelees van die bediener. Wat wil jy doen? Ek wil 'n stuk van die kode uit te voer. Let daarop dat ons nie wil hê dat hierdie kode na regs weg te voer. As ek weggelaat is hierdie, sou dit onmiddellik beteken begin met die uitvoering van hierdie reëls van die kode. Maar die feit dat ek sê nee, nee, nee, draai dit in 'n anonieme funksie soos hierdie middel voer nie dit nog, noem dit uiteindelik. Ons het dit 'n oomblik gelede in ons vorige voorbeeld. Watter funksie het ons uiteindelik bel, 500 millisekondes later? Knip. So het die dieselfde idee. Weereens, selfs as dit lyk 'n bietjie vreemd, net vir nou oor geloof dat 'n anonieme funksie wat uiteindelik genoem, te verklaar, skryf jy bloot funksie () { So watter kode is ons gaan om uiteindelik uit te voer? Die volgende. Dit lyk ook 'n bietjie nuut nie, maar dit beteken hier is die jQuery funksie, en dit is nou 'n kortpad. Hierdie HTML-aan die onderkant van die skerm van die kursus het 'n paar boom verteenwoordiging. Dit is nie. Hierdie bladsy is meer interessant as hierdie Hello, world voorbeeld. Maar daar is 'n paar boom wat ooreenstem met hierdie HTML. Dit sou 'n pyn in die nek te hê om 'n soort van rekursiewe funksie te implementeer om te begin by die wortel node en dan vind die node wie se ID is registrasie. So, wat jQuery super maklik maak vir ons is letterlik. Gaan voort en kry my wat div of watter vorm ookal, watter HTML element het 'n ID van registrasie. Dit is gelykstaande aan document.getElementById ("registrasie"). 

Waarom doen mense soos jQuery? Want dit is korter te tik. Maar dis al wat dit is. Dit is dieselfde idee. Kry vir my die tag wie se ID is registrasie. En wanneer daardie tag, wat gebeur om 'n vorm te wees, ingedien word, voort te gaan en uit te voer hierdie kode. So laat ons neem 'n mens nou kyk hoe ons dit doen vorm validering. Die sintaksis is weliswaar kriptiese op die eerste, maar wat gaan aan? Indien hierdie lyn van die kode is waar, ek gaan om te skreeu op die gebruiker sy of haar e-pos adres te verskaf. So, wat is hierdie lyn van die kode? $ Beteken jQuery. Let nou op. Dit is soort van soos CSS. As jy duik in CSS nie, sal jy weet dat dit beteken dat die element wie se ID is registrasie. Die ruimte beteken 'n kind of 'n afstammeling van registrasie wie se naam is insette. En dan hierdie ding in vierkantige hakies is 'n klein filter. En selfs as dit lyk kriptiese, dit beteken net gaan na die vorm wie se ID is registrasie, gaan na die inset element binnekant van daardie wie se naam is e-pos, en dan kry sy waarde, ongeag die waarde daarvan gebeur om te wees - asdf as dit is al wat ek getikte of malan@harvard.edu as dit is wat ek getik. Dus, as die waarde van die vorm se e-pos veld == niks, skreeu op die gebruiker. Anders as die waarde van die wagwoord veld == niks, skreeu op die gebruiker. 

Anders as die waarde van die wagwoord veld is nie gelyk aan die waarde van die bevestiging veld, wat was die ander vorm element, skreeu op die gebruiker. En dan laastens - en hierdie een het ook 'n paar nuwe sintaksis van sy eie, maar sodra jy dit gesien het, dit is ten minste 'n bietjie meer redelike - anders as die vorm wie se ID is registrasie het 'n inset element wie se naam is ooreenkoms en dit is nagegaan, gaan voort en skree op die gebruiker. So het ek dit heeltemal erken dit is heeltemal oorweldigend op die eerste oogopslag. Dit is 'n baie van die nuwe sintaksis. Maar almal van jQuery volg hierdie soort van patrone. En eerlik, ek het nie eens weet dit bestaan ​​tot 'n paar minute gelede. Ek Googled, "Hoe gaan jy as 'n boks is nagegaan in jQuery?" en dit is die sintaksis, want daar is verskillende maniere om dit te doen met werklike rou JavaScript-kode. So as die heel eerste bladsy van Problem Set 7 beklemtoon, pset 7 is baie 'n oefening in Opstarten jouself waar ons vir ons gegee het, hopelik, 'n konseptuele raamwerk waarmee die pset aan te pak. 

Maar soos dikwels die geval is met die web design, dit is regtig aan jou om rond te steek, inkorporeer brokkies van die kode en voorbeelde van die web, so lank as wat jy dit noem volgens die bepalings op die eerste bladsy, en besef dat leer HTML, CSS, JavaScript, en selfs SQL is regtig bedoel om te at-home oefening as ons begin om hierdie opleiding wiele af te neem. En besef ook daar is so baie meer dinge wat jy kan doen met 'n leser. Binnekant van die meeste van hierdie elemente is daar ander dinge genoem gebeurtenis hanteerders. En selfs al het ons net kyk na wat genoem onsubmit en onready, wat jy kan doen dinge soos onkeydown, onkeyup, soos wanneer die gebruiker 'n sleutel raak, kan jy luister vir daardie en sleutel up. Gmail het sleutelbord kortpaaie. Hoe Google implementeer sleutelbord kortpaaie soos C vir komponeer? Hulle luister vir die gebeure, soos hulle genoem word, soos onkeypress of onkeyup en onkeydown. As jy al ooit hovered jou muis oor 'n paar kieslys opsie en al van 'n skielike, voila, 'n spyskaart verskyn of die grafiese verander van kleur, hoe doen hulle dit? Eerder as om te luister vir onready of onsubmit, jy luister vir onMouseOver of onmouseout. 

Dus, in kort, met hierdie baie eenvoudige basiese beginsels wat ons het begin om te krap die oppervlak van vandag en ons sal verder te duik op Woensdag, jy het, hoe meer, mag die soort van dinge wat jy reeds vertroud is met te implementeer. So laat ons daar te beëindig, en ons sal voortgaan op Woensdag. 

[CS50.TV]