[Powered by Google Translate] [Settimana 9, continua] [David J. Malan - Harvard University] [Questo è CS50. - CS50.TV] 

Questo è CS50. Questa è la fine della settimana 9. Grazie mille. Infine. Settimana 9. Ho capito. Oggi continuiamo la nostra conversazione sulla programmazione web con un occhio verso il progetto definitivo, non perché si deve fare qualcosa di web-based per i progetti definitivi, ma perché sia ​​per progetti definitivi o dopo CS50 questo è certamente la direzione in cui sta andando il software moderno. E tuttavia non è in realtà una cosa facile. In effetti, una delle cose più difficili da fare è l'aspetto del design. 

Per esempio, in base alla progettazione intendiamo ottenere effettivamente l'interfaccia utente o l'esperienza diritto utente. Oserei dire - e sappiamo da un insieme problema recente quando alcuni di voi in onda le lamentele di qualche pezzo di software o hardware che si fa infuriare, sia nel campus o off - ci sono un sacco di siti là fuori, ci sono un sacco di hardware là fuori, quel tipo di schifo. Ma la realtà è che per fare le cose che sono facili da usare ma sono comunque potenti è una sfida molto difficile. Quindi, per oggi ho chiesto a Giuseppe e Tommy di unirsi a me qui in modo da poter avere una conversazione, sia sul design e che tipo di processi di pensiero dovrebbe iniziare a passare attraverso la testa quando si progetta i progetti finali, i vostri sforzi futuri. E poi, con l'aiuto di Tommy vedremo alcuni dei dettagli di implementazione. Come si può avere una visione su carta o nella vostra mente che è possibile eseguire codice utilizzando alcune delle tecnologie e delle tecniche che abbiamo appena cominciato a parlare, vale a dire Javascript e qualcosa di ancora più recente, vale a dire AJAX, JavaScript asincrono. Che ti permette di creare tutte le più dinamica di una interfaccia utente prendendo i dati sempre più progressivamente da un server. Così vedremo alcuni di questi frammenti, come bene oggi. Per inciso, se siete interessati a concentrare in informatica o minoring in informatica, sappiate che questo Venerdì a mezzogiorno in Maxwell Dworkin 221 ci sarà un evento di pizze dove si può imparare un po 'di più sulla scienza del computer. Sulla strada fuori dalla porta oggi sarete in grado di far salire una guida non ufficiale a CS ad Harvard. Ci ha messo su i bidoni della spazzatura fuori all'altezza della vita in modo che se vuoi prendere questo e imparare un po 'di più su CS, che sarà lì per voi come è stato in settimana 0. Inoltre, se si desidera unirsi a noi per il pranzo CS50 questo Venerdì alle 01:15, testa a cs50.net/lunch. Senza ulteriori indugi, vi do l'insegnamento collega Joseph Ong. Ciao. [Applausi] Grazie. La prima volta che ho imparato a conoscere progetto era in una classe che qui chiamano CS179. 

Il professore, al momento ci ha raccontato la storia di un altro professore che era andato a un hotel e utilizzato i rubinetti. Qualcuno può dirmi quali sono le due manopole a sinistra ea destra fare? [Studente] calda e fredda. >> Calda e fredda. Buona. Quello che normalmente si aspetta, giusto? Il professore dopo aver usato il rubinetto vuole fare una doccia, e si procede per utilizzare questo. Pensa che la sinistra e la parte destra sono per caldo e freddo, giusto? Ma qualcuno può dirmi cosa effettivamente fare questi? Tutte le mani? [Risposta degli studenti incomprensibile] >> Un suggerimento è? [Risposta incomprensibile studente] Temperatura >>? Così uno di loro controlla la temperatura e gli altri controlli? >> [Studente] Pressione dell'acqua. Pressione dell'acqua. Buona. Il professore entra in questo e, pensando che stanno controllando calda e fredda, gira quello giusto, che secondo lui è a caldo, tutta la strada fino perché vuole fare una doccia calda. Ebbene, questi in realtà non corrispondono, quindi ottiene questa esperienza non molto divertente di essere in una doccia fredda, e tutti sappiamo come ci si sente. Questo è un esempio di un difetto di progettazione. Quello che voglio dire con questo è la sua aspettativa dal rubinetto non corrisponde a quanto è uscito dalla doccia, che è una specie di peccato per lui. Quindi questo è un esempio di un difetto di progettazione che accade nella vita reale. Ma vediamo tutti i tipi di quelle anche altri. Non siamo probabilmente i fan del sistema MBTA. Si tratta di un sistema di metropolitana in realtà a Londra, che dice: "Questo pulsante non è in uso." Perché è anche lì? Perché ci importa? Quando ero un ragazzino, essendo quella esperti di tecnologia in casa, ogni volta che il computer potrebbe andare in crash, mia madre sarebbe venuto a me, avermi mostrato questa schermata e mi chiede cosa è successo. 

Anche io non so che cosa questo significa. [Risate] Cosa? [Risate] A volte ci sentiamo come gli sviluppatori di software sono solo traina noi. Dato che gli utenti siamo come, "Che cosa sta succedendo? Qualcuno ci dicono." Il tutto si riduce a una questione di design. Design, come si può vedere, non è puramente di estetica, non si tratta di come stanno le cose. Vediamo qui che questo piccolo pop-up qui sembra in realtà piuttosto bella. Ha un ombra sullo sfondo, ha raggi di frontiera in corso. È un po 'carina. Non è davvero ben progettato, perché non è molto facile da usare. Quel piccolo pop-up che si apre in realtà non mi danno alcuna informazione in merito a quello che sta succedendo, non mi dice nulla come l'utente su come recuperare da questo errore. Vogliamo pensare a cose che il design non è. Primo, non è l'estetica. E ', inoltre, non ripieno la vostra applicazione con tonnellate di funzioni inutili. Se sei un ristorante tailandese, probabilmente non si vuole essere un dentista, allo stesso tempo. E con Domande di Facebook, non che molta gente ha usato e non era davvero al centro di quello che stavano costruendo. E così è bello non pensare tanto la quantità delle cose che avete deciso di mettere alla vostra applicazione, ma la qualità e come si sta facendo, che migliore esperienza utente in realtà da migliorare su quello che già avete. 

In poche parole, il design ci dice ciò che dobbiamo costruire. Per esempio, se stiamo costruendo qualcosa che dobbiamo cercare le cose, come Google, per esempio, dobbiamo fare le cose in maniera che richiede all'utente di prendere un sacco di click per arrivare a quello che vogliono, o dobbiamo fare in modo, ad esempio, con Google Instant o completamento automatico che ci permette di raggiungere i nostri risultati più velocemente? Ingegneria comporta, come Tommy vi mostrerà, in realtà costruendo. Ci sono molti tipi di design. Ad esempio, se si sta costruendo qualcosa di implementare qualcosa di in un paese del Terzo Mondo dove non c'è elettricità molto o molto che la tecnologia, si deve progettare quello che si sta costruendo in un modo che consente facilmente l'accesso alle persone lì. Ma quali tipi di decisioni di progettazione altri potrebbero esserci o potrebbe essere coinvolto in qualcosa di simile? Gia '. Vedo una mano. [Risposta incomprensibile studente] destra >>. Esattamente. L'accessibilità è una cosa. Un sacco di gente non pensa, "E i miei utenti?" come gli estremi di uno spettro. Ho utenti che potrebbero avere disabilità che non sto pensando e sto solo pensando a progettare per l'utente generico. Internet è accessibile a tutti al giorno d'oggi, e dovrei essere la progettazione di queste persone pure. Che tipo di decisioni di progettazione altri potrebbero fare? Sì. >> [Studente] Costo. Costo. Molto buono. Un'altra cosa che possiamo basare le nostre decisioni relative alla progettazione sono i costi. Se siamo un business, si vuole costruire qualcosa che non ci vuole molto di costo per la produzione di ma può vendere a un costo particolarmente elevato o ci può ottenere qualche profitto. 

Questi sono tutti i diversi tipi di design, ma quando stiamo costruendo qualcosa su Internet o quando stiamo costruendo qualcosa che probabilmente non costa molto per costruire adesso, come le applicazioni Internet - non si devono gettare capitale molto in esso al fine di fare qualcosa che funziona davvero - ciò che noi siamo più preoccupati è l'esperienza dell'utente. Noi chiamiamo questo centered design utente. Essenzialmente quello User Centered Design presenta sia voi stessi mettendo nei panni dei vostri utenti. Se qualcuno si iscrive per quello che sto costruendo, hanno, ovviamente, mi vengono in particolare applicazione con un obiettivo in mente, con un compito che desidera completare. E il tuo lavoro non è solo per aiutarli a completare tale compito ma per aiutarli a completare l'attività in modo che sia efficiente, intuitivo, e, come ha detto una persona laggiù, accessibile. Che cosa significa efficienza? Efficienza significa che la velocità con il mio utente completare l'operazione dato la mia interfaccia. Ci vuole un sacco di scatti per loro per andare da un posto all'altro? E 'noioso? Hanno un sacco di eseguire operazioni ripetitive? Vogliamo rendere questo processo il più efficiente possibile in modo che non hanno a che fare questo genere di cose. Come per intuitività, che è, per esempio, se un utente cerca mia interfaccia, è più facile per loro di ottenere da un posto all'altro? E 'facile per loro capire che cosa devono fare clic nella mia interfaccia in modo per loro di raggiungere l'obiettivo o l'attività che si vuole ottenere? 

E, infine, come una persona ha detto là, l'accessibilità è molto importante. [Maschio altoparlante] Si tratta di accessibilità per cose come la visione, piace come faccio realmente progettare qualcosa per qualcuno che è cieco? Oh. Per le persone che non possono vedere a tutti, abbiamo qualcosa che si chiama screen reader. Che cosa si dovrebbe fare è che si dovrebbe costruire il tuo sito web in modo che, ad esempio, particolari tecnologie che noi chiamiamo - Ci sono un sacco di cose adesso. Penso che ci siano lettori di schermo JAWS chiamati. Molte di queste cose si basano su ciò che noi chiamiamo regole di area per leggere all'utente ciò che è presente sulla pagina. Per coloro che non possono vedere, è necessario fare in modo che questi screen reader può effettivamente prendere il contenuto della pagina e può effettivamente mostrare agli utenti, se non riesci a vedere, almeno si può ancora capire il contenuto della pagina. Gia '. Va bene. Basta parlare di buon design. Parliamo di cattivo design. Queste sono cose che non si deve fare. Qualcuno può dirmi le loro esperienze con Craigslist e quello che pensano non è così grande su questo progetto? Sì. >> [Studente] Penso che ci sia troppe parole in una zona. Troppe parole, giusto? Completamente schiacciante. Venite a questa pagina e sarai accolto con un sacco di cose qui che potrebbe anche non importa a voi. Ad esempio, si vive in uno stato che non inizia con questa lettera. Diciamo che si vive in Texas, o qualcosa del genere. 

Bisogna scorrere fino in fondo alla pagina per ottenere la posizione ci si trova. Sono di Boston, per cui vorrei guardare in Massachusetts. Dove si trova Massachusetts? Oh, è proprio qui. Oh, è Boston. Va bene. Diamo un'occhiata a Boston. [Risate] Piuttosto travolgente, giusto? Awkward cose laggiù. [Risate] Diciamo che sto cercando un posto dove vivere. Quante persone hanno effettivamente usato Craigslist? Tonnellate di voi. Ci sono modi piuttosto male da guardare, ma diamo un'occhiata a questo. Qual è la differenza tra img e pic? Qualcuno può dirmi? Vi è in realtà alcuna differenza. Essi significano esattamente la stessa cosa, ma hanno etichette diverse per loro per qualche ragione. Se clicco su con immagine, non succede nulla sulla pagina. Mi hanno fatto fare clic su ricerca per qualcosa accada. Quale potrebbe essere una decisione di progettazione migliore che si poteva fare lì? Se sto cliccando su quel filtro, probabilmente desidera filtrare che l'azione particolare o quella categoria particolare. Così, invece di dover premere ricerca, ho potuto solo fare automaticamente il filtraggio sorta di stile di Google in cui lo fanno immediatamente. [Malan] Ma non si forma come li abbiamo visti finora devono essere fisicamente presentate premendo Invio almeno o facendo clic su un pulsante? Come li avete visti fino ad ora, è effettivamente necessario fare clic su Invia per fare quelle cose. 

Ma come Tommy vi mostrerà in un secondo, in realtà vi sono modi per in modo tale che quando si fa clic su quella cosa si può inviare automaticamente ciò che noi chiamiamo una richiesta AJAX e ottenere i dati avanti e filtrare i risultati istantaneamente. Ci sono tonnellate di cose che sono di sbagliato in questa interfaccia. [Malan] Puoi cercare Cambridge? C'è qualcosa di leggermente anomalo qui dove ti interessa Cambridge ma che stai ricevendo Westford, Spring Hill, West Newton e simili. Probabilmente non è l'ideale. Probabilmente non >> l'ideale. Come potrei essere in grado di rendere l'esperienza dell'utente migliore su questa pagina particolare? Sì. >> [Studente] Istruzioni. Va bene. Istruzioni in che tipo di senso? [Studente] Ad esempio, una cosa per la prima volta gli utenti che non sanno nemmeno che cosa Craigslist è o non si sa quello che si dovrebbe fare. Giusto. Quindi spiegare cosa Craigslist è in questa pagina è importante. In realtà possiamo dire agli utenti che cosa questa pagina è in realtà per. Se sto solo visitando questo, vedo un sacco di posizioni. Io non so nemmeno che cosa significano. Ma ancora più importante, solo guardando questa interfaccia, ricordo che ho dovuto scorrere verso il basso un sacco di cose per trovare una particolare comunità che io in realtà a cuore su questo. Che cosa è un modo più veloce avrei potuto farlo? Sì. [Studente] Dividere in su in est, regioni occidentali. Va bene >>. Potrei dividere in più categorie che potrebbero aiutarmi a determinare più velocemente come arrivare in quella posizione particolare. [Studente] Mettere un elenco a discesa. >> Destra. Va bene. Potrei usare un menu a discesa, perché abbiamo una serie fissa di cose e abbiamo potuto mostrare loro in un menu a discesa. In questo modo non occupa tanto spazio sullo schermo. Ma anche di meglio, che cosa possiamo fare? Sì. >> [Risposta degli studenti incomprensibile] >> Si può dire che ancora una volta? >> [Studente] casella di ricerca. Si ', una casella di ricerca. E 'fantastico. Quello che possiamo realmente fare è se guardiamo indietro alla, casella di ricerca diapositive. Autocomplete. Modo molto semplice per la ricerca in risultati che si sa essere in un set. Se inizio a digitare BO, mi mostra tutti i risultati che hanno dentro di loro BO. In questo modo posso facilmente trovare quello particolare che voglio andare a invece di dover scorrere questa lista davvero grande. 

Questi sono tutti i tipi di davvero low-hanging fruit che qualcuno che sta attuando Craigslist può effettivamente fare per rendere l'esperienza sul sito web molto meglio per la loro particolare utente. Va bene. Basta parlare di siti web cattivi. Parliamo di Facebook. Quando Facebook è venuto fuori, e in particolare le foto di Facebook, c'erano un sacco di altri servizi al momento in grado di fare esattamente le stesse cose. Potrebbero organizzare le foto in album. Che cosa si potrebbe fare è che si poteva organizzare in gruppi pure. Si potrebbe organizzare in base alla data. Si potrebbe fare tutte queste cose particolari. Ma qualcuno sa come sono fatti esplodere foto di Facebook al momento è stato rilasciato? Sì. >> [Studenti] Tag. Tags >>. Esattamente. Abbiamo Milo qui, che è la nostra mascotte cane con quella bandana CS50. Si può vedere che abbiamo questa caratteristica di tagging nel mezzo. E ciò che ha reso le foto di Facebook in modo interessante dal punto di vista dell'usabilità è che in realtà permesso alla gente attraverso questo di coinvolgere i loro amici nelle loro foto. Per Facebook, dal momento che il loro sito web è particolarmente sociale, Si tratta di costruire questo tipo di atmosfera sociale. Che ha migliorato l'esperienza di foto molto di più perché potrebbero effettivamente iniziare dicendo: "Queste sono le connessioni tra le persone, e queste sono le foto di gente che realmente interessano. " Parte di esso è anche il narcisismo di ordinamento. Alla gente piace essere etichettato in foto e cose del genere. Anche se questo non è necessariamente una buona caratteristica umana, allo stesso tempo si basa su decisioni di buon design perché i cittadini si interessano cose come questa. Ecco, questo è foto di Facebook. 

Ma parliamo più in generale di Facebook. Sono sicuro che un sacco di persone qui hanno opinioni su Facebook, entrambe le decisioni di buon design e le decisioni cattivo design. Quindi cerchiamo di sfogare o essere felici. Andiamo. Io so tutto di voi usano Facebook. Qualcuno deve avere qualcosa di negativo da dire o qualcosa di buono da dire in proposito. Sì. [Studente] Nel flusso di notizie ci sono un sacco di cose che in realtà non si preoccupano. Il flusso di notizie non mostrano un sacco di cose che potrebbero non interessano. Hai amici su Facebook che non si sono incontrati per 2 o 3 anni e vedere i loro risultati di notizie spuntando nel tuo feed di notizie e non si interessa davvero su di esso. Facebook ha effettivamente fatto uno sforzo per migliorarla, e hanno effettivamente cercato di spingere i risultati rilevanti per la parte superiore del newsfeed come di ritardo in modo che effettivamente vedere le cose da amici che sono rilevanti per voi oi vostri amici. Tutto il resto? Sì. [Risposta degli studenti incomprensibile] >> Si può dire che ancora una volta? [Studente] Gli annunci sono relativamente discreto. >> In che senso? [Risposta incomprensibile studente] Non hanno luce sullo schermo, come bandiere. Va bene. Questo è un bene. Se vi ricordate di Internet dagli anni '90 - >> [Malan] ero lì. Era lì >>. [Risate] Forse vi ricordate lampeggianti sfondi GIF, luccicanti cose, GeoCities stile di ordinamento delle cose. Questo non è proprio un esempio di un buon design perché è davvero distrarre dal contenuto. Il sito d'arte di Yale usato per avere GIF animate come il loro background e non si poteva leggere qualcosa sulla pagina, ma credo che qualcuno effettivamente parlato con loro e adesso è un po 'diverso. [Malan] E 'molto meglio ora. >> E 'molto meglio, come si può vedere. >> [Malan] Oh yeah. Semplicemente fantastico, solo - Si '. Va bene. 

Parte di essa è anche fare la tua pagina possibilmente molto minimalista e molto comprensibile quindi le cose sul flusso pagina in un modo che è molto logico e non si ottiene in modo di ogni altro. Che tipo di altre cose sono buone su Facebook o male di Facebook? Diciamo solo avere una conversazione disegno qui. Oh. Dove? Gia '. [Studente] Il sistema di nuova Timeline permette di cercare il profilo della persona sul loro passato. Ooh, Timeline. Timeline è una grande cosa perché ti permette di gambo tuoi amici indietro quando erano al liceo. Timeline è un bene perché ti permette di filtrare attraverso i contenuti molto più veloce, vi permette di trovare le cose che avrebbe altrimenti preso un sacco di tempo per trovare basta scorrere su e giù, su, su, su, su, su, come tornare indietro nel tempo. Ma poi c'è anche una sorta di rovescio della medaglia che in termini di user experience. Cosa potrebbe essere? Grande parola che inizia con P-R. >> [Studente] Privacy. Privacy >>, giusto? La privacy è un enorme problema di esperienza dell'utente. Questa è una delle cose che odio di più di Facebook ora. [Risate] [Malan] Come faccio adesso. Davide non avevo capito che questo è realmente accaduto fino a ieri. Così ora si sa che ogni volta che lo chiacchierare so che mi sta ignorando. [Malan] La parte imbarazzante è stato mi è stato effettivamente lui ignorando, e io non sapevo che lui sapeva che lo stava ignorando. [Risate] La privacy è un problema enorme. Qualcuno può dirmi che cosa questo potrebbe essere un male di Facebook sulla privacy oltre al fatto che fanno cose come questa? Che cosa è particolarmente difficile da fare per quanto riguarda la privacy su Facebook? Questo tipo di è una questione di primo piano. Sì. >> [Studente] Nascondi le tue foto da certe persone. Giusto. Esattamente, per nascondere le tue foto da certe persone. Hanno questo piccolo, piccolo pulsante in alto a destra che consente di attivare o disattivare la privacy di una foto. Le loro opzioni di privacy sono molto vari tra i diversi tipi di menu. 

