Εργαστήριο 5 : JavaScript εισαγωγή
Άσκηση 1 - πρόσβαση σε αντικείμενα και ιδιότητες (εισαγωγή στο DOM)
Δημιουργήστε μία σελίδα (+ JavaScript) όπου θα υλοποιεί ένα απλό αθροιστή, δηλαδή θα πληκτρολογείτε αριθμούς σε ένα Text Box και με το πάτημα ενός κουμπιού θα αθρίζονται στο σύνολο που θα εμφανίζεται σε ένα δεύτερο Text Box.
Σε περίπτωση που το συνολικό άθροισμα ξεπεράσει το 1000 να εμφανίζεται ένα μήνυμα.
Σχετική βοήθεια:
https://www.w3schools.com/whatis/whatis_htmldom.asp
https://www.w3schools.com/jsref/dom_obj_document.asp
Άσκηση 2 - αντικείμενο window
Κάντε μία σελίδα με μία φόρμα όπου ο χρήστης θα δίνει μία URL διέυθυνση σε ένα Text Box και μόλις πατάει ένα κουμπί να ανοίγει εκείνη η διεύθυνση. Χρησιμοποιήστε το αντικείμενο window και την ιδιότητα location.
Σχετική βοήθεια:
https://www.w3schools.com/jsref/obj_window.asp
https://www.w3schools.com/jsref/obj_location.asp
Άσκηση 3 - αντικείμενο window
Κάντε μία σελίδα με μία φόρμα όπου ο χρήστης θα δίνει σε 2 Textboxes διαστάσεις παραθύρου (width, height) και σε ένα TextBox ένα URL.
Δημιουργήστε 2 κουμπιά. Το πρώτο θα ανοίγει ένα νέο παράθυρο με το URL που δώθηκε (με την window.open). Το νέο παράθυρο να είναι χωρίς menu και χωρίς URL bar και να έχει μέγεθος 200χ200.
Το δεύτερο θα κάνει resize το ήδη ανοιχτό παράθυρο στις διαστάσεις που δίνονται στα TextBoxes.
Σημείωση: Το resize δουλεύει μόνο στον chrome στα εργαστήρια.
Σημείωση2: Για να ανοίξει νέο παράθυρο και όχι νέο tab, θα πρέπει στην open να οριστούν διαστάσεις, και μετά μπορεί να χρησιμοποιηθεί το resizeTo.
πχ:
var w = window.open('http://www.com','', 'width=100,height=100');
w.resizeTo(400,300);
Σχετική βοήθεια: https://www.w3schools.com/jsref/obj_window.asp
Άσκηση 4 - αντικείμενο document
Φτιάξτε μία απλή HTML σελίδα (+ JavaScript) όπου θα δίνεται ένα χρώμα και θα αλλάζει το background της HTML σελίδας.
Σχετική βοήθεια: https://www.w3schools.com/jsref/dom_obj_document.asp
Άσκηση 5 - αντικείμενο navigator
Δημιουργήστε μία HTML σελίδα όπου θα ελέγχεται ο τύπος του browser με το πάτημα ενός κουμπιού (π.χ. chrome, firefox κλπ) και θα εμφανίζεται κάποιο μήνυμα. Επίσης θα ελέγχεται η γλώσσα του browser και το μήνυμα θα εμφανίζεται στη κατάλληλη γλώσσα (Ελληνικά ή Αγγλικά)
Σχετική βοήθεια: https://www.w3schools.com/jsref/obj_navigator.asp
Άσκηση 6 - αντικείμενο location
Δημιουργήστε μία HTML σελίδα θα υπάρχει ένα list box με τις επιλογές "domain" και "path" και ένα κουμπί "Show" που όταν το πατάει ο χρήστης, αναλόγως με την τρέχουσα επιλογή του στο list box, θα εμφανίζει το domain ή το path απο το URL τις σελίδας.
Σχετική βοήθεια: https://www.w3schools.com/jsref/obj_location.asp