ROGER ZURAWICKI: Hallo iedereen. Mag ik uw aandacht? Bedankt, jongens. Vandaag wil ik het hebben over Meteor. Het is een JavaScript-framework. We zullen gaan door hoe je kunt maken echt cool web apps. 

Voordat we in JavaScript, ik willen jullie vertellen dat dit zal worden - u zult een later hebben stuk Dit semester. Het moet ongeveer webbrowser. Ik denk dat [onverstaanbaar] wordt eerst naar betrekking op de web HTML PHP dingen voordat we verhuizen naar JavaScript. En in CS50, JavaScript wordt beschouwd als een client code. Zodat hij alleen wordt uitgevoerd in de webbrowser. 

Maar dankzij de recente ontwikkelingen in technologie, hebben we nu geslaagd draaien JavaScript als server ook. Dus dit heeft geleid tot een echt cool kader, want nu kun je schrijven rechtmatig dezelfde code voor de client en de server. En als je functies definiëren in uw server, kan uw klant bellen die dezelfde functies. En het maakt het een stuk makkelijker. Waar voorheen, als je met behulp van PHP op de server, JavaScript-code op de voorzijde Uiteindelijk moet je een PHP functie schrijven en vervolgens een JavaScript versie van de dezelfde functie te doen de hetzelfde soort werk. 

Dus voordat we beginnen, wil ik aan te tonen u een demo van wat Meteor voor u kan doen. Ik zal u de demo, dat is wat je zult in staat zijn om te creëren door de einde van dit seminar. We gaan hier net. Dit is een Leaderboard app. Het is eigenlijk gebaseerd op het voorbeeld dat Meteor geeft. 

Meteor is erg leuk, want als je installeer het als een pakket, kunt u eigenlijk spelen met deze vier demo's. En de Leaderboard is de eerste van deze demo's. Na het seminar, moedig ik u allen om gewoon verkennen de andere demos omdat ik denk dat ze echt cool, en ze tonen u de kracht van Meteor. 

Dus wat dit is, dit is gehost op Leaderboard. Dit is gewoon ronduit een lijst met namen. En je kunt mensen te selecteren. Ze geel. En dan kun je geven ze vijf punten. En je zult merken dat de lijst gesorteerde want zoals ik geef mezelf meer en meer punten, ik ben nu aan de top. Dus dit is waar we beginnen. 

En wat je zult in staat zijn om mee te nemen van dit seminar is een paar meer functies die ik heb toegevoegd aan de Leaderboard. We zullen met betrekking tot hoe u, evenals voeg vijf punten aan een speler, kunnen we spelers verwijderen, kunnen we nieuwe spelers toe te voegen, en we kunnen kiezen hoe we willen te sorteren. En deze zijn allemaal zeer eenvoudig API-aanroepen dat Meteor biedt voor u. Je hebt ook een feature hier de scores willekeurig. 

Dus wat is echt cool over dit is jullie daadwerkelijk kan allemaal naar de site. Ik zet het in grotere tekst hier. One-radicaal-lood erboard.meteor.com. En wanneer jullie naar de site, gaat u moeten kunnen de site te bewerken, en al uw bewerkingen zichtbaar zal zijn aan iedereen. Zo kunt u - zijn jullie allemaal in staat om verbinding te maken met de site? Zo spel rond met het. Gaan en beginnen met het verwijderen van een aantal namen. Zie wat er gebeurt. 

Zo zie je iedereen kunt spelen. Dit is gewoon de standaard beveiligingsinstellingen modus voor Meteor. Je ziet dat iedereen kan elkaars gegevens te wijzigen. Maak je geen zorgen. Meteor heeft wel beveiliging. Dit is een zeer gemakkelijk te implementeren functie, waar je kon het opzetten van gebruikers en logins. Maar nu, iedereen die een bezoek de site kan zichzelf zo veel geven wijst als ze willen. Dus ik altijd als dit omdat deze is een leuke manier om te beginnen. En dan gaan we gewoon praten over de details, hoe Meteor maakt dit mogelijk. 

Dus ik ga behandelen wat Meteor is, en dan zullen we gewoon moeten betrekking hebben op de twee voorwaarden die CS50 heeft niet genoeg gedekt. Maar tegen het einde van de looptijd, moet u comfortabel met zowel HTML en JavaScript om echt je handen vuile werken met Meteor. En ik denk dat het gewoon een geweldige manier voor nog minder comfortabel studenten te doen afstudeerprojecten want ze kan echt verblijf in een taal, en ze krijgen om zie de veranderingen van hun werken meteen. 

Dus dit diavoorstellingen slechts enkele van de belangrijke technologieën die Meteor JS geeft aan u. Meteoor is geen nieuwe technologie op zijn eigen. Het is echt een conglomeraat van al deze verschillende dingen wij aanbieden op internet. Evenals HTML, CSS, JavaScript, we hebben een aantal technologieën zoals Node.js, dat is wat kun je lopen JavaScript op de back-end van uw server, evenals sommige JavaScript bibliotheken, zoals jQuery, Onderstrepingsteken. 

Al deze zullen bekend zijn je aan het eind van het semester. En we krijgen ook een database genaamd gebruiken MongoDB, dat is een echt populaire databank nu deze nieuwe startups. U kunt hierbij denken aan het als zoals MySQL, maar het werkt erg mooi met JavaScript. En er is een aantal andere technologieën hier en nog veel meer heb ik niet in de lijst dat alle interface-echt mooi met Meteor. 

Ik moet deze dia zetten omdat soms krijg ik verwarring over. Meteor is slechts webbrowser. Het is niet PHP. Het is niet Ruby on Rails. Dus als je code schrijft, als je wilt schrijf een Meteor project, je echt kan Ruby code niet gebruiken. Je echt niet gebruiken PHP. 

Terwijl we zien dat de verschillen in code en syntaxis misschien niet zo anders, ik wil benadrukken aan u dat Meteor, alles wat je code is alleen in JavaScript. En alles wat je te tonen aan zal de gebruiker HTML CSS zijn. Maar je bent niet echt gebruik van een van de andere talen die andere seminaries kunnen dekken. Wat Meteor is ook een webserver. Dus zelfs als je die niet hebt JavaScript, en je wil gewoon om te dienen CSS en HTML-bestanden, Meteor kan dat voor je doen. 

En hier is de link weer naar de demo die ik heb jullie begon te spelen met. Maar laten we verder gaan naar HTML. Hoeveel mensen hier hebben geen idee wat HTML is? OK geweldig. En dat is helemaal prima. Je moet echt niet nodig om veel over te weten het omdat we zullen gaan over de gebruik zeer eenvoudig. 

Dit is wat de eenvoudige HTML-pagina eruit ziet. Dit kan worden als uw hello, wereld voor HTML, terwijl we begonnen in C met hello, wereld. Ik wil niet dat je te benadrukken op de details van wat HTML, wat hoofd, wat lichaam, in welke functie is daar aan het doen. Ik wil gewoon de structuur benadrukken, hoe je tags. En dat is de hoek tussen haakjes. En dat is waar je hebt uw descriptoren. 

Dus je zou de HTML-document. En dan zul je de HTML-document sluiten met backslash hetzelfde. En je hebt verschillende soorten tags. En merken dat ze allemaal zijn afgestemd. Je moet als een body-tag en vervolgens een nauwe body-tag. En in de body-tag, dat zal worden de inhoud van uw webpagina. Dus deze webpagina zou gewoon weer in een witte achtergrond en zwarte tekst hello, wereld. Is dat zinvol? OK. 

Nu ga ik snel dekken webbrowser. In de woorden van een eerdere TF, "JavaScript is de beste programmering taal die nu in het bestaan. Andere mensen zullen proberen om anders vertellen. Ze zijn verkeerd. "JavaScript is vrij leuk, en ik zal je laten zien waarom. 

Dus dit is het klassieke voorbeeld beginnen we met in C. We hebben hello, wereld. En je merkt dat zelfs als je krimpen het, je moet er minstens twee regels code hier. Ik heb een aantal regels code. Dit kan zeer eenvoudig worden gedaan. Een regel in JavaScript met console.log, en dan je touw, hello, wereld. 

Nu, hoewel we gaan verhuizen naar een nieuw taal JavaScript, bijna alle van de vaardigheden die je hebt geleerd door het coderen in C direct draagbaar. Dus strijkers, het idee van strings dubbele aanhalingstekens, dat is hetzelfde. De puntkomma, dat is hetzelfde. 

Een leuk detail over JavaScript eigenlijk u niet de puntkomma niet nodig. Het laat zich raden dat je moet zet er een puntkomma. Maar dat gezegd zijnde, moet je altijd proberen om uw puntkomma daar te zetten. Het wordt beschouwd als een goede stijl. En ook, er is geen hoofdfunctie. Je begint net aan het begin van het bestand en lees dingen regel voor regel. 

Dan is dit wat er nodig is om dat hello, world programma. En dan merken dat je moet maken hallo en voer hallo. Met JavaScript, wordt het beschouwd als een geïnterpreteerde taal. Wat u moet weten is dat is er geen maken. 

Er is geen compileren. Je loopt gewoon knooppunt. En vergeet knooppunt is het programma dat zal uw JavaScript uit te voeren op een console, op een zwarte doos, niet de website. Dus je geeft het het bestand, en het is ter perse gaan hello, wereld. 

Ik zal eigenlijk wel een beetje demo van dat voor jullie hier. Dus laten we gaan over naar mijn Node.js terminal. OK. Laten we hier te verplaatsen. Dus ik ga naar knooppunt te starten. En ik zal jullie laten zien in slechts een seconde hoe om dat te krijgen geïnstalleerd, als je dat niet. Laat me dat een beetje groter. OK. Ik hoop dat jullie kunnen zien. 

Dus ik kan code schrijven zoals ik deed eerder in console.log. Hoi, Roger. En let op, ik heb niet te doen de puntkomma, maar dan krijg ik een raar undefined ding. Nou eigenlijk, laat staan ​​over de undefined ding. Dingen die ik wil dat u opmerkt is dat je niet de belangrijkste functie hier niet nodig om te beginnen lopen code. En er is geen backslash einde. Er is wat weinig functies die JavaScript voor u kan doen. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Oh ja. Het spijt me dat. En die pijl betekent gewoon knooppunt is klaar voor een commando. Dus je kunt het doen eenvoudige wiskunde, zoals 1 plus 1. En net als in C, deze wiskunde symbolen zijn precies hetzelfde. Ik kan console.log van een nummer doen. En dan print twee. JavaScript is mooi in die zin, omdat hoewel twee is een int, zoals in C, als je printf met twee, zou je een foutmelding krijgt. 

Maar JavaScript kent, oh, je bent afdrukken iets. Ik ga naar een string nodig. Dus laat ik dat omzetten twee in een string voor je. En je kunt ook een aantal rare dingen doen als hi en dan plus twee. Dit is slechts een voorbeeld hoe twee kan worden omgezet in daar ook. 

Dus met dat uit de weg, laten we dekken net een beetje meer webbrowser. Dus C, we typen. Wanneer we een nieuwe variabele, we moet zeggen dat is het char * of tekenreeks in het geval CS50. Of als we een decimaal getal, we moesten vlotter zeggen. Als we het nodig een Boolean, we moesten b zeggen. En toen we eenmaal iets dat hadden werd b, het moest een bool blijven. We konden niet op magische wijze veranderen in een int tenzij we schreven in de haakjes, int van b. 

In JavaScript, er geen types. Je denkt alleen maar aan het als var. En var is hoe je een nieuw type te maken. Dus het kan hebben var s zijn een string, var n een float, en var b trouw. En een ding dat je niet kunt doen in C is Ik kan nu zeggen, na die lijn, b gelijk aan een geheel getal. En dat werkt prima. Terwijl in C, zou het zo zegt je integer is geen bool. Dat kan ik niet voor je doen. Of [onverstaanbaar] zou een fout te gooien. 

