[RIPRODUZIONE DI BRANI MUSICALI] 

DAVID MALAN: Questo è CS50. Questo è l'inizio di settimana nove. E questo è ciò che avrebbe stato 200 ° compleanno del signor Boole. Quindi questo è borsisti a cui abbiamo accennato noi piuttosto alcune volte sull'utilizzo Variabili booleane vero e falso, 1 e 0 e tale. E questo è stato Google Omaggio a lui oggi. Egli avrebbe compiuto 200. Quindi, se si desidera unirsi a noi per CS50 pranzo, date un'occhiata al link sul sito web del corso. E tali volti e amici come questi vi aspettano qui a Cambridge. Volti come questi vi attendono a New Haven. E, infatti, in Ken New Haven ha fatto gentilmente quello che è chiamato una GIF animata di Eli qui in una recente lunch-- un GIF è ancora un altro formato di file grafico, con la quale si è familiar-- che sembra un po 'qualcosa di simile. Quindi, solo una sequenza di-- OK. Nessuno qui a Cambridge sta ridendo. Ma a New Haven, questo è davvero divertente, giusto? Tutto ok. 

Quindi noi unirsi lì. Qui ad Harvard, in particolare, questo Mercoledì, se sei un sophomore o matricola even-- o anche pensiero junior-- del processo un interruttore nel calcolatore scienza, sapere che ci sarò essere un CS raccomandando giusto questo Mercoledì, poco dopo le lezioni alle 04:00 nel computer edificio scienza Maxwell Dworkin. Metteremo questo sul corso del sito web entro domani, pure. Donuts, mi è stato detto, sarà servito. 

Tutto ok. Così divertente tutta-- stavo colpendo in giro su internet, e ho trovato alcuni vecchi archivi di mio ex sito web. E si scopre fuori-- intorno a questo tempo, sembra di grande attualità da quando ho capito che le elezioni UC stanno per attrezzarsi di nuovo. Così mi sono imbattuto per UC, perso miseramente. E forse questo è stato in parte perché. Quindi questo è stato il mio sito al momento. Per qualche ragione, ho pensato che fosse una buona idea, prima di dire alla gente quello che la mia piattaforma era e perché dovrebbe votare per me, che hanno di fare clic per entrare per scoprire che informazioni, che a posteriori è tipo di raccapricciante. Io non so davvero cosa fosse. 

Ma di certo non ha fatto aiutare la mia campagna. Ho anche scoperto che dal senior anno di successo che ho avuto questo calendario Muppet. Muppets erano sorta di in voga allora. O forse non lo erano. Ho avuto un calendario Muppet allora. E ho pensato che sarebbe stato bello nome il mio computer sulla rete di Harvard frogman.student.harvard.edu. Al momento, tutti abbiamo avuto modo univoco nomi host identificabili. E si può scegliere qualche vanità il nome al posto del tuo nome. E sono andato con sommozzatore per qualche motivo. 

E poi ho started-- ho speso un sacco di tempo facendo clic attraverso questi link questa mattina. E questa è stata la mia pagina su, che ora tipo di sembra adorabile. Ma testimonia anche solo quanto la tecnologia è arrivata. Voglio dire, di nuovo nel corso della giornata, una 486 era qualcosa. In questi giorni, è super, super, super lento e ben meno quanto si possa avere nel vostro tasche proprie in questi giorni. C'è molto di più in là che era ancora più imbarazzante. Quindi lascio a questo. Ma che è stato il mio primo incursione nel web-- oh, no. Che non era. La mia prima incursione reale in programmazione web Era questo sito, che ho solo dimenticato. Ad un certo punto, ho imparato a fare immagini di sfondo ripetitive. E così ho trovato questo piastrelle efficace, come giocatore di hockey, calcio e golf palla, o qualunque cosa sia per il sito Frosh IM. E questo era in realtà, sinceramente il primo progetto basato sul web ho preso on-- Penso che forse studente del secondo anno anno, junior anno di successo dopo aver preso CS50 e CS51, uno delle classi di follow-on comuni. Ho notato nel guardare attraverso gli archivi che uno dei miei successori e amici, Lee, tipo di cambiata i diritti d'autore di se stesso. Ma questo era davvero qualcosa che Dovrei proprio l'imbarazzo di. Ma, al momento, questo è stato il primo sito, come ho detto un paio di settimane fa, con la quale matricola potrebbe registrarsi per gli sport intramurale qui. E così si scopre che le immagini di sfondo del genere non sono una buona idea. Ma il web era nuovo, e eravamo tutti sperimentando. E questo è quello che a quanto pare ha fatto in quel momento. Tutto ok. Quindi, senza ulteriori indugi, passiamo ingranaggi oggi per dare a voi, davvero, il pezzo finale che si potrebbe trovare particolarmente utile per i progetti finali ma anche che inizierà a rendere wide web mondo intero sentire un po 'più comprensibile. In effetti, stiamo andando a presentare un altro linguaggio di programmazione chiamato JavaScript che è simile e diverso in modi diversi dalle lingue abbiamo esaminato finora. 

Così C, ricordo, è questo linguaggio compilato. Hai avuto modo di correre attraverso un compilatore. Si arriva il codice sorgente di opporsi codice, o zero e uno. E quelli sono zero e uno che la CPU, Central Processing Unit, realmente capire. PHP, al contrario, non è un linguaggio compilato. E 'una cosa? E 'un linguaggio interpretato. Quindi c'è qualche programma chiamato un interprete che deve leggere it-- superiore a in basso, da sinistra a destra- sopra e capire quello che tutti la sintassi fa e mezzi, che si tratti di un ciclo o di una condizione o qualsiasi altro numero di programmazione costruisce. Quindi questo è un linguaggio interpretato. 

Poi abbiamo introdotto HTML. E HTML non è nemmeno un linguaggio di programmazione. Ci piacerebbe chiamiamo cosa? Un linguaggio di markup, che è solo una sorta di modo elegante per dire che non ha costrutti di programmazione come abbiamo visto anche nel giorno di Scratch. Non esistono cicli. Non ci sono le condizioni. E 'davvero una lingua sulla selezione dei vostri dati e la formattazione o strutturazione in qualche modo. 

CSS, nel frattempo, allo stesso modo non un linguaggio di programmazione. E 'ancora più esteticamente orientato. E permette di ordinare di mettere a punto cose come la dimensione dei caratteri e colori e posizionamento e tutto questo. Poi abbiamo avuto 

SQL. Quindi SQL è davvero una programmazione lingua in un certo senso, anche se su misura specificamente per i database. Ma anche se abbiamo solo vi presentiamo selezionare e inserire ed eliminare e aggiornare e un paio di altri, scopre si può effettivamente scrivere funzioni o procedure, in quanto sono chiamato, in SQL che sembrano e agiscono abbastanza come funzioni PHP e C. Così sappiamo che quelle esistono. Ma noi non si preoccupano neppure con loro come abbiamo appena graffiare la superficie qui. E poi Javascript, l'ultimo di le nostre lingue formalmente introdotto. Così JavaScript, troppo, è un linguaggio interpretato. E chi ha familiarità, do vuoi distinguerlo con qualche caratteristica sia da C e PHP? Che cosa lo rende diverso? 

PUBBLICO: Non è stato compilato. 

DAVID MALAN: Dire di nuovo? 

PUBBLICO: Non è stato compilato. 

DAVID MALAN: Non è stato compilato. Così, anche, viene interpretato. Quindi non è compilato. Ma che lo rende un po 'come PHP. Ma è ancora diverso da PHP in qualche modo sorprendente, almeno nel modo in cui lo useremo. Sì? 

PUBBLICO: Si corre sul lato client. 

DAVID MALAN: Funziona sul lato client, di solito. Questo è infatti il ​​distintivo caratteristico per noi in questo momento. C era sul lato server nel senso che abbiamo fatto tutto in CS50 IDE. PHP finora è stato sul lato server, nella misura come, anche, ottiene interpreted-- non compilato, ma interpreted-- all'interno CS50 IDE, che naturalmente è solo uno o più server in the cloud. 

Ma JavaScript, anche se si si sta andando per iniziare a scrivere per, diciamo, pset otto e forse finale progetti-- sei andando a destra in CS50 IDE e salvarlo in file all'interno CS50 IDE, CS50 IDE e, a loro volta, i server cloud su cui è ospitato, non stanno andando di interpretare o eseguire il codice. Piuttosto, sta per essere inviato forma inalterata fino al browser. Ed è allora sarà IE o Chrome o Firefox o Safari o qualsiasi altra cosa che in realtà interpreta esso, dall'alto in basso, da sinistra a destra. Quindi la chiave distintiva caratteristico per oggi è che JavaScript è sul lato client e PHP, per esempio, è stato sul lato server. Ora, questo ha implicazioni interessanti per, come, la proprietà intellettuale e chi può effettivamente vedere il vostro codice. E in effetti, si può andare sul web e vedere più qualsiasi codice che qualcuno ha scritto in JavaScript. A volte è leggibile, a volte è offuscato. Ma più su quello a tempo debito. 

Così JavaScript, abbastanza bene, è super-simile, sintatticamente, a C. E molto come PHP, non c'è nessuna funzione principale. Se si vuole iniziare a scrivere Codice JavaScript, come si vedrà oggi, basta iniziare a scrivere esso. Ma è, si vedrà, in particolare utile nel contesto dei browser web. Tuttavia, la mia piccola disclaimer-- solito earlier-- è stato quello di dire che si può sempre uso oggi server-side JavaScript secondo un quadro di fantasia chiamato Node.js che alcune delle proprie applicazioni di CS50 sono scritti in. Controllare 50 utilizza effettivamente Node.js. Ma stiamo andando a concentrarsi su JavaScript lato client qui in avanti. 

Così qui è una serie di condizioni in PHP. Siamo spiacenti, dentro-- in realtà, che affermazione, è anche corretto. Qui si trova anche una serie di condizioni in JavaScript. Sintatticamente, è identico a C e PHP. Espressioni del signor Boole sono, allo stesso modo, sintatticamente identico a entrambi C e PHP. Abbiamo anche gli interruttori a JavaScript che sembrano identici. Abbiamo per cicli che sono strutturato in modo identico, while, do cicli while. 

Questo è un po 'diverso. PHP ha avuto la per ogni costrutto che si può essere utilizzando o utilizzerà in pset sette, forse. JavaScript ha questa versione speciale di per cui è letteralmente dire qualcosa come per la chiave variabile oggetto, che è un modo molto succinto di dire, se ho un object-- e faremo parlare di questi di nuovo in un moment-- e io voglio iterare su tutto delle coppie di valori chiave all'interno, Io non devo capire come numericamente loro indice con zero, uno, due tre. 

Posso dire letteralmente questo. E ad ogni iterazione, JavaScript per me sarà aggiornare la chiave variabile essere il primo tasto, quindi il tasto successivo, poi il tasto successivo, quindi il tasto successivo, e così via. E posso ottenere al suo valore trattando un oggetto in JavaScript, come vedremo, come se fosse un array associativi in ​​PHP. In effetti, se finalmente avvolto il tuo mente intorno a quello che è un array associativo in PHP, si può pensare di esso per ora come identico a un oggetto in JavaScript. Ma questo è un po 'di una semplificazione eccessiva. 

Array sguardo, abbastanza bene, identici a PHP ad eccezione di un carattere. C'è una cosa che manca qui che ci ha fatto vedere la scorsa settimana con PHP. Che cosa è omesso? Sì? Nessun segno di dollaro. Quindi siamo di nuovo ad un altro mondo normale in cui le variabili non hanno segni di dollaro. Ma che fai li prefisso con var, in genere. E var significa variabile. E molto come PHP è liberamente typed-- per cui ci sono tipi, ci sono numeri e stringhe e galleggianti e così forth-- JavaScript ha similmente tipi. Ma è liberamente digitato che la i programmatori non hanno specificarli. Dobbiamo solo essere consapevoli che esistono diversi tipi. 

Variabili, meanwhile-- ecco come potremmo dichiarare "ciao, mondo" come una stringa. Notate che sia identico a PHP, ma nessun segno di dollaro. E questo è qualcosa che sarà cominciare a vedere più oggi, per cui si dispone di un oggetto con chiavi e valori. E se volete provare dedurre da ultimo week-- la sintassi è un po 'diverso. Ma un po 'buon senso check-- quanti chiavi fa questo oggetto sembra avere? Così vedo quattro. Vedo due. 

Quindi è in realtà due. Quindi questa è una raccolta di due coppie chiave-valore. La chiave è simbolo il cui valore è FB. La chiave è il prezzo il cui valore è 101.53. Quindi questi sono due coppie chiave-valore. E ricordate, PHP-- e questo è di nuovo appena sorta di differenza sintattica. Non è tutto ciò che intellettualmente interessante. PHP potrebbe aver scritto questo stesso cosa come citazione follows--, uguale. E a cambiare questi per le parentesi quadre. E poi ho cambiato questo a una parola citato, "prezzo". E poi io non uso i due punti. Quello che ho usato la scorsa settimana? Sì, il segno di uguale freccia notazione funky. 

E poi ho fatto la stessa cosa qui. Stessa cosa qui. E questo è tutto. Quindi è bene se questo non ha davvero affondato in memoria solo ma perché è davvero intellettualmente interessante. E 'solo le differenze sintattiche. Ma le idee sono esattamente gli stessi. All'interno di questa variabile citazione in JavaScript è un insieme di coppie chiave-valore, uno dei quali è il simbolo, una delle quali è il prezzo. E posso arrivare a quei valori con la seguente sintassi. Proprio come in PHP, ho potuto fare qualcosa like-- lasciare me fare questo box un po 'più grande. Proprio come in PHP, ho potuto fare questo-- oh, dannazione. Avanti. 

Proprio come in PHP-- Ok, faremo basta usare le note del presentatore. Proprio come in PHP, posso fare $ citazione ["simbolo"] citazione $, e questo otterrà me il valore di "simbolo". In JavaScript, che sta per essere identiche, per cui posso solo fare questo. L'unica cosa che è manca è il simbolo del dollaro. 

Così abbastanza bene, poi, c'è Non più di tanto nuova sintassi. Quindi quello che oggi ci concentriamo su, in realtà, è alcune delle idee e delle applicazioni. E il primo tale applicazione che si potrebbe hanno visto se si tuffò in pset sette è già questa sintassi. Quindi, in pset sette, se hai visto o non ancora visto, sanno che c'è un file che diamo hai chiamato config.json-- Javascript Object Notation. Come mai? Abbiamo voluto essere in grado di fornire con un modello con alcune coppie chiave-valore. Volevamo essere in grado di darvi una lista dell'ospite, il nome del server. Abbiamo voluto dare un segnaposto per il nome utente e un segnaposto per la password. Se non riesci a vedere questo ancora, di non preoccuparsi. Maggiori informazioni su questo in pset sette [? spec. ?] E poi, ovviamente, vogliamo che tu per riempire le cose da fare perché quando si accede CS50 IDE, ognuno di voi avere il proprio username e password. 

Così abbiamo potuto abbiamo utilizzato una mezza dozzina o formati più diversi di file. Avremmo potuto usare un file .txt. Potremmo utilizzare un file CSV. Avremmo potuto utilizzare un Il file INI, un file XML, un sacco di più sigle che si potrebbe non avere mai sentito parlare. E 'una specie di arbitrario alla fine del giorno. Ma super popolare in questi giorni è un testo formato chiamato JSON-- JavaScript Object Notation-- che assomiglia a questo. E 'un po' criptico, a meno di notare i modelli. Si inizia con un riccio aperto brace, e si finisce con lo stesso. All'interno di questo è qualcosa. Si tratta di una coppia chiave-valore. Quindi questo è un oggetto che io sono guardando sullo schermo qui che ha una chiave, che ha un valore. E proprio dedurre basato sulla modello precedente, qual è la chiave qui? Database, la cosa da sinistra del colon. 

Ora, il valore sembra essere un più righe questa volta. Ma il valore inizia con un riccio brace e termina con una parentesi graffa. Allora, cosa proporrebbe è la tipo del valore di database? Un dizionario o, solo più succintamente, un oggetto. Destra? Ciò è genere di una struttura di dati che è possibile utilizzare altre strutture in sé. Quindi, se tutta questa faccenda siamo chiamando un object-- e un oggetto è solo un mucchio di valore-chiave pairs-- il valore del database stesso è un oggetto. Il valore di database ha un sacco di coppie di valori chiave, il primo dei quali è ospite, poi il nome, poi nome utente, la password poi, ciascuno dei cui valori, nel frattempo, si è solo una stringa noioso tra doppi apici. 

Quindi, anche se questo non è Super Clear appena ancora, sappiate che questo è solo un di serie, abbastanza noioso modo di memorizzare i dati in un formato standard. Ma gli errori più comuni voi potrebbe fare, anche in pset sette, Sono piccole cose stupide, come se si omettere accidentalmente la virgola lì. Che sta per tradursi in file non necessariamente essere leggibile. Se accidentalmente si omette cose come il le citazioni, non sta andando essere leggibile. Quindi è un formato di file piuttosto nitpicky, ma è uno che è super comune. E ci capita di usarlo, anche se non si utilizza alcun JavaScript altrimenti, in pset sette. 

Tutto ok. Quindi ricorda questa immagine. Abbiamo parlato, in HTML, che il codice potrebbe apparire così. Questo è il HyperText Markup Language [Incomprensibile] solo "ciao, mondo". Ma poi abbiamo proposto un tempo fa che se aiuta, si potrebbe desiderare di iniziare a pensare su questo già come un albero. Infatti, il rientro che utilizzare solo per amor di leggibilità o per l'amor di stile su la sinistra può tipo di essere tradotto in questo albero, dove si avere qualche nodo principale speciale che faremo genericamente chiamato documento, sotto la quale è l'elemento HTML principale o tag, HTML, che poi ha due bambini, testa e corpo. 

E poi, a sua volta, la testa ha un titolo. E il titolo ha un valore di testo. E allo stesso modo corpo ha un valore di testo. Quindi, se sei a tuo agio detto che sì, si potrebbe prendere questo HTML e disegnare un quadro del genere questo, il lato destro è un bel modello mentale perché ora che abbiamo JavaScript, una programmazione lingua che i browser possono eseguire e interpretare per te, si scopre che ciò stiamo per fare in codice è iniziare a manipolare questo struttura ad albero in memoria. Non abbiamo per costruire l'albero in memoria. Noi non dobbiamo fare una sorta di struttura di dati pset-cinque-style complessità. Il browser, abbastanza bene, su interpretando HTML cima a fondo, a sinistra oa destra, sta letteralmente andando a noi mano l'equivalente di un puntatore a che tutto l'albero per libero. Si fa tutto il lavoro duro. Questo è quello che Mozilla e Apple e altri hanno fatto per noi. 

E con JavaScript stiamo andando essere in grado di controllare e modificare e fare cose interessanti da quell'albero, altrimenti noto come un DOM o Document Object Model. Che genere di cose? Beh, si scopre che in JavaScript, non c'è questa lunga lista di eventi che possono aver luogo. E non abbiamo davvero usato che parola da quando settimana zero e pset zero quando abbiamo parlato Scratch. La maggior parte di voi probabilmente non hanno utilizzato un evento nel progetto Scratch. Ma si potrebbe ricordare il semplice Marco Polo ad esempio, dove abbiamo avuto due sprite, uno dei quali ha detto, Marco. L'altro di cui poi, al momento di ascolto e sentendo che evento, ha detto, Polo. In caso contrario, non esitate a guardare indietro così indietro. 

Ma questo è solo per dire, e si può tipo di dedurre dai nomi di questi cose, JavaScript, si scopre, sta per darci un modo per ascoltare per il mouse va giù o il mouse salendo o il tasto scendendo o il tasto salendo o onselect onsubmit o onresizing qualcosa. In altre parole, qualsiasi azione fisica che un essere umano può prendere con un browser che si fa ogni giorno, è possibile scrivere codice che ascolta per quegli eventi e poi fa qualcosa di appropriato. 

Ad esempio, se si utilizza Google Maps, cosa succede se si fa clic e muoversi il mouse, tipicamente? Se si fa clic e si trascina? Sì? Di preciso. La mappa inizia a muoversi. Così si può sorta di vedere cosa c'è qui, cosa c'è laggiù. E come fa Google implementa questo? Beh, presumibilmente, sono utilizzando un paio di questi eventi ascoltatori, uno che dice, ascoltare sul mouse down-- così quando l'utente fisicamente spinge la sua trackpad o il suo topo fuori uso. E poi stiamo cercando qualcosa come movimento o qualche altro evento che ci permette di catturare la resistenza. E in effetti, la resistenza è altrettanto in questo dot dot dot lista delle possibili opzioni. 

Quindi questo sarà un potente modo per iniziare rispondere all'utente ancor prima che lui o lei in realtà clic qualcosa di esplicito come presentare. Ma stiamo andando a presentare un paio di argomenti per arrivarci. Transizione Ma prima, andiamo a qualche codice vero e proprio. Quindi ho intenzione di andare avanti e di aprire dom-0, che è un esempio molto semplice qui che se io lo zoom in semplicemente ha questo ingresso qui per me. E ho intenzione di andare avanti e digitare "David" per il mio nome e fare clic su Invia. 

E poi, anche se una sorta di buon mercato, io avere questo prompt che si apre che dice: "Ciao, David!" Quindi questo è una specie di come il nostro "ciao, mondo" che abbiamo fatto un po 'indietro in C e anche in PHP perché ho dinamicamente in uscita il mio nome. Posso fare il nome di qualcun altro qui. Potrei semplicemente cambiare questo, come, Hannah, fare clic su Invia. E infatti, i piccoli cambiamenti pop-up. 

Ora, pop-up sono uno dei maggior parte delle caratteristiche abusato del web. Ed infatti, nel i giorni pop-up bloccanti entrato in voga perché sarebbe andato in qualche website-- forse un posto-- discutibile che avrebbe poi improvvisamente iniziare infarcendo il vostro schermo con un sacco di finestre pop-up. E così questa capacità di pop up finestre di fronte all'utente Non è stato particolarmente ben accolto da parte dell'umanità. Ecco, questo è il motivo per cui si vede questo impedisce cosa, che fa solo questa cosa brutta. Quindi stiamo andando ad avere bisogno di un modo migliore per richiedere all'utente. Ma per ora, che sembra funzionare. Quindi, solo intuitivamente, cosa sembra accadere qui? Io vado avanti e fare clic su Submit, e allora qualcosa sta succedendo, in modo chiaro. Ma ciò che non sta accadendo che è accaduto la settimana scorsa in qualsiasi momento ho cliccato Submit? Quello che non è successo sullo schermo? Scusate? Ricarica. L'URL non è cambiata affatto. Ho detto che questo era dom-0, e sono ancora a dom-0. Normalmente, ci piacerebbe avere cambiato in qualche altro URL, come register.php o simili. 

Ma anche quando mi licenzio questa cosa facendo clic su OK, notare che l'URL rimane completamente messo. E, infatti, se sono un po ' scettico, mi permetta di aprire su Chrome. Permettetemi di aprire la scheda Rete. E notare è vuoto al momento. Lasciami andare avanti e reinviare Maria. Non c'è il traffico di rete di sorta. Così non ci è HTTP. 

Quindi in effetti, se guardo il codice sorgente per questo-- lasciatemi chiudere questa finestra e scegliere Visualizza Sorgente. Interessante. Sembra che ci sia un po ' nuove etichette, tra cui script. Quindi, diamo uno sguardo all'interno CS50 IDE esattamente quello che inviato all'utente. 

Così qui è-- cerchiamo di concentrarsi solo sul codice HTML. Ecco la metà inferiore di dom-0.html. E notare che esso ha un titolo, un tag head, un tag body, un tag form. Ma quello che salta fuori a voi diverso, soprattutto se non hai mai scritto qualsiasi JavaScript te stesso. Mi permetta di scorrere un po ' a destra qui. Ho un ingresso, un altro ingresso per presentare. Ho un ID, che è una specie di nuovo. Ma abbiamo visto questo con i CSS. Che altro è sicuramente di nuovo? Sì? Bello. 

Tutto ok. Allora, dove si dice onsubmit, notare ciò che sembra seguire. Questo è un attributo di nomenclatura HTML. Il suo valore è questa stringa tra virgolette qui. E questo sembra un po ' strano a prima vista. Non è HTML. Non è CSS. Si tratta, come si può immaginare, JavaScript. Così sembra che ha costruito in questo pagina web è una funzione chiamata saluto. E sto dedurre che solo perché è una parola, saluto. E 'ottenuto una parentesi tonda aperta, chiudere paren, punto e virgola. Sembra una funzione C, si presenta come una funzione PHP. 

E in effetti, sta andando a essere una funzione JavaScript. Poi sto tornando falso. Torneremo a che in un momento. Ma da dove viene questa funzione definita? Ebbene vorrei scorrere verso l'alto all'inizio del file. E anche se si tratta di una lunga serie, è relativamente semplice. Permettetemi di Zoom Out qui e concentrarsi su queste quattro linee. 

Così in JavaScript, appena come PHP, basta per esempio, letteralmente, la parola "funzione", il nome della funzione, e poi parentesi con qualsiasi arguments-- argomenti in questo caso. E non c'è nessun tipo di ritorno in JavaScript, proprio come il PHP. Quindi è un po 'più ampia di C. Aperto parentesi graffa, vicino parentesi graffa. Costruito in JavaScript è un function-- Non un function-- consigliato ma una funzione chiamata di allarme il cui unico scopo nella vita è quello di tirare su quel piuttosto brutto Prompt che abbiamo visto poco fa. 

Ora, questo è una specie di un boccone. Cosa sta succedendo qui? Quindi partiamo per evidenziare tutto qui. Questo è lo stesso argomento per avvisare. E cosa sta succedendo? Questa sembra proprio una stringa. E si scopre, a differenza di PHP e differenza C, non importa in JavaScript se si apici singoli o doppi apici. Saranno equivalente. E, francamente, è solo popolare in questi giorni per i programmatori JavaScript per sempre utilizzare le virgolette singole per qualche motivo. E 'la cosa giusta da fare. Ma potremmo usare le virgolette, pure. 

Quindi più è un nuovo personaggio. Ma quelli di voi che avete fatto questo prima, cosa più significa? Già. Concatenare. Così abbiamo visto questo in PHP. C'è solo il punto operatore in PHP che sarà concatenare due stringhe insieme. C era un dolore al collo per fare questo. Ricordiamo dal pset sei, che era un dolore particolare al collo, si dovrebbe utilizzare qualcosa come strcat dopo l'allocazione della memoria sullo stack e heap. Si doveva fare i salti mortali solo per concatenare due stringhe. In JavaScript, è super semplice. Basta usare l'operatore più tra di loro. 

Così il complesso dall'aspetto cosa sembra essere questo perché alla fine tutta questa corda, ho solo concatenare su un punto esclamativo. Quindi, se ciò che è stato popping up è stato "Ciao, David", "ciao, Hannah," "ciao, Maria," e così via, in modo chiaro che cosa di mezzo tra i due vantaggi mi deve dare accesso a che cosa? Cosa c'è dentro di sicuro? Già. Quindi mi fingere qui il rispondere a loro nome, giusto? Così il loro nome spuntato in finale risultato. Che cosa significa questo? Beh, ho proposto in precedenza in quel quadro che il cosiddetto DOM ha questo elemento radice speciale salita superiore chiamato documento. E ora, si scopre, che sta andando essere una speciale variabile globale in JavaScript, incorporato in che è un tutta una serie di funzionalità utili. Tra la funzionalità utile è il capacità di ottenere in qualsiasi nodo discendente. Quei quadrati o rettangoli o ellissi sono solo nodi di un albero, per così dire. 

Così si scopre che ha costruito in Oggetto di documento di JavaScript è una funzione, altrimenti noto come metodo, che si chiama getElementById. La sintassi per la chiamata una funzione in JavaScript cioè all'interno di un oggetto o di un variabile è solo con la notazione punto. E abbiamo visto questo in C ciò che la sintassi struct. Vedete questo nel pset sette, tipo di, una sorta di, quando si vede CS50 :: query. Il colon colon in PHP è un altro modo di chiamare una funzione che è all'interno di un oggetto. 

Ma per ora in JavaScript, è solo un punto. E così questa funzione, abbastanza bene, tipo di dice quello che does-- ottenere elemento per ID. Un elemento è solo un altro nome per un tag o un nodo nel DOM. E così ottenere elemento da ID "nome" significa questo-- ecco il mio codice HTML. E sulla base di questo HTML, cosa nodo o cosa tag HTML sono io sta per essere consegnato a livello di programmazione chiamando document.getElementById? 

Si Esattamente. Ho intenzione di ottenere l'ingresso elemento c'è il cui ID è "nome". Quindi in particolare, è possibile pensare a questa funzione, getElementById, come un modo di dare eseguire un puntatore a tale nodo specifico nell'albero. Non abbiamo tratto questa albero, ma è un modo di ottenere l'accesso a tale rettangolo o quel rettangolo identificando univocamente tramite il suo ID. 

Ora, perché è utile? Beh, si scopre che una volta che hai ottenuto tale nodo, quel rettangolo dal picture, tale nodo all'interno di esso, a sua volta, ha un sacco di properties-- coppie chiave-valore o dati, uno dei quali è chiamato valore. Così letteralmente, è una specie di un boccone per spiegare tutta la faccenda. Ma alla fine della giornata, tutto questo non fa altro che dare a una stringa che l'utente ha digitato in questo modo gerarchico. Ma non mi piace un paio di queste cose. O meglio, c'è ancora una certa curiosità. Tutto questo sembrava funzionare. Perché pensi che sono tornato falso dopo aver chiamato salutare? Questo sembra un po 'brutto, che Ho due affermazioni ci separati da virgola. Prendere una supposizione. Se ho rimosso restituire false, cosa potrebbe accadere, proprio istinto? Siamo spiacenti, dire ancora? 

