Add Tampio-to-JavaScript compilation examples

docs/vs-javascript.md

@@ -0,0 +1,196 @@
+# 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!");
+```