string

Une ligne étoilée.

Écrire un programme affichant une chaîne de longueur 10, chaque caractère de la chaîne étant égal au caractère * : **********

Écrire ensuite une version permettant à l'utilisateur d'entrer le nombre d'étoiles qu'il veut afficher.

Une première solution.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let dixetoiles = "**********";
        
        document.write(dixetoiles);
               
        </script>
    </body>
</html>

Seconde solution.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let dixetoiles = ""; // dixetoiles est à ce stade une chaîne vide
        for(let i = 0; i < 10; i+= 1) {
            dixetoiles += "*"; // on ajoute un caractère * à chaque tour de boucle
        }
        document.write(dixetoiles);      
        </script>
    </body>
</html>

Cette seconde méthode peut paraître inutilement plus compliquée. Mais son intérêt est bien sûr de laisser à l'utilisateur la possibilité de choisir le nombre d'étoiles. Testez :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        
        let nb = prompt("Quel nombre d'étoiles pour votre mot étoilé ? ");
        nb = parseInt(nb); // ne pas oublier de transformer nb en entier
        
        let mot = "";
        for(let i = 0; i < nb; i+= 1)  {
            mot += "*";
        }
        
        document.write(mot);  
           
        </script>
    </body>
</html>

On peut également utiliser repeat :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        
        let nb = prompt("Quel nombre d'étoiles pour votre mot étoilé ? ");
        nb = parseInt(nb); // ne pas oublier de transformer nb en entier
        document.write("*".repeat(nb));  
           
        </script>
    </body>
</html>

Ciel étoilé.

Écrire un programme qui affiche 20 lignes de 25 étoiles.

Première solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let nbLignes = 20;
        let longueurLigne = 25;
        
        let etoiles = ""; // etoiles est à ce stade une chaîne vide
        
        for(let i = 0; i < longueurLigne; i += 1) {
            etoiles += "*";
        } // etoiles est maintenant une chaîne de 25 * (ou plutôt de longueurLigne *)
        
        for(let i = 0; i < nbLignes; i += 1) { //à chaque tour de boucle, on crée une nouvelle ligne de 25 *
            document.write(etoiles); 
            document.write('<br>');  
        }
             
        </script>
    </body>
</html>

Seconde solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let nbLignes = 20;
        let etoiles = "*".repeat(25);
          
        for(let i = 0; i < nbLignes; i += 1) {
            document.write(etoiles);
            document.write('<br>');  
        }
             
        </script>
    </body>
</html>

Troisième solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        <script>
        let etoiles = "*".repeat(25);// etoiles est la chaîne constituée de 25 caractères *
        etoiles += '<br>';// etoiles est maintenant la chaîne constituée de 25 caractères * suivis des caractères <br>
        document.write(etoiles.repeat(20)); // on écrit 20 fois la chaîne dans le document html
        // la chaîne <br> sera alors interprétée comme une balise html (passage à la ligne)
        </script>
    </body>
</html>

Carré d'étoiles.

Écrire un programme qui :

demande à l'utilisateur d'entrer une ligne d'étoiles,
puis affiche un carré d'étoiles, c'est à dire affiche la ligne de l'utilisateur nb fois, où nb est le nombre d'étoiles dans la ligne entrée.

Par exemple, si l'utilisateur rentre ***, le programme devra afficher :

*** 
***
***

Première solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
    
    	 
    	
        <script>
        let ligneEtoiles = prompt("Entrer une ligne d'étoiles : ");
            
        for(let i = 0; i < ligneEtoiles.length; i+= 1)  {
                document.write(ligneEtoiles);
                document.write('<br>');  
        }
              
        </script>
    </body>
</html>

Seconde solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
    
    	<script>
        let ligneEtoiles = prompt("Entrer une ligne d'étoiles : ");
        let longueur = ligneEtoiles.length;
        ligneEtoiles += '<br>';
        document.write(ligneEtoiles.repeat(longueur));
        </script>
    </body>
</html>

Mot étoilé.

Écrire un programme qui :

demande à l'utilisateur d'entrer un mot,
puis affiche ce mot en intercalant * entre chaque lettre du mot.

Par exemple, si l'utilisateur rentre javascript, le programme devra afficher : j*a*v*a*s*c*r*i*p*t

Première solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
         
        <script>
        let mot = prompt("Entrer votre mot : ");
        
        let lg = mot.length;
             
        for(let i = 0; i < lg-1; i += 1) {
                document.write(mot.charAt(i));
                document.write('*');  
        }
        
        // on affiche le dernier caractère après la boucle
        // afin qu'il ne soit pas suivi d'une étoile :
        document.write(mot.charAt(lg-1));
             
        </script>
    </body>
</html>

Autre solution

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
         
       <script>
        let mot = prompt("Entrer votre mot : ");
        let resultat = "";
             
        for(let caractere of mot) {
                resultat += caractere;
                resultat += "*";
        }
        // on a ajouté une * derrière chaque caractère
        // mais on  ne  demande l'affichage que jusqu'à l'avant-dernier caractère :
        document.write(resultat.substring(0,resultat.length-1));             
        </script>
    </body>
</html>

Triangle étoilé.

Écrire un script qui, pour un entier n > 0 (paramètre variable), affiche un triangle d'étoiles, suivant le modèle des exemples ci-dessous.

Avec n=4 :

Avec n=7 :

Le triangle comporte donc n lignes, la première compte une étoile, chaque ligne compte deux étoiles de plus que la précédente.

Notons u(j) le nombre d'étoiles de la ligne j :
le triangle comporte n lignes, la première compte une étoile, chaque ligne compte deux étoiles de plus que la précédente.

On en déduit facilement l'expression de u(j) : u(j)=2j-1.

La dernière ligne compte donc u(n)=2n-1 étoiles. Chacune des lignes précédentes compte donc un nombre total de blancs (espaces) égal à (2n-1)-(2j-1)=2(n-j).

La ligne j (1≤ j ≤ n) est donc ainsi constituée :

n-j espaces
puis 2j-1 étoiles
puis n-j espaces.

On rappelle qu'on obtient en html un espace insécable par le code .

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
    </head>
    <body>
        
        <script>
        
            let n = 4;
            for(let j = 1; j <= n; j+= 1) {
                for(let k = 1; k <= n-j; k+= 1) {
                	document.write(' ');// blanc à remplacer par code espace insécable
                }
                for(let k = 1; k <= 2*j-1; k+= 1) {
                	document.write('*');
                }
                for(let k = 1; k <= n-j; k+=1) {
                	document.write(' ');// blanc à remplacer par code espace insécable
                }
                
                document.write('<br>');
            }
           
        </script>
    </body>
</html>

En testant, on constate un décalage : l'espace insécable n'a pas tout à fait la même largeur que le caractère * et les étoiles centrales de chaque ligne sont de ce fait non alignées sur une verticale.

Une autre façon de procéder est de remplacer les blancs par des étoiles qui auront la même couleur que le fond et seront donc, de ce fait, invisibles. Ainsi, comme on le constate ci-dessous, les étoiles du centre de chaque ligne sont parfaitement alignées sur une verticale.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Chaînes </title>
        <style>
        /* code css qui écrira en blanc le texte
        entouré par la balise span avec l'attribut class égal à blanc. */
        span.blanc{color:white;}
        </style>
    </head>
    <body>
        
        <script>
        
            let n = 7;
            for(let j = 1; j <= n; j+= 1) {
				document.write('<span class="blanc">*</span>'.repeat(n-j));               
				document.write('*'.repeat(2*j-1));           
				document.write('<span class="blanc">*</span>'.repeat(n-j));
                document.write('<br>');
            }
        </script>
    </body>
</html>