Grunderna i JavaScript
JavaScript används för att kunna styra och ändra datan som visas. I HTML och CSS så är ju all data redan bestämd men med JavaScript kan man manipulera denna data.
JavaScript är ett skriptspråk, vilket betyder att det är ett programmeringsspråk som inte behöver kompileras men som behöver ett speciellt verktyg för att kunna köras. I JavaScripts fall är detta verktyg en webbläsare. Språket är, semantiskt, väldigt likt de flesta andra programmeringsspråk i att det på många sätt liknar matematik. Många ord är samma både i matematiken och programmeringen och det är inte ovanligt att kod kan ha samma struktur som en matematiskt sats.
JavaScript skrivs inom HTML taggarna <script> och dessa taggar kan läggas i headern eller i bodyn. Av dessa två är det vanligast att det läggs i headern.
Ett annat vanligt sätt att hantera JavaScript är att skriva det i en separat fil som man sedan länkar in (ungefär som en CSS-fil). Detta görs så här:<script src="ScriptFil.js"></script>. "ScriptFil.js" är då den sökväg till JavaScript filen, som har formatet .js.
JavaScript, och de flesta andra programmerinsspråk, skrivs i Satser. En sats är en mängd kod som utför ett visst jobb. Ett program består, oftast, av många satser som tillsammans gör det man vill. I JavaScrip avslutas en sats med ";" eller skrivs inom "{" och "}". Exempel:
<script>
x=5;
if(x !=5){
document.write("X är inte 5!");
}
</script>
Det finns två stycken satser i denna lilla kodsnutt. Den första säger att x är 5 och den andra är mellan "{" och "}". Det finns ett till ";" inom den andra satsen och även om det skulle finnas flera inom den så körs de efter varandra. Satser som utför något utom väldigt enkla jobb är oftast inom vågiga hakparanteser.
I exemplet ovan så står det x=5. Här är x en variabel. En variabel är ett sätt att lagra en viss mängd data. Denna data kan vara av enkla typer (kallas primitiva datatyper) eller mer komplexa typer som har inbyggda funktioner. I JavaScript finns det ett reserverat ord man kan använda när man deklarerar en variabel och det ordet är var. Att deklarera en variabel innebär att man säger att den finns så att resten av programmet kan använda den. Det går att deklarera en variabel i JavaScript utan att använda var, som i exemplet ovan, men det är en dålig vana som gör att koden blir mer svårläst. När man deklarerar en variabel behöver man inte ge den ett värde direkt.
var x;
x = 5;
Det går utmärkt att skriva på detta sätt. Det går också att ge den ett värde direkt:
var x = 5;
Man kan sedan använda variabler i koden och i fallet med siffervärden brukar det vara väldigt lik matematiskt notation:
var x = 5;
var y = 1;
y = (x - 4) + y;
Detta ger "y" ett värde på 2 (y är (5-4)+1).
Man kan namnge en variabel till nästan vad man vill. Det finns ett antal reserverade ord men allt annat går bra. För att göra koden så läsbar som möjligt är det bäst att använda logiska namn för vad variabeln representerar. De brukar också namnges i en form som betyder att det är 1 värde. Det finns objekt som är till för att hantera mängder av data, som kallas datastrukturer, och dessa brukar namnges i pluralis (mer om detta senare).
Variabler i JavaScript är löst typade. Detta innebär att en variabel inte är deklarerad som en specifik datatyp. Många andra programmeringsspråk kräver att du anger vad för typ en variabel är när du deklarerar den. Detta behövs inte i JavaScript. Det medför att man måste vara lite mer försiktig när man hanterar variabler för att vissa operationer fungerar inte, eller kan ge oväntade resultat, om du blandar typer. Ett exempel är om du försöker addera siffran 5 till ett objekt som representerar ett HTML element. Vad som händer kan vara svårt att förutse.
En enkel datastruktur som används väldigt mycket är en Array. En array är ungefär som en lista med data. Den innehåller flera index där man kan komma åt denna data. En array skapas så här: var numbers = new Array();. Man kommer sedan åt de olika index genom att använda variabelnamnet med hakparanteser direkt efteråt och numret på index inom paranteserna. Så här numbers[0] = 5;. En arrays index börjar alltid från 0. I denna array finns det nu ett värde "5" på index 0. Det går sedan att använda operatorer som +, -, etc genom att använda samma sätt för att komma åt den: numbers[0]= numbers[0] + 5;. Detta gör att datan på index 0 nu är "10" istället.
När det kommer till operatorer finns det ganska många man kan använda. De brukar indelas i olika kategorier: Aritmetiska, Tilldels- och Jämförelseoperatorer.
Aritmetiska operatorer fungerar mer eller mindre precis som de gör i matematiken och ser i stort sett likadana ut. De vanligaste är + (addition), - (subtraktion), * (multiplikation), / (division) och % (modulo). Det finns också ett par sammansatta operatorer: ++ (som ökar med 1. Alltså samma sak som +1) och -- (som är samma fast subtraktion).
Jämförelseoperatorer är helt enkelt för att jämföra 2 saker mot varandra. De vanliga är: == (samma som), != (olika), < (mindre än), > (större än), =< (lika eller mindre än) och => (lika eller större än). Man skulle kunna tro att = skulle vara den uppenbara operatorn för att se om olika saker är likadana men den används i den sista kategorin.
Den sista kategorin är Tilldelningsoperatorer där grunden är =. Denna operator sätter något till det värde som står efter operatorn. Så x = 5; betyder då att x numer har värdet 5. Det finns flera operatorer som bygger ihop denna operator med aritmetiska operatorer för att göra båda på en gång. += är den som då adderar värdet med det som står efter operatorn. Detta är viktigt eftersom en vanlig aritmetisk operator inte ändrar en variabel, den returnerar bara ett värde av operationen. Så x + 5; gör inte att x variabeln ökar med 5 utan att denna operation returnerar summan. Hade man skrivit x = x + 5; så hade x ökat med 5. Nu kan man göra detta med den nämnda tilldelningsoperatorn += för att slippa återupprepa kod: x += 5;. Denna operation är exakt samma som den tidigare nämnda x = x + 5;. Det går att göra detta med alla aritmetiska operatorer: +=, -=, *=, /= och %=.
En Sträng, String på engelska, är en datatyp för att hantera text. Det är helt enkelt en serie tecken som sätts ihop till en enda variabel. I JavaScript fungerar strängar på mänga sätt som en uttökad array. Varje index är då en karaktär där index 0 är första karaktären o.s.v. Att deklarera en sträng görs precis som ett heltal: var text = "Hej du!". De tecken som signifierar en sträng är " som både början och avslut eller ' ("hej" och 'hej' är samma sak). JavaScript tillåter också att man skapar en sträng som ett objekt genom att skriva på detta sätt: var text = new String();. Detta är för att primitiva värden (alltså inte objekt) kan egentligen inte ha funktioner eller egenskaper. JavaScript kommer runt detta genom att tillfälligt överföra primitiva värder till objekt innan du använder funktioner eller egenskaper. Att deklarera en sträng som ett objekt kan medöra lite problem eftersom en sträng som är ett primitivt värde och en som är ett objekt inte går att jämföra med varandra (därför att de inte är samma datatyp).
Som nämnt så används citattecken för att ange att något är en sträng text = "hej";. Men om man då vill ha ett citattecken inne i själva texten? Då kan man göra på två olika sätt. Som, också, tidigare nämnt så kan man använda ' istället för ": text = 'du "ljög"';. Om man hade skrivit text = "du "ljög""; så hade strängen bara blivit "du" eftersom man avslutar och öppnar en till sträng mitt i (ungefär som med HTML taggar). Det finns också en escape character som gör att man kan göra detta: text = "du \"ljög\"";. Sätter man ett \ framför " eller ' så läses det som att det är en del av strängen istället. Detta kan också användas för att formatera texten. Ett exempel är om man inför \n i en sträng så kommer den göra ett radavbrott.
Strängar har flera behändiga funktioner som gör att de blir enklare att hantera. En väldigt enkel är att man kan addera två strängar: text = "hej " + "du";. Text har då värdet "hej du". Man kan komma åt enskilda tecknen på samma sätt som en array: text[0]. Detta blir då första tecknet (för att arrayer börjar från index 0), alltså "h". Man kan inte ändra dessa tecken utan bara läsa de.
Man kan också konvertera en sträng till en array (med strängar i varje index) genom att använda funktionen "split". Denna funktion tar ett strängvärde som den sedan delar en sträng på. Exempel:
var text = "hej. du. nu";
var temp = text.split(".");
Detta ger en array med värdena: "hej", "du" och "nu". Notera att "." tecknena har försvunnit.
Man kan också hitta indexvärde på något som finns i strängen med indexOf() funktionen. Denna returnerar ett nummervärde där den angivna strängen först förekommer, eller -1 om den inte förekommer.
var text = "hej du";
var temp = text.indexOf("j");
Variabeln temp har nu värdet 2 eftersom "j" förekommer på arrayens tredje post (och kom ihåg att indexering börjar från 0). Man kan också räkna bakifrån med lastIndexOf().
Man kan också försöka matcha delar av en sträng med funktionen match(). Denna funktion tar emot ett strängvärde och försöker hitta det i den strängen som anropar funktionen. Den returnerar NULL om den inte hittar något.
var text = "hej du";
var temp = text.match("du");
var temp2 = text.match("nu");
Variabeln temp har nu värdet "du" medans variablen temp2 har värdet NULL (eftersom "nu" inte finns i text variabeln).
Man kan ersätta en del av en sträng med funktionen replace(). Denna letar efter ett angivet värde (som match) och ersätter sedan det värdet med ett nytt, angivet värde.
text = "hej du";
var temp = text.replace("du", "ni");
Varaibeln temp har nu värdet "hej ni".
För att hantera gemener och versaler finns funktionerna toLowerCase() och toUpperCase(). Dessa är bra att kunna när man ska jämföra strängar eftersom de är "case sensitive", vilket betyder att "H" och "h" inte är samma tecken.
Det finns flera andra funktioner för strängar men de angivna ger ett bra inttryck på hur strängar fungerar, och de är också de som används oftast.
För att få in flödeshantering så används if satser och loopar. En if sats är ett sätt att se om ett uttryck är sant eller falskt. Uttrycket anges inom paranteser och det måste alltid kunna returnera ett true eller false svar. Om ett true returneras körs den kod som ligger i if satsen och om ett false returneras så skippas den koden.
var x = 5;
var temp = 3;
if(x + temp == 8){
temp = 0;
}
Här tittar if satsen på om x + temp blir 8. Om det är sant så ändras temp till 0.
En loop gör att man kan upprepa kod flera gånger tills ett argument är uppnått. De enklaste looparna kallas while loopar och ser ungefär ut som en if sats:
var x = 5;
var temp = 1;
while(x > 0){
x -= temp;
}
Här kommer koden köras tills argumentet x är större än 0 inte stämmer längre. Det är viktigt att se till att en loop faktiskt kan brytas annars kan man få en oändlig loop vilket gör att det kommer stå stilla och inte hända någonging tills man har stängt ner körningen.
En annan typ av loop är for loopen där man anger hur många iterationer den ska köra i argumentet:
var text = "Hej!";
for(var i = 0;i < text.length(); i++ ){
document.write(text[i] + "<br>");
}
Loopen har deklarerar en heltalsvariabel i i början på argumentet. Sedan anges när loopen ska avslutas, alltså så länge i är mindre än text.length() så ska den köras. Sedan anges hur i ska manipuleras efter varje iteration i loopen, i detta fall ökas den med 1. Vad denna kod gör är att den skriver ut varje tecken i strängen text ned ett radavbrott efter varje tecken. Denna typ av loop är väldigt värdefull, speciellt när man ska gå igenom olika datastrukturer.
Funktioner har flera gånger nämnts. En funktion är en bit kod som kan köras när man anropar denna funktion. Detta är väldigt värdefullt om man ska köra samma bit kod på flera ställen så att man inte behöver upprepa kod. En funktion deklareras på följande sätt:
function hello(){
alert("Hello!");
}
Man kan sedan anropa den i JavaScript genom att helt enkelt skriva hello(). Det går också att lägga anropet i ett HTML-element: <button onclick="hello()">Hi</button>. Om man då klickar på detta button element så körs funktionen.
Notera att nyckelordet "function" måste komma före det namn man ger funktionen.
Man kan också göra så att funktionen tar emot ett eller flera argument. Dessa anges inom paranteserna efter efter namnet. När man sedan anropar en funktion med argument måste man ange rätt antal argument annars får man ett exekveringsfel. Exempel:
function add(var1, var2){
alert(""+(var1+var2));
}
Sedan anropas det ungefär som vanligt genom: <button onclick="add(5,4)">Add</button>.
Reguljära uttryck, eller Regular Expressions (RegExp) på engelska, är objekt till för att beskriva mönster i text. Med dessa kan man hitta vissa ord i ett stycke och om man vill erstätta de med ett annat ord. Mycket av de funktioner som man gör på strängar kan ta emot ett RegExp objekt som argument istället för att bygga ett argument. Man kan också göra mycket kraftfullare argument genom RegExp. Säg att vi har en lång textsträng där vi vill hitta alla instanser av ett specifikt ord utan att behöva tänka på versaler och gemener:
var text = "En lada står vid en sjö. En ko kom upp till ladan brevid en sjö.";
var patt = /en/ig;
var result = txt.match(patt);
Variabeln result kommer då ha värdet "En,en,En" eftersom ordet en förekommer 3 gånger fast ena gången så är det skrivet som En. Ett RegExp är uppbyggt av ett mönster med en möjlig modifierare. Så i tidigare fallet så är /en mönstret och /ig modifierarna. Det finns 3 olika modifierare och man ska slå ihop dom. Dom är: "i" för att göra case-insensitive jämförelse (gemener och versaler spelar ingen roll), "g" för att göra en global matchning (den hittar då alla matchningar och inte bara den första) och "m" som gör en matchning för varje rad (första i varje rad med ^ eller sista i varje rad med $). I exemplet användes både "i" och "g". Hade det bara varit "g" så hade resultatet blivit: "en". Om det bara hade varit "i" så hade resultatet blivit: "En". När man använder "m" så försöker den matcha ett mönster mot det första eller sista som anges på varje rad (där nya rader anges med \n eller \r. Så med samma sträng som innan så vill i hitta alla "en" i början på en rad:
var text = "En lada står vid en sjö. En ko kom upp till ladan brevid en sjö.";
var patt = /^en/mgi;
var result = txt.match(patt);
Result blir då "En, En". Om man vill försöka matcha mot det sista i varjer rad gör man istället:
var text = "En lada står vid en sjö. En ko kom upp till ladan brevid en sjö.";
var patt = /sjö.$/mig;
var result = txt.match(patt);
Notera att ^ tecken är före mönstret och $ tecknet är efter.
Själva mönstret kan skrivas på väldigt många sätt. Det finns enkla som att hitta en siffra med \d eller kanske hitta varje ny rad med \n. Dessa kallas Metatecken. Man kan också leta efter flera alternativ genom hakparanteser: [abc]. Om man lägger till ^ så letar man efter alla tecken som inte är de angivna: [^abc]. Man kan leta efter en nummer sekvens med [1-5]. Man kan ange flera karaktär och hitta något av alternativen som anges med (x|y).
Det finns många fler sätt att bygga mönstret på och med alla dessa sätt kan man hitta vad man vill i text.