Προγραμματακι με Javascript...

geotheod

Γεια σας παιδια,

Ειμαι καινουργιος στο forum και αποφασισα να γραφτω βλεπωντας αφενος μεν ποσο μεγαλη γνωση εχετε στον προγραμματισμο, εφετερου ποσο πολύ βοηθατε τους χρηστες που εχουν προβκηματα ή επιθυμουν να μαθουν καποια γλωσσα προγραμματισμου.

Είναι λιγες μερες αφοτου αποφασισα να μαθω μονος μου την γλωσσα προγραμματισμου Java καθως και Javascript μια και εκτος από το ότι τα ζητανε στη σχολη μου, το μαθημα των καθηγητων μου είναι από αθλιο εως απαραδεκτο.

Θα σας ημουν ευγνομων αν μου δινατε ένα χερακι βοηθειας στην προσπαθεια μου να ανακαλυψω καποιες από τις πτυχες αυτης της γλωσσας.

Το πρωτο μου προβλημα αφορα ένα προγραμματακι που θελω να κατασκευασω με Javascript ώστε να το ενσωματωσω σε html σελιδα. Θελω να μπορω να βαζω 3 αριθμους σε αντιστοιχα κουτακια και στο 4ο να μου βγαζει το αποτελεσμα πατωντας ένα κουμπι με τιτλο π.χ «calculate».

Καμμια ιδεα παιδια;

agrippas

Θα μπορούσα να σου γράψω 5 γραμμές JavaScript για το πρόγραμμα που ζητάς αλλά δεν το κάνω. Για να ξεκινήσεις σωστά και να μάθεις, επιβάλλεται να περάσεις από δύο μεγάλα online σχολεία:

- Για Java: http://www.javaforstudents.co.uk
- Για JavaScript: webmonkey

Have fun!

skeftomilos

Ο agrippas έχει δίκιο ότι χρειάζεται σύστημα και μελέτη, πάντως ένας τρόπος να γίνει αυτό που θέλεις είναι ο παρακάτω.

Κώδικας: Επιλογή όλων

<html>
  <body>
    <form>
      Αριθμός 1&#58; <input type="text" name="n1" value="0"><br>
      Αριθμός 2&#58; <input type="text" name="n2" value="0"><br>
      Αριθμός 3&#58; <input type="text" name="n3" value="0">
      <input type="button"  value="Calculate" onClick="this.form.n4.value = Number&#40;this.form.n1.value&#41; + Number&#40;this.form.n2.value&#41; + Number&#40;this.form.n3.value&#41;">
      Αποτέλεσμα&#58; <input type="text" name="n4" value="0"><br>
    </form>
  </body>
</html>

Το να καταλάβεις τη σημασία του ειδικού keyword this, είναι όλα τα λεφτά στο παραπάνω παράδειγμα.

Έχω κάνει μία παρουσίαση της JavaScript για αρχάριους που περιέχει κι άλλα links για JavaScript tutorials, on-line και μη.

geotheod

skeftomilos εισαι υπεροχος. Μακαρι να ειχα λογια να σε ευχαριστησω.

Φιλε agripas μην νομιζεις πως θελω απλα να κανω copy-paste τον κωδικα. Απλα τωρα εχω αριζει να ασχολουμαι και διαβαζω πολλα tutorials και γενικα ειμαι στα πρωτα μου βηματα. Ομως με τον κωδικα που μου δωθηκε μπορω να τον μελετησω, να τον αλλαξω και γενικα να παιξω μαζι του ωστε να το καταλαβω καλυτερα. Γι αυτο θα με ωφελουσαν και οι γραμμες κωδικα που θα μου εδινες. Παντως σε ευχαριστω για τα e-books.

Παιδια και παλι τα ευχαριστω μου.. Να ειστε καλα

skeftomilos

Ότι απορία έχεις ρώτα. Χαρά μας να απαντάμε. Προσωπικά έχω μάθει ένα σωρό πράμματα τους δύο τελευταίους μήνες, απλά με το να ψάχνω να βρίσκω τις απαντήσεις στις ερωτήσεις!

geotheod

Eπισης τωρα που σας βρηκα ευκαιρους θα ηθελα να ρωτήσω και κατι αλλο οσον αφορα την Javascript:

To "onClick="this.form.n4.value=Number(this.form.n1.value) + Number(this.form.n2.value) + Number(this.form.n3.value)" που αναφερεται στον παραπανω κωδικα ειναι μια μεθοδος που μας λεει πως οταν πατησουμε το κουμπι να παει στην μεταβλητη n4 το αθροισμα των κουτιων που δημιουργησαμε πιο πριν, σωστα;

Αυτο που λιγακι με μπερδευει ειναι το "this". Γιατι το βαζουμε αυτο αληθεια; Οπως εχετε καταλαβει προσπαθω να καταλαβω το ολο σκεπτικο και καποια τα εχω πιασει. Ας που μεσα η αγκυλη εκτος απο το this που δεν καταλαβαινω γιατι μπαινει βλεπω χωρισμενα με τελειες το form, το n1 και το value που νομιζω ειναι το πρωτο γιατι αναφερομαστε σε φορμα, με το δευτερο δηλωνουμε την τιμη που εχουμε βαλει πιο πανω και το value ειναι η τιμη του αθροισματοςι.. Σωστα;

Θα ηθελα αν γινεται να μου πειτε και αλλες μεθοδους οπως αυτες που εχει απο μονη της η JavaScript(σαν την close() και την OnClick()) ωστε να κανει διαφορα πραγματα. Μπορω να φτιαξω και δικες μου διαβασα καπου..

Χιλια ευχαριστω για το χρονο σας παιδια, σας ειμαι υποχρεος.

skeftomilos

Κατ'αρχήν να διαχωρήσουμε την HTML από τη JavaScript:

<input type="button" onClick="alert('Hello!')">

Το πράσινο είναι HTML και το κόκκινο είναι JavaScript!

Ο παραπάνω κώδικας προκαλεί την εμφάνιση ενός message box μόλις πατηθεί το κουμπί. Το μήνυμα είναι Hello! και είναι κλεισμένο σε μονά εισαγωγικά. Θα μπορούσαμε να χρησιμοποιήσουμε και διπλά εισαγωγικά, δηλαδή έτσι:

Κώδικας: Επιλογή όλων

<input type="button" onClick='alert&#40;"Hello!"&#41;'>

Πρέπει δηλαδή να είναι διαφορετικό το είδος των εισαγωγικών μέσα στη JavaScript από τα εισαγωγικά που ορίζουν την τιμή του HTML attribute onClick.

Αυτός ο τρόπος να εισάγουμε JavaScript κώδικα στην HTML είναι βολικός μόνο για μικρή ποσότητα κώδικα. Διαφορετικά είναι προτιμότερο να χρησιμοποιήσουμε μία απομονωμένη ρουτίνα:

Κώδικας: Επιλογή όλων

<script>
  function msg&#40;&#41; &#123;
    alert&#40;"Hello!"&#41;
  &#125;
</script>

<input type="button" onClick="msg&#40;&#41;">

Δημιουργήσαμε μία δική μας ρουτίνα με όνομα msg() και την καλέσαμε στο συμβάν onClick του HTML στοιχείου <input>. Εκτός των άλλων γλιτώσαμε κι από το πρόβλημα των εισαγωγικών.

Υπάρχει και τρίτος τρόπος να συνδέσουμε ένα συμβάν με κώδικα, και μάλιστα πιο "προγραμματιστικός":

Κώδικας: Επιλογή όλων

<script>
  window.onload = function&#40;&#41; &#123;
    alert&#40;"Hello!"&#41;
  &#125;
</script>

