Vanilla JavaScript

>

Dokumentti- ja ikkuna-objekti ovat kaksi emo-objektia, joita voimme käyttää JavaScriptillä. Itse document-objekti on window-objektin alainen. Luulen, että kaikki tuntevat ne, koska ne ovat kaikkialla läsnä erityisesti kehitettäessä verkkosovelluksia vanilla javascriptillä.

Tässä artikkelissa pyritään esittelemään joitakin molempien käytännön ominaisuuksia. Tarkempaa esittelyä siitä, mitä nämä kaksi tarkalleen ottaen ovat, ei tarvita, vaan annan nyt muutamia käytännön esimerkkejä, joita voit käyttää ilman suurempia ennakkotietoja.

Kontekstivalikko on DOM-tapahtuma, joka käynnistyy, kun käyttäjä klikkaa hiiren kakkospainikkeella DOM-elementtiä, jota kontekstivalikko haluaa kutsua. Kontekstivalikko on yksinkertaisesti valikko, joka näytetään oletusarvoisesti, kun käyttäjä klikkaa hiiren kakkospainikkeella verkkosivua, ellei verkkosivu käsittele tapahtumaa toisin, kuten teemme hetken kuluttua. Vaikka nimeä ei siis välttämättä tunneta, pieni valikko näyttää erilaiselta käyttöjärjestelmästä riippuen ja tarjoaa asioita kuten ”tallenna kuva nimellä”, ”tutki”, ”lataa uudelleen” & ”takaisin”.
Periaatteessa voimme käyttää contextmenu-tapahtumaa DOM:ssä suorittaaksemme oman toimintomme, kun käyttäjä klikkaa hiiren oikealla painikkeella.

Oikea klikkaus ja oletuskontekstivalikon näytön estäminen

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

Sovitamme siis EventListenerin <div:llemme>, joka pitäisi suorittaa, kun kontekstivalikkoa kutsutaan eli oikealla klikkauksella. Se palauttaa tapahtuman, jonka voimme estää vakiofunktiolla preventDefault.

Vakiotapaus olisi kuten kontekstivalikon klikkaaminen hiiren oikealla painikkeella. Mutta preventDefaultilla estämme sen. Joten mitään ei tapahdu.

Emme tietenkään voi estää vain vakiotapahtumaa, vaan voimme myös suorittaa kaikenlaista koodia, kun käyttäjä klikkaa hiiren kakkospainiketta. Voimme sitten yhdistää tämän preventDefaultin kanssa tarjotaksemme oman kontekstivalikkomme, esimerkiksi:

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

Dokumenttisi suunnittelutila

Tämän artikkelin tutkimiseen asti tämä oli minulle täysin tuntematon, mutta itse asiassa tämä ominaisuus voi olla hyvin käytännöllinen. Voit käyttää sitä esimerkiksi sisällönhallintajärjestelmässä tai nopeaan muokkaamiseen ilman koodia, jotta voit visualisoida mahdollisia sisältömuutoksia verkkosivustolla.
Koska designMode mahdollistaa sen, että voit muokata kaikkea verkkosivuston sisältöä, jota katsomme selaimessa, ilman että sinun tarvitsee muuttaa devtoolsin HTML-koodia.

Voit kokeilla sitä heti. Mene mille tahansa verkkosivustolle, avaa konsoli ja kirjoita seuraava:

document.designMode = "on"

Nyt voit yksinkertaisesti muokata näytettävää verkkosivustoa kuin se olisi Word-dokumentti. Aika siistiä, vai mitä?
DesignMode tuntee vain kaksi tilaa: On ja off. Jos siis haluat poistaa sen käytöstä, tee vain seuraavaa:

document.designMode = "off"

Jos haluat suojata yksittäisiä elementtejä sisällön muuttamiselta, voit antaa niille seuraavan attribuutin: (Silloin voit vain poistaa ne kokonaan, mutta et voi manipuloida niitä)

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

Kopioi jotain käyttäjän leikepöydälle koodilla

Alun perin tunnettu document.execCommand() oli tarkoitettu tähän tarkoitukseen, mutta sitä pidetään nykyään vanhentuneena.
Sen sijaan Clipboard API on nyt käytettävissä sisällön automaattiseen kopiointiin JavaScriptin avulla.
Sitä voidaan käyttää navigator-olion kautta, joka on alisteinen window-oliolle.

Katsotaanpa esimerkki, jossa painikkeen painamisen jälkeen kopioidaan syöttökenttään syötetty teksti leikepöydälle:

Dokumentin tilan selvittäminen

Erityisesti monimutkaisempien ja suorituskyvyltään optimoitujen web-sovellusten kehityksessä on syytä tehdä tutkimuksia dokumentin latausajasta & yleisestä käyttäytymisestä mahdollisten heikkojen kohtien löytämiseksi tai suorituskyvyn ja UX:n parantamiseksi.

Siten document.readyState:n avulla pääsemme käsiksi dokumentin tämänhetkiseen tilaan ja voimme tehdä jatkopäätöksiä tuloksen perusteella.

