Εργαστήριο 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 που τις καλεί και να λειτουργούν αναλόγως.