[JS] Structuur van multi dimensionale array

[Reveller]

Ik begin dus met het bouwen van een javascript poll. Hiervoor wil ik alle vragen in een array opslaan. Vervolgens loop ik door de array en presenteer de vragen 1 voor 1 aan de bezoeker. Hieronder mijn poging zo'n array (shorthand) te construeren:

JavaScript:

var poll = [];

poll[0] = [
  'type'     : 'multiple choice',
  'question' : 'hoe gaat het met u?',
  'answers'  : [
    'heel goed', 'goed', 'gaat wel', 'slecht'
  ]
];

poll[1] = [
  'type'     : 'open vraag',
  'question' : 'wat vind u van het weer?'
];

Ik krijg echter een foutmelding in FireBug:

missing ] after element list

Maar na het lezen van diverse topics op GoT meen ik toch dat ik zo een array moet kunnen opbouwen? Wat doe ik verkeerd?

[ Voor 7% gewijzigd door Reveller op 17-02-2007 23:18 ]

[Verwijderd]

Er is een verschil tussen [] en {}

[Reveller]

Verwijderd schreef op zaterdag 17 februari 2007 @ 23:32:
Er is een verschil tussen [] en {}

Dat weet ik. [] is een array constructor, {} voor een object.

Zo krijg ik geen foutmelding, maar gooi ik arrays en objecten door elkaar. Dat moet toch mooier (lees: met alleen arrays) kunnen? Of maakt dat niet uit?

JavaScript:

var poll = [];

poll[0] = {
  'type'     : 'multiple choice',
  'question' : 'hoe gaat het met u?',
  'answers'  : [
    'heel goed', 'goed', 'gaat wel', 'slecht'
  ]
};

poll[1] = {
  'type'     : 'open vraag',
  'question' : 'wat vind u van het weer?'
};

[ Voor 55% gewijzigd door Reveller op 17-02-2007 23:40 ]

[Johnny]

Je gooit ze niet door elkaar, je steekt een object in een array-item waar helemaal niks mis mee is. Je kan wel alleen arrays gebruiken, maar dan zul je de keys 'type' en 'question' moeten vervangen door nummers zoals 0 en 1, en daar wordt je code ook niet echt duidelijker van...

[Reveller]

Johnny schreef op zaterdag 17 februari 2007 @ 23:54:
[...] dan zul je de keys 'type' en 'question' moeten vervangen door nummers zoals 0 en 1

In veel scripttalen, zoals PHP, kan ik eigen eigen keys in een array definieren:

PHP:

$poll = array('type' => 'multiple choice', 'question' => 'hoe gaat het met u');

Javascript kent zo'n optie dus niet? Met andere woorden: er bestaan binnen javascript alleen numerieke keys?

En een tweede vraag: is er een nog kortere manier om de informatie uit de startpost te noteren?

[ Voor 9% gewijzigd door Reveller op 18-02-2007 00:04 ]

[crisp]

Reveller schreef op zondag 18 februari 2007 @ 00:03:
[...]

In veel scripttalen, zoals PHP, kan ik eigen eigen keys in een array definieren:

PHP:

$poll = array('type' => 'multiple choice', 'question' => 'hoe gaat het met u');

Javascript kent zo'n optie dus niet? Met andere woorden: er bestaan binnen javascript alleen numerieke keys?

Nee, associatieve arrays kan wel in JS, maar niet via literal constructors. Daarnaast wordt het als bad practice beschouwd omdat juist objecten daarvoor bedoelt zijn.

En een tweede vraag: is er een nog kortere manier om de informatie uit de startpost te noteren?

sure:

JavaScript:

var poll = [
  {
    'type'     : 'multiple choice',
    'question' : 'hoe gaat het met u?',
    'answers'  : ['heel goed', 'goed', 'gaat wel', 'slecht']
  },
  {
    'type'     : 'open vraag',
    'question' : 'wat vind u van het weer?'
  }
];

[ Voor 25% gewijzigd door crisp op 18-02-2007 00:19 ]

[Reveller]

