update folders

snipplets/code/JavaScript/Intl.DateTimeFormat.js

@@ -0,0 +1,74 @@
+// Опеределяем, каким образом должна юыть отформтированна дата
+let exampleFormatter = new Intl.DateTimeFormat('en-US', {
+  // Стиль форматирования для даты
+  // Может использоваться с timeStyle, но не с другими опциями
+  // 'full' (по умолчанию), 'long', 'medium', 'short'
+  // dateStyle: 'full',
+
+  // Стиль форматирования для времени
+  // Может использоваться с dateStyle, но не с другими опциями
+  // 'full' (по умолчанию), 'long', 'medium', 'short'
+  // timeStyle: 'full',
+
+  // Если true, используется 12 часовой формат времени
+  // Значение по умолчанию зависит от локали
+  hour12: true,
+
+  // Как отформатировать время суток (am, morning и т.д.)
+  // Работает только если используются 12-часовой формат времени
+  // 'narrow', 'short', или 'long'
+  dayPeriod: 'narrow',
+
+  // Стиль форматирования дней недели
+  // 'long' ("Четверг"), 'short' ("Чт"), 'narrow' ("Ч")
+  weekday: 'long',
+
+  // Стиль форматирования эпохт
+  // 'long' ("Anno Domini"), 'short' ("AD"), 'narrow' ("A")
+  era: 'short',
+
+  // Стиль форматирования года
+  // 'numeric' ("2023"), '2-digit' ("23")
+  year: 'numeric',
+
+  // Стиль форматирования месяца
+  // 'numeric' ("3"), '2-digit' ("03"), 'long' ("Март"), 'short' ("Мар"), 'narrow' ("М")
+  month: 'long',
+
+  // Стиль форматирования дня месяца
+  // 'numeric' ("1"), '2-digit' ("01")
+  day: 'numeric',
+
+  // Стиль форматирования часов
+  // 'numeric', '2-digit'
+  hour: 'numeric',
+
+  // Стиль форматирования минут
+  // 'numeric', '2-digit'
+  minute: 'numeric',
+
+  // Стиль форматирования секунд
+  // 'numeric', '2-digit'
+  second: 'numeric',
+
+  // Количество цифр, отоброжаемых в долях секунд
+  // от 0 до 3
+  fractionalSecondDigits: 1,
+
+  // Стиль форматирования часвого пояса
+  // 'long' ("Eastern Standard Time"), 'short' ("EST"), 'shortOffset' ("GMT-5"), 'longOffset' ("GMT-0500"), 'shortGeneric' ("ET"), 'longGeneric' ("Eastern Time")
+  timeZoneName: 'short'
+});
+
+let formatter = new Intl.DateTimeFormat('en-US', {
+  dateStyle: 'medium',
+  timeStyle: 'short'
+});
+
+// Создание объекта Data
+let date = new Date('2023-10-31T22:00:00');
+
+// Форматирование даты в строку
+// вернёт "Oct 31, 2023, 10:00 PM"
+let halloween = formatter.format(date);
+console.log(halloween);

snipplets/code/JavaScript/Object.entries.js

@@ -0,0 +1,8 @@
+const object1 = {
+  a: 'somestring',
+  b: 42
+};
+
+for (const [key, value] of Object.entries(object1)) {
+  console.log(`${key}: ${value}`);
+}

snipplets/code/JavaScript/README.md

@@ -0,0 +1,30 @@
+# JavaScript
+
+## Basic
+- [Arrays](arrays.js) - работа с массивами
+- [Spread syntax](spread.js) - распаковка массива в аргументы
+- [location.href](location.href.js) - Переход на другую страницу
+- [Text Content](textContent.js) - Получить текстовое содержимое элемента
+- [Add DOM Elements](addElements.js) - Добавление элементов в DOM
+- [Add Class](addClass.js) - Добавление/Удаление классов
+
+## Advanced
+- [Intl.DateTimeFormat](Intl.DateTimeFormat.js) - форматировнные строки из дат
+
+## Перебор элементов
+- [Object.entries()](Object.entries.js) - Перебор объектов, ассоционных массивов
+
+## Requests
+- [fetch](fetch.js) - Fetch запрос JSON данных
+- [xhr](xhrPostForm.js) - отправка формы POST запросом используя XHR
+
+## Other
+- [Webpack](webpack.md) example config
+
+## Canvas
+- [Drawing text](drawing-text.js) - примеры рисования текста на CANVAS
+- [`measureText()`](measureText.js) - возвращает информацию об измеренном тексте, например ширину
+- [`drawImage()`](canvas.drawImage.js) - метод Canvas 2D API рисования изображения на холсте
+
+## GameDev
+- Canvas [GameLoop](gameloop.js) example

snipplets/code/JavaScript/addClass.js

@@ -0,0 +1,5 @@
+// Use element.classList.add to add a class:
+element.classList.add('my-class');
+
+// And element.classList.remove to remove a class:
+element.classList.remove('my-class');

snipplets/code/JavaScript/addElements.js

@@ -0,0 +1,3 @@
+let newDiv = document.createElement('div');
+newDiv.appendChild(document.createTextNode('some text'));
+document.body.appendChild(newDiv);

snipplets/code/JavaScript/arrays.js

@@ -0,0 +1,17 @@
+let cats = ['Bob', 'Willy', 'Mini'];
+
+// pop(): Remove an item from the end of an array
+// pop() returns the removed item
+cats.pop(); // ['Bob', 'Willy']
+
+// push(): Add items to the end of an array
+// push() returns the new array length
+cats.push('Mini'); // ['Bob', 'Willy', 'Mini']
+
+// shift(): Remove an item from the beginning of an array
+// shift() returns the removed item
+cats.shift(); // ['Willy', 'Mini']
+
+// unshift(): Add items to the beginning of an array
+// unshift() returns the new array length.
+cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Mini']

snipplets/code/JavaScript/canvas.drawImage.js

@@ -0,0 +1,44 @@
+// void ctx.drawImage(image, dx, dy);
+// void ctx.drawImage(image, dx, dy, dWidth, dHeight);
+// void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+
+// image
+//     Элемент для отображения в контексте.
+//     Функция принимает любой источник изображения, пригодный для отображения
+//     на холсте
+// dx
+//     Координата по оси Х, обозначающая стартовую точку холста-приёмника,
+//     в которую будет помещён верхний левый угол исходного image.
+// dy
+//     Координата по оси Y, обозначающая стартовую точку холста-приёмника,
+//     в которую будет помещён верхний левый угол исходного image.
+// dWidth
+//     Ширина изображения, полученного из исходного image.
+//     Эта опция позволяет масштабировать изображение по ширине.
+//     Если опция не задана, изображение не будет масштабировано.
+// dHeight
+//     Высота изображения, полученного из исходного image.
+//     Эта опция позволяет масштабировать изображение по высоте.
+//     Если опция не задана, изображение не будет масштабировано.
+// sx
+//     Координата по оси X верхнего левого угла фрагмента,
+//     который будет вырезан из изображения-источника и помещён в контекст-приёмник.
+// sy
+//     Координата по оси Y верхнего левого угла фрагмента,
+//     который будет вырезан из изображения-источника и помещён в контекст-приёмник.
+// sWidth
+//     Ширина фрагмента, который будет вырезан из изображения источника
+//     и помещён в контекст-приёмник. Если не задана, фрагмент от точки,
+//     заданной sx и sy до правого нижнего угла источника
+//     будет целиком скопирован в контекст-приёмник.
+// sHeight
+//     Высота фрагмента, который будет вырезан из изображения источника
+//     и помещён в контекст-приёмник.
+
+function Draw() {
+  let canvas = document.getElementById('canvas');
+  let ctx = canvas.getContext('2d');
+  let image = document.getElementById('source');
+
+  ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+}

snipplets/code/JavaScript/drawing-text.js

@@ -0,0 +1,14 @@
+function Draw() {
+  let context = document.getElementById('canvas').getContext('2d');
+
+  // Styling text
+  // font = value
+  // textAlign = value | *start, end, left, right, center
+  // textBaseline = value | top, hanging, middle, *alphabetic, ideographic, bottom
+  // direction = value | ltr, rtl, *inherit
+
+  // fillText(text, x, y [, maxWidth])
+  // strokeText(text, x, y [, maxWidth])
+  context.font = '48px serif';
+  context.fillText('Hello world', 10, 50);
+}

snipplets/code/JavaScript/fetch.js

@@ -0,0 +1,3 @@
+fetch('http://example.com/movies.json')
+  .then(response => response.json())
+  .then(data => console.log(data));

snipplets/code/JavaScript/location.href.js

@@ -0,0 +1,4 @@
+// Перейти на нужную страницу можно с помощью JavaScript
+// document.location.href = "https://www.site";
+
+document.location.href = url.value;

snipplets/code/JavaScript/measureText.js

@@ -0,0 +1,5 @@
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+let text = ctx.measureText('Hello world');
+console.log(text.width); // 56;

snipplets/code/JavaScript/spread.js

@@ -0,0 +1,11 @@
+function sum(x, y, z) {
+  return x + y + z;
+}
+
+const numbers = [1, 2, 3];
+
+console.log(sum(...numbers));
+// expected output: 6
+
+console.log(sum.apply(null, numbers));
+// expected output: 6

snipplets/code/JavaScript/textContent.js

@@ -0,0 +1,3 @@
+document.getElementById('element').textContent;
+// If you need to target < IE9 then you need to use
+document.getElementById('element').innerText;

snipplets/code/JavaScript/timestamp_to_date.js

@@ -0,0 +1,6 @@
+/*
+  Необходимо timestamp умножить на 1000, поскольку JavaScript отсчитывает время
+  с момента epoch (который равен 01/01/1970) в миллисекундах, а не в секундах.
+*/
+
+let date = new Date(timestamp * 1000);

snipplets/code/JavaScript/webpack.md

@@ -0,0 +1,33 @@
+## WebPack
+`packages.json`
+```json
+"scripts": {
+    "serve": "webpack serve",
+    "html": "html-minifier --collapse-whitespace --remove-comments src/index.html --output dist/index.html",
+    "css": "csso src/styles.css --output dist/styles.css",
+    "build": "npm run html && npm run css && webpack --mode=production"
+},
+"devDependencies": {
+    "webpack": "^5.42.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+}
+```
+`webpack.config.js`
+```javascript
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'engine.js',
+    },
+    devServer: {
+        contentBase: path.join(__dirname, 'src'),
+        compress: false,
+        port: 55555,
+    },
+};
+```

snipplets/code/JavaScript/xhrPostForm.js

@@ -0,0 +1,9 @@
+let data = new FormData();
+
+data.append('item_id', 1);
+data.append('image_name', 'NAME');
+
+let xhr = new XMLHttpRequest();
+xhr.open('POST', '/v.php?type=image_delete', true);
+xhr.onload = function() { console.log(this.responseText); };
+xhr.send(data);