К содержанию

JavaScriptin Korkeakouluopetus

Dmitri Trepatšovin edistynyt JavaScript-oppaan. Aloittelijoille. Suomen kielellä. Sisältää tehtäviä.

Tyylittäminen

Tyylittely style-attribuutin avulla JavaScriptissä

Mittayksiköt style-attribuutissa JavaScriptissä

Mittayksikkövirheet JavaScriptissä

CSS-ominaisuuksien arvojen purku JavaScriptissä

Tyylien nollaus style:n kautta JavaScriptissä

Tyylien joukkokäsittely JavaScriptissä

Tyylien lukemisen ongelmat JavaScriptissä

CSS-tiedostojen ominaisuuksien lukeminen JavaScriptissä

Luettujen arvojen muuntaminen JavaScriptissä

Tyylittely luokilla JavaScriptissä

Yksi luokka tyylittelyyn JavaScriptissä

Luokkien hankaluus JavaScriptissä

Tyylien vuorottaminen data- attribuutin avulla JavaScriptissä

Elementtien mittarit

Elementtien laajeneminen CSS:ssä JavaScriptille

Testielementti JavaScriptissä

Elementin asiakaskoon koko JavaScriptissä

Elementin koko JavaScriptissä

Elementin vierityskoon mitat JavaScriptissä

Elementtien skrollaus JavaScriptissä

Elementin vierityksen muuttaminen JavaScriptissä

Elementin vieritys loppuun JavaScriptissä

Elementin avaaminen JavaScriptissä

Vierityspalkin leveys JavaScriptissä

Ikkunan mittarit

Ikkunan koot JavaScriptissä

Ikkunan koot huomioiden vierityksen JavaScriptissä

Ikkunan vierityksen hakeminen JavaScriptissä

Ikkunan vierityksen hakeminen ja muuttaminen JavaScriptissä

Menetelmä ikkunan vieritykseen tiettyyn kohtaan JavaScriptissä

Menetelmä ikkunan vieritykseen tietyn määrän JavaScriptissä

Menetelmä ikkunan vieritykselle elementtiin JavaScriptissä

Scroll-tapahtuma JavaScriptissä

Map-kokoelmat

Map-kokoelmat JavaScriptissä

Map-kokoelmien hyödyllisiä ominaisuuksia

Map-kokoelmien läpikäynti silmukalla

Avaimet ja arvot Map-kokoelmissa

Map-kokoelmien käyttö

Set-kokoelmat

Set-kokoelmat JavaScriptissä

Set-kokoelman alustava täyttö JavaScriptissä

Set-kokoelmien hyödyllisiä ominaisuuksia

Set-kokoelmien läpikäynti for-of-silmukalla

Set-kokoelmien muuntaminen

Duplikaattien poistaminen taulukosta Setin avulla

DOM-elementtien hankinta ilman duplikaatteja

Pseudotaulukot

Pseudotaulukot JavaScriptissä

Taulukoiden kaltaisuus JavaScriptissä

Erot JavaScriptin taulukoista

Taulukon tarkistus JavaScriptissä

Muuntaminen taulukoksi JavaScriptissä

JavaScriptin pseudotaulukkotyypit

Ero JavaScriptin pseudotaulukotyyppien välillä

Symbolit

Johdatus Symbol-tyyppiin JavaScriptissä

Symbolin kuvaus JavaScriptissä

Objektien avainsanat symbolit JavaScriptissä

Objektin iterointi symboleilla JavaScriptissä

Funktio oliossa JavaScriptissä

Objektien operaatiot funktioissa JavaScriptissä

Globaalit symbolit JavaScriptissä

Symbolin nimen saanti JavaScriptissä

Hyvin tunnetut symbolit JavaScriptissä

Iteraattorit

Iteroitavat oliot JavaScriptissä

Iteraattorifunktio JavaScriptissä

Iteraattorin kutsut JavaScriptissä

Generaattorit JavaScriptissä

Silmukat generaattoreissa JavaScriptissä

Iteraattorien kertaluontoinen toiminta JavaScriptissä

Objektin iteraattori JavaScriptissä

Iteroitavan olion luominen JavaScriptissä

Generaattori lasketun ominaisuuden kautta JavaScriptissä

JavaScriptin sisäänrakennettu values-iteraattori

JavaScriptin sisäänrakennettu keys-iteraattori

JavaScriptin sisäänrakennettu entries-iteraattori

Kolme JavaScriptin sisäänrakennettua iteraattoria

Spread-operaattori ja iteraattorit JavaScriptissä

JavaScriptin sisäänrakennetut merkkijonojen iteraattorit

Numeron numerotaulukko JavaScriptissä

DOM-elementtien numerointi JavaScriptissä

DOM-elementtien tietojen hakeminen JavaScriptissä

JSON-muoto

Johdatus JSON-muotoon JavaScriptissä

JSONin muuntaminen JavaScriptin tietorakenteeksi

JavaScriptin tietorakenteiden muuntaminen JSON-muotoon

JSON-datan muuttaminen JavaScriptissä

Tallennus

Selaimen paikallinen tallennustila JavaScriptissä

Storage Debuggerissa JavaScriptissä

Tietojen käsittely localStorage:ssa JavaScriptissä

Kertaluonteinen tallentaminen localStorageen JavaScriptissä

Tietojen päivittäminen localStorage-tietovarastossa JavaScriptissä

Tietojen poistaminen localStorage-varastosta JavaScriptissä

Selaimen paikallisen tallennustilan tyhjentäminen JavaScriptissä

Tallenteiden määrä localStorage:ssa JavaScriptissä

Avaimen saaminen numeron perusteella localStorage:ssa JavaScriptissä

Indeksien kautta tapahtuva selaus localStorage-objektissa JavaScriptissä

Avainten ja arvojen taulukot selaimen tallennustilassa JavaScriptissä

Rakenteiden tallentaminen localStorageen JavaScriptissä

Tallennettujen rakenteiden muokkaaminen localStorage:ssa JavaScriptissä

Käytäntöä localStorage:lla JavaScriptissä

Säännölliset lausekkeet

Johdonatus regular expressions -lausekkeisiin JavaScriptissä

Merkkien toistoominaisuudet

Ryhmittävät sulkeet JavaScriptin säännöllisissä lausekkeissa

Erikoismerkkien escapaus JavaScriptin säännöllisissä lausekkeissa

Aaltosulkeet JavaScriptin säännöllisissä lausekkeissa

Säännöllisten lausekkeiden ahneuden rajoittaminen JavaScriptissä

Merkkiryhmät JavaScriptin säännöllisissä lausekkeissa

Merkkijoukot JavaScriptin säännöllisissä lausekkeissa

Merkkijoukon kääntäminen säännöllisissä lausekkeissa

Kyrillisten merkkien erityispiirteet JavaScriptin säännöllisissä lausekkeissa

Erikoismerkit hakasulkeissa JavaScriptissä

Merkkiryhmät joukkojen sisällä JavaScriptin säännöllisissä lausekkeissa

Poikkeukset joukoissa JavaScriptin säännöllisissä lausekkeissa

Hat-symboli joukoissa JavaScriptin säännöllisissä lausekkeissa

Yhdysmerkki joukkojen sisällä JavaScriptin säännöllisissä lausekkeissa

Sivutusmerkkien kokojen ohittaminen JavaScriptin säännöllisissä lausekkeissa

Rivin alku ja loppu JavaScriptin säännöllisissä lausekkeissa

Sanojen rajat JavaScriptin säännöllisissä lausekkeissa

Monirivien toiminta JavaScriptin säännöllisissä lausekkeissa

'Tai'-komento JavaScriptin säännöllisissä lausekkeissa

Muuttuja säännöllisellä lausekkeella JavaScriptissä

Test-metodi JavaScriptin säännöllisissä lausekkeissa

