Datum Nieuwe maan, Eerste kwartier, enz.
Maanstanden in de komende tijd:
Hierboven staan meldingen over de stand van de maan. Op deze bladzijde leg ik uit hoe je zoiets maakt voor je eigen website. De code kun je downloaden om zelf te gebruiken.
Het script is gebaseerd op het item Schijngestalte van de maan: Tekening in JavaScript.
Ik heb de tekening en een paar meldingen er uit gehaald. Globale variabelen hebben een andere naam gekregen om conflicten met
andere scripts te vermijden. Andere meldingen zijn toegevoegd.
- Er worden twee items besproken:
- De globale werking van het script.
- Inbouwen in je eigen site.
- De globale werking van het script
- De lengte van een maancyclus wordt vastgelegd, alsmede het aantal milliseconden in een etmaal. De datum van vandaag ("nu") wordt opgehaald bij de systeemklok.
- Eerst wordt het aantal dagen berekend tot Nieuwe Maan, Eerste kwartier, Volle Maan en Laatste Kwartier. Er wordt gerekend vanaf "nu".
- Het tijdstip van eerstvolgende Nieuwe Maan, Eerste Kwartier, enz., wordt bepaald.
- Berekend wordt welke van de vier schijngestalten het eerste aan de beurt is.
- Door aanroep van de function generateMessages() worden de resultaten in een string gezet. Die kun je op het scherm laten zien (zoals hier).
- Als je alleen de eerste regel wilt laten zien gebruik je
firstOnly(generateMessages()). - Om alle vier de meldingen tegelijk te krijgen vervang je return abc[0] door return abc in function firstOnly().
- De vier regels met meldingen worden gescheiden door <br>. Als het voor jouw toepassing handiger is om de regels
te scheiden door "\n" gebruik je
replaceBR(generateMessages()).
- Op de dagen van Nieuwe Maan, Eerste Kwartier, enz., kun je een aparte melding laten verschijnen. Daarvoor roep je perhapsToday()
aan.
- Inbouwen in je eigen site
- Het JavaScript staat in de file maanstand2.js. Dat link je in de <head>. Om het te gebruiken hoef je het niet veranderen, tenzij je iets aan de meldingen wilt wijzigen.
- Om de meldingen op het scherm of in een tooltip te krijgen heb je wat HTML en JavaScript nodig, zie onderaan de pagina.
- De <div id="meldingen"> kun je gebruiken om de meldingen op de pagina te positioneren en op te maken. De CSS die je daarvoor nodig hebt kun je in de <head> zetten.
- Voor de aparte melding over Nieuwe Maan, Eerste Kwartier, enz., kun je <div id="melding"> inzetten.
- Als je een tooltip wilt maken, voeg je aan het betreffende element twee attributen toe: title="" id="aaa".
Het id="aaa" gebruik je in de aanroep van firstOnly().
- tenslotte:
- De nauwkeurigheid van de berekeningen is beperkt. Afwijkingen tot één etmaal zijn mogelijk.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
#melding, #meldingen { margin-left:30px;
font:italic bold 12px/24px Georgia, serif }
</style>
<script type="text/javascript"></script>
(Zet dit in de <BODY>, op de plaats waar de meldingen in het document moeten komen).
<div id="melding"></div>
<p>Maanstanden in de komende tijd:</p>
<div id="meldingen"></div>
<script type="text/javascript">
// Meldingen op het scherm
document.getElementById('meldingen').innerHTML =
generateMessages();
// Maak een tooltip
document.getElementById('maan').title = firstOnly(generateMessages());
// Wat is het vandaag?
document.getElementById('melding').innerHTML = perhapsToday(); </script>
(Voeg deze attributen toe aan de elementen die een tooltip krijgen).
Op deze pagina is dat de paginatitel.
title="" id="maan"
Downloaden:
Druk op de knop:
File: voorb442.zip, 2075 bytes.
