Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 4: JavaScript Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας.

Παρουσίαση με θέμα: "Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 4: JavaScript Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας."— Μεταγράφημα παρουσίασης:

1 Προγραμματισμός Εφαρμογών Διαδικτύου Ενότητα 4: JavaScript Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας

2 Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. 2

3 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 3

4 Σκοποί ενότητας Να περιγράφει βασικές έννοιες της Javascript. Να προσθέτει κώδικα Js σε HTML. Να ορίζει μεταβλητές και τύπους δεδομένων. Να περιγράφει αναλυτικά το μοντέλο του browser ΒΟΜ. Προγραμματισμός Εφαρμογών Διαδικτύου 4

5 Περιεχόμενα ενότητας  Η γλώσσα JavaScript. Η γλώσσα JavaScript.  Μεταβλητές και Τύποι Δεδομένων. Μεταβλητές και Τύποι Δεδομένων.  Κλάσεις. Κλάσεις.  Τελεστές. Τελεστές.  Εντολές επιλογής – επανάληψης. Εντολές επιλογής – επανάληψης.  Μοντέλο browser ΒΟΜ. Μοντέλο browser ΒΟΜ.  Κουτί Διαλόγου. Κουτί Διαλόγου.  Αντικείμενο document. Αντικείμενο document.  Κόμβοι – ιδιότητες εγγράφου. Κόμβοι – ιδιότητες εγγράφου.  Πίνακες. Πίνακες. Προγραμματισμός Εφαρμογών Διαδικτύου 5  Συναρτήσεις. Συναρτήσεις.  Γεγονότα. Γεγονότα.  Καθορισμός Διαχειριστή. Καθορισμός Διαχειριστή.  Πληροφορίες γεγονότος. Πληροφορίες γεγονότος.  Dynamic HTML – Javascript – Φόρμες. Dynamic HTML – Javascript – Φόρμες.  Web Storage. Web Storage.  Screen – History – Location – Navigator - Date Screen – History – Location – Navigator - Date

6 H Γλώσσα JavaScript (1/2) Η JavaScript (JS) είναι – Διερμηνευόμενη γλώσσα με δυνατότητες αντικειμενοστραφούς προγραμματισμού – Ο πυρήνας της JS μοιάζει με τις C, C++, και Java – Ωστόσο η JS έχει χαλαρό σύστημα τύπων δεδομένων Η JS χρησιμοποιείται κυρίως στους Web browsers – Client-Side JS – Ο πυρήνας επεκτείνεται με αντικείμενα που επιτρέπουν Την αλληλεπίδραση με το χρήστη Τον έλεγχο του παραθύρου του browser (BOM) και του εγγράφου (DOM) Προγραμματισμός Εφαρμογών Διαδικτύου 6

7 Η Γλώσσα JavaScript (2/2) Επεκτάσεις – JS + CSS = DHTML – JS + HTTP = AJAX Θέματα προτυποίησης – Ο πυρήνας είναι προτυποποιημένος – Το client-side κομμάτι είναι εν μέρει Υπάρχουν θέματα συμβατότητας μεταξύ browsers (ΙΕ) Θέματα ασφάλειας – Δεν υποστηρίζει ανάγνωση, εγγραφή και διαγραφή αρχείων ή φακέλων στον υπολογιστή του πελάτη – Δεν υποστηρίζει δικτυακή επικοινωνία μέσω sockets Προγραμματισμός Εφαρμογών Διαδικτύου 7

8 Προσθήκη JavaScript σε HTML (1/2) Ενσωματωμένος κώδικας – // <![CDATA[... Κώδικας JavaScript... // ]]> Ένα αρχείο HTML μπορεί να περιέχει πολλά στοιχεία script σε οποιοδήποτε σημείο του – Εκτελούνται με τη σειρά που εμφανίζονται στο κείμενο – Αποτελούν τμήμα του ίδιου προγράμματος JavaScript – Είναι προτιμότερο να υπάρχει μόνο ένα τμήμα στην επικεφαλίδα της σελίδας ( ) – Εναλλακτικά για λόγους απόδοσης στο τέλος τoυ body Προγραμματισμός Εφαρμογών Διαδικτύου 8

9 Προσθήκη JavaScript σε HTML (2/2) Εξωτερικός κώδικας -<script src="scripts/util.js" type="text/javascript"> Πλεονεκτήματα Απλοποίηση των αρχείων HTML. Κατάλληλο για κώδικα που τρέχει σε πολλές σελίδες - Κεντρική διαχείριση του κώδικα. - Ο browser μπορεί να κρατήσει τον κώδικα στην cache. Μπορεί να εκτελεστεί κώδικας άλλου server (src="URL") - Σε αυτό στηρίζεται η διαδικτυακή διαφήμιση. - Προσοχή γιατί δίνεται ο έλεγχος της σελίδας σε απομακρυσμένο και ενδεχομένως κακόβουλο κώδικα. Προγραμματισμός Εφαρμογών Διαδικτύου 9

10 Παράδειγμα: Google Analytics <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> // <![CDATA[ _uacct = "UA-XXXXXX-X"; urchinTracker( ); // ]]> Προγραμματισμός Εφαρμογών Διαδικτύου 10

11 Unobtrusive JavaScript (1/2) Είναι καλή πρακτική ο κώδικας JavaScript να είναι "διακριτικός" (unobtrusive) – Ο κώδικας JavaScript δεν θα πρέπει να μπλέκεται με τον κώδικα HTML – Η σελίδα δεν θα πρέπει να παρουσιάζει σφάλματα σε περίπτωση που η JavaScript είναι απενεργοποιημένη – Δεν θα πρέπει να παρακωλύει την προσβασιμότητα των ιστοσελίδων, δηλαδή τη χρήση τους από άτομα με ειδικές ανάγκες Προγραμματισμός Εφαρμογών Διαδικτύου 11

12 Unobtrusive JavaScript (2/2) Η περίπτωση του facebook - Μέχρι τον Δεκέμβρη του 2009 δεν υπήρχε πρόβλημα αν η JavaScript ήταν απενεργοποιημένη. - Από τον Δεκέμβρη του 2010 δεν μπορείς να κάνεις login χωρίς JavaScript (σε παραπέμπει στην έκδοση για κινητά) Προγραμματισμός Εφαρμογών Διαδικτύου 12

13 Προτάσεις Τελειώνουν με αλλαγή γραμμής ή ερωτηματικό – statement1 statement2 – statement1; statement2; Προτείνεται η χρήση και των δύο – statement1; statement2; – Η απλή αλλαγή γραμμής δημιουργεί πρόβλημα αν χρησιμοποιηθούν προγράμματα συμπίεσης του κώδικα JavaScript για βελτίωση της απόδοσης Προγραμματισμός Εφαρμογών Διαδικτύου 13

14 Σχόλια Γραμμής // Αυτό είναι σχόλιο γραμμής Πολλών γραμμών /* Αυτό είναι σχόλιο πολλών γραμμών */ 10 Προγραμματισμός Εφαρμογών Διαδικτύου 14

15 Μεταβλητές & Τύποι Δεδομένων (1/3) Αναγνωριστικά μεταβλητών – Γράμματα, αριθμοί και οι χαρακτήρες _ και $ – Ο πρώτος χαρακτήρας γράμμα ή _ ή $ – Κεφαλαία και μικρά έχουν διαφορά – Totalnum, totalNum, TotalNum Δήλωση μεταβλητών – Με τη χρήση της λέξης κλειδί var – Δεν είναι απαραίτητο να δηλωθεί μια μεταβλητή πριν να χρησιμοποιηθεί (προαιρετικό το var) Προγραμματισμός Εφαρμογών Διαδικτύου 15

16 Μεταβλητές & Τύποι Δεδομένων (2/3) Τύποι δεδομένων – Αριθμοί: 3, 25, 1.414 – Λογικές τιμές: true, false – Συμβολοσειρές: "συμβολοσειρά", 'συμβολοσειρά' – Πίνακες – Αντικείμενα (πρόσβαση σε ιδιότητες με τελεστή) Ανάθεση τιμής – Με τον τελεστή = Χαλαρό/δυναμικό σύστημα τύπων δεδομένων – total = 31; – total = "hello world!"; Προγραμματισμός Εφαρμογών Διαδικτύου 16

17 Μεταβλητές & Τύποι Δεδομένων (3/3) Απροσδιόριστες μεταβλητές (undefined) – Δεν έχουν δηλωθεί, ή έχουν δηλωθεί με var, αλλά δεν έχουν ακόμα λάβει κάποια τιμή Η λέξη κλειδί null – Ειδική τιμή, η οποία δηλώνει ότι η μεταβλητή δεν έχει λάβει ακόμα κάποια τιμή (αντικείμενα) Σταθερές – const CURRENT_MONTH = 11; Προγραμματισμός Εφαρμογών Διαδικτύου 17

18 Κλάσεις Περιτύλιξης Κλάσεις περιτύλιξης των βασικών τύπων – String, Boolean, Number – Επιστροφή τιμής με τη μέθοδο valueOf() Boolean – var boolFlag1 = new Boolean(false); – var boolFlag2 = new Boolean(true); Number – var aNum = new Number(3.2); Προγραμματισμός Εφαρμογών Διαδικτύου 18

19 H Κλάση για Συμβολοσειρές Δημιουργία αντικειμένου – test2 = new String('μια συμβολοσειρά'); Ιδιότητα length – Μήκος τους αλφαριθμητικού Μερικές χρήσιμες μέθοδοι – toUpperCase(), μετατροπή σε κεφαλαία – toLowerCase(), μετατροπή σε πεζά – substring(Start, End), τμήμα του αλφαριθμητικού – charAt(Index), χαρακτήρας – indexOf(Substring), εύρεση τμήματος – split(String), επιστρέφει πίνακα με τμήματα της Προγραμματισμός Εφαρμογών Διαδικτύου 19

20 Τελεστές (1/3) Αριθμητικοί τελεστές result = 5 + 7; score = score – 1; total = quantity * price; average = sum / 4; remainder = sum % 4; Αριθμητικοί τελεστές μαζί με ανάθεση result += 7; score -= 1; total *= price; Προγραμματισμός Εφαρμογών Διαδικτύου 20

21 Τελεστές (2/3) Μοναδιαίοι τελεστές αύξησης και μείωσης tries++; ++tries; tries--; --tries; Συνένωση αλφαριθμητικών (+) message = "this is " + " a test"; Προσοχή στη δυναμικότητα/χαλαρότητα τύπων var newValue = 3.5 * 2.0; // 7 var newValue = 3.5 * "2.0"; // 7 var newValue = "3.5" * "2.0"; // 7 var newValue = 3.5 + "2.0"; // "3.52.0" Προγραμματισμός Εφαρμογών Διαδικτύου 21

22 Τελεστές (3/3) Τελεστές σύγκρισης ==, !=,, >=, <=, ==, !== (έλεγχος τόσο της τιμής όσο και του τύπου) Λογικοί Τελεστές &&, ||, ! Προγραμματισμός Εφαρμογών Διαδικτύου 22

23 Εντολές Επιλογής (1/2) if / else – if (phone == "" || email == "") ok = false; – if (age < 18) m = "ακατάλληλο"; else m = "κατάλληλο"; Συντομογραφία – m = (age < 18) ? "ακατάλληλο" : "κατάλληλο"; Προγραμματισμός Εφαρμογών Διαδικτύου 23

24 Εντολές Επιλογής (2/2) switch g = 3; switch(n) { case 1: m = g; break; case 2: m = g*g; break; case 3: m = g*g*g; break; default: m = 0; } Προγραμματισμός Εφαρμογών Διαδικτύου 24

