Размещено на http://www.allbest.ru/

Оглавление

Введение

1. Постановка задачи на разработку интерактивного учебника языка JavaScript

2. Аналитический обзор существующих решений

3. Проектирование

3.1 Разработка архитектуры ПП

3.2 Разработка функциональной схемы

4. Программирование

4.1 Описание особенностей программной реализации

5. Тестирование и отладка

6. Эксплуатация и сопровождение

Заключение

Список использованных источников

Приложения

Введение

На нынешнем этапе развития компьютерной техники сложно найти высококлассного специалиста, не владеющего информационными технологиями на достаточном уровне. Деятельность любого субъекта весьма значительно зависит как от уровня владения информацией, так и от способности эффективно ее обрабатывать. Для уверенной ориентации в информационных потоках современный специалист любого профиля вынужден уметь получать, обрабатывать и использовать информацию, как с помощью компьютеров, так и с помощью телекоммуникационных и других новейших средств связи, в том числе и иметь представление об языках программирования.

Компьютерная техника становится всё более общедоступной и компактной. А наличие всемирной сети Интернет делает компьютеры одним из наиболее удобных средств для обучения не только студентов и школьников, но и для самостоятельного обучения или даже повышения квалификации работников прочих организаций и структур. Одним из основополагающих факторов эффективности организации является уровень обучения персонала, тем более специализированным знаниям и его вклад в развитие конкурентоспособности сложно переоценить. Несомненно, образование не имеет права оставлять без внимания повсеместно протекающие процессы автоматизации.

Помимо этого, важность создания интерактивных учебников объясняется быстрым развитием системы обучения, появление новых методик, например, таких как:

· интерактивные учебники

· дистанционное обучение

· различные варианты электронного тестирования.

Повышается уровень насыщенности высокотехнологической техникой как учебных заведений, так и частного сектора. При всём этом одновременно при явных успехах компьютеризации, многие аспекты процессов обучения остаются не автоматизированы, хотя для этого имеются все предпосылки и возможности. И значительный объем процессов обучения по-прежнему выполняется человеком, в данном случае преподавателем.

Актуальность рассматриваемой темы вызвана также тем, что взрывообразное развитие компьютерных технологий запустило процесс появления новых знаковых систем для записи алгоритмов - языков программирования. В то же время наблюдается некоторый дефицит обученных специалистов.

На текущий момент JavaScript - один из популярнейших языков программирования для браузеров, его кроссплатформенность впечатляет. Он может работать под Windows, Linux, MacOS, а также и на мобильных платформах. JavaScript служит для управления сценариями просмотра гипертекстовых web-страниц со стороны клиента. Идея JavaScript заключается в том, что возможно менять значения атрибутов HTML-контейнеров и свойств среды при просмотре web-страницы пользователем. При этом отсутствует необходимость в принудительном обновлении страницы.

Реализация интерактивного учебника языка JavaScript позволит упростить доступ как к начальным этапам обучения языку, так и занятий по повышению квалификации, нуждающихся в этом специалистов

1. Постановка задачи на разработку интерактивного учебника языка JavaScript

Дипломный проект представляет собой интерактивный учебник языка программирования JavaScript. С помощью данного электронного учебника можно начать обучение программированию на языке JavaScript, в режиме онлайн т.е. при подключении к сети Интернет. Также планируется выполнение программного кода на языке JavaScript в браузере. Учебник содержит базовое введение в язык JavaScript, примеры программирования и работы с базами данных и конструирование на JavaScript динамических и интерактивных элементов Web-страниц, краткий теоретический материал по языку JavaScript и контрольные вопросы в виде короткого теста для проверки уровня понимания предложенного материала.

Современные технологии дают возможность реализовывать автоматические системы обучения, являющие из себя по сути комплекс программного обеспечения, учебных и теоретических материалов и средств технического сопровождения.

Этот интерактивный учебник необходим тем, желает заняться изучением актуальных языков программирования, в частности JavaScript, отработать и закрепить навыки написания кода, расширить свои знания. Здесь используется методика программного обучения, содержащая в себе только некоторый объём теоретических знаний, но также дающая на практике проверить уровень своих знаний и навыков.

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

Суммируя озвученные тезисы, можно выделить ряд направлений и проблем, которые можно решить путем разработки и реализации электронного интерактивного учебника по языку JavaScript. Для этого нужно учесть ряд факторов. Интерактивный учебник должен:

· содержать достаточный объем теоретических знаний;

· гарантировать простоту восприятия содержащейся информации;

· обладать дружественным интерфейсом, чтобы заинтересовать обучающегося в освоении данного предмета;

· быть эргономичным и простым в использовании.

Неотъемлемой частью интерактивного электронного пособия является возможность проведения самотестирования и проверки предложенного учащимся программного кода. Она предназначена для контроля и самоконтроля обучающегося.

2. Аналитический обзор существующих решений

Для начала необходимо сформулировать основные требования к современным учебным пособиям, которые должны обеспечивать как увеличение доли самостоятельной работы обучающегося, так и простоту в применении, повышенную информативность. Важным фактором является усиление мотивации к освоению изучаемого материала и доступность для всех желающих получить полноценное знание. Современные учебные пособи должны обеспечивать подготовку специалистов высокого класса и широкое использование современных средств телекоммуникации и современных информационных технологий.

Некоторые из вышеперечисленных требований трудно совместимы и зачастую взаимно противоречивы, отсюда разработка электронного учебного пособия представляет собой нетривиальную задачу, зачастую решаемую коллективом специалистов различного профиля, и соответственно подразумевает обоснованный выбор необходимого ПО.

Средства для создания электронных учебников можно распределить на группы по ряду показателей, таких как особенности применения, выполняемые функции, требования к техническому обеспечению:

· языки программирования;

· мультимедиа;

· гипертекстовые средства;

· специализированное ПО для создания электронных учебных пособий.

Языки программирования.

Современные визуальные среды программирования дают возможность создания весьма многофункциональных программных средств, к которым можно отнести и интерактивные электронные учебные пособия. В таблице 2.1 рассмотрены достоинства и недостатки данной группы средств.

Таблица 2.1 - Достоинства и недостатки языков программирования

Необходимо заметить, что с учётом текущего состояния обеспеченности компьютерной техникой в организациях сферы образования, применение программных средств для разработки электронных учебных пособий является малоприменимым. Средства программной разработки имеет смысл применять для создания отдельных элементов электронных учебных пособий с включением функционала интерактивности (модули тестирования, практические задания, виртуальные опыты и др.)

Мультимедиа. интерактивный программирование учебник

Сутью данных технологий является, что при соединении разных способов восприятия информации, таких как: информации в виде текста; статичных иллюстраций; анимированных изображений и звукового сопровождения, и возможности интерактивного восприятия и работы с суммой этой информации получается результат в виде объекта, содержащего учебный материал. Обычно, для этого используется некоторый набор, включающий в себя ряд технических и программных инструментов Средства мультимедиа дают возможность значительно улучшить восприятие учебного продукта благодаря привлечения разных видов восприятия информации. В таблице 2.2 рассмотрены достоинства и недостатки данной группы средств.

Таблица 2.2 - Достоинства и недостатки средств мультимедиа

Гипертекст.

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

Функционал технологии гипертекста вполне соответствует ряду предъявляемых к учебным пособиям запросов, как четкая, ярко выраженная структура, эргономичность в обращении. Существует возможность публикации такого учебного пособия в мировой глобальной сети и допускает возможность относительной простоты модификации. Существует много разных форматов гипертекста, например, HTML, PHP и прочие. В таблице 2.3 рассмотрены достоинства и недостатки средств гипертекста.

Таблица 2.3 - Достоинства и недостатки гипертекста

Специализированное ПО для разработки электронных учебных пособий.

В настоящее время существуют множество специализированных программных продуктов для разработки различных электронно-методических пособий. Достоинства и недостатки электронных учебников, созданных с помощью специальных программных средств указаны в таблице 2.4

Таблица 2.4 - Достоинства и недостатки специализированного ПО

Рассмотрим теперь данный аспект именно с точки зрения проектированию интерактивного учебника. Для этого нам нужно рассмотреть ряд факторов.

При проектировании электронного учебника необходимо выбирать в источники такие бумажные и интернет издания, которые максимально полно соответствуют требуемому направлению, краткие и максимально приемлемы для написания гипертекстов, включающие в себя значительное количество примеров и задач.

Логично разбиение обработанных данных на разделы, состоящие из модулей, небольших по объему, но цельных по содержанию, а также составляется глоссарий определений, которые необходимы и достаточны для освоения предмета.

Обрабатываются материалы источников в соответствии с наименованием и структурой модулей; убираются тексты, не вошедшие в списки, и добавляются те, которых нет в исходных материалах; вычисляются связи между элементами и прочие связи. Т.е. готовится проект гипертекста для электронной реализации. Гипертекст реализуется в компьютерной форме. В результате готовится примитивное электронное издание, которое уже может быть нацелено для использования в обучающих целях.

Проектируется компьютерная поддержка и руководства для обучающегося по применению интеллектуальной начинки электронного интерактивного учебника. После этого интерактивный учебник становится пригоден к дальнейшей модификации с помощью прочих средств представления. Отбираются данные для электронного воплощения. Меняются пути расшифровки отдельных терминов и определений и отбираются тексты.

Для улучшения процесса разработки (с точки зрения уменьшения затрат, трудоемкости и оптимизации технологии подготовки) и для гарантий качества проектируемых электронных интерактивных учебников необходимо обратить внимание:

· На емкую и однозначную структуризацию данных (по выбору критериев, по цельности, по количеству уровню вложенности и т.д.);

· Выбор необходимого и достаточного объема учебных элементов (темы, статьи, разделы и подразделы);

· Разумно разделение учебных статей на маленькие значащие фрагменты и легко усваиваемые порции;

· Эргономику, оформление и формат учебного текста (характеристики шрифтов, гарнитуры, цветовой компонент, способы верстки и т.д.);

· Выбор направленности, способа подачи обучающих статей, его формат;

· Принципы формирования суммы гиперссылок в учебных статьях: виды гиперссылок (смысловые и структурные), насыщенность гиперссылок в тексте;

· Использование необходимых заголовков структурных фрагментов обучающего материала и их оформление;

· Интенсивное формирование разнообразных графических элементов, таких как, неподвижных изображений и графиков, а также мультимедиа составляющие: аудио- и видео-элементы, фотографии, анимационные изображения, интерактивы, флэш-составляющие и т.д.

Фиксация и разработка данных проблем может дать высокий уровень подготовки и разработку учебных и прочих информационно-справочных данных для последующей дигитизации и формирования компьютерной версии.

3. Проектирование

Разработка должна быть проведена в три стадии: разработка технического задания; проектирование программного продукта; подготовка к тестированию и отладке.

На этапе разработки технического задания должны быть выполнены перечисленные ниже работы: постановка задачи; определение и уточнение требований к техническим средствам; определение требований к программе; определение стадий, этапов и сроков разработки программы и документации на неё; согласование и утверждение технического задания.

На стадии рабочего проектирования должны быть выполнены перечисленные ниже этапы работ: разработка программного продукта, куда входит как разработка архитектуры ПП, так и разработка функциональной схемы, и разработка организации информационной базы. Так же к этому этапу можно отнести и разработку программной документации. На этапе разработки программной документации должна быть выполнена разработка программных документов в соответствии с требованиями к составу документации.

3.1 Разработка архитектуры ПП

Под архитектурой программного обеспечения понимается общая масса наиболее важных решений об организации программной системы. Архитектура включает в себя, как выбор элементов структуры и соответствующих им интерфейсов, из которых собственно и состоит система, а также взаимодействие в рамках объединенной работы этих самых элементов.

Не менее важным является и объединение выбранных компонентов структуры и поведения в более крупные структуры. Также присущ архитектурный стиль, который и направляет всю систему - все элементы, интерфейсы, их сотрудничество и их соединение. Не существует традиционного определения "архитектуры программного обеспечения" не существует. Известно более 100 определений этого понятия.

Для соответствия проектируемого продукта различным атрибутам качества применяются несколько видов архитектурных шаблонов, так называемых паттернов. Каждый вид шаблона наиболее эффективен для решения определённых задач и соответственно имеет лишь ему присущие недостатки.

Ниже приведены примеры архитектурных шаблонов.

Многоуровневый шаблон. Система разбивается на подуровни, которые на диаграмме обычно располагаются друг над другом. Каждый из этих подуровней может вызывать только подуровень на 1 ниже него, что является несомненным плюсом данного шаблона. Т.е. разработку каждого отдельного подуровня можно вести независимо от других, что увеличивает возможность модификации системы. Недостатками данного подхода считается усложнение системы и в следствии этого некоторое снижение производительности.

Шаблон посредника. Система содержит значительное количество модулей и их прямое взаимодействие друг с другом становится слишком сложным. Для решения этого вводится некий посредник (например, шина данных), посредством которого модули обмениваются информацией. Таким образом, повышается функциональная совместимость модулей системы. Основные недостатки вытекают из факта наличия посредника: он является узким местом системы, при проблемах с пропускной способностью понижает производительность, его недоступность может сделать недоступной всю систему.

Шаблон "Модель-Представление-Контроллер". Требования к интерфейсу меняются чаще всего, то возникает потребность в частой модификации, при этом необходимо сохранить корректность действий с данными. Для этого в данном шаблоне интерфейс отделён от данных, что позволяет изменять интерфейсы. В этом шаблоне система состоит из: модели, которая хранит данные; представления, отображающего некоторую часть данных и взаимодействующего с пользователем; контроллера, который является посредником между видами и моделью. К недостаткам данного шаблона стоит отнести падение скорости работы системы, из-за усложнения взаимодействия.

Клиент-серверный шаблон. При ограниченном числе ресурсов, к которым требуется ограниченный правами доступ большого числа потребителей удобно применять клиент-серверную архитектуру. Такой подход повышает масштабируемость и доступность системы. Но при этом сервер потенциально является узким местом системы, при его недоступности становится недоступна вся система.

При разработке приложения будет использоваться шаблон посредника, как наиболее отвечающий требованиям задачи.

В качестве основного модуля используется web-страница с подгружаемыми к ней другими web-страницами. Связь организация организована с помощью фреймов. Через фреймы подгружается контент той или иной из представленных в проекте подсистем.

3.2 Разработка функциональной схемы

Под структурной схемой программного продукта понимается сумма всех элементарных звеньев и связей между ними, один из видов графической модели. Под элементарным звеном понимают часть объекта или системы управления, которая реализует элементарную функцию. На рис. 3.1 представлена структурная схема разработанной программы.



Рисунок 3.1 - Структурная схема программного продукта

Функциональная схема - схема взаимодействия компонентов программного обеспечения с описанием информационных потоков, состава данных в потоках и указанием используемых файлов и устройств. Для изображения функциональных схем используют специальные обозначения, установленные стандартом. На рис. 3.2 представлена функциональная схема программного продукта.

Рисунок 3.2 - Функциональная схема программного продукта

4. Программирование

Представленный программный продукт, содержит в себе группу html-файлов, файлы стилей. Традиционно основным файлом является файл index.html, который через фреймы взаимодействует с другими файлами входящими в данный проект. На рисунке 4.1 изображена структура проекта с указанием файлов, входящих в проект.

Рисунок 4.1 - Схема проекта, с указанием задействованных файлов

В подсистему "Теория" включен файл theory.html, представляющий собой по сути список теоретических вопросов, рассматриваемых в данном разделе и взаимодействующий с через фрейм с основным файлом index.html, а также взаимодействующий с файлами содержащие статьи по теории JavaScript. На базе основной страницы проекта index.html, в два подключенных фрейма подгружается контент данной подсистемы. В одном из фреймов отображается список статей с теорией по языку JavaScript, параллельно с этим в другом фрейме отображается содержимое web-страницы со статьей на выбранную пользователей тему.

