Compare revisions

- Here the individual chunks of text will be pasted. this debug approach has been quite good. 

#### Course

#### Site

#### Course

# JavaScript in Web browsers¶

So far we have been in static era of web pages: browsers download the HTML page, parse and then render it. To modify the page, we must request a new one from the server and do the download-parse-render all over again. All the modifications to the web page happen on server-side and require reloading the whole page every time: browser has no control over the DOM tree. This is slow and breaks user experience in many cases. For example when filling in forms, it would be great if the form could warn when a required field of the form is empty or there are some other errors before we send it back to the server. Obviously the server would still have to do the checks in trusted environment but a small warning beforehand would be great for user experience.

- Currently, if the script generates multiple variations, only the newest variation is saved in the debug translation chunk.

Cut to the present day and for everyone’s surprise this is now possible thanks to the wonders of JavaScript! JavaScript files can be sent to be executed by the browsers and they are able to make changes to the web pages dynamically in the client-side.

 No newline at end of file

## Running JavaScript in browser¶

 No newline at end of file

The translation of the first chunk appears here!

#### Kurssi

 No newline at end of file

#### Sivusto

#### Kurssi

# JavaScript selaimissa¶

Tähän asti olemme olleet verkkosivujen staattisessa aikakaudessa: selaimet lataavat HTML-sivun, jäsentävät sen ja sitten renderöivät sen. Sivun muokkaamiseksi meidän on pyydettävä uusi sivu palvelimelta ja tehtävä lataus-jäsennys-renderöinti uudelleen. Kaikki muutokset verkkosivulla tapahtuvat palvelimen puolella ja vaativat koko sivun uudelleenlataamisen joka kerta: selaimella ei ole hallintaa DOM-puun yli. Tämä on hidasta ja katkaisee käyttäjäkokemuksen monissa tapauksissa. Esimerkiksi lomakkeiden täyttämisessä olisi hienoa, jos lomake voisi varoittaa, kun lomakkeen vaadittu kenttä on tyhjä tai siinä on joitakin muita virheitä ennen kuin lähetämme sen takaisin palvelimelle. Ilmeisesti palvelimen olisi edelleen tehtävä tarkistukset luotetussa ympäristössä, mutta pieni varoitus etukäteen olisi hienoa käyttäjäkokemuksen kannalta.

Nykyään, yllätykseksemme, tämä on mahdollista JavaScriptin ihmeiden ansiosta! JavaScript-tiedostot voidaan lähettää selaimen suoritettaviksi ja ne pystyvät tekemään muutoksia verkkosivuihin dynaamisesti asiakaspuolella.

## JavaScriptin suorittaminen selaimessa¶

 No newline at end of file

Originally JavaScript was made to be run only in browsers. Node.js that we have been using to run JavaScript so far, is relatively new: Node.js was first released in 2009, which is a while ago but not that much compared to 1995 when JavaScript was introduced by Netscape for Netscape Navigator, a popular browser at the time. The idea was to add scripting support to allow dynamic behaivour (ie. possibility to modify web documents by client-side scripting). To run JavaScript in a browser, it must be either saved into a file and referenced in a specific way in an HTML document, or alternatively, the code can be written directly to the JavaScript REPL Console included in the Developer tools.

### Developer tools¶

No matter the browser you are using, be it Chrome or Firefox, they all include something called Developer Tools. You may find them by navigating the respective menus of the browsers, but most certainly pressing F12 will land you with the correct window. The developer tools contain a lot of features. But the “Console” view is what we are after currently.

Console works the same way as the Node.js REPL. You are able to write and execute plain JavaScript from the console straight on. You may try entering the following into the console:

```console.log("Hello world!")

 ```

 No newline at end of file

Alun perin JavaScript oli tehty suoritettavaksi vain selaimissa. Node.js, jota olemme käyttäneet JavaScriptin suorittamiseen tähän asti, on suhteellisen uusi: Node.js julkaistiin ensimmäisen kerran vuonna 2009, mikä on jonkin aikaa sitten, mutta ei niin paljon verrattuna vuoteen 1995, jolloin JavaScript esiteltiin Netscapen toimesta Netscape Navigatorille, joka oli suosittu selain tuolloin. Ajatuksena oli lisätä skriptituki, joka mahdollistaisi dynaamisen käyttäytymisen (ts. mahdollisuuden muokata verkkodokumentteja asiakaspuolella). JavaScriptin suorittaminen selaimessa edellyttää, että se on tallennettu tiedostoon ja viitattu tietyllä tavalla HTML-dokumentissa, tai vaihtoehtoisesti koodi voidaan kirjoittaa suoraan Kehittäjätyökaluihin sisältyvään JavaScript REPL -konsoliin.

### Kehittäjätyökalut¶

Riippumatta siitä, mitä selainta käytät, olipa se Chrome tai Firefox, ne kaikki sisältävät jotakin, jota kutsutaan kehittäjätyökaluiksi. Löydät ne navigoimalla selaimen omien valikoiden kautta, mutta melko varmasti F12-näppäimen painaminen avaa oikean ikkunan. Kehittäjätyökaluissa on paljon ominaisuuksia. Mutta tällä hetkellä meitä kiinnostaa "Konsoli"-näkymä.

Konsoli toimii samalla tavalla kuin Node.js REPL. Voit kirjoittaa ja suorittaa tavallista JavaScriptiä suoraan konsolissa. Voit kokeilla seuraavan kirjoittamista konsoliin:

```console.log("Hei maailma!")

 ```

 No newline at end of file

The console should print Hello world and also undefined meaning that the console.log function did not return anything (as printing is a side effect, not a return value).

