[Powered by Google Translate] [Săptămâna 9] [David J. Malan - Universitatea Harvard] [Acest lucru este CS50. - CS50.TV] Bine. Bine ai venit înapoi. Acest lucru este CS50, iar acest lucru este începutul săptămânii 9. Astazi ne vom concentra în special pe design, nu mai este în contextul C dar, în contextul PHP și un pic de SQL și un pic de JavaScript, în special spre un scop atât PSET 7 și, de asemenea, proiectul final. De fapt, dacă vă aflați la acel moment, în proiectul final în cazul în care probabil ca de o oră sau cam asa ceva în urmă, ai cel puțin început să dea unele crezut la proiectul final și te gândești doriți să colaboreze cu colegii de clasă 1 sau 2, dacă întâmpinați probleme la conectarea cu colegii de clasă a spus, nu ezitați să completați formularul de la cs50.net/partners/form. Pur și simplu te întreabă cine ești, ce fel de proiect te gandesti, în cazul în care locuiți doar pentru motive logistice. Și apoi, dacă doriți să păstrați un ochi pe deasupra săptămâna viitoare sau cam asa ceva URL-ul de calcul tabelar acolo, puteți vedea apoi o versiune doar în citire a doc Google în care suntem colectare a acestor informații. Deci, dacă doriți să lucrați cu cineva, prin toate mijloacele să nu ezitați să ajungă la oameni prin acest mecanism. Dar majoritatea de oameni fac singuri de lucru. Asta e cu totul bine. Deci, nu simt că acest lucru este în nici un fel obligatorie. Vineri a fost doar eu și câteva din echipa aici, teatru gol pentru cea mai mare parte. Au fost 3 turisti stau acolo, astfel că a fost un pic ciudat. Ceea ce am vorbit despre baze de date a fost și am vorbit despre PSET 7 un pic. Și dacă nu sa întâmplat pentru a prinde că pe video doar încă, e în regulă. Voi încerca să definească orice termeni care ne-ar lua pentru a acordat în caz contrar bazat pe prelegere de vineri. 

Dar azi am de gând să încerc să ajungi la punctul de de a nu fi capabil doar să facă ceva de genul PSET 7 dar de fapt înțelegerea a ceea ce se întâmplă sub capotă, în special unele dintre abstracțiuni pe care le-am pus în aplicare în fișierul functions.php pentru a face viața un pic mai ușor, dar în așa fel încât să înțelegeți în cele din urmă astfel că, atunci când roțile de formare desprinde în câteva săptămâni vă poate supraviețui în continuare în lumea reală și de a face aceste lucruri fără nici un cadru CS50 sub tine. Această $ _SESSION, pentru cei dintre voi care sunt familiarizați sau care deja prins video de vineri, ceea ce face să ne facem SESIUNEA într-o aplicație bazată pe web PHP? Aceasta este o variabilă superglobale, ceea ce înseamnă că este similară în spirit pentru a GET si POST și alte câteva, dar ceea ce este acest lucru util pentru? 

Ce este SESIUNEA utilizează pentru? Da. [Elev] Logging inch Ne pare rău? [Elev] Logging inch Logging inch Într-adevăr. În PSET 7 suntem folosirea acestui superglobale SESIUNEA pentru a facilita logare inch Și ce e frumos despre acest superglobale este faptul că este un tablou asociativ. Un tablou asociativ, rechemare, este doar o matrice, dar ale căror indici nu mai trebuie să fie numere cum ar fi 012. Ele pot fi numere sau pot fi chiar siruri de caractere. Și așa că, dacă v-ați scufundat în PSET 7 încă, poate iti amintesti ca suntem stocarea un ID cheie numit în interiorul acestui tablou asociativ a căror valoare este ceva de genul 123 - indiferent de conectat în prezent ID-ul de utilizator este. Motivația pentru aceasta este că, chiar și după ce utilizatorul a vizitat localhost sau site-ul meu mai general și apoi le-am conectat, chiar dacă acestea nu faceți clic pe un link sau a reveni la site-ul meu timp de 5 minute sau chiar o oră sau chiar o zi, dar ei lasă fereastra browser-ului lor deschisă, prin intermediul acestui superglobale-mi pot aminti că acestea sunt logat 

Cu alte cuvinte, permite-mi să stocheze ceva ușor pe termen lung, vreau despre un utilizator. Și vă puteți gândi de ea într-adevăr ca o întruchipare a unui coș de cumpărături. Locuri precum Amazon, evident, să vă puneți lucrurile într-un coș de cumpărături, dar HTTP, protocolul care alimentează Web, este apatrid în sensul că, atunci când vizitați un site Web, pentru cea mai mare parte nu aveți conexiune la rețea unele constante între browser-ul dvs. și serverul. De îndată ce ați descărcat HTML și JPEG și GIF-uri și toate cele care, conexiunea dispare și aveți doar o copie a HTML și fleacuri de la server. Dar dacă serverul vrea să-și amintească ceva despre tine, sarcina este pe server pentru a înregistra efectiv aceste informații. Și așa voi programator care au control asupra serverului poate pune aproape orice doriți în interiorul acestui tablou asociativ superglobale și va fi acolo data viitoare utilizatorul revine, fie că este vorba de minute sau chiar zile mai târziu, cu excepția cazului în care închideți fereastra browser-ului lor, la care SESIUNEA punctul dispare. Deci e de depozitare efemer, e non-persistente, si este menit sa plece de îndată ce utilizatorul închide browser-ul lor - nu doar că fila, de multe ori browser-ului, astfel de logare în mod eficient de utilizare afară. Deci, cum este chestia asta, de fapt puse în aplicare? Să aruncăm o privire rapidă la un exemplu simplu, ne-am uitat putin pe vineri. Pentru cei nefamiliarizati, a fost la fel de simplu ca asta. Aceasta este o pagină de web al cărui unic scop în viață este să-mi spui de câte ori am vizitat această pagină. Aceasta este prima dată aici, luni, că l-am vizitat, așa se spune de 0 ori. 

Dar dacă am începe să reîncărcați această pagină, se spune o dată, 2, 3, 4, 5, și în cele din urmă acest lucru va păstra doar pe numărare sus, sus, sus, sus, sus pentru fiecare dată când am de fapt, faceți clic pe Reîncarcă pe ea. Deci, cum este acest lucru? Lasă-mă să merg în interiorul acestui fișier numit counter.php. Partea de sus a acesteia este toate comentariile albastru, dar partea interesantă este aici. Pe linia 13 noi numim acest lucru session_start funcție, și că este literalmente tot ce trebuie să faceți în cazul în care doriți să aveți acces la în acest superglobale special, numit $ _SESSION. Asta face totul posibil, și vom vedea într-un moment cum e posibil. În linia 16 Notă ceea ce fac. Dacă cheie, numit contra - cu alte cuvinte, valoarea indicelui - "contra" există în interiorul acestei matrice numită sesiune, atunci ce fac cu el în linia de mai jos? Ce este linia de 18 faci? 

[Răspuns studentul nu pot fi auzite] Ce-i asta? [Elev] Depozitarea valoarea. Bine. Este stocarea valoarea care este în sesiune, chiar acum într-o nouă variabilă locală temporară, $ Contor în toate litere mici. Observați că PHP este deja a fi un pic leneș aici. Observați că nu avem nici o mențiune de int sau float sau string sau ceva de genul asta deoarece PHP este slab tastat, care nu trebuie să specificați tipul unei variabile, și, în acest caz, aici, eu nu am nici a declarat încă. Eu o declara in interiorul acestor acolade și, spre deosebire de C, aceasta este de fapt bine. Nu contează cât de profund imbricate o declarație de variabilă este în PHP - interiorul bretele cret, cret interiorul bretele și cum ar fi - se va în acel moment, în timp exista pentru restul programului, pentru o mai bună sau mai rău pentru. Deci, devine imediat la nivel mondial, cât mai curând l-ați defini ca facem noi aici. 

În caz contrar, dacă nu mi se pare că există ceva în superglobale SESIUNEA, Sunt inițializare aparent această variabilă contor la 0, astfel doar presupunând că utilizatorul nu a fost niciodată aici înainte. Și atunci acest curs este de incrementare contra cum? Mă actualizarea valorii care este în interiorul acestui tablou asociativ prin fixarea egal cu orice contor prezent este + 1. Dacă aș defilați în jos aici pentru a HTML a paginii, este de fapt destul de simplu. Tot ce am în corpul acestei pagini este: "Ați vizitat acest site ori așa-și-așa." Și aceasta este o construcție PHP. Dacă veți face <=, aceasta este echivalentă cu ceea ce efectiv funcția? E într-adevăr echivalente cu ceva de genul printf, pe care le-am vazut de multe ori în C, deși, așa cum poate știți deja de spec. în PSET 7, de imprimare este, de asemenea, o funcție care imprimă doar ceva, nu utilizează efectiv codurile de format, și vă pot spune de fapt, ecoul, de asemenea. Toate acestea sunt vreodată atât de ușor diferită, chiar dacă efectul net este în cele din urmă la fel. Deci, această utilizare a semnului egal este doar un fel de-un mod elegant de a face asta mai succint decât s-ar putea fi altfel în măsură să. Deci, asta e tot ce face acest site. Ea imprimă valoarea contorului. Cum se intampla de fapt toate astea? Poate vă amintiți o săptămână sau cam asa ceva în urmă, am început să caut sub capota la modul în care o pagină web funcționează prin folosirea acestui filă inspector. 

Chrome are acest atât în ​​versiunea pentru Mac, versiune de Windows, și chiar și versiunea Linux, și Firefox și IE dispun de mecanisme similare, prin care au acest depanatorul built-in interiorul browser-ului. Să aruncăm o privire la următorul. Avem o grămadă de file aici, și reamintesc că cel mai din stânga este Elemente, și nu contează cât de godawful HTML și JavaScript este într-o pagină, amintesc că, odată cu fila Elemente puteți naviga, de fapt, HTML ierarhic și frumos și îngrijit. Deci, dacă sunteți încercarea de a învăța de la un site web precum Google sau Facebook sau într-adevăr orice site, dau seama că ești, probabil, mai bine se uită la codul sursă în acest fel, spre deosebire de vizualizarea sursei prime, care poate fi un dezastru, așa cum am văzut mai ales pe site-ul Google. Deci, dacă am clic pe tab-ul în loc de rețea aici, Să vedem ce se întâmplă atunci când am vizitat această pagină. În primul rând permiteți-mi să ștergeți cache-ul meu. Am de gând să meargă în Setări în Chrome și apoi du-te la Istorie Goliți și apoi toate datele de navigare. S-ar putea fi folosite pentru a face acest lucru pentru alte scopuri, [râsete] dar atunci când vine vorba de site-urile în curs de dezvoltare, este de fapt util - dacă râzi știi. [Râsete] E de fapt foarte util atunci când în curs de dezvoltare site-uri web, deoarece realitatea este lucruri cum ar fi cookie-uri și lucruri, cum ar fi fișierele memorate în cache, fișiere HTML JavaScript cache poate deveni de fapt o mare durere de cap, pentru că, dacă pentru orice motiv browser-ul decide să cache unele fișiere și totuși ați făcut modificări în acest fișier de pe server dar browser-ul nu are într-adevăr a dat seama că fișierul a schimbat și, prin urmare, de fapt, nu-l re-descărcați chiar și atunci când faceți clic pe butonul Reload, una dintre modalitățile cele mai sigura de a face doar să vă asigurați vina nu este cu codul dvs., e cu comportamentul browser-ului, este de a merge aici in browser și șterge doar întreaga istorie, astfel că nu există nici o confuzie. 

