Τρόποι εισαγωγής κώδικα

Ενσωμάτωση στο αρχείο html

Το html tag <script> σε συνδυασμό με την ιδιότητα type χρησιμοποιείται για την ενσωμάτωση κώδικα javascript σε ένα αρχείο html (ή php). Π.χ. ο παρακάτω κώδικας αναλαμβάνει την προβολή της φράσης 'Μάθημα javascript' και εμπεριέχεται μέσα στον html κώδικα του αρχείου.

<body>
<script type="text/javascript">
document.write ( 'Μάθημα javascript' );
</script>
</body>

Χρήση javascript για την προβολή κειμένου
Χρήση javascript για την προβολή κειμένου

Συνηθίζεται όλα τα κομμάτια κώδικα javascript να ενσωματώνονται ανάμεσα στις ετικέτες <head> και </head> ή μετά το κλείσιμο του </body>. Για παράδειγμα,

<html>
<head>
<script type="text/javascript">
function click_button ()
{
    document.getElementById ( "test" ).innerHTML = 'You clicked the button';
}
</script>
</head>

<body>
<h1>Click button</h1>
<p id="test"></p>
<button type="button" onclick="click_button ()">Click me</button>
</body>
</html>

Το παραπάνω παράδειγμα καλεί τη συνάρτηση click_button όταν ο χρήστης κάνει κλικ πάνω στο button. Με τη σειρά της η συνάρτηση click_button αντικαθιστά το περιεχόμενο της παραγράφου με id 'test' με τη φράση 'You clicked the button'.

Κάποιοι φυλλομετρητές δεν υποστηρίζουν τη javascript ή ο χρήστης μπορεί να την έχει απανεργοποιήσει από τις ρυθμίσεις του προγράμματος περιήγησής τους. Για παράδειγμα, αν στο παραπάνω παράδειγμα απενεργοποιήσουμε τη javascript στον firefox, το κείμενο δε θα εμφανιστεί. Σε μερικούς φυλλομετρητές, όμως, εμφανίζεται στη σελίδα ο κώδικας javascript ακριβώς όπως είναι γραμμένος στο αρχείο. Για να το αποφύγουμε αυτό, αρκεί να προσθέσουμε σε σχόλιο τον κώδικα javascript. Για τη χρήση σχολίου, προσθέτουμε την ακολουθία χαρακτήρων <!-- στην αρχή του κώδικα και την ακολουθία //--> στο τέλος του. Για παράδειγμα, ο παραπάνω κώδικας γράφεται με τη μορφή σχολίου, όπως παρακάτω:

<body>
<script type="text/javascript">
<!--
document.write ( 'Μάθημα javascript' );
//-->
</script>
</body>

Ενσωμάτωση σε εξωτερικό αρχείο js
Ο δεύτερος τρόπος προσθήκης κώδικα javascript γίνεται σε ξεχωριστό εξωτερικό αρχείο, το οποίο έχει την κατάληξη js. Τα αρχεία js περιέχουν μόνο κώδικα javascript και δε χρειάζεται η χρήση των html tags <script> και </script>. Η μέθοδος αυτή είναι χρήσιμη διότι ξεχωρίζει ο κώδικας html από τη javascript, ενώ το ίδιο αρχείο js μπορεί να χρησιμοποιηθεί σε παραπάνω από ένα html σελίδα. Με αυτόν τον τρόπο, μία αλλαγή που απαιτείται να γίνει στη javascript, πραγματοποιείται μία φορά  μόνο στο αρχείο js και όχι σε κάθε html αρχείο. Η σύνδεση της html με το αρχείο js γίνεται με κώδικα ανάμεσα στα <head> και </head>, όπως στο παρακάτω παράδειγμα.

<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>

<body>
<h1>Click button</h1>
<p id="test"></p>
<button type="button" onclick="click_button ()">Click me</button>
</body>
</html>

Στο αρχείο test.js (το οποίο δημιουργείται με τη βοήθεια ενός editor) θα περιέχει τον εξής κώδικα:

function click_button ()
{
    document.getElementById ( "test" ).innerHTML = 'You clicked the button';
}