Категории: JavaScript

Web разработка. Ajax без JavaScript?

Владимир | | Ajax, JavaScript, PHP.

картинка xajax
Можно ли написать web приложение, использующее Ajax, без JavaScript? Правильный ответ: «Нельзя. Потому что сама технология ajax основана на запросах, которые отправляются с помощью JavaScript». Но, кто сказал, что мы должны писать JavaScript код сами? Похоже, разработчики библиотеки xajax думали именно так.

Прежде всего, разберем, что представляет собой xajax. Это PHP библиотека, предназначенная для упрощения работы с ajax. Принцип работы заключается в том, что JavaScript код генерируется автоматически, а вы с помощью php функций указываете, где его разместить.
Читать дальше

Web разработка. Добавляем всплывающие подсказки на страницу.

Владимир | | CSS, HTML, JavaScript.

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

Сегодня я расскажу о JavaScript библиотеке, которая позволяет легко решить эту задачу. Называется она Prototip и состоит всего из одного файла prototip.js. Только учтите, что Prototip, по сути, является надстройкой над другой библиотекой – prototype (о которой я уже неоднократно рассказывал), поэтому без нее он работать не будет.

Прежде всего, разберемся, что представляет собой всплывающая подсказка.
Обычно это блок с текстом или картинкой, который появляется, когда вы наводите курсор на определенный элемент страницы.
Чтобы этот блок двигался вместе с курсором, для него в таблице стилей устанавливают абсолютное позиционирование, и с помощью javascript меняют координаты при перемещении мышки.
Естественно, такой блок может содержать практически любую html разметку с текстом, картинками, баннерами, flash роликами и т.п.

Переходим к созданию подсказок
Качаем библиотеку с официального сайта. В архиве вы найдете две папки:
js/ — в ней находятся два файла prototip.js и prototype.js, т.е. все необходимое для работы;
css/ — здесь размещены: файл с таблицей стилей и несколько картинок, которые используются для создания стандартных подсказок.

После этого подключаем файлы библиотек к странице:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/prototip.js"></script>

Если вы хотите использовать обычные подсказки, то подключите файл с таблицей стилей из папки css. Но, в большинстве случаев, лучше использовать свои собственные стили (так больше шансов, что подсказка впишется в дизайн сайта 🙂 ).

Теперь делаем простенькую страничку:

<p>
При наведении курсора мыши на <em><span id="needtip">этот текст</span></em>
будет появляться обычная текстовая подсказка.
</p>
<p>
А при наведении на <em><span id="cloudtip">этот текст</span></em> появится
графическая подсказка.
</p>

Как видите, она состоит из двух абзацев, в каждом из которых есть фраза, выделенная тегами <span id="…"></span>. Вместо тега <span> можно использовать любой другой, главное указать id элемента.

Для фразы в первом абзаце (id="needtip") сделаем простую текстовую подсказку. Для этого создаем файл simpletip.js, подключаем его к странице:

<script type="text/javascript" src="simpletip.js"></script>

И добавляем в него обработчик события window.onload (таким образом, наш код будет автоматически выполняться при загрузке страницы).
Читать дальше

Web разработка с использованием Prototype и Scriptaculous. Управление эффектами.

Владимир | | HTML, JavaScript.

Управление эффектами (картинка)
Библиотека Scriptaculous содержит массу красивых и полезных эффектов, которые удобно использовать в web приложениях. О некоторых из них я уже писал в предыдущих статьях (например, Подсветка элементов web страницы и Использование Scriptaculous для изменения прозрачности элементов web страницы). Любой из этих эффектов представляет ценность сам по себе, но только использование их комбинаций позволяет раскрыть возможности библиотеки в полной мере.

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

Прежде всего, немного теории. Scriptaculous позволяет применить несколько эффектов к одному и тому же блоку web страницы двумя способами:
1) последовательно (эффекты будут применяться по очереди);
2) параллельно (т.е. все выбранные эффекты будут работать одновременно).

Рассмотрим небольшой пример. Допустим, у нас есть web страница с текстовым блоком, к которому мы хотим применить два эффекта:
1) подсветки (Highlight);
2) и перемещения (MoveBy).

Разметка страницы предельно простая:

<body>
<div id="textBlock">…</div>
<p><input type="button" id="runParallel" value="запустить параллельно" onclick="runParallel()" /></p>
<p><input type="button" id="runSerial" value="запустить последовательно" onclick="runSerial()" /></p>
</body>

Как видите, страницы содержит один блок (textBlock) и две кнопки, нажатия на которые вызывают javascript функции runParallel() и runSerial(). Эти функции будут запускать наши эффекты параллельно и последовательно.

Теперь представим, что мы написали такой код:

new Effect.Highlight('textBlock', {startcolor:"#DFDC00", endcolor:"#FFFFFF", duration: 2});
new Effect.MoveBy('textBlock', 0, 100, {duration: 2});

Как вы думаете, в каком порядке они будут выполнены?
Правильный ответ: “В большинстве случаев параллельно”. Почему в “большинстве случаев”? Потому что, если мы не задали последовательность выполнения явно, то она может зависеть от браузера.

Отсюда простой вывод: “Если используете несколько эффектов, всегда указывайте, в каком порядке их выполнять”.
Читать дальше

Web разработка с использованием Prototype и Scriptaculous. Подсветка элементов web страницы.

Владимир | | CSS, HTML, JavaScript.

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

Изменяем стили элементов web страницы с помощью JavaScript

Владимир | | CSS, HTML, JavaScript.

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

Перемещаем элементы html страницы с помощью JavaScript

Владимир | | CSS, HTML, JavaScript.

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

Использование JSON в web приложениях. Обработка данных PHP скрипта.

Владимир | | Ajax, JavaScript, PHP.

В предыдущей статье я обещал показать пример использования JSON в реальном web приложении. А обещания, как известно, нужно выполнять, тем более такие простые 🙂 . К тому же, уже написано очень подходящее для этого примера web приложение.

Приложение, о котором идет речь, используется для тестирования регулярных выражений. Подробно о его структуре и работе я писал в статье «Тестирование регулярных выражений». Точнее, это был цикл из трех статей (часть 1, часть 2, часть 3).
Читать дальше

Как из PHP скрипта передать данные в формате JSON

Владимир | | JavaScript, PHP.

JSON (Java Script Object Notation) – это относительно новый формат представления данных. Он позволяет записать в виде строки любой набор переменных (массивов, объектов), что делает его использование очень удобным в Ajax приложениях.
Читать дальше