Pierwsze kroki w kierunku programowania

Czym jest programowanie?

Programowanie to projektowanie, pisanie, utrzymywanie i testowanie kodu źródłowego, w skrócie można to określić jako wydawanie poleceń maszynie, w zrozumiały dla niej sposób. Aby przekazać informację komputerowi, programista posługuje się językami programowania. Za pomocą określonych zasad i z użyciem odpowiednich algorytmów może zaprojektować kod wykonujący zaplanowane (lub nie 😃) zadania. Samo programowanie jest jednym z trudniejszych działów informatyki, ponieważ łączy w sobie algorytmikę (często również z elementami matematycznymi), znajomość języków programowania, strukturę danych, wzorce projektowe i wiele innych zagadnień. Ponieważ na rynku istnieje wiele różnych urządzeń oraz zapotrzebowań użytkowników, jest wiele rodzajów programistów specjalizujących się w odpowiednich dziedzinach. Najłatwiej podzielić ich na programistów frontend, backend oraz fullstack. Pierwsi zajmują się interfejsem, czyli tą częścią programu, z którą ma styczność użytkownik końcowy. Programiści backend zajmują się tym, co siedzi pod maską aplikacji, odpowiadają za przetwarzanie danych oraz poprawne funkcjonowanie aplikacji/programu. Ostatnia kategoria to programiści zajmujący się zarówno frontendem jak i backendem.

Czym jest kompilator i kiedy jest używany?

Kod napisany przez programistów nie jest jeszcze zrozumiały dla komputera, ponieważ ten działa na bitach, czyli cyfrach 0 i 1 (tradycyjne procesory potrafią jedynie zrozumieć sygnał lub jego brak co przekłada się odpowiednio na 1, lub 0 logiczne, inaczej działają komputery kwantowe, w których dane są reprezentowane przez stan kwantowy, a ten ma pełen zakres od zera do jednego) dlatego kod musi zostać przetłumaczony na taki, który będzie zrozumiały przez maszynę. Taki proces jest nazywany kompilacją i wykonuje go kompilator, czyli swego rodzaju tłumacz z języka programowania na język komputerowy. Dlaczego komputer nie rozumie języków programowania? Z prostej przyczyny, ponieważ nie zostały one stworzone dla niego, stworzono je, aby w łatwy i przyjemny sposób można było pisać programy. Bez nich kodowanie byłoby niezwykle trudne, a programista nie mógłby posługiwać się łatwymi do zapamiętania komendami, lecz musiałby używać jedynie kombinacji zer i jedynek. Jednak nie każdy kod wymaga kompilacji. Istnieją języki, których kod jest interpretowany. Zaletą języków interpretowanych jest ich mobilność, ponieważ kod nie jest zapisywany jako wykonywalny program, lecz jako kod źródłowy. Dzięki temu są one zgodne z wieloma platformami co umożliwia odpalenie go w różnych środowiskach. Do takiej grupy języków można zaliczyć takie języki jak PHP, Ruby czy JavaScript.

Błędy w kodzie - do czego służy debugger?

Jeżeli kod nie działa poprawnie i wykonuje czynności niezaplanowane przez twórców, mówimy wtedy, że pojawił się błąd w kodzie, potocznie zwany również jako - bug. Do wykrywania błędów służy odpowiednie narzędzie - debugger. Analizuje on kod źródłowy oraz jego działanie, w celu odnalezienia i identyfikacji zawartych w nim błędów. Proces, w którym odbywa się sprawdzenie kodu pod kątem błędów nazywa się - debugowaniem.

Który język programowania wybrać na początek?

Pierwszym językiem, którego powinien nauczyć się początkujący programista jest język angielski. Nie jest to żadna pomyłka z mojej strony. W świecie programowania wszystko oparte jest właśnie na tym języku. Dokumentacje, komendy, nawet elementy kodu są tworzone w języku angielskim, po to, aby kod był powszechny i zrozumiały dla wszystkich ludzi, którzy nad nim pracują.
Z technicznego punktu widzenia, początki programowania mogą być dość trudne, ponieważ trzeba nauczyć się myśleć w odpowiedni sposób. Aby łatwo rozpocząć naukę, najlepiej wybrać taki język, który jest popularny i prosty w nauce. Jeśli planujesz rozpocząć przygodę z programowaniem od strony Web Developmentu, to na początek konieczna będzie nauka podstaw HTML (ang. HyperText Markup Language), jest to język znaczników, używany do tworzenia dokumentów hipertekstowych. Technicznie rzecz biorąc, nie jest to język programowania, ale pozwala na łatwe wstąpienie w świat związany z tworzeniem kodu. HTML jest używany przy tworzeniu struktury stron internetowych. Po przyswojeniu jego składni można zainteresować się kolejnymi językami, takimi jak JavaScript lub CSS, które sprawią, że strona przez nas stworzona nie tylko będzie zawierać treści, ale będzie ładnie wyglądać i zawierać elementy interaktywne, a z czasem będziemy mogli tworzyć pełnoprawne aplikacje webowe. Natomiast co jeśli od razu chcemy zacząć pisać aplikacje, nie wchodząc przy tym zbytnio w Web Development? Wtedy dobrą opcją będzie zacząć naukę języka obiektowego, takiego jak np. Java, C# itp.

Jak napisać swój pierwszy kod?

Do napisania pierwszego kodu HTML potrzeba jedynie przeglądarki i środowiska (czyli programu do pisania kodu), chociaż w ekstremalnych warunkach można użyć nawet zwykłego notatnika. Przeglądarka służy do wyświetlania wyników naszego kodowania, a środowisko ułatwia proces pisania. Na początek najlepiej użyć programu Notepad++, jest to IDE (ang. Integrated Development Environment), które ułatwia pracę np. poprzez podświetlenie tagów lub zaznaczenie wcięć w kodzie. Teraz jedyne co pozostało to stworzyć plik z rozszerzeniem .html . Teraz wystarczy otworzyć plik za pomocą Notepada++ i napisać szkielet strony.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>


<h1>Hello world!</h1>

<p>Moja pierwsza strona</p>


</body>

</html>

To, co widać na obrazku to kod HTML. Tak jak wspomniałem wcześniej - HTML to język znaczników. Znacznik to kawałek kodu zamknięty w nawiasach ostrych, czyli <>. Są dwa rodzaje znaczników: otwierające i zamykające, które jak same nazwy wskazują, służą do otwierania i zamykania odpowiednich tagów (inaczej znaczników). Składnia tagów jest bardzo prosta.

Pojedynczy znacznik składa się z tagu otwierającego, treści oraz tagu zamykającego, dodatkowo w znaczniku otwierającym można umieścić atrybuty wraz z ich wartościami. Czym są atrybuty? Są to inaczej modyfikatory, umożliwiające implementację dodatkowych informacji na temat tagów.
Pierwsze kody za płoty, ale jak teraz zobaczyć efekt naszej pracy? Otóż wystarczy odpalić nasz plik za pomocą przeglądarki i uzyskamy taki wynik:

Jak to jest, że jeden napis jest pogrubiony a drugi nie? Wszystko dlatego, że napis - ‘Hello world!’ był umieszczony w znaczniku <h1>, znacznik ten odpowiada za wstawianie tytułów na stronę i ma domyślnie zdefiniowane wartości, które między innymi pogrubiają i powiększają tekst, natomiast paragraf znajdujący się poniżej został umieszczony w znaczniku <p>, który wyświetla jedynie akapit z tekstem. O znacznikach i atrybutach można więcej przeczytać na tej stronie - HTML Tutorial. Po ukończeniu kursu, mając wstępne pojęcie o budowie i sposobie działania HTML, można zająć się jego upiększaniem.

CSS

