Torgny > Meny Javascriptövn. > Javascriptövningar 5

Javascriptövningar 5

Funktioner, eval, if

1
Följande funktion aktiverar en alert-box: 
function svarsruta(){
	alert("Du klickade på knapp 1");
}
Skapa en sida med en knapp enligt bilden. Lägg till ett onclick-attribut i html-koden så att funktionen svarsruta() aktiveras när knappen klickas.

Ex 1

(Glöm inte att du utöver input-tagen måste ha en form-tag för att knappen skall synas i Netscape.)
2
Ändra funktionen svarsruta på följande sätt, så att den kan ta emot argument. Som Du ser skrivs innehållet i argumentet ut i alert-boxen. 
function svarsruta(inskrivenText){
	alert("Du klickade på knapp" + inskrivenText);
}


Skapa en sida med två knappar enligt bilden:

Ex 2

En klickning på knapp 1 skall generera ett funktionsanrop av svarsruta(). Som argument skall textsträngen "ett" skickas. Resultatet skall bli följande alert-box. En klickning på knapp 2 skall naturligtvis skicka med strången "två" som argument.

Ex 2
3
I denna övning får du en förlaga enligt koden och bilden nedan. Vid klickning på knappen byts minityravbildningen av ett skivomslag ut. Lägg märke till att det inte går att byta tillbaka till den ursprungliga bilden. Testa sidan här. 

<html>
<head>
   <title>Exempel Javascript 5.2</title>
   <script>
   function bytBild(){
      vinylomslag.src = "bilder/ym2.jpg";
      vinylomslag.alt = "Bach: Concertos for 1 and 2 violins";
   }
   </script>
</head>

<body>
<img src="bilder/ym1.jpg" width="100" height="100" 
     border="0" alt="Ravel: Tzigane" name="vinylomslag">
<form>
<input type=button value="Byt bild" onclick="bytBild();">
</form>
</body>
</html>
Ex 3

Uppgift: Ändra sidans funktionalitet så att bilden byts vid varje klickning om användaren klickar många gånger på knappen. Även bildens alt-text skall ändras när bilden byts ut.
Tips: Du kan lösa detta genom att placera en if-konstruktion i funktionen. På något sätt måste det logiska uttrycket i if-satsen inledning testa vilken bild som visas för tillfället. Ett sätt är att skapa en variabel vilken har olika värden beroende på vilken bild som visas. Värdet på denna variabel kan du ändra i samband med att du ändrar egenskapen visabild.src. Vid inladdningen av dokumentet måste variabeln deklareras och ges det värde som Du som programmerare bestämt skall betyda att bild 1 (ym1.jpg) visas.)
4
Låt en webbsida be användaren skriva in ett tal med hjälp av en prompt-sats.

Ex 4

Därefter skall en multiplikationstabell skrivas ut på webbsidan:

Ex 4

Antag att resultatet av prompt-funktionen lagras i variabeln tal och att dokumentets body-del innehåller nedanstående kod. Din uppgift är att skriva funktionen multiplikationstabell() så att den utifrån de två inmatade argumenten skriver ut den text som visas på sidan. 
<script>
	multiplikationstabell(1,tal);
	multiplikationstabell(2,tal);
	multiplikationstabell(3,tal);
	multiplikationstabell(4,tal);
	multiplikationstabell(5,tal);
	multiplikationstabell(6,tal);
	multiplikationstabell(7,tal);
	multiplikationstabell(8,tal);
	multiplikationstabell(9,tal);
	multiplikationstabell(10,tal);
</script>
5
I denna övning skall du skriva en funktion som skall heta inkl_moms()och som beräknar ett pris med momspålägg. Lägg en skripttag i dokument-huvudet och låt användaren mata in ett pris i en promptruta. Glöm inte att omvandla det inmatade priset till ett tal. Funktionen inkl_moms() lägger du också i huvudets skripttag. Utskriften i dokumentet skall skötas av nedanstående skript. 
<script>
   document.write("Exklusive moms: " + pris + "<br>");
   document.write("Inklusive moms: " + inkl_moms(pris));
</script>
Tips: I denna övning skrivs ingenting ut av själva funktionen. I stället returneras ett värde, vilket skrivs ut av en document.write-sats i det skript som kallar på funktionen.
6
Här skall du använda eval-funktionen. Låt användaren mata in ett uttryck som innehåller tal och matematiska operatorer (t ex "4 + 2 * 3" eller "264/8"). Skriver sedan ut det inmatade uttrycket följt av ett likhetstecken och uttrycket i en eval-funktion. En inmatning av uttrycket 2 + 2 skall ge följande utskrift. Observera att felaktiga inmatningar, exempelvis inmatningar av bokstäver kommer att få skriptet att krascha.

Ex 6
7
1 2 3

Konkatenering (sammanfogning) av strängar kan användas på ett finurligt sätt för att styra bildväxlingar på en webbsida. I följande övning förutsätts det att bildfilerna har identiska namn så när som på en siffra. Den kod du ser nedan har ett fel: när du klickat på knappen för tredje gången kommer scriptet att vilja visa en bild som heter 4.gif. Denna bild finns inte, och därför visas i stället en kryssbild. Förbättra skriptet med en if-sats som ser till att variabeln i aldrig får värdet 4. I stället skall den ändras till 1 när den varit i tur och ordning 1, 2 respektive 3. Testa den felaktiga koden här. 
<html>
<head>
   <title>Exempel Javascript 5.1</title>
   <script>
   var i = 1;
   function byt(){
      i++;
      document.bilden.src = "bilder/" + i + ".gif";
   }
   </script>
</head>

<body>
<img src="bilder/1.gif" border="0" alt="" name=bilden><p>
<form><input type=button value="Byt bild" onclick="byt();">
</form>
</body>
</html>
8
Skivomslag 1 Skivomslag 2 Skivomslag 3 Skivomslag 4 Skivomslag 5 Skivomslag 6 Skivomslag 7

Utgå från skriptet i föregående exempel men ändra det så att användaren kan bläddra framlänges och baklänges bland ovanstående avbildade skivomslag. Utforma skriptet så att ingen bildväxling sker när första respektive sista bilden är nådd. Användaren skall alltså inte behöva bläddra i ring. Sidan med knapparna skall se ut så här:

Ex 8

Tips: Anropa funktionen med argument som talar om dels hur många bilder som ingår i bildsviten och dels i vilken riktning bläddringen skall ske. Det skulle t ex kunna se ut så här: bytBild("framåt",7). I funktionen bygger du sedan upp en if-konstruktion där du låter olika saker ske beroende av värdena på de olika argumenten och styrvariabeln i (om du hållit fast vid variabelnamnet i vilket introducerades i uppgift 7).
9
I föregående exempel får användaren ingen feedback som talar om att han till slutet eller början av bildraden. Nu skall du försöka åstadkomma en sådan feedback genom att använda bilder föreställande pilar. När användaren klickat sig fram till slutet av bildraden skall pilen som pekar i den aktuella riktningen blekna, dvs bilden av en röd pil skall bytas mot en grå dito.

Skärmdumparna nedan avbildar bildradens början, mitt respektive slut:

Början Mitten Slutet

Pilbilder: pilv pilv röd pilh röd pilh