Langage JavaScript

Le langage JavaScript permet d'exĂ©cuter des programmes simples comme la vĂ©rification d'un formulaire, ou trĂšs Ă©laborĂ©s comme un jeu ou une application. Ce langage est gĂ©rĂ© en natif par les navigateurs, sans plugin ajoutĂ©, ce qui est un grand avantage par rapport Ă  d'autres langages qui nĂ©cessitent l'installation d'un plugin comme Flash ou Java.

Les principales utilisations du langage JavaScript sont les suivantes :

  • Animation des pages HTML par la gestion des Ă©vĂ©nements (Ă©vĂ©nement = action de l’internaute, clic souris, clavier, etc.)
  • ContrĂŽle de saisie dans les formulaires avant leur envoi au serveur pour traitement
  • Informations sur l'internaute : dĂ©tection du navigateur utilisĂ©, langue, systĂšme d'exploitation
  • Menu dĂ©roulant, galerie d’images animĂ©es, slider, effet lightbox
  • Jeux en ligne
  • Applications en ligne

Attention : Ne pas confondre le langage JavaScript avec le langage Java qui est un autre langage dĂ©veloppĂ© par Oracle.

Le traditionnel Hello World !

Le code peut ĂȘtre placĂ© dans la zone d'entĂȘte <head> ou dans la partie <body> de la page HTML. Le navigateur exĂ©cute le code dĂšs qu’il le rencontre.

Ici dans <body> :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p id="texte"></p>
		<script>
		document.getElementById("texte").innerHTML = "Hello World!";
		</script> 
	</body>
</html>

LĂ  dans <head>, mais le code ci-dessous ne fonctionnera pas car on mentionne un id='texte' qui n'a pas encore Ă©tĂ© lu par le navigateur.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		document.getElementById("texte").innerHTML = "Hello World!";
		</script> 
	</head>
	<body>
		<p id="texte"></p>
	</body>
</html>

Une maniĂšre de rectifier le code ci-dessus est d'Ă©crire le code suivant :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function affichehello() {
			document.getElementById("texte").innerHTML = "Hello World!";
		}
		</script> 
	</head>
	<body>
		<p id="texte"></p>
		<script>
		affichehello();
		</script> 
	</body>
</html>

La fonction est tout d'abord lue dans la zone d'entĂȘte sans ĂȘtre exĂ©cutĂ©e. Elle sera exĂ©cutĂ©e dĂšs qu'elle sera appelĂ©e, ce qui est le principe des fonctions. Elle est appelĂ©e aprĂšs la balise <p> et le navigateur connait alors l'id='texte'.

Plus Ă©lĂ©gant encore, l'usage de l'Ă©vĂšnement onload qui appelle la fonction seulement aprĂšs le chargement de tout le contenu de <body>.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function affichehello() {
			document.getElementById("texte").innerHTML = "Hello World!";
		}
		</script> 
	</head>
	<body onload="affichehello()">
		<p id="texte"></p>
	</body>
</html>

Pour finir sur les sommets de l'élégance, la fonction affublée d'un paramÚtre pour écrire le texte de son choix.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
		function affiche(deschoses) {
			document.getElementById("texte").innerHTML = deschoses;
		}
		</script> 
	</head>
	<body onload="affiche('Sean Connery a la classe !')">
		<p id="texte"></p>
	</body>
</html>

Retenons les points suivants :

  • La balise <script> indique que le langage JavaScript sera utilisĂ© dans le contenu de cette balise.
  • Il est prĂ©fĂ©rable de placer les scripts en bas de la page juste avant </body>, car bien souvent, le JavaScript agit sur des balises de la page qui doivent ĂȘtre chargĂ©es en premier. On peut aussi utiliser l'Ă©vĂ©nement onload sur la balise <body>.
  • Comme pour le PHP, chaque instruction se termine par un point-virgule, mais un retour Ă  la ligne fonctionne Ă©galement.
  • Les chaĂźnes de caractĂšres sont placĂ©es entre guillemets ou entre apostrophes.

Il est Ă©galement possible de placer du code JavaScript dans un fichier externe avec l'extension .js :

Fichier principal : page.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="truc.js"></script>
	</head>
	<body>
		<header id="debut"></header>
		<script>
		miaou();
		</script>
	</body>
</html>

Fichier relié : truc.js

function miaou() {
	document.getElementById("debut").innerHTML = "<h1>Les chatons sont tout mignons</h1>";
}

Syntaxe du langage

Elle est trĂšs proche de celle du langage C ou PHP.

Types et variables

Le mot clĂ© var permet la dĂ©claration des variables. Elles n’ont pas de type statique, c’est-Ă -dire qu’elles prennent dynamiquement le type des valeurs qu’elles contiennent. Elles peuvent mĂȘme changer de type en cours de script, mĂȘme si cette pratique est dĂ©conseillĂ©e. L’usage du mot clĂ© var est facultatif.

Les types de variables peuvent ĂȘtre :

  • Number (nombres entiers ou Ă  virgule) :
    1, 0, -5, 10.85, -5.9
  • String (chaine de caractĂšre, texte) :
    "toto", "", 'cuicui'
  • Boolean (boolĂ©en) :
    true, false

Exemples :

var a = 2;
var b = "coucou";
truc = true;

Il existe un type particulier : null, qui est une sorte d’antivaleur. Contrairement Ă  la valeur null, une variable non encore affectĂ©e est indĂ©finie.

Le symbole "+" est utilisĂ© pour l’addition des nombres et la concatĂ©nation des chaĂźnes. On peut mĂȘme Ă©crire une expression telle que "bonjour" + 8 (bonjour8), mĂȘme si cette pratique dĂ©frise les ingĂ©nieurs informaticiens.

Attention, le langage JavaScript comme le langage C est sensible Ă  la casse : la variable maChaine est diffĂ©rente de Machaine, par exemple.

Les tableaux

Les tableaux sont des variables numĂ©rotĂ©es qui utilisent le mĂȘme nom auquel on ajoute un numĂ©ro entre crochets.

var toto = new Array(3); // Tableau déclaré pour 3 éléments. Attention au A majuscule
toto[0] = 12; // on commence à l’indice 0
toto[1] = "coucou"; // chaque Ă©lĂ©ment peut ĂȘtre de type diffĂ©rent
toto[2] = 10.5;
alert(toto.length); // Affiche le nombre d’élĂ©ments : 3 (de 0 Ă  2)

Voici un exemple oĂč le tableau est utilisĂ© dans une boucle for :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
	<script>
        var photos = new Array(3);
        photos[0] = "chat";
        photos[1] = "chien";
        photos[2] = "hamster";
        for (i = 0 ; i < 3 ; i++)
            alert(photos[i]);
	</script> 
	</body>
</html>

Un exemple Ă©quivalent oĂč le tableau est dĂ©clarĂ© et alimentĂ© directement :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
	<script>
        var photos = new Array("chat", "chien", "hamster");
        for (i = 0 ; i < 3 ; i++)
            alert(photos[i]);
	</script> 
	</body>
</html>

Les instructions conditionnelles

On appelle structure conditionnelle les instructions qui permettent de tester si une condition est vraie ou non, ce qui permet de donner de l’interactivitĂ© Ă  vos scripts par exemple.

L’instruction if

L’instruction if est la structure de test la plus basique, on la retrouve dans tous les langages. Elle permet d’exĂ©cuter une sĂ©rie d’instructions si jamais une condition est rĂ©alisĂ©e.

La syntaxe de cette expression est la suivante :

if (condition réalisée) {
      Liste d’instructions;
}

Remarques :

  • La condition doit ĂȘtre entre des parenthĂšses.
  • S’il n’y a qu’une instruction, les accolades ne sont pas nĂ©cessaires.

Il est possible de dĂ©finir plusieurs conditions Ă  remplir avec les opĂ©rateurs ET et OU (&& et ||) :