Depending on where you are running the console, it may already contain some output and other text. This is because the web page that you currently are in, might have, and most likely has, already executed JavaScript.

Now let’s test whether you are able to open up the console in your browser and run a command on it. Points will be granted when the exercise has been successfully completed. For techical reasons, to be able to call the requested function, you must make sure to run the command in context of “console_command”, NOT in context of top. This is because the exercise is considered a “separate site” from this main course material and the requested function is only available in the exercise site.

Shortly put, check that the correct selection is made in your browser. Use the pictures below to determine where to change the settings

In Chrome:

and in Firefox:

### Running JavaScript files in browser¶

 No newline at end of file

Konsolin pitäisi tulostaa "Hei maailma" ja myös "undefined", mikä tarkoittaa, että console.log-funktio ei palauttanut mitään (tulostus on sivuvaikutus, ei palautusarvo).

Riippuen siitä, missä suoritat konsolin, se saattaa jo sisältää jonkin verran tulostetta ja muuta tekstiä. Tämä johtuu siitä, että verkkosivu, jolla olet parhaillaan, saattaa jo olla suorittanut JavaScriptiä.

Kokeillaan nyt, pystytkö avaamaan konsolin selaimessasi ja suorittamaan komennon siinä. Pisteitä myönnetään, kun tehtävä on suoritettu onnistuneesti. Teknisistä syistä, jotta voit kutsua pyydettyä funktiota, sinun on varmistettava, että suoritat komennon "console_command" kontekstissa, EI "top" kontekstissa. Tämä johtuu siitä, että tehtävää pidetään "erillisenä sivustona" tästä pääkurssimateriaalista ja pyydetty funktio on saatavilla vain tehtävässivustolla.

Lyhyesti sanottuna, tarkista, että oikea valinta on tehty selaimessasi. Käytä alla olevia kuvia määrittääksesi, mistä asetuksia muutetaan

Chromessa:

ja Firefoxissa:

### JavaScript-tiedostojen suorittaminen selaimessa¶

 No newline at end of file

Now that we know how to use JavaScript interpreter directly in browsers by using the developer tools and the included console, we can next try to run JavaScript saved into a file. There is one problem though: browsers do not generally run JavaScript files directly, thus we cannot simply “open” JavaScript file with a browser and except it to run. For the browser to actually run JavaScript, it must be referenced by an HTML document.

Knowing this, we can simply create a “dummy” HTML document (that browsers can open) where we include our JavaScript file(s). A script can be included by using a script tag as follows:

```<!DOCTYPE html>

<html lang=en>

    <head>

        <title>Test page for JS</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>This is a test page to test your JavaScript code. Press F12 to open Developer Tools or refer to the documentation of your browser.</p>

    </body>

</html>

 ```

The script tag can be used to either contain the JavaScript code directly or have a source reference attribute (src) to the JavaScript file. We have ended up using the source reference since it is a lot more clear to have the JavaScript code contained in its own file than inside an HTML document.

You may now copy the code above into a file called index.html and then create an empty file myScript.js (case sensitive) into the same folder. Edit the myScript.js so that it contains the following piece of code:

Nyt kun tiedämme, miten käyttää JavaScript-tulkkia suoraan selaimissa käyttämällä kehittäjätyökaluja ja sisällytettyä konsolia, voimme seuraavaksi yrittää suorittaa JavaScriptiä, joka on tallennettu tiedostoon. On kuitenkin yksi ongelma: selaimet eivät yleensä suorita JavaScript-tiedostoja suoraan, joten emme voi yksinkertaisesti "avata" JavaScript-tiedostoa selaimella ja odottaa sen suorittavan. Jotta selain todella suorittaisi JavaScriptin, sen on oltava viitattu HTML-dokumentissa.

Tämän tietäen voimme yksinkertaisesti luoda "keinotekoisen" HTML-dokumentin (jonka selaimet voivat avata), jossa sisällytämme JavaScript-tiedostomme. Skripti voidaan sisällyttää käyttämällä script-tagia seuraavasti:

```<!DOCTYPE html>

<html lang=fi>

    <head>

        <title>Testisivu JS:lle</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>Tämä on testisivu JavaScript-koodisi testaamiseen. Paina F12 avataksesi kehittäjätyökalut tai katso selaimen dokumentaatiosta.</p>

    </body>

</html>

 ```

Script-tagia voidaan käyttää joko sisältämään JavaScript-koodi suoraan tai sisältämään lähdereferenssiattribuutti (src) JavaScript-tiedostoon. Olemme päätyneet käyttämään lähdereferenssiä, koska on paljon selkeämpää, että JavaScript-koodi on omassa tiedostossaan kuin HTML-dokumentissa.

Voit nyt kopioida yllä olevan koodin tiedostoon nimeltä index.html ja luoda sitten tyhjän tiedoston myScript.js (kirjainkoolla on väliä) samaan kansioon. Muokkaa myScript.js-tiedostoa niin, että se sisältää seuraavan koodinpätkän:

 No newline at end of file

```// I a

VM5677 Script snippet #1:1 undefined

Script snippet #1:40 v1.18.0

#### Course

#### Site

#### Course

# JavaScript in Web browsers¶

So far we have been in static era of web pages: browsers download the HTML page, parse and then render it. To modify the page, we must request a new one from the server and do the download-parse-render all over again. All the modifications to the web page happen on server-side and require reloading the whole page every time: browser has no control over the DOM tree. This is slow and breaks user experience in many cases. For example when filling in forms, it would be great if the form could warn when a required field of the form is empty or there are some other errors before we send it back to the server. Obviously the server would still have to do the checks in trusted environment but a small warning beforehand would be great for user experience.

Cut to the present day and for everyone’s surprise this is now possible thanks to the wonders of JavaScript! JavaScript files can be sent to be executed by the browsers and they are able to make changes to the web pages dynamically in the client-side.

## Running JavaScript in browser¶

 No newline at end of file

```// Minä olen

VM5677 Script snippet #1:1 undefined

Script snippet #1:40 v1.18.0

#### Kurssi

#### Sivusto

#### Kurssi

# JavaScript selaimissa¶

Tähän asti olemme olleet verkkosivujen staattisessa aikakaudessa: selaimet lataavat HTML-sivun, jäsentävät sen ja sitten renderöivät sen. Sivun muokkaamiseksi meidän on pyydettävä uusi sivu palvelimelta ja tehtävä lataus-jäsennys-renderöinti uudelleen. Kaikki muutokset verkkosivulla tapahtuvat palvelimen puolella ja vaativat koko sivun uudelleenlataamisen joka kerta: selaimella ei ole hallintaa DOM-puun yli. Tämä on hidasta ja katkaisee käyttäjäkokemuksen monissa tapauksissa. Esimerkiksi lomakkeiden täyttämisessä olisi hienoa, jos lomake voisi varoittaa, kun lomakkeen vaadittu kenttä on tyhjä tai siinä on joitakin muita virheitä ennen kuin lähetämme sen takaisin palvelimelle. Ilmeisesti palvelimen olisi edelleen tehtävä tarkistukset luotetussa ympäristössä, mutta pieni varoitus etukäteen olisi hienoa käyttäjäkokemuksen kannalta.

Nykyään, yllätykseksemme, tämä on mahdollista JavaScriptin ihmeiden ansiosta! JavaScript-tiedostot voidaan lähettää selaimen suoritettaviksi ja ne pystyvät tekemään muutoksia verkkosivuihin dynaamisesti asiakaspuolella.

## JavaScriptin suorittaminen selaimessa¶

 No newline at end of file

Originally JavaScript was made to be run only in browsers. Node.js that we have been using to run JavaScript so far, is relatively new: Node.js was first released in 2009, which is a while ago but not that much compared to 1995 when JavaScript was introduced by Netscape for Netscape Navigator, a popular browser at the time. The idea was to add scripting support to allow dynamic behaivour (ie. possibility to modify web documents by client-side scripting). To run JavaScript in a browser, it must be either saved into a file and referenced in a specific way in an HTML document, or alternatively, the code can be written directly to the JavaScript REPL Console included in the Developer tools.

### Developer tools¶

No matter the browser you are using, be it Chrome or Firefox, they all include something called Developer Tools. You may find them by navigating the respective menus of the browsers, but most certainly pressing F12 will land you with the correct window. The developer tools contain a lot of features. But the “Console” view is what we are after currently.

Console works the same way as the Node.js REPL. You are able to write and execute plain JavaScript from the console straight on. You may try entering the following into the console:

```

console.log("Hello world!")

 ```

 No newline at end of file

Alun perin JavaScript oli tehty suoritettavaksi vain selaimissa. Node.js, jota olemme käyttäneet JavaScriptin suorittamiseen tähän asti, on suhteellisen uusi: Node.js julkaistiin ensimmäisen kerran vuonna 2009, mikä on jonkin aikaa sitten, mutta ei niin paljon verrattuna vuoteen 1995, jolloin JavaScript esiteltiin Netscapen toimesta Netscape Navigatorille, joka oli suosittu selain tuolloin. Ajatuksena oli lisätä skriptituki, joka mahdollistaisi dynaamisen käyttäytymisen (ts. mahdollisuuden muokata verkkodokumentteja asiakaspuolella). JavaScriptin suorittaminen selaimessa edellyttää, että se on tallennettu tiedostoon ja viitattu tietyllä tavalla HTML-dokumentissa, tai vaihtoehtoisesti koodi voidaan kirjoittaa suoraan Kehittäjätyökaluihin sisältyvään JavaScript REPL -konsoliin.

### Kehittäjätyökalut¶

Riippumatta siitä, mitä selainta käytät, olipa se Chrome tai Firefox, ne kaikki sisältävät jotakin, jota kutsutaan kehittäjätyökaluiksi. Löydät ne navigoimalla selaimen omien valikoiden kautta, mutta melko varmasti F12-näppäimen painaminen avaa oikean ikkunan. Kehittäjätyökaluissa on paljon ominaisuuksia. Mutta tällä hetkellä meitä kiinnostaa "Konsoli"-näkymä.

Konsoli toimii samalla tavalla kuin Node.js REPL. Voit kirjoittaa ja suorittaa tavallista JavaScriptiä suoraan konsolissa. Voit kokeilla seuraavan kirjoittamista konsoliin:

```

console.log("Hei maailma!")

 ```

 No newline at end of file

The console should print Hello world and also undefined meaning that the console.log function did not return anything (as printing is a side effect, not a return value).

Depending on where you are running the console, it may already contain some output and other text. This is because the web page that you currently are in, might have, and most likely has, already executed JavaScript.

Now let’s test whether you are able to open up the console in your browser and run a command on it. Points will be granted when the exercise has been successfully completed. For techical reasons, to be able to call the requested function, you must make sure to run the command in context of “console_command”, NOT in context of top. This is because the exercise is considered a “separate site” from this main course material and the requested function is only available in the exercise site.

Shortly put, check that the correct selection is made in your browser. Use the pictures below to determine where to change the settings

In Chrome:

and in Firefox:

### Running JavaScript files in browser¶

 No newline at end of file

