Большой видеоурок по 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

Что такое WeakMap и WeakSet

WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. Особенность WeakMap: если объект, использованный как ключ, больше нигде не упоминается, он автоматически удаляется.

WeakSet — это коллекция, хранящая только уникальные объекты. Как и в WeakMap, если объект больше не используется, он может быть удалён автоматически.

Примеры использования:

let wm = new WeakMap();
let obj = {};

wm.set(obj, 'значение');
console.log(wm.get(obj)); // 'значение'

obj = null; // Объект становится недоступен и может быть удалён

Что такое WeakMap и WeakSet

WeakMap — это коллекция, где ключами могут быть только объекты, а значения могут быть любого типа. ОсобенноЧто такое Wподходит для привязки данных к объекту с автоматической очисткой, например, для кеша DOM-элементов. WeakSet полезен для хранения множества объектов с автоматической очисткой.

#урок #javascript

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

Анимации скролла во фронтенде

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

Если хотите научиться делать также, то эта статья для вас. Здесь вы найдёте несколько демо для изучения работы эффекта на CSS и JS, полезные инструменты, которые упростят создание таких анимаций, а также бесплатный видеокурс по этой теме:
https://scroll-driven-animations.style/

#css #javascript #en

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

Сегодня поговорим о загадочном свойстве __proto__. Что это такое и почему это важно для JavaScript?

Всё дело в прототипах. В JavaScript каждый объект может «наследовать» свойства и методы другого объекта. Этот «наследник» называется прототипом. Свойство __proto__ указывает на объект, который является прототипом данного объекта.

Например:

const animal = {
eats: true
};

const rabbit = {
jumps: true,
__proto__: animal
};

Теперь у объекта rabbit есть доступ к свойству eats через прототип animal. Это позволяет экономить память и добиваться мощной функциональности с минимальными усилиями. Знание прототипов и __proto__ поможет вам писать более эффективный и выразительный код.

#урок #javascript

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

Асинхронность в JavaScript: Async/Await, Promises, Callbacks, Fetch API

Большой бесплатный курс по асинхрономму программированию на JavaScript. Вы изучите javascript promises, async / await и Fetch API. Также вы сможете сразу воспользоваться новыми знаниями для создания 3 проектов.

Смотрим курс тут:

https://youtu.be/OFpqvaJ3QYg

#en #javascript #видео #курс

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

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

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

Что такое JSON.stringify()

Это метод в JavaScript, который позволяет превратить объект или массив в строку формата JSON (JavaScript Object Notation). Это бывает полезно, например, когда нужно передать данные по сети или сохранить их в локальное хранилище.

Пример:const user = {
name: «Alice»,
age: 25,
isStudent: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name»:"Alice»,"age»:25,"isStudent»:true}

Как видите, объект превратился в строку, которую легко передавать и сохранять. Затем её можно обратно превратить в объект с помощью JSON.parse.

Понимание работы поможет вам эффективно работать с данными на стороне клиента и сервера.

#урок #javascript #json

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

Regulex — визуализатор регулярных выражений для JavaScript

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

Ссылка на инструмент: https://jex.im/regulex/

#инструмент #javascript #regex

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

Что делает директива "use strict" в JavaScript

"use strict" — это способ включить строгий режим в коде JavaScript. Он помогает сделать ваш код более безопасным и чистым, выявляя ошибки, которые в обычном режиме могли бы быть незаметны.

Пример:

"use strict";

var x = 1;
delete x; // Ошибка: нельзя удалить объявленную переменную

function test() {
  y = 2; // Ошибка: "y" не объявлена
}
test();

Без строгого режима такие ошибки могли бы остаться незамеченными и привести к неожиданным проблемам в коде.

Как включить строгий режим:
— в начале файла: "use strict";
— в пределах функции: function myFunction() { "use strict"; /* код */ }

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

#урок #javascript

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

8 советов, которые сделают JavaScript-код чище

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

Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:

https://nuancesprog.ru/p/19910/

#статья #javascript

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

Сегодня поговорим о спред-операторе (...) в JavaScript

Спред-оператор позволяет «разложить» массив или объект на отдельные элементы. Он используется в разных контекстах: при копировании, объединении массивов и объектов, а также при передаче аргументов в функции.

Примеры:

Копирование массива:

   const originalArray = [1, 2, 3];
   const copyArray = [...originalArray];
   console.log(copyArray); // [1, 2, 3]
   

Объединение массивов:

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const combinedArray = [...array1, ...array2];
   console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
   

Копирование объекта:

   const originalObject = { a: 1, b: 2 };
   const copyObject = { ...originalObject };
   console.log(copyObject); // { a: 1, b: 2 }
   

Объединение объектов:

   const object1 = { a: 1, b: 2 };
   const object2 = { c: 3, d: 4 };
   const combinedObject = { ...object1, ...object2 };
   console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }
   

Преимущества:
— упрощает операции с массивами и объектами;
— делает код более читабельным;
— помогает избежать мутаций и побочных эффектов.

Теперь, когда вы знаете, как использовать спред-оператор, ваш код станет ещё более элегантным и эффективным!

#урок #javascript

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

Ещё немного про use strict в дополнение к этому посту.

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

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