Javascript «ввод двух списков из двух текстовых полей» - ступенька для создания программы ФСА технических систем

 

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

Как реализовать следующее? Есть два пустых HTML списка. Нужно их заполнить. В первый список должны вводиться элементы технической системы (ТС), а во второй - элементы надсистемы (НС). Причем ввод осуществлять не программно, а непосредственно на Web-странице. Предусмотреть также возможность удаления элементов списков, если они введены неправильно.  Фактически, нужно посредством этого ввода осуществить компонентный анализ ТС. В соответствии с глоссарием из методики G3:ID, компонентный анализ - это этап функционального анализа, в результате которого выявляются элементы рассматриваемой ТС и ее НС. Элемент – это материальный объект, составляющий часть ТС или НС. Один скрипт – и уже положено начало функционально-стоимостному анализу (ФСА) технических систем. Для ФСА технологических процессов он тоже подойдет. Надо только заменить заголовки «Функция ввода в список элемента ТС» и «Функция ввода в список элемента НС» и вводить вместо элементов технологические операции. Также скрипт можно использовать для функционального анализа, вводя вместо элементов их функции. Можно вводить в левый список элементы, а в правый – их функции. Можно сделать количество списков больше двух. Этапы ФСА следующие: 1)компонентный анализ,2) структурный анализ,3)функциональный анализ, 4)диагностический анализ, 5)анализ ресурсов, 6)функционально-идеальное моделирование. И на каждом этапе – работа со списками. Получается, что скрипт является основой для создания программы ФСА технических систем и ФСА технологических процессов.    
Устанавливаем в окне два одинаковых по размерам слоя, расположенных рядом друг с другом. В левом слое располагаем форму (form[0])со списком ввода элементов ТС, в правом – форму (form[1])со списком ввода элементов НС. Если вас не устраивают размеры слоев, можете изменить значения «width» и «height».
 
                Код скрипта выглядит следующим образом:
 
 
<HTML>
<HEAD>
<TITLE>Добавление и удаление элементов из списков</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
#first,list{
background-color: #ffffcc;
position: absolute;
top:0px;
left:0;
width:600px;
height:800px;
}
#second,list2{
background-color: #ccffff;
position: absolute;
top:0px ;
left:600px;
width:600px;
height:800px;
} -->
</style>
<script>
/ * Функция ввода в список элемента ТС  */
function addList(){
var list = document.getElementById('list');
var li   = document.createElement('LI');
/* Ввод в список из текстового поля */
li.innerHTML =document.forms[0].myInput.value
/* Очистка текстового поля */
document.forms[0].myInput.value=""
/* Установка фокуса на текстовое поле */
document.forms[0].myInput.focus( )
list.appendChild(li);
}
/ * Функция удаления из списка последнего элемента ТС  */
function remove( ){
var list = document.getElementById('list');
var l = list.getElementsByTagName('LI').length - 1;
var li = document.forms[0].getElementsByTagName('li')[ l ];
document.forms[0].myInput.focus( )
list.removeChild(li);
}
function addList2( ){
var list2 = document.getElementById('list2');
var li   = document.createElement('LI');
/* Ввод в список из текстового поля */
li.innerHTML =document.forms[1].myInput2.value
/* Очистка текстового поля */
document.forms[1].myInput2.value=""
document.forms[1].myInput2.focus( )
list2.appendChild(li);
}
function remove2( ){
var list2 = document.getElementById('list2');
var l = list2.getElementsByTagName('LI').length - 1;
var li = document.forms[1].getElementsByTagName('li')[ l ];
document.forms[1].myInput2.focus()
list2.removeChild(li);
}
</script>
</HEAD>
<BODY>
<form id="first">
<!--список   -->
<ul id='list'>
</ul>
<Center><b>Ввод элементов технической системы</b></Center> <br /><br />
<Center><input onclick='addList()' type='button' value='Добавить элемент ТС в список'></Center><br />
<Center><input onclick='remove()' type='button' value='Удалить элемент ТС из списка'></Center><br /><br />
<Center><input type="text" name="myInput" size="50"></Center>
</form>
<script>
document.forms[0].myInput.focus( )
</script>
<form id="second">
<ul id="list2">
</ul>
<Center><b>Ввод элементов надсистемы</b></Center><br /><br />
<Center><input onclick='addList2()' type='button' value='Добавить элемент НС в список' ></Center><br />
<Center><input onclick='remove2()' type='button' value='Удалить элемент НС из списка' ></Center><br /><br />
<Center><input type="text" name="myInput2" size="50"></Center>
</form>
</BODY>
</HTML>
 
На экране монитора формы с элементами управления будут выглядеть следующим образом:
 
 
 
Название элемента ТС вводится в нижнее текстовое поле. Затем нажимается кнопка ввода и сверху образуется список из одного элемента. Аналогично вводится следующий элемент. После окончания ввода всех элементов сверху будет два списка: элементы ТС и элементы НС.

 

Алфавитный указатель: 

Рубрики: