Simple Slideshow
Δημιουργήστε μια σελίδα όπου θα αποθηκεύετε σε ένα πίνακα javascipt μια λίστα από πηγές προς αρχεία γραφικών (δηλαδή URLs από εικόνες).
Δημιουργήστε δύο κουμπιά. Ένα "Επόμενο" και ένα προηγούμενο που όταν θα τα πατάει ο χρήστης θα εμφανίζεται το επόμενο ή το προηγούμενο στη σειρά γραφικό από αυτά που είναι αποθηκευμένα στους πίνακες.
Σχετική βοήθεια:
https://www.w3schools.com/jsref/jsref_obj_array.asp
Τροποποιήστε το προηγούμενο πρόγραμμα ώστε να αποθηκεύονται σε ένα πολυδιάστατο πίνακα και οι διαστάσεις στις οποίες θα εμφανίζεται το κάθε γραφικό.
Σχετική βοήθεια:
https://www.geeksforgeeks.org/multidimensional-array-in-javascript/
Φτιάξτε μία σελίδα 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
Φτιάξτε μία σελίδα HTML/Javascript που θα περιέχει στο κείμενο της ένα σύνολο από εικόνες. Στην αρχή της σελίδας θα υπάρχει ένα κουμπί "Εμφάνιση" το οποίο όταν θα πατάει ο χρήστης θα εμφανίζει στην αρχή της σελίδας μία λίστα με τις πηγές όλων των εικόνων της σελίδας και θα μετατρέπεται σε "Εξαφάνιση". Όταν ο χρήστης πατάει το "Εξαφάνιση" η λίστα των πηγών θα εξαφανίζεται και το κουμπί θα ξαναγίνεται "Εμφάνιση".
Σχετική βοήθεια:
https://www.w3schools.com/jsref/coll_doc_images.asp
(MSDN Library):
https://msdn.microsoft.com/en-us/library/ms537461(VS.85).aspx
Διαβάστε για τα form elements εδώ.
Φτιάξτε μία σελίδα HTML/Javascript που και δημιουργήστε τα εξής στοιχεία φόρμας HTML (HTML Form Elements):
ένα πλαίσιο είσοδου κειμένου (input element / textbox)
ένα κουμπί (button element) που θα το ονομάσετε "Προσθήκη"
ένα πλαίσιο επιλογής (select element) που μπορεί να είναι τύπου combobox ή τύπου listbox.
Όταν ο χρήστης πατάει το κουμπί [ Προσθήκη ] και εφόσον το πλαίσιο κειμένου δεν είναι κενό, τότε η τιμή που υπάρχει σε αυτό θα προστίθεται στις επιλογές του πλαισίου επιλογής και κατόπιν θα αδειάζουμε το πλαίσιο κειμένου.
Σχετική βοήθεια:
https://www.w3schools.com/jsref/coll_select_options.asp
(MSDN Library):
https://msdn.microsoft.com/en-us/library/ms537472(VS.85).aspx
Φτιάξτε μία σελίδα 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
Φτιάξτε μία σελίδα που θα έχει διάφορες επικεφαλίδες 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
Φτιάξτε μία σελίδα που θα έχει διάφορες παραγράφους (p) και spans. Κατά την δημιουργία των παραγράφων και των spans ορίστε σε κάθε ένα μιά από τις παρακάτω CSS κλάσεις :
HighlightText
NofiicationText
PlainText
Στην αρχή της σελίδας εισάγετε ένα 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