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

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

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

Δημοσίευση από geotheod » 19 Απρ 2005 13:16

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

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

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

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

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

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

Άβαταρ μέλους
agrippas
Script Master
Δημοσιεύσεις: 494
Εγγραφή: 18 Ιούλ 2002 14:52
Τοποθεσία: Υπερπέραν
Επικοινωνία:

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

Δημοσίευση από agrippas » 19 Απρ 2005 16:42

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

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

Have fun!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 19 Απρ 2005 19:35

Ο 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 και μη.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

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

Δημοσίευση από geotheod » 20 Απρ 2005 00:12

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

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

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

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 20 Απρ 2005 01:44

Ότι απορία έχεις ρώτα. Χαρά μας να απαντάμε. Προσωπικά έχω μάθει ένα σωρό πράμματα τους δύο τελευταίους μήνες, απλά με το να ψάχνω να βρίσκω τις απαντήσεις στις ερωτήσεις! :D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

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

Δημοσίευση από geotheod » 20 Απρ 2005 03:12

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
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 20 Απρ 2005 06:18

Κατ'αρχήν να διαχωρήσουμε την 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! :D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

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

Δημοσίευση από geotheod » 21 Απρ 2005 00:15

Skeftomilos.... my full respects script master!

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

geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

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

Δημοσίευση από geotheod » 21 Απρ 2005 15:02

Η αληθεια ειναι οτι πειραματιστηκα πανω στον κωδικα των 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&#8230; Δηλαδη που αναφερεται και που το χρησιμοποιούμε&#8230;

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

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 22 Απρ 2005 03:12

Η 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&#8230; Δηλαδη που αναφερεται και που το χρησιμοποιούμε&#8230;
Το 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
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

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

Δημοσίευση από geotheod » 26 Απρ 2005 23:04

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

Τωρα σας δινω ενα προγραμματακι που περιεχει 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
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

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

Δημοσίευση από softius » 27 Απρ 2005 01:09

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

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

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, δεδομένου ότι στη θέση αυτή θα υπήρχε ένας πίνακας και όχι μία τιμή :D

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

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 27 Απρ 2005 10:40

Ο κώδικας έχει άλλα δυο λαθάκια, γι αυτό ξαναγράφω τη ρουτίνα 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;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

geotheod
Δημοσιεύσεις: 54
Εγγραφή: 19 Απρ 2005 13:12
Τοποθεσία: Αθήνα
Επικοινωνία:

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

Δημοσίευση από geotheod » 28 Απρ 2005 01:20

Παιδια σας υπερευχαριστω για αλλη μια φορα. Αυτο ομως που δεν εχω κατανοησει ακομα μελετωντας το προγραμμα καθως και τις λυσεις που μου δωσατε (αυτη που εφαρμοσα ειναι η πρωτη του 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>
Και με μεγαλη μου χαρα παρατηρησα ότι δουλευει!

Παιδια σας ευχαριστω που με ανεχεστε&#8230;

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 28 Απρ 2005 17:10

Το να αναφερόμαστε σε μία φόρμα άμεσα με το όνομά της επιτρέπεται μεν αλλά δεν είναι και πολύ σωστό. Είναι μάλλον κατάλοιπο από συμπεριφορές των παλαιών 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.
:)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

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

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες