Калькулятор
Рассмотрим пример объекта на сайте, созданного с помощью простых приемов javascript программирования Данный пример-иллюстрация показывает возможности Javascript производить математические расчеты в интерактивной форме. Он представляет собой простую программу калькулятора, но не того примитивного, какие продают в канцелярских магазинах, а калькулятора, умеющего понимать математические выражения и функции в одной сложной записи. Сначала я просто покажу текст всей программы. Этот текст можно скопировать в файл с расширением htm и запустить на исполнение, он будет работать. Для лучшего понимания моих комментариев советую это проделать. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.
Теперь я объясню пример. Первые теги достаточно очевидны. В теге <script> записана всего одна функция javascript с именем calc и с аргументом form. Мы вернемся к анализу этой функции позже, а сначала обсудим что стоит дальше. Дальше в теге <h2> написан заголовок и затем вставлен тег <form>. Для простоты записи кода я тут не использую CSS форматирование, его каждый сможет добавить по вкусу. Тег <form> является контейнером, для размещения в нем различных объектов общения с пользователем, в частности окон ввода и кнопок. Эти объекты по старой системе описываются тегами <input> с различными значениями параметра type. Все объекты общения с пользователем с самого начала имели параметр name, который играет ту же самую роль, что и параметр id, то есть метит объекты. Если тегов <form>много, то они тоже могут иметь имена через параметр name, но в нашем случае такой тег всего один и задавать для него имя нет смысла. Теги объектов интерфейса могут быть размещены произвольным образом, в том числе и с привлечением таких тегов разметки, как таблицы. Таблица задается тегом <table> и состоит из строк и колонок. Строки являются более главными, а колонки находятся внутри строк. Строки задаются тегами <tr>, а колонки тегами <td>. Кроме них есть еще теги <th> для размещения заголовков. Таблицы с самого начала были самым форматируемым объектом и форматировались они через большое число параметров, без использования CSS. В принципе теперь любой тег таблицы можно сформатировать и с помощью CSS, а можно и по старой системе.
Итак, в нашем случае таблица состоит из одной строки, одной колонки заголовка, и трех обычных колонок. В каждой обычной колонке находится один тег <input>, но крайние из них являются окнами ввода текста, а средний - кнопкой. И вот кнопка как раз при клике вызывает нашу функцию calc. Аргументом этой функции является объект form, из которого она вызывается. А оператор функции задает значение параметра value у окна ввода с именем res. Этому значению присваивается текст, который состоит из символа пробела и текстовой строки, которую формирует функция eval(). Это очень мощная функция языка javascript. Интересно, что она отсутствует в языке Java, и там то же самое надо делать очень сложным кодом. Эта функция имеет своим аргументом код языка javascript, который она выполняет и преобразует в число. Но это число автоматически преобразуется в строку текста, потому что оно складывается посредством символа плюс с текстовой строкой. А при сложении объектов разного типа в языке javascript автоматически происходит преобразование типа второго слагаемого к типу первого слагаемого. Итак, значит параметру value у окна ввода с именем res присваивается текстовое представление числа, а значит это число моментально появится в окне ввода. А в процессе нахождения этого числа, то есть при выполнении кода, часть этого кода была взята из значения параметра value у окна ввода с именем expr.
Это значит, что если пользователь (читатель) сайта наберет в первом окне ввода какое-нибудь математическое выражение типа 25+46/(sin(45)+2), то это выражение будет вычислено и присвоено переменной с именем a. А одновременно оно появится во втором окне ввода как результат вычислений. Если теперь к выражению в левом окне прибавить a, то его текущее значение (уже не нулевое) тоже будет учтено при вычислении. Можно организовать несколько строк и присвоить значения нескольким переменным и они все будут участвовать в вычислениях. Возможно возникает вопрос, a зачем написано with (Math){ }. И на это есть ответ. Дело в том, что в javascript, так же как и в Java, стандартные функции типа синуса не могут существовать просто так. Они должны принадлежать какому либо объекту. И они принадлежат объекту Math. То есть правильно писать синус надо так Math.sin(). Так вот, чтобы этого не делать, существует конструкция, которая указывает объект функций в аргументе, а в теле уже можно писать эти функции в привычном нам виде.
Я надеюсь, что мне удалось продемонстрировать как просто и компактно javascript делает достаточно сложные вычисления. В других языках программирования приходится писать довольно сложные программы, чтобы получить тот же самый результат. Описанный выше код, но в более сложном варианте уже 13 лет исправно работает в интернете на моих сайтах. Последнее время его можно увидеть ЗДЕСЬ. Далее я скопировал часть указанного кода, то есть только теги script, h2 и form сразу за этим текстом и вот калькулятор работает в этой главе, вы это должны видеть. Поставьте курсов в левое окно ввода, наберите любое математическое выражение, потом кликните на кнопке со знаком равенства и ответ появится в правом окне. Прибавьте к выражению букву "a" и ответ удвоится. Такой калькулятор можно ставить на любой сайт и он будет работать всюду. Эмпирическим путем легко определить, что аргументы тригонометрических функций надо задавать в радианах.
Калькулятор
Рассмотренный выше пример дает представление о том, как можно писать на Javascript программы, которые запрашивают у пользователя какую-то информацию, которую надо ввести в окна ввода, затем эту информацию перерабатывают и выдают ответ в другие окна ввода. Разные режимы переработки информации можно регулировать кнопками. Окна ввода и кнопки можно разместить произвольным образом, как используя таблицы, так и без них. В частности, так можно писать разные экспертные системы и даже базы данных. Но сложность в том, что базы данных содержат очень много упорядоченного текста и обычно размещаются в большие текстовые файлы. В качестве самого прогрессивного языка программирования баз данных все более рекомендуется XML, который по своей структуре очень похож на HTML и тоже содержит теги и параметры. Однако, Javascript не умеет работать с файлами совсем. Java может работать с файлами, но эту работу в Java аплетах блокируют. Тем не менее, читать файлы, пусть и в ограниченном режиме Java аплеты могут. А в Javascript проблема решается другим путем. Все данные в базах данных должны быть записаны в самом Javascript коде. Но этот код не обязательно весь должен находиться в htm файле. Его можно написать в js файле и указать в теге <script> на этот файл. В таком режиме данные в любом количестве могут быть использованы в специальных файлах, которые все должны иметь структуру Javascript кода и которые прицепляются на стадии загрузки сайта в браузер. В качестве примера такой программы рекомендую посмотреть мой сайт по адресу [9], эта программа тоже была написана более 10 лет назад. Ее код можно посмотреть обычным образом. А можно поставить курсор на ссылку, нажать правую кнопку мыши и выбрать в меню "Сохранить ссылку как" или "Save target as". Файл скачается на ваш компьютер и его можно открыть в любом текстовом редакторе.
Автор: Виктор Кон, 9.09.2013
