division

Une grille.

On dispose d'une grille 16 sur 16, on numérote les cellules comme ci-dessous.

0	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	101	102	103	104	105	106	107	108	109	110	111
112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143
144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159
160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175
176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191
192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207
208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223
224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239
240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255

On numérote les lignes et les colonnes de 0 à 15.

	col 0	col 1	col 2	col 3	col 4	col 5	col 6	col 7	col 8	col 9	col10	col11	col12	col13	col14	col15
lig0	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
lig1	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31
lig2	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47
lig3	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63
lig4	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79
lig5	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95
lig6	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111
lig7	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
lig8	128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143
lig9	144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159
lig10	160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175
lig11	176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191
lig12	192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207
lig13	208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223
lig14	224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239
lig15	240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255

lig et col étant les numéros de ligne et de colonne d'une cellule, exprimer le numéro porté dans la cellule en fonction de lig et col.
On connait le numéro d'une cellule. Exprimer le numéro de ligne en fonction de ce numéro de cellule. Idem avec le numéro de colonne.

(numLigne, numColonne) → numCellule

On a : numéro de cellule = 16 * numéro de ligne + numéro de colonne.

Le script suivant de création de la grille illustre ce lien :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> floor </title>
        <style>
		 table{border-collapse: collapse;}
         td{border : 2px solid black; padding : 3px;}
		</style>
    </head>
    <body>
		
		<!-- élément table qui affichera la grille -->
		<table id="grille"></table>
		
		
        <script>
        /* script produisant la grille et affichant la numérotation */
         
        var contenu = ""; // chaîne dans laquelle on construit le code html de la table
        
        for(var ligne = 0; ligne < 16; ligne++)
        {
			contenu += "<tr>";// ouverture d'une ligne
			for(var colonne = 0; colonne < 16; colonne++)
			{
				contenu += "<td>" + (16*ligne + colonne) + "</td>";// une cellule
			}
			contenu += "</tr>";// fermeture de la ligne
		}
		document.getElementById("grille").innerHTML = contenu;// inscription du code html dans la table
        </script>
    </body>
</html>

numCellule → (numLigne, numColonne)

Comme les numéros de colonne sont entre 0 et 15 (donc inférieurs strictement à 16), la relation "numéro de cellule = 16 * numéro de ligne + numéro de colonne" montre que le numéro de ligne est le quotient de la division du numéro de cellule par 16 et le numéro de colonne le reste de la division du numéro de cellule par 16.

Vous pouvez tester ci-dessous que ces liens sont corrects.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> floor </title>
        <style>
		 table{border-collapse: collapse;}
         td{border : 2px solid black; padding : 3px;}
		</style>
    </head>
    <body>
		
		
		<label for="numeroDeCellule">Entrez un entier entre 0 et 255 :</label>
		<input type="number" min="0" max="255" value="0"  id="numeroDeCellule"/>
		
		<label for="validez">Puis cliquez :</label>
		<button onclick="afficher()" id="validez">Clic !</button>
		
		<!-- élément table qui affichera la grille -->
		<table id="grille"></table>
		
		
        <script>
        /* script produisant la grille et affichant la numérotation */
        
        function numeroColonne(numCellule){
			return numCellule % 16;
		}
		
		function numeroLigne(numCellule){
			return Math.floor(numCellule/16);
		}
         
        var contenu = ""; // chaîne dans laquelle on construit le code html de la table
        
        for(var ligne = 0; ligne < 16; ligne++)
        {
			contenu += "<tr>";// ouverture d'une ligne
			for(var colonne = 0; colonne < 16; colonne++)
			{
				contenu += '<td id="cellule' + (16*ligne + colonne) + '"></td>';// une cellule
			}
			contenu += "</tr>";// fermeture de la ligne
		}
		document.getElementById("grille").innerHTML = contenu;// inscription du code html dans la table
		
		function afficher(){
			var numCellule = document.getElementById("numeroDeCellule").value;
			var numLigne = numeroLigne(numCellule);
			var numColonne = numeroColonne(numCellule);
			chaine = '';
			chaine += 'Cell ' + numCellule + '. ';
			chaine += 'Lig ' + numLigne + '. ';
			chaine += 'Col ' + numColonne + '. ';
			document.getElementById('cellule'+numCellule).innerHTML = chaine;
		}
        </script>
    </body>
</html>

Grille de Sudoku .

Numérotation des cellules

Dans l'objectif de travailler sur un jeu de Sudoku, on numérote les cellules de la grille de gauche à droite et de haut en bas de 0 à 80.

L'affichage du petit programme suivant permet de visualiser cette numérotation :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> floor </title>
        <style>
		 table{border-collapse: collapse;}
         td{border : 2px solid black; padding : 3px;}
		</style>
    </head>
    <body>
		
		<!-- élément table qui affichera la grille -->
		<table id="grille"></table>
		
		
        <script>
        /* script produisant la grille et affichant la numérotation */
         
        var contenu = ""; // chaîne dans laquelle on construit le code html de la table
        
        for(var ligne = 0; ligne < 9; ligne++)
        {
			contenu += "<tr>";// ouverture d'une ligne
			for(var colonne = 0; colonne < 9; colonne++)
			{
				contenu += "<td>" + (9*ligne + colonne) + "</td>";// une cellule
			}
			contenu += "</tr>";// fermeture de la ligne
		}
		document.getElementById("grille").innerHTML = contenu;// inscription du code html dans la table
        </script>
    </body>
</html>

Questions

i et j étant des numéros de cellules, quelle sera, dans un programme javascript, l'utilité du test
i%9 == j%9 ?
i et j étant des numéros de cellules, quelle sera, dans un programme javascript, l'utilité du test
Math.floor(i/9) == Math.floor(j/9) ?
i et j étant des numéros de cellules, quelle sera, dans un programme python, l'utilité du test
3*Math.floor(i/27) + Math.floor( (i%9)/3 ) == 3* Math.floor(j/27) + Math.floor( (j%9)/3 ) ?

reste de la division de i par 9 == reste de la division de j par 9

Ce test vaut True si et seulement si les deux cellules sont dans la même colonne.

quotient de la division de i par 9 == quotient de la division de j par 9

Ce test vaut True si et seulement si les deux cellules sont dans la même ligne.

3* (quotient de i par 27) + quotient de i%9 par 3

Ce test vaut True si et seulement si les deux cellules sont dans le même "carré". Carré est ici pris au sens d'une zone carrée d'un sudoku. On met en évidence ci-dessous les 9 carrés et la numérotation utilisée dans le test :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> floor </title>
        <style>
		 table{border-collapse: collapse;}
         td{border : 2px solid black; padding : 3px;}
		</style>
    </head>
    <body>
		
		<!-- élément table qui affichera la grille -->
		<table id="grille"></table>
		
		
        <script>
        /* script produisant la grille et affichant la numérotation */
        
        
        function quotient(dividende, diviseur){
			return Math.floor(dividende/diviseur);
		}
		
		function reste(dividende, diviseur){
			return dividende % diviseur;
		}
		
        function zone(numeroCellule){
				return 3*quotient(numeroCellule,27)+ quotient(reste(numeroCellule,9),3);
		}
         
        var contenu = ""; // chaîne dans laquelle on construit le code html de la table
        
        for(var ligne = 0; ligne < 9; ligne++)
        {
			contenu += "<tr>";// ouverture d'une ligne
			for(var colonne = 0; colonne < 9; colonne++)
			{
				var numZone = zone(9*ligne + colonne) ;
				var couleur = "rgb(" + (Math.floor(255*numZone/8)) + "," + (255- Math.floor(255*numZone/8)) + ", 200)";
				 
				contenu += '<td style="background-color:' + couleur + '">' + numZone + '</td>';// une cellule
			}
			contenu += "</tr>";// fermeture de la ligne
		}
		document.getElementById("grille").innerHTML = contenu;// inscription du code html dans la table
        </script>
    </body>
</html>

Remarque : pour modifier les couleurs automatiquement, on a appliqué les formules de cette page permettant de transformer une série de valeurs de l'intervalle [0;8] en une série de valeurs de l'intervalle [0;255].

0	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	101	102	103	104	105	106	107	108	109	110	111
112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143
144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159
160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175
176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191
192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207
208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223
224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239
240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255

0	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	101	102	103	104	105	106	107	108	109	110	111
112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143
144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159
160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175
176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191
192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207
208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223
224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239
240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255

0	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	101	102	103	104	105	106	107	108	109	110	111
112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
128	129	130	131	132	133	134	135	136	137	138	139	140	141	142	143
144	145	146	147	148	149	150	151	152	153	154	155	156	157	158	159
160	161	162	163	164	165	166	167	168	169	170	171	172	173	174	175
176	177	178	179	180	181	182	183	184	185	186	187	188	189	190	191
192	193	194	195	196	197	198	199	200	201	202	203	204	205	206	207
208	209	210	211	212	213	214	215	216	217	218	219	220	221	222	223
224	225	226	227	228	229	230	231	232	233	234	235	236	237	238	239
240	241	242	243	244	245	246	247	248	249	250	251	252	253	254	255