Wprowadzenie - narzędzia programistyczne

Czym jest programowanie?

W encyklopediach znajdziemy informację o tym że programowanie to proces który polega najpierw na określeniu danego problemu który chcemy za pomocą komputera rozwiązać, określenie algorytmu, czyli przepisu w jaki sposób chcemy to osiągnąć, następnie przełożenie to na język programowania który komputer rozumie, na koniec uruchomienie tego kodu w postaci programu. Komputer jest narzędziem, które pozwala na przechowywanie i przetwarzanie zapisanych w nim informacji. Jego działanie jest kontrolowane przez wykonywany przez niego program.

No dobrze, rozbijmy zatem program na części pierwsze. Żeby to dobrze zrobić, musimy poznać dwa elementy komputera: pamięć i procesor.

Pamięć (wewnętrzną) możemy potraktować jako ciąg komórek w której przechowywane są bity. Każda komórka posiada swój własny adres, określający jego pozycję, dzięki czemu możemy się do tego adresu odwoływać i przetwarzać lub dodawać do nich informacje. Każda komórka pamięci składa się z pewnej liczby bitów (np. 8, 16, 32, 64). No dobrze, w takim razie czym jest bit? Jest to jednostka która może przyjąć dwie wartości 0 lub 1. Dzięki temu wiemy że wszelkie informacje na komputerze są zapisywane w systemie dwójkowym. Oczywiście należy rozróżnić ją od pamięci pomocniczej, która działa w podobny sposób, z tym że służy do przechowywania informacji, np. dysk twardy, pendrive czy płyta CD. Czyli wynika z tego że obrazek który masz na swoim komputerze tak naprawdę jest zapisany w postaci zer i jedynek, dopiero program je zaczytuje wykorzystując procesor i pamięć wewnętrzną i prezentuje go na ekranie w postaci zdjęcia.

Procesor, czyli mózg który odpowiada za nadzór i koordynacje działania komputera, oraz za operacje arytmetyczne i logiczne. Dzięki niemu możemy operować na pamięci komputera.

Zatem, czym jest program? Jest to ciąg instrukcji które komputer ma wykonać. Te instrukcje są zapisane właśnie w pamięci i procesor odpowiada za wykonanie programu, czyli czyta kolejne instrukcje z pamięci i zapewnia że są one wykonywane w tym samym porządku.

Na samym początku historii komputerów programy były pisane w języku maszynowym, np:

1100111101011000

1000000111110100

1100110011001010

Jak widać jest to dość nie praktyczne. Żeby poradzić sobie z tym problemem stworzono języki programowania, które pozwalają na pisanie instrukcji zrozumiałych dla człowieka i dopiero w procesie kompilacji lub interpretacji ten kod jest tłumaczony na kod maszynowy. Jak zapewne zauważyłeś, w poprzednim zdaniu rozdzieliłem dwa procesy, czyli interpretacja oraz kompilacja. Otóż języki programowania dzielą się na pewne grupy, jedną z nich jest podział na języki skryptowe, czyli takie które są interpretowane, na przykład po załadowaniu kodu do przeglądarki kod JavaScript się wykona, lub takie które wymagają kompilacji, przez co tworzy się program który możemy uruchomić, np. dowolny plik exe w systemie Windows.

Jak napisać program?

Teraz skupimy się na tym jak wygląda proces tworzenia programu. Dzieli się on na etapy:

  1. określenie zadania programu

  2. zaprojektowanie sposobu rozwiązania problemu

  3. zapisanie rozwiązania w wybranym języku programowania

  4. uruchomienie programu

  5. przetestowanie programu

1. określenie zadania programu

Czyli określenie konkretnego problemu który chcemy rozwiązać. Na początku komputery służyły głównie do obliczeń, więc w naszym przypadku również od tego zaczniemy. Oczywiście, w przyszłości programy które będziesz pisać będą wykonywać o wiele bardziej zaawansowane zadania, lecz dopiero po nabyciu odpowiednich umiejętności.

2. zaprojektowanie sposobu rozwiązania problemu

Skoro już wiemy co chcemy osiągnąć, musimy się dowiedzieć w jaki sposób, czyli określić działanie krok po kroku naszego programu więc zaprojektować algorytm. Znanymi algorytmami z codziennego życia nie związanego z programowaniem są np. przepisy na ciasto czy instrukcja składania mebli. Z tym że nie interpretuje ich komputer, tylko człowiek, więc zapisane są w formie dla niego zrozumiałej. Trochę inaczej wygląda to pod kątem programowania, ponieważ instrukcje musi rozumieć komputer, czyli nie możemy zawrzeć żadnych kroków ani uproszczeń jeśli środowisko nam na to nie pozwala.

Sposobów na zapisywanie algorytmów jest kilka, m. in. w języku naturalnym, w postaci schematu blokowego, czy pseudokodzie. Często w przyszłości będzie się zdarzało że ten krok będzie pomijany i od razu zaczniesz pisać kod w danym języku programowania z którego będziesz korzystać.

Sposób opisania algorytmu musi pozwalać na wyrażenie:

  • sekwencyjności - opisujemy kolejne kroki, które muszą być wykonane w takiej kolejności jak zostały zapisane, np.:

    1. nalej wody do czajnika

    2. ugotuj wodę w czajniku

    3. weź kubek

    4. nasyp do kubka 2 łyżeczki kawy

    5. nalej wodę do kubka

    6. nasyp do kubka 2 łyżeczki cukru

    7. pomieszaj

  • wyboru - opisujemy konieczność podjęcia decyzji, którą ścieżkę wybrać:

    jeśli nie masz ochoty na kawę to nasyp dwie łyżeczki herbaty. W przeciwnym wypadku nasyp kawę.

  • iteracji - musisz być w stanie określić że część instrukcji może być powtarzana, albo przez konkretną ilość razy, albo za pomocą warunku:

    1. mieszaj łyżeczką kawę dopóki cukier się nie rozpuści

    2. zrób 50 przysiadów (50 razy powtórzony przysiad)

Wróćmy do naszego programu. Ma on wyliczać potęgę liczby. Więc algorytm dla tego programu będzie wyglądał w następujący sposób:

  1. podaj dowolną liczbę

  2. zapisz ją w pamięci

  3. pomnóż ją przez samą siebie i zapamiętaj w pamięci wynik

  4. zwróć wynik, czyli zawartość komórek w pamięci w których umieściłeś mnożenie

3. zapisanie rozwiązania w wybranym języku programowania

Żeby przejść do tego kroku, musisz już posiadać podstawową wiedzę na temat języka w którym zamierzasz napisać algorytm. W naszym przypadku korzystamy z języka JavaScript, więc zajmijmy się jego podstawowymi elementami. JS zawiera pewne instrukcje które są rozumiane przez interpreter, czyli w tym przypadku silnik przeglądarki, które po wpisaniu pewnych ustalonych ciągów znaków przerabiają go na kod maszynowy.

4. uruchomienie programu

Skoro przygotowaliśmy kod, musimy go teraz wykonać. Po pierwsze, musimy ten kod przenieść do dowolnego edytora tekstowego. Następnie musimy go uruchomić w narzędziu które potrafi kod JavaScript wykonać, czyli w naszym przypadku przeglądarka internetowa. Oprócz tego moglibyśmy skorzystać np. z Node.js.

Podstawowe Narzędzia

Podczas szkolenia będziemy głównie na dwóch programach, Visual Studio Code oraz Google Chrome. Oczywiście można wybrać dowolny edytor tekstowy, jak i przeglądarkę według osobistych preferencji. Poniżej zaprezentuje dlaczego warto zastanowić się nad pracą na tych narzędziach.

Visual Studio Code

Jest to darmowy Open Source’owy edytor tekstowy który działa na większości systemach operacyjnych. Co to znaczy Open Source? To znaczy że jego kod źródłowy jest dostępny dla wszystkich i społeczność zebrana wokół tego edytora go rozwija (co miesiąc są jego nowe aktualizacje wprowadzające nowe możliwości i usprawnienia). Poza tym ciekawe jest to że powstał on w technologiach frontendowych. Jest oparty na frameworku Electron który wykorzystuje Node.js’a i uruchamia go jako program desktopowy.

Strona produktu wraz z możliwością pobrania:

https://code.visualstudio.com/

Po pobraniu i zainstalowaniu powinien ukazać się następujący ekran:

 Omówmy sobie jego poszczególne części.

