DAVID J. MALAN: Va bene, quindi questo qui è il braccio Myo banda, un paio di cui avere per progetti finali CS50. E questo è stato una dimostrazione siamo in coda in su in anticipo dove essenzialmente questo braccio abbastanza stretta banda inizia qui ascolta i vostri movimenti muscolari che sono poi mappati nel software al computer portatile di Colton qui che aveva iTunes e che canzone già in coda. Piuttosto che provare le canzoni di me questo, Colton è stato in laboratorio chiaramente tutta la settimana ottenendo una dimostrazione pronto per un volontario coraggioso. Se qualcuno vuole venire sul up-- ha visto la mano prima. Andiamo su. [00:01:09] Bene. E qual è il tuo nome? 

[00:01:13] PUBBLICO: Uh, Maria. 

[00:01:14] DAVID J. MALAN: Maria, piacere di vederti. Vieni qui. Permettetemi di presentarvi a Colton. Colton, questo è Maria. 

[00:01:21] COLTON: Ciao, piacere di conoscerti. 

[00:01:23] DAVID J. MALAN: Tutti a destra, così passo uno, siamo andando a mettere questo al vostro avambraccio in modo che sia abbastanza stretta su vicino il gomito. E nel frattempo, diamo mettere sul nostro Google Glass e ci mescoleremo tecnologie oggi. 

[00:01:33] COLTON: In primo luogo dovremo agganciare questo nelle cose. 

[00:01:36] DAVID J. MALAN: OK. In realtà, mettiamo il braccio come vicino a questo cavo possibile in modo da poter prima sincronizzazione in su. 

[00:01:41] COLTON: Cerchiamo di fare questo. 

[00:01:42] DAVID J. MALAN: E nel frattempo, in modo da che tutti possono ottenere uno sguardo più da vicino, ci lanciamo macchina fotografica di Andrew sullo schermo lì. Quindi abbiamo un cavo USB che è di essere inserito nella fascia di Maria. E mi permetta di buttare schermo di Colton sul successivo proiettore. 

[00:02:00] Così Colton sta registrando il dispositivo Ora come Myo collegato a questo cavo. E ora che Maria di intenzione di fare momentaneamente è in realtà a piedi attraverso la procedura di calibrazione e insegnare il software come i suoi muscoli rispondono quando accertarsi predefinito gesti che il software capisce. Se vuoi andare a fronte allo schermo. OK, continuare a provare. 

[00:02:30] COLTON: Vai così. E in quel modo. E completamente verso destra. Torna indietro. 

[00:02:35] DAVID J. MALAN: OK. Prospettiva diversa. Non sei tu. Siamo noi. 

[00:02:40] MARIA: OK. DAVID J. MALAN: No. Andiamo più in alto in modo che sia più vicino al gomito, o ancora più stretto. Bene. 

[00:02:52] Eccoci qui. Questo sarebbe un buon momento per CS52X. Ci andiamo. 

[00:02:57] Molto bello. Ok. Pollice a Pinky. 

[00:03:02] Molto bello. Stendere le dita. Buona. Onda giusta. E 'curioso che mostra con il mano-- sinistro 

[00:03:17] COLTON: Sì, questo è strano. DAVID J. MALAN: Wave la destra e andare avanti. Avanti veloce per saltare o successiva. Questo è OK Wave destra. 

[00:03:25] MARIA: Io don't-- aspettare. 

[00:03:26] DAVID J. MALAN: Hai bisogno di aiuto? 

[00:03:28] COLTON: Così si sta andando in questo modo. MARIA: Sta girando il altra cosa, però. COLTON: E '. DAVID J. MALAN: Sì, non lo so il motivo per cui si sta mostrando un leftie. COLTON: Perché non try-- basta provare ad andare in questo modo. 

[00:03:38] DAVID J. MALAN: No? Raggiungere Forse il braccio un po 'più dritto e rendere più brusco simili. Sì, OK, andiamo. 

[00:03:48] MARIA: Mi dispiace. DAVID J. MALAN: Non è colpa tua. COLTON: Va bene. DAVID J. MALAN: Va bene. Well-- 

[00:03:56] MARIA: Dovremmo ignorare questo, allora? DAVID J. MALAN: Sì, facciamo si lascia fuori dai guai. Quindi, se qualcuno volesse fare un progetto definitivo di utilizzare questo filo di lama hardware, realizzarlo potrebbe solo prendere un po 'per abituarsi. Questa poi la realtà è questa è in realtà molto bleeding edge. 

[00:04:10] Questo è ciò che si chiama il kit di sviluppo, che vuole essere essenzialmente una pre-release in modo che le persone possono fare esattamente Questa poi combattere con essa, la figura come corpi delle persone lavorano con la tecnologia. Quindi, se volete in seguito, dopo la lezione, siamo in grado di farvi venire a fare un altro tentativo. Ma per il resto, un applauso, se Potremmo, per Maria per venire in su. 

[00:04:26] MARIA: Grazie. 

[00:04:28] DAVID J. MALAN: Grazie. Ci aggrappiamo a questo, ma daremo you-- come su una palla antistress qui? Oh, e- if-- sì, grazie. Bene. Così, per i curiosi, se tu fossi familiarità con la scelta del suono che abbiamo fatto lì in precedenza, di una TV straordinaria dimostrare che si deve assolutamente essere-binge guardare su Netflix è questo qui. 

[00:04:51] SPEAKER 1: Signore e signori, un mago di nome Josh. 

[00:05:04] DAVID J. MALAN: E a quanto pare, è una cosa per me testo durante la lezione ora. Mi viene detto che Maria ha avuto un compleanno ieri. Quindi, buon compleanno da CS50 di Maria pure. 

[00:05:18] Così si può aver letto nel recente mese che questo signori qui, Steve Ballmer, che in realtà era Classe del 1977 nel collegio, da poco in pensione per Microsoft. Era uno studente qui, poi un paio di anni più tardi si è trovato a Stanford Business School quando ha ricevuto un telefono chiamare da un suo amico che aveva vissuto in fondo al corridoio da lui qui a Harvard. Il nome di quell'amico era Bill Cancelli, e, al momento, stava cercando di reclutare Steve per essere il primo uomo d'affari, in realtà, in una piccola azienda il nome di Microsoft. 

[00:05:45] Una breve storia lunga, Steve infine è stato conquistato, unito Microsoft quando aveva solo 30 dipendenti. E dal momento che in pensione a poco tempo fa, l'azienda ha 100.000 dipendenti negli ultimi anni. E così un sito web conosciuto come The Verge preparato questo omaggio in video che abbiamo pensato di condivisa che si dà un senso di quanta energia Steve porta a qualsiasi presentazione dà. [RIPRODUZIONE VIDEO] -Microsoft È come un quarto figlio. I bambini fanno uscire di casa. In questo caso, credo che Lascio la casa. Ehi Bill, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] -Ehi, Wazzap? Ci è stata data una enormi opportunità. E Bill ci ha dato questa opportunità. Voglio ringraziare Bill per questo. Voglio che tu troppo. Il ritmo dell'innovazione non ha intenzione di rallentare. 

[00:06:42] E 'intenzione di ottenere più velocemente e più velocemente. Ci potrebbe essere un paio di concorrenti che sono purtroppo eliminati! 

[00:06:54] Io amo questa azienda. Sì! Io sono un PC, e mi piace questa azienda! 

[00:07:08] Gli sviluppatori, sviluppatori, sviluppatori, sviluppatori, sviluppatori, sviluppatori, sviluppatori, sviluppatori. Sì! Gli sviluppatori Web! 

[00:07:19] Gli sviluppatori Web! Gli sviluppatori Web! Ascolta quello che altro si ottenere senza alcun costo aggiuntivo! 

[00:07:28] L'esecutivo di MS-DOS, un appuntamento calendario, un mazzo di carte, un blocco note, un orologio, un pannello di controllo. E, ci credi? Reversie! 

[00:07:35] Masterizzarli su CD! Pubblicarli su MSN! Li mail ad un amico! 

[00:07:40] Tutto con un solo clic! One Microsoft, una strategia, un team-- concentrato, disciplinato, professionale, ed esperto in tutto ciò che facciamo. Permettetemi di usare una linea da un vecchio film. 

[00:07:52] Le relazioni sono come gli squali. Si muovono in avanti o muoiono. Io in realtà penso tecnologia aziende sono uguali. 

[00:08:01] [FINE RIPRODUZIONE VIDEO] DAVID J. MALAN: quindi siamo molto contenti di annunciare che Steve si unirà a noi qui in CS50 Mercoledì prossimo a il solito posto e il tempo qui. Lo spazio sarà probabilmente limitata. E così di unirsi a noi in persona, si prega di testa oggi o poco dopo a cs50.harvard.edu/register. 

[00:08:22] E noi seguiremo da Martedì conferma macchie. Attendo con ansia che il prossimo Mercoledì durante la lezione in CS50. Ora, in altre notizie, mi è capitato di incontrato questo in The Crimson solo l'altro giorno. 

[00:08:34] Si scopre che uno dello staff di CS50 e almeno uno degli studenti di CS50 è attualmente in corsa per UC presidente e vice presidente, che mi ha portato indietro ai miei giorni indietro quando ho perso le elezioni UC miseramente. Ma il lato positivo in questo è sempre raccontare la storia è che uno dei più sono sicuro molte ragioni per cui ho perso la elezione è stata una mancanza completa di un talento per parlare in pubblico. E così in tutta onestà, che mi ha spinto, che l'esperienza Penso che il mio primo anno, a firmare in realtà per Harvard Computer Society, che è il gruppo nel campus che detiene vari colloqui tecnici e altre cose. E ho assunto il loro insegnamento seminari e quindi, avuto la possibilità, una meravigliosa opportunità, per iniziare a lavorare proprio su questo. Ma anche, ho avuto l'opportunità durante questa esperienza per insegnare a me stesso tanto più HTML. E così ho procrastinato la scorsa notte da guardando attraverso il sito web basato su HTML Ho fatto come nel 1997, '98, per la mia campagna che assomiglia a questo qui. Lo so. 

[00:09:29] Perchè-- e, naturalmente, avviso questa decisione di progettazione incredibile nel 1998 o roba del genere. La prima cosa che si desidera che gli utenti di fare nel visitare il tuo sito è quello di avere a cliccare un altro link solo per inserire il tuo sito qui con il monaco dietro come una tenda avvolta in cui a quanto pare la mia piattaforma di campagna era. E questo è tutto quello che otterrete oggi è solo uno screenshot. Ma stavo leggendo, come, i miei manifesti elettorali di ieri sera e la mia piattaforma. 

[00:09:50] E io ero così arrabbiato al momento. La mia piattaforma era-- è stato interessante. Così mi sono calmata da allora. Ma un giorno, correrò di nuovo e speriamo meglio questa volta. 

[00:10:03] Così HTML, che il linguaggio in cui ho fatto che dentro-- Presto rendono molto more-- è qualcosa che siamo stati parlando di ritardo e in gran parte dando per scontato ora che ci siamo spostati ad altre lingue. Ma facciamo una pausa per un momento e mettere un po 'di queste cose in un contesto. Quindi, in una frase, che cosa è l'HTML? 

[00:10:18] Oppure, ciò che viene utilizzato per? Chiunque? Sì. 

[00:10:20] PUBBLICO: Markup per i siti web. DAVID J. MALAN: Markup per il sito web. Quindi è un linguaggio di markup che consente di strutturare una pagina web. Intestazione sale qui, titolo va qui, il corpo va qui. Questo è grassetto, questo è italics-- quel tipo di dettagli. 

[00:10:33] OK, bene. Così CSS consente you-- e io ha preso qualche libertà ci con il grassetto, corsivo e rivestimento in quanto che è meglio implementato con questo. CSS è-- cosa? Dire in una frase. Chiunque a tutti. Sì. 

[00:10:46] Pubblico: abbellimenti e roba, come il modo di progettare. DAVID J. MALAN: OK, bene. Abbellimenti che consentono per la progettazione o stilizzare esso con cose come grassetto e corsivo e colori e anche più fine posizionamento grani di elementi. E 'sorta di permette di prendere le cose ultimo miglio modo che se, per esempio, in Pset7, potreste aver notato sul vostro Pagina Portfolio se siete a questo punto già che una tabella di default che si fare per mostrare partecipazioni azionarie dell'utente e contanti probabilmente sembra piuttosto orribile Per impostazione predefinita, senza spazi. Tipo di Tutto di piena zeppa insieme in righe e colonne. 

[00:11:18] Beh, con un po 'di CSS, come si può capire, si può effettivamente modificare questo e renderlo qualcosa di molto più familiare e molto più bello da guardare. Così CSS è di circa il stilizzazione di siti web. Ma poi abbiamo introdotto un altro il linguaggio, PHP, che ci permette di fare quello che? 

[00:11:36] Diciamo solo che cosa fare? Chiunque. Avuto modo di avventurarsi al di là i primi due righe. Sì. 

[00:11:40] PUBBLICO: Generare contenuti dinamici. DAVID J. MALAN: Perfect. Generare contenuti dinamici. E si può farlo in qualsiasi numero di lingue. Ci capita di usare PHP perché è in parte, in modo simile alla sintassi C. 

