1 Websitecursus deel 3 JavaScript A Eskwadraat WebCie 12 oktober 20152 Introductie Twee weken geleden HTML Vorige week CSS Deze week JavaScript3 Javas...
Websitecursus deel 3 JavaScript A–Eskwadraat WebCie [email protected]
12 oktober 2015
jQuery
Introductie
Inleiding JavaScript
Introductie
Twee weken geleden HTML Vorige week CSS Deze week JavaScript
jQuery
Introductie
Inleiding JavaScript
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
jQuery
Introductie
Inleiding JavaScript
Javascript inladen Een JavaScriptbestand kan je in de head van je html als volgt inladen: JS inladen <script src="bestandslocatie">. Ook kan je rechtstreeks JS in de HTML neerzetten: JS inladen 2 <script> alert("Hoi!"); Probeer nu zelf JS in te laden in je website met een alert
jQuery
Introductie
Inleiding JavaScript
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!
jQuery
Introductie
Inleiding JavaScript
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 Maak nu een button op je pagina die de inhoud van een paragraaf wijzigt.
jQuery
Introductie
Inleiding JavaScript
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="https://code.jquery.com/ jquery-2.1.3.min.js">
jQuery
Introductie
Inleiding JavaScript
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
jQuery
Introductie
Inleiding JavaScript
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... });
jQuery
Introductie
Inleiding JavaScript
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"); });
jQuery
Introductie
Inleiding JavaScript
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, emails versturen etc. Kijk vooral op www.w3schools.com/jquery om te zien wat er allemaal mogelijk is Probeer zelf maar wat uit!
jQuery
Introductie
Inleiding JavaScript
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 http://validator.w3.org/ (HTML) of https://jigsaw.w3.org/css-validator/ (CSS) Wil je hiermee verder? Kijk dan bijvoorbeeld naar PHP, AJAX, SQL (Kijk op www.w3schools.com 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...
