JavaScript est un langage de programmation complètement lié au langage HTML. Le développeur internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l'intermédiaire de son navigateur, charge le code des pages.
C'est le navigateur qui interprète les codes HTML et JavaScript. L'interprétation dépend naturellement du type de navigateur utilisé et de sa version.
JavaScript est un langage objet et événementiel. Le développeur peut créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d'événements déclenchés par le visiteur (passage de souris, clic, saisie clavier, etc...)
<head>
<title>Titre de page</title>
<script type="text/javascript" src="monFichier.js"></script>
<script type="text/javascript">
/* Instructions */
</script>
</head>
<body>
<script type="text/javascript">
/* Instructions */
</script>
</body>
<html>
La ligne suivante déclare un bloc de code JavaScript que le navigateur doit chercher sur le serveur du site à l'adresse monFichier.js.
<script type="text/javascript" src="monFichier.js"></script>Le navigateur charge le fichier et l'exécute avant de poursuivre l'interprétation du reste du code HTML qui suit.
C'est donc entre les balises <script> qu'est inséré le code JavaScript. Veillez à bien respecter la syntaxe proposée.
Il est possible aussi de faire appel à un script quand l'utilisateur clique sur un lien :
<a href="javascript:ma_fonction()">Cliquez ici</a>
JavaScript utilise l'instruction var pour la déclaration de variable. Toute nouvelle variable doit être initialisée, sous peine d'erreur de script.
Pour déclarer une variable basique, c'est-à-dire de type entier, numérique, chaîne de caractères, etc, il ne faut pas déclarer le type. Le navigateur le détecte.
EXEMPLES de déclaration de variables basiques :
var prenom="Marcel"; var nom="Dupond"; var age=29;
On remarque la présence du point virgule (;) à la fin de chaque instruction. Le point virgule marque la fin d'une instruction, comme le retour à la ligne.
Avec un retour à la ligne, le point virgule n'est donc pas indispensable. Cette déclaration de variable est valable :
var prenom="Marcel"
var nom="Dupond"
var age=29
Il est aussi possible de placer sur une même ligne plusieurs instructions séparées par des points virgules.
var prenom="Marcel"; var nom="Dupond"; var age=29;
L'instruction var peut aussi être appelée une fois pour déclarer plusieurs variables avec le séparateur virgule.
var prenom="Marcel", nom="Dupond", age=29;
L'idée est de compacter le code, qui sera ainsi plus léger et accélèrera le chargement de la page.
Une variable déjà déclarée s'utilise ensuite normalement, comme dans tous les langages de programmation :
var accueil="Bonjour " + prenom + " " + nom;
JavaScript intègre d'origine plusieurs type d'objets. Voyons tout d'abord l'objet Date, très utile dans un environnement internet.
La déclaration se fait toujours avec var. Pour créer un objet, il faut utiliser le mot-clé new suivi du type d'objet Date(). ATTENTION, le respect des majuscules/minuscule est indispensable et source de nombreuses erreurs.
var date_jour=new Date();
Cette ligne crée un objet Date contenant la date et l'heure de maintenant.
var une_date=new Date(annee,mois-1,jour,heure,min)
Cette ligne crée un objet Date avec une date paramétrable.
En JavaScript, les tableaux sont des objets Array et leur déclaration est identique à celle vue plus haut.
var un_tableau=new Array()
Cette ligne crée un tableau. En JavaScript, le premier élément est indexé à 0. Il est possible de déclarer un tableau sans dimension fixée. La taille du tableau s'adapte en fonction du contenu :
var un_autre_tableau=new Array();
Pour accéder aux éléments du tableau, on utilise les crochets "[" et "]"
un_tableau[0]=10;
un_tableau[9]=5;
Des méthodes associées à l'objet permettent d'effectuer des traitements ou d'accéder à des propriétés. On utilise la notation pointée pour appliquer une méthode sur un objet ou pour accéder à une propriété.
var dimension = un_tableau.length;
Cette ligne retourne le nombre d'éléments avec la propriété length de l'objet Array appelé un_tableau.
Les fonctions et instructions sont déclarées et codées dans l'entête de la page et peuvent être appelées ensuite à n'importe quel endroit de la page. Pour déclarer une fonction ou une instruction, on utilise le mot-clé function, suivi de son nom et des éventuels paramètres.
/* Déclaration de la fonction */
function ma_premiere_fonction()
{
var dt=new Date();
var heure=dt.getHours();
console.log("dt.getHours()="+heure);
if (heure<10) {heure=" "+heure;}
var minute=dt.getMinutes();
console.log("dt.getMinutes()="+minute);
if (minute<10) {minute=" "+minute;}
var titre="Votre navigateur indique "+heure+":"+minute;
return titre;
}
/* Exécution de la fonction */
var titre=ma_premiere_fonction();
document.write(titre);
La fonction ma_premiere_fonction() retourne une chaîne de caractères composé de "Votre navigateur indique" et de l'heure et des minutes de la date d'exécution du script sur le poste du visiteur.
La méthode write écrit dans le document le résultat de l'appel à la fonction.
Notez l'usage de console.log() qui affiche dans la console du navigateur et l'émulateur de la console Tout JavaScript les heures et minutes.
Le corps des fonctions et instructions est délimité par { et } dans lequel on place la déclaration des variables locales, propres à la fonction, ainsi que l'ensemble des traitements.
Une fonction aura dans son corps une ou plusieurs instructions return qui permet de renvoyer une valeur ou un objet et de mettre fin à l'appel de la fonction. L'instruction return n'est pas obligatoire ; on a alors affaire à une instruction qui ne renvoie pas de valeur.
Les fonctions déclarées dans les fichiers externes ou l'entête de la page peuvent être appelées elles-mêmes, de manière itérative, dans d'autres fonctions et dans le corps de la page.
En savoir plus