diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
index 2f4f518f3..874aefed4 100644
--- a/1-js/01-getting-started/1-intro/article.md
+++ b/1-js/01-getting-started/1-intro/article.md
@@ -1,72 +1,99 @@
-# An Introduction to JavaScript
+# Johdanto JavaScriptiin
-Let's see what's so special about JavaScript, what we can achieve with it, and what other technologies play well with it.
+Katsotaan, mikä JavaScriptissä on niin erityistä, mitä voimme saada sen avulla aikaan ja mitkä muut teknologiat toimivat hyvin sen kanssa.
-## What is JavaScript?
+## Mikä JavaScript on?
-*JavaScript* was initially created to "make web pages alive".
+*JavaScript* luotiin alunperin "tekemään nettisivuista eläviä".
-The programs in this language are called *scripts*. They can be written right in a web page's HTML and run automatically as the page loads.
+Tällä kielellä kirjoitettuja ohjelmia kutsutaan *skripteiksi*. Ne voidaan kirjoittaa suoraan nettisivun HTML:ään ja ne suoritetaan automaattisesti, kun sivu latautuu.
-Scripts are provided and executed as plain text. They don't need special preparation or compilation to run.
+Skriptit välitetään ja suoritetaan tavallisena tekstinä. Niiden suorittamiseen ei tarvita erityistä valmistelua tai kääntämistä.
-In this aspect, JavaScript is very different from another language called [Java](https://en.wikipedia.org/wiki/Java_(programming_language)).
+Tässä suhteessa JavaScript poikkeaa selkeästi toisesta kielestä nimeltä [Java](https://fi.wikipedia.org/wiki/Java).
-```smart header="Why is it called JavaScript?"
-When JavaScript was created, it initially had another name: "LiveScript". But Java was very popular at that time, so it was decided that positioning a new language as a "younger brother" of Java would help.
+```smart header="Miksi sen nimi on JavaScript?"
+Kun JavaScript luotiin, sillä oli toinen nimi: "LiveScript". Java oli kuitenkin siihen aikaan erittäin suosittu kieli, joten päätettiin, että uuden kielen sijoittamisesta Javan "nuoremmaksi veljeksi" olisi apua.
-But as it evolved, JavaScript became a fully independent language with its own specification called [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), and now it has no relation to Java at all.
+Kehittyessään JavaScriptistä tuli kuitenkin täysin itsenäinen, jolla on oma määrittelynsä nimeltä [ECMAScript](http://en.wikipedia.org/wiki/ECMAScript), eikä sillä enää ole yhteyttä Javaan.
```
-Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called [the JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine).
+Nykyisin JavaScriptiä voidaan suorittaa selaimen lisäksi palvelimella tai oikeastaan millä tahansa laitteella, jossa on erityinen ohjelma nimeltä [JavaScript-moottori](https://en.wikipedia.org/wiki/JavaScript_engine).
-The browser has an embedded engine sometimes called a "JavaScript virtual machine".
+Selaimeen on upotettu moottori, jota kutsutaan joskus "JavaScript-virtuaalikoneeksi".
-Different engines have different "codenames". For example:
+Eri moottoreilla on omia kutsumanimiä. Esimerkiksi:
-- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome, Opera and Edge.
-- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox.
-- ...There are other codenames like "Chakra" for IE, "JavaScriptCore", "Nitro" and "SquirrelFish" for Safari, etc.
+- [V8](https://fi.wikipedia.org/wiki/V8_(JavaScript-moottori)) -- Chromessa, Operassa ja Edgessä.
+- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- Firefoxissa.
+- ...Lisäksi on muitakin kutsumanimiä kuten "Chakra" IE:lle, "JavaScriptCore", "Nitro" ja "SquirrelFish" Safarille, jne.
-The terms above are good to remember because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome, Opera and Edge.
+Yllä luetellut termit on hyvä muistaa, koska niitä käytetään internetin sovelluskehitykseen liittyvissä artikkeleissa. Me tulemme myös käyttämään niitä. Jos esimerkiksi "V8 tukee toimintoa X", se todennäköisesti toimii Chromessa, Operassa ja Edgessä.
-```smart header="How do engines work?"
+```smart header="Miten moottorit toimivat?"
-Engines are complicated. But the basics are easy.
+Moottorit ovat monimutkaisia, mutta perusteet ovat helpot.
+<<<<<<< HEAD
+1. Moottori (upotettu, jos kyseessä on selain) lukee ("jäsentää") skriptin.
+2. Sitten se muuttaa ("kääntää") skriptin konekielelle.
+3. Ja sitten konekieli suoritetaan, melko nopeasti.
+=======
1. The engine (embedded if it's a browser) reads ("parses") the script.
2. Then it converts ("compiles") the script to machine code.
3. And then the machine code runs, pretty fast.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-The engine applies optimizations at each step of the process. It even watches the compiled script as it runs, analyzes the data that flows through it, and further optimizes the machine code based on that knowledge.
+Moottori käyttää optimointeja prosessin jokaisessa vaiheessa. Se jopa katsoo käännettyä skriptiä sen suorituksen aikana, analysoi sen läpi kulkevaa dataa ja edelleen optimoi sen perusteella konekieltä lisää.
```
-## What can in-browser JavaScript do?
+## Mitä JavaScript voi tehdä selaimessa?
+<<<<<<< HEAD
+Nykyaikainen JavaScript on "turvallinen" ohjelmointikieli. Se ei salli matalan tason pääsyä muistiin tai suorittimeen, koska se alunperin suunniteltiin selaimiin, jotka eivät vaadi sitä.
+=======
Modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or the CPU, because it was initially created for browsers which do not require it.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-JavaScript's capabilities greatly depend on the environment it's running in. For instance, [Node.js](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc.
+JavaScriptin kyvyt riippuvat suuresti ympäristöstä, jossa sitä ajetaan. Esimerkiksi [Node.js](https://wikipedia.org/wiki/Node.js) tukee funktioita, joiden avulla JavaScript voi lukea/kirjoittaa mielivaltaisia tiedostoja, suorittaa verkkopyyntöjä, jne.
-In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver.
+Selaimessa JavaScript voi tehdä kaikkea nettisivun manipuloinnista vuorovaikutukseen käyttäjän ja web-palvelimen kanssa.
-For instance, in-browser JavaScript is able to:
+Selaimessa JavaScript voi esimerkiksi:
-- Add new HTML to the page, change the existing content, modify styles.
-- React to user actions, run on mouse clicks, pointer movements, key presses.
-- Send requests over the network to remote servers, download and upload files (so-called [AJAX](https://en.wikipedia.org/wiki/Ajax_(programming)) and [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) technologies).
-- Get and set cookies, ask questions to the visitor, show messages.
-- Remember the data on the client-side ("local storage").
+- Lisätä uutta HTML:ää sivulle, muuttaa olemassaolevaa sisältöä tai muokata tyylejä.
+- Reagoida käyttäjän toimintaan, hiiren klikkauksiin, kursorin liikkeisiin ja painikkeiden painalluksiin.
+- Lähettää pyyntöjä verkon yli etäpalvelimille, ladata tai lähettää tiedostoja (niin sanotut [AJAX](https://fi.wikipedia.org/wiki/Ajax_(ohjelmointi)) ja [COMET](https://en.wikipedia.org/wiki/Comet_(programming)) teknologiat).
+- Lukea ja asettaa evästeitä, kysyä kysymyksiä vierailijalta, näyttää viestejä.
+- Muistaa tietoja asiakaspuolella ("local storage", suom. "paikallinen varasto").
-## What CAN'T in-browser JavaScript do?
+## Mitä JavaScript EI VOI tehdä selaimessa?
+<<<<<<< HEAD
+JavaScriptin kykyjä selaimessa on rajoitettu käyttäjän turvallisuuden vuoksi. Tavoitteena on estää pahaa nettisivua pääsemästä käsiksi yksityisiin tietoihin tai vahingoittamasta käyttäjän tietoja.
+=======
JavaScript's abilities in the browser are limited to protect the user's safety. The aim is to prevent an evil webpage from accessing private information or harming the user's data.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-Examples of such restrictions include:
+Esimerkkejä tällaisista rajoituksista ovat:
-- JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or execute programs. It has no direct access to OS functions.
+- Nettisivun JavaScript ei voi lukea, kirjoittaa tai kopioida mielivaltaisia tiedostoja kovalevyllä tai suorittaa ohjelmia. Sillä ei ole suoraa pääsyä käyttöjärjestelmän funktioihin.
- Modern browsers allow it to work with files, but the access is limited and only provided if the user does certain actions, like "dropping" a file into a browser window or selecting it via an `` tag.
+ Modernit selaimet voivat sallia sen olla tekemisissä tiedostojen kanssa, mutta pääsy on rajoitettu ja sallittu vain, jos käyttäjä toimii tietyllä tavalla, kuten "pudottaa" tiedoston selaimeen tai valitsee sen `` tunnisteen kautta.
+<<<<<<< HEAD
+ Kameran tai mikrofonin ja muiden laitteiden kanssa voi olla vuorovaikutuksessa, mutta ne edellyttävät käyttäjän nimenomaista lupaa. Eli sivusto, jossa JavaScript on käytössä, ei voi salaa käyttää webkameraa, tarkkailla ympäristöä ja lähettää tietoja [SUPO](https://fi.wikipedia.org/wiki/Suojelupoliisi):lle.
+- Välilehdet tai ikkunat eivät lähtökohtaisesti tiedä toisistaan. Joskus ne tietävät, esimerkiksi yhden ikkunan käyttäessä JavaScriptiä toisen ikkunan avaamiseen, mutta tässäkään tapauksessa yhden sivun JavaScript ei pääse käsiksi toiseen sivuun, jos ne ovat peräisin eri sivustoilta (eri verkkotunnus, protokolla tai portti).
+
+ Tätä kutsutaan nimellä "Same Origin Policy" ("saman alkuperän käytäntö"). Tämän kiertämiseksi *molempien sivujen* on sovittava tietojenvaihdosta ja niiden pitää sisältää erityistä JavaScript-koodia, joka käsittelee sitä. Käsittelemme tätä tässä tutoriaalissa.
+
+ Tämäkin rajoitus on tehty käyttäjän turvaksi. Käyttäjän avaama sivu osoitteessa `http://jokusivu.fi` ei saa päästä käsiksi tai varastaa tietoa toiselle välilehdelle avatulta sivulta, jonka osoite on `http://gmail.com`.
+- JavaScript voi helposti kommunikoida verkon yli sen palvelimen kanssa, jolta nykyinen sivu on peräisin, mutta sen kyky vastaanottaa tietoja toisilta sivustoilta tai verkkotunnuksilta on hankalaa. Vaikka se onkin mahdollista, se vaatii nimenomaista suostumusta (HTTP-otsikkojen muodossa) toiselta osapuolelta. Tämä on jälleen yksi turvarajoitus.
+
+
+
+Samat rajoitukset eivät koske JavaScriptiä selaimen ulkopuolella, esimerkiksi palvelimella. Nykyaikaisiin selaimiin on myös saatavilla lisäosia tai laajennuksia, joilla on laajemmat käyttöoikeudet.
+=======
There are ways to interact with the camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency).
- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other page if they come from different sites (from a different domain, protocol or port).
@@ -78,34 +105,53 @@ Examples of such restrictions include:

Such limitations do not exist if JavaScript is used outside of the browser, for example on a server. Modern browsers also allow plugins/extensions which may ask for extended permissions.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-## What makes JavaScript unique?
+## Mikä tekee JavaScriptistä uniikin?
-There are at least *three* great things about JavaScript:
+JavaScriptissä on ainakin *kolme* hienoa puolta:
```compare
-+ Full integration with HTML/CSS.
-+ Simple things are done simply.
-+ Supported by all major browsers and enabled by default.
++ Sillä on täysi integraatio HTML:n ja CSS:n kanssa.
++ Siinä tehdään yksinkertaiset asiat yksinkertaisella tavalla.
++ Sillä on kaikkien tärkeiden selainten tuki, ja se on oletuksena käytössä.
```
-JavaScript is the only browser technology that combines these three things.
+JavaScript on ainoa selainten teknologia, johon kaikki kolme kohtaa pätevät.
-That's what makes JavaScript unique. That's why it's the most widespread tool for creating browser interfaces.
+Tämä tekee JavaScriptistä uniikin. Tämän takia se on laajimmalle levinnyt selainten käyttöliittymien luontityökalu.
+<<<<<<< HEAD
+Tämän ohella JavaScriptillä voidaan tehdä myös palvelimia, mobiilisovelluksia, jne.
+=======
That said, JavaScript can be used to create servers, mobile applications, etc.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-## Languages "over" JavaScript
+## JavaScriptin päälle luotuja kieliä
-The syntax of JavaScript does not suit everyone's needs. Different people want different features.
+JavaScriptin syntaksi ei sovi kaikkien tarpeisiin. Eri ihmiset haluavat eri toimintoja.
-That's to be expected, because projects and requirements are different for everyone.
+Tämä on oletettavaa, koska kaikki projektit ja niiden vaatimukset ovat erilaisia.
+<<<<<<< HEAD
+Näin ollen viime aikoina on ilmestynyt monia kieliä, jotka muunnetaan JavaScriptiksi ennen niiden suorittamista selaimessa.
+=======
So, recently a plethora of new languages appeared, which are *transpiled* (converted) to JavaScript before they run in the browser.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
+
+Nykyaikaisten työkalujen avulla muuntaminen on todella nopeaa ja läpinäkyvää ja niiden avulla sovelluskehittäjät voivat kirjoittaa koodia toisella kielellä, joka muunnetaan "kulissien takana" automaattisesti.
-Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it "under the hood".
+Esimerkkejä tällaisista kielistä:
-Examples of such languages:
+<<<<<<< HEAD
+- [CoffeeScript](http://coffeescript.org/) on niin sanottua syntaksisokeria JavaScriptille. Se mahdollistaa lyhyemmän syntaksin, jonka avulla voidaan kirjoittaa selkeämpää ja tarkempaa koodia. Ruby-devaajat yleensä pitävät siitä.
+- [TypeScript](http://www.typescriptlang.org/) keskittyy "vahvaan tyypitykseen" yksinkertaistaakseen sovelluskehitystä ja tukeakseen monimutkaisia systeemejä. Sen on kehittänyt Microsoft.
+- [Flow](http://flow.org/) tuo mukanaan vahvan tyypityksen, mutta eri tavalla. Sen on kehittänyt Facebook.
+- [Dart](https://www.dartlang.org/) on oma kielensä, jolla on oma moottori, joka suorittaa koodia selaimen ulkopuolella (esimerkiksi mobiilisovelluksissa), mutta sekin on muunnettavissa JavaScriptiksi. Sen on kehittänyt Google.
+- [Brython](https://brython.info/) muuntaa Pythonia JavaScriptiksi ja sallii sovellusten kirjoittamisen puhtaasti Pythonilla ilman JavaScriptiä.
+- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) on moderni, tiivis ja turvallinen ohjelmointikieli, joka toimii selaimessa tai Nodessa.
+Lisääkin esimerkkejä löytyy. Silti, vaikka käytämme jotain muunnettavaa kieltä, meidän on tunnettava JavaScriptiä ymmärtääksemme, mitä todella olemme tekemässä.
+=======
- [CoffeeScript](https://coffeescript.org/) is "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it.
- [TypeScript](https://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft.
- [Flow](https://flow.org/) also adds data typing, but in a different way. Developed by Facebook.
@@ -114,9 +160,10 @@ Examples of such languages:
- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) is a modern, concise and safe programming language that can target the browser or Node.
There are more. Of course, even if we use one of these transpiled languages, we should also know JavaScript to really understand what we're doing.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-## Summary
+## Yhteenveto
-- JavaScript was initially created as a browser-only language, but it is now used in many other environments as well.
-- Today, JavaScript has a unique position as the most widely-adopted browser language, fully integrated with HTML/CSS.
-- There are many languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
+- JavaScript suunniteltiin alunperin vain selaimessa käytettäväksi kieleksi, mutta sitä käytetään nykyisin myös monissa muissa ympäristöissä.
+- JavaScriptillä on nykyisin uniikki asema laajimmin käytettynä selainkielenä, joka integroituu täysin HTML:ään ja CSS:ään.
+- Monet JavaScriptiksi "muunnettavat" kielet tuovat mukanaan tiettyjä toimintoja. On suositeltavaa tutustua niihin, ainakin lyhyesti, kun JavaScript on hallussa.
diff --git a/1-js/01-getting-started/2-manuals-specifications/article.md b/1-js/01-getting-started/2-manuals-specifications/article.md
index 3fa243336..316a93709 100644
--- a/1-js/01-getting-started/2-manuals-specifications/article.md
+++ b/1-js/01-getting-started/2-manuals-specifications/article.md
@@ -1,37 +1,58 @@
-# Manuals and specifications
+# Oppaat ja määrittelyt
+<<<<<<< HEAD
+Tämä kirja on *tutoriaali*. Sen tavoitteena on auttaa sinua oppimaan kielen asteittain. Kun tunnet perusteet, tarvitset kuitenkin muita lähteitä.
+=======
This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other resources.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-## Specification
+## Määrittely
-[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contains the most in-depth, detailed and formalized information about JavaScript. It defines the language.
+[ECMA-262 määrittely](https://www.ecma-international.org/publications/standards/Ecma-262.htm) sisältää kaikkein tarkinta, yksityiskohtaisinta ja virallisinta tietoa JavaScriptistä. Se määrittelee kielen.
-But being that formalized, it's difficult to understand at first. So if you need the most trustworthy source of information about the language details, the specification is the right place. But it's not for everyday use.
+Koska tieto on niin virallista, se on aluksi vaikeaa ymmärtää. Jos siis tarvitset kaikkein luotettavinta tietoa kielen yksityiskohdista, määrittely on sille oikea paikka. Se ei kuitenkaan ole jokapäiväiseen käyttöön.
+<<<<<<< HEAD
+Uusi määrittely julkaistaan joka vuosi. Julkaisujen välillä uusimman määrittelyn luonnos löytyy osoitteesta .
+=======
A new specification version is released every year. Between these releases, the latest specification draft is at .
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-To read about new bleeding-edge features, including those that are "almost standard" (so-called "stage 3"), see proposals at .
+Lukeaksesi kaikkein uusimmista toiminnoista, mukaan lukien niistä, jotka ovat "melkein standardisoitu" (niin sanottu "taso 3"), katso "proposals" (suom. ehdotukset) osoitteessa .
-Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial.
+Jos kehität selainsovelluksia, tämän tutoriaalin [toisessa osassa](info:browser-environment) on mainittu muitakin määrittelyjä.
-## Manuals
+## Oppaat
-- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc.
+- **MDN (Mozilla) JavaScript Reference** on tärkein opas, joka sisältää esimerkkejä ja muuta tietoa. Se on hyvä tarkemman tiedon lähde yksittäisille funktioille, metodeille, jne.
+<<<<<<< HEAD
+ Opas löytyy osoitteesta .
+
+Toisaalta usein on parasta käyttää internethakuja. Käytä vain muotoa "MDN [termi]" hakusanassa, esim. etsiessäsi tietoa `parseInt` funktiosta.
+=======
You can find it at .
Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. to search for the `parseInt` function.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
+
+## Yhteensopivuustaulukot
-## Compatibility tables
+JavaScript on kehittyvä kieli ja uusia toimintoja lisätään säännöllisesti.
-JavaScript is a developing language, new features get added regularly.
+Nähdäksesi niiden yhteensopivuuden eri selainpohjaisissa ja muissa moottoreissa, katso:
-To see their support among browser-based and other engines, see:
+<<<<<<< HEAD
+- - toimintokohtaiset yhteensopivuustaulukot, esim. nähdäksesi, mitkä moottorit ovat yhteensopivia nykyaikaisten salausfunktioiden kanssa: .
+- - kielen toimintoja ja niiden kanssa yhteensopivia moottoreita sisältävä taulukko
+Kaikki nämä tietolähteet ovat hyödyllisiä todellisen elämän sovelluskehityksessä, koska ne sisältävät arvokasta tietoa kielen yksityiskohdista, niiden yhteensopivuudesta, jne.
+=======
- - per-feature tables of support, e.g. to see which engines support modern cryptography functions: .
- - a table with language features and engines that support those or don't support.
All these resources are useful in real-life development, as they contain valuable information about language details, their support, etc.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-Please remember them (or this page) for the cases when you need in-depth information about a particular feature.
+Ne (tai tämä sivu) kannattaa muistaa, kun tarvitset tarkempaa tietoa tietystä toiminnosta.
diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
index ca6194741..751e15b3d 100644
--- a/1-js/01-getting-started/3-code-editors/article.md
+++ b/1-js/01-getting-started/3-code-editors/article.md
@@ -1,49 +1,75 @@
-# Code editors
+# Koodieditorit
-A code editor is the place where programmers spend most of their time.
+Ohjelmoijat viettävät suurimman osan ajastaan koodieditorissa.
-There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type.
+Koodieditoreja on pääasiassa kahdenlaisia: IDE:t ja kevyet editorit. Monet ihmiset käyttävät yhtä työkalua kustakin tyypistä.
## IDE
-The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment."
+Termi [IDE](https://fi.wikipedia.org/wiki/Ohjelmointiymp%C3%A4rist%C3%B6) (Integrated Development Environment, suom. integroitu ohjelmointiympäristö) viittaa tehokkaaseen editoriin, joka sisältää monia "koko projektiin" liittyviä toimintoja. Nimensä mukaisesti kyseessä ei ole pelkkä editori vaan kokonainen "ohjelmointiympäristö."
-An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff.
+IDE lataa projektin (joka voi sisältää monia tiedostoja), mahdollistaa navigoinnin tiedostojen välillä, tarjoaa kirjoitetun tekstin automaattista täydennystä koko projektin perusteella (ei pelkästään auki olevan tiedoston) sekä integroituu versionhallintajärjestelmään (esim. [git](https://git-scm.com/)), testiympäristöön ja muihin "projektitason" juttuihin.
-If you haven't selected an IDE yet, consider the following options:
+Jos et ole vielä valinnut IDE:tä, harkitse seuraavia:
+<<<<<<< HEAD
+- [Visual Studio Code](https://code.visualstudio.com/) (järjestelmäriippumaton, ilmainen).
+- [WebStorm](http://www.jetbrains.com/webstorm/) (järjestelmäriippumaton, maksullinen).
+=======
- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid).
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/).
+Windowsille on saatavilla myös "Visual Studio", joka ei ole sama kuin "Visual Studio Code". "Visual Studio" on maksullinen ja mahdikas editori pelkästään Windowsille ja sopii loistavasti .NET-alustalle. Se on hyvä myös JavaScriptille. Saatavilla on myös ilmaisversio [Visual Studio Community](https://www.visualstudio.com/vs/community/).
-Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
+Monet IDE:t ovat maksullisia, mutta niihin on saatavilla ilmaisia kokeilujaksoja. Lisäksi niiden hinta on yleensä mitätön pätevän sovelluskehittäjän palkkaan verrattuna, joten valitse vain sinulle parhaiten sopiva vaihtoehto.
-## Lightweight editors
+## Kevyet editorit
-"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
+"Kevyet editorit" eivät ole yhtä tehokkaita kuin IDE:t, mutta ne ovat nopeita, hienostuneita ja yksinkertaisia.
-They are mainly used to open and edit a file instantly.
+Niitä käytetään pääasiassa yksittäisen tiedoston nopeaan avaamiseen ja muokkaamiseen.
-The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file.
+Olennaisin ero "kevyen editorin" ja "IDE:n" välillä on, että IDE toimii projektitasolla eli se lataa käynnistyessään enemmän tietoja, analysoi tarvittaessa projektin rakenteen ja niin edelleen. Kevyt editori on paljon nopeampi, jos käsitellään vain yhtä tiedostoa.
-In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
+Käytännössä kevyihin editoreihin voi olla saatavilla monia lisäosia mukaan lukien sellaisia, jotka tekevät kansiotason syntaksin analysointia tai tarjoavat kirjoitetun tekstin automaattista täydennystä, joten editorityyppien välillä ei ole selkeää rajausta.
+<<<<<<< HEAD
+Seuraavat vaihtoehdot ansaitsevat huomiosi:
+
+<<<<<<< HEAD
+- [Atom](https://atom.io/) (järjestelmäriippumaton, ilmainen).
+- [Visual Studio Code](https://code.visualstudio.com/) (järjestelmäriippumaton, ilmainen).
+- [Sublime Text](http://www.sublimetext.com) (järjestelmäriippumaton, shareware).
+- [Notepad++](https://notepad-plus-plus.org/) (Windows, ilmainen).
+- [Vim](http://www.vim.org/) ja [Emacs](https://www.gnu.org/software/emacs/) ovat myös siistejä, jos tiedät, miten niitä käytetään.
+=======
+- [Atom](https://atom.io/) (cross-platform, free).
+- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
+- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
+- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
+>>>>>>> 291b5c05b99452cf8a0d32bd32426926dbcc0ce0
+=======
There are many options, for instance:
- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
- [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-## Let's not argue
+## Ei riidellä
-The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with.
+Ylle listatut editorit ovat sellaisia, joita minä tai hyvinä ohjelmoijina pitämäni ystäväni olemme käyttäneet pitkään ja joihin olemme olleet tyytyväisiä.
-There are other great editors in our big world. Please choose the one you like the most.
+Suuressa maailmassamme on muitakin hyviä editoreja. Valitse se, josta pidät eniten.
+<<<<<<< HEAD
+Editorin, aivan kuten muidenkin työkalujen, valinta on yksilöllinen päätös ja riippuu omista projekteistasi, tavoistasi ja henkilökohtaisista mieltymyksistäsi.
+=======
The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.
The author's personal opinion:
- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend.
- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language).
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md
index bbe8af920..8a1c87375 100644
--- a/1-js/01-getting-started/4-devtools/article.md
+++ b/1-js/01-getting-started/4-devtools/article.md
@@ -1,63 +1,67 @@
-# Developer console
+# Kehityskonsoli
-Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
+Koodi on altis virheille. Tulet todennäköisesti tekemään virheitä... Tai siis, mitä höpisen? Tulet *takuuvarmasti* tekemään virheitä ainakin, jos olet ihminen etkä [robotti](https://en.wikipedia.org/wiki/Bender_(Futurama)).
-But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
+Selaimessa virheitä ei kuitenkaan oletuksena näe. Jos jokin skriptissä menee pieleen, emme näe mikä on rikki emmekä voi korjata sitä.
-To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
+Nähdäksemme virheet ja paljon muuta hyödyllistä skripteihin liittyvää, selaimiin on upotettu "kehitystyökaluja".
-Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific.
+Useimmat sovelluskehittäjät käyttävät Chromea tai Firefoxia, koska niissä on parhaat kehitystyökalut. Muissakin selaimissa on kehitystyökaluja, mutta ne seuraavat yleensä Chromen ja Firefoxin esimerkkiä. Useimmilla kehittäjillä onkin yksi "lempiselain" ja he käyttävät muita, jos ongelma on selainkohtainen.
-Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
+Kehitystyökalut ovat tehokkaita; niissä on monia toimintoja. Aluksi opimme, miten työkalut saa näkyviin, katsomme virheitä ja ajamme JavaScript-komentoja.
## Google Chrome
-Open the page [bug.html](bug.html).
+Avaa tämä sivu: [bug.html](bug.html).
-There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
+Sivun JavaScript-koodissa on virhe. Se on piilossa tavallisille vierailijoille, joten avataanpa kehitystyökalut, niin näemme sen.
-Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
+Paina `key:F12` tai, jos käytät Macciä, paina `key:Cmd+Opt+J`.
-The developer tools will open on the Console tab by default.
+Kehitystyökalut avautuvat oletuksena konsoliin (Console).
-It looks somewhat like this:
+Sen pitäisi näyttää suurin piirtein tältä:

-The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar.
+Työkalujen tarkka ulkoasu riippuu Chromen versiosta. Tarkka ulkoasu muuttuu silloin tällöin, mutta sen pitäisi näyttää samankaltaiselta.
-- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
-- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.
+- Täällä näemme punaisen virhetekstin. Tässä tapauksessa skripti sisältää tuntemattoman komennon "lalala".
+- Oikealla on klikattava linkki lähteeseen `bug.html:12`, jossa näkyy sen rivin numero, jolta virhe löytyy.
-Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.
+Virhetekstin alla näkyy sininen `>` symboli. Se osoittaa "komentoriviä", johon voimme kirjoittaa JavaScript-komentoja. Paina `key:Enter` suorittaaksesi niitä.
-Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter .
+Näemme nyt virheet, ja se riittää alkuun. Palaamme kehitystyökaluihin myöhemmin ja käsittelemme virheenkorjausta tarkemmin kappaleessa .
-```smart header="Multi-line input"
-Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
+```smart header="Monirivinen syöttö"
+Kun syötämme rivin koodia konsoliin ja painamme `key:Enter`, koodi suoritetaan.
-To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
+Voimme painaa `key:Shift+Enter` syöttääksemme useamman rivin. Näin voimme syöttää pidempiä JavaScript-koodipätkiä.
```
-## Firefox, Edge, and others
+## Firefox, Edge ja muut
-Most other browsers use `key:F12` to open developer tools.
+Suurimmassa osassa selaimista kehittäjätyökalut saa avattua painamalla `key:F12`.
-The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another.
+Niiden ulkoasu ja tuntuma on melko samanlainen. Kun opit käyttämään yhden selaimen työkaluja (voit aloittaa Chromella), toiseen selaimeen vaihtaminen on helppoa.
## Safari
-Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
+Safari (Macin selain, jota Windows/Linux eivät tue) on vähän erityinen. Meidän täytyy ensin ottaa "Develop menu" (suom. "kehitysvalikko") käyttöön.
+<<<<<<< HEAD
+Avaa "Preferences" (suom. "Asetukset") ja mene kohtaan "Advanced" (suom. "Lisäasetukset"). Alaosasta löytyy valinta:
+=======
Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533

-Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options.
+Nyt näppäinyhdistelmällä `key:Cmd+Opt+C` saa avattua konsolin. Huomaa myös, että yläpalkkiin on ilmestynyt uusi valinta "Develop" (suom. "Kehitä"). Sieltä löytyy monia komentoja ja valintoja.
-## Summary
+## Yhteenveto
-- Developer tools allow us to see errors, run commands, examine variables, and much more.
-- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
+- Kehitystyökalujen avulla voimme nähdä virheet, suorittaa komentoja, tutkia muuttujia ja paljon muuta.
+- Työkalut saa suurimmassa osassa Windows-selaimista auki painamalla `key:F12`. Chrome Macillä vaatii näppäinyhdistelmää `key:Cmd+Opt+J`, Safari `key:Cmd+Opt+C` (kun työkalut on ensin otettu käyttöön).
-Now we have the environment ready. In the next section, we'll get down to JavaScript.
+Nyt meillä on kehitysympäristö valmiina. Seuraavassa osiossa paneudumme JavaScriptiin.
diff --git a/1-js/01-getting-started/4-devtools/bug.html b/1-js/01-getting-started/4-devtools/bug.html
index edb02375c..ce70dcfc8 100644
--- a/1-js/01-getting-started/4-devtools/bug.html
+++ b/1-js/01-getting-started/4-devtools/bug.html
@@ -7,7 +7,7 @@
- There is an error in the script on this page.
+ Tällä sivulla on virhe.
diff --git a/1-js/01-getting-started/index.md b/1-js/01-getting-started/index.md
index b327c7860..3aaeddbab 100644
--- a/1-js/01-getting-started/index.md
+++ b/1-js/01-getting-started/index.md
@@ -1,3 +1,3 @@
-# An introduction
+# Johdanto
-About the JavaScript language and the environment to develop with it.
+Tietoa JavaScript-kielestä ja sen kehitysympäristöstä.
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html
index ff1d871b0..055d3475c 100644
--- a/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html
+++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/index.html
@@ -4,7 +4,7 @@
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html
index 45e6744b3..6adbb51a1 100644
--- a/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html
+++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html
@@ -4,7 +4,7 @@
diff --git a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md
index afed6a91d..1e524d7a1 100644
--- a/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md
+++ b/1-js/02-first-steps/01-hello-world/1-hello-alert/task.md
@@ -2,11 +2,11 @@ importance: 5
---
-# Show an alert
+# Näytä alert (ponnahdusikkuna)
-Create a page that shows a message "I'm JavaScript!".
+Luo sivu, joka näyttää viestin "Minä olen JavaScript!".
-Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works.
+Ei ole väliä teetkö sen hiekkalaatikossa vai omalla kovalevylläsi. Varmista vain, että se toimii.
[demo src="solution"]
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js
index 4de725971..92c1c5846 100644
--- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js
+++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js
@@ -1 +1 @@
-alert("I'm JavaScript!");
\ No newline at end of file
+alert("Minä olen JavaScript!");
\ No newline at end of file
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md
index f42c41e6d..3318afe75 100644
--- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md
+++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md
@@ -1,8 +1,8 @@
-The HTML code:
+HTML-koodi:
[html src="index.html"]
-For the file `alert.js` in the same folder:
+Tiedostossa nimeltä `alert.js`, samassa kansiossa:
[js src="alert.js"]
diff --git a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md
index 26168d6a7..035363ed7 100644
--- a/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md
+++ b/1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md
@@ -2,8 +2,8 @@ importance: 5
---
-# Show an alert with an external script
+# Näytä ponnahdusikkuna (alert) erillisen skriptin avulla
-Take the solution of the previous task . Modify it by extracting the script content into an external file `alert.js`, residing in the same folder.
+Ota edellisen tehtävän ratkaisu ja siirrä skriptin sisältö erilliseen tiedostoon nimeltä `alert.js`, joka sijaitsee samassa kansiossa.
-Open the page, ensure that the alert works.
+Avaa sivu ja varmista, että ponnahdusikkuna toimii.
diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md
index 35f82bf5d..543d4722f 100644
--- a/1-js/02-first-steps/01-hello-world/article.md
+++ b/1-js/02-first-steps/01-hello-world/article.md
@@ -1,17 +1,17 @@
-# Hello, world!
+# Hei maailma!
-This part of the tutorial is about core JavaScript, the language itself.
+Tämä osa tutoriaalista keskittyy JavaScriptin ytimeen eli kieleen itseensä.
-But we need a working environment to run our scripts and, since this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum so that you don't spend time on them if you plan to concentrate on another environment (like Node.js). We'll focus on JavaScript in the browser in the [next part](/ui) of the tutorial.
+Tarvitsemme kuitenkin ympäristön, jossa voimme suorittaa skriptimme ja, koska tämä kirja on netissä, selain on hyvä valinta. Pidämme selainkohtaisten komentojen (kuten `alert`) määrän minimissä, jottei sinun tarvitse käyttää niiden oppimiseen aikaan, jos suunnittelet keskittyväsi johonkin muuhun ympäristöön (kuten Node.js) Keskitymme selaimen JavaScriptiin tämän tutoriaalin [seuraavassa osassa](/ui).
-So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`.
+Katsotaan ensin, miten saamme liitettyä skriptin nettisivuun. Palvelinpuolen ympäristöissä (kuten Node.js) voimme suorittaa skriptin esimerkiksi komennolla`"node my.js"`.
-## The "script" tag
+## "script" tunniste
-JavaScript programs can be inserted almost anywhere into an HTML document using the `
*/!*
-
...After the script.
+
...Skriptin jälkeen.
@@ -35,24 +35,24 @@ For instance:
```
```online
-You can run the example by clicking the "Play" button in the right-top corner of the box above.
+Voit suorittaa esimerkin skriptin painamalla "Play" painiketta yllä olevan laatikon oikeassa yläkulmassa.
```
-The `
```
- This trick isn't used in modern JavaScript. These comments hide JavaScript code from old browsers that didn't know how to process the `
+
```
+<<<<<<< HEAD
+Yllä, `/polku/tiedostoon/script.js` tarkoittaa absoluuttista tiedostopolkua skriptiin sivuston juuresta (root). Polun voi kirjoittaa myös nykyisen sivun suhteen. Esimerkiksi `src="script.js"` tarkoittaisi tiedostoa nimeltä `"script.js"` nykyisessä kansiossa.
+=======
Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"`, just like `src="./script.js"`, would mean a file `"script.js"` in the current folder.
+>>>>>>> 291b5c05b99452cf8a0d32bd32426926dbcc0ce0
-We can give a full URL as well. For instance:
+Voimme kirjoittaa myös koko URL-osoitteen. Esimerkiksi:
```html
```
-To attach several scripts, use multiple tags:
+Voit käyttäää useampaa tunnistetta liittääksesi useamman skriptin:
```html
@@ -90,29 +94,29 @@ To attach several scripts, use multiple tags:
```
```smart
-As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files.
+Perussääntönä voidaan pitää, että vain erittäin yksinkertaisia skriptejä kirjoitetaan HTML:ään. Muut skriptit kirjoitetaan erillisiin tiedostoihin.
-The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache).
+Erillisen tiedoston hyötynä on, että selain lataa ja tallentaa sen [välimuistiin](https://fi.wikipedia.org/wiki/V%C3%A4limuisti).
-Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once.
+Jatkossa kaikki sivut, joihin on liitetty sama skripti, voivat lukea sen suoraan välimuistista lataamisen sijaan ja tiedosto itseasiassa ladataan vain kerran.
-That reduces traffic and makes pages faster.
+Tämä vähentää liikennettä ja tekee sivuista nopeampia.
```
-````warn header="If `src` is set, the script content is ignored."
-A single `
```
-We must choose either an external `
@@ -122,11 +126,11 @@ The example above can be split into two scripts to work:
```
````
-## Summary
+## Yhteenveto
-- We can use a ``.
+- Voimme käyttää ``.
-There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many.
+Skripteissä ja niiden vuorovaikutuksessa nettisivun kanssa riittää opittavaa. Pidetään kuitenkin mielessä, että tämä osa tutoriaalista on omistettu JavaScript ohjelmointikielelle, joten meidän ei pidä keskittyä selainkohtaisiin asioihin. Käytämme kuitenkin selainta JavaScriptin suorittamiseen, mikä on erittäin kätevää tässä yhteydessä, mutta silti vain yksi mahdollisista tavoista.
diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md
index e81fd343d..592d66d64 100644
--- a/1-js/02-first-steps/02-structure/article.md
+++ b/1-js/02-first-steps/02-structure/article.md
@@ -1,44 +1,44 @@
-# Code structure
+# Koodin rakenne
-The first thing we'll study is the building blocks of code.
+Ensimmäisenä opiskelemme koodin rakennuspalikoita.
-## Statements
+## Lausekkeet
-Statements are syntax constructs and commands that perform actions.
+Lausunnot ovat syntaksirakenteita ja -komentoja, jotka suorittavat toimintoja.
-We've already seen a statement, `alert('Hello, world!')`, which shows the message "Hello, world!".
+Olemme jo nähneet yhden lausekkeen: `alert('Hei maailma!')`, joka näyttää viestin "Hei maailma!".
-We can have as many statements in our code as we want. Statements can be separated with a semicolon.
+Koodissa voi olla niin monta lauseketta kuin haluamme. Lausekkeet voi erottaa toisistaan puolipisteellä.
-For example, here we split "Hello World" into two alerts:
+Esimerkiksi tässä jaamme "Hei maailma" lausekkeen kahteen lausekkeeseen:
```js run no-beautify
-alert('Hello'); alert('World');
+alert('Hei'); alert('maailma');
```
-Usually, statements are written on separate lines to make the code more readable:
+Tavallisesti lausekkeet kirjoitetaan eri riveille, jotta koodia on helpompi lukea:
```js run no-beautify
-alert('Hello');
-alert('World');
+alert('Hei');
+alert('maailma');
```
-## Semicolons [#semicolon]
+## Puolipisteet [#semicolon]
-A semicolon may be omitted in most cases when a line break exists.
+Puolipisteet voidaan useimmiten jättää kirjoittamatta, jos käytämme rivinvaihtoa.
-This would also work:
+Tämä toimisi myös:
```js run no-beautify
-alert('Hello')
-alert('World')
+alert('Hei')
+alert('maailma')
```
-Here, JavaScript interprets the line break as an "implicit" semicolon. This is called an [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
+Tässä JavaScript tulkitsee rivinvaihdon "implisiittisenä" puolipisteenä. Tätä kutsutaan [puolipisteen automaattiseksi sijoitukseksi](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion).
-**In most cases, a newline implies a semicolon. But "in most cases" does not mean "always"!**
+**Puolipisteen voi useimmiten korvata rivinvaihdolla, mutta "useimmiten" ei ole sama asia kuin "aina"!**
-There are cases when a newline does not mean a semicolon. For example:
+On myös tapauksia, joissa rivinvaihtoa ei tulkita puolipisteeksi. Esimerkiksi:
```js run no-beautify
alert(3 +
@@ -46,14 +46,14 @@ alert(3 +
+ 2);
```
-The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so a semicolon there would be incorrect. And in this case, that works as intended.
+Koodin tulos on `6`, koska JavaScript ei tässä tapauksessa sijoita puolipisteitä. Intuitiivisesti on selvää, että merkkiin `"+"` päättyvä rivi on "epätäydellinen lauseke", joten olisi väärin käyttää tässä puolipistettä ja tässä tapauksessa homma toimii oletetulla tavalla.
-**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.**
+**On kuitenkin olemassa tilanteita, joissa JavaScript ei osaa olettaa puolipistettä, vaikka sitä oikeasti tarvittaisiin.**
-Errors which occur in such cases are quite hard to find and fix.
+Tällaisista tilanteista johtuvia virheitä on vaikea löytää ja korjata.
-````smart header="An example of an error"
-If you're curious to see a concrete example of such an error, check this code out:
+````smart header="Esimerkki virheestä"
+Jos olet utelias näkemään konkreettisen esimerkin tällaisesta virheestä, katso alla olevaa koodia:
```js run
alert("Hello");
@@ -61,9 +61,9 @@ alert("Hello");
[1, 2].forEach(alert);
```
-No need to think about the meaning of the brackets `[]` and `forEach` yet. We'll study them later. For now, just remember the result of running the code: it shows `Hello`, then `1`, then `2`.
+Sinun ei tarvitse vielä miettiä, mitä hakasulkeet `[]` ja `forEach` tarkoittaa. Opiskelemme niitä myöhemmin. Nyt voit vain muistaa, että koodi näyttää ensin `Hello`, sitten `1` ja sitten `2`.
-Now let's remove the semicolon after the `alert`:
+Jätetäänpä sitten puolipiste pois `alert` komennon jälkeen:
```js run no-beautify
alert("Hello")
@@ -71,85 +71,85 @@ alert("Hello")
[1, 2].forEach(alert);
```
-The difference compared to the code above is only one character: the semicolon at the end of the first line is gone.
+Tämän ja ylempänä olevan koodin välillä on vain yhden merkin ero: ensimmäisen rivin perästä puuttuu puolipiste.
-If we run this code, only the first `Hello` shows (and there's an error, you may need to open the console to see it). There are no numbers any more.
+Jos suoritamme tämän koodin, vain ensimmäine `Hello` näkyy (minkä jälkeen on virhe, saatat joutua avaamaan konsolin nähdäksesi sen). Enää ei näy numeroita.
-That's because JavaScript does not assume a semicolon before square brackets `[...]`. So, the code in the last example is treated as a single statement.
+Tämä johtuu siitä, että JavaScript ei osaa olettaa puolipistettä ennen hakasulkeita `[...]`. Tällöin edellisen esimerkin koodia käsitellään yhtenä lausekkeena.
-Here's how the engine sees it:
+Näin moottori näkee koodin:
```js run no-beautify
-alert("Hello")[1, 2].forEach(alert);
+alert("Hello")[1, 2].forEach(alert)
```
-Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly.
+Eikö näytäkkin kummalliselta? Tällainen yhdistyminen on yksinkertaisesti väärin. Meidän on sijoitettava puolipiste `alert` komennon perään, jotta koodi toimisi oikein.
-This can happen in other situations also.
+Näin voi tapahtua muissakin tilanteissa.
````
-We recommend putting semicolons between statements even if they are separated by newlines. This rule is widely adopted by the community. Let's note once again -- *it is possible* to leave out semicolons most of the time. But it's safer -- especially for a beginner -- to use them.
+Suosittelemme käyttämään puolipisteitä lausekkeiden välissä, vaikka ne olisivatkin erotettu toisistaan rivinvaihdolla. Yhteisö soveltaa tätä sääntöä laajalti. Mainitaan vielä kerran, että puolipisteet -- *on mahdollista* -- jättää pois useimmissa tapauksissa. On kuitenkin turvallisempaa -- varsinkin aloittelijalle -- käyttää niitä.
-## Comments [#code-comments]
+## Kommentit [#code-comments]
-As time goes on, programs become more and more complex. It becomes necessary to add *comments* which describe what the code does and why.
+Ajan kuluessa ohjelmista tulee kokoajan monimutkaisempia. Jossain vaiheessa tulee tarpeelliseksi lisätä *kommentteja*, jotka selittävät, miten ja miksi koodi toimii.
-Comments can be put into any place of a script. They don't affect its execution because the engine simply ignores them.
+Kommentteja voi sijoittaa mihin tahansa kohtaan skriptissä. Ne eivät vaikuta koodin suoritukseen, koska moottori yksinkertaisesti jättää ne huomioimatta.
-**One-line comments start with two forward slash characters `//`.**
+**Yhden rivin kommentit alkavat kahdella vinoviivalla `//`.**
-The rest of the line is a comment. It may occupy a full line of its own or follow a statement.
+Loput rivistä luetaan kommentiksi. Kommentti voi olla kokonaan oma rivinsä tai se voidaan sijoittaa lausekkeen perään.
-Like here:
+Kuten tässä:
```js run
-// This comment occupies a line of its own
-alert('Hello');
+// Tämä koko rivi on pelkkää kommenttia
+alert('Hei');
-alert('World'); // This comment follows the statement
+alert('maailma'); // Tämä kommentti on sijoitettu lausekkeen perään
```
-**Multiline comments start with a forward slash and an asterisk /* and end with an asterisk and a forward slash */.**
+**Monen rivin pituiset kommentit aloitetaan vinoviivalla ja asteriskilla /* ja päättyvät asteriskilla ja vinoviivalla */.**
-Like this:
+Kuten tässä:
```js run
-/* An example with two messages.
-This is a multiline comment.
+/* Esimerkki, jossa on kaksi riviä.
+Tämä on monirivinen kommentti.
*/
-alert('Hello');
-alert('World');
+alert('Hei');
+alert('maailma');
```
-The content of comments is ignored, so if we put code inside /* ... */, it won't execute.
+Kommenttien sisältö jätetään huomioimatta, joten niiden sisälle kirjoitettua koodia /* ... */ ei suoriteta.
-Sometimes it can be handy to temporarily disable a part of code:
+Tämä voi joskus olla kätevää, jos haluamme väliaikaisesti ottaa koodinpätkän pois käytöstä:
```js run
-/* Commenting out the code
-alert('Hello');
+/* Pois kommentoitua koodia
+alert('Hei');
*/
-alert('World');
+alert('maailma');
```
-```smart header="Use hotkeys!"
-In most editors, a line of code can be commented out by pressing the `key:Ctrl+/` hotkey for a single-line comment and something like `key:Ctrl+Shift+/` -- for multiline comments (select a piece of code and press the hotkey). For Mac, try `key:Cmd` instead of `key:Ctrl` and `key:Option` instead of `key:Shift`.
+```smart header="Käytä pikanäppäimiä!"
+Useimmissa editoreissa koodirivin voi kommentoida pois käytöstä painamalla `key:Ctrl+/` pikanäppäimiä yhden rivin kommenteille ja esimerkiksi `key:Ctrl+Shift+/` monirivisille kommenteille (valitse koodinpätkä ja paina pikanäppäimiä). Jos käytät Macciä, kokeile käyttää `key:Cmd` näppäintä `key:Ctrl` näppäimen sijaan ja `key:Option` näppäintä `key:Shift` näppäimen sijaan.
```
-````warn header="Nested comments are not supported!"
-There may not be `/*...*/` inside another `/*...*/`.
+````warn header="Sisäkkäisiä kommentteja ei tueta!"
+Kommentin `/*...*/` sisällä ei voi olla toista kommenttia `/*...*/`.
-Such code will die with an error:
+Tällainen koodi kaatuu virheeseen:
```js run no-beautify
/*
- /* nested comment ?!? */
+ /* sisäkkäinen kommentti ?!? */
*/
-alert( 'World' );
+alert( 'maailma' );
```
````
-Please, don't hesitate to comment your code.
+Älä epäröi kommentoida koodiasi.
-Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify code before publishing to a production server. They remove comments, so they don't appear in the working scripts. Therefore, comments do not have negative effects on production at all.
+Kommentit kasvattavat koodin jalanjälkeä, mutta se ei ole mikään ongelma. On olemassa monia työkaluja, jotka lyhentävät koodia ennen julkaisemista tuotantopalvelimelle. Ne poistavat kommentit, jotta ne eivät näy lopullisissa skripteissä. Kommenteilla ei siis ole mitään kielteistä vaikutusta lopulliseen koodiin.
-Later in the tutorial there will be a chapter that also explains how to write better comments.
+Myöhemmin tässä tutoriaalissa on kappale nimeltä , jossa käydään läpi myös hyvien kommenttien kirjoittamista.
diff --git a/1-js/02-first-steps/03-strict-mode/article.md b/1-js/02-first-steps/03-strict-mode/article.md
index 9586733cc..254e40bb3 100644
--- a/1-js/02-first-steps/03-strict-mode/article.md
+++ b/1-js/02-first-steps/03-strict-mode/article.md
@@ -1,89 +1,89 @@
-# The modern mode, "use strict"
+# Moderni tila, "use strict"
-For a long time, JavaScript evolved without compatibility issues. New features were added to the language while old functionality didn't change.
+JavaScript kehittyi pitkään ilman yhteensopivuusongelmia. Uusia toimintoja lisättiin samalla kun vanhat pysyivät ennallaan.
-That had the benefit of never breaking existing code. But the downside was that any mistake or an imperfect decision made by JavaScript's creators got stuck in the language forever.
+Tämän etuna oli, että vanha koodi ei koskaan lakannut toimimasta. Haittapuolena oli kuitenkin se, että jokainen JavaScriptin kehittäjien virhe tai epätäydellinen päätös jäi kieleen pysyvästi.
-This was the case until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most such modifications are off by default. You need to explicitly enable them with a special directive: `"use strict"`.
+Tämä muuttui vuonna 2009, kun ECMAScript 5 (ES5) ilmestyi. Se lisäsi kieleen toimintoja ja samalla muutti joitain olemassa olevista toiminnoista. Vanhan koodin toimimisen varmistamiseksi, muokkaukset ovat oletuksena poissa käytöstä. Ne on erikseen otettava käyttöön `"use strict"` (suom. "käytä täsmällistä") direktiivillä.
## "use strict"
-The directive looks like a string: `"use strict"` or `'use strict'`. When it is located at the top of a script, the whole script works the "modern" way.
+Direktiivi näyttää merkkijonolta: `"use strict"` tai `'use strict'`. Kun se sijoitetaan skriptin alkuun, koko skripti toimii "modernilla" tavalla.
-For example:
+Esimerkiksi:
```js
"use strict";
-// this code works the modern way
+// tämä koodi toimii modernilla tavalla
...
```
-Quite soon we're going to learn functions (a way to group commands), so let's note in advance that `"use strict"` can be put at the beginning of a function. Doing that enables strict mode in that function only. But usually people use it for the whole script.
+Tulemme pian oppimaan funktioista (tapa ryhmitellä komentoja), joten mainitaan jo etukäteen, että `"use strict"` toimii myös funktioiden alussa. Tällöin strict-tila on käytössä vain kyseisessä funktiossa. Useimmiten direktiiviä käytetään kuitenkin koko skriptille.
-````warn header="Ensure that \"use strict\" is at the top"
-Please make sure that `"use strict"` is at the top of your scripts, otherwise strict mode may not be enabled.
+````warn header="Varmista, että \"use strict\" on heti alussa"
+Pidä huolta, että `"use strict"` on sijoitettu heti skriptin alkuun. Muussa tapauksessa strict-tilaa ei välttämättä oteta käyttöön.
-Strict mode isn't enabled here:
+Strict-tila on käytössä tässä:
```js no-strict
-alert("some code");
-// "use strict" below is ignored--it must be at the top
+alert("jotain koodia");
+// "use strict" alla jätetään huomioimatta, sen on oltava heti alussa
"use strict";
-// strict mode is not activated
+// strict-tila ei ole käytössä
```
-Only comments may appear above `"use strict"`.
+Vain kommentteja voi sijoittaa `"use strict"` direktiivin yläpuolelle.
````
-```warn header="There's no way to cancel `use strict`"
-There is no directive like `"no use strict"` that reverts the engine to old behavior.
+```warn header="Strict-tilaa ei voi peruuttaa"
+Ei ole olemassa direktiiviä kuten `"no use strict"` (suom. "ei-käytä täsmällistä"), joka palauttaisi moottorin vanhaan tapaan.
-Once we enter strict mode, there's no going back.
+Kun otamme strict-tilan käyttöön, emme voi perua sitä.
```
-## Browser console
+## Selaimen konsoli
-When you use a [developer console](info:devtools) to run code, please note that it doesn't `use strict` by default.
+Muista, että strict-tila ei ole oletuksena käytössä, kun käytät [kehityskonsolia](info:devtools).
-Sometimes, when `use strict` makes a difference, you'll get incorrect results.
+Joissain tilanteissa, joihin `use strict` vaikuttaa, voit saada vääränlaisia tuloksia.
-So, how to actually `use strict` in the console?
+No, miten strict-tilaa käytetään konsolissa?
-First, you can try to press `key:Shift+Enter` to input multiple lines, and put `use strict` on top, like this:
+Voit kokeilla ensin painaa `key:Shift+Enter` kirjoittaaksesi usealle riville ja kirjoittaa alkuun `use strict`, tähän tapaan:
```js
-'use strict';
-// ...your code
-
+'use strict';
+// ...sinun koodisi
+
```
-It works in most browsers, namely Firefox and Chrome.
+Tämä toimii useimmissa selaimissa, ainakin Firefoxissa and Chromessa.
-If it doesn't, e.g. in an old browser, there's an ugly, but reliable way to ensure `use strict`. Put it inside this kind of wrapper:
+Jos tämä ei toimi, esimerkiksi vanhassa selaimessa, voit käyttää rumaa, mutta varmaa tapaa. Sijoita `use strict` tällä tapaa:
```js
(function() {
'use strict';
- // ...your code here...
+ // ...sinun koodisi tähän...
})()
```
-## Should we "use strict"?
+## Pitääkö strict-tilaa käyttää?
-The question may sound obvious, but it's not so.
+Tämä saattaa vaikuttaa itsestäänselvältä, mutta se ei ole.
-One could recommend to start scripts with `"use strict"`... But you know what's cool?
+Joku voi suositella, että skriptien alkuun lisätään `"use strict"`... Mutta tiedätkö mikä on siistiä?
-Modern JavaScript supports "classes" and "modules" - advanced language structures (we'll surely get to them), that enable `use strict` automatically. So we don't need to add the `"use strict"` directive, if we use them.
+Moderni JavaScript tukee olioita (class) ja moduuleja (module) - kielen edistyneitä rakenteita (tutustumme niihin tietysti myöhemmin), jotka automaattiseti ottavat käyttöön strict-tilan. Meidän ei siis tarvitse käyttää `"use strict"` direktiivitä, jos käytämme niitä.
-**So, for now `"use strict";` is a welcome guest at the top of your scripts. Later, when your code is all in classes and modules, you may omit it.**
+**Eli toistaiseksi `"use strict";` on tervetullut vieras skriptiesi alussa. Myöhemmin, kun koodisi on olioissa ja moduuleissa, voit jättää sen pois.**
-As of now, we've got to know about `use strict` in general.
+Olemme nyt tutustuneet strict-tilaan yleisesti.
-In the next chapters, as we learn language features, we'll see the differences between the strict and old modes. Luckily, there aren't many and they actually make our lives better.
+Myöhemminssä kappaleissa, kun opimme lisää JavaScriptista, näemme strict-tilan ja vanhan tilan eroavaisuuksia paremmin. Onneksi niitä ei ole kovin paljon ja ne itseasiassa tekevät elämästämme helpompaa.
-All examples in this tutorial assume strict mode unless (very rarely) specified otherwise.
+Kaikki tämän tutoriaalin esimerkit olettavat strict-tilan olevan käytössä ellei (todella harvinaisissa tapauksissa) muuta ole mainittu.
diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/solution.md b/1-js/02-first-steps/04-variables/1-hello-variables/solution.md
index 9249e1c84..adc658c19 100644
--- a/1-js/02-first-steps/04-variables/1-hello-variables/solution.md
+++ b/1-js/02-first-steps/04-variables/1-hello-variables/solution.md
@@ -1,7 +1,7 @@
-In the code below, each line corresponds to the item in the task list.
+Alla olevassa koodissa kukin rivi vastaa tehtävänannon kohtia.
```js run
-let admin, name; // can declare two variables at once
+let admin, name; // kaksi muuttujaa voi esitellä kerralla
name = "John";
diff --git a/1-js/02-first-steps/04-variables/1-hello-variables/task.md b/1-js/02-first-steps/04-variables/1-hello-variables/task.md
index 84f009e8c..7f2d7fc86 100644
--- a/1-js/02-first-steps/04-variables/1-hello-variables/task.md
+++ b/1-js/02-first-steps/04-variables/1-hello-variables/task.md
@@ -2,9 +2,9 @@ importance: 2
---
-# Working with variables
+# Muuttujien käsittely
-1. Declare two variables: `admin` and `name`.
-2. Assign the value `"John"` to `name`.
-3. Copy the value from `name` to `admin`.
-4. Show the value of `admin` using `alert` (must output "John").
+1. Esittele kaksi muuttujaa: `admin` ja `name`.
+2. Anna arvo `"John"` muuttujalle `name`.
+3. Kopioi muuttujan `name` arvo muuttujaan `admin`.
+4. Näytä muuttujan `admin` arvo käyttämällä `alert` komentoa (tuloksen on oltava "John").
diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
index 392f4e26f..7ea8467de 100644
--- a/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
+++ b/1-js/02-first-steps/04-variables/2-declare-variables/solution.md
@@ -1,21 +1,21 @@
-## The variable for our planet
+## Muuttuja planeettamme nimelle
-That's simple:
+Tämä on yksinkertaista:
```js
let ourPlanetName = "Earth";
```
-Note, we could use a shorter name `planet`, but it might not be obvious what planet it refers to. It's nice to be more verbose. At least until the variable isNotTooLong.
+Huomaa, että voisimme käyttää myös lyhyempää nimeä `planet`, mutta silloin ei olisi selvää, mihin planeettaan viitataan. On hyvä olla kuvaava. Ainakin kunnes muuttujan nimiOnLiianPitka.
-## The name of the current visitor
+## Nykyisen vierailijan nimi
```js
let currentUserName = "John";
```
-Again, we could shorten that to `userName` if we know for sure that the user is current.
+Voisimme taas lyhentää tämän muotoon `userName`, jos tiedämme varmasti, että kyseessä on tämänhetkinen käyttäjä.
-Modern editors and autocomplete make long variable names easy to write. Don't save on them. A name with 3 words in it is fine.
+Nykyaikaiset editorit ja automaattinen tekstintäyttö tekevät pitkistä muuttujien nimistä helppoja kirjoittaa. Älä säästele niistä. Kolmesanainen nimi käy hyvin.
-And if your editor does not have proper autocompletion, get [a new one](/code-editors).
+Ja jos editorisi ei tuoe automaattista tekstintäyttöä, hanki [uusi](/code-editors).
diff --git a/1-js/02-first-steps/04-variables/2-declare-variables/task.md b/1-js/02-first-steps/04-variables/2-declare-variables/task.md
index f364badf4..0e7c109d0 100644
--- a/1-js/02-first-steps/04-variables/2-declare-variables/task.md
+++ b/1-js/02-first-steps/04-variables/2-declare-variables/task.md
@@ -2,7 +2,7 @@ importance: 3
---
-# Giving the right name
+# Oikea nimeämistapa
-1. Create a variable with the name of our planet. How would you name such a variable?
-2. Create a variable to store the name of a current visitor to a website. How would you name that variable?
+1. Luo muuttuja, joka saa arvokseen planeettamme nimen. Miten nimeäisit tällaisen muuttujan?
+2. Luo muuttuja, joka saa arvokseen nettisivun tämänhetkisen käyttänän nimen. Miten nimeäisit tämän muuttujan?
diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
index acd643fde..7c4b82be8 100644
--- a/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
+++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/solution.md
@@ -1,5 +1,5 @@
-We generally use upper case for constants that are "hard-coded". Or, in other words, when the value is known prior to execution and directly written into the code.
+Yleisesti käytämme vakiomuuttujissa isoja kirjaimia, jos ne on "kovakoodattu". Eli, toisin sanoen, kun niiden arvo tunnetaan ennen koodin suorittamista ja kirjoitetaan suoraan koodiin.
-In this code, `birthday` is exactly like that. So we could use the upper case for it.
+Tässä koodissa, `birthday` on juuri tuollainen. Käyttäisimme siis sen yhteydessä isoja kirjaimia.
-In contrast, `age` is evaluated in run-time. Today we have one age, a year after we'll have another one. It is constant in a sense that it does not change through the code execution. But it is a bit "less of a constant" than `birthday`: it is calculated, so we should keep the lower case for it.
+Tätä vastoin `age` määritellään koodin suorittamisen aikana. Tänään meillä on yksi ikä, vuoden päästä toinen. Muuttuja on vakio siinä mielessä, että se ei muutu koodin suorituksen aikana. Se on kuitenkin vähän "vähemmän vakio" kuin `birthday`: se lasketaan, joten käytämme siinä pieniä kirjaimia.
diff --git a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
index f3c208a74..fbbea6e5d 100644
--- a/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
+++ b/1-js/02-first-steps/04-variables/3-uppercast-constant/task.md
@@ -2,9 +2,9 @@ importance: 4
---
-# Uppercase const?
+# Isokirjaiminen const?
-Examine the following code:
+Tutki seuraavaa koodia:
```js
const birthday = '18.04.1982';
@@ -12,14 +12,24 @@ const birthday = '18.04.1982';
const age = someCode(birthday);
```
+<<<<<<< HEAD
+Meillä on vakiomuuttuja `birthday` päivämäärä ja `age` lasketaan muuttujan `birthday` avulla jonkin koodin avulla (sitä ei ole tässä näkyvillä, koska yksityiskohdilla ei ole tässä kohtaa merkitystä).
+=======
Here we have a constant `birthday` for the date, and also the `age` constant.
The `age` is calculated from `birthday` using `someCode()`, which means a function call that we didn't explain yet (we will soon!), but the details don't matter here, the point is that `age` is calculated somehow based on the `birthday`.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-Would it be right to use upper case for `birthday`? For `age`? Or even for both?
+Käyttäisitkö isoja kirjaimia muuttujalle `birthday`? Entä `age`? Tai jopa molemmissa?
```js
+<<<<<<< HEAD
+const BIRTHDAY = '18.04.1982'; // käytä isoja kirjaimia?
+
+const AGE = someCode(BIRTHDAY); // käytä isoja kirjaimia?
+=======
const BIRTHDAY = '18.04.1982'; // make birthday uppercase?
const AGE = someCode(BIRTHDAY); // make age uppercase?
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
```
diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md
index e91d0ea7e..c9608c168 100644
--- a/1-js/02-first-steps/04-variables/article.md
+++ b/1-js/02-first-steps/04-variables/article.md
@@ -1,61 +1,61 @@
-# Variables
+# Muuttujat
-Most of the time, a JavaScript application needs to work with information. Here are two examples:
-1. An online shop -- the information might include goods being sold and a shopping cart.
-2. A chat application -- the information might include users, messages, and much more.
+JavaScript ohjelmien täytyy useimmiten käsitellä tietoa. Tässä on kaksi esimerkkiä:
+1. Verkkokauppa -- tiedot voisivat sisältää myytäviä tuotteita ja ostoskorin.
+2. Chat sovellus -- tiedot voisivat sisältää käyttäjiä, viestejä ja paljon muuta.
-Variables are used to store this information.
+Näiden tietojen varastoimiseen käytetään muuttujia.
-## A variable
+## Muuttuja
-A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors, and other data.
+[Muuttuja](https://fi.wikipedia.org/wiki/Muuttuja_(ohjelmointi)) on nimetty tietovarasto tiedolle. Voimme käyttää muuttujia varastoimaan kaupan hyödykkeitä, vierailijoita ja muuta dataa.
-To create a variable in JavaScript, use the `let` keyword.
+Luodaksesi muuttujan JavaScriptissa, käytä avainsanaa `let`.
-The statement below creates (in other words: *declares*) a variable with the name "message":
+Alla oleva lauseke luo (toisin sanoen: *esittelee*) muuttujan, jonka nimi on "message":
```js
let message;
```
-Now, we can put some data into it by using the assignment operator `=`:
+Voimme nyt varastoida siihen tietoja käyttämällä sijoitus operaattoria `=`:
```js
let message;
*!*
-message = 'Hello'; // store the string 'Hello' in the variable named message
+message = 'Hello'; // varastoidaan merkkijono 'Hello' muuttujaan nimeltä message
*/!*
```
-The string is now saved into the memory area associated with the variable. We can access it using the variable name:
+Merkkijono on nyt varastoitu muistin osaan, joka on liitetty muuttujaan. Pääsemme siihen käsiksi muuttujan nimen avulla:
```js run
let message;
message = 'Hello!';
*!*
-alert(message); // shows the variable content
+alert(message); // näyttää muuttujan sisällön
*/!*
```
-To be concise, we can combine the variable declaration and assignment into a single line:
+Tiiviyden vuoksi voimme yhdistää muuttujan esittelyn ja arvon sijoituksen yhteen riviin:
```js run
-let message = 'Hello!'; // define the variable and assign the value
+let message = 'Hello!'; // esitellään muuttuja ja sijoitetaan arvo
alert(message); // Hello!
```
-We can also declare multiple variables in one line:
+Voimme myös esitellä useamman muuttujan yhdellä rivillä:
```js no-beautify
let user = 'John', age = 25, message = 'Hello';
```
-That might seem shorter, but we don't recommend it. For the sake of better readability, please use a single line per variable.
+Tuo näyttää lyhyemmältä, mutta emme suosittele sitä. Paremman luettavuuden vuoksi kannattaa käyttää yhtä riviä per muuttuja.
-The multiline variant is a bit longer, but easier to read:
+Monirivinen versio on vähän pidempi, mutta se on helpompi lukea:
```js
let user = 'John';
@@ -63,15 +63,19 @@ let age = 25;
let message = 'Hello';
```
+<<<<<<< HEAD
+Jotkut ihmiset esittelevät useampia muuttujia monella rivillä myös tällaisella tavalla:
+=======
Some people also define multiple variables in this multiline style:
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
```js no-beautify
let user = 'John',
age = 25,
message = 'Hello';
```
-...Or even in the "comma-first" style:
+...Tai jopa "pilkku ensin" tyylillä:
```js no-beautify
let user = 'John'
@@ -79,47 +83,61 @@ let user = 'John'
, message = 'Hello';
```
-Technically, all these variants do the same thing. So, it's a matter of personal taste and aesthetics.
+Teknisesti kaikki nämä vaihtoehdot tekevät saman asian. On siis kyse lähinnä henkilökohtaisista mieltymyksistä ja estetiikasta.
````smart header="`var` instead of `let`"
-In older scripts, you may also find another keyword: `var` instead of `let`:
+Vanhemmissa skripteissä saattaa esiintyä myös `var` avainsana `let`:n sijaan:
```js
*!*var*/!* message = 'Hello';
```
+<<<<<<< HEAD
+Tämä `var` avainsana on *lähes* sama asia kuin `let`. Myös se esittelee muuttujan, mutta vähän erilaisella, "vanhanaikaisella" tavalla.
+
+Avainsanojen `let` ja `var` välillä on pieniä eroja, mutta ne eivät vielä vaikuta meihin. Käsittelemme niitä yksityiskohtaisesti kappaleessa .
+=======
The `var` keyword is *almost* the same as `let`. It also declares a variable but in a slightly different, "old-school" way.
There are subtle differences between `let` and `var`, but they do not matter to us yet. We'll cover them in detail in the chapter .
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
````
-## A real-life analogy
+## Tosielämän analogia
-We can easily grasp the concept of a "variable" if we imagine it as a "box" for data, with a uniquely-named sticker on it.
+On helpompi ymmärtää "muuttuja" käsite, jos kuvittelemme sen olevan "laatikko" datalle, jossa on uniikki nimitarra.
+<<<<<<< HEAD
+Esimerkiksi muuttuja `message` voidaan kuvitella laatikoksi, joka on merkattu `"message"` tarralla ja jonka sisällä on arvo `"Hello!"`:
+=======
For instance, the variable `message` can be imagined as a box labelled `"message"` with the value `"Hello!"` in it:
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533

-We can put any value in the box.
+Voimme laittaa laatikkoon minkä tahansa arvon.
+<<<<<<< HEAD
+Voimme myös muuttaa sitä niin usein kuin haluamme:
+=======
We can also change it as many times as we want:
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
```js run
let message;
message = 'Hello!';
-message = 'World!'; // value changed
+message = 'World!'; // arvo muuttuu
alert(message);
```
-When the value is changed, the old data is removed from the variable:
+Kun arvoa muutetaan, vanha data poistetaan muuttujasta:

-We can also declare two variables and copy data from one into the other.
+Voimme myös esitellä kaksi muuttujaa ja kopioida dataa niiden välillä.
```js run
let hello = 'Hello world!';
@@ -127,113 +145,135 @@ let hello = 'Hello world!';
let message;
*!*
-// copy 'Hello world' from hello into message
+// kopioidaan 'Hello world' hello-muuttujasta message-muuttujaan
message = hello;
*/!*
-// now two variables hold the same data
+// nyt kahdessa muuttujassa on sama arvo
alert(hello); // Hello world!
alert(message); // Hello world!
```
-````warn header="Declaring twice triggers an error"
-A variable should be declared only once.
+````warn header="Kahdesti esitteleminen aiheuttaa virheen"
+Muuttujan voi esitellä vain kerran.
-A repeated declaration of the same variable is an error:
+Saman muuttujan esitteleminen useamman kerran aiheuttaa virheen:
```js run
let message = "This";
-// repeated 'let' leads to an error
+// toistuva 'let' johtaa virheeseen
let message = "That"; // SyntaxError: 'message' has already been declared
```
-So, we should declare a variable once and then refer to it without `let`.
+Meidän pitää siis esitellä muuttuja kerran ja sen jälkeen viitata siihen ilman `let` avainsanaa.
````
+<<<<<<< HEAD
+```smart header="Funktionaaliset kielet"
+On mielenkiintoista huomata, että on olemassa [funktionaalisia](https://fi.wikipedia.org/wiki/Funktionaalinen_ohjelmointi) ohjelmointikieliä kuten [Scala](http://www.scala-lang.org/) tai [Erlang](http://www.erlang.org/), jotka kieltävät muuttujien arvojen muuttamisen.
+=======
```smart header="Functional languages"
It's interesting to note that there exist so-called [pure functional](https://en.wikipedia.org/wiki/Purely_functional_programming) programming languages, such as [Haskell](https://en.wikipedia.org/wiki/Haskell), that forbid changing variable values.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-In such languages, once the value is stored "in the box", it's there forever. If we need to store something else, the language forces us to create a new box (declare a new variable). We can't reuse the old one.
+Tällaisissa kielissä "laatikkoon" varastoitu arvo on siellä ikuisesti. Jos meidän täytyy varastoida jotain muuta, kieli pakottaa meidät luomaan uuden laatikon (esittelemään uuden muuttujan). Vanhaa ei voida käyttää uudelleen.
+<<<<<<< HEAD
+Vaikka tämä vaikuttaisi ensinäkemältä vähän oudolta, nämä kielet kykenevät hyvin vakavaan sovelluskehitykseen. Lisäksi on olemassa alueita, kuten rinnakkaislaskelmia, joilla tämä rajoitus tuo tiettyjä etuja. Tällaisen kielen opiskelu (vaikka et aio käyttää sitä pian) on suositeltavaa mielesi laajentamiseksi.
+=======
Though it may seem a little odd at first sight, these languages are quite capable of serious development. More than that, there are areas like parallel computations where this limitation confers certain benefits.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
```
-## Variable naming [#variable-naming]
+## Muuttujien nimeäminen [#variable-naming]
-There are two limitations on variable names in JavaScript:
+JavaScriptissa on kaksi rajoitusta muuttujien nimille:
-1. The name must contain only letters, digits, or the symbols `$` and `_`.
-2. The first character must not be a digit.
+1. Nimen täytyy sisältää vain kirjaimia, numeroita tai merkkejä `$` ja `_`.
+2. Ensimmäinen merkki ei saa olla numero.
-Examples of valid names:
+Esimerkkejä pätevistä nimistä:
```js
let userName;
let test123;
```
-When the name contains multiple words, [camelCase](https://en.wikipedia.org/wiki/CamelCase) is commonly used. That is: words go one after another, each word except first starting with a capital letter: `myVeryLongName`.
+Kun nimi sisältää useampia sanoja, käytetään yleensä [camelCasea](https://fi.wikipedia.org/wiki/CamelCase). Eli: sanat kirjoitetaan peräkkäin niin, että kaikki paitsi ensimmäinen alkaa isolla kirjaimella: `minunTosiPitkaNimi`.
-What's interesting -- the dollar sign `'$'` and the underscore `'_'` can also be used in names. They are regular symbols, just like letters, without any special meaning.
+On mielenkiintoista, että dollarimerkkiä `'$'` ja alaviivaa `'_'` voidaan käyttää nimissä. Ne ovat tavallisia symboleita samoin kuin kirjaimet, eikä niillä ole erityistä merkitystä.
-These names are valid:
+Nämä nimet ovat päteviä:
```js run untrusted
-let $ = 1; // declared a variable with the name "$"
-let _ = 2; // and now a variable with the name "_"
+let $ = 1; // esittelee muuttujan nimellä "$"
+let _ = 2; // ja nyt muuttujan nimellä "_"
alert($ + _); // 3
```
-Examples of incorrect variable names:
+Esimerkkejä vääristä nimistä:
```js no-beautify
-let 1a; // cannot start with a digit
+let 1a; // ei voi alkaa numerolla
+
+let my-name; // viivoja '-' ei sallita
+```
-let my-name; // hyphens '-' aren't allowed in the name
+<<<<<<< HEAD
+```smart header="Kirjainkoolla on merkitystä"
+Muuttujat `apple` ja `AppLE` ovat kaksi eri muuttujaa.
```
+````smart header="Ei-latinalaiset kirjaimet ovat myös sallittuja, mutta niitä ei suositella"
+On mahdollista käyttää mitä tahansa kieltä, mukaanlukien kyrilliset aakkoset ja jopa hieroglyfit, tähän tapaan:
+=======
```smart header="Case matters"
Variables named `apple` and `APPLE` are two different variables.
```
````smart header="Non-Latin letters are allowed, but not recommended"
It is possible to use any language, including Cyrillic letters, Chinese logograms and so on, like this:
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
```js
let имя = '...';
let 我 = '...';
```
+<<<<<<< HEAD
+Periaattessa tässä ei ole virhettä. Tällaiset nimet ovat sallittuja, mutta kansainvälinen tapa on käyttää englantia muuttujien nimissä. Myös pienissä skripteissä, niillä voi olla pitkä elämä. Muista maista tulevien ihmisten on ehkä luettava sitä joskus.
+=======
Technically, there is no error here. Such names are allowed, but there is an international convention to use English in variable names. Even if we're writing a small script, it may have a long life ahead. People from other countries may need to read it sometime.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
````
-````warn header="Reserved names"
-There is a [list of reserved words](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), which cannot be used as variable names because they are used by the language itself.
+````warn header="Varatut nimet"
+On olemassa [lista varatuista sanoista](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords), joita ei voida käyttää, koska niitä käytetään kielessä itsessään.
-For example: `let`, `class`, `return`, and `function` are reserved.
+Esimerkiksi `let`, `class`, `return`, ja `function` ovat varattuja.
-The code below gives a syntax error:
+Alla oleva koodi antaa syntaksivirheen:
```js run no-beautify
-let let = 5; // can't name a variable "let", error!
-let return = 5; // also can't name it "return", error!
+let let = 5; // muuttujan nimi ei voi olla "let", virhe!
+let return = 5; // se ei voi olla myöskään "return", virhe!
```
````
-````warn header="An assignment without `use strict`"
+````warn header="Sijoitus ilman `use strict` komentoa"
-Normally, we need to define a variable before using it. But in the old times, it was technically possible to create a variable by a mere assignment of the value without using `let`. This still works now if we don't put `use strict` in our scripts to maintain compatibility with old scripts.
+Tavallisesti meidän pitää esitellä muuttuja ennen sen käyttöä. Ennen vanhaan oli periaattessa mahdollista luoda muuttuja ihan vaan sijoittamalla arvo ilman, että käytti `let` avainsanaa. Tämä toimii edelleen, jos emme sijoita `use strict` komentoa skripteihimme, jotta yhteensopivuus vanhojen skriptien kanssa säilyy.
```js run no-strict
-// note: no "use strict" in this example
+// huom: ei "use strict" komentoa
-num = 5; // the variable "num" is created if it didn't exist
+num = 5; // muuttuja "num" luodaan, jos sitä ei ole olemassa
alert(num); // 5
```
-This is a bad practice and would cause an error in strict mode:
+Tämä on huono tapa ja aiheuttaisi virheen strict tilassa:
```js
"use strict";
@@ -244,31 +284,40 @@ num = 5; // error: num is not defined
```
````
-## Constants
+## Vakiomuuttujat
-To declare a constant (unchanging) variable, use `const` instead of `let`:
+Vakiomuuttujan (ei muutu) voi esitellä käyttämällä `const` avainsanaa `let` avainsanan sijasta:
```js
const myBirthday = '18.04.1982';
```
-Variables declared using `const` are called "constants". They cannot be reassigned. An attempt to do so would cause an error:
+Muuttujia, jotka esitellään `const` avainsanalla kutsutaan "vakiomuuttujiksi". Niiden arvoa ei voida sijoittaa uudelleen. Yrittäminen aiheuttaisi virheen:
```js run
const myBirthday = '18.04.1982';
-myBirthday = '01.01.2001'; // error, can't reassign the constant!
+myBirthday = '01.01.2001'; // Error, can't reassign the constant!
```
+<<<<<<< HEAD
+Kun ohjelmoija on varma, ettei muuttuja koskaan muutu, se voidaan esitellä `const` avainsanalla, jolloin varmistutaan arvon pysyvyydestä ja se saadaan kommunikoitua kaikille.
+
+=======
When a programmer is sure that a variable will never change, they can declare it with `const` to guarantee and communicate that fact to everyone.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-### Uppercase constants
+### Isokirjaimiset vakiomuuttujat
+<<<<<<< HEAD
+Laajalle levinnyt käytäntö on käyttää vakiomuuttujia korvaamaan vaikeasti muistettavia arvoja, jotka tunnetaan ennen koodin suorittamista.
+=======
There is a widespread practice to use constants as aliases for difficult-to-remember values that are known before execution.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-Such constants are named using capital letters and underscores.
+Tällaiset vakiot kirjoitetaan suurten kirjainten ja alaviivojen avulla.
-For instance, let's make constants for colors in so-called "web" (hexadecimal) format:
+Luodaan esimerkiksi vakioita väreille niin sanotussa "web" (heksadesimaali) muodossa:
```js run
const COLOR_RED = "#F00";
@@ -276,70 +325,95 @@ const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";
-// ...when we need to pick a color
+// ...kun meidän tarvitsee valita väri
let color = COLOR_ORANGE;
alert(color); // #FF7F00
```
-Benefits:
+Hyödyt:
-- `COLOR_ORANGE` is much easier to remember than `"#FF7F00"`.
-- It is much easier to mistype `"#FF7F00"` than `COLOR_ORANGE`.
-- When reading the code, `COLOR_ORANGE` is much more meaningful than `#FF7F00`.
+- `COLOR_ORANGE` on paljon helpompi muistaa kuin `"#FF7F00"`.
+- On paljon helpompi kirjoittaa väärin `"#FF7F00"` kuin `COLOR_ORANGE`.
+- Kun koodia lukee, `COLOR_ORANGE` on paljon kuvaavampi kuin `#FF7F00`.
-When should we use capitals for a constant and when should we name it normally? Let's make that clear.
+Milloin käytämme suuria kirjaimia ja milloin nimeämme vakiot normaalisti? Tehdään siitä selvää.
+<<<<<<< HEAD
+Termillä "vakio" tarkoitetaan vain sitä, että muuttujan arvo ei koskaan muutu. On kuitenkin vakioita, jotka tunnetaan ennen koodin suoritusta (kuten värin punainen heksadesimaaliarvo) ja vakioita, jotka *lasketaan* koodin suorituksen aikana, mutta ne eivät muutu ensimmäisen arvon sijoituksen jälkeen.
+
+Esimerkiksi:
+=======
Being a "constant" just means that a variable's value never changes. But some constants are known before execution (like a hexadecimal value for red) and some constants are *calculated* in run-time, during the execution, but do not change after their initial assignment.
For instance:
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
```js
-const pageLoadTime = /* time taken by a webpage to load */;
+const pageLoadTime = /* aika, joka kuluu nettisivun lataamiseen */;
```
+<<<<<<< HEAD
+Muuttujan `pageLoadTime` arvoa ei tunneta ennen sivun lataamista, joten se kirjoitetaan normaalisti. Se on silti vakio, koska sen arvo ei muutu sijoittamisen jälkeen.
+
+Toisin sanoen, suuria kirjaimia käytetään vain vakiomuuttujissa, joilla on "kovakoodattu" arvo.
+=======
The value of `pageLoadTime` is not known before the page load, so it's named normally. But it's still a constant because it doesn't change after the assignment.
In other words, capital-named constants are only used as aliases for "hard-coded" values.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
+
+## Oikeaoppinen nimeäminen
-## Name things right
+Muuttujista puhuttaessa on vielä yksi erittäin tärkeä asia.
-Talking about variables, there's one more extremely important thing.
+Nimellä pitäisi olla selkeä, itsestäänselvä tarkoitus, joka kuvaa sen varastoimaa dataa.
-A variable name should have a clean, obvious meaning, describing the data that it stores.
+<<<<<<< HEAD
+Muuttujien nimeäminen on yksi tärkeimmistä ja vaikeimmista taidoista ohjelmoinnissa. Nopea muuttujien nimien vilkaisu voi paljastaa, minkä koodin on kirjoittanut aloittelija ja minkä kokenut sovelluskehittäjä.
+Oikeassa projektissa suurin osa ajasta käytetään olemassa olevan koodin muokkaamiseen ja jatkamiseen sen sijaan, että kirjoitettaisiin jotain täysin tyhjästä. Kun palaamme koodin ääreen tehtyämme jotain muuta vähän aikaa, on paljon helpompi löytää tietoa, joka on merkitty hyvin. Toisin sanoen, kun muuttujilla on hyvät nimet.
+=======
Variable naming is one of the most important and complex skills in programming. A glance at variable names can reveal which code was written by a beginner versus an experienced developer.
In a real project, most of the time is spent modifying and extending an existing code base rather than writing something completely separate from scratch. When we return to some code after doing something else for a while, it's much easier to find information that is well-labelled. Or, in other words, when the variables have good names.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-Please spend time thinking about the right name for a variable before declaring it. Doing so will repay you handsomely.
+Käytäthän aikaa hyvän muuttujan nimen keksimiseen ennen kuin esittelet sen. Tämä maksaa itsensä takaisin komeasti.
-Some good-to-follow rules are:
+Muutamia hyviä sääntöjä:
+<<<<<<< HEAD
+- Käytä nimiä, jotka ihminen ymmärtää kuten `userName` tai `shoppingCart`.
+- Vältä lyhenteitä ja lyhyitä nimiä kuten `a`, `b`, `c`, jollet todella tiedä mitä olet tekemässä.
+- Tee nimistä maksimaalisen kuvaavia ja tiiviitä. Esimerkkejä huonoista nimistä ovat `data` ja `value`. Tällaiset nimet eivät kerro mitään. Niiden käyttäminen on okei vain silloin, kun koodin konteksti tekee erityisen itsestäänselväksi, mistä datasta ja arvosta on kyse.
+- Sovi ehdoista tiimisi kesken ja omassa mielessäsi. Jos sivuston nykyinen käyttäjä on "user", siihen liittyville muuttujille annetaan nimeksi `currentUser` tai `newUser` sen sijaan, että käytetään nimiä `currentVisitor` tai `newManInTown`.
+=======
- Use human-readable names like `userName` or `shoppingCart`.
- Stay away from abbreviations or short names like `a`, `b`, and `c`, unless you know what you're doing.
- Make names maximally descriptive and concise. Examples of bad names are `data` and `value`. Such names say nothing. It's only okay to use them if the context of the code makes it exceptionally obvious which data or value the variable is referencing.
- Agree on terms within your team and in your mind. If a site visitor is called a "user" then we should name related variables `currentUser` or `newUser` instead of `currentVisitor` or `newManInTown`.
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-Sounds simple? Indeed it is, but creating descriptive and concise variable names in practice is not. Go for it.
+Kuulostaa yksinkertaiselle? Se todellakin on, mutta kuvaavien ja tiiviiden muuttujien nimien keksiminen käytännössä ei ole helppoa. Anna palaa.
-```smart header="Reuse or create?"
-And the last note. There are some lazy programmers who, instead of declaring new variables, tend to reuse existing ones.
+```smart header="Uudelleenkäyttö vai uuden luominen?"
+Viimeinen huomio. On paljon laiskoja ohjelmoijia, joilla on tapana käyttää uudelleen olemassa olevia muuttujien nimiä uusien luomisen sijaan.
-As a result, their variables are like boxes into which people throw different things without changing their stickers. What's inside the box now? Who knows? We need to come closer and check.
+Tämän tuloksena, heidän muuttujansa ovat kuin laatikoita, joihin ihmiset heittelevät erilaisia asioita ilman, että niiden nimitarroja muutetaan. Mitä laatikossa on nyt? Meidän on katsottava lähemmin ja tarkistettava.
-Such programmers save a little bit on variable declaration but lose ten times more on debugging.
+Tällaiset ohjelmoijat säästävät hieman aikaa muuttujien esittelyssä, mutta menettävät kymmenenkertaisen määrän aikaa virheenetsinnässä ja -korjauksessa.
-An extra variable is good, not evil.
+Uusi muuttuja on hyvä, ei paha asia.
-Modern JavaScript minifiers and browsers optimize code well enough, so it won't create performance issues. Using different variables for different values can even help the engine optimize your code.
+Nykyaikaiset JavaScriptin minimoijat ja selaimet optimoivat koodia tarpeeksi hyvin, joten se ei aiheuta suorityskykyongelmia. Eri muuttujien käyttö eri arvoille voi jopa auttaa moottoria optimoimaan koodisi.
```
-## Summary
+## Tiivistelmä
-We can declare variables to store data by using the `var`, `let`, or `const` keywords.
+Voimme esitellä muuttujia varastoidaksemme dataa käyttämällä `var`, `let` tai `const` avainsanoja.
-- `let` -- is a modern variable declaration.
-- `var` -- is an old-school variable declaration. Normally we don't use it at all, but we'll cover subtle differences from `let` in the chapter , just in case you need them.
-- `const` -- is like `let`, but the value of the variable can't be changed.
+- `let` -- on nykyaikainen muuttujan esittely.
+- `var` -- on vanhanaikainen muuttujan esittely. Tavallisesti emme käytä sitä ollenkaan, mutta käsittelemme sen pieniä eroja `let` avainsanaan kappaleessa siltä varalta, että tarvitset sitä
+- `const` -- on kuin `let`, mutta sen arvoa ei voida muuttaa.
-Variables should be named in a way that allows us to easily understand what's inside them.
+Muuttujat pitää nimetä niin, että ymmärrämme helposti, mitä ne sisältävät.
diff --git a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg
index 8a1ff1a93..8f6bcc033 100644
--- a/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg
+++ b/1-js/05-data-types/10-destructuring-assignment/destructuring-complex.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg b/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg
index bd874c5ba..61f32dbc0 100644
--- a/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg
+++ b/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg
index e624ce020..bd82f0245 100644
--- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/11-async/02-promise-basics/promise-reject-1.svg b/1-js/11-async/02-promise-basics/promise-reject-1.svg
index 777e47739..1ed00b191 100644
--- a/1-js/11-async/02-promise-basics/promise-reject-1.svg
+++ b/1-js/11-async/02-promise-basics/promise-reject-1.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/11-async/02-promise-basics/promise-resolve-1.svg b/1-js/11-async/02-promise-basics/promise-resolve-1.svg
index f1f34eaee..bb0b918db 100644
--- a/1-js/11-async/02-promise-basics/promise-resolve-1.svg
+++ b/1-js/11-async/02-promise-basics/promise-resolve-1.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
index 7478543a4..4c64e983e 100644
--- a/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-2.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
index d32b114f9..0af8e9efd 100644
--- a/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
+++ b/1-js/12-generators-iterators/1-generators/generateSequence-3.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg b/1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg
index 3fba64606..bc6c4ce2f 100644
--- a/1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg
+++ b/1-js/99-js-misc/01-proxy/proxy-inherit-admin.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg
index e8dd3d60a..dd9e17cf8 100644
--- a/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg
+++ b/2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg
index 8097afa78..968590466 100644
--- a/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg
+++ b/2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg
index 18cd37a74..65e77ae80 100644
--- a/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg
+++ b/2-ui/1-document/10-size-and-scroll-window/document-client-width-height.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/1-document/11-coordinates/coordinates.svg b/2-ui/1-document/11-coordinates/coordinates.svg
index 261ff6696..169fc4102 100644
--- a/2-ui/1-document/11-coordinates/coordinates.svg
+++ b/2-ui/1-document/11-coordinates/coordinates.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
index 2ea88f081..b62d99089 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
+++ b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/2-events/03-event-delegation/bagua-bubble.svg b/2-ui/2-events/03-event-delegation/bagua-bubble.svg
index 4ae67102d..c4cd1ee1e 100644
--- a/2-ui/2-events/03-event-delegation/bagua-bubble.svg
+++ b/2-ui/2-events/03-event-delegation/bagua-bubble.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/2-ui/99-ui-misc/03-event-loop/eventLoop.svg b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
index 6dc459ef8..ffe197664 100644
--- a/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
+++ b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/5-network/05-fetch-crossorigin/xhr-preflight.svg b/5-network/05-fetch-crossorigin/xhr-preflight.svg
index 049572cee..c96e05ab2 100644
--- a/5-network/05-fetch-crossorigin/xhr-preflight.svg
+++ b/5-network/05-fetch-crossorigin/xhr-preflight.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/5-network/11-websocket/websocket-handshake.svg b/5-network/11-websocket/websocket-handshake.svg
index 96c2cd3ef..a8ec2389a 100644
--- a/5-network/11-websocket/websocket-handshake.svg
+++ b/5-network/11-websocket/websocket-handshake.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/7-animation/1-bezier-curve/bezier3-e.svg b/7-animation/1-bezier-curve/bezier3-e.svg
index a892258c4..4c5c741dc 100644
--- a/7-animation/1-bezier-curve/bezier3-e.svg
+++ b/7-animation/1-bezier-curve/bezier3-e.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/7-animation/1-bezier-curve/bezier3.svg b/7-animation/1-bezier-curve/bezier3.svg
index ff95f8877..35f1eb6e3 100644
--- a/7-animation/1-bezier-curve/bezier3.svg
+++ b/7-animation/1-bezier-curve/bezier3.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/README.md b/README.md
index 371793d6d..4b5c275d4 100755
--- a/README.md
+++ b/README.md
@@ -1,17 +1,41 @@
-# The Modern JavaScript Tutorial
+# The Modern JavaScript Tutorial in Finnish
+<<<<<<< HEAD
+This repository hosts the translation of in Finnish.
+=======
This repository hosts the English content of the Modern JavaScript Tutorial, published at [https://javascript.info](https://javascript.info).
+>>>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
-## Translations
-We'd like to make the tutorial available in many languages. Please help us to translate.
+**That's how you can contribute:**
-See for the details.
+- See the [Finnish Translate Progress](https://github.com/javascript-tutorial/fi.javascript.info/issues/1) issue.
+- Choose an unchecked article you'd like to translate.
+- Add a comment with the article title to the issue, e.g. `An Introduction to JavaScript`.
+ - Our bot will mark it in the issue, for everyone to know that you're translating it.
+ - Your comment should contain only the title.
+- Fork the repository, translate and send a PR when done.
+ - PR title should match article title, the bot will write it's number into the issue.
-## Contributions
+Please kindly allow maintainers to review and merge or request changes in your translation.
+
+If maintainers do not respond, or if you'd like to become a maintainer, write us at the [main repo](https://github.com/javascript-tutorial/en.javascript.info/issues/new).
+
+**Let others know what you're translating, in message boards or chats in your language. Invite them to join!**
-We'd also like to collaborate on the tutorial with other people.
+🎉 Thank you!
+<<<<<<< HEAD
+Your name and the contribution size will appear in the "About project" page when the translation gets published.
+
+P.S. The full list of languages can be found at .
+
+## Structure
+
+Every chapter, an article or a task resides in its own folder.
+
+The folder is named `N-url`, where `N` – is the number for sorting (articles are ordered), and `url` is the URL-slug on the site.
+=======
Something's wrong? A topic is missing? Explain it to people, add it as PR 👏
**You can edit the text in any editor.** The tutorial uses an enhanced "markdown" format, easy to grasp. And if you want to see how it looks on-site, there's a server to run the tutorial locally at .
@@ -23,17 +47,146 @@ The list of contributors is available at >>>>>> 5e893cffce8e2346d4e50926d5148c70af172533
+
+The folder has one of files:
+
+- `index.md` for a section,
+- `article.md` for an article,
+- `task.md` for a task formulation (+`solution.md` with the solution text if any).
+
+A file starts with the `# Title Header`, and then the text in Markdown-like format, editable in a simple text editor.
+
+Additional resources and examples for the article or the task, are also in the same folder.
+
+## Translation Tips
+
+Please keep line breaks and paragraphs "as is": don't add newlines and don't remove existing ones. Makes it easy to merge future changes from the English version into the translation.
+
+If you see that the English version can be improved – great, please send a PR to it.
+
+### Terms
+
+- Some specification terms are not to be translated, e.g. "Function Declaration" can be left "as is".
+- For other terms like `resolved promise`, `slash`, `regexp`, and so on - look for a glossary, hopefully there's one for your language already. If not, look for translations in manuals, such as [MDN](https://developer.mozilla.org/en-US/).
+
+
+### Terms with meaning
+
+In English many terms have an obvious meaning. For a person who doesn't understand English, there's no such meaning.
+
+Please keep that in mind, sometimes explanations or additional translations are needed, e.g.
+
+```md
+`ReadableStream` allows to read data chunk-by-chunk.
+```
+
+The class name `ReadableStream` has an obvious meaning for those who understand English.
+
+Some people who read translations may not know English so well. So we can add a translation of `ReadableStream` in parentheses, like this (Spanish below):
+
+```md
+`ReadableStream` ("flujo legible") permite leer datos fragmento por fragmento.
+```
+
+### Text in Code Blocks
+
+- Translate comments.
+- Translate user-messages and example strings.
+- Don't translate variables, classes, identifiers.
+- Ensure that the code works after the translation :)
+
+Example:
+
+```js
+// Example
+const text = "Hello, world";
+document.querySelector('.hello').innerHTML = text;
+```
+
+✅ DO (translate comment):
+
+```js
+// Ejemplo
+const text = 'Hola mundo';
+document.querySelector('.hello').innerHTML = text;
+```
+
+❌ DON'T (translate class):
+
+```js
+// Ejemplo
+const text = 'Hola mundo';
+// ".hello" is a class
+// DO NOT TRANSLATE
+document.querySelector('.hola').innerHTML = text;
+```
+
+Please note, that sometimes code is followed by pictures, and if you translate text `Hello` -> `Hola` in the code, you need to translate text in picturess as well.
+
+In that case it's probably easier not to translate such text. See more about translating images later.
+
+
+### External Links
+
+If an external link is to Wikipedia, e.g. `https://en.wikipedia.org/wiki/JavaScript`, and a version of that article exists in your language that is of decent quality, link to that version instead.
+
+Example:
+
+```md
+[JavaScript](https://en.wikipedia.org/wiki/JavaScript) is a programming language.
+```
+
+✅ OK (en -> es):
+
+```md
+[JavaScript](https://es.wikipedia.org/wiki/JavaScript) es un lenguaje de programación.
+```
+
+For links to MDN, a partially translated version is ok.
+
+If a linked article has no translated version, leave the link "as is".
+
+### Metadata
+
+Some files, usually tasks, have YAML metadata at the top, delimited by `---`:
+
+```md
+importance: 5
+
+---
+...
+```
+
+Please don't translate "importance" (and other top metadata).
+
+### Anchors
+
+Some headers have `[#anchor]` at the end, e.g.
+
+```md
+## Spread operator [#spread-operator]
+```
+
+Please don't translate or remove the `[#...]` part, it's for URL anchors.
+
+
+### Images
+
+Most illustrations use SVG format, the text in there can be replaced with a translated variant.
-The type of the material is defined by the file inside the folder:
+The translated text is in `images.yml` file in the tutorial root.
- - `index.md` stands for a chapter
- - `article.md` stands for an article
- - `task.md` stands for a task (solution must be provided in `solution.md` file as well)
+The file format is YAML:
+```yaml
+image.svg: # image file
+ "hello world": # English phrase
+ text: "Hola mundo" # translation
+ position: "centre" # "center" or "right", if needed to center or right-align the translation
+```
-Each of these files starts from the `# Main header`.
+## Running locally
-It's very easy to add something new.
+You can run the tutorial server locally to see how the translation looks.
----
-♥
-Ilya Kantor @iliakan
+The server and install instructions are at .