[MUSIC JOC] 

DAVID MALAN: Aceasta este CS50. Acesta este începutul săptămânii noua. Și aceasta este ceea ce ar trebui fost ziua de nastere 200 de ani d-lui Boole. Deci acest lucru este semenii la care ne-am referit destul de câteva ori despre utilizarea Variabile booleene adevărat și fals, 1 și 0 și astfel. Și acest lucru a fost a lui Google tribut să-l azi. El ar fi împlinit 200. Deci, dacă doriți să alături de noi pentru CS50 masa de prânz, aruncăm o privire la link-ul pe site-ul cursului. Și astfel de fețe și prieteni ca acestea vă așteaptă aici, în Cambridge. Faces ca acestea vă așteaptă în New Haven. Și, de fapt, Ken în New Haven făcut cu amabilitate ceea ce se numește o GIF animat de Eli aici, la o recenta lunch-- un GIF este încă un alt format de fișier grafic, cu care ești familiar-- că arată un pic ceva de genul asta. Deci, doar o secvență de-- OK. Nimeni de aici în Cambridge râde. Dar, în New Haven, acest este într-adevăr amuzant, nu? In regula. 

Deci, nu ne alătura acolo. Aici, la Harvard, în mod specific, miercuri, daca esti un al doilea de studentie sau student în anul întâi even-- sau chiar de gândire de a face junior-- un comutator în calculator știință, știu că nu va fi un CS consiliere corect acest Miercuri, la scurt timp după clasa la 04:00 în calculator construcție știință Maxwell Dworkin. Vom pune acest lucru pe cursului site-ul de mâine, de asemenea. Donuts, mi sa spus, va fi servit. 

In regula. Story-- atât de amuzant am fost poking în jurul valorii de pe internet, și am găsit niște arhive vechi de fostul meu site-ului. Și se pare out-- jurul acestui timp, se pare foarte în timp util de când am aduna că alegerile UC sunt pe cale să uneltele din nou. Așa că am fugit de UC, a pierdut lamentabil. Și poate acest lucru a fost în parte de ce. Deci, acest lucru a fost site-ul meu la momentul respectiv. Din anumite motive, am crezut că a fost o idee bună, înainte de a spune oamenilor ce platforma mea a fost și motivul pentru care ar trebui să voteze pentru mine, că au pentru Click pentru a intra pentru a afla că informații, care, în retrospectivă este un fel de înfiorător. Nu prea stiu ce a fost asta. 

Dar cu siguranță nu a făcut- ajuta campania mea. Am constatat, de asemenea, că de senior year-- Am avut acest calendar Muppet. Muppets au fost un fel de în vogă atunci. Sau poate că nu au fost. Am avut un calendar Muppet atunci. Și am crezut că ar fi misto de numele computerul meu pe rețeaua Harvard frogman.student.harvard.edu. La acea vreme, am avut toate unic nume de gazdă identificabile. Și ați putea alege unele vanitate numele în loc de propriul nume. Și m-am dus cu înotător subacvatic pentru un motiv oarecare. 

Și apoi am started-- am petrecut o mulțime de timp clic pentru a ajunge aceste link-uri în această dimineață. Și aceasta a fost pagina mea despre, care acum se pare un fel de adorabil. Dar mărturisește, de asemenea, la doar Cât de departe a ajuns tehnologia. Adică, din nou în a doua zi, un 486 era ceva. Aceste zile, e super, super, foarte lent și mai puțin bine decât s-ar putea avea în dumneavoastră buzunare proprii aceste zile. Nu e mai mult pe acolo a fost chiar mai jenant. Așa că vom lăsa la asta. Dar asta a fost prima mea incursiune în web-- oh, nu. Asta nu a fost. Primul meu incursiune reală în programare web a fost acest site, pe care tocmai am uitat. La un moment dat, am învățat cum să face imagini de fundal repetitive. Și așa am găsit asta Tigla eficiente, ca jucător de hochei, fotbal, golf și minge, sau orice altceva care este pentru site-ul Frosh AI. Și acest lucru a fost de fapt, cu adevărat Primul proiect web-based am luat on-- Cred că al doilea de studentie an, year-- junior după ce a luat CS50 CS51 și, o comune claselor de continuare. Am observat în căutarea prin arhive ca unul dintre succesorii mei și prieteni, Lee, un fel de schimbat drepturile de autor pentru sine. Dar asta era într-adevăr ceva care Ar trebui să dețină jena la. Dar la momentul respectiv, acest a fost primul site, așa cum am spus acum câteva săptămâni, prin care ar putea student în anul întâi înregistrați pentru sport intramural aici. Și așa se pare că imagini de fundal că așa nu sunt o idee prea bună. Dar web era nou, și tot am fost experimente. Și aceasta este ceea ce am aparent făcut la momentul respectiv. In regula. Deci, fără alte formalități, am schimba unelte astăzi pentru a vă oferi, într-adevăr, ultima piesa care le-ar putea găsi util mai ales pentru proiectele finale dar, de asemenea, că va începe să face Wide Web întreaga lume simt un pic mai ușor de înțeles. Într-adevăr, suntem de gând să introducă încă un limbaj de programare numit JavaScript care este similară și diferite în moduri diferite de la limbi ne-am uitat la până în prezent. 

Deci C, amintesc, este acest limbaj compilat. Trebuie să-l rulați prin intermediul unui compilator. Ai codul sursă de opoziție cod, sau zerouri și cele. Iar acestea sunt zerouri și cele care CPU, Central Processing Unit, de fapt înțelege. PHP, prin contrast, nu este un limbaj compilat. Este un ce? Este un limbaj interpretat. Deci, există niște programe numit un interpret care trebuie să citească top it-- la jos, stânga pentru a right-- și dau seama ce toate sintaxa face și mijloace, fie că este vorba o buclă sau o condiție sau orice alt număr de programare construiește. Așa că e un limbaj interpretat. 

Apoi am introdus HTML. Și HTML nu este chiar un limbaj de programare. Ne-ar ea ceea ce numesc? Un limbaj de marcare, care este doar un fel de mod fantezist de a spune ea nu are construcții de programare, cum ar fi am văzut chiar și din nou în ziua zero. Nu există bucle. Nu există condiții. Este într-adevăr este o limbă despre marcarea de rezervă a datelor și formatarea sau structurarea l într-un fel. 

CSS, între timp, în mod similar nu un limbaj de programare. Este chiar mai mult orientate spre punct de vedere estetic. Și vă permite să sortați de ajusta lucruri cum ar fi dimensiunea fontului și culori și plasare și toate astea. Apoi am avut 

SQL. Deci SQL este într-adevăr o programare limba într-un fel, deși adaptate în mod specific la bazele de date. Dar, chiar dacă vă prezint doar la selectați și introduceți și ștergeți și să actualizeze și un cuplu de alții, dovedește poți de fapt scrie funcții sau proceduri, astfel cum acestea sunt numit, în SQL care arata si actioneaza destul ca funcții PHP și C. Deci, știu că cei exista. Dar noi nu deranja chiar cu ei așa cum am zgâria doar suprafața de aici. Și apoi JavaScript, ultimul de limbile noastre introdus oficial. Deci JavaScript, de asemenea, este un limbaj interpretat. Și cei familiarizați, fac doriți să-l distinge cu unele caracteristici la ambii C și PHP? Ce îl face diferit? 

Audiența: Nu este compilat. 

DAVID MALAN: Spune din nou? 

Audiența: Nu este compilat. 

DAVID MALAN: Nu este compilat. Deci,, de asemenea, este interpretată. Deci nu e compilat. Dar că un pic ca PHP face. Dar este încă diferită de PHP într-un fel de frapant, cel puțin în modul în care la vom folosi. Da? 

Audiența: Se rulează client-side. 

DAVID MALAN: Se rulează client-side, de obicei. Asta e într-adevăr distingerea caracteristică pentru noi acum. C a fost pe partea de server, în sensul că am făcut totul în IDE CS50. PHP a fost până acum pe parte de server, în măsura în cum, de asemenea, devine interpreted-- nu compilat, dar interpreted-- interior CS50 IDE, care, desigur, este doar un server sau servere în cloud. 

