Tip:
Highlight text to annotate it
X
>> ROGER ZURAWICKI: Hei alle sammen.
Kan jeg få din oppmerksomhet?
Takk, gutter.
I dag vil jeg snakke om Meteor.
Det er en Javascript-rammeverk.
Vi skal gå gjennom hvordan du kan gjør virkelig kule web apps.
>> Før vi kommer inn i Javascript, jeg bare ønsker å fortelle dere at dette vil
bli - vil du ha en senere sette dette semesteret.
Det bør være om Javascript.
Jeg tror [uhørbart] er første kommer til å dekke web HTML PHP ting før vi
flytte til Javascript.
Og i CS50, er Java ansett som en klient kode.
Så bare det blir drevet i nettleseren.
>> Men takket være de siste fremskritt i teknologi, har vi nå klart å kjøre
Javascript som en server i tillegg.
Så dette har skapt en veldig kul rammeverk fordi nå kan du skrive
legitimt den samme koden for klienten og serveren.
Og når du definerer funksjoner i din server, kan kunden ringe dem
samme funksjonene.
Og det gjør det mye enklere.
Mens før, hvis du bruker PHP på serveren, Java på forsiden
slutt, må du skrive en PHP-funksjon og deretter en Javascript-versjon av
samme funksjon for å gjøre det samme type arbeid.
>> Så før vi kommer i gang, vil jeg vise deg en demo av hva
Meteor kan gjøre for deg.
Jeg vil vise deg demoen, som er det vil du være i stand til å skape ved
slutten av dette seminaret.
Vi bare gå rett her.
Dette er en Leaderboard-app.
Det er faktisk basert ut av eksempelet at Meteor gir deg.
>> Meteor er veldig fint fordi når du installere det som en pakke, kan du
utgangspunktet leke seg med disse fire demoer.
Og Leader er første av disse demoene.
Etter seminaret, oppfordrer jeg dere alle å bare utforske de andre demoer
fordi jeg synes de er skikkelig kult, og de viser deg kraften av Meteor.
>> Så hva dette er, er dette vert på Leaderboard.
Dette er bare ærlig en liste med navn.
Og du kan velge folk.
De blir gule.
Og så kan du gi dem fem poeng.
Og du vil legge merke til at listen er sorterte fordi som jeg gi meg selv mer
og flere poeng, er jeg nå på toppen.
Så dette er hvor vi skal begynne.
>> Og hva vil du være i stand til å ta bort fra dette seminaret er noen flere
funksjonene jeg har lagt til i Leaderboard.
Vi skal dekke hvordan, samt legge til fem poeng til en spiller, kan vi
slette spillere, kan vi legge til nye spillere, og vi kan velge hvordan vi vil ha
å sortere dem.
Og disse er alle svært enkle API-kall at Meteor gir for deg.
Du har også en funksjon her å random resultatet.
>> Så hva er egentlig kult om dette er dere faktisk kan
alle gå til nettstedet.
Jeg skal sette den i større tekst her.
En radikal-bly erboard.meteor.com.
Og når dere går på kurset, du bør være i stand til å redigere nettstedet, og
alle endringene vil være synlig til alle andre.
Så du kan - er dere alt i stand til å koble til området?
Så leke seg med den.
Gå og begynne å slette noen navn.
Se hva som skjer.
>> Så du ser alle kan spille.
Dette er bare den standard sikkerhets modus for Meteor.
Du ser at alle kan endre hverandres data.
Ikke bekymre deg.
Meteor har sikkerhet.
Dette er et meget enkelt implementeres funksjonen, der du kan sette opp brukere
og innlogginger.
Men akkurat nå, noen som besøker den området kan gi seg så mange
peker som de ønsker.
Så jeg alltid som dette, fordi dette er en morsom måte å komme i gang.
Og så får vi bare snakke om detaljene, hvordan
Meteor gjør dette mulig.
>> Så jeg kommer til å dekke hva Meteor er, og så får vi bare trenger å dekke
to forutsetninger som CS50 har ikke dekket nok.
Men ved slutten av semesteret, bør du være komfortabel med både HTML og
Javascript for å virkelig få hendene skitne arbeider med Meteor.
Og jeg tror det er bare en fin måte for enda mindre komfortabel studenter å gjøre
siste prosjekter fordi de kan virkelig bo i ett språk, og de kommer til
se endringene av deres jobbe med en gang.
>> Så dette lysbildet viser bare noen av de store teknologier som Meteor JS
gir til deg.
Meteor er ikke en ny teknologi på egen hånd.
Det er egentlig et konglomerat av alle disse forskjellige tingene
vi har på internett.
I tillegg til HTML, CSS, Javascript, vi har noen teknologier som Node.js,
som er det som gjør at du kan kjøre Java på baksiden slutten på
server, samt noen Java biblioteker, som jQuery, strek.
>> Alle disse vil være kjent for du ved slutten av semesteret.
Og vi kommer også til å bruke en database som heter mongoDB, som er en virkelig
populær database nå for disse nye oppstarter.
Du kan tenke på det som som MySQL, men det fungerer veldig fint med Javascript.
Og det er noen andre teknologier her og mange flere jeg har ikke oppført
at alle grensesnitt virkelig pent med Meteor.
>> Jeg må sette dette lysbildet fordi noen ganger får jeg forvirring om dette.
Meteor er bare Javascript.
Det er ikke PHP.
Det er ikke Ruby on Rails.
Så hvis du skriver kode, hvis du ønsker å skrive en Meteor prosjekt, du virkelig
kan ikke bruke Ruby-kode.
Du egentlig ikke bruke PHP.
>> Mens vi vil se at forskjellene i kode og syntaks kan ikke være at
annerledes, jeg ønsker å understreke for deg at Meteor, er alt du kode
bare i Javascript.
Og alt som du viser til vil brukeren være HTML CSS.
Men du faktisk ikke bruker noen av de andre språk som andre
seminarer kan dekke.
Hva Meteor er også er en webserver.
Så selv om du ikke har noen Javascript, og du bare ønsker å tjene
CSS og HTML-filer, Meteor kan gjøre det for deg.
>> Og her er linken igjen til demo at jeg fikk dere
begynte å spille med.
Men la oss gå videre til HTML.
Hvor mange mennesker her har ingen anelse om hva HTML er?
OK flott.
Og det er helt greit.
Du trenger ikke å vite mye om det fordi vi vil gå over
bruk veldig enkelt.
>> Dette er hva den enkle HTML-siden ser ut.
Dette kan være som din hallo, verden for HTML, mens vi startet i C med
hallo, verden.
Jeg ønsker ikke å understreke på detaljer om hva HTML, hva hodet, hva
kroppen, hva tittelen gjør det.
Jeg vil bare understreke strukturen, hvordan du har koder.
Og det er de vinkelparenteser.
Og det er der du har dine beskrivelser.
>> Så du kan ha i HTML-dokumentet.
Og da vil du lukker HTML-dokument med backslash samme.
Og du har forskjellige typer koder.
Og legg merke til at de er alle matchet.
Du vil ha som en body-koden og deretter en tett kropp tag.
Og inne i body-koden, vil det være innholdet på websiden din.
Så denne nettsiden ville bare vise i en hvit bakgrunn og svart tekst
hallo, verden.
Betyr det fornuftig?
OK.
>> Nå kommer jeg til å raskt dekke Javascript.
I ordene til en tidligere TF, "Java er den beste programmerings
språket som finnes i dag.
Andre mennesker vil prøve å fortelle deg noe annet.
De er galt. "Javascript er ganske fin, og jeg skal vise deg hvorfor.
>> Så dette er det klassiske eksempelet vi starter med i C. Vi har hallo, verden.
Og du legger merke til at selv om du krympe det, må du ha minst to
linjer med kode her.
Jeg har flere linjer med kode.
Dette kan gjøres veldig enkelt.
En linje i Java med console.log, og deretter din streng,
hallo, verden.
>> Nå, selv om vi flytter til en ny språket Javascript, nesten alle av de
ferdighetene du har lært ved koding i C er direkte bærbare.
Så strenger, tanken på strenger i anførselstegn, er det det samme.
Den semikolon, det er det samme.
>> En fin funksjon om Java faktisk er at du
trenger ikke semikolon.
Det kan gjette at du bør sette et semikolon der.
Men når det er sagt, bør du alltid prøve å sette semikolon der.
Det er ansett som god stil.
Og også, det er ingen hovedfunksjon.
Du bare begynne på toppen av filen og lese ting linje for linje.
>> Så dette er det som trengs for å gjøre at hallo, verden program.
Og så merker at du må gjør hei og deretter kjøre hallo.
Med Javascript, er det ansett et tolket språk.
Hva du trenger å vite er at det er ingen gjør.
>> Det er ikke kompilere.
Du bare kjøre node.
Og husk node er programmet som vil kjøre Javascript på en konsoll,
på en svart boks, ikke nettsiden.
Så du bare gi den filen, og det er kommer til å skrive ut hallo, verden.
>> Jeg skal faktisk gjøre en liten demo av at for dere her.
Så la oss gå over til min Node.js terminal.
OK.
La oss flytte hit.
Så jeg kommer til å starte node.
Og jeg skal vise dere i bare et sekund hvordan du får det
installert, hvis du ikke gjør det.
La meg gjøre det litt større.
OK.
Jeg håper dere kan se.
>> Så jeg kan skrive kode som jeg gjorde før i console.log.
Hei, Roger.
Og merker jeg trenger ikke å gjøre det semikolon, men da får jeg denne rare
udefinert ting.
Vel faktisk, never mind om det udefinerte ting.
Ting jeg vil du skal legge merke til er at du trenger ikke den viktigste funksjonen her
å begynne å kjøre kode.
Og det er ingen backslash end.
Det er noen små funksjoner som Javascript kan gjøre for deg.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Oh yeah.
Jeg er lei for det.
Og at pilen betyr bare node er klar for en ny kommando.
Så du kan ha det gjøre enkle matematikk, som en pluss en.
Og akkurat som i C, disse matte Symbolene er akkurat den samme.
Jeg kan gjøre console.log av et nummer.
Og da det skrives to.
Javascript er fint i den forstand fordi selv om to er en int,
som i C, hvis du gjorde printf med to, vil du få en feilmelding.
>> Men Java vet, oh, du er utskrift noe.
Jeg kommer til å trenge en streng.
Så la meg konvertere at to inn i en streng for deg.
Og du kan også gjøre noen rare ting som hi og deretter pluss to.
Dette er bare enda et eksempel hvor to kan konverteres i der også.
>> Så med det ute av veien, la oss bare dekke litt mer Script.
Så i C, har vi typer.
Når vi opprettet en ny variabel, vi må si at det er char * eller
streng i tilfelle CS50.
Eller hvis vi hadde et desimaltall, vi hadde å si float.
Hvis vi trengte en boolsk, vi hadde å si b.
Og så når vi hadde noe som ble b, det måtte bli en bool.
Vi kunne ikke magisk endre det til en int med mindre vi skrev i
parentes, int b.
>> I Javascript, er det ingen typer.
Du bare tenke på det som var.
Og VAR er hvordan du oppretter en ny type.
Så det kan ha Div. s å være en streng, Var n være en float,
og VAR b å være sant.
Og en ting som du ikke kan gjøre i C er Jeg kan nå si, etter at linjen, b
tilsvarer et heltall.
Og det fungerer helt fint.
Mens det i C, vil det si at din heltall er ikke en bool.
Jeg kan ikke gjøre det for deg.
Eller [uhørbart] ville kaste en feil.
>> Og jeg kan raskt gå tilbake til node og viser noe av den funksjonaliteten.
Så jeg kan ha en VAR en.
Kall det "Apple". Så nå når jeg skriver ut et, Jeg får min streng, "Apple". Men jeg kan
også nå si en lik tre.
Og legg merke til er det ingen feil.
Og en lik nå tre.
Eventuelle spørsmål så langt?
Ja.
>> PUBLIKUM: Vent, så console.log er i utgangspunktet printf, ikke sant?
>> ROGER ZURAWICKI: console.log er din printf.
>> PUBLIKUM: Høyre.
Så hvordan kommer hvis du bare inn i åtte eller [uhørbart], hva gjør at
[Uhørbart]?
>> ROGER ZURAWICKI: Høyre.
Så det er -
ting i grønt blir trykt på konsollen.
Og hva vi får se neste er når vi flytter til nettet
side, vil vi ikke gjøre -
Javascript vil være å ha en HTML mal, som jeg skal dekke i
Meteor del av seminaret.
Og det er der du kan si, gi meg verdien av a, og den vil sette en i
ditt nettsted.
Fordi hver nettleser faktisk har en liten konsoll.
Og hvis du så veldig nøye, du ville få litt informasjon, som din
printf å dukke opp der med hver webside du laste.
>> PUBLIKUM: Hvordan fikk du til skallet skjermen?
>> ROGER ZURAWICKI: Så det er en kommando kalt node, og den kommer med Meteor.
Så jeg vil bare avslutte ut av det.
Node er programmet som kjører Javascript.
Hvis du går til meteor.com, du kan installere Meteor, og
Meteor kommer med node.
Fordi Meteor er bare en samling av alle disse programvarepakker.
Når vi får til vårt eksempel, vil jeg gå alle gjennom å installere
Meteor, og deretter kan du spille med node selv.
OK, flott.
>> Så en annen flott funksjon om å jobbe med Javascript er løkker er de samme.
Ganske mye akkurat det samme.
For løkker, mens sløyfer, gjør mens loops, dersom annet.
Det er det samme med bukseseler.
Det er det samme syntaks.
I tilfelle av en for løkke, den lille detaljer som du må ta hensyn
å er stedet for int i lik 0, vi har å si Var jeg er lik 0.
Men det er på grunn av de variablene typer som vi snakket om før.
>> Legg merke til at printf blir en logg, en console.log.
Og vi trenger ikke å gjøre det prosent p backslash n og deretter passere i jeg.
Du kan bare si jeg.
Og det ville skrive tallene fra null til fire.
Hvis dere ønsker å prøve dette, fordi du tok opp et godt poeng.
Hvis du ønsket å kjøre denne koden på din egen nettleser, vil jeg anbefale at
alle åpner Google Chrome.
Google Chrome eller en hvilken som helst nettleser virkelig, men jeg liker Google Chrome
fordi det er svært standardisert.
>> Du kan gå til, tror jeg, hvis du høyre Klikk på hvilken som helst nettside, bare i
tomrom, vil du se et alternativ kalt Inspiser Element.
Det er vanligvis den siste.
Og når du klikker på det, bør du få en ting til bunnen vises her.
La meg zoome inn her.
Og vi har noen faner her.
Den du bryr deg om er konsollen.
>> Og dette er en Javascript-konsoll at du nå kan jobbe med.
Flott.
Så jeg kan skrive inn de samme tingene Jeg var å skrive før i node.
En pluss en er to.
Var en lik "Apple".
Og så vil jeg skrive ut en, og a er "Apple".
Så i hvilken som helst nettleser, Firefox, Chrome, Safari, uansett hva du bruker, som
lenge du har tilgang til en Java konsollen, samme type
kode jeg kjørte i node deg kan kjøre på din egen konsoll.
>> PUBLIKUM: [uhørbart]?
>> ROGER ZURAWICKI: Hvordan komme til konsollen?
Du må høyreklikke på tom plass på siden, og deretter gå til
Inspiser Element.
Så egentlig, jeg liker dere å bare sørg for at du kan
Inspiser Element i Chrome.
Og se når du skriver i noen kode inn i konsollen
at det går ordentlig.
Føl deg fri til å stille spørsmål om noe er ikke klart her.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Enhver type, ikke sant.
Det er bare én type for alle variabler i Javascript.
Og når du har å erklære en variabel, sier du var.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Yeah.
Det gjør det, men i Javascript, er det svært smart om tildeling av minne.
Det er ingen malloc.
Det er ikke noe fritt.
Så du trenger ikke å bekymre deg for det.
Det er en annen fin funksjon som Javascript gir deg.
>> Så jeg har lyst til å gå videre.
Ville det være OK?
OK.
Flott.
>> PUBLIKUM: Jeg bare har problemer finne [? Inspiser Element. ?]
>> ROGER ZURAWICKI: Så Safari utseende litt annerledes, men du
har Chrome eller Firefox?
De er jo lettere de å jobbe med.
Og for prosjektene dine, anbefaler jeg stikker med en nettleser fordi
du får en masse bugs nesten fordi alle nettlesere behandler
Java HTML litt annerledes.
Så jeg tror at livet ditt vil bli mye lettere hvis du holder deg til Chrome fordi
det er tilgjengelig på alle maskiner.
Og det er en ganske populær nettleser.
OK?
>> Så neste tema som vi burde dekke i Javascript -
Jeg beklager om formateringen her.
Jeg måtte strekke lysbildene å matche widescreen projektor.
Men jeg vil nå gjerne snakke om hvordan du gjør fungerer.
I C, må vi erklære hver funksjon.
Som int legge til, og det tar en int inn x, og en int y, og så legger vi dem
og returnere det.
>> I Javascript, funksjoner er faktisk en annen variabel type.
Så vi bare si Var legge til, og det tilsvarer en funksjon.
En funksjon som tar en x-og en y.
Og hva gjør denne funksjonen gjør?
Den returnerer x pluss y i nøyaktig samme syntaks som i C. Og du legge merke til at i
Javascript, vil du ikke bli fortalt hva funksjonen returnerer fordi siden
variablene ikke har typer uansett, det det er egentlig ikke produktivt, antar jeg,
skal spesifisere alle typer i din fungerer.
Og så når du kaller en funksjon, er det nøyaktig samme syntaks som C. Du
bare passere i dine to argumenter.
Jeg vil gjerne prøve dette i mitt node.
Kan jeg endre lysbildet?
>> PUBLIKUM: [uhørbart].
Vil vi få en kopi av lysbildene?
>> ROGER ZURAWICKI: Ja.
Så la oss gå tilbake til node.
OK.
Så jeg vil si Var add lik funksjon.
Tar en x, tar en y.
Og så den vet at uttalelsen er ikke fullført.
Så i node eller i konsollen, du vil legge merke til dot dot dot.
Så du kan fortsette å skrive koden din.
Og nå vil jeg si avkastning x pluss y.
Og så lukker spenne.
Og det øyeblikket jeg lukker seler, det ser at setningen er ferdig.
>> Og nå kan jeg si legge en og to.
Og jeg skal få tre ut.
Legg merke til at hvis jeg bare gjorde legge til, det forteller meg at det er en funksjon.
Og en ting bare for å ta hensyn til er hvis du gir det feil antall
argumenter, vil det gjøre.
Det vil kjøre, men du kan få noen virkelig rare resultater.
Nesten som en søppel verdi, du kan tenke på det.
Så kan du gå videre og prøve dette i nettlesere.
>> OK, så av hensyn til tid, vil jeg nå gå videre til neste funksjonene i
Javascript.
Så vi har snakket om funksjoner.
Vi har snakket om løkker, hvis uttalelser også.
Syntaksen er den samme som C og variabler.
Og nå vil jeg snakke om arrays.
Jeg beklager at lysbildene fikk litt avskåret.
Men faktisk, i den første delen, alt du trenger vil fungere.
>> Så vi har en annen type for variabler kalt arrays.
Og vi bruker hakeparenteser å betegne dem.
Så i det første eksemplet, Var arr, tom array.
Dette er den tom liste, slik at en matrise som ikke inneholder noen elementer.
Og du kan også ha en rekke med tre strenger.
I C, hvert element i matrisen måtte være av samme type.
>> Men fordi i Javascript det bare én type, arrays kan faktisk
har forskjellige typer av verdier.
Som her, har vi en rekke med en flottør, en bool, og en int.
Måten du får en lengde på en matrise, du trenger faktisk ikke å bruke størrelsen på
eller noe.
Du bare sier array og da dot lengde.
Og denne punktlengde, kan du tenke på den slags liker en struct, hvor hver
tabellen har et felt, en ekstra variabel innsiden av det som kalles lengde, som
holder rede på hvor lenge din matrise er.
>> Så jeg bare raskt kommer til å gå inn i node og vise dere det samme.
Så jeg kan ha en matrise.
Det kan være en tom liste.
Og det vil skrive meg tilbake en tom liste.
Flott.
Jeg kan nå si at matrisen har en, og 2.3, og sant.
Så alle forskjellige typer.
Og du merker det fungerer helt fint.
Matrisen jeg komme tilbake støtte alle verdiene jeg ga det.
>> Hvis jeg ønsket å få det første elementet av matrisen, er syntaksen faktisk
det samme som i C. Du kan si matrise null.
Og du får en.
Jeg kan si det samme for matrisen to, og jeg får sann.
Hvis jeg gjør noe utenfor matrisen, Javascript er en trygg språk
fordi jeg ikke vil få et segment feil.
Jeg får udefinert.
>> Og dette udefinert, kan du snill av tenker på det som null.
Men det kan være veldig irriterende når du kode fordi du må sjekke at
nesten alt du gjør, du arbeide med er udefinert.
Og vi vil se noen eksempler på dette når vi jobber i Meteor.
>> Selv matrise fire er udefinert, Jeg kan tilordne den en verdi.
Så jeg vil si at det er lik én.
Og så hvis jeg går til array, jeg har den ekstra verdi der.
Og legg merke til at matrisen tre, som også ble udefinert, forblir udefinert.
Så jeg har nå en rekke med et hull i midten.
Men hvis jeg trykte rekke fire, Jeg ville få en.
Hvis jeg gjorde rekke tre, får jeg udefinert.
>> Så fin funksjon at Java gjør at du kan gjøre er at listene kan
endre størrelse.
Arrays, matriser blir lister, de endrer størrelse.
Og du kan angi hvilket som helst sted på innsiden av dem.
Og alle hullene vil bli fylt med disse udefinerte verdier.
>> Så vi har snakket om arrays.
Nå, det siste jeg ønsker å dekke i Javascript, og dette er veldig viktig
å forstå koden som Jeg kommer til å vise deg,
kommer til å være objekter.
Og objekter er et begrep i -
I utgangspunktet er de til stede i mange programmeringsspråk.
Og hver programmeringsspråk liker å tenker på dem litt annerledes.
>> Men jeg tror for Meteor, en god analogi er C struct.
I C, hvis vi ønsker å finne den struct student, ville vi ha å spesifisere alle
ting inne i den.
Så det må ha et navn.
Det må ha et år.
Det må ha et kjønn.
Men vi må også gi den typer av alle disse tingene.
>> Og nå som vi har denne formen for struct kalt student, kan vi ha en
ny struct, og så kan vi manuelt si hva hvert av feltene er.
Og det er der vi bruker dot navn, dot år, prikk kjønn.
Og da har vi bare, i siste linje av kode her, jeg bare skrive ut
navnet på struct student.
>> I Java verden, det er noe slikt som struct student.
Du trenger ikke generere en forhåndsinnstilt struktur.
Du faktisk bare, i disse beslagene, du si hva alt er.
Og det er denne rare notasjon med kolon og deretter komma, men du vil
bli vant til det snart nok.
>> Og det er faktisk en veldig enkel, fleksibel måte bare
manipulere gjenstander.
Du merker at hvis jeg vil nå få navn fra s, jeg bare gjør s.name.
Er det noen spørsmål om dette?
Dette har vanligvis vært en veldig forvirrende tema når vi introdusere folk til
Javascript.
Jeg skal gjøre noen eksempler på dette i node.
Ja?
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Så gjør du har et eksempel, multippel
variabler av denne typen.
>> PUBLIKUM: [uhørbart].
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: OK.
Så jeg antar den måten du ville gå om er du ville sette gjenstander i en matrise,
og nå vil du ha en utvalg av objekter.
Besvarer det spørsmålet ditt?
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Ja.
S er et objekt.
Så vi kan gå inn i node og bare leke seg litt.
>> PUBLIKUM: [uhørbart]?
>> ROGER ZURAWICKI: Oh, OK.
Så hvis du spør hva klasser er, klasser blir behandlet svært ulikt,
og de har en veldig merkelig ordning kalt prototyping, som du ikke
trenger å vite om.
Det er ingen fast måte å gjøre det.
Så hvis du ønsker å generere flere, du ville bare slags har en funksjon
eller noe.
Du generere din egen funksjon.
Og du vil returnere et objekt.
Det ville være den enkleste måten å gjøre det.
Betyr det fornuftig?
OK.
Flott.
Så når vi har en forståelse av Java gjenstander, de er -
oh, ja.
>> PUBLIKUM: [uhørbart]
eksempel, hva er forskjellen mellom "Roger" i anførselstegn versus
[Uhørbart] med apostrof.
>> ROGER ZURAWICKI: OK.
Så dette er i C, har vi det enkelt sitater som representerer tegn, og dobbel
sitater som representerer strenger.
Java faktisk kaster dette bort fordi du kan ha strenger med
enkle eller doble anførselstegn, og det er ikke noe slikt som en eneste røye.
Men hvis du bare kopierte det samme C-kode, Java ville
behandle det helt fint.
Det er derfor jeg behandlet det som -
det er derfor jeg kan bokstavelig talt port koden i den forstand.
>> Og jeg ønsker å vise deg et eksempel av en mer komplisert gjenstand.
Så du kan legge merke til at ett objekt kan ha strenger som verdier.
Det kan ha en annen liste over verdier.
Det kunne ha en liste over objekter som verdier.
Det er egentlig ingen grenser for dette.
Så her er det bare en god demonstrasjon av hvordan du kan få en mye
ulike typer skjer alt i ett objekt.
Betyr dette fornuftig?
>> Nå kan du også ha matriser av objekter.
Og her er ganske lik det du spurte, hvis du kan ha objekter av
av samme type.
Men problemet er, er det ingen fast format for objekter i Javascript.
Så du må oppgi dem selv.
Og du må være sikker at de er uniform.
Så her, når jeg oppretter et objekt, har jeg å sørge for at hver og en har en
navn, og hver og en har et hus.
>> Og så har jeg en rekke av dem, og som kan være min hytte.
Og så her kan du slags se for loop skjer.
For loop blir bare en veldig vanlig måte å krysse over en rekke
i Javascript.
Legg merke til at dette mønsteret er svært lik til C-ekvivalent, hvor du
har int i lik null. jeg er mindre enn lengden.
Og da jeg pluss pluss.
>> Det er nesten den samme koden, bortsett fra noen få detaljer.
Så forstår alle hva et objekt er?
Bare tenk på det som en C struct.
Og måten du får tilgang feltene er bare med prikken.
Og så lenge du husker hvordan du bruke prikk, vil du bli bra.
>> OK, så nå kan alle lese den linken?
Dette er en link til prosjektet.
Er noen har problemer se link?
OK, la oss endre det da.
Det er ikke -
Ja, det er nok det enkleste måten å gjøre det.
Flott.
>> Så hvis du går til dette stedet, det bør være noen instruksjoner som jeg vil
gå over på hvordan vi kan installere Meteor og få vår prøve prosjekt i gang.
Jeg ønsker å sikre at alle har koblingen ned før jeg flytter.
Kan jeg gå videre?
OK, flott.
>> Så her er jeg på nettsiden.
Du vil legge merke til i readme-fil, vi har noen instruksjoner om hvordan
å få th satt opp.
Du må enten være i CS50 apparatet eller bare på en Mac.
Windows vil ikke fungere.
Men i utgangspunktet noe som ikke er Windows skal arbeide med disse
instruksjoner helt fint.
Men jeg kan gjøre det litt større også.
>> Så du vil kjøre den første to kommandoene.
Disse gutta vil bare installere Meteor.
Jeg kan gå inn i min terminal.
Og hvis jeg kjører det samme nå, Jeg har gjort det allerede.
Så det er litt kortere.
Det kan ta litt lengre tid for dere.
Men jeg vil først være sikker at vi har Meteor kjører.
Etter Meteor har installert, bør du kunne få node i konsollen.
>> PUBLIKUM: De spør for et passord.
>> ROGER ZURAWICKI: Det ville være din bruker passord, hvis du er på en Mac.
Den trenger bare tillatelse til endre enkelte systemfiler.
Så spørsmålet var, hvis den spør deg for et passord, er det bare å spørre deg
for ditt brukernavn passord når du logger inn på din Mac.
Og dette er, slik at du kan endre systemfiler.
>> Og når du er klar, kan du gå videre til det neste trinn, vil der kopier
eksempelkode jeg har fra nettsiden.
Og du vil få en ny katalog i din hjemmekatalog som heter leaderboard, og
vi kan begynne å jobbe derfra.
Så jeg bare å kopiere og lime inn disse kommandoer inn i min terminal.
Og for meg, jeg har allerede klonet det.
Så jeg kan bare nå flytte inn leaderboard.
Og jeg skal ha noen filer i det.
Eventuelle spørsmål?
>> PUBLIKUM: [uhørbart] ikke fungerer.
>> ROGER ZURAWICKI: Oh, kanskje du trenger git installert i tillegg.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Sorry?
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Oh, OK.
OK.
Det er fordi du kanskje trenger å være logget på GitHub å få denne koblingen.
Hvis dere kan se det, det enkleste måten å gjøre det jeg ville da si er
laste ned zip.
Og dette vil bare laste ned alle filene.
Og så når du setter den i din laste ned eller ditt hjemmeområde -
Jeg anbefaler å sette den i hjemmekatalog, slik at vi kan alle
kjøre de samme kommandoene.
Så lenge vi har filene, vil vi være i stand til å begynne å jobbe med dem.
La meg vite om folk har problemer med å laste ned filene.
>> PUBLIKUM: Ved hjemmekatalog, du mener -
>> ROGER ZURAWICKI: Så hjemme ville være John Harvard, hvis du er i
den CS50 apparatet.
For å komme til din hjemmekatalog, bare inn i C.
>> PUBLIKUM: [uhørbart]
CS50 apparatet [uhørbart].
>> ROGER ZURAWICKI: Ja.
Du ønsker å kjøre kommandoene i terminalen.
>> PUBLIKUM: [uhørbart].
Jeg fikk en feilmelding som sier nei slik fil eller katalog.
>> ROGER ZURAWICKI: Vi kan ta en rask bryte og bare sørge for at
alle har Meteor installert, og jeg vil bare gå prøve å hjelpe folk ut.
Vennligst prøv å hjelpe hverandre hvis du kjører inn i problemer.
Sorry, ja.
Er du både i apparatet?
>> PUBLIKUM: Yeah.
Jeg har RISA
>> ROGER ZURAWICKI: OK.
Hvis du går tilbake til nettstedet, gå bla opp til toppen.
Og det er denne HTTPS.
>> PUBLIKUM: Kopier dette?
>> ROGER ZURAWICKI: Yeah.
Og så du vil skriver i git klone.
Så hvis du trykker Kontroll A -
>> PUBLIKUM: Her?
Og gjør [uhørbart]?
>> ROGER ZURAWICKI: G-I-T.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Git og deretter klone.
Så det er veldig lik den kommandoen du hadde ovenfor, men nettadressen endret.
Så før det var dette, nå er det dette.
La meg oppdatere -
ja.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Dette er lastet ned.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Åh, så det ikke klone riktig.
Jeg vil fikse det.
Det er en feil med å prøve for å laste ned filene.
La meg oppdatere kommandoen for dere så jeg kan sørge for at det vil fungere.
Jeg er lei for det.
Det bør være den samme for Mac eller CS50 apparatet.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Jeg har oppdatert Kommandoen for nummer to, hvis
du oppdaterer siden.
Og med dette, URL, bør du være i stand til å laste ned filene.
>> PUBLIKUM: Så hvis vi er fortsatt nedlasting [uhørbart].
>> ROGER ZURAWICKI: Hvis du er fortsatt laster ned Meteor?
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Ja, hvis du vil ha å utvikle på din Mac.
Men du trenger Xcode developer verktøy som er installert.
Jeg har testet disse kommandoene på CS50 apparatet, slik at jeg kan garantere
at det vil fungere.
Ja. la meg gå og hjelpe deg.
>> PUBLIKUM: [uhørbart].
Jeg gir mitt passord.
Dette er Mac.
Og så gjør jeg [uhørbart].
>> ROGER ZURAWICKI: OK.
Jeg ville prøve å kjøre alle kommandoene utelukkende i CS50 apparatet terminal.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Jeg ville få det fungerer først på terminalen, på
CS50 apparatet, og deretter Mac-terminalen.
>> PUBLIKUM: Så hvis du gjør det på CS50 apparatet sånn, [uhørbart].
>> ROGER ZURAWICKI: Jeg ønsker å flytte på, men hvis folk fortsatt har
problemer med å sette opp Meteor, er Kevin mer enn gjerne hjelpe dere ut,
Kevin i grå skjorte.
Det vi skal ha er vi kommer til å kjøre den siste kommandoen, nummer tre, i
vår terminal.
Når vi gjør det, vil vi kjøre Meteor.
>> Og du bør -
oh, jeg har allerede Meteor kjører.
Så det kommer ikke til å la - la meg bare lukke min andre Meteor.
Når jeg kjører Meteor, du skal nå se at -
du bør se gjeldende katalog at det er servering.
Og nå kommer det til å si serveren kjører på http://localhost.
Det er nettadressen du ønsker å sette i i nettleseren.
>> Og på denne nettadressen, bør du være i stand til tilgang til en fin liten leaderboard.
Så merker at dette er på localhost, noe som betyr at hvis du gjør noe
endringer, kommer du ikke til å se hverandres endringer.
Mens på nettsiden jeg viste deg i begynnelsen, kunne vi får
alles endringer fordi alle var tilgang til den samme nettsiden.
>> Så la meg bare gå til [? ord?]
3000.
Så du bør være i stand til å bare bekrefte at funksjonaliteten fungerer.
Du kan velge forskjellige mennesker, og du kan gi dem forskjellige punkter.
Så jeg gi noen poeng.
Du kan også se at de stiger i rang.
>> Nå, i interesse av tid, det er tre egenskaper som jeg har
implementert.
Og vi kommer til å iverksette sletting brukere som vår første spillefilm.
Men før vi går videre, er det noen spørsmål?
Du hadde hånden din opp.
Ja?
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Kan du sjekke at Meteor er installert?
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Lokal vert 3000?
Og du er i CS50 apparatet?
Jeg kan gjøre -
du trenger ikke å være på en Mac.
Dette vil fungere i apparatet.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: I den normale nettleser, ja.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Er Meteor kjører?
Så OK, det er en forskjell her.
Hvis du kjører den i apparatet, må du gjøre
localhost innenfor apparatet.
Hvis du kjører den i din Mac, som jeg er, så jeg kan gjøre
min Mac Google Chrome.
Men hvis du bruker CS50 apparatet, du må gjøre alt
i apparatet.
Så du må bruke Google Chrome i apparatet.
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Det er fortsatt ikke fungerer?
>> PUBLIKUM: [uhørbart].
>> ROGER ZURAWICKI: Så bare for å gjenta, hvordan får du tilgang til nettstedet nå.
Du har en URL her på localhost 3000.
Hvis du er i CS50 apparatet, du må åpne CS50
apparatets Google Chrome.
Og i at Google Chrome innenfor apparatet, kan du skrive inn denne nettadressen,
og du skal se en leaderboard.
Så jeg kommer til å bare sette den av til siden her litt.
Og nå skal jeg åpne min tekstredigeringsprogram over her.
Så la meg bare være sikker på at koden er i orden.
OK.
Flott.
>> Jeg vil gjerne nå gå gjennom koden litt.
Og den første filen jeg har lyst til å starte med IS leaderboard.html.
Du vil kunne få denne koden etter seminaret, så jeg vil bare vise
du på datamaskinen min hva som skjer.
Så jeg håper alle kan se dette.
Så helt i begynnelsen av filen, vi har vår hodet og tittelen, som
er i likhet med hva vi så i alle HTML-dokumentet.
Og så skal vi ha body-koden her.
>> Hva jeg har valgt er den viktigste kroppen, i utgangspunktet hva som er
kommer til å bli vist.
Men det er noen nye ikke-HTML ting, og det er i
doble vinkelparenteser.
Og disse er malkodene.
Så du får se her denne braketten brakett ny leaderboard.
Og dette er slags - tenk på det som å kalle en funksjon for HTML.
>> Dette er en spesiell versjon av HTML.
Det er den versjonen som Meteor bruker, som er grunnen til at du kan vise forskjellig
ting, som for eksempel ledertavlen navn og knapper.
Men leaderboard forteller deg å gå til mal med navnet leaderboard.
Så mal ikke blir vist av seg selv, men det er en funksjon, så det
vil bli kalt.
Og du vil erstatte i alt dette kode her i leaderboard.
>> Den interessante delen av leaderboard her er bare denne tabellen.
Hvis du nettopp har lest det, les denne koden høyt, bør det være intuitive
fordi leaderboard, alt vi har her er en tabell.
Denne ID klassen ting du ikke trenger å bekymre seg for.
Bare vet at det er en tabell header.
Det er dette THEAD.
>> Og den finner et navn og en poengsum.
Alle disse kodene, som thtable, THEAD, du må bare lære etterhvert.
Det er ikke viktig at du huske disse fordi du kan bare få tilgang til alle
referere online.
Eller ved slutten av semesteret, disse vil bare være godt kjent med deg.
>> Etter overskriften av tabellen, del som jeg ønsker å trekke din
hensyn til, er dette h tag.
Fordi det er i dobbel parentes, det er en mal.
For at en anordning for hver av spillerne, hva spillerne er, må vi
vise det.
Og vi går til spilleren mal.
>> Hvis vi blar ned litt mer -
Jeg håper alle kan se det.
Vi har spilleren mal.
Og denne malen i utgangspunktet definerer en tabellcelle, der du satt i navnet
her og score.
Zoome ut nå, kan vi se at denne mengde koder -
og det var vår spiller der nede -
definerer en av disse cellene.
Hver ting som jeg klikker blir gul.
>> En enkel måte jeg kunne endre det nå.
Sørg Meteor er fortsatt kjører.
Meteor bør være en serverprosess, slik at du bare la det
kjører når du utviklet.
La oss si at jeg ønsket å endre alle navnene eller stillingen.
Og jeg vil si jeg kommer å legge til punkter her.
Så endringen jeg gjorde her var, i stedet for bare å score, jeg
legge poengsum plasspoeng.
>> Jeg kommer til å zoome ut, og jeg er kommer til å spare min fil.
Og etter at jeg lagrer filen min, jeg trenger å sørge for Meteor kjører.
Beklager.
Jeg ønsker å vise deg edits ble utført i sann tid.
Så jeg vil bare endre litt tekst.
Klikk på en spiller.
Jeg setter det i store bokstaver.
Og det bør være at hvis dette fungerer riktig, når jeg lagrer det, det
ville oppdatere.
>> Oh, tror jeg akkurat nå er problemet Jeg er ikke i riktig katalog.
OK.
Jeg er lei for det.
Så her, hva du legger merke til er min endring gikk gjennom.
Nå sier jeg ønsker å gå tilbake endringen.
Jeg ønsker å gå tilbake til det jeg hadde.
Jeg kommer bare til å skrive det som normalt.
Klikk på en spiller.
>> I det øyeblikket jeg lagre det, nettstedet oppdateres for meg.
Og jeg ser min endring på området umiddelbart.
Dette er en veldig nyttig funksjon i debugging fordi nå
Jeg trenger ikke å -
når vi skriver C-kode, ikke bare gjorde vi nødt til å lagre filen, men vi måtte
gjøre det, og deretter kjøre den på nytt.
Meteor er veldig fint fordi i motsetning til C, det øyeblikket du lagrer HTML eller
Javascript-fil, endringen dukker opp umiddelbart.
>> Et spørsmål er, i disse malene, hvordan får jeg verdiene som spillerne
eller velg et navn?
Hvis jeg zoomer inn her inn min kode, Jeg ser dette for hver spiller.
Så malen vet at Jeg har spillerne en eller annen måte.
Og det vet at det er en valgt navn.
Hvor kommer dette fra?
Som kommer fra Javascript.
>> Og hvis du går til leaderboard.js, dette fil, nå når jeg går her, har vi en
noen kommandoer definert.
Dette er spesielt Meteor syntaks.
Legg merke til at du ikke trenger vars eller noe.
Men disse er bare structs på structs upon structs eller disse stedene.
Og alt jeg definerer er malen heter leaderboard.
>> Leader bør få en tingen kalt spillere.
Og hva er spillere?
Det er hva dette uttrykket returnerer.
Og hva er valgte navnet?
Det er litt mer kode.
Detaljene i koden vi vil dekke litt senere.
Men akkurat nå vil jeg at du skal forstå at i denne koden, tar vi
spillere, og vi gir det en verdi.
I dette tilfellet er det en funksjon som blir henrettet.
Så vi kan få verdien tilbake når vi kjører funksjonen.
Dette er en logg.
Betyr det fornuftig?
>> Jeg kan endre måten den er sortert.
Her, det er en slags objekt.
Og hva dette sier er at jeg kommer til å sortere etter poengsum synkende først og
deretter i stigende rekkefølge.
Hvis jeg endrer dette til ett, det kommer å sortere poengsum stigende.
Så null bør være på toppen.
Og når jeg zoomer inn hjemmesiden min, vi nå se at nettsiden oppdatert.
Og stillingen er bestige.
>> Den neste funksjonen jeg vil bare ha å dekke er klikk tilvekst.
Ut av interesse for tiden, vil jeg ikke være i stand til å dekke mer av Meteor
kode, men det er nok av ressurser tilgjengelig, og jeg vil være
her etter seminaret.
Men jeg vil bare dekke leaderboard hendelser.
Denne syntaksen du vil lære en Litt senere i foredraget.
Dette er Script.
>> Vi sier bare, når vi får et klikk, og det er på tilveksten, dette
hash betyr bare ID.
På øknings ID tag, så vi ønsker å oppdatere - stikkordene jeg vil ha deg
å se er å oppdatere og velge og spiller.
Så uansett hvilken spillerens valgt, vi oppdaterer den.
Og det vi gjør er vi øke sin poengsum med fem.
Og som vil beskrive funksjonaliteten vi har her.
>> Etter utløpet av dette seminaret vil vi være i stand til å se noen mer kode.
Men å gå tilbake til mitt mål som jeg ønsker å endre området, jeg ønsket over her
å legge til en Fjern-knappen så Jeg kan slette spilleren.
Så for å gjøre det, trenger jeg å gjøre to ting.
Jeg trenger å oppdatere HTML, oppdatere se, hva blir vist til brukeren, og
da har noen Java at når knappen trykkes inn, blir Meteor kommer
å gjøre noe.
Det kommer til å fjerne den spilleren.
>> Så det er mange biter av kode som har i utgangspunktet allerede
blitt gjort for meg.
Hvis jeg ser her, jeg har allerede en måte for å få valgt spiller.
Det er slike ting, hvis du kan se det.
Så hvis jeg bare -
Jeg kommer til å ha en annen hendelse.
Så jeg kommer til å kopiere det jeg har.
Fordi dette er en liste, Jeg trenger bare et komma.
>> Så nå kommer jeg til å klikke slette.
Og så i stedet for spillere oppdatering, Jeg kommer til å gjøre spillerne slette.
Og alle spillerne slette behov er valgt spiller.
Så denne funksjonen er alt vi trenger.
Jeg trenger å legge til noen HTML her skjønt.
Så hvis jeg ruller nedover her, Dette er HTML-visning.
Vi hadde en ting her, som var en en kode.
Du trenger ikke å bekymre deg for det.
>> Det som betyr noe for deg er denne ID tilveksten.
Og dette er hva som tillot oss å si, når vi klikket tilvekst, må vi
gi fem poeng.
Og vil du se at dette er en knapp.
Det er hva den btn betyr.
Og teksten i knappen er å gi fem poeng.
Så hva jeg skal gjøre er jeg kommer til å kopiere denne linjen.
Jeg kommer til å endre ID for å slette.
Og jeg kommer til å endre tekst for å slette.
>> Så sørg for at alt er lagret.
Jeg ønsker å gå tilbake til min Java å sørge for at jeg har
slette stilt opp her.
Bra.
Så jeg kommer til å spare både filer.
Når du har lagret begge filene, vi kan gå tilbake til bunnen.
Og nå ser vi at vi har en slette-knapp.
Og ett skritt.
Du merker at du kan få en feil fordi når jeg klikker
slette, ingenting skjer.
>> En måte å feilsøke dette på er å gå tilbake til Inspiser Element.
Jeg gjør dette med vilje, slik at du kan se hvordan du ville feilsøke noe.
I Inspiser Element, har vi alle våre teksten her nede.
Jeg ønsker å gå tilbake til konsollen.
Og hva skjer når jeg går her er jeg får noen form for feil.
Det står at det er ingen metode slette.
>> Så hva dette sier er når jeg går tilbake til koden, I heter spiller
slette her.
Slett er faktisk ikke riktig kommando.
Så for å finne ut hva som er riktig kommando er, er det den Meteor API.
Dokumentasjonen Jeg ønsker å peke deg gutta til er bare på meteor.com.
Så jeg har det her oppe.
Dette er bare så dere vet der for å lære mer.
>> Det er en link til dokumentasjonen.
Og i utgangspunktet, kan jeg bare finner for sletting.
Og det du ser, slette er faktisk fjerne.
Det er kommandoen som Jeg trenger å ringe.
Så nå som vi vet det, kommer jeg til å endre dette slett for å fjerne.
Så nå, når jeg går tilbake til min topplisten området, kommer jeg til å klikke
slette, og nå er jeg borte.
Det er ikke mer Roger.
Og jeg kan holde det gående slette alle enkelt navn før jeg har ingenting igjen.
>> Så det var en liten forhåndsvisning av hvordan du bruker Meteor.
Du vil lære mye mer Java og HTML nødvendig å gjøre
det ser penere, som vi vil dekke i denne ukens [? brikke?] satt for HTML
og Java neste [? brikke?] satt.
>> Så ikke bli bekymret hvis ikke alle dette ting kommer lett til deg.
Det vil ved tidspunktet for det endelige prosjektet.
Takk for å dukke opp.
Linken jeg vil oppdatere snart etter seminar, slik at du kan se litt mer
eksempler som jeg har implementert på hvordan for å få mer avansert topplisten
at jeg har på denne nettsiden her på ett-radikal-leaderboard.meteor.
Takk.
>> [APPLAUSE]