2010-08-11 15:20 #0 av: johan-ahlback

Det här är andra delen i javascript kursen. Jag kommer att gå igenom funktioner, loopar, events och felhantering. Först kommer jag att gå igenom lite popup rutor som vi kommer att använda oss av.

Popups.
Javascript erbjuder lite olika popups som vi kan använda i våra skript. de är:
alert - används för att ge information till användaren.
confirm - används för att fråga användaren saker. den innehåller båda en ok knapp och en avbryt knapp.
promt - används för inmatning. ett text fält och två knappar.

alert är inte svårt att använda. alert(sträng eller variabel) är allt som behövs.

confirm är lite mer jobb bakom. Eftersom man kan trycka ok eller avbryt krävs det att man behandlar det olika beroende på vad som valts. Men eftersom man får ett värde i form av true eller false så kan man använda en enkel if-sats:

<script type="text/javascript">
var fooBar = confirm("Om du Klickar på \"ok\" så godkänner du avtalet.\nKlickar du på avbryt så avböjer du.");
if (fooBar == true){
alert("du godkände avtalet");
}
else{
alert("du avböjde avtalet")
}
</script>

Promt kan kräva mer också men oftast handlar det om att omvandla strängen man får till ett tal. trycker man på avbryt får man ett värde som heter null så för att skapa en if sats som hanterar det skriver vi såhär:

<script type="text/javascript">
var fooBar = prompt("skriv in din ålder:", "0");

if (fooBar != null){
fooBar = parseInt(fooBar)
alert(fooBar);
}
else{
alert("du måste skriva in ett heltal")
}
</script>

Nu har vi skapat en enkel felhantering som säger att om inmatningen inte är ett tal eller om det är tomt eller man klickar på avbryt ska något annat hända. annars får man bara värdet NaN som är "not a number" eller null som inte är ett värde alls.

Nu till större saker

Funktioner
För att förhindra att ett skript körs så fort det laddas av webbläsaren så använder man funktioner. Man vill att vissa saker ska hända när ett event avfyras så att rätt sak sker i rätt tillfälle.. En funktions syntax ser ut såhär:

 

function funktionsNamn(){
   gör något....
}


funktioner ska ligga i head i html dokumentet.

För att kalla på funktionen så skriver man såhär:
funktionsNamn();


Anropet ska ligga där man vill ha det. Man ska även tänka på att javascript avbryter laddningen av en sida när det körs. om vi kör ett enkelt hello world script som ser ut såhär:

<script type="text/javascript">
function minFunktion(){
    alert("hello world");
}
</script>
<body>
<p>det här ligger innan skriptet</p>
<script type="text/javascript">
minFunktion();
</script>
<p>det här ligger efter</p>
</body>

så kommer vi se den första paragrafen och en alert ruta. när man klickar okej så kommer nästa paragraf att laddas. Funktioner startas inte om de inte anropas.

Livlsängd för variabler.
Livlängden för en global variabel är till scriptet slutas att köras. Det sker när sidan stängs. Men en variabel i funktion sparas bara så länge funktionen körs vilket betyder att om man vill spara värdet så måste man returnera det till en global variabel. det gör man med return:

var sum = minFunktion(tal1, tal2);
function minFunktion(tal1, tal2){
var summa = tal1 + tal2;
return summa;
}


Skicka med värde till en funktion
Ofta behöver man skicka med ett värde till en funktion det kan vara att man måste få med tidigare information eller att man använder sig av flera funktioner. Vi gjorde det i skriptet ovan. När man deklarerar en funktion anger man vad man ska skicka med. När man sedan anropar funktionen skriver man in de variabler som man vill skicka med.


Loopar

Nu till det som jag anser är en av de viktigaste sakerna i javascript, Loopar. Lopar kan användas till mycket och det finns flera olika loopar att använda. for-loop, while loop, do while loop och for in loop. de används till olika saker och har sina för och nackdelar.

För att visa de olika looparna så kommer jag skriva ett skript som skriver ut antal rader. Vi börjar med for-loopen. En for-loop ser ut så här:

for (var=start värde; var<= slutvärde; var = var + höjning av värdet.)
{
kod som ska köras.
}


för att skriva ut tio rader i dokumentet skriver man såhär:

for ( i = 1; i <= 10; i++){
        document.write("<p>det här är rad " + i + "</p>\n")
    }

vi börjar med att skriva att variabeln i är lika med ett. Sedan att så länge som i är mindre eller lika med tio ska loopen köras. sedan att varje gång loopen körs ska i adderas med ett. Jag använder även variabeln i för att skriva ut vilken rad det är.

for-loopen körs bara om påståendet är sant. så om påståendet är falskt körs inte loopen.

while
while-loopen repeteras så länge som påståendet är sant. En while-loop ser ut såhär:

var i=0;
while (i<=5)
  {
  document.write("The number is " + i);
  document.write("<br />");
  i++;
  }

 

Do...while
do...while är som en while loop men körs alltid en gång oavset vad while satsen säger:

do
{
kod som ska köras
}
while (var<=minVariabel);

for in

for in använd för arrayer. Det som är bra med den här är att man inte behöver veta hur många variabler en array innehåller. all man behöver skriva är:

 

for (x in minArray){
    document.write(minArray[x]);
}

då skriver den ut alla variabler i arrayern.

Det finns fler loopar att kunna men de får du lära dig själv på http://www.w3schools.com/js/default.asp

Events
Nu till det som javascript är till för, händelse hantering. man kör alltid javascript när ett event avfyras. även om det är när sidan laddats eller på ett musklick. Det finns många events och här är en lista från w3schools.com: http://www.w3schools.com/jsref/dom_obj_event.asp

För att javascriptet ska lyssna på ett event så måste man ange det. om vi till exempel ska ha en länk som avfyrar en alert ruta skriver vi såhär:

<a href="#" onclick="alert('du klickade på länken');">klicka här</a>

man kan också starta funktioner genom events. Jag vill även tillgägga att du absolut inte ska skriva sådär egentligen för du blandar du de olika lagren för en hemsida. html och javascript ska inte blandas på samma sida.

Try catch
När man skapar funktioner som krävs att sidan eller applikationen ska fungera så kommer allt att gå sönder om scriptet stöter på något oväntat fel. Då måste man ha felhantering inbyggt. För det ändamålet används try catch:

var txt="";
function message()
{
try
{
alert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}

först försöker den (try) att skriva en alert ruta men lyckas inte det så fångar scriptet det (catch) och skriver ut en ruta med felet (err);

Det var allt för den här gången. Nästa gång blir det mer om objekt och avancerade saker. I näst sista delen blir det DOM och i sista delen kommer det roligaste: JQUERY!

Nästa del:Javascript crash course Del 3

Läs också: Javascript crash course Del 1