En ik kan snel terug naar knooppunt te gaan en tonen enkele van deze functies. Dus ik kan een var een hebben. Noem het "Apple." Dus nu bij het afdrukken van een, Ik krijg mijn string 'Apple'. Maar ik kan ook nu zeggen een is gelijk aan 3. En let er is geen fout. En nu is gelijk aan 3. Eventuele vragen tot nu toe? Ja. 

PUBLIEK: Wacht, dus console.log is in principe printf, toch? 

ROGER ZURAWICKI: console.log is uw printf. 

PUBLIEK: Juist. Dus hoe komt het dat als je typt gewoon in acht of [onverstaanbaar], wat betekent dat [Onverstaanbaar]? 

ROGER ZURAWICKI: Juist. Het is dus - het spul in het groen wordt afgedrukt op de console. En wat we hierna zien is als we verhuizen naar het web pagina, zullen wij niet doen - JavaScript wordt met een HTML template, die ik zal gaan in de Meteor deel van het seminar. En dat is waar je kunt zeggen, geef mij de waarde van a, en zal een in gezet uw website. Omdat elke web browser eigenlijk heeft een kleine console. En als je keek heel voorzichtig, je zou wat informatie te krijgen, zoals je printf is verschijnen er met iedere webpagina die u laadt. 

Publiek: Hoe ben je naar de shell scherm? 

ROGER ZURAWICKI: Dus er is een commando riep knooppunt, en het komt met Meteor. Dus ik zal gewoon stoppen eruit. Knooppunt is het programma dat loopt webbrowser. Als je naar meteor.com, u kan Meteor installeren en Meteoor komt met node. Omdat Meteor is gewoon een verzameling van al deze softwarepakketten. Als we in ons voorbeeld, zal ik loopt iedereen door het installeren Meteoor, en dan kun je spelen met het knooppunt zelf. OK, geweldig. 

Dus een andere leuke functie over werken JavaScript is lussen zijn hetzelfde. Vrijwel precies hetzelfde. Voor loops, terwijl loops, doen while loops, indien anders. Het is allemaal het zelfde met de bretels. Het is dezelfde syntax. Bij een lus, de kleine detail dat je moet letten om in plaats van int i gelijk is aan 0, we moeten zeggen var i gelijk is aan 0. Maar dat komt omdat van de variabelen types die we over hadden. 

Merk op dat de printf wordt een logboek, een console.log. En we hoeven niet om het percentage te doen p backslash n en vervolgens doorgeven in i. U kan ik alleen maar zeggen. En het zou de nummers af te drukken nul tot vier. Als jullie dit willen proberen, omdat je bracht een goed punt. Als je wilde om deze code uit te voeren op uw eigen browser, zou ik adviseren dat iedereen opent Google Chrome. Google Chrome of een web browser echt, maar ik hou van Google Chrome want het is zeer gestandaardiseerd. 

U kunt naar, ik denk, als je gelijk klik op een website, alleen in de witte ruimte, zult u een optie zien riep Inspect Element. Het is meestal het laatste. En wanneer u erop klikt, moet je een ding om de bodem verschijnen hier. Laat me hier te zoomen. En we hebben een paar tabbladen hier. Degene die je geeft is de console. 

En dit is een JavaScript-console dat je nu kunt werken. Geweldig. Dus ik kan typen in dezelfde dingen Ik was in te tikken knooppunt. Een plus een is twee. Var a is gelijk aan "Apple". En dan zou ik een af ​​te drukken, en een is 'Apple'. Dus in elke web browser, Firefox, Chrome, Safari, wat je ook gebruikt, als Zolang u toegang tot een webbrowser hebben console dezelfde soort code Ik liep in knoop je kan draaien in je eigen console. 

PUBLIEK: [onverstaanbaar]? 

ROGER ZURAWICKI: Hoe krijgen op de console? U moet rechts klikken op lege ruimte op de pagina, en dan ga je naar Inspect Element. Dus eigenlijk, wil ik jullie om maar zorg ervoor dat je kunt Inspect Element in Chrome. En zien wanneer u typt in sommige code in de console dat het loopt goed. Voel je vrij om vragen te stellen of iets niet duidelijk hier. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Elk type, rechts. Er is slechts een type voor alle variabelen in JavaScript. En als je te verklaren een variabele, zeg je var. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Yeah. Het doet, maar in JavaScript, is het zeer slim over het toewijzen van geheugen. Er is geen malloc. Er is geen vrij. Dus je hoeft geen zorgen te maken over dat. Dat is een andere leuke feature die JavaScript biedt. 

Dus ik wil graag om verder te gaan. Zou dat wel goed? OK. Geweldig. 

Publiek: Ik ben gewoon problemen vinden van de [? Inspect Element. ?] 

ROGER ZURAWICKI: So Safari looks een beetje anders, maar weet je hebben Chrome of Firefox? Deze zijn gemakkelijker degenen om mee te werken. En voor uw projecten, adviseer ik steken met een browser, omdat je zult een hoop bugs bijna krijgt omdat elke browser traktaties JavaScript HTML een beetje anders. Dus ik denk dat je leven zal een stuk zijn makkelijker als u zich aan Chrome omdat Het is beschikbaar op alle machines. En het is een vrij populaire browser. OK? 

Dus het volgende onderwerp dat we moeten dekken in JavaScript - Het spijt me van de opmaak hier. Ik moest de dia's aan te passen rekken de breedbeeld projector. Maar ik zou nu graag hebben over hoe je functies uit te voeren. In C, moeten we verklaren elke functie. Zoals int toe te voegen, en het duurt een int in x, en een int y, en dan voegen we en terug te sturen. 

In JavaScript, functies zijn eigenlijk andere variabele type. Dus we zeggen var voegen, en deze gelijk is aan een functie. Een functie die een x en een y neemt. En wat doet die functie doen? Het keert x plus y in exact dezelfde syntax als in C. En je merkt dat in JavaScript, zult u niet verteld wat de functie geeft want sinds variabelen niet typen hebben hoe dan ook, het het is niet echt productief, denk ik, te specificeren alle soorten in uw functies. En dan wanneer je een functie aan te roepen, het is exact dezelfde syntax als C. U gewoon langs in uw twee argumenten. Ik wil deze proberen in mijn node. Kan ik de glijbaan? 

PUBLIEK: [onverstaanbaar]. Krijgen we een kopie van de dia's? 

ROGER ZURAWICKI: Ja. Dus laten we terugkeren naar knooppunt te gaan. OK. Dus ik zal zeggen var add gelijk functie. Inname van een x, het nemen van een y. En dan weet dat de instructie niet voltooid. Dus in het knooppunt of in je console, je zult merken dot dot dot. Zodat u kunt blijven typen van uw code. En nu zal ik zeggen return x plus y. En sluit de brace. En het moment dat ik sluit de brace, het ziet dat de verklaring is voltooid. 

En nu kan ik zeggen voeg een en twee. En ik krijg drie. Merk op dat als ik gewoon toe te voegen, het vertelt me ​​dat het een functie. En een ding alleen maar om aandacht te besteden aan is als je het de verkeerde aantal argumenten, zal het maken. Het zal lopen, maar je zou kunnen krijgen sommige echt raar resultaten. Zoiets als een vuilnis waarde, je kunt denken. Dus ga je gang en probeer dit in uw browser. 

OK, dus in het belang van de tijd, zal ik nu verder met de volgende functies in JavaScript. Dus we hebben gesproken over functies. We hebben gesproken over loops, als verklaringen ook. De syntax is hetzelfde als C en variabelen. En nu wil ik het hebben over arrays. Het spijt me dat de dia's kreeg een beetje afgesneden. Maar eigenlijk, in het eerste deel, alles wat je nodig zal werken. 

Dus we hebben een ander type voor variabelen genoemd arrays. En we gebruiken vierkante haken te duiden. Dus in het eerste voorbeeld, var arr, lege array. Dit is de lege lijst, dus een array die geen elementen. En je kunt ook een array met drie snaren. In C, elk element in de array moest hetzelfde type zijn. 

Maar omdat in JavaScript is er slechts een type, arrays kan eigenlijk verschillende typen waarden. Net als hier, hebben we een array met een vlotter, een bool, en een int. De manier krijg je een lengte van een array, je eigenlijk niet hoeft te gebruiken grootte van of iets. Je gewoon scala zeggen en dan dot lengte. En deze dot lengte, kunt u denken aan het als een soort van structuur, hoe elk array heeft een veld, een extra variabele erin genaamd lengte, die houdt bij hoe lang je array is. 

Dus ik ben gewoon snel gaan in te gaan knooppunt en tonen jullie hetzelfde. Dus kan ik een array. Het kan de lege lijst zijn. En het zal me drukken terug een lege lijst. Geweldig. Ik kan nu zeggen dat de array heeft 1, en 2.3, en waar. Dus alle verschillende soorten. En je merkt het werkt prima. De array ik rugsteunen alle van de waarden die ik gaf. 

Als ik wilde het eerste element van krijgen de array, de syntax is eigenlijk hetzelfde als in C. U kan matrix nul zeggen. En je krijgt een. Ik kan hetzelfde voor matrix zeggen twee, en ik krijg waar. Als ik iets doe buiten de array, JavaScript is een veilige taal omdat ik een seg storing niet zal krijgen. Ik krijg undefined. 

En deze undefined, kan je soort van denken over het als null. Maar het kan echt vervelend zijn als je code want je moet om te controleren of bijna alles wat je doet, je werken is niet gedefinieerd. En we zullen een aantal voorbeelden van te zien dit wanneer we werken in Meteor. 

Hoewel de serie vier ongedefinieerd, Ik kan het toekennen van een waarde. Dus ik zal zeggen dat het gelijk is aan een. En dan als ik naar array, I hebben er de extra waarde. En merk op die array drie, die ook werd undefined, blijft undefined. Dus ik heb nu een array met een gat in het midden. Maar als ik gedrukt serie vier, Ik zou krijgen. Als ik dat deed reeks drie, krijg ik undefined. 

Dus de leuke feature die JavaScript stelt u in staat om te doen is dat de lijsten kan grootte veranderen. Arrays, arrays zijnde lijsten, ze veranderen grootte. En u kunt elke locatie op te geven binnenkant van hen. En alle gaten worden gevuld deze ongedefinieerde waarden. 

Dus we hebben gesproken over arrays. Nu, het laatste wat ik wil gaan in JavaScript, en dit is zeer belangrijk het begrijpen van de code die Ik ga je laten zien, zal objecten. En objecten zijn een begrip in - principe, zij aanwezig zijn vele programmeertalen. En elke programmeertaal graag van hen denken een beetje anders. 

Maar ik denk dat voor Meteor, een goede analogie is de C struct. In C, als we willen dat de structuur te vinden student, zouden we moeten opgeven alle dingen erin. Dus het heeft een naam hebben. Het moet een jaar. Het moet een geslacht hebben. Maar we hebben ook te geven de types van al die dingen. 

En nu hebben we deze vorm voor de struct genaamd student, kunnen we een nieuwe structuur, en dan kunnen we handmatig zeggen wat elk van de velden. En dat is waar we gebruik dot naam, dot jaar, dot geslacht. En dan zijn we gewoon, in de laatste regel van code hier, ik ben gewoon het afdrukken van de de naam van de struct student. 

In de JavaScript-wereld, is er niet zoiets als struct student. U hoeft niet het genereren van een vooraf ingestelde structuur. Je eigenlijk alleen maar in deze beugels, je zegt wat alles is. En het is een raar aantekening met de dikke darm en vervolgens de komma, maar u zult wennen snel genoeg. 

En het is eigenlijk een heel eenvoudig, flexibele manier van slechts manipuleren van objecten. Je merkt dat als ik wil nu krijgen naam van s, ik doe s.name. Zijn er nog vragen over dit? Dit meestal een zeer verwarrend is geweest onderwerp als we mensen kennis te JavaScript. Ik zal wat voorbeelden van dit in knooppunt. Ja? 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Jij ook een voorbeeld, verschillende variabelen van dat type. 

PUBLIEK: [onverstaanbaar]. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: OK. Dus ik denk dat de manier waarop je zou gaan over is zou je objecten in een array te zetten, en nu heb je een hebt array van objecten. Is dat een antwoord op je vraag? 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Ja. S is een object. Dus we kunnen gaan in het knooppunt en gewoon spelen een beetje rond. 

PUBLIEK: [onverstaanbaar]? 

ROGER ZURAWICKI: Oh, OK. Dus als je vraagt ​​welke klassen zijn, klassen zijn zeer verschillend behandeld, en ze hebben een echt raar regeling genaamd prototyping, welke niet moet weten over. Er is geen vaste manier om het te doen. Dus als je wilt meerdere, je genereert zou gewoon een soort van een functie of zoiets. Je genereert je eigen functie. En je zou een object terug. Dat zou het makkelijkst manier om het te doen. Is dat logisch? OK. Geweldig. We dus eens een goed begrip van JavaScript voorwerpen ze - oh, ja. 

PUBLIEK: [onverstaanbaar] Bijvoorbeeld, wat is het verschil tussen "Roger" dubbele aanhalingstekens versus [Onverstaanbaar] met enkele quotes. 

ROGER ZURAWICKI: OK. Dus dit is in C, hebben we de enige citaten vertegenwoordigen tekens, en dubbele citaten vertegenwoordigen snaren. JavaScript gooit eigenlijk dit weg omdat je snaren met u hebben enkele of dubbele aanhalingstekens, en er is niet zoiets als een enkele char. Maar als je gewoon gekopieerd hetzelfde C-code, JavaScript zou behandel het prima. Dat is waarom ik behandeld als - dat is waarom ik letterlijk kan poort de code in die zin. 

En ik wil u een voorbeeld zien van een gecompliceerd object. Dus je kunt merken dat het ene object kan strings als waarden hebben. Het kan nog een lijst met waarden. Het kan een lijst zijn objecten als waarden. Er is echt geen limiet aan deze. Dus hier, het is gewoon een goede demonstratie hoe je veel kunt krijgen verschillende types gaande alles in een object. Heeft dit zin? 

Nu, kunt u ook arrays van objecten. En hier is een beetje vergelijkbaar met wat je vroeg, als je voorwerpen kunt hebben hetzelfde type. Maar het probleem is, is er geen vaste formaat voor objecten in JavaScript. Dus je moet ze zelf aan te geven. En je moet ervoor zorgen dat ze uniform. Dus hier, wanneer ik een object te maken, ik heb om ervoor te zorgen dat elk heeft een naam, en elk heeft een huis. 

En dan heb ik een array van die, en dat kan mijn huisje zijn. En dan hier kunt u soort zie de lus aan de hand. De lus wordt gewoon echt een gemeenschappelijke manier te doorkruisen over een array in JavaScript. Merk op dat dit patroon is zeer vergelijkbaar aan de C-equivalent, waar u hebben int i gelijk is aan nul. ik kleiner is dan de lengte. En dan heb ik plus plus. 

Het is bijna dezelfde code, behalve een paar details. Dus doet iedereen begrijpt wat een object is? Denk maar aan het als een C struct. En de manier waarop je toegang tot de velden is gewoon met de stip. En zolang je weet hoe je Gebruik de stip, zul je wel goed. 

OK, dus nu kan iedereen lees die link? Dit is de link naar het project. Is er iemand problemen het zien van de link? OK, laten we dan veranderen. Het is niet - Ja, dat is waarschijnlijk de gemakkelijkste manier om het te doen. Geweldig. 

Dus als je naar deze site, er moet een aantal instructies die ik zal gaan over hoe we Meteor kan installeren en krijg onze steekproef project lopen. Ik wil ervoor zorgen dat iedereen heeft de link naar beneden voordat ik beweeg. Kan ik verder gaan? OK, geweldig. 

Dus hier ben ik op de website. U zult merken in de readme-bestand, hebben we een aantal instructies over hoe te krijgen e zetten. U moet zich hetzij in de CS50 toestel of gewoon op een Mac. Windows zal niet werken. Maar eigenlijk alles dat is niet Windows zou moeten werken met deze instructies prima. Maar ik kan het een beetje te maken ook groter. 

Dus kom je de eerste paar opdrachten. Deze jongens zullen gewoon Meteor installeren. Ik kan gaan in mijn terminal. En als ik zonder het zelfde ding nu, Ik heb al geïnstalleerd. Dus het is een beetje korter. Het is misschien een beetje langer duren voor jullie. Maar ik wil eerst zeker dat we Meteor lopen. Na Meteor heeft geïnstalleerd, moet u in staat zijn om het knooppunt te krijgen in de console. 

PUBLIEK: Ze vragen voor een wachtwoord. 

ROGER ZURAWICKI: Dat zou je kunnen gebruikerswachtwoord, als je op een Mac. Het toestemming moet gewoon bepaalde systeembestanden te wijzigen. Dus de vraag is, als het u vraagt ​​om een wachtwoord, het is gewoon je vragen voor uw gebruikersnaam wachtwoord wanneer u inlogt op uw Mac. En dit is, zodat u kunt systeembestanden veranderen. 

En als je klaar bent, kun je verder gaan de volgende stap, die kopieer voorbeeldcode heb ik van de website. En je krijgt een nieuwe map in uw home-directory genaamd leaderboard, en we kunnen beginnen te werken vanaf daar. Dus ik ben gewoon te kopiëren en deze plakken commando in mijn terminal. En voor mij, ik gekloond het al. Dus ik kan gewoon nu bewegen in leaderboard. En ik moet een paar hebben bestanden in. Heeft u nog vragen? 

