JavaScript & jQuery

JavaScript & jQuery twee woorden die je vast wel is voorbij hebt horen komen of gezien, maar wat houden ze nou nou precies in? JavaScript is de programeertaal van het wereldwijde web. Javascript wordt gebruikt om webpagina's interactief te maken. JavaScript is een client-side script taal wat betekent dat de javascript mee geleverd wordt met de webpagina en dat jouw eigen webbrowser de code uitvoert.
updated: Apr 30, 2020 at 10:33AM | published: Apr 23, 2020

JavaScript & jQuery twee woorden die je vast wel is voorbij hebt horen komen of gezien. Ook als je geen developer bent heb je dagelijks te maken met deze twee software talen maar wat houden ze nou nou precies in?

JavaScript is de programmeertaal van het wereldwijde web. Javascript wordt gebruikt om webpagina’s interactief te maken en om webapplicaties te maken. Met JavaScript op je webpagina’s gaat er een wereld aan mogelijkheden voor je open om je webpagina’s interactief te maken. JavaScript is een client-side script taal wat betekent dat de javascript mee geleverd wordt met de webpagina en jouw eigen web browser het script uitvoert als de pagina geladen wordt.

 Met JavaScript op je webpagina kan je gebruik maken van een hele hoop functionaliteit van html bijvoorbeeld het onclick of het onchange event. Denk bijvoorbeeld is aan een website pagina waar als je ergens op klikt er een stukje text verschijnt. Of als je op een blog pagina bent en je klikt op vorige pagina, je blijft nog steeds op dezelfde pagina maar er verschijnen nieuwe artikelen. En zo kan ik nog wel even doorgaan met voorbeelden noemen. Zoals je je kunt indenken is JavaScript niet meer weg te denken uit het huidige web dit komt mede omdat het ondersteunt wordt door alle grote web browsers wat het een werkelijk veelzijdige ontwikkelingstaal maakt.

Hieronder 2 kleine voorbeeldjes wat javascript kan doen

— Voorbeeld 1 —

JS

<button onclick=”tijd()”>Hoe laat is het?</button>
<button style=”float:right;” class=”lght_button” onclick=”tijdWeg()”>Haal de tijd weg</button>

<p id=”tijd”></p>

<script>

function tijd() {
      var huidigeTijd = new Date();
      document.getElementById(’tijd’).innerHTML = huidigeTijd;
}

function tijdWeg() {
      document.getElementById(’tijd’).innerHTML = “”;
}
</script>

 Het eerste JavaScript voorbeeld is een stukje code met 2 buttons de linker haalt de huidige tijd op en zet het in een tekst veld en de rechterknop maakt het tekst veld leeg. Dit is natuurlijk een heel eenvoudig voorbeeld maar het laat wel leuk zien hoe JavaScript je website interactief kan maken. Dit zijn beide voorbeelden van onclick events als je op de linker knop klikt wordt de functie tijd() uitgevoerd.

— Voorbeeld 2 —
logo

JS

<img id=”logo” onmouseover=”rotateRight()” onmouseout=”returnToStart()” border=”0″ src=”https://4bis.nl/wp-content/uploads/2019/06/4bis_logo2018-2.png” alt=”logo” width=”200″ height=”auto”>

<script>
function rotateRight() {
       var logo = document.getElementById(“logo”);
       logo.classList.add(“rotate”);
}

function returnToStart() {
       var logo = document.getElementById(“logo”);
       logo.classList.remove(“rotate”);
}
</script>
<style>

.rotate {
       animation: rotation 2s infinite linear;
}

@keyframes rotation {
       from {
              transform: rotate(0deg);
       }
       to {
              transform: rotate(359deg);
       }
}
</style>

