Технологическая часть 2.1 Применение технологии JavaScript и jQuery для создания электронного портфолио
JavaScript является скриптовым объектно-ориентированным языком программирования. Наиболее часто его применяют для создания интерактивности веб-страниц в среде браузера.[3] Поскольку система электронного представления портфолио является некоторой аналогией веб-сайта, применение JavaScript в рамках данной работы вполне уместно.
Особенное место в данной работе занимает библиотека JavaScript jQuery. Она как раз фокусируется на взаимодействии JavaScript и HTML. Эта библиотека весьма удобна при работе с JavaScript, потому что кодирует «многоразовые» куски кода, чтобы упростить его.
Движок, на основе которого создавалась сборка, описываемая в проекте, базируется на jQuery. Была написана библиотека lacerta, которая включает в себя те функции, которые используются в при разработке образовательных ресурсов и портфолио.
Движок представляет собой компонент при модульном проектировании и сборке.
Далее будет описаны процессы, проходящие при загрузке модуля.
Описание последовательности действия процессов начинается с момента загрузки начальной (HTML) страницы. В начале происходит загрузка содержимого HTML документа (происходит считывание браузером содержимого страницы): параллельно идет загрузка, указанных в документе HTML ссылочных файлов (CSS, javaScript).
Далее следует активация «первичной функции»: по окончании загрузки DOM HTML (при наличии встроенных медиаобъектов, при наличии первичной функции, активизация данной функции произойдет ранее, чем загрузка медиаобъектов), происходит активация «первичной функции».
// первичная функця:
$(document).ready(function() {
// Программный код, организующий начальную фазу загрузки модуля...
// ...
var src = "config.xml";
// ...
});
Особенно важно отметить, что config.xml (конфигурационный файл) находится в той же директории, что и HTML файл. Основное назначение первичной функции - описание способа извлечения данных из конфигурационного файла и передача адреса конфигурационного файла объкту, отвечающему за асинхронную загрузку XML файлов.
Для загрузки XML файлов существует объект loader, имеющий метод getXMLDOM(resData), возвращающий DOM XML загруженного документа.
Дальнейшие действия связаны с извлечением информации из конфигурационного файла (config.xml). Важно отметить, что в файле «config.xml» дан адрес XML файла, содержащего описание совместно используемых данных (общие элементы интерфейса) и списка сцен модуля.
После того, как будет определен путь к XML файлу описания состава сцен модуля, происходит загрузка и разбор содержимого данного XML документа. Для разбора содержимого lab.xml (частный случай) существует объект labwork_loader, имеющий методы loadLabwork и getNameFromStep. Метод loadLabwork содержит описание функции, отвечающей за извлечение совместно используемых данных (общие элементы интерфейса) и пересылку их для дальнейшей обработки объекту design, имеющему методы composeNode(resObj) и composeLabXML.
В данном месте происходит распараллеливание процессов: загрузка и размещение в окне браузера общих элементов интерфейса (посредством объекта design) и организация сбора информации о сценах, входящих в состав модуля.
Происходит визуальное представление общих элементов интерфейса модуля. За визуальное представление данных (включение медиаданных в состав DOM HTML) отвечает объект design, имеющий методы composeNode(resObj), composeLabXML (подгрузка и разбор общих элементов, описанных в lab.XML). Подгрузка и разбор шагов: composeStepXML (подгрузка и разбор элементов сцен, входящих в состав модуля) и др.
Также идёт сбор информации о сценах, входящих в состав модуля, упорядочивание данных и организация массива данных. Для организации данных в массив существует объект navigation, обладающий методом putStep(step).
После того, как начальная информация о сценах будет обработана, происходит визуализация элементов, входящих в состав первой сцены. Данные, описывающие состав и структуру первой сцены (DOM XML), передаются для дальнейшей обработки объекту design, имеющему методы composeNode(resObj) и composeStepXML.
Далее представлена схема процесса, описанного выше.
Рисунок 3 Схема загрузки модуля
|