PUBLIEK: [onverstaanbaar] werkt niet. 

ROGER ZURAWICKI: Oh, zou je git geïnstalleerd moet ook. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Sorry? 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Oh, OK. OK. Dat komt omdat je zou moeten zijn ingelogd op GitHub om deze link te krijgen. Als jullie dat kunnen zien, is de gemakkelijkste manier om het te doen ik zou dan zeggen is downloaden van de zip. En dit zal gewoon downloaden alle bestanden. En dan als je het eenmaal in je downloaden of je home directory - Ik raad je het in je home directory, zodat we allemaal kunnen lopen dezelfde opdrachten. Zolang we hebben de bestanden, zullen we in staat zijn om te beginnen werken met hen. Laat me weten als mensen hebben problemen het downloaden van de bestanden. 

Publiek: Door home directory, je bedoelt - 

ROGER ZURAWICKI: Dus home directory zou zijn John Harvard, als je in de CS50 apparaat. Om uw home directory te krijgen, typ je gewoon in C. 

PUBLIEK: [onverstaanbaar] CS50 apparaat [onverstaanbaar]. 

ROGER ZURAWICKI: Ja. U wilt de opdrachten uit te voeren in uw terminal. 

PUBLIEK: [onverstaanbaar]. Ik heb een fout die niet zegt bestand of map. 

ROGER ZURAWICKI: We kunnen snel nemen breken en gewoon ervoor zorgen dat iedereen heeft Meteor geïnstalleerd, en ik zal ga gewoon proberen om mensen te helpen. Probeer elkaar te helpen als je draait in de problemen. Sorry, ja. Bent u zowel in het toestel? 

PUBLIEK: Ja. Ik heb de RISA 

ROGER ZURAWICKI: OK. Als je terug naar de website te gaan, ga omhoog naar de top. En er is een HTTPS. 

PUBLIEK: Kopieer dit? 

ROGER ZURAWICKI: Yeah. En dan wil je typ git clone. Dus als u op Control A - 

PUBLIEK: Hier? En doe [onverstaanbaar]? 

ROGER ZURAWICKI: G-I-T. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Git en dan klonen. Dus het is zeer vergelijkbaar met de opdracht die u had boven, maar de URL veranderd. Dus voordat het dit was, nu is het dit. Laat me het actualiseren van de - ja. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Dit wordt gedownload. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Oh, dus het niet correct te klonen. Ik zal dat bevestigen. Er is een fout met het proberen om de bestanden te downloaden. Laat ik het actualiseren van de opdracht voor jullie dus ik kan er zeker van dat het zal werken. Het spijt me dat. Het moet hetzelfde zijn voor Mac's of CS50 apparaat. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Ik heb bijgewerkt de opdracht voor nummer twee, indien u de pagina te vernieuwen. En met dit, URL, je zou moeten zijn in staat om de bestanden te downloaden. 

Publiek: Dus als we nog steeds downloaden [onverstaanbaar]. 

ROGER ZURAWICKI: Als je nog steeds het downloaden Meteor? 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Ja, als je wilt te ontwikkelen op je Mac. Maar je moet de Xcode developer nodig tools geinstalleerd. Ik heb deze commando's getest op de CS50 toestel, dus kan ik garanderen dat het zal werken. Ja. laat me gaan en je te helpen. 

PUBLIEK: [onverstaanbaar]. Ik ben mijn wachtwoord geven. Dit is Mac. En dan doe ik [onverstaanbaar]. 

ROGER ZURAWICKI: OK. Ik zou proberen draaien alle opdrachten uitsluitend in het CS50 apparaat terminal. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Ik zou het werkend te krijgen eerst de terminal, op de CS50 apparaat, en vervolgens de Mac terminal. 

PUBLIEK: Dus als je het op de CS50 apparaat verwijderen als dat, [onverstaanbaar]. 

ROGER ZURAWICKI: Ik wil graag verhuizen op, maar als mensen nog steeds problemen moeite het opzetten van Meteor, Kevin is meer dan helpen u graag bij jongens, Kevin in het grijze shirt. Wat we moeten hebben is dat we gaan lopen de laatste opdracht, nummer drie, in onze terminal. Als we dat doen, zullen we lopen Meteor. 

En je moet - oh, ik heb al Meteor lopen. Dus het is niet van plan te laten - laat me net sluit mijn andere Meteor. Wanneer ik Meteor, u moet nu zien dat - moet u de huidige directory te zien dat het serveren. En nu het gaat om de server te zeggen draait op http://localhost. Dat is de URL die u wilt zetten in in uw webbrowser. 

En op die URL, moet u in staat om toegang tot een leuke kleine leaderboard. Zo merken dat dit op localhost, wat betekent dat als u doen veranderingen, je bent niet van plan om zie elkaars veranderingen. Overwegende dat op de website heb ik laten zien aan het begin, konden we wijzigingen van iedereen omdat iedereen werd de toegang tot dezelfde website. 

Dus laat me gewoon naar [? woord?] 3000. Dus je moet in staat zijn om gewoon te bevestigen dat de functionaliteit werkt. U kunt verschillende mensen te selecteren, en je kunt ze verschillende punten geven. Dus ik geef iemand punten. Je kunt ook zien dat ze stijgen in rang. 

Nu, in het belang van de tijd, is er zijn drie functies die ik heb uitgevoerd. En we gaan implementeren verwijderen gebruikers als onze eerste speelfilm. Maar voordat we verder gaan, zijn er nog vragen? Je had je hand omhoog. Ja? 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Kun je controleren dat Meteor is geïnstalleerd? 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Lokale gastheer 3000? En je bent in de CS50 apparaat? Ik kan doen - je hoeft niet te worden op een Mac. Dit werkt in het toestel. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: In de normale webbrowser, ja. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Is Meteor running? Nou ja, er is een onderscheid. Als u gebruik maakt van het in de toestel, je hoeft te doen localhost binnen het apparaat. Als u gebruik maakt van het in je Mac, zoals ik ben, dan kan ik doen mijn Mac Google Chrome. Maar als je met de CS50 apparaat, je moet alles doen in het toestel. Dus je moet gebruik maken van Google Chroom in het toestel. 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Het is nog steeds niet? 

