Javascript.

JavaScript is een scripttaal met objectgeoriënteerde mogelijkheden speciaal gericht op het gebruik op het World Wide Web. Wat betreft de taalelementen vertoont JavaScript overeenkomsten met de programmeertaal Java. De gelijkenis houdt daar echter op, want inhoudelijk is JavaScript totaal anders dan Java.

De eerste versie van JavaScript werd in 1995 ontwikkeld door Brendan Eich van Netscape Communications Corporation voor gebruik in de Netscape Navigator. Aanvankelijk was de naam Mocha, daarna LiveScript en uiteindelijk werd de taal hernoemd tot JavaScript. Met de introductie van JavaScript ontstonden de eerste mogelijkheden om webpagina's interactief te maken. In combinatie met Dynamic HTML geeft dit enorm veel mogelijkheden. Netscape heeft in een poging om JavaScript als een officiële norm erkend te krijgen en er toch zelf voldoende zeggingskracht over te behouden de taal laten goedkeuren door de European Computer Manufacturers Association (ECMA), waarbij de naam om officiële redenen is gewijzigd in ECMAScript. De relevante ISO-standaard is ISO 16262 (International Organization for Standardization). De huidige versie van JavaScript is versie 1.5 wat overeenkomt met ECMA-262 Edition 3. Microsoft heeft een eigen implementatie van JavaScript ontwikkeld onder de naam JScript.

JavaScript wordt vooral gebruikt binnen web browsers, net als bij andere scripttalen is er een interpreter nodig om de geprogrammeerde opdrachten uit te voeren. De meeste moderne browsers beschikken over een eigen interpreter voor JavaScript. Onder Windows maakt Internet Explorer gebruik van de ingebouwde interpreter in Windows.

Javascript 1.2 werd voor het eerst ondersteund door Netscape Communicator 4.0. versie 1.2 bood verschillende vernieuwingen. Ook het nauw met Javascript verbonden DHTML (Dynamic HTML) werd geïntroduceerd.

De huidige versie van Javascript is versie 1.5, meer over Javascript versie 1.5 op: http://www.mozilla.org/js/js15.html

De volgende versie van Javascript zal versie 2.0 worden, meer hierover op http://www.mozilla.org/js/language/js20/index.html

De nieuwste versie van Microsofts Jscript is 5.5, meer hierover op http://msdn.microsoft.com/scripting/default.htm

Microsoft ontwikkelde speciaal voor de .NET omgeving Jscript.NET, meer hierover op http://www.gotdotnet.com/team/jscript/

De ECMA (European Computer Manufacturers Associotion) definiëerde de standaard ECMA-262 voor scripttalen (ECMAscript) waaraan zowel Microsoft als Netscape zich proberen te houden. De ISO-standaard hiervoor is ISO-16262.

Toen C een jonge programmeertaal was, waren er vele algemene programmeer fouten die niet door de primitieve compilers werden gevangen. Een extra utitlity programma lint genoemd werd ontwikkeld dat een bronbestand kon lezen en fouten en potentiële problemen kon detecteren.

JavaScript is een jonge taal, het was oorspronkelijk bedoeld om kleine taken in webpagina's te doen waarvoor Java te zwaar en onhandig was. Maar JavaScript is naar een volwaardige taal gegroeid en het wordt nu ook gebruikt in grotere projecten. Veel van de eigenschappen die bedoeld waren om de taal makkelijk te gebruiken te maken zijn lastig voor grotere projecten. Een lint voor JavaScript was dus nodig. JSLint is een JavaScript syntax controle en validatie programma. JSLint neemt een bron JavaScript en leest het door, als het een (potentieel) probleem vindt, geeft het een bericht terug met de beschrijving van het probleem en de regel en positie. Het probleem is noodzakelijk geen fout, het kan ook een waarschuwing zijn. JSLint bekijkt sommige stijl problemen evenals structurele problemen. Het bewijst niet dat uw programma correct is, het geeft aanwijzingen om uw code te verbeteren.

Voor een online versie kunt u kijken op: www.jslint.com

Hier staan enkele handige voorbeeld scripts die is kunt gebruiken op uw Internet pagina.

Voorbeelden op pagina's van deze site pragt.info

Een leech is in de dierenwereld een bloedzuiger, in de Internet wereld is het iemand die bijvoorbeeld websites maakt door alles te knippen en te plakken vanaf andere sites. De vergelijking met een bloedzuiger is in dat opzicht een hele goede omdat dit kopiëren bij de oorspronkelijke auteurs vaak het bloed doet koken. Echte beveiliging voor web tekst is bijna onmogelijk maar u kunt in ieder geval de gast op uw site duidelijk maken dat u er niet van gediend bent en een kleine beveiliging toepassen. Met dit javascriptje kunt u het rechtermuisklikken blokkeren. Het zoals al dit soort scriptjes niet waterdicht maar het helpt tegen de gemiddelde leecher. Dit script werkt zowel voor de Internet Explorer, Mozila en Firefox browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo pagina voor rechtermuis blokkering.</title>
</head>

<script language="JavaScript1.1">
<!-- Begin
function right(e) {
var msg = "Wilt u zo vriendelijk zijn om niets van deze pagina te kopiëren.";
  if (navigator.appName == 'Netscape' && e.which == 3) {
    alert(msg);
    return false;
  }
  else
    if (navigator.appName == 'Microsoft Internet Explorer' && event.button==2) {
	    alert(msg);
    return false;
  }
  return true;
}
document.onmousedown = right;
// End -->
</script>

<body>
<h4>Rechter muistoets blokkeer javascript.</h4>
</body>
</html>

Een klein script waarmee u ergens op uw pagina een klok kunt weergeven. Dit is een demonstratie van het Date object, een timer functie en het veranderen van inhoud van een DHTML element op uw pagina.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
function startTime()
{
var today=new Date()
// Declareer en vul de uren, min en sec.
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
  // als het getal kleiner is dan 10 zet er dan een 0 voor.
  if (m<10) m="0" + m;
  if (s<10) s="0" + s;
  // Verander de inhoud van het divje met de id klok.
  document.getElementById('klok').innerHTML=h+":"+m+":"+s
  // Zorg dat we hier weer terugkomen over een halve seconde. 
  t=setTimeout('startTime()',500)
}
</script>

</head>

<body onload="startTime()"> 
<!-- Door de onload zorgen we dat de klok de eerste keer gaat lopen -->
<center>
<p>Dit is een klokje!</p>
<div id="klok" style="border: 2px gray dotted; width=80; text-align: center;" ></div> 
<!-- Dit divje kunt u op een willekeurige positie op de pagina zetten -->
</center>
</body>
</html>

Dit is een voorbeeld van het valideren van invoer van een formulier in javascript. U kunt de testen nog veel uitgebreider maken, hier staan enkele voorbeelden van wat eenvoudige testen. Het principe is echter gelijk, het gaat om de algemene methode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<script type="text/javascript">
function valideren()
{
// lees de waarden vanuit het formulier in javascript variabelen
// test bij het email adres of er een @ in de tekst voorkomt.
var atteken=document.getElementById("email").value.indexOf("@");
var leeftijd=document.getElementById("leeftijd").value;
var naam=document.getElementById("naam").value;
// Zet een flag variabele op goed!
submitOK="true";

// test of de naam langer is dan 10 tekens
if (naam.length > 10)
 {
 alert("De naam mag maximaal 10 tekens lang zijn!")
 // Zet de flag of fout!
 submitOK="false";
}
// Test eerst of de leeftijd een getal is (isNaN) en test dan de grenzen!
if (isNaN(leeftijd) || leeftijd < 12 || leeftijd > 100)
 {
 alert("De leeftijd moet een getal zijn tussen 12 en 100!");
 // Zet de flag of fout!
 submitOK="false";
}
// Test of er in de tekst een @ voorkwam, -1 is nee!
if (atteken == -1) 
 {
 alert("Geen geldig email adres!");
 // Zet de flag of fout!
 submitOK="false";
 }
// Test de flag en geef de waarde terug!
if (submitOK=="false")
 {
 return false;
 }
}
</script>

</head>
<body>

<form action="www.pragt.info" onsubmit="return valideren()">
<table border=0 style="border: 1px black solid;">
<tr><td>Naam:</td><td><input type="text" id="naam" size="20"> 
(Max 10 tekens!)<br></td></tr>
<tr><td>Leeftijd:</td><td><input type="text" id="leeftijd" size="20"> 
(Tussen 12 en 100)<br></td></tr>
<tr><td>E-mail:</td><td><input type="text" id="email" size="20"> 
(Er moet een @ in voorkomen)<br></td></tr>
<tr><td>.</td><td><input type="submit" value=" Verstuur "></td></tr> 
</table>
</form>

</body>
</html>

Voor het debuggen van javascript code bestaan goede oplossingen in de vorm van Microsoft script debugger. Voor mozilla en firefox bestaan ook een paar debuggers die zeer handig werken. Maar vaak willen we alleen even een paar debug teksten naar een extra window schrijven om even te controleren wat er mis gaat of de flow van een programma te controleren. Speciaal hiervoor heb ik een debug div control gemaakt. Door dit kleine stukje code op te nemen tijdens de ontwikkeling van uw javascript bent u in staat om waar u wilt een berichtje of de inhoud van een variabele even af te drukken in een klein debug venster. Als voorbeeld heb ik een kleine routine gebruikt die de dom tree afdrukt. Leuk detail is dat de table in internet explorer automatisch een tbody heeft meegekregen. Dit script werkt zowel in Internet Explorer als mozilla en firefox.

Voorbeeld:  

Voorbeeld HTML voor de debug javascipt code.

<HTML>
<HEAD>
<TITLE>Debug demo.</TITLE>
</HEAD>
<BODY>

    <DIV id="test">
      <TABLE BORDER='1'>
        <TR>
           <TD>This is table cell 1
           </TD>
        </TR> 
        <TR>
           <TD>This is table cell 2
           </TD>
        </TR> 
      </TABLE>
    </DIV>
		
<script type="text/javascript" src="debug.js"></script>

</BODY>
</HTML>

De javascript code van de debug routines.

// -----------------------------------------------
// Debug control (c) Hein Pragt  2006
// -----------------------------------------------


var debug = true;	  // set to false to stop debugging

// --------------------------------
// Write a string to the debug div
// --------------------------------

function WriteDebug(s) {
  if (debug) { 
    document.getElementById("debug").innerHTML += s + "<br\/>";
  }
}

// --------------------------------
// Create and init the debug div
// --------------------------------

function DebugInit() {
   var Ddiv = document.createElement('div');
   Ddiv.id = 'debug';
   document.getElementsByTagName('body')[0].appendChild(Ddiv);
   if (debug) { 
     Ddiv.style.display = "block";
     Ddiv.style.position = "absolute";
     Ddiv.style.top = "10px";
     Ddiv.style.right= "10px";
     Ddiv.style.padding = "10px";
     Ddiv.style.width = "300px";
     Ddiv.style.background = "#404040";
     Ddiv.style.color = "white";
     Ddiv.style.border = "solid 1px red";
   } 
   else {
     Ddiv.style.display = "none";	 
   }
}


// -----------------------------------
// Walk the dom tree and display
// -----------------------------------

function WalkDOMTree(currentElement)
{
  if (currentElement) {
    var tagName = currentElement.tagName;
    if (tagName) { // Open tag
      WriteDebug("&lt;"+currentElement.tagName+"&gt;");
    }
    var i=0;
    var currentElementChild = currentElement.childNodes[i];
    while (currentElementChild) {
      WalkDOMTree(currentElementChild);
      i++;
      currentElementChild = currentElement.childNodes[i];
    }
    if (tagName) { // End tag
      WriteDebug("&lt;/"+tagName+"&gt;");
    }
  }
}

// ------------------------------------
// Execute javascript
// ------------------------------------

DebugInit();
WalkDOMTree(document.getElementById('test'));

Vriendelijke groet, Hein Pragt