Πώς να χτίσετε ένα απλό ημερολόγιο Advent στο JavaScript

Η έλευση είναι η περίοδος αναμονής και προετοιμασίας για τα Χριστούγεννα που αρχίζει τέσσερις Κυριακές πριν την παραμονή των Χριστουγέννων. Η μετάβαση του χρόνου Advent μετριέται παραδοσιακά με τη βοήθεια ενός Ημερολογίου Advent ή ενός Advent Crown. Αν και η αρχή της Advent δεν είναι καθορισμένη ημερομηνία, τα Ημερολόγια Advent αρχίζουν συνήθως την 1η Δεκεμβρίου.

Με βάση τα τοπικά έθιμα, τα Ημερολόγια Advent μπορούν να έχουν διαφορετικά σχέδια, αλλά συνήθως παίρνουν τη μορφή μεγάλες ορθογώνιες κάρτες με 24 παράθυρα ή πόρτες σημειώνοντας τις ημέρες μεταξύ 1ης και 24ης Δεκεμβρίου. Οι πόρτες κρύβουν μηνύματα, ποιήματα, προσευχές ή λίγες εκπλήξεις.

Σε αυτή τη θέση θα σας δείξω πώς να κάντε ένα Ημερολόγιο Advent σε αντικειμενοστραφή JavaScript. Όπως γίνεται με τη βανίλια JavaScript, μπορείτε εύκολα να τοποθετήσετε τον κώδικα στον δικό σας ιστότοπο.

Διαδήλωση
Λήψη πηγής

Σχεδιασμός Ημερολογίου JavaScript

Το Ημερολόγιο Advent θα έχει 24 πόρτες σε μια εικόνα φόντου με τα Χριστούγεννα. Κάθε πόρτα θα κρύψει ένα σχετικό με τα Χριστούγεννα απόσπασμα που θα το κάνει εμφανίζεται με τη μορφή μηνύματος συναγερμού όταν ο χρήστης κάνει κλικ στην πόρτα. Οι πόρτες παραμένουν κλειστές μέχρι να έρθει η συγκεκριμένη μέρα, όπως συμβαίνει με το πραγματικό Ημερολόγιο του Advent. οι πόρτες δεν μπορούν να ανοίξουν πριν από τη σωστή ημέρα.

Οι πόρτες που έχουν ήδη ενεργοποιηθεί θα έχουν διαφορετικό χρώμα περιγράμματος και φόντου (λευκό) από ό, τι τα άτομα με ειδικές ανάγκες (ανοιχτό πράσινο). Θα χρησιμοποιήσουμε HTML5, CSS3 και JavaScript για να προετοιμάσουμε το Ημερολόγιο Advent που μοιάζει με αυτό:

Βήμα 1 - Δημιουργία δομής αρχείων και πόρων

Πρώτα απ 'όλα, πρέπει να επιλέξουμε μια ωραία εικόνα φόντου. Διάλεξα ένα με πορτραίτο προσανατολισμό από το Pixabay, οπότε το ημερολόγιό μου θα περιέχει 4 στήλες και 6 σειρές.

Είναι καλό αν προτιμάτε προσανατολισμό στο τοπίο. Απλά αλλάξτε τις θέσεις των θυρών στον κώδικα JavaScript, όπως θα έχετε 6 στήλες και 4 σειρές. Αν έχετε την εικόνα σας, δημιουργήστε ένα φάκελο που καλείται / εικόνες, και να το αποθηκεύσετε.

Αυτή θα είναι η μοναδική πηγή εικόνας για αυτό το έργο.

Για τα αρχεία JavaScript δημιουργήστε ένα / scripts φάκελο μέσα στον ριζικό φάκελο. Τοποθετήστε δύο κενά αρχεία κειμένου σε αυτό και ονομάστε τα calendar.js και messages.js. Calendar.js θα κρατήσει τη λειτουργικότητα, ενώ messages.js θα περιέχει τη σειρά των μηνυμάτων που εμφανίζονται όταν ο χρήστης “ανοίγει” (κλικ) στις πόρτες.

Θα χρειαστεί επίσης ένα αρχείο HTML και ένα αρχείο CSS, δημιουργήστε έτσι δύο κενά αρχεία μέσα στον ριζικό φάκελο και δώστε τα ονόματα index.html και style.css.

Όταν είστε έτοιμοι να έχετε τους πόρους και τη δομή αρχείων, θα χρειαστεί να ολοκληρώσετε αυτό το έργο και ο ριζικός φάκελός σας μοιάζει με αυτό:

Βήμα 2 - Δημιουργήστε το HTML

Ο κώδικας HTML που χρησιμοποιούμε είναι αρκετά απλός. Το φύλλο στυλ CSS συνδέεται στο τμήμα, ενώ το δύο αρχεία JavaScript περιλαμβάνονται στο κάτω μέρος του Ενότητα. Το τελευταίο είναι απαραίτητο, γιατί αν βάλουμε τα σενάρια στο , ο κώδικας δεν θα εκτελεστεί, όπως αυτός χρησιμοποιεί τα στοιχεία της φορτωμένης σελίδας HTML.

Το ίδιο το Ημερολόγιο του Advent βρίσκεται μέσα στο

σημασιολογική ετικέτα. Φορτώνουμε την εικόνα των Χριστουγέννων ως ένα Στοιχείο HTML, και όχι ως ιδιότητα φόντου CSS, επειδή με αυτόν τον τρόπο μπορούμε εύκολα να έχουμε πρόσβαση σε αυτό ως στοιχείο του DOM.

Κάτω από την εικόνα τοποθετούμε μια κενή λίστα με το “adventDoors” id επιλογέα που θα συμπληρωθεί από τα σενάρια. Εάν ο χρήστης δεν έχει ενεργοποιημένη τη JavaScript στο πρόγραμμα περιήγησής του, θα δει απλά μια απλή εικόνα των Χριστουγέννων.

     Advent Calendar        Advent Calendar

Βήμα 3 - Πληκτρολογήστε το “Μηνύματα” Παράταξη

Χρειαζόμαστε 24 χριστιανικά αποσπάσματα για να συμπληρώσουμε το “μηνυμάτων” παράταξη. Διάλεξα το δικό μου από GoodReads.

Ανοιξε το scripts / messages.js αρχείο; θα τοποθετήσουμε τα αποσπάσματα εδώ για να τα κρατήσουμε ξεχωριστά από τη λειτουργικότητα. ο μηνυμάτων ο πίνακας είναι ένας πίνακας μέσα σε μια συστοιχία, κάθε στοιχείο του εξωτερικού πίνακα περιέχει μια άλλη διάταξη με δύο στοιχεία: ένα απόσπασμα και ο συγγραφέας του.

Πληκτρολογήστε τον πίνακα με τα αγαπημένα σας αποσπάσματα σύμφωνα με την ακόλουθη σύνταξη:

 var μηνύματα = [["Παράθεση 1", "Συγγραφέας 1"], ["Παράθεση 2", "Συγγραφέας 2"], ... ["Παράθεση 24", "Συγγραφέας 24"]]

Βήμα 4 - Προσθήκη βασικών μορφών CSS για τις πόρτες

Για να δημιουργήσουμε τα απαραίτητα στυλ CSS για τις πόρτες, πρέπει να φανταστούμε τον τελικό σχεδιασμό, καθώς οι πόρτες θα δημιουργηθούν με τη JavaScript με τα ακόλουθα βήματα.

Πρέπει να δημιουργήσουμε 4 στήλες και 6 σειρές ορθογωνίων σε κατάλληλη ευθυγράμμιση. Γι 'αυτό, θα χρησιμοποιήσουμε το θέση: σχετική και το θέση: απόλυτη CSS κανόνες. Καθώς η ακριβής θέση θα αλλάξει πόρτα με πόρτα, θα προσθέσουμε το μπλουζα, κάτω μέρος, αριστερά, και σωστά ιδιότητες στο JavaScript, στο CSS, πρέπει απλώς να προσθέσουμε μια σχετική θέση στο κοντέινερ (μη ταξινομημένη λίστα στο HTML) και απόλυτες θέσεις για τα στοιχεία της λίστας (θα προστεθούν και στο JS).

