Javascript Intro

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

JAVASCRIPT

Wat is JavaScript?
• Front-end programmeertaal
• Client side scripting language
– Hangt af van de browser kwaliteiten

Geschiedenis
• 1995: LiveScript door Netscape
• Jaren '90: redirects, popups, ...

Doel van JavaScript
• Gebruiksvriendelijkheid verbeteren
• Dynamische functionaliteiten voorzien
• Responsive interfaces maken

JavaScript werking
• Werkt op
– DOM (Document Object Model)
– User input
– Inhoud van een pagina
– Css
– Browser gedrag

TOEPASSINGEN VAN
JAVASCRIPT

Form validation

Search form suggesties

Show/hide

Browser testen

Polyfill
vb http://selectivizr.com

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

Lightbox

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

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

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

Alert
<script>
alert('Hallo welkom op mijn website!')
</script>
• Kun je gebruiken voor debuggen van
code vb variabele printen

Alert
<script>
alert('Hallo welkom op mijn website!')
</script>
• Bruikbaar voor snel debuggen vb
variabele printen

Confirm
<script>
confirm('Ben je er zeker van dat je mijn
website wil verlaten?');
</script>

Vorm code
• Hoofdlettergevoelig
• Statements: alert(“Bedankt”);
• Comments: // of /* */
• Variables: var foo = 5;

Variabelen
<script>
var foo = 5;
var bar = 6;
alert(foo + bar);
</script>

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

Loops
<script>
for ( var i = 0; i <= 5; i++ ) {
alert( i );
}
</script>

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

DOM
Document Object Model

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)

MVC Bibliotheken
• Angular JS (http://angularjs.org):
Google
• Backbone.js (http://backbonejs.org)
• Ember.js (http://emberjs.com)

Javascript Server
• Node.js
– Real time info

JQUERY

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

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>

Jquery script 1
<script>
$(document).ready(function() {
$("p").hide("slow");
});
</script>

Jquery script 2
<script>
$("div.nieuws").slideUp("slow").addClass(“removed”);
});
</script>
<div class="nieuws">Hallo</p>

Jquery script 3
<script>
$("table tr:nth-child(even)").addClass("even");
});
</script>
<table>
<tr><td>test 1</td></tr>
</table>

Firebug
• Console tab: foutmeldingen bekijken

Core functionaliteit
http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery12_api_reference.png

Jquery plugins
• https://plugins.jquery.com
•

Fotorama
• http://fotorama.io/set-up

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 

<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>

<div class="fotorama">
<img src="1.jpg">
<img src="2.jpg">
</div>

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>
</body>
</html>

Jquery informatie
• http://api.jquery.com

Bedankt
hans.rossel@koba.be
Twitter: @haro
www.koba.be

Javascript Intro

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Javascript Intro

Semelhante a Javascript Intro (20)

Mais de Hans Rossel

Mais de Hans Rossel (10)

Javascript Intro