PUBLIEK: [onverstaanbaar]. 

ROGER ZURAWICKI: Dus gewoon om te herhalen, hoe krijg je toegang nu de website. Je hebt een URL hier op localhost 3000. Als je in de CS50 apparaat, je moet CS50 openen toestel van Google Chrome. En in dat Google Chrome binnen de apparaat, kunt u in die URL, en je moet een leaderboard te zien. Dus ik ga gewoon zet het uit aan de kant hier een beetje. En nu ga ik open mijn teksteditor hier. Dus laat me maar zorg ervoor dat de code in orde is. OK. Geweldig. 

Ik wil nu eerst door de code een beetje. En het eerste bestand zou ik willen beginnen met IS leaderboard.html. Je zult in staat om deze code te krijgen na het seminar, dus ik wil gewoon laten zien u op mijn computer wat er gaande is. Dus ik hoop dat iedereen kan dit zien. Dus aan het begin van het bestand, we hebben ons hoofd en de titel, die is vergelijkbaar met wat we zagen in elk HTML-document. En dan gaan we hebben de body-tag hier. 

Wat ik heb gekozen is de belangrijkste lichaam, eigenlijk wat is gaat krijgen weergegeven. Maar er zijn enkele nieuwe niet-HTML dingen, en dat is in de dubbele punthaken. En dit zijn template tags. Zo zult u hier ziet deze beugel bracket nieuwe leaderboard. En dit is een soort van - denk aan het als het aanroepen van een functie voor HTML. 

Dit is een speciale versie van HTML. Het is de versie die Meteor gebruikt, die is de reden waarom je anders kunt weergeven dingen, zoals het leaderboard namen en knoppen. Maar leaderboard vertelt dat je naar de sjabloon met de naam leaderboard. Dus sjabloon wordt niet weergegeven door zelf, maar het is een functie, dus het wordt gecalled. En je zult vervangen in dit alles code hier in leaderboard. 

Het interessante deel van leaderboard hier is gewoon deze tabel. Als je net hebt gelezen, lees deze code hardop, moet het intuïtief omdat leaderboard, alles wat we hier hebben is een tafel. Deze ID klasse dingen die je niet zorgen te maken over. Weet gewoon dat er een tafel header. Dat is dit thead. 

En het vindt een naam en een score. Al deze labels, zoals thtable, thead, je moet alleen leren als je verder gaat. Het is niet belangrijk dat je onthouden deze want je kunt zomaar een toegang Reference Online. Of aan het einde van het semester, deze zal gewoon zijn zeer vertrouwd met jou. 

Na de kop van de tabel, de deel dat ik wil tekenen uw aandacht voor is dit h tag. Omdat het in dubbele haken, het is een sjabloon. Dat betekent voor elke speler, wat spelers, we moeten weer te geven. En we gaan naar de speler sjabloon. 

Als we naar beneden scrollen een beetje meer - Ik hoop dat iedereen kan dat zien. We hebben de speler sjabloon. En dit sjabloon definieert in feite een tabelcel, waar je in de naam hier en de score. Uitzoomen nu, kunnen we zien dat dit stuk code - en dat was onze speler daar beneden - vermeldt een van deze cellen. Elk ding dat ik klik wordt geel. 

Een eenvoudige manier kon ik het nu veranderen. Zorg ervoor Meteor nog loopt. Meteoor moet een server proces, zodat u gewoon laten uitgevoerd wanneer u ontwikkeld. Laten we zeggen dat ik wilde veranderen alle namen of de score. En ik zou zeggen ik ga om punten hier toevoegen. Dus de verandering die ik hier gemaakt was, in plaats van alleen score, I voeg score ruimte punten. 

Ik ga om uit te zoomen, en ik ben ga mijn bestand op te slaan. En nadat ik mijn dossier, moet ik om ervoor te zorgen Meteor draait. Sorry daarvoor. Ik wil je laten zien bewerkingen werden gedaan in real time. Dus zal ik gewoon wat tekst te veranderen. Klik op een speler. Ik zet het in hoofdletters. En het moet zijn dat als dit werkt goed, toen ik sla het op, het zou werken. 

Oh, ik denk dat nu het probleem is Ik ben niet in de juiste directory. OK. Het spijt me dat. Dus hier, wat je opvalt is mijn verandering ging door. Zeggen nu wil ik de verandering terug. Ik wil terug naar wat ik had. Ik ga gewoon normaal typen. Klik op een speler. 

Op het moment dat ik het heb opgeslagen, de website verfrist voor mij. En ik zie mijn verandering op de site onmiddellijk. Dit is echt een handige functie in debuggen want nu Ik hoef niet te - wanneer we schrijven C-code, niet alleen hebben we hebben om het bestand op te slaan, maar we moesten maken en dan weer draaien. Meteor is erg leuk omdat in tegenstelling tot C, het moment dat u uw HTML of opslaan JavaScript-bestand, de verandering verschijnt onmiddellijk. 

Een vraag is, in deze templates, hoe krijg ik de waarden als spelers of selecteer een naam? Als ik in te zoomen hier in mijn code, Ik zie dit voor elke speler. Dus de sjabloon weet dat Ik heb de spelers een of andere manier. En hij weet dat er een gekozen naam. Waar komt dit vandaan? Dat afkomstig is van de webbrowser. 

En als je naar leaderboard.js, dit file, nu als ik ga hier, we hebben een paar commando's gedefinieerd. Dit is speciaal Meteor syntax. Merk op dat je niet nodig hebt vars of iets. Maar dit zijn slechts structs op structs op structs of deze objecten. En alles wat ik definiëren is de template genoemd leaderboard. 

