CODELINE

Python
JavaScript
PHP
Wordpress
React

Praktyczny JavaScript – navbar script

Przykład prawdziwego czystego kodu JavaScript do manipulacji DOM – obsługi paska nawigacyjnego, użytego w większym projekcie, korzystającym z frameworka. Codzienna dawka czystego JS.

Nasz kod po pierwsze zabezpieczony jest przed zbyt wczesnym uruchomieniem, zanim jeszcze DOM nie jest wyrenderowany:

window.addEventListener('DOMContentLoaded', function(){
    (...)
});

Nasz kod po załadowaniu drzewa DOM rozpoczyna pobieranie potrzebnych mu elementów za pomocą query selectora:

window.addEventListener('DOMContentLoaded', function(){
    let hamBtn = document.querySelector("#hamBtn");
    let hamburger = document.querySelector("#hamburger-navbar");
   
    let searchIpt = document.querySelector("#search");
    let searchBtn = document.querySelector("#searchBtn");
   
});

Guzik hamburger wykonuje toggle (włącz/wyłącz klasę) na elemencie hamburger dla klasy „hide” (możemy się domyślić, że jest to klasa ukrywająca hamburger menu, domyślnie włączona):

window.addEventListener('DOMContentLoaded', function(){
    let hamBtn = document.querySelector("#hamBtn");
    let hamburger = document.querySelector("#hamburger-navbar");

    hamBtn.addEventListener("click", function(){
        hamburger.classList.toggle('hide');
    });
    let searchIpt = document.querySelector("#search");
    let searchBtn = document.querySelector("#searchBtn");
    
});

Dalej nasz kod po wciśnięciu guzika szukaj pobiera wartość inputu tekstowego o nazwie searchIpt:

window.addEventListener('DOMContentLoaded', function(){
    let hamBtn = document.querySelector("#hamBtn");
    let hamburger = document.querySelector("#hamburger-navbar");
    hamBtn.addEventListener("click", function(){
        hamburger.classList.toggle('hide');
    });

    let searchIpt = document.querySelector("#search");
    let searchBtn = document.querySelector("#searchBtn");

    searchBtn.addEventListener('click', function(e){
        if(searchIpt.value.trim().length === 0)
            {
                e.preventDefault();
                return
            }

        let url = `https://YOUR_URL_HERE/?s=${encodeURIComponent(searchIpt.value)}`;
        window.location.replace(url);
    });
});

Prevent default tutaj nie jest potrzebny, bo nie pracujemy na formularzu, ale dobrze obrazuje co zazwyczaj byśmy robili – to jest blokujemy wyszukiwanie jeżeli długość tekstu (bez spacji) jest równa 0.

Dalej, mamy url, do którego za pomocą encodeURIComponent doczepiamy query string z naszego inputu tekstowego (chodzi o to, aby można było wyszukiwać frazy dłuższe niż 1 wyraz nie psując URLa).

Na samym końcu window.location.replace odsyła nas na stronę wyszukiwania, z odpowiednio przygotowanym query.