Het tweede JavaScript voorbeeld is ons eigen logo maar als je er met je muis overheen gaan zal er wat gebeuren. Dit voorbeeld maakt gebruik van 2 muis events het eerste is het onmouseover event en het tweede is onmouseout event. De naamgeving is redelijk vanzelfsprekend het onmouseover event voert de functie rotateRight() uit zodra de gebruiker zijn muis over het HTML element beweegt. En het onmouseout event voert de functie returnToStart() uit zodra de gebruiker met zijn muis uit het element gaat in dit geval het logo. (Dit voorbeeld zal niet werken op mobiel of tablet omdat het om een mouse event gaat en die heb je natuurlijk niet bij een mobiel of tablet).

Ongetwijfeld ben je voorbeelden van beiden tegengekomen op het internet en nu weet je dat dit komt door de hulp van JavaScript. Nog een leuk voorbeeld van JavaScript is de bewegende code die wij op onze homepage hebben.

Met de opkomst van web 2.0 (heel simpel gezegd het interactief maken van webpagina’s/ web applicaties) is JavaScript onmisbaar geworden. Hieruit ontstond de noodzaak voor frameworks omdat mensen hun websites steeds interactiever wilde maken en omdat er steeds vaker complete interactieve webapplicaties gebouwd werden. Daardoor onstond de vraag naar in de praktijk geteste, herbruikbare functionaliteit, zodat men niet steeds het wiel opnieuw moest uitvinden.

Een van deze JavaScript bibliotheken is jQuery. jQuery zorgt ervoor dat je als ontwikkelaar heel makkelijk kan communiceren met het DOM (Document Object Model) en CSS kan bewerken. Met jQuery kan je heel makkelijk HTML elementen selecteren, css classes toevoegen, effecten en animaties toevoegen en communiceren met de webserver door middel van AJAX ook is het uit te breiden met plug-ins. Doordat jQuery een hoop JavaScript syntax vergemakkelijkt is het een goede bibliotheek om mee te beginnen als je JavaScript aan het leren bent.

Neem nou de JavaScript code bij voorbeeld 1

document.getElementById(’tijd’).innerHTML = huidigeTijd;

als we dit in jQuery zouden schrijven dan zou het er zo uit komen te zien

jQuery(“#tijd”).html(huidigeTijd);

‘#tijd’ wordt een DOM selector genoemd en helpt om het juiste elemement te filteren in het DOM. Je gebruikt jQuery(‘#tijd’) om het element te selecteren met de aanduiding of het een id of class is gevolgd door .html(huidigeTijd) om in dat element de variable huidigeTijd te zetten.

Als we kijken bij voorbeeld 2 gebruiken we

var logo = document.getElementById(“logo”);
logo.classList.add(“rotate”);

Als we dit in jQuery zouden zetten zou het er zo uit komen te zien

jQuery(‘#logo’).addClass(‘rotate’);

Het voordeel van jQuery is het grote gemak waarmee je elementen kan selecteren je gebruikt jQuery om het aan te roepen en vervolgens zet je tussen haakjes de class of de id.

Wil je meer zien wat je met jQuery kan doen, onze junior ontwikkelaar Tom heeft sinds hij jQuery heeft geleerd een aantal leuke projecten ermee gedaan. De eerste is de klassieke schuifpuzzel hij heeft met behulp van jQuery dit leuke spelletje nagebouwd met keuze uit 2 plaatjes. Het tweede project wat hij heeft opgepakt is een email handtekening generator waar je een mooie zakelijke email handtekening kan maken. Hierdoor kunnen onze klanten zelf makkelijk een mooie email handtekening maken.

Sinds 2009 is er ook een versie van JavaScript die gebruikt wordt voor het backend gedeelte. Node.js staat de ontwikkelaar toe webservers en netwerkhulpmiddelen te maken.
Node.js heeft een event-driven architectuur in staat tot asynchrone I/O. Simpel gezegd houdt dat in dat het goed kan reageren op events en de mogelijkheid biedt om verschillende input output stromen tegelijk uit te voeren. Door de grote versatiliteit van Node.js hebben we binnen ons team ook een aantal applicaties gebouwd in Node.js een daarvan is een affiliate & advertentie platform waar we binnenkort meer over zullen vertellen.

Zo zie je maar dat JavaScript een ontwikkelaar ongekende mogelijkheden brengt.


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!