[Javascript] voor dummies (deel 6)

donderdag 30 augustus 2007 @ 13:20:48 #151

Chandler

Het werkt nu wel iig, maar zie eingelijk geen verschil

what happend?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 30 augustus 2007 @ 13:21:46 #152

Chandler

In IE6 (hier op mijn werk) werkt de resize functie iig niet

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 30 augustus 2007 @ 13:24:39 #153

SuperRembo

Sinds 1998

Met de addEvent/removeEvent functies van quirksmode.org:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

donderdag 30 augustus 2007 @ 13:24:43 #154

Geqxon

quote:
Op donderdag 30 augustus 2007 13:20 schreef Chandler het volgende:
Het werkt nu wel iig, maar zie eingelijk geen verschil what happend?

Je moet natuurlijk wel de twee haakjes achter adBox weghalen, als je hem in een event-handler dondert.

[ Bericht 2% gewijzigd door Geqxon op 30-08-2007 13:30:58 ]

donderdag 30 augustus 2007 @ 13:36:22 #155

Chandler

@SuperRembo; dat werkt inderdaad heerlijk!

in zowel IE als FF

@Geqxon: dat heb ik dus af en toe ook verwijderd met hetzelfde resultaat

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 30 augustus 2007 @ 13:44:31 #156

Geqxon

quote:
Op donderdag 30 augustus 2007 13:24 schreef SuperRembo het volgende:
Met de addEvent/removeEvent functies van quirksmode.org:
[ code verwijderd ]

Doet dit niet basicly hetzelfde?

donderdag 30 augustus 2007 @ 18:05:29 #157

Chandler

Volgens mij wel, maar nu blijkt dit weer niet te werken in FF krijg een melding dat LEFT niet geaccepteerd wordt!

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

<div id=centerrechts style="top: 250px; position: absolute; left: 0;display: none; width: 120px;">
... adsense enzo....
</div>

<script language="javascript">
function adBox()
{
    contentSize = 720;

    midden = ((document.documentElement['offsetWidth'] -2)/2 - 80);

    document.getElementById('centerrechts').style.left    = ((document.documentElement['offsetWidth']/2) + (contentSize /2));
    document.getElementById('centerrechts').style.display = 'block';
}

function addEvent( obj, type, fn )
{
   if (obj.addEventListener)
      obj.addEventListener( type, fn, false );
   else if (obj.attachEvent)
   {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
      obj.attachEvent( "on"+type, obj[type+fn] );
   }
}

addEvent(window, "resize", adBox);

adBox();
</script>

en dan de melding in FF

1
2
3

Error: Error in parsing value for property 'left'. Declaration dropped.
Source File: http://www.gfxpoll.nl/index.php
Line: 0

:? snap ut nou helemaal niet meer :P FF ver. 1.5.0.12

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 30 augustus 2007 @ 18:09:05 #158

SuperRembo

Sinds 1998

quote:
Op donderdag 30 augustus 2007 13:44 schreef Geqxon het volgende:

[..]

Doet dit niet basicly hetzelfde?

Basicly wel. In mijn versie kan je de code makkelijker hergebruiken. Verder zit er een verschil in de scope waarin de handlers worden uitgevoerd.
Maar beide versies zijn verre van bug-vrij.

donderdag 30 augustus 2007 @ 18:20:17 #159

SuperRembo

Sinds 1998

quote:
Op donderdag 30 augustus 2007 18:05 schreef Chandler het volgende:
Volgens mij wel, maar nu blijkt dit weer niet te werken in FF krijg een melding dat LEFT niet geaccepteerd wordt!
[ code verwijderd ]

en dan de melding in FF
[ code verwijderd ]

snap ut nou helemaal niet meer FF ver. 1.5.0.12

Het is niet zo dat de style.left property niet wordt ondersteund, maar de waarde die je er in probeert te zetten is ongeldig. Style.left moet een lengte zijn: een getal en een eenheid (bij px, pt of %). Alleen bij de waarde 0 mag je de eenheid weglaten.

En het wordt tijd om FF te updaten naar 2.x

donderdag 30 augustus 2007 @ 19:02:31 #160

Geqxon

quote:
Op donderdag 30 augustus 2007 18:09 schreef SuperRembo het volgende:

[..]

Basicly wel. In mijn versie kan je de code makkelijker hergebruiken. Verder zit er een verschil in de scope waarin de handlers worden uitgevoerd.
Maar beide versies zijn verre van bug-vrij.

Ik heb mij er eens even in verdiept, ik heb hem door. Dank u

donderdag 6 september 2007 @ 10:30:19 #161

Chandler

Nog een vraagje over arrays

In php kan ik een array zo aanmaken.

$arr = array("naam" => "value");

maar dit werkt niet zo in JS.

arr = new Array("naam" => "value");

hoe doe ik dit in JS?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 6 september 2007 @ 13:20:59 #162

SuperRembo

Sinds 1998

Wat er in javascript het meeste op lijkt is dit:

1
2
3

var arr = {foo: "bar", baz: "bazz"};
alert(arr["foo"]);
alert(arr.foo);

Dan heb je een object/collection. Het is geen array, dus je hebt bijvoorbeeld geen length property die aangeeft hoeveel elementen er in zitten.

donderdag 6 september 2007 @ 13:24:20 #163

Farenji

In javascript is alles een object en kun je dus overal ongelimiteerd properties aan toekennen. Dit kan op vele manieren, dit is allemaal equivalent:

1
2
3
4

var blaat;
blaat.property1 = "blaat";

blaat["property1"] = "blaat;

of:

1
2
3

var blaat = {
property1: "blaat"
};

donderdag 6 september 2007 @ 13:29:55 #164

Chandler

Ah SuperRembo, jammer dat dat er niet in verwerkt zit

want de optie die je aangeeft is niet echt wat ik zoek

dan maar zonder array werken

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 6 september 2007 @ 15:00:38 #165

SuperRembo

Sinds 1998

