Προγραμματισμός Διαδικτύου
|
|
|
- Ευδώρα Ηλιόπουλος
- 5 χρόνια πριν
- Προβολές:
Transcript
1 Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης Πανεπιστήμιο Δυτικής Μακεδονίας 1
2 Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. Πανεπιστήμιο Δυτικής Μακεδονίας 2
3 Προγραμματισμός Διαδικτύου Περιεχόμενα Javascript #3 1. HTML DOM Ιδιότητες Μέθοδοι 2. Αντικείμενα Παραδείγματα 3. Συμβάντα Παραδείγματα Πανεπιστήμιο Δυτικής Μακεδονίας 3
4 Σκοπός ενότητας Στην ενότητα αυτή θα μάθετε να χρησιμοποιείτε: Ιδιότητες Μέθοδοι Αντικείμενα Κλάσεις Ιστοσελίδες Φόρμες Κουμπιά Πεδία κειμένων Λίστες επιλογών Πανεπιστήμιο Δυτικής Μακεδονίας 4
5 Γενική παρατήρηση για Javascript Η Javascript πρέπει να γράφεται μέσα στις παρακάτω ετικέτες (tags): <script type="text/javascript"> </script> Αντιθέτως έχει καταργηθεί (αλλά ισχύει) και πρέπει να αποφεύγεται το: <script language="javascript"> </script> Πανεπιστήμιο Δυτικής Μακεδονίας 5
6 Τι έχουμε μάθει ως τώρα CSS Javascript HTML XHTML Πανεπιστήμιο Δυτικής Μακεδονίας 6
7 Τι είναι το Document Object Model; Το DOM είναι πρότυπο W3C (World Wide Web Consortium ). Το DOM ορίζει ένα πρότυπο για την πρόσβαση σε έγγραφα όπως HTML και XML. "Το μοντέλο W3C (DOM) είναι μια διασύνδεση ουδέτερης γλώσσας και πλατφόρμας που επιτρέπει στα προγράμματα και τα σενάρια να έχουν δυναμική πρόσβαση και να ενημερώνουν το περιεχόμενο, τη δομή και το στυλ ενός εγγράφου." Το DOM χωρίζεται σε 3 διαφορετικά μέρη / επίπεδα: - Core DOM - πρότυπο μοντέλο για κάθε δομημένο έγγραφο. - XML DOM - πρότυπο μοντέλο για έγγραφα. - XML HTML DOM - πρότυπο μοντέλο για έγγραφα HTML. Το DOM ορίζει τα αντικείμενα και τις ιδιότητες όλων των στοιχείων του εγγράφου και τις μεθόδους (διασύνδεση) για την πρόσβαση σε αυτά. Πανεπιστήμιο Δυτικής Μακεδονίας 7
8 Τι είναι το HTML DOM; Το HTML DOM είναι: - Ένα πρότυπο μοντέλο αντικειμένου για HTML. - Μια τυπική διεπαφή προγραμματισμού για HTML. - Πλατφόρμα και γλώσσα ανεξάρτητα. - Ένα πρότυπο W3C. Το HTML DOM ορίζει τα αντικείμενα και τις ιδιότητες όλων των στοιχείων HTML και τις μεθόδους (διεπαφή) για την πρόσβαση σε αυτά. Με άλλα λόγια: Το HTML DOM είναι ένα πρότυπο για τον τρόπο λήψης, αλλαγής, προσθήκης ή διαγραφής στοιχείων HTML. Πανεπιστήμιο Δυτικής Μακεδονίας 8
9 Όλα είναι κόμβοι Στο HTML DOM όλα τα στοιχεία της σελίδας είναι κόμβοι (κόμβοι =στοιχεία που συνδέονται μεταξύ τους) Όλο το έγγραφο είναι κόμβος. Κάθε HTML στοιχείο είναι κόμβος. Κάθε κείμενο σε κάθε HTML στοιχείο είναι κόμβος. Κάθε ιδιότητα HTML είναι κόμβος. Κάθε σχόλιο είναι κόμβος. Πανεπιστήμιο Δυτικής Μακεδονίας 9
10 Παράδειγμα HTML DOM Η ρίζα κόμβος είναι το <html>. Το <html> έχει 2 παιδιά κόμβους: <head>, <body>. To <head> έχει 1 παιδί: <title>. To <body> έχει 2 παιδιά: <h1> και <p>. <html> <head> <title> DOM Tutorial </title> </head> <body> <h1>dom Lesson one</h1> <p> Hello world! </p> </body> </html> Πανεπιστήμιο Δυτικής Μακεδονίας 10
11 Το κείμενο αποθηκεύεται στον κόμβο κειμένου (text node) Στο προηγούμενο παράδειγμα: <title>dom Tutorial</title> Ο κόμβος <title> έχει ένα κόμβο κειμένου με την τιμή DOM Tutorial. Η συμβολοσειρά DOM Tutorial δεν είναι η τιμή του κόμβου <title>. Εντούτοις, η τιμή του κειμένου μπορεί να εξαχθεί με την ιδιότητα.innerhtml (σε επόμενη διαφάνεια) Πανεπιστήμιο Δυτικής Μακεδονίας 11
12 Κατά το HTML DOM όλα είναι ένα δένδρο, με σχέσεις κόμβων Ονομάζεται δένδρο-κόμβων (node-tree). Πρόσβαση στους κόμβους με πολλαπλό τρόπο και τροποποίηση τους. Το δένδρο έχει ρίζα το Document. Πανεπιστήμιο Δυτικής Μακεδονίας 12
13 Το δένδρο καθορίζει τις ιεραρχικές σχέσεις Στο HTML DOM δένδρο ορίζονται οι παρακάτω σχέσεις: Πατέρας (parent) Παιδί (child) Αδερφός κόμβος (sibling) Οι πατέρες έχουν παιδιά. Τα παιδιά στο ίδιο επίπεδο είναι αδέρφια. O υψηλότερος κόμβος ονομάζεται root (ρίζα). Ένα φύλλο (leaf) είναι ένας κόμβος χωρίς παιδιά. Τα αδέρφια έχουν τον ίδιο πατέρα. Πανεπιστήμιο Δυτικής Μακεδονίας 13
14 Επόμενος κόμβος αδελφός Γραφική απεικόνιση των σχέσεων Στοιχείο ρίζας <html> Πρώτο παιδί Τελευταίο παιδί Στοιχείο <head> Στοιχείο <body> Προηγούμενος κόμβος αδελφός Κόμβος παιδιά στο <html> και κόμβοι αδελφοί σε κάθε άλλο Πανεπιστήμιο Δυτικής Μακεδονίας 14
15 Παράδειγμα σχέσεων <html> <head> <title> DOM Tutorial </title> </head> <body> <h1> DOM Lesson one </h1> </body> </html> Στο παραπάνω κομμάτι HTML αναγνωρίστε τις σχέσεις σύμφωνα με το HTML DOM. Πανεπιστήμιο Δυτικής Μακεδονίας 15
16 Ιδιότητες και Μέθοδοι Διεπαφή προγραμματισμού Στο DOM, τα έγγραφα HTML αποτελούνται από ένα σύνολο αντικειμένων κόμβων. Οι κόμβοι μπορούν να προσεγγιστούν με JavaScript ή άλλες γλώσσες προγραμματισμού. Η διεπαφή προγραμματισμού του DOM καθορίζεται από τυπικές ιδιότητες και μεθόδους. Οι ιδιότητες αναφέρονται συχνά ως κάτι που είναι (δηλαδή το όνομα ενός κόμβου). Οι μέθοδοι αναφέρονται συχνά ως κάτι που γίνεται (δηλαδή αφαίρεση ενός κόμβου). Πανεπιστήμιο Δυτικής Μακεδονίας 16
17 Ιδιότητες HTML DOM Ορισμένες ιδιότητες DOM: x.innerhtml - η τιμή κειμένου του x x.nodename - το όνομα του x x.nodevalue - η τιμή του x x.parentnode - ο γονικός κόμβος του x x.childnodes - οι κόμβοι παιδιά του x x.attributes - οι κόμβοι ιδιοτήτων του x Σημείωση: Στην παραπάνω λίστα, το x είναι ένα αντικείμενο κόμβου (στοιχείο HTML). Πανεπιστήμιο Δυτικής Μακεδονίας 17
18 Μέθοδοι HTML DOM Μερικές μεθόδους DOM: x.getelementbyid (id) - παίρνει το στοιχείο με ένα καθορισμένο id x.getelementsbytagname (όνομα) παίρνει όλα τα στοιχεία με ένα καθορισμένο όνομα ετικέτας x.appendchild (κόμβος) - εισάγει έναν παιδικό κόμβο στο x x.removechild (κόμβος) - αφαιρεί έναν παιδικό κόμβο από το x Σημείωση: Στην παραπάνω λίστα, το x είναι ένα αντικείμενο κόμβου (στοιχείο HTML). Πανεπιστήμιο Δυτικής Μακεδονίας 18
19 Η ιδιότητα innerhtml (παράδειγμα) Πανεπιστήμιο Δυτικής Μακεδονίας 19
20 Κόμβοι παιδιά και τιμή κόμβου Πανεπιστήμιο Δυτικής Μακεδονίας 20
21 Η πρόσβαση σε στοιχεία HTML DOM Η πρόσβαση επιτυγχάνεται με 3 τρόπους: Χρησιμοποιώντας τη μέθοδο getelementbyid(). Χρησιμοποιώντας τη μέθοδο getelementbytagname(). Πλοηγώντας το δένδρο των κόμβων, με τις σχέσεις. Πανεπιστήμιο Δυτικής Μακεδονίας 21
22 Η μέθοδος getelementbyid() Η μέθοδος αυτή επιστρέφει το στοιχείο με το συγκεκριμένο id Πανεπιστήμιο Δυτικής Μακεδονίας 22
23 Η μέθοδος getelementbytagname() (1) Η μέθοδος αυτή επιστρέφει τα στοιχεία με το συγκεκριμένο html tag. Επιστρέφονται πολλά στοιχεία. Πανεπιστήμιο Δυτικής Μακεδονίας 23
24 Η μέθοδος getelementbytagname() (2) Πανεπιστήμιο Δυτικής Μακεδονίας 24
25 Η ιδιότητα length() Ορίζει τον αριθμό των παιδιών. Πανεπιστήμιο Δυτικής Μακεδονίας 25
26 Πλοήγηση με σχέσεις Χρήση των firstchild, lastchild,parentnode,nextsibling (πρώτο παιδι, τελευταίο παιδι, πατρικός κόμβος, επόμενος αδελφός) document.body παρέχει άμεση πρόσβαση στην ετικέτα <body>. Πανεπιστήμιο Δυτικής Μακεδονίας 26
27 Αντικείμενα στα HTML DOM Κάθε κόμβος στο HTML DOM είναι αντικείμενο. Οι κόμβοι έχουν μεθόδους και ιδιότητες. Οι 3 πιο σημαντικές ιδιότητες των κόμβων: - nodename (όνομα κόμβου) - nodevalue (τιμή κόμβου) - nodetype (τύπος κόμβου) Πανεπιστήμιο Δυτικής Μακεδονίας 27
28 nodename Η ιδιότητα nodename καθορίζει το όνομα ενός κόμβου. Η nodename είναι μόνο για ανάγνωση Η nodename ενός στοιχείου κόμβου είναι το ίδιο με το όνομα της ετικέτας. Η nodename ενός κόμβου χαρακτηριστικού είναι το όνομα του χαρακτηριστικού. Η nodename ενός κόμβου κειμένου είναι πάντα #text Η nodename του κόμβου εγγράφου είναι πάντα #document Σημείωση: Το nodename περιέχει πάντα το όνομα της ετικέτας με κεφαλαία ενός στοιχείου HTML. Πανεπιστήμιο Δυτικής Μακεδονίας 28
29 nodevalue Η ιδιότητα nodevalue καθορίζει την τιμή ενός κόμβου. Το nodevalue για τους κόμβους στοιχείων είναι απροσδιόριστο. Το nodevalue για κόμβους κειμένου είναι το ίδιο το κείμενο. Το nodevalue για τους κόμβους χαρακτηριστικών είναι η τιμή του χαρακτηριστικού. Πανεπιστήμιο Δυτικής Μακεδονίας 29
30 Παράδειγμα nodevalue Πανεπιστήμιο Δυτικής Μακεδονίας 30
31 nodetype Επιστρέφει τον τύπο του αντικειμένου. Τύπος στοιχείου NodeType Στοιχείο (Element) 1 Χαρακτηριστικό (Attribute) 2 Κείμενο (Text) 3 Σχόλιο (Comment) 8 Έγγραφο (Document) 9 Πανεπιστήμιο Δυτικής Μακεδονίας 31
32 Αλλάζοντας ένα HTML στοιχείο Πανεπιστήμιο Δυτικής Μακεδονίας 32
33 Αλλάζοντας το κείμενο Πανεπιστήμιο Δυτικής Μακεδονίας 33
34 Χρησιμοποιώντας Συμβάντα Ένας χειριστής συμβάντος επιτρέπει να εκτελεστεί ένα κομμάτι κώδικα όταν συμβεί κάτι στη σελίδα. Τα συμβάντα δημιουργούνται από το φυλλομετρητή όταν φορτώνεται η σελίδα, όταν ο χρήστης μετακινήσει το ποντίκι, όταν πατήσει κάπου κλικ κτλ. Πανεπιστήμιο Δυτικής Μακεδονίας 34
35 Παράδειγμα αλλαγής φόντου (background) με κουμπί Πανεπιστήμιο Δυτικής Μακεδονίας 35
36 Παράδειγμα αλλαγής κειμένου με κουμπί Πανεπιστήμιο Δυτικής Μακεδονίας 36
37 Παράδειγμα αλλαγής στυλ (style) με κουμπί Πανεπιστήμιο Δυτικής Μακεδονίας 37
38 Παράδειγμα αλλαγής γραμματοσειράς και χρώματος με κουμπί Πανεπιστήμιο Δυτικής Μακεδονίας 38
39 Συμβάντα Κάθε στοιχείο σε μια ιστοσελίδα έχει ορισμένα συμβάντα τα οποία μπορούν να ενεργοποιήσουν τις λειτουργίες JavaScript. Για παράδειγμα, μπορούμε να χρησιμοποιήσουμε το γεγονός onclick ενός στοιχείου κουμπιού για να δείξει ότι μια λειτουργία θα τρέξει όταν ένας χρήστης κάνει κλικ στο κουμπί. Ορίζουμε τα συμβάντα στα στοιχεία HTML. Παραδείγματα συμβάντων: - Ένα κλικ με το ποντίκι. - Μια ιστοσελίδα ή μια εικόνα φόρτωσης. - Τοποθετώντας το ποντίκι πάνω από ένα καυτό σημείο (hot spot) στην ιστοσελίδα. - Επιλογή πλαισίου εισαγωγής σε φόρμα HTML. - Υποβολή μιας φόρμας HTML. - Ένα πλήκτρο. Σημείωση: Τα συμβάντα χρησιμοποιούνται συνήθως σε συνδυασμό με λειτουργίες και η λειτουργία δεν θα εκτελείται πριν συμβεί το συμβάν! Πανεπιστήμιο Δυτικής Μακεδονίας 39
40 Συμβάντα onload, onunload Μόλις φορτωθεί η σελίδα ή μόλις πάει να απομακρυνθεί ο χρήστης από αυτή. Onload Χρησιμοποιείται συνήθως για τον έλεγχο της έκδοσης του φυλλομετρητή. Κούκις (Cookies). OnUnload (δε χρησιμοποιείται ευρέως) Συνήθως ρωτάει το χρήστη αν πραγματικά θέλει να φύγει από τη σελίδα. Ευχαριστεί το χρήστη για την επίσκεψή του. Πανεπιστήμιο Δυτικής Μακεδονίας 40
41 Συμβάντα onfocus, onblur, onchange OnChange Αν αλλάξει η τιμή ενός πεδίου (συνήθως φόρμας). OnFocus Αν επιλεχθεί ένα πεδίο: είτε με κλικ μέσα σε αυτό. είτε με tab. είτε με την κλήση focus(). Onblur Αν επιλεχθεί ένα διαφορετικό πεδίο από αυτό που αντιστοιχεί (de-focus). Πανεπιστήμιο Δυτικής Μακεδονίας 41
42 Συμβάντα Ιδιότητα Το συμβάν λαμβάνει χώρα όταν IE F O W3C onblur Ένα στοιχείο χάνει την εστίαση Yes onchange Το περιεχόμενο ενός πεδίου αλλάζει Yes onclick Το ποντίκι επιλέγει ένα αντικείμενο Yes ondblclick Το ποντίκι επιλέγει με διπλό κλικ ένα αντικείμενο Yes onerror Ένα σφάλμα λαμβάνει χώρα όταν φορτώνει ένα έγγραφο ή μία εικόνα Yes onfocus Ένα στοιχείο εστιάζει Yes onkeydown Ένα πλήκτρο από το πληκτρολόγιο πατήθηκε. 3 1 No Yes onkeypress Ένα πλήκτρο από το πληκτρολόγιο πατήθηκε ή βρίσκεται το ποντίκι πάνω Yes onkeyup Ένα πλήκτρο από το πληκτρολόγιο απελευθερώνεται Yes Πανεπιστήμιο Δυτικής Μακεδονίας 42
43 Συμβάντα Ιδιότητα Το συμβάν λαμβάνει χώρα όταν IE F O W3C onmousedown Ένα κουμπί του ποντικιού πατήθηκε Yes onmousemove Το ποντίκι μετακινήθηκε Yes onmouseout Το ποντίκι μετακινήθηκε από ένα στοιχείο Yes onmouseover Το ποντίκι μετακινήθηκε πάνω σε ένα στοιχείο Yes onmouseup Ένα κουμπί του ποντικιού ελευθερώθηκε Yes onresize Ένα παράθυρο ή ένα πλαίσιο άλλαξε μέγεθος Yes onselect Ένα κείμενο είναι επιλεγμένο Yes onunload Ο χρήστης εξέρχεται από τη σελίδα Yes Πανεπιστήμιο Δυτικής Μακεδονίας 43
44 Συμβάντα ποντίκι/πληκτρολόγιο Ιδιότητα Το συμβάν λαμβάνει χώρα όταν IE F O W3C altkey button clientx clienty ctrlkey metakey relatedtarget screenx screeny shiftkey Επιστρέφει εάν ή όχι είναι πατημένο το κλειδί ALT όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει ποιο κουμπί από το ποντίκι έκανε κλικ όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει την οριζόντια συντεταγμένη από το δείκτη του ποντικιού όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει την κατακόρυφη συντεταγμένη από το δείκτη του ποντικιού όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει εάν ή όχι είναι πατημένο το κλειδί CTRL όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει εάν ή όχι είναι πατημένο το κλειδί meta όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει το σχετικό στοιχείο στο στοιχείο που ενεργοποίησε ένα συμβάν. Επιστρέφει την οριζόντια συντεταγμένη από το δείκτη του ποντικιού όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει την κατακόρυφη συντεταγμένη από το δείκτη του ποντικιού όταν ενεργοποιήθηκε ένα συμβάν. Επιστρέφει εάν ή όχι είναι πατημένο το κλειδί CTRL όταν ενεργοποιήθηκε ένα συμβάν Yes Yes Yes Yes Yes Yes No 1 9 Yes Yes Yes Yes Πανεπιστήμιο Δυτικής Μακεδονίας 44
45 Συμβάντα: διάφορα Ιδιότητα Περιγραφή IE F O W3 C bubbles cancelable currenttarget eventphase Επιστρέφει μία λογική τιμή που υποδεικνύει εάν είναι ένα συμβάν ή όχι ανεπιθύμητο. Επιστρέφει μία λογική τιμή που υποδεικνύει εάν ένα συμβάν μπορεί ή όχι να έχει εμποδίσει την προκαθορισμένη του ενέργεια. Επιστρέφει το στοιχείο του οποίου ο ακροατής του συμβάντος ενεργοποίησε το συμβάν. Επιστρέφει ποια φάση της ροής του συμβάντος αξιολογείται επί του παρόντος. No 1 9 Yes No 1 9 Yes No 1 9 Yes target Επιστρέφει το στοιχείο που ενεργοποίησε το συμβάν. No 1 9 Yes timestamp Επιστρέφει τη χρονική σφραγίδα, σε χιλιοστά του δευτερολέπτου, από την εποχή (έναρξη συστήματος ή ενεργοποίηση συμβάντος. Yes No 1 9 Yes type Επιστρέφει το όνομα του συμβάντος Yes Πανεπιστήμιο Δυτικής Μακεδονίας 45
46 Ιστοσελίδες - Αντικείμενα - Κλάσεις Σύμφωνα με το DOM μια ιστοσελίδα αποτελείται από επιμέρους στοιχεία διαφορετικών ειδών (π.χ. φόρμες, κουμπιά, links, κλπ.). Τα επιμέρους αυτά στοιχεία αποτελούν τα αντικείμενα της ιστοσελίδας. Ένα αντικείμενο, ανάλογα με το είδος του, ανήκει σε κάποια συγκεκριμένη DOM κλάση (π.χ. Form, Button, Anchor, κλπ.). Πανεπιστήμιο Δυτικής Μακεδονίας 46
47 Αντικείμενα - Ενέργειες Με βάση το DOM, τα αντικείμενα κάποιων κλάσεων σχετίζονται με συγκεκριμένα γεγονότα (events). Η συσχέτιση αυτή έχει την εξής έννοια: - Όταν ένας χρήστης εκτελεί κάποια ενέργεια που εμπλέκει το αντικείμενο μιας ιστοσελίδας (π.χ. πάτημα ενός κουμπιού), δημιουργείται ένα αντίστοιχο γεγονός (π.χ. onclick event). - Η ιστοσελίδα μπορεί να περιέχει κάποιο σενάριο το οποίο συσχετίζεται με τη δημιουργία του γεγονότος. - Το σενάριο θα εκτελεστεί μετά τη δημιουργία του γεγονότος. Συνολικά, με αυτό τον τρόπο μια ιστοσελίδα γίνεται διαδραστική - αντιδρά στις ενέργειες του χρήστη. Πανεπιστήμιο Δυτικής Μακεδονίας 47
48 Περιεχόμενα Window (Παράθυρο) Document (Έγγραφο) Form (Φόρμα) Button, Checkbox, Radio (Κουμπί, κουτί επιλογής, κουκίδα) Select (επιλογή) Text, Textarea (Κείμενο, περιοχή κειμένου) Math, Date, String (Μαθηματικά, Ημερομηνία, Συμβολοσειρά) DOM και NVU Πανεπιστήμιο Δυτικής Μακεδονίας 48
49 Window Γενικά η κλάση Window καθορίζει τις βασικές ιδιότητες των παραθύρων ενός προγράμματος περιήγησης (browser) στα οποία φορτώνονται οι σελίδες της ιστοσελίδας (site) που επισκέπτεται κάποιος χρήστης. <html> <head> <script type="text/javascript"> function movewin() { mywindow.moveby(50,50); mywindow.focus(); } </script> </head> <body> <script type="text/javascript"> mywindow=window.open('','','width=200,height=100'); mywindow.document.write("this is 'mywindow'"); </script> <input type="button" value="move 'mywindow'" onclick="movewin()" /> </body> Πανεπιστήμιο Δυτικής Μακεδονίας 49
50 Document Η κλάση Document καθορίζει τις βασικές ιδιότητες των σελίδων που φορτώνονται στα παράθυρα του προγράμματος περιήγησης (browser) κάποιου χρήστη. Π.χ. τα χρώματα που χρησιμοποιεί η ιστοσελίδα, τον τίτλο της, το πότε αλλάχθηκε τελευταία φορά. Από τις βασικότερες ιδιότητες ενός αντικειμένου Document είναι αυτές που δίνουν πρόσβαση σε αντικείμενα που αντιστοιχούν στα επιμέρους στοιχεία της ιστοσελίδας στην οποία αντιστοιχεί το αντικείμενο Document. Π.χ. τις φόρμες, τις μικρές εφαρμογές (applets), τους συνδέσμους κλπ. Πανεπιστήμιο Δυτικής Μακεδονίας 50
51 Document <html> <head> <script type="text/javascript"> function createnewdoc() { var newdoc=document.open("text/html","replace"); var txt="<html><body>learning about the DOM is FUN!</body></html>"; newdoc.write(txt); newdoc.close(); } </script> </head> <body> <input type="button" value="write to a new document onclick="createnewdoc()"> </body> </html> Πανεπιστήμιο Δυτικής Μακεδονίας 51
52 Document <html> <head> <script type="text/javascript"> function getvalue() { var x=document.getelementbyid("myheader") alert(x.innerhtml) x.style.backgroundcolor="yellow" alert(x.nodetype); } </script> </head> <body> <h1 id="myheader" onclick="getvalue()">this is a header</h1> <p>click on the header to alert its value</p> </body> </html> Πανεπιστήμιο Δυτικής Μακεδονίας 52
53 Form Η κλάση Form καθορίζει τις βασικές ιδιότητες αντικειμένων που αντιστοιχούν σε HTML φόρμες. Γενικά η πρόσβαση σε ένα αντικείμενο που αντιστοιχεί σε μια φόρμα γίνεται μέσω του αντικειμένου Document που αντιστοιχεί στην ιστοσελίδα που περιέχει τη φόρμα. Πανεπιστήμιο Δυτικής Μακεδονίας 53
54 Form <html> <head> <script type="text/javascript"> function formreset() { document.getelementbyid("myform").reset() } </script> </head> <body> <form id="myform"> Name: <input type="text" size="20"><br /> Age: <input type="text" size="20"><br /> <br /> <input type="button" onclick="formreset()" value="reset"> </form> </body> </html> Πανεπιστήμιο Δυτικής Μακεδονίας 54
55 Button Η κλάση Button καθορίζει τις βασικές ιδιότητες αντικειμένων που αντιστοιχούν σε HTML κουμπιά. Γενικά η πρόσβαση σε ένα αντικείμενο που αντιστοιχεί σε ένα κουμπί γίνεται μέσω του αντικειμένου Form (ή Document) που αντιστοιχεί στη φόρμα (ή στην ιστοσελίδα γενικά) που περιέχει το κουμπί. Πανεπιστήμιο Δυτικής Μακεδονίας 55
56 Button <html> <head> <script type="text/javascript"> function alertvalue() { alert(document.getelementbyid("mybutton").value) } </script> </head> <body> <form> <input type="button" value="click me!" id="mybutton onclick="alertvalue()" /> </form> </body> </html> Πανεπιστήμιο Δυτικής Μακεδονίας 56
57 Select Η κλάση Select, καθορίζει τις βασικές ιδιότητες αντικειμένων που αντιστοιχούν σε HTML select στοιχεία. Από τις πιο βασικές ιδιότητες ενός αντικειμένου Select είναι η options. Ένας πίνακας με τις επιλογές που προσφέρονται στο χρήστη μέσω του HTML select στοιχείου. Επίσης η selectedindex ιδιότητα είναι σημαντική, καθώς η τιμή της αντιστοιχεί στην τρέχουσα επιλογή του χρήστη. Πανεπιστήμιο Δυτικής Μακεδονίας 57
58 Select <html> <head> <script type="text/javascript"> function getindex() { var x=document.getelementbyid("myselect"); alert(x.selectedindex); } </script> </head> <body> <form> Select your favorite fruit: <select id="myselect"> <option>apple</option> <option>orange</option> <option>pineapple</option> <option>banana</option> </select> <br /><br /> <input type="button" onclick="getindex()" value="alert index of selected option"> </form> Πανεπιστήμιο Δυτικής Μακεδονίας 58
59 Text, TextArea Οι κλάσεις Text, Textarea καθορίζουν τις βασικές ιδιότητες αντικειμένων που αντιστοιχούν σε HTML πεδία κειμένου και HTML περιοχές κειμένου. Από τις πιο βασικές ιδιότητες ενός αντικειμένου Text, Textarea είναι η value που περιέχει το τρέχον κείμενο που έχει εισαχθεί στο πεδίο κειμένου από το χρήστη. Πανεπιστήμιο Δυτικής Μακεδονίας 59
60 Text, TextArea <html> <head> <script type="text/javascript"> function alertvalue() { alert(document.getelementbyid("text1").value); } </script> </head> <body> <form> <input type="text" id="text1" value="hello world!" /> <input type="button" id="button1" onclick="alertvalue()" value="show default value" /> </form> </body> </html> Πανεπιστήμιο Δυτικής Μακεδονίας 60
61 Math, Date, String Η Math ορίζει μια λίστα από χρήσιμες μαθηματικές συναρτήσεις. abs(), ceil(), floor(), cos(), sin(), random(), round() Η Date ορίζει μια λίστα από χρήσιμες μεθόδους που σχετίζονται με τη διαχείριση ημερομηνιών. Γενικά, μπορούμε να δημιουργήσουμε ένα αντικείμενο Date είτε με βάση την τρέχουσα ημερομηνία, είτε με βάση κάποια οποιαδήποτε άλλη ημερομηνία. Η String προσφέρει χρήσιμες μεθόδους που επιτρέπουν την εύκολη διαχείριση αλφαριθμητικών. concat(), charat(), indexof(), substr, replace(), Πανεπιστήμιο Δυτικής Μακεδονίας 61
62 Σύνοψη κυριότερων συμβάντων Χειριστές συμβάντων onabort onblur onclick onchange onerror onfocus onload Εφαρμόσιμος σε: ετικέτες <img>. αντικείμενο παραθύρου, όλα τα αντικείμενα φόρμας (π.χ <input> ), και <frame>. πολλά ορατά στοιχεία όπως τα <a>, <div>, <body> κλπ. Χρησιμοποίησε το για να καλέσεις τη Javascript αν το ποντίκι περνάει κάποιους συνδέσμους. πεδία κειμένου, περιοχές κειμένου και λίστες επιλογών. πολλά ορατά στοιχεία όπως τα <a>, <div>, <body> κλπ. <body>, <img> και <frame> Πανεπιστήμιο Δυτικής Μακεδονίας 62
63 Σύνοψη κυριότερων συμβάντων Χειριστές συμβάντων onmouseover onmouseout onreset onselect onsubmit onunload Εφαρμόσιμος σε: πολλά ορατά στοιχεία όπως τα <a>, <div>, <body> κλπ. πολλά ορατά στοιχεία όπως τα <a>, <div>, <body> κλπ. ετικέτα <form>, ενεργοποιείται όταν μια φόρμα επαναφέρεται μέσω <input type= reset >. Στοιχεία με κείμενο. Πολύ συχνά χρησιμοποιείται μέσα σε πεδία κειμένου και περιοχές κειμένου. ετικέτα <form>, ενεργοποιείται όταν μια φόρμα ενεργοποιείται. <body> Πανεπιστήμιο Δυτικής Μακεδονίας 63
64 Πλήρη λίστα Javascript HTML DOM Μία πλήρη λίστα από Javascript και αναφορά του HTML DOM είναι εδώ: default.asp Πανεπιστήμιο Δυτικής Μακεδονίας 64
65 Παραδείγματα HTML DOM Javascript Τα επόμενα παραδείγματα είναι από το w3schools OM/dom_examples.asp Πανεπιστήμιο Δυτικής Μακεδονίας 65
66 Παραδείγματα HTML DOM αλλαγή συνόρου (border) Πανεπιστήμιο Δυτικής Μακεδονίας 66
67 Παραδείγματα HTML DOM αλλαγή μπλοκ κελιών, απόσταση κελιών (cellpading,cellspacing) Πανεπιστήμιο Δυτικής Μακεδονίας 67
68 Παραδείγματα HTML DOM αλλαγή γραμμών Πανεπιστήμιο Δυτικής Μακεδονίας 68
69 Παραδείγματα HTML DOM εμφάνιση innerhtml Πανεπιστήμιο Δυτικής Μακεδονίας 69
70 Παραδείγματα HTML DOM δημιουργία λεζάντας (caption) <script type="text/javascript"> function createcaption() { var x=document.getelementbyid('mytable'). createcaption(); x.innerhtml="my table caption"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 70
71 Αλλαγή στοίχισης (alignment) <script type="text/javascript"> function aligncell() { document.getelementbyid('td1').al ign="right"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 71
72 Αλλαγή στοίχισης (alignment) function valigncell() { var x=document.getelementbyid('mytable').rows[0].cells; x[0].valign="bottom"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 72
73 Αλλαγή κειμένου γραμμής (row text) <script type="text/javascript"> function changecontent() { var x=document.getelementbyid('mytable'). rows[0].cells; x[0].innerhtml="new CONTENT"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 73
74 Αλλαγή colspan <script type="text/javascript"> function setcolspan() { var x=document.getelementbyid('mytable'). rows[0].cells; x[0].colspan="2"; x[1].colspan="6"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 74
75 Αλλαγή στοίχισης (alignment) function topalign() { document.getelementbyid('tr2').va lign="top"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 75
76 Αλλαγή στοίχισης (alignment) function leftalign() { document.getelementbyid('header').align="left"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 76
77 Αλλαγή κειμένου σε κελί πίνακα function inscell() { var x=document.getelementbyid('tr2'). insertcell(0); x.innerhtml="john"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 77
78 Εισαγωγή νέας γραμμής με 2 κελιά <script type="text/javascript"> function insrow() { var x=document.getelementbyid('mytable').insertr ow(0); var y=x.insertcell(0); var z=x.insertcell(1); y.innerhtml="new CELL1"; z.innerhtml="new CELL2"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 78
79 Διαγραφή γραμμής σε πίνακα <script type="text/javascript"> function deleterow(r) { var i=r.parentnode.parentnode.rowinde x; document.getelementbyid('mytable' ).deleterow(i); } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 79
80 Αναγνωριστικό επιστροφής (return form id) <script type="text/javascript"> document.write(document.getelemen tbyid("myselect").form.id); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 80
81 Ενεργοποίηση / Απενεργοποίηση κουτί επολογής (select box) function disable() { document.getelementbyid("myselect").d isabled=true; } function enable() { document.getelementbyid("myselect").d isabled=false; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 81
82 Επιστροφή αριθμού επιλογών σε κουτί επιλογών (select box) function getlength() { alert(document.getelementbyid ("myselect").length); } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 82
83 Αλλαγή μεγέθους κουτιού επιλογών (select box) <script type="text/javascript"> function changesize() { document.getelementbyid("myselect ").size=4; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 83
84 Επιτρέψτε πολλαπλή επιλογή σε κουτί επιλογών (select box) <script type="text/javascript"> function selectmultiple() { document.getelementbyid("myselect").multiple=true; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 84
85 Εκτυπώστε όλες τις επιλογές από το κουτί επιλογών (select box) <script type="text/javascript"> function getoptions() { var x=document.getelementbyid("myselect"); txt="all options: " for (i=0;i<x.length;i++) { txt=txt + "\n" + x.options[i].text; } alert(txt); } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 85
86 Επιστροφή δείκτη από επιλεγμένη επιλογή <script type="text/javascript"> function getindex() { var x=document.getelementbyid("mysele ct"); alert(x.selectedindex); } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 86
87 Αλλαγή κειμένου από κουτί επιλογών (select box) <script type="text/javascript"> function changetext() { var x=document.getelementbyid("myselect") ; x.options[x.selectedindex].text="melo n"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 87
88 Διαγραφή επιλογής από κουτί επιλογών (select box) <script type="text/javascript"> function removeoption() { var x=document.getelementbyid("mysele ct"); x.remove(x.selectedindex); } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 88
89 Επιστροφή πατημένου πλήκτρου <script type="text/javascript"> function whichbutton(event) { alert(event.keycode); }</script> </head> <body onkeyup="whichbutton(event)"> Πανεπιστήμιο Δυτικής Μακεδονίας 89
90 Επιστροφή κουμπιού από το ποντίκι function whichbutton(event) { if (event.button==2) { alert("you clicked the right mouse button!"); } else { alert("you clicked the left mouse button!"); } }</script> </head> <body onmousedown="whichbutton(event)"> Πανεπιστήμιο Δυτικής Μακεδονίας 90
91 Συντεταγμένες από το ποντίκι <script type="text/javascript"> function show_coords(event) {x=event.clientx; y=event.clienty; alert("x coords: " + x + ", Y coords: " + y); }</script> </head> <body onmousedown="show_coords(event)"> Πανεπιστήμιο Δυτικής Μακεδονίας 91
92 Πατημένο ή όχι Shift <script type="text/javascript"> function iskeypressed(event) {if (event.shiftkey==1) { alert("the shift key was pressed!"); }else { alert("the shift key was NOT pressed!"); }}</script> <body onmousedown="iskeypressed(event)"> Πανεπιστήμιο Δυτικής Μακεδονίας 92
93 Επιστρέφει το όνομα της ετικέτας <script type="text/javascript"> function whichelement(e) {var targ; if (!e) { var e=window.event; } if (e.target) { targ=e.target; } else if (e.srcelement) { targ=e.srcelement; } if (targ.nodetype==3) // defeat Safari bug { targ = targ.parentnode; } var tname=targ.tagname; alert("you clicked on a " + tname + " element.");}</script> Πανεπιστήμιο Δυτικής Μακεδονίας 93
94 Επιστροφή μεθόδου από φόρμα <script type="text/javascript"> document.write(document.getel ementbyid("frm1").method); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 94
95 Επιστροφή ονόματος φόρμας <script type="text/javascript"> document.write(document.getelemen tbyid("frm1").name); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 95
96 Επιστροφή αριθμού στοιχείων φόρμας <script type="text/javascript"> document.write(document.getelementbyi d("frm1").length); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 96
97 Επιστροφή enc-type από φόρμα <script type="text/javascript"> document.write(document.getelemen tbyid("frm1").enctype); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 97
98 Επιστροφή ενέργειας από φόρμα <script type="text/javascript"> document.write(document.getelemen tbyid("frm1").action); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 98
99 Επιστροφή αποδεκτών χαρακτήρων φόρμας <form id="frm1" accept-charset="iso "> First name: <input type="text" name="fname" value="donald" /><br /> Last name: <input type="text" name="lname" value="duck" /><br /></form> <p>the value of the accept-charset attribute is: <script type="text/javascript"> document.write(document.getelementbyid("frm1 ").acceptcharset)</script> Πανεπιστήμιο Δυτικής Μακεδονίας 99
100 Επιστροφή τιμής από κάθε στοιχείο <p>return the value of each element in the form:</p> <script type="text/javascript"> var x=document.getelementbyid("frm1"); for (var i=0;i<x.length;i++) { document.write(x.elements[i].value); document.write("<br />"); }</script> Πανεπιστήμιο Δυτικής Μακεδονίας 100
101 Απενεργοποίηση κουμπιού function disable_button() { document.getelementbyid("mybu tton").disabled=true; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 101
102 Επιστροφή ονόματος κουμπιού <button id="button1" name="button1">click Me!</button> <p>the name of the button is: <script type="text/javascript"> document.write(document.getelemen tbyid("button1").name); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 102
103 Επιστροφή τύπου κουμπιού <script type="text/javascript"> function alerttype() {alert(document.getelementbyid("mybut ton").type)} </script> </head> <body> <button id="mybutton" type="button" onclick="alerttype()">click Me!</button> Πανεπιστήμιο Δυτικής Μακεδονίας 103
104 Επιστροφή τιμής κουμπιού <input type="button" id="button1" value="click Me!" /> <p>the text on the button is: <script type="text/javascript"> document.write(document.getelemen tbyid("button1").value); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 104
105 Επιστροφή χαρακτηριστικού (id) φόρμας <form id="form1"> <button id="button1">click me!</button> </form> <p>the id of the form containing the button is: <script type="text/javascript"> document.write(document.getelementbyi d("button1").form.id); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 105
106 Αλλαγή μεγέθους εικόνας <script type="text/javascript"> function changesize() { document.getelementbyid("compman" ).height="250"; document.getelementbyid("compman" ).width="300"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 106
107 Προσθήκη hspace και vspace <head> <script type="text/javascript"> function setspace() { document.getelementbyid("compman").hs pace="50"; document.getelementbyid("compman").vs pace="50"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 107
108 Μετάβαση σε χαμηλή ανάλυση εικόνας <img id="compman" src="compman.gif" lowsrc="compman_lowres.gif" alt="computerman" width="107" height="98" /> <br /> <script type="text/javascript"> var x=document.getelementbyid("compman"); document.write('<a href="' + x.lowsrc + '">Low resolution</a>'); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 108
109 Εύρεση ονόματος εικόνας <script type="text/javascript"> document.write("image name: "); document.write(document.getelemen tbyid('compman').name); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 109
110 Αντικατάσταση εικόνας <script type="text/javascript"> function changesrc() { document.getelementbyid("myimage" ).src="hackanm.gif"; } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 110
111 Αλλαγή άγκυρας στόχου (achor target) <script type="text/javascript"> function changetarget() {document.getelementbyid('w3s').target="_bla nk";} </script></head> <body> <a id="w3s" href=" W3Schools</a> <br /><br /> <input type="button" onclick="changetarget()" value="change target" /> Πανεπιστήμιο Δυτικής Μακεδονίας 111
112 Επιστροφή ονόματος άγκυρας (name of anchor) <h2><a id="c6" name="c6">chapter 6</a></h2> <p>this chapter explains ba bla bla</p> <script type="text/javascript"> document.write("return name of anchor: "); document.write(document.getelementbyi d("c6").name); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 112
113 Επιστροφή συνδέσμου (href) <p><a id="w3s" href=" hools</a></p> <script type="text/javascript"> document.write("return href of link: "); document.write(document.getelementbyi d('w3s').href); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 113
114 Αριθμός στοιχείων εισόδου <script type="text/javascript"> function getelements() { var x=document.getelementsbytagname(" input"); alert(x.length); } </script> Πανεπιστήμιο Δυτικής Μακεδονίας 114
115 Δημιουργία ενός pop-up σεναρίου (script) <script type="text/javascript"> w=window.open(); w.document.open(); w.document.write("<h1>hello World!</h1>"); w.document.close(); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 115
116 Εύρεση αναφοράς (referrer) Η αναφορά (referrer) αυτού του εγγράφου είναι: <script type="text/javascript"> document.write(document.referrer); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 116
117 Επιστροφή της τελευταίας ώρας τροποποίησης του εγγράφου Αυτό το έγγραφο τροποποιήθηκε τελευταία στις: <script type="text/javascript"> document.write(document.lastmodified); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 117
118 Επιστροφή κούκις (cookies) Τα κούκις συσχετίζονται με αυτό το έγγραφο: <script type="text/javascript"> document.write(document.cookie); </script> Πανεπιστήμιο Δυτικής Μακεδονίας 118
119 Επιστροφή χαρακτηριστικού (id) του πρώτου συνδέσμου <p>id of first area/link: <script type="text/javascript"> document.write(document.links[0]. id); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 119
120 Επιστροφή αριθμού συνδέσμων <p>number of areas/links: <script type="text/javascript"> document.write(document.links.len gth); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 120
121 Επιστροφή αριθμού εικόνων <p>number of images: <script type="text/javascript"> document.write(document.images.length); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 121
122 Επιστροφή ονόματος της πρώτης φόρμας <p>name of first form: <script type="text/javascript"> document.write(document.links[0].name); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 122
123 Επιστροφή αριθμού φορμών <p>number of forms: <script type="text/javascript"> document.write(document.forms.length); </script></p> Πανεπιστήμιο Δυτικής Μακεδονίας 123
124 Επιστροφή innerhtml της πρώτης άγκυρας (anchor) <p>innerhtml of the first anchor: <script type="text/javascript"> document.write(document.anchors[0].innerhtml); </script> </p> Πανεπιστήμιο Δυτικής Μακεδονίας 124
Document Objects. JavaScript Examples. Παράδειγμα 1: Απιθμόρ εικόνων ζε μία ζελίδα: <html> <body>
Document Objects JavaScript Examples Παράδειγμα 1: Απιθμόρ εικόνων ζε μία ζελίδα:
Javascript events. part 01
Javascript events part 01 Οδηγούμενη από γεγονότα (event-driven) Οδηγούμενες από γεγονότα ονομάζονται οι γλώσσες προγραμματισμού που η ροή του προγράμματος μπορεί να αλλάξει από γεγονότα. Η javascript
JAVASCRIPT EVENTS. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
JAVASCRIPT EVENTS Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες
DOM. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
DOM Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
WEB HTML. Web HTML MIDI. Web 5.1: HTML LAN
107 5 WEB Web HTML Perl PHP CGI Flash Plugin HTML MIDI Web HTML Web 5.1: HTML HTML HTML 5.1 Web Web HTML Web 24 LAN 5 WEB 108 Blog Web Web Web Blog PC 5.1 HTML HTML HTML html htm Windows HTML Macintosh
Προγραμματισμός Ιστοσελίδων: Javascript II
Προγραμματισμός Ιστοσελίδων: Javascript II Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Αντικείμενα (Objects) Αντικείμενο στη Javascript είναι οτιδήποτε
Διαδικτυακά Πολυμέσα και Γραφικά. Javascript και Web. Στελιος Σφακιανάκης Φθινόπωρο 2018
Διαδικτυακά Πολυμέσα και Γραφικά Javascript και Web Στελιος Σφακιανάκης Φθινόπωρο 2018 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Javascript
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
1. (25%) Αναφέρετε πέντε (5) «καλoύς» κανόνες (πρακτικές) σχεδίασης web sites (όχι περισσότερες από δύο γραμμές για κάθε κανόνα)
Πανεπιστήμιο Αιγαίου Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας Εξετάσεις στο μάθημα «Δικτυακά Πολυμέσα Ι» Φεβρουάριος 2011 Διδάσκων: Αντώνιος Νείρος Οδηγίες: H διάρκεια της εξέτασης είναι 2,5 ώρες.
2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>
ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά
Εργαστήριο #12. Βήμα 1 ο. Βήμα 2 ο. Βήμα 3 ο. Βήμα 4 ο.
Εργαστήριο #12 Από τα προηγούμενα εργαστήρια: Το εργαστήριο αυτό είναι ανεξάρτητο από τα προηγούμενα επειδή όμως ασχολείται με τη γλώσσα JavaScript, βεβαιωθείτε ότι έχετε διαβάσει το εισαγωγικό Παράρτημα
TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης
TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό
2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText
Συμβάντα (events) και χειριστές συμβάντων (event handlers) στη Javascript
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #9η: Javascript: Συμβάντα και Χειριστές Συμβάντων, Προσπέλαση
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
JAVASCRIPT 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
JAVASCRIPT 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Πανεπιστήμιο Αιγαίου. Χειμερινό εξάμηνο. Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #9η: Javascript: Συμβάντα και Χειριστές Συμβάντων, Προσπέλαση φορμών
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου
Προγραμματισμός Διαδικτύου Ασκήσεις Εργαστηρίου Ενότητα: ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ Νο 11 Δρ. Μηνάς Δασυγένης mdasyg@ieee.org Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Εργαστήριο Ψηφιακών Συστημάτων και
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
Φόρμες. Γενικοί κανόνες. Η ετικέτα <form>
Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις
Φόρµες σε HTML <FORM NAME = " όνοµα της φόρµας " TARGET = " συµβολικό όνοµα παραθύρου " ΑCTION = " URL διεύθυνση του εξυπηρετητή που θα αποσταλούν τα
Φόρµες και Javascript Φόρµες σε HTML
1. Απαιτήσεις εργασίας
ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 2 η Εργασία στο μάθημα «Δικτυακά Πολυμέσα Ι»: «Δημιουργία φόρμας για καταχώρηση στοιχείων με HTML - Javascript» Ημερομηνία παράδοσης:
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Δικτυακά Πολυμέσα Ι: 2 η Εργασία. Να δημιουργήσετε μια HTML σελίδα η οποία να περιέχει μία φόρμα που να μοιάζει με αυτή της παρακάτω εικόνας:
2 η ΕΡΓΑΣΙΑ: ΥΠΟΛΟΓΙΣΜΟΣ ΧΙΛΙΟΜΕΤΡΙΚΩΝ ΑΠΟΣΤΑΣΕΩΝ ΜΕ JAVASCRIPT Ημερομηνία Παράδοσης: Παρασκευή 15/1/2010 (Η εργασία θα γίνει σε ομάδες των 2 ατόμων!!) 1. Απαιτήσεις εργασίας Να δημιουργήσετε μια HTML
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό
Προγραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 9 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 15 Μαΐου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης Εισαγωγή XAMPP Βασική
Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client
ΕΣΔ 516 Τεχνολογίες Διαδικτύου Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client Περιεχόμενα Περιεχόμενα Javascript και HTML Βασική σύνταξη Μεταβλητές Τελεστές Συναρτήσεις
Συλλογή και Επεξεργασία Δεδομένων με Φόρμες
Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του
1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Προσθήκη Πίνακα (Table) 2. Εισαγωγή Και Μετακίνηση Κειμένου Σε Πίνακα 3. Εισαγωγή Στηλών Και Γραμμών Σε Πίνακα 4. Διαγραφή Στηλών Και Γραμμών Σε Πίνακα 5. Αλλαγή Πλάτους Στηλών Και
1. Απαιτήσεις εργασίας
ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 2 η Εργασία στο μάθημα «Δικτυακά Πολυμέσα Ι»: «Δημιουργία φόρμας για online αίτηση εργασίας με HTML - Javascript» Ημερομηνία παράδοσης:
DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων:
1 Πώς δημιουργούμε ένα νέο Site; Πατάμε Site/ Manage Sites και μετά στο παράθυρο που εμφανίζεται πατάμε το κουμπάκι New και επιλέγουμε Site Στη συνέχεια θα πρέπει να δώσουμε: Α το όνομα που θέλουμε να
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άδεια
JQUERY - AJAX Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος, Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Προγραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 6 Μαρτίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης HTML / HTML5 Λίστες,
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο
Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .
Κωνσταντίνος Σιασιάκος, ρ Πληροφορικής
Επιστηµονική Ευθύνη Κωνσταντίνος Σιασιάκος, ρ Πληροφορικής Συγγραφή Παντελής Μπαλής Το παρόν εκπαιδευτικό υλικό παράχθηκε στο πλαίσιο του Έργου «Κέντρα Εκπαίδευσης Ενηλίκων ΙΙ», το οποίο εντάσσεται στο
ΜΕΡΟΣ ΠΡΩΤΟ: Θεωρητική Προσέγγιση...15
ΠΕΡΙΕΧΟΜΕΝΑ Πρόλογος του συγγραφέα...11 Πρόλογος του καθηγητή Γεωργίου Δουκίδη...13 ΜΕΡΟΣ ΠΡΩΤΟ: Θεωρητική Προσέγγιση...15 ΚΕΦΑΛΑΙΟ 1. Η ΕΠΙΧΕΙΡΗΣΗ...17 Ορισμός της έννοιας της επιχείρησης και οι μορφές
Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7
The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI)
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας και η τεχνική CGI) Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 ΦΟΡΜΕΣ (FORM) Είναι ο κύριος
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Macromedia DreamWeaver 8.0.2. Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη
Macromedia DreamWeaver 8.0.2 Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη ο Μέρος 1 : Βασικές Έννοιες Εισαγωγή στην επιφάνεια εργασίας Insert Bar Property Bar Panels 10' Building a Web Page Παράδειγμα
Εισαγωγή στην πληροφορική
Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: (Μέρος Β) Javascript Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν εκπαιδευτικό
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Πανεπιστήμιο Δυτικής Μακεδονίας 1 Άδειες Χρήσης Το παρόν
1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Β. Εισαγωγή στον Προγραμματισμό Η/Υ με την JavaScript
Β. Εισαγωγή στον Προγραμματισμό Η/Υ με την JavaScript Β.1 Τύποι Δεδομένων Όλες οι γλώσσες προγραμματισμού (πρέπει να) υποστηρίζουν πέντε (5) πρωταρχικούς τύπους δεδομένων: char (character) int (integer)
Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ
Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ Τμ. ΔΕ- Χειμ. 2014-15 Ετικέτες meta 2 Δε περιέχουν περιεχόμενο Έχουν 2 ιδιότητες. content: (υποχρεωτικό): Τα ίδια τα μετα-δεδομένα name: Συνήθως author, keywords και
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επιπλέον δυνατότητες Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
Εγχειρίδιο του πίνακα χαρακτήρων
i Εγχειρίδιο του πίνακα ii Copyright 2004 Sun Microsystems Copyright 2003, 2004 Chee Bin HOH Δίνεται άδεια για αντιγραφή, διανομή και/ή τροποποίηση του εγγράφου υπό τους όρους της Ελεύθερης Άδειας Τεκμηρίωσης
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2 Βασικά χαρακτηριστικά
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Παιχνίδια σε Javascript
Παιχνίδια σε Javascript Μάθημα 1ο Μια Γρήγορη Εισαγωγή στη Γλώσσα Τα Εργαλεία Την Javascript μπορούμε (όπως και την HTML) να τη γράψουμε σε ένα απλό συντάκτη κειμένου, ή σε ένα περιβάλλον όπως το Bluefish
Γαβαλάς Δαμιανός dgavalas@aegean.gr
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #7η: Εισαγωγή στη γλώσσα σεναρίου Javascript, δομή σεναρίων Javascript,
Δημιουργία και επεξεργασία διανυσματικών επιπέδων στο QGIS
Δημιουργία και επεξεργασία διανυσματικών επιπέδων στο QGIS Δημιουργία επιπέδου σχεδίασης 1. Από το Menu Layer Create Layer New Shapefile Layer δημιουργούμε νέο επίπεδο. Στο παράθυρο που ανοίγει (Εικ. 1)
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML Σύνδεσμοι (Links) Παρουσίαση 10 η 1 Βελώνης Γεώργιος Καθηγητής Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην
Παράρτημα A: PHP, HTML φόρμες και το πρωτόκολλο HTTP.
Εργαστήριο #5 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Θα πρέπει να ξέρετε να εισάγετε ένα βασικό πρόγραμμα PHP μέσα σε μια ιστοσελίδα, τη χρήση της echo και τον χειρισμό απλών μεταβλητών
Εγχειρίδιο Οδηγιών. BrainStorm. Διαχείριση Πινάκων. Εισαγωγή, Μεταβολή, Διαγραφή Κατάταξη, Εντοπισμός Εγγραφών
Εγχειρίδιο Οδηγιών BrainStorm Διαχείριση Πινάκων Εισαγωγή, Μεταβολή, Διαγραφή Κατάταξη, Εντοπισμός Εγγραφών Στο κείμενο που ακολουθεί δίδονται οδηγίες για τον τρόπο με τον οποίο ο χειριστής δύναται : Να
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Στην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
ΕΠΛ 012. JavaScripts
ΕΠΛ 012 JavaScripts Γλώσσα JavaScript (JS) ηµιουργεί δυναµικές ιστοσελίδες και αλληλεπιδράσεις µε το χρήστη εν είναι Java, αλλά είναι αντικειµενοστραφής (απλό µοντέλο υποκειµένων) Objects, properties (τιµές
ΠΡΟΣΟΧΗ: Οι απαντήσεις πολλαπλής επιλογής µόνο πάνω στο ΦΥΛΛΟ ΑΠΑΝΤΗΣΕΩΝ
ΤΕΙ Σερρών Σχολή Τεχνολογικών Εφαρμογών, Τμήμα Πληροφορικής και Επικοινωνιών Προγραμματιστικές Εφαρμογές στο Διαδίκτυο (Θ) Τελική Εξέταση Διδάσκων: Δ. Κοτζίνος Όνοµα: Α.Μ. : Εξάµηνο : Αίθουσα Έδωσα Project
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς
Using Custom Python Expression Functions
Using Custom Python Expression Functions QGIS Tutorials and Tips Author Ujaval Gandhi http://google.com/+ujavalgandhi Translations by Christina Dimitriadou Paliogiannis Konstantinos Tom Karagkounis Despoina
ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ
ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ Περιγραφή και επεξήγηση της χρήσης του χώρου διαχείρισης της ιστοσελίδας για τους καλλιτέχνες 1 Περιεχόμενα Είσοδος στο χώρο διαχείρισης...3 Επεξεργασία της σελίδας
Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους
Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized
Περιεχόμενα. Πρόλογος...11
Περιεχόμενα Πρόλογος...11 Κεφάλαιο 1: Εισαγωγή...13 Η ιστορία της JavaScript...13 Τι είναι η JavaScript...15 Διαφορά μεταξύ σεναρίου και προγράμματος...16 Δυνατότητες και περιορισμοί της JavaScript...16
ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ Ανώτατο Εκπαιδευτικό Ίδρυμα Πειραιά Τεχνολογικού Τομέα. Προγραμματισμός Η/Υ
ΕΛΛΗΝΙΚΗ ΔΗΜΟΚΡΑΤΙΑ Ανώτατο Εκπαιδευτικό Ίδρυμα Πειραιά Τεχνολογικού Τομέα Προγραμματισμός Η/Υ Ενότητα 10 η : Το αντικείμενο Συλλογή (Collection) & τα αντικείμενα ListBox, CheckedListBox & ComboBox Ι.
ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2
ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ
Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Βάσεις δεδομένων και Microsoft Access Κεφάλαιο 2: Microsoft Access
Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Κεφάλαιο 1: Βάσεις δεδομένων και Microsoft Access... 9 Κεφάλαιο 2: Microsoft Access 2002... 20 Κεφάλαιο 3: Το σύστημα Βοήθειας του Microsoft Office ΧΡ... 36
Καταχώρηση Αποδείξεων
Καταχώρηση Αποδείξεων Το συγκεκριμένο εγχειρίδιο δημιουργήθηκε για να βοηθήσει την κατανόηση της διαδικασίας Καταχώρησης Αποδείξεων. Παρακάτω προτείνεται μια αλληλουχία ενεργειών την οποία ο χρήστης πρέπει
Τα προγράμματα σε ASP που χρησιμοποιήθηκαν για την υλοποίηση της διαχείρισης των μαθημάτων.
ΠΑΡΑΡΤΗΜΑ Α Τα προγράμματα σε ASP που χρησιμοποιήθηκαν για την υλοποίηση της διαχείρισης των μαθημάτων. Αρχική σελίδα (home.asp)
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών
ΜΑΘΗΜΑ 6 ΣΤΟΧΟΙ: 1. Δημιουργία Ενός Πίνακα 2. Εισαγωγή Και Μετακίνηση Δεδομένων 3. Επιλογή Κελιού, Στήλης, Γραμμής, Πίνακα 4. Εισαγωγή Στήλης Και Γραμμής 5. Διαγραφή Κελιού, Στήλης, Γραμμής Και Πίνακα
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου Decode, ISSEL Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών, Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Στόχος της ώρας
του προγράμματος diagrama_rohs.zip )
έκδοση 3.20 ( κατέβασμα του προγράμματος diagrama_rohs.zip ) Το πρόγραμμα αυτό γράφτηκε όχι να γίνει μια γλώσσα προγραμματισμού, αλλά να γίνει ένα εργαλείο για την εισαγωγή των μαθητών στον προγραμματισμό.
ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ
ΘΕΜΑ 1 ΠΡΟΣΟΜΟΙΩΣΗ ΕΞΕΤΑΣΗΣ 20.5.2012 ΑΠΑΝΤΗΣΕΙΣ Δίκτυο κινητής τηλεφωνίας τεχνολογίας GSM υποστηρίζει πολύ καλή κάλυψη σε ολόκληρο το γεωγραφικό χώρο της Ελλάδος. Ένας Πάροχος κινητών υπηρεσιών, για την
Σταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8
Εφαρμοσμένη Πληροφορική ΙΙ (Ε) To Ολοκληρωμένο Περιβάλλον Ανάπτυξης (Integrated Development Environment-IDE) Netbeans 8 Περιεχόμενα Κατέβασμα και εγκατάσταση Netbeans 8 Δημιουργία project εφαρμογής HTML(5)/CSS/Javascript
Σημειώσεις D3. Προφανώς εάν προσθέταμε μία ή περισσότερες παραγράφους, πριν το script, θα άλλαζε το text στην πρώτη.
Σημειώσεις D3 Είδαμε ότι το D3 είναι μία JavaScript βιβλιοθήκη που μας επιτρέπει να επεξεργαζόμαστε δυναμικά στοιχεία του DOM. Το D3 δίνει την δυνατότητα στον προγραμματιστή να επιλέγει πολλά στοιχεία
Access 2. Φτιάχνοντας μια DB, πίνακες και εισαγωγή εξωτερικών δεδομένων
Access 2 Φτιάχνοντας μια DB, πίνακες και εισαγωγή εξωτερικών δεδομένων Στόχοι Σχεδιασμός βάσεων δεδομένων και τη ρύθμιση ιδιοτήτων πεδίων Προβάλετε και τροποποιήστε τους τύπους δεδομένων πεδίων και τη
Γ3.3.Μ7 ΕΠΑΝΆΛΗΨΗ ΜΈΡΟΣ Α: ΈΝΝΟΙΕΣ ΤΙ ΕΊΝΑΙ Η VISUAL BASIC ΤΙ ΜΠΟΡΟΎΜΕ ΝΑ ΚΆΝΟΥΜΕ ΜΕ ΤΗ VISUAL BASIC ΑΝΤΙΚΕΊΜΕΝΑ: ΦΌΡΜΑ ΚΑΙ ΧΕΙΡΙΣΤΉΡΙΑ ΕΤΙΚΈΤΑ LABEL
Γ3.3.Μ7 ΕΠΑΝΆΛΗΨΗ ΜΈΡΟΣ Α: ΈΝΝΟΙΕΣ ΤΙ ΕΊΝΑΙ Η VISUAL BASIC Η Visual Basic είναι μια γλώσσα προγραμματισμού οδηγούμενη από συμβάντα που έχει ένα ολοκληρωμένο περιβάλλον ανάπτυξης Έχει δημιουργηθεί από τη
Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word
Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Επειδή οι μεταγενέστερες εκδόσεις του Word δεν περιλαμβάνουν στο μενού τη δυνατότητα δημιουργίας πολλαπλών
XML related standards
XML Handling XML related standards SAX (Simple API for XML) event-driven interface απλό γρήγορο διάτρεξη XML εγγράφου DOM (Document Object Model) tree-based representation αργό μνημοβόρο Αλλαγή δομής XML
Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία
Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε
ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: Τρόπος 1:
ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: 1. Εισαγωγή Εικόνας 2. Εισαγωγή Αρχείου Γραφικού 3. Εισαγωγή Αυτόματου Σχήματος 4. Τροποποίηση Γραφικών Αντικειμένων 5. Αλλαγή Μεγέθους Γραφικού Αντικειμένου 6. Περιστροφή Γραφικού Αντικειμένου
<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2
ΔΕ10: Πληροφοριακά Συστήματα Διοίκησης IΙ Εργαστήριο # 2 Dreamweaver 1/7 Εισαγωγή Το Dreamweaver είναι ένας HTML editor που αναπτύχθηκε από την Macromedia. Είναι WYSIWYG (What You See Is What You Get),
Οδηγός Χρήστη για τα Υδρολογικά εδοµένα
Οδηγός Χρήστη για τα Υδρολογικά εδοµένα 1. Πρόσβαση στην εφαρµογή...1 2. Εγγραφή και Είσοδος στον Ιστοχώρο...4 3. Σταθµοί...4 3.1. Πρόσβαση...5 3.2. Λίστα...5 3.3. Σύνθετη Αναζήτηση...5 4. Χάρτης...7 4.1.
Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5
Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί