Εργαστήριο 7 : Συμβάντα και το keyword this
Γενική βοήθεια: http://www.w3schools.com/jsref/dom_obj_event.asp
Παραδείγματα για Συμβάντα: https://www.w3schools.com/js/js_events_examples.asp
Άσκηση 1 - onchange
Εκμεταλλευτείτε το συμβάν onchange για να φτιάξετε μία σελίδα με ένα text box όπου αν ο χρήστης πληκτρολογήσει αριθμό να γίνεται κίτρινο αν πληκτρολογήσει αλφαριθμητικό (String) να γίνεται πράσινο και αν το αφήσει κενό να γίνεται κόκκινο.
Σχετική βοήθεια:
http://www.w3schools.com/jsref/dom_obj_style.asp
https://www.w3resource.com/javascript/operators/typeof.php
https://www.w3schools.com/jsref/jsref_isnan.asp
Άσκηση 2 - onkeydown, onkeypress, onkeyup
Διαβάστε εδώ για τα συμβάντα onkeydown, onkeypress, και onkeyup.
Φτιάξτε ένα πρόγραμμα που θα περιέχει δύο text boxes. Καθώς ο χρήστης θα πληκτρολογεί στο πρώτο text box θα ενημερώνεται ταυτόχρονα το δεύτερο text box ώστε να περιέχει την τιμή του πρώτου σε κεφαλαίους χαρακτήρες.
Σχετική βοήθεια (Αντικείμενο String):
http://www.w3schools.com/jsref/jsref_obj_string.asp
Άσκηση 3 - onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
Διαβάστε εδώ για τα συμβάντα onmousedown, onmousemove, onmouseout, onmouseover και onmouseup.
Δημιουργήστε ένα κώδικα που να χρησιμοποιεί κατάλληλα κάποια από αυτά τα συμβάντα για να φτιάξετε ένα rollover image διαστάσεων 100 Χ 100 px που θα λειτουργεί με το παρακάτω τρόπο:
Όταν ο χρήστης κινείται εκτός εικόνας θα εμφανίζεται η εικόνα Α
Όταν κινείται εντός εικόνας χωρίς να πατάει κάποιο κουμπί από το ποντίκι θα εμφανίζεται η εικόνα Β
Όταν κινείται εντός εικόνας και πατάει το κουμπί του ποντικιού θα εμφανίζεται η εικόνα Γ
(όπου Α, Β, Γ τρείς διαφορετικές εικόνες της επιλογής σας)
Άσκηση 4 - onload, onunload
Διαβάστε εδώ για τα συμβάντα onload και onunload.
Εκμεταλευτείτε αυτό το συμβάν για να παρουσιάζετε το μήνυμα "Welcome to my page!!!" όταν ο χρήστης εισέρχεται στην σελίδα και το μύνημα "Bye Bye" όταν φέυγει από αυτή (νέα URL διεύθυνση).
Προσοχή : To onuload event έχει πλέον απενεργεοποιηθεί από πολλούς browsers γιατί το χρησιμοποιούσαν πολλά κακόβουλα scripts.
Άσκηση 5 - onfocus, onblur
Διαβάστε εδώ για τα συμβάντα onfocus και onblur.
Φτιάξτε μία σελίδα με 4 text boxes. Όταν κάποιο text box λαμβάνει focus θα γίνεται κίτρινο και όταν το χάνει, αν έχει πληκτρολογηθεί τιμή μέσα του θα γίνεται άσπρο, αλλιώς θα γίνεται κόκκινο.
Άσκηση 6 - keyword this
Με τη χρήση του keyword this μπορούμε να έχουμε σε κάθε στιγμή της εκτέλεσης ενός JavaScript κώδικα προσπέλαση στο τρέχον "ενεργό" αντικείμενο. Ουσιαστικά δηλ. το keyword this λειτουργεί ως ένα σημείο αναφοράς (reference pointer) στο τρέχον αντικείμενο.
Χρησιμοποιήστε αυτό το χαρακτηριστικό για να τροποποιήσετε την προηγούμενη άσκηση ώστε όταν καλούνται οι αντίστοιχες function να δέχονται σαν παράμετρο το text box που τις καλεί και να λειτουργούν αναλόγως.