Hanno ottenuto molto meglio a questo proposito di recente, ma è usato per essere il caso che ogni volta che si voleva evitare che i tuoi amici di vedere foto, si dovrebbe passare attraverso un complicatissimo 5 fasi di essere come, lasciatemi fare clic su questo link, ora fammi fare clic di nuovo, vorrei fare nuovamente clic, vorrei specificare che la gente non può vedere le mie foto. Questo non è particolarmente buona da parte di Facebook perché tanto di esperienza degli utenti è in realtà dando loro la libertà di controllare ciò che la gente può vedere. Noi chiamiamo questo controllo utente e la libertà. Se non consentendo agli utenti di farlo in un modo che sia efficace e intuitiva, allora la vostra esperienza utente non è poi così grande a tutti.  Sarebbe voi ragazzi piace dire nulla su Facebook? Come faccio a disattivare questa opzione? [Ong] Non è possibile disattivare questa funzionalità, e questo è un difetto enorme usabilità da parte di Facebook. Questa caratteristica - in realtà ho guardato dentro ieri - è uno che non si può fare o è sepolto da qualche parte molto, molto profondo nei recessi di Facebook perché non riesco a capire come disattivare questa funzionalità a tutti. [Malan] Ma a volte queste decisioni non sono evidenti perché voi ragazzi ci hanno dato un sacco di feedback utili sulle varie applicazioni CS50 e siti web che il corso utilizza. Non abbiamo implementato tutte queste richieste e suggerimenti. 

Parte di questo è per avere tante richieste che è una funzione del tempo, ma a volte dobbiamo solo prendere una decisione consapevole, come, "Grazie per il suggerimento, ma non siamo d'accordo." Così come si fa effettivamente decidere cosa si dovrebbe fare se gli utenti che si dovrebbe fare qualcosa anche se non necessariamente? E 'un equilibrio sottile tra realtà l'ascolto di ciò che gli utenti dicono e in realtà avere una sorta di riga in cui si dice, "Non abbiamo intenzione di fare ciò che questi dicono gli utenti." E in particolare, credo che ci fosse una citazione di Henry Ford che riassume questo abbastanza bene. "Se avessi chiesto alla gente quello che volevano, avrebbero detto che volevano cavalli più veloci." Qualcuno può ordinare di prendere in giro a parte ciò che quella citazione significa veramente? Non è solo che gli utenti sanno quello che vogliono, ma è più che - [Studente] Non sanno ciò che è possibile. In parte non sanno che cosa è possibile. Tease che, a parte un po 'di più. Cosa vuoi dire con questo? [Risposta degli studenti incomprensibile] Questo è un bene. Quello che penso che stiamo cercando di dire è che le persone sanno quello che vogliono. Vogliono cavalli più veloci. Quello che vuole veramente è la capacità di muoversi più velocemente, ma non so davvero il mezzo con cui raggiungere questo obiettivo. Quando si arriva agli utenti e gli utenti che vi dica qualcosa e ti dicono: "Vogliamo che queste caratteristiche e queste caratteristiche e queste caratteristiche," non si vuole pensare necessariamente su, "Lasciami andare avanti "E mettere in atto quello che dice esplicitamente," ma ciò che si vuole pensare è: "Che tipo di idee si può ottenere da questo?" Che cosa in realtà vogliono? 

E da lì quello che si può fare è progettare qualcosa che soddisfa tali richieste ma non necessariamente in modo che l'utente si aspetta che venga soddisfatta. Così, per qualcosa come progetti finali, in termini reali, che cosa è un euristica utile quando si tratta di fare qualcosa di meglio, soprattutto se il progettista ha questa arroganza su di lui in base al quale si ordina di sapere cosa è meglio, si potrebbe prendere l'input da utenti, ma come si fa effettivamente fare per ottenere che il feedback? Nei progetti finali, molto concretamente, ciò che produce risultati ottimali qui? Che cosa produce risultati ottimali - e voglio andare oltre questo in un secondo - è il processo di sviluppo e poi prova e poi l'iterazione. Cosa voglio dire con il test è di solito quando si progetta qualcosa pensi che sia abbastanza buono, come, "Sono un grande designer. Ognuno sta andando ad amare questo." E poi lo metti là fuori e la gente non piace per qualche motivo. Quello che devi fare è bisogna prendere le parti di cose che la gente fa come e rinnovare le cose che la gente non piace. Sembra un processo molto evidente, ma questo processo di continua iterazione al di sopra di quello che hai già costruito è un processo che ti aiuta non solo affinare le vostre abilità di progettazione proprie, ma aiuta anche a perfezionare la progettazione in modo che la gente realmente apprezziamo il vostro prodotto ancora più di quanto non fossero prima. 

Vado oltre altri esempi concreti di quello che si potrebbe effettivamente fare. Come una sorta di ultimo esempio di un prodotto, diamo un'occhiata a KAYAK. KAYAK quando è uscito era molto, molto popolare. Chiunque può indovinare perché? Quali sono i tipi di cose che ti piacciono di questo se è stato usato o quali sono i tipi di cose che non ti piacciono? Sì. >> [Risposta degli studenti incomprensibile] >> Ok. Questa è una parte di esso è lasciare che l'utente dispone di una query che è più ampia rispetto ad una molto restrittiva del tipo: "Devi scegliere la tua data di inizio "E si deve scegliere la data di fine." Infatti, permette di essere flessibili su di esso e ti dà tutti i voli in tale intervallo. Tutto il resto? [Studente] Essi comprendono le tasse nel prezzo. Fanno includono le spese nel prezzo. Le tasse e le cose effettivamente andare dritto in quel prezzo in alto a sinistra in modo non sei indotto a pensare che si sta effettivamente pagando per un volo $ 240 quando è veramente $ 330. Tutto il resto? Sì. [Risposta degli studenti incomprensibile] Non so se effettivamente ti permette di fare questo. Potrei sbagliarmi. Questo potrebbe essere una cosa interessante se si vuole mettere più peso su particolari filtri così che spingono i risultati relativi al filtro all'inizio. Ma qualcuno può dirmi cosa c'è di così speciale questa sinistra? Come ha tradizionalmente cercare un volo su un servizio di Internet prima di questa? 

Sì. >> [Risposta degli studenti incomprensibile] >> Si può dire che - [Studente] Ciascuna compagnia aerea. Sì >>. Ciascuna compagnia aerea ha un proprio sito. Questo consolida le cose. E? [Studente] Tu sai esattamente a che ora te ne vai. Tu sai esattamente a che ora te ne vai, ma relativi ai filtri in particolare. Vorrei tirare su KAYAK. Oh Dio, pop-up. L'esperienza degli utenti Bad. Cosa succede quando si sposta il cursore? [Gli studenti] Aggiornamenti automatici. >> [Ong] Aggiornamenti automatici. Questo è qualcosa che è molto importante. Prima di questo, ogni volta che si voleva cercare un volo, si doveva mettere in posizione di ingresso, la posizione di uscita, premere Cerca, Sarebbe processo che e mostrare i risultati. Se si voleva cambiare la query, si dovrà premere di nuovo due volte, entrare in una nuova query da zero, e poi farlo più e più volte. La cosa bella di una cosa del genere è che utilizza una cosa molto [incomprensibile] in mezzo. Ogni volta che fai una cosa del genere, spara fuori una richiesta e ti restituisce tutti i risultati immediatamente. Questo tipo di feedback immediato è una cosa che ha reso molto popolare KAYAK perché è molto facile per me cambiare solo la mia domanda e di capire le cose che sono intorno a un determinato intervallo senza dover andare avanti e indietro, avanti e indietro, avanti e indietro. Quindi questi sono tutti i tipi di cose che si desidera a cui pensare quando si progetta il tuo sito web. Come faccio a rendere molto efficiente per i miei utenti di passare attraverso tutto ciò su cui stanno lavorando e per raggiungere il loro obiettivo finale il più velocemente possibile? [Malan] E al punto di Giuseppe prima degli utenti non necessariamente sapendo quello che vogliono, in base a quello che voi ora sapere su HTML e si dispone di caselle di controllo, pulsanti di opzione, selezionare i menu, i campi di input e simili, come è possibile implementare l'idea di scegliere un orario di inizio per un volo? 

Quale di questi meccanismi UI vari useresti? Se si sa la quantità di codice HTML che è stato insegnato prima e si sa gli ingressi sono pulsanti di opzione, caselle di controllo, elenchi a discesa, e la scatola di ingresso, quale sarebbe la tua scelta naturale sono state date per la raccolta? [Studente] di ingresso. >> Input. O forse anche un menù a tendina con tutte le date, vero? Quindi, con i meccanismi di interfaccia utente più complessi come questo sul lato sinistro che è possibile implementare, si può rendere questo processo molto più intuitivo con un cursore perché il tempo è continuo, e la gente di solito non pensare in termini di pezzi discreti. Bene. Ultima cosa. Dieci usabilità euristica. Tutte le cose di cui abbiamo parlato, probabilmente rientrano in una di queste categorie. Se andate a questo link, che i siti saranno pubblicate on-line, ci troveremo a essere in grado di, come si progetta il sito, tenere a mente queste euristiche e queste regole pratiche. Per i vostri progetti, quello che io suggerisco di fare al fine di definire meglio la vostra applicazione è quello di fare prototipazione carta. Quando stai pensando l'applicazione, molto rapidamente disegnare ciò che si desidera farlo sembrare come e assicurarsi che tutte le caselle sono disposti in un modo molto intuitivo per l'utente di utilizzare e di mostrare anche questi prototipi di carta ai tuoi amici e iniziare a focus group. Basta avere 2 o 3 persone e chiedere loro di toccare solo su questi prototipi di carta, e mostrare loro nuovi schermi per vedere se effettivamente capire cosa sta succedendo. 