Największa sekcja edytora mieszcząca się po jego prawej stronie to ekran powitalny, który pokazuje się przy pierwszym uruchomieniu programu lub gdy uruchamiamy go bez żadnego projektu. Można w nim znaleźć informacje w jaki sposób zmienić podstawową konfigurację tego edytora. Przejdźmy teraz do najwęższej sekcji po lewej stronie w której znajdują się ikonki, są tam główne narzędzia oferowane przez program. Kolejno: widok drzewa aktualnego projektu (Explorer), przeszukiwania plików (Search), panel z przydatnymi funkcjonalnościami związanymi z systemem kontroli wersji (Source Control), debugowanie (Debug), dostępne moduły które możemy dodać do programu i rozszerzyć jego funkcjonalność (Extensions). Otwieramy poszczególne narzędzia poprzez kliknięcie w jego ikonkę. W ostatniej sekcji która mieści się pomiędzy dwoma poprzednimi znajdują się informacje na temat danego narzędzia które obecnie mamy aktywne. Uruchommy przykładowy projekt. Należy kliknąć w szary przycisk „Open Folder”, powinien otworzyć się Eksplorator Windows. W nim znajdźmy miejsce na dysku w którym chcemy utworzyć katalog z projektem, następnie stwórzmy go, np. o nazwie „js”, po czym w prawym dolnym rogu eksploratora wybierzmy przycisk „Wybierz folder”. W tej chwili edytor powinien się przeładować. Aktualnie w narzędziu Explorer w VS Code mamy dostępne drzewko dokumentu:

Google Chrome

Google Chrome jest darmową przeglądarką internetową rozwijaną przez firmę Google. Oparta jest na silniku przeglądarki Blink. Silnik przeglądarki to narzędzie które zajmuje się interpretacją kodu HTML, CS, czy języka JavaScript.

Strona główna produktu razem z możliwością pobrania:

https://www.google.pl/chrome/

Nie znaczy że kod który będziemy przygotowywać ma działać tylko na tej przeglądarce. Musimy również sprawdzić czy dobrze reaguje również na innych najpopularniejszych takich jak Edge, Firefox, Safari, Opera itd. Polecam go w szczególności ze względu na narzędzia deweloperskie jakie ta przeglądarka oferuje. Dzięki nim w bardzo prosty i klarowny sposób możemy sprawdzić w jaki sposób nasz kod działa na stronie. Żeby je otworzyć należy uruchomić program, następnie kliknąć na obszar ekranu przeglądarki prawym przyciskiem myszy i wybrać opcję zbadaj element. Drugim sposobem jest uruchomienie ich za pomocą przycisku trzech kropek ułożonych pionowo, z menu wybrać „Więcej narzędzi” > „Narzędzia dla programistów”, lub po prostu używając skrótu klawiszowego Ctrl + Shift + I. Po uruchomieniu powinno pokazać się nam następujące okno:

Omówmy jego zakładki:

Elements - zakładka zawierające informacje na temat przetworzonych znaczników z dokumentu HTML, wraz z regułami CSS dopisanymi do nich

Console - zakładka z konsolą JavaScript, możemy do niej przesyłać informacje z naszego kodu lub bezpośrednio tam wykonywać kod JS. Będzie jednak on działał do momentu odświeżenia strony lub zamknięcia karty.

Sources - zakładka zawierająca informacje na temat plików które zostały przesłane do przeglądarki razem z dokumentem HTML.

Network - zakładka zawierająca informacje na temat wszystkich zapytań która wykonuje strona, czyli pobieranie plików, zapytania Ajax.

Performance - zakładka służy do analizy w jaki sposób nasza strona została wyrenderowana na podstawie osi czasu. Możemy wyczytać m. in. informacje o tym w jakim czasie załadowane zostały wszystkie pliki potrzebne do działania strony, ile czasu zajęło zinterpretowanie wszystkich skryptów na stronie itp. Bardzo pomocna podczas prac nad optymalizacją strony.

Memory - zawiera informacje na temat ile pamięci zajmuje kod wykonywany podczas załadowania strony.

Application - zawiera informacje związane z pamięciami dostępnymi w przeglądarce, w których możemy zapisać dane. Np. LocalStorage, SessionStorage, pliki cookies.

Security - informacje związane z bezpieczeństwem strony. Jeśli przeglądarka wykryje niebezpieczne elementy które mogą zagrażać bezpieczeństwu, zostaną tam te informacje wyświetlone.

Audits - zakładka która pozwala na zrobienie audytu naszej strony. Sprawdza on między innymi performance, dostępność, zastosowanie dobrych praktyk.

Skoro poznaliśmy narzędzia możemy zająć się główną tematyką szkolenia, czyli językiem JavaScript.