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

Август 29, 2022

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

Содержание

2. Проблемы, связанные с отсутствием версии без JS Недоступны важные функции сервиса Недоступна важная информация Возможности браузера
3. Причины отсутствия JS JS отключен специально Проблемы с сервером Файл «недокачан» или случайно удален JS-ошибка Старый
4. Задача от менеджера Нужно реализовать вкладки, которые будут переключаться:
5. Как это может работать без JS Предлагаем менеджеру варианты: Разбить контент на 2 страницы Разместить все
6. Первый шаг Реализуем статическую версию (без JS)‏
7. Второй шаг Реализовываем скрипт, который «подготавливает» контент к реализации вкладок: добавляем недостающие элементы перегруппировываем текущие скрываем
8. Третий шаг Реализовываем скрипт, который переключает вкладки: ищем активные элементы добавляем обработчики событий
9. Результат С JavaScript Без JavaScript
10. Всегда нужно учитывать У любого контента должен быть свой уникальный URL У любого действия всегда должен
11. Отвыкаем от «плохого» Не нужно писать тонны CSS-кода (и HTML) в JS-скрипте: newElem.style.display = 'block'; newElem.style.borderBottom
12. Привыкаем к «хорошему» Большую часть щепетильной настройки внешнего вида можно вынести в CSS и поручить верстальщику:
13. Загрузи версталу по полной! Чтобы не выискивать все элементы, которые должны изменяться, при подготовке контента, переложи
14. Как быть с анимацией? Анимация подразумевает постоянное изменение каких-либо CSS свойств, и здесь все классами предусмотреть
15. Решение — есть! CSS может нам помочь, предоставив базовые параметры, к примеру: начальное положение конечное положение
16. Изгоняем HTML из скрипта Выносим новый HTML-кусок в отдельный файл и получаем его с помощью Ajax
17. Результат Прозрачный и понятный скрипт, минимально завязанный на верстку Удобство редактирования HTML и CSS Работоспособность, как
19. Скачать презентацию

Слайд 2

Проблемы, связанные с отсутствием версии без JS
Недоступны важные функции сервиса
Недоступна

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

Слайд 3

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

браузер
Другие причины

Слайд 4

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

Слайд 5

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

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

Слайд 6

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

Слайд 7

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

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

Слайд 8

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

Слайд 9

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

Слайд 10

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

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

Слайд 11

Отвыкаем от «плохого»
Не нужно писать тонны CSS-кода (и HTML) в JS-скрипте:
newElem.style.display =

'block';
newElem.style.borderBottom = '1px dashed';
newElem.style.color = '#ccc';
oldElem.style.display = 'none';

Слайд 12

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

CSS и поручить верстальщику:
newElem.className = 'visible';
oldElem.className = 'hidden';

Слайд 13

Загрузи версталу по полной!
Чтобы не выискивать все элементы, которые
должны изменяться,

при подготовке контента,
переложи и эту задачу на верстальщика:
document.body.className = 'javascript_enabled';

Слайд 14

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

здесь все классами предусмотреть нельзя.

Войти с паролем

Слайд 15

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

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

Слайд 16

Изгоняем HTML из скрипта
Выносим новый HTML-кусок в отдельный файл
и получаем

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

Слайд 17

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

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

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

Содержание

Проблемы, связанные с отсутствием версии без JSНедоступны важные функции сервиса Недоступна

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

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

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

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

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

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

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

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

Отвыкаем от «плохого»Не нужно писать тонны CSS-кода (и HTML) в JS-скрипте:newElem.style.display =

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

Загрузи версталу по полной!Чтобы не выискивать все элементы, которые должны изменяться,

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

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

Изгоняем HTML из скриптаВыносим новый HTML-кусок в отдельный файл и получаем

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

Похожие презентации