diff --git a/docs/vs-javascript.md b/docs/vs-javascript.md new file mode 100644 index 0000000..d22ae79 --- /dev/null +++ b/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!"); +```