[Powered by Google Translate] [Setmana 9] [David J. Malan - Harvard University] [Aquesta és CS50. - CS50.TV] Està bé. Benvingut de nou. Això és CS50, i aquest és el començament de la setmana 9. Avui ens centrem en particular en el disseny, ja no en el context de la C però en el context de PHP i una mica de SQL i una mica de JavaScript, especialment cap a la fi dels dos pset 7 i també el seu projecte final. De fet, si vostè està en aquest punt en el projecte final on presumiblement a partir d'una hora o així que fa que almenys vam començar a pensar una mica al seu projecte final i estàs pensant que t'agradaria col · laborar amb 1 o 2 companys de classe, si vostè està tenint problemes per connectar-se amb aquests companys, no dubti en omplir el formulari en cs50.net/partners/form. Simplement et pregunta qui ets, quin tipus de projecte que vostè està pensant, on viu només per raons logístiques. I després, si voleu mantenir un ull en la setmana o així que l'URL de full de càlcul allà, A continuació, pot veure una versió de només lectura del document de Google Docs en el qual estem recollint aquesta informació. Així que si vostè vol treballar amb algú, per tots els mitjans no dubti en acostar-se a la gent a través d'aquest mecanisme. Però la majoria de la gent fer sol treball. Això és totalment bé. Així que no crec que això és d'alguna manera obligatòria. Divendres era només jo i uns pocs de l'equip d'aquí, teatre buit en la seva major part. Haver 3 turistes assegut allà dalt, així que va ser una mica incòmode. El que parlava era de bases de dades i parlem de pset 1 jul mica. I si no va ser així per capturar en vídeo que de moment, això està bé. Vaig a tractar de definir els termes que d'altra manera seria donar per fet basat en conferència de divendres. 

Però avui tractarem d'arribar al punt de no només ser capaç de fer una cosa així pset 7 però realment entendre el que està passant sota la campana, en particular algunes de les abstraccions que hem posat en marxa a l'arxiu functions.php per fer la seva vida una mica més fàcil, però pel que entenc que en última instància de manera que quan les rodes d'entrenament sortir en un parell de setmanes vostè encara pot sobreviure en el món real i fer aquestes coses sense un marc CS50 sota de vostè. Aquest $ _SESSION, per a aquells de vostès que estan familiaritzats o que ja agafat el vídeo el divendres, què farem SESSIÓ en una aplicació web basada en PHP? Aquesta és una variable superglobal, el que significa que és similar en esperit a GET i POST i alguns altres, però què és això útil? 

Quin és SESSIÓ utilitza? Si. [Estudiant] Logueandote Com diu? [Estudiant] Logging in Logging in Indeed. En pset 7 que estem fent servir aquest superglobal sessió per facilitar la tala polz I el que és bo d'aquest superglobal és que és una matriu associativa. Una matriu associativa, recordar, és només un conjunt, però els índexs ja no han de ser nombres com 012. Ells poden ser nombres o poden ser fins i tot cadenes. I el que si ha bussejat en pset 7, però, cal recordar que estem emmagatzemant un ID de clau anomenada dins d'aquesta matriu associativa el valor és com 123 - qualsevol que sigui l'iniciat sessió ID d'usuari és. El motiu d'això és que fins i tot després que l'usuari ha visitat localhost o el meu lloc web en general i que han iniciat sessió, encara que no fa clic a un enllaç o tornar al meu lloc web durant 5 minuts o fins i tot una hora o fins i tot un dia, però deixen la seva finestra del navegador oberta, a través d'aquest superglobal puc recordar que s'ha entrat 

En altres paraules, el que em permet emmagatzemar qualsevol cosa una mica llarg termini Vull sobre un usuari. I vostè pot pensar que és realment com l'encarnació d'un carret de compres. Llocs com Amazon, òbviament, posarem les coses en un carret de la compra, però HTTP, el protocol que alimenta la web, és apàtrida en el sentit que quan vostè visita un lloc web, en la seva major part no té algun tipus de connexió de xarxa permanent entre el seu navegador i el servidor. Així que vostè hagi descarregat el codi HTML i JPEG i GIF les i els de tot, que la connexió desapareix i només hi ha una còpia del codi HTML i altres coses des del servidor. Però si el servidor vol recordar alguna cosa sobre tu, la càrrega és al servidor per registrar realment aquesta informació. I pel que el programador que té control sobre el servidor pot posar gairebé qualsevol cosa que vulguis dins d'aquesta matriu associativa superglobal i que hi serà la pròxima vegada que l'usuari torna, si es tracta de minuts o fins i tot dies més tard, a menys de tancar la finestra del navegador, en què SESSIÓ punt desapareix. Així que és efímer emmagatzematge, és no persistent, i que està destinat a desaparèixer tan aviat com l'usuari tanca el seu navegador - no només aquesta pestanya, sovint el navegador sencer, el que efectivament el registre l'usuari fora. Llavors, com és això en realitat pràctica? Fem una ràpida ullada a un exemple senzill vam veure el divendres. Per aquells no familiaritzats, és tan simple com això. Aquesta és una pàgina web l'únic propòsit en la vida és que em diguis quantes vegades he visitat aquesta pàgina. Aquesta és la primera vegada avui aquí que la vaig visitar, pel que diu 0 vegades. 

Però si començo a tornar a carregar aquesta pàgina, es diu 1 hora, 2, 3, 4, 5, i això finalment s'acaba de seguir comptant cap amunt, amunt, amunt, amunt, amunt per cada vegada que feu clic a Actualitza en realitat en ell. Llavors, com és aquest treball? Deixa anar dins d'aquest arxiu anomenat counter.php. La part superior de la mateixa és tots els comentaris blaus, però la part interessant és aquí. En la línia 13 es diu session_start aquesta funció, i que és, literalment, tot el que has de fer si vols tenir accés a aquest superglobal especial anomenada $ _SESSION. Això fa que tot sigui possible, i veurem com en un moment en què tot és possible. En la línia 16 avís del que estic fent. Si la clau, anomenat contra - en altres paraules, el valor de l'índex - "comptador" existeix dins d'aquesta matriu anomenada SESSION, llavors què estic fent amb ell en la línia de sota? Quina és la línia 18 va? 

[Resposta dels estudiants inaudible] Què és això? [Estudiant] Emmagatzemar el valor. Bé. S'emmagatzema el valor que està en sessió en aquest moment en una nova variable temporal local, $ Contador en minúscules. Tingueu en compte que PHP ja està sent una mica mandrós aquí. Recordeu que no tenim cap menció de int o float o cadena ni res d'això pel fet que PHP és tipus febles, de manera que no cal especificar el tipus d'una variable, i en aquest cas aquí no he tan sols ho declarat encara. Ho estic declarant dins d'aquestes claus ia diferència de C, això és realment bo. No importa com profundament niat declaració d'una variable és en PHP - dins de clau, dins de clau de tancament i similars - serà en aquest moment en el temps existeix per a la resta del programa, per bé o per mal. Així que immediatament es converteix en global tan aviat com vostè el defineix com estem fent aquí. 

En cas contrari, si no em sembla que hi hagi res al superglobal REUNIÓ, Estic aparentment inicialitzar aquesta variable comptador a 0, per tant només suposant que l'usuari mai ha estat aquí abans. I després d'aquest curs és incrementar el comptador, com? Estic actualitzant el valor que hi ha dins d'aquesta matriu associativa fixant igual al que actualment és comptador + 1. Si em desplaço fins aquí per el codi HTML de la pàgina, en realitat és bastant simple. Tot el que tinc al cos d'aquesta pàgina és: "Vostè ha visitat aquest lloc vegades fulano de tal". I aquest és un constructe PHP. Si ho fa <? =, Això és equivalent al que efectivament funciona? Realment és equivalent a una cosa així com printf, que hem vist moltes vegades en C, encara que, com vostès saben ja de l'especificació en pset 7, impressió és també una funció que només imprimeix alguna cosa, en realitat no utilitzar codis de format, i en realitat es pot dir que trobo també. Són tots molt lleugerament diferent, encara que l'efecte net és en última instància el mateix. Així que aquest ús del signe igual és només una espècie d'una manera elegant de fer-ho més breument del que d'una altra manera podrien ser capaços de fer-ho. Així que això és tot el fa aquest lloc web. S'imprimeix el valor del comptador. Com és que tot això realment succeeixi? Vostè pot recordar una setmana o així que fa que vam començar a buscar sota de la caputxa la forma en que una pàgina web funciona mitjançant l'ús d'aquesta fitxa inspector. 

Chrome té aquesta tant en la versió per a Mac, la versió de Windows, i fins i tot la versió de Linux, i Firefox i IE tenen mecanismes similars mitjançant el qual vostè té aquest depurador integrat dins del navegador. Anem a fer una ullada a la següent. Tenim un munt de fitxes d'aquí, i recordar que l'esquerra és un Elements, i no importa el espantosa el codi HTML i JavaScript en una pàgina, Recordem que amb la pestanya Elements en realitat es pot navegar pel codi HTML jeràrquicament i agradable i ordenada. Així que si vostè està tractant d'aprendre d'un lloc web com Google o Facebook o en realitat qualsevol lloc web, compte que vostè està probablement millor mirar el codi font d'aquesta manera en lloc de veure la font de cru, que pot ser un desastre, com hem vist, especialment en el lloc de Google. Així que si en lloc feu clic a la fitxa Xarxa aquí, anem a veure el que està passant en la meva visita a aquesta pàgina. En primer lloc vull netejar la meva memòria cau. Vaig a anar a Ajustos en Chrome i després anar a la Història i després Esborrar dades de navegació. Pot ser utilitzat per fer això per a altres fins, [rialles] però quan es tracta de desenvolupament de llocs web, és realment útil - si rius tu saps. [Rialles] De fet, és molt útil en el desenvolupament de llocs web perquè la realitat és coses com galetes i coses per l'estil en memòria cau els fitxers HTML en memòria cau, arxius JavaScript pot arribar a ser un gran mal de cap, ja que si per qualsevol raó el navegador decideix emmagatzemar en memòria cau algun arxiu i, però vostè ha realitzat canvis en l'arxiu al servidor però el navegador no s'ha adonat realment que l'arxiu ha canviat i per tant no és realment tornar a descarregar-lo, fins i tot quan feu clic al botó Actualitzar, una de les formes més segures de fer només que la culpa no és del seu codi, és amb el comportament del navegador, és anar a aquí al navegador i simplement esborrar l'historial complet perquè no hi hagi confusió. 

I llavors, si vostè realment vol ser paranoic, sortiu del navegador, reinicia, i després assegurar-se que tot està funcionant com s'esperava. Així que en resum, la memòria cau de compensació és bo quan es fa el desenvolupament. Així que aquí tenim la pestanya Network. Jo havia visitat prèviament el lloc de 9 vegades, però m'ho dius a mi seguir endavant ara i feu clic a Actualitza. I estic de tornada a 0. Anem a veure realment com és que aquest superglobal sessió està sent implementat. Vaig a fer clic a la sol · licitud d'un HTTP que es va fer, i aquesta finestra de depuració em permet mirar dins d'això. Aquí veig només la resposta del servidor, que no és interessant. He vist això en qualsevol nombre de maneres. Però el que és tècnicament interessant són les capçaleres. Si em desplaço fins aquí i se centren en les capçaleres de petició i feu clic a Mostra la font, el que vaig a veure és, literalment, la petició HTTP que acaba d'anar del navegador al servidor, GET és la paraula clau i, a continuació, / counter.php sent el nom de l'arxiu HTTP/1.1 només és la versió d'HTTP que el navegador està utilitzant. Aquesta línia aquí és un petit recordatori des del navegador al servidor quin és el nom del servidor és que vol parlar. I a continuació, la resta d'aquest és de vegades interessant, però no és rellevant en aquest moment. 

Això és només una espècie de curiositat. Cryptic encara que aquesta cadena és, en qualsevol moment del seu navegador visita una pàgina web s'informa al servidor el navegador que utilitzeu i quin sistema operatiu que utilitzeu i la versió de la mateixa. Així que si alguna vegada es va preguntar com els llocs web com CNN i altres coses conèixer els percentatges d'usuaris de Mac en els usuaris de PC, Web, Usuaris d'Internet Explorer, els usuaris de Chrome i similars, és perquè tots els navegadors estan dient a tots els llocs web només per aquí el que som. No necessàriament contenen informació d'identificació personal, però sí li al servidor quina és la seva adreça IP és i quin navegador i sistema operatiu que utilitzeu. Així que aquí és on aquesta informació. Però el que és més interessant ara, quan es tracta d'aquestes sessions és la capçalera de resposta. Deixeu-me veure el codi font, feu clic a següent a la resposta. El que és interessant aquí és algunes coses. 1, tenim un codi d'estat de 200. Mai veiem aquest codi d'estat perquè això vol dir que tot està bé. Significa, literalment, bé en contrast amb una altra cosa. Què és un nombre que de vegades veiem que això és dolent? [Estudiant] 404. 404, arxiu no trobat, 403 és possible que ja ensopegar, el que està prohibit, el que significa que vostè es va oblidar d'alguna cosa chmod, el més probable. I hi ha un munt d'altres. 

Aquí baix, això és una mica boig. M'acabo d'escriure aquest arxiu fa uns minuts enganxant a gedit. Per què aquesta pàgina expira el 1981, abans que realment era una web? Què està passant aquí? 

[Resposta dels estudiants inaudible] La marca de temps. Però per què? És una cosa arbitrari, però és realment útil. El que això ens diu al meu navegador és l'arxiu PHP que acaba sol · licitat ja hagi expirat. De fet, expirat fa 30 anys. Però, què significa això realment? Només vol dir que la propera vegada que l'usuari visita aquesta pàgina, ja sigui per càrrega o escrivint la URL a la barra d'adreces, assegureu-vos d'anar a buscar una nova còpia. Aquesta és una espècie d'un exemple d'emmagatzematge en memòria cau, una paraula estúpida que només significa tractar de dissuadir els navegadors de fet HTML emmagatzematge en memòria cau que s'ha enviat des d'un servidor de manera que vostè no colpeja accidentalment recàrrega i després veure la mateixa versió de l'arxiu. Segur que vol que el servidor enviï una còpia nova. Així que el fet que és 1981 només significa que això és el que l'aparell està triant com una data arbitrària en el passat. Però la realitat és sucosa ara aquesta. Fins i tot abans dels 50 és probable que vagament familiaritzat amb les galetes. A partir d'ara, sobretot entre els menys còmoda o en el medi, Què és una galeta al vostre comprensió en aquest moment tot i que estem a punt de fer del seu coneixement més tècnic? Què és una galeta? Si. [Estudiant] Informació sobre l'usuari, com si han escrit el seu nom d'usuari o alguna cosa així. 

Bé. És una informació sobre l'usuari, ja sigui que hagi escrit en nom d'usuari ja. Les galetes són un mitjà pel qual els servidors poden recordar alguna cosa sobre un usuari. I el que realment és una galeta és un fitxer de text o d'alguna seqüència de bytes que està emplaçada a un servidor dins del navegador, i dins d'aquest arxiu o entre els bytes és algun tipus d'identificador. Potser és literalment el seu nom d'usuari, però més sovint és una mica més críptic d'aspecte com aquesta cosa aquí - bo8dal3ct i així successivament - aquesta cadena alfanumèrica molt gran que realment només pretén ser un identificador únic per a tu. O vostè pot pensar en ell com una mena de segell de mà virtual. Si vostè va a un club o un parc de diversions, recordar que vostè ha pagat i entrat, li van posar un adhesiu vermella a la mà d'algun tipus, i que recorda a la gent al taulell que ja has pagat i que pugui entrar i sortir quan vulgui. Les galetes són una mica similars en esperit a això. La primera vegada que vaig visitar aquest lloc web, com acabo de fer després de netejar la meva memòria cau, el lloc web, l'aparell en aquest cas, posar un segell a la mà el nom és PHPSESSID, ID de sessió, el valor és la cadena alfanumèrica molt llarg. 

Així que ara és una espècie d'estampat a la mà perquè la pròxima vegada que em va colpejar recarregar o manualment visitar aquesta URL al navegador, meu navegador per definició d'HTTP es presentarà el segell a la mà una i altra vegada i una altra. Així que, tot i que el servidor no ha de saber qui sóc, que almenys sé que sóc el mateix usuari o si més no, més concretament, el mateix navegador. I això és en última instància com el superglobal sessió s'implementa. El servidor no té idea de qui és vostè quan torni a visitar un lloc web per a la segona o tercera vegada menys que vostè present aquest segell a la mà. I tan aviat com vostè present que segell a la mà, el lloc web essencialment entra en una petita base de dades del seu propi i els xecs, val, acabo de veure el segell de la mà de bo8dal3ct usuari i així successivament. Deixa veure la informació que el programador ha emmagatzemat dins de la superglobal sobre aquest usuari, i després deixar que m'asseguri que aquestes dades són d'aquí a la sessió superglobal de manera que el programador pot tornar a accedir a aquestes dades fins i tot si s'ha establert alguns minuts o hores abans. Així que en altres paraules, les galetes, que ha rebut una mala reputació des de fa algun temps a causa de la inseguretat en els navegadors i que realment pot violar la nostra privacitat i tot això, en realitat tenen una gran utilitat ja que sense ells que constantment s'iniciï sessió a cada pàgina Facebook visites o tots els correus electrònics de Gmail de llegir si el navegador no tingués alguna manera de recordar que ja ha autenticat. 

Així que d'aquesta manera s'envien les galetes d'anada i tornada a través del cable. Una altra curiositat sobre les galetes, sobretot aquí, és que això és completament sense xifrar. No hi ha xifrat passant aquí en absolut, i de fet estic fent servir HTTP al moment. Un dels nostres moments favorits en CS50, que ara és de 2 anys, va ser al voltant del temps d'una eina anomenada Firesheep va sortir. Aquest era un fanàtic de la descàrrega que va ser fet per un investigador de seguretat com un toc d'atenció per a la comunitat de dir com atroçment implementat certs mecanismes d'autenticació a la xarxa eren. Així per algun temps, Facebook era gairebé completament a través d'HTTP, HTTPS no. I encara que no té idea de com funciona el xifrat, S és segur el que significa que hi ha almenys alguns xifrats. Facebook s'utilitza per xifrar els noms d'usuari i contrasenyes, però tan aviat com ho vas fer amb la teva pokes o els seus missatges o el seu servei de notícies, tot això va ser sense xifrar. Així va ser fins que Gmail només un any o dos enrere. Cada vegada que ha entrat en si, que utilitza xifrat segur però després no ho van fer. I per què podria ser? Per què no utilitzar la criptografia tot el temps en els casos d'ús d'aquest tipus? Què és això? Crec que he sentit alguna cosa. [Estudiant] Velocitat. Velocitat, no? Hi ha maneres d'evitar això. Però si només una mica de pensar-hi, lògicament, si xifra una mica, el que has de fer com a mínim una mica més de treball. En pset 2 quan vostè implementa Cèsar o Vigenère o esquerda, fins i tot, només imprimeix una cadena és relativament fàcil. Xifrar i després imprimir una cadena mínimament requereix una mica més. 

 Per als súper populars llocs web com Google i Facebook, si vostè ha de fer més treball per a cada usuari per a cada pàgina web única que visiten, que només es necessita més temps de CPU. I si vostè necessita més temps de CPU, és possible que necessiti més servidors, el que significa que vostè pot ser que necessiti més diners. I així, durant molts anys, aquest realment no era la millor pràctica. La gent utilitza xifrat SSL només quan era necessari. Però va resultar, i com aquest tipus amb Firesheep va fer súper clara, quan vostès que es troben actualment a Facebook en aquest moment - Per curiositat, a veure si va a confessar. Si estàs a Facebook ara mateix en alguna pestanya, encara que no estiguin en primer pla, és l'adreça URL HTTP o HTTPS? [Els estudiants] diverses S. S? [Rialles] Bé. Qualsevol HTTP? A només 1? Bé. Així que tots podem hackejar compte d'aquest tipus Facebook en aquests moments. En la seva major part, això s'ha convertit s'activa per defecte, si més no en alguns llocs web. I conte llarg, si el trànsit del seu web no està xifrada, no només el codi HTML anar i venir a través de les wifis sense xifrar, així que coses com les galetes van i vénen tot l'aire sense cap tipus d'encriptació. Així que si tens una mica de sentit comú de programació o una mica de google habilitats per trobar programari lliure que fa això, l'únic que has de fer és seure a Starbucks o seure en un aeroport on hi ha generalment no xifrat WiFi i mira per paraules clau com a set-Cookie: o PHPSESSID perquè si vostè té el coneixement tècnic per veure només el WiFi per a tots els bits que flueixen a través de l'aire per a aquest patró, llavors es pot dir que PHPSESSID noi resulta ser bo8dal i així successivament. I després una altra vegada si ets prou expert en tecnologia o tenir l'eina adequada, a continuació, pot simplement tornar a configurar el seu propi navegador per iniciar la presentació d'aquest segell a la mà a Facebook.com, i Facebook és només suposarà que vostè és aquest tipus perquè tot el que saben no és el que ets, sinó que té el següent identificador únic. Així que si vostè roba aquest identificador únic i presentar-lo al servidor web com el seu propi, que només es mostrarà a aquesta persona feed de notícies o d'aquesta persona missatges o tocs. 

I jo faria Google ara com activar HTTPS a Facebook, potser. Però realment és tan simple com això. I així, Facebook i Google i similars s'han posat realment bo en això, però mantenir un ull cap a fora encara més pels llocs web que visiti que no utilitzen HTTP i tenen algun tipus d'informació sensible en ells, ja sigui financera o personal o similar. Si no utilitzeu aquesta, molt possiblement pot ser galetes com aquest molt fàcilment robats i després forjada, i això és exactament el que va fer Firesheep. No ha de ser un programador. Tot el que havia de fer era tenir una connexió a Internet, descàrrega aquesta eina gratuïta, i el que faria és que es connecti i després li mostrarà els noms de Facebook de tots en Sanders, en aquesta demostració particular, al seu voltant i tot el que havia de fer era fer clic en el seu nom i el programari automatitzat el procés d'olorar aquesta galeta, presentant a Facebook com el seu propi, i, voila, vostè està registrat Així que aquest és un altre d'aquests "no facis això" oficialment. Si vostè té la seva pròpia xarxa domèstica i voleu retocar, per tots els mitjans, però s'adonen que això fa creuar la línia en un entorn universitari. 

Però l'objectiu aquí és realment per destacar no com fer-ho però la forma de defensar-se aquest tipus de coses. I la solució trivial aquí, tot i que ella mateixa és defectuosa, és reduir realment l'ús de llocs que no utilitzen HTTPS constantment. Així que llocs com Facebook i Google tenen cada vegada més caselles de verificació on es pot optar per aquest tipus de coses, i els bancs han tingut això durant anys per raons similars. Així que una mica d'un factor de por si podem. Però això és en poques paraules. Així és com un servidor recordi qui és vostè. I tan aviat com puguin recordar qui són, poden recordar res de tu que el programador ha emmagatzemat a l'interior d'aquest superglobal especial anomenada $ _SESSION. I per pset 7 ho estem fent servir trivialment només per recordar un int, a saber, la identificació única de l'usuari que ha iniciat sessió, pel que sabem que hi han estat abans. Qualsevol pregunta llavors sobre les sessions o les galetes o similars? Firesheep no funciona tan bé ja, i has de posar l'equip en un mode promiscu especial pel que en realitat estàs escoltant el trànsit a més de vostès mateixos. Així que si vostè està descarregant actualment Firesheep, fes-lo realitat no és tan fàcil com ho era abans de demostrar. Està bé. I no ho fan en Sanders. Fes-ho a casa. Bases de dades. Una de les coses que vam fer al conjunt de processadors 7 molt deliberadament Se li donarà una taula de base de dades de la mostra per als usuaris que té alguns identificadors d'usuari, alguns noms d'usuari, contrasenyes encriptades i alguns en el mateix. I com veuràs, si no ho ha fet, vostè va a haver de canviar la taula una mica. Vas a haver de afegir una mica de memòria cau per a cada un dels usuaris en aquesta taula, i hauràs afegir una altra taula d'història, una taula de carteres, o potser anomenar-lo d'una altra manera. Però en termes de pensar sobre com fer-ho, anem a obrir aquesta eina que utilitzem el divendres, però si no familiar, l'aparell ve amb una eina phpMyAdmin que es diu casualment escrit en PHP, però el seu propòsit en la vida, després d'iniciar sessió aquí com jharvard amb carmesí, és que em donés una manera fàcil d'usar de veure i canviar la meva base de dades. 

La base de dades que estic corrent en el dispositiu que es diu MySQL. Això és molt popular, i és una base de dades de codi obert que és meravellosament fàcil d'usar, especialment amb extrems davanters d'aquesta manera. El que aquesta eina em permet fer, per exemple, és furgar taules. Deixa anar endavant i fer-ho. Divendres vam crear una taula anomenada alumnes que era super simple. Tenia 3 columnes - id, nom i correu electrònic - i s'insereix manualment un parell de files com David i Mike en aquest exemple particular. Vegem això una mica més, i suposarem que volem recordar més que només el nom i el correu electrònic d'un usuari. Permetin-me feu clic a Estructura aquí a la part superior. I una altra vegada, el conjunt de processadors li guia pels passos necessaris aquí, així que no et preocupis si alguna cosa d'això és una mica ràpid. Llavors vaig a fer clic aquí. Vaig a afegir un cert nombre de columnes que segueixen email perquè vull afegir alguna cosa com a casa. Em vaig oblidar de registrar la casa d'un estudiant. Permetin-me fer clic a Vés, i ara tenim aquesta manera que per desgràcia és una mica ampli d'esquerra a dreta, però jo vaig a dir el nom d'aquesta casa de camp, i llavors el tipus que ara ha de triar. Així que anem a tenir una breu xerrada sobre els diferents tipus de MySQL perquè mentre que PHP és tipus febles i quin tipus de juga ràpid i lliurement amb els tipus, en una base de dades especial que és super important utilitzar realment escrivint al seu avantatge perquè una de les coses MySQL i altres motors de base de dades pot fer per vostè és assegurar-se que vostè no posa dades falses a la base de dades. Aquesta és una espècie d'error de xecs gratuïts a la seva disposició. 

A casa som nosaltres, òbviament, no volem que sigui un int, que és un valor de 32-bit en MySQL. Vam parlar breument el divendres sobre VARCHAR, que significa carbó longitud variable. Què és això? Això li permet especificar que voleu que es tracta d'una cadena d'algun tipus. No se sap molt bé per endavant quant temps és, pel que vaig a dir arbitràriament un nom de la casa pot ser de 255 caràcters, però es pot anar amb 32, 64 - un nombre realment. Però l'avantatge d'utilitzar un VARCHAR sobre un camp anomenat char és el que? Només intuïtivament si em desplaço fins aquí, noti que hi ha char i varchar hi. VARCHAR és la longitud de caràcters variable, char és una longitud fixa de caràcters. Així que basat només en aquesta definició, quina és l'avantatge o desavantatge de cada un d'aquests? En altres paraules, que es preocupa per la distinció, o per què t'importa? 

Si. [Estudiant] VARCHAR té més flexibilitat, però ocupa més memòria. Bé. VARCHAR ocupa més - Anem a veure. No estic segur si he sentit aquest dret. Es pot dir que una vegada més? [Estudiant] vaig dir VARCHAR probablement té més flexibilitat però ocupa més memòria. Interessant. Bé. VARCHAR probablement li dóna més flexibilitat, però ocupa més memòria. Aquest últim no és necessàriament cert. Depèn del context, però tornarem a això. 

[Resposta dels estudiants inaudible] Exactament. De fet, és el cas que char sol utilitzar més memòria perquè un char, com en C, és com una cadena, és una sèrie de caràcters. Així que si et diuen que un camp char de longitud 255, la base de dades és, literalment, et donarà 255 caràcters. I si la casa acaba sent personatges Mather i 6 en total, vostè està perdent més de 200 caràcters. 

Així que un VARCHAR efectivament només utilitza tants caràcters com sigui necessari fins a un import màxim. Però el preu que es paga és en realitat el rendiment, potencialment. Si vostè sap per endavant que totes les seves cadenes seran de 8 caràcters - Per exemple, suposeu que requereixen contrasenyes de longitud 8 - l'avantatge d'utilitzar un camp char de tant en tant, encara que no sovint, és especificar una longitud fixa per una mena contrasenya perquè ara la base de dades pot ser encara més intel · ligent. Si se sap que cada camp char, cada cadena en una columna és la mateixa longitud, a recuperar la funció d'accés aleatori. Vostè pot saltar entre els camps aprofitar diverses en la taula de base de dades perquè pensar en una base de dades com files i columnes. Així que si cadascuna de les cadenes de la mateixa longitud, Sabia vostè que la primera és en el byte 0, el següent és el byte 8 i després 16 i després 24 i així successivament. Així que si totes les cordes són de la mateixa longitud, pot saltar molt més eficient. Així que pot ser un benefici en termes de rendiment, però en general vostè no té el luxe de saber per endavant, de manera que un VARCHAR és el camí a seguir. Hi ha un altre detall que fins i tot Facebook vaig trobar amb el temps. INT són genials, i ens tipus d'utilitzar per defecte cada vegada que vulguem un nombre, però és només 32 bits. 

I tot i que Facebook no acaba de tenir 4 mil milions d'usuaris ara, definitivament hi ha algunes persones per aquí amb més d'un compte o els comptes que s'han obert i tancat, i pel mateix crec que Facebook fa uns anys va tenir la transició de int que, com és ben anomenat, bigint, que és a 64 bits en el seu lloc. Així que això també és una decisió de disseny. Vostè seria increïblement afortunat si el seu projecte final es converteix en l'inici, Disposa de 4 milions de dòlars i els usuaris 1, més o menys, en aquest cas l'ús INT pot resultar una mica miop. Però, en realitat, la seva taula d'usuaris està probablement molt bé amb INT. Però perquè alguna cosa com pset 7, com la seva taula d'història, és possible que tingui milers, milions d'usuaris si esdevenir etrade.com. Així que, potser no tingui més de 4 mil milions d'usuaris, aquells usuaris que sí que tenen poden tenir més de 4 mil milions de transaccions a través del temps - compra i ven i les coses en la seva història. Així que si vostè fa preveure - una vegada més, aquests són bons problemes a tenir si vostè té aquesta quantitat de dades - si ho fa anticipar dades que superen la mida d'un int, anar amb alguna cosa com bigint és una adreça que no amb la freqüència suficient adoptat pels dissenyadors perquè figura gent que no serà un problema, però és tan fàcil de triar alguna cosa més gran que això. Decimal que estem fent servir en pset 7, que especifica la precisió fixa pel que pot evitar els problemes relacionats amb els flotadors i dobles i reals i similars. 

I després hi ha alguns altres camps aquí. Anem a agitar les mans en ells fins a cert punt. No obstant això, les dates, hores tenen un format establert en MySQL, i l'avantatge d'emmagatzemar dates com dates i VARCHAR no significa que la base de dades en realitat es pot canviar el format en diferents formats, si un format d'EUA o format europeu o similar - però vostè ho desitja - molt més eficient que si es tractés d'alguna cosa genèric VARCHAR. I després hi ha alguns altres binari, varbinary blobs. Aquests són objectes binaris grans, i també pot emmagatzemar dades binàries així com les dades geomètriques en una base de dades. Però per a nosaltres, en general va a importa sencers i VARCHAR i similars. Acabarem amb aquest exemple casa. Casa que diré arbitràriament en 255 caràcters. A continuació, el valor per defecte que poguéssim fer això. Podríem posar a tots per defecte en Mather House, per exemple. Així és com podríem especificar que la base de dades assegureu-vos que sempre hi ha algú que té un valor. Però vaig a deixar que sigui. De fet, per a les persones que viuen fora de l'escola i no en una casa, potser jo realment desitja especificar que el valor per defecte de la casa és NULL, i després he de marcar aquesta casella i dir-li a la base de dades que està bé si la casa de l'usuari és NULL. 

Un cop més, aquest és un altre mecanisme de defensa que pot posar en el seu lloc pel que no tenen ni tan sols per posar-lo al codi PHP necessàriament. La base de dades s'ha d'assegurar que les coses són o no són NULL. I finalment, Atributs. Cap d'aquests són realment rellevants. Binari sense signe - cap d'aquests són rellevants per a una VARCHAR. Index. Algú sap o no recorda o té una conjectura pel que fa al que és un índex per alguna cosa com la casa? També això és en realitat una decisió de disseny important i relativament fàcil. Per a aquells que encara no l'han vist, el divendres parlem breument sobre les claus principals. En una taula de base de dades, una clau primària és el camp o columna que identifica de manera única les files a la taula. Així, a la taula actual que tenim identificacions, tenim noms i correus electrònics. Quin d'ells és el millor candidat per ser una clau principal, la funció consisteix a identificar de forma única les files? Probablement ID. Sens dubte, també podríem utilitzar les opcions que no obstant això? Potser vostè podria utilitzar el correu electrònic pel fet que en teoria és únic llevat que la gent està compartint comptes de correu electrònic. Però la realitat és que si vostè està utilitzant un ID numèric com 1234, això és només de 32 bits, mentre que una adreça de correu electrònic podria ser aquesta quantitat de bytes o octets que aquest. Així que en termes d'eficiència dels identificadors únics, que tendeix a ser bona pràctica només per utilitzar un int fins i tot si vostè té algun candidat cadena que sens dubte podria utilitzar. 

Per alguna cosa com la casa, això no hauria de ser una clau principal perquè llavors només una persona podia viure en Mather i 1 persona de Currier i similars. De la mateixa manera, això no ha de ser única. La diferència entre el primari i únic és que en el cas de la nostra taula actual, ID seria primari però el correu electrònic no és primari per la raó que acabem d'esmentar - rendiment - però encara ha de ser únic. Pel que encara pot forçar unicitat sense fer la reclamació que és un súper camp primari important. Però aquest és bastant útil: Index. Si vostè sap per endavant pel seu projecte final, per pset 7, o en general, que aquesta casa de camp serà una cosa que vostè busca en un terreny usant la paraula clau de selecció o d'alguna altra cosa, llavors preventivament pot dir la base de dades per a treballar la seva màgia i assegurar-se que es crea en la memòria de qualsevol estructura de dades luxe necessari per agilitar les recerques basades a casa. Potser pugui utilitzar una taula hash, potser va a utilitzar una llista enllaçada. En realitat, es tendeix a utilitzar un arbre, sovint una estructura anomenada B-tree - no és un arbre binari i l'arbre B - que és un arbre molt gran que es poden veure en una classe com CS124, la classe d'estructures de dades. Però en fi, vostè no ha de preocupar-se que en utilitzar el programari de base de dades intel · ligent. Vostè pot simplement dir, "Índex d'aquest camp, així que pot buscar-hi de manera més eficient." 

Si deixa aquest apagat i vostè tracta de buscar per a cada CD a la base de dades que resideix a Mather, que recaurà en recerca lineal. I si vostè té 6.000 estudiants de llicenciatura tots els que viuen en una casa, vostè va a buscar a tota la taula per trobar les Matherites, mentre que si vostè diu Index, espero que sigui alguna cosa proper a una recerca logarítmica per trobar aquest tipus d'estudiants. Això és només una funció gratuïta per encendre, tot i que ve a un preu d'una certa quantitat d'espai. Finalment, l'increment automàtic, aquest camp AI, Només vol dir que si es tracta d'un enter i no vol cuidar incrementar vostè mateix cada vegada que hi ha un nou usuari, comprovar que, i cada usuari que s'insereix automàticament s'obtindrà una nova identificació. Farem clic a Desa, i ara trobarem cap defecte amb aquest disseny. Si entro a Browse, observi que tant Mike i casa meva és NULL. Puc utilitzar phpMyAdmin per editar aquest manual. Jo puc entrar aquí i escriviu Mather i després prem Enter, i ara compte de la taula és diferent. Però noti que podia fer alguna cosa més també. Identificació de David és 1, així que de nou phpMyAdmin és una eina administrativa; això no és una cosa que els usuaris són cada vegada va a veure. Així que si en lloc feu clic a la fitxa SQL sobre de la tapa - i una altra, pset 7 li donarà a conèixer més d'aquestes consultes - Em pot executar manualment l'ordre SQL Llenguatge de consulta estructurat Usuaris UPDATE SET casa = 'Pfoho' WHERE id = 1. Aquestes consultes SQL són, ben poc, bastant llegible d'esquerra a dreta. Actualització de la taula d'usuaris, estableixi el camp anomenat casa Pfoho on l'ID de l'usuari és 1. O fins i tot podria fer que email = 'malan@harvard.edu'. Mentre que únicament m'identifica, que poden funcionar tan bé. Però Identificació tendeix a ser més alt rendiment, de manera que farem això. Anem, feu clic a Vés Bé, lecture.users no existeix. Quin és el meu error? Quina és la taula en realitat es diu aquí? Es diu als estudiants simplement perquè això és el que hem fet fins aquí dalt a l'esquerra. Es diu als estudiants no els usuaris. Llavors feu clic a Vés ara. 1 fila afectada. Consulta prendre 0,01 segons. Si faig clic a Explorar ara, ara viu a Pfoho Malan. Així que aquesta és una altra mostra de SQL, però el conjunt de processadors explica el procés de més una mica d'això. 

Hi ha una decisió estúpida que ja he fet aquí. Jo diria que aquest disseny de base de dades és ineficient perquè com més persones que se sumen a la taula dels estudiants, els més de nosaltres que començar a afegir, més de la TFS de començar a afegir, començarem a veure el que els acomiadaments en aquesta taula? 

Si. [Alumne] Veient que està en els estudiants, estem usant la mateixa [inaudible] El mateix - És clar, exactament. Llavors, si 400 persones viuen en Mather, més o menys, finalment aquesta taula va a tenir 400 files que diuen "Mather", "Mather," "Mather", "Mather", "Mather". Estem perdent tots aquests bytes, i hi ha un parell de robatoris de pilota allà. 1, hi ha el cas de la cantonada boja en què si algú paga un munt de diners i canvia el nom Mather, ara hem de canviar la nostra taula de base de dades completa. Això no passarà sovint, encara Pfoho un cop va ser anomenat North House fa 15 anys, així succeeix. Però això no és tot el que convincent. Més convincent que un cas com aquest racó de la necessitat d'actualitzar les dades de forma massiva per a una base de dades és per què emmagatzemar Mather una i altra vegada i una altra i una altra vegada? Això és un munt de caràcters, 6 caràcters. No podem fer-ho millor que això, especialment per Pforzheimer? Segur que podem fer alguna cosa millor que aquest nombre de caràcters. Per què no associar un identificador únic a cada casa i la botiga que per a cada usuari? Així que anem a provar això. En lloc d'utilitzar la taula dels estudiants, deixa anar a la meva base de dades de lectura fins aquí dalt a l'esquerra. Noteu aquí que diu Crear taula. Crearem una taula nova anomenada cases. El nombre de columnes serà 2. Retorn. Ara tinc dos camps. Vaig a trucar a això el nom, i que serà un VARCHAR de longitud 255, 

però això és bastant arbitrària. Déjame posar això aquí per convenció. Així que posi una identificació aquí. Donarem a cada casa un identificador únic. Donarem a cada casa un nom. Anem a especificar que l'identificador no està signat només per convenció d'utilitzar només números positius. Seguirem endavant i donar a aquest un camp d'increment automàtic per ara. I necessitem alguna cosa més? Seguirem endavant i feu clic a Desa. Ara tinc una segona taula. Observi com un a part aquest és l'ordre SQL lleugerament críptica que hauria hagut de escriure manualment si no s'utilitza una eina administrativa com phpMyAdmin. Així que una altra raó per la qual l'utilitzi. És una cosa meravellosament útil pedagògicament perquè pot fer clic al voltant de i esbrinar com funcionen les coses amb només copiar i enganxar el que phpMyAdmin va fer. No obstant això, la comanda CREATE TABLE és l'executat just, i aquí està la meva taula. Deixa anar endavant ara i utilitzar SQL primes en lloc de simplificar massa, feu clic a la pestanya Inserir. Deixa fer INSERT INTO cases, i jo vaig a dir el nom de la casa tindrà un valor de 'Mather. Això és tot. Aquesta sintaxi és una mica més críptica. Aquest és el nom dels camps que voleu inserir. Aquests són els valors que volem inserir en aquests camps. Permetin-me fer clic a Endavant 1 fila inserida va prendre 0,02 segons. Permetin-me feu clic a Navega ara. 

Observi si faig clic a Navega, hi Mather, el ID és l'automatització del número 1. Permetin-me fer un altre. Deixa anar a la pestanya SQL. INSERT INTO cases. El nom de la casa tindrà un valor de Pfoho i així successivament. Go. I puc seguir fent això una i altra vegada i una altra. O si t'avorreixes amb phpMyAdmin, pots fer servir la pestanya Inserir i no haver d'escriure el codi SQL en brut. Vostè només pot colpejar a terme amb major rapidesa en escriure, per exemple, Currier, Enter, i ara, si fem clic a Navega, hi Currier amb un diàmetre interior de 3. Així que això és el que volem dir amb increment automàtic. Però ara hem d'arreglar alguna cosa en els estudiants. Pel que als estudiants si el tipus de dades del camp casa ara ser? Ha de ser un enter, no? Així, l'objectiu aquí és per excloure, també conegut com normalitzar, les taules de manera que nosaltres no emmagatzemem informació redundant en cap dels meus quadres. I de nou, el camí que eren aquí dirà Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, que és molt redundant en termes de malbaratament dels caràcters. Així que permetin-me seguir endavant i canviar això fent clic en Estructura, i m'ho dius a mi seguir endavant i marcar el camp de casa, feu clic a Canvia i ara em canviaré això sigui un int. 255 ja no és rellevant. Deixin-me seguir endavant i dir que està bé si encara NULL. Guardar. Ara els estudiants de taula ha estat alterat amb èxit, i observi de nou la casa és un int. Com acotació al marge, ignora el nombre entre parèntesi quan es tracta d'INT. 

Això és per raons d'herència. De tornada en el dia en què no tenia GUIs, en el seu lloc hi havia un entorn de línia d'ordres, els 10 i 11, respectivament, s'especifiquen el nombre de caràcters que han de mostrar a la finestra de terminal per veure realment els camps. No té res a veure amb la longitud en bits del camp real, de manera que només haurem de fer cas omís d'això per ara. Ara he d'entrar en aquesta taula. I si David viu a Mather, la casa no ha de ser 0, que és un valor predeterminat int més proper a NULL. Ell ha de viure a la casa 1. Anem a dir que arbitràriament Mike viu a Pfoho casa, de manera que el número 2. Ara la meva taula es veu una mica més críptic. Però tingui en compte l'eficiència. Ara estic fent servir només 32 bits per identificar la casa, el que significa que només hi ha una definició canònica de casa Mather i Pfoho i que està a la taula de les cases. Així que si vull a reunir ara aquestes taules, pensar d'aquesta manera. Aquí tinc la meva taula dels estudiants, i en la part dreta hi ha aquests números, 1 i 2. 1 és Mather, 2 és Pfoho. Tenim els mateixos números en aquesta altra taula, que es diu cases, 1 i 2 i 3 per les 3 cases. El que ara vull fer és tenir la capacitat en el codi, PHP i SQL, a una espècie de reunir-se amb aquestes taules, en la qual si aquests són els estudiants i aquests són les cases, volem d'alguna manera de combinar perquè un s'alinea amb 1, 2 línies amb 2, i que pel que podem esbrinar on David i on Mike i on tothom viu. En aquest cas podria executar una consulta SQL com la següent. SELECT * FROM estudiants TE cases ON - I ara quins camps volem que s'uneixin els? Així students.house = houses.id. 

Una mica críptic, sinó que significa aquesta part literalment crear una nova taula temporal que és el resultat d'unir als estudiants i cases. I com es vol combinar la punta dels dits en aquesta llista? Set de camp de cases iguals a les cases dels estudiants "camp ID. I si jo ara feu clic a Vés, torni exactament el que jo esperava. David està en Mather, Mike està en Pfoho, i també veig els identificadors únics. Però el punt és que ara tinc una taula completa. I així, el menjar per emportar aquí per pset 7 o realment per al projecte final: Si trobeu que vostè està emmagatzemant qualsevol tipus d'informació redundant, si es tracta d'una casa, potser és una ciutat, estat i codi postal on ZIP pot en general, però no sempre s'utilitza com un identificador únic, passen per l'exercici mental i després amb alguna cosa com phpMyAdmin de factoring que les dades comuns sobretot perquè la pàgina web atrau més ben utilitzat i més popular, aquesta és la forma d'assegurar-se que tot és súper ràpid, donant a la base de dades com molts suggeriments pel que fa a la singularitat com sigui possible. Això era molt. Alguna pregunta? Està bé. Anem a prendre un descans de 5 minuts allà i reagrupar. Està bé. El següent és un exemple que es va utilitzar fa uns anys quan vaig prendre CS161, que és la classe de sistemes operatius al col · legi que és conegut per ser increïble, però una increïble quantitat de treball, i es concentra realment en alguns dels problemes de baix nivell que sorgeixen en els sistemes operatius i també fins i tot en el món de les bases de dades. 

La història que va ser explicada pel meu professor, Margo Seltzer, aquest any va ser el següent. Suposem que vostè té una nevera petita residència per a vostè i el seu company de quart i els dos que realment li agrada la llet. Així que arribes a casa de classe un dia, el seu company de quart no és encara allà, s'obre la nevera, i t'adones, "Oh maleïda sigui, ens quedem sense llet." Així es tanca la nevera, es pot caminar pel carrer per CVS i obtenir en les línies cada vegada més llargues per comprar una mica de llet en CVS. Mentrestant, el seu company de quart arriba a casa de la seva classe, entra a l'habitació, obre la nevera realment volen una mica de llet, obre la nevera i, "Maleïda sigui, no hi ha llet". Així que ell o ella tanca la nevera, surt per la porta, i es va a ABP o en algun lloc que no sigui CVS en què no anem a xocar entre si per anar a buscar una mica de llet. Per descomptat, uns minuts més tard, els dos tornar a casa i ara vostè té la llet dues vegades més que en realitat volia. I sent la llet, ara anirà malament perquè li agrada la llet però no m'agrada molt la llet, de manera que ara té molta llet, així que va a agrir. Aquesta és una situació horrible, horrible. Què podria haver resolt aquesta situació si fos el company de quart a casa per primera vegada? Sí [Estudiant] Hi hauria d'haver deixat una nota. [Rialles] Bé. Hi hauria d'haver deixat una nota. Vostè hauria d'haver posat una nota Post-it o similar, dient: "El que per a la llet" i després el seu company de quart conceptualment hauria estat bloquejada de realment fer això. O vostè podria anar un pas més enllà. Vostè, literalment, podria bloquejar la nevera amb una mena de cadenat, i ara el seu company de quart, literalment, es va tancar la porta de la nevera. Si generalitzem tornar a la programació, gairebé es pot pensar en la nevera com una mena de variable o una estructura, algun tipus de contenidor d'informació. El problema fonamental aquí és que tots dos se'ls va permetre inspeccionar o llegir l'estat d'aquesta estructura de dades, però segons sembla en diferents moments i no obstant això tots dos es va prendre una decisió basat en l'estat del món en aquests moments diferents en el temps. Així que t'havia bloquejat la nevera, hauria almenys evitar el seu company de quart d'haver estat capaç d'inspeccionar l'estat del món, perquè ell o ella no podria haver fet la mateixa decisió. Llavors, bases de dades, com a resultat, tenen aquest problema constantment. 

A veure si podem construir un escenari. Suposem que ets una mena de noi dolent i et Bank of America o un dels altres llocs en el quadrat que tenen una banda parell caixers automàtics per banda, i d'alguna manera va descobrir com duplicar una targeta de caixer automàtic - no és tan difícil. És només una banda magnètica. I per això el que vols fer és tractar de jugar a aquest joc mitjançant el qual es posa una targeta en una màquina, una altra targeta en la màquina, i bàsicament es vol tractar de treure diners a la vegada, perquè imagino que la història és la següent. La màquina de l'esquerra pren el seu targeta i el seu PIN, i després dius: "Dóna'm 100 dòlars". El caixer automàtic està programat per fer primer una selecció a la base de dades o el seu equivalent - qualsevol base de dades que està utilitzant - per veure què aquest usuari tenir a $ 100 en el seu compte? Si és així, llavors escopir els $ 100 i restar $ 100 del seu balanç. Però és clar, si hi ha diverses màquines aquí o diverses formes d'inspecció l'Estat d'aquest món, la volta d'un banc, per veure quants diners vostè té, suposem que per casualitat la màquina a l'esquerra i la dreta tant aquesta pregunta gairebé al mateix moment en el temps. 

I això sí que pot succeir. Els caixers automàtics són les computadores en aquests dies. Així que si la màquina de l'esquerra diu: "Sí, vostè té com a mínim $ 100" Mentrestant, l'equip de la dreta diu: "Sí, vostè té almenys 100 dòlars" llavors ambdós procedir a finalitzar els seus programes i, de fet escopir dels $ 100 i dir: "Anteriorment vostè tenia $ 200." "Anem a actualitzar la variable a ser ara $ 100 que queda en el compte." Però si tots dos han comprovat el saldo del seu compte, hem detectat que és $ 200 i dos d'ells després fer els càlculs i 200 diuen - 100, les màquines potencialment escopir dos bitllets de $ 100 en cada màquina, però només he actualitzat el saldo del seu compte a la suma de $ 100. En altres paraules, vostè ha pres fora de $ 200, però pel fet que va inspeccionar l'estat del món simultàniament i després va prendre una decisió sobre la base d'aquest valor, pot ser que no faci els comptes en última instància correctament. Així que en una situació massa banc que vols tenir algun tipus de bloqueig de manera que tan bon punt s'hagi comprovat l'estat d'alguna variable això és molt important, igual que el saldo del seu compte, No deixeu que altres persones prenguin decisions sobre la base que fins que hagi acabat de fer la seva cosa, on en aquest cas és el caixer automàtic de l'esquerra. Bloquegi tots els altres fora. En realitat es pot aconseguir aquest efecte en un parell de maneres diferents. 

La forma més senzilla de MySQL és una línia de SQL que li va donar en l'especificació de conjunt de problemes que es veu exactament com aquesta. Inseriu a la taula - com es digui - un id, un símbol, i compartir, un nombre d'accions, els següents valors, per exemple. Si vostè no ha llegit les especificacions, però, aquest és un exemple relacionat amb com vostè va sobre la compra de 10 accions d'aquesta acció de penic per al president Skroob, el ID d'usuari passa a ser el número 7? Això diu INSERT INTO taula l'identificador següent, el símbol i el nombre d'accions de 7, 'DVN.V', i 10. Però - però, però, però - la segona línia és la important. DUPLICATS D'ACTUALITZACIÓ accions clau = accions + Valors (accions). Així que totalment d'aspecte críptic a primera vista. Però el fet que aquesta consulta SQL, tot i que s'ajusta a 2 línies, és una consulta de llarga, això significa que és atòmica en el sentit que aquesta consulta sigui serà executat tots junts o no en absolut. I per definició de MySQL, que és com s'implementa aquesta consulta. És, per definició, al manual garanteix que executa tot d'una vegada o en absolut. La motivació per això és la següent. Si en aquest cas vostè està tractant de comprar 10 accions, és una espècie de la mateixa història que la llet, és una espècie de la mateixa història que el caixer automàtic. 

Si comet l'error de no utilitzar aquesta sintaxi però en lloc de seleccionar la base de dades per veure quantes accions d'aquesta penny estoc diu el president Skroob tenir, i suposem que té 10 accions, i una mica fracció de segon més tard, a continuació, fer una instrucció UPDATE, que és una altra declaració de SQL que diu seguir endavant i afegir 10 accions més al seu actual 10 idealment de manera que el total és de 20, el problema es deu al fet que en els sistemes de bases de dades d'avui en dia i pel fet que en els ordinadors d'avui en dia té diversos processadors, nuclis múltiples - en altres paraules, els ordinadors, literalment, pot fer diverses coses alhora - no es garanteix que el SELECT i la seva actualització en aquest cas van a succeir una darrere l'altra. Així que un mal escenari seria fer el SELECT per veure quantes accions d'aquesta acció de penic és Skroob tenen, i després només per casualitat una altra consulta de base de dades s'executa - potser la seva Skroob a part del navegador tractant de comprar 10 accions en una finestra nova del tot, igual que el caixer automàtic - i suposem que es fica en una altra consulta SELECT i UPDATE entre el. Podria passar que Skroob perd ara un cert nombre d'accions perquè un altre procés està inspeccionant l'estat del seu món, o es posa més accions del que hauria de tenir. No entrarem en els detalls de exactament quines són aquestes línies de la història en particular seria, però el punt és que si vostè ha de comprovar un valor de variables i després prendre una decisió, si hi ha un risc que algú més fent una cosa entre aquests dos estats, com succeeix en els sistemes multiprocessador, en sistemes multi-nucli, equips amb la capacitat de fer diverses coses alhora, les coses dolentes poden succeir comptes bancaris, com s'efectua el càrrec incorrectament, la compra de llet dues vegades més, o en aquest cas el nombre equivocat d'accions. Però hi ha una manera més fàcil pensar en això. 

Resulta que també és compatible amb SQL, si configura la seva taula correctament, una cosa que es diu les transaccions, que jo diria que és fins i tot més fàcil d'entendre que això, però no és un 1-liner, pel que en realitat és una mica més complicat. Hi ha, literalment, una declaració en SQL anomenat START transaction. Igual que hi ha SELECT, UPDATE, INSERT, DELETE i JOIN i un munt d'altres, hi ha paraules clau com START transaction. I el que vostè fa en el context del conjunt de processadors 7 - vostè no ha de fer això per pset 7, és negada explícitament que no és necessari, però per a projectes de fi pot ser útil - si es crida a una consulta de START transaction i després una altra consulta i després una altra consulta i després un altre, un altre, i un altre, les consultes en realitat no s'executarà fins que es diu a la sentència SQL COMMIT, moment en el qual, si es tracta de dues declaracions o afirmacions 20, tots ells seran executats al mateix temps, el que significa que ningú més pot voler comprar massa llet o dèbit massa diners o recomprar accions massa perquè totes les consultes s'executarà esquena amb esquena a esquena amb esquena. I això és super important, sobretot quan estàs fent alguna cosa com això. Aquest és un exemple arbitrari que diu que anem a actualitzar el compte bancari mitjançant l'establiment d'un equilibri igual al saldo - $ 1000 on el número de compte: 2. I després la segona declaració és que ara anem a dipositar que $ 1000 en el compte d'un altre banc el número de compte: 1. 

En altres paraules, aquest és un exemple perfecte d'on vostè vol assegurar-se que tots dos d'aquests estats ocórrer o no en absolut perquè si el client s'ha de follar i vostè va a prendre els seus diners i no dipositar en una altra part, o el banc va a follar a on va a dipositar els diners però en realitat no ho restar del compte de l'usuari. Així que vostè vol a tots dos a executar en conjunt. Així entra en les transaccions mundials. Així que això és una cosa a tenir en la part de darrere de la teva ment, no tant pels efectes d'un projecte final, però si vol continuar amb el seu projecte final en algun lloc, si vol posar en marxa alguna empresa que l'envolta, si vol resoldre el problema d'algun grup d'estudiants al campus i en realitat té un lloc web en viu, actiu, aquest és el tipus d'errors subtils que poden sorgir si no arribes a pensar a través del que pot succeir si 2 persones Està intentant accedir al seu lloc web en, literalment, en el mateix moment en el temps, per la qual cosa les seves consultes d'una altra manera podrien quedar entrellaçats. 

Preparat per una mica de JavaScript, un teaser del mateix? Aquest és el nostre últim idioma per al semestre. Està bé. Afortunadament, JavaScript sembla molt, molt, molt similar als 2 idiomes, C i PHP, que hem fet fins ara. No hi ha cap conjunt de processadors Javascript al 7, però és una eina increïblement útil quan es tracta de fer basats en la web els projectes finals o en realitat només la programació web més general. Així que una ràpida visió general d'una cosa que es diu DOM. Aquí hi ha una pàgina web súper simple que realment només diu hola, món tant en el títol i en el cos. Com la indentació ha estat suggerint durant algun temps, en efecte, hi ha una jerarquia de pàgines web. Podia dibuixar aquest fragment de codi HTML mateixa com un arbre, pensant en tornar a la nostra discussió de les estructures de dades en C, com s'indica a continuació. Tinc algun node arrel especial anomenat el node de document, i anem a veure l'analogia d'això en JavaScript en un moment. El primer fill i únic fill que en aquest cas és l'etiqueta HTML. No hi ha cap assignació directa del tipus de document. Això és una cosa especial, de manera que hauríem ignorar quan es tracta d'aquesta DOM, Aquest Model d'Objectes de Document arbre. Observeu que l'etiqueta HTML, que he representat arbitràriament com un rectangle, té 2 fills: cap i cos. 

Aquells són igualment elaborat en forma de rectangles. És significatiu que el cap és gràficament a l'esquerra del cos. La implicació és que el cap és el primer en l'arbre. Així que en realitat és una comanda per a un arbre quan el dibuixa com aquest, tot i que les formes i altres coses són arbitràries. Head per la seva part té un fill únic anomenat títol, i el títol en realitat té el seu propi fill, que és "hola, món", que em va atreure deliberadament com un oval aquí perquè sigui una mica diferent de la del rectangle. Aquests rectangles són elements, mentre que hola, món és en realitat un node de text. Així que és un node a l'arbre, però és un tipus diferent de node així que el va treure arbitràriament diferent. De la mateixa manera es té el cos d'un nen anomenat hola, món, així, node de forma diferent tot són casualment el mateix text, però l'he dibuixat amb la mateixa forma. Llavors, qui li importa? Bé, el bo d'HTML és que té aquest caràcter jeràrquic. I el que és bo de JavaScript i en particular les biblioteques que estan lliurement disponibles i populars com jQuery, pot navegar per l'estructura d'arbre tan increïblement fàcil. Qualsevol de les coses que vam fer en C amb els punters i els arbres de desplaçament i recursivitat en els nodes fill de l'esquerra a la dreta nen, de sobte podem classificar de donar per fet per ser increïblement il · luminadora si no és una mica frustrant però no gairebé una forma eficient d'anar sobre la programació. I així, amb aquests llenguatges d'alt nivell com Javascript serem capaços de navegar per aquest arbre molt més intuïtiva. 

I de fet la sintaxi serà molt familiar. Si vostè mai ha vist abans Javascript, aquesta és una referència molt agradable de la gent de Mozilla, la gent de fer que el Firefox, així que si fóssiu lliure de navegar que a la seva conveniència. El que trobaràs - i aquestes diapositives són idèntics als que es va utilitzar l'altre dia - De la mateixa manera, la principal s'ha anat. Així que quan s'escriu un programa en JavaScript, no hi ha una funció principal. Vostè acaba de començar a escriure codi. No obstant això, una distinció clau entre JavaScript i C i PHP és que, mentre que C i PHP fins ara han estat executades costat del servidor per l'aparell en aquest cas, o més generalment, per un servidor, JavaScript per disseny normalment s'executa en un navegador. En altres paraules, és possible escriure codi JavaScript, ja que estem a punt de, en un servidor en l'aparell, sinó que l'inclou entre el seu HTML, entre la CSS, entre els seus GIFs i PNGs teus i els teus JPEGs de manera que quan l'usuari visita la seva pàgina web, si vostè està utilitzant JavaScript, que el JavaScript arriba des del servidor al navegador, i és el navegador que realment s'executa. Així que això té implicacions significatives per a la propietat intel · lectual, fins i tot. És una mica ximple per pensar en la protecció de la seva propietat intel · lectual quan es tracta de codi JavaScript ja que per la naturalesa de la llengua, el fitxer és executat normalment costat del navegador. 

Es pot confondre, el que significa que vostè pot fer que sembli una bogeria i el lleig sense espais en blanc, horribles noms de les variables, perquè sigui més difícil per a la gent a robar la seva IP, però la clau és que s'executi costat del navegador. Tot i que com a part del servidor de banda JavaScript es pot utilitzar, el cas d'ús més comú en aquest moment està encara en el navegador. I això és el que sembla. Aquest és un if-else if-else construir igual que C, igual que PHP. Heus aquí una expressió booleana quan vostè "o" les coses 2 junts. Aquí és quan vostè "i" 2 coses juntes. Aquí és una declaració interruptor, que és similar a PHP en què es pot canviar en diferents tipus de valors. Loops similar per tenir llaços aquí, que s'estructuren de forma idèntica al que hem vist abans. Mentre que els bucles; Hem de fer bucles while. Variables, molt lleugerament diferent. No declarar les variables com es fa en PHP i C, però igualment és JavaScript tipus febles. No s'especifica int o float o cadena ni res d'això en general. Podeu especificar var. No ha d'especificar var, però té implicacions si no ho fas. En general, si s'omet var accidentalment crear una variable global en lloc de local. Així que permetin-me proposar que gairebé sempre acaba de dir var i després el nom de la variable. No és un tipus, que és només per a la variable var. Aquest seria un exemple, ja sigui 123 o "hola món". Les matrius són presents i sintàcticament similar a PHP. Vaig a dir nombres var i aleshores utilitzar claudàtors de nou per declarar una variable el tipus és array que té aquests números particulars-hi, separats per comes. I després, finalment, aquesta és l'única que realment es veu diferent. Recordem que en PHP que s'han posat en marxa una matriu associativa per a un estudiant com Zamyla que pot tenir un aspecte com aquest, on la variable es diu estudiant. Els claudàtors signifiquen aquí ve una matriu. 