Dar JavaScript, chiar și daca te duci pentru a începe scris-o pentru, să zicem, PSET opt și poate ultima projects-- esti O să-l chiar în IDE CS50 și salvați-l în fișierele din IDE CS50, CS50 IDE și, la rândul lor, serverele cloud pe care este gazduit, nu sunt de gând de a interpreta sau de a executa codul. Mai degrabă, se va fi trimis în formular nealterată până la browser-ul. Și se apoi va fi IE sau Chrome sau Firefox sau Safari sau orice altceva care de fapt interpretează ea, de sus în jos, la stânga la dreapta. Deci distingerea cheie caracteristică pentru ziua de azi este că JavaScript este client-side și PHP, de exemplu, A fost de server-side. Acum, acest lucru are implicatii interesante pentru, cum ar fi, de proprietate intelectuală si care pot vedea de fapt codul. Și într-adevăr, poti sa te duci pe web și a vedea cele mai orice cod care cineva are scris în JavaScript. Uneori este ușor de citit, Uneori este obfuscated. Dar mai mult pe faptul că, în timp util. 

Deci JavaScript, destul de frumos, este super-similare, punct de vedere sintactic, la C. Și la fel ca PHP, nu exista nici o funcție principală. Dacă doriți să începeți scris Cod JavaScript, așa cum veți vedea astăzi, doar de a începe scris-o. Dar este, veți vedea, în special utile în contextul browsere web. Cu toate acestea, micul meu disclaimer-- obicei earlier-- a fost să spun că poți ce în ce mai azi utilizare JavaScript pe parte de server folosind un cadru de lux numit Node.js că unele dintre aplicațiile proprii CS50 lui sunt scrise în. Verificați 50 folosește de fapt Node.js. Dar vom concentra pe JavaScript client-side aici încolo. 

Deci, aici este un set de condiții în PHP. Ne pare rău, in-- de fapt, că declarație, este de asemenea corectă. Aici este, de asemenea, un set de Condiții în JavaScript. Sintactic, este identic cu C și la PHP. Expresii domnului Boole sunt, În mod similar, sintactic identic cu ambii C și PHP. Avem, de asemenea switch-uri în JavaScript care arata identic. Avem pentru bucle, care sunt structurat identic, în timp ce buclele, face în timp ce buclele. 

Asta e un pic diferit. PHP a avut pentru fiecare construct că ați putea fi utilizați sau vor folosi în PSET șapte, poate. JavaScript are această versiune specială a pentru cazul în care vă spune literalmente ceva ca de cheie variabilă în obiect, care este un mod foarte succint de a spune, dacă am o object-- și vom vorbim despre acestea din nou într-o moment-- și vreau să repeta peste tot din perechile de valori-cheie în interiorul, Nu trebuie să dau seama cum să index numeric le cu zero, unu, doi, trei. 

Pot să spun literalmente acest lucru. Și pe fiecare iterație, JavaScript pentru mine va actualiza cheia variabilă să fie prima cheie, apoi tasta următoare, apoi tasta următoare, apoi tasta următoare, si asa mai departe. Și eu pot ajunge la valoarea de tratare un obiect în JavaScript, așa cum vom vedea, ca și cum este o tablou asociativ în PHP. Într-adevăr, dacă în cele din urmă înfășurat dvs. minte în jurul o tablou asociativ este in PHP, vă puteți gândi la ea pentru ca acum identice cu un obiect în JavaScript. Dar asta e un pic de o simplificare. 

Arrays uite, destul de frumos, identice a PHP cu excepția unui singur caracter. Există un singur lucru lipseste aici că am făcut vedea săptămâna trecută cu PHP. Ce se omis? Da? Nici un semn dolar. Deci ne-am întors la o mai lume normală în cazul în care Variabilele nu au semne de dolari. Dar ce faci le prefixul cu var, de obicei. Și var înseamnă variabilă. Și la fel ca PHP este liber typed-- care există tipuri, există numere și șiruri și flotoare și așa forth-- JavaScript are în mod similar tipuri. Dar e liber tipizat în care Noi, programatorii nu trebuie să le specificați. Trebuie doar să fim conștienți că există diferite tipuri. 

Variabile, meanwhile-- aici cum am putea declara "Bună ziua, lume" ca un șir. Observați că este identic cu PHP dar nici un semn dolar. Și acest lucru este ceva vom începe să vedeți mai mult astăzi, prin care aveți un obiect cu chei și valori. Și, dacă doriți să încercați deduce din ultima week-- sintaxa este un pic diferit. Un pic de bun-simț, dar check-- câte chei pare acest obiect pentru a avea? Deci, eu văd patru. Văd două. 

Deci, este de fapt două. Deci, aceasta este o colecție de două perechi cheie-valoare. Cheia este un simbol a cărui valoare este de FB. Cheia este prețul a cărui valoare este de 101.53. Deci, acestea sunt două perechi cheie-valoare. Și amintiți-vă, PHP-- iar acest lucru este din nou doar un fel de diferență sintactice. Nu e tot ce intelectual interesant. PHP ar fi scris același lucru ca Citat follows--, egal. Și am schimba aceste pentru a între paranteze drepte. Și apoi am schimba acest lucru pentru a un cuvânt citat, "preț". Și apoi eu nu folosesc un colon. Ce am folosit săptămâna trecută? Da, semnul egal săgeată notație funky. 

Și apoi am făcut același lucru aici. Acelasi lucru aici. Și asta e tot. Deci e în regulă dacă acest lucru nu are într-adevăr scufundat în memoria doar dar pentru că este într-adevăr intelectual neinteresant. E doar diferențe sintactice. Dar ideile sunt exact la fel. În interiorul acestei variabile citat în JavaScript este o colecție de perechi cheie-valoare, dintre care unul este simbol, dintre care unul este prețul. Și eu pot ajunge la aceste valori cu următoarea sintaxă. La fel ca în PHP, am putut face ceva like-- să mi fac această casetă un pic mai mare. La fel ca în PHP, am putut face astea-- oh, la naiba. Haide. 

La fel ca în PHP-- OK, vom utilizați doar note prezentator. La fel ca în PHP, nu pot face $ $ citat citat ["simbol"], și acest lucru mă va primi valoarea "simbol." În JavaScript, o să fie identic, prin care pot face acest lucru doar. Singurul lucru care-i lipsește este semnul dolar. 

Deci destul de frumos, atunci, nu e nu tot atât de mult sintaxa nou. Deci, ceea ce astăzi ne vom concentra pe, într-adevăr, este unele dintre ideile și cererile. Și primul astfel de aplicație care s-ar putea au văzut dacă scufundat în PSET șapte este deja această sintaxă. Deci, în PSET șapte, dacă ați văzut sau nu a vazut-o încă, Știu că există un fișier care ne da ai sunat config.json-- JavaScript Object Notation. Ce? Am vrut să fie în măsură să vă furnizeze un șablon cu niște perechi cheie-valoare. Am vrut să fie în măsură să vă dau o listă gazdei, numele serverului. Am vrut să vă dau o substituent pentru numele de utilizator și un substituent pentru parola. Dacă nu vedeți acest lucru încă, nu vă faceți griji. Mai multe despre acest lucru în PSET șapte [? spec. ?] Si atunci, Evident, am doriți să completeze la-DOS pentru că atunci când vă conectați la CS50 IDE, fiecare dintre voi propriul nume de utilizator si parola. 

Deci am putea-am folosit o jumătate de duzină sau mai multe formate de fișiere diferite. Am fi putut folosi un fișier .txt. Am putea folosi un fișier CSV. Am putea-am folosit o Fișier INI, un fișier XML, o grămadă mai mult acronime care ar putea să nu fi auzit. Este un fel de arbitrară la sfarsitul zilei. Dar super-popular in aceste zile este un text format numit JSON-- JavaScript Object Notation-- care arata ca acest lucru. E un pic criptic, dar observa modelele. Începi cu un buclat deschisă bretele, si va termina cu aceeași. In interiorul, care este ceva. Este o pereche de chei-valoare. Deci acesta este un obiect care sunt uita la pe ecran aici care are o cheie, care are o valoare. Și deduce pe baza model anterior, ceea ce este cheia aici? Baza de date, de lucru pentru a în partea stângă a colonului. 

