Tampiorama/docs/vs-javascript.md

# Tampio vs JavaScript

Side-by-side comparisons. Every Tampio program compiles to JavaScript — these show what that translation looks like.

## Hello World

**Tampio**
```tampio
Kun nykyinen sivu avautuu,
    teksti "Hei maailma!" näytetään käyttäjälle.
```

**JavaScript**
```js
document.avautua = function() {
    alert("Hei maailma!");
};
document.avautua();
```

---

## Function Definition

**Tampio**
```tampio
Pienen luvun kertoma on
    riippuen siitä, onko se pienempi tai yhtä suuri kuin yksi,
    joko yksi
    tai pieni luku kerrottuna pienen luvun edeltäjän kertomalla.

Luvun edeltäjä on se vähennettynä yhdellä.
```

**JavaScript**
```js
Number.prototype.f_kertoma = function() {
    var pieni_luku = this;
    return (this <= 1) ? 1 : pieni_luku * pieni_luku.f_edeltäjä().f_kertoma();
};

Number.prototype.f_edeltäjä = function() {
    return this - 1;
};
```

The parameter `pieni luku` ("small number") becomes the variable name in the compiled JS. `se` compiles to `this`.

---

## Variable Declaration

**Tampio**
```tampio
Olkoon pieni muuttuja uusi muuttuja, jonka arvo on nolla.
```

**JavaScript**
```js
var pieni_muuttuja = new muuttuja({ arvo: 0 });
```

---

## Class Definition

**Tampio**
```tampio
Vektorilla on komponentit.
```

**JavaScript**
```js
function vektori(vals) {
    if ("komponentit" in vals) this.komponentit = vals["komponentit"];
    else this.komponentit = [];
}
```

Fields are constructor parameters. Plural fields become arrays, singular fields become single values.

### Subclass

**Tampio**
```tampio
Työntekijä on henkilö, jolla on työnantaja.
```

**JavaScript**
```js
function tyontekija(vals) {
    henkilö.call(this, vals);
    if ("työnantaja" in vals) this.työnantaja = vals["työnantaja"];
}
tyontekija.prototype = Object.create(henkilö.prototype);
```

---

## Method Definition

**Tampio**
```tampio
Kun nykyinen sivu avautuu,
    pieneen muuttujaan luetaan luku
ja  nykyinen sivu näyttää pienen muuttujan arvon kertoman.
```

**JavaScript**
```js
HTMLDocument.prototype.avautua = function() {
    pieni_muuttuja.lukea_luku();
    this.write(pieni_muuttuja.f_arvo().f_kertoma());
};
```

`Kun` = method definition. The self object (`nykyinen sivu`) becomes `this`. Multiple statements separated by commas compile to sequential calls; `ja` marks the last one.

---

## If Statement

**Tampio**
```tampio
jos lyhyen vektorin dimensio ei ole nolla, niin
    nykyinen sivu näyttää lyhyen vektorin ensimmäisen komponentin
ja  lyhyen vektorin häntä painetaan nykyiselle sivulle.
```

**JavaScript**
```js
if (lyhyt_vektori.f_dimensio() !== 0) {
    nykyinen_sivu.näyttää(lyhyt_vektori.f_ensimmäinen_komponentti());
    lyhyt_vektori.f_häntä().painetaan(nykyinen_sivu);
}
```

---

## Arithmetic

**Tampio**
```tampio
pieni luku kerrottuna pienen luvun edeltäjän kertomalla
```

**JavaScript**
```js
pieni_luku * pieni_luku.f_edeltäjä().f_kertoma()
```

| Tampio | JS | Second arg case |
|---|---|---|
| `x lisättynä y:hin` | `x + y` | illative |
| `x vähennettynä y:llä` | `x - y` | adessive |
| `x kerrottuna y:llä` | `x * y` | adessive |
| `x jaettuna y:llä` | `x / y` | adessive |
| `x rajattuna y:hin` | `x % y` | illative |

---

## Field Access

Field access looks identical to a function call — both use genitive.

**Tampio**
```tampio
pienen muuttujan arvo        # field access
pienen luvun kertoma         # function call
```

**JavaScript**
```js
pieni_muuttuja.arvo          // field access
pieni_luku.f_kertoma()       // function call (note the f_ prefix)
```

The compiler adds an `f_` prefix to function calls to distinguish them from raw field accesses.

---

## Output

**Tampio**
```tampio
nykyinen sivu näyttää tekstin "Tulos: "
nykyinen sivu näyttää pienen luvun kertoman
teksti "Virhe!" näytetään käyttäjälle
```

**JavaScript**
```js
document.write("Tulos: ");
document.write(pieni_luku.f_kertoma());
alert("Virhe!");
```