HTML5 okiem .NET-owca - odc. zero

Oprócz cyklu postów z Windows 8 postanowiłem równolegle zacząć pisać na temat HTML5 (w ujęciu szerokim - z zasadniczymi technologiami i najbardziej istotnymi bibliotekami), który zaczyna być wszędzie. To co kiedyś dla mnie jako zagorzałego .NET-towca wydawało się mało możliwe, od jakiegoś czasu staje się rzeczywistością. Wszystko na to wskazuje, że to właśnie HTML5 będzie używany wszędzie (nie jest to żadne odkrycie - w moim odczuciu szala się przechyliła, od kiedy Microsoft zaczął mocno stawiać na nowe standardy webowe, ostatecznie utwierdziły mnie prezentacje z BUILD, przykłady i dokumentacja do Windows 8, gdzie JavaScript wydaje się być stawiany na pierwszym miejscu,  przed C# oraz że w “codziennych” projektach HTML5 zyskuje już coraz większy udział). Tak więc modne stały się na nowo HTML, CSS, JavaScript z AJAX i różnymi bibliotekami, to co już było od dawna (historia zatoczyła koło) + nowa wersja HTML 5, nowa wersja CSS 3, SVG, nowe standardy i możliwości - np. websockety i webworkery. Do pisania porządnych aplikacji w HTML5 potrzebna jest też znajomość odpowiednich wzorców projektowych w JavaScript, frameworków i narzędzi. Najbardziej wygrane są osoby od zawsze piszące w dużych ilościach w HTML i JavaScript, ale chyba każdy może w pewnym czasie może opanować te zagadnienia. W tym cyklu będę je przedstawiał i komentował z punktu osób piszących dotychczas najwięcej w C#.

Swoje rozważania w tym odcinku zacznę od samego języka Java Script, który z powodu braku pewnych konstrukcji, od zawsze wydawał mi się dość prymitywny. Kilka uwag:

• wszystko jest obiektem (funkcje są obiektami) albo typem prymitywnym
• obecność zmiennych globalnych - definiowane bez słowa var, w przeglądarce obiekt window jest głównym kontekstem (możemy np. odwołać się do zmiennej a poprzez window.a, możemy zrobić to także, gdy jej nie zdefiniowaliśmy)
• zmienna o wartości null - ewaluuje w wyrażeniach warunkowych do wartości false
• typ prymitywny undefined - reprezentuje wartość nieznaną, jest zwracany przy nieistniejącej propercji obiektu, ewoluuje do false w wyrażeniach warunkowych
• predefiniowane biblioteki, np. Math
• obiekt to kolekcja propercji
• tworzenie obiektów z wartościami na propercjach  - np.  var p = { name:  “Frank” }, przypomina tworzenie obiektów anonimowych w C# 3 bez słowa new i z dwukropkami zamiast znaków równości, definicje można zagnieżdżać w sobie
• wszystkie obiekty podobnie jak w .NET mają metodę .toString() (wywołanie tej metody na funkcji zwraca jej kod)
• obiekt pusty - var empty = {} lub var t = new Object() (można na nim zdefiniować i ustawić propercję poprzez t.name = “Marcin”)
• tablice  można definiować poprzez otoczenie listy [] np.  [1,2,3]
• w obiekcie można nadpisać metodę przez przypisanie obiektu funkcji np.  o.toString = new function() { return this.name;  };
• 2 operatory Equals: == (wymuszający) i === (i !==)
• deklarowanie funkcji, również przez nazwanie i przypisanie:

var squareFunc = function square(x) { return x * x; };   (w takim przypadku można pominąć nazwę funkcji z prawej strony)

• natychmiastowe wywoływanie funkcji anonimowych:

(function (x) { return x * x; }) (y);

• nie ma przeładowań funkcji!  (większa liczba parametrów jest ignorowana, mniejsza uzupełniana wartościami domyślnymi)
• obiekt arguments – tablica przekazywanych parametrów do funkcji
• do funkcji może zostać przekazana dowolna ilość parametrów (korzystając z tablicy arguments można wykonywać na nich operacje)
• funkcje zagnieżdżone mają dostęp do wszystkich zmiennych zdefiniowanych poza nimi
• możliwa enumeracja po propercjach obiektu za pomocą pętli for

for (var propertyKey in t) {

        write(t[propertyKey]);

}

• throw  { name: “”, message: “” }
• prediniowane typy i funkcje
  • String (w “” lub w ‘’, symbole Unicode np. \u00A9,  charAt(index), indexOf(string), replace(from,to), search(regex), slice(x,y), split(separator), toLowerCase(), toUpperCase())

                    str.replace(“3”,”4”) lub str.replace(/3/,”4”) - zamienia tylko pierwsze wystąpienie,   str.replace(/3/g, “4”) - zamienia wszystkie wystąpienia

• Number (0.1 + 02 nie wynosi dokładnie 0.3, toFixed(n))
• Array (push(el), pop(), reverse()), slice(x,y) - kopiuje część tablicy, splice(x,y) - zabiera część tablicy, sort())

                          sort() - sortuje alfabetycznie, także … liczby, ale można to “naprawić” dostarczając własną funkcję: 

                          [2,1,10,3].sort(function(first,second) { return first - second; });

