Obiekt document i window to dwa z obiektów nadrzędnych, do których możemy uzyskać dostęp za pomocą JavaScriptu. Sam obiekt document jest podrzędny w stosunku do obiektu window. Chyba każdy je zna, bo są wszechobecne zwłaszcza przy tworzeniu aplikacji webowych z vanilla javascript.

Ten artykuł ma na celu pokazanie kilku praktycznych cech obu tych obiektów. Nie ma potrzeby bardziej szczegółowego wprowadzania tego, czym dokładnie są te dwa elementy, podam teraz kilka praktycznych przykładów, które można wykorzystać bez większej wiedzy.

Menu kontekstowe jest zdarzeniem DOM, które jest wywoływane, gdy użytkownik kliknie prawym przyciskiem myszy na elemencie DOM, który menu kontekstowe chce wywołać. Menu kontekstowe to po prostu menu, które jest domyślnie wyświetlane, gdy użytkownik kliknie prawym przyciskiem myszy na stronie WWW, chyba że strona WWW przetwarza to zdarzenie inaczej, co zrobimy za chwilę. Więc nawet jeśli nazwa może nie być znana, to małe menu wygląda inaczej w zależności od systemu operacyjnego i oferuje takie rzeczy jak „zapisz obraz jako”, „zbadaj”, „przeładuj” & „wstecz”.
Podsumowując, możemy wykorzystać zdarzenie contextmenu w DOM do wykonania własnej akcji, gdy użytkownik kliknie prawym przyciskiem myszy.

Kliknięcie prawym przyciskiem myszy i zablokowanie wyświetlania domyślnego menu kontekstowego

<div id="nocontext">No context menu available for this</div><script>
noContext = document.getElementById('nocontext')noContext.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
</script>

Ustawiamy więc EventListener dla naszego <div>, który powinien być wykonywany w momencie wywołania menu kontekstowego, czyli przy kliknięciu prawym przyciskiem myszy. Zwraca on zdarzenie, które możemy zablokować standardową funkcją preventDefault.

Przypadek domyślny byłby taki, jakbyśmy kliknęli prawym przyciskiem myszy na menu kontekstowe. Ale za pomocą preventDefault blokujemy to. Więc nic się nie dzieje.

Oczywiście, nie tylko możemy zablokować standardowe zdarzenie, ale możemy również wykonać wszelkiego rodzaju kod, gdy użytkownik kliknie prawym przyciskiem myszy. Możemy wtedy połączyć to z preventDefault, aby zaoferować nasze własne menu kontekstowe, na przykład:

contextAvailable.addEventListener('contextmenu', (e) => {
console.log('you rightclicked this')
e.preventDefault()
})

Tryb projektowania twojego dokumentu

Do czasu badań nad tym artykułem było to dla mnie zupełnie nieznane, ale w rzeczywistości ta funkcja może być bardzo praktyczna. Można ją wykorzystać np. w systemie zarządzania treścią, albo do szybkiej edycji bez kodu, do wizualizacji potencjalnych zmian treści na stronie.
Bo to, co designMode umożliwia, to możliwość edycji całej zawartości strony, którą oglądamy w przeglądarce, bez konieczności zmiany kodu HTML w devtools.

Możesz to wypróbować już teraz. Wystarczy wejść na dowolną stronę internetową, otworzyć konsolę i wpisać następujące słowa:

document.designMode = "on"

Teraz można po prostu edytować wyświetlaną stronę tak, jakby to był dokument Worda. Całkiem nieźle, co?
Tryb DesignMode zna tylko dwa stany: On i Off. Jeśli więc chcesz go wyłączyć, wykonaj następujące czynności:

document.designMode = "off"

Jeśli chcesz zabezpieczyć poszczególne elementy przed zmianą zawartości, możesz nadać im następujący atrybut: (Wtedy można je tylko całkowicie usunąć, ale nie można nimi manipulować)

<i contenteditable = "false">This is not editable.</i>

Kopiuj coś do schowka użytkownika za pomocą kodu

Pierwotnie do tego celu przeznaczona była dobrze znana funkcja document.execCommand(), ale obecnie jest ona uważana za zdeprecjonowaną.
Zamiast tego dostępne jest teraz API Clipboard, które umożliwia automatyczne kopiowanie zawartości przy użyciu JavaScript.
Można go używać poprzez obiekt navigator, który jest podporządkowany obiektowi window.

Przyjrzyjrzyjmy się przykładowi, w którym po naciśnięciu przycisku kopiujemy do schowka tekst wprowadzony w polu wejściowym:

Poznaj stan dokumentu

Szczególnie w przypadku tworzenia bardziej złożonych i zoptymalizowanych pod kątem wydajności webapps należy przeprowadzać badania czasu ładowania &ogólnego zachowania dokumentu w celu znalezienia potencjalnych słabych punktów lub poprawy wydajności i UX.

Dlatego za pomocą document.readyState możemy uzyskać dostęp do bieżącego stanu dokumentu i podjąć dalsze decyzje na podstawie wyniku.

