Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
PAGE \* MERGEFORMAT- 3 -
Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования
«Глазовский государственный педагогический институт
имени В. Г. Короленко»
Кафедра информатики, теории и методики обучения информатике
СОЗДАНИЕ ИНФОРМАЦИОННО-ПОИСКОВОГО AJAX ПРИЛОЖЕНИЯ НА ОСНОВЕ JS-ФРЕЙМВОРКА
Курсовая работа
студента 145 группы
факультета информатики, физики и математики
Владыкина Анатолия Владимировича
Научный руководитель: Казаринов А.С.,
доктор педагогических наук, профессор.
Дата защиты курсовой работы: ________
Оценка: ____________________________
оценка и подпись научного руководителя
Глазов, 2013
Оглавление
Введение…………………………………………………………………….…3
§1. Что такое фреймворк. JS-фреймворки…………..……………………....5
§2. Фреймворк jQuery. Технология Ajax…………………………………....6
Заключение…………………………………………………………………...18
Список литература………………………………………………………...…19
Введение
JavaScript – объектно-ориентированный скриптовый язык, широко применяемый, в настоящее время, для программирования клиентских Web-приложений. На сегодняшний день, сложно представить современные интерактивные сайты без использования этого скриптового языка. Поначалу этот язык использовался для создания довольно простых эффектов, но с приходом «эры» Web 2.0 и технологии Ajax роль языка JavaScript значительно возросла, и этот язык стал основой для создания динамической и интерактивной части современных сайтов. Для облегчения написания приложений на языке JavaScript существует множество разнообразных фремворков, например, jQuery.
Таким образом, является актуальным изучение JavaScript фреймворков и технологии Ajax, для дальнейшего написания различных Web-приложений с их использованием.
Предмет изучения – анализ литературы по JS-фреймворкам и технологии Ajax. Объектом изучения является JavaScript фреймворки. Цель данной курсовой работы – рассмотреть различные JavaScript фреймворки, технологии Ajax, разработать и написать клиентское приложение на основе одного из фреймворков.
Задачи курсовой работы:
- изучить назначение фремворков и рассмотреть наиболее популярные JavaScript фреймворки;
- изучить литературу по использованию фремворка jQuery и технологии Ajax;
- разработать Ajax приложение на основе jQuery;
- написать Ajax приложение на основе фреймворка jQuery.
Первый параграф посвящен изучению понятия «фреймворк» и рассмотрению нескольких наиболее популярных JavaScript фреймворков.
Во втором параграфе рассматривается синтаксис языка JavaScript при использовании jQuery, а так же операторы для работы с Ajax.
В третьем параграфе приведен пример Ajax приложения на языке JavaScript и php, которое наглядно иллюстрирует работу jQuery и технологии Ajax.
§1. Что такое фреймворк. JS-фреймворки.
Фреймворк с английского переводится как каркас или структура. Он представляет собой структуру программной системы. Фреймворк – это программное обеспечение, облегчающее разработку и объединение разных компонентов большего программного проекта. Так же, широко используется слово «каркас».
В зависимости от поставленных целей и задач, для разработки программного продукта из великого множества языков программирования может использоваться тот или иной язык. Этим и обуславливается большое разнообразие фреймворков, например, bluetrip (css), phalcon (php), jQuery (javascript), platinum (C++) и так далее.
Как уже говорилось выше, современные интерактивные веб-приложения сложно создать без использования javascript. С приходом эпохи web 2.0 и технологии ajax появилось множество подобных фреймворков. Ниже я кратко рассмотрю несколько наиболее распространенных js-фреймворков и выберу один из них для создания ajax приложения.
jQuery – один из самых популярных и распространенных js-фреймворков, фокусирующийся на взаимодействии JavaScript и HTML. Также jQuery удобен для работы с Ajax. Данный фреймворк удачно сохраняет баланс между хорошей функциональностью и компактностью. jQuery очень выгоден для разработки малых и средних приложений, но проблематичен при разработке крупных проектов.
Второй по популярности js-фреймворк – Prototype. Он значительно упрощает работу с Ajax и некоторыми другими продвинутыми js-возможностями. Данный фреймворк удобен для проектирования средних проектов благодаря своему простому функционалу. Производительность у него несколько нестабильна: некоторые операции выполняются быстро, другие – значительно медленнее.
ExtJS – не самый производительный из существующих фреймворков, его главная отличительная черта в том, что он представляет собой наиболее приближенную среду к классическому программированию, реализуя очень развитые графические средства отображения и взаимодействия с пользователем в среде web 2.0.
Так же существуют и другие js-фреймворки, каждый из которых имеет свои положительные и отрицательные стороны. Для создания своего Ajax-приложения я выбрал jQuery, так как он прост в освоении, обладает хорошей функциональностью и имеет удобные инструменты для работы с технологией Ajax.
§2. Фреймворк jQuery. Технология Ajax
Используя обычный javascript для реализации динамической функциональности на сайте, появляется несколько сложностей, например, объемный и громоздкий код, проблемы по поводу его правильной работы в различных браузерах и так далее. jQuery был разработан таким образом, что наиболее общие задачи становятся значительно проще. Так, с помощью функции $(), можно находить элементы на странице по разным параметрам, и, после выбора элементов, можно сразу же приступать к манипуляциям над ними, для этого jQuery имеет широкий ассортимент методов:
// создание div-элемента и добавление его в конец элемента с идентификатором content
$(“<div><p>Элемент</p></div>”).appendTo(“#content”);
Кроме этого, функция $() позволяет привязать всю функциональность jQuery к уже существующим объектам:
// поиск элемента с идентификатором some_id, средствами javascript
var el = document.getElementById(“some_id”);
// установка у этого элемента нового значения css-свойства margin
$(el) .css(“margin”, “5px”);
Прежде чем запускать js-скрипт, необходимо быть уверенным, что часть страницы, с которой этот скрипт будет работать, уже загружена. Обычно, для этого используют событие onload, которое происходит по окончанию загрузки всей страницы:
window.onload = function() { // вызов функции скрипта };
Однако onload происходит после того, как страница сформирована полностью, включая загрузку изображений, флеш-баннер и видеороликов. В то время как структура дерева DOM (элементов страницы), с которой обычно и работает скрипт, оказывается готова гораздо раньше. В результате скрипт запускается позднее, чем мог бы. На этот случай в jQuery есть метод ready, вызов которого осуществляется в момент готовности дерева DOM:
$ (document) .ready( function() { // вызов функции скрипта });
Важной особенностью большинства методов jQuery является возможность связывать их в цепочки. Методы, манипулирующие элементами документа, обычно возвращают эти объекты для дальнейшего использования, что позволяет использовать следующую конструкцию:
$ (“#bigIt”) .empty() .attr(“class”, “noContent”);
В результате у элементов с идентификатором bigIt будет удалено все содержимое, после чего ему установлен класс noContent. Эти цепочки могут состоять из большего числа методов. Для удобочитаемости, цепочки часто пишут «в столбик»:
$ (“div”) // нахождение всех div-элементов
.parent () // нахождение их родительских элементов
.css (“heigth”, “10px”) // установка последним высоту в 10 пикселей
.fadeTo (0, 0.5) // установка им прозрачности в 50%
.addClass (“divOwner”); // добавление им же класс divOwner
Таким образом, можно легко описать все действия, происходящие с выбранными элементами, избежав использования большого числа временных переменных.
Помимо манипуляций с выбранными элементами, jQuery позволяет работать с самим набором: изменять его, а так же работать с элементами по отдельности. Например, $("div").parent() вернет родительские элементы всех div-ов, а $("div").children() вернет дочерние элементы всех div-ов. Для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery, именно его возвращает функция $().
Умело изменяя свойства элементов, можно заставить их делать различные эффекты, такие как перетаскивание, сворачивание и разворачивание, плавное изменение прозрачности и так далее. Функционал jQuery позволяет совершать данные действия максимально просто при помощи метода animate(), с помощью которого можно задавать плавное изменение различных css-свойств.
В jQuery реализована возможность выполнения запросов к серверу без перезагрузки страницы, так называемая технология Ajax. Базовыми функциями для ее работы являются post() и get():
$.post (url, [params], [callback], [dataType])
$.post (url, [params], [callback], [dataType])
url – url адрес, по которому будет отправлен запрос.
data – данные, которые будут отправлены на сервер.
callback() – пользовательская функция, которая будет вызвана после ответа сервера.
dataType – ожидаемый тип данных, которые пришлет сервер в ответ на запрос.
Оба метода используются аналогично. Примером простейшего Ajax запроса является пустой запрос к серверу без обработки ответа. Данный запрос может быть использован, например, для подсчета количества наведений курсора на баннер.
$.get (“/plusOne.php”);
Теперь, приведу пример отправки данных на сервер и обработки их. На сервер будет отправлен запрос страницы http://hostname/ayaxtest.php и указаны два параметра. После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет на экран сообщение с данными, посланными сервером.
$.get ( “/ajaxtest.php”,
{ param1: “param1”, param2: 2},
onAjaxSuccess );
function onAjaxSuccess (data){ alert(data); }
На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса:
<?php
echo “I get param1 = “.$_GET[‘param1’]” and param2 = “.$_GET[‘param2’]”;
?>
В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2".
Помимо распространенных методов, существуют и методы с более узкой направленностью: load() запрашивает html-текст и автоматически вставляет его в выбранные элементы, $.getScript() делает запрос javascript-файла и автоматически выполняет его и другие функции.
Для того чтобы функциональность фреймворка jQuery стала доступна на страницах сайта, необходимо скачать файл с ним. Полученный файл нужно будет загрузить на сервер, на котором находится сайт, и подключить этот js-файл на страницы сайта:
<script type=”text/javascript” src=”js/jquery.js”></script>
§3. Ajax-чат с использованием PHP и jQuery
Перед началом написания чата, нужно определиться с требованиями к нему, решить, что нужно в нем реализовать, а что будет лишним. В чате точно не будет:
Тем не менее, даже самому простому чату, в большинстве случаев, нужно:
Осуществление приведенных выше требований обеспечит jQuery, для этого подойдет версия 1.3 или выше, фреймворк будет размещаться в папке чата под именем jquery.js.
Все фалы будут сохранены в Юникоде (UTF-8) без BOM. Подойдет любой редактор, кроме Блокнота Windows.
Стиль традиционно будет называться style.css. Размеры, для простоты и удобства, указаны в пикселях, а окно чата (div контейнер c именем chatbox) обеспечивается вертикальной прокруткой внутри раздела:
#chatbox {
height:300px;
width:350px;
overflow-x:auto;
overflow-y:scroll; }
Файл log.html содержит все сообщения чата и изначально будет пустым. Файл functions.php содержит обычные функции для удаления лишних пробелов и борьбы с кавычками, метод add_in_file выполняет запись в чат нового сообщения, функцию session_start – так как имя пользователя будет храниться в его сессии, и код, исполняемый один раз при старте системы.
Функция add_in_file, осуществляющая добавление нового сообщения в чат, так же имеет примитивную защиту от флуда – новая строка сравнивается с последней из файла log.html. Так как строки записаны в файл с меткой времени в виде ЧЧ:ММ, то одинаковые сообщения возможно будет отправлять не чаще одного раза в минуту:
function add_in_file ($newstr,$scroll) {
define ("LOGSIZE","100");
$msgs = file ("log.html");
if ($msgs===false) die ("Нет файла лога, обратитесь к администратору");
else { $i=false;
if (count($msgs)>0 and $newstr==$msgs[count($msgs)-1]) return;
else if (count($msgs)>=LOGSIZE) {
$msgs=array_slice ($msgs,-(LOGSIZE-1));
array_push ($msgs, $newstr);
$i=file_put_contents ("log.html",$msgs); }
else {
$fp = fopen("log.html", 'a');
$i=fwrite ($fp, $newstr);
fclose($fp); }
if (!$i) die ("Не могу записать файл лога, обратитесь к администратору");
else if ($scroll) {
echo '<script type="text/javascript">
setTimeout(\'scrollLog()\', 50);
</script>'; } } }
Файл index.php является основой и содержит собственно сам чат. В нем находятся следующие разделы:
Реализация разметки чата и формы входа выглядит следующим образом:
// Если пользователь вошел в чат
if ( isset( $_POST['name'] ) ) {
if ( trimall ( trimbadchar ( $_POST['name'] ) )!='' ) {
// Удаление из имени пользователя недопустимых символов
$_SESSION['name'] = magic ( htmlspecialchars ( trimall ( trimbadchar ( $_POST ['name'] ) ) ) );
// Добавление в файл лога запись о входе пользователя
add_in_file ("<div class = 'msgln'> <sup> ( ".date("H:i")." ) </sup> <i>Пользователь ".
$_SESSION['name']." вошёл в чат</i><br></div>\n",1);}
// Если введено пустое имя
else { echo '<span class="error">Пожалуйста, введите непустое имя</span>'; } }
// Если пользователь не авторизовался в чате - форма для входа (Рис. 1).
if(!isset($_SESSION['name'])) {
echo' <div id="loginform">
<form action="index.php" method="post">
<p>Введите имя, под которым хотите войти:</p>
<label for="name">Имя:</label>
<input type="text" name="name" id="name" maxlength="32"/>
<input type="submit" name="enter" id="enter" value="Войти!" />
</form> </div>'; }
Рис. 1. Форма входа
// Если пользователь вошел в чат – окно чата (Рис. 2.).
else { ?> <div id="wrapper"> <div id="menu">
<p class="welcome">Вы вошли как <b><?php echo $_SESSION['name']; ?></b></p>
<p class="logout" align="right"><a id="exit" href="#">Выйти</a></p>
<div style="clear:both"></div> </div>
<div id="chatbox"><?php
Рис. 2. Окно чата в браузерах Google Chrome (слева) и Opera (справа)
// Вывести содержимое файла лога, если оно есть
if (file_exists("log.html") && filesize("log.html")>0) {$handle = fopen("log.html", "r");
$contents = fread($handle, filesize("log.html"));
fclose($handle);
echo $contents; } ?> </div>
// Форма отправки сообщения
<form name="message" id="message" action="" method="post">
<input name="usermsg" type="text" id="usermsg" size="63" maxlength="1024" />
<input name="submitmsg" type="submit" id="submitmsg" value="Сказать" /> </form> </div><?php } ?>
В вышеприведенном коде нет использования jQuery, но в коде самого чата уже используются несколько несложных функций на выбранном фреймворке:
<script type="text/javascript">
$(document).ready(function() {
// Если пользователь хочет выйти
$("#exit").click(function() {
if ( confirm ( " Выйти из чата? " ) == true ) { window.location = 'index.php?logout=true' ; } } ) ;
// Если пользователь отправил сообщение
$('#message').submit(function(e) {
var clientmsg = $("#usermsg").val();
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false ; } ) ;
// Загрузка лог чата
function loadLog() { var oldscrollHeight = $( "#chatbox" ).attr( "scrollHeight" ) - 20;
$.ajax ({url: "log.html", cache: false, success: function(html) {
// Автопрокрутка окна сообщений
$("#chatbox").html(html);
var newscrollHeight = $( "#chatbox" ).attr( "scrollHeight" ) - 20;
if (newscrollHeight > oldscrollHeight) {
$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); } } } ); }
// Обновление каждые 2.5с
setInterval (loadLog, 2500); } ); </script>
Тут необходимо учитывать, например, что если написать:
$(“#submitmsg”).click(function()
вместо:
$(‘#message’).submit(function()
(как зачастую и делают), то форма не будет выполнять отправку в IE по нажатию клавиши Enter, аналогично может произойти, если не указать атрибут id= “message” в теге <form>, а только name= “message”, так как IE строже относится к DOM, чем другие браузеры.
Для того, чтобы сообщение о выходе пользователя из чата записывалось раньше, чем удаляется его сессия, блок, отвечающий за это, нужно разместить в самом начале файла:
<?php
require_once ( "functions.php" ) ;
// Если пользователь покинул чат
if (isset($_GET['logout']) ) {
add_in_file (" <div class = 'msgln'> <sup> ( ".date( "H:i" )." ) </sup> <i>Пользователь ".
$_SESSION['name']." покинул чат </i> <br> </div> \n " , 0);
session_destroy();
header( "Location: index.php" ); } ?>
Далее следует заголовок HTML-документа и подключение java-скриптов:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> JQuery Chat </title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="../files/195/jquery.js"></script>
<script type="text/javascript">
// Копирование ника из чата в строку ввода при клике по нему
function copyNick (name) {
document.message.usermsg.value+=name+', ';
document.message.usermsg.focus(); }
// Скрипт прокрутки окна сообщений
function scrollLog () {
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
$("#chatbox").animate ({ scrollTop: newscrollHeight }, 'normal'); }
</script> </head> <body>
В конце документа обязательно нужно закрыть теги:
</body> </html>
Основную работу – добавление сообщений в чат выполняет файл post.php, вызываемый из java-скрипта:
<? php require_once ( "functions.php" );
if ( isset( $_SESSION['name'] ) ) {
add_in_file ( "<div class='msgln'> <sup> ( ".date("H:i")." )</sup> <b>
<a href=\"#\" onClick=\"copyNick( '".
$_SESSION['name']."' ) \">".$_SESSION['name']." </a> </b>: ".magic ( htmlspecialchars ( trimall($_POST['text'] ) ) ).
" <br> </div> \n", 1 ); } ?>
На этом чат можно считать завершенным, остается только скопировать все файлы на хостинг, права на файл log.html поставить 644.
Для работы чата, безусловно, необходим включённый JavaScript, кроме того, для работы сессий, необходимо указать в настройках браузера “Разрешить cookie”.
Заключение
В ходе написании курсовой работы были решены все поставленные задачи, проведен теоретический анализ литературы и ресурсов сети Интернет, отобран и изучен необходимый материал.
Были рассмотрены назначение фреймворков и некоторые JS-фреймворки. Так же, был изучен синтаксис языка JavaScript для работы с jQuery и технологией Ajax, и написано клиентское приложение, иллюстрирующее их работу.
Дальнейшее изучение этого раздела может послужить темой для новых курсовых работ, что способствовало бы значительному расширению кругозора студентов и могло бы послужить темой для научных проектов студентов.
Список литературы