Labbmiljö för JavaScript i webbläsaren

Låt oss hitta en snabb väg in i en underbar värld av JavaScript. Vad behövs för utvecklingsmiljö? Var hittar jag informationen om hur språket fungerar? Hur kopplar jag ihop JavaScript i en webbsida? Finns det några verktyg som kan underlätta min utveckling?

Du vill alltså lära dig grunden i JavaScript för att komma bort från copy-pastandet av kod som du inte förstår, du vill ha grunderna som du kan stå på för att bli en bättre utvecklare som kan sitt JavaScript. Kanske är detta första gången du kommer i kontakt med ett programmeringsspråk.

#Installera webbläsare

Du behöver en webbläsare. Ett av de vanligaste sätten att köra JavaScript är i en webbläsare.

Se till att du installerar en webbläsare, ta Firefox, Chrome, Safari eller Internet Explorer. För min del så använder jag oftast Firefox så börja du med den också, så slipper vi att hantera inkompatibilitet mellan olika webbläsare, i alla fall till att börja med.

Hur hittar du webbläsaren Firefox? Sök. Eller googla. Det är bara att inse att de flesta av oss googlar när vi inte kan svara på en fråga, så det är lika bra att göra så. Googla “firefox download” och sen är du igång.

Ta även och installera utvecklingsverktyget Firebug, det är en addon till Firefox som hjälper dig att utveckla och felsöka din webbsidas komponenter av HTML, CSS och JavaScript-kod.

#Installera en texteditor

Du behöver en texteditor. Om du behöver hjälp att installera en så finns det i artikeln “Installera en texteditor, jEdit”.

Använd alltid UTF-8 som teckenkodning och Unix-stil på radbrytningar. Är du osäker på vad det betyder? Läs ovan artikel om jEdit. Artikeln innehåller även förslag på alternativa texteditorer.

#En terminal

Du behöver en terminal för att jobba med kursens material. Dessutom behöver du ett par program installerade som du kan köra via terminalen. Det är program som vi installerar via pakethantering.

Läs igenom följande artikel “Kom i gång med terminalen” och se till att bekanta dig med ett terminalprogram för din miljö. Innan du går vidare behöver du ett fungerande terminalprogram.

Du behöver ha följande paket installerade.

rsync git wget nano

Dubbelkolla att de är installerade genom att köra följande kommando i terminalen.

Cygwin på Windows:

apt-cyg install rsync git wget nano

Mac OS:

brew install git
brew install wget

Linux (debian):

apt-get install rsync git wget nano

Är du osäker på terminalen och Unix-kommandon så kan du jobba igenom artikeln “20 steg för att komma i gång med Unix och terminalen”.

#Kursmaterial från GitHub

I denna kursen jobbar du med exempelprogram och övningar som finns samlade i ett kursrepo, en kurskatalog. Öppna nu din terminal och hämta kursrepot för kursen javascript1.

Är dett första gången du gör detta så behöver du läsa igenom artikeln “Kurskatalogen, ett kursrepo på Github”.

Enligt artikeln kör du alltså följande kommandon för att ladda hem ditt kursrepo.

mkdir ~/dbwebb-kurser
cd ~/dbwebb-kurser
git clone https://github.com/mosbth/javascript1.git
cd javascript1
bin/dbwebb init
ls

Nu har du allt material i kursrepot framför dig.

Du kan även 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.

Se hur jag gjorde.

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

Det handlar alltså om HTML, CSS och JavaScript. Eller ja, kursen javascript1 handlar främst om programmering med JavaScript. Men, eftersom vi kör JavaScript i en webbmiljö och en webbläsare så behöver vi HTML och CSS för att göra något kul med JavaScript. Dessutom behöver vi ett utvecklarverktyg som hjälper oss, likt Firebug.

Det kan nu vara på sin plats att du går igenom grunderna i dessa delar. Här är fyra introduktions-artiklar, med hänvisning till extra resurser, som hjälper dig att komma igång.

• HTML - Gör din första sida med HTML5
• CSS - Styla din sida med CSS och en extern stylesheet
• Firebug - Kom i gång och installera Firebug som utvecklarverktyg
• JavaScript - Kom igång med JavaScript och skriv din första kod

Nu har du grunderna.

#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 bra struktur på en webbsida där sidans delar är separerade i olika filer.

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

<link rel="stylesheet" href="style/style.css">
<script type="text/javascript" src="js/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 många exempelprogram. 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.

cd ~/dbwebb-kurser/javascript1
cp -ri 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”.

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 blir det komplettering på inlämningen.

Så här gjorde jag för att anpassa sandboxen. Du kan använda editorn nano istället för vim som jag använder.

Så här blev resultatet.

Nåväl, jag kanske ska ändra tillbaka den gula färgen…

#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 felaktiga beteenden.

#Kodkvalitet med JSHint

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.

#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. Ett av de online-verktyg som kan hjälpa dig är JSFiddle.

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.

Med det sagt, hur använder du då JSFiddle för att till exempel lägga upp exemplet med sandboxen?

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 http://jsfiddle.net/mikael_roos/pK8cc/.

Glöm inte att korta och små fiddlar är enklare att hantera för den som hjälper dit. 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.

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

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.

Har du fler förslag eller tips så tar vi det i forumet som har en egen tråd för denna artikeln.

#Revision history