Acum, valoarea se întâmplă să fie o mai multe linii de data asta. Dar valoarea începe cu un buclat bretele și se termină cu o acoladă. Deci, ce ați propune este tip de valoarea bazei de date? Un dicționar sau, pur și simplu mai mult succint, un obiect. Dreapta? Aceasta este un fel de o structură de date care pot utiliza alte structuri în sine. Deci, dacă toată chestia asta suntem de asteptare un object-- și un obiect este doar o adunatura de cheie-valoare pairs-- Valoarea de baze de date în sine este un obiect. Valoarea bazei de date are o grămadă de perechi de valori-cheie, dintre care primul este gazda, apoi numele, apoi numele de utilizator, parola apoi, fiecare dintre ale cărui valori, între timp, e doar un șir plictisitor în ghilimele duble. 

Deci, chiar dacă asta nu e Super Clear doar încă, știu că aceasta este doar o standard destul de plictisitor mod de stocare a datelor într-un format standard. Dar frecvente greseli te s-ar putea face, chiar în PSET șapte, sunt mici lucruri stupide, cum ar fi dacă ați omite accidental virgula acolo. Care va duce la fișierul nu neapărat fiind ușor de citit. Dacă omiteți accidental lucruri, cum ar fi citate, nu va fi ușor de citit. Deci, este un format de fișier destul de nitpicky, dar este una care e super-comun. Și se întâmplă să-l folosească, chiar dacă nu folosi orice JavaScript în caz contrar, în PSET șapte. 

In regula. Deci, amintiți-vă de această imagine. Am vorbit despre, în HTML, care codul ar putea arata ca aceasta. Aceasta este HyperText Markup Language [Inaudibil] pentru doar "salut, lume." Dar apoi ne-am propus o înapoi în timp ce în cazul în care aceasta ajută, ați putea dori să înceapă să se gândească despre acest lucru deja ca un copac. De fapt, indentare pe care le utiliza doar de dragul lui lizibilitate sau de dragul stilului pe stânga poate un fel de tradusă în acest copac, în cazul în care au unele nod special rădăcină că vom generic numit documentul, sub care este elementul HTML rădăcină sau tag-ul, HTML, care apoi are două copii, cap și corp. 

Și apoi, la rândul său, cap are un titlu. Și titlul are o valoare de text. Și corp are în mod similar o valoare text. Deci, dacă vrei să spui confortabil că da, ai putea lua această HTML și desena o imagine cum ar fi acest lucru, partea dreaptă este un model mental frumos, pentru că acum că avem JavaScript, o programare limbă pe care browsere pot executa și interpreta pentru tine, se dovedește că ceea ce suntem pe cale să facem în cod este începe să manipuleze acest structură de arbore în memorie. Nu avem de a construi copac în memorie. Noi nu trebuie să facem un fel de structură de date de cinci stil PSET complexitate. Browser-ul, destul de frumos, pe interpretare HTML sus în jos, stânga sau la dreapta, este literalmente va mână ne echivalentul unui pointer pentru că întregul copac gratis. Aceasta face toate munca grea. Asta e ceea ce Mozilla si Apple și au făcut alții pentru noi. 

Și cu JavaScript vom putea controla și de a schimba și de a face lucruri interesante la acel copac, altfel cunoscut ca un DOM sau Document Object Model. Ce fel de lucruri? Ei bine, se pare că în JavaScript, nu e această listă lungă de evenimente care pot avea loc. Și nu ne-am într-adevăr utilizate ca cuvânt de la săptămână la zero și PSET zero, atunci când am vorbit despre Scratch. Cele mai multe dintre voi, probabil, nu au utilizat un eveniment în proiectul dumneavoastră Scratch. Dar s-ar putea aminti tu simplu Marco Polo exemplu, în cazul în care am avut două sprites, dintre care unul a spus, Marco. Celălalt dintre care apoi, la ascultare și audierea acest caz, a declarat, Polo. Dacă nu, nu ezitați să privi înapoi atât de departe înapoi. 

Dar acest lucru este doar pentru a spun, și puteți fel de deduce din numele acestor lucruri, JavaScript, se pare, este de gând să ne dea o modalitate de a asculta pentru mouse-ul merge în jos sau mouse-ul merge în sus sau merge în jos tasta sau tasta merge în sus sau onselect onsubmit sau onresizing ceva. Cu alte cuvinte, orice acțiune fizică că un om poate lua cu un browser pe care le face în fiecare zi, puteți scrie codul pentru că ascultă de aceste evenimente și apoi face ceva adecvat. 

De exemplu, dacă utilizați Google Maps, ce se întâmplă dacă faceți clic și mutare mouse-ul, de obicei? Dacă faceți clic și glisați? Da? Exact. Harta începe să se miște. Deci, puteți vedea un fel de ceea ce este aici, ceea ce e acolo. Și cum să pună în aplicare Google asta? Ei bine, probabil, sunt folosind o pereche de acestea eveniment ascultători, una care spune, ascultați pe mouse-ul down-- astfel încât atunci când utilizatorul fizic împinge trackpad lui sau sau sa mouse-ul ei jos. Și apoi căutăm ceva de genul mișcare sau alte evenimente care ne permite pentru a captura trageți. Și, de fapt, este la fel de trageți în acest dot dot dot Lista de opțiuni posibile. 

Deci, acest lucru va fi un puternic modalitate de a începe să răspundă la utilizator chiar înainte de a face clic de fapt ceva explicit ca prezenta. Dar vom să introducă câteva subiecte pentru a ajunge acolo. Dar, mai întâi, să tranziție la un cod actuale. Deci, am de gând să merg înainte și deschide-dom 0, care este un exemplu foarte simplu aici că, dacă am mări pur și simplu are această intrare aici pentru mine. Și am de gând să mergeți mai departe și tastați "David" pentru numele meu și faceți clic pe Trimiteți. 

Și apoi, chiar dacă un fel de ieftin, am au acest prompt care apare care spune, "Bună ziua, David!" Deci acest este un fel de ca nostru "Bună ziua, lume" că am făcut un timp înapoi în C și chiar și în PHP pentru că am dinamic scoasă numele meu. Pot să fac numele altcuiva aici. Aș putea schimba pur și simplu acest lucru, cum ar fi, Hannah, faceți clic pe Submit. Și într-adevăr, micile schimbări pop-up. 

Acum, pop-up-uri sunt unul dintre cele mai multe caracteristici ale abuzat web. Și, de fapt, din nou în zilei blocante pop-up a intrat în modă pentru că ar merge la unele website-- probabil, o place-- discutabil care ar apoi brusc începe peppering ecran cu o grămadă de pop-up-uri. Și așa mai departe această capacitate de a pop-up ferestre în fața a utilizatorului nu a fost deosebit de bine primit de către umanitate. Deci, de aceea ai vedea acest lucru a preveni, care tocmai face chestia asta urâtă. Deci vom avea nevoie de o modalitate mai bună de a solicita utilizatorului. Dar pentru acum, care pare să funcționeze. Deci, doar intuitiv, ceea ce pare să se întâmple aici? Am merge mai departe și faceți clic pe Trimite, și apoi ceva se întâmplă, în mod clar. Dar ceea ce nu se întâmplă asta sa întâmplat săptămâna trecută în orice moment am apasat Trimite? Ceea ce nu sa întâmplat pe ecran? Ne pare rău? Reîncarcă. URL-ul nu sa schimbat deloc. I-am spus acest lucru a fost-dom 0, și eu sunt încă la-Dom 0. În mod normal, ne-ar lua schimbat la un alt URL, cum ar fi register.php sau altele asemenea. 

Dar chiar și atunci când am respingerea acest lucru făcând clic pe OK, observați că URL-ul rămâne complet pus. Și, de fapt, dacă sunt un pic sceptic, lasă-mă să deschid Chrome. Lasă-mă să deschid fila Rețea. Și observați că e gol în acest moment. Lasă-mă să merg mai departe și retrimiteți Maria. Nu e nici un fel de trafic de rețea. Deci nu e nici HTTP. 

Deci, într-adevăr, dacă mă uit la codul sursă pentru asta: lasă-mă închide această fereastră și du-te la Vezi sursa. Interesant. Se pare că există unele noi tag-uri, printre care script-ul. Deci, haideți să aruncăm o privire în CS50 IDE exact ceea ce am trimis utilizatorului. 

Deci, aici este-- să se concentreze pe doar HTML. Aici e jumătatea de jos a dom-0.html. Și observați că acesta are un titlu, o etichetă cap, un tag corp, o etichetă formular. Dar ce sare la tine, ca diferit, mai ales dacă nu ați mai scris orice JavaScript-te. Permiteți-mi să derulați un pic la dreapta aici. Am o intrare, o altă intrare pentru prezenta. Am o identitate, care este un fel de nou. Dar noi am văzut acest lucru cu CSS. Ce altceva este cu siguranta nou? Da? Nisa. 

In regula. Deci, în cazul în care se spune onsubmit, observa ceea ce pare să urmeze. Aceasta este un atribut în nomenclatura HTML. Valoarea sa este acest șir citat aici. Și acest lucru pare un pic ciudat la prima vedere. Nu e HTML. Nu e CSS. Acest lucru este, după cum s-ar putea ghici, JavaScript. Deci, se pare că a construit în această pagină web este o funcție numită salut. Și eu care tocmai deducere pentru că este un cuvânt, salut. Are o paren deschis, paren apropiate, punct și virgulă. Se pare ca o funcție C, arata ca o funcție PHP. 

Și într-adevăr, o să o funcție JavaScript. Apoi am întorc false. Ne vom întoarce la că într-o clipă. Dar în cazul în care este definit această funcție? Ei bine, lasă-mă să derulați în sus în partea de sus a fișierului. Și chiar dacă este o linie lungă, e relativ simplu. Lasă-mă să zoom out aici și se concentreze pe aceste patru linii. 

Deci, în JavaScript, doar ca PHP, doar să zicem, literal, cuvântul "funcția" numele funcției, și apoi paranteze cu orice arguments-- nici un argument în acest caz. Și nu există nici un tip de întoarcere în JavaScript, la fel ca PHP. Deci, este un pic mai flexibile decât C. Deschis bretele cret, aproape bretele buclat. Construit în JavaScript este un function-- Nu o function-- recomandat dar o funcție numită de alertă al cărei unic scop în viață este de a trage în sus, care destul de urât solicita ca am vazut acum un moment. 

Acum, acest lucru este un fel de o îmbucătură. Ce se petrece aici? Așa că haideți să începem să evidenția totul aici. Asta e același argument pentru a alerta. Și ce se întâmplă? Acest lucru doar arată ca un șir. Și se pare că, spre deosebire de PHP și spre deosebire de C, nu contează în JavaScript Dacă voi ghilimele simple sau ghilimele. Vor fi echivalent. Și sincer, e doar popular in aceste zile pentru programatori JavaScript pentru totdeauna Folosiți ghilimele simple pentru un motiv oarecare. E doar un lucru de făcut. Dar am putea folosi ghilimele, de asemenea. 

Deci, plus este un nou personaj. Dar cei dintre voi care ați făcut acest lucru înainte, ceea ce nu înseamnă plus? Da. Înlănțui. Așa că am văzut acest lucru în PHP. Nu e doar punctul Operatorul în PHP care va concatena două șiruri împreună. C a fost o durere în gât pentru a face acest lucru. Reamintim de la PSET șase, care a fost o durere special în gât, va trebui să utilizați ceva de genul strcat după alocarea de memorie pe stiva sau heap. Trebuia să sară prin cercuri doar pentru a concatena două șiruri. În JavaScript, este foarte simplu. Doar folosi operatorul plus între ele. 

Deci complexul cu aspect lucru pare a fi acest deoarece la sfârșitul tot acest șir, eu doar înlănțui pe un semn de exclamare. Deci, dacă ceea ce a fost popping sus a fost "Bună ziua, David", "Bună ziua, Hannah," "Bună ziua, Maria", și așa mai departe, în mod clar chestia aia de mijloc intre cele doua plusuri să-mi dea acces la ceea ce? Ce e acolo pentru sigur? Da. Așa că vom pretinde aici răspunde numele lor, nu? Deci, numele lor a apărut în finală rezultat. Deci, ce înseamnă asta? Ei bine, am propus mai devreme în imagine care așa-numita DOM are acest element special rădăcină drumul până sus numit documentul. Și acum, se pare, că se întâmplă să fie o variabilă globală special în JavaScript, construit în care este o grămadă de funcționalitate utilă. Printre funcționalitatea utilă este capacitatea de a ajunge la orice nod descendent. Aceste pătrată sau dreptunghiulară sau elipse sunt doar noduri într-un copac, ca să spunem așa. 

Deci, se dovedește că construit în Obiect Document JavaScript lui este o funcție, altfel cunoscut ca un metoda, care se numește getElementById. Sintaxa pentru apelarea o funcție în JavaScript care este în interiorul unui obiect sau a unei variabilă este doar cu notația punct. Și am văzut acest lucru în C ceea ce sintaxa struct. Veți vedea acest lucru în PSET șapte, un fel de, un fel de, când vezi CS50 :: interogare. Colon colon în PHP este un alt mod de asteptare o funcție care este interiorul un obiect. 

Dar pentru acum, în JavaScript, e doar un punct. Și astfel această funcție, destul de frumos, un fel de spune ceea ce does-- obține elementul de identitate. Un element este doar un alt nume pentru o etichetă sau nod în DOM. Și asa ca element de ID "name" înseamnă asta: aici e HTML mea. Și se bazează pe acest HTML, ceea ce nod sau ce tag-ul HTML sunt eu O să fie programatic mână prin apel la document.getElementById? 

Da, exact. Mă duc pentru a obține de intrare Element există, acesta este ID-ul "name". Deci în mod special, puteți cred că de această funcție, getElementById, ca o modalitate de a da înapoi un pointer la acel nod specific în copac. Noi nu am desenat acest copac, dar este un mod de a avea acces la acea dreptunghi sau dreptunghi care prin aceasta identificarea în mod unic prin ID-ul său. 

Acum, de ce este acest lucru util? Ei bine, se pare că că, odată ce ați ajuns acel nod, acest dreptunghi de la imagine, ca nod în interiorul acestuia, la rândul său, are o grămadă de perechi cheie-valoare properties-- sau date, dintre care unul este numit valoare. Deci literal, e un fel de îmbucătură pentru a explica totul. Dar la sfârșitul zilei, Toate acestea nu este să vă dau un șir care utilizatorul tastat în acest mod ierarhic. Dar nu-mi place o câteva dintre aceste lucruri. Sau, mai degrabă, există unele curiozitate încă. Toate acestea păreau să funcționeze. De ce crezi că m-am întors fals după apel salut? Aceasta arată un pic urât, că Am două declarații acolo separate prin punct și virgulă. Ghiceste. Dacă am scos return false, ceea ce s-ar putea întâmpla, doar instinctiv? Ne pare rău, spun din nou? 

Deschide o grămadă de Windows. Deci, potențial, poate ceva așa se va întâmpla. Ce altceva? S-ar putea depune o cerere în cazul în care? La aceeași pagină. Deci, de fapt, că e mai aproape răspunde aici, chiar dacă, spre deosebire de în trecut, nu am specificat atributul de acțiune, care in mod normal trebuie să facem. Se pare că există o implicit. Dacă nu specificați o acțiune, e ca si cum spune citatul, citatul sau numele fișierului în sine, care, în acest caz, ar fie ca dom-0.html. E doar un fel de a dedus, sau mai degrabă implicite. 

Și așa, dacă nu fac acest lucru, să observăm. Lasă-mă să salveze acest. Și am scos return false. Lasă-mă să mă întorc la acest exemplu și vigoare, reîncărcați. Și s-ar putea fi văzut-mi sugereze acest lucru pe CS50 Discuta o grămadă de ori. Dacă ceva e vreodată acționează funky, și Browser-ul nu comportă cum vă așteptați, de multe ori veți dori să dețină Shift și apoi faceți clic pe Reîncărcare. Care va forța fiecare fișier pentru a reîncărca și nu utilizați cache-ul browser-ului dvs. locală sau copie, astfel că acum, lasă-mă să merg mai departe și deschide Inspector mea, pe fila Rețea. Am de gând să faceți clic pe Păstra Log pentru că am Nu vreau să ștergeți rânduri odată ce am lua whisked departe în altă parte. 

Lasă-mă să merg mai departe și aici tip în Andi, faceți clic pe Submit. In regula. Care pare cum era de așteptat. Se spune "Hello, Andi." Lasă-mă să faceți clic pe OK. Interesant. Observați că pagina sa schimbat, deși la pagina originală. Observați ce fel de URL schimbat. A adăugat un semn de întrebare, care este de obicei un indicator pe care am încercat să-și prezinte ceva. Și apoi la partea de jos, chiar mai explicit, aici este cererea reală HTTP, care a primit un răspuns de 200 care ma adus înapoi aici. 

Deci, acest lucru nu este ceea ce vrem să facem, nu? Pentru ca nu vreau reîncărcați întreaga pagină. Am vrut în schimb să se întoarcă fals astfel încât să se scurt-circuit comportament implicit a browser-ului, care a fost, desigur, să prezinte pagina. 

Deci, haideți să aruncăm o privire la o marginal mai bine exemplu. Aceasta este versiunea dom unul. Și observați următoarele. E în regulă, dacă nu Grok toate liniile de cod. Dar ceea ce este fundamental diferit despre această punere în aplicare? Voi stipulează că se comporta in aceeași, face același lucru. Ce-am făcut, evident, diferit? Da? 

Audiența: [neauzit]. DAVID MALAN: Da. Deci, funcția este definită differently-- Cu alte cuvinte, absente de la forma, acolo on-line 7-- sau mai degrabă, linia 8-- nu mai nu am atributul onsubmit. În exemplul anterior, am avut asta. Și apoi am scris literalmente codul meu aici. Și apoi i-am spus return false. Și dacă nu freca te pe un drum greșit încă, aceasta ar trebui să înceapă să măsura ca, la fel ca și în HTML, când am început să-l amesteca co- cu CSS în atributele de stil, doar a început pentru a obține un pic murdar sau se simt un pic greșit. 

În mod similar aici, în cazul în care a începe să luați HTML, și apoi în mod automat plop unele cod JavaScript în mijlocul unui șir citat, e Nu va fi foarte întreținut. Dreapta? Nici măcar nu e evident de la prima locul în care codul JavaScript este. Deci, ar fi foarte frumos ca un principiu de design mai bun, să păstreze HTML nostru complet separat de JavaScript nostru. 

Deci, pentru a face acest lucru, ceea ce am face aici este following-- Pur și simplu folosi HTML doar pentru marcare. Și astfel, în versiunea una din asta, Am este o formă cu un ID unic. Și apoi aici, am profitând de o funcție specială de JavaScript prin care pot avea ceea ce este numit o funcție anonim. Deci, se dovedește că, dacă eu numesc document.getElementById de "demo" asta e ca să-mi dea un pointer la acest nod în copacul meu, elementul forma, ca sa zic asa. 

Acum, eu știu doar de la știind un pic de HTML acum avem citit unele on-line referință, că un element de formă suportă o grămadă de listeners-- eveniment în Cu alte cuvinte, lista de rufe de eveniment ascultătorii care le-am văzut în urmă cu o clipă. Știu de la citirea documentației că onsubmit este un eveniment valabil ascultător pentru un element de formular. 

Deci, odată ce știu că, este sigur pentru mine să fac following-- GET acel nod din copac, elementul forma, și accesul său așa-numitele proprietate onsubmit. Deci punctul înseamnă doar Aceasta este o proprietate, ca o valoare specială în interiorul de el. Și ce tip de date sunt eu atribuirea, aparent, la onSubmit, care este în mod eficient o variabilă în interiorul de care nod în arborele? Este un domeniu în interiorul că struct. Care este tipul de date? 

O funcție, da. Deci, se dovedește că PHP are acest lucru. Și chiar dacă ne-am nu vă spun despre ea, C are, de asemenea, funcția de indicii, de capacitatea de a trece și de a atribui funcții ca valori variabile "în sine. Și nu mergem de a regresa înapoi la C. Dar pentru acum, se pare că pe partea dreaptă aici, chiar dacă pare un pic înfricoșat, acest lucru înseamnă, hei browser, da-mi o funcție. Eu nu am de gând să deranjeze chiar da un nume pentru că eu sunt literalmente O să atribui să-i zicem adresa acestei funcții imediat la onsubmit. Cu alte cuvinte, browser-ul, nu aveți nevoie să știu ce această funcție se numește. Trebuie doar să știi atunci când este în memorie. Și așa este suficient doar pentru a au un semn de egalitate acolo și să nu deranjeze denumire acest lucru, cum ar fi foo sau saluta sau orice alt cuvânt. Iar acum acest lucru este doar un lucru stilistică. Am putea muta acest bretele ondulat pe the-- sorry-- linia următoare ca și cum am face de obicei CS50. Dar, în JavaScript, e de fapt stilistic comun pentru a păstra doar bretele buclat, The Primul, pe care prima linie. 

Dar în continuare, nu e nimic interesant. Că bretele buclat deschis doar delimitează începutul funcția mea. Funcția este acum identice, cu excepția Am incluse fals retur în interiorul acestei funcții. Pentru că se pare out-- și v-ar numai știu acest lucru de la lectură documentation-- că în cazul în care funcția pe care ați atribui la handler onsubmit întoarce false, browser-ul doar știe și este de acord nu depune formularul la un server. În cazul în care returnează adevărat, va prezenta l la un server din motive vom vedea sunt utile într-o clipă. 

Și apoi după virgulă bretele buclat acolo doar înseamnă Am terminat definirea funcției. Știi ce a apela cât mai curând ca auzi o prezentare. In regula. Acest lucru este încă probabil un fel de urât. Deci, ce mai putem face? 

Ei bine, se pare, apoi în Versiunea doua, care este last-- Și vom tocmai privire la acest lucru. Cu riscul de a face o mai urat, se dovedește că există o bibliotecă în lumea numit jQuery. Și jQuery este un super populare bibliotecă JavaScript care este atat de popular ca cele mai multe orice JavaScript-- nu e mai puțin frecvente pentru oameni de a confunda jQuery cu JavaScript. Ce? JavaScript în sine are foarte modalități de a face lucruri-- verbose document.getElementById, dadadadadada. Ajungi cu foarte linii lungi de cod. 

Deci, un tip pe nume John Resid, care lucrează de fapt pentru o pornire în aceste zile, a ieșit cu această bibliotecă de ani Acum că mulți oameni au contribuit a numit jQuery care schimbă sintaxa în felul următor. Și așa ați văzut acest lucru, pentru că veți invariabil aceasta în cazul în care face un proiect final web-based, acest lucru ar fi modul echivalent de de punere în aplicare aceeași funcție cu ajutorul această bibliotecă speciale. 

Acum, mai degrabă decât tease l afară în întregime, hai să uităm la unele modele. Această sintaxă pare să aibă cât de multe funcții anonime sau funcții fără nume sau funcții lambda AKA? Doi, nu? Și știi că, chiar dacă nu esti foarte confortabil cu acest lucru, doar prin faptul că acesta spune funcție () de două ori. 

