Start tot program – Werken met datastructuren

,
print

Inhoud

Wat vooraf ging

U hebt reeds kennis gemaakt met de anatomie van een computerprogramma en het programma in goede banen geleid via de control flow.

Dit is het laatste deel in de reeks Start to program. We gaan nog even snel kennis maken met een aantal structuren. Meer bepaald:

  • Lijsten (array)
  • Objecten
  • Databanken

Dit zijn drie belangrijke begrippen, waar u zeker kennis mee moet maken, maar het zijn ook begrippen die naargelang de gekozen programmeertaal specifiek behandeld zullen worden.

  • Lijsten zijn nog vrij “basis” en worden ook wat uitgebreider behandeld.
  • Objecten zijn essentieel in een objectgeoriënteerde programmeertaal en zullen binnen deze objectgeoriënteerde programmeertaal uitgebreid aan bod komen maar worden hier slechts geduid.
  • Databanken zijn eveneens een essentieel begrip maar er zijn zoveel specifieke manieren om met databanken te werken dat hiervoor een afzonderlijke module is uitgetrokken.

Het is dus niet de bedoeling om in de module Start to program reeds diep in te gaan op deze begrippen, maar u moet er wel weet van hebben en dat is de doelstelling van deze post.

Ik ga opnieuw gebruik maken van App lab en van de goede ondersteunende video’s. log u in op App lab (eventueel Game lab) en we kunnen eraan beginnen.

Lijsten (arrays)

 

 

Opmerking: de gebruikte functies insertItem(), appendItem() en removeItem() zijn eigen aan App lab en geen standaard Javascript-functies.

Lijsten worden gebruikt wanneer u meerdere waarden aan eenzelfde variabele wenst toe te kennen.

In het geheugen van de computer staan alle elementen van de lijst na elkaar. De index van het element bepaalt de volgorde, het rangnummer, van het element binnen de lijst/array.

Werken zonder array

Voorbeeld 1 (zonder gebruik te maken van een array)

Stel, u wilt 5 willekeurige getallen bijhouden met een waarde tussen 1 en 6.
//Verwerking
var Getal1 = Math.floor(Math.random() * 6) + 1;
var Getal2 = Math.floor(Math.random() * 6) + 1;
var Getal3 = Math.floor(Math.random() * 6) + 1;
var Getal4 = Math.floor(Math.random() * 6) + 1;
var Getal5 = Math.floor(Math.random() * 6) + 1;

//Uitvoer
var Tekst = "";
Tekst += Getal1 + " - ";
Tekst += Getal2 + " - ";
Tekst += Getal3 + " - ";
Tekst += Getal4 + " - ";
Tekst += Getal5;

write(Tekst);

Het genereren van een willekeurig getal is reeds besproken.

In dit voorbeeld willen we slechts 5 willekeurige getallen genereren, maar stel nu dat u er 100 wilt, of 1000, of… Hebt u zin om er aan te beginnen op deze manier?

De oplossing ligt hem in het gebruik van een lijst/array. Een array wordt immers gebruikt om “meerdere waarden aan eenzelfde variabele toe te kennen” en dat is nu net wat we wensen te doen. We wensen een variabele Getal meerdere, gelijkaardige, waarden toe te kennen.

Werken met een array

De array declareren

Eerst moeten we de array declareren. Dit kan op 2 manieren:

var arraynaam = new Array();

var arraynaam = [];

Om redenen van eenvoud, maar ook een paar technische die ik voorlopig even buiten beschouwing laat, is de tweede methode te verkiezen. We gaan dan ook verder met de var arraynaam = []; methode.

De array kan initieel leeg zijn:

var Getallen = [];

Of de array kan initieel opgevuld worden met waarden:

var Vestigingen = ["Ninove", "Oudenaarde", "Zottegem"];

Elementen binnen een array aanspreken

Na het declareren van de array kunnen de elementen met hun index aangesproken worden. Dit gebeurt als volgt:

arraynaam[index];

Het eerste element in een array heeft index = 0.

De waarde van elementen binnen een array wijzigen of toevoegen

Om de waarde van elementen binnen een array te wijzigen gebruiken we onderstaande code:

arraynaam[index] = waarde;

Bijvoorbeeeld:

Getallen[0] = Math.floor(Math.random() * 6) + 1;
Getallen[1] = Math.floor(Math.random() * 6) + 1;

Indien er zich op dat index-nummer nog geen waarde bevindt wordt de waarde op dat index-nummer toegevoegd. Bevat dat index-nummer reeds een waarde dan wordt die waarde gewijzigd in de nieuwe, toegekende, waarde.

Voorbeeld 2 (met een array)

Stel, u wilt 5 willekeurige getallen bijhouden met een waarde tussen 1 en 6.
//Declaratie array
var Getallen = [];

//Verwerking
Getallen[0] = Math.floor(Math.random() * 6) + 1;
Getallen[1] = Math.floor(Math.random() * 6) + 1;
Getallen[2] = Math.floor(Math.random() * 6) + 1;
Getallen[3] = Math.floor(Math.random() * 6) + 1;
Getallen[4] = Math.floor(Math.random() * 6) + 1;

//Uitvoer
var Tekst = "";
Tekst += Getallen[0] + " - ";
Tekst += Getallen[1] + " - ";
Tekst += Getallen[2] + " - ";
Tekst += Getallen[3] + " - ";
Tekst += Getallen[4];

write(Tekst);

Ok, we gebruiken nu een array, maar waar is de winst want uiteindelijk moet er nog steeds evenveel getypt worden.

Wel, de winst komt er als we de array opvullen en weergeven gebruikmakend van een lus.

Lussen gebruiken om een array op te vullen en weer te geven

 

We kunnen de array opvullen met willekeurige getallen gebruikmakend van een lus.

var AantalGetallen = 4;
for (var x = 0; x <= AantalGetallen; x++) {
Getallen[x] = Math.floor(Math.random() * 6) + 1;
}

Door de waarde van de variabele AantalGetallen te wijzigen kan u zoveel getallen toevoegen als u wenst. Let op dat u voor AantalGetallen eentje minder neemt dan het getal dat u wenst omdat u moet beginnen te tellen bij 0. Vandaar var AantalGetallen = 4;.

Indien u liever toch AantalGetallen = 5 gebruikt, dat kan, maar denkt er dan aan dat u de lus moet doorlopen zolang de waarde van x kleiner is dan het AantalGetallen. U moet dus het =-teken verwijderen.

for (var x = 0; x < Aantalgetallen; x++)

In plaats van de waarde van de variabele kan je ook de lengte van de array opvragen, eens deze gekend is. Dit doe je met de code:

arraynaam.length

Bijvoorbeeld:

for (var y = 0; y < Getallen.length; y++) {
Tekst += Getallen[y] + " - ";
}

Aangezien de indexering begint bij 0 zal de lengte steeds 1 hoger zijn dan de hoogste index.

Voorbeeld 3 (met een array en een lus)

Stel, u wilt 5 willekeurige getallen bijhouden met een waarde tussen 1 en 6.
//Declaratie array
var Getallen = [];

//Verwerking
var AantalGetallen = 4;
for (var x = 0; x <= AantalGetallen; x++) {
	Getallen[x] = Math.floor(Math.random() * 6) + 1;
}

//Uitvoer
var Tekst = "";
for (var y = 0; y < Getallen.length; y++) {
	Tekst += Getallen [y] + " - ";
}

write(Tekst);

Lijsten sorteren

Alfabetisch sorteren van A naar Z

Een array alfabetisch sorteren van A naar Z kan door gebruik te maken van de sort() methode. De syntax is:

NaamArray.sort();

Alfabetisch sorteren van Z naar A

Om een array alfabetisch te sorteren van Z naar A voeren we eerst een sort() uit en nadien gebruiken we de reverse() methode om de volgorde om te keren. De syntax is:

NaamArray.sort();
NaamArray.reverse();

Numerieke waarden sorteren

Om numerieke waarden (getallen) te sorteren kan ook de sort() methode gebruikt worden maar moet tevens, binnen de sort() methode wordt een functie geplaatst die aangeeft hoe de sortering (van klein naar groot of van groot naar klein) moet gebeuren. De functie krijgt 2 parameters mee (bv. a en b) en de return-waarde bepaalt de volgorde.

De syntax voor het sorteren van numerieke waarden

van klein naar groot (stijgend of op zijn Engels Ascending) is:

NaamArray.sort(function(a, b){return a-b});

van groot naar klein (dalend of op zijn Engels Descending) is:

NaamArray.sort(function(a, b){return b-a});

Voorbeeld 4 (met een array en een lus en gesorteerd)

Stel, u wilt 5 willekeurige getallen bijhouden met een waarde tussen 1 en 6.
//Declaratie array
var Getallen = [];

//Verwerking
var AantalGetallen = 4;
for (var x = 0; x <= AantalGetallen; x++) {
	Getallen[x] = Math.floor(Math.random() * 6) + 1;
}

//Sorteren
Getallen.sort(function(a, b){return a-b});

//Uitvoer
var Tekst = "";
for (var y = 0; y < Getallen.length; y++) {
	Tekst += Getallen [y] + " - ";
}

write(Tekst);

Het sorteren gebeurt uiteraard nadat de waarden zijn ingelezen en toegekend aan de array en voor de waarden worden weergegeven.

Een array updaten (Javascript)

We hebben reeds gezien dat de gebruikte functies insertItem(), appendItem() en removeItem() uit bovenstaande video eigen zijn aan App lab en geen standaard Javascript-functies.

Misschien toch even kort aanhalen hoe u dit in Javascript kunt doen (en dus ook in App Lab).

Elementen toevoegen met de push() methode

Om elementen aan een array toe te voegen kent javaScript de push() methode. Het voordeel is dat u zelf geen index-nummer moet meegeven en dat de push() methode altijd het volgende vrije index-nummer neemt zodat u een mooi oplopende reeks van index-nummers krijgt. De syntax is:

NaamArray.push(waarde);

Voorbeeld:

var Vestigingen = ["Ninove", "Oudenaarde", "Zottegem"];
Vestigingen.push("Nieuwe vestiging");
write(Vestigingen);

Met bovenstaande code wordt “Nieuwe vestiging” toegevoegd aan de array Vestigingen op index 3.

Elementen verwijderen met de pop() methode

Om het laatste element uit een array te verwijderen kent JavaScript de pop() methode. De syntax is:

NaamArray.pop();

Voorbeeld:

var Vestigingen = ["Ninove", "Oudenaarde", "Zottegem"];
Vestigingen.pop();
write(Vestigingen);

Elementen van een array verbinden met een specifiek teken

Met write(Vestigingen) wordt de array weergegeven met de elementen gescheiden door een komma. Om de array expliciet als een string weer te geven kan je hem converteren naar het type string met de methode toString().

Vestigingen.toString()

Op zich wijzigt dit echter niets aan de uitvoer.

Wilt u geen komma’s zien tussen de elementen maar bv. Streepjes dan kan de methode join() gebruikt worden met tussen de haakjes (en tussen “”) het teken waarmee de elementen van de array verbonden (joined) moeten worden.

Vestigingen.join(" - ")

Voorbeeld:

var Vestigingen = ["Ninove", "Oudenaarde", "Zottegem"];
Vestigingen.push("Nieuwe vestiging");
write(Vestigingen.join(" - "));

Nagaan of een waarde in een array voorkomt

Om na te gaan of een waarde in een array voorkomt kan de methode indexOf() gebruikt worden. De methode indexOf() geeft de index terug waarde de waarde gevonden is. Staat de waarde niet in de array dan geeft indexOf() de waarde -1 terug.
NaamArray.indexOf(waarde);

Voorbeeld:

var Vestigingen = ["Ninove", "Oudenaarde", "Zottegem"];
var GevondenOp = Vestigingen.indexOf("Oudenaarde");
write(GevondenOp);

De variabele GevondenOp krijgt de waarde 1 in bovenstaand voorbeeld.

Objecten

 

Als u rondom u kijkt dan ziet u overal objecten.

Deze objecten hebben allemaal eigenschappen/properties en wellicht ook methoden (dingen die een object kan doen of dingen die u met een object kan doen).

Een wagen, een object, heeft een aantal eigenschappen/properties. Denk aan het merk, het model, het gewicht, de kleur,…

Een wagen heeft ook een aantal methoden. Denk aan starten, stoppen, rijden, remmen,….

Alle wagens hebben dezelfde eigenschappen/properties maar de waarden die aan deze eigenschappen worden toegekend kunnen verschillen. Sommige wagens zijn van het merk BMW en hebben een zwarte kleur, anderen zijn van het merk Fiat en hebben een rode kleur.

Alle wagens hebben dezelfde methoden maar een BMW zal anders starten, stoppen, rijden en remmen dan een Fiat.

Een object is een groep van gerelateerde eigenschappen die u gevarieerde waarden kunt toekennen.

Een object versus een variabele

Een variabele bevat 1 enkele waarde. Bijvoorbeeld:

var wagen = "BMW";

Een object is als een variabele maar bevat meerdere waarden. Bijvoorbeeld:

var wagen = {merk:"BMW", model:"X3", kleur:"blauw"};

U haalt nu een specifieke eigenschap op via:

objectName.propertyName

Bijvoorbeeld:

var wagen = {merk:"BMW", model:"X3", kleur:"blauw"};
write(wagen.kleur);

Van een lijst naar een object

Stel, u wilt niet enkel de vestigingen van het PCVO Dender en Schelde bijhouden maar ook hun adres en telefoonnummers.

U zou kunnen drie lijsten (steden, adressen en telefoonnummers) aanmaken en deze opvullen met de juisten waarden om deze vervolgens te doorlopen op basis van hun index.

De code ziet er ongeveer als volgt uit:

//met een array
var steden = ["Ninove", "Oudenaarde", "Zottegem"];
var adressen = ["Centrumlaan 160", "Minderbroedersstraat 6", "Sabina van Beierenlaan 35"];
var telefoonnummers = ["054/31.78.60", "055/31.32.87", "09/360.19.93"];

for(x = 0; x <= 2; x++){
  write(steden[x] + " - " + adressen[x] + " - " + telefoonnummers[x]);
}

U merkt wellicht zelf wel op dat het heel moeilijk is om de data synchroon te houden over deze arrays en hoe meer eigenschappen u wenst toe te voegen hoe moeilijker dit wordt.

Een object kan voor een oplossing zorgen.

Declareer eerst de array:

var vestigingen = [];

Maak vervolgens de objecten aan en voeg ze push() toe aan de array, bijvoorbeeld voor Ninove kan dit er als volgt uitzien:

Ninove = {stad: "Ninove", adres:"Centrumlaan 160", telefoon:"054/31.78.60"};
vestigingen.push(Ninove);

Gebruik opnieuw een lus om de array te doorlopen en verwijs naar de gewenste eigenschappen.

for(x = 0; x <= vestigingen.length; x++){
write(vestigingen[x].stad + " - " + vestigingen[x].adres + " - " + vestigingen[x].telefoon);
}

De volledige code wordt nu:

//met een object
var vestigingen = [];

Ninove = {stad: "Ninove", adres:"Centrumlaan 160", telefoon:"054/31.78.60"};
vestigingen.push(Ninove);

Oudenaarde = {stad: "Oudenaarde", adres:"Minderbroedersstraat 6", telefoon:"055/31.32.87"};
vestigingen.push(Oudenaarde);

Zottegem = {stad: "Zottegem", adres:"Sabina van Beierenlaan 35", telefoon:"09/360.19.93"};
vestigingen.push(Zottegem);


for(x = 0; x < vestigingen.length; x++){
  
  write(vestigingen[x].stad + " - " + vestigingen[x].adres + " - " + vestigingen[x].telefoon);
}

