Het tijdperk van de simpele website ligt inmiddels al weer enkele jaren achter ons. Websites van nu zijn complexe applicaties waarmee we hotelkamers reserveren, online bestellingen doen, e-mail lezen, agenda’s bijhouden en internetbankieren. Met de toenemende complexiteit van webapps is ook de code steeds gecompliceerder geworden.

Complexiteit

Ontwikkeltools zijn niet in gelijke mate meegegroeid met die complexiteit. Het is lastig om in een groot project alle onderdelen van elkaar te scheiden, te testen en te onderhouden. Een bibliotheek als jQuery is daar oorspronkelijk nooit voor ontworpen. Zelf JavaScript schrijven en foutloos invoegen voor alle browsers is een hele uitdaging.

In de praktijk komt het er vaak op neer dat de app wordt uitgebreid met een heel scala aan techniekjes en extra libraries voor sliders, carrousels, e-commerce en zo verder. Na een tijdje is de ooit zo cleane webapp een kerstboom van uitbreidingen en jQuery-plug-ins geworden. Vanuit beheeroogpunt is dit een kleine ramp.

Modulaire apps met AngularJS

Welkom AngularJS! AngularJS is een JavaScript-framework dat geheel ontwikkeld is om tegemoet te komen aan de eisen van grote en complexe webapplicaties. AngularJS is oorspronkelijk gemaakt voor een intern project bij Google, maar inmiddels is er ook een grote open source-community actief.

In AngularJS ontwikkel je niet één grote applicatie waarin alles met alles verbonden is. In plaats daarvan maak je kleinere, gespecialiseerde modules. Deze zijn los van elkaar te ontwikkelen en te testen. Op de plekken waar ze nodig zijn in de applicatie, worden ze dynamisch ingevoegd via het principe van Dependency Injection.

Een applicatie wordt zo bijvoorbeeld verdeeld in modules voor het tonen van gegevens in een HTML-pagina (via het principe van controllers en data binding), modules voor het ophalen en cachen van gegevens van de server (met services en factories), modules voor routing, modules met constanten, een module voor in- en uitloggen in de toepassing en zo verder.

Je website of –app heeft dan één startpunt (index.html) met branding, hoofdnavigatie en meer. Hierin worden dynamisch de diverse views met functionaliteit van de applicatie geladen.

Om aan te sluiten bij onder ontwikkelaars bekende begrippen wordt AngularJS ook wel een JavaScript MVC-framework genoemd (naar het programmeerprincipe Model-View-Controller). Maar hiermee doe je de mogelijkheden van AngularJS eigenlijk te kort. AngularJS is veel meer dan dat.

De client en de server

Kenmerk van AngularJS-applicaties is wel dat de de applicatie in principe volledig in de browser draait. AngularJS is een client-sided framework. De rol van de server wordt verder teruggedrongen in vergelijking met traditionele webapps van bijvoorbeeld PHP, .NET MVC, Java of Oracle Apex.

AngularJS-toepassingen zijn in principe volledig onafhankelijk van een server. Ze worden via een API voorzien van gegevens. De server hoeft alleen maar de data te serveren waar de app om vraagt. De app zorgt zelf voor het tonen van de gegevens in HTML-templates, biedt voorzieningen voor filteren en sorteren, bewerken, enzovoort. Een AngularJS-applicatie is daarmee eenvoudig te gebruiken in de browser, op mobiele devices en op verschilende platforms. Met aanvullende tools als PhoneGap is een AngularJS-webapp desgewenst om te zetten naar een standalone app.

…maar AngularJS is wel lastig

Laten we er echter geen doekjes om winden. Het zelf realiseren van AngularJS-applicaties is een pad van vallen en opstaan. Er is ondertussen enorm veel documentatie over te vinden op internet (ik schreef eerder bijvoorbeeld een blogpost over bronnen voor AngularJS). Maar ook vaak zie je door de bomen het bos niet meer. Het is een goed idee om een training AngularJS te volgen, waarin je behalve alle losse termen ook de context leert waarin alle modules op de juiste wijze worden ingezet. Vragen als ‘Wanneer kies ik eigenlijk voor een Service en wanneer voor een Factory?’, of ‘Wat zijn best practices bij security van AngularJS-applicaties?’ worden in samenhang en met concrete voorbeelden besproken.