Αυτός ο κώδικας προκαλεί την εμφάνιση του μηνύματος Hello! μόλις φορτωθεί η σελίδα. Συνδέσαμε άμεσα το συμβάν onload
του αντικειμένου window με μία ρουτίνα που ορίσαμε επί τόπου. Θα ήταν απολύτως το ίδιο αν είχαμε γράψει το εξής:

Κώδικας: Επιλογή όλων

<body onLoad="alert&#40;'Hello!'&#41;">

Στην πραγματικότητα η script engine του browser κάνει αυτή τη μετατροπή αυτόματα, δηλαδή μετατρέπει τα HTML attributes onClick, onLoad κ.λπ. σε ρουτίνες, που μετά συνδέει με τα συμβάντα onclick, onload κ.λπ. των αντίστοιχων αντικειμένων.

Η JavaScript είναι γλώσσα βασισμένη εξ ολοκλήρου σε αντικείμενα. Σχεδόν τα πάντα είναι αντικείμενα, και όλες οι ρουτίνες είναι στην πραγματικότητα μέθοδοι κάποιου αντικειμένου. Για παράδειγμα η ρουτίνα msg() που γράψαμε παραπάνω δεν ήταν αδέσποτη αλλά έγινε αυτόματα μέθοδος του βασικού αντικειμένου window. Επομένως θα ήταν το ίδιο αν την είχαμε χρησιμοποιήσει έτσι:

Κώδικας: Επιλογή όλων

<input type="button" onClick="window.msg&#40;&#41;">

Κάπου εδώ αρχίζει και κολλάει και το keyword this. Αφού όλες οι ρουτίνες είναι μέθοδοι, το this αφορά το αντικείμενο του οποίου η μέθοδος τρέχει εκείνη τη στιγμή, παράδειγμα:

Κώδικας: Επιλογή όλων

<script>
  function msg&#40;element&#41; &#123;
    alert&#40;element.value&#41;
  &#125;
</script>

<input type="button" value="1" onClick="msg&#40;this&#41;">
<input type="button" value="2" onClick="msg&#40;this&#41;">

Αν πατήσουμε το πρωτο κουμπί το μήμυμα θα είναι 1, ενώ το δεύτερο κουμπί βγάζει μήνυμα 2. Καταλαβαίνεις γιατί? Η έκφραση element.value επιστρέφει την τιμή της ιδιότητας value του αντικειμένου element. Ποιο είναι όμως το αντικείμενο element? Στη μία περίπτωση αντιπροσωπεύει το ένα κουμπί, στην άλλη το άλλο. Βλέπεις ότι περνάμε το keyword this ως argument της μεθόδου msg(). Η ίδια η μέθοδος msg() παραμένει μέθοδος του αντικειμένου window. Για παράδειγμα αν αντικαταστήσουμε την εντολή alert(element.value) με την alert(this.value) δε θα έχουμε τα ίδια αποτελέσματα. Τα κουμπιά θα βγάζουν μηνύματα undefinded. Αυτό σημαίνει ότι σε αντίθεση με τα κουμπιά το αντικείμενο window δε διαθέτει ιδιότητα value. Βέβαια και τα κουμπιά δεν έχουν τις ιδιότητες του window, και γενικά κάθε είδος αντικειμένου έχει το δικό του πακέτο από μεθόδους και ιδιότητες.

Ας σημειωθεί ότι η JavaScript είναι μια εκπληκτικά ευέλικτη γλώσσα, και επιτρέπει τη δημιουργία ιδιοτήτων on-the-fly! Δηλαδή μπορούμε ανα πάσα στιγμή να ορίσουμε μια ιδιότητα value στο window, ως εξής:΅

Κώδικας: Επιλογή όλων

window.value = 13

Πιο απλό δε γίνεται! Θα πει κάποιος ότι αυτό είναι περιττό, και πως ο ίδιος ποτέ δε θα έκανε κάτι τέτοιο. Χμ, λάθος. Το κάνει κάθε φορά που ορίζει μία μεταβλητή σε JavaScript! Ο παρακάτω κώδικας:

