TESTING AREA for teachers - real service at plus.tuni.fi
Chat as an Exercise¶
JavaScript-alkajaisina tarkastellaan, miten skripteja ajetaan selaimessa. Toisin kuin linearinen, synkroninen koodi, JavaScript on tapahtumapohjainen ja asynkroninen, ja se käyttää Event Loop -mekanismia pitääkseen pääsäikeen vapaana.
Loupe - tapahtumakäsittelyn visualisointi¶
Käytä Loupe-visualisointityökalua ja tutki, miten pino, tehtäväjono ja Event Loop toimivat yhdessä.
JS-pääohjelma: Resepti, jota kokki seuraa.
Paistinpannu: Kutsupino (call stack).
Mikroaaltouuni: Web-rajapinnat (Web APIs, esim. timer, fetch, events).
Tarjotin pöydällä: Tehtäväjono (task queue, myös callback queue).
Etsi yhtäläisyydet Loupe-visualisoinnin kanssa, mikähän on kokin rooli?
1. Event listenerit¶
Koodia ei suoriteta lineaarisesti. Sen sijaan JavaScript odottaa käyttäjän toimintoja (klikkauksia, näppäinpainalluksia, eli tapahtumia, eventtejä). Koodi voidaan asettaa kuuntelemaan haluttuja tapahtumia event listenereiden eli tapahtumakuuntelijoiden avulla, jolloin tietty funktio (callback, siis event handler) suoritetaan, mikäli käyttäjä esimerkiksi klikkaa jotain elementtiä, tavallisimmin painiketta.
const button = document.getElementById('myButton');
// Simple event handler
button.addEventListener('click', () => console.log('Clicked!'));
// OR: event handler that schedules a timer
button.addEventListener('click', function onClick() {
setTimeout(() => console.log('Clicked!'), 2000);
});
2. Selaimen Web APIt JavaScriptin apuna¶
Koska JavaScript on yksisäikeinen, suoritus pysyy kevyenä ja järjestelmä responsiivisena silloin, kun hitaammat tehtävät voidaan siirtää pois varsinaisesta suorituspinosta.
Tällaisia tehtäviä ovat esimerkiksi ajastimet, fetch-kutsut ja DOM-tapahtumat. Ne hoidetaan selaimen taustapalveluissa eli niin sanotuissa Web API -toiminnoissa. Suorituksen kulku:
Call Stack → Web APIs → Task Queue → Event Loop → takaisin Call Stackiin
Kun taustalla suoritettava tehtävä valmistuu, esimerkiksi ajastin tikittää loppuun, sen callback-funktio siirretään task queue -jonoon odottamaan, että call stack (kutsupino) tyhjenee. Kun kutsupino on tyhjä, event loop siirtää jonosta seuraavan tehtävän takaisin call stackiin suoritettavaksi. JavaScript itse suorittaa siis vain kutsupinossa olevia komentoja.
Monet selaimen toiminnot, kuten event listenerit ja esimerkiksi setTimeout, perustuvat juuri näihin Web API -taustapalveluihin.
3. setTimeout-paradoksi¶
Vaikka viive olisi 0ms, setTimeout toimii asynkronisesti:
console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");
// Tulos: A, C, B
A ja C: Suoritetaan kutsujärjestyksessä kutsupinossa.
B: Siirretään Web API -rajapinnalle. Kun ajastin päättyy, se siirtyy callback queue -jonoon.
Event Loop: Siirtää B-kutsun pinolle vasta kun pääohjelma on käsitelty.
AI-Kiran kyselee seuraavaksi sinulta, miten JavaScriptin tapahtumasilmukka toimii, ja pyytää sinua selittämään asynkronisen suorituksen yksityiskohtia.
A+ esittää tässä kohdassa tehtävän palautuslomakkeen.