Εργαστήριο  9: Πίνακες και συλλογές.

Άσκηση 1 - Χρήση πινάκων στη Javascript

Simple Slideshow

Δημιουργήστε μια σελίδα όπου θα αποθηκεύετε σε ένα πίνακα javascipt μια λίστα από πηγές προς αρχεία γραφικών (δηλαδή URLs από εικόνες).

Δημιουργήστε δύο κουμπιά. Ένα "Επόμενο" και ένα προηγούμενο που όταν θα τα πατάει ο χρήστης θα εμφανίζεται το επόμενο ή το προηγούμενο στη σειρά γραφικό από αυτά που είναι αποθηκευμένα στους πίνακες.

Σχετική βοήθεια:

https://www.w3schools.com/jsref/jsref_obj_array.asp

Άσκηση 2 - Πολυδιάστατοι πίνακες στη Javascript

Τροποποιήστε το προηγούμενο πρόγραμμα ώστε να αποθηκεύονται σε ένα πολυδιάστατο πίνακα και οι διαστάσεις στις οποίες θα εμφανίζεται το κάθε γραφικό.

Σχετική βοήθεια:

https://www.geeksforgeeks.org/multidimensional-array-in-javascript/

Άσκηση 3 - Χρήση συλλογής links του document

Φτιάξτε μία σελίδα HTML/Javascript με διάφορους συνδέσμους σε άλλες σελίδες. Στην αρχή θα υπάρχει ένα κουμπί "Χρωμάτισε" που όταν το πατήσει ο χρήστης θα αλλάζει το χρώμα του φόντου των συνδέσμων της σελίδας που οδηγούν σε σελίδες του ίδιου domain με το τρέχον σε πράσινο και το φόντο των συνδέσμων που οδηγούν σε σελίδες εκτός του τρέχοντος domain σε κόκκινο.

Σχετική βοήθεια:

http://www.w3schools.com/jsref/coll_doc_links.asp

(MSDN Library):

http://msdn.microsoft.com/en-us/library/ms537465(VS.85).aspx

Άσκηση 4 - Χρήση συλλογής images του document

Φτιάξτε μία σελίδα HTML/Javascript που θα περιέχει στο κείμενο της ένα σύνολο από εικόνες. Στην αρχή της σελίδας θα υπάρχει ένα κουμπί "Εμφάνιση" το οποίο όταν θα πατάει ο χρήστης θα εμφανίζει στην αρχή της σελίδας μία λίστα με τις πηγές όλων των εικόνων της σελίδας και θα μετατρέπεται σε "Εξαφάνιση". Όταν ο χρήστης πατάει το "Εξαφάνιση" η λίστα των πηγών θα εξαφανίζεται και το κουμπί θα ξαναγίνεται "Εμφάνιση".

Σχετική βοήθεια:

https://www.w3schools.com/jsref/coll_doc_images.asp

(MSDN Library):

https://msdn.microsoft.com/en-us/library/ms537461(VS.85).aspx

Άσκηση 5 - Χρήση συλλογής options του select element

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

Φτιάξτε μία σελίδα HTML/Javascript που και δημιουργήστε τα εξής στοιχεία φόρμας HTML (HTML Form Elements):

Όταν ο χρήστης πατάει το κουμπί [ Προσθήκη ] και εφόσον το πλαίσιο κειμένου δεν είναι κενό, τότε η τιμή που υπάρχει σε αυτό θα προστίθεται στις επιλογές του πλαισίου επιλογής και κατόπιν θα αδειάζουμε το πλαίσιο κειμένου.

Σχετική βοήθεια:

https://www.w3schools.com/jsref/coll_select_options.asp

(MSDN Library):

https://msdn.microsoft.com/en-us/library/ms537472(VS.85).aspx

Άσκηση 6 - Χρήση συλλογών rows και cells

Φτιάξτε μία σελίδα HTML/Javascript που θα περιλαμβάνει έναν κενό πίνακα 5 x 5 και ένα κουμπί "Γέμισμα". Όταν ο χρήστης πατάει το κουμπί τα κελιά του πίνακα θα γεμίζουν με τυχαίους αριθμούς από 1 -10. Αν η τιμή είναι μικρότερη του 5 το φόντο του κελιού θα γίνεται κόκκινο ειδάλλως πράσινο.

Σχετική βοήθεια:

https://www.w3schools.com/jsref/coll_table_rows.asp

https://www.w3schools.com/jsref/coll_table_cells.asp

https://www.w3schools.com/jsref/dom_obj_table.asp

(MSDN Library):

https://msdn.microsoft.com/en-us/library/ms537484(VS.85).aspx https://msdn.microsoft.com/en-us/library/ms537443(VS.85).aspx

Άσκηση 7 - Χρήση μεθόδου getElementsByTagName

Φτιάξτε μία σελίδα που θα έχει διάφορες επικεφαλίδες H1 και Η2.

Στην αρχή της σελίδας εισάγετε ένα select element τύπου combobox με δύο επιλογές "1ο επίπεδο" και "2ο επίπεδο". Προσθέστε επίσης ένα κουμπί "Χρωματισμός".

Όταν ο χρήστης πατάει το κουμπί "Χρωματισμός", αναλόγως με την επιλογή από το combobox, θα επιλέγονται όλες οι σχετικές επικεφαλίδες του 1ου ή 2ου επιπέδου και θα χρωματίζεται το φόντο τους με κίτρινο. Παράλληλα θα αλλάζει η λειτουργία του κουμπιού και θα μετονομάζεται σε "Αποχρωματισμός".

Όταν ο χρήστης πατάει το κουμπί "Αποχρωματισμός", αναλόγως με την επιλογή από το combobox, θα χρωματίζεται το φόντο των επικεφαλίδων του αντίστοιχου επιπέδου με άσπρο. Παράλληλα θα αλλάζει η λειτουργία του κουμπιού και θα μετονομάζεται σε "Χρωματισμός".

 

Σχετική βοήθεια:

https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

(MSDN Library):

https://msdn.microsoft.com/en-us/library/ms536439(VS.85).aspx


Άσκηση 8 - Χρήση μεθόδου getElementsByClassName

Φτιάξτε μία σελίδα που θα έχει διάφορες παραγράφους (p) και spans. Κατά την δημιουργία των παραγράφων  και των spans ορίστε σε κάθε ένα μιά από τις παρακάτω CSS κλάσεις : 

Στην αρχή της σελίδας εισάγετε ένα select element τύπου combobox  που θα έχει ως επιλογές τα ονόματα των παραπάνω κλάσεων. Προσθέστε 2 textboxes το πρώτο τύπου color και το δεύτερο τύπου number και ένα κουμπί "Αλλαγή χρώματος και μεγέθους". Όταν ο χρήστης πατήσει το κουμπί τότε όλες οι παράγραφοι και τα spans που έχουν την επιλεγμένη (από το select element) κλάση να αλλάζει το χρώμα και το μέγεθος των γραμμάτων τους.

Σχετική βοήθεια:

https://www.w3schools.com/tags/att_input_type_color.asp 

https://www.w3schools.com/tags/att_input_type_number.asp 

https://www.w3schools.com/jsref/met_element_getelementsbyclassname.asp