Kop 1

Kennismaken met jQuery

jQuery is ooit gebouwd om de ondersteuning van de verschillende JavaScript-engines in de verschillende browsers te ondersteunen.
Gebruikers konden dan in een versie en met het gebruik van vreschillende handige methods van het jQuery-object snel ontwikkelen.
Nu de browsers steeds meer naar elkaar toe groeien in de ondersteuning van JS en Babel.js de verschillende JS-dialecten moeteloos converteert naar standaard JS daalt de behoefte aan jQuery.
Uit het terugrapporteren uit de stage blijkt dat het nog wel veel in de beroepspraktijk gebrukt wordt, en dan zijn er natuurlijk ook nog die bloedmooie plugins...
Een presentatie met theorie: https://docs.google.com/presentation/d/e/2PACX-1vQcIEAal1U8gNbI6-_CL-kGoC6QkyZ0szp716OmOVAGuILOMwNTHXUS6sDuPQwbw-qo6YwBOev8Oz0R/embed?start=false&loop=false&delayms=3000

Leerdoelen

In deze korte oefening:

• maak je kennis met jQuery
• installeer je jQuery
• pas je enkele events en enkele effecten toe
• kies je een plugin die je toepast op deze of een extra andere pagina.

Opdracht

• Maak kennis met jQuery. Doe dit op een van de volgende manieren:
  • lees onderstaande instructies naast de video's en probeer daarmee het resulaat te bereiken zoals in de erste video.
  • doe mee met de onderstaande video's
  • doe met de instructie mee, die de docent voor de klas uitvoert.
• Voeg naar eigen inzicht een jQuery plugin aan deze pagina toe. Als je het beter vindt, dan mag je dat ook op een aparte pagina doen en vanuit jouw training daar een link naar leggen.
  Zie bijvoorbeeld ter inspiratie:
  • https://kenwheeler.github.io/slick/
  • https://speckyboy.com/free-jquery-plugins/
  • https://lokeshdhakar.com/projects/lightbox2/;
  • http://bla.hosts.ma-cloud.nl/20-mooie-jquery-plugins/
  • 30 Best Free Calendar & Datepicker jQuery Plugins
• Lever dit werk in zie: inleveren

Kennismaken jQuery 0: het resultaat (00:01:01)

jQuery is een library voor Javascript.
Een pagina met een aantal portretjes krijgen in deze tutorialreeks een aantal event toegewezen, waarna er effect optreden.
Je wordt bij de hand genomen in het schrijven van het script.

Kennismaken jQuery 1: script koppelen (00:06:22)

Je kunt jQuery natuurlijk downloaden en op je site koppelen, maar hier gebruiken we een CDN (content delivery network).
Op jQuery.com vind je daar verschillende linkjes.
Pas na het jQuery script kun je je eigen script plaatsen, omdat die van het jQuery-object gebruik maakt.
Dat eigen script kenmerkt zich door het gebruik van het $-teken voor jQuery.
Hier laat je jQuery eerst controleren of het document volledig geladen is. Dat is omdat er dan elementen geselecteerd kunnen worden waarmee je aan de slag wil.
In dit voorbeeld een regeltje die het main-element selecteert, verbergt en na een kleine pauze weer laat opkomen.
Het is niet zo zinvol, maar laat zien wat jQuery kan: met weinig syntax veel doen.

Kennismaken jQuery 2: mouseevents (00:07:38)

In de documentatie kun je alles over events vinden.
Bij https://api.jquery.com/category/events/mouse-events/ de mouse events.
Hiervan wordt gebruik gemaakt bij dit filmpje, waarbij de mouse-enter en de mouse-leave en het click-event aan de orde komen: .mouseenter(), .mouseleave() en .click().
Je ziet ook dat er maar 1 keer een object gemaakt wordt door een selectie van een aantal DOM-elelementen. Deze scriptopdracht vergt namelijk nogal wat resources van de browser. Via de doorlopende punt-koppeling van de events wordt er dan optimaal gebruik van gemaakt.
Daarnaast blijft het script zeer compact.

Bij https://api.jquery.com/category/effects/ kun je de jQuery effecten vinden. Hier werken we met fadeTo(), die 2 argumenten heeft: de tijdsduur in ms en de waarde waarnaartoe het faden gebeurt.
Ook laten we het script bij de click het eerstvolgende DOM-element selecteren met .next() om dan met .toggle() het te laten verdwijnen danwel verschijnen.

Kennismaken jQuery 3: animatie (00:07:41)

In deze tutorial zien we naast de gebeurtenis klik ook die van een dubbelklik.
Ook zie je het .animate() effect, waarin je meerdere eigenschappen tegelijk animeert.
Een jQuery variant op animaties die vanuit een gewone JavaScript gebeurtenis met een css-transition gerealiseerd zouden kunnen worden.
Overigens heeft jQuery ook de mogelijkheid om meerdere CSS-eigenschappen aan te passen met .css() maar dat wordt hier buiten beschouwing gelaten. Daar mag je zelf mee experimenteren.

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap.
• Valideer jouw pagina's op Markup Validation Service van W3C.
• Voeg aan de footer validatie-icoontjes toe:

  <a href="http://validator.w3.org/check?uri=referer" target="_blank">
      <img src="https://blanken5.home.xs4all.nl/afb/valid-html5-blue.png" alt="Valide HTML5"></a>
  <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
      <img src="http://jigsaw.w3.org/css-validator/images/vcss-blue.gif" alt="Valide CSS">
  </a>
              

• Plaats de link in ELO Magister.