function

Aire et périmètre d'un disque.

Aire

Écrire une fonction javascript répondant à la spécification suivante :

Entrée : un réel r strictement positif.
Valeur retournée : l'aire du disque de rayon r.

La constante π s'obtient par Math.PI.

Périmètre

Écrire une fonction javascript répondant à la spécification suivante :

Entrée : un réel r strictement positif.
Valeur retournée : le périmètre du disque de rayon r.

Interface

Ajouter les éléments html et le code js nécessaires pour que l'utilisateur entre le rayon r dans un élément de formulaire (élément input) et que le résultat s'affiche dans un élément de type p dans la page.

Séparez calcul et affichage

Nous définissons une fonction qui s'occupe du calcul demandé puis une fonction qui affiche le résultat.

Il est important, en général, de ne pas mélanger les rôles de calcul et d'affichage. Assurez vous de bien saisir la différence de rôle entre un return et un affichage.

Premier code (sans interface utilisateur)

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  disque </title>
    </head>
    <body>
    
    
    	 
        <script>
        function aireDisque(r) {
        	 return Math.PI * r * r;     
        }
        
        function perimetreDisque(r) {
        	 return 2 * Math.PI * r;     
        }
        
        function affichageResultat(r) {
        	document.write(`Le disque de rayon ${r} cm a pour périmètre ${perimetreDisque(r)} cm, <br>`);
        	document.write(`et pour surface ${aireDisque(r)} cm<sup>2</sup>.<br> <br>`);
        }
        
        
        affichageResultat(3);
        affichageResultat(5);
        </script>
    </body>
</html>

Interface

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  disque </title>
        <style>
        body{height: 15rem;}
        </style>
    </head>
    <body>
    
			 
			Entrez la valeur du rayon : 
				<input type="number" name="rayon" id="rayon" value="1" step="0.1">
			 	
			<br><br> 
			 
			Puis cliquez sur le bouton. 
			<button type="button" id="calculons">Clic clic !</button>
			
			<p id="resultat"></p>
    	 
    	
    	  
    	
 		
    	 
        <script>
        function aireDisque(r) {
        	 return Math.PI * r * r;     
        }
        
        function perimetreDisque(r) {
        	 return 2 * Math.PI * r;     
        }
        
        function affichageResultat() {
        	// on récupère la valeur entrée dans le champ input text :
        	let r = document.querySelector("#rayon").value;
        	
        	// on crée ensuite la chaîne de caractères pour l'affichage
        	// (balises html comprises)
        	let res = `Le disque de rayon ${r} cm a pour périmètre ${perimetreDisque(r)} cm,<br>`;
        	res += `et pour surface ${aireDisque(r)} cm<sup>2</sup>.<br> <br>`;
        	
        	// on définit le contenu html du paragraphe d'identifiant resultat :
        	document.querySelector("#resultat").innerHTML = res;
        }
        
        // on associe le bouton au lancement de la fonction affichageResultat :
        document.querySelector("#calculons").addEventListener('click',affichageResultat);
         
        </script>
    </body>
</html>

Échange.

Échanger le contenu de deux variables

Gaston aimerait écrire une fonction permettant d'échanger le contenu de deux variables contenant des entiers.

Il écrit le code suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  échange </title>
    </head>
    <body>
     
        <script>
        function echange(valeur1, valeur2) {
        	 let auxiliaire = valeur1;
        	 valeur1 = valeur2;
        	 valeur2 = auxiliaire;     
        }
        
        var a = 2;
        var b = 15;
        document.write(`Avant appel de la fonction echange: a = ${a}, b = ${b}. <br>`); 
        echange(a,b);
        document.write(`Après appel de la fonction echange: a = ${a}, b = ${b}. <br>`); 
        </script>
    </body>
</html>

Obtient-il ainsi l'échange voulu des valeurs de a et b ?

Effet du code de Gaston

La fonction n'échangera pas les contenus des deux variables comme le montre l'exécution ci-dessous :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  échange </title>
    </head>
    <body>
     
        <script>
        function echange(valeur1, valeur2) {
        	 let auxiliaire = valeur1;
        	 valeur1 = valeur2;
        	 valeur2 = auxiliaire;     
        }
        
        var a = 2;
        var b = 15;
        document.write(`Avant appel de la fonction echange: a = ${a}, b = ${b}. <br>`); 
        echange(a,b);
        document.write(`Après appel de la fonction echange: a = ${a}, b = ${b}. <br>`); 
        </script>
    </body>
