Met een selectielijst kunnen gebruikers kiezen welk artikel ze willen lezen. Daar niet elke gebruiker alle artikels zal lezen, gaan we de artikels pas laden als ze aangevraagd worden. Het laden van alle artikels in één pagina zou de bestandsgrootte van de webpagina zo groot maken dat de webpagina zeer traag zou laden. M.a.w. we gaan AJAX gebruiken om de webpagina snel te houden en de artikels pas te laden en weer te geven als de de gebruiker er om vraagt.
Maak een webpagina met een lichtgroene achtergrond met:
een selectielijst,
daaronder een aanpasbare div.
De HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tuingids</title> </head> <body style="background-color:#F4FAEC"> <select name="tipkeuze" size="1" style="margin-left:10%"> <option>Kies een artikel uit onze Tuingids</option> <option value="tuingids/bolgewassen/blauwedruif.html">Bruisende blauwe druif, Muscari</option> <option value="tuingids/bolgewassen/bloembollen.html">Bloembollen: planten in het voorjaar</option> <option value="tuingids/bolgewassen/bollenbalkon.html">Bollenbalkon: Een, twee, drie.. en het is lente!</option> <option value="tuingids/bolgewassen/bollenmode.html">Interieurtrends: Bollenmode</option> <option value="tuingids/bolgewassen/galtonia.html">Geurende Galtonia, Kaapse hyacint</option> <option value="tuingids/bolgewassen/lenteborder.html">Kleurrijke lenteborder</option> <option value="tuingids/bolgewassen/parkiettulpen.html">Extra vrolijke tulpen: Parkiettulpen</option> <option value="tuingids/bolgewassen/tulpen.html">Tulpentrends: Veelzijdige tulpen</option> </select> <div id="inhoud"></div> </body> </html>
Zorg ervoor dat de webpagina AJAX kan gebruiken.
Zorg ervoor dat bij het maken van een keuze in de selectielijst een functie wordt uitgevoerd:
de functie gebruikt AJAX om een onderdeel van de webpagina in een bestand op de webserver te laden (de URL van het bestand is de waarde van de geselecteerde optie),
het met AJAX opgehaalde bestand moet weergeven worden in de aanpasbare div tag.
Voeg de artikels in zomerbollen.html en bloesempracht.html toe aan de selectielijst.
Publiceer alle onderdelen van deze oefening naar de webserver van de school.
Gebruik daarvoor de volgende gegevens:
Verbinding maken via: FTP
FTP-adres: .................................................... (vragen aan leerkracht)
Gebruikersnaam: pcXX (waarbij je XX moet vervangen door het cijfer op uw computer, vb: pc01)
Wachtwoord: snt+456
Passieve FTP gebruiken
Je kunt de publicatie testen door te surfen naar http://................../pcXX/webpagina.html.
We maken een dynamische pagina waarbij een keuze in een selectielijst een bijhorende selectielijst laat verschijnen, waardoor de gebruiker steeds dichter bij zijn doel komt. Vooral bij een grote diversiteit is dit de meest aangeraden manier van werken.
Maak een webpagina met een tabel met één rij en twee kolommen.
De eerste cel bevat:
een Kop 2 met de tekst Informatica,
daaronder een alinea met een selectielijst met de opties Richting, Webdesign en Kantoor; de optie Webdesign heeft als waarde keuzemenu/webdesign.html en de optie Kantoor de waarde keuzemenu/kantoor.html;
daaronder een aanpasbare alinea voor de selectielijst met het vakmenu;
daaronder een aanpasbare alinea voor de selectielijst met het graadmenu.
De tweede aanpasbare cel zal de inhoud van de gekozen cursus weergeven.
De HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dynamisch keuzemenu</title> </head> <body> <table border="0"> <tr> <td valign="top"><h3>Informatica</h3> <p> <select name="richting" id="richting"> <option>Richting</option> <option value="keuzemenu/webdesign.html">Webdesign</option> <option value="keuzemenu/kantoor.html">Kantoor</option> </select> </p> <p id="vakmenu"></p> <p id="graadmenu"></p> </td> <td valign="top" id="inhoud"></td> </tr> </table> </body> </html>
Zorg ervoor dat de webpagina AJAX kan gebruiken.
Zorg ervoor dat bij het maken van een keuze in de selectielijst een functie wordt uitgevoerd:
de functie gebruikt AJAX om een onderdeel van de webpagina in een bestand op de webserver te laden (de URL van het bestand is de waarde van de geselecteerde optie),
het met AJAX opgehaalde bestand moet weergeven worden in een tag met een id die je met de functie meegeeft.
Het bestand voor de optie Kantoor bevat een selectielijst:
met drie opties:
Tekstverwerking met de waarde keuzemenu/kantoor/tekstverwerking.html,
Rekenblad met de waarde keuzemenu/kantoor/rekenblad.html,
Database met de waarde keuzemenu/kantoor/database.html,
en roept bij een selectie de reeds geschreven functie aan.
Het bestand voor de optie Tekstverwerking bevat een selectielijst:
met twee opties:
Deel 1 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Deel 2 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
en roept bij een selectie de reeds geschreven functie aan.
Het bestand voor de optie Rekenblad bevat een selectielijst:
met vier opties:
Deel 1 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Deel 2 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Programmeren 1 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Programmeren 2 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
en roept bij een selectie de reeds geschreven functie aan.
Het bestand voor de optie Database bevat een selectielijst:
met vijf opties:
Deel 1 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Deel 2 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Programmeren 1 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Programmeren 2 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Programmeren 3 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
en roept bij een selectie de reeds geschreven functie aan.
Het bestand voor de optie Webdesign bevat een selectielijst:
met drie opties:
Dreamweaver,
JavaScript,
PHP,
en roept bij een selectie de reeds geschreven functie aan.
Het bestand voor de optie Dreamweaver bevat een selectielijst:
met drie opties:
Deel 1 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Deel 2 met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
Eindwerk met als waarde de URL naar een reeds bestaande webpagina met de inhoud,
en roept bij een selectie de reeds geschreven functie aan.
Bij het bestand voor de opties JavaScript en PHP heb je een probleem, daar zijn namelijk geen graden. M.a.w. De inhoud van de cursus moet direct zichtbaar worden. Dit kan enkel door in de HTML code een stuk JavaScript op te nemen. De JavaScript code moet zonder enige actie vanwege de gebruiker de juiste inhoud tonen.
Zorg ervoor dat deze JavaScript code door AJAX wordt uitgevoerd.
Publiceer alle onderdelen van deze oefening naar de webserver van de school. Test de gepubliceerde webpagina.
WeergevenModerne browsers zijn veel sneller dan hun voorgangers. Deze snelheidswinst in deels te wijten aan een techniek die als twee druppels water lijkt op AJAX. Moderne browsers gaan alle externe bestanden die op de webpagina (in de body tag) gebruikt worden tegelijkertijd laden na het weergeven van de webpagina zonder de externe bestanden. M.a.w. alle HTML onderdelen die in het HTML bestand zitten worden weergegeven en pas daarna worden de afbeeldingen geladen en weergegeven. Je kunt dan reeds beginnen met het lezen van de tekst terwijl de afbeeldingen en reclameboodschappen nog aan het laden zijn.
In de volgende oefening gaan we dus geen gebruik maken van AJAX, maar van de ingebouwde laadtechnieken van moderne browsers.
Maak een webpagina met een Kop 1 (h1) met de tekst Brugge in beeld.
Daaronder plaats je een aanpasbare span tag met de volgende CSS stijl:
absoluut gepositioneerd.
Daaronder plaats je achttien span tags met de weer te geven foto's met een hoogte van 135 beeldpunten. Deze hoogte zorgt ervoor dat alle foto's onafhankelijk van hun werkelijke grootte even hoog en zonder vervorming worden weergegeven.
De HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Foto's Brugge</title> </head> <body> <h1>Brugge in beeld</h1> <span id="aandacht" style="position:absolute"></span> <span><img src="fotos/begijnenkerk.jpg" height="135" /></span> <span><img src="fotos/begijnhof.jpg" height="135" /></span> <span><img src="fotos/belfort_1.jpg" height="135" /></span> <span><img src="fotos/belfort_2.jpg" height="135" /></span> <span><img src="fotos/de_halve_maan_1.jpg" height="135" /></span> <span><img src="fotos/de_halve_maan_2.jpg" height="135" /></span> <span><img src="fotos/grote_markt.jpg" height="135" /></span> <span><img src="fotos/minnewater_park.jpg" height="135" /></span> <span><img src="fotos/onze_lieve_vrouwekerk.jpg" height="135" /></span> <span><img src="fotos/onze_lieve_vrouwekerk_binnen.jpg" height="135" /></span> <span><img src="fotos/provinciaal_hof.jpg" height="135" /></span> <span><img src="fotos/rijen.jpg" height="135" /></span> <span><img src="fotos/sint_salvatorskathedraal.jpg" height="135" /></span> <span><img src="fotos/stadhuis_1.jpg" height="135" /></span> <span><img src="fotos/stadhuis_2.jpg" height="135" /></span> <span><img src="fotos/van_eyck_plein.jpg" height="135" /></span> <span><img src="fotos/walplein.jpg" height="135" /></span> <span><img src="fotos/windmolen.jpg" height="135" /></span> </body> </html>
Zorg dat bij het aanwijzen met de muis van een span tag met een foto een functie wordt uitgevoerd waarmee we de foto ter plaatse wat groter weergeven. Deze functie heeft de volgende kenmerken:
De functie ontvangt het adres van de aangewezen tag.
Berekent de positie van de tag en verschuiven die positie telkens tien beeldpunten naar boven en naar links:
links = adres.offsetLeft - 10; boven = adres.getElementsByTagName('img')[0].offsetTop - 10; // fout in IE en Firefox
Bij de berekening van de y coördinaat in de variabele boven gebruik je de positie van de eerste in de span tag aanwezige img tag omdat de berekening van de y coördinaat van de span tag in Internet Explorer en Firefox foutieve resultaten oplevert.
Deze positie geef je door aan de absoluut geplaatste span tag met het id aandacht. Dit gaat via een CSS stijl voor de x positie met:
document.getElementById('aandacht').style.left = links + "px";
Pas op een gelijkaardige manier de y positie (CSS stijl top) aan.
Kopieer de inhoud van de aangewezen span tag naar de span tag met het id aandacht.
Vervang in de inhoud van de span tag met het id aandacht de hoogte van de afbeelding van 135 door 155 (Tip: denk aan een String object methode).
Maak bij het met de muis verlaten van de span tag met het id aandacht deze tag leeg, waardoor deze niet meer in de browser wordt weergegeven.
Bij het aanwijzen van elke foto wordt deze nu iets groter weergeven.
Plaats op de webpagina een aanpasbare span tag voor het weergeven van een grotere foto. Deze span tag gebruikt CSS om de inhoud rechts uit te lijnen, wordt absoluut geplaatst, heeft een zwarte achtergrond en witte tekst. De HTML code:
<span id="groter" style="text-align: right; position:absolute; background-color: #000; color: #FFF;"></span>
Zorg dat bij het klikken op de span tag met het id aandacht een functie wordt uitgevoerd. Deze functie heeft de volgende kenmerken:
Plaats in de span tag met het id groter de HTML code
<span style="cursor: pointer;">Originele resolutie</span><span style="cursor: pointer;" title='Afsluiten'> X </span><br />
gevolgd door de inhoud van de span tag met het id aandacht. De extra HTML code zorgt voor twee tekstknoppen.
Om de foto's op normale grootte weer te geven moet je de eigenschap height van de afbeelding in de span tag met het id groter verwijderen, dit kan met:
document.getElementById("groter").getElementsByTagName('img')[0].removeAttribute("height");
Schrijf een functie waarmee je een absoluut geplaatste span tag met id kunt centreren als je weet dat:
window.innerHeight (Width) de hoogte (breedte) van het browservenster teruggeeft,
adres.offsetHeight (Width) de hoogte (breedte) van een tag met een adres teruggeeft,
adres.style.top (left) de CSS stijl is waarmee je de afstand tussen de bovenste (linker) rand van het browservenster en de bovenste (linker) rand van de tag met een adres bepaald.
Gebruik deze functie om de grote foto te centreren.
Bij het klikken op een foto wordt deze nu groter in het midden van de webpagina weergegeven.
Zorg dat bij het klikken op de tekstknop X een functie wordt uitgevoerd waarmee de grote foto van het scherm verdwijnt.
Zorg dat bij het klikken op de tekstknop Originele resolutie een functie wordt uitgevoerd die de volgende aanpassingen aan de span tag met het id groter uitvoert:
De knoptekst 'Originele resolutie' wordt aangepast naar 'Verkleinen'.
I.p.v. de foto's uit de map fotos weer te geven, moeten de foto's uit de map fotosgroot worden weergegeven. Daarbij hebben de foto's dezelfde bestandsnamen.
Met de volgende opdracht kan je aan de img tag in de span tag met het id groter het onload event aanpassen om na het laden van de grote foto deze te centreren:
document.getElementById('groter').getElementsByTagName('img')[0].onload = function() { centreer(); };
Zorg dat bij het klikken op de tekstknop Verkleinen een functie wordt uitgevoerd waarmee de foto in de span tag met het id groter terug de grote niet gemaximaliseerde foto gecentreerd op de webpagina toont. Vergeet de tekstknop niet aan te passen.
Weergeven