Aprire un mazzo di di Windows. Quindi potenzialmente forse qualcosa come che sarebbe successo. Cos'altro? Potrebbe presentare una richiesta in cui? Alla stessa pagina. Quindi, in effetti, è che il più vicino rispondere qui, anche se, a differenza di in passato, non ho specifica l'attributo action, che normalmente si hanno a che fare. Si scopre che c'è un difetto. Se non si specifica azione, è come dire preventivo, unquote o il nome del file stesso, che in questo caso sarebbe essere come dom-0.html. E 'solo tipo di dedurre, o meglio implicita. 

E così, se non faccio questo, cerchiamo di notare. Permettetemi di salvare questo. E ho tolto ritorno falso. Permettetemi di tornare in questo esempio e la forza ricaricarlo. E si potrebbe avere visto me suggerire questo su CS50 discutere un mucchio di volte. Se qualcosa è mai agire funky e la Browser non è comportarsi come ci si aspetta, spesso si vorrà tenere Maiusc e quindi fare clic su Ricarica. Che costringerà tutti i file a ricaricare e non utilizzare la cache locale del browser o copia in modo che ora, lasciami andare avanti e aprire il mio ispettore, la scheda di rete. Io vado a fare clic su Preservare Log perché io non lo vogliono eliminare le righe Una volta che ho sbattuto via altrove. 

Lasciami andare avanti qui e tipo di Andi, fare clic su Invia. Tutto ok. Sembra come previsto. Si dice "ciao, Andi." Permettetemi di fare clic su OK. Interessante. Si noti che la pagina è cambiato, anche se alla pagina originale. Si noti il ​​tipo di URL modificato. Ha aggiunto un punto interrogativo, che è di solito un indicatore che abbiamo cercato di presentare qualcosa. E quindi nella parte inferiore, ancora più esplicitamente, qui è la richiesta effettiva HTTP, che ha ottenuto una risposta di 200 che mi ha portato qui. 

Quindi questo non è quello che è che vogliamo fare, giusto? Perché non voglio ricaricare l'intera pagina. Io invece volevo tornare falso in modo da corto circuito comportamento di default del browser, che era, ovviamente, di sottoporre la pagina. 

Quindi, diamo un'occhiata a un marginalmente migliore esempio. Questa è la versione dom uno. E notare quanto segue. Va bene se non Grok tutte le linee di codice. Ma ciò che è fondamentalmente diversa su questa implementazione? Io stipula le si comporta il stesso, fa la stessa cosa. Che cosa ho ovviamente fatto in modo diverso? Sì? 

PUBBLICO: [incomprensibile]. DAVID MALAN: Sì. Quindi la funzione è definita differently-- in altre parole, assenti dalla forma, lassù on line o 7-- piuttosto, la linea non è più 8-- devo onsubmit. Nell'esempio precedente, ho avuto questa. E poi ho letteralmente scritto il mio codice qui. E poi ho detto return false. E se non strofinare il modo sbagliato ancora, si dovrebbe iniziare a misura come, proprio come in HTML, quando abbiamo iniziato a co-mescolarsi esso con i CSS in attributi di stile, è appena iniziato ad avere un po disordinato o sentire un po 'sbagliato. 

Allo stesso modo qui, se iniziare a prendere HTML, e poi automaticamente plop un codice JavaScript nel bel mezzo di una stringa tra virgolette, è Non sarà molto gestibile. Destra? Non è nemmeno evidente a prima luogo in cui il codice JavaScript è. Quindi sarebbe davvero bello come un principio di migliore progettazione, teniamo completamente il nostro HTML separata dalla nostra JavaScript. 

Quindi, per fare questo, quello che abbiamo fatto qui è il following-- usiamo semplicemente HTML solo markup. E così in versione uno di questo, tutte Che ho è un modulo con un ID univoco. E poi qui, sto approfittando di una caratteristica speciale di JavaScript per cui posso avere ciò che è chiamato una funzione anonima. Così si scopre che, se io chiamo document.getElementById di 'demo' che è come dare me un puntatore questo nodo nel mio albero, l'elemento del modulo, per così dire. 

Ora, so solo da conoscere un po 'di HTML ora stiamo avendo letto qualche linea di riferimento, che un elemento del modulo supporta un sacco di eventi in listeners-- altre parole, la lunga lista di eventi ascoltatori che abbiamo visto poco fa. So che dalla lettura della documentazione che onSubmit è un evento valida listener per un elemento del modulo. 

Quindi, una volta che so che, è sicuro per me fare il following-- ottenere quel nodo dall'albero, l'elemento del modulo, e accedere al suo cosiddetto immobili onsubmit. Così il punto significa solo questa è una proprietà, come un valore speciale all'interno di esso. E che tipo di dati sono io l'assegnazione, a quanto pare, a onSubmit, che è effettivamente una variabile all'interno di tale nodo nell'albero? E 'un campo all'interno di quella struct. Qual è il tipo di dati? 

Una funzione, sì. Così si scopre che PHP ha questo. E anche se siamo Non hai detto a questo proposito, C ha anche puntatori a funzione, i capacità di passare e assegnare le funzioni come stessi valori variabili. E non stiamo andando a regredire torna a C. Ma per ora, si scopre che sul lato destro qui, anche se sembra un po ' funky, questo significa, hey del browser, dammi una funzione. Io non ho intenzione di preoccuparsi anche dando un nome perché sono letteralmente andare per assegnare chiamiamolo l'indirizzo di questa funzione immediatamente a onSubmit. In altre parole, il browser, non è necessario di sapere che cosa chiama questa funzione. Hai solo bisogno di sapere dove è in memoria. E così è sufficiente solo per avere un segno di uguale lì e di non preoccuparsi di nominare questo, come foo o salutare o di qualsiasi altra parola. E ora questo è solo una cosa stilistica. Potrei spostare questa parentesi graffa sulla the-- sorry-- riga successiva come facciamo di solito CS50. Ma in JavaScript, è in realtà stilisticamente comune per mantenere solo la parentesi graffa, il prima, su quella prima riga. 

Ma d'ora in poi, non c'è niente di interessante. Quella parentesi graffa aperta solo delimita l'inizio della mia funzione. La funzione è ora identiche, tranne che ho incluso il falso ritorno all'interno di questa funzione. Perché si scopre fuori-- e solamente sarebbe lo sanno da lettura il documentation-- che se la funzione assegnare al gestore onsubmit restituisce false, il browser conosce appena e concorda di non inviare il modulo a un server. Se restituisce vero, presenterà a un server, per motivi che vedremo sono utili in un attimo. 

E poi il punto e virgola dopo la parentesi graffa lì solo significa che sono fatto definisce la funzione. Sai cosa chiamare al più presto come si sente una sottomissione. Tutto ok. Questo è ancora probabilmente sorta di brutto. Allora, cosa altro possiamo fare? 

Beh, si scopre poi a versione a due, che è il last-- e dobbiamo solo un'occhiata a questo. A rischio di fare esso più brutta, si scopre che c'è una biblioteca il mondo ha chiamato jQuery. E jQuery è un super popolare libreria JavaScript è così popolare che la maggior parte qualsiasi Javascript-- non è raro per le persone a confondere jQuery con JavaScript. Come mai? JavaScript stessa ha molto verbose modi di fare things-- document.getElementById, dadadadadada. Si finisce per avere molto lunghe righe di codice. 

Quindi, un tizio di nome John Resid, che lavora in realtà per una startup in questi giorni, è uscito con questi anni di biblioteca fa che molte persone hanno contribuito a chiamata jQuery che cambia la sintassi nel modo seguente. E solo così hai visto questo, perché avrete sempre vedere questo se facendo un progetto finale web-based, Questo sarebbe il modo equivalente attuazione di quella stessa funzione utilizzando questa biblioteca speciale. 

