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

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

Τι είναι τα GreekTuts Sessions

Τα GreekTuts Sessions είναι μια σειρά από προσωπικούς online εκπαιδευτικούς οδηγούς που θα ξεκινήσουν από τον Σεπτέμβριο. H διεξαγωγή αυτών των οδηγών θα γίνει μέσω μιας online πλατφόρμας e-learning, που σας προσφέρει δυνατότητα αλληλεπίδρασης με τον παρουσιαστή σας. Οι εκπαιδεύσεις είναι προσωπικές, πράγμα που σημαίνει ότι έχετε την δυνατότητα να μάθετε όλα όσα χρειάζεστε από το σπίτι σας, τις ώρες και μέρες που σας βολέυουν.

Κατά την παρουσίαση, θα μπορείτε να δείτε σε video την εκπαίδευση και να κάνετε ερωτήσεις όσο συχνά χρειαστεί. Το μόνο εργαλείο που θα χρειαστείτε είναι ο αγαπημένος σας browser, και πολύ όρεξη για μάθηση.

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

Πακέτα Εκπαιδεύσεων

Σας προσφέρουμε 2 διαφορετικά πακέτα συμμετοχής στις εκπαιδεύσεις, για να διαλέξετε αυτό που σας συμφαίρει και σας βολέυει.

• Πλήρες Πακέτο – Για παρακολούθηση όλης της σειράς
• Συγκεκριμένο Κεφάλαιο – Για παρακολούθηση ενός συγκεκριμένου κεφαλαίου

* Οι τιμές των 2 πακέτων θα ανακοινωθούν σύντομα.

Περιεχόμενα Online Εκπαιδεύσης

Κεφάλαιο 1 – HTML & CSS

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

Κεφάλαιο 2 – Javascript & jQuery

Σε αυτό το κεφάλαιο θα καλύψουμε όλες τις βασικές λειτουργίες για την Javascript και θα δούμε πως μπορούμε έυκολα και γρήγορα να κάνουμε το περιεχόμενο της ιστοσελίδας μας πιο ενδιαφέρον και διαδραστικό για τον χρήστη. Επίσης θα δούμε τα πάντα για την διάσημη βιβλιοθήκη jQuery

Κεφάλαιο 3 – Front End Design

Σε αυτό το κεφάλαιο θα δούμε όλες τις βασικές αρχές που πρέπει να ακολουθούμε κατά την διάρκεια σχεδιασμού μιας ιστοσελίδας, και ποιά είναι τα λάθη που πρέπει να αποφέυγουμε. Επίσης θα δούμε και θα αναλύσουμε ποιά είναι τα διάφορα styles και trends που ακολουθούνται από designers σε όλο τον κόσμο.

Κεφάλαιο 4 – WordPress

Σε αυτό το κεφάλαιο θα μάθουμε για πάντα για το WordPress. Από το πως θα στήσουμε ένα δικό μας απλό blog, μέχρι πως θα δημιουργήσουμε μια κομψή και περίπλοκη ιστοσελίδα χρησιμοποιώντας το WordPress. Τέλος θα δούμε την δομή ενός θέματος και ενός plugin και θα μάθουμε τα βασικά για την δημιουργία του δικού σας θέματος και του δικού σας Plugin.

Κεφάλαιο 5 – SEO & Promotion

Σε αυτό το κεφάλαιο θα μιλήσουμε για τις μηχανές αναζήτησεις και για το πώς μπορούμε να ανεβάσουμε την ιστοσελίδα μας ψηλά στις λίστες αποτελεσμάτων. Θα δούμε διάφορες τεχνικές προαγωγής της σελίδας μας, και όλα όσα πρέπει να αποφύγουμε κατά την προσπάθεια του Search Engine Optimization.

Φόρμα Εκδήλωσης Ενδιαφέροντος

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

[contact-form-7]

Ο κώδικας που έχουμε μέχρι τώρα, δημιουργεί ένα function με το όνομα jTabber (που είναι και το όνομα του plugin μας), του δίνει δυνατότητα χρησης options, επιλέγει μέσω του function tabUlize τα στοιχεία που θέλουμε και τους δίνει την μορφοποίηση που χρειαζόμαστε για να χειριστούμε τα tabs. Μέχρι τώρα έχουμε το εξής:

(function( jQuery ){
	jQuery.fn.jTabber = function( options ) {
		return this.each(function() {
			var settings = {
				'state' : 'open'
			};
			jQuery.fn.tabUlize = function() {
				jQuery(this).wrap('
');
				jQuery('h2').wrap('

').append('');
				jQuery('p').wrap('

');
			};
			jQuery(this).tabUlize();
		});
	};
})( jQuery );

Συνεχίζουμε γράφοντας ακριβώς κάτω από το jQuery(this).tabUlize(); κάποια conditionals. Γράφοντας:

if ( options ) {jQuery.extend( settings, options );}

δίνουμε την δυνατότητα στο plugin μας να κάνει extend τα options του. Συνεχίζουμε γράφοντας :

if (options.state == 'open') {
	 jQuery('.tab-cont').addClass('open');
	 jQuery('.tab-cont').prev('.tab-head').addClass('open-head')
} else {
	jQuery('.tab-cont').hide().addClass('closed');
	jQuery('.tab-cont').prev('.tab-head').addClass('closed-head')
}

Ο παραπάνω κώδικας δίνει την αρχική κατάσταση στα tabs σύμφωνα με τα options και την τιμή τους. Συνεχίζουμε γράφοντας από κάτω

jQuery('.tab-head').click(function() {
	jQuery(this).next('.tab-cont').slideToggle(100, function() {
		if (jQuery(this).is(':visible')) {
			jQuery(this).addClass('open');
			jQuery(this).removeClass('closed');
			jQuery(this).prev('.tab-head').addClass('open-head')
			jQuery(this).prev('.tab-head').removeClass('closed-head')
		} else {
			jQuery(this).removeClass('open');
			jQuery(this).addClass('closed');
			jQuery(this).prev('.tab-head').removeClass('open-head')
			jQuery(this).prev('.tab-head').addClass('closed-head')
		}
	});
});

ο παραπάνω κώδικας είναι αυτός που δίνει την λειτουργικότητα που θέλουμε στα στοιχεία της σελίδας μας. Κάθε φορά που γίνεται κλικ σε ένα tab header, επιλέγουμε το αμέσως επόμενο div που έχει το class tab-cont, του κάνουμε ένα slideToggle, και ξεκινάμε μια διαδικασία ελέγχων για να προσθέσουμε ή να αφαιρέσουμε κάποια classes ώστε να κάνουμε τον κώδικα μας όσο πιο user friendly γίνεται. Πρόσθέτοντας και αφαιρώντας τις κλάσεις, μπορούμε να δώσουμε στον χρήστη την δυνατότητα να δώσει stlyes μέσω των CSS στα στοιχεία που έχουμε δημιουργήσει.

Τέλος γράφουμε το εξής:

jQuery('.tab-head').hover(function(){
	$(this).addClass('hover');
},
function(){
	jQuery('.tab-head').removeClass('hover');
}
);

για να δώσουμε επιπλέον κλάσεις όταν ο χρήστης περνάει τον κέρσορα πάνω από τα tabs. Πλέον είμαστε έτοιμοι. Το μόνο που έχουμε να κάνουμε είναι στο head της σελίδας μας να συμπεριλάβουμε το plugin μας με τον κώδικα:

%MINIFYHTML90b7bd0b60d82be31f8362a39b24f2840%

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

%MINIFYHTML90b7bd0b60d82be31f8362a39b24f2841%

Παρατηρήστε ότι δεν περνάμε αρχική τιμή, αλλά το plugin πάει και παίρνει ως αρχική τιμή αυτή που του ορίσαμε (δηλαδή ‘state’ : ‘open’)

Mπορείτε να κατεβάσετε δωρεάν το jTabber Plugin και να το χρησιμοποιήσετε όπως θέλετε στις δουλειές σας

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

Επίσης, πολλές φορές μπορεί να βρούμε κάποιο plugin που να κάνει εν μέρη αυτό που θέλουμε, αλλά ή να επιστρέφει “άσχημο” κώδικα ή να είναι δυσλειτουργικό.

Τέλος μπορεί να θέλουμε να φτιάξουμε κάτι που απλά δεν υπάρχει !

Αυτοί είναι κάποιοι από τους κύριους για τους οποίους κάποιος μπορεί να θέλει να χτίσει το δικό του plugin.

To Plug in που θα χτίσουμε

Ας υποθέσουμε ότι θέλουμε να φτιάξουμε ένα plugin που θα παίρνει τους τίτλους και τις παραγράφους μέσα σε ένα div, και θα τα μετατρέπει σε sliding drawers. Για παράδειγμα έστω ότι έχουμε την εξής δομή μέσα στην σελίδα μας

<div class="content">
  <h2>This is a Heading</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leod.</p>
  <h2>This is a Heading</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leod.</p>
</div>

Και θέλουμε όταν φορτώνει η σελίδα, οι τίτλοι (h2) να γίνονται handles και οι παράγραφοι να γίνονται tabbed περιεχόμενο. Να μπορούμε δηλαδή πατώντας πάνω στους τίτλους να “ανοιγοκλείσουμε” το περιεχόμενο.

Η Αρχή των πάντων

Αρχίζοντας να γράφουμε το plugin μας πρέπει πρώτα απ’όλα να δηλώσουμε μια νέα jQuery function. Δημιουργούμε ένα νέο αρχείο με το όνομα που θέλουμε να δώσουμε στο plugin μας, στο συγκεκριμέπο παράδειγμα jTabber.js , και γράφουμε :

(function( jQuery ){
  jQuery.fn.jTabber = function(options) {
      // Εδώ θα μπεί ο κώδικας του plugin
   };
})( jQuery );

Στον παραπάνω κώδικα, δημιουργούμε το function jTabber, και το περικλείουμε μέσα σε ένα self executing function (closure) της jQuery ώστε να μπορούμε να χρησιμοποιήσουμε το δολλάριο ($) για selector στο plugin μας, χωρίς να έχουμε φόβο να κάνει conflict με άλλες βιβλιοθήκες που μπορεί να το χρησιμοποιούν. Επίσης δηλώνουμε στο function ότι θέλουμε να παίρνει παραμέτρους (options). Συνεχίζουμε γράφοντας την επιστροφή που θέλουμε να έχει το plugin μας, έτσι ώστε να μπορούμε να διατηρίσουμε το χαρακτηριστικό που είναι γνωστό ώς chainability (διασυνδεσιμότητα):

(function( jQuery ){
  jQuery.fn.jTabber = function(options) {
       return this.each(function() {
         // Εδώ θα μπεί ο κώδικας του plugin
       });
    };
})( jQuery );

Πλέον έχουμε έτοιμο το κέλυφος του plugin μας. Aς ξεκινήσουμε λοιπόν να γράφουμε τον κώδικα του plugin μας.

(function( jQuery ){
jQuery.fn.jTabber = function(options) {
   return this.each(function() {
          var settings = {
            'state' : 'open'
          };
          jQuery.fn.tabUlize = function() {
              jQuery(this).wrap('<div class="tabber">');
              jQuery('h2').wrap('<div class="tab-head"></div>').append('<span class="btn"></span>');
              jQuery('p').wrap('<div class="tab-cont"></div>');
          };
          jQuery(this).tabUlize();
       });
    };
})( jQuery );

Στον παραπάνω κώδικα, δηλώνουμε κατ’αρχάς τα settings που θέλουμε να έχει το plugin μας. Τις παραμέτρους που θα μπορεί να δώσει ο χρήστης δηλαδή. Στο παράδειγμα μας αυτό είναι το state, και του ορίζουμε ώς αρχική τιμή το open. Μέσα στο function μας μπορούμε επίσης να δημιουργήσουμε καινούργια functions, και έτσι όπως φαίνεται και στον παραπάνω κώδικα, φτιάχνουμε ένα εσωτερικό function (tabUlize) που θα βρεί τα στοιχεία που θέλουμε στην σελίδα μας, και θα κάνει wrap γύρω τους διάφορα divs ώστε να χτίσουμε μια δομή που θα μπορούμε να διαχειριστούμε.

Αν παρατηρήσετε τον κώδικα θα δείτε πολύ την έκφραση this. Αυτή αναφέρεται πάντα στο επιλεγμένο στοιχείο της function μας. O εξής κώδικας είναι αρκετός για να δημιουργήσει την δομή που θέλουμε. Αν εκτελέσετε το κώδικα που έχουμε μέχρι τώρα θα δείτε το εξής απότέλεσμα

Hint :  Δοκιμάστε να τρέξετε το παραπάνω παράδειγμα με απενεργοποιημένη την JavaScript στον browser σας για να δείτε τι ακριβώς κάνει το plugin μέχρι τώρα.

Για να μπορέσετε να καλέσετε το plugin θα πρέπει μέσα στο header του html σας να γράψετε

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
   $(".content").jTabber({
      'state' : ''
   });
});
</script>

Κλείνουμε το πρώτο μέρος, αφού πλέον το Plugin μας παίρνει όλα τα στοιχεία μέσα στο div που του δηλώνουμε, και τα ανακατατάσει σην αναμενόμενη δομή

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

Τα cookies είναι μικρά αρχεία κειμένου, που αποθηκεύονται στον υπολογιστή μας όταν σερφάρουμε στο διαδίκτυο. Αυτά τα αρχεία βοηθούν τις ιστοσελίδες να “θυμούνται” κάποιες ρυθμίσεις που έχουμε κάνει, ή κάποια προτίμηση μας στην εκάστοτε ιστοσελίδα. Για παράδειγμα, μια ιστοσελίδα μπορεί να έχει εναλλασόμενες εικόνες παρασκηνίου. Έτσι κάθε φορά που αλλάζουμε εικόνα, αποθηκεύεται ένα cookie με την εικόνα που επιλέξαμε, και έτσι κάθε φορά που φορτώνουμε μια σελίδα από την συγκεκριμένη ιστοσελίδα, διαβάζει τα στοιχεία του cookie, και εφαρμόζει το τελευταίο μας background.

Ο Παραδοσιακός τρόπος

Με την χρήση javascript, μπορούμε να δημιουργήσουμε cookies για οποιαδήποτε χρήση. Ο παραδοσιακός τρόπος δημιουργίας είναι γράφοντας

document.cookie = 'name=value; expires=Thu, 2 Aug 2008 20:00:00 UTC; path=/'

jQuery Cookies

Με την χρήση του plugin Cookie της βιβλιοθήκης jQuery, μπορούμε να δημιουργήσουμε cookies, με πιο απλή σύνταξη, και πιο εύκολη διαδικασία. Δείτε τον παρακάτω κώδικα και συγκρίνετε τον με τον αντίστοιχο της κλασσικής javascript πιο πάνω

$.cookie('myCookie', 'blue', { expires: 2 });

O παραπάνω κώδικας, δημιουργεί ένα cookie ονόματι “myCookie”, του δίνει την τιμή “blue” και του βάζει ημερομηνία λήξης τις 2 ημέρες.

Άλλες λειτουργίες με τα cookies

Με την παρακάτω γραμμή κώδικα μπορούμε να διαβάσουμε την τιμή που έχει μέσα το cookie που έχουμε δημιουργήσει

$.cookie('myCookie');

ενώ με τον παρακάτω κώδικα μπορούμε να του δώσουμε νέα τιμή

$.cookie('myCookie', 'blue');

Τέλος με τον παρακάτω κώδικα μπορούμε να διαγράψουμε την τιμή που έχει μέσα το cookie μας

$.cookie('myCookie', null);

Παράδειγμα

Δείτε μια live επίδειξη της χρήσης των cookies

Μπορείτε να κατεβάσετε και να χρησιμοποιήσετε και εσείς το plugin Cookie από την σελίδα http://github.com/carhartl/jquery-cookie

<p id="back-top">
          <a href="#top"><span></span>Go to Top</a>
</p>

Στον παραπάνω κώδικα, δημιουργούμε μια παράγραφο με συγκεκριμένο ID ώστε να μπορούμε να δώσουμε styles και εντολές της jQuery. Μέσα περιλαμβάνουμε ένα anchor link το οποίο περιέχει ένα span στο οποίο θα βάλουμε το εικονίδιο μας, και το κείμενο για τον χρήστη.

Συνεχίζοντας με την CSS θα δώσουμε κάποια μορφοποίηση στο νέο div που δημιουργήσαμε γράφοντας τον εξής κώδικα:

#back-top                     {position: fixed;bottom: 30px;margin-left:-65px;}
#back-top a                  {color:#000000;display:block;font:12px/100% "Trebuchet MS",Arial,Helvetica,sans-serif;text-align:center;text-decoration:none;text-transform:uppercase;width:48px;margin-bottom:10px;}
#back-top a:hover    {color: #3a9ef4;}
#back-top span           {background:url(../images/bak-top.png) no-repeat scroll center center #DDDDDD;display:block;height:48px;margin-bottom:4px;width:48px;}

Με τον παραπάνω κώδικα δίνουμε στην παράγραφο μας αποστάσεις και συγκεκριμένη θέση στην σελίδα μας, που δεν θα αλλάζει ακόμα και αν κάνουμε scroll. Επίσης δίνουμε χρώμα στο κείμενο του link και την εικόνα παρασκηνίου για το κουμπάκι μας (το εικονίδιο), Τέλος δίνουμε και ένα χρώμα στον σύνδεσμο όταν κάνουμε hover.

Συνεχίζοντας με την jQuery, θα γράψουμε τον κώδικα που θα κρύβει και θα εμφανίζει το κουμπάκι που δημιουργήσαμε, και τέλος θα έχει την λειτουργικότητα που θέλουμε. Γράφουμε τον εξής κώδικα:

$(document).ready(function(){
          // Κρύβουμε το div μόλις φορτώσει η σελίδα
          $("#back-top").hide();
          // Μόλις γίνει scroll πάνω από 100 pixels, εμφανίζουμε το div
          $(function () {
                    $(window).scroll(function () {
                              if ($(this).scrollTop() > 100) {
                                        $('#back-top').fadeIn();
                              } else {
                    $('#back-top').fadeOut();
                    }
          });
          // Μόλις πατήσουμε το anchor, κάνουμε scroll το document με animation 800ms
          $('#back-top a').click(function () {
                    $('body,html').animate({
                    scrollTop: 0
                    }, 800);
                    return false;
                    });
          });
});

Στον παραπάνω κώδικα αρχικά κρύβουμε το div μόλις φορτώσει η σελίδα. Μετά, αν γίνει scroll πάνω από 100 pixels, εμφανίζουμε το div, και τέλος μόλις πατήσουμε το anchor, κάνουμε scroll το document με animation 800ms.

Αυτό ήταν! Πλέον δίνουμε την δυνατότητα στους επισκέπτες μας να κάνουν auto-scroll στην σελίδα μας

Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ

1. How to add preloader with loading image in a gallery using jQuery

Δείτε το Demo | Δείτε το Βοήθημα

2. Simple Lava Lamp Menu Tutorial With jQuery

Δείτε το Demo | Δείτε το Βοήθημα

3. How To Create a 3D Tag Cloud in jQuery

Δείτε το Demo | Δείτε το Βοήθημα

4. Drag & Drop With jQuery

Δείτε το Demo | Δείτε το Βοήθημα

5. Awesome Horizontal Animated menu using Kwicks for jQuery

Δείτε το Demo | Δείτε το Βοήθημα

6. Create a Thumbnail Gallery With Slick Heading & Caption effect

Δείτε το Demo | Δείτε το Βοήθημα

7. Create an Attractive jQuery Menu with fade in and out effects

Δείτε το Demo | Δείτε το Βοήθημα

8. jQuery PHP AJAX Autosuggest

Δείτε το Demo | Δείτε το Βοήθημα

9. Perfect Login Drop Down Box Like Twitter

Δείτε το Demo | Δείτε το Βοήθημα

10. Crafting an Animated Postcard With jQuery

Δείτε το Demo | Δείτε το Βοήθημα

11. Twitter like Search With jQuery & AJAX

Δείτε το Demo | Δείτε το Βοήθημα

12. Voting System With jQuery, AJAX, PHP

Δείτε το Demo | Δείτε το Βοήθημα

13. AJAXed Sliding Shopping Cart Using jQuery

Δείτε το Demo | Δείτε το Βοήθημα

14. How To Build Animated Header in jQuery

Δείτε το Demo | Δείτε το Βοήθημα

15. Hide and Seek With jQuery

Δείτε το Demo | Δείτε το Βοήθημα

16. jQuery Comment Preview

Δείτε το Demo | Δείτε το Βοήθημα

17. Styling Drop Down Boxes With jQuery

Δείτε το Demo | Δείτε το Βοήθημα

18. Scrolling Dynamic Content Box

Δείτε το Demo | Δείτε το Βοήθημα

19. Ways To Debug your jQuery or JavaScript Code

Δείτε το Βοήθημα

Plugins

1. Tipsy

Δείτε το Demo | Σελίδα του Plugin

2. jQuery YouTube PlayList

Δείτε το Demo | Σελίδα του Plugin

3. SuperFish Menus

Σελίδα του Plugin

4. Elastic

Δείτε το Demo | Σελίδα του Plugin

5. OverScroll

Σελίδα του Plugin

6. Tweetable

Δείτε το Demo | Σελίδα του Plugin

7. jQuery Link nudge

Δείτε το Demo | Σελίδα του Plugin

8. TimePickr

Σελίδα του Plugin

9. Truncatable

Δείτε το Demo | Σελίδα του Plugin

10. Incremental Search For Select Boxes

Δείτε το Demo | Σελίδα του Plugin

11. Anything Slider

Δείτε το Demo | Σελίδα του Plugin

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>

Αν παρατηρήσετε καλά τον παραπάνω σύνδεσμο πρός το CDN της Google, θα παρατηρήσετε ότι “στοχεύουμε” την έκδοση 1.4.0 .

Αν θέλουμε να συμπεριλάβουμε τις τελευταίες έκδοσεις της 1.4 (να συμπεριλάβουμε δηλαδή τις εκδόσεις 1.4.1, 1.4.2 , 1.4.3 κτλ.) γράφουμε

<head>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>

Αν θέλουμε να συμπεριλάβουμε τις τελευταίες έκδοσεις της 1 (να συμπεριλάβουμε δηλαδή τις εκδόσεις 1.4, 1.4.2 , 1.5.1 κτλ.) γράφουμε

<head>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

ΠΡΟΣΟΧΗ: Με το να συμπεριλάβουμε ολόκληρη την έκδοση 1, σημαίνει πως όταν βγεί ή έκδοση 1.5 θα συμπεριληφθεί στην ιστοσελίδα μας αυτόματα. Αυτό συνεπάγεται ότι μπορεί διάφορα scripts που έχουμε να μην λειτουργούν σωστά αφού μπορεί να έχουν γίνει αλλαγές στον κεντρικό κώδικα της jQuery.

Συνήθως στην ιστοσελίδα μας έχουμε κάποιο footer στο οποίο δημοσιεύουμε στοιχεία επικοινωνίας. Πολλοί καταφεύγουν στην λύση του να χρησιμοποιούν εικόνες για παράδειγμα

Με την παραπάνω εικόνα ενημερώνουμε τον χρήστη για την διεύθυνση email μας, και ταυτόχρονα δεν επιτρέπουμε στις μηχανές συλλογής email να την δούν. Παρόλαυτά όμως με αυτόν τον τρόπο πρώτον γεμίζουμε την σελίδα μας με εικόνες κάθε φορά που θέλουμε να εμφανίσουμε το email μας, πράγμα που επιβαρύνει και σε θέματα bandwidth, και δεύτερον είναι αρκετά δύσκολο για τον χρήστη γιατί για να επικοινωνήσει μαζί μας, πρέπει να κοιτάει την εικόνα και να κάνει αντιγραφή την διεύθυνση.

Ο σωστός τρόπος λοιπόν να το κάνουμε αυτό είναι ο εξής:

Ανοίγουμε τον κώδικα της σελίδας μας και βρίσκουμε το <head> μέρος στην κορυφή του HTML κώδικα μας.

Εκεί θα προσθέσουμε τις παρακάτω γραμμές

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" />
<script type="text/javascript">
$(document).ready(function() {
$('a.email').each(function(i) {
var text = $(this).text();
var address = text.replace("*[se]*", "@");
$(this).attr('href', 'mailto:' + address);
$(this).text(address);
});
});
</script>

Το μόνο που έχουμε να κάνουμε τώρα, είναι να γράψουμε το email μας με την μορφή

διεύθυνση*[se]*domain.gr

Ας δούμε ακριβώς τι κάνει ο παραπάνω κώδικας για να καταλάβουμε πως λειτουργεί

Με την γραμμή

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"  />

καλούμε την jQuery στην σελίδα μας

Με την γραμμή

$(document).ready(function() {

βεβαιωνόμαστε ότι η σελίδα έχει φορτώσει πλήρως πρίν τρέξει ο κώδικας που ακολουθεί.

Με την γραμμή

$('a.email').each(function(i) {

επιλέγουμε κάθε <a> tag που έχει class=”email”

Με τις γραμμές

var text = $(this).text();
var address = text.replace("*[se]*", "@");

δημιουργούμε 2 νέες μεταβλητές (text και address) και κάνουμε την μετατροπή των χαρακτήρων *[se]* σε παπάκι (@)

Με τις γραμμές

$(this).attr('href', 'mailto:' + address);
$(this).text(address);

προσθέτουμε τα χαρακτηριστικά href, mailto και την διεύθυνση στο link μας.

Έτσι λοιπόν ο παραπάνω κώδικας, ψάχνει τα <a class=”email”> tags που βρίσκονται στην σελίδα μας, και μετατρέπει τους χαρακτήρες *[se]* σε παπάκι (@).

Με άλλα λόγια, όπου εμείς γράψουμε διεύθυνση*[se]*domain.gr η jQuery θα αναλάβει να το μετατρέψει σε διεύθυνση@domain.gr μόλις φορτώσει η σελίδα

Δοκιμάστε το και εσείς και ίσως ξενοιάσετε από τα ενοχλητικά spam emails.

TIP: Μπορείτε να αλλάξετε το *[se]* σε ότι συνδιασμό χαρακτήρων θέλετε αλλά μετά τα email στον HTML κώδικα σας θα πρέπει να τα μετατρέψετε αναλόγως.

Στο τέλος του οδηγού θα μπορούμε:

• Να κάνουμε χρήση των κλασικών JQuery selectors
• Να κάνουμε χρήση των ιεραρχικών JQuery selectors

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.

Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)

Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

• Τις δύο εκδόσεις της JQuery
• Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

• Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
• Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Τι είναι οι JQuery Selectors;

Αναρωτηθήκατε ποτέ γιατί η JQuery ονομάστηκε έτσι; Πολλοί από εσάς ίσως αναγνωρίζουν το J σαν συντομογραφία της JavaScript αλλά, το Query που κολλάει;

Θα σας βοηθήσω. Η έννοια query είναι γνωστότερη στην περιοχή των βάσεων δεδομένων όπου περιγράφει μία ερώτηση, μία αναζήτηση αν θέλετε, του χρήστη ως προς τη βάση δεδομένων με σκοπό να του επιστραφεί το σύνολο των εγγραφών, των στοιχείων δηλαδή της βάσης δεδομένων, που ικανοποιούν το ερώτημα αυτό. Σε μία βάση δεδομένων με τα δημογραφικά στοιχεία μιας χώρας για παράδειγμα ενδεικτικά queries θα μπορούσαν να είναι: «Αναζητώ όλους τους άνδρες με ηλικία άνω των 50 ετών», ή «Αναζητώ όλους τους κατοίκους της περιοχής Άνω Πόλη» ή «Αναζητώ γυναίκες μεταξύ 25 και 35 ετών που είναι ανύπαντρες» (ΟΚ το τελευταίο ακούγεται κάπως αλλά εν πάση περιπτώσει αντιλαμβάνεστε πως λειτουργεί ένα query).

Στην JQuery ένα query λειτουργεί με παρόμοιο τρόπο. Αναλαμβάνει να συλλέξει ένα σύνολο από τα στοιχεία που βρίσκονται στην υπό ανάπτυξη ιστοσελίδα ώστε να μπορέσει στη συνέχεια, ο προγραμματιστής, να επέμβει σε αυτά (είτε αισθητικά, είτε λειτουργικά). Τον ρόλο των queries στην JQuery βιβλιοθήκη παίζουν δύο ομάδες συναρτήσεων που ονομάζονται Selectors και Filters αντίστοιχα. Σήμερα θα ασχοληθούμε με τους Selectors.

Κάτι μου θυμίζει…

Αν η παραπάνω συζήτηση σας φαίνεται γνώριμη τότε μάλλον έχετε παρακολουθήσει κάποιο από τα άρθρα που συνιστούμε ως προαπαιτούμενα στην αρχή του άρθρου. Σε αυτά τα δύο άρθρα, ο Παναγιώτης Γρηγορόπουλος έχει περιγράψει το μεγαλύτερο μέρος των βασικών σημείων της βιβλιοθήκης της JQuery και, όπως είναι φυσικό, έχει ασχοληθεί και με το θέμα των Selectors. Σε αυτό εδώ το άρθρο, θα δούμε το ζήτημα αυτό αναλυτικότερα και θα παρουσιάσουμε εξειδικευμένα παραδείγματα. Ακόμη και αν έχετε διαβάσει τα παραπάνω άρθρα, μείνετε μαζί μας. Σας υπόσχομαι ότι δεν θα βαρεθείτε J

JQuery selectors. Πλοηγηθείτε στα στοιχεία της ιστοσελίδας σας.

Για την καλύτερη κατανόηση των εννοιών που παρουσιάζουμε σε αυτό το άρθρο έχω ετοιμάσει ένα δείγμα ιστοσελίδας στο οποίο και θα δουλεύουμε για λίγο καιρό. Το αποτέλεσμα, όταν το ανοίξουμε με τον αγαπημένο μας browser μοιάζει κάπως έτσι:

Αντίστοιχα ο κώδικας του αρχείου χωρίς το κομμάτι της JQuery είναι ο ακόλουθος:

<html>
<head>
<title>JQuery Selectors | GreekTuts.net</title>
</head>
<body>
<h1 id="header">Μια επικεφαλίδα</h1>
<p>Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου.</p>
<p id="secondparagraph">Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος.</p>
<table>
<tr>
<td>Δεδομένο 1.1</td>
<td>Δεδομένο 1.2</td>
<td>Δεδομένο 1.3</td>
</tr>
<tr>
<td>Δεδομένο 2.1</td>
<td>Δεδομένο 2.2</td>
<td>Δεδομένο 2.3</td>
</tr>
<tr>
<td>Δεδομένο 3.1</td>
<td>Δεδομένο 3.2</td>
<td class="someclass">Δεδομένο 3.3</td>
</tr>
</table>
<p>3η παράγραφος...</p>
<p>4η <b>παράγραφος...</b> ( μπορεί να γίνεται <b>κουραστικό</b> αλλά είναι για καλό σκοπό   )</p>
</body>
</html>

Ας πάμε να εμπλουτίσουμε τον κώδικά μας με λίγο JQuery και να δούμε πως μπορούμε να επιλέξουμε κάποια από τα στοιχεία στην ιστοσελίδα μας. Υπενθυμίζω ότι ο κώδικας JQuery μπαίνει στο τμήμα <head> … </head> της ιστοσελίδας μας και αρχίζει πάντοτε με την συμπερίληψη της βιβλιοθήκης JQuery.

<script src="jquery-1.4.2.min.js"></script>

Στη συνέχεια πρέπει να δηλώσουμε στον browser ότι θέλουμε ο JQuery κώδικάς μας να εκτελεστεί όταν φορτώνεται η ιστοσελίδα. Για τον λόγο αυτό δηλώνουμε την παρακάτω συνάρτηση μέσα στην οποία θα πειραματιστούμε (τώρα και σε όλα τα υπόλοιπα άρθρα της σειράς)

<script>
$("document").ready(function() {
//κώδικας
});
</script>

Μερικοί απλοί selectors

Πριν ξεκινήσουμε 1 – 2 διευκρινήσεις:

• HTML tag: Ένα html tag είναι μια λέξη κλειδί (εντολή) της html. Π.χ. <body>, <p>, <li>, <b>, κλπ.
• .css(…): Συνάρτηση της JQuery που επεμβαίνει στο CSS του στοιχείου που προηγείται της τελείας και επιδρά με τον τρόπο που περιγράφουν τα ορίσματα της παρένθεσης. Στο σημερινό άρθρο θα συναντήσετε την δήλωση css(“border”, “thin solid red”). Αυτό που πρακτικά κάνει είναι να περικλείει το / τα επιλεγμένο(α) στοιχείο(α) σε ένα κόκκινο πλαίσιο ώστε να μπορείτε να δείτε το αποτέλεσμα του JQuery κώδικα κάθε φορά. Θα σας πρότεινα να αγνοήσετε τον τρόπο που λειτουργεί για την ώρα. Επικεντρωθείτε στους selectors.
• Σχόλια JQuery ( // ): Όπως σε κάθε γλώσσα προγραμματισμού έτσι και στην JQuery υπάρχει η δυνατότητα δήλωσης σχολίων. Αυτή γίνεται με την προσθήκη των χαρακτήρων // μπροστά από τη γραμμή που θέλουμε να προσδιορίσουμε ως σχόλιο. Στο σημερινό παράδειγμά μας (που μπορείτε να κατεβάσετε στο τέλος του άρθρου) θα βρείτε συγκεντρωμένους όλους τους selectors που θα παρουσιάσουμε. Για να μην μπερδευτείτε, τους δίνουμε υπό μορφή σχολίων. Κάθε φορά που θέλετε να δοκιμάσετε κάποιον το μόνο που έχετε να κάνετε είναι να αφαιρέσετε το // μπροστά από τη γραμμή που σας ενδιαφέρει (και φυσικά να προσθέσετε // σε όλες τις υπόλοιπες) ώστε να είναι ενεργοποιημένος μόνον ένας selector κάθε φορά.

Επιλογή όμοιων tags

$("p").css("border", "thin solid red")

Ο παραπάνω selector θα επιλέξει όλα τα στοιχεία <p> που βρίσκονται στην ιστοσελίδα μας. Όπως παρατηρείτε ο selector δεν είναι τίποτε άλλο παρά το σήμα κατατεθέν της JQuery (δηλαδή το $) ακολουθούμενο από τον προσδιοριστή που θέλουμε, στην περίπτωσή μας το p κλεισμένο σε παρενθέσεις και διπλά εισαγωγικά. Παρατηρήστε ότι βάζουμε την περιγραφή του tag μόνο, χωρίς τα < > στα οποία περικλείεται κανονικά.

Επιλογή στοιχείων με ίδια κλάση

$(".someclass").css("border", "thin solid red")

Πολλές φορές ρυθμίζουμε την εμφάνιση συγκεκριμένων στοιχείων κάνοντας χρήση κλάσεων CSS. Με τον selector $(“.myClass”) μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας που ανήκουν σε αυτήν την κλάση.

Επιλογή στοιχείου με βάση το id

$("#header").css("border", "thin solid red")

Ένας άλλος μηχανισμός που προσφέρεται από τα CSS είναι τα ids. Ο selector $(“#id”) μας επιτρέπει να διαχειριστούμε στοιχεία με ids μέσω της JQuery.

Επιλογή στοιχείων με βάση το tag και την κλάση

$("td.someclass").css("border", "thin solid red")

Είναι εφικτό να υπάρξουν συνδυαστικοί selectors. Ο παραπάνω επιλέγει όλα τα tags τύπου td που όμως ανήκουν στην κλάση someclass.

Επιλογή στοιχείων με βάση το tag, το id και την κλάση

$("p#secondparagraph.someclass").css("border", "thin solid red")

Σε αυτόν τον πολύ συγκεκριμένο selector γίνεται χρήση των μηχανισμών του id και της κλάσης. Πιο συγκεκριμένα θα επιλεγεί εκείνο το στοιχείο με id secondparagraph και κλάση someclass.

Selectors ιεραρχίας

Εκτός από τους παραπάνω selectors υπάρχει και μία ομάδα selectors που σχετίζονται  με την ιεραρχία των στοιχείων μέσα με μια ιστοσελίδα. Ας τους δούμε έναν – έναν.

Επιλογή στοιχείων παιδιών

$("tr > td").css("border", "thin solid red")

Ο selector $(“a > b”) επιλέγει όλα τα tags τύπου b που αποτελούν παιδιά του tag a (βρίσκονται δηλαδή ακριβώς ένα επίπεδο κάτω από το b). Στην προκειμένη περίπτωση θα επιλεγούν όλα τα td tags που είναι άμεσα παιδιά ενός tr tag (μην βιαστείτε να σκεφθείτε… «μα ένα td πάντα περιέχεται σε ένα tr» γιατί τα μάτια μου έχουν δει πολλά J ).

Επιλογή απογόνων

$("p b").css("border", "thin solid red")

Λειτουργεί όπως και ο a > b selector με τη διαφορά ότι δεν περιορίζεται σε άμεσα παιδιά. Με τον selector $(“a b”) μας επιστρέφεται μία λίστα με όλα τα tags b που αποτελούν απογόνους του a όσα επίπεδα κάτω και αν βρίσκονται από το a.

Επιλογή επομένου στοιχείου

$("table + p").css("border", "thin solid red")

Ο selector $(“a + b”) επιστρέφει το αμέσως επόμενο tag τύπου b που βρίσκεται μετά το tag a. Στο παράδειγμά μας θα επιστραφεί η αμέσως επόμενη παράγραφος μετά τον πίνακα.

Επιλογή συγγενικού στοιχείου (ή αδερφού κόμβου)

$("table ~ p").css("border", "thin solid red")

Ο selector $(“a ~ b”) επιστρέφει όλους τους αδερφούς κόμβους του a που είναι τύπου b. Στο συγκεκριμένο παράδειγμα θα επιστραφούν όλες οι παράγραφοι που αποτελούν συγγενικούς κόμβους του πίνακα της ιστοσελίδα μας.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε. Ως την επόμενη συνάντησή μας…

Να είστε καλά και να φροντίζεται τον εαυτό σας.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ

Στο τέλος του οδηγού θα μπορούμε:

• Να αναγνωρίζουμε τη διαφορά μεταξύ των δύο εκδόσεων της JQuery και
• να τεκμηριώσουμε, σε πιθανό JQuery debate μεταξύ geek φίλων, τις εκάστοτε επιλογές μας

Προαπαιτούμενα

Εισαγωγή στην JQuery:  Μέρος 1ο, Μέρος  2ο (του Παναγιώτη Γρηγορόπουλου)

Πριν ξεκινήσουμε…

… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.
Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:

Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)
Παράδειγμα κώδικα

Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:

•    Τις δύο εκδόσεις της JQuery
•    Συγκεντρωμένα όλα τα παραδείγματα.

Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…

•    Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
•    Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).

Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…

Επιλέγοντας τη σωστή έκδοση της βιβλιοθήκης JQuery (…και γιατί αυτό δεν είναι βίτσιο)

Όσοι από εσάς είχατε προηγούμενη εμπειρία με την βιβλιοθήκη JQuery, ή απλά διαβάσατε τα άρθρα που αναφέραμε ως «προαπαιτούμενα» νωρίτερα στο παρόν άρθρο, διαπιστώσατε ότι η JQuery έρχεται σε δύο εκδόσεις (production και development).

Από τα ονόματα και μόνο, αντιλαμβάνεται κανείς τον τρόπο χρήσης. Development κατά την διαδικασία ανάπτυξης, Production όταν δημοσιεύσουμε τη δουλειά μας. Στις τάξεις των προγραμματιστών κυκλοφορεί συχνά η θεωρία «Αν δουλεύει, άστο όπως είναι!». Η φιλοσοφία αυτή δουλεύει άψογα όταν αναλαμβάνουμε να τροποποιήσουμε μια εφαρμογή του ελληνικού δημοσίου (!) . Δεν είναι όμως πανάκια.

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

Μα γιατί; Αφού δουλεύει!

Ας δούμε μερικές διαφορές μεταξύ των δύο εκδόσεων…

JQuery – Production

Η επίσημη έκδοση της JQuery για χρήση στον server, δηλαδή αφότου η ιστοσελίδα μας έχει δημοσιευθεί. Όπως πιθανότατα παρατηρήσατε και στην εικόνα που παραθέσαμε νωρίτερα στο άρθρο, το μέγεθός της είναι μόλις 24 kilobytes και αποτελεί μία minified έκδοση. Είναι κατασκευασμένη έτσι ώστε να διευκολύνει την εκτέλεση στο περιβάλλον των διαφόρων servers, ταχύτερα από ότι η development έκδοση. Θα μπορούσαμε να πούμε ότι βελτιστοποιεί την εκτέλεση σε επίπεδο server.

JQuery – Development

Και αυτή επίσημη έκδοση :p της JQuery όμως για τη φάση της ανάπτυξης. Αν και σαν μέγεθος αρχείου δεν μπορεί να θεωρηθεί μεγάλο (155 kilobytes), είναι περίπου 6,5 φορές η production έκδοση. Η ειδοποιός διαφορά με την production έκδοση θα έλεγα ότι έγκειται στον κώδικά τους. Όπως μπορείτε να δείτε στην εικόνα που ακολουθεί, η development έκδοση είναι γραμμένη με τρόπο κατανοητό από κάποιον που γνωρίζει JavaScript σε αντίθεση με την production έκδοση, της οποίας τον κώδικα δεν θα χαρακτηρίζαμε υπερβολικά «αναγνώσιμο».

Ας το πιστέψουμε… Πως χρησιμοποιώ τις διαφορετικές εκδόσεις στην πραγματικότητα;

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

Εάν κατεβάσετε αυτή τη στιγμή το .rar αρχείο που βρίσκεται στο τέλος του σημερινού μας άρθρου, και αφού το αποσυμπιέσετε, θα δείτε ότι περιλαμβάνει έναν φάκελο jquery_tuts_versions. Μέσα του μπορείτε να βρείτε τις τελευταίες εκδόσεις της JQuery:

•    jquery-1.4.2.js για την development
•    jquery-1.4.2.min.js για την προduction (το min από το minified)

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

Όσον αφορά τον κώδικα της ιστοσελίδας σας τώρα. Σε περίπτωση που βρίσκεστε σε φάση ανάπτυξης (επομένως έχετε κρατήσει το jquery-1.4.2.js στον κατάλογό σας) ο κώδικας μιας hello world ιστοσελίδας που κάνει χρήση του JQuery θα μοιάζει με τον παρακάτω:

<html>
<head>
<title>Development phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα βρίσκεται σε φάση ανάπτυξης");
});
</script>
</head>
<body>
…
</body>
</html>

Σε περίπτωση που η ιστοσελίδα σας είναι έτοιμη να δημοσιευθεί θα χρησιμοποιήσετε το αρχείο jquery-1.4.2.min.js και ο κώδικάς σας, σε σχέση με τον προηγούμενο θα είναι αλλαγμένος κατά μία γραμμή:

<html>
<head>
<title>Production phase example</title>
<!-- εδώ υποδεικνύουμε την έκδοση της JQuery που θα χρησιμοποιήσουμε -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!-- λίγη JQuery... -->
<script type="text/javascript">
$("document").ready(function() {
alert("Η ιστοσελίδα έχει δημοσιευθεί");
});
</script>
</head>
<body>
</body>
</html>

Σε αυτό το άρθρο αντιμετωπίσαμε το φιλοσοφικό ερώτημα, ελαφρώς ευκολότερο από το αίνιγμα της Σφίγγας, ποια έκδοση της JQuery μας ταιριάζει. Αν και τεχνικά, το δίλλημα αυτό δε λέει πολλά, ωστόσο, έχω την άποψη πως ότι μαθαίνουμε ένα προγραμματιστικό εργαλείο, οι λεπτομέρειες μπορεί να είναι σημαντικές. Σε περιπτώσεις όπως η JQuery, η χρήση της οποίας είναι συνυφασμένη με ανάπτυξη ιστοσελίδων για το διαδίκτυο, η τεκμηρίωση της παραπάνω θέσης είναι περιττή.

Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε ως την επόμενη συνάντησή μας…

Μην ξεχνάτε,

να είστε καλά και να φροντίζεται τον εαυτό σας.

Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