Μαθήματα Javascript
Το πρώτο πράγμα που πρέπει να γνωρίζει κανείς για την Javascript είναι ότι δεν έχει καμία απολύτως σχέση με τη γλώσσα προγραμματισμού Java πέραν του πρώτου συνθετικού του ονόματός της.
Η Javascript είναι μια απλή στη χρήση και λειτουργία της γλώσσα προγραμματισμού που έχει ως κύρια λειτουργία την αύξηση των δυνατοτήτων των web σελίδων.
Αν γνωρίζετε HTML κώδικα (που το ελπίζω γιατί διαφορετικά θα δυσκολευτείτε αρκετά σε αυτά τα μαθήματα) θα ξέρετε ότι η γλώσσα HTML είναι περιγραφική. Εξηγεί στον Web browser (Internet Explorer, Mozilla, Netscape κ.λπ.) πώς να εμφανίσει το περιεχόμενο της σελίδας, αλλά δεν μπορεί να εκτελέσει εργασίες του τύπου: «Πάρε αυτά τα στοιχεία από τον χρήστη, επεξεργάσου τα με αυτόν τον τρόπο και ανάλογα με το αποτέλεσμα της επεξεργασίας εκτέλεσε αυτή ή εκείνη την ενέργεια».
Το μεγάλο πλεονέκτημα (και πολλές φορές μπελάς) του κώδικα Javascript είναι ότι εκτελείται από τον Web Browser του επισκέπτη της σελίδας. Αυτό έχει το πλεονέκτημα της ελάφρυνσης του φόρτου του Web Server αφού οι εργασίες γίνονται όλες από το PC του χρήστη.
Δυστυχώς με τον τρόπο αυτό δεσμευόμαστε από τις δυνατότητες της έκδοσης και του είδους του Browser που διαθέτει ο χρήστης και έτσι υπάρχουν περιπτώσεις που ο κώδικάς μας δεν θα λειτουργεί σωστά. Το πρόβλημα αυτό δεν είναι πολύ διαδεδομένο, αλλά υπάρχει και καλό είναι να το γνωρίζουμε πριν κατασκευάσουμε κάτι περίπλοκο, χρησιμοποιώντας την Javascript γιατί ο κίνδυνος να απαιτηθούν σοβαρές αλλαγές μετά το τέλος της κατασκευής δεν μπορεί να αποκλειστεί.
Objects (αντικείμενα) ονομάζουμε την ίδια τη σελίδα, καθώς και τα σαφώς ορισμένα μέρη της (π.χ. tables, forms, buttons, images, ή links). Κάθε object έχει ορισμένες ιδιότητες (properties). Για παράδειγμα το document.bgcolor="red" ορίζει ότι το φόντο του body της σελίδας μας θα είναι κόκκινο.
Methods ονομάζουμε τα πράγματα (εργασίες) που μπορούν να εκτελέσουν τα Objects. Για παράδειγμα ανοίγουμε ένα νέο έγγραφο με τη μέθοδο document.open(). Για να γράψετε "Hello World" σε ένα έγγραφο δίνεται τη μέθοδο: document.write("Hello World") .
Events ονομάζουμε τις ενέργειες που βάζουν σε κίνηση το μηχανισμό εκτέλεσης των Methods. Για παράδειγμα όταν κάνει κλικ ο χρήστης να τρέχει ένα υποπρόγραμμα: onClick="run_my_function()".
Ο κώδικας που δημιουργούμε μπορεί είτε να τοποθετηθεί μέσα στη web σελίδα, είτε να βρίσκεται σε κάποιο ξεχωριστό αρχείο και να καλείται κάθε φορά που φορτώνεται η σελίδα. Ο δεύτερος τρόπος είναι καλύτερος όταν θέλουμε να χρησιμοποιήσουμε τον ίδιο κώδικα από πολλές σελίδες. Ωστόσο τα πρώτα μας παραδείγματα θα είναι αρκετά απλά και γι’ αυτό θα προτιμήσουμε να τοποθετούμε τον κώδικα απ’ ευθείας στις σελίδες που μας ενδιαφέρουν.
Πριν ξεκινήσουμε το πρώτο μας πρόγραμμα πρέπει να γνωρίζετε ότι:
Το πρώτο μας πρόγραμμα θα είναι ένα alert box που θα λέει:
Ελπίζω να σας άρεσε η σελίδα μας
Ο κώδικας ολόκληρης της σελίδα μέσα στην οποία θα το δημιουργήσουμε είναι:
<html>
<head><title>Δοκιμή Javascript</title><script>alert("Ελπίζω να σας άρεσε η σελίδα μας");</script>
</head><body>
Το περιεχόμενο της σελίδας </body>
</html>
Παρατηρούμε ότι:
<html> <head><title>Δοκιμή Javascript</title></head><body> Το περιεχόμενο της σελίδας<script>alert("Ελπίζω να σας άρεσε η σελίδα μας");</script></body> </html>
Έτσι, η ερώτηση του alert box έχει νόημα αφού ο χρήστης πρώτα βλέπει τη σελίδα και μετά ερωτάται αν του αρέσει.
Προβλήματα:
Αν δοκιμάσατε αυτόν τον κώδικα μόνοι σας πιθανώς να αντιμετωπίσατε τα ακόλουθα προβλήματα:
1. Ο Browser (π.χ. Internet Explorer) δεν εμφανίζει το παράθυρο
Ανάλογα με τις ρυθμίσεις του ο Browser μπορεί να μην επιτρέπει την εμφάνιση alert boxes για λόγους προστασίας από ανεπιθύμητες διαφημίσεις. Εδώ μόνο ο χρήστης μπορεί να επιτρέψει την εμφάνιση του σχετικού παραθύρου.
2. Διαχείριση Ελληνικών
Ενώ ο Internet Explorer εμφανίζει κανονικά το alert box στον Mozilla τα ελληνικά συνήθως έχουν χαθεί:
Δυστυχώς αυτό είναι ένα συχνό πρόβλημα και συχνά δεν μπορούμε να κάνουμε εμείς κάτι για να το αποφύγουμε. Τις περισσότερες φορές πάντως το πρόβλημα διορθώνεται αν δηλώσουμε την ελληνική ως γλώσσα της web σελίδας μας με κάποια οδηγία όπως <meta http-equiv=Content-Type content="text/html; charset=windows-1253"> ή ακόμη καλύτερα: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Τα ελληνικά θα εμφανιστούν σωστά στους περισσότερους browsers αν ο κώδικας γίνει:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head><title>Δοκιμή Javascript</title></head><body>
Το περιεχόμενο της σελίδας<script>alert("Ελπίζω να σας άρεσε η σελίδα μας");</script></body>
</html>
Για να αποφύγουμε την επανάληψη του ίδιου κώδικα σε πολλές σελίδες (κάτι που καθιστά δύσκολη την τροποποίησή του στο μέλλον) μπορούμε να τον τοποθετήσουμε σε ένα ξεχωριστό αρχείο. Στο προηγούμενο παράδειγμα ο κώδικας ήταν:
alert("Ελπίζω να σας άρεσε η σελίδα μας");
Δημιουργούμε λοιπόν ένα ξεχωριστό αρχείο που περιέχει μόνο αυτή τη γραμμή και ονομάζεται kati.js. Φυσικά αντί για kati εσείς μπορείτε να του δώσετε όποιο όνομα θέλετε. Η επέκταση όμως θα πρέπει να είναι πάντοτε .js
Σε αυτή την περίπτωση η σελίδα μας γίνεται:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Δοκιμή Javascript</title></head><body> Το περιεχόμενο της σελίδας<script src="kati.js"></script></body> </html>
Η αλλαγή εδώ βρίσκεται στην οδηγία script που τώρα έγινε: <script src="kati.js"></script> Εννοείται ότι σε αυτή την περίπτωση το αρχείο kati.js βρίσκεται στον ίδιο φάκελο με τη web σελίδα. Αν βρισκόταν αλλού θα έπρεπε να δηλωθεί η πλήρης διαδρομή για το αρχείο για παράδειγμα: <script src="fakelos/ypofakelos/kati.js"></script>.
Μπορούμε να φανταστούμε μια μεταβλητή ως ένα κουτάκι που περιέχει κάποια πληροφορία. Για παράδειγμα για να βάλω την ηλικία μου σε μια μεταβλητή μπορώ να δώσω στη μεταβλητή το όνομα myage και να δηλώσω:
var myage = 45;
Από δω και στο εξής μπορώ αντί να δηλώνω το νούμερο 45 να χρησιμοποιώ παντού τη μεταβλητή myage αντί αυτού.
var myxtpage = result4 + '::' + result3 + '::' + result2 + '::' + result1;
Ενώνουμε τα στοιχεία τεσσάρων variables χωρισμένων με :: και τα βάζουμε όλα σε μια άλλη.
<HEAD><TITLE>Δοκιμές</TITLE><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD><BODY>
<SCRIPT type="text/javascript">
var numsums = 10 + 2;
alert("10 + 2 is " + numsums)
var x = 10
alert("ten is " + x)
var y = x * 2
alert("10 X 2 = " + y)
var z = "Hello " + "Good Bye"
alert(z)
divide = 10 / 2
alert (divide)
var subtract = 10 - 2;
alert (subtract)
</SCRIPT><h2>Παραδείγματα μαθηματικών πράξεων</h2></BODY></HTML>
To script λειτουργεί πολύ απλά και ο τρόπος εκτέλεσης των μαθηματικών πράξεων και της ένωσης κειμένων (concatenation) είναι προφανής.
Χρησιμοποιώντας τον τελεστή var δηλώνουμε μεταβλητές (π.χ. numsums, x, subtract). Αν και η δημιουργία της μεταβλητής divide μας δείχνει πως ο var δεν είναι υποχρεωτικός, καλό είναι για λόγους συγκροτημένης δομής του προγράμματος.
Τέλος παρατηρούμε ότι το πρόγραμμα με μια εξαίρεση δεν έχει ελληνικά ερωτηματικά (semicolon) στο τέλος κάθε γραμμής. Αν και είναι προαιρετικά βοηθούν στην καλύτερη ανάγνωση του κώδικα και καλό είναι να χρησιμοποιούνται.
Κατασκευάζουμε ένα 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>
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.
Το μυστικό της γραμμής 3 είναι το: onClick="MsgBox(form.text1.value)". Τα υπόλοιπα αποτελούν standard HTML. To onClick λέει στον browser πως όταν ο χρήστης κάνει κλικ θα πρέπει να εκτελέσει την function MsgBox.
Το form.text1.value σημαίνει πως ο browser θα πρέπει να πάρει από τη φόρμα το object (αντικείμενο) που ονομάζεται text1 και να δώσει στην MsgBox το περιεχόμενό του (δηλαδή αυτό που έγραψε ο χρήστης).
Για να γίνει πιο εμφανής η διαφορά, αν θέλαμε να μάθουμε το μήκος του κειμένου που έγραψε ο χρήστης θα δίναμε: form.text1.length.
Με τον ακόλουθο απλό κώδικα (με κλικ σας πηγαίνει στην αρχική σελίδα της ΕΕΧΙ) μόλις ο χρήστης κάνει κλικ στην παραπομπή θα εμφανιστεί ένα μήνυμα. Όταν κάνει κλικ στο ΟΚ του μηνύματος τότε θα μεταφερθεί στη σχετική σελίδα.
<a href="http://www.eexi.gr" onClick="alert('Hi'); return true;">Click Me</a>
Αν το return ήταν false αντί για true η ενέργεια της παραπομπής δεν θα εκτελούνταν (όλα θα τελείωναν στο οκ).
Στόχος αυτού του παραδείγματος είναι καταλάβουμε την έννοια της μεταβλητής και τις διαφορετικές τιμές που μπορεί να λάβει. Για τον λόγο αυτό θα δημιουργήσουμε μια σελίδα με 4 κουμπιά. Κάθε φορά που θα πατάμε ένα κουμπί θα αλλάζει το φόντο της σελίδας.
Ο κώδικας είναι:
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function changecolor(code) {
document.bgColor=code
}
// - End of JavaScript - -->
</SCRIPT>
</HEAD>
<BODY>
<form>
<input type="button" name="Button1" value="RED" onclick="changecolor('red')">
<input type="button" name="Button2" value="GREEN" onclick="changecolor('green')">
<input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')">
<input type="button" name="Button4" value="WHITE" onclick="changecolor('white')">
</form>
</BODY></HTML>
Εδώ έχουμε μόνο μια συνάρτηση που ονομάζεται changecolor. Η variable ονομάζεται code και της δίνουμε μια τιμή με το onclick="changecolor('κάποιο χρώμα')" δηλαδή όταν ο χρήστης κάνει κλικ θεώρησε ότι code = το χρώμα τάδε και εκτέλεσε την function changecolor(code)
Σε αυτό το παράδειγμα θα δούμε με ποιο τρόπο μπορούμε να δώσουμε στην Javascript όρους λειτουργίας της μορφής: Αν συμβαίνει αυτό κάνε το Α, διαφορετικά κάνε το Β.
Για να γίνει αυτό θα δημιουργήσουμε μια σελίδα με password. Όταν ο χρήστης δώσει το σωστό συνθηματικό τότε θα φορτώνεται μια άλλη σελίδα (φυσικά το παράδειγμα είναι απλοϊκό, όποιος δει τον source κώδικα της σελίδας μπορεί να δει και το password).
<HTML><HEAD><TITLE> If-then statements</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
function password() {
Ret = prompt('Type the word eexi',"");
if(Ret=="eexi") {
location = 'reply.htm';
} else {
alert("Please try again")
}
}
// - End of JavaScript - -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:password()"><IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A>
<H3>Click to enter a password protected document</H3> </BODY></HTML>
Το πρώτο κομμάτι κώδικα που πρέπει να δούμε είναι το:
Ret = prompt('Type the word eexi',"");
Αυτό λέει στον browser να εμφανίσει το prompt με αυτές τις ιδιότητες όταν ο χρήστης κάνει κλικ στην παραπομπή <A HREF="javascript:password()"> που καλεί την function με το όνομα password. Η παραπομπή γίνεται από γραφικό, αλλά θα μπορούσε κάλλιστα να είναι μια απλή παραπομπή κειμένου.
Ενδιαφέρον είναι να παρατηρήσουμε τα εισαγωγικά που ακολουθούν το 'Type the word eexi. Σε αυτά μπορούμε να βάλουμε ένα default password, που θα εμφανίζεται αυτόματα στο prompt π.χ. Ret = prompt('Type the word eexi',"eexi");
if(Ret=="eexi") {
location = 'reply.htm';
} else {
alert("Please try again")
}
Εδώ λέμε στην function πως αν η μεταβλητή Ret έχει την τιμή eexi τότε θα εκτελέσει μια ενέργεια (προσέξτε το διπλό = που σημαίνει ίδιο). Διαφορετικά θα εκτελέσει μια άλλη.
Στην περίπτωση που Ret == eexi φορτώνουμε μια νέα web σελίδα. Διαφορετικά εμφανίζουμε ένα μήνυμα στο alert box.
Εκτός από τον τελεστή == πολύ δημοφιλείς είναι και οι μαθηματικοί τελεστές. Για παράδειγμα μπορούμε να έχουμε μια φόρμα όπου ο χρήστης δίνει την ηλικία του. Αν ονομάζουμε το input box age τότε με ageinput=form.age.value παίρνουμε την ηλικία του χρήστη και με ένα if (age>=18) βγάζουμε ένα μήνυμα σχετικό με την ηλικά του ενήλικα χρήστη.
Με ανάλογους τρόπους συντάσσονται και οι τελεστές AND (γράφεται &&) και OR (γράφεται ||).
if (Age >= 65 && BusPass == false) {
alert("Pensioners - Get your free bus pass now!")
}
if (Age >= 65 || BusPass == false) {
alert("Pensioners - Get your free bus pass now!")
}
var currenpage = findpathbyurl(location.href);
Η location.href environment variable μας δίνει το URL της τρέχουσας σελίδας
var site2patt = new RegExp("Reviews","i");
var site2result = site2patt.exec(currenpage);
Ελέγχουμε αν το URL περιέχει το string "Reviews" (i = case insensitive). Αν το string υπάρχει τοποθετείται (στη μορφή που βρίσκεται (π.χ. μπορεί να είναι REVIEWS) στην site2result.
Σε αυτό το παράδειγμα θα βάλουμε μέσα σε μια υπορουτίνα την παραπάνω ενέργεια.
var currentpage = findpathbyurl(location.href);
function findpathbyurl(lochref) {
var site2patt = new RegExp("Reviews","i");
var site2result = site2patt.exec(lochref);
return(site2result);
}
Τώρα η currentpage περιέχει το περιεχόμενο της site2result.
Λειτουργεί πρακτικά με τον ίδιο τρόπο όπως και παραπάνω:
<script src="findpath.js">
</script>
<script type="text/javascript">
<!-- var currentxtpage = findpathbyurl(location.href);
//--></script>
Το περιεχόμενο του findpath.js είναι:
function findpathbyurl(lochref) {
var myxtpage = lochref;
return myxtpage;}
Στο παράδειγμα η subroutine δεν κάνει τίποτε. Απλώς παίρνει μια τιμή και τη δίνει πίσω. Μπορείτε όμως να κάνετε ό,τι θέλετε με αυτήν.
Μερικές φορές θέλω τις μεταβλητές μου σε μια σειρά διότι έχουν κοινά χαρακτηριστικά. Για παράδειγμα μπορεί να θέλω τις εργάσιμες ημέρες της εβδομάδας. Αυτές έχουν πάντα μια συγκεκριμένη σειρά (πρώτα η Δευτέρα μετά η Τρίτη κ.ο.κ.).
Για να τις βάλω όλες μαζί σε μια μεταβλητή θα χρησιμοποιήσω την ακόλουθη σύνταξη:
var weekdaysarray = ["Δευτέρα","Τρίτη","Τετάρτη","Πέμπτη","Παρασκευή"];
Εναλλακτικά μπορώ να δηλώσω:
var weekenddays = new Array(); // Δεν ορίζω μήκος για την Array.
ή var weekenddays = new Array(2); // Μήκος για την Array = 2 στοιχεία (το 0 και το 1).
weekenddays[0] = "Σάββατο";
weekenddays[1] = "Κυριακή";
Εναλλακτικά:var specialstrings = new Array();
specialstrings.push('Politiki.htm');
Δημιουργήσαμε την Array specialstrings και της δώσαμε την τιμή Politiki.htm στη θέση 0 (specialstrings[0]). Θα μπορούσα να δώσω την τιμή και ως: specialstrings[0] = Politiki.htm';
Κοιτάω όλες τις τιμές μιας array. Οι ζυγές έχουν patterns και οι μονές έχουν ονόματα κατηγοριών. Αν βρω ένα pattern τότε το όνομα της κατηγορίας επιλέγεται, ενημερώνεται η σχετική variable και η επανάληψη σταματάει (αυξάνω το i πάνω από τον αριθμό των τιμών της array).
for (var i=0;i<specialstrings.length;i++) {
// Koitao oles tis times ths specialstrings array.
var genpattern = new RegExp(specialstrings[i],"i");
var genresult = genpattern.exec(lochref);
// Elegxo to url an moy kanei to trexon pattern.
if (genresult == null) {
i++;
}
// An den bro zygh timh poy moy kanei pao to i ena parapano oste na mhn elegkso mones times poy den me endiaferoyn edo.
else {
i++;
result4 = specialstrings[i];
i = specialstrings.length + '1';
}
// An bro pattern poy moy kanei bazo to i sto telos kai stamatao na koitao.
}
}
Η Javascript είναι ιδανική για τον έλεγχο των στοιχείων που μας δίνει όποιος χρήστης συμπληρώνει τη φόρμα μας. Το πλεονέκτημα του ελέγχου του form input με javascript είναι πως δεν χρειάζεται να πειράξουμε το action script που κατά πάσα πιθανότητα δεν έχει φτιαχτεί από εμάς και συνεπώς είναι δυσκολότερο να τροποποιηθεί.
Έλεγχος πως ένα πεδίο συμπληρώθηκε. Ο κώδικας για μια αυτόνομη σελίδα είναι:
<HTML><HEAD><TITLE>Δοκιμές </TITLE>
<script type='text/javascript'>
function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return true;
}
return false;
}
</script></head>
<body><form>
Required Field: <input type='text' id='req1'/>
<input type='button'
onclick="isEmpty(document.getElementById('req1'), 'Please Enter a Value')"
value='Check Field' />
</form></BODY></HTML>
Διαβάζοντας από το τέλος βλέπουμε πως όταν κάνουμε κλικ (onclick) καλείται η function isEmpty και τις δίδονται δύο μεταβλητές. Η document.getElementById('req1'), δηλαδή το περιεχόμενο του input box που έχει name req1 και το μήνυμα «Please Enter a Value».
Βλέποντας τώρα ψηλότερα στην function isEmpty ελέγχεται το μέγεθος του κειμένου που υπήρχε στο req1 (είναι η variable elem και η εργασία απεικονίζεται ως: elem.value.length). Αν πράγματι δεν έχει μήκος τότε εμφανίζεται το alert μήνυμα (που φυλάσσεται στη μεταβλητή helperMsg).
Το elem.focus() μεταφέρει τον δρομέα μέσα στο input πεδίο ώστε ο χρήστης να μη χρειάζεται να μετακινηθεί στο πεδίο για να πληκτρολογήσει το input του.
Το return true; δηλώνει πως μετά το κλικ στο ΟΚ του χρήστη θα εκτελεστεί ο υπόλοιπος κώδικας (ο δρομέας θα πάει στο input πεδίο που δεν έχει συμπληρωθεί).
Χρήσιμο σε περίπτωση που θέλουμε να εξασφαλίσουμε πως ο χρήστης έδωσε με τον σωστό τρόπο έναν ταχυδρομικό κώδικα, έναν αριθμό πιστωτικής κάρτας ή ένα τηλέφωνο. Ο κώδικας είναι:
<HTML><HEAD><TITLE>Δοκιμές</TITLE>
<script type='text/javascript'>
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script></HEAD><BODY>
<form>
Numbers Only: <input type='text' id='numbers'/>
<input type='button'
onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')"
value='Check Field' />
</form></BODY></HTML>
Η φόρμα είναι δομημένη ακριβώς όπως και στο προηγούμενο παράδειγμα. Αλλάζει μόνο το name που τώρα είναι numbers (φυσικά θα μπορούσε να είναι οτιδήποτε) και φυσικά το μήνυμα προς τον χρήστη.
Η function παίρνει το input του χρήστη και το μήνυμα λάθους. Δημιουργεί τη νέα μεταβλητή numericExpression που θα χρησιμοποιηθεί για σύγκριση με την τιμή που έδωσε στο input ο χρήστης. Το var δηλώνει τη δημιουργία της (είναι σαν να λέμε στη javascript δημιούργησε την numericExpression). Η νέα μεταβλητή από την αρχή (^) μέχρι το τέλος ($) της πρέπει να περιέχει μόνο αριθμούς ([0-9]) ανεξάρτητα από το πόσοι είναι αυτοί (+). Αυτός ο τρόπος σύγκρισης strings (ακολουθίες χαρακτήρων) ονομάζεται Regular Expression.
var numericExpression = /^[0-9]+$/;
Αν τώρα οι 2 μεταβλητές ταιριάζουν: if(elem.value.match(numericExpression)) τότε είμαστε οκ. Διαφορετικά εμφανίζεται το μήνυμα λάθους.
Λειτουργεί με ακριβώς τον ίδιο τρόπο με τον έλεγχο για αριθμούς. Η μόνη διαφορά βρίσκεται στη Regular Expression που τώρα είναι /^[a-zA-Z]+$/ δηλαδή αντί για τους αριθμούς [0-9] τώρα έχουμε όλα τα πεζά (μικρά) και κεφαλαία γράμματα από το πρώτο έως το τελευταίο δηλαδή: [a-zA-Z] Δυστυχώς αυτή η Regular Expression αναφέρεται μόνο σε λατινικούς χαρακτήρες.
Αν δεν θέλουμε το μήκος του πεδίου να ξεπερνά ένα συγκεκριμένο μέγεθος (π.χ. για να μη μας δώσουν ταχυδρομικό κώδικα με περισσότερα από 5 νούμερα) χρησιμοποιούμε τον ακόλουθο κώδικα:
<HTML><HEAD><TITLE>Δοκιμές</TITLE></HEAD></BODY>
<script type='text/javascript'>
function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}
</script>
<form>
Username(6-8 characters): <input type='text' id='restrict'/>
<input type='button'
onclick="lengthRestriction(document.getElementById('restrict'), 6, 8)"
value='Check Field' />
</form></BODY></HTML>
Εδώ η function ονομάζεται lengthRestriction και της δίνουμε 3 μεταβλητές (variables). Το input της φόρμας, τον μέγιστο και τον ελάχιστο αριθμό χαρακτήρων.
Εδώ η if έχει δύο μέρη. Ελέγχει αν η μεταβλητή uInput που περιέχει ό,τι πληκτρολόγησε ο χρήστης έχει μέγεθος >= και ταυτόχρονα (&&) =< από τη μέγιστη και την ελάχιστη τιμή.
Προσέξτε ότι:
Η if θα μπορούσε να διατυπωθεί και ως: if(elem.value.length >= min && elem.value.length <= max). Δημιουργήσαμε την uInput για να βλέπουμε πιο καθαρά τι κάνουμε.
Για να εμφανίσουμε σε ένα text box τα δεδομένα (περιεχόμενο) μιας μεταβλητής τα περικλείουμε με +.
Για να υποχρεώσουμε έναν χρήστη να επιλέξει οπωσδήποτε μια τιμή από ένα πεδίο select θα χρησιμοποιήσουμε κάτι αντίστοιχο με το ακόλουθο παράδειγμα:
<HTML><HEAD><TITLE>Δοκιμές</TITLE></HEAD><BODY>
<script type='text/javascript'>
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
</script>
<form>
Selection: <select id='selection'>
<option>Please Choose</option>
<option>Αθήνα</option>
<option>Θεσσαλονίκη</option>
<option>Πάτρα</option>
</select>
<input type='button'
onclick="madeSelection(document.getElementById('selection'), 'Please Choose Something')"
value='Check Field' />
</form></BODY></HTML>
Εδώ η λειτουργία είναι πολύ απλή. Αν το input έχει το περιεχόμενο Please Choose τότε ο χρήστης δεν επέλεξε κάτι και τον καλούμε να το πράξει.
Για να σιγουρευτούμε ότι οι χρήστες μας έχουν δώσει μια σωστή email διεύθυνση θα χρησιμοποιήσουμε τον ακόλουθο κώδικα μέσω του οποίου ελέγχουμε ότι μας πληκτρολόγησαν κάτι που περιέχει το @, κάτι αριστερά του, κάτι δεξιά του, μια τελεία, ένα top level domain μετά την τελεία.
Προσοχή: Με τον κώδικα αυτό επιβεβαιώνουμε πως ο χρήσης πληκτρολόγησε κάτι που μοιάζει με email διεύθυνση. Δεν ελέγχουμε αν η συγκεκριμένη διεύθυνση όντως υπάρχει (για παράδειγμα θα κάνει δεκτό ως email: το aa@ee.kkk).
Ο κώδικας είναι:
<HTML><HEAD><TITLE>Δοκιμές</TITLE></HEAD><BODY>
<script TYPE="text/javascript">
function emailValidator1(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
<form>
Email: <INPUT TYPE="text" ID="emailer"/>
<INPUT TYPE="button" ONCLICK="emailValidator1(document.getElementById('emailer'), 'Not a Valid Email')" VALUE="Check Field"/> </form></BODY></HTML>
Το μυστικό εδώ είναι να συνδιάσουμε τα παραπάνω πεδία προσθέτοντας μια επιπλέον παράμετρο (την formValidator) ώστε να ελέγχει όλα τα πεδία με τη σειρά που είναι τοποθετημένα στη φόρμα.
<head><script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var addr = document.getElementById('addr');
var zip = document.getElementById('zip');
var state = document.getElementById('state');
var username = document.getElementById('username');
var email = document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your name")){
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
if(isNumeric(zip, "Please enter a valid zip code")){
if(madeSelection(state, "Please Choose a State")){
if(lengthRestriction(username, 6, 8)){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
return false;
}function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return true;
}
return false;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script></head><body><form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
State: <select id='state'>
<option>Please Choose</option>
<option>AL</option>
<option>CA</option>
<option>TX</option>
<option>WI</option>
</select><br />
Username(6-8 characters): <input type='text' id='username' /><br />
Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' />
</form></body></html>