[Powered by Google Translate] [Týždeň 9] [David J. Malan - Harvard University] [To je CS50. - CS50.TV] Dobrá. Vitajte späť. To je CS50, a to je začiatok týždňa 9. Dnes sme sa zamerali najmä na dizajn, už v súvislosti s C ale v kontexte PHP a kúskom SQL a trochu JavaScriptu, najmä ku koncu ako PSet 7 a tiež vaše konečný projekt. V skutočnosti, ak ste v tomto bode v konečnej projektu kde pravdepodobne ako o hodinu alebo tak pred vami aspoň začala zamyslieť do konečného projektu a myslíš si prajete spolupracovať s 1 alebo 2 spolužiakmi, ak máte problémy s pripojením s uvedenou spolužiakmi, neváhajte vyplniť formulár na cs50.net/partners/form. Je to len spýta, kto ste, aké projektu myslíš o tom, kde žijete len pre logistických dôvodov. A potom, ak chcete dávať pozor na v priebehu budúceho týždňa alebo tak tabuľkového URL tam, potom môžete vidieť len na čítanie verzie Google doc , V ktorom sme zberu týchto informácií. Takže ak chcete pracovať s niekým, a to všetkými prostriedkami, neváhajte osloviť ľudí prostredníctvom tohto mechanizmu. Ale väčšina ľudí to práca sólo. To je úplne v poriadku. Takže sa domnievajú, že toto je v žiadnom prípade povinné. V piatok to bol len ja a niekoľko z tímu tu, prázdne divadlo z väčšej časti. Tam boli 3 turistov sedí tam, takže to bolo trochu trápne. O čom sme hovorili bola databáza a hovorili sme o PSet 7 trochu. A ak ste náhodou chytiť, že na videu ešte nie, to je v poriadku. Pokúsim sa definovať všetky pojmy, ktoré by sme inak považujeme za samozrejmé na základe prednášky piatkovej. 

Ale dnes sa budeme snažiť, aby vám do bodu zo dňa nielen schopný urobiť niečo ako PSet 7 ale naozaj pochopiť, čo sa deje na pod pokrievku, najmä niektoré abstrakcie, ktoré sme zaviedli do functions.php súboru aby vaše životy trochu jednoduchšie, ale tak, že si nakoniec porozumeli tak, že keď sa školenia kolesá zložiť za pár týždňov môžete ešte prežiť v reálnom svete a robiť tie veci bez CS50 rámci pod vami. Tento $ _SESSION, pre tých z vás, ktorí sú oboznámení alebo ktorí už zachytil na video v piatok, čo SESSION, dajte nám to v PHP-založené webové aplikácie? To je superglobal variabilný, čo znamená, že je to podobné ako v duchu GET a POST a pár ďalších, ale to, čo je to za vec užitočná pre? 

Čo je SESSION používa? Jo. [Študent] prihlásenie Je nám ľúto? [Študent] prihlásenie prihlásenie Naozaj. V PSet 7 sme pomocou tohto SESSION superglobal uľahčiť prihlásenie A čo je pekné o tejto superglobal je, že je asociatívne pole. Asociatívne pole, odvolanie, je len pole, ale ktorých indexov už nemusí byť čísla ako 012. Môžu byť čísla, alebo môžu byť dokonca reťazca. A tak ak ste sa ponorila do PSet 7 ešte, môžu si spomeniete, že sme sa ukladajú kľúč nazvaný ID vnútri tohto asociatívne pole, ktorého hodnota je niečo ako 123 - bez ohľadu na aktuálne prihláseného ID užívateľa je. Motivácia je to, že aj potom, čo užívateľ navštívil localhost alebo moje webové stránky všeobecnejšie a potom sa prihlásite, aj v prípade, že nie sú kliknite na odkaz, alebo sa vrátiť do svojho webu po dobu 5 minút alebo dokonca hodinu, alebo dokonca denne, ale opustiť svoj okno prehliadača otvorené, prostredníctvom tohto superglobal môžem pamätať, že sú prihlásení 

Inými slovami, mi umožňuje uložiť mierne dlhodobú čo chcem o užívateľovi. A môžete si ju naozaj ako stelesnenie nákupnom košíku. Miesta ako Amazon zrejme vám dať veci do nákupného košíka, ale HTTP, protokol, ktorý poháňa web, je bez štátnej príslušnosti v tom zmysle, že pri návšteve webovej stránky, z väčšej časti nemáte nejakú konštantné pripojenie k sieti medzi prehliadačom a serverom. Akonáhle ste si stiahli HTML a obrázky vo formáte JPEG a GIF a všetko, pripojenie zmizne a vy jednoducho máte kópiu HTML a ktovie čo ešte zo servera. Ale ak server chce mať na pamäti, niečo o sebe, zaťaženie je na serveri skutočne zaznamenať, že informácie. A tak ste programátor, ktorí majú kontrolu nad serverom môže dať najviac, čo chcete v tejto superglobal asociatívneho poľa a to tam bude nabudúce užívateľ príde späť, či už je to minút alebo dokonca dní neskôr, keď zatvoríte svoje okno prehliadača, na ktorom mieste SESSION zmizne. Takže je to pominuteľné skladovanie, je to non-perzistentné, a to znamenalo ísť preč akonáhle užívateľ zavrie svoj prehliadač - nielen, že karta, často na celý prehliadač, čím účinne prihlásenie užívateľa von. Tak, ako je tá vec skutočne realizovaná? Poďme sa rýchlo pozrieť na jednoduchom príklade sme sa pozreli na piatok. Pre tých, ktorí nepoznajú, to bolo tak jednoduché, ako to. Toto je webová stránka, ktorej jediným zmyslom života je mi koľkokrát som navštívil túto stránku. To je prvýkrát, čo tu v pondelok, že som ju navštívil, tak to hovorí 0 krát. 

Ale keby som začal načítanie tejto stránky hovorí, že 1 čas, 2, 3, 4, 5, a to bude nakoniec len sa udržať na počítanie hore, hore, hore, hore, hore pre každú dobu som vlastne kliknite na tlačidlo Obnoviť na to. Tak, ako je to nefunguje? Nechaj ma ísť dovnútra tohto súboru s názvom counter.php. Horná časť je všetky modré komentáre, ale zaujímavá časť je tu. Na riadku 13 nazývame túto funkciu session_start, a to je doslova všetko, čo musíte urobiť, ak chcete mať prístup k tomu špeciálny superglobal s názvom $ _SESSION. To je to všetko možné, a uvidíme za chvíľu, ako je to vôbec možné. V riadku 16 oznámení, čo robím. Ak bude kľúč, tzv pult - inými slovami, hodnota indexu - "počítadlo" existuje vnútri tohto poľa nazýva SESSION, potom to, čo robím s ňou v súlade nižšie? Čo je linka 18 robí? 

[Nepočuteľné Študent odpoveď] Čo je to? [Študent] Ukladanie hodnoty. Dobré. Je to ukladanie hodnotu, ktorá je v SESSION teraz v novej miestnej dočasné premenné, $ Counter vo všetkých malými písmenami. Všimnite si, že PHP už bol trochu lenivý tu. Všimnite si, nemáme žiadnu zmienku o int alebo float alebo reťazec alebo niečo také pretože PHP je slabo typovanie, kedy nemusíte špecifikovať typ premennej, a v tomto prípade tu som to dokonca vyhlásil to ešte. Som vyhlásil, že vo vnútri týchto zložených zátvoriek a na rozdiel od C, je to vlastne v poriadku. Bez ohľadu na to, ako hlboko vnorené premenné vyhlásenie je v PHP - vnútri ortézy kučeravé, vnútri ortézy vlnité a ako - že bude v tomto okamihu v dobe existujú pre zvyšok programu, k lepšiemu alebo k horšiemu. Tak to okamžite stáva globálny akonáhle ho definovať ako tu robíme. 

Inak, keď nemám zistil, že tam je niečo v SESSION superglobal, Som zrejme inicializácii túto premennú čítač na 0, čím len za predpokladu, že používateľ nikdy tu nebola. A potom samozrejme je zvyšovanie counter, ako? Ja som aktualizáciu hodnotu, ktorá je vo vnútri tohto asociatívneho poľa nastavením je rovná čo čítač je v súčasnej dobe + 1. Keby som prejdite sem na HTML stránky, je to vlastne celkom jednoduché. Jediné, čo mám v tele tejto stránky je, "Navštívili ste tieto stránky tak-a-tak čas." A to je pojem PHP. Ak tak urobíte <? =, To je ekvivalentná účinne akú funkciu? Je to naozaj odpovedá na niečo ako printf, ktorý sme videli mnohokrát v C, hoci, ako možno viete už od spec v PSet 7, tlač je tiež funkcia, ktorá vytlačí len niečo, to robí nie vlastne používať formátovacie kódy, a môžete skutočne povedať, echo rovnako. Sú to všetko niekedy tak trochu inak, aj keď čistý efekt je nakoniec rovnaký. Takže toto použitie od rovná sa je len akýsi elegantný spôsob, ako to urobiť stručnejšie než by ste inak mohli. Takže to je všetko, na tomto webe robí. To vytlačí hodnotu čítača. Ako to všetko vlastne deje? Možno si spomínate, týždeň alebo tak dávno sme začali hľadať pod pokrievku na to, ako webová stránka funguje pomocou tohto modulu kartu. 

Chrome má tento aj vo verzii Mac, verzie Windows, a dokonca aj verzia pre Linux, a Firefox a IE majú podobné mechanizmy, ktorými ste tento vstavaný debugger vnútri prehliadača. Poďme sa pozrieť na nasledujúce. Máme veľa kariet tu, a pripomínajú, že jeden je vľavo Elements, a bez ohľadu na to, ako godawful HTML a JavaScript je na stránke, Pripomínam, že sa Elements karte môžete skutočne prechádzať HTML hierarchicky a pekné a úhľadne. Takže ak sa snažíte naučiť z webovej stránky, ako Google alebo Facebook alebo naozaj všetky webové stránky, si uvedomiť, že ste pravdepodobne lepšie pri pohľade na zdrojový kód týmto spôsobom, ako protichodný k prezeranie surového zdroj, ktorý môže byť zmätok, ako sme videli predovšetkým na stránkach Google. Takže keď som namiesto toho kliknite na karte Sieť tu, Pozrime sa, čo sa deje, keď som navštívte túto stránku. Najprv mi dovoľte prečistiť cache. Chystám sa ísť do nastavenia v Chrome a potom ísť do histórie a potom Vymazať všetky údaje o prehliadanie. Tie by mohli byť použité na robíte pre iné účely, [smiech] ale keď príde do rozvojových webové stránky, je to skutočne užitočné - ak sa smejete vieš. [Smiech] Je to naozaj užitočné pri rozvoji webových stránok, pretože realita je veci, ako sušienky a podobné veci medzipamäte súbory HTML, cache súbory JavaScriptu môže skutočne stať veľkým bolesti hlavy, pretože ak z akéhokoľvek dôvodu prehliadač rozhodne medzipamäte nejaký súbor, a napriek tomu ste vykonali zmeny tohto súboru na serveri ale prehliadač nie je naozaj uvedomil, že súbor bol zmenený a preto nie je v skutočnosti znovu stiahnuť, aj keď kliknete na tlačidlo Načítať znovu, jeden z najviac Surefire spôsoby, ako len sa uistite, chyba nie je na vašom kódu, je to so správaním prehliadača, je ísť tu v prehliadači a len vymazať celú históriu tak, aby tam žiadny zmätok. 

A potom, ak naozaj chcete byť paranoidný, ukončite prehliadač, reštartujte ho, a uistite sa, všetko funguje podľa očakávania. Takže v skratke, po vymazaní vyrovnávacej pamäte je dobré, keď robí rozvoj. Takže tu máme na kartu Sieť. Aj predtým navštívil miesto 9 krát, ale nechajte ma ísť napred teraz a kliknite na tlačidlo Obnoviť. A ja som späť na 0. Poďme skutočne vidieť, ako je možné, že tento SESSION superglobal je vykonávaný. Idem kliknite na 1 HTTP požiadavky, ktorý bol vyrobený, a to ladenie okna mi umožňuje pozrieť dovnútra toho. Tu vidím len odpoveď zo servera, ktorý nie je zaujímavé. Videl som to v ľubovoľnom počte ciest. Ale to, čo je technicky zaujímavé sú hlavičky. Keby som prejdite sem a zamerať sa na hlavičkách a kliknite na tlačidlo Zobraziť zdroj, čo budem vidieť, je doslova požiadavku HTTP že jednoducho išiel z môjho prehliadača na serveri, GET je rozhodujúce slovo a potom / counter.php bytia názov súboru, HTTP/1.1 byť len verzia HTTP že môj prehliadač používa. Táto linka je tu trochu pripomína z prehliadača na server, čo názov servera je že chce hovoriť. A potom zvyšok je to niekedy zaujímavé, ale nie je relevantný práve teraz. 

To je len trochu zvedavosti. Cryptic hoci je tento reťazec je, kedykoľvek váš prehliadač navštívi webovú stránku je informovanie server aký prehliadač používate a aký operačný systém používate a akú verziu tejto zmluvy. Takže ak ste sa niekedy nad tým, ako webové stránky, ako CNN a ktovie čo ešte vedieť, aké sú percentá užívateľov Mac na webe, užívateľov PC, Používateľom IE, Chrome užívatelia a podobné, je to preto, že všetky naše prehliadača hovoria každý web tam, čo sme. To nemusí nutne obsahovať osobné identifikačné údaje, ale to predsa povedať, server, aké sú vaše IP adresa je a aký prehliadač a OS používate. Tak to je, ak je táto informácia. Ale čo je ešte zaujímavejšie teraz, keď ide o týchto školeniach je hlavička odpovede. Dovoľte mi, aby som na položku Zobraziť zdrojový vedľa odpovede. Čo je zaujímavé, je tu niekoľko vecí. 1, sme sa vrátili stavový kód 200. Nikdy sme nevideli tento stavový kód, pretože to znamená, že je všetko v poriadku. To znamená, doslova v poriadku na rozdiel od niečoho iného. Čo je to číslo niekedy vidieť, že je to zlé? [Študent] 404. 404, súbor nebol nájdený, môže 403 môžete byť zakopnutia na už, ktoré je zakázané, čo znamená, že ste zabudli na niečo chmod, s najväčšou pravdepodobnosťou. A je tu banda ďalších. 

Tu dole, to je trochu blázon. Naozaj som to napísal tento súbor pár minút pred vložením do gedit. Prečo túto stránku vyprší v roku 1981 predtým, než tam naozaj Web? Čo sa to tam deje? 

[Nepočuteľné Študent odozvy] Časová pečiatka. Ale prečo? Je to trochu svojvoľné, ale v skutočnosti je to užitočné. Čo to hovorí k môjmu prehliadači je to PHP súbor, ktorý ste práve požiadal už vypršala. V skutočnosti, to, že sa skončila pred 30 rokmi. Ale čo to vlastne znamená? To len znamená, že nabudúce užívateľ navštívi túto stránku, či už prekládke alebo zadaním adresy URL v adresnom riadku, uistite sa, že ste ísť a prines novú kópiu. To je akýsi príklad medzipamäte mlátiť, hlúpy slovo, ktoré znamená len sa snaží odradiť prehliadača od skutočne cache HTML je, že bol odoslaný zo servera takže sa nebudete zasiahla znovu načítať a potom uvidíte rovnakú verziu súboru. Vy vlastne chcete, aby server odoslať novú kópiu. Takže skutočnosť, že je to 1981 znamená to, že to je to, čo je prístroj výberu ako ľubovoľné dáta v minulosti. Ale skutočný šťavnaté linka je teraz toto. Ešte predtým, než 50 pravdepodobne ste povedome s cookies. Ako teraz, najmä medzi tými, menej pohodlné, alebo medzi, čo je cookie vo vašom pochopenie práve teraz aj keď sme o tom, aby sa vaše chápanie viac technické? Čo je to súbor cookie? Jo. [Študent] Informácie o užívateľovi, ako v prípade, že ste napísali svoje užívateľské meno alebo niečo. 

Dobré. Je to informácie o užívateľovi, či už ste napísali vo svojom užívateľské meno už. Cookies sú spôsob, ako, kedy servery si pamätám niečo o užívateľovi. A čo cookie je naozaj je textový súbor alebo niektoré postupnosť bajtov , Ktorý je zasadený server vnútri vášho prehliadača, a vo vnútri tohto súboru alebo medzi týmito bajtov je nejaký identifikátor. Možno je to doslova vaše užívateľské meno, ale často je to niečo viac mystické vyzerajúce podobné veci tu - bo8dal3ct a tak ďalej - je to naozaj veľký alfanumerický reťazec to je naozaj len chcel byť jedinečný identifikátor pre vás. Alebo si môžete myslieť na to, ako akýsi virtuálny ruky pečiatka. Ak pôjdete do nejakej klubu, alebo zábavný park, na pamäti, že ste skutočne zaplatená a preč, dali malý červený štítok na ruke nejakého druhu, a že pripomína ľuďom na prepážke, že ste už zaplatené a môžete prísť a odísť, ako je libo. Cookies sú trochu podobné v duchu na to. Prvýkrát som navštívil túto stránku, ako som to urobil po odstránení mojej cache, webový server, prístroj v tomto prípade, dať pečiatku na ruky ktorého meno je PHPSESSID, session ID, ktorého hodnota je to naozaj dlhý alfanumerický reťazec. 

Takže to je teraz trochu nápisom na mojej strane, takže nabudúce som narazil iný alebo ručne navštívte túto adresu URL v prehliadači, môj prehliadač z definície HTTP predstaví ručné pečiatka znovu a znovu a znovu. Takže aj keď je server nemusí nutne vedieť, kto som, sa aspoň vedieť, že som rovnaký užívateľ alebo aspoň konkrétnejšie, rovnaký prehliadač. A tak to je v konečnom dôsledku, ako je implementovaná SESSION superglobal. Tento server nemá tušenie, kto ste, keď ste prehodnotili webové stránky pre druhej alebo tretej čas ak predložíte tento ručné pečiatka. A akonáhle si predstaviť, že ručné pečiatka, webový server v podstate ide do malej databázy vlastné a kontroly, v poriadku, ja som práve videl ručné pečiatka užívateľského bo8dal3ct a tak ďalej. Pozriem sa, aké informácie programátor uložená vnútri superglobal o tomto užívateľa, a potom ma uistiť, že tieto údaje sú opäť vo vnútri SESSION superglobal tak, že programátor môže znovu prístup k dátam aj keď to bolo nastavené niekoľko minút alebo hodín pred. Takže inými slovami, sušienky, ktoré dostal zlý rap na nejakú dobu z dôvodu neistoty v prehliadačoch a je naozaj možné porušovať naše súkromie a to všetko, oni vlastne majú skvelý nástroj, pretože bez nich by ste byť neustále prihlásenie do každej stránky, ktorú navštívite Facebook alebo každý Gmail e-mail prečítať, ak prehliadač nemá nejaký spôsob, ako si pamätať že ste už bol overený. 

Takže týmto spôsobom sa súbory cookie poslaný späť a ďalej cez drôt. Ďalšie zvedavosť sušienky, najmä tu, je to, že je to úplne v podobe obyčajného textu. Nie je šifrovanie deje vôbec, a naozaj som pomocou HTTP v túto chvíľu. Jeden z našich obľúbených momentov vo CS50, ktorý je teraz pred 2 rokmi, bol v čase okolo nástroj s názvom Firesheep vyšiel. To bol voľný kus softvér, ktorý bol vyrobený bezpečnostné výskumník ako budíček pre komunitu povedať, ako otrasne vykonávaná niektoré autentizačné mechanizmy na webe boli. Takže na nejakú dobu, Facebook bol takmer úplne cez HTTP, HTTPS nie. A aj keď nemáte tušenie, ako crypto pracuje, S je zabezpečený tak to znamená, že je aspoň nejaký šifrovanie zapojené. Facebook sa používa na zašifrovanie používateľské mená a heslá, ale akonáhle sa pozrel na svoje tropí alebo vaše správy alebo vaše správy krmivo, to všetko bolo nešifrované. Tak bol Gmail, kým len rok alebo 2 pred. Kedykoľvek ste prihlásení, áno, oni používajú bezpečné šifrovanie, ale potom, že nie. A prečo by to mohlo byť? Prečo nie len používať kryptografiu po celú dobu v prípadoch použitia, ako je tento? Čo je to? Myslím, že som niečo počul. [Študent] Speed. Rýchlosť, nie? Existujú spôsoby, ako vyriešiť tento problém. Ale ak si to jednoducho o tom premýšľať logicky, ak zašifrovať niečo, čo musíte urobiť, aspoň trochu viac práce. V PSet 2, keď ste zaviedli Caesara alebo Vigenère alebo dokonca Crack, iba tlač reťazec je pomerne jednoduché. Šifrovanie a potom tlač reťazec minimálne vyžaduje trochu viac práce. 

 Za super populárne webové stránky, ako Google a Facebook, Ak máte urobiť viac práce pre každého užívateľa pre každú jednotlivú webové stránky, ktoré navštívite, že jednoducho trvá viac procesorového času. A ak potrebujete viac času procesora, možno budete potrebovať ďalšie servery, čo znamená, že budete potrebovať viac peňazí. A tak na mnoho rokov to jednoducho naozaj nie je najlepšia prax. Ľudia by používať šifrovanie SSL iba vtedy, keď potreboval. Ale dopadlo to, a ako tento chlapík s Firesheep z super clear, Keď sa chlapci, ktorí sú v súčasnej dobe na Facebooku teraz - Zo zvedavosti, uvidíme, či budete Priznáme sa. Ak ste na Facebooku teraz v niektorých karte, aj keď to nie je na popredí, je vaša URL HTTP alebo HTTPS? [Viac] Študenti S. S? [Smiech] Dobre. Akékoľvek HTTP? Len 1? Dobre. Takže každý z nás môže zaseknúť ten chlap je Facebook účtu práve teraz. Z veľkej časti sa to stalo v predvolenom nastavení zapnutá, aspoň v niektorých internetových stránkach. A dlhý príbeh krátky, ak váš webový prevádzka nie je šifrovaná, Nielen, že HTML ísť tam a späť cez WiFis nešifrované, takže veci ako cookies, choďte tam a späť po celom vzduchu bez akejkoľvek formy šifrovania. Takže ak máte len trochu programovanie znalosťami alebo urobiť niečo Googling zručností nájsť voľné softvér, ktorý to robí, všetko, čo musíte urobiť, je sedieť v Starbucks alebo sedieť na letisku, kde je všeobecne nešifrované WiFi a len sledovať kľúčové slová, ako Set-Cookie: PHPSESSID alebo pretože ak máte technický pútavé len pozerať WiFi pre všetky bity, ktoré prúdi v celom vzduchu pre tento vzorku, potom môžete povedať, že ten chlap je PHPSESSID sa stane, že bo8dal a tak ďalej. A potom znova, ak ste dostatočne technicky zdatných, alebo majú ten správny nástroj, potom môžete len prekonfigurovať svoj prehliadač, kto prezentáciu, aby príručná pečiatka na Facebook.com, a Facebook je len tak predpokladať, že ste ten chlap pretože všetko, čo viem, je, nie je, kto ste, ale že máte tento jedinečný identifikátor. Takže ak budete kradnúť, že jedinečný identifikátor a predložiť ho na webový server, ako vaše vlastné, že sa práve chystá ukázať vám, že osoby noviniek alebo taká osoba tieto správy alebo tropí. 

A ja by som Google teraz, ako aktivovať HTTPS pre Facebook možná. Ale je to naozaj tak jednoduché. A tak Facebook a Google a podobné dostali naozaj dobrý na to, ale dávať pozor o to viac pre všetky webové stránky, ktoré navštívite, ktoré nepoužívajú protokol HTTP a mať nejakú citlivých informácií o nich, či už je to finančné alebo osobné alebo podobne. Ak sa nie ste použitie tohto nástroja môžete dosť možno cookie páči to byť veľmi ľahko ukradnutá a potom sa prepracovali, a to je presne to, čo Firesheep urobil. Nemusel si byť programátor. Všetko, čo musel urobiť, bolo sa pripojenie k internetu, stiahnuť bezplatný nástroj, a čo to urobí, je prihlásenie sa a potom by to ukážem Facebook názvy zo dňa všetci Sanders, v tomto konkrétnom demonštrácie, okolo vás a všetko, čo musel urobiť, bolo kliknite na meno a softvér automatizovaný proces z šnupanie, že cookie a predložila ju Facebooku ako svoje vlastné, a voila, ste prihlásený Tak toto je ďalší z tých "nerob to" oficiálne. Ak máte vlastnú domácu sieť a chcete pohrať, všetkými prostriedkami, ale uvedomte si, to robí cez čiaru na univerzitnom prostredí. 

Ale cieľom je tu naozaj zdôrazniť to, ako to urobiť ale ako sa brániť proti týmto druhom vecí. A triviálne riešenie tu, aj keď to samo o sebe je chybný, je naozaj znížiť používanie iných stránok, ktoré nie sú pomocou HTTPS neustále. Takže lokalít, ako je Facebook a Google majú stále políčka kde sa môžete prihlásiť do takéto veci, a mali banky rokov sa o to z podobných dôvodov. Takže len tak trochu strach faktorom, ak môžeme. Ale to je to v kocke. To je, ako server, pamätá, kto ste. A akonáhle si spomenúť, kto ste, môžete si spomenúť na niečo o vás že programátor má uložené vo vnútri tohto osobitného superglobal názvom $ _SESSION. A pre PSet 7 sme používať triviálne len pamätať si int, totiž jedinečné ID užívateľa, ktorý sa prihlásil, takže vieme, že som tam bol predtým. Akékoľvek otázky potom na zasadnutí alebo sušienky alebo ako? Firesheep nefunguje tak dobre už, a vy budete musieť dať počítač do osobitného promiskuitním režimu takže ste vlastne počúvate za prevádzku vedľa seba. Takže ak ste v súčasnej dobe sťahovania Firesheep, uvedomiť, že to nie je zas až tak jednoduché ako to kedysi bolo dokázať. Dobrá. A nerobia to v Sandersa. To urobiť doma. Databáza. Jedna z vecí, ktoré sme urobili v PSet 7 veľmi uvážene bola by sme vám ukážkovú databázu tabuľku pre užívateľa, ktorý má niektoré užívateľské ID, Niektoré používateľské mená, a niektoré zašifrované heslá v ňom. A ako uvidíte, ak ste tak už neurobili, budete musieť zmeniť v tabuľke trochu. Budeš musieť pridať nejaké cache každého užívateľa v tejto tabuľke, a budete musieť pridať ďalšie tabuľky histórie, portfólia stôl, alebo snáď hovoriť niečo iné. Ale pokiaľ ide o premýšľanie o tom, ako to urobiť, poďme otvoriť tento nástroj ktoré sme použili v piatok, ale ak neznáme, prístroj je dodávaný s nástrojom tzv phpMyAdmin, ktorý je zhodou okolností napísaný v PHP, ale jeho účel v živote, čo som sa prihlásiť tu jharvard s karmínovej, je mi užívateľsky prívetivý spôsob prezerania a zmeniť svoj databáze. 

Databáza, ktorá Bežím na zariadenie sa nazýva MySQL. To je veľmi populárny, a to je slobodný open source databázy, ktorá je nádherne jednoduché použitie, najmä s predným končí takto. Čo tento nástroj umožňuje, aby som to urobil, napríklad, je poke okolo stola. Nechaj ma ísť ďalej a robiť to. V piatok sme vytvorili tabuľku s názvom Študenti, ktorí bolo super jednoduchý. Mal 3 stĺpce - id, meno, e-maily a - a ja ručne vložil pár riadkov ako David a Mike v tomto konkrétnom prípade. Poďme si to trochu ďalej, a predpokladajme, že chceme pamätať viac než len meno a e-mail o užívateľovi. Dovoľte mi, aby som kliknite štruktúra tu hore. A opäť, Pset vás prevedie potrebnými krokmi tu, takže sa nemusíte obávať, ak niečo z toho je trochu rýchle. Potom budem kliknite na tu. Chystám sa pridať nejaké počet stĺpcov po e-mailu pretože chcem pridať niečo ako dom. Zabudol som nahrávať študenta domu. Dovoľte mi, aby som kliknite na tlačidlo Prejsť, a teraz máme tento formulár, ktorý bohužiaľ je trochu zoširoka zľava doprava, ale budem volať názov tohto poľa domu, a potom typu I teraz vybrať. Takže poďme sa stručne prehovoriť o rôznych typoch v MySQL pretože vzhľadom k tomu, PHP je slabo typovanie a tak nejako hrá veľmi jednoduché a voľné s typmi, v databáze, najmä, že je to super dôležité, aby skutočne používať písanie vo svoj prospech pretože jedna z vecí, MySQL a ďalšie databázy motorov môže urobiť pre vás je zabezpečiť, aby nechcete dať falošné údaje do databázy. To je akási voľná kontroly chýb k dispozícii. 

Pre domu sme samozrejme nechceme, aby to bolo int, čo je 32-bitová hodnota v MySQL. Urobili sme krátko pohovoril v piatok o varchar, čo je skratka pre premenlivou dĺžkou char. Čo je to? To vám umožní určiť, že chcete to byť reťazec nejakého druhu. Nemáte naozaj vedeli vopred, ako dlho to je, takže budeme ľubovoľne povedať, dom Názov môže mať 255 znakov, ale mohli ste ísť s 32, 64 - ľubovoľný počet skutočne. Ale výhodou použitia varchar cez pole s názvom char je to, čo? Len intuitívne, keď prejdite sem, zistíte, že je to char a tam je varchar. Varchar je premenná dĺžka char; char je pevnej dĺžky char. Takže len na základe tejto definície, čo je výhoda alebo nevýhoda každej z nich? Inými slovami, kto sa zaujíma o rozlišovanie, alebo prečo by vám záleží? 

Jo. [Študent] VARCHAR má väčšiu flexibilitu, ale zaberie viac pamäte. Dobré. Varchar zaberá viac - Poďme sa pozrieť,. Nie som si istý, či som počul toto právo. Môžete povedať, že ešte raz? [Študent] Povedal som varchar má pravdepodobne väčšiu flexibilitu, ale zaberie viac pamäte. Zaujímavé. Dobre. Varchar pravdepodobne vám dáva väčšiu flexibilitu, ale zaberie viac pamäte. Ten nemusí byť nevyhnutne pravda. Záleží na kontexte, ale poďme sa vrátiť k tomu. 

[Nepočuteľné Študent odpoveď] Presne tak. Je to vlastne prípad, že char bude zvyčajne využívajú viac pamäte pretože char, rovnako ako v C, je ako reťazec, je to pole znakov. Takže ak poviete char pole dĺžky 255, Databáza je doslova bude vám 255 znakov. A ak dom skončí byť Mather a 6 znakov celkom, strácate nad 200 znakov. 

Takže varchar efektívne používa iba toľko znakov, ako je nevyhnutné až do maximálnej čiastky. Ale cena, ktorú zaplatíte, je skutočne výkon, potenciálne. Ak vopred viete, že všetky vaše reťazcov sa bude 8 znakov - Napríklad predpokladajme, že budete potrebovať hesla dĺžky 8 - hore použitie char pole na príležitosti, aj keď nie často, je stanoviť pevnú dĺžku niečo ako heslo pretože teraz databázy môže byť ešte múdrejší. Ak sa vie, že každý char pole, každý reťazec v stĺpci je rovnakej dĺžky, dostanete späť funkciu náhodného prístupu. Môžete skákať okolo medzi rôznymi znakovými oblastiach v databázovej tabuľke pretože si v databáze ako riadkoch a stĺpcoch. Takže ak každý z reťazcov je rovnakej dĺžky, viete, že prvý z nich je na bajtu 0, ďalší je na bajtu 8 a potom 16 a potom 24 a tak ďalej. Takže ak sú všetky reťazce sú rovnakej dĺžky, môžete skákať okolo oveľa efektívnejšie. Tak, že môže byť výhodou, pokiaľ ide o výkon, ale obvykle nemáte luxus vie vopred, takže varchar je spôsob, ako ísť. Tu je ďalší detail, že aj Facebook bežal do nakoniec. Ints sú skvelé, a sme trochu používať ich v predvolenom nastavení kedykoľvek chceme číslo, ale je to len 32 bitov. 

A aj keď Facebook nie je úplne mať 4000000000 užívateľov teraz, tam určite niektorí ľudia tam vonku s viacerými účtami alebo účty, ktoré boli otvorené, a potom zavrela, a tak Facebook sám som presvedčený, že pred niekoľkými rokmi musela prechodu z int na, ako je výstižne nazýva, bigint, ktorá je len 64 bitov miesto. Takže aj to je konštrukčná rozhodnutia. Tie by sa úžasne šťastie, keď vaše posledný projekt zmení startup, má 4 miliardy 1 užívatelia, dávať alebo brať, v takom prípade použitia Ints môže byť trochu krátkozraké. Ale v skutočnosti, váš užívatelia tabuľka je pravdepodobne v poriadku s ints. Ale na niečo také PSet 7, ako je vaša tabuľky histórie, môžete mať tisíce, milióny užívateľov, ak sa vyvíjajú do etrade.com. Takže vzhľadom k tomu, možno nemáte viac ako 4 miliardy užívateľov, títo užívatelia máte môže mať viac ako 4 miliardy transakcií v priebehu času - nakupuje a predáva, a veci v ich histórii. Takže ak si predvídať - opäť sa jedná o správnu problémy majú, ak máte to omnoho údaje - ak si predvídať dát presahujúcu veľkosť int, ísť s niečím, ako je bigint je smer nie je dosť často prijatá dizajnérov pretože ľudia postava, ktorá sa nebude problém, ale je to tak jednoduché vybrať niečo väčší, než je. Desatinné sme použili v PSet 7, ktorý stanovuje pevnú presnosť takže sa môžete vyhnúť problémy týkajúce sa plaváky a dvojlôžkových a reals a podobne. 

