Найти в Дзене

Веб-разработка в Lazarus: выводим данные

Продолжаю развлекаться с Pas2JS и делиться опытом. Для начала скажу, что хотя бы основы JavaScript для работы с Pas2JS знать всё-таки желательно. Ну и без HTML, разумеется, тоже никак.

Первое, что обычно делают, начиная изучать новый язык или среду разработки - это выводят сообщение “Привет, МИР!”. Потому что вывод данных - это такая вещь, которая требуется любому программисту на любом языке. Я уже показывал, как это делать. Однако пришло время остановиться на этом вопросе более подробно.

Итак, вывод данных возможен:

  • В консоль
  • В браузер
  • В HTML-элементы

Хотя так или иначе, конечно, всё это выводится в браузере. Но я всё-таки разделил способы вывода, поскольку для них используются разные способы.

Разумеется, данные выводить можно ещё в файлы, например. Но это уже другая история.

Итак, сначала примеры исходников, потом пояснения. Вот такой у меня получился файл HTML:

Здесь пояснений давать не буду, подразумевая, что вы знаете HTML в достаточной степени. Скажу только, что на странице у нас будет несколько элементов <input> разных видов.

Теперь код на Паскале:

-2

Комментариев тоже достаточно, но несколько пояснений сделаю.

  • Для работы с HTML-элементами, расположенными на веб-странице, мы используем класс TJSHTMLInputElement, который объявлен в модуле Web.
  • Я объявил несколько переменных, связанных с этим классом, для наглядности. Вообще можно было обойтись и без переменных (в нижней части рисунка показано как).
  • Если мы подключаем модуль browserconsole, то процедура WriteLn будет выводить текст прямо в браузер. Если этот модуль не использовать, то вывод будет направлен в консоль.
  • Как видите, мы можем использовать Window и работать с объектами и функциями как и в JavaScript (document, alert и т.п.). Причём, в отличие от JavaScript, идентификаторы не чувствительны к регистру, и мы можем написать хоть document, хоть Document, хоть DOCUMENT.
  • Некоторые паскалевские процедуры и функции ведут себя не так, как в Паскале. Например, здесь вы не можете использовать процедуру Randomize, поскольку у неё нет аналога в JavaScript.
  • Как и в JavaScript, вы можете с помощью Window.document.write выводить на экран как простой текст, так и формировать HTML-код страницы динамически.

Ну и вот так примерно будет выглядеть веб-страница с этим примером:

-3

На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.