Javascriptövningar 6

while

1

I övning 5.4 fick användaren mata in ett tal i en prompt-sats. Därefter skrevs det inmatade talets multiplikationstabell ut på skärmen. Själva utskriften utfördes av en funktion som kallats multiplikationstabell(), och funktionsanropen såg ut så här:

<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>

Skriv om programmet och förkorta koden genom att stoppa in funktionsanropet i en while-loop.
Hjälp:
Här har du ett annat exempel på en while-loop. Nedanstående loop skriver ut talen 1 till 10.

var i = 1;
while ( i <= 10 ) {
    document.write( i + "<br>" );
    i++;
}

2

Funktionen Math.random() är inbyggd i Javascript. Det är en funktion som genererar ett slumptal mellan 0 och 1. Följande kod är ett exempel på användande av Math.random(). Här sparas det genererade slumptalet i variabeln slumptal och skrivs i nästa sats ut på skärmen med hjälp av en write-sats. Testa koden här.

<script>
    var slumptal;
    slumptal = Math.random();
    document.write( slumptal + "<br>" );
</script>

Ett av de genererade slumptalen kan ta sig ut så här på skärmen:



Uppgift: Gör ett skript som skriver ut 10 slumptal. Använd dig av en while-loop för att göra koden kortfattad.

3

Bland inbyggda funktioner i Javascript finns även metoden för avrundning: Math.round(). Denna funktion skall ha det tal som skall avrundas som argument. Följande sats avrundar talet 45.78 till 45 och sparar det avrundade värdet i variabeln a.

a = Math.round(45.87);

Math.round() omvandlar alltid till heltal. Om Du vill att talet skall omvandlas till exempelvis jämna hundratal måste Du först dividera talet Du vill omvandla med 100, och sedan (efter avrundningen) åter multiplicera med 100. Följande kod avrundar talet 3456 till jämna hundratal:

a = 100 * Math.round( 3458/100 );

Här kan du testa ett program med avrundning till heltal. Utveckla detta program så att det gör ett flertal avrundningar i enlighet med nedanstående skärmdump. Använd Dig av en while-konstruktion.
Tips: Styrvariabeln i while-konstruktionen skall multipliceras med 10 en gång i varje loop.

4

isNaN() är en funktion som Du kan använda för att kontrollera om en varibel innehåller ett tal. Följande sats ger utskriften false om variabeln x innehåller något annat än ett tal.

document.write( isNaN( x ) );

I övningen ovan med multiplikationstabellen (övning 6.1) blir resultatet svårbegripligt om man matar in något som inte är ett tal. Ett sätt att garantera att användaren verkligen gör en korrekt inmatning är att kontrollera med isNaN(). Om man låter den testen styra en while-kosntruktion kan man tvinga användaren att upprepa inmatningen till dess ett riktigt värde matats in. Om vi antar att det inmatade värdet finns i variabeln tal skulle testen kunna se ut så här:

while ( isNaN(tal) == true )

inuti while-snurran måste det finnas en prompt-sats som ger variabeln tal ett nytt värde. När användaren så småning skriver in ett tal kommer styrvillkoret att vara falskt (dvs isNaN(tal) kommer inte att vara false).

5

Gör ett program som skriver ut samtliga multiplikationstabeller mellan 1 och 10. Programmet för endast innehålla en enda document.write-sats. Du kan åstadkomma detta genom att använda två while-loopar, där den ena läggs inuti den andra (s k nästlade loopar). Nedanstående kod är ett exempel på hur Du kan nästla loopar. När du är klar med programmet skall Du lägga in en extra write-sats som skapar en extra radmatning mellan multiplikationstabellerna.

var i = 1;
var j;
while ( i <= 2 ){
    j = 1;
    while ( j <= 2 ){
        document.write( i + " " + j + "<br>" );
        j++;
    }
    i++;
}

Kodexemplet ger detta resultat:

6

Utveckla multiplikationsprogrammet så att du får en sida lik skärmdumpen nedan.



Som Du ser är det endast tabell 1 till och med 4 som skrivits ut. Du skall behålla de nästlade looparna, så att du fortfarande bara behöver en enda write-sats för att skriva ut raderna i multiplikationstabellerna. Spaltindelningen åstadkoms genom att multiplikationstabellerna är inlagda i en html-tabell. Det innebär att det måste ligga <table>-tags och <tr>-tags som omsluter hela utskriften. Dessa tags skriver Du lämpligen i vanlig html utanför din <script>-tag. Dessutom måste det inne i första loopen ligga <td>-tags som innesluter varje enskild multiplikationstabell.

Formateringar:
För html-tabellen: border=0 cellpadding=10 cellspacing=0 De siffror som utgör rubriker är satta inom en <b>-tag. Följand formatmall används:

<style type=text/css>
    td   {font: 80%/100% "Courier New", Courier, mono;}
    b    {color: red}
</style>

7

Skapa en sida på vilken en av ovanstående bilder visas. Vilken bild osm visas skall bestämmas slumpmässigt med hjälp av random-funktionen.

8

Försök skapa en sida som genererar en tipsrad enligt nedanstående bild.

Tips:

• Använd tabell med border=0 cellpadding=10 cellspacing=0
• Omvandla det slumptal mellan 0 och 1 som genereras av Math.random() till ett slumptal mellan 1 och 3 med följande formel:
  
     ettTillTre = Math.floor( 3 * Math.random() + 1 )
  
  
• Textformatering med stylesheet: verdana storlek 80%/100%
• Använd en while-konstruktion för att generera tabellens rader.
• Använd en if-konstruktion för att bestämma hur varje rads tre celler skall se ut