R.J. AQUINO: Diciamo solo iniziare. Quindi questo è il Quiz 1. Ecco alcune informazioni di alto livello. La pagina Chi per il quiz è a questo URL, non più CS50.net, anche se questo continuerà a funzionare. E 'CS50.harvard.edu/quizzes/2013/1. E 'la grande pagina About, che ti dice dove e quando, cioè Mercoledì prossimo in una serie di stanze. E per Mercoledì prossimo, io significare due giorni da oggi. Tutte queste informazioni sono lì. Ma è cumulativa. 

Quindi tutto dalla prima metà del anno è potenzialmente il quiz, perché non si può davvero fare advanced cose in C senza se le condizioni e per cicli e simili. Ma ci sarà un'enfasi sulla materiale coperto dal Quiz 0, iniziando con le strutture e file I / O. E 'in genere più impegnativo rispetto Quiz 0. Il punteggio medio è in genere più bassa. Studiare sodo. 

Mentre si sta studiando, assicurarsi di usare CS50/discuss per inviare le vostre domande e leggere le domande di altre persone. Quindi, se non avete tutte le domande, login e leggere domande dei tuoi amici. Probabilmente sono buone domande. E prendere i quiz di pratica. Stiamo dando i quiz per sette o otto anni. Sono tutti online. Domande future sono simili a vecchie domande. Ecco come li facciamo. 

Il quiz non esiste ancora. Nessuno di noi ha visto. Ma sarà simile quiz precedenti. Per questa sessione di revisione, questo non è un elenco esaustivo di argomenti. Non si può semplicemente assistere a questo e poi essere perfettamente pronto per il quiz. Altrimenti, non sarebbe che molto di un quiz. E anche questo non è necessariamente tutto quello che c'è da sapere su qualsiasi determinato argomento. E 'pensato per esporre le cose abbiamo trattato, ricordare ciò che abbiamo coperto, e il modo in che abbiamo coperto essa. Ma si dovrà andare oltre e più profondo quando si studia a doppio controllo che sapete tutto su un dato argomento e che hai compilato tutti gli angoli che erano coperto di lezione. 

Le note quiz ti dicono di andare al Note Scribe, video lezioni di orologi. Questo è un buon modo per assicurarsi che hai coperto tutte le basi. Quindi iniziare, quando ho fatto questi diapositive, ho provato a mettere dove ho trovato informazioni. Così per File I / O, per esempio, la Settimana 7, Lunedi di lezione, e l'inviato Sezione 6 e Problem Set hanno tutti informazioni sui file I / O. Ho fatto questo per ogni argomento. Quindi, quei diapositive titolo può essere utile a voi. 

Quindi qui abbiamo File I / O. Ricorda, in Imposta Problema 5, abbiamo usato fopen, fclose, fwrite, fread, e fseek. Dopo aver recuperato 30ish JPEG e dopo aver ridimensionato e pasticciato con bitmap, si dovrebbe essere abbastanza familiare con queste funzioni e come funzionano. Se non si è più familiare, sicuramente li rivedere. E assicuratevi di capire cosa i diversi argomenti sono, quando sono utilizzati. 

Ma i bug relativi ai file comuni è possibile che venga chiesto di - bene, se hai dimenticato di verificare se fopen effettivamente lavorato prima di andare a modificare un file. Questo potrebbe essere un male. Se hai dimenticato di fclose un file che hai fopened, che è simile a una perdita di memoria. Questo è piuttosto male. E dimenticando di controllare se avete raggiunto la fine del file prima di iniziare a scrivere ad esso. 

Quindi, se dici, hey, io sono a la fine del file. Dammi più 5 byte. Beh, questo non è probabilmente andando a lavorare nel modo previsto. Questo è davvero per File I / O, perché abbiamo fatto così tanto di esso il problema impostato. Quindi, se avete capito cosa stava succedendo in Problem Set 5, ricordare le bitmats e JPEG, allora probabilmente siete tutti impostato per File I / O. Se questo è un po ' fuzzy, sicuramente rivedere il problema impostare e il materiale associato. 

Le strutture erano l'argomento che erano sul linea tra 0 e Quiz Quiz 1. Non abbastanza fare il taglio per Quiz 0. Così faranno sicuramente essere su Quiz 1, Settimana 7, Lunedi. Che cosa è una struct? Qui vi mostriamo una struct. E 'come un nuovo tipo. E 'come un contenitore per più campi. 

In questo caso, abbiamo dichiarato una struct studente che ha due campi - una stringa che stiamo chiamando nome e un int che stiamo chiamando età. Così, quando mi passa intorno studenti o io modificare gli studenti, sarò in grado di accedere al loro nome e la loro età. Diamo un'occhiata ad alcuni di codice per questo. Qui vediamo che ho dichiarato uno studente s, proprio come Dichiaro qualsiasi variabile - int x, int y, et cetera. 

Ecco studente s. Si inizia con nulla nei suoi campi. Quindi cerchiamo di loro set. È possibile impostare i campi di una struct con il puntino. Così ho detto qui che s.name = RJ. E V.età = 21. È inoltre possibile aggiornare i campi allo stesso modo che ci si aggiorna il valore di una variabile. Quindi voglio cambiare il mio nome da RJ con senza periodi di R.J. farro l' modo corretto. Sarebbe s.name = RJ, lo stesso come abbiamo detto in origine. E poi è possibile accedervi. 

Così li abbiamo impostato. Li abbiamo aggiornato. È inoltre possibile accedere nello stesso modo. Così qui, sto stampando R.J. Ha 21 anni. E sto accedere a tali valori con s.name e V.età. Ecco, questo è l'accesso struct con la notazione punto. Yep, interrogare? 

AUDIENCE: C'è una ragione sul precedente diapositiva che non hai messo studente sulla riga superiore, come typedef studente struct e poi studente alla fine? 

R.J. AQUINO: Quindi la domanda era, questa diapositiva, abbiamo tipicamente visto typedef struct node e poi l' campi della struttura e quindi il nodo parola. E come mai qui non ho detto, typedef studente struct e poi il campi della struct e poi studente? La ragione è che non ho bisogno di accedere all'interno della struttura. Quindi è OK per lasciare senza un nome. Posso solo lasciare come una struct anonimo. 

La ragione per cui lo facciamo per le liste collegate e cose è perché dentro è necessario fare riferimento a una stella nodi struct. Quindi la struttura deve avere un nome, modo da potervi accedere in un secondo momento. Si tratta di un piccolo dettaglio. Ma ti vede in genere typedef struct parentesi graffe, se non avete bisogno il nome e typedef struct qualche nome seguito da parentesi graffe se si vuole necessario il nome. Quindi questa è una buona domanda. 

E su questo punto, si tende a modificare la strutture e passare intorno le strutture da riferimento, non per valore. Quindi ci limiteremo a passare intorno puntatori a struct invece di passare tutto il le strutture stesse. Quindi stai molto frequentemente andando ad essere utilizzando, in questo caso, studente * o struct nodo * o un nodo * invece gli studenti o nodi. Così qui, ho detto, OK, la variabile ptr sta per essere l'indirizzo di s. E sarà il puntatore allo studente R.J. 

Così possiamo arrivare a quei campi lo stesso che si ottiene nulla. In primo luogo, ID riferimento il puntatore per ottenere la struttura. Ecco * ptr e poi un puntino e poi età. Quindi, per accedere al campo, e ho aggiornato la guida a 22, perché, siamo per esempio, era il mio compleanno. C'è una sintassi scorciatoia utilizzando la freccia qui. Età freccia in modo ptr è solo lo stesso * ptr.age. Ora, questo è qualcosa che dovrete di memorizzare e ricordare. 

È stato utilizzato un sacco di pset6, il pset correttore ortografico. Ma questo è in realtà quello che sta succedendo sulla sotto la cappa. E 'dereferencing il puntatore e poi accedervi. Domanda? 

AUDIENCE: [incomprensibile]. 

R.J. AQUINO: Allora perché stiamo usando puntatori come le strutture, invece di struct se stessi? Il motivo sarebbe se stai passando una struttura a una funzione, probabilmente vuole passare intorno solo il 4 o giù di lì bytes che rappresentano il puntatore, come contrapposizione al 30 o potenzialmente 40 byte che sono la struttura. Quindi passare qualcosa a una funzione è più facile quando la cosa è più piccolo insomma. Domanda? 

AUDIENCE: Potreste aver menzionato questo in principio, ma ci sono altre diapositive su su [incomprensibile]? 

R.J. AQUINO: Queste diapositive saranno dopo la sessione di revisione. Noi li pubblicheremo sul sito. Quindi, andare avanti e passare un po ' più veloce, stiamo andando a parlare di dati strutture. Ci sono un sacco. Abbiamo coperto un gruppo di loro. Ecco cosa si dovrebbe capire sulla struttura dei dati. 

Si dovrebbe davvero capire ad alta livellare ciò che ogni struttura. Puoi spiegare in inglese al tuo amico che non ha preso CS50 come stiamo organizzando i nostri dati e perché saremmo essere utilizzare qualcosa in questo modo? Ecco cosa uno. Cosa due, capire l'attuazione. Quindi, capire come usare queste cose in C. E noi andremo su questo. 

E poi cosa a tre sarebbe conoscere il tempi di esecuzione e le limitazioni della varie strutture che si sta utilizzando. Allora capisco perché si dovrebbe utilizzare un hash tavolo invece di un array. Capire quanto velocemente, in media, l'accesso a una tabella hash è. Capire quali operazioni sono veloci su lista collegata ma lento su array e viceversa. Quindi, per capire che, dovrete capire la notazione Big-O solo sapere Come parlare di questi sorta di cose. E parleremo di questo. 

Quindi, prima cosa, le liste collegate. Ecco una foto di alto livello di una lista collegata. Mostriamo questo in classe. Noi di solito abbiamo 10 persone in piedi sul palco. Ma abbiamo una serie di nodi in cui ciascun nodo ha un certo valore e un puntatore al suo valore successivo. Quindi, per ottenere da un nodo all'altro, si basta dire, dammi il nodo successivo. Avete quel nodo. Dammi il nodo successivo. Avete quel nodo. Dammi il nodo successivo e così via fino a quando non c'è sinistra nodo. 

Quindi, continuare a parlare di ad un livello elevato. E 'molto facile da inserire cose in una lista collegata. Se non vi interessa circa l'ordine, si può solo cadere proprio all'inizio. E 'tempo costante. Ma è difficile trovare un valore. Se stai cercando di chiedere, è il sette nella mia lista? Devi passare attraverso ogni singolo valore. È questo sette? È questo sette? È questo sette? È questo sette? Più e più volte. E questo è O (n). Così, quando si studia per il quiz, confronta questo con gli array. 

Che è OK? Le luci si dim. OK. Quando è una lista concatenata migliore? Quando è un array di meglio? Quindi diamo un'occhiata a qualche codice. Ecco un nodo a potenziale. Si tratta di una struttura. Ha un int n, che sarà il nostro valore. E ha un nodo struct * successivo, che è il nostro puntatore al nodo successivo. Così qui, possiamo vedere che ci è capitato aver messo un int nel nostro nodo. Ma se questa fosse una lista concatenata di char le stelle o una lista concatenata di carri allegorici, si tutto poteva fare anche questo. 

Ricorda in pset6, probabilmente ha avuto un lista concatenata di stelle char o semplicemente array di char statiche. Diamo un'occhiata qui a un'operazione. Quindi vogliamo inserire una nuova n nella nostra lista collegata. Partiamo con un puntatore testa che è un puntatore al nodo che ha la valore di n ed una successiva di un puntatore che punti a questo nodo è un valore di n ed una successiva null perché è l'ultimo nodo. Quindi, nell'interesse di tempo, lo farò inserire tutto il codice sullo schermo. E noi cammineremo attraverso di essa poche righe alla volta. 

Quindi, ecco il codice. Spero che sia leggibile. La prima cosa che facciamo è abbiamo malloc un nuovo nodo. Quindi ha un puntatore ad un nuovo nodo che non abbastanza ha nulla impostato in esso ancora. Controlliamo fare in modo che il nuovo nodo non è nullo. In caso contrario, dobbiamo rinunciare. Quindi, dopo aver verificato che, ora impostare i valori nel nodo. Così abbiamo messo la nuova n nel nostro campo n. E abbiamo impostato il puntatore accanto a puntare a la testa originale, in modo che possiamo ora hanno inserito questo nodo nella nostra lista. 

Infine, abbiamo il punto di responsabile globale al nostro nuovo nodo, in modo che se dovessimo cominciare a testa, saremmo a questo nuovo primo nodo anziché il vecchio primo nodo. E quando questa funzione esce, l' nuovo nodo variabile non esiste più, perché era locale alla funzione. Quindi questo è lo stato del mondo. Il nostro responsabile globale indica il nostro nuovo primo nodo, che punta al nostro originale primo nodo, che punti al nodo dopo. 

Questo è stato l'inserimento. Spero che era relativamente semplice da seguire. In caso di dubbio, un disegno. Quindi trovo che parlare di liste concatenate e guardando il codice è molto non è stato utile. Considerando che, guardando una foto di un collegato list mi permette di pensare, oh, così Ho questo nodo qui. Ma se aggiorno tale puntatore, finisce disconnesso. E ho dimenticato dove il nodo va. E il codice esce. E si dispone di più nodi che sono disconnessi. E non finisce con l'elenco che si desidera. 

Quindi, se si disegna l'immagine e farlo passo dopo passo, si spera, vedrai l'ordine corretto delle cose in termini di aggiornamento dei puntatori per assicurarsi che l'elenco viene insieme. Inserisci è relativamente semplice. Uno più complicata sarebbe inserimento in un elenco ordinato. Una funzione più complicato è eliminare e trovare, quindi guardando attraverso un elenco vedere se qualcosa c'è. Forse avete fatto queste cose a pset6 quando si hai nella tua tabella hash e lei ha detto, bene, è la parola mela nella mia lista collegata? 

Così si può avere già fatto. Ma sicuramente, rinfrescare la memoria e cercare di trovare e reimplementare reimplementare cancellare per una lista collegata. Fun nota a margine, ci sono anche doppiamente legato elenchi, dove avete puntatori che puntano sia in avanti che indietro, in modo che si potrebbe andare al nodo successivo e al nodo precedente. E c'era una questione scorso anno quiz di quel tipo, parlando sugli elenchi doppiamente-linked. 

Ora, questa è una struttura che si è relativamente a conoscenza, perché la maggior parte di voi probabilmente li ha utilizzati su pset6. Ecco uno che è un po 'meno familiare. Come nota a margine, penso che Quiz 1 è soprattutto più duro Quiz 0, perché la roba si sta facendo, si non hanno fatto tanto. Per dirla in un altro modo, ad Quiz 0, avevi scritto un sacco di C. E noi hai chiesto C. 

Per Quiz 1, stiamo andando a chiederti PHP e JavaScript, che si non hanno scritto tanto di. Stiamo andando a chiederti C-codice non hai scritto tanto di, questo C roba avanzata. Quindi sicuramente, praticare la roba che parlato in conferenza che si non necessariamente fare sul problema posto. 

A proposito, non hai scritto una pila su un problema impostato. Ma è stato in conferenza. Ecco l'immagine di alto livello Pile che vi mostriamo ogni anno. È la pila di vassoi in la sala da pranzo Mather. Ad alto livello, pile sono un ultimo in, first out struttura di dati. Ciò significa che si sta andando per mettere le cose in - 1, 3, 7, 12, 14, 0 negativo. L'unica cosa che non ho potuto avere detto - negativo 3, 0. Hai messo tutte queste cose dentro E l'ultimo si mette in è il primo uno che sta per venire fuori. 

In modo da avere due operazioni - spingere e pop. Tutte le mettendo in che ero gesticolare come questo sono spinta. E poi quando raggiungo per afferrare qualcosa o raggiungere in alto per afferrare qualcosa, che sia pop. Quindi stiamo andando a implementare stack. E abbiamo mostrato loro in conferenza utilizzo di matrici. Ma si potrebbe fare di loro usando liste concatenate. Uno stack è un concettuale dei dati struttura, non come un uno specifico dell'implementazione. 

Quindi, quale sarebbe simile? Sembrerebbe un po 'come questo. Avresti una dimensione intero. E si avrebbe una matrice di valori che stiamo chiamando vassoi, perché è ciò che l'immagine è stata per noi - INT vassoi - e poi alcuni capacità massima. Così che cosa avrebbe spinto assomigliare? Beh, se abbiamo uno stack s, poi a spingere qualcosa su s, otterremmo la dimensione di s. E questo sarebbe il prossimo luogo aperto della nostra matrice. Quindi, se abbiamo tre cose nel nostro stack, poi vassoi 3 sarebbe il prossimo macchia aperta, perché 0, 1, e 2 sono già riempito. 

Così abbiamo messo il valore in s.trays [s.size], il terzo posto. E poi incrementiamo s.size a dire, hey, abbiamo avuto tre cose prima. Ora, abbiamo quattro. Così la prossima volta che si preme, sei andando a mettere qualcosa nel 4. O la prossima volta che si pop, si sta andando guardare a 3 invece di 4 o qualsiasi altra cosa. E poi torneremo fedeli al per esempio, ehi, ci siamo riusciti. Questo ha funzionato. Come regola generale, se una funzione che è dovrebbe restituire true o falso restituisce sempre vero, si può hanno fatto qualcosa di sbagliato. Così fa questo lavoro? 

Beh, tutto funziona bene per 1, e 2, e 3, e 4, e cinque. Ma diciamo che raggiungo la mia capacità. Ho poi incontrato un problema, perché se la dimensione è la stessa capacità, sono ora cercando di mettere qualcosa in un array in cui non ho spazio. Quindi un breve controllo per risolvere questo problema. Se s.size CAPACITA ==, restituire false. Altrimenti, andiamo e facciamo quello che abbiamo fatto. Quindi, che cosa potremmo chiedere merito di pile? Che altro si dovrebbe studiare? Che altro si dovrebbe praticare? 

Beh, in attuazione pop. Abbiamo già fatto push. Ti preparo questo. Un'implementazione non-array, dove si utilizza una lista collegata, forse. Un'implementazione non-int. Abbiamo fatto int qui. Ma avrebbe potuto essere galleggianti. Avrei potuto essere stringhe. Avrebbe potuto stelle char. Guardate quiz passato per i tipi di domande che abbiamo chiesto su pile. 

Dirò che abbiamo coperto stack intorno lo stesso che li abbiamo coperti di anni passati. Così i quiz dovrebbero essere una buona indicazione. Andando avanti ancora più veloce, le code. Sono come pile. Ma sono first in, first out. Se sei britannico, coda la parola probabilmente fatto un sacco di senso per voi. In caso contrario, si può avere sentito parlare come una linea. Lavorano come la linea presso il negozio Apple. Il primo a presentarsi alle 3:00 la mattina è il primo persona ad acquistare il suo iPad. 

Quindi abbiamo due operazioni - enqueue e dequeue. Enqueue mette qualcuno in linea. Dequeue tira il primo persona sulla linea. Ancora una volta, siamo in grado di implementare questo con un array. Quindi qual è la struttura che ha mostrato in conferenza? Era questa. Ancora una volta, i numeri. Anche in questo caso, la dimensione e questo nuovo fronte cosa. Perché c'è qualcosa che si chiama anteriore? E 'l'indice del prossimo elemento di annullare l'accodamento. E 'solo mantenendo internamente traccia di il primo ragazzo a presentarsi, in modo da può tirare fuori quando ne abbiamo bisogno. 

Sicuramente guardare dispense e provare ad attuare accodamento e dequeue quando si studia per il quiz. Le cose importanti a cui pensare. Avvolgere intorno se il fronte più l' dimensione finisce più grande di capacità. Anche in questo caso, se la struttura è piena, si sta andando ad avere un problema. Hash tabelle che avete visto prima. La maggior parte di voi probabilmente attuate questi su pset6. E 'una struttura che si propone per O (1) inserimento costante di tempo e O (1) ricerca costante di tempo. 

In CS50, abbiamo implementato questo come un array di liste concatenate. La componente chiave di una tabella hash è la funzione hash. Quindi converte l'input, diciamo, una parola del dizionario, in un numero, che sta per essere nostro indice. E useremo tale indice nella nostra matrice. Quindi, ecco un po 'di cute da study.50.net. Gettiamo tutte le parole in la nostra funzione di hash. E la funzione di hash ci dice dove mettere queste parole. 

Questo è tutto fantastico nella terra in cui c'è solo una parola per ogni slot. Ma ricordate da pset6, lì sono più parole di slot. Che cosa succede quando si ottenere una collisione? Invece di memorizzare un valore, diciamo, tabella hash 3, si memorizzare un elenco collegato. E così invece di avere melone Qui, si avrebbe una lista collegata, dove il primo nodo è cantalupo. E il nodo successivo è cat. E il terzo nodo è scontro, LET'S dire, perché tutte queste parole iniziano con C. 

Così la maggior parte di voi ha fatto questo per pset6. Se non l'avete fatto una tabella hash su pset6 e si è tentato qualcosa di simile un trie, sicuramente rivedere le tabelle hash. Se avete fatto il pset6, sicuramente rivedere le tabelle hash. E se avete fatto su pset6 e non ha fatto lavorare fuori piuttosto a destra e si ha avuto un sacco di problemi con esso, sicuramente rivedere le tabelle hash. Quindi la lezione è davvero sicuramente rivedere le tabelle hash. 

La stragrande minoranza di voi provato cerca su pset6. Picture alto livello. E 'qualcosa come questo, dove ogni nodo ha una serie di bambini, dove ogni bambino corrisponde ad una lettera. E ogni nodo dice anche, hey, io sono una parola. Quindi, in questo esempio, la parola Maxwell, se si segue la M per la A al X-W-E-L-L e poi seguire uno di più. E si ottiene questo simbolo, delta, che ci indicano a significare questa è una parola. Così Maxwell è una parola. Questi delta sono in tutto significazione che le cose sono parole e che le cose non sono. 

Quindi, in pset6, i dati che abbiamo memorizzato accanto a uno qualsiasi dei nostri nodi era "Io sono un parola. "E la cosa bella di tentativi si dimostrano inserimento e ricercare in O (lunghezza di una parola). Quindi, solo per ottenere attraverso Maxwell, è M-A-X-W-E-L-L. Così sette o otto - Non posso contare - passi per arrivare alla fine e controllare le cose. Attuazione così veloce qui. Rob ha attraversato un collegato elencare nel suo post-mortem. Quindi, verificare che fuori. Scusi. Siamo andati in un trie nel suo post-mortem. Quindi, verificare che fuori. 

Ma avete praticamente ogni nodo ha 27 puntatori ai nodi successivi e una Boolean per io sono una parola. Scopri postmortem di Rob per quanto questo in realtà è implementato. La nostra struttura finale, i nostri alberi e gli alberi binari di ricerca. Così guardando questi, questi sono stati coperti più di recente Settimana 8, Lunedi. Un albero è simile a un trie, tranne voi non necessariamente di 27 nodi a ciascun punto. E non si dispone di questi dati ad ogni passo che indica se la - il percorso non importa. Considerando un trie, il percorso dall'alto verso fondo, Maxwell, era importante per noi. 

Ma ogni nodo ha più bambini, forse. Abbiamo ancora un po 'di vocabolario. La radice dell'albero è in cima. E diciamo che la molto più in basso nodi che non hanno i bambini sono le foglie. Così come un trie, un albero è una struttura di nodi. Un tipo comune di albero che stiamo andando a parlare è un albero binario, dove ogni nodo non ha figli o un bambino o due bambini. Quindi questa immagine qui non è un albero binario, perché nodo 3 ha tre figli. 

Ma se dovessimo ignorare quelle, il resto di esso è un albero binario perché dimostra la proprietà che ogni nodo ha zero, uno o due bambini. Così come potremmo esprimere questo in codice? Potremmo avere un nodo in cui ogni nodo ha un numero intero all'interno di esso, nonché come un puntatore alla struttura ad albero sulla sinistra e un puntatore per l'albero sul a destra, quindi i due figli. Come è utile? Beh, se facciamo regole su dove siamo mettere i nodi, possiamo fare ricerca più veloce. 

Quindi c'è un concetto di ricerca binaria albero, in cui tutti i nodi della sottostruttura sinistra ha un valore minore che il nodo che stiamo guardando. E tutti i nodi del sottoalbero di destra avere un valore maggiore che il nodo radice. Ora, che assomiglia un sacco di parole. Ho intenzione di mettere dentro di doppio citazioni e vi mostrerà una foto. Così qui è un esempio di un albero binario di ricerca. Vedi che cominciamo con 10. Tutto a fianco di 10 è più piccolo di esso. E tutto a destra è più grande di esso. 

Ma più di quella, ogni nodo l'albero esprime questa struttura. Quindi il nodo 7 ha un 3 al sinistra e 9 a destra. Quindi tutti questi sono più piccole di 10. Ma guardando solo quelli, il 7 ha 3 alla sua sinistra e 9 alla sua destra. E allo stesso modo a destra, 15 ha 14 alla sua sinistra e 50 a destra. Così i tre nodi laggiù, 15, 14, e 50, sono anche un albero binario valido o un albero di ricerca binario valido. E sono tutti più grandi di 10. Così essi sono autorizzati a essere sulla destra. C'è una domanda? 

AUDIENCE: Come si fa a trattare quando hai due sette? 

R.J. AQUINO: Già. Come si fa a trattare con due valori che sono la stessa cosa? Alcuni alberi binari di ricerca dicono che si ignorare duplicati, perché l'obiettivo è solo per dire, ho visto queste cose finora. Alcuni alberi binari di ricerca si potrebbe dire avere un conteggio all'interno del nodo. Altri potrebbero dire che tutto a sinistra è minore o uguale a. E tutto a destra è maggiore. 

Dipende solo da ciò che il problema è che si sta risolvendo. Quindi, in un dizionario, per esempio, non sarebbe preoccupano duplicati. Tu li avresti buttare fuori. Ma qualche altro problema che si potrebbe curare. 

PUBBLICO: E 'possibile avere un 1 a fianco di 15, che è meno di 10? 

R.J. AQUINO: No. Se il 14 qui erano un 1, questo sarebbe non essere un albero binario di ricerca valido, perché tutto il diritto di 10 deve essere più grande di esso. E vedremo il perché. Se nella terra di ricerca il mio obiettivo è di trovare 14, comincio alla radice. Così guardo. OK. Stiamo per cominciare alla radice. Guarda 10. 

Beh, 14, il nostro obiettivo, è più grande di 10. Quindi deve essere sulla destra. Questo è molto simile al telefono tutto book cosa che abbiamo fatto, il binario cercare lì. Ma invece di ricerca binaria in un array, siamo binario la ricerca in questo albero. Quindi stiamo ancora cercando 14. Ebbene, 14 è minore di 15. Quindi, se è nel nostro albero, deve essere in questa zona qui. Deve essere a destra del 10 ed a fianco di 15. 

E così controlliamo questo nodo. E yay, abbiamo trovato 14. Non ho intenzione di camminare attraverso di essa. Ma ecco il codice. In realtà è relativamente semplice, perché questo è ricorsivo. Cosa potremmo chiedere di fare un quiz? Potremmo chiedere di scrivere questo codice. Vi potremmo chiedere di guardare a questo codice e modificare questo codice e spiegare che cosa che sta facendo. Già. Domanda? 

AUDIENCE: sono queste slide per essere messo a disposizione come lo erano l'ultima volta? 

R.J. AQUINO: sì. Quindi queste diapositive sarà sicuramente essere pubblicato. 

AUDIENCE: Sono effettivamente inviate adesso sul sito. David ha appena fatto questo. 

R.J. AQUINO: Gli scivoli sono adesso sul sito. Io probabilmente rattoppare un paio di gli errori di battitura ho notato e correggerli. Ma c'è una corrente versione sul sito. Altre cose che potremmo chiedere di fare - scrivere inserto. Scrivere una versione iterativa del funzione ricorsiva abbiamo appena mostrato o parlare di queste cose, come in paragrafi, in parole, in frasi. Confrontando i tempi di esecuzione e spiegando ciò che si desidera utilizzare un file binario albero di ricerca per invece di un Hash Table, per esempio. 

Quindi capire queste strutture a un livello abbastanza profondo. Capire come scrivere loro, come usarli, come parlare di loro. E sarete tutti insieme. Domanda? 

AUDIENCE: Quando stai scrivendo il albero binario di ricerca, come si fa determinare quale valore renderla come la radice? 

R.J. AQUINO: Quindi la domanda è, cosa valore si fa a fare il root? A seconda del vostro codice, possono avere una radice globale. Così si può probabilmente avete avuto in pset6 una tabella hash globale. Oppure si potrebbe passare la radice come argomento. Quindi questa funzione di ricerca qui prende un argomento un nodo *. E così qualunque nodo vi capita di essere guardando è quello che si sta trattando come root quando si passa dentro E sono tutti insieme. Quelle sono le mie diapositive. La prossima persona può venire di swap in un computer portatile e microfono. 

ROB BOWDEN: Penso che potrei avere interpretato tale domanda in modo diverso. Ma ho interpretato come, se avete i numeri 1, 2, e 3, come possiamo sapere per fare 2 radice invece di 1 o 3? Se facciamo 2 la radice, allora è bene 1 e 3 a sinistra ea destra. Ma se 1 è la radice, allora è 1 alla top, 2 destra, 3 a destra. Quindi per impostazione predefinita, non si sa cosa fare radice. E per qualsiasi algoritmo ci aspettiamo di dati, solo la prima cosa che Inserto sarebbe la radice. Oppure ci piacerebbe darvi un albero binario che esiste già che ha una radice. Ma altri algoritmi esiste tale che la radice aggiornerà, in modo che se si finire nella situazione in cui è 1, 2, 3, sarebbe aggiorna automaticamente 2 rendere la nuova radice, in modo che è ancora ben bilanciata. 

ANGELA LI: Freddo. Ehi, ragazzi. Sono Angela. E ho intenzione di finire la nostra C e poi andare in alcuni dei nostri web tecnologie - HTTP, HTML e CSS. Quindi la prima cosa è tampone attacchi di overflow. Quindi, diamo uno sguardo a questo codice. E 'piuttosto semplice. C'è una funzione foo. E non restituisce nulla. Ma ci vuole un puntatore una stringa chiamata bar. 

E sta andando a dichiarare questa tampone, che è un carattere array che dispone di 12 slot. E utilizza memcpy, che è solo una funzione che copia da un indirizzo in un altro. Quindi questo sta cercando di copiare in il nostro tampone da qualunque bar sta puntando. Quindi, qualsiasi idea di che cosa c'è che non va con questo codice? 

AUDIENCE: Se il bar è più lungo C, essi verranno sovrascritti. 

ANGELA LI: Sì, esattamente. Non abbiamo alcuna garanzia che bar sta per essere inferiore a 12. Abbiamo appena fatto qualche numero arbitrario 12. E ci siamo detti, speriamo che il nostro input dell'utente è inferiore a 12 caratteri. Quindi, in un mondo ideale, se il nostro ingresso è sempre come previsto, allora avremo qualcosa di simile, ciao. Questo è meno di 12 caratteri. Esso viene letta in char c. E allora facciamo qualcosa con esso. Non ha molta importanza. 

Ma una persona malintenzionato potrebbe fare qualcosa di più come questo, dove si darci qualunque bar sta puntando, sta andando a puntare a questo enorme matrice di appena A di. E questo è il modo più lungo di 12. Così sta andando a andare fino in fondo quaggiù per cui il rendimento indirizzo usato per essere. Quindi diciamo che questa funzione è chiamato foo. Forse foo è stato chiamato da un altro funzione, che è stato chiamato da principale. Così, quando foo è in esecuzione, è necessario per sapere dove tornare. 

Se foo è stato chiamato da una funzione denominata baz, deve sapere che è avuto modo di tornare a baz. E questo è ciò che questo indirizzo di ritorno qui ci sta dicendo. Ma se sovrascrivere con qualche altra indirizzo, in questo caso, si tratta di un rappresentazione l'indirizzo presso il Fin dall'inizio di questo buffer, poi quello che in realtà sta per accadere è che invece di tornare indietro a baz, che ha chiesto la nostra funzione, è solo per andare al fronte di tale codice. 

E se questo era lì perché una maligno di hacker tizio è venuto e iniettato questo, allora forse questo importo di A non è in realtà una di. E in realtà è proprio il codice che si rompe il computer o qualcosa del genere. Quindi, per stare sulla difensiva su questo tipo di cose, dovete mai pensare che input dell'utente è un certo quantità di caratteri. Ad esempio, quando stavi facendo correttore ortografico, vi è stato detto che le parole erano solo andando a essere di 40 caratteri tempo massimo. E che era buono. 

Ma se non, allora si dovrà assicurarsi di leggere solo in 45 caratteri alla volta. In caso contrario, si potrebbe sovrascrivere il buffer. Tutte le domande su questo. Già. 

AUDIENCE: Potresti parlare un po 'di più su questi? 

ANGELA LI: Mi dispiace. Sì. 

PUBBLICO: Il microfono è solo per il video. Cercherò di progetto. Ciao, ragazzi. Sup? Quindi cerchiamo di andare oltre un paio di cose in Biblioteca CS50, che hai utilizzato tutto il semestre, per lo più per ottenere l'input dell'utente. Come sapete, si include il CS50 biblioteca da solo facendo CS50.h, che contiene tutti i prototipi della funzioni che è possibile utilizzare, come GetString e GetInt, e GetFloat, et cetera. E c'è questa riga nel CS50 biblioteca che definisce una stringa, che voi tutti ormai sappiamo è solo un char *. 

Ma diamo uno sguardo a come funziona GetString. Questa è una versione molto ridotta. Si può tirare su i file della libreria CS50 da, credo, manuals.CS50.net. E si può leggere la funzione effettiva. Ma questo riguarda alcuni le parti importanti. Così abbiamo creato un buffer con una certa capacità. E quello che facciamo è otteniamo un carattere alla volta dallo standard n. Ecco dove gli input degli utenti il testo nella console. 

E così stiamo andando a leggere in un carattere finché non è un nuovo line e non è fine del file, che è la fine di standard input. E per ogni personaggio che leggiamo in, se quel personaggio finisce per aggiungere il numero di caratteri che abbiamo letto e che è più di nostra capacità, allora quello che facciamo è che abbiamo appena ridimensioniamo la nostra buffer in modo che sia il doppio del tempo. Quindi, di nuovo, questa protezione contro buffer di attacchi di overflow, perché si legge in un carattere per volta. E se in qualsiasi punto si legge in troppo molti, basta espandere il buffer. Si moltiplica per due. E allora hai più spazio. 

Altrimenti, basta aggiungere un carattere di buffer. E dopo aver letto in tutto il caratteri, si ridurrà il buffer indietro fino alla dimensione normale, aggiungere un nullo terminatore, e poi tornare. Ora, diamo un'occhiata a GetInt. Can you guys leggere questo? Posso ingrandire un po '. Non so come funzionano i computer. Si figuri. Non posso ingrandire correttamente. 

Questo è veramente duro. Mi dispiace. Diciamo solo un'occhiata a questo. Così che cosa GetInt fa è prima legge in una stringa da GetString, che abbiamo implementato prima. E la parte più importante da notare qui è se questa condivisione che finisce la lettura è come non è in realtà una stringa, poi abbiamo appena torniamo a INT_MAX rappresentano il fallimento. Perché torniamo INT_MAX invece di negativo 1 o 1? Tutte le idee? 

AUDIENCE: [incomprensibile] negativo 1 su uno. 

ANGELA LI: Sì, esattamente. Quindi sei molto più probabile che vogliono solo all'ingresso 1 o negativa 1 quando richiesto per una ennesima e qualunque Maxes all'ennesima potenza. E 'enorme. Non probabilmente stai andando a usarlo. Quindi questo è come una decisione di progettazione per assicurarsi che non si accidentalmente restituire un errore o non si torna 1, che può essere analizzato come una risposta corretta. Quindi, se una linea non esiste, torniamo INT-MAX. In caso contrario, usiamo sscanf, che è come scanf. Ma si legge da una stringa. 

E abbiamo questa formattato stringa, che è% i% c. E cerchiamo di applicheremo la stessa con ciò che l'utente ci ha dato. Vogliamo che il numero di cose abbinate ad 1, il che significa che solo vuole davvero corrispondere un numero intero circondato da forse bianco spazio, forse no. In questo caso, se si mette in qualcosa come bar, non corrisponde affatto, perché ci deve essere un numero intero all'inizio. Così sscan mai girato 0. Quindi non ritorni quella. 

In alternativa, se si mette in qualcosa come 1, 2, 3, A, B, C, che partite sia il numero intero ma anche il carattere dopo. Così sscanf torneranno 2, che inoltre, non è l'ideale. Tu non vuoi 1, 2, 3, A, B, C un int valido. In modo che anche non funziona. Ma dicono che si mette in qualcosa come 50. Che corrisponderà al% i, che significa otterrà leggere in n. E ora, n conterrà il numero 50. E poi si può tornare. 

In caso contrario, si colpisce Riprova. E poi si va solo più volte fino a si ottiene un ingresso adeguato da parte dell'utente. Hai domande su questo? 

AUDIENCE: Quindi, se si dovesse stampare il valore della GetInt su [incomprensibile] sarebbe solo il numero intero e max? 

ANGELA LI: Già. Quindi, se si utilizza GetInt, si dovrebbe presumere che non si desidera max nth to essere un input valido, perché si sta andando supporre che era male. 

AUDIENCE: Se non avessimo char c e qualcuno mettere in 1, 2, 3, Sam, vero ancora funzionare per 1, 2, 3? 

ANGELA LI: Penso che avrebbe funzionato. Ma non si vuole 123Sam a essere un input valido da un utente. Questo non è davvero un int. Quindi non mi sembra giusto per analizzare come un int. OK. In tal caso, andiamo avanti a internet. Quindi HTTP non è un linguaggio. HTTP è solo l'insieme di norme per come si inviano le cose da parte dei clienti, che è, ai server. Ecco altre persone sul web. 

Così HTTP è l'acronimo di Hypertext Transfer Protocol. E 'il cuore e l'anima dell'intero web. La parte ipertesto appena si riferisce a HTML. Il trasferimento è clienti come potrete inviare richieste di server, che danno risposte. E il protocollo è solo, come si fa ci si aspetta un server comportarsi? E come si fa a comportarsi in modo tale che è possibile semplificare questo processo di comunicazione? 

Quindi le richieste HTTP assomigliano molto questo. GET è il tipo di richiesta. Voi ragazzi avete visto le richieste GET e richieste POST. Questa seconda cosa lì, / io, che è appena l'URI o l'URL di cui si vuole andare all'interno dell'ospite. Quindi questa richiesta chiede la pagina, come www.facebook.com / me. Ed è una richiesta GET. E poi questo HTTP/1.1, che è solo la versione di HTTP che si sta utilizzando. E 'quasi sempre 1.1. 

E poi c'è un gruppo di altra roba troppo. Si può effettivamente vedere questi se aprire la console quando sei navigare sul web. Le risposte sembrano qualcosa più simile a questo. La parte superiore è, ancora una volta, l' tipo di HTTP che si sta utilizzando seguito da un codice di stato. Quindi 200 OK è tutto risolto. Qui è il contenuto. Il tuo contenuto sta per seguire. E poi vi dirà che tipo di contenuto e altre cose troppo. 

I codici di stato, ci sono alcuni quelli importanti che si deve sapere. 200 OK è come oro di tutto. Tutto funziona. 403 Forbidden. Questo probabilmente avete visto se hai dimenticato a chmod qualcosa correttamente. Significa che non avete i permessi giusti per accedere a quella sul server. E 'come, no, non puoi vedere. 404 significa che la cosa non esiste. Non trovato. Avete probabilmente visto che un sacco. 

500 Internal Server Error è di solito come qualcosa che è andato storto sul lato del server. Così, quando si stavano attuando pset7, se aveste errori di PHP, si potrebbe effettivamente andare alla pagina e vedere un mucchio di PHP errore roba. Ma questo non accada normalmente, perché i siti web in realtà non vogliono dirvi perché il loro sito è rotto. Faranno probabilmente solo restituiscono un 500 Internal Server Error. 

E poi c'è 418 sono una teiera. C'è tutta una storia su perché questa è una cosa. Ma si può leggere che sul proprio tempo. C'è un sacco di altri codici di stato troppo. Ma questi sono quelli si dovrebbe sapere. Quindi parliamo di HTML. HTML, ricordate, non è un linguaggio di programmazione. E 'un linguaggio di markup. Ciò significa che descrive il contenuto. Ci dice che cosa un documento HTML sembra come o meno quello che sembra ma come è strutturato. 

Così definisce una struttura e semantica di pagine web. E 'come, questo è un paragrafo. Questo è un elenco ordinato. Questo è come una sezione della mia pagina. Ecco il titolo. Lo fa cose del genere. Non designano di che, perché questo è quello che si fa in CSS. E sembra che una serie tag di annidati. Quindi, per usare un esempio di una davvero essenziale Pagina HTML, si ha la DOCTYPE dichiarazione lassù. 

Questa dichiarazione DOCTYPE è dicendo, stiamo usando HTML5. Allora avete la grande tag HTML. Esso contiene una testa e un corpo. Dentro la testa, hai il titolo. Questo è ciò che accade nel titolo barra del tuo browser. Abbiamo un tag link che collega in un foglio di stile esterno. E poi abbiamo uno script che tira da un JavaScript esterno pure. 

E poi all'interno del nostro corpo è in realtà ciò che viene mostrato sulla pagina. Abbiamo un paragrafo e poi un immagine all'interno stesso paragrafo. Questa è una foto di gattini. Si noti che l'immagine tag si chiude. Così, invece di apertura con un'immagine e poi fare un altro / immagine, è solo avere questa piccola barra qui, che lo chiude. E il tag immagine ha anche questa chiave attributo value chiamato alt. Questo è il testo alternativo che succede quando si passa su di esso. 

La maggior parte degli elementi HTML hanno un certo valore della chiave cose che si possono dare, vari personalizzazione. Già. 

AUDIENCE: [incomprensibile]. 

ANGELA LI: Beh, quindi è un attributo del tag. Quindi, se si sta utilizzando jQuery, si potrebbe fare selezionare image.getAttribute. E poi si può cercare ottenere l'attributo alt. E vi darà gattini. Se vi ricordate moduli in HTML, ingresso elementi avranno gli attributi di nome. Ed è quello che PHP utilizza per inviare richieste quando viene presentata una forma. 

AUDIENCE: Hai accennato qualcosa su come se si utilizza Kittens.jpg o qualcosa che ha il mancante file di cartelle o altri file? 

ANGELA LI: sì. Quindi questo è quello che viene chiamato un parente percorso, perché io non sto dando il percorso completo. Questo è come quando in C se si fa fopen qualche file, se si hi.txt fopen, che hi.txt dovrebbe essere nella stessa directory, a meno che non si dà più percorso complesso. 

AUDIENCE: Così si potrebbe specificare in quale cartella [incomprensibile]? 

ANGELA LI: Già. E si può cercare come fare. Ma se volevo ottenere Kittens.jpg fuori della directory genitore, vorrei fare .. / Kittens.jpg. Già. Scusi. Già. Oh uomo, ho dimenticato la domanda. Qual era la domanda? Oh, la domanda era è, Kittens.jpg dovrebbe essere nella stessa directory? E in questo caso, è. Ma si può anche fare un certo percorso tale che essa non deve essere. Buono? 

