css.in.ua
Підтримати

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

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

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

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

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

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

Підтримати матеріально

JS властивість Location.pathname

Загальний опис

Властивість pathname об'єкта Location в JavaScript відіграє ключову роль у навігації та роутингу веб-додатків. Вона повертає частину URL, що вказує на конкретний шлях (або "path") на веб-сервері. Це дозволяє розробникам визначати, яка частина веб-додатку в даний момент використовується, та відповідно реагувати на зміни у цій частині.

pathname повертає рядок, що представляє шлях до ресурсу на веб-сервері. Наприклад, для URL https://www.example.com/catalog/search?q=dress, pathname поверне /catalog/search. Ця властивість є особливо корисною для розробки односторінкових застосунків (SPA), де управління роутингом здійснюється на стороні клієнта.

Приклади використання:

  1. Отримання поточного шляху: Основне використання pathname полягає в отриманні шляху поточного URL:

     let currentPath = window.location.pathname;
 console.log(currentPath);

    Цей код виведе на консоль шлях поточної веб-сторінки.

  2. Використання у SPA роутингу: У односторінкових застосунках pathname може використовуватися для визначення активної сторінки та зміни вмісту відповідно до неї:

     switch (window.location.pathname) {
	 case '/home':
			 showHomePage();
			 break;
	 case '/about':
			 showAboutPage();
			 break;
	 case '/contact':
			 showContactPage();
			 break;
	 default:
			 showNotFoundPage();
			 break;
 }

    Такий код дозволяє управляти відображенням різних частин SPA без перезавантаження сторінки.

  3. Реалізація динамічного навігаційного меню: pathname може бути використаний для визначення, який пункт меню є активним, змінюючи його стиль або поведінку:

     document.querySelectorAll('.nav-item').forEach(item => {
	 if (item.getAttribute('href') === window.location.pathname) {
			 item.classList.add('active');
	 }
 });

    Цей код вибирає активний пункт меню на основі поточного шляху.

location.pathname є надзвичайно важливим для створення інтуїтивно зрозумілої навігації в веб-додатках, особливо в односторінкових застосунках. Його використання дозволяє розробникам ефективно керувати змістом веб-сторінок, покращуючи при цьому користувацький досвід.

Порада:

Використовуйте location.pathname для отримання відносного шляху веб-сторінки відносно кореня сайту. Це може бути корисно для аналізу поточної структури URL, особливо при роботі з односторінковими додатками (SPA), де шлях часто визначає стан або вміст сторінки.
Порада:

Коли розробляєте маршрутизацію в своєму додатку, location.pathname може використовуватися для визначення активної сторінки чи розділу сайту. Це може бути особливо корисним для динамічного зміни контенту або навігації без перезавантаження сторінки.
Порада:

При створенні навігаційних меню або хлібних крихт (breadcrumb), location.pathname може бути використаний для виділення активного пункту меню або для визначення шляху користувача в межах сайту, підвищуючи зрозумілість навігації.
Порада:

Уникайте прямої залежності від конкретних шляхів, закодованих у вашому JavaScript коді, оскільки це може ускладнити переносимість і масштабування вашого додатку. Замість цього, розгляньте можливість використання зовнішніх конфігурацій або шаблонів маршрутизації для більшої гнучкості у обробці URL-шляхів.

Синтаксис

location.pathname

Значення

Return

Переглядачі

Переглядач

1

1

1

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

1.7

Приклади


Цей код демонструє використання властивості location.pathname для відображення поточного шляху URL на сторінці. При завантаженні сторінки, він витягує поточний шлях та відображає його в блоку результату. Користувач може бачити поточний шлях сторінки, і ви можете подальше розширити цей приклад для роботи зі шляхами URL в вашому додатку.

У цьому прикладі ми використовуємо властивість location.pathname для отримання шляху поточної веб-сторінки. Це може бути корисним для аналізу шляхів URL у веб-застосунках, наприклад, для роутингу або визначення поточного розділу сайту.

// Отримання шляху поточної веб-сторінки
let currentPath = window.location.pathname;
console.log(currentPath);

У цьому коді, ми спочатку отримуємо шлях поточної сторінки за допомогою window.location.pathname. Потім, використовуючи оператор switch, ми перевіряємо шлях та відповідно до цього виводимо інформацію про розділ сайту або виконуємо певні дії. Це приклад, як pathname може бути використаний для реалізації простого роутингу в односторінкових додатках або для адаптації вмісту відповідно до поточного URL.

// Функція для керування вмістом в залежності від шляху URL
function manageContentBasedOnPath() {
    let path = window.location.pathname;

    switch(path) {
        case '/about':
            console.log('Розділ: Про нас');
            break;
        case '/contact':
            console.log('Розділ: Контакти');
            break;
        case '/products':
            console.log('Розділ: Продукція');
            break;
        default:
            console.log('Головна сторінка');
    }
}

manageContentBasedOnPath();

Документи

Зв'язок