Содержание
1. Описание………………………………………………………………...3
2. Используемые технологии……………………………………………..3
3. Структура сайта………………………………………………………...5
4. Некоторые особенности…………………………………………….….5
5. Описание базы данных…………………………………………………7
6. Заключение……………………………………………………………...8
7. Приложение...…………………………………………………………...9
1. Описание
JavaScript — очень простой, но в тоже время гибкий и глубокий язык программирования. Чтобы начать программировать на нем достаточно всего лишь нескольких минут ознакомления, но на постижение всех тонкостей и способов его использования могут потребоваться годы.
Цель моей курсовой работы — создать сайт «Проверь свой JavaScript!». Идея сайта проста — это сборник вопрос-ответов по языку JavaScript.
Сайт ориентирован на людей, которые уже знакомы с JavaScript, но еще не овладели всеми его хитростями и возможностями. Он не обучает азам JavaScript’а, он не заменяет книгу, на самом деле он даже не проверяет ваши знания, он помогает узнать тонкости языка о которых вы, возможно, не знали.
2. Используемые технологии
При выполнении работы я использовала:
django — серверный фреймворк на языке python,
python в качестве серверного языка программирования,
html, css, js — клиентская часть
sqlite3 — база данных (хорошо подходит для маленьких проектов)
jQuery — js-библиотека
highlightjs — js-библиотека
Немного подробнее:
Django — это свободный фреймворк для веб-приложений на языке Python, использующий шаблон проектирования MVC. Сайт на Django строится из одного или нескольких приложений, которые рекомендуется делать отчуждаемыми и подключаемыми.Для работы с базой данных Django использует собственный ORM, в котором модель данных описывается классами Python, и по ней генерируется схема базы данных.
Python —высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода. Python поддерживает несколько парадигм программирования, в том числе структурное, объектно-ориентированное, функциональное, императивное и аспектно-ориентированное. Основные архитектурные черты — динамическая типизация, автоматическое управление памятью, полная интроспекция, механизм обработки исключений, поддержка многопоточных вычислений и удобные высокоуровневые структуры данных. Код в Питоне организовывается в функции и классы, которые могут объединяться в модули (они в свою очередь могут быть объединены в пакеты).
HTML — стандартный язык разметки документов в интернете.Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG.
JavaScript — прототипно-ориентированный сценарный язык программирования.JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.
SQLite — компактная встраиваемая реляционная база данных.Слово «встраиваемый» означает, что SQLite не использует парадигму клиент-сервер, то есть движок SQLite не является отдельно работающим процессом, с которым взаимодействует программа, а предоставляет библиотеку, с которой программа компонуется и движок становится составной частью программы.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.
Hightlightjs — библиотекаJavaScript для подсветки синтаксиса кода.
3. Структура сайта
/ — главная страница, рассказывает о чем сайт, имеет ссылку «Начать проверку»
/<question_id> — страница с вопросом, слева располагается список всех вопросов, справа сам вопрос и ответ на него, ниже — кнопка «Случайный вопрос»
/new-question — страница, на которой пользователи могут отправить свой собственный вопрос на проверку администрации
/admin — страница администрирования
4. Некоторые особенности
Несмотря на кажущуюся простоту сайта, есть несколько нетривиальных задач, которые пришлось решить в процессе его написания.
Экранирование символов
В вопросах и ответах встречаются куски html кода, которые должны экранироваться. Но мы также хотим использовать html разметку для выделения текста курсивом и пр. Таким образом, текст вопроса может выглядеть следующим образом:
Чему будет равно значение переменной<i>elementCount</i>?
<html>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var elementCount = document.getElementsByTagName(“div”).length;
</script>
</body>
</html>
Где тэг <i>должен быть обработан как тэг, а весь остальной html код должен быть экранирован.
Для решения возникшей проблемы я стала разбивать текст на «параграфы», каждый из которых может иметь тип: «текст», «html-код» или «js-код». Если выбран тип «текст», то html символы не экранируются (для этого используется django’вский safe фильтр в html шаблоне). Если же выбран тип «html-код» или «js-код», то текст будет экранирован, а также сработает подсветка синтаксиса благодаря библиотеке highlightjs.
В итоге, код шаблона выглядит следующим образом:
{% for p in paragraphs %}
<p>
{% if p.language == "plain_text" %}
{{ p.text|safe }}
{% elif p.language == "js" %}
<pre><code class="hljs js">{{ p.text }}</code></pre>
{% elif p.language == "html" %}
<pre><code class="hljs html">{{ p.text }}</code></pre>
{% endif %}
</p>
{% endfor %}
Добавление новых вопросов
Пополнение базы вопросов — важная часть сайта. Администратор может добавлять вопросы через администрирование django. Но как обычные люди могут прислать свой вопрос? Можно было бы завести специальную учетную запись гостя в django’вской админке и дать права на добавление вопросов, но интерфейс и большое количество различных опций, которые админка django несет с собой, отпугнули бы людей.
Было решено сделать самым простым способом. Люди видят всего два поля: вопрос и ответ. Они вправе писать какой угодно текст (и просто текст и тэги, и js код). После отправки вопроса, администратор сайта видит в админ-панели django добавленный вопрос, форматирует его и утверждает. Только после этого вопрос отображается на сайте.
5. Описание базы данных
Общение с базой данных осуществляется при помощи django’вского ORM. То есть мы пишем классы на питоне, которые представляют собой таблицы в базе данных, эти классы имеют определенные методы, вызывая которые, мы совершаем запросы.
Описание базы данных в django осуществляется через так называемые модели (models.py).Модели можно представить в виде схемы следующим образом:
6. Заключение
В процессе выполнения курсовой работы, мною былиполучены практические навыки по работе с фреймворком django и его ORM.
Созданный сайт «Проверь свой JavaScript!» имеет право на существование в интернете и может принести пользу. Он завершен, но при этом ему есть куда расти. В будущем можно добавить такие функции: форма обратной связи, вопросы с выбором ответа, вопросы, где ответ нужно ввести в текстовое поле, подразделы в вопросах (например: «Азы JavaScript», «Регулярные выражения в JS», «jQuery» и другие).
Сайт получился простым, но от этого он только выигрывает: им удобно пользоваться, он понятен и интуитивен, не требует дополнительного времени на освоение. А выбранная тема как никогда актуальна, учитывая как быстро растет популярность JavaScript в последнее время.
7. Приложение
Страница с вопросом
Страница добавления вопроса
Администрирование, просмотр списка вопросов
Администрирование, редактирование вопроса
Проверь свой JavaScript
Курсовая работа по предмету «Web-программирование»