Programmeren

Op deze pagina staan dingen die te maken hebben met programmeren.

Voor geïnteresseerde webprogrammeurs heb ik een aantal HTML-broncodes met goede JavaScripts beschikbaar gesteld.
En er staan links bij naar voorbeelden ervan.

Ook is er een JavaScript-tutorial, voor iedere HTML-kenner die wil leren hoe die zijn of haar webpagina's echt mooi en dynamisch maakt met JavaScript. De tutorial is overzichtelijk en interessant, met leuke, simpele voorbeeldscripts.
Het is zeker de moeite waard om deze tutorial te doen!

Klik hier om naar de JavaScript-tutorial te gaan.

De broncodes en scripts die ik op deze pagina en in de tutorial heb staan heb ik, tenzij anders vermeld, zelf gemaakt.
Ik wil de mensen die ze gebruiken daarom verzoeken om de vermelding van mijn naam en copyright er ook bij te houden, want ik heb er veel aandacht aan besteed en hoop dat dat gerespecteerd wordt.
U mag de broncodes gebruiken voor uw pagina's, maar ze blijven mijn eigendom.

Veel succes met het gebruik van deze broncodes!

Hier volgen de codes:

[Bijbehorende resources]

Rekenmachine.html

<html>

<head>

<title>Rekenmachine</title>

</head>

<tr>

</form>

</td>

</tr>

</table>

var som = 0;
var input = 0;
var operator = "";
var calculated = false;

var t = document.rekenmachine.t;

function calculate(token)
{

if (token == "Off")
    {
        window.close();
    }

if (token == "C")
    {
        input = 0;
        som = 0;
        operator = "";
        calculated = false;
        t.value = "";
    }

else if (token == "=")
    {
        if      (operator == "*")
        {
            input = som *= input;
        }
        else if (operator == "/")
        {
            input = som /= input;
        }
        else if (operator == "+")
        {
            input = som += input;
        }
        else if (operator == "-")
        {
            input = som -= input;
        }
        else
        {
            som = input;
        }
        t.value = som;
        som = 0;
        operator = "";
        calculated = true;
    }

else if (token == "x")
    {
        operator = "*";
        if (som == 0)
        {
            som = input;
            t.value = input;
        }
        else
        {
            som *= input;
            t.value = som;
        }
        calculated = true;
    }

else if (token == ":")
    {
        operator = "/";
        if (som == 0)
        {
            som = input;
            t.value = input;
        }
        else
        {
            som /= input;
            t.value = som;
        }
        calculated = true;
    }

else if (token == "+")
    {
        operator = "+";
        if (som == 0)
        {
            som = input;
            t.value = input;
        }
        else
        {
            som += input;
            t.value = som;
        }
        calculated = true;
    }

else if (token == "-")
    {
        operator = "-";
        if (som == 0)
        {
            som = input;
            t.value = input;
        }
        else
        {
            som -= input;
            t.value = som;
        }
        calculated = true;
    }

else if (token == ".")
    {
        t.value += ".";
    }

else
    {
        try
        {
            if (!calculated)
            {
                input = 1 * (t.value + token);
                t.value += token;
            }
            else
            {
                input = 1 * token;
                t.value = token;
                calculated = false;
            }
        }
        catch(ex)
        {
        }
    }

}

/* Copyright Eduard de Jong */

//-->
</script>

</body>

</html>

Stuiterbal.html

<html>

<head>
<title>Stuiterbal</title>
</head>

</body>

</html>

Staafdiagram-Maker.html

<html>

<head>
<title>Staafdiagram-Maker</title>
</head>

staafsrc = "reddot.gif";

/* Copyright Eduard de Jong */

//-->
</script>

/* Copyright Eduard de Jong */

//-->
</script>

<form name="invoer" onsubmit="if (this.x.value > 0) {kiesaantal(this.x.value);} return false">
<h2>
Kies het aantal staven (de X-waarde) en vul daarna<br>
de waarden van de staven in (de Y-waarden).
</h2>
<br>
<div id="xdiv" style="visibility: visible; position: static">
Aantal staven:<br>
<input type="text" name="x" size="15" style="text-align: center; "><br>
<input type="submit" value="      OK      ">
</div>
</form>

</body>

</html>

Tijd in woorden en gedagwensing.html

<html>

<head>

d = new Date();

dagdeel = ["nacht", "nacht", "nacht", "nacht", "nacht", "nacht", "morgen", "morgen", "morgen", "morgen", "morgen", "morgen", "middag", "middag", "middag", "middag", "middag", "middag", "navond", "navond", "navond", "navond", "navond", "navond"][d.getHours()];

uur = ["vierentwintig uur", "een uur", "twee uur", "drie uur", "vier uur", "vijf uur", "zes uur", "zeven uur", "acht uur", "negen uur", "tien uur", "elf uur", "twaalf uur", "dertien uur", "veertien uur", "vijftien uur", "zestien uur", "zeventien uur", "achttien uur", "negentien uur", "twintig uur", "eenentwintig uur", "tweeëntwintig uur", "drieëntwintig uur"][d.getHours()];

minuut = ["", " een", " twee", " drie", " vier", " vijf", " zes", " zeven", " acht", " negen", " tien", " elf", " twaalf", " dertien", " veertien", " vijftien", " zestien", " zeventien", " achttien", " negentien", " twintig", " eenentwintig", " tweeëntwintig", " drieëntwintig", " vierentwintig", " vijfentwintig", " zesentwintig", " zevenentwintig", " achtentwintig", " negenentwintig", " dertig", " eenendertig", " tweeëndertig", " drieëndertig", " vierendertig", " vijfendertig", " zesendertig", " zevenendertig", " achtendertig", " negenendertig", " veertig", " eenenveertig", " tweeënveertig", " drieënveertig", " vierenveertig", " vijfenveertig", " zesenveertig", " zevenenveertig", " achtenveertig", " negenenveertig", " vijftig", " eenenvijftig", " tweeënvijftig", " drieënvijftig", " vierenvijftig", " vijfenvijftig", " zesenvijftig", " zevenenvijftig", " achtenvijftig", " negenenvijftig"][d.getMinutes()];

/* Copyright Eduard de Jong */

//-->
</script>

</head>

</font></b></center>

</body>

</html>

Cookietest.html

<html>

<head>
<title>Cookie-Test</title>
</head>

<body>

// Stel de verloopdatum op de maand precies in tot over een jaar:
cookieexpiretime = new Date(new Date().getFullYear() + 1, new Date().getMonth(), 1, 0, 0, 0, 0);

// Als er een cookie met de bezoekersnaam is, zoek deze naam er dan uit op en toon deze in een welkomsgroet:
if (document.cookie.indexOf("jenaam") != -1)
{
    jenaam = document.cookie.substring(document.cookie.indexOf("jenaam=") + "jenaam=".length, ((document.cookie.indexOf(";") != -1) ? document.cookie.indexOf(";") : document.cookie.length));
    window.alert("Welkom terug " + jenaam + "!");
}

// Maar als er nog geen bezoekersnaam is gevonden, vraag deze naam dan van de bezoeker:
else
{
    jenaam = window.prompt("Wat je naam?", "");
}

// Als de bezoekersnaam bekend is, zet de bezoekersnaam en de nieuwe verloopdatum dan in de cookie:
if (jenaam != null)
{
    document.cookie = "jenaam=" + jenaam + "; expires=" + cookieexpiretime.toUTCString();
}

/* Copyright Eduard de Jong */

//-->
</script>

</body>

</html>

Digitaal Cursorklokje.html

<html>

<head>
<title>Digitaal Cursorklokje</title>
</head>

<body>

<script language="JavaScript" type="text/javascript">

</script>

</body>

</html>

Tijdbom.html

<html>

<head>

<title>Tijdbom</title>

function Initialiseer()
{
    t = 10;
    document.tijdbom.klok.value = t;
    k = setTimeout('ToonKlok()', 1000);
}

function gestopt()
{
    if (t == 0)
    {
        return "Te laat!";
    }
    else
    {
        return "De bom is gestopt...";
    }
}

/*
Deels afkomstig van http://www.javascript-101.info/nl/,
maar grotendeels uitgebreid door Eduard de Jong
*/

//-->
</script>

<head>

<h1>Tijdbom...</h1>

</center>

</body>

</html>

Tekstopmaak-Toner.html

<html>

<head>
<title>Tekstopmaak instellen</title>
</head>

<body>

<div id="testelement">Tekst</div>

<br>

Letter-type:<br>
<input type="text" name="lettertype" value="Arial"><br>
Letter-grootte (in pixels):<br>
<input type="text" name="lettergrootte" value="30"><br>
Letter-type (rood, groen, blauw):<br>
<input type="text" name="letterkleur" value="255, 0, 0"><br>
<br>
<input type="submit" value="Instellen">

</form>

</center>

</body>

</html>

Muisontwijkende afbeelding.html

<html>

<head>

<title>Don't touch me!</title>

</head>

<script language="JavaScript" type="text/javascript">

</script>

</body>

</html>

Bewegende window.html

<html>

<head>
<title>Bewegende window</title>
</head>

leftplace = 0;
rightplace = 600;
topplace = 0;
bottomplace = 400;
placechangespeed = 1000;

beginsize = 200;
minsize = 100;
maxsize = 400;
sizechangespeed = 1000;

x = 0;
y = 0;
s = beginsize;
top.resizeTo(s, s);

changeWinPlaceA();

changeWinShapeA();

/* Copyright Eduard de Jong */

//-->
</script>

</body>

</html>

Geluid-afspeel-popup.html

<html>

<head>

<title>Popup met geluid-afspeler</title>

</head>

<form name="soundopenform" onsubmit="document.getElementById('startsound').click(); return false">
Voer het geluid in:<br>
<input type="file" name="soundopener" size="50">
</form>
<br>
<a href="#" id="startsound" onclick="playsound(document.soundopenform.soundopener.value); return false">Speel het geluid af</a>

</font></b></center>

</body>

</html>

Geluid afspelen met link.html

Bestuurbare afbeelding.html

<html>

<head>

<title>Bestuurbare afbeelding</title>

</head>

<script language="JavaScript" type="text/javascript">

</script>

</body>

</html>

Draaiende doodshoofden om cursor.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Draaiende punten om de muiscursor</title>
<style type="text/css">

</style>
</head>

<body>

var speed = 10;
var dotamount = 8;
var radius = 70;

var xpos = -1000;
var ypos = -1000;

for (var i = 0; i < dotamount; i ++)
{
    document.write("<div id=\"dot" + i + "\" style=\"position: absolute\"><img src=\"doodshoofd.gif\" /><\/div>");
}
var dots = [];
for (var i = 0; i < dotamount; i ++)
{
    dots[i] = document.getElementById("dot" + i);
}

setInterval("draai()", 10);

document.onmousemove = function(e)
{
    if (!e)
    {
        e = event;
    }
    xpos = document.body.scrollLeft + e.clientX - radius - 26;
    ypos = document.body.scrollTop + e.clientY - radius - 14;
}

/* Copyright Eduard de Jong */
/* Namens Johan Dam */

//]]>
//-->
</script>

</body>

</html>

Tafel Calulator.html

<html>

<head>

<title>Tafel Calulator</title>

</head>

<form name="form1" onsubmit="if (document.form1.text1.value != '') {tafel(document.form1.text1.value);} return false">
De tafel van:<br>
<input type="text" name="text1" size="12" style="text-align: center">
<br><br>
<input type="submit" value=" Toon tafel ">
</form>

</font></b></center>

</body>

</html>

Draaiende punten.html

<html>

<head>
<title>Draaiende punten</title>
</head>

var speed = 15;
var dotamount = 90;
var margin = 10;
var radius;

for (var i = 0; i < dotamount; i ++)
{
    document.write("<div id=\"dot" + i + "\" style=\"position: absolute\">.</div>");
}
var dots = [];
for (var i = 0; i < dotamount; i ++)
{
    dots[i] = document.getElementById("dot" + i);
}

function setradius()
{
    radius = Math.min(document.body.clientWidth, document.body.clientHeight) / 2 - 2 * margin;
}

