Oppdatering 11/9: Fasit til oppg 1-4 (se nederst) ligger som "lagboks.zip" i Filer.

Først endel for å bli mer kjent med Javascript (JS). JS ble laget rundt 1995 og de som laget nettleseren Netscape. JS kjøres i en nettleser og kan gjøre alt mulig med en nettside etter den er lastet inn, samt utveksle data med servere via AJAX.

I en HTML-side må JS stå i et (eller flere) SCRIPT-element. Når siden lastes inn vil JS kjøres. Ved feil kan et utviklervindu i nettleser være til hjelp.

UTVIKLERVINDU i nettleser: F12 i Chrome, Firefox m.m.

KONSOLL: Velg "console". Dette er interaktivt, du kan skrive JS direkte og sjekke koden som kjører, endre verdi på variabler m.m. Bruk pil-opp/ned for å bla, og Enter for å gjenta forrige kommando.
SOURCE: Se JS-koden(e) fargekodet. Ved debugging vises kodelinje uthevet. Kan kjøre JS-linjene enkeltvis (steppe), gå ned i, evt. utføre uten å gå ned i, pause, m.m.
ELEMENTS: HTML-koden med tilhørende utseende. Lett å finne hvilke element som gir hvilket utseende.
NETWORK: Viser fargekodet tidsakse for når ting ble hentet inn fra nettet (start, vent, ferdig evt. avbrutt). Nyttig når "ting går treg" evt. ikke virker i det hele tatt.

NB: "Utviklervinduet" for A-Frame er noe annet (Ctrl-Alt-I under kjøring av VR).

UT-TEKST: For debugging og meldinger til bruker må en av og til skrive tekst (tegn og strenger)

Sjekk at console.log("hei") skriver til konsollet
Sjekk at alert("hei") gir en sprettoppboks, slik vi såvidt brukte i IBE102.
Sjekk at alert pauser innlesing & utførelse
Sjekk at en scene med <a-text value="hei"> </a-text> gir tekst på fast plass.
Sjekk at <a-text> inne i <a-camera> gir en tekst som følger blikket

DATATYPER: JS har number (gjør ikke forskjell på heltall og desimal/flyttall) og tekst. Vanlige operatorer (+, -, /, *). Tekst slås sammen med "+". Tom streng er "". Typen for en variabel er dynamisk.

DYNAMISK TYPE: i=3 gjør at i får datatype tall. Skriver vi senere i="hei" blir det en streng, og med i={...} blir i et objekt. Ved typeblanding i sammensatte uttrykk velger JS den mest "fornuftige" resultattypen.

Prøv i konsollet: Skriv i=3 (skal få 3), så i+4 (skal få 7), i+"hei" (skal få "3hei"), i="ja" (skal få "ja") og i+" nei" (skal få "ja nei")

VARIABLER. Deklareres implisitt når de tas i bruk (som i Python og andre scriptspråk). Eksplisitt deklarasjon gjøres med "var".

HJELPEBIBLIOTEK

innebygd, som Math, Date, console.
eksternt (det finnes tusenvis), må hentes inn via SCRIPT-tag. (som A-Frame)

