1. diel - Úvod do CoffeeScriptu

Strácate sa v nadmernom množstve zátvoriek? Robia sa vám mihanie pred očami z nekonečného function () {function (function () {}) {}}? Máte nočné mory z OOP v JavaScripte? Práve pre vás je CoffeeScript!

Čo je CoffeeScript?

CoffeeScript je programovací jazyk, ktorý sa kompiluje do JavaScriptu. Inými slovami, čo ide napísať v JS ide napísať v CoffeeScriptu. Kód v ňom však obsahuje omnoho menej riadkov, je prehľadnejšie a je radosť ho písať. Jazyk pridáva totiž tzv. Syntaktický cukor (cukor, káva ... ), Tj. Spríjemnenie kódu programátorovi. Ak ste oboznámení s Ruby, Python, Haskell alebo podobným jazykom, bude vám CoffeeScript blízky.

Oficiálna stránka obsahuje skvelú dokumentáciu a dokonca si môžete pod záložkou "Try CoffeeScript" pilovať zručnosti priamo v prehliadači. Ak nehodláte písať zložitejšie kód, bude vám tento spôsob stačiť a nasledujúcu časť o inštalácii môžete pokojne preskočiť a vrhnúť sa na písanie kódu.

Inštalácia a základné príkazy

Choďte na stránku http://nodejs.org/ a kliknite na "Install". Po stiahnutí a nainštalovaní otvorte node.js command prompt a napíšte

npm install –g coffee-script

Môžete sa presvedčiť, či je CoffeeScript nainštalovaný príkazom

coffee –v

Ak ste správne nainštalovali CoffeeScript, tento príkaz vypíše túto verziu vo vašom počítači. Pre samotnú kompiláciu použite príkaz

coffee -o javascripts\ -c coffeescripts\

Prvé slovo je názov príkazu, -o je skratka pre "output", čiže výstup. Za ňou budeme písať zložku, kde chceme .js stránky. Namiesto JavaScripts \ teda napíšete napr. C: \ mujProjektNaKofeinu \ skripty \. Voľba -c znamená "compile" a píše sa za ňou názov súboru s príponou .coffee, alebo celá zložka s týmito súbormi. Po vykonaní príkazu sa .coffee súbor (y) skompiluje do .js súboru s rovnakým menom.

Možno vás napadá, že by bola strašná otrava stále dookola spúšťať tento príkaz, keď chcete postupovať krok po kroku. Našťastie máme voľbu -w, čiže "watch", ktorá sleduje zmeny v .coffee súboru a príkaz beží a kompiluje, kým ho nezastavíte. Príkaz potom vyzerá takto:

coffee –w –o javascripts\ -c coffeescripts\

Začíname

Premenné nepotrebujú k deklarácii slovíčko var, stačí len napísať názov premennej a priradiť hodnotu.

cislo = 5
kafe = "cerny turek bez cukru"
jeRok1453 = false

Deklarácia premennej je vo výslednom .js súboru posunutá na začiatok bloku. Vidíme teda, ako bude JavaScript "čítať" náš kód a nemusíme sa zaťažovať hoistingem. Tieto 3 riadky sa teda skompiluje do:

var cislo, kafe, jeRok1453 ;
cislo = 5;
kafe = "cerny turek bez cukru";
jeRok1453 = false;

Ako môžete vidieť na tomto príklade, v CoffeeScriptu nepotrebujete bodkočiarkami. Sú nutné len v prípade viac príkazov na jednom riadku, teda

cislo=5;kafe="cerny turek bez cukru";jeRok1453 = false

je taktiež validný CoffeeScript, ktorý sa zostavuje do úplne rovnakého JS kódu, ako kúsok vyššie. Tu môžeme vidieť ďalšiu dôležitú vlastnosť CoffeeScriptu - veľa vecí sa môže napísať rovnako, ako v JS. "Môže" však neznamená "malo by" a "veľa" nie je "všetko", takže budeme dodržiavať zápis prvého príkladu.

Základné operácie s premennými robia presne to, čo by ste od nich čakali v JS, takže:

x = 6 + 5
y = "6" + "5"
z = "6" + 5

#x = 11
#y = "65"
#z = "65"

Ako vidíte, komentáre sa v CoffeeScriptu píšu krížikom (hashom, mriežkou, podľa toho ako to nazývate), avšak pozor! Tento komentár sa neobjaví vo výslednom .js súboru, je to teda komentár čisto pre CoffeeScript súbor. Ak chcete, aby sa komentár objavil aj po kompiláciu, musíte ho napísať takto:

### Toto je komentář, který se nevymaže ###
#Toto nebude v .js

Výsledný JavaScript:

/* Toto je komentář, který se nevymaže */

Vrátime sa späť k premenným a operáciám. Tiež vás niekedy pekne štve, keď skladáte vetu z premenných obsahujúcich textový reťazec a musíte to písať nasledujúcim spôsobom:

var veta = "A bylo nebylo, "+ kralovstvi + " za " + pocetHor + " horami, " + pocetRek + " rekami, ktere " + problem + " " + jmenoDraka;