A potom je tu niekoľko ďalších odborov tu. Budeme mávať rukami na ne do istej miery. Ale dátumy, časy majú predpísaný formát v MySQL, a výhodou ukladanie dát ako dáta a nie varchars Znamená to, že databáza je skutočne preformátovať ich do rôznych formátov, či je formát USA alebo európsky formát alebo ako - však budete chcieť - omnoho efektívnejšie, ako keby to bol len nejaký obyčajný varchar. A potom je tu nejaký iný binárne, varbinary, guličky. Jedná sa o binárne veľké objekty, a môžete tiež ukladať binárne dáta rovnako ako geometrických dát v databáze. Ale pre nás budeme zvyčajne záleží ints a varchars a ako. Poďme dokončiť tento príklad s domom. Dom Budem ľubovoľne povedať bude 255 znakov. Potom predvolená hodnota, ktorú mohol urobiť. Mohli by sme v predvolenom nastavení aby všetci v Mather dome, napríklad. To je, ako môžeme určiť, že databáza by mali zabezpečiť, že niekto má vždy hodnotu. Ale nechám to byť. V skutočnosti, pre ľudí, ktorí žijú mimo kampus, a nie v dome, možno som vlastne chcete určiť, že východisková hodnota pre dom je NULL, a potom som potrebné zaškrtnúť a povedzte databázy je to v poriadku, ak užívateľ dom je NULL. 

Aj v tomto prípade je ďalší obranný mechanizmus môžete zaviesť takže ani nemusíte dať ju do svojho PHP kódu nutne. Databáza bude zabezpečené, že veci sú, alebo nie sú NULL. A potom konečne, Atribúty. Žiadny z nich sú naozaj dôležité. Binárne, nesignováno - žiadna z nich sú relevantné pre varchar. Index. Vie niekto, alebo si pamätať, alebo majú hádať o tom, čo index niečo ako dom? Aj to je vlastne dôležité a pomerne ľahko konštrukčné rozhodnutia. Pre tých, ktorí ešte nevideli, v piatok sme hovorili krátko o primárnych kľúčov. V databázovej tabuľky, primárny kľúč je pole alebo stĺpce , Ktorý jednoznačne identifikuje riadkov v tabuľke. Takže v aktuálnej tabuľke máme ID, máme mená a e-maily. Ktorý z nich je najlepším kandidátom byť primárny kľúč, ktorého úlohou je jednoznačne identifikovať riadky? Pravdepodobne ID. Pravdepodobne by sme mohli použiť aj to, čo ak? Možno by si mohol použiť e-mail, pretože v teórii, že je to jedinečná ak ľudia zdieľajú e-mailových účtov. Skutočnosť je však taká, že ak používate číselné ID, ako 1234, to je len 32 bitov, zatiaľ čo e-mailová adresa môže byť tento mnoho bytov alebo tento mnoho bytov. Takže pokiaľ ide o účinnosť jednoznačných identifikačných kódov, to býva dobrým zvykom stačí použiť int aj keď máte nejaký reťazec kandidáta, ktorý by ste mohli pravdepodobne používať. 

Pre niečo ako dom, nemalo by to byť primárny kľúč pretože potom len 1 osoba mohla žiť v Mather a 1 osoba v Currier a podobne. Rovnako by to nemalo byť jedinečné. Rozdiel medzi primárnou a unikátny je, že v prípade, že si aktuálne tabuľky ID by byť primárne, ale e-mail nie je primárne z dôvodu sme práve spomenul - výkon - ale to by malo byť stále jedinečný. Takže môžete stále vynútiť jedinečnosť, bez toho by nárok že je to super dôležité primárne pole. Ale toto je celkom užitočné: Index. Ak viete vopred za Vašu záverečného projektu, pre PSet 7, alebo všeobecne, že toto pole dom sa bude niečo, čo hľadať na pozemku pomocou select kľúčového slova, alebo niečo iné, potom môžete preventívne povedať databázy do práce svoje kúzlo a uistite sa, že vytvorí v pamäti žiadne efektné dátové štruktúry nevyhnutné urýchlenie vyhľadávanie založené na dome. Možno to bude používať hash tabuľku, možno to bude používať prepojeného zoznamu. V skutočnosti, to inklinuje používať strom, často štruktúra sa nazýva B-strom - nie je binárne strom, ale B-strom - čo je veľmi široký strom ktoré ste mohli vidieť v triede, ako CS124, dátové štruktúry triedy. Ale v krátkej, nemusíte sa báť, že pri použití inteligentný databázového softvéru. Stačí si len povedať to, "Index toto pole, takže môžem vyhľadávať na neho efektívnejšie." 

Ak necháte toto vypnete a pokúsite sa hľadať pre každého v databáze, ktorá žije v Mather, bude prešla do lineárnej hľadanie. A ak máš 6000 undergrads všetky žijúce v nejakom dome, budete prehľadávať celú tabuľku nájsť Matherites, vzhľadom k tomu, keď poviete Index, dúfajme, že to bude niečo podobné na logaritmickej vyhľadávania nájsť tie druhy študentov. To je len funkcionalita zadarmo zapnúť, aj keď to príde za cenu nejakého množstvo priestoru. Konečne, auto-increment, toto pole AI, ktorý len znamená, že ak je to int, a nechcete sa starať, aby zvýšiť sami zakaždým, keď je nový užívateľ, skontrolujte, či, a každý užívateľ, ktorý sa vkladá automaticky získa nové ID. Poďme kliknite na tlačidlo Uložiť, a teraz poďme nájsť chybu s týmto dizajnom. Ak by som ísť do Prehľadávať, upozornenie, že ako Mike a môj dom je NULL. Môžem použiť phpMyAdmin editovať ručne. Môžem ísť sem a zadajte Mather a stlačte Enter, a teraz všimnete tabuľky sa líšia. Ale nevšimol som mohol robiť niečo iné rovnako. Davidova ID je 1, takže phpMyAdmin je opäť len administratívne nástroj; to nie je niečo, čo vaši užívatelia vôbec bude vidieť. Takže keď som namiesto toho kliknite na karte SQL up hornej - a znova, bude Pset 7 predstaví vám viac z týchto otázok - Môžem ručne spustiť SQL Structured Query Language príkaz UPDATE užívatelia SET dom = 'PfoHo' WHERE id = 1. Tieto SQL dotazy sú pekne dosť, dosť čitateľné zľava doprava. Aktualizácia tabuľky užívateľov, nastavte pole s názvom dom PfoHo kde ID užívateľa je 1. Alebo by som mohol urobiť aj kde email = 'malan@harvard.edu'. Tak dlho, ako ktorý jednoznačne identifikuje ma, to by mohlo fungovať rovnako. Ale ID inklinuje byť vyšší výkon, tak sa poďme urobiť. Poďme kliknite na tlačidlo Prejsť. Dobre, lecture.users neexistuje. Aký je môj chyba? Čo je to vlastne tabuľka tu nazývajú? Hovorí sa študenti len preto, že je to to, čo sme urobili tu vľavo hore. Hovorí sa tomu študenti, nie užívateľov. Takže kliknite na tlačidlo Prejsť teraz. 1 riadok ovplyvnené. Otázka trvalo 0.01 sekúnd. Keby som kliknite na tlačidlo Prehľadávať teraz, teraz Malan žije v PfoHo. Takže to je ďalší chuť SQL, ale Pset vás prevedie trochu viac. 

Tam je hlúpa rozhodnutie, ktoré som už robil tu. Povedal by som, že táto databáza dizajn je neefektívne pretože čím viac ľudí, ktoré som pridať do tabuľky Študenti, viac z nás začnem pridávať, viac TFS som začať pridávať, budeme začať vidieť, čo prepúšťanie v tejto tabuľke? 

Jo. [Študent] Keď videl, že je to u študentov, sme použili rovnaký [nepočuteľné] Rovnaký - Right, presne. Takže ak 400 ľudí žije v Mather, dávať alebo brať, nakoniec táto tabuľka bude mať 400 riadky, ktoré hovoria, že "Mather," "Mather," "Mather," "Mather," "Mather." Strácame všetkých týchto bytov, a je tu pár takeaways tam. 1, je tu šialený kútik prípad, kedy ak niekto zaplatí veľa peňazí a premenuje Mather, teraz musíme zmeniť celý náš databázovej tabuľky. To sa to nestane často, hoci PfoHo bolo raz nazvané North dom pred 15 rokmi, tak sa to stane. Ale to nie je všetko, že presvedčivé. Presvedčivejšie než rohovú prípade, ako je to potrebujú aktualizovať dáta vo veľkom pre databázu je dôvod, prečo ste skladovanie Mather znova a znova a znova a znova? To je veľa znakov, 6 znakov. Nemôžeme robiť ešte lepšie, než to, že najmä pre Pforzheimer? Iste môžeme robiť lepšie, než že mnoho znakov. Prečo nie len priradiť jedinečný identifikátor s každým domom a obchod, ktorý pre každého užívateľa? Tak poďme to skúsiť. Skôr než len používať študenti tabuľku, nechajte ma ísť do mojej prednášky databáze tu vľavo hore. Všimnite si, že hovorí, že vytvoriť tabuľku. Dovoľte mi, aby som vytvoriť novú tabuľku s názvom domov. Počet stĺpcov bude 2. Enter. Teraz mám 2 polia. Idem volať toto meno, a to bude varchar dĺžky 255, 

ale to je docela svojvoľné. Dovoľte mi, aby som to tu konvencií. Takže dať ID sem. Dajme každý dom jedinečný identifikátor. Dajme každého domu meno. Poďme upresniť, že identifikátor bude unsigned len podľa konvencie používať iba kladné čísla. Poďme ďalej a dať to auto-inkrementace pole pre teraz. A my potrebujeme niečo iné? Poďme ďalej a kliknite na tlačidlo Uložiť. Teraz mám druhú tabuľku. Všimnite si, ako je stranou to je trochu záhadnej SQL príkaz že by ste museli zadať ručne, pokiaľ nepoužívate, nástroje pre správu, ako je phpMyAdmin. Takže ďalší dôvod, prečo je užívame. Je to nádherne užitočné druh pedagogicky, pretože môžete kliknúť okolo a zistiť, ako veci fungujú, len o kopírovanie a vkladanie, čo phpMyAdmin urobil. Ale tabuľka Vytvoriť príkaz je to, čo sa práve vykonaný, a tu je môj stôl. Nechaj ma ísť napred sa a využívajte surové SQL, skôr ako zjednodušovať kliknutím na kartu Vložiť. Dovoľte mi, aby som sa INSERT INTO domov, a ja poviem meno domu bude mať hodnotu "Mather". To je všetko. Táto syntax je trochu záhadný. To je názov poľa, ktoré chceme vložiť. Sú to hodnoty, ktoré chcete vložiť do týchto polí. Dovoľte mi, aby som kliknite na tlačidlo Prejsť. 1 vkladá riadok trvalo 0.02 sekúnd. Dovoľte mi, aby som na tlačidlo Prehľadávať teraz. 

