Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

JS об'єкт Location

Введення

Об'єкт Location у JavaScript відображає поточний URL документа, дозволяючи нам отримувати, переглядати та змінювати його частини. Цей об'єкт можна використовувати для переадресації на інший URL, перезавантаження сторінки та інших завдань, пов'язаних із роботою URL.

Location надає властивості для доступу до різних частин URL:

  • location.href – повний URL.
  • location.protocol – протокол (наприклад, "http:" або "https:").
  • location.host – ім'я хоста з портом.
  • location.hostname – ім'я хоста.
  • location.port – порт.
  • location.pathname – шлях після імені домену.
  • location.search – рядок запиту, починаючи з "?".
  • location.hash – частина URL після "#".

Приклад 1: Отримання поточного URL

console.log(location.href);  // може вивести "https://example.com/page.html?query=js#section"

У цьому прикладі ми просто виводимо поточний URL документа.

Приклад 2: Зміна частини URL

location.hash = "newSection";

Після виконання цього коду, URL документа зміниться на "https://example.com/page.html?query=js#newSection", а якщо на сторінці є елемент з ID "newSection", браузер прокрутить сторінку до цього елементу.

Переадресація та перезавантаження сторінки

Методи об'єкта Location дозволяють нам керувати сторінкою:

  • location.assign(url): завантажує новий документ.
  • location.reload(): перезавантажує поточний документ.
  • location.replace(url): завантажує новий документ, замінюючи поточний в історії браузера.

Приклад 3: Переадресація на інший сайт

location.assign("https://www.openai.com");

Цей код перенаправляє користувача на сайт OpenAI.

Приклад 4: Перезавантаження сторінки

location.reload();

Виконуючи цей код, ви примусово перезавантажите поточну сторінку.

Приклад 5: Заміна поточного URL без додавання його в історію браузера

location.replace("https://www.example.com/newPage");

Цей код перенаправляє на "https://www.example.com/newPage", але старий URL не буде збережений в історії браузера, тому користувач не зможе повернутися назад за допомогою кнопки "Назад" у браузері.

Звернення до параметрів запиту

location.search відображає рядок запиту URL, який починається з символу "?". Часто нам потрібно працювати з параметрами запиту.

Приклад 6: Отримання параметрів запиту

Припустимо, URL має такий вигляд: "https://example.com/page.html?user=John&age=30".

let params = new URLSearchParams(location.search);
let user = params.get("user");  // John
let age = params.get("age");    // 30

У цьому прикладі ми створюємо об'єкт URLSearchParams з location.search для легкого доступу до параметрів запиту.

Використання об'єкта Location є ключовим при роботі з веб-сторінками, адже він дозволяє нам керувати URL та взаємодіяти з його компонентами. З його допомогою можна легко реалізувати редирект, працювати з параметрами запиту та багато іншого.

Нотатка:

Метод location.replace() не лише перенаправляє на новий URL, але й видаляє поточний URL з історії браузера. Це може бути корисно в певних ситуаціях, але також може викликати незручності для користувачів, які сподіваються повернутися на попередню сторінку.

Порада:

Перш ніж використовувати або змінювати будь-яку частину URL за допомогою об'єкта Location, переконайтеся, що новий URL є валідним і безпечним для ваших користувачів.

Нотатка:

Незважаючи на те, що об'єкт Location дозволяє легко реалізовувати переадресацію, важливо користуватися цією можливістю розумно. Занадто часте використання переадресації може хаважати користувачам та погіршувати їхній досвід користування сайтом.

Синтаксис

const loc = document.location;

Переглядачі

Переглядач

1

1

1

3

12

Переглядач

37

18

4

1

Переглядач

1.7

Приклади


На сторінці інтернет-магазину ви можете дозволити користувачам фільтрувати товари за різними критеріями. Після застосування фільтру можна змінювати рядок запиту, щоб відображати активні параметри фільтрації.

function filterProducts(color, size) {
    let params = new URLSearchParams(location.search);
    params.set('color', color);
    params.set('size', size);
    location.search = params.toString();
}
// Користувач вибирає колір "червоний" і розмір "M", викликається filterProducts('red', 'M')

Після того як користувач успішно авторизується на вашому сайті, ви можете перенаправити його на сторінку, з якої він прийшов, або на особисту сторінку користувача.

function redirectToOriginOrDashboard() {
    if (document.referrer) {
        location.href = document.referrer;
    } else {
        location.href = '/dashboard';
    }
}
// Після успішного входу на сайт викликається redirectToOriginOrDashboard()

Якщо у вас є веб-сайт з кількома мовними версіями, ви можете дозволити користувачам змінювати мову, клікаючи на певну кнопку або випадаюче меню. Це можна зробити, модифікуючи частину шляху в URL за допомогою об'єкта Location.

function setLanguage(lang) {
    location.pathname = '/' + lang + '/homepage';
}
// Користувач вибирає "українська", викликається setLanguage('uk')

Методи

reload()
Перезавантажує поточну веб-сторінку з сервера або кешу браузера.
replace()
Замінює поточну сторінку у стеку переходів новою, без можливості повернення назад.
assign()
Завантажує новий документ за вказаною URL-адресою.

Властивості

hash
Забезпечує доступ до фрагмента URL, який слідує після символу "#".
href
Повертає або встановлює повний URL поточної веб-сторінки.
host
Визначає ім'я хоста та порт поточної веб-сторінки.
hostname
Повертає ім'я домену поточної веб-сторінки без порту.
origin
Повертає походження URL поточної веб-сторінки, включаючи схему, хост та порт.
pathname
Вказує шлях сторінки від кореня сайту до поточної веб-сторінки.
port
Визначає порт, на якому працює поточна веб-сторінка.
protocol
Визначає або повертає протокол поточної веб-сторінки.
search
Повертає частину URL, що містить рядок запиту після знака '?'.