quote:
Op donderdag 6 september 2007 13:29 schreef Chandler het volgende:
Ah SuperRembo, jammer dat dat er niet in verwerkt zit :{ want de optie die je aangeeft is niet echt wat ik zoek :( dan maar zonder array werken :P

Wat zoek je dan? Je kunt er wel doorheen lopen met een for:

1
2
3
4
5

var myCollection = {foo: "bar", baz: "bazz"};
for (var i in myCollection)
{
alert(myCollection[i]);
}

donderdag 6 september 2007 @ 15:40:18 #166

CraZaay

prettig gestoord

quote:
Op donderdag 6 september 2007 13:29 schreef Chandler het volgende:
Ah SuperRembo, jammer dat dat er niet in verwerkt zit want de optie die je aangeeft is niet echt wat ik zoek dan maar zonder array werken

Er zitten wel arrays in, maar niet met named keys. Maar wat wil je precies doen? Het zou zomaar kunnen dat het toch lukt met objecten of anderszins

donderdag 6 september 2007 @ 17:27:35 #167

Chandler

Ik wil een formulier posten middels ajax, zie code

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

<html>
<head>
<script language="javascript">

var xmlHttp;                 // xmlHttp var.
var xmlHttpError;            // error variable
var xmlHttpFailure = false;  // false for failure
var xmlHttpCache;            // buffer for received data

function create_http_object()
{
    // This array is a list of all/most possible XMLHTTP types
    var ActiveXTypes = [
        "Microsoft.XMLHTTP",
        "MSXML2.XMLHTTP.5.0",
        "MSXML2.XMLHTTP.4.0",
        "MSXML2.XMLHTTP.3.0",
        "MSXML2.XMLHTTP"
    ];

    // Loop through the ActiveXTypes array and
    for (var i = 0; i < ActiveXTypes.length; i++)
    {
        // try to use the current XMLHTTP object,
        // if not it's not possible try the next
        try
        {
            return new ActiveXObject(ActiveXTypes[i]);
        }
        catch(e)
        {
            // object kan niet gebruikt worden!
        }
    }

    // none of them worked, try the function XMLHttpRequest()
    try
    {
        return new XMLHttpRequest();
    }
    catch(e)
    {
        alert("Helemaal geen XML mogelijkheden");
    }

    // It seems that the browser doesn't support AJAX Stuff
    return false;
}

function stateChanged()
{
    // is readyState 4? 4 =  all data is received
    if (xmlHttp.readyState == 4)
    {
        // return data to xmlHttpCache variable
        xmlHttpCache = xmlHttp.responseText;
    }
}

function ajaxSubmit(url, data, returnOBJ)
{
    // url         location of the scripting
    // data        array of submit data
    // returnOBJ   is the object to return the received data to

    // open XMLHTTP connection
    xmlHttp = create_http_object();

    // connection open?
    if (xmlHttp != false)
    {

        // when state is ready, do save
        xmlHttp.onreadystatechange = stateChanged();
        // open url
        xmlHttp.open('POST', url, true);

        // set headers before posting
        xmlHttp.setRequestHeader("Content-type",  "application/x-www-form-urlencoded");
        xmlHttp.setRequestHeader("Content-length", data.length);
        xmlHttp.setRequestHeader("Connection",    "close");

        // send data to server
        xmlHttp.send(data);

        // object is given! (or not?)
        if (returnOBJ != "")
        {
            // add received content to given object (returnOBJ)
            returnOBJ = xmlHttpCache;
        }
    }
    else
    {
        // display ERROR notice
        notifyNoAjax();
    }
}

function ajaxGet(url, data, returnOBJ)
{

    // url          location of scripting
    // data         compilation of string paramters
    // return OBJ   object to return received data to

    // open XMLHTTP connection
    xmlHttp = create_http_object();

    // connection open?
    if (xmlHttp != false)
    {
        // what to do with received data!
        xmlHttp.onreadystatechange = stateChanged();

        // open url location
        xmlHttp.open('GET', url + data, true);

        // send nothing, just go receive data
        xmlHttp.send(null);

        // if received data is longer then....
        if (xmlHttpCache.length > 0 && returnOBJ != "")
        {
            returnOBJ = xmlHttpCache;
        }
    }
    else
    {
        // display ERROR notice!
        notifyNoAjax();
    }
}

function notifyNoAjax()
{
    if (xmlHttpFailure == false)
    {
        alert('Sorry, uw brouwser ondersteund geen AJAX / Javascript calls');
    }
}

</script>
</head>
<body>

<div id="receiveddatadiv" style="width: 300px; height: 100px; border: 1px solid green">Content is comming....</div>

<a href="#" onClick="ajaxGet('file://c:/1.html',
                             '',
                             document.getElementById('receiveddatadiv').innerHtml);">AJAX GET TEST</a>

<form>
Name: <input type="text" id="id_name"><br />
Text: <textarea name="text" id="id_text"></textarea><br />
</form>

<input type="button" onClick="ajaxSubmit('c:/test.php',
                                         'name='  + escape(encodeURI(document.getElementById('id_name').value)) +
                                         '&text=' + escape(encodeURI(document.getElementById('id_text').value)),
                                         document.getElementById('receiveddatadiv').innerHtml);" value="AJAX POST TEST">
</body>
</html>

echter wilde ik eerst alle variabelen middels een array doorgeven naar de ajaxSubmit of ajaxGet.

Ps wat vinden jullie van dit? heb het nog niet getest hoor :) :D :@

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 6 september 2007 @ 18:53:49 #168

SuperRembo

Sinds 1998

1
2
3
4
5
6
7
8
9
10
11
12

Dan kan je de variabele data in een url ("test.php?" + data) of als post data in een http request (request.send(data)).

quote:
Sorry, uw brouwser ondersteund geen AJAX / Javascript calls

vrijdag 7 september 2007 @ 09:32:02 #169

Chandler

quote:
Op donderdag 6 september 2007 18:53 schreef SuperRembo het volgende:

[ code verwijderd ]

Dan kan je de variabele data in een url ("test.php?" + data) of als post data in een http request (request.send(data)).
[..]

