Εργαστήριο  8: Αντικείμενο Event και Δυναμική δημιουργία HTML περιεχομένου

Άσκηση 1: Αντικείμενο Event 

Διαβάστε για τα form elements εδώ.

Να δημιουργήσετε μία νέα σελίδα στην οποία θα υπάρχουν αρχικά ένα input element (textbox) και ένα textarea element. Να προσθέσετε και άλλα στοιχεία στην σελίδα όπως επικεφαλίδες διαφορετικών επιπέδων, υπερσυνδέσμους, div, παραγράφους κτλ. Όταν ο χρήστης βρεθεί με το ποντίκι πάνω σε κάθε στοιχείο της σελίδας, διαχειριστείτε το συμβάν και εμφανίστε αφενός στο textbox το tagName του στοιχείου και αφετέρου στο textarea το κείμενο (ή HTML κώδικας) που υπάρχει μεταξύ των tags του element.

Σχετική βοήθεια για event.target

Άσκηση 2: Αντικείμενο Event 

Να δημιουργήσετε σε μία νέα σελίδα μία unnumbered list (UL) με 6 στοιχεία. Σε κάθε στοιχείο (LI) της λίστας που πατάει ο χρήστης (onclick) το κείμενο αυτού θα γίνεται «Με επέλεξες!!!». 

Άσκηση 3: Απενεργοποίηση Γεγονότος

Να δημιουργήσετε σε μία νέα σελίδα μία unnumbered list (UL) με 6 στοιχεία. Κάθε φορά που ο χρήστης πατήσει (onclick) σε μία από τα στοιχεία (LI) της λίστας τότε το κείμενο του στοιχείου θα γίνεται «Με επέλεξες!!!».

Να επιτρέπεται η επιλογή μέχρι τριών στοιχείων.

Μετά το τρίτο κλικ το event θα απενεργοποιείται και θα εμφανίζεται ανάλογο μήνυμα.

Άσκηση 4: Δυναμική δημιουργία HTML περιεχομένου με createAttribute  

Να δημιουργήσετε μία σελίδα στην οποία θα υπάρχουν 3 links και ένα κουμπί. Να δημιουργήσετε στο head μία css κλάση (π.χ.: .customcolors { } ) στην οποία θα ορίζεται ως κόκκινο το χρώμα των γραμμάτων και ως κίτρινο το χρώμα του πλαισίου (background). 

Όταν ο χρήστης πατήσει στο κουμπί θέλουμε να αναθέσουμε σε όλα τα links την κλάση customcolors. Να χρησιμοποιηθούν η createAttribute και η setAttribute.

Άσκηση 5: Δυναμική δημιουργία HTML περιεχομένου με createAttribute, createElement και innerHTML  

Να δημιουργήσετε μία σελίδα που αρχικά θα περιέχει

• • ένα select element στο οποίο ο χρήστης θα επιλέγει τον τύπο του στοιχείου Η1, Η2, Η3, P, SPAN) που θέλει να δημιουργήσει.

  • ένα select element που θα έχει τις επιλογές  red, blue, green για το χρώμα των γραμμάτων.

  • ένα κουμπί «δημιουργία» το οποίο θα δημιουργεί το στοιχείο μέσα στο div

  • ένα div που θα έχει το id "pnlCreate" και οποίο θα βρίσκεται από κάτω από το κουμπί.

α) Να χρησιμοποιηθούν οι createElement, createAttribute και setAttribute για την δυναμική δημιουργία του στοιχείου.

β) Να κάνετε μία παραλλαγή της υλοποίησης στην οποία δεν θα κάνετε χρήση των createElement, createAttribute και η setAttribute αλλά θα χρησιποιήσετε την ιδιότητα innerHTML.

Ποιον από τους δύο τρόπους θεωρείτε καλύτερο;