Anastasis

Το Buttons είναι μια βιβλιοθήκη CSS για τη δημιουργία εξαιρετικά προσαρμόσιμων, ευέλικτων και σύγχρονων web κουμπιών. Είναι χτισμένο με Sass + Compass και έχει την υποστήριξη για τετράγωνα, στρογγυλά ή κυκλικά κουμπιά που μπορεί να είναι επίπεδα ή όχι και με προσαρμοσμένα εφέ (όπως λάμψη). Τα μεγέθη, τα χρώματα, τα αποτελέσματα και οι γραμματοσειρές που χρησιμοποιούνται μπορούν όλα να αλλάξουν με τη βοήθεια των μεταβλητών και μπορεί να επεκταθεί εύκολα. Υ.Γ. Κυκλοφορεί και μια Ruby Gem-friendly version Website: http://alexwolfe.github.io/Buttons/ Download: https://github.com/alexwolfe/Buttons

Το Chart.js είναι object oriented client side γραφήματα για τους σχεδιαστές και προγραμματιστές. Μπορείτε να απεικονίσετε τα δεδομένα σας με 6 διαφορετικούς τρόπους. Το κάθε ένα από αυτά κινούμενα σχέδια, είναι πλήρως παραμετροποιήσιμα και η εμφάνιση τους είναι καταπληκτική, ακόμη και σε retina displays. Το Chart.js χρησιμοποιεί το στοιχείο καμβά HTML5. Υποστηρίζει όλα τα σύγχρονα προγράμματα περιήγησης, και τα polyfills παρέχουν υποστήριξη για IE7 / 8. Το Chart.js είναι δωρεάν, ελαφρύ (4,5 k minified και gzipped) και προσφέρει πολλές επιλογές προσαρμογής. Βρίσκεται υπό την άδεια MIT. Απαιτήσεις: HTML5 Framework Demo: http://www.chartjs.org/ Άδεια: MIT License

Η CSS Checkbox είναι μια ιστοσελίδα η οποία παρέχει διαφορετικά στυλ για την προσαρμογή checkboxes (χωρίς JavaScript). Υπάρχουν στυλ που έχουν μόνο διαφορετικά χρώματα σε σύγκριση με τα κλασικά checkboxes και άλλα πιο περίτεχνα που χρησιμοποιούν και εικόνες. Επίσης, μπορεί να βρείτε και κάποια στυλ που μιμούνται τη χρήση γνωστών ιστοσελίδων όπως Reddit ή Google. Όλα τα στυλ μπορούν να μεταφορτωθούν κατευθείαν ή μπορείτε να δείτε τον κώδικα για κάθε στοιχείο. Website: http://csscheckbox.com/

Το Codrops μας έχει δείξει ένα δημιουργικό τρόπο για να εμφανίσουμε κινούμενα βιβλία που χρησιμοποιούν CSS 3D Transforms Μπορείτε να δείτε δύο τύπους σχεδιασμού ενός τέτοιου βιβλίου: hardcover και paperback. Και οι δύο έγιναν για να είναι εύκολα τροποποιήσιμoι σε ορισμένα από τα μέρη του περιεχομένου τους χρησιμοποιώντας CSS, εικόνες, άγκυρες και κάποιες επιπλέον μικρές λεπτομέρειες. Το hardcover βιβλίο αποτελείται από τρία μέρη: μπροστινό εξώφυλλο, κυρίως μέρος και hardcover οπισθόφυλλο. Κάθε μέρος χρησιμοποιεί ψευδο-στοιχεία για να έχει κάποιο πάχος. Σε αντίθεση με το hardcover, το paperback βιβλίο είναι λίγο πιο απλό. Είναι κατασκευασμένο από επίπεδες επιφάνειες: paperback εξώφυλλο, απλό χαρτί μέσα και paperback οπισθόφυλλο. Απαιτήσεις: CSS 3D Transforms Demo: http://tympanus.net/Development/AnimatedBooks/ Άδεια: Δωρεάν

Πολλοί συνδέουν τα meta tags με τις ιδιότητες που αφορούν την δήλωση κάποιων στοιχείων στις μηχανές αναζήτησης και θεωρούν ότι ο ρόλος τους αναλώνεται αποκλειστικά στο κομμάτι της προώθησης μιας ιστοσελίδας (title, meta keywords, meta description ). Παρότι ο ρόλος τους είναι σημαντικός σε αυτό το επίπεδο (πλέον το google ουσιαστικά αγνοεί τα meta keywords και το meta description όσο αφορά την προβολή του site στα εκεί δηλωμένα δεδομένα και περιορίζεται στις πληροφορίες που εμπεριέχει το title ) θα δείξουμε κάποια άλλα meta tags που αφορούν διαφορετικούς τομείς. 1) Πως να εμποδίσουμε τα robots των μηχανών αναζήτησης να βάλουν στο ευρετήριο τους την ιστοσελίδα σας Σε περίπτωση που για τον οποιονδήποτε λόγο θέλουμε η σελίδα μας είτε να μην εμφανίζεται στις μηχανές αναζήτησης (π.χ. χρήση του web site από ένα περιορισμένο κοινό είτε να αποφύγουμε ένα cpu overload σαν αυτό που περιέγραψα εδώ ) , με τη χρήση του tag <META> μπορούμε να σταματήσουμε τα robots ( τουλάχιστον όσα διαβάζουν τις οδηγίες μας )Χρησιμοποιούμε τις τιμές noindex για να εμποδίσουμε τα ρομπότ να βάλουν σε ευρετήριο τη σελίδα μας και nofollow για να εμποδίσουμε τα ρομπότ να βάλουν σε ευρετήριο οποιεσδήποτε σελίδες συνδεδεμένες με τη σελίδα μας. Για παράδειγμα:<META NAME=”robots” CONTENT=”noindex, nofollow”> 2) Καθορισμός ημερομηνίας λήξης Μπορούμε να καθορίσουμε μία ημερομηνία λήξης για τη σελίδα μας, για να ξέρουν οι χρήστες ότι βλέπουν την τελευταία έκδοση της σελίδας. Μεταξύ των κωδικών <HEAD> και </HEAD> πληκτρολογούμε: <META HTTP-EQUIV=”Expires” CONTENT=”ημερομηνία λήξης της σελίδας μας”> Για παράδειγμα:<META HTTP-EQUIV=”Expires” CONTENT=”Tues, 15 Jul 2012 12:46:45 GMT”> 3) Καθορισμός πληροφοριών συντάκτη και πνευματικής ιδιοκτησίας Μπορούμε να καθορίσουμε πληροφορίες για τη σελίδα μας, συμπεριλαμβανομένου του ονόματος του συντάκτη και της πνευματικής ιδιοκτησίας. Για τον καθορισμό πληροφοριών συντάκτη, μεταξύ των tags <HEAD> και </HEAD> πληκτρολογούμε: <META NAME=”author” CONTENT=”Το όνομα του ατόμου που δημιούργησε τη σελίδα”> Για τον καθορισμό πληροφοριών πνευματικής ιδιοκτησίας, μεταξύ των tags <HEAD> και </HEAD> πληκτρολογούμε: <META NAME=”copyright” CONTENT=”Έτος του copyright και το όνομα του ατόμου ή της εταιρείας που έχει το copyright”> Για παράδειγμα: <META NAME=”author” CONTENT=”Θανάσης Δαβαλάς”> <META NAME=”copyright” CONTENT=”2013 DreamWeaver.Gr”> Οι συνάδελφοι που ασχολούνται με την δημιουργία ιστοσελίδων γνωρίζουν ότι έτσι μπορούν να αφήσουν το διακριτικό ίχνος τους. Ελπίζουμε να συμβάλλαμε με το άρθρο μας αυτό στην διάλυση της πλάνης ότι τα meta tags αφορούν μόνο το seo. Φυσικά υπάρχουν πολλά άλλα παραδείγματα επίσης από meta tags με άλλες πρακτικές χρησιμότητες στα οποία θα αναφερθούμε σε κάποιο μεταγενέστερο άρθρο μας.

Το UIkit είναι ένα ελαφρύ και modular front-end framework για την γρήγορη ανάπτυξη πανίσχυρων webinterface. Το UIKit σας δίνει μια ολοκληρωμένη συλλογή από HTML, CSS και JS συστατικά, είναι απλό στη χρήση, εύκολο να προσαρμοστεί και να επεκταθεί. Το UIKit αναπτύσσεται με LESS για να γράψει καλά δομημένο, με δυνατότητα επέκτασης κώδικα, που είναι εύκολο να διατηρηθεί. Υπάρχει μια συλλογή από responsive components που χρησιμοποιούν συνεπή και conflict-free conventions ονομασίας. Το βασικό στυλ του UIKit μπορεί να επεκταθεί με τα θέματα και είναι εύκολο να το προσαρμόσετε για να δημιουργήσετε το δικό σας. Το UIKit είναι ανοικτού κώδικα και διανείμετε με άδεια MIT. Είναι εντελώς δωρεάν και μπορείτε να το χρησιμοποιήσετε, αντιγράψετε, συγχωνεύσετε, δημοσιεύσετε και διανείμετε χωρίς περιορισμούς. Απαιτήσεις: – Demo: http://getuikit.com/ Άδεια: MIT License

Το HTML5 Maker είναι μια online υπηρεσία / εργαλείο για τη δημιουργία κινούμενου, διαδραστικού περιεχόμενου με χρήση HTML, HTML5, CSS και JavaScript. Είναι πολύ εύκολο στη χρήση και την ίδια στιγμή μπορεί να σας βοηθήσει να επιτύχετε πολύ καλά αποτελέσματα. Επιτρέπει την παραγωγή cross-browser κινούμενου περιεχόμενου, όπως javascript και HTML5 animation, Slideshows, Presentations και Sliders. Το Animation μπορεί εύκολα να ενσωματωθεί στο υπάρχον website προσθέτοντας μια διασκεδαστική ή επαγγελματική εμφάνιση σε αυτό. Η HTML5 Maker πρόκειται για μια συνδρομητική υπηρεσία η οποία παρέχει και συνδρομή χωρίς χρέωση. Ωστόσο, δεν χρειάζεται καν να εγγραφείτε για να χρησιμοποιήσετε την υπηρεσία. Μπορείτε απλά να πατήσετε το κουμπί Δημιουργία Animation στην αρχική σελίδα και να αρχίσετε να εργάζεστε για το έργο σας. Απαιτήσεις: – Demo: http://html5maker.com/ Άδεια: License Free

Το Emmet LiveStyle είναι ένα πρόγραμμα περιήγησης και editor plugin που φέρνει Live CSS στα workflows σας με μια απλή εγκατάσταση. Είναι διαθέσιμο σήμερα, σε Chrome, Safari και Sublime plugins κειμένου (περισσότερα αναμένονται) και υποστηρίζει αμφίδρομο (editor στο πρόγραμμα περιήγησης και το αντίστροφο) μοντάζ. Σε σύγκριση με τις εναλλακτικές λύσεις, έχει μεγάλη διαφορά, καθώς το Emmet livestyle δεν αντικαθιστά το CSS κατά την επεξεργασία, αλλά «δημιουργεί έναν χάρτη των αλλαγών”, το οποίο σας βοηθάει να δείτε εύκολα τι έχει αλλάξει. Μόλις εγκατασταθεί, ορίστε τα τοπικά και τα ζωντανά αρχεία CSS για να ξεκινήσετε, χειρίζεται μόνο του τα υπόλοιπα. Λειτουργεί μάλιστα σε πολλαπλές συσκευές και απόψεις. Μιά νέα έκδοση θα είναι αυτόματα εφαρμόσιμη (χωρίς refresh) σε όλες τις συσκευές, κάτι που είναι φοβερό για την συμβατότητα και την ανταπόκριση σε δοκιμές. Website: http://livestyle.emmet.io/

Η HTML5 είναι από τις πιο δημοφιλείς γλώσσες των προγραμματιστών και των σχεδιαστών, καθώς παρέχει λειτουργικότητα και βοηθά τους προγραμματιστές να σχεδιάζουν εύκολα εφαρμογές web. Το HTML5 έχει πολλά χαρακτηριστικά σε browsers σαν το Firefox 6, Google Chrome, IE9 κ.λπ., τη δομή ειδικών tags, τα οπτικά στοιχεία, drag and drop interactive, νέων βίντεο, ήχου, canvas στοιχεία και πολλά περισσότερα. Σε αυτό το άρθρο υπάρχουν 16 Online tools HTML5 για την απλοποίηση και την επιτάχυνση του HTML5 coding. 1. Mockups Το Moqups είναι μια HTML5 εφαρμογή που χρησιμοποιείται για τη δημιουργία wireframes, mockups ή UI εννοιών, πρωτότυπα ανάλογα με το πώς θέλουμε να τα λέμε. Έχουν προσπαθήσει να κάνουν τα πράγματα απλά και αρκετά ευκολονόητα ώστε να μπορούμε να απελευθερώσουμε τη δημιουργικότητά μας, χωρίς εμπόδια. Το Moqups είναι χτισμένο βάσει κριτηρίων, προσπαθώντας να παρέχει την καλύτερη εμπειρία μέσα στον browser, χωρίς συμβιβασμούς. Πηγή 2. Stitches Το stitches είναι ένα HTML5 σύστημα φύλλων. Απλά σύρουμε και βάζουμε τα αρχεία εικόνας στο χώρο που μας δίνεται, κάνουμε κλικ στο κουμπί “Δημιουργία” για να δημιουργήσουμε μια σελίδα με στυλ. Το stitches χρησιμοποιεί ένα ζευγάρι των HTML5 APIs, και είναι μόνο προς το παρόν συμβατό με τις τελευταίες εκδόσεις του Chrome και Firefox. Ωστόσο, δεν λειτουργεί σε IE9. Απαιτούσε jQuery 1.7.1 +, Modernizr, Dropfile, Flashcanvas για παλαιότερα browsers. Είναι υπό την άδεια του License MIT. Πηγή 3. HTML5 Maker Το HTML5 Maker είναι μια online Animatio υπηρεσία / εργαλείο για τη δημιουργία κινούμενου, διαδραστικού περιεχομένου με χρήση HTML, HTML5, CSS και JavaScript. Είναι πολύ εύκολο στη χρήση και την ίδια στιγμή μπορεί να μας βοηθήσει να επιτευχθούν πολύ καλά αποτελέσματα. Επιτρέπει την παραγωγή cross-browser κινούμενου περιεχομένου, όπως javascript και HTML5 animation, Slideshows, Presentations και Sliders. Πηγή 4. Initializr Το Initializr είναι ένα σύστημα HTML5 templates για να μας βοηθήσει να ξεκινήσουμε με ένα νέο σχέδιο που βασίζεται σε Boilerplate HTML5. Δημιουργεί ένα καθαρό προσαρμόσιμο template με ακριβώς αυτό που χρειαζόμαστε για να ξεκινήσουμε. Πηγή 4. Sprite Box Το Spritebox είναι ένα εργαλείο WYSIWYG για να βοηθήσει τους σχεδιαστές ιστοσελίδων να δημιουργήσουν εύκολα και γρήγορα CSS classes και IDs από μια μοναδική εικόνα sprite. Βασίζεται στην αρχή του να χρησιμοποιούμε το background – position property για την ευθυγράμμιση περιοχών μιας εικόνας sprite σε στοιχεία διαγράμματος μιας ιστοσελίδας. Αυτό έγινε με ένα συνδυασμό JQuery, CSS3 και HTML5, και είναι δωρεάν στη χρήση. Πηγή 5. Liveweave Το Liveweave αποτελείται από στοιχεία HTML5, CSS3 και Javascript για web developers και designers. Το Liveweave έχει ενσωματωμένη context-sensitive αυτόματη συμπλήρωση για HTML4/HTML5 και CSS2/CSS3, και το κάνει πιο εύκολο. Ας συνεχίσουμε την πληκτρολόγηση των HTML5 και CSS3 tags / στοιχείων που χρειαζόμαστε. Η ευκολία της γραφής HTML5 και CSS3 θα είναι κάτι αρκετά θετικό. Πηγή 6. Literally Canvas Το Literally Canvas είναι ένα λογισμικό ανοικτού κώδικα HTML5 widget, το οποίο μπορεί να ενσωματωθεί σε οποιαδήποτε σελίδα, που να επιτρέπει στους χρήστες να σχεδιάζουν online. Έχει ένα απλό σύνολο εργαλείων, συμπεριλαμβανομένου το σχεδιασμό, τη διαγραφή, την επιλογή χρώματος, τα κουμπιά undo, redo, pan και zoοm. Το widget είναι φτιαγμένο με jQuery Underscore.js + και έχει ένα API για να καθορίσει το χρώμα του φόντου, τα εργαλεία και τις διαστάσεις. Πηγή 7. HTML5 Demos Τα HTML5 Demos θα μας ενημερώσουν αμέσως αν ο Firefox υποστηρίζει HTML5 canvas ή αν ο Safari μπορεί να χρησιμοποιήσει το HTML5 simple chat client ή όχι. Πηγή 8. HTML5 Visual Cheat Sheet Αυτό το cheat sheet είναι ουσιαστικά ένα απλό οπτικό δίκτυο με έναν κατάλογο όλων των HTML tags και των σχετικών χαρακτηριστικών τους, που υποστηρίζονται από HTML εκδόσεις 4.01 ή / και 5. Το απλό οπτικό στυλ που χρησιμοποιείται μας επιτρέπει να βρούμε με μια ματιά όλα αυτά που ψάχνουμε. Πηγή 9. Switch to HTML5 Η αλλαγή σε HTML5 είναι ένα βασικό και αποτελεσματικό σύστημα template. Αν ξεκινάμε ένα νέο project, θα πρέπει να επισκεφθούμε την ιστοσελίδα και θα έχουμε ένα δωρεάν HTML5 website template. Πηγή 10. Online SVG to HTML5 Canvas Tool Αυτό το εργαλείο μετατρέπει το SVG σε λειτουργία HTML5 Canvas JavaScript. Συνεργάζεται με οποιοδήποτε host, και βοηθά τους ανθρώπους να πειραματιστούν με το canvas. Οι περισσότεροι φορείς πακέτων (Illustrator, Inkscape κλπ) μπορούν να εξαχθούν ως SVG. Πηγή 11. On/OFF FlipSwitch Πηγή 12. HTML5 Test Το HTML5 test score είναι μια ένδειξη του πόσο καλά ο browser μας υποστηρίζει τα επικείμενα HTML5 standard και τις σχετικές προδιαγραφές. Ακόμη και αν η προδιαγραφή δεν έχει οριστικοποιηθεί ακόμα, όλοι οι κατασκευαστές browsers διασφαλίζουν έτσι ώστε οι browsers να είναι έτοιμοι για το μέλλον. Μαθαίνουμε ποια είναι τα μέρη του HTML5 που ήδη υποστηρίζονται από το browser μας και συγκρίνουμε τα αποτελέσματα με άλλους browsers. Πηγή 13. Patternizer Το Patternizer είναι ένα εύκολο σύστημα για να χρησιμοποιήσουμε μοτίβο με ραβδώσεις. Πηγή 14. Lime JS Πρόκειται για ένα πλαίσιο παιχνιδιού HTML5 για τη δημιουργία παιχνιδιών έτσι ώστε να δουλέψει στις σύγχρονες οθόνες αφής και τα desktop browsers. Το LimeJS έχει δημιουργηθεί με το Closure Library built από την Google και συνοδεύεται με λειτουργίες / classes για να ελέγχει το timeline, τα γεγονότα, τα σχήματα και τα κινούμενα σχέδια. Επίσης, το πλαίσιο έχει την πλήρη υποστήριξη Sprite φύλλων (μπορούμε να συλλέξουμε όλες τις εικόνες μέσα σε ένα ενιαίο αρχείο). Πηγή 15. HTML5 Reset Το HTML5 Reset είναι ένα σύνολο αρχείων (HTML, CSS, κ.λπ.) που έχουν σχεδιαστεί για να βοηθά τους χρήστες και εξοικονομεί χρόνο για τα νέα έργα τους. Πηγή

Αναγνωρίζοντας τον τύπο δεδομένων με την gettype( ) Η PHP για να μας βοηθήσει στην αναγνώριση του τύπου δεδομένων έχει ενσωματώσει την function gettype( ) που κάνει αυτήν ακριβώς την δουλειά. Παίρνει ως παράμετρο την μεταβλητή και επιστρέφει λεκτικά τον τύπο των δεδομένων που υπάρχουν μέσα της. τα λεκτικά που μπορεί να επιστρέψει είναι τα εξής: integer string double boolean array object resource NULL unknown type Ας δούμε κάποια από αυτά με το παρακάτω παράδειγμα. κώδικας: <html> <head> <title>Τι τύπο δεδομένων έχει η κάθε μεταβλητή;</title> </head> <body> <?PHP $var = 5; echo gettype( $var ); // integer ?> <br> <?PHP $var = "κείμενο"; echo gettype( $var ); // string ?> <br> <?PHP $var = 5.0; echo gettype( $var ); // double ?> <br> <?PHP $var = true; echo gettype( $var ); // boolean ?> </body> </html> Στο παραπάνω παράδειγμα είδαμε ακόμα ότι έχοντας βασικά πάντα την ίδια μεταβλητή μπορέσαμε κατά την διάρκεια εκτέλεσης να τοποθετήσουμε μέσα της όλους τους βαθμωτούς (scalar) τύπους δεδομένων που υπάρχουν στην PHP. Εκτός από την gettype() έχουμε και μια σειρά από functions της PHP που μας βοηθάνε να δούμε τι τύπο δεδομένων έχει μέσα της μια μεταβλητή. Αυτές είναι οι εξής: is_array() - True αν είναι πίνακας is_float() - True αν είναι αριθμός κινητής υποδιαστολής is_int() - True αν είναι ακέραιος αριθμός is_object() - True αν είναι αντικείμενο is_string() - True αν είναι αλφαριθμητικό

Διάρκεια Ζωής μιας μεταβλητής Η Διάρκεια Ζωής μιας μεταβλητής ξεκινάει από την στιγμή που παίρνει για πρώτη φορά τιμή (δηλώνετε) και σταματάει να υφίσταται όταν ολοκληρωθεί η διαδικασία μέσα στην οποία δηλώθηκε. Εμβέλεια μιας μεταβλητής Η Εμβέλεια μιας μεταβλητής ορίζετε από την εμβέλεια της διαδικασίας μέσα στην οποία έχει ορισθεί. Εάν για παράδειγμα έχει ορισθεί μέσα σε μια procedure ή μέσα σε μια function η εμβέλειά της είναι μόνο μέσα εκεί. Εάν έχει ορισθεί στον κυρίως κορμό του προγράμματος η εμβέλειά της και πάλι είναι μόνο μέσα εκεί και στα πιθανά κομμάτια τους κορμού από εξωτερικά αρχεία, αλλά όχι και μέσα στις περιεχόμενες procedures ή functions. Ονομάζετε όμως καθολική (global), για τον λόγω ότι έχουμε τρόπο να την χρησιμοποιήσουμε όπου θέλουμε. κώδικας: <?php $num = 3; include "config.inc"; ?> Η μεταβλητή $num θα υφίσταται και μέσα στο config.inc. Αλλά τι γίνετε όταν έχουνε κάποια function που την έχουμε ορίσει εμείς; κώδικας: <?php $num = 3; /* εμβέλεια στον κορμό του προγράμματος */ function Test() { echo $num; /* εμβέλεια μόνο μέσα στην function */ } Test(); ?> Το παραπάνω παράδειγμα δε θα μας βγάλει τίποτα, μιας και μέσα στην function δεν έχουμε δώσει τιμή στην μεταβλητή $num. Για να δούμε ακόμα ένα παράδειγμα που θα μας φέρει κάποια αποτελέσματα. κώδικας: <?php $num = 3; /* εμβέλεια στον κορμό του προγράμματος */ function Test() { $num = 8; /* εμβέλεια μόνο μέσα στην function */ echo $num; } echo $num; Test(); echo $num; ?> Με αυτό θα πάρουμε το αποτέλεσμα 383 και αυτό γιατί το $num του κορμού δεν επηρεάζετε από $num της function, το οποίο έχει εμβέλεια και διάρκεια ζωής όσο διαρκεί και η εκτέλεση της function. Εάν θέλουμε η function να χρησιμοποιήσει την μεταβλητή του κορμού δεν έχουμε παρά να της πούμε ότι αυτή η μεταβλητή είναι καθολική (global) και δεν είναι τοπικής εμβέλειας. κώδικας: <?php $num = 3; /* εμβέλεια στον κορμό του προγράμματος */ function Test() { global $num; /* του λέμε να χρησιμοποιήσει την μεταβλητή του κορμού */ $num = 8; echo $num; } echo $num; Test(); echo $num; ?> Με αυτόν τον τρόπο το αποτέλεσμα που θα πάρουμε θα είναι το 388, μιας και μέσα στην function με το global $num; είπαμε να μη δημιουργήσει μια νέα θέση μνήμης για μια τοπική μεταβλητή, αλλά να χρησιμοποιήσει την ίδια την μεταβλητή του κορμού. Γι' αυτό και ότι πράξεις κάνουμε μέσα στην function με αυτήν την μεταβλητή θα έχει αντίκτυπο και έξω από αυτήν. Ένας άλλος τρόπος να κάνουμε το ίδιο πράγμα είναι και ο εξής: κώδικας: <?php $num = 3; /* εμβέλεια στον κορμό του προγράμματος */ function Test() { $GLOBALS['num'] = 8; /* του λέμε να χρησιμοποιήσει την μεταβλητή του κορμού */ echo $GLOBALS['num']; } echo $num; Test(); echo $num; ?> Το $GLOBALS είναι ένας πίνακας που περιέχει όλες τις μεταβλητές του κορμού και η εμβέλειά του είναι παντού (superglobal). Όλες οι μεταβλητές που η εμβέλειά τους είναι παντού (superglobals) και δεν χρειάζεται να ορισθούν ως καθολικές (global) σε ένα υποπρόγραμμα (function ή procedure): $GLOBALS $_SERVER $_GET $_POST $_COOKIE $_FILES $_ENV $_REQUEST $_SESSION Περισσότερα για τις supperglobals μεταβλητές: http://www.php.net/manual/en/language.variables.predefined.php#lang...bles.superglobals

Οι μεταβλητές (variables) γενικά H μεταβλητή είναι μια αναφορά σε μια θέση μνήμης του υπολογιστή μας, που κατά την διάρκεια εκτέλεσης ενός προγράμματος μπορούν να αποθηκευτούν πληροφορίες. Αυτές οι πληροφορίες μπορεί να αλλάζουν ή να λάβουν μέρος σε πράξεις μαζί με άλλες μεταβλητές ή σταθερές τιμές. Κάθε μεταβλητή έχει ένα συγκριμένο όνομα που την χαρακτηρίζει, μια συγκεκριμένη εμβέλειας και μια συγκεκριμένη διάρκεια ζωής. Στις νεότερες γλώσσες προγραμματισμού, όπως και στην PHP, δε μας ενδιαφέρει σε ποια ακριβός θέση μνήμης έχουν τοποθετηθεί οι πληροφορίες της μεταβλητής μας. Αυτό που μας ενδιαφέρει είναι ότι μόνο με το όνομά της μπορούμε να προσπελάσουμε αυτήν την πληροφορία και να την αξιοποιήσουμε όπως εμείς θέλουμε. Τα ιδιαίτερα χαρακτηριστικά των μεταβλητών (variables) στην PHP Στην PHP τις μεταβλητές δεν χρειάζεται να τις ορίσουμε πριν τις χρησιμοποιήσουμε και μπορούμε κατά την εκτέλεση να αλλάξουμε τον τύπο δεδομένων τους κάτω από συγκεκριμένους όρους. Οι μεταβλητές της PHP αντιπροσωπεύονται από ένα σημάδι δολαρίου που ακολουθείται από το όνομα της μεταβλητής. Τα ονόματα των μεταβλητών είναι ευαίσθητα στα κεφαλαία και μικρά (case-sensitive). Ένα έγκυρο όνομα μεταβλητής αρχίζει με ένα γράμμα ή κάτω παύλα (underscore) ακολουθούμενο από οποιονδήποτε αριθμό ή γράμμα, ή γράμματα, αριθμούς, και κάτω παύλες. Οι αναθέσεις τιμών σε μια μεταβλητή γίνετε με το όνομά της ακολουθούμενο από το σύμβολο της ανάθεσης που είναι το = και αμέσως μετά την πληροφορία που θέλουμε να τοποθετήσουμε στην θέση μνήμης που αναφέρει. Σωστά ονόματα μεταβλητών στην PHP με αναθέσεις τιμών κώδικας: $var = "my first varriable"; $Var = "my 2nd variable"; //(αυτή είναι διαφορετική από την προηγούμενη γιατί έχει κεφαλαίο V) $_EnyVar = "an other variable"; $iNum = 12; $dNum = 15.6; Λάθος ονόματα μεταβλητών στην PHP κώδικας: $2num = 2; //ξεκινάει με αριθμό Jbl = 3; // δεν έχουμε βάλει το αρχικό $ Οι αναθέσεις με αναφορά (reference) γίνονται με το σύμβολο &. Με λίγα λόγια με αυτόν τον τρόπο καταφέρνουμε να συνδέσουμε δύο μεταβλητές και να έχουμε πρόσβαση στην ίδια πληροφορία με διαφορετικά ονόματα μεταβλητών. Πχ. κώδικας: <?php $foo = 'Bob'; // βάζουμε την τιμή 'Bob' στο $foo $bar = &$foo; // Συνδέουμε το $foo μέσω του $bar. $bar = "My name is $bar"; // αλλάζουμε το $bar... echo $bar; echo $foo; // βλέπουμε ότι και το $foo άλλαξε... ?> Σχετικά τις αναφορές (references): http://www.php.net/manual/el/language.references.php http://www.obdev.at/developers/articles/00002.html

Ας δούμε τώρα ποιους τύπους δεδομένων έχουμε στην PHP. Τέσσερις βαθμωτούς τύπους: boolean του Μπουλ (True/False) integer ακέραιοι αριθμοί floating-point number (float) - (double) αριθμοί κινητής υποδιαστολής string αλφαριθμητικά Δύο σύνθετους τύπους: array πίνακες object αντικείμενα Και δύο ειδικούς τύπους resource τιμές αναφοράς με εξωτερικές πηγές NULL ειδική μεταβλητή που χαρακτηρίζει το 'τίποτα' ή το 'μη ορισμένο'. Με την συνάρτηση gettype() η PHP μας λέει τι τύπου είναι η μεταβλητή που έχουμε Πχ. κώδικας: <?php $v = 5/2; $v1 = -3; $v2 = "Testing..."; $v3 = True; echo $v."<br />"; echo $v1."<br />"; echo $v2."<br />"; echo $v3."<br />"; echo "<br />"; echo gettype($v)."<br />"; echo gettype($v1)."<br />"; echo gettype($v2)."<br />"; echo gettype($v3); ?> Αυτό θα μας βγάλει: παράθεση: 2,5 -3 Testing... 1 Double Integer String Boolean Βλέπουμε ότι το True στο boolean μας το εξαφανίζει ως 1, αντίστοιχα στην τιμή False θα μας εμφάνιζε 0 και όχι κάποιο από τα λεκτικά True/False.

Δημιουργούμε ένα νέο text αρχείο με το notepad και το ονομάζουμε first.php Μέσα σε αυτό το αρχείο γράφουμε: κώδικας: <?PHP echo "Hello World!"; ?> Το σώζουμε και το τοποθετούμε με FTP στον web server μας. Το συγκεκριμένο script θα πρέπει να μας εμφανίσει στον browser μας την φράση Hello World!. Με το ετικέτα <?PHP λέμε στον διακομιστή μας ότι από εκεί αρχίζει το PHP script μας και ότι υπάρχει μετά από αυτό θα πρέπει να περάσει από τον μεταφραστή της PHP πριν στείλει κάτι στον browser του πελάτη. Η μετάφραση σταματάει έως να βρει την ετικέτα τέλους κώδικα η οποία είναι η ?> Ανάμεσα τοποθετήσαμε την εντολή echo "Hello World!"; όπου το μόνο που λέει στον μεταφραστή είναι να εμφανίσει στην έξοδο την φράση Hello World! Οι κλασικές ετικέτες αρχής και τέλους ενός PHP κώδικα είναι, όπως είπαμε, η <?PHP και η ?>. Υπάρχει όμως και η σύντμηση αυτών η οποία συντάσσετε ως <? Για την αρχής, ενώ η ετικέτα τέλους μένει ως έχει ?> . Σε αυτήν την περίπτωση δηλαδή το script μας θα ήταν ως εξής. κώδικας: <? echo "Hello World!"; ?> Για το αν θα γίνονται δεκτές οι συντμήσεις των ετικετών ευθύνεται μια παράμετρος στο php.ini αρχείο μας: short_open_tag = On; Αν είναι στο On τότε έχουμε ενεργοποιημένες τις συντμήσεις. Μια άλλη παράμετρος που έχουμε στο php.ini μας για τις ετικέτες αρχής και τέλους του PHP κώδικα είναι και η asp_tags = On; Όπου εάν την έχουμε στο On η PHP καταλαβαίνει και τις ετικέτες τύπου ASP. Δηλαδή στην περίπτωσή μας θα έχουμε: κώδικας: <% echo "Hello World!"; %> Ένας ακόμα τρόπος για να πούμε ότι ο κώδικας που ακολουθεί είναι PHP είναι η χρησιμοποίηση της ετικέτας SCRIPT ως εξής: κώδικας: <SCRIPT LANGUAGE="php"> echo "Hello World!"; </SCRIPT> Απ' ότι βλέπετε έχουμε πολλούς τρόπους για να περιγράψουμε στον διακομιστή μας ότι ο κώδικας που ακολουθεί θα πρέπει να επεξεργαστεί από τον μεταφραστή της PHP. Εμείς θα χρησιμοποιούμε το κλασικό <?PHP και ?> Για να βάλουμε σχόλια στον κώδικά μας μπορούμε να βάλουμε // ή # ή /* και */ για πολλές γραμμές σχολίων. Πχ. // αυτό είναι ένα σχόλιο # αυτό είναι άλλο ένα σχόλιο /* εδώ θα βάλουμε πάνω από μια γραμμή με σχόλια */ Στο πρώτο βοήθημα της σειράς είχαμε πει ότι ο PHP κώδικας περικλείετε από HTML. Ας δούμε πως μπορεί να γίνει το first.php εμπλουτισμένο με HTML. κώδικας: <html> <head> <title>My First PHP script</title> </head> <body> <i> <?PHP echo "Hello World!"; ?> </i> </body> </html> Έτσι θα έχουμε ένα σωστά δομημένο HTML και η φράση Hello World! θα εμφανίζετε με πλαγιαστή γραφή. το τελικό παραγόμενο HTML αρχείο θα είναι ως εξής: κώδικας: <html> <head> <title>My First PHP script</title> </head> <body> <i> Hello World! </i> </body> </html>

Εδώ θα δούμε κάποιους αυτόματους installers που περιέχουν τουλάχιστον PHP, MySQL και Apache για Windows . Η διαδικασία εγκατάστασής τους είναι πολύ απλή και συνήθως το μόνο που χρειάζεται να πατάμε είναι το κουμπί Next (Επόμενο). Η προτιμότεροι έκδοση για εγκατάσταση είναι αυτή του AppServ με την PHP 4.x για πιο εύκολη προσαρμογή και για να μην έχουμε προβλήματα με τα Ελληνικά. Τελειώνοντας την εγκατάσταση, εάν επιλέξουμε να τρέξει ο Apache, πληκτρολογώντας στον browser μας την διεύθυνση http://localhost/ θα πρέπει να δούμε την αρχική οθόνη που μας καλωσορίζει στον νέο μας τοπικό web server που περιέχει PHP και MySQL. Τα περιεχόμενα των πακέτων που γράφω είναι αυτά που υπάρχουν στην τελευταία, μέχρι στιγμής, έκδοση. AppServ http://www.appservnetwork.com/ Περιέχει δύο εκδόσεις, μια με: - Apache 1.3.33 - PHP 4.3.11 - MySQL 4.0.24 - phpMyAdmin-2.5.7-pl1 - MyODBC-3.51.11-2 και μια με: - Apache 2.0.54 - MySQL 4.1.12a - PHP 5.0.4 - phpMyAdmin-2.6.2pl1 - MyODBC-3.51.11-2 e-novative WAMP http://www.e-novative.info/software/wamp.php Περιέχει: Apache, PHP 5, MySQL 4.1, PEAR WAMP5 http://www.en.wampserver.com/ - MySQL 5.0.15 - PHP 5.0.5 (5.1 will be for next release) - sqlitemanager 1.1.2 - phpmyadmin 2.6.4-pl3 - Apache 1.3.33 Easy Web Server http://e.w.s.free.fr/site/ Περιέχει: - Apache 2.0.54 - PHP4Apache2 4.4.0 - MySQL 4.0.24 - PHPMyAdmin 2.6.3 PL1 - EWS Manager 1.85 - WDScript 2.1.9.6 - SQLManagerX Addon 1.7.0.2 - Webalizer 2.01.10 - Mini Perl 5.8.3 - Smarty 2.6.9 - SQLite 2.8.14 - SQLiteManager 1.1.0 - SlimFTPd 3.16 - PHPsFTPd 0.5 - eAccelerator 0.9.4-dev

Εδώ θα περιγράψω με πολύ απλά λόγια, και χωρίς να μπω σε πολύ βαθιά, το πως θα μπορέσουμε να κάνουμε εγκατάσταση της PHP με MySQL και Apache σε ένα windows μηχάνημα. Που θα βρούμε τι: Apache http://httpd.apache.org/download.cgi (επιλέγουμε το Win32 Binary της έκδοσης που θέλουμε) PHP http://www.php.net/downloads.php (επιλέγουμε το Windows Binary της έκδοσης που θέλουμε) MySQL http://dev.mysql.com/downloads/ (επιλέγουμε την έκδοση που θέλουμε και βρίσκουμε στα Windows downloads την Windows Essentials (x86) ή την Windows (x86)) Πως θα εγκαταστήσουμε τι: με αυτήν την σειρά εγκαθιστούμε Apache online: http://httpd.apache.org/docs/1.3/windows.html#inst PHP online: http://www.php.net/manual/en/install.windows.php MySQL online: http://dev.mysql.com/doc/refman/4.1/en/windows-using-installer.html

Η PHP είναι μια γλώσσα προγραμματισμού που σχεδιάστηκε για τη δημιουργία δυναμικών σελίδων στο δυαδίκτυο και είναι επισήμως γνωστή ως: HyperText preprocessor. Είναι μια server-side (εκτελείτε στον διακομιστή) scripting γλώσσα που γράφεται συνήθως πλαισιωμένη από HTML, για μορφοποίηση των αποτελεσμάτων. Αντίθετα από μια συνηθισμένη HTML σελίδα η σελίδα PHP δεν στέλνεται άμεσα σε έναν πελάτη (client), αντ' αυτού πρώτα αναλύεται και μετά αποστέλλεται το παραγόμενο αποτέλεσμα. Τα στοιχεία HTML στον πηγαίο κώδικα μένουν ως έχουν, αλλά ο PHP κώδικας ερμηνεύεται και εκτελείται. Ο κώδικας PHP μπορεί να θέσει ερωτήματα σε βάσεις δεδομένων, να δημιουργήσει εικόνες, να διαβάσει και να γράψει αρχεία, να συνδεθεί με απομακρυσμένους υπολογιστές , κ.ο.κ. Σε γενικές γραμμές οι δυνατότητες που μας δίνει είναι απεριόριστες. Αρχικά η ονομασία της ήταν PHP/FI από το Forms Interpreter η οποία δημιουργήθηκε το 1995 από τον Rasmus Lerdorf ως μια συλλογή από Perl scripts που τα χρησιμοποιούσε στην προσωπική του σελίδα. Δεν άργησε να τα εμπλουτίσει με λειτουργίες επεξεργασίας δεδομένων με SQL, αλλά τα σημαντικά βήματα που έφεραν και την μεγάλη αποδοχή της PHP ήταν αρχικά η μετατροπή τους σε C και μετέπειτα η δωρεάν παροχή του πηγαίου κώδικα μέσω της σελίδας του ώστε να επωφεληθούν όλοι από αυτό που είχε φτιάξει, αλλά και να τον βοηθήσουν στην περαιτέρω ανάπτυξή της. Περισσότερα ιστορικά στοιχεία. http://gr.php.net/history/ Η σελίδα που μπορείτε να δείτε όλες τις εξελίξεις και της νέες εκδόσεις από την δημοφιλής γλώσσα είναι η http://www.php.net/

Γιατί χρειάζεται μια νέα εισαγωγή; Διότι η JavaScript μπορεί δίκαια να ισχυριστεί ότι είναι η πιο παρεξηγημένη γλώσσα του κόσμου. Αν και συχνά γίνεται αντικείμενο χλευασμού και χαρακτηρίζεται ως παιχνίδι, πίσω από την απατηλή της απλότητα κρύβονται μερικά ισχυρά γλωσσικά στοιχεία. Ο χρόνος που πέρασε είδε να ξεφυτρώνουν ένας αριθμός από εφαρμογές JavaScript μεγάλης εμβέλειας, δείχνοντας ότι η βαθύτερη γνώση αυτής της τεχνολογίας είναι ένα σημαντικό προσόν για κάθε web developer. Είναι χρήσιμο να αρχίσουμε με μια ιδέα από την ιστορία της γλώσσας. Η JavaScript δημιουργήθηκε το 1995 από τον Brendan Eich, έναν μηχανικό της Netscape, και εκδόθηκε με τον Netscape 2 στις αρχές του 1996. Το αρχικό της όνομα ήταν LiveScript, αλλά μια ατυχής απόφαση μάρκετινγκ την μετονόμασε σε JavaScript. Το σκεπτικό ήταν να κεφαλαιοποιηθεί η δημοτικότητα της γλώσσας Java της Sun, παρότι οι δύο γλώσσες έχουν ελάχιστα κοινά στοιχεία μεταξύ τους. Αυτό αποτελεί μόνιμη πηγή σύγχυσης από τότε μέχρι σήμερα. Μερικούς μήνες αργότερα η Microsoft παρουσίασε μια σε γενικές γραμμές συμβατή έκδοση της γλώσσας με το όνομα JScript (μαζί με τον IE3). Η Netscape υπέβαλλε τη γλώσσα στον ECMA International, έναν Ευρωπαϊκό οργανισμό προτύπων, μια πρωτοβουλία που κατέληξε στην πρώτη έκδοση της EcmaScript το 1997. Το πρότυπο έφτασε στην έκδοση 3 το 1999 και από τότε παρέμεινε γενικά αμετάβλητο, αν και η έκδοση 4 βρίσκεται σε φάση ανάπτυξης. Αυτή η σταθερότητα υπήρξε καλοδεχούμενη από τους developers, καθώς έδωσε χρόνο στις διάφορες υλοποιήσεις να προσαρμοστούν. Θα εστιάσω σχεδόν αποκλειστικά στη διάλεκτο της έκδοσης 3. Στο εξής θα παραμείνω στον όρο JavaScript για λόγους οικειότητας. Αντίθετα από τις περισσότερες γλώσσες προγραμματισμού η γλώσσα JavaScript δεν έρχεται εφοδιασμένη με δυνατότητες εισόδου/εξόδου. Είναι σχεδιασμένη ως γλώσσα scripting σε ένα περιβάλλον που τη φιλοξενεί, και η ύπαρξη μηχανισμών επικοινωνίας με τον έξω κόσμο είναι ευθύνη αυτού του περιβάλλοντος. Το πιο συνηθισμένο περιβάλλον φιλοξενίας είναι ο browser, αλλά interpreters JavaScript μπορούν να βρεθούν στον Acrobat της Adobe, το Photoshop, τη μηχανή Widget της Yahoo! και αλλού. Γενική Εικόνα Ας αρχίσουμε κοιτάζοντας το δομικό λίθο κάθε γλώσσας, τους τύπους. Τα προγράμματα JavaScript χειρίζονται τιμές, και όλες αυτές οι τιμές ανήκουν σε έναν τύπο. Οι τύποι τις JavaScript είναι: - Numbers - Strings - Booleans - Functions - Objects ...α, και Undefined και Null, που είναι κάπως παράξενοι τύποι. Και Arrays, που είναι ειδικού τύπου αντικείμενα. Και Dates και Regular Expressions που είναι αντικείμενα που παίρνετε δωρεάν. Και για να είμαι τεχνικά ακριβής οι functions δεν είναι παρά ειδικού τύπου αντικείμενα. Επομένως το διάγραμμα των τύπων μοιάζει περισσότερο με αυτό: - Number - String - Boolean - Object --- Function --- Array --- Date --- RegExp - Null - Undefined Και υπάρχει επίσης κι ένας ενσωματωμένος τύπος Error. Ωστόσο τα πράγματα είναι πολύ ευκολότερα αν παραμείνουμε στο πρώτο διάγραμμα. Αριθμοί Οι αριθμοί στη JavaScript είναι «τιμές διπλής-ακρίβειας 64-bit μορφής IEEE 754», σύμφωνα με τις προδιαγραφές. Αυτό έχει μερικές ενδιαφέρουσες συνέπειες. Δεν υπάρχουν ακέραιοι στη JavaScript, επομένως πρέπει να είστε λίγο προσεκτικοί με την αριθμητική σας αν έχετε συνηθίσει τα μαθηματικά της Java ή της C. Να είστε σε εγρήγορση για καταστάσεις σαν: κώδικας: 0.1 + 0.2 = 0.30000000000000004 Υποστηρίζονται οι τυπικοί αριθμητικοί τελεστές, που περιλαμβάνουν πρόσθεση, αφαίρεση, υπόλοιπο ακέραιας διαίρεσης και λοιπά. Υπάρχει επίσης ένα ενσωματωμένο αντικείμενο που ξέχασα να αναφέρω προηγούμενα και λέγετε Math για το χειρισμό πιο προχωρημένων μαθηματικών συναρτήσεων και σταθερών: κώδικας: Math.sin(3.5); d = Math.PI * r * r; Μπορείτε να μετατρέψετε έναν αριθμό χρησιμοποιώντας την ενσωματωμένη συνάρτηση parseInt(). Αυτή δέχεται την αριθμητική βάση της μετατροπής ως προαιρετικό δεύτερο όρισμα, το οποίο θα πρέπει να παρέχετε πάντα: κώδικας: > parseInt("123") 123 > parseInt("010") 8 Αυτό συνέβη γιατί η συνάρτηση parseInt αποφάσισε να χειριστεί το string σαν οκταδικό αριθμό λόγω του αρχικού ψηφίου 0. Αν φροντίσετε να ορίζετε πάντα τη βάση μπορείτε να αποφύγετε εντελώς αυτό το πρόβλημα: κώδικας: > parseInt("123", 10) 123 > parseInt("010", 10) 10 Αν θέλετε να μετατρέψετε ένα δυαδικό αριθμό σε δεκαδικό απλά αλλάξτε τη βάση: κώδικας: > parseInt("11", 2) 3 Η JavaScript έχει επίσης μία ειδική τιμή που λέγεται Not-a-Number. Αυτή κάνει την εμφάνισή της όταν προσπαθήσετε να κάνετε πράγματα όπως να μετατρέψετε μια μη-αριθμητική τιμή σε αριθμό. κώδικας: > parseInt("hello", 10) NaN Η τιμή NaN είναι τοξική. Αν τη δώσετε ως είσοδο σε οποιαδήποτε αριθμητική πράξη το αποτέλεσμα θα είναι επίσης NaN: κώδικας: > NaN + 5 NaN Μπορείτε να την ανιχνεύσετε χρησιμοποιώντας την ενσωματωμένη συνάρτηση isNaN: κώδικας: > isNaN(NaN) true Η JavaScript έχει επίσης ειδικές τιμές για το θετικό και αρνητικό άπειρο. κώδικας: > 1 / 0 Infinity > -1 / 0 -Infinity Strings Τα strings στη JavaScript είναι ακολουθίες χαρακτήρων. Για την ακρίβεια είναι ακολουθίες χαρακτήρων unicode, με κάθε χαρακτήρα να αντιστοιχεί σε ένα αριθμό 16 bit. Αυτό θα πρέπει να ακούγεται ευχάριστα στα αυτιά οποιουδήποτε ασχολήθηκε ποτέ με internationalization. Όταν χρειάζεστε ένα μεμονωμένο χαρακτήρα απλά χρησιμοποιείστε ένα string με μήκος 1. Για να βρείτε το μήκος ενός string, χρησιμοποιείστε την ιδιότητα length. κώδικας: > "hello".length 5 Να η πρώτη μας επαφή με τα αντικείμενα JavaScript! Αλήθεια, ανέφερα ότι και τα strings είναι αντικείμενα; Έχουν και μεθόδους: κώδικας: > "hello".charAt(0) h > "hello, world".replace("hello", "goodbye") goodbye, world > "hello".toUpperCase() HELLO Άλλοι τύποι Το null σημαίνει μία εσκεμμένη μη-τιμή. Το undefined σημαίνει ότι δεν έχει ακόμα αποδοθεί κάποια τιμή. Θα μιλήσουμε για τις μεταβλητές αργότερα, αλλά στη JavaScript είναι δυνατό να ορίσουμε μια μεταβλητή χωρίς να της δώσουμε τιμή. Αν το κάνουμε αυτό η τιμή της μεταβλητής είναι η τιμή «undefined». Η JavaScript έχει ένα τύπο boolean, ο οποίος είναι είτε true είτε false (και τα δύο είναι keywords). Οτιδήποτε άλλο στη γλώσσα θεωρείται είτε αληθές είτε ψευδές, το οποίο προσδιορίζει τι συμβαίνει όταν χρησιμοποιηθεί σε θέση boolean. Οι κανόνες περί αλήθειας και ψεύδους είναι οι εξής: 0, "", NaN, null, και undefined είναι ψευδή. Οτιδήποτε άλλο είναι αληθές. Υποστηρίζονται τελεστές boolean όπως &&, || και !. Μπορείτε να μετατρέψετε κάθε τιμή σε boolean εφαρμόζοντας δύο φορές τον τελεστή άρνησης: κώδικας: > !!"" false > !!234 true Μεταβλητές Οι μεταβλητές στη JavaScript δηλώνονται με τη χρήση του keyword var: κώδικας: var a; var name = "simon"; Αν δηλώσετε μια μεταβλητή χωρίς να της αποδώσετε κάτι, η τιμή της είναι undefined. Τελεστές Οι αριθμητικοί τελεστές της JavaScript είναι οι +, -, *, / και %, το οποίο είναι το υπόλοιπο ακέραιας διαίρεσης. Οι τιμές αποδίδονται με =, και υπάρχουν επίσης σύνθετες εντολές απόδοσης όπως += και -= οι οποίες αναλύονται σε x = x τελεστής y. κώδικας: x += 5 x = x + 5 Μπορείτε να χρησιμοποιήσετε τους ++ και -- για άυξηση και μείωση αντίστοιχα. Αυτοί μπορούν να τοποθετηθούν πριν ή μετά τη μεταβλητή (prefix/postfix operators). Ο τελεστής + κάνει επιπλέον και συνένωση string: κώδικας: > "hello" + " world" hello world Αν προσθέσετε έναν αριθμό κι ένα string (ή άλλη τιμή) τα πάντα μετατρέπονται σε string πριν την πράξη. Αυτό μπορεί να σας συλλάβει εξ απροόπτου: κώδικας: > "3" + 4 + 5 345 > 3 + 4 + "5" 75 Ένας χρήσιμος τρόπος να μετατρέψετε κάτι σε string είναι να του προσθέσετε το κενό string. Οι συγκρίσεις στη JavaScript μπορούν να γίνουν με χρήση των <, >, <= και >=. Αυτοί λειτουργούν εξίσου με strings και αριθμούς. Η ισότητα είναι ελαφρά πιο περίπλοκη. Ο τελεστής == πραγματοποιεί μετατροπή τύπου αν του δώσετε διαφορετικούς τύπους, με ενίοτε ενδιαφέροντα αποτελέσματα: κώδικας: > "dog" == "dog" true > 1 == true true Αν αυτές οι μετατροπές είναι ανεπιθύμητες χρησιμοποιήστε τον τελεστή τριπλό-ίσον: κώδικας: > 1 === true false > true === true true Υπάρχουν επίσης τελεστές != και !==. Η JavaScript έχει ακόμα και δυαδικούς τελεστές. Αν ποτέ τους επιθυμήσετε, εκεί είναι. Δομές Ελέγχου Η JavaScript έχει ένα παραπλήσιο πακέτο δομών ελέγχου με άλλες γλώσσες της οικογένειας C. Οι εκτέλεση εντολών κατά συνθήκη υποστηρίζεται με τα if και else. Μπορείτε να σχηματίσετε αλυσίδες απ' αυτά αν θέλετε: κώδικας: var name = "kittens"; if (name == "puppies") { name += "!"; } else if (name == "kittens") { name += "!!"; } else { name = "!" + name; } name == "kittens!!" Η JavaScript έχει βρόγχους while και do-while. Ο δεύτερος είναι καλός όταν θέλουμε να είμαστε σίγουροι πως το σώμα του βρόγχου θα εκτελεστεί τουλάχιστον μία φορά: κώδικας: while (true) { // an infinite loop! } do { var input = get_input(); } while (inputIsNotValid(input)) Ο βρόγχος for της JavaScript είναι ο ίδιος όπως στη C και τη Java, σας επιτρέπει να ορίσετε όλα τα δεδομένα ελέγχου του βρόγχου σε μία μόνο γραμμή. κώδικας: for (var i = 0; i < 5; i++) { // Will execute 5 times } Οι τελεστές && και || χρησιμοποιούν λογική παράκαμψης (short-circuit), το οποίο σημαίνει ότι η εκτέλεση του δεύτερου τελεστέου θα εξαρτηθεί από τον πρώτο. Αυτό είναι χρήσιμο για τον έλεγχο του null πριν την προσπέλαση ιδιοτήτων αντικειμένων. κώδικας: var name = o && o.getName(); Ή για τον καθορισμό προεπιλεγμένων τιμών: κώδικας: var name = otherName || "default"; Η JavaScript έχει ένα τριπλό τελεστή για κατά συνθήκη εντολές της μίας γραμμής: κώδικας: var allowed = (age > 18) ? "yes" : "no"; Η εντολή switch μπορεί να χρησιμοποιηθεί για πολλαπλές διακλαδώσεις με βάση έναν αριθμό ή string: κώδικας: switch(action) { case 'draw': drawit(); break; case 'eat': eatit(); break; default: donothing(); } Αν δεν προσθέσετε την εντολή break η εκτέλεση θα συνεχιστεί στο επόμενο επίπεδο. Αυτό πολύ σπάνια είναι επιθυμητό, στην πραγματικότητα είναι καλό να αφήσετε ένα σχόλιο αν σκόπιμα παραλείψετε το break, ώστε να διευκολύνετε το debugging: κώδικας: switch(a) { case 1: // fallthrough case 2: eatit(); break; default: donothing(); } Ο όρος default είναι προαιρετικός. Μπορείτε να έχετε εκφράσεις τόσο στο switch όσο και στα cases αν θέλετε. Οι συγκρίσεις μεταξύ των δύο γίνονται με τον τελεστή === (αυστηρή ισότητα): κώδικας: switch(1 + 3): case 2 + 2: yay(); break; default: neverhappens(); } Αντικείμενα Τα αντικείμενα της JavaScript είναι απλά συλλογές από ζευγάρια Όνομα/Τιμή. Σαν τέτοια είναι παρεμφερή με: - Dictionaries στην Python - Hashes στις Perl και Ruby - Hash tables στις C και C++ - HashMaps στη Java - Associative arrays στην PHP Το γεγονός ότι αυτή η δομή δεδομένων είναι τόσο πλατιά διαδεδομένη είναι χειροπιαστή απόδειξη της προσαρμοστικότητάς της. Εφόσον οτιδήποτε πέρα από τους στοιχειώδεις τύπους στη JavaScript είναι αντικείμενο, κάθε πρόγραμμα JavaScript συνεπάγεται ένα μεγάλο αριθμό από αναζητήσεις σε hash tables. Είναι καλό που αυτές είναι τόσο γρήγορες! Το τμήμα «Όνομα» είναι ένα string, ενώ το τμήμα «Τιμή» μπορεί να είναι κάθε τιμή JavaScript, συμπεριλαμβανομένων άλλων αντικειμένων. Αυτό σας επιτρέπει να χτίζετε δομές δεδομένων οποιουδήποτε βαθμού πολυπλοκότητας. Υπάρχουν δύο βασικοί τρόποι να δημιουργηθεί ένα αντικείμενο: κώδικας: var obj = new Object(); Και: κώδικας: var obj = {}; Αυτοί είναι σημασιολογικά ισοδύναμοι. Ο δεύτερος ονομάζεται σύνταξη literal και είναι πιο βολικός. Η σύνταξη literal δεν υπήρχε στις πολύ πρώιμες εκδόσεις της γλώσσας, και αυτός είναι ο λόγος που βλέπετε τόσο πολύ κώδικα να χρησιμοποιεί την παλιά μέθοδο. Άπαξ και δημιουργήθηκε, οι ιδιότητες του αντικειμένου μπορούν να προσπελαστούν πάλι με δύο τρόπους: κώδικας: obj.name = "Simon" var name = obj.name; Και... κώδικας: obj["name"] = "Simon"; var name = obj["name"]; Αυτοί είναι επίσης σημασιολογικά ισοδύναμοι. Ο δεύτερος τρόπος έχει το πλεονέκτημα ότι το όνομα της ιδιότητας παρέχεται ως string, που σημαίνει ότι μπορεί να υπολογιστεί κατά το χρόνο εκτέλεσης. Μπορεί επίσης να χρησιμοποιηθεί για την ανάγνωση και απόδοση τιμής σε ιδιότητες με ονόματα που είναι δεσμευμένες λέξεις: κώδικας: obj.for = "Simon"; // Συντακτικό σφάλμα obj["for"] = "Simon"; // Δουλεύει θαυμάσια Η σύνταξη literal μπορεί να χρησιμοποιηθεί για να αρχικοποιήσει ένα αντικείμενο στην ολότητά του: κώδικας: var obj = { name: "Carrot", "for": "Max", details: { color: "orange", size: 12 } } Είναι δυνατή η δημιουργία αλυσίδων από προσπελάσεις ιδιοτήτων: κώδικας: > obj.details.color orange > obj["details"]["size"] 12 Arrays Τα Arrays στη JavaScript είναι απλά ένα ειδικός τύπος αντικειμένου, όπου ως ονόματα ιδιοτήτων αντί για strings γίνετε χρήση αριθμών. Λειτουργούν σε μεγάλο βαθμό ως κανονικά αντικείμενα (που προσπελαύνονται πάντα με τη σύνταξη []) αλλά έχουν μία μαγική ιδιότητα με όνομα length. Αυτή είναι πάντα κατά μια μονάδα μεγαλύτερη από το μεγαλύτερο δείκτη του array. Ο παλιός τρόπος δημιουργίας arrays έχει ως εξής: κώδικας: > var a = new Array(); > a[0] = "dog"; > a[1] = "cat"; > a[2] = "hen"; > a.length 3 Μια πιο βολική σύνταξη είναι τα array literals: κώδικας: > var a = ["dog", "cat", "hen"]; > a.length 3 Το να αφήσετε ένα πλεονάζον κόμμα στο τέλος του array literal ερμηνεύεται διαφορετικά από browser σε browser, γι αυτό μην το κάνετε. Σημειώστε πως η array.length δεν είναι πάντα ο αριθμός στοιχείων του array. Δείτε το παρακάτω: κώδικας: > var a = ["dog", "cat", "hen"]; > a[100] = "fox"; > a.length 101 Θυμηθείτε, το length του array είναι μια μονάδα παραπάνω από το μεγαλύτερο δείκτη. Αν ζητήσετε έναν μη-υπαρκτό δείκτη array, θα πάρετε undefined: κώδικας: > typeof(a[90])] undefined Λαμβάνοντας υπόψη τα παραπάνω, μπορείτε να διατρέξετε ένα array χρησιμοποιώντας το εξής: κώδικας: for (var i = 0; i < a.length; i++) { // Do something with a } Αυτό είναι ελαφρά αναποτελεσματικό καθώς ζητάτε την ιδιότητα length μια φορά σε κάθε βρόγχο. Μια βελτίωση είναι η εξής: κώδικας: for (var i = 0, j = a.length; i < j; i++) { // Do something with a } Ένα ακόμα ωραιότερο ιδίωμα είναι: κώδικας: for (var i = 0, item; item = a; i++) { // Do something with item } Εδώ θέτουμε δύο μεταβλητές. Στο μέσο της εντολής for συμβαίνει μια απόδοση τιμής και ταυτόχρονα ένας έλεγχος αλήθειας. Αν η απόδοση επιτύχει, ο βρόγχος συνεχίζει. Εφόσον το i αυξάνεται κάθε φορά, τα περιεχόμενα του array θα αποδοθούν στο item το ένα μετά το άλλο. Ο βρόγχος τερματίζει όταν βρεθεί ένα ψευδές στοιχείο (όπως είναι το undefined). Σημειώστε πως αυτό το trick θα πρέπει να χρησιμοποιείται μόνο για arrays που γνωρίζετε ότι δεν περιέχουν ψευδείς τιμές (για παράδειγμα arrays αντικειμένων ή κόμβων DOM). Αν διατρέχετε αριθμητικά δεδομένα που μπορεί να περιλαμβάνουν το 0 ή strings που μπορεί να περιλαμβάνουν το κενό string, χρησιμοποιήστε το ιδίωμα i, j. Αν θέλετε να προσθέσετε ένα στοιχείο σε ένα array, ο ασφαλέστερος τρόπος είναι αυτός: κώδικας: a[a.length] = item; Καθώς η a.length είναι μια μονάδα μεγαλύτερη από τον μεγαλύτερο δείκτη, μπορείτε να είστε σίγουροι ότι κάνετε απόδοση σε μία κενή θέση στο τέλος του array. Τα arrays έρχονται εφοδιασμένα μα αρκετές μεθόδους: a.toString(), a.toLocaleString(), a.concat(item, ..), a.join(sep), a.pop(), a.push(item, ..), a.reverse(), a.shift(), a.slice(start, end), a.sort(cmpfn), a.splice(start, delcount, [item]..), a.unshift([item]..) - η concat επιστρέφει ένα νέο array που περιέχει και τα στοιχεία που προστέθηκαν. - η pop αφαιρεί και επιστρέφει το τελευταίο στοιχείο. - η push προσθέτει ένα ή περισσότερα στοιχεία στο τέλος (όπως το ιδίωμα ar[ar.length]). - η slice επιστρέφει ένα τμήμα του array. - η sort ταξινομεί και δέχεται ως προαιρετικό όρισμα μία συνάρτηση για τις συγκρίσεις. - η splice μεταβάλλει ένα array διαγράφοντας ένα τμήμα και αντικαθιστώντας το με άλλα στοιχεία. - η unshift προσθέτει στοιχεία στην αρχή του array. Συναρτήσεις Μαζί με τα αντικείμενα, οι συναρτήσεις είναι το βασικό συστατικό στην κατανόηση της JavaScript. Η πιο στοιχειώδης συνάρτηση δε θα μπορούσε να είναι πολύ απλούστερη απ' αυτήν εδώ: κώδικας: function add(x, y) { var total = x + y; return total; } Αυτή περιγράφει οτιδήποτε υπάρχει για να μάθει κανείς σχετικά με τις βασικές συναρτήσεις. Μια συνάρτηση JavaScript μπορεί να λάβει 0 ή περισσότερες επώνυμες παραμέτρους. Το σώμα της μπορεί να περιέχει όσες εντολές θέλετε, και μπορείτε να ορίσετε τις δικές τις μεταβλητές οι οποίες είναι τοπικές σε αυτή τη συνάρτηση. Η εντολή return μπορεί να χρησιμοποιηθεί ανά πάσα στιγμή για την επιστροφή μίας τιμής, τερματίζοντας τη συνάρτηση. Αν δε χρησιμοποιηθεί εντολή return (ή χρησιμοποιηθεί χωρίς τιμή), η JavaScript επιστρέφει undefined. Προκύπτει ότι οι επώνυμες παράμετροι μοιάζουν περισσότερο με συμβουλευτικές οδηγίες παρά με οτιδήποτε άλλο. Μπορείτε να καλέσετε μια συνάρτηση χωρίς να περάσετε τις παραμέτρους που περιμένει, και σε αυτή την περίπτωση θα έχουν τιμή undefined. κώδικας: > add() Nan // Δε μπορείτε να κάνετε πρόσθεση με το undefined Μπορείτε ακόμα να περάσετε περισσότερα ορίσματα απ' όσα περιμένει η συνάρτηση: κώδικας: > add(2, 3, 4) 5 // προστέθηκαν τα πρώτα δύο, το 4 αγνοήθηκε. Αυτό ίσως μοιάζει λίγο χαζό, αλλά οι συναρτήσεις έχουν πρόσβαση σε μια επιπλέον μεταβλητή μέσα στο σώμα τους που λέγετε arguments, η οποία είναι ένα αντικείμενο σαν array που κρατά όλες τις τιμές που περάστηκαν στη συνάρτηση. Ας ξαναγράψουμε τη συνάρτηση add έτσι ώστε να μπορεί να δεχτεί κάθε αριθμό ορισμάτων: κώδικας: function add() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments; } return sum; } > add(2, 3, 4, 5) 14 Αυτή ωστόσο δεν είναι περισσότερο χρήσιμη απ' το να γράφαμε 2 + 3 + 4 + 5. Ας φτιάξουμε μία συνάρτηση για τον υπολογισμό του μέσου όρου: κώδικας: function avg() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments; } return sum / arguments.length; } > avg(2, 3, 4, 5) 3.5 Αυτή είναι αρκετά χρήσιμη, αλλά εγκαινιάζει ένα νέο πρόβλημα. Η συνάρτηση avg() δέχεται μία λίστα ορισμάτων χωρισμένη με κόμμα, αλλά τι θα κάνατε αν θέλατε το μέσο όρο ενός array; Θα μπορούσατε απλά να ξαναγράψετε τη συνάρτηση ως εξής: κώδικας: function avgArray(arr) { var sum = 0; for (var i = 0, j = arr.length; i < j; i++) { sum += arr; } return sum / arr.length; } > avgArray([2, 3, 4, 5]) 3.5 Αλλά θα ήταν ωραίο να μπορούσαμε να ξαναχρησιμοποιήσουμε τη ρουτίνα που μόλις φτιάξαμε. Ευτυχώς η JavaScript σας επιτρέπει να καλέσετε μια συνάρτηση δίνοντας ένα array με ορίσματα, χρησιμοποιώντας τη μέθοδο apply() οποιουδήποτε αντικειμένου function. κώδικας: > avg.apply(null, [2, 3, 4, 5]) 3.5 Το δεύτερο όρισμα της apply() είναι το array που αναμένεται να περιέχει τα ορίσματα. Το πρώτο θα συζητηθεί παρακάτω. Η έμφαση είναι στο γεγονός ότι και οι συναρτήσεις είναι αντικείμενα. Η JavaScript σας επιτρέπει να δημιουργήσετε ανώνυμες συναρτήσεις. κώδικας: var avg = function() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments; } return sum / arguments.length; } Αυτή η μορφή είναι σημασιολογικά ισοδύναμη με τη μορφή function avg(). Είναι εξαιρετικά ισχυρή, καθώς σας επιτρέπει να βάλετε μια πλήρη συνάρτηση εκεί που κανονικά θα βάζατε μία έκφραση. Αυτό επιτρέπει κάθε είδους έξυπνα τρικ. Να ένας τρόπος απόκρυψης μερικών τοπικών μεταβλητών, όπως το block scope στη C: κώδικας: > var a = 1; > var b = 2; > (function() { var b = 3; a += b; })(); > a 4 > b 2 Η JavaScript σας επιτρέπει να κάνετε αναδρομική κλήση συναρτήσεων. Αυτό είναι ιδιαίτερα χρήσιμο όταν έχετε να κάνετε με δομές δέντρου, όπως αυτές που παίρνετε από το DOM των browsers. κώδικας: function countChars(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } var count = 0; for (var i = 0, child; child = elm.childNodes; i++) { count += countChars(child); } return count; } Αυτό αναδεικνύει ένα δυνητικό πρόβλημα με τις ανώνυμες συναρτήσεις: πώς μπορείτε να τις καλέσετε αναδρομικά αν δε γνωρίζετε το όνομά τους; Η απάντηση βρίσκεται στο αντικείμενο arguments, το οποίο εκτός από το να λειτουργεί ως λίστα ορισμάτων παρέχει επιπλέον μια ιδιότητα με όνομα arguments.callee. Αυτή αναφέρεται πάντα στην τρέχουσα συνάρτηση, και ιδού πως μπορεί με τη βοήθειά της να γίνει εφικτή η αναδρομική κλήση: κώδικας: var charsInBody = (function(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } var count = 0; for (var i = 0, child; child = elm.childNodes; i++) { count += arguments.callee(child); } return count; })(document.body); Εφόσον η arguments.callee είναι η τρέχουσα συνάρτηση και όλες οι συναρτήσεις είναι αντικείμενα, μπορείτε να χρησιμοποιήσετε την arguments.callee για να διατηρήσετε δεδομένα από τη μία κλήση της συνάρτησης στην επόμενη. Να μια συνάρτηση που θυμάται πόσες φορές έχει κληθεί: κώδικας: function counter() { if (!arguments.callee.count) { arguments.callee.count = 0; } return arguments.callee.count++; } > counter() 0 > counter() 1 > counter() 2 Μεθόδοι Αντικείμενων Στον κλασικό αντικειμενοστραφή προγραμματισμό τα αντικείμενα είναι συλλογές δεδομένων και μεθόδων που ενεργούν πάνω σε αυτά τα δεδομένα. Ας θεωρήσουμε ένα αντικείμενο person με πεδία μικρό όνομα κι επώνυμο. Υπάρχουν δύο τρόποι εμφάνισης του πλήρους ονόματος: ως «first last» ή ως «last, first». Να ένας τρόπος να γίνει αυτό χρησιμοποιώντας τις συναρτήσεις και τα αντικείμενα που συζητήσαμε προηγουμένως: κώδικας: function makePerson(first, last) { return { first: first, last: last } } function personFullName(person) { return person.first + ' ' + person.last; } function personFullNameReversed(person) { return person.last + ', ' + person.first } > s = makePerson("Simon", "Willison"); > personFullName(s) Simon Willison > personFullNameReversed(s) Willison, Simon Αυτό λειτουργεί, αλλά δεν είναι πολύ όμορφο. Θα καταλήξετε με ντουζίνες συναρτήσεων στο global namespace. Αυτό που θέλουμε στ' αλήθεια είναι ένας τρόπος να προσδέσουμε μια συνάρτηση σε ένα αντικείμενο. Μιας και οι συναρτήσεις είναι αντικείμενα, αυτό είναι εύκολο: κώδικας: function makePerson(first, last) { return { first: first, last: last, fullName: function() { return this.first + ' ' + this.last; }, fullNameReversed: function() { return this.last + ', ' + this.first; } } } > s = makePerson("Simon", "Willison") > s.fullName() Simon Willison > s.fullNameReversed() Willison, Simon Υπάρχει εδώ κάτι που συναντάμε για πρώτη φορά: το keyword this. Όταν χρησιμοποιείται μέσα σε μια συνάρτηση το this αναφέρεται στο τρέχον αντικείμενο. Το τι σημαίνει αυτό εξαρτάται από τον τρόπο που καλέσατε τη συνάρτηση. Αν την καλέσατε με χρήση της τελείας σε ένα αντικείμενο, αυτό το αντικείμενο γίνεται το this. Αν η κλήση έγινε χωρίς τη σύνταξη τελεία, το this αναφέρετε στο global object. Αυτή είναι μια συνηθισμένη πηγή σφαλμάτων. Για παράδειγμα: κώδικας: > s = makePerson("Simon", "Willison") > var fullName = s.fullName; > fullName() undefined undefined Όταν καλέσαμε fullName() το this αναφέρθηκε στο global object. Καθώς δεν υπάρχουν global μεταβλητές first και last πήραμε undefined για την κάθε μια απ' αυτές. Μπορούμε να εκμεταλλευτούμε το keyword this για να βελτιώσουμε τη συνάρτηση makePerson: κώδικας: function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { return this.first + ' ' + this.last; } this.fullNameReversed = function() { return this.last + ', ' + this.first; } } var s = new Person("Simon", "Willison"); Εγκαινιάσαμε άλλο ένα keyword: το new. Το new συνδέεται στενά με το this. Αυτό που κάνει είναι να δημιουργεί ένα ολοκαίνουργιο αντικείμενο, και μετά καλεί τη συνάρτηση και ταυτόχρονα κάνει το this να αναφέρεται σε αυτό το νέο αντικείμενο. Οι συναρτήσεις που σχεδιάστηκαν να καλούνται με το new ονομάζονται constructor functions. Είναι κοινή πρακτική να γράφουμε με κεφαλαίο πρώτο γράμμα αυτές τις συναρτήσεις, ως υπενθύμιση να τις καλέσουμε με το new. Τα αντικείμενά μας γίνονται όσο πάει και καλύτερα, αλλά υπάρχουν ακόμα σε αυτά κάποιες άσχημες γωνίες. Κάθε φορά που δημιουργούμε ένα αντικείμενο person, δημιουργούμε ταυτόχρονα δύο ολοκαίνουργιες συναρτήσεις-αντικείμενα μέσα σε αυτό. Δε θα ήταν καλύτερο αν μπορούσαμε να κάνουμε κοινόχρηστο αυτόν τον κώδικα; κώδικας: function personFullName() { return this.first + ' ' + this.last; } function personFullNameReversed() { return this.last + ', ' + this.first; } function Person(first, last) { this.first = first; this.last = last; this.fullName = personFullName; this.fullNameReversed = personFullNameReversed; } Αυτό είναι καλύτερο: δημιουργούμε τις μεθόδους-συναρτήσεις μόνο μια φορά, και αποδίδουμε αναφορές σε αυτές μέσα στον constructor. Μπορούμε να κάνουμε τίποτα καλύτερο απ' αυτό; Η απάντηση είναι ναι: κώδικας: function Person(first, last) { this.first = first; this.last = last; } Person.prototype.fullName = function() { return this.first + ' ' + this.last; } Person.prototype.fullNameReversed = function() { return this.last + ', ' + this.first; } Το Person.prototype είναι ένα αντικείμενο που το μοιράζονται όλα τα αντικείμενα Person. Αποτελεί μέρος της αλυσίδας αναζήτησης ιδιοτήτων: κάθε φορά που επιχειρούμε να προσπελάσουμε μια ιδιότητα του Person που δεν έχει οριστεί, η JavaScript θα ελέγξει το Person.prototype για να δει αν αυτή η ιδιότητα μπορεί να βρεθεί εκεί. Σαν αποτέλεσμα οτιδήποτε προστίθεται στο Person.prototype γίνεται διαθέσιμο σε όλα τα αντικείμενα που κατασκευάστηκαν με αυτόν τον constructor. Αυτό είναι ένα απίστευτα ισχυρό εργαλείο. Η JavaScript σας επιτρέπει να μεταβάλλετε ένα prototype οποιαδήποτε στιγμή μέσα στο πρόγραμμά σας, το οποίο σημαίνει πως μπορείτε να προσθέσετε μεθόδους σε υπαρκτά αντικείμενα σε χρόνο εκτέλεσης: κώδικας: > s = new Person("Simon", "Willison"); > s.firstNameCaps(); TypeError on line 1: s.firstNameCaps is not a function > Person.prototype.firstNameCaps = function() { return this.first.toUpperCase() } > s.firstNameCaps() SIMON Είναι ενδιαφέρον ότι μπορείτε να προσθέσετε πράγματα στο prototype των ενσωματωμένων αντικειμένων της JavaScript. Ας προσθέσουμε μία μέθοδο στο String που να επιστρέφει αυτό το string αντεστραμμένο: κώδικας: > var s = "Simon"; > s.reversed() TypeError on line 1: s.reversed is not a function > String.prototype.reversed = function() { var r = ''; for (var i = this.length - 1; i >= 0; i--) { r += this; } return r; } > s.reversed() nomiS Η νέα μας μέθοδος δουλεύει ακόμα και σε string literals! κώδικας: > "This can now be reversed".reversed() desrever eb won nac sihT Όπως ανέφερα προηγούμενα το prototype αποτελεί μέρος μιας αλυσίδας. Ο αρχικός κρίκος της αλυσίδας είναι το Object.prototype, του οποίου οι μέθοδοι περιλαμβάνουν το toString(). Αυτή είναι η μέθοδος που καλείται κάθε φορά που προσπαθείτε να μετατρέψετε ένα αντικείμενο σε string. Αυτό είναι χρήσιμο για το debugging του αντικειμένου μας: κώδικας: > var s = new Person("Simon", "Willison"); > s [object Object] > Person.prototype.toString = function() { return '<Person: ' + this.fullName() + '>'; } > s <Person: Simon Willison> Θυμάστε ότι η avg.apply() είχε ένα null ως πρώτο όρισμα; Μπορούμε τώρα να το αναθεωρήσουμε. Το πρώτο όρισμα στην apply() είναι το αντικείμενο που θα πρέπει να γίνει το this. Για παράδειγμα να μια επιπόλαιη υλοποίηση του new: κώδικας: function trivialNew(constructor) { var o = {}; // Δημιουργία αντικειμένου constructor.apply(o, arguments); return o; } Αυτό δεν είναι ένα ακριβές υποκατάστατο του new γιατί παραλείπει τη σύνδεση με το κατάλληλο prototype. Είναι δύσκολο να βρεθούν καλά παραδείγματα για την επεξήγηση της apply(), και δεν είναι κάτι που χρησιμεύει πολύ συχνά, αλλά είναι χρήσιμο να ξέρετε γι αυτήν. Η apply έχει μια αδελφή συνάρτηση με το όνομα call η οποία επίσης σας επιτρέπει να ορίζεται το this, αλλά αντί για ένα array δέχεται μια σειρά ορισμάτων. κώδικας: function lastNameCaps() { return this.last.toUpperCase(); } var s = new Person("Simon", "Willison"); lastNameCaps.call(s); // Είναι το ίδιο όπως: s.lastNameCaps = lastNameCaps; s.lastNameCaps(); Ένθετες Συναρτήσεις Είναι επιτρεπτός ο ορισμός συναρτήσεων JavaScript μέσα σε άλλες συναρτήσεις. Το είδαμε προηγούμενα, σε μια συνάρτηση makePerson(). Μια σημαντική λεπτομέρεια των ένθετων συναρτήσεων είναι ότι έχουν πρόσβαση σε μεταβλητές στην εμβέλεια (scope) της εξωτερικής συνάρτησης: κώδικας: function betterExampleNeeded() { var a = 1; function oneMoreThanA() { return a + 1; } return oneMoreThanA(); } Αυτό παρέχει ένα μεγάλο βαθμό ευκολίας στη συγγραφή περισσότερο συντηρήσιμου κώδικα. Αν μία συνάρτηση εξαρτάται από μία ή δύο άλλες συναρτήσεις οι οποίες δεν είμαι χρήσιμες σε άλλα μέρη του κώδικα, μπορείτε να ενθέσετε αυτές τις συναρτήσεις μέσα στη συνάρτηση που θα κληθεί από αλλού. Αυτό διατηρεί μειωμένο τον αριθμό των συναρτήσεων στην global scope, κάτι που είναι πάντα καλό πράγμα. Αυτό είναι επίσης σημαντικό αντίμετρο στο δέλεαρ των global μεταβλητών. Όταν γράφουμε πολύπλοκο κώδικα είναι συχνά δελεαστικό να κάνουμε χρήση global μεταβλητών για να μοιραστούμε κοινές τιμές σε πολλές συναρτήσεις - το οποίο οδηγεί σε κώδικα που είναι δύσκολος στη συντήρηση. Οι ένθετες συναρτήσεις μπορούν να μοιραστούν μεταβλητές με τον γονέα τους, επομένως μπορείτε να χρησιμοποιήσετε αυτό το μηχανισμό για να ζευγαρώσετε συναρτήσεις όποτε έχει νόημα χωρίς να μολύνετε το global namespace - «local globals» αν προτιμάτε. Η χρήση αυτής της τεχνικής θα πρέπει να γίνεται με περίσκεψη, αλλά είναι μια χρήσιμη δυνατότητα να υπάρχει. Closures Αυτό μας οδηγεί σε μία από τις πιο ισχυρές αφαιρέσεις που έχει να προσφέρει η JavaScript - αλλά ενδεχομένως και την πιο δύσκολη να την κατανοήσει κανείς. Τι κάνει αυτό; κώδικας: function makeAdder(a) { return function(b) { return a + b; } } x = makeAdder(5); y = makeAdder(20); x(6) ? y(7) ? Το όνομα της συνάρτησης makeAdder θα πρέπει να δίνει την απάντηση: δημιουργεί νέες προσθετικές συναρτήσεις οι οποίες όταν καλούνται με ένα όρισμα το προσθέτουν στο όρισμα με το οποίο δημιουργήθηκαν. Αυτό που συμβαίνει εδώ είναι πάνω-κάτω το ίδιο με αυτό που συνέβαινε με τις ένθετες συναρτήσεις νωρίτερα: μια συνάρτηση ορισμένη μέσα σε μια άλλη έχει πρόσβαση στις μεταβλητές τις εξωτερικής συνάρτησης. Η μόνη διαφορά εδώ είναι ότι η εξωτερική συνάρτηση έχει ολοκληρωθεί, επομένως η κοινή λογική φαίνεται να λέει ότι οι τοπικές μεταβλητές της δεν υπάρχουν πια. Αλλά αυτές εξακολουθούν να υπάρχουν, διαφορετικά οι συναρτήσεις adder δε θα ήταν σε θέση να λειτουργήσουν. Και όχι μόνο αυτό αλλά υπάρχουν δύο «αντίγραφα» των τοπικών μεταβλητών της makeAdder, ένα που είναι 5 και ένα που είναι 20. Να τι συνέβη στην πραγματικότητα. Κάθε φορά που η JavaScript εκτελεί μία συνάρτηση δημιουργεί ένα αντικείμενο scope (εμβέλεια) για να κρατήσει τις τοπικές μεταβλητές που υπάρχουν μέσα στη ρουτίνα. Αρχικοποιείται με όσες μεταβλητές πέρασαν ως παράμετροι της συνάρτησης. Αυτό είναι παρόμοιο με το global object όπου ζουν όλες οι global μεταβλητές και συναρτήσεις, αλλά με δύο σημαντικές διαφορές: πρώτον δημιουργείται ένα ολοκαίνουργιο αντικείμενο scope κάθε φορά που ξεκινά η εκτέλεση μιας συνάρτησης, και δεύτερο, αντίθετα με το global object (που στους browsers είναι προσβάσιμο ως window) αυτά τα αντικείμενα scope δε μπορούν να τύχουν άμεσου χειρισμού από τον κώδικα JavaScript. Δεν υπάρχει για παράδειγμα μηχανισμός που να μας επιτρέπει να διατρέξουμε τις ιδιότητες του τρέχοντος αντικειμένου scope. Έτσι όταν καλείται η makeAdder δημιουργείται ένα αντικείμενο scope με μία ιδιότητα: a, η οποία είναι το όρισμα που περάστηκε στη συνάρτηση makeAdder. Η makeAdder μετά επιστρέφει μια ολοκαίνουργια συνάρτηση. Κανονικά σε αυτό το σημείο ο garbage collector της JavaScript θα μάζευε το αντικείμενο scope που δημιουργήθηκε για την makeAdder, αλλά η συνάρτηση που επεστράφη διατηρεί μια αναφορά σε αυτό το αντικείμενο scope. Σαν αποτέλεσμα το αντικείμενο scope δεν πρόκειται να συλλεχθεί από τον garbage collector μέχρις ότου πάψουν να υπάρχουν αναφορές στη συνάρτηση-αντικείμενο που επέστρεψε η makeAdder. Τα αντικείμενα scope σχηματίζουν μία αλυσίδα που ονομάζεται scope chain, παρόμοια με την αλυσίδα των prototypes που χρησιμοποιούνται από το σύστημα αντικειμένων της JavaScript. Μία closure είναι ο συνδυασμός μίας συνάρτησης και του αντικειμένου scope στο οποίο δημιουργήθηκε. Οι closures σας επιτρέπουν να αποθηκεύσετε δεδομένα κατάστασης (state), και ως τέτοιες μπορούν συχνά να χρησιμοποιηθούν στη θέση αντικειμένων. Διαρροές μνήμης Μια δυσάρεστη παρενέργεια των closures είναι ότι κάνουν ιδιαίτερα εύκολη τη διαρροή μνήμης (memory leak) στον Internet Explorer. Η JavaScript είναι μία γλώσσα garbage collected - τα αντικείμενα κατά τη δημιουργία τους καταλαμβάνουν χώρο στη μνήμη και αυτή η μνήμη ανακτάται από τον browser όταν δεν απομένουν άλλες αναφορές στο αντικείμενο. Τα αντικείμενα που παρέχει το περιβάλλον τα διαχειρίζεται το ίδιο το περιβάλλον. Οι browsers χρειάζεται να διαχειριστούν ένα μεγάλο αριθμό από αντικείμενα που αντιπροσωπεύουν την εκάστοτε HTML σελίδα - τα αντικείμενα του DOM. Είναι ευθύνη του browser να διαχειριστεί τη δέσμευση και αποδέσμευση της μνήμης. Ο Internet Explorer χρησιμοποιεί το δικό του σύστημα garbage collection γι αυτά τα DOM αντικείμενα, ξεχωριστά από το μηχανισμό που χρησιμοποιεί η JavaScript. Είναι η αλληλεπίδραση μεταξύ των δύο που μπορεί να γίνει αιτία για διαρροές μνήμης. Μια διαρροή μνήμης συμβαίνει στον IE κάθε φορά που σχηματίζεται μία κυκλική αναφορά ανάμεσα σε ένα αντικείμενο JavaScript και ένα DOM αντικείμενο. Θεωρήστε το εξής: κώδικας: function leakMemory() { var el = document.getElementById('el'); var o = { 'el': el }; el.o = o; } Η κυκλική αναφορά που σχηματίστηκε εδώ προκαλεί διαρροή μνήμης. Ο IE δε θα αποδεσμεύσει τη μνήμη που είναι σε χρήση για τα αντικείμενα el και o μέχρις ότου ο browser κάνει ολική επανεκκίνηση. Το πιθανότερο είναι η παραπάνω περίπτωση να περάσει απαρατήρητη. Οι διαρροές μνήμης γίνονται πρόβλημα σε εφαρμογές που τρέχουν για μακρύ χρονικό διάστημα, ή εφαρμογές που χάνουν μεγάλες ποσότητες μνήμης λόγω μεγάλων δομών δεδομένων ή διαρροών μέσα σε βρόγχους. Σπάνια οι διαρροές είναι τόσο προφανείς, συχνά η δομή των δεδομένων που χάνει μνήμη έχει πολλά επίπεδα αναφορών, που συγκαλύπτουν τις κυκλικές αναφορές. Οι closures κάνουν εύκολη την ακούσια δημιουργία διαρροών μνήμης. Δείτε αυτό: κώδικας: function addHandler() { var el = document.getElementById('el'); el.onclick = function() { this.style.backgroundColor = 'red'; } } Ο παραπάνω κώδικας ορίζει το στοιχείο που με κλικ θα γίνει κόκκινο. Επίσης δημιουργεί διαρροή μνήμης. Γιατί; Διότι η αναφορά στο el έχει πιαστεί ακούσια από την closure που δημιουργήθηκε για την ανώνυμη εσωτερική συνάρτηση. Αυτό δημιουργεί μία κυκλική αναφορά ανάμεσα σε ένα αντικείμενο JavaScript (τη συνάρτηση) και ένα εγγενές DOM αντικείμενο (το el). Υπάρχει μια σειρά από workarounds γι αυτό το πρόβλημα. Το απλούστερο είναι: κώδικας: function addHandler() { var el = document.getElementById('el'); el.onclick = function() { this.style.backgroundColor = 'red'; } el = null; } Αυτό λειτουργεί με το να σπάει την κυκλική αναφορά. Αναπάντεχα, ένα τρικ για το σπάσιμο μιας κυκλικής αναφοράς που προκλήθηκε από μια closure είναι η προσθήκη μίας ακόμα closure: κώδικας: function addHandler() { var clickHandler = function() { this.style.backgroundColor = 'red'; } (function() { var el = document.getElementById('el'); el.onclick = clickHandler; })(); } Η εσωτερική συνάρτηση εκτελείται άμεσα, και κρύβει τα περιεχόμενά της από την closure που δημιουργήθηκε με την clickHandler. Ένα άλλο καλό τρικ για την αποφυγή των closures είναι το σπάσιμο των κυκλικών αναφορών κατά το συμβάν window.onunload. Πολλές βιβλιοθήκες συμβάντων θα αναλάβουν να το κάνουν για λογαριασμό σας.

Πρώτα απ'όλα δείτε ένα παράδειγμα εδώ. CHANGE THE COLOR OF YOUR LINK . κώδικας: <style type="text/css"> a.color:link {color: #009900} a.color:visited {color: #009900} a.color:hover {color: #CC0000} </style> CHANGE THE DECORATION OF YOUR LINK . κώδικας: <style type="text/css"> a.decor:link {color: #FF6600; text-decoration: none} a.decor:visited {color: #FF6600; text-decoration: none} a.decor:hover {text-decoration: underline;} </style> CHANGE THE DECORATION OF YOUR LINK 2 . κώδικας: <style type="text/css"> a.decor:link {color: #CC33CC; text-decoration: none} a.decor:visited {color: #CC33CC; text-decoration: none} a.decor:hover {text-decoration: underline overline;} </style> CHANGE THE BACKGROUND OF YOUR LINK . κώδικας: <style type="text/css"> a.bg:link {color: #0066FF} a.bg:visited {color: #0066FF} a.bg:hover {background: #FFFFFF} </style> CHANGE THE SIZE OF YOR LINK . κώδικας: <style type="text/css"> a.size:link {color: #9900CC} a.size:visited {color: #9900CC} a.size:hover {font-size: 12px} </style> CHANGE THE FONT OF YOUR LINK . κώδικας: <style type="text/css"> a.font:link {color: #666666} a.font:visited {color: #666666} a.font:hover {font-family:Times New Roman} </style>

To μυστικό είναι το φίλτρο alpha(opacity) Σε ενα αρχείο css δημιουργούμε τον κώδικα : παράθεση: INPUT{ filter:alpha(opacity=70); -moz-opacity:70%; } και ορίζουμε σαν background της σελίδας μια φώτο που εμείς θέλουμε. μετά δημιουργούμε μια σελίδα οπου φτιάχνουμε μια φόρμα : παράθεση: <input type="text" name="text_field" /> <input type="submit" name="Submit" value="Send Form" /> Ενα παράδειγμα μπορείτε να δείτε εδώ: http://members.lycos.co.uk/thyclub/transparent.htm * Δουλεύει σε ΙΕ και mozilla (πρέπει να αλλάξετε το -moz-opacity:70%; σε -moz-opacity: .70; για τις νέες εκδόσεις του)

Βάλτε μέσα στο style στο head: κώδικας: .bordered { border: dotted 2px black; width: 200px; margin: 6px 3px 6px 3px; padding: 4px; } .info { background-color: #ffccff; } .feature { background-color: #ccffcc; } .warning { background-color: #ffffcc; } .coolness { background-color: #ccccff; } Και γράψτε τα δύο classes - αφήνοντας το κενό - ως εξής: κώδικας: <div class="bordered feature"> This is an energy-saving radio. </div> <div class="bordered warning"> Do not operate this radio under water. </div> <div class="coolness bordered"> This radio has a USB port for Internet connectivity. </div> Μπορείτε να βάλετε όσα classes θέλετε, όχι μόνο ένα ή δύο, αφήνοντας απλά ένα κενό... Simple huh? Σημειώστε ότι αν τα properties των δύο classes "πέφτουν" το ένα πάνω στο άλλο, θα ισχύσει αυτό που είναι γραμμένο τελευταίο μέσα στο style στο head.... (Άλλωστε αυτό δεν σημαίνει "Cascade style sheets"?)

Ας αρχίσουμε από το σκαρί της σελίδας κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu</title> </head> <body> </body> </html> Μέσα στο body θα τοποθετήσουμε το menu που επιθυμούμε με την χρήση τον elements <div>, <ul> & <li> το οποιο θα είναι αυτής της μορφής: κώδικας: <div id="Menu"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> Έπειτα θα προσθέσουμε ένα Stylesheet με το όνομα Menu.css κώδικας: #Menu { float: left; width: 200px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; } #Menu ul { margin: 0px; padding: 0px; list-style-type: none; } #Menu li { margin: 0px; } #Menu a { display: block; padding: 4px 4px 4px 25px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #599d7e; color: #ffffff; } #Menu a:link, #Menu a:visited { color: #ffffff; background-color: #599d7e; text-decoration: none; } #Menu a:hover, #Menu a:active { color: #333333; background-color: #599d7e; text-decoration: none; } Τώρα θα εισάγουμε το StyleSheet που φτιάξαμε μέσα στην σελίδα μας, οποτε πάνω από το </head> τοποθετούμε τον ακόλουθο κώδικα: κώδικας: <style type="text/css"> <!-- @import url(Menu.css); --> </style> Τώρα το menu αυτό λειτουργεί σε Firefox και σε Opera (μπορεί και αλλου αλλα δεν έχω δοκιμάσει άλλους) για να λειτουργήσει σε IE 5 πρέπει να εισάγουμε ένα CSS hack το οποιο θα το εισάγουμε μέσα σε Conditional Commentο κώδικας θα τοποθετηθεί πάνω από το </head> κώδικας: <!--[if IE 5]> <style type="text/css"> #Menu a { height: 1em; float: left; clear: both; width: 100%; } </style> <![endif]--> το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι η έκδοση 5 Παρ' ολ' αυτά το menu δεν λειτουργεί σε IE 6 και σε IE 7 οποτε θα πρέπει να ορίσουμε άλλο ένα CSS Hack το οποιο θα είναι μέσα σε Conditional Comment κώδικας: <!--[if gte IE 6]> <style type="text/css"> #Menu a { height: 1em; } </style> <![endif]--> το StyleSheet αυτό θα λειτουργήσει μονο όταν η έκδοση του IE είναι 6 η μεγαλύτερη gte = greater than or equal to (=μεγαλύτερο η ίσο με) Τώρα με μερικές αλλαγές στον κώδικα μπορούμε να μετατρέψουμε το κάθετο menu σε οριζόντιο. στο Menu.css θα πρέπει να εφαρμόσουμε τις εξής αλλαγές: από: κώδικας: #Menu { float: left; width: 200px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; } σε: κώδικας: #Menu { float: left; width: 100%; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; } από: κώδικας: #Menu li { margin: 0px; } σε: κώδικας: #Menu li { float: left; white-space: nowrap; margin: 0 0 1em 0; padding: 0; } από: κώδικας: #Menu a { display: block; padding: 4px 4px 4px 25px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #599d7e; color: #ffffff; } σε: κώδικας: #Menu a { padding: 4px 50px 4px 25px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #599d7e; color: #ffffff; } από: κώδικας: <!--[if IE 5]> <style type="text/css"> #Menu a { height: 1em; float: left; clear: both; width: 100%; } </style> <![endif]--> <!--[if gte IE 6]> <style type="text/css"> #Menu a { height: 1em; } </style> <![endif]--> σε: κώδικας: <!--[if gte IE 5]> <style type="text/css"> #Menu a { position: relative; height: 1em; } </style> <![endif]--> και έτσι έχουμε δημιουργήσει ένα οριζόντιο menu απλά και γρήγορα! Με τον ίδιο τρόπο μπορούμε να φτιάξουμε και dropdown menus manu.html κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Menu</title> <style type="text/css"> <!-- @import url(menu.css); --> </style> <script type="text/javascript"> <!-- subHover = function() { var subEls = document.getElementById("Menu").getElementsByTagName("LI"); for (var i=0; i<subEls.length; i++) { subEls.onmouseover=function() { this.className+=" subhover"; } subEls.onmouseout=function() { this.className=this.className.replace(new RegExp("subhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", subHover); //--> </script> </head> <body> <div id="Menu"> <ul> <li><a href="#">Category 1</a></li> <li><a href="#">Category 2</a> <ul> <li><a href="#">Sub Category 1</a></li> <li><a href="#">Sub Category 2</a> <ul> <li><a href="#">Sub Category 2.1</a></li> <li><a href="#">Sub Category 2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">Category 3</a></li> <li><a href="#">Category 4</a></li> </ul> </div> </body> </html> menu.css κώδικας: #Menu, #Menu ul { list-style: none; padding: 0; margin: 0 0 1em 0; width: 60em; line-height: 1em; } #Menu li { float: left; white-space: nowrap; margin: 0; padding: 0; width: 10em; } #Menu a { background-color: #599d7e; color: #ffffff; padding: 4px 70px 4px 25px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #000000; display: block; width: 10em; text-decoration: none; /*/*/ width: 6em; /* */ } #Menu a:link, #Menu a:visited { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; color: #ffffff; background-color: #599d7e; white-space: nowrap; } #Menu a:hover, #Menu a:active { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; color: #000000; background-color: #599d7e; white-space: nowrap; } #Menu a.parentItem { background: url(images/arrow.gif) center right no-repeat; } #Menu li ul { position: absolute; left: -999em; height: auto; width: 8em; margin: 0; } #Menu li:hover ul ul, #Menu li.subhover ul ul { left: -999em; } #Menu li:hover ul, #Menu li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul { left: auto; } #Menu li:hover ul ul, #Menu li:hover ul ul ul, #Menu li.subhover ul ul, #Menu li.subhover ul ul ul { left: -999em; } #Menu li:hover ul, #Menu li li:hover ul, #Menu li li li:hover ul, #Menu li.subhover ul, #Menu li li.subhover ul, #Menu li li li.subhover ul { left: auto; } #Menu li li { padding-right: 0; width: 8em; } #Menu li li a { width: 10em; width: 4em; } #Menu li ul ul { margin: -1.55em 0 0 8.8em; }

Στο μάθημα αυτό θα δούμε πως μπορούμε να προσθέσουμε στην ιστοσελίδα μας έξυπνες και όμορφες ημερομηνίες για τα θέματά μας. Θα χρειαστούμε δύο εικόνες τις οποίες μπορείτε να τις βρείτε εδώ: Εικόνα 1 Εικόνα 2 Στο css αρχείο μας θα προσθέσουμε το παρακάτω: κώδικας: .date { display:block; text-align: center; float:left; font-family: Arial, Helvetica, sans-serif; background:url(clip-bottom.png) right bottom no-repeat; margin-right:2px; width:40px; } display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω. text-align: κεντρική στοίχιση float:left τοποθέτηση στα αριστερά font-family: επιλογή γραμματοσειράς background: εικόνα φόντου τοποθετημένη κάτω αριστερά και μη επαναλαμβανόμενη margin-right απόσταση από δεξιά width: πλάτος κώδικας: .month { display:block; font-size: 10px; padding-top:12px; background:url(clip-top.gif) center top repeat-x; } display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω. font-size: Μέγεθος γραμματοσειράς padding-top: απόσταση του περιεχομένου από το πάνω μέρος background: εικόνα φόντου τοποθετημένη πάνω κέντρο και επαναλαμβανόμενη μόνο οριζόντια κώδικας: .day { display:block; font-size:14px; } display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω. font-size: Μέγεθος γραμματοσειράς Μέσα στο html αρχείο μας και στο σημείο που θέλουμε να εμφανίζετε η ημερομηνία θα γράψουμε το παρακάτω: κώδικας: <acronym class="date" title="9 Ιανουαρίου 2007"> <span class="month">Ιαν</span> <span class="day">9</span> </acronym> Live demo

Το παρακάτω είναι ένα tip για το πως μπορούμε να βάλουμε έναν βαθμό προστασίας στις εικόνες μας, είναι σχετικά καλή προστασία, δηλαδή δεν θα μπορέσει ο καθένας να πάρει την εικόνα μας . Φυσικά να επισημάνω πως από την στιγμή που είναι online τίποτα δεν είναι ασφαλές, αλλα είμαστε υπεύθυνοι να αυξάνουμε το επίπεδο ασφαλειας σε ορισμένα θέματα. Λοιπόν για να μην τα πολυλογώ ας αρχίσουμε. Για αρχή φτιάχνουμε ένα gifaki 1x1 (width 1 και height 1) transparent. Για να γίνει αυτό ακολουθούμε τα παρακάτω βήματα. Ανοίγουμε το photoshop (εγώ αυτό δουλεύω, όχι ότι δεν μπορεί να γίνει και με αλλα προγράμματα επεξεργασίας εικόνας). Από το menu επιλέγουμε File -> New η πατάμε τον συνδυασμό Ctrl+N από το παράθυρο που μας βγαίνει βάζουμε την τιμή 1 στο Width και στο Heght και σιγουρευόμαστε πως η μονάδα μέτρησης είναι pixels και όχι κάτι άλλο. Στο Background Contents επιλέγουμε την τιμή Transparent από το drop down menu. Τέλος πατάμε OK Τώρα έχουμε στο stage μας μια εικόνα μεγέθους 1 x 1 με διαφανες χρώμα. Το επόμενο βήμα μας είναι να την αποθηκεύσουμε, επιλέγουμε από το menu File -> Save for Web η πατάμε τον συνδυασμό Alt+Shift+Ctrl+S. Στο παράθυρο που μας βγαίνει ελέγχουμε αν είναι τσεκαρισμένο το Transparency (φυσιολογικά πρέπει να είναι). Αφού κάναμε τον έλεγχο πατάμε Save και το σώζουμε σε ένα φάκελο της επιλογής μας με όνομα της επιλογής μας, εγώ χρησιμοποίησα το κοινό όνομα, spacer.gif Αυτά για το gifaki πάμε τώρα για το επόμενο στάδιο. Λοιπόν ας μιλήσουμε τώρα σε (X)HTML & CSS Βάζουμε το σκαρί της σελίδας μας. Εγώ δουλεύω σε XHTML 1.0 Strict σε οποιον δεν αρέσει μπορεί να το αλλάξει ότι βολεύει τον καθένα δεν πειράζει καθόλου το συγκεκριμένο "trick" δεν απαιτεί κάποιο validation ούτος η άλλος. Οποτε αρχικά έχουμε το παρακάτω.. κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Protecting images</title> </head> <body> <div> </div> </body> </html> Σημείωση: αν αλλάξετε το DTD από XHTML Strict σε απλή html αλλάξτε και το content από application/xhtml+xml σε text/html, αν πάλι αλλάξετε το DTD από Strict σε κάποιο άλλο XHTML DTD φροντίστε να είναι τουλάχιστον well formed η σελίδα σας αν όχι και valid γιατί θα σας χτυπήσει λόγο του application/xhtml+xml Στην συνεχεια φτιάχνουμε ένα CSS αρχείο και το αποθηκεύουμε με όνομα images.css. Για αρχή βάζουμε τον παρακάτω κώδικα μέσα.. κώδικας: img.foobar { background-image: url(../images/foobar.jpg); background-repeat: no-repeat; width: 100px; height: 100px; } Στο background-image βάζουμε το relative path προς την εικόνα. Στο background-repeat βάζουμε το value no-repeat για να μην επαναλαμβάνεται η εικόνα, μπορούμε να το αλλάξουμε αν θέλουμε να επαναλαμβάνεται όμως, ότι θέλουμε ανάλογα με την περίσταση! Στο width και στο height βάζουμε το width και το height της εικόνας αντίστοιχα. Θα μπορούσαμε να κάνουμε πολλά κολπάκια πάντως! Αλλάζοντας το width και το height σε 3 pixels παραπάνω πχ προσθέτοντας και ένα border: 1πχ solid #333333 (αυτό δηλώνει ένα πινακα γραμμικό με χρώμα 333333, είναι ένα ανοικτό μαύρο που m' αρέσει πολύ και το χρησιμοποιώ συχνά) τέλος θα προσθέταμε και ένα background-position: center center; για να κάτσει ακριβώς την μέση η εικόνα μας, το background-position property βοηθάει στο να καθορίζεις την θέση του background στο αντικείμενο, παίρνει τιμές x και y με βάση τον άξονα το x ορίζει την οριζόντια θέση και το y την κάθετη οποτε βάζουμε το value center center χωρίς κόμμα και αυτό αυτόματα κεντράρετε στην μέση, και το αποτέλεσμα θα ήταν ένα πολύ ωραίο image με ένα περίγραμμα για να μην είναι ξεκάρφωτο στην σελίδα μας Όμως δεν τελειώνει εδώ! θα μπορούσαμε να το "αναπατυξουμε" πολύ παραπάνω! χρησιμοποιώντας το pseudo class :hover θα μπορούσαμε να κάνουμε πολλά πράματα, από το ποιο απλό, όπως το να αλλάζεις το border color έως και να κάνουμε switch την εικόνα με μια άλλη αλλάζοντας το background-image* σε άλλο value και αλλα πολλά!! Εμείς ας κρατήσουμε το απλό για το παράδειγμα μας μιας και τα αλλα αποτελούν από μονα τους επιπλέον τεχνικές Οποτε προσθέτουμε και το παρακάτω στο css μας κώδικας: img.foobar:hover { border: 1px solid #f9f9f9; } Άφησα το πάχος του border 1πχ και γραμμικό και άλλαξα το χρώμα του σε #f9f9f9 το οποιο είναι ένα πολύ ανοικτό γκριζάκι, προς το άσπρο ποιο πολύ, άλλο ένα χρώμα που μου αρέσει πολύ και το χρησιμοποιώ αρκετά για backgroung color! Ωραία! τώρα που έχουμε το css μας έτοιμο πάμε να το βάλουμε στην (X)HTML σελίδα μας. Κάτω από το title element προσθέτουμε το παρακάτω link element κώδικας: <link href="css/images.css" type="text/css" rel="stylesheet" /> Πολύ ωραία! τώρα που προσθέσαμε το css μας είμαστε πλέον έτοιμοι να προσθέσουμε και το image μας! Οποτε προσθέτουμε το image μας με τον παρακάτω κώδικα τον οποιον βάζουμε μέσα στο div element που έχουμε μέσα στο body της σελίδας μας.. κώδικας: <img src="images/spacer.gif" class="foobar" alt="My protected image!" /> Στο attribute src βάζουμε το path για το spacer.gif, η όπως το έχει ονομάσει ο καθ' ένας, που φτιάξαμε προηγούμενος. Στο attribute class βάζουμε το class που φτιάξαμε, στην προκειμενη περίπτωση έχουμε μονο το class με όνομα foobar, θα μπορούσαμε να έχουμε πολλά classes, όσες εικόνες θα θέλαμε να χρησιμοποιήσουμε με αυτόν τον τρόπο θα τις είχαμε σε διαφορετική class για την κάθε μια! Οποτε εμείς βάλαμε την class foobar μιας και είναι η μονη που έχουμε. Μιας και θέλω να είμαι valid πρόσθετο πάντα το alt attribute. Δεν είναι το θέμα μας αλλα θα το αναφέρω. Είναι καλο να προσθέτουμε αυτό το attribute πάντως, χρησιμεύει στο να περιγραφει στον χρηστη περί τίνος πρόκειται να δείξει η εικόνα, ο χρηστος το βλέπει όταν πάει το mouse από πάνω από την εικόνα και το κρατάει για μερικά ms. Επίσης χρησιμεύει στο να αναφέρει στον χρηστη μια περιγραφή σε περίπτωση που είναι πολύ μεγάλη η εικόνα και αργεί να φορτώσει η αν δεν βρίσκει το path προς την εικόνα δείχνει την περιγραφή μονο. Λοιπόν! αυτό ήταν το όλο θέμα περί της τεχνικής αυτής, το πως μου ήρθε.. αστείο, το είδα σε όνειρο! Τώρα φυσιολογικά θα πρέπει να έχετε το παρακάτω Ένα αρχείο gif μεγέθους 1x1 διαφανες Ένα αρχείο css με όνομα images.css και με περιεχόμενο κώδικας: img.foobar { background-image: url(../images/foobar.jpg); background-repeat: no-repeat; width: 103px; height: 103px; border: 1px solid #333333; background-position: center center; } img.foobar:hover { border: 1px solid #f9f9f9; } Και ένα αρχείο .html με όνομα της αρεσκείας σας και με περιεχόμενο κώδικας: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>Protecting images</title> <link href="css/images.css" type="text/css" rel="stylesheet" /> </head> <body> <div> <img src="images/spacer.gif" class="foobar" alt="My protected image!" /> </div> </body> </html> Demo here! Αυτά εκ μέρους μου προς το παρόν! Ελπίζω να σας φανεί χρήσιμο, προσωπικά δεν μου φάνηκε χρήσιμο κάπου προς το μιας και για μένα η ιδέα του internet είναι να είναι όλα ελευθερα για όλους και προσβάσιμα απ' όλους μιας και αποτελούν όλα μια πηγή πληροφοριών, αυτή είναι και η ιδέα του web 2 άλλωστε... Αν και ώρες ώρες θα πρέπει να προστατεύεις κάπως κάποια πράματα! Anyway! Ευχάριστο που το διαβάσατε! Cya next time! * Μιας και ανέφερα το sweep τον εικόνων με αυτόν τον τρόπο, με την αλλαγή δηλαδή στο value του background-image property στο :hover, ναπω πως έτσι δημιουργείται ένα flickering στο mouse over - :hover - δηλαδή δεν βλέπει τίποτα το χρηστης μέχρι να φορτώσει η εικόνα που έχουμε ορίσει στο:hover, για να apofgoume κάτι τέτοιο κάνουμε το εξής. Θα τα πω χοντρικά μιας και δεν είναι το θέμα μας. Έχουμε 2 εικόνες 100x100 η κάθε μια θα τις ενώσουμε οποτε θα πάρουμε μια εικόνα 200x100 όπου αριστερά θα έχει την normal εικόνα και δεξιά την :hover εικόνα. Στο normal class θα βάλουμε την εικόνακαι στο background-position θα βάλουμε τις τιμές: 0px 0px οποτε θα έχουμε αυτό με λίγα λόγια: background-position: 0px 0px; έπειτα στοhover θα αλλάξουμε το background-position: 0px 0px; σε background-position: -100πχ 0px; και φυσικά εννοείτε πως στο width δεν θα βάλουμε200πχ αλλα 100πχ. Αυτά, τα είπα αρκετά χοντρά αλλα εξήγησα τον λόγο, αν όμως κάποιος θέλει να το αναπτύξω και αυτό το θέμα.. just ask for it! PS: Ένα ακόμα tip που έδωσε ο Rapid-eraser είναι βάζοντας ένα mod μέσο .htaccess απαγορεύοντας direct link στις εικόνες. Με αυτό το τρόπο αυξάνουμε την προστασία ακόμα περισσότερο! Αλλα όπως είπαμε ξανά και ξανά τίποτα δεν έχει την απόλυτη ασφάλεια από την στιγμή που είναι online!

Το να χρησιμοποιείτε διαφορετικά CSS properties σε διαφορετικούς browsers είναι κάτι πολύ σύνηθες αφου δεν έχουνε την ίδια χρήση. Conditional-CSS επιτρέπει να χρησιμοποιείτε το if statment για να απευθυνθείτε σε έναν μόνο browser ή σε ένα group απο browsers Conditional CSS Features of Conditional-CSS: * Target CSS to any web-browser * Streamline maintenance of your CSS files * Optimise your CSS * Work around those annoying little CSS bugs * Automatic expansion and inclusion of @import statements * It’s free and open source! κώδικας: # /* Conditional-CSS example */ a.button_active, a.button_unactive { display: inline-block; [if lte Gecko 1.8] display: -moz-inline-stack; [if lte Konq 3.1] float: left; height: 30px; [if IE 5.0] margin-top: -1px; text-decoration: none; outline: none; [if IE] text-decoration: expression(hideFocus='true'); } Website: http://www.conditional-css.com/ Demo: http://www.conditional-css.com/demo/ Download: http://www.conditional-css.com/download