CoffeeScript JavaScript, který se dá číst. I psát. Jan

Podobné dokumenty
JavaScript 101. "Trocha života do statických stránek"

NA CO SI DÁT POZOR V JAVASCRIPTU? Angular.cz

SPJA, cvičení 1. ipython, python, skripty. základy syntaxe: základní datové typy, řetězce. podmínky: if-elif-else, vyhodnocení logických výrazů

JAVA. Další jazyky kompilovatelné do Java byte-code

WSH Windows Script Hosting. OSY 2 Přednáška číslo 2 opravená verze z

Inovace bakalářského studijního oboru Aplikovaná chemie

Programování v jazyce JavaScript

První kapitola úvod do problematiky

VÝUKOVÝ MATERIÁL. Bratislavská 2166, Varnsdorf, IČO: tel Číslo projektu

EVROPSKÝ SOCIÁLNÍ FOND. Úvod do PHP PRAHA & EU INVESTUJEME DO VAŠÍ BUDOUCNOSTI

Programování v jazyce JavaScript

Úvod do programovacích jazyků (Java)

NSWI096 - INTERNET JavaScript

Úvod do jazyka C. Ing. Jan Fikejz (KST, FEI) Fakulta elektrotechniky a informatiky Katedra softwarových technologií

DSL manuál. Ing. Jan Hranáč. 27. října V této kapitole je stručný průvodce k tvorbě v systému DrdSim a (v

Funkcionální programování. Kristýna Kaslová

1. lekce. do souboru main.c uložíme následující kód a pomocí F9 ho zkompilujeme a spustíme:

Programovací jazyky. imperativní (procedurální) neimperativní (neprocedurální) assembler (jazyk symbolických instrukcí)

Groovy agilní Java. Pavel Kříž Filip Malý

Skriptovací jazyky. Obsah

1. lekce. do souboru main.c uložíme následující kód a pomocí F9 ho zkompilujeme a spustíme:

ČERV. Hra Červ je psána pomocí příkazů Javascriptu a standardních příkazů HTML.

Masarykova střední škola zemědělská a Vyšší odborná škola, Opava, příspěvková organizace

VÝUKOVÝ MATERIÁL. Bratislavská 2166, Varnsdorf, IČO: tel Číslo projektu

C2184 Úvod do programování v Pythonu podzim Mgr. Stanislav Geidl Národní centrum pro výzkum biomolekul Masarykova univerzita.

Objektově orientovaný přístup

typová konverze typová inference

Využití OOP v praxi -- Knihovna PHP -- Interval.cz

MAXScript výukový kurz

IB111 Úvod do programování skrze Python Přednáška 13

5a. Makra Visual Basic pro Microsoft Escel. Vytvořil Institut biostatistiky a analýz, Masarykova univerzita J. Kalina

Konečný automat. Jan Kybic.

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Michal Krátký. Úvod do programovacích jazyků (Java), 2006/2007

Sémantika Tabulka symbolů Intermediální kód Typová kontrola, přetypování Statická a dynamická sémantika. Sémantická analýza.

Ruby on Rails. Bc. Tomáš Juřík Bc. Bára Huňková

Jazyk C# (seminář 6)

Objektově orientované programování

Úvod do programování v jazyce Java

Tvorba klientských skriptů v jazyce Java Script

Úvod. Karel Richta a kol. katedra počítačů FEL ČVUT v Praze. Karel Richta, Martin Hořeňovský, Aleš Hrabalík,2016

Programovací jazyky. imperativní (procedurální) neimperativní (neprocedurální) assembler (jazyk symbolických instrukcí)

Definice třídy. úplná definice. public veřejná třída abstract nesmí být vytvářeny instance final nelze vytvářet potomky

Neměnné objekty. Tomáš Pitner, upravil Marek Šabo

Programovací jazyk Pascal

Úvod do programovacích jazyků (Java)

8 Třídy, objekty, metody, předávání argumentů metod

Čtvrtek 8. prosince. Pascal - opakování základů. Struktura programu:

Sekvenční a podmíněné provádění

Obsah. Úvod 11 Základy programování 11 Objektový přístup 11 Procvičování 11 Zvláštní odstavce 12 Zpětná vazba od čtenářů 12 Errata 13

Enterprise Java (BI-EJA) Technologie programování v jazyku Java (X36TJV)

Matematika v programovacích

Pokročilé programování v jazyce C pro chemiky (C3220) Úvod do jazyka C++

PROMĚNNÉ, KONSTANTY A DATOVÉ TYPY TEORIE DATUM VYTVOŘENÍ: KLÍČOVÁ AKTIVITA: 02 PROGRAMOVÁNÍ 2. ROČNÍK (PRG2) HODINOVÁ DOTACE: 1

Preprocesor. Karel Richta a kol. katedra počítačů FEL ČVUT v Praze. Karel Richta, Martin Hořeňovský, Aleš Hrabalík, 2016

Tematický celek Proměnné. Proměnné slouží k dočasnému uchovávání hodnot během provádění aplikace Deklarace proměnných

PHP - úvod. Kapitola seznamuje se základy jazyka PHP a jeho začleněním do HTML stránky.

PHP tutoriál (základy PHP snadno a rychle)

Pascal. Katedra aplikované kybernetiky. Ing. Miroslav Vavroušek. Verze 7

Algoritmizace a programování

IB111 Programování a algoritmizace. Programovací jazyky

Programování v C++ Úplnej úvod. Peta (maj@arcig.cz, SPR AG )

C2184 Úvod do programování v Pythonu podzim Stanislav Geidl Národní centrum pro výzkum biomolekul Masarykova univerzita. Úvod.

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

Webové Aplikace (6. přednáška)

VÝUKOVÝ MATERIÁL. Bratislavská 2166, Varnsdorf, IČO: tel Číslo projektu

Lambda funkce Novinky v interfaces Streamy Optional - aneb zbavujeme se null. Java 8. Ondřej Hrstka

Programovací jazyk C++ Hodina 1

8. lekce Úvod do jazyka C 3. část Základní příkazy jazyka C Miroslav Jílek

2) Napište algoritmus pro vložení položky na konec dvousměrného seznamu. 3) Napište algoritmus pro vyhledání položky v binárním stromu.

C2110 Operační systém UNIX a základy programování

Výjimky. Tomáš Pitner, upravil Marek Šabo

Programovací jazyk C(++) C++ area->vm_mm->locked_vm -= len >> PAGE_SHIFT;

Zápis programu v jazyce C#

Definice třídy. úplná definice. public veřejná třída abstract nesmí být vytvářeny instance final nelze vytvářet potomky

Pokud zadání nerozumíte nebo se vám zdá nejednoznačné, zeptejte se. Pište čitelně, nečitelná řešení nebudeme uznávat.

Třídy. Instance. Pokud tento program spustíme, vypíše následující. car1 má barvu Red. car2 má barvu Red. car1 má barvu Blue.

Obsah přednášky 7. Základy programování (IZAPR) Přednáška 7. Parametry metod. Parametry, argumenty. Parametry metod.

4a. Makra Visual Basic pro Microsoft Excel Cyklické odkazy a iterace Makra funkce a metody

InterSystems Caché Post-Relational Database

Iterator & for cyklus

Proměnná. Datový typ. IAJCE Cvičení č. 3. Pojmenované místo v paměti sloužící pro uložení hodnoty.

Příkazové skripty Procedurální jazyky Lua a ostatní

Javascript v Seznamu

Algoritmizace a programování

11. Přehled prog. jazyků

Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide.

Problém, jehož různé instance je třeba často řešit Tyto instance lze vyjádřit větami v jednoduchém jazyce

Přednáška 7. Celočíselná aritmetika. Návratový kód. Příkazy pro větvení výpočtu. Cykly. Předčasné ukončení cyklu.

Současný svět Projekt č. CZ.2.17/3.1.00/32038, podpořený Evropským sociálním fondem v rámci Operačního programu Praha adaptabilita

Objekty v PHP 5.x. This is an object-oriented system. If we change anything, the users object.

Printris. Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML.

Algoritmy I. Cvičení č. 2, 3 ALGI 2018/19

O datových typech a jejich kontrole

Obsah přednášky. Příkaz for neúplný. Příkaz for příklady. Cyklus for each (enhanced for loop) Příkaz for příklady

Základy HTML, URL, HTTP, druhy skriptování, formuláře

13. Skriptovací jazyk PHP

Algoritmizace a programování

Počítačová Podpora Studia. Přednáška 4. Nástroje pro vědecko-technické výpočty a zpracování dat. (v rámci PPS) PPS 2014

Transkript:

CoffeeScript JavaScript, který se dá číst. I psát. Jan Bednařík @janbednarik

Co nás čeká 1. Proč říci JavaScriptu ne 2. JavaScript > CoffeeScript 3. CoffeeScript podrobněji 4. Tajemství designu programovacích jazyků

