ROGER ZURAWICKI: Ciao a tutti. Posso avere la vostra attenzione? Grazie, ragazzi. Oggi vi voglio parlare di Meteor. Si tratta di un framework JavaScript. Saremo vivendo come si può rendere le applicazioni web davvero cool. 

Prima di entrare in JavaScript, ho appena Voglio dirvi ragazzi che questa volontà effettuato - avrete una successiva piece questo semestre. Dovrebbe essere di circa JavaScript. Penso che [incomprensibile] è prima di andare a coprire il PHP roba web HTML prima passare a JavaScript. E in CS50, JavaScript è considerato come un codice client. Quindi viene eseguito solo in il browser web. 

Ma grazie ai recenti progressi nella tecnologia, siamo ora riusciti a correre JavaScript come server pure. Quindi questo ha creato un davvero cool quadro perché ora si può scrivere legittimamente lo stesso codice per il client e il server. E quando si definiscono le funzioni in server, il client può chiamare quelli stesse funzioni. E rende molto più facile. Mentre prima, se si sta utilizzando PHP su il server, JavaScript sul fronte fine, è necessario scrivere una funzione PHP e poi una versione JavaScript del stessa funzione di fare il stesso tipo di lavoro. 

Quindi, prima di iniziare, voglio visualizzare una demo di quello che Meteor può fare per voi. Vi mostrerò la demo, che è ciò che sarete in grado di creare dal fine di questo seminario. Ci basta andare qui. Si tratta di una applicazione Leaderboard. E 'in realtà basato su l'esempio Meteor che ti dà. 

Meteor è molto bello, perché quando si installarlo come un pacchetto, è possibile fondamentalmente giocare con questi quattro demo. E la classifica è l' prima di queste demo. Dopo il seminario, vi incoraggio tutti esplorare solo gli altri demo perché penso che siano davvero cool, e vi mostrano la potenza di Meteor. 

Così che cosa si tratta, questo è ospitato su Leaderboard. Questo è solo francamente una lista di nomi. Ed è possibile selezionare le persone. Essi ingialliscono. E allora si può dare loro cinque punti. E noterete che la lista è ordinato perché, come mi concedo più e più punti, ora sono al top. Quindi questo è dove iniziamo. 

E ciò che tu sarai in grado di togliere da questo seminario è un po 'di più caratteristiche che ho aggiunto a la classifica. Noi tratteremo come, così come aggiungere cinque punti per un giocatore, possiamo eliminare giocatori, possiamo aggiungere nuovi giocatori, e possiamo scegliere come vogliamo per ordinare loro. E queste sono tutte le chiamate API molto facile Meteor che prevede per voi. Hai anche una funzione qui randomizzare i punteggi. 

Così che cosa è veramente interessante di questo è voi ragazzi può effettivamente tutti vanno al sito. Mi metterò in testo più grande qui. One-radicale-lead erboard.meteor.com. E quando voi ragazzi andare al sito, dovrebbe essere in grado di modificare il sito e tutte le modifiche saranno visibili a tutti gli altri. Così si può - sono ragazzi tutti in grado di connettersi al sito? Quindi, giocare con essa. Vai e avviare l'eliminazione di alcuni nomi. Vedere cosa succede. 

Così si vede tutti possono giocare. Questa è solo la sicurezza di default Modalità di Meteor. Si vede che tutti possono cambiare ogni altri dati. Non ti preoccupare. Meteor ha la sicurezza. Questo è molto facilmente implementato caratteristica, dove si poteva impostare gli utenti e login. Ma in questo momento, chiunque visiti la sito può dare se stessi come molti punti come vogliono. Così ho sempre in questo modo perché questo è un modo divertente per iniziare. E poi ci limiteremo a parlare i dettagli, come Meteor rende questo possibile. 

Quindi ho intenzione di coprire ciò che è Meteor, e poi ci solo bisogno di coprire il due prerequisiti che CS50 non ha coperto a sufficienza. Ma alla fine del termine, si dovrebbe stare bene con HTML e JavaScript per ottenere davvero le mani sporco lavoro con Meteor. E penso che sia solo un ottimo modo per anche meno comodo agli studenti di fare progetti finali perché possono davvero soggiorno in una lingua, e si arriva a vedere le modifiche della loro lavorare subito. 

Quindi questa diapositiva mostra solo alcune delle principali tecnologie che Meteor JS dà a voi. Meteor non è una nuova tecnologia da solo. E 'davvero un agglomerato di tutte queste cose diverse abbiamo su internet. Così come HTML, CSS, JavaScript, abbiamo avere alcune tecnologie come Node.js, che è quello che permette di eseguire JavaScript sul back-end sul Server, nonché alcuni JavaScript biblioteche, come jQuery, Underscore. 

Tutti questi sarà familiare a voi dalla fine del semestre. E abbiamo anche la possibilità di utilizzare un database chiamato MongoDB, che è davvero popolare database ora queste nuove start-up. Si può pensare ad esso come come MySQL, ma funziona molto bene con JavaScript. E ci sono alcune altre tecnologie qui e molti altri che non ho elencato che tutta l'interfaccia davvero bene con Meteor. 

Devo mettere questa diapositiva perché a volte ho confusione su questo. Meteor è solo JavaScript. Non è PHP. Non è Ruby on Rails. Quindi, se si scrive codice, se si vuole scrivere un progetto Meteor, è davvero non è possibile utilizzare il codice Ruby. Davvero non si utilizza PHP. 

Mentre vedremo che le differenze di codice e sintassi potrebbero essere non che diverso, voglio sottolineare a voi che Meteor, tutto quello che il codice è solo in JavaScript. E tutto ciò che si mostra a l'utente sarà CSS HTML. Ma non si sta effettivamente utilizzando uno qualsiasi dei le altre lingue detto altro seminari potrebbero coprire. Che Meteor è anche è un server web. Quindi, anche se non si dispone di alcun JavaScript, e si desidera solo servire File CSS e HTML, Meteor può farlo per voi. 

Ed ecco il link nuovamente al demo che ho avuto voi ragazzi iniziato a giocare con. Ma passiamo a HTML. Quante persone qui hanno idea di cosa HTML è? OK grande. E questo è completamente soddisfacente. Davvero non c'è bisogno di sapere molto su perché andremo oltre l' utilizzo molto semplice. 

Questo è ciò che il semplice La pagina HTML assomiglia. Questo può essere come il tuo ciao, mondo per HTML, che abbiamo iniziato in C con ciao, mondo. Io non voglio che lo stress sul dettagli di ciò che HTML, cosa testa, cosa corpo, quale titolo sta facendo lì. Voglio solo sottolineare la struttura, come avete tags. E questo è le parentesi angolari. Ed è lì che hai i descrittori. 

Così si potrebbe avere il documento HTML. E poi ti chiude il documento HTML con backslash stessa cosa. E si dispone di diversi tipi di tag. E notare che sono tutti abbinati. Avrai come un tag body e poi un tag corpo vicino. E dentro il tag body, che sarà il contenuto della tua pagina web. Così questa pagina web sarebbe semplicemente visualizzare in uno sfondo bianco e testo nero ciao, mondo. Ritiene che ha un senso? OK. 

Ora ho intenzione di fretta coprire JavaScript. Nelle parole di un TF precedente, "JavaScript è il migliore programmazione lingua attualmente esistenti. Altre persone cercheranno di dire il contrario. Si sbagliano. "JavaScript è abbastanza bello, e ti faccio vedere perché. 

Quindi questo è il classico esempio iniziamo con in C. Abbiamo ciao, mondo. E si nota che, anche se si riduce si, devi avere almeno due righe di codice qui. Ho diverse righe di codice. Questo può essere fatto in modo molto semplice. Una linea in JavaScript con console.log, e poi la stringa, ciao, mondo. 

Ora, anche se ci stiamo muovendo in un nuovo il linguaggio Javascript, quasi tutto il competenze che hai imparato codifica in C sono direttamente portatile. Così stringhe, l'idea di stringhe in virgolette, che è la stessa. Il punto e virgola, che è la stessa. 

Una caratteristica accurata su JavaScript in realtà è che si non è necessario il punto e virgola. Si può immaginare che si dovrebbe mettere un punto e virgola là. Ma detto questo, si dovrebbe sempre cercare per mettere i punti e virgola lì. E 'considerato un buon stile. E anche, non c'è nessuna funzione principale. Basta iniziare nella parte superiore del file e leggere riga per riga le cose. 

Allora questo è quello che ci vuole per fare che ciao, il programma mondiale. E poi notare che si deve fare ciao e quindi eseguire ciao. Con JavaScript, è considerato un linguaggio interpretato. Quello che dovete sapere è che non vi è alcun processo. 

Non c'è compilazione. Devi solo eseguire nodo. E ricordate nodo è il programma che verrà eseguito il tuo JavaScript su una console, su una scatola nera, non il sito web. Quindi basta dargli il file, ed è andare in stampa ciao, mondo. 

Io in realtà faccio un po 'di demo che per voi ragazzi proprio qui. Allora andiamo a casa mia Terminale Node.js. OK. Passiamo qui. Quindi ho intenzione di iniziare nodo. E io vi mostrerò voi ragazzi in un solo un secondo come ottenere che installato, se non lo fai. Permettetemi di fare che un po 'più grande. OK. Spero che voi ragazzi possono vedere. 

Così posso scrivere codice come ho fatto io prima in console.log. Ciao, Roger. E notare io non devo fare il punto e virgola, ma poi ho questa strana cosa undefined. Beh in realtà, non importa su la cosa undefined. Cose che voglio farvi notare è che si non è necessario la funzione principale qui per avviare l'esecuzione del codice. E non c'è fine backslash. Ci sono alcune piccole caratteristiche che JavaScript può fare per voi. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Oh yeah. Mi dispiace per questo. E quella freccia significa solo nodo è pronta per un altro comando. Così si può avere fare semplice matematica, come 1 più 1. E proprio come in C, questi matematica simboli sono lo stesso. Posso fare console.log di un numero. E poi la stampa di due. JavaScript è bello in questo senso perché anche se due è un int, come in C, se avete printf con due, si otterrebbe un errore. 

Ma lo sa JavaScript, oh, sei stampare qualcosa. Io vado a bisogno di una stringa. Così mi permetta di convertire che due in una stringa per voi. E si può anche fare qualche roba strana come hi e quindi più due. Questo è solo un altro esempio di come due può essere convertito in là pure. 

Quindi, con quello fuori del modo, cerchiamo di solo coprire un po 'di più JavaScript. Quindi, in C, abbiamo tipi. Ogni volta che abbiamo creato una nuova variabile, si devo dire che è tutto è char * o stringa nel caso CS50. Oppure, se avessimo un numero decimale, abbiamo dovuto dire float. Se avevamo bisogno di un booleano, abbiamo dovuto dire b. E poi una volta abbiamo avuto qualcosa che stato b, doveva rimanere un bool. Non potevamo cambiare magicamente a un int a meno che non abbiamo scritto nel tra parentesi, int di b. 

In JavaScript, non ci sono tipi. Basta pensare ad esso come var. E var è come si crea un nuovo tipo. Così può avere var s è una stringa, var n essendo un galleggiante, e var b essere vera. E una cosa che non si può fare in C è Ora posso dire, dopo quella linea, b equivale a un numero intero. E che funziona bene. Considerando che in C, sarebbe dire come il vostro intero non è un bool. Io non posso farlo per voi. O [incomprensibile] getterebbe un errore. 

E posso rapidamente tornare in nodo e mostrare un po 'di quella funzionalità. Così posso avere una var a. Chiamatela "Apple". Così ora quando si stampa una, Ho la mia stringa, 'Mela'. Ma posso anche ora dicono che un uguale 3. E notare non c'è alcun errore. E un ora uguale a 3. Tutte le domande finora? Sì. 

PUBBLICO: Aspetta, così console.log è fondamentalmente printf, giusto? 

ROGER ZURAWICKI: console.log è il vostro printf. 

AUDIENCE: Giusto. Allora come mai, se basta digitare in otto o [incomprensibile], cosa che fa [Incomprensibile]? 

ROGER ZURAWICKI: Giusto. Così è - la roba in verde viene stampato alla console. E quello che vedremo il prossimo è quando ci muoviamo al web pagina, non farà - JavaScript avrà un HTML template, che tratteremo nel Meteor parte del seminario. Ed è qui che si può dire, dammi il valore di a, e metterà in un il tuo sito web. Perché ogni browser web in realtà ha una piccola consolle. E se hai guardato con molta attenzione, è potrebbe ottenere alcune informazioni, come il tuo printf sta apparendo lì con ogni pagina web si carica. 

AUDIENCE: Come hai alla schermata della shell? 

ROGER ZURAWICKI: Quindi c'è un comando chiamato nodo, e viene fornito con Meteor. Quindi mi limiterò a smettere fuori di lì. Il nodo è il programma che corre JavaScript. Se andate a meteor.com, è può installare Meteor, e Meteor è dotato di nodo. Perché Meteor è solo una raccolta di tutti questi pacchetti software. Quando arriviamo al nostro esempio, lo farò camminare tutti attraverso l'installazione di Meteor, e poi si può giocare con il nodo se stessi. OK, grande. 

Così un altro grande caratteristica di lavorare con JavaScript è loop sono gli stessi. Praticamente esattamente lo stesso. Per i cicli, cicli while, do cicli while, if else. E 'lo stesso con le parentesi graffe. E 'la stessa sintassi. Nel caso di un ciclo for, il piccolo dettaglio che si deve prestare attenzione a è invece di int i è uguale a 0, dobbiamo dire var i è uguale a 0. Ma questo perché le variabili tipi di cui abbiamo parlato prima. 

Si noti che il printf diventa un registro, un console.log. E non abbiamo bisogno di fare il cento p backslash n e poi passare a i. Si può solo dire che ho. E sarebbe stampare i numeri da zero a quattro. Se voi volete provare questo, perché ti ha portato a un buon punto. Se si voleva eseguire questo codice sul tuo proprio browser, vorrei raccomandare che ognuno apre Google Chrome. Google Chrome o qualsiasi altro browser web davvero, ma mi piace Google Chrome perché è molto standardizzato. 

Puoi andare, credo, se a destra fare clic su qualsiasi sito web, proprio nel lo spazio bianco, vedrai un'opzione chiamato Inspect Element. Di solito è l'ultimo. E quando si fa clic, si dovrebbe ottenere una cosa verso il basso visualizzata qui. Lasciatemi zoomare qui. E abbiamo un paio di schede qui. Quello che interessa è console. 

E questo è una console JavaScript che ora si può lavorare. Grande. Così posso digitare la stessa roba Stavo scrivendo prima nel nodo. Uno più uno è due. Var una uguale "Apple". E poi mi piacerebbe stampare una, ed una è 'Apple'. Quindi, in qualsiasi browser web, Firefox, Chrome, Safari, qualunque cosa si usa, come Finché si ha accesso ad un JavaScript console, lo stesso tipo di codice Stavo correndo in nodo che si può essere eseguito nella tua console. 

AUDIENCE: [incomprensibile]? 

ROGER ZURAWICKI: Come arrivare alla console? È necessario fare clic destro su uno spazio vuoto sulla pagina, e poi si va a Inspect Element. Quindi, in realtà, mi piacerebbe che voi ragazzi per fare solo sicuro che si può Inspect Element in Chrome. E vedere quando si digita in qualche codice nella console che venga eseguito correttamente. Sentitevi liberi di fare tutte le domande, se qualcosa che non è chiaro qui. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: qualsiasi tipo, a destra. C'è un solo tipo per tutti variabili in JavaScript. E quando si deve dichiarare una variabile, si dice var. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Già. Lo fa, ma in JavaScript, è molto intelligenti su allocazione di memoria. Non c'è malloc. Non vi è alcuna connessione. Quindi non c'è bisogno di preoccuparsi di questo. Ecco un'altra bella caratteristica che JavaScript fornisce. 

Così mi piacerebbe andare avanti. Vorrei che sia OK? OK. Grande. 

PUBBLICO: Sto avendo problemi trovare il [? Inspect Element. ?] 

ROGER ZURAWICKI: sembra così Safari un po 'diverso, ma non si avere Chrome o Firefox? Questi sono il più facile quelli con cui lavorare. E per i vostri progetti, mi raccomando attaccare con un browser a causa avrai un sacco di bug quasi perché tutti i browser ossequi JavaScript HTML un po 'diverso. Quindi penso che la tua vita sarà molto più facile se vi limitate a Chrome perché è disponibile su tutte le macchine. Ed è un browser piuttosto popolare. OK? 

Così il prossimo argomento che dovremmo Copertura in JavaScript - Mi dispiace per la formattazione qui. Ho dovuto allungare le diapositive da abbinare il proiettore widescreen. Ma mi piacerebbe ora piace parlare come si fa funzioni. In C, dobbiamo dichiarare ogni funzione. Come int aggiungere, e ci vuole un int in x, e un int y, e poi li sommiamo e restituirlo. 

In JavaScript, le funzioni sono in realtà un altro tipo di variabile. Quindi diciamo solo var aggiungere, e è uguale a una funzione. Una funzione che prende un x e y. E che cosa fa quella funzione? Esso restituisce x + y nello stesso esatto sintassi come in C. E si nota che in JavaScript, non sarà detto ciò che l' funzione restituisce perché da variabili non hanno tipi comunque, non è davvero produttivo, credo, da specificando tutti i tuoi Tipi nelle vostre funzioni. E poi quando si chiama una funzione, è la stessa sintassi C. È basta passare nei vostri due argomenti. Mi piacerebbe provare questo nel mio nodo. Posso cambiare la diapositiva? 

AUDIENCE: [incomprensibile]. Riusciremo a ottenere una copia delle diapositive? 

ROGER ZURAWICKI: sì. Quindi torniamo al nodo. OK. Quindi io dico var aggiuntivo è uguale funzione. L'assunzione di un x, prendendo una y. E poi si sa che la propria dichiarazione non completata. Così nel nodo o nella vostra console, si noterà dot dot dot. Così si può continuare a digitare il vostro codice. Ed ora io dico return x + y. E poi chiudere la parentesi. E il momento in cui chiudo la parentesi, si vede che l'istruzione è terminata. 

E ora posso dire aggiungere uno e due. E io prendo tre fuori. Si noti che se ho appena fatto aggiungo, è mi dice che è una funzione. E una cosa solo di prestare attenzione a è se si dà il numero sbagliato di argomenti, si farà. Verrà eseguito, ma si potrebbe ottenere alcuni risultati davvero strano. Un po 'come un valore spazzatura, si può pensare di esso. Quindi, per favore andare avanti e provare questo nel tuo browser. 

OK, nell'interesse di tempo, ti ora passare alle caratteristiche prossime a JavaScript. Così abbiamo parlato funzioni. Abbiamo parlato di cicli, if troppo. La sintassi è la stessa come C e variabili. E ora voglio parlare di array. Mi dispiace che le diapositive ha un po 'tagliato fuori. Ma in realtà, nella prima sezione, tutto il necessario funzionerà. 

Così abbiamo un altro tipo di variabili chiamato array. E usiamo le parentesi quadre per indicare loro. Quindi nel primo esempio, var arr, array vuoto. Questa è la lista vuota, quindi un array contenente elementi. E si può anche avere una matrice con tre corde. In C, ogni elemento dell'array doveva essere dello stesso tipo. 

Ma poiché in JavaScript c'è solo un tipo, gli array può effettivamente avere diversi tipi di valori. Come qui, abbiamo un array con un galleggiante, un bool, e un int. Il modo in cui si ottiene una lunghezza di un array, in realtà non c'è bisogno di usare le dimensioni di o nulla. Hai appena detto array e quindi dot lunghezza. E questa lunghezza punto, si può pensare di che tipo di come una struttura, come ogni matrice ha un campo, una variabile in più all'interno di esso chiamato lunghezza, che tiene traccia di quanto tempo il vostro array è. 

Quindi ho solo fretta per andare in nodi e mostrare voi ragazzi la stessa cosa. Così posso avere una matrice. Può essere la lista vuota. E mi stamperà eseguire una lista vuota. Grande. Ora posso dire che la matrice ha 1 e 2.3, e vero. Così tutti i diversi tipi. E notate che funziona bene. La matrice torno supporti tutti i valori ho dato. 

Se volessi ottenere il primo elemento di la matrice, la sintassi è realtà lo stesso come in C. È può dire matrice zero. E si ottiene uno. Posso dire lo stesso per matrice due, e ottengo vero. Se faccio qualcosa al di fuori della matrice, JavaScript è un linguaggio sicuro perché non voglio avere un guasto seg. Prendo indefinito. 

E questo undefined, è possibile tipo di pensarci come nullo. Ma può essere davvero fastidioso quando si codice perché dovrete controllare che quasi tutto quello che fai, è lavorare non è definito. E vedremo alcuni esempi di questo quando lavoriamo in Meteor. 

Anche se di matrice a quattro è indefinito, Posso assegnare un valore. Quindi io dico che è uguale a uno. E poi se vado a matrice, I avere il valore aggiunto lì. E notare che schiera tre, che anche è stato undefined, soggiorni undefined. Così ora ho un array con un foro nel mezzo. Ma se ho stampato matrice a quattro, Vorrei ottenere uno. Se lo facessi matrice a tre, ho indefinito. 

Così la bella caratteristica che Javascript ti permette di fare è che le liste possono modificare le dimensioni. Array, array essendo liste, cambiano le dimensioni. Ed è possibile specificare qualsiasi posizione all'interno di essi. E tutti i vuoti saranno riempiti con questi valori non definiti. 

Così abbiamo parlato array. Ora, l'ultima cosa che voglio coprire in JavaScript, e questo è molto importante per comprendere il codice che Io vado a mostrarvi, sta per essere oggetti. E gli oggetti sono un termine - Fondamentalmente, sono presenti in molti linguaggi di programmazione. E ogni linguaggio di programmazione piace pensare a loro un po 'diverso. 

Ma penso che per Meteor, una buona analogia è il C struct. In C, se vogliamo trovare la struct studente, avremmo dovuto specificare tutte le cose all'interno di esso. Quindi deve avere un nome. Deve avere un anno. Deve avere un genere. Ma dobbiamo anche dare il tipi di tutte queste cose. 

E ora che abbiamo questo stampo per la struct chiamato studente, si può avere un nuova struttura, e quindi possiamo manualmente dire ciò che ciascuno dei campi sono. Ed è qui che noi usiamo il nome del puntino, dot anno, puntino genere. E poi abbiamo appena, nell'ultima riga di il codice qui, sto solo stampando la nome dello studente struct. 

Nel mondo JavaScript, c'è cosa come studente struct. Tu non generare una struttura preimpostata. In realtà solo, in queste staffe, tu dici che cosa è tutto. Ed è questa notazione strano con l' colon e poi la virgola, ma avrete abituarsi ad esso abbastanza presto. 

