Javascript – Χειρισμός της σελίδας

Παρουσίαση με θέμα: "Javascript – Χειρισμός της σελίδας"— Μεταγράφημα παρουσίασης:

1 Javascript – Χειρισμός της σελίδας
Document Object Model

2 Ιεραρχία Κάθε στοιχείο μίας ιστοσελίδας θεωρείται αντικείμενο
Κάθε στοιχείο μίας ιστοσελίδας θεωρείται αντικείμενο Έχει ιδιότητες (πχ μέγεθος ή χρώμα) Έχει συμπεριφορά (πχ click(), focus()) Κάθε στοιχείο περιέχεται σε άλλο Κάθε στοιχείο μπορεί να περιέχει άλλα Παράδειγμα: Κατεβάστε τη σελίδα js_dom_1.html Ανοίξτε τη σελίδα με τον Chromium Πηγαίνετε στην επιλογή Κλειδί -> Εργαλεία -> Εργαλεία για προγραμματιστές -> Στοιχεία και ξαναφορτώστε (F5) Δείτε την ιεραρχία που έχει φτιαχτεί

3 Ιεραρχία ζωγραφιστή window html head title body center img src name
width height form input type value br p a href bgcolor

4 Document Object Model DOM – Μοντέλο βασισμένο σε αντικείμενα του εγγράφου Πρότυπο (στάνταρ) από το W3C Ανεξάρτητο από γλώσσα και πλατφόρμα προγραμματισμού Ορίζονται Αντικείμενα Χαρακτηριστικά Τρόποι χειρισμού τους (μέθοδοι)

5 Μικρό … αλλά κόμβος Κόμβος (node) είναι η βασική έννοια. Ο κόμβος
Έχει τύπο Έχει ιδιότητες Έχει συναρτήσεις (άρα συμπεριφορά) Μπορεί να έχει πατέρα Μπορεί να έχει παιδιά Κάθε κομμάτι HTML είναι κόμβος Κάθε ιδιότητα HTML (HTML property) είναι κόμβος Τα σχόλια είναι κόμβος Το ίδιο το έγγραφο είναι κόμβος

6 Οικογενειακό ζήτημα Στην ιεραρχία-δέντρο του εγγράφου
Ο ανώτερος κόμβος ονομάζεται ρίζα (root) Κάθε κόμβος έχει έναν (και μόνο) πατέρα (parent) εξαίρεση η ρίζα, η οποία δεν έχει πατέρα Κάθε κόμβος μπορεί να έχει παιδιά – αν δεν έχει ονομάζεται φύλλο (leaf) Τα παιδιά του ίδιου πατέρα ονομάζονται αδέρφια (siblings)

7 Άσκηση Αναγνωρίστε τις συγγένειες στο δέντρο που βρίσκεται παραπάνω

8 Ανάκτηση κόμβου: από την ιεραρχία
<script type="text/javascript"> var n1 = document.firstChild; alert(n1.nodeName); var n2 = n1.firstChild; alert(n2.nodeName); var n3 = document.firstChild.firstChild; alert(n3.nodeName); var n4 = document.body.lastChild; alert(n4.nodeName); var n5 = document.body.lastChild.firstChild.parentNode; alert(n5.nodeName); var n10 = document.forms[0].elements[0]; alert(n10.nodeName); </script>

9 Ανάκτηση με βάση το id <p id="myid">Κείμενο</p> var n = document.getElementById("myid")

10 Ανάκτηση με βάση την ετικέτα
<p id="myid">Κείμενο</p> <p id="otherid">Άλλο κείμενο</p> var all = document.getElementsByTagName("p") var n = all[1]; //φέρνει το myid ή το otherid?

11 Ιδιότητες – τι είναι nodeName: η ετικέτα με κεφαλαία (r/o)
nodeType: τύπος (r/o) Element: 1 Attribute: 2 Κείμενο: 3 Σχόλια: 8 Document: 9

12 Ιδιότητες – τι έχει nodeValue: innerHTML: ότι είναι μέσα στη ετικέτα
Για κείμενο – το κείμενο  Για attributes – η τιμή Για elements – undefined (δεν υποστηρίζεται) innerHTML: ότι είναι μέσα στη ετικέτα

13 Ιδιότητες – πως είναι Χαρακτηριστικό style style.backgroundColor:
n.style.backgroundColor = "red"; style.color: n.style.color = "red"; style.fontFamily: n.style.fontFamily = "Tahoma";

14 Άσκηση Στην παραδειγματική οθόνη της αρχής, βάλτε δύο κουμπιά για να επιλέγει ο χρήστης το skin της σελίδας. Το ένα κουμπί θα φέρνει ένα παστέλ skin ενώ το άλλο θα είναι περισσότερο gothic.

15 Άσκηση Σε κάθε οθόνη καταχώρησης στοιχείων πρέπει να φροντίζουμε ώστε τα στοιχεία να στέλνονται στον εξυπηρετητή όσο το δυνατό ορθότερα Στην οθόνη καταχώρησης που έχετε φτιάξει, φροντίστε ώστε πριν την αποστολή να βεβαιωθείτε ότι: Όλα τα πεδία έχουν τιμή Το συνθηματικό είναι μεταξύ 6 και 12 χαρακτήρων Αν κάποιο πεδίο έχει πρόβλημα να το αλλάξετε κατάλληλα ώστε να το επισημάνετε στο χρήστη