Sniktitt (Videoversjon)

Dette er bare en skjermkopi av vår interaktive kodeleksjon, forberedt for å gjøre underteksting og oversettelse enklere. Det er bedre å se våre leksjoner her: https://www.khanacademy.org/cs/programming/

Ok, la oss hoppe i det og lage et program.

Vi starter fra absolutt ingenting, men når vi kommer i mål, har vi laget noe skikkelig kult; et lite tegneprogram.

Se på dette som en rask gjennomgang av de første leksjonene på Khan Acadamy.

For å gi deg en følelse av hva som er mulig.

Ikke bekymre deg om å forstå alle detaljene akkurat nå.

Vi ønsker bare å gi deg en følelse av hva som kommer, og hvilke programmer du vil bli i stand til å lage om ikke så lenge.

Så, akkurat nå er det ingenting her; litt kjedelig. Så la oss tegne noe.

Jeg kommer til å tegne en ellipse, noe som er en sirkellignende ting.

Og som du vil se, her er hvordan jeg gjør det.

Og der er den; noe som er nesten magisk

Grunnen til at dette fungerer er at det er noen spesielle ting Khan Acadamy sitt utviklingsmiljø allerede vet om.

Heldigvis er ellipse en av disse tingene.

Ikke bekymre deg for hva alle disse tallene betyr.

Vi skal lære om dem i videoen "introduksjon til tegning".

Likevel, her er en smakebit.

Når vi endrer tallene, ser vi at det første betyr "hvor langt på tvers".

Den andre betyr hvor langt opp og ned.

Den tredje ser ut til å bety "hvor stor på tvers" og den siste "hvor stor opp og ned".

Igjen, du trenger ikke å vite det akkurat nå.

Men du kan pause denne leksjonen hvis du vil, og leke med tallene selv.

Du vil lære alle detaljene i senere leksjoner.

Det som er viktig akkurat nå er at tallene kontrollerer hvordan formen ser ut.

Ok, så det er flott, men du er trolig ikke veldig imponert.

Så jeg kommer til å gjøre noe som ser litt mer komplisert ut, og så plassere ellipsen vi lagde isted inni.

Ok, så ingenting endret seg og du er trolig fremdeles ikke veldig imponert.

Men det jeg skal gjøre nå, og resultatet vil være litt mer imponerende, er å gjøre programmet animert!

Og som du nå ser, har vi tonnevis med sirkler og de følger faktisk etter musepekeren når jeg flytter den.

Du kan pause programmet akkurat nå og la det følge din musepeker istedet.

Ok, så hvordan skjer egentlig dette?

Hvor kommer alle disse sirklene fra?

Vel, du vil lære alt dette i videoen "intro til animering" senere, men sidan du lurer, det som skjer er at programmet forteller datamaskinen om igjen og om igjen; tegne tegne tegne tegne...

Og du tenker kanskje at programmet blir lei av det, men istedet fortsetter det bare å gjøre det som står inni denne magiske tegnedelen av programmet.

Så det bare fortsetter å tegne ellipse etter ellipse etter ellipse.

Og det er hva som foregår bak kulissene, når vi flytter musepekeren rundt, for å lage så mange ellipser.

Selv om vi bare skrev det én gang.

Så, hvordan vet programmet hvor det skal tegne ellipsen?

For eksempel, hvordan vet det å følge etter musepekeren?

Vel, dette vil du lære om i videoen "museinteraksjon" senere.

Den store ideen er at hver gang vil datamaskinen fortelle programmet vårt hvor musen er ved å bruke spesielle museord.

"MusX" og "MusY"

Du trenger ikke vite om dem akkurat nå, men MusX sier bare hvor langt over på tvers musepekeren er.

Mens MusY sier hvor langt opp og ned.

Så, for å oppsummere; når vi lager denne ellipsen sier vi at det første tallet sier: tegn ellipsen så langt på tvers som dit musepekeren er.

Det andre tallet sier: tegn ellipsen så langt opp og ned som musenpekeren er.

Hva det betyr til slutt er; tegn en ellipse på den eksakt samme plasseringen som musen er, hver gang vi sier "tegn!".

Og disse siste to tallene sier bare hva størrelsen på ellipsen skal være.

Og igjen, ikke bry deg om alle disse detaljene for nå.

