TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο

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

Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons 2

Δυναμικό Περιεχόμενο Ανάπτυξη Δικτυακών Τόπων 2

Ενώ η HTML σας δίνει τη δυνατότητα να δημιουργείτε στατικές σελίδες, των οποίων το περιεχόμενο δεν μεταβάλλεται, η JavaScript επεκτείνει το δυναμικό της HTML, επιτρέποντάς σας να δημιουργείτε δυναμικές σελίδες, οι οποίες είτε αλλάζουν είτε ανταποκρίνονται στην είσοδο που λαμβάνουν από τον χρήστη. Ο συνδυασμός της JavaScript με Φύλλα στυλ με δυνατότητα επικάλυψης μας παρέχει αυτό που αποκαλείται Δυναμική HTML (Dynamic HTML ή DHTML) Ανάπτυξη Δικτυακών Τόπων 3

1. Η Σημασία και οι Χρήσεις της JavaScript και της DHTML σε Ιστοσελίδες Ανάπτυξη Δικτυακών Τόπων 4

Η JavaScript δεν είναι ίδια με την Java. Ο κωδικός της Java μπορεί να εκτελείται αυτόνομα, σαν μια μίνι εφαρμογή, ενώ η JavaScript είναι ενσωματωμένη σε εφαρμογές web browser και δεν μπορεί να υπάρξει αυτόνομα. Ουσιαστικά είναι ένα σύνολο από εντολές προγραμματισμού οι οποίες ομαδοποιούνται σε scripts και δίνουν οδηγίες σε μια εφαρμογή browser. Ο κώδικας της JavaScript τοποθετείται μέσα στον HTML κώδικα της σελίδας σας. Ανάπτυξη Δικτυακών Τόπων 5

Για το πώς δείχνει ο κώδικας της JavaScript ακολουθεί ένα απλό παράδειγμα: Ανάπτυξη Δικτυακών Τόπων 6

Το ζεύγος αρχικού/τελικού tag script είναι HTML κώδικας ενώ οτιδήποτε περιέχεται ανάμεσά τους είναι γραμμένο σε JavaScript. Διαφορές της JavaScript με την HTML: Η JavaScript κάνει διάκριση μεταξύ κεφαλαίων και πεζών χαρακτήρων, ορισμένες μορφές της HTML όχι. Στη JavaScript τα εισαγωγικά είναι απαιτούμενα, σε ορισμένες μορφές της HTML τα εισαγωγικά είναι προαιρετικά. Η JavaScript έχει συγκεκριμένους κανόνες μορφοποίησης οι οποίοι πρέπει να τηρούνται, οι περισσότερες μορφές της HTML είναι ελαστικές όσον αφορά τα κενά διαστήματα και τη μορφοποίηση. Ανάπτυξη Δικτυακών Τόπων 7

1.1 Αντιμετώπιση Προβλημάτων σε Κώδικα JavaScript Πληκτρολογήστε το javascript: στο πεδίο διεύθυνσης της εφαρμογής browser mozilla firefox και θα εμφανιστεί μια κονσόλα με πληροφορίες για τυχόν σφάλματα. Ανάπτυξη Δικτυακών Τόπων 8

1.2 Απόκρυψη των Scripts Κάποια από τα scripts που είναι γραμμένα σε JavaScript μπαίνουν σαν σχόλια στον HTML κώδικα και αυτό γίνεται ώστε οι παλαιότεροι browsers που δεν κατανοούν την JavaScript να παρακάμπτουν το script χωρίς να παράγουν σφάλματα. Ανάπτυξη Δικτυακών Τόπων 9

1.3 Ορολογία Για να χρησιμοποιήσετε κώδικα JavaScript θα πρέπει να μάθετε αρκετούς καινούριους όρους. Ανάπτυξη Δικτυακών Τόπων 10