Po prvé je to dosť neprehľadné. Po druhé, keď chcete napr. Pridať medzeru, musíte napísať minimálne 5 znakov. A po tretie, či budete mať "+" aj v samotných reťazcoch, začne vás bolieť hlava. Našťastie môžeme v CoffeeScriptu použiť interpoláciu reťazcov, ktorú môžete poznať z iných jazykov ako napr. PHP. Môžeme teda vyššie uvedený príklad zapísať takto:

veta = "A bylo nebylo, #{kralovstvi} za #{pocetHor} horami, #{pocetRek} rekami, ktere #{problem} #{jmenoDraka}"

Rovnako ako v PHP, aj v CoffeeScriptu apostrofy interpretujú text presne tak, ako im je zadaný, interpolácia ide použiť len v úvodzovkách.

kava = "Jacobs Krönung"
alert("#{kava}")
# Jacobs Krönung

alert '#{kava}'
# #{kava}

Moment ...! Kam sa podeli zátvorky? Áno, i je CoffeeScriptu ich môžeme pri volaní funkcie s parametrami jednoducho vynechať. Keďže by pri volaní funkcií vo funkciách vznikal pekný chaos, odporúčaný postup je vynechávať okrúhle zátvorky iba pri funkcii, ktorá je najviac "vonku". Volanie funkcie bez parametrov musí buď mať zátvorky, alebo použiť kľúčové slovo do.

Príklad:

uskladnit uprazit(sesbirat(zrna))
funkce      # ERROR
funkce()    # tak je to správně
do funkce   # tak je to taky správně

Poľa

Pole môžeme deklarovať ako v JS nasledovne:

pole = [1, 5, 6, 3]

Alebo bez čiarok s prvkami pod sebou:

pole = [
 1
 5
 6
 3
]

Dávajte si veľký pozor na odsadenie. Je jedno, či tabulátorom, jednou medzerou alebo desiatich. Keď bude prvý prvok v úrovni pod názvom premennej, CoffeeScript si nebude vedieť rady. Toto je ďalší z významných vlastností CoffeeScriptu, pretože podľa odsadenie sa určuje úroveň vnorenia. Žiadne zložené zátvorky, žiadne end, iba odsadenie. Ďalšie prvky v poli môžete odsadiť ako chcete, ale esteticky je najlepšie dávať je pod prvý prvok.

Pole ide zapísať samozrejme aj kombináciou predchádzajúcich postupov:

matice = [
 1, 2, 3
 4, 5, 6
 7, 8, 9
]

CoffeeScript obsahuje aj tzv. Tic (n-tice), ktoré vám môžu zjednodušiť prácu s poľami a dokonca s ich pomocou je možné pole i vytvárať.

# pozor, nemůžete přidat další a musíte mít n-tici na stejném řádku jako název proměnné
ntice = [1..100] # vytvoří pole
kavy = [
 "Latte"
 "Cappuccino"
 "Espresso"
 "Moccaccino"
 "Frappe"
 "Irská"
]

vybraneKavy = kavy[2..4] # vybraneKavy == ["Espresso", "Moccaccino", "Frappe"]

Výsledok v JS:

var kavy, ntice1, vybraneKavy;

ntice = (function() {
  _results = [];
  for (_i = 1; _i <= 100; _i++){ _results.push(_i); }
  return _results;
}).apply(this);

kavy = ["Latte", "Cappuccino", "Espresso", "Moccaccino", "Frappe", "Irská"];
vybraneKavy = kavy.slice(2, 5);

Objekty

Vytvorme si jednoduchý objekt, napríklad kaviareň:

kavarna = {
 jmeno: "Kofeinová pumpa",
 rokZalozeni: 2001,
 freeWifi: yes
}

Teraz trochu odbehnem od témy. Asi si hovoríte, že je fajn mať WiFi zadarmo, ale nemá tam byť "true" namiesto "yes"? CoffeeScript používa 6 slov pre označenie bool hodnoty. Pravdu môžeme vyjadriť slovíčkami true, yes, on, nepravdu pomocou false, no, off. Tieto hodnoty sa skompiluje do starého dobrého true/false, takže si vyberte, čo sa vám páči.

Späť k objektom - čiarky môžeme podobne ako u polí vynechať:

kavarna = {
 jmeno: "Kofeinová pumpa"
 rokZalozeni: 2001
 freeWifi: yes
}

A dokonca môžeme vynechať aj zložené zátvorky:

kavarna =
 jmeno: "Kofeinová pumpa"
 rokZalozeni: 2001
 freeWifi: yes

Znovu pozor na odsadenie. Pridáme nápojový lístok:

kavarna =
 jmeno: "Kofeinová pumpa"
 rokZalozeni: 2001
 freeWifi: yes
 napojovyListek:
  kavy: [
   "Cappuccino"
   "Moccaccino"
   "Espresso"
  ]
  nealko: [
   "Sprite"
   "Pomerančový džus"
   "Voda z Marsu"
  ]

JavaScript:

var kavarna;

kavarna = {
  jmeno: "Kofeinová pumpa",
  rokZalozeni: 2001,
  freeWifi: true,
  napojovyListek: {
    kavy: ["Cappuccino", "Moccaccino", "Espresso"],
    nealko: ["Sprite", "Pomerančový džus", "Voda z Marsu"]
  }
};

To by bolo na úvod všetko, nabudúce sa pozrieme na vetvenie a cykly.