if (condition1 && condition2)
// teste si les deux conditions sont vraies
if (condition1 || condition2)
// exĂ©cute les instructions si l’une ou l’autre des deux conditions est vraie

L’instruction if ... else

L’instruction if dans sa forme basique ne permet de tester qu’une condition, or la plupart du temps on aimerait pouvoir choisir les instructions Ă  exĂ©cuter en cas de non rĂ©alisation de la condition...

L’expression if ... else permet d’exĂ©cuter une autre sĂ©rie d’instructions en cas de non-rĂ©alisation de la condition.

La syntaxe de cette expression est la suivante :

if (condition réalisée) {
     Liste d’instructions;
}
else {
     Autre sĂ©rie d’instructions;
}

Les boucles

Les boucles permettent d’exĂ©cuter plusieurs fois la mĂȘme sĂ©rie d’instructions jusqu’à ce qu’une condition ne soit plus rĂ©alisĂ©e.

La façon la plus commune de faire une boucle, est de crĂ©er un compteur (une variable qui s’incrĂ©mente, c’est-Ă -dire qui augmente de 1 Ă  chaque tour de boucle) et de faire arrĂȘter la boucle lorsque le compteur dĂ©passe une certaine valeur.

La boucle for

L’instruction for permet d’exĂ©cuter un certain nombre de fois la mĂȘme sĂ©rie d’instructions.

Trois paramÚtres sont à préciser dans la syntaxe for :

  • le nom de la variable qui sert de compteur et sa valeur de dĂ©part,
  • la condition pour laquelle la boucle s’arrĂȘte (condition qui teste si la valeur du compteur dĂ©passe une limite),
  • une instruction qui incrĂ©mente (ou dĂ©crĂ©mente) le compteur.
for (départ du compteur; condition; pas du compteur) {
     liste d’instructions;
}

Exemple :

for (i=1; i<4; i++) {
	alert(i);
}

Cette boucle affiche 3 fois la valeur de i, c’est-à-dire 1, 2, 3

Elle commence Ă  i=1, vĂ©rifie que i est bien strictement infĂ©rieur Ă  4, jusqu’à atteindre la valeur i=4 pour laquelle la condition ne sera plus rĂ©alisĂ©e, la boucle s’arrĂȘtera alors et le programme se poursuivra aprĂšs la boucle.

Une instruction alert(i) dans votre boucle est un bon moyen pour vĂ©rifier la valeur du compteur pas Ă  pas.

Il faut bien compter le nombre de fois que l’on veut faire exĂ©cuter la boucle :

for(i=0; i<=10; i++)

exécute 11 fois la boucle (i de 0 à 10 inclus)

L’instruction while

L’instruction while reprĂ©sente un autre moyen d’exĂ©cuter plusieurs fois la mĂȘme sĂ©rie d’instructions.

Syntaxe :

while (condition réalisée) {
      liste d’instructions;
}

Cette instruction exĂ©cute la liste d’instructions tant que (while est un mot anglais qui signifie tant que) la condition est rĂ©alisĂ©e.  La condition de sortie pouvant ĂȘtre n’importe quelle structure conditionnelle, les risques de boucle infinie (boucle dont la condition est toujours vraie) sont grands, c’est-Ă -dire qu’elle risque de provoquer un plantage du navigateur (voire une brĂšche dans l’espace-temps).

Les boĂźtes de messages

Boite d'alerte

alert("message d’alerte");

Affiche une simple boĂźte de message avec le texte "message d'alerte"

Confirmation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<script>
		if (confirm("L'Ă©lĂ©ment sera supprimĂ©. Êtes-vous sĂ»r ?"))
			document.write("ÉlĂ©ment supprimĂ©.");
		else
			document.write("Suppression annulée.");
		</script>
	</body>
</html>

Cette fonction affiche une boĂźte de message et offre Ă  l’utilisateur la possibilitĂ© de confirmer (OK ou Annuler). Elle retourne true si l’utilisateur clique sur OK, false s’il clique sur Annuler.

Articles connexes