JS

***Переменные
  # обьявление переменных - var,let,const
   - В случае повторного переопределения переменой через var ошибки не будет, переменная просто переопределится
   - Лучше использовать let т.к в случае обьявления переменной которая уже имеется js выдаст ошибку об этом (let name = 'Mike';)
   - Переменную const нельзя переопределить но можно переопределить обект переменной:
      const nameMike = { name: 'Mike', age: 40};
      nameMike.name = 'Jon' - в таком случае ошибки не будет
      nameMike = 'Jon' - будет ошибка
      
   # Преобразование типов
    let valut;
    //number to string
      value = string(10);
      value = (10).to.string();
    //boolean to string
      value = string(true);
    //Array to str
      value = string([1,2,3]);
    //Object to str
      value = string({name: 'Mike'});
    //Str to Number
      value = Number('2');
    //Boolena to Number
      value = Number(true); - 1
      value = Number(false); - 0
      value = Number('false');- NaN
      value = Number('false'); - NaN
     //parseInt
      value = parseInt('200px'); - 200
     //parseFloat
      vallue = parseFloat('200.300px); - 200.300
     //Boolean
      value = Boolean('hello'); - true
      value = Boolean(''); - false
      value = Boolean(' '); - true
      value = Boolean(100); - true
      value = Boolean([]); - true
      
   # Числа
    - бибблиотека Math
    value = Math.random();
    value = Math.round(2.4); округление
    value = Math.ceil(2.1); округление в большую сторону - 3
    value = Math.floor(2.9); округление в меньшую сторону - 2
    value = Math.min(2,12,3); min
    
  # Строки
    const firstName = 'Denis';
    const lasName = 'Ptrov';
    const age = 30;
    const str = 'Hi my name is Denis';
    
    let value;
    
    value = firstName.length; - длина строки
    value = firstName.toUpperCase(); - перевод в верхний регистр
    value = firstName.concat(' ', lastName); - конкатенация строки
    value = str.indexof('n'); - вернет первое вхождение индекса в строке
    value = str.indexof('n', 10); - вернет первое вхождение индекса в строке на начиная с 10 позиции
    value = str.includes('Denis'); - true or false содержания значения в строке
    value = str.slice(0, 5); - вырезае символы с 0 позиции 5 символов 
    value = str.replice('Denis','Den'); - заменит Denis на Den
    
  # Шаблонные строки
    const firstName = 'Denis';
    const lastName = 'Ptrov';
    const age = 30;
    let str;
    str = `
      <ul>
        <li>FirstName: ${firstName}<\li>
        <li>LastName: ${lastName}<\li>
        <li>Age: ${age}<\li>
      </ul>
    `
  # Обьекты
    const user {
    firstName: 'Alex',
    'frend'{
    country: 'USA',
    age: 29
    },
    age: 30};
    
    -методы обращения
      let value;  
      value = user.firstName;
      value = user.['firstName'];
      value = user['frend']; - выведит массв вложенного обьекта frend
      value = user['frend'].age; - обращение к элементу вложенного обекта frend
      value = user['frend']['age']; - обращение к элементу вложенного обекта frend
      user['frend'].city = 'Mayami'; - так как поля city изначально не было обьявленно то таким способом оно создастся автоматом
      user['frend'].ulica.house = 25; - выдасть ошибку т.к ulica не был нигде не иницаилизирован
        user['frend'].ulica = {};
        user['frend'].ulica.house = 25; - в таком случае ошибки не будет
   
   # Условные операторы (<;>;<=;>=;!=;!== строгое сравнение; ==; === строгое сравнение; || кажде значение пытается преобразовать к true; && кажде значение пытается преобразовать к false)
     if 1 == '1' - true т.к неявное сравнение преобразует строку в число
     if 1 === '1' - false т.к явное сравнение говорит что цифра не равна строке
     if (Array.isArray(value)) - проверяет что массив это массив, где value это сам массив
     if (user.hasOwnProperty('name')) - проверит наличие свойства name в объекте user
     
     *определяем значение для переменной с помощью ||(или)
     servername = 'Den';
     nickname = servername || 'undefine servername'; - т.е присвоится значение Den так как знак || пытается привезти к true а servername у нас true (т.е не пустое значение)
     
     value = 1 && 0 && 2 - вернет 0 так как это false а опертор && стремится к первому false
   
   # Тернарный оператор.Switch case (Тернарный оператор исп чаще всего для присваоения переменной значения в зависимрсти от условия)
     //выражение ? если true : если false;
     обычное условие:
      if (a>0){ b = a; } else b += 1;
     применение тернарного оператора: мы в переменную b сразу присваиваем выражание условия
       b = a > 0 ? a : b + 1; т.е a > 0 ? a говорит о том что если a > 0 и это true то присваивай a; : b + 1 - иначе b + 1;
       
      switch (n) {
        case 'one': какой то код
        break;
        default: какой то код (выполняется если ни один case не выполнился)
      }
      
   # Циклы //while; do while; for; for of; for in;
      let i = 10;
      while(i--) {
        что то делаем (выполнится 10 раз и оставновится т.к i станет 0 а 0 это false)
      }
      
      *for in - для обьекта
       const user = {name: 'Alex', age: 20 };
       for (let key_is in user) {
        console.Log(key_is);
        console.Log(user[key_is]);
      *for of - для объекта
        for (let value of user) {
        console.Log(value);}
    
    # Функции
      1. function declaration - способо обявления
      function hello(firstName = 'Nik', age = 30){
       console.Log(user[key_is]);
       return `Hello ${firstName} ${age}
      }
      hello(); - функция вернет Nik 30 т.к не были переданы параметры а установлены в обявлении функции
      
      2. function extantion - способ обьявления
      const gg = function(x){
       return x * x;
       };
      
      3. Самовызывающаяся ф-я
        (function(msg) {
          console.log(msg);
         })(передаем тут параметр);
      
     # Базовые методы массиов
      - arr.length;
      - Array.isArray(arr); - являеися ли массив массивом
      - arr.indexOf(элемент массива); - вернет его индекс
      - arr.push(10); - добавит в конец массива 10 
      - arr.pop(); - удалит элемент с конца массива
      - arr.unshift(10); - добавит в начало массива
      - arr.shift(10); - удалит с начала массива
      - arr.slice(0, 2); - вырезает из массива массива
      - arr.splice(1, 2); - удалит из массива с 1 индекса 2 элемента
      - arr.reverse(); - переварачивает массив
      - arr.concat(arr); - конкатенация массива
      - arr.join() - сливет массив в строку
      'Hello'.split(" "); - разобьет строку на каждый символ и добавит в массив
    
    # Функции высшего порядка ( принимают в качестве параметра другие функции или возвращают функции)
     function question(job) 
     {
        const jobDictionary = {
          developer: 'что такое JS',
          teacher: 'какой предмет вы препадаете
          };

        return function(name) {
          return `${name}, ${jobDictionary[job]}?`;
        };
     }
     console.log(question('developer')('Denis')); - выведит Denis, что такое JS?
      
   # this - контекст вызова функции 
      function getPrice(){
        console.log(this.price);
        return this;
        }

      function getName(){
        console.log(this.name);
        return this;
      }

      - способо 1
      const product = {
        price: 200,
        name: 'Kola',
        getPrice, - функция которая инициализирована выше и в которой указан метод вывода свойства price через контекст this. Так как ф-я описана выше а указана в объекте product то за счет this она имеет доступ к свойству price
        getName, - аналогично функции getPrice
      };
      product.getName().getPrice();//цепочный контекст вызова функций
      - способо 2
       const product = {
        price: 200,
        name: 'Kola',
      };
      getPrice().call(product); - т.е с пользованием глобальной функции call, в скобках указываем контекст обекта из которого будет браться свойство price вызываемое в самой функции getPrice
      getName().call(product); - т.е с пользованием глобальной функции call, в скобках указываем контекст обекта из которого будет браться свойство name вызываемое в самой функции getName
      getPrice().applay(product); - тоже самое, но если помимо передаваемого контекста product есть передаваемые параметры то нужно указывать их в качестве массива
   
   # Стрелочные функции ( не имеют собственного контекста 'this' и берут контект на обект выше т.е глобальный обьект window)
    * Обьявление функции
    - Если выполняется одно действие:
      const plus = (x=0,y=0) => x + y;
    -Если нет параметров:
      const notParametrs = () => и какое то действие ( но одно, иначе нужны фигурные скобки и return)
    -Если тело функции содержит более одного действия: (ставятся фигурные скобки + возвращение функции return)
      const a_and_b = (a,b) => { a *=2; b *= 2; return a + b; }
    -Возращение объекта:
      const returnObj = (str = '') => ({value: str,lenth: str.length,}); -после стрелки ставятся круглые скобки для того чтобы не выводить результать отдельно в return
    
   # Перебирающие методы массивов
    //forEach = перебирает массив ничего не возвращая
      users.forEach((user,i,arr) => {
      console.log(user,i,arr);
      });
    //filter - возвращает новый массив если переданный  collback вернет true
      const userLess30 - users.filter(user => user.age < 30);
      console.log(userLess30);
    //map - возвращает новый массив если передан  collback
      const usename = users.map((user) => user.name);
       console.log(username);
    //reduce - позволяет преобразовать массив в новую сущность (либо выполнить какую либо ариф операцию)
      const totlaBalance = users.reduce((acc,user) => (acc += user.balace), 0); - пройдется по массиву и подсчитает сумму баланса всех элементов
      const useObj = users.reduce((acc,user) => {
      acc[user._id] = user; 
      return acc; }, {});
    //some/every - хотябы один/все элементы удовлетвоют условию
      const isMan = users.some(user = > user.gender === "man"); - если хотя бы один user по гендеру мужчина
       const isMan = users.every(user = > user.gender === "man"); - если каждый user по гендеру мужчина
    //find
      const user = users.find(user => user.name === 'Den');
    //sort - изначально сортирует как строки
      const numArr = [10,7,31,44];
      numArr.sort((prev,next) => prev - next); - т.е метод работает таким образом что от предидущего отнимается следющий элемент и если больше 0 тогда элемент next ставится перед prev
      numArr.sort((prevUser,nextUser) => prevUser.age - nextUser.age); - сортировка по возрасту
      
   # Методы объектов
    //неглубокое копирование - object.assign
      let obj1 = { 
        name: 'Denis',
      };
      let obj2 = { 
        name: 'Mark',
        info:{
          skils: ['html','css'],
        }};
      let newObj = Object.assign({},obj1,obj2);
      console.log(newObj === obj2); - в данной случае будет false т.к asign делает не глубокое копирование и не копирует вложенный объект info
    //глубокое копирование - для этого вначвле переводим в JSON формат
      newObj = JSON.parse(JSON.stringify(obj1));
        * JSON.stringify(obj1) - конвертация в JSON формат
        * JSON.parse - парсим обратно в объект конвертированный формат JSON
    //Получить ключи обектов
      let keys = Object.keys(obj1);
    //Получить значения объектов
      let values = Object.values(obj1);
    //Получить массив массивов
      let entries = Object.entries(obj1);
    //Из массива ключей и значений делает объект
      let fromEntries = Object.fromEntries([['a','value'],['b','value']]); - результат {a: 'value', b: 'values'}
    
    # Деструктуризация - позволяет разбить сложыне структуры на более простые
      //вытащим свойства объекта в обдну строку
      const user = { firstName: 'Den', lastName: 'Ivanov', age: 20};
      const {firtName, lastName, age = 40} = user;
      conslole.log(age) - результат будет 20 т.к если мы казали свойсто в объекте то оно в приоритете
      
      const {firtName, lastName, age = 40, country = 'USA'} = user;.
      conslole.log(country); - ошибки не будет и выведит USA не смотря на то что в объекте нет этого свойтсва. с помощью деструктуризации мы создали это свойство
      
      const {firtName: name, lastName, age = 40} = user;
      conslole.log(name); - заменили имя свойства firstName на name
      
      //деструк-я массивов
      const colors = ['white','black'];
      const [w,b] = colors; - т.е переменным присвоили по порядку значения массива (т.е важен порядок)
      console.log(w,b); - white black
      
      const nn = ['helo',['no','yes']];  - деструк-я вложенных массивов
      const [,[n,y]]; - запятая говорит о том что пропускаем первый элемент массива
      console.log(n,y); - no yes
      
      const colos = ['white','black','green'];
      const [w,...other_colors] = colors; - т.е копируем первый элемент массива в переменную w, затем ставятся троеточие и какая нибудь переменная (это означает что в эту перенную попадет остаток от массива)
      console.log(w,other_colos); - white black green
      
      const colos = ['white','black','green'];
      const [...other_colors] = colors; - полное не глубокое копирование массива
      
      const names = ['Ivan', 'Misha'];
      const colorsNames = [...colors, ...names]; - cклейка массивов (некая конкатенация)
      
      //деструк-я функции с передачей параметров
        function myPerson({lastName,firstName}){
          console.log(lastName,firstName);
        }
        myPerson(user);
      //деструк-я функции без передачи параметров
        function myPerson({lastName = 'сюда пишем что то по умолчанию',firstName = 'сюда пишем что то по умолчанию'} = {}){
          console.log(lastName,firstName);
        }
        myPerson();
    
    # DOM (document object do model)
     const div = document.querySelector('div');
     const title = document.querySelectorAll('h1');
     
    # Работа с атрибутами
      //покажет прямого родителя первого элемента div - console.log(div.parentElemnt);  
      //добавим класс для элемента div - div.classList.add('article', 'custom'); console.log(div.classList);
      //удалить класс элемента div -  div.classList.remove('article');
      //проверить наличие нужного класса - div.classList.contains('custom'); - true or false
      //позволяет переключать класс - div.classList.toggle('custom'); - если класса нет то он его создаст если есть то удалит
      //Установить атрибут - div.setAttribute('id','my_id');
      //получить аттрибут - div.getAttribute('id');
      //проверить наличие - div.hasAttribute('id');
      //удалить атрибут - div.removeAttribute('id');
    
    # Манипуляция DOM
      const title = document.querySelector('h1');
      title.innerHTML = "" - h1 станет пустым
      title.textContent = 'new text'; - меняется содержиое тега
      title.insertAdjacentHTML("beforebegin",'<h2>title</h2>'); - вставляет строку где "beforebegin" указывает на то что строка вставится перед нужным объектом. "afaterbegin" - после нужного объекта
      //создание элемента
        const span = document.createElement('span'); - создали тег span (но не на разметке страницы а только в JS)
        span.textcontenet = 'blabla';
        title.appendChild(span); - добавили тег span в тег h1 (т.е производится создание элемента в разметке стр)
        div.appendChild(span); - в таком случае добавится только в тег div а из тега h1 удалится потомучто добавлением DOM узеол может быть только в одном экземпляре
      //добавление нескольких элементов одновремено (вначале необходимо все завернуть в fragment)
        const fragment = document.createDocumentFragment();
        const colors = ['green', 'red', 'blue'];
        colors.forEach(color => {
          const item = document.createElement('div');
          item.calsslist.add(`bg-${color}`);
          item.textContent = color;
          fragment.appendChield(item);
          });
        document.body.appendChild(fragment); - добавление всего на разметку разом.
     
     # События
      function clickhandler(e) {
        e.preventDefault(); - отменяет девофлтное действие для события
       }
       link.addEventListener('click', clickhandler); - т.е для ссылки определяем событие click при котором блягодаря функции отменяется дефотноый переход на какую либо страницу 
      //Динамическое создание элементов
        const = document.querySelector('.container'); - находим элемент с названием .container (т.е div)
        btn.addEventListener('click', e => {
        const div = document.createElement('div'); - создаем элемент
        div.textContent = Math.random(); - заполняем элемент содержиммым 
        container.appendChild(div);
        });
      //Oбработчик для созданных динамических элементов
        container.addEventListener('click', e =>{
        if (e.target.targenName === 'DIV') { //если элемент имеет имя DIV (можно посмотреть в свойстве target)
          console.log('div container');
          }
         });
     
      # Всплытие и погружение (перехват события)
        * Всплыите - При наступлении события обработчики сначала срабатывают на самом вложенном элементе, затем на его родителе, затем выше и так далее, вверх по цепочке вложенности.
        <form onclick="alert('form')">FORM
          <div onclick="alert('div')">DIV
            <p onclick="alert('p')">P</p>
          </div>
        </form>
       т.е сначала событие элемента <p> и выше
        * Остановка всплытия - event.stopPropagation();
         <script>
          const element = document.querySelector('div');

          element.addEventListener('click', (e) => {
            e.stopPropagation();
          });
         </script>
        * Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент addEventListener:
          Если аргумент true, то событие будет перехвачено по дороге вниз.
          Если аргумент false, то событие будет поймано при всплытии.
           const element = document.querySelector('div');
             element.addEventListener('click', (e) => {
              console.log('clicl.div');
              },true,
             );
    
      # AJAX - обращение к серверу без перезагрузки страницы - ссылка на урок https://www.youtube.com/watch?v=MSz83YWCecM
        *GET запрос
        function getPosts(callback){
        const xhr = new XMLHttpRequest();
        xhr.open('GET','пусть откуда будут браться данные');
        xhr.addEventListener('load', () => {
          const response = JSON.parse(xhr.responseText); - парсим в массив
          callback(response);
        });
     
      # Pormises - как правило принимает один из мараметров (resolve или reject). В случае если на этой какой то цепочки появляется ошибка то это попадает в обработчик catch
      const promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve(Math.random()), 1000);
       });
      promise - цепочка вызовов
      .then(x => {
        console.log(x);
        return x;
       })
      .then(y => console.log(y))
      .catch(err => console.log(err));
      
      // Promise.all
      Promise.all([функция1(параметр),функция2(параметр),функция3(параметр)])
      .then(([какая_то_переменная1,какая_то_переменная2,какая_то_переменная3]) => console.log(какая_то_переменная1,какая_то_переменная2,какая_то_переменная3))
      .catch(err => console.log(err));
      
     # Fetch - способ создания запросов с использованием promisov
       function getPost(id){
       return new Promise((resolve, reject) => {
         fetch(`url реусурса/${id}`)
         .then(response => response.json() - 1/ получаем объект от сервера (т.е получим набор свойств и методов) - 2/ тело response преобразуем в json формат
         .then(post => resolve(post))  получаем само тело ответа от сервера
         .catch(err => reject(err)); ошибку записываем в reject
        });
       
       getPost(1).then(post => console.log(post)); - вызываем функцию вызова поста с id = 1
     
     # Ansync/Await - новый формат ассинхронного кода
      async function getPost(id) {
        
      }