Ora, invece di prendere in giro lo distingue nella sua interezza, facciamo solo un'occhiata ad alcuni modelli. Questa sintassi sembra avere quante funzioni anonime o funzioni senza nome o funzioni lambda AKA? Due, giusto? E si sa che, anche se non sei super comodi con questo, solo per il fatto che dice la funzione () due volte. 

E si scopre che ciò che questo codice è doing-- e ci riferiamo a riferimenti online, in ultima analisi, per un aiuto con questo. Questo significa solo che quando il documento è pronto, andare avanti e registrare la seguente funzione come gestore per presentare il codice HTML elemento la cui unica idea è demo. E poi, quando ciò accade, chiamare queste due righe di codice. E questo è, tragicamente, un altro modo prolisso per dire return false. E lo abbiamo detto solo perché vedrete il codice come questo in linea. Ed è niente da scoraggiare da. Ma piuttosto, tenete a mente che ciò che è andando ad essere comune in JavaScript è questo paradigma. Ed è per questo che mostriamo per ora. Tutto ok. Così, senza soffermarsi troppo tanto su questa sintassi, sono ci sono delle domande su questi esempi o idee finora? Tutto ok. Quindi usiamo questo per qualcosa di utile. Fare una pagina web che dice solo ciao, così e così non è poi così interessante, non underwhelm. Questo non sarà bello, ma che sta per fare qualcosa di utile. Lasciatemi tornare al mio elenco qui e di aprire, dire, la forma-0.html. 

Quindi supponiamo che questa è la matricola pagina di registrazione sport intramurale senza CSS o qualsiasi senso del design. E voglio andare avanti e registrati qui con una password. E ho intenzione di accettare i termini e le condizioni e fare clic su Registra. E ora il sito dice: "Tu sei registrati! (Beh, non proprio.)" Che sembra come ha funzionato, ma lasciatemi andare avanti e forzo ricarica. 

E lasciatemi dire, no, non è necessario bisogno del mio indirizzo di posta elettronica reale. O forse ci limiteremo a dire posta in là. Password sarà, come, 12345. E poi, solo perché sono un idiota, ora è 123456789. E non ho intenzione di controllare la vostra casella. 

Hmm. Tutto ok. Quindi c'è diverse opportunità per migliorare qui. E si sa, o vedrete nel pset sette, che è possibile scrivere code-- e dovrete scrivere codice PHP-- per difendere contro questi tipi di utenti errori perché l'utente in modo chiaro non ha collaborato. E lui o lei non vi ha dato tutto il valori che voleva o addirittura nel formato che li voleva. Così vedrete in pset sette che potremmo certamente avere qualche se le condizioni che dicono se l'indirizzo di posta elettronica Non è un username@something.edu, potremmo solo dire che mi dispiace e ci scusiamo per l'utente molto, come si potrebbe essere in pset sette. Oppure, se non hanno verificato che scatola, risulta in PHP, è possibile rilevare che, anche. E certamente se le password non corrispondono come in register.php per pset sette, è possibile rilevare che. Ma questo è un dolore nel collo che ora chiedono noi di andare fino in fondo al server. L'utente è informato dell'errore. E almeno se non si utilizza alcune tecniche di amatore, ora devono fare clic sulla freccia indietro. Non sarebbe bello, come un sacco di siti web di oggi, se tu avessi più immediata feedback, istantaneamente? 

In altre parole, lasciami andare alla versione uno, che sta per essere più bella. Ma ha questa caratteristica. Malan, 12345, 123456789, non andando a controllare la casella, Registro. Le password non corrispondono. Così, anche se questo pop-up è ugly-- possiamo sostituire questo alla fine con qualcosa come Bootstrap, che si vedrà in pset sette è un library-- molto popolare che ho fatto rilevano che le password non corrispondono. Tutto ok. Beh, mi permetta di risolvere che come utente. Lasciami andare avanti e dire 12345, 12345. Ancora non controllare l'accordo. Devi accettare il termini e condizioni. Allora perchè? 

Se abbiamo già ponemo che c'è un modo, e ti abbiamo richiesto in pset sette di rilevare errori condizioni come questo sul lato server, perché dovrei preoccuparsi di fare questo anche in JavaScript? Che cosa è un argomento a favore di aggiungere ciò che che state per vedere come some-- c'è complessità. 

Forse non c'è rialzo. Cosa potrebbe essere? PUBBLICO: [incomprensibile]. DAVID MALAN: Oh, interessante. Potenziali attacchi. Così sicuro, se non stai movimentazione input dell'utente erronea quella grande, forse è meglio se si non ha nemmeno raggiungere il vostro server. Vorrei spingere indietro lì e per esempio, si dovrebbe probabilmente risolvere entrambi questi problemi. Ma questo è giusto. Cos'altro? 

PUBBLICO: [incomprensibile]. 

DAVID MALAN: Sì. Questo codice, come abbiamo detto prima, è interpretato sul client-side. Essa non si preoccupa il server, il che significa che non è così impatto del carico o la capacità del server. E ora, per me po 'vecchio, questo non ha alcun effetto significativo perché ho un utente al momento. 

Ma se siete qualsiasi sito web di dimensioni adeguate, soprattutto il più grande, come Facebook, più si può tenere la gente fuori del server del meglio perché un server, naturalmente, ha solo una quantità limitata di RAM, un numero finito di gigahertz, un numero finito di cose può fare per unità di tempo. Quindi, se ci sono più persone in il mondo di colpire il vostro server, registrazione accidentalmente in modo non corretto, altrettanto bene se si può tenere quel carico fuori il vostro server. Inoltre, in particolare su un cellulare device-- se hai mai accedere my.harvard o Netid di Yale o simili, c'è questa la latenza con un sacco di siti web come quello per cui ci vuole, come, un maledetto secondo o due volte. E poi, il mio Dio, se si digitano, allora dovete colpire indietro e rifare. Quindi c'è la latenza, in particolare su connessioni di rete più lente. Ma JavaScript, perché viene eseguito sul client e non ha bisogno di andare avanti e indietro attraverso un internet potenzialmente lento collegamento, è possibile ottenere un feedback quasi istantaneo. 

Quindi diamo un'occhiata a questo. Lasciatemi apro forma-0 e guardare il codice HTML qui. E facciamo solo vedere cosa sta succedendo. Questa è una forma il cui azione è register.php. Sto usando solo ottenere così che ho potuto vedere l'URL. Ma per le password, avremmo sicuramente vogliamo per cambiare questo per postare nella realtà. Ecco un campo di input di tipo text. Ecco un altro ingresso campo di tipo password. Ecco, se non hai mai visto, un ingresso di tipo casella. 

Ma non c'è JavaScript qui di sorta. Questo è solo HTML va a register.php. Ma in versione uno, dove ha iniziato a ottenere quei pop-up, vediamo cosa effettivamente accade qui. Nella versione uno, cosa Io vado a see-- I Pensavo di poter stallo abbastanza con abbastanza parole, ma ho finito. 

Nella versione tra-- ci andiamo. Nella versione uno, notare la following-- e non è la migliore realizzazione, ma è la mia prima. Si noti che il sotto forma, ho un tag script. E un tag script significa, ehi, browser qui arriva un po 'di codice in, tipicamente, JavaScript. E ora, noto quello che sto facendo. Su line-- Riesco a malapena leggere it-- linea 32, si dice, var form-- così mi danno una variabile denominata modulo. E quindi ottenere document.getElementId di "registrazione". Cos'è questo? Beh, mi permetta di riavvolgere qui. E notate, ah, ho dato l'elemento del modulo un'idea arbitraria ma descrittivo di registrazione. Quindi, questo mi dà una variabile che mi permette di afferrare quel nodo, quel rettangolo nella struttura denominata modulo. mezzi form.onsubmit, ehi del browser, registrare un listener di eventi in questo modulo. In altre parole, quando il modulo è presentato, eseguire il codice seguente. Non ha bisogno di un nome perché perché avete bisogno di sapere il nome? Hai solo bisogno di sapere cosa da eseguire, ergo si tratta di una funzione anonima o lambda. E che la funzione è tutte queste linee qui. E ora, a dire il vero, anche se si Non avrebbe potuto mai scritto Javascript prima, è solo logica C e PHP. Quindi, se form.email.value == "" - quindi se il campo posta elettronica è vuoto, urlare presso l'utente con "È necessario fornire il proprio indirizzo e-mail. " Altrimenti se form.password.value è urlo vuoto presso l'utente, "È necessario fornire la password." 

Più interessante logicamente, se non lo fa form.password.value pari form.confirmation.value-- da dove conferma viene? Permettetemi di riavvolgimento. Beh, ho chiamato questo ingresso campo qui la password. E ho chiamato questa qui conferma. Avrei potuto chiamato Password due o qualsiasi altra cosa. Sto solo controllando logicamente che questi due sono gli stessi. Else-- si scopre questo è il signor Boole again-- un valore booleano, la casella di controllo. Quindi, se io dico, esclamazione Point-- se non form.agreement.checked, urlare presso l'utente pure. 

Quindi questa sintassi che vedrete è molto comune in JavaScript, dove si ha questa notazione a punti. Si inizia con un oggetto qui. Si immerge in un più profondo per a una proprietà come password. E poi si arriva al suo valore effettivo. E ancora, ecco l'ingresso. Ecco la password nome. E il suo valore è tutto ciò che il umano ha effettivamente digitato. 

Quindi, in tutti questi casi, sono tornato falso. Ma se non, torno vero. E così ora vediamo un uso irresistibile di quando si dovrebbe restituire false per fermare ciò che l'utente sta facendo e fare di lui o lei sceglie di nuovo o digitare di nuovo. In caso contrario, si ritorna vero. 

E mi permetta di introdurre una altra variante di questo giusto per seminare un po 'di comprensione della stessa. Beh, in versione 2 di questo, la forma-2-- Lo farò con un gesto della mano. Questo è, per i curiosi, la versione jQuery, quelli di voi che potrebbero desiderare di dilettarsi in quel particolare libreria. Ma andiamo start-- e delle domande? Mi permetta di mettere in pausa per momento perché che è stato veloce e molto. 

Ma la cosa bella è che tutto del codice è praticamente la stessa. Il nuovo materiale è ciò che è il DOM? Quali sono questi rettangoli? Che cosa sono questi nodi? Che cosa è una funzione anonima? Che cosa è un gestore di eventi? Ma per fortuna, la maggior parte di questo è solo il cerchio da, diciamo, la settimana a zero. Tutto ok. Quindi, qualcosa un po 'più interessante? Beh, prima di tutto, lasciatemi andare avanti e di aprire Google Maps. E noterete che per un momento, sulla frazione di secondo, notare cosa succede quando Clicco abbastanza veloce. E questa connessione ad Harvard è così veloce che in realtà non notare. Ma che cosa tipo di tipo di vedere se clicco e trascino veramente veloce? Quelli di voi a guardare in linea, se si rallenta questo a velocità 0,5x, si può vedere meglio. 

Quello che stava accadendo solo prima ho cliccato e trascinato? Fammi provare qui-- lasciami fare qualcos'altro, come 90210. Andiamo lontano. E 'stato veramente veloce, anche. Che ne dite di Disney World? Ci siamo. OK. Che cosa hai visto per una frazione di secondo? Proprio come, piazze, giusto? Segnaposto per piastrelle? 

Ebbene, che cosa sta succedendo qui? Google Maps è un bell'esempio di questa tecnologia che si chiama AJAX. Ed è qui che inizieremo a utilizzare il JavaScript particolarmente modo seducente. Indietro nel giorno, vi era questo sito web chiamato MapQuest. E ho dovuto prendere una screenshot questo dal 1990, dove se si voleva cercare qui sulla mappa, si potrebbe letteralmente fare clic sulla freccia nella parte superiore che ha mostrato una piazza diversa della mappa. Se si voleva spostare a sinistra, è cliccato una freccia che vi ha mostrato una piazza diversa della mappa. E alcuni siti web ancora farlo oggi. Ma anche MapQuest ha ottenuto meglio, come Google Maps. 

Invece, cosa c'è di meglio questi giorni è siti web che utilizzano AJAX. AJAX-- altrimenti noto come Asynchronous JavaScript and XML, che è solo un modo elegante per dire una tecnologia o tecnica che permette un browser con JavaScript per effettuare richieste HTTP aggiuntivi dopo che la pagina è stata eseguita. Che cosa significa questo? Beh, sarebbe sorta di fastidioso in Gmail se ogni volta che si voleva per controllare la posta, si era letteralmente premere Control-R o Comando-R oppure fare clic sul pulsante Ricarica e l'intera pagina dannato sarebbe ricaricare. Destra? Sarebbe lampeggiare bianco probabilmente per il secondo. Si dovrebbe vedere la barra di avanzamento stupido. E proprio per vedere se si dispone di nuovi posta elettronica, l'intera pagina web e l'URL sei al avrebbe dovuto ricaricare. 

Ma questo non è ciò che accade in Gmail. Destra? Quando si riceve una nuova e-mail a Gmail, ciò che accade sullo schermo? Ciò dimostra solo, giusto? E 'appena appare magicamente come nuova riga nella tabella. Che in realtà comporta una discreta quantità di complessità. In effetti, se pensi di questo albero, che anche se è un semplice qui, Gmail-- e avrei dovuto guardare il codice di essere sure-- probabilmente ha una tabella HTML o forse una lista non ordinata che rende ciascuna delle vostre caselle di posta e-mail come. 

E così, se si immagina questo c'è è un albero in memoria quando si è utilizzando Gmail che sembra un po 'una sorta di in questo modo, quando si rende conto di Google, ooh, si dispone di una nuova email, non è così voler ricostruire tutto l'albero. Piuttosto, vuole trovare il nodo l'albero che rappresenta tua casella di posta e basta inserire un nuovo nodo. 

Quindi, molto simile al pset cinque, dove si dovuto inserire nodi in una tabella hash, allo stesso modo lo fa Google, via Codice JavaScript che ha scritto, traverse questo albero, capire dove è quella parte posta in arrivo della finestra, e poi inserire una nuova riga. E una nuova riga significa solo uno o più nuovi nodi di un albero. 

E così AJAX è questa tecnica che permette esattamente questo. Una volta che hai visitato un URL, tuttavia pazzo tempo è, e una volta che la pagina ha stato caricato, è ancora possibile afferrare più dati dal internet-- che si tratti di una e-mail o di una tessera di un map-- afferrarlo dietro le quinte e poi inserirla nella pagina in modo che l'umano non realmente aspettare per esso. 

Facebook Messenger funziona allo stesso modo. Qualsiasi numero di altri websites-- oh, in realtà, anche questo. Voglio dire, questo è, francamente, un po ' un fastidioso dispongono di questi giorni. Se mi metto alla ricerca di questo cats-- è una specie di un'esperienza utente orribile. E 'appena inizia la ricerca per me. Beh, che cosa sta facendo? L'URL non è cambiata da quando ho iniziato a scrivere. Ma cosa sta succedendo in tutto il wire-- OK, hmm interessante. Cosa sta succedendo in tutto il filo qui ottiene solo più strano. 

