Vad är javascript?

Javascript är ett script som används för att få en sida att uppföra sig på ett visst sätt. Jag vill betona att det är ett skript och inte ett kodspråk. Skillnaden är att kodspråk kompileras men skriptspråk tolkas direkt av webbläsaren.

Ett vanligt fel är att många tror att Java och javascript är samma sak. Men det är det absolut inte. javascript är ett löst typat språk medan java är hårt typat. Jag kommer att berätta fler skillnader senare och berätta vad det innebär att ett språk är löst typat.

De olika lagren.

Jag brukar dela upp en sida i flera lager. information (html) utseende (css) och javascript (beteende). Detta gör det enkelare att koda och underhålla. Ännu enklare blir det om man skiljer på de olika lagren med olika filer. då blir en sida lättare att underhålla.

Så då har man inga design regler i html-koden och inga css eller html koder i javascript dokumentet. Detta hjälper speciellt de som ska underhålla en sida de själva inte byggt.

Meningen med javascript.
Javascript är ett scriptspråk som används för att påverka eller skapa ett beteende på en hemsida. Man lägger till funktionalitet som varken html eller css kan eller ska lägga till. Man kan skapa interaktiva sidor eller applikationer som i realtid pratar och byter information med en server. Men det kommer vi inte gå in på så mycket här.

vad behöver du kunna innan du börjar med javascript?
Du behöver kunna html och css. Det kan vara bra om du har lite större kunskaper om css men kan du grunderna så räcker det.

Grunderna i javascript.

Ditt första skript.
För att kunna lära dig grunderna så ska vi skapa ditt första skript. Du behöver inte bry dig om hur det fungerar eller varför. Vi kommer kolla på det lite senare.

För att skapa ditt första skript måste du skapa ett nytt html dokument sen skriver du det här i body taggen:

Spara filen som html och öppna den sedan. Då får du upp en dialogruta som ser ut ungefär så här beroende på vilken webbläsare du använder:

Hur fungerar det?
Först säger vi till webbläsaren att det är ett skript. Det gör vi med script taggen. Script taggen har ett type attribut som berättar att det är javascript. Alert är en funktion som är innbyggt i alla webbläsare. Med den skapar vi en dialog ruta med en sträng med texten "Hello World!".

Escape Characters
Om du vill kunna ha radbrytningar eller tabbar i en dialogruta måste du använda Escape Characters. lite olika Escape Characters är:

* \n - ny rad
* \t - tabb
* \\ - "\"
* \' - " ' "
* \" - " " "

Variabler.
Javascript innehåller, som många andra kodspråk, olika variabler som berättar vad för slags data det är vi lagrar. Du kanske kommer ihåg algebra från skolan? Om du gör det så vet du att om x = 5 och y = 10 så blir x + y = 10. Så fungerar det i javascript också. I olika C-språk och liknande (hårt typade) måste man ange vad det är för variabler. De vanligaste är:

* integer - heltal mellan -2147483648 och 2147483647
* double - flytal (deciamaltal) mellan ±1.5 x 10-45 och ±3.4 x 1038
* string - text
* Boolean - Booleanska värden (true eller false)

Så för att skapa en variabel av typen integer (int) så måste man skriva såhär: int minVariabel = 23;

Men javascript är ett löst typat språk så i javascript behöver man inte ange vilken typ det är utan man behöver bara skriva: var minVariabel = 23;

För att skapa en sträng skriver man: var minVariabel = "Hello world!";

Använda variabler.
Nu ska vi testa att använda oss av variabler. Öppna ditt dokument med hello world skriptet. Vi skapar en variabel som innehåller en sträng och använder variabeln för att skriva ut strängen:

Istället för att skriva in en sträng med text i alert funktionen så har vi skapat en variabel som innehåller strängen. Vi hänvisar till den i alert funktionen genom att skriva variabel namnet.

Syntax
Nu kan vi kolla på javascript syntax och hur man namger variabler.

När vi skapade Hello world skriptet och använde en variabel så döpte vi variabeln till minVariabel. Då använde vi camelCase. Det betyder att man skriver ihop orden men början på varje ord skriver vi med Versaler. Det betyder att om vi vill ha en variabel som heter de röda bilarna så blir det deRödaBilarna.

Efter vi skapat vår variabel så markerar vi att raden är slut genom att skriva ut ett ";". I javascript behöver man inte göra det men det anses som ett bra sätt att skriva på. Sen tillkallade vi en funktion som heter alert som vi skickade variabeln till.

Jag kommer att gå igenom mer om syntax ju längre vi kommer och stöter på nya saker.

Operatorer
Det låter krångligt men det är inget att oroa sig över. Operatorer är till exempel "=" som ger en variabel ett värde eller "+" som adderar två variabler.
Det finns tå olika typer av operatorer. Aritmetiska och Tilldelningsoperatorer. aritmetiska används för att göra uträkningar och tilldelningsoperatorer används för att ge en variabel ett värde.

Här är en lista på de aritmetiska operatorerna med utgångspunkt att y = 5:

* + (addition) - x = y + 2. x = 7:
* - (subtraktion) - x = y - 2. x = 3.
* * (multiplikation) - x = y * 2. x = 10.
* / (division) - x = y / 2. x = 2.5.
* % (modulo*) - x = y % 2. x = 1.
* ++ (ökning/increment) x = ++y. x = 6.
* -- (minskning/Decrement) x = --y. x = 4.

*Modulo håller reda på hur mycket som är kvar av en division i heltal. Det används oftast för att ta reda på om det är ett jämnt eller udda tal genom att ta modulo 2. till exempel 5 % 2 = 1 men 6 % 2 = 0.

tilldelnings operatorer där y = 5 och x = 10:

* = - x = y. x = 5.
* += - x += y (x = x + y). x = 15.
* -= - x -= y (x = x - y). x = 5.
* *= - x *= y (x = x * y). x = 50.
* /= - x /= y (x = x / y). x = 2.
* %= - x %= y (x = x % y) x = 0.

Man kan även använda + för att sätta ihop strängar. Öppna ditt hello world dokument. Skapa två variabler som heter foo och bar. dela sedan upp hello world strängen i två delar och lägg in dem i en varsin variabel:

öppna sedan dokumentet i webbläsaren och se vad som händer. den skriver nu helloworld! istället för hello world!. Det beror på att den lägger ihop strängarna från "hello" "world" till "helloworld". det betyder att vi måste sätta in ett mellanslag i slutet av första variabeln.

Vän av ordning frågar sig nu: "vad händer om man lägger ihop en siffra med en sträng?". Regeln är att om du lägger ihop en siffra och en sträng så blir det en sträng. Vi kan se att 5 + 5 = 10 men 5 + "5" = 55.

Men det finns sätt att göra om en sträng till tal men det återkommer vi till senare.

Jämförelser.
Det finns även operatorer som jämför olika variabler och kollar likhet och skillnad. Det som returneras är ett booleanskt värde (true eller false). du kommer att lära dig mer om det när vi kommer till if…else. Här är en lista på de operatorerna där x = 5:

* == (är lika med) - x == 8 är false
* === (är exakt lika med) - x === 5 är true, x === "5" är false.
* != (är inte lika med) - x != 8 är true
* > (är större än) - x > 8 är false
* < (är mindre än) - x < 8 är true * >= (är större eller lika med) x >= 8 är false
* <= (är mindre eller lika med) x <= 8 är true.

logiska operatorer
det finns även logiska opperatorer som låter oss testa flera påståenden samtidigt. En liten lista där x = 6 och y = 3

* && (och) - x < 10 && y > 1 är true
* || (eller) - x == 5 || y == 5 är false
* ! (inte) - !(x == y) är true.

Olika sätt att jämföra satser.

När du skapade hello world så skrev du ett skript. Det var inget avancerat skript men likväl ett skript. Nu ska vi skapa lite mer avancerade skript. För att kunna skriva skript som är lite mer användbara måste vi lära os lite satser som hjälper oss att jämföra olika saker. Vi börjar med if…else (om…annars).

If…else
If…else används för att först ta reda på om ett påstående är sant eller falskt för att sedan gå vidare enligt resultatet. syntaxen ser ut såhär: if (jämförelse) händelse;

vi ska gå in mer på det genom att skapa ett skript som kollar hur gammal man är och sedan skrivs ett resultat ut beroende på åldern.

Börja med att skapa ett html dokument som heter age.html. i body skriver du det här:

Jag använder en funktion som heter dokument.write här iställer för alert. Jag rekomenderar inte att den används i vanliga fall för den skriver ut strängen direkt i dokumentet där man lägger skriptet. Men till det här går det bra.

Först har vi en variabel som innehåller åldern. Sedan har vi vår if-sats. i ren svenska står det så här:
om åldern är lägre än 18 skriv ut det här resultatet.
annars om åldern är högre eller lika med 18 och lägre än 40 skriv ut det här resultatet.
annars om åldern är högre eller lika med 40 skriv ut det här resultatet.

Egentligen kan man skipa det sista else if och bara ha else. Då ser det ut så här:

if ( age < 18 ){ document.write("

Du är fortfarande ung

"); } else if (age >= 18 && age < 40){
document.write("

du är fortfarande ung men börjar bli gammal

")
}
else{
document.write("

oj vad du är gammal!

")
}

Switch
Switch kan användas för att skriva ut ett resultat beroende på vad variabelns data. Om vi vill skriva ut vilken dag det är på sin sida kan man skriva såhär:

först skapar jag en instans (mer om det senare) av funktionen date. Sen hämtar jag vilken dag det är. Resultatet kommer i form av en integer där söndag är 0 och lördag är 6. Sen kollar switch satsen igenom vilken som stämmer. när den hittar det som stämmer så går den in där och gör det som står. Break avbryter så att den inte går igenom nästa också.

Om jag vill ska ett skript som bara skriver ut dagarna på helgen kan jag göra såhär:

Default gör att om om inget av case stämmer så följer skriptet det som står i default.

Uppgift.

Nu ska du få en uppgift av mig. du ska skapa ett skript som tar emot en parameter och sen skriver ut olika resultat beroende på vad inmatningen är. Då ska vi använda en funktion som heter prompt. den används så här:

var age = promt("Mata in din ålder", "1");

När man vill ha ett nummer och ska använda det numret sen så måste man göra om strängen som sparas i age till en integer. det gör vi genom att göra en parseInt:

age = parseInt(age);

Skapa det här scriptet och länka till det i kommentarerna om du vill. Du får en stjärna om du gör nått roligt med switch också.

Det var allt för den här gången.
Nästa gång kommer jag gå igenom funktioner, loopar, events och felhantering.

Nästa del: Javascript crash course Del 2