Forskjeller

Hva

Denne siden er beregnet på lesere som har kunnskap om Processing. Først og fremst gjelder det forskjellen mellom Java og Javascript. Det vil føre for langt å beskrive dette i alle detaljer, men det er noen hovedtrekk som er viktige å være klar over i starten.

Variable

Javascript har ikke variabeltyper. Når vi skal deklarere en variabel skriver vi rett og slett:

var a;

Hva som lagres bak dette navnet er avhengig av hva vi putter inn. Vi kan godt skrive:

var a;
a=12;
a="en tekst";

Vi har måter å endre innholdstypen, f.eks.

var T="12.7 centimeter";
var f=parseFloat(T);// som gir f=12.7
var i=parseInt(T); // som gir i=12

og som i Java:

var i=7;
var T="Alle "+ i+ "er på tur"; // som gir  T="Alle 7 er på tur"

Vi kan også begynne å bruke variable uten å deklararer dem med var, men dette kan være litt skummelt siden vi da kan komme til bruke en global varabel med samme navn og overskrive denne. Tommelfingerregelen er å alltid deklarere en variable når vi trenger den, hvis vi ikke bevisst ønsker å bruke en variabel som allerede er deklarert og tilgjengelig.

Array

Array i Javascript er veldig fleksibel. Vi kan putte inn hva vi vil og hvor vi vil, og vi trenger ikke ArrayList slik som vi har i Java. Eksempler:

var list=new Array('Ole','Hans','Peder')
  
    list=new Array();
    list=['Ole','Hans','Peder'];
  
    list=new Array();
    list[0]='Ole';
    list[1]='Hans';
    list[2]='Peder';
  
    list=[]
    list.push('Ole');
    list.push('Hans');
    list.push('Peder');
  
    list=['Ole','Hans','Peder'];
  
    var S='Ole,Hans,Peder'
    list=S.split(',');

Funksjoner

Alle funksjoner i Javascript har samme form

function navn(){
}
function pluss(a,b){
  return a+b;
}
function finnMaks(L){
  var m=L[0];
  for(var i=1; i < L.length; i++)
    if(L[i] > max)
       max=L[i];
  return max;
}

Vi trenger ikke angi hva slags type som skal returneres, eller om ingenting skal returneres. Det bestemmer vi i funksjonen og den koden som kaller funksjonen må ta imot og tolke.

Funksjoner brukes også til å definere klasser. I Java har vi et eget begrep for å definere klasser:class. Mer om dette når vi trenger det i en p5js-løsning på følgende sider.

null og undefined

JavaScript definerer to konstanter, verdier, null og undefined.

undefined betyr at en variable ikke har fått noen verdi. Dette er en situasjon som ville bli fanget opp under kompilering i et kompilert språk.

null betyr at en variabel eksplisitt har fått verdien null. null tilsvarer det vi kjenner fra andre språk, null i Java, None i Python, og sier oss at en referanse referer til ingenting.

Begge verdiene fungerer som boolean false i en if-test

Eksempel1

Processing skissen hallo1 er slik:

PImage a;  
String helloT="Hello World";
float v=0.0;
void setup() {
  size(200, 200);
  fill(0);
  textFont(createFont("SansSerif",18));
  a = loadImage("bs1.png");  
  frameRate(30);
}
void draw() {
  background(255, 255, 180);
  text(helloT, 50, 150);
  translate(80,60);
  rotate(radians(v+=2));
  image(a, -a.width/2, -a.height/2, a.width, a.height);
}

Den vil se slik ut i p4js:

var a;  
var helloT="Hello World";
var v=0.0;
function preload(){
    a = loadImage("bs1.png");  
}
function setup() {
    createCanvas(200, 200);
    fill(0);
    textFont("SansSerif",18);
    frameRate(30);
}
function draw() {
  background(255, 255, 180);
  text(helloT, 50, 150);
  translate(80,60);
  rotate(radians(v+=2));
  image(a, -a.width/2, -a.height/2, a.width, a.height);
}

Merk funksjonen preload() som laster det vi trenger før setup() kjøres.

Vi legger det ut på denne websiden;

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>test</title>
     <script src="https://borres.hiof.no/resources/p5js/p5.min.js">  </script>
    <script src="hello.js"> </script>
</head>
<body>
</body>
</html>

og du kan se den her: test.html https://borres.hiof.no/pisk/P5js/forskjeller/test.html

Eksempel2

Vi har ofte bruk for flerdimensjonale arrayer, f.eks. tabeller. Arraybegrepet er som sagt veldig fleksibelt og vi kan opprette en tabell som en array av arrayer:

var tabell;
var antallRader=5;
var antallKolonner=8; 
function setup() {
   createCanvas(200, 160);
    tabell=new Array();
    for(var r=0; r < antallRader; r++){
         tabell[r]=new Array();
         for(var k=0; k < antallKolonner; k++){
             tabell[r][k]=""+r+k;
        }
    }
    noLoop();
}
function draw() {
    background(255);
  fill(0);
  for(var r=0; r < antallRader; r++){
    for(var k=0; k < antallKolonner;k++)
      text(tabell[r][k],20+k*20,50+r*20);
    }
}

Vi legger det ut på denne websiden;

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>p5jstabell</title>
     <script src="https://borres.hiof.no/resources/p5js/p5.min.js">  </script>
    <script src="tabell.js"> </script>
     <style>canvas{border: solid thin blue}</style>
</head>
<body>
</body>
</html>

Resultatet blir slik:

og du kan se den her: tabell.html https://borres.hiof.no/pisk/P5js/forskjeller/tabell.html