[Powered by Google Translate] [Settimana 9] [David J. Malan - Harvard University] [Questo è CS50. - CS50.TV] Bene. Bentornato. Questo è CS50, e questo è l'inizio della settimana 9. Oggi ci concentriamo in particolare sul design, non più nel contesto di C ma nel contesto di PHP e un po 'di SQL e un po' di JavaScript, in particolare verso la fine di entrambi pset 7 e anche il progetto finale. In realtà, se si è a quel punto nel progetto finale dove presumibilmente di circa un'ora fa, almeno, ha iniziato a dare qualche pensiero per il progetto finale e stai pensando che ci piacerebbe collaborare con 1 o 2 compagni di classe, se hai problemi di connessione con detti compagni di classe, non esitate a compilare il modulo di cs50.net/partners/form. Chiede te chi sei, che tipo di progetto su cui state pensando, in cui si vive solo per motivi logistici. E poi se si vuole tenere d'occhio la prossima settimana o giù di lì l'URL foglio di là, è possibile vedere una versione di sola lettura del documento Google in cui stiamo raccolta di tali informazioni. Quindi, se si desidera lavorare con qualcuno, con tutti i mezzi sentitevi liberi di raggiungere le persone attraverso tale meccanismo. Ma la maggior parte delle persone fanno il lavoro da solo. E 'tutto bene. Quindi non credo che questo sia in qualche modo obbligatorio. Venerdì scorso è stato solo io e alcuni del team qui, teatro vuoto per la maggior parte. Ci sono stati 3 turisti seduti lassù, così che era un po 'imbarazzante. Quello che abbiamo parlato era database e abbiamo parlato di pset 7 un po '. E se non è successo per la cattura che in video appena ancora, va bene. Cercherò di definire tutti i termini che altrimenti diamo per scontato sulla base di lezione Venerdì. 

Ma oggi stiamo andando a cercare di ottenere il punto non solo di essere in grado di fare qualcosa di simile pset 7 ma in realtà capire che cosa sta succedendo sotto il cofano, in particolare alcune delle astrazioni che abbiamo messo in atto nel file functions.php per rendere la vostra vita un po 'più facile, ma in ultima analisi, in modo da capire in modo che quando le ruote di formazione venire fuori in poche settimane si può ancora sopravvivere nel mondo reale e fare queste cose senza un quadro CS50 sotto di voi. Questo $ _SESSION, per quelli di voi che hanno familiarità o che già catturato il video il Venerdì, cosa SESSIONE facciamolo in un PHP-based web? Questa è una variabile superglobale, che significa che è simile nello spirito alla GET e POST e pochi altri, ma che cosa è questa cosa serve? 

Che cosa è SESSIONE usa? Gia '. [Studente] Logging in Scusa? [Studente] Logging in Logging in effetti. In pset 7 si sta utilizzando questo superglobale SESSIONE per facilitare Logging in E che cosa è bella di questo superglobale è che è un array associativo. Un array associativo, ricordo, è solo un array, ma i cui indici non devono più essere numeri come 012. Essi possono essere numeri oppure possono essere anche stringhe. E quindi se hai tuffò pset 7 ancora, si può ricordare che abbiamo memorizzato un ID chiave denominata all'interno di questo array associativo il cui valore è qualcosa come 123 - qualunque sia attualmente connesso ID dell'utente è. La ragione per questo è che, anche dopo che l'utente ha visitato localhost o più in generale il mio sito web e poi hanno effettuato l'accesso, anche se non si fa clic su un collegamento o tornare al mio sito web per 5 minuti o anche un'ora o anche un giorno, ma lasciano la loro finestra del browser aperta, attraverso questo superglobale posso ricordare che sono loggato 

In altre parole, mi permette di memorizzare un po 'a lungo termine, qualcosa che voglio su un utente. E si può pensare davvero come l'incarnazione di un carrello della spesa. Luoghi come Amazon, ovviamente, puoi mettere le cose in un carrello della spesa, ma HTTP, il protocollo che alimenta il Web, è stateless nel senso che quando si visita un sito web, per la maggior parte non si dispone di un po 'di connessione di rete costante tra il browser e il server. Non appena hai scaricato il codice HTML e le immagini JPEG e le GIF e tutto il resto, la connessione va via e non resta che una copia del codice HTML e quant'altro dal server. Ma se il server vuole ricordare qualcosa su di te, il peso è sul server di registrare effettivamente tali informazioni. E così il programmatore che ha il controllo del server può mettere qualsiasi cosa che si desidera all'interno di questo array associativo superglobale e sarà la prossima volta che l'utente ritorna, che si tratti di minuti o addirittura giorni dopo, a meno che chiudere il proprio finestra del browser, in cui SESSIONE punto scompare. Quindi è di archiviazione effimera, è non-persistente, e ha lo scopo di andare via appena l'utente chiude il browser - non solo quella scheda, spesso l'intero browser, così efficacemente la registrazione l'utente. Così come è questa cosa effettivamente attuato? Diamo un rapido sguardo a un semplice esempio abbiamo guardato il Venerdì. Per chi non conosce, è stato semplice come questo. Questa è una pagina web il cui unico scopo nella vita è quello di dirmi quante volte ho visitato questa pagina. Questa è la prima volta qui il Lunedi che l'ho visitato, così si dice 0 volte. 

Ma se mi metto a ricaricare la pagina, si dice 1 volta, 2, 3, 4, 5, e questo puo 'solo continuare a contare su, su, su, su, su per ogni volta che ho effettivamente fare clic su Ricarica su di esso. Così come è questo lavoro? Lasciami andare all'interno di questo file chiamato counter.php. La parte superiore di esso è tutti i commenti blu, ma la parte interessante è qui. Alla riga 13 si chiama questa funzione session_start, e che è letteralmente tutto quello che devi fare se vuoi avere accesso a questo superglobale speciale chiamata $ _SESSION. Questo rende possibile, e vedremo in un momento come questo è tutto possibile. In linea 16 avviso quello che sto facendo. Se la chiave, chiamato contatore - in altre parole, il valore di indice - "contatore" esiste all'interno di questo array chiamato SESSIONE, allora che cosa sto facendo con esso nella riga sottostante? Qual è la linea 18 facendo? 

[Risposta degli studenti incomprensibile] Che cos'è? [Studente] Conservazione del valore. Bene. E 'la memorizzazione del valore che è in sessione al momento in una nuova variabile locale temporanea, $ Contatore in tutte minuscole. Si noti che PHP è già in corso un po 'pigro qui. Si noti che non abbiamo alcuna menzione di int o float o stringa o qualcosa di simile perché PHP è debolmente tipizzato, per cui non è necessario specificare il tipo di una variabile, e in questo caso qui non ho nemmeno ancora dichiarato. Lo sto dichiarando all'interno di queste parentesi graffe e, diversamente da C, questo è in realtà va bene. Non importa quanto profondamente annidato la dichiarazione di una variabile è in PHP - all'interno di parentesi graffe, all'interno della parentesi graffa e simili - sarà in quel momento nel tempo esistono per il resto del programma, nel bene e nel male. Così diventa immediatamente globale, non appena lo si definisce come stiamo facendo qui. 

In caso contrario, se non trovo che ci sia qualcosa nel superglobale SESSION, Mi pare di inizializzazione questo contatore variabile a 0, in tal modo solo supponendo che l'utente non è mai stato qui prima. E allora questo corso è di incrementare il contatore come? Sto aggiornando il valore che c'è dentro di questo array associativo impostandolo uguale a tutto ciò che è attualmente contatore + 1. Se scorrere verso il basso qui per il codice HTML della pagina, in realtà è abbastanza semplice. Tutto quello che ho nel corpo di questa pagina è: "Hai visitato questo sito volte così e così." E questo è un costrutto PHP. Se lo fai <? =, Questo equivale effettivamente a quale funzione? E 'davvero una cosa del genere equivale a printf, che abbiamo visto molte volte in C, anche se, come forse sapete già dalla spec in pset 7, stampa è anche una funzione che si limita a stampare qualcosa, in realtà non utilizzare i codici di formato, e si può effettivamente dire eco pure. Sono tutti sempre in modo leggermente diverso, anche se l'effetto netto è in definitiva la stessa. Quindi, questo uso del segno di uguale è solo una sorta di un modo elegante per farlo più brevemente di quanto si possa altrimenti essere in grado di. Ecco, questo è tutto il sito fa. Si stampa il valore del contatore. Come tutto questo realmente accadendo? Si può richiamare una settimana fa abbiamo iniziato a cercare sotto la cappa il modo in cui una pagina Web funziona utilizzando questa scheda Impostazioni. 

Chrome ha questo sia nella versione per Mac, la versione per Windows, e anche la versione per Linux, e Firefox e IE hanno meccanismi simili per cui si dispone di questo debugger incorporato all'interno del browser. Diamo uno sguardo al seguente. Abbiamo un sacco di schede qui, e ricordare che quello più a sinistra è Elements, e non importa quanto godawful il codice HTML e JavaScript in una pagina, Ricordiamo che con la scheda elementi si può effettivamente navigare il codice HTML gerarchicamente e bello e pulito. Quindi, se si sta cercando di imparare da un sito web come Google o Facebook o davvero qualsiasi sito web, si rendono conto che probabilmente stai meglio guardando il codice sorgente in questo modo invece di visualizzare la fonte prima, che può essere un disastro, come abbiamo visto in particolare sul sito di Google. Quindi, se io invece fare clic sulla scheda di rete qui, vediamo cosa succede durante la mia visita questa pagina. In primo luogo vorrei cancellare la cache. Ho intenzione di andare in Impostazioni in Chrome e poi andare alla Storia e quindi cancellare tutti i dati di navigazione. Potrebbe essere usato per fare questo per altri scopi, [risate] ma quando si tratta di siti web in via di sviluppo, in realtà è utile - se stai ridendo sai. [Risate] In realtà è molto utile nello sviluppo di siti web, perché la realtà è cose come i biscotti e cose del genere memorizzati nella cache i file HTML, cache file JavaScript può effettivamente diventare un grande mal di testa, perché se per qualsiasi ragione il browser decide di memorizzare nella cache alcuni file e tu hai fatto cambiamenti a questo file sul server ma il browser non ha davvero capito che il file è stato modificato e quindi in realtà non ri-scaricare anche quando si fa clic sul pulsante Ricarica, uno dei modi più infallibili per fare solo che la colpa non è con il codice, è con il comportamento del browser, è quello di andare in qui nel tuo browser e solo cancellare tutta la storia in modo che non c'è confusione. 

