2017 JS Jak się uczymy JavaScriptu? A raczej czym jest dzisiaj JavaScript. To jest dobre pytanie ponieważ w ostatnich latach znowu dużo się zmieniło i mimo, iż staram się śledzić nowinki mam wrażenie, że zaspałem jakieś 2 lata.

Jak się okazuje 2 lata to bardzo dużo w tej branży i jak się okazuje, znam na tyle dobrze JavaScript, by wykonywać swoją pracę, ale czy znam na tyle dobrze JavaScript, aby nie zgubić się w dzisiejszym świecie. Nie jestem futurystą (nie mam tego demona), ale co robić, gdy przyszłość zlewa się z teraźniejszością bez przerwy w świecie programowania w JavaScript.

Programuję w C# i strony internetowe nie są moją główną działką, ale jestem w szoku z faktem co się obecnie dzieje.

Zadaję sobie pytanie czy ty jesteś web developer na czasie. Ja piszę ten wpis w  grudniu w roku 2016, ale dla JavaScriptu technicznie jest już 2017. Szkoda, że to nie może biec jeszcze szybciej.

Audio API Dostałem wczoraj na Facebooku zapytanie jak można otworzyć dźwięk na stronie HTML. Sprawa wydaje się bardzo prosta jeśli się wiem jakich frazy trzeba szukać w Google. Osoba, która zadała mi to pytania widać, że się nie zna nawet podstaw co by tłumaczyło dlaczego z tym problemem zgłosiło się do mnie.

A tak na serio. Nie zawsze facebook pozwala mi czytać wiadomości od obcych osób dlatego jeśli macie pytania lub prośby zawsze możecie skorzystać ze strony kontaktowej.

Przejdź mi jednak teraz do omówienia problemu odtworzenia dźwięku w HTML a raczej w JavaScript-cie.

Problem ten obecnie łatwo rozwiązać ponieważ żyjemy w przyszłości HTML 5. Tak jest do otworzenia dźwięku nie potrzebny nam jest plugin Flash czy Silverlight. Mamy wszystko co nam jest potrzebne.

DyreCzęść NR.6

Witam w kolejnym wpisie kursu Angular JS 1.X. Kurs zbliża się już do końca. Jeszcze dwa wpisy plus ten i wstęp do Angulara uznaję za zakończony.

Jest to ostatni wpis na temat dyrektyw Angular. Jest ich sporo więcej, ale nie omówię ich tutaj wszystkich.

Jedną z omawianych dyrektyw w tym wpisie jest ng-repeat.

Sprawdza się ona znakomicie przy wyświetlaniu kolekcji elementów.

D3 Line ChartCzęść NR.3

W poprzednim wpisie narysowaliśmy wykres liniowy przy użyciu SVG i skryptu JavaScript D3.

Czas dodać pewne małe zmiany do naszego wykresu liniowego. Po pierwsze do wyświetlania danych zazwyczaj otrzymamy tablice obiektów, a nie tablice wartości.

Sam wykres nie ma też kropek w miejscach, gdzie powinny być wartości. Osie X i Y nie mają strzałek. Wykres nie ma tytułu. Osie nie są podpisane.

Są to drobne rzeczy, ale bez nich wykres może wyglądać blado. Zacznijmy więc przerabiać kod.

Jak obsłużyć tablice obiektów?

D3 Line ChartCzęść NR.2

W poprzednim wpisie narysowaliśmy prosty wykres słupkowy przy użyciu D3.

W tamtym przykładzie nie użyliśmy SVG. Można narysować prostokąty przy użyciu elementów div. Sprawa jednak się komplikuje, gdy chcemy narysować nawet proste linie.

Nie ma co ukrywać, że w takim wypadku lepiej zabrać do swojego arsenału SVG.

SVG pozwala na rysowanie przeróżnych figur i elementów, które normalnie w HTML nie są łatwe do narysowania.

JS MVCT4

Wcześniej omówiłem skrypt T4, który tworzy klasy na bazie kontrolerów ASP.NET MVC. Czy istnieje skrypt T4, który utworzy pomocniczy kod tylko po stronie JavaScript.

Na czym polega problem? Chodzi o ścieżki URL do akcji poszczególnych kontrolerów MVC.

Istnieje też problem z powtarzalnością kodu JavaScript wywołującym zapytania AJAX do serwera.

Taki skrypt istnieje i dzisiaj go omówię.

Stack modulesBoostrap oferuje łatwy skrypt do wywołania okien modalnych w stronach internetowych.

Czasem jednak istnieje potrzebna wywołania kolejnego okna, gdy już jedno z nich zostało otwarte.

Pamiętam jak kiedyś uruchamiałem okna modalne przy użyciu kontrolek Telerick. W scenariuszu, w którym było potrzebne kolejne okno modalne, wtedy „łamałem sobie głowę”. Wywołanie okna modalnego, mając otwarte inne okno modalne, powodowało utworzenie okna modalnego w oknie modalnym. Całe szczęście, że nie programuję już z wykorzystaniem tych starych rozwiązań.

Mając jednak nawet boostrapa i rozwiązanie godne naszych czasów wciąż zadaję sobie pytanie, jak to można zrobić.

#2 DataTable

W poprzednim wpisie zebraliśmy wszystkie pliki potrzebne do uruchomienia skryptu DataTable wraz ze stylami boostrap.

Obecnie tabelka jest obudowana mechanizmem DataTable. Dzięki temu możemy filtrować i sortować dane po tej tabelce.

Tabelka ma jednak wpisane dane na stałe. Powstaje więc pytanie, jak dynamicznie dane przekazać do tabelki? Można to zrobić na wiele sposobów.

HighlightKolejna zmiana na blogu na lepsze. Wcześniej do koloryzowania składni kodu na blogu korzystałem z trzech technik.

Każda z nich okazała się kiepska. Jedna z nich przestała nawet działać gdyż BlogEngine przestał wspierać SyntaxHiglighter.

Przez wiele miesięcy  siłowałem się z koloryzowaniem składni kodu Objective-C. SyntaxHiglighter nie wspierał tego języka programowania. Technika koloryzowania składni z której zazwyczaj korzystam  nie działała ze względu na to, że nie można zainstalować Windows Live Writera na komputerach MAC.

Postanowiłem do bloga dodać nowe koloryzowanie. Dużo się zmieniło na przestrzeni lat. Teraz widzę, że te rozwiązanie rozwiązuje wiele problemów. Mówię tutaj o koloryzowaniu składni przy użyciu Highlight js.

DataTableChciałbyś stworzyć prostą stronę z tabelką. Chciałbyś, aby tabelka miała możliwość filtrowania i sortowania. Jak osiągnąć ten rezultat bardzo szybko.

Po raz kolejny zapomnij o AJAX-owych kontrolkach ASP.NET. Zapomnij o klasycznym ASP.NET-cie. Czy nadal programujesz i tworzysz strony internetowe jak jaskiniowiec.

DyrektywyCzęść NR.5Czego nauczyliśmy się do tej pory?

Wiemy, że jeśli chcemy, aby jakieś dane pojawiły się na stronie, musimy użyć parametru $scope.

Do parametru $scope umieszczamy nasz model.



<script>
var MainController = function ($scope) {

    $scope.mytext = "Angular JS Rulez";

}
</script>

Model nie dotyka HTML.

ModułCzęść NR.4Nasz kontroler “MainController” żyje obecnie wewnątrz globalnej przestrzeni nazwy. To jest raczej złym pomysłem. Kiedy budujesz swoją aplikację z Angular to nie chcesz tego robić.

Jeśli spojrzysz na inne aplikacje zbudowane przy użyciu Angular zauważysz, że żaden z kontrolerów nie jest w globalnej przestrzeni nazw.

WywołanieCzęść NR.3Witam w trzeciej części kursu o Angular 1.X. Poprzednim razem omówiliśmy kontrolery. Postanowiłem też dodać informacje o tym, do jakiej wersji ten kurs się odwołuje. Wersja Angular 2.0 jeszcze się nie pojawiła, ale twórcy tej wersji wywracają wszystko do góry nogami.

Przykładowo: nie będzie w niej kontrolerów.

Oficjalnie twórcy, mimo wszystko radzą używać obecnej wersji. Twórcy też wierzą, że 1.X. jest nadal dobra i nie ma potrzeby aktualizować jej do wersji 2.0, gdy będzie to możliwe. Taką informację otrzymałem od autora książki o Angular, na spotkaniu WODNUG.

Przejdźmy do naszego kursu.

Wiemy już czym są kontrolery i jakie funkcje spełniają. Przejdźmy do wywołań HTTP.

