


Javascript implémente la table de multiplication
May 09, 2023 pm 06:08 PMLa table de multiplication est un outil important permettant aux débutants d'apprendre les bases de la multiplication, et c'est également un projet courant permettant aux programmeurs de mettre en pratique leurs compétences en programmation. Dans cet article, je vais vous montrer comment implémenter une table de multiplication simple à l'aide de JavaScript.
Tout d’abord, nous devons clarifier la structure de base de la table de multiplication. La table de multiplication est généralement une table carrée contenant des nombres de 1 à 10. Chaque ligne et colonne commence par ces nombres et remplit la grille du tableau en fonction de leur produit.
Nous pouvons utiliser des boucles imbriquées pour générer ce tableau. La boucle externe est utilisée pour contrôler le nombre de lignes dans le tableau et la boucle interne est utilisée pour générer des colonnes dans chaque ligne. Le code spécifique est le suivant :
for (let i = 1; i <= 10; i++) { let row = ''; for (let j = 1; j <= 10; j++) { row += (i * j) + ' '; } console.log(row); }
Dans ce code, nous utilisons d'abord une boucle externe pour contrôler le nombre de lignes dans le tableau, en boucle de 1 à 10. Nous utilisons la boucle interne pour générer une ligne à chaque fois que la boucle externe s'exécute une fois.
La boucle interne boucle de 1 à 10. Chaque fois qu'elle est exécutée, le nombre actuel de lignes et de colonnes est multiplié et le résultat est ajouté à la chaîne de cette ligne. Ici, nous avons utilisé des chaînes modèles d'ES6 pour construire la chaîne, afin que le résultat puisse être séparé du résultat suivant à l'aide du caractère.
Enfin, nous utilisons la fonction console.log() pour afficher chaque ligne sur la console.
Si vous souhaitez imprimer les résultats dans une page HTML, vous pouvez modifier légèrement ce code. Plus précisément, vous pouvez utiliser la fonction document.createElement() pour créer un élément de tableau dans la page, puis utiliser l'attribut innerHTML pour ajouter chaque ligne au tableau. Le code est le suivant :
const table = document.createElement('table'); for (let i = 1; i <= 10; i++) { let row = '<tr>'; for (let j = 1; j <= 10; j++) { row += '<td>' + (i * j) + '</td>'; } row += '</tr>'; table.innerHTML += row; } document.body.appendChild(table);
Dans ce code, nous utilisons la fonction document.createElement() pour créer un élément de table nommé table. Dans la boucle externe, nous construisons chaque ligne comme un élément HTML <tr> et utilisons la boucle interne pour générer des éléments <td>, en prenant chaque produit comme contenu de la cellule.
Enfin, nous ajoutons ces éléments HTML à l'élément body pour l'intégrer au document.
Pour résumer, dans cet article, nous avons généré une simple table de multiplication en utilisant JavaScript. Qu'il s'agisse d'une sortie dans la console ou d'une génération dans une page Web, il s'agit d'un projet de bonne pratique. Parallèlement, nous avons également appris à utiliser des boucles imbriquées pour générer des structures de données complexes.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?

Expliquez le concept de chargement paresseux.

Comment fonctionne le currying en JavaScript et quels sont ses avantages?

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?

Comment fonctionne l'algorithme de réconciliation React?

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?

Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés?