Konsolin pitäisi tulostaa "Hei maailma" ja myös "undefined", mikä tarkoittaa, että console.log-funktio ei palauttanut mitään (tulostus on sivuvaikutus, ei palautusarvo).

Riippuen siitä, missä suoritat konsolin, se saattaa jo sisältää jonkin verran tulostetta ja muuta tekstiä. Tämä johtuu siitä, että verkkosivu, jolla olet parhaillaan, saattaa jo olla suorittanut JavaScriptiä.

Kokeillaan nyt, pystytkö avaamaan konsolin selaimessasi ja suorittamaan komennon siinä. Pisteitä myönnetään, kun tehtävä on suoritettu onnistuneesti. Teknisistä syistä, jotta voit kutsua pyydettyä funktiota, sinun on varmistettava, että suoritat komennon "console_command" kontekstissa, EI "top" kontekstissa. Tämä johtuu siitä, että tehtävää pidetään "erillisenä sivustona" tästä pääkurssimateriaalista ja pyydetty funktio on saatavilla vain tehtävässivustolla.

Lyhyesti sanottuna, tarkista, että oikea valinta on tehty selaimessasi. Käytä alla olevia kuvia määrittääksesi, mistä asetuksia muutetaan

Chromessa:

ja Firefoxissa:

### JavaScript-tiedostojen suorittaminen selaimessa¶

 No newline at end of file

Now that we know how to use JavaScript interpreter directly in browsers by using the developer tools and the included console, we can next try to run JavaScript saved into a file. There is one problem though: browsers do not generally run JavaScript files directly, thus we cannot simply “open” JavaScript file with a browser and except it to run. For the browser to actually run JavaScript, it must be referenced by an HTML document.

Knowing this, we can simply create a “dummy” HTML document (that browsers can open) where we include our JavaScript file(s). A script can be included by using a script tag as follows:

```

<!DOCTYPE html>

<html lang=en>

    <head>

        <title>Test page for JS</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>This is a test page to test your JavaScript code. Press F12 to open Developer Tools or refer to the documentation of your browser.</p>

    </body>

</html>

 ```

The script tag can be used to either contain the JavaScript code directly or have a source reference attribute (src) to the JavaScript file. We have ended up using the source reference since it is a lot more clear to have the JavaScript code contained in its own file than inside an HTML document.

Nyt kun tiedämme, miten käyttää JavaScript-tulkkia suoraan selaimissa käyttämällä kehittäjätyökaluja ja sisällytettyä konsolia, voimme seuraavaksi yrittää suorittaa JavaScriptiä, joka on tallennettu tiedostoon. On kuitenkin yksi ongelma: selaimet eivät yleensä suorita JavaScript-tiedostoja suoraan, joten emme voi yksinkertaisesti "avata" JavaScript-tiedostoa selaimella ja odottaa sen suorittavan. Jotta selain todella suorittaisi JavaScriptin, sen on oltava viitattu HTML-dokumentissa.

Tämän tietäen voimme yksinkertaisesti luoda "keinotekoisen" HTML-dokumentin (jonka selaimet voivat avata), jossa sisällytämme JavaScript-tiedostomme. Skripti voidaan sisällyttää käyttämällä script-tagia seuraavasti:

```

<!DOCTYPE html>

<html lang=fi>

    <head>

        <title>Testisivu JS:lle</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>Tämä on testisivu JavaScript-koodisi testaamiseen. Paina F12 avataksesi kehittäjätyökalut tai katso selaimen dokumentaatiosta.</p>

    </body>

</html>

 ```

Script-tagia voidaan käyttää joko sisältämään JavaScript-koodi suoraan tai sisältämään lähdereferenssiattribuutti (src) JavaScript-tiedostoon. Olemme päätyneet käyttämään lähdereferenssiä, koska on paljon selkeämpää, että JavaScript-koodi on omassa tiedostossaan kuin HTML-dokumentissa.

 No newline at end of file

You may now copy the code above into a file called index.html and then create an empty file myScript.js (case sensitive) into the same folder. Edit the myScript.js so that it contains the following piece of code:

```

 No newline at end of file

Voit nyt kopioida yllä olevan koodin tiedostoon nimeltä index.html ja luoda sitten tyhjän tiedoston myScript.js (kirjainkoolla on merkitystä) samaan kansioon. Muokkaa myScript.js -tiedostoa niin, että se sisältää seuraavan koodinpätkän:

```

 No newline at end of file

Paste your input here!

#### Course

 No newline at end of file

#### Site

#### Course

# JavaScript in Web browsers¶

So far we have been in static era of web pages: browsers download the HTML page, parse and then render it. To modify the page, we must request a new one from the server and do the download-parse-render all over again. All the modifications to the web page happen on server-side and require reloading the whole page every time: browser has no control over the DOM tree. This is slow and breaks user experience in many cases. For example when filling in forms, it would be great if the form could warn when a required field of the form is empty or there are some other errors before we send it back to the server. Obviously the server would still have to do the checks in trusted environment but a small warning beforehand would be great for user experience.

Cut to the present day and for everyone’s surprise this is now possible thanks to the wonders of JavaScript! JavaScript files can be sent to be executed by the browsers and they are able to make changes to the web pages dynamically in the client-side.

## Running JavaScript in browser¶

Originally JavaScript was made to be run only in browsers. Node.js that we have been using to run JavaScript so far, is relatively new: Node.js was first released in 2009, which is a while ago but not that much compared to 1995 when JavaScript was introduced by Netscape for Netscape Navigator, a popular browser at the time. The idea was to add scripting support to allow dynamic behaivour (ie. possibility to modify web documents by client-side scripting). To run JavaScript in a browser, it must be either saved into a file and referenced in a specific way in an HTML document, or alternatively, the code can be written directly to the JavaScript REPL Console included in the Developer tools.

### Developer tools¶

No matter the browser you are using, be it Chrome or Firefox, they all include something called Developer Tools. You may find them by navigating the respective menus of the browsers, but most certainly pressing F12 will land you with the correct window. The developer tools contain a lot of features. But the “Console” view is what we are after currently.

Console works the same way as the Node.js REPL. You are able to write and execute plain JavaScript from the console straight on. You may try entering the following into the console:

```console.log("Hello world!")

 ```

The console should print Hello world and also undefined meaning that the console.log function did not return anything (as printing is a side effect, not a return value).

Depending on where you are running the console, it may already contain some output and other text. This is because the web page that you currently are in, might have, and most likely has, already executed JavaScript.

Now let’s test whether you are able to open up the console in your browser and run a command on it. Points will be granted when the exercise has been successfully completed. For techical reasons, to be able to call the requested function, you must make sure to run the command in context of “console_command”, NOT in context of top. This is because the exercise is considered a “separate site” from this main course material and the requested function is only available in the exercise site.

Shortly put, check that the correct selection is made in your browser. Use the pictures below to determine where to change the settings

In Chrome:

and in Firefox:

### Running JavaScript files in browser¶

Now that we know how to use JavaScript interpreter directly in browsers by using the developer tools and the included console, we can next try to run JavaScript saved into a file. There is one problem though: browsers do not generally run JavaScript files directly, thus we cannot simply “open” JavaScript file with a browser and except it to run. For the browser to actually run JavaScript, it must be referenced by an HTML document.

Knowing this, we can simply create a “dummy” HTML document (that browsers can open) where we include our JavaScript file(s). A script can be included by using a script tag as follows:

```<!DOCTYPE html>

<html lang=en>

    <head>

        <title>Test page for JS</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>This is a test page to test your JavaScript code. Press F12 to open Developer Tools or refer to the documentation of your browser.</p>

    </body>

</html>

 ```

The script tag can be used to either contain the JavaScript code directly or have a source reference attribute (src) to the JavaScript file. We have ended up using the source reference since it is a lot more clear to have the JavaScript code contained in its own file than inside an HTML document.

You may now copy the code above into a file called index.html and then create an empty file myScript.js (case sensitive) into the same folder. Edit the myScript.js so that it contains the following piece of code:

```// I a

VM5677 Script snippet #1:1 undefined

Script snippet #1:40 v1.18.0

#### Course

#### Site

#### Course

# JavaScript in Web browsers¶

So far we have been in static era of web pages: browsers download the HTML page, parse and then render it. To modify the page, we must request a new one from the server and do the download-parse-render all over again. All the modifications to the web page happen on server-side and require reloading the whole page every time: browser has no control over the DOM tree. This is slow and breaks user experience in many cases. For example when filling in forms, it would be great if the form could warn when a required field of the form is empty or there are some other errors before we send it back to the server. Obviously the server would still have to do the checks in trusted environment but a small warning beforehand would be great for user experience.

Cut to the present day and for everyone’s surprise this is now possible thanks to the wonders of JavaScript! JavaScript files can be sent to be executed by the browsers and they are able to make changes to the web pages dynamically in the client-side.

## Running JavaScript in browser¶

Originally JavaScript was made to be run only in browsers. Node.js that we have been using to run JavaScript so far, is relatively new: Node.js was first released in 2009, which is a while ago but not that much compared to 1995 when JavaScript was introduced by Netscape for Netscape Navigator, a popular browser at the time. The idea was to add scripting support to allow dynamic behaivour (ie. possibility to modify web documents by client-side scripting). To run JavaScript in a browser, it must be either saved into a file and referenced in a specific way in an HTML document, or alternatively, the code can be written directly to the JavaScript REPL Console included in the Developer tools.

### Developer tools¶

No matter the browser you are using, be it Chrome or Firefox, they all include something called Developer Tools. You may find them by navigating the respective menus of the browsers, but most certainly pressing F12 will land you with the correct window. The developer tools contain a lot of features. But the “Console” view is what we are after currently.

Console works the same way as the Node.js REPL. You are able to write and execute plain JavaScript from the console straight on. You may try entering the following into the console:

```

console.log("Hello world!")

 ```

The console should print Hello world and also undefined meaning that the console.log function did not return anything (as printing is a side effect, not a return value).

Depending on where you are running the console, it may already contain some output and other text. This is because the web page that you currently are in, might have, and most likely has, already executed JavaScript.

Now let’s test whether you are able to open up the console in your browser and run a command on it. Points will be granted when the exercise has been successfully completed. For techical reasons, to be able to call the requested function, you must make sure to run the command in context of “console_command”, NOT in context of top. This is because the exercise is considered a “separate site” from this main course material and the requested function is only available in the exercise site.

Shortly put, check that the correct selection is made in your browser. Use the pictures below to determine where to change the settings

In Chrome:

and in Firefox:

### Running JavaScript files in browser¶

Now that we know how to use JavaScript interpreter directly in browsers by using the developer tools and the included console, we can next try to run JavaScript saved into a file. There is one problem though: browsers do not generally run JavaScript files directly, thus we cannot simply “open” JavaScript file with a browser and except it to run. For the browser to actually run JavaScript, it must be referenced by an HTML document.

Knowing this, we can simply create a “dummy” HTML document (that browsers can open) where we include our JavaScript file(s). A script can be included by using a script tag as follows:

```

<!DOCTYPE html>

<html lang=en>

    <head>

        <title>Test page for JS</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>This is a test page to test your JavaScript code. Press F12 to open Developer Tools or refer to the documentation of your browser.</p>

    </body>

</html>

 ```

The script tag can be used to either contain the JavaScript code directly or have a source reference attribute (src) to the JavaScript file. We have ended up using the source reference since it is a lot more clear to have the JavaScript code contained in its own file than inside an HTML document.

You may now copy the code above into a file called index.html and then create an empty file myScript.js (case sensitive) into the same folder. Edit the myScript.js so that it contains the following piece of code:

```

 No newline at end of file

After the script has run, the final output will apppear here!

#### Kurssi

 No newline at end of file

#### Sivusto

#### Kurssi

# JavaScript selaimissa¶

Tähän asti olemme olleet verkkosivujen staattisessa aikakaudessa: selaimet lataavat HTML-sivun, jäsentävät sen ja sitten renderöivät sen. Sivun muokkaamiseksi meidän on pyydettävä uusi sivu palvelimelta ja tehtävä lataus-jäsennys-renderöinti uudelleen. Kaikki muutokset verkkosivulla tapahtuvat palvelimen puolella ja vaativat koko sivun uudelleenlataamisen joka kerta: selaimella ei ole hallintaa DOM-puun yli. Tämä on hidasta ja katkaisee käyttäjäkokemuksen monissa tapauksissa. Esimerkiksi lomakkeiden täyttämisessä olisi hienoa, jos lomake voisi varoittaa, kun lomakkeen vaadittu kenttä on tyhjä tai siinä on joitakin muita virheitä ennen kuin lähetämme sen takaisin palvelimelle. Ilmeisesti palvelimen olisi edelleen tehtävä tarkistukset luotetussa ympäristössä, mutta pieni varoitus etukäteen olisi hienoa käyttäjäkokemuksen kannalta.

Nykyään, yllätykseksemme, tämä on mahdollista JavaScriptin ihmeiden ansiosta! JavaScript-tiedostot voidaan lähettää selaimen suoritettaviksi ja ne pystyvät tekemään muutoksia verkkosivuihin dynaamisesti asiakaspuolella.

## JavaScriptin suorittaminen selaimessa¶Alun perin JavaScript oli tehty suoritettavaksi vain selaimissa. Node.js, jota olemme käyttäneet JavaScriptin suorittamiseen tähän asti, on suhteellisen uusi: Node.js julkaistiin ensimmäisen kerran vuonna 2009, mikä on jonkin aikaa sitten, mutta ei niin paljon verrattuna vuoteen 1995, jolloin JavaScript esiteltiin Netscapen toimesta Netscape Navigatorille, joka oli suosittu selain tuolloin. Ajatuksena oli lisätä skriptituki, joka mahdollistaisi dynaamisen käyttäytymisen (ts. mahdollisuuden muokata verkkodokumentteja asiakaspuolella). JavaScriptin suorittaminen selaimessa edellyttää, että se on tallennettu tiedostoon ja viitattu tietyllä tavalla HTML-dokumentissa, tai vaihtoehtoisesti koodi voidaan kirjoittaa suoraan Kehittäjätyökaluihin sisältyvään JavaScript REPL -konsoliin.

### Kehittäjätyökalut¶

Riippumatta siitä, mitä selainta käytät, olipa se Chrome tai Firefox, ne kaikki sisältävät jotakin, jota kutsutaan kehittäjätyökaluiksi. Löydät ne navigoimalla selaimen omien valikoiden kautta, mutta melko varmasti F12-näppäimen painaminen avaa oikean ikkunan. Kehittäjätyökaluissa on paljon ominaisuuksia. Mutta tällä hetkellä meitä kiinnostaa "Konsoli"-näkymä.

Konsoli toimii samalla tavalla kuin Node.js REPL. Voit kirjoittaa ja suorittaa tavallista JavaScriptiä suoraan konsolissa. Voit kokeilla seuraavan kirjoittamista konsoliin:

console.log("Hei maailma!")

Konsolin pitäisi tulostaa "Hei maailma" ja myös "undefined", mikä tarkoittaa, että console.log-funktio ei palauttanut mitään (tulostus on sivuvaikutus, ei palautusarvo).

Riippuen siitä, missä suoritat konsolin, se saattaa jo sisältää jonkin verran tulostetta ja muuta tekstiä. Tämä johtuu siitä, että verkkosivu, jolla olet parhaillaan, saattaa jo olla suorittanut JavaScriptiä.

Kokeillaan nyt, pystytkö avaamaan konsolin selaimessasi ja suorittamaan komennon siinä. Pisteitä myönnetään, kun tehtävä on suoritettu onnistuneesti. Teknisistä syistä, jotta voit kutsua pyydettyä funktiota, sinun on varmistettava, että suoritat komennon "console_command" kontekstissa, EI "top" kontekstissa. Tämä johtuu siitä, että tehtävää pidetään "erillisenä sivustona" tästä pääkurssimateriaalista ja pyydetty funktio on saatavilla vain tehtävässivustolla.

Lyhyesti sanottuna, tarkista, että oikea valinta on tehty selaimessasi. Käytä alla olevia kuvia määrittääksesi, mistä asetuksia muutetaan

Chromessa:

ja Firefoxissa:

### JavaScript-tiedostojen suorittaminen selaimessa

¶Nyt kun tiedämme, miten käyttää JavaScript-tulkkia suoraan selaimissa käyttämällä kehittäjätyökaluja ja sisällytettyä konsolia, voimme seuraavaksi yrittää suorittaa JavaScriptiä, joka on tallennettu tiedostoon. On kuitenkin yksi ongelma: selaimet eivät yleensä suorita JavaScript-tiedostoja suoraan, joten emme voi yksinkertaisesti "avata" JavaScript-tiedostoa selaimella ja odottaa sen suorittavan. Jotta selain todella suorittaisi JavaScriptin, sen on oltava viitattu HTML-dokumentissa.

Tämän tietäen voimme yksinkertaisesti luoda "keinotekoisen" HTML-dokumentin (jonka selaimet voivat avata), jossa sisällytämme JavaScript-tiedostomme. Skripti voidaan sisällyttää käyttämällä script-tagia seuraavasti:

```<!DOCTYPE html>

<html lang=fi>

    <head>

        <title>Testisivu JS:lle</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>Tämä on testisivu JavaScript-koodisi testaamiseen. Paina F12 avataksesi kehittäjätyökalut tai katso selaimen dokumentaatiosta.</p>

    </body>

</html>

 ```

Script-tagia voidaan käyttää joko sisältämään JavaScript-koodi suoraan tai sisältämään lähdereferenssiattribuutti (src) JavaScript-tiedostoon. Olemme päätyneet käyttämään lähdereferenssiä, koska on paljon selkeämpää, että JavaScript-koodi on omassa tiedostossaan kuin HTML-dokumentissa.

Voit nyt kopioida yllä olevan koodin tiedostoon nimeltä index.html ja luoda sitten tyhjän tiedoston myScript.js (kirjainkoolla on väliä) samaan kansioon. Muokkaa myScript.js-tiedostoa niin, että se sisältää seuraavan koodinpätkän:```// Minä olen

VM5677 Script snippet #1:1 undefined

Script snippet #1:40 v1.18.0

#### Kurssi

#### Sivusto

#### Kurssi

# JavaScript selaimissa¶

Tähän asti olemme olleet verkkosivujen staattisessa aikakaudessa: selaimet lataavat HTML-sivun, jäsentävät sen ja sitten renderöivät sen. Sivun muokkaamiseksi meidän on pyydettävä uusi sivu palvelimelta ja tehtävä lataus-jäsennys-renderöinti uudelleen. Kaikki muutokset verkkosivulla tapahtuvat palvelimen puolella ja vaativat koko sivun uudelleenlataamisen joka kerta: selaimella ei ole hallintaa DOM-puun yli. Tämä on hidasta ja katkaisee käyttäjäkokemuksen monissa tapauksissa. Esimerkiksi lomakkeiden täyttämisessä olisi hienoa, jos lomake voisi varoittaa, kun lomakkeen vaadittu kenttä on tyhjä tai siinä on joitakin muita virheitä ennen kuin lähetämme sen takaisin palvelimelle. Ilmeisesti palvelimen olisi edelleen tehtävä tarkistukset luotetussa ympäristössä, mutta pieni varoitus etukäteen olisi hienoa käyttäjäkokemuksen kannalta.

Nykyään, yllätykseksemme, tämä on mahdollista JavaScriptin ihmeiden ansiosta! JavaScript-tiedostot voidaan lähettää selaimen suoritettaviksi ja ne pystyvät tekemään muutoksia verkkosivuihin dynaamisesti asiakaspuolella.

## JavaScriptin suorittaminen selaimessa¶Alun perin JavaScript oli tehty suoritettavaksi vain selaimissa. Node.js, jota olemme käyttäneet JavaScriptin suorittamiseen tähän asti, on suhteellisen uusi: Node.js julkaistiin ensimmäisen kerran vuonna 2009, mikä on jonkin aikaa sitten, mutta ei niin paljon verrattuna vuoteen 1995, jolloin JavaScript esiteltiin Netscapen toimesta Netscape Navigatorille, joka oli suosittu selain tuolloin. Ajatuksena oli lisätä skriptituki, joka mahdollistaisi dynaamisen käyttäytymisen (ts. mahdollisuuden muokata verkkodokumentteja asiakaspuolella). JavaScriptin suorittaminen selaimessa edellyttää, että se on tallennettu tiedostoon ja viitattu tietyllä tavalla HTML-dokumentissa, tai vaihtoehtoisesti koodi voidaan kirjoittaa suoraan Kehittäjätyökaluihin sisältyvään JavaScript REPL -konsoliin.

### Kehittäjätyökalut¶

Riippumatta siitä, mitä selainta käytät, olipa se Chrome tai Firefox, ne kaikki sisältävät jotakin, jota kutsutaan kehittäjätyökaluiksi. Löydät ne navigoimalla selaimen omien valikoiden kautta, mutta melko varmasti F12-näppäimen painaminen avaa oikean ikkunan. Kehittäjätyökaluissa on paljon ominaisuuksia. Mutta tällä hetkellä meitä kiinnostaa "Konsoli"-näkymä.

Konsoli toimii samalla tavalla kuin Node.js REPL. Voit kirjoittaa ja suorittaa tavallista JavaScriptiä suoraan konsolissa. Voit kokeilla seuraavan kirjoittamista konsoliin:

```