Și se pare că ceea ce acest cod este doing-- și ne vom referi la referințe on-line, în cele din urmă, pentru unele ajutor cu acest lucru. Acest lucru înseamnă doar că, atunci când documentul este gata, mergeți mai departe și să înregistreze următoarea funcție ca să prezinte handler pentru HTML Element al cărui idee unica este demo. Și apoi, când acest lucru se întâmplă, numesc aceste două linii de cod. Și acest lucru este, în mod tragic, o mai mod de a spune verbose return false. Și am menționat acest lucru doar pentru că veți vedea codul ca aceasta on-line. Și nu e nimic să fie descurajat de. Ci, mai degrabă, rețineți că ceea ce este O să fie comune în JavaScript este această paradigmă. Și așa de aceea l-am arăta pentru moment. In regula. Deci, fără locuință prea mult pe faptul că sintaxa, sunt există întrebări cu privire la aceste exemple sau idei până acum? In regula. Deci, hai să folosim acest lucru pentru ceva util. Efectuarea de o pagină web care spune doar salut, așa și așa nu este tot ceea ce interesant, nu a underwhelm. Acesta nu va fi frumos, dar este de gând să facă ceva util. Lasă-mă să mă întorc la directorul meu aici și deschide, spune, forma-0.html. 

Deci să presupunem că acest lucru este boboc pagina de înregistrare sport intramural fără nici CSS sau orice sentiment de proiectare. Și vreau să merg mai departe și mentionati aici cu o parolă. Și am de gând să de acord cu termenii și condițiile și faceți clic pe Înregistrare. Și acum site-ul spune: "Sunteți înregistrat! (Ei bine, nu chiar.) " Care pare ca a mers, dar lasă-mă să merg mai departe și forța de reîncărcare. 

Și permiteți-mi să spun, nu, nu nevoie adresa de email reală. Sau poate vom spune doar e-mail acolo. Parola va fi, cum ar fi, 12345. Și apoi, doar pentru că sunt un idiot, acum e 123,456,789. Și nu am de gând să verifice cutia. 

Hmm. In regula. Deci nu e de mai multe oportunități pentru îmbunătățirea aici. Și știi, sau va vedea în PSET șapte, pe care le puteți scrie code-- și va trebui să scrie cod în PHP-- a-și apăra împotriva acestor tipuri de utilizator erorilor, deoarece utilizatorul clar nu a cooperat. Și el sau ea nu a dat tot valori ai vrut sau chiar în formatul care le dorea. Deci veți vedea în PSET șapte care am putea avea cu siguranță unele cazul în care condițiile care spun în cazul în care adresa de email nu este un username@something.edu, am putea doar spun îmi pare rău și ne cerem scuze pentru utilizator mai mult, ca tine s-ar putea să fie în PSET șapte. Sau în cazul în care nu au verificat cutia, se dovedește în PHP, vă poate detecta că, prea. Și cu siguranță în cazul în care parolele nu se potrivesc la fel ca în register.php pentru PSET șapte, puteți detecta acest lucru. Dar asta este o durere în gât în ​​care acum se solicita să mergem până la capăt pe server. Utilizatorul este informat de eroare. Și cel puțin dacă nu utilizați Unele tehnici crescator, acum ei trebuie să faceți clic pe săgeata din spate. Nu ar fi frumos, ca o mulțime de site-uri web de azi, dacă ați avut mai mult imediat feedback-ul, instantaneu? 

Cu alte cuvinte, lasă-mă să merg la versiunea o, care va fi nici o frumoasa. Dar are această caracteristică. Malan, 12345, 123456789, nu O să bifați caseta, Register. Parolele nu se potrivesc. Deci, chiar dacă acest pop-up este ugly-- putem înlocui în cele din urmă acest cu ceva de genul Bootstrap, care veți vedea în PSET șapte este un foarte popular library-- am facut detecta că parolele nu se potrivesc. In regula. Ei bine, lasă-mă să stabilească că, utilizatorul. Lasă-mă să mergeți mai departe și spune 12345, 12345. Încă nu verificarea acordului. Trebuie să acceptați la Termeni și condiții. Deci de ce? 

Dacă ne-am postulat deja că există o cale, si noi le-ați necesare PSET șapte pentru a detecta erori Condiții de acest gen server-side, de ce ar trebui să deranjez, de asemenea, face acest lucru în JavaScript? Ce este un argument în favoarea adăugarea ce esti pe cale de a vedea ca some-- există complexitate suplimentare. 

Poate nu există nici cu susul. Ce ar putea fi? Audiența: [neauzit]. DAVID MALAN: Oh, interesant. Exploateaza potențiale. Atât de sigur, dacă nu sunteți de manipulare introduse de utilizator eronată că mare, Poate că e cu atât mai bine în cazul în care chiar nu ajunge server. Mi-ar împinge înapoi acolo și să zicem, ar trebui, probabil, stabili aceste două probleme. Dar asta e corect. Ce altceva? 

Audiența: [neauzit]. 

DAVID MALAN: Da. Acest cod, așa cum am spus înainte, este interpretat pe partea de client. Ea nu deranjează pe server, ceea ce înseamnă că nu impact sarcină sau capacitatea serverului. Și acum, pentru puțin mine vechi, acest nu are niciun efect semnificativ pentru că am un singur utilizator chiar acum. 

Dar daca esti vreun site-ul de dimensiuni decente, în special cele mai mari, cum ar fi Facebook, cu atât mai mult puteți să vă păstrați de oameni de pe a server-ul dvs. mai bine pentru că un server, desigur, are doar o cantitate finită de memorie RAM, un număr finit de gigahertzi, un număr finit de lucruri se poate face pe unitatea de timp. Deci, dacă există mai multe persoane în lumea lovind server-ul dvs., logare accidental incorect, la fel de bine, dacă pot păstra ca sarcină de pe server. Plus, mai ales pe un telefon mobil device-- dacă ai vreodată conectați la my.harvard sau NETID Yale sau altele asemenea, există acest latenta cu o mulțime de site-uri de genul asta prin care ia, cum ar fi, o naibii de secundă sau două, uneori. Și apoi, Dumnezeul meu, dacă ai scris greșit, atunci va trebui să lovit din spate și refaceți-l. Deci nu e latenta, mai ales pe conexiunile de rețea mai lent. Dar JavaScript, pentru că ruleaza pe client și nu are nevoie pentru a merge înainte și înapoi peste un internet potențial lent conexiune, puteți obține Feedback-ul aproape instantaneu. 

Deci, să ne uităm la asta. Lasă-mă să deschid formă 0 și uita-te la HTML aici. Și hai să vedem ce se întâmplă. Aceasta este o formă a cărei acțiune este register.php. Sunt doar folosind primești că am putut vedea adresa URL. Dar pentru parole, am dori cu siguranță pentru a schimba acest lucru pentru a posta în realitate. Iată un câmp de introducere a textului de tip. Iată o altă intrare câmp de tip parolă. Iată, dacă nu ați mai văzut, o intrare de tip caseta. 

Dar nu e nici o JavaScript aici un fel. Acesta este doar HTML care merge la register.php. Dar, în versiunea parte, în cazul în care am a început pentru a obține aceste ferestre pop-up, Să vedem ce se întâmplă de fapt aici. În versiunea unul, ceea ce Am de gând să see-- I gandit ca as putea bloca destul cu suficiente cuvinte, dar am fugit. 

În versiunea Unu acolo mergem. În versiunea unul, observa following-- și nu este cel mai bun punerea în aplicare, dar e prima mea. Observați că sub media formă, am o etichetă script. Și o etichetă script înseamnă, hei, browser-ul, aici vine un cod în, de obicei, JavaScript. Și acum, observați ce fac. Pe line-- pot abia citeste it-- linia 32, se spune, var form-- așa da-mi o variabilă numită formă. Și apoi obține document.getElementId de "înregistrare". Ce este asta? Ei bine, lasă-mă să înapoi aici. Și notificare, ah, i-am dat elementul formularul o idee arbitrară, dar descriptiv de înregistrare. Deci, aceasta dă-mi o variabilă care mi permite să apuca acel nod, că dreptunghi în copac numit forma. mijloace form.onsubmit, hei browser, înregistra un ascultător eveniment în acest formular. Cu alte cuvinte, atunci când acest lucru este formular prezentat, executați următorul cod. Ea nu are nevoie de un nume, deoarece de ce trebuie să știți numele? Trebuie doar să știi ce să execute, Ergo este o funcție de anonim sau lambda. Și asta funcție este toate aceste linii de aici. Și acum, ca să fiu sincer, chiar dacă nu ar fi scris vreodată JavaScript înainte, e doar C și PHP logica. Deci, dacă form.email.value == "" - astfel încât în ​​cazul în care câmpul de e-mail este necompletat, tipa la utilizatorul cu "Trebuie furniza adresa ta de e-mail. " Altfel, dacă form.password.value este țipa gol la utilizator, "Trebuie să furnizați parola." 

Mai interesant logic, dacă nu form.password.value egal form.confirmation.value-- în cazul în care a confirmare provin de la? Lasă-mă să înapoi. Ei bine, am sunat această intrare câmp aici parola. Și i-am sunat asta aici confirmare. Aș fi putut să-l numit parola două sau orice altceva. Eu doar verificarea logic că aceste două sunt la fel. Else-- se dovedește acest lucru este domnul Boole again-- o valoare booleană, caseta de validare. Deci, dacă spun, exclamație point-- Dacă nu form.agreement.checked, tipa la utilizatorul la fel de bine. 

Deci această sintaxă veți vedea este foarte frecvente în JavaScript, în cazul în care aveți acest notatie punctata. Începi cu un obiect aici. Va veti scufunda mai adanc la un la o proprietate ca parolă. Și apoi ajunge la valoarea sa reală. Și din nou, aici este de intrare. Aici este parola nume. Iar valoarea sa este, indiferent de umană a introdus de fapt în. 

Deci, în toate aceste cazuri, m-am întors fals. Dar dacă nu, mă voi întoarce adevărat. Și așa acum vedem un utilizarea imperioase de când v-ar întoarce false la opri ceea ce face de utilizator și să facă el sau ea alege din nou sau de tip nou. În caz contrar, ne vom întoarce adevărat. 

Și permiteți-mi să introducă o alte variante de acest lucru doar semințelor o înțelegere cu privire la aceasta. Ei bine, în versiunea 2 a acestui, forma-2-- O voi face cu un val de o mână. Acest lucru este, pentru cei curioși, versiunea jQuery, cei care s-ar putea dori să se ocupa în special de bibliotecă. Dar să start-- și întrebări? Lasă-mă să pauză pentru moment, deoarece care a fost rapid și o mulțime. 

Dar mai frumos lucru de aici este că toate din Codul este destul de mult la fel. Lucruri noi este ceea ce este DOM? Ce sunt aceste dreptunghiuri? Ce sunt aceste noduri? Ce este o funcție anonim? Ce este o tratare a evenimentului? Dar din fericire, de cele mai multe, care este doar cerc complet de la, să zicem, săptămâna zero. In regula. Deci, ceva puțin mai interesant? Ei bine, în primul rând, permiteți-mi să merg înainte și deschide Google Maps. Și veți observa că pentru o clipă, pe a doua Split, observați ce se întâmplă atunci când Am faceți clic destul de repede. Și această conexiune la Harvard este atât de rapid că nu-l observa cu adevărat. Dar ce te fel de fel de a vedea dacă am faceți clic și trageți foarte repede? Aceia dintre voi vizionarea on-line, dacă încetini acest vitezei 0,5x, puteți vedea mai bine acest lucru. 

Ce se întâmpla doar înainte de a mă apasat și a târât? Lasă-mă să încerc să-mi fac here-- altceva, cum ar fi 90210. Să mergem mai departe. Asta a fost foarte repede, de asemenea. Ce zici de Disney World? Nu mergem. BINE. Ce ai văzut o fracțiune de secundă? La fel, cum ar fi, grinzi, nu? Substituenți de gresie? 

Ei bine, ce se întâmplă aici? Google Maps este un exemplu frumos de această tehnologie care se numește AJAX. Și acest lucru este în cazul în care vom începe să utilizați JavaScript într-o deosebit de mod ademenitor. Înapoi în a doua zi, a fost acest site numit MapQuest. Și ar fi trebuit să ia o screenshot din acest din anii 1990, în cazul în care dacă ai vrut să uite aici pe hartă, v-ar faceți clic pe o săgeată literalmente de până la partea de sus care ți-a arătat un pătrat diferită a hărții. Dacă ați vrut să vă deplasa la stânga, tu clic pe o săgeată care a aratat un pătrat diferită a hărții. Și unele site-uri face mai acest lucru astăzi. Dar chiar MapQuest a ajuns mai bine, cum ar fi Google Maps. 

În schimb, ceea ce este mai bine aceste zile este site-uri care folosesc AJAX. AJAX-- altfel cunoscut sub numele de Asynchronous JavaScript si XML, care este doar un mod fantezist de a spune o tehnologie sau tehnica pe care permite un browser folosind JavaScript pentru a face cereri HTTP suplimentare după ce pagina a fost incarcata. Deci, ce înseamnă asta? Ei bine, ar fi un fel de enervant în Gmail dacă de fiecare dată când a vrut pentru a verifica e-mail-ul, ai fi lovit literalmente de control-R sau Command-R sau faceți clic pe butonul Reload și pagina de darn întreaga ar reincarca. Dreapta? Ar clipi alb probabil pentru a doua. Te-ar vedea bara de progres prost. Și doar pentru a vedea dacă aveți noul e-mail, pagina web întreg și adresa URL esti la ar trebui să reîncărcați. 

Dar asta nu e ceea ce se întâmplă în Gmail. Dreapta? Atunci când primiți un e-mail nou în Gmail, ceea ce se întâmplă pe ecran? Doar apare, nu? Doar pare magic ca un rând nou în tabel. Care implică de fapt o sumă decentă de complexitate. De fapt, dacă te gândești la acest copac, care chiar dacă este unul simplu aici, Gmail-- și că va trebui să se uite la codul de a fi sure-- probabil are un tabel HTML sau poate o lista neordonata că face fiecare dintre cutiile poștale dvs. e-mailuri ca. 

Și așa că, dacă vă imaginați acest acolo este un copac în memorie atunci când sunteți folosind Gmail care arata un fel de fel de ca aceasta, atunci când Google își dă seama, ooh, aveți un e-mail nou, aceasta nu doresc pentru a reconstrui întregul copac. Mai degrabă, vrea să găsească nodul în copac care reprezintă Inbox și introduceți doar un nou nod. 

Deci, foarte similar cu PSET cinci, în cazul în care a trebuit să introduceți noduri într-un tabel hash, În mod similar face Google, prin intermediul Cod JavaScript care le-a scris, traverse acest copac, ne dăm seama unde este că inbox parte a ferestrei, și apoi introduceți un rând nou. Și un rând nou doar înseamnă unul sau mai noi noduri într-un copac. 

Și așa AJAX este această tehnică care permite exact acest lucru. După ce ați vizitat un URL, Cu toate acestea nebun lung este, și o dată pagina are fost încărcate, puteți încă apuca mai multe date de la internet-- fie că este vorba un e-mail sau o piesă a unui map-- apuca-l în spatele scenei și apoi introduceți-l în pagina astfel că omul nu prea trebuie să așteptați pentru ea. 

Facebook Messenger funcționează în același mod. Orice număr de alte websites-- oh, de fapt, chiar acest lucru. Adică, acest lucru este, sincer, un fel de un enervant dispun de aceste zile. Dacă aș începe să căutați cats-- acest este un fel de experiență de utilizare oribil. Doar începe să caute pentru mine. Ei bine, ceea ce o face? URL-ul nu sa schimbat cu adevărat când am început tastarea. Dar ce se întâmplă pe întreg teritoriul UE wire-- OK, hmm interesant. Ce se întâmplă pe întreg teritoriul UE sârmă aici doar devine mai ciudat. 

