Будьте в курсе последних событий, подпишитесь на обновления сайта

Уроки

Шаблоны в JavaScript тег template

Здравствуйте! В  этом  уроке  я  хочу   рассказать  про  тег <template>,  который  предназначен для хранения «шаблонной» разметки, невидимого кода  и предназначенного для вставки куда-либо    на странице.

Конечно же , существует довольно много способов записать произвольный невидимый текст в HTML.   В чём же особенность  тега <template>?

Его отличие от обычных тегов в том, что его содержимое обрабатывается специальным образом. Оно не только скрыто, но и считается находящимся вообще «за пределами документа». А при вставке автоматически «появляется», выполняются из него скрипты, начинает проигрываться видео, аудио и т.п.

Содержимое тега <template>, в отличие, к примеру, от шаблонов или <script type=»неизвестный тип»>, обрабатывается браузером. А значит, должно быть корректным HTML.

Оно доступно как DocumentFragment в свойстве тега content. Предполагается, что мы, возьмём content и вставим, куда нам надо.

template в javascript

Читать далее

Применяем ООП: Drag’n’Drop на классах

Здравствуйте!  В этой статье  я продолжу тему  Мышь: Drag’n’Drop расширенные возможности. Она  будет посвящена более гибкой и расширяемой реализации переноса объектов.

Я бы советовал вам почитать сперва этот материал  а уж  затем переходить  к этому.

В сложных программах Drag’n’Drop обладает рядом особенностей:

  1. Перетаскиваются элементы из зоны переноса  в зону-приемник. При этом сама зона не переносится.Например – есть 2 списка, нужен перенос элемента из одного в другой. В этом случае один список является зоной переноса, второй – зоной-приемником.На странице может быть несколько разных зон переноса и зон-приемников.
  2. Обработка завершения переноса может быть асинхронной, с уведомлением сервера.
  3. Должно быть легко добавить новый тип зоны переноса или зоны-приемника, а также расширить поведение существующей.
  4. Фреймворк для переноса должен быть легко расширяемым с учётом сложных сценариев.

Всё это вполне реализуемо. Но для этого фреймворк, описанный в статье Мышь: Drag’n’Drop расширенные возможности, нужно немного переделать и разделить на сущности.

drag-ndrop на классах

Читать далее

Особенности регулярных выражений в Javascript

Здравствуйте! В  этой статье  я  хочу   рассказать  о некотрых  особенностях  регулярных  выражений  в  JavaScript.  Оные в javascript немного странные. Вроде как – перловые, нормальные, но с подводными камнями, на которые натыкаются даже прожвинутые javascript-разработчики.

Особенности регулярных выражений в javascript

Читать далее

Выделение на странице: Range, TextRange и Selection

Здравствуйте! В этой статье я  расскажу  об  объектах Range, TextRange и Selection. Эти объекты используются для выделения текста и  задания стилевых свойств выделяемому фрагменту. В принципе данные объекты  используются не часто, но знать о них все равно надо.

Выделение текста Объект Range, Text Range

Читать далее

Работа с куки в JavaScript, document.cookie

Здравствуйте!  В этом уроке я расскажу о работе с куки в JavaScript. Давайте для начала разберемся  что такое куки файлы и для чего они нужны. Cookie — это файлы, которые хранятся  на компьютере пользователя и по которым  сервер, то есть сайт сможет опознать посетителя. как правило в таких файлах хранят пару логин — пароль, хотя можно сохранять и другую информацию. Объем таких файлов не большой и составляет 5 килобайт. Сейчас на смену куам пришло LocalStorage (локальное хранилище), но о нем еще будет отдельный разговор.

cookies javascript

Для чтения и записи кукисов  используется свойство document.cookie. Однако, оно представляет собой не объект, а строку в специальном формате, для манипуляций с которой нужны дополнительные функции.

Читать далее

Запуск кода из строки: метод eval

Здравствуйте! В этом уроке речь пойдет о таком может малоизвестном методе eval. Функция eval(code) позволяет выполнить  любой код, переданный ей в виде строки.  И в  этом кроется ее опасность  ведь если ей передать зловредный код в виде строки, то он будет выполнен.

Этот код будет выполнен в текущей области видимости.

Метод eval выполнение кода JS

Читать далее

Анимация в JavaScript

Здравствуйте!  В этом уроке  рассмотрим анимации в JavaScript.  JavaScript-анимация применяется  где не подходит CSS-анимации.

Например,  анимация по сложной траектории, с  специальной временной функцией, выходящей за рамки кривых Безье, на canvas. Еще её используют для анимации в старых IE. Хотя надо сказать, что для  экономии ресурсов,  особенно мобильных устройств предпочтительно использовать CSS анимации.

Анимация в JS

Читать далее

Формат JSON

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

Надо отметить, что JSON один из наиболее удобных форматов  данных и именно он используется при клиент-серверном взаимодействии ранее использовался XML, но он был сложен при разборе данных поэтому не получил такого широкого  распространения и ему на смену пришел JSON.

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

формат json
Читать далее

Сравнение транспортов и их возможностей

Здравствуйте!  В этой последней  статье, посвященной технологии AJAX я хотел бы сравнить так называемые транспорты это то посредством чего общаются клиент и сервер. И также привести краткий отчет о возможностях каждого транспорта. Итак давайте начинать.

сравнение транспортов ajax

Читать далее

Метод fetch как замена XMLHttpRequest

Здравствуйте!  Сегодня хочу рассказать о методе fetch, который используется как  замена уже  рассмотренному методу XMLHttpRequest.  Метод fetch – это своего рода XMLHttpRequest нового поколения. Он предоставляет усовершенствованный  интерфейс для осуществления запросов к серверу: как по части контроля над происходящим, так и по синтаксису, так как построен на промисах.

Поддержка в браузерах  уже поддерживают все браузеры, кроме IE.

Метод fetch как замена XMLHttpRequest

Читать далее

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: