js devmeeting
TRANSCRIPT
Javascript
Interpreted programming language
Dynamically typed language
Prototype based
1995 Brendan Eich, Netscape
Syntax gebasseerd op C
Java?
1996 EC1996 ECMA
Javascript Datatypes
Dynamically typed language
Wanneer nodig geconverteerd
Geen error melding
Javascript Datatypes
6 standaard datatypes
Number
String
Boolean
Null
Undened
OObject
Javascript Datatypes - Number
Nummers, nummers en nog eens nummers
1 / 12 / 20000 / 23.5 / 12E3
ECMA: 1 Number type: double-precision 64-bit binary format IEEE 754 value
Geen specieke type voor integers
Dus integer, oat, NaN
Bitshiting / Bitmasking
Javascript Datatypes - String
“Hello, i like to cut my cheese in equal parts before consuming”
Javascript Datatypes - String
Javascript Datatypes - String
Javascript Datatypes - String
Javascript Datatypes - Boolean
true of false
Waar of niet waar :)
Javascript Datatypes - Boolean
true of false
Waar of niet waar :)
Javascript Datatypes - Null
niks, noppes, nada
Meestal expliciet toegewezen
Javascript Datatypes - Undened
eigenlijk self explaining
Javascript Datatypes - Object
Een bak eigenschappen (properties)
Object literal syntax
Key / Value
Add / remove properties
Standaard ingebouwde objecten
Javascript Datatypes - Object
Javascript Datatypes - Object
Een mapping van keys & values
Dot notation & Bracket notation
Key == String value kan alles zijn
Javascript Datatypes - Object
Javascript Datatypes - Object: function
inderdaad, een object
Aanroepbaar
Prototype / constructor
Prex new
anonymous functions
Self invoking functions
named funnamed functions
Parameters
Return value
Javascript Datatypes - Object: function
Self-invoking function
Javascript Datatypes - Object: function
Self-invoking function
Javascript Datatypes - Object: function
Named function
Javascript Datatypes - Object: function
Named function
Javascript Datatypes - Object: function
Named function
Javascript Datatypes - Object: function
Anonymous functions
Javascript Datatypes - Object: function
Named function returning anonymous function
Javascript Datatypes - Object: array
Inderdaad, het is een object
Inherit van Array.prototype
key’s zijn numeriek
value: number, string, object etc
length property!!
Veel methods
Javascript Datatypes - Object: array
Javascript Datatypes - Object: array
Javascript Datatypes - Object: array
Javascript Datatypes - Object: array
Javascript Datatypes - Object: array
Javascript Datatypes - Object: array
Javascript Datatypes - Object: array
Math
Date
RegExp
etc..
jQuery
Javascript Framework
Honderd miljoen miljard plugins
Het zoeken naar elementen in de DOM
Ajax
Realtime content modiceren
Selector engine zoek van rechts naar links
EEen class kan op elk element in je html pagina
ID is (als het goed is ;) ) uniek
De snelste manier ID > Tag > Class > Attribute > Pseudo selector
jQuery
jQuery
jQuery - gebruik .nd()
CSS selectors, querySelector, Javascript based Selector engines
werken van rechts naar links
jQuery - cache je DOM selectors
jQuery - prex $ voor je variabele naam
jQuery - prex $ voor je variabele naam
jQuery - .html() vs .text()
jQuery - .data()
jQuery - Vind het volgende Element
jQuery - Vind het volgende Element
jQuery - Animate()
jQuery - gebruik object literals
jQuery - Events
jQuery - Events
on() the rescue!
on() to the rescue!!
En off() , trigger() & one()
on() to the rescue!!!
jQuery - Events
Waarom??
jQuery - Events
Waarom??
jQuery - Events
jQuery - Events
jQuery - Events
jQuery - Event Delegation
Performance!
memory leak :(
Event handler context
jQuery - each, foreach, for
Performance!
memory leak :(
Event handler context
jQuery - .post(), .get(), .ajax()
Performance!
memory leak :(
Event handler context
jQuery - .post(), .get(), .ajax()
Performance!
memory leak :(
Event handler context
Javascript OOP
Geen classes
Prototype
Constructor
new
Object Literal
Javascript OOP
Geen classes
Prototype
Constructor
new
Object Literal
Javascript OOP
Geen classes
Prototype
Constructor
new
Object Literal
Javascript OOP
Geen classes
Prototype
Constructor
new
Object Literal