DAVID Malan: Molt bé. Aquest és CS50, i això és Al final de la setmana nou. Ha estat un remolí sobre els últims dies. I un problema conjunt de set, si ets de genoll profundament en ella, s'adonen que hi ha un bon poc nou que hi és. Però anem a veure si no podem piece tot junt aquí breument abans després de virar en encara una altra direcció i visió On més podem anar. 

Així que fins ara, hem parlat d'HTML. Hem parlat de CSS. Hem parlat de PHP. Vostè ha començat a experimentar SQL. Avui, parlarem una mica sobre JavaScript. Però, com fer tot això dispars idiomes encaixen? 

Així que parlem la setmana passada sobre la noció de tenir un servidor. Així que anem a dibuixar aquest rectangle com un servidor web aquí. I un servidor web serveix segurament arxius. I alguns d'aquests arxius poden ser arxius HTML. Així que una de les coses que un servidor web pot escopir podria ser un arxiu que només haurem de dibuixar com aquest conté alguna cosa d'HTML. Així que en termes simples, el que no HTML et deixa fer? 

AUDIÈNCIA: Pàgina vegi bonic. 

DAVID Malan: OK, fer una pàgina veuen bé, encara que crec que he demostrat que d'altra manera. Així HTML no permeten distribuir les pàgines estructuralment, i que li permet espècie d'estètica marcar una pàgina, marcar el contingut estàtic, de manera que llavors pot veure amb un navegador web. 

Però aquesta és la clau. És el contingut estàtic. Vostè escriu, el guarda, i després vostè ho envia. I el servidor web serveix llavors en mans dels seus visitants. 

Però ens estilitzen coses usant una diferent idioma completament. Comencem a utilitzar un atribut d'estil en certes etiquetes. I l'atribut d'estil Posem-nos coses com la mida de la font i el color. I és probable que hagi començat a descobrir, o aviat ho sabrà per última projectes potencialment, però, una altra propietats que es poden utilitzar en el CSS. I així, en termes senzills, el que llavors realment fa CSS? Aquests són només alguns exemples dels mateixos. Què farem això HTML no sembla d'allò que hem vist fins ara? 

AUDIÈNCIA: Definir estils per tu mateix. 

DAVID Malan: Definir estils per si mateix. Així que definir les coses com les classes a mesura que pot haver trobat, o únicament identificar els nodes d'un document per que es pot estilitzar ells. Però més específicament, jo diria que el CSS realment li permet prendre les coses de la última milla i li permet especificar molt més precisament l'estètica, mentre que HTML en la seva major part permet a estructurar les seves pàgines. 

I tot i que hi ha alguns valors per defecte, com vam veure l'etiqueta per una etiqueta de partida, que en termes generals fet coses grans i audaços. Aquesta és una definició bastant genèric de l'etiqueta - gran i en negreta. Què mida de la font és aquesta? De quin color és? Com negreta és això? I CSS li permet més precisió coses afinar l'estil. Així com el disseny, ja que alguns que has vist. 

I, francament, CSS és una mica d'un llenguatge desordenat. És molt poderós en que vostè pot fer literalment, qualsevol lloc web que vostè ha vist a la web avui en dia amb ell, però és un tipus de dolor al coll. I alguns de vosaltres heu colpejat el cap contra les parets ia només per fer alguna cosa estúpid com a centre d'un menú en problema va fixar 07:00 si vostè ha arribat a aquest punt ja. 

Però adonar-se, aquestes coses més fàcil amb el temps. Es comença a notar patrons. I un cop més, Google va a ser el seu amic per a les diverses formes en què es pot resoldre aquest tipus de problemes. 

I m'atreveixo a dir amb CSS i HTML més en general, pot resoldre els problemes de moltes més formes, la qual cosa podria molt bé ser correcta, del que podria en alguna cosa com C, fins i tot Ara PHP o JavaScript. Hi ha simplement molts diferents maneres d'establir les coses. 

Però això va començar a desordenat, vam dir. Només tipus de commingling seu HTML i el CSS amb l'atribut d'estil era una mica descuidat. I així que en comptes vam dir, una mena de parlant en abstracte, que vostè ha almenys començar amb el factor el teu CSS probablement. Atribueix No és el seu estil, però almenys utilitzar l'etiqueta d'estil dins del que part de la pàgina web? 

AUDIÈNCIA: Head. 

DAVID Malan: En el cap. Fins ara, només teníem el títol fins allà, però també es pot afegir un estil de etiqueta, i vostè pot posar el seu CSS més o menys parlant cap a la part superior de la pàgina. Però després ens vam donar un pas més coses i factorizada que més en un arxiu separat. 

I pel que aquests dos arxius van ser d'alguna manera ara vinculat. I de fet ho va ser el etiqueta que va fer això. I el que era un dels objectius globals motivacions per factoritzar nostra CSS encara més? 

AUDIÈNCIA: Reutilització. 

DAVID Malan: Reutilització. Cert? Vostè va poder haver vist en p-7 set ja que gran part de les pàgines, l' pàgina de compra, la pàgina de venda, el pàgina de la cartera, són probablement estructurat una cosa similar. Hi ha un logo finances CS50 a la part superior llevat que t'hagis decidit a canviar-lo. Hi ha un peu de pàgina en la part inferior de les pàgines. I CSS li permet llavors al factor fora en un arxiu separat de manera que si que desitja canviar alguna cosa a nivell mundial a través de tot el seu lloc, vostè pot realment només canvia en un sol lloc. 

Però hi ha un preu que es paga potencialment en haver un factor fora de la CSS del meu arxiu HTML en un a part arxiu que fa referència amb la etiqueta, que vam veure dilluns. Quin podria ser el costat negatiu d'això? Pensant fa una setmana per quan estem parlant d'HTTP i TCP / IP i com funciona Internet. Una mica per aquí? 

AUDIÈNCIA: Es necessita més temps. 

DAVID Malan: Es necessita més temps. Per què? 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: Si. Per tant, es podria dir que té una mica més de temps. Perquè un, el CSS és, òbviament, no en el mateix arxiu. Així que ara vostè ha de no fer un, sinó dos peticions. I cadascuna d'aquestes peticions, com vam veure en Chrome en l'anomenat inspector, i ens fixem en la fitxa de xarxa, cadascuna d'aquests arxius requereix un HTTP sol · licitud, que vam veure fa una certa quantitat de temps. Ara, potser no és molt. Potser és només 20 mil · lisegons. Potser és 200 mil · lisegons. 

Però pensar en una pàgina com Facebook, o CNN, o Google, que són molt més grans que els exemples que hem mirat fins ara. Aquestes pàgines poden tenir desenes d'arxius, cadascun del que podria requerir un descàrrega d'un arxiu. Així que les coses poden potencialment començarà a disminuir. 

I sobretot en aquests dies en què tots tenen telèfons mòbils a la butxaca i connexions d'Internet més lentes, havent de esperar uns quants mil · lisegons, uns pocs més milisegons addicional arxius en realitat pot ser lent. La latència és la paraula que descriu la tipus d'esperar que vostè ha de experiència quan s'espera alguna peça d'informació. 

Però hi ha un costat positiu. Així que no tot és una espècie de - que en realitat és una mica d'un puja i baixa aquí. Downside ara, però el que els navegadors poden fer si són intel · ligents, per tal d'evitar haver de sol · licitar el mateix styles.css nou arxiu pot ser per fer què? 

Memòria cau ella. Així que l'emmagatzematge en memòria cau - C-A-C-H-I - generalment significa aquí només per salvar el presentar la seva sol · licitud per primera vegada, i a continuació, comproveu la memòria cau per a això. Assegura't que ets una mena de contenidor d'emmagatzematge, i si vostè ja té un còpia de styles.css, encara que algun altre pàgina en el p-set, o de qualsevol lloc web, demana de nou, només per donar la usuari que mateixa còpia en memòria cau. No et molestis a demanar-lo. 

Downside allà, però, com alguns de vostès han ensopegat amb la p-set. Si es fa un canvi al servidor i vostè torna al navegador i que recarregar, de vegades el navegador fa un favor i no es molesta tornar a descarregar l'arxiu styles.css perquè, anem, quines són les probabilitats que aquests estils que Facebook utilitza canviaran hora a hora o dia a dia? És bastant baix. Ells podrien canviar amb el temps, però no per minuts o per hores. 

Així que un truc, ho dic en fer web desenvolupament, que sovint es mantingui premut el tecla de majúscules, per exemple, i després feu clic a recarregar en el seu navegador, i que la voluntat solen dir la recàrrega del navegador tot, encara que ja té a la memòria cau. Així que de nou, avantatges i desavantatges, però tots ells en última instància, decisions de disseny. 

Així que ara, no ho vam fer només acabar la història aquí. Si ara torno i tornar i tornar i de nou, vam començar a presentar no només HTML, però PHP. Així que en termes simples, el que Què PHP fem? 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: Què és això? 

AUDIÈNCIA: Introduir la lògica en el codi. 

DAVID Malan: Sí, introduir lògica en el codi. Així que és un llenguatge de programació real amb bucles i variables, i funcions i condicions, i tots les coses que hem estat utilitzant camí de tornada quan des del principi. I PHP, hem vist, es pot utilitzar ja sigui en la línia d'ordres - és no ha de tenir res a veure amb la web, tot i que això és realment els seus orígens i el que tendeix ser bo i propici per al - però es pot utilitzar PHP simplement per la naturalesa del fet que té una impressió () funció, i una funció de () printf, o una funció () fet. Hi ha moltes maneres de pot imprimir text amb PHP. 

Per tant, pot utilitzar aquesta programació llenguatge per a sortida exactament el que parlàvem abans. Pot generar dinàmicament seva HTML. Potser no tot. Potser les coses dures de codi, com el capçalera i el peu de pàgina i el logotip, i els fulls d'estil, i tot això. Però per alguna cosa com p-7 set, on hi ha la manipulació d'accions i mostrant la cartera de l'usuari, que és canviarà de forma dinàmica, es pot segurament utilitzar PHP i la lògica que dóna vostè com un llenguatge de programació per sortida dinàmicament subconjunts de la pàgina. 

Per això, quan es parla de llocs web dinàmics, o la programació web, això és el que realment estàs parlant. L'ús d'un llenguatge com PHP o coses anomenat Python o Ruby, o Java, o Encara en altres llengües, per consultar una base de dades sovint, o un altre servidor, i després escopir dinàmicament HTML. 

Ara el resultat final, com un part, és que la majoria de llocs web d'HTML, incloent la seva p-7 set, és probablement serà un gran embolic si ens fixem en la font codi en un navegador. Això no és una gran cosa. En aquest punt, quan ens preocupem per estil, ens preocupem pel coses que vostè escriu. No anem a preocupar-se per les coses que el que les seves sortides de codi. Així que no et preocupis per la sagnia aquí si es tracta de PHP que és en realitat la sortida de material. Després de tot, el navegador no li importa, i un ésser humà no es busca a la font de totes maneres. Tenim el personal, per exemple, seria es busca en PHP. 