Oto możliwe wyniki, które document.readyState może zwrócić:

• uninitialized – Nie rozpoczął jeszcze ładowania
• loading – Jest ładowany
• loaded – Został załadowany
• interactive – Załadował się wystarczająco i użytkownik może wejść z nim w interakcję
• complete – W pełni załadowany
  Źródło: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Jeśli pobawić się tym trochę w praktyce, można uzyskać kilka ciekawych rezultatów. W tym celu stworzyłem mały HTML-owy boilerplate, za pomocą którego wypisujemy status w różnych miejscach. Każdy z zewnętrznych skryptów zawiera po prostu console.log(document.readyState)

Oto, w kolejności chronologicznej, co nasza strona wtedy loguje:

• normal: loading
• script-tag: loading
• defer: interactive
• async: interactive
• onload body: complete

Różne sposoby dołączania zewnętrznych skryptów działają tutaj zgodnie z oczekiwaniami. Ale interesujące jest to, że jeśli dołączymy tylko jeden duży obrazek na stronie, czas ładowania obrazka również opóźni zdarzenie onload znacznika body.

Więc w każdym przypadku status jest „kompletny”, jeśli przekażemy status za pomocą zdarzenia onload-event.

Praca z fokusem / aktywnym elementem

Gdy chodzi o elementy, z którymi użytkownik strony internetowej może faktycznie wejść w interakcję, takie jak przyciski, wejścia i pola tekstowe, mogą one mieć tak zwany fokus. Jeśli input ma fokus i wpiszemy coś na klawiaturze, to zostanie to wpisane w pole input. Jeśli pole nie ma fokusu, nie jest to zapisywane w polu wejściowym. Myślę, że każdy wie, czym jest fokus.

Określ, który element ma fokus

Może znasz już atrybut onfocus, który jest zdarzeniem, gdy element dostaje fokus. Wtedy moglibyśmy użyć go do stworzenia fajnych animacji CSS lub, jeśli chcemy przeanalizować zachowanie użytkownika, zapisać to zdarzenie.

W ten sam sposób możemy określić, który element ma fokus bez konieczności nadawania wszystkim elementom atrybutu onfocus.
Możemy to zrobić w następujący sposób:

var x = document.activeElement.idconsole.log(x)

W ten sposób możemy uzyskać id elementu, który ma fokus / jest aktywny.

Ręczna zmiana fokusu

Szczególnie w odniesieniu do UX, czasami pomocne może być zwolnienie użytkownika z wybierania elementów. Na przykład, jeśli wprowadził on błędne dane w jednym formularzu, a my chcemy, aby zmienił swoje dane w każdym polu wejściowym:

document.getElementById('input1').focus()

Odczytywanie aktualnej stylizacji elementu

W dużych i dynamicznych aplikacjach internetowych stale zmieniamy aktywną stylizację dowolnego elementu w DOM.
Możemy również wyprowadzić to do dwóch w dowolnym momencie, więc sprawdź, jakie atrybuty CSS i wartości mają nasze elementy.

1. element.stylemoże być również użyta do odczytu stylów, ale jest przeznaczona do ich edycji
2. Window.getComputedStyle()jest stworzona do uzyskania aktualnej stylizacji

Więc dzięki ostatniej funkcji możemy uzyskać cały obiekt z wszystkimi stylami danego elementu:

let box = document.getElementById('box')console.log(window.getComputedStyle(box)) // CSSStyleDeclaration{}

Ale możemy też dokładniej wyprowadzić poszczególne atrybuty i odpowiadające im wartości:

let box = document.getElementById('box')console.log(
window.getComputedStyle(box)
.getPropertyValue('background-color') // E.g. rgb(0, 128, 0)
)

Praca z rozmiarem przeglądarki & wyświetlanej strony

Oczywiście w nowoczesnym tworzeniu stron internetowych nie da się obejść rozmiarów. Oto, czego potrzebujesz:

• window.outerWidth
• window.outerHeight

Te dwa zwracają wymiary samego okna przeglądarki, więc nie ma znaczenia, czy strona jest zmniejszana np. przez narzędzia deweloperskie.

Więc jeśli chodzi o rzeczywiste określenie, w jakich wymiarach strona jest aktualnie wyświetlana, dostępne są następujące funkcje:

• window.innerWidth
• window.innerHeight

Na przykład, w ten sposób można zrobić element fullscreen:

elem.style.width = window.innerWidth + 'px'

Nota z JavaScript In Plain English

Wprowadziliśmy trzy nowe publikacje! Okaż trochę miłości dla naszych nowych publikacji, śledząc je: AI in Plain English, UX in Plain English, Python in Plain English – dziękujemy i uczcie się dalej!

Zawsze jesteśmy też zainteresowani pomocą w promowaniu wysokiej jakości treści. Jeśli masz artykuł, który chciałbyś przesłać do którejś z naszych publikacji, wyślij nam maila na [email protected] z Twoją nazwą użytkownika Medium, a my dodamy Cię jako pisarza. Daj nam również znać, do której publikacji chciałbyś zostać dodany.