Javascriptövningar 8

getElementById, innerHTML, CSS

1

Gör en kalkylator enligt figuren

Tips:

Du kan komma åt inmatningsfälten på ett enkelt sätt om du ger dem id-attribut. Sätt t ex id="inTal1" på översta inmatningsfältet. Då kommer du åt innehållet med:

tal1 = document.getElementById("inTal1").value;

Skriv en funktion som tar hand om alla uträkningar, och kalla på den med varierande argument från de olika knapparna.

2

Gör en variant på kalkylatorn där resultatet skrivs ut som html-kod som på illustrationen nedan.

Tips:

Lägg in entom div-tag där resultatet skall visas och sätt ett id-attribut på div-tagen. Du kan sedan komma åt div-tagens egenskaper med hjälp av get ElementById(). För att manipulera div-tagens innehåll kan du använda metoden innerHTML().

3

I exemplet nedan skall det vara möjligt att manipulera CSS-egenskaperna med hjälp av menyn Skin.

Css-klasserna för de två varianter som visas ovan ser ut så här:

.Lila {
   border:4px dashed #CC0099;
   color:#FF9900;
   padding:10px;
   width:200px;
   font-family:Geneva, Arial, Helvetica, sans-serif;
   font-size:18px;
   background-color:#FFCC00;
}
.Spring {
   border:4px dashed #00CC00;
   color:#996600;
   padding:10px;
   width:200px;
   font-family:Geneva, Arial, Helvetica, sans-serif;
   font-size:18px;
   background-color:#66FF00;
}

Koden för att byta CSS-klass på ett HTML- element ser ut så här om namnet exempelvis är minNyaClass:

[element].setAttribute("class", "minNyaClass");

Obs! Denna kod fungerar inte i alla versioner av Internet Explorer

4

Gör ett skript där CSS-bytet i förra övningen fungerar även i IE.

Tips:

IE har ett annat namn på attributet för CSS-klassen. I IE ser koden för byta av klass ut så här:

[element].setAttribute("className", "minNyaClass");

Namnet på webbläsaren kommer du åt genom navigator-objektets egenskap appVersion. Med metoden indexOf() kan du kolla om bokstavskombinationen IE ingår i applikationsnamnet.

5

När användaren fyllt i formuläret och klickat på Submitknappen skall en alertruta visas. I denna skall det visas felmeddelanden i följande två fall:

1. Om inte mailadressen innehåller ett @-tecken
2. Om inte postnumret är 5 tecken långt

Tips:

Om du sätter id för postnumrets inputfält till "inputPostnummer" kan du komma åt fältet genom att skriva:
   
     var postNr = document.getElementById("inputPostnummer");

Fältets innehåll ges sedan av postNr.value.
Om du inte vill att formuläret skall skickas iväg måste funktionen som du aktiverar med tryckning på submitknappen returnera värdet false. Händelsehanteraren onsubmit kan du lägga i form-tagen.
Använd strängfunktionerna indexOf och length för att kontrollera värdena.

6

Koppla en händelsehanterare till knappen dynamiskt med hjälp av Javascript. Vid klickning på knappen skall en funktion btClick aktivera en alertruta enligt illustrationen.

Hjälp:

Enklaste sättet att skapa en händelsehanterare är att lägga den som ett attribut i html-koden. Det kan se ut så här:

<input type="button" onclick="doSomething();" />

Här skall du emellertid lägga till händelsehanterare dynamiskt med hjälp av Javascript. Metoden för detta heter addEventListener enligt standarden. Tyvärr serdock koden för detta olika ut i olika webbläsare. Funktionen addEvent nedan tar hänsyn till detta och kan användas för att skapa händelsehanterare i såväl Mozilla som IE:

      	function addEvent(elm, evtype, fn, useCapture) 
	{ 
		//Credit: function written by Scott Andrews (www.scottandrews.com)
		
		if (elm.addEventListener) 
			ret = elm.addEventListener(evtype, fn, useCapture); 
		else if (elm.attachEvent) 
			ret = elm.attachEvent('on' + evtype, fn); 
		else 
			elm['on' + evtype] = fn; 
		return ret; 
	}

Som synes tar funktionen tre argument:

• elm - det html-element eller objekt som skall ha en händelsehanterare
• evtype - typen av händelse, t ex click, load, mouseover
• fn - namnet på den funktion som händelsen aktiverar
• useCapture - anger typen av händelsehantering (sätts vanligen till false)

Följande sats aktiverar funktionen minFunktion när sidan laddats in:

addEvent(window, 'load', minFunktion, false);

Observera att html-element inte finns innan sidan är innanladdad.

7

Gör en sida som tar emot text som du skriver på tangentbordet och visar den direkt på skärmen.

Tips:

• Händelshanteraren för tangentbordsinmatning heter keypress (eller onkeypress).
• Funktionen som hanterar tangentbordstryckningen måste ha argumentet e för att det skall gå att komma åt viilken tangent som tryckts ner. Funktionen skulle kunna börja så här:

function skriv(e){
   cCode= e.charCode;

• Om du använder addEventListener kan du koppla metoden keypress till objectet window.
• För att omvandla siffran i tangentens charCode till rätt bokstavstecken använd metoden fromCharCode() t ex så här:

String.fromCharCode(cCode)

• Skapa en div-tag för innehållet och ändra dess innehåll med hjälp av innerHTML.
• Inrikta dig i första hand på att få koden att fungera i Firefox.

8

Utveckla koden i föregående exempel så att den hanterar radmatningar och bakstegstangenten på rätt sätt. (Backstegtangenten skall radera senast inskrivna tecken.

Tips:

• Undersök vilka koder som dessa tangenter genererar genom att skriva ut koderna på skärmen.
• Strängfunktion substr() kan komma till användning.
• Se till att även