AngularCzęść NR.1Od 2010 roku dużo się zmieniło. Kod serwerowy nie powinien operować widokiem, powinien tylko dostarczać informacji. Zapomnij o klasycznym ASP.NET i jego kontrolkach jak UpdatePanel. Tak się nie powinno programować.

JavaScript nie jest takim strasznym językiem, jakim go niektórzy malują. Obecnie istnieje wiele frameworków JavaScript, które ułatwiają pracę nad stronami pisanymi w stylu single page application.

D3Część NR.1Wizualizacja danych. Kiedyś do pracy w trakcie marszu śmierci musiałem szybko napisać kod który by rysował wykres. Skorzystałem wtedy z biblioteki JavaScript Highchart.js. Obecnie sobie uświadamiań, że te głupie wykresy które napisałem spełniają bardzo ważną rolę biznesową dla klientów. Postanowiłem więc nauczyć się bardziej zawansowanej biblioteki stworzeń do tworzenia grafik i wykresów.

IntellisensePamiętam jak kiedyś pisałem swój pierwszy projekt ASP.NET Visual Studio 2008. Nie było to przyjemne. Trochę nawet bolesne gdy tylko chciało się coś zrobić w JavaScript-cie. Od tamtego czasu dużo się zmieniło. Visual Studio obecnie posiada Intellisense do JavaScript-u. Jak jednak skorzystać z tego narzędzia. Działa ono lepiej niż kiedykolwiek ale by go użyć trzeba się trochę wysilić.

Jak więc mieć Intellisense do jQuery gdyż domyślnie go nie ma.

jQuery brak intellisense

Domyślnie Visual Studio skanuje wszystkie referencje do plików JS i na jej podstawie tworzy Intellisense.

Java+JSJak sprawdzić czy ktoś ma ogólne pojęcie o programowaniu?

Najlepiej zadać mu pytanie jaka jest różnica pomiędzy JavaScript-em ,a Javą. Sam kiedyś dawno temu myślałem ,że oba języki programowania mają ze sobą dużo wspólnego ,że JavaScript jest Javą dla przeglądarek (cokolwiek to znaczy).

SessionJavaScript jest językiem klienckim i wywołuje się on po stronie przeglądarki.Naturalnie w JavaScript  nie możemy uzyskać dostępu do zmiennej sesyjnej  ASP.NET. Istnieją jednak pewne sposoby do uzyskania zmiennej sesyjnej i jej wyświetlenie po stronie JavaScript.

Global JS

Język JavaScript do zarządzania zasięgiem zmiennych wykorzystuje funkcje. Zmienna zdefiniowana wewnątrz funkcji jest zmienną lokalną. Istnieje ona tylko wewnątrz funkcji.

Zmienna globalna natomiast jest zadeklarowana poza funkcją lub jest używana bez jakiejkolwiek deklaracji.

Środowisko JavaScript udostępnia obiekt globalny pod słowem kluczowym this ,pod warunkiem, że jest ono użyte poza funkcją lub bez żadnych deklaracji.

Każda zmienna globalna staje się właściwością obiektu globalnego.

W przeglądarkach istnieje właściwość “windows”, która zazwyczaj wskazuje na sam obiekt globalny.

LoopJS Strony internetowe są ładowane wiele razy przez wielu użytkowników równocześnie. Nasz kod JavaScript też.

Napisania złego kodu JavaScript nie zawsze skutkuje totalną katastrofą. Jednak jeśli lubisz być perfekcyjny to warto zapamiętać jak pętle w JavaScript działają.

JS AllmanJeśli pracowałeś z JavaScript przez bardzo długi czas to zapewne wiesz ,że JavaScript ma szczególny format nawiasów klamrowych.

Nie chodzi jednak tutaj tylko o styl formatowania ustalonych przez programistów. Istnieje pewien poważny powód dla którego powinieneś zwrócić na to uwagę. Nawias klamrowy w złej linii może zniszczyć twój kod JavaScript.

DataPicker W aplikacjach web uzyskujesz różne informacje od użytkowników za pomocą textboxów i checkboxów. Często jednak musisz uzyskać informacje kalendarzowe od użytkowników, np. użytkownik w filtrowaniu rekordów danych w aplikacji web może użyć dat.

 

Jednak jak te dane uzyskać od użytkownika. Sprawa wydaje się prosta wystarczy dać użytkownikowi textbox i dołączyć do niego jakąś prostą walidację. Tak, coś w tym stylu.