Fantastisk tekst: Del 2

Sophia introducerer "tekststrenge" og viser derefter, hvordan man gemmer strenge i variabler og viser disse ved hjælp af tekst-kommandoer. Hun viser også, hvordan man flytter en tekst rundt med musen og laver en animation med tekst.

Har du undret dig over, hvad der gør tegninger kan se virkelige ud? For at opnå dette skal vi snakke til vores computer i et specielt sprog. I emnet Introduktion til JS: Grafik og animation skal vi lære at bruge programmeringssproget Javascript, når vi laver grafik og animation.

I kurset Programmering - JavaScript og internettet kan du udforske en forunderlige verden, du selv laver med programmering. Lær at programmerer grafik, animationer og spil med JavaScript og vores Processing Library. Du kan lære mere om teknologierne bag internettet, mens du designer hjemmesider med HTML og CSS.

Khan Academy har en mission om at give gratis, verdensklasse undervisning til hvem som helst, hvor som helst. Vi tilbyder quizzer, opgaver, videoer og artikler inden for områder som matematik, kunst, computerprogrammering, økonomi, fysik, kemi, biologi, medicin, finans, historie, og meget mere. Vi giver lærere værktøjer og data som de kan bruge til at hjælpe deres elever med at udvikle deres færdigheder, vaner og tankegang, så de fremover kan have succes både i skolen og senere i livet. Khan Academy er oversat til mange sprog og over 15 millioner mennesker verden over lærer via Khan Academy hver måned. Khan Academy er et 501(c)(3) nonprofit selskab.

Giv en donation eller Bliv frivillig i dag!

https://www.khanacademy.org/donate

https://www.khanacademy.org/contribute

Nu hvor vi har lært at skrive tekst,

lad os blive mere avanceret.

Den første smarte ting vi skal
lære er ordet 'streng'

Du tænker måske streng
- som på min guitar?

For programmører er
tekststreng et specielt navn,

vi bruger for bider af tekst.

Du kan se dem lidt som dele,
hvis det hjælper.

Dit navn er en tekststreng,
din skoles navn er en tekststreng,

og alle SMS'er du har sendt
er tekststrenge.

Du kan egentlig se en
tekststreng som tekst.

Vi har allerede tegnet og
farvelagt tekststrenge.

Kan vi bruge variabler
sammen med tekststrenge? Ja!

Lige som du normalt vil
gemme et tal i en variabel,

kan du også gemme en
tekststreng i en variabel.

Vi kan for eksempel skrive

>var myName = "Sophia";<

og husker gåseøjnene.

Nu kan vi indsætte variablen 'myName'

i teksten i stedet for at skrive "Sophia",

som vi gjorde før.

Selv om det ser ud på samme måde,

så kan vi nu skrive det flere gange

en gange her, en gang der.

Det eneste du skal gøre er
at ændre denne ene variabel

til dit navn og dit navn skrives 3 gange.

Lad os gå tilbage.

Hvad hvis vi vil gøre noget skørt?

Kan vi lægge strenge sammen, ligesom

da vi lærte at lægge variable samme?

Det kan vi skam godt.

Computeren vil samle de to strenge.

Hvis vi fjerner dette,
så navnet kun skrives en gang,

og vi laver en ny variabel

>var message = myName + "!!!";<

og vi putter 'message' ind i 'text'
i stedet for 'myName',

så kan vi se, at den sætter alle
disse udråbstegn efter mit navn.

Vi kan gøre det mere spændende

ved at skrive 'message' to gange.

Det giver mening, addition af strenge,

sætter en streng efter en anden streng.

Kan man gøre noget mere skørt,

som at gange eller dividere strenge?

Nej det kan vi ikke,

vi kan kun lægge strenge sammen.

Vi kan dividere og trække
tal-variable fra hinanden,

men streng-variable kan kun lægges sammen.

Men det er en god ide at være
nysgerrig og stille spørgsmål

når man lærer programmering.

Hvad mon division af en streng kan betyde?

Vi kan også bruge animation og
muse-interaktion med tekst-strenge.

Vi kan for eksempel få strengen til
at følge musen ved blot at indsætte

den i en draw løkke,
som vi gjorde med rektangler.

Det gør vi ved at taste

>var draw< og så indsætte
alt dette i funktionen.

Det ser nok bekendt ud fra
introduktion til animation.

For at den kan følge musen,

så skal vi bruge mouseX og mouseY

og sådan, nu kan vi tegne med vores navn.

Hvis vi laver en baggrund,

som denne pæne lyseblå,

så følger teksten musen rundt,

ligesom vi så med rektangler.

Lige til allersidste lad os
bruge animation til

at få tekststørrelsen
til at vokse og vokse og vokse.

Her sætter vi 'textSize' til 30.

Lad os i stedet lave >var howBig = 30< og

så bruge denne variabel i stedet for 30.

Det er præcis det samme.

Vi skal naturligvis ændre
nogle ting for at få en animation.

Vi taster >howBig = howBig + 1;<

som betyder, at størrelsen af howBig
nu bliver 1 større hver gang.

Lad os genstarte programmet.

Sådan, når vi flytter musen omkring

så bliver tekststørrelsen større
og større og større,

på grund af denne linje lige her.

Du kan måske selv prøve

at få den til at vokse hurtigere?

Nu kan du ikke kun ændre figurer med kode,

du kan også ændre tekst med kode.