Изучаем JavaScript

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

Цель - сравнить эффективность пузырьковой и быстрой сортировки, а также выяснить, какой метод сортировки использует метод arr.sort() . При помощи функции getRandom() генерируем массив случайных чисел, состоящий из 100000 элементов. function getRandom() {   var arr = [];   for(let i = 0; i < 100000; i++) {     var num = Math.floor((Math.random() * 100));     arr.push(num);   }   return arr; } Для сортировки массива будем использовать методы пузырьковой сортировки bubbleSort(arr) function bubbleSort(arr) {   var n = arr.length;   for (var i = 0; i < n - 1; i++){     for (var j = 0; j < n - 1 - i; j++){       if (arr[j + 1] < arr[j]){         var t = arr[j + 1];         arr[j + 1] = arr[j];         arr[j] = t;       }     }   }   return arr; } И метод быстрой сортировки quickSort(arr) function quickSort(arr) {   if (arr.length == 0) return [];   var a = [],       b = [],       p = arr[0];     for (var i = 1; i < arr.length; i++){     if (arr[i] < p) a[a.le

2015 год - появление современного JavaScript. принят стандарт EcmaScript 6, он же EcmaScript 2015. До этого последний раз JavaScript обновлялся двенадцать лет назад — в 2009 году, когда появился EcmaScript5. Впрочем, тогда изменения были не такими значительными. Нововведения EcmaScript 6   Ключевые слова let и const Основное их отличие — блочная область видимости. При этом let — переменная, а const — переменная, значение которой не меняется. Впрочем, про не меняется значение, это не всегда справедливо. Написать const a = 1; a++; нельзя. а сonst a = 1; return a + 1; — можно. Здесь главное не присваивать константе другое значение ( а++ это то же самое, что а = а + 1 ). Соответственно, массивы, объявленные через const, могут изменяться с использованием метода push , и такой код. меняющий массив, объявленый через сonst , тоже будет вполне валидным const arr = [1, 1, 1, 1]; arr.map(a => a + 1);   //  [ 2 , 2 , 2 , 2 ]; Чем не угодил var Современный код пишут кома

"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()

Первая часть: https://studyjavascript.blogspot.com/2019/03/1.html Создание собственных событий JavaScript позволяет генерировать события на элементах. Рассмотрим код:     <button id="myButton">Нажми</button>     <div id="myDiv"></div> В html -коде у нас кнопка и див   const myButton = document.querySelector("#myButton");   const myDiv = document.querySelector("#myDiv");     myButton.addEventListener("click", () => {     const event = new CustomEvent("click");     myDiv.dispatchEvent(event);   });   myDiv.addEventListener("click", () => {        console.log("На диве произошло событие click");   }); Создаём переменные myButton и myDiv для кнопки и блока, на кнопке генерируем новое событие event и передаём это событие диву при помощи метода .dispatchEvent. Для дива добавляем обработчик событий и прописываем там какой-нибудь код, чтобы отслеживать наступление

События (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 : документ - html - body - div - a При этом каж