admin 0Comment

Efektem zajmowania się front-endową stroną projektu jest m. in. zapoznanie się z podstawami programowania w języku JavaScript, w tym z wykorzystaniem bliblioteki jQuery. Zanim przejdę do szczegółów implementacji w moim projekcie aplikacji finansowej, kilka słów na temat samego JS oraz jQuery. Jako, że większość wpisów na blogu kierowana jest do osób takich jak ja, czyli początkujących samouków jeśli chodzi o programowanie, postaram się opisać całość przystępnym językiem i zobrazować sensownymi przykładami.

Przede wszystkim – w jakim miejscu wykorzystuję JavaScript? W mojej aplikacji, zajmując się back-endową stroną projektu, korzystam z frameworka Django, natomiast front-end to oczywiście HTML (odpowiedzialny za strukturę danych), CSS (odpowiedzialny za prezentowanie danych) i właśnie JavaScript. Do czego więc mogę wykorzystać ten język programowania?

To, co intrygowało mnie od dłuższego czasu, to pytanie, w jaki sposób we współczesnych aplikacjach webowych możliwa jest zmiana treści strony bez konieczności jej odświeżania. Zobaczcie na aplikacje, z których korzystamy na co dzień – np. Facebook czy Gmail. Wystarczy kliknąć czy nawet najechać na poszczególne elementy na wyświetlonej stronie, aby te reagowały dynamicznie, zmieniając wygląd czy wyświetlając nam dodatkową treść. Wszystko to bez konieczności przeładowania strony. Jak natomiast wygląda to w sytuacji, w sumie stosunkowo prostego, CRUDa, jakim jest moja konkursowa aplikacja, stworzona przy pomocy Django? Każda akcja wiąże się z koniecznością przeładowania strony – dodanie danych, pozyskanie ich, kasowanie, powrót na stronę główną czy też stronę logowania etc. etc. Jak w takim razie uzyskać opisywaną przeze mnie wcześniej funkcjonalność? To jest właśnie to miejsce, gdzie może przydać nam się JS, a szczególnie takie biblioteki tego języka, jaką jest np. jQuery. Biblioteka ta pomaga nam wykorzystać funkcjonalności języka, opakowując je w funkcje, z których możemy korzystać, skracając w ten sposób znacznie długość kodu do napisania. Kosztem jest tutaj niewielki spadek szybkości wykonywania kodu.

Jako, że lubię przyswajać wiedzę na konkretnych przykładach, zdecydowałem, że poznam podstawy tego zagadnienia poprzez zastosowanie przykładów w mojej aplikacji webowej yourFinance.
Stwierdziłem, że na początek zaimplementuję dwa efekty – uzyskanie stopniowego pojawiania się jakiegoś elementu na stronie a także umożliwienie rozwijania i zwijania fragmentu menu bocznego, oczywiście bez konieczności przeładowywania strony. Zanim jednak przejdę do implementacji konkretnych efektów, muszę przecież nie tylko włączyć JS do projektu, ale też umożliwić wykorzystanie jednej z bibliotek tego języka, jaką jest jQuery.

 

Na początku – włączenie JS i jQuery do projektu

 

Aby móc wykorzystać JS w projekcie, muszę stworzyć plik, który będzie zawierał kod w tym języku a także dać znać mojej front-endowej stronie projektu, że ma po niego sięgnąć. Robimy to analogicznie do tego, jak radzimy sobie z plikami CSS, czyli całość dzieje się w folderze static projektu a także w szablonach.

W folderze static mojego projektu (strukturę możecie podejrzeć na moim koncie GitHub) tworzę subfolder o nazwie js i w nim tworzę plik o nazwie main.js. Następnie link do niego umieszczam w moim szablonie bazowym (dzięki czemu nie muszę robić tego w każdym kolejnym szablonie, ponieważ te jedynie rozszerzają, wspólny dla wszystkich widoków, szablon bazowy) o nazwie base.html:

<head>

    <title>yourFinance</title>

    {% load staticfiles %}

    <link rel="stylesheet" href="{% static 'css/yourFinance.css' %}">

    <!--[if IE]><link rel="stylesheet" href="{% static 'css/yourFinanceIE.css' %}><![endif]-->

    <script src={% static 'js/main.js' %}></script>

</head>

Jest to ostatnia linijka przed zamknięciem elementu head. Jak widzicie, Django umożliwia mi zapisanie dynamiczne miejsca, w którym przechowuję moje pliki statyczne. Może okazać się to przydatne w sytuacji, gdy będziemy zmuszeni zmienić miejsce przechowywania wszystkich naszych plików statycznych. Nie będziemy musieli wtedy ręcznie zmieniać odnośników do tego miejsca w każdym szablonie, w którym są one wymagane. Miejsce zapisu plików statycznych (do którego odnosi się zmienna static w opisywanym kodzie) zapisane jest w jednym miejscu, w pliku settings.py.

Dzięki tej linijce, moja aplikacja wie już, że ma załadować także plik main.js, który będzie następnie wykonywany. Jeżeli chcemy dodatkowo skorzystać z biblioteki jQuery, PRZED linią referującą do main.js umieszczamy ten kod:

<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>


Następnie – efekt stopniowego pojawiania się elementu

Dzięki powyższemu możemy wykorzystać już JavaScript oraz jQuery, teraz czas na zastosowanie efektu stopniowego pojawiania się elementów na stronie, jakimi są obrazki-linki do tego bloga i mojego konta na GitHub. Zacznijmy od kodu – najpierw zobaczmy jak wyglądają linki w formie grafiki w HTMLu:

<p id="inPursuitLink" class="imgLinks"><a href="http://www.inpursuit.pl/"><img src="{% static 'inpursuit.png' %}" alt="inpursuit.pl"></a></p>

<p id="gitLink" class="imgLinks"><a href="https://github.com/InPursuitPL/Django-yourFinance"><img src="{% static 'github.png' %}" alt="GitHub"></a></p>

Jak widać, należą one do klasy imgLinks, i to ją wykorzystamy w kodzie JS do uzyskania dodatkowego efektu. Poniższy kod pochodzi z pliku main.js:

function main() {
	$('.imgLinks').hide();
	$('.imgLinks').fadeIn(2000);
};

$(document).ready(main);

Kod jest dość intuicyjny. Najpierw chowamy (hide) elementy klasy imgLinks, następnie pozwalamy im stopniowo pojawić się (fadein), jednocześnie ustalamy szybkość pojawienia się za pomocą argumentu liczbowego.
Zauważcie też, że całość opakowana jest w główną (main) funkcję, która znowu uruchamiana jest dopiero gdy cały dokument (czyli nasza strona HTML) załaduje się do końca (czyli jest gotowy – ready). Proste? Proste!

 

 

Na koniec – rozwijany fragment menu

Dodajmy do tego kolejną funkcjonalność czyli zawijany i rozwijany za pomocą kliknięcia fragment menu. Najpierw interesujący nas fragment kodu HTML:

<div class="configureButton">Configure settings</div>
    <div id="configureLinks">
        <a href="{% url 'configure deposition places' %}">deposition places</a><br>
        <a href="{% url 'configure monthly costs' %}">costs levels</a><br>
        <a href="{% url 'configure cost groups' %}">current costs groups</a>
    </div>

I uzupełniony kod JS/jQuery:

function main() {
	$('.imgLinks').hide();
	$('.imgLinks').fadeIn(2000);
	$('#configureLinks').hide();
	$('.configureButton').on('click', function() {
		$('#configureLinks').toggle();
		$('.configureButton').toggleClass('active');
	})
};

$(document).ready(main);

Jak widać, najpierw chowamy elementy o id configureLinks (hide) a następnie określamy, co stanie się w przypadku kliknięcia (on click) na elementy klasy configureButton. W rezultacie kliknięcia, na elementy o id configureLinks zastosowana zostanie funkcja toggle, co oznacza, że będą one przybierać stan odwrotny do aktualnego (czyli pojawiać się lub znikać). Dodatkowo zastosowałem tutaj jeszcze jedną funkcję – toggleCalss. Także w przypadku kliknięcia na element klasy configureButton, pozwala ona zastosować klasę CSS o nazwie active na element klasy configureButton a konkretnie – zmienić kolor oraz pogrubienie jego czcionki – oto fragment pliku CSS odnoszący się do tego elementu:

.configureButton {
	color: dodgerblue;
	font-weight: bold;
}

.active {
	color: #4d4d4d;
	font-weight: normal;
}

A oto jak wygląda to w praktyce (efekt przed i po kliknięciu w Configure settings):

 

 

Oczywiście to tylko malutka cząstka tego, co JS wraz z jQuery mogą dać naszym stronom i aplikacjom webowym, myślę jednak, że taka prosta praktyczna prezentacja pozwoli odpowiedzieć na pytanie, do czego w ogóle możemy zastosować te narzędzia w naszych projektach.

Dodaj komentarz