• JavaScript, Jquery (полезности)

 #10746   IgorA100
 14 июн 2024, 14:44
Определить есть ли переменная и ее значение:
Код: Выделить всё{{if Value}}
    Value exists and is true
{{else typeof(Value) != "undefined" && Value === false}}
    Value exists and is false
{{else}}
    Value doesn't exist or isn't explicitly false
{{/if}}

https://stackoverflow.com/questions/390 ... d-is-false
 #10750   IgorA100
 16 сен 2024, 23:37
Все способы перебора массива в JavaScript

Код: Выделить всёvar a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
});


Старый добрый for рулит:
Код: Выделить всёvar a = ["a", "b", "c"];
var index;
for (index = 0; index < a.length; ++index) {
    console.log(a[index]);
}


Если длина массива неизменна в течение всего цикла, а сам цикл принадлежит критическому в плане производительности участку кода (что маловероятно), то можно использовать «более оптимальную» версию for с хранением длины массива:
Код: Выделить всёvar a = ["a", "b", "c"];
var index, len;
for (index = 0, len = a.length; index < len; ++index) {
    console.log(a[index]);
}

Теоретически этот код должен выполняться чуть быстрее, чем предыдущий.

Если порядок перебора элементов не важен, то можно пойти еще дальше в плане оптимизации и избавиться от переменной для хранения длины массива, изменив порядок перебора на обратный:
Код: Выделить всёvar a = ["a", "b", "c"];
var index;
for (index = a.length - 1; index >= 0; --index) {
    console.log(a[index]);
}


Источник: https://habr.com/ru/articles/247857/
 #10782   IgorA100
 21 фев 2025, 20:34
MediaSourceExtention
Пример проигрывателя MSE - JAVASCRIPT

https://stackoverflow.com/questions/681 ... h-no-audio
Исходники - https://github.com/thowfeeq178/MediaSou ... /tree/main
Демо - https://dash.akamaized.net/akamai/bbb_30fps/

Проблемы очистки памяти при воспроизведении MSE
https://github.com/TasukuUno/sample-mse ... me-ov-file
 #10785   IgorA100
 25 фев 2025, 16:33
Вывод сообщений в консоль браузера.
https://doka.guide/js/console/
https://github.com/doka-guide/content/t ... js/console

К методам логирования относятся:
assert(), clear(), debug(), dir(), dirxml(), error(), info(), log(), table(), trace(), warn().
 #10788   IgorA100
 26 фев 2025, 15:35
По клику отобразить блок в центре странице и затем модно его перенести в левую или правую сторону при помощи кнопок управления.


Код: Выделить всё<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Demo JS</title>
    <style>
      * {
        margin: 0;
      }

      img {
        max-width: 100%;
        height: auto;
      }

      .wrapper {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        min-height: 100vh;
      }

      .list {
        width: 25%;
        max-width: 150px;
        outline: 1px solid #999;
      }

      .list img {
        cursor: pointer;
      }

      .layer {
        display: flex;
        justify-content: center;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 5;
        visibility: hidden;
        opacity: 0;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      .layer::-webkit-scrollbar {
        display: none;
      }

      .layer.open {
        visibility: visible;
        opacity: 1;
        transition: all 0.3s linear;
      }

      .container {
        max-width: 50%;
      }

      .buttons {
        text-align: center;
      }

      .buttons span {
        display: inline-block;
        padding: 0 20px 5px;
        background: #555;
        font-size: 36px;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>



   <div class="wrapper">
     <div class="list">
      <img src="https://placehold.co/500/?text=1" data-order="1" alt="">
      <img src="https://placehold.co/500/?text=2" data-order="2" alt="">
      <img src="https://placehold.com/500/?text=3" data-order="3" alt="">
      <img src="https://placehold.co/500/?text=4" data-order="4" alt="">
      <img src="https://placehold.co/500/?text=5" data-order="5" alt="">
     </div>
     <div class="list"></div>
   </div>
   <div class="layer">
     <div class="container">
      <div class="buttons">
        <span>&laquo;</span>
        <span>&raquo;</span>
      </div>
     </div>
   </div>



    <script>
      const list = [...document.querySelectorAll('.list')],
        layer = document.querySelector('.layer'),
        container = document.querySelector('.container'),
        buttons = [...document.querySelectorAll('.buttons span')];

      document.querySelectorAll('.wrapper img').forEach(el => {
        el.addEventListener('click', e => {
         container.prepend(el);
         layer.classList.add('open');
        });
      });

      buttons.forEach(btn => {
        btn.addEventListener('click', e => {
         let currentList = list[buttons.indexOf(e.target)];
         layer.classList.remove('open');
         currentList.prepend(container.querySelector('img'));

         // Сортировка, если нужно
         [...currentList.querySelectorAll('img')]
         .sort((a, b) => a.dataset.order - b.dataset.order)
           .forEach(el => currentList.appendChild(el));
        });
      });
    </script>
  </body>
</html>


https://ru.stackoverflow.com/questions/ ... ить-в-теку
 #10789   IgorA100
 27 фев 2025, 19:54
Удалить порт из URL и вместо него прописать текущий порт отображаемой страницы:
Код: Выделить всёfunction deletePortFromUrl(url) {
  const newUrl = new URL(url);
  const port = (location.port) ? ':' + location.port : '';
  return (newUrl.protocol + '//' + (newUrl.username ? newUrl.username + ':' : '') + (newUrl.password ? newUrl.password + '@' : '') + newUrl.hostname + port + newUrl.pathname + newUrl.search + newUrl.hash);
}
 #10794   IgorA100
 08 мар 2025, 16:34
Альтернатива "curl"
Этот код использует функцию fetch для выполнения запроса POST на указанный URL с некоторыми данными.
Данные отправляются как строка JSON в теле запроса. Затем ответ анализируется как JSON и выводится на консоль.
Код: Выделить всё(async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: {
      'Content-type': 'application/json; charset=UTF-8'
    }
  })
  const answer = await res.json()
  console.log(answer)
})()


Вот пример того, как сделать запрос GET к конечной точке API с помощью fetch():
Код: Выделить всёfetch('https://api.sample.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

Этот код отправляет запрос GET на указанную конечную точку API и регистрирует возвращенные данные в консоли.

Вот пример того, как сделать запрос POST с данными JSON с помощью fetch() :
Код: Выделить всёfetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
key1: 'value1',
key2: 'value2'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

Этот код отправляет запрос POST с данными JSON на указанную конечную точку API и регистрирует возвращенные данные в консоли.

Вот примеры того, как можно использовать объект XMLHttpRequest для создания HTTP-запросов, аналогичных curl :
Код: Выделить всёconst xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText)
}
}
xhr.open('GET', 'https://yesno.wtf/api', true)
xhr.send()

Этот код создает новый объект XMLHttpRequest , устанавливает прослушиватель событий для события readystatechange, открывает соединение с указанным URL-адресом с помощью метода GET и отправляет запрос.

При получении ответа прослушиватель событий записывает текст ответа в консоль.

https://itsourcecode.com/javascript-tut ... avascript/
 #10796   IgorA100
 16 мар 2025, 11:55
Переместить блок в DOM
Код: Выделить всёdocument.getElementById('id1').appendChild(document.getElementById('id2'));

https://stackoverflow.com/questions/324 ... javascript
Или так в начало:
Код: Выделить всёdocument.querySelector('...').prepend(newChild);

Или так в конец
Код: Выделить всёdocument.querySelector('...').append(newChild);

https://stackoverflow.com/questions/618 ... ppendchild

Добавить элемент к узлу
Код: Выделить всёcontainer.prepend(el); 
добавляет элемент или строку в начало узла
Код: Выделить всёcontainer.append(el);
добавляет элемент или строку в конец узла
Код: Выделить всёcontainer.before(el);
добавляет элемент или строку перед узлом
Код: Выделить всёcontainer.after(el);
добавляет элемент или строку после узла

Использование IntersectionObserver для отслеживания скролла
Код: Выделить всё<div id="pixel-to-watch"></div>
#pixel-to-watch {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 100px;
  left: 0;
}

А вот как мы следим за ним:

Код: Выделить всёlet observer = new IntersectionObserver(entries => {
  console.log(entries);
  if (entries[0].boundingClientRect.y < 0) {
    console.log('Прокручено 100px');
  } else {
    console.log('Прокручено менее 100px');
  }
});
observer.observe(document.querySelector('#pixel-to-watch'));

https://fruntend.com/posts/ispolzovanie ... ya-skrolla
https://github.com/AJK-Essential/Positi ... /tree/main
https://ajk-essential.github.io/Position-Observer/

Отслеживание изменения массива
Код: Выделить всёfunction ObservableArray(items) {
  var _self = this,
    _array = [],
    _handlers = {
      itemadded: [],
      itemremoved: [],
      itemset: []
    };

  function defineIndexProperty(index) {
    if (!(index in _self)) {
      Object.defineProperty(_self, index, {
        configurable: true,
        enumerable: true,
        get: function() {
          return _array[index];
        },
        set: function(v) {
          _array[index] = v;
          raiseEvent({
            type: "itemset",
            index: index,
            item: v
          });
        }
      });
    }
  }

  function raiseEvent(event) {
    _handlers[event.type].forEach(function(h) {
      h.call(_self, event);
    });
  }

  Object.defineProperty(_self, "addEventListener", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function(eventName, handler) {
      eventName = ("" + eventName).toLowerCase();
      if (!(eventName in _handlers)) throw new Error("Invalid event name.");
      if (typeof handler !== "function") throw new Error("Invalid handler.");
      _handlers[eventName].push(handler);
    }
  });

  Object.defineProperty(_self, "removeEventListener", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function(eventName, handler) {
      eventName = ("" + eventName).toLowerCase();
      if (!(eventName in _handlers)) throw new Error("Invalid event name.");
      if (typeof handler !== "function") throw new Error("Invalid handler.");
      var h = _handlers[eventName];
      var ln = h.length;
      while (--ln >= 0) {
        if (h[ln] === handler) {
          h.splice(ln, 1);
        }
      }
    }
  });

  Object.defineProperty(_self, "push", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      var index;
      for (var i = 0, ln = arguments.length; i < ln; i++) {
        index = _array.length;
        _array.push(arguments[i]);
        defineIndexProperty(index);
        raiseEvent({
          type: "itemadded",
          index: index,
          item: arguments[i]
        });
      }
      return _array.length;
    }
  });

  Object.defineProperty(_self, "pop", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      if (_array.length > -1) {
        var index = _array.length - 1,
          item = _array.pop();
        delete _self[index];
        raiseEvent({
          type: "itemremoved",
          index: index,
          item: item
        });
        return item;
      }
    }
  });

  Object.defineProperty(_self, "unshift", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      for (var i = 0, ln = arguments.length; i < ln; i++) {
        _array.splice(i, 0, arguments[i]);
        defineIndexProperty(_array.length - 1);
        raiseEvent({
          type: "itemadded",
          index: i,
          item: arguments[i]
        });
      }
      for (; i < _array.length; i++) {
        raiseEvent({
          type: "itemset",
          index: i,
          item: _array[i]
        });
      }
      return _array.length;
    }
  });

  Object.defineProperty(_self, "shift", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
      if (_array.length > -1) {
        var item = _array.shift();
        delete _self[_array.length];
        raiseEvent({
          type: "itemremoved",
          index: 0,
          item: item
        });
        return item;
      }
    }
  });

  Object.defineProperty(_self, "splice", {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function(index, howMany /*, element1, element2, ... */ ) {
      var removed = [],
          item,
          pos;

      index = index == null ? 0 : index < 0 ? _array.length + index : index;

      howMany = howMany == null ? _array.length - index : howMany > 0 ? howMany : 0;

      while (howMany--) {
        item = _array.splice(index, 1)[0];
        removed.push(item);
        delete _self[_array.length];
        raiseEvent({
          type: "itemremoved",
          index: index + removed.length - 1,
          item: item
        });
      }

      for (var i = 2, ln = arguments.length; i < ln; i++) {
        _array.splice(index, 0, arguments[i]);
        defineIndexProperty(_array.length - 1);
        raiseEvent({
          type: "itemadded",
          index: index,
          item: arguments[i]
        });
        index++;
      }

      return removed;
    }
  });

  Object.defineProperty(_self, "length", {
    configurable: false,
    enumerable: false,
    get: function() {
      return _array.length;
    },
    set: function(value) {
      var n = Number(value);
      var length = _array.length;
      if (n % 1 === 0 && n >= 0) {       
        if (n < length) {
          _self.splice(n);
        } else if (n > length) {
          _self.push.apply(_self, new Array(n - length));
        }
      } else {
        throw new RangeError("Invalid array length");
      }
      _array.length = n;
      return value;
    }
  });

  Object.getOwnPropertyNames(Array.prototype).forEach(function(name) {
    if (!(name in _self)) {
      Object.defineProperty(_self, name, {
        configurable: false,
        enumerable: false,
        writable: false,
        value: Array.prototype[name]
      });
    }
  });

  if (items instanceof Array) {
    _self.push.apply(_self, items);
  }
}

(function testing() {

  var x = new ObservableArray(["a", "b", "c", "d"]);

  console.log("original array: %o", x.slice());

  x.addEventListener("itemadded", function(e) {
    console.log("Added %o at index %d.", e.item, e.index);
  });

  x.addEventListener("itemset", function(e) {
    console.log("Set index %d to %o.", e.index, e.item);
  });

  x.addEventListener("itemremoved", function(e) {
    console.log("Removed %o at index %d.", e.item, e.index);
  });
 
  console.log("popping and unshifting...");
  x.unshift(x.pop());

  console.log("updated array: %o", x.slice());

  console.log("reversing array...");
  console.log("updated array: %o", x.reverse().slice());

  console.log("splicing...");
  x.splice(1, 2, "x");
  console.log("setting index 2...");
  x[2] = "foo";

  console.log("setting length to 10...");
  x.length = 10;
  console.log("updated array: %o", x.slice());

  console.log("setting length to 2...");
  x.length = 2;

  console.log("extracting first element via shift()");
  x.shift();

  console.log("updated array: %o", x.slice());

})();

Код: Выделить всё<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script><

https://stackoverflow.com/questions/510 ... ay-changes