Σε μια προσπάθεια να κάνουμε πιο κατανοητά και διακριτά τα βήματα που χρειάζεται να ακολουθηθούν, αλλά και τις γνώσεις που χρειάζονται, για την δημιουργία μιας ιστοσελίδας, από την σκέψη μέχρι την υλοποίηση και την συντήρηση, προσφέρουμε σε όλους τους επισκέπτες μας μια σειρά από προσωπικούς 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]

Υπάρχουν πολλές φορές που θέλουμε να κάνουμε κάποιο εφέ ή να προσθέσουμε κάποια λειτουργικότητα στην σελίδα μας, αλλά δεν μπορούμε να βρούμε το κατάλληλο 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 που του δηλώνουμε, και τα ανακατατάσει σην αναμενόμενη δομή

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

Συνήθως στην ιστοσελίδα μας έχουμε κάποιο 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 κώδικα σας θα πρέπει να τα μετατρέψετε αναλόγως.

Σχετικά

To Cufón είναι κάτι αντίστοιχο του sIFR, αλλά σίγουρα πιό εύκολο στην χρήση και γρήγορο στην ενσωμάτωση. Κάποια βασικά στοιχεία :

1. Δεν χρειάζονται plug-ins
2. Συμβατότητα – λειτουργεί με όλους τους γνωστούς browsers
3. Εύκολο στην χρήση
4. Γρήγορο ακόμα και για μεγάλο αριθμό κειμένου

Πώς Λειτουργέι

Το Cufón χωρίζεται σε δύο μέρη. Τον font generator, που μετατρέπει τα fonts σε κατάλληλη μορφή, και την βιβλιοθήκη μετατροπής που είναι γραμμένη σε JavaScript.

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

Βημα 1

Πρώτα από όλα πρέπει να κατεβάσουμε την βιβλιοθήκη μετατροπής. Αυτό το κάνουμε αν επισκεφτούμε το http://cufon.shoqolate.com/js/cufon-yui.js και κάνουμε File>Save As. Έχουμε λοιπόν πλέον το αρχείο cufon-yui.js στον υπολογιστή μας.

Μετά ακολουθώντας τον σύνδεσμο http://cufon.shoqolate.com/generate/ βρισκόμαστε στον font generator όπου επιλέγουμε το font που θέλουμε να μας αντικαταστήσει το κείμενο της ιστοσελίδας μας. Μην τρομάξετε από τις πολλές επιλογές.

Εδώ, επιλέγουμε το font που θέλουμε, κάνοντας browse από τον υπολογιστή μας. Έχουμε την δυνατότητα να επιλέξουμε γραμματοσειρές σε Normal, Bold, Italic, Bold Italic. Επιλέγουμε επίσης το “The EULAs of these fonts allow Web Embedding”. Από τα glyphs επιλέγουμε All και απο το Performance & Filesize επιλέγουμε “No thanks, use the font’s own value”. Αποδεχόμαστε την άδεια χρήσης και πατάμε το “Let’s Do This”

Κατεβάζουμε το αρχείο μας και το αποθηκεύουμε. Έχουμε πλέον και το αρχείο του font μας.

Βημα 2

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

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Calibri_700.font.js" type="text/javascript"></script>

Στο συγκεκριμένο βοήθημα χρησιμοποιήσαμε το font Calibri. Έτσι το αρχείο μας ονομάζεται Calibri_700.font.js.

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

<script type="text/javascript">
Cufon.replace('h1');
</script>

Έτσι πλέον όλα τα H1 tags στην ιστοσελίδα μας θα αντικατασταθούν από τα SVG(Scalable Vector Graphics) Fonts που επιλέξαμε. Μπορούμε να παρατηρήσουμε ότι αν γράψουμε Cufon.replace(‘p’); αντί για Cufon.replace(‘h1′); όλες οι παράγραφοι στην σελίδα μας θα αντικατασταθούν. Μπορούμε επίσης να συμπεριλάβουμε και πολλά στοιχεία μαζί γράφοντας για παράδειγμα

<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h3');
Cufon.replace('p');
</script>

Τελικό Αποτέλεσμα

Πριν την αντικατάσταση

Μετά την αντικατάσταση

Hint/Tip

Για να μπορέσετε να επιλέξετε τα fonts που θέλετε στον generator, θα πρέπει να κάνετε copy τα fonts απο τον φάκελο Fonts που βρίσκεται στο C:\Windows\Fonts κάπου εκτός από αυτόν τον φάκελο, γιατί λόγο ασφάλειας, δεν επιτρέπεται η επιλογή fonts κατευθείαν από τον φάκελο Fonts.

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

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

