Zooming

Zoomen is niet zo moeilijk.
Zie m'n jsfiddle.

HTML:
<p>
Dit is een tekst
</p>

Javascript:
var value = 200;
var body = document.body;

body.style.MozTransformOrigin = "top left";
body.style.MozTransform = "scale(" + (value/100)  + ")";

body.style.WebkitTransformOrigin = "top left";
body.style.WebkitTransform = "scale(" + (value/100)  + ")";

body.style.OTransformOrigin = "top left";
body.style.OTransform = "scale(" + (value/100)  + ")";

body.style.TransformOrigin = "top left";
body.style.Transform = "scale(" + (value/100)  + ")";
// IE
body.style.zoom = value/100;

Klachten over ECMA2015 en Typescript classes

Tot nu toe gebruiken veel Javascript programmeurs een direct executerende function om code te groeperen. Zoiets als:

(function(){

    namespace.class = function() {

   }

})();

Met EMCA2015 en Typescript kun je classes gaan maken. Helaas is het niet bruikbaar genoeg, want:

1) ECMA2015 en Typescript classes kennen geen member variabelen die te bereiken zijn zonder "this". Bij iedere variabele die je gebruikt heb je dus de voorloper "this.". Dat vervuilt je blik op de code.

2) Als je een method van buiten laten aanroepen, dan is je "this" niet correct meer en moet je dus weer bind(this) van stal halen. Dat maakt de code ook niet simpeler.

Typescript en Javascript zoals Groovy en Java?

Velen kennen Groovy of Scala als taal die compileert naar de Java VM. In de Javascript wereld hebben we Typescript, een taal die transpileert naar Javascript.

De hoofdreden om Typescript te gebruiken is type checking. Tijdens het ontwikkelen weet je IDE welke methods en properties een object heeft. Met javascript weet je dat niet.

Is Typescript hetzelfde lot beschoren als Groovy? Namelijk dat steeds meer functionaliteit in Javascript erbij komt waardoor Typescript niet meer te rechtvaardigen is?

Ik denk het wel. Daarbij baseer ik m'n mening op de nieuwe Ecmascript 6 functionaliteit. Wat een enorme hoeveelheid functionaliteit komt erbij. Classes, default parameters, etc...
Nog even en dan is Ecmascript (javascript) dusdanig volwassen dat Typescript niet meer nodig is. De programma's die dan Typescript gebruiken zijn dan legacy en kunnen weer omgeschreven worden.

Daarom is het ook een idee om Babel te gebruiken. Dan programmeer je Ecmascript 2015(ofwel 6), maar transformeer je het naar Ecmascript 5. Op die manier blijf je compatible met Ecmascript en voorkom je dat je in de toekomst moet omschrijven.

De beste optie is de Closure Compiler, naar mijn mening. Deze biedt ES6 functionaliteit maar niet de lelijke randgevallen die niet mooi naar ES5 zijn om te zetten.

Ecmascript 2015(oftewel versie 6) wordt niet ondersteund door Internet Explorer, wel door Edge. Google Chrome vanaf versie 49, Firefox vanaf versie 45.

Javascript class structure

Hoe kom je in Javascript tot een Class structure?
Zo kan het bijvoorbeeld:

var Klasse = (function() {
  function Klasse() {
    alert("Constructor Klasse");   
  }
  Klasse.prototype = {
    set waarde(nieuweWaarde) {
      this._nieuweWaarde = nieuweWaarde;
      alert(nieuweWaarde);
    },
    propMethod: function() {
      alert("propMethod");
    }
  }
  return Klasse;
})();

var SubKlasse= (function() {
  function SubKlasse() {
   function init() {
     alert("init");
    }
    function klassemethod() {
     alert("klassemethod");
    }
    this.klassemethod = klassemethod;
    init();
  }
  SubKlasse.prototype = Klasse.prototype;
  return SubKlasse;
})();

var tmp = new Klasse();
var subtmp = new SubKlasse();
subtmp.propMethod();
//tmp.propMethod();
tmp.waarde = "hallo2";
alert(tmp._nieuweWaarde);
subtmp.klassemethod();

Door middel van de prototype kun je interfacing doen, zelfs inheritance.