Professional Documents
Culture Documents
1920 Book 5
1920 Book 5
1
© Copyright 2019, Εθνικό και Καποδιστριακό Πανεπιστήμιο Αθηνών, Π. Ε. Πετράκης.
2
Το παρόν έντυπο αποτελεί τμήμα του εκπαιδευτικού υλικού του μαθήματος “HTML 5 και
JavaScript: Τα Πρώτα Βήματα στο Web Development” που υπάγεται στο Πρόγραμμα
Συμπληρωματικής εξ Αποστάσεως Εκπαίδευσης με τίτλο “Εισαγωγή στην HTML5”.
Αποτελεί απαραίτητο συμπλήρωμα του ηλεκτρονικού υλικού που βρίσκεται στην
πλατφόρμα και αναπόσπαστο κομμάτι της εκπαιδευτικής διαδικασίας.
Η πρώτη διδακτική ενότητα εισάγει τους εκπαιδευόμενους στη χρησιμότητα και τη δομή
της γλώσσας προγραμματισμού για ιστοσελίδες HTML5, καθώς και τη λογική πάνω
στην οποία είναι χτισμένη η HTML5 (ετικέτες της HTML). Στη συνέχεια θα γνωρίσουν τα
εργαλεία τα οποία μπορούν να χρησιμοποιήσουν για να γράψουν κώδικα σε HTML5 και
τους τρόπους που θα μπορούν να γράφουν κώδικα και να πειραματίζονται
αλλάζοντάς τον.
Στη δεύτερη διδακτική ενότητα, οι εκπαιδευόμενοι θα μάθουν να γράφουν και να
μορφοποιούν κείμενο σε κώδικα HTML5. Πιο αναλυτικά θα μάθουν να χρησιμοποιούν
ετικέτες για τις παραγράφους, να γράφουν κείμενο μέσα σε αυτές και να το
μορφοποιούν. Στη μορφοποίηση περιλαμβάνονται η επιλογή γραμματοσειράς,
μεγέθους και χρώματος, η χρήση bold και italic, η χρήση highlight κτλ. Επίσης οι
εκπαιδευόμενοι θα μάθουν να τοποθετούν το κείμενό τους σε συγκεκριμένο σημείο της
ιστοσελίδας. Στη συνέχεια οι εκπαιδευόμενοι θα μάθουν να χρησιμοποιούν
διατεταγμένες και μη διατεταγμένες λίστες καθώς και να αλλάζουν τον τρόπο
αρίθμησης στις διατεταγμένες και τη μορφή των κουκίδων στις μη διατεταγμένες.
Στην τρίτη διδακτική ενότητα οι εκπαιδευόμενοι θα μάθουν να εισάγουν εικόνες στην
ιστοσελίδα που φτιάχνουν. Πιο αναλυτικά οι εκπαιδευόμενοι θα μάθουν να τοποθετούν
την εικόνα σε συγκεκριμένο σημείο της ιστοσελίδας και να αλλάζουν το μέγεθός της.
Επίσης θα μάθουν να χρησιμοποιούν το Canvas της HTML5 για να σχεδιάζουν εντός
της ιστοσελίδας. Δηλαδή, θα μπορούν να σχεδιάζουν γραμμές και σχήματα και να
επιφέρουν και τις κατάλληλες τροποποιήσεις. Τέλος, θα μάθουν να σχεδιάζουν και να
χρησιμοποιούν συνδέσεις προς άλλες σελίδες, emails, αναπαραγωγή ήχου, video κτλ.
Με την τέταρτη διδακτική ενότητα οι εκπαιδευόμενοι θα μάθουν τη δομή, τους κανόνες
σύνταξης, τους τελεστές και τη χρησιμότητα της JavaScript. Θα μάθουν, επίσης, για τη
βιβλιοθήκη JQuery Library της JavaScript, καθώς και τη λειτουργία του DOM.
Με την πέμπτη διδακτική ενότητα οι εκπαιδευόμενοι θα μάθουν τις βασικές εντολές της
JavaScript. Θα μάθουν, επίσης, να ορίζουν και να καλούν συναρτήσεις, καθώς και να
δημιουργούν και να ενσωματώνουν scripts στις ιστοσελίδες.
Τη συγγραφή του συγκεκριμένου εκπαιδευτικού υλικού πραγματοποίησε ο κ. Βαγγέλης
Στελλάτος, εξωτερικός συνεργάτης του Προγράμματος Συμπληρωματικής εξ
Αποστάσεως Εκπαίδευσης του Εθνικού και Καποδιστριακού Πανεπιστημίου Αθηνών.
3
ΠΕΡΙΕΧΟΜΕΝΑ
ΔΙΔΑΚΤΙΚΗ ΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML5: ΔΟΜΗ ΚΑΙ ΔΥΝΑΤΟΤΗΤΕΣ ......................... 5
ΕΙΣΑΓΩΓΙΚΕΣ ΠΑΡΑΤΗΡΗΣΕΙΣ ................................................................................................. 7
ΥΠΟΕΝΟΤΗΤΑ 1. ΤΙ ΕΙΔΟΥΣ ΓΛΩΣΣΑ ΕΙΝΑΙ Η HTML5;........................................................ 8
ΥΠΟΕΝΟΤΗΤΑ 2. ΔΟΜΗ ΚΑΙ ΔΥΝΑΤΟΤΗΤΕΣ. .................................................................. 10
ΥΠΟΕΝΟΤΗΤΑ 3. ΧΡΗΣΗ ΤΩΝ ΕΤΙΚΕΤΩΝ ΤΗΣ HTML5........................................................ 17
ΥΠΟΕΝΟΤΗΤΑ 4. Η ΠΡΩΤΗ ΜΟΥ ΣΕΛΙΔΑ ΜΕ ΤΟ “HELLO WORLD” KAI ΚΑΤΑΣΚΕΥΗ
BUTTONS ΚΑΙ NAVIGATION BAR ..................................................................................... 21
ΣΥΝΟΨΗ .............................................................................................................................. 27
4
ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ
5
6
Εισαγωγικές Παρατηρήσεις
Στην πρώτη υποενότητα θα παρουσιαστούν η προέλευση, τα πρότυπα, και οι
προδιαγραφές της HTML5. Επίσης θα γίνει αναφορά στα εργαλεία που χρειάζεται ένας
Web Developer για να προγραμματίσει σε HTML5.
Στη δεύτερη υποενότητα θα αναλυθεί η δομή ενός HTML αρχείου και θα δοθούν οδηγίες
για την εγκατάσταση και τον τρόπο λειτουργίας δύο HTML editors, το Notepad++ και το
Atom.
Στην τρίτη υποενότητα θα αναλυθούν τα στοιχεία Header, Footer καθώς και τα βήματα
για τη δημιουργία πίνακα με κώδικα HTML5.
Στην τέταρτη υποενότητα θα παρουσιαστεί ο τρόπος δημιουργίας της πρώτης σελίδας
του εκπαιδευόμενου “Hello World”.
Στην τελευταία υποενότητα θα παρουσιαστούν οι τρόποι δημιουργίας buttons τα οποία
θα χρησιμοποιηθούν στις ιστοσελίδες.
7
ΥΠΟΕΝΟΤΗΤΑ 1. ΤΙ ΕΙΔΟΥΣ ΓΛΩΣΣΑ ΕΙΝΑΙ Η HTML5;
1.1 Προέλευση
Η HTML5 (Hyper Text Markup Language) είναι μία γλώσσα προγραμματισμού η οποία
χρησιμοποιείται για την κατασκευή ιστοσελίδων. Τα εκτελέσιμα αρχεία της HTML είναι
αρχεία τύπου txt με τη διαφορά ότι αντί να έχουν κατάληξη (extension). txt έχουν
κατάληξη. HTML.
Παράδειγμα: index.HTML.
Τα αρχεία με την κατάληξη HTML μπορούν να διαβαστούν και να εκτελεστούν από τους
φυλλομετρητές (Browsers) όπως είναι οι Mozilla, Chrome, Opera, Safari κ.α.
Η γλώσσα HTML5 χρησιμοποιεί ετικέτες (tags) εκ των οποίων οι περισσότερες
χρησιμοποιούνται ανά δυο. Μια για να σημάνει την έναρξη μιας λειτουργίας και
μία για να σημάνει τη λήξη . Η διαφορά τους είναι ότι για τη λήξη της λειτουργίας
γράφουμε επιπλέον τον τελεστή slash (/).
Για παράδειγμα η ετικέτα σηματοδοτεί την αρχή μιας παραγράφου ενώ η ετικέτα
σηματοδοτεί το τέλος αυτής.
1.2 Πρότυπα-Προδιαγραφές
Όπως είναι εύκολα κατανοητό, η γλώσσα HTML για να μπορεί να εκτελείται από όλους
τους Browsers με υψηλά ποσοστά συμβατότητας πρέπει να έχει αυστηρές
προδιαγραφές και πρότυπα.
Τα πρότυπα και οι προδιαγραφές αναπτύσσονται και οριστικοποιούνται από την
ομάδα WHATWG (Web Hypertext Application Technology Working Group) η οποία έχει
website στη διεύθυνση:
whatwg.org/specs/web-apps/current-work/multipage/
Στη συνέχεια ο οργανισμός W3C, ο οποίος είναι υπεύθυνος για την επίβλεψη της
ανάπτυξης προϊόντων στο World Wide Web με διευθυντή τον Tim Berners Lee,
ενσωματώνει τις προδιαγραφές και τα πρότυπα HTML της ομάδας WHATWG.
Αξίζει εδώ να σημειώσουμε ότι οι αναφορές στους δύο οργανισμούς W3C και
WHATWG δεν είναι μόνο ιστορικής σημασίας, αλλά πρόκειται για δύο οργανισμούς
που διαμορφώνουν και καθοδηγούν την εξέλιξη του WWW και των websites. Επομένως,
κάποιος που θα θελήσει να ασχοληθεί επαγγελματικά με την κατασκευή ιστοσελίδων
8
θα πρέπει να ενημερώνεται από τους δύο αυτούς ιστότοπους για να βρίσκεται συνεχώς
στο επίκεντρο των εξελίξεων.
Χαρακτηριστικό είναι το screen shot της εικόνας 1 από το http://www.whatwg.org με
τελευταία ενημέρωση την 1η Αυγούστου 2014!
1.3 Συμβατότητες-Προσθήκες
Η γλώσσα HTML5 είναι πλέον συμβατή με όλους του γνωστούς Web browsers και οι
τροποποιήσεις σε σχέση με τη HTML4 είναι οι ακόλουθες:
αλλαγή της ετικέτας έναρξης του κώδικα της ιστοσελίδας doctype η οποία έχει
γίνει απλούστερη και συντομότερη,
προσθήκη νέων στοιχείων όπως τα Header, Footer, Nav, Article,
καλύτερη προσβασιμότητα από χρήστες με ειδικές ανάγκες και διαφορετικών
ειδών συσκευές (tablets, Desktops, Laptops, smartphones κτλ),
9
βελτιστοποίηση των μηχανών αναζήτησης (SEO, Search Engine Optimization),
ελαφρύτερος κώδικας και επομένως ταχύτερη εμφάνιση των αρχείων από τους
browsers.
Το Notepad++ είναι ένας free text editor όπως είναι και το Notepad των Windows. Η
διαφορά με το Notepad είναι ότι το Notepad++ είναι πιο φιλικό για τον χρήστη και έχει
κάποιες παραπάνω δυνατότητες. Το Notepad++ xρησιμοποιεί διαφορετικά χρώματα
για να μπορεί ο Web Developer να διαβάζει εύκολα τον κώδικα που συγγράφει.
Εγκατάσταση και τρόπος εργασίας με το Note Pad++.
Εγκατάσταση
Κατεβάστε το αρχείο npp…..Installer.exe δωρεάν από την διεύθυνση:
notepad-plus-plus.org
Στο directory που έχει αποθηκευθεί το αρχείο επιλέγετε και εκτελείτε το
npp…...Installer.exe χωρίς να χρειαστεί να κάνετε κάποια ιδιαίτερη παραμετροποίηση.
10
Εικόνα 2. Βασική διεπιφάνεια Notepad++
Το Atom είναι ένας text editor ο οποίος διατίθεται σε Mac και σε windows. Το Atom
είναι απλό στη χρήση και δωρεάν. Στο Mac υποστηρίζεται από την έκδοση OS X 10.8
καθώς και για μεταγενέστερες εκδόσεις του OS. Το Atom είναι κατάλληλο για
δημιουργία html αρχείων και μπορούμε να το βρούμε στην παρακάτω διεύθυνση:
atom.io
Μόλις εμφανιστεί η σελίδα στο browser αυτόματα θα εμφανιστεί και Button για
download κατάλληλο για το λειτουργικό που τρέχει ο υπολογιστής μας είτε πρόκειται
για Mac είτε για Windows.
Αφού κατεβάσουμε τα αρχεία και κάνουμε την εγκατάσταση θα γράψουμε τον κώδικα
html και έπειτα θα κάνουμε save as γράφοντας την επέκταση .html. για παράδειγμα
mac.html. Τέλος αφού κάνουμε κλικ επάνω στο αρχείο τότε θα εκτελεστεί ο κώδικας
html από τον browser που έχουμε ορίσει ως default. Το Mac OS αρχικά έχει ορισμένο
το Safari ως default Browser.
Σημείωση
Αν επιθυμούμε μπορούμε να χρησιμοποιήσουμε και το Text editor του Mac Os που
είναι το text Edit.
11
Στο Spotlight θα πληκτρολογήσουμε Textedit και θα επιλέξουμε το Text Edit. Αφού
γράψουμε τον κώδικα θα επιλέξουμε save και έπειτα θα πληκτρολογήσουμε το όνομα
του αρχείου όπως προηγουμένως.
Για να φτιάξουμε τη δομή ενός πολύ απλού στατικού website στον υπολογιστή μας
κάνουμε τα εξής βήματα:
1. Ανοίγουμε στο desktop των Windows ή σε όποιο άλλο directory του σκληρού
μας δίσκου, ένα folder με το όνομα του website που θέλουμε να
δημιουργήσουμε.
2. Μέσα σε αυτό το folder θα αποθηκεύσουμε την κεντρική σελίδα (Home Page) με
το όνομα index.HTML έτσι ώστε ο browser να καταλάβει ότι πρόκειται για την
κεντρική σελίδα.
3. Μέσα στο folder που δημιουργήσαμε θα ανοίξουμε ένα folder με όνομα css για
να αποθηκεύσουμε μέσα τα αρχεία css, ένα folder με όνομα images για να
αποθηκεύσουμε τις εικόνες και τα buttons, ένα με το όνομα videos για τα videos,
και ένα sound για να αποθηκεύσουμε τους ήχους.
Ο Browser για να εμφανίσει μια σελίδα πρέπει να τρέξει τον κώδικα κάποιων αρχείων.
Αυτά τα αρχεία μπορεί να «φτάνουν» στον Browser από τον server που φιλοξενεί ένα
12
website ή ακόμα και από μία διεύθυνση του σκληρού δίσκου του υπολογιστή μας. Το
μόνο που αλλάζει για τον Browser είναι ο τρόπος που λαμβάνει τα αρχεία.
Έτσι λοιπόν πριν φιλοξενηθεί το website από κάποιον server έχουμε την ευκαιρία να
δοκιμάσουμε όλο τον κώδικα που δημιουργήσαμε για τις ιστοσελίδες μας.
Πρέπει να προσέξουμε πολύ στον τίτλο του website να μην χρησιμοποιούμε κάτω
παύλες (_), αλλά κανονικές παύλες. Οι κάτω παύλες δυσκολεύουν τις μηχανές
αναζήτησης. Δηλαδή για παράδειγμα δεν δίνουμε τίτλο e_shop αλλά e-shop.
Εικόνα 4. Τυπική δομή ενός στατικού website το οποίο είναι εγκατεστημένο στο
desktop
13
Κάτω από την ετικέτα προσθέτουμε την ετικέτα με την
οποία προσδιορίζουμε τη γλώσσα των κειμένων που θα γράψουμε στην ιστοσελίδα.
14
Εικόνα 5. Τυπική διάταξη HTML κώδικα
Section: Η ενότητα Section (αν και μέχρι στιγμής δεν έχει ιδιαίτερη σημασία για τους
Browsers) χρησιμεύει στη διάρθρωση του κώδικα κατά τη συγγραφή του. Η ενότητα
Section περιλαμβάνεται μεταξύ των ετικετών και . Όταν ανοίξουμε δύο
section στη σειρά με την ετικέτα η δεύτερη ενότητα γίνεται υποενότητα της
πρώτης.
Nav: Με την ετικέτα Nav ορίζουμε ένα menu πλοήγησης μέσα στο οποίο περικλείουμε
τα σημαντικότερα στοιχεία πλοήγησης της ιστοσελίδας. Τα λιγότερο σημαντικά στοιχεία
πλοήγησης τα γράφουμε εκτός της ενότητας Nav.
15
Article: Ορίζει ένα εξωτερικό περιεχόμενο από άλλη ιστοσελίδα, blog κτλ. Ξεκινά με την
ετικέτα και τελειώνει με την ετικέτα .
Aside: Με την ετικέτα καθορίζουμε μία παράλληλη ενότητα η οποία εφάπτεται
του κυρίου περιεχομένου μιας σελίδας με το οποίο συνδέεται εννοιολογικά. Η ενότητα
aside είναι μια ξεχωριστή ως περιεχόμενο ενότητα η οποία θα μπορούσε να «σταθεί»
και μόνη της. Ξεκινά με την ετικέτα και τελειώνει με την ετικέτα .
Div: Σε περίπτωση που θελήσουμε να περιλάβουμε μία ομάδα στοιχείων σε μια ενότητα
η οποία δεν έχει κάποια εννοιολογική σημασία, όπως οι Article, Section, Aside, Nav,
τότε χρησιμοποιούμε την ενότητα Div. Αφού λοιπόν ομαδοποιήσουμε στοιχεία με την
ενότητα Div, μπορούμε να επιφέρουμε μορφοποιήσεις CSS, καθώς και να τοποθετούμε
μία ενότητα div σε μια συγκεκριμένη θέση της ιστοσελίδας.
Αυτό το πετυχαίνουμε με τα ακόλουθα βήματα:
1. Γράφουμε στην ενότητα Head, ανάμεσα σε ετικέτες style, την θέση που επιθυμούμε
να έχει το συγκεκριμένο div μέσα στην ιστοσελίδα μας. Παράδειγμα:
Αυτό σημαίνει ότι η απόλυτη θέση του στοιχείου p1 θα είναι 400 pixels από επάνω προς
τα κάτω και 800 pixels από αριστερά προς τα δεξιά.
16
ΥΠΟΕΝΟΤΗΤΑ 3. ΧΡΗΣΗ ΤΩΝ ΕΤΙΚΕΤΩΝ ΤΗΣ HTML5
Header: Για να εισάγουμε μια επικεφαλίδα στην ιστοσελίδα μας πληκτρολογούμε στην
ενότητα Body την ετικέτα όπου number ένας αριθμός από 1-6. Έτσι η h1είναι η
μεγαλύτερη και σημαντικότερη επικεφαλίδα και η h6 είναι η μικρότερη και πιο ασήμαντη
επικεφαλίδα. Οι μηχανές αναζήτησης ανιχνεύουν τις επικεφαλίδες h1. Οι
προγραμματιστές των ιστοσελίδων δεν πρέπει να κάνουν κατάχρηση των h1
επικεφαλίδων λόγω της ανίχνευσής τους από τις μηχανές αναζήτησης. Επίσης όταν
χρησιμοποιούμε δύο επικεφαλίδες τη μία κάτω από την άλλη, η πρώτη επικεφαλίδα
πρέπει να είναι μεγαλύτερου μεγέθους από τη δεύτερη.
Αν θέλουμε να εισάγουμε ένα σύνολο επικεφαλίδων, τις περιλαμβάνουμε μεταξύ των
ετικετών και . Πρέπει να προσέξουμε η κάθε μία επικεφαλίδα να είναι ένα
μέγεθος μικρότερο από αυτή που είναι από επάνω της.
Παράδειγμα:
Δημιουργία σχολίων: Κατά τη συγγραφή κώδικα HTML5, όπως σε όλες τις γλώσσες
προγραμματισμού, ενδείκνυται η χρήση σχολίων για να θυμάται εύκολα ο Developer
τις λειτουργίες των τμημάτων του κώδικα καθώς και να καταλαβαίνουν και οι
17
συνάδελφοι του που συγγράφουν άλλα κομμάτια του κώδικα. Η δημιουργία σχολίου
στην HTML5 περιλαμβάνεται μεταξύ των συμβόλων και .
Ετικέτα table: Για να ορίσουμε την αρχή του κώδικα για τη δημιουργία πίνακα
προσθέτουμε στον κώδικά μας την ετικέτα , ενώ για το τέλος του κώδικα την
ετικέτα . Τα στοιχεία thead, tbody και tfoot δεν είναι υποχρεωτικά, με την
επισήμανση ότι αν υπάρχει στοιχείο thead ή tfoot πρέπει οπωσδήποτε να υπάρχει και
στοιχείο tbody.
Ετικέτα caption: για να προσθέσουμε τον τίτλο του πίνακα τον εσωκλείουμε μεταξύ των
ετικετών και . Το στοιχείο caption μπορεί να περιλαμβάνει και άλλα
στοιχεία, όπως παράγραφος κ.α.
Ετικέτα thead: Την ετικέτα τη χρησιμοποιούμε στην περίπτωση που θέλουμε να
ορίσουμε τις πρώτες x γραμμές ως κεφαλίδα του πίνακα. Τότε αυτές τις γραμμές τις
περιλαμβάνουμε μεταξύ των ετικετών και .
Ετικέτα tbody: Την ετικέτα τη χρησιμοποιούμε στην περίπτωση που θέλουμε να
ορίσουμε τις γραμμές δεδομένων του πίνακα. Τότε αυτές τις γραμμές τις
περιλαμβάνουμε μεταξύ των ετικετών και .
Ετικέτα tfoot: Την ετικέτα τη χρησιμοποιούμε στην περίπτωση που θέλουμε να
ορίσουμε τις τελευταίες κ γραμμές ως υποσέλιδο του πίνακα. Τότε αυτές τις γραμμές τις
περιλαμβάνουμε μεταξύ των ετικετών και .
18
3.2.2 Δημιουργώντας τις γραμμές ενός πίνακα
Η δημιουργία του πίνακα γίνεται γραμμή προς γραμμή ξεκινώντας από πάνω προς τα
κάτω. Δηλαδή ξεκινάμε να ορίζουμε τα κελιά της πρώτης γραμμής ένα προς ένα, έπειτα
της δεύτερης ένα προς ένα, κ.ο.κ.
Στη συλλογή των video στο τέλος της διδακτικής ενότητας περιλαμβάνεται παράδειγμα
με πίνακα και ο αντίστοιχος κώδικας περιλαμβάνεται στο συνοδευτικό υλικό της
διδακτικής ενότητας.
Ετικέτα tr: Ανάμεσα στις ετικέτες και περιλαμβάνουμε το περιεχόμενο της κάθε
γραμμής ξεχωριστά.
Ετικέτα th: Αν το περιεχόμενο του κελιού είναι επικεφαλίδα, τότε πρέπει να βρίσκεται
ανάμεσα στις ετικέτες και .
Αν η επικεφαλίδα αναφέρεται στη γραμμή που βρίσκεται το κελί του πίνακα,
προσθέτουμε μόνο στην ετικέτα αρχής:
Αν η επικεφαλίδα αναφέρεται στη στήλη που βρίσκεται το κελί του πίνακα, προσθέτουμε
μόνο στην ετικέτα αρχής:
Ετικέτα td: Αν το περιεχόμενο του κελιού είναι δεδομένα, τότε πρέπει να βρίσκεται
ανάμεσα στις ετικέτες και .
Για να δημιουργήσουμε ένα πίνακα σε μια ιστοσελίδα μέσα στην ενότητα Body του
κώδικα HTML5 κάνουμε τα ακόλουθα βήματα:
19
5. Εισάγουμε ετικέτες ή για επικεφαλίδες αντίστοιχης
στήλης ή γραμμής πίνακα.
6. Κλείνουμε τις προηγούμενες ετικέτες με .
7. Επαναλαμβάνουμε τα βήματα 4-6 για να εισάγουμε τα περιεχόμενα των
υπόλοιπων κελιών της γραμμής.
8. Ορίζουμε το τέλος της γραμμής με την ετικέτα
9. Επαναλαμβάνουμε τα βήματα 4-8 για να προσθέσουμε και άλλες γραμμές στη
ενότητα thead του πίνακα.
10. Εισάγουμε την ετικέτα για να ορίσουμε το τέλος του στοιχείου thead.
Ενότητα tbody:
1. Εισάγουμε την ετικέτα για να ορίσουμε τις γραμμές που αποτελούν τις
γραμμές δεδομένων του πίνακα.
2. Εισάγουμε την ετικέτα για να εσωκλείσουμε τα περιεχόμενα των κελιών της
συγκεκριμένης γραμμής.
3. Εισάγουμε ετικέτες ή για επικεφαλίδες αντίστοιχης
στήλης ή γραμμής πίνακα.
4. Κλείνουμε τις προηγούμενες ετικέτες με .
5. Εισάγουμε ετικέτες για να γράψουμε τα περιεχόμενα των κελιών δεδομένων.
6. Κλείνουμε τις προηγούμενες ετικέτες με .
7. Επαναλαμβάνουμε τα βήματα 3-6 για να εισάγουμε τα περιεχόμενα των
υπόλοιπων κελιών της γραμμής.
8. Ορίζουμε το τέλος της γραμμής με την ετικέτα
9. Επαναλαμβάνουμε τα βήματα 2-8 για να προσθέσουμε και άλλες γραμμές στην
ενότητα tbody του πίνακα.
10. Εισάγουμε την ετικέτα για να ορίσουμε το τέλος του στοιχείου tbody.
Ενότητα tfoot: Κάνουμε τα ίδια ακριβώς με την ενότητα tbody, με τη διαφορά ότι
χρησιμοποιούμε τις ετικέτες tfoot αντί για tbody.
20
ΥΠΟΕΝΟΤΗΤΑ 4. Η ΠΡΩΤΗ ΜΟΥ ΣΕΛΙΔΑ ΜΕ ΤΟ “HELLO WORLD” KAI
ΚΑΤΑΣΚΕΥΗ BUTTONS ΚΑΙ NAVIGATION BAR
Σε αυτή την υποενότητα θα μάθουμε πώς να δημιουργήσουμε την πρώτη μας σελίδα.
Επίσης θα μπορούμε να κάνουμε τα ακόλουθα:
θα δημιουργήσουμε απλά buttons με το PowerPoint, και
θα δημιουργήσουμε απλά navigation menus τα οποία θα χρησιμοποιήσουμε σε
άλλη διδακτική ενότητα για να συνδέσουμε τις ιστοσελίδες ενός website μεταξύ
τους.
Στο σημείο αυτό θα πρέπει να διευκρινίσουμε ότι μόλις ολοκληρωθούν οι ενότητες για
CSS και Javasript θα μπορούμε να δημιουργήσουμε πιο σύνθετα και ολοκληρωμένα
buttons και navigation menus. Επίσης υπάρχει μεγάλη ποικιλία από tools τα οποία
ονομάζονται button makers, με τη βοήθεια των οποίων μπορούμε να δημιουργήσουμε
buttons και navigation menus και να τα ενσωματώσουμε στον κώδικά μας.
Παραδείγματα: Easy button and menu maker, button generator, button shop, crystal
button, κ.α.
4. Στην επόμενη γραμμή θα ορίσουμε την αρχή της ενότητας Head με την
αντίστοιχη ετικέτα:
21
6. Θα δηλώσουμε τον τίτλο της ιστοσελίδας ο οποίος θα εμφανίζεται στην καρτέλα
του Browser εσωκλείοντάς τον ανάμεσα στις ετικέτες:
7. Στην επόμενη γραμμή θα δηλώσουμε το τέλος της ενότητας head με την ετικέτα:
8. Στην επόμενη γραμμή θα δηλώσουμε την αρχή της ενότητας body με την ετικέτα:
10. Στην επόμενη γραμμή θα δηλώσουμε το τέλος της ενότητας body με την ετικέτα:
11. Στην τελευταία γραμμή, για να δηλώσουμε το τέλος του κώδικα HTML της
ιστοσελίδας, θα προσθέσουμε την ετικέτα:
22
Θα δημιουργήσουμε δύο συνδέσεις href για να φορτωθούν στην ιστοσελίδα τα
buttons τα οποία είναι αποθηκευμένα στον υποκατάλογο images (για τις
συνδέσεις href θα μιλήσουμε σε επόμενη διδακτική ενότητα).
23
4.4 Παρουσίαση του Button maker «Easy Menu and Button Maker»
(windows)
Το Easy Menu and Button Maker έχει τέσσερα βασικά μενού που εμφανίζονται με την
μορφή καρτελών (ribbons) που έχει υιοθετήσει το Microsoft Office 2007 καθώς και οι
μεταγενέστερες εκδόσεις του:
File Ribbon: Στο menu File υπάρχουν οι κλασικές επιλογές για τα projects όπως save,
save as, open. Επίσης υπάρχουν και οι επιλογές save menu as HTML με την οποία
αποθηκεύουμε ένα menu που δημιουργήσαμε με τη μορφή HTML.
Επίσης υπάρχει και η επιλογή New με την οποία επιλέγουμε απευθείας ένα template
όπως κάνουμε και στο Ms Office.
Home Ribbon: Στην καρτέλα Home υπάρχουν buttons για να προσθέσουμε αντικείμενα,
επιλογές για την αποθήκευση του Button που θα δημιουργήσουμε και κλασικές
επιλογές select, do-undo κτλ.
24
Επίσης υπάρχει επιλογή για τη μορφή του menu που θα δημιουργήσουμε, οριζόντια,
κάθετη δεξιά ή κάθετη αριστερά. Τέλος, υπάρχουν button save menu as HTML
(αποθήκευση με τη μορφή HTML), insert into webpage (προσάρτηση του κώδικα σε
κώδικα HTML μιας σελίδας που ήδη έχουμε δημιουργήσει) και επιλογή preview (για να
δούμε την τελική μορφή του button ή menu που δημιουργήσαμε).
Κάτω από την καρτέλα home ribbon υπάρχει ο χώρος (καμβάς) όπου δημιουργούμε
και επεξεργαζόμαστε τα buttons και τα menus και κάτω από αυτή την περιοχή αυτή
υπάρχουν τρεις καρτέλες με templates:
I. Complete template: Όταν την επιλέξουμε, εμφανίζονται πλήρη templates από
συλλογές menus τα οποία μπορούμε να τροποποιήσουμε και να
επεξεργαστούμε.
II. Button template: Όταν την επιλέξουμε εμφανίζονται templates από buttons.
III. Submenu template: Όταν την επιλέξουμε εμφανίζονται πλήρη templates από
συλλογές Submenus.
Publish ribbon: Επιλογές έκδοσης που περιέχονται και στην καρτέλα Home.
Help ribbon: Επιλογή βοήθειας, manual και αγοράς του προϊόντος..
4.5.3 Βήματα για την δημιουργία buttons με το Easy Menu and Button Maker
25
περιοχής του, όταν ο κέρσορας αιωρείται πάνω από το button, και όταν έχουμε
επιλογή κλικ του button από το Mouse.
Εικόνα 8. Διεπιφάνεια της καρτέλας Home του Easy Button and Menu Maker
Μια πολύ καλή λύση για να δημιουργήσουμε buttons είναι κάποιο online tool όπως το
dabuttonfactory το οποίο δε χρειάζεται εγκατάσταση και υποστηρίζεται από όλα τα
λειτουργικά.
Αρχικά θα πληκτρολογήσουμε τη διεύθυνση https://dabuttonfactory.com/
Στη συνέχεια με τη βοήθεια των Menus που υπάρχουν στη σελίδα θα δημιουργήσουμε
το button.
Αφού δημιουργήσουμε το button θα επιλέξουμε download για να αποθηκεύσουμε το
button στη μορφή που έχουμε επιλέξει (png, jpg κτλ).
Στο ηλεκτρονικό υλικό της ενότητας, μπορείτε να δείτε κάποια παραδείγματα σε μορφή
βίντεο.
26
Παράδειγμα 1. Δημιουργία σελίδας HTML “Hello world” με Notepad++ part 1
Τέλος, στο συνοδευτικό υλικό που βρίσκεται με την ηλεκτρονική μορφή της ενότητας
στην εκπαιδευτική πλατφόρμα μπορείτε να δείτε τα αρχεία που χρησιμοποιήθηκαν στη
συγκεκριμένη διδακτική ενότητα.
Σύνοψη
Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:
Μία HTML σελίδα μπορεί να εκτελεστεί από ένα browser, και μπορεί είτε να είναι
αποθηκευμένη σε ένα server που φιλοξενεί το website, είτε να είναι αποθηκευμένη σε
τοπικό αποθηκευτικό μέσο του υπολογιστή.
Ένα έγγραφο HTML περιλαμβάνει την ενότητα Head, όπου περιλαμβάνονται βασικές
πληροφορίες της σελίδας, και την ενότητα Body, στην οποία γράφεται ο κώδικας
για όλες τις πληροφορίες οι οποίες γίνονται ορατές από τον επισκέπτη.
Η γλώσσα HTML βασίζεται στη λειτουργία ετικετών (tags) με τις οποίες συνήθως
μπορούμε να σημάνουμε την έναρξη και τη λήξη μιας λειτουργίας.
Ένας καλός HTML Editor για ξεκίνημα είναι το Notepad++ το οποίο είναι εύκολο στην
εγκατάσταση και απλό στον τρόπο λειτουργίας του.
Οι βασικές ενότητες που υποστηρίζει η HTML5 είναι οι Section, Article, Aside, Nav.
Με κώδικα HTML μπορούμε να δημιουργήσουμε πίνακες στις ιστοσελίδες μας.
Μπορούμε να δημιουργήσουμε απλά buttons, εύκολα με το Powerpoint και πιο
πολύπλοκα μαζί με navigation menus, με διάφορα tools τα οποία ονομάζονται
button makers. Αφού δημιουργήσουμε buttons και menus με ένα button maker, στη
συνέχεια μπορούμε να τα ενσωματώσουμε αυτόματα στον κώδικα HTML μιας
ιστοσελίδας.
27
28
ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ
29
30
Εισαγωγικές Παρατηρήσεις
Στην πρώτη υποενότητα θα αναλυθούν οι έννοιες: γονικό στοιχείο θυγατρικό στοιχείο
και απόγονος. Στη συνέχεια θα αναλυθεί εκτενώς η δημιουργία και η μορφοποίηση
παραγράφου και τέλος θα αναλυθούν τα στοιχεία address και time.
Στη δεύτερη υποενότητα θα αναλυθεί η εισαγωγή παραπομπής, αναφοράς
επισήμανσης καθώς και η σήμανση στοιχείων κειμένου με ιδιαίτερη σημασία όπως
κώδικας γλώσσας προγραμματισμού και μεταβλητές. Επίσης θα αναλυθεί η εισαγωγή
κειμένου σε περιοχές κειμένου καθώς επίσης και εισαγωγή search box και spinbox.
Στην τρίτη υποενότητα θα αναλυθούν οι δυνατότητες μορφοποίησης κειμένου καθώς
και η βελτίωση προσπελασιμότητας με τη βοήθεια της WAI ARIA.
Στην τέταρτη υποενότητα θα αναλυθεί ο τρόπος δημιουργίας διατεταγμένων και μη
διατεταγμένων λιστών. Θα αναλυθεί επίσης η εισαγωγή dropdownlist, radio buttons και
visual text effects.
31
ΥΠΟΕΝΟΤΗΤΑ 1. ΔΗΜΙΟΥΡΓΙΑ ΠΑΡΑΓΡΑΦΟΥ
Πηγή: tutorialspoint.com/html5/html5_entities.htm
Παράδειγμα:
Έστω ότι θέλω να εισαγάγω το σύμβολο του copyright. Τότε γράφω:
Στοιχείο: Παράγραφος.
33
Σύνταξη: Ξεκινά με την ετικέτα και τελειώνει με την ετικέτα .
Κώδικας παραδείγματος 1:
Στοιχείο
34
Η ετικέτα style μας επιτρέπει να ορίσουμε μορφοποιήσεις για τη γραμματοσειρά. Αρχίζει
με την ετικέτα και τελειώνει με την ετικέτα . Μέσα στο στοιχείο style
μπορούμε να δηλώσουμε το χρώμα του κειμένου τη γραμματοσειρά, το μέγεθός της
κ.α.
Σημείωση: για να επιφέρουμε αλλαγές όπως αυτές που περιγράφονται παρακάτω στο
στυλ της παραγράφου ή άλλου στοιχείου κειμένου της HTML5 υπάρχουν οι εξής τρόποι:
Α’ τρόπος: Ανάμεσα στις ετικέτες και του HTML κώδικα παραθέτουμε τις
γραμμές:
Γ’ τρόπος: Ανάμεσα στις ετικέτες και του HTML κώδικα παραθέτουμε τις
γραμμές:
Στη συνέχεια, ανάμεσα στις ετικέτες και του HTML κώδικα παραθέτουμε τις
γραμμές όπου αντιστοιχούμε τη συγκεκριμένη παράγραφο με την κλάση Paragraph1,
έτσι ώστε να κληρονομήσει το style που δηλώθηκε στο στοιχείο head. Η κλάση
αναλύεται στην υποενότητα 3 της συγκεκριμένης διδακτικής ενότητας.
35
Κώδικας παραδείγματος 2
Font family
Μπορούμε να ορίσουμε ένα σύνολο γραμματοσειρών για στοιχεία όπως η
παράγραφος, επικεφαλίδες κτλ. Με τη δήλωση περισσότερων από μιας
γραμματοσειρών, μας δίνεται η δυνατότητα να ορίσουμε εναλλακτικές γραμματοσειρές
στην περίπτωση που κάποιος browser δεν υποστηρίζει κάποια. Δηλαδή η
γραμματοσειρά που βρίσκεται πρώτη στην ιδιότητα font family θα είναι η πρώτη
επιλογή -αν αυτή δεν υπάρχει,ο browser “κοιτάζει” τη δεύτερη κτλ.
Σύνταξη:
36
Πίνακας 2. Διαθέσιμες γραμματοσειρές για εισαγωγή κειμένου στην HTML5
Πηγή: tutorialspoint.com/html5/html5_fonts.htm
Font size
Καθορίζει το μέγεθος της γραμματοσειράς. Η τιμή της ιδιότητας αυτής μεταβιβάζεται
κληρονομικά και στα υπόλοιπα θυγατρικά στοιχεία της παραγράφου. Υπάρχουν τρεις
τρόποι καθορισμού του μεγέθους της γραμματοσειράς:
Α΄ τρόπος: Αν θέλουμε το προεπιλεγμένο μέγεθος μπορούμε να δηλώσουμε την
ιδιότητα ως εξής:
37
Γ΄ τρόπος: Μπορούμε να δηλώσουμε προεπιλεγμένα μεγέθη γραμματοσειράς με τις
δηλώσεις από το μικρότερο στο μεγαλύτερο:
xx-small, x-small,small, medium, large, x-large και xx-large.
Σύνταξη:
Font weight
Χρησιμοποιείται για να καθορίσουμε πόσο έντονη επιθυμούμε τη γραμματοσειρά.
Η προεπιλογή όσον αφορά στο πόσο έντονη είναι η γραμματοσειρά δηλώνεται ως
font weight:normal, ενώ η έντονη font weight:bold
Σύνταξη:
Κώδικας παραδείγματος 3:
38
Οθόνη browser παραδείγματος 3:
Color
Η ιδιότητα color χρησιμοποιείται για να καθοριστεί το χρώμα της γραμματοσειράς. Η
ιδιότητα αυτή κληρονομείται.
Σύνταξη:
Font style
Χρησιμοποιείται για να επιλέξουμε κάποιο έτοιμο στυλ παραγράφου ανάμεσα στα:
Normal, italic, oblique, initial, inherit.
Σύνταξη:
Εκεί που έχει κενό συμπληρώνουμε μία από τις προεπιλογές normal,italic κτλ.
39
ή
Αναπαράσταση RGB
Το κάθε χρώμα αναλύεται ως μίξη των ποσοτήτων των χρωμάτων κόκκινο, πράσινο,
μπλε με τιμές στο δεκαδικό σύστημα και με τη μορφή rgb(r, g, b) με τιμές για την κάθε
μεταβλητή από το 1 ως το 255. Εναλλακτικά μπορούμε να γράφουμε τις αναλογίες των
χρωμάτων με τη μορφή (r%, g%, b%). Υπάρχει επίσης και η μορφή rgba(r,g,b,a) όπου a
είναι δεκαδικός αριθμός από το 0-1 και αντιστοιχεί στη διαφάνεια.
Συμβουλή: Αν θέλετε να φτιάξετε ένα δικό σας χρώμα μπορείτε εύκολα στο Microsoft
office να επιλέξετε περισσότερα χρώματαπροσαρμοσμένα και αυτόματα να σας
εμφανίσει το office τις τιμές rgb.
Σύνταξη:
Αναπαράσταση hsla
Στην αναπαράσταση hsla(h,s,l,a) ο αριθμός h είναι ακέραιος από το 0 ως το 360 και
καθορίζει τη χροιά, ενώ οι μεταβλητές s και l είναι ποσοστά κορεσμού από 0-100 και
φωτεινότητας. Το a είναι ένα δεκαδικός αριθμός από 0-1 που καθορίζει τη διαφάνεια.
Αν θέλουμε μπορούμε να χρησιμοποιήσουμε τη μορφή hsl χωρίς το βαθμό διαφάνειας.
Σύνταξη:
40
Απόσταση μεταξύ των λέξεων (word-spacing)
Μπορούμε να ορίσουμε την απόσταση μεταξύ των λέξεων με την ιδιότητα word-
spacing: μονάδες σε Pixels ή em. Η ιδιότητα word-spacing κληρονομείται.
Σύνταξη:
Κώδικας παραδείγματος 4:
41
Οθόνη browser παραδείγματος 4:
42
Κώδικας παραδείγματος 5:
43
Κώδικας παραδείγματος 6:
Σύνταξη:
44
Παράδειγμα 7. Διαχείριση κενών διαστημάτων
Κώδικας παραδείγματος 7:
45
Παράδειγμα 8. Στοίχιση κειμένου
Κώδικας παραδείγματος 8:
Στοιχείο: address
46
Στοιχεία ημερομηνίας και χρόνου
Κώδικας παραδείγματος 9:
Στοιχείο time: Για να ορίσουμε συγκεκριμένη ώρα και ημερομηνία σε μια σελίδα HTML
τότε χρησιμοποιούμε το στοιχείο time. Το στοιχείο time μπορεί να συνδυαστεί με τις
ιδιότητες datetime και pubdate για να δηλώσουμε μία ημερομηνία ή μία ημερομηνία
έκδοσης ενός άρθρου ή βιβλίου αντίστοιχα. Η τιμή της datetime αναγνωρίζεται μόνο
από τον υπολογιστή. Η ιδιότητα pubdate συνήθως περιλαμβάνεται σε στοιχείο header
ή footer.
Σύνταξη:
Παράδειγμα
47
Παράδειγμα 10. Στοιχείο time
48
Δίνοντας έμφαση σε κείμενο: Για να δώσουμε έμφαση σε κείμενο χρησιμοποιούμε το
στοιχείο em.
Σύνταξη:
Επισήμανση κειμένου: Για να επισημάνουμε ένα κείμενο όπως ακριβώς και με ένα
μαρκαδόρο highlighter σε ένα βιβλίο τότε χρησιμοποιούμε το στοιχείο mark.
Στο στοιχείο head προσθέτουμε την ιδιότητα background-color για να επιλέξουμε το
χρώμα του μαρκαδόρου ως εξής:
Στη θέση του κενού πληκτρολογούμε το επιθυμητό χρώμα του μαρκαδόρου με το οποίο
θα επισημάνουμε τμήμα του κειμένου.
Σύνταξη:
49
Κώδικας παραδείγματος 11:
Στοιχείο abbr
Για να εισάγουμε μία επεξήγηση μιας συντομογραφίας χρησιμοποιούμε το στοιχείο
abbr.
Σύνταξη:
Μέθοδος:
I. Γράφουμε την ετικέτα
II. Στη συνέχεια προαιρετικά γράφουμε και προσθέτουμε στο title την
επεξήγηση της συντομογραφίας.
III. Έπειτα κλείνουμε τα εισαγωγικά και την ετικέτα abbr. Δηλαδή γράφουμε
IV. Στη συνέχεια προσθέτουμε τη συντομογραφία.
V. Τέλος, κλείνουμε με την ετικέτα .
Σημείωση: Η επεξήγηση της συντομογραφίας εμφανίζεται στο παράθυρο του Browser
όταν ο δείκτης του ποντικιού βρίσκεται σε κατάσταση αιώρησης (hover) πάνω από τη
συντομογραφία.
50
ex12-abbr.html
(Στοιχείο cite)
Για να εισάγουμε μία παραπομπή ή αναφορά σε τίτλο άρθρου, βιβλίου συγγραφέα κτλ
χρησιμοποιούμε το στοιχείο cite. Το στοιχείο cite αναφέρεται μόνο στις πηγές και όχι
στο περιεχόμενο.
Σύνταξη:
Στοιχείο quote
Για να εισάγουμε μία σύντομη παράθεση μιας φράσης που είπε ή έγραψε κάποιος
χρησιμοποιούμε το στοιχείο quote.
Σύνταξη:
Στοιχείο Blockquote
Για να παραθέσουμε αυτούσιο απόσπασμα κειμένου, γράφουμε την ετικέτα αρχής του
στοιχείου blockquote στην οποία μπορούμε να συμπεριλάβουμε και την πηγή. Στη
συνέχεια κλείνουμε την ετικέτα έναρξης και παραθέτουμε το κείμενο εντός ενός στοιχείου
51
p. Τέλος προσθέτουμε την ετικέτα για να σημάνουμε το τέλος του
αποσπάσματος.
Σύνταξη:
Στα ακόλουθα υποεδάφια θα δούμε αναλυτικά πώς γίνεται η εισαγωγή κειμένου HTML
σε πεδία.
52
2.4.1 Στοιχείο form
Παράδειγμα:
Παράδειγμα:
Έστω ότι θέλουμε να γράψουμε τον τύπο της συνάρτησης μιας ευθείας y=x+2. Τότε θα
το γράψουμε:
53
Παράδειγμα:
Για να εισάγουμε ένα πεδίο μιας μηχανής αναζήτησης χρησιμοποιούμε το στοιχείο form
με την ιδιότητα role=”search”. Πιο αναλυτικά κάνουμε τα εξής βήματα:
i. γράφουμε μια ετικέτα αρχής του στοιχείου form με τις ιδιότητες
ii. γράφουμε τίτλο για την ιδιότητα search μεταξύ των ετικετών
iii. Γράφουμε
54
iv. Γράφουμε στην προηγούμενη ετικέτα
Παράδειγμα:
Spin box είναι ένα box που μπορούμε να δημιουργήσουμε με την HTML5, στο οποίο
κάνοντας αριστερό κλικ στα βελάκια του box Μπορούμε να αυξομειώνουμε την τιμή
που βρίσκεται εντός του κουτιού.
55
Στο στοιχείο body προσθέτουμε τη γραμμή:
min και max είναι η ελάχιστη και μέγιστη τιμή, το step είναι το βήμα αύξησης ή μείωσης
και το value είναι η αρχική τιμή.
Για να εισάγουμε μια περιοχή κειμένου text area γράφουμε την παρακάτω γραμμή στα
όρια του στοιχείου body:
Οι τιμές των ιδιοτήτων rows και cols προσδιορίζουν τον αριθμό των γραμμών και
στηλών του πλαισίου.
Αν θέλουμε ένα απλό Textbox μιας γραμμής με ένα κείμενο στα αριστερά του
γράφουμε:
όπου size το μέγεθος του text box και το maxlength ο μέγιστος αριθμός χαρακτήρων.
56
Παράδειγμα 17. Εισαγωγή text area
Submit Button: Για να εισάγουμε ένα submit button κάνουμε τα ακόλουθα βήματα:
1. Γράφουμε την ετικέτα αρχής του στοιχείου
2. Γράφουμε το κείμενο που θα εμφανίζεται πριν από το πλαίσιο κειμένου
3. Γράφουμε
4. Γράφουμε
5. Γράφουμε την ετικέτα αρχής του στοιχείου
Σύνταξη:
57
Παράδειγμα 18. Εισαγωγή submit button
Παράδειγμα:
58
Κώδικας παραδείγματος 19:
Έντονη γραφή (bold): Για να εισάγουμε μία φράση ενός κειμένου με έντονη γραφή
χρησιμοποιούμε το στοιχείο b. Το έντονο κείμενο περικλείεται μεταξύ των ετικετών και
.
Σύνταξη:
Πλάγια γραφή (italic): Για να εισάγουμε μία φράση ενός κειμένου με πλάγια γραφή
χρησιμοποιούμε το στοιχείο i. Το πλάγιο κείμενο το εισάγουμε μεταξύ των ετικετών
και .
Σύνταξη:
59
Παράδειγμα 20. Μορφοποίηση bold, italic, underlined
Διαγραμμένο κείμενο:
Για να εισάγουμε ένα μέρος του κείμενο το οποίο έχει διαγραφεί χρησιμοποιούμε το
στοιχείο del. Το διαγραμμένο κείμενο περικλείεται μεταξύ των ετικετών και .
Σύνταξη:
Σημείωση: Τα στοιχεία del και ins μπορούν να συνδυαστούν με τις ιδιότητες cite και
datetime. Με την ιδιότητα cite που δεν έχει σχέση με το στοιχείο cite μπορούμε να
παραπέμψουμε σε μία πηγή που εξηγεί τους λόγους για τους οποίους έγινε μια
60
διόρθωση. Με την ιδιότητα datetime μπορούμε να προσθέσουμε την ημερομηνία κατά
την οποία έγινε η διόρθωση.
Σύνταξη:
Παράδειγμα:
Δείκτης (subscript)
Σύνταξη:
Εκθέτης(superscript)
Σύνταξη:
Παράδειγμα:
61
Κώδικας παραδείγματος 21:
Κατεύθυνση κειμένου
Σε κάποιες γλώσσες η φορά ανάγνωσης είναι από τα δεξιά προς τα αριστερά. Σε αυτές
τις περιπτώσεις δίνουμε την ιδιότητα στο στοιχείο που περικλείει γλώσσα που
διαβάζεται από δεξιά προς τα αριστερά.
Παράδειγμα:
Στο παράδειγμα αυτό ορίζουμε ότι το κείμενο της συγκεκριμένης παραγράφου είναι σε
Εβραϊκή Γλώσσα και θα διαβαστεί από δεξιά προς τα αριστερά.
62
3.3 Βελτίωση προσπελασιμότητας WAI-ARIA
Η WAI-ARIA είναι τα αρχικά των λέξεων Web Accessibility Initiative’s Accessible- Rich
Internet Applications (Πρωτοβουλία Προσπελασιμότητας Ιστού-Εφαρμογές internet
Εμπλουτισμένης Προσπελασιμότητας).
Η WAI-ARIA1 είναι στην ουσία ένα σύνολο προδιαγραφών που καλύπτει
σημασιολογικά κενά της HTML5. Όπως για παράδειγμα το σημασιολογικό κενό που
υπάρχει στην HTML5 για τη σήμανση του κύριου περιεχομένου της οθόνης. Σε
περίπτωση που υπάρχει επικάλυψη της HTML και της WAI-ARIA η υποστήριξη των
Browsers γέρνει συνήθως στην πλευρά των Browsers.
Η WAI-ARIA έρχεται να προσδιορίσει τις ακόλουθες περιοχές μιας ιστοσελίδας:
Application, banner, complementary, contentinfo, form, main, navigation και search.
role Application: Είναι μία περιοχή που δηλώνεται ως web εφαρμογή σε αντιδιαστολή
με ένα web κείμενο. Όταν ο επισκέπτης εισέλθει στην περιοχή αυτή, τότε δεν ισχύει ο
κλασσικός τρόπος πλοήγησης αλλά ο τρόπος πλοήγησης της εφαρμογής.
role banner: Ο χαρακτηρισμός της περιοχής banner έχει να κάνει με την τοποθεσία της
περιοχής και όχι με το περιεχόμενο. Πιο αναλυτικά μιλάμε για την οριζόντια περιοχή που
βρίσκεται στην κορυφή μιας ιστοσελίδας και είναι συνήθως ενταγμένη σε ένα στοιχείο
header και είναι μοναδική για κάθε ιστοσελίδα.
Το banner περιέχει συνήθως το λογότυπο ή την ονομασία της εταιρείας και εκτείνεται
σαν μια λωρίδα σε όλο το πλάτος της ιστοσελίδας.
role main: Είναι περιοχή στην οποία τοποθετείται το κύριο περιεχόμενο μιας σελίδας και
χρησιμοποιείται σχεδόν σε όλες τις περιπτώσεις μία μόνο φορά. Μπορεί να
ενσωματωθεί σε ένα στοιχείο article, div ή section.
1 http://www.w3.org/TR/wai-aria
63
role complementary: Είναι μια περιοχή στην οποία τοποθετείται μια ενότητα για να
υποστηρίζει το κύριο κείμενο, συνδέεται μαζί του αλλά μπορεί να σταθεί και μόνη της.
Συνήθως εντάσσεται σε ένα στοιχείο aside το οποίο είναι ισοδύναμο. Μπορεί να
χρησιμοποιηθεί περισσότερες από μία φορές.
role content info: Είναι μια ενότητα η οποία εντάσσεται σε ένα στοιχείο footer στο
υποσέλιδο μιας σελίδας. Περιέχει τις πληροφορίες για το συγγραφέα, πνευματικά
δικαιώματα κτλ του γονικού εγγράφου. Τοποθετείται μία φορά στην ιστοσελίδα.
role form: Επικαλύπτεται από το αντίστοιχο στοιχείο form της HTML5 και είναι στην ουσία
περιττός.
role navigation: Είναι ισοδύναμο με το στοιχείο nav της HTML5 όπου συγκεντρώνονται
τα σημαντικότερα στοιχεία πλοήγησης της ιστοσελίδας, για αυτό το λόγο την
ενσωματώνουμε σε ένα στοιχείο nav. Μπορούμε να τη χρησιμοποιήσουμε
περισσότερες από μία φορές.
role search: Ορίζει μια περιοχή αναζήτησης ενσωματωμένη σε ένα στοιχείο form.
Η ιδιότητα class δε χρησιμοποιείται μόνο για την εφαρμογή στυλ CSS. Χρησιμοποιείται
και στη σημασιολογία της HTML5. Στην κάθε κλάση μπορούμε να αντιστοιχίσουμε, να
εντάξουμε ένα ή περισσότερα στοιχεία.
Για να το πετύχουμε αυτό γράφουμε στην ετικέτα αρχής του στοιχείου
. Όπως θα παρατηρήσατε, μπορούμε ένα στοιχείο να το
εντάξουμε σε περισσότερες από μία κλάσεις. Αν συμβαίνει αυτό, τότε δίπλα από το
όνομα της πρώτης κλάσης αφήνουμε ένα κενό, γράφουμε το όνομα της δεύτερης
κλάσης κτλ και στο τέλος κλείνουμε τα εισαγωγικά.
Κάθε στοιχείο μπορεί να αντιστοιχηθεί σε περισσότερες από μία κλάσεις και σε κάθε
κλάση μπορούν να αντιστοιχηθούν οποιαδήποτε σύνολα από στοιχεία.
Ιδιότητα Id
Για να αντιστοιχίσουμε ένα στοιχείο σε ένα όνομα id γράφουμε στην ετικέτα του
στοιχείου . Οι περιορισμοί για το όνομα είναι να μην Ξεκινά με αριθμό και να
μην περιλαμβάνει κενά διαστήματα.
64
Σε κάθε σελίδα ενός website, το id είναι μοναδικό. Απαγορεύεται δηλαδή στην ίδια
σελίδα να υπάρχουν δύο στοιχεία με το ίδιο id. Δεν απαγορεύεται ένα id να έχει
αντιστοιχηθεί σε μια άλλη σελίδα με ένα άλλο στοιχείο, αυτό όμως δεν συνηθίζεται.
Σημείωση: Με τις ιδιότητες class και id είναι ευκολότερο να εξεργαζόμαστε τα στοιχεία
είτε σαν ομάδες(class) είτε σαν μεμονωμένα (id).
65
4.1 Διατεταγμένη Λίστα
Για όλες τις λίστες διατεταγμένες και μη μπορώ να επιλέξω σημειωτές με την παρακάτω
ιδιότητα τοποθετώντας την στο στοιχείο head της HTML:
Βασικοί σημειωτές:
disk (●)
circle (○)
square (▪)
decimal (1,2,3,…)
upper-alpha (A,B,C,…)
lower-alpha (a,b,c,…)
66
upper-roman (I,II,III,IV,…)
lower-roman (i, ii,iii,iv…)
Πηγή: w3schools.com/cssref/pr_list-style-type.asp
67
Κώδικας παραδείγματος 22:
69
4.4 Εισαγωγή radio buttons
Για να εισάγουμε μια λίστα από radio buttons μέσα σε ένα στοιχείο p γράφουμε τις
παρακάτω γραμμές:
Η ιδιότητα value είναι η τιμή της επιλογής του radio button και η επιλογή
μπαίνει όταν έχει επιλεγεί το συγκεκριμένο radio button.
70
4.5 Text effects και progress bar με τη βοήθεια της HTML5
Στα ακόλουθα υποεδάφια θα δούμε πώς να εισάγουμε κείμενο που αναβοσβήνει και
κείμενο που κινείται οριζόντια.
Παράδειγμα:
Σαν προεπιλογή η ταχύτητα είναι μέτρια και η κατεύθυνση της οριζόντιας κίνησης είναι
από δεξιά προς τα αριστερά.
Αν θέλουμε μπορούμε στην ετικέτα αρχής να προσθέσουμε την ταχύτητα της κίνησης
με την ιδιότητα scrollamount, στην οποία όσο αυξάνουμε τον αριθμό τόσο μεγαλώνει η
ταχύτητα κίνησης.
Επίσης μπορούμε να προσθέσουμε και την ιδιότητα direction για να αλλάξουμε τη
φορά της κίνησης. Έτσι γράφουμε:
Για κίνηση από δεξιά προς τα αριστερά:
Παράδειγμα:
71
Παράδειγμα 25. Εισαγωγή Text effects
Meter bar: Για να εισάγουμε ένα οριζόντιο bar το οποίο θα απεικονίζει κάποιο ποσοστό
αναλογίας όπως τα ποσοστά των εκλογών, χρησιμοποιούμε το στοιχείο meter και
κάνουμε τα ακόλουθα βήματα:
1. Ανοίγουμε ετικέτα παραγράφου και αμέσως μετά γράφουμε το κείμενο που
θέλουμε να εμφανιστεί αριστερά του meter bar.
2. Πληκτρολογούμε την ετικέτα με τις ιδιότητες , και
για να προσδιορίσουμε την ελάχιστη, τη μέγιστη και την επιλεγμένη
τιμή του meter bar.
3. Όταν τελειώσουν οι επιλογές τότε κλείνουμε με τις ετικέτες τέλους των στοιχείων
meter, p.
72
Παράδειγμα 26. Εισαγωγή meter bar
74
Σύνοψη
Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:
Οι κληρονομικότητες παίζουν σπουδαίο ρόλο στην HTML5.
Για να δημιουργήσετε μία παράγραφο πρέπει να εισαγάγετε το στοιχείο p και να
επιφέρετε τροποποιήσεις σε αυτή με την ιδιότητα style.
Μπορείτε να εισάγετε σε ένα κείμενο HTML διευθύνσεις και ημερομηνίες με τα στοιχεία
address και time.
Μπορείτε να ορίσετε ρόλους σε περιοχές της ιστοσελίδας σας με τη βοήθεια της
WAI ARIA βελτιώνοντας την προσπελασιμότητα της ιστοσελίδας σας.
Μπορείτε να αντιστοιχίσετε στοιχεία της HTML5 σε κλάσεις και αναγνωριστικά id
κάνοντας πιο εύκολη τη διαχείριση και επεξεργασία τους.
Μπορείτε να εισάγετε περιοχές κειμένου, διατεταγμένες και μη διατεταγμένες λίστες με
τα αντίστοιχα στοιχεία της HTML5
Μπορείτε να εισάγετε εύκολα radio Buttons και dropdown lists με τις μεθόδους που
περιγράφηκαν στην ενότητα 4
Μπορείτε να εισαγάγετε εύκολα progress, meter bar και text effects.
75
76
ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ
77
78
Εισαγωγικές Παρατηρήσεις
Στην πρώτη υποενότητα θα αναλυθούν οι κατηγορίες και τα formats των εικόνων που
υποστηρίζει η HTML5. Επίσης θα αναλυθεί η εισαγωγή εικόνας σε ιστοσελίδα καθώς και
οι βασικές μορφές επεξεργασίας της εικόνας με τη βοήθεια του Photoshop CC. Τέλος,
θα αναλυθεί η εισαγωγή και οι επιλογές παραμετροποίησης video και ήχου και θα
αναφερθούν τα formats audio και video που υποστηρίζει η HTML5.
Στη δεύτερη υποενότητα θα αναλυθούν οι δυνατότητες σχεδίασης που προσφέρει το
στοιχείο Canvas της HTML5.
Στην τρίτη υποενότητα θα αναλυθεί ο τρόπος που συνδέονται οι σελίδες μεταξύ τους
μέσα σε ένα website καθώς και συνδέσεις σε άλλες σελίδες διαφορετικών websites.
Επίσης θα αναλυθεί ο τρόπος που δημιουργούμε σημεία αγκύρωσης για να κάνουμε
την πλοήγηση του χρήστη ταχύτερη και αποδοτικότερη.
79
ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ
80
1. Ο χρήστης μπορεί να ανοίξει την ίδια ιστοσελίδα από διαφορετικά μέσα
(desktops, laptops, smart tvs, tablets, mobile phones κ.τ.λ.).
2. Υποτίθεται ότι ο χρήστης «διαβάζει» το περιεχόμενο μιας ιστοσελίδας σε
πραγματικό χρόνο που σημαίνει ότι δεν διαθέτει χρόνο και υπομονή να περιμένει
να φορτώσει ο Browser εικόνες υψηλής ανάλυσης. Επίσης πρέπει να λαμβάνεται
υπόψη από τον Web Developer ότι σίγουρα θα υπάρχουν και χρήστες με
ταχύτητα σύνδεσης μικρότερη από τη δική του.
3. Η εικόνα πρέπει να ανήκει σε κάποια από τις κατηγορίες που αναλύθηκαν
προηγουμένως.
Ανάλυση
Μία εικόνα χωρίζεται σε χ γραμμές και σε y στήλες. Η τομή μιας γραμμής και μιας
στήλης αποτελεί το συγκεκριμένο εικονοστοιχείο (pixel).
Έτσι για παράδειγμα μία κάμερα που υποστηρίζει ανάλυση φωτογραφίας
4064x2704=10989056 είναι μία κάμερα περίπου 11 Megapixels (1
Megapixels=1024x1024= 1048576 pixels)
Το μέγεθος της φωτογραφίας που θα εμφανιστεί στην οθόνη του Browser εξαρτάται
από την ανάλυση της οθόνης του χρήστη. Έτσι αν η οθόνη έχει ανάλυση 100 dpi (Dots
Per Inch) σημαίνει ότι σε μια ίντσα περιέχονται 100 pixels οπότε το μέγεθος της εικόνας
θα είναι (4064/100) x(2704/100)= 40x27 ίντσες, το οποίο είναι πολύ μεγάλο.
Πρέπει να λάβουμε υπόψη μας ότι οι χρήστες χρησιμοποιούν διαφορετικά υπολογιστικά
συστήματα και αναλύσεις οθονών κατά την πλοήγησή τους στο διαδίκτυο
Ένα άλλο παράδειγμα με ανάλυση της οθόνης είναι όταν στο Desktop των Windows
αυξήσουμε την ανάλυση. Τότε παρατηρούμε τα εικονίδια στην επιφάνεια εργασίας να
έχουν μεγαλύτερη λεπτομέρεια αλλά και μικρότερο μέγεθος.
Όταν κάνουμε δεξί κλικ με το ποντίκι σε μια εικόνα στο web μπορούμε να επιλέξουμε
προβολή πληροφοριών εικόνας και να δούμε την ανάλυση, το μέγεθος του αρχείου
της εικόνα κ.τ.λ.
Jpeg πρότυπο
Το Jpeg πρότυπο (Joint Photographic Experts Group) το χρησιμοποιούμε όταν
πρόκειται να ενσωματώσουμε σχετικά μεγάλες εικόνες με μεγάλο βάθος χρώματος
24bit, και πιο συγκεκριμένα φωτογραφίες στις σελίδες του website.Το πρότυπο JPEG
81
παρέχει αρκετά καλή συμπίεση και συνιστάται για μέτριες και μεγάλες εικόνες -γιατί για
τις πολύ μικρές το όφελος ως προς τη χωρητικότητα δεν είναι μεγάλο.
Ο λόγος συμπίεσης είναι ρυθμιζόμενος και -καθώς είναι φυσικό- αυξάνοντας τη
συμπίεση μικραίνει το μέγεθος του αρχείου της φωτογραφίας μειώνεται όμως
αναλογικά και η ποιότητά της. Επειδή μόλις αποθηκευθούν οι εικόνες σε συμπιεσμένη
μορφή JPEG τότε αυτόματα λόγω συμπίεσης χάνεται ένα μέρος της πληροφορίας,
καλό είναι για να έχουμε το καλύτερο αποτέλεσμα να αποθηκεύουμε τις φωτογραφίες
αρχικά σε μη συμπιεσμένη μορφή και κάθε φορά που θέλουμε να τις επεξεργαστούμε
να δουλεύουμε πρώτα την ασυμπίεστη μορφή και πριν τις ενσωματώσουμε σε
ιστοσελίδα να τις αποθηκεύουμε σε μορφή JPEG.
Στο web χρησιμοποιείται επίσης και το JPG Progressive format ειδικά σε φωτογραφίες
υψηλής ανάλυσης. Με τη μέθοδο αυτή η φωτογραφία αποθηκεύεται σε διαφορετικά
στάδια και ο χρήστης μπορεί να έχει μία προεπισκόπηση της φωτογραφίας πριν αυτή
εμφανιστεί με τη μέγιστη λεπτομέρεια. Έτσι, με αυτό το format η εικόνα υψηλής
ανάλυσης στην αρχή φαίνεται θολή και σιγά σιγά αποκαλύπτεται η λεπτομέρεια της.
Η μορφή JPG δεν υποστηρίζει διαφάνεια. Η διαφάνεια χρησιμεύει σε σύνθετες διατάξεις
εικόνων όπου η μία εμφανίζεται πίσω από την άλλη δημιουργώντας σε αρκετές
περιπτώσεις εξαιρετικά αποτελέσματα.
Επίσης το πρότυπο JPG δεν υποστηρίζει κίνηση.
GIF πρότυπο
Υποστηρίζει κινούμενες εικόνες και διαφάνεια, αλλά έχει περιορισμένη 8bit παλέτα
χρωμάτων. Μία τεχνική που χρησιμοποιείται για να καλύψει κάπως αυτή την
περιορισμένη επιλογή χρωμάτων είναι το dithering.
Αυτή η τεχνική βασίζεται στη μίξη των χρωμάτων σε γειτονικά pixels δημιουργώντας την
ψευδαίσθηση της μίξης και παραγωγής νέων χρωμάτων. Εάν ο χρήστης όμως
82
μεγεθύνει την εικόνα θα δει το χρώμα που βλέπει είναι ένας ψηφιακός θόρυβος από
χρώματα γειτονικών pixels.
WebP
Είναι ένα καινούργιο και πολλά υποσχόμενο format για εικόνες στο Web, το οποίο
παρέχει συμπίεση με απώλειες και χωρίς απώλειες. Στην χωρίς απώλειες εκδοχή οι
εικόνες σε WebP μορφή είναι 26% μικρότερες στο μέγεθος από τις αντίστοιχες PNG ενώ
στην απωλεστική εκδοχή είναι 25-34% μικρότερες σε σχέση με το JPEG format.
Το WebP format προσφέρει και δυνατότητα διαφάνειας χωρίς απώλειες με
περισσότερα bytes. Υπάρχει και η διαφάνεια στην εκδοχή με συμπίεση και απώλειες η
οποία παρέχει 3 φορές μικρότερη χωρητικότητα σε σχέση με τις αντίστοιχες PNG.
Η Google φιλοδοξεί με αυτό το format να αντικαταστήσει όλα τα υπόλοιπα και
προσπαθεί να πείσει την Apple και τη Mozilla να τα ενσωματώσουν στους
αντίστοιχους Safari και Firefox Browsers.
Μετά το src ακολουθεί το όνομα του αρχείου μαζί με το path στο οποίο βρίσκεται.
Στο width, height ανάμεσα στα αντίστοιχα εισαγωγικά πληκτρολογούμε τις διαστάσεις
πλάτος X ύψος της εικόνας.
Μέσα στα εισαγωγικά που ακολουθούν μετά το alt πληκτρολογούμε το εναλλακτικό
κείμενο που θα εμφανίζεται στην περίπτωση όπου ο Browser δεν μπορεί για
οποιονδήποτε λόγο να εμφανίσει την εικόνα στην οθόνη ή αν ο χρήστης έχει
απενεργοποιήσει την εμφάνιση εικόνων. Στις κατηγορίες των εικόνων που
παρουσιάσαμε σύμφωνα με τον οργανισμό W3c υπάρχουν και οδηγίες για το
εναλλακτικό κείμενο ανά κατηγορία.
83
Τοποθέτηση εικόνας σε συγκεκριμένη θέση
Η θέση μπορεί να προσδιοριστεί με τους εξής τρόπους:
Position Absolute: Αυτή η τιμή προσδιορίζει την απόλυτη θέση σε σχέση με το γονικό
στοιχείο. Αν δεν περιέχεται μέσα σε κάποια άλλη ετικέτα, θεωρείται το στοιχείο body ως
γονικό στοιχείο και το στοιχείο div θα έχει θέση σε σχέση με την επάνω αριστερά γωνία
του Browser. Τη θέση του γονικού στοιχείου την προσδιορίζουμε σαν relative.
Position relative: Προσδιορίζεται η θέση ενός στοιχείου σε σχέση με αυτή που είχε
αρχικά στο έγγραφο. Από τη μετακίνηση δεν επηρεάζονται τα υπόλοιπα στοιχεία της
ιστοσελίδας ακόμα και αν αυτή η μετακίνηση σημαίνει επικάλυψη.
Position Fixed: Προσδιορίζεται η θέση ενός στοιχείου η οποία δεν αλλάζει ακόμη και αν
υπάρχει scroll up ή scroll down.
84
Στο στοιχείο body της σελίδας θα προσθέσουμε τις ακόλουθες γραμμές κώδικα
Το div image2 έχει για γονικό στοιχείο το div image1 και η απόλυτη θέση του div
image2 προσδιορίζεται από τη θέση του γονικού div image1.
Περισσότερες επιλογές θα παρουσιαστούν στη διδακτική ενότητα που αναφέρεται στο
CSS.
Παράδειγμα 2. Εισαγωγή δύο εικόνων με σχετική θέση της μίας ως προς την
άλλη
85
Παράδειγμα 2 - Κώδικας:
Η καινούργια cloud πλατφόρμα της Adobe μας δίνει πολλές δυνατότητες για
επεξεργασία κειμένου και εικόνας και πλέον σε οικονομικές τιμές. Και αυτό διότι μπορεί
κάποιος να πληρώσει μία εφαρμογή επεξεργασίας μόνο όσο χρόνο τη χρειάζεται. Έτσι
86
μπορούμε να έχουμε στη διάθεσή μας πλέον επαγγελματικά προγράμματα τα οποία τα
ενοικιάζουμε ανά μήνα.
Τα επαγγελματικά προγράμματα μπορεί να είναι πιο πολύπλοκα από κάποια άλλα,
όμως μας δίνουν την ποιότητα επεξεργασίας που χρειαζόμαστε.
Στην ενότητα αυτή θα γίνει σύντομη παρουσίαση συγκεκριμένων μεθόδων
επεξεργασίας που προσφέρει το Adobe Photoshop CC.
Βασικές ρυθμίσεις
Ανοίγουμε μέσα από το Photoshop μία εικόνα και μπορούμε να εφαρμόσουμε τις
ακόλουθες βασικές ρυθμίσεις:
Vibrance και Saturation: Και τα δύο αυξάνουν την ένταση των χρωμάτων αλλά με
διαφορετικά κριτήρια. Όταν επιλέγουμε να αλλάξουμε τον κορεσμό των χρωμάτων
(saturation) αυξάνουμε την ένταση όλων των χρωμάτων με αποτέλεσμα χρώματα που
είναι ήδη κορεσμένα (έχουν μεγάλη ένταση) να υποστούν και αυτά τη συγκεκριμένη
αλλαγή έχοντας ως συνέπεια την αλλοίωση της φωτογραφίας. Η αλλοίωση της
φωτογραφίας σημαίνει στην συγκεκριμένη περίπτωση ότι χάνεται η λεπτομέρεια
(clipping) επειδή συγκεκριμένες περιοχές με κυρίαρχο κάποιο χρώμα σε αρκετές
διαβαθμίσεις χάνουν αυτές τις διαβαθμίσεις, επειδή όλα τα γειτονικά pixels φαίνονται να
έχουν το ίδιο χρώμα. Για αυτό το λόγο η αλλαγή του κορεσμού των χρωμάτων πρέπει
να γίνεται επιλεκτικά στα χρώματα που δεν είναι κορεσμένα.
Αντίθετα στην επιλογή vibration αυξάνεται ή ένταση των χρωμάτων αλλά μόνο εκείνων
που η ένταση δεν είναι υψηλή, ενώ τα χρώματα με υψηλή ένταση δεν επηρεάζονται. Δεν
87
επηρεάζονται επίσης και οι χρωματικοί τόνοι του δέρματος για να μην υπάρχει
αλλοίωση προσώπων.
Για να επιλέξουμε vibration η saturation επιλέγουμε μέσα από το menu
image/adjustments/vibration ή saturation
88
Εικόνα 1. Βασική οθόνη Photoshop
Στον κενό χώρο στην ετικέτα έναρξης μπορούμε να προσθέσουμε τις παρακάτω
γραμμές:
Αν θέλουμε να εμφανίζεται μια αρχική εικόνα πριν ξεκινήσει το video:
89
Για τις διαστάσεις προβολής του video:
Σε περίπτωση που θέλουμε ο Browser να μην φορτώνει κανένα στοιχείο του video,
να φορτώνει μόνο τα μεταδεδομένα του όπως διαστάσεις μέγεθος κτλ, να αφήνει τη
διαχείριση της φόρτωσης στο Browser αντίστοιχα. Η τελευταία επιλογή είναι και η
προεπιλογή.
μαζί με τη διαδρομή
Καλό θα είναι να είναι το video διαθέσιμο σε δύο μορφές, έτσι ώστε αν δεν
υποστηρίζεται η μία μορφή να αναπαραχθεί μία εναλλακτική. Σε περίπτωση που έχουμε
εναλλακτική, προσθέτουμε και άλλη μία πηγή όπως η παραπάνω.
Τέλος, προσθέτουμε και μία γραμμή για να εμφανιστεί κάποιο μήνυμα σε περίπτωση
που ο Browser δεν υποστηρίζει τη συγκεκριμένη μορφή video
Παράδειγμα:
90
Παράδειγμα 3. Εισαγωγή video
Στο πρώτο video που εμφανίζεται αριστερά στην οθόνη του Browser έχει
ενεργοποιηθεί το autoplay και muted για σίγαση, για αυτό το λόγο ξεκινάει
μόλις ανοίξουμε τη σελίδα, ενώ στο δεύτερο δεν έχει autoplay και έχει επιπλέον
την επιλογή να φαίνεται σαν πρώτη σκηνή πριν ξεκινήσει το video μία εικόνα
της επιλογής μας( επιλογή poster).
Σημείωση: Όλες οι ρυθμίσεις των controls μπορούν να δηλωθούν και με πιο
απλή μορφή αντί για loop=”loop” μπορούμε να γράψουμε μόνο loop στην ίδια
θέση.
Παράδειγμα 3 - Κώδικας:
91
Παράδειγμα 3 - Οθόνη Browser:
92
Παράδειγμα 4 - Οθόνη Browser:
Σημείωση: Η ιδιότητα controls αναφέρεται στα χειριστήρια του Browser για το video.
93
Σε περίπτωση που θέλουμε ο Browser να μην φορτώνει κανένα στοιχείο του audio,
να φορτώνει μόνο τα μεταδεδομένα του όπως διαστάσεις μέγεθος κτλ, να αφήνει τη
διαχείριση της φόρτωσης στο Browser. Η τελευταία επιλογή είναι και η προεπιλογή:
Παράδειγμα:
Παράδειγμα 5 - Κώδικας:
94
Παράδειγμα 5 - Οθόνη Browser:
Η αρχή των συντεταγμένων του καμβά της HTML5 είναι στην πάνω αριστερά γωνία
όπως δείχνει η εικόνα 2.
Για να ξεκινήσει η διαδρομή σχεδίασης πληκτρολογούμε
95
Εικόνα 2. Συντεταγμένες στον καμβά
Αντί για Mycanvas στα βήματα 1,3 μπορούμε να χρησιμοποιήσουμε άλλο όνομα, αρκεί
να είναι το ίδιο στα βήματα 1 και 3. Ορίζουμε τη μεταβλητή canvas να παίρνει τιμές από
τη μέθοδο document.getElementById η οποία επιστρέφει το στοιχείο με το
συγκεκριμένο id μαζί με την τιμή του.
Έπειτα γράφουμε:
96
5. Σε περίπτωση που θέλουμε να σχεδιάσουμε με διαφορετικό χρώμα και ιδιότητα από
το προηγούμενο στον ίδιο καμβά, πληκτρολογούμε και έπειτα
για το επόμενο σχήμα.
6. Πληκτρολογούμε για να ορίσουμε το τέλος του σχεδιασμού επάνω στον
καμβά και το τέλος του script.
Στυλ Γραμμής
Τα στυλ της γραμμής είναι τα εξής
1. Linecap: Καθορίζει το στυλ των άκρων της γραμμής με τις τιμές butt, round, square
για επίπεδα, στρογγυλεμένα ή τετράγωνα άκρα αντίστοιχα.
Σύνταξη:
2. Linejoin: Καθορίζει την κορυφή της γωνίας που σχηματίζουν οι δύο γραμμές με τις
τιμές bevel, round, miter για κοφτή, στρογγυλεμένη και μυτερή γωνία.
Σύνταξη:
4. Miterlimit: Προσδιορίζει το Μέγιστο μήκος της κορυφής της γωνίας δύο γραμμών.
Σύνταξη:
97
Παράδειγμα 6. Ευθείες με εφαρμογή linecap
Παράδειγμα 6 - Κώδικας:
98
Παράδειγμα 6 - Οθόνη Browser:
99
Παράδειγμα 7 - Οθόνη Browser:
100
Παράδειγμα 8 - Οθόνη Browser:
Για να καθορίσουμε μία ορθογώνια περιοχή σε ένα ορθογώνιο όπως η γόμα στα
σχεδιαστικά προγράμματα πληκτρολογούμε:
101
Παράδειγμα 9. Σχεδίαση ορθογωνίου
Στο παράδειγμα 8 συγκρίνουμε δύο γωνίες στις οποίες έχουμε θέσει μέγιστο
πάχος στις κορυφές τους.
Παράδειγμα 8 - Κώδικας:
102
Παράδειγμα 8 - Οθόνη Browser:
Για να σχεδιάσουμε ένα τόξο (μέρος κύκλου) ή έναν ολόκληρο κύκλο πληκτρολογούμε
arc(x,y,radius,γωνία εκκίνησης(rad), γωνία τερματισμού(rad), true ή false)
Παράδειγμα:
Πιο αναλυτικά x, y, radius είναι οι συντεταγμένες και η ακτίνα του κύκλου ή του τόξου
του κύκλου. Γωνία εκκίνησης(rad) και γωνία τερματισμού(rad) είναι εκεί που ξεκινά και
και εκεί που σταματάει να διαγράφεται η γωνία. Τέλος false είναι η τιμή για περιστροφή
σύμφωνα με τους δείκτες του ρολογιού και true είναι για αντίστροφη κίνηση από τους
δείκτες του ρολογιού.
Αφού πληκτρολογήσουμε την context.arc έχουμε δύο επιλογές:
Για να σχεδιαστεί η περιφέρεια του κύκλου:
103
Παράδειγμα 10. Σχεδιασμός κύκλων
Παράδειγμα 10 - Κώδικας:
104
Παράδειγμα 10 - Οθόνη Browser:
Παράδειγμα 11 - Κώδικας:
105
Παράδειγμα 11 - Οθόνη Browser:
Παράδειγμα 12 - Κώδικας:
106
Παράδειγμα 12 - Οθόνη Browser:
Σύνταξη:
Για να σχεδιάσουμε ένα τόξο που ενώνει δύο εφαπτομένες κάνουμε τα ακόλουθα
βήματα:
1. Πληκτρολογούμε τις παρακάτω εντολές για να σχεδιάσουμε την πρώτη ευθεία:
2. Πληκτρολογούμε
x1, y1 είναι η αρχή του τόξου, x2, y2 είναι το τέλος του τόξου, και radius η ακτίνα.
3. Πληκτρολογούμε
107
Παράδειγμα 13. Εφαρμογή context.arcTo
Παράδειγμα 13 - Κώδικας:
108
Παράδειγμα 13 - Οθόνη Browser:
2. Πληκτρολογούμε
109
Παράδειγμα 14 - Κώδικας:
Κυβική καμπύλη Bezier: Για να σχεδιάσουμε μία κυβική καμπύλη Bezier κάνουμε τα εξής
βήματα:
110
1. Πληκτρολογούμε τις παρακάτω γραμμές για να πάμε τη γραφίδα στο σημείο
όπου θα ξεκινήσει η καμπύλη(start point)
2. Πληκτρολογούμε
Παράδειγμα 15 - Κώδικας:
111
Παράδειγμα 15 - Οθόνη Browser:
3. Γράφουμε
112
3. Γράφουμε
όπου η επιλογή στοίχισης παίρνει τις τιμές: start, end, left, center και right.
Για να προσδιορίσουμε τη κατακόρυφη θέση του κειμένου σε σχέση με τη baseline
πληκτρολογούμε:
όπου η επιλογή θέσης baseline παίρνει τις τιμές: bottom, middle, alphabetic, hanging
Παράδειγμα 16 - Κώδικας:
113
Παράδειγμα 16 - Οθόνη Browser:
Παράδειγμα 17 - Κώδικας:
114
Παράδειγμα 17 - Οθόνη Browser:
Στα ακόλουθα υποεδάφια θα δούμε τις μεθόδους για γραμμική χρωμάτων και κυκλική
διαβάθμιση χρώματος καθώς και πώς χρησιμοποιούμε τη διαφάνεια και τη σκιά.
Σύνταξη:
(x1,y1) είναι το σημείο εκκίνησης του gradient και (x2,y2) είναι το σημείο τερματισμού.
Για να εφαρμόσουμε γραμμική διαβάθμιση κάνουμε τα εξής:
1. Γράφουμε
όπου n είναι μία τιμή από 0.0-1.0 η οποία καθορίζει τη θέση μεταξύ της αρχής και
του τέλους της διαβάθμισης. Στην απλή περίπτωση όπου θέλουμε μία
διαβάθμιση με δύο χρώματα για παράδειγμα κόκκινο και κίτρινο θα
χρησιμοποιήσουμε τις γραμμές
115
3. Γράφουμε
Παράδειγμα 18 - Κώδικας:
116
Παράδειγμα 18 - Οθόνη Browser:
117
Παράδειγμα 19 - Οθόνη Browser:
118
Παράδειγμα 20 - Οθόνη Browser:
Παράδειγμα 21 - Κώδικας:
119
Παράδειγμα 21 - Οθόνη Browser:
Παράδειγμα 22 - Κώδικας:
120
Παράδειγμα 22 - Οθόνη Browser:
Σύνταξη:
όπου x1,y1,r1 είναι οι συντεταγμένες και η ακτίνα του κύκλου έναρξης της διαβάθμισης
και x2,y2,r2 είναι οι συντεταγμένες και η ακτίνα του κύκλου τερματισμού της διαβάθμισης.
Για να εφαρμόσουμε τη μέθοδο της κυκλικής διαβάθμισης κάνουμε ακριβώς τα ίδια
βήματα με τη μόνη διαφορά αντί για:
χρησιμοποιούμε τη μέθοδο
121
Παράδειγμα 23 - Κώδικας:
122
Παράδειγμα 24. Εφαρμογή διαφάνειας
Παράδειγμα 24 - Κώδικας:
123
Σκιά: Για να προσθέσουμε σκιά στα σχήματά μας χρησιμοποιούμε τις παρακάτω
ιδιότητες.
shadowColor Προσδιορίζει τις σκιές της γραμμής.
Σύνταξη:
θετικές τιμές για σκιά προς τα δεξιά και αρνητικές τιμές για τιμές προς τα αριστερά
θετικές τιμές για σκιά προς τα κάτω και αρνητικές τιμές για τιμές προς τα πάνω.
124
Παράδειγμα 25 - Κώδικας:
2.10 Μετασχηματισμοί
Αλλαγή κλίμακας
Αν θέλουμε να αλλάξουμε την κλίμακα ενός σχήματος γράφουμε:
125
όπου κ είναι η αλλαγή κλίμακας στον οριζόντιο άξονα και λ η αλλαγή κλίμακας στον
κάθετο άξονα.
Έτσι, αν θέλουμε αλλαγή κλίμακας 50%, γράφουμε 0.5, 300% γράφουμε 3, 100%
γράφουμε 1 κτλ.
Επίσης πρέπει να διευκρινίσουμε ότι στον μετασχηματισμό υπόκεινται και τα σημεία
εκκίνησης όπως για παράδειγμα οι συντεταγμένες της επάνω αριστερής γωνίας ενός
ορθογωνίου.
Παράδειγμα 26 - Κώδικας:
126
Παράδειγμα 26 - Οθόνη Browser:
127
Παράδειγμα 27 - Κώδικας:
128
Πολλαπλός μετασχηματισμός με τις μεθόδους context.transform(a,b,c,d,e,f); και
context.SetTransform(a,b,c,d,e,f)
Με τη μέθοδο context.transform εφαρμόζουμε ταυτόχρονα πολλούς
μετασχηματισμούς με τις παραμέτρους a,b,c,d,e,f.
Παράμετρος a: Αλλάζει την κλίμακα στον οριζόντιο άξονα και παίρνει τιμές όπως και
στη μέθοδο scale.
Παράμετρος b: Προκαλεί οριζόντια λοξή μετατόπιση (skew).
Παράμετρος c: Προκαλεί Κάθετη λοξή μετατόπιση (skew).
Παράμετρος d: Αλλάζει την κλίμακα στον κάθετο άξονα και παίρνει τιμές όπως και στη
μέθοδο scale.
Παράμετρος e: Προκαλεί οριζόντια μετατόπιση κατά +x pixels δεξιά ή -x pixels αριστερά.
Παράμετρος f: Προκαλεί κάθετη μετατόπιση κατά -y pixels προς τα επάνω ή +y pixels
προς τα κάτω.
Σημείωση: κάθε πολλαπλός μετασχηματισμός επιδρά επάνω στον προηγούμενο.
Δηλαδή αν εφαρμόσουμε δύο φορές την ίδια οριζόντια μετατόπιση η οριζόντια
μετατόπιση (Παράμετρος e) θα είναι διπλάσια.
Αν θέλουμε ένα μετασχηματισμό ο οποίος να μην επηρεάζεται από τους
προηγούμενους τότε χρησιμοποιούμε τη μέθοδο
129
Παράδειγμα 28 - Κώδικας:
130
Παράδειγμα 29 - Κώδικας:
131
Παράδειγμα 30 - Κώδικας:
132
Παράδειγμα 31 - Κώδικας:
133
Παράδειγμα 32 - Κώδικας:
134
Παράδειγμα 33 - Κώδικας:
135
Παράδειγμα 34 - Κώδικας:
136
ΥΠΟΕΝΟΤΗΤΑ 3. ΥΠΕΡΣΥΝΔΕΣΕΙΣ (LINKS): ΠΩΣ ΦΤΙΑΧΝΟΥΜΕ LINKS
ΓΙΑ EMAILS, ΑΛΛΕΣ WEB PAGES
3.1 Σύνδεσμοι
Για να δημιουργήσουμε ένα σύνδεσμο έτσι ώστε ο Browser να ανοίξει μία άλλη
ιστοσελίδα από το ίδιο ή διαφορετικό website κάνουμε το εξής:
Α’ τρόπος:
Στην περίπτωση που θέλουμε να γράψουμε μία απλή σύνδεση χρησιμοποιούμε τις
ετικέτες και γράφουμε
Β’ τρόπος:
Σε περίπτωση που θέλουμε να φτιάξουμε μία σύνδεση μέσω ενός button τότε
Παράδειγμα:
137
Παράδειγμα 35. Δημιουργία συνδέσεων
Παράδειγμα 35 - Κώδικας:
138
Παράδειγμα 36. Δημιουργία σύνδεσης σε άλλη σελίδα
Παράδειγμα 36 - Κώδικας:
139
3.3 Σημεία αγκύρωσης
140
Παράδειγμα 37. Δημιουργία σημείων αγκύρωσης στην ίδια ιστοσελίδα
Παράδειγμα 37 - Κώδικας:
141
Παράδειγμα 37 - Οθόνη Browser:
142
Παράδειγμα 38 - Κώδικας:
Στο ηλεκτρονικό υλικό της ενότητας μπορείτε να δείτε κάποια video tutorials
για Photoshop:
Βίντεο 1. Παρουσίαση των menus του Photoshop
Βίντεο 2. Επεξεργασία εικόνας
Βίντεο 3. Παρουσίαση του clone stamp tool
Βίντεο 4. Ανάμιξη εικόνων
143
Σύνοψη
Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:
Υπάρχουν formats εικόνας video και ήχου που υποστηρίζει η HTML5.
Το καινούργιο format της Google για εικόνες WebP έχει μεγάλα πλεονεκτήματα –αν
και μέχρι τον Οκτώβριο 2014 υποστηρίζεται μόνο από τον Browser Chrome της
Google.
Έχει μεγάλη σημασία το μέγεθος της εικόνας σε ένα website. Εικόνες μεγάλου
μεγέθους (αρχείου) αργούν να φορτωθούν και κάνουν το website μη λειτουργικό.
Με την ετικέτα div μπορούμε να καθορίσουμε τη θέση μια εικόνας ή ενός video ή
audio player. Επίσης με τις θέσεις relative και absolute μπορούμε να συσχετίσουμε
θέσεις εικόνων ή τις θέσεις των video και audio players.
Με τη χρήση του Canvas της HTML5 μπορούμε να σχεδιάσουμε σχήματα, όπως
ευθύγραμμα τμήματα, ορθογώνια, κύκλους και τόξα κύκλων, και να επιφέρουμε
τροποποιήσεις και μετασχηματισμούς σε αυτά. Έτσι, μπορούμε να μεγεθύνουμε, να
μετατοπίσουμε, να περιστρέψουμε και να προκαλέσουμε λοξή μετατόπιση σε ένα
σχήμα.
Το σημείο Ο(0,0) του Canvas ξεκινά από την επάνω αριστερή γωνία της οθόνης του
Browser.
Μπορούμε με την ετικέτα να δημιουργήσουμε σύνδεση σε άλλη σελίδα του ίδιου
ή διαφορετικού Website και σύνδεση για email.
Μάθαμε να χρησιμοποιούμε τα σημεία αγκύρωσης για να μπορεί το κείμενο της
ιστοσελίδας να είναι “ζωντανό” και να μπορεί ο χρήστης να μεταφέρεται αυτόματα σε
συγκεκριμένη ενότητα της ίδιας ή διαφορετικής σελίδας του ίδιου ή διαφορετικού
website.
144
ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ
145
146
Εισαγωγικές Παρατηρήσεις
Στην πρώτη υποενότητα θα γίνει μία εισαγωγή στη δομή, τον τρόπο ενσωμάτωσης και
γραφής της JavaScript καθώς και θα εξηγηθεί το μοντέλο DOM
Στη δεύτερη υποενότητα θα γίνει ανάλυση του τρόπου εισαγωγής κειμένου στη
JavaScript. Επίσης θα αναλυθούν εκτενώς οι εντολές συνθήκης και οι βρόχοι
επανάληψης της JavaScript.
Στην τρίτη υποενότητα θα εξηγηθεί η έννοια της αλφαριθμητικής string καθώς και ο
τρόπος δημιουργίας και επεξεργασίας πίνακα. Τέλος, θα παρουσιαστεί και θα αναλυθεί
ένα απλό παράδειγμα χρήσης της JQuery βιβλιοθήκης της JavaScript.
147
ΥΠΟΕΝΟΤΗΤΑ 1. ΕΙΣΑΓΩΓΗ ΣΤΗΝ JAVASCRIPT
1.1 Τι μπορεί να κάνει η JavaScript; Τρόποι ενσωμάτωσής της στον κώδικα HTML
Η JavaScript μπορεί:
να προσθέσει δυναμικό περιεχόμενο στις ιστοσελίδες,
να κάνει υπολογισμούς σε κάποια σελίδα,
να δημιουργήσει cookies,
να επικυρώσει δεδομένα,
να χρησιμοποιηθεί για την ασφάλεια των Websites,
να ανιχνεύσει την έκδοση του browser του client.
Τρόποι ενσωμάτωσης JavaScript: Μπορούμε να ενσωματώσουμε κώδικα JavaScript
στο στοιχείο head και στο στοιχείο body του κώδικα html. Επίσης μπορούμε να
καλέσουμε και εξωτερικά αρχεία JavaScript (JSON) τα οποία έχουν κατάληξη .js.
Πώς γράφουμε ένα JavaScript;
Τον κώδικα JavaScript τον γράφουμε ανάμεσα στις ετικέτες και .
148
1.1.2 Δομή της JavaScript - Αντικείμενα, ιδιότητες και μέθοδοι της JavaScript
Μέθοδος
document.write(student.name);
με αυτήν τη μέθοδο write του αντικειμένου Document εμφανίζεται στην οθόνη του
browser το όνομα του μαθητή.
Η διαφορά μεθόδου και ιδιοτήτων είναι ότι στις μεθόδους εισάγονται παρενθέσεις ενώ
στις ιδιότητες όχι.
Για να δηλώσουμε μία μεταβλητή της JavaScript: γράφουμε var, αφήνουμε κενό και
γράφουμε το όνομά της. Το ελληνικό ερωτηματικό στο τέλος δεν είναι υποχρεωτικό
γενικά στη JavaScript.
Παράδειγμα
var x;
Υπάρχει επίσης και η δυνατότητα δήλωσης και ταυτόχρονα εκχώρησης τιμής μιας
μεταβλητής.
149
Στην ίδια μεταβλητή μπορούμε στο ίδιο JavaScript να αποθηκεύσουμε δεδομένα
διαφόρων τύπων. Δηλαδή σε κάποια γραμμή να αποθηκεύσουμε έναν αριθμό και σε
επόμενη γραμμή στην ίδια μεταβλητή να αποθηκεύσουμε ένα string.
Η JavaScript ενσωματώνει τους ακόλουθους τύπους δεδομένων:
αριθμητικό,
αλφαριθμητικό και
λογικό.
Η JavaScript περιλαμβάνει ένα σύνολο αντικειμένων τα οποία σχετίζονται με στοιχεία
της HTML.
Το όνομα μιας μεταβλητής επιτρέπεται να περιλαμβάνει κεφαλαία και πεζά γράμματα,
αριθμούς και τον χαρακτήρα υπογράμμισης.
Επίσης μπορούν να ξεκινούν ή με γράμμα ή με χαρακτήρα υπογράμμισης.
Τελεστές της JavaScript: Για να ορίσουμε πράξεις στη JavaScript χρησιμοποιούμε τους
τελεστές που βλέπετε στους πίνακες (και για τα παραδείγματα έστω x=10, y=4, κ=12).
150
Πίνακας 3. Τελεστές Σύγκρισης
Το DOM είναι ένα πρότυπο ιεραρχίας πατρικών και θυγατρικών αντικειμένων με μορφή
δέντρου το οποίο σχεδιάστηκε από την W3c.
Με τη βοήθεια του DOM, η JavaScript μπορεί και δημιουργεί δυναμικό περιεχόμενο σε
μία ιστοσελίδα. Η ανάγκη του DOM προέκυψε από την ανάγκη για την αποφυγή
χαοτικών καταστάσεων κατά τη συγγραφή κώδικα για ιστοσελίδες. Το DOM δηλαδή
χρησιμοποιείται και για άλλες γλώσσες εκτός από τη JavaScript.
151
Όταν γίνεται αναφορά σε ένα DOM αντικείμενο, υπάρχει η αλληλουχία πατρικού και
θυγατρικού στοιχείου με την παρακάτω μορφή στην οποία γράφουμε πρώτα το
πατρικό αντικείμενο, μετά μία τελεία και μετά το θυγατρικό αντικείμενο:
πατρικό_αντικείμενο.θυγατρικό_αντικείμενο
Μία από τις πολύ σημαντικές λειτουργίες της JavaScript είναι η μέθοδος εμφάνισης
στοιχείων στηn οθόνη του Browser. Επίσης, οι συνθήκες και οι βρόχοι επανάληψης είναι
δομικά στοιχεία της JavaScript -όπως και στις περισσότερες γλώσσες
προγραμματισμού.
Για να εμφανίσουμε κείμενο στην οθόνη του browser χρησιμοποιούμε τη μέθοδο write
του αντικειμένου document:
Σύνταξη document.write(…….)
Παρακάτω θα εξηγήσουμε πώς χρησιμοποιούμε τη μέθοδο document.write ανά
περίσταση.
152
2.1.1 Εισαγωγή κειμένου
Παράδειγμα
153
Εικόνα Browser: document.write-“Hello World”
154
Παράδειγμα 2. document.writeln-“Hello World”
Εικόνα
Browser: document.writeln-“Hello World”
Για να αλλάξουμε γραμμή μπορούμε επίσης και να προσθέσουμε την ετικέτα πριν
από το κείμενο που θα εμφανιστεί.
Παράδειγμα:
155
Παράδειγμα 3. document.writeln-br
Κώδικας: document.writeln-br
Για να εμφανίσουμε την τιμή μιας μεταβλητής στην οθόνη του Browser γράφουμε
document.write(όνομα_μεταβλητής);
156
Παράδειγμα:
Παράδειγμα 4. document.write-var
Κώδικας: document.write-var
157
Εικόνα Browser: document.write-var
Σε περίπτωση που θέλουμε να εκτελεστεί ένα σύνολο εντολών αν μία συνθήκη είναι
αληθής χρησιμοποιούμε τις εντολές if και else.
Πιο αναλυτικά, γράφουμε:
158
Παράδειγμα
159
Εικόνα Browser: Έλεγχος συνθήκης με if
160
Παράδειγμα:
161
Εικόνα Browser: Βρόχος επανάληψης με for
Στους βρόχους αυτούς δεν ξέρουμε εκ των προτέρων τον αριθμό των επαναλήψεων.
Για παράδειγμα έστω ότι φορτώνουμε σε μία ζυγαριά πορτοκάλια για να ψωνίσουμε
συνολική ποσότητα 4 κιλά(Kg). Δεν ξέρουμε από την αρχή πόσες φορές θα εισάγουμε
πορτοκάλια στη ζυγαριά, διότι η μάζα τους ποικίλλει. Οπότε οι επαναλήψεις θα
συνεχίζονται όσο η συνολική μάζα των πορτοκαλιών θα είναι μικρότερη των τεσσάρων
κιλών.
Βρόχος με έλεγχο στην αρχή με τη χρήση της εντολής while: Για να γράψουμε κώδικα
για ένα βρόχο επαναλήψεων με έλεγχο στην αρχή γράφουμε:
While(συνθήκη){ κώδικας βρόχου επανάληψης}
Ακολουθεί το ίδιο παράδειγμα που έγινε προηγουμένως με την εντολή for σε έκδοση με
την εντολή while.
Παράδειγμα:
162
Αυτό σημαίνει ότι ο έλεγχος γίνεται στην είσοδο του βρόχου. Αν στο παράδειγμα αυτό
δώσουμε αρχική τιμή i=5 τότε ο βρόχος θα παρακαμφθεί και δεν θα εκτελεστεί καμία
φορά.
Αυτό που στην ουσία περιγράφουμε είναι ότι όσο ισχύει η συνθήκη μετά το while θα
επαναλαμβάνεται ο βρόχος.
163
Βρόχος με έλεγχο στην τέλος με τη χρήση τη χρήση των εντολών do… while: Για να
γράψουμε κώδικα για ένα βρόχο επαναλήψεων με έλεγχο στο τέλος του βρόχου
γράφουμε:
Ακολουθεί το ίδιο παράδειγμα που έγινε προηγουμένως με την εντολή for σε έκδοση με
τη χρήση των εντολών do… while
Αρχικοποιούμε τη μεταβλητή i=1.
Στη συνέχεια με τη γραμμή while (i < 5) στο τέλος του βρόχου γράφουμε τη συνθήκη
εκτέλεσης του βρόχου.
Αυτό σημαίνει ότι ο έλεγχος γίνεται στο τέλος του βρόχου. Αν στο παράδειγμα αυτό
δώσουμε αρχική τιμή i=5 τότε ο βρόχος θα εκτελεστεί μία φορά γιατί ο έλεγχος γίνεται
στο τέλος
Αυτό που στην ουσία περιγράφουμε είναι ότι όσο ισχύει η συνθήκη μετά το while θα
επαναλαμβάνεται ο βρόχος.
Σημείωση: Η διαφορά με το βρόχο while είναι ότι ο έλεγχος γίνεται στο τέλος. Αυτό
σημαίνει ότι ο βρόχος θα εκτελεστεί τουλάχιστον μία φορά ανεξάρτητα αν ισχύει η
συνθήκη.
164
Παράδειγμα 8. Βρόχος επανάληψης με do..while
165
Μη προκαθορισμένο αριθμό επαναλήψεων με έλεγχο στην αρχή
Το string είναι μία αλφαριθμητική ακολουθία χαρακτήρων και σημείων στίξης κτλ. Τα
strings μπορούμε να τα χειριστούμε ως μεταβλητές και ως αντικείμενα.
Αποθήκευση string σε μεταβλητή
Για να αποθηκεύσουμε ένα string σε μία μεταβλητή γράφουμε:
όνομα=”…….περιεχόμενο της string…………”
Παράδειγμα
a=”Hello World”
Αυτό σημαίνει ότι το ”Hello World” έχει αποθηκευθεί στη μεταβλητή a.
Μπορούμε επίσης να δημιουργήσουμε ένα καινούργιο αντικείμενο String ως εξής:
όνομα = new String (”…….περιεχόμενο της string…………”)
Παράδειγμα
Συνένωση Strings
Μπορούμε να ενώσουμε δύο string ορίζοντας μεταβλητή ίση με το άθροισμα των
μεταβλητών των αντίστοιχων μεταβλητών των strings.
Παράδειγμα
a=”Hello”
b=” World!”
c=a+b;
166
Παράδειγμα 9. Strings
Κώδικας: strings
167
Αυτό το script θα εμφανίσει στην οθόνη την τιμή 15 που είναι το σύνολο των
χαρακτήρων της αλφαριθμητικής welcome.
168
Για να μετατρέψουμε τους χαρακτήρες του string σε:
Κεφαλαία μέθοδος αντικειμένου String toUpperCase()
Μικρά μέθοδος αντικειμένου String toLowerCase()
Παράδειγμα:
169
Εικόνα Browser: string lower case upper case
Substrings
Substrings στη JavaScript εννοούνται τμήματα ενός αρχικού string τα οποία
προσδιορίζονται μεταξύ δύο δεικτών.
Ο πρώτος χαρακτήρας έχει δείκτη 0. Ο δεύτερος δείκτης περιλαμβάνει μέχρι και τον
προηγούμενο δείκτη. Δηλαδή, για παράδειγμα, αν ο δεύτερος δείκτης ισούται με 4
περιλαμβάνει μέχρι και το δείκτη 3 ή αλλιώς μέχρι τον 4ο χαρακτήρα.
Σύνταξη:
όνομα_μεταβλητής.substring(δείκτης1, δείκτης2)
Παράδειγμα:
170
Επίσης μπορούμε να εμφανίσουμε ένα συγκεκριμένο χαρακτήρα με τη μέθοδο CharAt.
Η δεικτοδότηση είναι η ίδια.
Σύνταξη:
όνομα_μεταβλητής.CharAt(δείκτης1)
Παράδειγμα
Κώδικας: substrings
171
Εικόνα Browser: substrings
172
Παράδειγμα 13. Αναζήτηση με indexOf
Πίνακας είναι μία συλλογή ομοειδών στοιχείων σε ορθογώνια διάταξη με στόχο την
καλύτερη επεξεργασία και προσβασιμότηττά τους.
Ποια η χρησιμότητα των πινάκων;
Έστω ότι θέλουμε να αποθηκεύσουμε τους βαθμούς ενός διαγωνίσματος των
μαθητών μιας τάξης με 30 μαθητές. Για να το κάνουμε αυτό θα χρειαστούμε 30
173
μεταβλητές. Αντί για αυτό όμως, μπορούμε να δηλώσουμε ένα πίνακα 30 κελιών. Το
καθένα από τα 30 κελιά θα αντιστοιχεί σε μία μεταβλητή.
Εδώ αξίζει να σημειώσουμε ότι ο υπολογiστής μας δεν «αντιλαμβάνεται» μία ορθογώνια
διάταξη όταν δηλώνουμε στη Javascript ή σε άλλη γλώσσα ένα πίνακα. Απλά έχουν
δημιουργηθεί έτσι οι δηλώσεις ενός πίνακα για δική μας διευκόλυνση.
Παράδειγμα:
Η κάθε θέση array Array[..] είναι στην ουσία μία μεταβλητή. Δηλαδή η μεταβλητή grades
περιέχει 4 μεταβλητές Array[0]… Array[3]. Εφόσον λοιπόν η κάθε θέση έχει τον ρόλο
μεταβλητής μπορούμε να κάνουμε εκχωρήσεις τιμών όπως και στις μεταβλητές.
Προσοχή η δεικτοδότηση των θέσεων ξεκινάει από τη θέση 0, δηλαδή το πρώτο
στοιχείο του πίνακα είναι το Array[0].
174
18 θέση grades [1]
8 θέση grades [2]
20 θέση grades [3]
Μήκος πίνακα
Για να εμφανιστεί το μήκος ενός πίνακα χρησιμοποιούμε την ιδιότητα length
Σύνταξη:
document.write(όνομα_πίνακα.length);
Παράδειγμα:
document.write(grades.length);
175
grades[0]=14
Κώδικας: Array
176
Παράδειγμα:
names=new Array(4);
names [0]=“Δημήτρης”;
names [1]=“Ελένη”;
names [2]=“Γιώργος”;
names [3]=“Μαρία”;
177
Εμφάνιση των στοιχείων του πίνακα με βρόχο επανάληψης for
Για να εμφανίσουμε τα στοιχεία του πίνακα με βρόχο επανάληψης for γράφουμε το
παρακάτω τμήμα κώδικα
var i;
for (i=0;i<=μέγιστος_δείκτης;i++)
document.write(“όνομα_πίνακα[“+i+”]="+ όνομα_πίνακα [i]+” ”);
}
Παράδειγμα
Εξήγηση
Η μεταβλητή var i παίζει το ρόλο του μετρητή.
Με την εντολή for ο μετρητής θα πάρει τιμές από 0 έως και 3 σε πλήρη αντιστοίχιση με
τις θέσεις-δείκτες του πίνακα grades.
Η document.write στη συνέχεια θα εμφανίσει αυτούσιο το περιεχόμενο μεταξύ των
εισαγωγικών δηλαδή
grades[
στη συνέχεια θα εμφανίσει ακριβώς δίπλα την τιμή του μετρητή δηλαδή τη θέση του
στοιχείου (για την πρώτη επανάληψη με τιμή μετρητή i=1):
0
στη συνέχεια θα εμφανίσει αυτούσιο το περιεχόμενο μεταξύ των επόμενων
εισαγωγικών:
]=
Μετά θα εμφανίσει την τιμή του grades[0]:
14
Τέλος θα εισαγάγει και ένα κενό. Αυτές οι επαναλήψεις θα γίνουν για όλα τα στοιχεία
του πίνακα. Έτσι, με ένα απλό βρόχο θα μπορούμε να εμφανίσουμε όλα τα στοιχεία με
μία μόνο μέθοδο document.write
178
Παράδειγμα 16. Εμφάνιση στοιχείων Array με βρόχο for
Η jQuery JavaScript library είναι μία μικρή ευέλικτη και περιεκτική βιβλιοθήκη που
χρησιμοποιείται για να κάνει τη ζωή των Web Developers πιο απλή(write less do more).
Μπορεί να συνδυαστεί με την HTML και να της δώσει άλλες δυνατότητες και μπορεί να
βοηθήσει στην απλούστευση της τεχνικής AJAX που θα συναντήσουμε σε επόμενες
διδακτικές ενότητες.
179
Υπάρχει γενικά η λογική στον web προγραμματισμό ότι δεν είναι ανάγκη ο developer
να ξεκινά πάντα από το μηδέν (from scratch) -δεν χρειάζεται να «ανακαλύπτει κάθε
φορά την πυρίτιδα». Για παράδειγμα, αν θέλει να εισαγάγει πεδίο επιλογής ημερομηνίας
δεν χρειάζεται να το δημιουργήσει από την αρχή εφόσον υπάρχει έτοιμο και
προσφέρεται δωρεάν από τη jQuery JavaScript library.
Το πρώτο JQuery JavaScript: Βήματα για το πρώτο παράδειγμα με jQuery:
1. Το πρώτο βήμα είναι να κατεβάσουμε το jQuery αρχείο.
2. Πηγαίνουμε στην τοποθεσία http://jquery.com/download/
3. Κάνουμε δεξί κλικ με το mouse στο Download the compressed, production
jQuery 1.11.1
4. Επιλέγουμε αποθήκευση ως και επιλέγουμε διαδρομή για να σώσουμε το αρχείο.
5. Μόλις τελειώσει το download, θα έχουμε διαθέσιμο το αρχείο jquery-
1.11.1.min.js.
6. Ανοίγουμε στο desktop ή κάπου αλλού folder και του δίνουμε κάποιο όνομα
7. Μέσα στο folder που ανοίξαμε δημιουργούμε καινούργιο φάκελο με όνομα
scripts και μέσα σε αυτόν τον φάκελο αποθηκεύουμε το αρχείο «αρχείο jquery-
1.11.1.min.js»
8. Επιστρέφουμε στο εσωτερικό του πρώτου φακέλου και δημιουργούμε αρχείο με
κατάληξη .html μέσα στο οποίο θα γίνεται κλήση της βιβλιοθήκης jQuery
180
Μέχρι εδώ έχουμε ορίσει γλώσσα και τίτλο για το tab του browser.
Στο στοιχείο head εισαγάγουμε τη βιβλιοθήκη jQuery που περιέχεται στο αρχείο jQuery-
1.11.1.min.js που βρίσκεται μέσα στο φάκελο scripts.
Ξεκινάει το script.
Το $ είναι ο selector της JQuery library. Η παραπάνω γραμμή σημαίνει ότι όταν
εμφανιστεί το κείμενο της html σελίδας να γίνουν αυτά που περιλαμβάνονται μεταξύ
των αγκίστρων.
181
Παράδειγμα 17. jQuery library
182
Σύνοψη
Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:
η JavaScript είναι μία γλώσσα προγραμματισμού από την πλευρά του client που
συνδυάζεται με την HTML5 και προσθέτει δυναμικό περιεχόμενο και πολλές
λειτουργίες στον κώδικα HTML,
μπορείτε να δηλώνετε μεταβλητές και να εμφανίζετε τις τιμές τους με τη
document.write,
μπορείτε να δημιουργείτε συνθήκες εκτέλεσης εντολών με την εντολή If,
μπορείτε να δημιουργείτε βρόχους προκαθορισμένου αριθμού επαναλήψεων με την
εντολή for,
μπορείτε να δημιουργείτε βρόχους μη προκαθορισμένου αριθμού επαναλήψεων με
τις εντολές do-while και while,
μπορείτε να δημιουργείτε πίνακες με το αντικείμενο Array,
μπορείτε να ενσωματώσετε scripts από τη jQuery βιβλιοθήκη της JavaScript.
183
184
ΕΘΝΙΚΟ ΚΑΙ ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΘΗΝΩΝ
185
186
Εισαγωγικές Παρατηρήσεις
Στην πρώτη υποενότητα θα μάθουμε να ορίζουμε συναρτήσεις και παραμέτρους
εισόδου στις συναρτήσεις. Επίσης, θα μάθουμε για τα αντικείμενα document, location
και history του μοντέλου DOM της JavaScript.
Στη δεύτερη υποενότητα θα μάθουμε να χρησιμοποιούμε τα JavaScript event handlers
και να τα συνδυάζουμε με buttons. Επίσης, θα μάθουμε να αλλάζουμε το περιεχόμενο
και το στυλ συγκεκριμένων στοιχείων της ιστοσελίδας χωρίς να χρειάζεται να την
επαναφορτώνουμε.
Στην τρίτη υποενότητα θα δούμε εφαρμογές των όσων διδάχθηκαν στην παρούσα
ενότητα, αλλά και την επεξήγησή τους μέσω των παραδειγμάτων της δημιουργίας νέων
αντικειμένων καθώς και ιδιοτήτων τους.
187
ΥΠΟΕΝΟΤΗΤΑ 1. ΣΥΝΑΡΤΗΣΕΙΣ ΣΤΗ JAVASCRIPT
Σε περίπτωση που χρειαζόμαστε να εκτελεί ο Browser μία ομάδα εντολών όσες φορές
χρειαστεί στον κώδικα, τότε δημιουργούμε μία συνάρτηση.
188
Παράδειγμα 1. Η πρώτη συνάρτηση
Στο στοιχείο head ορίσαμε τη συνάρτηση Message εντός των ετικετών script χωρίς να
γράψουμε κάτι μέσα στις παρενθέσεις. Αυτό σημαίνει ότι η συνάρτηση θα εκτελεστεί
χωρίς παραμέτρους. Δηλαδή θα εκτελεστεί απλώς ο κώδικας που βρίσκεται εντός των
αγκίστρων.
189
Μέσα στα άγκιστρα γράψαμε alert(“This is my first function”); αυτή η εντολή θα
εμφανίσει ένα alert window με το μήνυμα “This is my first function” -όταν φυσικά θα γίνει
κλήση της συνάρτησης.
Στο στοιχείο body γράψαμε «Message();» για να καλέσουμε τη συνάρτηση και έπειτα
γράψαμε μία document.write για να εμφανίσει μήνυμα όταν θα κάνουμε κλικ στο alert
box.
190
Στο παράδειγμα ορίσαμε τη συνάρτηση calculationz(a,b) όπου a,b είναι οι παράμετροι
εισόδου.
Στη συνέχεια καλούμε τη συνάρτηση
calculationz(10,5);
δίνοντας παραμέτρους 10,5 αντίστοιχα για a και b. Άρα στη συνάρτηση εισέρχονται οι
τιμές:
a=10
b=5
Στη συνέχεια υπολογίζεται και εμφανίζεται η τιμή του z. Στη συνέχεια με μία
document.write εμφανίζουμε την τιμή που υπολογίστηκε.
Εναλλακτικά μπορούμε να δηλώσουμε μεταβλητή στην οποία θα εκχωρηθεί απευθείας
το αποτέλεσμα της κλήσης της συνάρτησης. Δηλαδή δεν θα χρειαστεί να κάνουμε
ξεχωριστά κλήση της συνάρτησης.
191
Παράδειγμα:
a=10
b=5
calculationz
z=2
z=2
apotelesma=z
apotelesma=2
192
Παράδειγμα 2. Η πρώτη συνάρτηση με υπολογισμούς
194
Εικόνα Browser: Μέθοδοι αντικειμένου document
Αντικείμενο location
Ιδιότητες αντικείμενου location
Το αντικείμενο location περιέχει πληροφορίες για την τρέχουσα URL.
location.protocol Περιέχει πληροφορίες για το πρωτόκολλο του URL
location.hostname Περιέχει πληροφορίες για το όνομα της τοποθεσίας(www.
…)
location.port Περιέχει πληροφορίες για τον αριθμό της θύρας του URL
location.search Για την αναζήτηση στο URL
location.hash Όνομα άγκυρας(#anchor)
Μέθοδοι location
location.reload() Εκτελεί την ίδια λειτουργία με το κουμπί ανανέωσης της σελίδας
στους browsers.
195
Παράδειγμα 4. Μέθοδοι αντικειμένου location
Αντικείμενο history.
Το Αντικείμενο history ενσωματώνει τις μεθόδους back, forward και go.
history.back Η λειτουργία του είναι ίδια με τη λειτουργία του αντίστοιχου button
back του browser.
history.forward Η λειτουργία του είναι ίδια με τη λειτουργία του αντίστοιχου
button forward του browser.
196
history.go Ανοίγει μία διεύθυνση από το ιστορικό. Για παράδειγμα αν γράψουμε
history.go(-3) θα είναι σαν να πατάμε 3 φορές το κουμπί back του browser.
Ένα event είναι κάτι που μπορεί να συμβεί σε κάποιο html στοιχείο είτε όταν ο Browser
κάνει κάτι είτε όταν ο χρήστης κάνει κάτι -δηλαδή, ανάλογα με το event handler θα
πυροδοτηθεί η εκτέλεση συγκεκριμένου κώδικα. Ο κώδικας μπορεί να είναι συνάρτηση,
κάποιο jquery ή οτιδήποτε άλλο -για παράδειγμα αν ο χρήστης κάνει κλικ με το mouse
σε ένα στοιχείο (onclick event handler), τότε μπορεί να αλλάξει το χρώμα του κειμένου
της σελίδας.
Παραδείγματα
Στα παραδείγματα που ακολουθούν θα δημιουργούμε Buttons στα οποία θα
εφαρμόσουμε onclick, onmouseover και onmouseout events. Πριν ξεκινήσουμε τα
παραδείγματα θα πρέπει να διευκρινίσουμε ότι η ίδια μορφοποίηση μπορεί να
πυροδοτηθεί από οποιοδήποτε event handler.
197
Onclick events
Στο στοιχείο head κατά προτίμηση προσθέτουμε τον ορισμό της ακόλουθης
συνάρτησης:
Μόλις γίνει η κλήση της συνάρτησης θα εμφανιστεί το κείμενο που βρίσκεται εντός της
document.write “this was my first onclick event”);. Αντί λοιπόν να κάνουμε κλήση της
συνάρτησης με τον κλασικό τρόπο, θα δημιουργήσουμε ένα Button το οποίο θα
πυροδοτήσει την κλήση της συνάρτησης. Γενικά είναι πολύ συνηθισμένο να
πυροδοτούνται συναρτήσεις με event handlers.
Αυτό θα δημιουργήσει το button που θα εμφανίζεται στη σελίδα ως first και στην
κατάσταση onclick, δηλαδή όταν θα πατηθεί από τον κέρσορα του ποντικιού, τότε θα
γίνει κλήση της συνάρτησης βάζοντας εντός των εισαγωγικών του onclick “first()”.
Μόλις λοιπόν ανοίξουμε την ιστοσελίδα, θα εμφανιστεί ένα button που μόλις το πατήσει
κάποιος θα εμφανιστεί στην οθόνη το μήνυμα που προαναφέραμε.
Παράδειγμα 5. First onclick
198
Εικόνα Browser: first onclick
Δηλαδή αντί για onclick θα βάλετε onmouseover. Στην περίπτωση αυτή μόλις ο
κέρσορας του ποντικιού αιωρηθεί πάνω από το button θα εμφανιστεί το ίδιο ακριβώς
μήνυμα, διότι θα εκτελεστεί η ίδια ακριβώς συνάρτηση.
199
Στον κώδικα χρησιμοποιήσαμε δύο ετικέτες button της Html5 για τα αντίστοιχα buttons
με πυροδότηση των μεθόδων history.forward, history.back από το event handler
onclick.
200
2.2 Αλλαγή στυλ των buttons με τα event handlers
Η function hover δέχεται σαν παράμετρο εισόδου τη btn και στη συνέχεια αλλάζει το
φόντο σε κόκκινο και το κείμενο του button σε μπλε με τις εντολές btn.style.background
και btn.style.color αντίστοιχα. Στη συνέχεια επιστρέφει τις τιμές με την εντολή return.
Στη συνέχεια θα ορίσουμε μία συνάρτηση για να επαναφέρουμε το button στο αρχικό
του στυλ όταν θα απομακρυνθεί ο κέρσορας από αυτό.
Για να το πετύχουμε αυτό γράφουμε:
Η function out δέχεται σαν παράμετρο εισόδου τη btn και στη συνέχεια αλλάζει το
φόντο σε κίτρινο και το κείμενο του button σε κόκκινο με τις εντολές
201
btn.style.background και btn.style.color αντίστοιχα. Στη συνέχεια επιστρέφει τις τιμές με
την εντολή return.
Στη συνέχεια θα δημιουργήσουμε ένα button με τις ετικέτες button της html και θα
δώσουμε αρχική μορφοποίηση ίδια με αυτή που θα συμβεί όταν μετά από την αιώρηση
απομακρυνθεί ο κέρσορας.
Για να το πετύχουμε αυτό γράφουμε:
Το style είναι το αρχικό στυλ του button. Μέσα στην ετικέτα έναρξης του button θα
γράψουμε τα δύο event handlers που θα πυροδοτήσουν τις αντίστοιχες συναρτήσεις
για να επιφέρουν τις αντίστοιχες αλλαγές στο στυλ.
Προσέξτε ότι στις κλήσεις χρησιμοποιούμε τη λέξη this ως είσοδο της συνάρτησης που
σημαίνει ότι μας ενδιαφέρουν οι τρέχουσες τιμές για το στυλ του button.
202
Εικόνα Browser: hover style
203
Εικόνα Browser: hover style σε στοιχεία της σελίδας
2.3 Αλλαγή του στυλ του κειμένου του στοιχείου body με buttons και
event handlers
Μπορούμε με event handlers να αλλάζουμε το χρώμα του κειμένου του στοιχείου body.
Για να το πετύχουμε αυτό πληκτρολογούμε μέσα στο στοιχείο body:
Αυτό το τμήμα κώδικα θα δημιουργήσει ένα button στο οποίο θα προσθέσει την εικόνα
red-text.png την οποία μπορούμε να δημιουργήσουμε με όλους τους γνωστούς
τρόπους που έχουμε μάθει.
Επίσης στην ετικέτα button έχουμε προσθέσει το event handler onclick το οποίο σε
περίπτωση πατήματος του κουμπιού θα πυροδοτήσει την αλλαγή του χρώματος του
κειμένου σε κόκκινο.
204
Παράδειγμα 9. Αλλαγή χρώματος κειμένου με event handler
Αλλαγή του στυλ του φόντου του στοιχείου body με buttons και event handlers:
Για να πετύχουμε την αλλαγή του χρώματος του φόντου του στοιχείου body ενεργούμε
όπως στην περίπτωση με την αλλαγή του χρώματος του κειμένου με τη διαφορά ότι θα
χρησιμοποιήσουμε τη μέθοδο document.bgColor.
205
Σημείωση: με την ίδια λογική μπορούμε να επιφέρουμε αλλαγές και σε άλλα στοιχεία της
Html5. Για παράδειγμα με τις ίδιες συναρτήσεις μπορούμε να επιφέρουμε αλλαγές σε
ένα στοιχείο h1 ή ακόμα και σε ένα στοιχείο p.
Παράδειγμα
206
Εικόνα Browser: Αλλαγή φόντου με event handler
207
Εικόνα Browser: Αλλαγή φόντου κειμένου στοιχείου με double click
Επίσης μπορούμε να επιφέρουμε αλλαγές και στο στυλ του κέρσορα με τον ίδιο τρόπο.
Αρκεί να προσθέσουμε
Μπορούμε να επιλέξουμε πολλά στυλ για τον κέρσορα του ποντικιού και αυτά είναι τα
εξής σύμφωνα με το w3org:
Auto Ορίζει τον κέρσορα σύμφωνα με το συγκεκριμένο περιεχόμενο.
Crosshair Ένας απλός σταυρός
Default Προεπιλογή
Pointer Δείχνει κάποιο Link
Move Δείχνει κάτι το οποίο πρόκειται να μετακινηθεί
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize Δείχνει
ότι κάποιο όριο πρόκειται να μετακινηθεί
text Δείχνει ότι το κείμενο μπορεί να επιλεχθεί.
208
wait Δείχνει ότι το πρόγραμμα είναι απασχολημένο και ο χρήστης πρέπει να
περιμένει. Συχνά εμφανίζεται σαν ρολόι ή κλεψύδρα.
Progress Το πρόγραμμα πραγματοποιεί κάποιους υπολογισμούς αλλά με
διαφορετική έννοια από το wait. Στην περίπτωση του progress ο χρήστης έχει τη
δυνατότητα να αλληλεπιδρά με το πρόγραμμα. Συχνά εμφανίζεται ως
περιστρεφόμενη μπάλα του volley ή ένα τόξο με ένα ρολόι ή με μία κλεψύδρα.
Help Υπάρχει η δυνατότητα παροχής βοήθειας για το συγκεκριμένο αντικείμενο.
Συχνά εμφανίζεται ως ερωτηματικό ή μπαλόνι.
209
Εικόνα Browser: Αλλαγή στυλ κέρσορα 1
210
Εικόνα Browser: Αλλαγή στυλ κέρσορα 2
document.getElementById
Η μέθοδος document.getElementById αποκτά πρόσβαση στο πρώτο στοιχείο με το
αντίστοιχο Id. Δηλαδή όταν εκτελείται, βρίσκει το στοιχείο με το συγκεκριμένο id και
έπειτα μας δίνει τη δυνατότητα να παρέμβουμε και να επιφέρουμε αλλαγές και στο
περιεχόμενό του και στο στυλ του.
Η innerHTML είναι μία πολύ βασική ιδιότητα για τις ιστοσελίδες. Και αυτό γιατί μας δίνει τη
δυνατότητα να μπορούμε να αλλάξουμε δυναμικά το περιεχόμενο των σελίδων
αλλάζοντας συγκεκριμένα στοιχεία της σελίδας χωρίς να χρειάζεται η επαναφόρτισή
της. Έτσι πετυχαίνουμε καλύτερες ταχύτητες στη φόρτωση των σελίδων και οικονομία
στους πόρους του συστήματος.
Στην πραγματικότητα η ιδιότητα innerHTML δεν ανήκει επίσημα στο DOM αλλά
χρησιμοποιείται πολύ από τους browsers και συνδυάζεται με τη μέθοδο
document.getElementById
211
Αρχικά στο στοιχείο body θα εμφανιστούν ένα button με onclick event handler για τη
συνάρτηση inner. Αυτό σημαίνει ότι μόλις θα ενεργοποιηθεί το onclick event handler
με το πάτημα του mouse button τότε θα εκτελεστεί η συνάρτηση inner χωρίς
παραμέτρους εισόδου.
Στο στοιχείο head έχει προστεθεί η μέθοδος document.getElementById η οποία μόλις
εκτελεστεί θα ψάξει να βρει το πρώτο στοιχείο με το συγκεκριμένο id και θα αποκτήσει
πρόσβαση σε αυτό. Δηλαδή το id test. Εφόσον έχουμε προσθέσει την ιδιότητα
innerHTML θα αντικατασταθεί το περιεχόμενο του στοιχείου h1 με το μήνυμα “the h1 has
changed”.
Το περιεχόμενο του στοιχείου h2 θα μείνει ανέπαφο.
Παράδειγμα 14. Ιδιότητα getElementById με innerHTML
212
Εικόνα Browser: Ιδιότητα getElementById με innerHTML
213
Παράδειγμα 15. Ιδιότητα getElementById
214
2.6 JavaScript time events
window.setInterval()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος setinterval του αντικειμένου
window από τη στιγμή που θα ξεκινήσει θα εκτελέσει μία συγκεκριμένη συνάρτηση για
πρώτη φορά μετά από συγκεκριμένο αριθμό n milliseconds(1 millisecond=1/1000
seconds). Έπειτα θα συνεχίζει να εκτελεί τη συγκεκριμένη συνάρτηση κάθε n
milliseconds.
Σύνταξη
setInterval(function(){όνομα_συνάρτησης()},χρόνος_σε_msec);
215
Εικόνα: Ιδιότητα window.setInterval()
Παράδειγμα
Στο συγκεκριμένο παράδειγμα στο set interval έχουμε δηλώσει δύο συναρτήσεις inner
και inner2. Η πρώτη θα εκτελείται κάθε 2000 mseconds=2 δευτερόλεπτα και η δεύτερη
κάθε 5000 mseconds=5 δευτερόλεπτα.
window.clearInterval()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος window.clearInterval() του
αντικειμένου window χρησιμεύει στο να σταματήσει την επ’ άπειρο εκτέλεση της
συνάρτησης που έχει οριστεί από τη μέθοδο window.setInterval(). Είναι απαραίτητη η
χρήση καθολικής μεταβλητής.
Σύνταξη
clearInterval(όνομα_καθολικής_μεταβλητής)
216
Παράδειγμα 17. Ιδιότητα window.clearInterval()
Σημείωση: Η χρήση καθολικών μεταβλητών γίνεται έξω από τους ορισμούς των
συναρτήσεων.
217
Παράδειγμα 18. Ιδιότητα window.setInterval() και window.clearInterval()
Σημείωση:
Για να μπορούμε να χρησιμοποιήσουμε και τα 2 buttons, ενσωματώσαμε την καθολική
μεταβλητή μέσα στο
218
Συμπερασματικά μπορούμε να πούμε ότι η μέθοδος window.setInterval() εκτελεί
συνεχώς μία συνάρτηση κάθε n milliseconds και η μέθοδος window.clearInterval()
σταματάει την αέναη εκτέλεση.
window.setTimeout()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος window.setTimeout() του
αντικειμένου window χρησιμεύει στο να υπάρξει καθυστέρηση στην εκτέλεση μίας
συνάρτησης. Αυτό σημαίνει ότι μόλις διαβαστεί από τον Browser η συγκεκριμένη
μέθοδος τότε θα εκτελεστεί η εντός της μεθόδου συνάρτηση με χρονική καθυστέρηση n
milliseconds. Η συνάρτηση αυτή θα εκτελεστεί μία φορά σε αντίθεση με αντίστοιχη
συνάρτηση που περιγράφεται από τη μέθοδο window.setInterval().
Σύνταξη
setTimeout() (function(){όνομα_συνάρτησης()},χρόνος_σε_msec);
window.clearTimeout()
Το πρόθεμα window μπορεί να παραληφθεί. Η μέθοδος window.clearTimeout() του
αντικειμένου window χρησιμεύει στο να υπάρχει η δυνατότητα ακύρωσης της εκτέλεσης
της συνάρτησης που εμπεριέχεται από τη μέθοδο window.setTimeout(). Για παράδειγμα
αν στη μέθοδο window.setTimeout() ορίσουμε σαν καθυστέρηση της συνάρτησης
5000 (milliseconds) σημαίνει ότι αν πυροδοτηθεί συνάρτηση με τη μέθοδο
window.clearTimeout() πριν από τα 5 δευτερόλεπτα μετά την εκτέλεση της μεθόδου
window.setTimeout() η αντίστοιχη συνάρτηση δεν θα εκτελεστεί καμία φορά. Είναι
απαραίτητη η χρήση καθολικής μεταβλητής.
Σύνταξη
clearTimeout() (όνομα_καθολικής_μεταβλητής)
219
Παράδειγμα 19. setTimeout-clearTimeout
Κώδικας: setTimeout-clearTimeout
Εικόνα: setTimeout-clearTimeout
220
ΥΠΟΕΝΟΤΗΤΑ 3. ΔΗΜΙΟΥΡΓΙΑ ΑΝΤΙΚΕΙΜΕΝΩΝ ΚΑΙ ΠΑΡΑΔΕΙΓΜΑΤΑ
Για να δημιουργήσουμε ένα script για την εμφάνιση ημερομηνίας και ώρας κάνουμε τα
εξής βήματα με βάση το αντίστοιχο παράδειγμα:
221
Παράδειγμα 20. Εμφάνιση τοπικής και παγκόσμιας (Greenwitch) ημερομηνίας και
ώρας
Δημιουργία ρολογιού:
Για να ενσωματώσουμε ένα ρολόι στο script, το πρώτο που θα πρέπει να κάνουμε είναι
να έχουμε 3 διαφορετικές μεταβλητές όπου θα αποθηκεύονται οι ώρες τα λεπτά και τα
δευτερόλεπτα. Για να το πετύχουμε αυτό θα χρησιμοποιήσουμε τις ενσωματωμένες
συναρτήσεις της JavaScript
222
Στη μεταβλητή hours θα αποθηκεύσουμε τις ώρες.
223
Εικόνα: Εμφάνιση τοπικής και παγκόσμιας(Greenwitch) ημερομηνίας και ώρας
224
Εικόνα: Ψηφιακό ρολόι με location.reload
225
Εικόνα: Ψηφιακό ρολόι με start stop buttons
Έστω ότι θέλουμε να δημιουργήσουμε κατάλογο επαφών σαν και αυτές που έχουμε
στο smartphone ή στο tablet μας. Για να το πετύχουμε αυτό θα χρειαστούμε αρχικά
ένα αντικείμενο που θα αντιστοιχεί στην καρτέλα επαφής κάθε εγγεγραμμένου. Για
παράδειγμα το αντικείμενο Contact.
226
Κάθε φορά που θα καλείται η δημιουργός συνάρτηση θα δέχεται παραμέτρους (name,
address, email, phone) τις οποίες θα τις εκχωρεί στις αντίστοιχες μεταβλητές.
Η τελευταία γραμμή (“this.ShowContact=ShowContact”) αναφέρεται στη συνάρτηση
που θα δημιουργήσουμε για να εμφανίζει τα αποτελέσματα της εγγραφής.
Τη λέξη this τη χρησιμοποιούμε όταν δημιουργούμε ένα αντικείμενο ή όταν
αναφερόμαστε στο τρέχον αντικείμενο.
Για να μπορούμε να εμφανίζουμε την καρτέλα επαφής κάποιου δημιουργούμε τη
συνάρτηση ShowContact η οποία αναλαμβάνει να εμφανίσει τη συγκεκριμένη
εγγραφή με τη βοήθεια της document.write. Αυτό που θα σχολιάσουμε εδώ είναι ότι
όταν γράφουμε σε μία γραμμή είναι για να αλλάξουμε γραμμή και όταν
προσθέτουμε είναι για να εμφανιστεί η οριζόντια γραμμή. Δηλαδή ενσωματώνουμε
στο κείμενο τα αντίστοιχα tags της Html5. Επίσης πρέπει να σχολιαστεί ότι η λέξη κλειδί
this μπαίνει μπροστά από τις ιδιότητες έτσι ώστε να εμφανίζει κάθε φορά τις ιδιότητες
της τρέχουσας επαφής που έχει ζητηθεί.
227
Παράδειγμα 24. Κατάλογος επαφών
Εναλλακτικοί τρόποι:
Αφού γίνει πλήρως κατανοητό το στήσιμο του καταλόγου επαφών στη συνέχεια θα
παρουσιάσουμε εναλλακτικούς τρόπους για τη συγγραφή του κώδικα, για την είσοδο
και έξοδο δεδομένων στον κατάλογο επαφών.
228
3.2.2 Εναλλακτικός τρόπος συγγραφής του κώδικα
Εναλλακτικά μπορούμε να γράψουμε σε ένα text editor (π.χ. notepad) όλο το script
χωρίς τα , και να το αποθηκεύσουμε ως contact.js. Τα text αρχεία με
κατάληξη js είναι αρχεία τύπου JSON.
JSON είναι ένα αρχείο απλής μορφής τύπου txt που χρησιμοποιείται για αποθήκευση,
ανταλλαγή δεδομένων στο Web και έχει κατάληξη (.js). Αρχικοποιήθηκε από τη
JavaScript και το συναντήσαμε ήδη στην προηγούμενη ενότητα στο παράδειγμα με το
JQuery Library.
Για να δούμε το περιεχόμενο ενός JSON αρχείου μπορούμε να κάνουμε δεξί κλικ στο
αρχείο και να το ανοίξουμε με το Notepad++ ή οποιοδήποτε άλλο text editor.
Στη συνέχεια θα καλέσουμε το json file για να εκτελεστεί όλο το script. Θα το καλέσουμε
ως εξής μέσα στο στοιχείο body:
229
Εικόνα: Κατάλογος επαφών με κλήση JSON
230
Παράδειγμα 26. Εναλλακτικός τρόπος εξαγωγής δεδομένων
231
Σύνοψη
Μετά την ολοκλήρωση της συγκεκριμένης διδακτικής ενότητας γνωρίζετε ότι:
Μπορούμε να ορίσουμε συναρτήσεις στη JavaScript functions και να τις καλούμε
σε οποιοδήποτε σημείο του κώδικα.
Τα αντικείμενα document, history και Location είναι θεμελιώδη αντικείμενα του DOM
της JavaScript.
Μπορείτε να χρησιμοποιείτε την μέθοδο document.getElementById για να
αποκτήσετε πρόσβαση σε κάποιο στοιχείο της σελίδας. Αφού αποκτήσετε
πρόσβαση, μπορείτε να αλλάξετε το περιεχόμενο και το στυλ του. Το περιεχόμενο
μπορείτε να το αλλάξετε με την ιδιότητα innerHTML.
Μπορείτε να δημιουργείτε με τη βοήθεια συνάρτησης αντικείμενα και ιδιότητες
αυτών.
Μπορείτε να δημιουργείτε scripts για την εμφάνιση ώρας και τη δημιουργία
καταλόγου επαφών.
Μπορείτε να δημιουργείτε αρχεία τύπου JSON στα οποία θα γράφετε κώδικα
Javacript τον οποίο απλά θα καλείτε εντός του στοιχείου body για να εκτελεστεί.
232
ΒΙΒΛΙΟΓΡΑΦΙΑ
ΔΕ1
Castro, E & Hyslop, B., (2012), HTML5 & CSS3 Visual Quicstart Guide, 7th edition, USA:
Pearson Education
Niederst Robbins, J., (2012), Learning Web Design, 4th edition,Canada: O’Reilly
Media
Wempen, F., (2011) HTML5 Step By Step, 1st edition, USA: Microsoft Press
Wempen, F., (2013) Earn HTML5, 1st edition, USA: Microsoft Press
Forster, K. & Bernd, B., (2011), HTML5 Guidelines for Web Developers, 1st edition,
USA: Pearson Education
Hudson, Ch. & Leadbetter, T., (2012), HTML5 developer’s cookbook, 1st edition USA:
Pearson Education.
MacDonald, M., (2011), HTML5 the missing manual,1st edition, USA: O’Reilly Media
Freeman, E. & Robson, (2011), Head first HTML programming, 1st edition USA:
O’Reilly
ΔΕ2-ΔΕ3
Castro, E & Hyslop, B., (2012), HTML5 & CSS3 Visual Quicstart Guide, 7th edition, USA:
Pearson Education
Niederst Robbins, J., (2012), Learning Web Design, 4th edition, Canada: O’Reilly
Media
Wempen,F., (2011) HTML5 Step By Step, 1st edition, USA: Microsoft Press
Wempen,F., (2013) Learn HTML5, 1st edition, USA: Microsoft Press
Forster, K. &Bernd, B., (2011), HTML5 Guidelines for Web Developers, 1st edition, USA:
Pearson Education
Hudson, Ch.& Leadbetter, T.,(2012), HTML5 developer’s cookbook, 1st edition USA:
Pearson Education.
MacDonald, M., (2011), HTML5 the missing manual, 1st edition, USA: O’Reilly Media
Freeman, E. & Robson, (2011), Head first HTML programming, 1st edition USA:
O’Reilly
Freeman, E. & Robson, (2011), Head first HTML and CSS, 2nd edition USA: O’Reilly
233
Bruce Lawson, B.& Sharp, R., (2011), Introducing HTML5, 1st edition, USA: New Riders
Robe Fuller, R.& Ulrich, L. (2004), HTML in 10 Simple Steps or Less, Indianapolis: Wiley
Publishing
Castro, E & Hyslop, B., (2012), HTML5 & CSS3 Visual Quicstart Guide, 7th edition, USA:
Pearson Education
Niederst Robbins, J., (2012), Learning Web Design, 4th edition, Canada: O’Reilly
Media
Wempen,F., (2011) HTML5 Step By Step, 1st edition, USA: Microsoft Press
Wempen,F., (2013) Earn HTML5, 1st edition, USA: Microsoft Press
Forster, K. &Bernd, B., (2011), HTML5 Guidelines for Web Developers, 1st edition, USA:
Pearson Education
Hudson, Ch.& Leadbetter, T.,(2012), HTML5 developer’s cookbook, 1st edition USA:
Pearson Education.
MacDonald, M., (2011), HTML5 the missing manual, 1st edition, USA: O’Reilly Media
Freeman, E. & Robson, (2011), Head first Html programming, 1st edition USA: O’Reilly
ΔΕ4-ΔΕ5
Chaffer, J.& Swedberg, K., (2013) Learning jQuery, 4rth edition, UK: 2013 Packt
Publishing
Morrison, M., (2008) Head First JavaScript, 1st edition, USA: O’Reilly Media
Benedetti, R. & Heilman, C, (2008) Beginning JavaScript with DOM Scripting and
Ajax, 2nd edition, USA: Apress
Ballard, Ph. &Moncur, M, (2008) Sams Teach Yourself Ajax, JavaScript, and PHP All
in One, 1st edition, USA:Sams Publishing
Zakas, C, (2012) Professional JavaScript for Web Developers 3rd edition, USA:John
Wiley & Sons
Flanagan, D., (2011) JavaScript the Definitive Guide, 6th edition, USA: O’Reilly
Media
Suering, S., (2010) JavaScript Step By Step, 1st edition, USA: O’Reilly Media
Freeman, E. & Robson, E., (2014) Head First JavaScript Programming, 1st edition,
USA: O’Reilly Media
234