Als je kiest voor AngularJS als development-framework (en waarom zou  je daar eigenlijk voor kiezen? Ook dat wordt besproken), zijn er waarschijnlijk zelfs gedragingen die je moet afleren. Zo moet je bijvoorbeeld de verleiding weerstaan om voor elk probleem een jQuery-plug-in te zoeken. De meeste AngularJS-projecten kun je zelfs helemaal zonder jQuery realiseren.

Training

Volg bijvoorbeeld mijn driedaagse training AngularJS. Hierin neem ik alle ins en outs van het framework met je door, vanaf een eerste Hello World-voorbeeld tot een complete toepassing. Ook het uitwisselen van gegevens met een server wordt besproken, alsmede het werken met verschillende typen authentication. In overleg kunnen we in de training ook andere onderdelen behandelen. Denk bijvoorbeeld aan animatie met AngularJS, internationalization en localization of SEO-technieken voor AngularJS-applicaties.

Na afloop van de training kun je met een gerust hart beginnen aan het realiseren van moderne webapps met AngularJS!

Nog vragen of speciale verzoeken? Neem contact op om alles te bespreken.

-- Peter Kassenaar
14 april 2014.

Als docent merk je regelmatig dat je in trainingen en cursussen teruggrijpt op dezelfde bronnen. Zo ook in mijn training over AngularJS. Vaak verwijs ik naar eenzelfde blogpost, documentatiepagina of video op YouTube. En elke keer moet ik deze weer opdiepen uit mijn lijstje met Favorieten of uit mijn Diigo-links. Omdat de documentatie bij AngularJS zelf nou niet bepaald uitblinkt in leesbaarheid, voorbeelden en duidelijkheid (er is verbetering zichtbaar, maar echt handig vind ik ze nog steeds niet), heb ik er hier enkele op een rijtje gezet. Voor mezelf, maar ook als handig startpunt voor de lezer.

High level-achtergronden bij AngularJS

Waarom zou je – als bedrijf – je developmentcyclus omzetten naar, of uitbreiden met AngularJS? Wat is eigenlijk AngularJS en wat kan het voor mijn front-end development betekenen?

• An overview of AngularJS for managers – blogpost van Fifod.com. Bekijkt meer op een high-level niveau wat er nodig is in de organisatie om (ook) Angular-projecten te gaan doen.K
• Keynote NG-Conf 2014– Keynote van de eerste wereldwijde AngularJS-conferentie in januari 2014. Misko Hevery (maker van AngularJS) legt uit hoe Angular ontstaan is en waar het naar toe gaat. Een blik in het verleden, heden en de toekomst (roadmap).
• [update] How do I “think AngularJS” if I have a jQuery background?  - uitgebreide post op Stackoverflow.com. In het antwoord wordt veel duidelijk over de manier waarop Angular werkt en hoe je daar het beste op kunt inspringen als je zelf vanuit een jQuery-achtergrond de switch maakt.
• My Experience with AngularJS – The super heroic framework (…) – het blogartikel zelf bestaat voornamelijk uit onderstaande graphic – die ook mijn gevoelens voor AngularJS uiterst correct weergeven – maar lees vooral ook de commentaren onder de blogpost. Erg leerzaam en veel verschillende invalshoeken.

Beginnen met AngularJS – het totaalplaatje

Een serie totaal-overzichten, waar in alle gevallen een (eenvoudige) app wordt gemaakt, en een groot deel van de Angular-technieken aan de orde komt: een snel overzicht en gebruik van directives, modules, controllers, services en (soms) nog meer.

• AngularJS Fundamentals in 60-ish minutes – Dan Wahlin laat in iets meer dan een uur zien hoe je een basis AngularJS-app maakt. Deze video is langzamerhand uitgegroeid tot een standaard-inleiding voor AngularJS.
• A Step-by-Step Guide to Your First AngularJS App – een blogpost over het maken van een Formule1-app waarbij je via een open API live data opvraagt uit een database met F1-resultaten. Onder meer het gebruik van Ajax-calls met $http wordt hier getoond. Mede leerzaam omdat een andere techniek wordt gebruikt voor het ontwikkelen van controllers en services die via DI in de hoofdmodule worden ingevoegd.
• AngularJS Sticky notes Pt. 1 – Architecture – Een totaalplaatje van een app om sticky notes te maken, met nadruk op de architectuur. Hier zijn services het uitgangspunt in plaats van een onderdeel dat later erbij wordt geïntroduceerd als best practice om in gegevensvoorziening te voorzien in je app. Dit ‘omgekeerd denken’ kan net net handig zijn om je op het goede spoor te zetten.
• Searching the iTunes API asynchronously with Angular JS – artikel over een korte app waarmee je de openbare iTunes-API kunt doorzoeken en de resultaten presenteren.
• JukeTube – Een AngularJS-YouTube videospeleer. Weinig uitleg, maar een compleet project om te downloaden bij Github en zelf de code te bestuderen.

AngularJS-ervaringen

Veel programmeurs hebben na verloop van tijd hun ervaringen in het werken met Angular op papier (of in ieder geval: op een blog) gezet. Er is veel te leren van hun fouten en ervaringen. Vaak geven ze ook een aantal tips om zelf dergelijke vergissingen te vermijden. Lees:

• 4 Smooth AngularJS Application Tips – blogpost van Natan Leclaire, over het aangeven van de geselecteerde (actieve) tab in een Angular-applicatie, het werken met services, state onthouden bij wisselen van view en Ajax-calls maken vanuit een service
• Things I have learned working with AngularJS – artikel dat dieper ingaat op Dependency Injection (DI), Two way data binding en directives.
• A post-mortem on my first AngularJS Project – John Munsch vertelt over zijn ervaringen bij het maken een een (real life) AngularJS-app, inclusief testing met Karma.

AngularJS en PhoneGap

Ik geef ook veel PhoneGap-trainingen, en zie langzamerhand dat AngularJS ook in deze omgeving doordringt, ten faveure van bijvoorbeeld ‘losse’ libraries als jQuery Mobile. De volgende artikelen gaan over het inzetten van AngularJS in een PhoneGap-project.

• The Definitive Guide to Angular on Mobile – Hoe gebruik je bijvoorbeeld de module ngTouch in een mobiel project en hoe kun je met $swipe veeggebaren afvangen? Ongeveer halverwege wordt ingegaan op het omzetten van de webapp naar een standalone app met Cordova/PhoneGap.
• AngularJS, PhoneGap and angular-seed. Let’s Go! – artikel over het gebruik van angular-seed om snel een project met basisstructuur te starten en vervolgens Angular en PhoneGap in te zetten.
• Apps with AngularJS – combinatieartikel over het werken met AngularJS, PhoneGap en het Ionic-framework voor de user interface-elementen. Met veel nuttige verwijzingen naar meer online literatuur.

$http, services, interceptors en meer

Tot de lastigste onderdelen van het framework behoren (mijns inziens) onderdelen als het werken met promises, de low-level services $http en $resource en het gebruik van interceptors, bijvoorbeeld om gebruikers in een Angular app te authenticeren tegen een RESTful service/API. Deze artikelen hebben mij erg geholpen bij het begrijpen van de materie.

• $http response interceptors – artikel van Bruno Scopelliti over het werken met interceptors. Lees vooral ook de andere artikelen uit zijn serie, om inzicht te krijgen in het totaalplaatje van het werken met RESTful services, $resource en AngularJS Promises!
• Authentication to a RESTful web services in an AngularJS web app – uit dezelfde serie als bovenstaande. Onmisbaar.
• AngularJS Directives Tutorial – Wat zijn directives, waarom worden ze gebruikt en hoe maak je ze in AngularJS? Op al deze vragen geeft dit artikel het antwoord.
• A tale of Frankenstein and Binding to Service Values in AngularJS – wie heeft er niet ooit een value in een view gebonden aan een variabele in een controller, om vervolgens tot de ontdekking te komen dat deze value niet wordt bijgewerkt als de waarde ervan wordt gewijzigd via een service? Welkom in de JavaScript-wereld van call-by-value vs. call-by-reference! Dit artikel legt haarfijn de oorzaken en oplossingen uit.
• AngularJS Tips and Tricks [updated] – een lange lijst tips en trucs en verwijzingen naar andere bronnen. Erg handig om eens door te nemen.
• [update] Cookies vs. Tokens. Getting auth right with AngularJS – Een uitgebreid artikel over authenticatie in AngularJS-apps, waarin traditionele cookie-based apps worden afgezet tegen de moderne JWT (JSON Web Token)-gebaseerde authentication.

