[Javascript] 3de editie

JS 3de editie

Na Nielsies Javascript 1 tut en mijn Javascript 2 tut volgt een nieuwe tut: Javascript 3!
In deze tutorial

1. Functies voor gevorderen
2. Inleiding tot Javascript OOP
3. Objecten
4. Klassen
5. Samenvoegen van OOP en jQuery

OPMERKING
Ik ben ook nog aan het leren dus het is zeker mogelijk dat er nog fouten in deze tutorial staan!
Bij het lezen van deze tut ga je automatisch akkoord aan de voorwaarden;

- Ik wordt niet verantwoordelijk gesteld voor eventuele fouten in deze tutorial.
Functies voor gevorderden
Als je de vorige tutorials volgde, weet je ondertussen dat functies bepaalde delen van je code herhalen, zonder dat je deze opnieuw hoeft te schrijven (=methode). Ze korten je code en we hebben twee soorten:
Functies die we overal kunnen aanroepen
Deze functies roepen we aan wanneer we willen.

function grootsteGetal(getal1, getal2) {
    if (getal1 > getal2) {
        return getal1;
    } else {
        return getal2;
    }
}

Als we de functies zouden aanroepen, kijkt deze eerst welk getal het grootste is. Het grootste wordt geretourneerd. D.w.z. dat

var allerGrootsteGetal = grootsteGetal(7, 3);

7
Indien je return gebruikt, moet de verkregen waarde opgevangen worden in een variabele.
Functies die we eerst moeten declareren alvorens we ze kunnen aanroepen

var functie = function() {
    alert("Dit is een functie!");
};
functie();

Als we het statement functie() zouden aanroepen voor de "functie" zou dit een error veroorzaken.
HET VERSCHIL (type1&2)

ikBenEenFunctie();
function ikBenEenFunctie() {
    alert("Deze roepen we aan waar we willen.");
}

// ---------------------------------