E in realtà è davvero facile, modo flessibile di appena la manipolazione di oggetti. Si nota che se voglio ora ottenere nome di s, faccio e basta s.name. Ci sono domande su questo? Questo di solito è stato molto confuso argomento quando introduciamo le persone a JavaScript. Farò alcuni esempi di questo nodo. Sì? 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Quindi lei avere un esempio, aerei variabili di quel tipo. 

AUDIENCE: [incomprensibile]. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: OK. Quindi credo che il modo in cui si dovrebbe andare circa è si dovrebbe mettere gli oggetti in un array, e ora avrete un matrice di oggetti. Questo risponde alla tua domanda? 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: sì. S è un oggetto. Così possiamo andare in nodo e basta giocare un po '. 

AUDIENCE: [incomprensibile]? 

ROGER ZURAWICKI: Oh, OK. Quindi, se stai chiedendo quali classi sono, le classi sono trattati in modo molto diverso, e hanno un regime davvero strano chiamato prototipazione, che non si fa bisogno di conoscere. Non c'è modo fisso per farlo. Quindi, se si desidera generare multipla, sarebbe solo tipo di avere una funzione o qualcosa del genere. Si genera la propria funzione. E si dovrebbe restituire un oggetto. Questo sarebbe il più facile modo per farlo. Ritiene che senso? OK. Grande. Quindi, una volta che abbiamo una comprensione di Oggetti JavaScript, essi sono - oh, sì. 

AUDIENCE: [incomprensibile] esempio, qual è la differenza tra "Roger" con le virgolette doppie rispetto [Incomprensibile] con apici. 

ROGER ZURAWICKI: OK. Quindi questo è in C, abbiamo il singolo citazioni che rappresentano caratteri, e la doppia citazioni che rappresentano stringhe. JavaScript realtà genera questa distanza perché si può avere stringhe con virgolette singole o doppie, e non c'è cosa come un singolo carattere. Ma se hai appena copiato lo stesso Codice C, JavaScript sarebbe trattarlo bene. Quale è il motivo per cui ho trattato come - è per questo che può letteralmente porta il codice in questo senso. 

E voglio mostrarvi un esempio di un oggetto più complicato. Così si può notare che un oggetto può avere stringhe come valori. Si può avere un altro elenco di valori. Si potrebbe avere una lista di oggetti come valori. Non c'è davvero alcun limite a questo. Così qui, è solo una buona dimostrazione di come è possibile ottenere un sacco diversi tipi di corso tutto in un oggetto. Questo senso? 

Ora, si può anche avere array di oggetti. E qui è una specie di simile a quello che si ha chiesto, se si può avere oggetti di dello stesso tipo. Ma il problema è, non c'è fissa formato per oggetti in JavaScript. Quindi, è necessario specificare voi stessi. E si deve fare in modo che sono uniformi. Così qui, quando creo un oggetto, ho fare in modo che ognuno ha una nome, e ognuno ha una casa. 

E poi ho un array di quelli, e che può essere la mia casetta. E poi qui si può tipo di vedere il ciclo for in corso. Il ciclo for essere solo una realtà comune modo di attraversamento su un array in JavaScript. Si noti che questo modello è molto simile all'equivalente C, dove si avere int i è uguale a zero. Io è inferiore alla lunghezza. E poi i plus plus. 

È quasi lo stesso codice, tranne che per alcuni dettagli. Così fa capire a tutti ciò che un oggetto è? Basti pensare che, come una struct C. E il modo in cui si accede ai campi è solo con il punto. E finché si ricorda come utilizzare il punto, andrà tutto bene. 

OK, ora possono tutti leggere quel link? Questo è il link al progetto. C'è qualcuno che sta avendo problemi vedendo il link? Ok, cambiamo allora. Non è - Sì, questo è probabilmente il modo più semplice per farlo. Grande. 

Quindi se andate a questo sito, non ci dovrebbero essere alcune istruzioni che io andare oltre su come possiamo installare Meteor e ottenere il nostro progetto di esempio in esecuzione. Voglio fare in modo ognuno ha il link giù prima mi muovo. Posso andare avanti? OK, grande. 

Così eccomi qui sul sito web. Noterete nel file readme, abbiamo alcune istruzioni su come per ottenere th impostare. È necessario essere in CS50 apparecchio o semplicemente su un Mac. Windows non funzionerà. Ma in fondo tutto ciò che non è Finestre dovrebbero lavorare con questi Istruzioni bene. Ma posso fare un po ' grande pure. 

Quindi dovrete eseguire il primo coppia di comandi. Questi ragazzi saranno solo installare Meteor. Posso andare in mio terminale. E se corro la stessa cosa adesso, Ho già installato. Quindi è un po 'più breve. Si potrebbe prendere un po 'di più per voi ragazzi. Ma voglio prima fare in modo che abbiamo Meteor esecuzione. Dopo Meteor ha installato, si dovrebbe possibile ottenere nodo nella console. 

AUDIENCE: Stanno chiedendo una password. 

ROGER ZURAWICKI: Questo sarebbe il vostro password utente, se siete su un Mac. Ha bisogno solo permesso di modificare alcuni file di sistema. Quindi la domanda è, se ti chiede una password, è solo chiedendo la password utente quando si accede al vostro Mac. Ed è così che si può modificare i file di sistema. 

E quando sei pronto, si può passare al passo successivo, che copierà il codice di esempio che ho dal sito web. E avrai una nuova directory nella vostra home directory chiamata leaderboard, e possiamo iniziare a lavorare da lì. Così sto semplicemente copiando e incollando questi comandi nel mio terminale. E per me, ho già clonato esso. Quindi posso solo ora passare in classifica. E dovrei avere un paio di file in là. Tutte le domande? 

AUDIENCE: [incomprensibile] non funziona. 

ROGER ZURAWICKI: Oh, si potrebbe bisogno git installato pure. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Sorry? 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Oh, OK. OK. Ecco perché si potrebbe aver bisogno di essere login per GitHub per ottenere questo link. Se voi potete vedere che, il più facile modo di farlo vorrei poi dire è scaricare la zip. E questo sarà solo scaricare tutti i file. E poi una volta che lo metti nel tuo scaricare o la vostra directory home - Vi consiglio di metterlo nel vostro home directory in modo che possiamo tutti eseguire gli stessi comandi. Finché abbiamo i file, ci sarà essere in grado di iniziare a lavorare con loro. Fatemi sapere se le persone stanno avendo problemi a scaricare i file. 

PUBBLICO: Per home directory, vuoi dire - 

ROGER ZURAWICKI: Così home directory sarebbe essere John Harvard, se siete in l'apparecchio CS50. Per arrivare alla vostra directory home, basta digitare in C. 

AUDIENCE: [incomprensibile] CS50 apparecchio [incomprensibile]. 

ROGER ZURAWICKI: sì. Si desidera eseguire i comandi nel terminale. 

AUDIENCE: [incomprensibile]. Ho ottenuto un errore che dice no file o directory. 

ROGER ZURAWICKI: Siamo in grado di prendere una rapida rompere e basta assicurarsi che ognuno ha Meteor installato, e io basta andare cercare di aiutare le persone. Si prega di cercare di aiutare l'altro se si sta eseguendo in problemi. Siamo spiacenti, sì. Siete entrambi in macchina? 

AUDIENCE: Già. Ho la RISA 

ROGER ZURAWICKI: OK. Se si va indietro al sito, vai scorrere fino alla cima. E c'è questo HTTPS. 

AUDIENCE: Copia questo? 

ROGER ZURAWICKI: Già. E poi si vuole digitare git clone. Quindi, se si preme Controllo A - 

AUDIENCE: qui? E fare [incomprensibile]? 

ROGER ZURAWICKI: G-I-T. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Git e poi clone. Quindi è molto simile al comando aveva sopra, ma l'indirizzo cambiato. Quindi, prima che fosse questo, ora è questo. Permettetemi di aggiornare il - sì. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: questo viene scaricato. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Oh, così non clonare correttamente. Io rimediare. C'è un errore con il tentativo per scaricare i file. Permettetemi di aggiornare il comando per voi ragazzi così posso essere sicuro che funzionerà. Mi dispiace per questo. Dovrebbe essere lo stesso per Mac o dispositivo CS50. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Ho aggiornato l' comando per la numero due, se si aggiorna la pagina. E con questo, URL, si dovrebbe essere in grado di scaricare i file. 

AUDIENCE: Quindi, se siamo ancora download [incomprensibile]. 

ROGER ZURAWICKI: Se sei ancora scaricando Meteor? 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Sì, se si desidera per sviluppare sul vostro Mac. Ma è necessario lo sviluppatore Xcode strumenti installati. Ho provato questi comandi sul CS50 apparecchio, quindi posso garantire che funzionerà. Sì. lasciatemi andare e ti aiuti. 

AUDIENCE: [incomprensibile]. Io do la mia password. Questo è Mac. E poi faccio [incomprensibile]. 

ROGER ZURAWICKI: OK. Vorrei provare a eseguire tutti i comandi solo nel terminale apparecchio CS50. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: vorrei farlo funzionare prima sul terminale, sulla Apparecchio CS50, e quindi il terminale di Mac. 

AUDIENCE: Quindi, se lo si fa sul CS50 degli elettrodomestici come quella, [incomprensibile]. 

ROGER ZURAWICKI: Vorrei spostare , ma se le persone stanno ancora avendo la creazione di Meteor guai, Kevin è più che felice di aiutare voi ragazzi fuori, Kevin in camicia grigia. Quello che dovremmo avere è che andremo a eseguire l'ultimo comando, numero tre, in il nostro terminale. Quando lo facciamo, noi corriamo Meteor. 

E si dovrebbe - oh, ho già Meteor esecuzione. Quindi non sta andando a lasciare - lasciatemi basta chiudere il mio altro Meteor. Quando eseguo Meteor, è dovrebbe ora vedere che - si dovrebbe vedere la directory corrente che sta servendo. E ora sta per dire al server è in esecuzione su http://localhost. Questo è l'URL che si desidera mettere in nel vostro web browser. 

E su quella URL, si dovrebbe essere in grado di accedere ad un bel po 'di classifica. Quindi, si noti che questo è su localhost, il che significa che se si esegue una modifiche, non stanno andando vedi di ogni altre modifiche. Considerando che sul sito che vi ho mostrato all'inizio, potremmo ottenere modifiche di tutti, perché tutti è stato l'accesso al sito stesso. 

Quindi lasciatemi andare a [? parola?] 3.000. Così si dovrebbe essere in grado di confermare solo che la funzionalità funziona. È possibile selezionare diverse persone, e si può dare loro diversi punti. Quindi io do punti qualcuno. Si può anche vedere che si alzano in classifica. 

Ora, nell'interesse di tempo, sono tre caratteristiche che ho implementato. E stiamo per attuare cancellazione gli utenti come il nostro primo lungometraggio. Ma prima di andare avanti, sono Ci sono delle domande? Hai avuto la tua mano. Sì? 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Potete controllare Meteor che è installato? 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: host locale 3000? E tu sei in macchina CS50? Che posso fare - non c'è bisogno di essere su un Mac. Ciò funzionerà all'interno dell'apparecchio. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Nel normale browser web, sì. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: è Meteor running? Quindi OK, c'è una distinzione. Se si sta eseguendo nel apparecchio, si deve fare localhost all'interno dell'apparecchio. Se si sta eseguendo nel vostro Mac, come me, allora posso fare il mio Mac di Google Chrome. Ma se si sta utilizzando l'apparecchio CS50, devi fare tutto nell'apparecchio. Quindi devi usare Google Chrome nell'apparecchio. 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: E ' ancora non funziona? 