В подсистему "Практика" включен файл examples.html, являющийся отображением списка примеров кода на JavaScript, предлагаемых в данном разделе. Взаимодействует с основным модулем через фрейм. Через другой фрейм выводит на web-странице выбранный пример кода JavaScript. При выборе на основной web-странице проекта подсистемы "Практика" в одном из фреймов отображается список предложенных примеров с кодом JavaScript, в другом же фрейме отображается выбранный пример.

В подсистему "Тестирование" входит файл test.html, включающий в себя короткий тест по теории JavaScript, состоящий из 9 вопросов, с возможностью выбрать один из четырёх вариантов ответа. По окончанию тестирования, т.е. после ответа на все вопросы и нажатия кнопки "Показать результат" пользователю показывается итог тестирования с количеством правильных ответов.

В подсистему "Руководство" входит файл tutorial.html, содержащий руководство пользователя, содержащую важную для пользователя информацию о проекте.

4.1 Описание особенностей программной реализации

Подсистема "Теория" (рисунок 4.2) включает в себя группу файлов html-формата, содержащие краткую теоретическую информацию по языку JavaScript, в частности термины и некоторые определения.

Рисунок 4.2 - Пример статьи "Основные понятия" из подсистемы "Теория"

В подсистеме также содержится информация по основным компонентам языка, их описаниям и пояснениям (рисунок 4.3).



Рисунок 4.3 - Пример статьи "Оператор if" из подсистемы "Теория"

Подсистема "Практика" включает в себя описание и примеры решения задач на языке JavaScript (рисунок 4.4), с возможностью опробовать их в прилагаемом редакторе, реализованном на web-странице, с возможностью исполнения этого кода.

Рисунок 4.4 - Пример неверного кода из подсистемы "Практика"

Также в подсистеме "Практика" предоставляется возможность пользователю отредактировать предоставленный код, с целью устранения специально допущенных в коде неточностей.



Рисунок 4.5 - Пример верного кода из подсистемы "Практика"

Подсистема "Тестирование" (рисунок 4.6) позволяет пройти небольшой тест обучающимся с целью проверки правильности и целостности их знаний.

Рисунок 4.6 -Запущено тестирование в подсистеме "Тестирование"

Включает в себя файл html-формата, содержащий вопросы теста. Выходная информация представлена результатами тестирования, отображаемыми на экране тестируемого, пример показан на рисунке 4.7.



Рисунок 4.7 - Просмотр итогов тестирования в подсистеме "Тестирование"

Подсистема "Руководство" (рисунок 4.8) содержит в себе руководство пользователя, а также краткое описание структуры программного продукта, данные подсистемы выводятся в окне браузера.

Рисунок 4.8 - Просмотр руководства пользователя в подсистеме "Руководство"

5. Тестирование и отладка

Сервисы и методы тестирования могут быть различными, однако с самого начала нужно определиться со стратегией и придерживаться её. Основные виды или работы при тестировании:

· Соотнесение фактического дизайна утвержденному в ТЗ;

· Проверка верстки на валидность;

· Функциональное тестирование;

· Нагрузочное тестирование;

· Тестирование безопасности сайта;

· Тестирование совместимости.

Ни одна разработка сайта не обходится без ошибок в дизайне. Точно сопоставить макет к готовому дизайну не так просто, так как проверять нужно каждый элемент и вид страниц. Причем мобильная и планшетная версии требуют еще больше внимания и моделирования возможных адаптаций под каждый гаджет. Чтобы фактический дизайн максимально соотносился утвержденному в техническом задании. Требования варьируются от проекта к проекту в зависимости от разновидности сайта и индивидуальных предпочтений клиента, поэтому список элементов для проверки стоит включить только основные:

· Шрифты.

· Цвет. Проверьте на соответствие плану цветовую гамму сайта - шрифтов, иконок, линий, кнопок, фона различных блоков и навигационных панелей.

· Заголовок (h1). Он должен выделяться от текста, по меньшей мере, увеличенным размером и быть уникальным и единственным для каждой страницы. Заголовок h1 служит темой страницы, допустим, для блога таким заголовком будет название статьи.

· Подзаголовки (h2-h3). Они также обычно отличаются от абзацев, но могут повторяться и быть на странице в любом необходимом количестве. Пример - подтема статьи блога.

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

· Списки. Чтобы перечисления эффектно выглядели на странице, выделите маркеры списка цветом отличным от текстового (вот как нумерация этого списка перед каждым пунктом).

· Абзацы и отступы. Расстояние между любыми элементами сильно влияет на впечатления, которые получит пользователь при контакте с вашим контентом и сайтом в целом. Уделите этому внимание. Проверьте расстояние между абзацами, списком и абзацами, заголовком и абзацем, отступы блочных элементов и так далее.

· Расположение. Может быть так, что один из блоков на сайте не отцентрован или наоборот находится посередине, а на макете визуализировано другое положение.

Чтобы разработанный веб ресурс одинаково отображался в различных браузерах, тратилось меньше времени на его загрузку и поисковые системы лучше понимали контент, обязательным пунктом в тестировании является проверка на валидность.

Существует стандарт, определяющий нормы и правила сайтостроения - Консорциум Всемирной паутины (W3C). На его основе разработан сервис W3C Markup Validation. Проверьте в нем свой сайт. Если "вылезло" много ошибок, обратитесь к веб-мастеру для их устранения. Часть из них может остаться даже после исправлений, но не быть критичными.