Κώδικας: Επιλογή όλων

hehe = 100

... είναι ισοδύναμος με τον:

Κώδικας: Επιλογή όλων

window.hehe = 100

... με αποτέλεσμα αν εκτελεστεί μετά η εντολή:

Κώδικας: Επιλογή όλων

alert&#40;window.hehe&#41;

... να εμφανίσει μήνυμα 100!

geotheod

Skeftomilos.... my full respects script master!

Δεν εχω λογια....

geotheod

Η αληθεια ειναι οτι πειραματιστηκα πανω στον κωδικα των script που μου εδωσες παραπανω και προσπαθησα να τα λυσω εξ αρχης μονος μου.

Ορισμενα πραγματα ομως δεν τα καταλαβα καλα.. Eνα από αυτά είναι στο πρωτο προγραμμα (που πιστευω πως καταλαβα το γενικο σκεπτικο) είναι στην γραμμη:

onClick="this.form.n4.value = Number(this.form.n1.value) +Number(this.form.n2.value) + Number(this.form.n3.value)">

οπου δοκιμασα να αλλαξω την λεξη «Number» με καποια άλλη αλλα τοτε παρατηρησα πως το προγραμμα δεν δουλευε. Χρειαζεται λοιπον σε ολες τις περιπτωσεις που εχουμε πραξεις μεταξυ αριθμων;

Το άλλο προβλημα μου είναι στο προγραμμα:

<script>
function msg(element) {
alert(element.value)
}
</script>

<input type="button" value="1" onClick="msg(this)">
<input type="button" value="2" onClick="msg(this)">

οπου με δυσκολεψε αρκετα. Το ορισμα «element» της συναρτησης «msg» συνδεεται με το «this» όταν καλειται από τα κουμπια της φορμας; Και ετσι με το «element.value» μπορουμε να προσπελασουμε την τιμη του value;

Με συγχωρεις αλλα ακομα δεν εχω καταλαβει τον ρολο του «this» μεσα στα script… Δηλαδη που αναφερεται και που το χρησιμοποιούμε…

Παντως τα αλλα τα καταλαβα! Να σαι καλα..

skeftomilos

Η Number() είναι μία build-in συνάρτηση της JavaScript που μετατρέπει ένα string σε αριθμό. Για παράδειγμα μετατρέπει το string "100" σε αριθμό 100, και το string "abc" σε NaN (Not a Number). Αν δεν είχαμε χρησιμοποιήσει αυτή τη συνάρτηση το αποτέλεσμα θα ήταν συνένωση string και όχι πρόσθεση αριθμών. Δηλαδή αντί για 2 + 2 + 2 = 6 θα είχαμε "2" + "2" + "2" = "222", κάτι που δε θέλουμε εδώ φυσικά. Υπάρχει και η αντίστοιχη συνάρτηση String() που μετατρέπει αριθμούς σε string.

geotheod έγραψε:Το ορισμα «element» της συναρτησης «msg» συνδεεται με το «this» όταν καλειται από τα κουμπια της φορμας; Και ετσι με το «element.value» μπορουμε να προσπελασουμε την τιμη του value;

Ακριβώς!

geotheod έγραψε:ακομα δεν εχω καταλαβει τον ρολο του «this» μεσα στα script… Δηλαδη που αναφερεται και που το χρησιμοποιούμε…

