[Javascript] voor dummies - deel 3

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_33004077
quote:
Op maandag 12 december 2005 00:07 schreef JeRa het volgende:
Probleempje met onclick. Hoe stel ik die in bij dynamisch aangemaakte elementen?

var nieuweLink = document.createElement('a');
var label = document.createTextNode('blaat');
nieuweLink.appendChild(label);

//Stel de onclick in
nieuweLink.setAttribute('onclick', 'alert(\'waah!\')');
//Maar dit werkt alleen in Firefox

Hoe dit ook in IE werkende te krijgen?
Opgelost door alleen dit te gebruiken:

element.onclick = functie;

En:
1
2
3
4		function functie()
{
    alert(this);  //dit blijkt te werken
}
pi_33004101
quote:
Op maandag 12 december 2005 00:12 schreef SuperRembo het volgende:
Je kunt gewoon nieuweLink.onclick = function(){ alert('waah!') } gebruiken.
Je kunt het ook met nieuweLink.addEventLister() (in FF), of nieuweLink.attachEvent() (in IE) gebruiken.
Het ging me vooral om het idee dat ik het object tijdens de onclick kon meegeven dat had ik niet echt duidelijk gemaakt, excuses. Op bovenstaande manier werkt het, dan wordt de 'this' variabele toch ingesteld.
pi_33004177
Aha, bedoelde je dat. Dat heet een "closure".
Wel een beetje uitkijken, hier kan je (vooral in IE) enorme gekeugenlekken mee creeren.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_33004285
quote:
Op maandag 12 december 2005 00:16 schreef SuperRembo het volgende:
Aha, bedoelde je dat. Dat heet een "closure".
Wel een beetje uitkijken, hier kan je (vooral in IE) enorme gekeugenlekken mee creeren.
Hoezo dat? Heeft javascript niet net zoals java een (al is het maar matige) garbage collector?

edit: iemand een idee waarom IE wel dit pakt:

element.setAttribute('className', 'blaat');

En niet dit?

element.setAttribute('class', 'blaat');
pi_33006620
Javascript heeft idd een garbage collector, maar in IE kan het mis gaan als je circulaire referenties hebt met DOM nodes. MS geeft er zelf informatie over. Ik had zelf op een gegeven moment een script dat bij elke div die te voorschijn kwam 10MB geheugen opeiste

Tja, waarom werkt iets in de ene browser wel en in de andere niet...
Je kan beter element.className = 'blaat' gebruiken. Zie ook Quirksmode.org.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_33006823
quote:
Op maandag 12 december 2005 07:51 schreef SuperRembo het volgende:
Javascript heeft idd een garbage collector, maar in IE kan het mis gaan als je circulaire referenties hebt met DOM nodes. MS geeft er zelf informatie over. Ik had zelf op een gegeven moment een script dat bij elke div die te voorschijn kwam 10MB geheugen opeiste
Ik heb in ieder geval er al voor gezorgd dat de directe callbacks uit zo'n klein mogelijke code bestaan en de 'grote' functies aanroepen. Zal in een later stadium het eens testen in IE, hoewel ik me nu niet kan voorstellen hoe ik ooit een circulaire referentie zou kunnen krijgen op deze manier.
quote:
Tja, waarom werkt iets in de ene browser wel en in de andere niet...
Je kan beter element.className = 'blaat' gebruiken. Zie ook Quirksmode.org.
Waarom dat? Omdat er bij element.attribute meer blokjes groen zijn dan bij element.setAttribute(attribute, etc)?

Op die pagina staat dat IE een minimale ondersteuning heeft voor setAttribute. In de praktijk blijkt dit uit CSS styles en events als onclick, maar de rest werkt perfect. Aangezien setAttribute() mij meer ligt in het rijtje van createElement(), removeChild() etc ben ik hiermee gaan werken die twee eerder genoemde gevallen heb ik dan ook opgevangen.
pi_33006902
quote:
Op maandag 12 december 2005 08:32 schreef JeRa het volgende:

[..]

Ik heb in ieder geval er al voor gezorgd dat de directe callbacks uit zo'n klein mogelijke code bestaan en de 'grote' functies aanroepen. Zal in een later stadium het eens testen in IE, hoewel ik me nu niet kan voorstellen hoe ik ooit een circulaire referentie zou kunnen krijgen op deze manier.
Ik heb me even ingelezen over circulaire referenties bij closures. Op zich maak ik wel gebruik van de structuur waarop memory leaks kunnen ontstaan in IE, maar aan de andere kant, ik zou niet weten hoe ik het zonder zou moeten doen

Elk object dat ik aanmaak krijg een (weliswaar kleine) event function aan z'n onclick-event gehangen. Deze moet blijven bestaan totdat de browser wordt afgesloten en kan niet eerder worden vrijgemaakt. Dus iets als dit:
1
2
3
4
5
6
7		var element = document.createElement('a');
element.onclick = functie;

function functie()
{
    roepGrotereFunctieAan(this);
}

Kan dan toch betrekkelijk weinig kwaad? Ik merk dat tijdens het 'gebruiken' van mijn pagina in IE het geheugengebruik met stapjes van 4 KB telkens oploopt, maar na een minimize en restore van het IE-scherm is het geheugengebruik weer minimaal.
pi_33012929
Het scheelt ook als je nieuwe elementen direct in de tree hangt:

1
2
3
4
5
6
7
8		// Niet zo
var link = document.createElement('A');
// Set properties for link ...
container.appendChild(link)

// Maar zo
var link = container.appendChild(document.createElement('A'));
// Set properties for link ...
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_33052462
Voor school moet ik een JavaScript opdracht maken met een background color die gelijdelijk (met settimeout) naar een andere kleur gaat. Ik heb nu dit:
1
2
3
4
5
6
7
8
9
10
11
12		<script type="text/javascript">

var r=255, b=16;

function bg()
{
   document.bgColor = b++, r-;
    setTimeout(1000);
}


</script>

Er zit volgens mij ergens een fout in dat b++. Wie kan mij weer even op weg helpen?
pi_33054339
setTimeout werkt anders, zie ook W3Schools

1setTimeout("alert('Deze melding komt na 1 seconde')", 1000);


De achtergrondkleur stel je zo in:

1
2
3		document.body.style.backgroundColor = '#ff0000';
// of zo
document.body.style.backgroundColor = 'rgb(255, 0, 0)';
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_33054401
quote:
Op dinsdag 13 december 2005 21:13 schreef SuperRembo het volgende:
setTimeout werkt anders, zie ook W3Schools
[ code verwijderd ]

De achtergrondkleur stel je zo in:
[ code verwijderd ]
Oke bedankt, ik zal het nog even proberen .
pi_33054418
quote:
Op maandag 12 december 2005 13:31 schreef SuperRembo het volgende:
Het scheelt ook als je nieuwe elementen direct in de tree hangt:
[ code verwijderd ]
Dat kan niet bij mijn script, aangezien elk gemaakt element ook nog gewijzigde properties nodig heeft.

Ik vond overigens nog wel een heel interessant artikel hierover, maar aangezien het aan IE6 ligt en het hopelijk met IE7 opgelost is kijk ik er verder niet naar.
pi_33057172
Is het script alleen voor eigen gebruik dat je IE7 kan eisen?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_33058405
quote:
Op dinsdag 13 december 2005 22:34 schreef SuperRembo het volgende:
Is het script alleen voor eigen gebruik dat je IE7 kan eisen?
Ik eis niets.

Ik ga alleen geen workarounds schrijven aangezien die later vooral problemen kunnen opleveren dit is niet alleen voor IE hoor, heb ooit een div-workaround voor Firefox geschreven aangezien deze niet goed kon omgaan met events en overlappende layers. Paar maanden later had het team achter Firefox deze bug gefixed, met als gevolg dat de workaround niet meer werkte en de navigatie verklooide.

