HTML5, Javascript en CSS

Handige URL's:
www.typescriptlang.org  -> type uitbreiding op javascript
www.w3schools.com
www.devdocs.io
www.caniuse.com
www.microsoft.com/learning/companionmoc    ->  20480
cordova.apache.org  -> Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript

Javascript:
Websockets, sockets die altijd open staan en daardoor server naar client communicatie mogelijk maken.
SignalR, een .NET websockets library.

arguments: als je een functie wilt aanmaken met een variabel aantal argumenten, dan kun je 0 argumenten invullen

en met arguments.length bepalen hoeveel en met arguments[0] bijvoorbeeld de eerste parameter ophalen.

localStorage -> een object waarin je key-value pairs kunt zetten. Deze informatie blijft behouden.
sessionStorage -> alleen beschikbaar binnen de sessie.
if (!localStorage.hup) { localStorage.hup = 'bericht'; }

Dragdrop:
this.canvas.addEventListener("dragover", this.handleDragOver.bind(this));
this.canvas.addEventListener("drop", this.handleDrop.bind(this));

function handleDragOver(event) {
   event.stopPropagation();
   event.preventDefault();
   event.dataTransfer.dropEffect = 'copy'; // Makes the browser display a "copy" cursor.
}

function handleDrop(event) {
   event.stopPropagation();
   event.preventDefault();
   var blob = event.dataTransfer.files[0];
   var reader = new FileReader();
   reader.onload = function(data) { alert(data.target.result); }
   reader.readAsText(blob);
   //reader.readAsDataURL(blob);
}

Geolocation:
navigator.geolocation.getCurrentPosition(success-function(position), error-function);
position.coords.latitude
position.coords.longitude

Javascript Writeonly properties, Setters en Getters:
Object.defineProperty(obj1, "prop1", { value: "hallo", writable: false });
obj1.prop1 = "wereld";
alert(obj1.prop1); -> "hallo"
Object.defineProperty(obj, "newAccessorProperty", {
    set: function (x) {
    },
    get: function () {
        return ...;
    },
    enumerable: true,
    configurable: true
});

Inheritance:
var Person = function(name, age) { this.name = name; this.age = age; };
Person.prototype = { haveBirthday: function() { this.age++; } };
var Student = function(name, age, subject) {
    Person.bind(this)(name, age);
    //Person.call(this, name, age);
    //Person.apply(this, [name, age]);
    this.subject = subject;
};
Student.prototype = new Person();
Student.prototype.constructor = Student;
var st = new Student("Jim", 20, "Physics");
st.haveBirthday();
var st2 = Object.create(st);
st2.age = 18;
st2.subject = "BioChemistry";
alert(st.name + " " + st.age + " " + st.subject);
alert(st2.name + " " + st2.age + " " + st2.subject);

Object.create() kun je een copie maken van het object.

bind() kan meer elementen binden dan alleen de this. Die argumenten staan dan ook vast.
Person.bind(this, 'naam', 10);

"use strict"

var retval = URL.createObjectURL(object, oOptions);
The Blob that is created can be used for resources in elements such as Image, video, audio, XMLHttpRequest, css

backgroundImage, and css fonts.

online/offline
document.body.onoffline = online-function();
document.body.ononline = offline-function();

jQuery Deferred:
var deferred1 = function (data) { return [2,1]; };
var deferred2 = function (data) { return [3,0]; };
var deferred = $.Deferred();
deferred.then(deferred1).then(deferred2).done(function (data) { alert(data); });; deferred.resolveWith(deferred, [[0,18]]);

jQuery Ajax:
if ($.postJSON === undefined) {
   $.postJSON = function (url, data) {
       return $.ajax({ type: "POST", url: url, data: data, dataType: "json" }); }
 }
$.postJSON(url, data).done( function (data, textStatus) { alert("success"); }).fail( function () { alert("Could not upload post!"); }); }


HTML:
input attribuut autofocus  ->  zet de focus op dit veld.
input attribuut autocomplete  ->  keuzelijst van eerder ingevulde waarden
input attribuut placeholder -> tekst die grijs vooringevuld erin staat.
input attribuut pattern -> regular expression waaraan de tekst moet voldoen achteraf.
input attribuut title -> de hint die wordt gegeven als de regular expression niet goed wordt ingevoerd.
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
input attribuut border-radius -> ronde hoeken.


CSS:
@media (max-width: 5in) {
  /* Voer hier je css in die uitgevoerd wordt bij displays kleiner dan 5inch */
}

@media print {
  /* voor hier je css in voor print */
}
Genaamd media query.
Op de volgende manier laad je alleen de css in als de grootte van het scherm kleiner dan 5 inch is:
<head><link media="max-width: 5in" rel="stylesheet" type="text/css" href="theme.css"></head>

Nieuwe flow genaamd:
display: flex
flex-grow: 1


C#;
Observerable collection -> kun je een funcie automatisch aanroepen als een element wordt toegevoegd.
class QuestionList : ObservableCollection<Question> { }

Questions.CollectionChanged += (sender, args) =>
{
    switch (args.Action)
    {
        case NotifyCollectionChangedAction.Add:
            SendQuestions(args.NewItems.Cast<Question>());
            break;

        case NotifyCollectionChangedAction.Remove:
            {
                var ids = args.OldItems.Cast<Question>().Select(q => q.id).ToList();
                ids.ForEach(SendRemove);
            }
            break;
    }
};