Kom i gång med HTML, CSS, JavaScript och Canvas

Kom igång och rita ut saker på en HTML canvas med hjälp av JavaScript (och CSS). Vi tittar på validering av din kod och vi ser var du hittar information som manualer och specifikationer.

Du får en bas att stå på, ett första program i JavaScript, att bygga vidare på. Du får också se hur du bör göra för att få hjälp av andra genom att dela ut din kod och göra en fiddle eller en codepen.

Till att börja med så håller vi oss till ett kontext av 2D.

Så här kan en sandbox se ut.

#Förutsättning

Artikeln är en del av kursen webgl och förutsätter att du har en labbmiljö som motsvarar “Introduktion till labbmiljö i webgl”.

#Kursmaterial från GitHub

I denna kursen jobbar du med exempelprogram och övningar som finns samlade i ett kursrepo, en kurskatalog. Du bör alltså ha ditt kursrepo framför dig nu.

Du kan se allt innehåll i det så kallade repositoryt via webbplatens GitHub, det innehåller alla övningar, exempelprogram och tips och trix som finns i det som du nu laddat ned. Där finns även en struktur som du skall följa när du gör dina inlämningar, det är det som kallas din me-sida, eller me-katalog. Men, vi tar mer om det när du väl gör uppgifterna.

#En sandbox för exempelprogram

En sandbox är en avskild testmiljö. Låt oss, som en övning, skapa en sandbox som du kan använda för dina testprogram i kursen.

Kika i kursmaterialet under example/sandbox. Där hittar du en struktur på en webbsida där sidans delar är separerade i olika filer.

$ tree sandbox/
sandbox/                                  
├── index.html                            
├── main.js                               
└── style.css                             
                                          
0 directories, 3 files                    

Här är en förklaring av de olika filerna.

Studera filerna och se hur de länkas samman i index.html via följande två rader.

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="main.js"></script>

Var sak på sin plats är viktigt, det blir lättare att underhålla koden i längden på det viset.

Koden för sandbox-exemplet finns även att studera, och provköra, i en kopia av repot på dbwebb.se.

#En egen anpassad sandbox

Under kursens gång kommer du göra en del exempelprogram. Ibland för att du ombeds att göra det, men kanske ilka ofta för att du själv vill testa något. Då är det bra att ha några filer att utgå ifrån. Ta nu och kopiera sandbox-exemplet och anpassa det till ditt eget syfte. Så har du en egen mall för dina exempelprogram.

Gå till terminalen och gör följande kommandon.