25 Επαναλήψεις (1/2) For – for (var i=1; i<=10; i++) { // Εντολές; } While – var i = 1; while (i <= 10) { // Εντολές; i++; } Προγραμματισμός Εφαρμογών Διαδικτύου 25

26 Επαναλήψεις (2/2) Do / While – var i = 1; do { // εντολές i++; } while (i <= 10); Break / Continue - break για έξοδο από loop - continue για συνέχεια loop Προγραμματισμός Εφαρμογών Διαδικτύου 26

27 Το Μοντέλο του Browser (BOM) Προγραμματισμός Εφαρμογών Διαδικτύου 27

28 Το Αντικείμενο Window Αντιπροσωπεύει το παράθυρο ενός web browser Είναι προσβάσιμο μέσω της προκαθορισμένης καθολικής μεταβλητής window ενός προγράμματος Οι καθολικές μεταβλητές αποτελούν ιδιότητες του αντικειμένου window και το αντίθετο – var answer = 42; – window.answer = 42; Μέθοδοι του αντικειμένου window μπορούν να κληθούν απευθείας στο πρόγραμμα Προγραμματισμός Εφαρμογών Διαδικτύου 28

29 Κουτιά Διαλόγου - Dialog Boxes window.alert(String message) – Εμφανίζει ένα κουτί διαλόγου, το οποίο απλά περιέχει ένα μήνυμα και ένα κουμπί ΟΚ για το κλείσιμο του window.confirm(String message) – Εμφανίζει ένα κουτί διαλόγου, το οποίο περιέχει ένα μήνυμα και δύο κουμπιά ΟΚ και Cancel – Eπιστρέφει τιμή true ή false αντίστοιχα window.prompt(String message, [String default]) – Εμφανίζει ένα κουτί διαλόγου, το οποίο περιέχει ένα μήνυμα, δύο κουμπιά ΟΚ και Cancel και ένα πεδίο κειμένου (το οποίο προαιρετικά περιέχει την default) – Επιστρέφει την τιμή που έδωσε ο χρήστης ή null αν επιλέξει το κουμπί Cancel Προγραμματισμός Εφαρμογών Διαδικτύου 29

30 Χρήση Κουτιών Διαλόγου Περιορισμένη, γιατί ενοχλεί τον μέσο χρήστη καθώς του παίρνει τον έλεγχο και θυμίζει διαφημίσεις Κυρίως για απλό έλεγχο της ορθής λειτουργίας του προγράμματος (debugging) Προγραμματισμός Εφαρμογών Διαδικτύου 30

31 Το Αντικείμενο Document Τι αναπαριστά; – Tην ιστοσελίδα που φορτώνεται στο παράθυρο. Που είναι αποθηκευμένο; – Στην ιδιότητα document του αντικειμένου window. Document Object Model (DOM) – Τρόπος αναπαράστασης και αλληλεπίδρασης με τα αντικείμενα από τα οποία απαρτίζεται μια ιστοσελίδα. Εκδόσεις DOM – DOM Level 0 (Netscape 2, Netscape 3). – IE 4 DOM (IE 4). – Netscape 4 DOM (Netscape 4). – W3C DOM (IE 5, 6, 7, Firefox). Προγραμματισμός Εφαρμογών Διαδικτύου 31

32 Οι Κόμβοι του Εγγράφου Απόλυτο μέγεθος – Με μονάδες μέτρησης ίντσες (in), εκατοστά (cm), χιλιοστά (mm), points (pt), picas (pc) h1 {font-size: 2cm} – Με λέξεις κλειδιά (προκαθορισμένα μεγέθη) xx-small, x-small, small, medium, large, x-large, xx-large h1 {font-size: x-large} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: – Τα απόλυτα μεγέθη θα πρέπει να αποφεύγονται γιατί: επιβάλλονται στις ρυθμίσεις μεγέθους που πιθανώς έχει ορίζει στον browser, χρήστης με προβλήματα όρασης το αποτέλεσμα επηρεάζεται από τα χαρακτηριστικά της συσκευής (τα pixels είναι μικρότερα στα smartphones απ'ότι στην tv) Προγραμματισμός Εφαρμογών Διαδικτύου 32

33 Επιλογή Κόμβων Σχετικό μέγεθος – Σε pixel (εξαρτάται από την ανάλυση οθόνης) p {font-size: 16px} – Σχετικό με το default μέγεθος χαρακτήρων στο σημείο που γράφουμε. h2 {font-size: 1.5em}.myVeryBig {font-size: 400%} Τι λένε οι ειδικοί Επικοινωνίας Ανθρώπου - Η/Υ: – Η χρήση em συσχετίζει ένα μέγεθος με άλλο (με το default της περιοχής). Αυτό επιτρέπει στήσιμο σελίδας με όλα τα μεγέθη να εξαρτώνται μεταξύ τους κάτι που οδηγεί σε σελίδες που εύκολα μετατρέπονται (ή είναι έτοιμες) για προβολή σε οθόνες κάθε μεγέθους. – Αλλάζουμε το default μέγεθος και όλα αναπροσαρμόζονται! Προγραμματισμός Εφαρμογών Διαδικτύου 33

34 Μέθοδος Write, Ιδιότητες Εγγράφου Η ιδιότητα font-style.normal {font-style: normal}.emph1 {font-style: italic}.emph2 {font-style: oblique} Θεωρητική διαφορά italic και oblique – Τα italic σχεδιάζονται απ’ την αρχή από άνθρωπο – Τα oblique παράγονται αυτόματα από τον υπολογιστή αν δεν υπάρχει η italic, θα παραχθεί η oblique Που χρειάζεται το στυλ normal; – Σε περίπτωση που θέλουμε να αλλάξουμε το στυλ μέσα σε μια ενότητα κειμένου με στυλ italic ή oblique Προγραμματισμός Εφαρμογών Διαδικτύου 34

35 Πίνακες H ιδιότητα font-weight.bold {font-weight: bold}.normal {font-weight: normal} Ορισμός του βάρους με τιμές – Πολλαπλάσια του 100 από 100 έως 900 Η τιμή 400 αντιστοιχεί στο φυσιολογικό βάρος Η τιμή 700 αντιστοιχεί στο έντονο βάρος – Π.χ..extrastrong {font-weight: 900} Ορισμός του βάρους σε σχέση με το γονέα –.stronger {font-weight: bolder} –.lighter {font-weight: lighter} Προγραμματισμός Εφαρμογών Διαδικτύου 35

36 Μέθοδοι και Ιδιότητες Πινάκων Η ιδιότητα text-decoration.underline {text-decoration: underline}.overline {text-decoration: overline}.strike {text-decoration: line-through}.blink {text-decoration: blink}.none {text-decoration: none} Παράδειγμα a:link, a:visited {text-decoration: none} – Κάνει όλους τους συνδέσμους (είτε τους έχουμε επισκεφτεί είτε όχι) να μην έχουν υπογράμμιση. Προγραμματισμός Εφαρμογών Διαδικτύου 36

37 Στατικές Συναρτήσεις Η ιδιότητα font-variant.sc {font-variant: small-caps}.normalvariant {font-variant: normal} Η ιδιότητα text-transform.capitalize {text-transform: capitalize}.uppercase {text-transform: uppercase}.lowercase {text-transform: lowercase}.none {text-transform: none} Προγραμματισμός Εφαρμογών Διαδικτύου 37

38 Συναρτήσεις & Εμβέλεια Μεταβλητών Η ιδιότητα text-align – left, right, center, justify Εφαρμόζεται μόνο σε στοιχεία τύπου block που παίρνουν μέσα τους κείμενο. – Δεν έχει νόημα να στοιχίσουμε in-line κείμενο (π.χ. δυο λέξεις στη ροή μιας παραγράφου)!!!!!!! Πρέπει αυτές να είναι μόνες τους μια παράγραφος και να στοιχίσουμε την παράγραφο. Προγραμματισμός Εφαρμογών Διαδικτύου 38

39 Οι Συναρτήσεις ως Αντικείμενα H ιδιότητα word-spacing – h1 {word-spacing: 3em;} Η ιδιότητα letter-spacing – p {letter-spacing: 2px;} Για επιστροφή στην κανονική απόσταση – Θέτουμε την τιμή 0 ή normal στην απόσταση Αρνητικές τιμές – Έχουν ως αποτέλεσμα την επικάλυψη χαρακτήρων Οι ιδιότητες αυτές κληρονομούνται στα παιδιά – Στις σχετικές μονάδες κληρονομείται η προκύπτουσα τιμή και όχι η σχέση με τη default γραμματοσειρά. Προγραμματισμός Εφαρμογών Διαδικτύου 39

40 Διαχείριση Γεγονότων Για να φαίνονται όλα τα κενά και οι αλλαγές γραμμών όπως και στον κώδικα – p {white-space: pre;} Για να μην γίνεται αλλαγή γραμμής στα κενά – p {white-space: nowrap;} – Π.χ. μέσα σε κελί πίνακα Για την φυσιολογική θεώρηση των κενών και των αλλαγών γραμμών (τα επιπλέον αγνοούνται) – p {white-space: normal;} Προγραμματισμός Εφαρμογών Διαδικτύου 40

41 Μερικά Γεγονότα Η ιδιότητα text-indent – Σε σχέση με το μέγεθος των χαρακτήρων p {text-indent: 3.5em} – Απόλυτη τιμή p {text-indent: 10px} – Σε σχέση με το πλάτος του στοιχείου γονέα p {text-indent: 10%} Θετικές τιμές για την ιδιότητα δημιουργούν την κλασική αριστερή εσοχή πρώτης γραμμής παραγράφου. Αρνητικές τιμές δημιουργούν την κρεμαστή εσοχή πρώτης γραμμής (δηλαδή η πρώτη σειρά ξεκινά αριστερότερα από τις υπόλοιπες!). Για αφαίρεση της εσοχής σε κάποιο στοιχείο, θέτουμε στην ιδιότητα την τιμή 0. Προγραμματισμός Εφαρμογών Διαδικτύου 41

42 Καθορισμός Διαχειριστή Inline (1/2) Σε σχέση με το μέγεθος της γραμματοσειράς – Το μέγεθος προκύπτει από την τιμή επί την σχετική μονάδα μέτρησης. p {line-height: 150%} p {line-height: 1.5em} – Το μέγεθος προκύπτει από την τιμή επί το μέγεθος γραμμάτων (font-height) που ισχύει: p {line-height: 1.5} Απόλυτο μέγεθος σε οποιαδήποτε, μη σχετική, μονάδα μέτρησης – p {line-height: 0.3in} Προγραμματισμός Εφαρμογών Διαδικτύου 42

43 Καθορισμός Διαχειριστή Inline (2/2) Κάθε στοιχείο θεωρείται ως παραλληλόγραμμο κουτί, το οποίο περιέχει τις εξής περιοχές: – περιεχόμενο (content), το οποίο περιβάλλεται από το – παραγέμισμα (padding), το οποίο περιβάλλεται από το – περίγραμμα (border), το οποίο περιβάλλεται από το – περιθώριο (margin) Χαρακτηριστικά του μοντέλου – Τo margin είναι πάντα διάφανο και δεν περιορίζονται απαραίτητα εντός του πατρικού html στοιχείου. Βλ. άσκηση 03 – το κενό μεταξύ main και footer – Το border μπορεί να έχει διάφορα στυλ. – Τυχόν φόντο (background) σε στοιχείο, επικαλύπτει και την περιοχή του padding (πρακτικά, όλα τα εντός border) Προγραμματισμός Εφαρμογών Διαδικτύου 43

44 Καθορισμός Διαχειριστή Mέσω DOM Μέσω του DOM – ΑΠΘ function doIt() { alert("κλικ!"); } elem = document.getElementById("link1"); elem.onclick = doIt; Πλεονεκτήματα – Διαχωρισμός κώδικα HTML και JavaScript – Ο κώδικας διαχείρισης μπορεί να αλλάζει δυναμικά Προγραμματισμός Εφαρμογών Διαδικτύου 44

45 Γεγονότα και η Λέξη-Κλειδί this H λέξη-κλειδί this – Αναπαριστά το αντικείμενο στο οποίο ανήκει η τρέχουσα μέθοδος Για μια καθολική μέθοδο αντιστοιχεί στο αντικείμενο window Για μια μέθοδο οποιασδήποτε κλάσης, αντιστοιχεί στο αντικείμενο που την κάλεσε Για ένα διαχειριστή γεγονότων, αντιστοιχεί στο στοιχείο που λαμβάνει το γεγονός Προγραμματισμός Εφαρμογών Διαδικτύου 45

46 Επιστροφή τιμής από Διαχειριστή Έχει νόημα στα παρακάτω γεγονότα – onclick, onmousedown, onmouseup – onkeydown, onkeypress – οnsubmit, onreset Η επιστροφή τιμής false ακυρώνει την αναμενόμενη ενέργεια – Δεν ακολουθείται κάποιος σύνδεσμος σε onclick – Δεν γίνεται submit η φόρμα – … Προγραμματισμός Εφαρμογών Διαδικτύου 46

47 Πληροφορίες Γεγονότος Πολλές φορές ένα γεγονός συνοδεύεται από πληροφορίες σχετικά με αυτό – Π.χ. Συντεταγμένες όπου έγινε ένα γεγονός click – Αυτές αποθηκεύονται σε αντικείμενο Event Ασυμβατότητες μεταξύ IE/{Firefox, Opera, Safari} – Πρόσβαση από IE Ως ιδιότητα event στο αντικείμενο window – Πρόσβαση από Firefox, Opera, Safari Ως παράμετρος στη συνάρτηση που διαχειρίζεται το γεγονός Προγραμματισμός Εφαρμογών Διαδικτύου 47

48 Dynamic HTML –Χρήση JavaScript για χειρισμό γεγονότων –Χρήση CSS για έλεγχο χωροθέτησης και εμφάνισης jQuery –Μια βιβλιοθήκη JavaScript με συναρτήσεις για εύκολη ανάπτυξη εντυπωσιακών αλληλεπιδράσεων Άλλες βιβλιοθήκες –YUI library Προγραμματισμός Εφαρμογών Διαδικτύου 48

49 JavaScript και Φόρμες Δυναμικές φόρμες – Αλλαγή των περιεχομένων μιας φόρμας βάσει της αλληλεπίδρασης του χρήστη. Επικύρωση φόρμας – Σε πραγματικό χρόνο (οnchange, onblur), όπου ο χρήστης βλέπει άμεσα την απόκριση της σελίδας με βάση την αλληλεπίδραση με κάποιο στοιχείο. – Κατά δέσμη (οnsubmit), όπου γίνεται ένας τελευταίος έλεγχος όλων των στοιχείων πριν την αποστολή τους. Προγραμματισμός Εφαρμογών Διαδικτύου 49

50 Web Storage Web storage – Προδιαγραφές από το W3C για αποθήκευση ζευγών κλειδιού-τιμής στον πελάτη – Τμήμα των προδιαγραφών της HTML 5 Διαφορές με cookies – Δεν έχουν τον περιορισμό μεγέθους των cookies (4 Kb) – Δεν αποστέλλονται στον server μέσω του HTTP Το πρόβλημα με τα δύο παράθυρα στο ίδιο site Αντικείμενα – sessionStorage – localStorage Προγραμματισμός Εφαρμογών Διαδικτύου 50

51 Το Αντικείμενο Screen Χρησιμότητα – Παρέχει πληροφορίες σχετικά με την οθόνη του χρήστη Ιδιότητες – width – height Προγραμματισμός Εφαρμογών Διαδικτύου 51

52 Το Αντικείμενο History Το αντικείμενο History – Μοντελοποιεί το ιστορικό πλοήγησης του browser ως έναν πίνακα με τα URL τα οποία επισκέφτηκε. – Για λόγους ιδιωτικότητας και ασφάλειας, δεν υπάρχει μέθοδος που να αποκαλύπτει τα URLs, τα οποία βρίσκονται στο ιστορικό. Μέθοδοι του αντικειμένου –.back(), προηγούμενη σελίδα στο ιστορικό. –.forward(), επόμενη σελίδα στο ιστορικό. –.go(), παίρνει ως παράμετρο τον αριθμό των σελίδων προς τα εμπρός (αν είναι θετικός) ή πίσω (αν είναι αρνητικός) στο ιστορικό του browser. Προγραμματισμός Εφαρμογών Διαδικτύου 52

53 Το Αντικείμενο Location (1/2) Τι αναπαριστά; – Το URL του εγγράφου που απεικονίζεται στο browser Ιδιότητες – href, ολόκληρο το URL – protocol, το πρωτόκολλο – host, το όνομα του υπολογιστή – pathname, το μονοπάτι μέχρι και το αρχείο – search, το κομμάτι μετά το ? με τις μεταβλητές GET Προγραμματισμός Εφαρμογών Διαδικτύου 53

54 Το Αντικείμενο Location (2/2) reload() – Φορτώνει ξανά την τρέχουσα σελίδα location = URL ή location.href = URL – Φορτώνει μια νέα σελίδα – Δημιουργεί νέα καταχώρηση στο ιστορικό replace(String url) – Αντικαθιστά την τρέχουσα σελίδα με μια άλλη – Δεν δημιουργεί νέα καταχώρηση στο ιστορικό επισκέψεων, αλλά αντικαθιστά την τρέχουσα Προγραμματισμός Εφαρμογών Διαδικτύου 54

55 Το Αντικείμενο Navigator Χρησιμότητα – Παρέχει πληροφορίες για τον browser. Ιδιότητες – appName, όνομα του browser. – appVersion, εσωτερική έκδοση του browser. – userAgent, συμβολοσειρά που αποστέλλει o browser με την επικεφαλίδα HTTP. – appCodeName, το κωδικό όνομα του browser. – platform, η πλατφόρμα εκτέλεσης του browser. – … Προγραμματισμός Εφαρμογών Διαδικτύου 55

56 Η Κλάση Date Τρέχουσα ημερομηνία και ώρα – var dtNow = new Date(); Συγκεκριμένη ημερομηνία ή/και ώρα – var date1 = new Date(1997,11,24); – var date2 = new Date(1997,11,25,19,30,30,30) Μέθοδοι get και set – Π.χ. getYear, setMinutes Μέθοδοι για μορφοποίηση – Π.χ. toString, toGMTString Παραδείγματα χρήσης – Τοπική ώρα του χρήστη για καταχώρηση παραγγελίας – GMT ώρα για μια καταχώρηση σε blog Προγραμματισμός Εφαρμογών Διαδικτύου 56

57 Τέλος Ενότητας