Отправляет email-рассылки с помощью сервиса Sendsay

Дизайн сайта как инструмент продажи

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

10.132 подписчиков
-10 за неделю
←   Все выпуски   →

Уроки веб-дизайна с подробными примерами


Уважаемые подписчики!

Представляю Вашему вниманию двадцать седьмой выпуск информационной рассылки сайта "Свободное и бесплатное ПО". В этом выпуске мы продолжим серию уроков, посвященных JavaScript.

Новости наших проектов. Мы начали объединение с сайтом Свободное и бесплатное ПО. Целью объединения является полная переработка материалов сайта Веб дизайн в примерах на современном и профессиональном уровне и добавление новых материалов. Если у вас есть вопросы, задавайте их на нашем форуме.

Новости ПО. Тестировать работу веб-страниц и скриптов на корректность работы необходимо в различных браузерах. Вы можете бесплатно загрузить новые версии браузеров: Mozilla Firefox (версии 3.0.7 и 3.1 beta-3) и Opera (версия 9.64).

В текущем выпуске мы разберем два скрипта: решение квадратного уравнения и конвертер температуры. Наша цель - ознакомиться с обработкой данных формы и базовая работа со строками.

Решение квадратного уравнения

Напишем сценарий JavaScript для решения квадратного уравнения.

Для начала подготовим форму. 

<div align="center">
<b>Решение квадратного уравнения a&middot;x&sup2; + b&middot;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
  |    }
  }

Kонвертер температуры

Данный сценарий позволяет переводить температуру из одной системы измерений в другую с заданной точностью. Обрабатывается три типа температур: градусы Цельсия, градусы Кельвина и градусы Фаренгейта.

Описание скрипта

Наша цель - написать скрипт для перевода температуры из одной системы измерений в другую. Скрипт будет конвертировать между тремя основными системами измерения температуры: градусы Цельсия, градусы Кельвина и градусы Фаренгейта. Все расчеты мы будем проводить с заданной нами точностью. Описываем поля формы input (по умолчанию это текстовые поля) c именами precision, celsius, kelvin, fahrengeit. Для поля precision (точность расчета) зададим начальное значение 8 (число значащих цифр). Выравнивание полей формы достигается с помощью элемента pre (конечно, можно использовать и другие методы, например, поместить поля формы в ячейки таблицы).

При вводе значений все поля формы обновляются автоматически, т.к. обработка осуществляется через событие onKeyUp (нажатие клавиши клавиатуры). При возникновении этого события вызывается функция UpdateF с параметром. Этот параметр определяет какие действия следует предпринять для обработки полей формы.

В функции UpdateF определяется значение для точности p и определяются переменные для доступа к полям формы, отвечающим за температуру (переменные c, k, f). Действие определяется значением переданного в функцию параметра n. Для n=0 происходит перезапись данных для заданной точности с помощью метода toPrecision. Значения n от 1 до 3 определяют текущий тип температуры и расчет производится для двух остальных типов.

Код скрипта

Скрипт обрабатывает следующую форму:

<form name="converter">
<pre>
 Число значащих цифр:  <input name="precision" value="8" maxlength="12" onKeyUp="UpdateF(0)">
 Цельсии:              <input name="celsius" maxlength="12" onKeyUp="UpdateF(1)">
 Кельвин:              <input name="kelvin" maxlength="12" onKeyUp="UpdateF(2)">
 Фаренгейт:            <input name="fahrengeit" maxlength="12" onKeyUp="UpdateF(3)">
</pre>
</form>

И сам скрипт:

<script language="javascript">
<!--
function UpdateF(n)
{
var p = eval(window.document.converter.precision.value);
var c = window.document.converter.celsius;
var k = window.document.converter.kelvin;
var f = window.document.converter.fahrengeit;

if ( n == 0) {
 if (c.value) c.value = eval(c.value).toPrecision(p);
 if (k.value) k.value = eval(k.value).toPrecision(p);
 if (f.value) f.value = eval(f.value).toPrecision(p);
};
if ( n == 1 ) {
 k.value = (eval(c.value) + 273.15).toPrecision(p);
 f.value = (1.8 * eval(c.value) + 32).toPrecision(p);

};
if ( n == 2 ) {
 c.value = (eval(k.value) - 273.15).toPrecision(p);
 f.value = (1.8 * (eval(k.value)) - 459.67).toPrecision(p);

};
if ( n == 3 ) {
 c.value = ( (eval(f.value) - 32) / 1.8 ).toPrecision(p);
 k.value = ( (eval(f.value) + 459.67) / 1.8).toPrecision(p);

};
}
-->
<script>

До новых встречь! Оставайтесь с нами.

В избранное