![I n f o r m a t i c s Hans Rossel - www.koba.be
Arrays en if/else
<script>
var foo = [5, "zes", 7];
if( foo[1] === "zes") {
alert("We tellen vanaf 0 en dus klopt dit");
}
</script>
• === betekent identiek: gelijk + zelfde datatype
• == betekent gelijk](https://image.slidesharecdn.com/javascript18032014-140318140852-phpapp02/85/Javascript-Intro-24-320.jpg)
Javascript Intro
- 1. I n f o r m a t i c s Hans Rossel - www.koba.be Browser testing • Virtual machines http://www.modern.ie/en-us/virtualization-tools#downlo ads • http://www.browserstack.com
- 2. I n f o r m a t i c s Hans Rossel - www.koba.be JAVASCRIPT
- 3. I n f o r m a t i c s Hans Rossel - www.koba.be Wat is JavaScript? • Front-end programmeertaal • Client side scripting language – Hangt af van de browser kwaliteiten
- 4. I n f o r m a t i c s Hans Rossel - www.koba.be Geschiedenis • 1995: LiveScript door Netscape • Jaren '90: redirects, popups, ...
- 5. I n f o r m a t i c s Hans Rossel - www.koba.be Doel van JavaScript • Gebruiksvriendelijkheid verbeteren • Dynamische functionaliteiten voorzien • Responsive interfaces maken
- 6. I n f o r m a t i c s Hans Rossel - www.koba.be JavaScript werking • Werkt op – DOM (Document Object Model) – User input – Inhoud van een pagina – Css – Browser gedrag
- 7. I n f o r m a t i c s Hans Rossel - www.koba.be TOEPASSINGEN VAN JAVASCRIPT
- 8. I n f o r m a t i c s Hans Rossel - www.koba.be Form validation
- 9. I n f o r m a t i c s Hans Rossel - www.koba.be Search form suggesties
- 10. I n f o r m a t i c s Hans Rossel - www.koba.be Show/hide
- 11. I n f o r m a t i c s Hans Rossel - www.koba.be Browser testen
- 12. I n f o r m a t i c s Hans Rossel - www.koba.be Polyfill vb http://selectivizr.com
- 13. I n f o r m a t i c s Hans Rossel - www.koba.be Polyfill voorbeelden • https://code.google.com/p/html5shiv: html5 elementen zoals article, section herkennen door IE 6-8 • http://modernizr.com: feature detection + html5 elementen herkennen • http://selectivizr.com: css selectors zoals nth-child voor IE 6-8 • http://responsejs.com: media queries min-width en max-width voor IE 6-8
- 14. I n f o r m a t i c s Hans Rossel - www.koba.be Lightbox
- 15. I n f o r m a t i c s Hans Rossel - www.koba.be Andere toepassingen • Inhoud opvragen van de server en invoegen in de pagina zonder de pagina te herladen (Ajax) • Afwerking van de user interface: form elements
- 16. I n f o r m a t i c s Hans Rossel - www.koba.be JavaScript toevoegen • Embedded <script>Hier de JavaScript code</script> • External <script src=”script.js”></script> – Hetzelfde script op meerdere pagina's – Iets minder goed voor performance wegens http request
- 17. I n f o r m a t i c s Hans Rossel - www.koba.be Plaatsing script • Mag overal geplaatst worden • Meest gebruikelijk – In <head> – Vlak voor </body> • Een script blokkeert de rendering van de pagina dus de zichtbare performance zal beter zijn als het onderaan wordt geplaatst. Maar: uitzonderingen: vb Modernizr
- 18. I n f o r m a t i c s Hans Rossel - www.koba.be Alert <script> alert('Hallo welkom op mijn website!') </script> • Kun je gebruiken voor debuggen van code vb variabele printen
- 19. I n f o r m a t i c s Hans Rossel - www.koba.be Plaatsing script • Mag overal geplaatst worden • Meest gebruikelijk – In <head> – Vlak voor </body> • Een script blokkeert de rendering van de pagina dus de zichtbare performance zal beter zijn als het onderaan wordt geplaatst. Maar: uitzonderingen: vb Modernizr
- 20. I n f o r m a t i c s Hans Rossel - www.koba.be Alert <script> alert('Hallo welkom op mijn website!') </script> • Bruikbaar voor snel debuggen vb variabele printen
- 21. I n f o r m a t i c s Hans Rossel - www.koba.be Confirm <script> confirm('Ben je er zeker van dat je mijn website wil verlaten?'); </script>
- 22. I n f o r m a t i c s Hans Rossel - www.koba.be Vorm code • Hoofdlettergevoelig • Statements: alert(“Bedankt”); • Comments: // of /* */ • Variables: var foo = 5;
- 23. I n f o r m a t i c s Hans Rossel - www.koba.be Variabelen <script> var foo = 5; var bar = 6; alert(foo + bar); </script>
- 24. I n f o r m a t i c s Hans Rossel - www.koba.be Arrays en if/else <script> var foo = [5, "zes", 7]; if( foo[1] === "zes") { alert("We tellen vanaf 0 en dus klopt dit"); } </script> • === betekent identiek: gelijk + zelfde datatype • == betekent gelijk
- 25. I n f o r m a t i c s Hans Rossel - www.koba.be Loops <script> for ( var i = 0; i <= 5; i++ ) { alert( i ); } </script>
- 26. I n f o r m a t i c s Hans Rossel - www.koba.be DOM • Programmeer interface (api) voor html en xml pagina's • Kan gebruikt worden om de inhoud van een document te manipuleren met JavaScript. Inhoud betekent hier zowel de tags als de eigenlijke inhoud. • DOM is een verzameling van element nodes (tags), attribuut nodes (vb href) en text nodes
- 27. I n f o r m a t i c s Hans Rossel - www.koba.be DOM Document Object Model
- 28. I n f o r m a t i c s Hans Rossel - www.koba.be DOM Document Object Model
- 29. I n f o r m a t i c s Hans Rossel - www.koba.be Bibliotheken • Jquery (http://jquery.com) • Dojo (http://dojotoolkit.org): Ajax applicaties • Mootools (http://mootools.net): My Object Oriented Tools • YUI (http://yuilibrary.com): Yahoo! User Interface Library • (Prototype: http://prototypejs.org, niet meer onderhouden)
- 30. I n f o r m a t i c s Hans Rossel - www.koba.be MVC Bibliotheken • Angular JS (http://angularjs.org): Google • Backbone.js (http://backbonejs.org) • Ember.js (http://emberjs.com)
- 31. I n f o r m a t i c s Hans Rossel - www.koba.be Javascript Server • Node.js – Real time info
- 32. I n f o r m a t i c s Hans Rossel - www.koba.be JQUERY
- 33. I n f o r m a t i c s Hans Rossel - www.koba.be Wat is Jquery? • JavaScript bibliotheek • Geschreven in 2005 door John Resig • Open Source • 80% van de top 10.000 websites gebruikt het • Syntax trekt heel goed op css • Heeft een UI library JqueryUI
- 34. I n f o r m a t i c s Hans Rossel - www.koba.be Toevoegen van Jquery • Twee versies – v1 – v2: geen support voor IE6/7/8 • <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
- 35. I n f o r m a t i c s Hans Rossel - www.koba.be Jquery script 1 <script> $(document).ready(function() { $("p").hide("slow"); }); </script>
- 36. I n f o r m a t i c s Hans Rossel - www.koba.be Jquery script 2 <script> $(document).ready(function() { $("div.nieuws").slideUp("slow").addClass(“removed”); }); </script> <div class="nieuws">Hallo</p>
- 37. I n f o r m a t i c s Hans Rossel - www.koba.be Jquery script 3 <script> $(document).ready(function() { $("table tr:nth-child(even)").addClass("even"); }); </script> <table> <tr><td>test 1</td></tr> <tr><td>test 1</td></tr> <tr><td>test 1</td></tr> <tr><td>test 1</td></tr> </table>
- 38. I n f o r m a t i c s Hans Rossel - www.koba.be Firebug • Console tab: foutmeldingen bekijken
- 39. I n f o r m a t i c s Hans Rossel - www.koba.be Core functionaliteit http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery12_api_reference.png
- 40. I n f o r m a t i c s Hans Rossel - www.koba.be Jquery plugins • https://plugins.jquery.com •
- 41. I n f o r m a t i c s Hans Rossel - www.koba.be Fotorama • http://fotorama.io/set-up <!-- 1. Link to jQuery (1.8 or later), --> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- 33 KB --> <!-- fotorama.css & fotorama.js. --> <link href="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.css" rel="stylesheet"> <script src="http://fotorama.s3.amazonaws.com/4.4.9/fotorama.js"></script> <!-- 2. Add images to <div class="fotorama"></div>. --> <div class="fotorama"> <img src="1.jpg"> <img src="2.jpg"> </div>
- 42. I n f o r m a t i c s Hans Rossel - www.koba.be Colorbox http://www.jacklmoore.com/colorbox/guide/ <!doctype html> <html> <head> <link rel="stylesheet" href="colorbox.css"> <script src="jquery.min.js"></script> <script src="jquery.colorbox-min.js"></script> <script>jQuery('a.gallery').colorbox();</script> </head> <body> <a class='gallery' href='image1.jpg'>Photo_1</a> <a class='gallery' href='image2.jpg'>Photo_2</a> <a class='gallery' href='image3.jpg'>Photo_3</a> </body> </html>
- 43. I n f o r m a t i c s Hans Rossel - www.koba.be Jquery informatie • http://api.jquery.com
- 44. I n f o r m a t i c s Hans Rossel - www.koba.be Bedankt hans.rossel@koba.be Twitter: @haro www.koba.be