Обучение школьников умножать 2 натуральных числа

@Besouro · Регистрация: 17.09.2011

Author24 — интернет-сервис помощи студентам

Задание звучит следующим образом: Напишите программу обучения школьников выполнять умножение двух натуральных чисел столбиком. С клавиатуры вводится два числа, после чего необходимо вывести на экран решение задачи умножения столбиков этих чисел, после чего вывести на экран пошаговое пояснение, как производились действия.

Программа написана, но никак не могу догнать как сделать сложение столбиком после умножения
Например, пуская пользователь введет числа 1234 и 5678 . Вот как ему из результирующей таблицы, объяснить как складывать. Пытался написать функциюю slosenie , но не получилось. Надеюсь, что поможете дописать =)

P.S эта первая моя программа на JS и если укажите на ошибки, или оптимизацию было бы здорово. Но и к синтаксису если будут придирки буду благодарен, кроме того, что большинство переменных глобальные

Javascript

  /*Функция позволяет ввести 2 натуральных числа, выполняет проверку на корректность ввода данных, 
    а также сортирует числа в порядке убывания 
    Выводит 4 ГЛОБАЛЬНЫЕ переменные под названиями 
                first,second (это отсортированные числа)
              и prevfirst,prevsecond (это числа в том порядке, которые их ввел пользователь    )*/
  function vvod ()
  {
  // alert('Введите 2 натуральных числа');
   var flag=true
 while (flag==true)
   {
     //first=1234;
     first=prompt('Введите первое число');
      first=+first;
      flag=validation(first);
    } 
    flag=true;
  while (flag==true)
    {
      //second=4567;
      second=prompt('Введите второе число');
      second=+second;
      flag=validation(second);
    }
   prevfirst=first;
   prevsecond=second;
   var y=Math.max(first,second);
   var x=Math.min(first,second);
   first=y;
   second=x;
   }
   /* Функция пишет ошибку, если было введено не натуральное число и на выходе выдает true , иначе пишет false
     n - натуральное число */       
  function validation (n)
  {
  if (isNaN(n)) {
               alert('Вы ввели букву, а не число. Введите это число заново');
               return(isNaN(n));
               }
               else if (n<0)
               {
                alert('Вы ввели отрицательное число, что запрещенно условием натурального числа. Введите это число заново');
                return true
               }
               else
               {
               return(isNaN(n)); 
               }
  }
  /* Функция которая льет воду, а именно пишет о том, что нужно умножать 2 натуральных числа и blah-blah-blah */
  function voda()
  {
    document.write('Будем учиться перемножать два натуральных числа <br>');    
    document.write(prevfirst+'x'+prevsecond+'<br>');  
    document.write('При умножении столбиком большее число ставим в верхнюю часть выражения, а меньшее в нижнюю<br>');
    document.write('Среди данных чисел большее является число '+first+', а меньшее '+second+'<br>');
    document.write('Следовательно получим выражение такого вида<br>');
  }  
  /* Выводит первую табличку, где нарисованно FIRST x SECOND */
   function table()
  {
    document.write('<table width="20px" border="0" cellpadding="0" cellspacing="0">');
    document.write(' <tr align="right">');
    document.write('   <td rowspan="2" align="right" cellpadding="0">X&nbsp;</td>');
    document.write('   <td align="right">'+first+'</td>');
    document.write(' </tr>');
    document.write(' <tr>');
    document.write('    <td align="right">'+second+'</td>');
    document.write(' </tr>  ');
    document.write('</table><br>');
  }
  /* Разбивает натуральное число, на массив цифр 
     n - натуральное число*/
  function podmass(n)
  { for (arr = []; n;) 
    {
      arr.unshift(n % 10);
      n = (n - n % 10) / 10;
    }
  return arr;
  }    
   /* Функция выполняет перемножение двух натуральных чисел в столбик, но не складывает их*/
 function peremnos()
 {
   var w // nsecond
   w=nsecond;
   var indexmass=0;// индекс массива результата
 while (w>=0)
 { var q  // nfirst
    q=nfirst;
   while (q>=0)
    {
 
     var buf=secondmas[w]*firstmas[q--]+ostat; //буфер 
        if (ostat>0)
       {
         document.write('Поскольку мы имеем остаток' +ostat+' ,то мы его складываем с результатом следующего умножения');
       } 
     document.write('получим результат умножения '+buf+' в результат пишем цифру '+(buf%10)+' а в остаток запоминаем '+ (ostat=Math.floor((buf/10)))+'<br>');
     if (q>=0) {document.write('Далее умножаем следующую цифру ');}
     ostat=Math.floor(buf/10)
    }
 
   rez[indexmass++]=secondmas[w]*first;
   if (w!=0){
              document.write('Результат данных перемножений должен выглядеть следующим образом');
              table2(w,rez);
              document.write('Поскольку мы перемножили цифру '+secondmas[w--]+' на число '+first+' мы должны начать перемножать следующую цифру нижней части на все число');
              document.write('<br> Важно не забыть записывать результат следующего умножения на 1 разряд влево');
            }
            else {
                   document.write(' Мы закончили умножать 2 натуральных числа, теперь приступим к их сложению');
                   table2(w--,rez);
                   
                 }
  }
  
} 
 
   function table2(w,rez)
   {  
         var num=0;
    document.write(' Мы должны были получить результать столбика в виде') 
    document.write('<table width="20px" border="0" cellpadding="0" cellspacing="0">');
    document.write(' <tr align="right">');
    document.write('   <td rowspan="2" align="right" cellpadding="0">X&nbsp;</td>');
    document.write('   <td align="right">'+first+'&nbsp;</td>');
    document.write(' </tr>');
    document.write(' <tr>');
    document.write('    <td class="botline" align="right">'+second+'&nbsp;</td>');
    document.write(' </tr>  ');
    for (i=nsecond;i!=w-1;i--)
      {
        document.write('<tr>');
          document.write('<td>+</td>');
          document.write(' <td align="right">'+rez[num++]);
          for (j=i;j!=nsecond+1;j++){document.write('&nbsp;&nbsp;');} 
          document.write('</td>');
        document.write('</tr>');
      } 
      if (flag==true) {document.write('<tr><td></td><td class="topline" align="right">'+resultat+'&nbsp;&nbsp;</td></tr>');}
      document.write('</table><br>');
   }
   
   //Функция которая объясняет как складывать перемноженные числа
  function slosenie()
  {
   var podmassrez = Array() // подмассив каждого числа, которое нужно сложить
   document.write('Итак, теперь мы будем складывать числа столбиком<br>');
   document.write('Для этого мы будем складывать цифры начиная с правого столбца (по вертикали) и заканчивая левым стобцом<br>');
   flag=true;
 for (i=0;i<=kolvo;i++)
   {
     podmassrez[i]=podmass(rez[i])
    alert('podmassrez['+i+']='+podmassrez[i]);
   }    
   var dlinarezultat ;// Длина результата перемножения
   dlinarezultat=resultatmas.length-1;
   alert(dlinarezultat);
   document.write('У нас имеется '+(kolvo+1)+'строк и мы должны их сложить сверхну вниз, начиная правого элемента ' +(podmassrez[0][(podmassrez[0].length-1)])+'<br>');
   document.write('Поскольку ниже цифры '+(podmassrez[0][(podmassrez[0].length-1)])+' цифр нету, то мы переходим к второй цифре справа');
var ostatbuf
 for (i=0;i<=dlinarezultat;i++)
   {
      
 
 
   
   }
  
 
 
 
  //document.write('В данном примере я рассчитываю, что вы уже прошли предыдущие классы и умеете складывать числа столбиком<br>');
   //document.write('Результа сложения и конечный ответ произведения должен выглядить следующим образом');
   table2(0,rez);
 
  }
  
  var rez = Array()
  var first,second //Числа 1 и 2 отсортированные
  var firstmas,secondmas; // Число 1 и число 2 разбитые на подмассивы
  var rezultat  // результат произведения числа 1 на число 2
  var rezultatmas // Результат разбитый на подмассивы
  var nfirst,nsecond // Длина firstmas и secondmas
  var ostat=0 // остаток, обнуляемое значение
  var kolvo // кол-во элементов в результате
  var prevfirst,prevsecond // Числа в том порядке, в которые их ввел пользователь (не отсортированные)
  vvod(); 
  voda();
  firstmas=podmass(first);
  secondmas=podmass(second);
  table();
  resultat=first*second;
  resultatmas=podmass(resultat);
  document.write('Умножать будем следующим образом : Каждую цифру снизу, на все число сверху<br>');
  nfirst=firstmas.length-1;
  nsecond=secondmas.length-1;
  document.write('Теперь мы начнем умножать по цифрам, а именно вначале цифру из нижнего столбца '+secondmas[nsecond]+' на цифру из верхнего '+firstmas[nfirst]+'<br>');
  flag=false;
  peremnos();
  kolvo=rez.length-1;
  //slosenie();
  flag=true;
  table2(0,rez);

@newJS · 14.11.2012, 10:59

Сообщение от Besouro

P.S эта первая моя программа на JS и если укажите на ошибки, или оптимизацию было бы здорово. Но и к синтаксису если будут придирки буду благодарен, кроме того, что большинство переменных глобальные

Использование prompt, document.write не есть хорошо. Первый заменяется на стандартное поле, второй дивом в html. Ввод с клавиатуры нужно проверять по полной, иначе пользователь ошибившись получит сообщение браузера об ошибке которое ему как Филькина грамота, он плюнет да уйдёт.
А остальное смотреть надо.

Добавлено через 4 часа 7 минут
для начала начнем с конца, это визуализация конечного результата, теперь ввод прикрутить надо

HTML5

</div>
<div style="text-align:center; margin:111px 0 0 0;">
<input type="text" value="1234" name="one" id="one">
<input type="text" value="567890" name="two" id="two">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr><td rowspan="2"><div id="token">×</div>
</td><td><div id="oneNum">0</div>
</td></tr><tr><td><div id="twoNum">0</div>
</td></tr><tr><td colspan="2"><div id="rezultat">0</div>
</td></tr></table>
 
</div>

CSS

1 2	#rezultat, #token, #oneNum, #twoNum {text-align:right; font-family:'Courier New', monospace;} #rezultat hr {margin:1px -7px; padding:0;}

Javascript

(function(){
var d;
d=document;
 
onload=function(){
start();
 };
 
function start(){
var n, n1, n2, s, s1, s2, w1, w2, k;
s1='<div>';
s2='</div>';
s3='<div style="margin-right:';
s4='px">';
n=0;
w1=d.getElementById("token").offsetWidth;//ширина одной цифры
n1=d.getElementById("one").value;
n2=d.getElementById("two").value;
d.getElementById("oneNum").innerHTML=n1;
d.getElementById("twoNum").innerHTML=n2;
k=n2.length;//сколько цифр в множителе
w2=w1*(k-1);
s="";
while(k--){s=s+s3+(w2-w1*k)+s4+(n1*n2.charAt(k))+s2;};
d.getElementById("rezultat").innerHTML='<hr>'+s+s1+'<hr>'+(n1*n2)+s2;
 
 };
 
 
 })();

@Besouro · 14.11.2012, 17:07 **[ТС]**

Спасибо большое, тут я немного не прав т.к в задании указанно, что использовать для ввода информации команду prompt, а для вывода document.write (Извиняюсь, что не сказал об этом). Проверка на некорректные значения у меня в коде есть. А еще, если честно совсем не понял реализацию твоего кода т.к не умею работать с объектом element и еще кучей всего. Если бы ты продолжил мой код и в него бы добавил функцию сложения, после перемножения, было бы .А вообще большое спасибо за труды.
В задании нужно именно объяснить школьнику как производились действия по шагам

@newJS · 14.11.2012, 21:07

Сообщение от Besouro

Если бы ты продолжил мой код и в него бы добавил функцию сложения

нееее, у тебя 7кил непонятно чего, проще и быстрее с нуля написать

Сообщение от Besouro

использовать для ввода информации команду prompt, а для вывода document.write

этим пользовались когда больше ни чего не было, много лет назад, сейчас этим пользуются только те кто сам учится по старым книгам, кто ж назад откатывается

Сообщение от Besouro

если честно совсем не понял реализацию твоего кода

есть коменты, а как рассказать больше не знаю

тут вроде все работает, пользуйся

HTML5

<div id="multiply">
<input type="text" value="469302" name="one" id="one">
<input type="text" value="123456789" name="two" id="two">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr><td rowspan="2"><span id="token">×</span>
</td><td><div id="oneNum">0</div>
</td></tr><tr><td><div id="twoNum">0</div>
</td></tr><tr><td colspan="2"><div id="rezultat"><hr>0</div>
</td></tr></table>
</div>

CSS

1
2
3

#multiply {text-align:center; margin:11px 0 0 0;}
#rezultat, #token, #oneNum, #twoNum {text-align:right; font-family:'Courier New', monospace; font-size:21px;}
#rezultat hr {margin:1px -9px; padding:0;}

Javascript

(function(){
var d, Q;
Q={};
d=document;
 
onload=function(){
Q.oneV=d.getElementById("one");
Q.twoV=d.getElementById("two");
Q.oneN=d.getElementById("oneNum");
Q.twoN=d.getElementById("twoNum");
Q.rezN=d.getElementById("rezultat");
Q.oneV.onkeyup=keyNum;
Q.twoV.onkeyup=keyNum;
Q.oneV.onclick=function(){Q.oneV.select();};
Q.twoV.onclick=function(){Q.twoV.select();};
start();
 };
 
function start(){
var v1, v2, s, s1, s2, s3, w1, w2, k;
s1='<div style="margin-right:';
s2='px">';
s3='</div>';
w1=d.getElementById("token").offsetWidth;//ширина одной цифры
v1=Q.oneV.value;
v2=Q.twoV.value;
Q.oneN.innerHTML=v1;
Q.twoN.innerHTML=v2;
k=v2.length;//сколько цифр в множителе
w2=w1*(k-1);//ширина всего множителя
s="";
while(k--){s+=s1+(w2-w1*k)+s2+(v1*v2.charAt(k))+s3;};
Q.rezN.innerHTML='<hr>'+s+'<hr><div>'+(v1*v2)+s3;
 
 };
 
function keyNum(){
var v1, v2, s;
s='Перемножать можно только цифры';
v1=Q.oneV.value;
v2=Q.twoV.value;
if(v1==""||v2==""||v1==0||v2==0){clear(); return;};
if(/[^0-9]/.test(v1)){alert(s); Q.oneV.value=""; clear(); return;};
if(/[^0-9]/.test(v2)){alert(s); Q.twoV.value=""; clear(); return;};
start();
 
 };
 
function clear(){
Q.oneN.innerHTML=0;
Q.twoN.innerHTML=0;
Q.rezN.innerHTML='<hr>'+0;
 };
 
 })();

завтра доделаю визуализацию столбиков, чтобы было проще сложение делать

@newJS · 16.11.2012, 07:04

вот обещанная полосатость, цвета нужно подбирать под себя

HTML5

<div id="multiply">
<input type="text" value="469302" name="one" id="one">
<input type="text" value="123456789" name="two" id="two">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr><td rowspan="2"><span id="token">×</span>
</td><td><div id="oneNum">0</div>
</td></tr><tr><td><div id="twoNum">0</div>
</td></tr><tr><td colspan="2"><div id="rezultat"><hr>0</div>
</td></tr></table>
</div>

CSS