Το this είναι μία προχωρημένη δυνατότητα των αντικειμένων (objects), τα οποία είναι μια προχωρημένη προγραμματιστική τεχνική, η οποία προϋποθέτει γνώση των συναρτήσεων (functions), οι οποίες με τη σειρά τους θέλουν γνώση των μεταβλητών. Επομένως μη στεναχωριέσαι αν δεν καταλαβαίνεις ακόμα το this. Αν ξεκινήσεις ένα tutorial και προχωρήσεις βήμα-βήμα, όταν θα φτάσεις στο this θα μπορέσεις να το κατανοήσεις εύκολα. Σκοπός μου εδώ δεν είναι να σου διδάξω τη γλώσσα καθώς τα tutorials είναι γραμμένα από καλύτερους δασκάλους από μένα. Σκοπός μου είναι να σου δείξω ότι η JavaScript είναι μία ισχυρή, σύγχρονη γλώσσα με πλούσιες δυνατότητες, που αξίζει κάποιος να ασχοληθεί μαζί της.

Στον προγραμματισμό σπάνια υπάρχει μόνο ένας τρόπος να γίνει κάτι. Συνήθως ο προγραμματιστής καλείται να επιλέξει ανάμεσα σε εναλλακτικούς τρόπους που επιτυγχάνουν το ίδιο αποτέλεσμα. Η επιλογή του βασίζεται σε πολλούς παράγοντες όπως τις γνώσεις που έχει εκείνη τη στιγμή, τα γούστα του, τα standards της εταιρίας που εργάζεται, την απόδοση, compatibility, maintainability, scalability, securability, κ.λπ. κ.λπ. Έτσι θα μπορούσαμε να φτιάξουμε το πρόγραμμα της πρόσθεσης των πεδίων και με άλλους τρόπους, χωρίς τη χρήση του this. Ένα παράδειγμα:

Κώδικας: Επιλογή όλων

<html>
  <body>
    <form name="calc">
      Αριθμός 1&#58; <input type="text" name="n1" value="0"><br>
      Αριθμός 2&#58; <input type="text" name="n2" value="0"><br>
      Αριθμός 3&#58; <input type="text" name="n3" value="0">
      <input type="button"  value="Calculate" onClick="calc.n4.value = Number&#40;calc.n1.value&#41; + Number&#40;calc.n2.value&#41; + Number&#40;calc.n3.value&#41;">
      Αποτέλεσμα&#58; <input type="text" name="n4" value="0"><br>
    </form>
  </body>
</html>

Έχοντας δώσει ένα όνομα στη φόρμα μπορούμε να αναφερόμαστε σ'αυτή με το όνομά της.

Η JavaScript είναι μία γλώσσα που φτιάχτηκε με κύριο στόχο το Web και συγκεκριμένα το client-side scripting. Γι αυτό έχει δοθεί έμφαση στη λακωνικότητα των εκφράσεων, καθώς ο κώδικας μεταφέρεται συνεχώς από τους servers στους browsers μέσω του διαδικτύου. Όλοι οι παρακάτω είναι ισοδύναμοι τρόποι να αναφερθούμε στην τιμή του πεδίου n4 της φόρμας calc:

Κώδικας: Επιλογή όλων

calc.n4.value
document.calc.n4.value
window.document.calc.n4.value
window.document.forms&#91;'calc'&#93;.n4.value
window.document.forms&#91;'calc'&#93;.elements&#91;'n4'&#93;.value
window.document.getElementsByName&#40;'calc'&#41;&#91;0&#93;.elements&#91;'n4'&#93;.value

geotheod

Καταρχην συγνωμη που σας εχω πρηξει....

Τωρα σας δινω ενα προγραμματακι που περιεχει JavaScript γιατι εμενα με εχει παιδεψει πολλη ωρα και δεν μπορω να καταλαβω που ειναι το λαθος. Σπαω το κεφαλι μου... Αν μπορειτε να με βοηθησετε..

<html>
<head>
<title>Epiloges</title>
<script>
function fullname()
{
var form=document.form[0];
for(i=0; i<form.st.length; i++)
{
if (form.st.checked)
break;
}

alert("You choose"+form.st.value)
}
</script>
</head>
<body>
<form>
<b>select</b>

<input type="radio" name="st" value="Moe Haward">Moe
<input type="radio" name="st" value="Larry Flen">Larry
<input type="radio" name="st" value="Curly Haward">Curly