Etter at du går gjennom de neste leksjonene, vil dette gi mye mer mening.

Og nå, som du kan se, dette begynner å bli litt rotete.

Vi kan bare trykke på denne omstartsknappen for å starte programmet om igjen med et blankt ark.

Sett i gang og pause programmet akkurat nå.

Lek rundt med det på egenhånd, bare slik at du ser hva som skjer.

Ok, så nå har vi noe litt artig på gang.

Men hva mer kan vi gjøre?

Vel, disse sirklene are ganske stygge.

De er bare hvite.

Hva om vi kan fargelegge dem?

Det finnes en egen leksjon "introduksjon til fargelegging", hvor vi lærer alt om farger.

Men jeg skal nå røpe hemmeligheten og vise deg hvordan det gjøres akkurat nå.

Tada! Kult.

Nå har du røde sirkler følgende etter musepekeren.

Men de trenger ikke bare være røde, fordi når du trykker på denne fargen her, kan du velge hvilken som helst farge du vil.

En hel regnbue av farger.

Så hva med bare en fin lilla farge for nå.

Og du kan lære om hvorfor farger endres når du gjør dette i leksjonen "introduksjon til fargelegging".

Så fort vi starter på nytt kan vi... Flott! Nå har vi bare lilla sirkler.

Så du vet, nå tenker vi kanskje, vi la ned alt dette arbeidet for å tegne disse vakre formene.

Hver gang vi flytter musen.

Men, det ville være fint å tegne bare noen ganger. For eksempel bare når museknappen er trykt ned.

Og jeg skal vise deg hvordan det gjøres nå.

Logisk sett, er det ikke særlig komplisert. Alt vi sier er: Dersom museknappen er trykket ned, tegn sirkelen.

Ellers, ikke gjør noe i det hele tatt.

Si "dersom" etterfulgt av disse merkelige parantesene som du ikke trenger bry deg om...

Så, "dersom" musen er trykket ned så ønsker vi bare å tegne ellipsen vår, og ellers ønsker vi ikke å gjøre noe som helst.

Så vi lar denne delen har nede være helt tom.

Så når vi starter programmet på nytt, kan vi si:

Jeg flytter musepekeren rundt, ingenting skjer.

Men når jeg trykker museknappen; Jeg kan tegne!

med lilla.

og skrive ting, og tegne ting.

Og egentlig bare gjøre hva jeg vil. Noe som er ganske fint.

Fordi bare med et par kodelinjer, lagde vi et lite tegneprogram.

Så, det er en helt egen introduksjon til "dersom"-setninger,

hvor du vil lære alt om hva denne koden gjør, som vi akkurat skrev.

Og hvordan den fungerer. Jeg vedder på at du kan se den generelle ideen allerede.

Alt vi sier er: Dersom museknappen er trykket ned, gjør dette, og ellers:

Dersom museknappen ikke er trykket ned, gjør vi bare ingenting!

Kult! Det er nøyaktig den samme logikken vi hadde i hodet.

Vi skrev det bare i kode.

Og... du kan si; hva med alle disse stygge kantene rundt alle sirklene våre?

Vel, du vil lære å kontrollere dette snart. Du kan lage kanten større..

Du kan lage den mindre..

Du kan lage den i ulike farger..

Men akkurat nå vil jeg egentlig bare bli kvitt den.

Så jeg bare skriver "noStroke" på toppen her, siden den lille kanten kalles en "stroke".

Og nå når vi restarter programmet.

Hei! Kanten er borte!

Perfekt! Dette ser ut som et mye mer realistisk tegneprogram.

Så, la oss nå bare raskt ta ett steg tilbake.

Du lurer kanskje på: Hvor er det disse magiske ordene som

"dersom" og "ellipse" og "tegn" kommer fra?

Disse nyttige kommandoene er innebygd i Khan Acadamy.

Vi lagde det.

Og den morsomme delen kommer fra å lære hvordan kombinere kommandoene til programmer.

Om du er virkelig nysgjerrig, så bruker vi et programmeringsspråk som heter JavaScript

her på Khan Acadamy

JavaScript er en av de mest populære måtene å skrive programmer på, i hele verden.

Spesielt på Internettet.

Så, du vil være i ganske godt selskap.