BINE. Așa că lasă-mă să merg mai departe și de a inspecta elementul și du-te la tab-ul de rețea și să încerce să facă acest tehnică și mai puțin despre pisici. Așa cum am tip, literalmente, pisici si-- ce se întâmplă per-- Eu nu am de gând să faceți clic asta. In regula. Deci aici, ce se întâmplă în fiecare timp am tip un caracter, aparent? Cum ar fi, nivel scăzut? Ce se întâmplă cu fiecare dintre cele caractere Sunt tastarea la tastatura mea? Da? Audiența: [neauzit]. 

DAVID MALAN: Exact. Fiecare dintre aceste personaje este merge la Google, la un moment dat. Ele sunt construirea unui șir de pe serverul lor, care reprezintă tot ce am scris până acum în. Și de fiecare dată am tip un alt personaj, acestea folosi sos lor secret al unui algoritm de căutare și dau seama, vrea să spună aceasta pagina cat sau aceasta pagina pisica sau altele asemenea? Deci, într-un anumit sens, mi oferă o mai bine experiența în care nu-mi place nici trebuie să completeze gândul meu. Și într-adevăr, e un util lucru, completare automată, în general. Dacă algoritmii lor sunt destul de bune și în cazul în care căutările mele sunt destul de evidente, Nu am să tastați tot cuvântul. Vor să-mi spui ce este Sunt de fapt căutarea. Deci, ceea ce Google numește instant de căutare este doar folosind AJAX, folosind codul care le permite să solicite conținut suplimentar prin intermediul unui browser web în spatele scenei folosind acest limbă nouă, JavaScript. Deci avem câteva minute. Și să mă suni la amicul meu Colton până pe scena, din moment ce părea în special distracție ultima dată să introducă o tehnologie că unii dintre voi au exprimat interesul în cazul proiectelor finale. Ne-am gândit că ar fi distractiv de a aduce un voluntar, deși, în prezent pentru a vă arăta un plus față de aceasta că Tu-- permite da, Am văzut această mână primul. Haide sus. Foarte bine facut. Loc de muncă bun. Am de gând să proiecteze acest lucru pe ecranul într-o clipă. Care e numele tău pentru toată lumea? 

EFA: Sunt Efa. 

DAVID MALAN: Etha? 

EFA: Efa. 

DAVID MALAN: Efa? 

EFA: Da. 

DAVID MALAN: Mă bucur să te văd. In regula. Lasă-mă să pregătiți. Vino la mijloc cu Colton aici. Ce Colton are în mâinile sale astăzi este un control de la distanță. Deci, mai degrabă decât doar sta acolo într-o lume tri-dimensională excelentă în jurul valorii de așa cum a făcut Colton, acum Efa poate de fapt în jurul valorii de mers pe jos de merge în sus, jos, stânga, și la dreapta ca o Nintendo sau Xbox controler. EFA: am de gând să cadă de pe scena. DAVID MALAN: voi sta aproximativ aici. Dar asta este un risc. BINE. Deci, mergeți mai departe și a pus cele de pe. Lasă-mă să merg mai departe și comuta la ecranul de aici. Permiteți-mi să dim luminile. Și Colton, lasă-mă să vin suport lângă tine. 

Vrei să explici aici cu microfonul ceea ce facem noi? Poftim. 

COLTON: Sigur. Deci, acum suntem de încărcare de până oculus, Cred operating-- nu funcționează sistem, dar programul principal, în cazul în care puteți accesa toate jocurile și Aplicații care sunt în bibliotecă. Deci, chiar acum, aceasta ar trebui să spun atingeți touchpad-ul pentru a începe. TouchPad va fi pe partea dreaptă a setului cu cască. Deci, mergeți mai departe și tap-- EFA: Oh, omule. DAVID MALAN: Da, acolo te duci. Calitatea Efa este de a vedea este calitatea mult mai mare. Acesta este doar Wi-Fi aici. COLTON: Deci, ce ești O să vrei să faci se uita spre partea de sus dreapta a ecranului. Da, jocul pe partea dreaptă foarte sus. Și apoi atunci când sunteți selectarea l, atingeți din nou touchpad-ul. Cred că Dreadhalls sale. Și apoi aici este un-- aici, să mă ține ochelarii pentru tine. 

Asa ca am doar ia dat un controler. Deci, acum el poate controla jocul. El poate deplasa și chestii de genul asta. Deci, mergeți mai departe și privi în sus la partea de sus. Ar trebui să vedeți un joc nou. Deci, mergeți mai departe și se poate face acest lucru. Acum, ar trebui să fie în măsură să controleze te cu operatorul, precum și, de îndată ce jocul incarca aici. Acest lucru ar putea fi un pic înfricoșător. 

EFA: Acum spune-mi. BINE. 

COLTON: Bine. Deci confirme că puteți muta în jurul valorii. BINE. Puteți muta în jurul valorii. Perfect. Deci, dacă te uiți în jos, ai o hartă. Harta vă arată unde vă aflați. Poti sa te uiti în jurul camerei. Puteți activa complet în jurul valorii. Da, exact. Intoarce-te. 

Deci, uita-te la stânga. Cred că e ceva ce se poate ridica pe un butoi în cameră. 

EFA: Cum pot obține harta din drum? COLTON: Uită-te în sus. Uită-te în sus. In regula. Nu te duci. Acum mergeți mai departe și chiar se întoarce. Asa ca uite mai departe pentru a stânga. Păstreze în mișcare la stânga. Continuă să cauți stânga. Continua. Da. 

EFA: Oh, în acest fel. 

COLTON: Da. Walk spre ea cu controlerul. Nu te duci. Acum ar trebui să spun ridica-l. Nu te duci. Ridică-l. In regula. Acum, hai să plecăm din această cameră. Du-te și umblă la acea ușă. Deci ai de gând să hold-- se spune țineți apăsat butonul pentru a forța deschide. Deci, mergeți mai departe și țineți apăsat butonul. Da, fortandu-l deschideți. In regula. Loc de muncă bun. Acum suntem de mers pe jos din cameră. Deci, am de gând să părăsească restul de până să te și vezi ce afli. EFA: Nu mă duc în camera întunecată. Oh, așteptați. Acum trebuie să mă duc pe hol întunecat? OK, mă întorc [neauzit]. COLTON: Bine. Unele mai multe elemente pentru a ridica. Se pare că unele monede. Asta e un pick de blocare. Deci, dacă veți găsi un blocat ușă, puteți utiliza. Esti speriat? 

EFA: Nu încă. COLTON: OK. 

Pretend-- da. Doar pretinde că ești de fapt stând acolo. Și dacă te întorci around-- le-ați luat pentru a te obișnuiești cu el. Dar are sens. DAVID MALAN: Și în timp ce continuă să Efa juca, deoarece am putea face acest lucru toată ziua, putem toți vârful-n picioare aici. Dar avem alte două perechi, dacă doriți să vină și să se joace. În caz contrar, vom vedea vă următoarea miercuri. Vă mulțumesc pentru a voluntar noastră de astăzi. [Aplauze] 

[MUSIC - "Seinfeld tema"] SPEAKER 1: Ei bine, eu sunt pune o nouă PL montare pe. Am schimbat OLPF-- 

SPEAKER 2: Deci, ce exact faci? 

SPEAKER 1: Ei bine, fiecare dintre these-- aici, să-ți arăt asta aici. Puteți vedea aici. 

SPEAKER 3: Cred că sunt bine cu acestea. Vrei ceva mai mult? 

SPEAKER 4: Nu, sunt bine. [Neauzit]. 

SPEAKER 3: Nu, [neauzit]. Au unele. SPEAKER 1: culori diferite. SPEAKER 2: OK. SPEAKER 1: Deci în cele din urmă ceea ce este nu este reglează culoarea de--