<input type="button" name="viewer" value="View full name"
onClick="fullname()">
</form>
</body>
</html>

softius

Στην πιο κάτω γραμμή υπάρχει ένα λάθος

Κώδικας: Επιλογή όλων

for&#40;i=0; i<form.st&#91;i&#93;.length; i++&#41;

και θα έπρεπε να ήταν

Κώδικας: Επιλογή όλων

for&#40;i=0; i<form.st.length; i++&#41;

To st είναι ένας πίνακας και το length υπάρχει στο πίνακα, και όχι στο st που είναι μία θέση του πίνακα, Βέβαια για να ακριβολογώ θα μπορούσε να υπάρχει και στο st, δεδομένου ότι στη θέση αυτή θα υπήρχε ένας πίνακας και όχι μία τιμή

Και μία μικρή σημείωση... θα ήταν καλύτερα αν έκανες αναφορά στις φόρμες με το όνομα (δες αυτά που έχει γράψει ο skeftomilos) παρά με κάποιον αριθμό. Η χρήση ονόματος σε τέτοιες περιπτώσεις είναι ιδιαίτερα χρήσιμη όταν επαναχρησιμοποιούμε κάποιο script. Ο αριθμός από την άλλη ίσως να πρέπει να αλλαχθεί αν υπάρχουν κι άλλες φόρμες στην ίδια σελίδα.

skeftomilos

Ο κώδικας έχει άλλα δυο λαθάκια, γι αυτό ξαναγράφω τη ρουτίνα fullname().

Κώδικας: Επιλογή όλων

function fullname&#40;&#41;
&#123;
  var form=document.forms&#91;0&#93;;
  for&#40;i=0; i<form.st.length; i++&#41;
  &#123;
    if &#40;form.st&#91;i&#93;.checked&#41;
    break;
  &#125;
  if &#40;form.st&#91;i&#93;&#41; alert&#40;"You choose"+form.st&#91;i&#93;.value&#41;
&#125;

Θα μπορούσε κάποιος να σκεφτεί ότι η εύρεση του επιλεγμένου "radio" είναι αρκετά συνηθισμένη περίπτωση, οπότε αξίζει να κάνουμε μία γενική ρουτίνα που να το κάνει αυτό:

Κώδικας: Επιλογή όλων

function getSelectedRadio&#40;radiogroup&#41; &#123;
  for &#40;var i = 0; i < radiogroup.length; i++&#41; &#123;
    if &#40;radiogroup&#91;i&#93;.checked&#41; return radiogroup&#91;i&#93;
  &#125;
&#125;

Αυτή τη ρουτίνα μπορούμε να τη μεταφέρουμε από σελίδα σε σελίδα χωρίς καμία αλλαγή. Έτσι η ρουτίνα fullname() απλοποιείται αισθητά:

Κώδικας: Επιλογή όλων

function fullname&#40;&#41; &#123;
  var selected = getSelectedRadio&#40;document.forms&#91;0&#93;.st&#41;
  if &#40;selected&#41; &#123;
    alert&#40;"You choose" + selected.value&#41;
  &#125; else &#123;
    alert&#40;"You choose nothing!"&#41;
  &#125;
&#125;

geotheod

Παιδια σας υπερευχαριστω για αλλη μια φορα. Αυτο ομως που δεν εχω κατανοησει ακομα μελετωντας το προγραμμα καθως και τις λυσεις που μου δωσατε (αυτη που εφαρμοσα ειναι η πρωτη του skeftomilos η οποια δουλευε αψογα) είναι την λειτουργια του πινακα «st» δηλαδη συνεντησα προβλημα κατανοησης της ρουτινας fullname και συγκεκριμενα με την επαναληπτικη διαδικασία:

Κώδικας: Επιλογή όλων

for&#40;i=0; i<form.st.length; i++&#41; 
  &#123; 
    if &#40;form.st&#91;i&#93;.checked&#41; 
    break;