search-metodi JavaScriptin säännöllisissä lausekkeissa

Split-metodi JavaScriptin säännöllisissä lausekkeissa

match-metodi JavaScriptin säännöllisissä lausekkeissa

Taskumat match-metodissa JavaScriptin säännöllisissä lausekkeissa

Globaali match JavaScriptin säännöllisissä lausekkeissa

Globaali matchAll JavaScriptin säännöllisissä lausekkeissa

Exec-metodi JavaScriptin säännöllisissä lausekkeissa

lastIndex-ominaisuus JavaScriptin säännöllisissä lausekkeissa

Taskut replace-metodissa JavaScriptin säännöllisissä lausekkeissa

Callback replace-metodissa JavaScriptin säännöllisissä lausekkeissa

Oletuskapselit replace-metodissa JavaScriptin säännöllisissä lausekkeissa

Taskut säännöllisessä lausekkeessa JavaScriptissä

Nimetyt taskut JavaScriptin säännöllisissä lausekkeissa

Nimettyjen ryhmien käyttö JavaScriptin säännöllisissä lausekkeissa

Ei-tallentavat sulkeet JavaScriptin säännöllisissä lausekkeissa

Positiivinen ja negatiivinen etsintä JavaScriptin säännöllisissä lausekkeissa

Säännöllisen lausekkeen merkkijono JavaScriptissä

Merkkijonojen säännöllisten lausekkeiden liput JavaScriptissä

Käänteinen viiva JavaScriptin säännöllisten lausekkeiden merkkijonoissa

Poikkeustilanteet

Poikkeustilanteet JavaScriptissä – johdanto

JavaScriptissä esiintyvät tilannetyypit

Poikkeusten sieppaus JavaScriptissä

Kehitystyö try-catch:n avulla JavaScriptissä

Poikkeusten sieppaus sisäkkäisessä koodissa JavaScriptissä

Virheolio JavaScriptissä

JavaScriptin pääpoikkeustyypit

Poikkeustyyppien käyttö JavaScriptissä

Poikkeusten heittäminen JavaScriptissä

Eri tyyppisten poikkeusten heittäminen JavaScriptissä

Oman poikkeustyyppien heittäminen JavaScriptissä

Esimerkki poikkeuksista data-attribuuteissa JavaScriptissä

Esimerkki poikkeuksesta JSON:lla JavaScriptissä

Poikkeusten heittäminen eteenpäin JavaScriptissä

Asynkronisuus

Synkroninen ja asynkroninen koodi JavaScriptissä

Tapahtumamallin asynkronisuus JavaScriptissä

Kuvien asynkroninen lataaminen JavaScriptissä

Poikkeukset asynkronisessa koodissa JavaScriptissä

Asynkroniset takaisinkutsut

Asynkroninen koodi takaisinkutsuilla JavaScriptissä

Asynkronisen tuloksen välittäminen takaisinkutsussa JavaScriptissä

Parametrien välittäminen asynkroniseen takaisinkutsufunktioon JavaScriptissä

Poikkeukset asynkronisissa takaisinkutsuissa JavaScriptissä

Kuvien lataaminen asynkronisilla takaisinkutsuilla JavaScriptissä

Callback hell -ongelman JavaScriptissä

Kuvien asynkroninen lataus silmukassa JavaScriptissä

Promiset

Johdatus Promiseihin JavaScriptissä

Poikkeustilanteet promisseissa JavaScriptissä

Virheobjektin lupaus JavaScriptissä

Poikkeusten erillinen kaappaus promisseissa JavaScriptissä

Promisen tilat JavaScriptissä

Promise ketjut JavaScriptissä

Promiset ketjun sisällä JavaScriptissä

Poikkeukset promise-ketjuissa JavaScriptissä

Promise-taulukoiden käsittely JavaScriptissä

Suoritettujen promisejen luominen JavaScriptissä

Asynkronisen koodin promisifiointi JavaScriptissä

Promise hell -ongelman JavaScriptissä

Promiset synkronisessa tyylissä JavaScriptissä

Poikkeukset synkronisessa tyylissä JavaScriptissä

Kirjastot

Kirjastot JavaScriptissä

Kirjastojen käyttö JavaScriptissä

CDN-kirjastot JavaScriptissä

JavaScript-kirjastojen haitat

Työkalut

Semanttinen versionointi JavaScriptissä

JavaScript-terminaalin perusteet

Johdatus NodeJS-työkaluun

Johdatus npm:ään JavaScriptissä

Kirjastojen asentaminen npm:n kautta JavaScriptissä

Lyhyt muoto asennukselle npm:n kautta JavaScriptissä

Riippuvuudet package.json-tiedostossa JavaScriptissä

Dev-riippuvuudet npm:ssä JavaScriptissä

Versiointimuodot npm-riippuvuuksissa JavaScriptissä

package.json-tiedoston asetukset JavaScriptissä

package.json-tiedoston luominen JavaScriptissä

npm-projektin siirtäminen JavaScriptissä

package-lock.json-tiedosto npm:ssä JavaScriptissa

Pakettien päivittäminen npm:n kautta JavaScriptissä

Pakettien poistaminen npm:n kautta JavaScriptissä

Globaali asennus npm:n kautta JavaScriptissä

Pakettien globaali poistaminen npm:n kautta JavaScriptissä

npx-työkalu JavaScriptissä

Skriptien suorittaminen npm:n kautta JavaScriptissä

Yarn-paketinhallinta JavaScriptissä

ES-moduulit

Johdatus nykyaikaisiin moduuleihin JavaScriptissä

ES-moduulien ottaminen käyttöön JavaScriptissä

Webpack-kokoajan asentaminen JavaScriptissä

Webpack-kokoajan toimintaperiaate JavaScriptissä

JavaScriptin Webpack-kokoajan määrittäminen

Webpackin käännöksen käynnistämisen määrittäminen JavaScriptissä

Testausbuildaus Webpackin avulla JavaScriptissä

JavaScript-bundelin yhdistäminen HTML:ään

ES-moduulin luominen JavaScriptissä

ES-moduulin liittäminen JavaScriptissä

Nimeäminen uudelleen tuonnissa JavaScriptissä

Moduulin koko sisällön tuonti JavaScriptissä

Oletusvienti JavaScriptissä

Eksporttien yhdistäminen JavaScriptissä

Kaiken sisällön tuonti eksporttien yhdistelmässä JavaScriptissä

Arvojen vieminen ES-moduuleista JavaScriptissä

Arvot vakioina ES-moduuleissa JavaScriptissä

NPM-moduulien tuonti JavaScriptissä

ES-moduulien dynaaminen tuonti JavaScriptissä

Dynaaminen moninkertainen import JavaScriptissä

CommonJS-moduulien muuntaminen ES-moduuleiksi JavaScriptissä

HTTP-protokolla

HTTP-protokolla JavaScriptissä

URLSearchParams-työskentely JavaScriptissä

URL:n käsittely JavaScriptissä

Testauspalvelin

Testiserver JavaScriptillä

Testiserverin käyttö JavaScriptissä

JavaScript-testipalvelimen koodin suorittaminen

HTML:n generointi testipalvelimen kautta JavaScriptillä

Vastauksen otsakkeet testipalvelimessa JavaScriptillä

Testiserverin portin määrittäminen JavaScriptillä

Useita testauspalvelimia JavaScriptissä

Lomakkeet

Lomakkeiden lähettäminen JavaScriptissä

Lomakkeiden lähettämismenetelmät JavaScriptissä

Lomakkeiden lähettäminen GET-metodilla JavaScriptissä

Lomakkeiden lähettäminen POST-metodilla JavaScriptissä

GET-pyynnöt JavaScriptissä

GET-pyyntöjen käyttö JavaScriptissä

Lomakkeen painikkeet JavaScriptissä

Lomakkeen lähettäminen JavaScriptin avulla

Lomakkeen lähetyksen estäminen JavaScriptissä

FormDatan käyttö JavaScriptissä

FormDatan menetelmät JavaScriptissä

Iteroijat FormDatassa JavaScriptissä

AJAX

AJAX:een johdanto

Fetchin perusteet AJAX:ssa

HTTP-vastauskoodi AJAX-pyynnössä JavaScriptissä

AJAX-pyynnön onnistuminen JavaScriptissä

Poikkeukselliset tilanteet AJAX-pyynnöissä JavaScriptissä

AJAX-virheiden täydellinen sieppaus JavaScriptissä

HTTP-vastauksen otsakkeet AJAX:ssa JavaScriptissä

JSON:n hankinta AJAX:n kautta JavaScriptissä

HTTP-pyynnön otsakkeet AJAX:n kautta JavaScriptissä

GET-pyyntöjen lähettäminen AJAXin kautta JavaScriptissä

POST-pyyntöjen lähettäminen AJAXin kautta JavaScriptissä

Tietojen lähettäminen AJAXin kautta käyttäen URLSearchParamsia JavaScriptissä

Tietojen lähettäminen AJAX:in kautta FormDatan avulla JavaScriptissä

Lomakkeen lähetys AJAX:lla käyttäen FormDataa JavaScriptissä

JSON:n lähettäminen palvelimelle AJAX:in avulla JavaScriptissä

CORS-käytäntö AJAX-pyynnöissä JavaScriptissä

Evästeiden välittäminen AJAX-pyynnöissä JavaScriptissä

Synkroninen fetch-tyyli JavaScriptissä

Kankaan kanssa työskentely

Aloittaminen canvasin kanssa JavaScriptissä

Viivojen piirtäminen canvasin avulla JavaScriptillä

Suorakulmioiden piirtäminen canvasin avulla JavaScriptillä

Ympyröiden piirtäminen canvasin avulla JavaScriptissä

Viivan värin vaihtaminen canvas:ssa JavaScriptillä

Viivan paksuuden muuttaminen canvas:ssa JavaScriptillä

Silmukat canvas:ssa JavaScriptillä

Koodin optimointi

Sivuston latausnopeuteen vaikuttavat tekijät JavaScriptissä

Saatavilla olevat resurssit JavaScriptissä

Toistuvien operaatioiden optimointi JavaScriptissä

Raskaiden operaatioiden toiston optimointi JavaScriptissä

Silmukkaoperaatioiden optimointi JavaScriptissä

JavaScript-silmukoiden turhien kierrosten optimointi

Optimointi sisäänrakennetuilla funktioilla JavaScriptissä

Optimaalisen algoritmin valinta JavaScriptissä

Säännöllisten lausekkeiden optimointi JavaScriptissä

DOM-operaatioiden optimointi JavaScriptissä

Muistin käytön optimointi JavaScriptissä

Muunnoksen optimointi taulukoksi JavaScriptissä

Tapahtumankäsittelijöiden optimointi JavaScriptissä

Nopeuden optimointi muistin kustannuksella JavaScriptissä

Tiedot

Tiedon muuttumattomuus JavaScriptissä

Taulukoiden kopiot JavaScriptissä

Objektien kopiot JavaScriptissä

Immutaabelinen elementtien lisääminen taulukkoon JavaScriptissä

Immutaabelinen elementtien poistaminen taulukosta JavaScriptissä

Immutaabelinen taulukon elementtien muuttaminen JavaScriptissä

Olioiden taulukko id:llä JavaScriptissä

Satunnaisen ID:n generointi JavaScriptissä

Elementin lisääminen id:llä JavaScriptissä

Elementin poistaminen id:n perusteella JavaScriptissä

Elementin muuttaminen id:n perusteella JavaScriptissä

Yhden ominaisuuden muuttaminen id:n perusteella JavaScriptissä

Elementin hankinta id:n perusteella JavaScriptissä