Il existe plusieurs manières d'insérer du code JavaScript dans un document (X)HTML.
Un script est une portion de code qui vient s'insérer dans une page HTML. Le code du script n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript. Les balises annonçant un code JavaScript sont les suivantes :
<script type="text/javascript"> // Placez ici le code de votre script </script>
Exemple 1
Le texte écrit en rouge représente la code javascript inséré dans cette page HTML.
L'instruction onclick est un événement JavaScript et est déclenché par une action de l'utilisateur, comme ici par le clic d'un des boutons de la souris.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exemple 1</title>
<script type="text/javascript">
function afficher(){
alert('Hello')
}
</script>
</head>
<body>
<button onclick='afficher()'>Cliquez ici</button>
</body>
</html>
Exemple 2
Cette méthode d'insertion de code JavaScript fait elle aussi appel à l'élément script, mais cette fois-ci le code JavaScript se trouve dans un fichier externe. Dans ce cas, l'élément script précise à l'aide de l'attribut src l'emplacement du fichier JavaScript :
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exemple 2</title>
<script type="text/javascript" src="./dossier-de-scripts/mes-scripts.js">
</head>
<body>
<h1>Titre</h1>
<p>Mon contenu ... </p>
</body>
</html>
Exemple 3
Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans ses scripts.
Placer des commentaires dans son code est utile pour s'y retrouver lorsque, plusieurs mois après, on voudra revoir son script.
Pour mettre en commentaire toute une ligne on utilise le double slash : //
// Tous les caractères derrière le // sont ignorés
Exemple 4
Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes) on utilise le /* et le */ :
/* Toutes les lignes comprises entre ces repères
sont ignorées par l'interpréteur
de code */