Všimnite si, keď som kliknite na tlačidlo Prehľadávať, tam je Mather, ktorého ID je prostredníctvom automatizácie číslo 1. Dovoľte mi, aby som to ešte jednu. Nechaj ma ísť do záložke SQL. INSERT INTO domov. Názov domu bude mať hodnotu PfoHo a tak ďalej. Prejsť. A môžem to robiť znova a znova a znova. Alebo ak ste nudiť pomocou phpMyAdmin, stačí použiť kartu Vložiť a nebudú sa musieť zadať surového SQL. Stačí si len buchnúť to rýchlejšie na písacom stroji, napríklad, Currier, Enter, a teraz, keď sme kliknite na tlačidlo Prehľadávať, tam je Currier s ID 3 rokov. Tak toto je to, čo máme na mysli auto-prírastku. Ale teraz musíme niečo spraviť u študentov. V študenti, čo by dátový typ domu poľa teraz? Malo by byť int, nie? Takže cieľom je vytknúť, inak známy ako normalizovať, tabuľky takže nemáme ukladať informácie redundantne v niektorom z mojich tabuliek. A opäť, cesta my sme boli na tú sa povedať Mather, Mather, Mather, Mather, PfoHo, PfoHo, PfoHo, PfoHo, čo je veľmi nadbytočná pokiaľ ide o plytvanie z znakov. Tak nechaj ma ísť napred a zmeniť tým, že kliknutím štruktúry, a nechaj ma ísť napred a zaškrtnúť dom pole, kliknite na tlačidlo Zmeniť, a teraz budem meniť to byť int. 255 už nie je relevantná. Nechaj ma ísť ďalej a povedať, že je to v poriadku, ak je to ešte NULL. Uložiť. Teraz tabuľka študenti bola zmenená úspešne, a všimnite si, opäť dom je int. Ako stranou, ignorovať číslo v zátvorkách, pokiaľ ide o ints. 

To je pre staršie dôvodov. Späť v deň, kedy ste nemali GUI, môžete namiesto toho musel príkazového riadku prostredie, na 10 a 11 uvedené koľko znakov ste mal ukázať v terminálovom okne skutočne zobraziť pole. To nemá nič spoločné s bitovou dĺžkou skutočného poľa, takže jednoducho budeme ignorovať, že pre túto chvíľu. Teraz musím ísť do tejto tabuľky. A ak David žije v Mather, by snemovňa nemala byť 0, ktorá je predvolená int hodnota najbližšie NULL. Mal by žiť v dome 1. Povedzme ľubovoľne povedať, že Mike žije v PfoHo, takže dom číslo 2. Teraz môj stôl vyzerá trochu záhadný. Ale zvážiť efektivitu. Ja som teraz s použitím iba 32 bitov na identifikáciu dom, čo znamená, že je len 1 kanonické definícia môjho domu Mather a PfoHo a to v domoch tabuľke. Takže ak chcem teraz vrátiť tieto tabuľky, myslím, že to týmto spôsobom. Tu mám študenti stôl, a na pravej strane je tu tieto čísla, 1 a 2. 1 je Mather, 2 je PfoHo. Máme tie rovnaké čísla v tejto druhej tabuľke, ktorá sa nazýva domov, 1 a 2, a 3 pre tie 3 domy. Čo teraz chceme urobiť, je mať možnosť v kóde, PHP a SQL, sa trochu vrátiť tieto tabuľky, kde ak sú študenti, a to sú domy, chceme nejako skombinovať tak, že 1 línie s 1, 2 riadky s 2, a tak, aby sme mohli zistiť, kde David a kde Mike a kde všetci ostatní bývajú. Ak chcete to môžeme spustiť SQL dotaz podobný nasledujúcemu. SELECT * FROM študenti JOIN domy ON - A teraz, čo pole chceme pripojiť na? Takže students.house = houses.id. 

Trochu záhadné, ale táto časť znamená doslova vytvoriť novú dočasnú tabuľku to je výsledok spojenie študentov a domy. A ako sa chcete spojiť špičky mojich prstov tu? Nastaviť študentov dom poľa rovno domov "číslo poľa. A keď som teraz kliknite na tlačidlo Prejsť, vrátim presne to, čo som dúfal, že sa. David je v Mather, Mike je v PfoHo, a vidím aj jedinečné identifikátory. Ale ide o to, teraz mám kompletnú tabuľku. A tak takeaway tu pre PSet 7 alebo naozaj pre konečného projektu: Ak zistíte, že ste ukladanie každý kus informácie redundantne, či už je to dom, možno je to mesto, štát, a ZIP kde ZIP zvyčajne, ale nie vždy byť použitý ako jednoznačný identifikátor, idú cez cvičenia mentálne a potom s niečím, ako je phpMyAdmin faktoringu, že spoločné dáta, pretože najmä ako vaše webové stránky dostane viac dobre použiť a viac populárne, je to, ako sa uistiť, že je všetko v super rýchly, tým, že databáza toľko rád ako na jedinečnosť ako je to možné. To bolo veľa. Nejaké otázky? Dobrá. Poďme sa 5-minút prestávku tam a preskupiť. Dobrá. Nasleduje príklad, ktorý bol použitý pred niekoľkými rokmi, keď som sa CS161, ktorý je operačné systémy triedy na koľaji ktorý je známy pre bytia úžasné, ale šialený množstvo práce, a zameriava sa naozaj na niektoré low-level problémy, ktoré vznikajú v operačných systémoch a tiež aj na svete databáz. 

Príbeh, ktorý bol povedal môj profesor, Margo Seltzer, že rok bol takto. Predpokladajme, že máte malý fakultných chladnička pre vás a vaše spolubývajúci a obaja vás naozaj rád mlieko. Takže si prišiel domov z triedy jeden deň, váš spolubývajúci ešte nie je tam, otvoríte chladničku, a vy si uvedomíte, "Oh sakra, sme z mlieka." Takže zatvorte chladničku, idete cez ulicu k CVS a dostať do stále dlhé fronty na nákup nejaké mlieko v CVS. Medzitým, váš spolubývajúci príde domov zo svojej triedy, prichádza do miestnosti, otvorí chladničky naozaj chcú trochu mlieka, otvorí chladničku a, "Sakra, bez mlieka." Tak on alebo ona sa zatvorí chladničku, vyjde z dverí, a ide do ABP alebo niekde inde, ako CVS, kde si nebudete naraziť do seba ísť trochu mlieka. Samozrejme o niekoľko minút neskôr, a to ako z vás dostať späť domov a teraz máte dvakrát toľko mlieka, ako ste vlastne chceli. A je mlieko, teraz to pôjde zle, pretože sa vám páči mlieko ale nemám rád mlieko, takže teraz máte príliš veľa mlieka, takže to bude ochladzovať. To je hrozný, hrozný stav. Čo by mohlo vyriešiť túto ťažkej situácii, ak ste boli prvý spolubývajúci doma? Áno. [Študent] Mal si nechal odkaz. [Smiech] Dobré. Mal si nechal odkaz. Mal ste dať Post-it poznámku alebo ako hovoriť, "Gone mlieka," a potom sa váš spolubývajúci koncepčne by bol uzamknutý skutočne robiť to. Alebo môžete ísť 1 krok ďalej. Dalo by sa doslova zamknúť chladničku s nejakým visiaci zámok, a teraz váš spolubývajúci bude doslova pod zámkom z chladničky. Ak by sme zovšeobecniť späť do programovania, môžete takmer myslieť na chladničku ako nejakú premennú alebo struct, nejaký druh nádoby pre informáciu. Problém zásadne tu je, že obaja z vás bolo umožnené nahliadnuť do alebo čítať stav tohto dátové štruktúry, ale považoval to v rôznych časoch, a napriek tomu obaja ste sa rozhodli v závislosti na stave sveta v týchto rôznych okamihoch v čase. Takže keby ste zamkli chladničku, by ste aspoň zabrániť svoje spolubývajúci od mať been schopní skontrolovať stav sveta, tak on alebo ona nemohla z toho istého rozhodnutia. Takže databáz, ako sa ukázalo, majú tento problém neustále. 

Poďme sa pozrieť, či sa nám podarí postaviť scenár. Predpokladajme, že ste niečo ako zlý človek, a idete do Bank of America alebo jeden z ďalších miest na námestí, ktoré majú pár bankomatov bok po boku, a nejako ste prišiel na to, ako duplikovať ATM kartu - nie je všetko tak ťažké. Je to len magnetický prúžok. A tak to, čo chcete, aby sa pokúsili urobiť, je hrať túto hru pričom dáte 1 kartu do 1 stroja, ďalšiu kartu do iného zariadenia, a vy v podstate chcete skúsiť vybrať peniaze naraz, pretože si predstaviť, že príbeh je takto. Stroj na ľavej strane má svoj kartu a PIN, a potom povedal: "Daj mi 100 dolárov." ATM je naprogramovaný tak, aby najprv urobiť select vo svojej databáze alebo ekvivalent - bez ohľadu na databázy je to s použitím - pre zobrazenie to mať používateľ aspoň $ 100 v jeho účtu? Ak áno, potom vypľujte $ 100 a odpočítame 100 dolárov z ich bilancií. Ale samozrejme, ak je viac strojov tu alebo viacerými spôsobmi kontroly stav tohto sveta, bánk vault, vidieť, koľko peňazí máte, Predpokladám, že len náhodou stroj na ľavej a pravej ako položiť túto otázku približne v rovnakom okamihu. 

A to určite stáť. Bankomaty sú počítače v týchto dňoch. Takže ak stroj na ľavej strane hovorí: "Áno, máte aspoň 100 dolárov," Medzitým stroj na pravej strane hovorí: "Áno, máte aspoň 100 dolárov," potom obaja pristúpiť k dokončeniu svoje programy a vlastne vypľúvať 100 dolárov a hovoria, "Predtým ste museli 200 dolárov." "Dovoľte mi, aby som aktualizovať premennú teraz 100 dolárov vľavo na účte." Ale ak obaja majú kontrolovať zostatok na účte a zistil, že je to 200 dolárov a obaja potom si to spočítajte a povedať 200-100, stroje majú potenciálne vypľuť na dve $ 100 účty v každom stroji, ale už len aktualizovali sumu zostatok na účte je 100 dolárov. Inými slovami, ste vyradené $ 200, ale pretože kontrolované na stav sveta súčasne a potom sa rozhodli na základe tejto hodnoty, oni by nemohli robiť matematiku nakoniec správne. Takže v bankovom situácii príliš si naozaj chcete mať nejaký blokovanie tak, že akonáhle ste skontrolovali stav niektoré premenné že je naozaj dôležité, rovnako ako zostatok účtu, nedovoľte, aby niekto iný rozhodovať sa na základe, že až budete hotoví, robí svoju vec, kde v tomto prípade sú ATM na ľavej strane. Lock všetci ostatní von. Môžete si skutočne dosiahnuť tohto efektu v niekoľkými rôznymi spôsobmi. 

Najjednoduchší spôsob, ako v MySQL je rad SQL, ktoré sme vám dali v problému nastavenej špecifikáciu, ktorá vyzerá presne takto. Vložiť do tabuľky - ako sa to volá - id, symbol, a podiel, počet akcií, nasledujúce hodnoty, napríklad. Ak ste nečítali spec ešte, je to príklad na to, ako sa vám ísť o nákup 10 akcií tohto Penny doručenie prezidenta Skroob, ktorého ID užívateľa sa stane, že číslo 7? To hovorí, že INSERT INTO tabuľka nasledujúce id, symbol, a počet akcií 7., "DVN.V", a 10. Ale - ale, ale, ale - druhý riadok je dôležitý. ON duplicitné kľúč UPDATE akcií = akcie + VALUES (akcie). Takže úplne mystická vyzerajúce na prvý pohľad. Ale fakt, že tento dotaz SQL, aj keď sa zalomia na 2 riadky, je 1 dlhý dotaz, to znamená, že je atómová v tom zmysle, že tento dotaz bude buď vykonaný dohromady alebo vôbec nie. A podľa definície MySQL, to je, ako sa vykonáva tento dotaz. To je samozrejme v príručke zaručene vykonať všetky naraz, alebo vôbec nie. Motiváciou pre to je nasledujúce. Ak v tomto prípade sa snaží kúpiť 10 akcií na sklade, je to druh rovnakého príbehu ako mlieko, to je druh rovnakého príbehu ako ATM. 

Ak urobíte chybu, ktorá nie je pomocou tejto syntaxe ale výber z databázy vidieť, koľko akcií tejto penny zásob nemá prezident Skroob majú, a predpokladám, že má 10 akcií, a potom niektoré zlomok sekundy neskôr si potom robiť príkazu UPDATE, čo je ďalší príkaz v SQL, ktorý hovorí, že ísť dopredu a pridať 10 ďalších akcií Do svojej súčasnej 10 tak, aby v ideálnom prípade celková je 20, Problém je, že v dnešných databázových systémov a pretože v dnešných počítačoch máte viac procesorov, viac jadier - Inými slovami, môžu počítače doslova robiť viac vecí naraz - nie je zaručené, že váš SELECT a vaše UPDATE v tomto prípade Budú sa diať chrbtom k sebe. Tak zlý scenár by urobíte SELECT vidieť, koľko akcií tejto populácie penny nemá Skroob majú, a potom už len náhodou sa vykonáva ďalšie databázový dotaz - Možno, že jej Skroob v inom okne prehliadača sa snaží kúpiť 10 akcií v inom okne úplne, podobne ako ATM - a predpokladám, že ďalšie dotaz dostane medzi SELECT a UPDATE. To by mohol byť prípad, že Skroob teraz stráca určitý počet akcií , Pretože iný proces zisťuje stav svojho sveta, alebo sa dostane viac akcií, ako by mal mať. Nebudeme zachádzať do podrobností, čo presne tieto konkrétne dejovej línie by byť, ale ide o to, ak máte ku kontrole premenné hodnoty a potom urobiť rozhodnutie, v prípade, že je riziko, niekto iný niečo medzi týmito 2 vyhlásenie, ako je tomu v systémoch s viacerými procesormi, v viacjadrových systémov, počítače s možnosťou robiť viac vecí naraz, môže zlé veci sa stávajú ako bankové účty boli odpísané nesprávne, nákup dvakrát toľko mlieka, alebo v tomto prípade zlý počet podielov. Ale je tu jednoduchší spôsob, ako premýšľať o tom. 

Ukazuje sa, že SQL podporuje tiež, ak si nastaviť tabuľku správne, niečo ako transakcie, ktoré by som si dovolil tvrdiť, je vlastne ešte zrozumiteľnejšie ako to, ale nie je to 1-liner, takže je to vlastne trochu viac zapojiť. Tam je doslova vyhlásenie v SQL názvom START TRANSACTION. Rovnako ako tam SELECT, UPDATE, INSERT, DELETE, a JOIN a veľa ďalších, tam sú kľúčové slová ako START TRANSAKCIE. A čo potom robiť v rámci PSet 7 - nemusíte urobiť pre PSet 7, je to výslovne poprel ako nie je nutné, ale pre konečné projektov to môže byť užitočné - Ak zavoláte dotaz na START transakcie a potom ďalšie dotaz a potom ďalší dotaz a potom ďalšie, ďalšie a ďalšie, tieto otázky nebude v skutočnosti byť vykonaná, kým nezavoláte SQL príkaz COMMIT, na ktorom mieste, či už je to 2 vyhlásenie alebo 20 vyhlásenie, budú všetci byť vykonané naraz, čo znamená, že nikto iný nemôže náhodne kúpiť príliš veľa mlieka alebo debetnej príliš veľa peňazí alebo kúpiť príliš veľa akcií, pretože všetky vaše otázky bude vykonávať chrbtom k sebe k sebe dozadu. A to je super dôležité, zvlášť keď robíte niečo také. Toto je ľubovoľný príklad, ktorý hovorí, že poďme aktualizovať bankový účet nastavením vyváženia rovnajúcu sa zostatku - 1000 dolárov, kde číslo účtu je 2. A potom druhý príkaz je teraz poďme vklad, že 1000 dolárov do niekoho iného bankový účet, ktorého číslo účtu je 1. 

Inými slovami, je to dokonalý príklad, kde chcete, aby sa ubezpečil že obe tieto vyhlásenia stane, alebo vôbec nie pretože inak zákazník sa chystá priskrutkovaním a budete mať svoje peniaze a neuloží ju inde, alebo banka sa chystá priskrutkovať kam sa chystáte uložiť peniaze ale v skutočnosti odpočítame z účtu užívateľa. Takže chcete obaja vykonať spoločne. Tak vstupuje do sveta transakcií. Tak to je niečo, čo mať na zadnej časti svojej mysle, ani nie tak pre účely len konečný projekt, ale ak chcete, aby vaše konečné projekt niekam, ak chcete spustiť nejakú spoločnosť okolo neho, Ak chcete vyriešiť nejakom študentskom skupiny problém na akademickej pôde a skutočne živé, aktívne webové stránky, sú druh jemné chýb, ktoré môžu vzniknúť ak nemáte dosť premýšľať, čo sa môže stať, ak 2 ľudia sa snažia získať prístup k internetovej stránky na adrese doslova v rovnakom okamihu v čase, pričom by ich otázky inak si prelína. 

Pripravené pre niektoré JavaScript, ukážku ich? Toto je naša posledná jazyk pre semestra. Dobrá. Našťastie, JavaScript vyzerá veľmi, veľmi, veľmi podobný 2 jazykov, C a PHP, sme urobili tak ďaleko. Nie je JavaScript vo PSet 7, ale je to veľmi užitočný nástroj pokiaľ ide robiť webové záverečných prác, alebo naozaj len webové programovanie všeobecne. Tak rýchly prehľad niečím, čo nazývajú DOM. Tu je super jednoduchý webovej stránky, ktorá naozaj len hovorí ahoj, svet a to ako v názve, a v tele. Vzhľadom k tomu, odsadenie bolo naznačuje nejakú dobu, tam je naozaj hierarchia na webové stránky. Mohol by som nakresliť rovnaký fragment HTML ako strom, spomínal na naše diskusie o dátových štruktúr v C, takto. Mám nejaké špeciálne koreňový uzol uzol dokumentu, a uvidíme, na analógový tohto v JavaScripte za chvíľu. Prvé dieťa a jediné dieťa, ktoré je v tomto prípade HTML tag. Tam je žiadny priamy mapovanie DOCTYPE. To je zvláštna vec, a tak sme mali jednoducho ignorovať, pokiaľ ide o túto DOM, Tento Document Object Model stromu. Všimnite si, že tag HTML, ktoré som líčil svojvoľne ako obdĺžnik, má 2 deti: hlava a telo. 

Tie sú podobne kreslený ako obdĺžniky. Je zmysluplné obrazovo, že hlava je na ľavej strane tela. Dôsledkom je, že hlava je na prvom mieste vo stromu. Takže je to vlastne objednanie do stromu pri kreslení to takto, aj keď tvary a ktovie čo ešte sú ľubovoľné. Vedúci medzitým má jedno dieťa s názvom názov, a názov vlastne má jeho vlastné dieťa, ktoré je "hello, world", ktoré som zámerne kreslil ako ovál tu, aby to trochu odlišné od obdĺžnika. Tieto obdĺžniky sú prvky, vzhľadom k tomu, ahoj, svet je naozaj textový uzol. Takže je to uzol v strome, ale je to iný typ uzla tak som vytiahol ho ľubovoľne inak. Podobne sa telo mať dieťa s názvom hello, world i, tak odlišný uzol, aj keď sú zhodou okolností rovnaký text, ale ja som vypracovaná to pomocou rovnakého tvaru. Takže koho to zaujíma? No, čo je pekné o HTML, je, že nemá túto hierarchickú povahu. A čo je pekné o JavaScriptu a najmä knižníc, ktoré sú voľne k dispozícii a populárny ako jQuery, môžete prechádzať stromovú štruktúru tak úžasne jednoduché. Každá z vecí sme robili v C s ukazovateľmi a posuvu stromy a recursing na uzloch vľavo dieťa pravej dieťa, zrazu môžeme nejako brať za samozrejmosť ako úžasne poučné, ak nie trochu frustrujúce ale zďaleka nie efektívny spôsob, ako ísť o programovaní. A tak s týmito jazykoch vyššej úrovne, ako je JavaScript budeme môcť prejsť tento strom oveľa viac intuitívne. 

A skutočne syntaxe bude celkom povedome. Ak ste nikdy nevideli JavaScript predtým, je to naozaj pekný odkaz od Mozilly ľudí, že ľudia, ktorí, aby Firefox, takže sa pokojne prechádzať, že na vaše pohodlie. Čo nájdete - a tieto snímky sú totožné s tým, čo sme druhý deň - podobne, je preč hlavné. Takže keď napíšete program v JavaScripte, nie je hlavné funkcie. Stačí začať písať kód. Ale kľúčový rozdiel medzi JavaScript a C a PHP je to, že vzhľadom k tomu, C a PHP doteraz boli vykonané na strane servera spotrebičom v tomto prípade, alebo všeobecnejšie servera, JavaScript zámerné je zvyčajne vykonáva pomocou prehliadača. Inými slovami, môžete si napísať kód JavaScriptu, pretože sa chystáme, na serveri v zariadení, ale ho zahrnúť medzi HTML, medzi vaše CSS, medzi svojimi GIF a PNG vaše a vašich obrázkov vo formáte JPEG tak, že keď užívateľ navštívi webovú stránku, ak používate JavaScript, že kód JavaScript pochádza zo servera do prehliadača, a to je prehliadač, ktorý skutočne spustí ho. Takže to má dôsledky pre zmysluplné aj duševného vlastníctva. Je to trochu hlúpe dokonca premýšľať o tom, chráni vaše IP, pokiaľ ide o kód JavaScript pretože podľa povahy jazyka dostane bol vykonaný zvyčajne strane prehliadača. 

Môžete popliesť to, čo znamená, že môže to vyzerať blázon a škaredý bez medzery, hrozné názvy premenných, aby bolo ťažšie pre ľudí ukradnúť vaše IP, ale kľúčové je to, že sa vykonáva strane prehliadača. Aj keď ako stranou JavaScript možno použiť strane servera, najčastejší prípad použitia práve teraz je ešte na prehliadači. A tu je to, čo vyzerá. Tu je if-else if-else, rovnako ako C, rovnako ako PHP. Tu je Boolovský výraz, keď ste "alebo" 2 veci dohromady. Tu je, keď sa "a" 2 veci dohromady. Tu je switch, ktorý je podobný PHP v tom, že si môžete prepnúť na rôzne typy hodnôt. Slučky podobne majú pre slučky, ktorá sem sú štruktúrované rovnakým spôsobom s tým, čo sme videli predtým. Kým slučky, sme dostali urobiť while. Premenné, niekedy tak trochu inak. Tie deklarovať premenné, ako to robíte v PHP a C, ale rovnako je JavaScript slabo zadali. Neurčíte int alebo float alebo povrázok alebo niečo podobné, že obvykle. Môžete zadať var. Nemusíte špecifikovať var, ale to má dôsledky, ak nechcete. Zvyčajne, ak vynecháte var, omylom vytvoriť globálnu premennú miesto miestnych. Takže mi dovoľte navrhnúť, aby si takmer vždy len povedať, var a potom názov premennej. Nie je to typ, je to len var pre premennú. To by bol príklad, či už je to 123 alebo "hello, world". Polia sú prítomné a syntakticky podobný PHP. Poviem var čísla a potom som použiť hranaté zátvorky znovu deklarovať premennú ktorého typ je pole, ktoré má tieto konkrétne čísla v ňom oddelené čiarkami. A potom konečne, to je len jeden, že skutočne vyzerá inak. Pripomeňme, že v PHP by sme zaviedli asociatívne pole pre študenta ako Zamyla by mohol vyzerať takto, kde je premenná nazýva študent. Hranaté zátvorky znamenajú, tu je pole. 

