>> ROGER ZURAWICKI: Hej alla.
Kan jag få din uppmärksamhet?
Tack, killar.
Idag vill jag tala om Meteor.
Det är en JavaScript ram.
Vi kommer att gå igenom hur du kan göra riktigt coola webbprogram.
>> Innan vi kommer in i JavaScript, jag bara vill berätta för er att detta kommer
vara - du har en senare pussla denna termin.
Det ska handla om JavaScript.
Jag tror [OHÖRBAR] först gå till täcka webben HTML PHP grejer innan vi
flytta till JavaScript.
Och i CS50 är JavaScript anses som en klientkoden.
Så det blir bara köras i webbläsaren.
>> Men tack vare de senaste framstegen inom teknik, har vi nu lyckats köra
JavaScript som en server också.
Så det här har skapat en riktigt cool ramen för nu kan du skriva
legitimt samma kod för klienten och servern.
Och när du definierar funktioner i din server, kan din klient ringa dem
samma funktioner.
Och det gör det mycket enklare.
Av följande skäl tidigare, om du använder PHP på servern JavaScript på den främre
Därför måste du skriva ett PHP-funktionen och sedan en JavaScript version av
samma funktion för att göra det samma typ av arbete.
>> Så innan vi börjar, jag vill ha för att visa en demo av vad
Meteor kan göra för dig.
Jag kommer att visa er demo, vilket är vad du kommer att kunna skapa den
slutet av detta seminarium.
Vi bara gå här.
Detta är en Tavlan app.
Det är faktiskt bas i exemplet att Meteor ger dig.
>> Meteor är mycket trevligt eftersom när du installera den som ett paket, kan du
princip leka med dessa fyra demos.
Och det Tavlan är första av dessa demonstrationer.
Efter seminariet, jag uppmuntrar er alla att bara utforska andra demos
för jag tycker de är riktigt cool, och de visar dig kraften av Meteor.
>> Så vad detta är, är detta värd på Tavlan.
Detta är bara sagt en lista med namn.
Och du kan välja personer.
De gulnar.
Och då kan du ge dem fem poäng.
Och du kommer att märka att listan är sorterad för som jag ger mig själv mer
och mer poäng, jag är nu på toppen.
Så det är där vi börjar.
>> Och vad kommer du att kunna ta bort från detta seminarium är några fler
funktioner som jag har lagt till Leaderboard.
Vi kommer att täcka hur man, liksom lägga fem poäng till en spelare, vi kan
ta bort spelare, kan vi lägga till nya spelare, och vi kan välja hur vi vill
att sortera dem.
Och allt detta är mycket enkla API-anrop att Meteor ger dig.
Du har också en funktion här att slumpmässigt poängen.
>> Så vad är riktigt coolt om det här är ni faktiskt kan
alla går till webbplatsen.
Jag ska lägga den i större text här.
En radikal-bly erboard.meteor.com.
Och när ni går till webbplatsen, du ska kunna redigera platsen, och
alla dina redigeringar kommer att vara synlig till alla andra.
Så du kan - är ni alla kan ansluta till webbplatsen?
Så leka med den.
Gå och börja ta bort några namn.
Se vad som händer.
>> Så du ser att alla kan spela.
Det här är bara standardsäkerhets läge för Meteor.
Du ser att alla kan ändra varandras uppgifter.
Oroa dig inte.
Meteor har säkerheten.
Detta är en mycket lätt implementeras funktion, där du kan ställa in användare
och inloggningar.
Men just nu, vem som helst som besöker webbplats kan ge sig själva så många
pekar som de vill.
Så jag alltid så här, eftersom det här är ett roligt sätt att komma igång.
Och sedan kommer vi bara prata om detaljerna, hur
Meteor gör detta möjligt.
>> Så jag kommer att täcka det som Meteor är, och då kommer vi bara behöver täcka
två förutsättningar som CS50 har inte täcks tillräckligt.
Men i slutet av perioden, bör du vara bekväm med både HTML och
JavaScript för att verkligen få tag smutsiga arbeta med Meteor.
Och jag tycker det är bara ett bra sätt för ännu mindre bekväm studenter att göra
slutgiltiga projekt eftersom de kan verkligen bo i ett språk, och de får
se förändringar i deras arbeta direkt.
>> Så detta bildspel bara några av de viktig teknik som Meteor JS
ger till dig.
Meteor är inte en ny teknik på egen hand.
Det är verkligen ett gytter av alla dessa olika saker
vi har på internet.
Förutom HTML, CSS, JavaScript, vi har en del teknik som Node.js,
vilket är det som gör att du kan köra JavaScript på baksidan slutet på
server, samt en del JavaScript bibliotek som jQuery, streck.
>> Alla dessa kommer att vara bekant för du i slutet av terminen.
Och vi kommer även att använda en databas som kallas mongodb, som är en riktigt
populära databas nu dessa nya startups.
Du kan se det som som MySQL, men det fungerar väldigt fint med JavaScript.
Och det finns en del andra tekniker här och många fler jag har inte listat
att alla gränssnitt verkligen fint med Meteor.
>> Jag måste sätta denna bild eftersom Ibland får jag förvirring om detta.
Meteor är bara JavaScript.
Det är inte PHP.
Det är inte Ruby on Rails.
Så om du skriver kod, om du vill skriva ett Meteor projekt, du verkligen
kan inte använda Ruby-kod.
Du verkligen inte använder PHP.
>> Samtidigt som vi ser att skillnaderna i kod och syntaxen kanske inte att
annorlunda, vill jag betona för er att Meteor, allt du koden
endast i JavaScript.
Och allt som du visar till användaren blir HTML CSS.
Men du egentligen inte använder någon av de andra språk som andra
seminarier kan omfatta.
Vad Meteor är också är en webbserver.
Så även om du inte har några JavaScript, och du bara vill tjäna
CSS och HTML-filer, Meteor kan göra det åt dig.
>> Och här är länken igen till demo som jag fick ni
började spela med.
Men låt oss gå vidare till HTML.
Hur många här har ingen aning om vad HTML är?
OK bra.
Och det är helt bra.
Du behöver verkligen inte veta mycket om det eftersom vi kommer att gå över
användning mycket enkelt.
>> Detta är vad den enkla HTML-sidan ser ut.
Detta kan vara som din hej, värld för HTML, medan vi började i C med
hej, värld.
Jag vill inte att du betona på information om vad HTML, vilken huvud, vad
kropp, vilken titel gör där.
Jag vill bara betona struktur, hur du har taggar.
Och det är vinkelfästen.
Och det är där du har dina deskriptorer.
>> Så du kan ha HTML-dokument.
Och så kommer du stänger HTML-dokument med backslash samma sak.
Och du har olika typer av taggar.
Och märker att de alla är matchade.
Du kommer att ha som en body-taggen och sedan en nära body-taggen.
Och inne i body-taggen, kommer att vara innehållet på din webbsida.
Så denna webbsida skulle helt enkelt visa på en vit bakgrund och svart text
hej, värld.
Låter det vettigt?
OK.
>> Nu ska jag snart täcka JavaScript.
För att citera en tidigare TF, "Javascript är den bästa programmering
språk som finns.
Andra människor kommer att försöka säga något annat.
De har fel. "Javascript är ganska trevlig, och jag ska visa dig varför.
>> Så det här är det klassiska exemplet vi börjar med i C. Vi har hej, värld.
Och du märker att även om du krymper det, du måste ha minst två
rader kod här.
Jag har flera rader kod.
Detta kan göras mycket enkelt.
En linje i JavaScript med console.log, och sedan din sträng,
hej, värld.
>> Nu, även om vi ska flytta till en ny språk JavaScript, nästan alla av
färdigheter du lärt dig genom att koda i C är direkt portabel.
Så strängar, tanken på strängar i citattecken, det är samma.
Den semikolon, det är samma.
>> En snygg funktion om JavaScript faktiskt är att du
behöver inte semikolonet.
Man kan gissa att du borde sätta ett semikolon där.
Men som sagt, ska du alltid försöka att sätta dina semikolon där.
Det anses bra stil.
Och också, det finns ingen huvudfunktion.
Man börjar precis vid toppen av filen och läsa saker rad för rad.
>> Då detta är vad som krävs för att göra att hej, världsprogram.
Och sedan märker att du måste gör hej och sedan köra hej.
Med JavaScript, det anses ett tolkat språk.
Vad du behöver veta är att det finns inget att göra.
>> Det finns ingen kompilering.
Du kör bara nod.
Och kom ihåg nod är det program som kommer att köra JavaScript på en konsol,
på en svart låda, inte på webbplatsen.
Så du bara ge den filen, och det är ska skriva ut hej, värld.
>> Jag ska faktiskt göra en liten demo av att för er här.
Så låt oss gå över till min Node.js terminal.
OK.
Låt oss flytta hit.
Så jag ska börja nod.
Och jag ska visa er i just en sekund hur man får det
installerad, om du inte gör.
Låt mig göra det lite större.
OK.
Jag hoppas att ni kan se.
>> Så jag kan skriva kod som jag gjorde tidigare i console.log.
Hej, Roger.
Och märker att jag inte behöver göra det semikolon, men då får jag denna konstiga
undefined sak.
Jo faktiskt, det gör detsamma om det odefinierade sak.
Saker jag vill att du ska märka är att du behöver inte den viktigaste funktionen här
att börja köra kod.
Och det finns ingen backslash slut.
Det finns några små funktioner som JavaScript kan göra för dig.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Oh yeah.
Jag är ledsen för det.
Och att pilen betyder bara nod är redo för ett annat kommando.
Så du kan få den att göra enkla matematik, som 1 plus 1.
Och precis som i C, dessa matte symboler är precis samma.
Jag kan göra console.log av ett nummer.
Och sedan skriver ut två.
JavaScript är trevligt i det avseendet, eftersom även om två är en int,
som i C, om du gjorde printf med två, skulle du få ett felmeddelande.
>> Men JavaScript vet, åh, du är skriver något.
Jag kommer att behöva en sträng.
Så låt mig konvertera att två till en sträng för dig.
Och du kan också göra en del konstiga saker liksom hej och sedan plus två.
Detta är bara ytterligare ett exempel på hur två kan omvandlas i där också.
>> Så med det ur vägen, låt oss bara täcker lite mer Javascript.
Så i C, har vi typer.
När vi skapade en ny variabel, vi måste säga att det är char * eller
sträng i fallet CS50.
Eller om vi hade ett decimaltal, vi hade att säga flyta.
Om vi ​​behövde en Boolean, vi hade att säga b..
Och sedan när vi hade något som var b, det hade att stanna en bool.
Vi kunde inte trolla ändra den till en int om vi skrev i
parenteser, int av b..
>> I JavaScript, det finns inga slag.
Du tror bara på det som var.
Och var är hur du skapar en ny typ.
Så det kan ha var s vara en sträng, var n är ett flöte,
och var b är sant.
Och en sak som du inte kan göra i C är Jag kan nu säga, efter den linjen, b
är lika med ett heltal.
Och det fungerar alldeles utmärkt.
Medan C, skulle den säga som din heltal är inte bool.
Jag kan inte göra det åt dig.
Eller [OHÖRBAR] skulle kasta ett fel.
>> Och jag kan snabbt gå tillbaka till nod och visar en del av denna funktionalitet.
Så jag kan ha en var en.
Kalla det "Apple." Så nu när jag skriver ut ett, Jag får min sträng, "Apple". Men jag kan
även nu säger en lika 3.
Och märker det finns inget fel.
Och nu är lika med 3.
Har du frågor så långt?
Ja.
>> PUBLIK: Vänta, så console.log är i grunden printf, eller hur?
>> ROGER ZURAWICKI: console.log är din printf.
>> PUBLIK: Höger.
Så hur kommer om du bara skriva in åtta eller [OHÖRBAR], vad betyder det
[OHÖRBAR]?
>> ROGER ZURAWICKI: Höger.
Så det är -
grejer i grönt blir tryckt på konsolen.
Och det vi får se nästa är När vi flyttar till webben
sida, vi kommer inte att göra -
JavaScript kommer att ha en HTML mall, som jag ska täcka i
Meteor del av seminariet.
Och det är där du kan säga, ge mig värdet av en, och det kommer att sätta en i
din webbplats.
Eftersom varje webbläsare faktiskt har en liten konsol.
Och om du tittat mycket noga, du skulle få lite information, som din
printf är förekommer där med varje webbsida du laddar.
>> PUBLIK: Hur fick du till skalet skärmen?
>> ROGER ZURAWICKI: Så det finns ett kommando kallad nod, och det kommer med Meteor.
Så jag ska bara avsluta ut där.
Node är det program som kör JavaScript.
Om du går till meteor.com, du kan installera Meteor, och
Meteor levereras med noden.
Eftersom Meteor är bara en samling av alla dessa programpaket.
När vi kommer till vårt exempel, kommer jag gå alla genom att installera
Meteor, och sedan kan du spela med nod själv.
OK, bra.
>> Så en annan bra funktion om att arbeta med Javascript är slingor är desamma.
Ganska mycket exakt samma.
För loopar, medan slingor, gör medan loopar, om annat.
Det är i alla fall med hängslen.
Det är samma syntax.
I fallet med en for-slinga, den lilla detaljer som du måste vara uppmärksam
att istället för int i lika med 0, vi har att säga var jag är lika med 0.
Men det är på grund av variablerna typer som vi pratade om tidigare.
>> Lägg märke till att printf blir en stock, en console.log.
Och vi behöver inte göra det procent p backslash n och gå sedan in i..
Du kan bara säga jag.
Och det skulle skriva ut antalet från noll till fyra.
Om ni vill prova detta, eftersom du tog upp en bra poäng.
Om du vill köra den här koden på din egen webbläsare, skulle jag rekommendera att
alla öppnar Google Chrome.
Google Chrome eller en webbläsare egentligen, men jag gillar Google Chrome
eftersom det är mycket standardiserad.
>> Du kan gå till, jag tror, ​​om ni rätt klicka på någon hemsida, bara i
vita rymden, ser du ett alternativ kallas Inspektera Element.
Det är oftast den sista.
Och när du klickar på den, ska du få en sak till botten visas här.
Låt mig zooma in här.
Och vi har ett par flikar här.
Den du bryr dig om är konsolen.
>> Och detta är en JavaScript-konsol att du nu kan arbeta med.
Bra.
Så jag kan skriva in samma saker Jag skriver tidigare i nod.
Ett plus ett är två.
Var en lika "Apple".
Och då skulle jag skriva ut en, och en är "Apple".
Så i alla webbläsare, Firefox, Chrome, Safari, vad du än använder, som
länge du har tillgång till en JavaScript konsol, samma typ av
kod jag sprang i nod du kan köras i din egen konsol.
>> PUBLIK: [OHÖRBAR]?
>> ROGER ZURAWICKI: Hur komma till konsolen?
Du måste högerklicka på tomt utrymme på sidan, och sedan går du till
Inspektera Element.
Så egentligen, jag skulle vilja att ni att bara se till att du kan
Inspektera Element i Chrome.
Och se när du skriver på något kod till konsolen
att det körs korrekt.
Tveka inte att ställa några frågor om något är oklart här.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Alla typer, höger.
Det finns bara en typ för alla variabler i JavaScript.
Och när du måste deklarera en variabel, säger du var.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Ja.
Det gör det, men i JavaScript, det är mycket smart om allokering av minne.
Det finns ingen malloc.
Det finns ingen gratis.
Så du behöver inte oroa dig för det.
Det är en annan trevlig funktion som JavaScript ger dig.
>> Så jag skulle vilja gå vidare.
Skulle det vara OK?
OK.
Bra.
>> PUBLIK: Jag har bara problem finna den [? Inspektera Element. ?]
>> ROGER ZURAWICKI: Så Safari utseende lite annorlunda, men ni
har Chrome eller Firefox?
De är de lättare dem att arbeta med.
Och för dina projekt, rekommenderar jag hålla sig med en webbläsare eftersom
du får en hel del buggar nästan eftersom alla webbläsare behandlar
JavaScript HTML lite annorlunda.
Så jag tror att ditt liv kommer att bli mycket lättare om du håller dig till Chrome eftersom
den är tillgänglig på alla maskiner.
Och det är en ganska populär webbläsare.
OK?
>> Så nästa ämne som vi borde täcker i JavaScript -
Jag är ledsen för formateringen här.
Jag var tvungen att sträcka bilderna för att matcha widescreen projektor.
Men jag skulle nu vilja tala om hur man gör fungerar.
I C, måste vi deklarera varje funktion.
Liksom int add, och det tar en int i x, och en int y, och sedan lägger vi dem
och lämna tillbaka den.
>> I JavaScript, fungerar faktiskt annan variabel typ.
Så vi bara säga var lägga till, och det motsvarar en funktion.
En funktion som tar en x-och en y.
Och vad gör den funktionen gör?
Den returnerar x plus y i exakt samma syntax som i C. Och du märker att i
JavaScript, kommer du inte få veta vad det returnerar eftersom det sedan
variabler inte har typer ändå, det det är inte riktigt produktiv, gissar jag,
att ange alla dina typer i dina funktioner.
Och sedan när du ringer en funktion, det är exakt samma syntax som C. Du
bara passera i dina två argument.
Jag skulle vilja prova det här i min nod.
Kan jag ändra bilden?
>> PUBLIK: [OHÖRBAR].
Kommer vi att få en kopia av bilderna?
>> ROGER ZURAWICKI: Ja.
Så låt oss gå tillbaka till noden.
OK.
Så jag ska säga var add lika funktion.
Att ta ett x, ta en y.
Och då den vet att uttalandet är inte slutförts.
Så i nod eller i konsolen, du kommer att märka dot dot dot.
Så du kan fortsätta att skriva din kod.
Och nu ska jag säga retur x plus y.
Och stäng sedan stag.
Och så fort jag stänger stag, det ser att uttalandet är klar.
>> Och nu kan jag säga att lägga till ett och två.
Och jag får tre ut.
Observera att om jag bara fick lägga till, det säger mig att det är en funktion.
Och en sak bara för att uppmärksamma är om du ger det fel antal
argument, kommer det att göra.
Det kommer att köras, men du kan få några riktigt konstiga resultat.
Ungefär som ett skräp värde, du kan tänka på det.
Så gå vidare och prova detta i din webbläsare.
>> OK, så i intressera av tiden kommer jag nu gå vidare till nästa drag i
JavaScript.
Så vi har pratat om funktioner.
Vi har pratat om loopar, if satser också.
Syntaxen är densamma såsom C och variabler.
Och nu vill jag prata om arrayer.
Jag är ledsen att bilderna fick lite avskurna.
Men i själva verket, i det första avsnittet, allt du behöver för att fungera.
>> Så vi har en annan typ av variabler kallade matriser.
Och vi använder hakparenteser för att beteckna dem.
Så i det första exemplet, var arr, tom array.
Detta är den tomma listan, så en matris innehåller inga element.
Och du kan också ha en matris med tre strängar.
I C, varje element i arrayen tvungen att vara av samma typ.
>> Men eftersom det i JavaScript finns det bara en typ, arrayer kan faktiskt
har olika typer av värden.
Som här, har vi en matris med en flottör, en bool, och en int.
Sättet du får en längd av en matris, du egentligen inte behöver använda storlek
eller vad som helst.
Du säger bara matris och sedan dot längd.
Och denna punktlängd, kan du tänka på det ungefär som en struct, hur varje
array har ett fält, en extra variabel insidan av det som kallas längd, vilken
håller reda på hur länge din array är.
>> Så jag bara snabbt gå in på nod och visa er samma sak.
Så jag kan ha en matris.
Det kan vara den tomma listan.
Och det kommer att skrivas ut mig tillbaka en tom lista.
Bra.
Jag kan nu säga att matrisen har 1 och 2,3, och sann.
Så alla olika typer.
Och du märker att det fungerar alldeles utmärkt.
Matrisen jag får tillbaka stöd alla värden jag gav det.
>> Om jag ville få den första delen av arrayen, är syntaxen faktiskt
samma som i C. Du kan säga array noll.
Och du får en.
Jag kan säga samma sak om matrisen två, och jag blir sann.
Om jag gör något utanför arrayen, JavaScript är ett säkert språk
eftersom jag inte kommer att få en seg fel.
Jag ska få odefinierad.
>> Och detta odefinierade kan du snäll av tänka på det som null.
Men det kan vara riktigt irriterande när du kod eftersom du måste kontrollera att
nästan allt du gör, du arbetar med är odefinierad.
Och vi får se några exempel på detta när vi arbetar i Meteor.
>> Även array fyra är odefinierad, Jag kan tilldela den ett värde.
Så jag säger det är lika med ett.
Och sedan om jag går till array, jag har extra värde där.
Och märker att array tre, vilket också var odefinierad, förblir odefinierad.
Så jag har nu en array med ett hål i mitten.
Men om jag tryckt array fyra, Jag skulle få en.
Om jag gjorde array tre, jag blir odefinierad.
>> Så trevlig funktion att JavaScript gör att du kan göra är att listorna kan
ändra storlek.
Matriser, matriser är listor, de ändrar storlek.
Och du kan ange vilken plats som helst inne i dem.
Och alla luckorna kommer att fyllas med dessa odefinierade värden.
>> Så vi har pratat om matriser.
Nu, det sista jag vill täcka in JavaScript, och detta är mycket viktigt
till att förstå den kod som Jag ska visa dig,
kommer att bli föremål.
Och föremål är en term i -
i grund och botten är de närvarande i många programmeringsspråk.
Och varje programmeringsspråk gillar att tänka på dem lite annorlunda.
>> Men jag tror att för Meteor, en bra Analogt är C strukt.
I C, om vi vill hitta struct student, skulle vi behöva ange alla de
saker i den.
Så det måste ha ett namn.
Det måste ha ett år.
Det måste ha ett kön.
Men vi måste också ge den typer av alla dessa saker.
>> Och nu när vi har den här formen för struct kallas elev, kan vi få en
ny struct, och då kan vi manuellt säga vad var och en av fälten är.
Och det är där vi använder punktnamn, dot år, dot kön.
Och då är vi bara i den sista raden i koden här, jag bara skriva ut
namnet på den struct student.
>> I JavaScript-världen, det finns något sådant som struct student.
Du behöver inte skapa en förinställd struktur.
Du faktiskt bara, i dessa konsoler, du säger vad allting är.
Och det är denna konstiga notation med kolon och sedan komma, men du kommer
vänjer sig snart nog.
>> Och det är faktiskt ett riktigt enkelt, flexibelt sätt för att bara
manipulera objekt.
Du märker att om jag vill nu få namn från s, jag gör bara s.name.
Finns det några frågor om det här?
Denna regel har varit ett mycket förvirrande ämne när vi introducera människor till
JavaScript.
Jag ska göra några exempel på detta i noden.
Ja?
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Så gör du har ett exempel, multipel
variabler av denna typ.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: OK.
Så jag antar att det sätt du skulle gå tillväga är du skulle sätta objekten i en matris,
och nu har du en array med objekt.
Besvarar det din fråga?
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Ja.
S är ett objekt.
Så vi kan gå in i nod och bara leka lite.
>> PUBLIK: [OHÖRBAR]?
>> ROGER ZURAWICKI: Åh, OK.
Så om du frågar vilka klasser, klasser behandlas mycket olika,
och de har en riktigt konstig ordning kallas prototyper, som du inte
behöver veta om.
Det finns ingen fast sätt att göra det.
Så om du vill skapa flera, du skulle liksom bara har en funktion
eller något.
Du skapar din egen funktion.
Och du skulle returnera ett objekt.
Det skulle vara det enklaste sätt att göra det.
Låter det vettigt?
OK.
Bra.
Så när vi har en förståelse för JavaScript-objekt, de är -
oh, ja.
>> PUBLIK: [OHÖRBAR]
exempel, vad är skillnaden mellan "Roger" med citattecken kontra
[OHÖRBAR] med enkla citattecken.
>> ROGER ZURAWICKI: OK.
Så det här är i C, har vi den enda citat som representerar tecken och dubbel
citationstecken representerande strängar.
JavaScript faktiskt kastar denna bort eftersom du kan ha strängar med
enkla eller dubbla citattecken, och det finns något sådant som en enda röding.
Men om du bara kopierat samma C-kod, JavaScript skulle
behandla det bara bra.
Det är därför jag behandlade det som -
det är därför jag kan bokstavligen port koden i det avseendet.
>> Och jag vill visa dig ett exempel av ett mer komplicerat föremål.
Så du kan märka att ett objekt kan ha strängar som värden.
Det kan ha en annan lista med värden.
Det skulle kunna ha en lista på objekt som värden.
Det finns egentligen ingen gräns för detta.
Så här är det bara en bra demonstration om hur du kan få en hel del
olika typer som pågår allt i ett objekt.
Är detta vettigt?
>> Nu kan du också ha arrayer av objekt.
Och här är slags liknar vad du frågade, om du kan få föremål av
samma typ.
Men problemet är, det finns ingen fast format för objekt i JavaScript.
Så du måste ange dem själv.
Och du måste se att de är enhetliga.
Så här, när jag skapar ett objekt, har jag att se till att var och en har en
namn, och var och en har ett hus.
>> Och då har jag en rad av dem, och det kan vara min stuga.
Och så här kan du slags se för loopen pågår.
Den för slingan är bara en riktigt vanlig sätt att färdas över en matris
i JavaScript.
Lägg märke till att detta mönster är mycket likt till C motsvarande, där man
har int i lika med noll. Jag är mindre än längden.
Och då jag plus plus.
>> Det är nästan samma kod, med undantag för några detaljer.
Så gör alla förstår vad ett objekt är?
Tänk på det som ett C-struct.
Och sättet du kommer åt fälten är bara med pricken.
Och så länge du kommer ihåg hur man använda punkt, kommer du att fina.
>> OK, så nu kan alla Läs den länken?
Här är länken till projektet.
Är det någon som har problem se länken?
OK, låt oss ändra det då.
Det är inte -
Ja, det är nog det enklaste sättet att göra det.
Bra.
>> Så om du går till denna plats, det bör finnas vissa instruktioner som jag ska
gå över på hur vi kan installera Meteor och få vår exempelprojekt igång.
Jag vill se till att alla har länken ner innan jag flyttar.
Kan jag gå vidare?
OK, bra.
>> Så här är jag på webbplatsen.
Du kommer att märka i readme-filen, vi har några instruktioner om hur
för att få e inrättas.
Du måste vara antingen i CS50 apparat eller bara på en Mac.
Windows kommer inte att fungera.
Men i stort sett allt som inte är Windows bör arbeta med dessa
instruktioner bara bra.
Men jag kan göra det lite större också.
>> Så du ska köra det första par kommandon.
Dessa killar kommer bara installera Meteor.
Jag kan gå in i min terminal.
Och om jag kör samma sak nu, Jag har redan det installerat.
Så det är lite kortare.
Det kan ta lite längre tid för er.
Men jag vill först se att vi har Meteor igång.
Efter Meteor har installerat, bör du kunna få nod i konsolen.
>> PUBLIK: De frågar om ett lösenord.
>> ROGER ZURAWICKI: Det skulle vara din användarens lösenord, om du är på en Mac.
Det behöver bara tillstånd att ändra vissa systemfiler.
Så frågan var, om den ber dig om ett lösenord, det är bara att fråga dig
för ditt användarnamn lösenord när du loggar in på din Mac.
Och det är så att du kan ändra systemfiler.
>> Och när du är klar, kan du gå vidare till nästa steg, vilket kommer att kopiera
exempelkod jag har från webbplatsen.
Och du får en ny katalog i din hemkatalog kallas leaderboard, och
vi kan börja arbeta därifrån.
Så jag bara kopiera och klistra in dessa kommandon i min terminal.
Och för mig, jag redan klonat det.
Så jag kan bara nu flytta i leaderboard.
Och jag skulle ha några filer i det.
Några frågor?
>> PUBLIK: [OHÖRBAR] fungerar inte.
>> ROGER ZURAWICKI: Åh, kanske du behöver git installeras också.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Förlåt?
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Åh, OK.
OK.
Det beror på att du kan behöva vara inloggad på GitHub för att få den här länken.
Om ni kan se det, det enklaste sätt att göra det skulle jag då säga är
ladda ner zip.
Och det kommer bara ladda ner alla filer.
Och sedan när du sätter den i ditt ladda ner eller din hemkatalog -
Jag rekommenderar att sätta den i ditt hemkatalog så kan vi alla
köra samma kommandon.
Så länge vi har filerna, kommer vi kunna börja arbeta med dem.
Låt mig veta om människor har problem med att hämta filerna.
>> PUBLIK: Genom hemkatalog, du menar -
>> ROGER ZURAWICKI: Så hemkatalog skulle vara John Harvard, om du är i
den CS50 apparaten.
För att komma till din hemkatalog, skriv bara in C.
>> PUBLIK: [OHÖRBAR]
CS50 apparaten [OHÖRBAR].
>> ROGER ZURAWICKI: Ja.
Du vill köra kommandona i din terminal.
>> PUBLIK: [OHÖRBAR].
Jag fick ett felmeddelande som säger nej sådan fil eller katalog.
>> ROGER ZURAWICKI: Vi kan ta en snabb sönder och bara se till att
alla har Meteor installerat, och jag ska bara gå försöka hjälpa folk ut.
Försök att hjälpa varandra om du springer på problem.
Tyvärr, ja.
Är du både i apparaten?
>> PUBLIK: Ja.
Jag har RISA
>> ROGER ZURAWICKI: OK.
Om du går tillbaka till webbplatsen, gå rulla upp till toppen.
Och det är det här HTTPS.
>> PUBLIK: Kopiera denna?
>> ROGER ZURAWICKI: Ja.
Och då du vill Skriv in git clone.
Så om du trycker på Kontroll A -
>> PUBLIK: Här?
Och göra [OHÖRBAR]?
>> ROGER ZURAWICKI: G-I-T.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Git och sedan klona.
Så det är mycket likt det kommando du hade ovan, men webbadressen ändras.
Så innan det var det, nu är det här.
Låt mig uppdatera -
ja.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Detta är nedladdad.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Åh, så det inte klona korrekt.
Jag kommer att fixa det.
Det finns ett fel med att försöka för att ladda ner filerna.
Låt mig uppdatera kommandot för er så jag kan se till att det kommer att fungera.
Jag är ledsen för det.
Det bör vara densamma för Mac eller CS50 apparaten.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Jag har uppdaterat kommando för nummer två, om
du uppdatera sidan.
Och med detta, URL, bör du vara kunna ladda ner filerna.
>> PUBLIK: Så om vi fortfarande nedladdning [OHÖRBAR].
>> ROGER ZURAWICKI: Om du är fortfarande ladda ner Meteor?
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Ja, om du vill att utvecklas på din Mac.
Men du behöver Xcode utvecklare verktyg installerade.
Jag har testat dessa kommandon på CS50 apparat, så jag kan garantera
att det kommer att fungera.
Ja. låt mig gå och hjälpa dig.
>> PUBLIK: [OHÖRBAR].
Jag ger mitt lösenord.
Det här är Mac.
Och då gör jag [OHÖRBAR].
>> ROGER ZURAWICKI: OK.
Jag skulle prova att köra alla kommandon enbart i CS50 apparaten terminalen.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Jag skulle få det att fungera först på terminalen, å
CS50 apparat, och sedan Mac-terminalen.
>> PUBLIK: Så om du gör det på CS50 apparater som att [OHÖRBAR].
>> ROGER ZURAWICKI: Jag vill flytta på, men om folk fortfarande har
problem med att konfigurera Meteor, är Kevin mer än gärna hjälpa er ut,
Kevin i grå skjorta.
Vad vi borde ha är att vi kommer att kör det sista kommandot, nummer tre, i
vår terminal.
När vi gör det kommer vi att köra Meteor.
>> Och du borde -
åh, jag har redan Meteor igång.
Så det kommer inte att låta - låt mig bara avsluta min andra Meteor.
När jag kör Meteor, du bör nu se till att -
du bör se den aktuella katalogen att det är servering.
Och nu det kommer att säga servern körs på http://localhost.
Det är den webbadress som du vill lägga in i din webbläsare.
>> Och på den adressen, ska du kunna tillgång till en fin liten leaderboard.
Så märker att det här är på localhost, vilket innebär att om du gör något
förändringar, du kommer inte att se varandras ändringar.
Med beaktande av följande på webbplatsen jag visade dig i början, skulle vi kunna få
allas ändringar eftersom alla hade tillgång till samma webbplats.
>> Så låt mig bara gå till [? ord?]
3000.
Så du bör kunna bara bekräfta att funktionaliteten fungerar.
Du kan välja olika människor, och du kan ge dem olika punkter.
Så jag ge någon poäng.
Du kan också se att de stiger i rang.
>> Nu, i intresse av tiden, det finns tre funktioner som jag har
genomföras.
Och vi kommer att genomföra rader användare som vår första långfilm.
Men innan vi går vidare, är Några frågor?
Du hade din hand upp.
Ja?
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Kan du kontrollera att Meteor är installerat?
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Lokal värd 3.000?
Och du är i CS50 apparaten?
Jag kan göra -
du behöver inte vara på en Mac.
Detta kommer att fungera i apparaten.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: I det normala webbläsare, ja.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Är Meteor igång?
Så OK, det finns en skillnad här.
Om du kör den i apparat, måste du göra
host inom apparaten.
Om du kör den i din Mac, som jag är, så jag kan göra
min Mac Google Chrome.
Men om du använder CS50 apparaten, du måste göra allt
i apparaten.
Så du måste använda Google Chrome i apparaten.
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Det är fortfarande inte fungerar?
>> PUBLIK: [OHÖRBAR].
>> ROGER ZURAWICKI: Så bara för att upprepa, hur ska du få tillgång till webbplatsen nu.
Du har en webbadress här på host 3000.
Om du är i CS50 apparaten, du måste öppna CS50
apparatens Google Chrome.
Och i att Google Chrome inom apparat, kan du skriva in webbadressen,
och du bör se en leaderboard.
Så jag ska bara skjuta upp det åt sidan här lite.
Och nu ska jag öppna min textredigerare hit.
Så låt mig bara se till att koden är i sin ordning.
OK.
Bra.
>> Jag vill nu gå igenom koden lite.
Och den första filen jag vill börja med IS leaderboard.html.
Du kommer att kunna få denna kod efter seminariet, så jag vill bara visa
dig på min dator vad som händer.
Så jag hoppas att alla kan se det.
Så i början av filen, vi har vårt huvud och titeln, som
liknar det vi såg i varje HTML-dokument.
Och då ska vi ha body-taggen här.
>> Vad jag har valt är den viktigaste kropp, i princip vad
kommer att få visas.
Men det finns några nya icke-HTML saker, och det är i
dubbla vinkelfästen.
Och dessa är malltaggar.
Så du ser här denna konsol fäste nya leaderboard.
Och detta är typ av - tänk på det som kräver en funktion för HTML.
>> Detta är en speciell version av HTML.
Det är den version som Meteor använder, vilket är därför du kan visa olika
saker, som leaderboarden namn och knappar.
Men leader säger till dig att gå till mall med namnet leaderboard.
Så mallen inte få visas genom sig själv, men det är en funktion, så det
kommer att få kallas.
Och du kommer att ersätta i allt detta kod här i leaderboard.
>> Den intressanta delen av ledartavlan här är just detta bord.
Om du bara läsa den, läsa den här koden högt bör det vara intuitivt
eftersom leaderboard, allt vi har här är ett bord.
Detta ID-klass saker du inte behöver oroa dig.
Vet bara att det finns en tabellrubrik.
Det är här thead.
>> Och den hittar ett namn och en poäng.
Alla dessa taggar, liksom thtable, THEAD, du ska bara lära dig när du går längs.
Det är inte viktigt att du memorera dessa eftersom du kan bara komma åt alla
referera till nätet.
Eller i slutet av terminen, dessa kommer bara att vara mycket bekant med dig.
>> Efter huvudet på bordet, den del som jag vill fästa er
uppmärksamhet är detta h tagg.
Eftersom det är i dubbla fästen, Det är en mall.
Så det innebär att för var och en av spelarna, vad spelarna är, måste vi
visa den.
Och vi går till spelaren mallen.
>> Om vi ​​rulla ner lite mer -
Jag hoppas att alla kan se det.
Vi har spelaren mallen.
Och den här mallen definierar grunden en tabellcell, där du sätter i namnet
här och poängen.
Att zooma ut nu, kan vi se att denna bit av kod -
och det var vår spelare där nere -
definierar en av dessa celler.
Varje sak som jag klickar blir gul.
>> Ett enkelt sätt att jag kunde ändra det nu.
Se till Meteor är fortfarande igång.
Meteor ska vara en server process, så du bara lämna det
igång när du utvecklas.
Låt oss säga att jag ville ändra alla namn eller poängen.
Och jag skulle säga att jag ska att lägga till poäng här.
Så förändringen jag gjorde här var, istället för att bara poängen, jag
lägga poäng rymdpunkter.
>> Jag kommer att zooma ut, och jag är kommer att spara min fil.
Och efter jag spara min fil, jag behöver att se till Meteor körs.
Ledsen för det.
Jag vill visa dig redigeringar gjordes i realtid.
Så jag ska bara byta lite text.
Klicka på en spelare.
Jag sätter det i versaler.
Och det bör vara att om detta fungerar ordentligt, när jag sparar det, det
skulle uppdatera.
>> Åh, jag tror att just nu är problemet Jag är inte i rätt katalog.
OK.
Jag är ledsen för det.
Så här, vad du märker är min förändring gick igenom.
Nu säger jag vill återställa ändringen.
Jag vill gå tillbaka till det jag hade.
Jag ska bara skriva det normalt.
Klicka på en spelare.
>> I samma ögonblick som jag sparar det, webbplats uppdateras för mig.
Och jag ser min förändring på platsen direkt.
Detta är en riktigt användbar funktion i felsökning för nu
Jag behöver inte -
När vi skriver C-kod, inte bara gjorde vi måste spara filen, men vi var tvungna att
göra det och sedan köra den igen.
Meteor är mycket trevligt eftersom till skillnad från C, det ögonblick du spara HTML eller
JavaScript-fil, förändringen dyker upp omedelbart.
>> En fråga är, i dessa mallar, hur får jag de värden som spelare
eller välj ett namn?
Om jag zooma in här i min kod, Jag ser det här för varje spelare.
Så mallen vet att Jag har spelare på något sätt.
Och den vet att det finns ett valt namn.
Var kommer det ifrån?
Det kommer från JavaScript.
>> Och om du går till leaderboard.js, detta fil, nu när jag går här, vi har en
Några kommandon definierade.
Detta är speciellt Meteor syntax.
Observera att du inte behöver Vars eller något.
Men dessa är bara structs på structs på structs eller dessa objekt.
Och allt jag definierar är mallen kallade leaderboard.
>> Tavlan bör få en något som heter spelare.
Och vad är spelarna?
Det är vad detta uttryck återvänder.
Och vad är valt namn?
Det är lite mer kod.
Detaljerna i koden vi ska täcka lite senare.
Men just nu vill jag att du förstår att i denna kod, tar vi
spelare, och vi ger det ett värde.
I det här fallet är det en funktion som får köras.
Så vi kan få värdet tillbaka när vi kör funktionen.
Detta är en logg.
Låter det vettigt?
>> Jag kan ändra så det sorteras.
Här finns det en sorts objekt.
Och vad detta säger är jag ska sortera av poäng fallande först och
sedan namn stigande.
Om jag ändrar detta till någon, det kommer att sortera poäng stigande.
Så noll ska vara på topp.
Och när jag zooma in i min hemsida, vi nu ser att webbplatsen uppdateras.
Och poängen är stiga.
>> Nästa funktion jag vill bara att täcka är klicksteg.
Av intresse för tiden, jag kommer inte kunna täcka mer av Meteor
kod, men det finns gott om resurser tillgängliga, och jag kommer att vara
här efter seminariet.
Men jag vill bara att täcka leaderboarden händelser.
Denna syntax lär du dig en Lite senare i föreläsningen.
Detta är JavaScript.
>> Vi säger bara, när vi får ett klick, och det är på den ökning, detta
hash betyder bara ID.
På steg ID-taggen, då vi vill ha att uppdatera - de nyckelord jag vill ha dig
att titta på är uppdatering och välja och spelaren.
Så beroende på vilket spelarens vald, Vi uppdaterar den.
Och det vi gör är att vi öka sin poäng med fem.
Och som kommer att beskriva funktionaliteten vi har här.
>> Efter utgången av detta seminarium, vi ska att kunna se lite mer kod.
Men att gå tillbaka till mitt mål som jag vill ändra webbplatsen, ville jag hit
att lägga till ett ta bort-knapp så Jag kan ta bort spelaren.
Så för att göra det, jag behöver att göra två saker.
Jag behöver uppdatera HTML, uppdatera visa, vad som får visas för användaren, och
då har någon JavaScript att när knappen trycks in Meteor går
att göra något.
Det kommer att ta bort den spelaren.
>> Så det finns en hel del bitar av kod som har i princip redan
har gjort för mig.
Om jag ser här, jag har redan en väg att få den valda spelaren.
Det är det här, om du kan se det.
Så om jag bara -
Jag kommer att ha en annan händelse.
Så jag ska kopiera det jag har.
Eftersom detta är en lista, Jag behöver bara ett kommatecken.
>> Så nu ska jag klicka bort.
Och då istället för spelare uppdatering, Jag kommer att göra spelarna bort.
Och alla spelare tar bort behov är en utvald spelare.
Så denna funktion är allt vi behöver.
Jag behöver lägga till några HTML här dock.
Så om jag bläddra ner hit, detta är den HTML-vy.
Vi hade en sak här, vilket var en en tagg.
Du behöver inte bekymra dig om det.
>> Det viktiga för dig är detta ID inkrement.
Och det är det som får oss att säga, när vi klickade ökning måste vi
ger fem poäng.
Och du kommer att se att detta är en knapp.
Det är vad det BTN betyder.
Och texten i knappen är att ge fem poäng.
Så vad jag ska göra är att jag är går att kopiera den här linjen.
Jag kommer att ändra ID för att radera.
Och jag kommer att ändra text här för att ta bort.
>> Så se till att allt är sparat.
Jag vill gå tillbaka till min JavaScript att se till att jag har
bort uppradade här.
Bra.
Så jag kommer att spara båda filerna.
När du har sparat båda filerna, vi kan gå tillbaka till botten.
Och nu ser vi att vi har en radera-knapp.
Och ett steg.
Du märker att du kan få en fel eftersom när jag klickar
bort, ingenting händer.
>> Ett sätt att felsöka detta är att gå tillbaka till Inspektera Element.
Jag gör detta med flit, så att du kan se hur du skulle felsöka något.
I Inspektera Element, vi har all vår text här nere.
Jag vill gå tillbaka till konsolen.
Och vad händer när jag går här är jag få någon form av fel.
Det säger att det finns ingen metod att ta bort.
>> Vad detta säger är när jag går tillbaka till koden, ringde jag spelare
bort här.
Delete är faktiskt inte rätt kommando.
Så för att ta reda på vad den rätta kommandot är, det finns Meteor API.
Dokumentationen Jag vill peka dig killar till är bara på meteor.com.
Så jag har det här uppe.
Det här är bara så ni vet var att lära sig mer.
>> Det finns en länk till dokumentationen.
Och i grund och botten, jag kan bara hittar på delete.
Och vad du ser, ta bort faktiskt bort.
Det är det kommando som Jag behöver ringa.
Så nu när vi vet att, jag ska att ändra detta bort för att ta bort.
Så nu, när jag går tillbaka till min leader plats, kommer jag att klicka
bort, och nu är jag borta.
Det finns inget mer Roger.
Och jag kan hålla på att ta bort alla enda namn förrän jag har inget kvar.
>> Så det var en liten förhandsvisning om hur man använder Meteor.
Du kommer att lära sig mycket mer JavaScript och HTML nödvändigt att göra
det ser snyggare, som vi täcker in veckans [? bit?] inställd för HTML
och JavaScript nästa [? bit?] inställd.
>> Så bli inte orolig om inte alla det här kommer lätt till dig.
Det kommer med tiden för den slutliga projektet.
Tack för att du visar upp.
Länken jag kommer att uppdatera snart efter seminarium så att du kan se lite mer
exempel som jag har genomförts på hur att få de mer avancerade leader
som jag har på denna webbplats här på en radikal-leaderboard.meteor.
Tack.
>> [Applåder]