Temná historie JavaScriptu JavaScript vznikl v roce 1995 během války prohlížečů (Browser Wars) Netscape chtěl vytvořit skriptovací jazyk pro neprogramátory Brendan Eich navrhnul a implementoval JavaScript během 10 ti dnů neřízený rozvoj jazyka (Netscape VS Microsoft) pomalá implementace standardů v prohlížečích pomalý vývoj prohlížečů a "nekonečná" zpětná kompatibilita žádné vývojové a debugovací nástroje (FireBug 1.0 v roce 2006)

JavaScript a uživatelé JavaScript = vyskakovací okna Od roku 2004 umí blokovat vyskakovací okna už i Internet Explorer.

> 10 + "10"; "1010" JavaScript a programátoři > var nic = null; > nic + "A"; "nulla" Sčítáme hrušky a jablka To bylo jasné že to není 20! LOL?

JavaScript a programátoři > var formatujdisk = false; Rovná se? > if (formatujdisk = true) console.log("formátuji!"); Formátuji! > formatujdisk true Hej! Tam patří dvě rovnítka ==

JavaScript a programátoři > 10 == "10"; true Tak tedy == Tak ne asi... když se to dá sčítat, tak se to musí rovnat... > 10 === "10"; false Počkej! V JavaScriptu piš jedině === Takové jednoduché řešení problému? Bohužel ne...

JavaScript a programátoři > var foo = []; > foo === true; false > foo == true; false > if (foo) { console.log("true jak bič!"); } else { console.log("false, co si čekal?"); } True jak bič! Publikum: Potlesk! Publikum: Potlesk! Publikum: Teď můžete brečet...