Функциональное тестирование - это один из самых затратных по времени видов тестирования, требующий правильные расчеты функций. Например, возьмем интернет-магазин, у которого есть не только акции на товары, но и множество статусов при покупке, определенное число товаров - все комбинации нужно проверить. Функционал зависит от типа проверяемого ресурса, но есть базовые элементы, на что стоит обратить внимание:

· Тестирование пользовательских форм (к примеру, оставить заявку, написать в форме обратной связи, оставить комментарий или отзыв);

· Проверка работоспособности поиска и релевантности результатов выдачи;

· Тестирование навигации - переходы по ссылкам для обнаружения нерабочих;

· Проверки подгрузки файлов на сервер;

· Опробование регистрационной формы и авторизации.

Чтобы предотвратить неожиданное прекращение работы сайта в час пик посещения пользователей, важно провести нагрузочное тестирование. Для этого существуют сервисы, которые имитируют постепенное увеличение находящихся на сайте пользователей. Если время загрузки сайта остается прежним, что и на уровне с небольшим трафиком, в таком случае проблема не наблюдается. Для интернет-магазинов тестировать можно и осуществление одновременных транзакций, чтобы получить время отклика всех самых важных бизнес-функций.

Основные объекты проверки на уязвимость - это контроль доступа, диагностика аутентификации, валидация входных значений, криптография, механизмы обработки ошибок, интеграция со сторонними сервисами, проверка устойчивости сайта к Dos/DDos атакам, конфигурация сервера

Все выявленные сбои и ошибки в работе программного продукта были выявлены и устранены. На момент выпуска, программа полностью стабильна.

6. Эксплуатация и сопровождение

Стоит перечислить требования к условиям эксплуатации электронного интерактивного учебника JavaScript.

Требования к оборудованию: в состав технических средств должен входить персональный компьютер, включающий в себя:

32-разрядный (x86) или 64-разрядный (x64) процессор с тактовой частотой 1 ГГц или выше; 1 Гб (для 32-разрядного процессора) или 2 Гб (для 64-разрядного процессора) ОЗУ; 100 Мб свободного места на жестком диске; графическое устройство DirectX 9 или более поздней версии.

Системные программные средства, используемые программой, должны быть представлены русскоязычной версией операционной системы Windows 7/10.

К числу совместимых браузеров относятся: также браузеры версий Firefox 54 (версии 54-59 требуют дополнительной настройки через about:config), Chrome 60 (версия 60 требует дополнительной настройки через about:flags), Opera 47 (версия 47 требует дополнительной настройки через about:flags), Edge 15 (версия 15 требует дополнительной настройки через about:flags) и старше. Программа не должна для корректной работы требовать привилегий системного администратора.

Заключение

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

При необходимости он может быть легко интегрирован на web-сервер для работы с ним по сети или использоваться в качестве отдельного приложения, которое при этом его не надо инсталлировать в операционную систему. В учебнике представлена информация, как в текстовом и графическом варианте, так и в виде интерактивных элементов, в частности примеров кода языка JavaScript с возможностью их модификации.

В теоретической части учебника представлена информация о базовых структурах, основных определениях и терминах языка JavaScript. В практической части учебника представлены примеры кода на языке JavaScript, для изучения в экспериментальной форме. В программном продукте все информация на русском языке, что несомненно облегчит усвоение материала. После изучения теоретического и практического разделов проекта можно пройти тестирование, с целью получить информацию об уровне овладения полученной информацией.

Список использованных источников

1. Дронов, В. JavaScript в Web-дизайне / В. Дронов. - М.: СПб: БХВ, 2014. - 880 c

2. Нильсен Якоб "Веб-дизайн" - М.: Символ-Плюс, 2003 - 512 с.

3. Ташков П.А. Веб-мастеринг. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка. - СПб.: Питер, 2010. - 512 с.

4. Вирин Ф. Интернет-маркетинг. Полный сборник практических инструментов. - М.: "Эксмо", 2012. - 288 с.

5. Рейсиг Д. JavaScript. Профессиональные приемы программирования. - СПб.: "Питер", 2008. - 352 с.

6. Стефанов С. JavaScript. Шаблоны. - М.: "Символ-Плюс", 2011. - 272 с.

7. Электронный курс по дисциплине web-технологии [Электронный ресурс] - Режим доступа: http://it.fitib.altstu.ru/neud/www/index.php

8. Сайт для веб разработчиков на русском языке. [Электронный ресурс] - Режим доступа: https://schoolsw3.com

Приложения

Приложение 1.

(справочное)

Краткое руководство пользователя

Предполагается, что вы имеете:

· общее представление о сети Internet и World Wide Web (WWW);

· имеете некоторые знания о HyperText Markup Language (HTML);

· некоторый опыт программирования;

1. Общая структура интерактивного учебника

Для заполнения учебно-методическим материалом содержимого электронного интерактивного учебника используется структура разработанного шаблона. Структура учебника представляет собой ряд элементов, выполняющих определенные функции и составляющих единую систему интерактивного учебника. Рассмотрим перечень основных элементов структуры учебника:

· файл "index.html" (это файл запуска интерактивного учебника, который является контейнером для всех остальных загружаемых элементов);

· файл "theory.html" (это файл запуска подсистемы "Теория", используется основным модулем проекта);

· файл "examples.html" (это файл запуска подсистемы "Практика", используется основным модулем проекта);

· файл "test.html" (это файл запуска подсистемы "Тестирование", используется основным модулем проекта);

· файл "tutorial.html" (это файл, содержащий данное руководство);