Το άλλο σημαντικό πράγμα στο αρχείο στυλ είναι να δημιουργήστε ένα διαφορετικό σχέδιο για τα άτομα με ειδικές ανάγκες και τις ενεργοποιημένες καταστάσεις. ο .άτομα με ειδικές ανάγκες επιλογέας θα προστεθεί στα άτομα με ειδικές ανάγκες από τη JavaScript.

Για το demo μου Ημερολόγιο έχω ένα στερεό λευκό σύνορο και λευκές γραμματοσειρές για τις ενεργοποιημένες πόρτες με ένα διαφανές λευκό φόντο στην αιωρούνται? και ένα ανοιχτό πράσινο περίγραμμα, γραμματοσειρές και ένα διαφανές ανοιχτό φόντο για τα άτομα με ειδικές ανάγκες. Αν δεν σας αρέσει αυτό το σχέδιο, μπορείτε να αλλάξετε τα χρώματα και τα στυλ σύμφωνα με την επιθυμία σας.

Τοποθετήστε τον ακόλουθο κώδικα (ή τους τροποποιημένους κανόνες στυλ) στο δικό σας style.css αρχείο.

 ul # adventDoors θέση: συγγενής; style-λίστας: κανένας. padding: 0; περιθώριο: 0;  #adventΔωστή li θέση: απόλυτη;  #adventΔόρες li a χρώμα: #fff; πλάτος: 100%. ύψος: 100%. γραμματοσειρά-μέγεθος: 24px; κείμενο-ευθυγράμμιση: κέντρο; οθόνη: flex; ευέλικτη κατεύθυνση: στήλη. justify-content: center; κείμενο-διακόσμηση: κανένα? σύνορα: 1px #fff στερεά;  #adventDoors li a: όχι (.disabled): αιωρείται χρώμα: #fff; Χρώμα φόντου: διαφανές. Χρώμα φόντου: rgba (255,255,255,0.15);  #adventΔόρες li a.disabled border-color: # b6fe98; Χρώμα φόντου: rgba (196.254.171,0.15); χρώμα: # b6fe98; δρομέας: προεπιλογή

Βήμα 5 - Δημιουργήστε τις Παγκόσμιες Μεταβλητές

Από αυτό το βήμα, θα συνεργαστούμε μόνο με το scripts / calendar.js αρχείο, οπότε ας ανοίξουμε αυτό το θέμα. Το Ημερολόγιο Advent θα χρησιμοποιήσει δύο παγκόσμιες μεταβλητές.

ο myCal μεταβλητή διατηρεί την εικόνα του Ημερολογίου ως αντικείμενο JS. Η εικόνα έχει ήδη προστεθεί στο index.html file στο Βήμα 2. Θα τοποθετήσουμε τις πόρτες σε αυτήν την εικόνα στο Βήμα 7. Θα συλλάβουμε το σχετικό HTML στοιχείο που επισημαίνεται με το “adventCal” αναγνωριστικό χρησιμοποιώντας τη μέθοδο DOM getElementById (). ο myCal μεταβλητή θα είναι ένα αντικείμενο HTMLImageElement DOM.

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

Τοποθετήστε το ακόλουθο απόσπασμα κώδικα στο επάνω μέρος του calendar.js αρχείο.

 var myCal = document.getElementById ("adventCal"); var currentDate = νέα Ημερομηνία ();

Βήμα 6 - Δημιουργήστε το “Θύρα” Τάξη

Δεδομένου ότι χρειαζόμαστε 24 πόρτες, ο πιο απλός τρόπος για να το κάνετε αυτό είναι να δημιουργήσετε ένα “Θύρα” και αργότερα να το δομήσουν 24 φορές.

Η κλάση Πόρτα μας έχει δύο παραμέτρους, Ημερολόγιο και ημέρα. Για το Ημερολόγιο θα πρέπει να περάσουμε την εικόνα των Χριστουγέννων που θα λειτουργήσει ως φόντο. Για το ημέρα θα πρέπει να περάσουμε την τρέχουσα ημέρα του Δεκεμβρίου με τη μορφή ενός ακέραιου αριθμού.

Θα περάσουμε τις ακριβείς τιμές των παραμέτρων στο τελευταίο βήμα (Βήμα 8), κατά τη διάρκεια των παραστάσεων των αντικειμένων 24 Πόρτας.