JavaScript a programátoři Napíšeme si funkci, která vrátí true, pokud je v řetězeci číslo. > var isnumber = function(s) { var result = parseint(s); // pokusíme se převést string na číslo return typeof result === "number"; // true pokud je výsledek typu number } > isnumber("100"); true > isnumber("javascript"); true > parseint("javascript"); NaN // znamená Not A Number > typeof NaN; "number"??? WTF!?

JavaScript a programátoři A: "To by stačilo." B: "Mám ještě pár příkladů..." A: "Není třeba, s JavaScriptem už nechci mít nic společného!" B: "Ale budeš mít. JavaScript je JEDINÝ rozšířený skriptovací jazyk pro internetové prohlížeče."

Shrnutí JavaScript je nedomyšlený paskvil, se kterým není radno si začínat. JavaScript je JEDINÝ rozšířený skriptovací jazyk pro internetové prohlížeče. A ještě dlouho bude. Co s tím?

Preprocesory, knihovny, jazyky 40+ knihoven napsaných v JavaScriptu doplňujících JavaScript o OOP s klasickým třídami, statické typování, striktní režimy psaní kódu,... 80+ nástrojů pro převod kódu z jiných jazyků do JavaScriptu (C#, Java, Python, Lisp, Ruby, Perl, PHP, C, C++,...) 30+ nových jazyků kompilovaných do JavaScriptu (CoffeeScript, TypeScript, LiveScript, Dart,...) desítky dalších nástrojů, jako třeba virtuální stroje a interprety jiných jazyků, více na altjs.org Programuje ještě vůbec někdo v čistém JavaScriptu?

CoffeeScript nový jazyk kompilovaný do JavaScriptu kompilátor napsaný v JavaScriptu 100% kompatibilita s JavaScriptem (kód, knihovny, atd.) snaží se programátorům jednoduchou formou poskytnout to dobré z JavaScriptu čitelná syntaxe inspirovaná jazyky Python a Ruby zásadní úspora kódu oproti ekvivalentnímu kódu v JavaScriptu nejpopulárnější z nástrojů řešících problémy JavaScriptu 10. nejpopulárnější jazyk na GitHubu CoffeeScript.org

Jak rozjet CoffeeScript <script src="coffee-script.js"></script> 1. Interaktivně v prohlížeči Živě intepretuje soubory.coffee 2. Kompilátor a REPL (interaktivní konzole) npm install -g coffee-script Program coffee spouštěný z terminálu. 3. Pluginy pro editory Při uložení.coffee se automaticky kompiluje do.js

JavaScript > CoffeeScript Pryč se středníky var foo = "Hello"; if (foo === "Hello") { var bar = "World"; alert(foo + " " + bar + "!"); } else { alert(math.floor(math.random() * 11)); }; var foo = "Hello" if (foo === "Hello") { var bar = "World" alert(foo + " " + bar + "!") } else { alert(math.floor(math.random() * 11)) } JavaScript: (skoro) CoffeeScript: Nejsou třeba, protože nikdo nepíše celý skript na jeden řádek.

JavaScript > CoffeeScript Pryč s kudrlinkami var foo = "Hello"; if (foo === "Hello") { var bar = "World"; alert(foo + " " + bar + "!"); } else { alert(math.floor(math.random() * 11)); }; var foo = "Hello" if (foo === "Hello") var bar = "World" alert(foo + " " + bar + "!") else alert(math.floor(math.random() * 11)) JavaScript: (skoro) CoffeeScript: Pěkný kód je odsazený. Kudrlinky tak nemají smysl.

JavaScript > CoffeeScript Pryč se deklarací proměnných var foo = "Hello"; if (foo === "Hello") { var bar = "World"; alert(foo + " " + bar + "!"); } else { alert(math.floor(math.random() * 11)); }; foo = "Hello" if (foo === "Hello") bar = "World" alert(foo + " " + bar + "!") else alert(math.floor(math.random() * 11)) JavaScript: (skoro) CoffeeScript: Kompilátor sám pozná, co je proměnná. Všechny proměnné jsou definovány v lokálním jmenném prostoru.

JavaScript > CoffeeScript Pryč se zbytečnými závorkami var foo = "Hello"; if (foo === "Hello") { var bar = "World"; alert(foo + " " + bar + "!"); } else { alert(math.floor(math.random() * 11)); }; foo = "Hello" if foo === "Hello" bar = "World" alert foo + " " + bar + "!" else alert Math.floor Math.random() * 11 JavaScript: (skoro) CoffeeScript: Závorky nikdy ničemu nevadí, pokud nejste fandové Ruby syntaxe, klidně je piště kde chcete.

JavaScript > CoffeeScript Pryč s magickými rovnítky var foo = "Hello"; if (foo === "Hello") { var bar = "World"; alert(foo + " " + bar + "!"); } else { alert(math.floor(math.random() * 11)); }; foo = "Hello" if foo == "Hello" bar = "World" alert foo + " " + bar + "!" else alert Math.floor Math.random() * 11 JavaScript: (skoro) CoffeeScript: == se automaticky kompiluje do ===

JavaScript > CoffeeScript Pryč se sčítáním řetězců var foo = "Hello"; if (foo === "Hello") { var bar = "World"; alert(foo + " " + bar + "!"); } else { alert(math.floor(math.random() * 11)); }; foo = "Hello" if foo == "Hello" bar = "World" alert "#{foo} #{bar}!" else alert Math.floor Math.random() * 11 JavaScript: CoffeeScript: Hele, už je to CoffeeScript!

CoffeeScript

Funkce JavaScript: var sum = function(a, b) { return a + b; } CoffeeScript: sum = (a, b) -> a + b místo function napíšeme jen > return není třeba, funkce vždy vrátí hodnotu posledního výrazu

foo = (bar="hello", baz=null) -> null Funkce default argumenty

var message = { to: { name: "Honza", email: "honza@seznam.cz" }, text: "Nuda jak nechceš." }; message = to: name: "Honza" email: "honza@seznam.cz" text: "Nuda jak nechceš." Deklarace objektů JavaScript: CoffeeScript:

var numbers = [1, 2, 3]; var animals = [ "dog", "cat", "bat" ]; numbers = [1, 2, 3] animals = [ "dog" "cat" "bat" ] Deklarace polí JavaScript: CoffeeScript:

Operátory CoffeeScript: JavaScript: ==, is ===!=, isnt!== not! and && or true, yes, on true false, no, off false @, this this of in in (není v JS)

if if name == "Michal" console.log "Ahoj Michale" else console.log "Dobrý den" if foo is true then bar() else baz() sayhello() if greet is true mood = if monday then "bad" else "good" zkrácená forma jako přípona podmiňovací zápis

for JavaScript: for (var n=0; n<=10; n++) { console.log(n); }; CoffeeScript: for n in [0..10] console.log n

for JavaScript: var foo = ["a", "b", "c"]; for (var n=0; n<foo.length; n++) { console.log(foo[n]); }; foo = ["a", "b", "c"] for item in foo console.log item console.log item for item in foo CoffeeScript: řádkový zápis

List Comprehension map: bigchars = (item.touppercase() for item in ["a", "b", "c"]) filter: myanimals = ["spider", "cat", "snake"] dangerous = (animal for animal in myanimals when animal isnt "cat")

Třídy class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 class Horse extends Animal move: -> alert "Galloping..." super 45 sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()

Tajemství designu programovacích jazyků

John McCarthy Lisp, 1958

Dennis Ritchie C, 1973

Bjarne Stroustrup C++, 1983

Guido van Rossum Python, 1991

James Gosling Java, 1995

Brendan Eich JavaScript, 1995

Teorie vlivu vousů na design programovacích jazyků

Anders Hejlsberg C#, 2001

Larry Wall Perl, 1987

The End