Med HTML och CSS kan vi skapa innehåll och styra över utseendet på våra webbsidor. Vi kan dock inte skapa nya funktioner utöver de som finns inbyggda i webbläsaren. För att kunna göra det behöver vi ett programmeringsspråk. Det viktigaste programmeringsspråket på webben är JavaScript, eller ECMAScript.
JavaScript är, som namnet anger, ett skriptspråk. Detta innebär att det är frågan om ett relativt förenklat programmeringsspråk ägnat åt att tillföra enstaka nya funktioner genom små programsnuttar, skript.
Ett skript är inte ett ett självständigt program, utan används för att tillföra funktionalitet till något annat program som redan existerar, i detta fall webbsidor i en webbläsare. JavaScript, liksom andra skriptspråk, behöver inte som många andra programmeringsspråk kompileras till binärkod för att kunna köras utan består liksom HTML och CSS av enkel text. Att koden består av vanlig, enkel text är det normala för skriptspråk och innebär att enkelt att läsa, kopiera och återanvända kod. Människoläslig och klipp-och-klistravänlig.
JavaScript innehåller en mängd färdiga funktioner som man kan utnyttja och är dessutom särskilt anpassat för att arbeta mot en standardiserad modell för webbsidans struktur, det som kallas för DOM (the Document Object Model, dokumentobjektmodellen). Det finns alltså många olika färdiga pusselbitar att kombinera.
Hur det fungerar
JavaScript kan, på liknande sätt som CSS, antingen infogas direkt i ett HTML-dokument eller bestå av an separat textfil som länkas till i HTML-dokumentet.
JavaScriptkoden hämtas till och körs i webbläsaren på användarens egen dator (klienten). Alltså innebär inte JavaScript någon särskild belastning på servern som levererar sajten. Däremot kan det betyda att omfattande eller illa skriven JavaScript i kombination med en långsam dator kan leda till långsamma och tröga webbsidor.
JavaScript eller ECMAScript?
Det vanligaste namnet man stöter på för skriptspråket är JavaScript, men ibland ser man också namnet ECMAScript. Den enklaste förklaringen till detta är att ECMAScript är en standardiserad variant av JavaScript.
ECMAScript skapas alltså utifrån JavaScript, men innehåller inte nödvändigtvis allt det som JavaScript innehåller. Dels för att JavaScript utvecklas först, innan det förs in i Ecmastandarden och dels för att ECMAScript ska vara så kompatibelt som möjligt.
Man kan alltså se ECMAScript som en standardiserad delmängd av JavaScript, eller JavaScript som en dialekt av ECMAScript. Det finns också andra skriptspråk som är dialekter av ECMAScript och alltså nära släkt med JavaScript. Microsofts JScript och Adobes ActionScript (används i Flash och Air) är två exempel.
Skillnadena mellan Java- och ECMASript är i de alla flesta fall obefintliga i praktiken.
En sak är säker, hela ECMASCript finns i JavaScript, som dock kan innehålla ett eller annat som (ännu) inte finns i ECMAScript.
JavaScripts historia
Första versionen av JavaScript släpptes i slutet av 1995 av Netscape, tillverkaren av webbläsaren Netscape Navigator. Skriptspråket hette i sin första version LiveScript, men namnet ändrades snart till JavaScript i samband med Netscapes stöd för programmeringsspråket Java. Java och JavaScript har dock ingenting annat än namnet gemensamt, namnet JavaScript var en ren marknadsföringsgrej.
Netscapes konkurrent Microsoft skapade snart sin egen, konkurrerande form av JavaScript, som de av varumärkesskäl döpte till JScript, något som ledde till att de två dominerande webbläsarna använde var sina, delvis inkompatibla, skriptspråk.
Den uppkommna situationen löstes genom att Netscape lämnade in JavaScript till standardiseringsorganet Ecma International för standardisering 1996.
Efter standardisering som ECMA-262 1997 är både JavaScript och JScript att betrakta som dialekter av ECMAScript.
Idag utvecklas JavaScript av Mozilla Foundation, Netscapes arvtagare.
Precis som alla andra språk, både programmeringsspråk och vanliga språk, som svenska eller urdu, har JavaScipt en bestämd syntax, regler och konventioner för hur man formulerar sig och skriver för att det ska bli begripligt.
Viktiga begrepp som vi kommer titta på är:
satser (statements)
funktioner
variabler (och konstanter)
datatyper
arrays
operatorer
objekt
villkorade satser ("if-satser")
loopar
Om du har någon tidigare erfarenhet av programmering kommer du säkert känna igen en hel del. En del saker kommer du också känna igen från arbetet med HTML och CSS, som användandet av semikolon som skiljetecken.
Två sätt att lägga till JavaScript
Liksom med CSS ksn du välja mellan två olika sätt att lägga till JavaScript/ECMAScript till dina HTML-dokument. Antingen kan du infoga skriptet direkt i HTML eller länka till ett externt skript.
Inbäddade skript
För att bädda in ett skript i HTML-koden använder du dig av HTML-elementet (taggen) <script>. Mellan <script> och </script> skriver du sedan in ditt skript.
<script type="text/JavaScript">
function minFunktion()
{
alert ("Jag är en alertruta!");
}
</script>
Exempel
Funktionen:
<script type="text/JavaScript">
function minFunktion()
{
alert ("Jag är en alertruta!");
}
</script>
Scriptet ovan skapar funktionen minFunktion, som öppnar en popupruta med texten "Jag är en alertruta" när den anropas någonstans i dokumentet.
<script>-taggen bör du placera i dokumentets huvud, alltså mellan <head> och </head>. Den går visserligen att placera på andra ställen i dokumentet, men det rekommenderas inte.
Länkade skript
Att bädda in skript enligt ovan är enkelt, men innebär, precis som med inbäddad CSS, att du får en mer krånglig och svårunderhållen kod. Det innebär också att du måste skriva in skriptet i alla HTML-dokument där de ska tillämpas.
Enklare och bättre kan då vara att länka till en extern skriptfil, där du helte enkelt skriver in skriptet i en textfil som du ger filändelsen .js.
För att länka till en extern .js-fil använder du samma <script>-tagg som ovan.
Du använder alltså attributet src för att länka till skript-filen, i det här fallet heter filen skript.js och ligger i samma mapp som HTML-dokumentet (för att fräscha upp minnet om hur sökvägar funkar kan du läsa på om URLar). Notera att du måste ha med sluttaggen </script> även om det inte står något mellan <script> och </script>.
Det går bra att ha flera <script>-taggar och länka till flera skriptfiler, det är heller inga problem att kombinera lokala, inbäddade skript och länkade.