Així que et vaig a donar un exemple ràpid ara de per què això podria ser més útil. Així que, francament, no puc recordar l'última vegada que utilitza C per resoldre un problema en el món real. Probablement va ser a la universitat quan Que necessitava utilitzar un llenguatge que era bastant baix nivell i em va donar la oportunitat de fer alguna cosa molt elevada realitzant per salvar realment el major nombre de CPU cicles com vaig poder, en gran part, perquè jo estava fent servir enormes conjunts de dades, i cada cicle de la CPU va explicar. I, francament, fins i tot en coses com els telèfons aquests dies i altres dispositius en el qual no té absolutament tant memòria i no té absolutament com molta CPU, utilitzant llenguatges més ràpids encara és atractiu. 

Però en el món real, quan s'acaba de vol llançar un programa conjunt per analitzar algunes dades, o que hagi recollit un munt de registres per algun grup d'estudiants i vol molt automatitzar ràpidament l'enviament de correus electrònics un per un per a cada un dels sol · licitants de registre, vostè va a aconseguir un llenguatge d'alt nivell de C per dir-ho. Una cosa així com PHP o Python o Ruby, o una mitjana dotzena d'altres que hi ha en aquests dies. Però els tres són probablement el més de moda en aquests moments. 

I el que això significa és que es pot obrir un editor de text com el gedit o més qualsevol altra cosa i llavors simplement començar escriure codi sense haver de preocupar sobre la compilació, sense haver de realment preocupar-se per la gestió de memòria, tenint en compte però que una mica deixadesa eventualment tornarà a mossegar si el conjunt de dades es més gran o el problema s'engrandeix. Però el que això significa per a la nosaltres és el següent. 

Déjame anar endavant i corro Speller del problema va fixar sisos. Així que aquesta és la meva implementació basada en triennis que he fet servir en la gran tauler on jo no vaig tan bé. Tornarem en el termini d'una setmana i revisitar aquells que acaben sobre de la gran tauler a la nostra última conferència. Però per ara, deixeu-me anar endavant i només executar la meva solució en el text, i ho farem la Bíblia King James, i aquí anem. 

Així que aquests són tots els suposadament paraules mal escrites de Rei James Bible. I la meva aplicació es mig segon en total. Així que no està malament en aquest en particular de l'equip. Però pensa en el molt codi que havia d'escriure. Penseu en la quantitat de codi que havia d'escriure. Penseu quantes hores vas passar al D-hall o el teu dormitori o on sigui en realitat la codificació fins a aquesta solució. 

Bé, si en realitat tinc un nivell més alt llenguatge com PHP, prendre nota de el que puc fer aquí. En primer lloc, suposem que això és en lloc el seu codi de distribució. Es tracta d'un arxiu anomenat abecedari. Està disponible com a part de l'actual codi de distribució. I jo vaig a agitar la mà a màxim dels detalls, però això és en realitat un exemple interessant de com vostè pot ser el port un llenguatge com C a PHP. Jo, literalment, obrir dues finestres de text, un amb la meva versió C de speller.c, i jo només vaig començar a traduir en el meu dirigir-se a PHP i escrivint a terme utilitzant les funcions equivalents més propers. 

Així que algunes d'aquestes coses són diferents. Ens vam veure l'última vegada que PHP no utilitza incloure en la mateixa forma. S'utilitza típicament requerir, encara que incloure existeix. Definir és una mica diferent de # Defineix en C, però això és com fem una constant. $ Argc resulta que hi ha en PHP, pel que hem vist abans. Aquests són només variables, totes de de començar amb signes de dòlar. Recordem aquests són només un munt de surar punts. 

Així que conte llarg, us convidem a voltejar a través d'aquest cas curiós, això és gairebé una conversió de la línia-per-línia de la Versió C de speller.c en PHP. I es podria fer això de nou per mitja dotzena d'altres idiomes. 

Però l'interessant és el següent. O el que és francament descoratjador és la següent. Déjame anar endavant i escric sobre dictionary.php, i afirmen que sóc seguirà endavant i tornar a posar en pràctica problema establert sis aquí. 

Així que proposarem en primer lloc que en aquest arxiu, que s'implementarà en PHP, així que anem a obrir els meus etiquetes com això. Permetin-me donar a mi mateix 1 mundial variable $ size obté zero. I jo vaig a donar jo mateix una taula hash. Vaig a utilitzar una taula hash d'aquesta cosa. Com declaro una taula hash en PHP? Fet. D'acord. 

Suport de manera oberta claudàtor de tancament representa el que en PHP, com hem vist? Un arsenal, però una matriu que pogués ser un array associatiu. Una matriu associativa és una estructura de dades que associa claus amb valors. 

Ara bé, en el més simple numèricament indexats array, aquestes claus són què? Zero, un, dos, tres, no? Old school coses de tornada de C. Però pot també ser cadenes com foo i bar, o Maxwell, o qualsevol cadena. Així que puc aprofitar aquesta en un moment. 

Déjame anar per davant i declaro una funció com - farem load () en primer lloc. Així funció load (). I PHP és una mica diferent, ja que que, literalment, escriure la funció, però que no escrigui un tipus de retorn. Vaig a seguir endavant i dir que el funció load () ha de prendre en argument $ diccionari, simplement com la versió C va fer. Jo faré això de la memòria. 

I proposo que sóc va a fer això. Simplement faré foreach. Vaig a cridar a una funció anomenada file (), passant el nom d'aquesta presentar, que és la variable $ Diccionari com $ paraula. I després a l'interior del meu bucle aquí, estic seguirà endavant i emmagatzemar en el meu $ $ Taula que es corri la veritat. Fet. Oh, espera. Fet. D'acord. 

Aquesta és la funció load () dir en PHP. Ara, per què funciona? I jo sóc una mena de trampa aquí. 

Així que, un, foreach vam veure breument l'última vegada. Només vol dir que vostè pot recórrer en iteració una matriu sense molestar amb i i n i plus plus, i tot això. Diccionari és, per descomptat, el nom del fitxer, una mena gran o petit, els dos diccionaris que fem servir l'última vegada. L'arxiu és una funció que obre el text arxiu, el llegeix en línia per línia, i mans fer una còpia d'una enorme varietat, cada un dels elements és una línia d'aquest arxiu. Així que aquesta és la combinació de fopen, i fread i while, i fclose, i tot això. Finalment, com la paraula només significa que és la variables que tindré accés a en cada iteració en aquest bucle. 

Així que en resum, aquest acudit aquí voldrà dir obrir l'arxiu el nom està en diccionari, la variable, iterar sobre línia per línia, i cada vegada que rebi una línia, emmagatzemar en una variable anomenada paraula, i després fer alguna cosa amb la paraula. Què vull fer? Vull posar paraules al meu taula hash. 

Bé, puc posar alguna cosa al meu taula hash igual que en C utilitzant claudàtors. Aquest és el nom del meu taula hash. Vaig a índex en el hash taula en aquest lloc. Així que no entre parèntesis zero, no suport d'un. Suport citar alguna cosa unquote, qualsevol que sigui aquesta paraula és. I igual que vostè pugui tenir en el seu trie treball taula hash, que acaba de botiga efectivament un booleà, implícitament o explícitament. Fet. Estic emmagatzemant el valor veritable. 

Ara hi ha un parell de coses Vaig a tallar les cantonades aquí. Tècnicament, no hi haurà un molest nova línia, / n, al extrem de cadascuna d'aquestes paraules. Així que probablement hauria de cridar a una funció PHP anomenat chop (), que literalment tallar això. I jo realment necessito fer una cosa més. Probablement hauria d'incrementar la mida de cada iteració, així que em quedo amb la pista a nivell mundial del que és. I la veritat, i aquesta és una de les aspectes més estúpids de PHP, si ets utilitzant una variable global, ha dir explícitament que es trobi. Així que vaig a estendre en mundial $ Size, taula global de $, i ara la meva funció és completa. 

Així que no és tan simple com abans, però Probablement va prendre menys temps que el C versió, potser? D'acord. 

Així que ara anem a fer la funció de verificació (). A veure si això va tenir almenys el hores i hores que ens va portar a C. Així m'ho dius a mi anar per davant i declaro comprovar com una funció. Presa en l'argument la paraula, que és vindrà d'ortografia. I jo només vaig a comprovar si el següent isset variables, taula suport strtolower de la paraula - anem a equilibrar tots els meus parèntesi - a continuació, tornar true. Altres vendes - que era realment el disc part d'aquest programa. Si no, retorna false. Fet. Això és verificació (). 

Ara, per què funciona això? Bé, un vaig passar en una paraula, que és una cadena. Dos, estic revisant l'interior del hash taula, que es diu $ taula. Estic forçant a minúscules trucant una funció molt similar tolower () en C, però això fa tota la paraula, ni un sol personatge. I si això s'ajusta, en altres paraules, s'estableix un valor, en altres paraules, si és veritat, llavors sí, es tracta d'una paraula. Perquè jo vaig posar aquí amb load (). I si no, vaig a tornar false. 

Ara els altres són fàcils. La mida de la funció (), com puc fer això? Jo bàsicament faig tornar $ size. Però tècnicament necessito fer aquesta cosa molesta. I en realitat fins a sentir, jo estava tallant una de les cantonades de més. Realment necessito fer taula global $. 

Però una vegada dit això, descàrrega). Unload () és increïble. Funció de descàrrega (). Com em vull posar en pràctica unload ()? Fet. D'acord. 

Així que descarregar (), la gestió de memòria és completament atesos per vostè en una mena PHP i molt de llenguatges d'alt nivell. Així que això és increïble. Com per què dimonis ho vam passar el passat vuit setmanes més en l'escriptura C aparentment molt lent, realment el temps consumeixen problemes amb desenes d'hores de treballar en el nostre haver? 

Bé, d'una banda, això pot funcionar bé per a petits programes. Sens dubte va accelerar el meu temps de desenvolupament. Però anem a veure què passa en el món real. 

Déjame anar en aquest directori en una finestra de terminal. Hi ha ortogràfic. I fixin-com un part, i és possible que s'han trobat amb aquest problema en conjunt sis o set problemes n. No té estrictament a arxius PHP per tal. php. Si poses una línia com la primera a la part superior, que és una línia especial de sintaxi que essencialment significa trobar el programa que es diu PHP i l'utilitzen per interpretar aquest arxiu. Així que ara ningú sap realment que Estic corrent un programa PHP. Puc córrer simplement com si van ser una mica compilat en C. 

Però aquí està la cosa. En realitat, farem això una altra vegada. Dropbox/pset6 /. Hi ha ortogràfic. Acceptar, 0,44 segons. Va arribar ràpid aquesta vegada. 

Ara entrarem en la versió de PHP. Un bonic detall. Però només pensar en la quantitat de temps Vaig salvar en horari d'oficina. D'acord. 

Així 3,59 segons, que en realitat no sona exacta tampoc. Però això és perquè conte llarg, quan s'està imprimint una gran quantitat de coses a la pantalla, que si alenteix les coses. El que realment es va prendre el CPU en el aparell era 3,59 segons, en diferència de C, que va tenir 0,44 segon més recentment. Això és realment un ordre de diferent magnitud. 

Llavors, on està aquest preu ve? Per què és tan lent? Per què PHP realitzar tan malament? Danielle? 

AUDIÈNCIA: No ho va fer realment utilitzar una taula hash. 

DAVID Malan: Jo realment no utilitzar una taula hash. Així que tipus de fet. Així que és una matriu associativa. El més probable, si la gent de PHP són molt intel · ligent, que utilitza per sota de la campana una taula hash real implementat en alguna cosa com C o C + +. Però. Sí 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: Si. Així que cadascuna de les funcions que vaig escriure ara - En realitat, es pot dir que una vegada més un mica més fort? 

AUDIÈNCIA: Cadascuna de les funcions que Ha inclòs té molt més completa la capacitat de - 

DAVID Malan: Així que això és molt cert. Hi ha molt més sobrecàrrega que estem sense veure realment al centrar-se només en dictionary.php, que només vaig escriure. Per contra, hi ha tot un intèrpret va en el fons. De fet, quan em vaig trobar amb aquest programa, no s'estava executant zeros i uns compilats dissenyada per a la meva CPU Intel. Més aviat, s'estava executant línia per línia Codi PHP que es veu exactament com ho va escriure. I així, cada vegada que utilitzi un llenguatge interpretat, que en realitat no pagar aquest preu. Va a portar el seu temps per llegir el seu principal arxiu a baix, d'esquerra a dreta i, a continuació, executar cada línia una i altra vegada. 

Ara bé, en realitat, sobretot en la web, en realitat es pot accelerar aquest procés en emmagatzemar en memòria cau els resultats de la Codi PHP s'interpreta. I això té sentit en la web, ja que si vostè no té un usuari com jo aquí, però 1.000 o 10.000 usuaris, potser la primera vegada que l'arxiu és accés és lent, però a partir de llavors que és molt més ràpid. 

Però això també, de nou, és una solució de compromís. I per alguna cosa com una dada de la investigació conjunt, o fins i tot una cosa tan gran com això, els seus usuaris amb el temps es començar a sentir que la desacceleració. 

Així que en resum, interpreten les llengües són molt de moda, molt popular, i francament probablement els idiomes que ha d'arribar a l'hora de resoldre problemes després de CS50. Però t'adones de la quantitat que està realment benentès sota de la caputxa realment aquestes últimes setmanes d'haixix taules i arbres, i tracta, que s'utilitzen en última instància a la realitat implementar coses com obrir el parèntesi, claudàtors, que podem ara gratitud donar per fet. 

Així que donem una ullada ara en aquest context web. I vaig esmentar l'última vegada que no hi ha un munt de superglobals en PHP que no són realment rellevants en la línia d'ordres. Són més rellevant en el context d'utilitzar PHP en un context web. Així s'executa PHP al servidor web amb la finalitat per generar coses com HTML. 

I ens mirem a $ _GET i $ _POST, i aquí és on automàticament als usuaris ' entrada acaba simplement si vostè presenta una formulari en un arxiu amb extensió. php en un web servidor com l'aparell. Però anem a veure breument en $ _COOKIE I $ _SESSION. 

En termes senzills, què és una galeta com vostè ho entén en el context de utilitzant la web? 

AUDIÈNCIA: arxiu de l'ordinador. 

DAVID Malan: Si. És un arxiu a l'ordinador de l'usuari plantat per qualsevol lloc web li passa a visitar. Així que quan vostè va a Facebook, quan es va a bankofamerica.com, quan vas a google.com, quan vostè va a gairebé qualsevol lloc web en el món en aquests dies, incloent cs50.net una galeta es planta en l'equip, la qual cosa és ja sigui un valor emmagatzemat a la memòria RAM en el seu ordinador a la memòria del seu navegador, o de fet de vegades un fitxer emmagatzemat en el seu disc dur. 

I el que normalment s'emmagatzema a l'arxiu no és el seu nom d'usuari, no la seva contrasenya, en general no és una cosa sensible llevat que el lloc web no és tan bo amb la seva seguretat, sinó més aviat és un identificador únic gran entre els altres coses. És un nombre aleatori gran plantada en el seu ordinador, però es pot pensar en com una mena de segell virtual de mà com de un club o algun parc de diversions que permet que el personal, els amos d'aquest servei, per recordar qui ets. Així que si el nombre aleatori gran és com 12345678, encara que això és, òbviament, no massa aleatòria, pensar que a mesura que el segell a la mà que quan vostè visita facebook.com per primera vegada, es eradicar aquest número a la mà. I després perquè vostè parla d'HTTP, ser un explorador, i perquè Facebook òbviament parla el mateix com una banda servidor, el protocol HTTP diu que en qualsevol moment que visiti posteriorment facebook.com, si es tracta d'un segon més tard, una hora més tard, fins i tot al dia següent, sempre que vostè no té explícitament tancat la sessió, el que efectivament és com rentar-se les mans. HTTP diu que vostè ha de presentar la segell a la mà cada vegada que tornar a aquest lloc web. 

El que Facebook llavors no és que mira aquest segell a la mà i diuen, oh, 123456789. No sé a primera vista que aquest és David Malan a Cambridge, Massachusetts, però es poden revisar el seu base de dades i dir, oh, la persona en aquest equip plantem 123456789 és David Malan de Cambridge, Massachusetts. Anem a mostrar aquest usuari i després el seu perfil pàgina o el seu News Feed. 

Però hi ha un problema aquí si aquesta és de fet com funciona la web. Fem una ullada a un exemple ràpid. Anem a anar en realitat dir facebook.com. Però abans que poguéssim anar-hi, i molt que em vagi per davant, ia obrir Chrome Inspector aquí baix. Deixa que et miri a la fitxa xarxa. I ara anem a seguir endavant i escriviu en https://facebook.com. I jo vaig a fer això per el que no veiem totes aquestes redireccions i residus temps mirant a través d'ells. Permetin-me prem enter. 

Està bé. Veiem un munt de peticions. Arriba Facebook. Hi ha un munt d'arxius. I aquí, per la meva menció de latència última vegada, això és una gran quantitat de peticions HTTP. Però el primer és, probablement, la més interessant. 

Així que anem a desplaçar-se fins aquí, i Vaig a apropar una en un segon. Això serà una espècie de un desastre, però anem a veure. Facebook ens està enviant un Tot munt de coses. 

Però espera, interessant. Estan plantant no un, sinó quatre segells mà a la mà aquí. Set-Cookie, Set-galeta Set-Cookie, set-cookie. I hi ha algunes característiques aquí. Tots ells esmenten alguns tipus de caducitat. I sembla que Facebook és l'esperança perquè em recordis fins a 2015. Així que això és probablement el temps pel qual He de tancar la sessió o que només va a assumeixo automàticament que sóc no tornar. Així que això és en realitat un decent quantitat de temps. 

I hi ha alguna altra coses que fer aquí. Aquesta galeta sembla ser la força esborrat dient que va expirar el 1970 abans que existissin les galetes. Així que el navegador només va assumir bé, això és com rentar el segell mans. 

Però ara, quan el meu navegador fa una sol · licitud posterior - m'ho dius a mi anar endavant i fer això 1 i recàrrega. Ara vaig a retrocedir a la superior petició i baixar aquí, les capçaleres de sol · licitud. Note això. Així que ara estic baix no capçaleres de resposta, però noti que diu capçaleres de sol · licitud. I noti que el meu navegador com a part de seva sol · licitud després de colpejar recàrrega té enviat almenys la següent informació. No estableix galetes, però galeta. Així que aquesta és la línia, la capçalera HTTP de manera dir-ho, on el meu navegador és una espècie de, sense que jo ho sabés presentar la mà per a la inspecció de Facebook. 

Així doncs, aquestes galetes poden ser utilitzat llavors per què? Per recordar qui és vostè, o recordar com moltes vegades que he estat allà, o realment res. 

Així que aquí està counter.php. I permetin-me acostar la font. I cada vegada que torno a carregar aquesta pàgina, previ avís sigui per recordar el nombre de vegades Jo he estat allà. Bé, això no és tan impressionant. Anem a tancar aquesta llengüeta, i ara anem a tornar a http://localhost/counter.php. 

Oh, això és interessant. Encara recordava, fins i tot encara que jo vaig tancar la pestanya. I, francament, si tanco el navegador, si s'aplica de la manera correcta, jo Encara recordava que aquest usuari és que ell o ella era la primera vegada, i només una vegada que entro al menú de Chrome, que aquí sou aquí, i vagi a Història, i feu clic a Elimina les dades de navegació, com alguns de vostès poden tenir en el passat, només llavors les galetes realment ser esborrat durant web desenvolupament. 

Per tant, si anem - anem a tancar fins gedit aquí. I si ens anem ara a aquesta imatge. Déjame anar al nostre vhosts / localhost / públic, i m'ho dius a mi fer counter.php. Tingueu en compte que aquesta és una molt programa senzill. És un lloc web molt simple. 

Així que la part superior de l'arxiu és a comentaris. Però aquí hi ha una nova línia que vostè pot han vist ja en p-7 set, session_start (). Es tracta d'una línia de codi PHP que bàsicament li diu al servidor web, donar a Assegureu-vos d'estampar les mans i fer assegura't de revisar segells de mà. Això és tot el que fa la línia, i fa tot aquest procés per a nosaltres. Llavors noto Acabo dues sucursals aquí. Si el comptador de clau en l'interior d'aquest variable global especial anomenat $ _SESSION Està ajustat - en altres paraules, si hi ha alguna cosa de valor allà - anem a fer-ho i ho emmagatzemen en un local de variable anomenada $ taulell. Si no, anem a assignar $ counter el valor predeterminat de 0. 

Ara, aquí hi ha un aspecte de PHP que és tant una benedicció com una maledicció. PHP és una mica descuidat. Així, mentre que en C, ¿quina seria la àmbit d'aplicació de comptador d'haver estat ja sigui aquí o aquí? 

Hauria estat confinat a aquestes claus. Saps una cosa? En PHP, hi ha fins i tot fora dels claus, aquí, i aquí, i aquí, i aquí, i fins i tot per sota. Per això dic que és una benedicció en el sentit que vostè no ha de pensar com dur com ho vam fer fa setmanes. Però també és una mica d'una maledicció en què sense importar on s'utilitza una variable en PHP, almenys en un programa com aquest, accessible a nivell mundial per bé o per mal. Així que cal tenir en compte ara que les variables no poden ser indefinits. És possible que calgui preveuen altres disposicions. 

Però, què faré, en última instància? Vaig a guardar a l'interior d'aquest mundial variable com un valor de la comptador de clau el resultat de fent contra més 1. Així que això és només l'aritmètica que fa el incrementación d'aquest comptador. I el fet que estic emmagatzemant que valor de nou aquí voldrà dir és que actualitzar la base de dades essencialment a recordeu que 123456789 d'usuari ha estat aquí dues vegades. I quan ho faig de nou la propera vegada que recarregar la pàgina, es va a comprovar el meu segell a la mà i dir, ah, 123456789 usuari té ara estat tres vegades. 

