Κεφάλαιο 3 - Ανάπτυξη και Υλοποίηση της Εφαρμογής
56
αρχεία JavaScript που εισάγουμε στο “header.php” είναι απαραίτητα για την σωστή
διαμόρφωση στοιχείων μέσα στην σελίδα. Αντίθετα, αυτά που εισάγουμε στο “footer.php”
έχουν λειτουργίες που χρειάζονται προ απαιτούμενα στοιχεία. Επίσης αυτή τη τεχνική
επιτρέπει σε μερικούς περιηγητές να εμφανίσουν την σελίδα πριν ακόμη ολοκληρώσουν την
μεταφόρτωση των επιπλέων αρχείων JavaScript.
1.
//Add Event listeners when the document is fully loaded
2. $
(
document
).
ready
(
function
()
{
3.
4.
// Handle Navbar Search type change
5. $
(
"#search-nav-dropdown-ul li a"
).
click
(
function
(){
6.
[...]
7.
});
8.
9. $
(
'#select_all'
).
click
(
function
(
event
)
{
10.
[...]
11.
});
12.
13.
[...]
14.
15.
});
16.
17.
function
navbar_search_project
(
e
)
{
18.
[...]
19.
};
20.
21.
function
navbar_search_user
(
e
)
{
22.
[...]
23.
};
24.
25.
[...]
Κώδικας 22: functions.js - Η γενική δομή του αρχείου
Εκτός των τριών βασικών αρχείων του θέματος εμφάνισης, έχουμε και ένα αρχείο που
αναλαμβάνει την εισαγωγή λειτουργιών στα στοιχεία που εμφανίζονται. Το αρχείο αυτό
ονομάζεται “function.js” και αποτελείται από δύο μέρη. Το πρώτο μέρος περιλαμβάνεται σε
μία συνάρτηση που προσφέρει η βιβλιοθήκη jQuery και επικυρώνει ότι ο κώδικας θα
εκτελεστεί αφού έχει ολοκληρωθεί η φόρτωση της σελίδας (Κώδικας 22, γραμμή 2).
Εσωτερικά της συνάρτησης αυτής έχουμε τις δηλώσεις αντιμετώπισης γεγονότων (Κώδικας
22, γραμμές 4-13). Είναι απαραίτητο να επιβεβαιώσουμε την ύπαρξη των στοιχείων HTML
γιατί σε διαφορετική περίπτωση η κάθε δήλωση αντιμετώπισης γεγονότων θα οδηγούσε σε
αποτυχία αφού δεν υπάρχει το στοιχείο που θέλουμε να συνδέσουμε με την αντίστοιχη
αντιμετώπιση. Το δεύτερο μέρος του αρχείου “functions.js” αποτελείται από ανεξάρτητες
συναρτήσεις. Οι συναρτήσεις αυτές χρησιμοποιούνται συχνά στην αντιμετώπιση γεγονότων
και αποτελούν χρήσιμα πακέτα λειτουργιών που πολλές φορές βρίσκουν εφαρμογή σε
διαφορετικά τμήματα κώδικα.
Παραπάνω παρουσιάσαμε τα βασικά στοιχεία που συντελούν το θέμα εμφάνισης της
εφαρμογής μας. Τα στοιχεία αυτά χρησιμοποιούν εργαλεία όπως το πλαίσιο Bootstrap και τον
κειμενογράφο Ace προσαρμόζοντάς τα στο δικό μας περιβάλλον αλληλεπίδρασης. Ταυτόχρονα
όμως εισάγουν τις δικές τους λειτουργίες και αποτελούν ένα σύστημα που περιβάλλει τα
αποτελέσματα διαδικασιών του εξυπηρετητή.