5 занимательных проектов, реализованных на CSS без использования JavaScript


Оглавление (нажмите, чтобы открыть):

Очередной блог фрилансера

коротко и полезно о веб-разработке

10 полезных CSS/JS-решений для веб-разработчика

Нередко творческие и поистине замечательные дизайнерские решения остаются неизвестными, потому что мы, дизайнеры просто не замечаем их. Будучи занятыми в своих собственных проектах, мы иногда, интуитивно пытаемся понять, за сложным нагромождением кода других дизайнеров, как они смогли осуществить свои дизайнерские идеи. На самом деле, просто рассматривая код других разработчиков, мы можем многому научиться у них, можем найти интересные идеи и повысить качество нашей работы.

Итак, давайте взглянем на 10 полезных CSS и JavaScript техник и примеров кода, которые могут оказаться полезными для вашего следующего проекта. Для понимания статьи вам понадобятся базовые знания CSS и JavaScript.

1. Встроенное в контент изображение

Читая блог или онлайн-статью, мы заметили, что большинство картинок, помещенных в тексте записи, зачастую выглядят скучно или неинтересно.

Между тем, нет ничего сложного в создании привлекательных иллюстраций, которые сохранят строгий стиль дизайна и фирменного стиля и будут органично смотреться с содержанием вашего сайта. UXBooth предлагает простой и элегантный пример этого приема (прокрутите вниз пока не увидите гориллу). Обратите внимание на скриншот ниже, насколько естественно изображение Гориллы смотрится в контенте страницы.

Как это делается?

На первый взгляд горилла выглядит как фоновое изображение, позиционированное по центру колонки с контентом, с помощью CSS или JavaScript (или их комбинации); однако это только CSS-решение. Элементу div , в котором находится изображение гориллы (простое .png-изображение), назначается правое обтекание. Сразу после этого в HTML следует параграф и нумерованный список. У блока «с гориллой» назначен левый отступ в 47px , благодаря которым тэги p и ol , находящиеся в контенте не перекрывают изображение, обеспечивая тем самым хороший визуальный интервал и общий поток страницы.

HTML

CSS

2. Типографские трюки

CommandShift3 публикуют hot-or-not списки сайтов, используя интересный типографский прием – отображение результатов голосования для каждого сайта, которому вы отдали свой голос. Очевидно, что этот эффект, достигается только с помощью CSS.

Как это делается?

Каждая строка с результатом содержит «выигрышный процент»- div + скриншот, точно также как «проигрышный процент » + скриншот. Каждый из процентных блоков имеет значительно меньшую ширину, чем им необходима, для отображения полного текста. Кроме этого, применяется CSS-атрибут overflow: hidden , чтобы скрыть ненужное содержимое.

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

HTML

CSS

3. Информационные тултипы

31three.com – версия сайта myfamily.com, интересно использует иконки, разбросанные по всему тексту страницы. Если вы подведете к иконке календаря, отобразится информационный тултип, где можно увидеть, как будет выглядеть ваш потенциальный календарь, когда вы зарегистрируетесь на myfamily.com. Обратите внимания на эффект прозрачности и стрелку на левой стороне всплывающего блока.

Как это делается?

Когда пользователь подводит мышь к иконке календаря, с помощью JavaScript, отображается скрытый div, который содержит прозрачное .png-изображение. Когда мышь отводят от иконки календаря, div снова становится невидимым. Этот частный пример не использует JavaScript-фреймворки, такие как JQuery или Prototype, вместо этого он использует две простых функции, скрытия и отображения div -а, соответственно.

Пожалуйста, запомните, что этот код не является хорошим примером, поскольку он не разделяет функциональность JavaScript от стилей сайта. Вы никогда не должны включать JavaScript события в качестве линейных атрибутов, и этот пример является просто быстрым прототипом. Лучше вынести код JavaScript в отдельный .js -файл, а затем внедрить на страницу, используя тэги

Статьи

1. Модальное окно «ModalBox» на JavaScript

Реализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.

2. «LightWindow» всплывающего окна в стиле Lightbox

Возможно вывести во всплывающем окне информацию различных форматов: единичные изображения, галерею, медийные файлы, формы. На демонстрационной странице ссылки на различные варианты содержимого.

3. Эффектные CSS3 табы «Glow Tabs»

Свежее решение для реализации табов с использованием CSS3.

4. Слайдер контента без JavaScript

Легкий, качественный слайдер содержимого без JavaScript. Для переключения между слайдами используются кнопки с номером слайда.

5. Анимированное выпадающее меню

СтильноеjQuery меню в темных тонах.

6. Всплывающая jQuery панель

Интересная всплывающая панель/меню с отличными иллюстрованными иконками. Для появления меню нажмите на плюс в нижнем левом углу экрана.

7. CSS3 меню

Лекгкое CSS меню с интересным эффектом.

8. Выпадающее меню

Простое, аккуратное выпадающее меню.

9. Фильтрация блоков c использованием jQuery

Это решение отлично подойдет для реализации фильтров в интернет-магазинах или для оформления страниц-портфолио.

10. Меню с CSS и jQuery анимацией

Свежее анимированное меню в серых тонах.

11. Колоночная навигация по сайту на jQuery

Интересное решение для навигации, которая представлена в виде вертикальных полос. При наведении курсора мыши на эти полосы появляется изображение для пункта и список подменю. При нажатии на пункт подменю появляется страница с описанием. Такая реализация отлично подойдет для промо-сайтов или презентаций. Обязательно посмотрите демо плагина.

12. jQuery галерея изображений

Галерея изображений на весь экран с каруселью из миниатюр. При перемещении курсора мыши происходит навигация по изображению большого размера.

13. Галерея изображений в стиле полароид

Предусмотрено наличие нескольких альбомов. При выборе интересующего альбома изображения, входящие в него, разворачиваются в ряд внизу экрана. При нажатии на изображение оно увеличивается.

14. Компактный вывод анонсов последних материалов или новостей

Компактный блок с анонсом последних материалов на сайте или новостей. В левой колонке отображается разбитый на страницы список из кратких анонсов последних новостей. При выборе одного из них в правой колонке отображается более подробное описание и ссылка на прочтение полного текста публикации. Реализовано с помощью jQuery.

15. Галерея изображений «SliderGallery»

Качественная галерея изображений. Карусель миниатюр прокручивается с помощью ползунка. Реализована возможность разбивания изображений на альбомы.

16. Эффектные CSS3 кнопки

Анимированные CSS3 кнопки. Отличный веселый эффект при наведении.

17. CSS3 Выпадающее мега меню

В последнее время очень популярными стали выпадающие меню, в которых вместо пунктов выпадают большие области с контентом. Пример одного из таких меню вы можете скачать и использовать у себя в проектах.

Галерея изображений на чистом CSS без JavaScript

Возможности CSS с каждым разом удивляют все сильнее! На этот раз покажем вам как сделать простую галерею на CSS без использования JavaScript.

Для этого воспользуемся селектором :target, который указывает на то, элемент с каким ID сейчас должен быть активен.

Нам будет приятно

Еще интересное в блоге

Как избавиться от схлопывания контейнера с float

Как отменить обтекание текстом

Будем рады работать именно с вами

Политика конфиденциальности персональных данных

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Крутые слайдеры на чистом CSS без использования jQuery/Javascript

Я очень люблю слайдеры изображений или текста, с использованием чистого CSS. Точно так же, я всегда ненавидел медленные слайдеры, использующие JQuery или JavaScript, при использовании в своих WordPress темах или HTML веб-сайтах. Я подобрал несколько интересные CSS слайдеров из codepen / GitHub и других сайтов, для использования в веб-сайт или в темах. Внимание: Пожалуйста, убедитесь, что слайдеры работают в Safari, Chrome и FF перед использованием в ваших проектах.


CSS3 Multi Animation Slider

Слайдер с несколькими анимациями для изображений с описаниями.

CSS Juizy Slideshow

Слайдшоу с использованием CSS and html

CSS Featured Image slider

Симпатичный слайдер с использованием только css.

CSS Image slider

CSS3 Thumbnail Slider

Сладер на чистом CSS с миниатюрами.

HTML5 CSS Driven Slider

Простой html5/css слайдер.

CSS Accordian slider

iAuto является классным аккордионом на css и html.

Responsive no javascript CSS3 Slider

Адаптивный слайдер с подписями. Без javascript

CSS3 Clickable Slider

Простой управляемый слайдер с кнопками “вперёд” и “назад”.

Gallery CSS slider

KeyFrames Slider

Слайдер бэкграунда с использованием css кейфреймов.

CSS Slider

Слайдер на чистом css (без JS, без jquery)

CSS Slider

Профессионально сделанный слайдер имеющий более 20 стилей и кнопок.

Elegant Responsive CSS slider

Pure CSS slider content

Responsive CSS3 Slider

Простой слайдер на html и css3 с подписями.

CSS3 slider without Javascript

Слайдер на чистом css3 с хлебными крошками в виде подписей.

Pure CSS slider

Очень простой слайдер изображений.

CSS Sliding Checkboxes

Кнопки на чистом css с эффектом слайдера.

Pure CSS3 Cycle Slider

Слайдер с индикатором загрузки.

CSS Accordian Slider

Создайте сами аккордеон с использованием только css и html (без javascript).

5 проектов для фронтенд разработчиков

Канадский разработчик Гаретт Левин, собрал 5 проектов, для начинающих фронтенд разработчиков.

Я начал свой путь в веб-разработку, используя учебные видео материалы. Однако видео были лишены самого важного — полноценной практики. Я хочу вдохновить вас на изучение веб-разработки и для этого я создал несколько проектов, для начинающих фронтенд разработчиков, которые помогут оттачивать свои навыки. Я надеюсь, это руководство поможет новичкам в изучении фронт-енд разработки.

Проект 1 – Одностраничная адаптивная верстка

Цель: воссоздать pixel perfect дизайн и решить проблемы адаптивной верстки

The Conquer template это отличная стартовая площадка для новичков. Здесь у новичков будет возможность создать то, что будет действительно не стыдно добавить в портфолио. The Conquer template использует Вootstrap, но не стоит не использовать его при создании проекта. Здесь вы найдете множество задач, с которыми веб-разработчик сталкивается в реальном мире. Он погрузит вас в новые технологии (такие, как flex box и float) и поможет приобрести опыт в разных техниках верстки. Сверстать макет адаптивно – будет дополнительной целью, которая заставит вас попотеть!

Изучайте веб разработку, с помощью онлайн уроков, каждый понедельник и среду в 20:00, на канале: Быстрый старт в веб-разработке (на странице проекта доступный записи всех уроков).

Проект 2 – Многостраничный адаптивный веб-сайт

Цель: воссоздать pixel perfect дизайн и научиться адаптивно верстать сложные макеты

Следующим шагом будет создание адаптивного многостраничного веб-сайта. В сети есть множество бесплатных шаблонов, но достаточно сложно найти действительно хороший. Theme Forest – замечательное место, где вы можете приобрести работы дизайнеров. Помните, вы пытаетесь стать веб-разработчиком, а не дизайнером. Не ждите, что сразу сможете стать и тем, и другим. Много веб-разработчиков не имеют никаких навыков в дизайне и, наоборот, есть много дизайнеров, которые совершенно не умеют программировать. Поэтому сосредоточьтесь на своем выборе, на веб-разработке!

Для более быстрого старта в веб разработке оцените проект: Быстрый старт в веб-разработке

Проект 3 — Маленькая игра-викторина, написанная на языке JavaScript

Цель: Создать простую игру на JavaScript и jQuery.

Особенность изучения JavaScript для начинающих фронтенд разработчиков в том что бывает сложно выбрать проект по своим силам. Отличным вариантом для начинающего веб программиста может стать разработка викторины . Это поможет вам разобраться в Document Object Model. Уровень сложности викторины будет зависеть только от вас. Начните с создания простой игры, в которой будет несколько вопросов с возможностью выбора варианта ответа. Вы узнаете много нового о работе с данными. В этот раз не стоит тратить много времени на дизайн того, что вы создаете. Я бы порекомендовал вам использовать CSS-фреймворк, например: Bootstrap, дабы быстро стилизовать вашу игру.

Проект 4 — Сделайте аналог Giphy, используя открытый API

Цель: Создать веб-приложение, которое использует Giphy’s API

Как только вы получите опыт в работе с DOM и JavaScript, я рекомендую изучить шаблонизацию данных и их отображение в DOM. Отличная цель для начинающих фронтенд разработчиков — создать аналог веб-сайта giphy, используя Giphy API. Я рекомендую их API, потому что у них нет проблем с получением ключа, и форматы запросов-ответов там достаточно простые. Используя их API, создайте небольшое веб-приложение, которое будет делать следующее:

  • Отображать популярные gif-файлы при загрузке приложения
  • Позволять искать определенные gif-файлы
  • Создать кнопку «Загрузить больше»

В процессе разработке этого проекта вы узнаете много нового. Одна из ключевых вещей – работа с асинхронными запросами. Для этого вы можете использовать JavaScript или jQuery. Ваша цель состоит в том, чтобы начать работу с асинхронным кодом. Поскольку ваше приложение будет расти и усложняться, вам нужно подумать о том, как организовать ваш код. Для этого я рекомендую использовать паттерн name spacing.

Мастер Йода рекомендует:  PHP и формы PHP

Проект 5 — Веб-приложение Punk Beer

Цель: Использовать Punk Beer API для создания проекта, использующего шаблонизацию для отображения данных на странице. Попробуйте использовать какой-нибудь фронтенд фреймворк, например, React.

В этом проекте вы также будете работать с API. Punk API не требует ключа для использования и предоставляет много информации в своих ответах.

Верстка данного проекта во многом будет схожа с версткой предыдущего. Из нового: функции «корзина покупок» или «любимый товар». Добавьте быть возможность посмотреть отобранный список товаров. Я бы рекомендовал для начинающих фронтенд разработчиков углубиться в изучение фреймворков — это поможет расширить ваши возможности и получить общее представление о современной веб-разработки. Так как я активно работаю с React от Facebook, я бы советовал начать с него. Сперва это может показаться трудной задачей, поэтому сосредоточьтесь на создании веб-приложения поэтапно:

  • Разместите данные на странице из запроса к API
  • Добавьте строку поиска (через отдельный запрос к API)
  • Добавьте функцию «любимый товар»
  • Подключите react router и добавьте функциональность просмотра «любимых товаров»

Решение этих проблем позволит серьезно продвинуться в веб-разработке. Здесь я тоже рекомендую прибегнуть к использованию CSS-фреймворка. Я решил использовал Bulma для данного примера.

Совершенствуйтесь и создавайте

Если вы начинающий в веб-разработке и стремитесь создать свою собственную учебную программу, то эти пять проектов помогут вам добиться поставленной цели.

Опираясь на свой опыт, скажу, что быстрее всего я начал развиваться, когда столкнулся с реальным проектом. Поэтому пробуйте применять свои знания на практике как можно чаще!

Прекратите использовать CSS в JavaScript в веб-разработке

Дата публикации: 2020-12-29

От автора: CSS никуда не девается. Множество проектов предпочитают стилизовать документы через JS по недопониманию. В этой статье собраны распространенные мифы об использовании в JavaScript CSS и существующие решения этих проблем.


Статья не нацелена навредить определенным проектам или людям. «CSS в JS» я определяю, как использование styled-components. Сейчас это тренд стилизации компонентов в React.

История CSS и JS

Каскадные таблицы стилей (CSS) были созданы для описания представления документа, написанного с помощью языка разметки. JS был создан как «связующий язык» для связки компонентов, таких как изображения и плагины. Шли годы, JS рос и мутировал под новые примеры использования.

Появление термина Ajax (2005) – важная веха. Именно тогда библиотеки типа Prototype, jQuery, MooTools привлекли огромные сообщества к совместному решению проблем получения данных в фоновом режиме и неоднородности работы кода в разных браузерах. Так была создана новая проблема – как управлять всеми данными?

Перенесемся в 2010. Backbone.js стал стандартом управления состоянием приложения. Почти сразу после этого появились React и Flux. Так началась эра одностраничных приложений (SPA) – приложений, состоящих из компонентов.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Что же с CSS?

В документации к styled-components:

«Проблема чистого CSS заключается в том, что он создавался в эру, когда веб состоял из документов. В 1993 году был создан интернет для обмена по большей части научными документами, и CSS был представлен, как решение стилизации этих документов. Сегодня мы создаем богатые, интерактивные, user-facing приложения, и CSS не предназначен для них.»

CSS эволюционировал под требования современных UI. Количество новых функций, появившихся за последние 10 лет, выходит за рамки разумного (псевдоклассы, псевдоэлементы, CSS переменные, медиа запросы, кейфреймы, комбинаторы, колонки, flex, сетки, вычисляемые значения…).

С точки зрения UI компонент – это изолированный фрагмент документа (button — компонент). CSS придумали для стилизации документов, которые полностью состоят из компонентов. Так в чем же проблема?

Как говорится «используйте правильный инструмент для работы».

Стилизованные компоненты

styled-components позволяют писать CSS в JS с помощью шаблонных литералов из тегов. Они удаляют связь между компонентами и стилями – компонент превращается в стилевую конструкцию низкого уровня.

which is

styled-components сейчас в тренде. С их помощью стилизуют компоненты в React.

Проясним кое-что: styled-components – это просто абстракция высокого уровня поверх CSS. Она лишь парсит ваш CSS, написанный в JS, и создает JSX элементы, связанные с CSS.

Мне не нравится этот ажиотаж, вокруг него много недоразумений.

Я спросил на IRC, Reddit и Discord, почему люди используют styled-components. Я собрал список общих ответов, почему люди предпочитают styled-components. Я называю их мифами.

Миф №1: они решают проблему глобального пространства имен и конфликты стилизации

Я называю эту причину мифом, потому что она звучит так, будто бы эта проблема не была решена ранее. CSS Modules, Shadow DOM и бесконечное множество систем именования (BEM) решили эту проблему намного раньше.

styled-components (как CSS модули) снимает с людей ответственность за именование. Люди делают ошибки, компьютеры делают их меньше.

Это не самая хорошая причина использовать styled-components.

Миф №2: styled-components сокращает код

Часто предлагают такой пример:

Во-первых, это совсем не важно. Различия незначительны.

Во-вторых, это не правда. Количество символов зависит от имени стиля.

То же самое применимо к созданию стилей. Это вы увидите ниже в статье (миф №5: так легче стилизовать компоненты по условию). styled-components выигрывает в краткости только при использовании самых базовых компонентов.

Миф №3: styled components заставляет вас больше задумываться о семантике

Неправильный сам посыл. Стили и семантика представляют разные проблемы и требуют разных решений. Процитируем Adam Morse (mrmrs):

«Семантика контента ВООБЩЕ НЕ СВЯЗАНА С ВИЗУАЛЬНЫМИ СТИЛЯМИ. Когда в детстве я играл в лего, я никогда не думал «этот блок для двигателя». Я думал «о, круто, это блок 1×4, я могу сделать с ним, что угодно». Неважно что я собирал, будь-то подводная база для подводников или самолет, я точно знал, как пользоваться лего.»

Все же давайте предположим, что связь есть.

Семантика – использование правильных тегов для написания разметки. Вы знаете, какие HTML теги будут рендерить эти компоненты? Не, не знаете.

Миф №4: так легче расширять стили

В v1 вы можете расширять стили через конструкцию styled(StyledComponent), в v2 представили метод extend для расширения существующих стилей.

Отлично. Но это моно делать и в CSS (с помощью CSS module composition или унаследованного Sass миксина @extend).

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Что легче сделать в JS?

Миф №5: так легче стилизовать компоненты по условию

Суть в том, что вы можете стилизовать компоненты по их свойствам.

В мире React это много значит. По сути ведь, поведение компонентов контролируется через свойства. Можно ли прикреплять значения свойств напрямую в стили, есть ли в этом смысл? Возможно. Но давайте посмотрим на компонент:

Создание стилей по условию через JS дает вам большую силу. Но такие стили также сложнее интерпретировать. Сравните с:

CSS короче (229 символов против 222) и проще читается (кому как). Более того, в CSS можно еще сильнее укоротить и сгруппировать код через препроцессор.

Миф №6: стилизованные компоненты лучше организуют код

Пара людей мне заявили, что им нравятся styled-components, потому что они позволяют писать стили и JS в одном файле.

Я понимаю, что несколько файлов для одного компонента утомляет, однако писать стили и разметку в одном файле – ужасная идея. Это не только усложняет контроль версий, но вам придется долго крутить код на любом компоненте сложнее кнопки.

Если вам обязательно необходимо писать CSS и JS в одном файле, используйте css-literal-loader. Этот инструмент позволяет вытаскивать CSS в момент билда с помощью extract-text-webpack-plugin и использовать стандартные настройки загрузки для обработки CSS.

Миф №7: это улучшает DX. Инструменты потрясающие!

Вы, скорее всего, не использовали styled-components.

Когда со стилями что-то идет не так, ломается все приложение с большим логом ошибки. Сравните с CSS, где ошибка стиля просто неправильно отображает элемент.

У элементов нет распознаваемых className, поэтому в дебаге вам остается лишь переключаться между деревом элементов React и деревом DevTools DOM (в v2 это можно решить с помощью babel-plugin-styled-components).

Нет линтинга (сейчас разрабатывается stylelint plugin).

Невалидные стили просто игнорируются (clear: both; float left; color: #f00; не вернут ошибок и предупреждений; у меня ушло 15 минут в дебаге на прохождение трассировки стека, даже после прочтения исходного кода styled-components). Только после того, как я скопировал код в чат и попросил помочь, кто-то указал мне, что отсутствует :. Вы же заметили, так ведь?)

Подсветка синтаксиса, автозавершение кода и другие тонкости поддерживаются в нескольких IDE. Если вы работаете с правительственными и финансовыми агентствами, есть вероятность, что Atom IDE вам не подойдет.

Миф №8: чем меньше размер, тем больше производительность

Как бы то ни было, styled-components нельзя извлечь в статичный CSS файл (например, https://github.com/webpack-contrib/extract-text-webpack-plugin).То есть браузер не начнет интерпретацию стилей, пока styled-components не распарсит их и не добавит в DOM.

Отсутствие файлов говорит о том, что нельзя кэшировать отдельный CSS и JS

Все стилизованные компоненты оборачиваются в дополнительный HoC. Удар по производительности незначительный. По этой же причине я перестал разрабатывать https://github.com/gajus/react-css-modules (и создал https://github.com/gajus/babel-plugin-react-css-modules).

Из-за HoC рендер на сервере приводит к увеличению разметки в документе

Не заставляйте меня запускать компоненты анимации с помощью динамических значений стилей или кейфреймов

Миф №9: позволяет разрабатывать адаптивные компоненты

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

Во-первых, styled-components вообще с этим не связаны. Это за пределами проекта. Лучше устанавливайте значения style прямо на компонент.

Элементные запросы – интересная проблема, набирающая обороты в обсуждении CSS, в основном в проекте EQCSS и его копиях. Элементные запросы похожи на @media запросы по синтаксису, за исключением того, что элементные запросы работают с определенными элементами.

codedokode / js-task-1.md

Простые задачи на яваскрипт

Сразу расскажу про несколько особенностей яваскрипта, о которых может быть не написано (или мало написано) в учебниках, но которые стоит понимать:

На 2020 год есть 3 версии: ES3, ES5 (он же ES Harmony), ES6 (aka ES Next или ES 2015). ES значит «ECMAScript», а название «JavaScript» это защищенная торговая марка и ее нельзя так просто использовать. ES3 это версия которая работает во всех браузерах с 2000 года, включая древний IE6. ES5, ES6 (подробнее на learn.JS) — новые, их уровень поддержки браузерами описан тут:

На 2020 год писать на ES5, а тем более на ES6 рановато, делать это можно, только если ты пишешь какой-то внутренний проект, например, который будет использоваться только внутри компании и у всех пользователей есть современная версия браузера. Некоторые решают эту проблему транспайлером — компилятором, преобразующим ES5/6 код в ES3.


И еще: язык Ява (Java) не имеет никакого отношения к яваскрипту, похожи в них только название и часть синтаксиса.

В новом Javascript есть строгий режим:

В нем некоторые ошибки, которые ранее прощались, становятся фатальными. Обязательно используй этот режим при решении задач.

Функции и замыкания

Функции — это объекты. У них есть свойства (например length ) и методы (например toSource , apply и call ). Функции можно хранить в переменных, передавать и возвращать из других функций:

Функция при создании привязывается к набору переменных родительской функции и потому видит ее переменные:

  • Код 1 видит переменные a, b и функцию f2 (и f1 тоже)
  • Код 2 видит свои переменные d, e, а также родительские a, b, и f2 (и f1 тоже)
  • Код 3 видит переменную f, а также d, e, a, b, f2 (и f1 тоже)

То есть внутренняя функции видит переменные внешней функции, которые были в момент ее создания. Это называется замыкание.

Внешняя функция не видит переменных внутренней. Код, находящийся вне функций, в глобальном контексте, не видит внутренние (локальные) переменные.

Порядок создания переменных

Локальные переменные (объявленные через var) создаются при входе в функцию, до выполнения ее кода. При этом им изначально присваивается undefined:

Этот код выполняется так:

  • создать переменную a и присвоить ей undefined
  • выполнить первый console.log
  • присвоить a значение 2
  • выполнить второй console.log

Копирование по значению и по ссылке

Примитивные значения дублируются при копировании, копирование объектов просто копирует ссылку на один и тот же объект. Примитивные значения — это не-объекты, то есть null , undefined , числа, true / false , строки. Если ты их присваиваешь переменной, передаешь или возвращаешь из функции, создается новая независимая копия значения:

Объекты (а это в том числе массивы (Array), функции (Function), регулярки (RegExp), даты (Date)) копируются и передаются в/из функции по ссылке:

Объекты (а значит и массивы, и функции, так как они тоже ими являются) сравниваются по идентичности, то есть тому, что это ссылки на один и тот же объект:

Во втором случае у нас 2 разных объекта и получается false . <> всегда создает новый объект. По этой причине <> === <> , [] === [] , function()<> === function()<> всегда дают false . И вообще, любое сравнение объекта с [] или <> даст false .

Ложные и правдивые значения

Falsy (ложных? лживеньких?) значений ровно 7, их надо знать наизусть: 0 , -0 (да, в программировании есть отрицательный ноль), NaN , null , undefined , » (пустая строка), false . Все остальные значения truthy, в том числе ‘0’ (строка из символа 0). При преобразовании в логический (булев) тип falsy значения преовращаются в false , а все остальные — в true :

У примитивных значений (примитивные = не-объекты, то есть числа, строки, true / false / null / undefined ) нет свойств и методов (они есть только у объектов). При попытке обратиться к свойствам/методам примитивов происходит боксинг: яваскрипт создает временный объект из примитива и обращается к нему (сам примитив остается неизменным). Для чисел создается объект «класса» Number, для true / false Boolean, для строк — String (вот мы и узнали, зачем были нужны эти встроенные классы). Для null и undefined выдается ошибка. То есть код

Превращается внутри в:

Потому присвоить свойство примитиву можно, но оно не сохранится — ведь оно создалось на временном объекте.

Это легко объяснить, если записать что происходит с учетом боксинга:

Боксинг сделан для того, чтобы с примитивами можно было работать как с объектами, например, вызывая у них методы. Само разделение на примитивы и объекты сделано из-за соображений производительности: если бы числа и строки были настоящими объектами, все работало бы медленнее. Если тебе понадобится (100% что не понадобится), ты можешь сделать боксинг и анбоксинг вручную:

Проверялка для первых 10 задачек от @dkab: http://dkab.github.io/jasmine-tests/ (робот не совершенен и может ошибаться. Если ты думаешь, что он не прав, напиши на codedokode@gmail.com и не забудь приложить свою программу — мы разберемся и вправим ему мозги).

Мастер Йода рекомендует:  Импорт CSV-файла в таблицу MySQL

Напиши функцию создания генератора sequence(start, step) . Она при вызове возвращает другую функцию-генератор, которая при каждом вызове дает число на 1 больше, и так до бесконечности. Начальное число, с которого начинать отсчет, и шаг, задается при создании генератора. Шаг можно не указывать, тогда он будет равен одному. Начальное значение по умолчанию равно 0. Генераторов можно создать сколько угодно.

Также, нужна функция take(gen, x) которая вызвает функцию gen заданное число ( x ) раз и возвращает массив с результатами вызовов. Она нам пригодится для отладки:

Напиши функцию map(fn, array) , которая принимает на вход функцию и массив, и обрабатывает каждый элемент массива этой функцией, возвращая новый массив. Пример:

Обрати внимание: функция не должна изменять переданный ей массив:

Это аналог array_map из PHP.

Напиши функцию fmap(a, gen) , которая принимает на вход 2 функции, a и gen , где gen — функция-генератор вроде той, что была в первом задании. fmap возвращает новую функцию-генератор, которая при каждом вызове берет следующее значение из gen и пропускает его через функцию a . Пример:

А, еще, сделай тогда, чтобы в качестве gen можно было указать функцию с аргументами, и при вызове

Эти аргументы бы передавались функции gen . Аргументов может быть любое количество.

Подсказка: если непонятно, как сделать функцию, принимающую произвольное число аргументов, то стоит погуглить про псевдопеременную arguments (псевдопеременная значит, что она выглядит как переменная, но формально ей не является). Чтобы понять, как вызвать функцию с заранее неизвестным числом аргументов, можно погуглить Function.prototype.call и Function.prototype.apply . В JS функции — это объекты, и у них есть полезные методы и свойства.

Частичное применение (partial application)

Напиши функцию partial(fn, a1, a2, . ) , которая позволяет зафиксировать один или несколько аргументов функции. Пример:

Есть функция с аргументами:

Мы можем с помощью partial сделать из нее функцию с меньшим числом аргументов, заранее задав значения для нескольких из них, например:

будет равносилен вызову:

Кстати, имеющийся в новых версиях JS метод bind() тоже может делать частичное применение: http://frontender.info/partial-application-in-javascript-using-bind/ Но ты должен обойтись без его использования, и написать свой велосипед.

Наша функция partial позволяет фиксировать только первые аргументы. Усовершенствуй ее, чтобы зафиксировать можно было любые аргументы, пропущенные аргументы обозначаются с помощью undefined. Обрати внимание, что теперь мы переименовали ее в partialAny , чтобы не путать с предыдущей:

напиши функцию bind , которая позволяет привязать контекст (значение this ) к функции:

В библиотеках тоже есть такой метод: http://lodash.com/docs#bind

напиши функцию pluck , которая берет массив объектов и возвращает массив значений определенного поля:

Такая функция была в lodash: http://lodash.com/docs#pluck но теперь вместо нее советуют использовать map: https://lodash.com/docs/4.15.0#map

Функция не должна изменять исходный массив.

напиши функцию filter , которая принимает функцию-предикат и массив. Возвращает она массив значений, для которых предикат вернет true.

Функция не должна изменять исходный массив:

Аналог из lodash: http://lodash.com/docs#filter В новых браузерах у массивов есть метод filter .

Напиши функцию, считающую число свойств в объекте:

Кстати, в новых браузерах с поддержкой Javascript ES5 есть метод Object.keys(x) , возвращающий массив ключей у объекта.

Можешь взять оттуда первые 5-10 городов и перенести в код. Города в списке могут идти в произвольном порядке. Напиши программу, которая отберет и выведет N самых населенных городов по убыванию числа жителей.

Некая сеть фастфудов предлагает несколько видов гамбургеров:

  • маленький (50 тугриков, 20 калорий)
  • большой (100 тугриков, 40 калорий)

Гамбургер может быть с одним из нескольких видов начинок (обязательно):

  • сыром (+ 10 тугриков, + 20 калорий)
  • салатом (+ 20 тугриков, + 5 калорий)
  • картофелем (+ 15 тугриков, + 10 калорий)

Дополнительно, гамбургер можно посыпать приправой (+ 15 тугриков, 0 калорий) и полить майонезом (+ 20 тугриков, + 5 калорий). Напиши программу, расчиытвающую стоимость и калорийность гамбургера. Используй ООП подход (подсказка: нужен класс Гамбургер, константы, методы для выбора опций и рассчета нужных величин).

Код должен быть защищен от ошибок. Представь, что твоим классом будет пользоваться другой программист. Если он передает неправильный тип гамбургера, например, или неправильный вид добавки, должно выбрасываться исключение (ошибка не должна молча игнорироваться).

Написанный класс должен соответствовать следующему jsDoc описанию (то есть содержать указанные методы, которые принимают и возвращают данные указанного типа и выбрасывают исключения указанного типа. Комментарии ниже можно скопировать в свой код):

Комментарии. Эта задача вызывает много непонимания, потому внимательно прочти эти комментарии перед решением.

Это задача на ООП. Тебе надо сделать класс, который получает на вход информацию о гамбургере, и на выходе дает информацию о весе и цене. Никакого взаимодействия с пользователем и внешним миром класс делать не должен — все нужные данные ты передаешь ему явно. Ни спрашивать ничего, ни выводить.

Почему? Потому что каждый должен заниматься своим делом, класс должен только обсчитывать гамбургер, а вводом-выводом пусть занимаются другие. Иначе мы получим кашу, где разные функции смешаны вместе.

Типы начинок, размеры надо сделать константами. Никаких магических строк не должно быть.

Переданную информацию о параметрах гамбургера класс хранит внутри в своих полях. Вот как может выглядеть использование этого класса:


При неправильном использовании класс сообщает об этом с помощью выброса исключения: (урок на примере PHP: https://gist.github.com/codedokode/65d43ca5ac95c762bc1a , учебник: https://learn.javascript.ru/exception )

Обрати внимание в коде выше на такие моменты:

  • класс не взаимодействует с внешним миром. Это не его дело, этим занимается другой код, а класс живет в изоляции от мира
  • обязательные параметры (размер и начинка) мы передаем через конструктор, чтобы нельзя было создать объект, не указав их
  • необязательные (добавка) добавляем через методы
  • имена методов начинаются с глагола и имеют вид «сделайЧтоТо»: calculateCalories() , addTopping()
  • типы начинок обозначены «константами» с понятными именами (на самом деле просто свойствами, написанным заглавными буквами, которые мы договорились считать «константами»)
  • об исключительных ситуациях сообщаем с помощью исключений
  • объект создается через конструктор — функцию, которая задает начальные значения полей. Имя конструктора пишется с большой буквы и обычно является существительным: new Hamburger(. )
  • «константы» вроде могут иметь значение, являющееся строкой или числом. От смены значения константы ничего не должно меняться (то есть эти значения не должны где-то еще быть записаны). К сожалению, в отличие от других языков (Java, PHP, C#) при опечатке в имени такой «константы» интепретатор JS не укажет на ошибку
  • в свойствах объекта гамбургера логично хранить исходные данные (размер, тип начинки), а не вычисленные из них (цена, число калорий и т.д.). Рассчитывать цену и калории логично в тот момент, когда это потребуется, а не заранее.
  • в JS нет синтаксиса, чтобы пометить свойство или метод приватным (доступным для использования только внутри класса), потому некоторые разработчики начинают их имена с подчеркивания и договариваются, что извне класса к ним никто не обращается. Вообще, в JS нет нормальных классов, потому многое основано на таких договоренностях.

В дополнение, вот еще инструкция, как решать задачи на ООП. Когда ты решаешь задачу на ООП, ты должен ответить на вопросы:

  • какие есть сущности, для которых мы сделаем классы? (Гамбургер).
  • какие у них есть свойства (размер, начинка, добавки). Цена или калории не являются свойствами так как они вычисляются из других свойств и хранить их не надо.
  • что мы хотим от них получить (какие у них должны быть методы). Например, сколько стоит гамбургер?
  • как сущности связаны? У нас одна сущность «Гамбургер» и она ни с чем не связана.

Заметь также, что в моем примере класс не взаимодействует с внешним миром. За это отвечает внешний относительно него код. Потому наш класс унивесален: ты можешь использовать его в консоли, выводя данные через console.log , а можешь приделать навороченный HTML-интерфейс с кнопками для запуска на планшете с тачскрином. Именно в таком стиле ты должен писать ООП код.

Послесловие. Если ты внимательно читал учебник по JS, то наверно знаешь, что в JS нет классов, а до версии ES5 нет и констант ( а как же решать задачу? ). Классы в JS имитируются разными споcобами, всякими костылями самый общеупотребимый — через добавление методов в прототипы объекта:

Если ты знаешь ООП в каком-то другом языке (например PHP, Java, Python), вот список соответствий между другими языками и JS:

  • класс = функция-конструктор + прототип
  • конструктор = функция с именем с большой буквы
  • поле объекта = создается в конструкторе через this.x = 1;
  • метод = функция на прототипе
  • константа класса = свойство, добавленное к функции-конструктору и написанное большими буквами: Hamburger.SOMETHING = ‘something’;
  • статические поля и методы = свойства добавленные к функции: Hamburger.somStaticMethod = function () < .. >;
  • private/public = нету, приватные свойства и методы можно обозначать подчеркиванием в начале
  • интерфейсы, абстрактные классы и методы = нету
  • наследование = в ES5 делается через Object.create , в ES3 через хак с прототипами (описан в learn.javascript.ru)

В ES5 константы можно реализовывать через свойства только для чтения. В ES6 добавлен синтаксис для классов (с константами), но для начала научись делать все по старинке, на ES3, так как такой код встретится в 99% библиотек. Вот новый синтаксис: http://frontender.info/es6-classes-final/

Обрати внимание, что в ES6 добавлен лишь синтаксис, и в итоге создается та же самая имитация класса через прототипы. Потому сначала ты должен научиться создавать их вручную, а потом только переходить на удобный синтаксис.

ES3, ES5, ES6 — это версии JS. ES3 это версия которая работает во всех браузерах с 2000 года. ES5, 6 — новые, их уровень поддержки описан тут:

13. В одном городе есть электрическая сеть. К ней могут быть подключены:

  • электростанции, вырабатывают мощность от 1 до 100 мегаватт
  • солнечные панели, генерируют от 1 до 5 мегаватт днем (в зависимости от вида панели, то есть некоторые панели генерируют 1 мегаватт, некоторые 2 и так далее) и 0 ночью
  • жилые дома, в них от 1 до 400 квартир, потребляют 4 кВт на квартиру днем и 1 кВт ночью.
  • линии электропередач, ведущие в другие города, по ним может подаваться недостающая или отдаваться лишняя энергия. У линий есть свойство «мощность», которая определяет, сколько мегаватт можно передать по ней, а также «цена мегаватта», которое показывает сколько можно получить или придется заплатить за переданный/полученный мегаватт. На разных линиях может быть разная цена.

Дан список всех элементов электросети. Напиши программу, рассчитывющую, сколько электричества необходимо закупить (или можно продать) днем и ночью для обеспечения баланса и сколько это будет стоить (или принесет прибыли). Используй продвинутый ООП подход для решения задачи.

14. напиши функцию, определяющую тип переменной. Результат должен быть одной из строк: ‘undefined’, ‘boolean’ (для true/false), ‘null’, ‘number’, ‘string’, ‘function’, ‘array’, ‘array-like’, ‘object’

array-like — это псевдомассив, то есть объект, у которого есть неотрицательное свойство length и элементы с 0 до length — 1 . Примеры псевдомассивов:

  • псевдопеременная arguments
  • коллекции, которые возвращают функции работы с DOM, вроде document.images , document.getElementsByTagName(..) , document.body.children

В JS есть оператор typeof , но у него есть подвохи:

  • typeof null дает ‘object’
  • typeof [] дает ‘object’

Определение массива через [] instanceof Array не сработает, если массив был создан в друго вкладке или фрейме браузера, так как в каждой вкладке свой объект window и свой window.Array .

Обычно для решения этой задачи используется хак с Object.prototype.toString.call(. ) : https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/toString#Example:_Using_toString_to_detect_object_type (обрати внимание: JS позволяет с помощью call() и apply() вызвать метод на произольном объекте, передав в качестве this что угодно).

15. Напиши функцию неглубокого копирования объектов и массивов.

По умолчанию, как ты наверно, знаешь, при копировании объектов или массивов (которые являются объекты) мы копируем лишь ссылку на тот же самый объект:

Функция неглубокого копирования должна создавать новый массив/объект, и копировать в него элементы из старого. При этом сами элементы копируются по ссылке:

Если в функцию копирования передан объект Date , надо создавать копию того же типа.

В библиотеке lodash для неглубокого копирования есть функция clone: http://lodash.com/docs#clone

16. Напиши функцию глубокого копирования объектов и массивов. Она должна делать не только копию переданного объекта/массива, но и копии вложенных них объектов/массивов. Также, копироваться должны объекты встроенного в JS конструктора Date

Решать можешь потом, так как сейчас не факт что ты сможешь их решить. Правильные ответы можно увидеть например в коде библиотеки lodash:

DOM, который построил Джек

Дальше идут задания на работу с DOM и событиями. DOM = Document Object Model — это набор объектов, которые соответствуют содержимому HTML-страницы, и позволяют взаимодействовать с и изменять содержимое страницы в браузере. Обычно каждому тегу на странице соответствует отдельный узел дерева DOM. Узлы образуют дерево, и для каждого узла можно получить родительский узел, список узлов-детей, соседние узлы.

CSSOM = CSS Object Model — это свойства и методы этих объектов, которые позволяют изменять CSS-стили элементов, а также получать информацию об их размерах и положении.

События в браузере — это события движения мыши, нажатия клавиш, прокрутки страницы. Ты можешь подписываться на эти события, и указанная тобой функция будет вызваться в случае их возникновения.

Теория для изучения (читать можно параллельно с решением задач):

Самый сложный проект на javascript

25.11.2013, 20:26

Сложный проект для изучения языка новичку
Недавно начал изучать js, смог сам сделать примитивный калькулятор с проверками и всё такое, знаю.

Нужна создать (не самый сложный) запрос на 1С
Имеется БД, где в основном Сравочники и Регистры сведений,нужно создать запрос,чтобы можно было.

Самый сложный выбор: Samsung NP350V5C-S06RU или MSI CX61 OND ?
Ноутбук Samsung NP350V5C-S06RU (HD) i7 3610QM(2.3), 6144, 1Tb, AMD HD7670 2Gb, DVD-SMulti, WiFi.

Сложный интернет-проект. Нужны напарники
Друзья, доброго времени суток! Мне требуются напарники для сложного интернет проекта. Вкратце.

Дайте мне, пожалуйста, готовый достаточно сложный проект на C++
У меня похожая проблема. Я тоже изучаю C++ только мне нужны не сами «сложные задачи», а готовые.

JavaScript-анимации

С помощью JavaScript-анимаций можно делать вещи, которые нельзя реализовать на CSS.

Например, движение по сложному пути с временной функцией, отличной от кривой Безье, или canvas-анимации.

Использование setInterval

Анимация реализуется через последовательность кадров, каждый из которых немного меняет HTML/CSS-свойства.

Например, изменение style.left от 0px до 100px – двигает элемент. И если мы будем делать это с помощью setInterval , изменяя на 2px с небольшими интервалами времени, например 50 раз в секунду, тогда изменения будут выглядеть плавными. Принцип такой же, как в кино: 24 кадров в секунду достаточно, чтобы создать эффект плавности.

Псевдокод мог бы выглядеть так:

Более детальная реализация этой анимации:

Для просмотра примера, кликните на него:

Использование requestAnimationFrame

Теперь давайте представим, что у нас есть несколько анимаций, работающих одновременно.

Если мы запустим их независимо с помощью setInterval(. 20) , тогда браузеру будет необходимо выполнять отрисовку гораздо чаще, чем раз в 20ms .

Это происходит из-за того, что каждая анимация имеет своё собственное время старта и «каждые 20 миллисекунд» для разных анимаций – разные. Интервалы не выравнены и у нас будет несколько независимых срабатываний в течение 20ms .

Мастер Йода рекомендует:  Как добавить форму обратной связи в WordPress

…Меньше нагружают систему, чем три независимых функции:

Эти независимые перерисовки лучше сгруппировать вместе, тогда они будут легче для браузера, а значит – не грузить процессор и более плавно выглядеть.

Существует ещё одна вещь, про которую надо помнить: когда CPU перегружен или есть другие причины делать перерисовку реже (например, когда вкладка браузера скрыта), нам не следует делать её каждые 20ms .

Но как нам узнать об этом в JavaScript? Спецификация Animation timing описывает функцию requestAnimationFrame , которая решает все описанные проблемы и делает даже больше.

Такой вызов планирует запуск функции callback на ближайшее время, когда браузер сочтёт возможным осуществить анимацию.

Если в callback происходит изменение элемента, тогда оно будет сгруппировано с другими requestAnimationFrame и CSS-анимациями. Таким образом браузер выполнит один геометрический пересчёт и отрисовку, вместо нескольких.

Значение requestId может быть использовано для отмены анимации:

Функция callback имеет один аргумент – время прошедшее с момента начала загрузки страницы в миллисекундах. Это значение может быть получено с помощью вызова performance.now().

Как правило, callback запускается очень скоро, если только не перегружен CPU или не разряжена батарея ноутбука, или у браузера нет какой-то ещё причины замедлиться.

Код ниже показывает время между первыми 10 запусками requestAnimationFrame . Обычно оно 10-20 мс:

Структура анимации


Теперь мы можем создать более сложную функцию анимации с помощью requestAnimationFrame :

Функция animate имеет три аргумента, которые описывают анимацию:

Продолжительность анимации. Например, 1000 .

Функция расчёта времени, как CSS-свойство transition-timing-function , которая будет вычислять прогресс анимации (как ось y у кривой Безье) в зависимости от прошедшего времени ( 0 в начале, 1 в конце).

Например, линейная функция значит, что анимация идёт с одной и той же скоростью:

Это как если бы в transition-timing-function передать значение linear . Ниже будут представлены более интересные примеры.

Функция отрисовки, которая получает аргументом значение прогресса анимации и отрисовывает его. Значение progress=0 означает что анимация находится в начале, и значение progress=1 – в конце.

Эта та функция, которая на самом деле и рисует анимацию.

Вот как она могла бы двигать элемент:

…Или делать что-нибудь ещё. Мы можем анимировать что угодно, как захотим.

Теперь давайте используем нашу функцию, чтобы анимировать свойство width от 0 до 100% .

Нажмите на элемент для того, чтобы посмотреть пример:

В отличие от CSS-анимаций, можно создать любую функцию расчёта времени и любую функцию отрисовки. Функция расчёта времени не будет ограничена только кривой Безье, а функция draw может менять не только свойства, но и создавать новые элементы (например, для создания анимации фейерверка).

Функции расчёта времени

Мы уже рассмотрели самый простой пример линейной функции расчёта времени выше.

Давайте посмотрим другие. Мы попробуем выполнить анимации с разными функциями расчёта времени, чтобы посмотреть как они работают.

Степень n

Если мы хотим ускорить анимацию, мы можем возвести progress в степень n .

Например, параболическая кривая:

Посмотрим в действии (нажмите для активации):

…Или кубическая кривая, или любой другой множитель n . Повышение степени увеличивает скорость анимации.

Вот график для функции progress в степени 5 :

Обратно: выстрел из лука

Эта функция совершает «выстрел из лука». В начале «натягивается тетива», а затем «выстрел».

В отличие от предыдущей функции, теперь всё зависит от дополнительного параметра x – «коэффициента эластичности». Он определяет силу «натяжения тетивы».

График для x = 1.5 :

Для анимации мы используем x с определённым значением. Пример для x со значением 1.5 :

Отскоки

Представьте, что мы бросили мяч вниз. Он падает, ударяется о землю, подскакивает несколько раз и останавливается.

Функции bounce делает то же самое, но в обратном порядке: «отскоки» начинаются сразу. Для этого заданы специальные коэффициенты:

Эластичная анимация

Ещё одна «эластичная» функция, которая принимает дополнительный параметр x для «начального отрезка».

График для x=1.5 :

В действии со значением x=1.5 :

Реверсивные функции: ease*

Итак у нас получилась коллекция функций расчёта времени. Их прямое использование называется «easeIn».

Иногда нужно показать анимацию в обратном режиме. Преобразование функции, которое даёт такой эффект, называется «easeOut».

easeOut

В режиме «easeOut» timing функции оборачиваются функцией timingEaseOut :

Другими словами, мы имеем функцию «преобразования» – makeEaseOut , которая берет «обычную» функцию расчёта времени и возвращает обёртку над ней:

Например, мы можем взять функцию bounce описанную выше:

Таким образом, отскоки будут не в начале функции, а в конце. Смотрится гораздо лучше:

Ниже мы можем увидеть, как трансформации изменяют поведение функции:

Если раньше анимационный эффект, такой как отскоки, был в начале, то после трансформации он будет показан в конце.

На графике выше красным цветом обозначена обычная функция и синим – после easeOut .

  • Обычный скачок – объект сначала медленно скачет внизу, а затем резко подпрыгивает вверх.
  • Обратный easeOut – объект вначале прыгает вверх, и затем скачет там.

easeInOut

Мы можем применить эффект дважды – в начале и конце анимации. Такая трансформация называется «easeInOut».

Для функции расчёта времени, анимация будет вычисляться следующим образом:

В действии, bounceEaseInOut :

Функция «easeInOut» объединяет два графика в один: easeIn (обычный) для первой половины анимации and easeOut (обратный) – для второй половины.

Разница хорошо заметна, если сравнивать графики easeIn , easeOut и easeInOut для функции circ :

  • Красный обычный вариант circ ( easeIn ).
  • Зелёный – easeOut .
  • Синий – easeInOut .

Как видно, график первой половины анимации представляет собой уменьшенный easeIn , а второй – уменьшенный easeOut . В результате, анимация начинается и заканчивается одинаковым эффектом.

Более интересная функция «draw»

Вместо передвижения элемента мы можем делать что-нибудь ещё. Всё, что нам нужно – это правильно написать функцию draw .

Вот пример «скачущей» анимации набирающегося текста:

Итого

JavaScript может помочь в тех случаях, когда CSS не справляется или нужен жёсткий контроль над анимацией. JavaScript-анимации должны быть сделаны с помощью requestAnimationFrame . Это встроенный метод браузера, который вызывает переданную в него функцию в тот момент, когда браузер готовится совершить перерисовку (обычно это происходит быстро, но конкретные задержки зависят от браузера).

Когда вкладка скрыта, на ней совсем не происходит перерисовок, и функция не будет вызвана: анимация будет приостановлена и не потратит ресурсы. Это хорошо.

Вспомогательная функция animate для создания анимации:

  • duration – общая продолжительность анимации в миллисекундах.
  • timing – функция вычисления прогресса анимации. Получается момент времени от 0 до 1, возвращает прогресс анимации, обычно тоже от 0 до 1.
  • draw – функция отрисовки анимации.

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

JavaScript-анимации могут использовать любые функции расчёта времени. Мы рассмотрели множество примеров и их вариаций, чтобы сделать их ещё более универсальными. В отличие от CSS, мы здесь не ограничены только кривой Безье.

То же самое и с draw : мы можем анимировать всё что угодно, не только CSS-свойства.


Создаем простое JavaScript слайд-шоу без использования JQuery

В этой статье мы рассмотрим следующие вопросы:

  • создание галереи JavaScript без использования внешних библиотек, таких как JQuery ;
  • понимание проблем UX и доступности; в том числе, следует ли использовать слайд-шоу вообще;
  • добавление элементов управления слайд-шоу.

Если не использовать библиотеки, то страница работает лучше ( в связи с меньшим количеством кода ), и можно располагать созданное слайд-шоу в любом месте, не беспокоясь о загрузке дополнительных файлов.

Базовое слайд-шоу

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

В коде CSS галереи для сайта JavaScript нам нужно реализовать следующее:

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

Вот как будет выглядеть ядро CSS :

Далее нужно добавить стили, которые определяют внешний вид простой галереи JavaScript . Я использовал следующие:

JavaScript

Основная задача JavaScript — скрыть текущий слайд и показать следующий. Для достижения этого нужно изменить классы слайдов.

Программный код галереи JavaScript :

Разберемся, как работает этот код:

  1. Мы используем querySelectorAll , чтобы получить слайды из контейнера;
  2. Далее мы устанавливаем переменную для отслеживания текущего слайда;
  3. Затем мы задаем интервал, чтобы выводить каждый следующий слайд через две секунды ( 2000 мс ).

Давайте более глубоко рассмотрим то, что происходит внутри функции nextSlide :

  • Мы изменяем класс текущего слайда, чтобы он не отображался в JavaScript галерее изображений. CSS свойство transition автоматически обрабатывает постепенное скрытие слайда;
  • После этого мы добавляем класс к текущему слайду. Но при этом используем оператор % , чтобы вернуться обратно к началу, если достигнут последний слайд. Напоминаю, что оператор % делит два числа и возвращает остаток. Это востребовано для реализации такого функционала, как часы или календарь;
  • После того, как мы получили номер нового слайда, мы изменяем его класс, чтобы слайд отображался. CSS свойство transition автоматически обрабатывает эффект исчезновения.

Теперь у нас есть базовое слайд-шоу.

Примечание по совместимости:

CSS переходы не поддерживаются в IE версии 9 и ниже. В этих браузерах вместо эффекта растворения слайд-шоу будет плавно исчезать, показывая следующий слайд.

Вот наша базовая JavaScript галерея фотографий в действии:

UX и доступность

Рассмотрим, как слайд-шоу может ухудшить опыт взаимодействия пользователя и доступность сайта.

Слайд-шоу может скрыть важный контент

Важная информация не должна выводиться через слайд-шоу. По данным исследования Университета Нотр-Дам, только 1,07% пользователей кликают по какому либо элементу слайд-шоу. И из этих 1,07% только небольшая часть, ( 3% или меньше ), кликает по какому-либо слайду, кроме первого. Это иллюстрирует, насколько опасно размещать важный контент в слайд-шоу.

Пользователь может получить искаженное представление о главной цели сайта

Ваш сайт должен предоставлять пользователю четкий и очевидный путь к тому, что он должен сделать. И если слайд-шоу мешает этому, вам нужно пересмотреть стратегию для этой страницы.

Специалисты компании WiderFunnel , занимающаяся оптимизацией конверсии, проверили эффективность демонстрации слайдов, и пришли к следующему выводу:

Мобильные пользователи могут быть не в восторге

Галерея для сайта JavaScript может увеличить время загрузки данных на мобильных устройствах. Это в дополнение к тому, что создавать элементы управления для мобильных каруселей намного сложнее.

Когда использовать слайд-шоу

Когда же на самом деле стоит отображать слайд-шоу? Вот некоторые предложения.

Создание общего впечатления

Когда вас не волнует, обратит ли пользователь внимание на содержимое какого-либо отдельного слайда, но необходимо создать общее визуальное впечатление. Для этого слайд-шоу может отлично подойти.

Когда к контенту легко получить доступ и без слайд-шоу

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

Для общего улучшения качества сайта

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

Указатели для увеличения доступности

Существует пять принципов, которым нужно следовать, чтобы обеспечить доступность галереи JavaScript :

  1. Дать пользователю возможность остановить слайд-шоу в любой момент;
  2. Создать видимые элементы управления;
  3. Обеспечить правильный и понятный порядок фокусировки слайд-шоу;
  4. Валидный код и таблицы стилей;
  5. Создать равнозначную альтернативу слайд-шоу.

Чтобы слайд-шоу стало более доступным, мы добавим ряд элементов управления.

Добавление элементов управления слайд-шоу

Пришло время добавить в скрипт галереи JavaScript кнопку « Пауза / Проигрывать «, кнопку « Следующий » и кнопку « Предыдущий «.

Кнопка «Пауза / Проигрывать»

Во-первых, добавим кнопку в HTML :

Затем добавим следующий код JavaScript :

Вот что делает этот скрипт галереи JavaScript :

  • Переменная playing хранит информацию, проигрывается ли слайд-шоу.
  • Мы храним кнопку паузы в переменной, поэтому нам не нужно искать ее.
  • Функция pauseSlideshow приостанавливает проигрывание слайд-шоу и заменяет кнопку “ Pause ” кнопкой « Play «.
  • Функция playSlideshow возобновляет проигрывание слайд-шоу и заменяет кнопку « Play » кнопкой “ Pause ”.
  • Мы добавляем обработчик клика, чтобы кнопка Play/Pause переключала режимы паузы и проигрывания слайд-шоу.

Вот как слайд-шоу будет работать с кнопкой паузы:

Кнопки «Следующий» и «Предыдущий»

Сначала добавьте в HTML кнопки « Next » и « Previous «:

Следующий код галереи JavaScript…

… измените на этот:

В приведенном выше скрипте мы для большей гибкости добавили общую функцию goToSlide . Мы также изменили математику внутри переменной currentSlide , чтобы исключить отрицательные числа. Чтобы проверить себя, выберите число для slides.length и посмотрите, что произойдет с currentSlide после n изменений.

Теперь добавьте этот код, чтобы кнопки галереи для сайта JavaScript делали то, что нам нужно:

Теперь у нас есть рабочие элементы управления.

Вот как выглядит слайд-шоу с элементами управления и некоторыми дополнительными стилями:

Обратите внимание, что мы приостанавливаем проигрывание JavaScript галереи изображений, когда пользователь нажимает кнопку “ Next ” или “ Previous ”, чтобы его самостоятельная навигация по слайдам не была изменена автоматическим проигрыванием.

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

Резервный вариант для тех случаев, когда JavaScript не доступен

Иногда JavaScript не удается загрузить, он выключен, не поддерживается устройством и так далее. В идеале, пользователь должен иметь возможность что-то получить даже в таких ситуациях.

Если основной целью слайд-шоу является создание общего визуального впечатления, и вам более важно сохранить макет страницы, чем показать все фотографии, тогда отобразите только первое изображение. Если должны быть просмотрены все изображения, тогда можно вывести их в виде списка. Мы рассмотрим здесь оба случая.

Скрыть элементы управления, когда JavaScript не доступен

Используйте CSS , чтобы по умолчанию скрыть элементы управления простой галереи JavaScript :

Затем примените JavaScript , чтобы отобразить элементы управления. Таким образом, пользователь будет видеть элементы управления только в том случае, когда JavaScript подключен:

Приведенный выше код галереи для сайта JavaScript обрабатывает через цикл каждый из элементов управления и делает их видимыми.

Вывод изображений в виде списка, когда JavaScript не доступен

Измените для класса .slide свойство position: absolute ; на position: static; . Таким образом, слайды по умолчанию будут выведены в виде списка.

Затем добавьте в JavaScript цикл, чтобы обработать каждый слайд и изменить значение свойства position на absolute . Этот код нужно поместить после определения переменной slides :

Благодаря этому, если JavaScript доступен, слайды не будут выводиться в виде списка.

Заключение

Отдельно я хотел бы подчеркнуть следующее: когда вы размещаете какой-то элемент на странице, подумайте, как это повлияет на юзабилити и как это поможет в достижении главной цели сайта.

Данная публикация представляет собой перевод статьи « Make a Simple JavaScript Slideshow without jQuery » , подготовленной дружной командой проекта Интернет-технологии.ру

Добавить комментарий