Javascript.
© 2006 H.M. Pragt
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.
Ontwikkeling van Javascript
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.
JSLint
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
Handige links.
Handige voorbeelden.
Hier staan enkele handige voorbeeld scripts die is kunt gebruiken op uw Internet pagina.
Voorbeelden op andere pagina's van deze site
Een voorbeeld van CSS / DOM en javascript in de vorm van een tooltip control.
Debuggen van javascript code.
Creatief foto's weergeven op uw internet site.
Een popupwindow (divje) in javascript en css
Met de huidoge popup blockers is het bijna onmogelijk geworden om een nieuw popup venster te openen in uw html
pagina om bijvoorbeeld een foto of een help tekst te tonen. Er is echter wel een truuk om dit voor elkaar te krijgen
zonder dat de popup blocker onmiddellijk ingrijpt. U kunt namelijk op eenvoudige wijze zelf een divje toevoegen aan
het document via DOM Door zelf enkele onderdelen toe te voegen zoals een sluitknop lijkt het erg op het openen van
een nieuw venster.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- ------------------------------------------------------------- -->
<!-- Gemaakt door Pragt.info 2006, deze code is vrij te gebruiken. -->
<!-- ------------------------------------------------------------- -->
<title>Nieuw divje als popup</title>
<style type=text/css>
.NewDiv {
background-color:#f0f09c;
color:#ff6600;
border:1px solid #000000;
position:absolute;/*relative*/
cursor:move;
left:200px;
top:100px;
height:200px;'
width:200px;
}
.NewDivCloseBAR {
background-color:#f0f06b;
border-bottom:1px solid #000000;
height:16px;
width:100%;
}
.NewDivX {
height:100%;
background-color:#f0f06b;
color:#000000;
font-family:Verdana,Arial,sans-serif;
border-left:1px solid #000000;
}
.NewDivX A {
text-decoration: none;
font-weight: bold;
}
</style>
<script type=text/javascript>
<!-- Begin
function newdiv(inner) {
if (!document.getElementById)
return;
dDiv = document.createElement("DIV");
bar=document.createElement("DIV")
bar.className="NewDivCloseBAR"
bar.setAttribute("align","right")
bar.setAttribute("width","100%")
x=document.createElement("SPAN")
x.innerHTML="<a href='javascript:void(null)' style='color:transparent'> × </a>";
x.onclick=function(){document.body.removeChild(dDiv);}
x.className="NewDivX"
bar.appendChild(x)
dDiv.appendChild(bar)
dDiv.className = "NewDiv";
cont=document.createElement("SPAN")
cont.innerHTML = inner;
dDiv.appendChild(cont);
document.body.appendChild(dDiv);
}
// -->
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa nunc, mollis nec, elementum in,
malesuada at, nulla. Morbi ullamcorper quam vel nulla. Ut eget elit ac sapien fermentum vulputate.
Phasellus blandit iaculis elit. Ut pulvinar porttitor nisl. In ullamcorper. Quisque a mi nec lectus
euismod ornare. Maecenas ultrices, leo et vehicula lacinia, ligula nisi facilisis nunc, ac ultrices
nisi arcu ut felis. Nullam lobortis.</p>
<input type=button style="font-size:0.6em" onclick="newdiv('<center><H2>Dit is een test</h2></center>')" value="Toon divje">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam massa nunc, mollis nec, elementum
in, malesuada at, nulla. Morbi ullamcorper quam vel nulla. Ut eget elit ac sapien fermentum vulputate.
Phasellus blandit iaculis elit. Ut pulvinar porttitor nisl. In ullamcorper. Quisque a mi nec lectus
euismod ornare. Maecenas ultrices, leo et vehicula lacinia, ligula nisi facilisis nunc, ac ultrices
nisi arcu ut felis. Nullam lobortis. Morbi magna enim, porttitor sed, ultrices in, fermentum eu, orci.</p>
</body>
</html>
Automatisch alle woorden uit een veklarende woordenlijst van een popup verklaring voorzien
Deze code is een voorbeeld van een css en javascript oplossing om automatisch elk woord dat in de verklarende woordenlijst
voorkomt van een mouseover event en een popup venster te voorzien met de verklaring van dit woord. Het woord zal door een
onderbroken lijn ondersteept worden als er een verklarende tekst aan gekoppeld is. Door de woordenlijst uit te breiden zal
automatisch het nieuwe woord in de pagina voorzien worden van een verklarende tekst. Op deze wijze hoeft de tekst van de pagina niet
aangepast te worden wanneer de verklarende woordenlijst veranderd.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Verklarende woordenlijst</title>
<style type="text/css">
<!--
div.hmp_glossary {
border: 1px gray solid;
margin: 0px;
padding: 0px;
}
div.hmp_glossary_item {
display: block;
background-color: #f0f0f0;
margin: 4px;
padding: 0px;
}
span.hmp_term {
color: #000000;
font: 14px verdana;
font-weight: bold;
}
span.hmp_explaintion {
display: block;
padding-bottom: 1em;
color: #000080;
font: 12px verdana;
}
a.hmp_tooltip {
color: #000030;
font: 12px verdana;
text-decoration: none;
border-bottom: 1px dashed black;
}
div#hmp_toolTip {
position: absolute;
z-index: 1000;
width: 220px;
background: #F0E68C;
border: 1px solid black;
text-align: left;
padding: 5px;
min-height: 1em;
}
div#hmp_toolTip p {
margin: 0px;
padding: 0px;
color: #000080;
font: 11px verdana;
}
-->
</style>
</head>
<body>
<!-- ------------------------------------------------------------- -->
<!-- Gemaakt door Pragt.info 2005, deze code is vrij te gebruiken. -->
<!-- ------------------------------------------------------------- -->
<script type="text/javascript" src="autoglossary.js"></script>
<div id="hmp_hilite_text">
<h4>Test document</h4>
<p>Dit is een test document met de woorden ASP en ook asp en de term css komt er ook in voor.</p>
<br><br>
<table summary="">
<tr>
<td>In een td kunnen we ook woorden gebruiken zoals w3c en <b>xml</b> en xmlparser, testxml of die we moeten kunnen herkennen.</td>
</tr>
</table>
<div>Zelfs binnen een div moeten we woorden herkennen zoals webservice en nog veel andere woorden. VCard moet ook gevonden worden.</div>
</div>
<br><br><br><br><br><br><br><br>
<h3>Verklarende woordenlijst</h3>
<div class="hmp_glossary" id="hmp_glossary">
<div class="hmp_glossary_item">
<span class="hmp_term">ASP</span>
<span class="hmp_explaintion">ASP staat voor <i>"Active Server Pages"</i>, een framework ontwikkeld door Microsoft
waarmee dynamische webpagina's ontwikkeld kunnen worden. ASP-pagina's worden meestal geschreven in VBScript.
</span>
</div>
<div class="hmp_glossary_item">
<span class="hmp_term">CSS</span>
<span class="hmp_explaintion">
Cascading Style Sheets, een opmaaktaal voor de grafische vormgeving van een HTML-webpagina.
</span>
</div>
<div class="hmp_glossary_item">
<span class="hmp_term">FAQ</span>
<span class="hmp_explaintion">
FAQ is een samentrekking van de woorden 'Frequently Asked Questions'. Dit zijn lijsten met veel gestelde
vragen over een bepaald onderwerp waarop een antwoord wordt gegeven.
</span>
</div>
<div class="hmp_glossary_item">
<span class="hmp_term">vCard</span>
<span class="hmp_explaintion">
vCard is een open standaard voor het bewaren van adresgegevens. Deze standaard maakt het mogelijk dat persoonsgegevens gemakkelijk
uitgewisseld kunnen worden onder verschillende computerprogramma's. Maar u kunt gegevens ook eenvoudig op een website publiceren of via
e-mail versturen.
</span>
</div>
<div class="hmp_glossary_item">
<span class="hmp_term">W3C</span>
<span class="hmp_explaintion">
World Wide Web Consortium, een organisatie die webstandaarden voor het world wide web ontwikkelt. De organisatie is
in 1994 opgericht in samenwerking met CERN en is ondersteund door DARPA en de Europese Commissie.
</span>
</div>
<div class="hmp_glossary_item">
<span class="hmp_term">webservice</span>
<span class="hmp_explaintion">
Een webservice is een API waardoor webapplicaties met elkaar kunnen communiceren. Hierdoor kunnen bepaalde taken
uitgevoerd worden door andere servers en websites. Webservices worden meestal ontwikkeld in XML.
</span>
</div>
<div class="hmp_glossary_item">
<span class="hmp_term">XML</span>
<span class="hmp_explaintion">
Extensible Markup Language, een opmaaktaal waarmee gegevensoverdracht tussen verschillende programma's en databanken gemakkelijker
gemaakt kan worden. Deze opmaaktaal werd ontworpen door het W3C.
</span>
</div>
</div>
</body>
</html>
Automatisch een inhoudsopgave genereren vanuit de H tags op de pagina
Via dit script is het mogelijk om automatisch eem inhoudsopgave te genereren op de webpagina gebaseerd op
de h1 t/m de h5 tags binnen deze pagina. Natuurlijk kunt u dit ook op andere elementen laten doen
zie de variabele: validTagList.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Automatische inhoudsopgave</title>
<style type="text/css">
<!--
#TOC {
margin: 0px;
display: inline;
border-style: none;
}
#TOC a.:link {
color:blue;text-decoration:none
}
#TOC a:visited {
color:blue;text-decoration:none
}
#TOC a:hover {
color:red;text-decoration:underline
}
#TOC a:active {
color:green;text-decoration:underline
}
/* Inspringen d.m.v. css */
#TOC li.H1 {
font: normal normal normal 12pt;
margin-left: 0px;
}
#TOC li.H2 {
font: normal normal normal 12pt;
margin-left: 1em;
}
#TOC li.H3 {
font: normal normal normal 12pt;
margin-left: 2em;
}
#TOC li.H4 {
font: normal normal normal 12pt;
margin-left: 3em;
}
#TOC li.H5 {
font: normal normal normal 12pt;
margin-left: 4em;
}
-->
</style>
<script type="text/javascript">
<!--
function getObjects() {
var obj = new Array(1);
j = 0;
obj[j] = document.documentElement;
traverse( document.documentElement );
function traverse(node) {
obj[j] = node;
j = j + 1;
if (node.childNodes != null) {
for (var i=0; i < node.childNodes.length; i++) {
traverse(node.childNodes.item(i));
}
}
}
return obj;
}
// Deze functie roepen we aan bij het laden van de pagina.
function buildTOC() {
validTagList = '. H1 H2 H3 H4 H5 .';
if (document.body.childNodes) {
allTags = getObjects();
}
else if (document.all) {
allTags = document.all;
}
var tagDetail = new Array(1);
j = 0;
aNum = 0;
for(i = 0; i < allTags.length; i++) {
if (validTagList.indexOf(' '+allTags[i].tagName+' ') > 0) {
aNum = aNum + 1;
var aNode = document.createElement("A");
aNode.id = 'Z'+aNum;
allTags[i].appendChild(aNode);
tagDetail[j] = allTags[i].tagName + "|";
tagDetail[j] = tagDetail[j]+aNum + "|";
if (allTags[i].childNodes.length > 0) {
tagDetail[j] = tagDetail[j]+allTags[i].childNodes[0].nodeValue
}
j++;
}
}
/***************************************/
/* Maak inhoudsopgave */
/***************************************/
var ulNode = document.createElement("UL");
tocId = document.getElementById('TOC');
tocId.appendChild(ulNode);
for(i = 0; i < tagDetail.length; i++) {
thisDetail = tagDetail[i].split("|");
var liNode = document.createElement("LI");
liNode.className = thisDetail[0];
ulNode.appendChild(liNode);
var aNode = document.createElement("A");
aNode.className = thisDetail[0];
aNode.href = '#Z'+thisDetail[1];
liNode.appendChild(aNode);
aNode.innerHTML = thisDetail[2];
}
}
//-->
</script>
</head>
<body onLoad="buildTOC()">
<!-- ------------------------------------------------------------- -->
<!-- Gemaakt door Pragt.info 2005, deze code is vrij te gebruiken. -->
<!-- ------------------------------------------------------------- -->
<!-- Hier komt de inhoudsopgave -->
<b>Inhoudsopgave</b>
<div id=TOC></div>
<h1>Deel 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<h2>Paragraaf 1.1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<h1>Deel 2</h1>
<h2>Paragraaf 2.1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<h3>Paragraaf 2.1.1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<h4>Paragraaf 2.1.1.1</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<h4>header 2.1.1.2</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<p>Paragraaf 4</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
<h1>Deel 3</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</p>
</body>
</html>
Rechtermuis toets blokkeren
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 klokje ergens op uw pagina.
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>
Valideren van de invoer van een formulier.
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>
|