[00:11:50] Ma PHP fa esattamente questo. Esso consente di generare in modo dinamico in uscita. E alcuni di che la produzione potrebbe essere HTML, come abbiamo fatto in genere. Ed è anche, perché è un linguaggio di programmazione, è il meccanismo attraverso il quale possiamo parlare di basi di dati. 

[00:12:03] E possiamo fare le query al altri server come yahoo e programmaticamente fare nulla davvero che si potrebbe altrimenti vuole costringere un computer per fare. Così PHP ci permette di iniziare l'output di contenuti generati dinamicamente. Così da questa logica, non ho avuto un sito web dinamico nel 1998. 

[00:12:16] Era solo una pagina web statica. Il mio contenuto doveva essere cambiato da manualmente con gedit o qualche equivalente. Ma PHP è quello che abbiamo usato o avrebbe potuto essere utilizzato, piuttosto, per qualcosa di simile al Sito Frosh IM, che avrebbe dovuto prendere le registrazioni e gestire un elenco di cose che users-- sono in realtà commutazione tempo, anche se ci capita utilizzare Perl, un diverso lingua al momento. 

[00:12:35] E poi, infine, abbiamo introdotto SQL-- Structured Query Language. Così ancora un'altra lingua che viene utilizzato per che cosa? Utilizzato per che cosa? Possiamo azzardare slight-- OK, non stiamo andando per arrivare molto più lontano che l'orchestra qui. PUBBLICO: E 'un protocollo utilizzato per parlare con i database. DAVID J. MALAN: Un protocollo utilizzato per parlare con i database. Lasciatemi da ritoccare. Si tratta di un linguaggio naturale utilizzato parlare con databases-- seleziona e inserti ed eliminazioni e aggiornamenti e realtà anche altre caratteristiche che non abbiamo ancora fatto immersioni in ma si consiglia di avere explore-- esplorare per, diciamo, un progetto finale. Quindi ci sono questi vari pezzi. 

[00:13:09] E si spera Pset7, anche se la sua specifica è piuttosto lungo, è volutamente lungo per camminare attraverso come queste cose possono tutti essere digitato insieme. Ora, il Lunedi, abbiamo presentato il nostro ultimo lingua che ci introduce formalmente in il naturalmente-- che è, JavaScript. Questo, come PHP, è un linguaggio interpretato. 

[00:13:25] Ma una distinzione fondamentale Ho proposto il Lunedi è che, mentre PHP è in esecuzione o essere interpretato sul server, che in questo caso è l'apparecchio CS50, o potrebbe essere un po 'di web commerciale server su Internet, JavaScript generale è un linguaggio che viene eseguito lato client non del server side-- così nel browser. Vale a dire, proprio come quando ho aperto su Facebook il codice sorgente ed è risultato tutto di questi file .js, l'implicazione era che quando si visita Facebook o più siti web in questi giorni, si ottiene non solo HTML, non solo CSS, ma un intero gruppo di JavaScript codice spesso sotto forma di file .js. E poi è il browser-- tuo Mac o PC-- che esegue il codice. 

[00:14:03] Ma il tuo browser lo esegue. Si può pensare a una sorta di sandbox. In modo che il codice JavaScript non dovrebbe essere in grado di eliminare i file sul computer. Non dovrebbe essere in grado di inviare e-mail a vostro nome. Il tuo browser tipo di limita cosa si può fare con esso. 

[00:14:17] Quindi, in questo senso, è un po ' meno potente, forse, di C. Ma JavaScript può, come a parte, da utilizzare sul server, se ci tendiamo a non parlare su di esso in questo contesto. Così ora cerchiamo di legare questi insieme. Una settimana più fa, abbiamo presentato alcuni HTML sulla pagina web super-noioso sinistra- sotto. 

[00:14:34] Dice solo ciao mondo. E poi ho proposto sul a destra possiamo tipo di rubare idee dalla nostra discussione di strutture dati in C e pensare a come questo gerarchica linguaggio di marcatura a sinistra potrebbe essere disegnato o attuate in memoria come una struttura ad albero reale con nodi e puntatori e questo tipo di informazioni. Sulla destra, che noi chiamiamo che un documento DOM-- Oggetto modello-- che è solo un modo elegante per dire albero. 

[00:14:56] Ora, perché questo è utile per pensare in questo modo? Perché ora con JavaScript, perché abbiamo codice che arriva a giocare in questo l'ambiente, il codice HTML effettivo che è stato inviato al browser già e ha già stato caricato in memoria dal il browser in un albero nel vostro computer RAM in questo modo, siamo in grado di utilizzare JavaScript effettivamente attraversare o camminare o di ricerca o modificare l'albero DOM però vogliamo. Quindi, in realtà, se si pensa su facebook.com, se si utilizza la funzione di chat, se si uso Gmail e la funzione Gchat, tutto ciò in cui si ha messaggi provenienti ancora e ancora e ancora, quei messaggi sono probabilmente, come, tag LI, modifiche all'elenco delle voci, forse. 

[00:15:35] O forse sono solo div che continuano a comparire ogni volta che si ottiene un messaggio istantaneo. E perché così, cosa significa Facebook o Google sta facendo è ogni volta che si ottiene un messaggio dal server, sono probabilmente utilizzando JavaScript per aggiungere un altro nodo a questo tree-- un altro nodo a questo albero che poi visivamente sembra proprio come una nuova riga di testo sullo schermo. Ma sono l'inserimento di in questa struttura dati. 

[00:15:57] Quindi, in classi come CS124 e altri, ti effettivamente scrivere più codice contro strutture di dati come questo. Ma per ora in JavaScript, ci limiteremo a supporre otteniamo tutte queste funzionalità gratuitamente dal linguaggio stesso. Quindi, diamo un'occhiata a un esempio. 

[00:16:09] Permettetemi di aprire un file chiamato form.html. E 'super semplice. Sembra proprio come questo. 

[00:16:15] No CSS, senza pensare all'estetica. E 'puramente funzionale ea quanto pare sono chiedendo una e-mail, una password, di nuovo la password, e poi un assegno di accettare alcuni termini e condizioni. Quello che il codice sorgente di questo sembra che è probabilmente qualcosa si può immaginare con un po 'di pensiero ora. Ho un tag form qui. 

[00:16:32] L'azione è a quanto pare sta per andare in un file chiamato register.php. Il metodo che ho intenzione di utilizzare è ottenere. E poi ho un testo campo che si chiama e-mail. 

[00:16:40] Ho un campo password il cui nome è password. Ho un altro campo password il cui nome è la conferma un po 'arbitrario. E 'solo un altro parametro HTTP. 

[00:16:49] E poi noi non abbiamo usato questi tranne dal momento che i GI Frosh demo in class-- una casella di controllo che è solo tipo di controllo è uguale a. E io chiamerò tale accordo. Così ho sorta di arbitrario, ma nome convenientemente questi campi. In modo che ora, quando questa forma si presentato, vediamo cosa succede. Se faccio malan@harvard.edu, Farò una password di cremisi. Farò una password di nulla. Cerchiamo di non cooperare. 

[00:17:10] E non selezionare la casella. Permettetemi di fare clic su Registra. E dice, hm, sei iscritto. Non proprio. 

[00:17:16] Ma l'URL è cambiato. Quindi questo modulo è stato chiaramente ammesso a presentare al register.php. Ma presumibilmente, dovrei essere la cattura di alcuni di questi errori. Ora, in Pset7 e alcuni dei nostri esempi di lezione, noi generalmente stampare un grande messaggio di errore rosso qui dicendo: manca il nome, o mancante password. Abbiamo fatto prima e che abbiamo fatto il rilevamento degli errori lato server. 

[00:17:37] Ma molti siti web in questi giorni fare il rilevamento degli errori lato client in cui l'URL non cambia. Tutta la pagina non si aggiorna. È possibile ottenere un feedback immediato dal browser. Forse qualcosa va rosso. 

[00:17:48] Forse si ottiene un pop up. Ma non perdere tempo per l'invio i dati del server che è incompleto. Così vediamo come potremmo il raggiungimento di tale caratteristica pure. 

[00:17:56] Lasciami andare a form1.html, che sembra lo stesso. Ma se questa volta lo faccio malan@harvard.edu e digito cremisi e io non collaboro più ma fare clic su Registra, notare ora. Non è la soluzione più sexy. Ho almeno preso questo errore. E ho usato l'avviso funzione in Javascript-- che stiamo usando solo in classe. In generale, non si dovrebbe usare questo perché può molto rapidamente uscire di controllo. Ma le password non corrispondono è l'errore. 

[00:18:19] Lasciami andare avanti e fare clic su OK. Ma ciò che il takeaway chiave qui è che l'URL non è cambiata. Deperimento Quindi non ho disturbato l'ora del server chiedendogli una domanda che avrei potuto avere capito la risposta a me stesso. 

[00:18:30] E l'utente, pur state parlando di questo più a lungo l'utente del andare a pensare a questo, sta per avere un feedback immediato. Non c'è latenza con la connettività di rete. Quindi diamo un'occhiata a questo codice sorgente. 

[00:18:40] Sguardi form1.html strutturalmente simile qui. La forma è infatti la stessa. Ma vediamo quello che ho fatto qui. E ci sono diversi modi per fare questo. E ho fatto il più dritto seguace ma non modo più elegante ancora. Ho un tag script. Ho poi chiamo document.getElementById ('registrazione'). E devo conservare quel valore nella forma, una variabile. 

[00:19:04] Che cosa ho fatto? Si può pensare di document.getElementById come una funzione speciale che JavaScript fornisce che le mani letteralmente un puntatore a uno dei nodi o rettangoli in questo albero. Quindi, ora che è quello che la nostra variabile forma in JavaScript è in realtà punta a. 

[00:19:21] Così ora la sintassi è diversa da C. Ma noi stanno facendo un paio di cose qui. Si, questo è un po 'strano cercando, di certo contro C. Ma guardate linea 35. Così il form.onsubmit sinistro. Ricordiamo che è onSubmit come un campo in una struct. Se pensate della variabile modulo è solo di essere una struct C, potrebbe avere alcuni campi. 

[00:19:42] Back in the day, abbiamo avuto i nomi degli studenti, ID, case, questo tipo di campi. Basti pensare onsubmit come un altro campo. Ma è un campo speciale, perché il il browser è preprogrammato aspettarsi .onsubmit di non essere un valore come un numero o una stringa, ma per essere effettivamente una funzione o l'indirizzo di una funzione nella memoria del computer. 

[00:20:02] E in effetti, questo è ciò che questa parola chiave qui fa. Questo dice, dammi una nuova funzione. Ma ciò che è il suo nome andando essere, apparentemente? 

[00:20:09] Ripensando a Lunedi. Qual è il nome di questa funzione sulla base di questa sintassi? No, voglio dire, c'è chiaramente nessun nome associated-- certamente non in quello che ho evidenziato qui. 

[00:20:21] Ma che in realtà è OK. Questa è una funzione anonima, o funzione lambda come qualcuno potrebbe chiamarlo. E questo significa solo è ancora una funzione. E 'solo, non si può chiamare per nome. Ma va bene così. Perché ancora, il browser è stata programmato da aziende come Google o Microsoft o Mozilla o altri a è sufficiente sapere che se il campo .onsubmit all'interno di un elemento del modulo ha la valore, lo trattano come un function-- un puntatore a funzione, se si vuole. E lo chiamano quando il modulo viene inviato. 

[00:20:46] Quindi, quale codice deve essere eseguito quando il modulo viene inviato? A quanto pare, tutto all'interno della parentesi graffa. E questo è solo stilistica. 

[00:20:53] Si potrebbe fare questo come si tende a fare in CS50. Ma in JavaScript, la maggior parte delle persone tendono a mantenerlo sulla stessa linea solo perchè è più chiaramente associata a tale funzione parola. Così ora che cosa sto facendo? 

[00:21:03] Se form.email.value uguale uguale la stringa vuota o nulla, ecco un avviso in cui ho intenzione di dire, è necessario fornire il proprio indirizzo e-mail, e poi tornare falso. Ed è che il ritorno falso che impedisce il modulo venga inviato. Nel frattempo, se il valore password è vuoto, ho intenzione di urlare l'utente e dire, è necessario fornire una password. 

[00:21:21] Nel frattempo le cose sono sempre un po 'di fantasia qui. Se non lo fa form.password.value pari form.confirmation.value, l'altro campo, urlare a l'utente che la password non corrispondono in quanto non ha fatto un momento fa. E poi questo è un po 'più sexy perché mi So Sapevo che concettualmente controllato è il nome di una casella di controllo. 

[00:21:40] Quindi posso solo usare un'esclamazione punto di dire se il controllo non è checked-- è il booleano valore, vero o false-- Io urlo contro l'operatore per questo motivo. In caso contrario, se si ottiene attraverso tutte queste condizioni, facciamo solo tornare vero. Lasciate che essere presentato il modulo. E questo poi accadrà. 

[00:21:56] Proviamo quindi a digitare in cremisi. Andiamo a controllare la casella, fare clic su Registra. E ora vado fino alla destinazione. Ora, non c'è nessun database lì. Non c'è niente di interessante in register.php. Ho solo bisogno di qualcosa per parlare effettivamente. Permettetemi quindi di pausa, qui. Tutte le domande su quello che abbiamo appena fatto o quello che alcuni di questa nuova sintassi è? OK, sì? 

[00:22:17] PUBBLICO: Quindi, qualsiasi casella di controllo è automaticamente un valore booleano. Non è necessario dichiarare in quel modo. 

[00:22:21] DAVID J. MALAN: Corretto. Ogni casella di controllo che viene inviato da un modulo HTML per il vostro codice JavaScript saranno trattati, sì, come Booleano value-- vero o falso. E 'una buona domanda. Considerando gli altri valori, di Naturalmente, sono state di testo, stringhe di AKA. 

[00:22:36] Va bene, così mi lascia riavvolgere un po 'oltre. Qual è stato il punto centrale di questo? Giusto per essere chiari. Come, già sappiamo, anche da Pset7 e anche dalla conferenza della scorsa settimana esempi, che siamo in grado di controllare, ovviamente, $ _GET $ _POST Se l'utente ci dia un valore vuoto. Ricordate la funzione di vuoto in PHP. 

[00:22:54] Quindi, tanto per essere chiari, ciò che è uno dei motivi che potrebbe anche voglio fare questo controllo degli errori all'interno del browser? Qual è la motivazione qui? Sì. 

[00:23:06] PUBBLICO: più veloce, e non lo fai inviare i dati inutili al server. DAVID J. MALAN: Good. E 'più veloce. Non inviare inutile dati al server. 

[00:23:12] Così si torna più risposta immediata. E soprattutto, l'utente esperienza è meglio. Pensate l'alternativa. 

[00:23:17] Se per Gmail-- ed è stato il caso molti anni fa. Supponiamo che hai un nuovo messaggio Gmail conto, ma l'unico modo attraverso vedere che è quello, come, ricaricare l'intera pagina. Oppure supponiamo che si fa clic su un link per leggere una e-mail. 

[00:23:29] Tutto deve ricaricare in modo che si può vedere l'e-mail. Oppure Facebook-- si ottiene un messaggio di chat. Non si vede fino a quando si ricarica la pagina o fare clic su qualche link. 

[00:23:36] Come, questo sarebbe un terribilmente l'esperienza degli utenti fastidioso. E questo è ciò che è stato come, chiaramente, indietro quando mi sono imbattuto per UC e il web era molto meno dinamica e JavaScript non era così popolare come è ora. E le cose sono sempre molto più dinamico e più lato client in questo senso. 

[00:23:49] Ma c'è un fermo qui, e questo è una specie di Gotcha fastidioso. Solo perché si aggiunge lato client rilevazione come questo non significa si può o si dovrebbe abbandonare rilevamento lato server. Si vuole in sostanza, mettere il vostro Controllo errori in entrambi i luoghi. Perché quello che è stato uno della lezione appresa dal articolo che ho letto alcuni brani da questo stupido CMS system-- Content Management System-- che era attuare il suo sistema di autenticazione, il suo accesso tramite quale meccanismo? Javascript. 

[00:24:20] PUBBLICO: JavaScript. DAVID J. MALAN: JavaScript, esattamente, giusto? Si stava usando JavaScript. E letteralmente, voi ragazzi avete giocato un po ', probabilmente con l'ispettore di Chrome. E se riesco a trovarlo, ispezionare elemento. 

[00:24:30] Lascia che io vada a fare tutte le opzioni di Chrome. Ed è così che sia facile disattivare JavaScript in un browser. Controllare, non di più JavaScript. 

[00:24:38] Quindi, in tutta onestà, un sacco del web in questi giorni sta solo andando a rompere perché Gmail e altri Sites-- Facebook-- supporre che JavaScript è abilitato. Ma se si sta facendo qualcosa di stupido come solo la convalida dell'input utenti e verifica che non presenti errori sul lato client, un avversario potrebbe facilmente fare questo. E poi ancora più intelligente avversario come voi ragazzi ora potrebbe utilizzare Telnet o Curl o comandi della riga di comando solo ed effettivamente inviare messaggi al server che allo stesso modo non esenti da errori controllati. 

[00:25:05] Quindi questo è più di un decisione interfaccia utente quello che è un vero tecnico improvement-- attuazione lato client qualcosa di simile. Così ora un rapido sguardo, ma poi Mi rimetto alla passeggiata on-line grazie per questo. In forma di due, ci siamo andati attraverso e ripulito il codice un po '. Ma lasciatemi sottomessi gli uni agli dei video faremo probabile Incorpora in Pset8 che mostra solo una sintassi simile utilizzando una libreria chiamata jQuery, che è un super, super biblioteca popolare in JavaScript che francamente la maggior parte delle persone basta usare questi giorni e anche confondere come essere se stessa JavaScript. 

[00:25:37] E tende a coinvolgere qualche segno del dollaro e parole chiave come documento tra parentesi qui. Ma ancora una volta, lasciate che rimetto a alcuni tutorial più lenti on-line piuttosto che ottenere legato in un solo sintassi. Passiamo a qualcosa di un po 'più fresco in termini di applicazioni di questo. 

[00:25:50] Quindi, in particolare, lasciarmi andare avanti e di aprire questo qui. Dai. Ci andiamo. 

[00:25:59] Lasciate che apro questa immagine qui. Inutilmente complicato cercando, ma descrive una tecnica chiamata AJAX-- Asynchronous JavaScript and XML, dove la X per XML è in realtà non è più realmente utilizzato. Esso tende a usare qualcosa altro chiamato JSON. 

[00:26:13] Ma ecco come qualcosa di simile Google Maps o Google Earth funziona. Proviamo questo al volo, in realtà. Lasciami andare avanti e aprire up Chrome con il mio browser. 

[00:26:21] E mi permetta di andare in, dire, maps.google.com. E in realtà, se sei vecchio Basti ricordare ciò che, come, MapQuest era come back in the day, e forse si lavora ancora in questo modo. Quando si è utilizzato per la ricerca di something-- 33 Oxford Street, Cambridge, Mass, facciamo questo-- voi sarebbe in realtà, se si voluto panoramica verso l'alto e verso il basso, a sinistra ea destra, si dovrebbe guardare come un grande freccia in alto, e avrebbe mostrato un altro telaio della mappa qui. Oppure si dovrebbe aver fatto clic a sinistra e sarebbe andato qui, o un altro clic e si dovrebbe andare qui. Ma invece questi giorni, abbiamo naturalmente solo dare per scontato che possiamo andare intorno Cambridge abbastanza rapidamente semplicemente facendo clic e trascinando. Ma bando ci sono alcuni difetti. 

[00:26:59] Se faccio questo abbastanza veloce, ciò che sembra accadere come mi trascino un po 'troppo veloce per il computer per tenere il passo? Che cosa vedi? Sì. 

[00:27:07] PUBBLICO: I pixel non si aggiornano. DAVID J. MALAN: Il i pixel non si aggiornano. C'è actually-- e poteva vedere questo, in realtà, se stai guardando on-line e di pausa questo o in realtà rallenta le cose per once-- vedrai che ci sono piastrelle, quadrati o rettangoli che mancano dalla mappa fino una frazione di secondo più tardi, più dati, altre immagini in realtà appare sullo schermo. E infatti, se lo facciamo, cercando up Chrome's-- diciamo, Chrome-- vediamo. Non possiamo farlo. 

[00:27:31] Oh, urla. Apriamo su maps.google.com. Permettetemi di fare la finestra più grande di nuovo. 

[00:27:36] Torna 33 Oxford Street. Qual è stato il sito ero su di recente? Ho avuto questo, come, rant privato a me stesso che avevo messaggio poi immediato ogni amico che era in linea che voleva sentire. C'è qualche sito. Penso che sia così Comcast-- un grande ISP americano. È possibile, al momento della firma per il nuovo cavo servizio di modem o di un servizio di TV via cavo, hanno una forma molto ragionevolmente dove ti chiedono per il vostro indirizzo. E avere questo incredibile funzione chiamata completamento automatico, come Google, che inizia a riempire in risposta alla tua domanda. 

[00:28:04] Il problema è, che fanno di completamento automatico sulle prime cose che vengono digitate. Quindi, se si inizia a digitare nel 33 esso, vi mostrerà letteralmente ogni casa in America che inizia con il numero 33 prima di continuare a aspetta di digitare più. Quindi, se si digita 33 Oxford, allora vi mostra tutte le strade in America, che ha 33 Oxford in il suo nome, indipendentemente città che sei in. 

[00:28:25] E poi si continua a digitare. Infine, si rende conto che non lo fanno offerta di servizi per la vostra casa a Cambridge o qualcosa del genere. Ma il punto è, questo è il più implementazione asinine di auto completare mai. 

[00:28:34] E sto solo andando fuori su questa tangente nuovo. Ma ci sono buoni modi per utilizzare JavaScript e le cattive maniere. E questo non è necessariamente il migliore. 

[00:28:40] Ma il punto qui, prima di questa tirata, è stato quello di aprire gli strumenti qui e di aprire gli strumenti di sviluppo, come abbiamo incoraggiato prima, e per vedere il Network scheda come clicco veramente veloce. E notare un sacco di ottenere le richieste accaduto. Tutto questo è successo da quando ho trascinato. 

[00:28:57] E molto probabilmente, anzi molte di queste righe ora sono immagine barra JPEG Tipi MIME o tipi di contenuto. Questo perché ciò che sta facendo cromo ogni volta che fare clic e trascinare, fare clic su e trascinare, è la sua realizzazione, oh, io bisogno di andare chiedere a Google per la tessera sulla mappa che è qui, scaricare velocemente tramite HTTP, e poi aggiungerlo alla cosiddetta DOM per i browser web in albero della memoria rappresentazione in modo che l'utente, me, vede che tegola aggiornato. E questo è dovuto al fatto di una tecnica chiamata AJAX. Back in the day, davvero era il caso che se si voluto cambiare ciò che è sullo schermo, si dovrà fare clic su, giù, sinistra, destra. E poi una nuova pagina si aprirà. Ma in questi giorni, tutto è più dinamico. Succede nel modo in cui noi esseri umani sarebbe spero che in realtà avrebbe fatto in modo interattivo. E si ottiene questo modo di una tecnica chiamata AJAX, che è forse meglio spiegato con un esempio. In primo luogo, mi permetta di andare avanti e di aprire un file chiamato quote.php in codice di distribuzione di oggi. 

[00:29:53] E poi lascia fare a me urla symbol--. Lasciami fare simbolo = GOOG per il solo brodo. O in realtà, facciamo la uno dal Pset GRATIS. Invio. 

[00:30:05] E ora accorgo che cosa torno. Quindi questo è davvero un file PHP breve che ho ha scritto che prende in prestito semplicemente il codice dalla funzione di ricerca di Pset7 e sputa fuori con questa parentesi graffa e citazioni e la notazione due punti, a quanto pare, prezzo del titolo corrente per il società che si passa in via get. Quindi questo è diverso dalla maggior parte di ciò che abbiamo fatto in tale comunicazione sono letteralmente sputare quella che appare come codice JavaScript. 

[00:30:27] In realtà, questo è un oggetto JavaScript. Infatti, proprio per essere più chiari, JavaScript Object Notation-- JSON-- è solo un modo elegante per dire che si in grado di rappresentare i dati in JavaScript molto come è possibile in PHP utilizzando coppie di valori chiave. Quindi, se ho voluto dichiarare una variabile in JavaScript a rappresenta Zamyla, per instance-- una struct per Zamyla-- e che chiameremo studente, questa variabile. Il suo ID è uno, la casa dista Winthrop, e il nome è Zamyla. 

[00:30:53] Ma posso anche avere un array di oggetti. Quindi, se ho davvero voluto avere un array in JavaScript che contiene più oggetti, questo tempo di rappresentanza dei lavoratori, Potrei avere questi tre pezzi di codice Indietro to back to back per queste tre ex membri del personale. Così la sintassi, piuttosto simile a both-- a PHP. Ma questo è particolarmente JavaScript. E 'Object Notation. Così che cosa è utile per questo? 

[00:31:17] Se scrivo il codice che sputa fuori JSON-- JavaScript Object Notation-- roba che sembra che questo o roba che si presenta come la struttura di Zamyla, Posso effettivamente usare questo nei programmi scrivo. Lasciami andare a ajax0.html. E questo too-- non molto pensiero data all'estetica. Ma guarda cosa succede. 

[00:31:34] Lasciami andare avanti e inserite gratuitamente da qui. Fare clic su Preventivo. E si noti l'URL non è cambiata. Ma ho avuto un pop-up con a quanto pare centesimo prezzo delle azioni di oggi di 0,15 dollari. Quindi non è affatto male. Ma la differenza è che in qualche modo, questo dato è tornato a me direttamente. Ma facciamo un passo verso qualcosa di più familiare. Nella versione uno di questo, mi permetta tipo libero di nuovo, fare clic su Preventivo, e now-- oh, questo è stato in realtà la versione jQuery. Quindi cerchiamo me-- non l'ho fatto fast-forward abbastanza lontano. Lasciami andare alla versione a due, che è dove volevo. Notate quello che ho fatto qui. Ho un web page-- un super versione semplice di qualsiasi pagina web è possibile utilizzare oggi con un campo di testo qui gratuitamente e poi a quanto pare solo testo. 

[00:32:14] Questo non è un form, apparentemente. Ma se clicco ottengo preventivo, notare la mia pagina web è destinato a cambiare, come se io appena ricevuto un nuovo messaggio istantaneo o come se ho appena spostato il mappa e necessario per ottenere più dati aggiunto dinamicamente alla pagina web senza cambiare URL e l'utente esperienza sempre interrotta. Anzi, io sono ancora in esattamente lo stesso ajax2.html posto--. 

[00:32:35] Quindi cerchiamo di guardare solo a questo esempio e vedere come questo sta accadendo. Lasciami andare in ajax2.html. E notare la forma prima. 

[00:32:44] Quaggiù, sto girando via di completamento automatico. A volte si arriva fastidioso se il browser sta cercando di mostrare tutta la vostra storia. Così si può fare in HTML solo dicendo completamento automatico off. 

[00:32:53] Ho dato questo campo di testo un symbol-- piuttosto, un ID di simbolo. E ora, questa è una caratteristica interessante. Non abbiamo parlato di arco, ma si può pensare a questo proposito come un tag di paragrafo o tag div. E 'quello che si chiama un in linea elemento, significa che non sarà possibile ottenere un paragrafo rompere al di sopra e al di sotto di esso. E 'solo andando a stare in linea, senza colpire l'equivalente di entrare. Così ho dato questo pezzo di HTML da determinare un identificatore univoco che ho arbitrariamente chiamato prezzo. E ho un pulsante Invia. 

[00:33:21] Perché ora fino qui-- e questo è in realtà super-sorprendente quanto poco codice è possibile scrivere a fare relativamente pulito things-- notare quello che ho fatto qui, se io scorrere fino alla testa di questa pagina. Ho incluso la prima volta nel la mia testa un tag script che in realtà fa riferimento a un JavaScript file altrove. Questo è dall'organizzazione che scrive jQuery, e questo è solo dare le ultime versione del loro libreria jQuery. 

[00:33:42] Quindi questo è un po 'come forte includere in C o richiedere in PHP. Si utilizza il tag script con un attributo di origine. Ma ora il mio codice è sta per essere proprio qui. 

[00:33:52] Avviso Ho una funzione chiamata Quotes. E sembra un po ' criptico a prima vista. Ma facciamo prendere in giro questa parte. Dammi un URL variabile chiamata. Assegnare alla lettera questa stringa. Così, apici singoli, doppi apici in JavaScript mi ​​dà solo una stringa. Che cosa fa il più fare? Concatenazione. 

[00:34:08] Quindi questa è ora la sintassi jQuery che prende un po 'per abituarsi. Ma questo significa solo andare a prendermi il DOM nodo il cui identificatore univoco è simbolo. L'hashtag non significa simbolo identificativo univoco. 

[00:34:21] Il simbolo del dollaro in Parentesi solo significare, avvolgere questo jQuery in una sorta di salsa segreta così si ottiene funzionalità aggiuntive. E poi .VAL è apparentemente una funzione, o come si dice oggi, un metodo all'interno di questo nodo che ti dà solo il valore. Così, in breve, brutto e confuso come questo appare a prima vista, questo significa solo ottenere con l'utente ha digitato in, messo alla fine della stringa concatenando esso. Questo è tutto. 

[00:34:43] Così ora, ultime tre righe. Si può spremere un sacco di funzionalità su tre linee. Questo simbolo del dollaro, come a parte, è solo un soprannome per una speciale variabile globale chiamata letteralmente jQuery. 

[00:34:55] Segno del dollaro solo sembra freddo. Così la comunità jQuery solo tipo di usato come loro simbolo speciale. Ciò non significa che cosa significa in PHP. In JavaScript, è il simbolo del dollaro proprio come una lettera dell'alfabeto o un numero per una variabile. 

[00:35:07] Si può solo avere come nome. Basta sembra freddo. Così la comunità adottato come nickname per la propria libreria chiamata jQuery. 

[00:35:13] Ed è super popolare. Quindi, ottenere JSON è esattamente questo. Si tratta di una funzione che il gente di jQuery ha scritto che ottiene JSON da un server-- JavaScript Object Notation. Da quanto URL sta andando per ottenere queste informazioni? A quanto pare da questo URL qui. 

[00:35:27] E cosa dovrebbe fare come il browser appena torna questa risposta? E questa è la magia di AJAX, in modo da speak-- Asynchronous JavaScript XML. E 'difficile vedere con tale semplice esempio come abbiamo avuto qui. 

[00:35:41] Ma questo era asincrono in il senso che il mio codice quando eseguito inviato un messaggio al server per andare a prendermi un po 'di JSON. Ed è successo super veloce che ho ricevuto una risposta. Ma ciò che è interessante è che questo riga di codice non appendere il mio computer. 

[00:35:55] Non ho visto l'icona di filatura. Non ho perso il capacità di muovere il mouse. Il mio browser era in realtà perfettamente bene. 

[00:36:01] Perché il modo in cui gestisce il Javascript risposta dal server è il seguente. Si registra quello che si dice una funzione di callback, che significa semplicemente, hey, JavaScript. Non appena il server risponde con JSON, si prega di chiamare questa funzione anonima. 

[00:36:18] E per favore passate in questa funzione qualunque stringa il server sputare come un argomento chiamato dati. Quindi, in altre parole, se Sto assemblando in modo dinamico quote.php un URL che passa in questo simbolo come LIBERO o GOOG o roba del genere, Sto quindi dicendo JavaScript andare a prendere tale URL. Ricordate che il browser sta per restituire qualcosa che si presenta come abbiamo visto earlier-- questo. 

[00:36:42] E che il secondo argomento qui per ottenere JSON sta dicendo è chiamare questa funzione quando il server torna che si tratti di 10 millisecondi d'ora o 10 secondi da adesso. E non appena si fa, aggiungere il prezzo alla pagina. Questa sintassi qui solo significa andare a prendere il nodo da un albero il cui unico identificatore è prezzo-- quel periodo abbiamo visto in precedenza. 

[00:37:01] Questo metodo chiamato HTML dice solo, andare sostituire il codice HTML che è lì con data.price. Cos'è data.price? Beh, il browser, ricordare, mi ha fatto vedere questo ritorno. Quindi si tratta di dati. 

[00:37:14] E quindi è un po 'criptico per vedere le virgole qui. Ma in realtà, mi permetta di fare questo. Vorrei solo incolla questo veloce reale in gedit e mostrargli il come abbiamo dimostrato La struttura di Zamyla in precedenza. 

[00:37:27] Quello che il server invia indietro è un piccolo oggetto che assomiglia a questo. E così è data.price appena mi dà 0,1515. Così un sacco di movimento parti qui tutto in una volta. 

[00:37:39] Ma i punti salienti è che noi abbiamo questa capacità per rendere HTTP aggiuntiva richieste utilizzando JavaScript senza dover ricaricare la pagina. E allora possiamo davvero cambiare la pagina web al volo. E si scopre che JavaScript e altri linguaggi può essere utilizzato ora non solo di mutare le pagine web, ma di scrivere in realtà software in un computer vero, non solo confinato Chrome o simili. 

[00:38:00] In realtà, if-- Colton, vuoi unirvi a noi di nuovo qui con il codice di laboratorio, e Chang così? Andiamo avanti, dopo aver parlato funzioni anonime e di callback e davvero tentare la sorte qui con una demo live con sanguinamento tecnologia, uno dei questi dispositivi Elite di movimento. Ora, questo dispositivo, richiamo, è un piccolo dispositivo USB nonché che-- che è beautiful-- che si collega al tuo porte USB. 

[00:38:25] E poi fornisce l'input in forma di gesti umani rilevando utilizzando raggi infrarossi, in sostanza, i movimenti del tuo braccio. Quindi, mentre ciò che Maria ha provato sulla prima era muscoloso, in realtà sentire che cosa sta cambiando il braccio, questo è basato infrarossi. Quindi è alla ricerca di movimenti all'interno il tipo di sfera di un piede o così del dispositivo stesso. 

[00:38:46] Allora, perché non devo prendere una pugnalata a questa prima? E andiamo avanti e gettare si sulla testa qui. Quindi cerchiamo di mettere il portatile di Colton qui. Abbiamo Andrew sul televisore. E cosa vuoi che io faccia per primo? 

[00:39:00] COLTON: Vai avanti e basta mettere le mani su questo tipo e vedrete un po 'favoloso glitter. 

[00:39:04] DAVID J. MALAN: Very nice. Questo è tutto accade in tempo reale. Ok. Va bene, e sì. Così bello. Va bene, che altro possiamo fare? 

[00:39:15] COLTON: Vai alla schermata successiva e vedere. 

[00:39:17] DAVID J. MALAN: Va bene. 

[00:39:19] COLTON: Un divertente piccolo gioco dove si arriva a fare i robot. 

[00:39:21] DAVID J. MALAN: Va bene, quindi questo è mani finte che mostrano cosa fare. COLTON: Sì Quindi, andare avanti e afferrare uno dei blocchi e metterlo in cima a corpo del robot. DAVID J. MALAN: Oh, c'è la mia mano. Oh. OK, adorabile. Aspetta un minuto, OK. Ci andiamo. 

[00:39:41] COLTON: ho fatto uno su incidente. 

[00:39:43] DAVID J. MALAN: OK, vado a prendere questo ragazzo. Accidenti! Quando stavamo praticando questo ultimo la notte, si sa che cosa questo devoluto in? 

[00:39:51] Come questo. Ok. Il prossimo? 

[00:39:55] COLTON: Certo. 

[00:39:56] DAVID J. MALAN: Va bene, e c'è un terzo. Bene. COLTON: E in questo, si ottiene a-- DAVID J. MALAN: Oh, di bello questo. COLTON: --yeah, prendere a parte questo fiore. DAVID J. MALAN: OK. No? Perse. 

[00:40:14] COLTON: Oh, ci si va. 

[00:40:15] DAVID J. MALAN: Ah, guarda che. Molto bello. Beh, perchè non 'prendiamo fuori un volontario qui che vorrebbe venire in su. Che ne dite di destra nel verde, è vero? 

[00:40:27] Va bene, e cerchiamo di have-- invece di fare questo, alcuni di voi potrebbe sapere questo gioco qui-- tagliare la corda, forse? Vediamo. Abbiamo i nostri bicchieri su qui? 

[00:40:37] Ok. Grazie. Come ti chiami? 

[00:40:39] PUBBLICO: Laura. 

[00:40:40] DAVID J. MALAN: Laura? Bello da vedere. Se non ti dispiace mettere Google Glass su occhiali. Si tratta di Colton. 

[00:40:46] COLTON: Ciao. Piacere di conoscerti. 

[00:40:48] DAVID J. MALAN: OK, andiamo in giro. Va bene, allora che cosa si sta andando a fare qui, dopo aver giocato questo prima, è mettere la mano sul il Leap Motion qui. E ora la freccia dovrebbe muoversi. Oh, no. 

[00:40:57] PUBBLICO: No. 

[00:40:58] DAVID J. MALAN: Noi non vogliono uscire ancora. OK, attendere. Da questa parte. Così notare come tenete il vostro dito su qualcosa, il mouse inizia ad andare verde, che è come si fa clic su. 

[00:41:06] Così passa il mouse sopra Play. E un solo dito va bene. E ora cliccate sulla piccola tizio verde sulla sinistra. E ora tenere premuto fino a quando si riempie verde. Buona. Ora, come, livello uno sulla parte superiore. 

[00:41:16] PUBBLICO: Sì, vogliamo livello uno, qui. 

[00:41:20] DAVID J. MALAN: Good. OK, quindi tutto quello che dovete fare è tagliare la corda. Il cursore è quella bianca laggiù. 

[00:41:28] Molto bello. D'accordo, si tratta di ottenere di più. Quindi, tenere premuto il dito nei prossimi ora. Buona. Questo è difficile. 

[00:41:39] PUBBLICO: Oh merda. Ok. Vuole andare in quel modo. Oh merda, che-- 

[00:41:44] DAVID J. MALAN: Sì. Obiettivo secondario è quello di ottenere tutte le stelle. Va bene, la prossima. 

[00:41:53] Vediamo se è possibile ottenere questo terzo. Buona. OK, andare laggiù. 

[00:42:06] Certo. Oh, molto bello. Bene. 

[00:42:11] Allora perché non aggiornare qui oggi? Lasciato a nessuno su un massimo che vuole giocare. Grazie mille a Laura nostro volontario. E ci vedremo il Lunedi. 

[00:42:18] PUBBLICO: Probabilmente si desidera queste indietro. 

[00:42:21] SPEAKER 2: Alla prossima CS50--