E poi se si vuole veramente essere paranoici, chiudere il browser, riavviarlo, e quindi assicurarsi che tutto funzioni come previsto. Così, in breve, dalla cache è un bene quando si fa sviluppo. Ecco quindi la scheda di rete. Ho già aveva visitato il sito di 9 volte, ma lasciami andare avanti ora e fare clic su Ricarica. E sono tornato a 0. Facciamo vedere come in realtà è che questo superglobale sessione è in corso di attuazione. Io vado a cliccare sulla richiesta 1 HTTP che è stato fatto, e questa finestra di debug mi permette di guardare all'interno di questo. Qui vedo solo la risposta dal server, che non è interessante. Ho visto questo in molti modi. Ma ciò che è tecnicamente interessanti sono le intestazioni. Se scorrere verso il basso qui e concentrarsi sulle intestazioni di richiesta e fare clic su visualizza sorgente, quello che sto andando a vedere è letteralmente la richiesta HTTP che appena andato dal mio browser al server, GET è la parola chiave e poi / counter.php essere il nome del file, HTTP/1.1 solo di essere la versione di HTTP che il mio browser utilizza. Questa linea: ecco un piccolo promemoria dal browser al server quello che il nome del server è che vuole parlare. E poi il resto di questo a volte è interessante, ma non è rilevante in questo momento. 

Questo è solo una specie di curiosità. Cryptic se questa stringa è, ogni volta che il browser visita un sito web è informare il server browser che si sta utilizzando e il sistema operativo che si sta utilizzando e la versione della stessa. Quindi, se vi siete mai chiesti come siti come CNN e quant'altro sapere quali sono le percentuali sono di utenti Mac sugli utenti Web, PC, Utenti di Internet Explorer, gli utenti Chrome e simili, è perché tutti i browser stanno dicendo ogni singolo sito web là fuori ciò che siamo. Non necessariamente contengono informazioni personali, ma lo fa dire al server che cosa il vostro indirizzo IP e il browser e il sistema operativo in uso. Ecco dove queste informazioni sono. Ma ciò che è più interessante ora, quando si tratta di queste sessioni è l'intestazione della risposta. Permettetemi di fare clic su Visualizzazione accanto alla risposta. La cosa interessante qui è un paio di cose. 1, siamo tornati un codice di stato 200. Non abbiamo mai vedere questo codice di stato, perché significa che tutto va bene. Letteralmente significa bene in contrasto con qualcos'altro. Che cosa è un numero che a volte vediamo che è male? [Studente] 404. 404, file not found, 403 si potrebbe inciampare su di già, che è vietata, il che significa che si è dimenticato di qualcosa di chmod, molto probabilmente. E ci sono un mucchio di altri. 

Giù qui, questo è un po 'pazzo. Ho davvero appena scritto questo file pochi minuti fa da incollandolo in gedit. Perché questa pagina scadrà nel 1981, prima c'era davvero un Web? Che cosa sta succedendo lì? 

[Risposta incomprensibile studente] La data e ora. Ma perché? E 'un po' arbitraria, ma in realtà è utile. Che cosa questo sta dicendo al mio browser non è questo file PHP che hai appena chiesto è già scaduto. Infatti, è scaduto 30 anni fa. Ma che cosa significa in realtà? Significa solo che la prossima volta che l'utente visita la pagina, se per il ricarico o digitando l'URL nella barra degli indirizzi, assicuratevi di andare a prendere una nuova copia di esso. Questa è una specie di un esempio di busting della cache, una parola stupida che significa solo cercando di scoraggiare i browser da realtà caching HTML che è stato inviato da un server di in modo che non accidentalmente colpito ricarica e poi vedere la stessa versione del file. In realtà si desidera che il server di inviare una nuova copia. Quindi il fatto che il 1981 significa solo che questo è ciò che l'apparecchio è la scelta come una data arbitraria nel passato. Ma la linea vera succosa è questo. Anche prima del 50 probabilmente siete vagamente familiare con i biscotti. A partire da ora, soprattutto tra quelli meno confortevoli o in mezzo, che cosa è un cookie nella vostra comprensione in questo momento anche se stiamo per rendere la vostra comprensione più tecnico? Che cos'è un cookie? Gia '. [Studente] Informazioni sull'utente, come se hanno scritto il proprio nome utente o qualcosa del genere. 

Bene. Si tratta di informazioni sull'utente, se hanno digitato il nome utente già. I cookie sono un modo con cui i server di ricordare qualcosa su un utente. E che un cookie è in realtà è un file di testo o una sequenza di byte che è piantato dal server all'interno del browser, e all'interno di quel file o tra questi byte è una sorta di identificativo. Forse è letteralmente il nome utente, ma più spesso è qualcosa di più criptico di aspetto come questa cosa qui - bo8dal3ct e così via - questa stringa alfanumerica davvero grande che è in realtà solo vuole essere un identificatore univoco per voi. Oppure si può pensare ad esso come una sorta di timbro di mano virtuale. Se si va a qualche club o un parco di divertimenti, per ricordare che hai effettivamente pagato e andato in, hanno messo un piccolo adesivo rosso sulla mano di qualche tipo, e che ricorda le persone al banco che hai già pagato e si può andare e venire a piacimento. I cookie sono un po 'simile nello spirito a quella. La prima volta che ho visitato questo sito, come ho appena fatto dopo aver eliminato la cache, il server web, l'apparecchio in questo caso, mettere un timbro sulla mano il cui nome è PHPSESSID, ID di sessione, il cui valore è la stringa alfanumerica veramente lungo. 

Ecco, questo è ormai una sorta di blasonate sulla mia mano in modo che la prossima volta che mi ha colpito ricaricare o manualmente visitare questo URL in un browser, il mio browser per definizione di HTTP sta per presentare il timbro a mano ancora e ancora e ancora. Così, anche se il server non necessariamente sa chi sono io, almeno loro sanno che io sono lo stesso utente o per lo meno, più in particolare, lo stesso browser. E così questo è in definitiva come il superglobale SESSION viene implementato. Il server non ha idea di chi sei quando si rivisita un sito web per la seconda o la terza volta a meno che non presenti questo francobollo mano. E non appena si presenti quel timbro mano, il server web va essenzialmente in un piccolo database propria e controlli, va bene, ho appena visto il timbro mano di bo8dal3ct utente e così via. Fammi vedere quali informazioni il programmatore ha memorizzato interno della superglobale per questo utente, e poi voglio fare in modo che che i dati è di nuovo all'interno del SESSIONE superglobale in modo che il programmatore può nuovamente accedere ai dati anche se è stato fissato alcuni minuti o ore fa. Quindi, in altre parole, i biscotti, che ha ottenuto una cattiva reputazione per qualche tempo a causa delle insicurezze nei browser e possono davvero violare la nostra privacy e tutto questo, in realtà hanno grande utilità perché senza di loro si sarebbe costantemente l'accesso a ogni pagina di Facebook si visita o ogni e-mail di Gmail si legge se il browser non ha un modo di ricordare che hai già autenticato. 

Quindi, in questo modo i cookie vengono inviati avanti e indietro attraverso il filo. Un'altra curiosità sui cookie, soprattutto qui, è che questo è completamente in chiaro. Non c'è la crittografia sta succedendo qui di sorta, e in effetti sto usando HTTP in questo momento. Uno dei nostri momenti preferiti in CS50, che è ormai 2 anni fa, è stato tutto il tempo di uno strumento chiamato Firesheep è venuto fuori. Questo è stato un software gratuito che è stato fatto da un ricercatore di sicurezza come un campanello d'allarme per la comunità per dire quanto atrocemente implementato alcuni meccanismi di autenticazione sul web erano. Così, per qualche tempo, Facebook è stato quasi interamente su HTTP, HTTPS n. E anche se non avete idea di come la crittografia funziona, S è sicuro quindi vuol dire che ci sia almeno un po 'di crittazione. Facebook ha utilizzato per crittografare i nomi utente e le password, ma non appena si guardò i vostri Pokemon oi vostri messaggi o tuo feed di notizie, tutto questo è chiaro. Così è stato fino a poco Gmail un anno o due fa. Ogni volta che ci si è collegati, sì, hanno usato la crittografia sicura, ma poi non l'hanno fatto. E perché sarebbe? Perché non utilizzare la crittografia per tutto il tempo in casi d'uso come questo? Che cos'è? Penso di aver sentito qualcosa. [Studente] Velocità. Velocità, giusto? Ci sono modi per aggirare questo. Ma se solo tipo di pensare logicamente, se si crittografa qualcosa, quello che dovete fare almeno un po 'di lavoro di più. In pset 2 quando è stato implementato Cesare o Vigenère o anche Crack, solo la stampa di una stringa è relativamente facile. Crittografia e quindi la stampa di una stringa minimamente richiede un lavoro un po 'di più. 

 Per i super-siti web popolari come Google e Facebook, se si deve lavorare di più per ogni utente per ogni singola pagina web che visitano, che vuole solo più tempo di CPU. E se avete bisogno di più tempo di CPU, potrebbe essere necessario più server, il che significa che potrebbe essere necessario più soldi. E così per molti anni, questo proprio non era davvero delle migliori pratiche. La gente utilizza la crittografia SSL solo quando avevano bisogno di. Ma si è scoperto, e come costui con Firesheep in super chiaro, quando voi ragazzi che sono attualmente su Facebook in questo momento - Per curiosità, vediamo se ti confessa. Se siete su Facebook in questo momento in qualche scheda, anche se non è in primo piano, è l'URL HTTP o HTTPS? [Più studenti] S. S? [Risate] Va bene. Qualsiasi HTTP? Situato a solo 1? Va bene. Così tutti noi possiamo incidere account di Facebook di quel tizio in questo momento. Per la maggior parte questo è diventato attivo di default, almeno in alcuni siti web. E per farla breve, se il tuo traffico web non è crittografato, non solo il codice HTML andare avanti e indietro attraverso le WiFis in chiaro, in modo da fare le cose come i biscotti andare avanti e indietro per tutta l'aria senza alcuna forma di crittografia. Quindi, se avete un po 'di buon senso programmazione o un po' di usare Google competenze per trovare software gratuito che fa questo, tutto ciò che dovete fare è sedersi a Starbucks o sedersi in un aeroporto dove è generalmente chiaro WiFi e solo guardare per parole chiave come Set-Cookie: PHPSESSID o perché se si ha la conoscenza tecnologica per guardare solo il WiFi per tutti i bit che tutto il flusso d'aria per questo modello, si può quindi dire che la PHPSESSID ragazzo sembra essere bo8dal e così via. E poi di nuovo, se siete sufficientemente smaliziati o avere lo strumento giusto, si può quindi solo riconfigurare il browser per iniziare a presentare quel timbro mano a Facebook.com, e Facebook è solo andare a supporre che sei quel tipo perché tutti sanno che non è chi sei, ma che si dispone di questo identificatore univoco. Quindi, se si ruba che identificatore univoco e presentarlo al server Web come il tuo, sono solo intenzione di mostrare feed di notizie di quella persona o di quella persona messaggi o poke. 

