[eeei.gr Logo]
Επικοινωνία
Ταυτότητα
Μαθήματα Internet | Μαθήματα Προγραμματισμού | Net Business | Τα νέα του Internet | Ο Κόσμος του Αύριο

Δημιουργία ενός Message Box

Κατασκευάζουμε ένα input box που όταν κάνουμε κλικ επάνω του μας δίνει το input που δώσαμε.

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function MsgBox (textstring) {
alert (textstring) }
// - End of JavaScript - -->
</SCRIPT></HEAD><BODY>
<FORM><INPUT NAME="text1" TYPE=Text>
<INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">
</FORM></BODY></HTML>

Επεξήγηση του κώδικα:

Σχόλια: Οποιαδήποτε γραμμή ξεκινάει από // μέσα στην οδηγία <Script> δεν εκτελείται. Το // υποδηλώνει πως σε αυτή τη γραμμή ο προγραμματιστής έγραψε παρατηρήσεις (κείμενο) για χρήση δική του ή άλλων.

Θέση του script: Αν και θεωρητικά μπορεί να τοποθετηθεί οπουδήποτε στη σελίδα συνήθως προτιμούμε τον HEADER όπου αυτό είναι δυνατό:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
< !-- Beginning of JavaScript -
(Εδώ μπαίνουν οι JavaScript functions)
// - End of JavaScript - -->
</SCRIPT>
</HEAD>

Ανάλυση του κώδικα του message box:

Function = υποπρόγραμμα (σύνολο εντολών – εργασιών)
MyFunction = το όνομα της function
Variable = μεταβλητή (μια τιμή που θα επεξεργαστούμε)

function MyFunction (variable) {
εργασίες που θα εκτελεστούν σε αυτή την variable
}

Η επεξήγηση της:
function MsgBox (textstring) {
alert (textstring)
}
είναι:
MsgBox = το όνομα της function.
Textstring = το όνομα της μεταβλητής
alert (textstring) = Η εντολή alert θα εφαρμοστεί πάνω στη μεταβλητή textstring

Περιεχόμενο της variable:

Η μεταβλητή textstring πρέπει να έχει μια τιμή. Αυτή θα μπορούσε να οριστεί απευθείας από τον κώδικα. Για παράδειγμα: textstring = “This is a text string” (προσέξτε ότι το κείμενο βρίσκεται μέσα σε εισαγωγικά).

Εκτέλεση της εργασίας:

Από τη standard HTML αναγνωρίζουμε τις γραμμές 1,2,4.

  1. <FORM>
  2. <INPUT NAME="text1" TYPE=Text>
  3. <INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)">
  4. </FORM>

Το μυστικό της γραμμής 3 είναι το: onClick="MsgBox(form.text1.value)". Τα υπόλοιπα αποτελούν standard HTML. To onClick λέει στον browser πως όταν ο χρήστης κάνει κλικ θα πρέπει να εκτελέσει την function MsgBox.

Το form.text1.value σημαίνει πως ο browser θα πρέπει να πάρει από τη φόρμα το object (αντικείμενο) που ονομάζεται text1 και να δώσει στην MsgBox το περιεχόμενό του (δηλαδή αυτό που έγραψε ο χρήστης).

Για να γίνει πιο εμφανής η διαφορά, αν θέλαμε να μάθουμε το μήκος του κειμένου που έγραψε ο χρήστης θα δίναμε: form.text1.length.

Τρέχουσα Ενότητα: Javascript
 

© Eeei.gr 2009