| <html>
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>Calcul d'une racine carrée à la main</title>
|
|
|
| <script>
|
| var appareilMobile;
|
|
|
| window.mobileAndTabletcheck = function() {
|
| var check = false;
|
| (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
|
| return check;
|
| };
|
|
|
| function ismobil () {
|
| return window.mobileAndTabletcheck();
|
| //~ alert ('Appareil mobile : ' + window.mobileAndTabletcheck() ); }
|
| }
|
|
|
| </script>
|
|
|
| <style>
|
| table.fixed { table-layout:fixed; }
|
| table.fixed td { overflow: hidden; }
|
|
|
| .c_dividende { font-size: 80px; }
|
|
|
| .comment { font-size: 40px; }
|
|
|
| body { background-color: lightgreen; }
|
|
|
| .td_bord_bas {
|
| font-size: 80px;
|
| border-bottom-style: solid;
|
| border-bottom-color: black;
|
| }
|
|
|
| .td_bord_gauche {
|
| font-size: 80px;
|
| border-left-style: solid;
|
| border-left-color: black;
|
| }
|
| </style>
|
|
|
| |
| |
|
|
| <script type="text/javascript">
|
| if ( ismobil() ) {
|
| appareilMobile = "oui";
|
| document.write('<link rel="stylesheet" type="text/css" href="style_mobile.css" />');
|
| }
|
| else {
|
| appareilMobile = "non";
|
| document.write('<link rel="stylesheet" type="text/css" href="style_normal.css" />');
|
| }
|
| </script>
|
|
|
| </head>
|
|
|
| <script>
|
|
|
| /*
|
| Tester son code en ligne :
|
| https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
|
| https://jsfiddle.net/
|
| http://www.csgnetwork.com/htmlcodetest.html
|
| http://ideone.com/
|
| http://jsbin.com/
|
| http://liveweave.com/
|
| */
|
| var num_etape;
|
| function etape_suivante() {
|
| num_etape++;
|
| if ( num_etape == etapes_tDividende_html.length ) num_etape = 0;
|
| maj_etape ();
|
| }
|
|
|
| function etape_precedente() {
|
| num_etape--;
|
| if ( num_etape < 0 ) num_etape = etapes_tDividende_html.length-1;
|
| maj_etape ();
|
| }
|
|
|
| function maj_etape () {
|
| $("dividende").innerHTML = etapes_tDividende_html[ num_etape ];
|
| $("diviseur").innerHTML = etapes_tDiviseur_html [ num_etape ];
|
| //~ $("quotient").innerHTML = etapes_tQuotient_html [ num_etape ];
|
| $("comment").innerHTML = etapes_tComment_html [ num_etape ];
|
| }
|
|
|
| function demarrer () {
|
| nombreDepart = parseInt(Math.random()*200000);
|
| traiter_le_nombre();
|
| }
|
|
|
| function entrer_nombre () { // demander et vérifier validité nombre de départ
|
| $("dividende").innerHTML = "";
|
| //~ nb_tests = [ 364, 195, 833, 9602, 7159, 8347, 87838, 42983, 712639, 546638 ];
|
| //~ nb_racines = [ 19, 13, 28, 97, 84, 91, 296, 207, 844, 739 ]; // racines vérifiées (sans partie décimale)
|
| nombreDepart = prompt("Entrez un nombre entre 0 et 1 000 000 000 svp : ", parseInt(Math.random()*1000000000) )
|
| // TODO : enlever les 0 en début de nombre
|
| if (nombreDepart>=0 && nombreDepart<=1000000000)
|
| { traiter_le_nombre() }
|
| else
|
| { alert ("nombre invalide") }
|
| }
|
|
|
| var tranches = [];
|
| function traiter_le_nombre () { // traiter le nombre fourni
|
| //~ $("gauche").innerHTML = nombreDepart;
|
| //~ $("status1").innerHTML =
|
| //~ "Recherche de la racine carrée de <strong>" + nombreDepart + "</strong>" +
|
| //~ "<br><br><i>Appareil mobile : " + appareilMobile + "</i>";
|
|
|
| tranches = decouper_en_tranches();
|
| num_etape = -1;
|
| c_est_parti(tranches);
|
| etape_suivante();
|
| }
|
|
|
| function decouper_en_tranches () { // découper nombre de départ en tranches de 2 caractères maximum à partir de la droite
|
| // t_tranches = tableau de tranches de 1 ou 2 chiffres
|
| // ex : 1,74,80 si nb de départ 17480
|
| // ex : 51,52,09 si nb de départ 515209
|
| var nb_chiffres = nombreDepart.toString().length;
|
| // nb tranches dépend du nombre de chiffres pair/impair de nombreDepart
|
| nb_tranches = nb_chiffres % 2 ? ( nb_chiffres + 1 ) / 2
|
| : nb_chiffres / 2;
|
| nbColonnes = nb_chiffres + 1;
|
| nbLignes = nb_tranches*2+1;
|
|
|
| nombreDepart = nombreDepart.toString();
|
|
|
| i = nb_chiffres;
|
| num_tranche = nb_tranches;
|
| nombre_avec_separateurs = "";
|
|
|
| while (i > 0) {
|
| if (i > 1) {
|
| cette_tranche = nombreDepart.slice(i-2, i).toString()
|
| }
|
| else {
|
| cette_tranche = nombreDepart.slice(0,1).toString()
|
| }
|
|
|
| nombre_avec_separateurs = cette_tranche.toString() + " " + nombre_avec_separateurs;
|
| i -= 2;
|
| num_tranche -= 1;
|
| }
|
| t_tranches = nombre_avec_separateurs.trim().split(" "); // le trim() permet d'enlever le dernier élément vide
|
| return t_tranches;
|
| }
|
|
|
| function carre (n) { return n*n; }
|
|
|
| function remplir_t_dividende () { // initialiser tableaux tDividende[ ] et tDividende_style[ ]
|
| tDividende = []; // nbColonnes = nombreDepart.length+1, pour le signe moins
|
| tDividende_style = []; // à utiliser pour construire la table html tDividende_html
|
| tDividende_td = []; // à utiliser pour construire la table html tDividende_html
|
| etapes_tDividende_html = [];
|
|
|
| tDiviseur = [];
|
| tDiviseur_style = [];
|
| tDiviseur_td = [];
|
| etapes_tDiviseur_html = []
|
|
|
| tQuotient = [];
|
| tQuotient_style = [];
|
| tQuotient_td = [];
|
| //~ etapes_tQuotient_html = []
|
|
|
| etapes_tComment_html = []
|
|
|
| for (var col = 0; col < nbColonnes; col++) { // colonne : de 0 à nbColonnes, on utilise col
|
| for (var lig = 0; lig < nbLignes; lig++) { // ligne : de 0 à nbLignes, on utilise lig
|
| tDivid_val ( lig, col, " " );
|
| tDivid_sty ( lig, col, "|" );
|
| if ( lig % 2 )
|
| { // tDividende_td = "<td class='td_bord_bas'>" + "|" + "</td>";
|
| tDivid_td ( lig, col, "<td class='td_bord_bas'>" + "|" + "</td>" );
|
| }
|
| else
|
| { // tDividende_td = "<td class='c_dividende'>" + "|" + "</td>";
|
| tDivid_td ( lig, col, "<td class='c_dividende'>" + "|" + "</td>" );
|
| }
|
| }
|
| }
|
| // placer le nombre de départ
|
| for (var col=1; col < nbColonnes; col++) { tDivid_val ( 0, col, nombreDepart.substr(col-1, 1) ); }
|
|
|
| // placer les signes moins en colonne 1
|
| for (var lig=1; lig < nbLignes; lig+=2) { tDivid_val ( lig, 0, "-" ); }
|
| }
|
|
|
| // écrire éléments des tableaux
|
| function tDivid_val ( ligne, colonne, valeur ) { tDividende[ colonne+ligne*nbColonnes ] = valeur; }
|
| function tDivid_sty ( ligne, colonne, valeur ) { tDividende_style[ colonne+ligne*nbColonnes ] = valeur; }
|
| function tDivid_td ( ligne, colonne, valeur ) { tDividende_td[ colonne+ligne*nbColonnes ] = valeur; }
|
|
|
| var nbColonnes = 0;
|
| var nbLignes = 0;
|
| var derTranche = 0;
|
| function f_tDividende_html () { // mémoriser tDividende_html pour chaque étape
|
| etapeN++;
|
|
|
| var t_tmp = "<table border=0 cellpadding=10 cellspacing=0>";
|
| var ligne;
|
| for (var lig = 0; lig < nbLignes; lig++) {
|
| ligne = "";
|
| for (var col = 0; col < nbColonnes; col++) {
|
| indice = col+lig*nbColonnes;
|
| cellule1 = tDividende_style[ indice ].split('|')[ 0 ] + tDividende[ indice ] + tDividende_style[ indice ].split('|')[ 1 ]; // formatage dans <style>
|
| cellule2 = tDividende_td[ indice ].split('|')[ 0 ] + cellule1 + tDividende_td[ indice ].split('|')[ 1 ]; // formatage dans <td>
|
| ligne += cellule2;
|
| }
|
| t_tmp += "<tr>" + ligne + "</tr>";
|
| }
|
| t_tmp += "</table>";
|
| etapes_tDividende_html[etapeN] = t_tmp;
|
|
|
| // mémorise les éléments dans leur table chronologique
|
| if ( intDiviseur == "0" )
|
| etapes_tDiviseur_html[etapeN] = "<table border=0 cellpadding=10 cellspacing=0>" + "<tr><td class='c_dividende'>" + "..." + "</td></tr>" + "</table>";
|
| else
|
| etapes_tDiviseur_html[etapeN] = "<table border=0 cellpadding=10 cellspacing=0>" + "<tr><td class='c_dividende'>" + intDiviseur + "</td></tr>" + "</table>";
|
|
|
| etapes_tComment_html[etapeN] = "<table border=0 cellpadding=10 cellspacing=0>" +
|
| "<tr>" +
|
| "<td class='comment'>" + strComment + "</td>" +
|
| "</tr>" + "</table>";
|
| }
|
|
|
| function f_tDividende_html_simple () { // mémoriser tDividende_html pour chaque étape
|
| etapeN++;
|
| etapes_tDividende_html[etapeN] = "";
|
| etapes_tDiviseur_html[etapeN] = "";
|
| etapes_tComment_html[etapeN] = "";
|
| }
|
|
|
|
|
| //~ var intSoustraire;
|
| function milliers (n) {
|
| var m = n.toString();
|
| var i = m.length - 1;
|
| var nbChiffres = 0;
|
| var cf = "";
|
| while (i >= 0 ) {
|
| nbChiffres += 1;
|
| cf = m.substr(i, 1) + cf;
|
| if ( nbChiffres == 3 ) {
|
| cf = " " + cf;
|
| nbChiffres = 0;
|
| }
|
| i--;
|
| }
|
| return cf;
|
| }
|
|
|
| function c_est_parti (tranches) { // itération sur les tranches de 1 ou 2 chiffres
|
| etapeN = -1;
|
|
|
| tra_nche = intReste = 0; // initialiser plusieurs variables sur une seule ligne
|
| //~ $("diviseur").innerHTML = "Recherche de la racine carrée de " + nombreDepart;
|
| //~ f_tdividende_html_simple ();
|
| //~ etapes_tDiviseur_html[etapeN] = "Recherche de la racine carrée de " + nombreDepart;
|
| intDiviseur = 0;
|
| strQuotient = strQuotientsimple = strComment = "";
|
|
|
| // initialiser tDividende []
|
| remplir_t_dividende();
|
|
|
| // le formater en table html
|
| strComment = "Laissez vous guider " +
|
| "pour découvrir la méthode manuelle " +
|
| "de calcul de la racine carrée.<br><br>Exemple : <b>" + milliers(nombreDepart) + "</b>";
|
| f_tDividende_html( );
|
|
|
| while ( tra_nche < tranches.length ) {
|
| mettre_tranche_etudiee_en_rouge( tra_nche );
|
|
|
| if ( tra_nche > 0 ) {
|
| strComment = "Abaisser " + tranches[ tra_nche ];
|
| abaisser_la_tranche( tra_nche );
|
| f_tDividende_html( );
|
| }
|
|
|
| intDividende = parseInt(tranches[ tra_nche ]) + (intReste * 100);
|
| detail_niveau_1 = tra_nche > 0 ? " (reste + nouvelle tranche : " + intReste*100 + " + " + tranches[ tra_nche ] + ")" : "";
|
| intRadical = intDiviseur * 2;
|
|
|
| if ( tra_nche == 0 ) {
|
| strComment = "On cherche le plus grand entier,<br>au carré, inférieur ou égal à <br><b>" + intDividende + "</b>";
|
| }
|
| else {
|
| strComment = "On cherche le plus grand entier<br>pour ... tel que :<br>" +
|
| "<b>" + intRadical + " ... x ... <= " + intDividende + "</b><br><br>" +
|
| "(" + intRadical + " est égal à " + intDiviseur + " multiplié par 2)<br><br>";
|
| }
|
| f_tDividende_html()
|
|
|
|
|
| x = 0
|
| while ( x < 10 ) { // recherche de x au diviseur
|
| if ( (intRadical*10+x)*x <= intDividende )
|
| { x = x + 1; }
|
| else { x = x - 1; break; }
|
| }
|
| if ( x == 10 ) x = 9; // pas terrible
|
|
|
| xGras = "<strong>" + x + "</strong>";
|
| if ( tra_nche == 0 ) {
|
| strComment = "Il s'agit de " + xGras + ", car " + xGras + " x " + xGras + " = " + (x*x) +
|
| "<br><br>(" + "<strong>" + (x+1) + "</strong>" + "<sup>2</sup> = " +
|
| carre (x+1) + " est supérieur à " + intDividende + ")";
|
| }
|
| else {
|
| strComment = "Il s'agit de " + xGras + ", car " + intRadical + xGras + " x " + xGras + " = " + (intRadical*10+x)*x +
|
| "<br><br>(" + intRadical*10 + "<b>" + (x+1) + "</b> x <b>" + (x+1) + "</b> = " +
|
| (intRadical*10+x+1)*(x+1) + " est supérieur à " + intDividende + ")";
|
| }
|
| f_tDividende_html()
|
|
|
| strComment = "On place " + xGras + " en haut à droite";
|
| strComment += "<br>";
|
| f_tDividende_html()
|
|
|
| intDiviseur = intDiviseur*10 + x;
|
|
|
| //~ strComment = "On place " + xGras + " en haut à droite. OK";
|
| strComment = "OK";
|
| strComment += "<br>";
|
| f_tDividende_html()
|
|
|
| strComment = "A gauche, on soustrait <b>" + (intRadical*10+x) + " x " + xGras + " = " + (intRadical*10+x)*x + "</b> de " + intDividende + "</b>";
|
| strComment += "<br>";
|
| f_tDividende_html()
|
|
|
| intSoustraire = (intRadical*10+x)*x;
|
| //~ strComment = "A gauche, on soustrait <b>" + (intRadical*10+x) + " x " + xGras + "= " + (intRadical*10+x)*x + "</b> de " + intDividende + "</b>. OK";
|
| strComment = "OK";
|
| strComment += "<br>";
|
| placer_soustraire_dans_tDividende ( tra_nche );
|
| f_tDividende_html()
|
|
|
| intReste = intDividende - intSoustraire;
|
| strComment = "Faire la soustraction : " + intDividende + " - " + intSoustraire + " = " + intReste;
|
| strComment += "<br>";
|
| placer_reste_dans_tDividende ( tra_nche );
|
| f_tDividende_html()
|
|
|
| tra_nche++;
|
| }
|
|
|
| //~ (intDiviseur+1) + "<sup>2</sup> = " + ( carre ( intDiviseur+1 ) );
|
| // vérification
|
| strComment = "Vérification :<br>" +
|
| intDiviseur + "<sup>2</sup> = " + milliers( carre( intDiviseur ) ) + "<br>" +
|
| "nombre de départ = " + nombreDepart + "<br>" +
|
| (intDiviseur+1) + "<sup>2</sup> = " + milliers( carre( intDiviseur+1 ) ) + "<br>";
|
|
|
| f_tDividende_html();
|
| }
|
|
|
| function $(id) { return document.getElementById(id); }
|
|
|
| function placer_soustraire_dans_tDividende (tranche) {
|
| var ligne = 1 + tranche * 2;
|
| // définir la ligne à modifier selon tranche
|
| var nb_chiffres_soustraire = intSoustraire.toString().length;
|
| var indice_colonne_unite = nbColonnes - 1 - (nb_tranches-tranche-1)*2;
|
|
|
| // on inscrit en partant de la droite pour remonter vers la gauche
|
| var n = 0;
|
| for (var i = nb_chiffres_soustraire -1; i >= 0; i--) {
|
| tDividende[ n+indice_colonne_unite + ligne * nbColonnes ] = intSoustraire.toString().substr(i, 1);
|
| n -= 1;
|
| }
|
| }
|
|
|
| function placer_reste_dans_tDividende (tranche) {
|
| var ligne = 2 + tranche * 2;
|
| // définir la ligne à modifier selon tranche
|
| var nb_chiffres_reste = intReste.toString().length;
|
| var indice_colonne_unite = nbColonnes - 1 - (nb_tranches-tranche-1)*2;
|
|
|
| // on inscrit en partant de la droite pour remonter vers la gauche
|
| var n = 0;
|
| for (var i = nb_chiffres_reste -1; i >= 0; i--) {
|
| tDividende[ n+indice_colonne_unite + ligne * nbColonnes ] = intReste.toString().substr(i, 1);
|
| n -= 1;
|
| }
|
| }
|
|
|
| function mettre_tranche_etudiee_en_rouge (tranche) {
|
| mettre_tranche_precedente_en_noir (tranche-1)
|
| var ligne = 0;
|
| var nb_chiffres_a_rougir = tranches[tranche].toString().length;
|
| var indice_colonne_unite = nbColonnes - 1 - (nb_tranches-tranche-1)*2;
|
| // on modifie tDividende pour appliquer un style rouge au contenu de la cellule
|
| var n = 0;
|
| var valeur;
|
| for (var i = nb_chiffres_a_rougir -1; i >= 0; i--) {
|
| tDivid_sty ( ligne, n+indice_colonne_unite, "<div style='color: red'>" + "|" + "</div>" );
|
| n -= 1;
|
| }
|
| }
|
|
|
| function abaisser_la_tranche (tranche) { // on place 62 sur la ligne 2
|
| var ligne = tranche * 2;
|
| var ligne_0 = n = 0;
|
| var nb_chiffres = tranches[tranche].toString().length;
|
| var indice_colonne_unite = nbColonnes - 1 - (nb_tranches-tranche-1)*2;
|
| // on modifie tDividende pour appliquer un style rouge au contenu de la cellule
|
| var valeur, col;
|
| for (var i = nb_chiffres -1; i >= 0; i--) {
|
| col = n+indice_colonne_unite;
|
| tDividende[ col + ligne * nbColonnes ] = tDividende[ col + ligne_0 * nbColonnes ];
|
| n -= 1;
|
| }
|
| }
|
|
|
| function mettre_tranche_precedente_en_noir (tranche) {
|
| if ( tranche >= 0 ) {
|
| var ligne = n = 0;
|
| var nb_chiffres = tranches[tranche].toString().length;
|
| var icu = nbColonnes - 1 - (nb_tranches-tranche-1)*2; // icu : indice colonne unité
|
| for (var i = nb_chiffres -1; i >= 0; i--) {
|
| tDivid_sty ( ligne, n+icu, "|" );
|
| n -= 1;
|
| }
|
| }
|
| }
|
|
|
| </script>
|
|
|
| <body>
|
|
|
| <center>
|
|
|
| <table border=1 cellpadding=15 cellspacing=30>
|
| <tr>
|
| <td valign='top' align='right' width='400px' rowspan=3> <div id="dividende"><i>dividende</i></div> </td>
|
| <td align='center' class="td_bord_gauche" valign='top' width='300px'><div id="diviseur"><i>diviseur</i></div></td>
|
| </tr>
|
| <tr>
|
| <td valign='top' align='center' width='300px'><div id="comment"><i>comment</i></div></td>
|
| </tr>
|
| <tr>
|
| <td valign='bottom' align='center' width='300px'><img onclick='etape_suivante();' src='http://gangand.net/img/racine_carree.svg' width='150'></td>
|
| </tr>
|
| </table>
|
| <button style="height:200px;width:200px" onclick='entrer_nombre()'><span style="font-size: 35px;">Nouveau nombre</span></button>
|
|
|
| <script>
|
| $("dividende").innerHTML = "";
|
| $("diviseur").innerHTML = "";
|
| $("comment").innerHTML = "";
|
| demarrer();
|
| </script>
|
| </body>
|
| </html>
|
| |