Overige algemene blogs en literatuur

Een aantal personen in de community schrijven bijna altijd op hoog niveau. In plaats van hun individuele artikelen te noemen, verwijs ik naar de blogs zelf.

• Dan Wahlin Blog – Eerder noemde ik al de 60-ish minutes video van Dan Wahlin, op zijn blog staan tal van andere nuttige artikelen en video-links (hij produceert ook de Web Weekly video-edition, met breder front-end webdevelopment nieuws over CSS, HTML5 en JavaScript).
• John Papa – Ik volgde in Las Vegas een workshop van John Papa en dacht op voorhand dat ik al aardig wist hoe de vork in de steel zat. Ik vergiste me... Volg zijn blog voor meer artikelen over AngularJS en tal van andere frameworks (Breeze, Durandal en meer).
• John Lindquist, egghead.io-  met een serie video-tutorials over AngularJS. Er is een betaald #pro-abonnement, maar veel video’s zijn ook gratis toegankelijk.
• ng-newsletter – abonneer je op ng-newsletter, een wekelijkse nieuwsbrief met AngularJS-nieuws en verwijzingen. Hoog niveau.

AngularJS-training

<shameless plug>
Zijn bovenstaande adressen een stap in de goede richting, maar wil je liever in een wat rustiger tempo kennismaken met AngularJS, met begeleiding en feedback op je vorderingen? Neem dan contact op voor een AngularJS-training. In twee of drie dagen maak je onder leiding van een ervaren docent (ondergetekende :-) kennis met dit uitgebreide JavaScript-framework. Ik laat je precies zien hoe je AngularJS kunt inzetten, hoe niet (!) en wat de knelpunten zijn die je kunt tegenkomen in productie-omgevingen.
</shameless plug>

Heb je zelf andere ervaringen, of meer nuttige links? Laat het weten, dan breidt ik het artikel uit!

Peter Kassenaar
-- 20 februari 2014

Als ZZP’er moet je jezelf continu blijven (bij)scholen. In april 2010 ging ik naar Las Vegas voor de ASP.NET and Silverlight Conference and Expo, met de feestelijke lancering van Visual Studio 2010 en Silverlight 4. En daaromheen tientallen uiterst nuttige sessies van de bekendste sprekers en developers op .NET gebied. Ik heb er erg veel aan gehad. We weten weliswaar allemaal hoe het is afgelopen met Silverlight (namelijk: zo goed als dood), maar Visual Studio is levendiger dan ooit, en juist vorige week is Visual Studio 2013 gelanceerd.

(als je het leuk vind: ik heb destijds een blog bijgehouden met artikelen en filmpjes over randzaken als De Strip in Las Vegas, de woestijn, het Hollywood Sign en nog meer: http://www.kassenaar.nl/vegas/?page_id=25)

Fast forward 3,5 jaar. Eind deze week reis ik opnieuw naar Las Vegas, ditmaal voor de conferentie <anglebrackets />. Uit de online beschrijving:

/* anglebrackets is a conference for lovers of the web. We believe that the web is best when it's open and collaborative. We believe in the power of JavaScript and expressiveness of CSS the lightness of HTML. */

En dat is precies waarvoor ik er naar toe ga. Ik denk dat er geen conferentie ter wereld is die meer gericht is op de openheid van het web, open standaarden en hoe deze het beste toe te passen zijn, dan Anglebrackets. Alles ademt open source.

Hoewel veel sprekers uit de Microsoft-stal afkomstig zijn, zijn er ook workshops van Douglas Crockford (JavaScript-goeroe), Denise R. Jacobs, John Papa, Shawn Wildermuth, Elijah Manor en andere onafhankelijke webspecialisten. Ik kijk in het bijzonder uit naar de full day-workshop over SPA met AngularJS van John Papa en Ward Bell (ontwikkelaar van Breeze.js).

Meer informatie over anglebrackets vind je – behalve op de conferentiewebsite zelf – bijvoorbeeld op

• http://www.hanselman.com/blog/DoYouMissMIXJoinUsAtAngleBrackets20InVegas.aspx
• http://www.johnpapa.net/angular-workshop-and-and-xbox-one/

En ik zal regelmatig mijn Twitterfeed bijwerken, op https://twitter.com/PeterKassenaar.

Ik heb er zin in!

Peter Kassenaar
-- 21 oktober 2013

Op 18 september 2013 is het Handboek JavaScript en jQuery verschenen.

Dit handboek bespreekt het werken met JavaScript vanaf het startpunt. Er is veel aandacht voor het leren programmeren in deze populaire scripttaal op internet. Er wordt geen voorafgaande programmeerkennis bekend verondersteld.

Specificaties

• Boek, paperback, 350 pagina’s
• Geschikt voor Windows, Macintosh, Linux en alle browsers
• Geen speciale software benodigd
• ISBN-13: 978-90-5940-614-8
• Prijs: EUR 29,95

Inhoud

Het eerste deel van het boek gaat in op de JavaScript-core. Het besteedt veel aandacht aan de basis programmeerprincipes zoals de JavaScript-syntaxis, het werken met variabelen, de achtergronden bij functies, objecten en arrays. U leert meer dan alleen kopieren-en-plakken. Het Handboek JavaScript en jQuery is daarmee het beste oorspronkelijk Nederlandstalige werk voor het leren programmeren in JavaScript.

In het tweede deel van het boek wordt uw JavaScript core-kennis toegepast op het DOM in de browser en wordt jQuery geïntroduceerd. U leert ook jQuery vanaf de basis beheersen en maakt kennis met de tientallen functies in de jQuery API. Uiteraard wordt ook het werken met Ajax-functies voor gegevensuitwisseling met een externe server in detail besproken. Aan het eind wordt ingegaan op populaire jQuery plug-ins voor bijvoorbeeld diavoorstellingen en formuliervalidatie.

Maar ook nu is de achterliggende boodschap: u leert daadwerkelijk de basis van jQuery in combinatie met JavaScript goed beheersen. Deze kennis is van onschatbare waarde als u zelf scripts op internet vindt en deze in uw websites of apps wilt gebruiken. U weet dan precies wat u wel en niet moet kopiëren en plakken, en kunt zelf problemen oplossen als het niet direct gaat zoals u had gedacht.

Aan het einde van elk hoofdstuk zijn vragen en oefeningen opgenomen om de stof te herhalen. Hierdoor is het boek buitengewoon geschikt voor opleidingen en zelfstudie.

Beknopte inhoudsopgave

• Kennismaken met JavaScript en JavaScript-gereedschappen
• Statements, gegevenstypen, variabelen en operatoren
• Functies, arrays en objecten
• Programmaverloop
• Events en event handlers in JavaScript
• Werken met het document object model (DOM)
• Kennismaken met jQuery
• HTML- en CSS-functies in jQuery
• Events afhandelen in jQuery
• jQuery-animatiefuncties
• jQuery en Ajax
• jQuery-plug-ins
• Werken met jQuery UI

Oefenbestanden

In het boek staan tal van codevoorbeelden en oefenbestanden om zelf met JavaScript en jQuery aan de slag te gaan. De oefenbestanden zijn te downloaden als één groot zip-bestand. Hierin staan in afzonderlijke mappen de oefenbestanden gerangschikt per hoofdstuk. Mocht hierin iets ontbreken of niet kloppen, neem dan even contact op.

• HB_JS_Codevoorbeelden.zip (.zip, 1MB)

-- Peter Kassenaar
19 september 2013

jQuery UI is een uitgebreide bibliotheek met tal van visuele componenten die user interfacedesigners kunnen gebruiken om attractieve websites te ontwerpen.

Nergens is de jQuery-slogan write less, do more zo van toepassing als in jQuery UI. Dat gezegd hebbende, is de bibliotheek natuurlijk niet 100% perfect of direct geschikt voor elke taak. Ervaren ontwikkelaars zullen onderdelen van jQuery UI naar eigen behoefte willen uitbreiden, of aanpassen voor de interface die ze aan het ontwikkelen zijn. Welkom jQuery UI Cookbook.

• http://www.packtpub.com/jquery-userinterface-cookbook/book

Kookboek

Het kookboek biedt ruim 70 'recepten' waarmee je naar hartenlust kunt hacken in de jQuery UI-code om op deze manier doelen te bereiken waarvoor de standaardmiddelen en configuratieopties niet toereikend zijn. Bijvoorbeeld: je weet waarschijnlijk al dat jQuery UI een tab-widget biedt waarmee je snel een tabblad interface maakt op basis van je HTML-code. Maar wat nu als je de tabs wilt uitbreiden met aanklikbare pictogrammen naast de tekst, zonder handmatig losse <img /> tags in de code te schrijven?

Of je wilt de widget Accordeon uitbreiden zodat je ook met de Tab-toets tussen onderdelen kunt navigeren, of je wilt met drag-an-drop inhoud tussen accordeons verslepen? Dit boek legt dat perfect uit, tezamen met nog tientallen andere voorbeelden van kleinere en grotere ingrepen in de bibliotheek.

Veel code

Maar pas op. Er staat code in dit boek. Veel code. Je zult je handen uit de mouwen moeten steken en diep in de functies moeten duiken die het hart van jQuery UI vormen. Je moet beschikken over solide achtergrondkennis van JavaScript en jQuery om te weten wat je eigenlijk aan het doen bent en om de recepten in het boek te kunnen aanpassen zodat ze perfect in je eigen projecten passen. En dit begint direct op pagina 1. Er is niet zoiets als een rustige start, om vervolgens kalm en rustig het eerste voorbeeld in te glijden. Het gaat meer van: "Bam! Kijk, zo doe je het,

(function ($, undefined) {
	$.widget("ab.accordion", $.ui.accordion, {
		_create: function () {
			// heel veel andere code …
		}
	})
})(jQuery);

Dus als je nieuw bent in jQuery UI of jQuery-development in het algemeen, is dit boek niet geschikt voor jou. Het legt niet uit wat jQuery UI is, waar je het kunt halen en hoe het basisgebruik is. In plaats daarvan worden alle widgets in de bibliotheek op alfabetische volgorde besproken. Hoofdstuk 1 gaat over de Accordion. Vervolgens gaat het over Autocompletes, Buttons, Datepickers, Dialogs enzovoort. Het boek besluit met een hoofdstuk over Widgets en de manier waarop je zelf vanaf het nulpunt je eigen widgets zou kunnen maken.

Conclusie

Ben jij tevreden met de basismogelijkheden en lay-out van jQuery UI? Prima. Laat dit boek lekker op de plank liggen. Maar voor ieder ander kan ik het van harte aanbevelen. Als je het niet gebruikt voor het uitbreiden van jQuery UI, dan leer je in ieder geval iets over de manier waarop je jQuery plug-ins kunt schrijven en jQuery-uitbreidingen in zijn algemeenheid programmeert.

Mijn enige wens is dat de auteur ook voorzien zou hebben in een inleidend hoofdstuk, waarin jQuery UI wordt geïntroduceerd en de basis kort wordt uitgelegd (voor als je bijvoorbeeld een ervaren ontwikkelaar bent, maar toevallig nieuw bent op het gebied van jQuery UI).

Het zou ook prettig zijn geweest als hij behalve de widgets nog andere onderdelen uit de bibliotheek meer in detail zou hebben besproken, zoals Effects, Interactions en/of Utilities zoals het object Position. Maar zelfs met deze kleine tekortkomingen, is het jQuery Cookbook elke cent waard.

Deze review bij Amazon.com.uk (Engels)

Peter Kassenaar
-- 14 augustus 2013

[disclaimer: ik heb het boek van de uitgever gratis gekregen ter review. De uitgever heeft op geen enkele manier invloed gevraagd of uitgeoefend op de inhoud van dit artikel. Het is mijn persoonlijke mening.]

Slecht nieuws van de uitgever.

Ondanks dat het Handboek JavaScript en jQuery al op 1 juli gereed was (zie mijn aparte blogartikel hierover), is het niet gelukt het boek tijdig te redigeren, zodat het nog in augustus kan verschijnen.

Dat is een tegenvaller die zorgt voor ongeveer een maand vertraging. Uitgave wordt nu verwacht medio september.

Als het boek verkrijgbaar is, meldt ik dat uiteraard op dit blog. Je kunt me ook volgen op Twitter (@PeterKassenaar) voor de snelste updates.

-- 6 augustus 2013

Het is inmiddels ruim 16 jaar (!) geleden dat mijn Basiscursus JavaScript 1.2 verscheen. Een eeuwigheid in computerland. Ook de opvolger, Basiscursus JavaScript 1.5 uit 2002 is al hoogbejaard. Beide boeken zijn inmiddels dusdanig verouderd dat ik ze niemand meer kan aanbevelen. Ook als je ze nog tegenkomt op Marktplaats.nl of bij De Slegte: laten liggen.

Wacht liever nog even op de opvolger, het Handboek JavaScript en jQuery. Dat ben ik nu aan het schrijven en uitgave wordt later dit jaar verwacht (zomer 2013).

Op deze pagina geef ik alvast een kleine vooruitblik wat je kunt verwachten en zal ik updates plaatsen over de voortgang en verschijningsdatum. Het oudste updatebericht staat onderin. Begin daar dus met lezen als je deze pagina voor het eerst bezoekt.

4. Update – 5 augustus 2013

Slecht nieuws van de uitgever.

Helaas is hij er niet in geslaagd het boek tijdig te (laten) redigeren voor uitgave in augustus. Dat is een tegenvaller. Uitgave wordt nu in september verwacht. Houd dit blog in de gaten, of volg mij op Twitter (@PeterKassenaar) voor de laatste stand van zaken.

3. Update – 1 juli 2013

Het jQuery-deel is ook gereed. Daarmee is het boek klaar en ingeleverd bij de uitgever! Er is een terzake kundige redacteur aangetrokken (Peter Doolaard, zelf auteur van het Handboek HTML5 en CSS3) en deze gaat er in juli –tijdens mijn vakantie- mee aan de slag.

Daarna kan het boek worden opgemaakt, gedrukt en gedistribueerd. Naar verwachting ligt het dan medio augustus in de winkels.

Het jQuery-deel heeft nog een aantal kleine wijzigingen ondergaan.

• Hoofdstuk 13 gaat uitsluitend over jQuery-plug-ins: wat zijn het, waar vind je ze en hoe gebruik je ze. In detail wordt gekeken naar de plug-ins Form Validation en Cycle2. Het gebruik hiervan wordt als algemeen voorbeeld beschouwd voor alle overige plug-ins.
• Hoofdstuk 14 gaat geheel over jQuery UI. In dit omvangrijke hoofdstuk wordt de structuur van jQuery UI besproken en worden weer een aantal kenmerkende functies er uitgelicht die kunnen dienen als startpunt voor de rest van de bibliotheek. Aan de orde komen onder meer de widgets datepicker, slider, tabs en meer. Ook het werken met jQuery UI thema’s wordt besproken.

Het was een hele klus, en ik denk dat het boek behoorlijk omvangrijk zal worden. Maar het wordt tevens een compleet up-to-date overzicht en perfecte leergang voor JavaScript en jQuery.

Het enige oorspronkelijk Nederlandstalige werk van dit niveau en deze omvang.

2. Update – 17 juni 2013

Het JavaScript-deel is afgerond. De doelstelling is om nog voor het begin van de schoolvakantie (vrijdag 28 juni 2013) het complete manuscript gereed te hebben, maar het is nog niet zeker of dat lukt.

In het JavaScript-deel zijn de volgende wijzigingen opgetreden:

• De oorspronkelijke hoofdstukken 7 en 8 zijn samengevoegd tot één hoofdstuk 7 waarin zowel het DOM als de core JavaScript DOM-functies worden besproken.

In het jQuery-deel zijn de volgende wijzigingen opgetreden.

• De oorspronkelijke hoofdstukken 9 en 10 zijn samengevoegd tot één hoofdstuk 8 waarin zowel de ontstaansgeschiedenis van jQuery als de selectorsyntaxis wordt besproken.
• Het hoofdstuk met veelgebruikte jQuery-functies is naar voren gehaald en wordt hierna besproken.
• Uit dit hoofdstuk hebben de functies voor jQuery-animaties en  -effecten een apart hoofdstuk gekregen.
• Daarna worden de Ajax-functies behandeld.

De uiteindelijke indeling van het jQuery-deel wordt als volgt:

• 8. Kennismaken met jQuery
• 9. HTML- en CSS-functies in jQuery
• 10. Events afhandelen
• 11. jQuery animatiefuncties
• 12. jQuery en AJAX
• 13. jQuery plug-ins gebruiken
• 14. Meer doen met jQuery

1. Update – 24 mei 2013

Het Handboek JavaScript en jQuery is bedoeld voor de beginnende programmeur. Enige HTML- en CSS-voorkennis wordt bekend verondersteld. Je leert vanaf het eerste begin programmeren. Het is daarom ook geschikt als algemene inleiding in het programmeren (met toevallig JavaScript als toepassingsgebied). Het gaat uit twee delen bestaan.

• In het eerste deel worden de core JavaScript-functies en –syntaxis besproken: hoe werken variabelen, lussen, functies, accolades en puntkomma’s, statements, enzovoort.
• In het tweede deel wordt deze kennis toegepast op het DOM, oftewel de webpagina in de browser. Je leert eerst de pure JavaScript DOM-functies, maar gaat dan al snel over op toepassing via jQuery. Je leert hierin onderdelen in de pagina selecteren en vervolgens bewerken, animeren, event afvangen en verwerken en meer.

Heel globaal zou je daarom kunnen stellen dat het eerste deel vooral theoretisch is (hoewel je veel voorbeeldcode en oefeningen direct in de browser uitvoert) en het tweede deel vooral praktisch is (hoewel je daarin ook nog nieuwe achtergronden leert zoals het werken met callback-functies en asynchroon- en unobtrusive programmeren).

Elk hoofdstuk wordt afgesloten met vragen en oefeningen om de stof te herhalen. Het boek is daarmee erg geschikt voor zelfstudie, scholen en opleidingen. Van de voorbeelden kun je de broncode downloaden, de oefeningen moet je zelf maken ;-).

Globale inhoudsopgave

Ik ben het boek nu aan het schrijven, dus onderstaande inhoudsopgave is subject to change. Er kunnen onderdelen afvallen, nieuwe hoofdstukken bijkomen of in volgorde worden gewisseld. Laat het weten als je er opmerkingen over hebt!

1. Deel I: Kennismaken met JavaScript
2. Werken met statements, data en variabelen
3. Operatoren
4. Functies, arrays en objecten
5. Voorwaardelijke statements en de program flow beïnvloeden
6. Het JavaScript Event model
7. Werken met het DOM
8. JavaScript DOM-functies en –methodes
   
9. Deel II: Kennismaken met jQuery
10. De jQuery selector syntaxis
11. jQuery Events en de jQuery API
12. Veelgebruikte jQuery functies
13. Webapps maken met jQuery en AJAX
14. jQuery plug-ins gebruiken
15. Voorbeelden en toepassingen

Heb je opmerkingen of vragen over de inhoud? Laat dan een reactie achter onder dit artikel, of neem contact op.

-- Peter Kassenaar
24 mei 2013

Traditioneel kent JavaScript alleen de alert()-opdracht om mededelingen te doen aan de bezoeker van een site. Maar voor moderne webapplicaties is dat eigenlijk geen optie meer. Er zijn gelukkig tal van pop-up- en notification-bibliotheken ontwikkeld.

Inmijn eigen projecten maak ik vaak gebruik van toastr.js, een kleine jQuery plug-in die precies doet wat ik nodig heb. Ik heb een videodemo gemaakt (10 minuten), waarin de volgende stappen aan de orde komen:

1. wat is eigenlijk het probleem?
2. toastr.js downloaden en installeren
3. een demo-site maken met voorbeelden
4. meer opties voor toastr.js bekijken

Je kunt de video ook rechtstreeks bekijken bij YouTube:

http://www.youtube.com/watch?v=Ny_K3lLvDOA

Hyperlinks

• toastr.js downloaden bij Github
• jQuery 1.9.1 downloaden (gebruikt Ctrl+S om het bestand op te slaan vanuit je browser).
• voorbeeldcode/site uit de video (zip, 38KB)

Veel succes er mee!

-- Peter Kassenaar
19-04-2013