Полное руководство по localStorage в JavaScript localStorage

JavaScript localStorage – это основное хранилище данных, которое находится в объекте Window браузера. Вы можете сохранять любую информацию в localStorage, и она будет сохраняться даже при перезагрузке страницы или закрытии и повторном открытии браузера.

Зачем оно нужно, как им пользоваться и какие методы существуют, рассказали в статье: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/

@frontend_school #статья #javascript

Большой видеоурок по Three.js

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

https://youtu.be/UMqNHi1GDAE

@frontend_school #видео #javascript #threejs https://www.youtube.com/watch?v=UMqNHi1GDAE

Спорим, вы знаете не все методы для работы со строками в JavaScript?

Хоть нам и приходится каждый день иметь дело с JS, но всё знать невозможно. В этой статье собраны 40 методов, которые позволяют взаимодействовать со строками:

https://proglib.io/p/40-osnovnyh-i-nestandartnyh-metodov-dlya-raboty-so-strokami-v-javascript-2022-05-19

Напишите в комментарии сколько из них вы знали до прочтения статьи 👇

#javascript #строки

Учитесь фронтенду с нами — подпишитесь 💻

Как работают функции JavaScript

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

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

https://proglib.io/p/chto-v-korobke-kak-rabotayut-funkcii-v-javascript-2022-06-12

#javascript

Учитесь фронтенду с нами — подпишитесь 💻

Что такое делегирование событий в JS и как это работает

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

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

Вот пример, как можно это использовать:

// Получаем родительский элемент
const parentElement = document.getElementById('parentElement');
// Добавляем обработчик на родительский элемент
parentElement.addEventListener('click', function(event) {
// Проверяем, что кликнули на нужный дочерний элемент
if(event.target.classList.contains('childElement')) {
// Обрабатываем событие
console.log('Событие обработано на дочернем элементе');
}
});

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

#javascript #урок

Учитесь фронтенду с нами — подпишитесь 💻

Учимся создавать анимацию жидкости с помощью JS и CSS

В этом видео вы за 8 минут научитесь делать клёвую анимацию, которая создаёт эффект стекающей жидкости. Причём движение элементов отличается в случае свободного падения и взаимодействия с другими объектами на странице.

Подробнее:
https://youtu.be/a5X512icOM8

#видео #css #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Метод bind() в JavaScript

Простыми словами, bind — это инструмент, который позволяет «привязать» определённый контекст (this) к функции.

Давайте разберёмся на примере. Представьте, что у вас есть объект user:

const user = {
name: 'Аня',
greet() {
console.log(`Привет, меня зовут ${this.name}`);
}
};

Если мы вызовем user.greet(), то увидим: «Привет, меня зовут Аня». Всё работает, потому что контекст (this) указывает на объект user.

Но что, если мы захотим передать эту функцию в другое место? Например:

const greetFunc = user.greet;
greetFunc(); // Что произойдет?

В этом случае контекст потеряется, и this будет указывать не на user, а на глобальный объект (или undefined в строгом режиме). Метод bind поможет нам решить эту проблему:

const greetFuncBound = user.greet.bind(user);
greetFuncBound(); // Привет, меня зовут Аня

Теперь функция greetFuncBound всегда будет знать, что её контекст — это объект user.

#урок #javascript

Область видимости и замыкания в JavaScript

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

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

https://habr.com/ru/articles/828618/

#javascript

Учитесь фронтенду с нами — подпишитесь 💻

#викторина #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Форма авторизации с капчей

Наверняка вам придётся делать такую форму в своей практике, поэтому чем быстрее научитесь, тем лучше. В этом проекте форма создана на стандартном стеке — HTML, CSS, JS.

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

https://codepen.io/Frontend-Portal/pen/oNRbjXG

#codepen #html #css #javascript