Εισαγωγή Στον Προγραμματισμό Του Παγκόσμιου Ιστού Ελευθέριος Μωυσιάδης ΤΕΙ Αν. Μακεδονίας Και Θράκης

Εισαγωγή στον
Προγραμματισμό του
Παγκόσμιου Ιστού
Ελευθέριος Μωυσιάδης
ΤΕΙ Αν. Μακεδονίας και

Θράκης
Ο προγραμματισμός του
Παγκόσμιου Ιστού
Native Development vs. Browser
Based
• Native Development (c objective για ios, java για

android, c# για Microsoft phones, κλπ). Μεγάλη
ευελιξία. Χωριστή ανάπτυξη ανα πλατφόρμα.
• Browser Based. Ενιαία ανάπτυξη.
Διαπλατφορμικές εφαρμογές (Platform
Independent)
HyperText Markup Language
• HyperText
• Markup
• Relation with instructional programming
Client-Server Communication
page
request
Βασικές τεχνολογίες ανάπτυξης

του ΠΙ
page
request
HTML, PHP
CSS,
Javascript
Η εξέλιξη της HTML
HTML XHTML
XHTML HTML5
Νέες δυνατότητες της HTML5
• Σημασιολογικά στοιχεία
• Εξελιγμένες φόρμες
• Εξελιγμένη διαχείριση ήχου και βίντεο
• Καμβάς για ζωγραφική
• Αποθήκευση δεδομένων σε τοπικό
επίπεδο
• Εφαρμογές εκτός σύνδεσης
• Γεωτοποθεσία
Περιβάλλοντα ανάπτυξης
Text Editors
NotePad++
NetBeans
Στοιχεία της HTML
Περιέκτες (container elements),

π.χ. <p> Hello World </p>
Αυθύπαρκτα (stand alone elements)

π.χ. <br/>
Βασική HTML σελίδα
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Hello World</title>
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 </head>
9 <body>
10 <p>Hello World!!!</p>
11 </body>
12 </html>
Επικεφαλίδες και παράγραφοι

<h1> Απλά HTML στοιχεία </h1>
<p> Στην ενότητα αυτή παρουσιάζουμε ορισμένα βασικά στοιχεία της HTML. Πιο
συγκεκριμμένα παρουσιάζονται τα στοιχεία για να φτιάχνουμε επικεφαλίδες, παραγράφους,
λίστες, να τραβάμε οριζόντιες γραμμές και να τοποθετούμαι εικόνες
</p>
<h2> Επικεφαλίδες </h2>
.
.
.
Ειδικοί Χαρακτήρες, Αλλαγή
γραμμής
<h2> Επικεφαλίδες </h2>
<p> Υπάρχουν επικεφαλίδες 6 επιπέδων: &lth1&gt,&lth2&gt,
&lth3&gt, &lth4&gt, &lth5&gt,&lth6&gt </p>
<h2>Horizontal line</h2>
<p> Αν θέλετε μια οριζόντια γραμμή για να διαχωρίσετε το περιεχόμενο
δεν έχετε παρά να χρησιμοποιήσετε την &lthr&gt, π.χ. </p>
<hr/>
Αταξινόμητη Λίστα
20 <h3> Αταξινόμητη Λίστα </h3>

21 <ul>
22 <li> Αταξινόμητες Λίστες </li>
23 <li> Ταξινομημένες Λίστες </li>
24 <li> Λίστες ορισμών </li>
25 </ul>
Αριθμημένη Λίστα
27 <ol>
31 </ol>
Λίστα Ορισμών
<h3> Λίστα Ορισμών </h3>
<dl>
<dt>Unordered list</dt>
<dd>A list where each list element is marked by a bullet</dd>
<dt>Ordered</dt>
<dd>A list where each list element is marked by a number</dd>
<dt>Definition List</dt>
<dd>This is a definition List</dd>
</dl>
Αλλαγή γραμμής και
Υπερσύνδεσμοι
41 <p> To &ltbr&gt <br/> αλλάζει γραμμή </p>

42 <h3> Υπερσύνδεσμοι </h3>
43 <p> Ιδιαίτερο ενδιαφέρον έχουν οι
<a href="hyperlinks.html" > υπερσύνδεσμοι </a></p>
Υπερσύνδεσμοι και Εικόνες

8 <body>
9 <h1> Σελίδα Υπερσυνδέσμων </h1>
10 <a href="index.html"> Back </a>
11 <hr>
12 <h2> Εκόνες </h2>
13 <a href="index.html">
14 <img alt="backarrow" src="backArrow.jpeg"/>
15 </a>
16 </body>
Διαμόρφωση
Αλληλεπικαλυπτόμενα Φύλλα Διαμόρφωσης

Cascading Style Sheets (CSS)
Δομή κανόνα CSS
επιλογέας {ιδιότητα: τιμή [; ιδιότητα: τιμή]}

Εξωτερικά Φύλλα Διαμόρφωσης
<link rel="stylesheet" href="basicHtml.css" type="text/css" />
• Δυνατότητα μαζικής διαμόρφωσης με μόνο ένα φύλλο

• Το link τοποθετείται στο head
Ενσωματωμένη διαμόρφωση
<style>
h1 { color: fuchsia }
</style>
• Διαμόρφωση που αφορά μόνο στην συγκεκριμμένη ιστοσελίδα
• Το στοιχείο style τοποθετείται στο head
Διαμόρφωση Ετικέτας
<h1 style="color: fuchsia"> Απλά HTML στοιχεία </h1>
• Διαμόρφωση που αφορά συγκεκριμμένο στοιχείο

• Η διαμόρφωση επιτυγχάνεται μέσω της ιδιότητας style
Παράδειγμα: Διαμόρφωση
Επικεφαλίδας
1 h1 {
2 color: coral;
3 font-size: xx-large;
4 text-align: center;
5}
h1 {
color: coral;
font-size: xx-large; Ιδιότητα color
text-align: center;
}
• Τιμές απο σταθερές, π.χ. blue, brown, red, yellow

• Απο την συνάρτηση rgb(r,g,b) με r, g,b απο 0..255
• Με δεκαεξαδική κωδικοποίηση, π.χ. #ff0000
h1 {
color: coral;
font-size: xx-large; Ιδιότητα font-size
text-align: center;
}
• Τιμές απο σταθερές:

medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger
• Τιμές με μονάδες, π.χ. font-size: 10px
Παραδείγματα διαθέσιμων μονάδων px(pixels), cm, pt
• Σχετικές τιμές
em και %
h1 {
color: coral;
font-size: xx-large; Ιδιότητα text-align
text-align: center;
}
• Παραδείγματα τιμών:
left, right, justify, κά
padding
1p{
2 text-align: justify;
3 padding-left: 10px;
4 padding-right: 10px;
5 }
Μηχανισμοί επιλογής
.c {
<body>
<div class="c" id="myId" style="color: red;"> color:green;
Περιεχόμενο }
</div>
</body>
#myId {
color:blue;
}
div {
color:yellow;
}
Αλληλεπικάλυψη Διαμόρφωσης
Cascading
Διαμόρφωση ετικέτας
Ενσωματωμένη διαμόρφωση
Εξωτερική διαμόρφωση
Διαμόρφωση φυλλομετρητή
Κληρονομικότητα
Inheritance
• H διαμόρφωση κληρονομείται απο ένα στοιχείο
στα περιεχόμενα στοιχεία του.
• Η κληρονομούμενη διαμόρφωση υπερισχύει
μόνον της διαμόρφωσης φυλλομετρητή.
• Δεν κληρονομούνται όλοι οι ορισμοί
διαμόρφωσης
Table of Contents
Κεφάλαιο 1 Εισαγωγή ............................................................................... 2
1.1 Ανάπτυξη στον Παγκόσμιο Ιστό ......................................................................................... 2
1.2 Δομή και Διαμόρφωση ............................................................................................................ 3
1.3 Προγραμματισμός στον πελάτη .......................................................................................... 4
1.4 Προγραμματισμός στον εξυπηρετητή .............................................................................. 4
1.5 HTML5............................................................................................................................................ 5
Κεφάλαιο 2 Εισαγωγή στην HTML ............................................................. 6

2.1 Περιβάλλοντα Ανάπτυξης ...................................................................................................... 6
2.2 Βασική html σελίδα .................................................................................................................. 6
2.3 Βασικά html στοιχεία .............................................................................................................. 8
2.4 Βιβλιογραφία για επιπλέον μελέτη................................................................................. 11
Κεφάλαιο 3 Διαμόρφωση του περιεχομένου με τα CSS............................ 11

3.1 Εντολές CSS ............................................................................................................................... 13
3.2 Μηχανισμοί Επιλογής ........................................................................................................... 15
3.3 Αλληλεπικάλυψη και κληρονομικότητα ....................................................................... 16
Κεφάλαιο 4 Περαιτέρω μελέτη ................................................................ 17

4.1 Ασκηση........................................................................................................................................ 18
Βιβλιογραφία .......................................................................................... 19
1
Κεφάλαιο 1 Εισαγωγή
Για την ανάπτυξη εφαρμογών σε περιβάλλοντα κινητών συσκευών
(τηλεφώνων, ταμπλετών, κά) διατίθενται δύο βασικές προσεγγίσεις. Η πρώτη
προσέγγιση είναι η ανάπτυξη εφαρμογών με εργαλεία που εξειδικεύονται για το
συγκεκριμμένο περιβάλλον (native code), π.χ. java για android, c objective για ios, c#
για Microsoft phone, κοκ. Η προσέγγιση αυτή δίνει την δυνατότητα για
ολοκληρωτικό έλεγχο της κινητής συσκευής. Έχει όμως και ως βασικό μειονέκτημα
την απαίτηση για ξεχωριστή ανάπτυξη σε κάθε περιβάλλον. Η δεύτερη προσέγγιση
είναι η ανάπτυξη εφαρμογών που βασίζονται σε φυλλομετρητή (browser based
applications). Η προσέγγιση αυτή έχει το προφανές πλεονέκτημα ότι οι εφαρμογές
τρέχουν σε κάθε περιβάλλον που τρέχει φυλλομετρητής. Ειδικά, με την εξέλιξη της
HTML που μας δίνει πλέον δυνατότητες που σχετίζονται άμεσα με την συσκευή, π.χ.
διάβασμα τιμών GPS, οι εφαρμογές που βασίζονται σε φυλλομετρητές γίνονται
ολοένα και πιο δημοφιλείς.
Ο σκοπός αυτής της ενότητας είναι η εισαγωγή στην HTML και τα CSS που
αποτελεί προαπαιτούμενο για την μελέτη της τεχνολογίας ανάπτυξης εφαρμογών
βασιζόμενων σε φυλλομετρητή.
1.1 Ανάπτυξη στον Παγκόσμιο Ιστό

Χωρίς καμιά αμφιβολία ο Παγκόσμιος Ιστός (World Wide Web ή απλώς web)
αποτελεί μια απο τις σημαντικότερες υπηρεσίες του Διαδικτύου (Internet). Ο
Παγκόσμιος Ιστός, ή ΠΙ για συντομία, παρουσιάζει δραματική εξάπλωση
προσεγγίζοντας στις μέρες μας τον απίστευτο αριθμό του 1.000.000.000 ιστοχώρων
(Web Sites). Λεπτομέρειες για την ιστορία του ΠΙ μπορεί να αντληθούν απο το [1]
και πλήθος άλλων πηγών.
Η βασική γλώσσα ανάπτυξης του ΠΙ είναι η HTML (HyperText Markup
Language). Οπως φανερώνει το όνομά της, πρόκειται για γλώσσα σήμανσης
υπερκειμένου. Απο αυτήν την άποψη η HTML είναι πολύ διαφορετική απο κάθε
διαδικαστική (procedural), λειτουργική (functional) ή αντικειμενοστραφή (object
oriented) γλώσσα προγραμματισμού. Η HTML θα μπορούσε να περιγραφεί ως μια
γλώσσα ανάπτυξης περιεχομένου που διαθέτει 2 χαρακτηριστικές λειτουργίες: την
σήμανση της δομής του περιεχομένου και την υποστήριξη υπερσυνδέσμων
(hyperlinks). Ετσι, κατά την ανάπτυξη περιεχομένου με HTML έχουμε την
2
δυνατότητα να σημειώνουμε πως αυτό το τμήμα του περιεχομένου είναι π.χ.
επικεφαλίδα, ένα άλλο τμήμα μπορεί να είναι λίστα, κοκ. Παράλληλα, με τους
υπερσυνδέσμους μας δίνεται η δυνατότητα να μεταπηδούμε απο ένα σημείο του
περιεχομένου σε ένα άλλο του ίδιου ή άλλου περιεχομένου που βρίσκεται στον ίδιο ή
άλλον υπολογιστή. Στην εικόνα 1 παρουσιάζεται η λειτουργία των υπερσυνδέσμων
που βασίζεται στο μοντέλο πελάτη – εξυπηρετητή (client-server architecture). Πιο
συγκεκριμένα, όταν ο χρήστης ενεργοποιεί έναν υπερσύνδεσμο, στέλνει στην πράξη
μια αίτηση (http request) με την οποία ζητά μια ιστοσελίδα απο κάποιoν εξυπηρετητή
του ΠΙ (web server). Η αίτηση περιλαμβάνει την διεύθυνση της ζητούμενης σελίδας η
οποία με την σειρά της περιλαμβάνει την διεύθυνση του server στον οποίο βρίσκεται
η σελίδα. Με αυτά τα στοιχεία δρομολογείται η αίτηση στον προορισμό της, δηλ.
στον κατάλληλο web server ο οποίος αποκρίνεται αποστέλλοντας την σελίδα στον
πελάτη.
Html page
http request
web server
Εικόνα 1: Server Client επικοινωνία
Η σελίδα δεν είναι παρά ένα αρχείο κειμένου με βασικό περιεχόμενο

εκφρασμένο σε HTML. Απο την μεριά του πελάτη παραλαμβάνεται απο ειδικό
λογισμικό, τον γνωστό φυλλομετρητή (web browser), π.χ. Internet Explorer, Google
Chrome, Mozilla Firefox, κά. Ο web browser έχει την δυνατότητα να διερμηνεύει και
να εκτελεί τις οδηγίες της HTML.
1.2 Δομή και Διαμόρφωση

Οπως περιγράψαμε προηγουμένως, η HTML μας δίνει την δυνατότητα να
αναπτύξουμε το περιεχόμενο μιας ιστοσελίδας και να του προσδώσουμε δομή.
Ωστόσο, σημαντικό ρόλο σε κάθε περιεχόμενο διαδραματίζει η παρουσίασή του.
Ετσι, η HTML περιλαμβάνει και δυνατότητες διαμόρφωσης του περιεχομένου, δηλ.
3
οδηγίες του τύπου, αυτό το περιεχόμενο να είναι μεγενθυμένο, εκείνο το κείμενο να
είναι χρώματος μπλέ, κά. Ωστόσο, έχει επικρατήσει η λειτουργικότητα μιας
ιστοσελίδας να διαχωρίζεται απο την διαμόρφωσή του. Γενικότερα, έχει επικρατήσει
η λειτουργικότητα ενός λογισμικού να διαχωρίζεται απο την διεπαφή χρήστη (user
interface) του λογισμικού. Υπάρχουν πολλοί ικανοί λόγοι για μια τέτοια διευθέτηση.
Έτσι, για παράδειγμα, οι οδηγίες διαμόρφωσης ενός ιστοχώρου που αποτελείται απο
μερικές εκατοντάδες σελίδες, καταλαμβάνουν λίγες σελίδες και η αλλαγή στην
διαμόρφωση δεν απαιτεί επεξεργασία όλων των σελίδων παρά μόνον αυτών των
λίγων που αφορούν στην διαμόρφωση.
Παλιότερα οι οδηγίες διαμόρφωσης διατυπωνόταν σε html και ήταν
ανακατεμένες με οδηγίες δομής. Σήμερα ωστόσο η πρακτική αυτή έχει
αντικατασταθεί απο τον διαχωρισμό δομής-διαμόρφωσης. Για δε την διαμόρφωση
έχει αναπτυχθεί μια ειδική γλώσσα γνωστή κυρίως με το ακρωνύμιο CSS (Cascading
Style Sheets).
1.3 Προγραμματισμός στον πελάτη

Πέρα απο την ανάπτυξη και διαμόρφωση του περιεχομένου, σε πολλές
περιπτώσεις προκύπτει η ανάγκη για μια λειτουργικότητα παρόμοια με αυτήν που
προσφέρουν οι διαδικαστικές ή/και αντικειμενοστραφείς γλώσσες προγραμματισμού.
Για παράδειγμα, σε μια ιστοσελίδα θέλουμε να περιλαμβάνεται ένας calculator. O
calculator όμως δεν μπορεί να υλοποιηθεί απλώς ως διαμορφωμένο περιεχόμενο,
αντίθετα, απαιτούνται υπολογισμοί. Η λύση που επικράτησε είναι η σελίδα να έχει
την δυνατότητα να περιλαμβάνει κώδικα που διερμηνεύεται και εκτελείται απο τον
φυλλομετρητή (client side scripting). Αρκετές γλώσσες έχουν αναπτυχθεί προς αυτόν
τον σκοπό. Ωστόσο, η γλώσσα που έχει επικρατήσει είναι η javascript.
1.4 Προγραμματισμός στον εξυπηρετητή