crisp schreef op zondag 18 februari 2007 @ 00:06:
[...]
Nee, associatieve arrays kan wel in JS, maar niet via literal constructors. Daarnaast wordt het als bad practice beschouwd omdat juist objecten daarvoor bedoelt zijn.

Uit nieuwsgierigheid: hoe kun je dan wel associatieve arrays in JS bouwen?

crisp schreef op zondag 18 februari 2007 @ 00:20:
zie de edit in mijn voorgaande post

Die miste ik net Dank je!

Nog een laatste vraag: waarom werk onderstaande niet?

JavaScript:

var polls = [];
polls[
  ['multiple choice', 'hoe gaat het met u?', ['heel goed', 'goed', 'gaat wel', 'slecht']],
  ['open vraag', 'wat vind u van het weer?']
];

Dit werkt wel:

JavaScript:

polls[0] = ['multiple choice', 'hoe gaat het met u?', ['heel goed', 'goed', 'gaat wel', 'slecht']];
polls[1] = ['open vraag', 'wat vind u van het weer?'];

[ Voor 58% gewijzigd door Reveller op 18-02-2007 00:31 ]

[crisp]

zie de edit in mijn voorgaande post

[Reveller]

Ik heb nu dit:

JavaScript:

<div id="poll" style="width: 150px; height: 210px; background: yellow"></div>

<script>
var poll = [
  {'type' : 'radio',
   'ques' : 'hoe gaat het met u?',
   'ansr' : ['heel goed', 'goed', 'gaat wel', 'slecht']
  },
  {'type' : 'check',
   'ques' : 'waarom gaat het zoals het gaat?',
   'ansr' : ['omdat het zo is', 'weet ik niet', 'zeg ik niet']
  },
  {'type' : 'open',
   'ques' : 'wat vind u van het weer?'
  },
  {'type' : 'note',
   'note' : 'Bedankt voor uw medewerking!'
  }
];

var html = '';

function getQuestion(i) {
  switch (poll[i]['type']) {
    case 'radio':
      html = poll[i]['ques'] + '<br>';
      for (j = 0; j < poll[i]['ansr'].length; j++) {
        html += '<input type="radio">' + poll[i]['ansr'][j] + '<br>';
      }
      break;
    case 'check':
      html = poll[i]['ques'] + '<br>';
      for (j = 0; j < poll[i]['ansr'].length; j++) {
        html += '<input type="checkbox">' + poll[i]['ansr'][j] + '<br>';
      }
      break;
    case 'open':
        html  = poll[i]['q'] + '<br>';
        html += '<textarea></textarea>';
      break;
    case 'note':
        html  = '<p>' + poll[i]['n'] + '</p>';
      break;
  }
  return html;
}

function init() {
  div = document.getElementById('poll');
  div.innerHTML = getQuestion(0);
}
</script>

<script>init();</script>

Ik krijg alleen een error dat "div geen properties heeft". Ik snap niet waarom niet, want de div wordt als eerste gedefinieerd. Kan iemand mij uitleggen wat ik fout doe?

[_Thanatos_]

Zet je script es niet in de body, maar laat em gewoon door body->onload uitvoeren...

En waarom trouwens die globals? getQuestion is uitermate geschikt als method van polls:

JavaScript:

polls.getQuestion = function(i) {
   switch (this[i]['type']) {
      //...
   }
};

En die html variabele als local in getQuestion definieren. Globale variabelen is gewoon vies.

Verder zal ik maar niet beginnen over het opbouwen en uitpoepen van html in innerHTML

[ Voor 4% gewijzigd door _Thanatos_ op 18-02-2007 02:32 ]

[Verwijderd]

Reveller schreef op zondag 18 februari 2007 @ 01:21:
Ik heb nu dit:

JavaScript:

<div id="poll" style="width: 150px; height: 210px; background: yellow"></div>

<script>
var poll = [ ... ];
</script>

Ik krijg alleen een error dat "div geen properties heeft". Ik snap niet waarom niet, want de div wordt als eerste gedefinieerd. Kan iemand mij uitleggen wat ik fout doe?

Ik neem aan dat dit in IE is? IE heeft de neiging om elementen met een ID beschikbaar te stellen als een global variable in JavaScript. Het zou kunnen dat dit conflicteert met jouw poll variabele.

edit:
Overigens doet deze code het bij mij in IE7 wel gewoon.

[ Voor 5% gewijzigd door Verwijderd op 18-02-2007 12:46 ]

[Reveller]

Verwijderd schreef op zondag 18 februari 2007 @ 12:43:
[...]

Ik neem aan dat dit in IE is? IE heeft de neiging om elementen met een ID beschikbaar te stellen als een global variable in JavaScript. Het zou kunnen dat dit conflicteert met jouw poll variabele.

edit:
Overigens doet deze code het bij mij in IE7 wel gewoon.

Nee, het werkt niet in FF. Ook als ik de naam van de div verander in "polldiv", krijg ik dezelfde error..?!

edit:
_Thanatos_ had gelijk: ik heb nu het script in de head gezet en met een onload aangeroepen. Nu werkt het wel

[ Voor 11% gewijzigd door Reveller op 18-02-2007 15:21 ]

[crisp]

Maak er eerst eens een valid HTML document van en roep init() pas onload aan.

[Reveller]

Ik heb nu het volgende:

code:

<html>
  <head>

<script>
var poll = [
  {'type' : 'radio',
   'ques' : 'hoe gaat het met u?',
   'ansr' : ['heel goed', 'goed', 'gaat wel', 'slecht']
  },
  {'type' : 'check',
   'ques' : 'waarom gaat het zoals het gaat?',
   'ansr' : ['omdat het zo is', 'weet ik niet', 'zeg ik niet']
  },
  {'type' : 'open',
   'ques' : 'wat vind u van het weer?'
  },
  {'type' : 'note',
   'note' : 'Bedankt voor uw medewerking!'
  }
];

var html = '';
var item = 0;
var answers = [];

function getQuestion(i) {
  switch (poll[i]['type']) {
    case 'radio':
      html = poll[i]['ques'] + '<br>';
      for (j = 0; j < poll[i]['ansr'].length; j++) {
        html += '<input type="radio" name="check-'+ i +'" onclick="updatePoll(); storeAnswer('+ i +', '+ j +')">' + poll[i]['ansr'][j] + '<br>';
      }
      break;
    case 'check':
      html = poll[i]['ques'] + '<br>';
      for (j = 0; j < poll[i]['ansr'].length; j++) {
        html += '<input type="checkbox" name="radio-'+ i +'">' + poll[i]['ansr'][j] + '<br>';
      }
      html += '<input type="button" onclick="updatePoll()" value=">">'
      break;
    case 'open':
        html  = poll[i]['ques'] + '<br>';
        html += '<textarea id="text-'+ i +'"></textarea>';
        html += '<input type="button" onclick="updatePoll(); storeAnswer('+ i +', document.getElementById(\'text-'+ i +'\').value)" value=">">';
      break;
    case 'note':
        html  = '<p>' + poll[i]['note'] + '</p>';
      break;
  }
  return html;
}

function storeAnswer(question, answer) {
  answers[question] = answer;
}

function sendAnswers() {
  msg = answers.join('|');
  alert(msg);
}

function updatePoll() {
  div  = document.getElementById('poll');
  html = getQuestion(item);
  div.innerHTML = html;
  item++;
  if (item == (poll.length)) {
    setTimeout("div.style.display = 'none'", 1000);
    sendAnswers();
  }
}
</script>
  
  </head>
  <body>
    <div id="poll" style="width: 150px; height: 210px; background: yellow"></div>
    <script>updatePoll();</script>
  </body>
</html>

In principe werkt het zoals ik wil: de vragen worden 1 voor 1 gesteld, en de antwoorden kunnen worden opgeslagen in de answers global variabele. Uiteindelijk wil ik deze string antwoorden naar een server verzenden. Het probleem is nu alleen dat ik een error krijg als ik tekst in de textarea (vraag 3) zet en deze submit:

document.getElementById("text-2") has no properties

Maar dit element bestaat wel; het wordt in regel 43 aangemaakt. Of bestaat dit niet, omdat ik het via de DOM moet aanmaken?

[chris]

Nog wat theoretische achtergrond:

Een array is een lijst met dingen die oplopend genummerd zijn. Het leuke van een array is dat ze heel snel aan het begin en eind dingen kunnen verwijderen of toevoegen. Het opzoeken van iets in een array is ook erg snel. De keys in een array zijn dus altijd integers.

Daarnaast heb je ook nog maps, waarbij de keys niet meer integers zijn. (Deze heten ook wel associatieve arrays). Deze zijn net iets minder snel.

In de meeste scripttalen zul je echter zien dat er eigenlijk geen verschil is tussen de twee. In javascript kan je probleemloos een array definieren:

JavaScript:

a = [4, 8, 15];

en 'm dan opeens als hashmap (of in js-taal: object) gebruiken:

code:

a["lost"] = true;

De assignment-code voor arrays en maps is ook hetzelfde, var[property] = value;

In javascript is het enige verschil de initialisatie, met {} maak je een map en met [] een array.

Als je ooit in sterk getypeerde talen als Java/C/Haskell gaat werken zul je zien dat de twee toch niet helemaal hetzelfde zijn. Maar zoals gezegd, in script-talen hoef je je er niet al te druk over te maken.

[crisp]

Een Array als hashmap gebruiken maakt het niet meteen een Object. Feit is dat Array een speciaal type Object is. Elke primitive overerft in javascript van Object

[chris]

crisp schreef op zondag 18 februari 2007 @ 18:08:
Een Array als hashmap gebruiken maakt het niet meteen een Object. Feit is dat Array een speciaal type Object is. Elke primitive overerft in javascript van Object

Je hebt helemaal gelijk.

En? Omdat jij het nu zegt is het zo? Graag iets meer onderbouwing graag

[ Voor 12% gewijzigd door André op 18-02-2007 19:54 ]

[Reveller]

Ik probeer nu de poll op te bouwen via de DOM ipv innerHTML. Ook probeer ik meteen maar zo efficient mogelijke code te schrijven:

code:

<html>
  <head>
    <script>
    var item = 0;
    
    var poll = [
      {'type' : 'radio',
       'ques' : 'hoe gaat het met u?',
       'ansr' : ['heel goed', 'goed', 'gaat wel', 'slecht']
      },
      {'type' : 'note',
       'note' : 'Bedankt voor uw medewerking!'
      }
    ];
    
    poll.radio = function(i) {
      div = document.getElementById('polldiv');
      for (i = 0; i < poll[i]['ansr'].length; i++) {
        var input = createNode('input', {'type' :'radio', 'name' : 'radio-'+ i, 'onclick' : 'poll.update'});
        var text = document.createTextNode('blaat');
        div.appendChild(input);
        div.appendChild(text);
      }
    }
        
    poll.question = function(i) {
      switch (poll[i]['type']) {
        case 'radio': poll.radio(i); break;
        case 'note' : poll.note(i) ; break;
      }
    }
    
    poll.update = function() {
      div = document.getElementById('polldiv');
      poll.question(item);
      item++;
      if (item == (poll.length)) {
        setTimeout("div.style.display = 'none'", 1000);
      }
    }
    
    function createNode(type, options) {
      var el = document.createElement(type);
      for (var key in options) {
        el.setAttribute(key, options[key]);
      }
      return el;
    }
    </script>
  </head>
  <body>
    <div id="polldiv" style="width: 150px; height: 210px;"></div>
    <script>poll.update();</script>
  </body>
</html>

Ik probeer dus de eerste poll-vraag weg te schrijven, zodat het er in de browser zo uit ziet:

code:

+---------------------+
| Hoe gaat het met u? |
|                     |
| O heel goed         |
| O goed              |
| O gaat wel          |
| O slecht            |
+---------------------+

