Javascript is een uitbreiding van HTML, om het werken met variabelen mogelijk te maken. Bijvoorbeeld:
Dit is de code die dat doet:
<SCRIPT language=JavaScript>Het lijkt wel op Java, maar het is niet hetzelfde! Alle variabelen heten var, zonder nadere aanduiding. Opgemerkt moet worden dat de datum die je zo krijgt de datum is waarop het bestand op de computer van de provider werd gezet. Dat moment neemt Unix, anders dan DOS/Windows, als 'tijd' van het bestand. Een nieuwe upload lijkt een nieuwe versie te betekenen terwijl er (misschien) niets veranderd is. Om die reden heb ik het script op andere pagina's verwijderd. (Wie zorgvuldiger werkt dan ik kan de datum met de hand in de tekst zetten en die bij grote veranderingen aanpassen.)
<!--
var dt = new Date(document.lastModified);
var mnd = new Array("januari","februari","maart","april","mei",
"juni","juli","augustus","september","october","november","december");
document.write(" " + dt.getDate() + " "
+ mnd[dt.getMonth()] + ". " + dt.getFullYear());
// -->
</SCRIPT>
Zo'n tamelijk lang script, dat op meerdere pagina's gebruikt wordt kan je beter in een .js bestand zetten. Dat heb ik dan ook gedaan, ook het aan het eind van dit verhaal gebruikte 'popup' staat in een .js bestand.
Het script wat de versie meldt is afkomstig van The JavaScript Source
Welke dag is het vandaag? Dat zie je op mijn beginblad,
en op honderduizend soortgelijke webpagina's.
Op welke dag viel 10 mei 1940? Daar heb je de eeuwig durende kalender
voor. Als kind vond ik dat fascinerend: zo'n klein tabelletje in
een zakagenda wat al die kalenders van een jaar of honderd
vertegenwoordigde. Later begreep ik dat er maar veertien mogelijke
kalenders zijn: het jaar begint op één van zeven dagen en
het is al dan niet een schrikkeljaar.
Nu kan ik zo'n tabel in javascript gaan omzetten maar dat is overbodig:
hij zit er al in. Ik hoef alleen het systeem maar wijs te maken dat het
een andere dag is en ik kan het stukje script van het 'beginblad'
gebruiken.
<script>Resultaat: . Let op: maanden tellen vanaf 0, mei is dus 4!
dag=new Array("zon","maan","dins","woens","donder","vrij","zater");
var toen = new Date("1940,4,10");
document.write(dag[toen.getDay()]+"dag");
</script>
Waarom makkelijk als het ook moeilijk kan? Omslachtig script, zeer matige HTML. In 1700 geeft het andere resultaten dan mijn scriptje. Dat moet ik eens nader onderzoeken.
Mouseover
Iets wat ik op de homepage gebruik is de knop die verandert als je er met de muis overheen gaat, zoals de twee hieronder:
 |
 |
