Kmom01: JavaScript och WebGL

By . Latest revision .

Du kommer igång med en labb- och utvecklingsmiljö som stödjer utveckling av HTML, CSS och JavaScript tillsammans med WebGL. Du testar på programmering i JavaScript, bygger en sandbox för dina tester och du skapar dina första WebGL-ritningar i webbläsaren.

Så här långt kommer du när du läst boken och testat dess exempel.

Placera ut punkter på canvasen i olika färger.

Placera ut punkter på canvasen i olika färger.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Labbmiljön

(ca: 2-6 studietimmar)

Det finns en längre beskrivning om kursens labbmiljö. Jobba igenom den för att få kursens labbmiljö på plats.den om du är osäker på vad som skall göras.

#Läsanvisningar

(ca: 4-8 studietimmar)

#Kurslitteratur

Läs följande:

  1. WebGL Programming Guide.
    • Ch 1: Overview of WebGL
    • Ch 2: Your first step with WebGL

I kapitel 2 finns en del exempelprogram som du kan testa direkt i ditt kursrepo example/webgl/theBook/Chapter2/, eller via dbwebb’s kopia av kursrepot.

  1. Bekanta dig med boken Speaking JavaScript: An In-Depth Guide for Programmers genom att läsa igenom det första kapitlet Ch1 Basic JavaScript (läs till och med stycket om “Strict Mode”) som ger dig en introduktion till grundkonstruktioner i programmeringsspråket JavaScript.

#MDN

I kursen används Mozilla Developers Network (MDN) som en resurs generellt för webbresurser och specifikt för referensmanual till programmeringsspråket JavaScript.

Vill du hamna på rätt manualsida så lägger du alltid till “mdn” till din googling. Det finns många versioner av JavaScript och du vill gå tillbaka till källan i referensmanualen för att veta vad som är rätt (eller fel).

Gör följande:

  1. Bekanta dig kort med översikten på MDN: Web technology for developers. Där ser du generellt material om webbteknologier.

  2. Bekanta dig specifikt med det som finns under rubriken “JavaScript”. Använd minst 10 minuter av din tid för att kika runt och läsa någon av de inledande artiklarna om JavaScript.

  3. För en snabb introduktion till konstruktionerna i språket JavaScript kan jag rekommendera dokumentet “MDN JavaScript Guide” och de inledande kapitlen som kompletterar det du läst i kurslitteraturen.

    • Introduction
    • Grammar and types
    • Expressions and operators

#Artiklar

Läs följande:

  1. I kursen används validatorer och en kodstandard för att testa att du skriver kod på ett, enligt kodstandarden, acceptabelt sätt. Du kan läsa om dbwebb-kodstandarden på npm javascript-code-style. Du kan diskutera kodstandarden i forumet.

#Video

Kika på följande videor.

  1. Videoserien Lär dig JavaScript är tätt kopplat till kursmaterialet. Kika igenom serien under kursens gång.

  2. Videon “The Future of WebGL and Gaming” ger dig en inblick i en möjlig framtid för 3D-spel på webben.

#Lästips

Följande källor är relevanta och ger dig en orientering i WebGL och det som krävs för att jobba med WebGL.

  1. Webbplatsen WebGL Fundamentals innehåller en samling artiklar som riktar sig till den som precis börjat koda WebGL. Det kan vara bra att använda sig av de artiklarna som komplement till boken.

  2. Webbplatsen Learning WebGL innehåller ett antal lektioner om hur man kommer igång med WebGL. De kan komplettera boken.

  3. Khronos Group driver standardisering och utveckling inom OpenGL och WebGL. Vänd dig till deras webbplats för referensmaterial.

  4. Du bör redan vara mycket väl insatt i vektorer, matriser och hur de relaterar till 3D-grafik. Vill du fräscha upp minnet så finns det bra resurser i artikelserien om “Vector Math for 3D Computer Graphics”.

#Övningar & Uppgifter

(ca: 10-12 studietimmar)

#Övningar

  1. Du behöver ha grundläggande koll på HTML och CSS. Som en uppfräschning av dina kunskaper, eller som en kort intro, så jobbar du igenom materialet i tipset “Kom igång (snabbt) med HTML, CSS och JavaScript”. Jobba igenom materialet grundligt eller översiktligt, beroende på ditt eget behov.

  2. Kom igång och gör ditt första program i JavaScript tillsammans med artikeln “Kom i gång med HTML, CSS, JavaScript och Canvas”.

  3. Uppgradera din sandbox till att rita med 3D-kontext och WebGL tillsammans med artikeln “Kom igång och rita med WebGL på en Canvas”.

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “Skapa en me-sida till webgl-kursen”. Spara resultatet i me/redovisa.

  2. Gör labben “JavaScript med variabler och inbyggda funktioner” Labben genereras i me/kmom01/lab1.

  3. Gör laborationen “JavaScript med villkor och loopar”. Spara arbetet i me/kmom01/lab2.

  4. Gör uppgiften “Rita punkter med WebGL”. Ditt resultat sparar du delvis i me/kmom01/sandbox2 och delvis i me/kmom01/point.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Vilken utvecklingsmiljö sitter du på?
  • Hur väl känner du dig hemma i webbtekniker som JavaScript, HTML och CSS?
  • Vilket är ditt första intryck av programmeringsspråket JavaScript, kan du relatera till något annat programmeringsspråk?
  • Hur väl känner du dig hemma i 3D programmering med OpenGL, WebGL eller motsvarande?
  • Vad tycker du om kursboken så här långt?
  • Berätta lite om hur du löste uppgiften med punkterna. Var det något som var svårt, lurigt eller utmanande?

#Revision history

  • 2017-11-01: (C, mos) Länk till rätt uppgift om me-sidan (v2).
  • 2017-10-17: (B, mos) Uppdaterad inför ht17.
  • 2015-10-15: (A, mos) Första utgåvan för kursen.

Document source.