Websitecursus deel 3 JavaScript

Transcriptie

1 Websitecursus deel 3 JavaScript A Eskwadraat WebCie www@a-eskwadraat.nl 12 oktober 2015

2 Introductie Twee weken geleden HTML Vorige week CSS Deze week JavaScript

3 Javascript JavaScript (ook wel JS) is een programmeertaal Je kan het gebruiken om een website interactief te maken en het gedrag van je website te bepalen Net zoals de HTML- en CSS-code gescheiden staan is het ook netjes om de JS-code gescheiden te houden

4 Javascript inladen Een JavaScriptbestand kan je in de head van je html als volgt inladen: JS inladen <script src="bestandslocatie"></script>. Ook kan je rechtstreeks JS in de HTML neerzetten: JS inladen 2 <script> alert("hoi!"); </script> Probeer nu zelf JS in te laden in je website met een alert

5 JS syntax Een voorbeeld van JavaScriptcode: JS voorbeeld function myfunction(y) { var x = y; document.getelementbyid("demo").innerhtml = x; } myfunction is hier een functie met y als input x is een variabele getelementbyid("demo") is het element met id demo innerhtml is de text van het element Let op de ; aan het einde van elke regel!

6 JS onclick Veel html-elementen, zoals een button kunnen een onclick attribuut krijgen In dat attribuut kan je aangeven welke JavaScript uitgevoerd moet worden als je erop klikt HTML voorbeeld <input type="button" onclick="myfunction( Hoi );" value="klik hier" /> Maak nu een button op je pagina die de inhoud van een paragraaf wijzigt.

7 jquery jquery is een library voor JavaScript waarmee je makkelijkere en kortere code kan schrijven. Om te zorgen dat je website jquery kan gebruiken moet je de jquery library inladen. De makkelijkste manier is om te linken naar een zogenaamde CDN jquery inladen <script src=" jquery min.js"></script>

8 jquery syntax jquery begint met een dollarteken, dan een selector en dan een actie Omdat jquery een extensie van JavaScript is kan je nog steeds JavaScript gebruiken De selector heeft dezelfde syntax als een CSS-selector Syntax jquery $("#demo").html("bla"); Laad nu jquery in en schrijf de functie om de tekst van een paragraaf te veranderen

9 document.ready Het is handig om ervoor te zorgen dat er geen functies worden uitgevoerd als de website nog niet geladen is Daarom is het netjes om alle JQuery-functies in een document.ready functie te zetten voorbeeld $(document).ready(function(){ // JavaScript hier }); Dit kan je ook afkorten als volgt Voorbeeld 2 $(function(){ // JavaScript hier... });

10 Events Een event is een actie veroorzaakt door bijvoorbeeld je muis, toetsenbord, form of window Met jquery kan je gemakkelijk een functie laten uitvoeren als een bepaald event plaatsvindt event in jquery $("#demo").click(function(){ $(this).html("bla"); });

11 En verder In jquery kan je gemakkelijk elementen laten verschijnen of verdwijnen, of animaties laten beginnen (hide, show, animate) Omdat het een programmeertaal zijn er ook allerlei constructies mogelijk zoals if..then..else, en for- of while-loops Je kan ook dynamisch content laten aanpassen, s versturen etc. Kijk vooral op om te zien wat er allemaal mogelijk is Probeer zelf maar wat uit!

12 Einde cursus Dit was de laatste cursus van de Websitecursus Als je wilt controleren of je goede HTML en CSS hebt geschreven kan je je website laten valideren op (HTML) of (CSS) Wil je hiermee verder? Kijk dan bijvoorbeeld naar PHP, AJAX, SQL (Kijk op voor inspiratie) Of kom bij de WebCie om te leren hoe het is om een grote website te onderhouden (geen voorkennis nodig). Werkavonden zijn op dinsdag...