Cascading Style Sheets to język służący do opisu formy prezentacji strony, w skrócie są to kredki do naszego szkicu, jakim jest HTML. Co można zrobić za pomocą CSSa? Okazuje się, że całkiem sporo. Można ustawiać elementy na stronie, zmieniać ich wygląd, a nawet tworzyć różne animacje i efekty. Jak korzystać z CSSa? Są na to 3 sposoby, można dodać do strony zewnętrzny plik ze stylami (style zewnętrzne), zdefiniować je w pliku .html (style lokalne) lub bezpośrednio w samym znaczniku za pomocą atrybutu style (style w nagłówku). Style posiadają również swoją hierarchię ważności. Jeśli do jednego elementu dodamy np. trzy różne kolory czcionki, jeden będzie zdefiniowany w pliku zewnętrznym, drugi lokalnie, a trzeci w nagłówku znacznika, zostanie zastosowany jedynie ten, który znajduje się w nagłówku, bowiem jest on najważniejszy. Dobrą praktyką, zapewniającą czytelność oraz optymalizację działania kodu, jest używanie wyłącznie stylów zewnętrznych (wyjątek stanowią strony AMP, gdzie wymusza się stosowanie stylów lokalnych). Na początek stwórzmy zewnętrzny plik z rozszerzeniem .css, a następnie dodajmy do naszego pliku .html znacznik, będzie to link z atrybutami rel oraz href. W atrybucie href zamieszczamy link do arkusza stylów. Kod powinien wyglądać tak jak poniżej.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<link rel="stylesheet" href="style.css">

</head>

<body>


<h1>Hello world!</h1>

<p>Moja pierwsza strona</p>


</body>

</html>

Teraz można przejść do pliku stylów i zacząć wprowadzać małe zmiany. Składnia CSS jest równie prosta co składnia HTML, na początku określamy co chcemy edytować, a następnie wypisujemy własności i wartości, jakie chcemy dodać do elementu na stronie:

h1{

border: solid 1px red;

};

Łatwo można zauważyć, że w ten sposób edytujemy wszystkie znaczniki <h1> na naszej stronie, nadajemy im czerwone obramowanie o grubości 1 piksela w stylu solid. Teraz po odświeżeniu strony ujrzymy taki efekt:

Umieszczanie stylów lokalnych wygląda następująco:

<h1 style = "border: solid 1px red;" >Hello world!</h1>

Natomiast style w nagłówkach wyglądają tak:

<head>

<title>Page Title </title>

<style>

h1{

border: solid 1px red;

}

</style>

</head>

Ponieważ CSS to bardzo obszerny temat więcej na jego temat można przeczytać na stronie CSS Tutorial.

JavaScript

Jest to język skryptowy, wykonywany po stronie hosta (czyli na komputerze klienta strony). JavaScript umożliwia zarządzanie treścią strony internetowej, tworzenie animacji, wyświetlanie map interaktywnych, a także pozwala na stworzenie zaawansowanych funkcjonalności składających się na aplikację webową. JavaScript jest językiem obiektowym, co umożliwia tworzenie skalowalnego i wysoce czytelnego kodu. Dzięki niezwykłej popularności tego języka, powstało wiele frameworków, które bazują na JavaScriptcie. Pozwalają one na szybkie wdrożenie funkcjonalności na stronie. Przykładowymi i najpopularniejszymi frameworkami bazującymi na JavaScript są: Vue.js, React.js oraz Angular. Frameworki pozwalają znacznie przyspieszyć pracę, jednak aby mądrze z nich korzystać, trzeba najpierw solidnie zapoznać się z podstawami języka JavaScript. Więcej o samym JS można przeczytać na tej stronie - JS Tutorial.

Czujesz, że nie do końca jeszcze wszystko rozumiesz?

Spokojnie, pamiętaj, że najważniejsza jest praktyka i ćwiczenia. Zacznij tworzyć podstawowe projekty, a z czasem gdy opanujesz już więcej funkcjonalności, zobaczysz jaką radość przyniesie Ci ich wdrażanie. Jeśli chcesz poznać więcej informacji dotyczących programowania, to obserwuj naszego bloga, gdzie materiałów tego typu pojawi się z czasem znacznie więcej, możesz również skontaktować się z nami w formularzu pod tym linkiem, lub wysłać maila na kontakt@webalize.me. Uwielbiamy pyszną kawę, dlatego jeśli masz ochotę, spotkajmy się i wspólnie podyskutujmy na temat rozwiązań technologicznych w IT 😉