#multiply {text-align:center; margin:11px 0 0 0;}
#rezultat, #token, #oneNum, #twoNum {text-align:right; font-family:'Courier New', monospace; font-size:21px;}
#rezultat hr {margin:1px -9px; padding:0;}
#rezultat .c0 {background:blanchedalmond;}
#rezultat .c1 {background:beige;}
#token {color:red; font-weight:bold;}

Javascript

(function(){
var d, Q;
Q={};
d=document;
 
onload=function(){
Q.oneV=d.getElementById("one");
Q.twoV=d.getElementById("two");
Q.oneN=d.getElementById("oneNum");
Q.twoN=d.getElementById("twoNum");
Q.rezN=d.getElementById("rezultat");
Q.oneV.onkeyup=keyNum;//нажали клавишу, идём проверять
Q.twoV.onkeyup=keyNum;
Q.oneV.onclick=function(){Q.oneV.select();};//выделение по клику в поле
Q.twoV.onclick=function(){Q.twoV.select();};
start();
 };
 
function start(){
var v1, v2, s, s1, s2, s3, s4, w1, w2, k, j, m, a;
s1='<div>';
s2='</div>';
s3='<b class="c';
s4='</b>';
v1=Q.oneV.value;
v2=Q.twoV.value;
Q.oneN.innerHTML=v1;
Q.twoN.innerHTML=v2;
k=w2=v2.length;//сколько цифр в множителе
s="";
while(k--){
w1=w2-k-1;
m=[];
while(w1--){m[w1]='&nbsp;';};//сколько пробелов после числа
a=(v1*v2.charAt(k))+"";//число
a=a.split("").concat(m);//добавляем пробелы в конец числа
w1=(v1*v2+"").length-a.length;
m=[];
while(w1--){m[w1]='&nbsp;';};//сколько пробелов перед числом
a=m.concat(a).reverse();//добавляем пробелы перед числом
j=a.length;
//заворачиваем каждый символ в тег со своим классом
while(j--){a[j]=s3+(j%2)+'">'+a[j]+s4;};
s+=s1+(a.reverse().join(""))+s2;};//собираем промежуточные результаты
//раскрашиваем результат
m=(v1*v2+"").split("").reverse();
j=m.length;
while(j--){m[j]=s3+(j%2)+'">'+m[j]+s4;};
Q.rezN.innerHTML='<hr>'+s+'<hr>'+s1+m.reverse().join("")+s2;
//или результат без ракраски
//Q.rezN.innerHTML='<hr>'+s+'<hr>'+s1+(v1*v2)+s2;//выводим готовый результат
 
 };
 
function keyNum(){//проверяем каждый введёный символ на вшивость
var v1, v2, s;
s='Перемножать можно только цифры';
v1=Q.oneV.value;
v2=Q.twoV.value;
if(v1==""||v2==""||v1==0||v2==0){clear(); return;};
if(/[^0-9]/.test(v1)){alert(s); Q.oneV.value=""; clear(); return;};
if(/[^0-9]/.test(v2)){alert(s); Q.twoV.value=""; clear(); return;};
start();//если все цифры, идём пересчитывать и выводить
 
 };
 
function clear(){//очистка
Q.oneN.innerHTML=0;
Q.twoN.innerHTML=0;
Q.rezN.innerHTML='<hr>'+0;
 };
 
 })();

@Besouro · 08.12.2012, 14:15 **[ТС]**

После того как сделал все сам, посмотрел твою реализацию, оно в задание не в ходило ( и сам бы я не смог объяснить в любом случае), но она намного лучше. Посколько только что прошли ООП буду сидеть и разбираться в твоем коде (для развития), а вообще очень клево. СПАСИБО

@GuardCat · 08.12.2012, 17:54

Сообщение от newJS

этим пользовались когда больше ни чего не было, много лет назад, сейчас этим пользуются только те кто сам учится по старым книгам, кто ж назад откатывается

Не по теме:

Верно, если говорить о выводе информации после загрузки страницы. Но, для вывода информации в процессе загрузки, document.write по-прежнему остается самым быстрым способом с низкими накладными расходами. В данном случае, конечно, этот способ применяется не в тему.

