1. díl - Úvod do CoffeeScriptu

JavaScript CoffeeScript Ú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(){fun­ction(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 hoistingem. 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í uvozovky obsahovat. Volání funkce bez parametrů musí buď mít uvozovky, 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, příště se podíváme na větvení a cykly.


 

  Aktivity (1)

Článek pro vás napsal Yahkem
Avatar

Jak se ti líbí článek?
Celkem (6 hlasů) :
4.833334.833334.833334.833334.83333


 


Miniatura
Všechny články v sekci
CoffeeScript
Miniatura
Následující článek
Větvení a cykly v CoffeeScriptu

 

 

Komentáře

Avatar
Michal Žůrek (misaz):

pěkně napsané. jen bych dodal, že to co kód CoffeScriptu převádí na kód JavaScriptu se jmenuje preprocesor a že Visual Studio (možná i další IDE, typuji, že to od JetBrains to taky umí) obsahuje nástroje pro práci s CoffeScriptem a jeho kompilátor, takže jestli někdo hledá IDE s kompilátorem...

Odpovědět  +4 28.7.2014 19:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Taskkill
Redaktor
Avatar
Taskkill:

Článek krása, skvěle se to čte ... ale první dojem mám spíš takový, že tohle nebude úplně můj šálek kávy.

 
Odpovědět 24.8.2015 16:09
Avatar
Yahkem
Redaktor
Avatar
Odpovídá na Taskkill
Yahkem:

Tak se můžeš podívat třeba na Typescript, který je na opačné straně spektra (je ukecanější), momentálně ho mám radši, než Coffee (nejspíš kvůli tomu, že používám VS) a díky statickým typům je mnohem rychlejší se naučit/používat API nějakého frameworku/knihovny

 
Odpovědět 24.8.2015 16:43
Avatar
Jurajs
Člen
Avatar
Jurajs:

Ahojte, když mluvíte o coffee scriptu a typescriptu, tak se chci zeptat, lze psat coffee script ve VS 2013?Nebo musim neco k tomu instalovat atp...? díky

 
Odpovědět 24.8.2015 18:55
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.