javascript-html5-tutorial.pl

Nauka AngularJS od podstaw – część II

Luty 3rd, 2016

Dominik-W

Dziś kontynuujemy naukę frameworku AngularJS od podstaw, opisując najważniejsze aspekty składowych aplikacji Angular, oraz analizując małe przykłady praktyczne.

Nauka AngularJS – kolejne kroki

Poprzednia część opisuje podstawowe kwestie związane z tym znakomitym rozwiązaniem.

Wiemy że AngularJS jest frameworkiem języka JavaScript i rozszerza HTML poprzez dyrektywy ng. Poprzednia część pokazuje także prosty przykład z data-binding. Mamy także świadomość wielu przydatnych dyrektyw, np. ng-init:

<div ng-app="" ng-init="firstName='Joe'">
  <p>The name is <span ng-bind="firstName"></span></p>
</div>

Dodajmy do tego wyrażenia (AngularJS expressions). Egzystują one w podwójnych nawiasach klamrowych np. {{ expression }} i na nich AngularJS może wykonywać swoją magię. Wyrażenia mogą być także zapisane w dyrektywie ng-bind=”expression”.

Czytaj dalej »

Nauka AngularJS od podstaw – część I

Styczeń 16th, 2016

Dominik-W

AngularJS – otwarta biblioteka języka JavaScript, rozwijana przez firmę Google. Znakomicie wspomaga tworzenie aplikacji na pojedynczej stronie (Single Page Application, SPA). Rozszerza HTML o własne, specjalne tagi. Biblioteka implementuje wzorce Model-View-Controller (MVC) oraz Model-View-ViewModel (MVVM), ułatwiając programowanie i testowanie aplikacji Web.

Nauka AngularJS – wstęp. Jak to działa?

AngularJS został stworzony z założeniem, że programowanie deklaratywne powinno być używane do budowy interfejsów i łączenia komponentów oprogramowania, natomiast programowanie imperatywne znajduje zastosowanie w logice biznesowej.

Biblioteka Angular wczytuje HTML zawierający dodatkowe, specyficzne dla tej biblioteki tagi. Obsługując owe tagi, AngularJS przypisuje wejściowe i wyjściowe elementy strony do modelu, zapisanego jako zestaw zmiennych JS.

Wartości tych zmiennych mogą być ustawiane zarówno ręcznie, jak i pobrane ze źródła w postaci JSON.

Framework przystosowuje i rozszerza możliwości zwykłego HTML do lepszej obsługi dynamicznych treści, umożliwiając automatyczną synchronizację pomiędzy modelem i widokiem. Mówiąc najprościej zdejmuje z programisty naprawdę sporo żmudnej pracy.

Znakomitą i bardzo silną cechą AngularJS jest wiązanie danych (data binding) oraz dwukierunkowe wiązanie danych (two-way binding). Dwukierunkowe wiązanie danych w AngularJS jest uważane za jego najważniejszą funkcję.

Czytaj dalej »

No skill – no deal! Umiejętności front-end developera lub full-stack developera

Grudzień 17th, 2015

Dominik-W

Jak to mówią no skill – no deal! Bez odpowiednich umiejętności nie zdziałamy za wiele. Ważny jest też ciągły rozwój naszych skillz.

To już nie te czasy, gdy wystarczała znajomość DHTML i PHP, obecnie developer obok języków programowania musi znać także masę narzędzi i frameworków.

Umiejętności front-end developera / full-stack developera kontra rynek

Dziś postaramy się rzucić okiem na to, co warto umieć chcąc być dobrym front-end lub full-stack developerem. Jakie są trendy, a przede wszystkim czego wymaga rynek – zleceniodawcy i pracodawcy.

Jakie są dziś pożądane umiejętności front-end developera lub full-stack developera? Branża rozwija się niezwykle dynamicznie w tym kierunku, a wiele osób rozważa zostanie front-end developerem, którzy są dziś rozchwytywani.

Czytaj dalej »

Mustache JS na przykładzie aplikacji Express. Część 2/2.

Grudzień 12th, 2015

Dominik-W

Witamy w II części tutoriala o Mustache JS i Express. Dziś dokończymy dzieło rozpoczęte w części I.

Mustache JS i jQuery w akcji

Dotąd omówiliśmy podstawy pracy z biblioteką Mustache, przygotowaliśmy dane testowe oraz serwer w node.js. Teraz pora na oprogramowanie warstwy front-end.

W naszym przypadku użyjemy:

Bootstrap v3.3.5

jQuery v1.11.3

jQuery Easing v1.3 plugin

Ionicons

mustache JS

Kolejny zatem krok to strona html5, stworzona w oparciu o Bootstrap.

Szczególnie zwróćmy uwagę na 2 elementy – nawigację oraz szablony Mustache.

Czytaj dalej »

Użycie Mustache JS na przykładzie aplikacji Express. Część 1/2.

Grudzień 12th, 2015

Dominik-W

Dziś stworzymy aplikację Web w oparciu o wspaniałe narzędzia – html5, Bootstrap, jQuery, Mustache JS i Express. Krok po kroku. Użyjemy także ionicons do wyświetlenia ikon.

Mustache JS

