Nom : Star_patternPrograms.jpg Affichages : 5463 Taille : 119,5 Ko

Bonjour,

Je suis débutante en Javascript / Html, j'ai appris à codé une pyramide tel que le pattern 2 de la photo et j'aimerai savoir comment vous adapteriez mon code pour faire le pattern 1 voir le 3 et le 4 si vous savez les faire

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Triangle Pattern</title>
</head>
 
<body>
    <h1>05 : triangle</h1>
 
    Nombre lignes : <input type="text" id="nbLignes"><br>
 
    <button onclick="onClickDessineTriangle()">Dessiner triangle</button>
    <hr>
 
    <div id="triangle"></div>
 
    <script src="./js/script.js"></script>
</body>
 
</html>



JAVASCRIPT
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//............................................
// Constantes globales
//............................................
const SYMBOLE = "*";
const RETOUR_LIGNE = "<br>";
 
//............................................
// Variables globales
//............................................
 
//............................................
// Fonctions
//............................................
function lireNombre (id) {
    // Récupération de la référence sur l'élément passé via le paramètre id
    var elNombre = document.getElementById(id);
 
    // Récupération de la donnée saisie
    // !! cette donnée est en format String !!
    var strNombre = elNombre.value;
 
    // Conversion de la représentation de la valeur du nombre en numérique SANS décimale integer
    var nNombre = parseInt(strNombre);
 
    // Retourner le résultat
    return nNombre;
 
    // CODE OPTIMISE en une ligne ...
    // retrun parseFloat(document.getElementById(id).value);
 
} // lireNombre
 
 
function forgerTriangle(nbLignes) {
    // Chaine de caractères représentant le triangle
    var strTriangle = "";
 
    // Algorithme de la création du triangle
    // Variables locales
    var noLigne = 0;
    var noColonne = 0;
 
    // Forge du triangle
    while (noLigne <= nbLignes) {
        while (noColonne < noLigne) {
            // Concaténation des symboles
            strTriangle += SYMBOLE;
 
            // Prochaine colonne
            noColonne++;
        } // while	
 
        // Ajoute le retour ligne (concaténation)
        strTriangle += RETOUR_LIGNE;
 
        // Prochaine ligne
        noLigne++;	
 
        // Recommencer du début
        noColonne = 0;
    } // while   
 
    // Retourner le résultat
    return strTriangle;    
 
} // forgerTriangle
 
 
function afficherTriangle(triangle) {
    // Accéder à l'élément dans lequel il faut afficher le triangle
    var elTriangle = document.getElementById("triangle");
 
    // Insérer la donnée dans le DOM sur l'élément id="triangle"
    elTriangle.innerHTML = triangle;
 
    // CODE OPTIMISE en une ligne ...
    // document.getElementById("triangle").innerHTML = triangle;
 
} // afficherTriangle
 
 
function onClickDessineTriangle() {
    // Récupérer les valeurs (numérique float)
    var nbLignes = lireNombre("nbLignes");
 
    // Forger le triangle
    var strTriangle = forgerTriangle(nbLignes);
 
    // Afficher le triangle
    afficherTriangle(strTriangle);    
 
    // CODE OPTIMISE en une ligne ...
    // afficherTriangle(forgerTriangle(lireNombre("nbLignes"), lireNombre("nbColonnes")));
 
} // onClickDessineTriangle
 
 
//............................................
// Programme principal
//............................................
Je sais que le changements est sûrement minime et se fait au niveau des boucles mais je bloques.
Merci d'avance !!