Напишем сценарий JavaScript для решения квадратного уравнения.
Для начала подготовим форму.
<div align="center"> <b>Решение квадратного уравнения a·x² + b·x + c = 0.</b> <form name="square" action="javascript:square_equation()"> a <input name="square_a" type="text" value="1" size="4"> b <input name="square_b" type="text" value="2" size="4"> c <input name="square_c" type="text" value="1" size="4"> <input type="submit" value="посчитать"> </form> Решение: <span id="square_sol">Введите коэффициенты и нажмите "посчитать"</span> </div>
Мы задаем имя формы name="square" и обработчик формы (сценарий JavaScript) action="javascript:square_equation()". Далее идут три поля вода текста input...type="text" и кнопка, запускающая обработчик формы input type="submit". Результат будет записываться в контейнер span, идущий сразу же за формой. Обратите внимание на то, что для элементов формы мы задаем имя (и в скрипте будем обращаться к ним через их имена), а контейнер вне формы задан через ID (и обращаться к нему будем через getElementById).
<script language="javascript"> <!-- function square_equation() { var a = document.square.square_a.value; var b = document.square.square_b.value; var c = document.square.square_c.value; var sol = document.getElementById("square_sol"); var d = b * b - 4 * a * c; if ( d < 0 ) { string = "пара комплексно-сопряженных корней<br>x<sub>1</sub> = ("; string += - b / ( 2 * a ); string += ", "; string += Math.sqrt( -d ) / ( 2 * a ); string += "), x<sub>2</sub> = ("; string += - b / ( 2 * a); string += ", "; string += - Math.sqrt( -d ) / ( 2 * a ); string += ")."; } else { if ( d == 0 ) { string = "два одинаковых вещественных корня:<br>x<sub>1</sub> = x<sub>2</sub> = "; string += -b / ( 2 * a ); string += "."; } else { string = "два различных вещественных корня:<br>x<sub>1</sub> = "; string += -b / ( 2 * a ) - Math.sqrt( d ) / ( 2 * a ); string += ", x<sub>2</sub> = "; string += -b / ( 2 * a ) + Math.sqrt( d ) / ( 2 * a ); string += "."; } } sol.innerHTML = string; } --> </script>
Получение значения из полей ввода текста формы осуществляется конструкцией вида:
var переменная = document.имя_формы.имя_поля.value;
в примере:
var a = document.square.square_a.value;
Связывание элемента, заданного через ID:
var переменная = document.getElementById("ID_элемента");
в примере:
var sol = document.getElementById("square_sol");
А доступ к изменению содержимого:
переменная.innerHTML = значение;
в примере:
sol.innerHTML = string;
Отметим структуру использованной конструкции для вложенного условного оператора (серыми линиями отмечены структурные блоки):
if (условие1) { | операторы1 } else { | if (условие2) { | | операторы2 | } else { | | операторы3 | } }