CSS. Così CSS, come HTML, non è un linguaggio di programmazione. CSS è solo una serie di regole di stile. E 'l'acronimo di Cascading Style Sheets. E lo si utilizza in combinazione con l'HTML per le pagine di stile. Quindi ci sono tre modi è possibile includerlo. Un modo per farlo è nella testa parte del codice HTML, si può solo aprire un tag di stile e poi attaccare alcune regole CSS in là. E 'abbastanza OK. Già. 

AUDIENCE: Potrebbe mettere quelle tag di stile in mezzo, LET'S per esempio, il corpo e / corpo. E allora si sarebbe styling solo nel corpo. 

ANGELA LI: Si potrebbe. Sarà funziona. Ma non si dovrebbe, perché lo stile è tipo di metadati che dovrebbe andare in la testa del vostro documento. Corpo in realtà dovrebbe contenere solo ciò che in realtà sta per mostrare sulla tua pagina. 

AUDIENCE: Così si sarebbe messo stile nella tua testa per lo stile della intera pagina web, giusto? 

ANGELA LI: Già. Quindi, mettendo stile qui, queste regole CSS si applicherà a tutta pagina sulla base di loro selettori. Quindi il modo migliore per farlo è invece di avere un tag style nella tua testa, avete questo link per uno stile esterno foglio come ti ho mostrato in Nell'esempio precedente. Quello che fa è che cerca e trova il file style.css e poi tira e lo utilizza come stili per la pagina. E il vostro style.css sarebbe basta guardare come questo. Sarebbe solo un mucchio di CSS. 

E, infine, c'è un altro modo di può includere CSS, che davvero non dovrebbe mai fare. E 'uno stile inline chiamata. E così ogni elemento HTML può anche prendere un attributo di stile. E allora in quel attributo di stile, si può dare regole CSS. Quindi, in questo caso, qualunque div Sono definendo proprio qui, sta andando a avere uno sfondo nero e il colore del testo bianco. Ma non si deve fare questo, perché ciò che questo non si mette il vostro stile all'interno del codice HTML. 

E so che stiamo parlando di HTML è la struttura e CSS è lo stile. Se si esegue questa operazione, si mescola insieme. E non è molto pulito. Quindi non farlo. Utilizzando un esempio di CSS, lassù, ci è sufficiente selezionare il corpo del HTML documentario. E noi siamo come, tutto è sta per essere Comic Sans. Anche io non raccomando. Ma si potrebbe fare. 

La seconda regola proprio qui, sta andando per selezionare l'elemento sul pagina con ID principale. Quindi, qualsiasi elemento HTML, dissi ID = Principale, ho intenzione di dare che un Margine di 20 pixel e allineare tutto, tutto il testo, al centro. L'ultima cosa sceglie per classe CSS. Quindi, qualsiasi elemento della pagina che ho dato una classe di sezione, ho intenzione di farlo uno sfondo di colore azzurro chiaro. Yep. Questo è tutto quello che ho. Domanda? 

AUDIENCE: Cosa fa l'hashtag prima principale fare? 

ANGELA LI: La domanda è, cosa fa l'hashtag prima do principale? In questo caso, l'hash in CSS significa selezionare da ID. Quindi, se ho avuto qualche elemento HTML, come divid = principali, questa regola CSS seleziona la cosa con ID principale. Analogamente, il periodo di fronte sezione è selezionare per classe CSS o selezionare per classe HTML. 

AUDIENCE: Perché c'è una ha prima 6 in colore di sfondo? 

ANGELA LI: Già. Quindi la domanda è, perché c'è un hash prima del 6? Questo è diverso da quello hash. Questo significa che si sta dando un colore esadecimale. Quindi colori esadecimali, questo solo rappresenta un colore. E ti ricordi triple RGB quando hai fatto il forensics pset? Questo è simile. Le prime due cifre rappresentano quanto il rosso è il colore. Il secondo due rappresentano quanto verde. E il terzo rappresenta quanta blu. E l'hash è questo sta andando che rappresenta un colore. 

Quindi tutto da 0, 0, 0, 0, 0, 0 fino a F, F, F, F, F, F è valido. E 'un po' di colore valido che possono essere visualizzato dal browser. Domanda? 

AUDIENCE: Qual è la differenza tra usando da ID e per classe? 

ANGELA LI: La domanda è: che cosa è la differenza tra usando da ID e la classe? Si può avere un solo elemento in un Documento HTML che ha un determinato ID. Quindi solo una cosa sulla mia pagina è consentito avere ID principale. Quindi si utilizza per questo è l'intestazione. Questa è la navigazione. Questo è il piè di pagina. Le classi sono diversi, perché si può si applicano le classi ad altrettanti elementi HTML come si desidera. 

Così, per esempio, ho fatto parte della classe, perché non c'è probabilmente più di uno la sezione sulla mia pagina. Stai solo permesso di avere il maggior numero elementi della pagina con lo stesso classe ma solo uno con un certo ID. 

AUDIENCE: Così il punto rappresenta la classe? 

ANGELA LI: Già. Un punto rappresenta una classe. Freddo. Questo è tutto quello che ho, ragazzi. Grazie. 

[Applausi] 

ZAMYLA CHAN: Ciao a tutti. Sono Zamyla. Ho intenzione di essere coprono PHP, MVC e SQL oggi. Un sacco di materiale che sarò copertura sarà più o meno a destra, fuori pset7. Bene. Così che cosa è PHP? PHP sta per PHP Hypertext Preprocessore. Così, in sé, è un ricorsiva nome, che è piuttosto fresco. PHP è un linguaggio di scripting server-side, e fornisce il backend e le basi logiche del nostro sito. 

Così Angela ha parlato molto del HTML e CSS che renderà la struttura del sito. Ma cosa succede se si vuole cambiare la situazione contenuto dinamico o se varia in base all'utente o determinate condizioni? Ecco dove entra in gioco PHP Ora, in genere, PHP potrebbe prendere un paio di meno linee per attuare la stessa cosa in C. Questo perché PHP gestisce la memoria gestione per il programmatore, al contrario di noi dover malloc libero, cose del genere. 

Ma dal momento che PHP è un interpretativa linguaggio, tipicamente, si potrebbe eseguire un po 'più lentamente di C, che è un linguaggio compilato. Perché ci stiamo muovendo programmazione lingue, diamo un'occhiata a come il sintassi sarà diverso. Cerchiamo di essere molto attenti a non confondersi con questo. Quindi, con la sintassi PHP, se siete incorporamento PHP all'interno di un HTML file o in un file php. stesso, è necessario racchiudere il codice in aperto PHP e il tag PHP chiusi come segue, come sullo schermo. 

Variabili in PHP. Ogni singola variabile inizierà con il simbolo $ seguito dal nome di la variabile. Ora, le variabili in PHP sono debolmente tipizzato, il che significa che non è necessario per indicare il tipo di dati è quando si sta dichiarandolo. Tuttavia, questo non significa che essi non hanno alcun tipo a tutti. Quindi, se io dichiaro una variabile e appena impostato uguale a 1, e poi mi dichiaro un'altra variabile, impostarla uguale a "1", e poi un altro 1,0, bene, a seconda del tipo di parità operatori che uso, se voglio confrontare tutti i tipi, quindi essi saranno uguali. Ma se voglio fare in modo che il tipi sono uguali, PHP può ancora fare che, anche se noi non indichiamo che tipo è quando noi per prima cosa il file. 

Ora, in PHP, anche se siamo commutazione da programmazione linguaggi da C, abbiamo ancora la nostra fidato se la condizione, proprio come questo. Abbiamo ancora le nostre loop mentre, appena come questo, dove si mette in condizione e quindi la corpo del ciclo. E poi abbiamo anche il nostro ciclo for, che si presenta in genere come questo. Quindi, se volevo iterare tutti nove pset e inviare e chiamare un funzione submitPset, allora posso farlo qui, che voi ragazzi sono stati tutti svolto da questo punto. Complimenti, a proposito. 

Per la fotocamera, la gente Detto questo, vi ringrazio. Ora, se non volevi utilizzare solo questo per il ciclo, quindi PHP in realtà anche ha chiamato le cose loop foreach. Quindi, se ho avuto un array di interi, 0 a 8, memorizzate nei pset matrice, allora potrei avere un ciclo foreach che itera su ogni numero in pset. E poi ho potuto chiamare lo stesso funzionamento otto tempi, proprio come ho fatto prima. Quindi questo per ogni ciclo è bello, perché tu non devi se non si conosce la lunghezza esatta della matrice che si hanno, quindi utilizzando questo ciclo foreach si prenderà cura di questo per voi. 

Così ho fatto p-set come un array. Diamo un'occhiata a questo. Gli array in PHP sono in genere gli stessi quelli che abbiamo avuto in C, dove è possibile dichiarare un array. E qui, posso dichiarare un array vuoto e poi costruire in modo dinamico utilizzando indici come numeri interi. Così indice 0, ho intenzione di archiviare un numero intero chiamato 1. Al indice 1 della mia lista, io vado per memorizzare il valore 2. E al terzo indice ma la secondo numero, ho intenzione di memorizzare il numero 12. 

Ora, questo va bene in che funziona funziona bene. Ma dire che è importante per me ciò che ciascun indice tiene. Per me, l'indice 0 indica come molti gatti che hanno. E l'indice 1 indica come molti gufi ho. E quello successivo significa come molti cani. Ebbene, allora precisare che, invece di dover ricordare 0 corrisponderà a gatti e 1 a gufi, posso usare array associativi, il che significa che invece di numeri interi come i miei indici, Posso effettivamente usare le stringhe. 

Quindi questo è molto utile. E tu hai praticamente appena sostituito gli interi con stringhe. E ci si dispone di un array associativo. Già. 

AUDIENCE: C'è una ragione per cui non c'è una sottolineatura per il secondo parte, perché la mia lista ha la matrice. 

ZAMYLA CHAN: La domanda era, è C'è un motivo per cui c'è un sottolineare tra la mia e la lista? No. Questo è solo come sto denominazione la mia variabile. 

AUDIENCE: Sul primo linea, è una parola. 

ZAMYLA CHAN: Le mie scuse. Ti preparo questo. Già. Dovrebbero essere lo stesso nome di variabile. Buona pesca. OK. Quindi passiamo a corda concatenazione. Se volevo prendere due stringhe, allora io posso concatenare con l'operatore punto. Quindi, se ho Milo come primo nome e Banana come il cognome, poi concatenare con l'operatore punto e poi mettere uno spazio tra farà una stringa che contiene Milo Banana, che posso then echo o, piuttosto, stampare. 

Parlando di eco, parliamone circa un paio utile - oops. Mi dispiace. Un paio di funzioni PHP utili. Così abbiamo la - difficoltà tecniche. Un secondo. Ho mandata. Problemi di PowerPoint. E siamo tornati con funzioni PHP. E siamo tornati con funzioni PHP. 

Così abbiamo la funzione di richiedere, se se si passa in un file, ecco è solo un esempio di un file Potrei passare dentro Poi che includerà il codice PHP da quel file che io indico. E si valuterà che trovi Poi abbiamo anche eco, che è un parallelo a printf. Exit è un parallelo di rompere, che esce dal blocco di codice che sei dentro E poi controlla vuote se un determinato variabile è come null o zero o tutto ciò è equiparato con l'essere vuoto. Già. 

PUBBLICO: Per la concatenazione di stringhe dot operatore uno, in PHP, è che l' stessi in JavaScript dove è usando il punto per la concatenazione significa più? Quindi il nome completo, si potrebbe avere dollaro firmare prima + e poi + durare? 

ZAMYLA CHAN: Già. Quindi la domanda era se in PHP siamo è possibile utilizzare la stessa concatenazione di stringhe come in JavaScript con i vantaggi. E Giuseppe otterrà in quello successivamente. Credo che abbia una diapositiva su questo. In realtà, è diverso. Quindi, in JavaScript, è necessario utilizzare segno più per concatenare le stringhe. E in PHP, è necessario utilizzare l'operatore punto. Quindi sono diversi. 

OK. Quindi, ora che abbiamo coperto tutti questo PHP, dove fa davvero tornare utile? Beh, è ​​utile quando si può combinare con il nostro HTML. Quindi la nostra PHP ci darà il potere di alterare il contenuto HTML di una pagina prima di suo carico. Quindi, sulla base di condizioni diverse, solito l'utente specifico che è registrati, è possibile visualizzare informazioni diverse. Linda, hai avuto una domanda? 

AUDIENCE: Puoi concatenare un intero anche? 

ZAMYLA CHAN: Sì, è possibile. Quindi la domanda era se potete concatenare interi o altro variable.s ora, passiamo a MVC, che è un paradigma che abbiamo usato in pset7 e un sacco di web designer utilizzano per organizzazione del codice di file nel loro sito web. M sta per Modello. E in fondo, file di modello si occuperà con interazioni con il database. Visualizzare i file, si riferiscono alla l'estetica del sito. E le maniglie controller richieste degli utenti, analizza dati, fa altra logica. 

In pset7, abbiamo unito il modello e il controller. E abbiamo appena li ha chiamati controllori e metterli nella directory pubblica. E i file di vista, li usano come modelli nella directory templates. Quindi questo schema qui rappresenta anche lo stesso tipo di divisione con l' modello e il controller in viola qui sulla sinistra e la vista sulla destra. Quindi questo è uno schema che alcuni di voi può essere visto in orari d'ufficio o diagrammi che eravamo disegno, come si furono capire il vostro pset. 

Così qui, in un controller, un modello regolatore, abbiamo funzioni che riguardano l'esecuzione di query SQL del database, l'esecuzione di logica PHP. Forse si dovrebbe guardare in alto uno stock in Yahoo! Finance. O forse, si sarebbe solo controllare vedere se un utente aveva presentato una formare già prima di avere visitato la tua pagina. E allora si renderebbe una forma qui. Dopo che era stata presentata quella forma dall'utente, l'azione che era specificato nel tag HTML del form indicherebbe la pagina che che restituisce dati. 

Quindi, tutte queste informazioni sarebbe inviato al tuo controller. Poi si sarebbe probabilmente fare un po 'di più logica su questo e magari eseguire alcuni più query nel database SQL e poi, finalmente, venire con un ben set ricco di informazioni che si farebbe passare in un altro modello che visualizzate tali informazioni. Ora, come possiamo effettivamente confezioniamo diffusione di informazioni? Bene, abbiamo una funzione chiamata Render che era nel file functions.php in pset7, dove si passa il nome di un file, il nome di un modello. 

E poi anche passare in un array associativo. E così che array associativo rappresenta le diverse informazioni che si desidera passare dentro Ora, che cosa sarà costante questi esempi è che le chiavi o, piuttosto, le chiavi del associativa array, quelli sono ciò che sta per essere dovrebbe essere costante dal modello, perché sa ha bisogno cosa chiamata messaggio o chiamati nome. E poi le cose sulla destra, l' valori reali, quindi in questo caso, che è un bravo ragazzo e Milo, quelli che stanno andando essere i valori che stanno cambiando che il controller cambia ogni volta o sulla base di una certa condizione e passerà che trovi 

Così qui in modelli, vediamo che si utilizza HTML caratteri speciali, il che significa appena fondamentalmente che vogliamo per ottenere la stringa peer che l' user messo dentro E vogliamo sostituire messaggio in là. Così poi quando abbiamo effettivamente osserviamo il file, lo specifico informazioni vengono passate dentro Si noti che la chiave di come rendere le opere è che le chiavi del associativa matrici, quelle variabili diventano I nomi qui. E così i valori di quella chiave nella array associativo diventa allora l' valore della variabile. 

Ora, passiamo a SQL. E 'l'acronimo di Structured Query Language. E quindi questa è solo una programmazione linguaggio progettato per la gestione di basi di dati. Ed è tornato utile per noi in il nostro sito web finanza pset7. In sostanza, è solo un modo semplice per monitorare e gestire oggetti e tabelle e collegarli tra loro. Ora, pensate al vostro database SQL fondamentalmente come un file di Excel, forse, con più fogli schede. 

Così si potrebbe avere più tabelle, forse, che legate fra loro. E molto simile a Excel, abbiamo un sacco di la funzionalità che vogliamo. Per esempio, possiamo selezionare alcune righe. Possiamo inserire informazioni. Siamo in grado di aggiornare le righe. E possiamo anche cancellare le cose. 

Il SQL seleziona opere selezionando le righe o una fila di colonne specificate da un dati che corrispondono a un determinato criteri che si indica. Così, qui, quando vedo select * from maghi dove casa = Corvonero, poi Sto selezionando *, il che significa che sono selezionando ogni singola colonna in tale riga della tabella maghi, ma solo se colonna casa è uguale a Corvonero. Ora, questo è puro o SQL. Quindi, se sono andato in phpMyAdmin, che è il modo specifico che usiamo per gestire nostri database SQL, quindi ho potuto inserire che nel sito phpMyAdmin. E che sarebbe eseguire. 

Ma vogliamo davvero fare che sul lato PHP. Quindi, come possiamo farlo? Beh, usiamo la funzione di interrogazione, che fondamentalmente esegue la query SQL. Uso? come segnaposto, possiamo passare in taluni I valori per la nostra stringa che abbiamo desidera sostituire. Così forse sto memorizzazione diversa valori nella curr_house, che rappresenta la casa attuale che sto attraversando. Così posso passare che in come segnaposto con il punto interrogativo. E poi io fondamentalmente eseguo l' stessa cosa che ho fatto prima, tranne Ora, io sono in PHP. 

E query restituirà un array associativo. E ho intenzione di conservarlo in righe. Ora, query può sempre fallire. Forse la query SQL non potrebbe eseguire perché la tabella non esisteva. O forse, la colonna non esisteva. Qualcosa è andato storto. Beh, in quel caso, vorrete fare Assicurarsi di verificare se il query ha restituito false. E questo è utilizzando il triplo equivale funzionamento lì. 

E allora mi scuso, che è un altro Funzione CS50, passando in un messaggio. E se si guarda nel chiedere scusa, tutto davvero fa è rendere apology.php. Già. 

AUDIENCE: Può spiegare che cosa stella fa tra selezionare e da? 

ZAMYLA CHAN: Sì, assolutamente. Così la stella tra selezionare e da significa che voglio per selezionare l'intera intera riga dal mio tavolo. Avrei potuto indicato select nome, anno, casa. E vorrei ottenere solo quei tre colonne mio tavolo. Ma se io dico select *, allora io ottenere tutto in quella colonna. Poi ho intenzione di andare voi nella parte posteriore prima. 

AUDIENCE: Quindi questo è ancora in SQL, giusto? È questa query o è PHP? 

ZAMYLA CHAN: Siamo in una query. Quindi questo è in PHP. Quindi, utilizzando la query funzione PHP, stiamo esecuzione di una query SQL. 

AUDIENCE: C'è qualcosa in SQL case-sensitive, come scegliere o maghi o casa? 

ZAMYLA CHAN: C'è qualcosa in SQL case-sensitive? Io credo di sì. Credo che SELECT e FROM E dove sono case-sensitive. No? 

ROB BOWDEN: Quindi, è il contrario. I nomi delle colonne ei mezzi da tavolo, tutti questi sono case-sensitive. Ma una delle parole chiave di MySQL, come SELECT, FROM e WHERE, quelli non sono case-sensitive. OK. Così il contrario di quello che ho detto. Così tutte le parole chiave MySQL - selezionare, da dove - quelli non sono case-sensitive. Ma tutto il resto è. OK. È nella parte anteriore. 

PUBBLICO: Se ho $ righe in termini di più di una riga, significa che è diventa solo un array associativo? 

ZAMYLA CHAN: Quindi la domanda era se le righe ha più di una riga in esso, non diventa un array associativo? Quindi è un array di associativo array già. Quindi, anche se c'è solo una riga restituito, allora dovresti andare a indice 0 di tale risultato. E allora avresti quella prima fila. Sì, Belinda? 

AUDIENCE: Quando si utilizza ===, è questo l'unico caso? Oppure ce ne sono altri? 

ZAMYLA CHAN: Quindi, in questo caso, === è un confronto di tutti i tipi. Scusi. === È un confronto che confronta le tipologie. E poi == confronta tutti i tipi. 

AUDIENCE: Puoi spiegare cosa rows è in questa situazione? E 'riga di dati? 

ZAMYLA CHAN: Nella diapositiva successiva, sono andando a spiegare cosa righe è. Quindi, se non ti dispiace che tiene fuori su quella. E poi in fondo? 

PUBBLICO: Per le funzioni come interrogazione, rendering e ci scusiamo [incomprensibile]? 

ZAMYLA CHAN: La questione era se queste funzioni - di query, scusa, e rendere - sono comuni in tutta PHP. Questi sono quelli che CS50 ha scritto per pset7. E Jay? 

AUDIENCE: Quando hai bisogno di dire $ _SESSION, È che solo per gli ID? O potrebbe aver detto che qui? 

ZAMYLA CHAN: Quindi la domanda è, quando usiamo $ _SESSION, che era una specifica variabile globale che stiamo usando. Ecco questa variabile sta per essere locale alla nostra funzione. Quindi stiamo solo dichiarando una nuova variabile. 

Pubblico: Come si scusa implementato? 

ZAMYLA CHAN: La domanda era, come è chiedere scusa attuato? E credo che questo è in realtà una bella buone prassi per voi ragazzi di andare in la sezione functions.php e guardare scusa e vedere come si potrebbe avere fatto da soli. Così che io possa lasciare che a voi, ma solo dire che se si guarda a chiedere scusa, poi ci vuole il messaggio che si presentato per scusarsi, e poi rende quel messaggio. Altre domande? Io amo domande. Così tenerli a venire. 

AUDIENCE: [incomprensibile] echo o print lì? 

ZAMYLA CHAN: La domanda era, non potevamo abbiamo appena messo echo o print lì. In modo che avrebbe fatto qualcosa leggermente diverso. Ciò avrebbe stampato interrogazione fallito in quella - bene, in questo momento, siamo in realtà nel nostro controller. Quindi noi in realtà non abbiamo HTML istituito qui. Apologize rendendo apologize.php in realtà si reindirizza al apology.php. OK. 

Così ora, andiamo a affrontare la domanda da prima su cosa è davvero righe. Beh, query restituirà una matrice di righe. E ogni riga è rappresentata da un array associativo. Quindi, se ho eseguito alcune query SQL e Ho memorizzato il risultato in file, poi utilizzando un ciclo foreach, quindi la matrice nome è il primo lì - righe. E poi ho intenzione di chiamare ogni riga in là $ row. 

Così l'iterazione di questo, posso poi accedere nome della colonna della riga data, anno colonna, e la casa di colonna. Si noti che non sarei stato in grado di farlo con le righe, perché indice di righe il nome non esiste. Righe è solo una serie di array associativi. In modo da avere due livelli lì. Una volta che avete la matrice di righe, dovete entrare in quella. E poi è possibile accedere alle colonne. Forse che rendono chiaro? Sì, di fronte? 

AUDIENCE: [incomprensibile] aprire staffe per il [incomprensibile]? 

ZAMYLA CHAN: Pardon me? 

AUDIENCE: le parentesi aperte. 

ZAMYLA CHAN: questi qui? Questo è avermi permesso di includere quella variabile. Già. 

AUDIENCE: Quando si stampa, siete stampa il codice HTML? 

ZAMYLA CHAN: sì. Quando stampo, questo qui è dentro il mio modello, in modo mio punto di vista di metodo MVC. Così sto stampare in HTML. 

AUDIENCE: Quindi, se siamo andati in developer attrezzi dopo l'esecuzione di questo, potremmo che effettivamente in codice? 

ZAMYLA CHAN: Questo è un grande domanda, sì. Quindi, se sei andato negli strumenti di sviluppo in Firefox con Firebug o Chrome, allora sì, si potrebbe visualizzare il codice HTML specifico. Quindi non avrebbe mostrato $ row ["Nome"]. Sarebbe mostrare qualsiasi nome è in quella riga. 

AUDIENCE: Solo un problema generale, quali sono tr e td definito come? Perché dovremmo [incomprensibile]? 

ZAMYLA CHAN: Tabella TR fila, Tavolo poi td colonna. OK. 

PUBBLICO: Sì, è dati della tabella. 

ZAMYLA CHAN: i dati della tabella. Già. 

PUBBLICO: E 'una riga in cui l' riga viene trattata come una colonna? 

ZAMYLA CHAN: Mi dispiace. Puoi ripetere? 

AUDIENCE: Come faresti visualizza le righe? 

ZAMYLA CHAN: Come vuoi visualizzare righe in che tipo di strada? Stai parlando di questi righe qui o le righe tr? 

PUBBLICO: Le righe. 

ZAMYLA CHAN: queste righe qui? Mi piacerebbe visualizzo questo come Io eseguo la mia domanda. E si dice, OK, ho né da 0 a n quantità di righe che soddisfano i criteri che si era interrogato. Così ho qualche numero di righe. Così le righe, le righe $, negozi di ciascuno uno di tali righe in una matrice. Quindi, anche se è solo uno di loro, è ancora una serie di righe che corrispondono esso. 

Dunque, per esempio, questo è simile a quando si inverosimile la cache da parte degli utenti. E i criteri c'era dove ID è uguale al ID di sessione. C'è davvero solo una riga che potrebbe corrispondere a quello. Ma ancora righe appena tornati una riga. Quindi dovresti andare a righe, indice 0, cache dell'indice effettivamente arrivare a la cache. 

PUBBLICO: E 'la funzione di stampa in eco la stessa cosa? 

ZAMYLA CHAN: sì. Sì. Stampa un'eco della stessa. 

PUBBLICO: Il ciclo foreach l' unico modo per indicizzare le righe? 

ZAMYLA CHAN: È un ciclo foreach l'unico modo che si può scorrere le righe? No. È anche possibile utilizzare un ciclo for, a condizione che si conosce la lunghezza della matrice della riga. 

AUDIENCE: Potrebbe accedervi utilizzando una riga come [incomprensibile]? 

ZAMYLA CHAN: Così non si può accedere usando solo riga se non si dispone di un ciclo foreach condizione che non hai dichiarato di fila. Sì. Sì, nel bianco. 

AUDIENCE: Così che cosa tr e td fare? 

ZAMYLA CHAN: Così TR e td sono tag HTML. tr indica l'inizio di una riga di tabella. E ogni td indica una nuova colonna di dati della tabella. 

PUBBLICO: Per una visuale di ciò che una riga è come, solo immaginare la SQL, come hanno una riga. [Incomprensibile]. 

ZAMYLA CHAN: Già. Questo è un ottimo punto. È possibile visualizzare le righe come solo come in una tabella di Excel, basta l'elenco delle righe. OK. Bene. Quindi, ora che siamo andati oltre select, se non ci sono altre domande, faremo andare oltre su inserto. Quindi, se ho voluto inserire in qualche tabella e inserire determinata colonna valori, ho potuto inserirmi in Corvonero in anno 7. Ma a volte ci possono essere duplicati valori, come abbiamo visto in pset7 quando abbiamo sono state aggiornando il nostro portafoglio. 

Quindi, in questo caso, vogliamo utilizzare ON DUPLICATO UPDATE KEY, in modo che non lo facciamo memorizzare più righe con lo stesso valore, ma piuttosto aggiornarlo. Poi in realtà abbiamo aggiornamento, che non è un inserto. E 'solo un aggiornamento in cui si aggiorna in un certo tabella con un dato criteri e poi, infine, eliminare, che fa una cosa molto simile. 

AUDIENCE: Potrebbe brevemente andare oltre la chiave duplicata? 

ZAMYLA CHAN: Già. In sostanza qui, ho INSERT INTO Gringott, è, galeoni, questi valori. Ma ID, presumibilmente, è una chiave univoca valore impostato nella tabella MySQL. Quindi, se ho già che ID impostato, allora non posso inserire una nuova riga. Quindi, se non esiste già, allora devo aggiornarlo. Nel mezzo del bianco. 

AUDIENCE: Quindi inserire, aggiornare, cancellare, e selezionare, sono quelli tutti disponibili localmente [incomprensibile]? 

ZAMYLA CHAN: Quindi inserire, aggiornamento, cancellazione, e selezionate sono tutte le query SQL. Così ogni volta che si sta utilizzando SQL, avrete quelli disponibili. 

PUBBLICO: Torna alle passate quiz - c'era una domanda che si occupava di se tu avessi un tavolo e voleva inserire punteggi dei test in uno e si inserisce il tuo nome in modo che non ti consente di [Incomprensibile] punteggio del test del tuo amico. Come si dovrebbe fare con inserto? 

ZAMYLA CHAN: Quindi la domanda era di circa una precedente interrogazione a medio termine. Io non sono a conoscenza di quale uno è adesso. Quindi, forse in seguito, se si desidera venire e mi mostra, allora posso sicuramente vi darà consigli. Ma parlando di cose inserimento, come prendendo il punteggio di qualcuno quando si non dovrebbe, parliamo di Attacchi SQL injection. Quindi un attacco SQL injection è essenzialmente dove qualcuno prende sfruttare la bassa sicurezza del modo che si sta assumendo nei dati. 

Quindi qui, proprio come nella finanza CS50, quando abbiamo effettuato il login, possiamo entrare in un nome utente nel form di login, la prima casella di testo, e quindi immettere una password. Forse il nostro codice PHP potrebbe apparire qualcosa come questo, dove $ username è il nome utente e la password post-dati è la password di post-dati. E poi abbiamo appena eseguiamo la query, per esempio, OK, bene, la nostra query sta per scegliere tra i nostri utenti, dove il nome utente è l' uno che hanno presentato. E la password è la password, il che significa che le password corrispondano. 

Ora, cosa succede se invece di effettivamente presentazione di una password effettiva, come 12345 e indovinare polo che dice la password e cercando di incidere il loro conto, se invece hanno presentato questo. Potrebbero digitare forse una congettura a una password. E poi avrebbero finire il citazione quindi digitare o 1 = 1. Ciò ritmo direttamente in SQL interrogare a guardare qualcosa di simile. Selezionare tra gli utenti dove nomeutente = rebbi e la password pari giglio o 1 = 1. 

Quindi, o la password è corrette o 1 = 1, che è sempre vero. Quindi, in questo caso, in pratica, un utente può approfittare di questo e di fare il login stessi e trucco conto di qualcuno. Ecco perché vogliamo evitare qualcuno che per fare questo. Ma per fortuna, la funzione di query passando i segnaposto avrà cura di questo per voi. Inoltre, ti genere mai voglia effettivamente presentare le password stessi. Ecco perché abbiamo hash o cifrato li in finanza CS50. 

PUBBLICO: Il quiz passato ha parlato sulle stringhe di escape MySQL. Dobbiamo preoccupare? 

ZAMYLA CHAN: Questa è una buona domanda. Le stringhe di escape MySQL è sicuramente un funzione che è stato utilizzato nella query. Ma sicuramente guardare in quello. Direi che è giusto gioco per sapere che avresti bisogno di chiamare quel funzionare su una stringa. Sì, Belinda? 

AUDIENCE: Come fai a sapere quando è apici singoli o doppi apici? E anche, mi sento come a lezione te accennato qualcosa di non avere il [incomprensibile] o qualcosa o l' seconda citazione singolo alla fine. Penso che ha sottolineato in conferenza che si suppone di avere apostrofo 1 e poi non hanno apostrofi o qualcosa del genere. 

AUDIENCE: [incomprensibile]. 

PUBBLICO: Il fatto è che l'ultimo singolo citazione in là in quel secondo box non dovrebbe essere lì. [Incomprensibile] Perché quando si prende l'ultimo singolo citare fuori e abbinare questi per i contenuti dove la parola d'ordine è, se si dispone che interrogazione, c'è una sola offerta a la fine già. Si desidera utilizzare quella singola citazione come quella che si affaccia quello [Incomprensibile]. Allora che cosa è realmente in quel testo box non dovrebbe avere questo. 

ZAMYLA CHAN: io cambiare la situazione. OK. Se non ci sono domande, allora io passare sopra a Giuseppe per parlare su JavaScript, et cetera. 

[Applausi] 

JOSEPH ONG: Quindi stiamo correndo un po 'indietro. Quindi, se si deve lasciare, questo è OK. Ma noi chiediamo di mantenere la testa in giù se siete nel mezzo, in modo da non bloccare la macchina fotografica e si utilizza l'uscita posteriore se è necessario. Sono Giuseppe a proposito. Ciao. Test, test. Dan, è quella buona? Freddo. 

Così il video sarà inoltre pubblicato linea per coloro che lasciare ora. Awkward. OK. Così revisione quiz. Questo è un gatto. Ora, Javascript, che non è forse come aww per alcuni di voi ragazzi. OK. Ecco, questo è in primo luogo, ricordano da Zamyla. Ricorda che PHP è eseguito sul server. E un sacco di volte, voi ragazzi ha scritto cicli in PHP per stampare HTML, giusto? Quindi, una volta che il codice viene eseguito, che Output HTML di stampare viene inviato all'utente. E una volta che succede, non è più possibile PHP essere eseguito, a meno che non si ricarica la pagina, di Naturalmente, che reexecutes il PHP. Ma una volta che si stampa che HTML, Non si può andare ovunque. 

Cosicché HTML viene inviato verso l'utente, che è il browser qui, dove Milo sta usando il computer. E così bene, ci sono diverse cose una volta che inviamo HTML per l'utente. A volte vogliamo fare qualcosa di simile quando si fa clic su qualcosa, vogliamo alert boxes di pop-up, questo genere di interazioni, come quando si preme il tasto, quando si sceglie qualcosa sul pagina, voglio che succeda qualcosa. Beh, non è possibile rieseguire PHP codice una volta che l'HTML sia impostato. Così come si fa a fare questo? 

Introduciamo un nuovo linguaggio chiamato JavaScript che viene eseguito nel browser che ti permette di fare le cose HTML dopo che ricevete dal server. E questo è il motivo per cui lo chiamiamo un client-side linguaggio di programmazione. Funziona su computer - il client. Hai domande su che finora? Questo paradigma ha senso per le persone? OK. Buona. Bene. Quindi la prima cosa da notare è JavaScript non è PHP. 

Hanno qualche sintassi diversa, che andremo in. E hanno usi molto diversi. JavaScript, ancora una volta, per la vostra browser per il cliente. Server viene eseguito da qualche parte sul qualcun altro computer che invia informazioni a voi, giusto? Quindi, se vi chiediamo di scrivere il codice PHP su una domanda d'esame, non scrivere JavaScript e viceversa. Potrai solo perde punti, e non sarà giusto. 

Quindi cerchiamo di entrare in qualche Differenze di sintassi - JavaScript a sinistra e PHP sulla destra. La prima cosa che noterete con JavaScript, dichiariamo le variabili con la parola chiave var - V-A-R. PHP usato il simbolo del dollaro, Zamyla come discusso in precedenza. Se volete dichiarare una associativo array, vediamo la sintassi familiare su lato destro con PHP. Sul lato sinistro, invece si utilizza parentesi graffe. E poi le chiavi sono a sinistra. Allora avete due punti. E poi ci sono i valori che si desidera. 

Quindi questo è come si dovrebbe fare in PHP sul lato destro con quello secondo linea che inizia a Milo. Ed è così che si dovrebbe fare sulla lato sinistro in JavaScript se si desidera ciò che noi chiamiamo un oggetto. E oggetti in JavaScript sono solo array associativi. Quindi, se si vuole accedere ai campi, in PHP si usa questa sintassi staffa. E in questo modo, è possibile riassegnare proprietario campo Lauren. 

Beh, in JavaScript, se si vuole accedere a un campo e modificarlo, è possibile utilizzare la sintassi del punto. È inoltre possibile utilizzare la sintassi staffa. Ma non è possibile utilizzare il sintassi del punto in PHP. Non funzionerà. Funziona solo in PHP. E infine, per stampare le cose al console, è possibile utilizzare console.log, che voi ragazzi utilizzano un sacco di pset8. È possibile che console.log. 

Se si desidera stampare un array in PHP, è necessario utilizzare la stampa r. E sul lato destro, si vede i Hash concatenazione di stringhe laggiù. Qualcuno ha chiesto in precedenza. Io uso un plus in JavaScript. Se voglio qualcosa di concatenare in PHP, io uso il punto. Questi sono diversi. Se si scrive codice PHP, non utilizzare un plus. Se state scrivendo JavaScript codice, non scrivere un punto. Sarà sbagliato. E sarai triste. 

Differenze talmente sintassi. Conoscere la sintassi, perché se si deve scrivere la domanda e si utilizza la sintassi dalla lingua sbagliata, non funzionerà. E sarà sbagliato. Quindi parliamo di un certo controllo flusso differenze, come si usa loop in ciascuno di essi. Zamyla andato oltre il lato destro. Roba sul lato destro dovrebbe essere a conoscenza. Diamo un'occhiata sul lato sinistro. 

Quando si utilizza per n ciclo in JavaScript, la variabile loop, var i laggiù, ciclo le chiavi della matrice. Quindi, vedete il nome, la casa, e il ruolo. Se io console.log i, ottengo nome, la casa, e il ruolo. Queste sono le chiavi. In JavaScript, un ciclo foreach va oltre i valori di questa matrice. Quindi, si nota che sono entrambi i. Ma qui sul lato PHP, stampa out Milo, CS50, e Mascot. Questi sono i valori in PHP. 

Quindi questi sono come questi due sono diversi nelle diverse lingue. Quindi, se si sta utilizzando un foreach loop, non impegna che ti dà le chiavi. E se si sta utilizzando un per n ciclo, non assumere ti dà i valori. Questo senso finora? La prossima diapositiva è intenzione di mostrare come è possibile accedere al contrario in ciascuno di essi. 

Beh, se avete la chiave in JavaScript e si desidera che il valore fuori, basta indice nella array con quello. Così Milo di i otterrà ciò che si desidera - i valori. C'è questa diversa sintassi in PHP. Se si vuole veramente sapere, io non lo faccio pensiamo che abbiamo mostrato a voi ancora. Ma se siete interessati, potete usare Questa sintassi aggiuntiva sulla destra lato che effettivamente permetterà di ottenere il chiavi in ​​PHP quando si sta utilizzando un ciclo foreach. Quindi, solo un po 'di curiosità se siete interessati. 

Ecco, questo è solo per dimostrare la differenze tra questi due cicli. Non mescolare fino quando sei programmazione di una domanda. Hai domande su questo. Freddo. Bene. Oggetti JavaScript. Ho parlato di loro. Sono come gli array associativi. L'unica cosa che vorrei farvi notare qui è che un valore in una associativo array può essere qualsiasi cosa in JavaScript. 

Può anche essere una funzione, come laggiù. Ho una funzione che è un valore di una chiave. E se voglio chiamare tale funzione, Ho appena accedo corteccia. E poi ho messo le parentesi dopo che. E funziona. Così tutte le domande? No? OK. Buona. JavaScript, come PHP, è debolmente tipizzato. Che cosa vuol dire? 

Esso ha i tipi. Ma quando si dichiara un JavaScript variabile, si dice var i. Tu non dici. Questa non è una cosa. Basta dire che è una variabile. E allora JavaScript gestirà l' Tipi sotto il cofano per voi. Siamo in grado di convertire liberamente tra tipi a causa di questo. Così ho inizia come un numero in questo caso. E poi ho una stringa. E aggiungo io ad esso. E io riassegnare nuovamente dentro i. 

Così quella prima linea, i è il numero. Sulla seconda riga, ora diventa un stringa dopo faccio la riassegnazione. E qui, sto solo concatenando quel numero sulla corda. Così si vede che anche se ero un intero nella prima parte, è una specie di come essere convertito in un stringa e poi viene aggiunto su tale stringa ciao. Ed è quello che voglio dire dalla tipizzazione debole. Ecco che si converte tra tipi molto facilmente. E non buttare avvisi ti piace C fa. 

Così ho ora contiene ciao 123 alla stringa. Avanti. Possiamo anche confrontare liberamente tra i tipi. Quindi, se si utilizza ==, molto come in PHP, JavaScript fa una cosa simile. La stringa 123 è uguale al numero 123 quando si utilizza il doppio uguale. Quando viene utilizzato eguali triple, ma anche vuole assicurare che il tipo è lo stesso. Quindi, visto che è una stringa e che è un numero, anche se sono entrambi 123, quando si utilizza il triplo Equals, si ottiene falso. Nel doppio è uguale caso, si ottiene vero, perché matrimoniali uguali non lo fa preoccupano tipo. Equals triple si preoccupa tipo. Domande? OK. 

E un'altra cosa su JavaScript è la portata è di tipo globale, se non sei in una funzione. E funziona lo stesso modo in PHP realtà. Quindi cerchiamo di passare attraverso questo esempio. I Ho impostato a 999. E poi vado in questo ciclo for. Quindi se sto stampare i fuori in questo per loop, mi aspetto 0, 1, 2, 3, 4. Ottengo ai = 4. Incrementa ora a 5 alla Alla fine del ciclo for. E poi si rompe fuori dal giro, perché non soddisfa il condizionare più. 

Cosa pensi che il prossimo console.log stampa fuori? Ecco che cosa farebbe in C. In C, perché se avete come var i fuori e si dispone di var i all'interno di un ciclo, come un per ciclo, allora rende tali che è ambito che i due i sono differenti. In JavaScript, sarà solo trattarlo come lo stesso i. Ottengo 5, perché quello era il valore dopo che esce dal ciclo. Quindi quelli che sono gli stessi i. Ritiene che senso? 

Beh, ha senso dal un punto di vista JavaScript. Ma lo stesso paradigma non riporto a C. Hanno diverse regole di scoping. Sì. 

AUDIENCE: [incomprensibile] al di fuori della funzione [incomprensibile]? 

JOSEPH ONG: Così esterno quale funzione? Quindi io arriverò a quello di appena un secondo. Così chiamiamo foo (i). Questo passa i in foo, incrementi e quindi lo registra. Così è stato 5. Così diventa 6. Ma di cosa sto parlando è che in quella funzione. Perché è un parametro, è ambito di tale funzione. Così una volta ho fatto uscire da quel funzione, è ora intenzione di andare torna al vecchio i. Che i ambito è solo perché è in funzione. E abbiamo portata e funzioni. Ma noi non abbiamo portata fuori delle funzioni in JavaScript. Ritiene che senso? Sì. Domanda. 

AUDIENCE: Same [incomprensibile]? 

JOSEPH ONG: Quindi sì. In PHP, è lo stesso tipo di cosa. C'è una leggera sottigliezza realtà. Ma mi si può chiedere che dopo la revisione. Non avete davvero bisogno di sapere che sottigliezza per il quiz. Per tutti gli effetti, come variabili, globale e PHP, salvo sono in funzione, lo stesso cosa in JavaScript. Sì. 

AUDIENCE: Perché questo permesso in Javascript e nessun altro? 

JOSEPH ONG: Allora perché è consentito in JavaScript, e non in C? E 'solo chi si avvicinò con JavaScript ha deciso che questo era OK JavaScript. Quindi è proprio come un linguaggio di programmazione convenzione come diremmo noi. Sì. 

AUDIENCE: Allora perché ha fatto andare da 6 a 5? 

JOSEPH ONG: Così andò da 6 a 5, perché quando ho superato i in foo, che i all'interno di foo è ora limitate a foo, perché esiste in ambito funzioni in JavaScript. Ma una volta che esco di qui, perché è stato ambito alla funzione, io sono solo utilizzando l'ho regolare che era dentro il resto del flusso di controllo. Dare un senso? Posso andare avanti? Bene. Freddo. 

L'accettazione di questo è oggetti sono passati per riferimento. Sai come quando si passa un array in C si potrebbe effettivamente modificare l'array? E 'la stessa cosa in JavaScript. Se mi passa un oggetto, in questo caso, passato Milo in questa funzione catify. Milo inizia. Il suo nome è Milo Banana. Io passo l'oggetto in una funzione perché è un oggetto, un associativa array in JavaScript. 

Quando si esegue un'operazione in tale funzione, sarà effettivamente cambiare l'oggetto. Quindi, questo accadrà solo per gli oggetti in JavaScript, proprio come accade per le matrici all'interno del nome di C. Così Milo sarà effettivamente diventare cat momento. Ritiene che senso? Quindi, questo funziona solo per gli oggetti. Gli oggetti vengono passati per riferimento. Sì. 

AUDIENCE: Quindi stai dicendo che in contrasto con i variabile. 

JOSEPH ONG: Già. Quale variabile ero solo un numero, giusto? E 'come in C quando si passa un Integer, si fa una copia. E quando si passa un array, in realtà cambia la matrice reale C. La stessa cosa accade con JavaScript in questo caso. Bene. E il prossimo, Milo è triste perché egli è ora un gatto. Che era in realtà Milo dopo qualche viaggio dal veterinario. 

Così come usiamo JavaScript in una pagina web? Siamo in grado di includerlo. Questo è il codice HTML con i tag strip. Così ho tag strip lì. E poi ho messo un po 'di JavaScript codice all'interno dei tag script. E poi esegue questo. Quando faccio e basta così, è chiamato JavaScript inline. È un po 'disordinato, perché l' JavaScript è effettivamente in HTML. 

Un modo migliore per fare questo, molto più bello, è quello di scrivere il JavaScript in un file esterno e quindi fornire il tag script con una sorgente. E questo andrà a quel file JavaScript e leggere il codice JavaScript da tale file invece. E in questo modo, non si hanno un sacco di JavaScript all'inizio del vostro File HTML, che rende davvero disordinato. Basta metterlo da qualche altra parte. E poi leggerà da lì. Forse questo ha un senso? 

Materia di collocamento. In questo caso particolare, l' script è prima che il corpo. Così, quando eseguo questo, c'è nulla nel corpo ancora. Forse questo farà un po 'di più percepire quando mostro questa parte successiva. In questo caso, lo script viene dopo la div. Così appare in realtà il div sulla prima pagina. Proprio qui, in questo piccolo cerchio rosso, si vede visualizzato il testo. E poi l'allarme si presenta. 

Nel primo caso, perché lo script era prima del div, il avviso si presenta in primo luogo. E poi il div mostra dopo si elimina la scatola. Quindi l'esecuzione conta. Quindi dovremo tenere questo in mente. Questo sarà importante in un po '. OK. Così bene, come si fa attendere che il intera pagina viene caricata allora prima di eseguire del codice? Arriveremo in questo un po ' Poco dopo anche. Ma mantenere questo posizionamento questioni in mente per quando ci venire a un'altra diapositiva. 

Così arriviamo a DOM momento. E che cosa è DOM? Quindi, se si guarda al codice HTML, è solo un mazzo di testo sullo schermo. Così come fa sapere JavaScript che questo è un elemento HTML? Quindi dobbiamo avere qualche ricordo rappresentazione di questo struttura che abbiamo. E ogni volta che abbiamo questo in memoria la rappresentanza in JavaScript, che chiamiamo che il DOM. Ed è solo un modo che la gente ha deciso che dovremmo rappresentare questa Struttura HTML. 

E che cosa significa questo DOM assomiglia? Ebbene, nella rappresentazione della memoria, prendiamo questo testo. E ci rivolgiamo in memoria di rappresentanza. Quindi questo è il codice HTML. Quindi noi prima scopriamo che ogni Albero DOM ha un documento. Sembra un albero. E il documento contiene il codice HTML tag, in realtà tutto interno di questo momento. Il tag HTML ha due figli. Ha una testa. Quella testa, se si guarda al rientro laggiù a come è strutturato tra i tag di chiusura, testa ha un figlio. Il bambino è il titolo. Esattamente. 

Ora, abbiamo un bambino di corpo. E poi che ha un corpo bambino ha chiamato la famiglia. E che la famiglia ha tre figli - antico, medio e piccolo. Così si dovrebbe sapere come disegnare un diagramma come questo, quando ci chiediamo come per disegnare un diagramma quando diamo il codice HTML sulla sinistra. Saper produrre l'albero DOM. E all'interno di queste cose, c'è solo un testo, che ho rappresentato come piccole scatole. 

Questo struttura ad albero del DOM fare senso e ciò che il DOM è? Quindi, che cosa significa la p per? Qui, il p laggiù in quel tag rappresenta un comma tag in HTML. Così si può guardare in alto. Ma significa solo che è un po ' spazio per il testo. E ha un certo stile CSS di default, perché è un tag di paragrafo. Ma in realtà non preoccuparti che parte troppo. Basta sapere che è un segnaposto per qualche testo. Sì. Domanda? Sì. 

AUDIENCE: Hai appena citato CSS. La famiglia hash e hash tutta quella roba è fondamentalmente che rappresentano gli ID nei CSS? 

JOSEPH ONG: Sì, esattamente. Prendo a ciò che questi hash significa in un secondo. Quando Angela si avvicinò CSS, lei parlato di selettori CSS. Questi sono i selettori CSS che stava parlando. Sì, Rob? 

ROB BOWDEN: Vorrei anche commentare che DOM all'interno del tag title è anche un nodo di testo. 

JOSEPH ONG: Giusto. Così all'interno del tag title, Ho qualche DOM testo. Quindi, in realtà, questo titolo dovrebbe avere come un piccola scatola venuta fuori di esso pure. Ma non importa troppo in questo caso. Non abbiamo veramente a cuore i nodi di testo, come li chiamiamo noi, troppo. OK, lo facciamo. A quanto pare, lo facciamo. E riparerò che quando A caricare di nuovo. Ritiene che senso? 

Quindi, come possiamo lavorare con il DOM? Ogni volta che avete a che fare con il DOM in JavaScript, ci sono due passaggi. Si seleziona un elemento DOM. E poi si fanno le cose ad esso. Quindi, in questo caso, astrattamente, ho selezionato l'elemento centrale. E poi un esempio di fare cose ad esso sarebbe modificare il testo. Questo usato per essere Bob. Ora, quello che ho fatto a lui era ho cambiato Bob a Milo in questo caso. 

Quindi, come possiamo effettivamente fare questo? Come facciamo la selezione? E come facciamo a fare la roba per la cosa una volta che abbiamo preso? Beh, il modo in cui voi ragazzi hanno imparato in questa classe è quello di utilizzare qualcosa che chiamata jQuery. Così che cosa è jQuery? jQuery è una libreria che rende JavaScript più facile da scrivere. Così qualcuno ha avuto il tempo e scrisse jQuery. 

jQuery è in realtà scritto in JavaScript. E allora perché hanno fatto questo, ora hanno un sacco di funzioni che possiamo usare che rendono la nostra vive davvero facile. Ma quali sono alcune delle cose che fa? Rende più facile la selezione di elementi. Fa cambiare HTML, aggiungendo classi più facile. Rende più facile Ajax. Noi arriveremo in un secondo. 

Ed è analogo a librerie C. Così si include string.h, si ottiene strlen. È possibile ottenere strcpy, tutte queste cose. Quando si include jQuery, si ottiene bello modi per selezionare gli elementi al cambiamento cose, et cetera. È possibile ottenere funzionalità extra che JavaScript non ti dà. Quindi jQuery non è JavaScript. jQuery è una libreria che è scritto in JavaScript che rende JavaScript più facile da scrivere. 

Quindi jQuery non è una programmazione lingua. Ma JavaScript è. fare. Assicurati di ottenere il vostro terminologia destra. Tutte le domande? Sì. È che una domanda? Bene. Quindi, come si usa jQuery? Beh, quando si scrive un po ' Il codice JavaScript e di includere una jQuery nella parte superiore del vostro file come file script, è possibile utilizzare il simbolo del dollaro ora per avere accesso a jQuery. E questo è diverso da il simbolo del dollaro in PHP. 

E 'lo stesso simbolo digitare sulla tastiera. Ma significano cose molto diverse. Segno del dollaro in PHP significa questo è come mi dichiaro una variabile. In JavaScript, quando hai incluso jQuery, si distingue per jQuery. Modo da tenere a mente. Così come potremmo selezionare elementi DOM? Beh, quando si fa il brutto JavaScript modo, si accede alla documentare variabile globale. E poi si arriva elemento dalla famiglia ID. Questo è davvero lungo e prolisso e non molto bello. 

Oppure si può ottenere tutti gli elementi che sono un tag p. Che funziona anche in JavaScript. Ma non abbiamo mai veramente mostrato la sintassi troppo. Quello che abbiamo mostrato che eri jQuery. In modo che tutto il selettore verso l'alto là che è stato espresso in JavaScript ottiene solo condensato a questo molto bello dollaro Login famiglia hashtag. E $ p, proprio dove è così. Se si desidera selezionare tutti i tag p all'interno di una famiglia, abbiamo messo uno spazio tra i due. Ed ora, otteniamo tutte le p tag all'interno di una famiglia. 

E guardate familiare? Beh, Angela ha parlato Selettori CSS. Dammi un secondo. E così, per selezionare un elemento, è sufficiente utilizzare la stessa cosa di te farebbe con un selettore CSS. Se si mette un hash di fronte di esso, seleziona da ID. Un punto seleziona per classi. Se vi è solo la cosa senza hash o punti, seleziona questi tag. Domande. Sì? 

AUDIENCE: Quando usiamo punto nel nostro HTML, è che non jQuery? 

JOSEPH ONG: Dot nel nostro HTML è una cosa JavaScript. Non è una cosa jQuery. Il modo in cui voi ragazzi appreso con jQuery è quello di utilizzare. html. E poi si passò a prescindere il codice HTML sta per essere. Quindi io arriverò che in soli una seconda realtà. Quindi, come facciamo roba da elemento una volta che abbiamo selezionato questo? Ecco, questo è un esempio di selezione di un elemento. Così ora, vogliamo fare cose ad esso. 

Quindi, in questo caso, lasciatemi tornare alla diapositiva precedente. Era Bob prima. E voglio cambiare la situazione all'interno HTML a Milo. Così chiamo la funzione HTML dall'elemento. Tale funzione HTML è un metodo di elemento. E poi ho dato quello che Voglio che il codice HTML sia. E si sostituisce solo ciò che è dentro di quel tag con qualsiasi dò. Sì. Domanda? 

PUBBLICO: L'hashtag viene utilizzato solo per il jQuery. [Incomprensibile] non avremmo usare quella. 

JOSEPH ONG: Sì, esattamente. Ma non preoccupatevi troppo JavaScript su puro. Voglio solo che voi ragazzi di concentrarsi su come si sarebbe farlo con jQuery, perché che sta per essere importante parte sul quiz. Giusto. Esattamente. Quindi, vedete che hashtag, in modo che corrisponde per selezionare l'elemento con l'ID metà a causa di questo hashtag. Hashtag significa ID. E questo elemento ha un ID di mezzo. Ecco, questo è l'elemento selezioniamo. 

AUDIENCE: [incomprensibile]. segno del dollaro hashtag [incomprensibile]? 

JOSEPH ONG: Quindi no. La domanda è: si può usare. Valore. E valore. Funziona solo su elementi che sono ingressi. In jQuery, sarebbe . Val, non il valore.. Quindi io riesco anche a un piccolo esempio che dimostra tutto questo in combinazione in un secondo. Ma penso che questo serve un piccolo frammento ha senso per le persone finora. Vuoi cambiare il codice HTML, chiamare il metodo HTML. Sì. 

AUDIENCE: Puoi spiegare il metodo di nuovo? 

JOSEPH ONG: Quindi un metodo è solo un funzione che appartiene ad uno, in questa caso, uno di questi elementi DOM, perché vedi io selezionato il primo elemento. In realtà, mi permetta di usare il mouse. Selezionato il primo elemento. E poi ho chiamato questo HTML un funzionamento che aveva. E poiché questa funzione appartiene questa cosa, noi lo chiamiamo un metodo. Questo è solo un nome di fantasia per esso. Dire ancora una volta che. Quindi ricordate, abbiamo selezionato l'elemento ora. E abbiamo messo dentro di la variabile elemento. Correggere? 

Così, quando vogliamo cambiare l'HTML all'interno, perché era Bob prima, vuole cambiare il testo di Milo. Così chiamiamo HTML. E diciamo che cosa il codice HTML all'interno questo elemento dovrebbe essere ora. E così cambia a Milo, perché ho dato Milo. 

AUDIENCE: Così stanno lavorando insieme. [Incomprensibile] 

JOSEPH ONG: Sì, sì. Stanno lavorando insieme. Così uno di loro sceglie il primo elemento. E la seconda fa qualcosa. Sì. 

AUDIENCE: [incomprensibile]. Se questo metodo è diverso da in HTML avete il metodo uguale effettivo. 

JOSEPH ONG: Già. Questo è un metodo diverso. Questo è un metodo diverso. E possiamo comprendere che in appena un secondo quando arriviamo a un esempio. Voglio fare in modo che acceleriamo perché siamo a corto di tempo. Ma abbiamo corriamo via nel tempo adesso. OK. Freddo. Quindi, se si desidera aggiungere una classe, c'è anche un metodo di classe add. Questo è solo un esempio di ciò si può fare con jQuery. Che aggiunge solo una classe. 

Se si desidera rimuoverla, è possibile chiamare rimozione. Questa è solo un'altra cosa che puoi fare. Quindi, altri esempi di cose che puoi fare. Quindi posso solo mettere a il top come questo? Il più giovane rimuovi. Se ho appena eseguo che JavaScript a la parte superiore del mio file, sarà che funziona? Giusto. Perché metà non esiste ancora. Quindi questo non è andare a lavorare. Ordine di esecuzione. Va all'inizio prima. Cosa? 

PUBBLICO: Il più giovane non esiste ancora? 

JOSEPH ONG: Già. Il più giovane non esiste ancora. Esattamente. 

AUDIENCE: Hai detto mezzo. 

JOSEPH ONG: Mi dispiace. Il più giovane non esiste ancora. E l'altra cosa è che non ho includere jQuery presentare domanda di script src. Così che non sta andando a lavorare. A dire il vero, non ho fatto che in la diapositiva successiva, che è dovrebbe risolvere nemmeno questo. Ma il modo in cui facciamo questo è JavaScript è evento guidato. Quindi, quello che facciamo è che usiamo un evento handler per rendere questo accada. E così io seleziono il documento set prima. Io dico, OK, quando il documento è pronto, mi permetta di eseguire una funzione. Ecco, questo è tutto ciò che i mezzi di sintassi. 