Tässä ovat mahdolliset tulokset, document.readyState voi palauttaa:

• uninitialized – Ei ole vielä aloittanut lataamista
• loading – Latautuu
• loaded – On ladattu
• interactive – On ladattu tarpeeksi ja käyttäjä voi olla vuorovaikutuksessa sen kanssa
• complete – Täysin ladattu
  Lähde: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Jos leikitellään sillä hieman käytännössä, saadaan mielenkiintoisia tuloksia. Tätä varten loin pienen HTML boilerplaten, jolla tulostetaan tila eri paikoissa. Jokainen ulkoinen skripti sisältää yksinkertaisesti console.log(document.readyState)

Tässä on kronologisessa järjestyksessä se, mitä sivustomme sitten kirjaa:

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

Erilaiset tavat sisällyttää ulkoiset skriptit toimivat tässä odotetusti. Mielenkiintoista on kuitenkin se, että jos sisällytämme sivulle vain yhden ison kuvan, kuvan latausaika viivästyttää myös body-tagin onload-tapahtumaa.

Tila on siis joka tapauksessa ”complete”, jos tulostamme tilan onload-tapahtumalla.

Työskentely fokuksen / aktiivisen elementin kanssa

Kun kyse on elementeistä, joiden kanssa nettisivun käyttäjä voi oikeasti olla vuorovaikutuksessa, kuten esimerkiksi painikkeista, syötteistä ja tekstikentistä, näillä voi olla niin sanottu focus. Jos syötteellä on fokus, ja kirjoitamme jotain näppäimistölle, se kirjoitetaan syöttökenttään. Jos kentällä ei ole fokusta, sitä ei kirjoiteta syöttökenttään. Luulen, että kaikki tietävät, mitä fokus on.

Määritä, millä elementillä on fokus

Mahdollisesti tunnet jo onfocus -attribuutin, joka on tapahtuma, kun elementti saa fokuksen. Silloin voisimme käyttää sitä luodaksemme hienoja CSS-animaatioita tai, jos haluamme analysoida käyttäjän käyttäytymistä, tallentaa tämän tapahtuman.

Samalla tavalla voimme määrittää, millä elementillä on fokus ilman, että meidän tarvitsee antaa kaikille elementeille onfocus -attribuutti.
Voimme tehdä tämän seuraavalla tavalla:

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

Siten saamme sen elementin id:n, jolla on fokus / joka on aktiivinen.

Fokuksen vaihtaminen manuaalisesti

Erityisesti UX:n kannalta voi joskus olla hyödyllistä vapauttaa käyttäjä elementtien valinnasta. Esimerkiksi jos hän on tehnyt virheellisen syötteen yhdessä lomakkeessa, ja haluamme, että hän muuttaa syötteensä jokaiseen syöttökenttään:

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

Elementin nykyisen muotoilun lukeminen

Suurissa ja dynaamisissa web-sovelluksissa muutamme jatkuvasti minkä tahansa elementin aktiivista muotoilua DOM:ssä.
Voimme myös tulostaa tämän kahdelle milloin tahansa, joten tarkista, mitkä CSS-attribuutit ja -arvot elementeissämme on.

1. element.stylevoidaan myös lukea tyylejä, mutta on tarkoitettu niiden muokkaamiseen
2. Window.getComputedStyle() on tehty nykyisen muotoilun saamiseksi

Viimeisellä funktiolla saamme siis kokonaisen objektin, jossa on elementin kaikki tyylit:

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

Mutta voimme myös tulostaa yksittäisiä attribuutteja ja niitä vastaavia arvoja tarkemmin:

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

Työskentelemällä selaimen koon & kanssa näytetty sivusto

Nykyaikaisessa web-kehityksessä ei tietenkään voi kiertää kokoja. Tässä tarvitaan:

• window.outerWidth
• window.outerHeight

Kaksi palauttavat itse selainikkunan mitat, joten ei ole väliä, onko verkkosivua pienennetty esim. kehittäjän työkaluilla.

Kun siis halutaan oikeasti määritellä, millä mitoilla verkkosivu tällä hetkellä näytetään, käytettävissä ovat seuraavat toiminnot:

• window.innerWidth
• window.innerHeight

Elementin voi tehdä esimerkiksi näin koko ruudun kokoiseksi:

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

Muistiinpanoja kirjasta JavaScript In Plain English

Meiltä on ilmestynyt kolme uutta julkaisua! Osoita rakkautta uusille julkaisuillemme seuraamalla niitä: AI in Plain English, UX in Plain English, Python in Plain English – kiitos ja jatkakaa oppimista!

Olemme myös aina kiinnostuneita auttamaan laadukkaan sisällön edistämisessä. Jos sinulla on artikkeli, jonka haluaisit lähettää johonkin julkaisuistamme, lähetä meille sähköpostia osoitteeseen [email protected] ja Medium-käyttäjätunnuksesi, niin lisäämme sinut kirjoittajaksi. Kerro myös, mihin julkaisuun/julkaisuihin haluat tulla lisätyksi.