• Underscore.js - biblioteka open source do programowania funkcyjnego, wiele pomocniczych metod dla tablic np.

                    _.each(numbers, function(num) { write(num); });   _(numbers).each(function(num) { write(num); }); 

                   var numbers2 =   _(numbers).map(function(num) { return num * 2; });

                   var total = _(numbers).reduce(function(memo, num) { return memo+=num; }, 0);

                   var evens = _([1,2,3,4,5]).select(function(num) { return num % 2 === 0; });

                   var numbers = _([1,2,’a’]).all(function(item) { return typeof item === “number”; });  //sprawdza, czy wszystkie elementy są danego typu

                   var hasw3 = _([‘w1’, ‘w2’, ‘w3’, ‘w4’]).include(“w3”);

                   _({a: 3, b:2, c:1}).max()

• wyrażenia regularne (str.search(expr), expr.exec(str), expr.test(str), str.replace(expr, func))
• Date ( var today = new Date(2012, 2, 18) - miesiące liczone od zera;  today.toUTCString())
• Datejs - biblioteka rozszerzająca o dodatkowe metody obiekt Date np.

                           Date.today().add(3).days();

                          var sm = Date.march().first().monday();

                          sm.is().monday();

                          Date.parse(“next monday”);

• eval(“kod JS”) - wolny, mało bezpieczny, najlepiej nie używać
• JSON (do parsowania można użyć json2.js - funkcje parse i stringify, parsowanie szybsze i bardziej bezpieczne niż przez eval)

                          var input = “json”; eval(“var data = “ + input);  write(data.books[0].title;

                          var data = JSON.parse(input);

                          JSON.stringify(data);  //serializacja

• isNan() (np. isNan(Nan))
• parseFloat (np. parseFloat(“48”))
• obiekt Math (abs, floor - największy integer mniejszy lub równy, ceil - najmniejszy integer równy lub większy, pow, random, round)
• Firebug (http://getfirebug.com) (drzewo, zaznaczanie i modyfikacja elementów, konsola - logowanie, błędy, profiling, style CSS - podgląd zaaplikowanych i modyfikacja, podgląd komunikacji - predefiniowane standardy i technologie, wszystkie requesty, pogląd załadowanych plików i skryptów, debugowanie, YSlow - dodatek Firebug do analizy wydajności)
• Testy automatyczne
  • QUnit (używany do testów jQuery) (module(“a”); test(“test1”, function() { ok(true, “komunikat”) }
  • Jasmine (do testów BDD) (describe, beforeEach, it)

c.d.n