Web Technologies Lecture 05

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΛΟΠΟΝΝΗΣΟΥ
ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ
ΔΙΑΛΕΞΗ V
JAVASCRIPT BOM –
BROWSER OBJECT MODEL
Τζήμας Γιάννης, Αναπληρωτής Καθηγητής
Μάθημα:
ΑΝΑΠΤΥΞΗ ΣΥΣΤΗΜΑΤΩΝ ΠΑΓΚΟΣΜΙΟΥ ΙΣΤΟΥ

Το πρώτο πράγμα που πρέπει πάντα να κάνετε είναι να ρωτάτε το γιατί;
Σήμερα θα δούμε:
πως η JavaScript
μπορεί να
επικοινωνεί με το
φυλλομετρητή
(browser)
Παγκόσμιου Ιστού
μέσω του BOM.
2 2/12/2020
Επισκόπηση Μαθήματος
Ιεραρχία αντικειμένων του JavaScript BOM (Browser Object

Model).
Μέθοδοι και ιδιότητες των

Window object.
Screen object.
Location object.
History object.
Navigator object.
Είδη popup boxes.
Timing events.
Cookies.
3 2/12/2020
Ανάπτυξη Συστημάτων Παγκόσμιου Ιστού
JAVASCRIPT BOM -
BROWSER OBJECT MODEL
4 2/12/2020
Τι είναι το BOM;
Το Browser Object Model (BOM) είναι το μέσο με

το οποίο η JavaScript επικοινωνεί με το
φυλλομετρητή (browser) Παγκόσμιου Ιστού.
Ουσιαστικά, είναι ένα σύνολο από αντικείμενα

(objects) τα οποία είναι προσβάσιμα από τη
JavaScript και αφορούν σε διάφορα στοιχεία ενός
browser.
Τα αντικείμενα έχουν ιδιότητες και μεθόδους.
5 2/12/2020
Window Object (1/3)
Το "window object" είναι το κορυφαίο αντικείμενο στην

ιεραρχία του BOM.
Το "window object" υποστηρίζεται από
όλους τους browsers και αναπαριστά το
παράθυρο ενός browser.
Όλες οι καθολικές μεταβλητές και

συναρτήσεις ενός script αυτόματα
γίνονται μέλη του window object.
Οι καθολικές μεταβλητές (global variables)
γίνονται ιδιότητες (properties) του "window
object".
Οι καθολικές συναρτήσεις (global
functions) γίνονται μέθοδοι (methods) του
"window object".
6 2/12/2020
Window Object (2/3)
Αντικείμενα της ιεραρχίας του BOM.

Σημ.: η λίστα αντικειμένων της παρακάτω εικόνας δεν είναι η
ολοκληρωμένη ιεραρχία του BOM.
Το "navigator object" αναπαριστά πληροφορίες

για το browser και για το υποκείμενο λειτουργικό
σύστημα.
Το "screen object" αναπαριστά πληροφορίες

σχετικές με τις δυνατότητες προβολής (display
capabilities) του browser στον υπολογιστή του
επισκέπτη μιας σελίδας.
Το "history object" αναπαριστά πληροφορίες

σχετικά με το ιστορικό του browser.
Το "location object" αναπαριστά πληροφορίες

σχετικά με την τρέχουσα διεύθυνση URL.
Το "document object" αναπαριστά την τρέχουσα

HTML σελίδα, δηλαδή το HTML DOM. 7 2/12/2020
Window Object (3/3)
Το "document object" του HTML DOM είναι ιδιότητα του

window object.
Παράδειγμα: χρήση του "document object" σαν ιδιότητα

του "window object".
<!DOCTYPE html>
<html>
Ισοδύναμες
<body>
δηλώσεις.
<h1>My First Page</h1>
<p id="demo"></p>
<script>
window.document.getElementById("demo").innerHTML="Hello World!";
document.getElementById("demo").innerHTML="Hello World!";
</script>
</body>
</html> Ας ρίξουμε μια ματιά…
8 2/12/2020
Μέγεθος παραθύρου browser (1/3)
Το "window object" έχει ιδιότητες που μπορούν να

χρησιμοποιηθούν για να προσδιορίσουν το μέγεθος
του παραθύρου ενός browser.
Για τους Internet Explorer, Chrome, Firefox, Opera

και Safari, οι ιδιότητες είναι:
Ιδιότητα Περιγραφή
window.innerHeight το εσωτερικό (inner) ύψος του παραθύρου, που

δεν περιλαμβάνει τα toolbars, scrollbars κτλ.
window.innerWidth το εσωτερικό (inner) πλάτος του παραθύρου, που
δεν περιλαμβάνει τα toolbars, scrollbars κτλ.
9 2/12/2020
Για τις εκδόσεις του Internet Explorer 5, 6, 7

και 8 οι ιδιότητες είναι:
document.documentElement.clientHeight το ύψος του παραθύρου.

ή
document.body.clientHeight
document.documentElement.clientWidth το πλάτος του παραθύρου.
ή
document.body.clientWidth
10 2/12/2020
Μια πρακτική λύση η οποία επιστρέφει το πλάτος και το

μήκος παραθύρου, καλύπτοντας όλους τους browsers
είναι:
<!DOCTYPE html> Επιστρέφει το

<html> ύψος και το
<body> πλάτος του
παραθύρου για
<p id="demo"></p> όλους τους
τύπους browser.
<script>
var w = window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight

|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser window width: " + w + ", height: " + h +".";
</script>
</body>
</html> Ας ρίξουμε μια ματιά… 11 2/12/2020
Μέθοδοι του window object
Εκτός από ιδιότητες, το "window object"

έχει και μεθόδους.
Μέθοδος Περιγραφή
window.open() άνοιγμα ενός νέου παραθύρου.
window.close() κλείσιμο του τρέχοντος παραθύρου.
window.moveTo() μετακίνηση του τρέχοντος παραθύρου.
window.resizeTo() αλλαγή μεγέθους του τρέχοντος παραθύρου.
12 2/12/2020
Screen Object (1/3)
Το "window.screen" object περιέχει πληροφορίες σχετικά με

την οθόνη του επισκέπτη μιας σελίδας.
Στις δηλώσεις της JavaScript, το πρόθεμα
"window" μπορεί να παραληφθεί.
Ιδιότητες του "window.screen" object:
screen.width: το πλάτος της οθόνης του επισκέπτη μιας σελίδας σε

pixels.
screen.height: το ύψος της οθόνης του επισκέπτη μιας σελίδας σε pixels.
screen.availWidth: το πλάτος της οθόνης του επισκέπτη μιας σελίδας σε pixels

αφαιρώντας τα διάφορα interface features όπως το
Windows taskbar.
screen.availHeight: το ύψος της οθόνης του επισκέπτη μιας σελίδας σε pixels
αφαιρώντας τα διάφορα interface features όπως το
Windows taskbar.
13 2/12/2020
Screen Object (2/3)
Ιδιότητες του "window.screen" object:

screen.colorDepth: Ο αριθμός των bits που χρησιμοποιούνται για την

προβολή ενός χρώματος.
• Οι σύγχρονοι υπολογιστές χρησιμοποιούν 24 ή 32
bits, προβάλλοντας 16,777,216 διαφορετικά χρώματα
("True Colors").
• Παλιότεροι υπολογιστές χρησιμοποιούν 16 bits,
προβάλλοντας 65,536 διαφορετικά χρώματα ("High
Colors").
• Αρκετά παλαιότερα, υπήρχαν υπολογιστές και κινητές
συσκευές που χρησιμοποιούσαν 8 bits ("VGA
colors").
screen.pixelDepth: Το pixel depth της οθόνης.
14 2/12/2020
Screen Object (3/3)
Παράδειγμα: χρήση ιδιοτήτων του

window.screen object.
<!DOCTYPE html>
<html>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
<script>
document.getElementById("demo1").innerHTML = "Screen width = " + screen.width;
document.getElementById("demo2").innerHTML = "Screen height = " + screen.height;
document.getElementById("demo3").innerHTML = "Available screen width = " + screen.availWidth;
document.getElementById("demo4").innerHTML = "Available screen height = " +
screen.availHeight;
document.getElementById("demo5").innerHTML = "Screen color depth = " + screen.colorDepth;
document.getElementById("demo6").innerHTML = "Screen pixel depth = " + screen.pixelDepth;
</script>
Ας ρίξουμε μια ματιά…
</body>
</html> 15 2/12/2020
Location Object (1/3)
To "window.location" object χρησιμοποιείται:

για την εύρεση της διεύθυνσης URL της τρέχουσας HTML
σελίδας.
για την ανακατεύθυνση (redirect) του browser σε μια νέα HTML
σελίδα.
Στις δηλώσεις της JavaScript μπορεί να παραληφθεί το

πρόθεμα "window".
16 2/12/2020
Ιδιότητες του "window.location" object:

window.location.href Επιστρέφει το URL της τρέχουσας σελίδας.
window.location.hostname Επιστρέφει το domain name του server που
φιλοξενεί τη σελίδα.
window.location.pathname Επιστρέφει το path και το όνομα αρχείου της
τρέχουσας σελίδας.
window.location.protocol Επιστρέφει το web πρωτόκολλο που
χρησιμοποιείται (http:// ή https://)
window.location.assign Φορτώνει ένα νέο έγγραφο.
17 2/12/2020
Παράδειγμα: χρήση ιδιοτήτων του "window.location"

object.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display info about the current URL.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML="href = " + window.location.href;
document.getElementById("demo2").innerHTML= "host = " + window.location.host;
document.getElementById("demo3").innerHTML= "pathname = " + window.location.pathname;
document.getElementById("demo4").innerHTML= "protocol = " + window.location.protocol;
}
</script>
</body>
</html> 18 2/12/2020
History Object (1/3)
To "window.history" object περιέχει πληροφορίες σχετικά με

το ιστορικό (history) του browser του επισκέπτη μιας σελίδας.
Στις δηλώσεις της JavaScript μπορεί να παραληφθεί το πρόθεμα
window.
Για λόγους προστασίας της ιδιωτικότητας (privacy) των

χρηστών, υπάρχουν περιορισμοί στον τρόπο με τον οποίο η
JavaScript μπορεί να έχει πρόσβαση στο συγκεκριμένο
αντικείμενο.
19 2/12/2020
Κάποιες ενδεικτικές μέθοδοι του

window.history object είναι:
history.back() Είναι το ίδιο με το να κάνει ο χρήστης κλικ στο
κουμπί ‘back’ του browser. Με άλλα λόγια,
φορτώνει την προηγούμενη URL διεύθυνση της
λίστας ιστορικού.
history.forward() Είναι το ίδιο με το να κάνει ο χρήστης κλικ στο
κουμπί ‘forward’ του browser. Με άλλα λόγια,
φορτώνει την επόμενη URL διεύθυνση της λίστας
ιστορικού.
20 2/12/2020
Παράδειγμα: δημιουργία δυο κουμπιών "back" και "forward"

με χρήση των μεθόδων του "window.history" object.
<html>
<head>
<script>
function goBack() {
window.history.back()
}
function goForward() {
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">

<input type="button" value="Forward" onclick="goForward()">
</body>
21 2/12/2020
Navigator Object (1/4)
To "window.navigator" object περιέχει

πληροφορίες σχετικά με τον browser του
επισκέπτη μιας σελίδας.
Στις δηλώσεις της JavaScript, το πρόθεμα "window"
μπορεί να παραληφθεί.
22 2/12/2020
Ιδιότητες του "window.navigator" object:

navigator.appName Επιστρέφει το όνομα του browser.
navigator.appCodeName Επιστρέφει το κωδικό όνομα του browser.
navigator.platform Επιστρέφει την πλατφόρμα (το λειτουργικό
σύστημα) του browser.
navigator.cookieEnabled Επιστρέφει true ή false με βάση το αν είναι
ενεργοποιημένα τα cookies ή όχι.
navigator.product Επιστρέφει το engine name του browser.
navigator.appVersion Επιστρέφει την έκδοση του browser.
navigator.userAgent Επιστρέφει την έκδοση του browser.
navigator.language Επιστρέφει την γλώσσα του browser.
23 2/12/2020
Παράδειγμα: χρήση ιδιοτήτων του

"window.navigator" object.
<!DOCTYPE html>
<html>
<body>

<p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <p id="demo4"></p> <p
id="demo5"></p> <p id="demo6"></p> <p id="demo7"></p>
<script>
document.getElementById("demo1").innerHTML ="Cookies enabled is " +
navigator.cookieEnabled;
document.getElementById("demo2").innerHTML = "Name is " + navigator.appName +
"<br>Code name is " + navigator.appCodeName;
document.getElementById("demo3").innerHTML ="Browser engine is " +
navigator.product;
document.getElementById("demo4").innerHTML = navigator.appVersion;
document.getElementById("demo5").innerHTML = navigator.userAgent;
document.getElementById("demo6").innerHTML = navigator.platform;
document.getElementById("demo7").innerHTML = navigator.language;
}
</script> Ας ρίξουμε μια ματιά…
</body> 24 2/12/2020
</html>
Έξοδος προηγούμενου παραδείγματος:
Cookies enabled = true
Name = Netscape
Code name = Mozilla
Browser engine = Gecko
Appversion = 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/39.0.2171.95 Safari/537.36
userAgent = Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like

Gecko) Chrome/39.0.2171.95 Safari/537.36
Platform = Win32
Language = en-US
25 2/12/2020
JavaScript Popup Boxes
Η JavaScript διαθέτει τρεις τύπους popup boxes:

Alert box: χρησιμοποιείται για να προβάλλει ένα
προειδοποιητικό μήνυμα στον χρήστη.
Confirm box: χρησιμοποιείται για να προβάλλει ένα
μήνυμα επιβεβαίωσης στον χρήστη.
Prompt box: χρησιμοποιείται συνήθως για να εισάγει
ο χρήστης μια τιμή προτού εισέλθει σε μια σελίδα.
Τα popup boxes δημιουργούνται μέσω των

μεθόδων alert(…), confirm(…) και prompt(…), οι
οποίες είναι μέθοδοι του "window" object.
26 2/12/2020
Alert Box (1/2)
Με τη χρήση του alert box είμαστε σίγουροι

πως ο χρήστης θα δει την πληροφορία που
επιθυμούμε να του προβάλλουμε.
Η δημιουργία ενός alert box γίνεται μέσω της

μεθόδου window.alert("someText").
"someText": το περιεχόμενο του alert box.
27 2/12/2020
Alert Box (2/2)
Παράδειγμα: χρήση alert box.
<!DOCTYPE html> Όταν εμφανίζεται ένα alert box,

<html> ο χρήστης πρέπει να κάνει κλικ
<body> στο κουμπί ‘OK’ για να
μπορέσει να συνεχίσει.
<p>Click the button to display an alert box:</p>
<script>
alert("I am an alert box!");
}
</script>
</body>
28 2/12/2020
Confirm Box (1/2)
Το confirm box συνήθως χρησιμοποιείται

όταν χρειάζεται ο χρήστης να επιβεβαιώσει ή
να αποδεχτεί κάτι.
Η δημιουργία ενός confirm box γίνεται μέσω

της μεθόδου window.confirm("someText").
"someText": το περιεχόμενο του confirm box.
29 2/12/2020
Confirm Box (2/2)
Παράδειγμα: χρήση alert box.
<!DOCTYPE html> Όταν εμφανίζεται ένα confirm box, ο

<html> χρήστης πρέπει να κάνει κλικ είτε
<body>
στο κουμπί ‘OK’ είτε στο κουμπί
<p>Click the button to display a confirm box.</p> ‘Cancel’ για να μπορέσει να
συνεχίσει.
Αν κάνει κλικ στο ‘OK’ τότε
<p id="demo"></p> επιστρέφεται η τιμή ‘true’ αλλιώς η
<script>
τιμή ‘false’.
var x;
if (confirm("Press a button!") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
Prompt Box (1/2)
Το prompt box συνήθως χρησιμοποιείται όταν

απαιτείται να εισάγει ο χρήστης μια τιμή προτού
εισέλθει σε μια σελίδα.
Η δημιουργία ενός prompt box γίνεται μέσω της

μεθόδου window.prompt("someText", "defaultText").
someText: το κείμενο που προβάλλεται σαν ετικέτα του
prompt box.
defaultText: η προκαθορισμένη τιμή που θα περιέχει το
prompt box.
31 2/12/2020
Prompt Box (2/2)
Παράδειγμα: χρήση prompt box.
<!DOCTYPE html> Όταν εμφανίζεται ένα prompt box, ο

<html> χρήστης πρέπει να κάνει κλικ είτε
<body>
στο κουμπί ‘OK’ είτε στο κουμπί
<p>Click the button to demonstrate the prompt box.</p> ‘Cancel’, εφόσον εισάγει μια τιμή για
να μπορέσει να συνεχίσει.
Αν κάνει κλικ στο ‘OK’ τότε
<p id="demo"></p> επιστρέφεται η τιμή που εισήγαγε ο
<script>
χρήστης αλλιώς επιστρέφεται null.
var person = prompt("Please enter your name",
"Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
Timing Events
Με την JavaScript είναι δυνατή η εκτέλεση ενός μπλοκ κώδικα

σε συγκεκριμένα χρονικά διαστήματα (time-intervals).
Η δημιουργία timing events γίνεται με βάση δυο μεθόδους:

setInterval(…): εκτελεί μια συνάρτηση ανά συγκεκριμένα
χρονικά διαστήματα.
setTimeout(…): εκτελεί μια συνάρτηση μια μόνο φορά, εφόσον
περάσει ένας συγκεκριμένος αριθμός από milliseconds.
Οι παραπάνω μέθοδοι είναι μέθοδοι του HTML DOM Window

object.
33 2/12/2020
Μέθοδος setInterval() (1/3)
Η μέθοδος setInterval() εκτελεί μια συνάρτηση

ξανά και ξανά, ανά ένα καθορισμένο χρονικό
διάστημα (συγκεκριμένο αριθμό milliseconds).
Σύνταξη:
window.setInterval("function",millisecs);
function: η JavaScript συνάρτηση που θα εκτελεστεί.
millisecs: το χρονικό διάστημα που μεσολαβεί
ανάμεσα σε κάθε εκτέλεση.
34 2/12/2020
Παράδειγμα: χρήση μεθόδου setInterval().
<!DOCTYPE html> Με την πάροδο 3secs εμφανίζεται

<html> ένα alert box. Κάθε φορά που
<body>
περνούν 3ms από την στιγμή που ο
<p>Click "Try it". Wait 3 seconds. Your page will alert χρήστης κλείνει το alert box, αυτό
"Hello".</p> εμφανίζεται εκ νέου.
<p>When you close the alert box, an new alert box will
appear in 3 seconds.</p>
<p>This will go on forever, until you close the

window.</p>
<button
onclick="setInterval(function(){alert('Hello')},3000);"
>Try it</button>
</body>
</html>
35 2/12/2020
Παράδειγμα: χρήση μεθόδου setInterval().
<!DOCTYPE html> Με την πάροδο κάθε 1sec, εκτελείται

<html> η συνάρτηση myTimer η οποία
<body>
προβάλλει την τρέχουσα
<p>A script on this page starts this clock:</p> ημερομηνία.
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer() {
var d = new Date();
d.toLocaleTimeString();
}
</script>
</body>
</html>
36 2/12/2020
Διακοπή της εκτέλεσης της setInterval()
Η μέθοδος clearInterval() χρησιμοποιείται για να σταματήσει

την εκτέλεση μιας συνάρτησης που καθορίζεται στη μέθοδο
setInterval().
Σύνταξη:
window.clearInterval(intervalVariable);
Για να είναι δυνατή η χρήση της clearInternal(…), απαιτείται η
χρήση μιας καθολικής μεταβλητής intervalVariable κατά τη
δημιουργία της μεθόδου setInterval(…).
intervalVariable =setInterval("javascript function", milliseconds);
Στις δηλώσεις της JavaScript, το πρόθεμα "window" μπορεί να
παραληφθεί.
37 2/12/2020
Μέθοδος clearInterval()
Παράδειγμα: χρήση μεθόδου clearInterval().
<!DOCTYPE html> Μόλις ο χρήστης κάνει κλικ στο

<html> κουμπί "Stop time", η εκτέλεση της
<body>
συνάρτησης myTimer θα
<p>A script on this page starts this clock:</p> σταματήσει.
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop
time</button>
<script>
var myVar = setInterval(function(){myTimer()},1000);
function myTimer() {
var d = new Date();
d.toLocaleTimeString();
}
</script>
</body>
</html>
38 2/12/2020
Μέθοδος setTimeout() (1/2)
Η μέθοδος setTimeout() εκτελεί μια συνάρτηση μόνο

μια φορά περιμένοντας να περάσει ένα καθορισμένο
χρονικό διάστημα (συγκεκριμένο αριθμό milliseconds).
Σύνταξη:
window.setTimeout ("function",millisecs);
function: η JavaScript συνάρτηση που θα εκτελεστεί.
millisecs: το χρονικό διάστημα που πρέπει να παρέλθει για
να εκτελεστεί η συνάρτηση.
39 2/12/2020
Μέθοδος setTimeout() (2/2)
Παράδειγμα: χρήση μεθόδου setTimeout().
<!DOCTYPE html> Με την πάροδο 3secs εμφανίζεται

<html> ένα alert box. Το alert box θα
<body>
εμφανιστεί μόνο μια φορά.
<p>Click "Try it". Wait 3 seconds. The page will alert
"Hello".</p> Κλείνοντας ο χρήστης το alert box,
δε θα εμφανίζεται εκ νέου κάθε φορά
<button που περνούν 3secs, όπως γινόταν
onclick="setTimeout(function(){alert('Hello')},3000);"> με την μέθοδο setInterval(…).
Try it</button>
</body> Ας ρίξουμε μια ματιά…

</html>
40 2/12/2020
Διακοπή της εκτέλεσης της setTimeout()
Η μέθοδος clearTimeout () χρησιμοποιείται για να

σταματήσει την εκτέλεση μιας συνάρτησης που
καθορίζεται σε μια μέθοδο setTimeout().
Σύνταξη:
window.clearTimeout(timeoutVariable);
Για να είναι δυνατή η χρήση της clearTimeout(…),
απαιτείται η χρήση μιας καθολικής μεταβλητής
timeoutVariable κατά την δημιουργία της μεθόδου
setTimeout(…).
timeoutVariable =setTimeout("javascript function",
milliseconds);
41 2/12/2020
Μέθοδος clearTimeout()
Παράδειγμα: χρήση μεθόδου clearTimeout().
<!DOCTYPE html> Αν ο χρήστης κάνει κλικ στο κουμπί

<html> "Stop" πριν περάσουν 3sec από τη
<body>
στιγμή που πάτησε το κουμπί "Try
<p>Click "Try it". Wait 3 seconds. The page will alert it", η συνάρτηση δε θα εκτελεστεί.
"Hello".</p>
<p>Click "Stop" to prevent the first function to
execute.</p>
<p>(You must click "Stop" before the 3 seconds are
up.)</p>
<button onclick="myVar =
setTimeout(function(){alert('Hello')},3000)">Try
it</button>
<button onclick="clearTimeout(myVar)">Stop</button>
</body>
</html>
42 2/12/2020
Cookies
Τα cookies είναι δεδομένα που αποθηκεύονται σε μικρά

αρχεία κειμένου στον υπολογιστή ενός επισκέπτη μιας
σελίδας.
Όταν ο server στείλει μια σελίδα στον browser ενός χρήστη, η μεταξύ τους
σύνδεση τερματίζεται και ο server πλέον δε "θυμάται" πληροφορίες για
αυτόν.
Τα cookies δίνουν λύση ακριβώς σε αυτό το πρόβλημα, πως ο server να

θυμάται πληροφορίες σχετικά με έναν επισκέπτη μιας σελίδας.
Όταν ένας χρήστης επισκέπτεται μια σελίδα, το όνομα του (username) μπορεί να
αποθηκευτεί σε ένα cookie.
Επομένως, την επόμενη φορά που ο χρήστης θα επισκεφτεί τη σελίδα, το cookie
θα θυμίσει στον server το όνομα του χρήστη.
Τα cookies αποθηκεύονται σε ζεύγη "όνομα_cookie – τιμή"
Π.χ. username=John
Όταν ο browser κάνει αίτηση για μια HTML σελίδα στον server, τα cookies
που ανήκουν σε αυτή τη σελίδα προστίθενται στην αίτηση. Έτσι, ο server
παίρνει την πληροφορία που χρειάζεται για να θυμηθεί πληροφορίες για
τους χρήστες.
43 2/12/2020
Ιδιότητα document.cookie
Στη JavaScript είναι δυνατή η δημιουργία, η ανάγνωση και η

διαγραφή cookies μέσω της ιδιότητας "document.cookie".
Ιδιότητα Σύνταξη
Δημιουργία cookie document.cookie="username=John Doe";
Δημιουργία cookie με document.cookie="username=John Doe;
ημερομηνία λήξης expires=Thu, 18 Dec 2013 12:00:00 UTC";
Ανάγνωση cookie var varName = document.cookie;
Τροποποίηση cookie Με τον ίδιο τρόπο που δημιουργούμε ένα cookie.
document.cookie="username=John Smith;
expires=Thu, 18 Dec 2013 12:00:00 UTC";
Διαγραφή cookie Θέτοντας την ημερομηνία λήξης του σε μια
περασμένη ημερομηνία.
document.cookie = "username= "John Smith";
expires=Thu, 01 Jan 1970 00:00:00 UTC";
44 2/12/2020
Παράδειγμα με Cookies (1/5)
Παράδειγμα: δημιουργία ενός cookie το

οποίο θα αποθηκεύει το όνομα (username)
ενός επισκέπτη μιας σελίδας.
Την πρώτη φορά που επισκέπτεται τη σελίδα
ένας χρήστης, θα του ζητηθεί να εισάγει το όνομα
του, το οποίο θα αποθηκευτεί σε ένα cookie με
όνομα "username".
Τις επόμενες φορές που ο χρήστης θα επισκεφτεί
την σελίδα, θα λαμβάνει ένα μήνυμα
καλωσορίσματος.
45 2/12/2020
Παράδειγμα: η συνάρτηση checkCookie() ελέγχει

εάν το cookie με όνομα "username" υπάρχει ήδη για
έναν χρήστη ή όχι.
Η συνάρτηση getCookie(…) ελέγχει
function checkCookie() { αν έχει οριστεί ήδη ένα cookie με το
var username=getCookie("username"); όνομα "username".
if (username!="") {
alert("Welcome again " + username); Αν υπάρχει ήδη, επιστρέφει την τιμή
}else{ του cookie, δηλαδή το όνομα του
username = prompt("Please enter your name:",""); επισκέπτη. Αν δεν υπάρχει τότε
if (username != "" && username != null) { επιστρέφει κενό.
setCookie("username", username, 365);
} Αν υπάρχει ήδη το cookie, τότε η
} συνάρτηση checkCookie()
} προβάλλει ένα alert box με ένα
μήνυμα καλωσορίσματος.
Αν δεν υπάρχει το cookie, τότε η συνάρτηση checkCookie() θα προβάλλει
ένα prompt box, ζητώντας από τον χρήστη να εισάγει το όνομα του
(μεταβλητή username).
Έπειτα, το αποθηκεύει σε ένα cookie με όνομα "username" και τιμή την
τιμή της μεταβλητής username, μέσω της συνάρτησης setCookie. Επίσης,
αποθηκεύει το cookie για 365 μέρες. 46 2/12/2020
Παράδειγμα: η συνάρτηση setCookie(…) δημιουργεί

ένα cookie με όνομα το περιεχόμενο της
παραμέτρου cname, τιμή το περιεχόμενο της
παραμέτρου cvalue και θέτει σαν ημερομηνία λήξης
exdays μέρες από την τρέχουσα ημερομηνία.
Η συνάρτηση δέχεται ως
παραμέτρους:
function setCookie(cname, cvalue, exdays) {
var d = new Date(); cname: το όνομα του cookie.
d.setTime(d.getTime()+(exdays*24*60*60*1000)); cvalue: την τιμή του cookie.
var expires = "expires="+d.toUTCString(); exdays: το πλήθος των ημερών μέχρι
document.cookie = cname + "=" + cvalue + "; " να λήξει το cookie.
+ expires;
} Η συνάρτηση setCookie δημιουργεί
ένα cookie από την συνένωση των
cname, cvalue και exdays.
47 2/12/2020
Παράδειγμα: η συνάρτηση getCookie(…)

αναζητά την ύπαρξη cookie με όνομα "cname".
function getCookie(cname) {
Δημιουργία μεταβλητής "name" με
var name = cname + "=";
βάση την οποία θα αναζητήσει το
var ca = document.cookie.split(';');
cookie με το συγκεκριμένο όνομα
for(var i=0; i<ca.length; i++) {
"cname".
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length,c.length);
}
Διαχωρισμός του cookie της σελίδας
return "";
με βάση το σύμβολο ";" και
}
αποθήκευση των ζευγών
(όνομα_cookie=τιμή_cookie) του
cookie στον πίνακα ca.
Αν στα στοιχεία του ca βρεθεί το
όνομα του ζητούμενου cookie,
επιστρέφει την τιμή του αλλιώς
επιστρέφει κενό.
48 2/12/2020
Παράδειγμα: τοποθετώντας όλες τις συναρτήσεις μαζί…

<!DOCTYPE html>
<html>
<head>
<script>
function checkCookie() {
function setCookie(cname,cvalue,exdays) { var user=getCookie("username");
var d = new Date(); if (user != "") {
d.setTime(d.getTime() + alert("Welcome again " + user);
(exdays*24*60*60*1000)); } else {
var expires = "expires=" + d.toGMTString(); user = prompt("Please enter your name:","");
document.cookie = cname+"="+cvalue+"; if (user != "" && user != null) {
"+expires; setCookie("username", user, 30);
} }
}
function getCookie(cname) { }
var name = cname + "=";
var ca = document.cookie.split(';'); </script>
for(var i=0; i<ca.length; i++) { </head>
var c = ca[i]; <body onload="checkCookie()">
while (c.charAt(0)==' ') c = </body>
c.substring(1); </html>
if (c.indexOf(name) == 0) {
return c.substring(name.length,
c.length);
}
}
return "";
}
49 2/12/2020
Ερωτήσεις
Το υλικό των διαφανειών προήλθε από τη σημαντική συνεισφορά της Β. Γκαντούνα, MSc.
50 2/12/2020

Web Technologies Lecture 05

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

Web Technologies Lecture 05

Uploaded by

Copyright:

Available Formats

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΛΟΠΟΝΝΗΣΟΥ

ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ

Τζήμας Γιάννης, Αναπληρωτής Καθηγητής

ΑΝΑΠΤΥΞΗ ΣΥΣΤΗΜΑΤΩΝ ΠΑΓΚΟΣΜΙΟΥ ΙΣΤΟΥ

Ιεραρχία αντικειμένων του JavaScript BOM (Browser Object

Μέθοδοι και ιδιότητες των

Είδη popup boxes.

Το Browser Object Model (BOM) είναι το μέσο με

Ουσιαστικά, είναι ένα σύνολο από αντικείμενα

Το "window object" είναι το κορυφαίο αντικείμενο στην

Όλες οι καθολικές μεταβλητές και

Αντικείμενα της ιεραρχίας του BOM.

Το "navigator object" αναπαριστά πληροφορίες

Το "screen object" αναπαριστά πληροφορίες

Το "history object" αναπαριστά πληροφορίες

Το "location object" αναπαριστά πληροφορίες

Το "document object" αναπαριστά την τρέχουσα

Το "document object" του HTML DOM είναι ιδιότητα του

Παράδειγμα: χρήση του "document object" σαν ιδιότητα

Το "window object" έχει ιδιότητες που μπορούν να

Για τους Internet Explorer, Chrome, Firefox, Opera

window.innerHeight το εσωτερικό (inner) ύψος του παραθύρου, που

Για τις εκδόσεις του Internet Explorer 5, 6, 7

document.documentElement.clientHeight το ύψος του παραθύρου.

Μια πρακτική λύση η οποία επιστρέφει το πλάτος και το

<!DOCTYPE html> Επιστρέφει το

var h = window.innerHeight || document.documentElement.clientHeight

Εκτός από ιδιότητες, το "window object"

window.open() άνοιγμα ενός νέου παραθύρου.

window.close() κλείσιμο του τρέχοντος παραθύρου.

window.moveTo() μετακίνηση του τρέχοντος παραθύρου.

window.resizeTo() αλλαγή μεγέθους του τρέχοντος παραθύρου.

Το "window.screen" object περιέχει πληροφορίες σχετικά με

screen.width: το πλάτος της οθόνης του επισκέπτη μιας σελίδας σε

screen.availWidth: το πλάτος της οθόνης του επισκέπτη μιας σελίδας σε pixels

Ιδιότητες του "window.screen" object:

screen.colorDepth: Ο αριθμός των bits που χρησιμοποιούνται για την

Παράδειγμα: χρήση ιδιοτήτων του

To "window.location" object χρησιμοποιείται:

Στις δηλώσεις της JavaScript μπορεί να παραληφθεί το

Ιδιότητες του "window.location" object:

Παράδειγμα: χρήση ιδιοτήτων του "window.location"

<p>Click the button to display info about the current URL.</p>

<button onclick="myFunction()">Try it</button>

To "window.history" object περιέχει πληροφορίες σχετικά με

Για λόγους προστασίας της ιδιωτικότητας (privacy) των

Κάποιες ενδεικτικές μέθοδοι του

Παράδειγμα: δημιουργία δυο κουμπιών "back" και "forward"

<input type="button" value="Back" onclick="goBack()">

To "window.navigator" object περιέχει

Ιδιότητες του "window.navigator" object:

Παράδειγμα: χρήση ιδιοτήτων του

<button onclick="myFunction()">Try it</button>

Έξοδος προηγούμενου παραδείγματος:

Cookies enabled = true

Browser engine = Gecko

Appversion = 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

userAgent = Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like

Η JavaScript διαθέτει τρεις τύπους popup boxes:

Τα popup boxes δημιουργούνται μέσω των

Με τη χρήση του alert box είμαστε σίγουροι

Η δημιουργία ενός alert box γίνεται μέσω της

Παράδειγμα: χρήση alert box.

<!DOCTYPE html> Όταν εμφανίζεται ένα alert box,