Проверь свой JavaScript

Курсовая работа по предмету «Web-программирование»
Информация о работе
  • Тема: Проверь свой JavaScript
  • Количество скачиваний: 4
  • Тип: Курсовая работа
  • Предмет: Web-программирование
  • Количество страниц: 9
  • Язык работы: Русский язык
  • Дата загрузки: 2014-06-24 08:08:47
  • Размер файла: 877.03 кб
Помогла работа? Поделись ссылкой
Информация о документе

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

Если Вы являетесь автором текста представленного на данной странице и не хотите чтобы он был размешён на нашем сайте напишите об этом перейдя по ссылке: «Правообладателям»

Можно ли скачать документ с работой

Да, скачать документ можно бесплатно, без регистрации перейдя по ссылке:

Содержание

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. Приложение

Страница с вопросом


Страница добавления вопроса

Администрирование, просмотр списка вопросов



Администрирование, редактирование вопроса