Ho selezionato il documento. Ora, quando il documento è pronto, eseguire la funzione. E così qui quando il documento è pronto, il che significa che tutto il codice HTML è caricato, poi corro la funzione che rimuove tale elemento. E così ora, quando eseguo questa funzione che ho passato in pronto, io sono garantito che tutto il HTML sul pagina sta per esistere in primo luogo. Sì. Domanda? 

AUDIENCE: Qual è la parola chiave dell'evento all'interno della funzione? 

JOSEPH ONG: Così la parola chiave evento nel funzione è solo un parametro che viene passato alla funzione per qualsiasi evento. E 'solo qualcosa che si ottiene gratuitamente. Quando si utilizza gestori chiave pset8, tale evento potrebbe dire, per esempio, quale tasto è stato premuto su. In questo caso, per un evento ready, in realtà non è super utile. Ma per un evento premuto il tasto, è più utile, perché si arriva a sapere che tasto premuto con il tasto accedendo codice sconto che oggetto evento. Correggere? Ritiene che senso? OK. Sì. Domanda? 

AUDIENCE: Così si può mettere il tag script più in basso? 

JOSEPH ONG: Quindi sì. Si potrebbe mettere lo script tag più in basso. Ma allora diventa solo molto disordinato. E ci piace centralizzare tutte del nostro codice in un unico luogo. E questo ci permetterà di farlo. Ricordate che prima ho detto c'è un posto più bello modo per garantire che gli elementi sono nella pagina prima di eseguire il codice? E questo è solo un bel modo si potrebbe realizzare questo. 

AUDIENCE: [incomprensibile]. 

JOSEPH ONG: Già. Si sarebbe ancora dovuto, giusto? Perché ricordate, è stato incluso il depositare nella parte superiore della pagina. Così sta andando da eseguire prima si arriva al fondo della pagina. OK. Così si può anche aggiungere un altro tipo di gestore di eventi. Questo elabora solo click. Quando clicco su più giovane, poi si aprirà con un avviso. Questo è solo un diverso tipo di evento. Al contrario all'evento pronto, ora utilizzare l'evento click quando si riceve clicca su un elemento. 

E così in questo caso, ricordate, il clic handler è allegato alla più giovane. Così accade solo quando Clicco su più giovane. E nell'altro, l'evento ready è stata allegata al documento. Quindi attende il documento per essere pronti. Dare un senso? Penso di poter andare avanti. Sì. Domanda? 

AUDIENCE: [incomprensibile]. in questo caso si utilizza [incomprensibile]. 

JOSEPH ONG: Oh, sì, perché in questo caso, devo aspettare per i più piccoli elemento visualizzato sullo schermo prima prima di poter associare un gestore click per essa, che è il motivo per cui ho messo dentro di un documento pronto. OK. E il prossimo, quindi questo è un grande esempio di come si potrebbe combinare tutto. Questo è solo un esempio di validazione dei form hai visto nella lezione. Quindi prendere un passo alla volta come si passa attraverso questo. E sarà totalmente OK. Basta leggere da cima a fondo. 

Ho un modulo in fondo. Quando il documento è pronto, allego un submit handler alla forma, in modo tale che quando presento il modulo, ottengo i valori all'interno di ciascuna di tali ingressi. E posso controllare se è vuoto. Se è vuoto, torno falso, perché Io non voglio inviare il modulo, perché la forma è sbagliata. Se la password è vuota o è meno di otto caratteri, non mi sottometto la forma, perché questo è anche sbagliato. E il falso ritorno solo impedisce il modulo da presentare e andare a una nuova pagina. 

E si spera, questo ha un senso. Penso che voi ragazzi dovreste camminare attraverso questo codice passo passo da soli. E una volta capito quello che la selezione elementi e fare cose ad essa in realtà comporta, questo farà un sacco di senso per voi. Sì? 

AUDIENCE: Cosa fa il name = Nome utente significa? 

JOSEPH ONG: Così il nome = nome utente e la name = la password significa basta guardare la Attributo di qualsiasi si sta selezionando. E allora che deve corrispondere. Così andiamo in registrazione. E poi guardiamo a tutti gli ingressi e registrazione. E poi prendiamo quello in cui il nome attributo è uguale a nome utente. Quindi solo che prima selettore seleziona l'input utente. E che secondo selettore seleziona solo la password di uno, perché quelli hanno i loro attributi nome gruppo come quello che che si suppone di essere. Domanda? 

AUDIENCE: Alla presentazione, come fa l' parte inferiore risolvere la parte superiore? 

JOSEPH ONG: Ecco perché del gestore eventi. Quindi stiamo aspettando un evento di presentare che s'incendia dal modulo. E questo è tutto ciò che è submit. Perché mi chiamo presentare lassù? Si dice, quando il modulo viene inviato, Ottengo un evento di presentare. Quindi lasciatemi intercettare questo e quindi eseguire invece questo codice. Sì? 

AUDIENCE: Perché hai avere all'evento funzione? Perché non puoi semplicemente [incomprensibile]? 

JOSEPH ONG: Perché in JavaScript, è devono dichiarare le funzioni. Questo è solo come funziona in JavaScript. Bisogna dire che sta andando per eseguire una funzione. Quindi stai dicendo che che sei in attesa di una funzione qui invece di a soli parentesi graffe. 

AUDIENCE: E la funzione è tutto ciò che segue? 

JOSEPH ONG: Già. La funzione è ciò che è dentro le parentesi graffe dopo che la parola chiave function. Sì? 

AUDIENCE: [incomprensibile]. 

JOSEPH ONG: Per presentare? 

PUBBLICO: No, per la funzione senza l'evento. 

JOSEPH ONG: Già. Così, senza l'evento, si può avere quella. Se non è necessario l'evento, allora si può solo ometterlo. Ma se lo fai, allora si appena messo lì. Sì. Domanda veloce? 

AUDIENCE: [incomprensibile]. 

JOSEPH ONG: Già. Perché quello che devi fare, l' document.ready dice solo aspettare per tutti il codice HTML della pagina per caricare prima. E di solito, si desidera che gli elementi in luogo prima di eseguire qualsiasi codice. Bene. Dobbiamo arrivare a Ajax. Noi non abbiamo molto tempo. Quindi pro e contro. JavaScript è più facile provare scrivere con jQuery. Ma jQuery è una specie di lento. 

E 'come PHP è più lento di C, perché è interpretato. E jQuery è un po 'più lento di JavaScript, perché fa un sacco di cose sotto il cofano. E così se si sta utilizzando jQuery, è solo un po 'più lento di JavaScript, anche se ti dà piacevole eleganza. E, infine, Ajax. Finora con l'Ajax, non avete visto Ajax in termini di pset7 ancora, perché quando si fa, si presenta una forma di preventivo. Si carica una nuova pagina. Così si ottiene questo grande lampo bianco sulla pagina mentre quello secondo caricamento della pagina, giusto? 

Sarebbe davvero bello se si non ha avuto questo flash. Come Facebook, se si scorre verso il fondo, aggiunge nuovi contenuti senza aggiornare l'intera pagina. Quindi, qualcosa di simile sarebbe bello. Questo è il codice JavaScript sul lato sinistro. Si ottiene quello che si trova all'interno di tale ingresso. È possibile ottenere le informazioni magazzino da Yahoo! E allora fate un grande stringa che dice, OK, questo è il messaggio che voglio per visualizzare sullo schermo. E allora metti che il messaggio dentro di qualche elemento HTML che viene visualizzato sullo schermo. 

Ecco, questo è tutto quello che sta accadendo qui. Quindi, fondamentalmente, perché questo è tutto Javascript e non hai bisogno di correre più PHP, questo farà in modo che la pagina non si aggiorna. Quindi questo è solo un'idea astratta che sto dicendo qui, per ora. L'idea astratta è che se lo si fa tutto in JavaScript, non si dispone di un refresh della pagina. Ma come si fa effettivamente fare questo? 

Beh, in realtà, parliamo di un problema con questo primo. Un problema è in JavaScript, esecuzione è sincrona. Quindi devi attendere un linea di finire prima di eseguire la riga successiva. E se sto andando verso Yahoo!, ed i loro server sono molto lento, e li vogliono tre secondi per dammi indietro quello stock informazioni? Quando mi ha colpito quella linea prezzo, se l' esecuzione è sincrona, com'è da di default, cosa sta solo andando a fare è il browser sta per stallo per tre secondi. E non sta andando ad essere in grado di fare nulla mentre ottiene tali dati. Sta andando essere congelati. 

E questo è male. Se non si desidera che un utente avere una pagina web congelato. Correggere? Questo è solo male. Tutti sono d'accordo? Se stai navigando Facebook e si blocca e non si può fare nulla, è ottenere veramente frustrato. Quindi la soluzione è che facciamo qualcosa asincrona, invece. Quindi tutto questo cosa dice asincrona è, ho intenzione di chiedere a questo URL per alcuni dati. E poi ho intenzione di andare avanti. Sto solo andando a tenere esecuzione qualunque sia il codice che è stato dopo. 

Quindi ogni volta che i dati sono pronti, allora io elaborarlo. Questo è tutto quello che sta dicendo. 

AUDIENCE: Ajax fa solo codice asincrono? 

JOSEPH ONG: E 'un asincrona modo di dati Recupero. Quindi la prima cosa su Ajax è mi permette di ottenere dati da un sito esterno. E la seconda cosa è che rende sicuro che la mia pagina non stalla, mentre io sono recupero i dati. Questa è la parte asincrona di esso. Perché va da qualche altra parte, perché dico che continuare ad andare avanti, mentre è che il recupero dei dati, che rende asincrona. Continuo esecuzione. 

In modo da tenere asincrona idea in mente. E io vi mostrerò che cosa la differenza è. La versione sincrona è sul lato sinistro. La versione asincrona è sul lato destro. Guardate i numeri per vedere quali misure corrispondono a ciò che esegue ad ogni riga. Laggiù, l'avviso si presenta in primo luogo. Perché ottenere archivio informazioni da Yahoo! prende tre secondi, si verifica uno stallo per tre secondi. E poi avvisa il prezzo dopo quei tre secondi. 

Così ora, che i programmi di avviso fino a quel momento - tre secondi dentro E poi avvisa via dopo. Quindi si va solo passo per passo. E 'come quello che voi ragazzi avrebbe accettato, giusto? Con l'esecuzione asincrona, avvisare prima. Poi si va fuori a questo URL. E tu dici, io vado a basta chiedere per i dati. E poi ho intenzione di elaborarlo successivamente. Quindi esegue immediatamente l' riga successiva dopo faccio che richiesta asincrona. 

Così un 0,001 secondi, si vede avviso hi. Eseguire tale funzione, allarme bye. E perché ho fatto una promessa che ho grado di trattare i dati in seguito, ciò accade è quando i dati torna tre secondi dopo, poi corro che funzione che ho laggiù. Sì? 

AUDIENCE: Potresti specificare o chiarire cosa significa Ajax? 

JOSEPH ONG: Quindi Ajax è un modo che se io bisogno di dati quando mi trovo su un sito web e mi non si vuole aggiornare la pagina, poi Io uso questa tecnologia chiamata Ajax. Questo significa essenzialmente solo, andare recuperare dati da un altro sito web. E farlo in un modo che solo non stallo mia pagina web. 

AUDIENCE: Quindi è che un intrinseco parte di JavaScript o jQuery? 

JOSEPH ONG: Così qualcuno ha scritto un modo per farlo questo in JavaScript molto tempo fa. A un certo punto, non esisteva. E così qualcuno ha inventato questa tecnica per permettere alle persone di chiedere questi dati in questo modo. E hanno scritto alcune cose di farlo per voi. E jQuery appena ti dà questo molto bel modo per farlo con questo $. ottenere la funzione. domande? Posso rispondere a domande su Ajax dopo troppo. Sarò qui. 

Quindi cerchiamo di noi recuperare i dati senza l'aggiornamento della pagina. E andiamo a fare questo in un modo asincrono che non congelare la pagina. Troppo a lungo, non ha letto che se spiegazione era troppo lungo per te. Così alla fine, cross-site attacchi di scripting. Lo abbiamo visto con Zamyla. Se nel mio database qualcuno ha questo nome, che è questo tag script, e io avere qualche codice sulla mia pagina che stampa i nomi delle persone in fila, o che ho un codice JavaScript che inserisce questo nome nella pagina, Cosa HTML viene prodotto? Beh, mi stampare il tag HTML. Ho stampare tutti questi tag. 

Ho arrivare alla parte dove sono stampa con i miei amici. Stampo Lauren fuori. Stampa Milo fuori. E poi il mio nome nel database è Post Script poco lusinghiero status di Facebook. Perché ho inserito questo nella pagina perché sembra che Javascript, quando questa pagina viene inviata all'utente, Viene eseguito come JavaScript. E così questo è ciò che chiamiamo un attacco cross-site scripting. Qualcuno mette informazione dannoso il database che potrebbe corrispondere a qualche stringa supplementare o qualche stringa JavaScript. 

E quando viene stampata la La pagina in questo modo, allora cosa che succede è che il codice viene eseguito male che non ho intenzione per farlo eseguito. E questo è tutto un cross-site attacco di scripting è. E il modo di andare in giro questo è come Zamyla detto. Basta avvolgere le cose in HTML caratteri speciali. E questo HTML i caratteri speciali è un PHP funzione che impedisce questo tipo di cosa accada a te se avete un dannoso stringa nel database. Semplicemente sfugge, in modo che non fa ottenere interpretato come HTML. Sostituisce le piccole staffe con quello che noi chiamiamo entità. E siamo andati oltre questo nella lezione troppo. Quindi penso che voi ragazzi dovreste avere una buona conoscenza su questo. Domande? Sì. 

AUDIENCE: Così come sarebbe il [incomprensibile]? 

JOSEPH ONG: dirlo. 

AUDIENCE: Come sarebbe il monitor - 

JOSEPH ONG: Giusto. Così avete qualcosa che dice, quando Mi iscrivo, digitare il mio nome. Ho solo digitare in tale campo, il mio nome è stript posto poco lusinghiero Facebook stato vicino tag script. E che appena viene messo in banca dati, perché non posso dire a qualcuno nel mondo non ha un nome con una freccia sinistra in essi o script di parola in esso. Che in realtà non ha senso. Quindi devo solo fare in modo che io disinfettare la roba prima di stamparlo out alla pagina. 

AUDIENCE: Così le carte speciali HTML previene i tag di script? 

JOSEPH ONG: Già. Quindi non impedisce i tag script. Si fa solo in modo che il tag script non ottengono interpretata come HTML o - sì. Si tratta proprio come quello che che effettivamente è. Bene. Così che era la revisione quiz. Freddo. 

[Applausi]