Изучаем JavaScript

Устанавливаем Sass глобально: npm install -g sass Теперь, если зайти в папку проекта, скомпилировать index.scss в index.css можно командой: sass index.scss index.css В папке проекта появились файлы index.css и index.css.map Файл map это связь между sass и css. Подключать в index.html следует файл index.css <link rel="stylesheet" href="index.css"> Ок. Всё работает. Но вводить команду sass index.scss index.css каждый раз, когда что-то изменил в scss-коде и хочешь посмотреть на результат, нерационально. По этой инструкции устанавливаем и подключаем Webpack https://dev.to/pixelgoo/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5 Запускаем команды npm run build  // компилирует scss в css и сохраняет в папке dist npm run watch // отслеживает изменения и компилирует их  Компиляция SASS онлайн: https://www.sassmeister.com/ Переменные sass $color: red; $padding: 10px; a {   color: ...

  Примеры вопросов: https://github.com/rolling-scopes-school/tasks/blob/2018-Q3/tasks/interview-corejs.md Типы данных в JS. Приведение типов ●  Введение в типы данных ●  Преобразование типов Что такое hoisting? ● hoisting Let vs var. Const ● Let vs var. Const Передача данных по ссылке и по значению. Примеры ● Передача данных по ссылке и по значению {a: 10} == {a: 10}. Что вернет код? ● Передача данных по ссылке и по значению Что такое this? ●  Открытый бесплатный вебинар об ООП в JavaScript Apply, call, bind. Для чего используются? В чем отличия? ●  Открытый бесплатный вебинар об ООП в JavaScript Замыкание. Приведите пример. ● Замыкания (Кантор) Sum(1)(2) ● Функции высшего порядка Prototype. Отличия proto от prototype. Пример наследования ● Конструкторы, прототипы Как создать объект без прототипа? ●  Object.create(null) Методы массива, перебирающие элементы массива ● Методы массивов + стрелочные функции “hello world”.repeati...

Источник  https://youtu.be/1Nk09Z4ca4A 1. Создаём файл .editorconfig, указываем правила. В редакторе устанавливаем дополнение, список плагинов для разных редакторов есть на официальном сайте  https://editorconfig.org/ После перезагрузки редактора установленный плагин будет все файлы форматировать по указанным в  .editorconfig правилам. 2. В Git Bash выполняем команду npm init несколько раз нажимаем Enter. соглашаясь с настройками. В результате в папке появляется файл package.json, его можно редактировать. 3. Пакеты устанавливает команда npm install, сокращёно npm i Например, eslint установит команда npm install -D eslint eslint-config-airbnb-base Ключ -D он же --save-dev означает, что файл используется в процессе разработки и не попадёт в конечный продукт. 4. Инициализируем eslint командой npx eslint init Для настройки предлагают использовать стрелки - Use arrow keys если стрелки не работают, можно использовать цифру - пробел ентер ...

Три кита ООП: Инкапсуляция Наследование Полиморфизм Инкапсуляция, наследование и полиморфизм это три парадигмы объектно-ориентированного программирования. ООП в JavaScript полностью основано на прототипах. ООП встречвается на каждом шагу, даже если мы этого не замечаем. Инкапсуляция Инкапсуляция - возможность скрывать сложную реализацию за простыми вещими. Пример: музыкальный плеер. Чтобы начать проигрывание музыки, нужно послать запрос на сервер, получить файл, добавить его в список воспроизведения, начать проигрывание. Но все эти операции скрыты и запускаются при вызове простой функции play(). Ещё пример html -разметка <button id="myButton">Нажми</button> Скрипт   const myButton = document.querySelector("#myButton");     myButton.addEventListener("click", () => {     console.log("кликнули по кнопке");      }); // Кстати, без строки const myButton = document.querySelector("#myButton...

"hello world".repeating(3) -> hello world hello world hello world. Как реализовать? 1. Через цикл for function repeat(){   var res = "";   var str = "hello world ";   for(let i = 0; i < 3; i++) {     res += str;   }   return res.slice(0, -1);  } repeat() 2. Через цикл while function repeat(){   var res = "",       str = "hello world ",       i = 0;   while(i < 3){     res += str;     i++;   }   return res.slice(0, -1);  } repeat() 3. Через шаблонную строку function repeat(){   var str = "hello world";    return `${str} ${str} ${str}`;  } repeat() 4. Через repeat "hello world ".repeat(3).slice(0, -1);   5. Через массив function repeat(){   var arr = new Array(3);   arr.fill("hello world");   return arr.join(" ");  } repeat()

События (events) позволяют пользователю взаимодействовать с элементами на странице. Для этого нужно научиться перехватывать действия пользователя на странице: клики по элементам, движения мышки, нажатия клавиш. У события есть две фазы: погружение или захват capture всплытие bubble По умолчанию все события обрабатываются при всплытии. Представим, что у нас есть html -документ, внутри которого div , внутри которого ссылка а . Примерно так: <!DOCTYPE html> <html>   <body>     <div>       <a href="https://google.ru/" id="link">google.ru</a>     </div>   </body> </html> Рассмотрим клик по ссылке. 1. Браузер генерирует событие event . Событие это тоже объект (в JavaScript вообще практически всё является объектом кроме разве что примитивов) со своим набором полей. 2. Событие погружается по DOM-дереву - capture : докум...

"Плохие программисты думают о коде.  Хорошие программисты думают о структурах данных и их взаимосвязях" Линус Торвальдс, создатель Linux Очередь и стек — основные структуры данных в программировании. Стек можно сравнить со стопкой подносов в столовой, которые складывают один на другой. Поднос, который попал в стопку последним, возьмут в первую очередь. Стек  работает по принципу LIFO  "последним пришел — первым ушел" (last in first out). Над стеком можно осуществлять две операции: push (занесение данных) и pop (изъятие данных). Так устроен стек Очередь (queue) напоминает обычную очередь. Она работает по принципу FIFO "первым пришел — первым ушел" (first in first out). Над очередью можно осуществлять две операции: enqueue   — добавлять элементы в конец очереди и dequeue — удалять первый элемент очереди. Так устроена очередь Чтобы реализовать операцию enqueue , необходимо: убедиться, что очередь, не переполнена,  доба...

function Sum(a) {   return function(b) {     return a + b;   } } Sum(1)(2)  // 3 Sum - функция высшего порядка. Так называются функции одним из аргументов или результатом вызова которых являются другие функции. Возможность передавать функции другим функциям в качестве параметров и использовать функции в качестве значений, возвращаемых другими функциями, является основой функционального программирования.

Строки, числа, логические значения в JavaScript передаются по значению. Такое поведение удобно и предсказуемо. Пример: var a = 2; b = a; b+= 1; console.log(a, b) // 2 3 a по-прежнему равно двум, b равно трём, изменения в b не затрагивают а , а изменения в а не влияют на b . Жизнь легка и прекрасна. Объекты и массивы (которые тоже объекты) передаются по ссылке. Это значит, что где-то есть область памяти, где хранится созданный ранее объект и передать мы можем только ссылку на объект. Из этого следуют неожиданные вещи. 1. Один объект не равен другому точно такому же объекту. var a = []; var b = []; a == b   //   false У а одна область памяти, у b – другая. а не равно b . По той же причине {a: 2} == {a: 2} // false 2. Изменения в одном объекте затрагивают другой объект (на самом деле тот же самый, но мы об этом можем не догадываться). var a = [1, 2, 3, 4]; var b = a; b.push(5); console.log(a)  //    [ 1 , 2 , 3 , 4 , 5 ] ...