Η βασική αρχιτεκτονική του web ολοκληρώνεται με τον προγραμματισμό
στην πλευρά του εξυπηρετητή (server side scripting). Σε πολλές περιπτώσεις, η
ιστοσελίδα που στέλνει ο εξυπηρετητής περιέχει δεδομένα που υπολογίζονται
δυναμικά. Για παράδειγμα, σε μια ιστοσελίδα εμφανίζονται οι υψηλότεροι απο τους
βαθμούς μιας τάξης. Προκειμένου όμως να υπολογιστούν οι βαθμοί, απαιτείται
αναζήτηση και επεξεργασία δεδομένων που είναι αποθηκευμένα ενδεχομένως σε μια
βάση δεδομένων στον εξυπηρετητή. Επομένως για τέτοιου είδους λειτουργίες,
4
απαιτείται κώδικας που εκτελείται στην πλευρά του εξυπηρετητή. Και εδω έχουν
προταθεί αρκετές γλώσσες προγραμματισμού με πρωταγωνίστρια την PHP
1.5 HTML5
Με την βασική τεχνολογία που περιγράφεται παραπάνω, το περιβάλλον
ανάπτυξης του ΠΙ γίνεται πολύ ισχυρό και μπορεί να υποστηρίξει την ανάπτυξη
ποικίλης λειτουργικότητας. Ας σημειωθεί πως εκτός απο ιστοχώρους, υποστηρίζεται
και η ανάπτυξη εφαρμογών εκτός σύνδεσης (offline applications). Οι εφαρμογές
αυτές έχουν το πλεονέκτημα πως εκτελούνται από φυλλομετρητή και επομένως είναι
διαπλατφορμικές (platform-intepented). Το χαρακτηριστικό αυτό αποκτά ιδιαίτερη
σημασία, ειδικά σήμερα με την ανάπτυξη των κινητών και την συνακόλουθη αύξηση
των λειτουργικών στα οποία επιθυμούμε να εκτελούνται οι εφαρμογές μας.
Οι πολλές δυνατότητες του περιβάλλοντος ανάπτυξης συνετέλεσαν και στην
περαιτέρω αύξηση των αναγκών. Σε αυτό το πλαίσιο η εξέλιξη του περιβάλλοντος
ανάπτυξης είναι απολύτως αναμενόμενη. Έτσι, το 1998, η κοινοπραξία του ΠΙ
(WWW Consortium ή απλώς W3C), αποφάσισε να σταματήσει την ανάπτυξη της
HTML και να την αντικαταστήσει με ένα άλλο αυστηρότερο πρότυπο, την XHTML
(Extended HTML). Η XHTML σε σχέση με την HTML παρουσιάζει αυστηρότερο
συντακτικό. Ωστόσο, οι φυλλομετρητές, κυρίως για λόγους συμβατότητας με τις
υφιστάμενες σελίδες συνέχισαν να υποστηρίζουν την παλιότερη HTML. Αυτό είχε ως
αποτέλεσμα, οι web developers να συνεχίσουν να χρησιμοποιούν την HTML γεγονός
που συνέβαλλε στην αποτυχία της XTHML και στην εκ νέου υιοθέτηση της HTML
με την μορφή της HTML5. Αναλυτική ιστορική αναδρομή για την εξελικτική πορεία
της HTML παρουσιάζεται στο [2].
Ας σημειωθεί πως η HTML5 είναι επέκταση της παλιότερης HTML και όχι
ένα διαφορετικό πρότυπο. Στην πράξη η HTML, κατ’αναλογία προς τις φυσικές
γλώσσες, χαρακτηρίζεται ως μια ζωντανή γλώσσα, δηλ. μια γλώσσα που συνεχώς
εξελίσσεται.
Tα σημαντικότερα νέα στοιχεία που υποστηρίζονται απο την HTML5 είναι:
 Σημασιολογικά στοιχεία
 Εξελιγμένες φόρμες
 Εξελιγμένη διαχείριση ήχου και βίντεο
 Καμβάς για ζωγραφική
 Αποθήκευση δεδομένων σε τοπικό επίπεδο
5
 Εφαρμογές εκτός σύνδεσης
 Γεωτοποθεσία
Στην συνέχεια, γίνεται εισαγωγή στις HTML και CSS που αποτελεί αναγκαία
προυπόθεση για να προχωρήσουμε στην μελέτη των νέων στοιχείων της HTML5.
Κεφάλαιο 2 Εισαγωγή στην HTML

H HTML βασίζεται στα στοιχεία (html elements). Ένα στοιχείο καθορίζεται
απο τις ετικέτες του (tags). Για παράδειγμα,
<p> Hello World </p>
Εδώ επισημαίνουμε στον browser πως το περιεχόμενο που είναι το Hello World
συνιστά μια παράγραφο. Οι ετικέτες είναι οι <p> και </p>, η πρώτη ονομάζεται
ετικέτα αρχής (start tag) και η δεύτερη ετικέτα τέλους (end tag). Πολλά στοιχεία
απαιτούν ετικέτα αρχής και τέλους ενω άλλα μόνον μια ετικέτα. Τα πρώτα
ονομάζονται περιέκτες (container elements) και τα δεύτερα αυθύπαρκτα (standalone
elements). Ενα παράδειγμα αυθύπαρκτου στοιχείου είναι η οδηγία για αλλαγή
γραμμής με ετικέτα <br/>. Προσέξτε πως η ετικέτα <br/> περιλαμβάνει τον
χαρακτήρα / ως μια ένδειξη ότι πρόκειται για standalone στοιχείο.
2.1 Περιβάλλοντα Ανάπτυξης

Τα έγγραφα html είναι απλά αρχεία κειμένου. Επομένως, ανάπτυξη σε html
μπορούμε να κάνουμε απλά και μόνο χρησιμοποιώντας έναν επεξεργαστή κειμένου
και σώζοντας τα έγγραφα HTML σαν απλά αρχεία κειμένου με επίθεμα html
(διαλέγοντας κωδικοποίηση UTF8). Στην συνέχεια, αν ανοίξουμε το .html αρχείο με
έναν οποιονδήποτε φυλλομετρητή θα δούμε την σελίδα να “τρέχει”. Κάτι παρόμοιο
ισχύει και για τα CSS, Javascript, PHP. Ωστόσο, υπάρχουν διάφορα περιβάλλοντα
ανάπτυξης (Integrated Development Environments, IDE) τα οποία υποστηρίζουν
projects σε HTML. Χαρακτηριστικό παράδειγμα είναι το NetBeans. To NetBeans
παρέχει αυτόματη οργάνωση ενός HTML project, βοήθεια κατά την ανάπτυξη του
κώδικα, debugging facilities, χρωματική διαμόρφωση του κώδικα, αυτόματη
στοίχιση, αναδίπλωση του κώδικα κ.ά.
2.2 Βασική html σελίδα

Αν δημιουργήσουμε ένα αρχείο κειμένου με περιεχόμενο <p> Hello World
</p> και το σώσουμε με επίθεμα .html, θα δούμε ότι το αρχείο είναι αναγνωρίσιμο
6
απο όλους τους φυλλομετρητές. Ωστόσο, στα αρχεία html συνηθίζουμε να δίνουμε
την ακόλουθη ελάχιστη δομή :
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Hello World</title>
8 </head>
9 <body>
10 <p>Hello World!!!</p>
11 </body>
12 </html>
Κώδικας 1: Βασική html σελίδα
Στην γραμμή 1, το στοιχείο <!DOCTYPE html> αποτελεί εξαίρεση ως προς

το συντακτικό του. Με το DOCTYPE πληροφορούμε τον φυλλομετρητή για το ποιά
έκδοση της HTML χρησιμοποιεί η ιστοσελίδα μας. Παρότι το DOCTYPE δεν είναι
απαραίτητο καθώς ο φυλλομετρητής μπορεί να κάνει parsing αναζητώντας
πληροφορίες σε διάφορα πρότυπα, είναι όμως πολύ χρήσιμο καθώς επιταχύνει το
parsing της σελίδας. Το στοιχείο αυτό μπορεί να λάβει ποικίλες τιμές που όμως δεν
μας ενδιαφέρουν καθώς σελίδες που αναπτύσσονται στο εξής, θα έχουν το στοιχείο
όπως φαίνεται στον κώδικα 1. Επομένως, αυτό που πρέπει να θυμάται κανείς είναι
πως οι κώδικες σε HTML5 πρέπει να τοποθετούν στην πρώτη γραμμή το
<!DOCTYPE html>. Στην συνέχεια, όλο το περιεχόμενο περικλείεται σε ένα <html>
στοιχείο. Μέσα στο html στοιχείο, η σελίδα δομείται σε 2 ενότητες με τα στοιχεία
<head> & <body>. Στο head υπάρχει το στοιχείο <title> και τα <meta>. Μια χρήση
του <title> είναι για τον τίτλο της καρτέλας του φυλλομετρητή στην οποία
προβάλλεται η σελίδα. Πιο σημαντική χρήση όμως είναι η αξιοποίηση απο τις
μηχανές αναζήτησης οι οποίες δίνουν ιδιαίτερη βαρύτητα στο πεδίο αυτό. Ας
σημειωθεί πως ο σχεδιασμός μιας ιστοσελίδας πρέπει να λαμβάνει πάντα υπόψη την
ευρεσιμότητα της σελίδας απο τις μηχανές αναζήτησης. Κατάλληλο περιεχόμενο στο
στοιχείο <title> βελτιώνει την ευρεσιμότητα της σελίδας. Επομένως, το <title> θα
πρέπει να το συμπληρώνουμε και μάλιστα με ιδιαίτερη επιμέλεια. Στην συνέχεια
(γραμμές 6 & 7), συναντάμε δύο meta στοιχεία τα οποία όπως φαίνεται απο την
έλλειψη ετικέτας τέλους είναι αυθύπαρκτα. Οι πληροφορίες που μεταφέρουν τα meta
στοιχεία δεν εμφανίζονται στην σελίδα αλλά μπορεί να χρησιμοποιηθούν από
7
φυλλομετρητές, μηχανές αναζήτησης ή άλλες υπηρεσίες του ΠΙ. Τα αυθύπαρκτα
meta μεταφέρουν πληροφορίες στις ιδιότητές τους. Γενικότερα, ένα html στοιχείο
μπορεί να έχει ιδιότητες (attributes) οπότε το συντακτικό του αποκτά την εξής μορφή
<tagName atr1=”value1” atr2=”value2” …>. Περισσότερα για τα meta στοιχεία θα
πούμε αργότερα σε αυτές τις σημειώσεις, ωστόσο είναι σημαντικό να γνωρίζετε πως
θα πρέπει να φροντίζετε η κωδικοποίηση της σελίδας σας να είναι UTF-8. Αυτό θα
γίνει αυτόματα σε μερικούς editors αλλά όχι σε όλους. Ο τίτλος και τα meta
μπαίνουν πάντα στο head στοιχείο.
Στην συνέχεια, στο στοιχείο <body> περιλαμβάνεται όλο το περιεχόμενο της σελίδας.
Σημείωση : Οι φυλλομετρητές δεν ακολουθούν αυστηρά κανένα πρότυπο (κάποια

συγκεκριμμένη έκδοση της html). Αντίθετα, προσπαθούν να συνδυάσουν όλα τα
πρότυπα ή ακόμη και να μαντέψουν λάθη στις σελίδες και να τα διορθώσουν. Ομως
οι ”μαντεψιές” δεν είναι προτυποποιημένες. Έτσι αυτό που μπορεί να μαντεύεται
σωστά απο ένα φυλλομετρητή μπορεί να αποτυγχάνει σε έναν άλλον. Τις μαντεψιές
μπορούμε να αποφύγουμε χρησιμοποιώντας έναν html validator, δηλ. ένα λογισμικό
που κάνει έλεγχο ορθότητας της σελίδας μας. Υπάρχουν διάφοροι τέτοιοι validators
[3], [4], [5].
2.3 Βασικά html στοιχεία

Στην ενότητα αυτή παρουσιάζουμε κάποια βασικά html στοιχεία. Πιο
συγκεκριμμένα παρουσιάζονται τα στοιχεία για να φτιάχνουμε επικεφαλίδες,
παραγράφους, λίστες, να τραβάμε οριζόντιες γραμμές και να τοποθετούμαι εικόνες.
Στον κώδικα 2, γραμμή 10, αξιοποιείται το στοιχείο με το οποίο φτιάχνουμε
επικεφαλίδες πρώτου επιπέδου. Πρόκειται για το στοιχείο περιεχομένου <h1>. Η
χρήση του είναι απλή και αυτονόητη. Υπάρχει η δυνατότητα για επικεφαλίδες 6
επιπέδων <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Ας σημειωθεί ότι οι φυλλομετρητές
έχουν μια αρχική διαμόρφωση για τις διάφορες επικεφαλίδες ή/και για άλλα html
στοιχεία. Αυτό όμως δεν σημαίνει πως η επικεφαλίδα είναι τρόπος διαμόρφωσης του
περιεχομένου της σελίδας. Η επικεφαλίδα είναι στοιχείο της δομής ενός περιεχομένου
ακριβώς όπως και η παράγραφος. Εξάλλου η αρχική μορφή της επικεφαλίδας ή και
άλλων στοιχείων μπορεί εύκολα να τροποποιηθεί όπως θα δούμε σύντομα
παρακάτω. Τέλος, η αρχική μορφοποίηση της επικεφαλίδας δεν είναι ίδια στους
διάφορους φυλλομετρητές. Στην συνέχεια του κώδικα 2, παρουσιάζονται και άλλα
παραδείγματα επικεφαλίδων.
8
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>TODO supply a title</title>
8 </head>
9 <body>
10 <h1> Απλά HTML στοιχεία </h1>
11 <p> Στην ενότητα αυτή παρουσιάζουμε ορισμένα βασικά στοιχεία της HTML. Πιο συγκεκριμμένα
παρουσιάζονται τα στοιχεία για να φτιάχνουμε επικεφαλίδες,
12 παραγράφους, λίστες, να τραβάμε οριζόντιες γραμμές και να τοποθετούμαι εικόνες </p>
13 <h2> Επικεφαλίδες </h2>
14 <p> Υπάρχουν επικεφαλίδες 6 επιπέδων: &lth1&gt,&lth2&gt, &lth3&gt, &lth4&gt, &lth5&gt,&lth6&gt
</p>
15 <h2>Horizontal line</h2>
16 <p> Αν θέλετε μια οριζόντια γραμμή για να διαχωρίσετε το περιεχόμενο δεν έχετε παρά να
χρησιμοποιήσετε την &lthr&gt, π.χ. </p>
17 <hr/>
18 <h2> Λίστες </h2>
19 <p> Ιδιαίτερο ενδιαφέρον παρουσιάζουν οι Λίστες. Υπάρχουν λίστες ταξινομημένες, αταξινόμητες και
λίστες ορισμών για την κατασκευή λεξικών </p>
20 <h3> Αταξινόμητη Λίστα </h3>
21 <ul>
25 </ul>
26 <h3> Ταξινομημένη Λίστα </h3>
27 <ol>
31 </ol>
32 <h3> Λίστα Ορισμών </h3>
33 <dl>
34 <dt>Unordered list</dt>
35 <dd>A list where each list element is marked by a bullet</dd>
36 <dt>Ordered</dt>
37 <dd>A list where each list element is marked by a number</dd>
38 <dt>Definition List</dt>
39 <dd>This is a definition List</dd>
40 </dl>
41 <p> To &ltbr&gt <br/> αλλάζει γραμμή </p>
42 <h3> Υπερσύνδεσμοι </h3>
43 <p> Ιδιαίτερο ενδιαφέρον έχουν οι <a href="hyperlinks.html" > υπερσύνδεσμοι </a></p>
44
45 </body>
46 </html>
Κώδικας 2: Βασικά html στοιχεία
Στην γραμμή 11, παρουσιάζεται η πρώτη παράγραφος. Μεγαλύτερο

ενδιαφέρον έχει η παράγραφος που παρουσιάζεται στην γραμμή 14. Εκεί
περιλαμβάνεται η «περίεργη» αλφαριθμητική σειρά : &lth1&gt, &lth2&gt, &lth3&gt,
&lth4&gt, &lth5&gt, &lth6&gt, που διερμηνεύται ως <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>. Πράγματι, ορισμένοι χαρακτήρες έχουν ειδική σημασία για την html.
Χαρακτηριστικό παράδειγμα ο χαρακτήρας ‘<’ που σηματοδοτεί την αρχή μιας
9
ετικέτας. Τι συμβαίνει όμως αν θέλουμε απλως να εμφανίσουμε τον χαρακτήρα
αυτόν χωρίς η ύπαρξή του να σηματοδοτεί την αρχή μιας ετικέτας; Στην περίπτωση
αυτή θα πρέπει να χρησιμοποιήσουμε τους ειδικούς χαρακτήρες της html (html
character entities). Στους ειδικούς χαρακτήρες μπορούμε να αναφερθούμε με τον
χαρακτήρα ‘&’ ακολουθούμενο απο τον κωδικό του ειδικού χαρακτήρα που μας
ενδιαφέρει. Ετσι ‘&lt’ σημαίνει ‘<’ (lt απο less than). Πλήρη λίστα των ειδικών
χαρακτήρων μπορείτε να βρείτε στo [6] ενω περισσότερα για το ίδιο θέμα στο [7].
Επίσης, οι ειδικοί χαρακτήρες είναι χρήσιμοι για τις περιπτώσεις που θέλουμε να
εμφανίσουμε κάποιο χαρακτήρα που δεν υπάρχει στο πληκτρολόγιο.
Στην συνέχεια του κώδικα 2, στην γραμμή 21, αναπτύσσεται μια αταξινόμητη
λίστα με το στοιχείο <ul> (unordered list) και τα στοιχεία <li> (list item). Απο την
γραμμή 27 έως 31 αναπτύσσεται μια αριθμημένη λίστα με τα στοιχεία <ol> (ordered
list) και τα <li>. Απο την γραμμή 33 έως 40 αναπτύσσεται μια λίστα ορισμών με το
στοιχείο <df> (definition list) και τα στοιχεία <dt> (dictionary term) και <dd>
(dictionary definition).
Στην συνέχεια στην γραμμή 41 γίνεται επίδειξη του αυθύπαρκτου στοιχείου
<br/> με το οποίο αλλάζουμε γραμμή.
Στην γραμμή 43 αναπτύσσεται ένας υπερσύνδεσμος με το <a> (anchor
element). Όπως φαίνεται στον κώδικα 2, το στοιχείο αυτό διαθέτει μιαν ιδιότητα, την
href με την οποία ορίζεται ο προορισμός του υπερσυνδέσμου. Το περιεχόμενο του
στοιχείου είναι αυτό που εμφανίζεται στον χρήστη ως υπερσύνδεσμος. Στο
παράδειγμά μας ακολουθώντας τον υπερσύνδεσμο μεταβαίνουμε στην σελίδα
“hyperlinks.html”. Ο κώδικας της “hyperlinks.html” παρουσιάζεται παρακάτω στον
κώδικα 3.
1 <!DOCTYPE html>
2 <html>
3 <head>
7 </head>
8 <body>
9 <h1> Σελίδα Υπερσυνδέσμων </h1>
10 <a href="index.html"> Back </a>
11 <hr>
12 <h2> Εκόνες </h2>
13 <a href="index.html">
14 <img alt="backarrow" src="backArrow.jpeg"/>
15 </a>
16 </body>
17 </html>
Κώδικας 3: Υπερσύνδεσμοι και Εικόνες
10
Στον κώδικα 3, βλέπουμε καταρχάς έναν υπερσύνδεσμο στο περιεχόμενο
“Back” με href το index.html. Αυτός ο υπερσύνδεσμος έχει σαν αποτέλεσμα να
επιστρέφουμε στην προηγούμενη σελίδα. Στην γραμμή 14 βλέπουμε το στοιχείο img.
Πρόκειται για εμφάνιση εικόνας. Η εικόνα που θέλουμε να εμφανιστεί βρίσκεται
όπου λέει η ιδιότητα src. Σε περίπτωση που η εικόνα βρίσκεται στον ίδιο φάκελο με
την html σελίδα, αρκεί μόνο το όνομα της εικόνας αλλιώς χρειάζεται το σχετικό path
της εικόνας και αν αυτή βρίσκεται σε άλλον υπολογιστή το URL της. Αυτό ισχύει και
για την ιδιότητα href του <a> στοιχείου. Η ιδιότητα alt (alternative) του img παρέχει
εναλλακτική πληροφορία για την εικόνα. Η ιδιότητα alt είναι πολύ σημαντική και δεν
θα πρέπει να παραλείπετε. Αξιοποιείται απο screen readers που χρησιμοποιούνται
απο άτομα με προβλήματα όρασης αλλά η σπουδαιότερη χρήση της είναι η
αξιοποίησή της απο τις μηχανές αναζήτησης.
Επιπλέον, προσέξτε πως η εικόνα αποτελεί περιεχόμενο σε ένα <a> στοιχείο.
Με αυτόν τον τρόπο η εικόνα γίνεται υπερσύνδεσμος.
2.4 Βιβλιογραφία για επιπλέον μελέτη

Μέχρι εδω έχει γίνει μια μικρή εισαγωγή στην HTML. Εδώ δίνονται επιπλέον
πηγές που μπορεί να φανούν χρήσιμες στην περαιτέρω μελέτη της HTML. Στο [8]
μπορείτε να βρείτε ένα πλήρες HTML tutorial απο το W3Schools. Επίσης,
ενδιαφέρον παρουσιάζει το HTML tutorial απο την tutorials point [9]. Γενικότερα,
στον Παγκόσμιο Ιστό μπορει κανεις να βρει ποικίλα tutorials σχετικά με την HTML
[10], [11].
Κεφάλαιο 3 Διαμόρφωση του περιεχομένου με τα CSS

Στην ενότητα αυτή προχωρούμε σε μια βασική εισαγωγή στα
Επικαλυπτόμενα φύλα διαμόρφωσης (Cascading style sheets ή CSS) τα οποία
αποτελούν στην ουσία την γλώσσα με την οποία διαμορφώνουμε τις ιστοσελίδες.
Υπάρχουν 3 τρόποι για να διαμορφώσουμε 1 σελίδα:
1. Eξωτερικό φύλλο διαμόρφωσης. Στην περίπτωση αυτή όλες οι οδηγίες
διαμόρφωσης τοποθετούνται σε ένα αρχείο διαφορετικό απο το αρχείο της
html που θέλουμε να διαμορφώσουμε. Στο αρχείο html μπαίνει ένα στοιχείο
<link> με το οποίο πληροφορείται ο φυλλομετρητής που βρίσκονται οι
11
πληροφορίες διαμόρφωσης. Ενα παράδειγμα στοιχείου <link> δίνεται
ακολούθως:
<link rel="stylesheet" href="basicHtml.css" type="text/css" />
Το στοιχείο <link> μπαίνει στο <head> ενός HTML εγγράφου. Με αυτόν τον
τρόπο είναι δυνατόν να διαμορφωθεί ένα σύνολο απο σελίδες, π.χ. ένας
ιστοχώρος, με την χρήση ενός αρχείου διαμόρφωσης. Συνεπώς, η
διαμόρφωση ενός ολόκληρου συνόλου ιστοσελίδων μπορεί να μεταβληθεί
σαν αποτέλεσμα της επεξεργασίας ενός μόνο αρχείου διαμόρφωσης.
2. Eνσωματωμμένο φύλλο διαμόρφωσης. Ενα φύλλο διαμόρφωσης μπορεί να
συμπεριληφθεί εξολοκλήρου σε μια ιστοσελίδα. Αυτή η μέθοδος
χρησιμοποιείται στην περίπτωση που η ιστοσελίδα διαμορφώνεται με έναν
μοναδικό τρόπο. Αποτελεί κακή πρακτική να επιδιώκουμε παρόμοια
διαμόρφωση ενός συνόλου απο σελίδες αντιγράφοντας το ενσωματτωμένο
στυλ απο την μια σελίδα στην άλλη. Στην περίπτωση αυτή αλλαγή στην
διαμόρφωση απαιτεί επεξεργασία του συνόλου των σελίδων. Μια σελίδα
μπορεί να διαθέτει τόσο εξωτερικό όσο και ενσωματτωμένο φύλλο
διαμόρφωσης. Στην περίπτωση αυτή είναι δυνατόν να προκύπτει σύγκρουση,
δηλ. διαφορετική διαμόρφωση μεταξύ εξωτερικού και ενσωματτωμένου
φύλλου διαμόρφωσης για το ίδιο στοιχείο, π.χ. η επικεφαλίδα επιπέδου 1
ορίζεται στο εξωτερικό φύλλο να είναι με κόκκινα γράμματα και στο
ενσωματτωμένο με μπλε. Στις περιπτώσεις που υπάρχει σύγκρουση
υπερισχύει το ενσωματτωμένο φύλλο διαμόρφωσης. Το ενσωματτωμένο
φύλλο διαμόρφωσης, τοποθετείται μέσα σε ένα container element <style>
</style>. Για παράδειγμα
<style>
h1 { color: fuchsia }
</style>
στο παραπάνω παράδειγμα ο φυλλομετρητής καθοδηγείται να κάνει φούξια,
το χρώμα του φόντου των επικεφαλίδων h1.
3. Διαμόρφωση ετικέτας. Στην περίπτωση αυτή οι οδηγίες διαμόρφωσης σε CSS
αφορούν ένα HTML στοιχείο και τοποθετούνται στην ετικέτα έναρξης του.
Για το σκοπό αυτό αξιοποιείται η ιδιότητα style που έχουν όλα τα html
στοιχεία που προκαλούν έξοδο στην οθόνη. Για παράδειγμα,
<h1 style="color: fuchsia"> Απλά HTML στοιχεία </h1>
12
Σε περίπτωση σύγκρουσης με εξωτερικά ή ενσωματτωμένα φύλλα
διαμόρφωσης, η διαμόρφωση ετικέτας υπερισχύει. Η διαμόρφωση ετικέτας
χρησιμοποιείται κυρίως στις περιπτώσεις που θέλουμε να διαμορφώσουμε
κάποιο στοιχείο κατά τρόπο που να μην είναι δυνατή η μεταβολή της
διαμόρφωσής του απο ενσωματτωμένα ή εξωτερικά κυρίως φύλλα στυλ.
3.1 Εντολές CSS

Κρίσιμη έννοια στην διαμόρφωση αποτελούν οι επιλογείς (selectors). Με τους
επιλογείς, επιλέγουμε σε ποια HTML στοιχεία θέλουμε να εφαρμόσουμε την
διαμόρφωση. Η πιο απλή μορφή επιλογέα είναι ο επιλογέας που το όνομά του
ταυτίζεται με κάποιο HTML στοιχείο. Για παράδειγμα, στον κώδικα 4,
διαμορφώνονται όλες οι επικεφαλίδες επιπέδου 1 (στοιχεία <h1>) έτσι ώστε το
χρώμα του φόντου να είναι κοράλ (απόχρωση του πορτοκαλί), το μέγεθος των
γραμμάτων να είναι πολύ μεγάλο και η επικεφαλίδα να στοιχίζεται στο κέντρο της
σελίδας.
1 h1 {
2 color: coral;
3 font-size: xx-large;
4 text-align: center;
5}
Κώδικας 4
Πιο συγκεκριμμένα, αφού επιλεγούν οι επικεφαλίδες <h1> (γραμμή 1), στην
συνέχεια καθορίζεται το χρώμα (γραμμή 2). Η ιδιότητα (property) color λαμβάνει
τιμές απο ένα πλήθος σταθερών, π.χ. blue, brown, red, yellow, κά. Πλήρης λίστα των
σταθερών υπάρχει στο [12]. Επιπλέον, όμως υπάρχουν και δύο άλλοι τρόποι για να
καθορίσουμε ένα χρώμα: η δεκαεξαδική κωδικοποίηση και η συνάρτηση rgb (red,
green, blue). Και στις δύο περιπτώσεις το χρώμα καθορίζεται ώς μίξη των χρωμάτων
κόκκινο, πράσινο και μπλέ. Για παράδειγμα, color : rgb (255,0,0) σημαίνει καθαρό
κόκκινο. Οι δυνατές τιμές των παραμέτρων της συνάρτησης rgb είναι απο 0 έως 255
(δεκαδικό σύστημα). Έτσι η rgb (0,0,0) αντιστοιχεί στο μαύρο χρώμα ενώ rgb
(255,255,255) αντιστοιχεί στο λευκό. Αντίστοιχα, λειτουργεί η δεκαεξαδική
κωδικοποίηση, color : #ff0000 αντιστοιχεί στο κόκκινο ενώ οι τιμές #000000 και
#ffffff δηλώνουν το μαύρο και το λευκό, αντίστοιχα.
Στην συνέχεια, στον κώδικα 4, στην γραμμή 3, καθορίζουμε το μέγεθος του
φόντου. Υπάρχουν διάφοροι τρόποι για να γίνει κάτι τέτοιο. Στον κώδικα 4
13
χρησιμοποιούμε μια σταθερά. Οι διαθέσιμες σταθερές είναι : medium, xx-small, x-
small, small, large, x-large, xx-large, smaller, larger. Το αρχικό (default) μέγεθος του
φόντου αντιστοιχεί στην σταθερά medium. Επίσης, το μέγεθος φόντου μπορεί να
ορισθεί με μια σειρά από διαθέσιμες μονάδες μέτρησης όπως px (pixels), cm, pt, κ.ά.
[13], π.χ. font-size: 10px; Ας σημειωθεί πως αυτός ο τρόπος διαμορφώνει σταθερό
μέγεθος φόντου που έχει ως αποτέλεσμα να μην προσαρμόζεται το φόντο σε
διαφορετικές αναλύσεις. Αυτό το πρόβλημα λύνεται χρησιμοποιώντας τις σχετικές
μονάδες μεγέθους. Παραδείγματα σχετικών μονάδων είναι η em και το %. Το
αρχικό μέγεθος του φόντου είναι 1 em. Επομένως, αν το μέγεθος φόντου τεθεί ίσο
με 2em αυτό σημαίνει πως θέλουμε φόντο διπλάσιο από το αρχικό. Ας σημειωθεί
πως όπως το αρχικό μέγεθος προσαρμόζεται στην ανάλυση της οθόνης, έτσι
προσαρμόζεται και το διπλάσιο. Με αντίστοιχο τρόπο χρησιμοποιείται και το %, π.χ.
font-size: 200%; σημαίνει φόντο διπλάσιου μεγέθους απο το αρχικό. Ας σημειωθεί
πως το αρχικό φόντο έχει μέγεθος 100%. Περισσότερες πληροφορίες σχετικά με το
μέγεθος του φόντου θα βρείτε στο [14]. Τέλος, στην γραμμή 4, έχουμε τον κώδικα
text-align: center; Το αποτέλεσμα είναι να στοιχηθούν οι επικεφαλίδες επιπέδου 1
στο κέντρο της σελίδας. Αλλες πιθανές τιμές για την στοίχιση του κειμένου είναι οι
left, right, justify, κ.ά. [15].
Στην συνέχεια αναλύουμε την ιδιότητα padding.
1p{
2 text-align: justify;
3 padding-left: 10px;
4 padding-right: 10px;
5 }
Κώδικας 5: Ιδιότητα padding
Στον κώδικα 5, αφου καθορίζεται πως το κείμενο των παραγράφων θα έχει

πλήρη (justified) στοίχιση, καθορίζεται επίσης πως το padding θα είναι 10 px (pixels)
τόσο από αριστερά όσο και από δεξιά. Για να κατανοήσουμε την έννοια padding
πρέπει να αντιληφθούμε πως κάθε html στοιχείο καταλαμβάνει κάποιο χώρο κατά την
εμφάνισή του στην οθόνη. Το ποιος είναι ακριβώς αυτός ο χώρος εξαρτάται απο
πολλούς παράγοντες, κυριότερος των οποίων είναι η ιδιότητα display του στοιχείου.
Για την ιδιότητα display θα μιλήσουμε λίγο παρακάτω. Για την ώρα, μας αρκεί να
γνωρίζουμε πως κάθε στοιχείο καταλαμβάνει κάποιο χώρο ο οποίος δεν ταυτίζεται
ακριβώς με το περιεχόμενό του. Για παράδειγμα, μια παράγραφος τερματίζεται ως
14
προς το περιεχόμενό της στην μέση μιας γραμμής. Ωστόσο, το επόμενο στοιχείο, ας
υποθέσουμε πως πρόκειται επίσης για παράγραφο, δεν αρχίζει απο την μέση της
γραμμής αλλά σε επόμενη γραμμή. Αυτό επιτυγχάνεται καθώς μπορεί η παράγραφος
ως περιεχόμενο να τερματίζεται στη μέση μιας γραμμής αλλά ως html στοιχείο
καταλαμβάνει τον χώρο έως το τέλος της γραμμής. To padding ορίζει πόσος κενός
χώρος υπάρχει υποχρεωτικά μεταξύ των ορίων του χώρου ενός στοιχείου και του
περιεχομένου του στοιχείου. Στον κώδικα 4, το padding δίνεται σε pixels. To padding
μπορεί επίσης να ορισθεί με %, κ.ά., [16].
3.2 Μηχανισμοί Επιλογής

Η δομή ενός κανόνα CSS μπορεί να περιγραφεί ως εξής: επιλογέας {ιδιότητα:
τιμή [; Ιδιότητα: τιμή]}, όπου ότι βρίσκεται σε [] είναι προαιρετικό. Ήδη έχουμε δει
πως τα ονόματα των html ετικετών αποτελούν επιλογείς. Ωστόσο, έχουμε στην
διάθεσή μας και ισχυρότερους μηχανισμούς επιλογής. Στην ενότητα αυτή θα δούμε
τους επιλογείς class & id σε συνδυασμό με το στοιχείο div.
1 <body>
2 <div class="c" id="myId" style="color: red;">Περιεχόμενο</div>
3 </body>
Κώδικας 6: Στοιχείο div, ιδιότητες class και id
Το στοιχείο div (division) δεν καθορίζει μια ενότητα μέσα σε ένα html
έγγραφο. Ο κύριος τρόπος χρήσης του είναι η ομαδοποίηση ενός συνόλου στοιχείων
με σκοπό την διαμόρφωσή τους. Στον κώδικα 6, γίνεται χρήση των ιδιοτήτων class
και id. Στην html5, oι ιδιότητες class και id μπορούν να εφαρμοστούν σε οποιοδήποτε
στοιχείο και όχι μόνο στο div. Ο σκοπός των ιδιοτήτων αυτών είναι να
χρησιμοποιηθούν σαν επιλογείς.
1 .c {
2 color:green;
3 }
4
5 #myId {
6 color:blue;
7 }
8
9 div {
10 color:yellow;
15
11 }
Κώδικας 7: css με αξιοποίηση div, class και id
Για παράδειγμα στον κώδικα 7, στις γραμμές 9-11, καθορίζεται όλα τα