1.3.1 Αντικείμενα και Μέθοδοι Για να κατανοήσετε τι σημαίνουν οι όροι αντικείμενο και μέθοδος θα δούμε το παρακάτω παράδειγμα. Παράδειγμα: Αντικείμενο είναι οτιδήποτε μπορεί να χειριστεί ή να αλλάξει το script. Σε αυτό το παράδειγμα το document είναι το αντικείμενο και λέει στον browser ότι ο κώδικας που ακολουθεί αμέσως μετά αναφέρεται στο ίδιο το HTML έγγραφο. Ανάπτυξη Δικτυακών Τόπων 11

συνέχεια Τα αντικείμενα μπορούν να έχουν μεθόδους οι οποίες είναι τα πράγματα που συμβαίνουν στα αντικείμενα. Οι μέθοδοι ακολουθούνται από ένα ζευγάρι παρενθέσεων μέσα στο οποίο περιέχονται συγκεκριμένες οδηγίες σχετικά με την εκτέλεση της μεθόδου. Στο παράδειγμά μας το κείμενο μέσα στις παρενθέσεις είναι αυτό που γράφεται μέσα στο τρέχον έγγραφο. Ανάπτυξη Δικτυακών Τόπων 12

1.3.2 Ιδιότητες Τα αντικείμενα της JavaScript μπορούν να έχουν ιδιότητες. Αυτό είναι χρήσιμο αν για παράδειγμα θέλετε να χειριστείτε μια συγκεκριμένη ενότητα ενός εγγράφου (αντικειμένου document). Τα αντικείμενα και οι ιδιότητές τους διαχωρίζονται με τελείες. Όταν θέλετε να καθορίσετε την τιμή μιας ιδιότητας, όπως ο χρώμα του φόντου, προσθέστε την τιμή μετά από την ιδιότητα όπως παρακάτω στο παράδειγμα. Ανάπτυξη Δικτυακών Τόπων 13

1.3.3 Μεταβλητές, Τελεστές και Συναρτήσεις Στην JavaScript, μεταβλητή (variable) είναι κάτι το οποίο καθορίζετε εσείς, για τις δικές σας ανάγκες. Για να ορίσετε μια μεταβλητή, πληκτρολογείτε var και κατόπιν το μονολεκτικό όνομα της μεταβλητής var VotinAge; Ένας τελεστής (operator) κάνει κάτι, όπως έναν υπολογισμό ή μια σύγκριση μεταξύ δυο ή περισσοτέρων μεταβλητών. Μια θέση στην οποία μπορείτε να χρησιμοποιείτε τελεστές είναι κατά τον ορισμό τιμών σε μεταβλητές Ανάπτυξη Δικτυακών Τόπων 14

συνέχεια Τελεστές της JavaScript Ανάπτυξη Δικτυακών Τόπων 15

συνέχεια Κατά τον ίδιο τρόπο μια συνάρτηση (function) είναι μια ομάδα εντολών στις οποίες αναθέτετε ένα όνομα έτσι ώστε να μπορείτε να αναφέρεστε σε αυτές παρακάτω στη σελίδα. Για να δημιουργήσετε μια συνάρτηση πληκτρολογήστε τη λέξη function ακολουθούμενη από το όνομα της συνάρτησης και ένα ζεύγος παρενθέσεων. Στη συνέχεια πληκτρολογείτε τις εντολές που θέλετε να έχει η συνάρτηση κάτω από το όνομα και περικλείοντάς τες με άγκιστρα {}. Ανάπτυξη Δικτυακών Τόπων 16

συνέχεια Δεν μπορείτε να χρησιμοποιείτε όποιο όνομα θέλετε για μια μεταβλητή ή για μια συνάρτηση επειδή υπάρχει μια λίστα δεσμευμένων λέξεων που έχουν ειδική σημασία είτε για την JavaScript είτε για την Java. Κοινές δεσμευμένες λέξεις της JavaScript Ανάπτυξη Δικτυακών Τόπων 17

