Basiscursus javascript en jQuery
Een website bouwen
Natuurlijk is het uiteindelijk de bedoeling dat de informatie niet in de console weergegeven wordt maar in een HTML pagina geplaatst wordt. En dat de gebruiker vanuit die pagina opdrachten kan geven aan het script.
In de opdracht arrays heb je geleerd hoe je jQuery objecten maakt en in de pagina plaatst.
Dit gaan we nu gebruiken om een website dynamisch op te bouwen.
Laten we beginnen met een voorbeeld met wat tekst, foto’s en knoppen .
- Maak een nieuw project aan.
- De foto’s staan altijd in een map met de naam images in de projectmap.
Maak in de projectmap een map images - Download hier de foto’s die je gaat gebruiken.
Plaats de foto’s in de map images.
In deze map staat ook een tekstbestand. Deze tekst heb je later in deze opdracht nodig. - Bouw stap voor stap mee met het voorbeeld.
- Controleer na elke stap in de browser of je de code goed hebt gemaakt.
Kijk ook in de console om foutmeldingen te zien en om te controleren of er ook gebeurt wat jij wilt. - Ga pas verder met een volgend blok als alles goed werkt en als je echt begrijpt hoe het werkt.
HTML - De wrapper
We beginnen net het maken van een div in het bestand index.html.
We geven deze div de id wrapper
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Alles wat je altijd al over fruit wilde weten</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" type="text/css" href="style.css"> <script type="litespeed/javascript" data-src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="litespeed/javascript" data-src="code.js"></script> </head>
<body>
<div id = "wrapper"></div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.prikkels.info/wp-content/litespeed/js/6bc87fe410d2abca2950ed2901eeceee.js?ver=c0fa7"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
CSS - Maak het zichtbaar
Dan schakelen we over naar het bestand style.css.
Nadat we enkele standaard rules gemaakt hebben geven we de body en de wrapper enkele eigenschappen mee.
In de CSS-rule met de asterisk (*) op regel 2 tot 6 maken we enkele declaraties die voor alle elementen in het project gelden.
We noemen deze rule een CSS reset
Een h1 tag heeft bijvoorbeeld standaard een margin van ongeveer 10px.
Die wordt met deze rule teruggezet naar 0px
het gedeelte van de interface van een webbrowser waarbinnen de inhoud van een website wordt weergegeven heet de viewport.
In de code wordt dat body genoemd.
Met de CSS-rule op regel 7 tot 10 krijgt de viewport een breedte en een hoogte, namelijk de actuele hoogte en breedte van het browserscherm.
De wrapper geven we ook wat uiterlijke kenmerken.
Met position en margin zetten we de wrapper horizontaal in het midden van de body.
Met width en height geven we het een afmeting en met background-color maken we hem zichtbaar.
De background zullen we later weer verwijderen. Die is er nu tijdelijk toegevoegd om de wrapper ook zonder inhoud zichtbaar te maken. Dat is gemakkelijk tijdens het werken.
@charset "UTF-8";
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
html, body{
width: 100%;
height: 100%;
}
#wrapper{
position: relative;
margin: 0 auto;
width: 80%;
height: 90%;
background-color: lightgreen;
}
Het menu
En nu dan eindelijk naar code.js om met ons eerste serieuze script te gaan beginnen.
Op regel 3 maken we een variabele menu van het type object
Tussen de haakjes achter het jQuery symbool typen we tussen aanhalingstekens een stukje HTML-code.
Voordat we verder gaan geef ik hier een korte uitleg over het opbouwen van het object. We doen dat met de volgende coderegel:
var menu = $(“<div id = ‘menu’></div>”);
- Eerst maken we een variabele met de naam menu waarin het object dat we gaan bouwen opgeslagen kan worden.
- Met $(); wordt aangegeven dat er een jQuery object gemaakt wordt.
- Tussen de haakjes plaatsen we een string met het HTML element dat we willen maken. In dit geval een div.
- Bij het geven van een id aan het element gebruiken we enkele aanhalingstekens omdat met dubbele aanhalingstekens de string afgebroken zou worden.
Het object is dus een div-element met de id menu.
Op regel 4 plaatsen we dat object in de wrapper.
In het CSS-bestand geven we de div menu een uiterlijk.
De achtergrondkleur is tijdelijk. Als het werk klaar is verwijderen we die weer, maar voor nu is het een gemakkelijk controlemiddel.
$(document).ready(function(){
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
}
#menu{
position: relative;
width: 100%;
height: 50px;
background-color: lightcoral;
}
De knoppen
Dan gaan we nu de buttons maken.
Op regel 6 van het voorbeeld maken we een array fruit met daarin de woorden die op de buttons moeten komen.
Op regel 8 tot 11 zien we een for-loop.
De for-loop maakt voor elk element in de array fruit een object button.
Zodra een button gemaakt is wordt deze in de div menu geplaatst.
Als je de werking van de for-loop niet goed begrijpt ga je even terug naar deze pagina om je kennis op te frissen.
Met CSS geven we wat uiterlijke kenmerken aan de buttons.
Voeg ook de text-align regel toe aan #menu.
$(document).ready(function(){
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
}
#menu{
position: relative;
width: 100%;
height: 50px;
text-align: center;
background-color: lightcoral;
}
.btn{
display: inline-block;
padding: 20px 10px 10px 10px;
}
De tekst klaarzetten voor gebruik
We maken een array waarin we de tekst over fruit opnemen.
De tekst staat in het tekstbestand in de map images.
Kijk goed in het voorbeeld hoe de structuur van de array is.
Let ook op de inline tag <br>
$(document).ready(function(){
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
Een pagina maken
De knoppen zijn gemaakt, maar nog niet klikbaar,
Dat komt later.
Nu gaan we de eerste pagina opbouwen.
We maken een nieuwe functie buildPage() waarin we een object gaan opbouwen en in de wrapper plaatsen.
Het object is een div waaraan we in de volgende stap inhoud gaan toevoegen.
Op de laatste regel van het script roepen we de buildPage functie aan.
De div wordt dan ook echt gemaakt en in de wrapper gezet.
Met CSS geven we de pagina een uiterlijk zodat we in firefox kunnen controleren of het werkt.
De achtergrondkleur is weer tijdelijk als controlemiddel toegevoegd.
$(document).ready(function(){
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
}
buildPage()
}
.page{
position: relative;
width: 100%;
height: 200px;
margin-top: 5px;
background-color:lightblue;
}
De kop en tekst toevoegen
We gaan verder met het opbouwen van de pagina in buildPage.
Nadat we de div in de wrapper hebben gezet maken we een object kop.
Dit is een h1-tag waarin we de waarde van het eerste element van de array fruit gaan plaatsen.
Om dat te doen maken we op de eerste regel van het script een globle variabele met de naam paginaNummer met de waarde 0.
Een globale variabele kan overal in het script gebruikt worden.
Als we in de buildPage functie fruit[paginaNummer] in de h1-tag zetten wordt het eerste element van fruit opgehaald en geplaatst.
Op dezelfde manier genereren we het object txt.
Daarin zetten we een p-tag met het eerste element uit de array beschrijving.
Tenslotte plaatsen we de objecten kop en txt in het object pagina.
$(document).ready(function(){
var paginaNummer = 0;
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
var kop = $("<h1>"+fruit[paginaNummer]+"</h1>");
var txt = $("<p>"+beschrijving[paginaNummer]+"</p>");
pagina.append(kop).append(txt);
}
buildPage()
});
De foto toevoegen
Nog steeds in dezelfde functie waar we de pagina opbouwen maken we een nieuw object met de naam foto.
In dit object maken we het HTML element img.
Bestudeer de opbouw van het object zorgvuldig.
Het pad naar de bron van het bestand moet correct genoteerd worden en ook de juiste extensie moet natuurlijk toegevoegd worden.
Vraag om extra uitleg als je het niet begrijpt!
Ook dit object plaatsen we met append in het object pagina dat zojuist is gemaakt.
$(document).ready(function(){
var paginaNummer = 0;
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
var kop = $("<h1>"+fruit[paginaNummer]+"</h1>");
var txt = $("<p>"+beschrijving[paginaNummer]+"</p>");
var foto = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/"+fruit[paginaNummer]+".png'>");
pagina.append(kop).append(txt).append(foto);
}
buildPage()
});
Display none & FadeIn
In het CSS verwijder je de achtergrondkleuren van het menu en de page. Die hebben we niet meer nodig.
Aan de page voegen we de regel display:none; toe.
De pagina zal daardoor niet weergegeven worden.
De image geven we een breedte van 100% zodat die dezelfde breedte krijgt als de wrapper.
In JS voegen we de regel pagina.fadeIn(500); toe.
Da pagina zal nu infaden. Deze animatie duurt 500 miliseconden.
.page{
position: relative;
width: 100%;
height: 200px;
margin-top: 5px;
display: none;
}
img{
width: 100%;
}
$(document).ready(function(){
var paginaNummer = 0;
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
var kop = $("<h1>"+fruit[paginaNummer]+"</h1>");
var txt = $("<p>"+beschrijving[paginaNummer]+"</p>");
var foto = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/"+fruit[paginaNummer]+".png'>");
pagina.append(kop).append(txt).append(foto);
pagina.fadeIn(500)
}
buildPage()
});
De knoppen klikbaar maken
Dan is het nu tijd om de knoppen klikbaar te maken.
Direct onder de builPage functie voegen we een nieuwe fucntie toe waarmee JS een klik op elk element met de classname btn kan detecteren.
We maken hier een lokale variabele met de naam gekozenFruit die als waarde krijgt; de tekst die op deze (this) knop staat.
Controleer in de console of de juiste tekst opgehaald wordt.
$(document).ready(function(){
var paginaNummer = 0;
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
var kop = $("<h1>"+fruit[paginaNummer]+"</h1>");
var txt = $("<p>"+beschrijving[paginaNummer]+"</p>");
var foto = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/"+fruit[paginaNummer]+".png'>");
pagina.append(kop).append(txt).append(foto);
pagina.fadeIn(500)
}
$('.btn').click(function(){
var gekozenFruit = $(this).text();
console.log(gekozenFruit);
});
buildPage()
});
Een nieuwe pagina maken
Als de juiste waarde in de variabele gekozenFruit bewaard is, gaan we kijken wat het volgnummer is van die waarde in de array fruit en slaan dat volgnummer op in de globale variabele paginaNummer.
Nu paginaNummer een nieuwe waarde heeft kan de functie buildPage opnieuw worden aangeroepen.
Er zal een nieuwe pagina opgebouwd worden en die zal onder de eerste pagina weergegeven worden.
Dat is uiteraard niet de bedoeling. We willen dat maar één pagina tegelijk gedisplayd wordt.
$(document).ready(function(){
var paginaNummer = 0;
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
var kop = $("<h1>"+fruit[paginaNummer]+"</h1>");
var txt = $("<p>"+beschrijving[paginaNummer]+"</p>");
var foto = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/"+fruit[paginaNummer]+".png'>");
pagina.append(kop).append(txt).append(foto);
pagina.fadeIn(500)
}
$('.btn').click(function(){
var gekozenFruit = $(this).text();
paginaNummer = fruit.indexOf( gekozenFruit )
buildPage()
});
buildPage()
});
fadeIn en fadeOut
Om de bestaande pagina te laten verdwijnen voegen we een regel toe aan de buildPage functie.
Met $(“.page”).fadeOut(500); faden we alle elementen met de classname page uit.
Pas daarna laten we de nieuwe pagina infaden.
Beide animaties duren weer een halve seconde, maar ze beginnen tegelijk.
Daardoor zal er bij de paginawisselen een onrustig beeld ontstaan.
Dat gaan we in de volgende stap oplossen.
$(document).ready(function(){
var paginaNummer = 0;
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
var kop = $("<h1>"+fruit[paginaNummer]+"</h1>");
var txt = $("<p>"+beschrijving[paginaNummer]+"</p>");
var foto = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/"+fruit[paginaNummer]+".png'>");
pagina.append(kop).append(txt).append(foto);
$(".page").fadeOut(500);
pagina.fadeIn(500)
}
$('.btn').click(function(){
var gekozenFruit = $(this).text();
paginaNummer = fruit.indexOf( gekozenFruit )
buildPage()
});
buildPage()
});
Timeout
Met de setTimeout functie laten we JS een halve seconde wachten voordat het codeblok in de timeout uitgevoerd wordt.
De fadeIn animatie start dus pas als de fadeOut klaar is.
$(document).ready(function(){
var paginaNummer = 0;
var menu = $("<div id = 'menu'></div>");
$('#wrapper').append(menu);
var fruit = ["fruit", "banaan", "druif", "mango", "aardbei"];
var beschrijving = ["Fruit komt in vele vormen en kleuren.<br>Elk stuk fruit heeft zijn eigen unieke vorm en kleur.",
"Bananen zijn lang en krom met een gladde, gele schil.<br> Binnenin zijn ze zacht en wit.",
"Druiven zijn klein, rond en komen in trossen.<br>Ze hebben een glanzende, vaak paarse of groene schil.",
"Mango's hebben een ovale vorm met een stevige, groene, gele of rode schil.<br>Hun vruchtvlees is oranje en sappig.",
"Aardbeien zijn klein, rood en hartvormig.<br>Ze hebben kleine zaadjes aan de buitenkant en een groene kroon bovenop."];
for(var i = 0 ; i < fruit.length ; i++){
button = $("<h3 class = 'btn'>"+fruit[i]+"</h3>");
menu.append(button);
}
function buildPage(){
var pagina = $("<div class = 'page'></div>");
$('#wrapper').append(pagina);
var kop = $("<h1>"+fruit[paginaNummer]+"</h1>");
var txt = $("<p>"+beschrijving[paginaNummer]+"</p>");
var foto = $("<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src='images/"+fruit[paginaNummer]+".png'>");
pagina.append(kop).append(txt).append(foto);
$(".page").fadeOut(500);
setTimeout(function(){
pagina.fadeIn(500)
}, 500);
}
$('.btn').click(function(){
var gekozenFruit = $(this).text();
paginaNummer = fruit.indexOf( gekozenFruit )
buildPage(paginaNummer)
});
buildPage()
});
Opdracht
Kennis en vaardigheden
- Bouw met behulp van de beschrijving bovenstaande website na.
- Voeg minimaal één extra pagina toe.
- Voeg op elke pagina minimaal één element toe. Dat kan een extra stukje tekst zijn, bijvoorbeeld een quote over het fruit dat op die pagina getoond en beschreven wordt.
- Maak met CSS de vormgeving aantrekkelijker.
- Vanuit JS een HTML-element aanroepen of bewerken.
- CSS reset
- Viewport
- Object
- Gebruik van enkele en dubbele aanhalingstekens.
- Globle variabele
- Lokale variabele
- FadeIn
- FadeOut
- Timeout
- This