# Flytta till kurskatalogen
cp -i example/sandbox/* me/kmom01/sandbox
cd me/kmom01/sandbox
ls

Nu kan du gå in och ändra informationen i filerna för att anpassa dem och göra dem “dina”, din egen sandbox att utgå ifrån.

Det är viktigt att du lägger koden på rätt plats. Allt som du lägger under katalogen me/kmom01 kommer att vara en del av din redovisning av kursmoment 01. Det förväntas att du skall ha en katalog som heter me/kmom01/sandbox, annars riskerar du komplettering på inlämningen.

#HTML5 canvas

HTML5 elementet <canvas> erbjuder ett element att rita grafik via JavaScript kod. Man lägger canvas-elementet i HTML-sidan och styr vad som ritas ut via JavaScript.

Sandboxen innehåller ett exempel som ser ut så här.

Först i HTML-koden.

<canvas id="canvas1" width="800" height="500"></canvas>

Sedan i JavaScript-koden.

var canvas, ct;

// Get the HTML element to work with
canvas = document.getElementById("canvas1");

// Create a 2D context on the canvas
ct = canvas.getContext("2d");

Koden ovan skapar två variablar varav den ena kopplas till HTML-elementet och den andra skapar ett 2D-context som går att använda för att rita ut saker på en canvas.

Ta en sväng till MDN och kika på vad api:et för HTML Canvas erbjuder. Där kan du se kodkonstruktioner som du kan testa själv.

#Validera HTML och CSS

W3C är organisationen som standardiserar webben och flera av de tekniker som vi kommer använda. De har validatorer som hjälper oss skriva bra kod.

Låt oss testa om den koden vi har sett hittills kommer igenom validatorerna för HTML och CSS.

I artikeln om “Gör din första sida med HTML5” så visar jag i en video hur jag använder W3C validator för HTML.

Här är videon.

Ta nu din html-fil i ditt sandbox-exempel och validera den. Rätta till felen om det finns några.

I artikeln om “Styla din sida med CSS och en extern stylesheet” så visar jag i en video hur jag använder W3C validator för CSS.

Här är videon.

Ta nu din stylesheet i ditt sandbox-exempel och validera den. Rätta till felen om det finns några.

Kom alltid ihåg att validera dina sidor. Det kommer att spara dig en del tid i felsökning. En sida som inte validerar kan ge upphov till många konstiga och felaktiga beteenden.

#Kodkvalitet med JSHint

Från och med hösten 2017 ersätts jshint av eslint då utveckling har upphört på jshint till förmån för eslint. Webbplatsen för jshint fungerar dock fortfarande bra som exempel.

Kodkvalitet handlar om att skriva bra kod. Kod som är läsbar och enkel att underhålla, vidarutveckla och felsöka i. Till många programmeringsspråk finns ett verktyg som kallas Lint. Verktyget varnar för potentiellt dåliga kodkonstruktioner och det är tips som vi gärna lyssnar till.

I JavaScript finns verktyget JSLint och en utveckling av det som heter JSHint. I denna kursen tänkta jag att vi använder JSHint.

I video-serien “Kom igång med JavaScript och skriv din första kod” finns med ett avsnitt när jag använder JSHint.

Kör alltid igenom din JavaScript-kod igenom JSHint. Det kan spara dig en hel de felsökning. JSHint hjälper dig att hitta potentiella problem i din kod.

Använd JSHint för att kolla att ditt sandbox-exempel går igenom utan felmeddelande och varningar.

I kurserna använder vi en dbwebb-kodstandard som är beskriven på npm javascript-code-style. Du kan diskutera kodstandarden i forumet.

#Kodvalidering med dbwebb validate

När du jobbar med kursmaterialet så har du kommandot dbwebb som utför viss validering åt dig. Du kan testa att validera, och publicera, din sandbox på följande vis.

# Ställ dig någonstans i kurskatalogen
dbwebb validate sandbox
dbwebb publish sandbox

Rätta de eventuella fel som dyker upp.

När du publicerar så läggs din kod upp på studentservern och du får en länk som du kan köra mot den publika student-webbservern. Om du hamnar i bekymmer och behöver hjälp så är det en bra länk att dela med sig av.

#Hjälp mig online

Som ny programmerare i JavaScript kommer du att behöva hjälp. Du kommer behöva hjälp av andra för att felsöka i ditt program. Det finns flera online-verktyg som kan underlätta detta.

Det handlar om att göra det enkelt för den som skall hjälpa dig. Genom att lägga upp ett minimalt exempel på det som är ditt problem så har du enklast att få hjälp. Ett stort exempelprogram är alltid svårt att sätta sig in i och det är svårare att få hjälp med felsökningen. Försök därför alltid avgränsa dina testprogram. Du får snabbare och bättre svar och fler som är villiga att hjälpa dig.

Ta det som dagens tips. Det är så det funkar.

#JSFiddle

Ett av de online-verktyg som kan hjälpa dig är JSFiddle.

Låt se hur det ser ut när jag lägger upp ett exempel i JSFiddle. Så kan du själv testa att lägga upp din sandbox därefter.

Här är mitt färdiga exempel som du kan öppna i JSFiddle och testa att ändra.

Länken till exemplet är https://jsfiddle.net/mikael_roos/pK8cc/.

Glöm inte att korta och små fiddlar är enklare att hantera för den som hjälper dig. Göra bara fiddlarna så att de visar på problemet. Ta bort all annan kod. Det exemplet som jag visar är alltså i största laget. Om jag till exempel hade problem med en confirm-popup så skulle jag bara visat den delen av koden.

#CodePen

CodePen är ett liknande verktyg där du kan göra samma sak som i JSFiddle. Här ser du samma exempelkod i en CodePen.

See the Pen Hello World by Mikael Roos (@mosbth) on CodePen.

Du kan se ovan codepen direkt på Codepens webbplats.

Att jobba i JSFiddle eller CodePen kan vara en smaksak. För min del så väljer jag att jobba i båda verktygen.

#CodeShare

En annan resurs som kan udnerlätta felsökning via kollegor, är att dela med sig av koden via en codeshare via webbtjänsten Codeshare. När du väl laddat upp din kod så kan du ta hjälp av kollegor som kan se koden i sitt sammanhang och de kan dessutom redigera koden och förslå förändringar.

Tipset är att skaffa sig ett konto på Codeshare.

#Resurser och manualer

Här är ett allmänt stycke om de online-resurser med dokumentation, som du främst kommer att använda när du utvecklar JavaScript (i denna kursen).

#Mozilla Developers Network, MDN

Mozilla Developers Network är en bra resurs för JavaScript-programmerare. Där finns manualer, guider och tutorials för många tekniker som vi behöver känna till.

Till att börja med finns det en översikt av resurserna på “Web technology for developers”. Därifrån kan du se resurser för HTML, CSS, JavaScript och DOM. Det är de huvudsakliga teknikerna som vi kommer att jobba med.

Källan till mycket av vår kunskap om JavaScript kommer att vara referensmanualen, JavaScript Reference. Se till att du känner till dess uppbyggnad och hittar i den. När du blir varm i kläderna är det dit du kommer att återvända för korrekt information.

Att googla går bra, problemet är att kvaliteten varierar och man behöver ofta säkerställa att svaret är det korrekta. Det är inte alltid så lätt att bedöma det. Man lär sig efter hand. Men facit finns ofta i referensmanualen, så glöm inte bort att titta där när du är osäker.

Bli kompis med referensmanualen.

En annan resurs som är bra och ofta ger ledtrådar till korrekta svar är StackOverflow. Är du inte bekant med StackOverflow så kan du bekanta dig med webbplatsen genom att studera de frågor som är taggade med JavaScript.

#Can I Use

Can I Use är en webbplats som har koll på kompabilitet mellan olika webbläsare. Eller rättare sagt, den har koll på vilka features som olika webbläsare stödjer.

Här kan du till exempel se vilka versioner av de olika webbläsarna som stödjer att visa innehållet i full screen.

Se till att du bekantar dig med Can I Use och återvänd hit om du får problem med kompabilitet. Can I Use kan vara ett bra komplement till referensmanualen på MDN.

#Avslutningsvis

Du har nu grunderna som krävs för att sätta igång och utveckla program i webbmiljö med JavaScript.

Om du stöter på problem så kan du alltid fråga direkt i kursens forum.

#Revision history