Εργαστήριο  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