Иван Кулаков

<script type="module" src="module.mjs"></script>
<script nomodule src="fallback.js"></script>

<script type="text/javascript"> </script>
<script type="text/javascript">//</script>

Различные вещи могут вызывать изменения вычислительных значений свойств элемента.
К ним относятся: вставка и удаление элементов из дерева документа (которые изменяют, имеют ли эти элементы вычисленные значения и могут изменять стили других элементов посредством сопоставления селекторов), изменения в дереве документа (которые вызывают изменения в том, какие селекторы соответствуют элементам), изменения на таблицы стилей или атрибуты стилей и другие вещи.
Эта спецификация не определяет, когда вычисленные значения обновляются, кроме того, что реализации не должны использовать, представлять или отображать что-либо, являющееся результатом каскадирования CSS, вычисления значений и процесса наследования.

if (/[0-9A-Fa-f]{6}/g.test(args[0])) console.log("правильный hex")

function myFunc({t = null, c = null, g = null}) {
    console.log(t, c, g)
}

myFunc({t: 5});
myFunc({c: 10});
myFunc({g: 20});

str.replace(/(?<=.{38})/, ':')
// или
str.replace(/.{38}/, '$&:')
// или
[...str].map((n, i) => i === 38 ? `:${n}` : n).join('')

const datas = [
{
  description: "new",
  img: "https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png",
  name: "Nike1",
  price: 100
}, {
  description: "classic",
  img: "https://www.freepnglogos.com/uploads/puma-logo-png-1.png",
  name: "Adidas1",
  price: 120
},
{
  description: "new",
  img: "https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png",
  name: "Nike2",
  price: 200
}, {
  description: "classic",
  img: "https://www.freepnglogos.com/uploads/puma-logo-png-1.png",
  name: "Adidas2",
  price: 320
}
]

class Products {
  constructor(name, price, description, img){
    this.name = name;
    this.price = price;
    this.description = description;
    this.img = img;
 }    
}

class Manager {
 constructor(selector = '#tables', data = []) {
   this.root = document.querySelector(selector) || document.body;
   this.products = data.length === 0 ? this._demoProducts() : data;
 }
 _demoProducts() {
        let nike = new Products("Nike", 100, "new-shoes","https://www.svgimages.com/svg-image/s8/air-jordan-logo-256x256.png");
        let adidas = new Products("Adidas", 120, "classic-shoes","https://www.freepnglogos.com/uploads/puma-logo-png-1.png");
        return [nike, adidas];
    }
 getHTMLTemplate() {
   return this.products.map(function(product, i) {
     return `<div class="info-goods" data-id='${i}'>
            <div class="img"><img src=${product.img} width="80" height="80" alt='${product.name}'></div>
            <div class="name">${product.name}</div>
            <div class="price">${product.price}</div>
            <div class="description">${product.description}</div>
           </div>`
   });
 } 
 init(){
  this.root.insertAdjacentHTML('beforeend', this.getHTMLTemplate().join('<hr>'));
 }
}

const manager = new Manager();
      manager.init();

• Заменить все переменные в запросе на специальные маркеры, которые называются плейсхолдеры или параметры, а по сути - просто знаки вопроса
  
• Подготовить запрос к исполнению с помощью функции prepare(). Эта функция принимает строку запроса и возвращает экземпляр специального класса stmt, с которым в дальнейшем и производятся все манипуляции
  
• Привязать переменные к запросу.
  
• Выполнить подготовленный ранее запрос с помощью с помощью execute()
  

$sql = "INSERT INTO `events` (`title`, `discription`, `date`, `img`) VALUES (?,?,?,?)";
$stmt = $link->prepare($sql);
$stmt->bind_param("sssss", $title, $discription, $date, $path);
$stmt->execute();

$sql = "INSERT INTO `events` (`title`, `discription`, `date`, `img`) VALUES (?,?,?,?)";
$stmt = $link->prepare($sql);
$stmt->execute([$title, $discription, $date, $path]);