AUDIENCE: [incomprensibile]. 

ROGER ZURAWICKI: Quindi, solo per ripetere, come si accede al sito ora. Hai una URL qui localhost 3000. Se siete in macchina CS50, devi aprire CS50 dell'apparecchio Google Chrome. E in che Google Chrome all'interno del apparecchio, è possibile digitare l'URL, e si dovrebbe vedere una classifica. Quindi ho intenzione di mettere solo fuori al lato qui un po '. E ora ho intenzione di aprire il mio editor di testo qui. Quindi lasciatemi fare in modo che il codice è in ordine. OK. Grande. 

Vorrei ora camminare attraverso il codice un po '. E il primo file mi piacerebbe iniziare con IS leaderboard.html. Sarete in grado di ottenere questo codice dopo il seminario, quindi voglio solo mostrare si sul mio computer cosa succede. Quindi spero che tutti possono vedere questo. Così, all'inizio del file, si avere la nostra testa e il titolo, che è simile a quello che abbiamo visto in ogni documento HTML. E poi stiamo andando ad avere il tag body qui. 

Quello che ho scelto è il principale corpo, in fondo che cosa è andando ottenere visualizzare. Ma ci sono alcuni nuovi non-HTML cose, e che è in doppie parentesi angolari. E questi sono tag modello. Così vedrete qui questa staffa Staffa nuova leaderboard. E questo è una specie di - pensare ad esso come chiamare una funzione per l'HTML. 

Questa è una versione speciale di HTML. E 'la versione che utilizza Meteor, che è il motivo per cui è possibile visualizzare diversi cose, come la classifica nomi e pulsanti. Ma leaderboard ti dice di andare al modello con il nome di classifica. Quindi modello non viene visualizzato in sé, ma è una funzione, in modo che andranno chiamato. E potrai sostituire in tutto questo codice proprio qui in classifica. 

La parte interessante della classifica qui è solo questa tabella. Se hai appena letto, leggete questo codice ad alta voce, dovrebbe essere intuitivo perché leaderboard, tutti noi abbiamo qui è un tavolo. Questa classe roba ID non fare bisogno di preoccuparsi. Basta sapere che c'è una intestazione della tabella. E 'questo thead. 

E si trova un nome e un punteggio. Tutti questi tag, come thtable, thead, ti basta imparare come si va avanti. Non è importante che tu memorizzare questi perché si può solo accedere a qualsiasi riferimento online. O entro la fine del semestre, questi sarà solo essere molto familiare con voi. 

Dopo l'intestazione della tabella, la parte che voglio attirare la vostra attenzione a questo h tag. Perché è tra doppie parentesi quadre, si tratta di un modello. In modo che significa per ciascuno dei giocatori, qualunque giocatori è, dobbiamo visualizzarlo. E andiamo al modello del lettore. 

Se scorriamo un po 'di più - Spero che tutti possono vedere che. Abbiamo il modello del lettore. E questo modello definisce sostanzialmente una cella di una tabella, dove si mette il nome qui e il punteggio. Lo zoom out ora, possiamo vedere che questo pezzo di codice - e che era il nostro giocatore laggiù - definisce una di queste celle. Ogni cosa che clicco diventa giallo. 

Un modo semplice potessi cambiare ora. Assicurarsi Meteor è ancora in esecuzione. Meteor dovrebbe essere un processo server, quindi basta lasciarlo esecuzione quando avete sviluppato. Diciamo che volevo cambiare tutti i nomi o il punteggio. E direi che sto per aggiungere punti qui. Così il cambiamento che ho fatto qui è stato, invece di punteggio, mi aggiungere punteggio punti spaziali. 

Io vado a diminuire, e sono andando a salvare il mio file. E dopo a salvare il mio file, ho bisogno per assicurarsi Meteor è in esecuzione. Mi dispiace. Voglio mostrarvi le modifiche sono stati fatti in tempo reale. Quindi mi limiterò a cambiare un testo. Fare clic su un giocatore. Sto mettendo in tutti i tappi. E dovrebbe essere che se questo funziona correttamente, quando salvo, è sarebbe aggiornare. 

Oh, penso che in questo momento il problema è Io non sono nella directory giusta. OK. Mi dispiace per questo. Quindi, ecco, quello che si nota è il mio cambiamento ha attraversato. Ora dico: voglio tornare il cambiamento. Io voglio tornare a quello che avevo. Sto solo andando a digitare normalmente. Fare clic su un giocatore. 

Nel momento in cui salvarlo, il sito rinfresca per me. E vedo il mio cambiamento su il sito immediatamente. Questa è una caratteristica molto utile in debug perché ora Io non devo - quando scriviamo codice C, non solo abbiamo devono salvare il file, ma abbiamo dovuto farlo e quindi eseguirlo nuovamente. Meteor è molto bello perché a differenza di C, il momento in cui si salva il HTML o File JavaScript, il cambiamento si presenta immediatamente. 

Una domanda è, in questi modelli, come ottengo i valori come lettori o selezionare un nome? Se lo zoom qui nel mio codice, Vedo questo per ogni giocatore. Quindi il modello sa che Ho giocatori in qualche modo. E si sa che non c'è un nome selezionato. Da dove viene questo? Che viene dalla JavaScript. 

E se si va a leaderboard.js, questo di file, ora quando vado qui, abbiamo una pochi comandi definiti. Questa è la sintassi speciale Meteor. Si noti che non è necessario Vars o niente. Ma queste sono solo le strutture su struct su struct o questi oggetti. E tutto quello che sto definendo è il modello chiamata leaderboard. 

