JavaScript - Cours

Introduction

Lorsqu’ils sont utilisés avec le balisage HTML, les scripts-de petits programmes- permettent aux pages Web de réagir aux actions de l’utilisateur. On peut ainsi introduire des effets interactifs et dynamiques qu’on rencontre sur le Web, tels que les images qui changent automatiquement lorsque l’utilisateur déplace le pointeur de sa souris dessus, les fenêtres de navigateur qui s’ouvrent lorsqu’une page se charge, les barres de navigations animées. On peut aussi effectuer des calculs grâce à ces scripts. Comme les scripts sont des mini-programmes, ils sont souvent écrits dans un langage de programmation nommé JavaScript. Le script rend la page Web dynamique, ce qui signifie qu’il ajoute des fonctionnalités programmées à la page pour lui permettre de répondre aux actions de l’utilisateur. Par exemple pour vérifier que les utilisateurs ont rempli tous les champs obligatoires d’un formulaire. Dans l’exemple ci-dessous, l’élément <script> de la page HTML contient une fonction de validation de ce type, validerFormulaire. Cette fonction est appelée via l’attribut onsubmit de l’élément <form>.

Un programme en javascript

Un programme JavaScript peut être défini directement dans un fichier HTML ou bien dans un fichier séparé. Dans les deux cas, l’utilisation de la balise <script> est indispensable. La balise <script> permet de définir un script au sein du document HTML. Les principaux attributs sont : langage : le langage utilisé, cet attribut prendra la valeur "javascript" ; type : précise le type du script ; nous utilisons le type "text/javascript" ; src : définit l’URL dans le cas de l’utilisation d’un fichier externe.

Exemple 1

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Formulaire  </title>
		<script type="text/javascript"language="javascript">
			function verifierFormulaire (ceFormulaire ) 
			{
				if (ceFormulaire.Prenom.value == "") 
					{
					alert ("Veuillez saisir votre prénom.") ;
					return false ;
					}
				if (ceFormulaire.Nom.value == "") 
					{
					alert ("Veuillez saisir votre nom.") ;
					return false ;
					}
				return true ;
			}
		</script>
    </head>
    <body>
        <form action="http://www.ozanet.fr" method="post"
			onsubmit="return verifierFormulaire(this) ;">
			<p>	Prénom :<input type = "text" name="Prenom" size = "30"  maxlength="25" />
				Nom :<input type = "text" name="Nom" size = "30"  maxlength="25" />
				<input type="submit" />
			</p>
		</form>    
    </body>
</html>

Ou bien avec un fichier externe qu'on nomme dans notre exemple : nomFichier.js

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Formulaire  </title>
		<script type="text/javascript" src="nomFichier.js"></script>
    </head>
    <body>
        <form action="http://www.ozanet.fr" method="post"
			onsubmit="return verifierFormulaire(this) ;">
			<p>	Prénom :<input type = "text" name="Prenom" size = "30"  maxlength="25" />
				Nom :<input type = "text" name="Nom" size = "30"  maxlength="25" />
				<input type="submit" />
			</p>
		</form>    
    </body>
</html>

Où le fichier externe nomFichier.js se présente sous la forme :

function verifierFormulaire (ceFormulaire ) 
	{
	if (ceFormulaire.Prenom.value == "") 
	{
	alert ("Veuillez saisir votre prénom.") ;
	return false ;
	}
	if (ceFormulaire.Nom.value == "") 
	{
	alert ("Veuillez saisir votre nom.") ;
	return false ;
	}
	return true ;
	}

Affichage et saisie au clavier

L’opération d’écriture est définie en JavaScript par les instructions write( ) et writeln( ). Ces instructions doivent être précédées par le mot réservé document.qui précise que l’on souhaite un affichage dans le document courant. Si vous oubliez de le préciser JavaScript l’ajoutera automatiquement pour vous. La seule différence entre les deux instructions est que writeln( ) ajoute automatiquement un retour à la ligne à l’affichage.

Nous pouvons demander à JavaScript d’utiliser une boîte de dialogue à l’aide de la fonction alert( ).

On peut effectuer des saisies au clavier en utilisant la fonction prompt( ) : la saisie se fera dans une boîte de dialogue. Cette fonction utilise deux paramètres : une chaîne de caractère (le message à afficher) et la valeur par défaut à donner à la valeur saisie (celle qui sera utilisée si l’utilisateur valide sans avoir saisi de valeur particulière). Attention : la fonction prompt( ) renvoie une chaîne de caractères. Pour la saisie d'un nombre, on convertit la chaîne de caractères saisie en un nombre en utlisant la fonction Number()

Exemple 2

Tester ce programme

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Quel est votre âge ?  </title>
    </head>
  <body>
	<p>Quel est le rôle de ce programme ?</p>
  </body>
	<script type="text/javascript" language="javascript">
		var ageCh, ageNo ;
		ageCh = prompt("Quel est votre âge ?", " ") ;
		document.writeln("Vous avez :",ageCh);
		alert("Vous avez " + ageCh +  " ans ") ;
		ageNo = Number(ageCh) ;
		alert("Votre année de naissance est " + (2015 - ageNo) + "...");
	</script>
</html>

Qu'affiche ce programme ?

Quelques instructions en JavaScript

if ... else

Exemple 3

Tester ce programme

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Pair ou impair  </title>
    </head>
  <body>
	<p>Quel est le rôle de ce programme ?</p>
  </body>
	<script type="text/javascript" language="javascript">
		var a ;
		a = Number(prompt("Saisissez un entier naturel",0)) ;
		r = a%2
		if (r == 0) alert("Le nombre que vous avez saisi est pair ") ;
		else alert("Le nombre que vous avez saisi est impair ") ;
	</script>
</html>

Qu'affiche ce programme ?

La boucle for

Exemple 4

Tester ce programme

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Table de multiplication  </title>
    </head>
  <body>
	<p>Quel est le rôle de ce programme ?</p>
  </body>
	<script type="text/javascript" language="javascript">
		n = Number(prompt("Saisissez un entier naturel entre 1 et 19",0)) ;
		document.write("<h3>Table de multiplication : </h3>")
		for (i = 0 ; i <= 10 ; i++)
		{
		document.write(n," x ", i , "  =  " , n*i , " <br />") ;
		}
	</script>
</html>

Qu'affiche ce programme ?

La boucle while

Un exemple classique de l’utilisation de while est le calcul du pgcd de deux nombres par l’algorithme d’Euclide. Cet algorithme consiste à remplacer le calcul de pgcd(a, b) par celui de pgcd(b, r) où r est le reste de la division de a par b et ceci tant que r ≠ 0.

Exemple 5

Tester ce programme

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> PGCD de deux entiers  </title>
    </head>
  <body>
	<p>Quel est le rôle de ce programme ?</p>
  </body>
	<script language="javascript">
		var m0=prompt("Entrer le premier entier m : ", '');
		var n0=prompt("Entrer le deuxième entier n : ", '');
		var m=parseInt(m0); var n=parseInt(n0); var r=m%n;
		while (r  != 0)
		{   m = n  ;  n = r  ;   r = m % n ; }
		alert("Le PGCD de "+ m0 +" et "+ n0 +" est "+  n);  
		document.write("Le PGCD de ", m0 ," et ",  n0  ," est ",n);
	</script>

</html>

Quel est le rôle de ce programme ?