Zajęcia rozpoczynające przedmiot witryny i aplikacje internetowe - podstawy programowania

mail: t.sadowski@zst.chelm.pl

Oto krótkie wyjaśnienia poszczególnych terminów związanych z podstawami programowania:

Program: Zestaw instrukcji wykonujących określone zadania przez komputer.
Programowanie: Proces tworzenia programów komputerowych poprzez pisanie kodu, który opisuje operacje do wykonania przez komputer.
Język programowania: Zbiór reguł i składni umożliwiający pisanie programów. Przykłady to Python, Java, C++.
Słowa kluczowe: Specjalne zarezerwowane słowa w języku programowania, mające specjalne znaczenie, np. 'if', 'while' w Pythonie.
Kod źródłowy: Tekstowy zapis programu w języku programowania, który opisuje, co program ma robić.
Translator: Narzędzie przekształcające kod źródłowy na kod maszynowy lub inny zrozumiały dla komputera.
Kompilator: Program, który tłumaczy cały kod źródłowy na język maszynowy przed wykonaniem programu.
Interpreter: Program, który tłumaczy i wykonuje kod źródłowy linia po linii, zamiast tłumaczyć go w całości przed wykonaniem.
Moduł: Zestaw powiązanych funkcji i klas, które można zaimportować i wykorzystać w innych programach.
Linker: Narzędzie, które łączy różne moduły i biblioteki w jeden działający program.
Konsolidacja: Proces łączenia kodu źródłowego, bibliotek i innych zasobów w jeden plik wykonywalny.
Aplikacja: Program, który wykonuje konkretne zadania dla użytkownika, np. edytor tekstu.
Aplikacja internetowa: Program działający w przeglądarce internetowej, dostępny online, np. Gmail.
Aplet: Mały program uruchamiany w środowisku innej aplikacji, często w przeglądarce internetowej (np. stare applet-y w Javie).

Język programowania to formalny zestaw reguł i składni, który pozwala programistom pisać instrukcje zrozumiałe dla komputerów. Języki programowania umożliwiają tworzenie różnych typów oprogramowania, od aplikacji, przez systemy operacyjne, aż po gry komputerowe.

Główne cechy języków programowania:

Składnia: Zbiór reguł, które określają, jak powinny być pisane instrukcje. Każdy język ma swoją unikalną składnię, np. w Pythonie używamy wcięć do tworzenia bloków kodu, a w C++ nawiasów klamrowych {}.
Semantyka: Określa, co znaczą poszczególne instrukcje napisane w danym języku. Nawet jeśli kod jest poprawny składniowo, musi również być semantycznie poprawny, aby miał sens.
Abstrakcja: Języki programowania mogą działać na różnym poziomie abstrakcji:
Języki niskopoziomowe (bliskie językowi maszynowemu, np. assembler) pozwalają na precyzyjne kontrolowanie zasobów komputera.
Języki wysokopoziomowe (np. Python, Java, C#) są bardziej zbliżone do języka naturalnego i abstrakcyjnie opisują zadania, pozwalając programistom skupić się na logice aplikacji.

Typy języków programowania:

Proceduralne: Języki, w których program jest serią instrukcji do wykonania krok po kroku. Przykłady: C, Pascal.
Obiektowe: Skupiają się na obiektach, które są instancjami klas, zawierających dane (atrybuty) i funkcje (metody). Przykłady: Java, C++, Python.
Funkcyjne: Oparte na koncepcji funkcji matematycznych, gdzie podstawowym elementem programu jest funkcja, a nie stan. Przykłady: Haskell, Lisp.
Logiczne: Programowanie oparte na regułach logicznych i deklarowaniu tego, co ma być osiągnięte, a nie jak. Przykład: Prolog.

Popularne języki programowania:

Python: Język wysokopoziomowy, prosty w nauce, wykorzystywany w różnych dziedzinach, jak analiza danych, sztuczna inteligencja, tworzenie stron internetowych.
Java: Język obiektowy, bardzo popularny w aplikacjach webowych, mobilnych (Android) i korporacyjnych.
C++: Język o szerokim zastosowaniu, szczególnie w aplikacjach wymagających wysokiej wydajności, np. gry, systemy operacyjne.
JavaScript: Język skryptowy używany głównie w programowaniu front-endu aplikacji internetowych.
C#: Język stworzony przez Microsoft, używany głównie w ramach platformy .NET do tworzenia aplikacji desktopowych, webowych i gier (Unity).

Jak język programowania działa?

Kiedy programista pisze kod w języku programowania, jest on zazwyczaj tłumaczony na język maszynowy (czyli kod, który komputer rozumie bezpośrednio) za pomocą kompilatora lub interpretera. Wybór zależy od konkretnego języka:

Kompilatory: Tłumaczą cały program na raz (np. C++, Java).
Interpretery: Wykonują kod linia po linii (np. Python, Ruby).

Wybór języka programowania zależy od:

Rodzaju aplikacji: Różne języki są lepsze dla różnych typów aplikacji, np. Python dla nauki danych, JavaScript dla stron internetowych.
Wydajności: Niektóre języki są bardziej optymalne do obliczeń o wysokiej wydajności (np. C++).
Łatwości nauki: Języki takie jak Python są uznawane za łatwiejsze do nauki, co sprawia, że są popularne wśród początkujących.

Kompilatory: Kompilator to narzędzie, które tłumaczy kod źródłowy napisany w języku programowania (np. C, C++) na kod maszynowy, czyli zrozumiały dla komputera. Proces kompilacji przebiega w kilku etapach, z których każdy ma na celu przekształcenie i optymalizację kodu. Poniżej omówię kluczowe etapy kompilacji.

1. Wstępne przetwarzanie kodu (preprocessing)

Cel: Przygotowanie kodu przed właściwą kompilacją.
Opis: W fazie wstępnego przetwarzania kompilator zajmuje się operacjami takimi jak:
Rozwijanie dyrektyw preprocesora (np. #include, #define w C i C++).
Zastępowanie makr ich wartościami (np. #define PI 3.14).
Usuwanie komentarzy z kodu źródłowego.
Scalanie dołączonych plików (np. nagłówków z #include).

Wynik: Kod wynikowy zawiera już rozwinięte makra i dołączone pliki, gotowy do analizy leksykalnej.

2. Analiza leksykalna (lexical analysis)

Cel: Podzielenie kodu na najmniejsze logiczne jednostki, zwane tokenami.
Opis: W tej fazie kod źródłowy jest analizowany w celu identyfikacji poszczególnych elementów składniowych:
Tokeny mogą być identyfikowane jako słowa kluczowe (np. int, if), identyfikatory (nazwy zmiennych), operatory (np. +, ==), literały (np. liczby, tekst).
Kompilator tworzy listę tokenów, które będą wykorzystywane w dalszych etapach analizy.

Przykład: Kod int x = 10; zostanie podzielony na tokeny: int, x, =, 10, ;.

Wynik: Lista tokenów, które będą analizowane pod względem składniowym.

3. Analiza składniowa (syntactic analysis, parsing)

Cel: Sprawdzenie poprawności gramatycznej kodu.
Opis: W tej fazie kompilator analizuje, czy zestawienie tokenów jest zgodne z regułami gramatycznymi języka programowania.
Tworzona jest struktura drzewa składniowego (ang. syntax tree), które reprezentuje hierarchię elementów w kodzie.
Jeśli kod zawiera błędy składniowe (np. brak średnika, źle umieszczone nawiasy), kompilator zgłasza błąd.

Przykład: Kod int x = 10; zostanie zanalizowany, aby sprawdzić, czy jest poprawny zgodnie z regułami języka (deklaracja zmiennej typu int, przypisanie wartości).

Wynik: Drzewo składniowe reprezentujące strukturę kodu.

4. Analiza semantyczna (semantic analysis)

Cel: Sprawdzenie poprawności logicznej kodu.
Opis: Analiza semantyczna sprawdza, czy kod ma sens pod względem znaczenia, a nie tylko składni. Kompilator weryfikuje:
Poprawność typów danych (np. czy możemy dodać zmienną typu int do zmiennej typu string).
Deklaracje zmiennych i funkcji (czy zmienne są zdefiniowane przed użyciem).
Zgodność liczby i typu argumentów funkcji.
Spójność operacji logicznych i matematycznych.

Przykład: Przypisanie int x = "text"; spowoduje błąd semantyczny, ponieważ nie można przypisać tekstu do zmiennej typu int.

Wynik: Jeśli analiza semantyczna zakończy się sukcesem, kod jest logicznie poprawny i można przejść do dalszych etapów.

5. Optymalizacja kodu wynikowego (code optimization)

Cel: Poprawa wydajności generowanego kodu maszynowego.
Opis: Kompilator stara się zminimalizować ilość operacji lub zoptymalizować kod, aby działał szybciej lub zużywał mniej pamięci.
Optymalizacje lokalne: Dotyczą pojedynczych fragmentów kodu, np. uproszczenie wyrażeń (x = x + 0 jest zastępowane x = x).
Optymalizacje globalne: Obejmują całe funkcje lub moduły, np. eliminacja martwego kodu (kod, który nigdy nie zostanie wykonany).
Zachowanie funkcjonalności: Optymalizacje nie mogą zmieniać działania programu, muszą być „niewidoczne” dla programisty.

Przykład: Optymalizacja pętli w celu zmniejszenia liczby instrukcji procesora.

Wynik: Bardziej efektywny kod, który wykonuje te same operacje, ale szybciej lub z mniejszym zużyciem zasobów.

6. Generowanie kodu (code generation)

Cel: Przetłumaczenie zoptymalizowanego kodu na kod maszynowy.
Opis: Na tym etapie kompilator generuje kod wynikowy, który może być bezpośrednio wykonany przez procesor komputera.
Tworzony jest kod maszynowy lub kod pośredni (np. w przypadku Javy generowany jest bytecode, który potem jest uruchamiany przez maszynę wirtualną).
Kompilator bierze pod uwagę specyfikę architektury sprzętowej, aby wygenerowany kod był zoptymalizowany dla konkretnego procesora.

Przykład: W C++ kod int x = 10; zostanie przekształcony w odpowiednie instrukcje procesora, które przydzielą pamięć i przypiszą wartość 10 do zmiennej x.

Wynik: Gotowy do wykonania kod maszynowy (lub pośredni), który może zostać uruchomiony na komputerze.

Podsumowanie:

Kompilacja to złożony proces, który obejmuje kilka etapów, od wstępnego przetwarzania kodu aż po wygenerowanie kodu maszynowego. Każdy etap ma na celu przekształcenie kodu źródłowego na coraz bardziej zrozumiały i zoptymalizowany dla maszyny poziom. Proces ten gwarantuje, że program będzie poprawnie działał oraz będzie efektywnie wykorzystać zasoby sprzętowe.

Wprowadzenie do HTML

HTML (HyperText Markup Language) to podstawowy język służący do tworzenia stron internetowych. HTML używa znaczników (ang. tags) do strukturyzowania treści, takich jak tekst, obrazy, linki, formularze, nagłówki i inne elementy, które są widoczne w przeglądarce internetowej.

Podstawowa struktura dokumentu HTML

Każdy dokument HTML ma standardową strukturę, która zaczyna się od doctype i zawiera elementy, które tworzą szkielet strony internetowej. Oto podstawowe elementy strukturalne:

<!DOCTYPE html> - Deklaracja dokumentu HTML. Informuje przeglądarkę, że strona jest napisana w HTML5.
<html> - Główny znacznik, który otacza całą zawartość strony.
<head> - Sekcja zawierająca metadane, tytuł strony, linki do zewnętrznych zasobów (np. CSS, skrypty).
<body> - Sekcja zawierająca wszystkie widoczne elementy na stronie, takie jak tekst, obrazy, nagłówki, linki.

Przykład 1: Prosty dokument HTML

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja Pierwsza Strona</title>
</head>
<body>
<h1>Witaj na mojej stronie</h1>
<p>To jest mój pierwszy dokument HTML.</p>
</body>
</html>

Wyjaśnienie:

<!DOCTYPE html>: Informuje przeglądarkę, że korzystamy z HTML5.
<html lang="pl">: Znacznik otwierający HTML, gdzie lang="pl" oznacza, że strona jest w języku polskim.
<meta charset="UTF-8">: Ustawienie kodowania znaków na UTF-8, co pozwala na prawidłowe wyświetlanie polskich znaków.
<title>: Tytuł strony, który pojawi się na karcie przeglądarki.
<h1>: Główny nagłówek strony.
<p>: Paragraf z tekstem.

Przykład 2: Struktura z dodatkowymi elementami

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>O mnie</title>
</head>
<body>
<h1>Kim jestem?</h1>
<p>Nazywam się Jan Kowalski i interesuję się programowaniem.</p>
<h2>Moje hobby</h2>
<ul>
    <li>Programowanie</li>
    <li>Gra na gitarze</li>
    <li>Podróże</li>
</ul>
</body>
</html>

Wyjaśnienie:

<h2>: Mniejszy nagłówek (drugi poziom), który tworzy podsekcję.
<ul>: Lista nieuporządkowana, której pozycje są oznaczone punktami.
<li>: Pojedynczy element listy (w tym przypadku trzy hobby).

Ćwiczenie 1: Tworzenie podstawowego dokumentu HTML

Zadanie:

Utwórz nowy dokument HTML o nazwie "index.html".
Stwórz strukturę strony z nagłówkiem <h1>, który będzie zawierał tekst "Moja strona".
Dodaj paragraf <p>, w którym opiszesz, o czym jest strona.
Wstaw tytuł strony, który będzie widoczny na karcie przeglądarki.

Podpowiedź: Wzoruj się na pierwszym przykładzie. Upewnij się, że poprawnie zastosowałeś znacznik doctype i strukturę strony.

Ćwiczenie 2: Dodawanie listy i nagłówków

Zadanie:

Utwórz dokument HTML o nazwie "hobby.html".
Dodaj nagłówek <h1> z tekstem "Moje Hobby".
Stwórz listę swoich trzech ulubionych hobby, używając listy nieuporządkowanej <ul>.
Dodaj dodatkowy nagłówek <h2> dla sekcji zatytułowanej "Dlaczego to lubię", a następnie napisz paragraf wyjaśniający, dlaczego wybrałeś te hobby.

Podpowiedź: Użyj znacznika <ul> do stworzenia listy oraz <h2> do dodania podsekcji.