[Javascript] voor dummies (deel 7)

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_56383789
quote:
Op dinsdag 29 januari 2008 13:01 schreef Tuvai.net het volgende:

[..]

Het opruimen is voor naderhand, als het functioneel is.
[..]



Het loopen klopt hoor. In het voorbeeld hierboven waren aRows en aCols beiden 3. In loop 1 gaat de code door de rijen, en in deze loop vindt ook weer een loop plaats die het aantal cellen aanmaakt. Wat dat betreft klopt dat stukje. Het probleem zit 'm hier in het feit dat de innerHTML output raar is, terwijl als ik de output als text naar een textarea parse, deze wel 100% correct is.

Tevens heb ik zojuist hetzelfde geprobeert met <div> jes in plaats van een <table> met daarin <tr> en <td> tags. Dit werkte wel. Alsof innerHTML me niet toelaat tabelletjes te maken. >_>
Dat stukje code dat ik gaf werkt gewoon. Hoe je het dus ook interpreteert, je loopt de loop maar 3 keer door en dat moet 9 keer worden. Daarbij zal hij 3 keer zeggen dat het een row + cols moet zijn en 6 keer alleen een col. Code is getest en werkt

Create table
pi_56384178
quote:
Op dinsdag 29 januari 2008 13:08 schreef Tarabass het volgende:
Dat stukje code dat ik gaf werkt gewoon. Hoe je het dus ook interpreteert, je loopt de loop maar 3 keer door en dat moet 9 keer worden.
Hoe kom je toch bij die 3 keer? Zie je wel dat er een volledig andere loop (voor de <td> tags) in m'n eerste loop (voor de <tr> tags) staat? Sowieso worden het aantal rijen aangemaakt a.h.v. de eerste loop, en elke keer dat die plaatsvindt, word ook de loop daarbinnen aangeroepen. Zie m'n output naar het <textarea> element, die werkt gewoon.
quote:
Op dinsdag 29 januari 2008 13:03 schreef fokME2 het volgende:
Ik had het vermoeden dat het fout ging bij het "innerHTML+= ...". De functie een heeeel klein beetje omgebouwd en hij werkt hier nu in Opera 9, Firefox 2 en IE6.
[ code verwijderd ]

Is het niet een idee om helemaal "netjes" met docum ent.createElement() en appendChild te werken?
Bij het innerHTML gedeelte ging 'ie inderdaad de fout in. Het werkt nu; ik heb sowieso de tabel vervangen door <div>jes (het hele programma`tje/site`je is immers al conform XHTML strict opgebouwd ), en in plaats van de output meteen weg te schrijven middels innerHTML, alles in een tijdelijk variabele gegooid (buffer).

CreateElement() en appendChild zeggen me vrij weinig, nogmaals, ik ben normaal niet zo weg van Javascript. Maakt het iets uit?
pi_56384232
Of m.b.v. DOM functies:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		function createTable(parent, numCols, numRows)
{
   var table = document.createElement('TABLE');
   var row, cell;
   for (var j = 0; j < numRows; ++j)
   {
      row = table.insertRow(-1);
      for (var i = 0; i < numCols; ++i)
      {
         cell = row.insertCell(-1);
         cell.appendChild(document.createTextNode(i + ':' + j));
      }
   }    
   parent.appendChild(table);
}
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56384366
quote:
Op dinsdag 29 januari 2008 13:22 schreef Tuvai.net het volgende:
Hoe kom je toch bij die 3 keer? Zie je wel dat er een volledig andere loop (voor de <td> tags) in m'n eerste loop (voor de <tr> tags) staat? Sowieso worden het aantal rijen aangemaakt a.h.v. de eerste loop, en elke keer dat die plaatsvindt, word ook de loop daarbinnen aangeroepen. Zie m'n output naar het <textarea> element, die werkt gewoon.
Ja, je hebt gelijk. Je hebt de loopjes inderdaad wat anders staan en ik gaf mijn commentaar aan de hand van mijn snippet, waarin hij dus de loop maar 3 keer zou doorlopen en dus maar op 1 rij zou uitkomen. Verwarring van mijn kant, sorry daarvoor. Ik iig blij dat het gelukt is, die van jou is inderdaad mooier en korter. Denk dat ik dat snippetje even overneem
pi_56384401
quote:
Op dinsdag 29 januari 2008 13:23 schreef SuperRembo het volgende:
Of m.b.v. DOM functies:
[ code verwijderd ]
Bah, remco! Jij komt ook altijd met een nog betere oplossing
pi_56384588
Dat ziet er inderdaad een stuk mooier en object-achtig uit. Hoe kan ik in dat voorbeeldje echter een attribuut meegeven aan een rij, cel, etc?
pi_56384793
setAttribute('id','naam_id');
pi_56385455
quote:
Op dinsdag 29 januari 2008 13:29 schreef Tarabass het volgende:
[..]
Bah, remco! Jij komt ook altijd met een nog betere oplossing
(Super)Rembo is met een b, desnoods met een k, maar nooit met een c!
quote:
Op dinsdag 29 januari 2008 13:43 schreef Tarabass het volgende:
setAttribute('id','naam_id');
Het is eigenlijk altijd beter om een property op het object te zetten i.p.v. een attribute met setAttribute().

Dus
el.id = "foo";
i.p.v.
el.setAttribute("id", "foo");
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56387331
quote:
Op dinsdag 29 januari 2008 14:10 schreef SuperRembo het volgende:
(Super)Rembo is met een b, desnoods met een k, maar nooit met een c!
Sorry, RemKo
quote:
Het is eigenlijk altijd beter om een property op het object te zetten i.p.v. een attribute met setAttribute().

Dus
el.id = "foo";
i.p.v.
el.setAttribute("id", "foo");
Ik zou graag zo willen denken als jij (bah wat klinkt dat gay) maar dan zullen we wel moeten weten waarom het is. Dus waarom liever een property dan de functie setAttribute()?
pi_56389185
Het is korter en duidelijker.
Ik denk dat 't sneller is (maar heb ik niet getest)
Het kan problemen geven zoals bij het zetten van een class:

1
2
3		el.className = 'foo'; // Dit werkt goed
el.setAttribute('class', 'foo'); // Werkt in FF, werkt niet in IE
el.setAttribute('className', 'foo'); // Werkt in IE, werkt niet in FF

Je zal wel setAttribute() moeten gebruiken als je later nog de innerHTML van het element wil ophalen (maar waarom zou je dat willen?)

getAttribute() heb je eigenlijk allen nodig als je een property wil opvragen die niet in de HTML standaard gedefinieerd is.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56402661
quote:
Op dinsdag 29 januari 2008 16:44 schreef SuperRembo het volgende:
Het is korter en duidelijker.
Ik denk dat 't sneller is (maar heb ik niet getest)
Het kan problemen geven zoals bij het zetten van een class:
[ code verwijderd ]

Je zal wel setAttribute() moeten gebruiken als je later nog de innerHTML van het element wil ophalen (maar waarom zou je dat willen?)

getAttribute() heb je eigenlijk allen nodig als je een property wil opvragen die niet in de HTML standaard gedefinieerd is.
Kortom die heb je niet echt nodig wanneer je toch al netjes je HTML in orde hebt.
pi_56408428
@SuperRembo: Dat is inderdaad de netste oplossing!

Zijn er hier mensen die werken met libraries? Op het moment ben ik aan het spelen met prototype en het bevalt heel goed.
pi_56408467
Nu wil ik een onclick-event toevoegen aan de 'cell', maar dit lukt niet goed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		function createTable(parent, numCols, numRows)
{
   var table = document.createElement('TABLE');
   var row, cell;
   for (var j = 0; j < numRows; ++j)
   {
      row = table.insertRow(-1);
      for (var i = 0; i < numCols; ++i)
      {
         cell = row.insertCell(-1);

         //Werkt alleen in FF
         onclickstring = 'showhide(\'' + parent + '\',\'' + parent.id + '\');setColor(\'' + curColor + '\'); return false';
         cell.setAttribute('onclick',onclickstring);
         //Werkt cross-browsed maar wordt al aangeroepen bij het aanmaken van het table en niet bij klikken op cel
         cell.onclick = new function() {alert('Hello World!');};

         cell.appendChild(document.createTextNode(i + ':' + j));
      }
   }    
   parent.appendChild(table);
}


Ik wil dus bij het klikken van een cell de functies showhide() en setColor() aanroepen, hoe bouw ik dat dan in?
pi_56408825
1       cell.onclick = function() {alert('Hello World!');};
Geen new function, maar gewoon function (). Dan werkt het wel?
pi_56409731
Hey ladies,

ik had een vraagje. Ik ben de laatste tijd erg veel met PHP en MySQL bezig, ook op m'n werk, maar ik ben nog wel echt een javascript newb. Met moeite en een hoop knip en plak werk en hopen dat het goed gaat kan ik wat kleine AJAX dingen inbouwen zoals dynamische SELECTs enzo. Ik wil dus graag wat beter worden met JavaScript.

Gewoon tutorials doornemen werkt voor mij niet zo heel goed, ik wil graag een (klein) projectje doen waarmee ik zelf dingen op moet zoeken en op moet lossen, want dan leer je het veel beter. Heeft iemand een idee voor zo'n projectje of zijn er zelfs sites waar zulke dingen op staan waar je evt wat tips kunt krijgen mocht je er niet uitkomen?

Een tutorial met oefenopgaven is ook prima.

