Kmom01: JavaScript och WebGL

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.

(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.

1. 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 Kursen Spelteknik för webben ger en kort introduktion till kursen och hjälper till med att bygga din portfölj. Titta på de videor som börjar på 0 och 1.

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

3. 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.

#Ö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 labben “JavaScript med variabler och inbyggda funktioner” Labben genereras i me/kmom01/lab1.

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

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

4. Gör uppgiften “Skapa en portfölj för kursen webgl”. Spara resultatet i me/portfolio.

#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