var functie = function() {
    alert("Deze roepen we NIET een waar we willen!);
};

// We moeten de functie erachter aanroepen;
functie();

Statements worden afgesloten met een ";". Inleiding tot Javascript OOP
OOP is een afkorting voor "Object georiënteerd programmeren". We maken een object Persoon aan. (Objecten schrijven we liefst met een hoodletter) Van dat object kunnen we dan een instantie aanmaken, bv. Jos. Jos kunnen we dan een hobby geven en/of een leeftijd. We kunnen hem zelfs iets laten doen.

Meer hierover in de volgende hoofdstukken.
Objecten
Ons object is bv. Jules zoals hier;

var Jules = {
    hobby: "Javascripten",
    leeftijd: 16,
    berichtZeggen: function(bericht) {
        alert(bericht);
    }
};

// We laten Jules zijn leeftijd zeggen;
berichtZeggen("Ik ben Jules, " + Jules.leeftijd + " jaar oud en mijn hobby is " + Jules.hobby);

Er is ook nog een andere manier;

var Jules = new Object();
Jules.hobby = "Javascripten";
Jules.leeftijd = 16;
Jules.berichtZeggen = function(bericht) {
    alert(bericht);
};

Het maak niet uit welke manier je gebruikt. Ik verkies echter de eerste.
Klassen*
Een class* is eigenlijk de slimme versie van het object. We kunnen instantie maken van onze klassen of classes: het object.

Een instantie:
Een fabriek van computers ontwerpt een nieuw computermodel en produceert dit. Ze maken dus een instantie van hun computermodel. In de loop van dit hoofdstuk zal alles wel duidelijk worden. Het schrijven van een klasse

function Computer(RAM, processor, moederbord, afleverDatum) {
    this.RAM = RAM;
    this.processor = processor;
    this.hetMoederbord = moederbord;
    var afleverDatum = afleverDatum;
    this.startProductie = function() {
        // En zo verder...
    }
}

Tijdens het proces van de productie moeten de machines weten hoeveel en welke soort RAM, de processor, moederbord de computer moet bevatten, maar ze kunnen de afleverdatum NIET veranderen.

Binnen onze klasse bestaan er twee typen;
Private & public

Private zijn variabelen en/of methoden (=functies) die we niet kunnen veranderen of aanroepen, maar wel binnen de functie.
Public zijn variabelen en/of methoden (=functies) die we WEL kunnen veranderen of aanroepen, zowel buiten als binnen de klasse.

Quote:
Het is een goede gewoonte om variabelen/methoden die je niet hoeft te gebruiken als private te declareren. Zo voorkom je dat jij of iemand anders per ongeluk iets fout doet, of een variabele gebruikt die jij voor je functie gebruikte.

Van de vorige klasse kunnen we dus een instantie creëren;

var ultraSnelleComputer = new Computer("2GB", "een processor", "een ander moederbord", "12/05/2013");

Samenvoegen van OOP en jQuery
Uit de vorige tutorial van Nielsie hoor je jQuery te kennen. Hiermee kon je het document object model (=DOM) manipuleren. We kunnen ermee sliders, menutjes, games enz... maken.

Er is ook een DHTML tutorial aanwezig op one2xs, maar ik raad eerder jQuery aan. Dit is een Javascript library of bibliotheek. Een bibliotheek is een typisch voorbeeld van het OOP-gebruik. Het staat vol met handige methoden/variabelen die we kunnen gebruiken.

We kunnen ook zelf handige klassen maken, die gebruik maken van jQuery, zoals bv. een Slider;

function Slider() {
    this.slides = 4;
    this.startSlideshow = function() {
        // ...
    };
    // ...
}

Opdracht 1 (moeilijk)
Maak een slider de gebruik maakt van de bovenstaande Slider klasse. Zo ervoor dat deze de methodes nextSlide(), previousSlide(), setSlide(), getCurrentSlide(), getSlides() en een methode om startSlideShow() omvat.
Opdracht 2 (gemakkelijk)
Bouw een simpele klasse dropdown. Deze omvat dus een dropdown menu-tje. Zorg ervoor dat wanneer je over een link komt (=hover), er een div verschijnt die alles overlapt.

*

Opmerking:
Klassen bestaan niet in Javascript, maar omdat deze er min of meer op gelijken en ook omdat het verschil ermee beter aan te tonen was, besloot ik er toch gebruik van te maken.

Klassen komen echter in bijna alle programmeertalen terug en zijn handig!

Onder de titel objecten mis je een +je in de onderste regel script

Mooie tut trouwens alhoewel een slotje ook mag

Antonn schreef:

Onder de titel objecten mis je een +je in de onderste regel script

Mooie tut trouwens alhoewel een slotje ook mag

Waarom een slotje? Leg uit

Nielsie schreef:

Eerdere citaten tonen

Antonn schreef:

Onder de titel objecten mis je een +je in de onderste regel script

Mooie tut trouwens alhoewel een slotje ook mag
Waarom een slotje? Leg uit

Ik bedoel een slot in het bericht
Ik hoop dat jullie hier veel aan gehad hebben, dit mag niet gekopieërd worden zonder mijn toestemming, ect.

toevoeging op 31 maart 2013, 1300:
var afleverDatum = afleverDatum;

Nop, niet goed dit

Antonn schreef:

Eerdere citaten tonen

Nielsie schreef:

Eerdere citaten tonen

Antonn schreef:

Onder de titel objecten mis je een +je in de onderste regel script

Mooie tut trouwens alhoewel een slotje ook mag
Waarom een slotje? Leg uit

Ik bedoel een slot in het bericht
Ik hoop dat jullie hier veel aan gehad hebben, dit mag niet gekopieërd worden zonder mijn toestemming, ect.

toevoeging op 31 maart 2013, 1300:
var afleverDatum = afleverDatum;

Nop, niet goed dit

ah zo

Nielsie schreef:

Eerdere citaten tonen

Antonn schreef:

Eerdere citaten tonen

Nielsie schreef:

Eerdere citaten tonen

Antonn schreef:

Onder de titel objecten mis je een +je in de onderste regel script

Mooie tut trouwens alhoewel een slotje ook mag
Waarom een slotje? Leg uit

Ik bedoel een slot in het bericht
Ik hoop dat jullie hier veel aan gehad hebben, dit mag niet gekopieërd worden zonder mijn toestemming, ect.

toevoeging op 31 maart 2013, 1300:
var afleverDatum = afleverDatum;

Nop, niet goed dit

ah zo

Waarom niet? Ik wou gewoon aantonen dat het mocht.