Deze code is weliswaar langer maar gemakkelijker uit te breiden en te synchroniseren en dus efficiënter in het onderhouden van de code.

U weet nu wat objecten zijn en hoe ze zich verhouden tegenover variabelen en lijsten. Als u zich verder verdiept in objectgeoriënteerd programmeren zult u ook zien hoe u methoden kunt toevoegen en hoe u een klasse kunt maken voor een object. Maar als kennismaking volstaat dit.

Databanken

Het woord database/databank wordt voor verschillende begrippen gebruikt:

  • De opgeslagen gegevens als zodanig.
  • De wijze waarop de gegevens zijn opgeslagen: datamodel.
  • De software waarmee databases kunnen worden aangemaakt en benaderd: Database management systeem (DBMS).

Een database/databank (de opgeslagen gegevens als zodanig) moet aan de volgende minimale voorwaarden voldoen om als database gezien te worden.

  • Gegevens moeten eenvoudig kunnen worden opgeslagen.
  • Gegevens moeten eenvoudig kunnen worden opgezocht.
  • Gegevens moeten gewijzigd kunnen worden.
  • Gegevens moeten verwijderd kunnen worden zonder dat dit de werking van dat systeem nadelig beïnvloedt.
  • Gegevens mogen niet dubbel worden opgeslagen.

Een database, gegevensbank of databank is een digitaal opgeslagen archief, ingericht met het oog op flexibele raadpleging en gebruik.

App Lab komt met een aantal voorbeeldtabellen, u vindt deze onder Data.

  • U kunt hier een nieuwe tabel aanmaken of een aantal bestaande bekijken. Laat ons eerst een aantal bestaande bekijken.

  • Klik op Preview om de records van deze tabellen te bekijken.

App Lab komt ook met een aantal commando’s om te werken met tabellen, u vindt deze onder Code – Data.

  • Om te weten hoe u deze commando’s moet gebruiken kunt u terecht in de officiële help.

  • Klik op See Examples om voorbeelden te bekijken.

Ik ga deze voorbeeldcode gebruiken in het vervolg van deze handleiding.

CRUD

CRUD staat voor:

  • Create – een nieuw record aanmaken.
  • Read – een bestaand record, of bestaande records, lezen (opvragen).
  • Update – een bestaand record updaten (wijzigen).
  • Delete – een bestaand record deleten (verwijderen).

We gaan deze bewerkingen nu in de praktijk bekijken. We gaan een hele simplistische databank aanmaken waarin we de naam, leeftijd en het lievelingseten bijhouden.

Het ontwerp

U kunt uw venster op de gewone manier ontwerpen maar we kunnen dit ook doen via code.

Laat het ons eens doen via code.

Onderstaande code

textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textLabel("labelInfo","Info");

onEvent("doneButton", "click", function() {

});

creëert onderstaande lay-out.

Bij het klikken op de knop gaan we eerst een object aanmaken dat de te bewaren gegevens opvangt. Het object bevat de juiste kolomnamen van de tabel, indien er nog geen tabel aangemaakt is, zoals bij ons het geval, bepaalt het object de kolommen van de tabel. Weet dat iedere tabel in AppLab automatisch een ID-kolom krijgt die automatisch genummerd wordt.

textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textLabel("labelInfo","Info");

onEvent("doneButton", "click", function() {
  //Object dat de kolomnamen bevat van de tabel
  var favFoodData={};
  favFoodData.name = getText("nameInput");
  favFoodData.age = getNumber("ageInput");
  favFoodData.food = getText("foodInput");
});

Create

Create staat voor het aanmaken, toevoegen, van een record.

De syntax:

createRecord(table, record, function(record){
    //callback function code goes here
  });
Parameters
Naam Type Verplicht? Description
table string Ja De naam van de tabel. Bestaat de tabel nog niet dan wordt deze aangemaakt.
record object Ja De data die moet opgeslagen worden in het aangemaakte record.
callback function Nee Een callback-functie is een functie die aangeroepen wordt nadat het record is aangemaakt. Het aangemaakte record wordt als een parameter meegegeven aan deze functie. U kunt de ID van het aangemaakte record opvragen via record.id.

In ons voorbeeld wordt de code:

  //Create Record
  createRecord("fav_foods", favFoodData, function(record) {
    //Als het record aangemaakt is, toon informatie in de console en maak de invulvelden leeg
    setText("labelInfo", "The record is created, ID: " + record.id);
    setText("nameInput", "");
    setText("ageInput", "");
    setText("foodInput", ""); 
  });

De volledige code:

textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textLabel("labelInfo","Info");

onEvent("doneButton", "click", function() {
  //Object dat de kolomnamen bevat van de tabel
  var favFoodData={};
  favFoodData.name = getText("nameInput");
  favFoodData.age = getNumber("ageInput");
  favFoodData.food = getText("foodInput");
  
  //Create Record
  createRecord("fav_foods", favFoodData, function(record) {
    //Als het record aangemaakt is, toon informatie in de console en maak de invulvelden leeg
    setText("labelInfo", "The record is created, ID: " + record.id);
    setText("nameInput", "");
    setText("ageInput", "");
    setText("foodInput", ""); 
  });
});
  });
  • Run de app en vul de gewenste gegevens in.

  • Klik op Done.

  • Ga naar Data en merk op dat de tabel fav_foods is aangemaakt.

  • Open de tabel, door erop te klikken, en merk ons net toegevoegde record op.

Foutopvang

Bij het toevoegen van een record kan wel eens iets foutlopen. We moeten deze fouten kunnen opvangen. De syntax hiervoor is:

createRecord(table, record, function(record){
    //onSuccess callback function code goes here
  }, function(error, status) {
    //onError callback function code goes here
});

De implementatie van de opvang kan als volgt:

textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textLabel("labelInfo","Info");

onEvent("doneButton", "click", function() {
  //Object dat de kolomnamen bevat van de tabel
  var favFoodData={};
  favFoodData.name = getText("nameInput");
  favFoodData.age = getNumber("ageInput");
  favFoodData.food = getText("foodInput");
  
  //Create Record
  createRecord("fav_foods", favFoodData, function(record) {
    //Als het record aangemaakt is, toon informatie in de console en maak de invulvelden leeg
    setText("labelInfo", "The record is created, ID: " + record.id);
    setText("nameInput", "");
    setText("ageInput", "");
    setText("foodInput", ""); 
  }, function (error, status) {
    // Status code 403 means that the table has already reached its capacity.
    if (status == 403) {
      setText("labelInfo", "Sorry, it looks like our table is full.");
    } else {
      setText("labelInfo", "There was an error and we couldn't record your responses.");
    }
  }); 
});

We kunnen dit moeilijk testen want we zullen niet zo gauw een foutmelding krijgen.

Read

Read staat voor het lezen van één of meerdere records.

De syntax:

readRecords(table, terms, function(records){
    //callback function code goes here
  });
Parameters
Naam Type Verplicht? Description
table string Ja De naam van de tabel waarin u wilt zoeken.
terms object Ja De waarde, meegegeven als een variabele of een object, waarnaar gezocht wordt. Deze waarde komt tussen {}. Geeft u geen zoekwaarde mee dan plaatst u lege {}.
callback function Nee Een callback-functie is een functie die aangeroepen wordt nadat de records gelezen. U kunt de waarden van de records aanspreken via bv. records[i].name.
  • Voeg eerst nog een paar records toe.

  • Voeg een zoekveld en een button toe.
textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textInput("searchInput", "Search for...");
button("displayButton", "Display");
textLabel("labelInfo","Info");

Bij het klikken op de Display-button worden de records gezocht.

onEvent("displayButton", "click", function() {
    var Search = getText("searchInput");
  
    readRecords("fav_foods", {}, function(records) {
        if (records.length>0) {
            for (var i =0; i < records.length; i++) {
              write("id: " + records[i].id + " Name:" + records[i].name + " Age:" + records[i].age + " Food: " + records[i].food);
            }
        }
        else {
              write("No records to read");
        }      
    });
});

