R.J. AQUINO: Anem a començar. Així que aquesta és la prova 1. Aquí hi ha alguna informació d'alt nivell. La pàgina Sobre la prova és en aquest URL, ja no CS50.net, encara que això seguirà funcionant. És CS50.harvard.edu/quizzes/2013/1. És el gran Sobre la pàgina, que li diu on i quan, és a dir, dimecres que ve en un munt d'habitacions. I dimecres que ve, I significar dos dies a partir d'ara. Tota aquesta informació hi és. Però és acumulatiu. 

Així tot, des de la primera meitat del any és potencialment en el qüestionari, perquè no es pot fer realment avançada coses en C sense si les condicions i per als bucles i similars. Però hi haurà un èmfasi en la material cobert des Qüestionari 0, començant amb les estructures i Arxiu I / O. És típicament més desafiant que Qüestionari 0. La puntuació mitjana és normalment inferior. Estudia molt. 

Mentre que vostè està estudiant, assegureu-vos d'utilitzar CS50/discuss per enviar les seves preguntes i llegir les preguntes d'altres persones. Així que si vostè no té alguna pregunta, entrar i llegir preguntes dels seus amics. Probablement són bones preguntes. I prendre els exàmens de pràctica. Hem estat donant proves de set o vuit anys. Tots estan en línia. Preguntes futurs són similars a velles preguntes. Així és com les fem. 

El qüestionari no existeix encara. Cap de nosaltres ha vist. Però serà similar concursos anteriors. Per a aquesta sessió de revisió, això no és una llista exhaustiva de temes. Vostè no pot assistir a aquesta i després perfectament preparat per a l'examen. En cas contrari, no seria que gran part d'un concurs. I això tampoc és necessàriament tot el que necessita saber sobre qualsevol determinat tema. És la intenció de quedar exposat a les coses hem cobert, et recorden el que coberta, i la forma en que el cobrim. Però vostè haurà d'anar més enllà i més profund quan s'estudia a una doble comprovació que vostè sap tot sobre qualsevol proposta tema i que hagi emplenat tots els cantons que eren cobert a classe. 

Les notes de l'examen et diuen d'anar a la notes escrivà, vídeos de conferències de rellotges. Aquesta és una bona manera d'assegurar-que ha cobert totes les seues. Així que per començar, quan vaig fer aquestes diapositives, vaig tractar de posar on vaig trobar informació. Així que per a arxiu d'E / S, per exemple, Setmana 7, De dilluns la conferència, i el publicat Secció 6 i de problemes tots tenen informació sobre File I / O. He fet això per a cada tema. Així que aquestes diapositives de títol pot ser útil per a vostè. 

Així que aquí tenim File I / O. Recordeu, a Problemes 5, es va utilitzar fopen, fclose, fwrite, fread i fseek. Havent recuperat 30ish arxius JPEG i haver canviat la mida i ficat amb mapes de bits, ha de ser bastant familiar amb aquestes funcions i com funcionen. Si ja no està familiaritzat, Definitivament revisar-los. I assegureu-vos que entén el que els diferents arguments són, quan s'utilitzen. 

Però els errors relacionats amb arxius comuns se li pot demanar sobre - bo, si t'has oblidat de comprovar si fopen efectivament treballades abans d'anar a modificar un arxiu. Això podria ser dolent. Si t'has oblidat d'un arxiu fclose que ha fopened, això és similar a una pèrdua de memòria. Això és molt dolent. I oblidar per comprovar si has arribat al final de l'arxiu abans d' començar a escriure a la mateixa. 

Així que si vostè diu, hey, estic en al final del fitxer. Dóna'm 5 bytes més. Bé, això probablement no treballar de la manera que vostè espera. Això és realment per File I / O, perquè vam fer tant d'ella amb va fixar el problema. Així que si vostè va entendre el que estava passant en problemes 5, recordi els bitmats i els arxius JPEG, llavors vostè està probablement tots fixat per File I / O. Si això és una mica difusa, sens dubte revisar aquest problema establir i el material associat. 

Les estructures van ser el tema que estaven al línia entre el 0 i el Qüestionari Qüestionari 1. No prou fer el tall per a la Prova 0. Així que sens dubte estaran en Qüestionari 1, setmana 7, dilluns. Què és una estructura? Aquí es mostra una estructura. És com un nou tipus. És com un contenidor per a múltiples camps. 

En aquest cas, hem declarat una estructura estudiant que té dos camps - una cadena que estem cridant el nom i 01:00 int que estem cridant a l'edat. Així que quan em passi al voltant alumnes o jo modificar els estudiants, seré capaç de tenir accés al seu nom i la seva edat. Fem una ullada a alguna cosa de codi per això. Aquí veiem que he declarat un estudiant s, igual que Declaro qualsevol variable - int x, int i, et cetera. 

Així és estudiant s. Ell comença amb res en els seus camps. Així que anem a establir. Estableixi els camps d'una estructura amb punts. Així que el que he dit aquí que s.name = RJ. I s.age = 21. També pot actualitzar els camps la mateixa manera que actualitza el valor d'una variable. Així que vull canviar el meu nom d'RJ amb no hi ha períodes de R.J. significat l' correctament. Seria s.name = RJ, la mateixa com ho vam dir al principi. I llavors vostè pot tenir accés. 

Així que els hem preparat. Nosaltres els hem posat al dia. També pot accedir-hi en la mateixa manera. Així que aquí, estic imprimint R.J. Té 21 anys. I estic accés a aquests valors amb s.name i s.age. Així que això és l'accés a les estructures amb la notació de punts. Sí, la pregunta? 

AUDIÈNCIA: Hi ha alguna raó en el diapositiva anterior que no va posar estudiant en la línia superior, com typedef struct estudiant i després estudiant al final? 

R.J. AQUINO: tant el dubte era, en aquesta diapositiva, hem vist típicament typedef struct node i després el camps de l'estructura i llavors el node paraula. I com és que aquí no ho vaig dir, typedef struct estudiant i després la camps de l'estructura i després els estudiants? La raó és que jo no necessito accedir-hi a l'interior de l'estructura. Així que està bé deixar-lo sense nom. Jo només puc deixar-ho com una estructura anònima. 

La raó per la qual ho fem per llistes enllaçades i coses és perquè dins del que necessita per fer referència a un estel nodes struct. Així que l'estructura ha de tenir un nom, perquè pugui accedir-hi més tard. És un detall menor. Però veuràs típicament typedef struct claus si no és necessari el nom i typedef struct algun nom seguit de claus si es vol Necessitarà el nom. Així que aquesta és una bona pregunta. 

I en aquest punt, tenim la tendència a modificar estructures i passar al voltant de les estructures de referència, no per valor. Així que només haurem de passar al voltant de punters a estructures en lloc de passar tot el Les estructures ells mateixos. Així que està molt sovint serà utilitzant, en aquest cas, l'estudiant o * struct node * o node * en lloc als estudiants o nodes. Així que aquí, ho he dit, està bé, la variable ptr serà la direcció del s. Serà el punter l'estudiant R.J. 

Perquè puguem arribar a aquests camps la mateixa mesura que qualsevol cosa. En primer lloc, n º de referència del punter per obtenir l'estructura. Això és * ptr i després un punt i després edat. Així que per tenir accés al camp, i he actualitzat que ara a 22, perquè, siguem per exemple, que era el meu aniversari. Hi ha una sintaxi abreujada usant la fletxa aquí. Edat Fletxa Així ptr és només el mateix que * ptr.age. Ara, això és una cosa que haurà de memoritzar i recordar. 

La vas fer servir molt en pset6, el conjunt de processadors ortografia. Però això és en realitat el que està passant de sota el capó. Es dereferencing el punter i després accedir-hi. Consulta? 

AUDIÈNCIA: [inaudible]. 

R.J. AQUINO: Llavors per què estem fent servir punters com estructures en lloc de la Les estructures ells mateixos? La raó seria si estàs passant una estructura a una funció, és probable que que vulgueu passar al voltant de només el 4 o així bytes que representen el punter, com oposició a la potencialment 30 o 40 bytes que són l'estructura. Així que passa alguna cosa a una funció és més fàcil quan la cosa és menor en curt. Consulta? 

AUDIÈNCIA: És possible que hagi esmentat això al principi, però hi ha altres diapositives dalt a [inaudible]? 

R.J. AQUINO: Aquestes diapositives seran després de la sessió de revisió. Anem a publicar al lloc web. Així de seguir endavant i passar lleugerament més ràpid, anem a parlar sobre les dades estructures. Hi ha un munt. Hem cobert un munt d'ells. Això és el que ha d'entendre sobre l'estructura de dades. 

Segur que ha d'entendre en un alt Quin nivell de cada estructura és. Pot explicar en anglès a la seva amic que no ha tingut CS50 com estem organitzant les nostres dades i per què ho havia estar usant alguna cosa d'aquesta manera? Això és cosa d'una sola. Cosa de dos, entendre l'aplicació. Així que entendre com utilitzar aquestes coses en C. I anem a anar sobre això. 

I llavors el tres coneixen la temps de funcionament i les limitacions de la diverses estructures que estiguis utilitzant. Així que entendre per què es utilitzaria un la taula de hash en lloc d'una matriu. Entendre què tan ràpid, de mitjana, accés a una taula hash és. Entendre el que les operacions són ràpides en llista enllaçada, però lent en matrius i viceversa. Així que per entendre això, vostè haurà de entendre la notació Big-O només per saber com parlar d'aquests tipus de coses. I anem a parlar d'això. 

Així que el primer, llistes enllaçades. Aquí està una foto d'alt nivell d'una llista enllaçada. Es demostra això a classe. Normalment tenim 10 persones de peu a l'escenari. Però tenim una sèrie de nodes on cada node té un valor i un punter al seu valor següent. Així que per arribar d'un node a un altre, que només dir, em dóna el següent node. Vostè té aquest node. Dóna'm el següent node. Vostè té aquest node. Dóna'm el node següent i així successivament fins que no hi ha esquerra node. 

Així de seguir parlant de en un alt nivell. És molt fàcil d'inserir coses en una llista enllaçada. Si no es preocupen per l'ordre, que només pot caure just al principi. Aquesta és la constant de temps. Però és difícil trobar un valor. Si vostè està tractant de preguntar, Són les set de la cistella? Has d'anar a través d' cada valor individual. És això 7? És això 7? És això 7? És això 7? Una i altra vegada. I és O (n). Així que l'hora d'estudiar per a l'examen, Comparar això amb matrius. 

Està bé? Es van apagar els llums tènues. D'acord. Quan és millor una llista enllaçada? Quan és un arranjament millor? Així que donem una ullada a alguna cosa de codi. Aquí és un node potencial. És una estructura. Té un int n, que serà el nostre valor. I té un node struct * següent, que és la nostra punter al següent node. Així que aquí, podem veure que ens va passar haver posat un int en el nostre node. Però si això fos una llista enllaçada de caràcters estrelles o una llista enllaçada de carrosses, que totalment podria fer això també. 

Recordeu que en pset6, probablement va tenir una llista enllaçada d'estrelles CHAR o només arrays static char. Anem a veure aquí en una operació. Així que volem inserir un nou n en la nostra llista enllaçada. Comencem amb un punter cap que és un punter a aquest node que té el valor de n i un costat d'un punter que punts a aquest node és un valor de n i una següent de nul, perquè que és l'últim node. Així que, en nom del temps, ho faré posar tot el codi a la pantalla. I anem a caminar a través d'ell unes poques línies a la vegada. 

Així que aquí està el codi. Espero que sigui llegible. El primer que fem és que malloc un nou node. Així que té un punter a un nou node que no tenen absolutament res establert en ella encara. Verifiquem per assegurar-se que el nou node no és nul. Altrament, cal donar-se per vençut. Així que després d'haver comprovat que, ara establir els valors en el node. Per això, vam posar el nou n en el nostre camp n. I posem el següent punter per apuntar a el cap original, pel que podem ara han introduït aquest node al llistat. 

Finalment, tenim el punt de cap global al nostre nou node, de manera que si haguéssim de començar al cap, estaríem en aquest nou primer node en lloc de l'antic primer node. I quan surt d'aquesta funció, el nou node de variable de ja no existeix, perquè era local a la funció. Així que aquest és l'estat del món. El nostre cap global apunta al nostre nou primer node, el que apunta a la nostra primer node original, on els punts al node després d'això. 

Aquesta va ser la inserció. Espero que hagi estat relativament fàcil de seguir. En cas de dubte, fer un dibuix. Així que em sembla que parlar de llistes enllaçades i mirant codi és molt útil no. Mentre mira una foto d'un vinculat llista em permet pensar, oh, tan Tinc aquest node aquí. Però si actualitzo aquest punter, acaba desconnectat. I m'he oblidat d'on el node va. I el codi surt. I té diversos nodes que estan desconnectats. I no acaba amb la llista que desitgi. 

Així que si vostè dibuixa la imatge i ho fa pas a pas, amb sort, podrà veure l'ordre correcte de les coses en termes de l'actualització dels indicadors per assegurar que la llista s'uneix. Insereix és relativament senzill. Un un més complicat seria inserció en una llista ordenada. Una funció més complicat és eliminar i trobar, pel que mira a través d'una llista de veure si hi ha alguna cosa allà. Potser has fet això pset6 quan té en la seva taula hash i vas dir: així, és la paraula poma en la meva llista enllaçada? 

Així que és possible que ja hagi fet això. Però sens dubte, refrescar la memòria i tractar de tornar a implementar troballa i reimplementar esborrar d'una llista enllaçada. Diversió nota al marge, no vinculats doblement també llistes, on s'ha punters que apunten tant cap endavant com cap enrere, de manera que vostè pot anar a la següent node i per al node anterior. I hi va haver una pregunta sobre l'any passat qüestionari d'aquest tipus, parlant llistes sobre lligada doblement. 

Ara, això és una estructura que ets relativament familiaritzats, ja que la majoria de vostès probablement ells utilitzat en pset6. Aquí hi ha un que és una mica menys familiar. Com a nota al marge, crec que la prova 1 és principalment més dur que el Qüestionari 0, perquè les coses que estàs fent, no han fet el mateix. Per posar d'una altra manera, per a la Prova 0, hagués escrit una gran quantitat de C. I li va preguntar sobre C. 

