VPF::Вставка переменных в документ с помощью javascript

SpyZ

Дата 11.2.2010, 19:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 16.9.2009

Репутация: нет
Всего: нет

Здравствуйте!
Я немного знаком с php, а с javascript знаком еще меньше.

Пишу программку, которая решает задачу по электропитанию, решение на 2-3 листа А4.
Так как кроме javascript и php ничего не изучал, решил использовать javascript (php не вариант, так как надо чтобы сценарий выполнялся на любом компьютере в браузере, а не на сервере).

Вот что получилось.
На главной странице вводим данные в таблицу, которые потом с помощью метода GET передаются далее, на другой странице переменные извлекаются из строки браузера.

И тут возникла "небольшая проблемка". Как подставить переменные в формулы сообразить не могу.
Надо чтобы получилось например так:
решение: 46+85+94=225, где 46,85,94 - это переменные, полученные с предыдущей страницы; 225-ответ, рассчитанный заранее и подставленный сюда или рассчитанный здесь же.

Т.е. должен получиться текст с формулами и решением задачи, который можно распечатать или вставить в word, например.

Можно конечно и с помощью document.write(), но текста много.

Подскажите пожалуйста способ реализовать задумку с помощью javascript или еще какой-нибудь способ создания подобного сценария.

p.s. : гугл и яндекс не помог.

12345c

Дата 11.2.2010, 19:51 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Цитата

решение на 2-3 листа А4.

Листы HTML в браузере не форматируются по размеру.

Цитата

которые потом с помощью метода GET передаются далее

Метод GET для JS без сервера не имеет смысла.
Надо создать новую страницу. Можно через document.write(), но это старо и никогда не было типовым решением такой задачи. Более того, такое поведение скрипта (обновлять страницу из самой себя, не пользуясь сервером) для JS никогда не было обычным решением. Сделать можно, но это следует рассматривать как из серии "развлечение для профи".

Поэтому, если выбор только между PHP и JS - делайте на PHP. Если шире - делайте на Экселе, он полностью подходит для такой задачи (без встроенного VBA, только формулами в ячейках) в том числе для задач печати.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

SpyZ

Дата 11.2.2010, 20:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 16.9.2009

Репутация: нет
Всего: нет

Цитата

решение на 2-3 листа А4.

Листы HTML в браузере не форматируются по размеру.

Имелось ввиду, что если вставить полученный результат в word.

Цитата

Надо создать новую страницу.

Цитирую самого себя:

Цитата

На главной странице вводим данные в таблицу, которые потом с помощью метода GET передаются далее, на другой странице переменные извлекаются из строки браузера.

Т. е. извлечь данные из строки браузера получается, записать их в переменные тоже, а вот дальше заморочки.

С Exel все просто и понятно, но это немного не то.

Вот код главной страницы:

Код




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Задача</title>

<style type="text/css">
<!--

body{
    text-align: justify;
    }
sub {
    font-size: 10pt;
    font-style: italic;    
}
sup {
    font-size: 10pt;
    }
#container {
width:800px;
margin:5px auto 5px;
border:1px #346699 dashed;
padding:10px;
}
td {
border:1px #346699 solid;
padding:5px;
}

-->
</style>

Код


<script type="text/javascript" language="javascript">
function vernyak ()
{
    var form=window.document.dnn;
    var dd=new Array();
    var errors=0;
    for (var i=0; i < form.elements.length;i++){
    if (form.elements[i].type=="text"){
        dd[i]=form.elements[i].value;
        dd[i]=trim(dd[i]);
        form.elements[i].value=trim(dd[i]);
        if(isNaN(dd[i])||(dd[i]<0)){
        var j=i+1;
        errors++;
        alert('Данные в строку ' + j + ' введены неверно!');
            form.elements[i].value="Ошибка";    
            }
        }
    }
    if (errors==0){
        document.getElementById('dnn').submit();
    }
}
function trim(s)
{
  return rtrim(ltrim(s));
}

function ltrim(s)
{
  return s.replace(/^\s+/, ''); 
}

function rtrim(s)
{
  return s.replace(/\s+$/, ''); 
}

</script>

Код




</head>
<body>
<div id="container">
<p><strong>Задача. </strong>Произведите расчет рабочей и контрольной батарей для питания устройств маршрутно-релейной централизации (МРЦ) крупной станции. Исходные данные для расчета необходимо ввести в таблицу.</p>
<p>На станции установлены электроприводы с электродвигателями типа МСП-0,25 напряжением 160В, рассчетный ток электродвигателя <strong>2,4А; t<sub>пер</sub> =2,1сек; I<sub>п</sub>=1,5А; I<sub>з</sub>=0,03А; I<sub>и</sub>=0,035А.</strong></p>
<p>Введите исходные данные в таблицу согласно своему <strong>варианту</strong> (данные вводятся без пробелов, дробные числа должны быть записаны в формате &quot;0.0546&quot;, т.е. с использованием точки в качестве разделителя целой и дробной части)  : </p>
<form id="dnn" name="dnn" action="result.html" target="_self" method="get">
<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2"><div align="center"><strong>Исходные данные </strong></div></td>
    <td><div align="center"><strong>Поля ввода </strong></div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">1</div></td>
    <td><div align="right">Число стрелок <strong>n</strong> </div></td>
    <td>
      <div align="center">
        <input type="text" maxlength="14" size="14" name="nStrelok" id="nStrelok" value="Введите число" onclick="this.focus(); this.select();" />
        </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">2</div></td>
    <td><div align="right">Число переводов стрелок за 6 часов <strong>N</strong> </div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nPerevod" id="nPerevod" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">3</div></td>
    <td><div align="right">Число нажатий кнопок за 6 часов <strong>m</strong> </div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nNaj" id="nNaj" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">4</div></td>
    <td><div align="right">Число устанавливаемых маршрутов <strong>p</strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nMar" id="nMar" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">5</div></td>
    <td><div align="right">Число повторителей контрольных реле, одновременно находящихся под током <strong>k</strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nPov" id="nPov" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">6</div></td>
    <td><div align="right">Время занятия поездом участков приближения и удаления <strong>t, ч</strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="tU4" id="tU4" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">7</div></td>
    <td><div align="right">Число замыкающих реле на станции <strong>n<sub>з</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nRele" id="nRele" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">8</div></td>
    <td><div align="right">Число повторителей замыкающих реле <strong>n<sub>пз</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nPRele" id="nPRele" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">9</div></td>
    <td><div align="right">Время работы приборов при нажатии кнопки <strong>t<sub>в</sub>, с</strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="tRab" id="tRab" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">10</div></td>
    <td><div align="right">Число исключающих реле <strong>n<sub>и</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nIRele" id="nIRele" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">11</div></td>
    <td><div align="right">Ток, потребляемый прочими реле <strong>I<sub>п</sub>, А</strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="iPrele" id="iPrele" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">12</div></td>
    <td><div align="right">Число прочих реле <strong>n<sub>п</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nPrRele" id="nPrRele" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">13</div></td>
    <td><div align="right">Ток, потребляемый повторителем контрольного реле <strong>I<sub>р</sub>, А</strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="iPRele" id="iPRele" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">14</div></td>
    <td><div align="right">Ток, потребляемый одной лампой табло <strong>I<sub>у</sub>, А</strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="iLamp" id="iLamp" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">15</div></td>
    <td><div align="right">Число контрольных лампочек красного огня входных светофоров <strong>n<sub>к</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nKLamp" id="nKLamp" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">16</div></td>
    <td><div align="right">Число контрольных ламп пригласительного огня <strong>n<sub>пр</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nPOg" id="nPOg" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20px"><div align="center">17</div></td>
    <td><div align="right">Число ламп аварийного освещения (P=25Вт, U=12В) <strong>n<sub>л</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nOSLamp" id="nOSLamp" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
  <tr>
  <td width="20x"><div align="center">18</div></td>
    <td><div align="right">Число контрольных ламп участков приближения и удаления <strong>n<sub>уп</sub></strong></div></td>
    <td><div align="center">
      <input type="text" maxlength="14" size="14" name="nLampUP" id="nLampUP" value="Введите число" onclick="this.focus(); this.select();"/>
    </div></td>
  </tr>
<tr >
<td colspan="3"><div align="center"><input type="button" id="knopka" name="knopka" value="Рассчитать" onclick="vernyak();" /></div></td>
</tr>
</table>
</form>
</div>
</body>

</html>

Вот код функции на другой странице, которая извлекает данные:

Код




function getParam(sParamName){ 
var Params = location.search.substring(1).split("&");
var variable = ""; 
for (var i = 0; i < Params.length; i++){
if (Params[i].split("=")[0] == sParamName){
if (Params[i].split("=").length > 1){
 variable = Params[i].split("=")[1]; }
return variable; 
}
}
return ""; 
}

12345c

Дата 11.2.2010, 21:11 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

Ну и зачем Вам обязательно на JS? Он для этого не приспособлен. Передавать по Get он может на сервер, а здесь сервера нет. Вызывать локальную страницу с передачей аргументов - есть 3 способа: через элементы форм (если та же страница), через куки (не знаю, работают онии на локальных файлах; скорее всего, нет, и тогда только элементы форм или третье) или саморазворачивающуюся страницу, можно с использованием файла *.js. Третье сложно, второе тоже на грани высшего пилотажа. Оно Вам надо?

Добавлено через 11 минут и 45 секунд
Как ни странно, FF3.6 запомнил куки локального файла и стал вспоминать их после переименования файла, но не сохранил после перемещения и запуска из другой папки. Так что можете пользоваться ими. Но это тоже нетипично.

Код


<script>
alert(document.cookie);
document.cookie = '321';
</script>

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

12345c

Дата 11.2.2010, 21:34 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 6
Всего: 101

document.cookie - это одна строка, поэтому передача через строку.

Код


<script>a=[46,85,94];
if(!document.cookie){ //отправляем данные
  document.cookie = a.join(',');
  location = ''; //перезагружаем ту же страницу
}else{ //выводим данные
  onload = function(){
    a = document.cookie.split(',');
    document.body.innerHTML =Number(a[0])+Number(a[1])+Number(a[2]);
    document.cookie = ''; //чистка на будущее
  }
}
</script>

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »