Als u voor uw website geen CMS, blogsysteem, of sitebouwprogramma inzet, kan het onderhoud van de websitemenu's een tijdrovende bezigheid zijn. Javascript-includes kunnen de uitkomst zijn. Lees verder voor een instructie en achtergrondinformatie.
A.E.Veltstra
Origineel: 05-03-2002
Geheel herzien: 28-10-2012
Een doorsnee webpagina bestaat uit een of twee menu's ofwel indexen, en de rest van de pagina bevat een boodschap. Deze menu's zijn redelijk statisch, wat wil zeggen dat de index zelden veranderd zal worden. De index van onze Knowledge Base daarentegen daarentegen kent een hoge mutatiegraad; er zullen artikelen wegvallen en andere toegevoegd worden.
Vroeger, toen de pagina's in het OmegaJunior Consultancy nog niet werden gegenereerd door Publizjr, en ook geen gebruik maakten van frames, moesten deze indexen in de pagina's zelf worden opgenomen. Dat betekende, dat als een artikelindex wijzigt, dat alle webpagina's aangepast moesten worden.
Dit is een tijdrovende bezigheid, die voorkomen kan worden. Sommige mensen geven er daarom de voorkeur aan hun website te onderhouden met een speciaal daarvoor gemaakt programma, zoals Macromedia Dreamweaver, Adobe Go!Live, Claris Clickworks, Microsoft Frontpage of zelfs Microsoft Interdev. Deze programma's hebben alle hun eigen voor- en nadelen, waar dit artikel niet op in zal gaan.
Als u op dezelfde wijze denkt als ik, dan gebruikt u BareBones BB-Edit, Microsoft Notepad of een andere simpele tekstverwerker om uw pagina's te onderhouden. Dan wilt u niet telkens alle artikelen aanpassen als er een artikel bijkomt, enkel om de artikelindexwijziging door te voeren.
U wilt de indexen eenmaal aanmaken, en als u één index aanpast, wilt u dat gelijk voor alle pagina's hebben aangepast. En u wilt geen enkel artikel aanpassen enkel omdat u de index wijzigt.
Het best kunt u dan gebruik maken van een zogeheten include: een bestand dat ingevoegd wordt in een ander bestand.
Nu zijn er voor webpagina's twee soorten includes. Er zijn zogeheten server-side includes, en er zijn client-side includes.
Server-side includes worden door de webserver gelezen. De bezoeker van de pagina hoort er niets van te merken. Dergelijke includes worden bijvoorbeeld gebruikt om telkens dezelfde functies aan een e-commerce-pagina toe te voegen. Er wordt een html-tag voor gebruikt:
Het bestand kan verschillende formaten hebben, afhankelijk van de bestandstypen dat door de webserver gelezen kan worden. Op een Microsoft Internet Information Server bijvoorbeeld, zullen includes voornamelijk het ASP-formaat hebben.
Het nadeel van server-side includes is, dat zij alleen door een webserver uitgevoerd kunnen worden. Als u de pagina van een lokale harde schijf zou oproepen, zou de include niet ingevoegd worden. Ook moet de provider zijn server zodanig hebben ingesteld dat u van server-side includes gebruik kunt maken. Op zo'n moment kunt u beter kiezen voor een client-side include.
Client-side includes worden door de browser (oftwel de "client") omgezet en ingevoegd in de webpagina. Ze worden meestal opgebouwd in een scripttaal, liefst een die door zoveel mogelijk browsers ondersteund wordt.
Als u een intranetsite bouwt, kunt u zelf bepalen welke scripttaal gebruikt wordt. Voor het www raad ik het gebruik van ecmascript aan. Dit wordt door vele browsers ondersteund, hoewel Netscape en Microsoft het nodig vinden er zelf een draai aan te geven in de vorm van JavaScript en JScript.
Onderstaande scripttag is een voorbeeld van de include-code:
Deze scripttag conformeert aan de html4.0 standaard van het w3c (world wide web standaardenconsortium).
U begrijpt dat de src-eigenschap van de scripttag aangeeft welk bestand gelezen moet worden. De inhoud van dat bestand wordt gelezen en in de webpagina ingevoegd. Het pad naar de include wordt op dezelfde wijze opgebouwd als elke andere url (webadres).
Hoe ziet nu de inhoud in zo'n include eruit? Voor het grootste deel is dat afhankelijk van het resultaat dat u wilt bereiken. Onze Knowlegde Base, Portfolio, en Muziekindex plaatsen hun inhoud als JSON, die vervolgens door onze FacetEngine wordt weergegeven. Dat is aardig complex.
Hier een simpel voorbeeld:
U herkent in dit ene regeltje maar liefst drie talen. In het centrum staat gewone tekst, de boodschap die overgebracht moet worden. Daaromheen staat html-code, die aan de boodschap een stukje opmaak toekennen. Als derde taal treft u javascript aan: de functie die gegevens naar een document schrijft.
Achter de opdracht staat een puntkomma. Deze vertelt aan de javascript-motor dat de regel is afgelopen, en dat er aan de uitvoering van een volgende regel kan worden begonnen.
In de opdracht document.write() verwijst het woord "document" naar het object waarin geschreven gaat worden. Dit is meestal de webpagina zelf. Op deze manier komt het in te voegen bestand precies op die plaats terecht, waar de include-code staat.
Zo kun je includes opnemen in elk segment van een webpagina: de head, de body of ergens in een tabelcel.
Codeer ze!
Vroeger, toen de pagina's in het OmegaJunior Consultancy nog niet werden gegenereerd door Publizjr, en ook geen gebruik maakten van frames, moesten deze indexen in de pagina's zelf worden opgenomen. Dat betekende, dat als een artikelindex wijzigt, dat alle webpagina's aangepast moesten worden.
Dit is een tijdrovende bezigheid, die voorkomen kan worden. Sommige mensen geven er daarom de voorkeur aan hun website te onderhouden met een speciaal daarvoor gemaakt programma, zoals Macromedia Dreamweaver, Adobe Go!Live, Claris Clickworks, Microsoft Frontpage of zelfs Microsoft Interdev. Deze programma's hebben alle hun eigen voor- en nadelen, waar dit artikel niet op in zal gaan.
Als u op dezelfde wijze denkt als ik, dan gebruikt u BareBones BB-Edit, Microsoft Notepad of een andere simpele tekstverwerker om uw pagina's te onderhouden. Dan wilt u niet telkens alle artikelen aanpassen als er een artikel bijkomt, enkel om de artikelindexwijziging door te voeren.
U wilt de indexen eenmaal aanmaken, en als u één index aanpast, wilt u dat gelijk voor alle pagina's hebben aangepast. En u wilt geen enkel artikel aanpassen enkel omdat u de index wijzigt.
Het best kunt u dan gebruik maken van een zogeheten include: een bestand dat ingevoegd wordt in een ander bestand.
Nu zijn er voor webpagina's twee soorten includes. Er zijn zogeheten server-side includes, en er zijn client-side includes.
Server-side includes worden door de webserver gelezen. De bezoeker van de pagina hoort er niets van te merken. Dergelijke includes worden bijvoorbeeld gebruikt om telkens dezelfde functies aan een e-commerce-pagina toe te voegen. Er wordt een html-tag voor gebruikt:
<!-- #include file="mijninclude" -->Het bestand kan verschillende formaten hebben, afhankelijk van de bestandstypen dat door de webserver gelezen kan worden. Op een Microsoft Internet Information Server bijvoorbeeld, zullen includes voornamelijk het ASP-formaat hebben.
Het nadeel van server-side includes is, dat zij alleen door een webserver uitgevoerd kunnen worden. Als u de pagina van een lokale harde schijf zou oproepen, zou de include niet ingevoegd worden. Ook moet de provider zijn server zodanig hebben ingesteld dat u van server-side includes gebruik kunt maken. Op zo'n moment kunt u beter kiezen voor een client-side include.
Client-side includes worden door de browser (oftwel de "client") omgezet en ingevoegd in de webpagina. Ze worden meestal opgebouwd in een scripttaal, liefst een die door zoveel mogelijk browsers ondersteund wordt.
Als u een intranetsite bouwt, kunt u zelf bepalen welke scripttaal gebruikt wordt. Voor het www raad ik het gebruik van ecmascript aan. Dit wordt door vele browsers ondersteund, hoewel Netscape en Microsoft het nodig vinden er zelf een draai aan te geven in de vorm van JavaScript en JScript.
Onderstaande scripttag is een voorbeeld van de include-code:
<script type="text/javascript" src="mijninclude.js"></script>Deze scripttag conformeert aan de html4.0 standaard van het w3c (world wide web standaardenconsortium).
U begrijpt dat de src-eigenschap van de scripttag aangeeft welk bestand gelezen moet worden. De inhoud van dat bestand wordt gelezen en in de webpagina ingevoegd. Het pad naar de include wordt op dezelfde wijze opgebouwd als elke andere url (webadres).
Hoe ziet nu de inhoud in zo'n include eruit? Voor het grootste deel is dat afhankelijk van het resultaat dat u wilt bereiken. Onze Knowlegde Base, Portfolio, en Muziekindex plaatsen hun inhoud als JSON, die vervolgens door onze FacetEngine wordt weergegeven. Dat is aardig complex.
Hier een simpel voorbeeld:
document.writeln("<" + "h1>Hallo, wereld!</h1>");U herkent in dit ene regeltje maar liefst drie talen. In het centrum staat gewone tekst, de boodschap die overgebracht moet worden. Daaromheen staat html-code, die aan de boodschap een stukje opmaak toekennen. Als derde taal treft u javascript aan: de functie die gegevens naar een document schrijft.
Achter de opdracht staat een puntkomma. Deze vertelt aan de javascript-motor dat de regel is afgelopen, en dat er aan de uitvoering van een volgende regel kan worden begonnen.
In de opdracht document.write() verwijst het woord "document" naar het object waarin geschreven gaat worden. Dit is meestal de webpagina zelf. Op deze manier komt het in te voegen bestand precies op die plaats terecht, waar de include-code staat.
Zo kun je includes opnemen in elk segment van een webpagina: de head, de body of ergens in een tabelcel.
Codeer ze!
Need problem solving?
Talk to me. Let's meet for coffee or over lunch. Mail me at “omegajunior at protonmail dot com”.