Video-Tutorial: JavaScript & jQuery leren

Hartelijk welkom bij de ultieme JavaScript- en jQuery-cursus.

In deze video wordt uitgelegd wat JavaScript is en wat het ons oplevert.

In deze video leer je welke editor we zullen gebruiken en installeren we het samen.

In deze video wordt getoond hoe je kliks gebruikt met JavaScript en hoe variabelen functioneren.

Het if-statement. Het if-statement wordt zeer vaak gebruikt bij programmeren. Bijvoorbeeld, als je iets alleen wilt uitvoeren wanneer een bepaalde voorwaarde is voldaan.

In deze video gaat het over arrays (velden) in JavaScript. Ze stellen ons in staat om meerdere informatie binnen één variabele op te slaan.

In deze video leer je For-Loops (lussen) kennen. Deze stellen ons in staat om een bepaalde code meerdere keren achter elkaar uit te voeren.

Functies zijn een soort mini-programma dat we, nadat we het hebben gemaakt, op elk moment opnieuw kunnen gebruiken. Als je bijvoorbeeld op de startknop van je telefoon drukt, wordt een functie opgeroepen die je terugbrengt naar je startscherm. Functies maken het werk dus aanzienlijk eenvoudiger.

Hier wordt het resultaat van de uitdaging getoond (een quiz) en bovendien wordt de HTML-basis gecreëerd.

Hier wordt de CSS (het uiterlijk) van de quiz geprogrammeerd.

Hier wordt de JavaScript van onze quiz geprogrammeerd en uitgelegd.

Je hebt al gezien hoe functies met één parameter werken. Nu zullen we kijken naar functies met meerdere parameters. Meerdere parameters worden gebruikt wanneer je een functie met verschillende variabelen wilt gebruiken. Bijvoorbeeld in wiskunde bij het optellen van meerdere waarden.

Er zijn globale en lokale variabelen. Kort samengevat: Globale variabelen zijn de variabelen die buiten functies worden gedefinieerd en lokale variabelen zijn degene die binnen functies worden gedefinieerd. Hier bekijken we nader hoe dit werkt.

In programmeertalen is het mogelijk om functies zo op te zetten dat ze een retourwaarde hebben. Tot nu toe hebben we alleen functies gehad die simpelweg iets uitvoerden, maar niets terug gaven waarmee we konden verder werken. Laten we dus nu eens terugkijken naar RETURN.

In dit artikel bespreken we wiskundige operatoren en toekenningsoperatoren. Bij de wiskundige operatoren gaat het om vrij eenvoudige zaken zoals optellen, aftrekken, enz., bij de toewijzingoperatoren gaat het om de mogelijkheid vrij eenvoudige operaties uit te voeren zoals bijvoorbeeld een verhoging met 5. Aangezien beide belangrijk zijn in de programmering, worden deze onderwerpen hier behandeld.

Er zijn drie (of vier) verschillende soorten lussen bij het programmeren: de Do-while-, While- en de For-lus. De For-lus hebben we al geleerd. Nu gaan we ons bezighouden met de Do-while- (voetgestuurd) en de While-lus (hoofdgestuurd).

In dit artikel gaat het over een alternatief voor If-condities. Het gaat hierbij om Switch (schakelaar) en Case (geval). Men heeft dus eigenlijk een schakelaar die tussen de verschillende gevallen schakelt en blijft hangen bij degene die actief is.

We hebben al arrays behandeld, maar zijn niet in detail gegaan. Er valt nog veel meer te weten over arrays. De belangrijkste eigenschap van een JavaScript-array is het aantal elementen (lengte). Het array heeft echter nog meer eigenschappen zoals bijvoorbeeld index, die ons informatie geeft over de positie 0 van het array.

Objecten zijn een extreem belangrijk en interessant concept in veel programmeertalen. Men kan in principe alles als een soort object beschrijven. Laten we eens een object nemen dat we meestal op straat zien: een AUTO. Een auto heeft bepaalde eigenschappen/kenmerken en kan bepaalde handelingen uitvoeren.

Laten we eens kijken hoe we objecten kunnen maken in JavaScript. Hiervoor maken we een constructor functie en twee instanties van ons object in onze head-tag. Binnen de constructor functie, die dezelfde naam heeft als ons object, vertellen we het programma dat de parameters die aan de constructor functie worden doorgegeven bij het maken van een instantie van het object precies de waarden van het object moeten zijn.

Als basis voor de functionaliteiten van objecten beginnen we met de code van de laatste tutorial, waar we variabelen hebben aangemaakt die bij elke instantie van ons object worden aangemaakt.

In deze tutorial leer je het Math-object kennen. Het is een object gebaseerd op de Math-klasse en wordt geleverd met allerlei coole eigenschappen en functies.

In deze video gaat het over het Date-object of de Date-klasse. Het zijn objecten die kunnen worden gebruikt om tijd in een programma in te voeren. Hierbij wordt niet per se de tijd of de datum bedoeld, maar het kan ook een tijdsduur betreffen. Een Date-object bevat de tijd die is verstreken sinds het tijdstip 1970-01-01 00:00:00. Er zijn verschillende manieren om parameters aan de Date-constructor door te geven.