Che cosa si vuole fare è dare loro un compito, motivare tale compito, e solo dare loro l'applicazione e permettere loro di utilizzare. Non dare loro istruzioni, oltre a quelle. Si vuole far effettivamente interagire con la vostra applicazione in un modo che permette di vedere il modo in cui lo uso se non erano in piedi accanto a loro. E questo è molto importante. Che vi darà un sacco di spunti da persone che si sono in giro cose particolari in un modo che non li ho intenzione di? Stanno utilizzando meccanismi particolari dell'interfaccia utente sullo schermo in un modo che è di tipo hacky? Non volevo per loro di farlo in quel modo. E una volta che hai finito con quello, che cosa vuoi fare? Le rocce di progettazione, giusto? Che cosa si vuole fare è che si desidera sviluppare e poi fare questo processo più volte. Quindi mostrare agli amici una volta che hai sviluppato, testarlo sviluppare, testare, sviluppare, testare, scorrere, avanti e avanti e avanti. Design è un processo iterativo molto in questo senso. In realtà si deve costruire qualcosa e poi realizzare le cose su di esso che non si rese conto prima e tornare indietro e migliorare da questo. Ora, per quanto riguarda la parte di sviluppo, questo è quello che Tommy sta per mostrare dopo la pausa e come si potrebbe essere in grado di implementare qualcosa di simile funzione di completamento automatico in un modo che è abbastanza semplice. [Malan] Come Tommy imposta qui, una domanda allora. Molti dei primi siti web - e quando Giuseppe disse al sito web in stile anni 1990, era implementazioni in cui se si voleva selezionare l'ora di inizio e di fine, francamente, nel giorno e anche su alcuni siti web di oggi, il modo in cui farlo è di scegliere un'ora da un menu a discesa, si sceglie minuti da un menu a discesa, magari scegliere AM, PM, e poi hai fatto 3 volte di più. E così con 6 scatti e forse un po 'di scorrimento l'utente può effettivamente dare una sorta di data e / o intervallo di tempo in questo senso. 

Quindi, sicuramente non ottimale, eppure finora abbiamo visto nessuna capacità espressive in una qualsiasi delle lingue che abbiamo visto fare qualcosa di più sexy come il dispositivo di scorrimento del tempo di inizio e di fine. Ma se si pensa di nuovo a settimana 0 quando abbiamo parlato di Scratch, anche lì non c'erano solo i widget che hanno fatto certe cose. Davvero appena avuto questi fondamentali come i cicli e le condizioni e simili. Quindi tipo di solo pensando molto astrattamente ora, indipendentemente dalle particolari di HTML, ciò che sta realmente accadendo con qualcosa di simile ora di inizio e fine del cursore? Quando muovo il mouse e clicco su quel simbolo carota piccola a sinistra e iniziare a trascinare, di programmazione, che cosa si vuole essere in grado di attuare per realizzare questo obiettivo? Quali domande, che le espressioni booleane vuoi essere in grado di fare? Che cosa sta realmente accadendo? Sammy? [Studente] Dov'e 'la posizione del cursore? Good >>. Dove è la posizione del cursore? Questo era qualcosa che abbiamo bisogno di esprimere indietro in Scratch, se si è in base alla località o anche colore o simili. Vi ricorderete mai così brevemente il Lunedi c'erano tutte queste cose chiamati eventi nel mondo del Web, e così ci sono cose come onclick e onkeypress e onkeyup e onmouseover e onmouseout. Così si rendono conto che anche queste cose che abbiamo preso per scontato sul Web con siti come Facebook e Gmail, anche se non hanno idea di come si potrebbe eventualmente attuare tale perché non c'è niente di simile anche nella lezione o Problem Set 7, si rende conto che con questi fondamentali esattamente lo stesso, con HTTP e parametri e GET e POST, con gli ingressi di base HTML che abbiamo guardato finora e in un attimo con i meccanismi di programmazione che Tommy sta per introdurre si può iniziare a esprimere se stessi, proprio come avete fatto in settimana 0 da molto intuitivo drag-and-drop. 

Quindi, con quello detto, Tommy MacWilliam e alcuni pezzi di un puzzle per noi nuove per il web. Bene. Il mio nome è Tommy e ho intenzione di parlare di JavaScript. Solo un disclaimer: io sono del parere che JavaScript è il miglior linguaggio di programmazione in tutto il mondo intero. Ci sono un sacco di persone che sono in disaccordo con me, ma è semplicemente incredibile. Una volta che si torna in C, se si deve scrivere C per un'altra classe o altri linguaggi, E 'davvero frustrante in tutti i dettagli di basso livello si deve impantanarsi trovi Quindi, se siete mai senti triste per quanto fastidioso C è quello di scrivere, basta andare indietro, scrivere un po 'di JavaScript. E 'nirvana. Vi sentirete molto meglio sulla tua brutta giornata. Un sacco di magia di JavaScript deriva dalla sua capacità di manipolare le cose che sono già nella pagina. Quando abbiamo scritto i nostri script PHP, che sono stati eseguiti sul server, e, infine, che script PHP probabilmente l'output del codice HTML. Tale HTML è stato inviato al client, quindi che era. Se il PHP ha voluto aggiungere un pulsante a una pagina, ad esempio, non si può davvero fare. Avrebbe dovuto rendere un intero nuovo file HTML e di inviare tale al browser. Con JavaScript sappiamo che siamo in grado di aggiornare le cose mentre sono già nella pagina, e per questo siamo in grado di fornire un feedback più immediato, che sarà davvero migliorare l'esperienza degli utenti sul nostro sito. Solo un breve riepilogo di selettori JavaScript. Sappiamo che quando si scarica una pagina HTML, che sta per essere rappresentato nel DOM. 

Il DOM è ricordo proprio questo grande albero in cui sono collegati gli elementi in questa gerarchia di grandi dimensioni. Quando abbiamo lavorato con i database in pset 7, una delle prime cose che abbiamo bisogno di sapere come fare era interrogare il database. Abbiamo questo grande tavolo gli utenti, e, talvolta, vogliamo solo dire, "Voglio solo alcuni di questi utenti che corrispondono a una certa condizione." Allo stesso modo, quando abbiamo il DOM abbiamo bisogno di un modo di interrogare esso. Abbiamo bisogno di un modo di dire: "Voglio che tutti i pulsanti che assomigliano a questo "O tutte le immagini sulla pagina." E questi selettori ci permettono di farlo. Quindi, solo un breve riepilogo. Questo primo qui, questa inviare #, che cosa è che andando a selezionare? Qualcuno ricorda? [Risposta degli studenti incomprensibile] >> Sì, esattamente. Questo sta per selezionare un elemento della pagina che ha un ID di presentare. E così il tag hash dice che questo selettore è di andare a lavorare con ID. Come circa la seconda, questa. Centrato, cosa che seleziona? Gia '. >> [Studente] Classe. >> Esattamente. Questo è ora di andare a selezionare per classe. La differenza tra ID e categoria qui è generalmente l'ID deve essere unico entro lo spazio che si sta cercando più. Quindi, se state cercando su un intera pagina web, si dovrebbe davvero solo 1 elemento con tale ID certo, in questo caso di presentare. Con le classi, invece, si può avere più di 1 elemento sulla stessa pagina con la stessa classe. Questo potrebbe essere utile per dire che voglio selezionare tutto ciò che è al centro della pagina piuttosto che solo 1 cosa. 

E, infine, quest'ultimo ecco un po 'più complicato, ma che cosa è questo andando a selezionare dal DOM? [Risposta degli studenti incomprensibile] >> Che cos'è? [Studente] Tutto ciò che è un tag. >> Abbiamo 2 parti qui. La seconda parte sta per dire che voglio selezionare questi tag con un tag di input, in modo che qualsiasi elemento che è un tag input. Ma io non voglio selezionare solo tutti gli ingressi perché qualcosa di simile a un pulsante di invio potrebbe essere un input e qualcosa di simile a una casella di testo potrebbe essere un ingresso. Così, con queste parentesi quadre che sto dicendo io voglio solo selezionare gli elementi che sono di tipo testo. Da qualche parte nella mia tag HTML ho un attributo chiamato tipo, e il valore di tale attributo deve essere testo. Così come su questa prima parte qui? La prima parola di questo selettore è la forma poi ho uno spazio e quindi questa parte di ingresso. Che cosa fare, mettendo la forma di fronte ad essa? Si tratta di andare a limitare sostanzialmente la nostra query. Potrebbe essere il caso che abbiamo alcuni ingressi sulla pagina che non sono discendenti di una forma. Ciò farà è questo dire che vogliono solo i tag di input che hanno da qualche parte sopra di loro qualche elemento principale di un modulo. E in questo modo siamo in grado di fare queste query più gerarchiche quindi non ci resta che selezionare tutto ciò che corrisponde a un selettore di data. Possiamo tipo di limite di applicazione di tale richiesta a qualcosa d'altro. Quindi, ora che sappiamo come selezionare gli elementi della pagina, parliamo un po 'di AJAX. AJAX è un acronimo ancora molto alla moda che si distingue di Asynchronous JavaScript and XML. Si dà il caso che XML è solo un modo per rappresentare i dati. 

