Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Javascript met For opdracht 4 achtergrond kleuren laten zien

pvl
4 antwoorden
  • Ik ben Javascript aan het leren en nu heb ik uit een boek een scriptje dat met een klik op de knop achtereenvolgens 4 achtergrondkleuren een aantal seconden laat zien en dan op de laatste kleur stil blijft staan.
    Maar nou werkt dit scriptje niet, weet iemand misschien wat er niet goed aan is?
    Ik krijg alleen de eerste en de laatste kleur te zien.
    Dit is het scriptje:
    [code:1:ca3ab08b52]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE>Reeksen</TITLE>
    <script type="text/javascript">
    <!– Verbergen voor oude browsers
    var reeks = new Array("white","red","blue","yellow")
    function achtergrondWijzigen(kleurwaarde)
    {
    for (var i = 0; i < 4; i++)
    {
    for (var j = 0; j < 10000; j++)
    {
    kleurwaarde = reeks[i]
    document.bgColor = kleurwaarde
    }
    }
    }
    // Einde verbergen –>
    </script>
    </HEAD>
    <BODY BGCOLOR = "green">
    Als u op de onderstaande knop drukt, krijgt u een voorbeeld van de beschikbare achtergrondkleuren.
    <P>
    <FORM NAME="formulier4">
    <INPUT TYPE="button" NAME="kleuren" VALUE = "ACTIE!" onClick = "achtergrondWijzigen()"><BR>
    </FORM>
    </BODY>
    </HTML>
    [/code:1:ca3ab08b52]
  • Het script wil de 'vertraging' tussen de kleuren bewerkstelligen door 10.000 keer de achtergrondkleur te wijzigen in dezelfde kleur (en dat maal 4 voor de 4 kleuren). Op mijn laptop zie ik ook alle kleuren achtereenvolgens verschijnen.

    Echter, een betere methode is om gebruik te maken van de setTimeout functie (die is hier voor gemaakt). De code wordt dan bijvoorbeeld:

    [code:1:a01089185f]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE>Reeksen</TITLE>
    <script type="text/javascript">
    function achtergrondWijzigen(i)
    {
    var reeks = new Array("white","red","blue","yellow");
    document.bgColor = reeks[i];
    if (i < reeks.length)
    {
    i++;
    // verander het getal 1000 hieronder om de vertraging aan te passen: 1000 msec = 1 seconde.
    setTimeout("achtergrondWijzigen("+ i +")", 1000);
    }
    }
    </script>
    </HEAD>
    <BODY BGCOLOR = "green">
    Als u op de onderstaande knop drukt, krijgt u een voorbeeld van de beschikbare achtergrondkleuren.
    <P>
    <FORM NAME="formulier4">
    <INPUT TYPE="button" NAME="kleuren" VALUE = "ACTIE!" onClick = "achtergrondWijzigen(0)"><BR>
    </FORM>
    </BODY>
    </HTML>
    [/code:1:a01089185f]

    Als de code die je geeft letterlijk uit het javascript boek komt, dan hoop ik dat het niveau van het boek in latere hoofdstukken omhoog gaat. Ik vind het namelijk een zeer slordig en verouderd voorbeeld. Dit is niet de manier die ik mensen zou willen aanleren.
  • Ik had inderdaad al mijn twijvels over het boek en zal het terugbrengen naar de bieb en een ander zoeken.

    Ik heb ondertussen ontdekt dat de code wel werkt bij Microsoft Internet Explorer. De nieuwe code werkt inderdaad wel bij Mozilla Firefox. Ik zie echter dat de beide browsers anders reageren, zo eindigd de reeks in Firefox met een groene kleur en IE met geel zoals bedoelt. Is het mogelijk om het in Firefox ook zo te krijgen zoals bedoelt?

    Hoe moet ik trouwens ("+ i +") lezen?

    Alvast bedankt voor de hulp.
  • [quote:86c5ab0f7d="pvl"]
    Ik heb ondertussen ontdekt dat de code wel werkt bij Microsoft Internet Explorer. De nieuwe code werkt inderdaad wel bij Mozilla Firefox. Ik zie echter dat de beide browsers anders reageren, zo eindigd de reeks in Firefox met een groene kleur en IE met geel zoals bedoelt. Is het mogelijk om het in Firefox ook zo te krijgen zoals bedoelt?
    [/quote:86c5ab0f7d]
    Je hebt gelijk. Ik heb een foutje gemaakt zie ik nu. Het if-statement moet worden: if (i < reeks.length[b:86c5ab0f7d]-1[/b:86c5ab0f7d])[/color:86c5ab0f7d]
    [quote:86c5ab0f7d="pvl"]
    Hoe moet ik trouwens ("+ i +") lezen?
    [/quote:86c5ab0f7d]
    In het kort: ik doe niets anders dan onderstaande. Ik tel strings bij elkaar op.
    [code:1:86c5ab0f7d]
    var leeftijd = 34;
    alert ("ik ben " + leeftijd + " jaar");
    [/code:1:86c5ab0f7d]

    Iets langere uitleg: de eerste parameter van setTimeout is een functie-aanroep. Ik wil daar de functie [i:86c5ab0f7d]achtergrondWijzigen()[/i:86c5ab0f7d] aanroepen met de waarde van [i:86c5ab0f7d]i[/i:86c5ab0f7d]. Echter als ik dat doe op de volgende wijze, dan werkt dit niet:
    [code:1:86c5ab0f7d]setTimeout("achtergrondWijzigen(i)", 1000);[/code:1:86c5ab0f7d]
    De aanroep van setTimeout wordt namelijk niet direct uitgevoerd, maar pas na de gespecificeerde vertraging (1000 ms). De rest van de code zal intussen niet stoppen, maar gewoon doorlopen. Met als gevolg dat de functie [i:86c5ab0f7d]achtergrondWijzigen()[/i:86c5ab0f7d] is afgerond en de variabele [i:86c5ab0f7d]i[/i:86c5ab0f7d] 'out of scope' is (niet meer bekend).

    Ik los dat op door de waarde van [i:86c5ab0f7d]i[/i:86c5ab0f7d] op te nemen in de string. Ik vorm dus achtereenvolgens de strings [i:86c5ab0f7d]achtergrondWijzigen(1)[/i:86c5ab0f7d], [i:86c5ab0f7d]achtergrondWijzigen(2)[/i:86c5ab0f7d], etc.

    Hopelijk is het een beetje duidelijk.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.