Εκτέλεση διαφορετικών συναρτήσεων σε loop (javascript)

Έστω ότι έχετε μια λίστα από checkboxes. Όταν πατηθεί ένα κουμπί στη φόρμα σας, θα πρέπει να εκτελέσετε μια συνάρτηση για το κάθε κουμπί. Πώς θα το κάνετε;

Και για να γίνω πιο συγκεκριμένη, έστω ότι το markup σας ήταν το παρακάτω:

<fieldset id="optionsFieldset">
	<legend>Επιλογές μετατροπής</legend>
	<label><input type="checkbox" id="deCapitalize" checked="checked" tabindex="3" />Πεζοποίηση</label>
	<label><input type="checkbox" id="convertGreeklish" tabindex="4" />Στοιχειώδης μετατροπή από Greeklish</label>
	<label><input type="checkbox" id="fixAbbreviations" checked="checked" tabindex="5" />Διόρθωση συντομεύσεων</label>
	<label><input type="checkbox" id="accentuate" checked="checked" tabindex="6" />Τονισμός</label>
	<label><input type="checkbox" id="fixPunctuation" checked="checked" tabindex="7" />Διόρθωση σημείων στίξης</label>
</fieldset>

Κάθε ένα από αυτά τα checkboxes επιθυμείτε να εκτελεί μια συγκεκριμένη συνάρτηση αν είναι τσεκαρισμένο και ο χρήστης πατήσει το κουμπί “Μετατροπή”

Button με εικονίδιο και κείμενο γίνεται; Βεβαίως και γίνεται!

…και όχι, χωρίς να καταφύγετε σε λύσεις του στυλ “div που μοιάζει με button”.

Σκεφτόμουν ότι κάτι τέτοιο είναι πολύ στοιχειώδες για τη θεματολογία που θα ήθελα να έχει το blog, όμως προς μεγάλη μου έκπληξη παρατηρώ ότι αρκετοί συνάδελφοι δεν το γνωρίζουν, και θεωρούν ότι button μπορούν να δημιουργήσουν μόνο με το κλασσικό <input type=”button/submit/image” /> τρόπο.

Υπάρχει ωστόσο και ένα άλλο tag, το <button /> tag, το οποίο είναι ισοδύναμο όσον αφορά τη λειτουργικότητα με το <input type=”button” />, αλλά επιτρέπει πολλά περισσότερα όσον αφορά την εμφάνιση. Καταρχάς, μπορείτε να βάλετε μέσα ένα <img /> tag και να έχετε αυτομάτως ένα κουμπί και με κείμενο, και με το εικονίδιο σας.

Θα μπορούσε κάποιος να πει “γιατί δεν το κάνεις βάζοντας ως background image σε ένα απλό <input /> το εικονίδιο που θες, ώστε να είναι separated το markup από το presentation όπως ορίζουν τα web standards;” και θα είχε δίκιο, όχι όμως για ολες τις περιπτώσεις.

Αυτόματη προσθήκη -webkit-border-radius όπου έχετε -moz-border-radius

Μέχρι να έρθουν οι μέρες που το CSS3 θα έχει φτάσει σε επίσημο specification που θα υποστηρίζεται από όλους τους browsers, είμαστε αναγκασμένοι αν θέλουμε να χρησιμοποιήσουμε κάποιο feature του να χρησιμοποιούμε proprietary properties του κάθε browser και να ξέρουμε ότι δεν πρόκειται το εφέ μας να φαίνεται ίδιο παντού (με ελάχιστες εξαιρέσεις όπως το opacity που πλέον το υποστηρίζουν όλοι εκτός από τον ΙΕ, ο οποίος όμως έχει αντίστοιχο filter και κάααπως παλεύεται).

Ένα τέτοιο παράδειγμα είναι και το border-radius. Επί του παρόντος, υποστηρίζεται μόνο από Firefox 3 και Safari 3 (υπάρχει και στον Firefox 2, αλλά τόσο άθλιο που δεν αξίζει). Προφανώς, σε περιπτώσεις που θέλουμε όπωσδήποτε κάτι να έχει στρογγυλεμένες γωνίες θα καταφύγουμε σε κάποιον από τους all time classic τρόπους (τεχνικές με background images, τεχνικές με javascript κοκ). Υπάρχουν όμως και περιπτώσεις που κάτι φαίνεται αρκετά όμορφο χωρίς rounded corners, και δεν θεωρούμε απαραίτητο να το φορτώσουμε με το extra markup που είται απαιτείται είτε παράγεται από όλες τις υπάρχουσες cross-browser μεθόδους για rounded corners. Σε αυτή την περίπτωση χρησιμοποιούμε proprietary css properties (-moz-border-radius, -webkit-border-radius). Μεγάλα παιδιά είστε, δεν χρειάζεται να σας επισημάνω τους “κινδύνους” από κάτι τέτοιο (πχ css που δεν περνάει το validation) σαν τις προειδοποιήσεις στα πακέτα των τσιγάρων. Όποιος το χρησιμοποιεί υποτίθεται ότι ξέρει γιατί το κάνει και ποιές είναι οι συνέπειες.

Ωστόσο ο σκοπός του παρόντος δεν είναι να αναλύσει τα αρνητικά και τα θετικά των τρέχοντων implementations του border-radius. Το παρόν post έχει σκοπό να εγκαινιάσει μια νέα κατηγορία στο blog: Dreamweaver find & replace regular expressions. Διαπιστώνω ότι πολλοί συνάδελφοι δεν έχουν ασχοληθεί με τα regular expressions ενώ πέρα από προγραμματιστική ευκολία μπορεί να τους βοηθήσουν να γλιτώσουν αρκετό χρόνο από βαρετά tasks. Έτσι, αποφάσισα στην κατηγορία αυτή να ανεβάζω διάφορα έτοιμα dreamweaver queries όταν κρίνω ότι πέρα από μένα, μπορεί να χρησιμεύσουν και σε άλλους.

Πολλαπλή δυναμική εισαγωγή και εκτέλεση script tags

Τις προάλλες αντιμετώπισα ένα ιδιαίτερα ενοχλητικό και εκνευριστικό πρόβλημα που με απασχόλησε για 2 μέρες μέχρι που μόλις πριν λίγο το έλυσα και αποφάσισα να μοιραστώ μαζί σας τη λύση στην οποία κατέληξα.

Ας πάρουμε τα πράγματα από την αρχή. Το πρόβλημα ήταν το εξής: Σε ένα div εντός μιας σελίδας, φόρτωνα με AJAX κάποιο κομμάτι HTML από άλλη σελίδα του site (το ποιό ακριβώς εξαρτείτο από την επιλογή του χρήστη). Το κομμάτι HTML αυτό, ενίοτε περιείχε και <script> tags, είτε προς εξωτερικό js αρχείο, είτε inline, είτε διάφορων ειδών, τα οποία έπρεπε να τρέξουν με τη σειρά που υπήρχαν στην HTML για να λειτουργεί σωστά. Αρχικά σκέφτηκα να τα παίρνω με τη σειρά και να τα εισάγω με DOM manipulation στο head της σελίδας, λύση που προτεινόταν σε αρκετά σχετικά άρθρα. Δεν είχα υπολογίσει όμως κάτι: Ο browser δεν θα καθόταν να περιμένει να φορτώσει το καθένα τους, όπως όταν φορτώνει μια σελίδα. Θα μπορούσα να περιγράψω τη συμπεριφορά του σαν τη συμπεριφορά του ΙΕ στην ιδιότητα defer ενός script, μόνο που το έκαναν όλοι οι browsers, χωρίς να υπάρχει καμία ιδιότητα defer στα εν λόγω!

Τα συχνότερα (βλάκώδη) συντακτικά λάθη στην PHP

Είναι χαζά, αλλά μπορεί να φάμε πολύ χρόνο ψάχνοντας να βρούμε που ακριβώς κάναμε τη βλακεία αυτή τη φορά. Όταν τελικά το βρούμε, μας έρχεται να πνίξουμε τον εαυτό μας – αν μπορούσαμε. Όση εμπειρία και να έχει κανείς, ποτέ δεν γλιτώνει από τα βλακώδη parse errors, μιας και πάντα θα έρθει η στιγμή που θα φύγει το μυαλό σου αλλού και θα την κάνεις την πατάτα, οπότε σκέφτηκα να κάνω μια λίστα από τα συχνότερα (τουλάχιστον αυτά που κάνω εγώ συχνότερα), μήπως χρησιμεύσει σε μένα ή σε άλλους ως checklist.

1. Παράλειψη του $ πριν κάποιο όνομα μεταβλητής
2. Παράλειψη του ; στο τέλος γραμμής
3. Παράλειψη της τελευταίας παρένθεσης (ειδικά σε if() που έχει μέσα συναρτήσεις)
4. Παράλειψη του “function” πριν τη δήλωση κάποιας συνάρτησης
5. Παράλειψη κάποιου closing brace (})
6. { ή ( αντί για [
7. } ή ) αντί για ]
8. Παράλειψη του concatenation operator (.) ή + αντί για αυτόν (ειδικά αν προηγουμένως γράφατε σε κάποια java-οειδή γλώσσα)

Εσείς τι συντακτικά λάθη κάνετε συχνότερα; Αν ξέχασα κάτι, πείτε μου να το προσθέσω, ώστε να φτιάξουμε μια πραγματικά πλήρη λίστα!