Η γλώσσα Javascript μας επιτρέπει να κάνουμε τις σελίδες της html να είναι πιο διαδραστικές και πιο δυναμικές. Η γλώσσα Javascript χρησιμοποιείται για να δημιουργούμε προγράμματα που εκτελούνται στο φυλλομετρητή, δηλαδή στον υπολογιστή του πελάτη (client-side). Εάν θέλετε να ενημερωθείτε για τις δυνατότητες της γλώσσας javascript, τότε δεν έχετε παρά να διαβάσετε τα άρθρα μας στην ενότητα εισαγωγής στη γλώσσα javascript.
Η γλώσσα javascript
Η εισαγωγή της γλώσσας javascript στην HTML γίνεται μέσω της ετικέτας <script>. Μέσω αυτής της ετικέτας έχουμε δυο επιλογές. Η πρώτη επιλογή είναι να γράψουμε τι εντολές της γλώσσας προγραμματισμού αμέσως μετά το άνοιγμα της ετικέτας <script>. Η δεύτερη επιλογή είναι να καλέσουμε εξωτερικό αρχείο javascript. Το αρχείο αυτό πρέπει να έχει κατάληξη .js και δηλώνεται μέσω του χαρακτηριστικού src.
Ο χειρισμός εικόνων, η επικύρωση φορμών και η δυναμική αλλαγή του περιεχομένου αποτελούν τις συνηθέστερες χρήσεις της γλώσσας javascript.
Επιλογή στοιχείου html από τη javascript
Όταν θέλουμε να επιλέξουμε ένα στοιχείο της html για να το χρησιμοποιήσουμε σε πρόγραμμα της javascript τότε χρησιμοποιούμε τη συνάρτηση document.getElementById(id) της javascript. Ακολουθεί παράδειγμα στο οποίο γράφουμε τη φράση “Hello JavaScript!” στο στοιχείο της html με id=”demo”:
——————————
<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
</script>
</body>
</html>
——————————
Εδώ βλέπουμε το αποτέλεσμα του παραπάνω προγράμματος στο φυλλομετρητή:
Παράδειγμα χρήσης της javascript στην html
Στη συνέχεια παρουσιάζουμε κάποια παραδείγματα χρήσης της γλώσσας javascript για το χειρισμό στοιχείων της γλώσσας html.
Η επόμενη εντολή αλλάζει το περιεχόμενο ενός στοιχείου της html:
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
Οι επόμενες τρεις εντολές αλλάζουν τη μορφοποίηση των στοιχείων της html:
document.getElementById(“demo”).style.fontSize = “25px”;
document.getElementById(“demo”).style.color = “red”;
document.getElementById(“demo”).style.backgroundColor = “yellow”;
Η επόμενη εντολή αλλάζει τα χαρακτηριστικά ενός στοιχείου της html, για παράδειγμα το scr της εικόνας:
document.getElementById(“image”).src = “picture.gif”;
Βλέπουμε εδώ ολόκληρο τον κώδικα της html που χρησιμοποιεί τη javascript για την αλλαγή της μορφοποίησης:
——————————
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id=”demo”>JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById(“demo”).style.fontSize = “25px”;
document.getElementById(“demo”).style.color = “red”;
document.getElementById(“demo”).style.backgroundColor = “yellow”;
}
</script>
<button type=”button” onclick=”myFunction()”>Click Me!</button>
</body>
</html>
——————————
Εδώ είναι το αποτέλεσμα πριν από την εκτέλεση της javascript:
Εδώ είναι το αποτέλεσμα μετά από την εκτέλεση της javascript:
Η ετικέτα noscript
Η ετικέτα <noscript> χρησιμοποιείται για να παρέχει ένα εναλλακτικό πειεχόμενο προς τους επισκέπτες της ιστοσελίδας των οποίων ο φυλλομετρητής δεν υποστηρίζει τη javascript. Επίσης η ετικέτα <noscript> είναι χρήσιμη διότι ενδέχεται κάποιοι επισκέπτες να έχουν απενεργοποιήσει τη javascript από το φυλλομετρητή τους. Ακολουθεί παράδειγμα χρήσης της ετικέτας noscript:
——————————
<!DOCTYPE html>
<html>
<body>
<p id=”demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!”;
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
</body>
</html>
——————————
Η εικόνα δείχνει το αποτέλεσμα που θα δούμε στο φυλλομετρητή:
Javascript στην κατασκευή ιστοσελίδων
Όταν προωθούμε μια ιστοσελίδα καλό είναι να μην τοποθετούμε τις λέξεις κλειδιά μέσα στον κώδικα της γλώσσας javascript. Η αιτία είναι οτι ενδέχεται η μηχανή αναζήτησης της Google να μην εκτελέσει τον κώδικα και να μην κατανοήσει τη σημασία αυτών των λέξεων. Αυτό θα είναι επιζήμιο όσον αφορά την προώθηση της ιστοσελίδας σας. Κάποιοι εδώ ίσως να ισχυριστούν οτι υπάρχουν τεχνικές ώστε να καταστήσουμε τον κώδικα της javascript φιλικό προς τις μηχανές αναζήτησης. Αυτό όμως απαιτεί υψηλό επίπεδο τεχνογνωσίας τόσο στην προώθηση ιστοσελίδων όσο και στις γλώσσες html και javascript. Επίσης ποτέ δεν θα είστε σίγουροι για τη συμβατότητα της επιλογής σας με τις μελλοντικές ενημερώσεις του αλγορίθμου της Google. Σε γενικές γραμμές προτείνουμε οτι μια καλή νοοτροπία στην προώθηση ιστοσελίδων είναι να αποφεύγετε την τοποθέτηση των κρίσιμων λέξεων κλειδιών εντός του κώδικα της javascript.
Javascript στην προώθηση ιστοσελίδων
Σε αντίθεση με την προώθηση ιστοσελίδων, συνιστούμε θερμά τη χρήση της javascript στην κατασκευή ιστοσελίδων. Όταν κατασκευάζουμε μια ιστοσελίδα θέλουμε να είναι εντυπωσιακή. Να τραβάει το μάτι του επισκέπτη. Να τον προσελκύει να κάνει πολλά κλικ και να πλοηγηθεί σε όλες τις σελίδες της ιστοσελίδας που κατασκευάζουμε. Η συμβολή της javascript σε αυτό το θέμα είναι καταλυτική. Θα σας βοηθήσει να κατασκευάζετε ιστοσελίδες πολύ πιο ζωντανές, πολύ πιο εντυπωσιακές. Για να είμαστε πιο συγκεκριμένοι, είναι αδύνατο να αποφύγετε τη χρήση της javascrip στην κατασκευή ιστοσελίδων. Πλέον οι επισκέπτες δεν είναι ικανοπιημένοι από την απλή html. Εάν η ιστοσελίδα που φτιάχνετε δεν περιλαμβάνει javascript ή jquery ή κάποια παραλλαγή αυτών, τότε δύσκολα θα εντυπωσιάσει τον επισκέπτη. Εδώ θα ενημερωθείτε λεπτομερώς για τις λεπτομέρειες της κατασκευής ιστοσελίδων από τη dreamweaver.gr
