Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #10η: Javascript: Συμβάντα και Χειριστές Συμβάντων, Αντικείμενα (Window, Document, Math, Date), Χειρισμός συμβολοσειρών, Επικύρωση HTML φορμών, Σημειώσεις επανάληψης για την εξέταση Χειμερινό εξάμηνο
To αντικείμενο (object) document
Αντικείμενα στη Javascript Ένα αντικείμενο (object) σε μια γλώσσα προγραμματισμού είναι μια αφηρημένη οντότητα που βοηθά να αναπαραστήσουμε κάτι πραγματικό Τα αντικείμενα αποτελούν μια ομαδοποίηση που περιλαμβάνει: Ιδιότητες (properties), δηλαδή μεταβλητές των οποίων οι τιμές μπορούν να διαβαστούν ή να μεταβληθούν κατά την εκτέλεση της εφαρμογής Μεθόδους (methods), δηλαδή συναρτήσεις που μπορούν να κληθούν και να εκτελεστούν κατά την εκτέλεση της εφαρμογής Η πρόσβαση στις ιδιότητες και μεθόδους ενός αντικειμένου επιτυγχάνεται με χρήση του τελεστή dot (.), δηλαδή: <όνομα αντικειμένου>.<όνομα ιδιότητας> = <νέα τιμή> <όνομα αντικειμένου>.<όνομα μεθόδου>(ορίσματα συνάρτησης)
To αντικείμενο document της Javascript To αντικείμενο document (έγγραφο) βοηθάει να συγκεντρώσουμε πληροφορίες για το έγγραφο που παρουσιάζεται στο παράθυρο του browser Μας παρέχει πρόσβαση σε έναν αριθμό ιδιοτήτων και μεθόδων οι οποίες μπορούν να επηρεάσουν το έγγραφο με διάφορους τρόπους Έχουμε ήδη χρησιμοποιήσει τη μέθοδο write() του αντικειμένου document που επιτρέπει να εμφανίσουμε κάποιο κείμενο σε ένα HTML έγγραφο, π.χ. document.write( Hello World!!! )
Ιδιότητες του αντικειμένου document Ιδιότητα bgcolor/ fgcolor forms formname images linkcolor/ alinkcolor / vlinkcolor title lastmodified Περιγραφή Επιστρέφει τη δεκαεξαδική τιμή του χρώματος φόντου/κειμένου του εγγράφου Ένας πίνακας (array) που περιλαμβάνει όλες τις φόρμες του εγγράφου εν είναι ιδιότητα αυτή καθεαυτή, αλλά δημιουργεί μια νέα ιδιότητα για κάθε νέα φόρμα του εγγράφου Ένας πίνακας (array) που περιλαμβάνει όλες τις εικόνες του εγγράφου H δεκαεξαδική τιμή του χρώματος των συνδέσμων / ενεργού συνδέσμου / συνδέσμων που έχει επισκεφτεί οχρήστης Επιστρέφει το κείμενο τίτλου του εγγράφου (tag TITLE) H ημερομηνία τελευταίας τροποποίησης του εγγράφου
Αντικείμενο document ιδιότητα bgcolor <script language="javascript"> function change_color (newcolor) { document.bgcolor = newcolor; } </script> <input type="button" value="light Blue" onclick="change_color('lightblue')"> <input type="button" value="orange" onclick="change_color('orange')"> <input type="button" value="yellow" onclick="change_color('yellow')"> <input type="button" value="green" onclick="change_color('green')">
Αντικείμενο document ιδιότητες bgcolor/fgcolor <H1>DOCUMENT TEXT</H1> <p>foreground color: <select name="fg" onchange="change_fg();"> <option value="black">black</option>. </select> <p>background Color: <select name="bg" onchange="change_bg();"> <option value="black">black</option>. </select> <script language="javascript"> document.write("<h2>last modified: " + document.lastmodified +"</h2>"); </script>
Αντικείμενο document ιδιότητες bgcolor/fgcolor <script language="javascript"> function change_fg() { document.fgcolor = fg.value; } function change_bg() { document.bgcolor = bg.value; } </script> Εκτέλεση
Μέθοδοι του αντικειμένου document Μέθοδος open() close() write() writeln() Περιγραφή Ανοίγει ένα νέο έγγραφο, του οποίου τα περιεχόμενα μπορείτε να δημιουργήσετε με τις εντολές write() και writeln() Κλείνει ένα έγγραφο που έχετε προηγούμενα ανοίξει με την εντολή open() Γράφει μια συμβολοσειρά (κείμενο) σε ένα HTML έγγραφο Γράφει μια συμβολοσειρά (κείμενο) σε ένα HTML έγγραφο τερματίζοντας τη γραμμή με τον χαρακτήρα νέας γραμμής (αλλαγή γραμμής)
Αντικείμενο document μέθοδοι open(), close(), write(), writeln() <script language="javascript"> function new_page() { document.open(); document.write("<h2>welcome!!!</h2>"); document.write("hello " + name.value + " and welcome to my page!"); document.close(); } Insert your name: <input name="name" type="text"> <input type="submit" value="open new page" onclick="new_page()">
To αντικείμενο (object) window
To αντικείμενο window της Javascript To αντικείμενο window (παράθυρο) δημιουργείται για κάθε παράθυρο browser που εμφανίζεται στην οθόνη Το παράθυρο μπορεί να είναι κύριο παράθυρο της εφαρμογής, ένα παράθυρο με μια ομάδα πλαισίων ή ένα μεμονωμένο πλαίσιο ή ένα νέο παράθυρο που δημιουργήθηκε από κώδικα Javascript Το αντικείμενο window επιτρέπει την εμφάνιση μηνυμάτων, εισαγωγή πληροφοριών και επιβεβαίωση ενεργειών από το χρήστη, άνοιγμα νέων παραθύρων, κλπ Έχουμε ήδη χρησιμοποιήσει τις μεθόδους alert() και prompt() του αντικειμένου window που επιτρέπει να εμφανίσουμε ένα μήνυμα ή να ζητήσουμε από το χρήστη να δώσει κάποια είσοδο, π.χ. window.alert( Hello World!!! ) var input = window.prompt( Insert some text, );
Ιδιότητες του αντικειμένου window Ιδιότητα status location closed frames name Περιγραφή Επιτρέπει την εμφάνιση μηνύματος στη γραμμή καταστάσεων (status bar) του παραθύρου Ορίζει την τρέχουσα διεύθυνση (URL) ενός παραθύρου. Μπορεί να χρησιμοποιηθεί για να μεταβούμε σε άλλη διεύθυνση Υποδεικνύει αν ένα παράθυρο είναι κλειστό ή όχι Ένας πίνακας (array) που περιλαμβάνει όλα τα πλαίσια ενός παραθύρου Επιτρέπει τον καθορισμό ενός ονόματος για ένα παράθυρο Άλλες ιδιότητες: defaultstatus, length, opener, parent, self, top
Αντικείμενο window ιδιότητες status/location <input type="button" onmouseover="window.status = 'Click the button to change location';" onmouseout="window.status = '';" onclick="window.location = 'http://www.aegean.gr/';" value="go to..."> Εκτέλεση
Μέθοδοι του αντικειμένου window (I) Μέθοδος alert() prompt() confirm() find() open() Περιγραφή Εμφανίζει ένα μήνυμα στο χρήστη (συνήθως κάποια «προειδοποίηση») Εμφανίζει ένα παράθυρο μέσω του οποίου ο χρήστης εισάγει κάποια είσοδο Εμφανίζει ένα μήνυμα επιβεβαίωσης (ο χρήστης πρέπει να πατήσει ΟΚ ή Cancel γιαναπροχωρήσει) Εκτελεί τη λειτουργία Find του browser που χρησιμοποιείται για να αναζητηθεί κάποιο κείμενο στη σελίδα Ανοίγει ένα νέο παράθυρο του browser close() Κλείνει ένα νέο παράθυρο του browser
Μέθοδοι του αντικειμένου window (IΙ) Μέθοδος setinterval() clearinterval() settimeout() cleartimeout() Περιγραφή Καλεί μια συνάρτηση σε τακτά χρονικά διαστήματα Ακυρώνει μια κλήση που έγινε μέσω της μεθόδου setinterval() Καλεί μια συνάρτηση μια φορά, αφότου περάσει κάποιο συγκεκριμένο χρονικό διάστημα Ακυρώνει μια κλήση που έγινε μέσω της μεθόδου settimeout() Άλλες μέθοδοι: print(), focus(), blur(), moveto(), moveby(),
Αντικείμενο window μέθοδος confirm() <script language="javascript"> var ok = window.confirm("ονομάζεσαι Γιώργος;"); if (ok) window.alert('γεια σου Γιώργο!'); else window.alert(' εν ξέρω πως ονομάζεσαι...'); </script>
Αντικείμενο window μέθοδοι open(), close(), confirm() - Άσκηση Γράψτε ένα σενάριο Javascript ώστε όταν στην παρακάτω φόρμα ο χρήστης κάνει κλικ στο πάνω πλήκτρο να μεταβαίνει στην κεντρική σελίδα του Παν/μίου Αιγαίου (όταν το checkbox New window είναι τσεκαρισμένο, ησελίδαθα ανοίγει σε νέο παράθυρο, διαφορετικά στο ίδιο) Όταν ο χρήστης κάνει κλικ στο κάτω πλήκτρο, θα κλείνει το παράθυρο, αφού πρώτα ο χρήστης απαντήσει θετικά στην ερώτηση επιβεβαίωσης new_window Εκτέλεση
Αντικείμενο window μέθοδοι open(), close(), confirm() - Λύση function visit() { if (new_window.checked) window.open('http://www.aegean.gr/', "cool", "width=600, height=400, toolbar=no, status=yes, resizable=no"); else window.location = 'http://www.aegean.gr/'; } function close_window() { var is_sure = window.confirm("sure you want to close the window?"); if (is_sure) { window.close(); } } </script>
Αντικείμενο window μέθοδοι setinterval()/clearinterval() <body onload="iritation();"> <h2>click the button to stop the alert: </h2> <input type="button" value="stop!..." onclick="stop_iritation();"> </body> Εκτέλεση
Αντικείμενο window μέθοδοι setinterval()/clearinterval() <script language="javascript"> var madness; function iritation() { madness = window.setinterval("show_message()", 2000); } function show_message() { window.alert ('Running for ever!!!'); } function stop_iritation() { window.clearinterval(madness); } </script> Ακυρώνεται η περιοδική κλήση της μεθόδου show_message H μέθοδος show_message θα καλείται κάθε 2 sec H κλήση της μεθόδου εκχωρείται σε μια μεταβλητή για μελλοντική αναφορά
Αντικείμενο window μέθοδοι setinterval()/clearinterval() - Άσκηση Γράψτε ένα σενάριο Javascript ώστε όταν στην παρακάτω φόρμα ο χρήστης κάνει κλικ στο πλήκτρο Start να εμφανίζεται στο textbox η τιμή ενός μετρητή που θα αρχίζει από 100 και θα μειώνεται κάθε δευτερόλεπτο κατά ένα, μέχρι να φτάσει στο 0 Όταν ο χρήστης κάνει κλικ στο πλήκτρο Pause o μετρητής θα παγώνει (η αντίστροφη μέτρηση θα αρχίζει και πάλι όταν ο χρήστης ξανακάνει κλικ στο Start ) number Εκτέλεση
Αντικείμενο window μέθοδοι setinterval()/clearinterval() Λύση <script language="javascript"> var counter = 100; var count; function start_counter() { count = window.setinterval("count_down()", 1000); } function count_down() { if (counter >= 0) number.value = counter--; } function pause() { window.clearinterval(count); } </script>
Αντικείμενο window μέθοδοι settimeout()/cleartimeout() <body onload="iritation();"> <form name= myform"> <Click the button within 5 sec to avoid the alert: </h2> <input type="button" value="stop!..." onclick="stop_iritation();"> </form> Εκτέλεση
Αντικείμενο window μέθοδοι settimeout()/cleartimeout() <script language="javascript"> var madness; function iritation() { madness = window.settimeout("show_message()", 5000); } function show_message() { window.alert ('Welcome to my home page!!!'); } function stop_iritation() { window.cleartimeout(madness); } </script> Ακυρώνεται η μοναδικη κλήση της μεθόδου show_message H μέθοδος show_message θα κληθεί μία μόνο φορά, μετά από 5 sec H κλήση της μεθόδου εκχωρείται σε μια μεταβλητή για μελλοντική αναφορά
Αντικείμενο window μέθοδοι settimeout()/cleartimeout() - Άσκηση Τροποποιήστε την προηγούμενη άσκηση (με τις μεθόδους setinerval()/clearinterval()) ώστε να επιτύχετε το ίδιο ακριβώς αποτέλεσμα με τις μεθόδους settimeout()/cleartimeout()
Αντικείμενο window μέθοδοι settimeout()/cleartimeout() Λύση <script language="javascript"> var counter = 100; Ηπρώτηκλήσητης var count; μεθόου count_down function start_counter() { (μετά από 1 sec) count = window.settimeout("count_down()", 1000); } function count_down() { if (counter > 0) { number.value = counter--; count = window.settimeout("count_down()", 1000); } Η μέθοδος count_down } καλεί τον εαυτό της function pause() { (μετά από 1 sec) window.cleartimeout(count); }</script>
To αντικείμενο (object) Math
To αντικείμενο Math To αντικείμενο Math διαθέτει ιδιότητες και μεθόδους που χρησιμοποιούνται για μαθηματικούς υπολογισμούς, π.χ. για να υπολογίσουμε την τετραγωνική ρίζα ενός αριθμού ή ένα εκθετικό Οι ιδιότητες του αντικειμένου Math αποτελούν κάποιες προκαθορισμένες μαθηματικές τιμές, π.χ. document.write (Math.E) // Τυπώνει τη σταθερά Euler ( 2.7118 ) document.write (Math.PI); // Τυπώνει την τιμή του π ( 3.14159 ) document.write (Math.SQRT2); // Τυπώνει την ( 1.414 )... 2
Μέθοδοι του αντικειμένου Math Μέθοδος abs(x) exp(x) log(x) Περιγραφή Υπολογίζει την απόλυτη τιμή του x Υπολογίζει το E^x Υπολογίζει το φυσικό λογάριθμο του x sqrt(x) round(x) floor(x) ceil(x) max(x, y) min(x, y) pow(x, y) Υπολογίζει την τετραγωνική ρίζα του x Επιστρέφει τον ακέραιο πλησιέστερο στον x Επιστρέφει τον αμέσως μικρότερο ακέραιο από τον x Επιστρέφει τον αμέσως μεγαλύτερο ακέραιο από τον x Επιστρέφει τον μεγαλύτερο αριθμό από τους x, y Επιστρέφει τον μικρότερο αριθμό από τους x, y Υπολογίζει το x^y random() Επιστρέφει έναν τυχαίο αριθμό μεταξύ 0 και 1 Άλλες μέθοδοι (τριγωνομετρία): cos(), sin(), tan(), acos(), asin(), atan()
Αντικείμενο Math - Ασκήσεις Ένα script που παράγει έναν τυχαίο αριθμό 0 < x < 15 document.write (15*Math.random()); Ένα script που παράγει έναν τυχαίο ακέραιο 10 < x < 20 document.write (10 + Math.round(10*Math.random())); Ένα script που υπολογίζει τον μικρότερο εκ των 3, 4 και 12 Math.min(Math.min(3, 4), 12)) Ένα script που υπολογίζει την τιμή του 10 υψωμένου στην δύναμη του μεγαλύτερου εκ των -1 και 3 Math.pow(10, Math.max(-1, 3))
To αντικείμενο (object) Date
To αντικείμενο Date To αντικείμενο Date δίνει τη δυνατότητα να χειριστούμε τιμές ημερομηνίας/ώρας ή να ανακτήσουμε συγκεκριμένες τιμές που θα χρησιμοποιήσουμε αργότερα στα script μας Μπορούμε, για παράδειγμα, να ανακτήσουμε την τρέχουσα ημερομηνία του συστήματος όπου εκτελείται το script, να υπολογίσουμε πόσος χρόνος έχει παρέλθει από μια συγκεκριμένη ώρα ως την τρέχουσα ώρα, χρονικές διαφορές μεταξύ δύο ημερομηνιών, να μορφοποιήσουμε την εμφάνιση της ημερομηνίας/ώρας με βάση τις προτιμήσεις μας, κλπ Η τρέχουσα ώρα του συστήματος ανακτάται εύκολα: var d = new Date(); // Αποθηκεύουμε την τρέχουσα ημ/νία στη μεταβλητή d document.write (d); // ΘατυπώσεικάτισανSun Jan 9 15:43:04 UTC+0200 2005
Μέθοδοι του αντικειμένου Date (Ι) Μέθοδος getday()/ getdate()/ getmonth()/ getfullyear() setdate()/ setmonth()/ setfullyear() gettime() Περιγραφή Επιστρέφει την ημέρα της εβδομάδας σε αριθμό (0-6) / ημέρα του μήνα/ μήνα (0-11) / έτος για μια συγκεκριμένη ημερομηνία (τετραψήφιος) Ορίζει την ημέρα του μήνα/ μήνα / έτος μιας ημερομηνίας Επιστρέφει τα msec που έχουν περάσει από την 1/1/1970 (χρησιμοποιείται για να υπολογίσουμε διαφορές μεταξύ ημερομηνιών)
Μέθοδοι του αντικειμένου Date (ΙΙ) Μέθοδος gethours()/ getminutes()/ getseconds () sethours()/ setminutes()/ setseconds () tolocalestring() Περιγραφή Επιστρέφει την ώρα (0-23) / λεπτά (0-59) / δευτερόλεπτα (0-59) για μια συγκεκριμένη ημερομηνία Ορίζει την ώρα / λεπτά / δευτερόλεπτα για μια συγκεκριμένη ημερομηνία Επιστρέφει μια συμβολοσειρά με την ημερομηνία μορφοποιημένη με βάση τις τοπικές ρυθμίσεις που ισχύουν στο σύστημα όπου εκτελείται το script
Αντικείμενο Date - Άσκηση Ποιο θα είναι το αποτέλεσμα της εκτέλεσης του παρακάτω σεναρίου; <script language="javascript"> var d = new Date() document.write("the date is: " + d.getdate() + "/" + (d.getmonth() + 1) + "/" + d.getfullyear() +"<br>") document.write("the time is: " + d.gethours() + ":" + d.getminutes() + ":" + d.getseconds() +"<br>") var weekday = new Array("Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday") document.write("today is " + weekday[d.getday()] + "<br>") d.setfullyear("1990") document.write(d +"<br>") </script> Αλλάζει το έτος της ημ/νίας d σε 1990 Επιστρέφει 0 αν είναι Κυριακή, 1 αν είναι ευτέρα, κοκ
Αντικείμενο Date - Λύση
Αντικείμενα Date-window: Άσκηση Γράψτε ένα script το οποίο θα γράφει σε ένα textbox την τρέχουσα ώρα (η ώρα θα ανανεώνεται κάθε 1 sec) timer
Αντικείμενα Date-window: Λύση <script language="javascript"> var count; Εκτέλεση function start_clock() { count = window.setinterval("clock()", 1000); } function clock() { var d = new Date(); timer.value = d.gethours() + ":" + d.getminutes() + ":" + d.getseconds(); } function stop_clock() { window.clearinterval(count); }</script> <body onload="start_clock();" onunload="stop_clock();">. </body>
To αντικείμενο (object) String (χειρισμός αλφαριθμητικών)
To αντικείμενο String To αντικείμενο String διαθέτει ιδιότητες και μεθόδους για το χειρισμό αλφαριθμητικών (συμβολοσειρών) Μπορούμε, για παράδειγμα, να υπολογίσουμε το μήκος μιας συμβολοσειράς (από πόσους χαρακτήρες αποτελείται), να συγκρίνουμε συμβολοσειρές, να αναζητήσουμε συγκεκριμένους χαρακτήρες σε συμβολοσειρές, κλπ Μέχρι τώρα έχουμε δημιουργήσει συμβολοσειρές, εκχωρώντας τις σε μεταβλητές H σημαντικότερη ιδιότητα του αντικειμένου String είναι η length που μας επιτρέπει να υπολογίσουμε το μήκος μιας συμβολοσειράς, π.χ.: var str = Hello World ; document.write(str.length) // Θα τυπώσει 11 (συμπεριλαμβάνεται και το κενό)
Μέθοδοι του αντικειμένου String (Ι) Μέθοδος concat() slice() charat() indexof() lastindexof() substr() substring() Περιγραφή Συνενώνει δύο ή περισσότερα αλφαριθμητικά και επιστρέφει το αποτέλεσμα ως ένα νέο αλφαριθμητικό Επιστρέφει ένα συγκεκριμένο τμήμα από ένα αλφαρ/ικό Επιστρέφει το χαρακτήρα που βρίσκεται σε μια συγκεκριμένη θέση ενός αλφαρ/ικού Αναζητά ένα χαρακτήρα σε ένα αλφαρ/ικό. Επιστρέφει τη θέση της πρώτης εμφάνισης αν βρεθεί, διαφορετικά -1 Αναζητά ένα χαρακτήρα σε ένα αλφαρ/ικό. Επιστρέφει τη θέση της τελευταίας εμφάνισης αν βρεθεί,διαφορετικά -1 Επιστρέφει ένα τμήμα ενός αλφαρ/κού που ξεκινά από μία θέση και τελειώνει μετά από συγκεκριμένο αριθμό χαρακτήρων Επιστρέφει ένα τμήμα ενός αλφαρ/κού που ξεκινά και τελειώνει σε συγκεκριμένες θέσεις
Μέθοδοι του αντικειμένου String (ΙΙ) Μέθοδος split() bold() / italics() / strike() sub() / sup() tolowercase() touppercase() Περιγραφή ιαχωρίζει ένα αλφαρ/ικό σε έναν πίνακα (array) αλφαρ/κών, με βάση ένα διαχωριστικό χαρακτήρα που περνιέται σαν παράμετρος Περικλείει ένα αλφα/ικό ανάμεσα σε στο ζεύγος ετικετών <b> και </b> / <i> και </i> / <strike> και </strike> Περικλείει ένα αλφα/ικό ανάμεσα σε στο ζεύγος ετικετών <sub> και </sub> / <sup> και </sup> Μετατρέπει ένα αλφα/κό σε άλλο με όλο πεζά γράμματα και επιστρέφει το αποτέλεσμα Μετατρέπει ένα αλφα/κό σε άλλο με όλο κεφαλαία γράμματα και επιστρέφει το αποτέλεσμα
Αντικείμενο String: Άσκηση Ποιο θα είναι το αποτέλεσμα της εκτέλεσης του παρακάτω σεναρίου; <script language="javascript"> var str="this Is The Test Text!"; document.write(str + " - Length: <b>" + str.length + "</b><br>") var search_str = window.prompt("search for string", "") var pos = str.indexof(search_str) if (pos == -1) document.write("string " + search_str + " not found <br>") else document.write("string " + search_str + " found at position <b>" + pos + "</b><br>") document.write("string " + str + " in small letters: <b>" + str.tolowercase() + "</b><br>") document.write("string " + str + " in capitals: <b>" + str.touppercase() + "</b><br>") document.write(str.bold().italics() + "<br>") </script>
Αντικείμενο String: Λύση
Άσκηση για το σπίτι: Επικύρωση φόρμας Μια από τις συνηθέστερες εφαρμογές Javascript είναι και η επικύρωση HTML φορμών, δηλαδή ο έλεγχος ότι όλα τα πεδία μιας φόρμας έχουν συμπληρωθεί σωστά Σχεδιάστε την παρακάτω φόρμα και γράψτε σενάριο που να κάνει τους παρακάτω ελέγχους: Όλαταπεδίαέχουνσυμπληρωθεί (με τουλάχιστον ένα χαρακτήρα) Τοπεδίοτηλέφωνοπεριέχειμόνο αριθμητικά ψηφία Το πεδίο email έχουν συμπληρωθεί τουλάχιστον οι χαρακτήρες παπάκι (@) και τελεία (.)