Per a la prova 1, anem a preguntar-li sobre PHP i JavaScript, que no haver escrit la major quantitat de. Anem a preguntar-li sobre C-codi que vostè no ha escrit la major quantitat de, aquesta coses avançades C. Així que definitivament, la pràctica de la qual la matèria parlat en la conferència que no necessàriament fer en el conjunt de problemes. 

Parlant d'això, vostè no ha escrit una pica en un problema establert. Però va ser a la conferència. Aquí està la imatge d'alt nivell de Piles que mostrem tots els anys. És la pila de safates en el menjador Mather. A un alt nivell, les piles són un últim in, first out estructura de dades. Això vol dir que vostè va per posar les coses en - 1, 3, 7, 12, 14, 0 negatiu. L'única cosa que no podia tenir va dir - negatiu 3, 0. Vostè posa totes aquestes coses polz I l'última que es va introduir en el primer un que sortirà. 

Així que hi ha dues operacions - inserir i extreure. Tota la posada en que jo era fent un gest com aquest són d'empenta. I després quan arribo a agafar alguna cosa o arribar a la part superior per agafar alguna cosa, això és pop. Així que anem a posar en pràctica les piles. I nosaltres els vam mostrar en la conferència utilitzant matrius. Però podries fer utilitzar llistes enllaçades. Una pila és un conceptual de dades estructura, no com un un d'específic de la implementació. 

Llavors, què seria això? Es veuria una cosa així com això. Vostè tindria una grandària sencer. I vostè té una matriu de valors que estem cridant safates, perquè això és el que era la imatge de nosaltres - INT safates - i una mica més de la capacitat màxima. Així que el empenyeria sembla? Bé, si tenim un s pila, després d'empènyer cosa en si, obtindríem la mida de s. I això seria la següent lloc obert de la nostra matriu. Així que si tenim tres coses en la nostra pila, a continuació, les safates 3 seria el següent lloc obert, ja que 0, 1, i 2 ja estan plens. 

Així que posem el valor en s.trays [s.size], el tercer lloc. I després incrementem s.size dir, bo, vam tenir tres coses abans. Ara, tenim quatre. Així que la propera vegada que pressioni, ets posarà una mica en 4. O la propera vegada que vostè fa esclatar, vostè va mirar a les 3 en lloc de 4 o el que sigui. I després tornarem a la veritable diguem, bé, ho hem aconseguit. Això va funcionar. Com a regla general, si una funció que és ha de retornar true o falsa sempre torna true, és possible que han fet alguna cosa malament. Així funciona això? 

Bé, funciona molt bé per a 1, i 2, i 3, i 4, i 5. Però diguem que arribo a la meva capacitat. Llavors m'he trobat amb un problema, perquè si la mida és el mateix que la capacitat, estic ara tractant de posar alguna cosa en un matriu en la qual no tinc espai. Així que un curt de verificació per solucionar aquest problema. Si s.size CAPACITAT ==, tornarà false. En cas contrari, anem i fem el que vam fer. Què més es pot demanar sobre les piles? Què més ha d'estudiar? Què més ha de practicar? 

Doncs bé, l'aplicació de pop. Ja ho vam fer empenta. Vaig a arreglar això. Una aplicació no matriu, on s'utilitza una llista enllaçada, potser. Una aplicació no int. Vam ints aquí. Però podria haver estat carrosses. Jo podria haver estat cadenes. Podria haver estat estrelles característiques. Mira concursos anteriors per als tipus de preguntes que li hem demanat sobre les piles. 

Vaig a dir que hem cobert munts voltant el mateix que nosaltres els hem cobert en any passat. Així que les preguntes del qüestionari han de ser una bona indicació. Avançant encara més ràpid, les cues. Són com les piles. Però són primer a entrar, primer a sortir. Si vostè és britànic, cua de la paraula probablement fet un munt de sentit per a vostè. En cas contrari, és possible que tingui sentit parlar d'ell com una línia. Funcionen com la línia a la botiga d'Apple. La primera persona a presentar-se a les 3:00 al matí és el primer persona per comprar el seu iPad. 

Així que tenim dues operacions - enqueue i treure de la cua. Enqueue posa a algú en la línia. Treure de la cua tira de la primera persona fora de la línia. Un cop més, podem implementar això amb una matriu. Llavors, quina és l'estructura que va mostrar en la conferència? Era aquest. Un cop més, els números. Un cop més, la mida i aquest nou front cosa. Per què hi ha una cosa que es diu front? És l'índex del següent element per treure de la cua. És només mantenir internament un registre de el primer home a aparèixer, de manera que pot treure quan ho necessitem. 

Definitivament mirar les notes de classe i intentar per implementar i posar en cua dequeue l'hora d'estudiar per a l'examen. Aspectes importants en què pensar. Embolicar al voltant de si la part davantera, més la mida acaba més gran que la capacitat. Un cop més, si la seva estructura està plena, vostè va a tenir un problema. Hash taules que has vist abans. La majoria de vostès probablement implementat aquests en pset6. És una estructura que es proposa per l'O (1) inserció constant de temps i O (1) recerca constant de temps. 

En CS50, implementem això com una sèrie de llistes enllaçades. El component clau d'una taula hash és la funció hash. Pel que converteix la seva entrada, diguem, una paraula del diccionari, en un nombre, que serà el nostre índex. I utilitzarem aquest índex en la nostra matriu. Així que aquí hi ha una imatge poc valent des study.50.net. Ens tirem totes les paraules en nostra funció hash. I la funció de dispersió ens diu on posar aquestes paraules. 

Això és tot el gran a la terra on només hi ha una paraula per a cada ranura. Però a mesura que vostè recorda de pset6, hi ha són més paraules que les franges horàries. Llavors, què passa quan es obtenir una col · lisió? En lloc d'emmagatzemar un valor en, diguem, taula hash 3, que emmagatzemar una llista enllaçada. I així, en lloc de tenir el meló aquí, vostè tindria una llista enllaçada, on el primer node és el meló. I el següent node és el gat. I el tercer node és de col · lisió, anem a dir, perquè totes aquestes paraules comencen amb C. 

Així que la majoria de vostès ho van fer això per pset6. Si no vas fer una taula hash en pset6 i que ha intentat una mena 01:00 trie, sens dubte revisar les taules hash. Si ho vas fer en pset6, definitivament revisar les taules hash. I si ho vas fer a pset6 i no ho va fer treballar del tot bé i vostè tenia un munt de problemes amb ell, sens dubte revisar les taules hash. Així que la lliçó de veritat és, sens dubte revisar les taules hash. 

La immensa minoria dels que va tractar terme tracta sobre pset6. Imatge d'alt nivell. És una cosa com això, on cada node té un conjunt de nens, on cada nen correspon a una lletra. I cada node també diu, bo, jo sóc una paraula. Així que en aquest exemple, la paraula Maxwell, si se segueix la M a la A a la X-W-E-L-L i després seguir una més. A més, gaudiràs d'aquest símbol, delta, que signifiquem en el sentit que és una paraula. Així que Maxwell és una paraula. Aquests deltes són en tot significant quines coses són les paraules i el que les coses no són. 

Així que en pset6, les dades que emmagatzema juntament amb qualsevol dels nostres nodes era "Jo sóc un paraula. "I el bo de tries es demostren la inserció i les operacions de recerca en temps O (longitud d'una paraula). Així que per aconseguir a través de Maxwell, és M-A-X-W-E-L-L. Així que set o vuit anys - No puc explicar - passos per arribar a la final i comprovar les coses. Així aplicació ràpida aquí. Rob va passar per una vinculada enumerar en el seu post mortem. Per tal de comprovar que fos. Ho sento. Va ser a través d'un trie en el seu post mortem. Per tal de comprovar que fos. 

Però, bàsicament, que cada node té 27 punters als següents nodes i un Boolean estic jo una paraula. Fes una ullada a postmortem de Rob com la forma en això realment es porta a terme. La nostra estructura final, els nostres arbres i arbres binaris de cerca. Així que mirant aquests, aquests van ser coberts més recentment la setmana 8, dilluns. Un arbre és similar a un trie, llevat que no necessàriament han 27 nodes en cada punt. I vostè no té aquestes dades en cada pas que significa si el - el camí no importa. Mentre que un trie, el camí de dalt a inferior, Maxwell, era important per a nosaltres. 

No obstant això, cada node té múltiples els nens, potser. Tenim una mica més de vocabulari. L'arrel de l'arbre que està a la part superior. I diem que el situat més avall nodes que no tenen els nens són les fulles. Així com un trie, un arbre és una estructura de nodes. Un tipus comú d'arbre que anem parlar és d'un arbre binari, on cada node no té fills o un nen o dos. Així que la imatge aquí no és un arbre binari, perquè node 3 té tres fills. 

Però si haguéssim de fer cas omís d'ells, la resta que és un arbre binari, ja que demostra la propietat que cada node té zero, un o dos fills. Llavors, com podríem expressar això en codi? Podríem tenir un node en el qual cada node té un nombre enter dins d'ella, així com un punter a l'arbre de l'esquerra i un punter a l'arbre al dret, de manera que els dos nens. Com és això útil? Bé, si fem regles sobre on som posar nodes, podem fer la cerca més ràpida. 

Així que hi ha un concepte d'una recerca binària arbre, on tots els nodes en la subarbre esquerre té un valor menor que el node que estem veient. I tots els nodes en el subarbre dret tenir un valor més gran que el node arrel. Ara, que s'assembla a un munt de paraules. Vaig a posar-lo en l'interior de la doble cites i mostrar una imatge. Així que aquí és un exemple de un arbre de cerca binària. Veiem que vam començar amb 10. Tot a l'esquerra 10 és menor que ella. I tot a la dreta és més gran que ell. 

Però més que això, cada node l'arbre expressa aquesta propietat. Per tant el node 7 té un 3 a la a l'esquerra i 9 a la dreta. Així que tots els que són més petits que 10. No obstant això, mirant només als que, el 7 té 3 a la seva esquerra i 9 a la dreta. I de la mateixa manera a la dreta, 15 té 14 a la seva esquerra i 50 a la dreta. Així que els tres nodes d'allà, 15, 14, i 50, són també un arbre binari vàlid o un arbre de cerca binària vàlida. I tots són majors de 10. Així que els permeti ser a la dreta allà. Hi ha alguna pregunta? 

AUDIÈNCIA: Com fer front al vostè té dues sets? 

R.J. AQUINO: Si. Com tractar amb dos valors que són els mateixos? Alguns arbres binaris de cerca diuen que ignorar els duplicats, perquè l'objectiu és només per dir, he vist aquestes coses fins ara. Alguns arbres de cerca binaris es podria dir tenir un recompte dins del node. Altres podrien dir que tot el que l'esquerra és menor que o igual a. I tot a la dreta és més gran que. 

Només depèn del que el problema és que s'està resolent. Així que en un diccionari, per exemple, vostè no es preocupen pels duplicats. Es podria tirar. Però algun altre problema que podria tenir cura. 

AUDIÈNCIA: És possible tenir un 1 a l'esquerra 15, el qual és menor de 10? 

R.J. AQUINO: No Si el 14 aquí eren un 1, això no ser un arbre binari de recerca vàlid, perquè tot a la dreta del 10 ha de ser més gran que ell. I anem a veure per què. Si en la terra de la recerca el meu objectiu és trobar 14, començament a l'arrel. Així que em veig. D'acord. Anem a començar a l'arrel. Mira octubre. 

Bé, 14, el nostre objectiu, és més gran que 10. Així que ha de ser a la dreta. Això és molt similar a tot el telèfon Això del llibre que vam fer, el binari buscar allà. Però en lloc de la recerca binària en una matriu, estem binari recerca en aquest arbre. Així que encara estem buscant a 14. Bé, 14 és menor que 15. Així que si està en el nostre arbre, ha estar en aquesta zona d'aquí. Ha d'estar a la dreta del 10 i a l'esquerra 15. 

I així, vam comprovar aquest node. I yay, hem trobat 14. Jo no vaig a caminar a través d'ell. Però aquí està el codi. De fet, és relativament senzill, perquè això és recursiu. Què podríem demanar-te que facis en un concurs? Podríem demanar-li que escrigui aquest codi. Podríem demanar-li que miri aquest codi i modificar el codi i explicar el que està fent. Sí Consulta? 

AUDIÈNCIA: Són aquestes diapositives seran posat a disposició com estaven l'última vegada? 

R.J. AQUINO: Si. Així que aquestes diapositives definitivament ser publicat. 

AUDIÈNCIA: En realitat es publiquin en aquest moment en la pàgina web. David acaba de fer això. 

R.J. AQUINO: Els tobogans són en aquest moment en la pàgina web. Probablement vaig a apedaçar un parell de els typos em van assenyalar i corregir-los. Però hi ha un corrent versió en el lloc. Altres coses que podríem demanar-te que facis - escriure inserció. Escriure una versió iterativa del funció recursiva que només et va mostrar o parlar d'aquestes coses, com en paràgrafs, en paraules, en frases. La comparació dels temps d'execució i explicar el que es desitja utilitzar un binari arbre de cerca en lloc d'una la taula de hash, per exemple. 

Així entendre aquestes estructures a un nivell molt profund. Entendre com escriure, com utilitzar-los, com parlar-ne. I vostè estarà tot llest. Consulta? 

AUDIÈNCIA: Quan s'està escrivint el arbre binari de recerca, com determinar quin valor que sigui com l'arrel? 

R.J. AQUINO: tant el dubte era: què valor Com es fa com l'arrel? Depenent del seu codi, pot tenir una arrel global. Així que vostè pot haver tingut probablement en pset6 una taula hash global. O es pot desmaiar l'arrel com a argument. Així que aquesta funció de cerca aquí pren un argument un node *. I així ho node que resulten ser mirant és el que vostè està tractant com la seva arrel quan es passa polz I estic llest. Aquests són els meus diapositives. La següent persona pot venir d'intercanvi en un ordinador portàtil i micròfon. 

ROB Bowden: Crec que podria tenir interpretat aquesta pregunta de manera diferent. Però jo interpretat com, si vostè té els números 1, 2, i 3, com saber per fer 2 l'arrel en lloc d'1 o 3? Si fem 2 l'arrel, llavors és molt ben 1 i 3 a l'esquerra i dreta. Però si 1 és l'arrel, llavors és 1 a la superior, 2 dreta, 3 a la dreta. Així que per defecte, vostè no sap què fer amb l'arrel. I per a qualsevol algorisme que estem esperant donar-li, només el primer que inserció seria l'arrel. O t'agradaria donar-li un arbre binari que que ja existeix que té una arrel. Però altres algorismes tals que existeix l'arrel s'actualitzarà, pel que si vostè acabar en la situació en la qual és 1, 2, 3, s'actualitzaria automàticament a fer 2 la nova arrel, de manera que És encara molt ben equilibrat. 

ANGELA LI: Cool. Hey, nois. Sóc Angela. I vaig a acabar el nostre C i després anar a alguns de la nostra web tecnologies - HTTP, HTML i CSS. Així que el primer és memòria intermèdia atacs de desbordament. Així que donem una ullada a aquest codi. És bastant simple. Hi ha una funció foo. I no retorna res. Però es necessita un punter a una cadena anomenada bar. 

I es va a declarar aquest tampó, que és un caràcter gamma que compta amb 12 ranures. I utilitza memcpy, que és només un funció que còpia d'una direcció en un altre. Així que això és tractar de copiar a nostra tampó del bar està assenyalant. Així que qualsevol idea del que està malament amb aquest codi? 

AUDIÈNCIA: Si la barra és més llarga que C, que es sobreposen. 

ANGELA LI: Sí, exactament. No tenim cap garantia que la barra serà inferior a 12. Acabem de fer un número arbitrari 12. I ens vam dir, esperem que nostra entrada de l'usuari és menor d' 12 caràcters de llarg. Així que en un món ideal, si la nostra entrada és sempre com s'espera, a continuació, ens posarem en contacte alguna cosa així com: hola. Això és menys de 12 caràcters. Això es llegeix en char c. I llavors fem alguna cosa amb ell. En realitat no importa. 

Però una persona amb males intencions pot fer una mica de la mateixa família, en el qual ens donarà tot el bar està assenyalant, que va a apuntar a aquest enorme varietat de tan sols d'un. I aquesta és la forma que més de 12. Així que va a anar fins al final aquí sota perquè el rendiment direcció que solia ser. Així que diguem que aquesta funció es diu foo. Potser foo va ser cridat per algun altre funció, que va ser cridat pel principal. Així que quan foo està en execució, cal saber on tornar. 

Si foo va ser cridat per alguna funció anomenada baz, ha de saber que és ha de tornar a baz. I això és el que la direcció del remitent aquí ens està dient. Però si sobreescriure'l amb un altre direcció, en aquest cas, es tracta d'un representació de la direcció en el principi d'aquest memòria intermèdia, llavors el que realment passarà és que en lloc de tornar de nou a baz, que crida a la nostra funció, és només anirà a la part davantera d'aquest codi. 

I si això hi era perquè un amic hacker maliciós vi i injectat això, llavors potser aquesta quantitat d'és no és realment Atlètics. I en realitat és només el codi que es trenca l'ordinador o alguna cosa així. Així que per estar a la defensiva sobre aquest tipus de cosa, ha d'assumir que mai l'entrada de l'usuari és un cert quantitat de caràcters. Per exemple, quan vostè estava fent corrector ortogràfic, que li van dir que les paraules eren només serà de 40 caràcters llarg màxim. I això era bo. 

Però si no, llavors vostè hauria de assegureu-vos de només lectura al 45 caràcters a la vegada. En cas contrari, és possible sobreescriure seva buffer. Teniu alguna pregunta respecte això. Sí 

AUDIÈNCIA: Podries parlar una mica més sobre això? 

ANGELA LI: Ho sento. Sí 

AUDIÈNCIA: El micròfon és només per a vídeo. Vaig a tractar de projecte. Hola, nois. Sup? Així que anem a repassar algunes coses en el Biblioteca CS50, que vostè ha estat utilitzant tot el semestre, majoritàriament per obtenir l'entrada de l'usuari. Com vostès saben, s'inclou el CS50 biblioteca amb només fer CS50.h, que conté tots els prototips de la funcions que es poden utilitzar, com GetString i GetInt, i GetFloat, etcètera. I hi ha aquesta una línia en el CS50 biblioteca que defineix una cadena, la qual vostès tots sabem a hores d'ara és només un char *. 

Però donem una ullada a com funciona GetString. Aquesta és una versió molt abreujada. Pot tirar dels arxius de biblioteca CS50 de, crec, manuals.CS50.net. I es pot llegir a través de la funció real. Però això cobreix alguns les parts importants. Per això hem creat una mica de memòria intermèdia amb una certa capacitat. I el que fem és obtenir un caràcter alhora de la norma n. Aquí és on les entrades de l'usuari text a la consola. 

Així que llegirem en un caràcter, sempre que no sigui un nou línia i no és el final d'arxiu, que és el final de l'entrada estàndard. I per cada caràcter que llegim a, si aquest personatge acaba afegint per al nombre de caràcters que hem llegit i això és més que la nostra capacitat, llavors el que fem és simplement redimensionar la nostra buffer de manera que és el doble de temps. Així que de nou, això protegeix contra tampó atacs de desbordament, ja que vostè llegeix en un caràcter alhora. I si en algun moment vostè llegeix en massa molts, que acaba d'ampliar la seva buffer. Es multipliquen per dos. I llavors vostè té més espai. 

En cas contrari, només ha d'afegir un personatge per esmorteir. I després d'haver llegit a tot el caràcters, s'encongirà el tampó tornar a la mida normal, afegir un terminador nul, i després tornar. Ara, donem una ullada a GetInt. Poden vostès llegir això? Puc acostar una mica. No sé com funcionen els ordinadors. No importa. No puc acostar correctament. 

Això és realment difícil. Ho sento. Anem a mirar això. Així que el que fa és GetInt primer llegeix en una cadena de GetString, que hem implementat abans. I la part més important a tenir en compte aquí és si aquest intercanvi que acaba la lectura és com en realitat no una cadena, llavors ens tornem a INT_MAX representar el fracàs. Per què ens tornem INT_MAX lloc de negativa 1 o 1? Alguna idea? 

AUDIÈNCIA: [inaudible] 1 negatiu a un. 

ANGELA LI: Sí, exactament. Així que vostè és molt més probable que només volen a l'entrada 1 o negatiu gener quan se li demani per a un n-èsim i qualsevol que sigui Maxes n-èsim. És enorme. Vostè probablement no va a utilitzar. Així que això és com una decisió de disseny per assegurar-se que no accidentalment retornarà un error o no torna 1, el que podria ser analitzat com a resposta correcta. Així que si una línia no existeix, tornem INT-MAX. En cas contrari, s'utilitza sscanf, que és com scanf. Però es llegeix en una cadena. 

I tenim aquesta formatada cadena, que és% i% c. I tractar de coincidir amb la qual el que l'usuari ens va donar. Volem que el nombre de coses coincidents que és 1, el que significa que només realment vol perquè coincideixi amb un nombre enter envoltat de tal blanc espai, potser no. En aquest cas, si es posa en alguna cosa com a bar, no coincideix en absolut, perquè cal que hi hagi un enter des del principi. Així que mai es va tornar sscan 0. Així que vostè no torna això. 

Alternativament, si es posa en alguna cosa com 1, 2, 3, A, B, C, que partits tant el nombre enter sinó també el personatge després d'ella. Així sscanf tornarà 2, que tampoc és ideal. No vol que 1, 2, 3, A, B, C per ser un int vàlida. Així que també no funciona. Però diuen que poses en una cosa així com 50. Això coincideix amb el% i, el que significa aconseguirà llegir en n. I ara, n contindrà el número 50. I llavors vostè pot tornar. 

En cas contrari, vostè colpeja Reintenta. I llavors, només es va una altra vegada fins s'obté una entrada adequada a l'usuari. Teniu alguna pregunta respecte això? 

AUDIÈNCIA: Així que si anés a imprimir el valor de la GetInt a [inaudible] seria només el nombre sencer i màxim? 

ANGELA LI: Sí Així que si vostè utilitza GetInt, vostè ha d'assumir que no vol max nth a ser una entrada vàlida, perquè et vas assumir que això era dolent. 

AUDIÈNCIA: Si no tinguéssim char c i algú va posar en 1, 2, 3, Sam, oi seguirà funcionant durant 1, 2, 3? 

ANGELA LI: Crec que funcionaria. Però no vol 123Sam a ser una entrada vàlida per un usuari. Això no és realment un int. Per tant, no em sembla just analitzar com un int. D'acord. En aquest cas, anem a passar a l'Internet. Així que HTTP no és un idioma. HTTP és el conjunt de normes per la forma d'enviar coses als clients, aquest és vostè, als servidors. Aquesta és la gent a la web. 

Així que HTTP és sinònim d'hipertext Protocol de transferència. És el cor i l'ànima de tot el web. La part d'hipertext només es refereix a HTML. La transferència és clients com es va a enviar sol · licituds d' servidors, que donen respostes. I el protocol és just, com que vostè espera d'un servidor es comporti? I com se suposa que es comportin de tal manera que es pot agilitar aquest procés de comunicació? 

Així que les peticions HTTP s'assemblen molt a això. GET és el tipus de sol · licitud. Vostès han vist les sol · licituds GET i les peticions POST. Aquest segon que existeix, / jo, això és només l'URI o l'adreça URL d'on es vull anar dins de l'hoste. Així que aquesta sol · licitud es demana la pàgina, com www.facebook.com / em. I és una sol · licitud GET. I llavors aquest HTTP/1.1, que és només la versió d'HTTP que utilitzeu. És gairebé sempre 1.1. 

I després hi ha un munt d'altres coses també. Vostè pot veure aquests si obrir la consola quan s'està navegar per la web. Les respostes semblen una mica de la mateixa família. La part superior és, de nou, la tipus d'HTTP que utilitzeu seguit d'un codi d'estat. Així OK 200 és tot va funcionar. Aquest és el teu lloc. El seu contingut seguirà. I llavors se li dirà quin tipus del contingut i altres coses també. 

Els codis d'estat, hi ha uns pocs més importants que vostè ha de saber. 200 OK és com d'or de tot. Tot funciona. 403 Forbidden. Això el que has vist si se li va oblidar chmod alguna cosa correctament. Això vol dir que vostè no ha els permisos adequats a accedir a aquest al servidor. És com, no, no pots veure-ho. 404 significa que alguna cosa no existeix. No s'ha trobat. Vostè probablement ha vist molt d'això. 

500 Error intern del servidor sol ser com si alguna cosa va sortir malament al costat del servidor. Així que quan vostè estava implementant pset7, si tingués errors de PHP, vostè podria en realitat anar a la pàgina i veure un manat sencer de PHP error material. Però això no vol dir que normalment succeeix, perquè els llocs web realment no volen dir-li per què el seu lloc està trencat. Ells probablement només retornen un 500 Internal Server Error. 

I després hi ha 418 Sóc una tetera. Hi ha tota una història sobre per què això és una cosa. Però vostè pot llegir sobre que en el seu propi temps. Hi ha un munt de altres codis d'estat també. Però aquests són els que vostè ha de saber. Així que anem a parlar d'HTML. HTML, recordeu, no és un llenguatge de programació. Es tracta d'un llenguatge de marques. Això significa que descriu el contingut. Et diu el que sembla un document HTML similar o no és el que sembla però la manera com està estructurat. 

Per tant, defineix una estructura i semàntica de pàgines web. És com si, aquest és un paràgraf. Aquesta és una llista ordenada. Això és com una secció de la meva pàgina. Aquí hi ha el títol. Ho fa coses per l'estil. No estils a res d'això, perquè això és el que fas en la CSS. I sembla que una sèrie etiquetes de niat. Així que per utilitzar un exemple d'un molt bàsic Pàgina HTML, vostè té el DOCTYPE declaració allà. 

Aquesta declaració DOCTYPE és dient que estem fent servir HTML5. Llavors vostè té la gran etiqueta HTML. Conté un cap i un cos. Dins del cap, vostè té el títol. Això és el que succeeix en el títol barra del seu navegador. Comptem amb una etiqueta de vincle que uneix en un full d'estils extern. I després tenim un script que extreu d'un JavaScript extern. 

I després, dins del nostre cos és en realitat el que es mostra a la pàgina. Tenim un paràgraf i després un imatge dins d'aquest paràgraf. Aquesta és una foto dels gatets. Observeu que la imatge etiqueta es tanca. Així que en lloc d'obrir amb una imatge i després fer una altra / imatge, només hi ha aquesta petita barra aquí, que el tanca. I l'etiqueta d'imatge també té aquesta clau atribut de valor anomenat alt. Aquest és el text alternatiu que succeeix quan es passa sobre ella. 

La majoria dels elements HTML tenen algun valor clau coses que vostè pot donar a ell, diversos personalització. Sí 

AUDIÈNCIA: [inaudible]. 

ANGELA LI: Bé, pel que és una atribut de l'etiqueta. Així que si vostè estava fent servir jQuery, podria fer select image.getAttribute. I llavors vostè pot buscar obtenir l'atribut alt. I se li donarà gatets. Si et recordes de formularis en HTML, entrada elements tindran atributs de nom. I això és el que PHP utilitza per enviar sol · licituds quan s'envia un formulari. 

AUDIÈNCIA: vas esmentar alguna cosa com si utilitza Kittens.jpg o cosa que té els desapareguts arxivar carpetes o altres arxius? 

ANGELA LI: Sí Així que això és el que s'anomena un familiar camí, perquè jo no vaig a donar que el camí complet. Això és com quan en C si ho fa fopen algun arxiu, si hi.txt fopen, que hi.txt s'espera que sigui en el mateix directori, llevat que es doni una major complex camí. 

AUDIÈNCIA: Així podria especificar quina carpeta [inaudible]? 

ANGELA LI: Sí I vostè pot buscar la manera de fer això. Però si volia aconseguir Kittens.jpg terme del directori pare, que anava a fer .. / Kittens.jpg. Sí Ho sento. Sí Oh home, es va oblidar la pregunta. Quina era la pregunta? Ah, la pregunta era, és a dir, Kittens.jpg s'espera que estigui en el mateix directori? I en aquest cas, ho és. Però també es pot donar un cert camí de manera que no ha de ser. Bé? 

CSS. Així CSS, com HTML, no és un llenguatge de programació. CSS és només una sèrie de regles d'estil. És sinònim de Cascading Style Sheets. I vostè l'utilitza en conjunció amb HTML a les pàgines d'estil. Així que hi ha tres maneres pot incloure. Una manera de fer-ho és al cap porció de codi HTML, vostè pot tot just obrir una etiqueta d'estil i després s'adhereixen una mica de CSS governa allà. És bastant bé. Sí 

AUDIÈNCIA: Podria posar els etiquetes d'estil en el medi, anem a per exemple, el cos i / cos. I llavors seria un estil només en el cos. 

ANGELA LI: Vostè podria. Es va a treballar. Però vostè no ha de, perquè l'estil és classe de les metadades que ha d'anar en el cap del seu document. Administració hauria realment només contenen el que en realitat va a mostrarà a la pàgina. 

AUDIÈNCIA: Així que et poses estil al cap amb l'estil de la tota la pàgina web, no? 

ANGELA LI: Sí Així que posar l'estil aquí, aquestes regles CSS s'aplicarà a tota la pàgina en funció de seus selectors. Així que la millor manera de fer-ho és en canvi tenir una etiqueta d'estil al cap, tens aquest enllaç a un estil extern laminar que et vaig mostrar al exemple anterior. El que això fa és que intenta i troba el arxiu style.css i després la presa i els usos que a mesura que el estils de la pàgina. I tu style.css faria només cal veure com aquest. Només seria un munt de CSS. 

I, finalment, hi ha una altra forma de pot incloure CSS, el que realment no ha de fer mai. És un estil inline trucada. I pel que qualsevol element HTML també pot prendre un atribut d'estil. I llavors en aquest atribut d'estil, li pots donar regles CSS. Així que en aquest cas, sigui quina sigui div sóc defineix aquí, que va a tenir un fons negre i un color de text blanc. Però vostè no ha de fer això, perquè el que això es posa al seu estil dins del seu HTML. 

I sé que hem estat parlant sobre HTML és l'estructura i CSS és l'estil. Si vostè fa això, es barreja junts. I no és molt net. Així que no facis això. Utilitzant un exemple de CSS, fins allà, només has de seleccionar el cos de l'HTML documental. I som així, tot està serà Comic Sans. Així mateix, no recomano això. Però es pot fer això. 

La segona regla aquí, va per seleccionar l'element a la pàgina principal amb ID. Així que qualsevol element HTML, vaig dir ID = Principal, em vaig a donar que un Marge de 20 píxels i alinear tot, tot el text, al centre. L'últim que selecciona per classe CSS. Pel que qualsevol element de la pàgina que vaig una classe de secció, vaig a fer que sigui un color de fons de color blau clar. Sip. Això és tot el que tinc. Consulta? 

AUDIÈNCIA: Què significa el hashtag abans principal fer? 

ANGELA LI: La pregunta és, què significa el hashtag abans do principal? En aquest cas, el hash en CSS significa seleccionar ID. Així que si jo tenia algun element HTML, com DIVID = principal, seleccioneu la regla aquest CSS la cosa amb principal ID. I de manera similar, el període en el front de secció és Selecció per tipus CSS o seleccioneu per classe HTML. 

AUDIÈNCIA: Per què hi ha un compte abans de 6 en color de fons? 

ANGELA LI: Sí Llavors la pregunta és, per què hi ha un hash abans de la 6? Això és diferent que la de hash. Això significa que vostè està donant un color hexadecimal. Així colors hexadecimals, això només representa un color. I te'n recordes de triples RGB quan que va fer el conjunt de processadors forense? Això és similar. Els dos primers dígits són el la quantitat de vermell està en el color. El segon dos representen la quantitat de verd. I el tercer representa la quantitat de blau. I el hash és que això va per representar un color. 

Així que qualsevol cosa a partir de 0, 0, 0, 0, 0, 0 fins a la F, F, F, F, F, F és vàlida. És una mica de color vàlid que pot mostrar per el seu navegador. Consulta? 

AUDIÈNCIA: Quina és la diferència entre utilitzant per ID i per classe? 

ANGELA LI: La pregunta és quin és la diferència entre els utilitzant per ID i classe? Vostè només pot tenir un element en un Document HTML que té un ID donat. Així que només una cosa a la meva pàgina se li permet tenir més identificació. Així que l'utilitzi per això és la capçalera. Aquesta és la navegació. Aquest és el peu de pàgina. Les classes són diferents, perquè es pot aplicar les classes a la major quantitat d'elements HTML com vulguis. 

Així, per exemple, ho vaig fer secció de classe, perquè és probable que hi hagi més d'un secció a la meva pàgina. Només està permès tenir la major quantitat elements de la pàgina amb el mateix classe, però només un amb una certa identitat. 

AUDIÈNCIA: Així que el punt representa la classe? 

ANGELA LI: Sí Un punt representa una classe. Genial. Això és tot el que tinc, nois. Gràcies. 

[Aplaudiments] 

ZAMYLA CHAN: Hola a tots. Estic Zamyla. Vaig a estar cobrint PHP, MVC, i SQL avui. Una gran part del material que estaré coberta serà més o menys només treure'l de pset7. Està bé. Llavors, què és PHP? PHP significa PHP Hypertext Preprocessor. Així que, en si mateix, és un recursiva nom, que està molt bé. PHP és un llenguatge de script del costat del servidor, i proporciona el backend i els fonaments lògics de la nostra pàgina web. 

Així Angela va parlar molt sobre el codi HTML i CSS que farà que l'estructura de la pàgina web. Però el que si vostè vol canviar això el contingut de forma dinàmica o si varia basat en l'usuari o certes condicions? Aquí és on entra en joc PHP Ara, en general, PHP pot trigar uns menys línies per posar en pràctica la mateixa cosa en C. Això és degut a que PHP maneja la memòria gestió per al programador, en lloc que nosaltres hàgim de malloc lliure, coses així. 

Però ja que PHP és una interpretació idioma, en general, pot executar una mica més lent que C, la qual és un llenguatge compilat. Com que estem movent la programació idiomes, donem una ullada a com el sintaxi serà diferent. Serem molt curosos de no confondre amb això. Així que amb la sintaxi de PHP, si vostè és Incorporació dels teus PHP dins d'un HTML presentar o dins d'un arxiu PHP. sí, que d'adjuntar el codi en l'obert PHP i les etiquetes PHP tancats com següent, igual que a la pantalla. 

Les variables en PHP. Cadascuna sola variable s'iniciarà amb el signe $ seguit del nom de seva variable. Ara, les variables en PHP s'escriuen lliurement, el que significa que no cal per indicar quin és el tipus de dades és quan vostè està declarar. No obstant això, això no vol dir que no tenen cap tipus en absolut. Així que si em declaro una variable i acaba d'establir és igual a 1, i després declaro una altra variable, estableixi el seu valor en "1" i després un altre 1,0, bé, depenent del tipus de la igualtat operadors que utilitzo, si jo vull comparar en tots els tipus, llavors que seran iguals. Però si jo vull estar segur que el tipus són iguals, PHP pot encara fer que, tot i que no indiquem de quin tipus és quan primer fer l'arxiu. 

Ara bé, en PHP, tot i que som commutació de de programació idiomes de C, encara tenim la nostra de confiança si la condició, igual que aquest. Encara tenim els nostres cicles while, simplement com aquest, on vostè posa en el seu condicions i després la cos del bucle. I després també tenim el nostre bucle for, que en general són aquestes. Així que si jo volia per iterar sobre tots nou conjunts de processadors i presentar i trucar a un funció submitPset, llavors puc fer això aquí, que vostès tots han fet per aquest punt. Felicitats, per cert. 

Per a la càmera, la gent Dit això, gràcies. Ara, si vostè no vol només ha d'utilitzar aquest bucle, llavors PHP en realitat també ha cridat coses bucles foreach. Així que si jo tenia un arranjament d'enters, 0 a 8, emmagatzemada en els conjunts de processadors de matriu, llavors jo podria tenir un bucle foreach que itera sobre tots els números en conjunts de processadors. I llavors jo podria cridar a la mateixa funcionar en vuit ocasions, igual que ho feia abans. Així que això per a cada bucle és bo, perquè vostè no ha de que no sap la longitud exacta de la matriu que es haver, a continuació, utilitzant aquest bucle foreach es farà càrrec d'això per tu. 

Així que vaig fer conjunts de processadors com una matriu. Fem una ullada a això. Les matrius en PHP són normalment els mateixos que els que hem tingut en C, on pot declarar una matriu. I aquí, puc declarar una matriu buida i després construir dinàmicament utilitzant índexs com sencers. Així l'índex 0, vaig a guardar un nombre enter nomenat gener. En l'índex 1 de la cistella, em vaig per emmagatzemar el valor 2. I en el tercer índex però el segon número, que vaig a emmagatzemar el número 12. 

Ara, això està molt bé en aquest funciona funciona bé. Però diuen que a mi m'importa el que espera cada índex. Per a mi, l'índex de 0 significa que la manera molts gats que tenen. I l'índex d'1 significa que la manera molts mussols jo tenim. I el següent significa el nombre de gossos. Bé, llavors és per especificar que, en lloc d'haver de recordar 0 es refereix a gats i 1 als mussols, que poden utilitzar matrius associatives, el que significa que en lloc d'enters com els meus índexs, Puc realment utilitzar cadenes. 

Així que això és bastant útil. I has bàsicament acaba de reemplaçar els nombres enters amb cordes. I aquí ho tenen un matriu associativa. Sí 

AUDIÈNCIA: Hi ha una raó per la que hi ha un guió per al segon banda, perquè la cistella té la matriu. 

ZAMYLA CHAN: La pregunta era, és Hi ha una raó per la qual hi ha una Destacar entre la meva i la llista? No Això és el que estic nomenant la meva variable. 

AUDIÈNCIA: A la primera line, és una paraula. 

ZAMYLA CHAN: Els meus disculpes. Vaig a arreglar això. Sí Ells han de ser el mateix nom de variable. Bona atrapada. D'acord. Així que anem a passar a la cadena concatenació. Si volia tenir dues cadenes, llavors puc concatenar amb l'operador punt. Així que si tinc Milo com a primer nom i plàtan com un cognom, a continuació, concatenar amb l'operador punt i després posar un espai entre farà una cadena que conté Milo Banana, que després puc repetir o, més aviat, imprimir. 

Parlant d'eco, parlarem sobre alguns útils - Ui. Ho sento. Algunes funcions de PHP útils. Així que tenim la - dificultats tècniques. Un segon. Vaig enviar. Problemes de PowerPoint. I estem de tornada amb les funcions de PHP. I estem de tornada amb les funcions de PHP. 

Així que tenim la funció d'exigir, en cas si es passa un arxiu, això és que s'acaba de un exemple d'un arxiu que Podria passar polz Després que s'inclogui el codi PHP a partir d'aquest arxiu que indico. I va a avaluar aquesta polz Després també tenim ressò, que és un paral · lel a printf. Exit és un paral · lel de trencar, que surt del bloc de codi que vostè està dins I a continuació, els controls buits si un dau variable és com nul o zero o el s'equipara amb ser buida. Sí 

AUDIÈNCIA: Per a la concatenació de cadenes punt operador d'un, en PHP, és que el mateix que en JavaScript, on es tracta d'utilitzar el punt per la concatenació significa més? Així que pel nom complet, vostè podria tenir dòlar signar primer i després + + durar? 

ZAMYLA CHAN: Si. Per tant el dubte era si en PHP que pot utilitzar la mateixa concatenació de cadenes com en JavaScript amb les coses positives. I Josep a entrar en això més endavant. Crec que té un tobogan en això. En realitat, és diferent. Així que en JavaScript, cal utilitzar el signe més per concatenar cadenes. I en PHP, vostè ha de utilitzar l'operador punt. Així que són diferents. 

D'acord. Així que ara que hem cobert tot aquest PHP, on ho fa realment ser útil? Bé, que ve molt bé quan ens pot combinar amb el nostre HTML. Així que el nostre PHP ens donarà el poder per alterar el contingut HTML d'una pàgina abans d' la seva càrrega. Així sobre la base de diferents condicions, en general l'usuari específic que és connectat, podem visualitzar informació diferent. Linda, va tenir vostè alguna pregunta? 

AUDIÈNCIA: Pot concatenar També un nombre enter? 

ZAMYLA CHAN: Sí, es pot. Per tant el dubte era si es pot concatenar nombres enters o altra variable.s ara, passem a MVC, que és un paradigma que hem utilitzat en pset7 i un munt de dissenyadors web utilitzen per organitzar el codi en els arxius al seu lloc web. M significa Model. I, bàsicament, els arxius de model s'ocuparan amb les interaccions amb la base de dades. Veure els arxius, que es relacionen amb la estètica de la pàgina web. I les nanses Controlador sol · licituds dels usuaris, ho analitza de dades, fa una altra lògica. 

En pset7, combinem el model i el controlador. I només els anomenem controladors i posar-los al directori públic. I els arxius de vista, que els utilitzen com plantilles al directori de plantilles. Així que aquest diagrama aquí també representa Aquest mateix tipus de divisió amb l' model i el controlador de color morat aquí a l'esquerra i la vista de la dreta. Així que aquest és un esquema que alguns de vostès poden haver vist en horari d'oficina o diagrames que ens dibuix com vostè van ser el càlcul del seu conjunt de processadors. 

Així que aquí, a un controlador determinat, un model controlador, tenim funcions que es refereixen a la consulta del SQL base de dades, l'execució de la lògica de PHP. Potser vostè mirar cap amunt un estoc a Yahoo! Finances. O potser, simplement li revisi per veure si un usuari havia presentat un formar ja abans de tenir visitat la seva pàgina. I després li fan Un formulari aquí. Després s'havia presentat aquesta forma per l'usuari, l'acció que era especificada en l'etiqueta HTML del formulari indicaria la pàgina que retorna les dades a. 

Així que tota aquesta informació seria enviat de tornada al seu controlador. Llavors vostè probablement fer una mica més lògica en què i potser executar uns pocs més consultes a la base de dades SQL i llavors, finalment, arribar a un bé sistema ple d'informació que ho faria passar en alguna altra plantilla que mostren aquesta informació. Ara, com podem empaquetem que la informació dalt? Bé, tenim una funció anomenada Render que es trobava a l'arxiu functions.php en pset7, on es passa en el nom de un arxiu, el nom d'una plantilla. 

I després també es passa en una matriu associativa. I perquè array associatiu representa les diferents informacions que desitja passar polz Ara, què serà constant en aquests exemples és que les claus o, més aviat, les tecles de la associatiu matrius, aquests són el que serà s'espera que sigui constant per la plantilla, perquè sap que necessita cosa que es diu missatge o trucada nom. I llavors les coses a la dreta, el valors reals, pel que en aquest cas, qui és un bon noi i Milo, els que van a ser els valors que estan canviant que el controlador canvia cada vegada o basat en una certa condició i passarà que polz 

Així que aquí en plantilles, veiem que estan utilitzant HTML caràcters especials, que, bàsicament, només vol dir que volem per obtenir la cadena de parells que l' usuari posa endins I volem substituir missatge aquí. Així que quan veiem en realitat l'arxiu, l'específica informació es passa polz Tingueu en compte que la clau de com fer obres és que les claus de la associatiu matrius, aquestes variables convertit noms aquí. I així els valors d'aquesta clau en el array associatiu es converteix en el valor de la variable. 

Ara, anem a passar a SQL. Representa Estructurat Llenguatge de consulta. I pel que aquesta és només una programació llenguatge dissenyat per a la gestió de bases de dades. I va ser molt útil per a nosaltres en nostra pàgina web de finances pset7. En essència, és només una manera fàcil de rastrejar i administrar els objectes i taules i vincular entre si. Ara, pensi en la seva base de dades SQL bàsicament com un arxiu d'Excel, potser, amb diversos fulls amb pestanyes. 

Així, pots tenir diverses taules, potser, que unides entre si. I igual que Excel, tenim una gran quantitat de la funcionalitat que volem. Per exemple, podem seleccionar certes files. Podem inserir informació. Podem actualitzar files. I també podem eliminar coses. 

El SQL seleccionar les obres mitjançant la selecció de files o una fila de columnes especificat des d'un base de dades que coincideixin amb un determinat criteris que vostè indiqui. Així que per aquí quan veig select * from mags on hi ha la casa = Ravenclaw, després Estic seleccionant *, el que significa que sóc seleccionar cada columna única en aquest fila de la taula dels mags, però només si la columna de la casa és igual a Ravenclaw. Ara, això és pur o SQL. Així que si em vaig anar a phpMyAdmin, que és la forma específica en que utilitzem per gestionar les nostres bases de dades SQL, llavors jo podria inserir que en el lloc web de phpMyAdmin. I això seria executar. 

Però que en realitat volem fer que al costat de PHP. Llavors, com fem això? Bé, fem servir la funció de consulta, que bàsicament executa aquesta consulta SQL. L'ús d'? com a marcador de posició, podem passar a certa valors a la nostra cadena que ens voleu canviar. Així que potser estic emmagatzemant diferent valors en el curr_house, que representa la casa actual que jo estic passant. Així que pot passar que en un marcador de posició amb el signe d'interrogació. I després vaig a bàsicament executar la el mateix que vaig fer abans, excepte Ara, estic en PHP. 

I consulta retornarà un matriu associativa. I vaig a guardar-lo en files. Ara, consulta sempre pot fallar. Potser la consulta SQL no va poder executar perquè la taula no existeix. O potser, no existia la columna. Quelcom ha fallat. Bé, en aquest cas, vostè voldrà assegurar-se Segur que comprovi si el consulta retorna fals. I això és mitjançant l'ús de la triple és igual a l'operació allà. 

I llavors em disculpo, que és una altra Funció CS50, passant en un missatge. I si ens fixem en demanar disculpes, tot el que realment fa és fer apology.php. Sí 

AUDIÈNCIA: Podria explicar el que estrella fa entre selecte i de? 

ZAMYLA CHAN: Sí, és clar. Així que l'estrella al mig de selecció i de vol dir que jo desitjo seleccionar el conjunt tota la fila de la meva taula. Podria haver indicat seleccioneu nom, any, casa. I jo només anava a aconseguir aquests tres columnes a la meva taula. Però si dic select *, llavors vaig a posar tot en aquesta columna. Llavors em vaig a anar a vostè a la part de darrere primer. 

AUDIÈNCIA: Així que això és encara en SQL, oi? És aquesta consulta o es tracta de PHP? 

ZAMYLA CHAN: Estem en una consulta. Així que això és en PHP. Així, utilitzant la consulta funció de PHP, estem executant una consulta SQL. 

AUDIÈNCIA: Hi ha quelcom en SQL majúscules i minúscules, com seleccionar o mags o casa? 

ZAMYLA CHAN: Hi ha quelcom en SQL entre majúscules i minúscules? Jo crec que si. Crec que SELECT i FROM I on són entre majúscules i minúscules. No? 

ROB Bowden: Llavors, és tot el contrari. Els noms de columna i els mitjans de la taula, tots aquests són majúscules i minúscules. Però cap de les paraules claus de MySQL, com SELECT, FROM i WHERE, aquests no són majúscules i minúscules. D'acord. Així el contrari del que vaig dir. Així que totes les paraules claus de MySQL - seleccionar, des d'on - els No es distingeix entre majúscules i minúscules. Però tota la resta és. D'acord. Vostè al davant. 

AUDIÈNCIA: Si Tinc $ files en termes de més d'una fila, significa que és només es converteix en una matriu associativa? 

ZAMYLA CHAN: tant el dubte era si les files té més d'una fila en el mateix, no que es converteixi en una matriu associativa? Així que és un conjunt d'empreses associatives matrius ja. Així que fins i tot si només hi ha una fila tornat, llavors vostè hauria d'anar a índex 0 d'aquest resultat. I llavors vostè hauria de primera fila. Sí, Belinda? 

AUDIÈNCIA: Quan s'utilitza ===, És aquest l'únic cas? O hi ha altres? 

ZAMYLA CHAN: Així que en aquest cas, === és una comparació entre els tipus. Ho sento. === És una comparació que compara els tipus. I llavors == compara tots els tipus. 

AUDIÈNCIA: Pot explicar què files es troba en aquesta situació? És la fila de les dades? 

ZAMYLA CHAN: En la següent diapositiva, estic vaig a explicar el que és files. Així que si no t'importa la celebració de fora d'això. I després per l'esquena? 

AUDIÈNCIA: Per funcions com a consulta, prestar i demanar disculpes [inaudible]? 

ZAMYLA CHAN: La pregunta era si aquestes funcions - de consulta, es disculpen, i fer - són comuns en PHP. Aquests són els que CS50 escriure per pset7. I Jay? 

AUDIÈNCIA: Quan hagi de dir $ _SESSION, És que només per als ID? O potser hagi dit això aquí? 

ZAMYLA CHAN: tant el dubte era, quan utilitzem $ _SESSION, això va ser una específica variable global que estem fent servir. Aquí aquesta variable es va a ser local a la nostra funció. Així que estem declarant una nova variable. 

AUDIÈNCIA: Com és demanar disculpes implementat? 

ZAMYLA CHAN: La pregunta era, com és disculpar implementat? I crec que això és en realitat una molt bones pràctiques per a vostès per entrar a la secció functions.php i mirar disculpis i veure com es pot tenir fet a si mateix. Així que pot deixar això a vostè, però només diu que si ens fixem en disculpes, llavors pren el missatge que presentar a demanar disculpes, i després es fa que aquest missatge. Alguna pregunta més? M'encanta preguntes. Així que els faran. 

AUDIÈNCIA: [inaudible] fet o print allà? 

ZAMYLA CHAN: La pregunta era, podríem no només hem posat fet o print allà. Així que això hagués fet alguna cosa lleugerament diferent. Això hauria imprès consulta fallat en què - així, en aquest moment, estem en realitat en el nostre controlador. Així que en realitat no tenim HTML fixat aquí. Demanar disculpes per la prestació apologize.php en realitat li redirigeix ​​a apology.php. D'acord. 

Així que ara, anem a abordar el pregunta d'abans sobre el que Realment és files. Bé, consulta retornarà un conjunt de files. I cada fila es representa per una matriu associativa. Així que si jo he executat alguna consulta SQL i He emmagatzemat el resultat en files, llavors utilitzant un bucle foreach, llavors la matriu nom és el primer a arribar - files. I després vaig a trucar cada fila hi ha $ row. 

Així iteració en això, puc llavors accedir a la columna el nom de la fila donada, columna d'any, i la columna casa. Tingueu en compte que jo no hauria estat capaç de fer això amb les files, ja que l'índex files nom no existeix. Files és només un conjunt de matrius associatives. Així que hi ha dos nivells d'allà. Un cop tingui el conjunt de files, vostè ha d'entrar en això. I llavors vostè pot tenir accés a les columnes. Això és clar? Sí, al davant? 

AUDIÈNCIA: [inaudible] obrir suports per [inaudible]? 

ZAMYLA CHAN: Perdó? 

AUDIÈNCIA: Els suports oberts. 

ZAMYLA CHAN: Aquestes aquí? Això és el que em permet incloure aquesta variable. Sí 

AUDIÈNCIA: Abans d'imprimir, és vostè imprimir en el codi HTML? 

ZAMYLA CHAN: Si. Quan imprimeixo, això aquí és l'interior la meva plantilla ara, per meu punt de vista del mètode de MVC. Així que estic imprimint en l'HTML. 

AUDIÈNCIA: Així que si ens vam anar al desenvolupador eines després de l'execució d'aquest, podríem que en realitat en el codi? 

ZAMYLA CHAN: Aquesta és una gran pregunta, si. Així que si vostè va entrar en les eines de desenvolupament Firefox amb Firebug o Chrome, llavors sí, vostè podria veure el codi HTML específic. Així que no mostraria $ row ["Nom"]. Això mostraria que sigui nom està en aquesta fila. 

AUDIÈNCIA: Només una qüestió general, el que es tr i td defineix com? Per què caldria [inaudible]? 

ZAMYLA CHAN: tr fila Taula, taula a continuació td columna. D'acord. 

AUDIÈNCIA: Sí, és dades de la taula. 

ZAMYLA CHAN: dades de la taula. Sí 

AUDIÈNCIA: És una fila en la qual el fila es tracta com una columna? 

ZAMYLA CHAN: Ho sento. Pot repetir això? 

AUDIÈNCIA: Com visualitzar files? 

ZAMYLA CHAN: Com visualitzar files en quin tipus de forma? Estàs parlant d'aquests files d'aquí o de les files tr? 

AUDIÈNCIA: Les files. 

ZAMYLA CHAN: Aquestes files aquí? M'imagino això com Executo la meva consulta. I diu, bé, tinc ja sigui de 0 a n quantitat de files que coincideixen amb els criteris que havia consultat. Així que tinc un nombre de files. Així files, les files, botigues $ cadascun una de les files d'una matriu. Així que fins i tot si és només un d'ells, és encara una sèrie de files que coincideixen amb ella. 

Així doncs, per exemple, aquest és similar a quan vostè desgavellada la memòria cau dels usuaris. I els criteris allà era on ID és igual a l'ID de sessió. Hi ha realment només una fila que podria coincidir amb això. Però encara files acabem de tornar d'una fila. Així que si has d'anar a files, l'índex 0, la memòria cau d'índex per realment arribar al seu cau. 

AUDIÈNCIA: És la funció d'impressió en eco de la mateixa cosa? 

ZAMYLA CHAN: Si. Sí Imprimir un ressò. 

AUDIÈNCIA: És el bucle foreach la única forma d'índex en files? 

ZAMYLA CHAN: És un bucle foreach l'única manera que pugui iterar per les files? No També pot utilitzar un bucle for, sempre que vostè sap la longitud de la matriu de la fila. 

AUDIÈNCIA: Pot accedir-hi utilitzant una fila com [inaudible]? 

ZAMYLA CHAN: Així no es pot accedir-hi sols recórrer fila si vostè no té un bucle foreach sempre que no s'ha declarat fila. Sí Sí, en el blanc. 

AUDIÈNCIA: Llavors, què tr i td fa? 

ZAMYLA CHAN: Així que tr i td són etiquetes HTML. TR indica el començament d'una fila de taula. I cada TD indica un columna de dades de la taula nova. 

AUDIÈNCIA: Per a una imatge visual del que una fila és com, imagineu l'SQL, com que tenen una fila. [Inaudible]. 

ZAMYLA CHAN: Si. Això és un gran punt. Pots visualitzar files com s'acaba de com en una taula d'Excel, només la llista de les files. D'acord. Està bé. Així que ara que hem repassat seleccioni, si no hi ha més preguntes, anem a anar a inserir. Així que si jo volia inserir en alguns taula i inseriu determinada columna valors, jo podria ficar-me en Ravenclaw l'any 7. Però de vegades hi pot haver duplicat valors, com vam veure en pset7 quan van ser actualitzant el nostre portafoli. 

Així que en aquest cas, volem que s'utilitzen en Duplicate KEY UPDATE, perquè no ho fem emmagatzemar múltiples files amb el mateix valorar sinó actualitzar-lo. Llavors en realitat tenim l'actualització, que no és un inserit. És només una actualització, on s'actualitza en un cert taula amb un dau criteris i després, finalment, eliminar, que fa una cosa molt similar. 

AUDIÈNCIA: Podria breument repassar la còpia de la clau? 

ZAMYLA CHAN: Si. En essència aquí, tinc INSERT INTO Gringotts, és, galions, aquests valors. Però Identificació, presumiblement, és una clau única valor establert en la taula de MySQL. Així que si ja he dit ID de configurar, llavors no puc inserir una nova fila. Així que si no existeix ja, llavors he de actualitzar-lo. Al centre en el blanc. 

AUDIÈNCIA: Així inserir, actualitzar, eliminar, i selecció, són els disponibles localment [inaudible]? 

ZAMYLA CHAN: Llavors inseriu, actualització, eliminació i seleccionar són totes les consultes SQL. Així que quan vostè està utilitzant SQL, tindràs els disponibles. 

AUDIÈNCIA: Tornar als últims concursos - hi havia una pregunta que tractava de si vostè tenia una taula i va voler inserir resultats de les proves en un i s'insereix el seu nom, així que no et deixa [Inaudible] puntuació de la prova del seu amic. Com fer això amb inserció? 

ZAMYLA CHAN: tant el dubte era sobre una pregunta anterior de meitat de període. No estic al corrent dels quals un que és en aquests moments. Així que potser després, si vols venir i mostrar, llavors jo puc sens dubte li donarà consells. Però parlant de coses d'inserció, com tenint la qualificació d'algú quan no deu, parlarem de Els atacs d'injecció SQL. Així que un atac d'injecció SQL és essencialment on algú pren avantatge de la baixa seguretat de la camí que està prenent en les dades. 

Així que aquí, igual que en les finances CS50, quan ha entrat com podem entrar en un nom d'usuari en el formulari d'accés, el primer quadre de text i a continuació, introduïu una contrasenya. Potser el nostre codi PHP pot tenir un aspecte alguna cosa com això, on $ usuari és el nom d'usuari i contrasenya de les dades després és la contrasenya de post-data. I aleshores només executem la nostra consulta, per exemple, OK, bé, la nostra consulta es va a seleccionar dels nostres usuaris, on el nom d'usuari és la un que es van sotmetre. I la contrasenya és la contrasenya, el que significa que les contrasenyes coincideixen. 

Ara, què passaria si en lloc de realment la presentació d'una contrasenya real, igual que 12345 i endevinant pua que diu contrasenya i que intenta tallar la seva compte, què passaria si en lloc van presentar aquest. Podrien escriure potser endevinar una contrasenya. I després anaven a acabar la cita a continuació, escrigui o 1 = 1. Això seria passejar directament en l'SQL consultar a veure alguna cosa com això. Seleccioneu entre els usuaris on nom d'usuari = Dents i contrasenya iguals lliri o 1 = 1. 

Així que, o la contrasenya de compte ser correcta o 1 = 1, que sempre és cert. Així que en aquest cas, bàsicament, un usuari pot prendre avantatge d'això i, inicieu la sessió si mateixos i truc el compte d'algú. Així que per això volem evitar algú ha de fer això. Però per sort, la funció de consulta per passant els marcadors de posició es durà càrrec d'això per a vostè. A més, en general va mai vol de presentar efectivament les contrasenyes a si mateixos. És per això que amb hash o xifrat en les finances CS50. 

AUDIÈNCIA: El qüestionari passat va parlar sobre les cadenes d'escapament de MySQL. Hem de preocupar-nos per això? 

ZAMYLA CHAN: Aquesta és una bona pregunta. Les cadenes d'escapament de MySQL és sens dubte, un la funció que es va utilitzar a la nostra consulta. Però sens dubte mirar això. Jo diria que això és un joc just per saber que el que es necessita per trucar a aquest funcionar en una corda. Sí, Belinda? 

AUDIÈNCIA: Com saps quan és cometes simples o dobles? I també, em sento com en la conferència que esmentat alguna cosa sobre no tenir la [inaudible] o alguna cosa o el segona cometa simple al final. Crec que ell va assenyalar en la conferència que que se suposa que tenen apòstrof 1 i després no tenir apòstrofs o alguna cosa així. 

AUDIÈNCIA: [inaudible]. 

AUDIÈNCIA: La cosa és l'últim single cita allà en aquell segon quadre no hauria d'estar allà. [Inaudible] Perquè quan vostè pren aquest últim single Citant a terme i que compleixin aquestes per al contingut on la clau és, si vostè ha de consulta, hi ha una sola cita a al final ja. Vostè vol utilitzar aquesta cometa simple com la que s'enfronta l'un [Inaudible]. Llavors, què és en realitat en aquest text caixa no ha de tenir això. 

ZAMYLA CHAN: Vaig a canviar això. D'acord. Si no hi ha preguntes, llavors ho faré passar per alt a José parlar sobre JavaScript, etc. 

[Aplaudiments] 

JOSÉ ONG: Així que s'estan executant una mica enrere. Així que si vostè ha de deixar, això està bé. Però li demanem que mantingui els seus caps cap avall si estàs en el medi, de manera que no bloquegi la càmera i utilitza la porta de darrere si cal. Jo sóc Josep, per cert. Hola. Prova, prova. Dan, és tan bo? Genial. 

Així que el vídeo també es publicarà en línia per a aquells que ha de marxar ara. Awkward. D'acord. Així revisió del qüestionari. Aquest és un gat. Ara, JavaScript, el que potser no és aww com per a alguns de vosaltres. D'acord. Així que això és el primer, recorden des Zamyla. Recorda que PHP és executar al servidor. I moltes vegades, vostès van escriure bucles en PHP per imprimir HTML, oi? Així que una vegada que s'executi el codi, que Sortida HTML que imprimeixi s'envia a l'usuari. I una vegada que això passa, no més de PHP pot executar-se, llevat que torni a carregar la pàgina, de Per descomptat, que reexecutes el PHP. Però una vegada que imprimeixis que HTML, no pots anar enlloc. 

Així que l'HTML s'envia a través per a l'usuari, que és el navegador per aquí, on Milo està utilitzant l'ordinador. I tan bé, hi ha diverses coses una vegada que enviem HTML per a l'usuari. De vegades volem fer alguna cosa com en fer clic en alguna cosa, volem caixes d'alerta perquè aparegui, aquest tipus de interaccions, com quan es prem el clau, en fer clic en alguna cosa al pàgina, vull que alguna cosa succeeixi. Bé, no es pot tornar a executar PHP codi una vegada que l'HTML s'estableix. Llavors, com fer això? 

S'introdueix un nou llenguatge anomenat JavaScript, que s'executa al navegador que li permet fer les coses a HTML després de rebre ells des del servidor. I és per això que en diem un costat del client llenguatge de programació. Treballa en el seu ordinador - el client. Una pregunta sobre que tan lluny? Aquest paradigma té sentit per a la gent? D'acord. Bé. Està bé. Així que el primer a tenir en compte Es JavaScript és PHP. 

Ells tenen una sintaxi diferent, que entrarem en. I tenen usos molt diferents. JavaScript, de nou, per a la seva navegador, per al client. Server s'executa en algun lloc d'una altra persona ordinador que envia informació a vostè, oi? Així que si li demanem que escriure codi PHP en una pregunta d'examen, no escrigui JavaScript i viceversa. Vostè acaba de perdre punts, i no va a tenir raó. 

Així que entrarem en alguns diferències de sintaxi - JavaScript a la esquerra i PHP a la dreta. La primera cosa que vostè notarà amb JavaScript declarem les variables amb la paraula clau var - V-A-R. PHP utilitza el signe de dòlar, com Zamyla discutit anteriorment. Per a declarar un associativa matriu, veiem la sintaxi familiar a el costat dret amb PHP. Al costat esquerre, en lloc utilitza claus. I després hi ha les seves claus a l'esquerra. Llavors vostè té un còlon. I llavors vostè té els valors que desitgi. 

Així que aquesta és la forma en que ho faria en PHP en el costat dret amb què segon línia que comença a Milo. I així és com ho faries en la costat esquerre de JavaScript si desitja el que anomenem un objecte. I els objectes en JavaScript són només matrius associatives. Així que si vols tenir accés als camps, en PHP utilitza aquesta sintaxi suport. I d'aquesta manera, es pot reassignar aquest camp propietari a Lauren. 

Bé, en JavaScript, si un vol accés a un camp i canviar-lo, vostè pot utilitzar la sintaxi amb punt. També podeu utilitzar la sintaxi de suport. Però no es pot utilitzar el dot sintaxi en PHP. Això no funcionarà. Només funciona en PHP. I, finalment, per imprimir les coses a l' consola, utilitzeu console.log, que vostès utilitzen una gran quantitat de pset8. Pot console.log això. 

Si voleu imprimir una matriu en PHP, vostè ha d'utilitzar la impressió r. I en el costat dret, es veu Haixix concatenació de cadenes d'allà. Algú li va preguntar abans. Jo ús un plus en JavaScript. Si vull alguna cosa concatenar en PHP, jo faig servir el punt. Aquests són diferents. Si estàs escrivint codi PHP, no utilitzi un plus. Si estàs escrivint JavaScript codi, no escrigui un punt. Serà equivocat. I estaràs trist. 

Així que les diferències de sintaxi. Conegui al seu sintaxi, perquè si ha de escriure una pregunta i utilitza la sintaxi L'idioma equivocat, no funcionarà. I estarà malament. Així que anem a parlar una mica de control diferències de flux, com ho fa servir bucles en cada un d'ells. Zamyla ser per dalt del costat dret. Les coses al costat dret ha d'estar familiaritzat. Vegem a la banda esquerra. 

Quan s'utilitza per n bucle en JavaScript, la variable de bucle, var i d'allà, llaç sobre les claus de la matriu. Així que vostè vegi el nom, la casa, i el paper. Si console.log i, rebut nom, casa, i el paper. Aquestes són les claus. En JavaScript, un bucle foreach va en els valors d'aquesta matriu. Llavors t'adones que tots dos són i. Però aquí al costat de PHP, s'imprimeix a Milo, CS50, i la mascota. Aquests són els valors en PHP. 

Així que aquests són com aquests dos són diferents en els diferents idiomes. Així que si vostè està utilitzant un foreach loop, no assumeixi que es li dóna les claus. I si vostè està utilitzant un llaç per n, no ho facis assumeixi que li dóna els valors. Això té sentit fins ara? La següent diapositiva es mostrarà com es pot accedir a tot el contrari en cada un d'ells. 

Bé, si vostè té la clau en JavaScript i desitja que el valor de sortida, que acaba d'índex a la matriu amb això. Llavors Milo d'i li aconseguirà el vostè vol - els valors. Hi ha una sintaxi diferent en PHP. Si realment vols saber-ho, no ho sé pensem que hem mostrem a vostè encara. Però si vostè està interessat, pot utilitzar aquesta sintaxi addicional a la dreta costat que en realitat li permetrà obtenir la claus en PHP quan utilitzeu un bucle foreach. Així que una mica de trivialitats si vostè està interessat. 

Així que això és només per a demostrar la diferències entre aquests dos bucles. No els barregi fins quan estàs programar una pregunta. Una pregunta sobre això. Genial. Està bé. JavaScript objectes. Vaig parlar sobre ells. Són com matrius associatives. L'única cosa que m'agradaria que tingui en compte aquí és que un valor en un associativa matriu pot ser qualsevol cosa en JavaScript. 

Fins i tot pot ser una funció, com allà. Tinc una funció que és un valor d'una clau. I si vull cridar a aquesta funció, Acabo d'accedir a l'escorça. I llavors em vaig posar entre parèntesis després d'això. I això funciona. Així que alguna pregunta? No? D'acord. Bé. JavaScript, com PHP, està vagament escrit. Què significa això? 

S'ha tipus. Però quan es declara una JavaScript variable, es diu var i. No ho diu. Això no és res. Vostè acaba de dir que és una variable. I després JavaScript s'encarregarà de la tipus sota el capó per a vostè. Podem convertir lliurement entre tipus a causa d'això. Així que comença com una sèrie en aquest cas. I després tinc una cadena. I afegeixo jo a ella. I jo reassignar de nou en i. 

Així que en aquesta primera línia, i és el nombre. En la segona línia, ara es converteix en un cadena després de fer la reassignació. I aquí, només estic concatenant aquest número a la cadena. Així que ja veus que tot i que jo era un sencer en la primera part, és una espècie de com ser convertit a un cadena i després s'afegeix en aquesta cadena hola. I això és el que vull dir per la tipificació solt. Això és que permet convertir entre tipus molt fàcilment. I no llança advertències a vostè com C fa. 

Així que ara conté hola 123 a la cadena. Següent. També podem comparar lliurement entre els tipus. Així que si vostè només ha d'utilitzar ==, molt com en PHP, JavaScript fa una cosa semblant. La cadena 123 és el mateix que el nombre 123 quan s'utilitza igual doble. Quan s'utilitza iguals triples, també vol assegurar-se que el tipus és el mateix. Així que, ja que és una cadena i que és un nombre, tot i que tots dos són 123, quan s'utilitza el triple iguals, s'obté falsa. En el doble és el mateix cas, s'obté cert, perquè igual doble no ho fa preocupar-se pel tipus. Iguals triples es preocupa pel tipus. Preguntes? D'acord. 

I una altra cosa sobre JavaScript està abast és una espècie de mundial a menys que estigui en una funció. I funciona de la mateixa manera en PHP realitat. Així que anem a anar a través d'aquest exemple. Em vaig posar i 999. I després d'entrar en aquest bucle. Així que si estic imprimint i en el present per bucle, espero 0, 1, 2, 3, 4. Arribo a i = 4. Incrementa i ara a 5 al final del bucle per. I llavors es trenca fora d'ona, ja que no compleix el condicionar més. 

Què et sembla que el proper console.log imprimeix? Així que això és el que faria en C. En C, perquè si tens com var i fora i vostè té var i dins d'un bucle, com un bucle, llavors fa que sigui tal que que és com abast que els dos d'i són diferents. En JavaScript, ho farà just el tracten com el mateix i. Tinc 5, perquè aquest era el valor després que va sortir fora del bucle. Així que aquestes is són els mateixos i. Això té sentit? 

Bé, té sentit des un punt de vista de JavaScript. Però el mateix paradigma no traslladarà a C. Tenen diferents regles d'àmbit. Sí 

AUDIÈNCIA: [inaudible] fora de la funció [inaudible]? 

JOSÉ ONG: Així que fora de la funció? Així que vaig a arribar a això en un segon. Així que anomenem foo (i). Això passa en i foo, increments , I després ho registra. Així que era de 5. Per tant, es converteix en 6. Però del que estic parlant és de que jo en aquesta funció. Com que és un paràmetre, és àmbit d'aquesta funció. Així que un cop fet, m'aixeco de la qual funció, ara se n'anirà tornar a la vella i. Que només està en l'àmbit, ja que està en una funció. I tenim l'abast i funcions. Però no tenim abast fora de funcions en JavaScript. Això té sentit? Sí Pregunta. 

AUDIÈNCIA: Same [inaudible]? 

JOSÉ ONG: Així que si. En PHP, que és el mateix tipus de coses. Hi ha una petita subtilesa en realitat. Però vostè em pot preguntar sobre que després de la revisió. Segur que no necessita saber que la subtilesa de la prova. Per a tots els efectes, com les variables, global i PHP, llevat que estan en una funció, mateixa cosa en JavaScript. Sí 

AUDIÈNCIA: Per què està permès en JavaScript i no en un altre lloc? 

JOSÉ ONG: Llavors per què es va permetre en JavaScript i no en C? És que tot el que se li va ocórrer JavaScript decidir que estava bé en JavaScript. Així és com un llenguatge de programació convenció com diríem. Sí 

AUDIÈNCIA: Llavors per què anar de 6 a 5? 

JOSÉ ONG: Així que es va anar 6-5, perquè quan vaig passar jo en foo, que i dins foo ara té com abast foo, perquè hi ha un marge en funcions en JavaScript. Però una vegada que surti d'aquí, perquè va ser àmbit de la funció, només sóc utilitzant l'i regular que estava dins la resta del flux de control. Té sentit? Puc passar? Està bé. Genial. 

L'acceptació d'això és objectes es passen per referència. Ja saps el que passa una matriu en C poguessis realment modificar la matriu? És la mateixa cosa en JavaScript. Si pas un objecte, en aquest cas, passat Milo en aquesta funció catify. Milo comença. El seu nom és Milo plàtan. Em passi aquest objecte en una funció perquè és un objecte, un associativa matriu en JavaScript. 

En realitzar una operació en aquesta funció, ho farà realment canviar l'objecte. Així que això només passarà per als objectes en JavaScript, el mateix que passa per arranjaments dins del nom de C. Així que Milo en realitat convertir-se en gat ara. Això té sentit? Així que això només funciona per als objectes. Els objectes es passen per referència. Sí 

AUDIÈNCIA: Estàs dient que en contrast a la variable i. 

JOSÉ ONG: Si. Què variable i només estava un nombre, no? És com en C quan es passa un Integer, es fa una còpia. I quan es passa una matriu, que en realitat canvia la matriu real en C. El mateix passa amb JavaScript en aquest cas. Està bé. I al costat, Milo és trist perquè ara és un gat. Això va ser en realitat Milo després algun viatge al veterinari. 

Llavors, com fem servir JavaScript en una pàgina web? Podem incloure-ho. Aquest és el codi HTML amb les etiquetes de la tira. Així que tinc strip tags allà. I llavors em vaig posar una mica de JavaScript codi dins de les etiquetes de script. I llavors s'executa aquesta. Quan només ho faig d'aquesta manera, és anomenat JavaScript inline. És una mica complicat, ja que el Javascript és en realitat en el codi HTML. 

Una millor manera de fer això, molt millor, és escriure el teu JavaScript en una arxiu extern i, a continuació, proporcionar l'etiqueta script amb una font. I això va a anar a aquest arxiu JavaScript i llegir el codi JavaScript de aquest arxiu al seu lloc. I d'aquesta manera, vostè no té una gran quantitat de JavaScript al començament del seu Arxiu HTML, el que fa És realment complicat. Vostè acaba de posar en un altre lloc. I després es va a llegir des d'allà. Això té sentit? 

Matèria de col · locació. En aquest cas particular, l' guió està abans que el cos. Així que quan jo faci això, no hi ha res en el cos encara. Potser això et farà una mica més sentir quan mostro la següent part. En aquest cas, la seqüència de comandaments ve després de la div. Així que el div apareix en realitat a la pàgina primera. Just aquí, en aquest petit cercle vermell, veus que aparegui el text. I llavors l'alerta apareix. 

En el primer cas, perquè el guió va ser abans de la div, el alerta apareix en primer lloc. I llavors el div es presenta després de rebutja la caixa. Així que l'execució importa. Així que anem a mantenir això en ment. Això serà important aquí a una estona. D'acord. Tan bé, com s'espera fins al pàgina completa es carrega abans de executar algun codi? Entrarem en això una mica poc més tard també. Però només mantenir aquesta posició assumptes en ment per quan arribat a una altra diapositiva. 

Així arribem a DOM ara. I el que és DOM? Així que si ens fixem en el codi HTML, és només un munt de text a la pantalla. Llavors, com sap que JavaScript Aquest és un element HTML? Així que hem de tenir una mica de memòria representació d'aquest estructura que tenim. I cada vegada que tenim això en memòria representació en JavaScript, que anomenem que el DOM. I és només una manera de que la gent va decidir que hem de representar aquesta Estructura HTML com. 

I què té això DOM sembla? Bé, en representació de la memòria, prenem aquest text. I ens convertim en la memòria representació. Així que aquest és l'HTML. Així que ens trobem en primer lloc que tots els Arbre DOM té un document. S'assembla a un arbre. I el document conté el codi HTML etiqueta, en realitat tot dins d'això ara. El tag HTML té dos fills. Té un cap. Aquesta cap, si ens fixem en la sagnia enllà en la manera com està estructurat entre les etiquetes de tancament, el cap té un fill. El nen és el títol. Exactament. 

Ara, tenim un nen cos. I després que el cos té una nen va trucar a la família. I que la família té tres fills - més antic, mitjà i menor. Així que vostè ha de saber dibuixar un diagrama així quan ens preguntem com per dibuixar un diagrama quan donem que el codi HTML de l'esquerra. Sàpiga com produir l'arbre DOM. I dins d'aquestes coses, només hi ha una mica de text, que he representat com petites caixes. 

Aquesta estructura d'arbre DOM fer sentit i quin és el DOM? Llavors, què signifiquen les sigles de la pàgina Què busques? Per aquí, la pàgina per allà en aquesta etiqueta representa un etiqueta de paràgraf en HTML. Així que vostè pot mirar cap amunt. Però només significa que és una espai per al text. I té una mica de CSS estil predeterminat, perquè és una etiqueta de paràgraf. Però en realitat no et preocupis per que una part massa. Només sé que és un marcador de posició d'algun text. Sí Consulta? Sí 

AUDIÈNCIA: Vostè acaba d'esmentar CSS. La família de hash i el hash tot això és, bàsicament, en representació dels ID en CSS? 

JOSÉ ONG: Sí, exactament. Vaig a arribar al que aquests hashes significar en un segon. Quan Angela es va acostar CSS, ella parlat de selectors CSS. Aquests són els selectors CSS que que estava parlant. Sí, Rob? 

ROB Bowden: També m'agradaria comentar que DOM dins de l'etiqueta del títol és també un node de text. 

JOSÉ ONG: així. Així que dins de l'etiqueta del títol, Tinc una mica de DOM text. Així que en realitat, aquest títol ha de tenir com una petita caixa que surt d'ella també. Però en realitat no importa massa en aquest cas. En realitat no es preocupen pels nodes de text, com els anomenem, massa. Bé, el que fem. Pel que sembla, el que fem. I vaig a arreglar això quan Pujo de nou. Això té sentit? 

Llavors, com podem treballar amb el DOM? Cada vegada que s'ocupa de la DOM en JavaScript, hi ha dos passos. Seleccioneu un element DOM. I després fas les coses a ella. Així que en aquest cas, de manera abstracta, no tinc seleccionat l'element mitjà. I a continuació, un exemple de fer les coses a ella es canvia el text. Això solia ser Bob. Ara bé, el que vaig fer amb ell va ser que vaig canviar Bob a Milo en aquest cas. 

Així que com podem fer això? Com fem la selecció? I com fem el fent coses per la cosa una vegada que hem pres això? Bé, la forma en què vostès han après en aquesta classe és l'ús d'alguna cosa que anomenada jQuery. Llavors, què és jQuery? jQuery és una biblioteca que fa JavaScript més fàcil d'escriure. Així que algú es va prendre el temps i va escriure jQuery. 

jQuery és en realitat escrit en JavaScript. I després perquè van fer això, ara té un munt de funcions que podem usar que fan que la nostra viu realment fàcil. Quines són algunes de les coses que fa? Això fa que la selecció elements més fàcil. Es fa el canvi d'HTML, l'addició de les classes més fàcil. Es fa més fàcil l'Ajax. Anem a arribar a això en un segon. 

I és anàloga a biblioteques C. Així que vostè inclou string.h, et strlen. Vostè aconsegueix strcpy, totes aquestes coses. En incloure jQuery, s'obté bona formes de seleccionar elements al canvi coses, etcètera. Vostè aconsegueix una funcionalitat extra que JavaScript no li dóna. Així que jQuery no està habilitat. jQuery és una biblioteca que està escrit en JavaScript que fa JavaScript més fàcil d'escriure. 

Així que jQuery no és una programació idioma. Però és JavaScript. fer. Assegurar-se que rep la seva terminologia correcta. Alguna pregunta? Sí És una pregunta? Està bé. Així que, com utilitzar jQuery? Bé, quan estàs escrivint alguns El codi JavaScript i s'inclou un jQuery a la part superior del seu arxiu com un arxiu de script, s'utilitza el signe de dòlar ara per accedir a jQuery per. I això és diferent de el signe de dòlar en PHP. 

És el mateix símbol que escrigui en el teclat. Però que signifiquen coses molt diferents. Signe de dòlar en PHP significa això és com em declaro una variable. En JavaScript, quan vostè ha inclòs jQuery, representant jQuery. Així que tingues en compte. Així que com podem seleccionar els elements DOM? Bé, quan ho fa el lleig JavaScript manera, s'accedeix al documentar variable global. I llavors vostè aconsegueix element de la família d'identificació. Això és molt llarg i prolix i no gaire agradable. 

O vostè pot aconseguir tots els elements que són una etiqueta p. Això també funciona en JavaScript. Però en realitat mai va mostrar que la sintaxi massa. El que vam demostrar que eres jQuery. Així que tot aquest selector cap amunt cal es va expressar en JavaScript només es posa condensat a aquesta molt bonic dòlar signar família hashtag. I $ p, just on és així. Per seleccionar totes les etiquetes p dins d'una família, posem un espai entre els dos. I ara, tenim tot el p etiquetes dins d'una família. 

I mira familiar? Bé, Angela va parlar de Selectors CSS. Dóna'm un segon. I així, per tal de seleccionar un element, només ha d'utilitzar el mateix que vostè ho faria amb un selector CSS. Si poses un hash davant d'això, se selecciona per ID. Un punt selecciona per classes. Si només tens la cosa sense hashes o punts, seleccioneu aquestes etiquetes. Preguntes. Sí? 

AUDIÈNCIA: Quan fem servir punt en la nostra HTML, és que no jQuery? 

JOSÉ ONG: Dot al nostre HTML és una cosa JavaScript. No és una cosa de jQuery. La forma en què vostès ho van aprendre amb jQuery és utilitzar. HTML. I després va passar el que sigui el codi HTML que serà. Així que vaig a arribar a això en un sol una segona realitat. Llavors, com fem les coses a element un cop hem seleccionat és? Així que això és un exemple de la selecció d'un element. Així que ara, el que volem fer coses per a ella. 

Així que en aquest cas, deixa tornar a la diapositiva anterior. Va ser Bob abans. I jo vull canviar això dins d'HTML a Milo. Així que dic a la funció HTML des de l'element. Aquesta funció HTML està un mètode d'element. I llavors m'adono que Vull que l'HTML sigui. I simplement reemplaça el que hi ha dins aquesta etiqueta amb el que li dono. Sí Consulta? 

AUDIÈNCIA: S'utilitza el hashtag només per al jQuery. [Inaudible] no usaríem això. 

JOSÉ ONG: Sí, exactament. Però no et preocupis massa JavaScript sobre pura. Només vull que vostès se centri en com ho faria amb jQuery, perquè això serà la important part en el concurs. Dreta. Exactament. Així que ja veus que hashtag, de manera que correspon per seleccionar l'element amb el medi ID per això hashtag. Hashtag significa ID. I aquest element té un ID de centre. Així que aquest és l'element que seleccionem. 

AUDIÈNCIA: [inaudible]. signe de dòlar hashtag [inaudible]? 

JOSÉ ONG: Així no. La pregunta és Es pot utilitzar. Valor. I. Valor només funciona en els elements que són entrades. En jQuery, seria . Val, no. Valor. Així que vaig a arribar a un petit exemple que demostra tot això en combinació en un segon. Però crec que això serveix un petit fragment té sentit que la gent fins ara. Vols canviar el codi HTML, cridar al mètode d'HTML. Sí 

AUDIÈNCIA: Pot explicar el mètode de nou? 

JOSÉ ONG: Així que un mètode és només una funció que pertany a un, en aquest cas, un d'aquests elements DOM, perquè es veu que seleccionat l'element primer. En realitat, em va permetre utilitzar el ratolí. He seleccionat el primer element. I llavors vaig trucar a aquest HTML funció que tenia. I a causa d'aquesta funció pertany a això, en diem un mètode. Això és només un nom elegant per a ella. Digues-ho de nou. Així que recordi, es van seleccionar l'element ara. I hem posat a l'interior de la variable element. Corregiu? 

Per això, quan volem canviar el codi HTML a a l'interior, perquè era Bob abans, vol canviar aquest text a Milo. Així que anomenem HTML. I nosaltres diem que el que l'HTML dins aquest element ha de ser ara. I així l'hi canvia per Milo, perquè jo l'hi vaig donar Milo. 

AUDIÈNCIA: Així que estan treballant junts. [Inaudible] 

JOSÉ ONG: Sí, sí. Estan treballant junts. Així que un d'ells selecciona l'element primer. I el segon ho fa alguna cosa a ell. Sí 

AUDIÈNCIA: [inaudible]. Si aquest mètode és diferent de l'HTML vostè té el mètode de la igualtat real. 

JOSÉ ONG: Si. És un mètode diferent. És un mètode diferent. I podem cobrir que en tan sols un segon quan arribem a un exemple. Vull per assegurar-se que accelerem perquè ens estem quedant sense temps. Però ens hem quedat molt per sobre hora actual. D'acord. Genial. Així que si vostè vol afegir una classe, hi ha també un mètode de classe add. Això és només un exemple del que pot fer amb jQuery. Això només se suma una classe. 

Per eliminar-lo, vostè pot trucar a remove. Aquesta és una altra de les coses que pot fer. Així més exemples de coses que pots fer. Així que puc posar-ho en la part superior d'aquesta manera? Benjamí remove. Si només cal executar Javascript al la part superior del meu arxiu, funciona això? Dreta. A causa mitjana no existeix encara. Així que això no funcionarà. Ordre d'execució. Es va a la part superior al davant. Què? 

AUDIÈNCIA: Menors no existeix encara? 

JOSÉ ONG: Si. Benjamí no existeix encara. Exactament. 

AUDIÈNCIA: Vostè ha dit mitjà. 

JOSÉ ONG: Ho sento. Benjamí no existeix encara. I l'altra cosa és que no tinc inclòs jQuery presentar demanar script src. Així que això no funcionarà. En realitat, jo no vaig fer això en la següent diapositiva, que és suposadament per arreglar això. Però la manera com ho fem és JavaScript és impulsat esdeveniment. Així que el que fem és que fem servir un esdeveniment handler perquè això succeeixi. I, llavors, seleccioneu el document establir primer. Dic, està bé, quan el document és llest, jo correré una funció. Així que això és tot el que els mitjans de sintaxi. 

He escollit el document. Ara, quan el document és llest, executeu la funció. I així per aquí quan el document és llest, el que significa que tot l'HTML té carregat, llavors corro a la funció que elimina aquest element. I ara, quan executo aquesta funció que vaig passar a punt, estic garantit que tot l'HTML al pàgina existirà en primer lloc. Sí Consulta? 

AUDIÈNCIA: Quina és la paraula clau event dins de la funció? 

JOSÉ ONG: Així que la paraula clau en el cas funció és només un paràmetre que es passa a la funció per a qualsevol esdeveniment. És només una cosa que s'obté de forma gratuïta. Quan vostè està utilitzant els controladors clau en pset8, aquest esdeveniment podria dir, per exemple, tecla ha premut sobre. En aquest cas, per a un esdeveniment de llest, en realitat no és molt útil. Però per a un esdeveniment de la tecla, és més útil, perquè s'arriba a saber que tecla premuda per la clau per accedir a codi d'aquest objecte d'esdeveniment. Corregiu? Això té sentit? D'acord. Sí Consulta? 

AUDIÈNCIA: Així que pots posar el etiqueta de script més baix? 

JOSÉ ONG: Així que si. Vostè podria posar el guió etiquetar més avall. Però llavors, només es torna realment complicat. I ens agrada centralitzar tota del nostre codi en un lloc. I això ens permetrà fer-ho. Recordeu que abans he dit que hi ha una millor manera d'assegurar que els elements estan a la pàgina abans d'executar el codi? I això és només una manera agradable vol aconseguir això. 

AUDIÈNCIA: [inaudible]. 

JOSÉ ONG: Si. Vostè encara ha de fer-ho, no? Perquè recorda, que va incloure la presentar a la part superior de la pàgina. Així que va a executar en primer lloc abans de s'arriba a la part inferior de la pàgina. D'acord. Així que vostè pot també afegir a una altra persona tipus de controlador d'esdeveniments. Aquest només processa els clics. Quan faig clic a jove, després que s'obrirà amb un avís. Això és només una diferent tipus d'esdeveniment. A diferència de l'esdeveniment ready, ara utilitzar l'esdeveniment clic quan rebi fa clic a un element. 

I així, en aquest cas, recordeu que el clic controlador està connectat a menor. Pel que només passa quan Faig clic en els més joves. I en l'altre, l'esdeveniment ready s'adjunta al document. Per tant, espera que el document per estar llest. Té sentit? Crec que puc seguir endavant. Sí Consulta? 

AUDIÈNCIA: [inaudible]. en aquest cas s'utilitza [inaudible]. 

JOSÉ ONG: Oh, sí, perquè en aquest cas, he d'esperar que els més joves element perquè aparegui a la pantalla primer abans que pugui connectar un controlador de clic a que, pel que em vaig posar dins d'un document llest. D'acord. I al costat, així que això és un gran exemple de com li agradaria combinar tot. Això és només un exemple de validació de formularis que has vist a classe. Així que anar pas a pas a mesura vostè va a través d'aquest. I serà totalment bé. Acabo de llegir el de dalt a baix. 

Tinc un formulari a la part inferior. Quan el document estigui llest, adjunto un presentar manejador a la forma, de manera que quan presenti el formulari, si els valors dins de cadascuna d'aquestes entrades. I puc comprovar si està en blanc. Si està en blanc, torno falsa, perquè No vull per enviar el formulari, perquè la forma és erroni. Si la contrasenya està en blanc o és menys de vuit caràcters, no em sotmeto la forma, perquè això també és dolent. I el fals retorn només prevé la forma de presentació i anar a una nova pàgina. 

I és d'esperar, això té sentit. Crec que vostès han de caminar a través d' aquest codi pas a pas pel seu compte. I una vegada que vostè entén el que el selectiu elements i fer coses a ella en realitat implica, això farà que molt sentit per a vostè. Sí? 

AUDIÈNCIA: Què fa el name = significa nom d'usuari? 

JOSÉ ONG: Així que el nom = nom d'usuari i name = contrasenya només significa miri el atribut del vostè està seleccionant. I llavors això ha de coincidir. Així que vam entrar al registre. I després ens fixem en totes les entrades i el registre. I després escollim el que el nom atribut és igual al nom d'usuari. Així que el primer selector només selecciona l'entrada de nom d'usuari. I aquest segon selector només selecciona la contrasenya d'un, perquè aquests tenen seus atributs name estableixen com ho se suposa que han de ser. Consulta? 

AUDIÈNCIA: A la presentació, com funciona el part inferior a resoldre la part de dalt? 

JOSÉ ONG: Així que això és perquè del controlador d'esdeveniments. Així que estem a l'espera d'un esdeveniment de presentar que és acomiadat de la forma. I això és tot el que és present. Per què dic presentar-hi? Diu, quan s'envia el formulari, Em surt un esdeveniment presentarà. Així que permetin-me que interceptar i a continuació, executeu aquest codi al seu lloc. Sí? 

AUDIÈNCIA: Per què tens tenir esdeveniment funció? Per què no pot vostè acaba de [inaudible]? 

JOSÉ ONG: Perquè en JavaScript, han de declarar les funcions. Així és com funciona en JavaScript. Vostè ha de dir que va per executar una funció. Així que vostè està dient és que ets esperant una funció aquí en lloc de només claus. 

AUDIÈNCIA: I la funció és el que segueix? 

JOSÉ ONG: Si. La funció és el que està a l'interior les claus després de aquesta paraula clau funció. Sí? 

AUDIÈNCIA: [inaudible]. 

JOSÉ ONG: Per presentar? 

AUDIÈNCIA: No, per a la funció sense l'esdeveniment. 

JOSÉ ONG: Si. Així que sense l'esdeveniment, vostè pot tenir això. Si no necessita l'esdeveniment, a continuació, pots ometre. Però si ho fa, llavors vostè només cal posar aquí. Sí Una pregunta ràpida? 

AUDIÈNCIA: [inaudible]. 

JOSÉ ONG: Si. Perquè el que ha de fer, el document.ready només diu esperar que tots els el codi HTML de la pàgina es carregui primer. I en general, vostè vol que els seus elements en el seu lloc abans d'executar qualsevol codi. Està bé. Hem d'arribar a l'Ajax. No tenim molt de temps. Així pros i contres. Javascript és més fàcil tractar escriure amb jQuery. Però jQuery és una mica lent. 

És com PHP és més lent que C, perquè ha interpretat. I jQuery és una mica més lent que JavaScript, ja que fa un munt de les coses sota el capó. I pel que si vostè està utilitzant jQuery, és només una mica més lent que JavaScript, encara li dóna bon elegància. I, finalment, l'Ajax. Fins ara amb l'Ajax, que ho has vist Ajax en termes de pset7 encara, perquè quan ho fa, vostè sotmet una forma de cotització. Es carrega una nova pàgina. Perquè pugui obtenir aquest gran centelleig blanc a la pàgina, mentre que càrregues segona pàgina, correcte? 

Seria molt bo si vostè no tenir aquest flash. Igual que Facebook, si vostè acaba de desplaçar-se a la part inferior, s'afegeix nou contingut sense actualitzar la pàgina sencera. Així que alguna cosa així anava a ser agradable. Aquest és el codi JavaScript a la banda esquerra. Vostè obté el que hi ha dins d'aquesta entrada. Vostè rep la informació d'estoc de Yahoo! I després de fer una gran cadena que diu, OK, aquest és el missatge que vull per mostrar a la pantalla. I després poses aquest missatge dins d'algun element HTML que que apareix a la pantalla. 

Així que això és tot el que està passant aquí. Així que, bàsicament, perquè tot això és JavaScript i no és necessari per executar Ja PHP, aquest s'ha d'assegurar que la pàgina no s'actualitza. Així que això és només una idea abstracta que jo estic dient aquí per ara. La idea abstracta és que si ho fas tot en JavaScript, que no tenen un actualització de la pàgina. Però, com realment fer això? 

Bé, en realitat, parlarem de un problema amb aquest primer. Un problema és en JavaScript, execució és sincrònica. Així que cal esperar que una line per acabar abans que vostè executarà la següent línia. I si em vaig a Yahoo!, i els seus servidors són molt lents, i els pren tres segons per Torneu-me aquest estoc info? Quan vaig arribar a aquesta línia de preus, si el execució és sincrònica, ja que és per Per defecte, el que només va a fer és el navegador va a estancar per tres segons. I tu no seràs capaç de fer res mentre es posa aquestes dades. Serà congelats. 

I això és dolent. Vostè no desitja que un usuari tindrà una pàgina web congelat. Corregiu? Això és dolent. Tots estan d'acord? Si estàs navegant per Facebook i es es congela i no es pot fer res, aconseguir realment frustrat. Així que la solució és que fem alguna cosa asíncron lloc. Així que tot això asíncron diu és, jo faré aquesta URL per algunes dades. I després vaig a seguir endavant. Jo només vaig a seguir executant qualsevol codi que va ser després d'això. 

I llavors cada vegada que les dades estan a punt, llavors vaig a processar-la. Això és tot el que està dient. 

AUDIÈNCIA: Ajax només fa codi asíncron? 

JOSÉ ONG: És un asíncron camí de la recerca de dades. Així que la primera cosa sobre Ajax és que em permet recuperar les dades d'un lloc web extern. I el segon és que s'assegura que la meva pàgina no es cala mentre estic anar a buscar aquestes dades. Aquesta és la part asíncrona de la mateixa. Perquè va a un altre lloc, perquè ho dic jo segueixo passant mentre que és anar a buscar que les dades, que fa que sigui asíncron. Segueixo execució. 

Així que tingues asíncron idea en ment. I et vaig a mostrar el que la diferència és. La versió sincrònica està a la banda esquerra. La versió asíncrona està al costat dret. Miri els números per veure quin passos corresponen al que s'executa en cada línia. Allà, l'alerta apareix en primer lloc. Perquè aconseguir info de Yahoo! presa de tres segons, que s'ofegui durant tres segons. I llavors s'avisa al preu després d'aquests tres segons. 

Així que ara, que els programes d'alerta fins en aquell moment - tres segons polz I llavors s'avisa per després d'això. Pel que només va pas a pas. És com el que vostès acceptaria, correcte? Amb l'execució asíncrona, que l'avisi primer. Després et vas a aquesta URL. I dius, vaig a només pregunta per les dades. I després vaig a processar més tard. Per tant, s'executa immediatament l' següent línia després de fer que sol · licitud asincrònica. 

Així que uns 0,001 segons, veurà hi alerta. Executar aquesta funció, bye alerta. I perquè jo vaig fer una promesa que jo processaria les dades més tard, el que que passa és que quan les dades es torna tres segons més endavant, llavors corro que funció que tinc allà. Sí? 

AUDIÈNCIA: Podria vostè especificar o aclarir el que significa Ajax? 

JOSÉ ONG: Així Ajax és una manera que si necessiten dades quan estic en un lloc web i jo no volen actualitzar la pàgina, a continuació, Jo ús aquesta tecnologia anomenada Ajax. Això només vol dir essencialment, va recerca dades d'un altre lloc web. I fer-ho d'una manera que només no estancar la meva pàgina web. 

AUDIÈNCIA: Així és que una inherent part de JavaScript o jQuery? 

JOSÉ ONG: Així que algú va escriure una manera de fer aquesta en JavaScript fa molt de temps. En un moment donat, no existia. I pel que algú va inventar aquesta tècnica per permetre que les persones que sol · licitin aquestes dades d'aquesta manera. I ells van escriure algunes coses que ho faci per vostè. I jQuery només et dóna aquesta molt bona manera de fer-ho amb aquests $. obtenir la funció. ¿Preguntes? Puc respondre a preguntes sobre Ajax després també. Vaig a ser aquí. 

Així que anem a buscar-dades sense actualitzar la pàgina. I farem això en de manera asíncrona que no es congela la pàgina. Massa llarg, no va llegir si això explicació era massa llarg per a vostè. Així que finalment, cross-site atacs de scripting. Vam veure això amb Zamyla. Si en la meva base de dades que algú té aquest nom, que és aquesta etiqueta script, i jo tenir una mica de codi a la meva pàgina que s'imprimeix els noms de les persones en una fila, o he una mica de codi JavaScript que s'insereix aquest nom a la pàgina, ho aconsegueix HTML produït? Bé, jo imprimeixo l'etiqueta HTML. Imprimeixo totes aquestes etiquetes. 

Arribo a la part en què estic d'impressió sortir amb els meus amics. Imprimeixo a Lauren. S'imprimeix Milo fora. I llavors el meu nom a la base de dades és posterior guió unflattering estat de Facebook. Perquè jo inserir això a la pàgina perquè sembla que JavaScript quan aquesta pàgina s'envia a l'usuari, el fitxer és executat com JavaScript. I això és el que anomenem un atac de cross-site scripting. Algú posa informació maliciosa en la seva base de dades que pugui correspondre alguna cadena addicional o alguna cadena JavaScript. 

I quan s'imprimeix a la pàgina d'aquesta manera, llavors, què que passa és que mal codi és executat que jo no tenia la intenció a què s'ha pogut executar. I això és tot un cross-site atac de scripting és. I la manera d'aconseguir al voltant això és com Zamyla va dir. Vostè acaba d'embolicar les coses en HTML caràcters especials. I aquest HTML caràcters especials és un PHP funció que eviti aquest tipus del que li passi a vostè si vostè té un maliciós cadena a la base de dades. Simplement escapa, de manera que no fa aconseguir interpretat com HTML. Substitueix als petits suports amb el que anomenem entitats. I passem això en la conferència també. Així que crec que vostès haurien de tenir una bona comprensió d'això. Preguntes? Sí 

AUDIÈNCIA: Llavors, com ho faria la [inaudible]? 

JOSÉ ONG: Digues-ho de nou. 

AUDIÈNCIA: Com seria el monitor - 

JOSÉ ONG: així. Així que hi ha alguna cosa que diu, quan Em registre, escriviu en nom meu. Acabo d'escriure en aquest camp, em dic stript missatge poc favorable Facebook estat a prop etiqueta de script. I això només aconsegueix posar a la base de dades, perquè no puc dir que algú al món no té un nom amb una fletxa cap a l'esquerra en ell o la escriptura de la paraula en ella. Això no té gaire sentit. Així que només he de assegurar-me que desinfectar les coses abans que jo imprimeixo a la pàgina. 

AUDIÈNCIA: Així que les targetes especials d'HTML impedeix que les etiquetes de script? 

JOSÉ ONG: Si. Per tant, no impedeix que les etiquetes de script. Simplement s'assegura que el etiquetes de script no reben interpretat com HTML o - si. Simplement farà com ho el que realment és. Està bé. Així que aquesta va ser la revisió del qüestionari. Genial. 

[Aplaudiments]