Questo tipo di popolarità persa di recente, in modo che la X in AJAX non viene utilizzato tutto il tempo. In sostanza, ciò che AJAX ci permette di fare è fare richieste HTTP dal contesto di JavaScript. Quando siamo nel nostro browser web e stiamo navigando tra le pagine e fare clic su un collegamento, ciò che il nostro browser sta per fare è effettuare una richiesta HTTP a qualsiasi collegamento si clicca. Ma non è sempre l'ideale, perché se questo è il caso, poi come Davide stava dicendo: dobbiamo sempre fare gli utenti fanno clic su un pulsante Invia o fare clic su un collegamento per far succedere qualcosa che sta andando a coinvolgere una richiesta HTTP. Così, con AJAX possiamo fare queste richieste per conto di JavaScript. Ciò significa che ogni volta che l'utente interagisce con la pagina o succede qualcosa, si può effettivamente fare una richiesta a livello di qualche altro file PHP sul nostro sito web o qualsiasi altra cosa e recuperare i dati che quel file sputa fuori. Diamo un'occhiata a un esempio di AJAX. Questa è la nostra pagina Finanza CS50 con la quale si spera alcuni di noi hanno familiarità. Se guardiamo il codice HTML di questa pagina, vediamo qui che ho aggiunto un paio di cose, uno dei quali ho dato questa forma un ID. Ho detto id = "forma-citazione". L'ho fatto solo perché sta andando a rendere questo un po 'più facile per selezionare dal DOM dal momento che può solo fare una query molto semplice. Quello che voglio fare qui è che voglio risolvere qualche problema con CS50 Finanza. Quindi, se andiamo a finance.cs50.net, ogni volta che voglio per ottenere un preventivo, devo fare clic su questo pulsante Get Quotazione, e che pulsante Get preventivo porta poi a me un'altra pagina intera. E se voglio un'altra citazione, devo premere il pulsante Indietro e poi l'ho digitare, Ho ottenere un preventivo, e mi ha colpito il pulsante Indietro. Questo in realtà non è la migliore esperienza utente. Chi sarebbe davvero utilizzare il sito se è così lento e per i prezzi delle azioni? Quindi, quello che vogliamo fare con AJAX è rimuovere quel passo di andare a una pagina separata al fine di visualizzare i risultati. 

Quello che stiamo davvero solo chiedendo è che il prezzo veramente piccolo, e questo è solo una quantità molto piccola di dati. Quindi non c'è bisogno che io vada un'altra intera pagina HTML, scaricare una nuova serie di HTML, magari scaricare le immagini un po 'di più, altri file CSS solo per me rispondere a questa domanda molto semplice di quanto costa questo stock. Con AJAX siamo in grado di rendere questo molto più facile. Vediamo qui che sto collegamento in un file JavaScript denominato quote.js. Facciamo in realtà aprire quel file. Non lì. Tutti i miei file JavaScript stanno per essere collocati in HTML in modo che il browser possa accedere. Poi abbiamo una directory separata qui per JavaScript, ed ora è qui quote.js. Nella parte superiore di questo file questo qui dice che voglio aspettare per l'intera pagina da caricare prima di provare a fare qualcosa. Perché è necessario? Si scopre che la prossima cosa ho intenzione di fare è iniziare la ricerca di un elemento che corrisponde qualche selettore. Se questo JavaScript è mai eseguito prima questo elemento viene caricato sulla pagina, poi tutto quello che cerco di fare non è andare a lavorare perché ho intenzione di provare a selezionare qualcosa che non c'è ancora. Così questa linea sulla parte superiore dice voglio che aspettare fino a quando tutto è caricato quindi abbiamo la garanzia che tutti gli elementi che sto cercando sono in realtà sulla pagina. Questo segno dollaro qui significa che sto utilizzando la libreria chiamata jQuery. Questa libreria jQuery ci permette di utilizzare questi selettori che abbiamo appena guardato. Dicendo $ poi passando come argomento il # modulo-preventivo, Ora sto selezionando quella forma che abbiamo appena dato un'occhiata a. Ora ho una rappresentazione di quella forma in memoria in qualche modo. 

Su questo oggetto ora, questa rappresentazione della forma, Ora sto utilizzando una funzione chiamata su. Che questa funzione non fa altro che sta per associare un gestore eventi. L'evento che stiamo per ascoltare è l'evento submit. Così, quando l'utente fa clic pulsante di invio o che preme Invio, questo evento sta andando a fuoco. Con aggancio in questo, ora posso ignorare il comportamento predefinito del modulo. Senza questa JavaScript, la forma avrebbe presentato a qualunque file PHP abbiamo usato in questo attributo action. Invece, ora sto dicendo, aspetta, aspetta, aspetta, io non voglio che tu faccia effettivamente tale. Voglio che questo accada prima di andare e cercare di presentare alcuni file PHP. Ora, che cosa voglio fare? A questo punto voglio usare AJAX per caricare in qualche modo in ciò che il prezzo del titolo è. La prima cosa che ho bisogno di sapere che cosa è disponibile l'utente sta guardando. Per fare questo ho intenzione di utilizzare un altro selettore. Questo è il terzo selettore abbiamo guardato prima. Questo dice che voglio iniziare questo elemento form con un ID di forma-preventivo. Poi, da qualche parte dentro di quella forma ci deve essere un elemento di input che ha un nome di simbolo. Se guardiamo indietro alla nostra HTML, abbiamo visto che avevamo un input [name = simbolo]. Ciò significa che questo sta andando a selezionare quella casella di testo che l'utente sta scrivendo in. Che bello. Abbiamo la casella di testo. Ora abbiamo solo bisogno di sapere cosa c'è dentro di essa. Per fare questo si può chiamare questo metodo qui, questo. Val, e questo la dice so cosa casella di testo che hai. Voglio che tu mi dica che cosa è l'utente ha digitato in quella casella di testo. Ora abbiamo una stringa chiamata simbolo che è uguale a tutto ciò che l'utente ha digitato trovi Che bello. Possiamo usare la stringa ora a fare la nostra richiesta. Si tratta di una nuova funzione qui, questa $, salvo non siamo più sarà la selezione di elementi, abbiamo intenzione di chiamare una funzione diversa che vengono forniti a noi da jQuery. Questa funzione AJAX è ciò che in realtà sta per fare questa richiesta HTTP. Quindi dobbiamo dire che un paio di cose. La prima cosa che dobbiamo dire a questa funzione è dove voglio la richiesta di andare. Da qualche parte nel mio progetto ho questo file all'interno della directory HTML chiamato quote.php. Posso accedere a questo file, abbiamo visto, proprio come questo, se vado su localhost / quote.php. 

Voglio che il mio supporto JavaScript per fare una richiesta a quella pagina. Che tipo di richiesta ora? Abbiamo visto prima che la forma ha questo metodo = attributo "post", e questo significa che sta andando a fare una richiesta POST, quindi non sta andando a mettere qualcosa nell'URL, piuttosto che una richiesta GET, che sarebbe solo essere licenziato se abbiamo appena si accede alla pagina con il browser web, per esempio. Ora abbiamo detto che voglio fare una richiesta HTTP POST a una pagina trova quote.php. Quando si invia il modulo, ricordo che abbiamo potuto accedere agli elementi di input all'interno di quella forma con la variabile $ _POST. Finora nella storia che non hanno effettivamente inviato insieme tutti i dati ancora. Abbiamo appena detto che stiamo facendo una richiesta AJAX e qui è il tipo di richiesta che stiamo facendo. Ora abbiamo bisogno di inviare effettivamente alcuni dati alla pagina. Per fare questo possiamo usare questa proprietà chiamata dati. Il valore di questa proprietà è in realtà un array associativo. La ragione di questo è che ci permette di inviare più di 1 pezzo di dati. Ecco perché abbiamo queste parentesi graffe qui nidificato all'interno di queste parentesi graffe altri. I tasti in questi array associativi stanno per essere la stessa cosa come quelli nome attributi nei nostri elementi del modulo. Questo significa che se io mando lungo una chiave di simbolo, questo significa che la mia pagina PHP può accedere a questi dati con $ _POST [simbolo] proprio come abbiamo fatto prima, quando eravamo invio di un modulo. E ora i dati effettivi si desidera inviare sarà l'interno valore di questo array associativo. 

Abbiamo conservato questo testo in un simbolo variabile chiamata, e così stiamo inviando lungo ora una chiave di simbolo e un valore di ciò che l'utente ha digitato trovi Ora abbiamo fatto questa richiesta HTTP, il nostro file PHP è stato eseguito, e sta andando a inviare i dati indietro al client che appena fatto questa richiesta. Ora abbiamo bisogno di rispondere a tutto ciò che il server ci ha detto. Per fare questo abbiamo questa ultima proprietà che qui si chiama successo. Il valore di questa chiave di successo è in realtà sta per essere una funzione, e questa è una delle cose veramente interessanti che si possono fare con JavaScript. Non solo è possibile avere interi array o come un valore all'interno di un array associativo, si può anche avere una funzione. Così dicendo il successo, questa è la mia chiave. Un colon dice qui arriva il valore, e ora il valore di questo è in realtà una funzione. Quindi non abbiamo bisogno di dare un nome a questa funzione di per sé. Possiamo solo dire che questo sarà qualche funzione. E 'intenzione di prendere 1 argomento. L'argomento di questa funzione sta per essere qualunque sia il server ci ha mandato indietro dalla richiesta. Proprio come quando il nostro browser effettua una richiesta, il server invia qualcosa in cambio e il browser viene visualizzato, nel contesto di AJAX che abbiamo appena fatto una richiesta, il server ha inviato qualcosa in cambio, e ora che abbiamo rappresentato come una stringa. Con la stringa Vorrei solo che per visualizzare nella pagina. Per fare questo ho intenzione di avere un selettore scorso. Voglio selezionare l'elemento con il prezzo ID. Questo è solo un div vuoto che ho creato sulla pagina, e voglio impostare il contenuto di tale div di essere ciò che il server ci ha inviato indietro. In realtà ho un po 'modificato quote.php. 

Piuttosto che chiamare render e rendering qualche pagina, quote.php ora sta semplicemente andando a stampare il valore del titolo sotto forma di stringa. Quindi, se si dovesse visitare la pagina in realtà, si sarebbe solo vedere che piccola stringa di ciò che il prezzo dell'azione è. Un ultima cosa che dobbiamo fare qui è solo assicurarsi che questa funzione restituisce false. Che cosa questo dice è che se sono all'interno di un gestore di eventi e che gestore di eventi restituisce false invece di restituire vero, che significa che non voglio l'evento originale al fuoco. In questo caso, se non ha avuto alcun Javascript e abbiamo presentato un modulo, il nostro browser web sta per dire: "ho intenzione di inviare i dati lungo," e andranno a inviare a un'altra pagina. Poiché stiamo usando AJAX ora, non c'è bisogno di inviare l'utente a un'altra pagina. Stiamo solo andando a visualizzare i risultati in modo dinamico in questa stessa pagina. Noi davvero non si vuole loro di andare da nessuna parte, e voglio rimanere sulla stessa pagina. Così, restituito false, ci assicuriamo che la forma non lo fa per noi. Diamo uno sguardo a ciò che questo si presenta come. La nostra pagina Preventivo sembra la stessa. Vorrei tirare su l'ispettore qui in modo che possiamo vedere cosa sta succedendo. Ne fanno un po 'meno grande. Ricorda che se apriamo la scheda di rete, è qui che possiamo vedere tutte le richieste HTTP che stanno accadendo nella pagina. 

Per un simbolo farmi digitare AAPL e fare clic su Richiedi preventivo. Ora abbiamo visto che una quota di Apple costa un certo numero di dollari appena apparso sulla pagina, ma l'URL non è affatto cambiata. In realtà, è qui la richiesta HTTP che abbiamo appena fatto. Abbiamo fatto una richiesta POST a quote.php. Questo ha senso. Questo è ciò che il server ci ha inviato indietro. Non è più presente documento gigantesco HTML con immagini e cose del genere, è solo una riga di testo, e poi abbiamo appena visualizzata la riga di testo. Se torniamo alle intestazioni e vedere quello che effettivamente inviato all'interno di questa richiesta HTTP, possiamo vedere qui che abbiamo inviato lungo una chiave di simbolo e un valore di AAPL, che è ciò che l'utente ha digitato trovi Questo è bello, ma è ancora un po 'fastidioso. Devo ancora fare clic su questo pulsante per ottenere la quotazione. Siamo persone molto impegnate e non abbiamo il tempo di fare clic sui pulsanti. Google realizzato questo un po 'di tempo fa, quando hanno implementato Google Instant. Che cosa fa Google Instant è come si sta digitando parte proprio la visualizzazione dei risultati per voi in modo da non dovete preoccuparvi di anche facendo clic su Cerca. In realtà, una storia divertente legata a quella. Una volta che Google Instant è uscito, la gente era come, "Wow, questo è super fantastico." "Questo è così cool." E uno studente fino a Stanford, che aveva 19 anni al momento fatto questo sito chiamato YouTube Instant. Tutti immediata YouTube si è di fatto la ricerca su YouTube all'istante. Quindi, piuttosto che dover andare a YouTube.com e colpire Ricerca, quando inizia a digitare in qualcosa di immediato come YouTube CS50, abbiamo potuto vedere qui che è il tentativo di una connessione a Internet lenta popolano questi risultati in diretta. Per fare questo si può effettivamente fare una modifica molto semplice per il nostro file quote.js. In questo momento stiamo collegando questo evento quando il modulo viene inviato. Non abbiamo voglia di rendere l'utente più sostengono che forma, quindi cerchiamo di fuoco invece che questo evento ogni volta che l'utente preme un tasto. Per fare questo si deve prima modificare l'evento da presentare al keyup. Ciò significa che invece di aspettare che il modulo per presentare, ogni volta che viene premuto il tasto, qualcosa sta per accadere. E non ha più senso di collegare questo evento keyup per l'intero modulo. Abbiamo davvero interessa solo che la casella di ricerca. 

Per selezionare che ora, possiamo cambiare questo sia, piuttosto che la forma-preventivo, modulo-preventivo e avremo un ingresso (digitare il testo =) o potremmo dire (nome del simbolo =) - tutto ciò che vogliamo. Ora c'è un'ultima cosa che dobbiamo fare. Ricordate qui quando abbiamo detto return false abbiamo detto che non vogliamo che evento predefinito al fuoco. Ma si da il caso che se si disattiva che ora, tutto ciò che digitare non è intenzione di mostrare nel browser più perché sarebbe il comportamento predefinito di digitare in una casella di testo. Noi non vogliamo più ignorare che, quindi cerchiamo di distruggere questo return false. Se non che e ricaricare la pagina, ora quando inizia a digitare AAPL vedrai che il prezzo del titolo in fondo qui sta completando automaticamente. Così qui è CS50 immediata Finanza. In realtà una storia divertente su YouTube Instant è che solo tipo di studente lo ha scritto come un 1-notte progetto, e il giorno dopo gli è stato offerto un posto di lavoro da parte del CEO di YouTube. Così semplice come quello, CS50 studenti, i progetti finali si può ottenere un lavoro a YouTube. Qualcosa del genere è una idea davvero cool per un progetto finale, giusto? Abbiamo avuto un po 'di funzionalità esistenti che abbiamo voluto integrare con. Abbiamo migliorare l'esperienza utente un po ', e improvvisamente ricerca di qualcosa su YouTube istantanea potrebbe essere molto più facile che cercare su YouTube regolare. Ecco, questo è AJAX in poche parole. 

Negli esempi che Giuseppe stava mostrando, abbiamo visto un sacco di autocompletes, e quei autocompletes sono davvero, davvero a portata di mano perché non c'è bisogno di ricordare - Ad esempio, se non si ricorda il prezzo delle azioni di Apple e abbiamo appena so che è una cosa aa, piuttosto che dire a me, "Una parte di questa cosa costa tutti quei soldi," Mi piacerebbe un po 'come sapere quali azioni iniziare aa. Possiamo farlo davvero bene con la libreria Bootstrap che è già incluso all'interno di CS50 Finanze. Se si arriva qui per il tag JavaScript e scorrere fino a typeahead, questo è solo un bel plugin che qualcuno già scritto per noi, e si può facilmente utilizzare le sue funzionalità come questo. Ho digitato in un A e ecco un elenco di alcuni stati che iniziano con A. Diciamo che credo che questo è davvero cool ed è il momento per me di includere questo nella mia pagina. Si scopre che questo è molto, molto semplice. Facciamo un salto qui a quote3.js. Il mio file ha un aspetto un po 'diverso. Qui sotto tutte le mie cose AJAX è la stessa. Voglio caricare i dati di stock, senza dover andare in un'altra pagina. Ma ora voglio usare questo plugin. La documentazione Bootstrap ha ottimi esempi di come esattamente lo posso fare. Voglio dire, "Ecco l'input che voglio il completamento automatico," e ho intenzione di chiamare questa funzione chiamata typeahead, e che sta andando a gestire tutte le cose typeahead per noi. Si inizializza la lista, che farà tutti i nostri filtri. L'unica cosa di cui ha bisogno è di sapere quali dati stiamo autocompleting su. Così ho scoperto questa chiave solo leggendo la documentazione e guardando gli esempi. Se mi danno una chiave di sorgente, il valore di questa chiave è solo alcune serie di cose che voglio completamento automatico su. Questa variabile è venuto da questo altro file. Apro symbols.js. 

Questo symbols.js è proprio questa matrice molto, molto grande che contiene stringhe di tutti questi simboli di borsa dal NASDAQ. Se voglio tornare al codice HTML, in modo da jharvard, vhost, globalhost, html, i modelli, quote_form. Dal momento che è ora chiamato quote3.js, vorrei modificare il file JavaScript che sto anche qui. Ora ho quote3.js, così ho intenzione di caricare in quel file JavaScript separato, quello che ha che Bootstrap completamento automatico. Ora, quando ho tornare al browser, ricaricare la pagina, e mi metto a digitare aa, c'è il mio completamento automatico. Ed è stato davvero così semplice come sembra. Ho avuto 1 riga di codice che ha appena detto: "Qui ci sono le cose che voglio il completamento automatico," e improvvisamente ho questa funzionalità davvero, davvero bella con non un sacco di fatica. Come si sta sviluppando siti web e in particolare il lato front-end delle cose, si sta andando a trovare questo è il caso molto. Ci sono, molto molto, molto di librerie libere davvero cool là fuori che lo rendono super facile da fare cose come questa. Qualcuno può pensare a eventuali inconvenienti semplicemente autocompleting in questo lungo elenco di simboli? Che cosa potrebbe essere qualcosa che non è il migliore con questo approccio? Gia '. >> [Studente] Ora, se avete un sacco di [incomprensibile] Gia '. In questo momento stiamo scaricando questo file enorme Javascript e ci sono un sacco di simboli. E così, se abbiamo un sacco di roba, questo tipo potrebbe di aumentare la latenza non solo di ricerca ma anche il download del file vero e proprio. Grande. Tutto il resto? In questo momento non c'è alcun senso di rilevanza. Se si digita in un A, le aziende che compaiono qui potrebbero non essere le aziende più popolari che iniziano con A. 

Prima di arrivare ad Apple, che potrebbe richiedere un po 'di più i caratteri di trovare quello che sto cercando. Questo completamento automatico non ha questo senso di rilevanza. E 'solo per dire: "Tutto ciò che soddisfa le vado a visualizzare." Invece, mi piacerebbe integrare in qualche modo una certa rilevanza nelle mie ricerche. Se vado qui a Yahoo! Finanza, finance.yahoo.com, Se cerco di inserire un simbolo a pagina Yahoo! Finance Io e iniziare a digitare goog, ho questa bella lista di cose. Chiaramente, sembra che Yahoo! Finanza sta facendo qualcosa di più intelligente qui. Hanno una certa rilevanza e hanno anche informazioni aggiuntive come il nome del titolo. E 'qualcosa che non posso ottenere con solo il mio stock list di simboli. Voglio questo e così ho intenzione di prenderlo. Per fare che ti permette di fare un paio di cose. Si deve prima aprire la finestra di ispezione in questa pagina perché abbiamo visto che questa pagina non si ricarica a tutti, quindi è probabile l'utilizzo di AJAX in qualche modo essere caricato i suoi dati. Siamo in grado di sapere quali dati sta caricando. Se clicco su questa scheda di rete, queste saranno tutte le richieste che iniziano a essere licenziato. Ora, se digito goo, possiamo vedere che ho appena ricevuto una nuova richiesta HTTP. Questo è probabilmente dove i dati che sta venendo. Certo, basta, se guardo a questo indirizzo, che è un po 'strano di nome, possiamo vedere che questo è esattamente dove Yahoo sta inviando i suoi dati da fuori. 

Ho creato un file separato chiamato suggest.php che è molto simile nello spirito alla funzione di ricerca. E 'fondamentalmente andando a fare una query di URL di Yahoo, recuperare alcuni dati, e inviare di nuovo a me. Ora, invece di usare questo grande, enorme elenco di simboli, Posso usare Yahoo cose belle rilevanza, e non c'è bisogno di scaricare il file massiccia JavaScript. Sto solo andando a tirare giù i simboli delle azioni effettivamente rilevanti. Saltiamo in quella. Così html, js. Siamo ora in quote4. Ora non siamo più utilizzando quel grande elenco di file JavaScript. Ma c'è una sorta di piccolo problema di progettazione qui. Abbiamo detto che la A in AJAX è asincrono. Ciò significa che quando faccio una richiesta AJAX, così proprio qui sulla linea 8, è qui che la mia richiesta AJAX è effettivamente sparato. Diciamo che ora ho un po 'di codice qui che sta andando a fare alcune cose come avverte l'utente o cambiare qualcosa sulla pagina. Cosa non sta per accadere è il browser non ha intenzione di attendere per la richiesta di continuare prima di scendere e colpire questa linea. Questa è la parte asincrona. E 'intenzione di fare questa richiesta e dire: "Ogni volta che hai finito, "Tornare indietro e chiamare quella funzione che ti ho detto di chiamare dentro di successo." Questo significa che non si può semplicemente scaricare tutti gli stock in anticipo. Abbiamo bisogno di fare la richiesta e aspettare che qualcosa di tornare. Ciò significa che, prima, si potrebbe semplicemente dire Bootstrap, "Ecco la lista delle cose che si desidera sul completamento automatico." Non possiamo più farlo più perché non sappiamo quello che vogliamo in realtà il completamento automatico. Per fortuna, Bootstrap pensato a questo perché quelli sono ragazzi intelligenti laggiù, e che in realtà ci hanno dato un altro modo per caricare questo plugin typeahead. Prima, il valore di questa proprietà di origine era proprio questa matrice grande di cose da completamento automatico su. 

Ora la proprietà source è in realtà una funzione, e lo scopo di questa funzione è quello di capire quali sono le cose a completamento automatico su sono. Il modo in cui sta andando a capirlo è sta andando a chiedere Yahoo! Finanza quali sono le cose migliori sono a completamento automatico. Per fare questo ho intenzione di fare una richiesta molto simile AJAX. Ho intenzione di chiedere a questa pagina suggest.php. Voglio inviare lungo i simboli ancora. E ora il mio successo, la documentazione Bootstrap mi ha detto che per popolare quella lista di cose, tutto quello che devi fare è passare questo array ora alla funzione di callback. Ma aspetta un attimo. Se si suppone che sia un array e AJAX mi sta mandando indietro il testo, come è possibile? Questo introduce un nuovo modo di scambio di dati chiamato JSON. In questo caso non stiamo solo rimandando una semplice stringa di testo. Ora abbiamo a che fare con questa lista più complesso di simboli di borsa. Questi simboli di borsa può includere anche cose come il nome della società o dei prezzi correnti. Solo mediante una stringa di gran lunga che non è formattato in alcun modo prevedibile non sarà il modo migliore per ottenere i dati dal server di Yahoo per me in un modo che io possa facilmente capire. JSON è una tecnologia che sfrutta il modo in cui creare gli array associativi in ​​JavaScript. Questo assomiglia molto a un array associativo JavaScript, e in realtà, è perché è. JSON è l'acronimo di JavaScript Object Notation. Questo è fondamentalmente un formato concordato per il trasferimento di dati avanti e indietro. Qui l'oggetto JSON o questo array associativo JSON mi manda alcuni dati relativi a un corso. 

Le chiavi di questo array sono cose come il corso che ha un valore di CS50, e qui possiamo vedere che io possa avere un valore che è un array. Non c'è bisogno di fare le cose come le stringhe di analisi e cercare le virgole e fare cose folli del genere. Poiché questo è dichiarato in questo formato JSON, Javascript e jQuery già hanno funzioni per convertire una stringa che assomiglia a questo JSON in un array associativo reale JavaScript che siamo in grado di lavorare. Fare questo è semplice come dire che non è più tale, suggest.php file, mandarmi indietro semplicemente una stringa di testo, ma so che sta per essere mandarmi indietro JSON. Ciò significa che JSON che può essere convertito in un array JavaScript associativo. E così jQuery, mi piacerebbe che tu lo faccia per me. Ciò significa che questo parametro risposta qui, questo non è più solo una stringa. Perché abbiamo detto jQuery che viene qui un po 'di JSON, jQuery sta per essere abbastanza intelligente per dire: "Volevi JSON?" "Ho intenzione di convertire in un array associativo per te." Facciamo effettivamente prendere uno sguardo alla scheda di rete, una volta che abbiamo quote4.js. Cambieremo questa e ricaricare la pagina. Ora ho intenzione di digitare a-a nuovo. Ho fatto un paio di domande a suggest.php, ma ora questa risposta, piuttosto che solo la stringa, è JSON. Così ho una parentesi graffa aperta dicendo: "Ecco che arriva un array associativo." 

La chiave primo e unico di questo array associativo è chiamato simboli, e quindi qui è un array di tutti i simboli relativi arrivando ora da Yahoo! Finanza, non da quella lista gigantesca. È così che io possa semplicemente compilare questo plugin autocomplete con alcuni dati che non è proveniente da un file locale che è già predeterminato ma da qualcos'altro. Si scopre che si può effettivamente usufruire di una tecnologia chiamata JSONP, o JSON con imbottitura, che eliminerà questo intermediario suggest.php. Ma invece di fare questo, diamo invece un'occhiata a come posso migliorare questo ancora di più. Mi piace molto typeahead Bootstrap di. E 'veramente bello. Ma stiamo diventando bravi a JavaScript e vogliamo fare questo tipo di noi stessi, magari dare un'occhiata a ciò che questo plugin potrebbe fare. Che è più utilizzare quella cosa typeahead, e cerchiamo di fare questa lista di titoli suggeriti noi stessi. Qui in quote6.php abbiamo intenzione di iniziare allo stesso modo. Ogni volta che qualcuno scrive qualcosa, vogliamo fare una richiesta AJAX. Questo è simile alla nostra originale CS50 immediata Finanza. Piuttosto che fare una richiesta di quote.php, stiamo ora facendo una richiesta di quel file come prima, questo suggest.php, che è solo andare a estrarre i dati da Yahoo! Finanza. 

Anche in questo caso, stiamo ancora aspettando JSON, ma ora, poiché il typeahead non sta facendo questo per noi, abbiamo anche bisogno di inviare insieme il valore che si trova all'interno della casella di testo corrente. Ora sappiamo che cosa chiedere di Yahoo! Finanza, e così ora ecco la funzione che si vuole eseguire una volta che la richiesta viene completata. Noi non abbiamo il plugin per fare la lista per noi, quindi ecco dove stiamo effettivamente andando a costruire un elenco di suggerimenti. Per fare questo, un po 'come in PHP abbiamo concatenato queste stringhe grandi di HTML poi farli stampare, possiamo fare la stessa cosa esatta in JavaScript. In primo luogo abbiamo intenzione di iniziare questa stringa chiamato suggerimenti, e questa stringa è solo andare a contenere un po 'di HTML. Noi vogliamo che sia un elenco di cose, in modo che andremo a iniziare con questo tag lista, e ora stiamo andando a scorrere tutti i simboli che sono stati restituiti a noi. Ricordate, perché abbiamo detto dataType: 'json', non si tratta di una stringa. Questo è già un array per noi. Questo è davvero cool. Possiamo semplicemente dire: "voglio che aggiungere un elemento di lista." Ci metterò all'interno di un elemento in una parte di questo, faremo di una classe di suggerimenti in modo da sapere quello che è, ed ora ecco il simbolo che siamo tornati da Yahoo! Finanza. 

Una volta che abbiamo creato un elemento per ciascuno dei simboli che abbiamo ottenuto indietro, vogliamo solo chiudere l'elenco. Così ora i suggerimenti rappresenta questo piccolo frammento HTML che quando viene messo in una pagina sta per essere l'elenco delle cose che stiamo cercando. Ora in realtà metterlo sulla pagina. Per fare questo in realtà ho creato un altro div vuoto e l'ho dato un ID di suggerimenti. Proprio come abbiamo impostato il contenuto del div che mostrano il prezzo dei dati di stock, ora vuole solo impostare il contenuto di questo div a tutto ciò che questa stringa è che contiene questi simboli. Utilizzando questo metodo di HTML, questa variabile suggerimenti, questa stringa, è una stringa di codice HTML. Voglio che prendere quella HTML e inserirlo all'interno del div chiamato suggerimenti. Abbiamo appena aggiunto qualcosa al DOM ora. Abbiamo aggiunto alcuni nuovi elementi al DOM che ora possiamo visualizzare nella pagina. Vediamo come si presenta. Se carichiamo in quote6 e ora siamo tornati, ora quando inizia a digitare AAPL, non abbiamo più che Bootstrap completamento automatico, ma ora abbiamo questa lista che ci siamo fatti. Questo è un po 'più brutto del typeahead Bootstrap, per esempio, ma ci permette di fare un'altra cosa. Quando stavamo guardando quel plugin Bootstrap, abbiamo visto che quando autocompleted, uno dei valori di completamento automatico è stato AAPL. Questo potrebbe non essere così utile. Come utente, non potrebbe riconoscere immediatamente tutti i simboli delle azioni. Quello che probabilmente sono più propensi a riconoscere sono nomi reali della società. Quindi non sarebbe veramente utile se invece di dire AAPL questo ha detto qualcosa di simile a Apple Inc. Perché abbiamo lanciato questo noi stessi, possiamo davvero facilmente farlo. Apriamo il nostro ultimo file preventivo qui, quindi quote7. 

Stessa cosa. Ho appena creato un altro file PHP che tornerà a noi più che i simboli. Sarà anche restituirci i nomi della società. E così stiamo facendo la stessa cosa. Stiamo facendo una richiesta AJAX. Una volta che la richiesta è stata completata, abbiamo intenzione di eseguire questa funzione qui, e questa funzione sta per costruire una serie di elementi di grande. Ma la differenza è che il valore di queste liste non è più solo il simbolo, è ora il nome. Così abbiamo un piccolo problema. Quando usiamo la nostra ricerca, abbiamo bisogno di passare in qualche modo il simbolo. Non possiamo passare qualcosa di ricerca come Microsoft Corporation. Abbiamo bisogno di passare MSFT. Quando stiamo scrivendo HTML, abbiamo un sacco di bei attributi built-in. Un A potrebbe essere associato un href o una classe. Ma ciò che abbiamo veramente bisogno ora è per ciascuno di questi link di avere un simbolo azionario associato. Non c'è attributo built-in HTML per simbolo azionario, ma per fortuna, HTML5 ci permette di creare i nostri attributi per essere tutto ciò che vogliamo. Dicendo data-simbolo, ho introdotto un nuovo attributo il cui nome ho appena fatto, e questo è bene perché l'ho preceduto da questi dati. Stiamo andando a memorizzare all'interno di là del simbolo dal magazzino. Che cosa questo significa è che, anche se stiamo visualizzando il valore del nome della società all'interno del nostro completamento automatico, stiamo ancora ricordando il simbolo associato a ciascuna società. Il modo in cui stiamo facendo che si trova all'interno di questo stesso elemento. Questo significa che abbiamo bisogno di fare una modifica più. Quando l'abbiamo scegliere adesso, abbiamo bisogno di prendere effettivamente sfruttare l'attributo simbolo piuttosto che il suo valore. Se il backup, abbiamo associare un gestore eventi a suggerimenti. Ogni volta che uno di questi suggerimenti si fa clic ora, voglio fare qualcosa. Quello che voglio fare è cambiare il valore di tale casella di input. Ora voglio impostare questa stessa funzione val. 

Così, senza alcun argomento la funzione Val restituisce a te ciò che è già nella casella di testo, ma se si dà una stringa, sta andando a prendere la stringa e metterlo nella casella di testo. Sto selezionando la casella di testo nello stesso modo. Il suo nome è il simbolo all'interno della forma-preventivo. Ora lo sto inviando il valore dell'attributo data-simbolo. Questa cosa qui è nuovo, questo $ (this). Ciò si riferisce è l'elemento che è stato fatto clic. Possiamo vedere che non stiamo associare un evento click a ciascun elemento con una classe di suggerimento singolarmente. Piuttosto, ci stiamo avvicinando questo un po 'diverso. Invece stiamo dicendo ogni volta che all'interno di qualche cosa di questo div suggerimenti, ricordo che è solo il contenitore per l'elenco, se qualcosa all'interno di questo div si fa clic e si ha una classe di suggestione, Voglio che questo evento al fuoco. Fondamentalmente ciò che questo significa che possiamo fare è che possiamo riutilizzare questo stesso gestore di eventi per tutte le cose nella lista. Quindi non c'è bisogno di avere un gestore di eventi per il primo elemento e un evento differente per il secondo elemento. Possiamo invece dire: "Io voglio il gestore stesso evento da applicare a tutto ciò che nella mia lista." Ma abbiamo bisogno di sapere in qualche modo quale elemento è stato fatto clic. Questo "questa" parola chiave rappresenta proprio questo. Questo è l'oggetto che è stato appena selezionato dall'utente. Se ho appena cliccato il link 3 °, questo rappresenta un elemento di questo legame 3 °, il che significa che posso ottenere il suo attributo, data-simbolo, che sappiamo deve contenere il simbolo che è associato con l'azienda ho appena cliccato. Se salto indietro alla nostra pagina di finanza, possiamo vedere ora che una volta che inizi a scrivere qualcosa di simile msft, non siamo più ottenere solo i simboli delle azioni, ora stiamo ricevendo le aziende reali. Ma quando si fa clic su una di queste società, possiamo vedere che stiamo in realtà non popolano la casella di testo con il nome della società ma con ciò che è stato memorizzato all'interno di questi attributi di dati. E quindi se io in realtà controllare uno di questi elementi di diritto clic su di esso e facendo clic su Inspect Element, possiamo vedere come si presenta. 

Ricordate che questo è qualcosa che abbiamo creato all'interno di quel ciclo for quando stavamo costruendo quella stringa di codice HTML. Possiamo vedere che questi dati-simbolo ha il valore di MSFT, che è grande. Questo è quello che ci aspettavamo. Questo è il simbolo ed è così che abbiamo ottenuto il valore che abbiamo bisogno di usare all'interno di questa casella di testo. Questo è sufficiente per il form preventivo perche 'e' un po 'noioso. Diciamo solo fare alcuni miglioramenti rapidi per la nostra pagina portafoglio. Se avete usato CS50 Finanza per un po 'e di iniziare a comprare e vendere un sacco di titoli, alla fine questa tabella sta per arrivare abbastanza grande, e si sta andando a voler una quotazione di borsa, naturalmente. Una volta che la tabella è davvero grande, potrebbe essere utile per l'utente di provare a cercare su di esso. All'interno della casella di ricerca se inizi a scrivere qualcosa di simile a Disney e cercando il mio archivio di Topolino, possiamo vedere che la tabella è ora di filtraggio in base a quello che ho appena digitato trovi Questa funzionalità sembra super complicato, ma è molto, molto facile con jQuery e JavaScript. Questo file portfolio.php include un file JavaScript denominato portfolio.js. Diamo uno sguardo a questo. Così html, js, portafoglio. Ecco dove stiamo facendo una ricerca sul tavolo. La prima cosa che devi fare è associare un gestore eventi a tale casella di testo perché sappiamo che vogliamo che la nostra funzione di filtraggio al fuoco ogni volta che l'utente preme qualcosa, perché non abbiamo tempo per i pulsanti di ricerca. La prima cosa che dobbiamo fare è capire ciò che l'utente sta cercando, proprio come abbiamo fatto prima. Questa parola chiave si riferisce l'elemento corrente l'utente interagisce con. 

Poiché l'utente interagisce con la casella di ricerca, $ This rappresenta la casella di ricerca, così this.val ci dà ciò che è all'interno della casella di ricerca l'utente sta digitando. Così, ora quello che vogliamo fare è che vogliamo per scorrere tutte le righe all'interno della nostra tabella. Per selezionare tutte le righe della nostra tabella, ho dato quel tavolo un ID del portafoglio tavolo, e ciascuna riga è rappresentato da un elemento TR, quindi questo selettore sta per tornare da me una matrice grande di tutte le righe della mia tabella. Ora voglio scorrere tale matrice. Potrei un ciclo for, ma jQuery fornisce in realtà noi la bella funzione chiamata "ogni". Ciò che ciascuno non fa altro che ognuno prende un argomento, e che l'argomento è una funzione. Che cosa sta andando a fare è che sta per applicare la funzione di ogni elemento all'interno di questa lista. Questa funzione accetta un argomento che è e, e quando questa funzione viene eseguita, e questo sta per essere sostituita con la prima riga, poi la seconda fila, e poi la terza fila. In questo modo, questa è la stessa cosa che l'esecuzione di un ciclo for e poi cercare di capire l'elemento corrente in base all'interno dell'indice del ciclo for. Ad ogni iterazione, per ciascuno di questi elementi nella tabella, Voglio controllare se il testo dell'elemento - il testo della cella all'interno della riga - corrisponde a quello che sto cercando. Questa stringa gran lunga serie di comandi è come avrei potuto farlo. In primo luogo, ancora una volta, questo si riferisce ora - perché è all'interno di una nuova funzione - questo è ora la riga corrente nella tabella. Voglio prendere la riga corrente nella tabella, e voglio avere tutti i suoi figli. Ricordate, il DOM è un albero gerarchico, il che significa che gli elementi hanno un numero di figli. 

Questa. Funzione bambini sta per tornare indietro me una matrice di tutti gli elementi che sono figli di, in questo caso, una riga nella tabella. Questo è semplicemente le cellule all'interno della riga. Voglio solo cercare su prima cella. Questo. Prima funzione dice dammi il primo elemento di tale array. Quindi la funzione testo dice farmi esattamente cosa c'è dentro di quella cella perché voglio cercare su quel testo. Infine, cerchiamo di convertirlo in minuscolo, in modo da poter fare le query case insensitive testo. Infine, vogliamo vedere se la stringa all'interno di una tabella contiene la stringa che stiamo cercando. La funzione in JavaScript indexOf fa proprio questo. Ci dice se questa stringa contiene un'altra stringa. Se è vero che la cella contiene quello che sto cercando, allora voglio fare in modo che sia mostrato. Il metodo spettacolo dirà: "Mostra l'elemento." Se questo non è il caso, allora significa che tutto ciò che sto cercando non è contenuto all'interno di tale riga e quindi voglio nascondere è da parte dell'utente. Che ottiene che bel effetto di filtraggio dove non si vede l'intera tabella. Se siete interessati a come fare questo ticker pure, postiamo la fonte in linea. Ma è molto semplice. JQuery ha metodi impressionante per queste animazioni e manipolare le proprietà CSS. Quindi, questo è tutto per me. 

Cosa c'è poi avanti? Come si vedrà in pochi giorni, la proposta finale dei progetti è dovuta. La proposta finale progetti vi chiederà alcune domande, ma tra loro saranno tre tappe - uno un pietra miliare "buono", una pietra miliare migliore, e uno un best. L'idea è davvero aiutare voi impostare le vostre aspettative in modo che minimamente sarai felice con l'uscita del progetto finale e sarà "buono" per quanto vi riguarda. Ma poi nell'interesse di ottenere di raggiungere solo un po 'a qualcosa di meglio o meglio qualcosa, faremo anche ordinare di spingerti verso quello. Il CS50 Hack-a-thon, nel frattempo, è in poche settimane. In genere, lo facciamo su base base lotteria a causa di interessi, ma le probabilità sono prenderemo qualche centinaio di noi in bus navetta da Harvard Square fino a Kendall Square, dove Microsoft ha una bellissima struttura giustamente chiamato "NERD" - Research New England e Development Center. Ci arriveremo intorno alle 8 Avremo un po 'di cibo. Intorno 01:00 avremo ancora un po 'il cibo. Intorno alle 5 se siete ancora svegli ci dirigeremo verso IHOP o portarvi indietro al campus. L'obiettivo non è quello di immergersi in progetti finali a fianco di compagni di classe e personale. Poi, pochi giorni dopo è la Fiera CS50, che è destinata ad essere una opportunità per voi per mostrare il vostro lavoro e realizzazioni per il semestre mentre fianco a fianco con l'altro e ottenere un senso di ciò che ognuno ha fatto. Detto questo, molte grazie a Tommy ea Giuseppe, e ci vedremo il Lunedi.  [Applausi]