1.3.4 Χειριστές Συμβάντων Οι χειριστές συμβάντων (event handlers) δε χρειάζεται να τοποθετούνται μέσα στο ζεύγος αρχικού/τελικού tag script αλλά ενσωματώνονται στον HTML κώδικα. Για παράδειγμα, η τοποθέτηση του χειριστή συμβάντων onclik μέσα σε ένα tag σύνδεσης <a> έχει ως αποτέλεσμα να λαμβάνει χώρα αυτό το συμβάν όταν ο χρήστης κάνει κλικ στη σύνδεση. Παράδειγμα: αν θέλετε να αλλάζει το χρώμα του φόντου της σελίδας όταν κάνετε κλικ σε μια σύνδεση Ανάπτυξη Δικτυακών Τόπων 18

συνέχεια Κοινοί Χειριστές Συμβάντων που περιλαμβάνει η JavaScript Ανάπτυξη Δικτυακών Τόπων 19

1.4 Η Λογική της JavaScript Τα scripts ουσιαστικά είναι οδηγίες προς τη εφαρμογή browser. Για παράδειγμα στο παρακάτω script λέω στον browser να γράψει ένα πράμα αν ο χρήστης έχει Explorer και κάτι άλλο αν δεν έχει. Ανάπτυξη Δικτυακών Τόπων 20

συνέχεια Αυτά τα είδη εντολών if then αποκαλούνται εντολές εκτέλεσης υπό όρους και λένε στον browser να κάνει ένα πράγμα εάν το x είναι αληθές (ισχύει) και ένα διαφορετικό πράγμα εάν το x είναι ψευδές (δεν ισχύει). Πρέπει να περικλείονται μέσα σε άγκιστρα. Τα διαστήματα είναι σημαντικά επειδή το αρχικό άγκιστρο πρέπει να βρίσκεται στην ίδια γραμμή με την if ή την else. Το τελικό άγκιστρο τοποθετείται μόνο του σε μια γραμμή μετά από τις οδηγίες. Όλες οι εντολές τελειώνουν με ένα χαρακτήρα ελληνικού ερωτηματικού. Ανάπτυξη Δικτυακών Τόπων 21

1.5 Προσθήκη της Τρέχουσας Ημερομηνίας και Ώρας Ο απλούστερος τρόπος για να προσθέσετε την τρέχουσα ημερομηνία και ώρα σε μια ιστοσελίδα παρουσιάζεται στο παρακάτω script. Τοποθετήστε το script στον κορμό (body) της ιστοσελίδας σας στη θέση όπου θέλετε να εμφανίζεται η ημερομηνία. Ανάπτυξη Δικτυακών Τόπων 22

1.6 Καθορισμός Συγκεκριμένων Πεδίων Μιας Φόρμας σαν Υποχρεωτικά Για να αποφύγετε τη λήψη άχρηστων απαντήσεων σε φόρμες μπορείτε να χρησιμοποιήσετε κώδικα JavaScript για να ορίσετε συγκεκριμένα πεδία σαν υποχρεωτικά. Εάν χρησιμοποιήσετε αυτό το script και οι χρήστες δεν εισάγουν κείμενο στα υποχρεωτικά πεδία, η εφαρμογή browser εμφανίζει ένα προειδοποιητικό μήνυμα το οποίο τους γνωστοποιεί ότι θα πρέπει να το κάνουν πριν μπορέσουν να υποβάλλουν τη φόρμα. Τοποθετήστε τον κώδικα του script ανάμεσα στα tags <script></script> στην κεφαλίδα (header) και όχι στο body. Στη συνέχεια τοποθετήστε τον χειριστή συμβάντων στο tag της φόρμας (form) στον κορμό της HTML. Ανάπτυξη Δικτυακών Τόπων 23

συνέχεια Ανάπτυξη Δικτυακών Τόπων 24

1.7 Αντικατάσταση Μιας Εικόνας Όταν ο Χρήστης Δείχνει σ Αυτήν Σε διάφορες ιστοσελίδες θα δείτε συνδέσεις-γραφικά οι οποίες αλλάζουν εμφάνιση όταν τοποθετείτε το δείκτη πάνω τους. Για να το πετύχετε αυτό μπορείτε να χρησιμοποιείτε το χειριστή συμβάντων onmouseover για να αντικαθιστάτε μια εικόνα με μια άλλη όταν ο δείκτης του ποντικιού τοποθετείται πάνω της. Ο χειριστής τοποθετείται μάσα στο tag <a>. Για αυτό το script ο κώδικας JavaScript πρέπει να είναι και στο header και στο body. Επίσης χρειάζονται δυο εκδόσεις της εικόνας. Ανάπτυξη Δικτυακών Τόπων 25

1.8 Μορφοποίηση Ενός Νέου Παραθύρου Με την ιδιότητα target όπως έχουμε δει μπορούμε και «φορτώνουμε» τον προορισμό μιας σύνδεσης σε ένα διαφορετικό παράθυρο χωρίς όμως να μπορούμε να ελέγχουμε το μέγεθός και το στυλ αυτού του παραθύρου με τη στάνταρ HTML. Αντί αυτής της εντολής μπορείτε να χρησιμοποιείτε κώδικα JavaScript για να καθορίζετε ρυθμίσεις όπως το μέγεθος του παραθύρου και αν θα περιλαμβάνει γραμμές κύλισης. Ανάπτυξη Δικτυακών Τόπων 28

συνέχεια Ορισμένα από τα χαρακτηριστικά που μπορείτε να καθορίσετε είναι τα ακόλουθα. Ανάπτυξη Δικτυακών Τόπων 29

συνέχεια Τοποθετήστε το script στο header μεταξύ των tag <head></head>. Ανάπτυξη Δικτυακών Τόπων 31

συνέχεια Στη συνέχεια στο body αναφέρεστε ονομαστικά στη συνάρτηση που δημιουργήσατε παραπάνω μέσα από το tag της κατάλληλης σύνδεσης. Μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα για να φορτώσετε και άλλες συνδέσεις στο παράθυρο NewWindow, αλλάζοντας απλώς το URL που αναφέρεται μέσα στις παρενθέσεις. Ανάπτυξη Δικτυακών Τόπων 32

1.9 Δημιουργίας Γραμμής Πλοήγησης με Δυναμική Συμπεριφορά Η πιο κοινή χρήση κώδικα JavaScript για την εμφάνιση κρυφών επιπέδων που έχουν γίνει με φύλλα στυλ CSS είναι για την υλοποίηση γραμμών πλοήγησης με δυναμική συμπεριφορά όπου εμφανίζεται ένα υπομενού ή μια αναδιπλούμενη λίστα αφού ο χρήστης κάνει κλικ σε μια σύνδεση, παρέχοντας πρόσθετες επιλογές συνδέσεων χωρίς να πραγματοποιείται ανανέωση της HTML σελίδας. Το script τοποθετείται στο header της HTML. Ανάπτυξη Δικτυακών Τόπων 33

συνέχεια Η γραμμή πλοήγησης πριν γίνει κλικ επάνω της Η γραμμή πλοήγησης αφού γίνει κλικ Ανάπτυξη Δικτυακών Τόπων 35

συνέχεια Παρακάτω παρουσιάζεται το φύλλο στυλ που χρησιμοποιήθηκε για την υλοποίηση των μενού των δυο εικόνων. Ανάπτυξη Δικτυακών Τόπων 36

συνέχεια Το τελευταίο κομμάτι είναι ο πραγματικός HTML κώδικας για το περιεχόμενο, ο οποίος τοποθετείται ανάμεσα στο ζεύγος αρχικού και τελικού tag body. Ανάπτυξη Δικτυακών Τόπων 38