Tanks!
"Reality is an illusion created by a lack of alcohol."
pi_56409976
quote:
Op woensdag 30 januari 2008 13:58 schreef fokME2 het volgende:

[ code verwijderd ]

Geen new function, maar gewoon function (). Dan werkt het wel?
Dat werkt wel maar is niet wat ik wil. Bovendien wordt de alert al aangeroepen bij het maken van het table, dus laat ik de table aanmaken dan krijg ik eerst 7*9 alert-boxjes, ipv één alert-boxje bij het klikken van een cel

Ik wil dus twee bestaande functies aanroepen, en pas op het moment als ik op de cel klik. Bij de setAttribute-manier lukt dit in FF, maar werkt dat niet in IE
pi_56410052
quote:
Op woensdag 30 januari 2008 14:38 schreef Dzy het volgende:
[knip]
Tja, w3schools heeft wel een paar leuke voorbeelden, zo ook tizag. Verder is google natuurlijk je beste vriend..
pi_56410407
@Tarabass: Als ik "function" doe ipv "new function" met jou functie dan wordt er alleen gealert als ik klik op een td? Zowel in IE6, FF2 en Opera 9?

1cell.onclick = function() {showhide(parent); setColor(curColor);};

?
pi_56411142
quote:
Op woensdag 30 januari 2008 15:06 schreef fokME2 het volgende:
@Tarabass: Als ik "function" doe ipv "new function" met jou functie dan wordt er alleen gealert als ik klik op een td? Zowel in IE6, FF2 en Opera 9?
[ code verwijderd ]

?
Dat is hem inderdaad bijna

Alleen is de curColor nu elke keer de laatste kleur uit de array. Voorbeeldje..

Erg vreemd, want de cel-bgcolor wordt ook gevuld door die array en die loopt wel goed door en vult alle cellen met alle kleuren. Vreemd..
pi_56411426
Dat is helemaal niet zo raar. Op het moment dat de backgroundcolor wordt geset is de loop nog bezig. Als de loop klaar is dan blijft curColor de kleur van de laatste cell. (Doe eens alert(curColor) na appendChild van de table.)

Als je op een cell klikt, dan wordt curColor uitgelezen wat op dat moment de laatste kleur is uit de loop. Een oplossing zou kunnen zijn om de achtergrondkleur van de cell waarop je klikt mee te geven aan de functie:
1cell.onclick = function() { showhide(parent,parent.id); setColor(this.bgColor);  };
pi_56412258
quote:
Op woensdag 30 januari 2008 15:50 schreef fokME2 het volgende:
Dat is helemaal niet zo raar. Op het moment dat de backgroundcolor wordt geset is de loop nog bezig. Als de loop klaar is dan blijft curColor de kleur van de laatste cell. (Doe eens alert(curColor) na appendChild van de table.)

Als je op een cell klikt, dan wordt curColor uitgelezen wat op dat moment de laatste kleur is uit de loop. Een oplossing zou kunnen zijn om de achtergrondkleur van de cell waarop je klikt mee te geven aan de functie:
[ code verwijderd ]
Schiet mij maar lek, maar ik begrijp je niet denk ik. Het werkt wel overigens hoor, maar begrijpen is een tweede.

Wat mijn gedachtes zijn:

De kleur wordt in de loop uit een array gehaald. Property cell.bgColor wordt gevuld met die kleur en de kleur wordt op dat moment gebruikt voor het aanmaken van een functie. Ik denk dan dat hij dat in de tag van die td zet, net zoals je dit keihard kan doen. Ik begrijp niet dat die functie dus ook echt wordt aangeroepen en ook aangemaakt pas bij het klikken van de td. Die logica ontgaat mij maar misschien dat ik dat ooit nog snap
pi_56415307
quote:
Op woensdag 30 januari 2008 16:29 schreef Tarabass het volgende:
[..]
Schiet mij maar lek, maar ik begrijp je niet denk ik. Het werkt wel overigens hoor, maar begrijpen is een tweede.
Verdiep je eens in closures
http://blog.morrisjohns.com/javascript_closures_for_dummies
http://ajaxian.com/archives/javascript-closures-for-dummies
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_56429540
@SuperRembo: Handige links, ik ken nog wel wat mensen die wat uitleg behoeven.
pi_56435573
Inderdaad informatieve linkjes, bedankt! Closures dus huh..
  donderdag 31 januari 2008 @ 17:08:13 #50
37634 wobbel
Da WoBBeL King
pi_56437654
Ik zoek voor onderstaande script een variant die WEL in Firefox werkt (dat doet deze dus NIET!!!).
Hij werkt in IE7 en IE6 wel, maar FF dus niet.

http://www.leejoo.nl/java/menu/rol_menu.htm iemand die dat kan oplossen of een andere weet die wel in FF werkt?
Hosted VoIP SIP trunks Vast mobiel VoIP
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies (deel 7)
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')