JS, or not JS, вот в чем вопрос Фитискин Александр веб-технолог студия «Dominion»

Фитискин Александр

веб-технолог

студия «Dominion»

Проблемы, связанные с отсутствием версии без JS Недоступны важные функции сервиса Недоступна важная информация Возможности браузера используются неполностью (версия для печати, ссылка другу)‏ Сайт индексируется не полностью

Недоступны важные функции сервиса

Недоступна важная информация

Возможности браузера используются

неполностью (версия для печати, ссылка другу)‏

Сайт индексируется не полностью

Причины отсутствия JS JS отключен специально Проблемы с сервером Файл «недокачан» или случайно удален JS-ошибка Старый браузер Другие причины

JS отключен специально

Проблемы с сервером

Файл «недокачан» или случайно удален

JS-ошибка

Старый браузер

Другие причины

Задача от менеджера Нужно реализовать вкладки, которые будут переключаться:

Нужно реализовать вкладки, которые будут переключаться:

Как это может работать без JS Предлагаем менеджеру варианты: Разбить контент на 2 страницы Разместить все на одной странице в виде подзаголовков с якорями

Предлагаем менеджеру варианты:

Разбить контент на 2 страницы

Разместить все на одной странице в виде подзаголовков с якорями

Первый шаг Реализуем статическую версию (без JS)‏

Реализуем статическую версию (без JS)‏

Второй шаг Реализовываем скрипт, который «подготавливает» контент к реализации вкладок: добавляем недостающие элементы перегруппировываем текущие скрываем лишние

Реализовываем скрипт, который «подготавливает» контент к реализации вкладок:

добавляем недостающие элементы

перегруппировываем текущие

скрываем лишние

Третий шаг Реализовываем скрипт, который переключает вкладки: ищем активные элементы добавляем обработчики событий

Реализовываем скрипт, который переключает вкладки:

ищем активные элементы

добавляем обработчики событий

Результат С JavaScript Без JavaScript

С JavaScript

Без JavaScript

Всегда нужно учитывать У любого контента должен быть свой уникальный URL У любого действия всегда должен быть альтернативный обработчик Дополнительные «фишки» базируются на стандартной реализации, но существуют отдельно

У любого контента должен быть свой уникальный URL

У любого действия всегда должен быть альтернативный обработчик

Дополнительные «фишки» базируются на стандартной реализации, но существуют отдельно

Отвыкаем от «плохого» Не нужно писать тонны CSS-кода (и HTML) в JS-скрипте: newElem . style . display = ' block '; newElem . style.borderBottom = ' 1px dashed '; newElem . style . color = ' #ccc '; oldElem . style . display = ' none ';

Не нужно писать тонны CSS-кода (и HTML) в JS-скрипте:

newElem . style . display = ' block ';

newElem . style.borderBottom = ' 1px dashed ';

newElem . style . color = ' #ccc ';

oldElem . style . display = ' none ';

Привыкаем к «хорошему» Большую часть щепетильной настройки внешнего вида можно вынести в CSS и поручить верстальщику: newElem . className = ' visible '; oldElem . className = ' hidden ';

Большую часть щепетильной настройки внешнего вида можно вынести в CSS и поручить верстальщику:

newElem . className = ' visible ';

oldElem . className = ' hidden ';

Загрузи версталу по полной! Чтобы не выискивать все элементы, которые должны изменяться, при подготовке контента, переложи и эту задачу на верстальщика: document . body . className = ' javascript_enabled ';

Как быть с анимацией? Анимация подразумевает постоянное изменение каких-либо CSS свойств, и здесь все классами предусмотреть нельзя. Войти с паролем Логин: Пароль:

Анимация подразумевает постоянное изменение каких-либо CSS свойств, и здесь все классами предусмотреть нельзя.

Решение — есть! CSS может нам помочь, предоставив базовые параметры, к примеру: начальное положение конечное положение Получив эти параметры из CSS мы делаем JS более независимым

CSS может нам помочь, предоставив базовые параметры, к примеру:

начальное положение

конечное положение

Получив эти параметры из CSS мы делаем JS более независимым

Изгоняем HTML из скрипта Выносим новый HTML-кусок в отдельный файл и получаем его с помощью Ajax Находим нужные элементы по: Идентификатору ( id =" headerPlace ")‏ Имени класса ( class =" headerPlace ")‏

Выносим новый HTML-кусок в отдельный файл

и получаем его с помощью Ajax

Находим нужные элементы по:

Идентификатору ( id =" headerPlace ")‏

Имени класса ( class =" headerPlace ")‏

Результат Прозрачный и понятный скрипт, минимально завязанный на верстку Удобство редактирования HTML и CSS Работоспособность, как с JS так и без JS

Прозрачный и понятный скрипт, минимально завязанный на верстку

Удобство редактирования HTML и CSS

Работоспособность, как с JS так и без JS

Спасибо за внимание Меня можно найти в интернетах: alexfitiskin.ya.ru alexfitiskin.moikrug.ru twitter.com/afitiskin frienfeed.com/afitiskin [email_address] [email_address]

Меня можно найти в интернетах:

alexfitiskin.ya.ru

alexfitiskin.moikrug.ru

twitter.com/afitiskin

frienfeed.com/afitiskin

[email_address]

[email_address]