Nie każdy (w tym ja) przepada za systemami szablonów np. w PHP. Tutaj jednak sprawa wygląda znacznie inaczej. Mustache JS to implementacja dla języka JavaScript mini-engine szablonów Mustache (logic-less), który powstał dla wielu różnych języków programowania: http://mustache.github.io.

Dlaczego Mustache (i podobne biblioteki) są fajne?

Przede wszystkim mając dane np. pochodzące z obiektów JSON, nie musimy przetwarzać ich ręcznie, co bywa żmudne. Zamiast tego definiujemy niewielki szablon i placeholdery, w których Mustache JS dokona interpolacji. W ten sposób otrzymamy od razu dane zintegrowane z warstwą front-end naszego projektu.

Mając opanowane Mustache JS, oszczędzamy cenny czas i wysiłek. Za chwilę zobaczymy to w praktyce.

Czytaj dalej »

Mini porady jQuery III – formularze

Listopad 19th, 2015

Dominik-W

Witamy w kolejnym artykule z serii mini porady jQuery. Dziś zajmiemy się wybranymi aspektami pracy z elementami formularzy.

1. Nie więcej niż jedna opcja możliwa do zaznaczenia w input select multiple

Ostatnio tworzyłem projekt, gdzie trzeba było pokazać UI w nieco staroświeckim stylu (podobnym do typowych aplikacji desktop sprzed lat). Niektóre z inputów musiałby być pokazane jako listy select multiple, jednak wybieranie więcej niż jednej opcji jednocześnie było zabronione.

Na szczęście nie trzeba pisać żadnej obsługi w JS – z pomocą jQuery jest to trywialne do zrobienia:

// allow only one item to select
$('#my-options').removeAttr('multiple');

W ten sposób usuwamy możliwość wybrania więcej niż jednej opcji, jednak nasz element nadal pozostaje wyświetlany jako select multiple.

Czytaj dalej »

Pluginy jQuery, biblioteki JavaScript, tutoriale i kody – nowa strona

Listopad 14th, 2015

Dominik-W

Już działa! Zapraszamy na nową stronę z interesującymi zasobami.

Znajdziemy tam pluginy jQuery, różne przydatne biblioteki JavaScript, tutoriale i wiele więcej. Publikujemy materiały naszym zdaniem godne uwagi, aby w jednym miejscu zarówno Web Developer jak i Web Designer mogli znaleźć rozwiązania do wykorzystania we własnych projektach. A może nawet nowe pomysły.

Obok przydanych i interesujących pluginów jQuery, pojawią się inne zasoby, dotyczące m.in. RWD i mobile Web, HTML5 i inne.

Czytaj dalej »

CSS tips and tricks – porady CSS

Październik 26th, 2015

Dominik-W

Pracując ciągle między innymi z CSS, tworzy się lub znajduje ciekawe rozwiązania różnych zadań lub napotkanych problemów.

Porady CSS

1. Cross-browser CSS word break – przełamanie zbyt długiego tekstu

Przykładowo gdy tworzymy front-end dla chatu on-line, i mamy div-y na poszczególne wiadomości. Użytkownik pisze długi ciąg, długi adres URL, lub inny ciąg nieprzerwanych znaków. Taki tekst nie „zawinie się” i wyjdzie w linii prostej poza nasz div.

Może przetwarzać ciągi w naszym języku programowania, jednak bezboleśnie można to załatwić w CSS. Nasz div musi otrzymać style CSS, które się tym zajmą:

.word-break {
    word-break: break-all;
    word-wrap: break-word;
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

To zapewni poprawne wyświetlenie się nietypowego tekstu w naszym elemencie.

Czytaj dalej »

Mini porady JavaScript i jQuery II

Październik 17th, 2015

Dominik-W

OK! Pora na kolejne szybkie porady JavaScript i jQuery. Dziś co nieco o Fancybox plugin, checkboxach i parsowaniu linków w tekście.

Porady JavaScript i jQuery

Do rzeczy.

1. Wysyłanie formularza warunkowo – tylko jeśli użytkownik zaznaczył checkbox (np. akceptuję regulamin).

Oczywiście chodzi o walidację w JS / jQ, bez użycia języka takiego jak PHP.

Mamy sobie nasz checkbox:

<div class="error">Please accept the TOS!</div>

<input type="checkbox" name="terms" id="terms" value="1" />
<label style="display: inline;" for="terms">I agree ... </label>

Czytaj dalej »

Mini porady JavaScript i jQuery

Październik 10th, 2015

Mr. JavaScript

Kolejny artykuł z serii tricki i porady JavaScript (jQuery, CSS i inne również), jednak w nowej odsłonie – krótkich porad.

Szybkie porady JavaScript i jQuery

1. Klikalne tło strony

Chodzi o przypadek, gdy chcemy zrobić klikalne tło strony, przykładowo reklamę odsyłającą gdzieś użytkownika po kliknięciu w tło. Opakowanie (wrapper) contentu strony, lub dodanie zdarzenia onclick dla tła, czy inne rozwiązania, które jako pierwsze przychodzą na myśl.

Tutaj mamy proste i skuteczne rozwiązanie. Ustawiamy nasz obraz tła:


var img = "http://our-page.com/image.png";
var link = "http://target-website.com";

document.body.style.backgroundImage = "url('" + img + "')";

Czytaj dalej »