Et stykke JavaScript

Script og Canvas

Script er html-elementet vi bruker til å skrive programkode. Inne i et script-element, skriver vi JavaScript.

Canvas er html-elementet vi bruker til å tegne. Resultatet av tegneoperasjonene i script-elementet er synlige i canvas-elementet.

Script-elementet i seg selv er usynlig.

Eksempel

<canvas id="Miami"></canvas>
<script>
  s = document.getElementById("Miami");  // Et stykke kode
</script>
    

Resultat

Skilpaddegrafikk

forward og back tegner rette streker. left og right endrer retningen på strekene.

Eksempel

s = document.getElementById("Mamaia");   
t = new Turtle(s); 
t.forward(10);
    

Resultat

Oppgave

Bruk skilpaddekommandoene til å tegne en likesidet trekant.

Løkker

for lager gjentakelser. En eller flere kommandoer kan gjentas 2 eller flere ganger.

Eksempel

for(i=1;i<6;i++)
{
    t.lineWidth = i*3; t.forward(10); 
}
    

Resultat

Oppgave

Bruk skilpaddekommandoene og for til å tegne en likesidet femkant.

Funksjoner

function lager nye ord i språket. En sekvens av kommandoer eller programlinjer får et navn, som vi siden kan bruke til å utføre hele sekvensen.

Eksempel

t.tak = function()
{
  t.right(45);
  t.forward(20);
  t.right(90);
  t.forward(20);
  t.left(90+45); // Rett opp skilpadden
}
t.tak(); // Kall funksjonen (gi ordre om at koden skal utføres)
    

Resultat

Oppgave

Lag en funksjon som tegner en likesidet sekskant. Bruk function og for.

Argumenter

Funksjoner tar argumenter. Argumentene er tilleggsopplysninge, verdier, som du gir funksjonen når den kalles. Argumentene kan brukes til å styre antall, størrelser, forhold og egenskaper og på den måten modifisere funksjonen.

Eksempel

t.trapp = function(antalltrinn)
{
  for(i=0;i<antalltrinn;i++)
  {
    t.forward(20);
    t.right(90);
    t.forward(20);
    t.left(90); 
  }
}
t.trapp(3);
    

Resultat

Oppgave

Lag en funksjon som tegner en likesidet mangekant. Bruk argumentet antall til å si hvor mange sider den skal ha.

Regneoperasjoner

Vi kan bruke + - * og / til å regne ut nye verdier fra de tallene og argumentene vi har tilgang til.

Eksempel

t.merker = function(lengde,deler) // Sett et antall merker på en strek
{
  for(i=0;i<deler;i++)
  {
    t.forward(lengde/deler);
    t.left(90);
    t.forward(50);
    t.back(50);
    t.right(90); 
  }
}
t.right(90); t.merker(50,10);
    

Resultat

Oppgaver

  1. Lag en funksjon som tegner en sirkel.
  2. Lag en funksjon som tegner en sirkel. Bruk argumentet omkrets til å si hvor stor sirkelen skal være.
  3. Lag en funksjon som tegner en sirkel. Bruk argumentet diameter til å si hvor stor sirkelen skal være.