Programowanie w .NET
Drodzy czytelnicy, poniższe pytania zostały przygotowane w taki sposób, aby każdy z Was mógł się zaznajomić rodzajem pytań na które możecie natrafić w trakcie rozmowy kwalifikacyjnej związanej z językiem jQuery. W praktyce często okazuję się, że rozmowa zaczyna się od postawowych zagadanień a następnie na podstawie Twoich odpowiedzi dyskusja jest kontynuowana - zagłębiamy się w szczegóły.

Czym jest jQuery?
jQuery to szybki, lekki, bogaty w funkcje framework JavaScript działający po stronie klienta. Dostarczył on bardzo potrzebnego wsparcia dla JavaScript. Przed udostępenieniem jQuery kod JavaScript był dużo dłuższy, cięższy, nawet w przypadku mniejszej funkcjonalności.

Czy jQuery jest językiem programowania?
jQuery nie jest językim programowania a dobrze napisanym kodem JavaScript. Pozwala na sprawne przechodzenie po kolejnych elementach dokumentu, obsługę zdarzeń, obsługę asynchronicznej interakcji użytkownika z serwerem AJAX oraz prezentację animacji.

Jaka jest różnica pomiędzy jQuery a JavaScript?
Główną różnicą jest fakt, że JavaScript jest językiem a jQuery biblioteką zbudowaną na tym języku. jQuery upraszcza korzystanie z języka JavaScript.

Czy jQuery zastępuje JavaScript?
Nie, jQuery nie zastępuje JavaScript. jQuery jest biblioteką napisaną na istniejącym języku skryptowym. Jest lekką biblioteką JavaScript, która służy do interakcji JavaScript oraz HTML.

Dlaczego używamy jQuery?
  • jest bardzo łatwa w nauce i obsłudze;
  • służy do tworzenia aplikacji internetowych zgodnych z przeglądarką;
  • poprawia wydajność aplikacji;
  • jest bardzo szybka i rozszerzalna;
  • pozwala na pisanie minimalnej ilości kodu odpowiedzialnej za obsługę funkcji związanych z interfejsem użytkownika;
  • zapewnia obsługę wielu przeglądarek.
Ostatni punkt nie jest niestety taki oczywisty – dotyczy to głównie pracy nad komercyjnym projektami w korporacjach, które potrafią w obecnych czasach wspierać przeglądarki pokroju IE8 wymagając przy tym spełnienia standardów CVE.

Jakich metod używamy do zaprezentowania ‘efektów’?
Służą do tego poniższe metody:
  • show();
  • hide();
  • toggle();
  • fadeIn();
  • fadeOut().

Czy jQuery HTML może działać zarówno dla dokumentu HTML jak i XML?
Nie, jQuery HTML działa tylko dla dokumentu HTML. Nie jest w stanie obłużyć dokumentów XML.

Czym jest $() w bibliotece jQuery?
$() jest aliasem funkcji jQuery(). Służy on do zawijania/otoczenia (wrapper) dowolnego obiektu obiektem jQuery, który później ułatwia wywoływanie różnych obiektów jQuery zdefiniowanymi metodami. Prostym przykładem może być przekazanie ciągu znaków do funkcji $() i zwrócenie obiektu jQuery zawierającego tablicę wszystkich pasujących obiektów DOM.

Biblioteka jQuery jest używana do działania ze stroną klienta czy serwera?
Jest to biblioteka działająca po stronie klienta.

jQuery spełnia standard W3C?
Nie, jQuery nie spełnia standardu W3C.

Celem krótkiego wprowadzenia (źródło: Wikipedia):
World Wide Web Consortium, w skrócie W3C – organizacja, która zajmuje się ustanawianiem standardów pisania i przesyłu stron WWW. Została założona 1 października 1994 roku przez Tima Berners-Lee, twórcę WWW oraz autora pierwszej przeglądarki internetowej i serwera WWW. W3C jest obecnie zrzeszeniem ponad 400 organizacji, firm, agencji rządowych i uczelni z całego świata. Publikowane przez W3C rekomendacje nie mają mocy prawnej, nakazującej ich użycie.

Gdzie jest punkt startowy wykonania kodu jQuery?
Funkcja $(document).ready() jest punktem startowym wykonywania kodu jQuery. Jest on wykonywany po załadowaniu DOM.

Jakie jest podstawowe wymaganie rozpoczęcia pracy z jQuery?
Należy się odwołać do biblioteki jQuery. Najnowsza wersja może zostać pobrana z witryny: jQuery.com

Czy na danej stronie możesz użyć wielokrotnie document.ready()?
Tak. Funkcja document.ready() może być użyta wielokrotnie na tej samej stronie.

Jaka jest różnica pomiędzy metodami ‘find’ a ‘children’?
Find służy do znajdowania wszystkich poziomów w drzewie DOM, natomiast metoda chilrden służy do znajdowania pojedynczego poziomu w drzewie DOM.