Și apoi, dacă vrei cu adevărat să fie paranoic, demisia browser-ul, il repornesti, apoi asigurați-vă toate funcționează conform așteptărilor. Deci, pe scurt, cache de compensare este bun atunci când faci dezvoltare. Deci, aici avem fila Rețea. Am avut anterior vizitat site-ul de 9 ori, dar lasă-mă să merg mai departe acum și faceți clic pe Reîncărcare. Și m-am întors la 0. Să vedem de fapt cum se face că această superglobale sesiune este în curs de aplicare. Am de gând să faceți clic pe HTTP cerere 1, care a fost făcut, și fereastra de depanare permite să mă uit în interiorul acestuia. Aici am vedea doar răspunsul de la server, ceea ce nu este interesant. Am văzut acest lucru în orice număr de moduri. Dar ceea ce este interesant punct de vedere tehnic sunt anteturile. Dacă aș defilați în jos aici, și să se concentreze asupra anteturile cerere și faceți clic pe sursa de vedere, ce am de gând să văd este literalmente cererea HTTP care tocmai a trecut de la browser-ul meu la server, GET fiind cuvântul operativ și apoi / counter.php fiind numele fișierului, HTTP/1.1 fiind doar versiunea de HTTP care browser-ul meu este folosind. Această linie este aici un memento pic din browser-ul la server ceea ce numele serverului este că vrea să vorbească. Și apoi restul de acest lucru este, uneori, interesant, dar nu sunt relevante acum. 

Acesta este doar un fel de curiozitate. Criptic, deși acest șir este, în orice moment browserul vizitează un site Web este informarea serverul ceea ce browser-ul pe care îl utilizați și ceea ce sistem de operare pe care îl utilizați și ce versiune acestora. Deci, dacă v-ați întrebat vreodată cum site-uri precum CNN și fleacuri Știi ce procentele sunt de utilizatorii de Mac pe utilizatorii de PC-uri Web,, Utilizatorii IE, utilizatorii Chrome și cum ar fi, e pentru ca toate browserele noastre spun fiecare singur site web acolo ceea ce suntem. Acesta nu conține în mod necesar informații de identificare personală, dar nu spun ce serverul adresa ta de IP este și ce browser-ul și sistemul de operare pe care îl utilizați. Deci, asta e în cazul în care această informație este. Dar ceea ce e mai interesant acum, când vine vorba de aceste sesiuni este antet de răspuns. Permiteți-mi să faceți clic pe vizualizarea sursă de lângă răspuns. Ce e interesant aici este câteva lucruri. 1, ne-am întors un cod de stare 200. Noi nu vedem acest cod de stare, deoarece înseamnă că totul este bine. Aceasta înseamnă, literal, în contrast cu bine altceva. Ce este un număr de noi, uneori, vedem că e rău? [Elev] 404. 404, fișier nu a fost găsit, 403 s-ar putea să fie deja la poticnire, care este interzisă, ceea ce înseamnă că ai uitat la ceva chmod, cel mai probabil. Și există o grămadă de alte persoane. 

Aici jos, asta este un pic nebun. Am scris de fapt doar acest fișier acum câteva minute prin lipirea-l în gedit. De ce a aceasta pagina expiră în 1981, înainte de a exista într-adevăr a fost o Web? Ce se întâmplă acolo? 

[Răspuns studentul nu pot fi auzite] stampila de timp. Dar de ce? E oarecum arbitrară, dar de fapt e folositor. Ce spune acest lucru este pentru a browser-ul meu este acest fisier PHP care l-ați solicitat a expirat deja. De fapt, aceasta a expirat de acum 30 de ani. Dar ce înseamnă asta cu adevărat? Aceasta înseamnă doar data viitoare utilizatorul vizitează această pagină, fie prin reîncărcare sau tastând URL-ul din bara de adrese, asigurați-vă că du-te și adu-o nouă copie a acestuia. Aceasta este un fel de exemplu de busting de cache, un cuvânt stupid care tocmai înseamnă a încerca să descurajeze browsere de fapt cache-ul HTML care a fost trimis de la un server astfel încât să nu a lovit accidental de reincarcare si vezi apoi aceeași versiune a fișierului. Vrei de fapt, server pentru a trimite o copie nouă. Deci, faptul că e 1981 înseamnă doar că asta e ceea ce aparatul este alegerea ca o dată arbitrară în trecut. Dar linia reală suculent este acum asta. Chiar înainte de a 50 esti, probabil, vag familiar cu cookie-uri. Ca de acum, în special în rândul celor mai puțin confortabil sau în între, ceea ce este un cookie in intelegerea ta chiar acum chiar dacă suntem pe cale de a face înțelegere mai tehnic? Ce este un cookie? Da. [Elev] Informatii despre utilizator, cum ar fi în cazul în care le-am scris numele de utilizator sau ceva de genul. 

Bine. E informații despre utilizator, indiferent dacă le-am scris numele de utilizator lor deja. Cookie-urile sunt o modalitate prin care serverele pot aminti ceva despre un utilizator. Și ce este cu adevărat un cookie este un fișier text sau o secvență de octeți care este plantat de serverul interiorul browser-ului, și în interiorul acelui fișier sau printre aceste octeți este un fel de identificator. Poate că e literalmente numele dvs. de utilizator, dar cel mai adesea e ceva mai criptic cu aspect ca acest lucru aici - bo8dal3ct și așa mai departe - acest șir alfanumeric foarte mare care este de fapt doar menit să fie un identificator unic pentru tine. Sau vă puteți gândi la ea ca la un fel de timbru mână virtuală. Dacă te duci la un club sau un parc de distracții, să vă amintiți că ați plătit efectiv și a plecat, au pus un autocolant pic de rosu pe mana ta de un anumit fel, reamintește și că oamenii de la ghișeu care le-ați plătit deja și puteți veni și pleca după cum te rog. Cookie-urile sunt un pic similare în spirit la asta. Prima dată când am vizitat acest site, așa cum am făcut-o doar după golirea memoriei cache mea, serverul de web, aparatul în acest caz, a pus o stampila pe mana mea al cărui nume este PHPSESSID, sesiune ID-ul, a căror valoare este acest șir alfanumeric foarte lung. 

Deci, asta e acum un fel de inscriptionate pe mâna mea, astfel încât data viitoare când l-am lovit reincarca sau vizitați manual această adresă URL într-un browser, browser-ul meu, prin definiție, de HTTP este de gând să prezinte ștampila mână din nou și din nou și din nou. Deci, chiar dacă serverul nu știe neapărat cine sunt eu, ei, cel puțin știu că eu sunt același utilizator sau, cel puțin, mai precis, același browser. Și astfel încât acesta este în cele din urmă modul în care este pusă în aplicare superglobale SESSION. Serverul nu are nici o idee cine sunteți atunci când revizitezi un site web pentru a doua sau a treia oară excepția cazului în care ați prezenta acest timbru mână. Și, de îndată ce vă prezentam că ștampila mână, serverul de web în esență, merge într-o bază de date mică proprie și controale, bine, am văzut doar ștampila mâna bo8dal3ct utilizator și așa mai departe. Lasă-mă să văd ce informații programator a stocat interiorul superglobale despre acest utilizator, și apoi să-mi asigurați-vă că aceste date sunt din nou în interiorul SESIUNEA superglobale astfel încât programator poate re-accesa datele chiar dacă acesta a fost stabilit câteva minute sau ore în urmă. Deci, în alte cuvinte, cookie-uri, care au primit un rap rău de ceva timp din cauza nesiguranta din browsere și pot încălca într-adevăr de confidențialitate și toate astea, de fapt, ei au o mare utilitate, deoarece, fără a le v-ar fi în mod constant să vă conectați la fiecare pagina de Facebook pe care le vizitați sau fiecare e-mail Gmail-ai citit, dacă browser-ul nu avea un mod de a aminti care le-ați deja autentificat. 

Deci, în acest fel, cookie-urile sunt trimise înainte și înapoi pe firul. O altă curiozitate despre cookie-uri, mai ales aici, este faptul că acest lucru este complet în text clar. Nu e nici o criptare se întâmplă aici un fel de, și într-adevăr, eu sunt, folosind HTTP, la acest moment. Unul din momentele noastre favorite în CS50, care este de acum 2 ani în urmă, a fost în jurul valorii de timp un instrument numit Firesheep a ieșit. Aceasta a fost o bucată de software gratuit, care a fost făcută de un cercetator de securitate ca un apel de trezire pentru comunitatea să spună cât de cumplit de pus în aplicare anumite mecanisme de autentificare pe Web au fost. Deci, de ceva timp, Facebook a fost aproape în întregime de peste HTTP, HTTPS nu. Și chiar dacă nu aveți nici o idee cât de cripto funcționează, S este securizat așa că înseamnă că e cel puțin unele criptare implicate. Facebook a folosit pentru a cripta nume de utilizator și parole, dar de îndată ce te-ai uitat la dumneavoastră sau pokes mesajele dvs. sau furaje de știri, toate că a fost necriptate. Deci, a fost până la Gmail doar un an sau 2 în urmă. Orice moment autentificat, da, au folosit criptare securizată, dar, ulterior, nu au făcut. Și de ce ar putea fi? De ce să nu folosim doar criptografia tot timpul în cazuri de utilizare, cum ar fi acest lucru? Ce-i asta? Cred că am auzit ceva. [Elev] Speed. Viteza, nu? Există mai multe moduri în jurul acest lucru. Dar daca ai doar un fel de gândesc logic, dacă ai ceva cripta, ce trebuie să faci cel puțin un pic de lucru mai mult. În PSET 2 când ați pus în aplicare Cezar sau Vigenere sau chiar Crack, imprimați doar un șir este relativ usor. Criptarea și apoi imprimați un șir de minim necesită un pic mai mult de lucru. 

 Pentru site-urile super-populare cum ar fi Google și Facebook, dacă aveți de a face mai mult de lucru pentru fiecare utilizator, pentru fiecare pagina web unice pe care le vizitează, care ia doar timp CPU mai mult. Și dacă ai nevoie de timp mai mult CPU, s-ar putea avea nevoie de mai multe servere, ceea ce înseamnă că s-ar putea avea nevoie de mai mulți bani. Și așa de mulți ani acest lucru doar într-adevăr nu a fost cea mai bună practică. Oamenii ar folosi criptarea SSL numai atunci când au nevoie pentru a. Dar sa dovedit, si ca acest individ cu Firesheep facut super-clar, atunci când voi, cei care sunt in prezent pe Facebook, chiar acum - Din curiozitate, să vedem dacă vă veți fess sus. Daca esti pe Facebook, chiar acum, în unele fila, chiar dacă nu e prim-plan, este URL HTTP sau HTTPS? [Mai multe] elevii S. S? [Râsete] Bine. Orice HTTP? Doar 1? Bine. Deci, noi toți putem hack cont de faptul că tipul de Facebook chiar acum. Pentru cea mai mare parte acest lucru a devenit activată în mod implicit, cel puțin în unele site-uri web. Și poveste lungă scurt, în cazul în care traficul web nu este criptat, nu numai HTML merge înainte și înapoi de-a lungul WiFis necriptate, asa ca lucruri cum ar fi cookie-uri du-te înainte și înapoi de-a lungul aer fără nici o formă de criptare. Deci, dacă aveți doar un pic de pricepere de programare sau un pic de Googling competențelor pentru a găsi software-ul gratuit care face acest lucru, tot ce trebuie sa faci este sa stai in Starbucks sau de a sta într-un aeroport în care există, în general, e necriptat WiFi și urmăriți doar pentru cuvinte cheie, cum ar fi Set-Cookie: sau PHPSESSID pentru că dacă aveți savvy tehnică pentru a viziona doar WiFi pentru toate biți care de-a lungul fluxului de aer pentru acest model, vă pot spune apoi că PHPSESSID tipului se întâmplă să fie bo8dal și așa mai departe. Și, apoi, din nou, dacă ești suficient de vedere tehnic savvy sau au instrumentul potrivit, puteți apoi doar reconfigura propriul browser pentru a începe prezentarea pe care ștampila mână la Facebook.com, și Facebook este doar de gând să se presupună că ești tipul ăla pentru că tot ce știu nu este cine sunteți, dar că aveți acest identificator unic. Deci, dacă ai furat ca identificator unic și îl prezintă la serverul de web ca propriul dvs., acestea sunt doar de gând să-ți arăt că hrana pentru animale persoană noutăți sau că persoane mesaje sau pokes. 

