Richard van Velzen - JavaScript: mooi onder de rotzooi

Richard van Velzen expert-shops.com JavaScript Mooi onder de rotzooi

Wie ben ik?
Richard
20 jaar
Webdeveloper
Gitarist

JavaScript
Eerste versie door Brendan Eich bij Netscape
Mocha, LiveScript, JavaScript
LiveScript was niet verwarrend genoeg
Microsoft kopieerde de taal voor IE
Ondertussen hebben we JScript, TraceMonkey, V8, SquirrelFish/Nitro, Carakan, Tamarin, &c.

Invloeden
Scheme
Functioneel
Self
Prototypaal
C
Syntax
Perl
Regexes

JavaScript
Imperatief
Op basis van statements
Functioneel
Functies beheren de werking
Prototypaal
Geen klassen, objecten ervan van objecten
Objectgeoriënteerd
Niet in de klassieke zin, bijna alles is een object
Dynamisch
Variabelen kunnen ieder type bevatten

JavaScript Typen
Undefined
Null
Boolean
Number
String
RegExp
Array
Object
Function
undefined
null
true, false
1, 1.5, -5
“ string”, 'string'
/^[a-z]+$/g
['een', 'twee', 'drie']
{key: 'value'}
function () { }

JavaScript Typen
Type achterhalen
typeof variabele
Is niet altijd even correct
Dankzij de DOM
Object.prototype.toString.call(variabele)
Waarden staan vast
Maar werkt niet altijd goed met de DOM samen
variabele instanceof String
Onhandig, niet gebruiken

Undefined
De naam zegt het al: ongedefinieerd
De variabele undefined heeft altijd deze waarde
Enige betrouwbare vergelijking is met typeof
typeof var === 'undefined'

Null
Net als in veel andere talen: onbekend
Dit is niet hetzelfde als undefined
typeof null === 'object', dit is niet handig
Enige betrouwbare vergelijking: var === null

Boolean
Booleans kunnen twee waarden bevatten
true
false
typeof true === 'boolean'
Het resultaat van een vergelijking is boolean

Number
Geen integers en doubles, alleen Number
Gebaseerd op IEEE 754 floating point
Niet betrouwbaar genoeg, slechte keuze
Kent twee speciale waarden
NaN: Not A Number
Een globale variabele
typeof NaN === 'number', NaN !== Nan
isNan(1 + NaN) === true
Infinity
Altijd groter dan welk Number
-Infinity is altijd kleiner

String
Strings zijn sequenties van karakters
Altijd UTF-16 (2 bytes per teken)
Geen harde newlines in strings
'string string string en meer'
'string string string ' + 'en meer'

RegExp
:-)
Gebaseerd op reguliere expressies uit Perl
/[a-zd]+/i matcht alle sequenties van letters en cijfers
Vaak veel efficiënter dan andere methoden
In feite niets meer dan een object, net als Date

Array
Arrays zijn objecten met geïndexeerde elementen
[1, 2, 3] is een array met 3 elementen
{'0': 1,'1': 2, '2': 3}
Geen echte arrays, dus niet zo efficiënt
Wel erg makkelijk in gebruik

Object
Bijna elk ander type is gebaseerd op Object
Alles behalve undefined en null is een object
Objecten zijn in feite simpele key/value-paren
Associatieve arrays
Bijzonder handig in het gebruik
Je kunt te allen tijde een element toevoegen of verwijderen
object.key = 'value';
delete object.key;

Object Prototype
Array.prototype.each = function () { … };
Het prototype legt de fundering voor een serie objecten
Herbruikbaarheid
Een prototype is gewoon een Object, met prototype
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}

Function
Het belangrijkste type van de taal
Bijzonder makkelijk in het gebruik
First-class
Lambda
Anonieme functies
Kunnen ook een naam krijgen
Closure
Variabelen van een hogere scope blijven te allen tijde beschikbaar
Scope
Geen block scope, alleen functie-scope
Met return geef je een waarde terug

Typen
Let op: alle objectgebaseerde typen hebben ook een “constructor”
Dit is altijd afgeraden
Alleen bij RegExp is het aanvaardbaar
new Boolean ('string')
!!'string'
new String(15)
'' + 15
new Number('0')
+'0'
parseInt('0', 10)

Variabelen
De kern van alle programmeertalen
Altijd vooraf definiëren
Of zoek je problemen?
Een nietgedefinieerde variabele aanroept geeft een foutmelding, niet undefined
var mijnVariabele = {};
Globale variabelen zijn evil !
En vooral: niet nodig

Variabelen Privacy
Hoe minder globale variabelen, hoe beter
Direct uitvoeren van een functie
var APP = (function () { var verborgenVariabele = true; return { publiekeFunctie: function (variabele) { // dankzij closure is verborgenVariabele beschikbaar return verborgenVariabele; } }; }());

Variabelen Privacy
Een enkel globaal object waarin je complete applicatie draait is veilig
Geen gevaar door het overschrijven van globale variabelen
var namen = ['jan', 'piet', 'klaas']; function getNaam(i) { return namen[i]; } var namen = function (naam) { return naam; }

Operators
== (en !=) vs. === (en !==)
== doet typeconversie -> ongewenst
=== controleert eerst het type
De regels voor typeconversie zijn erg vreemd
0.1 + 0.2 === 0.300000000000004
Verder de standaardlijst (!, +, -, +=, -= &c.)
Uitzondering: || en &&
Niet logisch
&& geeft tweede argument indien eerste true was
|| is precies andersom
En in beide gevallen: anders de eerste

Operators
+
Zowel concattenatie als optellen
'string' + 'string' === 'stringstring'
1 + 1 === 2
'string' + 5 === 'string5'
5 + 1 + 'string' === '6string'

Statements
while (i < 10) { … }
for
for (var i = 0; i < 10; ++i) { … }
for (var key in object) { … }
do { … } while ();
switch (v) { case 1: break; default: true; }
if (false) { } else if (true) { }
try { … } catch (e) { … } finally { … }
Loops kennen een break en continue
Liever niet, de taal is al verwarrend genoeg

Statements
for … in geeft alle waarden van een object
Heel handig, maar ook alles uit het prototype
Ongewenst, vaak
Met hasOwnProperty kun je zien of een element niet uit het prototype komt
for (var key in table) { if (table.hasOwnProperty(key)) { // doe er echt iets mee } }

Statements
With
Bizarre uitvinding
Werkt enkel vertragend zonder meerwaarde
with (object) { // waar komt a vandaan? alert(a); }
var b = a; alert(b.a);

Automatische semicolon
Ten eerste: geen enkele taal is perfect
Je mag ; weglaten
Doe dit niet !
Kan bijzonder gedrag opleveren
return { a: b }; return; { a: b; }; // geeft object return { a: b };

Gereserveerde woorden
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with

Globaal
JavaScript kent geen aparte compilatie-units zoals bijvoorbeeld C
Hierdoor deelt ieder script hetzelfde globale object
Alleen te voorkomen met (function () { … }());

Closure
Het krachtigste wat in een taal kan zitten
Een functie binnen een andere functie heeft toegang tot alle variabelen die de scope erbuiten kan zien
for (var i = 0; i < 5; ++i) { elems[i].onclick = function () { alert(i); // werkt niet goed }; }
for (var i = 0; i < 5; ++i) { elems[i].onclick = (function (i) { return function () { alert(i); // werkt prima }; }(i)); }

Vragen?

Richard van Velzen - JavaScript: mooi onder de rotzooi

by PFCongres on Apr 19, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 6

Statistics

Richard van Velzen - JavaScript: mooi onder de rotzooi — Presentation Transcript

http://www.slideshare.net	5
http://static.slidesharecdn.com	1