Skutočnosť, že nie som pomocou číselných indexov, ale reťazca - id, dom, a meno - Znamená to, že sa jedná o asociatívne pole, a tieto šípky s znakom rovnosti a šikmé konzoly Znamená to, že je kľúč "id", je hodnota 1; Kľúčom k úspechu je "dom", je hodnota Winthrop House; Kľúčom k úspechu je "názov", je hodnota Zamyla Chan. Takže tam je 3 kľúče vo vnútri tohto asociatívneho poľa, z ktorých každý má svoju vlastnú hodnotu. Videli sme, že v PSet 7, alebo čoskoro bude, v JavaScriptu rovnaký nápad, ale bude to vyzerať takto. Tak var študent - no dolára a žiadna zmienka o type ešte, ale var - rovná a potom otvorte zložené zátvorky, pretože v JavaScripte, keď máte kľúč hodnota pary, v skutočnosti používate niečo ako objekt. A tí z vás, ktorí sa transportéry alebo ako by pripomenúť objekty z Java alebo podobné jazyky. JavaScript nie je Java, predovšetkým. Jednalo sa o úmyselné rokmi návrhu rozhodnutia pred ukradnúť niečo iné, že bola populárna, jeho meno, aj keď nemá žiadnu zásadnú vzťah k Java sám. JavaScript má objekty, a vytvoriť im prostredníctvom notácie ortézy kučeravé. Objekty v JavaScripte sú do značnej miery zodpovedá asociatívne pole v PHP pokiaľ ide o ukladanie dát vo vnútri nich. 

Ale ešte silnejšie v JavaScripte môžete priradiť veľmi ľahko funkcie vo vnútri objektu, a keď si to urobiť v iných jazykoch, je to celkom bežné paradigma, ako uvidíme. Stručne povedané, tento objekt reprezentuje študenta, ktorý je zvlášť Zamyla, a je to podobné ako koncepčne, len syntakticky odlišné od tohto. Poďme vlastne používať JavaScript v súbore. Ukazuje sa, že je to skript tag. Videli sme štýl značku a my sme videli ďalšie HTML tagy. Skript tag vlastne bude obsahovať nejaký kód JavaScript. Nechaj ma ísť do zariadenia, kde máme nejaký zdrojový kód pre-made. Nemám zanechané to ešte na webových stránkach, ale budem robiť, že po triede. Poďme otvoriť túto, blink.html. Späť v roku 1990, tam bol doslova HTML tag nazýva blikajú tag, a toto bol jeden z najviac nádherne nadmerne značky na internete kedy by ste navštíviť nejaký 1990 v štýle webovej stránky a začať vidieť texte blikať ťa takto, výsledky markíz tagu, ktorý textu bude takhle. Jeden z mála okamihov, kedy sa svet skutočne dohodnutých na webovom štandardu, všetci plošne zabil blikanie značku pred niekoľkými rokmi. Ale môžeme vzkriesiť s JavaScriptom ako demonštráciu sily máte keď môžete napísať program vo vnútri webovej stránky. Najprv sa preskočiť nové veci a sústrediť sa iba na starý. 

Tu je staré veci v tomto príklade. Mám tag HTML, hlavu značku, a titul tag. Potom mám tag body tu div, ktorý odvolanie je len obdĺžnikový rozdeliť stránku že som dostal jedinečnú ID ľubovoľne z "pozdrav", aby, Len tak som si spôsob, ako jednoznačne odkazuje na to, že má niektoré veľmi jednoduchý text: ahoj, svet. Teraz mi dovoľte rolovať hore na začiatok tohto súboru a zistiť, čo je nové. Prvá vec, ktorá je nová až hore je skript tag, a vnútri oznámenia tag script som deklaroval funkciu. Ak chcete deklarovať funkciu v JavaScriptu, dosť podobný PHP, budete doslova napísať Funkcia potom na názov funkcie, zátvorka, a možno niektoré argumenty, ak to trvá nejaký. Potom som dostal môj zložená zátvorka ako zvyčajne, a teraz máme nejaký mierne nového kódu, ale uvidíme, čo to znamená. Tak var div, to jednoducho znamená, dať mi premennú s názvom div. Mohol som to nazval foo, ale ja som chcel, aby to nazvať div z dôvodov, ktoré budú zrejmé v druhej. Potom to dopadá v JavaScripte - a to je JavaScript kód vložený v mojej webovej stránky - je zvláštne globálna premenná druhov tzv dokument. JavaScript je v skutočnosti objektovo orientovaný jazyk. Nebudeme zachádzať do detailov v 50, čo to znamená, ale teraz viem, že objekt je skoro ako struct. Rovnako ako sme videli pri ceste späť v jednom z prvých problému sety kde sme dať veľa informácií v struct, Podobne je dokumentovať zvláštne struct, ktorý je dodávaný s prehliadačom, prichádza s ľubovoľnou webovú stránku. Nie je to niečo, čo som vytvoril. Vnútri tohto dokumentu štruktúry, aj keď budete mať nielen dáta ale tiež majú funkcie. 

A kedykoľvek budete mať funkciu vnútri štruktúry, vo vnútri objektu, je to tzv metóda. Ale je to to isté. Metóda je funkcia, ktorá len tak sa stane, že je vo vnútri niečo iné. Takže to znamená, že táto špeciálna globálne premenné s názvom dokumentu je funkcia nazvaná getElementById, že doslova robí, že. To sa vám element z DOM, Document Object Model strom, ktorého ID je v tomto prípade pozdrav. Inými slovami, celú tú dobu sme strávili na dátových štruktúrach prichádza do hry. Tento obraz DOM, ktorý sme mali pred chvíľou, aj keď stránka je trochu iný, keby som mal div na tomto obrázku, čo document.getElementById by sa vrátil ku mne by účinne sa ukazovateľ k obdĺžnika v strome, odkaz na obdĺžnik vo stromu. Takže to, čo to znamená v skutočnosti zavolajte na jedno z týchto funkcií. V tomto prípade je to opäť div. Nie je to subjekt alebo titul. Tak sa pozrime, čo som potom robiť s touto div teraz, že som si to v tejto premennej nazvanej div. Ukázalo sa, že s JavaScriptom máte možnosť doladiť CSS vašej stránky dynamicky. Až teraz, všetky CSS sme kedy urobili, aj keď obmedzený, je v štýle atribúty, alebo kde inde sme dať CSS? Tak nejako som skazený, že jeden. V štýle značky v hornej časti súboru. Alebo tretie miesto bol v? 

Externý súbor, niečo. Css. Takže to sú tie 3 miesta sme urobili CSS tak ďaleko, ale úlovok je, že sme pevne dané, že všetko. Rozhodli ste sa, ako si ponorila do PSet 7, rozhodli sme sa pred prednášať to, čo naše CSS bude. Ale ak chcete zmeniť CSS, môžete skutočne urobiť Akonáhle budete mať skutočný programovací jazyk. CSS, HTML - nie je programovacie jazyky. JavaScript je. Tak to dopadá, že akonáhle máte jeden z tých obdĺžnikov zo stromu volal DOM, to má sám nejaké dáta v nej. Takže div, že som schmatol zo stromu má to, čo budeme hovoriť vlastnosť vnútri neho volal štýl, a vlastnosť štýlu má sám vlastnosť nazvanú viditeľnosť. Ja by som si toho až pri pohľade do užívateľove CSS príručke. Ukazuje sa, že je viditeľnosť CSS vlastnosť, ktorá robí to, čo hovorí. To je niečo viditeľné alebo nie, viditeľné alebo nie. A ako to robíte, že je to. Pýtam sa programovo, ak viditeľnosť tohto div sa skrýva, čo mám zmeniť to? Viditeľné. Inak, ak viditeľnosť tejto stránke nie je skrytá, logicky som si, aby to skryté. Nemám potuchy, prečo je to viditeľné a skryté a nie sú viditeľné a neviditeľné. To bol zlý tvar rozhodnutia na ceste. Ale to sú naozaj protiklady v CSS: k prehliadnutiu a skryté. To všetko robí je, znamená to zmeniť CSS môjho súboru zapnutie a vypnutie, zapnutie a vypnutie pre daný div. Ale znova, to je funkcia nazvaná blikajú. Keď je blikanie funkcia sa nazýva? Ukazuje sa, že je tu ešte zvláštne globálne premenná tzv okno, svojím duchom podobať dokumentu, ale vzhľadom k tomu, že dokument sa odvoláva na svoje webové stránky, ako strom DOM, HTML si poslal zo servera, Okno sa odkazuje na chróm okolo neho, adresa bar, bar titulu, a všetky tie veci okolo svojej webovej stránky. 

A ukázalo sa, že objekt window má špeciálnu funkciu vo vnútri neho volal setInterval že robí to, čo hovorí. Ak bude nastaviť interval - v tomto prípade každých 500 milisekúnd - a hádať, čo to bude robiť každých 500 milisekúnd? Bude to vykonať túto funkciu blikania. A čo to tu pekné, že sme mohli urobiť to v C, aj keď sme nikdy neurobil. C má niečo, čo nazýva ukazovateľov funkcií, kde si môžete prejsť funkcie okolo ako argumenty. Podobne v JavaScriptu môžete odovzdať názov funkcie do inej funkcie. A upozornenie, čo robím. Ja to nerobím. Ak som zátvorky po žmurknutia, znamenalo by to volanie blikať funkcie. Keby som ich zrušenie, to znamená, že je tu blikanie funkcie takže setInterval dá hovoriť každých 500 milisekúnd. Takže konečný výsledok, otrasné hoci to je, je to, že keď pôjdem do localhost a ísť do blink.html, Teraz mám túto udalosť znovu a znovu. A keď som vlastne Skontrolujte prvok, uvidíme, či môžeme vidieť. Dovoľte mi, aby som Skontrolujte prvok, dovoľte mi, aby som prejdite dole len trochu, dovoľte mi, aby som si vybrať Elements sem, a všimnite si DOM vnútro inšpektora Chrome. Je to doslova mení tam a späť každých 500 milisekúnd. Ak pôjdeme do nášho priateľa Nate, ak ste sa niekedy nad tým, ako to funguje, podobný nápad s intervalom, ale Nate je vlastne robiť veľmi efektívne využitie farby v tomto konkrétnom prípade tu. Takže čo viac môžeme vlastne robiť s tým? Poďme otvoriť ďalší príklad a skúsiť niečo že je programovo ešte užitočnejšie, ako robiť veci blikať. Nechaj ma ísť do nášho formulára adresára dnes a ísť do form0. To bolo najškaredšie možné formulár, ktorý som mohol prísť s, a dovoľte mi, aby som vám ukázať, ako vyzerá v prehliadači. 

Nechaj ma ísť do localhost / formulárov, a to je form0. To je super škaredé HTML formulár, ktorý má niekoľko polí pre e-mail, na heslo, heslo, a potom sa trochu zaškrtávacie políčko, aby sa dohodli na niektorých pojmov a podmienok. Háčik je, či som navštíviť tento formulár a ja nechcem, aby vám svoju e-mailovú adresu, Nechcem, aby sa dohodli na podmienkach možná, môžem kliknite na tlačidlo Zaregistrovať a to umožňuje mňa rovnako. To sa stáva, aby sa podrobil stupídny súboru PHP s názvom dump.php. Všetko, čo to urobí, je vytlačiť obsah $ _GET len na diagnostické účely. To bolo to, čo bolo predložené užívateľom práve teraz. Predpokladajme však, že chceme skutočne overiť užívateľa odoslaní formulára. Nechaj ma ísť do verzie 1. To je form1.html. Vyzerá to esteticky rovnako ako zlé, ale všimnite si, ako je to fantázia. Keby som na tlačidlo Registrovať bez spolupráce, som si zakričal na. "Musíte zadať vašu e-mailovú adresu." Dobrá. Tak skúsim to. Tak malan@harvard.edu. Nepotrebujem heslo. Registrácia. "Musíte zadať heslo." Dobrá. Tak som sa zadať heslo Crimson. Registrácia. "Heslá sa nezhodujú." Musím teraz písať crimson tu. Omylom som čítal, že. Registrácia. "Vy musíte súhlasiť s podmienkami." Dobrá. Súhlasím tam. Registrácia. A teraz to ukazuje mi diagnostický výstup tamto. 

Takže to, čo sa práve stalo? Sme mali túto schopnosť overiť odosielanie formulára. V skutočnosti, ak ste ponoriť do PSet 7, je tu ospravedlniť funkcie že je to celkom jednoduché kričať na užívateľa s hlásením na obrazovke. Ja používam trochu iný mechanizmus, záznam funkcie, ktorá nie je funkcia, ktorá je sa usmial na, pretože to robí veľmi škaredé užívateľské správy. Ale pozrime sa, čo tu robím. To je form1.html, a všimnite si, že mám nejaký docela známy syntax: telo tag, tag formuláre, akcie atribút, metóda atribút. Ale nevšimol som rovnako moja forma jedinečné ID pre pohodlie. Potom som dostal e-mail pole, ktorého typ je text, pole pre heslo, ktorého typ je heslo, potvrdenie poľa, ktorého typ je heslo, a potom checkbox, ktorého meno je zmluva tu, typ checkbox. A potom mám tlačidlo Odoslať. Všimnime si ale na vrchole, čo viac mám. Po prvé, je tu ďalšie použitie skriptu značky. Ak máte nejaký kód JavaScriptu v inom súbore, rovnako ako s CSS môžete zahrnúť. A vy, že sa skript zdroje, a potom zistíte som pripojenie zrejme na googleapis.com na veľmi dlhej ceste, ale ktorého meno končí v jquery.min pre minimum. js. jQuery je super populárny knižnica pre JavaScript, ktorý jednoducho robí JavaScript všetky užívateľsky prívetivejšie na použitie. Je to skutočne stalo de facto štandardom. Takže aj keď to, čo ste asi vidieť nie je čistá JavaScript samo o sebe, to je knižnica na vrchole JavaScriptu podobne ako na CS50 knižnice vrstva na vrchole low-level kód C, realita je takmer každý na internete používa. Takže sa nejedná o školení kolesá. To je len najlepšia prax v týchto dňoch. Teraz všimnete nižšie, že je môj vlastný scenár tag, a všimnite si, čo som tu urobil. Ukazuje sa, že jQuery robí niečo trochu fantázie. JavaScript má doláre, ale oni sú bezvýznamní. 

Sú ako písmeno A alebo B alebo C. jQuery je jednoducho prijala konvenciu alebo druhu položil požiadavku na skutočnosť, že $ bude ich špeciálny symbol. Takže akonáhle vložíte tento globálny JavaScript súbor tu s skriptu značky, máte prístup k špeciálnym globálne premenné, ktorá sa volá $. Je to viac vhodne volal jQuery, ale to nevyzerá zďaleka tak sexy ako $. Ale $ nemá žiadny zvláštny význam. V PHP to malo osobitný význam. Musel si mať pred premenné. To je len sexi vec, ktorú prijal. Čo sa to tu deje? Všimnite si, som okolo na jQuery funkcie moju globálne premenné dokumentu a potom volám. pripravený. Čo jQuery podstate robí, je, že vám umožní vziať nejaké vanilkové JavaScriptu veci ako objektu dokumentu, objekt window, a keď si odovzdať ho do jQuery funkcie - a znova, aby bolo jasno, to je funkcia nazvaná jQuery - to, čo robí je vráti na vás špeciálnu verziu dokumentu , Ktorý má viac funkcií, s ním spojené. Takže v surovom JavaScript nie je k dispozícii žiadny funkcie, ale ak odovzdáte dokument jQuery funkcie ako prvý, sa vráti do Vás špeciálnu verziu objektu dokumentu že má viac fantázie funkcií. A to je dôvod, prečo ľudia radi. Je to jednoducho robí veci jednoduchšie urobiť, ako sme o tom vidieť. Takže čo tento riadok kódu znamená? Tento riadok kódu tu znamená, že keď je dokument pripravený - inými slovami, akonáhle prehliadač prečítaní tohto súboru zhora nadol - choďte do toho a spustiť nasledujúce funkcie. Čo je naozaj zaujímavé v JavaScripte - a PHP je to rovnako - je anonymný funkcie. V JavaScriptu môžete deklarovať funkcie, ktoré nemajú meno, ale oni predsa majú telo. Všimnite si, čo sa tu deje. 

To je funkcia nazvaná pripravený, a znamená to, vykonať nasledujúce kedy sa celá webová stránka je pripravená, keď je to všetko bolo čítať v zo servera. Čo chcete urobiť? Chcem spustiť kus kódu. Všimnite si, že nechceme, aby spustenie tohto kódu hneď. Ak som vynechal to, znamenalo by to okamžite začať vykonávanie týchto riadkov kódu. Ale fakt, že hovorím nie, nie, nie, zabaliť to v anonymnej funkcie, ako je táto prostriedky nespustiť ju doteraz; hovoriť to nakoniec. Videli sme to pred chvíľou v našom predchádzajúcom príklade formulára. Akú funkciu sme zavolať nakoniec, 500 milisekúnd neskôr? Blink. Takže rovnaký nápad. Opäť platí, že aj keď to vyzerá trochu divne, vezmite zatiaľ o viere že vyhlásiť anonymné funkcie, ktorá hovorí sa nakoniec, stačí napísať function () { Takže, aký kód sa budeme vykonávať nakoniec? Nasledujúce. To tiež vyzerá trochu nový, ale to znamená, tu je jQuery funkcie, a to je teraz skratka. Tento fragment HTML v dolnej časti okna samozrejme má nejaký strom zastúpenie. To nie je to. Táto stránka je oveľa zaujímavejšia ako tento Hello, World napríklad. Ale tam je nejaký strom, ktorý zodpovedá tomuto HTML. Bolo by bolesť v krku musieť realizovať nejaký rekurzívne funkcie začať na koreňový uzol a potom nájsť uzol, ktorého ID je registrácia. Takže to, čo robí jQuery super ľahké pre nás je doslova to. Nehanbite sa a dostať ma, čo div, alebo akejkoľvek podobe, bez ohľadu na HTML element má ID registrácie. Toto je ekvivalent k document.getElementById ("registrácia"). 

Prečo ľudia ako jQuery? Vzhľadom k tomu, že je to kratšie písať. Ale to je všetko, čo je. Je to rovnaká myšlienka. Dajte mi tag, ktorého ID je registrácia. A keď sa nám, že tag, ktorý sa stane byť forma,, choďte do toho a spustenie tohto kódu. Takže poďme sa jeden pohľad teraz na to, ako si vedieme formulára overenie. Syntax je síce záhadnej na prvý, ale to, čo sa deje? Ak tento riadok kódu je pravda, budem kričať na užívateľa, aby jeho alebo jej e-mailovú adresu. Takže to, čo je tento riadok kódu? $ Znamená jQuery. Teraz si toho všimnúť. To je niečo ako CSS. Ak ste sa ponorila do CSS ešte, budete vedieť, že to znamená, že prvok, ktorého ID je registrácia. Priestor znamená nájsť dieťa alebo potomok registráciu, ktorého meno je na vstupe. A potom sa tá vec v hranatých zátvorkách je trochu filter. A aj keď to vyzerá tajomná, to len znamená ísť do formulára, ktorého ID je registrácia, prejsť na vnútornej vstupný prvok toho, ktorého meno je e-mail, a potom sa jeho hodnotu, bez ohľadu na jeho hodnotu sa stane, že - asdf či je to všetko, čo som na písacom stroji alebo malan@harvard.edu či to, čo som napísal. Takže, ak je hodnota formulára emailovú poľa == nič, revať na užívateľa. Alebo ak je hodnota v poli hesla == nič, revať na užívateľa. 

Alebo ak je hodnota v poli hesla nie rovnať hodnote pole pre potvrdenie, ktorý bol iný prvok formulára, revať na užívateľa. A potom konečne - a to taky má nejakú novú syntax vlastné, ale akonáhle ste videli, že je to aspoň trochu rozumné - else if formulár, ktorého ID je registrácia má vstupný prvok, ktorého meno je zmluva a je kontrolovaná, choďte do toho a revať na užívateľa. Tak som úplne priznať, je to absolútne ohromujúci na prvý pohľad. Je to veľa novej syntax. Ale všetci jQuery sa riadia týmito druhmi vzorov. A úprimne, ja ani nevedel, to existoval ešte pred niekoľkými minútami. Aj Googled, "Ako by ste skontrolovať, či je začiarknuté políčko v jQuery?" a to je syntaxe, pretože tam je rôzne spôsoby, ako to urobiť s aktuálnym zdrojovom kóde JavaScript. Tak ako prvá stránka problému Set 7 zdôrazňuje, Pset 7 je veľmi cvičenie v Bootstrapping sami kde sme za predpokladu, dúfajme, koncepčný rámec, s ktorým sa vysporiadať s PSet. 

Ale ako je to často v prípade web design, je to na vás naozaj hrabať okolo, začlenil úryvky kódu a príklady z webu tak dlho, ako budete citovať je Podľa podmienok na tomto prvom liste, a uvedomiť si, že učenie HTML, CSS, JavaScript, a dokonca aj SQL je naozaj chcel byť tento at-home cvičenia, ako sme začali brať tieto vzdelávacie kolesá off. A uvedomiť si, taky je tu oveľa viac vecí, ktoré môžete robiť s prehliadačom. Vnútri väčšiny z týchto prvkov existujú aj iné veci, tzv obslužné rutiny. A aj keď sme sa pozrel na tie tzv onsubmit a onready, môžete robiť veci, ako OnKeyDown, OnKeyUp, rád, keď sa používateľ dotkne kľúč, môžete počúvať, že aj kláves hore. Gmail má klávesové skratky. Ako Google implementovať klávesové skratky, ako je C pre písanie? Oni počúvať udalostiam, ako sa im hovorí, ako onkeypress alebo OnKeyUp a OnKeyDown. Ak ste niekedy vznášal myši nad nejakým menu a zrazu, máte to, objaví ponuka alebo grafiku mení farbu, ako to robia? Skôr než počúvať onready alebo OnSubmit, môžete počúvať onmouseover alebo onmouseout. 

Takže v skratke, s týmito veľmi jednoduché základy, ktoré sme začali, aby ste nepoškriabali povrch dnes a budeme potápať v nadväznosti na stredu, budete mať stále viac, právomoc vykonávať veľa vecí, ktoré ste už zvyknutí. Takže poďme nekončí, a my budeme pokračovať v tomto stredu. 

[CS50.TV]