De records worden gelezen via: readRecords("fav_foods", {}, function(records). Omdat de {} leeg zijn worden alle records gelezen.

Via de lengte van de records if (records.length>0) wordt gecontroleerd of er records gevonden worden. Indien er geen records gevonden zijn melden we dit.

Als er records gevonden zijn worden alle gevonden records één voor één doorlopen en getoond:

for (var i =0; i < records.length; i++) {
    write("id: " + records[i].id + " Name:" + records[i].name + " Age:" + records[i].age + " Food: " + records[i].food);
});

Indien je enkel wilt zoeken naar food via de zoekwaarde dan moet u de code wijzigen naar readRecords("fav_foods", {food: Search}, function(records).

textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textInput("searchInput", "Search for...");
button("displayButton", "Display");
textLabel("labelInfo","Info");

onEvent("doneButton", "click", function() {
  //Object dat de kolomnamen bevat van de tabel
  var favFoodData={};
  favFoodData.name = getText("nameInput");
  favFoodData.age = getNumber("ageInput");
  favFoodData.food = getText("foodInput");
  
  //Create Record
  createRecord("fav_foods", favFoodData, function(record) {
    //Als het record aangemaakt is, toon informatie in de console en maak de invulvelden leeg
    setText("labelInfo", "The record is created, ID: " + record.id);
    setText("nameInput", "");
    setText("ageInput", "");
    setText("foodInput", ""); 
  }, function (error, status) {
    // Status code 403 means that the table has already reached its capacity.
    if (status == 403) {
      setText("labelInfo", "Sorry, it looks like our table is full.");
    } else {
      setText("labelInfo", "There was an error and we couldn't record your responses.");
    }
  }); 
});

onEvent("displayButton", "click", function() {
    var Search = getText("searchInput");
  
    readRecords("fav_foods", {food: Search}, function(records) {
        if (records.length>0) {
            for (var i =0; i < records.length; i++) {
              write("id: " + records[i].id + " Name:" + records[i].name + " Age:" + records[i].age + " Food: " + records[i].food);
            }
        }
        else {
              write("No records to read");
        }      
    });
});

Let op, AppLab is heel beperkt in de opzoekmogelijkheden van records. In een meer volwaardige applicatie kan u wellicht gebruikmaken van SQL om veel krachtigere opzoekmethoden uit te werken.

Update

Een record updaten (wijzigen) gebeurt in 2 stappen:

  1. Het gewenste record zoeken en selecteren.
  2. Het record updaten.

De syntax:

updateRecord(table, record, function(record, success){
    //callback function code goes here
  });
Parameters
Naam Type Verplicht? Description
table string Ja De naam van de tabel.
record object Ja Het record dat moet geupdate worden.
callback function Nee Een callback-functie is een functie die aangeroepen wordt nadat het record is geupdate. Het geupdaterecord wordt als een parameter meegegeven aan deze functie. U kunt de ID van het aangemaakte record opvragen via record.id. Een boolean variabele success wordt als parameter meegegeven en kan waar of onwaar zijn.

Eerst voegen we de nodigen textInput en button toe.

textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textInput("searchInput", "Search for...");
button("displayButton", "Display");
textInput("updateInput", "Update food to...");
button("updateButton", "Update");
textLabel("labelInfo","Info");

Hieronder vindt u de code voor de update, de uitleg volgt nadien:

onEvent("updateButton", "click", function() {
  var Search = getText("searchInput");
  readRecords("fav_foods", {name:Search}, function(records) {

    if (records.length>0) {  
      //Het gevonden record is het up te daten record
      var updatedRecord = records[0];
      //Vraag de waarde op die moet geupdate worden en ken het toe
      var updateFood = getText("updateInput");
      updatedRecord.food = updateFood;
      //Update het record
      updateRecord("fav_foods", updatedRecord, function(record, success) {
        if (success) write("Record updated with id:" +record.id);
        else write("Record NOT updated");
      });
    }
    else write("No record found");
  });
});

Ik gebruik, gemakshalve, dezelfde SearchInput maar zoek deze keer op name.

var Search = getText("searchInput");
readRecords("fav_foods", {name:Search}, function(records) {

Als er een record gevonden is wordt het eerste gevonden record, er zouden inderdaad meerdere records kunnen gevonden zijn aangezien we zoeken op naam en eenzelfde naam meerdere keren kan voorkomen, toegekend aan het te wijzigen record. Omdat er meerdere records gevonden kunnen worden loopt u het risico dat u het verkeerde record wijzigt. Dit is in een echte applicatie natuurlijk onaanvaardbaar. Om dit te voorkomen zou u een lijst moeten maken met alle records en selecteren op basis van de ID van het record, die uniek is. In een latere toepassing wordt dit gedaan, maar hier wil ik me focussen op de essentie van de update-code zelf en negeer ik even dit probleem.

if (records.length>0) { 
      //Het gevonden record is het up te daten record
      var updatedRecord = records[0];

De waarde voor de update van het voedsel wordt opgevraagd en toegekend.

//Vraag de waarde op die moet geupdate worden en ken het toe
var updateFood = getText("updateInput");
updatedRecord.food = updateFood;

De update wordt uitgevoerd en eventueel (fout)meldingen gegenereerd.

updateRecord("fav_foods", updatedRecord, function(record, success) {
    if (success) write("Record updated with id:" +record.id);
    else write("Record NOT updated");
});

Delete

Een record deleten (verwijderen) gebeurt eveneens in 2 stappen:

  1. De ID opvragen van het record dat moet gedelete worden.
  2. Het record deleten.

De syntax is:

deleteRecord(table, record, function(success){
    //callback function code goes here
  });
Parameters
Naam Type Verplicht? Description
table string Ja De naam van de tabel.
record object Ja Het record dat moet gedelete worden.
callback function Nee Een callback-functie is een functie die aangeroepen wordt nadat het record is gedelete. Een boolean variabele success wordt als parameter meegegeven en kan waar of onwaar zijn.

Eerst voegen we de nodigen textInput en button toe.

textInput("nameInput", "What is your name?");
textInput("ageInput", "What is your age?");
textInput("foodInput", "What is your favorite food?");
button("doneButton", "Done");
textInput("searchInput", "Search for...");
button("displayButton", "Display");
textInput("updateInput", "Update food to...");
button("updateButton", "Update");
textInput("deleteInput", "ID to delete.");
button("deleteButton", "Delete");
textLabel("labelInfo","Info");

De code vindt u hieronder:

onEvent("deleteButton", "click", function() {
    var IDtoDelete = getNumber("deleteInput"); 
    readRecords("fav_foods", {id:IDtoDelete}, function(records) {
      if (records.length>0) {
        deleteRecord("fav_foods", {id:records[0].id}, function(success) {
          if (success) {
            write("Record deleted with id:" + records[0].id);
          }
          else {
            write("No record to delete with id:" + records[0].id);
          }
        });
      }
      else {
        write("No records to delete");
      }      
    });
});

De code zou eigenlijk geen geheimen meer mogen bevatten.

Behandelde Basiscompetenties uit de module ICT Programmeren – Start to program

  • IC BC228 – kent de verschillende principes en onderdelen op basis waarvan een programma kan opgebouwd worden
  • IC BC237 – kan een eenvoudig programma wijzigen
  • IC BC239 – kan bij het programmeren een juiste logica volgen
  • IC BC240 – kan een eenvoudig programma maken
  • IC BC242 – kan een programma uittesten
  • IC BC243 – kan een programma documenteren
  • IC BC352 – begrijpt het systeem en de functies die achter een programma zitten

Real programmers count from 0

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

  • Abonneer je op deze website d.m.v. e-mail

    Voer je e-mailadres in om je in te schrijven op deze website en e-mailmeldingen te ontvangen van nieuwe berichten.