ROGER ZURAWICKI: Hej alle. Kan jeg få din opmærksomhed? Tak, gutter. I dag ønsker jeg at tale om Meteor. Det er et JavaScript rammerne. Vi vil komme igennem, hvordan du kan gøre virkelig cool web apps. Før vi kommer ind i JavaScript, jeg bare ønsker at fortælle jer, at dette vil være - du har en nyere stykke dette semester. Det bør være om JavaScript. Jeg tror [uhørligt] er først kommer til at dække web HTML PHP ting, før vi flytte til JavaScript. Og i CS50 er JavaScript betragtes som en klient kode. Så det kun bliver kørt i webbrowseren. Men takket være de seneste fremskridt i teknologi, er vi nu i stand til at køre JavaScript som en server så godt. Så det har skabt en virkelig cool rammer, fordi nu kan du skrive legitimt den samme kode for klienten og serveren. Og når du definere funktioner i din server, kan din klient kalder dem samme funktioner. Og det gør det meget lettere. Hvor der før, hvis du bruger PHP på serveren, JavaScript på forsiden ende, er du nødt til at skrive en PHP funktion og derefter en JavaScript-version af samme funktion til at gøre det samme slags arbejde. Så inden vi går i gang, vil jeg til at vise dig en demo af, hvad Meteor kan gøre for dig. Jeg vil vise dig den demo, som er det, vil du være i stand til at skabe den slutningen af ​​dette seminar. Vi bare gå lige her. Dette er en Leaderboard app. Det er faktisk baseret ud af eksemplet at Meteor giver dig. Meteor er meget rart, fordi når du installere det som en pakke, kan du dybest set lege med disse fire demoer. Og Leaderboard er første af disse demoer. Efter seminaret, vil jeg opfordre jer alle bare at udforske de andre demoer fordi jeg tror, ​​de er virkelig cool, og de viser dig magt Meteor. Så hvad det er, det er hostes på Leaderboard. Dette er blot ærligt en navneliste. Og du kan vælge folk. De bliver gule. Og så kan du give dem fem point. Og du vil opdage, at listen er sorteret fordi som jeg giver mig selv mere og flere point, er jeg nu på toppen. Så dette er, hvor vi skal begynde. Og hvad vil du være i stand til at tage væk fra dette seminar er et par mere funktioner, jeg har føjet til Leaderboard. Vi vil være der dækker hvordan, samt tilføje fem point til en spiller, vi kan slette spillere, kan vi tilføje nye spillere, og vi kan vælge, hvordan vi vil at sortere dem. Og disse er alle meget nemme API-kald at Meteor giver dig. Du har også en funktion her at randomisere scoringer. Så hvad er virkelig cool om dette er du fyre kan faktisk alle gå til webstedet. Jeg vil sætte det i større tekst her. One-radikal-lead erboard.meteor.com. Og når du fyre gå til webstedet, du bør være i stand til at redigere hjemmesiden, og alle dine redigeringer vil være synlig til alle andre. Så du kan - er du fyre alle stand til at forbinde til sitet? Så lege med det. Gå ud og begynde at slette nogle navne. Se hvad der sker. Så du ser alle kan spille. Dette er blot standard sikkerhed tilstand for Meteor. Du kan se, at alle kan ændre hinandens data. Må ikke bekymre dig. Meteor har dog sikkerhed. Dette er en meget let gennemføres funktion, hvor du kan oprette brugere og logins. Men lige nu nogen, der besøger websted kan give sig selv så mange peger som de ønsker. Så jeg altid som dette, fordi dette er en sjov måde at komme i gang. Og så vil vi bare snakke om detaljerne, hvordan Meteor gør dette muligt. Så jeg har tænkt mig at dække, hvad Meteor er, og så vil vi bare nødt til at dække den to forudsætninger, CS50 ikke dækket nok. Men ved udgangen af ​​perioden, bør du være fortrolig med både HTML og JavaScript for virkelig at få dine hænder beskidte arbejde med Meteor. Og jeg synes, det er bare en god måde for endnu mindre behagelig studerende til at gøre afgangsprojekter, fordi de virkelig kan ophold på ét sprog, og de får at se ændringerne i deres arbejde med det samme. Så denne diasshows blot nogle af de vigtige teknologier som Meteor JS giver til dig. Meteor er ikke en ny teknologi på egen hånd. Det er virkelig et konglomerat af alle disse forskellige ting vi har på internettet. Samt HTML, CSS, JavaScript, vi har nogle teknologier som Node.js, hvilket er, hvad giver dig mulighed for at køre JavaScript på bagsiden ende på din server, samt nogle JavaScript biblioteker, som jQuery, understregning. Alle disse vil være velkendt for du ved udgangen af ​​semesteret. Og vi får også at bruge en database kaldet MongoDB, som er en virkelig populær database nu for disse nye nystartede. Du kan tænke på det som ligesom MySQL, men det virker meget pænt med JavaScript. Og der er nogle andre teknologier her og mange flere jeg ikke har listet at alle grænseflade virkelig pænt med Meteor. Jeg er nødt til at sætte dette dias, fordi nogle gange får jeg forvirring om dette. Meteor er kun JavaScript. Det er ikke PHP. Det er ikke Ruby on Rails. Så hvis du skriver kode, hvis du vil skrive et Meteor projekt, du virkelig kan ikke bruge Ruby kode. Du virkelig ikke bruge PHP. Mens vi vil se, at forskellene i kode og syntaks måske ikke så anderledes, vil jeg gerne understrege for dig, at Meteor, alt hvad du koden kun i JavaScript. Og alt, hvad du viser på brugeren vil være HTML CSS. Men du faktisk ikke bruger nogen af de andre sprog, andre seminarer kan dække. Hvad Meteor er også er en webserver. Så selvom du ikke har nogen JavaScript, og du blot ønsker at tjene CSS og HTML-filer, Meteor kan gøre det for dig. Og her er linket igen til demo, jeg fik jer begyndte at spille med. Men lad os gå videre til HTML. Hvor mange mennesker her har ingen idé om, hvad HTML er? OK stor. Og det er helt fint. Du virkelig behøver ikke at vide meget om det, fordi vi vil gå over forbrug meget enkelt. Dette er, hvad den enkle HTML-side ser ud. Det kan være som din hej, verden for HTML, mens vi startede i C med hej, verden. Jeg ønsker ikke at understrege den detaljer om, hvad HTML, hvad hoved, hvad krop, hvad titel gør der. Jeg ønsker blot at understrege strukturen, hvordan du har tags. Og det er vinkelbeslagene. Og det er, hvor du har dine deskriptorer. Så du kan have HTML-dokumentet. Og så vil du lukker HTML-dokumentet med backslash samme ting. Og du har forskellige slags tags. Og bemærk, at de alle er matchet. Du har gerne en body-tagget og derefter en tæt krop tag. Og inde i kroppen tag, vil det være indholdet på din webside. Så denne webside vil simpelthen vise i en hvid baggrund og sort tekst hej, verden. Betyder det giver mening? OK. Nu vil jeg hurtigt dække JavaScript. Med ordene fra en tidligere TF, "JavaScript er den bedste programmering sprog eksisterer i dag. Andre mennesker vil forsøge at fortælle dig noget andet. De er forkerte. "JavaScript er temmelig nice, og jeg vil vise dig hvorfor. Så dette er det klassiske eksempel begynder vi med i C. Vi har hej, verden. Og du bemærker, at selv hvis du krymper det, skal du have mindst to linjer kode her. Jeg har flere linjer kode. Dette kan gøres meget enkelt. Én linje i JavaScript med console.log, og derefter din streng, hej, verden. Nu, selv om vi flytter til en ny sprog JavaScript, næsten alle de færdigheder, du har lært ved kodning i C er direkte bærbare. Så strenge, tanken om strenge i anførselstegn, det er den samme. Semikolon, det er det samme. En pæn feature om JavaScript faktisk er, at du behøver ikke semikolon. Det kan gætte på, at du skal sætte et semikolon der. Men det sagt, bør du altid prøve at lægge dine semikoloner der. Det betragtes som god stil. Og også, er der ingen hovedfunktion. Du skal bare starte øverst i filen og læse ting linje for linje. Så det er, hvad det tager at gøre at hej, verden program. Og så opdager, at du er nødt til at gøre goddag og derefter køre hej. Med JavaScript, er det betragtes som et fortolket sprog. Hvad du behøver at vide er, at der er ingen beslutningsproces. Der er ingen kompilere. Du skal bare køre node. Og husk node er det program, vil køre din JavaScript på en konsol, på en sort boks, der ikke på hjemmesiden. Så du bare give det filen, og det er kommer til at udskrive hej, verden. Jeg vil faktisk gøre en lille demo af at for jer lige her. Så lad os gå over til min Node.js terminal. OK. Lad os flytte her. Så jeg har tænkt mig at starte node. Og jeg vil vise jer i netop et sekund, hvordan man får det installeret, hvis du ikke gør. Lad mig gøre det lidt større. OK. Jeg håber du fyre kan se. Så jeg kan skrive kode som jeg gjorde før i console.log. Hej, Roger. Og bemærk jeg ikke behøver at gøre det semikolon, men så får jeg denne underlige udefineret ting. Nå faktisk, pyt om det udefinerede ting. Ting jeg vil have dig til at lægge mærke til er, at du behøver ikke hovedfunktionen her at begynde at køre kode. Og der er ingen backslash ende. Der er nogle små funktioner, JavaScript kan gøre for dig. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Oh yeah. Jeg er ked af det. Og at pilen betyder bare node er klar til en anden kommando. Så du kan have det gøre simple matematik, ligesom 1 plus 1. Og ligesom i C, disse matematik symboler er bare det samme. Jeg kan gøre console.log af et tal. Og så udskriver to. JavaScript er rart i den forstand, fordi selv om to er en int, ligesom i C, hvis du gjorde printf med to, vil du få en fejl. Men JavaScript ved, åh, du er udskrivning noget. Jeg har tænkt mig at bruge en streng. Så lad mig konvertere, at to ind i en streng til dig. Og du kan også gøre nogle underlige ting ligesom hi og derefter plus to. Dette er blot endnu et eksempel, hvordan to kan konverteres i der. Så med at ud af den måde, lad os bare dække lidt mere JavaScript. Så i C, har vi typer. Når vi har oprettet en ny variabel, vi må sige, at er det er char * eller streng i tilfælde CS50. Eller hvis vi havde et decimaltal, vi havde at sige flyde. Hvis vi havde brug for en boolesk, vi havde at sige b.. Og så når vi havde noget, blev b, det skulle forblive en bool. Vi kunne ikke magisk ændre det til en int medmindre vi skrev i parenteser, int af b. I JavaScript, er der ingen typer. Du skal bare tænke på det som var. Og VaR er, hvordan du opretter en ny type. Så det kan have var s være en streng, var n er en svømmer, og var B er sandt. Og én ting, du ikke kan gøre i C er Jeg kan nu sige, efter at linje b lig med et heltal. Og det fungerer fint. Betragtninger i C, vil det sige som Deres tal er ikke bool. Jeg kan ikke gøre det for dig. Eller [uhørligt] ville kaste en fejl. Og jeg kan hurtigt gå tilbage til node og vise nogle af denne funktionalitet. Så jeg kan have en var en. Kalder det "Apple". Så nu når jeg udskriver et, Jeg får min streng, 'Apple.' Men jeg kan nu også sige lig med 3. Og bemærk der er ingen fejl. Og nu er lig med 3. Eventuelle spørgsmål, så vidt? Ja. PUBLIKUM: Vent, så console.log er dybest set printf, right? ROGER ZURAWICKI: console.log er din printf. PUBLIKUM: Right. Så hvordan kommer, hvis du bare skrive i otte eller [uhørlig], hvad betyder det [Uhørligt]? ROGER ZURAWICKI: Right. Så det er - ting i grønt bliver udskrevet ved konsollen. Og hvad vi vil se næste er når vi flytter til internettet side, vil vi ikke gøre - JavaScript vil være at have en HTML skabelon, som jeg vil dække i den Meteor del af seminaret. Og det er, hvor du kan sige, giv mig værdien af ​​a, og det vil sætte en i din hjemmeside. Fordi hver webbrowser faktisk har en lille konsol. Og hvis du kiggede meget omhyggeligt, du ville få nogle oplysninger, som din printf er vist der med hver webside du indlæse. PUBLIKUM: Hvordan fik du til skallen skærmen? ROGER ZURAWICKI: Så der er en kommando kaldet node, og det kommer med Meteor. Så jeg vil bare holde op ud derfra. Node er det program, kører JavaScript. Hvis du går til meteor.com, du kan installere Meteor og Meteor kommer med knude. Fordi Meteor er blot en samling af alle disse softwarepakker. Når vi kommer til vores eksempel, vil jeg gå alle gennem installationen Meteor og derefter kan du afspille med node selv. OK, godt. Så en anden stor feature om at arbejde med JavaScript er loops er de samme. Temmelig meget nøjagtig det samme. For loops, mens loops, gøre mens sløjfer, hvis andet. Det er alt det samme med seler. Det er den samme syntaks. I tilfælde af en for-løkke, den lille detaljer, som du skal være opmærksom at der i stedet for int i er lig med 0, vi nødt til at sige var jeg lig 0. Men det er på grund af de variabler typer, som vi talte om før. Bemærk, at printf bliver en log, en console.log. Og vi behøver ikke at gøre procent p backslash n og derefter passere i jeg. Du kan bare sige, at jeg. Og det ville udskrive numre fra nul til fire. Hvis du fyre ønsker at prøve dette, fordi du opdraget en god pointe. Hvis du ønskede at køre denne kode på din egen browser, vil jeg anbefale, at alle åbner Google Chrome. Google Chrome eller enhver webbrowser rigtig, men jeg kan lide Google Chrome fordi det meget standardiserede. Du kan gå til, tror jeg, hvis du ret klik på en hjemmeside, bare i hvide rum, vil du se en mulighed kaldet Undersøg Element. Det er normalt den sidste. Og når du klikker på det, bør du få en ting til bunden vises her. Lad mig zoome ind her. Og vi har et par faner her. Den ene, du holder af, er konsol. Og det er en JavaScript-konsol at du nu kan arbejde med. Store. Så jeg kan skrive i den samme ting Jeg var at skrive før i node. En plus en er to. Var et lig med "Apple". Og så ville jeg udskrive en, og et er 'Apple'. Så i enhver webbrowser, Firefox, Chrome, Safari, uanset hvad du bruger, som længe du har adgang til en JavaScript konsol, den samme slags kode jeg kørte i knude du kan køre i din egen konsol. PUBLIKUM: [uhørligt]? ROGER ZURAWICKI: Sådan komme til konsol? Du er nødt til at højreklikke på det tomme rum på siden, og så skal du gå til Undersøg Element. Så egentlig vil jeg gerne jer at bare sørg for du kan Undersøg Element i Chrome. Og se, når du skriver i nogle kode i konsollen at det kører ordentligt. Du er velkommen til at stille spørgsmål, hvis noget er ikke klart her. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Enhver type, til højre. Der er kun én type til alle variabler i JavaScript. Og når du nødt til at erklære en variabel, siger du var. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Ja. Det gør, men i JavaScript, er det meget smart om allokering af hukommelse. Der er ingen allokere. Der er ingen gratis. Så du behøver ikke at bekymre dig om det. Det er en anden god egenskab at JavaScript giver dig. Så jeg vil gerne flytte på. Ville det være OK? OK. Store. PUBLIKUM: Jeg er bare har problemer finde [? Undersøg Element. ?] ROGER ZURAWICKI: So Safari looks en smule anderledes, men har du har Chrome eller Firefox? Det er lettere dem til at arbejde med. Og for dine projekter, vil jeg anbefale stikning med en browser, fordi du får en masse af bugs næsten fordi hver browser godbidder JavaScript HTML lidt anderledes. Så jeg tror, ​​dit liv vil være en masse lettere, hvis du holder dig til Chrome fordi den er tilgængelig på alle maskiner. Og det er en temmelig populær browser. OK? Så det næste emne, som vi skal dækning i JavaScript - Jeg er ked af formateringen her. Jeg var nødt til at strække dias til at matche widescreen-projektor. Men jeg vil nu gerne tale om hvordan du gør funktioner. I C, vi nødt til at erklære hver funktion. Ligesom int tilføje, og det tager en int i x, og en int y, og så tilføjer vi dem og returnere den. I JavaScript, funktioner er faktisk anden variabel type. Så vi bare sige var tilføje, og det er lig en funktion. En funktion, der tager en x-og en y. Og hvad betyder denne funktion gør? Den returnerer x plus y i nøjagtig samme syntaks som i C. Og du bemærker, at i JavaScript, vil du ikke at vide, hvad det funktion returnerer fordi siden variabler ikke har typer alligevel, det det er ikke rigtig produktiv, tror jeg, at angive alle dine typer i dine funktioner. Og så når du kalder en funktion, er det nøjagtig samme syntaks som C. Du bare passere i dine to argumenter. Jeg vil gerne prøve det i min knude. Kan jeg ændre dias? PUBLIKUM: [uhørligt]. Vil vi få en kopi af de slides? ROGER ZURAWICKI: Ja. Så lad os gå tilbage til node. OK. Så jeg vil sige var add lig funktion. Tager en x, der tager et y. Og så er det ved, at sætningens ikke afsluttet. Så i node eller i din konsol, du vil bemærke dot dot dot. Så du kan holde skrive din kode. Og nu vil jeg sige tilbagevenden x plus y. Og derefter lukke bøjlen. Og det øjeblik, jeg lukker skinnen, det ser, at redegørelsen er færdig. Og nu kan jeg sige tilføje et og to. Og jeg får tre ud. Bemærk, at hvis jeg bare tilføje, det fortæller mig, det er en funktion. Og én ting bare for at være opmærksom på er, hvis du giver det et forkert antal argumenter, vil det gøre. Det vil køre, men du kan få nogle virkelig mærkelige resultater. Lidt ligesom en skraldespand værdi, du kan tænke på det. Så kan du gå videre og prøve dette i dine browsere. OK, så af hensyn til tiden, vil jeg nu gå videre til de næste funktioner JavaScript. Så vi har talt om funktioner. Vi har talt om loops, hvis udsagn også. Syntaksen er den samme som C og variabler. Og nu vil jeg tale om arrays. Jeg er ked af, at de slides Fik lidt afskåret. Men faktisk, i den første sektion, alt hvad du behøver vil arbejde. Så vi har en anden type til variable kaldes arrays. Og vi bruger firkantede parenteser at betegne dem. Så i det første eksempel, var arr., tom array. Dette er den tomme liste, så et array indeholder ingen elementer. Og du kan også få en array med tre strenge. I C, hvert element i dit array skulle være den samme type. Men fordi i JavaScript der kun en type, kan arrays faktisk har forskellige typer af værdier. Ligesom her, har vi et array med en float, en bool, og en int. Den måde, du får en længde på et array, du behøver faktisk ikke at bruge størrelse eller noget. Du skal bare sige array og derefter dot længde. Og denne dot længde, kan du tænke på den slags gerne en struct, hvordan hver matrix har et felt, en ekstra variabel inde i det der kaldes længde, som holder styr på, hvor længe dit array er. Så jeg bare hurtigt kommer til at gå ind i node og vise jer det samme. Så jeg kan få et array. Det kan være tomme liste. Og det vil udskrive mig sikkerhedskopiere en tom liste. Store. Jeg kan nu sige, at den vifte har 1, og 2,3, og sandt. Så alle de forskellige typer. Og du bemærker det fungerer fint. Array jeg kommer tilbage understøtninger alle de værdier, jeg gav det. Hvis jeg ønskede at få det første element i array, syntaksen er faktisk den samme som i C. Du kan sige matrix nul. Og du får en. Jeg kan sige det samme til matrix to, og jeg får sandt. Hvis jeg gør noget uden for array, JavaScript er et sikkert sprog fordi jeg ikke vil få en seg fejl. Jeg får udefineret. Og dette udefineret, kan du slags af tænke over det som nul. Men det kan være virkelig irriterende, når du kode, fordi du bliver nødt til at kontrollere, at næsten alt, hvad du gør det, du arbejde med er udefineret. Og vi vil se nogle eksempler på dette, når vi arbejder i Meteor. Selvom matrix fire er udefineret, Jeg kan tildele den en værdi. Så jeg vil sige det er lig én. Og så hvis jeg går til array, jeg har den ekstra værdi der. Og bemærk at række tre, som også blev udefineret, forbliver udefineret. Så nu har jeg et array med et hul i midten. Men hvis jeg trykt matrix fire, Jeg ville få en. Hvis jeg gjorde vifte tre, får jeg udefineret. Så den nice feature at JavaScript tillader dig at gøre, er, at listerne kan ændre størrelse. Arrays, arrays er lister de ændrer størrelse. Og du kan angive enhver placering inde i dem. Og alle hullerne vil blive fyldt med disse udefinerede værdier. Så vi har talt om arrays. Nu er den sidste ting, jeg ønsker at dække i JavaScript, og det er meget vigtigt til at forstå den kode, Jeg har tænkt mig at vise dig, kommer til at være objekter. Og objekter er et begreb i - dybest set, de er til stede i mange programmeringssprog. Og hver programmeringssprog kan lide at tænke på dem en smule anderledes. Men jeg tror for Meteor, en god analogi er C struct. I C, hvis vi ønsker at finde den struct student, ville vi nødt til at angive alle de ting inde i den. Så det har at have et navn. Det skal have et år. Det skal have et køn. Men vi er også nødt til at give det typer af alle disse ting. Og nu hvor vi har denne form til den struct kaldet elev, kan vi have en ny struct, og så vi kan manuelt sige, hvad hvert af felterne er. Og det er, hvor vi bruger dot navn, dot år, dot køn. Og så har vi bare, i sidste linje af kode her, jeg bare udskrive navnet på den struct studerende. I JavaScript verden, er der ikke sådan noget som struct studerende. Du behøver ikke generere en forudindstillet struktur. Du faktisk bare, i disse beslag, du sige, hvad alt er. Og det er denne underlige notation med kolon og derefter komma, men du vil vænne sig til det hurtigt nok. Og det er faktisk en virkelig let, fleksibel måde for bare manipulere objekter. De bemærker, at hvis jeg vil nu få navn fra s, jeg bare gøre s.name. Er der nogen spørgsmål om denne? Denne regel har været en meget forvirrende emne, når vi introducere folk til JavaScript. Jeg vil gøre nogle eksempler på dette i node. Ja? PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Så gør du har et eksempel, flere variabler af denne type. PUBLIKUM: [uhørligt]. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: OK. Så jeg tror den måde, du ville gå om, er du ville lægge objekter i et array, og nu vil du have en vifte af objekter. Besvarer det dit spørgsmål? PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Ja. S er et objekt. Så vi kan gå i node og bare lege en lille smule. PUBLIKUM: [uhørligt]? ROGER ZURAWICKI: Åh, OK. Så hvis du spørger, hvad klasser er, klasser behandles meget forskelligt, og de har en virkelig underlig ordning kaldet prototyping, som du ikke brug for at vide om. Der er ingen fast måde at gøre det. Så hvis du ønsker at generere flere, du ville lige slags har en funktion eller noget. Du generere din egen funktion. Og du ville returnere et objekt. Det ville være det nemmeste måde at gøre det. Giver det mening? OK. Store. Så når vi har en forståelse af JavaScript objekter, de er - Åh, ja. PUBLIKUM: [uhørligt] eksempel, hvad er forskellen mellem "Roger" med anførselstegn versus [Uhørligt] med enkelte anførselstegn. ROGER ZURAWICKI: OK. Så dette er i C, har vi det indre citater, der repræsenterer tegn, og dobbeltklik citater repræsenterer strenge. JavaScript faktisk smider det væk fordi du kan have strenge med enkelt eller dobbelt citationstegn, og der er ikke sådan noget som en enkelt char. Men hvis du bare kopieret det samme C-kode, JavaScript ville behandle det bare fint. Hvilket er grunden til jeg behandlede det som - det er derfor jeg kan bogstaveligt havn koden i den forstand. Og jeg vil gerne vise dig et eksempel af en mere kompliceret objekt. Så du kan se, at et objekt kan have strenge som værdier. Det kan have en anden liste over værdier. Det kunne have en liste over objekter som værdier. Der er virkelig ingen grænse for dette. Så her er det bare en god demonstration hvordan du kan få en masse forskellige typer foregår alle i et objekt. Giver det mening? Nu kan du også få arrays af objekter. Og her er slags ligner det, du spurgt, om du kan få objekter af samme type. Men problemet er, at der ikke er nogen fast format for objekter i JavaScript. Så du er nødt til at specificere dem selv. Og du er nødt til at sørge for at de er ensartede. Så her, når jeg opretter et objekt, jeg har at sikre, at hver enkelt har en navn, og hver har et hus. Og så har jeg en bred vifte af dem, og det kan være mit sommerhus. Og så her kan du slags se for-løkken foregår. For-løkken bliver kun en virkelig fælles måde at krydse over en række i JavaScript. Bemærk, at dette mønster er meget lig til C ækvivalent, hvor man har int i er lig med nul. Jeg er mindre end længden. Og derefter jeg plus plus. Det er næsten den samme kode, bortset fra nogle få detaljer. Så betyder alle forstår hvilket formål? Bare tænk på det som en C struct. Og den måde, du får adgang til de områder, er bare med dot. Og så længe du husker, hvordan bruge prik, vil du være fint. OK, så nu kan alle læse, at link? Dette er linket til projektet. Er der nogen har problemer se link? OK, lad os ændre det derefter. Det er ikke - Ja, det er nok den nemmeste måde at gøre det. Store. Så hvis du går til dette websted, bør der være nogle instruktioner, som jeg vil gå over på, hvordan vi kan installere Meteor og få vores prøve projekt kørende. Jeg ønsker at sikre alle har linket ned, før jeg flytter. Kan jeg flytte på? OK, godt. Så her er jeg på hjemmesiden. Du vil bemærke i readme-filen, vi har nogle instruktioner om, hvordan at få th oprettet. Du er nødt til at være enten i CS50 apparat eller bare på en Mac. Windows ikke vil arbejde. Men dybest set noget, der er ikke Windows bør arbejde med disse anvisninger fint. Men jeg kan gøre det lidt større så godt. Så du skal køre den første par kommandoer. Disse fyre vil bare installere Meteor. Jeg kan gå ind i min terminal. Og hvis jeg kører det samme nu, Jeg allerede har det installeret. Så det er lidt kortere. Det kan tage lidt længere tid til jer. Men jeg vil gerne først sørge at vi har Meteor kørende. Efter Meteor har installeret, skal du kunne få node i konsollen. PUBLIKUM: De spørger om en adgangskode. ROGER ZURAWICKI: Det ville være din brugeradgangskode, hvis du er på en Mac. Det behøver blot tilladelse til at ændre nogle systemfiler. Så var spørgsmålet, hvis den beder dig om en adgangskode, er det bare at spørge dig til dit brugernavn adgangskode, når du logger ind på din Mac. Og det er, så du kan ændre systemfiler. Og når du er klar, kan du gå videre til det næste trin, som kopierer kodeeksempler jeg har fra hjemmesiden. Og du får en ny mappe i din hjemmebibliotek kaldet leaderboard, og kan vi begynde at arbejde derfra. Så jeg bare kopiere og indsætte disse kommandoer i min terminal. Og for mig, jeg allerede klonet det. Så jeg kan bare nu flytte i leaderboardet. Og jeg skulle have et par filer derinde. Eventuelle spørgsmål? PUBLIKUM: [uhørligt] ikke fungerer. ROGER ZURAWICKI: Åh, du måske brug git installeret. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Undskyld? PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Åh, OK. OK. Det er fordi du måske nødt til at være logget på GitHub at få dette link. Hvis du fyre kan se, at den nemmeste måde at gøre det jeg ville sige, er Download zip. Og det vil blot downloade alle filerne. Og så når du sætter det i din downloade eller dit home bibliotek - Jeg anbefale at sætte det i din hjemmebibliotek, så vi kan alle køre de samme kommandoer. Så længe vi har de filer, vil vi være i stand til at begynde at arbejde med dem. Lad mig vide, hvis folk har problemer med at downloade filerne. PUBLIKUM: Ved hjemmebibliotek, du mener - ROGER ZURAWICKI: Så hjemmemappe ville være John Harvard, hvis du er i det CS50 apparatet. For at komme til dit hjem bibliotek, bare skrive i C. PUBLIKUM: [uhørligt] CS50 apparat [uhørligt]. ROGER ZURAWICKI: Ja. Du ønsker at køre de kommandoer i din terminal. PUBLIKUM: [uhørligt]. Jeg fik en fejl, der siger nej sådan fil eller mappe. ROGER ZURAWICKI: Vi kan tage en hurtig pause og bare sørge for, at alle har Meteor installeret, og jeg vil bare gå forsøge at hjælpe folk ud. Prøv at hjælpe hinanden, hvis du kører ind i problemer. Undskyld, ja. Er du både i apparatet? PUBLIKUM: Ja. Jeg har den RISA ROGER ZURAWICKI: OK. Hvis du går tilbage til hjemmesiden, gå rulle op til toppen. Og der er denne HTTPS. PUBLIKUM: Kopier dette? ROGER ZURAWICKI: Ja. Og så vil man gerne skrive i git klon. Så hvis du trykker på Kontrol A - PUBLIKUM: Her? Og gør [uhørligt]? ROGER ZURAWICKI: G-I-T. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Git og derefter klone. Så det er meget lig den kommando, du havde ovenfor, men URL'en ændret. Så før det var denne, nu er det dette. Lad mig opdatere - ja. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Dette er hentet. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Åh, så det ikke klone korrekt. Jeg vil løse det. Der er en fejl med at forsøge at hente filerne. Lad mig opdatere kommando til jer så jeg kan sørge for det vil virke. Jeg er ked af det. Det bør være den samme for Mac eller CS50 apparat. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Jeg har opdateret kommando til nummer to, hvis du opdatere siden. Og med dette, URL, skal du være i stand til at downloade filerne. PUBLIKUM: Så hvis vi stadig er downloading [uhørligt]. ROGER ZURAWICKI: Hvis du er stadig henter Meteor? PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Ja, hvis du vil at udvikle sig på din Mac. Men du har brug Xcode developer værktøj installeret. Jeg har testet disse kommandoer på CS50 apparat, så jeg kan garantere at det vil virke. Ja. lad mig gå og hjælpe dig. PUBLIKUM: [uhørligt]. Jeg giver min adgangskode. Dette er Mac. Og så gør jeg [uhørligt]. ROGER ZURAWICKI: OK. Jeg ville prøve at køre alle kommandoerne udelukkende i CS50 apparat terminal. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Jeg ville få det til at virke først på terminalen, om CS50 apparat, og derefter Mac-terminalen. PUBLIKUM: Så hvis du gør det på CS50 apparatet stilles sådan, [uhørligt]. ROGER ZURAWICKI: Jeg vil gerne flytte på, men hvis folk stadig har problemer med at opsætte Meteor, Kevin er mere end glade for at hjælpe jer ud, Kevin i grå skjorte. Hvad vi skal have, er vi kommer til at køre den sidste kommando, nummer tre, i vores terminal. Når vi gør det, vil vi køre Meteor. Og du bør - Åh, jeg har allerede Meteor kørende. Så det kommer ikke til at lade - lad mig bare lukke min anden Meteor. Når jeg kører Meteor, du skulle nu se, at - bør du se den aktuelle mappe at det er servering. Og nu er det kommer til at sige serveren kører på http://localhost. Det er den webadresse, du ønsker at sætte i i webbrowseren. Og på denne webadresse, skal du være i stand til at adgang til en dejlig lille leaderboardet. Så bemærke, at dette er på localhost, hvilket betyder, at hvis du gør noget ændringer, du ikke kommer til at se hinandens ændringer. Betragtninger på hjemmesiden jeg viste dig i starten, kunne vi få alles ændringer, fordi alle var adgang til samme hjemmeside. Så lad mig bare gå til [? ord?] 3.000. Så du bør være i stand til bare at bekræfte at funktionaliteten fungerer. Du kan vælge forskellige mennesker, og du kan give dem forskellige punkter. Så jeg give nogen point. Du kan også se, at de stiger i rang. Nu, i interesse af tid, der er tre funktioner, som jeg har gennemføres. Og vi kommer til at gennemføre sletning brugere som vores første spillefilm. Men før vi går videre, er der nogen spørgsmål? Du havde din hånd op. Ja? PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Kan du tjekke at Meteor er installeret? PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Local host 3.000? Og du er i CS50 apparat? Jeg kan gøre - du behøver ikke at være på en Mac. Dette vil arbejde i apparatet. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: I den normale webbrowser, ja. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Er Meteor kørende? Så OK, der er en forskel her. Hvis du kører det i apparat, du skal gøre localhost i apparatet. Hvis du kører den i din Mac, som jeg gør, så kan jeg gøre min Mac Google Chrome. Men hvis du bruger CS50 apparatet du er nødt til at gøre alt i apparatet. Så du er nødt til at bruge Google Chrome i apparatet. PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Det er stadig ikke fungerer? PUBLIKUM: [uhørligt]. ROGER ZURAWICKI: Så bare at gentage, hvordan kan du få adgang til hjemmesiden nu. Du har en URL-adresse her på localhost 3000. Hvis du er i CS50 apparatet du nødt til at åbne CS50 apparatets Google Chrome. Og i, at Google Chrome i apparat, kan du skrive i denne webadresse, og du bør se en leaderboardet. Så jeg har tænkt mig at bare lægge det ud til siden her en lille smule. Og nu jeg har tænkt mig at åbne min teksteditor herovre. Så lad mig bare sørge for, at koden er i orden. OK. Store. Jeg vil gerne nu gå igennem koden lidt. Og den første fil, jeg vil gerne starte IS leaderboard.html. Du vil være i stand til at få denne kode efter seminaret, så jeg vil bare gerne vise dig på min computer, hvad der foregår. Så jeg håber, at alle kan se det. Så i begyndelsen af ​​filen, vi har vores hoved og titlen, som svarer til, hvad vi så i hvert HTML-dokument. Og så vil vi have body-tagget her. Hvad jeg har valgt, er den vigtigste krop, dybest set, hvad der er kommer til at blive vist. Men der er nogle nye ikke-HTML ting, og der er i dobbelt vinkelbeslag. Og disse er skabelon tags. Så du ser her dette beslag beslag ny leaderboardet. Og det er en slags - tænk på det som at kalde en funktion til HTML. Dette er en særlig udgave af HTML. Det er den version, Meteor anvendelser, som Derfor kan du vise forskellige ting, såsom leaderboardet navne og knapper. Men leaderboard fortæller dig at gå til skabelon med navnet leaderboardet. Så skabelon ikke bliver vist ved selv, men det er en funktion, så det vil blive kaldt. Og du vil erstatte i alt dette kode lige her i leaderboardet. Den interessante del af leaderboard her er netop denne tabel. Hvis du lige har læst det, læse denne kode, højt, bør det være intuitiv fordi leaderboard, vi alle har her er et bord. Dette ID-klasse ting, du ikke gør behøver at bekymre sig om. Bare vide, at der er en tabel header. Det er denne thead. Og det finder et navn og en score. Alle disse tags, ligesom thtable, thead, du bare lære som du går sammen. Det er ikke vigtigt, at du huske disse, fordi du kan bare få adgang til nogen Reference Online. Eller ved udgangen af ​​semestret disse vil bare være meget fortrolig med dig. Efter overskriften på bordet, del, som jeg ønsker at henlede Deres opmærksom på er denne h tag. Fordi det er i dobbelt parentes, Det er en skabelon. Så det betyder for hver af spillerne, hvad spillerne er vi nødt til at vise det. Og vi går til den spiller skabelon. Hvis vi ruller ned en smule mere - Jeg håber, at alle kan se det. Vi har spilleren skabelon. Og denne skabelon dybest set definerer en tabelcelle, hvor du lægger i navnet her og score. Zoomer ud nu, kan vi se, at dette stykke kode - og det var vores spiller dernede - definerer en af ​​disse celler. Hver ting, som jeg klikker bliver gul. En enkel måde jeg kunne ændre det nu. Sørg Meteor kører stadig. Meteor bør være en server proces, så du bare lade det kører, når du har udviklet. Lad os sige, at jeg ønskede at ændre alle de navne eller score. Og jeg vil sige, at jeg har tænkt mig at tilføje punkter her. Så ændringen jeg lavede her var, i stedet for bare score, jeg tilføje score plads point. Jeg har tænkt mig at zoome ud, og jeg er kommer til at redde min fil. Og efter jeg gemme min fil, jeg har brug for at sørge for Meteor kører. Undskyld. Jeg vil gerne vise dig redigeringer blev udført i realtid. Så jeg vil bare ændre noget tekst. Klik på en spiller. Jeg sætter den i alle hætter. Og det bør være, at hvis det arbejder korrekt, når jeg gemmer det, er det ville opdatere. Åh, jeg tror lige nu er problemet Jeg er ikke i den rigtige mappe. OK. Jeg er ked af det. Så her, hvad du bemærker, er min ændring gik igennem. Nu siger jeg ønsker at vende ændringen. Jeg ønsker at gå tilbage til, hvad jeg havde. Jeg bare at skrive det normalt. Klik på en spiller. I det øjeblik jeg gemmer den, hjemmeside opdateres for mig. Og jeg ser min ændring på webstedet med det samme. Dette er en virkelig nyttig funktion i debugging, fordi nu Jeg behøver ikke at - når vi skriver C-kode, ikke kun gjorde vi nødt til at gemme filen, men vi var nødt til at gøre det og derefter køre den igen. Meteor er meget rart, fordi i modsætning til C, det øjeblik du gemmer din HTML eller JavaScript-fil, ændringen dukker op med det samme. Et spørgsmål er, i disse skabeloner, hvordan får jeg værdier som spillerne eller vælg et navn? Hvis jeg zoomer ind her i min kode, Jeg ser dette for hver spillere. Så skabelonen ved, at Jeg har spillerne eller anden måde. Og det ved, at der er et valgt navn. Hvor kommer det fra? Det kommer fra JavaScript. Og hvis du går til leaderboard.js, dette fil, nu når jeg går her, har vi en få kommandoer defineret. Dette er særlig Meteor syntaks. Bemærk, at du ikke behøver vars eller noget. Men disse er blot structs på structs på structs eller disse objekter. Og alt hvad jeg definerer er den skabelon kaldet leaderboardet. Leaderboard bør få en ting kaldet spillere. Og hvad er spillerne? Det er hvad dette udtryk returnerer. Og hvad er valgt navn? Det er noget mere kode. Detaljerne i den kode, vi vil dækker lidt senere. Men lige nu vil jeg dig til at forstå at i denne kode, tager vi spillere, og vi giver det en værdi. I dette tilfælde er det en funktion der bliver henrettet. Så vi kan få værdien tilbage når vi kører funktionen. Dette er en log. Giver det mening? Jeg kan ændre den måde, det er sorteret. Her, der er en slags objekt. Og hvad det siger, er jeg har tænkt mig at sortere efter karakter faldende først og derefter navnet stigende. Hvis jeg ændre dette til en, går det sortere score stigende. Så nul skal være på toppen. Og når jeg zoome ind på min hjemmeside, vi nu se, at hjemmesiden opdateres. Og scoren er bestige. Den næste funktion jeg ønsker blot til at dække, er klik tilvækst. Ud af interesse af tid, vil jeg ikke være i stand til at dække mere Meteor kode, men der er masser af ressourcer tilgængelig, og jeg vil være her efter seminaret. Men jeg bare ønsker at dække rangliste begivenheder. Denne syntaks du vil lære en lidt senere i foredraget. Dette er JavaScript. Vi siger bare, når vi får et klik, og det er på den tilvækst, dette hash betyder bare id. På tilvækst ID-mærke, så vi vil for at opdatere - de centrale ord, jeg vil have dig at se er at opdatere og vælge og afspiller. Så uanset spillerens valgt, vi opdatere den. Og hvad vi gør, er vi tilvækst sin score med fem. Og der vil beskrive funktionaliteten vi har her. Efter afslutningen af ​​dette seminar, vi får være i stand til at se nogle mere kode. Men at gå tilbage til mit mål, at jeg vil ændre webstedet, jeg ønskede herovre at tilføje en fjern knap så Jeg kan slette afspilleren. Så for at gøre det, jeg har brug for at gøre to ting. Jeg har brug for at opdatere HTML, opdatere se, hvad der bliver vist til brugeren, og så har nogle JavaScript, når trykker på knappen, er Meteor går at gøre noget. Det kommer til at fjerne den spiller. Så der er en masse bidder af kode der har stort set allerede blevet gjort for mig. Hvis jeg ser her, jeg har allerede en måde at få den valgte afspiller. Det er det her, hvis du kan se det. Så hvis jeg bare - Jeg har tænkt mig at have en anden begivenhed. Så jeg har tænkt mig at kopiere, hvad jeg har. Da dette er en liste, Jeg har bare brug for et komma. Så nu har jeg tænkt mig at klikke på Slet. Og så i stedet for spillere opdatering Jeg har tænkt mig at gøre spillerne slette. Og alle spillere slette behov er valgt afspiller. Så denne funktion er alt, vi har brug for. Jeg har brug for at tilføje nogle HTML her selv. Så hvis jeg rulle ned her, dette er HTML-visning. Vi havde en ting her, som var en et mærke. Du behøver ikke at bekymre dig om det. Hvad betyder noget for dig, er dette id tilvækst. Og dette er hvad tilladt os at sige, når vi klikkede tilvækst, er vi nødt til at giver fem point. Og du vil se, at dette er en knap. Det er, hvad btn betyder. Og teksten i knappen er at give fem punkter. Så hvad jeg har tænkt mig at gøre, er jeg kommer til at kopiere denne linje. Jeg har tænkt mig at ændre id for at slette. Og jeg har tænkt mig at ændre tekst her for at slette. Så sørg for at alt er gemt. Jeg ønsker at gå tilbage til mit JavaScript at sørge for, at jeg har slette linet op her. Godt. Så jeg har tænkt mig at gemme begge filer. Efter at have gemt begge filer, vi kan gå tilbage til bunden. Og nu ser vi, at vi har en slette knap. Og endnu et skridt. Du opdager du måske få en fejl, fordi når jeg klikker på slet intet sker. En måde at fejlsøge dette er at gå tilbage til Undersøg Element. Jeg gør det med vilje, så du kan se, hvordan du ville debug noget. I Efterse Element, vi har alle vores tekst hernede. Jeg ønsker at gå tilbage til konsollen. Og hvad sker der, når jeg går her er jeg får nogle form for fejl. Det siger, at der er ingen metode slette. Så hvad det siger, er, når jeg går tilbage til den kode, jeg kaldte spiller slette her. Slet er faktisk ikke den rigtige kommando. Så for at finde ud af, hvad den rigtige kommando er, er der Meteor API. Dokumentationen vil jeg pege dig fyre er lige ved meteor.com. Så jeg har det heroppe. Det er bare så du fyre kender hvor at lære mere. Der er et link til dokumentationen. Og dybest set, jeg kan bare finder for sletningen. Og hvad du ser, slette faktisk fjerne. Det er den kommando, Jeg har brug for at ringe til. Så nu, at vi ved, at jeg vil at ændre dette slet for at fjerne. Så nu, når jeg går tilbage til min leaderboard site, jeg har tænkt mig at klikke slette, og nu er jeg væk. Der er ikke mere Roger. Og jeg kan holde ud at slette alle ét navn, før jeg har intet tilbage. Så det var en lille forsmag af, hvordan man bruger Meteor. Du vil lære en masse mere JavaScript og HTML nødvendigt at det ser smukkere, som vi vil dække i denne uges [? stykke?] indstillet til HTML og JavaScript i den næste [? stykke?] indstillet. Så du skal ikke blive bekymret, hvis ikke alle denne ting kommer let til dig. Det vil på det tidspunkt, det endelige projekt. Tak for at dukke op. Linket Jeg vil opdatere hurtigt efter seminar så du kan se nogle flere eksempler, som jeg har gennemført på hvordan for at få de mere avancerede leaderboard at jeg har på denne hjemmeside her på en radikal-leaderboard.meteor. Tak. [Applaus]