Mooi lapje code! maar wat bedoel je met de laatste quote?

Ik heb de code trouwens aangepast

http://www.bruggema.nl/ajaxtest/#

Nu nog een vraagje, als ik een post doe krijg ik iedere keer een nieuwe inhoud (met cache variabel) maar als ik dit met een GET doe krijg ik continue het zelfde

wrom?

[ Bericht 31% gewijzigd door Chandler op 07-09-2007 11:26:42 (visfreaks.nl rulez big time) ]

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 7 september 2007 @ 12:04:35 #170

CraZaay

prettig gestoord

quote:
Op vrijdag 7 september 2007 09:32 schreef Chandler het volgende:

[..]

Mooi lapje code! maar wat bedoel je met de laatste quote?

Dat je code als het een publieke website is liever ook werkt als JS uit staat denk ik, en dat mensen zonder JS deze alert nooit gaan zien

vrijdag 7 september 2007 @ 12:16:23 #171

Chandler

Haha, duidelijk ja

true true..

Heb je iig nog comments op mjin funcies? hoor graag opbouwende kritiek!

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 7 september 2007 @ 14:44:29 #172

Farenji

quote:
Op vrijdag 7 september 2007 12:16 schreef Chandler het volgende:
Haha, duidelijk ja true true..

Heb je iig nog comments op mjin funcies? hoor graag opbouwende kritiek!

Wat doet die returnObj parameter in je functie? Parameters zijn om iets door te geven aan een functie, niet voor return values... bovendien zie ik de functie nergens wachten tot er een resultaat is. Er wordt vanuit gegaan dat er meteen resultaat is, dat werkt heel misschien als je op localhost zit te testen maar dat gaat gegarandeerd mis als de request iets langer duurt, want alles gaat asynchroon en het script blijft daar dus niet op wachten. Met AJAX wil je netjes event based werken, maw: een callbackfunctie definieren die pas aangeroepen wordt als alle data ook daadwerkelijk binnen is. Als je dat niet doet heb je (zeker bij meerdere ajax calls door elkaar die van elkaar afhankelijk zijn) grote kans op een zeer instabiele applicatie die moeilijk tot onmogelijk te debuggen is. Been there, done that, got the t-shirt....

Tip: ga niet zelf het wiel opnieuw uitvinden maar gebruik een goede kant en klare AJAX library. AJAX is veel complexer dan de meesten denken en het vereist een fundamenteel andere denkwijze; met gewoon standaard procedureel programmeren (wat jij hier doet) kom je er echt niet.

vrijdag 7 september 2007 @ 15:00:59 #173

Chandler

Hoi Farenji, ik begrijp je dat je zegt dat je het wiel niet opnieuw moet uitvinden, dat wordt zovaak gezegd maar als we het wiel nooit verder zouden uitvinden waren raceauto's nog steeds zo sloom als slakken

Maar om even inhoudenlijk op je reactie m.b.t. de javascript code in te gaan. die returnOBJ wordt gebruikt om de callbackfunctie aan te geven. Dit omdat ik de standaard submit en get functie wil gebruiken met apparte functies voor het 'benutten' van de output van het script!

Ik heb vanmiddag de scripting weer deels aangepast omdat er toch aardig wat foutjes in zaten. Deze moeten als het goed is nu ook opgelost zijn!.

Verder nog tips qua preformance? ennuh het loopt nu niet meer op localhost hoor

maar op http://www.bruggema.nl/ajaxtest

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 7 september 2007 @ 23:09:06 #174

SuperRembo

Sinds 1998

quote:
Op vrijdag 7 september 2007 09:32 schreef Chandler het volgende:
Mooi lapje code! maar wat bedoel je met de laatste quote? Ik heb de code trouwens aangepast

De spelling "brouwser"

vrijdag 7 september 2007 @ 23:37:30 #175

Geqxon

quote:
Op vrijdag 7 september 2007 23:09 schreef SuperRembo het volgende:

[..]

De spelling "brouwser"

"ondersteund"

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

» digital corner

» digital corner