Hvordan lykkes med JavaScript – – Intro

Intro

• Designet på 10 dager i 1995 av Brendand Eich i Netscape
• Kjøre i browser uten kompilering
• Et språk for ikke-profesjonelle programmerere
• Designet for å ligne på Java

Nettsider på 90-tallet

Paradigmer

• Dynamisk typet

myObject.a = 1;
myObject.a = "foo bar!"

Paradigmer

• Funksjonelt

var myFunction = function(){ }

// variabel:   myFunction
// invokering: myFunction()
                

Paradigmer

• Objekt-orientert, men ikke klasser

var myConstructor = function()  {
    this.a = 1;
    this.b = 2;
};
myConstructor.prototype = {
    sum: function() {
        return this.a + this.b
    }
};

var myObject = new myConstructor;

// myObject.sum() => 3
                

Så hva er problemet med JavaScript?

- En rangering fra 5 til 0 →

Anbefalt lesing

5. Sær typekonvertering

'\n  123  \t' == 123    // true
typeof NaN              // "number"
                

var x = {}, y = {};
x == y                  // false
x >= y                  // true
x <= y                  // true

{} + []                 // 0
{} + {}                 // NaN
[] + {}                 // "[object Object]"

4. Uvanlig håndtering av scope

Kun funksjonscope

function() {
    if ( ... ) {
        var foo = "bar";
    }
    // foo => "bar"
}
// foo => undefined
                

3. Forvirrende "this"

Globalt scope er fallback

funksjon()                 // this => 'globalt scope'
mittObjekt.funksjon()      // this => mittObjekt
funksjon.call(mittObjekt)  // this => mittObjekt
                

variabel = "foobar";
                

2. Vanskelig å forstå arv

Varebil.prototype = new Bil; // Varebil subklasser Bil
                

1. Dårlig implementasjon i browsere

<!--[if lt IE 9]>
     <script src="html5shiv.js"></script>
<![endif]-->

0. Mangel på abstraksjon

    $("form").on("submit", function () {   
        $.ajax({
            url:"http://foo.no",
            type:"get",
            data:$("#foo [type=text]").val(),
            error:function (error) {
                $("#feilmeldingsboks").text(error);
            },
            success:function (data) {
                $("#resultatTabell").empty();
                JSON.parse(data).forEach(function (x) {
                    var rad = "" + x.navn + "";
                    $("#resultatTabell").append(rad);
                });
            }
        });
    });

Kan fort føre til spaghettikode

Benytt god programmeringsskikk

Benytt kjente designpatterns

• Ikke manipuler DOM-en direkte, gjør abstraksjoner.
• Inndeling i f. eks. Model-View-Controller (MVC).

MVC i Backbone

var SearchFormView = Backbone.View.extend({

    initialize: function() {
        this.model = new SearchModel();
        this.model.on("sync", this.render);
        this.model.on("error", this.renderErrorMessage);
    },
    
    events: {
        "form submit": "performSearch"
    },
    
    performSearch: function() {
        this.model.fetch();
    }
});

Angular

"HTML enhanced for web apps"

<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">

<h1>Hello {{yourName}}!</h1>

MV*-rammeverk i JS

Kilde: Google Trends

Finn riktig MV*-rammeverk

Samme applikasjon utviklet i 45 varianter.

Bruk de rette biblioteker

• JavaScript er full av feil, men finnes veldig mange biblioteker til språket.
• Kan fort skape flere problemer enn de løser, må velges med omhu.