Réaliser l'affichage d'une pyramide

**LaryssaX** · 09/11/2018, 16h41

Nom : Star_patternPrograms.jpg
Affichages : 5464
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 !!

**psychadelic** · 09/11/2018, 19h20

change de méthode!
Si tes boucles imbriquées font des noeuds dans la tête, ben c'est que la méthode n'est pas adaptée.

1 - utilise l'instruction for => https://developer.mozilla.org/fr/doc...structions/for

2 - si tu dois répéter un caractère x fois : utilise la fonction repeat => https://developer.mozilla.org/fr/doc.../String/repeat

dans ton cas ça donne :

Code JavaScript :

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
function ForgerTriangle_Type_1(nbLignes)
{
  let strTriangle = "";
  for (let i=nbLignes; i > 0; i--)
  {
    strTriangle += SYMBOLE.repeat(i) + RETOUR_LIGNE;
  }
  return strTriangle;
}
 
function ForgerTriangle_Type_2(nbLignes)
{
  let strTriangle = "";
  for (let i=1; i<=nbLignes; i++)
  {
    strTriangle += SYMBOLE.repeat(i) + RETOUR_LIGNE;
  }
  return strTriangle;
}

**Beginner.** · 10/11/2018, 02h36

Salut,

Ah intéressant cela me rappelle un exercice qu'on nous avez donné dans ce forum : "dessiner un sapin"

Nom : sapin.PNG
Affichages : 5026
Taille : 9,4 Ko

Voici pour tester le code : https://jsbin.com/sozafodelo/edit?js,console,output

On peut choisir la hauteur du feuillage, la largeur et la hauteur du tronc...
L'affichage se fait dans la console et la page html.

Voilà cela peut donner un exemple de code...

---> Le pattern 2 c'est une moitié droite de feuillage, Le pattern 4 c'est une moitié gauche de feuillage et la partie haute du pattern 3 c'est un feuillage et sa partie basse c'est un feuillage inversé...

**NoSmoking** · 10/11/2018, 10h18

Bonjour,
cette discussion pourrait également t'intéresser : Algorithme JS pour créer des formes.

Réaliser l'affichage d'une pyramide

JavaScript

Vue hybride

Discussions similaires

Partager

Partager