Și aș Google acum cum să activați HTTPS pentru Facebook, probabil. Dar aceasta este într-adevăr la fel de simplu ca asta. Și așa Facebook si Google și ca au ajuns foarte bine la acest lucru, dar ține un ochi tot mai multe site-uri web pentru orice pe care le vizitați, care nu utilizează HTTP și au un fel de informații sensibile pe ele, fie că este vorba financiare sau personale sau plac. În cazul în care nu utilizați acest lucru, destul de posibil ca aceasta poate cookie-urile să fie foarte ușor de furat și apoi forjate, și că este exact ceea ce a făcut Firesheep. Tu nu trebuie sa fie un programator. Tot ce trebuia să faci era au o conexiune la Internet, descarcati acest instrument gratuit, și ce-ar face este autentifică și apoi vă va arăta numele Facebook toată lumea de la Sanders, în această demonstrație special, în jurul valorii de tine și tot ce trebuia să fac era faceți clic pe numele lor și software-ul automatizat procesul de sniffing că cookie, prezentându-l pe Facebook ca propriul dvs., și, voila, sunteți logat Deci, acesta este un alt una dintre cele "nu face asta" oficial. Dacă aveți rețeaua de propria casă și doriți să drege, prin toate mijloacele, dar dau seama acest lucru nu trec linia de pe un mediu universitar. 

Dar obiectivul aici este într-adevăr să subliniez, nu cum să facă acest lucru dar cum să-și apere împotriva acestor tipuri de lucruri. Și soluția banală aici, chiar dacă în sine este greșită, este de a reduce într-adevăr utilizarea oricăror site-uri care nu sunt în mod constant folosind HTTPS. Deci, site-uri ca Facebook si Google au din ce în ce căsuțele în cazul în care vă puteți înscrie pentru acest tip de lucru, și băncile au avut de ani de zile aceasta pentru motive similare. Deci, doar un pic de un factor de teamă, dacă putem. Dar asta e într-o coajă de nucă. Acesta este modul în care un server amintește cine ești. Și, de îndată ce acestea pot aminti cine sunteți, ele pot aminti nimic despre tine că programatorul a stocat în interiorul acestei superglobale special, numit $ _SESSION. Și pentru PSET 7 suntem o folosesc doar pentru a trivial aduc aminte de un int, și anume ID-ul unic al utilizatorului care a autentificat, astfel încât să știe că am fost acolo înainte. Orice întrebări, apoi pe sesiuni sau cookie-uri sau similare? Firesheep nu funcționează la fel de bine mai, și va trebui să puneți computerul într-un mod special de promiscuitate deci tu esti de fapt de ascultare pentru traficul în afară de voi înșivă. Deci, dacă sunteți descărcarea în prezent Firesheep, dat seama că nu e chiar atât de ușor așa cum a fost odata pentru a demonstra. Bine. Și nu o fac în Sanders. Fă-o la domiciliu. Baze de date. Unul dintre lucrurile pe care le-am făcut în mod deliberat foarte PSET 7 a fost vă oferim un tabel de baza de date eșantion pentru utilizatorii care are unele ID-uri de utilizator, unele nume de utilizator, parole criptate și unele aceasta. Și, după cum veți vedea, dacă nu ați făcut deja, ai de gând să aibă de a schimba masa un pic. Ai de gând să aibă de a adăuga unele cache-ul la fiecare dintre utilizatorii din acel tabel, și ai de gând să aibă de a adăuga un alt tabel istorie, un tabel de portofolii, sau sunați-l poate altceva. Dar, în ceea ce privește gândesc cum să fac asta, hai să deschidem acest instrument pe care am folosit vineri, dar daca nefamiliare, aparatul vine cu un instrument de numit phpMyAdmin, care este o coincidență scris în PHP, dar scopul său în viață, după ce am logați aici jharvard cu Crimson, este să-mi dea un mod user-friendly a vizualizarea și modificarea baza mea de date. 

Baza de date pe care am rulează pe aparatul este numit MySQL. Acest lucru este foarte popular, și este o bază de date open source care este minunat de ușor de utilizat, mai ales cu fata se termină așa. Ceea ce acest instrument permite-mi să fac, de exemplu, este de împungere în jurul valorii de mese. Lasă-mă să mergeți mai departe și de a face acest lucru. Vineri am creat un tabel numit elevilor că a fost simplu super. Ea a avut 3 coloane - id, nume, e-mail și - și am introdus manual un cuplu de rânduri cum ar fi David și Mike în acest exemplu particular. Sa luam acest bit o mai departe, și să presupunem că vrem să ne amintim mai mult decât doar numele si e-mailul despre un utilizator. Lasă-mă să faceți clic pe Structura aici, la partea de sus. Și din nou, PSET vă îndrumă prin pașii necesare aici, așa că nu vă faceți griji în cazul în care o parte din aceasta este un pic rapid. Apoi, am de gând să faceți clic pe aici. Am de gând să adăugați un numar de coloane, după e-mail pentru că vreau să adăugați ceva de genul casa. Am uitat să înregistreze casa unui student. Lasă-mă să faceți clic pe Du-te, și acum avem acest formular care, din păcate, este un pic largă de la stânga la dreapta, dar am de gând pentru a apela numele acestei case domeniu, și apoi de tip I au acum de a alege. Așa că haideți să avem o discuție scurtă despre diferitele tipuri de MySQL deoarece întrucât PHP este slab tastat si un fel de joacă rapid și pierde cu tipuri, într-o bază de date special este important să utilizați de fapt, foarte tastarea in avantajul tau deoarece unul dintre MySQL lucruri și alte motoare de baze de date se poate face pentru tine se asigura că nu pune datele în baza de date false. Aceasta este un fel de eroare de verificare liber disponibil pentru tine. 

Pentru casa am, evident, nu vreau să fie un int, care este o valoare pe 32 de biți în MySQL. Am făcut vorbi pe scurt despre VARCHAR vineri, care vine de la o lungime variabila char. Ce este asta? Acest lucru vă permite să specificați că doriți ca acest lucru să fie un șir de un anumit fel. Tu nu știi cu adevărat în avans cât timp mai este, deci vom spune un nume arbitrar casă poate fi de 255 de caractere, dar ai putea merge cu 32, 64 - orice număr cu adevărat. Dar avantajul de a folosi un varchar peste un câmp denumit caracter este ceea ce? Doar intuitiv dacă aș defila în jos aici, observați e char si e varchar. Varchar este lungimea variabilă char; Char este o lungime fixă ​​char. Deci, bazat numai pe această definiție, ceea ce e avantaj sau un dezavantaj pentru fiecare dintre acestea? Cu alte cuvinte, cui îi pasă de distincție, sau de ce ar trebui să-ți pese? 

Da. [Elev] VARCHAR are o mai mare flexibilitate, dar ocupă mai multă memorie. Bine. Varchar preia mai mult - Să vedem. Nu sunt sigur dacă am auzit acest drept. Poți să spui că, o dată mai mult? [Elev] I-am spus varchar are, probabil, o mai mare flexibilitate, dar este nevoie de mai multa memorie. Interesant. Bine. Varchar, probabil, vă oferă o flexibilitate mai mare, dar ocupă mai multă memorie. Acesta din urmă nu este neapărat adevărat. Aceasta depinde de context, dar haideți să ne întoarcem la asta. 

[Răspuns studentul neauzit] Exact. Este de fapt cazul în care char va folosi de obicei mai multă memorie deoarece un char, la fel ca în C, este ca un șir de caractere, este o matrice de caractere. Deci, dacă spui un câmp char de lungime 255, baza de date este literalmente de gând să vă dau 255 de caractere. Și dacă casa se termină prin a fi caractere Mather și 6 totală, îți pierzi peste 200 de caractere. 

Deci, un varchar eficient numai utilizările ca multe personaje în care este necesar, până la o sumă maximă. Dar prețul pe care îl plătiți este de fapt performanta, potențial. Dacă știți dinainte că toate siruri de caractere dvs. vor fi 8 caractere - de exemplu, să presupunem că aveți nevoie de parole de lungime 8 - cu capul de a folosi un câmp char ocazia, dar nu de multe ori, este de a specifica o lungime fixa de ceva de genul o parolă deoarece acum baza de date poate fi chiar mai inteligent. În cazul în care știe că fiecare domeniu char, fiecare șir într-o coloană este aceeași lungime, te întorci caracteristica de acces aleatoriu. Puteți sări în jurul valorii de între diferitele domenii char în tabelul bazei de date deoarece cred că o bază de date ca rânduri și coloane. Deci, dacă fiecare din siruri de caractere este aceeași lungime, știți că primul octet este la 0, următoarea este la 8 octet și apoi 16 și apoi 24 și așa mai departe. Deci, dacă toate siruri de caractere sunt de aceeași lungime, puteți sări în jurul valorii de mult mai eficient. , Astfel că poate fi un beneficiu în termeni de performanță, dar de obicei nu aveți luxul de a ști în avans, deci un varchar este calea de a merge. Aici e un alt detaliu care chiar a fugit în cele din urmă pe Facebook. Ints sunt mari, iar noi un fel de ele utilizați în mod implicit în orice moment ne dorim un număr, dar e doar 32 de biți. 

Și chiar dacă Facebook nu are destul de 4 miliarde utilizatori acum, există cu siguranță unele persoane de acolo cu mai multe conturi sau conturile care au fost deschise și apoi închis, și așa mai departe Facebook se cred cu câțiva ani în urmă a trebuit să tranziția de la int la, după cum este numit pe bună dreptate, bigint, care este la doar 64 de biți în loc. Deci, aceasta este de asemenea o decizie de design. Te-ar fi uimitor de norocos dacă proiectul dumneavoastră finală se transformă pornire, are 4 miliarde de euro și 1 utilizatori, da sau de a lua, caz în care utilizarea Ints ar putea fi un pic miop. Dar, în realitate, tabelul utilizatorii este, probabil, bine cu Ints. Dar pentru ceva de genul PSET 7, cum ar fi masa de istorie, s-ar putea avea mii, milioane de utilizatori, dacă evolua în etrade.com. Deci, întrucât este posibil să nu aveți mai mult de 4 miliarde de utilizatori, acei utilizatori aveți ar putea avea mai mult de 4 miliarde de tranzacții în timp - cumpără și vinde și lucruri din istoria lor. Deci, dacă tu a face anticipa - din nou, acestea sunt probleme de bun pentru a avea, dacă aveți aceste date de mult - dacă faci anticipa date care depășesc dimensiunea unui int, merge cu ceva de genul BIGINT este o direcție care nu suficient de des adoptate de către designeri pentru că oamenii cifră care nu va fi o problemă, dar e atat de usor sa alegi ceva mai mare decât atât. Zecimal suntem folosind în PSET 7, care specifică precizia fixe astfel încât să puteți evita problemele care implică flotoare și duble și imobile și similare. 

Și apoi există unele alte domenii aici. Ne vom flutura mâinile noastre la ei într-o anumită măsură. Dar datele, orele au toate un format stabilit în MySQL, și avantajul de date de depozitare ca perioadele si nu varchars înseamnă că baza de date poate reformata de fapt, le în formate diferite, dacă un format de SUA sau în format european sau ca - oricum doriți - mult mai eficient decât în ​​cazul în care au fost doar câteva generice varchar. Și apoi există unele binar altă parte, VARBINARY, blobs. Acestea sunt obiecte binare mari, și puteți stoca, de asemenea, date binare precum și a datelor geometrice într-o bază de date. Dar pentru noi, vom pasa de obicei, despre Ints și varchars și similare. Să terminăm până acest exemplu cu casa. Casa-am de gând să spun arbitrar va fi 255 caractere. Atunci valoarea implicită am putea face acest lucru. Am putea pune în mod implicit în toată lumea Mather Casa, de exemplu. Asta e modul în care am putea preciza că baza de date ar trebui să se asigure că cineva are întotdeauna o valoare. Dar las asta să fie. De fapt, pentru cei care trăiesc în afara campusului, și nu într-o casă, Poate că, de fapt vreau să precizeze că valoarea implicită pentru casa este NULL, și apoi am nevoie pentru a verifica această casetă și spune bazei de date este în regulă dacă casa utilizatorului este NULL. 

Din nou, acest lucru este un alt mecanism de apărare puteți pune în aplicare astfel încât să nu trebuie nici măcar să-l pună în codul PHP în mod necesar. Baza de date va asigura că lucrurile sunt sau nu sunt NULL. Și apoi în cele din urmă, Atribute. Niciuna dintre acestea sunt cu adevărat relevante. Binar, nesemnat - nici unul dintre cei care sunt relevante pentru un varchar. Index. Nimeni nu știe sau să vă amintiți sau au o presupunere cu privire la ceea ce este un index pentru ceva de genul casa? Acest lucru prea este de fapt o decizie de design importantă și relativ ușor. Pentru cei care încă nu au văzut-o, vineri, am vorbit pe scurt despre cheile primare. Într-un tabel de bază de date, o cheie primară este câmpul sau coloana care identifică în mod unic rânduri în tabel. Deci, în tabelul actual avem acte de identitate, avem nume și e-mailuri. Care dintre aceștia este cel mai bun candidat pentru a fi o cheie primară, Rolul este de a identifica cărui unic rânduri? Probabil ID-ul. Se poate argumenta că, am putea folosi, de asemenea, și ce dacă? Poate ai putea folosi e-mail, deoarece, teoretic, este unic cu excepția cazului în oameni sunt schimbul de conturi de e-mail. Dar realitatea este că, dacă utilizați un ID numeric la fel ca 1234, asta e doar pe 32 de biți, în timp ce o adresă de e-mail ar putea fi acest bytes in mai multe sau acest octeți multe. Deci, în termeni de eficiență pentru identificatori unici, acesta tinde să fie bună practică doar de a utiliza un int chiar dacă aveți unele candidat șir pe care le-ar putea folosi, fără îndoială. 

Pentru ceva de genul casa, acest lucru nu ar trebui să fie o cheie primară deoarece atunci numai 1 persoană ar putea trăi în Mather și 1 persoană în Curier și cum ar fi. În mod similar, acest lucru nu ar trebui să fie unic. Diferența dintre primar și unic este faptul că, în cazul de masa noastră curentă, ID-ul ar fi primar, dar de e-mail nu este principal pentru motivul am mentionat - performanta - dar ar trebui să fie încă unic. Astfel încât să puteți aplica în continuare unicitatea fără a face cererea că este un domeniu extrem de important primar. Dar asta este destul de util: Indicele. Dacă știți în avans pentru proiectul final, pentru PSET 7, sau, în general, că această casă domeniu va fi ceva ce căuta pe un lot folosind cuvântul cheie, selectați sau altceva, atunci vă pot spune preventiv baza de date pentru a lucra magia și asigurați-vă că ea creează în memorie toate structurile de date necesare fantezie să urgenteze căutări bazate pe casa. Poate că va folosi un tabel hash, poate că va folosi o listă legat. În realitate, ea tinde să utilizeze un copac, de multe ori o structura numita B-arbore - nu un arbore binar, dar un B-arbore - care este un copac foarte larg pe care le-ar putea vedea într-o clasă ca CS124, structuri de date de clasă. Dar, în scurt, nu trebuie să vă faceți griji cu privire la faptul că atunci când se utilizează software-ul de baze de date inteligente. Vă pot spune doar, "Indicele acest domeniu, așa că am posibilitatea să căutați pe ea mult mai eficient." 

Dacă lăsați acest off și să încercați să căutați pentru toată lumea în baza de date, care locuiește în Mather, acesta va involua într căutare liniară. Și dacă ai trăi cu toții studenți 6000 în unele casa, ai de gând să caute întregul tabel pentru a găsi Matherites, întrucât, dacă spui Index, să sperăm că va fi ceva apropiat de o căutare logaritmică pentru a găsi acele tipuri de studenți. Aceasta este doar o caracteristică gratuit pentru a activa, chiar dacă aceasta nu vine la un pret de o anumită cantitate de spațiu. În cele din urmă, auto-increment, acest domeniu AI, ceea ce înseamnă doar daca este un int și nu doriți să aibă grijă pentru a incrementa singur de fiecare dată când există un utilizator nou, verificați dacă, și fiecare utilizator care se introduce va primi automat un ID nou. Să faceți clic pe Salvare, iar acum hai să găsim vina cu acest design. Dacă mă duc în Navigheaza, anunțul că atât Mike și casa mea este NULL. Eu pot folosi phpMyAdmin pentru a edita acest manual. Eu pot merge în aici și tip în Mather și apoi apăsați Enter, și observați acum tabel este diferită. Dar observați aș ​​putea face altceva la fel de bine. ID-ul lui David este 1, deci phpMyAdmin din nou, este doar un instrument administrativ; acest lucru nu este ceva utilizatorii dvs. sunt niciodată de gând să văd. Deci, dacă am clic pe tab-ul SQL loc până sus - și, din nou, PSET 7 va va introduce in mai multe din aceste interogări - Eu pot executa manual SQL structurat comanda Query Language Utilizatorii UPDATE SET casa = 'Pfoho' WHERE id = 1. Aceste interogări SQL sunt, frumos destul, destul de ușor de citit de la stânga la dreapta. Actualizați tabelul de utilizatori, setați câmpul chemat la casa Pfoho în cazul în care ID-ul de utilizator este 1. Sau aș putea face chiar și în cazul în care e-mail = 'malan@harvard.edu'. Atât timp cât acest unic mă identifică, care ar lucra la fel de bine. Dar ID-ul tinde să fie mai mare de performanță, așa că hai să facem asta. Să faceți clic pe Salt. Bine, lecture.users nu există. Care e eroarea mea? Care este de fapt tabelul chemat aici? Se numește studenților doar pentru că asta e ceea ce am făcut până aici, la stânga sus. Se numește studenți, nu utilizatori. Deci, faceți clic pe Du-te acum. 1 rând afectate. Interogare a durat 0.01 secunde. Dacă aș faceți clic pe Răsfoire acum, acum trăiește în Malan Pfoho. Deci, asta e un alt gust de SQL, dar va PSET te plimbi printr-un pic mai mult de asta. 

E o decizie proastă am făcut deja aici. Aș spune că această bază de date de design este ineficientă deoarece mai multe persoane am adăuga la masa elevilor, mai mulți dintre noi am începe să adăugați, mai mult de TFS-am începe să adăugați, vom începe pentru a vedea ce disponibilizări în acest tabel? 

Da. [Elev] Văzând că este în studenți, suntem folosind aceeași [neauzit] Același - Corect, exact. Deci, dacă 400 de oameni trăiesc în Mather, da sau de a lua, în cele din urmă acest tabel va avea 400 de rânduri care spun "Mather," "Mather," "Mather," "Mather," "Mather." Ne pierdem toate aceste octeți, și există o serie de takeaways acolo. 1, nu e cazul colțul nebun în cazul în care dacă cineva plătește o mulțime de bani și redenumește Mather, acum avem de a schimba masa noastră întreaga bază de date. Asta nu se va întâmpla de multe ori, cu toate că a fost o dată Pfoho numit de Nord Casa urmă cu 15 ani, așa se întâmplă. Dar asta nu e tot ce convingătoare. Mai convingătoare decât un caz de genul asta colț de care au nevoie pentru a actualiza datele în vrac pentru o bază de date este de ce stocarea MATHER din nou și din nou și din nou și din nou? Aceasta este o mulțime de caractere, 6 caractere. Nu putem face chiar mai mult de atât, în special pentru Pforzheimer? Desigur, putem face mai bine decât faptul că multe personaje. De ce nu asociază doar cu un identificator unic pentru fiecare casa și magazin de faptul că pentru fiecare utilizator? Deci, haideți să încercăm asta. , Mai degrabă decât doar să utilizați tabelul de studenți, lasă-mă să merg până la baza de date prelegerea mea de până aici, la stânga sus. Observați aici se spune Creare tabel. Lasă-mă să creați un tabel nou, denumit de case. Numărul de coloane va fi 2. Enter. Acum am 2 domenii. Am de gând să numim această denumire, și că va fi un varchar de lungime 255, 

dar asta e destul de arbitrar. Lasă-mă să pun asta aici jos, prin convenție,. Deci, pune un ID aici. Să-i dăm în fiecare casă un identificator unic. Să-i dăm în fiecare casă un nume. Să se precizeze că identificatorul va fi nesemnate doar prin convenție, de a utiliza numai numere pozitive. Să mergem mai departe și să dea acest un auto-increment câmp pentru acum. Și nu avem nevoie de nimic altceva? Să mergem mai departe și faceți clic pe Salvare. Acum am un al doilea tabel. Observați ca o parte acest lucru este ușor criptic comandă SQL care le-ar fi trebuit să tastați manual în cazul în care nu utilizați un instrument administrativ ca phpMyAdmin. Deci, un alt motiv l-am folosi. E un fel minunat de util, deoarece pedagogic puteți să faceți clic în jurul valorii de și dau seama cum merg lucrurile doar prin copierea și lipirea ceea ce a făcut phpMyAdmin. Dar comanda CREATE TABLE este ceea ce a fost executat doar, și aici este masa mea. Lasă-mă să mergeți mai departe și de a folosi acum prime SQL, mai degrabă decât simplifica, făcând clic pe fila Inserare. Lasă-mă să-mi INSERT INTO case, și am de gând să spun numele casei este de gând să aibă o valoare de "Mather". Asta e tot. Această sintaxă este un pic mai criptic. Acesta este numele de domenii pe care vrem să inserați. Acestea sunt valorile pe care le doriți să le inserați în aceste domenii. Lasă-mă să faceți clic pe Salt. 1 rând inserează a durat 0,02 secunde. Permiteți-mi să faceți clic pe Răsfoire acum. 