TID (basert på https://www.w3schools.com/js/js_date_methods.asp)

Bruk konsollet og få frem tidspunkt med "Date()"
Lagre tidspunkt til lokal variabel t1 med "var t1 = new Date().getTime()", s
1. det som skjer er at vi FØRST lager et nytt objekt av typen Date(), dernest påkaller objektets metode/funksjon getTime() som gir antall millisekund siden 1/1-1970.
Lag t2 likens etter noen sekunder
Skriv ut "Forskjell: x sekund", der du skriver ut forskjellen i t1 og t2, rundet ned med Math.floor(). Dermed har du prøvd både Math og Date (mye hjelp å få der).

TID i VR.

Lag en a-text med id="aktivtid" i posisjon (0, 1.6, -2) som viser i rødt: "Tid aktiv: x sekunder".
1. den må ved oppstart, lagre start-tidspunkt (i fex t1)
2. periodisk (fex hvert sekund) må den finne ut antall sekunder og dernest oppdatere teksten (som har id="aktivtid") slik dere lærte i forrige uke

OBJEKT er en måte å gruppere variabler sammen. Kan lages med fex var person = { "navn": "Jon", alder: 17 }, der "person" blir en peker til objektet. Referer verdier med punktnotasjon som i person.navn. Hvis person er null (peker ingen steds), vil person.alder + 10 gi feilmelding om "null object".

Prøv i konsollet: Lag en person. Skriv ut navnet til konsollet. Du merker at du får forslag når du begynner å skrive på "person.navn". Endre alder til 24 og sjekk at alderen er endret.
Sett person til null og sjekk at JS reagerer med vantro hvis du fex endrer personens alder til 36
Da dere i forrige uke skrev setAttribute (t, { x: ..., y: ..., z: ... } ) var det altså et objekt!

TILFELDIGHET: Realisme i en kunstig virkelighet, kan skapes med å legge inn tilfeldighet i fex bevegelse og plassering. Math.random() gir tilfeldig verdi mellom 0 og 1.

Sjekk med konsollet at Math.random() er som forventet
Lag "tilf.html" som ved oppstart skriver 5 tilfeldige tall til konsollet (fex 5 linjer med console.log (Math.random()); )

GJENTAKELSER: Her kan vi bruke gode gamle for (var i=0; i<100; i++) { ... }, men det finnes også while.

Lag ei forløkke som skriver 100 tilfeldige tall til konsollet.

FUNKSJON lages med function <navn> ( <innparam> ) { < kropp > } med eller uten "return <verdi>".

Prøv i konsollet: Skriv inn function uniform (a,b) { return a+Math.random()*(b-a); } og sjekk med uniform(2,4) at den virker, og med pil-opp at verdiene blir (tilsynelatende) tilfeldige.
Lag funksjonen tpos() som bruker din uniform til å gi tilfeldige verdier mellom -5 og 5. Sjekk med tpos() at den virker, og at det blir nye verdier hver gang

LEGGE TIL I SCENE gjøres ved oppstart (det som står i BODY) + etterpå (i JS). Her er eksempel:

scene = document.querySelector ('a-scene'); 
ny = document.createElement ('a-box') 
ny.object3D.position.y=1.6;  
scene.appendChild (ny);

Lag "lagboks.html" som ved oppstart kjører koden over. Sjekk at dette gir feilmelding. Trykk på feilmelding og sjekk hvor i koden. Du skal se at det er i appendChild. Skriv "ny" i konsollet, du skal se null. Årsaken er at scenen med "a-scene" ikke er opprettet enda (pga sekvensiell kjøring; nevnt over).
Legg inn en forsinkelse, slik at dette blir kjørt etter et halvt sekund (burde holde; det tar ikke mange millisekundene å lese inn og generere scenen ferdig). Da skal det fungere.
(det finnes bedre måter å gjøre dette på, der en venter på en "loaded" event, men det får vi evt ta senere)

LAGE BOKSER

Utvid slik at den lager 3 bokser på 1x1x1 meter på rekke og rad langs z-aksen (x=0, y=0) med 1 meters avstand.
Lag 7 bokser som står tilfeldig plassert i et 10x10x10 meter rom som er sentrert i origo (0,0,0). Det betyr at en langs x-aksen kan stå hvorsom helst mellom -5 og 5. Det samme for x- og z-aksen. Bruk gjerne den ovenfor nevnte tpos() for å lage verdi.
Endre, slik at boksene lages en og en, med 2 sekunders mellomrom. Bruk det du lærte i forrige uke, kall funksjonen for "lagboks".
For å få avsluttet bokselagingen, må en clearInterval (bokselager) utføres etter siste, der variabel bokselager er den som ble dannet da du gjorde "var bokselager = setIntervall (lagboks, 2000)"

Tillegg etter forelesning 9/9: La "lagboks.html" i Filer (venstremeny) med litt mere innmat.

Håper vi rekker alt dette!