krijg alleen de foutmelding "poll[i].ansr has no properties". Ik snap alleen niet waarom niet - de variabele is gedeclareerd en de lengte van poll = 2. Waarom leest de functie hem dan niet? Heeft het te maken met de scope oid?

[crisp]

Even afgezien van de fout die je krijgt zie ik nu dat je je data-set ook nog eens als een soort class-object wilt gaan gebruiken? Ik zou dat sowieso gescheiden houden want dat is nog erger dan Array misbruiken als hashmap. Zoek eens wat goede voorbeelden van prototyping in javascript

Note ook dat dit niet werkt in IE:

JavaScript:

var input = document.createElement('input');
input.setAttribute('name', 'foo');

[Reveller]

Kan iemand mij misschien kort en bondig uitleggen wat het voordeel is van prototyping en OO schrijven in javascript? Als ik op Google zoek naar artikelen hierover, kom ik weinig eenvoudige teksten tegen. De meeste artikelen beginnen met "we gaan er vanuit dat je al (een gedegen) kennis hebt van objecten en OO programmeren in javascript", wat dus niet zo is.

Wat ik vooral niet snap is het volgende: als iemand een paar jaar geleden iets als een polletje in javascript moest maken, schreef hij een collectie functies in een bestand genaamd poll.js:

JavaScript:

var pollQuestions = ['hoe gaat het?', 'waarom gaat het?'];

function initPoll() {
  output = createPoll();
}

function createPoll() {
  for (i = 0; i > pollQuestions.length; i++) {
    createQuestion(pollQuestion[i]);
  }
}

function createQuestion(question) {
  return '<p>' + question + '</p>';
}

Tegenwoordig zie ik veel javascripts van de vorm:

JavaScript:

var pollQuestions = ['hoe gaat het?', 'waarom gaat het?'];

function poll() {
  var self = this;
  this.output = this.createPoll();
}

poll.prototype.createPoll = function() {
  for (i = 0; i > pollQuestions.length; i++) {
    this.createQuestion(pollQuestion[i]);
  } 
}

poll.prototype.pollQuestion = function(question) {
  this.question = '<p>' + question + '</p>';
}

Maar ik zie ook (zonder prototype):

JavaScript:

var pollQuestions = ['hoe gaat het?', 'waarom gaat het?'];

function poll() {
  var self = this;
  this.contents = this.createPoll();
}

poll.createPoll = function() {
  for (i = 0; i > pollQuestions.length; i++) {
    this.createQuestion(pollQuestion[i]);
  } 
}

poll.pollQuestion = function(question) {
  this.question = '<p>' + question + '</p>';
}

Wat is nu precies het verschil tussen deze 3 methoden? Wat zijn de voor- en nadelen? In welke situatie gebruik je welke manier?

[Verwijderd]

Reveller schreef op maandag 19 februari 2007 @ 17:42:
Kan iemand mij misschien kort en bondig uitleggen wat het voordeel is van prototyping en OO schrijven in javascript? Als ik op Google zoek naar artikelen hierover, kom ik weinig eenvoudige teksten tegen. De meeste artikelen beginnen met "we gaan er vanuit dat je al (een gedegen) kennis hebt van objecten en OO programmeren in javascript", wat dus niet zo is.

Ik raad je aan om eens Clays object tutorial te lezen. Ik snap het overigens wel hoor, objects in JavaScript worden zelden twee keer op dezelfde manier gebruikt, en dan heb je ook nog eens talloze manieren om objecten, hun properties en hun methods te declareren. Het is niet bijzonder eenvoudig.

Kort gezegd: als je een groep functionaliteiten logisch kunt bundelen in een object heeft dat een hoop voordelen, vooral als je meerdere (verschillende) instanties van dat soort objecten in een pagina combineert en/of meerdere verschillende objecten in een pagina combineert en laat samenwerken.

Het verschil tussen wel of niet prototype gebruiken ligt iets moeilijker. Grofweg: als je iets prototyped is het geen property of method van een instantie van een object maar van de mal waaruit dat object is gemaakt.

[ Voor 26% gewijzigd door Verwijderd op 19-02-2007 19:12 ]

[Reveller]

Verwijderd schreef op maandag 19 februari 2007 @ 19:07:
[...]

Ik raad je aan om eens Clays object tutorial te lezen. Ik snap het overigens wel hoor, objects in JavaScript worden zelden twee keer op dezelfde manier gebruikt, en dan heb je ook nog eens talloze manieren om objecten, hun properties en hun methods te declareren. Het is niet bijzonder eenvoudig.

Hier weer hetzelfde verhaal: "Deze tutorial gaat er vanuit dat je bekend bent met de basis van javascript. Dat wil zeggen; Het gebruik en de werking van variabelen (zoals het verschil tussen globale en lokale variabelen etc) en methoden."

Kort gezegd: als je een groep functionaliteiten logisch kunt bundelen in een object heeft dat een hoop voordelen, vooral als je meerdere (verschillende) instanties van dat soort objecten in een pagina combineert en/of meerdere verschillende objecten in een pagina combineert en laat samenwerken.

Het is zeker dat er maar 1 poll per pagina komt. Ik zal nooit meerdere instanties van een poll aanroepen. Is OO programmeren dan wel nodig?

Het verschil tussen wel of niet prototype gebruiken ligt iets moeilijker. Grofweg: als je iets prototyped is het geen property of method van een instantie van een object maar van de mal waaruit dat object is gemaakt.

Oef...daar ga ik eens op googlen

[Verwijderd]

Reveller schreef op maandag 19 februari 2007 @ 19:15:
Hier weer hetzelfde verhaal: "Deze tutorial gaat er vanuit dat je bekend bent met de basis van javascript. Dat wil zeggen; Het gebruik en de werking van variabelen (zoals het verschil tussen globale en lokale variabelen etc) en methoden."

Lees het nou maar. Aan je code te zien heb je genoeg kennis om het te kunnen begrijpen. In ieder geval het stuk tot aan overerving.

Het is zeker dat er maar 1 poll per pagina komt. Ik zal nooit meerdere instanties van een poll aanroepen. Is OO programmeren dan wel nodig?

OO is nooit nodig. Er is niets wat je met OO kunt bereiken wat je niet ook zonder kunt. OO is echter vaak veel makkelijker.

[Reveller]

Dan houd ik het voorlopig bij waar ik het meest bekend mee ben Maar ook dat gaat niet altijd even makkelijk : waarom krijg ik bij onderstaande code de error "poll.[i].ansr has no properties"?

JavaScript:

    var poll = [
      {'type' : 'radio',
       'ques' : 'hoe gaat het met u?',
       'ansr' : ['heel goed', 'goed', 'gaat wel', 'slecht']
      },
      {'type' : 'note',
       'note' : 'Bedankt voor uw medewerking!'
      }
    ];
    
    function pollRadio(i) {
      div = document.getElementById('polldiv');
      for (i = 0; i < poll[i]['ansr'].length; i++) {
        var input = createNode('input', {'type' :'radio', 'name' : 'radio-'+ i, 'onclick' : 'pollUpdate'});
        var text = document.createTextNode('blaat');
        div.appendChild(input);
        div.appendChild(text);
      }
    }

    function createNode(type, options) {
      var el = document.createElement(type);
      for (var key in options) {
        el.setAttribute(key, options[key]);
      }
      return el;
    }

    pollRadio(0);

[Verwijderd]

Reveller schreef op maandag 19 februari 2007 @ 20:59:
waarom krijg ik bij onderstaande code de error "poll.[i].ansr has no properties"?

Je gebruikt de variabele i heel raar en dubbel, ik weet niet eens hoe ik het het beste kan uitleggen.

JavaScript:

function pollRadio(iPoll) {
  div = document.getElementById('polldiv');
  for (var i = 0; i < poll[iPoll]['ansr'].length; i++) {
    // whatever
  }
} 

Probeer ook var te gebruiken voor je locale variabelen, anders worden ze global.

[Reveller]

Je hoeft het ook niet uit te leggen. Wat ontzettend dom van me! Dank je!