In deze video leer je hoe je een interactief horloge bouwt met JavaScript.

In deze video gaat het over overerving en polymorfisme. Twee concepten van objectgeoriënteerd programmeren.

In dit artikel behandelen we de vraag: Wat is jQuery? jQuery is een JavaScript-bibliotheek waarmee we nog coolere websites kunnen maken.

Hier leer je hoe je met jQuery veel gemakkelijker kliks verwerkt.

In deze tutorial leer je hoe je het uiterlijk van een website kunt veranderen met behulp van jQuery. Hiervoor kunnen we bijvoorbeeld eenvoudig het attribuut van een veld overschrijven. In dit voorbeeld kunnen we de link van de iframe (dus de src/source) veranderen door er met de muis overheen te bewegen. Je zou de code eenvoudig kunnen aanpassen en bijvoorbeeld het vak vergroten door de Height- en Width-attributen te overschrijven wanneer je eroverheen beweegt. Over het algemeen kan dit proces nu worden gebruikt om het uiterlijk van de website gemakkelijk te veranderen.

Een van de coole functies van jQuery is om een element te laten vervagen. In dit voorbeeld vervagen we een knop zodra we op een andere knop klikken. Hiervoor gebruiken we de FadeOut-functie ("vervagen-functie"). Om het element daarna weer te laten zien, gebruiken we de FadeIn-functie.

In deze video gaan we aan de slag met de animatie in jQuery. Het gaat hierbij om iets dat beweegt. We zorgen er dus voor dat een element op onze website beweegt/verandert. Hiervoor is er een functie in jQuery. Deze heet animate() en verwacht drie parameters.

Laten we eens kijken wat jQuery UI is.

De accordion is een widget waarmee we, net als bij een accordeon, slechts bepaalde delen van het geheel kunnen zien. Dit is vooral handig wanneer men veel informatie wil overbrengen, maar dit als één grote tekst echter veel te onoverzichtelijk zou zijn.

In deze tutorial gaat het over Sortables in jQuery UI. Het gaat hierbij om sorteerbare elementen. Dit ken je als je productiviteitswebsites zoals Wunderlist of Trello gebruikt. De mogelijkheid om elementen sorteergebaar te maken is een extreem coole functie die je in veel verschillende applicaties kunt gebruiken.

Soms wil je dat de gebruiker de grootte van een element kan aanpassen. Dan zijn Resizables precies wat je nodig hebt. Ze maken dat namelijk mogelijk. Onderaan rechts van het element zie je een klein driehoekje dat je kunt aanklikken en vervolgens, als je de muiscursor vasthoudt, kun je het element vergroten of verkleinen.

In jQuery UI kan met behulp van Dragglebanners heel eenvoudig een element worden gebouwd dat men heen en weer kan slepen. Hoe dat werkt, zullen we hier bekijken.

Voortgangsbalken of voortgangsbalken zijn een uitstekend middel om de gebruiker te laten zien hoever hij is in een bepaald proces. Tijdens het aankoopproces in een online winkel bijvoorbeeld, of bij een enquête, helpt het de gebruiker om te weten hoe ver hij is met het uitvoeren van de stappen.

In deze tutorial wil ik kort ingaan op effecten in jQuery UI. Er zijn namelijk behoorlijk coole effecten die het mogelijk maken om jouw website er nog beter uit te laten zien en bovendien je gebruikers helemaal weg te blazen.

In deze video zie je het resultaat van de uitdaging. Een FAQ-pagina.

Hier zetten we de FAQ-pagina op.

In deze video wordt het hersenspel geïntroduceerd dat in dit hoofdstuk wordt geprogrammeerd.

Eerst zorgen we voor de structuur en het uiterlijk van het spel.

Nu gaan we ons richten op enkele van de functionaliteiten van het spel.

De speler kan al eerste acties in het spel uitvoeren, maar laten we er nu voor zorgen dat het spel correct kan worden opgestart en afgesloten.

Nu gaat het er alleen nog om de timer in het spel te integreren om de score correct te berekenen en het spel te timen. Bovendien voeren we nog een paar andere kleine stappen uit om het spel af te maken.

Hier wordt de app van het hoofdstuk geïntroduceerd. Het is een takenlijsten-app/-website.

Nu leggen we de basis en bekijken hoe we het bijbehorende thema kunnen maken en aanpassen met jQuery Mobile.

Omdat we een OOP-benadering volgen, moeten we de bijbehorende architectuur opzetten. Daar zullen we hier voor zorgen.

In deze video voegen we de pagina's toe en richten we ons op de pagina waar we taken aanmaken.

Net zoals de beleggingspagina moet ook de bewerkingspagina worden ingevuld en de bijbehorende functionaliteit krijgen.

Nu kunnen we ons nogmaals bezighouden met de architectuur en de datastructuur opzetten.

Nu we onze gegevensstructuur hebben, kunnen we deze vrij makkelijk oproepen in onze UI.

Bij het programmeren waren er een paar stappen nodig in de 'verklaringsstroom' die we nu kunnen repareren. Daarnaast zorgen we voor de permanente opslag van gegevens en voltooien we de app.