Вёрстка сайтов | HTML, CSS, JS

Всплытие и погружение js

2023-09-17T20:22:27.487Z

Всплытие (bubbling) и погружение (capturing) - это два механизма обработки событий в JavaScript, которые происходят во время взаимодействия пользователя с веб-страницей. Эти механизмы связаны с распространением событий внутри DOM-структуры.

Всплытие (Bubbling):
Когда пользователь выполняет какое-либо действие (например, клик или наведение мыши) на элементе, событие начинает всплывать от самого вложенного элемента к родительским элементам. Другими словами, событие сначала обрабатывается на самом внутреннем элементе, а затем поочередно на его родителях вверх по иерархии DOM.

Пример:
```javascript
<div id="parent">
<button id="child">Нажми меня</button>
</div>

parent.addEventListener('click', () => {
console.log('Событие на родителе');
});

child.addEventListener('click', () => {
console.log('Событие на потомке');
});
</script>
```

Если пользователь кликнет на кнопке "Нажми меня", то сначала будет выведено "Событие на потомке", а затем "Событие на родителе".

Погружение (Capturing):
В отличие от всплытия, при использовании механизма погружения событие сначала поймается на самом внешнем элементе (например, на корневом элементе документа) и затем будет перехвачено на элементах вложенной структуры. Событие движется "сверху вниз" по иерархии DOM.

Пример:
```javascript
<div id="parent">
<button id="child">Нажми меня</button>
</div>

parent.addEventListener('click', () => {
console.log('Событие на родителе', { capture: true });
}, true);

child.addEventListener('click', () => {
console.log('Событие на потомке', { capture: true });
}, true);
</script>
```

Если пользователь кликнет на кнопке "Нажми меня", то сначала будет выведено "Событие на родителе" (с указанием `{ capture: true }`), а затем "Событие на потомке" (с указанием `{ capture: true }`).

**Как выбрать между всплытием и погружением**:
Большинство событий в DOM используют механизм всплытия по умолчанию. Вы можете использовать фазу захвата, указав третий аргумент `true` при добавлении слушателя события. Выбор между этими механизмами зависит от конкретных требований вашего проекта.

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

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

Обратите внимание, что не все события поддерживают оба механизма (всплытие и погружение). Например, события `focus` и `blur` используют только механизм всплытия.

Полезные javascript библиотеки 3 часть

2023-09-17T20:16:14.842Z

D3.js: Эта библиотека предназначена для визуализации данных. Она позволяет строить сложные графики и диаграммы.
Lodash: Это JavaScript-библиотека, которая предоставляет множество полезных функций для работы с массивами, объектами и коллекциями.
Moment.js: Это библиотека, предназначенная для работы с датой и временем.
Svelte: Это современный фреймворк, который позволяет создавать реактивные пользовательские интерфейсы без лишнего кода и с хорошей производительностью.
React - библиотека для создания пользовательских интерфейсов и управления состоянием.
Angular - еще один фреймворк от Google для создания веб приложений. Имеет большую экосистему и множество дополнений.

Полезные js библиотеки 2 часть

2023-09-10T21:18:48.936Z

Конечно, вот еще несколько полезных JavaScript-библиотек для верстки:

1. Flickity: Эта библиотека предоставляет мощные инструменты для создания каруселей и галерей изображений с поддержкой жестов и адаптивным дизайном.

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

3. Typed.js: Если вам нужно добавить анимированный текст, который появляется как если бы он был набран на машинке, Typed.js предоставляет простой способ для этого.

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

5. Barba.js: Эта библиотека позволяет создавать плавные переходы между страницами вашего сайта без полной перезагрузки страницы. Это помогает улучшить пользовательский опыт.

6. Clipboard.js: Clipboard.js облегчает копирование текста в буфер обмена при клике на элемент. Это полезно для кнопок "Скопировать" и подобных функций.

7. Lozad.js: Эта библиотека облегчает загрузку изображений при прокрутке страницы. Она помогает ускорить начальную загрузку страницы.

8. Tippy.js: Tippy.js помогает создать красивые всплывающие подсказки с множеством настроек и анимаций.

9. Cleave.js: Cleave.js - это библиотека для автоматического форматирования ввода, такого как номера телефонов или даты.

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

Полезные js библиотеки 1 часть

2023-09-10T21:16:42.097Z

Существует множество полезных JavaScript-библиотек, которые упрощают и улучшают процесс верстки веб-сайтов. Вот несколько таких библиотек:

1. Animate.css: Эта библиотека содержит большое количество анимаций CSS, которые могут быть легко добавлены к вашим элементам. Это хороший способ сделать ваш сайт более интерактивным.

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

3. GreenSock Animation Platform (GSAP): GSAP - это мощная библиотека для создания анимаций с высокой производительностью. Она поддерживает разнообразные типы анимаций и включает инструменты для управления временем анимации.

4. Three.js: Если вам нужно создать 3D-графику на вашем сайте, Three.js - это библиотека, которую следует рассмотреть. Она упрощает создание и взаимодействие с 3D-объектами на веб-странице.

5. AOS (Animate on Scroll): Эта библиотека обеспечивает простой способ добавления анимаций к элементам при прокрутке страницы. Это может сделать ваш сайт более интересным и привлекательным.

6. Chart.js: Если вам нужно встроить графику и диаграммы, Chart.js предоставляет простой способ создания интерактивных графиков на вашем сайте.

7. Masonry: Библиотеки, такие как Masonry, позволяют создавать динамические сетки, в которых элементы автоматически распределяются по доступному пространству.

8. Typed.js: Эта библиотека добавляет анимированный текст, который появляется как если бы он был набран на машинке. Это полезно для создания визуально привлекательных заголовков и сообщений.

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

Полезные css функции 2 часть

2023-09-10T21:10:32.583Z

Продолжим с дополнительными полезными CSS функциями:

1. `clip-path()`: Эта функция позволяет создавать различные обрезанные (клIPPING) формы для элементов. Вы можете создавать круги, многоугольники и другие интересные формы. Пример: `clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);` создаст треугольник.

2. `text-overflow()`: Используйте эту функцию для обрезки текста, который не помещается в заданный контейнер. Вы можете настроить, как будет выглядеть обрезанный текст, например, добавить многоточие. Пример: `text-overflow: ellipsis;`.

3. `filter()`: С помощью этой функции можно применять фильтры к изображениям, таким как размытие, контрастность и насыщенность. Пример: `filter: blur(5px);`.

4. `backdrop-filter()`: Эта функция подобна `filter()`, но применяется к заднему фону элемента, создавая эффект размытия заднего фона. Пример: `backdrop-filter: blur(5px);`.

5. `object-fit`: Это свойство позволяет управлять тем, как изображение вписывается в свой контейнер. Например, вы можете сделать изображение квадратным и обрезать его или увеличить/уменьшить, чтобы оно полностью заполнило контейнер. Пример: `object-fit: cover;`.

6. `will-change`: Это свойство сообщает браузеру о том, что элемент будет изменяться, и оптимизирует производительность анимации. Пример: `will-change: transform;`.

7. `shape-outside`: Это свойство определяет область, которая окружает элемент и форму которой принимает текст. Это полезно для создания текстовых обтеканий изображений или других элементов. Пример: `shape-outside: circle(50%);`.

8. `counter(): Эта функция используется в комбинации с `content` для создания автоматически генерируемых номеров или маркеров. Пример: `content: counter(chapter);`.

Полезные сss функции 1 часть

2023-09-10T21:08:48.136Z

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

1. `calc()`: Эта функция позволяет выполнять арифметические операции прямо в CSS. Например, вы можете использовать `calc()` для вычисления ширины элемента на основе других значений. Пример: `width: calc(100% - 20px);`.

2. `var()`: Функция `var()` используется для определения и использования пользовательских CSS переменных (переменных). Она позволяет создавать динамические стили, что делает код более гибким и управляемым. Пример: `color: var(--primary-color);`.

3. `linear-gradient()`: С помощью этой функции можно создавать градиенты. Вы можете управлять цветами и направлением градиента. Пример: `background: linear-gradient(to right, red, blue);`.

4. `url()`: Функция `url()` используется для вставки изображений, шрифтов и других ресурсов. Например, `background-image: url('image.jpg');`.

5. `rgb()` и `rgba()`: С помощью этих функций вы можете устанавливать цвета, используя значения красного, зеленого и синего (RGB) или добавлять прозрачность с помощью `rgba()`. Примеры: `color: rgb(255, 0, 0);`, `background-color: rgba(0, 0, 255, 0.5);`.

6. `rotate()`: Функция `rotate()` позволяет вращать элементы. Вы можете указать угол в градусах, на который нужно повернуть элемент. Пример: `transform: rotate(45deg);`.

7. `scale()`: Эта функция масштабирует элементы. Вы можете увеличивать или уменьшать элемент в горизонтальном и вертикальном направлениях. Пример: `transform: scale(1.2);`.

8. `translate()`: Функция `translate()` используется для перемещения элементов. Она может сдвигать элементы по горизонтали и вертикали. Пример: `transform: translate(10px, 20px);`.

9. `box-shadow()`: Эта функция добавляет тень к элементам. Вы можете настраивать цвет, размытие и смещение тени. Пример: `box-shadow: 3px 3px 5px #888;`.

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

Задача: Список задач (To-Do List)

2023-09-10T21:03:42.358Z

Ваша задача - создать интерактивный список задач (To-Do List), который позволит пользователям добавлять, удалять и отмечать задачи как выполненные.

Требования:

1. Создайте текстовое поле и кнопку для добавления новых задач.

2. После добавления задачи, она должна появиться в списке задач.

3. Добавьте кнопку "Удалить" для каждой задачи, чтобы пользователь мог удалить ее из списка.

4. Реализуйте механизм отметки задачи как выполненной (с помощью чекбокса или другого элемента управления).

5. Позвольте пользователю фильтровать задачи, показывая только невыполненные задачи или все задачи.

6. Сохраняйте задачи после их добавления и удаления, чтобы они оставались при обновлении страницы (можно использовать localStorage или другие методы сохранения данных).

7. Стилизуйте список задач, чтобы он выглядел привлекательно.

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

Задача: Интерактивный слайдер изображений

2023-09-10T21:02:30.432Z

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

Требования:

1. У вас должно быть несколько изображений (например, 3-5), и начните с отображения первого изображения.

2. Создайте кнопки "Вперед" и "Назад", которые позволяют пользователю переключаться между изображениями.

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

4. Отобразите текущий номер слайда (например, "Слайд 1 из 3") для удобства пользователя.

5. Реализуйте бесконечный цикл, чтобы после последнего изображения снова отображалось первое.

6. Предоставьте возможность автоматической прокрутки слайдов (автоматическое воспроизведение), которую пользователь может включить и выключить.

7. Используйте HTML, CSS и JavaScript для создания слайдера.

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

Как называть html классы

2023-09-10T21:00:39.493Z

Именование классов HTML элементов - это важный аспект создания структурированных и читаемых веб-страниц. Хорошее именование классов упрощает понимание и обслуживание вашего кода. Вот некоторые bewchcie советы по именованию классов в HTML:

1. Используйте описательные имена: Называйте классы на основе их описания и назначения. Подумайте о том, что делает элемент, и выберите имя, которое отражает его смысл. Например, если это меню навигации, класс может называться `nav-menu`, если это заголовок, то `page-title`.

2. Используйте семантику: Придерживайтесь семантических имен. Это означает, что вы должны выбирать имена, которые точно описывают, что представляет собой элемент. Например, для заголовков используйте классы `header`, `subheader`, `section-title`, а не `div1`, `div2`, `text`.

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

4. Используйте дефисы или нижние подчеркивания: Разделяйте слова в именах классов дефисами (`my-class-name`) или нижними подчеркиваниями (`my_class_name`). Это делает имена более читаемыми и различимыми.

5. Избегайте ключевых слов и спецсимволов: Не используйте ключевые слова из HTML, CSS или JavaScript (например, `class`, `id`, `style`, `div`, `function`) в именах классов. Избегайте спецсимволов, пробелов и символов, которые могут вызвать проблемы при работе с CSS и JavaScript.

6. Согласуйте имена классов: Важно соблюдать согласованность в именах классов в вашем проекте. Если вы используете BEM, SMACSS или другую методологию, придерживайтесь их соглашений по именованию.

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

8. Контекст и область действия: Придерживайтесь той же семантики и именования в пределах определенной области действия. Например, если у вас есть блок "новости", используйте `news-title`, `news-image`, `news-description` и т. д.

9. **Краткость и ясность**: Старайтесь сделать имена классов краткими и ясными. Если имя класса становится слишком длинным и сложным, это может сигнализировать о необходимости пересмотреть структуру вашего HTML или CSS.

10. **Документация**: При необходимости добавляйте комментарии или документацию к вашим классам, особенно если они используются для стилизации сложных компонентов.

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

Также можете использовать различные методологии, например БЭМ

Как сделать поднимающийся placeholder?

2023-09-10T20:56:12.418Z

Чтобы создать поднимающийся placeholder для поля ввода, используйте следующий код CSS:

```css
/* Стили для поля ввода */
input {
border: none;
border-bottom: 2px solid #ccc;
outline: none;
font-size: 18px;
transition: border-color 0.3s;
padding: 10px 0;
background: transparent;
}

/* Стили для поднимающегося placeholder */
input:focus ~ label,
input:valid ~ label {
transform: translateY(-20px);
font-size: 14px;
color: #555;
pointer-events: none;
}

/* Стили для метки (label) */
label {
position: absolute;
top: 10px;
left: 0;
font-size: 18px;
color: #888;
transition: transform 0.3s, font-size 0.3s, color 0.3s;
}

/* Стили для активного поля ввода */
input:focus {
border-color: #555;
}
```

HTML-код для этой структуры выглядит следующим образом:

```html
<div class="input-container">
<input type="text" required>
<label>Имя</label>
</div>
```

Этот код создает поле ввода с эффектом поднимающегося placeholder:

1. Поле ввода и метка (label) размещены в обертке (`.input-container`).

2. При фокусировке на поле ввода (`input:focus`) или при наличии введенных данных (`input:valid`), метка (label) поднимается вверх и уменьшается в размере, а также изменяется цвет.

3. Свойство `pointer-events: none;` используется, чтобы метка (label) не мешала взаимодействию с полем ввода.

4. Эффект анимации достигается с помощью CSS-переходов (transitions).

Этот код позволяет создать эффект поднимающегося placeholder без необходимости использовать JavaScript.