E io ora come Google per attivare HTTPS per Facebook forse. Ma è davvero così semplice come sembra. E così Facebook e Google e simili hanno ottenuto davvero bravo in questo, ma tenete gli occhi aperti tanto più per i siti web visitati che non utilizzano il protocollo HTTP e avere un qualche tipo di informazioni sensibili su di loro, se è finanziario o personale o simili. Se non si utilizza questo, molto probabilmente i cookie come questo può essere molto facilmente rubati e poi forgiato, ed è esattamente quello che ha fatto Firesheep. Non c'era bisogno di essere un programmatore. Tutto quello che doveva fare era disporre di una connessione Internet, scaricare questo strumento gratuito, e quello che vorrei fare è la connessione e poi ti mostrano i nomi di Facebook in ognuno di Sanders, in questa dimostrazione particolare, intorno a te e tutto quello che doveva fare era fare clic sul loro nome e il software automatizzato il processo di sniffing il cookie, presentandolo a Facebook come il tuo, e, voilà, sei loggato Quindi questo è un altro di quei "non fare questo" ufficialmente. Se si dispone di una rete domestica e si desidera sperimentare, con tutti i mezzi, ma realizzare questo non attraversare la linea in un ambiente universitario. 

Ma l'obiettivo qui è davvero a sottolineare non come fare ma come difendersi da questo genere di cose. E la soluzione banale qui, anche se essa stessa è viziata, è quello di ridurre realmente l'uso di altri siti che non utilizzano HTTPS costantemente. Quindi, siti come Facebook e Google hanno sempre più caselle di controllo dove si può optare per questo genere di cose, e le banche hanno avuto per anni per ragioni analoghe. Quindi, solo un po 'di un fattore di paura, se possiamo. Ma che è, in poche parole. È così che un server si ricorda chi sei. E non appena si riesce a ricordare chi sei, si può ricordare nulla di te che il programmatore ha memorizzato all'interno di questo superglobale speciale chiamata $ _SESSION. E per pset 7 si è in uso banalmente solo per ricordare un int, vale a dire l'ID univoco dell'utente che ha effettuato l'accesso, in modo che sappiamo che ci sono stato prima. Tutte le domande poi su sessioni o cookie o simili? Firesheep non funziona più bene, e si deve mettere il computer in una speciale modalità promiscua così si sta effettivamente in ascolto del traffico, oltre voi stessi. Quindi, se si sta scaricando Firesheep, rendersene conto è non è così facile come una volta di dimostrare. Bene. E non lo fanno a Sanders. Fatelo a casa. Basi di dati. Una delle cose che abbiamo fatto in pset 7 molto deliberatamente è stato vi diamo una tabella di database di esempio per gli utenti che ha alcuni ID utente, alcuni nomi utente e le password criptate in esso alcuni. E come vedrete, se non l'hai già fatto, si sta andando ad avere per modificare la tabella un po '. Stai andando ad avere per aggiungere un po 'di cache per ciascuno degli utenti in tale tabella, e si sta andando ad avere per aggiungere un'altra tabella storia, una tabella di portafogli, o forse chiamarlo qualcos'altro. Ma in termini di pensare a come fare questo, cerchiamo di aprire questo strumento che abbiamo usato il Venerdì, ma se non familiare, l'apparecchio è dotato di uno strumento di chiamato phpMyAdmin che è guarda caso scritto in PHP, ma il suo scopo nella vita, dopo il login qui come jharvard di cremisi, è di darmi una interfaccia user-friendly di visualizzare e modificare il mio database. 

Il database che sto correndo l'apparecchio si chiama MySQL. Questo è molto popolare, ed è un database gratuito open source che è estremamente facile da usare, in particolare con la parte anteriore finisce così. Ciò che questo strumento mi permette di fare, per esempio, è attizzare intorno ai tavoli. Lasciatemi andare avanti e farlo. Venerdì abbiamo creato una tabella denominata studenti che era super semplice. Aveva 3 colonne - id, nome, e-mail - e ho inserito manualmente un paio di righe come David e Mike in questo esempio particolare. Prendiamo questo un po 'oltre, e supponiamo che vogliamo ricordare di più di un semplice nome ed email su un utente. Permettetemi di fare clic su Struttura qui in alto. E ancora, il pset ti guida attraverso i passi necessari qui, quindi non preoccupatevi se una parte di questa è un po 'veloce. Poi ho intenzione di fare clic su qui. Ho intenzione di aggiungere un certo numero di colonne dopo e-mail perché voglio aggiungere qualcosa di simile a casa. Ho dimenticato di registrare casa di uno studente. Lasciatemi fare clic su Vai, e ora abbiamo questa forma che è, purtroppo, un po 'largo da sinistra a destra, ma ho intenzione di chiamare il nome di questa casa campo, e poi il tipo di ora deve scegliere. Quindi cerchiamo di fare una chiacchierata breve descrizione dei vari tipi di MySQL perché mentre PHP è debolmente tipizzato e che tipo di gioca a tira e molla con i tipi, in un database in particolare è importante super per utilizzare effettivamente la tipizzazione a vostro vantaggio perché una delle cose MySQL e altri motori di database può fare per voi è assicurarsi di non inserire dati fasulli nel database. Questa è una sorta di errori di controllo a vostra disposizione. 

Per la casa che, ovviamente, non voglio che sia un int, che è un valore a 32 bit in MySQL. Abbiamo fatto parlare brevemente il Venerdì su varchar, che sta per lunghezza variabile char. Che cosa è questo? Ciò consente di specificare che si desidera che questo sia una stringa di qualche tipo. Non so davvero in anticipo quanto è lungo, quindi ci arbitrariamente pronunciare un nome casa può essere 255 caratteri, ma si potrebbe andare con 32, 64 - un numero davvero. Ma il vantaggio di utilizzare un varchar sopra un campo denominato char è quello? Proprio intuitivamente se scorrere verso il basso qui, si noti c'è char e c'è varchar. Varchar è a lunghezza variabile char, char è una lunghezza fissa char. Quindi, basandoci solo su tale definizione, qual è il vantaggio o svantaggio di ciascuno di questi? In altre parole, che si preoccupa per la distinzione, o perché te ne importa? 

Gia '. [Studente] Varchar ha più flessibilità, ma occupa più memoria. Bene. Varchar occupa più - Vediamo. Non so se ho sentito bene. Puoi dire che ancora una volta? [Studente] ho detto varchar probabilmente ha più flessibilità, ma ci vuole più memoria. Interessante. Va bene. Varchar dà probabilmente una maggiore flessibilità ma occupa più memoria. Quest'ultimo non è necessariamente vero. Dipende dal contesto, ma torniamo a questo. 

[Risposta incomprensibile studente] Esattamente. In realtà è il caso che char in genere utilizzare più memoria perché un carattere, come in C, è come una stringa, è un array di caratteri. Quindi, se si dice un campo char di lunghezza 255, il database è letteralmente sta per darti 255 caratteri. E se la casa finisce per essere personaggi Mather e 6 in totale, stai perdendo più di 200 caratteri. 

Così un varchar effettivamente utilizza solo i caratteri che è necessario fino ad un importo massimo. Ma il prezzo da pagare è in realtà le prestazioni, potenzialmente. Se sapete in anticipo che tutte le stringhe saranno 8 caratteri - per esempio, se si desidera che le password di lunghezza 8 - al rialzo di utilizzare un campo char a volte, se non spesso, è quello di specificare una lunghezza fissa per qualcosa come una password perché ora il database può essere ancora più intelligente. Se si sa che ogni campo char, ogni stringa in una colonna è la stessa lunghezza, si ritorna la funzione di accesso casuale. È possibile passare in giro tra i vari campi char nella tabella di database perché pensare a un database come righe e colonne. Quindi se ogni una delle stringhe della stessa lunghezza, si sa che la prima è in byte 0, la prossima è nel byte 8 e poi 16 e poi 24 e così via. Quindi, se tutte le stringhe sono della stessa lunghezza, è possibile saltare in modo più efficiente. Così che può essere un vantaggio in termini di prestazioni, ma in genere non si ha il lusso di sapere in anticipo, quindi un varchar è la strada da percorrere. Ecco un altro dettaglio che anche Facebook ha incontrato alla fine. Ints sono grandi, e abbiamo una sorta di utilizzarli per impostazione predefinita ogni volta che si desidera un numero, ma è solo 32 bit. 

E anche se Facebook non hanno abbastanza 4 miliardi di utenti ora, ci sono sicuramente alcune persone là fuori con più account o gli account che sono stati aperti e poi chiusi, e così Facebook stesso credo che qualche anno fa aveva la transizione da int a, come è giustamente chiamato, bigint, che si trova a soli 64 bit, invece. Quindi, anche questa è una decisione di progettazione. Si sarebbe incredibilmente fortunato se il tuo progetto finale risulta di avvio, ha 4 miliardi e 1 utenti, prendere o lasciare, in tal caso, con interi potrebbe essere un po 'miope. Ma in realtà, la tabella utenti è probabilmente bene con int. Ma per qualcosa come pset 7, come la vostra tabella di storia, si potrebbe avere migliaia, milioni di utenti se si evolvono in etrade.com. Così, mentre si potrebbe non avere più di 4 miliardi di utenti, quegli utenti che non hanno possono avere più di 4 miliardi di transazioni nel corso del tempo - compra e vende le cose e della loro storia. Quindi, se si fa anticipare - ancora una volta, si tratta di problemi bene avere se si dispone di questa quantità di dati - se si fa anticipare dati che superano la dimensione di un int, andare con qualcosa di simile a bigint è una direzione non abbastanza frequentemente adottata dai progettisti perché dato che la gente non sarà un problema, ma è così facile scegliere qualcosa di più grande di questo. Decimale stiamo usando in pset 7, che specifica precisione fissa in modo da poter evitare i problemi che coinvolgono float e double e reali e simili. 

E poi ci sono alcuni altri campi qui. Ci onda le mani su di loro in una certa misura. Ma date, gli orari tutti hanno un formato predefinito in MySQL, e il vantaggio di memorizzare date come date e non VARCHAR significa che il database può effettivamente riformattare in diversi formati, se un formato degli Stati Uniti o formato europeo o simili - ma lo vuoi - molto più efficiente se fosse solo un po 'di generico varchar. E poi c'è qualche altra binary, varbinary, blob. Si tratta di oggetti binari di grandi dimensioni, ed è possibile anche memorizzare dati binari così come i dati geometrici in un database. Ma per noi di solito ci preoccupiamo int e VARCHAR e simili. Facciamo finire questo esempio con la casa. Casa ho intenzione di dire arbitrariamente sarà 255 caratteri. Poi valore di default che potrebbe fare questo. Potremmo per impostazione predefinita mettere tutti in Mather Casa, per esempio. Ecco come si potrebbe specificare che il database dovrebbe assicurare che qualcuno ha sempre un valore. Ma lascio che sia. Infatti, per le persone che vivono fuori dal campus e non in una casa, forse in realtà desidera specificare che il valore predefinito è NULL per la casa, e poi ho bisogno di selezionare questa casella e dire il database che va bene se la casa dell'utente è NULL. 

Ancora una volta, questo è un altro meccanismo di difesa si può mettere in atto quindi non hanno nemmeno bisogno di mettere nel codice PHP necessariamente. La banca dati in modo che le cose sono o non sono NULL. E poi, infine, Attributi. Nessuno di questi sono davvero rilevanti. Binario, unsigned - nessuno di questi sono rilevanti per un varchar. Index. Qualcuno sa o ricordare o avere una stima di ciò che è un indice per qualcosa come casa? Anche questo è in realtà una decisione di progetto importante e relativamente facile. Per coloro che non hanno ancora visto, il Venerdì abbiamo parlato brevemente sulle chiavi primarie. In una tabella di database, una chiave primaria è il campo o colonna che identifica in modo univoco le righe nella tabella. Così nella tabella corrente ID che abbiamo, abbiamo nomi ed e-mail. Quale di questi è il miglior candidato a essere una chiave primaria, il cui ruolo è quello di identificare univocamente le righe? Probabilmente ID. Probabilmente, si potrebbe anche usare quello che però? Forse si potrebbe utilizzare la posta elettronica perché, in teoria, è unico nel suo genere a meno che le persone condividono account e-mail. Ma la realtà è che se si sta utilizzando un ID numerico come 1234, che è solo a 32 bit, mentre un indirizzo di posta elettronica potrebbe essere questo numero di byte o questo byte molti. Quindi, in termini di efficienza per gli identificatori univoci, tende ad essere buona solo per usare un int anche se avete qualche candidato stringa che si potrebbe forse usare. 

Per qualcosa di simile a casa, questo non dovrebbe essere una chiave primaria perché allora solo 1 persona potrebbe vivere in Mather e 1 persona in Currier e simili. Allo stesso modo, questo non dovrebbe essere unico. La differenza tra primario e unico è che nel caso della nostra tabella corrente, ID dovrebbe essere primaria ma e-mail non è di primaria importanza per le ragioni che abbiamo appena citato - prestazioni - ma dovrebbe comunque essere univoci. Così si può ancora applicare l'univocità senza la pretesa che si tratta di un super importante settore primario. Ma questo è molto utile: Index. Se si conosce in anticipo per il vostro progetto finale, per pset 7, o, in generale, che questa casa campo sta per essere qualcosa che effettuare una ricerca molto utilizzando la parola chiave di selezione o qualcosa d'altro, allora si può dire preventivamente il database di lavorare la sua magia e assicurarsi che viene creato nella memoria tutte le strutture di dati di fantasia necessario per velocizzare le ricerche basate sulla casa. Forse sarà utilizzare una tabella hash, forse userà una lista concatenata. In realtà, si tende ad utilizzare un albero, spesso una struttura chiamata B-tree - Non un albero binario, ma un B-albero - che è un albero molto ampia che si potrebbe vedere in una classe come CS124, la classe di strutture di dati. Ma insomma, non si deve preoccupare che quando si usa il software intelligente di database. Si può semplicemente dire "Indice di questo campo in modo da poter cercare in modo più efficiente." 

Se si lascia questa via e si tenta di cercare per tutta la banca dati che vive a Mather, lo devolverà in ricerca lineare. E se hai 6000 undergrads tutti vivendo in una casa, si sta andando a cercare l'intera tabella per trovare le Matherites, mentre se si dice indice, speriamo che sia qualcosa di simile a una ricerca logaritmica per trovare questo tipo di studenti. Questa è solo una caratteristica gratuito per attivare, anche se non hanno un prezzo di una certa quantità di spazio. Infine, incremento automatico, questo campo AI, il che significa che solo se si tratta di un int e non si desidera prendersi cura di incrementare da soli ogni volta che c'è un nuovo utente, verificare che, e ogni utente che viene inserito automaticamente ottenere un nuovo ID. Facciamo clic su Salva, e ora andiamo a trovare un difetto a questo disegno. Se vado in Usa, si noti che sia Mike e la mia casa è NULL. Posso usare phpMyAdmin per modificare manualmente. Posso andare qui e digitare Mather e poi premere Invio, e ora notare la tabella è diverso. Ma notate che potessi fare anche qualcos'altro. ID David è 1, per cui phpMyAdmin è ancora solo uno strumento di amministrazione; questo non è qualcosa che gli utenti sono sempre di andare a vedere. Quindi, se io invece fare clic sulla scheda SQL sulla parte superiore - e ancora, pset 7 vi introdurrà più di queste domande - Posso eseguire manualmente il comando SQL strutturato linguaggio di query UPDATE utenti SET casa = 'Pfoho' WHERE id = 1. Queste query SQL sono, ben abbastanza, abbastanza leggibile da sinistra a destra. Aggiornare la tabella utenti, impostare il campo chiamato casa per Pfoho dove ID dell'utente è 1. Oppure potrei anche fare dove email = 'malan@harvard.edu'. Finché univoco che identifica me, che avrebbe funzionato così. Ma ID tende ad essere più elevato di prestazioni, quindi cerchiamo di farlo. Facciamo clic su Vai. Ok, lecture.users non esiste. Qual è il mio errore? Qual è la tabella in realtà chiamato qui? Si chiama gli studenti solo perché questo è quello che abbiamo fatto qui in alto a sinistra. Si chiama gli studenti e non gli utenti. Quindi, fare clic su Vai ora. 1 row affected. Query in 0.01 secondi. Se io ora fare clic su Sfoglia, ora vive in Pfoho Malan. Ecco, questo è un altro assaggio di SQL, ma il pset vi guiderà attraverso un po 'di più di questo. 

C'è una decisione stupida che ho già fatto qui. Direi che questo disegno di database è inefficiente perché le persone più che aggiungere alla tabella studenti, più di noi, io iniziare ad aggiungere, il più delle TF ho iniziare ad aggiungere, stiamo per iniziare a vedere che cosa esuberi in questa tabella? 

Gia '. [Studente] Visto che è tra gli studenti, stiamo usando la stessa [incomprensibile] Lo stesso - destra, esattamente. Quindi, se 400 persone vivono in Mather, prendere o lasciare, alla fine questa tabella sta per avere 400 righe che dicono "Mather," "Mather," "Mather", "Mather", "Mather". Stiamo perdendo tutti questi byte, e ci sono un paio di take-away lì. 1, c'è il caso angolo pazzesco dove se qualcuno paga un sacco di soldi e rinomina Mather, ora dobbiamo cambiare la nostra intera tabella del database. Questo non succederà spesso, anche se una volta era chiamato Pfoho North House 15 anni fa, così accade. Ma questo non è tutto ciò che convincente. Più convincente di un caso d'angolo come quello di dover aggiornare i dati in massa per un database è perché la possibilità di immagazzinarli MATHER ancora e ancora e ancora e ancora? Questo è un sacco di caratteri, 6 caratteri. Non possiamo fare anche di meglio, soprattutto per Pforzheimer? Sicuramente possiamo fare meglio di che molti personaggi. Perché non associare un identificatore univoco di ogni casa e negozio che per ogni utente? Quindi cerchiamo di provare questo. Piuttosto che utilizzare la tabella studenti, lasciami andare fino al mio database conferenza qui in alto a sinistra. Notiamo qui dice Crea una tabella. Vorrei creare una nuova tabella denominata case. Il numero di colonne sarà 2. Invio. Ora ho 2 campi. Io vado a chiamare questo il nome, e che sta per essere un varchar di lunghezza 255, 

ma che è piuttosto arbitraria. Vorrei mettere questo qui per convenzione. Così si può mettere un ID qui. Diamo ogni casa un identificatore univoco. Diamo ogni casa un nome. Facciamo specificare che l'identificatore sarà firmato solo per convenzione di usare solo numeri positivi. Andiamo avanti e dare a questo un campo a incremento automatico per ora. E abbiamo bisogno di qualcos'altro? Andiamo avanti e fare clic su Salva. Ora ho una seconda tabella. Si noti per inciso questo è il comando un po 'criptico SQL che avrebbe dovuto digitare manualmente se non si utilizza uno strumento di amministrazione come phpMyAdmin. Quindi un altro motivo lo usiamo. E 'una sorta meravigliosamente utile pedagogicamente, perché è possibile fare clic in giro e capire come funzionano le cose, semplicemente copiando e incollando quello che ha fatto phpMyAdmin. Ma il comando CREATE TABLE è ciò che è stato appena eseguito, e qui è il mio tavolo. Lasciami andare avanti ora e utilizzare SQL prime, piuttosto che eccessivamente facendo clic sulla scheda Inserisci. Permettetemi di fare INSERT INTO case, e ho intenzione di dire il nome della casa avrà un valore di 'Mather'. Tutto qui. Questa sintassi è un po 'più criptico. Questo è il nome dei campi che vogliamo inserire. Questi sono i valori che vogliamo inserire in questi campi. Lasciatemi fare clic su Vai. 1 riga inserita in 0.02 secondi. Vorrei ora fare clic su Sfoglia. 

Notate se fare clic su Sfoglia, c'è Mather, il cui ID è dall'automazione il numero 1. Fammi fare un altro. Lasciami andare nella scheda SQL. INSERT INTO case. Il nome della casa avrà un valore di Pfoho e così via. Vai. E posso continuare a fare questo ancora e ancora e ancora. Oppure, se ti annoi con phpMyAdmin, si può semplicemente utilizzare la scheda Inserisci e non è necessario digitare il codice SQL grezzo. Si può semplicemente sbattere fuori più rapidamente digitando, ad esempio, Currier, Invio, e ora se noi fare clic su Sfoglia, c'è Currier con ID 3. Quindi questo è ciò che intendiamo per incremento automatico. Ma ora dobbiamo aggiustare qualcosa negli studenti. In studenti quale dovrebbe essere il tipo di dati del campo di casa ora? Dovrebbe essere un int, giusto? Quindi l'obiettivo è quello di scomporre, altrimenti noto come normalizzare, le tabelle in modo da non memorizzare informazioni in modo ridondante in nessuna delle mie tabelle. E ancora, il percorso eravamo qui sta per dire Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, che è molto ridondante in termini di spreco dei caratteri. Permettetemi quindi di andare avanti e modificare questa Struttura clic, e lasciami andare avanti e controllare fuori dal campo casa, fare clic su Cambia, e ora ho intenzione di cambiare questo è un int. 255 non è più rilevante. Lasciatemi andare avanti e dire che va bene se è ancora NULL. Salva. Ora gli studenti della tabella è stata modificata con successo, e notare ancora una volta casa è un int. Per inciso, ignorare il numero in parentesi che quando si tratta di interi. 

Questo è per motivi di eredità. Indietro nel giorno in cui non aveva GUI, è invece avuto un ambiente a riga di comando, le 10 e 11, rispettivamente, il numero di caratteri di cui si dovrebbe mostrare nella finestra di terminale nel visualizzare campi. Non ha nulla a che fare con la lunghezza in bit del campo vero e proprio, quindi ci basta ignorare che per il momento. Ora devo andare in questa tabella. E se David vive in Mather, casa non dovrebbe essere 0, che è un valore int predefinito più vicino a NULL. Egli deve vivere in casa 1. Facciamo arbitrariamente dire che vive in Pfoho Mike, così il numero civico 2. Ora la mia tabella è un po 'più criptico. Ma considerare l'efficienza. Ora sto utilizzando solo 32 bit per identificare la casa, il che significa che c'è solo 1 definizione canonica di casa mia Mather e Pfoho e questo è nella tabella case. Quindi, se voglio rientrare adesso queste tabelle, pensare in questo modo. Qui ho il mio tavolo studenti, e sul lato destro ci sono questi numeri, 1 e 2. 1 è Mather, 2 è Pfoho. Abbiamo gli stessi numeri nella tabella altro, che si chiama case, 1 e 2 e 3 per le 3 case. Ciò che ora vogliamo fare è avere la capacità nel codice, PHP e SQL, per ordinare di raggiungere queste tabelle, in cui, se questi sono gli studenti e queste sono le case, vogliamo in qualche modo unire in modo che 1 linea con 1, 2 linee fino a 2, e in modo che siamo in grado di capire dove David e dove Mike e tutti gli altri in cui vive. Per fare questo si può eseguire una query SQL simile alla seguente. SELECT * FROM studenti JOIN case ON - E ora quali campi vogliamo entrare in? Così students.house = houses.id. 

Un po 'criptico, ma questa parte significa, letteralmente, creare una nuova tabella temporanea questo è il risultato di unire studenti e case. E come si desidera combinare la punta delle dita qui? Impostare "campo casa uguale alle case 'campo ID degli studenti. E se ora fare clic su Vai, torno esattamente quello che speravo di. David è a Mather, Mike è in Pfoho, e vedo anche gli identificatori univoci. Ma il punto è ora ho una tabella completa. E così la asporto qui per pset 7 o proprio per il progetto definitivo: Se si scopre che sei memorizzare qualsiasi informazione ridondante, che si tratti di una casa, forse è una città, stato e CAP dove ZIP può solitamente, ma non sempre essere usato come un identificatore unico, andare attraverso l'esercizio mentale e poi con qualcosa di simile a phpMyAdmin di factoring che i dati comuni, perché tanto più che il tuo sito web si fa più ben utilizzato più popolare, questo è il modo per fare in modo che tutto ciò che è super veloce, dando il database come molti suggerimenti per quanto riguarda l'unicità possibile. E 'stato molto. Hai ancora domande? Bene. Facciamo una pausa di 5 minuti lì e riorganizzarsi. Bene. Il seguente è un esempio che è stato usato qualche anno fa, quando ho preso CS161, che è la classe di sistemi operativi al college che è noto per essere incredibile, ma una quantità pazzesca di lavoro, e si concentra in realtà su alcuni dei problemi di basso livello che si presentano nei sistemi operativi e inoltre anche nel mondo dei database. 

La storia che è stata raccontata dal mio professore, Margo Seltzer, che è stato il seguente. Si supponga di avere un piccolo frigorifero dormitorio per voi e il vostro compagno di stanza e tutti e due piace molto il latte. Così si arriva a casa dalla classe un giorno, il tuo compagno di stanza non è ancora lì, si apre il frigo, e ti rendi conto, "Oh accidenti, abbiamo finito il latte." Così si chiude il frigo, si cammina lungo la strada di CVS e ottenere nelle linee sempre più lunghi per comprare un po 'di latte a CVS. Nel frattempo, il tuo compagno di stanza torna a casa dalla sua classe, entra nella stanza, apre il frigo veramente voglia un po 'di latte, apre il frigo e, "Accidenti, senza latte." Così lui o lei chiude il frigo, esce dalla porta, e va a ABP o da qualche altro di CVS in cui non stai andando a sbattere contro l'altro di andare a prendere un po 'di latte. Naturalmente, pochi minuti dopo, entrambi si torna a casa e ora avete il latte il doppio di quanto effettivamente voluto. Ed essendo il latte, ora che sta per andare a male perché ti piace il latte ma non mi piace molto il latte, così ora avete troppo latte, in modo che sta per inacidire. Si tratta di una terribile, terribile situazione. Che cosa avrebbe potuto risolvere questa situazione se fossi il compagno di stanza a casa prima? Sì. [Studente] Si dovrebbe aver lasciato un biglietto. [Risate] Bene. Si dovrebbe aver lasciato un biglietto. Avresti dovuto mettere un post-it o come dire, "andato per il latte" e poi il tuo compagno di stanza concettualmente sarebbe stato bloccato effettivamente farlo. Oppure si potrebbe andare 1 ulteriore passo in avanti. Si potrebbe letteralmente bloccare il frigorifero con un qualche tipo di lucchetto, e ora il tuo compagno di stanza sarà letteralmente bloccato fuori dal frigorifero. Se generalizziamo tornare alla programmazione, si può quasi pensare al frigorifero come una sorta di variabile o di una struttura, una sorta di contenitore per informazioni. Il problema fondamentale è che tutti e due sono stati autorizzati a ispezionare o leggere lo stato della struttura di dati, ma l'hai visto in momenti diversi, eppure entrambi preso una decisione in base allo stato del mondo in quei momenti diversi. Così aveva bloccato il frigorifero, si sarebbe almeno evitato il tuo compagno di stanza da aver potuto ispezionare lo stato del mondo, così lui o lei non avrebbe potuto fare la stessa decisione. Così i database, a quanto pare, hanno questo problema costantemente. 

Vediamo se siamo in grado di costruire uno scenario. Supponiamo che sei una sorta di cattivo ragazzo e si va a Bank of America o uno degli altri posti in piazza che hanno un lato paio bancomat a fianco, e in qualche modo capito come duplicare una carta bancomat - non è poi così difficile. E 'solo una banda magnetica. E così quello che si vuole provare a fare è giocare a questo gioco in base al quale si mette 1 carta in 1 macchina, un'altra carta nella macchina altra, e in sostanza vuole provare a ritirare i soldi allo stesso tempo, perché immagino che la storia è la seguente. La macchina sulla sinistra prende la vostra carta e il vostro PIN, e poi dici: "Dammi 100 dollari." Lo sportello automatico è programmato per fare prima una selezione nella sua banca dati o equivalente - qualsiasi database che sta utilizzando - per vedere l'utente non dispone di almeno 100 dollari nel suo conto? Se è così, poi sputare fuori i $ 100 e $ 100 da sottrarre il loro equilibrio. Ma, naturalmente, se ci sono più macchine qui o diversi modi di controllo di lo stato di quel mondo, il caveau di una banca, per vedere quanti soldi hai, supponiamo che solo per caso la macchina a sinistra e destra sia questa domanda più o meno allo stesso momento nel tempo. 

E questo può certamente accadere. I bancomat sono computer in questi giorni. Quindi, se la macchina a sinistra dice: "Sì, hai almeno $ 100," nel frattempo la macchina a destra dice: "Sì, hai almeno $ 100," poi entrambi procedere per terminare i loro programmi ed effettivamente sputare i $ 100 e dire: "In precedenza si era $ 200." "Lasciatemi aggiornare la variabile da 100 dollari ora lasciato nel conto." Ma se entrambi hanno verificato il saldo del conto e scoperto che è $ 200 ed entrambi poi fare i conti e diciamo 200 - 100, le macchine sono potenzialmente sputare fuori due biglietti da 100 dollari a ogni macchina, ma hanno aggiornato solo il saldo del conto somma da $ 100. In altre parole, hai preso fuori $ 200, ma perché ispezionato lo stato del mondo contemporaneamente e poi preso una decisione sulla base di tale valore, esse non possono fare i conti alla fine correttamente. Quindi, in una situazione di banca troppo si vuole veramente avere un qualche tipo di blocco in modo che, non appena si è verificato lo stato di una variabile questo è molto importante, come il saldo del conto, non permettere a nessuno di prendere decisioni sulla base di tale finché non si è finito di fare la vostra cosa, dove in questo caso sono il bancomat a sinistra. Bloccare tutti gli altri fuori. Si può effettivamente ottenere questo effetto in un paio di modi diversi. 

Il modo più semplice in MySQL è una linea di SQL che vi abbiamo dato nella specifica set problema che appare esattamente come questo. Inserire nella tabella - come si chiama - un id, un simbolo, e una quota, un numero di azioni, i seguenti valori, per esempio. Se non avete letto la specifica ancora, questo è un esempio che coinvolge come si fa a fare l'acquisto di 10 azioni di questo penny stock per il presidente Skroob, il cui ID utente sembra essere il numero 7? Questo dice INSERT INTO tabella il seguente ID, simbolo e numero di azioni del 7, 'DVN.V', e 10. Ma - ma, ma, ma - la seconda è l'importante. ON DUPLICATE parti UPDATE CHIAVE = azioni + VALUES (azioni). Così totalmente criptico-guardando a prima vista. Ma il fatto che questa query SQL, anche se si avvolge su due linee, è 1 query lungo, significa che è atomica nel senso che questa ricerca potrà essere eseguito tutti insieme o per niente. E per definizione di MySQL, è così che hanno implementato questa query. È per definizione nel manuale sempre eseguito tutto in una volta o per niente. La ragione per questo è come segue. Se in questo caso si sta cercando di acquistare 10 quote di azioni, è una specie di storia come il latte, è una specie di storia come il bancomat. 