¿I què PHP i llenguatges similars estan fent per a nosaltres és que estan pensant com i on i per quant temps per emmagatzemar els valors en aquest especial superglobal. I això superglobal la propera vegada que visiti la pàgina és una qüestió de màgia pre-poblada, plena de valors que Vam estar allà l'última vegada que va visitar, si això va ser fa un segon, una setmana fa, o el 2013, i ara estem parlant voltant de l'any 2015. PHP i el servidor web cuiden de tot això per a vostè. 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: Variables en PHP són essencialment sempre global, llevat que declarar-los en l'interior d'una funció, i després ells són locals només la funció. Però com jo no he escrit cap funcions, que són ara efectivament mundial al llarg de tota la meva arxiu aquí. 

AUDIÈNCIA: Hi ha una manera per fer-los local? 

DAVID Malan: Hi ha alguna manera de fer-local? Només embolicant en funcions. Que en l'última versió del PHP, vostè pot fer això amb una funció anònima. Però més sobre això en el context de JavaScript. Però la resposta curta és no. Una resposta més llarga és sí. Niça. Bona pregunta concurs. Està bé. 

Així, finalment, la pàgina en si és En realitat és bastant simple. Tingueu en compte que una vegada que sortir de la manera PHP, recordar que totes aquestes coses baix a continuació és només va a aconseguir graella a prima per al navegador. La qual cosa està bé, perquè jo vull manar l'usuari una mica d'HTML, però sí vull per actualitzar dinàmicament que HTML. I una manera que puc fer és classificar de caure molt ràpidament de nou en PHP manera, l'ús obert abraçadora pregunta Suprimeix signe igual, i després la sortida el valor del comptador. 

O si això sembla una mica críptic, aquest signe igual és en realitat només alguns sucre sintàctic per aquest printf ($ comptador). Però, francament, això és una mica lletja i una mica molest per escriure. Així que PHP molt bé té aquesta opció, on només es pot dir que sigui més succinta de la mateixa manera. 

Llavors, què està passant sota el capó? Anem ràpid cop d'ull a la xarxa fitxa aquí per counter.php. I m'ho dius a mi seguir endavant i primera anem a aclarir les galetes. Elimina les dades de navegació Anem a des el principi dels temps. Ara anem a tornar per aquí. Ara anem a tornar a carregar la pàgina. I estic de tornada a zero. Perquè el meu segell a la mà s'ha rentat, Ara rep una nova galeta. 

De fet, si miro la fitxa Xarxa i mirar les capçaleres de resposta, observi que l'aparell m'està enviant una cookie el nom és una mica arbitrària, però una mica raonable, PHPSESSID. I m'està enviant això realment nombre aleatori gran. No és un bon nombre. No és exactament hexadecimal. És una espècie de cadena alfanumèrica, però se suposa que és aleatori. I aquest és el segell de la mà perquè parlo el que em refereixo. 

Mentrestant, si faig clic a recarregar i després mirar a aquesta segona línia per la meva segona sol · licitud, avís ara que la meva petició capçaleres inclouen PHPSESSID és igual a aquest, no set-cookie, però només galeta. I això és la presentació del meu navegador de la meva segell a la mà. 

Així que ara com un teaser, i parlarem més sobre això en una setmana o així, però ¿De quina manera això fa que vulnerable, el compte de Facebook vulnerables, i altres tals comptes vulnerables? 

AUDIÈNCIA: Si algú té la galeta. 

DAVID Malan: Sí, si algú té la seva galeta. Vull dir veritat, igual que alguns de vostès podria haver intentat la mateixa manera que un club o parc d'atraccions, si intenta alguna cosa així copiar el segell, encara que cap enrere sobre la mà d'una altra persona, i llavors ell o ella ho presenta com seu compte, si en realitat es veu idèntica, 123456789, llavors la web servidor està aparentment només va a confiem que aquest usuari és vostè. 

I això és de fet un dret fonamental amenaça cada vegada que utilitza les cookies perquè si algú falsifica així parlar seves galetes, figures de què es és a dir, ja sigui per veritablement copiar mirant al seu ordinador i de ser així, a D'acord. Galetes de David és JJ3JIK i així successivament, i són prou intel · ligents com per saber com ordenar d'enviar manualment que galeta d'un navegador o d'un programa que escriuen, que van poder totalment accedir a un lloc web que vostè. No és tan difícil de fingir ser altra persona llevat que tornem p-set dos, que va presentar el que? 

AUDIÈNCIA: Criptografia. 

DAVID Malan: Amb unes bits de la criptografia. Criptografia simple, almenys en la edició estàndard, però crypto però. menys. Així que resulta que si xifra tots aquestes capçaleres amb alguna cosa que poden ara saber més familiarment com SSL, secure socket layer, o URLs https://, a continuació, totes aquestes coses que hem estat fent una ullada a són en realitat xifrada, el que significa que és com si no pot llegir el segell a la mà. Només facebook.com llauna o google.com, o en aquest cas, l'aparell pot llegir aquest segell a la mà. 

Tràgicament, però, una vegada i una altra, això és molt apropiada amb les coses NSA en els últims temps, fins i tot SSL és fràgil. I en realitat no és tan difícil fins i tot a trencar que el xifrat. No tant per les tècniques d'encriptació, però enganyant al navegador a desxifrar les dades abans de temps. Però, de nou, li prenen el pèl amb el que en poc temps. Per ara, només por. És tràgicament tipus de veritat. 

Està bé. Així que, ¿d'on ve això ara ens deixa? Bé, anem a fer això. Seguirem endavant i prendre una ràpida sumari abans de prendre un descans. I crec que anem a detenir-nos una mica més avui, sinó que anem a bussejar en alguna cosa nova i atractiu, que obrir la gana per més. Així que això és el teaser. 

Així SQL, vam començar a parlar de molt breument l'última vegada. Segur que va a embrutar-se les mans amb una mica d'ella en p-conjunt de set. I en termes simples, el que fa SQL - S-Q-L - fer per vostè? Què és? Si. 

AUDIÈNCIA: et permet accedir a les dades. 

DAVID Malan: Si. Se't permet accedir a les dades en una base de dades. Llenguatge de consulta estructurat. I aquest és essencialment un llenguatge de programació. Hi ha característiques de la mateixa que No utilitzarem a l'aula. Però vostè pot efectivament definir funcions. Es diuen s'emmagatzema procediments de SQL. Però ens mantenim bastant simple i només utilitzar-lo per algunes operacions bàsiques com la selecció de les dades, inserir dades, actualització de les dades i eliminar dades. 

I realment es pot pensar en una base de dades, com una base de dades SQL, com s'acaba de sent Microsoft Excel. Atès que SQL es refereix a una relacional base de dades, on relació només significa taules. Files i columnes. Així que qualsevol cosa que vostè pot posar en un full de càlcul així o Google Docs, es pot posar en una base de dades SQL declarant una taula. 

Ara, com realment accés aquesta informació? Bé, amb les ordres o consultes com aquesta. SELECT, INSERT, UPDATE i DELETE. I per a la major part, aquests són els quatre únics ingredients que necessitarà per fer alguna cosa molt poderós en el problema plantejat 07:00. 

Ara, de tornada al dia, ho faria realitat interactuar amb una base de dades en un finestra de terminal en blanc i negre en un missatge parpellejant com aquest. I la base de dades que estem executant en el aparell es diu MySQL, que és motor de base de dades de codi obert i lliure. Si es busca a Google i llegir la Wikipedia article, vostè sabrà que el nom és una mica de transició per a alguns versions de Linux. Base de dades de Maria és en realitat un forquilla per dir-ho d'MySQL. 

Llarga història curta, Oracle va comprar MySQL. Oracle és una empresa gran. La gent ha estat preocupat que seria no sent bastant com a codi obert, així que això és només una còpia de MySQL que és sent gratuït, de codi obert encara, i instal · lat a Fedora Linux per defecte. 

Però aquest és un tipus de dolor al coll de familiaritzar-amb una base de dades d'aquesta manera. Així que incloem en l'aparell CS50 una eina de codi obert anomenat phpMyAdmin. Només una coincidència que està escrit en PHP. No és fonamental necessitat de PHP aquí. Però això és només una eina basada en web que hem descarregat de forma gratuïta, instal · lada en l'aparell, que ens permet tenir una interfície gràfica d'usuari amb el qual per explorar la base de dades de p-conjunt amb set per crear noves bases de dades, dic per al vostre projecte final si hi havia com, i en última instància, crear llocs web dinàmics com CS50 Finances que permeten consultar les dades i actualitzar les dades de forma dinàmica. 

No hauràs de fer servir només un arxiu de text o CSV. En realitat es pot utilitzar una base de dades intel · ligent programa perquè pugui executar més consultes sofisticades que acaba de llegir per tot el lineal. 

Així, per exemple, això és el que donem fora de la caixa per al p-7 set. Aquesta és una taula amb almenys aparentment tres columnes, una de les quals és nom d'usuari, un dels quals és de hash, i l'altre dels quals és ID. 

Però l'interessant, i només per desentranyar un pensament aquí, nom d'usuari és presumiblement ja únic, oi? Vull dir, la majoria de qualsevol lloc web, si vostè té un nom d'usuari, hi ha No pot haver-hi dos cèsars. No pot haver-hi dos Malans. No pot haver-hi dos jharvards. El seu únic. En cas contrari, no saben el que jharvard el que realment és. Llavors, quina podria ser la motivació perquè també que té una tercera columna de l'esquerra allà anomenat ID, que s'assembla a una nombre que és igualment únic? Se sent una mica redundant a mi a primera vista. Per què podria ser convincent per tenir no només els noms d'usuari únics, sinó també un únic número? 

AUDIÈNCIA: Podrien tenir la mateixa contrasenya. 

DAVID Malan: La gent pot tenir la mateixa contrasenya, és clar. Això podria succeir absolutament. Però si tenen aquest nom d'usuari únic, que argumentarien que aquesta realitat no assumpte, perquè si escriu en el seu nom d'usuari, només he de comprovar el seu contrasenya, els seus hash dels mateixos. Per què més? 

AUDIÈNCIA: Cerca més ràpida. 

DAVID Malan: Cerca més ràpida. Per què? 

AUDIÈNCIA: ID és només un. 

DAVID Malan: ID és només un personatge, o per ser més precisos, és un nombre, pel que és probable que 32 bits o alguna cosa per l'estil. Mentre que el nom d'usuari, pel que es veu Jason Hirschhorn està allà és una espècie de ridículament llarg, i que va a em portarà molt més temps per a cordes comparar H-I-R-S-C-H-H-O-R-N, i potser a / 0 o alguna cosa per l'estil, per tal per buscar Jason, en lloc de només dient dóna'm el número d'usuari de dos. Això és 32 bits. És un sol INT que vostè ha de comparar. I de fet, això és exactament per què les bases de dades tendeixen a assignar identificadors únics als files en ells. 

Ara, quins altres tipus de dades hi són més de INT i aparentment cadenes d'aquest tipus? Bé, per ser més correcte, Bases de dades SQL, com MySQL, té camps CHAR. I CHAR una mica enganyosa No hi ha una sola CHAR. Un camp CHAR en una base de dades MySQL és un o més caràcters, però és un nombre fix de caràcters. 

Així, per exemple, si vaig a phpMyAdmin ja que pot tenir ja, o aviat serà un problema creat set, i em vaig a la meva base de dades, i només per diversió, crearem una nova taula anomenada prova amb només dues columnes. Vaig a continuació, feu clic a Vés I això es farà molt familiar, especialment en el que tu jugues pel seu compte. Aquí jo podria escriure ID per crear una nova taula de tipus INT. Però aquí jo podria escriure nom d'usuari per recrear la taula anterior. I noti que tinc un munt de tipus per triar. 

I això també és la raó per phpMyAdmin és una espècie d'agradable. És una espècie d'auto-aprenentatge en què pot simplement espècie de punt i feu clic a, i mirar els menús desplegables, i deduir de que el que li dóna poders SQL. 

I de fet, si trio CHAR, que després ha d'especificar la longitud, o com molts valors, el nombre de caràcters. Així que els valors molt comuns són coses com 255, però això és una mica llarg. Comunament és vuit per a un nom d'usuari. Però això és una mica petita en aquests dies. Així que aquesta és una decisió de disseny. És 8 caràcters com a màxim, 32, 255, 1000? És realment depèn de tu. Però un camp CHAR és un nombre fix. Així que tria molt pocs i ets una mica cargolat si vols un nom d'usuari més. Trieu de més i el que és l'inconvenient? 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: És un malbaratament. Igual que en C, si vostè té una més gran part de la memòria que vostè necessita, vostè és perdent el temps i desaprofitant espai. Així com una alternativa, hi ha VARCHAR, que resol aquest problema el tractament de la longitud no com una longitud fixa, sinó com una longitud màxima, i l'ús d'un nombre variable de caràcters, que després tendeix a utilitzar només la quantitat de CHAR com vostè realment es necessita. Això sona perfecte. 

Per què no ens desfem de l' Dades de tipus char, llavors? Quines podrien ser les desavantatges de utilitzant dades VARCHAR, que sona com si fos una bona victòria? Sí? 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: OK, bo. Així que si totes les dades és el mateix longitud, quin és el problema? 

AUDIÈNCIA: Perquè estàs perdent dades per dir-li a tots. 

DAVID Malan: Llavors, si totes les dades es la mateixa longitud, però, jo argumentaria que a l'especificar una longitud màxima a VARCHAR no és diferent de especificant una longitud fixa de CHAR si vostè sap que el nombre d'anticipació. Però no és veritat, i vaig a ordenar d' extreure de la resposta a la realitat que encara hi ha un màxim, el que podria ser molest, especialment si trobar el nom d'una persona que és inusualment llarg que no ho va fer anticipar. I també és una mica menys eficient per buscar realment en VARCHAR com oposició a CHAR recerca, especialment per a taules llargues que tenen un munt i gran quantitat de dades. Així que aquí també, temàtica és nou cap opció òbvia. 

Així que per donar-li un sentit de si els tipus de dades que poden ser del seu interès ja sigui per p-conjunt de set oa el futur, és INT. Hi ha BIGINT, que és com molt de temps. Tendeix a ser de 64 bits. Hi ha decimal, que es veurà a el conjunt de problemes, que és un tant netejador de resposta als problemes que trobat amb el flotador i surant imprecisió punt. I després hi DATETIME. Hi ha, literalment, un tipus de dades que té per semblar-se a un any, un mes, un dia, i una hora, minuts i segons. 

Però també tenen bases de dades SQL coses que van a cridar els índexs. I un índex és una cosa que especificar en crear la taula de fer recerques i altres operacions més eficient. En concret, hi ha alguna cosa que es diu l'índex principal que es va poder declaro el següent. 

Vam fer això per a vostè amb el taula d'usuaris que li donen. Però fixa't si estigués recreant manualment la taula d'usuaris aquí donant un nom d'usuari. Ja especifiqui ID. He especificat INT. Que s'especifica nom d'usuari amb 32 caràcters com a màxim. Però si ens mantenim en aquest desplaçament bastant àmplia finestra, es va adonar que hi ha un munt d'altres coses que puc especificar. 

Un, puc especificar atributs com, ja saps què, aquest INT ha de ser UNSIGNED. No vull que els nombres negatius, així que anem a fer-ho sense signar. Null no és rellevant aquí perquè Jo vull que tots els usuaris tenir un nombre únic. Jo no vull que sigui nul. 

Però això és interessant. Puc especificar que ID és o bé la clau primària d'aquesta base de dades, o és text únic, o està indexada o complet. Així que per als propòsits d'avui, llarga història que significa curt, primària que això es ser tant conceptual com tècnicament el camp que s'utilitza exclusivament per identificar els usuaris. 

Així que quan mirem els usuaris, això és una espècie de la promesa de mirar cap amunt en la seva majoria per que identificador únic. I la base de dades s'ha d'assegurar que si tenir un nombre d'usuari 3, no es pot inserir físicament a un altre usuari amb el mateix número 3. La base de dades només es negarà per desar els canvis. La qual cosa és una bona cosa, perquè es pot protegir-se de si mateix. jo 

D'altra banda, el nom d'usuari. Així que la segona fila, el record, és el camp de nom d'usuari. Així que la segona fila aquí és nom d'usuari, com ho vam fer a l'extrem esquerre allà. 

Què més podria jo voler especificar? No em permet, d'acord amb SQL, per especificar dues claus primàries. pot especificar una clau conjunta en què mirar dos camps, però no poden ser individualment claus primàries. Així que això està fora de la qüestió. Llavors, què podria jo voler triar? 

Bé, UNIQUE és similar en esperit a un clau principal en el qual s'especifica aquesta camp ha de ser únic, però és no serà el Jo ús tot el temps. I nosaltres no utilitzarem aquest tots el temps pel que una vegada més la raó? És potencialment més lent si és un llarg nom d'usuari. És només una pèrdua de temps. 

INDEX, per la seva banda, estableix que és No anava a ser únic, però m'agradaria a treballar la seva màgia sota el campana perquè sigui més ràpid per a mi buscar en aquest camp. Així que això probablement no és rellevant aquí. Per nom d'usuari, jo diria que UNIQUE és una bona resposta. Però suposem que vam fer més usuaris interessant que els noms d'usuari només, hashes, i números d'identificació. Què passa si li vam donar la gent noms complets? ¿I si els vam donar adreces i altres dades sobre ells? 

Bé, si s'especifica que una columna d'una base de dades està indexada, que significa que MySQL o Oracle, o qualsevol base de dades que està utilitzant, ha de treballar la seva màgia i l'ús d'algun tipus de dades de fantasia s'estructura com un arbre o un trienni, o un taula hash o alguna cosa per garantir que en buscar dades utilitzant seleccionar en aquest camp en particular - m'agradaria mostrar a tots que viu a Oxford Street. Una consulta així. Si heu especificat per endavant que desitja un índex en aquest camp, la Recerques serà molt, molt més ràpid. 

Si no s'especifica un índex, la millor que pot fer és una recerca lineal si no està resolt. Però si s'especifica INDEX, l'intel · ligent persones que van fer la base de dades - persones com vostè que ara saben els arbres i tries i taules hash - construirà automàticament aquestes dades a estructura en la memòria RAM per assegurar-se que aquestes recerques són molt més ràpids. 

Fulltext part és similar en esperit, però li permet fer comodí Recerques, m'agrada mostrar a tots que viu en els carrers que comencen amb la lletra O per qualsevol raó. Vostè pot fer cerques amb comodins d'aquesta manera. O bé, les coses més atractives com a espectacle mi tots els que tenen la paraula - mostreu-me tot aquell el nom comença amb una carta particular. Pots buscar per paraules clau d'aquesta manera. Està bé. 

Així, les oportunitats de disseny hi ha potencial. Hi ha altres que vaig a agitar les mans en. Resulta que vostè pot tenir diferents motors d'emmagatzematge. I això és més misteriós del que necessitem sens dubte per al problema d'establir 07:00. Per defecte, vostès estan utilitzant cosa que es diu InnoDB. Veuràs esment d'això en algun lloc més probable és que la interfície de phpMyAdmin. Però saben que hi ha un altre disseny decisions que són de potencial interès vénen projectes finals si fer alguna cosa basat en la web. 

Però farem això. Seguirem endavant i posar això en la pantalla com a reclam per a una història relacionat amb vostè, un company de quart, i un got de llet. Prenguem a dos minuts o menys de setmana aquí. I si pots quedar-te, anem a venir cap enrere, miri una mica més en SQL, i a continuació, una mica de JavaScript amb p-conjunt de vuit en ment. 

Està bé. Per tant, anem a començar a pensar sobre un cas de la cantonada que pot sorgir amb molta facilitat en el context de la utilització d'una base de dades, o francament, fins i tot amb les coses del món real com caixers automàtics per obtenir diners. Així que aquí està una nevera. Suposem que tens una també a la seva residència o casa. I tens un company de quart, i tots dos realment t'agrada la llet, per exemple. 

Així arriba a casa de classe un dia. Ell o ella encara no ha tornat. Obres la nevera. De debò vols un gran got de llet. No hi ha llet. Llavors, què fa vostè? Es tanca la nevera. Vostè agafa les claus. Vostè surt a la plaça. I s'obté d'acord al CVS als coses d'autoservei, que sempre prendre més temps que en realitat tenir caixers. De totes maneres. 

Així que, mentrestant, punt punt punt, el seu company de pis arriba a casa i ell o ella igualment té un anhel una mica de llet. Així que ell o ella obre la nevera, mira dins, i oh, maledicció. No hi ha llet. Així que ell o ella es dirigeix, que passa d'anar als altres CVS, que era només un quadra per alguna raó, i ell o es posa a la fila per comprar una mica de llet. 

Mentrestant, arriba a casa, ell o ella arriba a casa, i el que fan té en última instància? Dues vegades tant com la llet. Però no m'agrada molt llet que molt. Així que ara vostè té tanta llet que ara un d'ells és només va a anar agra temps. Així que això és realment un problema greu. Cert? 

Llavors, què ha passat? Així que bàsicament, això és una espècie d'un exemple ridícul. Però sota la campana, el que hem tingut passar aquí és alhora que ens registrem l'estat d'alguna peça de la memòria, la nevera. Tots dos comprovat l'estat d'alguna variable. Tots dos es va arribar a una conclusió que després va actuar en. Però, per desgràcia, mentre que el seu company de quart estava a la botiga, l'estat d'aquest variable de canvi, ell o ella va tornar i ara vol canviar l'estat, però que ja ha canviat en ell o ella. I, per descomptat, ell o ella no tindria anat a la botiga si ho sabessin que ja estava en camí. 

Així que en el món real, com vas poder evitar aquest problema, suposant que té nevera, té un company de quart, i que realment t'agrada la llet? 

AUDIÈNCIA: La comunicació. 

DAVID Malan: Comunicació. D'acord. Però, com pot vostè comunicar-se? 

AUDIÈNCIA: Deixa una nota. 

DAVID Malan: Deixa una nota, oi? Sempre deixi una nota, fans de la sèrie. Molt bé, així que sempre deixen una nota o posar veritablement com un cadenat o alguna cosa a la nevera que manté la seva company de pis a partir de la inspecció de l'estat de aquesta variable. 