Ik koos dit voorbeeld omdat ik de benodigde plaatjes toch al had van m'n vorige lay-out experiment. (Eigenlijk werken die knopjes op mijn eerste blad, via CSS, veel mooier!) De code bestaat uit twee delen, ten eerste het script:
<SCRIPT language=JavaScript1.2>en ten tweede deze HTML code die 'changeImg' gebruikt:
theorie1 = new Image(150,75)
theorie1.src = "theorie1.gif"
theorie2 = new Image(150,75)
theorie2.src = "theorie2.gif"
praktijk1 = new Image(150,75)
praktijk1.src = "praktijk1.gif"
praktijk2 = new Image(150,75)
praktijk2.src = "praktijk2.gif"
function changeImg(cImg,ref) {
document.images[cImg].src = ref.src
}
</SCRIPT>
<TABLE align="center" cellpadding="20">Zie ook: hover
<TR>
<TD>
<A href="theorie.html" onmouseout="changeImg('imgtheorie',theorie1)"
onmouseover="changeImg('imgtheorie',theorie2)">
<IMG border=0 name=imgtheorie src="theorie1.gif" width="60%">
</A></TD>
<TD>
<A href="praktijk.html" onmouseout="changeImg('imgpraktijk',praktijk1)"
onmouseover="changeImg('imgpraktijk',praktijk2)">
<IMG border=0 name=imgpraktijk src="praktijk1.gif" width="60%">
</A></TD>
</TR></TABLE>
kalender
klik hier voor een mooie Microsoft kalender, kost wel wat downloadtijd...Deze is wat simpeler, kost ook niet zoveel tijd: (ik heb 'm vernederlandst en er kleine foutjes uitgehaald) Ik heb hem bij easyjavascript.com gevonden, maar daar staat 'ie niet meer...
Een nog wat compactere versie: MiniKal.
Of hier, een jaarkalender
Arrays
Een array is, in Javascript, een ééndimensionale verzameling. Wil je twee of meer dimensies, dan maak je een array van arrays (van arrays...). Voorbeeld: Code:<script language="Javascript">Let op: [y][x], niet [x][y]!
cijfer = new Array();
cijfer[0] = new Array(1, 2, 3, 4);
cijfer[1] = new Array(5, 6, 'zeven', 8);
cijfer[2] = new Array(9, 'A','B','C');
function p(a){document.write(a)};
p('<table align="center">');
for(y = 0; y<3; y++){
t = '<tr>';
for(x = 0; x<4; x++)t += '<td>'+cijfer[y][x]+'</td>';
t += '</tr>';
p(t);
}
p('</table>');
</script>
In Java kan je zonder meer een tig-dimensioneel array maken. Wat er
in feite in de computer gebeurt is dat er dan (onzichtbaar) een array
van arrays gemaakt wordt: een computergeheugen is een
één-dimensioneel array.
Zie ook java & javascript.
In HTML is een \ gewoon een \. In javascript (als in C, als in Unix) is een \ een 'escape', zoals in '\n', (nieuwe regel code, niet de letter 'n'). Wil je een \ gebruiken als scheidingsteken in een padnaam dan moet je \\ zeggen in javascript.
Voor de volledigheid: een \ onder DOS/Windows is een / onder Unix! De browser accepteert ze allebei in padnamen. Voorbeeld een stukje uit de keuzelijst van praktijk:
<li><A href="life\life.html" >life</a>
<li><A href="fotos/foto.html" >fotos</a>
Veel gebruikte scripts zoals het datumscript kan je in een bestand zetten en die dan zo gebruiken:
<SCRIPT language="JavaScript" src="datumscript.js">
</SCRIPT>
Terugknop
Deze knop werkt als de 'vorige' knop van de browser: De code is:
<INPUT TYPE="BUTTON" VALUE="naar vorige" onClick="history.back()">
hoog & breed
Applets hebben een hoogte en breedte bepaald door hun aanroep in HTML. In Java kan je vragen hoe die afmetingen zijn en daar dan rekening mee houden, bijvoorbeeld door alle tekenwerk op schaal te doen. De applet voor het smartie spel werkt zo.In HTML kan je vragen naar de schermgrootte, met javascript kan je die verwerken in de applet-aanroep. Zo kan je er voor zorgen dat een applet die voor 640x480 gemaakt is niet te klein wordt op een 1024x768 scherm. De smartie applet wordt (met de naam 'Saga.class') zo aangeroepen:
<script language="JavaScript">Je kunt dit proberen door tijdens het lopen van het smartie spel het browservenster te verkleinen (door met de rand of de rechteronderhoek te slepen) Klik daarna op vernieuwen en de applet wordt opnieuw, kleiner, getekend.
<!--
w = 640;
h = 480;
NS4Plus = (document.layers) ? 1 : 0;
IE4Plus = (document.all) ? 1 : 0;
if (NS4Plus) {
w = window.innerWidth;
h = window.innerHeight;
}
if (IE4Plus) {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
h = w*4*48/(7*60);
if(w<640) h +=10;
w = w*4/7;
document.write
('<applet code=saga\\Saga.class
width='+w+' height='+h+' align=left></applet>' );
//-->
</script>
De Mandelbrot applet gebruikt ditzelfde systeem om bijna schermvullend te worden afgebeeld.
Rare kronkels moet dit script maken om zowel bij NS als bij IE te werken. (Als het bij NS niet werkt dan is dat de schuld van de applet. IE is nogal fout-tolerant. In Java kan je een null-pointer hebben, die even later een waarde krijgt. NS is dan al afgeknapt, maar IE maakt er het beste van. Een goede programmeur maakt natuurlijk geen fouten zoals de niet geinitialiseerde pointer maar ik na al die jaren nog wel.)
Kijk bij de links voor meer over javascript. De code van die pagina begint met een script!
een popup venster
Klik popup voor een demo, code en verhaal over popup vensters.Kijk ook bij window .
Dit is een hele mooie: rolrechts. Gestolen van www.sjaan.nl, maar die gebruikt 'm niet meer...
Unicode
En dit is de eerste die ik helemaal zelf bedacht heb, zonder knip- en plakwerk:<SCRIPT LANGUAGE="JavaScript">Het resultaat zie je bij Unicode. Zo werkt het:
function p(a){document.write(a)};
function kop2(){
p('<tr><td colspan=11> ');
kop1()
}
function kop1(){
p('<TR><TD> <br> ');
for(x=0; x<10; x++) p('<TD width="30">.'+x);
}
p('<TABLE cellspacing="0" cellpadding="0" border="1" bordercolor="#ccccff">');
kop1();
for(y=3; y<900; y++){
if(!(y % 20)) kop2();
if(y==185)y=819;
ty = 10*y;
p('<TR><TD>'+y+'. ');
for(x=0; x<10; x++)p('<TD>&#'+ty++);
}
p('</TABLE>');
</SCRIPT>
- je moet weten dat document.write iets schrijft op de huidige pagina
- functie p(a) schrijft de inhoud van 'a' op de pagina. Die inhoud moet geldig HTML zijn, dat vervolgens wordt verwerkt
- de for... loops zijn precies als bij Java of C, met variabelen als in Basic: je hoeft ze niet vooraf te declareren.
- de functie p print een string, in die string doet + het koppelen van substrings, niet optellen.
- deze regel:
c = x + 10*y;werkt precies als in Java of C. Als x en y allebei 3 zijn wordt c 33.
- deze regel:
p('<td width="20">&#'+ c +'</td>');
maakt, als c 33 is: ! wat als resultaat ! op het scherm zet.
Jawel, ASCII, code uit 1963!
(en het is al lang niet meer mijn eerste script. Ik maakte deze versie met 'table' omdat allerlei codes rare dingen doen met hun breedte. Door ze in een tabel te vangen heb je daar geen last van.)
Ook leuk, het tweede script dat ik zelf bedacht: tabel en script. De eerste maakt een schaakbord uit een tabel, de tweede genereert diezelfde tabel met javascript. Identiek resultaat maar de code is ruim 4K voor de tabel en 1.5K voor het script.
prompt
Dit heb je bij het begin getikt: .max
<script>Dit script produceert 20 verschillende getallen, zoals je mag verwachten. Maak je de beginwaarde van i groter, door er één 0 achter te zetten dan worden er 20 dezelfde getallen getoond. Met andere woorden: een getal heeft maximaal 16 cijfers. Onderscheid tussen 'int', 'float' of 'double' maakt Javascript niet: een getal is een rij cijfers, al-dan-niet van plus of min en een decimale punt voorzien.
i = 1234567890123450;
for(j = 0; j<20; j++){
document.write(i+'<br>');
i++;
}
</script>
Een getal als is zo gemaakt:
<SCRIPT LANGUAGE="JavaScript">
document.write(1e20);
</SCRIPT>
var
Zoals gezegd heten alle variabelen 'var'. Zelfs dat hoef je er niet bij te zetten, zie scriptje bij 'max', hierboven. Dat maakt het soms moeilijk om een getal van een tekst te onderscheiden.
werd gemaakt door:
<SCRIPT LANGUAGE="JavaScript">De lege string "" is voldoende om de rest ook als string te zien
document.write(1+2+3);
document.write('<br>');
document.write(""+1+2+3);
</script>
Voor een combinatie van javascript, style, form en tables: Spreadsheets of Periodiek systeem, meneer Ohm, de eeuwigdurende kalender of het
(schaak) naspeel script.
Puur rekenwerk: Romein. Nog puurder: rekenmachine. Het verschil met Java
Reverse Astrology, niet mijn site, wel (gedeeltelijk) mijn werk. Ook hier een combinatie als boven. Leuke site, ik wou dat ik 'm zelf bedacht had.
Carnaval, nou niet het eerste waar je, bij mij, aan denkt. Inhoudelijk, zoals dat tegenwoordig heet, niet mijn werk, maar het javascript wel. Ik ben erg trots op het aftelscript, waar paus Gregorius nog aan heeft meegewerkt.
Kijk maar niet naar kruis.
En die prachtige sinus is ook Javascript:
Een hele nieuwe: levensverwachting.
Nog eentje met een staafdiagram: barometer.