Lekce 1 - Úvod do CoffeeScriptu

Ztrácíte se v nadměrném množství závorek? Dělají se vám mžitky před očima z nekonečného function(){function(function(){}){}}? Máte noční můry z OOP v JavaScriptu? Právě pro vás je CoffeeScript!

Co je CoffeeScript?

CoffeeScript je programovací jazyk, který se kompiluje do JavaScriptu. Jinými slovy, co jde napsat v JS jde napsat v CoffeeScriptu. Kód v něm však obsahuje mnohem méně řádků, je přehlednější a je radost jej psát. Jazyk přidává totiž tzv. syntaktický cukr (cukr, káva... ), tj. zpříjemnění kódu programátorovi. Jestliže jste seznámeni s Ruby, Pythonem, Haskellem nebo podobným jazykem, bude vám CoffeeScript blízký.

Oficiální stránka obsahuje skvělou dokumentaci a dokonce si můžete pod záložkou „Try CoffeeScript“ pilovat dovednosti přímo v prohlížeči. Pokud nehodláte psát složitější kód, bude vám tento způsob stačit a následující část o instalaci můžete klidně přeskočit a vrhnout se na psaní kódu.

Instalace a základní příkazy

Jděte na stránku http://nodejs.org/ a klikněte na „Install“. Po stažení a nainstalování otevřete node.js command prompt a napište:

npm install –g coffee-script

Můžete se přesvědčit, zda je CoffeeScript nainstalován příkazem:

coffee –v

Jestli jste správně nainstalovali CoffeeScript, tento příkaz vypíše tuto verzi ve vašem počítači. Pro samotnou kompilaci použijte příkaz

coffee -o javascripts\ -c coffeescripts\

První slovo je název příkazu, -o je zkratka pro „output“, neboli výstup. Za ní budeme psát složku, kde chceme .js soubory. Místo javascripts\ tedy napíšete např. C:\mujProjektNa­Kofeinu\skrip­ty\. Volba -c znamená „compile“ a píše se za ní název souboru s příponou .coffee, nebo celá složka s těmito soubory. Po vykonání příkazu se .coffee soubor(y) zkompilují do .js souboru se stejným jménem.

Možná vás napadá, že by byla strašná otrava pořád dokola spouštět tento příkaz, když chcete postupovat krok po kroku. Naštěstí máme volbu –w, neboli „watch“, která sleduje změny v .coffee souboru a příkaz běží a kompiluje, dokud ho nezastavíte. Příkaz pak vypadá takto:

coffee –w –o javascripts\ -c coffeescripts\

Začínáme

Proměnné nepotřebují k deklaraci slovíčko var, stačí jen napsat název proměnné a přiřadit hodnotu:

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

Deklarace proměnné je ve výsledném .js souboru posunuta na začátek bloku. Vidíme tedy, jak bude JavaScript „číst“ náš kód a nemusíme se zatěžovat hostingem. Tyto 3 řádky se tedy zkompilují do:

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

Jak můžete vidět na tomto příkladu, v CoffeeScriptu nepotřebujete středníky. Jsou nutné pouze v případě více příkazů na jednom řádku, tedy:

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

je taktéž validní CoffeeScript, který se zkompiluje do úplně stejného JS kódu, jako kousek výše. Zde můžeme vidět další důležitou vlastnost CoffeeScriptu – spoustu věcí se může napsat stejně, jako v JS. „Může“ však neznamená „mělo by“ a „spoustu“ není „všechno“, takže budeme dodržovat zápis prvního příkladu.

Základní operace s proměnnými dělají přesně to, co byste od nich čekali v JS, takže:

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

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

Jak vidíte, komentáře se v CoffeeScriptu píší křížkem (hashem, mřížkou, podle toho jak to nazýváte), ovšem pozor! Tento komentář se neobjeví ve výsledném .js souboru, je to tedy komentář čistě pro CoffeeScript soubor. Chcete-li, aby se komentář objevil i po kompilaci, musíte jej napsat takto:

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

Výsledný JavaScript:

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

Vrátíme se zpět k proměnným a operacím. Také vás někdy pěkně štve, když skládáte větu z proměnných obsahujících textový řetězec a musíte to psát následujícím způsobem:

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

Zaprvé je to dost nepřehledné. Zadruhé, když chcete např. přidat mezeru, musíte napsat minimálně 5 znaků. A zatřetí, jestli budete mít „+” i v samotných řetězcích, začne vás bolet hlava. Naštěstí můžeme v CoffeeScriptu použít interpolaci řetězců, kterou můžete znát z jiných jazyků jako např. PHP. Můžeme tedy výše uvedený příklad zapsat takto:

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

Stejně jako v PHP, i v CoffeeScriptu apostrofy interpretují text přesně tak, jak jim je zadán, interpolace jde použít jen v uvozovkách.

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

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

Moment...! Kam se poděly závorky? Ano, i je CoffeeScriptu je můžeme při volání funkce s parametry jednoduše vynechat. Jelikož by při volání funkcí ve funkcích vznikal pěkný chaos, doporučený postup je vynechávat kulaté závorky pouze u funkce, která je nejvíce „venku“. Volání funkce bez parametrů musí buď mít závorky, nebo použít klíčové slovo do.

Příklad:

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

Pole

Pole můžeme deklarovat jako v JS následovně:

pole = [1, 5, 6, 3]

Nebo bez čárek s prvky pod sebou:

pole = [
 1
 5
 6
 3
]

Dávejte si velký pozor na odsazení. Je jedno, jestli tabulátorem, jednou mezerou nebo deseti. Když bude první prvek v úrovni pod názvem proměnné, CoffeeScript si nebude vědět rady. Toto je další z významných vlastností CoffeeScriptu, protože podle odsazení se určuje úroveň vnoření. Žádné složené závorky, žádné end, pouze odsazení. Další prvky v poli můžete odsadit jak chcete, ale esteticky je nejlepší dávat je pod první prvek.

Pole jde zapsat samozřejmě i kombinací předchozích postupů:

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

CoffeeScript obsahuje i tzv. tuples (n-tice), které vám mohou zjednodušit práci s poli a dokonce s jejich pomocí lze pole i vytvářet.

# 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ýsledek 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

Vytvořme si jednoduchý objekt, například kavárnu:

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

Teď trochu odběhnu od tématu. Asi si říkáte, že je fajn mít WiFi zdarma, ale nemá tam být „true“ místo „yes“? CoffeeScript používá 6 slov pro označení bool hodnoty. Pravdu můžeme vyjádřit slovíčky true, yes, on, nepravdu pomocí false, no, off. Tyto hodnoty se zkompilují do starého dobrého true/false, takže si vyberte, co se vám líbí.

Zpět k objektům - čárky můžeme podobně jako u polí vynechat:

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

A dokonce můžeme vynechat i složené závorky:

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

Znovu pozor na odsazení. Přidáme nápojový lístek:

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 bylo na úvod vše.

V další lekci, Větvení a cykly v CoffeeScriptu, se podíváme na větvení a cykly.