</html>

Le déroulement est le suivant :

Lors de l'appel echange(a,b), la valeur de a est copiée dans la variable valeur1 (qui est locale à la fonction echange) et la valeur de b est copiée dans la variable valeur2 (variable également locale à la fonction).
Ensuite un échange des valeurs des variables valeur1 et valeur2 a lieu.
On sort ensuite de la fonction : les variables valeur1 et valeur2 n'existent plus et les variables a et b ont été inchangées.

Le code suivant montre que l'échange des valeurs des variables valeur1 et valeur2 a bien lieu dans la fonction :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  échange </title>
    </head>
    <body>
     
        <script>
        function echange(valeur1, valeur2) {
			 document.write(`valeur1 = ${valeur1}, valeur2 = ${valeur2}. <br>`); 
        	 let auxiliaire = valeur1;
        	 valeur1 = valeur2;
        	 valeur2 = auxiliaire;  
        	 document.write(`valeur1 = ${valeur1}, valeur2 = ${valeur2}. <br>`);     
        }
        
        var a = 2;
        var b = 15;
        document.write(`Avant appel de la fonction echange: a = ${a}, b = ${b}. <br>`); 
        echange(a,b);
        document.write(`Après appel de la fonction echange: a = ${a}, b = ${b}. <br>`); 
        </script>
    </body>
</html>

Échange dans un array.

Échanger le contenu de deux éléments d'un array

Observez le code suivant. Puis expliquez en quoi il peut-être surprenant par rapport aux explications de l'exercice précédent. Cherchez une explication.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  échange </title>
    </head>
    <body>
     
        <script>
        function echange(L, indice1, indice2) {
        	let auxiliaire = L[indice1];
        	L[indice1] = L[indice2];
        	L[indice2] = auxiliaire;  
        }
        
        let T = ["coucou", "bonjour", "hello", "Guten Tag"];
        let i = 0, j = 3;
        document.write(T); 
        document.write("<br>"); 
        echange(T, i, j);
        document.write(T); 
        </script>
    </body>
</html>

Une solution

Si l'on reprend la logique présentée dans l'exercice précédent, on s'attend au comportement suivant :

Lors de l'appel echange(T, i, j);, le contenu du tableau T est copié dans le tableau local L et les valeurs 0 et 3 (de i et j) sont copiées dans les variables locales indice1, indice2.
Un échange est fait entre les éléments d'indice 0 et d'indice 3 du tableau L.
En sortant de la fonction, la variable locale L est oubliée et T est inchangé.

Or nous constatons que l'échange a bien eu lieu dans T.

Ceci est du au fait qu'un array n'est pas passé par valeur mais par référence.
Qu'est-ce que cela signifie ?

Cela signifie que lors de l'appel echange(T, i, j);, le contenu du tableau T n'est pas copié dans un nouveau tableau L. En fait, c'est l'adresse en mémoire de T qui est copiée et L désigne donc le même tableau que T (L et T ont la même adresse dans l'espace mémoire). Toute modification faite sur L sera donc faite effectivement sur T.

Pour saisir ce qu'il se passe, on peut penser les variables comme des étiquettes sur des boîtes contenant des valeurs.

L'état avant l'appel de la fonction est le suivant :
L'état juste après appel de la fonction est le suivant :

On voit sur ce schéma :

Pour des variables de type number, de nouvelles boîtes sont créées lors de l'appel de la fonction (avec de nouvelles étiquettes).
Mais pour un array, la même boîte est utilisée et elle dispose d'une nouvelle étiquette provisoire.

Ainsi en sortant de la fonction, l'étiquette L n'existe plus, mais les modifications faites sont restées car L désignait la même boîte que T.

Par contre, toute modification des boîtes étiquetées indice1 et indice2 n'aurait aucun effet sur les boîtes étiquetées i et j.

Pourquoi?

Pourquoi les nombres sont-ils passés par valeur et les tableaux par référence?

Le passage par valeurs pour les nombres est en général plus pratique (la fonction peut mener des calculs intermédiaires sans interférer sur les valeurs de la variable se trouvant en partie principale).

Pour les tableaux (et de façon plus générale pour les objets), un passage systématique par valeur poserait un problème d'espace (imaginez que votre programme manipule un très grand tableau et que plusieurs fonctions fassent appel à ce tableau: chaque appel faisant une copie du tableau, beaucoup d'espace mémoire serait utilisé au risque d'un dépassement de la capacité mémoire). Un problème de temps est également en jeu: faire une copie d'une longue liste n'est pas instantané et l'exécution d'un programme pourrait ainsi être considérablement allongé.

Rappelons que l'on peut tout de même faire des copies de tableau (c'est à dire créer une variable tableau dans laquelle on recopiera les valeurs d'un autre tableau, ces deux tableaux occupant des espaces mémoire distincts). Cela permet de "simuler" un passage de tableau par valeurs si besoin.

Nombre triangulaire.

Écrire une fonction javascript répondant à la spécification suivante :

entrée : un entier naturel n.
valeur retournée : la somme 1+2+3+...+n (somme des n premiers entiers naturels non nuls)

Interface.

Ajouter ensuite les éléments nécessaires pour que l'utilisateur entre la valeur de n dans un élément de type input et que le résultat s'affiche dans un élément de type p.

Premier code (sans interface utilisateur)

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  somme des n premiers entiers </title>
    </head>
    <body>
        <script>
        function sommeDesPremiersEntiers(n) {
        	let somme = 0;
        	for( let k = 1; k <= n; k += 1) {
        		somme += k;
        	}
        	return somme;        
        }
        
        
        function affichageResultat(n) {
        	document.write("La somme des entiers entre 1 et " + n + " est égale à : ");
        	document.write(sommeDesPremiersEntiers(n));
        	document.write(".<br>");
        }
        
        affichageResultat(3);
        affichageResultat(5);
        
        </script>
    </body>
</html>

Avec entrée donnée par l'utilisateur

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  somme des n premiers entiers </title>
        <style>
        body{height: 15rem;}
        </style>
    </head>
    <body>
    
    
    
    	<p> Entrez ci-dessous la valeur de l'entier naturel n : 
    	
			<input type="number"  step="1" id="entier" value="1">
    	</p>
    	
    	
    	<p> Puis cliquez sur le bouton.   
			<button type="button" id="calcul">Clic clic !</button>
    	</p>
    	
    	
 		<p id="resultat"></p>
 		
 		
 		
        <script>
        function sommeDesPremiersEntiers(n) {
        	let somme = 0;
        	for( let k = 1; k <= n; k += 1)	{
        		somme += k;
        	}
        	return somme;        
        }
        
         
        
        function affichageResultat() {
        	// on récupère la valeur entrée dans le champ input   :
        	let n = document.querySelector("#entier").value;
        	document.querySelector("#resultat").innerHTML = `La somme des entiers entre 1 et ${n} est égale à ${sommeDesPremiersEntiers(n)}. <br><br>`;
        }
        
        document.querySelector("#calcul").addEventListener('click',affichageResultat);
       
        </script>
    </body>
</html>

Voyelles.

Écrire une fonction js répondant aux spécifications suivantes :

Entrée : un caractère
Valeur retournée : true si le caractère est une voyelle, false sinon.

Interface

Ajouter ensuite les éléments nécessaires pour que l'utilisateur entre le caractère dans un élément de type input et que le résultat s'affiche dans un élément de type p.

Un code possible (sans interface utilisateur).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  voyelles </title>
    </head>
    <body>
        <script>
        
       
        
        
        function estVoyelle(c) {
        // c est un caractère
        // la fonction retourne true si ce caractère est une voyelle, false sinon
        	
        	let voyelles = "aeiouyAEIOUY";
        	for( let i = 0; i < voyelles.length; i++) {
        		if (voyelles.charAt(i) === c) { 
        			return true; // la fonction se termine au premier return exécuté
        		}
        	}
        	return false; //si cette ligne est exécutée,
        				 // c'est que "return true" n'a pas été exécuté
        }
        
          
        
        function affichageResultat(c) {
        
        	let resultat = estVoyelle(c);
        	if (resultat) {
        		document.write(`Le caractère ${c} est une voyelle.`);
        	}
        	else {
        		document.write(`Le caractère ${c} n'est pas une voyelle.`);
        	}
        	document.write("<br>");
        }
        
        affichageResultat("a");
        affichageResultat("b");
         
        </script>
    </body>
</html>

Autre solution (sans interface utilisateur).

On utilise la méthode includes pour allèger une partie du code.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  voyelles </title>
    </head>
    <body>
        <script>
        function estVoyelle(c) {
        // c est un caractère
        // la fonction retourne true si ce caractère est une voyelle, false sinon
        	return ("aeiouyAEIOUY".includes(c)) 
        }
        
        function affichageResultat(c) {
        
        	let resultat = estVoyelle(c);
        	if (resultat) {
        		document.write("Le caractère " + c + " est une voyelle.");
        	}
        	else {
        		document.write("Le caractère " + c + " n'est pas une voyelle.");
        	}
        	document.write("<br>");
        }
        
        affichageResultat("a");
        affichageResultat("b");
         
        </script>
    </body>
</html>

Avec entrée par l'utilisateur

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  voyelles </title>
    </head>
    <body>
		
		<label for="caractere">Entrez une lettre de l'alphabet latin: </label>
		<input type="text" value="a" id="caractere">
		
		<p id="resultat"></p>
		
		
		 
        <script>
        function estVoyelle(c) {
        // c est un caractère
        // la fonction retourne true si ce caractère est une voyelle, false sinon
        	return ("aeiouyAEIOUY".includes(c)) 
        }
        
        let caractere = document.querySelector("#caractere");
        
        
        function affiche(){
			let lettre = caractere.value;
			let resultat = estVoyelle(lettre);
			let reponse = '';
				if (resultat) {
					reponse = `Le caractère ${lettre} est une voyelle.`;
				}
				else {
					reponse = `Le caractère  ${lettre} n'est pas une voyelle.`;
				}
			document.querySelector("#resultat").textContent = reponse;
		}
		
		// lancement de affiche() lorsque le caractère est modifié par l'utilisateur :
		caractere.addEventListener('change', affiche);
		// lancement de la fonction affiche() au chargement de la page : 
		affiche();
        </script>
    </body>
</html>

Javanais.

Les règles du javanais :

On ajoute 'av' après chaque consonne ou groupe de consonnes (comme par exemple ch, cl, ph, tr,…) d’un mot.
Si le mot commence par une voyelle, on ajoute av devant cette voyelle.
On ne rajoute jamais av après la consonne finale d’un mot.

Écrire une fonction qui prend en entrée un mot et donne en sortie sa version javanaise.

La syllabe qui vient parasiter le mot (en javanais classique : 'av') pourra être modifiée et sera donc un paramètre de la fonction.

Exemples :

javanais('Abraracourcix','av') :  Avabravaravacavourcavix
javanais('Abraracourcix','oz') :  Ozabrozarozacozourcozix
javanais('javascript','ail') :  jailavailascrailipt

Interface

Vous écrirez une version dans laquelle l'utilisateur entrera la syllabe pertubatrice et le mot initial dans des éléments de type input. La traduction s'inscrira dans un élément de type p.

Un code possible (sans interface utilisateur).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  javanais </title>
    </head>
    <body>
        <script>
         
        function estVoyelle(c) {
        // paramètre : c de type string 
        // c est un caractère 
        // valeur renvoyée: true si le caractère c est une voyelle, false sinon
        	return ("aeiouyAEIOUY".includes(c));  
        }
        
        
        
        function estConsonne(c) {
        // paramètre : c de type string 
        // c est un caractère 
        // valeur renvoyée: true si le caractère c est une consonne, false sinon
        	let consonnes = "bcdfghjklmnpqrstvwxzBCDFGHJKLMNPQRSTVWXZ";
        	return  consonnes.includes(c);
        }
        
        
        
         function fr2javanais( mot, syllabe) {
			// paramètres: mot de type string, syllabe de type string
			// mot est une chaîne de caractères, mot en langage "clair"
			// syllabe est une chaîne de caractères, c'est la syllabe perturbatrice du javanais
			// syllabe joue le rôle de "av" en javanais classique.
			
			// valeur  renvoyée: la traduction du mot 'mot' en javanais avec la syllabe pertubatrice 'syllabe'
         	
         	
         	let motjavanais = ''; // contiendra le mot javanais correspondant à mot
         						  
         	
         	
         	// boucle pour ajouter syllabe derrière les groupes de consonnes  
    	 	// sauf derrière la consonne éventuelle de fin de mot.  
         	for (let a = 0; a < mot.length-1; a++) {
         		if(  estConsonne(mot[a]) && !(estConsonne(mot[a+1])) )	{
         			motjavanais += mot[a] + syllabe;
         		}
         		else {
         			motjavanais += mot[a];
         		} 
         	}
         	
         	// On ajoute la dernière lettre du mot de départ au résultat. 
    		motjavanais += mot[mot.length-1];
    
   			// On ajoute syllabe au début du mot résultat      
    		//si mot commençait par une voyelle.          
    		if ( estVoyelle(mot[0]) ) {
    			motjavanais = syllabe + motjavanais;
    		}
        
         	return motjavanais;
         }
        
        
        function affichageResultat(mot, syllabe) {
			// paramètres: mot de type string, syllabe de type string
			// valeur  renvoyée: /
			// fonction dont le rôle est d'afficher la traduction javanaise de 'mot'
        	document.write(`La traduction de "${mot}" <br>`);
        	document.write(`en javanais syllabé par "${syllabe}" <br>`);
        	document.write(`est "${fr2javanais( mot, syllabe)}".<br><br>`);
        }
        
        affichageResultat("programmer", "av");
        
        affichageResultat("Le trône de fer", "or");
        
        </script>
    </body>
</html>

Avec entrées utilisateur

La traduction s'affiche lorsque la souris survole l'élément html prévu pour afficher cette traduction.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  javanais </title>
    </head>
    <body>
		
		<label for="mot">Entrez le mot à traduire : </label>
		<input id="mot" type="text" value="programmer">
		
		<label for="syllabe">Entrez la syllabe parasite :</label>
		<input id="syllabe" type="text" value="av">
		
		<p id="zonereponse"> La traduction est : <span id="traduction"></span>.</p>
		
		
        <script>
         
        function estVoyelle(c) {
        // paramètre : c de type string 
        // c est un caractère 
        // valeur renvoyée: true si le caractère c est une voyelle, false sinon
        	return ("aeiouyAEIOUY".includes(c))   
        }
        
         
        function estConsonne(c) {
        // paramètre : c de type string 
        // c est un caractère 
        // valeur renvoyée: true si le caractère c est une consonne, false sinon
        	const consonnes = "bcdfghjklmnpqrstvwxzBCDFGHJKLMNPQRSTVWXZ";
        	return  consonnes.includes(c);
        }
         
         function fr2javanais( mot, syllabe) {
			// paramètres: mot de type string, syllabe de type string
			// mot est une chaîne de caractères, mot en langage "clair"
			// syllabe est une chaîne de caractères, c'est la syllabe perturbatrice du javanais
			// syllabe joue le rôle de "av" en javanais classique.
			
			// valeur  renvoyée: la traduction du mot 'mot' en javanais avec la syllabe pertubatrice 'syllabe'
         	 
         	let motjavanais = ''; // contiendra le mot javanais correspondant à mot
         	
         	// boucle pour ajouter syllabe derrière les groupes de consonnes  
    	 	// sauf derrière la consonne éventuelle de fin de mot.  
         	for (let a = 0; a < mot.length-1; a++) {
         		if(  estConsonne(mot[a]) && !(estConsonne(mot[a+1])) )	{
         			motjavanais += mot[a] + syllabe;
         		}
         		else {
         			motjavanais += mot[a];
         		} 
         	}
         	
         	// On ajoute la dernière lettre du mot de départ au résultat. 
    		motjavanais += mot[mot.length-1];
    
   			// On ajoute syllabe au début du mot résultat      
    		//si mot commençait par une voyelle.          
    		if ( estVoyelle(mot[0]) ) {
    			motjavanais = syllabe + motjavanais;
    		}
        
         	return motjavanais;
         }
        
        
        function affiche() {
			// paramètres: /
			// valeurs renvoyées: /
			// fonction dont le rôle est d'afficher la traduction javanaise
			// dans l'élément html d'identifiant 'traduction'
			const syllabe = document.querySelector("#syllabe").value;
			const mot = document.querySelector("#mot").value;
			document.querySelector("#traduction").textContent = fr2javanais( mot, syllabe);
		}
		
		 
        document.querySelector("#zonereponse").addEventListener('mouseover', affiche);
        
        </script>
    </body>
</html>