Se non fate l'errore di usare questa sintassi ma invece la selezione dal database per vedere quante azioni di questo penny stock secondo il presidente Skroob hanno, e supponiamo che ha 10 azioni, e poi qualche frazione di secondo dopo si quindi eseguire un'istruzione UPDATE, che è un altro in SQL che dice che andare avanti e aggiungere 10 azioni più a sua corrente 10 in modo che idealmente il totale è 20, il problema è che in sistemi di database di oggi e perché nei computer di oggi si dispone di più processori, core multipli - in altre parole, i computer possono essere letteralmente fare le cose in una sola volta - non c'è alcuna garanzia che la SELECT e l'aggiornamento, in questo caso stanno per accadere back to back. Quindi uno scenario brutto sarebbe fare il tasto SELECT per vedere quante azioni di questo penny stock ha Skroob ha, e poi solo per caso un altro query di database viene eseguita - forse il suo Skroob in un'altra finestra del browser cercando di acquistare 10 parti in un'altra finestra del tutto, proprio come l 'ATM - e supponiamo che un altro query ottiene tra SELECT e UPDATE. Potrebbe essere il caso che Skroob perde ora un certo numero di azioni perché un altro processo sta ispezionando lo stato del suo mondo, o ottiene più azioni di lui dovrebbe avere. Non entreremo nei particolari di ciò che esattamente quelle linee storia particolare sarebbe, ma il punto è se si controlla un valore di variabili e poi prendere una decisione, se c'è un rischio di qualcun altro a fare qualcosa a metà tra questi 2 affermazioni, come può accadere nei sistemi multiprocessore, in sistemi multicore, computer con la capacità di fare più cose in una volta, le cose brutte possono accadere conti bancari come essere addebitato in modo non corretto, l'acquisto di latte due volte tanto, o in questo caso il numero errato di parti. Ma c'è un modo più semplice di pensare a questo. 

Si scopre che supporta anche SQL, se si configura la tabella correttamente, qualcosa chiamato operazioni, che a mio avviso è in realtà ancora più facile da capire di questo, ma non è un 1-liner, quindi è in realtà un po 'più complesso. Vi è letteralmente una dichiarazione in SQL chiamato START TRANSACTION. Proprio come se ci fosse SELECT, UPDATE, INSERT, DELETE e JOIN e un sacco di altri, non ci sono parole chiave come START TRANSACTION. E quello che poi fare nel contesto di pset 7 - non c'è bisogno di fare questo per pset 7, è esplicitamente smentito come non è necessario, ma per i progetti finali può essere utile - se si chiama una query di START TRANSACTION e poi un'altra query e poi un'altra domanda e poi un altro, un altro, e un altro, tali query non verrà effettivamente eseguito finché non viene chiamato l'istruzione SQL COMMIT, a quel punto, che si tratti di due dichiarazioni o 20 dichiarazioni, saranno tutti eseguiti in una sola volta, il che significa che nessun altro può comprare accidentalmente troppo latte o di debito troppi soldi o acquistare azioni troppi perché tutte le vostre domande verrà eseguito back to back to back to back. E questo è super importante, soprattutto quando si sta facendo qualcosa di simile. Questo è un esempio arbitrario che dice andiamo aggiornare il conto in banca impostando un saldo pari a saldo - $ 1000 in cui il numero di conto è 2. E poi la seconda istruzione è ora che andiamo a depositare 1.000 dollari in qualcun altro conto bancario il cui numero di conto corrente è pari a 1. 

In altre parole, questo è un perfetto esempio di dove si vuole fare in modo che entrambe queste affermazioni accadere o per niente perché altrimenti il ​​cliente sta per farsi sfondare e si sta andando a prendere i loro soldi e non lo depositano altrove, o la banca sta per farsi sfondare dove si sta andando a depositare il denaro ma in realtà non è sottrarre dal conto dell'utente. Così si vuole tutti e due per eseguire insieme. Entra così nelle transazioni mondiali. Ecco, questo è qualcosa da tenere nella parte posteriore della vostra mente, non tanto ai fini di un semplice progetto definitivo, ma se si vuole prendere il progetto finale da qualche parte, se si desidera avviare un po 'di compagnia intorno ad esso, se si vuole risolvere il problema di qualche gruppo degli studenti del campus e in realtà hanno un live, sito attivo, questi sono il tipo di bug sottili che possono sorgere se non riesco a riflettere su quello che può succedere se 2 persone stanno cercando di accedere al tuo sito web letteralmente nello stesso momento nel tempo, con cui le loro domande altrimenti si intrecciano. 

Pronti per un po 'di JavaScript, un teaser della stessa? Questo è il nostro linguaggio ultimo per il semestre. Bene. Per fortuna, JavaScript sembra molto, molto, molto simile alle 2 lingue, C e PHP, che abbiamo fatto finora. Non c'è JavaScript pset 7, ma è uno strumento incredibilmente utile quando si tratta di fare progetti finali basati sul web o in realtà solo di programmazione web più in generale. Quindi una rapida panoramica di una cosa chiamata DOM. Ecco una pagina web super-semplice che in realtà dice solo ciao, mondo sia nel titolo e nel corpo. Come il rientro è stato suggerendo da tempo, vi è infatti una gerarchia di pagine web. Potrei disegnare questo frammento di codice HTML stesso come un albero, ripensando alle nostre discussioni di strutture dati in C, come segue. Ho un nodo speciale chiamato radice il nodo di documento, e vedremo l'analogo di questo in JavaScript in un attimo. Il bambino prima e unica figlia di che in questo caso è il tag HTML. Non c'è alcun mapping diretto del doctype. Questa è una cosa speciale, quindi dovremmo semplicemente ignorare quando si tratta di questo DOM, questo Document Object albero modello. Si noti che il tag HTML, che ho arbitrariamente raffigurato come un rettangolo, ha 2 figli: la testa e il corpo. 

Coloro che sono ugualmente rappresentati come rettangoli. È significativo che pittoricamente testa è a sinistra del corpo. L'implicazione è che la testa viene prima nella struttura. Quindi c'è in realtà un ordine di un albero quando si disegna in questo modo, anche se le forme e quant'altro sono arbitrari. Testa nel frattempo ha un solo figlio chiamato titolo, e il titolo è in realtà il suo proprio figlio, che è "ciao, mondo", che ho volutamente disegnato come un ovale qui per renderlo leggermente diverso dal rettangolo. Questi rettangoli sono elementi, mentre ciao, mondo è davvero un nodo di testo. Quindi è un nodo nella struttura, ma è un diverso tipo di nodo così l'ho disegnato arbitrariamente in modo diverso. Allo stesso modo ha corpo hanno un figlio di nome ciao, mondo, così, nodo in modo diverso anche se sono per coincidenza lo stesso testo, ma l'ho disegnato con la stessa forma. Quindi, chi se ne frega? Beh, cosa c'è di bello di HTML è che ha questa natura gerarchica. E che cosa è bella di Javascript e in particolare le librerie che sono liberamente disponibili e popolare come jQuery, è possibile navigare nella struttura ad albero in modo incredibilmente facile. Una qualsiasi delle cose che abbiamo fatto in C con puntatori e alberi di movimento e recursing sui nodi figlio sinistro al figlio destro, tutto ad un tratto si può ordinare di dare per scontato come incredibilmente illuminante, se non un po 'frustrante ma non così un modo efficiente per andare sulla programmazione. E così con questi linguaggi di livello superiore come JavaScript saremo in grado di navigare questo albero molto più intuitivo. 

E in effetti la sintassi sarà molto familiare. Se non hai mai visto prima di JavaScript, questo è un punto di riferimento davvero bella dalla gente di Mozilla, le persone che fanno di Firefox, così si sentono liberi di navigare che a vostro piacimento. Ciò che troverete - e queste slide sono identici a quello che abbiamo usato l'altro giorno - analogamente, principale è andato. Così, quando si scrive un programma in JavaScript, non esiste una funzione principale. Basta iniziare a scrivere codice. Ma una distinzione fondamentale tra JavaScript e C e PHP è che, mentre C e PHP finora sono stati eseguiti lato server dall'apparecchio in questo caso, o più in generale da un server, JavaScript by design è di solito eseguita da un browser. In altre parole, è possibile scrivere il codice JavaScript, come stiamo per, su un server all'interno dell'apparecchio, ma si include nel tuo HTML, tra i vostri CSS, tra i vostri e le vostre GIF PNG e le vostre JPEG in modo che quando l'utente visita il tuo sito web, se si sta utilizzando JavaScript, che il codice JavaScript viene dal server al browser, ed è il browser che esegue effettivamente. Quindi questo ha implicazioni significative per la proprietà, anche intellettuale. È un po 'sciocco da pensare a proteggere il tuo IP quando si tratta di codice JavaScript perché per natura del linguaggio che viene eseguito di solito lato browser. 

Si può offuscare, il che significa che è possibile farlo sembrare pazzo e brutto senza spazi, orribili i nomi delle variabili, per rendere più difficile per le persone a rubare il vostro IP, ma la chiave è che viene eseguito lato browser. Anche se come lato server riposo JavaScript può essere utilizzato, il caso d'uso più comune in questo momento è ancora sul browser. Ed ecco quello che sembra. Ecco un if-else if-else, proprio come C, proprio come PHP. Ecco un'espressione booleana quando si "o" 2 cose insieme. Qui è quando si "e" 2 cose insieme. Ecco una istruzione switch, che è simile a PHP in quanto è possibile attivare diversi tipi di valori. Loops analogamente hanno per cicli qui, che sono strutturati in modo identico a quello che abbiamo visto prima. I cicli while, dobbiamo fare i cicli while. Variabili, sempre in modo leggermente diverso. Ti rendi dichiarare le variabili come si fa in PHP e C, ma allo stesso modo è JavaScript debolmente tipizzato. Non si specifica int o float o stringa o qualcosa di simile che di solito. È possibile specificare var. Non è necessario specificare var, ma ha implicazioni se non lo fai. Di solito se si omette var, per errore creare una variabile globale, invece di locale. Quindi lasciate che proponiamo quasi sempre solo dire var e poi il nome della variabile. Non è un tipo, è solo per la variabile var. Questo sarebbe un esempio, che si tratti di 123 o "ciao, mondo". Gli array sono presenti e sintatticamente simile a PHP. Dirò numeri var e poi utilizzare le parentesi quadre di nuovo per dichiarare una variabile il cui tipo è di matrice che ha questi numeri particolari in esso separati da virgole. E quindi, infine, questa è l'unica che sembra davvero diversa. Ricordiamo che in PHP avremmo implementato un array associativo per uno studente come Zamyla che potrebbe apparire come questo, in cui la variabile si chiama studente. Le parentesi quadre significano ecco che arriva un array. 

Il fatto che io non sto usando indici numerici, ma stringhe - id, la casa, e il nome - significa che questo è un array associativo, e queste frecce con il segno di uguale e la staffa angolare significa che la chiave è "id", il valore è 1; la chiave è "casa", il valore è Winthrop House; la chiave è "nome", il valore è Zamyla Chan. Quindi ci sono 3 tasti all'interno di questo array associativo, ognuno dei quali ha il proprio valore. Abbiamo visto che in pset 7, o sarà presto, nell'idea stessa di JavaScript, ma sta andando a guardare come questo. Studente Così var - nessun segno del dollaro e non si parla di tipo ancora, ma var - pari e quindi aprire le parentesi graffe, perché in JavaScript quando si hanno coppie di valori chiave, si utilizzano effettivamente qualcosa chiamato un oggetto. E quelli di voi che ha preso APCS o simili potrebbe ricordare gli oggetti da Java o linguaggi simili. JavaScript non è Java, prima di tutto. E 'stato un anno deliberata decisione di progettazione fa per staccare qualcos'altro che era popolare, il suo nome, anche se non ha alcuna relazione fondamentale di Java stesso. JavaScript ha oggetti, e che siano stati creati per mezzo della notazione parentesi graffa. Gli oggetti in JavaScript sono più o meno equivalenti a array associativi in ​​PHP quando si tratta di memorizzazione di dati in essi contenuti. 

Ma ancor più potentemente in JavaScript si può associare facilmente le funzioni all'interno di un oggetto, e anche se è possibile farlo in altre lingue, è piuttosto un paradigma comune, come vedremo. In breve, questo oggetto rappresenta uno studente, che è particolarmente Zamyla, ed è simile concettualmente, solo sintatticamente diverso da questo. Facciamo effettivamente utilizzare JavaScript in un file. Sembra che vi sia un tag script. Abbiamo visto un tag di stile e abbiamo visto altri tag HTML. Il tag script in realtà conterrà un codice JavaScript. Lasciami andare all'interno dell'apparecchio in cui abbiamo un po 'di codice sorgente pre-fatto. Non l'ho ancora pubblicato sul sito web, ma lo farò dopo le lezioni. Apriamo a questo, blink.html. Torna nel 1990, ci fu letteralmente un tag HTML chiamato il tag lampeggiano, e questo era uno dei tag più meravigliosamente abusati su Internet per cui si sarebbe visitare alcune pagine web in stile anni 1990 e iniziare a vedere testo lampeggiante è piaciuto questo, i risultati del tag marchese, che era in corso il testo come questo. Una delle poche volte in cui il mondo ha effettivamente concordato uno standard web, tutti su tutta la linea ucciso il tag batter alcuni anni fa. Ma siamo in grado di risorgere con JavaScript come una dimostrazione del potere che hai quando si può scrivere un programma all'interno di una pagina web. Prima di tutto saltare la roba nuova e concentrarsi solo sul vecchio. 

Ecco la roba vecchia in questo esempio. Ho un tag HTML, il tag head, e un tag titolo. Poi ho un tag body qui con un div, che ricordo è solo una divisione rettangolare della pagina che ho dato un numero identificativo arbitrariamente di "saluto" a, così ho un modo univoco di riferimento ad esso, che ha un testo molto semplice: ciao, mondo. Ora vorrei scorrere fino alla cima di questo file e vedere cosa c'è di nuovo. La prima cosa che è rabboccare nuovo è il tag script, e all'interno del bando di tag script che ho dichiarato una funzione. Per dichiarare una funzione in JavaScript, piuttosto simile a PHP, letteralmente scrivere la funzione quindi il nome della funzione, le parentesi, e forse alcuni argomenti se ci vuole qualsiasi. Poi ho la mia parentesi graffa come al solito, e ora abbiamo un po 'po' di codice nuovo, ma vediamo che cosa questo significa. Così div var, questo significa solo darmi un div variabile chiamata. Avrei potuto chiamato foo, ma volevo tanto da essere chiamato div per ragioni che saranno chiare in un secondo. Poi si scopre in JavaScript - e questo è il codice JavaScript incorporato nella mia pagina web - vi è una variabile globale speciale di sorta chiamati documento. JavaScript è infatti un linguaggio orientato agli oggetti. Non entreremo nei dettagli in 50 su ciò che significa, ma per ora sappiamo che un oggetto è più o meno come una struct. Come abbiamo visto lontano quando in uno dei primi problemi imposta dove abbiamo messo un sacco di informazioni in una struttura, allo stesso modo è documentare una struttura speciale che viene fornito con il browser, viene fornito con qualsiasi pagina web. Non è qualcosa che ho creato. All'interno di questa struttura del documento, però, è necessario non solo i dati ma si hanno anche funzioni. 

E ogni volta che si ha una funzione all'interno di una struttura, all'interno di un oggetto, si chiama un metodo. Ma è la stessa cosa. Un metodo è una funzione che così succede di essere all'interno di qualcosa d'altro. Quindi questo significa che la variabile globale speciale chiamato documento ha una funzione chiamata getElementById che fa letteralmente quello. E ti porterà un elemento dal DOM, Document Object albero modello, il cui ID è in questo caso saluto. In altre parole, tutto il tempo che abbiamo trascorso su strutture dati entra in gioco qui. Questa foto di un DOM che abbiamo avuto un momento fa, anche se la pagina è un po 'diverso, se avessi un div in questo quadro, cosa document.getElementById sarebbe tornato da me sarebbe effettivamente un puntatore al rettangolo nella struttura, un riferimento al rettangolo nella struttura. Ecco, questo è ciò che significa chiamare in realtà una di quelle funzioni. Anche in questo caso si tratta di un div. Non è un corpo o di un titolo. Quindi cerchiamo di vedere quello che poi fare con questo div, ora che ce l'ho all'interno di questo div variabile chiamata. Si scopre con JavaScript si ha la possibilità di modificare il CSS della pagina in modo dinamico. Fino ad ora, tutto il CSS che abbiamo fatto, per quanto limitato, è in attributi di stile, o in quale altro posto abbiamo messo i CSS? I tipi di viziato quello. Nel tag stile all'inizio del file. O il terzo posto è stato in? 

Un file esterno, qualcosa. Css. Quindi questi sono i 3 posti che abbiamo fatto finora CSS, ma il problema è che abbiamo hardcoded tutto. Avete deciso come si tuffò in pset 7, abbiamo deciso prima lezione che il nostro CSS sarebbe. Ma se si desidera modificare il CSS, si può effettivamente fare una volta che si dispone di un linguaggio vero e proprio di programmazione. CSS, HTML - lingue non di programmazione. JavaScript è. Così si scopre che non appena si dispone di uno di quei rettangoli dall'albero chiamato il DOM, essa stessa alcuni dati all'interno di esso. Così il div che ho appena preso da un albero è ciò che noi chiameremo una proprietà all'interno di esso chiamato lo stile, e la proprietà di stile in sé ha una proprietà chiamata visibilità. Vorrei che questo solo, cercando manuale di un utente CSS. Sembra che vi sia una proprietà di visibilità CSS che fa quello che dice. Fa qualcosa di visibile o no, visibile o meno. E come hai fatto è questo. Mi sto chiedendo se il livello di visibilità di questo div è nascosto, che cosa posso cambiare? Visibile. Altrimenti se la visibilità di questa pagina non è nascosta, logicamente mi faccio nascosto. Non ho idea del perché è visibile e nascosto e non visibile e invisibile. Questa è stata una decisione cattiva progettazione lungo la strada. Ma quelli sono davvero opposti in CSS: visibili e nascosti. Tutto questo non fa altro che vuol dire cambiare il CSS del mio file e fuori, dentro e fuori per quel particolare div. Ma ancora una volta, si tratta di una funzione chiamata lampeggiano. Quando viene chiamata la funzione di lampeggio? Si scopre che c'è un altro globale speciale finestra variabile chiamata, simile nello spirito a documentare, ma che il documento si riferisce alla tua pagina web, come l'albero DOM, il codice HTML è inviato dal server, finestra si riferisce al cromo intorno ad esso, la barra degli indirizzi, la barra del titolo, e tutta quella roba intorno alla vostra pagina web. 

E si scopre che l'oggetto finestra ha una funzione speciale all'interno di esso chiamata setInterval che fa quello che dice. Esso stabilisce un intervallo - in questo caso ogni 500 millisecondi - e, prendere una supposizione, che cosa sta andando a fare ogni 500 millisecondi? E 'intenzione di eseguire la funzione che i blink. E ciò che è bello è che avremmo potuto fare questo in C, anche se non abbiamo mai fatto. C ha qualcosa chiamato puntatori a funzione in cui è possibile passare le funzioni intorno come argomenti. Allo stesso modo in JavaScript si può passare il nome di una funzione in un'altra funzione. E notate quello che sto facendo. Non sto facendo questo. Se metto le parentesi dopo il lampeggio, ciò significherebbe chiamare la funzione di lampeggio. Se li omette, significa che qui è la funzione di lampeggio in modo che setInterval può chiamare ogni 500 millisecondi. Così il risultato finale, anche se è atroce, è che se vado in localhost e andare a blink.html, Ora ho questo accada ancora e ancora. E se io in realtà Inspect Element, vediamo se siamo in grado di vedere questo. Lasciatemi Inspect Element, fammi scorrere verso il basso solo un po ', lascia decidere Elementi qui da noi, e notare l'interno DOM dell'ispettore di Chrome. E 'letteralmente cambiando avanti e indietro ogni 500 millisecondi. Se andiamo al nostro amico Nate, se siete mai chiesti come questo funziona, un'idea simile con un intervallo, ma Nate è in realtà molto efficace facendo uso del colore in questo caso particolare qui. Che cosa di più si può effettivamente fare con questo? Apriamo un altro esempio e provare qualcosa di che è di programmazione ancora più utile che fare lampeggiare le cose. Lasciami andare nella nostra directory forme oggi e andare in form0. Questa era la forma più brutto possibile che io possa venire con, e vorrei solo mostrare come appare in un browser. 

Lasciami andare in localhost / forme, e questo è form0. Si tratta di un super forma brutto HTML che dispone di alcuni campi per la posta elettronica, la password, la password, e poi un po 'di casella di controllo per accettare alcuni termini e condizioni. Il problema è se dovessi visitare questo modulo e non voglio darvi il mio indirizzo di posta elettronica, Non voglio accettare i termini e le condizioni, magari, posso fare clic su Registra e mi lascia passare comunque. Questo accade a presentare in un file PHP chiamato stupido dump.php. Tutto ciò non fa altro che stampare il contenuto di $ _GET solo per scopi diagnostici. Questo è ciò che è stato presentato da parte dell'utente solo ora. Ma se vogliamo davvero per convalidare invio del modulo dell'utente. Lasciami andare in versione 1. Questo è form1.html. Sembra esteticamente altrettanto male, a meno di notare come sia elegante. Se si fa clic su Registra senza cooperare, ho sgridato. "È necessario fornire il tuo indirizzo email." Bene. Permettetemi quindi di provarlo. Così malan@harvard.edu. Non ho bisogno di una password. Registrati. "È necessario fornire una password." Bene. Così mi fornirà una password di cremisi. Registrati. "Le password non corrispondono." Devo scrivere ora qui cremisi. Per sbaglio ho verificato che. Registrati. "Devi accettare i termini e le condizioni." Bene. Accetto lì. Registrati. Ed ora mi mostra l'uscita di diagnosi laggiù. 

Quindi, cosa è successo? Abbiamo avuto questa possibilità di convalidare l'invio di moduli. Infatti, se avete fatto immersioni in pset 7, c'è una funzione di scusarsi che lo rende piuttosto facile a gridare l'utente con un messaggio sullo schermo. Sto utilizzando un meccanismo leggermente diverso, la funzione di allarme, che non è una funzione che è sorrideva dal momento che rende i messaggi utente molto brutto. Ma vediamo quello che sto facendo qui. Questo è form1.html, e notare che ho un po 'di sintassi piuttosto familiare: tag body, tag form, attributo action, attributo method. Ma notato che ho dato la mia forma un ID univoco per convenienza. Poi ho un campo di e-mail il cui tipo è il testo, un campo di password il cui tipo è la password, campo di conferma il cui tipo è la password, e poi una casella di controllo che si chiama accordo qui, tipo è casella di controllo. E poi ho un pulsante di invio. Ma bando nella parte superiore che altro ho. Prima di tutto, c'è un altro uso del tag script. Se avete un po 'di codice JavaScript in un altro file, proprio come con i CSS è possibile includerlo. E lo si fa con sorgente dello script, e poi notare che sto collegamento apparentemente a googleapis.com a un percorso molto lungo, ma il cui nome file termina in jquery.min per il minimo. js. jQuery è una libreria super-popolare per JavaScript che fa solo JavaScript tanto più facile da usare. E 'effettivamente diventare uno standard de facto. Quindi, anche se quello che state per vedere non è puro JavaScript per sé, è una libreria in cima JavaScript tanto come la libreria CS50 è uno strato sulla parte superiore del codice a basso livello C, la realtà è che quasi tutti su Internet che utilizza. Quindi non si tratta di ruote di formazione. Questo è solo il migliore pratica in questi giorni. Ora notate sotto questa è la mia tag script stesso, e notare quello che ho fatto qui. Si scopre che jQuery fa qualcosa di un po 'di fantasia. JavaScript ha il segno del dollaro, ma sono privi di significato. 

Sono come la lettera A o B o C. jQuery ha semplicemente adottato la convenzione o tipo di affermazione posato sul fatto che $ sarà il loro simbolo speciale. Quindi, non appena si carica il file JavaScript globale qui con il tag script, si ha accesso a una variabile globale speciale che si chiama $. E 'più propriamente chiamata jQuery, ma che non guarda quasi come sexy da $. Ma $ non ha un significato particolare. In PHP aveva un significato speciale. Si doveva avere di fronte a una variabile. Questa è solo una cosa sexy che si sono assunte. Che cosa sta succedendo qui? Notate che sto passando alla funzione jQuery mio documento variabile globale e poi chiamo. pronto. Cosa jQuery essenzialmente non è che ti permette di prendere alcune cose JavaScript vaniglia come l'oggetto del documento, l'oggetto finestra, e se si passa alla funzione jQuery - e di nuovo, per essere chiari, si tratta di una funzione chiamata jQuery - ciò che fa è che ritorna a voi una versione speciale del documento che ha più funzionalità ad esso associati. Così in JavaScript prima non esiste una funzione pronta, ma se si passa documento alla funzione jQuery in primo luogo, ritorna a voi una versione speciale del documento oggetto che ha più caratteristiche di fantasia. Ed è per questo che la gente piace. Rende solo le cose più facili da fare, come stiamo per vedere. Che cosa significa questa riga di codice significa? Questa riga di codice indica che qui quando il documento è pronto - in altre parole, una volta che il browser viene effettuata la lettura di questo file top bottom - andare avanti ed eseguire la seguente funzione. Ciò che è veramente interessante in JavaScript - PHP e ha anche questo - è funzioni anonime. In JavaScript è possibile dichiarare le funzioni che non hanno nome ma hanno un corpo. Notate quello che sta succedendo qui. 

Si tratta di una funzione chiamata pronto, e significa solo fare le seguenti quando la pagina web, tutto è pronto, quando tutto è stato letto dal server. Che cosa vuoi fare? Voglio eseguire un pezzo di codice. Si noti che non si desidera eseguire questo codice subito. Se ho omesso questo, ciò significherebbe iniziare immediatamente l'esecuzione di queste righe di codice. Ma il fatto che io sto dicendo no, no, no, avvolgere questo in una funzione anonima come questa mezzi non lo esegue ancora, chiamano alla fine. Lo abbiamo visto poco fa nel nostro esempio precedente. Quale funzione ha che noi chiamiamo fine, a 500 millisecondi più tardi? Blink. Quindi, la stessa idea. Anche in questo caso, anche se questo sembra un po 'strano, basta prendere per ora sulla fede che per dichiarare una funzione anonima che si chiama alla fine, è sufficiente scrivere function () { Quindi, quale codice stiamo andando ad eseguire alla fine? Il seguente. Questo sembra anche un po 'di nuovo, ma questo significa che qui è la funzione jQuery, e questo è ora un collegamento. Questo frammento di codice HTML nella parte inferiore dello schermo, naturalmente, ha una certa rappresentazione ad albero. Non è presente. Questa pagina è più interessante di questo esempio ciao mondo,. Ma c'è qualche albero che corrisponde a questo codice HTML. Sarebbe un dolore al collo di dover attuare una sorta di funzione ricorsiva consecutivi a partire dal nodo radice e poi trovare il nodo il cui ID è la registrazione. Così che cosa jQuery rende super facile per noi è letteralmente questo. Vai avanti e prendermi qualsiasi forma div o qualsiasi altra cosa, qualunque elemento HTML ha un ID di registrazione. Ciò equivale a document.getElementById ('registrazione'). 

Perché gente come jQuery? Perché è più breve da scrivere. Ma è tutto qui. E 'la stessa idea. Dammi il tag il cui ID è la registrazione. E quando quel tag, che risulta essere una forma, viene inviato, andare avanti ed eseguire questo codice. Allora diamo uno sguardo a come ora stiamo facendo la validazione dei form. La sintassi è certamente criptico in un primo momento, ma cosa sta succedendo? Se questa riga di codice è vero, ho intenzione di urlare all'utente di fornire il proprio indirizzo e-mail. Così che cosa è questa riga di codice? $ Significa jQuery. Ora notare questo. Questo è un po 'come i CSS. Se hai tuffò CSS ancora, saprete che questo significa che l'elemento il cui ID è la registrazione. Lo spazio si intende trovare un bambino o di un discendente di registrazione il cui nome è in ingresso. E poi questa cosa tra parentesi quadre è un piccolo filtro. E anche se questo sembra criptico, questo significa solo andare al modulo di cui ID è la registrazione, andare verso l'interno di ingresso elemento di quella il cui nome è la posta elettronica, e quindi ottenere il suo valore, qualunque sia il suo valore sembra essere - asdf se è tutto quello che ho digitato o malan@harvard.edu se è quello che ho scritto. Quindi, se il valore del campo email del form == niente, alzare la voce contro l'operatore. Altrimenti se il valore del campo password == nulla, gridare contro l'operatore. 

Altrimenti se il valore del campo password non uguale al valore del campo di conferma, che è stato l'elemento di altra forma, gridare contro l'operatore. E poi, infine - e questo ha anche un po 'di nuova sintassi propria, ma una volta che l'ho visto, è almeno un po 'più ragionevole - else if il modulo il cui ID è la registrazione ha un elemento di input il cui nome è l'accordo ed è selezionata, andare avanti e urlare contro l'operatore. Così ho assolutamente ammettere che questo è completamente travolgente a prima vista. E 'un sacco di nuova sintassi. Ma tutti jQuery segue questo tipo di modelli. E onestamente, io non sapevo nemmeno che esistesse questo fino a pochi minuti fa. I Googled: "Come si fa a controllare se una casella è selezionata in jQuery?" e questa è la sintassi, perché ci sono diversi modi di farlo con l'attuale codice grezzo JavaScript. Così come la prima pagina di Set Problema 7 sottolinea, pset 7 è molto più che un esercizio di bootstrap te stesso dove abbiamo fornito, si spera, un quadro concettuale con cui affrontare il pset. 

Ma come spesso accade con il web design, è a voi veramente curiosare, incorporare frammenti di codice ed esempi dal web fino a quando li si citano secondo i termini di quel primo foglio, e rendersi conto che imparare il linguaggio HTML, CSS, JavaScript e anche SQL è veramente destinato ad essere questo a casa esercizio, come si comincia a prendere queste ruote di formazione off. E rendersi conto troppo ci sono così tante cose che più si può fare con un browser. All'interno della maggior parte di questi elementi ci sono altre cose chiamati gestori di eventi. E anche se abbiamo appena visto quelli chiamati onsubmit e onReady, si possono fare le cose come onkeydown, onkeyup, come quando l'utente tocca un tasto, è possibile ascoltare per questo e la chiave. Gmail ha scorciatoie da tastiera. In che modo Google implementare le scorciatoie da tastiera, come C per comporre? Ascoltano per gli eventi, come sono chiamati, come onkeypress o onkeyup e onKeyDown. Se hai mai aleggiava il mouse sopra un po 'di voce di menu e tutto ad un tratto, voilà, viene visualizzato un menu o il grafico a colori cambia, come lo stanno facendo? Piuttosto che ascoltare onReady o onsubmit, si ascolta per onmouseover e onmouseout. 

Così, in breve, con queste basi molto semplici che abbiamo cominciato a grattare la superficie di oggi e ci immergeremo in seguito il Mercoledì, si ha, sempre più, potere di attuare il tipo di cose che sei già familiarità. Quindi cerchiamo di finisce qui, e continueremo questo il Mercoledì. 

[CS50.TV]