Рекина Разработка автоматизированной обучающей системы

Разработка автоматизированной обучающей системы для освоения
скриптовых языков программирования
Екатерина Рекина, Дмитрий Еремин,
БПОУ «Омский АТК»,
Балабошкин В. В., преподаватель
Введение
В настоящее время информационные технологии широко используются в
деятельности практически всех организаций разного уровня. Это приводит к
повышению потребности в специалистах, которые профессионально владеют
разнообразными, современными компьютерными технологиями. Современный
специалист
в
области
информационных
технологий
должен
уметь
программировать на скриптовых языках. Эти языки позволяют организовать
интерактивную работу Web-сайта. Поскольку в Омском автотранспортном
колледже активно используются ИКТ для обучения студентов, актуальной в
настоящий момент является разработка электронного обучающего ресурса для
обучения скриптовым языкам программирования.
Целью исследования является разработка автоматизированной обучающей
системы для освоения основ программирования на скриптовых языках.
Для достижения цели необходимо решить следующие задачи: исследовать
предметную область; разработать техническое задание на программный продукт;
разработать базу данных, интерфейс программы, подсистемы «Теория»,
«Словарь», «Примеры» и модули системы; тестировать систему.
Проведен поиск аналогов в глобальной сети Интернет, а также в других
источниках. Аналога проекта не обнаружено. Программные продукты, которые
имеются на рынке демонстрируют лишь часть теоретического материала. Нет
программ, которые предоставляют комплекс сервисов: теоретический материал,
словарь технических терминов, набор примеров кода, а также интерпретатор
языка. Подсистема, содержащая теоретический материал, включена в систему
для освоения и закрепления студентом теоретического материала. Подсистема
«Словарь»
включена
в
систему
для
освоения
студентом
технической
терминологии. Принципиально новая для информационных систем подсистема
«Примеры» предназначена для освоения практических навыков написания
программного кода. Эта подсистема предназначена не только для отображения
действия готовых примеров, но для немедленного выполнения любого
корректного кода.
Имеющийся в распоряжении редактор HTML кода - программа HEFS, а
также среда программирования Visual Studio 2013 с языком программирования
Visual
Basic
делают
специализированной
реализацию
информационной
проекта
системы,
реальной.
позволит
Разработка
повысить
эффективность процесса обучения, в том числе эффективность самостоятельной
работы студента, не завышая системных требований и при этом сэкономив
средства колледжа на приобретение программного продукта.[8-15]
1 Исследование предметной области
1.1 Скриптовые языки
В последнее время в связи развитием Интернет-технологий, широким
распространением высокопроизводительных компьютеров и рядом других
факторов получили распространение так называемые скриптовые языки. Эти
языки первоначально ориентировались на использование в качестве внутренних
управляющих языков во всякого рода сложных системах. Характерными
особенностями данных языков являются, во-первых, их интерпретируемость, вовторых, простота синтаксиса, а в-третьих, легкая расширяемость.
JavaScript. JavaScript - это язык программирования от компании
Netscape, который является реализацией стандарта ECMAScript. В
большинстве случаев при упоминании JavaScript подразумевается так
называемый клиентский JavaScript, интерпретатор которого встроен в
Web-браузеры. Однако JavaScript изначально был разработан как
универсальный язык программирования для встраивания в любое
приложение и обеспечения возможности написания в нем сценариев.
Например, ActionScript, язык сценариев, доступный в MacromediaFlash
5. Интерпретатор JavaScript от Netscape был выпущен в виде открытого
исходного кода и доступен через организацию Mozilla. Mozilla
предоставляет две различные версии интерпретатора JavaScript "SpiderMonkey" (написана на С) и "Rhino" (написана на Java).[1-17]
VBSCRIPT. Язык был создан в корпорации Microsoft во многом в качестве
альтернативы JavaScript. Имеет схожую область применения. Синтаксически
схож с языком Visual Basic. Так же, как и JacaScript, исполняется браузером при
отображении
веб-страниц
и
имеет
ту
же
степень
объектно-
ориентированности.[2]
JSCRIPT. JScript — это язык программирования от компании Microsoft. Он
предназначен для создания сценариев и является реализацией стандарта
ECMAScript. Синтаксис JScript во многом аналогичен языку JavaScript от
компании Netscape. JScript по умолчанию поддерживается в WindowsScriptHost
(WSH), который в свою очередь, по умолчанию устанавливается вместе с почти
любой версией Windows.[6-7]
PHP. PHP — интерпретируемый скриптовый язык программирования,
созданный для генерации HTML-страниц на веб-сервере и работы с базами
данных. В области веб-программирования PHP является на сегодняшний день
одним из самых распространённых технологий. Синтаксис языка похож на
синтаксис
С++.
PHP
поддерживается
подавляющим
большинством
представителей сетевого хостинга.
1.2 Учебный процесс обучения программированию
В
результате
изучения
процесса
обучения
основам
языка
программирования изучены основные этапы и содержание обучения. Первый
этап включает обучение основам языка: правила написания идентификаторов,
арифметические операторы, логические операторы, ветвление – условный
оператор. Закрепление этих знаний происходит путем выполнения письменных
заданий. Второй этап состоит в обучении технологии создания фрагментов кода
JavaScript и интерпретация их в обозревателе Internet Explorer. На этом этапе
студенты создают простейшие приложения на языке программирования. На
третьем этапе изучаются циклические операции и структурные данные.
Студент выполняет обработку структурных данных с использованием циклов.
На четвертом этапе выполняется обработка событий, происходящих на Webстранице.
Студент
осваивает
обработку
событий
клавиатуры,
мыши,
управление содержанием Web-страницы. На основании изучения предметной
области построена информационная модель процесса обучения
1 ЭТАП
- арифметические
- логические
- ветвление
2 ЭТАП
- создание
фрагментов кода
4 ЭТАП
- обработка
событий Webстраницы
3 ЭТАП
- циклы
- массивы
1.3 Функциональные требования к программе
На
основании
исследования
предметной
области
определены
функциональные требования к программному продукту. Система должна
состоять трех составных частей: JavaScript, JScript, VBScript, каждая из которых
включает
из
следующие
подсистемы:
теория,
словарь,
примеры.
Информационная система должна соответствовать следующим требованиям:
функционировать в среде операционной системыWindows 8; поддерживать два
языка
(русс.
реализовывать
и
англ);
иметь
отображение
удобный
данных
в
пользовательский
текстовом
интерфейс;
формате;
позволять
пользователю выполнять поиск информации по темам; позволять пользователю
выполнять
поиск
по
ключевым
словам;
предоставлять
пользователю
теоретические данные; предоставлять пользователю словарь технических
терминов;
предоставлять
интерпретировать
код
пользователю
примеров
практические
подобно
примеры
обозревателю
кода;
Интернет;
интерпретировать код, введенный пользователем.
1.4 Эксплуатационные требования к техническому обеспечению
На основании исследования технических средств колледжа определены
требования
к
техническим
эксплуатироваться:
средствам,
персональный
на
компьютер;
которых
программа
процессор
–
на
будет
базе
архитектурыx 86, с частотой 2000 MHz; объем оперативной памяти – 512 Мб;
дисковая подсистема – 1 Гб; цветной монитор, размер не менее15, разрешение
1024х768 точек; Клавиатура, мышь.
2 Разработка информационной системы
2.1 Моделирование функций системы
Функциональная
модель
разработки
подсистемы
ввода-вывода
информационной системы «Основы программирования на скриптовых языках»
включает: контекстная диаграмма задачи (рис. 2.1); Диаграмма основных бизнеспроцессов (рис. 2.2).
Рисунок 2.1–Контекстная диаграмма ИС
Рисунок2.2-Диаграмма основных бизнес процессов ИС
2.1.1 Потоки информации
Под потоком информации понимается целенаправленное движение
информации
от
источников
до
потребителей.
Рационализация
потоков
информации имеет цель исключить дублирование информации, минимизировать
маршруты ее прохождения и обеспечить рациональный обмен информацией
между органами управления (рис.2.3). Ниже приводится пример основного и
альтернативного
потоков
для
подсистемы
Примеры.
Анализ
потоков,
происходящих в них событий позволил создать удобный интерфейс системы.
Рисунок 2.3-Потоки информации ИС
Подсистема ПРИМЕРЫ
Примеры(основной поток):
1.1Пользователь выбирает вкладку ПРИМЕРЫ
1.2Пользователь выбирает пункт меню ТЕМА
1.3Пользователь выбирает тему из списка
1.4Пользователь выбирает пункт меню ПОИСК
1.5В открывшемся списке Пользователь выбирает интересующий его пункт
1.6Код примера отображается в окне TextBox
1.7Пользователь осуществляет команду ВЫПОЛНИТЬ
1.8Данные отображаются в окне WebBrowser
Примеры(альтернативный поток):
1.6А Пользователь модифицирует код примера или вводит новый код;
1.7А Пользователь осуществляет команду ВЫПОЛНИТЬ
1.8А Данные отображаются в окне WebBrowser
2.2 Проектирование интерфейса
Макет информационной системы(рис.2.4) разработан в Microsoft Word для
того,
чтобы
интерфейса
использования
сделать
черновой
готового
продукта
основной
среды(VisualStudio2013),
а
вариант
без
рабочей
также
перед
программированием самих модулей.
Рисунок 2.4-Макет ИС
Верхняя часть макета – ярлыки вкладок, кликнув по которым можно
перейти в нужный раздел (подсистему) программы(рис.2.5).
Рисунок 2.5–Вкладки основных подсистем ИС
Окна ListBox и TextBox имеют различное назначение, т.к. вместе в
программе они появляются одновременно только в одном из пунктов меню "Примеры". Элемент формы ListBox будет использован для размещения
ключевых слов в поисковой системе базы данных, а элемент TextBox – для
отображения кода при выборе конкретного примера во вкладке ПРИМЕРЫ.
Окно WebBrowser отвечает за отображение отдельных информационных
объектов базы данных (описание теории, термин, пример), а также вкладку
"Справка", где будет выводиться информация о программе. Интерактивная
кнопка "Запуск" на вкладке ПРИМЕРЫ отвечает за компиляцию и отображение
Web-страницы, соответствующей коду, прописанному в окне TextBox. Webстраница отображается в окне WebBrowser.
2.3 Проектирование базы данных
База данных обучающей информационной системы создаётся на основе
источников [1-3]. Заимствованная из указанных источников информация
классифицировалась на разделы и темы для удобного просмотра в ИС. Текстовая
информация отредактирована и сохранена в формате .html для отображения в
окне
WebBrowser.
информационные
Подсистема
потоки:
ТЕОРИЯ
"Поиск",
включает
в
"История",
себя
следующие
"Технология",
"Вычисления","Логика","Строки и Даты", "Ветвление", "Цикл", "Массив".
Подсистема СЛОВАРЬ для удобства выбора нужного термина разделена на 6
частей – по 3 для русского и английского алфавита: "А-З", "И-С", "Т-Я", а также
"А-H", "I-S", "Т-Z". В ней также имеются средства формирования запроса: пункт
меню "Поиск", разделы алфавита, поле для ввода ключевого слова и окно для
списка ключевых слов. Подсистема ПРИМЕРЫ включает в себя следующие
информационные
потоки:
"Поиск",
"HTML",
"Арифметика",
"Логика",
"Ветвление", "Цикл", "Массив", "Справка". Для того, чтобы найти нужную
информацию в базе данных, в каждом разделе создаётся пункт "Поиск", а
реализуется он с помощью файлов ключевых слов, которые не видны
пользователю и находятся в папке с программой.
2.4 Разработка модулей ИС
Для спроектированных подсистем (ТЕОРИЯ, СЛОВАРЬ, ПРИМЕРЫ,
СПРАВКА) разработаны модули, которые позволяют программе правильно
функционировать и выполнять свою работу.
Подсистема ТЕОРИЯ
Подсистема ТЕОРИЯ состоит из следующих модулей: загрузка базы
данных подсистемы; сортировка данных подсистемы; формирование запроса:
выбор темы; отображение списка ключевых слов;
выбор ключевого слова; отображение результатов
поиска
по
запросу.
Список
ключевых
слов,
соответствующий выбранной теме, отображается в
окне ListBox (рис.2.6).
Рисунок 2.6 –Меню ключевые слова
Подсистема СЛОВАРЬ
Подсистема СЛОВАРЬ состоит из следующих модулей: загрузка базы
данных подсистемы; сортировка данных подсистемы; формирование запроса:
выбор термина; отображение списка ключевых слов; выбор ключевого слова;
отображение результатов поиска по запросу. Модуль «Загрузка базы данных
подсистемы СЛОВАРЬ» предназначен для чтения списка ключевых слов, а
также соответствующих тем и адресов данных. «Сортировка данных подсистемы
СЛОВАРЬ» предназначен для сортировки списка ключевых слов, а также
соответствующих тем и адресов данных. «Формирование запроса» состоит из
трех процедур. Процедура «Выбор диапазона» предназначена для выбора
пользователем алфавитного диапазона.
Подсистема ПРИМЕРЫ
Подсистема ПРИМЕРЫ состоит из следующих модулей: загрузка базы
данных подсистемы; сортировка данных подсистемы; формирование запроса:
выбор примера; отображение списка ключевых слов; выбор ключевого слова;
отображение результатов поиска по запросу; ввод и редактирование примера
кода; интерпретация кода – отображение результата работы кода. Модуль
«Загрузка базы данных подсистемы ПРИМЕРЫ» предназначен для чтения
списка ключевых слов, а также соответствующих тем и адресов данных.
«Сортировка данных подсистемы ПРИМЕРЫ» предназначен для сортировки
списка ключевых слов, а также соответствующих тем и
адресов данных. «Формирование запроса» состоит из
трех
процедур.
Процедура
«Выбор
примера»
предназначена для выбора пользователем конкретного
примера. Список ключевых слов, соответствующий
выбранному примеру, отображается в окне ListBox.
Код, соответствующий примеру, отображается в окне
TextBox(рис.2.7).
Рисунок 2.7 – Код JavaScript
Модуль
ввода
и
редактирования
кода
предназначен для отображения кода из базы данных,
получения кода из буфера обмена, а также для
непосредственного
ввода
кода
с
клавиатуры
(рис.2.8).
Рисунок 2.8 – Простой код, скопированный с буфера обмена
Модуль, предназначенный для интерпретации кода отображает результат
работы кода в окне WebBrowser( рис.2.9).
Рисунок 2.9 – Отображение результатов работы кода
Модуль СПРАВКА предназначен для отображения справки о программе
и инструкции пользователя.
2.5 Тестирование ИС
Выполнено тестирование подсистем и модулей ИС, а также комплексное
тестирование
системы.
Тестирование
осуществлено
в
соответствии
с
подготовленной инструкцией для тестирования подсистем и модулей (табл.2.1).
Модули программы тестированы на основе данных из БД.
Таблица 2.1 - Тестирование модулей ИС
№
1
Действие пользователя
Подсистема ТЕОРИЯ
2
Запускает программу
3
Выбирает тему в меню
Вводит буквы ключевого слова с
клавиатуры в поле «ПОИСК»
4
5
Выбирает ключевое слово в списке
6
Выбор темы после отображения
информации
7
Выбор пункта «ПОИСК» после
выбора темы
8
Выбор пункта «ПОИСК» после
отображения информации
9
10
11
12
Выбор вкладки ТЕОРИЯ после
работ других вкладок
Подсистема СЛОВАРЬ
Выбирает вкладку СЛОВАРЬ
Выбирает тему в меню
13
Вводит буквы ключевого слова с
клавиатуры в поле ПОИСК
14
Выбирает ключевое слово в списке
15
Выбор пункта «ПОИСК» после
выбора темы
16
Выбор пункта «ПОИСК» после
отображения информации
17
Выбор вкладки СЛОВАРЬ после
работ других вкладок
Подсистема ПРИМЕРЫ
18
19
Выбирает вкладку ПРИМЕРЫ
20
Выбирает тему в меню
21
Вводит буквы ключевого слова с
клавиатуры в поле ПОИСК
22
Выбирает ключевое слово в списке
Реакция ИС
Открывается вкладка ТЕОРИЯ, появляется
упорядоченный список ключевых слов
Список ключевых слов сокращается для темы
В списке ключевых остаются слова,
начинающиеся на данную букву (буквы)
Скрываются список ключевых слов и поле
ввода. Отображается информация по
выбранному слову
Скрывается информационное поле.
Отображается список ключевых слов по теме и
поле ввода.
В списке ключевых слов отображаются все
слова
Скрывается информационное поле.
Отображается полный список ключевых слов и
поле ввода
Открывается вкладка ТЕОРИЯ, появляется
полный список ключевых слов
Да/Нет
да
да
да
да
да
да
да
да
да
Открывается вкладка СЛОВАРЬ, появляется
упорядоченный список ключевых слов
Список ключевых слов сокращается для
термина
В списке ключевых остаются слова,
начинающиеся на данную букву (буквы)
Скрываются список ключевых слов и поле
ввода. Отображается информация по
выбранному слову
В списке ключевых слов отображаются все
слова
Скрывается информационное поле.
Отображается полный список ключевых слов и
поле ввода
Открывается вкладка СЛОВАРЬ, появляется
полный список ключевых слов
да
да
да
да
да
да
да
да
Открывается вкладка ПРИМЕРЫ, появляется
упорядоченный список ключевых слов
Список ключевых слов сокращается для
примера
В списке ключевых остаются слова,
начинающиеся на данную букву (буквы)
Скрываются список ключевых слов и поле
ввода. Отображается поле ввода кода, кнопка
да
да
да
да
23
25
26
27
28
29
Выбор пункта «ПОИСК» после
выбора темы
Выбор вкладки ПРИМЕРЫ после
работ других вкладок
Подсистема СПРАВКА
Выбирает вкладку СПРАВКА
Выбирает пункт меню О
ПРОГРАММЕ
Выбирает пункт меню
ИНСТРУКЦИЯ
ПОЛЬЗОВАТЕЛЮ
ВЫПОЛНИТЬ и поле для отображения
примера.
В списке ключевых слов отображаются все
слова
Открывается вкладка СЛОВАРЬ, появляется
полный список ключевых слов
да
да
да
Открывается вкладка СПРАВКА, появляется
выбор пунктов меню
Отображается краткая информация о
программе
да
да
Отображается инструкция для пользователя,
основные моменты для работы в программе
да
2.6 Инструментальные средства разработки
Для
разработки
ИС
использованы
следующие
технические
и
программные средства: компьютер Lenovo (процессор – 2 ГГц., оперативная
память – 2 Гб); операционная система Windows 8; операционная среда
.NetFrameWork
4.5;
среда
программирования
VisualStudio
2013;
язык
программирования VisualBasic; текстовый процессор MicrosoftWord.
2.7
Эксплуатационные требования
Для успешной эксплуатации ИС требуются следующие технические и
программные средства: процессор с частотой 1ГГц; оперативная память не
менее 512 Мb; свободное дисковое пространство не менее 1 Gb; наличие
подключения к локальной сети; операционная система Windows 7, 8;
операционная среда .NETFrameWork.
Заключение
В результате проектирования создана информационная обучающая
система, предназначенная для обучения, а также для самостоятельной работы
студента. В ходе работы выполнено исследование предметной области:
скриптовых
языков.
программирования.
Выполнен
Определены
анализ
процесса
функциональные
обучения
языкам
требования
к
информационной системе. Разработан интерфейс системы. Разработана база
данных, в которую введены реальные данные: теоретические материалы,
примеры кода, словарь терминов. Разработаны подсистемы и модули
информационной системы, в том числе модуль выполнения кода. Выполнено
тестирование подсистем и модулей, а также комплексное тестирование.
Цель исследования достигнута. Система внедрена и используется при
обучении студентов специальностей 09.02.02 «Компьютерные сети», 09.02.03
«Программирование в компьютерных системах», 09.02.04 «Информационные
системы «по отраслям» (есть акт внедрения). Развитие системы предполагается
дополнением новых скриптовых языков.
Список использованной литературы
1. Балабошкин В.В., Кныш О.П. Основы программирования: JavaScript, Омск, 2012.
2. Балабошкин В.В., Кныш О.П. Основы программирования: Microsoft Visual Basic,
Омск, 2010.
3. ВайкА., ВагнерР. JavaScript. Энциклопедия пользователя. – К., 2001.
4. Вайк А. JavaScript в примерах. - Киев: ДиаСофт, 2005.
5. Вандер Вер Э. JavaScript для "чайников". - Диалектика, 2004.
6. Вейнер П. Языки программирования JAVA и JavaScript. - М: ЛОРИ, 2000.
7. Гарнаев А. Web-программирование на Java и JavaScript. - СПб.: БХВ СанктПеребург, 2002.
8. Глушаков С.В. Программирование web-страниц. Харьков, 2003.
9. Голицина О.Л., Попов И.И. Основы алгоритмизации и программирования:
Учеб.пособие. – М.: ФОРУМ: ИНФРА-М, 2008.
10. Гудман Д., Моррисон М.. JavaScript. Библия пользователя, 5-е издание. - М,
2006.
11. Макдоннел Дж. Основы современных алгоритмов. 2-е дополненное издание. –
М.: Техносфера, 2006.
12. Мак-Федрис П. Использование JavaScript. Специальное издание. - Диалектика,
2002.
13. Монкур М. JavaScript 1.3. - Вильямс, 2000.
14. Мэрдок К. JavaScript: наглядный курс создания динамических Web-страниц.
Уч.пос. – М., 2001.
15. Окулов С.М. Программирование в алгоритмах. – 2-е изд., испр. – М.: БИНОМ.
Лаборатория знаний, 2006.
16. Пауэлл, Томас; Шнайдер, Фриц Полный справочник по JavaScript; М.:
Вильямс; Издание 2-е, 2012.
17. Рева О.Н. Использование HTML, JavaScript и CSS. Руководство web-дизайнера.
М., 2008.
18. Семакин И.Г., Шестаков А.П. Основы программирования: Учебник для
сред.проф.образования – М.: Издательский центр «Академия, 2008.
19. Ташков П.А.: Веб-мастеринг: HTML, CSS, JavaScript, PHP, CMS, графика,
раскрутка. - СПб.: Питер, 2010.