Observați dacă faceți clic pe Răsfoire, nu e Mather, a cărui identitate este de automatizare numărul 1. Lasă-mă să fac alta. Lasă-mă să intru în tab-ul SQL. INSERT INTO case. Numele de casa va avea o valoare de Pfoho și așa mai departe. Du-te. Și eu pot face asta din nou și din nou și din nou. Sau, dacă te plictisești folosind phpMyAdmin, puteți folosi doar fila Inserare și nu trebuie să tastați SQL prime. Puteți să-bang-ului pur și simplu l mai rapid prin dactilografiere, de exemplu, Curier, Enter, și acum, dacă ne faceți clic pe Răsfoire, există Curier, cu un ID de 3. Deci, asta este ceea ce înțelegem noi prin auto-increment. Dar acum trebuie sa repari ceva la elevi. În ceea ce elevii ar trebui să tipul de date al câmpului casei fi acum? Ar trebui să fie un int, nu? Deci, scopul aici este să țină afară, altfel cunoscut sub numele de normalizare, tabelele astfel încât să nu stocheze informațiile redundant în oricare dintre mesele mele. Și din nou, am fost pe calea aici este de gând să spun Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, ceea ce este foarte redundante în ceea ce privește risipa de caractere. Așa că lasă-mă să merg mai departe și să schimbe acest lucru prin clic pe Structura, și lasă-mă să mergeți mai departe și să verificați pe teren casa, faceți clic pe Modificare, și acum am de gând să schimbe acest lucru să fie un int. 255 nu mai este relevant. Lasă-mă să merg mai departe și spun că e bine, dacă e încă NULL. Salvare. Acum, elevii de masă a fost modificat cu succes, și observați din nou, casa este un int. Ca o paranteza, ignora numărul în paranteze atunci când vine vorba de Ints. 

Acest lucru este pentru motive moștenite. Înapoi în ziua în care nu ai avea GUI, ai avut în schimb un mediu de linie de comandă, de 10 și respectiv 11 de caractere specificate cât de multe ar trebui să arate în fereastra de terminal pentru a afișa câmpurile de fapt. Ea nu are nimic de-a face cu o lungime pic de câmp real, asa ca vom ignora doar că pentru moment. Acum trebuie să merg în acest tabel. Și dacă David locuieste in Mather, casa nu ar trebui să fie 0, care este o int valoare implicită cea mai apropiată de NULL. El ar trebui să trăiască în casă 1. Să spunem că trăiește arbitrar Mike in Pfoho, astfel încât numărul casei 2. Acum, masa mea arata un pic mai criptic. Dar ia în considerare eficiența. Sunt folosind acum doar 32 de biți pentru a identifica casa, ceea ce înseamnă că e doar 1 definiția canonică a casa mea Mather si Pfoho și că e în tabelul case. Deci, dacă vreau să se alăture acum, aceste tabele, cred că în felul acesta. Aici am masa mea studenți, precum și pe partea dreaptă există aceste numere, 1 și 2. 1 este Mather, 2 este Pfoho. Avem acele aceleași numere din acest alt tabel, care este numit de case, 1 și 2 și 3 pentru cele 3 case. Ceea ce am acum doriți să faceți este să aibă abilitatea de a codul, PHP și SQL, pentru a sorta din aceste tabele se reunească, în cazul în care în cazul în care acestea sunt studenti, iar acestea sunt casele, vrem să combine într-un fel, astfel încât, 1 linii cu 1, 2 linii de până la 2, și astfel încât să ne putem da seama unde David și în cazul în care Mike și în cazul în care toată lumea trăiește. Pentru a face acest lucru, putem executa o interogare SQL ca următorul. SELECT * FROM studenti ÎNSCRIEȚI case ON - Și acum ce domenii vrem să adere la? Deci, students.house = houses.id. 

Un pic de criptic, dar această parte înseamnă a crea literalmente un tabel nou temporar asta e rezultatul de a se alătura studenți și case. Și cum vrei să combine sfaturi de degetele mele aici? Setați câmpul "casa egal la casele" studenților câmpul ID. Și dacă eu acum faceți clic pe Start, mă întorc exact ceea ce am sperat sa. David este în Mather, Mike este în Pfoho, și văd, de asemenea, identificatorii unici. Dar ideea e ca acum am un tabel complet. Și astfel Takeaway aici pentru PSET 7 sau într-adevăr pentru proiectul final: Dacă găsiți că te stoca orice bucată de informație redundant, indiferent dacă este o casă, poate e un oraș, de stat, și ZIP în cazul în care ZIP poate de obicei, dar nu întotdeauna folosit ca un identificator unic, merg prin exercitarea mental și apoi cu ceva de genul phpMyAdmin de factoring faptul că datele comune, deoarece mai ales ca site-ul dvs. devine mai bine utilizate și mai popular, acest lucru este modul în care vă asigurați că totul este super rapid, prin acordarea baza de date ca indicii mai multe cu privire la unicitatea posibil. Asta a fost o foarte mult. Alte întrebări? Bine. Să luăm o pauză de 5 minute acolo și să se regrupeze. Bine. Următorul este un exemplu care a fost utilizat câțiva ani în urmă, când am luat CS161, care este de operare clasa sistemelor de la colegiu care este cunoscut pentru a fi uimitor, dar o cantitate nebun de muncă, și se concentrează într-adevăr pe unele dintre problemele de nivel inferior care apar în sistemele de operare și, de asemenea, chiar și în lumea bazelor de date. 

Povestea care a fost spus de catre profesorul meu, Margo Seltzer, acest an a fost, după cum urmează. Să presupunem că aveți un frigider cămin pentru tine si colegul tău de cameră și atât de vă place foarte mult lapte. Deci, ai venit acasă de la clasa-o zi, colegul tău de cameră nu este încă acolo, vă deschideți frigiderul, si iti dai seama, "Oh, la naiba, nu mai avem lapte." Deci, ce închideți frigider, mergi peste drum la CVS și de a lua în liniile lungi pentru a cumpăra tot mai mult lapte de la CVS. Între timp, colegul tău de cameră vine acasă de la clasa lui sau ei, intră în cameră, se deschide frigiderul care doresc într-adevăr niște lapte, deschide frigider și, "La naiba, nici lapte." Deci, el sau ea se închide frigider, iese pe ușă, și se duce la SOA sau în altă parte decât în ​​cazul în care CVS nu sunteți de gând să ciocniți unul de altul să-mi iau niște lapte. Desigur, câteva minute mai târziu, amândoi te întorci acasă și acum aveți lapte de două ori la fel de mult ca tine, de fapt vrut. Și fiind lapte, acum o să meargă prost, deoarece iti place laptele dar tu nu place foarte mult lapte, așa că acum ai prea mult lapte, asa ca va acru. Aceasta este o situație îngrozitoare, îngrozitoare. Ce ar fi putut rezolva această situație dificilă, dacă erai acasă colega de camera mai întâi? Da. [Elev] Tu ar trebui să fi lăsat o notă. [Râsete] Bine. Tu ar trebui să au lăsat o notă. Tu ar fi trebuit să o notă post-it sau cum ai spune, "Gone pentru lapte," și apoi colegul tău de cameră conceptual ar fi fost blocat de a face, de fapt asta. Sau ai putea merge 1 pas mai departe. Ai putea bloca literalmente frigider cu un fel de lacăt, și acum colegul tău de cameră va fi literalmente blocat din frigider. Dacă ne generaliza înapoi la programare, vă puteți gândi aproape de frigider, un fel de variabilă sau o struct, un fel de containere de informații. Problema fundamental aici este că amândoi au fost permis să inspecteze sau de a citi starea de această structură de date, dar l-ați văzut și în momente diferite și totuși atât de tine luat o decizie bazată pe starea lumii de la acele momente diferite în timp. Deci, v-au blocat frigider, v-ar fi de cel puțin evitat colegul tău de cameră de a fi fost în măsură să inspecteze starea lumii, astfel încât el sau ea nu ar fi putut face aceeași decizie. Deci baze de date, după cum se vede, au această problemă în mod constant. 

Să vedem dacă putem construi un scenariu. Să presupunem că ești un fel de un tip rău și te duci la Bank of America sau unul dintre celelalte locuri în pătrat, care au o latură tânăr ATM-uri de o parte, și cumva ai dat seama cum a duplica un card de ATM-uri - nu tot atât de greu. E doar o bandă magnetică. Și ce doriți să încercați să faceți este să joci acest joc prin care ai pus 1 carte în 1 masina, o altă carte în altă mașină, și tu în esență, doriți să încercați pentru a retrage bani în același timp, deoarece ne imaginăm că povestea merge, după cum urmează. Mașina pe partea stângă ia cardul dvs. și PIN-ul, si apoi spui, "Dă-mi 100 de dolari." ATM este programat să facă mai întâi o selectați în baza de date sau echivalent - orice bază de date este folosirea - pentru a vedea acest utilizator are cel puțin 100 de dolari in contul lui sau a ei? Dacă este așa, atunci scuipe afară 100 dolari și 100 dolari scade de la echilibrul lor. Dar, desigur, în cazul în care există mai multe masini aici sau mai multe moduri de control al starea de acea lume, seif bancar, pentru a vedea cât de mult bani ai, să presupunem că doar din întâmplare mașina pe stânga și dreapta ambele cere această întrebare, la aproximativ același moment în timp. 

Și acest lucru se poate întâmpla cu siguranță. ATM-urile sunt computere aceste zile. Deci, dacă mașina pe partea stângă spune, "Da, ai cel puțin $ 100," Între timp mașina pe dreapta spune, "Da, ai cel puțin $ 100," apoi amândoi proceda pentru a termina programele lor și de fapt scuipa 100 dolari și spun, "ai avut Anterior 200 de dolari." "Lasă-mă să actualizeze variabila a fi acum 100 dolari rămas în cont." Dar dacă amândoi au verificat soldul contului dvs. și am constatat că e 200 dolari și ambele le fac, atunci matematica si spun 200 la 100, mașinile au scuipat potențial în două proiecte de lege 100 $ in fiecare mașină, dar le-am actualizat numai soldul contului suma intre a fi de $ 100. Cu alte cuvinte, ați scos 200 de dolari, dar pentru că inspectat starea lumii simultan și apoi a luat o decizie bazată pe această valoare, ei nu s-ar putea face în cele din urmă matematica corect. Deci, într-o situație prea bancă într-adevăr doriți să aveți un fel de blocare astfel încât, imediat ce v-ați verificat starea unor variabile asta e foarte important, la fel ca soldul contului dvs., nu lasa pe nimeni altcineva să ia decizii bazate pe faptul că până când se realizează faci lucrul tău, în cazul în care, în acest caz, vă aflați ATM pe partea stângă. Bloca toată lumea afară. Puteți obține de fapt, acest efect în câteva moduri diferite. 

Cel mai simplu mod de la MySQL este o linie de SQL care v-am dat în caietul de sarcini problema set care arata exact ca asta. Introduceți în tabelul - orice se numește - un id, un simbol, și o cotă de, un număr de acțiuni, următoarele valori, de exemplu. Dacă nu ați citit încă spec., acesta este un exemplu care implică cum te duci despre 10 parts cumpararea de acest stoc penny pentru președinte Skroob, ID-ul de utilizator al cărui întâmplă să fie numărul 7? Acest lucru spune INSERT INTO tabel id-ul următor, simbol, și numărul de acțiuni de 7, "DVN.V", și 10. Dar - dar, dar, dar - a doua linie este unul important. ON dublu exemplar parts CHEIE UPDATE = parts + VALORI (actiuni). Deci, totul criptic-se uită la prima vedere. Dar faptul că această interogare SQL, chiar dacă se încadrează pe 2 linii, este de 1 interogare lung, aceasta înseamnă că este atomică în sensul că această interogare va fi fie executat împreună sau deloc. Și, prin definiție, de MySQL, care este modul în care au pus în aplicare această interogare. Acesta este, prin definiție, în manualul garantat de a executa toate la o dată sau deloc. Motivația pentru aceasta este, după cum urmează. În cazul în care, în acest caz, încercați să cumpere 10 parts de stoc, e un fel de poveste la fel ca laptele, e un fel de poveste la fel ca ATM-uri. 

Dacă ați făcut greșeala de a nu folosi acest sintaxă ci selectarea din baza de date pentru a vedea câte acțiuni ale acestui stoc penny Președintele are Skroob avea, și să presupunem că el are 10 acțiuni, și apoi unele fracțiune de secundă mai târziu, ai face apoi o declarație UPDATE, care este o altă declarație, în SQL care spune merge mai departe si se adauga 10 mai multe acțiuni la 10 sa actuală, astfel încât în ​​mod ideal, totalul este de 20, Problema este că în sistemele de baze de date de astăzi și pentru că în computere de astăzi aveți mai multe procesoare, miezuri multiple - cu alte cuvinte, computerele pot face literalmente mai multe lucruri în același timp - nu există nici o garanție că dvs. SELECT și UPDATE dumneavoastră în acest caz, sunt de gând să se întâmple spate în spate. Deci, un scenariu rău ar fi să faci SELECT pentru a vedea cât de multe acțiuni ale acestui stoc Penny are Skroob are, și apoi doar prin noroc altă interogare bază de date este executat - Poate Skroob în altă fereastră a browserului încearcă să cumpere 10 parts într-o altă fereastră cu totul, la fel ca ATM - și să presupunem că o altă interogare devine între SELECT și UPDATE. Acesta ar putea fi cazul în care Skroob pierde acum un numar de actiuni deoarece un alt proces de control este starea lumii sale, sau el devine mai multe acțiuni decât ar trebui să aibă. Nu vom intra în detaliile exact ceea ce aceste linii speciale poveste ar fi, dar ideea este, dacă aveți pentru a verifica o valoare variabile și apoi să ia o decizie, în cazul în care există un risc de altcineva face ceva în între aceste două situații, cum se poate întâmpla în sistemele multiprocesor, în sistemele multicore, calculatoare cu capacitatea de a face mai multe lucruri în același timp, se poate întâmpla lucruri rele cum ar fi conturile bancare fiind debitată incorect, cumpararea de lapte de două ori la fel de mult, sau, în acest caz, un număr greșit de acțiuni. Dar există o cale mai ușoară de a gândi despre asta. 

Se pare că SQL sprijină, de asemenea, dacă vă configurați tabelul în mod corect, ceva numit tranzacții, pe care aș argumenta este, de fapt chiar mai ușor de înțeles decât aceasta, dar nu este un 1-linie, asa ca este de fapt un pic mai implicat. Există literalmente o declarație, în SQL numit TRANZACTIE START. Doar ca acolo este SELECT, UPDATE, INSERT, DELETE, și să se alăture și o grămadă de alte persoane, există cuvinte cheie, cum ar fi TRANZACTIE START. Și ce-ai făcut, apoi, în contextul PSET 7 - nu trebuie să faci asta pentru PSET 7; este în mod explicit negat ca nu este necesar, dar pentru proiectele finale poate fi util - Dacă apelați o interogare de tranzacție START și apoi altă interogare și apoi altă interogare și apoi alta, alta, și alta, aceste interogări nu vor fi de fapt executat până când suna declarația SQL COMMIT, moment în care, fie că este vorba 2 declarații sau declarații 20, acestea vor fi executate toate dintr-o dată, ceea ce înseamnă că nimeni altcineva nu poate cumpăra accidental prea mult lapte sau de debit prea multi bani sau cumpara actiuni prea multe, deoarece toate întrebările dvs. vor executa spate în spate la spate în spate. Și acest lucru este extrem de important, mai ales atunci când faci ceva de genul asta. Acesta este un exemplu arbitrar care spune că haideți să actualizați contul bancar prin stabilirea unui echilibru egal cu soldul - $ 1000 în cazul în care numărul de cont este 2. Și apoi a doua declarație este acum să depună că 1000 dolari în al altcuiva cont bancar al cărui număr de cont este 1. 

Cu alte cuvinte, acesta este un exemplu perfect de unde doriți să vă asigurați că faptul că ambele aceste declarații se întâmple sau nu, la toate deoarece în caz contrar clientul va fi înșurubată și ai de gând să ia banii lor și să nu-l depună în altă parte, sau banca urmeaza sa se înșurubează în cazul în care ai de gând să depună banii dar nu scade de fapt din contul utilizatorului. Deci, vrei amândoi să execute împreună. Astfel, intră în tranzacțiile mondiale. Așa că e ceva de a păstra în partea din spate a mintea ta, nu atât de mult în scopul de doar un proiect final, dar dacă doriți să luați proiectul final undeva, dacă doriți să porniți o companie în jurul valorii de ea, dacă doriți să rezolvați problema un grup studentului în campus si de fapt au un site viu, activ, acestea sunt un fel de bug-uri subtile, care pot apărea daca nu crezi destul prin ceea ce se poate întâmpla în cazul în care 2 persoane încearcă să acceseze site-ul dvs. la literalmente același moment în timp, prin care interogările lor ar putea fi altfel întrețesut. 

Gata pentru unele JavaScript, un teaser al acestuia? Aceasta este limba noastră pentru ultima semestru. Bine. Din fericire, JavaScript pare foarte, foarte, foarte asemănătoare cu cele 2 limbi, C și PHP, am făcut până acum. Nu e nici JavaScript în PSET 7, dar este un instrument incredibil de util atunci când vine vorba de a face web-based proiecte finale sau de fapt doar programarea web, în ​​general, mai mult. Deci, o privire de ansamblu rapidă a ceva numit DOM. Aici este o pagina de web super-simplu, care de fapt doar spune salut, lume atât în ​​titlu și în organism. Așa cum a fost indentarea sugerând de ceva timp, există într-adevăr o ierarhie a paginilor web. Aș putea desena acest fragment de aceeași HTML ca un copac, gândire înapoi la discuțiile noastre de structuri de date în C, după cum urmează. Am niște nodul rădăcină special numit nod documentului, și vom vedea analog de acest lucru în JavaScript într-o clipă. Primul copil și singurul copil al că, în acest caz este tag-ul HTML. Nu e nici o mapare directă a DOCTYPE. Asta e un lucru deosebit, așa că ar trebui să ignorăm pur și simplu atunci când vine vorba de acest DOM, acest Document Object Model de copac. Observați că tag-ul HTML, pe care l-am descris arbitrar ca un dreptunghi, are 2 copii: cap și corp. 

Acestea sunt în mod similar desenate ca dreptunghiuri. Este semnificativ faptul că pictural capul este la stanga a corpului. Implicația este că șeful este pe primul loc în copac. Deci nu e de fapt o comanda pentru un copac, atunci când se desena ca aceasta, chiar dacă formele și fleacuri sunt arbitrare. Cap are între timp un singur copil numit titlu, și titlul de fapt, are copil propriu, care este "Hello, World", care l-am desenat în mod deliberat ca un oval aici pentru a face ușor diferite de dreptunghi. Aceste dreptunghiuri sunt elemente, întrucât salut, lumea este într-adevăr un nod de text. Deci e un nod în arbore, dar e un alt tip de nod asa ca am desenat arbitrar diferit. În mod similar are corp au un copil numit salut, lume, ca și, nod atât de diferite, chiar dacă ele sunt coincidență același text, dar l-am desenat folosind aceeași formă. Deci, cui îi pasă? Ei bine, ce e frumos despre HTML este faptul că are această natură ierarhică. Și ce e frumos despre JavaScript și, în special bibliotecile, care sunt disponibile în mod liber și populare, precum jQuery, puteți naviga structura de arbore atât de uimitor de ușor. Oricare dintre lucrurile am făcut în C cu pointeri si copaci care traversează și recursiune pe noduri copil la copil la stânga dreapta, toate dintr-o dată, putem sorta de lua pentru a acordat ca fiind uimitor de edificator, dacă nu un pic frustrant dar nu de aproape un mod eficient de a merge despre programare. Și astfel, cu aceste limbi de nivel superior, cum ar fi JavaScript vom fi capabili de a naviga pe acest copac mult mai intuitiv. 

Și într-adevăr sintaxa va fi destul de familiar. Dacă nu ați mai văzut înainte de JavaScript, aceasta este o referire foarte frumos de la cei de Mozilla, oamenii care fac Firefox, deci nu ezitați să răsfoiți că, la confortul dumneavoastra. Ce veți găsi - și aceste diapozitive sunt identice cu ceea ce am folosit altă zi - În mod similar, principal este plecat. Deci, atunci când scrie un program în JavaScript, nu există nici o funcție principală. Începi doar scrierea de cod. Dar o distincție esențială între JavaScript și C și PHP este faptul că în timp ce C si PHP până în prezent au fost executate partea de server de aparat, în acest caz, sau mai mult, în general, de către un server, JavaScript design este, de obicei, executate de un browser. Cu alte cuvinte, s-ar putea scrie cod JavaScript, ca suntem pe cale de a, pe un server din aparat, dar îl include, printre HTML, CSS-ul printre, printre GIF dumneavoastră și PNGs dumneavoastră și JPEG dvs. astfel încât atunci când utilizatorul vizitează pagina de web, dacă utilizați JavaScript, cod JavaScript care vine de la server la browser-ul, și este browser-ul pe care de fapt le execută. Deci, acest lucru are implicații semnificative pentru proprietatea intelectuală, chiar. E un fel de prostie să se gândească chiar și despre protejarea IP-ul atunci când vine vorba de cod JavaScript deoarece prin natura limbajului este executat, de obicei, partea de browser-ul. 

Puteți să-l eclipsa, ceea ce înseamnă că poate face sa arate nebun și urât cu nici un spațiu, nume de variabile, oribile pentru a face mai greu pentru oameni să fure IP-ul, dar cheia este că acesta este executat partea browser-ul. Chiar dacă în calitate de partea de server deoparte JavaScript poate fi utilizat, caz de utilizare cel mai frecvent acum este încă în browser-ul. Și aici e ceea ce pare. Aici este un if-else if-else construi la fel ca C, la fel ca PHP. Aici este o expresie booleană, atunci când "sau" 2 lucruri împreună. Aici este atunci când "și" 2 lucruri împreună. Aici este o declarație comutator, care este similar cu PHP în care aveți posibilitatea să comutați pe tipuri diferite de valori. Bucle similar pentru bucle au aici, care sunt structurate identic cu ceea ce am văzut până acum. În timp ce buclele, ne-am luat în timp ce facem bucle. Variabile, vreodată atât de ușor diferită. Tu nu declara variabile, cum faci în PHP și C, dar în mod similar este JavaScript slab tastat. Tu nu specifică int sau float sau string sau ceva de genul asta de obicei. Puteți specifica var. Nu trebuie să specificați var, dar are implicații dacă nu o faci. De obicei, în cazul în care se omite var, creați accidental o variabilă globală în loc de locale. Așa că lasă-mă să propun ca aproape întotdeauna spune doar var și apoi numele variabilei. Nu e un tip, e doar var pentru variabila. Acest lucru ar fi un exemplu, fie că este vorba 123 sau "Hello, World". Matrice sunt prezente și sintactică similar cu PHP. Eu voi spune numerele de var și apoi am folosi paranteze pătrate din nou pentru a declara o variabila al cărui tip este matrice care are aceste numere speciale din aceasta separate prin virgule. Și apoi în cele din urmă, aceasta este singura care într-adevăr arată diferit. Reamintim că, în PHP ne-ar fi pus în aplicare un tablou asociativ pentru un student ca Zamyla care ar putea arata ca aceasta, în cazul în care variabila este numit elev. Parantezele pătrate înseamnă aici vine o matrice. 

Faptul că eu nu sunt, folosind indici numerici, dar siruri de caractere - id, casa, și numele - înseamnă că aceasta este o matrice asociativ, iar aceste săgeți cu semnul egal și suport în unghi înseamnă că-cheie este "id", valoarea este 1; cheie este "casa", valoarea este Winthrop Casa; cheie este "numele", valoarea este Zamyla Chan. Deci, nu e 3 chei în interiorul acestui tablou asociativ, fiecare dintre care are propria valoare. Am văzut că, în PSET 7, sau în curând va fi, în aceeași idee JavaScript, dar o să arate ca asta. Elev așa var - nici un semn dolar și nici o mențiune de tipul încă, dar var - egali și apoi deschideți acolade deoarece în JavaScript atunci când aveți perechi cheie valoare, te folosi de fapt ceva numit un obiect. Iar cei dintre voi care au luat APCS sau ca s-ar putea aminti obiecte din Java sau limbile similare. JavaScript nu este Java, în primul rând. A fost o decizie deliberată de proiectare ani în urmă pentru a înfiripa ceva care a fost populară, numele său, chiar dacă nu are nici o legătură fundamentală să se Java. JavaScript are obiecte, și le creați prin notația bretele cret. Obiectele din JavaScript sunt destul de mult echivalente cu tablouri asociative în PHP atunci când vine vorba de stocare a datelor din interiorul ei. 

Dar chiar și mai puternic în JavaScript se poate asocia foarte ușor funcțiile în interiorul unui obiect, și deși puteți face acest lucru în alte limbi, este destul de o paradigmă comună, așa cum vom vedea. Pe scurt, acest obiect reprezintă un student, care este deosebit de Zamyla, și este similară conceptual, doar punct de vedere sintactic diferit de aceasta. Să folosim de fapt, într-un fișier JavaScript. Se pare că nu e un tag scenariu. Am văzut o etichetă stil și am văzut alte etichete HTML. Tag-ul script-ul de fapt, va conține un cod JavaScript. Lasă-mă să intru în aparatul în cazul în care avem un cod sursă pre-a făcut. Eu nu l-am postat pe site-ul încă, dar voi face că, după clasă. Să deschidem asta, blink.html. Înapoi în anii 1990, a fost literalmente o etichetă HTML tag-ul numit clipi, iar aceasta a fost una dintre cele mai minunat etichetele Overused pe internet , prin care te-ai vizita unele 1990 pagina web stilul și începe să vedeți textul intermitent iti place acest lucru, rezultatele tag marchiz, care a textului merge așa. Una dintre cele câteva ori în cazul în care lumea a convenit, de fapt pe un standard de web, toata lumea bord ucis tag-ul clipire câțiva ani în urmă. Dar putem reînvia cu Javascript ca o demonstrație a puterii aveți când poți scrie un program în interiorul unei pagini web. În primul rând haideți să săriți peste lucruri noi și să se concentreze doar pe cea veche. 

Aici este lucruri vechi, în acest exemplu. Am o eticheta HTML, un tag cap, și o etichetă titlu. Atunci am un tag-ul body aici cu un div, care amintesc este doar o divizie dreptunghiulară a paginii care I-am dat un ID unic arbitrar de "salut" la, doar ca am un mod de a unic referindu-se la aceasta, care are un text foarte simplu: salut, lume. Acum, lasă-mă să derulați până la partea de sus a acestui fișier și să vedem ce mai e nou. Primul lucru pe care-i partea de sus pana nou este tag-ul script-ul, și în interiorul tag-ul script-ul anunțul am declarat o funcție. Pentru a declara o funcție în JavaScript, destul de asemănătoare cu PHP, se scrie funcția literalmente apoi numele funcției, între paranteze, și, poate, unele argumente în cazul în care este nevoie de orice. Apoi am bretele meu cret, ca de obicei, iar acum avem un cod ușor nou, dar să vedem ce înseamnă acest lucru. Deci div var, aceasta înseamnă doar da-mi un div variabilă numită. Aș fi putut să-l numit foo, dar am vrut să fie numit div pentru motive care vor fi clar într-o secundă. Apoi, se pare în JavaScript - și aceasta este codul JavaScript inglobate in pagina mea web - există o variabilă specială la nivel mondial de soiuri numite documentului. JavaScript este, de fapt, un limbaj orientat pe obiect. Nu vom intra în detalii în 50 la ceea ce înseamnă că, dar de acum știu că un obiect este destul de mult ca o struct. Ca și cum am văzut drumul înapoi, atunci când într-una dintre cele mai vechi probleme stabilește în cazul în care am pus o mulțime de informații într-un struct, În mod similar se documenteze o struct special care vine cu browser-ul, vine cu orice pagină de web. Nu e ceva ce am creat. În interiorul acestei structuri document, deși, nu ai numai de date dar aveți, de asemenea, funcții. 

Și de fiecare dată când aveți o funcție în interiorul unei structuri, în interiorul unui obiect, se numește o metodă. Dar e același lucru. O metodă este o funcție care se întâmplă să fie în interiorul a altceva. Deci, aceasta înseamnă că această variabilă de construcții la nivel mondial numit documentul are o funcție numită getElementById care face literalmente asta. Acesta te va un element din DOM, Document Object Model de copac, căror ID-ul este în acest caz salut. Cu alte cuvinte, în tot acest timp ne-am petrecut pe structuri de date intră în joc aici. Această imagine a unei DOM pe care am avut-o clipă în urmă, chiar dacă pagina este un pic diferit, în cazul în care am avut un div în această imagine, document.getElementById ce se va întoarce la mine ar fi efectiv un pointer la dreptunghiul în copac, o referire la dreptunghiul în copac. Deci, asta e ceea ce inseamna de a apela efectiv una dintre aceste funcții. În acest caz, din nou, e un div. Nu e un organism sau un titlu. Deci, haideți să vedem ce-am apoi face cu acest div acum că l-am avea în interiorul acestui div variabilă numită. Se pare cu JavaScript trebuie abilitatea de a tweak CSS a paginii dvs. de dinamic. Până acum, toate CSS le-am făcut, deși limitată, este în atributele de stil, sau unde altundeva am pus CSS? Am facut un fel de rasfatata că unul. În tag-ul de stil de la partea de sus a fișierului. Sau locul al treilea a fost în? 

Un fișier extern, ceva. CSS. Deci, acestea sunt cele 3 locuri care le-am făcut până acum CSS, dar captura este codat greu ne-am tot. Te-ai decis ca ai scufundat în PSET 7, ne-am decis înainte de prelegere ce CSS noastră ar fi. Dar, dacă doriți să modificați CSS-ul, puteți face de fapt, că Odată ce aveți un limbaj de programare actuale. CSS, HTML - limbi de programare, nu. JavaScript este. Deci, se dovedește că, de îndată ce aveți unul dintre aceste dreptunghiuri din copac numit DOM, aceasta are ea însăși unele date conținute de acesta. Deci div pe care am apucat din copac a ceea ce vom numi o proprietate în interiorul de ea numit și stil, precum și proprietatea stil are în sine o proprietate numită vizibilitate. As vrea sa stiu acest lucru numai prin căutarea unui manual de utilizare CSS lui. Se pare că nu e o proprietate de vizibilitate CSS care face ceea ce spune. Se face ceva vizibil sau nu, vizibile sau nu. Și cum faci asta este aceasta. Eu cer programatic, dacă vizibilitatea acestui div este ascuns, ce am schimba-l la? Vizibil. Altfel daca vizibilitatea acestei pagini nu este ascuns, în mod logic eu nu fac ascuns. Nu am nici o idee de ce e vizibil și ascuns și nu este vizibil și invizibil. Aceasta a fost o decizie proastă de design de-a lungul drum. Dar acestea sunt într-adevăr opuse in CSS: vizibil și ascuns. Toate acestea nu înseamnă schimbarea este CSS dosarul meu pe și în afara, pe și în afara pentru că div special. Dar, din nou, aceasta este o funcție numită clipire. Atunci când este funcția de clipire a sunat? Se pare că există o altă fereastră de construcții la nivel mondial variabilă numită, similare în spirit documentul, dar întrucât documentul se referă la pagina dvs. de internet, cum ar fi arborele DOM, HTML pe care a trimis de pe server, Fereastra se referă la Chrome jurul lui, bara de adrese, bara de titlu, și toate aceste lucruri în jurul valorii de pagina dvs. web. 

Și se dovedește că obiectul are o fereastră în interiorul funcție specială a fost numită setInterval care face ceea ce spune. Acesta va stabili un interval - în acest caz, la fiecare 500 de milisecunde - și, să ia o presupunere, ce se va face la fiecare 500 de milisecunde? Se va executa funcția pe care clipesc. Și ce e frumos aici este că am fi putut face acest lucru în C, chiar dacă n-am făcut-o. C are ceva numit pointeri la functii în cazul în care vă puteți trece în jurul valorii de funcții ca argumente. În mod similar, în JavaScript poate sa treci numele unei funcții într-o altă funcție. Și observați ceea ce fac. Eu nu fac asta. Dacă am pus între paranteze, după clipire, care ar însemna apela funcția clipire. Dacă le-am omis, înseamnă că aici este funcția Reducere ochi astfel încât setInterval pot numi fiecare 500 de milisecunde. Deci, rezultatul final, deși este atroce, este că, dacă mă duc în localhost și du-te la blink.html, Acum am acest lucru se întâmplă din nou și din nou. Și dacă am Controlați fapt Element, să vedem dacă putem vedea acest lucru. Lasă-mă să Controlați Rezistenta, lasă-mă să defilați în jos doar un pic, lasă-mă să aleg Elemente de aici, și observați în interiorul DOM de inspector Chrome. Este literalmente schimba înainte și înapoi, la fiecare 500 de milisecunde. Dacă mergem la prietenul nostru Nate, daca te-ai intrebat vreodata cum se lucrează, idee similară cu un interval, dar Nate este de a face de fapt, utilizarea foarte eficientă a culorilor, în acest caz particular aici. Deci, ce mai putem face de fapt cu asta? Să deschidem un alt exemplu și să încercați ceva asta e programatic chiar mai util decât a face lucruri clipi. Lasă-mă să intru în directorul nostru forme de astăzi și du-te în form0. Aceasta a fost cea mai urâtă formă posibilă pe care am putea veni cu, și lasă-mă să arate doar tu cum arată într-un browser. 

Lasă-mă să intru în localhost / forme, iar acest lucru este form0. Aceasta este o formă super-urat HTML care are câteva domenii pentru e-mail, parola, parolă, iar apoi o casetă de selectare putin de acord cu unele termenii și condițiile. Captura este dacă am vizita acest formular și nu vreau să-ți dau adresa mea de e-mail, Nu vreau să fiți de acord cu termenii și condițiile, poate, am posibilitatea să faceți clic Inregistreaza-te si ma lasa sa patrunda oricum. Acest lucru se întâmplă să prezinte un dosar prost PHP numit dump.php. Tot ce face este imprimați conținutul $ _GET doar pentru scopuri de diagnosticare. Asta a fost ceea ce a fost prezentat de catre utilizator chiar acum. Dar să presupunem că avem de fapt nevoie pentru a valida depunerea formularului utilizatorului. Lasă-mă să intru în versiunea 1. Acest lucru este form1.html. Se pare punct de vedere estetic la fel de rau, dar observați cât de fantezie este. Dacă aș faceți clic pe Register, fără a cooperat, mă țipat la. "Trebuie să furnizați adresa ta de email." Bine. Așa că lasă-mă să încerc asta. Deci, malan@harvard.edu. Nu am nevoie de o parolă. Inregistreaza-te. "Trebuie să furnizați o parolă." Bine. Așa că am va furniza o parolă de purpuriu. Inregistreaza-te. "Parolele nu se potrivesc." Trebuie să tastați acum aici Crimson. Am verificat asta accidental. Inregistreaza-te. "Trebuie să fiți de acord cu termenii și condițiile." Bine. Sunt de acord acolo. Inregistreaza-te. Și acum îmi arată de ieșire de diagnosticare acolo. 

Deci, ce sa întâmplat? Am avut această capacitate de a valida completarea de formulare. De fapt, dacă ai făcut-o arunca cu capul în PSET 7, există o funcție cer scuze care o face destul de ușor să țipi la utilizator, cu un mesaj pe ecran. Sunt folosind un mecanism ușor diferit, funcția de alertă, care nu este o funcție care este zambit la, deoarece ea face mesaje foarte urâte de utilizator. Dar hai sa vedem ce fac aici. Acest lucru este form1.html, și observați că am ceva sintaxa destul de familiare: tag-ul body, tag-ul formă, atributul de acțiune, atribut metodă. Dar observați I-am dat forma mea un ID unic pentru comfortul. Apoi am primit un e-mail câmp al cărui tip este text, un câmp al cărui tip parolă este parola, câmpul de confirmare al cărui tip este parola, și apoi o casetă de selectare al cărui nume este de acord aici, tip este caseta. Și apoi am luat un buton submit. Dar observați în partea de sus ce mai am. În primul rând, există o altă utilizare a tag-ul script-ul. Dacă aveți un cod JavaScript într-un alt dosar, la fel ca și cu CSS îl puteți include. Și tu faci asta cu sursa scenariul, iar apoi observați eu sunt conectarea aparent pentru a googleapis.com la o cale foarte lungă, dar a cărui nume de fișier se termină în jquery.min pentru minim js.. jQuery este o bibliotecă super-popular pentru JavaScript, care face tocmai JavaScript toate mai user-friendly pentru a utiliza. A devenit efectiv un standard de facto. Deci, chiar dacă ceea ce sunteți pe cale de a vedea nu este pur JavaScript în sine, este o bibliotecă de pe partea de sus a JavaScript mult ca biblioteca CS50 este un strat pe partea de sus a scăzut nivel de cod C, realitatea este aproape oricine de pe Internet îl folosește. Deci, acestea nu sunt roți de formare. Aceasta este doar cea mai bună practică în aceste zile. Acum, observați mai jos, care este tag-ul script-ul meu propriu, și observați ce am făcut aici. Se pare că jQuery face ceva un pic de lux. JavaScript are semne dolar, dar ele sunt lipsite de sens. 

Ele sunt ca litera A sau B sau C. jQuery a adoptat pur și simplu convenție sau un fel de cerere pus la faptul care va fi simbolul $ lor speciale. Asa ca imediat ce vă încărcați acest fișier JavaScript la nivel mondial până aici cu tag-ul script-ul, aveți acces la o variabilă globală special care se numește $. Se mai corect numit jQuery, dar asta nu arata aproape la fel de sexy ca $. Dar nu are sens $ specială. În PHP a avut semnificație specială. A trebuit să-l aibă în fața unei variabile. Acesta este doar un lucru sexy, care au luat pe. Ce se întâmplă aici? Observați Sunt trecerea la funcția jQuery mea documentul globală este variabilă si apoi am sunat. gata. Ce jQuery în esență, nu este că vă permite să luați unele lucruri de vanilie JavaScript ca obiect document, obiect fereastră, și dacă-l treci in pentru a functiei jQuery - și din nou, să fie clar, aceasta este o funcție numită jQuery - ceea ce face este să revină la o versiune specială a documentului care are o funcționalitate mai mare asociate cu aceasta. Deci, în primă JavaScript nu există nici o funcție gata, dar dacă treci document la funcția jQuery în primul rând, se revine la o versiune specială a obiectului documentului care are mai multe caracteristici de lux. Și de aceea oamenii place. Ea doar face lucrurile mai ușor de făcut, așa cum suntem pe cale de a vedea. Deci, ce înseamnă această linie de cod înseamnă? Această linie de cod aici înseamnă că atunci când documentul este gata - cu alte cuvinte, odată ce browser-ul este terminat de citit acest top fișier în jos - mergeți mai departe și să execute următoarea funcție. Ce e cu adevărat interesant în JavaScript - și PHP are acest, precum și - este funcții anonime. În JavaScript se poate declara functii care nu au nume, dar acestea nu au un corp. Observați ce se întâmplă aici. 

Aceasta este o funcție numită gata, si inseamna doar procedați în felul următor atunci când întreaga pagină web este gata, atunci când totul a fost citit de la server. Ce vrei să faci? Vreau să execute o bucată de cod. Observați că nu vrem să execute acest cod imediat. Dacă am omis acest lucru, aceasta ar însemna imediat începe executare a acestor linii de cod. Dar faptul că am spus nu, nu, nu, înveliți într-o funcție această anonim ca aceasta mijloace nu o executa încă; numesc în cele din urmă. Am văzut acest lucru în urmă cu un moment în exemplul nostru formularul anterior. Ce funcție au numim în cele din urmă, 500 milisecunde mai târziu? Clipi. Deci, aceeași idee. Din nou, chiar dacă acest lucru pare un pic ciudat, ia doar pentru acum pe credință care să declare o funcție anonim, care se numește în cele din urmă, scrii pur și simplu function () { Deci, ce vom cod pentru a executa în cele din urmă? Următor. Acest lucru pare un pic prea nou, dar acest lucru înseamnă aici e funcția jQuery, și acest lucru este acum o comandă rapidă. Acest fragment de HTML la partea de jos a ecranului, desigur, are unele reprezentare copac. Nu e asta. Această pagină este mult mai interesant decât acest exemplu salut lume,. Dar există unele copac care corespunde acest cod HTML. Aceasta ar fi o durere în gât trebui să pună în aplicare un fel de funcție recursivă să înceapă de la nodul rădăcină și pentru a găsi apoi nodul al cărui ID-ul este de înregistrare. Deci, ceea ce face ca jQuery super usor pentru noi este literalmente acest lucru. Du-te și adu-mi orice div sau orice formă, indiferent de elementul HTML are un ID de înregistrare. Acest lucru este echivalent cu document.getElementById ("înregistrarea"). 

De ce oameni ca jQuery? Pentru că e mai scurtă de tip. Dar asta e tot ce este. Este aceeași idee. Adu-mi ID-ul este tag-ul a cărui înregistrare. Și în momentul în care tag-ul, care se întâmplă să fie o forma, este prezentat, mergeți mai departe și să execute acest cod. Așa că haideți să facem un uita acum la ce facem noi anunturi formular. Sintaxa este, desigur, criptic la început, dar ceea ce se întâmplă? În cazul în care această linie de cod este adevărat, am de gând să țipi la utilizatorului să furnizeze adresa lui sau a ei de e-mail. Deci, ce este această linie de cod? $ Înseamnă jQuery. Acum observă acest lucru. Aceasta este un fel de CSS. Dacă v-ați scufundat în CSS încă, veți ști că aceasta înseamnă elementul al cărui ID-ul este de înregistrare. Spațiu înseamnă a găsi un copil sau un descendent de înregistrare al cărui nume este de intrare. Și apoi acest lucru în paranteze pătrate este un filtru mic. Și chiar dacă acest lucru pare criptic, aceasta înseamnă doar du-te la formularul al cărui ID-ul este de înregistrare, du-te în interiorul elementului de intrare a cărui nume este de e-mail, și de a lua apoi valoarea sa, indiferent de valoarea sa se întâmplă să fie - asdf daca asta e tot ce am scris sau malan@harvard.edu dacă asta e ceea ce am scris. Deci, dacă valoarea câmpului de e-mail formularul de == nimic, tipa la utilizator. Altfel, dacă valoarea din câmpul parolei == nimic, tipa la utilizator. 

Altfel, dacă valoarea câmpului parola nu este egal cu valoarea din câmpul de confirmare, care a fost elementul altă formă, țipa la utilizator. Și apoi în cele din urmă - și acest lucru are prea unele noua sintaxă proprie, dar odată ce l-ai văzut, e cel puțin un pic mai rezonabil - altceva dacă formularul al cărui ID-ul este Anul are un element de intrare al cărui nume este de acord și se verifică, mergeți mai departe și să strige la utilizator. Așa că am recunosc în totalitate acest lucru este complet coplesitoare la prima vedere. E o mulțime de noua sintaxă. Dar toate jQuery urmează aceste tipuri de modele. Și sincer, eu nici nu stiam asta a existat până acum câteva minute. Eu pe Google, "Cum verificați dacă o casetă este bifată în jQuery?" și aceasta este sintaxa, deoarece exista diferite moduri de a face aceasta cu efective cod JavaScript brut. Deci, ca prima pagină a Set Problema 7 subliniază, PSET 7 este foarte mult un exercițiu în procesul de bootstrap tine în cazul în care le-am furnizat, sperăm, un cadru conceptual cu care să abordeze PSET. 

Dar, așa cum este adesea cazul cu web design, e într-adevăr până la tine pentru a scormoni în jurul valorii de, includă fragmente de cod și exemple de web, atât timp cât le cita conform clauzelor contractuale, la care prima foaie, și dau seama că învățarea HTML, CSS, JavaScript și chiar SQL este într-adevăr menit să fie acest exercițiu la domiciliu așa cum am începe să luați aceste roți de formare oprit. Și dau seama prea există atât de multe lucruri care le puteți face mai mult cu un browser. In interiorul cele mai multe dintre aceste elemente sunt alte lucruri numite Stivuitoare eveniment. Și chiar dacă ne-am uitat la cele numite onsubmit și onready, poti sa faci lucruri cum ar fi onkeydown, onkeyup, ca atunci cand utilizatorul atinge o cheie, puteți asculta pentru că și până tasta. Gmail are scurtături de la tastatură. Cum Google punerea în aplicare a scurtăturilor de la tastatură, cum ar fi C pentru compun? Ei ascultă pentru evenimente, așa cum se numesc, cum ar fi onkeypress sau onkeyup și onkeydown. Dacă v-ați plutit vreodata cu mouse-ul peste unele opțiunea de meniu și dintr-o brusc Voila,, apare un meniu sau grafic își schimbă culoarea, cum fac asta? Mai degrabă decât să asculte onready sau onsubmit, asculta pentru onmouseover sau onmouseout. 

Deci, pe scurt, cu aceste elementele de bază foarte simple pe care le-am început să zgârie suprafața de astăzi și vom arunca cu capul în urma miercuri, aveți, din ce în ce, puterea de a pune în aplicare felul de lucruri pe care esti deja familiarizat cu. Deci, haideți să încheie acolo, și vom continua această miercuri. 

[CS50.TV]