applet – Μια εφαρμογή (πρόγραμμα) γραμμένη στη γλώσσα προγραμματισμού Java, που είναι συνήθως μικρή σε μέγεθος και προορίζεται για να ενσωματωθεί σε μια ιστοσελίδα με τη χρήση των tags <applet> και </applet>. Ο αρχικός κώδικας είναι γραμμένος σ’ ένα αρχείο με επέκταση .java, γίνεται μεταγλώττιση (compilation) και προκύπτει ένα αρχείο με το ίδιο όνομα με το αρχικό αλλά με επέκταση .class, το οποίο χρησιμοποιούμε στα tags <applet>. Ο χρήστης δεν είναι σε θέση να δει τον πρωτογενή κώδικα ενός applet, αλλά μόνο να το εκτελέσει. Ένα applet μπορεί να δεχθεί και ορισμένες παραμέτρους, όπως τον κώδικα (.class) που θα πρέπει να εκτελέσει (code), το πλάτος (width) και το ύψος (height) του παραθύρου που θα δημιουργηθεί μέσα στην ιστοσελίδα για την εκτέλεση του applet κ.ά. Ακολουθούν 2 παραδείγματα.

<body>
<applet code=clicker.class width=600 height=400>
</applet>
</body>

<body>
<applet code="fprotate.class" codebase="_fpclass/" width="282" height="200">
<param name="rotatoreffect" value="dissolve">
<param name="time" value="3">
<param name="url" value valuetype="ref">
<param name="image1" value="small-florina1.jpg" valuetype="ref">
<param name="image2" value="small-florina2.jpg" valuetype="ref">
<param name="image3" value="small-florina3.jpg" valuetype="ref">
</applet>
</body>

Argument -  Αποδίδεται στα ελληνικά ως όρισμα ή παράμετρος και είναι μια τιμή που μεταβιβάζεται (στέλνεται) σε μια συνάρτηση (function) όταν την καλούμε. Τα ορίσματα γράφονται μέσα σε παρενθέσεις, δίπλα στο όνομα της συνάρτησης, και θεωρούνται τοπικές μεταβλητές της συνάρτησης.

Array – Αποδίδεται στα ελληνικά με τον όρο πίνακας και είναι ένα σύνολο (διάταξη) από μεταβλητές, που είναι του ιδίου τύπου δεδομένων και στις οποίες μπορούμε να αναφερόμαστε με το ίδιο όνομα (όνομα του πίνακα) και μ’ έναν αριθμό, ο οποίος αποκαλείται δείκτης (index) του πίνακα και στους πίνακες της JavaScript ξεκινάει από την αρχική τιμή 0.

Boolean – Λογικός τύπος δεδομένων που μπορεί να πάρει μόνο μία από δύο δυνατές τιμές : true (αληθές) και false (ψευδές).

Concatenate – Αποδίδεται στα ελληνικά ως συνένωση και είναι η ενέργεια της ένωσης πολλών συμβολοσειρών μαζί σε μία μόνο συμβολοσειρά (string) με χρήση του τελεστή +, όπως για παράδειγμα : document.write(“Γράψατε : <p><h3> ” + sText + “</h3></p>”).

Conditional - Μια εντολή της JavaScript που εκτελεί μια ενέργεια ή ένα σύνολο άλλων εντολών μόνο αν είναι αληθής (true) μια συνθήκη. Τέτοιες εντολές είναι η if, η switch, η while και η do … while.

Debugging – Αποδίδεται στα ελληνικά με τον όρο εκσφαλμάτωση και είναι η ενέργεια της αναζήτησης των λαθών σ’ ένα πρόγραμμα (script) και της διόρθωσής τους.

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

DOM (Document Object Model) – Αποδίδεται στα ελληνικά με τον όρο Μοντέλο Αντικειμένου Εγγράφου και είναι το σύνολο των αντικειμένων που μπορούμε να χρησιμοποιήσουμε στην JavaScript για να μπορούμε να αναφερόμαστε στο παράθυρο του φυλλομετρητή (window) και στα τμήματα μιας ιστοσελίδας ή HTML εγγράφου, όπως document, parent, self, top, body, h1, p κ.ά. Το W3C DOM αποτελεί ήδη ένα πρότυπο (standard) και υποστηρίζεται απ’ όλους τους σύγχρονους φυλλομετρητές. Για παράδειγμα, αν θέλουμε να αναφερθούμε στην τιμή (value) ενός πλαισίου κειμένου text1 μιας φόρμας form1 που βρίσκεται σ’ ένα άλλο πλαίσιο με όνομα frame1, μπορούμε να γράψουμε τα εξής : parent.frame1.document.form1.text1.value = “Φλώρινα”.