El fet que no estic fent servir índexs numèrics sinó cadenes - id, casa, i nom - significa que es tracta d'una matriu associativa, i aquestes fletxes amb el signe igual i el suport angular significa que la clau és "id", el valor és 1; la clau està en "casa", el valor és Winthrop House; la clau és "nom", el valor és Zamyla Chan. Així que hi ha tres claus dins d'aquesta matriu associativa, cadascun dels quals té el seu propi valor. Hem vist que en el conjunt de processadors 7, o aviat ho sabrà, en la idea JavaScript mateixa, però tindrà aquest aspecte. Així estudiant var - sense signe de dòlar i no s'esmenta però encara tipus var - equival a continuació, obriu les claus perquè en JavaScript quan es té parells de claus de valor, que realment utilitza una cosa anomenada un objecte. I aquells de vostès que van prendre APCS o similar podria recordar els objectes de Java o llenguatges similars. JavaScript és Java, primer de tot. Va ser un any de disseny deliberada decisió fa per desprendre alguna cosa més que era popular, seu nom, tot i que no té una relació fonamental amb Java en si. JavaScript té els objectes, i es creen mitjançant la notació de claudàtor. Els objectes en JavaScript són més o menys equivalents a les matrius associatives en PHP quan es tracta d'emmagatzematge de dades dins d'ells. 

Però fins i tot amb més força en JavaScript es pot associar molt fàcilment les funcions dins d'un objecte, i encara que es pot fer això en altres llengües, és tot un paradigma comú, com veurem. En resum, aquest objecte representa un estudiant, que és particularment Zamyla, i és similar conceptualment, només sintàcticament diferent d'això. Que en realitat el Javascript en un arxiu. Resulta que hi ha una etiqueta script. Hem vist una etiqueta d'estil i hem vist altres etiquetes HTML. L'etiqueta de script en realitat contenen una mica de codi JavaScript. Déjame entrar en l'equip on tenim una mica de codi font pre-fets. Jo no l'he publicat encara al lloc web, però faré això després de classe. Anem a obrir aquest, blink.html. De tornada a la dècada de 1990, havia literalment una etiqueta HTML anomenat l'etiqueta blink, i aquesta va ser una de les etiquetes més usades en excés meravellosament a Internet per la qual cosa t'agradaria visitar alguna pàgina web estil dècada de 1990 i començar a veure el text parpellejant d'aquesta manera, els resultats de l'etiqueta marquès, que havia text va així. Una de les poques vegades en què el món realment ha acordat un estàndard web, tot el món en tots els àmbits de l'etiqueta blink assassinat fa alguns anys. Però podem ressuscitar amb JavaScript com una demostració del poder que té quan es pot escriure un programa dins d'una pàgina web. Primer passarem per alt les coses noves i centrar-se només en el vell. 

Aquí està el material antic en aquest exemple. Tinc una etiqueta HTML, una etiqueta del cap, i una etiqueta del títol. Llavors tinc una etiqueta de cos aquí amb un div, el que recordo és només una divisió rectangular de la pàgina que li he donat un identificador únic arbitràriament de "salutació" a, només pel que tenen una forma única de referir-s'hi, que té un text molt simple: hola, món. Ara vaig a desplaçar-se fins la part superior d'aquest arxiu i veure què hi ha de nou. El primer que hi ha a dalt fins nou és l'etiqueta script, i en l'interior de la notificació etiqueta script que he declarat una funció. Per declarar una funció en JavaScript, bastant similar a PHP, que, literalment, escriure la funció, llavors el nom de la funció, entre parèntesis, i potser alguns arguments si es necessita cap. Llavors tinc el meu clau de tancament com de costum, i ara tenim una mica de codi nou lleugerament, però anem a veure el que això significa. Així div var, això només significa dóna'm un div anomenat variable. Podria haver anomenat foo, però jo volia que fos anomenat div per raons que seran evidents en un segon. Després resulta en JavaScript - i aquest és el codi JavaScript incrustat a la meva pàgina web - hi ha una variable global de tipus especial anomenat document. JavaScript és de fet un llenguatge orientat a objectes. No entrarem en detall en el 50 pel que fa al que significa, però per ara sabem que un objecte és molt semblant a una estructura. Com vam veure en el camí de retorn quan un dels primers butlletins de problemes on posem una gran quantitat d'informació en una estructura, igualment es documenten una estructura especial que ve amb el navegador, ve amb qualsevol pàgina web. No és una cosa que he creat. Dins d'aquesta estructura del document, però, té no només les dades però també hi ha funcions. 

I cada vegada que tenen una funció dins d'una estructura, dins d'un objecte, es crida a un mètode. Però és la mateixa cosa. Un mètode és una funció que només dóna la circumstància d'estar dins d'alguna cosa més. Així que això significa que aquesta variable global document especial denominat té una funció anomenada getElementById que literalment fa això. Se li aconseguirà un element del DOM, Document Object arbre del model, amb identificador en aquest cas salutació. En altres paraules, tot el temps que passem a les estructures de dades entra en joc aquí. Aquesta imatge d'un DOM que vam tenir fa un moment, tot i que la pàgina és una mica diferent, si jo tingués un div a aquesta imatge, document.getElementById ho tornaria a mi efectivament seria un punter per el rectangle en l'arbre, una referència al rectangle en l'arbre. Així que això és el que significa cridar realment una d'aquestes funcions. En aquest cas de nou es tracta d'un div. No és un cos o un títol. Així que anem a veure el que vull fer amb això llavors div ara que el tinc dins d'aquest div variable anomenada. Resulta que amb el llenguatge Java té la capacitat de modificar el CSS de la pàgina de forma dinàmica. Fins ara, tot el CSS que hem fet, encara que limitat, és en els atributs d'estil, o on més hem posat CSS? Jo com que malmesa que un. A l'etiqueta d'estil en la part superior de l'arxiu. O el tercer lloc ha estat? 

Un arxiu extern, alguna cosa. Css. Així que aquests són els 3 llocs que hem fet fins ara CSS, però el problema és que hem codificat tot. Vostè decideix com es va submergir en pset 7, vam decidir fer una conferència abans del que el nostre CSS seria. Però si vostè vol canviar la seva CSS, vostè realment pot fer que una vegada que tingui un llenguatge de programació real. CSS, HTML - Llenguatges de programació no. JavaScript és. Així que resulta que tan aviat com vostè té un d'aquests rectangles en l'arbre anomenat el DOM, que en si té algunes dades dins de la mateixa. Així que el div que em va agafar per l'arbre té el que anomenarem a una propietat dins d'ella anomenat estil, i la propietat d'estil en si té una propietat anomenada visibilitat. Jo sé que això només per buscar un manual de l'usuari CSS. Resulta que hi ha una propietat de visibilitat CSS que fa el que diu. Fa una mica visible o no, visible o no. I com es fa això és la següent. Estic demanant programació si la visibilitat d'aquest div s'oculta, Què he de canviar? Visible. Perquè si la visibilitat d'aquesta pàgina no està ocult, lògicament jo faig el ocult. No tinc idea de per què és visible i ocult i no és visible i invisible. Aquesta va ser una decisió de disseny pobre al llarg del camí. Però aquests són realment oposats en CSS: mostrat i ocults. Tot això fa és que significa canviar el CSS del meu arxiu d'encesa i apagat, encès i apagat perquè div particular. Però, de nou, aquesta és una funció anomenada parpelleig. Quan es crida a la funció de parpelleig? Resulta que hi ha una altra especial per finestres de Global variable anomenada, similar en esperit al document, però, mentre que el document es refereix a la seva pàgina web com l'arbre DOM, l'HTML que envia des del servidor, finestra es refereix al crom voltant d'ella, la barra d'adreces, la barra de títol, i tot això al voltant de la seva pàgina web. 

I resulta que l'objecte finestra té una funció especial dins de la mateixa trucada setInterval que fa el que diu. S'establirà un interval - en aquest cas cada 500 mil · lisegons - i, prendre una conjectura, què farà cada 500 milisegons? Es va a executar aquest obrir i tancar la funció. I el que és bo aquí és que podríem haver fet això en C, encara que mai ho va fer. C té una cosa anomenada punters a funcions on es pot trigar funcions com arguments. De la mateixa manera en JavaScript pot passar el nom d'una funció a una altra funció. I adonar-se del que estic fent. No faré això. Si poso entre parèntesis després d'obrir i tancar, això significaria que cridar a la funció de parpelleig. Si els omet, que vol dir aquí és la funció d'obrir i tancar per la qual cosa es pot dir setInterval cada 500 mil · lisegons. Així, el resultat final, atroç que sigui, és que si vaig a anar a localhost i blink.html, Ara he de això passi una i altra vegada. I si realment Inspeccionar element, veurem si podem veure això. Permetin-me Inspeccionar element, deixa desplaceu-vos cap avall una mica, permetre triar elements d'aquí i observi l'interior de DOM inspector de Chrome. És, literalment, canviar d'anada i tornada cada 500 mil · lisegons. Si anem al nostre amic Nate, si alguna vegada es va preguntar com funciona, idea similar, amb un interval de temps, però Nate és en realitat fer un ús molt eficaç del color en aquest cas particular aquí. Llavors, què més podem fer realment amb això? Anem a obrir un altre exemple i provar alguna cosa això és programació encara més útil que fer parpellejar les coses. Déjame entrar al nostre directori formes avui i entrar en form0. Aquesta va ser la forma més lletja possible que jo pogués arribar a, i dóna'm mostrar el que sembla en un navegador. 

Déjame entrar localhost / forms, i això és form0. Aquesta és una forma súper lleig HTML que té uns camps de correu electrònic, la contrasenya, contrasenya, i després una casella petita d'acceptar alguns termes i condicions. El problema és si torno a visitar aquesta manera i no vull donar-te la meva adreça de correu electrònic, No vull estar d'acord amb els termes i condicions potser, pot fer clic a Registre i em deixa passar de totes maneres. Això succeeix a sotmetre a un arxiu PHP anomenat estúpid dump.php. Tot el que fa és imprimir el contingut de $ _GET només per a fins de diagnòstic. Això va ser el que va ser presentat per l'usuari en aquest moment. Però suposem que en realitat vol validar la presentació del formulari d'usuari. Deixa anar a la versió 1. Això és form1.html. Es veu estèticament tan dolent, però observi com de fantasia que és. Si faig clic a Fes sense cooperar, em va cridar. "Vostè ha de proporcionar la seva adreça de correu electrònic." Està bé. Així que tractaré això. Així malan@harvard.edu. No necessito una contrasenya. Registra't. "Vostè ha de proporcionar una contrasenya." Està bé. Així que vaig a proporcionar una contrasenya de carmesí. Registra't. "Les contrasenyes no coincideixen." He de escriure ara aquí a carmesí. Per error, he comprovat això. Registra't. "Vostè ha d'acceptar els termes i condicions." Està bé. Accepto allà. Registra't. I ara em mostra la sortida de diagnòstic per allà. 

Llavors, què ha passat? Hem tingut aquesta capacitat de validar els enviaments de formularis. De fet, si es va fer submergir-se en pset 7, hi ha una funció disculpes que fa que sigui molt fàcil per cridar a l'usuari mitjançant un missatge a la pantalla. Estic usant un mecanisme lleugerament diferent, la funció d'alerta, que no és una funció que està somrigut ja que fa que els missatges d'usuari molt lletjos. Però anem a veure el que estic fent aquí. Això és form1.html, i noti que tinc una sintaxi força familiar: cos de l'etiqueta, etiqueta de la forma, atribut d'acció, atribut mètode. Però cal notar que he donat la meva forma un identificador únic per a major comoditat. Llavors tinc un camp de correu electrònic el tipus és text, un camp de contrasenya el tipus és la contrasenya, confirmació camp el tipus és la contrasenya, i després una casella de verificació que es diu acord de per aquí, és de tipus checkbox. I després tinc un botó d'enviament. Però noti en la part superior el més que tinc. En primer lloc, hi ha un altre ús de l'etiqueta script. Si té algun JavaScript en un altre arxiu, igual que amb CSS es pot incloure. I ho fa amb una font de seqüència de comandaments, i després s'adona que estic connectant pel que sembla a googleapis.com a un camí molt llarg, però el nom acabi en jquery.min per mínim. js. jQuery és una biblioteca superpopular per a JavaScript que només ho fa amb JavaScript tant més fàcil d'usar d'usar. Ha convertit de fet en un estàndard de facto. Així que tot i que el que vas a veure no és pur JavaScript per se, és una biblioteca de JavaScript a la part superior de la mateixa manera que la biblioteca CS50 és una capa a la part superior de codi de baix nivell C, la realitat és que gairebé tot el món a través d'Internet que utilitza. Així que no es tracta de rodes d'entrenament. Això és simplement la millor pràctica en aquests dies. Ara noti sota d'aquest és el meu etiqueta de script propi i adonar-se del que he fet aquí. Resulta que jQuery fa alguna cosa una mica sofisticat. JavaScript té signes de dòlar, però no tenen sentit. 

Són com la lletra A o B o C. jQuery simplement ha adoptat la convenció o el tipus de reclamar al fet que $ serà el seu símbol especial. Així que tan aviat com es carrega aquesta imatge global JavaScript fins aquí amb l'etiqueta script, vostè té accés a una variable global especial que es diu $. És millor conegut com jQuery, però que no es veu tan sexy com $. Però $ no té cap significat especial. En PHP que tenia un significat especial. Calia tenir al davant d'una variable. Això és només una cosa sexy que va assumir. Què està passant aquí? Tingueu en compte que estic passant a la funció jQuery meu document variable global i després et dic. llest. El que fa és essencialment jQuery que et permet prendre algunes coses Javascript vainilla com l'objecte de document, l'objecte finestra, i si se li passa a la funció jQuery - i de nou, per ser clar, aquesta és una funció anomenada jQuery - el que fa és que et torna a una versió especial del document que té més funcionalitat associada amb ell. Així que en JavaScript primera no hi ha cap funció llest, però si es passa el document a la funció jQuery en primer lloc, retorna a vostè una versió especial de l'objecte de document que té més característiques de luxe. I per això la gent li agrada. Simplement fa les coses més fàcils de fer, ja que estem a punt de veure. Llavors, què significa aquesta línia de codi significa? Aquesta línia de codi aquí voldrà dir que el document està llest - en altres paraules, una vegada que el navegador es realitza la lectura d'aquest arxiu superior a la inferior - seguir endavant i executar la següent funció. El que és realment interessant en JavaScript - PHP té i això també - és funcions anònimes. En JavaScript es poden declarar funcions que no tenen nom però tenen un cos. Observi el que està passant aquí. 

Aquesta és una funció anomenada llista, i només significa fer el següent quan la pàgina web tot està a punt, quan tot ha estat llegit des del servidor. Què vols fer? Vull executar un bloc de codi. Tingueu en compte que nosaltres no volem executar aquest codi seguida. Si s'omet això, això significaria iniciar immediatament l'execució d'aquestes línies de codi. Però el fet que jo estic dient no, no, no, acabar amb això en una funció anònima com aquest vol dir que no s'executarà però, cridar amb el temps. Ho vam veure fa un moment, en el nostre exemple anterior forma. Quina funció tenia que anomenem el temps, a 500 mil · lèsimes de segon més tard? Blink. Així que la idea mateixa. Un cop més, fins i tot si això li sembla una mica estrany, simplement prengui de moment en la fe que per declarar una funció anònima que es diu el temps, simplement introduïu function () { Llavors, què codi anem a executar amb el temps? El següent. Això també es veu una mica nou, però això vol dir que aquesta és la funció jQuery, i això ara és una drecera. Aquest fragment de codi HTML a la part inferior de la pantalla, per descomptat, té una representació d'arbre. No és això. Aquesta pàgina és més interessant que aquest exemple Hello World. Però hi ha un arbre que correspon a aquest HTML. Seria un dolor al coll a haver d'implementar algun tipus de funció recursiva per iniciar en el node arrel i després trobar el node amb identificador el registre. Llavors, què jQuery fa molt fàcil per a nosaltres és literalment això. Vagi per davant i m'ho div o la manera que sigui, qualsevol element HTML té un ID de registre. Això és equivalent a document.getElementById ('registre'). 

Per què la gent com jQuery? Com que és més curta d'escriure. Però això és tot el que és. És la mateixa idea. Pose-me'n amb el tag amb identificador el registre. I quan aquesta etiqueta, que passa a ser una forma, es presenta, seguir endavant i executar aquest codi. Així que donem una ullada ara a com ho estem fent validació de formularis. La sintaxi és certament críptic al principi, però què està passant? Si aquesta línia de codi és cert, vaig a cridar que l'usuari proporcioni la seva adreça de correu electrònic. Llavors, què és aquesta línia de codi? $ Significa jQuery. Ara noti això. Aquesta és una espècie de CSS. Si has bussejat en CSS, però, vostè sabrà que això significa que l'element el ID és la inscripció. L'espai significa trobar a un nen o un descendent de registre el nom és el d'entrada. I després aquesta cosa entre claudàtors és un filtre poc. I encara que això sembla críptica, això només significa anar al formulari amb identificador el registre, anar a l'interior d'aquest element d'entrada el nom és el correu electrònic, i després obtenir el seu valor, sigui quina sigui el seu valor passa a ser - asdf si això és tot el escrit o malan@harvard.edu si això és el que he escrit. Així que si el valor del camp email del formulari == res, crida a l'usuari. Perquè si el valor del camp de contrasenya == res, crida a l'usuari. 

Else si el valor del camp de contrasenyes no és igual al valor del camp de confirmació que era l'element altra manera, cridar a l'usuari. I finalment - i aquesta també té una mica de nova sintaxi pròpia, però una vegada que ho has vist, és si més no una mica més raonable - else if el formulari el ID és la inscripció té un element d'entrada el nom és un acord i es comprova que, endavant i cridar en l'usuari. Així que estic totalment d'admetre que això és completament aclaparador a primera vista. Es tracta d'una gran quantitat de nova sintaxi. Però tots jQuery segueix aquest tipus de patrons. I honestament, jo ni tan sols sabia que això existia fins fa uns minuts. Vaig buscar a Google "Com comprovar si una casella està marcada en jQuery?" i aquesta és la sintaxi, perquè hi ha diferents maneres de fer-ho amb codi real brut JavaScript. Així com la primera pàgina del Butlletí de problemes 7 emfatitza, pset 7 és molt més que un exercici en si mateix bootstrapping en què proporcionem, amb sort, un marc conceptual per abordar el conjunt de processadors. 

Però, com sol ser el cas amb el disseny web, li toca a vostè realment a furgar, incorporar fragments de codi i exemples del Web sempre que se'ls citi pels termes en què el primer full, i adonar-se que l'aprenentatge d'HTML, CSS, JavaScript i fins i tot SQL està realment destinat a ser aquest exercici a casa a mesura que comencem a prendre aquestes rodes d'entrenament apagat. I adonar-se també que hi ha moltes coses més que pots fer amb un navegador. A l'interior de la majoria d'aquests elements, hi ha altres coses anomenats controladors d'esdeveniments. I tot i que acabem de veure en els anomenats onsubmit i onReady, vostè pot fer coses com onkeydown, onkeyup, com quan l'usuari toca una tecla, es pot escoltar per això i tecla de dalt. Gmail té dreceres de teclat. Com fa Google per posar en pràctica mètodes abreujats de teclat com C per compondre? Escolten per esdeveniments, com se'ls anomena, com onkeypress o onkeyup i onkeydown. Si mai ha rondat el ratolí sobre alguna opció de menú i, de sobte voila, apareix un menú o la canvia de color gràfic, Com es fa això? En lloc d'escoltar onReady o onsubmit, escoltes o onmouseout onMouseOver per. 

Així que en resum, amb aquests conceptes bàsics molt senzills que hem començat a rascar la superfície d'avui i anem a bussejar-hi per al dimecres, que té, cada vegada més, facultat d'aplicar el tipus de coses que vostè ja coneix. Així que anem a acabar aquí, i continuarem aquest dimecres. 

[CS50.TV]