Η ετικέτα <script>
Στη γλώσσα HTML, ο κώδικας της JavaScript μπορεί να τοποθετηθεί ανάμεσα στις ετικέτες <script> και </script>.
Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
——————————-
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript in Body</h1>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “My First JavaScript”;
</script>
</body>
</html>
——————————-
Εδώ βλέπουμε το αποτέλεσμα που θα παρουσιαστεί στο φυλομετρητή:
Τα παλιά παραδείγματα της JavaScript ενδέχεται να χρησιμοποιούν το html χαρακτηριστικό: <script type=”text/javascript”>.
Το χαρακτηριστικό δεν είναι απαραίτητο. Η JavaScript είναι η προεπιλεγμένη scripting γλώσσα για την HTML.
Συναρτήσεις και γεγονότα της JavaScript
Μια συνάρτηση της JavaScript είναι ένα μπλοκ κώδικα της JavaScript το οποίο μπορεί να εκτελεστεί όταν κληθεί.
Για παράδειγμα, μια συνάρτηση μπορεί να κληθεί όταν συμβεί ένα γεγονός, όπως για παράδειγμα το πάτημα ενός κουμπιού.
Η καλή χρήση των συναρτήσεων είναι πολύ σημαντική για τον προγραμματιστή που θέλει να χρησιμοποιήσει επαγγελματικά τη javascript.
Χρήση της JavaScript στο <head> ή στο <body>
Μπορούμε να χρησιμοποιήσουμε όσα σενάρια (scripts) θέλουμε μέσα σε ένα έγγραφο HTML document.
Τα scripts μπορούν να τοποθετηθούν στην ενότητα <body> της HTML σελίδας, μπορούν να τοποθετηθούν στην ενότητα <head> της HTML σελίδας ή μπορούν να τοποθετηθούν και στα δυο.
Χρήση της JavaScript στο <head>
Στο παράδειγμα που ακολουθεί, μια συνάρτηση της JavaScript τοποθετείται στην ενότητα <head> της HTML σελίδας.
Η κλήση της συνάρτησης γίνεται όταν πατηθεί ένα κουμπί:
——————————-
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>
<body>
<h1>JavaScript in Head</h1>
<p id=”demo”>A Paragraph.</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
</body>
</html>
——————————-
Χρήση της JavaScript στο <body>
Στο παράδειγμα που ακολουθεί, μια συνάρτηση της JavaScript τοποθετείται στην ενότητα <body> της HTML σελίδας.
Η κλήση της συνάρτησης γίνεται όταν πατηθεί ένα κουμπί:
——————————-
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript in Body</h1>
<p id=”demo”>A Paragraph.</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</body>
</html>
——————————-
Συμβουλή:
Η τοποθέτηση σεναρίων στο κάτω μέρος του <body> βελτιώνει την ταχύτητα προβολής της σελίδας html. Αυτό συμβαίνει διότι η μεταγλώττιση του σεναρίου καθυστερεί την παρουσίαση περιεχομένου.
Εξωτερικό αρχείο JavaScript
External JavaScript
Τα σενάρια επίσης μπορούν να τοποθετηθούν σε εξωτερικά αρχεία JavaScript (External JavaScript Files):
Εξωτερικό αρχείο: myScript.js
——————————-
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
——————————-
Τα εξωτερικά αρχεία JavaScript αποτελούν ενδεδειγμένη επιλογή όταν ο ίδιος κώδικας χρησιμοποιείται σε πολλές διαφορετικές σελίδες html.
Τα εξωτερικά αρχεία JavaScript πρέπει να έχουν την κατάληξη .js.
Όταν θέλουμε να χρησιμοποιήσουμε ένα εξωτερικό αρχείο JavaScript , τότε πρέπει να βάλουμε το όνομα του αρχείου στο χαρακτηριστικό src (source) της ετικέτας <script>.
Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
——————————-
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id=”demo”>A Paragraph.</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
<p>(myFunction is stored in an external file called “myScript.js”)</p>
<script src=”myScript.js”></script>
</body>
</html>
——————————-
Μπορούμε να τοποθετήσουμε την αναφορά σε εξωτερικά αρχεία JavaScript είτε στο <head> είτε στο <body> ενός εγγράφου html.
Το σενάριο θα εκτελεστεί σαν να βρισκόταν στο ίδιο έγγραφο.
Τα εξωτερικά αρχεία JavaScript δεν μπορούν να περιέχουν την ετικέτα <script>.
Πλεονεκτήματα των εξωτερικών αρχείων JavaScript
Η τοποθέτηση των σεναρίων σε εξωτερικά αρχεία JavaScript έχει κάποια πλεονεκτήματα:
- Διαχωρίζει το HTML από τον κώδικα JavaScript
- Συντελεί ώστε να είναι πιο εύκολη η ανάγνωση και η συντήρηση του κώδικα HTML και του κώδικα JavaScript
- Τα αποθηκευμένα (cached) αρχεία JavaScript μπορεί να επιταχύνουν την παρουσίαση της σελίδας
Εάν θέλουμε να προσθέσουμε πολλά αρχεία JavaScript σε μια σελίδα html τότε πολύ απλά πρέπει να χρησιμοποιήσουμε πολλές ετικέτες script.
Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
——————————-
<script src=”myScript1.js”></script>
<script src=”myScript2.js”></script>
——————————-
Εξωτερικές αναφορές
Τα εξωτερικά αρχεία JavaScript μπορούμε να τα χρησιμοποιήσουμε είτε με πλήρες URL είτε με URL σχετικό ως προς την τρέχουσα σελίδα.
Στο παρακάτω παράδειγμα χρησιμοποιούμε πλήρες URL για να συνδεθούμε με ένα εξωτερικό αρχείο JavaScript:
——————————-
<!DOCTYPE html>
<html>
<body>
<h1>External JavaScript</h1>
<p id=”demo”>A Paragraph.</p>
<button type=”button” onclick=”myFunction()”>Try it</button>
<p>(myFunction is stored in an external file called “myScript.js”)</p>
<script src=”http://www.w3schools.com/js/myScript.js”></script>
</body>
</html>
——————————-
Ακολουθεί παράδειγμα που δείχνει τη χρήση αρχείου που βρίσκεται σε συγκεκριμένο φάκελο χρησιμοποιώντας σχετική αναφορά:
——————————-
<script src=”/js/myScript1.js”></script>
——————————-
Κλείνουμε δείχνοντας πως καλούμε ένα αρχείο που βρίσκεται στον ίδιο φάκελο με τη σελίδα html:
——————————-
<script src=”myScript1.js”></script>
——————————-
Javascript στην προώθηση ιστοσελίδων
Η χρήση της Javascript στην προώθηση ιστοσελίδων πρέπει να γίνεται με τρόπο που να μην αντιβαίνει στους κανόνες της google. Πολλοί ενδεχομένως να μπουν στον πειρασμό να χρησιμοποιήσουν τη javascript για να τοποθετήσουν στην ιστοσελίδα τους κρυφό περιεχόμενο. Δηλαδή να ξεγελάσουν τη μηχανή αναζήτησης προς όφελος της προώθησης της ιστοσελίδας τους. Όμως θα έχουν το αντίθετο αποτέλεσμα. όχι μόνο δεν θα βοηθήσει την προώθηση της ιστοσελίδας τους, αλλά αντίθετα είναι πολύ πιθανό να τιμωρηθούν από τη google χάνοντας πολλές θέσεις στην κατάταξη των αποτελεσμάτων.
Javascript στην κατασκευή ιστοσελίδων
Η javascript χρησιμοποιείται στην κατασκευή ιστοσελίδων για να βελτιώσει την αλληλεπίδραση του χρήστη με το περιεχόμενο. Η javascript δίνει ζωή στην ιστοσελίδα που κατασκευάζουμε μέσω του κώδικα που αντιστοιχίζουμε στα διάφορα γεγονότα (events). Η καλή γνώση της javascript αποτελεί πολύ δυνατό εργαλείο για την ποιοτική και επιτυχημένη κατασκευή μιας ιστοσελίδας.