Ara, per què podria ser això pertinent per problema conjunt de set, o pels caixers automàtics. Bé, imagina un món en un caixer automàtic on vostè podria ser capaç de pujar a un caixer automàtic màquina d'aquí, i un altre caixer automàtic aquí. I això passa molt sovint. I supose que té dues targetes de caixer automàtic, que és possible obtenir. I vostè registra en ambdues màquines eficaçment a la vegada, amb sort mentre que ningú està mirant. I a continuació, escriviu en el PIN més o menys simultàniament. I després fas una consulta equilibri per veure la quantitat de diners que té. I diguem que vostè té $ 100 queda en el seu compte. Així que, essencialment de forma simultània, dir un, zero, zero, anoti. I espero tornar alguns diners. 

Però, quants diners t'has tornat? Ara els ordinadors al final del dia, especialment si estan parlant amb servidors, no necessàriament es fan les coses en l'ordre en que s'espera. 

Així que suposem que el que succeeix, per siguin quins siguin els problemes de velocitat de la xarxa allà són, o qüestions de CPU ha, o res d'això, suposem que la primer ATM comprova el seu equilibri i veu, oh, aquesta persona té $ 100. Però després es distreu perquè potser una còpia de seguretat està succeint i el que és desacceleració. O potser durant la comprovació, la xarxa connexió es va posar una mica més lent perquè això només succeeix. Són dispositius físics. Així que mentrestant, el segon caixer automàtic està fent la mateixa pregunta. Quants diners té David? 100 $ és la resposta. Però com que el primer caixer automàtic encara no ha envia el missatge de restar $ 100, tant Caixers automàtics han inspeccionat la volta del banc, veient que hi ha 100 $ allà, i ara ambdues màquines són potencialment va a escopir una resposta. 

Ara, això és molt bo per a vostè en algun sentit si el que fa el banc en última instància és canviar la quantitat a menys de 100 per establint la variable igual a la seva compte bancari igual a 0, en contraposició per fer menys 100. Ara, en el pitjor dels casos per al banc - o en el millor per al banc, per la seva banda, et donen $ 200, i seu compte bancari ara mostra negativa $ 100, que en realitat no ho fa que beneficiarà a tots. Però el punt és que aquesta cursa condició perquè dos companys de quart que aconsegueixen llet, o per a dos caixers automàtics que tracten d'obtenir diners en efectiu i canviar l'estat d'una volta al mateix temps hi ha cap vegada que tingui una base de dades. 

Ara a problema plantejat 07:00, aquesta qüestió sorgeix en el sentit que si vostè compra una participació en accions de Facebook i, a continuació, per exemple, vostè compra una segona part de Accions de Facebook, vostè necessita per fer una decisió pel que fa al programador. Per tal de decidir la forma d'actualitzar la base de dades, el més probable és que vas a tenir una fila d'aquesta població, i això és una manera de posar-ho en pràctica. I tindràs una acció de FB, que és el seu símbol ticker per aquest nom d'usuari o aquest usuari Identificació, l'identificador únic. 

Però la mateixa història pot succeir aquí. Si fas un SELECT de SQL, com es veurà en el problema d'establir 07:00 quan vostè veu, oh, David té una acció d'accions de Facebook. Permetin-me ara canviar això per ser dues accions, perquè vol comprar una segona part. Però suposem que David en realitat tenia dos finestres obertes del navegador, o suposen que és un compte conjunt amb dos cònjuges, i dos d'ells estan tractant de dur a terme la mateixa operació, allà, també, la hi ha la possibilitat que una decisió sigui realitzat en base a l'anterior estat del món - el compte té una acció - i dues persones, o tots dos servidors, ara tractar de dir incrementar a dues accions. Però en aquest cas, és possible que hi hagi carregat em de diners per a ambdues accions, però incrementat només aquesta vegada. 

Així que en resum, el problema fonamental aquí, igual que amb la broma sobre deixar un tingui en compte, o posar un cadenat en ell, és si dues persones, o dos temes - pensar de nou a zero - Podeu inspeccionar l'estat d'alguna variable i després tractar de canviar aquesta variable, però aquestes dues coses no succeeixen en el mateix temps, però poden quedar interromput per altres coses que succeeixen, les dades poden entrar en un estat molt estrany. I vostè pot beneficiar o pots patir en el sentit de l'exemple de diners. 

Així que en conjunt de problemes 7, et donem aquesta una línia de codi, que durant molt temps conte, resol aquest problema en MySQL. Aquesta molt llarga instrucció que no fa fins i tot que càpiguen en una línia en la pantalla aquí assegura que la seva operació és el que s'anomena atòmica. Tot succeeix alhora, o no succeeix en absolut. Aquesta llarguíssima frase no pot quedar interromput parcialment. 

I el que fa és, literalment, el que diu. Inseriu en alguna taula següent tres camps dels valors específics, però per duplicat de la clau, no faci una inserció. Feu una actualització. Així que això és com fer un SELECT i un INSERT per dir-ho, a la vegada. I quina és la clau que probablement es refereix aquí? 

Resulta, i veuràs això en problema estableix les especificacions de set, perquè hem declarat que hi ha una clau única en aquesta taula en particular de manera que no es pot tenir diverses files per al mateix usuari amb la mateixa acció de penic símbol - en aquest exemple aquí, DVN.V és 1 penny estoc ximple que consulti en l'especificació. Perquè hem declarat el fan únic, el que això significa és que si vostè tractar d'inserir una fila duplicada, ets en lloc d'anar a actualitzar sense qualsevol altra persona tenen l'oportunitat de canviar l'estat del món tampoc. Així que en resum, el que garanteix coses són atòmiques. 

De manera més general encara, bases de dades com MySQL - i vostè no necessita aquesta funció per p-7 set, però tingui en compte per el futur - recolzar el que es diuen les transaccions, on es pot dir Iniciar la transacció, literalment. A continuació, pot executar dues sentències de SQL. I una sentència SQL, com es veurà en p-7 set, es veu una mica alguna cosa com això. Actualització d'una trucada compte de taula. Indiqueu la columna saldo equivalent al que la columna de la balança actualment és menys 1000 quan el nombre, la número de compte, igual que l'ID d'usuari, és igual a 2, i després actualitzar compte dot dot dot. 

Així que en termes simples, què és el que aquests dos consultes semblen estar fent en el veritable sentit de món de la banca? 

AUDIÈNCIA: Transferència d'estalvis. 

DAVID Malan: Exactament. Transferència de fons d'una en compte a l'altra. I aquest és un altre exemple en què realment volen aquestes dues coses que succeeixen o no succeir. No vol que alguna cosa s'interposi en el enmig d'ells i potencialment malmetre les matemàtiques, o fer malbé la quantitat diners que té, o quant diners que el banc té. Així que el que és realment bo de les transaccions en MySQL és que, i bases de dades de manera més general, és que i les persones intel · ligents que han implementats aquestes característiques d'esbrinar com fer Assegureu-vos que les dues coses succeeixen o no en absolut. 

I si vostè està realment aspira a fer un lloc web que és utilitzat per la gent en campus, la gent en el món real, fent alguna cosa en el sentit d'inici, aquests són els tipus de decisions de disseny que cada vegada tan important. En cas contrari, vostè comença a perdre dades, perdre els usuaris, o en el pitjor cas com que hem vist aquí, el que podria perdre diners. Així que de nou, més sobre això en conjunt de problemes 07:00, així com potser per a alguns dels que en els projectes finals. 

Així que anem a canviar aquesta imatge que teníem Fa un moment just a una forma més. Així que permetin-me realment veure si puc - doncs no, això s'ha anat. Aquí està. 

Així que això és on ho deixem l'última vegada. I resulta que anem a tirar una cosa més en la barreja aquí - un llenguatge anomenat JavaScript. Així JavaScript realitat s'ajusta en aquesta peça - i jo no acabava de deixar prou espai, així que això no és ara a escala. OK, això és realment patètic. OK, així que això és JavaScript. Està bé. Realment m'estic fent un flac favor. Està bé. 

Així JavaScript és un altre de programació llenguatge, i el nostre passat, si això ajuda assegurar-li que no hi ha molt més de les boques d'incendis aquí. Així Javascript és també una interpretació llenguatge, el que significa que no ho fa compilar en zeros i uns. Vostè acaba d'executar. Però el que és fonamentalment diferent amb JavaScript generalment és que vostè no s'executen en el seu servidor web. No aconsegueix executar en el aparell de per si. Més aviat, es descarrega per un usuari a través d'HTTP al navegador - Chrome, Safari, Internet Explorer, Firefox, el que sigui - i és el navegador que executa aquest en particular llenguatge de programació. 

Així que per ser clars, PHP ha estat fins ara executat ja sigui a la línia d'ordres en nostra finestra en blanc i negre, en un servidor com l'aparell, un ordinador agradaria que l'aparell, o que ha estat executat per un servidor web que s'executa en un ordinador. Però el tema aquí és que PHP fins ara s'ha executat al servidor, de manera que l'usuari i el navegador de l'usuari mai no es vegi una línia de codi PHP. 

De fet, si mai obrir un navegador per el seu lloc web o un altre i que realment veure el codi PHP a la seva finestra, algú ha ficat la pota. Com que no està destinat a ser enviat a un navegador directament. Se suposa que ha de ser executat i es va tornar en alguna cosa semblant a HTML. 

Però Javascript és essencialment el contrari. Se suposa que ha de ser executat en general dins d' de la finestra del navegador de l'usuari. I quin tipus de llocs web utilitzar JavaScript llavors aquests dies? 

Igual que, literalment, tots els llocs web populars. Cada lloc web que vostès probablement utilitzar tots els dies Javascript per a la més senzilla i fins i tot la característiques més atractives. 

Així que alguna cosa com Facebook Xatejar si fa servir això. Com es treballen realment? Doncs fins ara, totes les coses que hem fer amb HTML i PHP assumeix que que tiri cap amunt d'una URL, i premeu la tecla Enter, i veus una mica de contingut HTML. I fer clic a l'enllaç, que canvia la URL, canvia la pàgina i torna a carregar nous continguts. Feu clic en una altra URL o enviar un formulari, aconseguir traslladats a una altra pàgina i veus algun contingut nou. 

Però l'ús d'alguna cosa com Facebook Xat, o Gchat o Google Maps, rarament no tota la pàgina a carregar aquesta que Si veu una pantalla en blanc momentàniament i a continuació, el nou contingut. Per contra, les pàgines web d'avui són dinàmicament tenir actualitzada una i una i altra vegada tot tipus de darrere de les escenes. I resulta que quan vostè va a alguna cosa com Facebook o Gchat, o Gmail, i les actualitzacions de la pàgina automàticament sense necessitat de recarregar la tota la pantalla, el que ha passat és que el seu navegador ha fet una mena de secret peticions HTTP addicionals - no per a pàgines web senceres, però només per petits fragments de dades, com el missatges instantanis que el seu amic només vostè, o l'actualització d'estat que envia algú que, o el tweet enviat que algú acaba d'enviar. És només fer petits sol · licituds de dades, i després utilitzant JavaScript, aquesta llenguatge de programació, per canviar el que la pàgina web es veu igual que sense el servidor d'ajuda, sense que el servidor generant que HTML. 

Així que en resum, JavaScript es pot utilitzar a continuació no només per recollir noves dades de el servidor sense recarregar el seu conjunt pàgina o enviar un formulari. També es pot utilitzar per canviar l'anomenat DOM - Document Object Model - que és només la forma elegant per dient que l'arbre d'HTML que vam veure l'última vegada. 

Així que per tranquil · litzar i Javascript és sintàcticament tan semblant a C també. No hi ha funció principal. Vostè acaba de començar a escriure el codi i que serà executat, o interpretar de manera més adequada. Condicions es veurà així. No és diferent de C o PHP per al cas. Expressions booleanes o-ed junts es veurà així. AND junts aquest aspecte. 

Commutadors es veurà així. Per bucles es veurà així. Mentre que els bucles es veurà així. Feu bucles while es veurà així. 

Això és nou. Així que JavaScript no té un foreach construir per se, però aquest constructe per a i variable en sèrie, i jo en aquest cas es converteix en un valor d'índex. Així que és una mica diferent de la foreach, encara que les noves versions de JavaScript estan sortint tot el temps, pel que fins i tot aquestes característiques d'idioma estan evolucionant. 

I en un a part, JavaScript aquests dies També es pot utilitzar en un servidor igual que PHP utilitzant un marc anomenat Node.js. Un TFS de CS50, Kevin, ha portat a seminari sobre Node.js que està disponible a cs50.net/seminars. Així que si ets curiós, saber que pot utilitzar això en el costat del servidor com bo, però això és una tendència relativament recent, però una poderosa en això. 

Això és una mica diferent. Es tracta d'una matriu en JavaScript. I el que sembla diferent en comparació amb C o PHP? Hi ha algunes històries ràpides podem dir aquí. El que li falta en comparació amb PHP? 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: Sí? Ho sentim, dir de nou? 

AUDIÈNCIA: No declarar el tipus de variable. 

DAVID Malan: No estem declarant el tipus de variable. Així que en realitat bastant com PHP, no estem especificant els tipus d'aquesta variable. Per contra, estem més genèricament dient var per a la variable. No hi ha molèsties de la PHP signe de dòlar, que encara que tediós tipus, no fan més evident que cosa que és una variable. Mentre que aquí, estem sort de tornar a L'enfocament de C amb només trucar a un variables amb el nom que vulguem per donar-li, com a nombres. I també com PHP, tenim claudàtors per al valors dins d'aquesta matriu. 

Així variables en JavaScript també podria tenir aquest aspecte. Noteu aquí es tracta d'una cadena anomenada s, però igualment no hem especificat que és una cadena. Aquí, però és una característica que no es existir exactament de la mateixa manera en PHP, però una mica de manera similar. Aquest és un objecte en JavaScript. I els objectes són una mena d'exèrcit suís Ganivet d'una estructura de dades en què es es pot utilitzar per a qualsevol nombre de coses. 

Aquí, per exemple, estem declarant una variable anomenada cotització. El tipus d'aquesta variable és un objecte. Vostè pot pensar en això com una estructura C que té les claus i valors. Símbol és una clau. FB és un valor, pel que sembla un símbol de cotització. Comma. El preu és una altra de les claus, i el seu valor és pel que sembla un punt flotant, o un nombre més general, en JavaScript, per 49,26 $. 

Així que PHP no té - que no hem vist en els objectes de PHP molt d'aquesta manera, però vam veure un anàleg, que era el que? 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: Les matrius associatives. Així, mentre que PHP té matrius associatives la sintaxi és sempre una mica per diferent - vam veure els claudàtors. Vam veure els símbols fletxes estranyes. JavaScript té objectes, però això és sobretot una diferència semàntica i diferent sinònim d'ara. No obstant això, en un apart, PHP també té objectes d'una manera que Java i altres llengües tenen objectes en programació orientada a objectes. Però anem a utilitzar aquests només per a tipus de dades per ara. Objectes i matrius associatives. 

Aquest potser és una mica més clar. Heus aquí per què un objecte és útil. Quan es vol declarar un estudiant, com Zamyla, podem realment encapsular per dir-ho a l'interior d'aquest objecte utilitzant claus com sobretot un grapat de claus i els valors d'aquí. Comptem amb un ID, una casa i un nom per Zamyla, seguit per un punt i coma com habitual a l'extrem. 

Aquí sota també, això és lleugerament diferent, però també molt potent en aquests dies. Aquí hi ha una gran varietat, i jo sé que ja hi ha un claudàtor dalt superior i un claudàtor a la part inferior. I aquesta és una matriu de les dades que escrigui pel que sembla en JavaScript? Aquest és un arranjament del que sembla com tres objectes. I jo sé que és un objecte únic causa de les claus. I noti que hi ha clau d'obertura, algunes coses, prop de claudàtor, coma, després una mica més, coma, i després una mica més. Així que això és tres arguments separats per dos comes. 

Així que això és una sèrie de tres objectes. I cada un d'aquests objectes sembla haver un estudiant o membre del personal d'algunes tipus, cadascun amb una identificació, casa, i el nom. Però jo he cridat a aquesta cosa anomenat JSON - JavaScript Object Notation. I aquest és un format de dades que en realitat és molt popular i en voga en aquests dies que si escriviu un aplicació que utilitza el Facebook API, l'API de Twitter, realment gairebé qualsevol API que hi ha en aquests dies, incloent alguns de la pròpia CS50, la les dades a recuperar no es troba en format CSV de la vella escola. 

Perquè recordem que CSV és super simple. És a columnes separades per comes. Dades JSON li dóna més metadades. Es associa una clau amb cada valor, de manera que no han d'assumir que simplement la columna zero és un valor, la columna un és l'altre, la columna 2 és una altra. Tot en un objecte JSON que aquí és una espècie de l'auto-descripció, ja que cada un dels noms en aquest arxiu té, literalment, nomenar davant d'ell com un cadena entre cometes. 

Així que donem una ullada a una parell d'exemples. Déjame anar a l'aparell. I m'ho dius a mi anar al nostre amfitrió virtual directori en el públic. I m'ho dius a mi anar a la JavaScript directori. I seguirem endavant i obrir dg-0.html, on DOM només significa model d'objectes de documents. Són les coses de l'arbre al qual M'he referit abans. 

I permetin-me proposar el següent. Aquí hi ha una pàgina web la cos és bastant simple. Així que aquí baix a la part inferior, notar que tinc un formulari. Hem vist els d'abans. Té dues entrades, una de les quals té un Identificació de nom, un dels quals té un tipus de presentar, i la primera seu tipus és text. Així que això realment sona bastant simple. 

Anirem aquí. Tornem a aquesta pàgina aquí. Entrarem en localhost, i entrar en nostre directori JavaScript, i anar a dg-0, i aquí tenim aquest formulari. Així que això és pel que sembla tota aquesta pàgina fa. Té un camp de nom amb un botó Envia. Però jo no vaig a utilitzar PHP aquí. Jo faré del costat del client tot el per dir-ho en JavaScript de la següent manera. 

Noteu que en veritat li he donat el nom camp d'aquesta entrada una única identificador, que farà realitat em estalviar una mica de temps en un moment. I noto que he introduït una altra etiqueta al cap de la meva pàgina web, la  tag. 

Així que és en aquest sentit que JavaScript està un llenguatge de programació del costat del client. En aquest cas, igual que CSS, he posat ella cap a l'interior de la meva HTML. Però cal notar que he declarat una funció que es veu una mica com PHP sintàcticament, però això és en realitat JavaScript, perquè una vegada més, és del costat del client en el navegador. I prendre una conjectura del que això va a fer, tot i que algunes de la sintaxi aquí és nou. 

AUDIÈNCIA: Saluda a qui sigui. 

DAVID Malan: Es va a saludar als visitants d'aquesta pàgina. Llavors, com? 

Així compte, resulta que en JavaScript hi ha una funció d'alerta (). Aquesta és una funció molt poc trist que realment només tendeix a molestar els usuaris. No és un que realment ha d'utilitzar normalment, però és un ràpid i brut camí de l'espècie d'imprimir alguna cosa a un usuari gràfica interfície, com un navegador. Noteu aquí que tinc una cadena entre cometes simples. Resulta que a diferència de C, JavaScript pot tenir en realitat s'utilitza sola cita, i, francament, és només una mica de la convenció estilística entre JavaScript programadors utilitzar cometes simples. PHP, que en realitat tenen poc significat diferent. Però, per ara, només sé que aquesta és l'única raó. La convenció en JavaScript és sovint per utilitzar cometes simples, però podríem utilitzar cometes dobles en ambdós llocs també. 

Així que això és interessant. Recordeu l'última vegada que vam haver imatge a la pantalla que va atreure a un arbre en què va tenir el node HTML i el el cap node, i el node de cos, i després una mica de text. Però hi havia un node especial al molt superior que vaig trucar el document. Bé, resulta que en JavaScript, qualsevol vegada que s'escriu un programa en JavaScript en un navegador, vostè té accés a una variable global especial. Similar a la de superglobals de PHP, aquest es diu en tot document minúscules. 

És com una estructura, però aquesta estructura També té funcions dins d'ella. Així que una estructura C només té dades normalment. Però un objecte de JavaScript, ja que això tècnicament és també té funcions, conegut d'una altra manera com a mètodes, dins d'ella. I vostè pot cridar a una funció a l'interior de aquest objecte, literalment, fent el seu nom, punt, i després el nom de la funció, o de nou mètode. És només un sinònim, de veritat. 

I què fa aquesta funció? Pot espècie d'endevinar pel seu nom. Obtingui element per ID. Així que això va a buscar a la pàgina web, buscar aquest arbre, a la recerca de qualsevol node, element de AKA, té un ID únic de cotització nom de la cita. I llavors, què faré? Vaig a obtenir el valor a l'interior de aquest node a l'arbre, i em vaig dir d'alguna manera hola a aquest nom. 

Així que prendre una conjectura, tot i que no hem vist això encara, què fer en el signe més símbols signifiquen aquí i aquí probablement? 

AUDIÈNCIA: Concatenar. 

DAVID Malan: Concatenar. És cert, i aquests són només tipus de decisions de disseny la gent va fer fa anys. En PHP, concatenar coses amb punts. En C, saltar a través de diversos cèrcols i cridar a funcions com strcopy () o strcat () o altres funcions similars. Però en JavaScript s'utilitza avantatges. Així que això és simplement concatenant tres cadenes - hola, un nom, i després un signe d'exclamació. 

Per això, quan i per què és aquesta funció anomenada però? Bé, tenir una pista de l' HTML a la part inferior. Per què se saluden () anomenat, o quan? 

Pel que sembla, el millor que puc dir, en presentar, quan s'envia el formulari, Vaig a fer el que sigui dins d'aquestes cites. I en concret, vaig a trucar a saludar () i després tornar false. 

Bé, anem a veure que la xarxa efecte és de primera. Així que permetin-me anar endavant i escric en, diguem, Loren, a Envia. Hola Loren. A veure si potser això era només una implementació de la sort. Nope. Així que ha d'escriure a terme el que sigui name I realment vaig posar aquí. 

