Programmera med Javascript

Alla de stora webbläsarna kan köra program skrivna i Javascript.
Firefox, Opera, Chrome, Internet explorer och Safari.

Dokumentation
Du kan lära dig Javascript här: http://www.w3schools.com/js/default.asp
Skapa en textfil med lite Javascript och kör den i din webbläsare. Du behöver till en början ingen webbserver.

En bra referenshandbok för Javascript hittar du hos Mozilla, de som gör webbläsaren Firefox.

Felsöka Javascript med Firefox och tillägget FireBug
Det går att se vad som händer i ett Javascript under körning.

Till webbläsaren Firefox finns ett tillägg som heter Firebug.
Starta Firefox, menyn ”Verktyg”, ”Tillägg” och sök efter ”Firebug”, installera tillägget.
På hemsidan för Firebug: http://getfirebug.com/ hittar du introduktioner hur firebug fungerar.
Högerklicka på din webbsida och välj att felsöka med Firebug.
Nu kan du sätta brytpunkter i Javascriptkoden och stega kod, se variabler och även se callstacken.

Undvika fel
FireBug är mycket praktisk men innan man kan använda den får det inte finnas allvarliga fel i din kod för då startar den inte över huvud taget.
Du kan kontrollera din kod med jslint.com och jshint.com. jshint är sprungen ur jslint.
Kopiera din kod och tejpa in den på någon av de ovanstående sidorna.
Använder du jshint: Markera koden som syns där och tejpa in din egen kod. Analysen börjar omedelbart och du får direkt en lista med potentiella fel.

use strict
Ett av tipsen du får är att använda ”use strict” på första raden i varje funktion. Det är ett viktigt tips.

Undvik att stödja för mycketDet finns mängder med webbläsare och mängder med versioner av dem. Du kan omöjligt lägga ned tid för att testa alla.
En generell regel som jag följer är att enbart stödja de två senaste versionerna av Internet Explorer samt senaste Firefox och senaste Chrome.
Sedan har vi de två senaste iPhone/iPad och de två senaste Android.

Använd ett ramverkjQuery och jQuery mobile är två ramverk som är vältestade och ger dig support för mängder av webbläsare. Använder du deras funktioner så är chansen betydligt större att din kod fungerar i nästan alla webbläsare.

loggning till alert och till console
Du kan alltid använda alert för att få upp ett meddelande på skärmen. Din kod pausas tills du trycker på OK.

Om du vill logga tyst utan att få ett meddelande kan du använda console.I Firebug finns en flik för console-meddelanden. Använd till exempel console.log

Logga till servern
Det finns även en teknik där du loggar till servern med hjälp av AJAX. Då kan du fortsätta din kod utan att sidan laddas om.

        var $parameters, $url, xmlhttp = new XMLHttpRequest(), $row = 'The message I want to log';
        $parameters = "DataText=" + encodeURIComponent($in);
        $url = "log.php?message=" + encodeURIComponent($row);
        xmlhttp.open('POST', $url, true); // true=async
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.setRequestHeader("Content-length", $parameters.length);
        xmlhttp.setRequestHeader("Connection", "close");
        xmlhttp.send($parameters);

På servern har du sedan log.php som tar emot ditt meddelande. Läser av POST och GET. Kanske lägger till meddelandet i en loggfil.

Böcker
Det finns även bra böcker i ämnet. Rekommenderar boken Maintainable javascript. Går att köpa på Adlibris.
Du får tips på alla nivåer hur du skriver kod som är robust och fungerar, är enkel att underhålla och felsöka.

PHP StormOm du programmerar mycket PHP kanske du precis som jag använder PHP Storm. Den har även funktioner för Javascript och du kan ställa in att den ska kolla koden med jshint eller jslint
Du behöver inte göra någonting. Det är inbyggt i PHP Storm. Sök bara i inställningarna i PHP Storm och aktivera det.

Installera jshint och jslint lokalt
Om du installerar jshint och jslint lokalt på din Ubuntu-maskin då kan du snabbt testa din kod från terminalen:
jshint minjsfil.js , eller jslint minjsfil.js

Du installerar det så här i Ubuntu 13.10

installera nodejs (http://nodejs.org/)

sudo apt-get install nodejs

kontrollera att du nu har ”nodejs” i /usr/bin

cd /usr/bin
ls -la node*

Kontrolera att filen ”node” inte finns och skriv sedan

sudo ln -s nodejs node
ls -la node*

Nu ska du se den nya symboliska länken (genvägen) från node till nodejs.

installera npm (node package manager)

sudo apt-get install npm

Installera jslint och jshint globalt:

sudo npm install -g jslint
sudo npm install -g jshint

Nu är det klart.