· папка "js" (папка содержащая файлы программного кода, обеспечивающие работу учебника);

· папка "css" (содержит файл с описанием таблиц стилей определяющих визуальное оформление учебника);

· папка "img" (содержит файлы графических изображений используемых для оформления учебника);

· папка "articles" (содержит файлы статей, содержащих теоретический материал для использования в разделе "Теория");

· папка "tasks" (содержит файлы примеров и заданий из раздела "Практика").

2. Запуск интерактивного учебника

Для запуска проекта необходимо запустить файл index.html в любом современном браузере. Ниже представлен список допустимых браузеров. К числу совместимых браузеров относятся: также браузеры версий Firefox 54 (версии 54-59 требуют дополнительной настройки через about:config), Chrome 60 (версия 60 требует дополнительной настройки через about:flags), Opera 47 (версия 47 требует дополнительной настройки через about:flags), Edge 15 (версия 15 требует дополнительной настройки через about:flags) и старше.

3. Регистрация пользователя

Для работы в интерактивном учебнике не требуется создания учетной записи пользователя. Это сделано с целью упрощения доступа к продукту и максимальному охвату возможной аудитории.

4. Навигация в интерактивном учебнике

При запуске основного модуля пользователь попадает на основной экран программного продукта. Слева представлено меню состоящее из четырёх пунктов:

· раздел "Теория"

· раздел "Практика"

· раздел "Тестирование"

· раздел "Руководство"

В центральной части web-страницы содержатся два фрейма для отображения содержимого активного раздела. При входе в раздел "Теория" отображается список статей по теории JavaScript и текстовая информация активной статьи. При входе в раздел "Практика" отображается список примеров кода JavaScript и кода активной примера с возможностью его редактирования. При входе в раздел "Тестирование" запускается короткий тест по теории JavaScript, с возможностью просмотра результатов после прохождения теста. При входе в раздел "Руководство" можно прочитать текст этого документа.

Приложение 2.

(справочное)

Листинг index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content="электронный учебный курс">

<title>JavaScript Tutor</title>

<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />

<link href="css/curs.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id="header">

<h1>Интерактивный учебник языка JavaScript</h1>

</div>

<div id="content">

<frameset >

<iframe width="250" height="450" src="file:///D:/site/mysite/theory.html" name="iframe_thin" frameborder="1" scrolling="auto"> </iframe>

<iframe width="770" height="450" src="file:///D:/site/mysite/welcome.html" name="iframe_thick" frameborder="1" scrolling="auto"> </iframe>

</frameset>

</div>

<h1>

<div id="nav">

<ul>

<li>

<a href="file:///D:/site/mysite/theory.html" target="iframe_thin">Теория</a>

</li><li>

<a href="file:///D:/site/mysite/examples.html"target="iframe_thin">Практика</a>

</li><li>

<a href="file:///D:/site/mysite/test.html"target="iframe_thick">Тестирование</a>

</li><li>

<a href="file:///D:/site/mysite/tutorial.html"target="iframe_thick">Руководство</a>

</li>

</ul>

</div>

</h1>

</div>

</body>

</html>

Приложение 3.

(справочное)

Листинг test.html

<HTML>

<HEAD>

<TITLE></TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1251">

<SCRIPT language=JavaScript>

var

var length = scrtxt.length;

var width = 100;

var pos = -(width + 2);

function scroll() {

pos++;

var scroller = "";

if (pos == length)

{

pos = -(width + 2);

}

if (pos < 0) {

for (var i = 1; i <= Math.abs(pos); i++)

{

scroller = scroller+" ";}

scroller = scroller + scrtxt.substring(0, width - i + 1);

}

else {

scroller = scroller + scrtxt.substring(pos, width + pos);

}

window.status = scroller;

setTimeout("scroll()", 100);

}

</SCRIPT>

<style>

.right_answer {

font-weight: 900;

color: #00CC00; /* Цвет текста */

}

.no_answer {

font-weight: normal;

color: #000000; /* Цвет текста */

}

</style>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>

<BODY bgColor=white onload=scroll()>

<SCRIPT language=JavaScript>

var res="413223413"

function check_me()

{

var count=0

with(document.test)

{

if (!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked)

{count+=1};

if (!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked)

{count+=1};

if (!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked)

{count+=1};

if (!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked)

{count+=1};

if (!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked)

{count+=1};

if (!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked)

{count+=1};

if (!Q7[0].checked&&!Q7[1].checked&&!Q7[2].checked&&!Q7[3].checked)

{count+=1};

if (!Q8[0].checked&&!Q8[1].checked&&!Q8[2].checked&&!Q8[3].checked)

{count+=1};

if (!Q9[0].checked&&!Q9[1].checked&&!Q9[2].checked&&!Q9[3].checked)

{count+=1};

if (count>0) <!-- Вычисление и проверка все ли задания выполнены -->

{alert("Вы ответили не на все вопросы. Проверьте себя.")

}

else answer()

}

}

function control(k,f1,f2,f3,f4,f5,f6,f7,f8,f9)

{

if (k==1&&f1.checked) return true;

if (k==2&&f2.checked) return true;

if (k==3&&f3.checked) return true;

if (k==4&&f4.checked) return true;

if (k==5&&f5.checked) return true;

if (k==6&&f6.checked) return true;

if (k==7&&f7.checked) return true;

if (k==8&&f8.checked) return true;

if (k==9&&f9.checked) return true;

return false;

}

function answer()

{

answ="";

with(document)

{

answ+=control(res.charAt(0),test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3])?"1":"0"

answ+=control(res.charAt(1),test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3])?"1":"0"

answ+=control(res.charAt(2),test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3])?"1":"0"

answ+=control(res.charAt(3),test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3])?"1":"0"

answ+=control(res.charAt(4),test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3])?"1":"0"

answ+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?"1":"0"

answ+=control(res.charAt(6),test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3])?"1":"0"

answ+=control(res.charAt(7),test.Q8[0],test.Q8[1],test.Q8[2],test.Q8[3])?"1":"0"

answ+=control(res.charAt(8),test.Q9[0],test.Q9[1],test.Q9[2],test.Q9[3])?"1":"0"

<!--Анализ результатов -->

showResult();

}

}

function showResult()

{

var nok=0;

var i,s;

for (i=0;i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;}

document.test.s1.

value="Количеств правильных ответов: "+nok+" из "+answ.length+". Правильные варианты ответов подсвечены зелёным цветом.";

with(document.test)

{

document.getElementById('tq01_4').className = 'right_answer';

document.getElementById('tq02_1').className = 'right_answer';

document.getElementById('tq03_3').className = 'right_answer';

document.getElementById('tq04_2').className = 'right_answer';

document.getElementById('tq05_2').className = 'right_answer';

document.getElementById('tq06_3').className = 'right_answer';

document.getElementById('tq07_4').className = 'right_answer';

document.getElementById('tq08_1').className = 'right_answer';

document.getElementById('tq09_3').className = 'right_answer';

}

}

</SCRIPT>

<FORM name=test>

<H3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Короткий тест по теории языка JavaScript </H3>

<OL>

<LI>

<H4>Какая арифметическая операция приведёт к ошибке в JavaScript?</H4>

<div style="display:flex"><INPUT type=radio name=Q1><div id="tq01_1"> Деление на ноль</div></div>

<div style="display:flex"><INPUT type=radio name=Q1><div id="tq01_2"> Корень из отрицательного числа</div></div>

<div style="display:flex"><INPUT type=radio name=Q1><div id="tq01_3"> Умножение числа на строку</div></div>

<div style="display:flex"><INPUT type=radio name=Q1><div id="tq01_4"> Никакая из вышеперечисленных</div></div><BR>

<LI>

<H4>Является ли язык JavaScript является подвидом языка Java?</H4>

<div style="display:flex"><INPUT type=radio name=Q2><div id="tq02_1"> Нет </div></div>

<div style="display:flex"><INPUT type=radio name=Q2><div id="tq02_2"> Да </div></div>

<div style="display:flex"><INPUT type=radio name=Q2><div id="tq02_3"> Скорее наоборот, язык Java - один из подвидов языка JavaScript </div></div>

<div style="display:flex"><INPUT type=radio name=Q2><div id="tq02_3"> По сути - это одно и тоже </div></div><BR>

<LI>

<H4>Правда ли, что JavaScript используется для разработки веб-приложений только со стороны клиента?</H4>

<div style="display:flex"><INPUT type=radio name=Q3><div id="tq03_1"> Да, только для разработки со стороны клиента </div></div>

<div style="display:flex"><INPUT type=radio name=Q3><div id="tq03_2"> Нет, только для разработки со стороны сервера </div></div>

<div style="display:flex"><INPUT type=radio name=Q3><div id="tq03_3"> Возможно использование для обоих способов разработки веб-приложений </div></div>

<div style="display:flex"><INPUT type=radio name=Q3><div id="tq03_4"> Разработка веб-приложений не подразумевает такого разделения </div></div><BR>

<LI>

<H4>Что такое DOM-объект?</H4>

<div style="display:flex"><INPUT type=radio name=Q4><div id="tq04_1"> объекты предлагаемые самим языком </div></div>

<div style="display:flex"><INPUT type=radio name=Q4><div id="tq04_2"> объекты документа определенной консорциумом W3C </div></div>

<div style="display:flex"><INPUT type=radio name=Q4><div id="tq04_3"> объекты созданные программистом, которые имеют структуру и сущность </div></div>

<div style="display:flex"><INPUT type=radio name=Q4><div id="tq04_4"> объекты не влияющие на внешний вид веб-страницы </div></div><BR>

<LI>

<H4>Как называются объекты, отвечающие, что содержится на веб-странице?</H4>

<div style="display:flex"><INPUT type=radio name=Q5><div id="tq05_1"> пользовательские </div></div>

<div style="display:flex"><INPUT type=radio name=Q5><div id="tq05_2"> клиентские </div></div>

<div style="display:flex"><INPUT type=radio name=Q5><div id="tq05_3"> страничные </div></div>

<div style="display:flex"><INPUT type=radio name=Q5><div id="tq05_4"> встроенные </div></div><BR>

<LI>

<H4>Как называются события, которые генерируются по истечении определенных промежутков времени?</H4>

<div style="display:flex"><INPUT type=radio name=Q6><div id="tq06_1"> асинхронные </div></div>

<div style="display:flex"><INPUT type=radio name=Q6><div id="tq06_2"> синхронные </div></div>

<div style="display:flex"><INPUT type=radio name=Q6><div id="tq06_3"> событие таймера </div></div>

<div style="display:flex"><INPUT type=radio name=Q6><div id="tq06_4"> ждущие </div></div><BR>

<LI>

<H4>Какие конструкции для циклов есть в JavaScript?</H4>

<div style="display:flex"><INPUT type=radio name=Q7><div id="tq07_1"> всего две: for и while </div></div>

<div style="display:flex"><INPUT type=radio name=Q7><div id="tq07_2"> всего одна: for </div></div>

<div style="display:flex"><INPUT type=radio name=Q7><div id="tq07_3"> четыре: for, repeat...until, while и do...while </div></div>

<div style="display:flex"><INPUT type=radio name=Q7><div id="tq07_4"> всего три: for, while и do...while </div></div><BR>

<LI>

<H4>Есть ли разница между вызовами i++ и ++i?</H4>

<div style="display:flex"><INPUT type=radio name=Q8><div id="tq08_1"> Разница в значении, которое возвращает такой вызов </div></div>

<div style="display:flex"><INPUT type=radio name=Q8><div id="tq08_2"> Разница в значении i после вызова </div></div>

<div style="display:flex"><INPUT type=radio name=Q8><div id="tq08_3"> Разница лишь в скорости инкрементирования </div></div>

<div style="display:flex"><INPUT type=radio name=Q8><div id="tq08_4"> Нет никакой разницы </div></div><BR>

<LI>

<H4>Чему равна сумма [ ] + 1 + 2?</H4>

<div style="display:flex"><INPUT type=radio name=Q9><div id="tq09_1"> NaN </div></div>

<div style="display:flex"><INPUT type=radio name=Q9><div id="tq09_2"> undefined </div></div>

<div style="display:flex"><INPUT type=radio name=Q9><div id="tq09_3"> 12 </div></div>

<div style="display:flex"><INPUT type=radio name=Q9><div id="tq09_4"> Другое </div></div><BR>

</LI></OL><BR>

<CENTER>

<P><TEXTAREA name=s1 rows=4 cols=90> </TEXTAREA> </P>

<INPUT onclick=check_me() type=button value="Показать результат">&nbsp;&nbsp;&nbsp;&nbsp;

</CENTER><BR><BR></FORM>

<P>

<P></P></FONT></BODY></HTML>

Приложение 4.

(справочное)

Листинг theory.html

<html>

<head>

</head>

<body>

<ul>

<li><a href="file:///D:/site/mysite/articles/article0010.html" target="iframe_thick">1. Основные понятия</a></li>

<li><a href="file:///D:/site/mysite/articles/article0020.html" target="iframe_thick">2. Размещение JavaScript</a></li>

<li><a href="file:///D:/site/mysite/articles/article0030.html" target="iframe_thick">3. Обработчик событий</a></li>

<li><a href="file:///D:/site/mysite/articles/article0040.html" target="iframe_thick">4. Создание функций</a></li>

<li><a href="file:///D:/site/mysite/articles/article0050.html" target="iframe_thick">5. Параметры функций</a></li>

<li><a href="file:///D:/site/mysite/articles/article0060.html" target="iframe_thick">6. Объект math</a></li>

<li><a href="file:///D:/site/mysite/articles/article0070.html" target="iframe_thick">7. Оператор if</a></li>

<li><a href="file:///D:/site/mysite/articles/article0080.html" target="iframe_thick">8. Оператор switch</a></li>

<li><a href="file:///D:/site/mysite/articles/article0090.html" target="iframe_thick">9. Циклы for и while</a></li>

<li><a href="file:///D:/site/mysite/articles/article0100.html" target="iframe_thick">10. Массивы</a></li>

<li><a href="file:///D:/site/mysite/articles/article0110.html" target="iframe_thick">11. Работа со строками</a></li>

</ul>

</body>

Приложение 5.

(справочное)

Листинг examples.html

<html>

<head></head>

<body>

<ul>

<li><a href="file:///D:/site/mysite/tasks/task001.html" target="iframe_thick">001. Приветствие</a></li>

<li><a href="file:///D:/site/mysite/tasks/task002.html" target="iframe_thick">002. Шрифты</a></li>

<li><a href="file:///D:/site/mysite/tasks/task003.html" target="iframe_thick">003. Цвет текста</a></li>

<li><a href="file:///D:/site/mysite/tasks/task004.html" target="iframe_thick">004. Строки</a></li>

<li><a href="file:///D:/site/mysite/tasks/task005.html" target="iframe_thick">005. Вычитание</a></li>

<li><a href="file:///D:/site/mysite/tasks/task006.html" target="iframe_thick">006. Сложение</a></li>

<li><a href="file:///D:/site/mysite/tasks/task007.html" target="iframe_thick">007. Сумма переменных</a></li>

<li><a href="file:///D:/site/mysite/tasks/task008.html" target="iframe_thick">008. Вычисление площади</a></li>

<li><a href="file:///D:/site/mysite/tasks/task009.html" target="iframe_thick">009. Логические переменные</a></li>

<li><a href="file:///D:/site/mysite/tasks/task010.html" target="iframe_thick">010. Сравнение</a></li>

<li><a href="file:///D:/site/mysite/tasks/task011.html" target="iframe_thick">011. Комментарии</a></li>

<li><a href="file:///D:/site/mysite/tasks/task012.html" target="iframe_thick">012. Спецсимволы</a></li>

<li><a href="file:///D:/site/mysite/tasks/task013.html" target="iframe_thick">013. Циклы</a></li>

<li><a href="file:///D:/site/mysite/tasks/task014.html" target="iframe_thick">014. Текущее время</a></li>

</ul>

</body>

Размещено на Allbest.ru

...