>> [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--