Gebruikers van IE6 moeten dus maar met die paar extra KB (die overigens toch niet wordt vrijgegeven gedurende het bezoek aan een pagina!) aan geheugengebruik leren leven. Dan schrijf ik liever code die klopt dan dat ik via een closure prototype alléén voor IE6 moet zorgen dat de boel netjes wordt afgevangen.
pi_33107439
Volgens mij een simpel vraagje (zo simpel dat gooogle me ook kan helpen )

Ik gebruik dit bij een banner om een bepaalde link te openen
1<div id="extraDiv3" onclick="document.location.href='index.php?id=49'"></div>

Hoe open ik de link in een nieuw venster?
  donderdag 15 december 2005 @ 17:38:36 #46
32768 DionysuZ
Respect my authority!
pi_33107480
window.open?
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_33107808
quote:
Op donderdag 15 december 2005 17:38 schreef DionysuZ het volgende:
window.open?
dank, gelukt (met behulp van google
  vrijdag 16 december 2005 @ 20:00:20 #48
45532 ziggyziggyziggy
wisselwachter, vlaggenzwaaier
pi_33143259
Hoe kan ik geselecteerde tekst in een <input> deselecteren?

Context:
Ik ben een beetje aan het spelen met Ajax en heb voor een toekomstig projectje een imdb-titelvinder gemaakt op http://www.ziggyziggyziggy.nl/ajaxtest/imdb.html. Als je een imdb-nummer invoert in het eerste veld en tab doet, zoekt hij de titel en het jaartal erbij d.m.v. het opvragen van de bijbehorende imdb-pagina. Als je je cursor dan in het eerste veld zet en je doet weer tab, wordt de tekst in het titelveld geselecteerd en dat wil ik niet. Da's lelijk. onFocus="self.blur" werkt niet.
Mine is the last voice you'll ever hear. Don't be alarmed.
pi_33143891
Waarom gebruik je een input box als je het gedrag van een input box niet wil?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  vrijdag 16 december 2005 @ 21:58:35 #50
45532 ziggyziggyziggy
wisselwachter, vlaggenzwaaier
pi_33146323
quote:
Op vrijdag 16 december 2005 20:22 schreef SuperRembo het volgende:
Waarom gebruik je een input box als je het gedrag van een input box niet wil?
Da's een hele goede vraag en met jouw andere kijk hierop zou ik mijn probleem kunnen oplossen... ware het niet dat ik die input later weer nodig ga hebben om de titel en jaartal in een eigen database te kunnen stoppen. En dat is weer het handigst met een form.

[edit]Dat kan natuurlijk ook met een hidden input, waarnaast ik de titel in een niet-input-vorm toon[/edit]
Mine is the last voice you'll ever hear. Don't be alarmed.
pi_33351690
Als ik een <a>-tag middels javascript toevoeg zonder href-attribuut geeft dit hetzelfde effect als dat je het direct als html zou presenteren: de tekst tussen <a> en </a> wordt géén link.

Nu is het zo dat als je iets dergelijks als dit uitvoert:

link.href = '#';

Je dan een link maakt van alles binnen die <a>-tag. Echter wil dit:

link.href = '';

De link weer niet verwijderen (als in, het wordt niet meer klikbaar). Is hier een andere methode voor?
  zaterdag 24 december 2005 @ 13:52:19 #52
32768 DionysuZ
Respect my authority!
pi_33369000
ik heb een klein probleempje. Ik heb een div met een bepaalde vaste hoogte, en de grootte van de inhoud varieert. Nu wil ik geen scrollbars omdat ik een custom scrollbar aangeleverd heb gekregen, dus css, overflow:hidden, werkt dan goed. Scrollen met die custom scrollbar werkt dan ook gewoon goed. Maar met de scrollwheel kan ik uiteraard niet scrollen. Is hier een javascript oplossing voor of een manier om met overflow:auto de scrollbalken onzichtbaar te maken?

Ik hou niet zo van custom scrollbars maar goed de klant is koning he.
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
pi_33371912
Custom scrollbars zijn idd meestal zwaar irritant.

Je kunt het onscroll event gebruiken. Zie ook de Event compatibility tables bij quirksmode.org.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zaterdag 24 december 2005 @ 15:45:13 #54
32768 DionysuZ
Respect my authority!
pi_33372016
quote:
Op zaterdag 24 december 2005 15:40 schreef SuperRembo het volgende:
Custom scrollbars zijn idd meestal zwaar irritant.
Mja ik heb er keer op keer op gehamerd dat custom scrollbars counter intuitive werken. Eerst wilde hij dat ding ook nog aan de linkerkant, helemaal tegen de intuitie in. Helaas mocht het niet baten en kan ik toch zo'n ding gaan implementeren
quote:
Je kunt het onscroll event gebruiken. Zie ook de Event compatibility tables bij quirksmode.org.
tnx
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  zaterdag 24 december 2005 @ 17:15:05 #55
32768 DionysuZ
Respect my authority!
pi_33374242
ben ik weer overigens het onscroll event werkt niet, aangezien er bij overflow:hidden niks te scrollen valt
□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell
  zaterdag 24 december 2005 @ 17:57:36 #56
69357 R-Mon
jong en dynamisch
pi_33375489
quote:
Op vrijdag 23 december 2005 19:29 schreef JeRa het volgende:
Als ik een <a>-tag middels javascript toevoeg zonder href-attribuut geeft dit hetzelfde effect als dat je het direct als html zou presenteren: de tekst tussen <a> en </a> wordt géén link.

Nu is het zo dat als je iets dergelijks als dit uitvoert:

link.href = '#';

Je dan een link maakt van alles binnen die <a>-tag. Echter wil dit:

link.href = '';

De link weer niet verwijderen (als in, het wordt niet meer klikbaar). Is hier een andere methode voor?
link.removeAttribute('href');
&lt;tsjsieb&gt; maarja, jij bent ook gewoon cool R-Mon :p
pi_33392517
Vraagje aan de professionals.

Is er een simpele manier om bv van een bestand te achterhalen of het een plaatje is? ik heb een functie waar ik de naam in plaats

1
2
3
4
5		function scripttest(filename)
{
    // array met imageformaten
   // if filename is een 'image'(lees uit image formaten) dan...
}


nu zat ik zelf te denken aan het uitzoeken van een (puntje) en dan de laatste letters filteren... maar ik kan niet meer achterhalen hoe ik dat moet doen
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_33392744
1
2
3		if (filename.match(/\.(gif|jpe?g|png)$/)) {
    // Het is een gif, jpg, jpeg of png
}


[ Bericht 2% gewijzigd door SuperRembo op 25-12-2005 14:04:03 (haakje vergeten) ]
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_33392871
Het kon dus nog makkelijker

Ik had zelf even wat meer tijd genomen en verder gespeeld met iets waar ik mee bezig was... ennuh toen kreeg ik dit...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43		<script language="javascript">

function test(filename)
{
    var ext = new Array();
    var f   = new Array();
    var fxt = "";
    var res = -1;

    ext[0] = "gif";
    ext[1] = "bmp";
    ext[2] = "jpg";
    ext[3] = "png";
    ext[4] = "jpeg";


    f   = filename.split('.');
    fxt = f[f.length-1];

    for (x = 0; x < ext.length; x++)
    {
        if (ext[x] == fxt)
        {
            res = x;
        }
    }

    if (res == -1)
    {
        alert("Image type NOT found");
    }
    else
    {
        alert("image type is found: " + fxt);
    }

}

test("erik.gif");
test("erik.txt");
test("erik.png");

</script>


maar zie dat het nog veel makkelijker kon
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_33393211
quote:
Op zondag 25 december 2005 13:10 schreef SuperRembo het volgende:[ code verwijderd ]
Helaas werkt die niet
The people who lost my respect will never get a capital letter for their name again.
Like trump...
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies - deel 3
Index

» digital corner

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