Итак, кто не в курсе, E4X — это расширение стандарта ECMAScript (на котором основан JavaScript, ActionScript, итд.),
которое предоставляет простой и удобный интерфейс для работы с XML.
Несмотря на то, что первая версия была опубликована в 2004, E4X не обрел широкого распространения, а жаль.
Таким образом, его поддержка ограничивается в следующих JS движках: Gecko (Firefox), SpiderMonkey (основан на Gecko) и Rhino (также движок от Mozilla, только написанный на Java).
Так что, если вы динозавр ретроград даже используете такой древний Firefox, как 1.5, то там уже реализована поддержка E4X!
В качестве затравки приведу несколько фишек в E4X
XML-структуру можно писать прямо в JS-коде (э...
DreamWeaver: CodeHints, CodeColoring и TagLibraries
Задача:
подключить кастомную библиотеку тегов
сделать подсветку синтаксиса JS в XML-файле
расширить подсказки для JavaScript кода своим глобальным объектом
Если так случилось, что в качестве своего постоянного редактора кода или IDE
вы выбрали Adobe DreamWeaver (прим. речь идет о версии CS5.5), то попытаемся немного упростить себе жизнь, работая в нём.
А для этого нужно максимально возможно его допилить под себя для эффективной работы и экономии времени.
Распложение файлов
Глобальные настройки находятся в папке с установленным DW, например для Windows 7:
%ProgramFiles%\Adobe\Adobe Dreamweaver CS5.5\configuration\ (далее в статье %DW_Config_Common%)
Локальные пользо...
В продолжении темы про реализацию «include file» в javascript, я переписал и дополнил код в более удобную одну функцию-загрузчик javascript файлов.
Подгрузка может идти с любых адресов: локальных, кроссдоменных, итд., т.к подключение файла происходит через создание новых элементов <script>.
Применение: если на вашем сайте не используется никаких фреймворков типа jQuery, где уже есть встроенные загрузчики
В отличии от простого подключения внешнего файла в скрипте через document.write('<script type="text/javascript" src="/js/my/sample/file.js"></script>'), использование данной функции предоставляет:
синхронную/асинхронную возможность подгружать любое кол...
Существует много реализаций волнового алгоритма для поиска кратчайшего пути.
Обычно, подобные алгоритмы нужны при работе с графами, а также часто используются при разработке игр, когда некоторому объекту на игровой карте нужно попасть из точки А в точку Б, учитывая различные препятствия на пути.
Для моих целей подошел алгоритм под названием "А-звездочка", который работает следующим образом:
Начало Поиска
Начинаем поиск пути выполняя следующее:
Начинаем со стартовой точки A и добавляем ее в "открытый список" клеток, которые нужно обработать. Открытый список это что-то наподобие списка покупок. В данный момент есть только один элемент в списке, но позже мы добавим еще. Список содержит кл...
Задача: найти способ визуализации объектов (элементов HTML-верстки) в виде графа.
Перерыв на просторах интернета достаточно большое количество готовых инструментов для рисования векторной графики при помощи Javascript, я нашел оптимальное, для меня решение.
Это использование jQuery вместе с плагином jsPlumb.
Этот плагин использует возможности тега canvas для рисования графики.
Все современные браузеры его уже поддерживают (хотя и не в полном объеме), за исключением, как вы уже догадались, Internet Exlorer (включая 8-ю версию).
Благо команда Google своевременно позаботилась о портировании большинства возможностей canvas через поддержку VML (которую только и имеет IE)....
Поддержка различных тем оформления сайта при помощи CSS и JS
Если вам понадобиться сделать поддержку тем оформления («skins») для вашего сайта, то это можно просто организовать при помощи незамысловатого Javascript кода и CSS. При этом основная идея следующая: на сайт по умолчанию будет всегда подгружаться общий CSS-файл, определяющий неизменные стили для сайта, а при помощи JS мы будем создавать и внедрять на страницу новый элемент CSS-стилей.
Итак, файл стилей по умолчанию назовем «default.css». Он будет не изменен. А для смены темы сайта, мы предусмотрим на странице выпадающий элемент, HTML-тег SELECT. В нем то и будет находиться список всех доступных тем оформления сайта.
Имена CSS-файлов для хранения тем оформления будут theme2.css, theme3.css...
Небольшое вступление.
Каждый программист на JS рано или поздно сталкивается с понятием «асинхронный яваскрипт», а сокращенно AJAX. На самом деле в этой аббревиатуре нету ничего страшного, как могли бы подумать новички. В общем — это технология, позволяющая асинхронно (одновременно, независимо) обмениваться (получать и отправлять) информацию(ей) с другими ресурсами сервера (файлами).
В javascript это всего-навсего объект, реализующий «транспорт» для этой технологии. Это означает, что мы можем без обновления загруженной страницы, по действию пользователя (событию JS), например, обратиться к файлу, лежащему на нашем сервере, получить от него ответ (то что будет выводиться на экран, если...
Мелкие хитрости и полезности при написании JS-кода для начинающих
• Объединение функций в JSON-объект
• Создание переменных по умолчанию
• Конвертация чисел из 10-ричной в 16-ричную систему счисления и наооборот
• Удобное использование вложеных функций
• Как получить JS-объект со стороны сервера при работе с AJAX
• Использование выражений javascript в CSS
• Как получить список всех свойств объекта
• Расширение объектов с использованием свойства prototype
• Конструкторы объектов, наследование в JS
• Объявление переменных и пространства имен в JS
Как сделать простую подсветку кода в HTML средствами JS
Если вам потребуется осуществить подсветку синтаксиса кода на странице, например HTML или PHP, то это можно несложно реализовать на Javascript при помощи регулярных выражений (Regular Expression).
Примечание: имеется ввиду что спецсимволы вроде треугольных скобок, как при обозначении HTML-тегов, будут заменены HTML-сущностями, т.е < будет заменено на < ну итд.
Итак, необходимый нам код мы будем размещать в блоках <pre class="code"> тут будет HTML/JS/PHP и любой другой код </pre>, а в после этих блоков или же на событие window.onload мы подключим нашу будущую функцию js_simple_code_highlighter(), для обработки и раскраски кода.
Если вы не знакомы с регулярными выраженям...
Перетаскивание объектов в HTML средствами JS (Drag & Drop)
Большинство из вас, наверное, уже видели, как на некоторых сайтах, различные элементы HTML-верстки можно «ухватить мышой» и перетащить в другое место на странице. Это называется «drag and drop», а если дословно, то «схвати и тащи». В статье я расскажу, как, при помощи небольшого куска кода на Javascript, реализовать подобный функционал на своём сайте. Итак, поехали.
Во-первых, для того, чтобы объекты на страницы могли свободно перемащаться, независимо от соседних элементов, мы выставим им абсолютное позиционирование (position:absolute) и начальные координаты (left и top) в CSS.
Во-вторых, главным участником всех действий в JS, послужит конечно-же стандартный объект window.event, при помощи...
Как вы думаете, что такое движение объекта? Ответ на этот вопрос также прост, как и его реализация в JS. Так вот, движение объекта — это изменение его координат (позиции) в определенный промежуток времени, по определенному закону движения.
В основе движения, или анимации в Javascript, лежит функция setInterval. Благодаря ей, мы можем создать таймер с необходимым кодом, который будет выполняться в заданный промежуток времени. Итак, что же нам нужно в итоге?
Сперва, необходимо сделать так, чтобы позиционирование объекта не влияло на остальные HTML-элементы на странице. Для этого, через CSS, зададим ему свойство position:absolute и укажем начальные координаты. В дальнейшем, весь скрипт с...
Были ли у вас случаи, когда дизайнер нарисовал элемент формы для выбора файла, отличный от стандартного, и заказчик требует 100% соответствия? Нет? Тогда вам пока повезло!
Дело в том, что поле выбора файла для загрузки <input type="file" ... /> практически не поддается стилизации через CSS. Т.е мы можем изменить только значения вроде обрамляющей рамки, размера шрифта, и практически всё.
Этот элемент формы идет уже «склеенный» вместе с кнопкой «Choose file» (открывающей окно выбора файла), вид этого поля также различается практически во всех браузерах, а текст в кнопке по всей видимости, зависит также от языка в системе.
Так вот, немного поразмыслив, и «взвесив» всё, что мы имеем в арс...
Пусть это и не ново, но в данной статья я расскажу, каким образом реализована вставка BB-кодов в <textarea> на различных форумах и гостевых книгах. Также этот подход можно приспособить для того, чтобы написать редактор HTML-тегов, например для CMS при создании новой записи, чтобы можно было быстро, если понадобиться, обрамить текст в нужные теги. Понятное дело, это не визуальный редактор (WYSIWYG) и надо знать хоть чуть-чуть HTML. Я не особо люблю визуальные редакторы, т.к всё равно они оставляют много ненужного мусора в коде и тормознуто работают.
Для написания такого редактора, нам традиционно понадобиться помощь Javascript, в частности метод «document.getSelection» (для нормальны...