στοιχεία div να έχουν γραμματοσειρά χρώματος κίτρινου. Στις γραμμές 1-3,
καθορίζεται όλα τα στοιχεία που ανήκουν στην κλάση c να έχουν χρώμα πράσινο.
Προσέξτε πως απο το όνομα της κλάσης προηγείται μια τελεία, ο ρόλος της είναι να
αποσαφηνίσει πως το αναγνωριστικό που ακολουθεί είναι το όνομα μιας κλάσης. Στις
γραμμές 5-7, καθορίζεται πως το στοιχείο που έχει id (identification) ίσο με myId, θα
έχει μπλέ γραμματοσειρά. Προσέξτε πως από το id προηγείται ο χαρακτήρας #, που
σαν σκοπό έχει να καθορίσει πως ακολουθεί ένα id. Η διαφορά μεταξύ ιδιότητας
class και id είναι ότι πολλά στοιχεία ενός html εγγράφου μπορούν να έχουν την ίδια
τιμή στην ιδιότητα class ενώ μια τιμή στην ιδιότητα id δίνεται αυστηρά σε ένα
στοιχείο. Με άλλα λόγια, η class μας βοηθάει να επιλέξουμε μια ομάδα στοιχείων και
η id αποκλειστικά ένα στοιχείο.
Περισσότερα για τους μηχανισμούς επιλογής μπορείτε να βρείτε στην ενότητα
3 του [17].
3.3 Αλληλεπικάλυψη και κληρονομικότητα

Δύο κρίσιμες έννοιες για την κατανόηση των φύλλων διαμόρφωσης είναι η
αλληλεπικάλυψη (Cascading) και η κληρονομικότητα (Inheritance). Ας θυμηθούμε
πως οι φυλλομετρητές εφαρμόζουν μια διαμόρφωση για κάθε στοιχείο της html. Έτσι
εφαρμόζεται μια διαμόρφωση για την παράγραφο, μια για τις επικεφαλίδες επιπέδου
1, κόκ. Η διαμόρφωση για ένα συγκεκριμμένο στοιχείο δεν είναι ίδια για όλους τους
φυλλομετρητές. Για παράδειγμα, αλλη διαμόρφωση μπορεί να κάνει στην
αταξινόμητη λίστα ο Internet Explorer και άλλη ο Google Chrome. Παράλληλα, σε
μια σελίδα μπορεί να υπάρχει εξωτερικό φύλλο διαμόρφωσης, ενσωματωμένη
διαμόρφωση και διαμόρφωση ετικέτας. Σε περίπτωση που υπάρχει αλληλεπικάλυψη
μεταξύ των προαναφερόμενων τρόπων διαμόρφωσης τότε υπερισχύει η διαμόρφωση
ετικέτας, μετά η ενσωματωμένη, στην συνέχεια, η εξωτερική και τέλος η
διαμόρφωση του φυλλομετρητή. Ωστόσο, υπάρχει και μια διαφορετικού είδους
επικάλυψη.
Τα στοιχεία περιέκτες μπορούν να περιέχουν άλλα στοιχεία. Παράδειγμα

αποτελεί το στοιχείο <head> το οποίο περιέχει το στοιχείο <title> κ.ά., το <body>, η
16
<ul>, κλπ. Γενικότερα, ένα στοιχείο περιέκτης μπορεί να περιέχει άλλα στοιχεία
χωρίς περιορισμό στον αριθμό τους. Περιορισμός δεν υπάρχει επίσης στο βάθος, δηλ.
το α στοιχείο μπορεί να περιέχει το β που περιέχει το γ το οποίο περιέχει το δ, κοκ.
Σύμφωνα με την αρχή της κληρονομικότητας της HTML, η διαμόρφωση ενός
στοιχείου κληρονομείται στα περιεχόμενα στοιχεία του. Αυτό ισχύει υπο 2
προυποθέσεις: Δεν υπάρχει επικαλυπτόμενος κανόνας διαμόρφωσης που ορίζεται στο
επίπεδο του περιεχόμενου στοιχείου με οποιονδήποτε απο τους τρόπους που
προαναφέραμε πλην της διαμόρφωσης φυλλομετρητή και η ιδιότητα θα πρέπει να
κληρονομείται. Υπάρχουν ιδιότητες που κληρονομούνται και άλλες που δεν
κληρονομούνται. Πως θα γνωρίζει κανεις αν μια ιδιότητα κληρονομείται η όχι;
Προφανώς, κοιτάζοντας τον ορισμό της ιδιότητας, π.χ. στο w3Schools.
Τέλος, αλληλεπικάλυψη μπορεί να υπάρχει και απο ιδιότητες που
καθορίζονται στο ίδιο επίπεδο. Ενα χαρακτηριστικό παράδειγμα μπορούμε να δούμε
με την βοήθεια του κώδικα 6 και 7. Στον κώδικα 6, το στοιχείο div ανήκει στην
κλάση c και έχει id ίσο με myID. Στο css του κώδικα 7, καθορίζονται τρία
διαφορετικά χρώματα για τις γραμματοσειρές των στοιχείων div, των στοιχείων που
ανήκουν στην κλάση c και του στοιχείου με id ίσο με myId. Επομένως, καθορίζονται
στο ίδιο επίπεδο του εξωτερικού φύλλου διαμόρφωσης, τρία χρώματα
γραμματοσειράς για το ίδιο στοιχείο. Ποιό χρώμα θα επικρατήσει; Γενικά ισχύει πως
επικρατεί το ειδικότερο. Στην προκειμένη περίπτωση ειδικότερο είναι το id καθώς
μόνο ένα στοιχείο έχει αυτό το id, στην συνέχεια το class και τέλος το στοιχείο div.
Με άλλα λόγια, η διαμόρφωση του div αφορά σε όλα τα div του εγγράφου, η
διαμόρφωση class αφορά σε όλα τα στοιχεία που ανήκουν στην συγκεκριμένη κλάση
ενώ η διαμόρφωση με βάση το id αφορά σε ένα συγκεκριμένο στοιχείο. Ας σημειωθεί
ότι στην ίδια κλάση μπορεί να ανήκουν ένα σύνολο απο div αλλά και άλλα στοιχεία.
Κεφάλαιο 4 Περαιτέρω μελέτη
Προτείνεται η εισαγωγή στην html και css να συνεχιστεί με βάση το σχετικό

tutorial της code academy [18]. Ακολουθήστε και τα 14 εισαγωγικά μαθήματα. Στην
συνέχεια, αποφασίστε αν θέλετε να προχωρήσετε παρακάτω στο ίδιο tutorial.
Επισημαίνετε πως για html και css, υπάρχει πλούσιο υλικό στο web που προσφέρεται
17
δωρεάν και μπορεί να εντοπιστεί εύκολα με queries του τύπου html tutorial, css
tutorial, κλπ.
4.1 Άσκηση
Κατασκευάστε την προσωπική σας ιστοσελίδα. Φροντίστε να αποτελείται απο
τουλάχιστον 2 σελίδες, και να περιλαμβάνει κατ’ ελάχιστο, την φωτογραφία σας, τις
σπουδές σας σε μορφή λίστας και τα στοιχεία επικοινωνίας σας.
18
Javascript
Εισαγωγή
Τι είναι η Javascript?
Η Javascript είναι η γλώσσα που χρησιμοποιείται για να προσδώσει γενική

λειτουργικότητα στις ιστοσελίδες
Ιστορικά
• Ξεκίνησε το 1995 από την εταιρία Netscape.
• Εξελίχθηκε πάρα πολύ, κυρίως ωθούμενη από μεγάλες εταιρείες,

όπως η Google, η Yahoo και άλλες που αξιοποίησαν την
Javascript για την ανάπτυξη των ιστοχώρων τους.
Που αξιοποιείται;
• Σε ιστοσελίδες (client side & server side scripting)
• Σε εφαρμογές (desktop, mobile)
• Δίνει την δυνατότητα προστιθέμενων scripts σε εφαρμογές όπως το

Acrobat, το Photoshop, κα.
Javascript & Java
Είναι και οι 2
αντικειμενοστραφείς αλλά δεν
έχουν άλλη σχέση
Περιβάλλον ανάπτυξης
• Απλός text editor

• NetBeans (recommended)
Interpreter ή Compiler
• Δεν καθορίζεται στα specifications της γλώσσας

• Από πολλούς θεωρείται interpreter καθώς εκτελείται από
τους φυλλομετρητές
• Εξαρτάται από την υλοποίηση, π.χ. V8 JavaScript VM used in
Chrome αποτελείται από 2 compilers
Βασικά χαρακτηριστικά
• Object Oriented (prototype based)

• Untyped
hello world!
<head>
<title>TODO supply a title</title>
<script type="text/javascript">
alert('hello world!');
</script>
</head>
Γράφοντας στην σελίδα
<head>
document.write('<p>Hello world!</p>');
</script>
</head>
Δήλωση εξωτερικού αρχείου Javascript
<script type="text/javascript" src="myLib.js"></script>
Μεταβλητές
Oι βασικοί τύποι δεδομένων : Numbers, Strings και Booleans.
Χαρακτήρας διαφυγής \ (backslash).
Δεσμευμένη λέξη var.
case sensitive λατινικοί χαρακτήρες, αριθμοί και χαρακτήρες $ και _

(underscore).
Δήλωση-Δημιουργία Μεταβλητών
var sum, name;
sum=0;
name="Lefteris Moussiades";
var sum=0, name="Lefteris Moussiades";
String concatenation
var fName="Lefteris", sName="Moussiades";

var name=fName+' '+sName;
foredit.js
function f1() {
var name=prompt("Enter your name");
alert("Hello "+name+'!');
}
Κλήση συνάρτησης από εξωτερικό αρχείο

<html>
<head>
<script type="text/javascript" src="foredit.js">
</script>
</head>
<body>
f1();
</script>
</body>
</html>
Δήλωση και δημιουργία πίνακα
var array=[];
var a2=['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
var a2=new Array('Mon', 'Tues', 'Wed');

var a3=[1,2,"tria",4.5, true];
Προσπέλαση στοιχείων πίνακα
var a=['Mon', 'Tues', 'Wed'];
a[0]="De";
a[1]="Tr";
a[a.length-1]="Te";
a[a.length]="Pe";
for (i=0; i<a.length; i++) document.writeln(a[i]+"<br/>");
Σχόλια
Ας σημειωθεί πως τα σχόλια στην Javascript μπαίνουν με τον ίδιο

τρόπο που μπαίνουν στην C++, δηλ. με // σημειώνονται τα σχόλια
μέχρι τέλος γραμμής ενώ σχόλια που εκτείνονται σε περισσότερες ή
σε τμήμα γραμμής εσωκλείονται σε /* */.
Επιλογές & Λογικές εκφράσεις

var choice='0';
if (choice>1 && choice<5) alert(">1 && <5");
else
if (choice>5 || choice<-1) alert ("choice>5 || choice<-1");
else
if (choice===0) alert("0 tested with ===");
if (choice==0) alert("0 tested with ==");
while
var a=['Mon', 'Tues', 'Wed'], i=0
while (i<a.length)
document.writeln(a[i++]+"<br/>");
do
do {
document.writeln(a[--i]+"<br/>");
} while (i>0);
Η συνάρτηση στην Javascript
function print(msg, tag) {
document.write("<"+tag+">"+msg+"</"+tag+">");
}
Εισαγωγικός κώδικας στην jQuery

<!DOCTYPE html>
2 <html>
3 <head>
7 <script src="jquery-1.11.3.min.js">
8 </script>
9 <script>
10 $(document).ready(function() {
11 alert($('div').html());
12 });
13 </script>
14 </head>
15 <body>
16 <div>TODO write content</div>
17 </body>
18 </html>
Βασικοί επιλογείς
Επιλογέας Παράδειγμα Επιλέγει

Element $(‘a’) Όλα τα anchor στοιχεία της σελίδας
Id $(‘#cv’) το στοιχείο που έχει id ίσο με cv
Class $(‘.list’) τα στοιχεία που ανήκουν στην κλάση list
Επιλογείς συγγενών
Descendant (Απογόνων) $('#nΒ a') όλα τα anchor στοιχεία που
ορίζονται μέσα στο στοιχείο με id nB
Άμεσων Απογόνων $('#nΒ > a') τα anchor στοιχεία που ορίζονται
ως άμεσοι απόγονοι του στοιχείου με id
nB
Adjacent sibling (Διαδοχικού αδερφού) $('h2 + div') τα στοιχεία div που ακολουθούν
στοιχεία h2
Επιλογείς ιδιοτήτων
Attribute $('img[alt]') τα στοιχεία img που έχουν set την ιδιότητα alt
$('img[alt=”lion”]') Τα στοιχεία img που έχουν την σειρά lion ως τιμή της
ιδιότητας alt
$('a[href^="http"]') τα anchor στοιχεία η διεύθυνση των οποίων αρχίζει
από "http"
$('a[href$=".pdf"]') τα anchor στοιχεία η διεύθυνση των οποίων
τελειώνει σε pdf
$('a[href*="dx"]') τα anchor στοιχεία η διεύθυνση των οποίων περιέχει
την σειρά dx
Φίλτρα (1)
Φίλτρο Περιγραφή Παράδειγμα Επιλέγει
:even, :odd Επιλογή μόνο των $('tr:even') τις άρτιες γραμμές των πινάκων
στοιχείων που
βρίσκονται σε άρτιες ή
περιττές θέσεις μια
επιλογής
$('.dt tr:odd) τις περιττές γραμμές των πινάκων
της κλάσης striped
:first and :last Επιλογή μόνο του $('p:first') την τελευταία παράγραφο
πρώτου ή τελευταίου
στοιχείου
Φίλτρα (2)
:not() Επιλογή των $('a:not(.A)'); τα anchor elements που δεν ανήκουν
στοιχείων που δεν στην κλάση Α
καλύπτονται από
επιλογέα που περνά
παραμετρικά στην not
:has() Επιλέγει τα $('li:has(a)') τα στοιχεία λίστας (list items) που
στοιχεία που περιέχουν anchor elements
περιέχουν άλλα
συγκεκριμένα στοιχεία
:contains() Επιλογή όσων $('a:contains(Click Me!)') Τα στοιχεία anchor που έχουν ως
στοιχείων περιέχουν κείμενο το Click Me!
συγκεκριμένο κείμενο
:hidden $('div:hidden') Τα κρυφά divisions
Ανάγνωση της html
$(document).ready(function () {
alert($('#inner').html());
});
Αντικατάσταση της html
alert($('#inner').html(“<p> new Paragraph </p>”));
});
Πρόσθεση html
$('#inner').append('<p> Paragrafos under header 2 </p>');

Άλλες ενέργειες επί της html
• Συγγενής με την append είναι η prepend.
• Πρόσθεση html πριν ή μετά από μια επιλογή, before() και after(),
αντίστοιχα.
• remove() και replaceWith() για διαγραφή ή αντικατάσταση

στοιχείων
Διαχείριση Ιδιοτήτων
• addClass(‘className’)
• removeClass(‘className’)
• toggleClass(‘className’)
• attr(‘attributeName’)
• attr(‘attributeName’,’value’)
• $('. img').attr('alt','portait')
each και this (1)
<body>
<p> Υπάρχουν πολλά και ενδιαφέρονται tutorials για να μάθει κανεις Javascript.
Το tutorial στο <a href="http://www.w3schools.com/js/">w3Schools</a>.
Ένα tutorial για beginners στο <a href="http://www.tutorialspoint.com/javascript/"> tutorialspoint </a>.
Επίσης, για beginners πολύ καλό είναι το tutorial sto <a href="http://htmldog.com/guides/javascript/"> htmldog </a>.
To <a href="https://www.codecademy.com/en/tracks/javascript">codeacademy</a> είναι πάντα στα sites που έχουν καλά

tutorials.
</p>
<ul id="bib"></ul>
</body>
each και this (2)

<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.1.11.2.js"> </script>
<script>
$("a").each(function () {
var extLink = $(this).attr('href');
$('#bib').append('<li>' + extLink + '</li>');
});
}); // end of ready( ) function
</script>
</head>
Event Driven Programming (1)
$(selector).eventHandler(function)
$(document).ready(function)
$("p").click(function(){ code })
Event Driven Programming (2)

• Mouse events: click, dbclick, mousedown, mouseup, mouseover,
mouseout, mousemove.
• Document events: load, resize, scroll, unload.
• Form Events: submit, reset (πυροδοτείται όταν ενεργοποιείται ένα
button τύπου reset), change, focus (πυροδοτείται όταν εστιάζουμε σε
ένα text field), blur (πυροδοτείται κατά την έξοδο από ένα
εστιασμένο πεδίο, το αντίθετο του focus)
• Keyboard Events: keypress, keydown, keyup
hover
$('#menu').hover(
function () {
$('#submenu').show();
}, // end mouseover
function () {
$('#submenu').hide();
} // end mouseout
); // end hover
Event Object
$(document).click(function (e) {
var xPos = e.pageX;
var yPos = e.pageY;
alert('X:' + xPos + ' Y:' + yPos);

}); // end click
Event (Object) Properties
PROPERTY DESCRIPTION PROPERTY DESCRIPTION

Η απόσταση σε pixels του δείκτη του ποντικιού από
την αριστερή πλευρά του παράθυρου του
pageX φυλλομετρητή. shiftKey Είναι πατημενο το shift.
Χρησιμοποιείται με το keypress event και μεταφέρει

τον αριθμητικό κωδικό του του πλήκτρου που
πατήθηκε. Για να πάρουμε από τον αριθμητικό
κώδικα την String αναπαράσταση του πλήκτρου
Η απόσταση σε pixels του δείκτη του ποντικιού από χρησιμοποιούμε την συνάρτηση
pageY την κορυφή του παράθυρου του φυλλομετρητή. which String.fromCharCode(e.which)
Η απόσταση σε pixels του δείκτη του ποντικιού από

screenX την αριστερή πλευρά της οθόνης. target Το αντικείμενο που σχετίζεται με το γεγονός.
Η απόσταση σε pixels του δείκτη του ποντικιού από A jQuery object used with the on() function to pass
screenY την κορυφή του παράθυρου της οθόνης data data to an event handling function (page 167).
Αποτροπή προκαθορισμένης συμπεριφοράς
2 τρόποι
Κλήση της event.preventDefault() ή επιστρέφοντας false.
Και οι 2 τρόποι τοποθετούνται στο τέλος της συνάρτησης που κάνει

handling το αντίστοιχο γεγονός
Απενεργοποίηση διαχειριστών γεγονότων (1)
<body>
Ένα tutorial για beginners στο <a href="http://www.tutorialspoint.com/javascript/"> tutorialspoint </a>.
Επίσης, για beginners πολύ καλό είναι το tutorial sto <a href="http://htmldog.com/guides/javascript/"> htmldog </a>.
To <a href="https://www.codecademy.com/en/tracks/javascript">codeacademy</a> είναι πάντα στα sites που έχουν καλά tutorials.
</p>
<button id="disable" type="button">Click Me to disable alert</button>
</body>
Απενεργοποίηση διαχειριστών γεγονότων (2)

<script>
$("a").mouseover(function () {
alert('You moved the mouse over me!');
});
$('#disable').click(function () {
$('a').off('mouseover');
});
}); // end of ready() function
</script>
Η μέθοδος on()
• Απλή σύνδεση γεγονότων με διαχειριστή
• Σύνδεση διαχειριστή με στοιχείο που δημιουργείται μετά την
σύνδεση.
• Σύνδεση πολλαπλών γεγονότων σε ένα στοιχείο
• Σύνδεση με παραμετρικό διαχειριστή. Σε πολλές περιπτώσεις,
χρειάζεται να περάσουμε δεδομένα στον διαχειριστή.
Συντακτικό της on()

$(selector).on( events [, childSelector ] [, data ], handler )
• event: ένα ή περισσότερα γεγονότα που συνδέονται με τον επιλογέα (selector)
• childSelector: optional παράμετρος που χρησιμοποιείται για την σύνδεση του

διαχειριστή με στοιχεία που δημιουργούνται μετά την σύνδεση.
• data: δεδομένα που περνούν στον διαχειριστή. Επίσης optional παράμετρος.
• handler: Η συνάρτηση διαχειριστής του γεγονότος

Παράδειγμα με την on() (1)
function pageLinks() {
var current = this;
current.t = [];
$("a").each(function () {
var extLink = $(this).attr('href');
current.t.push(extLink);
});
current.l = 0;
}
Παράδειγμα με την on() (2)

this.tbl = new pageLinks();
$('#updbib').on('click', {rF: this}, function upd(evt) {
if (evt.data.rF.tbl.l < evt.data.rF.tbl.t.length)
$('#bib').append('<li> <a href=\"' + evt.data.rF.tbl.t[evt.data.rF.tbl.l] +
'\" target=\"_blank\">' + evt.data.rF.tbl.t[evt.data.rF.tbl.l++] + '</a></li>');
});
$("#bib").on("click", "li", function () {
$(this).css('text-decoration', 'line-through');
});
}); // end of ready( ) function

Περιεχόμενα
1. Εισαγωγή στην Javascript ........................................................................ 2
1.1 Hello World! ............................................................................................ 3
1.2 Μεταβλητές .............................................................................................. 4
1.3 Βασική Είσοδος και Έξοδος .................................................................... 5
1.4 Πίνακες .................................................................................................... 6
Σημείωση (Σχόλια) ........................................................................................ 7
1.5 Επιλογή και λογικές εκφράσεις ............................................................... 7
1.6 Επαναληπτικές διαδικασίες ..................................................................... 7
1.7 Συναρτήσεις ............................................................................................. 8
2. Αλληλεπίδραση με την ιστοσελίδα .......................................................... 9
2.1 Επιλογείς (Selectors) .......................................................................... 10
2.2 Φίλτρα (Filters) .................................................................................. 11
2.3 Αυτόματες επαναληπτικές διαδικασίες .............................................. 12
2.4 Αλυσιδωτή κλήση συναρτήσεων ....................................................... 12
2.5 Διαχείριση Στοιχείων ......................................................................... 12
Σημείωση (Developers Tools) ..................................................................... 13
2.6 Διαχείριση ιδιοτήτων ......................................................................... 14
2.7 each() και this ..................................................................................... 14
3. Διαχείριση Γεγονότων ........................................................................... 15
3.1 jQuery hover event ............................................................................. 16
3.2 Το αντικείμενο event .......................................................................... 17
3.3 Αποτροπή προκαθορισμένης συμπεριφοράς...................................... 18
3.4 Απενεργοποίηση διαχειριστών γεγονότων ......................................... 19
3.5 Η μέθοδος on() ................................................................................... 20
1
1. Εισαγωγή στην Javascript
Η Javascript είναι η γλώσσα που χρησιμοποιείται για να προσδώσει γενική
λειτουργικότητα στις ιστοσελίδες. Ξεκίνησε το 1995 από την εταιρία Netscape.
Αρχικά ήταν μια γλώσσα με περιορισμένες δυνατότητες. Με το πέρασμα των ετών
όμως εξελίχθηκε πάρα πολύ, κυρίως ωθούμενη από μεγάλες εταιρείες, όπως η
Google, η Yahoo και άλλες που αξιοποίησαν την Javascript για την ανάπτυξη των
ιστοχώρων τους.
Σήμερα η Javascript συνοδευόμενη από διάφορες βιβλιοθήκες (σε Javascript)
αποτελεί την επικρατούσα επιλογή για λειτουργική ανάπτυξη του web. Με αυτήν την
έννοια, η Javascript βρίσκεται παντού, π.χ. σε εφαρμογές για το IPhone ή το Android,
δίνει την δυνατότητα προστιθέμενων scripts σε εφαρμογές όπως το Acrobat, το
Photoshop, κα.
Μερικές φορές, η Javascript συγχέεται με την Java. Οι δύο γλώσσες δεν έχουν
κάποια ιδιαίτερη σχέση μεταξύ τους. Η Javascript δεν λειτουργεί από μόνη της αλλά
κυρίως σε συνδυασμό με την HTML και τα CSS. Έτσι, η HTML οργανώνει τα
δομικά στοιχεία μιας ιστοσελίδας, τα CSS κάνουν τα στοιχεία αυτά να φαίνονται
όμορφα και η Javascript προσδίδει λειτουργικότητα (που περιλαμβάνει και
διαδραστικότητα) στην ιστοσελίδα. Η Javascript είναι αντικειμενοστραφής γλώσσα·
ωστόσο, η εκμάθηση της Javascript απαιτεί καλή κατανόηση της HTML και των
CSS.
H ανάπτυξη εφαρμογών Javascript μπορεί να γίνει με την αξιοποίηση ενός
απλού text editor. Ωστόσο, ιδανικό περιβάλλον αποτελεί το NetBeans. Για την σειρά
αυτών των μαθημάτων, κατεβάστε και εγκαταστήστε την τελευταία έκδοση του
NetBeans.
Η Javascript εκτελείται από τους φυλλομετρητές. Έτσι, έχει επικρατήσει να
θεωρείται interpreter [1]. Κάτι τέτοιο δεν είναι απολύτως σωστό, κυρίως με την
έννοια ότι δεν αποτελεί προδιαγραφή (specification) της γλώσσας. Μάλιστα, η
έκδοση 8 (V8 JavaScript VM used in Chrome) δεν περιλαμβάνει interpreter. Αντίθετα
περιλαμβάνει 2 compilers, έναν “γρήγορο” που παράγει υποβέλτιστο κώδικα και έναν
που παράγει βέλτιστο κώδικα. Η Javascript είναι untyped γλώσσα, δηλ. οι μεταβλητές
της δεν έχουν συγκεκριμένο τύπο που καθορίζεται πριν την χρήση τους και είναι
σταθερός καθόλη την διάρκεια της ζωής τους. Επίσης, η Javascript είναι
αντικειμενοστραφής (Object Oriented). Ωστόσο, παρουσιάζει μια σημαντική διαφορά
2
από το κλασικό μοντέλο αντικειμενοστραφούς προγραμματισμού καθώς η JavaScript
δεν είναι class based αλλά prototype based. Ας σημειωθεί πως C++, Java αλλά και η
μεγάλη πλειοψηφία των OOP γλωσσών είναι class based. Περισσότερα για το
αντικειμενοστραφές μοντέλο της Javascript μπορείτε να βρείτε στο [2].
1.1 Hello World!

Ο κώδικας Javascript προστίθεται μέσα σε μια ιστοσελίδα με την χρήση της
ετικέτας <script>. Η παραγωγή του προγράμματος “Hello World!” είναι πολύ απλή
όπως φαίνεται στον κώδικα 1.
<head>
alert('hello world!');
</script>
</head>
Κώδικας 1: Hello World!
Η συνάρτηση alert βγάζει ένα παράθυρο μηνύματος στο οποίο εμφανίζεται το

hello world! Στην συνέχεια, το παράθυρο παραμένει ανοικτό έως ότου ο χρήστης
πατήσει σχετικό ok button. Ο κώδικας Javascript σε αυτήν την περίπτωση
τοποθετήθηκε στο head της σελίδας. Ως αποτέλεσμα, ο κώδικας θα τρέξει πριν
φορτωθεί το body της σελίδας, δηλ. ο χρήστης θα δει πρώτα το μήνυμα, στην
συνέχεια θα πατήσει το ok button και μετά θα φορτωθεί το body της σελίδας.
Βεβαίως, δεν είναι το μοναδικό μέρος που μπορούμε να προσθέσουμε Javascript
κώδικα. Αντίθετα, ανάλογα με τις ανάγκες μας μπορούμε να αξιοποιήσουμε όλα τα
τμήματα μιας σελίδας για να βάλουμε κατάλληλα scripts.
Μια εναλλακτική για το “Hello World!” θα ήταν να γράψουμε δυναμικά το
μήνυμα στην σελίδα, δηλ. το μήνυμα δεν υπάρχει στον html κώδικα της σελίδας αλλά
όταν αυτή φορτώνεται, τότε τρέχει ένα Javascript και προσθέτει στην σελίδα το
μήνυμα. Η λειτουργικότητα αυτή παρουσιάζεται στον κώδικα 2.
<head>
document.write('<p>Hello world!</p>');
3
</script>
</head>
Κώδικας 2: Γράφοντας δυναμικά στην ιστοσελίδα
Όπως η alert, έτσι και η document.write είναι μια προκαθορισμένη συνάρτηση

της Javascript με προφανή λειτουργικότητα την δυναμική εγγραφή στην ιστοσελίδα.
Καθώς η Javascript είναι μια ολοκληρωμένη γλώσσα με πάρα πολλές
δυνατότητες, οι κώδικες που αναπτύσσονται είναι συχνά πολύπλοκοι, μεγάλου όγκου
και οργανώνονται σε βιβλιοθήκες. Σε πολλές περιπτώσεις, η τοποθέτηση ενός κώδικα
Javascript απευθείας μέσα στην ιστοσελίδα δεν εξυπηρετεί. Αντίθετα, είναι
απαραίτητη η χρήση εξωτερικών αρχείων. Τα εξωτερικά αρχεία Javascript έχουν ως
επίθεμα το js. Έστω ότι στο αρχείο myLib.js έχουμε κώδικα Javascript που θέλουμε
να καλέσουμε, τότε θα τοποθετήσουμε στο head section το εξής script
<script type="text/javascript" src="myLib.js"></script>

Κώδικας 3: Δήλωση εξωτερικού αρχείου Javascript
Το ίδιο το script δεν έχει περιεχόμενο σε αυτήν την περίπτωση, διαθέτει

ωστόσο την ιδιότητα src που αποτελεί αναφορά στο εξωτερικό αρχείο. Στην
συνέχεια, μπορεί να κληθούν ρουτίνες από το myLib.js, πάντα μέσα σε script ετικέτα.
1.2 Μεταβλητές
Oι βασικοί τύποι δεδομένων στην Javascript είναι τρεις: Numbers, Strings και
Booleans. Τα Numbers λαμβάνουν ακέραιες και δεκαδικές τιμές, π.χ. 5, 5.6, κά. Τα
Strings είναι αλφαριθμητικές σειρές, π.χ. “Hello World!” ή “He said: \”Hello
World\”” και οι Booleans τιμές είναι οι γνωστές true και false. Προσέξτε, στο
παράδειγμα για τα Strings, στο δεύτερο String όπου θέλουμε το “ (double quote) να
αποτελεί μέρος του String, χρησιμοποιήσαμε τον χαρακτήρα διαφυγής \ (backslash).
Οι μεταβλητές στην Javascript μπορούν να δηλωθούν με την δεσμευμένη λέξη
var. Τα ονόματά τους είναι case sensitive και αποτελούνται από γράμματα (λατινικοί
χαρακτήρες), αριθμούς και τους χαρακτήρες $ και _ (underscore). Ο πρώτος
χαρακτήρας πρέπει πάντα να είναι γράμμα.
var sum, name;

sum=0;
name="Lefteris Moussiades";
4
Κώδικας 4: Δήλωση μεταβλητών
Στον κώδικα 4, αρχικά δηλώνονται 2 μεταβλητές και στην συνέχεια τους

εκχωρείται τιμή. Ας σημειωθεί πως οι μεταβλητές δημιουργούνται κατά την πρώτη
εκχώρηση. Επίσης, προσέξτε πως οι μεταβλητές είναι στην ουσία typeless. Η δήλωση
και η εκχώρηση μπορούν να γίνονται στην ίδια γραμμή όπως δείχνει ο κώδικας 5.
var sum=0, name="Lefteris Moussiades";

Κώδικας 5: Ταυτόχρονη Δήλωση και Δημιουργία
Στην Javascript όσο αφορά τις πράξεις μεταξύ αριθμών ισχύουν τα προφανή.
Επιπλέον, ο τελεστής + χρησιμοποιείται για String concatenation,
var fName="Lefteris", sName="Moussiades";

var name=fName+' '+sName;
Κώδικας 6
Σε περίπτωση που επιχειρηθεί η “πρόσθεση” ενός String με ένα number, τότε

το Number μετατρέπεται αυτομάτως σε String.
1.3 Βασική Είσοδος και Έξοδος

Με την βοήθεια του κώδικα 7 και 8, παρουσιάζουμε 2 βασικές συναρτήσεις
της Javascript για είσοδο και έξοδο και ανακεφαλαιώνουμε την Εισαγωγή.
function f1() {
var name=prompt("Enter your name");
alert("Hello "+name+'!');
}
Κώδικας 7: Εξωτερικό αρχείο Javascript
Στον κώδικα 7 παρουσιάζεται μια (user defined) συνάρτηση σε Javascript.

Στην πρώτη γραμμή της η συνάρτηση ζητά input από τον χρήστη καλώντας την
(predefined) prompt και στην δεύτερη εμφανίζει αυτό το input. Έστω ότι αυτός ο
κώδικας είναι αποθηκευμένος σε ένα αρχείο που ονομάζεται foredit.js, τότε ο
κώδικας 8 παρουσιάζει έναν τρόπο κλήσης της f1.
<html>
<head>
5
<script type="text/javascript" src="foredit.js">
</script>
</head>
<body>
f1();
</script>
</body>
</html>
Κώδικας 8: κλήση javascript από εξωτερικό αρχείο
1.4 Πίνακες
Στον κώδικα 9, παρουσιάζονται εναλλακτικοί τρόποι δήλωσης και
δημιουργίας πινάκων.
var array=[];
var a2=['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
var a2=new Array('Mon', 'Tues', 'Wed');
var a3=[1,2,"tria",4.5, true];
Κώδικας 9: Δήλωση και δημιουργία πίνακα
Προσέξτε πως ένας πίνακας μπορεί να διαθέτει στοιχεία διαφορετικού τύπου,

π.χ. πίνακας a3. Επιπλέον, σημειώστε πως στοιχεία ενός πίνακα μπορεί να είναι άλλοι
πίνακες ή/και αντικείμενα. Οι πίνακες στην Javascript είναι δυναμικοί, δηλ. μπορεί να
μεταβάλλεται το μέγεθός τους κατά το run time. Οι πίνακες είναι στην ουσία
αντικείμενα και διαθέτουν διάφορες ιδιότητες και μεθόδους. Στον κώδικα 10, αρχικά,
δηλώνεται ένας πίνακας 3 θέσεων και αρχικοποιείται, στην συνέχεια αλλάζει η τιμή
και των 3 θέσεων, στην προτελευταία γραμμή προστίθεται ένα επιπλέον στοιχείο.
Τέλος, τα περιεχόμενα του πίνακα, γράφονται στην ιστοσελίδα, ένα ανά γραμμή.
var a=['Mon', 'Tues', 'Wed'];

a[0]="De";
a[1]="Tr";
a[a.length-1]="Te";
a[a.length]="Pe";
for (i=0; i<a.length; i++) document.writeln(a[i]+"<br/>");
Κώδικας 10: Προσπέλαση στοιχείων πίνακα
Ας σημειωθεί πως με την μέθοδο unsift μπορεί να προστεθεί ένα ή

περισσότερα στοιχεία στην αρχή ενός πίνακα. Επίσης, για την πρόσθεση στοιχείων
6
στο τέλος ενός πίνακα μπορεί να χρησιμοποιηθεί η μέθοδος push. Τέλος, με την pop
διαγράφεται ένα στοιχείο από το τέλος ενός πίνακα και με την shift από την αρχή του.
Σημείωση (Σχόλια)
Ας σημειωθεί πως τα σχόλια στην Javascript μπαίνουν με τον ίδιο τρόπο που
μπαίνουν στην C++, δηλ. με // σημειώνονται τα σχόλια μέχρι τέλος γραμμής ενώ
σχόλια που εκτείνονται σε περισσότερες ή σε τμήμα γραμμής εσωκλείονται σε /* */.
1.5 Επιλογή και λογικές εκφράσεις

Η επιλογή γίνεται με την if η οποία δεν διαφέρει από την C++, ούτε οι λογικοί
τελεστές διαφέρουν εκτός από τον τελεστή ισότητας.
Ο κώδικας 11 δείχνει ένα παράδειγμα αξιοποίησης της if και παράλληλα
παρουσιάζει τους τελεστές ισότητας της Javascript.
var choice='0';
if (choice>1 && choice<5) alert(">1 && <5");
else
if (choice>5 || choice<-1) alert ("choice>5 || choice<-1");
else
if (choice===0) alert("0 tested with ===");
if (choice==0) alert("0 tested with ==");
Κώδικας 11: Επιλογές
Υπάρχουν 2 τελεστές ισότητας στην Javascript, ο === και ο ==. Ο ==

μετατρέπει τον τύπο των τελεστέων έτσι ώστε να γίνεται κοινός ενώ ο === διατηρεί
τον τύπο των τελεστέων. Για τον λόγο αυτό, η έξοδος του κώδικα 11 είναι 0 tested with
==, δηλ., η if (choice===0) αποτυγχάνει και η if (choice==0) επιτυγχάνει.
1.6 Επαναληπτικές διαδικασίες

Οι επαναληπτικές διαδικασίες είναι επίσης παρόμοιες με της C++.
Παραδείγματα απλών for έχουμε ήδη δει. Στην συνέχεια θα δούμε και παραδείγματα
με την while και την do.
var a=['Mon', 'Tues', 'Wed'], i=0

while (i<a.length)
document.writeln(a[i++]+"<br/>");
do {
document.writeln(a[--i]+"<br/>");
7
} while (i>0);
Κώδικας 12: Οι επαναλήψεις while και do
Στον κώδικα 12, η while επαναλαμβάνεται έως ότου το i φτάσει από 0 που
είναι η αρχική τιμή του στο 3 που είναι το μήκος του πίνακα a. Στην συνέχεια, η do
επαναλαμβάνεται έως ότου η τιμή του i γίνει και πάλι 0. Προσέξτε την χρήση του
προθεματικού τελεστή προσαύξησης (prefix increment operator) και του
μεταθεματικού (suffix increment operator). Όπως φαίνεται από το παράδειγμα, οι 2
τελεστές ορίζονται όπως και στην C++. Ας σημειωθεί πως η έξοδος του κώδικα 12
είναι:
Mon
Tues
Wed
Wed
Tues
Mon
1.7 Συναρτήσεις
Οι συναρτήσεις είναι επίσης απλές στην Javascript.
function print(msg, tag) {
document.write("<"+tag+">"+msg+"</"+tag+">");
}
Κώδικας 13: Συνάρτηση Javascript
Στον κώδικα 13, παρουσιάζεται μια συνάρτηση Javascript. Για τον ορισμό της
χρησιμοποιείται η δεσμευμένη λέξη function ενώ οι παράμετροί της στην λίστα
παραμέτρων είναι χωρίς τύπο. Η συνάρτηση μπορεί να κληθεί με διάφορες
παραμέτρους, π.χ. print("Home Page", "h1") ή print("A paragraph text", "p"), κά.
8
2. Αλληλεπίδραση με την ιστοσελίδα
H jQuery είναι μια βιβλιοθήκη γραμμένη σε Javascript. Η jQuery απλοποιεί
σημαντικά τον φόρτο του προγραμματισμού σε Javascript και η χρήση της έχει
επικρατήσει σε βαθμό που να θεωρείται από πολλούς πως αποτελεί αναπόσπαστο
μέρος της Javascript. Η jQuery παρέχεται χωρίς χρέωση και μπορεί ο καθένας να την
κατεβάσει από το επίσημο site [3] της. Πιο συγκεκριμένα για αυτήν την σειρά των
μαθημάτων κατεβάστε στον υπολογιστή σας την έκδοση compressed, production
jQuery 1.11.3. Ο στόχος της jQuery είναι η απλοποίηση των διαδικασιών
αλληλεπίδρασης με την σελίδα. Έτσι, η jQuery, παρέχει ποικίλες δυνατότητες, όπως
αλλαγή των ιδιοτήτων ενός ή περισσοτέρων html στοιχείων, αξιολόγηση (validation)
της εισόδου από τον χρήστη, πρόσθεση, διαγραφή ή μεταβολή html στοιχείων, κά. Ας
δούμε τώρα έναν εισαγωγικό κώδικα.
1 <!DOCTYPE html>
2 <html>
3 <head>
7 <script src="jquery-1.11.3.min.js">
8 </script>
9 <script>
10 $(document).ready(function() {
11 alert($('div').html());
12 });
13 </script>
14 </head>
15 <body>
16 <div>TODO write content</div>
17 </body>
18 </html>
Κώδικας 14: Εισαγωγικός κώδικας στην jQuery
Στην γραμμή 7 του κώδικα 14, περιλαμβάνουμε την βιβλιοθήκη jQuery. Από
την γραμμή αυτή και μετά μπορούμε να καλούμε τις συναρτήσεις της jQuery, στο
head ή το body του εγγράφου ανάλογα με τις ανάγκες μας. Στην γραμμή 11,
βγάζουμε το μήνυμα $('div').html() με την alert. Τι ακριβώς είναι το μήνυμα αυτό; Ο
κώδικας $('div') είναι ένας επιλογέας (Selector). Θυμηθείτε την έννοια των επιλογέων
στα CSS. Με το όνομα ενός στοιχείου, π.χ. div μπορούμε να επιλέξουμε όλα τα
divisions και να τους εφαρμόσουμε κάποια διαμόρφωση. Αυτήν ακριβώς την έννοια
9
έχουν και εδώ οι επιλογείς. Μας δίνουν την δυνατότητα να επιλέξουμε διάφορα
στοιχεία μιας σελίδας ώστε στην συνέχεια να τα επεξεργαστούμε ποικιλοτρόπως.
Το γενικό συντακτικό των jQuery επιλογέων είναι $('css selector'). Στο
παράδειγμά μας, αφού επιλέξουμε το μοναδικό division της σελίδας ζητάμε την html
του την οποία και τυπώνουμε. Όλος αυτός ο κώδικας είναι τοποθετημένος μέσα σε
$(document).ready(function() { }); Το $(document).ready() έχει ως αποτέλεσμα ο κώδικας
να εκτελεστεί μόνο μόλις η ιστοσελίδα έχει φορτωθεί εξολοκλήρου στον Browser.
Έτσι, το μήνυμα που θα τυπώσει η alert είναι “TODO write content”. Αν βγάλουμε την
$(document).ready(), τότε το μήνυμα που θα τυπωθεί είναι η σειρά “undefined”. Το άλλο
ενδιαφέρον στοιχείο σε αυτόν τον κώδικα είναι η ανώνυμη συνάρτηση που
χρησιμοποιείται. Γενικά, η Javascript, δίνει την δυνατότητα να χρησιμοποιούμε
ανώνυμες συναρτήσεις. Αυτές είναι πολύ χρήσιμες, εκεί όπου χρειάζεται μια
συνάρτηση ως παράμετρος ή οποία συνάρτηση δεν πρόκειται να χρησιμοποιηθεί
αλλού.
2.1 Επιλογείς (Selectors)

Στην συνέχεια, θα δούμε διάφορους επιλογείς ολοκληρώνοντας έτσι και την
σχετική συζήτηση που είχε αρχίσει κατά την Εισαγωγή στα CSS.
Επιλογέας Παράδειγμα Επιλέγει

Element $(‘a’) Όλα τα anchor στοιχεία της σελίδας
id $(‘#cv’) το στοιχείο που έχει id ίσο με cv
class $(‘.list’) τα στοιχεία που ανήκουν στην κλάση list
Descendant $('#nΒ a') όλα τα anchor στοιχεία που ορίζονται μέσα
(Απογόνων) στο στοιχείο με id nB
Άμεσων $('#nΒ > a') τα anchor στοιχεία που ορίζονται ως άμεσοι
Απογόνων απόγονοι του στοιχείου με id nB
Adjacent sibling $('h2 + div') τα στοιχεία div που ακολουθούν στοιχεία h2
(Διαδοχικού
αδερφού)
Attribute $('img[alt]') τα στοιχεία img που έχουν set την ιδιότητα alt
$('img[alt=”lion”]') Τα στοιχεία img που έχουν την σειρά lion ως
τιμή της ιδιότητας alt
$('a[href^="http"]') τα anchor στοιχεία η διεύθυνση των οποίων
αρχίζει από "http"
10
$('a[href$=".pdf"]') τα anchor στοιχεία η διεύθυνση των οποίων
τελειώνει σε pdf
$('a[href*="dx"]') τα anchor στοιχεία η διεύθυνση των οποίων
περιέχει την σειρά dx
Πλήρη λίστα με τους επιλογείς jQuery μπορείτε να δείτε στο [4].
2.2 Φίλτρα (Filters)

Η jQuery υποστηρίζει επίσης μια σειρά από φίλτρα που δρουν
συμπληρωματικά ως προς τους επιλογείς.
Φίλτρο Περιγραφή Παράδειγμα Επιλέγει

:even, Επιλογή μόνο των στοιχείων που $('tr:even') τις άρτιες γραμμές των
:odd βρίσκονται σε άρτιες ή περιττές πινάκων
θέσεις μια επιλογής
$('.dt tr:odd) τις περιττές γραμμές
των πινάκων της
κλάσης striped
:first and Επιλογή μόνο του πρώτου ή $('p:first') την τελευταία
:last τελευταίου στοιχείου παράγραφο
:not() Επιλογή των στοιχείων που δεν $('a:not(.A)'); τα anchor elements που
καλύπτονται από επιλογέα που δεν ανήκουν στην
περνά παραμετρικά στην not κλάση Α
:has() Επιλέγει τα στοιχεία που $('li:has(a)') τα στοιχεία λίστας (list
περιέχουν άλλα συγκεκριμένα items) που περιέχουν
στοιχεία anchor elements
:contains() Επιλογή όσων στοιχείων $('a:contains(Click Τα στοιχεία anchor που
περιέχουν συγκεκριμένο κείμενο Me!)') έχουν ως κείμενο το
Click Me!
:hidden Επιλογή των στοιχείων που δεν $('div:hidden') Τα κρυφά divisions
φαίνονται, δηλ. όσων έχουν
display property=none ή αυτά
στα οποία εφαρμόστηκε η hide()
της jQuery ή στοιχεία με ύψος
και πλάτος ίσο με 0. Δεν
εφαρμόζεται σε όσα στοιχεία
11
έχουν visibility = invisible
Πλήρη λίστα των jQuery φίλτρων μπορείτε να δείτε στο [5]
2.3 Αυτόματες επαναληπτικές διαδικασίες

Μια σημαντική δυνατότητα που προσφέρει η jQuery είναι οι αυτόματες
επαναληπτικές διαδικασίες. Για παράδειγμα, $('#Α img').hide() εφαρμόζει την hide()
σε κάθε img που είναι απόγονος του στοιχείου με id A, $('div:hidden').show()
εφαρμόζει την show() σε κάθε “κρυμμένο” division.
2.4 Αλυσιδωτή κλήση συναρτήσεων

Μια άλλη σημαντική δυνατότητα της jQuery είναι η αλυσιδωτή κλήση
συναρτήσεων. Για παράδειγμα,
$('#menu').width(300)
.height(300)
.text('Hi!');
εδώ γίνεται set το πλάτος, το ύψος και το κείμενο του στοιχείου με id=menu.
2.5 Διαχείριση Στοιχείων

Η jQuery παρέχει τρόπους με τους οποίους μπορούμε να διαβάζουμε,
προσθέτουμε, μεταβάλλουμε ή και να διαγράφουμε περιεχόμενο της σελίδας. Στο
παράδειγμα του κώδικα 15, “διαβάζουμε” τον κώδικα html που περιλαμβάνεται μέσα
στο στοιχείο με id = inner.
1 <!DOCTYPE html>
2
3 <html>
4 <head>
6 <script type="text/javascript" src="jquery.1.11.2.js">
7 </script>
8 <script>
9 $(document).ready(function () {
10 alert($('#inner').html());
11 });
12 </script>
13
14 </head>
15 <body>
16 <div id="outer">
17 <div id="inner">
12
18 <h2>Content</h2>
19 </div>
20 </div>
21 </body>
22 </html>
Κώδικας 15: Ανάγνωση της html
Αν αντί να διαβάσουμε τον κώδικα html του στοιχείου με id=inner,

θελήσουμε να τον αντικαταστήσουμε, τότε αρκεί να περάσουμε τον νέο κώδικα ως
παράμετρο στην συνάρτηση html, π.χ. $('#inner').html(“This is head 2”). Ας
σημειωθεί πως όταν χρησιμοποιείται η συνάρτηση html για να αντικαταστήσουμε το
περιεχόμενο, τότε αυτή δεν επιστρέφει το προηγούμενο περιεχόμενο.
Αν αντί να διαβάσουμε/αντικαταστήσουμε την html, θέλουμε να
διαβάσουμε/αντικαταστήσουμε μόνο το κείμενο, τότε χρησιμοποιούμε την
συνάρτηση text()/text(String).
Με την append(), μπορούμε να προσθέσουμε html περιεχόμενο. Για
παράδειγμα προσθέστε τον ακόλουθο κώδικα
$('#inner').append('<p> Paragrafos under header 2 </p>');
μετά την γραμμή 10 στον κώδικα 15, τρέξτε τον κώδικα και παρατηρήστε το
αποτέλεσμα. Στον φυλλομετρητή και ενώ τρέχετε τον τροποποιημένο κώδικα 15,
επιλέξτε «Προβολή κώδικα Σελίδας». Παρατηρήστε και πάλι το αποτέλεσμα.
Συγγενής με την append είναι η prepend. Στο παράδειγμά μας, αν η prepend
αντικαταστήσει την append, το αποτέλεσμα θα είναι να προστεθεί ο html κώδικας
(<p> Paragrafos under header 2 </p>) πριν τον κώδικα <h2>Content</h2>.
Αν θέλεις να προσθέσεις html πριν ή μετά από μια επιλογή, χρησιμοποίησε τις
συναρτήσεις before() και after(), αντίστοιχα. Επίσης, μπορεί να χρησιμοποιηθούν οι
συναρτήσεις remove() και replaceWith() για να διαγραφούν ή να αντικατασταθούν
κάποια στοιχεία.
Σημείωση (Developers Tools)

Ένα θέμα που προκύπτει κατά την ανάπτυξη με Javascript είναι πως οι
μεταβολές που μπορεί να προκληθούν στον κώδικα html δεν είναι άμεσα ορατές. Η
προβολή κώδικα που παρέχουν οι φυλλομετρητές θα δείξει τον κώδικα html πριν
δυναμικές μετατροπές. Ωστόσο, υπάρχουν άλλα εργαλεία ενσωματωμένα στους
13
φυλλομετρητές που μας δείχνουν τον κώδικα όπως εξελίσσεται. Στον Google Chrome
η δυνατότητα αυτή παρέχεται από τα Developer tools.
2.6 Διαχείριση ιδιοτήτων

Μερικές φορές η πρόσθεση ή η αφαίρεση μιας ιδιότητας κλάσης σε ένα
στοιχείο είναι πολύ σημαντική και επιφέρει θεαματικές αλλαγές στην εμφάνιση μιας
σελίδας. Αυτό οφείλεται στο γεγονός ότι είναι δυνατό σε ένα CSS να υπάρχει ποικίλη
διαμόρφωση που συνδέεται με μια κλάση. Επομένως, όταν προσθέτουμε σε ένα
στοιχείο αυτήν την κλάση, στην ουσία προσθέτουμε στο στοιχείο την σχετική
διαμόρφωση. Αντίστοιχα, όταν αφαιρούμε από ένα στοιχείο μια κλάση, αφαιρούμε
από το στοιχείο την διαμόρφωση της κλάσης. Για την πρόσθεση κλάσης η jQuery
παρέχει την συνάρτηση addClass(‘className’), για την αφαίρεση μιας κλάσης
παρέχεται η συνάρτηση removeClass(‘className’). Επίσης, διατίθεται μια
συνάρτηση toggleClass(‘className’) που αφαιρεί την κλάση όταν αυτή υπάρχει και
την προσθέτει όταν δεν υπάρχει.
Ωστόσο δεν είναι μόνο η ιδιότητα class που μπορεί να θέλουμε να
μεταβάλλουμε. Για αυτόν τον λόγο η jQuery μας παρέχει συναρτήσεις με τις οποίες
μπορούμε να διαχειριστούμε όλες τις ιδιότητες. Η συνάρτηση attr(‘attributeName’)
λαμβάνει ως παράμετρο το όνομα μιας ιδιότητας και επιστρέφει την τιμή της. Αν
περάσεις και δεύτερη παράμετρο στην attr τότε μπορείς να βάλεις τιμή (την τιμή της
δεύτερης παραμέτρου) στην ιδιότητα που δηλώνει η πρώτη παράμετρος, π.χ. $('.
img').attr('alt','portait'), τοποθετεί στην ιδιότητα alt όλων των στοιχείων που ανήκουν
στην κλάση img την τιμή portait. Συμπληρωματικά με την attr λειτουργεί η
removeAttr που όπως φανερώνει το όνομά της διαγράφει μια ιδιότητα.
2.7 each() και this

Στην υποενότητα αυτή θα παρουσιάσουμε την συνάρτηση each() και το
keyword this και παράλληλα μια ενδιαφέρουσα εφαρμογή. Το keyword this, με όρους
του αντικειμενοστραφούς μοντέλου, αποτελεί μια αναφορά στο αντικείμενο που
καλεί την μέθοδο μέσα στην οποία το this αναφέρεται. Στον κώδικα 16,
παρουσιάζεται μια εφαρμογή όπου με jQuery εντοπίζονται όλα τα links μιας σελίδας
και ενημερώνεται μια λίστα με αυτά τα links.
14
3 <html>
4 <head>
7 <script type="text/javascript" src="jquery.1.11.2.js">
8 </script>
9 <script>
11 $("a").each(function () {
12 var extLink = $(this).attr('href');
13 $('#bib').append('<li>' + extLink + '</li>');
14 });
15 }); // end of ready( ) function
16 </script>
18
19 </head>
20 <body>
21 <p> Υπάρχουν πολλά και ενδιαφέρονται tutorials για να μάθει κανεις Javascript.
22 Το tutorial στο <a href="http://www.w3schools.com/js/">w3Schools</a>.
23 Ένα tutorial για beginners στο <a href="http://www.tutorialspoint.com/javascript/"> tutorialspoint </a>.
24 Επίσης, για beginners πολύ καλό είναι το tutorial sto <a href="http://htmldog.com/guides/javascript/">
htmldog </a>.
25 To <a href="https://www.codecademy.com/en/tracks/javascript">codeacademy</a> είναι πάντα στα
sites που έχουν καλά tutorials.
26 </p>
27 <ul id="bib"></ul>
28 </body>
29 </html>
Κώδικας 16: Αυτόματη λίστα
Στο body έχουμε μια παράγραφο που περιέχει διάφορα links (anchor
elements). Επίσης, έχουμε και μια λίστα (ul) που είναι όμως άδεια, δηλ. δεν διαθέτει
κατάλληλα list items. Καταρχάς, ο κώδικας θα εκτελεστεί αφού φορτωθεί το έγγραφο
(γραμμή 10). Στην συνέχεια, από κάθε link λαμβάνουμε την διεύθυνση (γραμμές 11
και 12) και τέλος, προσθέτουμε την διεύθυνση αυτή ως list item. Βλέπουμε στην
γραμμή 12 πως διαβάζουμε την ιδιότητα href. Ποιανού όμως στοιχείου είναι η
ιδιότητα αυτή; Είναι του στοιχείου που καλεί την each, δηλ. ενός anchor στοιχείου σε
κάθε κλήση. Πως όμως θα προσπελάσουμε το στοιχείο μέσα στην each. Ο μόνος
τρόπος είναι η αξιοποίηση του this.
3. Διαχείριση Γεγονότων
Σε πολλές περιπτώσεις είναι χρήσιμο το πρόγραμμά μας να απαντά σε
διάφορα γεγονότα, όπως για παράδειγμα, το πάτημα ενός πλήκτρου ή η κίνηση του
ποντικιού. Έτσι προκύπτει η έννοια του Γεγονοδηγούμενου Προγραμματισμού (Event
Driven). Στο πλαίσιο αυτό έχουμε την πυροδότηση (event fires), δηλ. την παραγωγή
15
του γεγονότος και την διαχείρισή του (event handling). Η διαχείριση του γεγονότος
γίνεται με την ανάπτυξη κατάλληλης συνάρτησης γνωστής ως διαχειριστή γεγονότος
(event handler).
Έχουμε ήδη χρησιμοποιήσει έναν τέτοιο handler. Πρόκειται για το
$(document).ready(function). Το event ready πυροδοτείται μόλις το html έγγραφο
φορτωθεί ολόκληρο στην μνήμη. Καθώς το γεγονός αυτό αφορά αποκλειστικά το
τρέχων έγγραφο υποστηρίζεται συντακτικό που δεν απαιτεί επιλογή (selection) αλλα
επιτρέπει κατευθείαν την κλήση της συνάρτησης, δηλ. $(function) είναι ισοδύναμο με
$(document).ready(function). Γενικότερα όμως ισχύει το ακόλουθο συντακτικό
$(selector).eventHandler(function), π.χ. $("p").click(function(){ code }); καθορίζει
τον κώδικα που θα τρέξει όταν κάποιος πατήσει το ποντίκι πάνω σε μια παράγραφο.
Άλλα παραδείγματα : $('html').dblclick() όταν έχουμε double click οπουδήποτε σε
ένα html έγγραφο, $('a').mouseover() όταν το ποντίκι περάσει πάνω από ένα anchor
στοιχείο, κλπ.
Σε γενικές γραμμές μπορούμε να χωρίσουμε τα γεγονότα που πυροδοτούνται
από τους φυλλομετρητές ως ακολούθως:
Mouse events: click, dbclick, mousedown, mouseup, mouseover, mouseout,
mousemove.
Document events: load, resize, scroll, unload.
Form Events: submit, reset (πυροδοτείται όταν ενεργοποιείται ένα button
τύπου reset), change, focus (πυροδοτείται όταν εστιάζουμε σε ένα text field), blur
(πυροδοτείται κατά την έξοδο από ένα εστιασμένο πεδίο, το αντίθετο του focus)
Keyboard Events: keypress, keydown, keyup
Πλήρη λίστα με τα events που υποστηρίζει η jQuery μπορείτε να βρείτε στο
[6].
3.1 jQuery hover event

Τα γεγονότα mouseover και mouseout συμβαίνουν συχνά μαζί ενώ η κοινή
διαχείρισή τους διευκολύνει. Για παράδειγμα, όταν το mouse “μπει” στην περιοχή
ενός button, εμφανίζεται ένα menu ενώ όταν βγει, το menu εξαφανίζεται. Για τον
λόγο αυτό η jQuery παρέχει το γεγονός hover για την κοινή αντιμετώπιση των
mouseover και mouseout. To hover λειτουργεί όπως οποιοδήποτε άλλο γεγονός, μόνο
που λαμβάνει ως παραμέτρους 2 συναρτήσεις, η πρώτη καλείται από την πυροδότηση
16
του mouseover και η δεύτερη από την πυροδότηση του mouseout. Στον κώδικα 17
δίνεται σχετικό παράδειγμα.
$('#menu').hover(
function () {
$('#submenu').show();
}, // end mouseover
function () {
$('#submenu').hide();
} // end mouseout
); // end hover
Κώδικας 17: jQuery mouse hover
Καταρχάς, επιλέγεται το στοιχείο με id menu, στην περίπτωση που το mouse

βρίσκεται επάνω στο στοιχείο, τότε εμφανίζεται το στοιχείο με id submenu. Αντίθετα,
όταν το mouse βρίσκεται έξω από την περιοχή του στοιχείου menu τότε το submenu
κρύβεται.
3.2 Το αντικείμενο event

Όπως έχει ήδη γίνει φανερό, τα γεγονότα τα διαχειριζόμαστε μέσα από τους
event handler των οποίων η εμβέλεια (scope) είναι εντελώς διαφορετική από την
εμβέλεια του κώδικα που τα πυροδοτεί. Έτσι, οι πληροφορίες που είναι διαθέσιμες
κατά την πυροδότηση ενός γεγονότος δεν είναι διαθέσιμες αυτόματα κατά την
διαχείρισή του. Ωστόσο, κάποιες από τις πληροφορίες αυτές είναι μερικές φορές
απαραίτητες για την διαχείριση του γεγονότος. Για παράδειγμα, έστω ότι μας
στοιχείο σε σχέση με το οποίο συνέβη το γεγονός ή αν το πλήκτρο Shift ήταν
πατημένο όταν συνέβη το γεγονός. Οι πληροφορίες αυτές τοποθετούνται σε ένα
αντικείμενο κατά την πυροδότηση του γεγονότος. Το αντικείμενο αυτό είναι
διαθέσιμο ως παράμετρος στην συνάρτηση που διαχειρίζεται το γεγονός, αρκεί στην
συνάρτηση αυτή να ονομαστεί μια παράμετρος.
Στον κώδικα 18 παρουσιάζεται σχετικό παράδειγμα.
$(document).click(function (e) {
var xPos = e.pageX;
var yPos = e.pageY;
alert('X:' + xPos + ' Y:' + yPos);
}); // end click
Κώδικας 18: event object
17
Στον κώδικα 18, στην ανώνυμη συνάρτηση που περνάμε στον click handler
του εγγράφου, ονομάζουμε μια παράμετρο. Η παράμετρος αυτή είναι το αντικείμενο
event. Στην συνέχεια, στο σώμα της συνάρτησης, παίρνουμε από το e τις
συντεταγμένες στις οποίες συνέβη το click.
EVENT PROPERTY DESCRIPTION

pageX Η απόσταση σε pixels του δείκτη του
ποντικιού από την αριστερή πλευρά του
παράθυρου του φυλλομετρητή.
pageY Η απόσταση σε pixels του δείκτη του
ποντικιού από την κορυφή του παράθυρου
του φυλλομετρητή.
screenX Η απόσταση σε pixels του δείκτη του
ποντικιού από την αριστερή πλευρά της
οθόνης.
screenY Η απόσταση σε pixels του δείκτη του
ποντικιού από την κορυφή του παράθυρου
της οθόνης
shiftKey Είναι πατημενο το shift.
which Χρησιμοποιείται με το keypress event και
μεταφέρει τον αριθμητικό κωδικό του του
πλήκτρου που πατήθηκε. Για να πάρουμε από
τον αριθμητικό κώδικα την String
αναπαράσταση του πλήκτρου
χρησιμοποιούμε την συνάρτηση
String.fromCharCode(e.which)
target Το αντικείμενο που σχετίζεται με το γεγονός.
data A jQuery object used with the on() function to pass data to an
event handling function (page 167).
Πίνακας 1: Κοινές ιδιότητες του αντικειμένου event
3.3 Αποτροπή προκαθορισμένης συμπεριφοράς

Μερικά γεγονότα έχουν μια προκαθορισμένη συμπεριφορά. Για παράδειγμα,
το submit μιας φόρμας στέλνει τα δεδομένα της φόρμας σε web server. Ωστόσο,
μερικές φορές χρειαζόμαστε να μπορούμε να αποτρέπουμε την προκαθορισμένη αυτή
συμπεριφορά. Σε σχέση με το παράδειγμα της φόρμας, αν ελέγξουμε τα δεδομένα της
και δούμε ότι δεν είναι συνεπή τότε θέλουμε να αποτρέψουμε το submit. Αυτό
μπορούμε να το πετύχουμε με 2 τρόπους: Καλώντας την event.preventDefault() ή
επιστρέφοντας false. Και οι 2 τρόποι τοποθετούνται στο τέλος της συνάρτησης που
κάνει handling το αντίστοιχο γεγονός.
18
3.4 Απενεργοποίηση διαχειριστών γεγονότων
Σε κάποιες περιπτώσεις θέλουμε να απενεργοποιήσουμε έναν διαχειριστή
γεγονότος. Στον κώδικα 19 παρουσιάζεται ένα σχετικό παράδειγμα.
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.1.11.2.js">
</script>
<script>
$("a").mouseover(function () {
alert('You moved the mouse over me!');
});
$('#disable').click(function () {
$('a').off('mouseover');
});
}); // end of ready() function
</script>
</head>
<body>
Ένα tutorial για beginners στο <a href="http://www.tutorialspoint.com/javascript/">
tutorialspoint </a>.
Επίσης, για beginners πολύ καλό είναι το tutorial sto <a
href="http://htmldog.com/guides/javascript/"> htmldog </a>.
To <a href="https://www.codecademy.com/en/tracks/javascript">codeacademy</a> είναι πάντα
στα sites που έχουν καλά tutorials.
</p>
<button id="disable" type="button">Click Me to disable alert</button>

</body>
</html>
Κώδικας 19: Απενεργοποίηση διαχειριστή mouseover
Στο body (του κώδικα 19), υπάρχει μια παράγραφος που περιλαμβάνει μια σειρά από
links (anchor elements). Στο head του ιδίου κώδικα γίνεται σύνδεση (binding) ενός
handler για το γεγονός mouseover σε anchor element. Η σύνδεση αυτή αφορά όλα τα
anchor elements. O handler που εγγράφεται είναι μια ανώνυμη συνάρτηση που βγάζει
το μήνυμα 'You moved the mouse over me!'. Επανερχόμαστε πάλι στο body όπου μετά την
παράγραφο με τα links συναντάμε ένα button με id="disable". Στο head γίνεται εγγραφή
άλλης ανώνυμης συνάρτησης στο γεγονός click του στοιχείου με id="disable", δηλ. στο
click του button. Σε αυτήν την συνάρτηση καλείται ο κώδικας $('a').off('mouseover'), η
λειτουργία του οποίου είναι πλέον προφανής. Επομένως, η jQuery μας παρέχει την
συνάρτηση off με την οποία μπορούμε να απενεργοποιήσουμε εγγεγραμμένους
19
διαχειριστές γεγονότων. Ας σημειωθεί ότι σε περίπτωση που θα γίνει refresh η σελίδα
ο handler mouseover θα ενεργοποιηθεί εκ νέου.
3.5 Η μέθοδος on()

Ένας άλλος τρόπος για να συνδέουμε διαχειριστές με γεγονότα είναι η χρήση
της σχετικά νέας και πολύ ευέλικτης μεθόδου on(). Στις δυνατότητες της on()
περιλαμβάνονται:
 Απλή σύνδεση γεγονότων με διαχειριστή
 Σύνδεση διαχειριστή με στοιχείο που δημιουργείται μετά την σύνδεση.
Σε πολλές περιπτώσεις συνδέουμε ένα στοιχείο, π.χ. το <li> με ένα
διαχειριστή. Στην συνέχεια δημιουργούνται δυναμικά και άλλα <li>. H
on() μας δίνει την δυνατότητα να συνδέουμε ένα διαχειριστή με
μελλοντικά στοιχεία.
 Σύνδεση πολλαπλών γεγονότων σε ένα στοιχείο
 Σύνδεση με παραμετρικό διαχειριστή. Σε πολλές περιπτώσεις,
χρειάζεται να περάσουμε δεδομένα στον διαχειριστή.
Μια πλήρη περιγραφή των δυνατοτήτων της on() μπορείτε να βρείτε στα [7]
και [8]. Το γενικό συντακτικό της on() έχει ως εξής:
$(selector).on( events [, childSelector ] [, data ], handler )

event: ένα ή περισσότερα γεγονότα που συνδέονται με τον επιλογέα (selector)
childSelector: optional παράμετρος που χρησιμοποιείται για την σύνδεση του
διαχειριστή με στοιχεία που δημιουργούνται μετά την σύνδεση.
data: δεδομένα που περνούν στον διαχειριστή. Επίσης optional παράμετρος.
handler: Η συνάρτηση διαχειριστής του γεγονότος
Στην συνέχεια παρουσιάζουμε ένα παράδειγμα στο οποίο γίνεται εκτεταμένη

χρήση της on().
20
Εικόνα 1: Εφαρμογή αξιοποίησης της on()
Στην εικόνα 1, φαίνεται το interface του παραδείγματος αξιοποίησης της on().

Στην αρχή της σελίδας τοποθετείται μια παράγραφος που περιλαμβάνει μια σειρά από
links. Στην συνέχεια, τοποθετείται ένα button που κάνει update με τα links την λίστα
που ακολουθεί. Κάθε φορά που ενεργοποιείται το button, το επόμενο link από την
παράγραφο τοποθετείται στην λίστα. Παράλληλα, αν ενεργοποιηθεί ένα από τα links,
τότε αυτό επισημαίνεται με γραμμή διαγραφής. Ακολουθεί ο κώδικας και
επεξηγήσεις.
1 3 <html>
4 <head>
8 <script type="text/javascript" src="jquery.1.11.2.js"> </script>
9
10 <script>
11 function pageLinks() {
12 var current = this;
13 current.t = [];
14 $("a").each(function () {
15 var extLink = $(this).attr('href');
16 current.t.push(extLink);
17 });
18 current.l = 0;
19 }
20
22 this.tbl = new pageLinks();
23 $('#updbib').on('click', {rF: this}, function upd(evt) {
24 if (evt.data.rF.tbl.l < evt.data.rF.tbl.t.length)
25 $('#bib').append('<li> <a href=\"' + evt.data.rF.tbl.t[evt.data.rF.tbl.l] +
21
26 '\" target=\"_blank\">' + evt.data.rF.tbl.t[evt.data.rF.tbl.l++] + '</a></li>');
27 });
28 $("#bib").on("click", "li", function () {
29 $(this).css('text-decoration', 'line-through');
30 });
31
33
34 </script>
35
36 </head>
37 <body>
38 <p> Υπάρχουν πολλά και ενδιαφέρονται tutorials για να μάθει κανεις Javascript.
39 Το tutorial στο <a href="http://www.w3schools.com/js/">w3Schools</a>.
40 Ένα tutorial για beginners στο <a href="http://www.tutorialspoint.com/javascript/">
tutorialspoint </a>.
41 Επίσης, για beginners πολύ καλό είναι το tutorial sto <a href=
"http://htmldog.com/guides/javascript/"> htmldog </a>.
42 To <a href="https://www.codecademy.com/en/tracks/javascript">codeacademy</a> είναι
πάντα στα sites που έχουν καλά tutorials.
43 </p>
44
46 <button id="updbib">Update Link List</button>
47 <ul id="bib"><li> aaa </li></ul>
48 </body>
49 </html>
Κώδικας 20: Εφαρμογές της on()
Στο body υπάρχει η παράγραφος με τα links που έχει ήδη περιγραφεί.

