Kategoria: JavaScript

jQuery Bootstrap. Pomocniczy framework CSS do budowania stron. Pracuje on nad swoją 5 wersją. Wypuścił on całkiem niedawno swoją najnowszą wersję alpha. 

Jego najnowszy bajer polega na tym, że nie jest on już zależny od jQuery. To zadaje poważne pytanie. jQuery był pierwszy wspaniałym frameworkiem JavaScript, który przez lata ułatwiał budowanie stron internetowych. Jednakże nic nie trwa wiecznie. W programowaniu ciężko znaleźć rozwiązanie, które potrafi przetrwać 10 lat lub więcej.

Pytanie, czy dziś i w przyszłości potrzebujemy jQuery do budowania stron internetowych

SymbolNr.4Pogadajmy o symbolach, które są od ES6. Nie było ich wcześniej w tym języku programowania. Co pierwszy raz o nich słyszysz.  Nie ma problemu. Po to jest w końcu ten szybki trening JavaScript. Symbol spełnia parę zadań w JavaScript.

Jednym z nich jest wygenerowanie unikatowego identyfikatora. 

Sztuczna polega na tym, że TY nigdy nie wiemy, jak dokładnie wygląda ten identyfikator i nie masz do niego dostępu. 

Nie masz żadnej możliwości inspekcji, aby zobaczyć, czym ten identyfikator jest. Wiem, że będzie on unikatowy. Utwórzmy, więc ten symbol korzystając z funkcji symbol.

Jak widzisz, aby go utworzyć, muszę podać jakiś napis. Ten napis jest użyty tylko do celów debugowania.

Co się teraz stanie? Utworzy się nowy symbol z unikatowym ID w silniku JavaScript i przypiszemy ten identyfikator do naszej zmiennej.

Sprawdźmy jakiego typu jest nasz symbol.

ModuleNr.2 W tym wpisie zobaczymy jak moduły i klasy działają w JavaScript. Wiem, co sobie myślisz "przecież ja o tym wiem", ale czy tak rzeczywiście jest. Nie zaszkodzi zrobić szybką powtórkę i odświeżyć wiedzę. 

Jeśli zaczynasz swoją przygodę z JavaScript, to ten wpis jeszcze bardziej Ci się przyda. O ile wcześniej do testowania kodu JavaScript wystarczyła sama konsola przeglądarki. Tym razem będę potrzebował prymitywny projekt.  

Utworzyłem w Visual Studio Code 3 pliki index.html, main.js i module-first.js.

SłownikiNr.3 Czy wiesz, że tablica nie jest jedyną kolekcją w JavaScript. Poza tym sama tablica oferuje dużo metod pomocniczych i nie musisz pisać swoich.

Dzisiaj spojrzymy na to wszystko. W końcu to trening JavaScript.

Wraz specyfikacja EcmaScript 6 i dalej pojawiło się mnóstwo dodatkowych funkcji dla tablic. Zacznijmy od problemu, który możesz przypadkiem popełnić. Tworzymy niby tablice i umieszczamy w niej wartość 200.000. Programista może założyć, że jest to wartość, która idzie do tablicy. Co jednak pojawi się w konsoli.

TreningNr.1 Przyznaj się, na ile znasz JavaScript? Wiele programistów jest niedzielnymi programistami JavaScript. Coś trzeba było zrobić? Nie ma problemu. Metodą prób i błędów i przy pomocy Googli napiszę wystarczający działający kod JavaScript.

Nie ma w tym nic wstydliwego, że język JavaScript nie jest twoją główną smykałką. Dziś w roku 202X jednak trzeba coś z tym zrobić. 

Pomyśl też o tych sytuacjach, gdy szukasz prostych rozwiązania pod czysty JavaScript, a wyskakują Ci rozwiązania pod jQuery.

Interakcje2 W poprzednim wpisie omówiliśmy szablon, a teraz zaczniemy go przerabiać dodając nową usługę REST API w ASP.NET CORE i nowe widoki w Angular. Zanim jednak do tego przejdziemy musimy omówić pewną pułapkę związaną z przechowywaniem plików statycznych w cache. Powiemy też o konfiguracji w ASP.NET CORE.

O co chodzi?

Template1 Zawsze chciałem zrobić serię wpisów o Angularze i ASP.NET. W tym wpisie zobaczymy podstawowy szablon z Visual Studio, który ma łączyć świat Angular i ASP.NET CORE. Chociaż w tym wpisie będzie używał nazwy ASP.NET, ponieważ już niedługo słowo CORE nie będzie miało znaczenia wraz z pojawieniem się .NET 5.0, który scali środowiska. Jednak może zostajemy przy ASP.NET CORE. Słowa kluczowe w SEO to mój problem.

Tutaj też pojawia się moja obawa.

Taki wpis wymaga ode mnie pracy, a nigdy nie wiesz, kiedy coś się zmieni. Przynajmniej z tego, co widzę szablon Angulara z 2017 i z 2020 nie wiele się różnią poza tym, że szablon z 2020 roku został odchudzony.

To daje mi nadzieje, że jak czytasz to z przyszłości to ten wpis będzie użyteczny.

Świat ASP.NET się zmienia dosyć szybko, ale dobra wiadomość jest taka, że styl MVC wciąż w nim jest od 9 lat. Nie musisz się więc martwić, że ta wiedza pójdzie do kosza. 

Co do Angulara? Zrobiłem oddzielny wpis na temat jego historii (https://cezarywalenciuk.pl/blog/programing/co-to-jest-angular-historia-do-2020), ponieważ byłem ciekaw czy on ma gwałtowne zmiany w swoim kodzie. Odpowiedź brzmi : nie jest tak źle. Największa zmiana dotyczyła paczki @http, a tak pojawiają się tylko usprawnienia.

Mamy więc stronę serwerową : ASP.NET i mam także stronę kliencką Angular. Sprawdzimy podstawowy szablon z Visual Studio i hej może już programowałeś w tych technologiach wcześniej i chciałbyś zobaczyć co się zmieniło. 

Oto tematy w tym wpisie:

• Co jest w tym szablonie
• Jak wygląda back-end .NET CORE
• Angular, czyli jak wygląda front-end

Najpierw stwórzmy ten szablon. Wybieramy projekt : ASP.NET Core Web Application.

Historia Ciężko jest zrozumieć, co się stało w ostatnich latach w technologii. Co trzeba wiedzieć ,aby zrozumieć Angulara w kontekście obecnych czasów? 

Najpierw musimy się cofnąć o 10 lat, gdy w świecie JavaScript istniały takie biblioteki jak jQuery. W międzyczasie pierwsze frameworki JavaScript jak : Dojo, Backbone.js, Knockout.js walczyły o popularność i adaptacje w firmach.

React i Vue.js oczywiście wtedy nie istniało. 

Historia Angulara zaczyna się od AngularaJS w 2009 roku. Misko Hevery i Adam Abrons pracowali razem nad pewnym projektem pobocznym.

LinkedListNr #2 Linked List zwana także listą jednokierunkową jest zbiorem powiązanych ze sobą węzłów tak, aby każdy węzeł wskazywał na następnym element na liście. Każdy węzeł ma  wartość, jak i referencję/wskaźnik do następnego węzła. 

Istnieje także lista dwu kierunkowa, taka lista także wskazuje do węzła poprzedniego.  Lista dwu kierunkowa lepiej się sprawdza do usuwania elementów z listy, gdyż dzięki tej dodatkowej informacji o poprzednim węźle łatwiej Ci będzie namierzyć element potrzebny do usunięcia.

W tym wpisie będzie tylko lista jedno-kierunkowa, ale miej świadomość, że taka też istnieje.

Stosuje też strategię "last in first out" czyli pierwszy element, który wszedł do listy z niej także wyjdzie.

Stack,QueueNr #1 Jednym z absurdów szukania pracy jako programista są pytania, które nie są związane z tym, co będziesz robił. Jednym z tych zagadnień są struktury danych? Czy ta wiedza będzie Ci potrzebna przy tworzeniu strony internetowej?

Raczej nie . Mimo to widząc e-maile od swoich fanów  widzę, że ten trend w rozmowach kwalifikacyjnych szybko nie zginie. Po studiach informatycznych być może miałeś przedmiot "Algorytmy struktury danych". Ja miałem i musiałem pisać te struktury w Pascalu na zaliczenie.

Jak się jednak to ma JavaScript i tworzenie stron internetowych? No cóż, możemy narzekać cały dzień. Postanowiłem zrobić o tym wpis i kto wie może początkującemu programiście, który szuka pracy się to przyda.

NPM TaskNr. 4 Teraz gdy transkompilujemy kod JavaScript przy użyciu Babel  oraz wprowadziliśmy modułowość do naszej aplikacji JavaScript przy użyciu Webpack rodzi się to, co nam jeszcze zostało?

Mam jeszcze mały problem z usystematyzowaniem tego wszystkiego do jednego polecenia. Osoba, która pobierze naszą aplikację przykładowo może nie wiedzieć, że musi uruchomić polecenie webpack.

Dlatego w środowiskach pracy JavaScript powstała idea by uruchamiać to wszystko jako zadania.

W naszej aplikacji mamy proces budujący naszą aplikację. Chcielibyśmy by ten proces budujący wykonywał nasze polecenie webpack oraz inne polecenia, które by zminimalizowały kod, zoptymalizowały zdjęcia, przetłumaczyły pliki SASS na CSS i inne.

To, że obecnie w naszej aplikacji ich nie ma wcale nie znaczy, że one nie wystąpią.

BabelNr. 3 Transpiling to jest fachowe określenie procesu konwersji z jednego kodu na drugi. Oba kody jednak posługują się podobnym językiem. Jest to ważna część pracy współczesnego webdevelopera.

Po co istnieją narzędzia tłumaczące JavaScript na inny kod JavaScript? Problem leży w przeglądarkach oraz w różnych wersjach JavaScript.

Przeglądarki nie są w stanie gonić najnowszych wersji języka JavaScript i być zawsze na czasie. Z drugiej strony pewne nowe funkcjonalności w samym JavaScript, ale w wyższej wersji bardzo ułatwiają kodowanie.

Nie jest to nic nowego. Dla styli CSS mamy takie rozszerzenia jak LESS i Sass, które potrafią generować lepsze i bardziej złożone style CSS.

Dla JavaScript kiedyś najbardziej popularnym transpilatorem był CoffeScript. Dziś ludzie używają albo transpilatora Babel lub TypeScript. Istnieją też różnice pomiędzy nimi.

CoffeScript starał się ulepszyć JavaScript swoją własną składnią. Opcjonalne nawiasy, białe znaki i tak dalej.

Babel nie tworzy nowej składni dla JavaScript. Kompiluje najnowszy kod JavaScript do starszej wersji, która jest rozumiana przez wszystkie przeglądarki.

WebpackNr. 2 Większość języków programowania posiada swój sposób na importowanie kodu z jednego pliku do drugiego. JavaScript oryginalnie nie posiadał takiej funkcjonalności i nie został stworzony z myślą, aby taka funkcjonalność była. JavaScript z założenia powinna być uruchamiana tylko z poziomu przeglądarki bez dostępu do plików z komputera użytkownika przeglądarki.

Dlatego jak do tej pory kod JavaScript był organizowany w wielu plikach. Każda funkcjonalność była współdzielona dzięki zmiennym globalnym.

Skrypty NPMNr. 1 Nauka JavaScript obecnie jest trudna. Zwłaszcza jeśli nie analizowałeś tego, co się działo przez ostatnie 3 lata. Ekosystem, liczba narzędzi ciągle rośnie. Ekosystem i narzędzia ciągle się zmieniają. Powoduje to brak zrozumienia, co właściwie ten ekosystem robi? Jakie problemy narzędzia rozwiązują, skoro ktoś stwierdził, że muszą one powstać.

JavaScript już dawno nie jest językiem służącym do prostej obsługi elementów strony jak slidery.

Rok temu napisałem ten wpis, w którym nabijałem się trochę z tego, że JavaScript i jego narzędzia stały się absurdalnie trudne i skomplikowane do tego stopnia, że same początki i pierwsze kroki wydają się wyprawami na księżyc.

Dla kogoś, kto zacząć pracę z JavaScript albo nauczył się budować strony internetowe od podstaw, to wszystko to wydaje się żywym koszmarem. Sam, mimo iż mam już 6 lat doświadczenia skaczę po tutorialach i uczę się z nich fragmentów współczesnego JavaScript. Problem polega na tym jednak, że te tutoriale często wymagają jakiejś wiedzy bazowej.

Dlatego zaczynając swoją przygodę z JavaScript czułem, że krążę w kółko tak długo, aż wszystko będzie miało sens jako całość.

Postanowiłem więc stworzyć ten wpis czytelniku byś ty nie miał takich problemów. Zacznijmy więc od podstaw i rozwiążmy problemy inkrementalnie tak, aby zrozumieć co my właściwie robimy.

VS ReactSzablon 3 React.js jest to popularny framework JavaScript stworzony przez Facebook. Visual Studio Code nie potrzebuje żadnych dodatków aby mieć Intellisense do React.

Jest to trzeci wpis z cyklu “jak zacząć z gotowym szablonem”. W poprzednich wpisach  omówiłem jak zacząć pracę z Vue.js i Angular. Teraz przyszedł na trzeciego tytana, czyli React.js.

Vs VueSzablon 2 W poprzednim wpisie pokazałem jak szybko zacząć pracę z Angular i Visual Studio Code. Obecnie jednak istnieje wiele innych popularnych framework-ów javascript. Jednym z nich jest Vue.js. Jest on dużo prostszy niż Angular i React.js. Dlatego często jest wybierany jako alternatywa.

Zobaczmy więc jak łatwo z nim przygotować środowisko do pracy nad pierwszą aplikacją Vue.js

Vue.js podobnie jak Angular i React używa komponentów, routingu i itp. Jego zaletą jest fakt, że sam sobie nie dodaje mnóstwa bibliotek. Zamiast tego później wybierasz z czego chcesz korzystać.  Przykładowo, jeśli chcesz korzystać  z menadżera stanów, to go instalujesz.

Vue.js powstał więc z myślą o szybkości. Ten fakt dotyczy też  tego, że nie wciska ci wszystkich funkcjonalności za jednym zamachem .

VS AngularSzablon 1 Jak zacząć naukę z Angular 5 i wyżej? Po pierwsze trzeba wybrać edytor. Ja wybrałem Visual Studio Code. Jest to bardzo dobry edytor, który jest dostępny na wielu platformach nie tylko Windows. Wcześniej na blogu przygotowałem osobny wpis na temat Visual Studio Code.

Jako programista .NET odniosłem też wrażenie, że programowanie w Visual Studio Code, jeśli chodzi o współczesne aplikacje JavaScript jest bardziej wygodne niż Visual Studio.

Współczesne frameworki JavaScript jak: Angular, React.js wymagają sporego przygotowania środowiska. To może być bardzo duża pigułka do połknięcia. Zrozumienie, co muszę zainstalować i jakie komendy uruchomić, nie było łatwym doświadczeniem.

Wszystko po to, aby uruchomić aplikację z gotowym szablonem.

Prelekcja Miałem okazje całkiem niedawno zrobić prezentacje na targach pracy IT w Warszawie. Dobrze było zobaczyć innych prelegentów IT jak Konrad Koksa. Mogłem też po raz kolejny zobaczyć mowę inspirującą Łukasza Jakubiaka, którą widziałem już 3 razy  w kolejnej przerobionej formie. Widziałem jego przemówienia na festiwalach inspiracji – konferencji koncentrujących się na jak sama nazwa wskazuje “inspiracji”.

Tablice W większości języków programowania tablica reprezentuje układ elementów przypisanych do odpowiedniego adresu w pamięci komputera. W JavaScript tablice takie nie są.

W JavaScript tablica to prosty obiekt zachowujący się jak tablica poprzez wbudowane metody.

Tablice w JavaScript są wolniejsze niż zwykłe tablice. Tablice w JavaScript nie są też używane przez nas prawidłowo. Istnieją w nich pewne pułapki. Musimy się ich wystrzegać. Jak się jednak czegoś ustrzec, gdy się tego nie zna. Oto lista

PodstwowyJavaScript…JavaScript ostatnie lata swojej kariery zawodowej poświęciłem na pracę ze starym kodem JavaScript.

JavaScript nie jest na pewno idealnym językiem programowania. JavaScript zawiera dziwne pułapki, na które każdy programista wpada. Czasem te pułapki są oczywiste, a czasem nie.

W tym wpisie omówię podstawowe zjadacze serc programistów, które zapewne już znasz. Krótkie ich omówienie jednak na pewno oszczędzi Ci wiele bólów głowy.

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-cię.

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 modulesBootstrap 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 Telerik. 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 bootstrapa 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 bootstrap.

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.

loadie.js Chciałbyś mieć podobny pasek ładowania strony, jak ma np. serwis Youtube

Oprócz tego chciałbyś, aby pasek sam się uzupełniał, ukazując w ten sposób jakiś fałszywy postęp zadania.

W tym wpisie właśnie to zrobię.

Highlight Domyślnie Highlight js nie obsługuje składni HTML Razor, która występuje w ASP.NET MVC.

Na szczęście ktoś już rozwiązał ten problem.

 http://www.namedquery.com/project/razor-language-pack-highlight-js

A ja opiszę to rozwiązanie. Gdyż na tej stronie nie mogłem znaleźć instrukcji : co trzeba zrobić krok po kroku.

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.

#2 ControllerCzęść NR.2O kontrolerach w Angular JS trzeba wiedzieć kilka rzeczy.

Kontroler ma za zadanie kontrolować przebieg informacji na stronie.

Zapisać je w scenariuszu, w którym edytujemy informacje.

Aby użyć kontrolera, najpierw trzeba do strony dodać nową dyrektywę “ng-controller”.

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-cię. 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.

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

DataPickerKrótki wpis. Używałem wiele razy skryptu jQuery UI Datepicker ,ale w ostatnich użyciach zacząłem widzieć dziwne zachowanie.

Otóż datepicker jest uruchamiany automatycznie przy starcie strony i jest on widoczny na jej końcu.

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.

Console.log()

Debugowanie kodu JavaScript na pewno nie jest  takie proste jak debugowanie kodu już skompilowanego. Sprawne debugowanie  kod JavaScript wymaga znajomości pewnych sztuczek.

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ą.

DuszkiTen wpis pokaże jak używać duszków w twoim projekcie WEB. Jest to użyteczna technika ponieważ możesz w jednym pliku graficznym umieścić wiele małych ikon.

Większa ilość mały obrazków skraca ładowanie strony. Mniejsza ilość obrazków o sensownym rozmiarze ten proces skraca.

C# JS

Czasami w twojej aplikacji pojawia się scenariusz związany z przekazaniem informacji “X” z JavaScript do C#.

W tym wypadku prezentuję sytuację, w której przycisk ma wykonywać daną operację w C# tylko, gdy użytkownik sam wcześniej potwierdził wykonanie tej operacji w JavaScript.

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.