Περα από το «st», το length πως ξερει ποσο είναι το μεγεθος του πινακα που μελεταμε; Και το «st» αυτό εχει καμμια σχεση με το αντιστοιχο που εχουμε δωσει στα ονοματα των κουμπιων radio;

Κατά δευτερο λογο αποφασισα να ακολουθησω την συμβουλη του softius και να κανω αναφορες στις φορμες με το ονομα πραγμα που μου φαινεται πιο ευκολο. Ετσι παροτι δεν καταλαβα ακριβως πως δουλευει εκανα την εξης αλλαγη:

Κώδικας: Επιλογή όλων

<script>
function fullname&#40;&#41;
&#123;

for&#40;i=0; i<ba.st&#91;i&#93;.length; i++&#41;
&#123;
if &#40;ba.st&#91;i&#93;.checked&#41;
break;
&#125;
if &#40;ba.st&#91;i&#93;&#41; alert&#40;"You choose " +ba.st&#91;i&#93;.value&#41; 
&#125;
</script>


</head>	

<body>

<form name=ba>
<b>select</b>

<input type="radio" name="st" value="Moe Haward">Moe
<input type="radio" name="st" value="Larry Flen">Larry
<input type="radio" name="st" value="Curly Haward">Curly

<input type="button" name="viewer" value="View full name" 
onClick="fullname&#40;&#41;">
</form>

Και με μεγαλη μου χαρα παρατηρησα ότι δουλευει!

Παιδια σας ευχαριστω που με ανεχεστε…

skeftomilos

Το να αναφερόμαστε σε μία φόρμα άμεσα με το όνομά της επιτρέπεται μεν αλλά δεν είναι και πολύ σωστό. Είναι μάλλον κατάλοιπο από συμπεριφορές των παλαιών browsers. Ο Firefox εκτελεί μεν τον κώδικα αλλά βγάζει της παρακάτω προειδοποίηση στη JavaScript Console:

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.

Επομένως είναι μάλλον καλύτερο να γράφουμε document.forms["ba"].st.length αντί για σκέτο ba.st.length, που κάνει και πιο ευανάγνωστο τον κώδικα.

Όσο για τον πίνακα st, συμβαίνει το εξής. Όταν η script engine του browser αναλύει τη σελίδα, δημιουργεί εσωτερικά από ένα αντικείμενο για κάθε στοιχείο ππυ βρίσκει (div, span, p, a, img, form, input, br, κ.λπ.). Έτσι φτιάχνει από ένα αντικείμενο τύπου HTMLInputElement για κάθε <input>. Αυτά τώρα τα αντικείμενα θέλει να τα τοποθετήσει στη συλλογή elements της φόρμας (HTMLFormElement) που τα περιέχει. Η συλλογή αυτή όμως δε μπορεί να δεχτεί δύο ή περισσότερα στοιχεία με το ίδιο όνομα (name), έτσι δημιουργεί ένα επιπλέον αντικείμενο-συλλογή τύπου NodeList για αυτά τα ομώνυμα στοιχεία και τοποθετεί αυτό στη συλλογή elements. Έτσι τελικά η έκφραση ba.st.length επιστρέφει τον αριθμό των στοιχείων αυτού του ενδιάμεσου αντικειμένου-συλλογής που στη συγκεκριμένη περίπτωση είναι 3.

Αντίθετα η έκφραση form.st[j].length επιστρέφει την ιδιότητα length ενός εκ των στοιχείων <input> της ενδιάμεσης συλλογής, το οποίο όμως δεν έχει τέτοια ιδιότητα. Έτσι η έκφραση επιστρέφει undefined, και ο βρόγχος for(j=0; i<ba.st[j].length; j++) τερματίζει άδοξα γιατί το μηδέν είναι εξ ορισμού μεγαλύτερο από το undefined.

Μέλη σε σύνδεση