Ακολουθεί το button με id updbib και μια άδεια λίστα με id bib. Στον header έχουμε
καταρχάς την συνάρτηση pageLinks() η οποία συγκεντρώνει όλα τα links του
εγγράφου σε ένα αντικείμενο1 που αποτελείται από 1 πίνακα και έναν δείκτη στον
πίνακα. Ο πίνακας είναι ο t και ο δείκτης ο l. Ο δείκτης αρχικοποιείται στο 0. Στην
συνέχεια και αφού φορτωθεί το έγγραφο, καλείται οι pageLinks και παράγεται το tbl.
Μετά με την βοήθεια της on συνδέεται το click με την upd και παράλληλα περνά το
this ως παράμετρος μέσα στο data του evt με το όνομα rF. Στην συνέχεια γίνεται έλεγχος
αν ο δείκτης l είναι μικρότερος από το σύνολο των links. Αν ναι προστίθεται στην
λίστα το στοιχείο του πίνακα στο οποίο δείχνει ο δείκτης και παράλληλα αυξάνεται η
τιμή του δείκτη. Τέλος στις γραμμές 28-30 προστίθεται ένας διαχειριστής που σκοπό
έχει όταν επιλέγεται ένα link από την λίστα να το “διαγράφει”. Επομένως, πρόκειται
για ένα διαχειριστή που θα έπρεπε να συνδέεται με list items. Παρόλα αυτά βλέπουμε
1
H Javascript είναι μια αντικειμενοστραφής γλώσσα. Ωστόσο, το μοντέλο
που ακολουθεί είναι σημαντικά διαφορετικό από της C++. Πιο συγκεκριμένα, η
Javascript δεν είναι class based αλλά είναι prototype based. Ένα αντικείμενο
παράγεται στην Javascript από μια συνάρτηση (δεν είναι ο μόνος τρόπος). Η
συνάρτηση pageLinks() παράγει ένα αντικείμενο που έχει 2 data members: το t και το
l.
22
πως ο κύριος selector είναι η λίστα και όχι τα li. Ωστόσο, ο επιλογέας li έχει
προστεθεί ως δεύτερη παράμετρος στην on. To πρόβλημα εδώ είναι ότι όταν έχει
φορτωθεί η σελίδα δεν υπάρχουν τα li, επομένως δεν μπορούν να συνδεθούν με τον
διαχειριστή του click. Υπάρχει όμως η λίστα που είναι parent στοιχείο για τα li. Η
λίστα συνδέεται με τον διαχειριστή και στην συνέχεια μεταβιβάζει τον handler στα
child elements που δηλώνονται στην θέση της παραμέτρου childSelector. Πρόκειται
για μια τεχνική γνωστή ως Event Delegation [9].
28 $("#bib").on("click", "li", function () {

29 $(this).css('text-decoration', 'line-through');
30 });
31
4. Θέματα για περαιτέρω μελέτη

Ένα σημαντικό θέμα για περαιτέρω μελέτη είναι το αντικειμενοστραφές
μοντέλο της Javascript [2]. Επίσης, ιδιαίτερο ενδιαφέρον έχει το jQuery UI, μια
συγγενής βιβλιοθήκη που υποστηρίζει τον προγραμματισμό διεπαφής χρήστη [10].
Τέλος, μια από τις τελευταίες εξελίξεις αποτελεί το node.js, η βιβλιοθήκη javascript
που υποστηρίζει server-side development.
23
Ειςαγωγι ςτον Προγραμματιςμό
του Παγκόςμιου Ιςτοφ
Η γλϊςςα PHP
Τι είναι θ PHP
• Ανοιχτοφ κϊδικα (ςε αντίκεςθ με ASP,
ColdFusion κλπ)
• Δθμιουργία δυναμικϊν ιςτοςελίδων
• Λειτουργίεσ
– Αποςτολι HTTP κεφαλίδων
– Cookies
– Authentication
– Σφνδεςθ με βάςεισ δεδομζνων
– Συνεργαςία με εξωτερικζσ βιβλιοκικεσ
Ειςαγωγι ςτον Προγραμματιςμό του
2
Παγκόςμιου Ιςτοφ - Χριςτοσ Λυτρίδθσ
Εκτζλεςθ

3
Σφνταξθ
• Παραγωγι κϊδικα HTML (από αρχεία php)
<html>
<head>
<title>Testing PHP</title></head>
<body>
<?php print "hello there!"; ?>
</body>
</html>
<html>
<head>
<title>Testing PHP</title></head>
<body>
hello there!
</body>
</html>
4
Σχόλια
• Μια γραμμι
echo "hello there!"; //sxolio mias grammis
• Πολλαπλζσ γραμμζσ
/*
echo "hello ";
echo "there!";
*/

5
Μεταβλθτζσ
• Προθγείται το ςφμβολο $
• Δεν δθλϊνεται τφποσ
<html>
<body>
<?php
$var1 = 1;
$var2 = 4;
$sum = $var1 + $var2;
echo "The result of $var1 + $var2 is $sum";
?>
</body>
</html>

6
Τφποι δεδομζνων
Τφποσ Περιγραφή
Integer Ακζραιοσ
double/float Δεκαδικόσ
Bool True ι False
Array Λίςτα
Object Αντικείμενο με ιδιότθτεσ και μεκόδουσ
Resource Παραπομπι ςε εξωτερικό πόρο
NULL Χωρίσ τιμι

7
Παραδείγματα
<?php
$a = 1.234; if ($action == "show_version") {
$b = 1.2e3; echo "The version is 1.23";
$c = 7E-10; }
?>
<?php
$foo = True;
?> $var = 1; -- this is an integer
$var = 0; -- this is an integer
$var = "1"; -- this is a string.

8
Συμβολοςειρζσ (strings)
$var = 'Hi there'; $var = "Hi there";
echo 'Hi there'; echo "Hi there";
<?php
$var = "This is a";
This is a test
print "$var test<br>";
$var test
print '$var test';
?>

9
Ζνωςθ ςυμβολοςειρϊν
• Σφμβολο .
$var = "This is a";

This is a test;
echo $var . ' test';
$num = 4;
echo "Three times ".$num. 'is '.3*$num;

10
Τελεςτζσ
Τελεςτήσ Περιγραφή
. Σφνδεςθ ςυμβολοςειρϊν
Πχ echo $var . ' test';
= Εκχϊρθςθ τιμισ
Πχ $var = "Hi there";
.= Εκχϊρθςθ ςφνδεςθσ
Πχ
$var = "this is";
$var .=" a test";
echo $var;
This is a test

11
Αρικμθτικοί τελεςτζσ
Τελεςτήσ Λειτουργία Παράδειγμα
+ Πρόςκεςθ $var + $var2
- Αφαίρεςθ $var - $var2
* Πολλαπλαςιαςμόσ $var * $var2
/ Διαίρεςθ $var/$var2
% Modulus $var%$var2
$num = 4;
echo 3*$num;

12
Τελεςτζσ Σφγκριςθσ
Τελεςτήσ Λειτουργία Παράδειγμα
== Ίςο με $var == $var2
!= Δεν είναι ίςο με $var != $var2
< Μικρότερο από $var < $var2
> Μεγαλφτερο από $var > $var2
<= Μικρότερο ι ίςο από $var <= $var2
>= Μεγαλφτερο ι ίςο από $var >= $var2
<?php
$storedpassword = "mypassword";
$enteredpassword = "mypassword";
if ($storedpassword == $enteredpassword) {
echo "The entered password was correct!";
}else {
echo "The entered password was wrong!";
}
?> Ειςαγωγι ςτον Προγραμματιςμό του
13
Λογικοί τελεςτζσ
Τελεςτήσ Περιγραφή Παράδειγμα
&& Λογικό ΚΑΙ (AND) $var && $var2
|| Λογικό Ή (OR) $var || $var2
! Λογικό ΌΧΙ (NOT) !$var
<?php
$var1= 3;
$var2= "yes";
if ($var1==3 && $var2== "yes") {
echo "True";
}else {
echo "false";
}
?>
14
Δομι if-else-else if
• Δομι ελζγχου
<?php
$x=1;
if ($x == 2) {
echo '$x is equal to 2';
} else if ($x == 1) {
echo '$x is equal to 1';
} else {
echo '$x does not equal 2 or 1';
}
?>

15
Δομι for
• Δομι επανάλθψθσ
<?php
for($x=1; $x<=10; $x++) {
echo "$x<br>";
}
?>

16
Δομι while
<?php
$x=1;
while ($x <=10) {
echo "$x<br>";
$x++;
}
?>

17
Δομι do-while
<?php
$x=11;
do {
echo "$x<br>";
$x++;
} while ($x <=10);
?>

18
Πίνακεσ
• Απλοί πίνακεσ
0 1 2 3
"www.yahoo.com" "www.bbc.co.uk" "www.google.com" "www.cnn.com"
<?php
$array = array("http://www.yahoo.com",
"http://www.bbc.co.uk",
"http://www.google.com",
"http://www.cnn.com/");
?>

19
Πίνακεσ
• Προβολι ςτοιχείων απλοφ πίνακα
χρθςιμοποιϊντασ τθν δομι επανάλθψθσ for
<?php
$array = array("http://www.yahoo.com",
"http://www.bbc.co.uk",
"http://www.google.com",
"http://www.cnn.com/");
for($i=0;$i<=count($Array);$i++) {
echo "$array[i]<br>";
}
?>

20
Συςχετιηόμενοι πίνακεσ
"weather" "news" "search" "sports"

"www.yahoo.com" "www.bbc.co.uk" "www.google.com" "www.cnn.com"
<?php
$array = array("weather" => "http://www.yahoo.com",
"news" => "http://www.bbc.co.uk",
"search" => "http://www.google.com",
"sports" => "http://www.cnn.com/");
?>

21
Δομι foreach
• Προβολι ςτοιχείων απλοφ πίνακα
χρθςιμοποιϊντασ τθν δομι επανάλθψθσ
foreach
<?php
$array = array("weather" => "http://www.yahoo.com",
"news" => "http://www.bbc.co.uk",
"search" => "http://www.google.com",
"sports" => "http://www.cnn.com/");
foreach($array as $value) {
echo "$value<br>";
}
?>
22
Συναρτιςεισ
• Οριςμόσ
<?php <?php
function say_hi() { function say_hi() {
echo "Hi there!"; return "Hi there!";
} }
?> ?>
• Εκτζλεςθ
<?php <?php
say_hi(); $var = say_hi();
?> echo $var;
echo say_hi();
?>

23
Συναρτιςεισ
• Παράμετροι ςυναρτιςεων
<?php
function say_hi($name, $greeting) {
return "$greeting $name!";
}
echo say_hi("Billy Joe Bob", "Hi there");

?>

24
HTML φόρμεσ και PHP
<html>
<body>
<form action= "test.php" method="post">
<input type="text" name="name" value="">
<input type="submit" name="submit" value="Υποβολή">
</form>
</body>
</html>

25
Μζκοδοι POST και GET

• GET
– Λαμβάνει δεδομζνα από ςυγκεκριμζνο πόρο
/test/demo_form.php?name1=value1&name2=value2
• POST
– Υποβάλλει δεδομζνα ςε ςυγκεκριμζνο πόρο
POST /test/demo_form.php HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

26
XAMPP

27
Φάκελοσ εργαςίασ htdocs

28
Στον browser

29
test.php

30
Προςκικθ PHP ςτον κϊδικα HTML
<html>
<body>
<?php
if (isset($_POST['submit'])) {
echo "Πατήθηκε το κουμπί Υποβολή<br><br>";
echo "Τιμή πεδίου κειμένου: ".$name;
}
?>
<form action="test.php" method="post">

<input type="text" name="name" value="">
<input type="submit" name="submit" value="Υποβολή">
</form>
</body>
</html>
31
Εκτζλεςθ
• Πλθκτρολόγθςθ κειμζνου και πάτθμα
κουμπιοφ υποβολισ

32
Κϊδικασ ςελίδασ

33
#include
• Ειςαγωγή κώδικα από άλλο αρχείο
<?php
include "text.txt";
?>
<?php
include "text.html";
?>
<?php
include "text.php";
?>
Ειςαγωγή ςτον Προγραμματιςμό του

2
Παγκόςμιου Ιςτοφ - Χρήςτοσ Λυτρίδησ
Τάξεισ
• Αντικειμενοςτραφήσ προγραμματιςμόσ
<?php
class SimpleClass
{
// property declaration
public $var = 'a default value';
// method declaration
public function displayVar() {
echo $this->var;
}
}
?>

3
Χρήςη
• Δημιουργία αντικειμζνου
$object = new SimpleClass();
• Πρόςβαςη ςε ιδιότητεσ
$var2 = $object->var;
• Πρόςβαςη ςε μεθόδουσ
echo $object->displayVar();

4
Σφνδεςη με βάςεισ δεδομζνων
• Ενεργοποίηςη MySQL server - XAMPP

5
phpmyadmin

6
Δημιουργία πίνακα

7
Ειςαγωγή δεδομζνων

8
Πίνακασ με δεδομζνα

9
Συναρτήςεισ για ςφνδεςη με MySQL
Συνάρτηση Περιγραφή
mysql_select_db() Επιλογή βάςησ
mysql_connect() Σφνδεςη ςε βάςη
mysql_close() Κλείςιμο βάςησ
mysql_create_db() Δημιουργία βάςησ
mysql_query() Ερώτημα MySQL
mysql_fetch_array() Επιςτροφή εγγραφών
mysql_fetch_row() Επιςτροφή μιασ εγγραφήσ
mysql_num_rows() Αριθμόσ εγγραφών

10
Βήματα
1. Επιλογή ΒΔ
$db = mysql_select_db(DB_DATABASE)
2. Σφνδεςη με ΒΔ
$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD)
3. Ερώτημα MySQL
$result = mysql_query('SELECT * FROM users');
4. Χρήςη αποτελεςμάτων
while ($row = mysql_fetch_array($result)) { }
11

Εισαγωγή Στον Προγραμματισμό Του Παγκόσμιου Ιστού Ελευθέριος Μωυσιάδης ΤΕΙ Αν. Μακεδονίας Και Θράκης

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Εισαγωγή Στον Προγραμματισμό Του Παγκόσμιου Ιστού Ελευθέριος Μωυσιάδης ΤΕΙ Αν. Μακεδονίας Και Θράκης

Uploaded by

Copyright:

Available Formats

Εισαγωγή στον

ΤΕΙ Αν. Μακεδονίας και

• Native Development (c objective για ios, java για

HyperText Markup Language

Βασικές τεχνολογίες ανάπτυξης

Νέες δυνατότητες της HTML5

Στοιχεία της HTML

Περιέκτες (container elements),

Αυθύπαρκτα (stand alone elements)

Επικεφαλίδες και παράγραφοι

20 <h3> Αταξινόμητη Λίστα </h3>

41 <p> To &ltbr&gt <br/> αλλάζει γραμμή </p>

Υπερσύνδεσμοι και Εικόνες

Αλληλεπικαλυπτόμενα Φύλλα Διαμόρφωσης

Δομή κανόνα CSS

επιλογέας {ιδιότητα: τιμή [; ιδιότητα: τιμή]}

<link rel="stylesheet" href="basicHtml.css" type="text/css" />

• Δυνατότητα μαζικής διαμόρφωσης με μόνο ένα φύλλο

<h1 style="color: fuchsia"> Απλά HTML στοιχεία </h1>

• Διαμόρφωση που αφορά συγκεκριμμένο στοιχείο

• Τιμές απο σταθερές, π.χ. blue, brown, red, yellow

• Τιμές απο σταθερές:

Κεφάλαιο 2 Εισαγωγή στην HTML ............................................................. 6

Κεφάλαιο 3 Διαμόρφωση του περιεχομένου με τα CSS............................ 11

Κεφάλαιο 4 Περαιτέρω μελέτη ................................................................ 17

1.1 Ανάπτυξη στον Παγκόσμιο Ιστό

Εικόνα 1: Server Client επικοινωνία

Η σελίδα δεν είναι παρά ένα αρχείο κειμένου με βασικό περιεχόμενο

1.2 Δομή και Διαμόρφωση

1.3 Προγραμματισμός στον πελάτη

1.4 Προγραμματισμός στον εξυπηρετητή

Κεφάλαιο 2 Εισαγωγή στην HTML

2.1 Περιβάλλοντα Ανάπτυξης

2.2 Βασική html σελίδα

Στην γραμμή 1, το στοιχείο <!DOCTYPE html> αποτελεί εξαίρεση ως προς

Σημείωση : Οι φυλλομετρητές δεν ακολουθούν αυστηρά κανένα πρότυπο (κάποια

2.3 Βασικά html στοιχεία

Στην γραμμή 11, παρουσιάζεται η πρώτη παράγραφος. Μεγαλύτερο

2.4 Βιβλιογραφία για επιπλέον μελέτη

Κεφάλαιο 3 Διαμόρφωση του περιεχομένου με τα CSS

3.1 Εντολές CSS

Στον κώδικα 5, αφου καθορίζεται πως το κείμενο των παραγράφων θα έχει

3.2 Μηχανισμοί Επιλογής

Για παράδειγμα στον κώδικα 7, στις γραμμές 9-11, καθορίζεται όλα τα

3.3 Αλληλεπικάλυψη και κληρονομικότητα

Τα στοιχεία περιέκτες μπορούν να περιέχουν άλλα στοιχεία. Παράδειγμα

Κεφάλαιο 4 Περαιτέρω μελέτη

Προτείνεται η εισαγωγή στην html και css να συνεχιστεί με βάση το σχετικό

Η Javascript είναι η γλώσσα που χρησιμοποιείται για να προσδώσει γενική

• Ξεκίνησε το 1995 από την εταιρία Netscape.

• Εξελίχθηκε πάρα πολύ, κυρίως ωθούμενη από μεγάλες εταιρείες,

• Σε ιστοσελίδες (client side & server side scripting)

• Σε εφαρμογές (desktop, mobile)

• Δίνει την δυνατότητα προστιθέμενων scripts σε εφαρμογές όπως το

• Απλός text editor

• Δεν καθορίζεται στα specifications της γλώσσας

• Object Oriented (prototype based)

<title>TODO supply a title</title>

Γράφοντας στην σελίδα

<title>TODO supply a title</title>

<script type="text/javascript" src="myLib.js"></script>

Oι βασικοί τύποι δεδομένων : Numbers, Strings και Booleans.

Χαρακτήρας διαφυγής \ (backslash).

Δεσμευμένη λέξη var.