console.log("Hei maailma!")

 ```Konsolin pitäisi tulostaa "Hei maailma" ja myös "undefined", mikä tarkoittaa, että console.log-funktio ei palauttanut mitään (tulostus on sivuvaikutus, ei palautusarvo).

Riippuen siitä, missä suoritat konsolin, se saattaa jo sisältää jonkin verran tulostetta ja muuta tekstiä. Tämä johtuu siitä, että verkkosivu, jolla olet parhaillaan, saattaa jo olla suorittanut JavaScriptiä.

Kokeillaan nyt, pystytkö avaamaan konsolin selaimessasi ja suorittamaan komennon siinä. Pisteitä myönnetään, kun tehtävä on suoritettu onnistuneesti. Teknisistä syistä, jotta voit kutsua pyydettyä funktiota, sinun on varmistettava, että suoritat komennon "console_command" kontekstissa, EI "top" kontekstissa. Tämä johtuu siitä, että tehtävää pidetään "erillisenä sivustona" tästä pääkurssimateriaalista ja pyydetty funktio on saatavilla vain tehtävässivustolla.

Lyhyesti sanottuna, tarkista, että oikea valinta on tehty selaimessasi. Käytä alla olevia kuvia määrittääksesi, mistä asetuksia muutetaan

Chromessa:

ja Firefoxissa:

### JavaScript-tiedostojen suorittaminen selaimessa¶Nyt kun tiedämme, miten käyttää JavaScript-tulkkia suoraan selaimissa käyttämällä kehittäjätyökaluja ja sisällytettyä konsolia, voimme seuraavaksi yrittää suorittaa JavaScriptiä, joka on tallennettu tiedostoon. On kuitenkin yksi ongelma: selaimet eivät yleensä suorita JavaScript-tiedostoja suoraan, joten emme voi yksinkertaisesti "avata" JavaScript-tiedostoa selaimella ja odottaa sen suorittavan. Jotta selain todella suorittaisi JavaScriptin, sen on oltava viitattu HTML-dokumentissa.

Tämän tietäen voimme yksinkertaisesti luoda "keinotekoisen" HTML-dokumentin (jonka selaimet voivat avata), jossa sisällytämme JavaScript-tiedostomme. Skripti voidaan sisällyttää käyttämällä script-tagia seuraavasti:

```

<!DOCTYPE html>

<html lang=fi>

    <head>

        <title>Testisivu JS:lle</title>

        <meta charset="UTF-8">

        <script src="myScript.js"></script>

    </head>

    <body>

        <p>Tämä on testisivu JavaScript-koodisi testaamiseen. Paina F12 avataksesi kehittäjätyökalut tai katso selaimen dokumentaatiosta.</p>

    </body>

</html>

 ```

Script-tagia voidaan käyttää joko sisältämään JavaScript-koodi suoraan tai sisältämään lähdereferenssiattribuutti (src) JavaScript-tiedostoon. Olemme päätyneet käyttämään lähdereferenssiä, koska on paljon selkeämpää, että JavaScript-koodi on omassa tiedostossaan kuin HTML-dokumentissa.Voit nyt kopioida yllä olevan koodin tiedostoon nimeltä index.html ja luoda sitten tyhjän tiedoston myScript.js (kirjainkoolla on merkitystä) samaan kansioon. Muokkaa myScript.js -tiedostoa niin, että se sisältää seuraavan koodinpätkän:

```

 No newline at end of file

from sklearn.metrics.pairwise import cosine_similarity

from sklearn.metrics.pairwise import cosine_similarity

# Set the environment variable

# Set the environment variable

os.environ['API_KEY'] = 'PASTE_YOUR_API_KEY_HERE'

openai.api_key = os.getenv('OPENAI_API_KEY')

GPT_MODEL = "gpt-4"

GPT_MODEL = "gpt-4"

"""

"""

    """

    """

    returns the translated string

    returns the translated string

    """

    """

    openai.api_key = os.getenv('API_KEY')

    openai.api_key = os.getenv('OPENAI_API_KEY')

    all_messages = []

    all_messages = []

    # Add previous messages for chatGPT to use them as example.

    # Add previous messages for chatGPT to use them as example.

                NOTE: If text is in middle of a code block when the chunk should be broken down, includes it

                NOTE: If text is in middle of a code block when the chunk should be broken down, includes it

                    (so block's word count may exceed the set limit by a little bit)

                    (so block's word count may exceed the set limit by a little bit)

    """

    """

    # Store original text

    input_text = input_string

    # Split the input string by newline to get lines

    # Split the input string by newline to get lines

    lines = input_string.split('\n')

    lines = input_string.split('\n')

def write_to_file(file_path, content):

def write_to_file(file_path, content):

    try:

    try:

        with open(file_path, 'w', encoding='utf-8') as file:

        with open(file_path, 'w', encoding='utf-8', encoding='utf-8') as file:

            file.write(content)

            file.write(content)

        print("Successfully wrote to the file: " + file_path)

        print("Successfully wrote to the file: " + file_path)

        print("Successfully wrote to the file: " + file_path)

    except Exception as e:

    except Exception as e:

        print(f"An error occurred: {e}")

        print(f"An error occurred: {e}")

    ChatGPT has tendency to (sometimes) repeat the previous translation again in the new message.

    ChatGPT has tendency to (sometimes) repeat the previous translation again in the new message.

    If that happens, try to translate the chunk again.

    If that happens, try to translate the chunk again.

    """

    """

    trans = get_translation_for_chunk(chunk, i, previous_messages=copy.deepcopy(previous_messages))

    if not trans:

    if not trans:

        return None

        return None

# ------------ SET-UP ------------

# ------------ SET-UP ------------

# Set the initial prompt 

# Set the initial prompt 

INITIAL_PROMPT = ""

INITIAL_PROMPT = "You are a translator. Localize and translate the study materials to Finnish. Keep the meaning of the exercise in translation, but it does not need to be literal translation. If there are English names change them to names used in Finland. Keep every actor the same."

# Load BERT tokenizer and model

# Load BERT tokenizer and model

tokenizer = BertTokenizer.from_pretrained('bert-base-uncased')

tokenizer = BertTokenizer.from_pretrained('bert-base-uncased')

model = BertModel.from_pretrained('bert-base-uncased')

model = BertModel.from_pretrained('bert-base-uncased')