Leaderboard zou een te krijgen ding genaamd spelers. En wat is de spelers? Het is wat deze uitdrukking terug. En wat is gekozen naam? Het is wat meer code. De details van de code die we zult bestrijken een beetje later. Maar nu ik wil dat je begrijpt dat in deze code, nemen we spelers, en we geven er een waarde aan. In dit geval is een functie dat wordt uitgevoerd. Dus we kunnen de waarde terug te krijgen wanneer we lopen de functie. Dit is een logboek. Is dat logisch? 

Ik kan de manier waarop het wilt sorteren. Hier is er een soort object. En wat dit zegt is dat ik ga om te sorteren door score aflopend eerste en dan naam oplopend. Als ik dit wijzigen in een, het gaat tot score oplopende. Dus nul moet worden op de top. En toen ik inzoomen op mijn website, we nu zien dat de website bijgewerkt. En de score stijgen. 

De volgende functie Ik wil gewoon te dekken is klik increment. Uit het belang van de tijd, zal ik niet in staat zijn om meer van de Meteor dekken code, maar er zijn tal van middelen beschikbaar zijn, en ik zal hier na het seminar. Maar ik wil gewoon te dekken het leaderboard evenementen. Deze syntax je een leren Wat later in de lezing. Dit is webbrowser. 

We zijn gewoon te zeggen, als we een klik, en het is op de toename, deze hash betekent gewoon ID. Op de increment ID-tag, dan willen we bij te werken - de sleutel woorden die ik wil dat je naar te kijken is actualisering en selecteren en speler. Dus afhankelijk van welke speler geselecteerd, we updaten. En wat we doen is dat we verhogen zijn score door vijf. En dat zal de functionaliteit beschrijven we hier hebben. 

Na afloop van dit seminar zullen we in staat zijn om wat meer code te zien. Maar terug te gaan naar mijn doel dat ik wil de site te wijzigen, wilde ik hier meer dan een knop verwijderen toevoegen zodat Ik kan de speler verwijderen. Dus om dat te doen, moet ik twee dingen doen. Ik moet de HTML te werken, werkt u de zie, wat wordt getoond aan de gebruiker, en dan hebben enkele JavaScript dat wanneer de knop wordt ingedrukt, Meteor gaat om iets te doen. Het gaat om die speler te verwijderen. 

Dus er zijn veel stukjes code dat in principe al is gedaan voor mij. Als ik kijk hier, ik heb al een manier krijgen de geselecteerde speler. Dat is dit spul, als je het kan zien. Dus als ik gewoon - Ik ga naar een ander evenement. Dus ik ga om te kopiëren wat ik heb. Want dit is een lijst, Ik heb gewoon een komma. 

Dus nu ga ik klik verwijderen. En dan in plaats van spelers update Ik ga doen spelers verwijderen. En alle spelers verwijderen behoeften een geselecteerde speler. Dus deze functie is alles wat we nodig hebben. Ik moet wat toevoegen HTML hier wel. Dus als ik scroll hier naar beneden, Dit is de HTML-weergave. We hadden een ding hier, dat was een een tag. U hoeft geen zorgen te maken over dat. 

Wat is belangrijk voor u is deze ID increment. En dit is wat ons toeliet om te zeggen, wanneer we geklikt increment, moeten we geef vijf punten. En je zult zien dat dit een knop. Dat is wat de BTN betekent. En de tekst in de knop is geef vijf punten. Dus wat ik ga doen is ik ben gaat deze lijn te kopiëren. Ik ga om het ID te verwijderen veranderen. En ik ga veranderen de tekst hier om te verwijderen. 

Dus zorg ervoor dat alles is opgeslagen. Ik wil terug naar mijn JavaScript gaan om ervoor te zorgen dat ik verwijderen hier opgesteld. Goed. Dus ik ga naar beide bestanden op te slaan. Na het opslaan van beide bestanden, we kan terug naar de bodem gaan. En nu zien we dat we hebben een Wissen-toets. En nog een stap. Je merkt dat je zou kunnen krijgen een fout omdat als ik klik verwijderen, er gebeurt niets. 

Een manier om dit te debuggen is om te gaan terug naar Inspect Element. Ik doe dit met opzet, zodat u kunt zien hoe je iets zou debuggen. In Inspect Element, we hebben al onze tekst hier beneden. Ik wil terug naar de console gaan. En wat gebeurt er als ik ga hier is Ik krijg een soort van fout. Het zegt dat er geen methode te verwijderen. 

Dus wat dit zegt is als ik ga terug naar de code, ik belde speler verwijderen hier. Delete is eigenlijk niet de juiste opdracht. Dus om uit te vinden wat het juiste commando is, is er de Meteor API. De documentatie Ik wil u wijzen jongens om net aan meteor.com. Dus ik heb het hier. Dit is gewoon zo jullie weten waar om meer te leren. 

Er is een link naar de documentatie. En eigenlijk kan ik alleen maar weet te vinden om te verwijderen. En wat je ziet, verwijderen is eigenlijk te verwijderen. Dat is de opdracht die Ik moet bellen. Dus nu weten we dat, ik ga te veranderen verwijderen te verwijderen. Dus nu, wanneer ik terug naar mijn leaderboard gaan plaats, ik ga klikken verwijderen, en nu ben ik weg. Er is geen Roger meer. En ik kan blijven gaan schrappen van elke enkele naam totdat ik heb niets meer. 

Dus dat was een kleine preview hoe Meteor gebruiken. U zult leren veel meer JavaScript en HTML noodzakelijk om het lijkt mooier, die we zullen bespreken in van deze week [? stuk?] instelt voor HTML en JavaScript volgende [? stuk?] ingesteld. 

Dus wees niet ongerust, zo niet alle dit spul komt gemakkelijk aan u. Het zal de tijd van de door de het uiteindelijke project. Bedankt voor het komen opdagen. De link die ik zal bijgewerkt zodra de seminar zodat je wat meer zien voorbeelden die ik op heb geïmplementeerd hoe tot de meer geavanceerde leaderboard te krijgen dat ik op deze website hier bij een radicaal-leaderboard.meteor. Dank u. 

[Applaus]