0xD34F

Можно определить собственное свойство value у интересующего вас элемента или переписать сеттер HTMLTextAreaElement.prototype.value - так, чтобы при установке значения генерировалось нужное вам событие.

https://codepen.io/anon/pen/GQywpG?editors=1010

const str = 'qwe//qwe';
const reg = /(qwe\/).*(\/qwe)/;
const replacement = 'hello, world!!';
const newStr = str.replace(reg, `$1${replacement}$2`);

<button>add</button>

document.querySelector('button').addEventListener('click', function() {
  document.body.appendChild(document.createElement('div'));
});

div {
  height: 50px;
  margin: 5px;
  background: red;
  animation: show-div 3s;
}
@keyframes show-div {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

if (cell.textContent === num) {

Дайте-ка угадаю - num, это число, да? Сенсация! Шок! - число не может быть равно строке.

Сравнивайте с приведением типов:

if (cell.textContent == num) {

Или явным образом приводите значения к одному типу:

// строку в число
if (+cell.textContent === num) {

// число в строку
if (cell.textContent === `${num}`) {

document.querySelector('.animate-all').addEventListener('click', e => {
  e.target.hidden = true;

  forEachWithDelay(
    document.querySelectorAll('[data-color]'),
    500,
    el => el.parentNode.style.backgroundColor = el.dataset.color
  );
});

Как может выглядеть функция forEachWithDelay? Такие есть варианты:

• Сразу назначаем таймауты для всех элементов:
  
  

  function forEachWithDelay(arr, delay, callback) {
    Array.prototype.forEach.call(arr, (n, i) => {
      setTimeout(callback, (i + 1) * delay, n);
    });
  }

  
  
• Следующий таймаут назначается в коллбеке предыдущего:
  
  

  function forEachWithDelay(arr, delay, callback) {
    (function next(i) {
      if (i < arr.length) {
        setTimeout(() => {
          callback(arr[i]);
          next(-~i);
        }, delay);
      }
    })(0);
  }

  
  
• Назначаем интервал:
  
  

  function forEachWithDelay(arr, delay, callback) {
    let i = -1;
    const intervalId = setInterval(() => {
      if (++i < arr.length) {
        callback(arr[i]);
      } else {
        clearInterval(intervalId);
      }
    }, delay);
  }

  
  

Как поменять элементу цвет его background'а:

const setBgColor = (el, color) =>
  el.style.backgroundColor = color;
  // или
  el.style.setProperty('background-color', color);
  // или
  el.style.cssText += `background-color: ${color}`;
  // или
  el.setAttribute('style', `background-color: ${color}`);

Меняем:

document.addEventListener('click', ({ target: t }) => {
  const { color } = t.dataset;
  if (color) {
    for (; t.tagName !== 'LI'; t = t.parentNode) ;
    setBgColor(t, color);
  }
});

// или

document.querySelectorAll('[data-color]').forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  setBgColor(this.closest('li'), this.getAttribute('data-color'));
});

const grouped = Object.values(arr.reduce((acc, { title, value: money }) => {
  (acc[title] = acc[title] || { title, data: [] }).data.push({ money });
  return acc;
}, {}));

Делаете функцию полного подсчёта суммы, назначаете её элементам управления в качестве обработчика событий, возникающих при действиях пользователя:

$('#production, #col, .pay, [name="size"]').on('input', recalcPrice);
recalcPrice();

function recalcPrice() {
  const price = [
    $('#production').val(),
    ...$('.pay:checked').get().map(n => n.value),
    $('[name="size"]:checked').val(),
  ].reduce((acc, n) => acc + (n | 0), 0);

  $('#final_price').html(price * ($('#col').val() | 0));
}

const title = document.getElementById('title');
title.innerHTML = Array.from(title.innerText, n => `<span>${n}</span>`).join('');

или

const title = document.querySelector('#title');
title.innerHTML = title.textContent.replace(/./g, '<span>$&</span>');

https://jsfiddle.net/uwjg6qb3/

cards.filter(n => n.tags.some(m => m.tag === tag))

То, что значение i в момент выполнения document.getElementsByClassName("desc")[i] будет тем же, что и в момент выполнения acc[i].addEventListener есть ни на чём не основанная фантазия, не соответствующая реальности.

Вот если вы объявите i в заголовке цикла с помощью let - тогда да, работать будет.

Но вообще, создавать отдельные обработчики клика для каждой кнопки и обращаться по индексу к элементам .desc нет необходимости. Можно от кликнутой кнопки подняться до .tab-pane и там переключить класс, который изменит видимость .desc:

.active .desc {
  display: block;
}

const itemSelector = '.tab-pane';
const buttonSelector = `${itemSelector} .material_info`;
const activeClass = 'active';
const toggle = el => el.closest(itemSelector).classList.toggle(activeClass);


// слушаем клики на кнопках
document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggle(e.target));

// или, применяем делегирование - назначаем обработчик один раз общему предку кнопок,
// внутри проверяем, где случился клик
document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    toggle(t);
  }
});

Получение случайного числа:

const random = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

Создание матрицы:

function createMatrix(rows, cols, min, max) {
  const matrix = [];

  for (let i = 0; i < rows; i++) {
    matrix.push([]);

    for (let j = 0; j < cols; j++) {
      matrix[i][j] = random(min, max);
    }
  }

  return matrix;
}

// или

const createMatrix = (rows, cols, min, max) =>
  Array.from({ length: rows }, () =>
    Array.from({ length: cols }, () =>
      random(min, max)
    )
  );

Вывод:

function outputMatrix(matrix, el) {
  const table = document.createElement('table');

  matrix.forEach(function(n) {
    const tr = this.insertRow();
    n.forEach(m => tr.insertCell().textContent = m);
  }, table.createTBody());

  el.appendChild(table);
}

// или

function outputMatrix(matrix, el) {
  el.insertAdjacentHTML('beforeend', `
    <table>
      <tbody>${matrix.map(n => `
        <tr>${n.map(m => `
          <td>${m}</td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
  `);
}

Как всем этим пользоваться:

outputMatrix(createMatrix(5, 5, 10, 30), document.body);

moment.js:

moment(date).format('DD.MM.YYYY')

или

[
  `${date.getDate()}`.padStart(2, 0),
  `${date.getMonth() + 1}`.padStart(2, 0),
  date.getFullYear(),
].join('.')

или

date.toLocaleDateString('ru-RU')

Хочу научиться использовать последние стандарты (ES7, ES8), смотрел их разные фишки, хотелось бы попробовать, но как эти стандарты можно активировать?

Babel вам в помощь.

Видел фишки что то вроде "Точечный синтаксис"
Что-то вроде этого:
console.log ('Привет Мир!');
можно заменить на
c.l.'Привет Мир!'..

Это здесь? С первым апреля вас.

А что, по-вашему это нормально, что функция, использующаяся в качестве обработчика onmessage в основном потоке выполнения, определяется в файле воркера?

UPD. И ещё косяк:

new Worker("PrimeWorker.js");

А вот соответственно и код PrimeWork.js:

Так как всё-таки правильно - PrimeWorker или PrimeWork? Вы уж определитесь.

Функция продолжает работу после инструкции return true

Не-а, не продолжает. Это вам так кажется, из-за рекурсивного вызова. Кстати, его результат тоже надо возвращать, т.е. вместо просто

checkPalindrome(newStr);

должно быть

return checkPalindrome(newStr);

Ну и ещё проверки на пустую строку нет.

constructor({
  container: slider_container = 'container', 
  slides: slides_name = 'slide',
  controls: { state = false, previousAnimation = null, nextAnimation = null } = {}
})

<div class="map" id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

html, body {
  padding: 0;
  margin: 0;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}

let iconIndex = -1;
const icons = [
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Chartreuse-icon.png',
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Azure-icon.png',
  'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/64/Map-Marker-Marker-Outside-Pink-icon.png'
];

google.maps.event.addDomListener(window, 'load', function() {
  const latlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: latlng,
  });

  const marker = new google.maps.Marker({
    position: latlng,
    map,
  });

  google.maps.event.addListener(marker, 'click', function() {
    iconIndex = (iconIndex + 1) % icons.length;
    marker.setIcon(icons[iconIndex]);
  });
});

const $wrapper = $('.wrapper');
$wrapper
  .children()
  .sort((a, b) => $('p', a).text() - $('p', b).text())
  .appendTo($wrapper);

или

const wrapper = document.querySelector('.wrapper');
wrapper.append(...Array
  .from(wrapper.children, n => [ n, +n.querySelector('p').innerText ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0])
);