@newJS · 11.12.2012, 08:04

Не знаю насчет скорости, но 17я лиса ругается и посылает сюда, а кажется на сайте яваскрипт есть статья почему не стоит использовать document.write().

Предупреждение: Несбалансированное дерево было написано с использованием document.write(), что привело к повторному парсингу данных из сети. Для получения более подробной информации прочтите

@GuardCat · 11.12.2012, 08:45

newJS, так и стоило бы почитать по ссылке.

Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK.
Don't write an unfinished token. <script>document.write("<div></div");</script> is bad.
Don't finish your writing with a carriage return. <script>document.write("Hello World!\r");</script> is bad. <script>document.write("Hello World!\n");</script> is OK.
Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <script>document.write("<div></div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced.

@newJS · 11.12.2012, 09:56

Сообщение от GuardCat

ак и стоило бы почитать по ссылке.

Не раньше чем это будет по русски.

@GuardCat · 11.12.2012, 19:07

А чего тут переводить? Особенно в строчках

Bad — плохой, Ok — хороший :-)

@Besouro 0 / 0 / 0 Регистрация: 17.09.2011 Сообщений: 31
	14.11.2012, 17:07 [ТС]	3
	Спасибо большое, тут я немного не прав т.к в задании указанно, что использовать для ввода информации команду prompt, а для вывода document.write (Извиняюсь, что не сказал об этом). Проверка на некорректные значения у меня в коде есть. А еще, если честно совсем не понял реализацию твоего кода т.к не умею работать с объектом element и еще кучей всего. Если бы ты продолжил мой код и в него бы добавил функцию сложения, после перемножения, было бы .А вообще большое спасибо за труды. В задании нужно именно объяснить школьнику как производились действия по шагам 0

@Besouro 0 / 0 / 0 Регистрация: 17.09.2011 Сообщений: 31
	08.12.2012, 14:15 [ТС]	6
	После того как сделал все сам, посмотрел твою реализацию, оно в задание не в ходило ( и сам бы я не смог объяснить в любом случае), но она намного лучше. Посколько только что прошли ООП буду сидеть и разбираться в твоем коде (для развития), а вообще очень клево. СПАСИБО 0

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	08.12.2012, 17:54	7
	Сообщение от newJS этим пользовались когда больше ни чего не было, много лет назад, сейчас этим пользуются только те кто сам учится по старым книгам, кто ж назад откатывается Не по теме: Верно, если говорить о выводе информации после загрузки страницы. Но, для вывода информации в процессе загрузки, document.write по-прежнему остается самым быстрым способом с низкими накладными расходами. В данном случае, конечно, этот способ применяется не в тему. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	11.12.2012, 08:04	8
	Не знаю насчет скорости, но 17я лиса ругается и посылает сюда, а кажется на сайте яваскрипт есть статья почему не стоит использовать document.write(). Предупреждение: Несбалансированное дерево было написано с использованием document.write(), что привело к повторному парсингу данных из сети. Для получения более подробной информации прочтите 0

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	11.12.2012, 08:45	9
	newJS, так и стоило бы почитать по ссылке. Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK. Don't write an unfinished token. <script>document.write("<div></div");</script> is bad. Don't finish your writing with a carriage return. <script>document.write("Hello World!\r");</script> is bad. <script>document.write("Hello World!\n");</script> is OK. Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. <script>document.write("<div></div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	11.12.2012, 09:56	10
	Сообщение от GuardCat ак и стоило бы почитать по ссылке. Не раньше чем это будет по русски. 0

@GuardCat Просто любитель 626 / 464 / 120 Регистрация: 20.01.2011 Сообщений: 865 Записей в блоге: 2
	11.12.2012, 19:07	11
	А чего тут переводить? Особенно в строчках <script>document.write("<div>");</script> is bad. <script>document.write("<div></div>");</script> is OK. Bad — плохой, Ok — хороший :-) 0