Czym jest CDN?
CDN oznacza Content Distribution Network. Jest to duży, rozproszony system serwerów wdrożony w wielu centrach danych.

Jaki jest cel CDN i zalety korzystania z niego?
Głównym celem CDN jest dostarczenie użytkownikom końcowym treści o wysokiej dostępności i wydajności.

Zalety korzystania z CDN:
  • zmniejsza obciążenie serwera;
  • oszczędza przepustowość. Framework jQuery jest ładowany szybciej z CDN;
  • biblioteka jQuery będzie w pamięci przeglądarki użytkownika jeżeli ten odwiedzi inną witrynę, którą odnosi się do tej samej biblioteki. Nie będzie potrzebny ponowego ściągania jQuery.

Jak możesz używać biblioteki jQuery w swoim projekcie?
Prosty przykład pokażę na przykładzie projektu ASP.NET. Pobieramy najnowszą bibliotekę z witryny: jQuery.com. W kolejnym kroku wskazujemy odniesienie do danej biblioteki na stronie HTML/PHP/JSP/Aspx: 
<script src="_scripts/jQuery-3.3.1.js" type="text/javascript"></script>   
<script language="javascript">
$(document).ready(function () {
	alert('test');
});
</script>

Jakie znasz selektory w jQuery? Jakie są ich typy?
Jeżeli chcesz pracować z jakimkolwiek elementem na stronie internetowej, w pierwszej kolejności musisz go znaleźć. Selektory są używane do znajdowania elementów HTML w jQuery. Istnieje wiele rodzajów selektorów a niektóre z nich to:
  • Name: używany jest do odnalezienia wszystkich pasujących elementów pasujących do wskazanej ‘nazwy’;
  • #ID: służy do wybierania pojedynczego elementu pasującego do wskazanego ‘identyfikatora’;
  • Class: służy do odnalezienia wszystkich elementów pasujących do nazwy danej klasy;
  • Uniwersalny (*) służy do wybierania wszystkich elementów dostępnych w DOM;
  • Attribute: służy do wskazywania elementów na podstawie wartości ich atrybutu.

Do czego służy filtr w jQuery?
:filter służy do filtrowania określonych wartości z obiektu. Filtruje wynik pierwotnego zapytania do określonych elementów.

Jakie są różne typy selektorów w jQuery?
Istnieją trzy typy selektrów w jQuery:
  • selektor CSS;
  • selektor niestandardowy;
  • selektor XPath

Jaka jest różnica pomiędzy selektorem Id a selektorem klasy?
Pierwszy z nich używa identyfikatora a drugi klasy do wskazania konkretnego elementu.

Jeżeli chcesz wybrać tylko jeden element użyj selektora ID. Jeżeli chcesz wybrać grupę elementów, posiadających tę samą klasę, skorzystaj z selektora klasy.

Jak dodać i usunąć klasę CSS z elementu używając jQuery?
W celu dodania klasy CSS do elementu możesz skorzystać z metody addClass(). Jeżeli chcesz usunąć klasę CSS z elementu możesz skorzystać z removeClass().

Czy możesz napisać kod jQuery wybierający wszystkie linki z akapitu?
Tak. Możesz użyć selektora a zagnieżdzonego wewnątrz akapitu p, aby wybrać wszystkie łącza.

Jaka jest różnica pomiędzy ‘prop’ a ‘attr’?
attr(): pobiera wartość atrybutu dla pierwszego elementu znalezionego w grupie dopasowanych elementów.

prop(): pobiera wartość właściwości dla pierwszego element znalezionego w grupie dopasowanych elementów.

Jakie są dwa typy CDN?
Możemy wyróżnić dwa rodzaje CDN:
  • Microsoft: ładuje jQuery z AJAX CDN
  • Google: ładuje jQuery z API bibliotek Google
Poniżej dwa wspomniane przykłady:
Microsoft: 
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js"></script>
</head>
Google: 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>

Jak używać funkcji ‘animate’ w jQuery?
Funkcja animacji służy do zastosowania niestandardowego efektu ‘przejścia’ na standardowych elementach.

Składnia: 
$(selector).animate({params}, [duration], [easing], [callback])
, gdzie:
  • param określa właściwość CSS na której chcemy zastosować animację;
  • duration określa czas trwania animacji. Możemy użyć następujących wartości: slow, fast, normal lub czas wyrażony w milisekundach;
  • easing to ciąg znaków określający łańcuch przejścia;
  • callback to funkcja, którą chcemy uruchomić po zakończeniu animacji.

Jak możesz zablokować wykonywanie animacji w jQuery?
Aby wyłączyć animację w jQuery należy właściwość jQuery.fx.off ustawić na wartość true.