OK. Così mi permetta di andare avanti e ispezionare elemento e andare alla scheda di rete e cercare di fare questo tecnico e meno sui gatti. Mentre scrivo, letteralmente, i gatti e- cosa sta succedendo per-- Io non ho intenzione di fare clic su tale. Tutto ok. Così qui, cosa sta succedendo ogni tempo digito un personaggio, a quanto pare? Come, di basso livello? Che cosa sta succedendo con ciascuno di quelli personaggi sto scrivendo la mia tastiera? Sì? PUBBLICO: [incomprensibile]. 

DAVID MALAN: Esattamente. Ciascuno di questi caratteri è andare a Google, uno alla volta. Stanno costruendo una stringa sul loro server che rappresenta tutto quello che ho digitato finora. E ogni volta che digitate un altro personaggio, che usare la loro salsa segreta di un cercare algoritmo e capire, vuol dire questa pagina gatto o questa pagina gatto o simili? Quindi, in un certo senso, mi fornisce con un migliore esperienza in quel non so nemmeno necessario per completare il mio pensiero. E in effetti, si tratta di un utile cosa, completamento automatico in generale. Se i loro algoritmi sono abbastanza buoni e se le mie ricerche sono abbastanza evidenti, Io non devo digitare la parola intera. Stanno andando a dirmi cosa è realtà sto cercando. Quindi, quello che Google chiama instant Ricerca è solo con AJAX, utilizzando il codice che permette loro di richiedere contenuti aggiuntivi attraverso un browser web dietro le quinte con questo nuovo linguaggio, JavaScript. Così abbiamo un paio di minuti dalla fine. E fammi chiamare il mio compagno Colton sul palco, dato che sembrava particolarmente divertente l'ultima volta introdurre una tecnologia che alcuni di voi hanno espresso interesse a progetti finali. Abbiamo pensato che sarebbe stato divertente per portare un volontario, anche se, oggi per mostrarvi un'aggiunta questo che you-- permette sì, Ho visto questa mano prima. Vieni su. Molto ben fatto. Buon lavoro. Ho intenzione di proiettare questo su lo schermo in un attimo. Qual è il tuo nome per tutti? 

EFA: Sono Efa. 

DAVID MALAN: Etha? 

EFA: Efa. 

DAVID MALAN: Efa? 

EFA: Sì. 

DAVID MALAN: Piacere di vederti. Tutto ok. Fammi capire pronto. Vieni su oltre al centrale con Colton qui. Cosa Colton ha nelle sue mani oggi è un telecomando. Quindi, piuttosto che solo stare lì in un mondo tridimensionale a guardarsi intorno come ha fatto Colton, ora può Efa in realtà camminare risalendo, giù, sinistra, destra e come un Controller del Nintendo o Xbox. EFA: Ho intenzione di cadere giù dal palco. DAVID MALAN: lo farò stare più o meno qui. Ma questo è un rischio. OK. Quindi, andare avanti e mettere quelli. Lasciami andare avanti e passare alla schermata qui. Mi permetta di abbassare le luci. E Colton, lasciatemi venire stare accanto a voi. 

Vuoi spiegare qui con il microfono quello che stiamo facendo? Ecco qui. 

COLTON: Certo. Così adesso siamo caricando il Oculus, Immagino operating-- non funziona sistema, ma il programma principale, dove è possibile accedere a tutti i giochi e applicazioni che sono presenti nella libreria. Così adesso, si dovrebbe dire toccare il touchpad per iniziare. Touchpad sarà il lato destro della cuffia. Quindi, andare avanti e tap-- EFA: Oh, uomo. DAVID MALAN: Sì, ci si va. La qualità Efa è vedere è molto più elevata qualità. Questo è solo il Wi-Fi qui. COLTON: Che cosa sei andando a voler fare è guardare verso l'alto destra dello schermo. Sì, quel gioco a destra cima. E poi quando si sta selezionando , toccare di nuovo il touchpad. Credo che le sue Dreadhalls. E poi qui è A-- qui, lasciare mi tengo gli occhiali per te. 

Così ho appena dato un controllore. Così ora si può controllare il gioco. Egli può muoversi e cose del genere. Quindi, andare avanti e guardare fino alla cima. Dovreste vedere New Game. Quindi, andare avanti e si può fare. Ora, si dovrebbe essere in grado di controllare voi stessi con il controller, così, non appena il gioco carica qui. Questo potrebbe essere un po 'paura. 

EFA: Ora dimmi. OK. 

COLTON: Va bene. Quindi, verificare che sia possibile muoversi. OK. È possibile muoversi. Perfetto. Quindi, se si guarda verso il basso, si dispone di una mappa. Mappa mostra dove ti trovi. Si può guardare intorno alla stanza. È completamente può girare intorno. Si Esattamente. Girati. 

Così guardare alla vostra sinistra. Penso che c'è qualcosa che si può salire su una botte in camera. 

EFA: Come faccio ad avere il mappare fuori strada? COLTON: guardare in alto. Basta guardare in alto. Tutto ok. Ci si va. Ora andare avanti e basta girare intorno. Così guardare più a sinistra. Continuate a muovervi a sinistra. Continua a cercare di sinistra. Andare avanti. Già. 

EFA: Oh, in questo modo. 

COLTON: Sì. Camminare verso con il controllore. Ci si va. Ora si dovrebbe dire raccoglierlo. Ci si va. Prendilo. Tutto ok. Ora, andiamo fuori da questa stanza. Vai avanti e raggiungere a piedi quella porta. Quindi hai intenzione di hold-- si dice tenere premuto il tasto per forzarlo aperto. Quindi, andare avanti e tenere premuto il pulsante. Sì, costringendolo aperto. Tutto ok. Buon lavoro. Ora stiamo uscendo dalla stanza. Quindi ho intenzione di lasciare il resto fino a voi e vedere cosa si trova fuori. EFA: Non ho intenzione in camera oscura. Oh, aspetta. Ora devo andare in fondo al corridoio buio? OK, io torno [incomprensibile]. COLTON: Va bene. Alcuni più elementi da raccogliere. Sembra alcune monete. Questo è un grimaldello. Quindi, se si trova un bloccato porta, è possibile utilizzare quello. Hai paura? 

EFA: Non ancora. COLTON: OK. 

Pretend-- sì. Basta far finta di essere in realtà lì. E se si accende around-- hai avuto modo di abituarsi ad esso. Ma ha senso. DAVID MALAN: E mentre continua a Efa giocare, dato che abbiamo potuto fare tutto il giorno, tutti noi possiamo punta di piedi qui fuori. Ma abbiamo altre due coppie, se volete venire e giocare. In caso contrario, vedremo prossimo il Mercoledì. Grazie al nostro volontario oggi. [Applausi] 

[MUSICA - "SEINFELD TEMA"] SPEAKER 1: Beh, io sono mettendo un nuovo PL montare su. Ho appena cambiato il OLPF-- 

SPEAKER 2: Che cosa cosa stai facendo? 

SPEAKER 1: Beh, ognuno di these-- qui, ti faccio vedere questa qui. Potete vederlo qui. 

SPEAKER 3: penso di essere bravo con questi. Ne vuoi ancora un po? 

SPEAKER 4: No, sto bene. [Incomprensibile]. 

SPEAKER 3: No, [incomprensibile]. Avere qualche. SPEAKER 1: Il colore differente. SPEAKER 2: OK. SPEAKER 1: Quindi in definitiva ciò che fa è regola il colore di--