Obiectul document și obiectul fereastră sunt două dintre obiectele părinte pe care le putem accesa cu JavaScript. Obiectul document în sine este subordonat obiectului fereastră. Cred că toată lumea le cunoaște, pentru că sunt omniprezente mai ales atunci când dezvoltăm aplicații web cu vanilla javascript.

Acest articol își propune să vă arate câteva dintre caracteristicile practice ale celor două. Nu este nevoie de o introducere mai detaliată a ceea ce sunt mai exact aceste două, vă voi da acum câteva exemple practice pe care le puteți folosi fără prea multe cunoștințe anterioare.

Meniul contextual este un eveniment DOM, care este declanșat atunci când un utilizator face clic dreapta pe un element DOM pe care meniul contextual dorește să îl apeleze. Meniul contextual este pur și simplu meniul care este afișat în mod implicit atunci când un utilizator face clic dreapta pe o pagină web, cu excepția cazului în care pagina web procesează evenimentul în mod diferit, așa cum vom face într-un moment. Așadar, chiar dacă numele nu este cunoscut, micul meniu arată diferit în funcție de sistemul de operare și oferă lucruri precum „save image as”, „examine”, „reload” & „back”.
În principiu, putem folosi evenimentul contextmenu din DOM pentru a efectua propria noastră acțiune atunci când utilizatorul face clic dreapta.

Clicul dreapta și blocarea afișării meniului contextual implicit

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

Așa că am configurat un EventListener pentru <div-ul nostru>, care ar trebui să fie executat atunci când meniul contextual este apelat, adică la un clic dreapta. Acesta returnează un eveniment, pe care îl putem bloca cu funcția standard preventDefault.

Cazul implicit ar fi ca și cum am face clic dreapta pe meniul contextual. Dar cu ajutorul funcției preventDefault blocăm acest lucru. Deci nu se întâmplă nimic.

Desigur, nu numai că putem bloca evenimentul standard, dar putem, de asemenea, să executăm tot felul de coduri atunci când utilizatorul face clic dreapta. Putem apoi să combinăm acest lucru cu preventDefault pentru a oferi propriul nostru meniu contextual, de exemplu:

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

Modul de proiectare al documentului dumneavoastră

Până la cercetarea pentru acest articol acest lucru îmi era complet necunoscut, dar de fapt această caracteristică poate fi foarte practică. O puteți utiliza, de exemplu, pentru un sistem de gestionare a conținutului sau pentru a edita rapid fără cod, pentru a vizualiza eventualele modificări de conținut pe un site web.
Pentru că ceea ce face posibil designMode este că puteți edita tot conținutul unui site web pe care îl privim în browser, fără a fi nevoie să modificați codul HTML din devtools.

Puteți să o încercați chiar acum. Trebuie doar să accesați orice site web, să deschideți consola și să introduceți următoarele:

document.designMode = "on"

Acum puteți edita pur și simplu site-ul web afișat ca și cum ar fi un document Word. Destul de tare, nu-i așa?
Moda de proiectare cunoaște doar două stări: On și Off. Așa că, dacă doriți să-l dezactivați, trebuie doar să faceți următoarele:

document.designMode = "off"

Dacă doriți să protejați elementele individuale de modificarea conținutului, le puteți da următorul atribut: (Atunci puteți doar să le eliminați complet, dar nu să le manipulați)

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

Copiați ceva în clipboardul utilizatorului cu ajutorul codului

Original, binecunoscutul document.execCommand() era destinat acestui scop, dar acesta este considerat acum depreciat.
În schimb, API-ul Clipboard este acum disponibil pentru copierea automată a conținutului folosind JavaScript.
Se poate utiliza prin intermediul obiectului navigator, care este subordonat obiectului window.

Să vedem un exemplu în care, după apăsarea butonului, copiem în clipboard textul introdus în câmpul de introducere a textului:

Obțineți starea documentului

În special pentru dezvoltarea de aplicații web mai complexe și optimizate din punct de vedere al performanței, ar trebui efectuate investigații privind timpul de încărcare &comportamentul general al documentului pentru a găsi potențiale puncte slabe sau pentru a îmbunătăți performanța și UX-ul.

De aceea, cu ajutorul document.readyState putem accesa starea actuală a documentului și să luăm decizii ulterioare pe baza rezultatului.

Iată care sunt rezultatele posibile, document.readyState poate returna:

• uninitialized – Nu a început încă să se încarce
• loading – Se încarcă
• loaded – A fost încărcat
• interactive – S-a încărcat suficient și utilizatorul poate interacționa cu el
• complete – Complet încărcat
  Sursa: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Dacă vă jucați un pic cu ea în practică, există câteva rezultate interesante. Pentru aceasta am creat un mic boilerplate HTML, cu ajutorul căruia afișăm starea în diferite locuri. Fiecare dintre scripturile externe conține pur și simplu console.log(document.readyState)

Iată, în ordine cronologică, ce înregistrează apoi site-ul nostru:

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

Diferitele modalități de includere a scripturilor externe funcționează aici așa cum era de așteptat. Dar este interesant că, dacă includem doar o singură imagine mare în pagină, timpul de încărcare a imaginii va întârzia și evenimentul onload al tag-ului body.

Așa că, în orice caz, starea este „complete”, dacă emitem starea cu evenimentul onload.

Lucrul cu elementul focus / activ

Când vine vorba de elemente cu care utilizatorul site-ului poate interacționa efectiv, cum ar fi butoanele, intrările și zonele de text, acestea pot avea așa-numitul focus. Dacă o intrare are focus, iar noi scriem ceva la tastatură, acest lucru este scris în câmpul de intrare. În cazul în care câmpul nu are focus, nu este scris în câmpul de intrare. Cred că toată lumea știe ce este focusul.

Determinați ce element are focusul

Poate cunoașteți deja atributul onfocus, care este evenimentul când un element primește focusul. Atunci am putea să-l folosim pentru a crea animații CSS interesante sau, dacă vrem să analizăm comportamentul utilizatorului, să salvăm acest eveniment.

În același mod, putem determina ce element are focusul fără a fi nevoie să dăm tuturor elementelor atributul onfocus.
Potem face acest lucru în felul următor:

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

Așa putem obține id-ul elementului care are focusul / este activ.

Schimbarea manuală a focusului

În special în ceea ce privește UX-ul, poate fi util uneori să eliberăm utilizatorul de selectarea elementelor. De exemplu, dacă acesta a făcut o introducere incorectă într-un formular și dorim ca el să-și schimbe introducerea în fiecare câmp de introducere:

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

Citerea stilului curent al unui element

În aplicațiile web mari și dinamice, schimbăm în mod constant stilul activ al oricărui element din DOM.
De asemenea, putem scoate acest lucru la doi pentru orice moment, deci verificați ce atribute și valori CSS au elementele noastre.

1. element.stylepoate fi folosită și pentru a citi stilurile, dar este destinată editării acestora
2. Window.getComputedStyle() este făcută pentru a obține stilizarea curentă

Acum, cu ultima funcție putem obține un obiect întreg cu toate stilurile elementului:

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

Dar putem, de asemenea, să obținem atribute individuale și valorile corespunzătoare mai precis:

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

Lucrând cu dimensiunea browserului & site-ul web afișat

Desigur că nu se poate evita dimensiunile în dezvoltarea web modernă. Iată de ce aveți nevoie:

• window.outerWidth
• window.outerHeight

Cele două returnează dimensiunile ferestrei browserului propriu-zis, deci nu contează dacă pagina web este redusă în dimensiune de către, de exemplu, instrumentele dezvoltatorului.

Așa că, atunci când vine vorba de a determina cu adevărat pe ce dimensiuni este afișată în prezent pagina web, sunt disponibile următoarele funcții:

• window.innerWidth
• window.innerHeight

De exemplu, iată cum ați putea face un element fullscreen:

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

O notă de la JavaScript In Plain English

Am lansat trei noi publicații! Arătați puțină dragoste pentru noile noastre publicații urmărindu-le: AI in Plain English, UX in Plain English, Python in Plain English – vă mulțumim și continuați să învățați!

De asemenea, suntem întotdeauna interesați să ajutăm la promovarea conținutului de calitate. Dacă aveți un articol pe care ați dori să îl trimiteți la oricare dintre publicațiile noastre, trimiteți-ne un e-mail la [email protected] cu numele dvs. de utilizator Medium și vă vom adăuga ca scriitor. De asemenea, anunțați-ne la ce publicație/publicații doriți să fiți adăugați.

.