setradius();
window.onresize = setradius;

setInterval("draai()", 10);

/* Copyright Eduard de Jong */

//-->
</script>

</body>

</html>

Digitaal klokje.html

Draaiende punten om cursor.html

<html>

<head>
<title>Draaiende punten om de muiscursor</title>
</head>

var speed = 10;
var dotamount = 8;
var radius = 70;

var xpos = -1000;
var ypos = -1000;

setInterval("draai();", 10);

document.onmousemove = function(e)
{
    if (!e)
    {
        e = event;
    }
    xpos = document.body.scrollLeft + e.clientX - radius - 3;
    ypos = document.body.scrollTop + e.clientY - radius - 17;
}

/* Copyright Eduard de Jong */

//-->
</script>

</body>

</html>

Digitaal klokje groot.html

Wiebelende afbeelding.html

<html>

<head>

<title>Wiebelende afbeelding</title>

speed = 15;
movement = 100;

document.write("<img src=\"moveimg.gif\" name=\"image1\" style=\"position: absolute; z-index: 1; left: 280; top: 90\">");

//-->
</script>

</body>

</html>

Digitaal klokje in statusbalk.html

Bewegende afbeelding.html

<html>

<head>
<title>Bewegende afbeelding</title>
</head>

<script language="JavaScript" type="text/javascript">
<!--

horizontalbeginplace = 280;
verticalbeginplace = 120;
leftplace = 10;
rightplace = 600;
topplace = 10;
bottomplace = 250;
placechangespeed = 100;

beginsize = 0;
minsize = 50;
maxsize = 200;
sizechangespeed = 100;
fixedheight = "no";
imgheight = 200;

document.write("<img src=\"moveimg.gif\" name=\"image1\" style=\"position: absolute\">");
img1 = document.image1;
img1s = document.image1.style;

img1s.zIndex = 1;
x = img1s.left = horizontalbeginplace;
y = img1s.top = verticalbeginplace;
function changeImgPlaceA()
{
    if (x >= rightplace)
    {
        changeImgPlaceB();
    }
    else
    {
        x ++;
        img1s.left = x;
        setTimeout("changeImgPlaceA()", 1000 / placechangespeed);
    }
}
function changeImgPlaceB()
{
    if (y >= bottomplace)
    {
        changeImgPlaceC();
    }
    else
    {
        y ++;
        img1s.top = y;
        setTimeout("changeImgPlaceB()", 1000 / placechangespeed);
    }
}
function changeImgPlaceC()
{
    if (x <= leftplace)
    {
        changeImgPlaceD();
    }
    else
    {
        x --;
        img1s.left = x;
        setTimeout("changeImgPlaceB()", 1000 / placechangespeed);
    }
}
function changeImgPlaceD()
{
    if (y <= topplace)
    {
        changeImgPlaceA();
    }
    else
    {
        y --;
        img1s.top = y;
        setTimeout("changeImgPlaceD()", 1000 / placechangespeed);
    }
}
changeImgPlaceA();

img1.width = beginsize;
if (fixedheight == "yes")
{
    img1.height = imgheight;
}
function changeImgSizeA()
{
    if (img1.width >= maxsize)
    {
        changeImgSizeB();
    }
    else
    {
        img1.width += 1;
        window.setTimeout("changeImgSizeA()", 1000 / sizechangespeed);
    }
}
function changeImgSizeB()
{
    if (img1.width <= minsize)
    {
        changeImgSizeA();
    }
    else
    {
        img1.width -= 1;
        window.setTimeout("changeImgSizeB()", 1000 / sizechangespeed);
    }
}
changeImgSizeA();

/* Copyright Eduard de Jong */

//-->
</script>

</body>

</html>

In een aantal van de broncodes worden ook nog resources gebruikt, o.a. afbeeldingen.
Kijk in de betreffende broncodes voor verwijzingen naar de resources, om te zien welke gebruikt worden.
Hier kunt u ze downloaden:

doodshoofd.gif

steerimg.gif

moveimg.gif

Explosion1.wav

reddot.gif

donttouch.gif

[Terug naar de broncodes]

Eduard de Jong