Помилки при інтеграції коду на сайт: Як не треба робити і як виправити
# 🛑 **Помилки при інтеграції коду на сайт: Як не треба робити і як виправити**
## 🔹 **Вступ**
При інтеграції динамічного **HTML, CSS і JavaScript-коду** на сайт можуть виникати проблеми, які блокують доступ до редактора або порушують структуру сторінки. В цій статті ми розглянемо **основні помилки**, які призвели до втрати доступу, а також **як їх уникнути та виправити**.
---
## ❌ **Основні помилки**
### 🔴 1. Використання `document.write()`
Одна з ключових помилок — **використання `document.write()`** для генерації HTML. Це може спричинити:
- ❗ **Видалення вже існуючого вмісту сторінки**.
- ❗ **Конфлікти з динамічним завантаженням контенту**.
- ❗ **Блокування роботи редактора в CMS (наприклад, WordPress)**.
#### ✅ **Як виправити?**
**Замість `document.write()` використовуй `innerHTML` або `appendChild()`.**
```javascript
// ❌ НЕПРАВИЛЬНО:
document.write('<div>Помилка!</div>');
// ✅ ПРАВИЛЬНО:
document.getElementById("content").innerHTML += '<div>Виправлено!</div>';
```
---
### 🔴 2. Неправильне розміщення меню та футера
Помилка: **меню було розміщене як `position: sticky` без правильного контейнера**, що спричинило його перекриття з іншими елементами. Також футер «відсунув» основний вміст.
#### ✅ **Як виправити?**
```css
.container {
display: flex;
max-width: 1200px;
margin: auto;
}
.menu {
width: 30%;
position: relative;
}
.content {
width: 65%;
margin-left: 5%;
}
.footer {
width: 100%;
text-align: center;
clear: both;
}
```
---
### 🔴 3. JavaScript блокує доступ до редактора
**Сайт перестав працювати через помилки в JavaScript.**
#### ✅ **Як тимчасово вимкнути JavaScript у браузері?**
🔹 **Google Chrome**
- Відкрий **Налаштування** → **Конфіденційність і безпека** → **Налаштування сайту** → **JavaScript**.
- Вимкни JavaScript.
- Онови сторінку сайту.
- Якщо отримав доступ, виправ код і увімкни JavaScript знову.
🔹 **Mozilla Firefox**
- Введи в адресному рядку `about:config` і натисни Enter.
- Введи `javascript.enabled` у поле пошуку.
- Зміни значення на **false** (подвійний клік).
- Онови сайт.
🔹 **Через інструменти розробника (DevTools)**
- Натисни `F12` або `Ctrl + Shift + I`, перейдіть у **Console**.
- Введи:
```javascript
document.querySelectorAll("script").forEach(el => el.remove());
```
- Натисни **Enter** – це тимчасово вимкне JavaScript на сторінці.
---
### 🔴 4. Відкат змін через FTP
Якщо немає доступу до редактора:
- **Підключися до сервера через FTP** (наприклад, **FileZilla**).
- Перейди в папку з файлом `index.html` або `header.php`.
- **Видали або заміни проблемний код**.
- Онови сайт.
---
## ✅ **Висновок**
При додаванні складних скриптів у код сайту важливо:
✅ **Перевіряти зміни перед впровадженням**.
✅ **Не використовувати `document.write()`**.
✅ **Використовувати правильну структуру контейнерів**.
✅ **Знати, як вимкнути JavaScript для аварійного доступу**.
✅ **Мати резервні копії файлів перед внесенням змін**.
🚀 **Дотримуючись цих правил, можна уникнути проблем та швидко виправити помилки, якщо вони виникли.**