Però noti el que no està canviant. La URL és encara dg-0.html. No hi ha register.php. No hi ha segon arxiu. No hi ha atribut action. Llavors, què és aquest fals retorn presumiblement fent? Per què estic trucant a saludar () i després tornant falsa probablement? El que normalment passa en fer clic Enviar a un formulari que encara tenim vist en l'última setmana? 

AUDIÈNCIA: [inaudible]. 

DAVID Malan: Es va a algun lloc, oi? Va a alguna URL de destinació. Però jo no vull que això passi aquí. Vull que la meva pàgina web per ser completament dinàmic com Gmail, on una vegada que estàs allà, et quedes allà. La direcció URL no canvia en una forma que indica la pàgina sencera està recarregant. Més aviat, només vull canviar alguna cosa com imprimir alguna cosa aquí a la pantalla. 

Doncs m'ho dius netejar això una mica. Permetin-me obro no diu-0, però m'ho dius a mi obro dg-2. Perquè ho has vist alguna sintaxi aquí. 

Resulta que el que acabem de DID s'utilitza JavaScript primera. Així que això és realment l'idioma JavaScript. Alguns de vostès podrien saber de una llibreria anomenada jQuery. 

Així jQuery no és la mateixa cosa com JavaScript. És només una biblioteca que un molt intel · ligent noi va escriure i va popularitzar com que gairebé tots en el món ara utilitza jQuery utilitzant JavaScript. I a primera vista, honestament, es veu una mica més críptica. Però et trobaràs, sobretot si vas allà per al seu projecte final amb la web desenvolupament, trobareu que aquest neteja les coses i vos estalvia molt poques línies de codi. 

Així que anem a fer una ullada a com Aquest formulari està treballant. Noti el que em trec aparentment de la meva HTML? No hi ha en enviar gestor per dir-ho. No hi ha cap atribut. Perquè vostè sap, el que No m'agradava de veritat? Em vaig sentir com si estiguéssim caient en vells hàbits allà. Igual que estava començant a sentir descuidat en barrejar tant amb CSS HTML, perquè ets una mica de tirar diferents idiomes de tot el lloc, de la mateixa manera va fer això comença a sentir- com un mal camí per anar cap avall, on Vaig a posar el codi JavaScript dins del meu HTML en lloc de factoring a terme. 

Així que aquesta és la lliçó aquí. En dg-2.html, estic factoring a terme. I jo estic fent les coses una mica de manera diferent. Per ara, vaig a agitar les mans al que realment sota de la caputxa. Però només per ara suposar que aquest primer línia de codi en aquesta biblioteca jQuery anomenat simplement vol dir que quan el document està llest, feu el següent. 

Atès que les pàgines web poden tenir algun temps per carregar. Vostè podria estar en un internet lent connexió, i podria estar girant i girant, i finalment s'ha carregat. Aquesta línia de codi just diu esperar fins tota la pàgina està a punt, el document està a punt, abans d'executar aquest codi. 

I ara noti, aquest és probablement el més útil primer treure de jQuery. Aquesta línia aquí és molt similar en esperit a aquesta línia molt més temps aquí. Mentre que en el codi JavaScript en brut, hi ha existeix un objecte global document que té una funció anomenada getElementById (), la gent que va escriure jQuery simplifica dir simplement signe de dòlar, i després dins de parèntesi posen dues cites, i després posar un símbol de hash seguida de la únic ID que desitgi capturar. Així que aquest és equivalent a document.getElementById. 

Mentrestant,. Presentar només significa el presentació de la forma que sigui que estiguis referint-se a l'esquerra, vagi endavant i executar aquest. Però això és ara la curiositat també. El rar del que He destacat en aquesta llista? No només és classe de sintàcticament nova, també hi ha alguna cosa que falta. 

AUDIÈNCIA: Simplement diu funció? No es diu alerta? 

DAVID Malan: Si. Bé, tan alerta () s'ha reduït aquí, per ser justos. Però no hi ha esment d'un nom, com vostè sap, foo o alguna cosa aquí. I de fet, aquesta és una de les característiques de JavaScript que és bastant de gran abast, però també bastant nova. I PHP té en realitat això també. 

Deixin-me seguir endavant i fer cosa molt ràpid. Déjame anar endavant i posar això aquí. Déjame fer això. Funció. Anem a trucar a aquest controlador (). Una funció de controlador per dir-ho. Una cosa que s'encarrega d'alguna operació. Vaig a netejar el meu sagnia. I posar això aquí. I ja que aquí. Sip. D'acord. 

Així que ara tinc una funció anomenada handler () que no se sap molt bé el que fa encara. Simplement encara té aquestes coses. Vaja. Va prendre massa. Anem a fer això. Està bé. Ho sento. Està bé. Déjame fer això. D'acord. Això es veu molt bé i recte enviar ara. Déjame fer això. Feu això. I a D'acord. Així que ara, anem a posar això aquí. No més de programació sobre la marxa. D'acord. 

Així que ara, anem a tornar a on va començar la història. Anteriorment, he dit que aquesta línia aquí vol dir que quan el document estigui llest, vagi endavant i fer això. Què vull fer? Bé en concret, vull anar endavant i fer el següent. Executar aquesta línia de codi, i després el que vull que facis és trucar a aquest funcionar quan s'envia el formulari. 

Ara bé, això és l'interessant. Això no és en si mateix una funció. Notin que no estic posant parèntesis aquí a la forma normal. Estic literalment passant una funció anomenada Handler () a una altra funció anomenat presentar () com a argument com encara que és com una variable. I aquesta és una de les característiques de Javascript és a si mateixos funcions són en realitat objectes. De fet, són realment només les variables d'algun tipus. I si el nom de la funció és handler (), no hi ha cap raó per la qual no pot passar-ho com a argument aquí. I això vol dir que quan la forma amb la identificació de la demo és presentat, cridar a aquesta funció. 

Però ara si em desfaig de tot això, Per què llavors em faig potser fa d'aquest un moment? Bé, aquesta és una funció anònima. Perquè, francament, em vaig adonar de per què estic prendre la molèstia de perdre el temps que es declara una funció anomenada controlador () només per cridar en un i només un lloc? Si jo no necessito el nom, i jo no ho faig hagi de cridar més d'un lloc, posarem en pràctica la funció just on ho necessito. I així, JavaScript i PHP donen suport al s'anomenen funcions anònimes que em permet fer exactament això aquí. 

Però només estem esgarrapant la superfície. Anem burlen amb només un parell exemples finals aquí. 

Si entro a quote.php. Tingueu en compte que això és en realitat un PHP funció, un programa PHP, que vaig escriure que espera un paràmetre HTTP anomenat símbol, i puc passar a un valor com FB. I si en realitat ens fixem en la font codi, això està consultant un lloc web gratuït anomenat Yahoo Finances, igual que p-set 07:00, i s'està tornant a mi alguna cosa aparentment el format conegut és JSON - JavaScript Object Notation. És només un objecte. Note les claus, les cometes, el còlon, i les comes. 

Ara mentrestant, això és molt bo. Com que és probable que pugui utilitzar una programació idioma per generar adreces URL que s'assemblen a aquesta dinàmica, No? Puc canviar això a Google i tornar de Google preu de les accions de $ 1017,55. Així que anem a veure si no podem usar això ara. 

Déjame anar a ajax-0 aquí, el que s'assembla al següent. És només un lloc web que té un formulari amb un botó. Déjame aquí seguir endavant i escric en YHOO de símbol de cotització de Yahoo, feu clic a Obtenir Cita, i ara noto que he rebut un avís amb 32.86. 

Déjame anar en realitat a una versió més de luxe d'aquesta pàgina, la versió 2, i escrigui en diguem Microsoft, MSFT. Rebi una oferta. I ara fixeu-vos, no hi ha alerta. Avís on diu preu que es determini? No és el més simple d'exemples que al · ludeix al Gchat i Facebook Xateja, i Gmail, i l'altre tal llocs web estan fent pel fet el canvi de la pàgina web. 

Note això. Permetin-me tornar a carregar la pàgina. Permetin-me obro Inspector de Chrome. Déjame anar als elements fitxa aquí baix. Ara noti si puc ampliar fins aquí i obrir això, observi que aquest és el meu HTML DOM - el meu model d'objectes de documents. Aquest és el meu HTML. Però ara compte, tot i que va a ser una mica difícil de veure, tant en llocs alhora, si escric en FB aquí, miri la part inferior de la pantalla només. 

En realitat està canviant la meva HTML sobre la marxa. I ho està fent això, senzillament, fent alguna cosa com això. Si obro ajax-2, la notificació implementació una cosa tan sexy com que, tot i que és bastant lleig, però tan sofisticat com que funcionalment, té alguns HTML a la part inferior. Però noto que solia etiquetar. Nosaltres no hem fet servir això abans, però això és com una, però no obliga tot en una nova línia. Simplement té una regió rectangular en la mateixa línia en essència. 

Fixa't que jo li vaig donar un ID de preu. I resulta que mitjançant l'ús de la mateixa JavaScript biblioteca, tinc una funció anomenada cita () que es diu cada vegada que s'envia el formulari. I el que faig és la següent. Estic declarant una variable en JavaScript anomenat url, guardar el valor quote.php? símbol =. En altres paraules, jo mateix estic començant per preparar una sol · licitud HTTP, i després Estic concatenant en què amb un plus qualsevol que sigui l'element amb l'identificador de del símbol és que compta és que camp de text just aquí sota. Així que igual que teníem formes en el passat. 

I després resulta que en jQuery, si trucar. val (), que crida d'un val funció, una funció de valor, que obté qualsevol que sigui l'usuari ha escrit polz I llavors tot el trànsit de la xarxa el que passa és això. $. GetJSON. 

I en un a part, mostra de dòlar és només una notació abreujada. És realment jQuery.getJSON. Porta-me'n a JSON d'aquesta URL, i quan la sol · licitud torna, truqueu a aquest funció i passar com a argument ho va tornar des del servidor. 

En altres paraules, si torno a la navegador i torneu a quote.php, el que el navegador s'està fent cada vegada aquest fragment de dades. I quan vaig a aquesta pàgina web aquí, compte si en lloc d'anar a la xarxa fitxa i clar, i després escriviu alguna cosa així com GOOG de Google i obtenir Citar, observi la pàgina no ha canviat. No obstant això, una sol · licitud HTTP es va fer, i el que tornar aquí si ens fixem en el la resposta és un munt de JSON que es va accedir finalment amb aquest senzill joc aquí. 

Les dades són el que es va arribar des del servidor. El preu és el nom de la clau que m'importa. Així data.price em fa això. 

Ara, per la seva banda, i aquesta és l'últim exemple. Vostè pot fer encara més amb la pàgina. Una realitat, bé dos. Podem portar de tornada el etiqueta, si et recordes d'això. És JavaScript. Podem fer això. Molt emocionant. Anem a deixar això com un cliffhanger. 

Però el més emocionant, pot fer coses com aquesta. Si vaig a la geolocalització-1, resulta que Chrome sap que estem en latitud longitud 42.37. -71.10. Així que hi ha molt més enllà a la seva disposició. Però més sobre això la propera setmana. Ens veiem el dilluns.