Изучаем JavaScript

Очень короткий пост. Всего две ссылки ES6 по-человечески https://habrahabr.ru/post/305900/ ES6 для всех https://coursehunters.net/course/es6-for-everyone Последний курс - видеоуроки от канадского разработчика Wes Bos, автора курса JavaScript 30. Ресурс по ссылке заслуживает внимания, там масса интересных материалов и курсов. Например, ещё один курс по ES6 Основы ES6 https://coursehunters.net/course/es6-basics

Только вчера написала "самый лучший код" (это здесь ), а сегодня задумалась: что означает "самый лучший"? Код, в котором реализованы все новые возможности языка? Не факт. Например, здесь разработчик утверждает совершенно противоположное: Общее заблуждение что код должен быть "современным", использовать последние стандарты. Новый синтаксис не несет никакой ценности для программиста. Здесь разработчик удивляется, что рекрутер на собеседовании: не постеснялся спросить, что такое let и const в моем javascript… Он не проверял мои знания, он действительно не знал, что это.   Так кто прав? И, если не новизна, тогда какие особенности отличают хороший код? Предположу, что хороший код описывают три пункта. Он должен быть: лаконичным понятным быстрым Лаконичность кода - это время работы программиста, которое более ценное, чем машинное время. Понятность кода - это время на его последующее изменение, которое по некоторым отзывам составляет до ...

Массивы мне нравятся. Стрелочные функции мне тоже нравятся: они лаконичные и понятные. О методах массивов можно почитать, например, в учебнике Кантора: https://learn.javascript.ru/array-iteration Этот пост - короткие варианты предложенных методов с использованием стрелочных функций 🔹  Array.prototype.filter()  Пробегает по массиву, проверяя каждый элемент по заданному условию и возвращает только те элементы, которые соответствуют условию. Не изменяет исходный массив var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.filter(a => a > 5);  // [6 , 7 , 8 , 9, 10] 🔹  Array.prototype.map() Тоже бежит по массиву, но не проверяет каждый элемент, а что-то делает с ним. Изменённые элементы складывает в новый массив. Не изменяет исходный массив var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.map(a => a * 5); // [5 , 10 , 15 , 20 , 25 , 30 , 35 , 40 , 45 , 50] 🔹  Array.prototype.sort() Пузырьковая сортировка — поочередно сравнивает два с...

Несложное упражнение. Есть список видео, у каждого видео в data-time атрибуте указана его продолжительность в минутах и секундах в формате: mm:ss. Нужно подсчитать общую продолжительность видео и вывести его в консоль. Это задание я, пожалуй, могу выполнить и без подсказок автора и, возможно, даже без Google. Моё решение var videos = document.querySelectorAll(".videos li");     var arr = [];     for(var i = 0; i < videos.length; i++) {         var videoTime = videos[i].dataset.time;         arr.push(videoTime);         }     var arrTime = [];     for(var j = 0; j < videos.length; j++) {         arr[j] = arr[j].split(":");         var time = arr[j][0] * 60 + +arr[j][1];         arrTime.push(time);  ...

Несложное упражнение на сортировку массива. Как известно, в английском языке используются артикли. Автор предлагает отсортировать массив без учёта артиклей function strip(bandName) {   return bandName.replace(/^(a |the |an )/i, '').trim(); } Используем регулярное выражение: arr.replace(/^(a |the |an )/i, "").trim(); Здесь: arr - массив, который сортируем .replace - метод для замены одних символов другими ^  - начало строки, если что, то конец строки это $ (a |the |an ) - ищем один из трёх артиклей. i - регистронезависимость, переводится как "ignore registr" "" - то, на что замещаем - пустая строка .trim(); - метод, удаляющий пробелы в начале и конце строки Сама сортировка: const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1); Стрелочная функция и тернарный оператор "?" позволили сократить код, который без них выглядел бы как: const sortedBands = bands.sort(function (a, b) {    if(str...

Демо https://js3014.github.io/ Код  https://github.com/js3014/js3014.github.io Создаём эффект движения тени текста вслед за мышкой. В видео автор демонстрирует этот эффект на примере заголовка одного из своих курсов по флексбоксах: https://flexbox.io/ но на данный момент эффект движения он убрал, оставив только статичные тени. html-разметка очень простая: один блок и заголовок в нём: <div class="hero">             <h1 contenteditable>🔥WOAH!</h1> </div> Смайлик с костром можно скопировать здесь: https://emojipedia.org/fire/ (другие смайлики там тоже есть) UPD: почему-то у меня смайлик исчез. как же его автор добавлял? Стили выглядят так: .hero {     min-height: 100vh;     display: flex;     justify-content: center;     align-items: center;     color: black; } h1 {     text-shadow: 10px...

Демо https://js3015.github.io/ Код: https://github.com/js3015/js3015.github.io Задание называется LocalStorage, подсказывая, что речь пойдёт о сохранении введённых пользователем данных при перезагрузке страницы. Эту тему уже рассматривала здесь пункт "Состояния. Хранение состояний", но без конспекта вспомнить как оно реализуется не получается. Попробую вспомнить с конспектом, заодно и оценю его качество. Получаем переменные: var button = document.querySelector('input[type="submit"]'); var input = document.querySelector('input[type="text"]'); var list = document.querySelector(".plates"); var items = []; Отслеживаем клики по button Выводим в консоль значение input.value button.addEventListener("click", function(){     console.log(input.value); }); Здесь первая проблема. В консоль значение input.value не выводится. Зато выводится в alert. И что бы это значило? UPD: кажется, разобралась. Проблема в форме...

Регэкспы классные. JavaScript тоже. Здесь забавная статья Я смотрел лаже в лицо и не боюсь называть её по имени В комментариях к ней  автор приводит пример задачи, похожей на ту, которые использует на собеседованиях: Подсчитать, сколько раз в текстовой строке встречается заданное сочетание из двух букв (именно в указанном порядке, регистронезависимо). count(str, char1, char2)  Первая попытка решить её (просто так, для себя) была неудачной function count(str, char1, char2) {      var reg1 = new RegExp(char1);      var reg2 = new RegExp(char2);      return str.match(\reg1 + reg2\, "ig").length; } Самое досадное, что разобраться с использованием переменных в регулярных выражениях я пыталась. Но решения, которые приводил  гугл. оказывались нерабочими Ну вот. Рабочее решение выглядит так: function count(str, char1, char2) {     var re = new RegExp(char1 + char2, 'ig');  ...

Демо: https://js3012.github.io/ Код: https://github.com/js3012/js3012.github.io Задание называется Key Sequence Detection. В нём нужно определить ввёл ли пользователь с клавиатуры "секретное слово". Код: var pressed = []; var secretCode = "wesbos"; window.addEventListener("keyup", (event) => {     pressed.push(event.key);     pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);     if (pressed.join("").includes(secretCode)) {     console.log("DING DING!");     cornify_add();   }   console.log(pressed); }); 1. Создаём пустой массив, куда будем помещать результат ввода с клавиатуры var pressed = []; 2. Определяем секретное слово, которое должен ввести пользователь var secretCode = "wesbos"; 3. Добавляем слушатель, реагирующий на нажатие клавиш window.addEventListener("keyup", (event) => 4.  Используем стрелочную функцию с параметром event ...

Демо https://js3013.github.io Код https://github.com/js3013/js3013.github.io Анимация при скролле есть в  jQuery. Демо: https://js3012jquery.github.io/ Код: https://github.com/js3012jQuery/js3012jQuery.github.io На всё про всё ушло полчаса времени. Хоть можно было уложиться минут в 10-15. Количество кода - три строки $ ( function (){ new WOW (). init (); }); Подключили jQuery (85кБ), подключили плагин wow (15кБ). Из дополнительных файлов ещё animate.css (2КБ). То есть общий вес дополнительного кода около 100кБ, это сильно меньше веса одной картинки. Понятно почему jQuery так популярен. Замечу, что анимация при скролле хорошо выглядит с небольшими картинками, но если размер фото во всю ширину, анимация такого большого фото выглядит неважно. И анимация с jQuery определённо симпатичнее, чем с чистым js. Первая реагирует на расстояние картинки от низа страницы, вторая, кажется, зависит от времени. Посмотрим, насколько слож...