Classifica dovrebbe ottenere una cosa chiamata giocatori. E che cosa è giocatori? E 'tutto ciò che restituisce questa espressione. E qual è il nome scelto? E 'un codice più. I dettagli del codice faremo coprire un po 'più tardi. Ma adesso voglio che tu capisca che in questo codice, stiamo prendendo giocatori, e stiamo dando un valore. In questo caso, si tratta di una funzione che viene eseguito. Così possiamo ottenere il valore indietro quando si corre la funzione. Questo è un log. Ritiene che senso? 

Posso cambiare il modo in cui è ordinato. Qui, c'è un oggetto di ordinamento. E che cosa dice questo è ho intenzione di ordinare in base al punteggio decrescente primo e quindi il nome crescente. Se cambio questo a uno, sta andando per ordinare punteggio crescente. Così zero deve essere sulla parte superiore. E quando lo zoom nel mio sito, ora vediamo che il sito aggiornato. E il punteggio è salita. 

La prossima funzione Voglio solo per coprire è clic incremento. Fuori l'interesse di tempo, non lo farò essere in grado di coprire più del Meteor codice, ma ci sono un sacco di risorse disponibile, e sarò qui dopo il seminario. Ma voglio solo per coprire gli eventi leaderboard. Questa sintassi imparerai un po 'più avanti nella lezione. Questo è JavaScript. 

Stiamo solo dicendo che, quando otteniamo un click, ed è in incremento, questa hash significa solo ID. Sul tag ID incremento, allora vogliamo per aggiornare - le parole chiave che voglio da guardare è l'aggiornamento e la selezionare e giocatore. Così quale giocatore selezionato, ci aggiorniamo. E quello che facciamo è incrementiamo il suo punteggio per cinque. E che descrivono la funzionalità abbiamo qui. 

Dopo la fine di questo seminario, faremo essere in grado di vedere alcuni codice più. Ma tornando al mio obiettivo che voglio modificare il sito, ho voluto qui per aggiungere un pulsante Rimuovi così Posso cancellare il giocatore. Quindi, per fare questo, ho bisogno di fare due cose. Ho bisogno di aggiornare il codice HTML, aggiornare il visualizzare, ciò che viene mostrato all'utente, e poi avere qualche JavaScript che quando la viene premuto il pulsante, Meteor sta di fare qualcosa. Sta andando a rimuovere quel giocatore. 

Quindi ci sono un sacco di pezzi di codice che hanno sostanzialmente già stato fatto per me. Se guardo qui, ho già un modo di ottenere il giocatore selezionato. Che è questa roba, se si può vedere. Quindi, se ho appena - Ho intenzione di avere un altro evento. Quindi ho intenzione di copiare quello che ho. Perché questa è una lista, Ho solo bisogno di una virgola. 

Così ora ho intenzione di scegliere Elimina. E allora invece di aggiornamento giocatori, Io vado a fare i giocatori eliminare. E tutti i giocatori cancellare le esigenze è un giocatore selezionato. Quindi questa funzione è tutto abbiamo bisogno. Ho bisogno di aggiungere un po ' HTML qui però. Quindi, se ho scorrere giù qui, questa è la visualizzazione HTML. Abbiamo avuto una cosa qui, che era un un tag. Non è necessario preoccuparsi di questo. 

Ciò che conta per voi è questo ID incremento. E questo è ciò che ci ha permesso di dire, quando abbiamo cliccato incremento, dobbiamo dare cinque punti. E vedrete che questo è un tasto. Questo è ciò che significa il btn. E il testo nel pulsante è dare cinque punti. Così che cosa ho intenzione di fare è che io sono andando a copiare questa linea. Ho intenzione di modificare l'ID da eliminare. E ho intenzione di cambiare il testo qui per cancellarlo. 

Quindi assicuratevi che tutto è salvato. Voglio tornare al mio JavaScript per assicurarsi che ho eliminare in fila qui. Buona. Quindi ho intenzione di salvare entrambi i file. Dopo aver salvato entrambi i file, si può tornare verso il basso. E ora vediamo che abbiamo un pulsante Elimina. E un altro passo. Si nota si potrebbe ottenere un errore perché quando clicco eliminare, nulla sta accadendo. 

Un modo per eseguire il debug di questo è quello di andare torna a Inspect Element. Sto facendo di proposito in modo da poter Vedete come si dovrebbe eseguire il debug qualcosa. In Inspect Element, abbiamo tutto il nostro testo qui. Voglio tornare alla console. E cosa succede quando vado qui è ho qualche tipo di errore. Si dice che non c'è nessun metodo delete. 

Così che cosa sta dicendo è quando vado torna al codice, ho chiamato il giocatore eliminare qui. Cancellare non è in realtà il comando giusto. Quindi, per scoprire qual è il comando giusto si, c'è l'API Meteor. La documentazione che voglio puntare ragazzi a è solo a meteor.com. Così l'ho qui. Questo è proprio così voi ragazzi sapete dove per saperne di più. 

C'è un link alla documentazione. E in fondo, posso solo non trovare per eliminazione. E ciò che si vede, eliminare è in realtà rimuovere. Questo è il comando che Devo chiamare. Quindi, ora che sappiamo che, io vado per cambiare questo eliminare da rimuovere. Così ora, quando torno al mio leaderboard sito, ho intenzione di fare clic su eliminare, e ora me ne sono andato. Non c'è più Roger. E posso andare avanti eliminazione di ogni unico nome fino a quando non ho più niente. 

Quindi era una piccola anteprima di come utilizzare Meteor. Sarete imparando molto di più JavaScript e HTML necessario fare sembrare più bella, che vedremo in di questa settimana [? piece?] impostato per HTML e JavaScript nel prossimo [? piece?] set. 

Quindi non preoccuparsi se non tutti questa roba viene facile a voi. Si da il tempo di il progetto finale. Grazie per presentarsi. Il collegamento aggiornerò subito dopo l' seminario così si può vedere ancora un po ' esempi che ho implementato su come per ottenere la classifica più avanzato che ho su questo sito qui un radicale-leaderboard.meteor. Grazie. 

[Applausi]