Θα δημιουργήσουμε 5 ιδιότητες και 1 μέθοδο για την κλάση Πόρτα. Σε αυτό το βήμα θα περάσουμε μόνο από τις 5 ιδιότητες, και θα το εξηγήσω περιεχόμενο() στο επόμενο βήμα.

ο “πλάτος” & & “ύψος” ιδιότητες

ο πλάτος και ύψος οι ιδιότητες υπολογίζουν δυναμικά το πλάτος και το ύψος κάθε μεμονωμένης πόρτας (που αλλάζει ανάλογα με το πλάτος και το ύψος της εικόνας φόντου).

Οι πολλαπλασιαστές 0,1 και 0,95 είναι στην εξίσωση να αφήνουν κάποιο χώρο για τα περιθώρια, μεταξύ κάθε πόρτας και γύρω από τις πλευρές του Ημερολογίου.

ο “adventMessage” ιδιοκτησία

ο adventMessage ιδιοκτησία κρατά το περιεχόμενο των μηνυμάτων προειδοποίησης, δηλαδή τα αποσπάσματα και οι αντίστοιχοι συγγραφείς που μας messages.js αρχειοθετείται. ο adventMessage η ιδιοκτησία παίρνει ένα απόσπασμα και ένας συγγραφέας από το μηνύματα [] πίνακα, ανάλογα με την τρέχουσα ημερομηνία.

Για τη Δεκ adventMessage η ιδιότητα παίρνει το πρώτο στοιχείο της εξωτερικής συστοιχίας που είναι μηνύματα [0], καθώς οι πίνακες βασίζονται στο μηδέν στο JavaScript.

Για τον ίδιο λόγο, το απόσπασμα για το Δεκέμβριο 1 είναι τοποθετημένο ως μηνύματα [0] [0] (πρώτο στοιχείο της εσωτερικής συστοιχίας) και ο συγγραφέας που ταιριάζει μπορεί να προσεγγιστεί ως μηνύματα [0] [1] (δεύτερο στοιχείο της εσωτερικής συστοιχίας).

ο “Χ”& &”y” ιδιότητες

Ιδιότητες Χ και y κρατήστε τις κατάλληλες θέσεις κάθε πόρτας που θα χρησιμοποιήσουμε στο επόμενο βήμα για να ρυθμίσετε το μπλουζα και αριστερά Ιδιότητες CSS. Αυτά θα συμπληρώσουν το θέση: σχετική και θέση: απόλυτη Οι κανόνες CSS που ορίσαμε στο Βήμα 4 για τον περιέκτη πόρτας (ul # adventDoors) και τις ίδιες τις πόρτες (#adventDoors li). Οι υπολογισμοί μπορεί να φαίνονται κάπως εκφοβιστικοί, αλλά ας πάμε γρήγορα μέσα από αυτούς.

ο Χ ιδιότητα θα χρησιμοποιηθεί από το αριστερά CSS τοποθετώντας την ιδιότητα στο επόμενο βήμα (Βήμα 7). Καθορίζει σε εικονοστοιχεία όπου μια μεμονωμένη πόρτα πρέπει να τοποθετηθεί στον άξονα x.

Παίρνει το πλάτος της εικόνας φόντου και αφήνει λίγο περιθώριο για αυτό (4%). Στη συνέχεια, με τη βοήθεια του υπολοίπου χειριστή, εκτιμά σε ποια στήλη θα τοποθετηθεί (θυμηθείτε, θα υπάρχουν 4 στήλες) και τέλος προσθέτει ένα μικρό περιθώριο (10%) σε κάθε μεμονωμένη πόρτα χρησιμοποιώντας έναν πολλαπλασιαστή 1,1.

Με τον ίδιο τρόπο, το y ιδιότητα θα χρησιμοποιηθεί από το μπλουζα CSS εντοπίζοντας την ιδιότητα και ομοίως προσδιορίζει σε εικονοστοιχεία όπου μια μεμονωμένη πόρτα χρειάζεται να τοποθετηθεί στον άξονα y.

Λαμβάνουμε το ύψος της εικόνας φόντου με τη βοήθεια της ιδιότητας ύψους του περασμένου Ημερολόγιο (που περιέχει ένα αντικείμενο DOM) και αφήνει περιθώριο 4% γύρω από τις κάθετες πλευρές του Ημερολογίου.

Στη συνέχεια, με τη βοήθεια της μεθόδου Math.floor () υπολογίζουμε σε ποια σειρά θα δοθεί ένα δεδομένο αντικείμενο πόρτας (θα υπάρχουν 6 σειρές).

Τέλος, προσθέτουμε ένα περιθώριο 10% για κάθε αντικείμενο Door πολλαπλασιάζοντας το ύψος του χρησιμοποιώντας έναν πολλαπλασιαστή 1,1.

 Λειτουργία Πόρτα (ημερολόγιο, ημέρα) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95. this.adventMessage = 'Ημέρα' + ημέρα + 'του Advent \ n \ n' + '"' + μηνύματα [ημέρα - 1] [0] + '' \ n \ n \ - 1] [1] + '\ n \ n'; this.x = (0,04 * calendar.width + ((ημέρα - 1)% 4) * (1,1 * αυτό το εύρος)); this.y = - (0.96 * calendar.height - Math.floor ((ημέρα - 1) / 4) * (1.1 * this.height))? this.content = συνάρτηση () ...;

Βήμα 7 - Πληκτρολογήστε το “Περιεχόμενο()” Μέθοδος

Είναι το περιεχόμενο() μέθοδο που θα εμφανίσει τις πόρτες μας στο πρόγραμμα περιήγησης. Πρώτα από όλα, δημιουργούμε έναν νέο κόμβο DOM με τη βοήθεια της μεταβλητής κόμβος που θα δημιουργήσει το

στοιχεία μέσα στην τρέχουσα κενή λίστα μας (ul # adventDoors) στο αρχείο HTML.

Καθώς η κλάση Πόρτα θα παρουσιαστεί 24 φορές σε ένα for loop στο επόμενο βήμα (Βήμα 8), αυτό σημαίνει ότι θα έχουμε 24

στοιχεία, ένα li για κάθε θύρα. Στην επόμενη γραμμή προσθέτουμε τον νέο κόμβο στο #adventDoors μη καταχωρημένη λίστα ως παιδικό στοιχείο χρησιμοποιώντας τη μέθοδο DOMend appendChild ().

Η ιδιότητα node.id στην επόμενη γραμμή προσθέτει έναν μοναδικό επιλογέα id σε κάθε στοιχείο λίστας (πόρτα). Θα χρειαστούμε αυτό για να μπορέσουμε να βρούμε σωστά τις ημέρες στο επόμενο βήμα (βήμα 8). Με αυτόν τον τρόπο η Πόρτα 1 θα έχει ένα id =”πόρτα1 ", Η πόρτα 2 θα έχει ένα id =”πόρτα2 " επιλογέα κ.λπ..

Η ιδιότητα node.style.cssText στην επόμενη γραμμή προσθέτει κάποιους κανόνες CSS σε κάθε στοιχείο λίστας (πόρτα) με τη βοήθεια του style =”... ” Χαρακτηριστικό HTML που χρησιμοποιείται για να συμπεριλάβει inline CSS σε αρχεία HTML. ο node.style.cssText ιδιότητα χρησιμοποιεί τις ιδιότητες της κλάσης Πόρτα που ορίσαμε στο προηγούμενο βήμα (Βήμα 6).

Για να κάνουμε το αντικείμενο Door clickable, πρέπει επίσης να προσθέσουμε ένα ετικέτα μέσα στα στοιχεία της λίστας. Αυτό επιτυγχάνεται με τη βοήθεια του innerNode μεταβλητή που συνδέουμε ως παιδικό στοιχείο στο κατάλληλο στοιχείο λίστας που προσδιορίζεται από το id =”πόρτα [i]” επιλογέας (με το [i] να είναι ο αριθμός ημέρας), χρησιμοποιώντας τη μέθοδο DOMend appendChild () ακριβώς όπως πριν.

Η ιδιότητα innerHTML στην επόμενη γραμμή εμφανίζει την τρέχουσα ημέρα (1-24) στην κορυφή της πόρτας στο πρόγραμμα περιήγησης και προσθέτουμε επίσης ένα href =”# #” αποδίδουμε στις ετικέτες μας άγκυρα μέσω της ιδιότητας href DOM.

Τέλος, στη δήλωση if-else, αξιολογούμε εάν ένα αντικείμενο πόρτας πρέπει να ενεργοποιηθεί ή να απενεργοποιηθεί. Αρχικά, εξετάζουμε εάν είμαστε στον 12ο μήνα του έτους (Δεκέμβριος) χρησιμοποιώντας τη μέθοδο getMonth () του αντικειμένου Date. Πρέπει να προσθέσουμε 1, επειδή το getMonth () βασίζεται σε μηδέν (ο Ιανουάριος είναι ο μήνας 0, κ.λπ.).

Μετά από αυτό, ελέγξουμε αν η τρέχουσα ημερομηνία βρίσκεται στο σημερινή ημερομηνία η παγκόσμια μεταβλητή που ορίσαμε στο Βήμα 5 είναι μικρότερη από την ημέρα που αντιπροσωπεύει το τρέχον αντικείμενο Πόρτας.

Αν δεν είναι Δεκέμβριος ή η ημέρα που αντιπροσωπεύεται από τη δεδομένη Πόρτα είναι μεγαλύτερη από την τρέχουσα ημερομηνία, η πόρτα πρέπει να απενεργοποιηθεί, σε όλες τις άλλες περιπτώσεις πρέπει να είναι ενεργοποιημένη έτσι ώστε οι χρήστες να μπορούν να κάνουν κλικ σε αυτήν και να δουν το σχετικό μήνυμα Advent.

Εάν η πόρτα είναι απενεργοποιημένη, προσθέτουμε a class =”άτομα με ειδικές ανάγκες” επιλογέα στην δεδομένη ετικέτα αγκύρωσης με τη βοήθεια της ιδιότητας className. Θυμηθείτε, έχουμε ήδη σχεδιάσει το .άτομα με ειδικές ανάγκες class με το CSS στο βήμα 4. Πρέπει επίσης να ορίσουμε το χαρακτηριστικό event onclick HTML να επιστρέψει ψευδές.

Αν η πόρτα βρίσκεται σε κατάσταση ενεργοποίησης, προσθέτουμε το adventMessage ιδιοκτησίας σε ένα μήνυμα προειδοποίησης και τοποθετήστε το μέσα στο χαρακτηριστικό συμβάντος onclick.

 this.content = συνάρτηση () var node = document.createElement ("li"); document.getElementById ("adventDoors") appendChild (κόμβος). node.id = "πόρτα" + ημέρα. node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; left:" + this.x + "px · ". var innerNode = document.createElement ("a"); document.getElementById ("πόρτα" + ημέρα) .appendChild (innerNode); innerNode.innerHTML = ημέρα. innerNode.href = "#"; αν ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day )  innerNode.className = "disabled"; innerNode.onclick = function()  return false;   else  var adventMessage = this.adventMessage; innerNode.onclick = function()  alert(adventMessage); return false;   ;

Βήμα 8 - Αρχικοποιήστε το “Θύρα” Αντικείμενα

Τέλος, πρέπει να αρχικοποιήσουμε την κλάση Πόρτα 24 φορές.

Για να το κάνουμε αυτό, χρησιμοποιούμε μια Έκφραση Λειτουργίας Άμεσης Επανάστασης που είναι πολύ χρήσιμη εδώ, επειδή δεν χρειαζόμαστε μια μεταβλητή, καθώς θέλουμε να εκτελέσουμε μόνο τον κώδικα μέσα στη λειτουργία μία φορά.

Δημιουργούμε ένα πόρτες [] που θα κρατήσει τα αντικείμενα των 24 θυρών. Περάσαμε τις ημέρες από το 1 έως το 24 (θα είναι τα 0-23η στοιχεία των θυρών [], καθώς οι συστοιχίες είναι μηδενικές) και τελικά να επιστρέψουμε το σύνολο πόρτες [] συμπεριλαμβανομένων των αντικειμένων 24 πόρτας για την εμφάνιση τους στο πρόγραμμα περιήγησης.

 (λειτουργία) () var πόρτες = [], για (var i = 0, i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();

Διαδήλωση
Λήψη πηγής