Element – Αποδίδεται στα ελληνικά με τον όρο στοιχείο και αναφέρεται είτε σ’ ένα επί μέρους στοιχείο ή καταχώριση ενός πίνακα (array) είτε στα στοιχεία μιας φόρμας (form) μιας ιστοσελίδας, τα οποία στοιχεία καταχωρούνται αυτόματα σ’ έναν πίνακα elements[], με αρίθμηση από το 0. Για παράδειγμα, για να αναφερθούμε στο τέταρτο στοιχείο της δεύτερης φόρμας μιας ιστοσελίδας και να πάρουμε την τιμή του, μπορούμε να δώσουμε την εξής εντολή :

document.forms[1].elements[3].value.

Event - Αποδίδεται στα ελληνικά ως συμβάν και είναι η κατάσταση που προκύπτει από την ενέργεια ενός χρήστη, όπως είναι το κλικ με το ποντίκι σ’ ένα αντικείμενο, και η οποία ενέργεια μπορεί να ανιχνευθεί από ένα script και να εκτελεστούν έτσι κάποιες εντολές της JavaScript. Για παράδειγμα, στον παρακάτω κώδικα HTML ανιχνεύεται το συμβάν onMouseOver, το οποίο λαμβάνει χώρα μόλις μετακινήσουμε το ποντίκι πάνω από έναν σύνδεσμο (link) και τότε γίνεται κόκκινο το χρώμα φόντου της τρέχουσας ιστοσελίδας : <p><a href=”plinet.html” onMouseOver=”document.bgColor=’red’”>Κόκκινο Χρώμα Φόντου</a></p>.

Expression – Αποδίδεται στα ελληνικά με τον όρο έκφραση και είναι ένας συνδυασμός από μεταβλητές, σταθερές και τελεστές για τον υπολογισμό και την καταχώριση μιας τιμής, όπως για παράδειγμα : var sText = (nSeconds > 30) ? “ΠΕΡΙΣΣΟΤΕΡΟ” : “ΛΙΓΟΤΕΡΟ”.

Function - Αποδίδεται στα ελληνικά με τον όρο συνάρτηση και είναι μια ομάδα εντολών που τις γράφουμε στο τμήμα head μιας ιστοσελίδας και μπορούμε να αναφερόμαστε σ’ αυτές με το όνομα της συνάρτησης και τις παραμέτρους της (αν υπάρχουν). Οι συναρτήσεις είναι πολύ χρήσιμες είτε όταν έχουμε κομμάτια κώδικα που πρέπει να τα επαναλάβουμε πολλές φορές μέσα στον ίδιο κώδικα προγράμματος είτε όταν θέλουμε να απομονώσουμε μια ομάδα εντολών που εκτελεί μια συγκεκριμένη εργασία. Μια συνάρτηση μπορεί να κάνει κάποιους υπολογισμούς και να επιστρέφει μια τιμή με την εντολή return ή μπορεί απλά να εκτελεί κάποιες ενέργειες, όπως εμφάνιση αποτελεσμάτων κ.ά.

HTML (HyperText Markup Language) – Αποδίδεται στα ελληνικά με τον όρο Γλώσσα Σήμανσης Υπερκειμένου και είναι ένα σύνολο από ειδική κωδικοποίηση που χρησιμοποιεί ειδικά tags (ετικέτες) για να επισημάνει τη μορφοποίηση ενός εγγράφου και τη δημιουργία έτσι μιας ιστοσελίδας, που είναι ένα αρχείο με επέκταση (extension) .htm ή .html. Η HTML γλώσσα διαβάζεται από ειδικά προγράμματα που αποκαλούνται φυλλομετρητές (browsers) για να μπορεί να δει ο τελικός χρήστης μια ιστοσελίδα κανονικά μορφοποιημένη.

Increment - Είναι η αύξηση της τιμής μιας μεταβλητής κατά μία μονάδα που γίνεται με τον τελεστή αύξησης ++-, όπως για παράδειγμα ++-a και a++, όπου στην πρώτη περίπτωση πρώτα αυξάνεται η τιμή της μεταβλητής a κατά ένα και μετά χρησιμοποιείται η μεταβλητή αυτή, ενώ στη δεύτερη περίπτωση πρώτα χρησιμοποιείται η μεταβλητή αυτή και μετά αυξάνεται η τιμή της κατά ένα.

Interpreter – Αποδίδεται στα ελληνικά με τον όρο διερμηνευτής και είναι η διαδικασία της διερμήνευσης (μετάφρασης) των εντολών της JavaScript μία-μία καθώς αυτές φορτώνονται και εκτελούνται στον φυλλομετρητή. Η Java χρησιμοποιεί μεταγλωττιστή (compiler), που σημαίνει ότι πρώτα μεταφράζεται ολόκληρος ο κώδικας ενός προγράμματος σε γλώσσα μηχανής και μετά φορτώνεται και εκτελείται μέσα στην ιστοσελίδα το παραγόμενο αρχείο γλώσσας μηχανής.

Java - Είναι μια πλήρως αντικειμενοστραφής γλώσσα προγραμματισμού (object-oriented programming language) που δημιουργήθηκε από την εταιρεία Sun Microsystems και είναι πολύ δημοφιλής στο Διαδίκτυο για τη δημιουργία εντυπωσιακών εφέ. Με την Java μπορούμε να δημιουργήσουμε αυτόνομες εφαρμογές ή και μικροεφαρμογές (applets), οι οποίες ενσωματώνονται σε μια ιστοσελίδα με τα tags <applet> και </applet>. Τα προγράμματα της Java μοιάζουν πολύ στη σύνταξη με τις γνωστές γλώσσες προγραμματισμού C και C++, αποθηκεύονται με επέκταση .java, μετά μεταγλωττίζονται (compiled) για να παραχθεί κώδικας σε γλώσσα μηχανής (bytecode) με επέκταση .class, ο οποίος είναι και ο εκτελέσιμος. Αν και δεν μπορούμε να δούμε τον πρωτογενή κώδικα ενός προγράμματος σε Java, υπάρχουν πάρα πολλές έτοιμες εφαρμογές που μπορούμε να κατεβάσουμε από το Διαδίκτυο και να εκτελέσουμε ή να ενσωματώσουμε σε ιστοσελίδες.

JavaScript – Είναι μια γλώσσα συγγραφής σεναρίων (scripting language) για την προσθήκη διαδραστικότητας (interactivity) σε ιστοσελίδες. Δημιουργήθηκε από την εταιρεία Netscape με αρχικό όνομα LiveScript και είναι πολύ δημοφιλής στους δημιουργούς ιστοσελίδων καθώς είναι απλή στη σύνταξή της και υποστηρίζεται απ’ όλους τους δημοφιλείς φυλλομετρητές. Ανταγωνιστής της είναι η γλώσσα συγγραφής σεναρίων VBScript της εταιρείας Microsoft.

Loop – Αποδίδεται στα ελληνικά με τον όρο βρόχος και είναι ένα σύνολο από εντολές που εκτελούνται είτε συνεχώς μέχρι να πάψει να ισχύει κάποια συνθήκη είτε για έναν καθορισμένο αριθμό επαναλήψεων. Οι εντολές για τη δημιουργία βρόχων είναι οι while, do … while, for και for … in.

Method – Αποδίδεται στα ελληνικά με τον όρο μέθοδος και είναι ένα συγκεκριμένο είδος συνάρτησης που συσχετίζεται μ’ ένα αντικείμενο και επενεργεί πάνω στις ιδιότητες του αντικειμένου. Για παράδειγμα, με τη μέθοδο open() του αντικειμένου window μπορούμε να ανοίξουμε (εμφανίσουμε) ένα καινούργιο παράθυρο φυλλομετρητή και με τη μέθοδο close() του ιδίου αντικειμένου μπορούμε να κλείσουμε ένα ήδη ανοικτό παράθυρο φυλλομετρητή.

Navigator – Είναι ένα από τα πολλά αντικείμενα (objects) που διαθέτει (υποστηρίζει) η JavaScript και περιέχει χρήσιμες ιδιότητες σχετικά με τον φυλλομετρητή που χρησιμοποιεί ο χρήστης.

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

Operator - Αποδίδεται στα ελληνικά με τον όρο τελεστής και είναι ένας ειδικός χαρακτήρας, όπως +, -, *, /, %, +=, &&, || κλπ, που χρησιμοποιούμε για να μπορέσουμε να ξεχωρίσουμε τις μεταβλητές και τις σταθερές σε μια έκφραση (expression).

Parameter – Αποδίδεται στα ελληνικά με τον όρο παράμετρος ή και όρισμα (argument) και είναι μια τιμή που μεταβιβάζεται (στέλνεται) σε μια συνάρτηση (function) όταν την καλούμε. Οι παράμετροι γράφονται μέσα σε παρενθέσεις, δίπλα στο όνομα της συνάρτησης, και θεωρούνται τοπικές μεταβλητές της συνάρτησης.

Property – Αποδίδεται στα ελληνικά με τον όρο ιδιότητα και είναι μια μεταβλητή που συσχετίζεται (αποθηκεύεται) σαν μέρος ενός αντικειμένου. Για παράδειγμα, η ιδιότητα referrer του αντικειμένου document περιέχει το URL της ιστοσελίδας από την οποία βρεθήκαμε στην τρέχουσα ιστοσελίδα.

Scope - Αποδίδεται στα ελληνικά με τον όρο εμβέλεια και είναι το μέρος (κομμάτι) ενός προγράμματος (script) ή μιας συνάρτησης της JavaScript όπου έχει δηλωθεί και είναι διαθέσιμη (πρσβάσιμη) μια μεταβλητή.

Script – Αποδίδεται στα ελληνικά με τον όρο σενάριο ή δέσμη ενεργειών και είναι κώδικας σε γλώσσα JavaScript ή VBScript, συνήθως μικρής έκτασης, που ενσωματώνεται μέσα στον HTML κώδικα μιας ιστοσελίδας, είτε στο τμήμα head, οπότε θα πρέπει να περιέχεται σε μια συνάρτηση που θα κληθεί μέσα από το κυρίως σώμα της ιστοσελίδας, είτε στο τμήμα body, οπότε και εκτελείται απευθείας.

Scripting Language – Αποδίδεται στα ελληνικά με τον όρο γλώσσα συγγραφής σεναρίων και είναι ειδική γλώσσα προγραμματισμού, όπως είναι η JavaScript και η VBScript, που ο κώδικάς της ενσωματώνεται μέσα στον HTML κώδικα μιας ιστοσελίδας, με απώτερο σκοπό να υπάρχει αλληλεπίδραση (interaction) με τον χρήστη (επισκέπτη) της ιστοσελίδας.

Statement - Αποδίδεται στα ελληνικά με τον όρο εντολή ή πρόταση και είναι μια γραμμή ενός script που επενεργεί σε μεταβλητές ή αντικείμενα.

String – Αποδίδεται στα ελληνικά με τον όρο συμβολοσειρά και είναι μια ομάδα (σύνολο) από χαρακτήρες, δηλ. γράμματα, ψηφία ή και ειδικά σύμβολα, που αποθηκεύονται ενιαία σε μια μεταβλητή. Η JavaScript αντιμετωπίζει τα strings ως πίνακες.

Variable – Αποδίδεται στα ελληνικά με τον όρο μεταβλητή και είναι μια θέση μνήμης (container), στην οποία μπορούμε να ανεφερόμαστε μ’ ένα μοναδικό όνομα και στην οποία μπορούμε να αποθηκεύσουμε έναν αριθμό, ένα string (συμβολοσειρά) ή και ένα αντικείμενο. Οι μεταβλητές χάνονται μόλις βγούμε από το πρόγραμμα που τις περιέχει.

VBScript - Είναι γλώσσα συγγραφής σεναρίων (scripting language), λιγότερο δημοφιλής από την ανταγωνίστριά της JavaScript, που έχει παρόμοια σύνταξη με τη δημοφιλή γλώσσα αντικειμενοστραφούς προγραμματισμού Visual Basic και έχει δημιουργηθεί από την εταιρεία Microsoft. Το μεγαλύτερο μειονέκτημά της είναι ότι υποστηρίζεται μόνο από τον φυλλομετρητή Internet Explorer.

XML (Extensible Markup Language) – Είναι μια γλώσσα για γενική χρήση που έχει πολύ αυστηρούς κανόνες σύνταξης, καθώς έχει αναπτυχθεί από το W3C (World Wide Web Consortium), και στην οποία μπορούμε να ορίσουμε δικές μας ετικέτες (tags) και χαρακτηριστικά (attributes). Τα αρχεία της XML έχουν επέκταση .xml και μπορούμε να δούμε τα δεδομένα τους μέσα από διάφορες προδιαγραφές ώστε να παραστήσουμε κάτι. Για παράδειγμα, μπορούμε να αποθηκεύσουμε σ’ ένα XML έγγραφο τις συντεταγμένες όλων των νομών της Ελλάδας και είτε να τις δούμε μέσα από ένα HTML έγγραφο σαν απλούς αριθμούς είτε να τις δούμε μέσα από μια  εφαρμογή SVG και να δημιουργηθεί έτσι ένας ψηφιακός χάρτης με τους νομούς της χώρας.