DAVID MALAN: Va bene, siamo tornati. Così, per l'emozionante Per concludere, la nostra ultima sezione sulla programmazione web, che ho abbiamo pensato di usare come termine generale per catturare alcuni argomenti rimanenti. Così, alla fine del giorno, faremo effettivamente fare un po 'di hands-on di programmazione web con un linguaggio chiamato JavaScript. E penso che daremo uno sguardo a qualcosa legato alle immagini e scoprire qualcosa segretamente nascosto in un'immagine, e anche dare un'occhiata a Google Maps API, Application Programming interfaccia, come qualcosa rappresentativo del tipo di software che è sempre e liberamente disponibile oggi. Ma perché non diamo uno sguardo ad un ingrediente di questo mondo che abbiamo tipo di stati dando per scontato esiste per qualche tempo, un database. Per il giorno passato e un mezzo che abbiamo assunto che abbiamo accesso a un database, ma che problema ha un database risolve? Che cosa fa per noi? Che cos'è? PUBBLICO: [INAUDIBLE] DAVID MALAN: contiene tutte le informazioni, Ok, e quali tipi di informazioni potreste mettere in esso? PUBBLICO: [INAUDIBLE] DAVID MALAN: Tutte le informazioni si mette in esso, si otterrà indietro. Questo è vero. E su un sito web-based tipico o web applicazione, quali tipi di informazioni, in particolare, potrebbe mettere in? PUBBLICO: [INAUDIBLE] DAVID MALAN: gli utenti. Quindi, che cosa è un utente? PUBBLICO: [INAUDIBLE] DAVID MALAN: OK, registrato utente del sito. E che cosa significa Archivio informazioni degli utenti? Quello che compone un utente? Un utente ha quello? PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, personal i dati, e questo mi piace. Cerchiamo di essere più preciso. Così un utente ha tipicamente un nome, Che altro potrebbe avere un utente? PUBBLICO: [INAUDIBLE] DAVID MALAN: An OK addr--, così il nome, il cognome. Quello è buono. In realtà, cerchiamo di fissare che, perché sta andando per aprire l'opportunità di discussione, ancora, di più. Nome, cognome, sesso. Un ID di qualche tipo. Cos'altro? Ho sentito qualcos'altro prima, troppo. Una e-mail, indirizzo postale. Quindi cerchiamo di mettere in pausa e ora ci considerano Non quello che stiamo memorizzazione nel database, ma-- e perché no, dal momento che è forse ovvio che una volta che si registra un utente, si vuole ricordare loro per qualche tempo. Tu non vuoi che basta essere memorizzati in RAM ed essere così all'oblio concentriamoci sul come. Risulta che in il mondo dei database, ci sono almeno due tipi di questi tempi. Qualcosa che si chiama un database SQL, Structured Query Language, o, simpaticamente chiamato, NoSQL, che non è SQL. E quest'ultimo è un esempio di ciò che potrebbe essere definito un object-oriented, o un negozio oggetto, un database che memorizza gli oggetti, e non, scusa me, come vedremo tra poco, le righe. Quindi ci concentreremo solo per un momento il primo di questi, vale a dire, un SQL banca dati, se non altro perché si tratta di già così familiare, a chiunque che ha utilizzato Excel o Fogli di Google o Apple Numeri o qualsiasi standard foglio di calcolo, o, equivalentemente, o più sofisticato, qualcosa di simile a Microsoft Access o Oracle o MySQL o PostgreSQL, tutte sono nomi di prodotti per implementazioni della seguente idea. Un database relazionale è semplicemente qualcosa che ha righe e colonne. E per righe e colonne, Ho letteralmente dire qualcosa come questo, quindi dove si può avere la nome di un campo e il tipo qui. E in realtà, mi permetta ora inizia a mappare questi. Quindi in realtà, non lo so il motivo per cui ho disegnato un grafico separato. Teniamo questo semplice. Abbiamo qui la inizi della nostra tavola, dove questo è il nome del campo e questo è il tipo di dati, e per tipo intendo quanto segue. È un numero è una stringa, una breve stringa come una parola, si tratta di un punto, è vero dati binari, come un'immagine? E facciamo solo prendere in giro questo a parte solo per un momento. Così il nome, il numero, stringa, grande pezzo di text-- PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, così stringa. E in un contesto di database, ci di solito chiamare questo campo char. Mi limiterò a dire char per ora, ma siamo andando a definire questa in un momento. campo di caratteri. Cognome probabilmente lo stesso. Genere? Maschio o femmina, in modo che potrebbe essere un campo char. Potrebbe essere sia preventivo, unquote "Maschio" o citazione, unquote "femmina" o potrebbe essere mo f. Se si vuole essere più inclusiva, potrebbe essere necessario un terzo valore o qualche tipo di altro campo del tutto. E così si potrebbe usare vero falso. Il campo potrebbe essere chiamato di sesso maschile, e allora si potrebbe dire vero o falso. Ma questo non coglie necessariamente tutte le informazioni che si potrebbe desiderare. Così si scopre c'è un altro tipo di campo che potrebbero essere utili qui in un database tipico, chiamato enum, dove è un campo di caratteri, ma tu, il progettista, arriva a enumerare i valori possibili, come citazione, unquote "maschio", citazione, unquote "femmina" e così via. In modo che qualsiasi valore è nel database, è infatti basata su caratteri, ma deve essere uno di questi valori. Probabilmente non ci vuole un enum per nome o cognome. In caso contrario, avremmo enumerare, come il nome deriva da, letteralmente ogni possibile nome e cognome. OK, in modo da ID ciò che dovrebbe essere un ID? Sì, così forse un numero. Quindi cerchiamo di attaccare con che per ora, il numero. E per numero, il numero di un po 'troppo ampia ora. Per la fine del secondo giorno, mi sento come noi dovrebbe essere un po 'più precisa. Numero potrebbe significare simili, potrebbe essere qualcosa come 1.236. E che probabilmente non è ciò che intendiamo per un ID. Che cosa si intende probabilmente da un ID? PUBBLICO: [INAUDIBLE] DAVID MALAN: Oh, OK, così forse non è nemmeno un numero. Forse è in realtà un identificatore univoco che è una stringa, come un nome utente. Quindi assolutamente, potrebbe essere. Credo che qualcuno probabilmente significato numerico, però. Quindi cerchiamo di stare con quella. Che tipo di numero? Che cosa è un altro precise-- un numero intero. Così un numero come 0, 1, 2, 3, così noi chiamiamo un numero intero. E anche allora, ho potuto essere nitpicking, è Non in realtà solo un integer generale che si desidera. Probabilmente non si vuole valori negativi, solo perché, ci si sente proprio strano. Probabilmente si desidera numeri interi positivi. Così si può anche esprimere che in un database, ma per ora, diremo intero. E-mail? Questo è probabilmente solo-- una cosa? PUBBLICO: [INAUDIBLE] DAVID MALAN: Si tratta di una e-mail, ma questo è caratteri, giusto? Ha solo un carattere funky come un simbolo "a" o qualcosa d'altro, ma è ancora un campo di caratteri. E indirizzo postale? campo di caratteri. Ecco, questo è un bel inizio, ma cerchiamo di essere un po 'più precisa ora. Così si scopre che in un database, è spesso avere una scelta su più raffinata versioni di queste cose. Infatti, in un database tipico SQL, SQL, o, più in generale, di database relazionali, banche dati con file e colonne, è spesso arrivare a specificare non solo il tipo di field-- permettetemi di fare un po 'di qui-- camera ma anche la lunghezza. Quindi, per quanto tempo è un nome? Credo che, D-A-V-I-D. OK, ho capito probabilmente solo offeso come la metà delle persone nella stanza, a destra, Dal momento che i nomi sono più di cinque lettere, quindi cinque sembra un po 'egoista e ingenuo, così che cosa è un valore migliore? 10, va bene, e penso siamo OK nella stanza. 13? 30? Perché non prendo il approccio di prima, quando abbiamo stavano parlando di array e la memoria? Perché non dico solo come 1000? Nessuno è nome sta andando per essere più lungo di 1.000. Respingere. PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, è uno spreco, a destra, in particolare se la maggior parte dei nomi sono solo cinque o 10 o 15 caratteri, che è molto dispendioso. Allora sai cosa? Questa è una specie di una domanda difficile. Ora, possiamo certamente analizzare inglese e nomi di qualsiasi altra lingua e capire, così, qual è il media average-- realtà non aiutare noi-- qual è il max è probabilmente ciò che vogliamo davvero. Ma si scopre abbiamo anche qualche scelta sul tipo qui. In un database tipico SQL, è hanno qualcosa chiamato un campo char e anche un varchar, V-A-R, per il campo char variabile. E la differenza è questa. Un campo char, è il progettista, necessario specificare in anticipo la lunghezza esatta del campo. Così forse il primo nome come 20 sente tipo di sicurezza. Potrebbe essere necessario fare un po 'googling per vedere se questo è abbastanza effettivamente sicuri. C'è probabilmente un nome con 21 personaggi, ma per ora, supponiamo 20 è salvo. Un campo char implicherebbe in un database che si utilizza 20 e sempre 20 caratteri. Ora, se è solo D-A-V-I-D, 15 di quelli sono solo andando a essere caratteri vuoti, ma si sta ancora utilizzando tutti i 20 byte. Un campo varchar, invece, si intende la stringa dovrebbe essere fino a 20 caratteri ma se è solo cinque, si sta solo andando a utilizzare cinque, o forse sei per un valore speciale alla fine, come quello 0 che abbiamo discusso significa la fine di un carattere sequenza in memoria. Quindi, quando pensi si potrebbe scegliere char vs varchar, visto che trade-off? Char utilizza quel numero di caratteri, varchar utilizza non più di quel numero di caratteri. PUBBLICO: [INAUDIBLE] DAVID MALAN: OK, quando si conosce la lunghezza della stringa piuttosto interessante usare solo char, perche 'se tu lo sai, appena messo giù. E forse questo è vero per una zip codice, negli Stati Uniti, almeno, 02138, sta andando sempre essere di cinque caratteri finché non si aggiunge il trattino quattro. Ma si potrebbe avere alcuni valori per cui si conosce sempre la lunghezza. O forse simboli dello Stato, come NY per New York, e MA per Massachusetts negli Stati Uniti. Forse si ha alcune situazioni dove questo è assolutamente ragionevole, ma da questa logica, perché sono Abbiamo anche overthinking questo? Perché non usiamo varchar e quindi dobbiamo solo usare sempre due personaggi in ogni caso, o usare sempre cinque personaggi in ogni caso? Perché non è sufficiente salvare varchar per tutto, con tale logica? Ci deve essere una cattura. PUBBLICO: [INAUDIBLE] DAVID MALAN: Could scrivere qualcosa di sbagliato. Quindi, questo è vero. Ma anche allora, non possono usare più memoria di quanto allocare. Ho ancora la finale dire su tutta la lunghezza, quindi non possono accidentalmente fare questo errore, ma un buon pensiero. E 'più sottile, ma è molto correlato alla nostra discussione, in realtà, di array e le liste collegate in precedenza. Risulta che un database, se sa che tutti i valori sono di lunghezza fissa, anche se alcuni di questi valori sono vuoti, sorta di esteticamente vuoto, D-A-V-I-D e poi 15 spazi, si scopre che se ogni campo è la stessa lunghezza, molto simile a una serie aveva tutta la sua roba back to back to back to back in modo che si può solo più 1 per arrivare al prossimo valore, stessa idea in una tabella di database. Se tutti del vostro personaggio stringhe sono la stessa lunghezza, si dispone di ciò che è chiamato ad accesso casuale. Se tutte le stringhe sono di lunghezza 20, non basta fare più 1 basta fare più 20, più 20, più 20, più 20, e si può molto rapidamente scorrere o la ricerca in tutti i tuoi dati. Un campo char variabile, al contrario, non sempre avere 20 caratteri. Si può avere 20 e poi 15 e poi 19 e poi 10, e quindi se si desidera effettuare la ricerca attraverso di essa, non si può ciecamente aggiungere 20 byte per arrivare a quello successivo. È letteralmente necessario per la ricerca in perché il bordo della struttura di dati, se si vuole, è irregolare. E 'sorta di va dentro e fuori sede sulla lunghezza effettiva della stringa. Così, quando si conosce la lunghezza, come Kareem dice, utilizzare un campo char, perché si guadagna che efficienza di essere in grado di cercare attraverso di essa più veloce quando siete alla ricerca di dati, altrimenti utilizzare una variabile. Purtroppo, non ho buona risposta per quanto tempo il nome dovrebbe essere, ma per qualcosa di simile un nome, direi un varchar è comune perché non sta andando per essere una lunghezza fissa per tutti. 20, non lo so, 20 si sente un po 'stretto. Diciamo 50, 50. Essa in realtà non ti costa che molto altro da dire 50 invece di 40, ma ad un certo punto, è necessario per effettuare una chiamata in giudizio. Molto comune, francamente, per [? storico?] ragioni, anche se è eccessiva, vale a dire 255, perché qualche tempo fa, in sistemi di database popolari, come MySQL, uno strumento open source gratuito che un sacco di aziende come anche Facebook utilizzato, questo era il massimo predefinito così la gente appena andato con esso. Quindi non irragionevole, ma ti utilizzare un po 'più intuizione e dire, certo 50, che è Probabilmente un po 'eccessivo. Sesso, mi piace enum, e così possiamo quindi enumerare maschio o femmina, o forse in modo più efficiente, m o f o qualche altra simbologia, ma enum si sente come una buona scelta lì. Per essere chiari, il sesso potrebbe essere solo un varchar, E potremmo solo tutto d'accordo più persone simpatiche, di mettere sempre gli stessi valori lì. Maschio o femmina o roba del genere. Ma il problema, allora, è che abbiamo potuto fare un errore, come [INCOMPRENSIBILE] proposto in precedenza in un contesto diverso. Se facciamo un errore, potremmo ottenere valori non corretti nel nostro database. Quindi cosa c'è di bello sui database come Oracle e MySQL e altri, è che avete questo ultimo strato di difesa in cui l'amministratore DBA, database, chi sta progettando questa tabella come noi sono verbalmente, potrebbe mettere al suo posto un enum che protegge contro ciò specificando maschio, femmina, e quindi nessuno altrimenti nessun programmatore può accidentalmente inserire alcun altro valore. Quindi questa sarebbe una buona cosa. Questa è una caratteristica. Così un ID, assumendo un ID numerico, probabilmente dovrebbe essere un numero intero positivo. E a volte ci hanno opportunità di discutere di lunghezza. Non sarebbe in genere specificare un numero qui, si dovrebbe invece specificare questo è un int o un grande int, come sono in genere chiamati. Ma tipicamente, un numero intero sarebbe, diciamo, 4 byte. E se si tratta di 4 byte, è così che molti bit? PUBBLICO: [INAUDIBLE] DAVID MALAN: 32 bit. Quindi, il numero di utenti possiamo avere in nostro database se tutti hanno un ID e questo ID deve essere univoco? 32 bit mezzi che hanno modelli uno, due, tre, quattro, five-- così come molti diversi modelli di zeri e quelli si può avere se ci sono 32? Questa è la stessa cosa chiedendo che cosa è due a 32? E 'un grande numero che Non riesco a ottenere il diritto, ma so che è circa 4 miliardi di dollari. Quindi questo significa che la vostra tabella di database può hanno quattro miliardi di utenti e il gioco è fatto. Quindi questo è un interessante disegno implicazione. Un discreto numero di aziende hanno deciso, forse non tanto per la loro tabella di utenti, perché avere 4 miliardi di utenti è un problema raro. Questa è una sorta di stile Facebook problema, non è un tipico problema di società. Ma forse se si dispone di registri delle transazioni o qualche tipo di dati che costantemente viene scritto nel database che assolutamente potrebbe avere miliardi e miliardi di righe, e si utilizza un numero intero per esso, Che cosa sta per accadere al più presto si arriva a riga numero 4 miliardi e quindi si tenta di inserire il 4000000000o e 1, per così dire? Sto semplificando i numeri un po '. È possibile tagliare, è voglio dire dover gestire in qualche modo. E ciò che un computer avrebbe tipicamente fare, pensarci anche da questa mattina, se si dispone di un valore di 4 bit come 1, 1, 1, 1, che, solo per legare la mattina insieme al pomeriggio, cosa fa questo numero rappresenta in binario? OK, ce la faremo più facile. Che cosa significa questo numero rappresentare in binario? OK, ce la faremo più facile, cosa questo rappresenta in binario? PUBBLICO: Tre. DAVID MALAN: tre, perché abbiamo quelli column-- [RISATA] Accidenti! Abbiamo avuto la colonna quelli e la colonna due. Quindi supporre che, in effetti, la nostra [? infield?] non erano 32 bit, ma erano due bit, possiamo contare a partire dal numero 0, 1, 2, 3 utente, e poi siamo tipo di torna all'utente 00 di nuovo. Quindi questo è ciò che accade di solito. Se hai mai sentito il expression-- probabilmente no, ma se si have-- integer overflow, dove si tenere lanciando tutti i bit essere i più grandi valori possibili, e poi sei fuori di bit, cosa sarebbe accaduto di solito? Perché dico 00? Ebbene, questo è tre. Come faccio rappresento 4? Come faccio a rappresento la per il numero 4 in binario? PUBBLICO: [INAUDIBLE] DAVID MALAN: tra-- sì, non dire 100 di per sé, perché ha il torto connotazione, ma 1-0-0. In modo che il numero 1-0-0 è davvero corretta, ma se hai solo due bit, che cosa hai fatto veramente? Hai estesa alla 00. E in effetti, questo è ciò che sarebbe accaduto. In realtà, si può pensare su questo più familiarmente. Se vi ricordate, che cosa, 16 anni fa, il mondo doveva finire quando il problema Y2K è accaduto. Perché? Bene la maggior parte dei computer, per decisioni ragionevoli, sono stati la memorizzazione dei numeri, come il 1975 o l'anno 1999 da solo utilizzando due cifre nella memoria del computer. Così, naturalmente, ciò che accade quando si arriva al 2000, andate a questo, o meglio, sì. Così si va al 2000, ma se si sta utilizzando solo due cifre Sembra come l'anno 00 e così hai laminati sopra. E questo è il motivo per cui un sacco di sistemi necessario per essere aggiornato al momento. Quindi, con quello detto, le aziende come Facebook correre contro questo. Quindi l'unico modo per gestire la situazione, francamente, è quello di anticipare esso. O il modo più pulito per gestire questa situazione è quello di anticipare in modo da non lo fai dover apportare modifiche in seguito. Così, invece di 8 byte, sai una cosa? Ho intenzione di essere lungimiranti Qui, anche se è un po 'ottimista sul fatto che stiamo andando ad avere 4 miliardi e 1 utenti sul nostro sito web. Ma facciamo solo usare 8 byte, o 64 bit, che sarà generalmente chiamato un grande numero intero, molto tecnico. E questo significa che solo si può avere ancora più cifre nel numero. Ma questo è un importante decisione di progettazione, perché se si sceglie un numero che ha troppo pochi bit di espressività si potrebbe effettivamente creare un bug nel software. Va bene, quindi cerchiamo di concludere con e-mail e indirizzo postale. Così e-mail, per quanto tempo dovrebbe un indirizzo email essere? 50. Io davvero non ho idea, ma è Probabilmente qualcosa di simile, perché altrimenti nessuno sta andando a si scrive se diventa troppo lungo, quindi 50, andiamo con esso per ora. Indirizzo postale, per quanto tempo dovrebbe essere? PUBBLICO: [INAUDIBLE] DAVID MALAN: Non è solo un codice postale, però. Indirizzo postale, ho sentito. Quindi questo è come 1 Brattle Square, virgola, Cambridge Mass., virgola, 02138. E in effetti, vorrei solo tirare un po 'foglio di lavoro qui. Questo si sente come se fosse un'occasione persa. Se abbiamo 1 Brattle Square, virgola, Cambridge MA 02138, Mi sento come possiamo fare meglio di un semplice indirizzo postale. Perché non esplodere questo un po '? Cosa ottengo a? Cosa dovremmo invece avere per i nostri file qui, forse? PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, quindi cerchiamo di chiamare street_number, e una sottolineatura è solo un comune modo di avere quello che sembra uno spazio, ma non è, in realtà. Street, e poi city-- dispiace? PUBBLICO: [INAUDIBLE] DAVID MALAN: Potremmo farlo. Linea uno, linea due. Perché non terremo semplice per ora, ma questo è assolutamente una decisione accettabile. E poi stato, e poi lasciare di essere un po 'US-centric per il momento e basta fare il codice postale, proprio perché che sarà portare ad un errore interessante o un problema qui. Quindi supponiamo che è ora il nostro indirizzo. E 'un po' più fastidioso che abbiamo tutte queste più campi, ma ora siamo in grado di etichettare le cose un po 'meglio. Così ora il numero di strada probabilmente non dovrebbe essere un char, dovrebbe? Che cosa dovrebbe essere? PUBBLICO: [INAUDIBLE] DAVID MALAN: Forse, un numero come un intero nuovo? Un grande numero intero? Probabilmente non si vive a 4 miliardi di Main Street o qualcosa di pazzo come quello. Così intero è probabilmente bene, ma qualcuno ha mai vissuto in un indirizzo del tipo 1A Brattle Square, o 1 e 1/2? queste cose esistono, purtroppo, anche se non avete vissuto lì, ci sono queste anomalie come appartamento 1A, 1B, 1C. Così si sa che cosa, probabilmente non dovrebbe andare con numeri interi, altrimenti stiamo andando a perdere alcune vendite. campo Char, forse? Non so per quanto tempo. Non è destinata probabilmente ad essere che a lungo, in modo da 10 o qualcosa del genere. Nessuno ha intenzione di scrivere un numero più lungo, forse. Ma ancora una volta, dovremmo probabilmente dare più pensiero a questo. Forse google, fare qualche ricerca, ma andremo con le nostre viscere, per ora. Strade, char, 50, non so. Ad un certo punto, nessuno sta andando per scrivere su una busta, Anche, quindi c'è probabilmente alcuni limiti superiori là. Città, stesso, certo, così char 50. Stato, può essere US-centric per il momento. Quindi potrebbe essere una lista, così gentile di un giudizio, lo stato. Potrebbe essere come due caratteri. Quindi, in realtà, forse, io continuavo a dire char. Probabilmente dire varchar, solo per un po 'efficienza, ma torneremo a tale decisione in un attimo. Potrebbe essere un carattere di lunghezza 2 per lo stato. Se negli Stati Uniti che hanno, come MA, Massachusetts, NY, New York, New Jersey, New Jersey, e così via. Così potrebbe essere fissato a questo. DC per Washington DC. Ma credo che, Olivier, è proposto un altro approccio. PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, quindi è un po 'fastidioso per digitare, ma un enum potrebbe avere più senso, perché in questo modo, almeno negli Stati Uniti, si potrebbe enumerare, se noiosamente, ma lo si fa solo una volta nel database e mai più pensare a essa, tutti i 50 codici di due caratteri. Così mi piace enum. Cerchiamo di bastone con quello lì, perché E 'sorta di fa rispettare più rigore. E poi zip codice? Credo che Andrew ha avuto un pensiero su quel PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, cinque o nove. Diciamo solo mantenerlo semplice. Basta fare cinque per ora. Ma forse potrei solo fare un intero, giusto? Ho potuto, ma si sa che cosa, ho fatto questo errore una volta, in un certo senso. Anni fa, mi è stato la migrazione da Microsoft Outlook a Gmail, e Outlook ha un modo di esportare tutti i tuoi contatti come un file Excel, un file CSV, separati da virgole file di valori. E ho fatto l'errore, ho pensare, di doppio clic su di esso, una volta ho scaricato l'esportazione, per assicurarsi che sembrava come mi aspettavo. Devo aver colpito Salva o lasciare auto-save calcio o qualcosa. Perché quando ho poi importato in Gmail, tutto ha funzionato. Ma per anni, fino ad oggi, e Ho fatto questo cinque, 10 anni fa, Sto ancora trovare amici che hanno indirizzi simili a queste. Perché? PUBBLICO: [INAUDIBLE] DAVID MALAN: Ci sono voluti il 0, bene, piuttosto, ha preso l'intero codice di avviamento postale come un numero, e quindi è uno 0 che significa essa non ha alcun significato. E così 2138 sembra essere il mio codice di avviamento postale. E questo è, francamente, un fastidioso Excel caratteristica per cui Credo che per impostazione predefinita, anche se è destinata ad appena essere di testo, Microsoft Excel decide, mi permetta di essere utile, e oh, vedo solo numeri. Cerchiamo di trattare questi numeri. E tronca gli zeri iniziali. Giuro su Dio, ogni coppia di mesi ho trovato un indirizzo, e da una sorta di OCD, torno e aggiungere il 0, anche se non ho mai inviare lettere persone o cose. Ma sto ancora trovare i resti di questo. Quindi questo è per dire, questa è una buona idea? OK, no, perché nessuno in Massachusetts, in questa zona, sta per avere una o li conduce. Quindi cerchiamo di andare con il simile char, probabilmente, cinque. E qui, realizzare noi potrebbe utilizzare un enum e noi potrebbe enumerare 10.000 possibili codici di avviamento postale, ma che si sente come se fosse probabilmente percorrendo un tratto di, come, benefici. Se si dispone di input che tanto i dati nel tuo database di per la protezione contro qualcosa. Così char realizzato è possibile digitare in H-E-L-L-O il tuo codice ZIP, che non è, ovviamente, numerico. Quindi non c'è modo, in un database tipico, specificare solo numerico e solo cinque caratteri, così stiamo andando ad avere farlo in codice. Stiamo andando a farlo in PHP o Java o qualunque linguaggio siamo utilizzando il server per far rispettare quel tipo di vincolo. Whoo! Va bene, quindi tutte le domande appena ancora? Facciamo un'altra decisione di progettazione. Si scopre che si anche arrivare a scegliere, quando si progetta un database SQL, o database-- relazionali tipici dove ancora una volta, solo relazionale mezzi righe e colonne, è così che si organizzano i data-- e rendersi conto che ciò significa, Sono stato fuorviante in che, io sono drawing-- questo è ciò che è chiamato lo schema una tabella di database. Questo è come la specifiche per il table-- ma quando arriva il momento effettivamente memorizzare i dati, e noi faremo questo solo con l'esempio qui. Sto per aprire Excel, perché Excel mi darà righe e colonne. E questo è esattamente ciò che Oracle e MySQL e altri strumenti mi daranno. Così Sto solo andando a utilizzare per amor di discussione. Lasciami andare avanti e aprire un documento rappresentante qui, zoom in un po '. Così, per esempio, i nostri intestazioni sono ora nome, cognome, sesso, ID, e-mail, numero civico, via, urla. Via, città, stato, solo A proposito si adatta allo schermo. Così che cosa questo significa è che quando un primo utente si registra per il mio sito web, che sta per essere qualcosa di simile David, Malan, m, diciamo 1, malan@harvard.edu, numero civico sarà essere come 1 Brattle Square, Cambridge, MA, 02138, e poi così via. Quindi, quando dico che un database relazionale o il database SQL è righe e colonne, Intendo questo. Che i dati effettivi vengono memorizzati in righe e colonne. Questa è solo una coincidenza, che stavamo parlando, e stavo solo disegnarla in righe e colonne. Questo è solo lo schema, la definizione generale. Quindi, di questi campi qui, o equivalentemente, lì, quali sono i campi che si pensa Sono probabilmente per cercare se sono un utente o se sono l'amministratore del database? Come, quali campi sono io in realtà andando a cercare? PUBBLICO: [INAUDIBLE] DAVID MALAN: Il nome, sì così Mi piace il fatto che-- sì, email potrebbe essere piuttosto comune. Siamo spiacenti, hai detto nome. Così maybe-- e ancora una volta, siamo tipo di parlare in astratto. Non so perché ci si essere alla ricerca di un nome, ma che si sente ragionevole se siete alla ricerca di un utente. Forse afferma, sicuro, ID. Ed è un scivoloso pista, perché ho potuto escogitare uno scenario in cui forse il mio capo mi ha chiesto, Quanti uomini che abbiamo sul nostro sito? Quante donne dobbiamo sul nostro sito? E così a quel punto, si potrebbe desiderare per cercare campo genere, anche, e nient'altro. Quindi c'è un trade-off qui. Anche in questo caso, non c'è risposta giusta, ma ci è una caratteristica nella maggior parte dei database SQL conosciuto come l'indicizzazione, per cui si, il progettista, il amministratore del database, arrivare a decidere in anticipo quale i campi database dovrebbe ottimizzare per le ricerche su. Si potrebbe dire molto ingenuamente, ottimizzare questo, ottimizzare che, ottimizzare questo, ottimizzare questo e questo, e il database fare qualche cosa di magico sotto il cappuccio, e fare qualcosa in modo che la prossima volta si cerca su uno di questi campi, esso, infatti, essere più veloce. Questo è possibile. Non annullarsi. Ma ci deve essere un prezzo pagato. Se ingenuamente, o sopra-entusiasmo per esempio, l'indice di tutti questi campi, per così dire, renderli tutti in modo efficiente la ricerca, che prezzo stai probabilmente pagando? PUBBLICO: [INAUDIBLE] DAVID MALAN: Performance. Cosa intendi? Ebbene prestazioni, almeno nel contesto sto discutendo, è meglio ora. Questa è la definizione di indicizzazione. Si farà le ricerche più veloci. Così il tempo diminuisce, per così dire. PUBBLICO: [INAUDIBLE] DAVID MALAN: Spazio. Quindi, di nuovo, questi sono un commerciale comune. Posso velocizzare le ricerche, ma è andando a costare più byte di spazio. Perché? Beh, per impostazione predefinita, se abbiamo nessuna delle queste stelle rosse, nessuno di questi indici, come sto dicendo, come si fa a cercare per un nome in questo database? Quindi cerchiamo di disegnare il nostro attenzione a questo esempio. Se abbiamo David e Scully e Kareem e Arwa e altri in queste righe, per esempio. Quindi cerchiamo di fare esattamente questo. Scully è qui, e poi abbiamo Kareem, e Arwa, e tutti gli altri, se non hanno un indice definito, per così dire, il meglio che puoi fare è cercare lineare. Se si cerca Arwa, non siamo andando ad essere in grado di saltare a destra a lei velocemente. Stiamo per iniziare alto e andare fino in fondo, Non dissimile la nostra originale Mike Smith esempio. Se, però, dico, hey, database, Indice il primo campo nome, poi sta andando a fare qualcosa amatore e sostenere qualcosa come la ricerca binaria. Probabilmente non è la ricerca binaria per sé. Basi di dati tendono a utilizzare un altro struttura di dati denominata B-alberi, da non confondere con alberi binari, che solo renderlo più veloce per la ricerca qualcosa logaritmica in natura. Ma il prezzo da pagare per costruire quel caratteristica, che la struttura dei dati in memoria, è più byte. Così si potrebbe prendere qualche megabyte, alcuni gigabyte, chi lo sa? Esso dipende dai dati. Così ad un certo punto, si deve decidere, probabilmente non è un caso comune. Ma quali sono i comuni reale casi, se proprio dovessi scegliere, quali potrebbero tuoi campo preferito essere? E-mail. E mi piace email perché e-mail, in teoria, dovrebbe essere univoco. E così tipicamente, quando si sa in anticipo che uno dei vostri campi è o sarà unico, che tende ad essere un buon campo per cercare, perché in questo modo, quando si cerca qualcosa, si sta andando ad ottenere indietro una o azzerare le risposte e poi il gioco è fatto. Non è necessario tenere alla ricerca di altri ancora. E quindi in questo caso qui, e-mail, fino a quando non è possibile registrare due volte con la stessa email, è una buona. ID per definizione, in mondo informatica, se si sta parlando di un ID, che era meglio essere unico. Questo è una sorta di connotazione di identità o identificatore. E il resto di questi potrebbe essere, chiamiamoli così bello abbienti, ma non realmente necessari. E così in un database, si specifica indici, ma si può essere ancora più preciso. Si può dire, ehi, database, accertarsi che ogni ID in questa tabella è unica. Non anche lasciare un programmatore accidentalmente messo in una e-mail duplicato o duplicare il numero ID. Tanto come enumerazioni proteggerci Allo stesso modo, è può avere queste difese di livello inferiore. E così la progettazione di database, in un certo senso, è una specie di divertente, perché lo si fa sulla difensiva. È una sorta di supporre che si lavora con orribili, programmatori orribili e si vuole mettere in altrettante difese come è possibile per proteggere i dati, ma allo stesso tempo si vuole per aiutarli a svolgere meglio scegliendo quale i campi per ottimizzare per. Ma non si può necessariamente farlo in un vuoto come abbiamo tipo di qui. Hai avuto modo di sapere quali sono questi casi comuni sono. Se gli sviluppatori sono attuazione di una rubrica, si potrebbe benissimo vuole essere in grado per cercare quasi ogni campo, semplicemente natura dell'applicazione. Così forse si spende che lo spazio aggiuntivo. A destra, tutte le domande? Sì. PUBBLICO: [INAUDIBLE] DAVID MALAN: No. PUBBLICO: [INAUDIBLE] DAVID MALAN: OK. PUBBLICO: [INAUDIBLE] DAVID MALAN: Oh, così abbiamo si parla in un modo ora che è completamente lingua agnostico. Quindi stiamo parlando ora circa database relazionali più in generale, o SQL database, più in generale. PUBBLICO: [INAUDIBLE] DAVID MALAN: una parola migliore da usare è, può essere utilizzato da qualsiasi linguaggio. Così posso scrivere codice JavaScript, C codice, C ++, il codice Java, codice Ruby, ognuno dei quali parlare con un base di dati ed eseguire query. In realtà, questo non è un male Segue a una query di esempio. E ancora, non abbiamo intenzione di andare in Java o C ++ o di quella più, ma in SQL, il linguaggio a cui tengo riferendosi, Structured Query Language, questo è un linguaggio di programmazione, ma è destinata ad essere utilizzata, senza sorpresa, strutturato query di interrogazione. Con questo voglio dire questo. Il modo in cui si selezionano i dati da un database MySQL è letteralmente digita nel programma qualcosa come select stelle da parte degli utenti. Io parto dal presupposto che questa tabella, ormai è chiamato utenti. Potrei chiamare tutto ciò che vogliamo, ma questo tipo di senso. E così Select è un molto verbo comune, se si sarà, in SQL, fa quel che letteralmente. Cosa ne pensi stelle significa in questo contesto? PUBBLICO: [INAUDIBLE] DAVID MALAN: mi dispiace? PUBBLICO: [INAUDIBLE] DAVID MALAN: Non necessario, è più inclusiva di quella, in realtà. E 'il carattere jolly. Stella quasi sempre significa qualcosa, quindi questo significa, in questo caso, seleziona tutto dal database. Così, quando dico questo, voglio dire dammi indietro ogni colonna dalla mia tabella denominata utenti. Quindi dammi un set di risultati, come si chiama. In altre parole, mi dia una copia del foglio di calcolo, è quello che voglio dire. Ma se ho detto selezionare stelle da parte degli utenti dove ID è uguale a 1, quanto grande dovrebbe il mio set di risultati sarà poi? O equivalentemente, quante righe dovrebbero I essere riconsegnato dal database? Probabilmente solo uno, se ho davvero trattati ID come un identificatore univoco, e se David ha che ID univoco, io dovrebbe tornare una e una sola fila contenente tutte le informazioni di David. Se ho detto questo, dove ID è uguale a 99, dovrei tornare, in questo contesto, zero righe, almeno al momento. Tuttavia, se non mi interessa davvero A proposito di tutte queste informazioni, Potrei solo dire, da dove viene David vive? Selezionare il codice di avviamento postale da gli utenti in cui ID è 1. Questo selezionerà solo a me zip di David codice e non la totalità di quella riga. Perché potrei fare questo invece di la query stella, la wild card? PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, potrei solo bisogno. Quindi, la prestazione è ancora una volta la risposta qui. Perché chiedere di più informazioni di cui avete bisogno, perché anche se è tutto a posto insieme, avete ancora copiare i dati, sembrerebbe, dal database nel vostro programma in qualche modo, e questo è solo stupido se si solo bisogno di cinque di queste cifre, Non l'interezza della riga. Allora, come faccio ad inserire un utente? Supponiamo che un utente deve solo registrato per la prima volta. La sintassi di solito simile a questa. Inserire in utenti, e allora diremmo valori, e poi diremmo valori come, diciamo, Lauren Scully, il nostro operatore video proprio qui. E il campo successivo è di genere. Così diremo quote, unquote "F", allora abbiamo un ID e ho intenzione di say-- facciamo finta che in realtà non è qui, quindi ci rewind nella storia. Quindi 2 sarà il suo ID. E poi il campo successivo Ecco la sua e-mail. Così sta andando essere come Lauren Scully e così via, e ci limiteremo a punto punto dot via da qui in poi. Ora sarà ottenere un po ' noioso, ma la query di inserimento finirebbe per assomigliare a quello. Se voglio sbarazzarsi di Scully, uh-oh, andiamo annullare la registrazione lei, cancella il suo account, eliminare da parte degli utenti in cui ID è uguale a 2, sbarazzarsi di Scully. O posso dire aggiornare gli utenti impostati, diciamo, che cosa potremmo cambiare? Supponiamo che si muove. Set zip uguale 021-- no, questo è il suo zip corrente. 90210. L'unico altro codice postale So che in tutto il mondo. Quindi, che avrebbe cambiato la zip code-- in realtà, che non cambierebbe il suo codice postale. Quello che ho appena fatto? Anche se la sintassi è probabilmente nuova. PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, mi sono trasferito tutti a Beverly Hills, California. Quindi dovrei realtà dire dove ID è uguale a 2. E così via. Quindi SQL è tutto di questi tipi di istruzioni. Selezionare, inserire, cancellare, aggiornare, con questi predicati alla fine queste clausole in cui, per così dire. E c'è molto di più si può fare, ma è davvero solo riduce semplicemente, se arcanamente, esprimendo ciò che si vuole il database di fare. E quindi il database capirà, quando si inserisce Lauren Scully nella banca dati, dove mettere la sua memoria in modo che possiamo ottenere molto rapidamente la sua base sul suo indirizzo e-mail o basato su suo numero ID o simili. Sì, Dan. PUBBLICO: [INAUDIBLE] DAVID MALAN: Davvero buona domanda. Saranno questi script cambiare da Microsoft Access per Oracle a MySQL a PostgreSQL? La risposta breve è che dipende. In teoria, vi è una molto significativo sottoinsieme comune di SQL che è condiviso tra tutti di queste implementazioni. Tuttavia, diversi produttori hanno caratteristiche aggiunte alle loro banche dati per fare certe cose oltre la portata di queste caratteristiche, che potrebbe, infatti, rompere. Così gli sviluppatori di modo copertura contro questo, è che piuttosto che scrivere grezzo codice SQL come sto scrivendo qui, che invece utilizzano una biblioteca, una libreria comune che si è una sorta di livello superiore e abstract via quale prodotto si sta utilizzando. E ti dà funzioni e procedure per chiamare in modo che non effettivamente scrivere SQL prime. In teoria, quindi, si può cambiare prodotti da Oracle a Microsoft o viceversa o niente altro, e letteralmente cambiare nulla circa il proprio codice. La realtà, però, è, a volte rinunciare a caratteristiche come un risultato. Si potrebbe avere scelto un prodotto perché è ottenuto queste caratteristiche a valore aggiunto, e sei solo ora non il loro utilizzo consapevole. E anecdotally, la maggior parte delle aziende tendono mai ad allontanarsi dal loro database. Così, mentre questo è un bello hanno funzione, la realtà è, se stai revisione il database, sei Probabilmente fare mazzi di altri cambiamenti in ogni caso, che non necessariamente necessità di anticipare questo. Quindi è senza dubbio over-engineering il problema, ma in realtà dipende dal contesto. Ma in teoria, SQL è condivisa tutti questi diversi prodotti. Davvero buone domande. Sì. PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, così si può pensare di un database è solo un server, a fine il giorno, e all'interno di tale server è un insieme di tabelle, righe e colonne. E quando si invia una query come questa dal programma, il vostro sito web, scritto in Java, Ruby, Python, qualunque sia, il server riceve questo comando e interpretare in letteralmente stesso modo abbiamo discusso in precedenza con linguaggi interpretati, e quindi eseguire una certa azione sullo zero o più righe a zero o più tabelle. PUBBLICO: [INAUDIBLE] DAVID MALAN: Esattamente, esattamente. Così il pseudocodice per qualcosa come che potrebbe essere questo. Nel file PHP o la vostra file di Python o il file Java, si dovrebbe avere il codice pseudocodice, o Scratch-come blocchi, se le visite degli utenti acme.com/register~~V per prima volta, quindi inserire in utenti e così via. E vorremmo tradurre questo per più codice concreto alla fine. Ma in realtà, abbiamo tutti i mattoni qui, Anche se siamo un po 'saltare delle fasi di attuazione. Quindi, mi permetta di trovare un difetto con quello che abbiamo meravigliosamente ha fatto proprio un attimo fa. È stato creato un bel tabella completa per gli utenti. Certo, potremmo implementare in alcuni modi diversi, ma si è in realtà ci ha portato giù il path-- e vi dico, ma è probabilmente il mio fault-- di un abbastanza implementazione del database inefficiente. Non è normalizzato. E per normalizzato intendo ci sarà, nel tempo, un esubero significativa, e quindi inefficienza, che è spreco di spazio. Sulla base di solo ciò che si vede qui, può immaginate dove questo spreco di spazio sta per venire da, nel corso del tempo, come registrano sempre più utenti per il tuo sito? Quali dati potrebbe diventare superfluo? PUBBLICO: [INAUDIBLE] DAVID MALAN: Perché vuoi dire che? PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì. E supponiamo che per gli scopi di oggi che questo è vero. Risulta, e abbiamo imparato questo nel modo più duro, che non è vero. In qualche modo più città hanno, in qualche modo, lo stesso codice di avviamento postale, che rompe questa meravigliosa intuizione. Ma supponiamo che sia vero, perché è quasi sempre vero. Quindi supponiamo che un codice postale è sempre associata alla stessa città e stato, che è una specie di assunzione ragionevole, ma non corretto, si scopre. Ma un'ipotesi ragionevole per scopi di oggi. Poi immagino che io vivo a Cambridge, MA, secondo la tabella di questo utente, e supponiamo che Lauren Scully vive a Cambridge, MA, e supponiamo che Kareem vive a Cambridge, MA, e Arwa vive a Cambridge, MA, tutti noi in 02138. Perché stiamo ricordando Cambridge, MA, 02138 per tutti e quattro di noi? Ciò che dovrebbe essere sufficiente a ricordare? PUBBLICO: [INAUDIBLE] DAVID MALAN: solo il codice di avviamento postale. Solo che 02138 esiste, perché si sa che cosa potremmo fare? Potremmo avere un po 'di fantasia qui e qui, definire un altro tavolo dove questo sta andando essere il nome, questo sta per essere il tipo, questo sta per essere il di lunghezza, e d'ora in poi, io sono andando a chiamare questa mia città tavolo. Questo è stato chiamato, di Naturalmente, la mia tabella utenti. E così quello che dovrei mettere qui per mio tavolo le città, cosa ne pensi? PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì. Così zip e stato e la città. E così il tipo qui, diremo questo sta per essere un char 5 ancora una volta, oggetto di dibattito di prima. Questo sarà un enum, forse come prima, e la città sarà un varchar 50. E così ora cosa ottengo per cancellare da questa tabella per eliminare tale inefficienza? PUBBLICO: [INAUDIBLE] DAVID MALAN: Nizza. Stato e la città vanno via, così ho ora eliminato il potenziale inefficienza per ridondante ricordare, Cambridge, MA, Cambridge, MA, Cambridge, MA, Cambridge, MA, che, si spera non è mai cambierà. E anche se lo fa, è minorly fastidioso, ora che devo cambiare in più righe, mentre qui, ho potuto solo cambiarlo in un unico luogo. Ora che cosa è il trade-off, forse? Questo è stato super conveniente. Ha avuto tutti i miei dati piacevolmente insieme. Ma ciò che è chiaramente il caso ora? PUBBLICO: [INAUDIBLE] DAVID MALAN: Esattamente, e io sono contento che hai usato la parola si uniscono, perché questo è in realtà la parola chiave, nel mondo dei database relazionali in SQL, è una parola che reale possibile digitare o almeno trasmettere. E infatti, quello che ora abbiamo a che fare per selezionare informazioni complete di David è qualcosa di simile a selezionare star da gli utenti, si uniscono le città, e ora on-- Ho intenzione di passare solo per una seconda linea in modo che questo users.zip fits-- uguale cities.zip, dove users.ID è uguale a 1. Allora, cosa sta succedendo? È brutto guardare, ma è possibile tipo di lesse sinistra a destra, dall'alto verso il basso. Scegliere categoria da parte degli utenti è la stessa di prima, ma non è da utenti di per sé. E 'da parte degli utenti si uniscono città. Che cosa sono io che unisce tali due tabelle? Beh, a quanto pare, la tavoli utenti campo zip, e questo periodo è solo speciale sintassi per esprimere questa idea, e questa è la città tavoli campo zip. Voglio quei due ad essere uguali, ma voglio scegliere in ultima analisi, solo quelle righe in cui ID nella tabella utenti è uguale a 1, che è accaduto a essere mio. E tanto per essere chiari, un programmatore, in genere quando hardcode qualcosa come il numero 1, perché altrimenti solo per il sito sostiene David o la primo utente, sarebbe invece fare qualcosa come ID, dove questo rappresenta un variabili, cosa che può cambiare nel tempo, simile nello spirito di quello che ho detto in precedenza con questi tipi di segnaposto. Ma per ora ci limiteremo a hardcode come 1. E così che cosa significa? Beh, un bel modo per visualizzare questa è che se questa mano è la tabella utenti, e questa mano è le cerniere tavolo, siamo una sorta di finding-- e la punta delle dita sono zip qui, e la punta delle dita qui ci sono zip, sei tipo di incastro esso in modo da ottenere indietro la risultante tabella originale, da veramente unendo le due tabelle nel campo comune. E non deve essere zip. Potrebbe essere più altro, ma zip è bello, perché uno, è breve, due, è sempre il stessa lunghezza, quindi non c'è un reale efficacia di quanto Olivier qui proposto con factoring la zip, e [INAUDIBLE] proponendo che ci liberiamo di città e stati. Quindi questo è il processo noto come normalizzazione. Tutte le domande su questo? Ebbene vorrei sottolineare questo è il genere di cose, anche se è piuttosto basso livello, questa discussione, che si potrebbe pensare stai sorta di ottenere perso in le erbacce, questa è una manifestazione di ampia possibilità per gli sviluppatori di essere cattivo. Ed infatti, anche quando, in Corsi ho insegnato, quando abbiamo avuto, per esempio, inesperto programmatori di laurea costruire siti web, a prima vista, i siti web potrebbe apparire terrificante. E hanno tutte le funzionalità che abbiamo richiesto, gli sviluppatori hanno fatto un buon lavoro. Ma non necessariamente conoscono abbastanza di progettazione di database o non pensavano difficile abbastanza circa i tipi di dati e le tipologie di utenti i sito stava per avere, e troviamo, poi, sei mesi più tardi, dopo che sono laureati o spostati su, che dannazione, il nostro sito è veramente, veramente lento. E non sto neanche parlando di avere milioni o migliaia di utenti. Voglio dire, a poche centinaia di utenti del campus, i quali piace, per esempio, negozio per i corsi allo stesso tempo, sono utilizzando tale catalogo dei corsi applicazione ho detto e la cosa sta diventando davvero rallentare perché non c'erano indici. Non c'erano stelle rosse, per così parlare, o non aveva necessariamente fattorizzato dati comuni a ottenere qualche risparmio di spazio. E così, quando vagliare uno sviluppatore o la persona database o simili, il tipo di domande a cui pensare attraverso è anche, in sede di revisione del codice di qualcuno, per dire, non necessariamente guardare attraverso tutto il loro codice, ma dire, diamo un'occhiata attraverso le tabelle del database. Cosa stai memorizzazione? E poi a dire, beh, aspetta un minuto, perché stai usando un intero? Che cosa succede se abbiamo 4 miliardi e 1 di queste righe? E questi tipi di domande è un'opportunità al tipo di spingere indietro e ottenere un senso di dove se non sei comodo fare essa, avere qualcuno più tecnico queste domande, di se o non la persona sa davvero loro roba. E questo è il tipo di roba, anche, che la gente su internet che sono autodidatta, forse imparare meno frequentemente, perché si non necessariamente imbattersi in essa tanto, perché è possibile ottenere il database installato e funzionante, ma se non avete letto su tutorial o stato ha parlato di normalizzazione dei database e l'indicizzazione e le prestazioni, questi sono i tipi di cose che stanno per farti del male. E si potrebbe pensare, o un cattivo ingegnere potrebbe dire, oh, bene, abbiamo una migliore retribuzione per un database più grande o un database più veloce o semplicemente buttare soldi in questo, scala in verticale, non è necessariamente così. Se si va dentro-- e si può andare in dopo gli indici fact-- e aggiungere, e potrebbe richiedere alcune ore per il database per costruire che i nuovi dati struttura che ho accennato in precedenza, è ancora possibile risolvere il problema dopo il fatto, che questo è dove si iniziare a distinguere buoni designer male progettisti, non solo esteticamente, ma le prestazioni-saggio pure. Qualsiasi domanda? No? Così per NoSQL, che era l'altro tipo di database a cui ho accennato in precedenza, non si dispone di righe e colonne. Invece, si dovrebbe avere qualcosa che sembra un po 'più simile a questo. Ho intenzione di usare la sintassi comune. parentesi graffe capita di essere utilizzato qui parecchio. Si potrebbe avere qualcosa come primo nome è David, si potrebbe avere l'ultima nome è Malan, citazioni, si potrebbe avere ID è-- mi scusi, whoops-- ID è 1, e-mail è malan@harvard.edu, e non lo farò preoccuparsi digitando il resto, e poi alcune altre cose. In altre parole, questo è una rappresentazione testuale di quello che noi generalmente chiamare un oggetto in un programma per computer. E un oggetto è in genere solo un insieme di coppie di valori chiave. Quindi, di nuovo, questo tema ricorrente. Abbiamo visto coppie di valori chiave in HTML, abbiamo visto coppie di valori chiave ora nel contesto dei database, e visto coppie di valori chiave nel contesto di, credo, una lingua prima di oggi. Continua ad emergere. E in effetti, questo è davvero quali dati si riduce a, dati e metadati, o valori e chiavi, rispettivamente. Quindi, un non-relazionale base di dati, basata qualcosa su oggetti, dove si è appena ciuffo il tutto e metterlo nella memoria, sarebbe generalmente raffigurato come, o pensato, come questo. E lascio che ora come un sorta di approccio alternativo. E non è necessariamente migliore rispetto agli altri. In realtà, molto in voga in questi giorni sono sistemi di database come MongoDB e Redis e pochi altri tali strumenti, liberamente disponibili, ma sono sempre più in voga. In parte perché offrono ulteriore dispone di oltre questi approcci tabulari, ma anche perché sono un po 'più facile da usare, perché non si deve pensare così difficile A proposito di un sacco di queste decisioni di progettazione. Quindi, vantaggi e svantaggi. Così rendo conto che ci sono opzioni al di là di quello che abbiamo appena trascorso tempo su. Quindi cerchiamo di fare questo. Facciamo un po 'di transizione torna ora alla programmazione web, così che tipo di concludere oggi con qualcosa questo è un po 'hands-on, riempiendo in alcune lacune da ieri. Lasciami andare a questo primo. Così ricordare che ieri abbiamo avuto qualche canonica HTML pagine che avevano inizialmente, solo HTML, e poi secondariamente aveva CSS, Fogli di stile. Si tratta di un nuovo tag che non abbiamo vedere ieri, o soffermarsi su, i cosiddetti tag script. Si scopre che si può effettivamente incorporare un linguaggio chiamato JavaScript nel tuo web pagina e rendere il vostro web pagine fare qualcosa. Così che cosa voglio dire con questo? Beh, mi permetta di andare avanti e basta prendere in prestito questo codice per un momento. Ho intenzione di andare in Cloud9, non c'è bisogno di andarci voi appena ancora, e ho intenzione di chiamare questo alert.HTML. Ho intenzione di incollare nel mio file qui. E proprio per chiarire quello che ho fatto, per non andare a questo indirizzo e andare per avvisare, e si vede il mondo Ciao. Ma questa è una specie di deludente. voglio fare qualcosa un po 'diverso. Quindi ho intenzione di farlo in realtà questo. Ho intenzione di andare in qui, e tra le mie tag script, dire alert ( 'ciao, mondo'); così preavviso è un po 'sciatta, ma ho HTML, all'interno della quale è un linguaggio chiamato JavaScript, e questo è ciò che è chiamato un funzione di chiamata o chiamata di procedura. Questo è un verbo, letteralmente, in questo caso, e sto invocando la funzionalità del codice che qualcun altro ha scritto. In modo che la funzionalità è un avviso, così andiamo a questa pagina ora e fare clic su ricarica, e ora si vedere un po 'di interattività. È una specie di vecchia scuola e brutto. Questo tipo di voi ricorda il pop-up, forse, di un tempo ma lo ha fatto fare qualcosa di un poco più programmatico. Così, più di questo, facciamo qualcosa di più interessante. Lasciami andare qui e sbarazzarsi di questo. E ho intenzione di andare avanti e creare un modulo come abbiamo fatto ieri. In realtà, sai una cosa? Ho intenzione di andare in google.html, che abbiamo iniziato ieri, che sembrava questo, attraverso il quale abbiamo cercato per il gatto A meno di notare c'è una specie di bug nella versione corrente. Funziona per i gatti, ma supponiamo che Io non cooperare e digito nulla, e ho semplicemente fare clic su Invia. Questo è il tipo di comportamento strano. Mi ha portato al reale di Google, non mi ha dato un messaggio di errore. Mi piacerebbe dire all'utente è necessario darci un valore. Quindi, come potremmo fare questo? Ebbene vorrei tornare in Cloud9 e lasciami andare nella parte superiore della mia pagina e aggiungere un tag script come questo, in cui Ho intenzione di scrivere un po 'di codice JavaScript. E ho intenzione di fare quanto segue. Se (document.getelementByID-- e richiamo di cui abbiamo parlato in precedenza che, tale funzione. Cosa ID cosa voglio ottenere? Voglio ottenere q, e ho intenzione di per esempio è uguale a niente, come questo-- in realtà mi permetta di usare le virgolette solo per consistency-- uguale niente, poi alert ( "Si prega di digitare una query") qui. Quindi devo quello che sembra essere qualcosa di simile a una condizione. Abbiamo visto questa idea generale di Scratch. E 'come una di quelle di puzzle pezzi che si presentava così. E quello che sto dicendo? Bene, qui, accorgo io sono andando a fare quanto segue. Ho intenzione di dare a questo modulo campo, non solo un nome di q, che è quello che viene passato a Google, ma sono intenzione di dare un identificatore locale, anche chiamato q. Ma potrei chiamare questo tutto quello che voglio, sto solo andando a mantenere le cose semplici e anche chiamarla q, solo per semplicità. E ora ho intenzione di fare qualcosa di un po 'di più. Sui campi del modulo qui, ho intenzione di aggiungere quello che è chiamato un gestore di eventi. Su presentare, voglio chiamare una funzione chiamata validate. Questo non esiste ancora, questo parola, o questo verbo convalidare, perché quello che ho intenzione di fare qui ora è aggiungere un po 'di codice. Io vado a dire la funzione Convalida. Ho intenzione di rientrare questo e aggiungere un altro parentesi graffa qui e un altro qui. Si consideri che cosa questo sta facendo ora. Ho now-- pensare a questo come creato il mio proprio pezzo di puzzle che prima non esistono, e ho chiamato questo puzzle piece il pezzo di puzzle validate. Il suo scopo nella vita è quello di eseguire le quattro linee di codice all'interno di esso. Se document.getElementById così concettualmente, che sta per andare in elemento, l'elemento HTML la cui unica idea è solo q, e quindi anche se la sintassi sembra un po 'strano, che la parità è uguale significa semplicemente eguali. Quindi significa che se l'elemento con il identificatore unico di q, quando ottenuto, non ha alcun valore, è solo pari tra virgolette, nulla in là, allora che cosa voglio fare? Voglio urlare l'utente. E non andremo grande dettaglio qui. Ho intenzione di restituire false. Questo è un errore. Altrimenti, ho intenzione di restituire true. Quindi, o ha funzionato o non ha fatto. Falso o vero. E ora se non ho commesso errori, mi permetta di salvare questo e ricarica questa. E lasciatemi solo doppio controllo che Non ho, infatti, fare qualsiasi errori di battitura, quindi non mi imbarazzo me stesso. Vediamo se questo funziona. Così ora ho intenzione di digitare i gatti. Funziona ancora, o lavori e mezzo, almeno. Ora vorrei ricaricarlo, e ora lascio Provo la presentazione senza digitare anything-- maledizione, si è rotto. Un momento. Mi permetta di aprire la console, [INAUDIBLE] log, ricaricare la pagina. Fammi provare di nuovo. Oh, maledizione. Ho dimenticato. Ho fatto un errore di battitura. Mi ricordo quello che è. .valore. Volevo dire se il valore dell'elemento cui ID è q è uguale a quello, poi urlare a l'utente. Così ora mi permetta di tenere di nuovo il fiato. Eccoci qui. Ecco quà. Si prega di digitare una query. Quindi non mi sta lasciando passare. Posso essere una sorta di giocoso con questo, e invece di controllare per nessun valore, Posso dire una cosa del genere, non più alla ricerca per i gatti, e ora possiamo lasciare che più giocosamente la ricerca degli utenti per i cani se lui o lei vuole, o se vado qui e la ricerca per i gatti, ora non posso. Allora qual è il takeaway qui? Quindi uno, abbiamo introdotto in il nostro mondo di HTML e CSS, funzionalità di programmazione. Posso effettivamente ora prendere decisioni in codice. In precedenza, tutto quello che potevo fare è contrassegnare contenuto testuale o contenuti grafici e dire che cosa cercare come e dove visualizzare. Ora posso davvero chiedere questioni della pagina web e prendere decisioni basate su di esso, e richiedere all'utente se ho bisogno di urlare a lui o lei. Quindi proviamo qualcosa da soli con questo. Vai avanti, mi permetta di aprire la diapositiva successiva qui, e solo sottolineare una cosa. Proprio come con i CSS, possiamo scomporre il nostro codice JavaScript in un file separato, si può fare la stessa cosa con JavaScript come con i CSS. E si usa che l'utilizzo di una fonte attributo del tag script. Ma noi non complicare le cose per ora. Invece, se potessi andare a non questa pagina, ma-- mi permetta di spostare questo giro in order-- andare, se si potesse, questa pagina qui. Questo URL qui. E 'nelle diapositive di oggi. Potrebbe essere necessario ricaricare perché Ho aggiunto un paio di cose. Ma andare là dove alcuni enigmi attendono. E questo ci darà una possibilità, in un contesto leggermente più divertimento, a dilettarsi con qualche JavaScript. E quando si arriva lì, Mi spiego cosa attende. Get verde. Impostare blu. Imposta verde, rosso imposta. Ops. Scusate. Questo è quanto di nostra documentazione per questa sfida. E questo sta andando a lavorare come segue. Quindi, quello che hai su questo Pagina è un intero gruppo di puzzle di immagini da un compagno presso la Stanford University. Quindi, quello che stai vedendo qui è quasi tipo di uno di quei puzzle occhio magico, ma se basta guardare a lui, niente sta andando a saltar fuori di te. Piuttosto, qualcosa è nascosto in questa immagine. Ed è nascosta nel modo seguente. Immagini, come forse sapete, può essere composto da soli tre colori. Alcuni rosso, alcuni blu, e un po 'verde. E siamo in grado di fare la colori dell'arcobaleno miscelando i tre colori in qualche modo. Quindi questo sembra per lo più verde e blu, ma come Nick dice qui, questa immagine Ferro puzzle è un puzzle. Esso contiene un'immagine di qualcosa di famoso, tuttavia, l'immagine è stata distorta. L'oggetto è famoso nei valori di rosso. valori Tuttavia, il rosso hanno tutti stati divisi per 10. Così essi sono troppo piccoli di un fattore 10. In altre parole, Nick ha preso un'immagine originale, e lui desaturated tutto della rossa da esso, abbassare la quantità di rosso inchiostro, se si vuole, in essa. I valori blu e verde sono tutti semplicemente senza senso, valori casuali, alias rumore progettati per oscurare l'immagine reale. Allora, cosa ha fatto Nick era lui attenuato il rosso e poi ha appena gettato casuale quantità di blu e verde l'immagine di tipo di oscura ciò che in realtà è ancora lì. È necessario annullare queste distorsioni per rivelare l'immagine. In primo luogo, impostare tutti i valori di blu e verde a zero per farli fuori del modo, e guardare il risultato. Poi moltiplicare ogni valore rosso per 10, ridimensionamento fino a circa il suo valore finale. Qual è l'oggetto famosa? Quindi tutti voi avete questo rettangolo nel tuo browser al momento. E si noti che vi è una certa codice di avviamento, per così dire. Questo è un codice JavaScript che Nick ha scritto per voi. E notare che non c'è una linea nel mezzo che inizia con una barra barra, che è che cosa è generalmente chiamato un commento. Vuol dire che è una frase al programmatore che non ha significato funzionale. E 'solo un segnale visivo per l'umano. Così si può andare avanti e eliminare solo quella linea, e non essere super attenti a eliminare o modificare qualsiasi altra cosa. E vorrei solo si cammina attraverso ciò che questo codice fa e mi lascio a voi per capire l'immagine segreta. Questa prima linea qui che ho appena evidenziato ti dà la seguente. Sul lato sinistro, Hai quello che viene chiamato una variabile che Nick ha arbitrariamente, ma ragionevolmente chiamato im per un'immagine. Sul lato destro di che segno uguale, sta dicendo mi danno un nuovo citazione, unquote "semplice immagine". Semplice immagine, in questo contesto è ciò che è chiamato una classe, beh, è un po 'come un class-- tecnicamente un prototype-- ma in realtà, questo mi sta dando un nuovo oggetto, i cui contenuti sono file, ferro-puzzle.png. In altre parole, Nick ha creato questa nozione di un'immagine semplice in modo che possiamo, per pedagogico finalità, giocano con l'immagine e cambiare il suo colore rosso, valori verde e blu. E come stiamo facendo questo? Questa sintassi un po 'criptica qui è un po 'come il blocco di ripetizione che alcuni di voi hanno visto in precedenza Scratch oggi, dove si può ripetere 10 volte. In questo caso, Nick non ha codificato un numero come 10. Invece si sta dicendo, inizializzare una variabile denominata x 0, controllare se x è minore di la larghezza dell'immagine. E così per essere più corretta, l'immagine è variabile, dot significa andare all'interno di esso e ottenere la sua larghezza, e poi paren aperti, chiusi paren è solo modo di un programmatore di dire questo è una funzione. Questa è una procedura. Questa è la funzionalità qualcun altro ha scritto. Usalo e mi restituire una risposta. E allora x ++ è un modo elegante per dicendo, dopo aver fatto questo una volta, incrementare x di 1. In altre parole, questo è il modo di un programmatore di indurre un ciclo che è andando a iterare tutte le colonne in un'immagine. L'immagine è solo una griglia di puntini, righe e colonne di punti. Questo è un modo di iterazione su tutte le colonne. E all'interno, Nel frattempo, stiamo iterazione sopra le altezze, qui e qui e qui. Quindi questo è solo un modo di Traipsing, quasi come una vecchia macchina da scrivere scuola, solo andare sulla intera immagine in modo iterativo. Anche questo non è del tutto tutto chiara, basta prendere sulla fede, per ora, che queste tre linee di codice insieme sono andando a permettere di guardare in modo iterativo ad ogni pixel, ogni punto nell'immagine. Che cosa è un pixel? Ebbene, per essere chiari, se guardiamo in originale e lo zoom in, se davvero messo gli occhi allo schermo del computer, che è solo un sacco di punti, diversi mille puntini imballate insieme lì. E così quello che stai per fare? Ognuno di questi punti, una definizione finale, è il risultato di ciò che è generalmente chiamato RGB, rosso, verde, blu, che ancora, possono essere combinati per dare a qualsiasi numero di colori. In realtà, se vi ricordate da molti, molti anni fa, schermi del proiettore come queste cose utilizzato per avere non uno ma tre lenti. Uno di loro sputare luce rossa, uno dei li sputano fuori la luce verde, uno di loro sputare luce blu. E se si fosse in una scuola media come se fossi in cui non sono mai stati correttamente allineato, eri sempre la visione di film di storia che erano leggermente distorta, perché i tre colori non erano combinando correttamente. Ma risulta che ciascuna di questi valori di rosso, verde e blu, può avere un numero associato con loro. Per esempio, 0 per il rosso significa nessun rosso, 0 per il verde significa non verde, e 0 per il blu significa nessun blu. Quindi, se non avete rosso, non verde, e non blu, che colore avete? PUBBLICO: [INAUDIBLE] DAVID MALAN: Lo faresti spero, che sia bianco. Purtroppo, questo operates-- dispiace? PUBBLICO: [INAUDIBLE] DAVID MALAN: Quindi in realtà hanno nero, in questo caso. Quindi, se avete nessuno di questi i colori accesi, si ha il nero. Tuttavia, se avete, diciamo un sacco di loro, come un sacco di rosso, 255 di esso, un sacco di verde, e un sacco di blu, che è bianco. Quindi questi sono i due estremi. Così da questa logica, se ho un sacco di rosso e non verde e non blu, di che colore è? PUBBLICO: [INAUDIBLE] DAVID MALAN: A destra, ovviamente. E poi non rosso, molto verde, non blu, e poi se have-- bene, dobbiamo solo finire esso, proprio perché, ma questo, naturalmente, ora, è blu. E ora è possibile combinare questi colori. Ora, come un a parte, se qualcuno di voi ha mai fatto un po 'di progettazione vera e propria sito web, si potrebbe effettivamente vedi simboli come questo. FFF-- e in realtà, è probabilmente nemmeno quello. E 'FFFFFF. Chiunque abbia mai visto F ed E di di e A through-- così si scopre, abbiamo parlato ieri su decimale, e oggi, un po 'su decimale. Oggi abbiamo parlato di binario. Risulta, esadecimale è molto sistema di base comune per l'uso in prodotti. Binary è due, decimale è 10, esadecimale è 16. E si scopre, come si fa si contano in esadecimale? Zero, uno, due, tre, quattro, cinque, sei, sette, otto, nove, cosa si usa dopo le nove? Qual è il numero successivo? Abbiamo già usato zero. Ho bisogno di 16 di questi. Zero, uno, due, tre, quattro, cinque, sei, sette, otto, nove, avete bisogno di qualche convenzione arbitraria. E ciò che l'umanità ha deciso qualche tempo fa, che dopo le nove arriva la lettera A e poi B e C. Quindi la modo si conta in esadecimale è zero, uno, due, tre, quattro, cinque, sei, sette, otto, nove, A, B, C, D, E, F, e che conterà tutta la strada, si scopre, a 15. Quindi zero a 15 è zero a F. Ora, perché è così significativo? Beh, quando si hanno due F di, è così che si esprime 255. Quindi, per farla breve, in il mondo di Photoshop, che software di progettazione grafica, nel mondo dello sviluppo web, dove si hanno un sacco di colori, Naturalmente, con cui giocare, spesso programmatori esprimere quelli in esadecimale, solo perché tende per essere un po 'più semplice. Anche se a prima vista è molto più complessa. Quindi, in ogni caso, è importante perché Nick a Stanford ci ha dato sei pezzi di funzionalità che voi, i programmatori in erba, ora avrà la capacità di usare. Costruito in questo web pagina sei funzioni, sei procedure che Nick ha scritto. Tre di loro otterrà un numero, rosso, verde, o un valore blu. Tre di loro si impostare tale valore. E queste sottolineature sono solo segnaposti, quindi è necessario sapere che cosa questi sono. Così, con queste tre funzioni, la prima di queste cose sta per essere una coordinata x, e la seconda di queste cose sta per essere una coordinata y. In altre parole, che punteggiano, che pixel vuoi ottenere il verde di, ottenere l'azzurro, ottenere il rosso di. E poi qui, questo sta per essere x, questo sta per essere un valore y, e questo sta per essere un numero. Allora, facciamo la prima linea di questo insieme e poi lascio a voi per cercare di dedurre il resto. Quindi, secondo le istruzioni in questa pagina, abbiamo bisogno per aumentare il rosso di un fattore 10, e abbiamo bisogno di rimuovere il verde e rimuovere il blu. Cominciamo con questi ultimi scenari. Quindi, se voglio, e ho intenzione far rientrare utilizzando alcuni spazi, se voglio impostare il colore rosso, verde, o il valore blu, Ho intenzione di fare quanto segue. Immagine, im.setBlue, e poi in base alle mie istruzioni qui, Quali sono le tre cose dovrei digitare all'interno delle parentesi, adesso? Ho bisogno il valore x, il il valore y, e quale numero dovrei mettere qui se voglio sbarazzarsi Di punto in bianco, sulla base di questa storia qui? Proprio zero. Se voglio nessun azzurro, io sono solo intenzione di cambiare a zero. Ora facciamo solo ricapitolare che cosa questo sta facendo. Ho qui in questi top seconda e terza linea, Ho sostenuto due cicli, cicli annidati, se si si, che stanno per avere l'effetto di progredire da sinistra a destra, verso il basso su tutta l'x valori e tutti i valori y. Perché ancora una volta, una foto solo una griglia di righe e colonne. Quindi questo sta per arrivare liberarsi di tutto il blu. Mi permetta di lasciare nella riga successiva a te. Come faccio a sbarazzarsi di tutto il verde? PUBBLICO: [INAUDIBLE] DAVID MALAN: Nizza. PUBBLICO: [INAUDIBLE] DAVID MALAN: Nizza. E ho intenzione di diminuire, e basta prendere cura di che non hai fatto errori di battitura. E se sei a tuo agio con quello che hai fatto, andare avanti e fare clic sul pulsante Esegui / Salva e vedere quello che si ottiene. E ancora una volta, abbiamo fatto solo tre modifiche. Abbiamo eliminato quel primo commentare e lo ha sostituito con queste due linee di codice. Ed è OK se avete bisogno di colpire il pulsante Esegui / Salva un paio di volte a riparare qualcosa. E lasciatemi anche lo zoom in sulla mia codice in modo da poter trascrivere. Buona. Così vedo Andrew ha quello sembra essere un errore. Ha appena ottenuto un grande nero rettangolo sul suo schermo. Qualcun altro ha un grande rettangolo nero? Pubblico: Sì. DAVID MALAN: Big rettangolo nero? OK, quindi pensiamo su ciò che questo significa. Abbiamo detto che lo zero, zero, zero, così non verde, non rosso, non blu, sta per dare il nero. E si scopre che la maggior parte dei nostri computer portatili semplicemente non hanno abbastanza fedeltà. Non si può dire del tutto lì è in realtà qualcosa c'è. E se magari tipo di magra lo schermo in avanti e indietro, forse si vede un qualcosa lì? Forse, una sorta di, una sorta di? Non è perfettamente nero. PUBBLICO: [INAUDIBLE] DAVID MALAN: Spoiler! Vi è una certa rossa lì, ma ricordate dalle specifiche del problema, Nick tonica giù. Egli desaturated in qualche modo, ma non fino a zero. Quindi, se vogliamo ingrandire l'importo di rosso, mi permetta di proporre questo trucco. Mi permetta lo zoom in sul mio schermo. E mi permetta di andare avanti e dire importo pari im.getRed (x, y). Questa riga di codice mi sta dando una cosa chiamata una variabile. Ho arbitrariamente, ma, senza dubbio, ragionevolmente chiamato la mia variabile cosa, apparentemente? Quantità. importo Just. Avrei potuto chiamato tutto quello che voglio, ma sono utilizzare questa altra funzione che ho descritto in precedenza per ottenere la quantità di rosso in x virgola y. Perché l'ho fatto? Cosa vuoi fare qui? È necessario add-- PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, forse moltiplicarlo per 10. E se non si conosce questo, sono intenzione di andare avanti e fare questo. Ho intenzione di andare avanti e per esempio, voglio che la quantità di rosso Voglio essere qualunque cosa è al rosso, tempi 10, e la stella, l'asterisco sul tuo Tastiera è il-- non usano x. Utilizzare la stella. Ecco come si moltiplicano le cose nella maggior parte dei linguaggi di programmazione. Quindi, secondo l'intuizione di Kareem, memorizzati in questa variabile denominata importo, è quanto rosso voglio in posizione xy. Come, ora, posso fare che Pixel avere quel numero? Hai già fatto prima. È possibile impostare il verde e la blu per nessun valore, a zero. PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì, ben non si vuole che a 10. È già fatto la matematica qui. Quindi stiamo ottenendo il valore di rosso, che è un numero basso, presumibilmente. Stiamo moltiplicando in crescita del 10. Che cosa si vuole fare con l'importo variabile ora? PUBBLICO: [INAUDIBLE] DAVID MALAN: Nizza. Così im.set-- cosa? PUBBLICO: setRed. DAVID MALAN: setRed, in posizione xy. Sì. E proprio valore. In altre parole, una variabile è un segnaposto temporaneo che si può mettere tutto quello che vuoi in. Ci capita di essere messa a numero in esso, al momento. Abbiamo moltiplicato dal 10 per renderlo più grande. E ora sto sostituendo quella variabile come quella terzo argomento, o ingresso per impostare rosso. E così che, una volta finire che, e prendono atto dei punti e virgola e le parentesi. Andare avanti e fare clic eseguire / salvare di nuovo, e vi dovrebbe vedere, magicamente, quello che era in realtà Là. [? Arwa,?] Che cosa c'è? La Torre Eiffel a pieno titolo rosso, non del tutto buio. dovrebbe essere più evidente ora, sì? OK. E Andrea, scatola non più nera? PUBBLICO: [INAUDIBLE] DAVID MALAN: Va bene. Così mi terrò questo sullo schermo. Se si vuole giocare con questo in seguito, io ricreare questo per voi. Ma questo codice qui ha fatto esattamente questo. Perché non facciamo un altro. Mi permetta di scorrere leggermente verso il basso. Quindi in questo caso, il proiettore in realtà non fare giustizia. Ma sui vostri schermi, probabilmente avere una casella molto rosso e molto nero. Anche questo è un puzzle che mostra qualcosa famoso. Tuttavia, l'immagine è stata distorta. La vera immagine, questa volta, è nei valori blu e verde. Tuttavia, tutti sono stati divisi 20 così i valori sono molto piccole. I valori rossi sono solo numeri casuali, rumore. Annulla queste distorsioni per rivelare l'immagine vera. Così Nick allora si dice cosa fare. Impostare i valori di rosso a zero, e allora non rovinare quello che è. Quindi moltiplicare il blu ed i valori verdi entro il 20. Quindi è quasi il stesso programma come prima, ma si sta invertendo il processo. E io metterò il mio codice da prima sullo schermo in caso si vuole fare riferimento ad essa o giocare ulteriormente con quello. Mi permetta di zoom avanti su tale. Ma l'immagine di rame risolvere puzzle, numero due. PUBBLICO: [INAUDIBLE] DAVID MALAN: OK, quindi questo mi non andare a dare come molti suggerimenti. Così ho would-- oh, cerchiamo di vedere, si ha un errore di battitura qui. Quindi ricorda, questo qui in realtà ha bisogno di andare lì. Quindi quello che proporrei, se si desidera concentrarsi su questo, c'è la risposta. Se si vuole trascrivere quello, che dovrebbe ottenere il primo lavoro. E quindi è possibile utilizzare che come ispirazione per il secondo. Bello. Buona. E per i curiosi, questo è un semplice esempio di una scienza o di un'arte chiamata steganografia, l'arte di nascondere le informazioni in immagini. Tipicamente, le immagini potrebbero essere filigranata molto platealmente con un logo sul fondo angolo, ma chiaramente, è può essere molto più sofisticato su di esso e in realtà nascondere altre immagini nelle immagini in qualche modo con questa tecnica. Prendere un altro 30 secondi, e poi ci almeno annunciare quello che si dovrebbe vedere. E vi lascio la terza uno come esercizio a casa, se si desidera più di una sfidare questo fine settimana. E penso che Andrew potrebbe hanno ottenuto prima. Qual è la seconda immagine, Andrew? AUDIENCE: Statua della Libertà. DAVID MALAN: Statua della Libertà sarà la risposta questa volta. Quindi, di nuovo, solo alcune semplici esempi, il cui obiettivo è quello di dare un senso di come Abbiamo tradotto Scratch pittorica blocchi di più fastidioso e più codice complicato, ma tutte le idee sono ancora esattamente lo stesso, anche se con l'introduzione Ora del concetto di una variabile, essendo in grado di memorizzare temporaneamente qualcosa. Facciamo uno più hands-on, basta collegare ora i puntini a qualcosa di un po 'di più del mondo reale. Quando sei pronto, se potessi andare a questo URL sullo schermo. Questo è anche nella vostra copia del scivoli, developers.google.com/maps~~V~~singular~~3rd. Cerchiamo di fare qualcosa di concreto reali, per così dire, sul web utilizzando l'API di Google Maps, o Interfaccia di programmazione applicazioni, nel modo seguente. Google, come molte aziende, fornisce un sacco di funzionalità libera che è possibile utilizzare per costruire la vostra proprie applicazioni interessanti. In realtà, se hai mai usato Uber per ottenere un taxi o una macchina, Probabilmente sapete che Uber ha una mappa e mostra autoveicoli su di esso. Cioè, come meglio posso dire, API di Google Maps. Essi sono in realtà utilizzando le mappe di Google, ma Uber non è una società di mappatura, né ciò sarebbe un problema particolarmente interessante risolvere in cima alla loro problema servizio di auto. E così stanno in piedi, di nuovo, sulle spalle degli altri, Google in questo caso. In modo da utilizzare le mappe di Google, ma proprio servizi di auto e altri tali caratteristiche. Quindi stiamo andando a sfruttare di questo per fare quanto segue. E se io sono andato troppo veloce, appena mi chiamano sopra in un attimo. Felice di ricapitolare alcune delle cose dell'immagine. Si dovrebbe vedere voi stessi in una pagina come questa. Così bello di Google, e sono tra i migliori di fornire non solo le API, ma API liberi che si può giocare con o utilizzare commercialmente. Essi cominciano si ricarica se l'utilizzo è alto, ma sono andato avanti in anticipo e ci ha firmato per un account gratuito che, si spera, 10 computer Non ci squalifica per un tratto. Quindi spero che questo manifestazione funzionerà. E notare che essi hanno API per Android, iOS, servizi web e web, qualunque essa sia. Concentriamoci sul web. Quindi fare clic sulla casella rosa, web, e che vi condurrà, si spera, di una pagina Qui. E hanno un sacco di API. E può essere un po ' travolgente in un primo momento, ma io ci sarò guido attraverso quello che vogliamo. In alto a sinistra è Google Maps JavaScript API, l'API JavaScript. Quindi, andare avanti e fare clic su quello. E che vi condurrà ora alla Nella pagina seguente, demo e codice di esempio. Mi permetta di diminuire qui. E mi permetta di ottenere noi a-- scorriamo per cui si dice fasi di avvio rapido. Lo schermo dovrebbe apparire come il mio. E ci sono due fasi, get una chiave e iniziare a sviluppare. L'ho già fatto passo uno per noi, ottenendo una chiave cosiddetto. E questa è una idea comune. Una chiave API è generalmente solo un gran numero casuale o una stringa che si suppone per incollare nel vostro codice, in modo che Google sa chi sei quando si sta utilizzando il loro servizio, la loro API. Non significa che siamo in carica nulla. E ora, fare clic su, invece di uno, fare clic avviare lo sviluppo. Se si può solo me onda oltre se non so dove siamo. Quindi ci limiteremo a graffiare la di superficie, ma ciò che qui Ho pensato che sarebbe stato interessante è di avere effettivamente tutti noi, utilizzando Cloud9 in una finestra e questo tutorial in un'altra finestra, lascia effettivamente ottenere il nostro applicazione installato e funzionante che incorpora un costume di Google mappa nella nostra pagina web, e poi aggiunge una o due caratteristiche. Ma ci limiteremo a graffiare la superficie di ciò che possiamo fare. Quindi, solo un controllo di integrità rapido. E 'tutti in questa pagina, API di Google Maps JavaScript? Dovrebbe dire iniziare. Non abbiamo intenzione di passare attraverso il tutto con qualsiasi mezzo. OK, in un'altra scheda, se non lo fai aprirlo, non andare in Cloud9 e farti a poco una nuova scheda, in ultima analisi. Quindi, di nuovo, c9.io da ieri, c9.io, e basta creare un nuovo file. E andare avanti e chiamata è tutto ciò che si desidera. Ho chiamato il mio map.html. Chiamatela tutto ciò che finisce in .html. E si dovrebbe essere più o meno dove mi trovo in questo processo con solo un prompt lampeggiante in un vuoto scheda denominata qualcosa come map.html. O un file, nuovo file questa volta. E ora, oltre al API di Google Maps JavaScript, faremo saltare la lettura in tutto questo testo. Ma si noti che mondo è ciao anzi in tutto il mondo, si vede ora. Ciao mondo ha questo grande colorato esempio di un intero gruppo di HTML. Vai avanti e copiare e incollare solo HTML, quindi dal tipo doc in alto tutta la strada per il tag HTML vicino, andare avanti e copiare tutti che-- ancora una volta, che è sotto il mondo ciao example-- e incollare che nella vostra scheda Cloud9, così che ora il vostro schermo dovrebbe apparire più o meno come la mia. E si può salvare, ma non caricarlo appena ancora. Diamo prima un'occhiata a il codice e vedere se ci non si può dedurre o imparare da quello che è Google ha avuto noi ciecamente copia e incolla. Vogliono solo per aiutare, letteralmente, iniziare bene, ma non c'è molto complessità in realtà c'è. Tutte le domande appena ancora? Siamo sicuri di andare avanti? OK. Così in fretta, facciamo solo fare alcuni controlli di integrità rapidi. Linea uno di quello che ho vedere, e si spera, si Vedete, che cosa significa, DOCTYPE HTML? Kareem, ricordare? PUBBLICO: [INAUDIBLE] DAVID MALAN: Sì. Ecco che arriva HTML 5. Nel frattempo, la linea due sulla schermata qui significa hey del browser, ecco che arriva il codice HTML vero e proprio. Linea tre è hey del browser, ecco che arriva la testa. Linea quattro è, naturalmente, hey del browser, ecco che arriva il titolo. Cosa fa la linea cinque fare? In realtà, questo non fa davvero fare qualcosa per noi. In questo caso, solo ridimensiona la pagina per un default. Linea di sei, non abbiamo parlato, ma specifica la codifica dei caratteri. Ci sono diversi modi per codificare i file, in particolare per le lingue straniere. UTF-8 tende solo per essere il default. Così ora vedremo in linea sette a 16, un po 'di CSS. E anche se non abbiamo visto tutte queste cose prima, possiamo tipo di inferire. Così la linea otto mezzi, hey del browser, si applicano tutti i seguenti a cui due tag, apparentemente? L'HTML e corpo del testo. Così la virgola è il nuovo cosa lì. E questo è solo un modo di specificando più tag in una sola volta. Poi abbiamo le parentesi graffe. Quindi, apparentemente, questo dice al browser, rendere l'altezza della pagina 100%. Quindi, anche se c'è molto poco contenuti, rendono l'intera pagina, rendere la cosa riempire la pagina. Rendere la mappa in ultima analisi, riempire la pagina. Margine, che cosa significa? Che di solito come arbitrario spazio bianco attorno ai bordi che qualche progettista del browser solo deciso dovrebbe essere lì, perché tipo di rende le cose sembrano più pulito. Ma noi non vogliamo questo. Vogliamo che la mappa che va fino ai bordi. Imbottitura, simile nello spirito a margini. Margini significano fuori, mezzi di imbottitura all'interno, ma è lo stesso tipo di accordo. E 'un po' di un buffer tra voi e gli spigoli. E poi la linea 13 è una buona occasione per una breve recensione. Che cosa significa mappa segno tagliente significa, o una mappa hashtag significa? Che cosa si riferiscono a, in linea di principio? PUBBLICO: [INAUDIBLE] DAVID MALAN: Esattamente. Questa proprietà, questa proprietà CSS si applica a una sola cosa, il tag HTML che ha un ID di citazione, unquote "mappa". E adesso andiamo avanti veloce, scorrimento fino al fondo del file, che Non è troppo lontano, e comunicazione on line 19, se si incolla esattamente come ho fatto io, linea 19 ha solo un div, che è un divisione della pagina, che ieri ho chiamato una regione rettangolare. Non ha niente in esso. Si tratta di un tag di apertura, chiusura tag. Ma ha un ID univoco. Quindi, quello che sembra essere accadendo qui è Google sta preparando la nostra pagina web per avere una completa altezza 100%, e senza imbottitura, senza margini, perché quello che stiamo andando a mettere dentro di questo div, il cui ID univoco è map, è una mappa reale incorporato. E vogliamo che riempire la pagina e non solo essere qualche piccolo rettangolo nel mezzo. Quindi la linea 14 sottolinea analogamente, la mappa stessa dovrebbe avere un'altezza di 100%. Così ora notare tra le linee 20 e 28, questo è il codice JavaScript. E questo è, anche se è sintatticamente un po 'strano, non vi è tutto ciò che tanto sta succedendo qui. In linea 21, questo sta dichiarando una cosa chiamata una variabile. Invece di chiamarla ammonta, come abbiamo fatto prima, stiamo più precisamente dicendo var, che significa semplicemente variabile. Abbiamo potuto utilizzare che in codice di Nick, ma non l'ha fatto, così ho Non ci ha dato fastidio a farlo neanche. Si tratta di una variabile chiamata mappa, e poi c'è una funzione che è a quanto pare chiamato initMap. Quindi questo è come la nostra personalizzato pezzo di puzzle in Scratch. Abbiamo creato un pezzo di funzionalità chiamata initMap, e si può tipo di inferire cosa sta succedendo qui. Sul lato sinistro, abbiamo una variabile, così stiamo andando a mettere il seguente cosa dentro quella variabile, da destra a sinistra. Il lato destro dice: hey del browser, dammi una nuova mappa di Google. E google.maps.map è solo un modo funky di specificare che questa funzionalità appartiene a Google Maps. Dopo le parentesi, che abbiamo visto questo prima, hey del browser, ottiene me gli elementi della pagina, il tag nella pagina il cui unico ID è-- PUBBLICO: [INAUDIBLE] DAVID MALAN: --map. E quello che sta succedendo, bene, questa linea insieme, linea 23, è essenzialmente dicendo: hey del browser, andare a prendere me che div vuoto sulla pagina il cui ID univoco è mappa, perché voglio inserire in it-- iniettare in esso, Se si will-- un intero gruppo di contenuti che sembra essere provenienti dal web, successivamente. E Google sta facendo tutto questo per noi. Quindi, di nuovo, alla fine della giornata, abbiamo questo esempio di astrazione. Non ho idea di quello che una mappa è o come implementare una mappa API. Non abbiamo bisogno di. Abbiamo solo bisogno di raccontare la mappa dove mettere se stessa, e lasciare quelli alla base della realizzazione Dettagli a Google. Ora c'è a quanto pare due dati che questo esempio è fornendo alle API di Google. Apparentemente il centro della mappa, e il livello di zoom, per così dire. E qualcuno riconosce questi coordinate, latitudine e longitudine? Probabilmente no, ma possiamo tornare indietro al tutorial, letteralmente vedere. Ma vedremo che in un attimo. Livello di zoom è un valore compreso tra, non lo faccio conoscere, uno in 13 o qualcosa del genere. Ha semplicemente a che fare con quanto lontano sei ingrandito dentro o fuori, e questo è tutto. E ora alla fine del Nella pagina, linea di comunicazione 29-- è un po 'brutto perché si wraps-- questa riga di codice è ciò che scarica al il browser API reale di Google. Tutto il codice che Google Gli ingegneri hanno scritto che implementano tutta questa caratteristica di mappe integrabili. Ora cerchiamo di non cambiare nulla. Se si sta seguendo, andare avanti e basta salvare il file, se avete davvero ciò che ho. Vai a suo URL. È possibile fare clic sul pulsante Esegui sulla parte superiore e che vi dirà la URL del server web di nuovo. E ti porterà ad una nuova scheda. Se si sceglie Apri per map.html, e le probabilità sono sei andando ad ottenere un avviso, un messaggio di errore, sì? Messaggio di errore, messaggio di errore? Così, purtroppo, l'errore messaggio non è che illuminante a meno che effettivamente apre la console, quella scheda speciale che abbiamo mantenuto l'apertura di ieri e un po 'prima di oggi. Ma mi sono imbattuto questa prima, così ho già capito quale sia la soluzione. In diapositive di oggi, o piuttosto, in Cloud9, avviso che non abbiamo fatto qualcosa deliberatamente. Si noti che questo tag script linea 29, se si leggono attraverso di essa, è come maps.googleapis.com/ qualcosa, qualcosa, qualcosa, poi notare qualcuno, uno degli sviluppatori, ha scritto in tutto il capitale lettere, la chiave API. Abbiamo bisogno di incollare qualcosa in là. E questo è stato il passo L'ho fatto per noi prima, e di nuovo si potrebbe lista nera se improvvisamente, 12 o più di noi iniziare a utilizzare la stessa chiave, ma vediamo cosa succede. Quindi, se si va in oggi scivoli, una diapositiva in seguito, c'è questa stringa molto funky-alla ricerca di testo. Vai avanti e basta copiare e che incollarlo dove si dice la vostra chiave API. Questo è quello che ho firmato per. E sicuramente non provare digitando manualmente, perché si sente irto con errori di battitura, potenzialmente. Quindi, basta copiare e incollare questo. E sta andando a fare la linea più a lungo, ma ora, tanto per essere chiari, dovrebbe apparire un po 'più come questo, dove la chiave non è uguale capitalizzato urlare contro di voi. Salvare la pagina, tornare indietro per l'altra scheda, ricaricare, e la speranza di vedere una mappa di dove? PUBBLICO: l'Australia. DAVID MALAN: l'Australia. Quindi, a quanto pare questi sono i Le coordinate GPS per l'Australia. E mi permetta di camminare per un attimo e aiutare chi non è proprio lì, ma mi permetta di proporre, tramite Google, trovare le coordinate GPS della propria città natale o il proprio paese di origine. E probabilmente Google può trasformare questo up, o Wikipedia può dire. Ma scegliere due valori differenti per latitudine e longitudine, tornare indietro e incollarli, e poi ricaricare la pagina dopo il salvataggio e vedere se si può avere un mappa per la propria città natale. E quando hai finito con che, il follow-up challenge-- e io ti do un po 'meno la direzione, deliberatamente, in modo che sia deliberatamente devono lottare per una coppia minuti con la documentazione, cambiare la mappa per non essere presente predefinito cartone animato, ma una mappa satellitare. Quindi, in realtà si vede satellitare le immagini al posto dei bei colori. E il suggerimento ti darò è cambiare il tipo di mappa. Torna a che ottenere ha iniziato la pagina per l'ispirazione. Come avrete raccolte, se siete alla ricerca, ci sono così molti di più cose che puoi fare. Alcuni di voi hanno già cambiato il tipo di mappa. Ma si può fare-- per esempio, mi permetta andare a qualcosa che abbiamo fatto per il corso I teach-- maps.cs50.net. Uno dei nostri undergrads ha fatto questo. Centriamo la nostra mappa sopra Harvard Yard e sovrapporre tutti questi nomi costruzione, e abbiamo avuto lo aggiungere questo. Quindi, se voglio cercare, per esempio, Matthews Hall, abbiamo un piccolo menu a discesa. E penso che sta usando Bootstrap, la biblioteca abbiamo discusso in precedenza per questo. E se si fa clic su Matthews Hall, subito salta la mappa per una certa posizione, e si vede un quadro in questo piccolo pop-up. Ma anche questo piccolo pop-up, che non ha attuato. Se ho scorrere verso il basso il nostro ottenere iniziato pagina e cercare finestre informative, vedrai che alcuni dei funzionalità voi stessi può aggiungere, anche se con un po 'maggiore complessità, è qualcosa che si chiama una finestra di informazioni. E se clicco un esempio qui, e questo è ciò che è divertente, si possono fare cose come questa, Cliccando su un marcatore e poi voilà, Informazioni si apre. Quindi non abbiamo ancora introdotto caratteristiche abbastanza di JavaScript a dipingere un quadro di esattamente come si potrebbe collegare tutte queste cose insieme, ma abbiamo tipo di scalfito la superficie. In realtà, quello che ho appena fatto quando Ho cliccato su quel marcatore, è stato dell'attivazione di un evento, un cosiddetta su evento click. E in realtà abbiamo visto un evento prima di oggi, la cosiddetta presentare evento, quando ci impedivano l'utente dalla ricerca per i gatti. Per questo abbiamo scelto di genere e preferito stare tra tutte queste varie caratteristiche, per dare un senso, si spera, di ciò che si può effettivamente fare con un po 'di più comfort in programmazione, e risorse completamente gratuito. Qualsiasi domanda? No? Questa è la tua occasione finale, almeno oggi, di Venerdì, per ottenere qualcosa dal petto in modo che si cammina fuori di qui sentirsi sicuri e confortevoli. Sì. PUBBLICO: Perché non fare si aggiunge una cosa? DAVID MALAN: Oh mio Dio. Ho bisogno di riposare in questo fine settimana, penso. Altre domande? PUBBLICO: [INAUDIBLE] DAVID MALAN: È can-- in Internet Explorer, riposa in pace, hai utilizzato per essere in grado di mettere VB lo script, script di base virtuale, ma che in realtà mai preso piede. Quindi la risposta breve è solo JavaScript. Altre domande? Va bene, bene, mi permetta di fare questo. Mi permetta di afferrare i nostri colleghi al di fuori. Hanno qualche valutazione forme che vogliono tutti per trascorrere qualche minuto la compilazione. Vogliono raccogliere quella forma e di qualsiasi rinunce che si possa avere al di fuori. Potranno, inoltre, certificati. Sto indovinando non c'è ancora qualche snack al di fuori. Lasciami passare questi fuori, e se si Per qualsiasi domanda nel frattempo, Io vado in giro più individuale e possiamo iniziare. Sì, naturalmente. PUBBLICO: [INAUDIBLE] DAVID MALAN: Ecco di solito vero in questi giorni. Certamente con il web software, che vi state inclinando su altri sei o esteticamente con le cose come Bootstrap, in modo da non necessario implementare il livello basso dettagli del menu e bottoni e tutto il resto. Si sta appoggiato a qualcuno come Google in modo da non c'è bisogno di costruire un Uber affari e un business mappatura, e qualsiasi numero di simile applicazioni. In realtà, gli accessi sono molto popolari, anche. Se hai utilizzato o Spotify qualsiasi numero di siti web, si accede a un certo siti web utilizzando Facebook. Quindi, ciò che è bello, ci sono API per gli account di accesso al giorno d'oggi, in modo che non si dispone di avere la propria tabella utenti e tutto il proprio database necessariamente nella stessa misura. È possibile lasciare che Facebook faccia tutto di tale complessità per voi. Quindi è un momento emozionante, onestamente, in programmazione, perché ci sono così tanti di terze parti servizi che è possibile costruire in cima. E ancora, il prezzo da pagare è sia finanziaria o downtime. Se Google va giù, così fa Uber, senza dubbio, ma forse questo è un ragionevole compromesso. E ancora una volta, che è stato uno dei temi, si spera, da un paio di giorni, è questi compromessi. E raramente c'è in corso essere una risposta giusta. E 'davvero il meglio di due o più risposte. Passare questi intorno. E questi conti Cloud9 continueranno al lavoro, in teoria, in perpetuo. Si potrebbe trovare se si aspetta un paio di giorni o una settimana o più per accedere di nuovo in loro, potrebbe prendere come uno o cinque minuti per aprire il backup, ma questo è solo perché hanno messo a dormire per risparmiare sulle risorse.