Lekcja 2

Kontynuacja poprzednich zajęć - podstawy programowania

języki: Języki skryptowe to języki programowania zaprojektowane do automatyzacji zadań, interakcji z systemami operacyjnymi lub rozszerzania funkcji aplikacji. Są zazwyczaj interpretowane, co oznacza, że kod jest wykonywany bezpośrednio, bez potrzeby wcześniejszej kompilacji. Charakteryzują się prostą składnią i elastycznością, co sprawia, że są popularne w szybkiej, prototypowej pracy oraz w tworzeniu skryptów systemowych, aplikacji webowych czy automatyzacji zadań. Przykłady języków skryptowych to Python, JavaScript, PHP, Ruby oraz Bash.

Języki te są często stosowane tam, gdzie nie jest wymagana maksymalna wydajność, ale liczy się szybkość tworzenia i łatwość utrzymania kodu.

biblioteki: Biblioteki standardowe to zestaw predefiniowanych funkcji, klas i modułów dostarczanych razem z językiem programowania, które ułatwiają i przyspieszają tworzenie oprogramowania. Zamiast pisać wiele podstawowych funkcji od zera, programiści mogą korzystać z gotowych rozwiązań, które są niezawodne i zoptymalizowane.

Cechy bibliotek standardowych:

  1. Dostępność: Biblioteki standardowe są dostępne od razu po zainstalowaniu środowiska programistycznego danego języka, więc nie wymagają dodatkowej instalacji.
  2. Optymalizacja: Są one dobrze przetestowane, co zapewnia wysoką wydajność i stabilność.
  3. Wszechstronność: Zawierają funkcje i klasy do realizacji szerokiej gamy zadań, takich jak operacje na plikach, zarządzanie pamięcią, obliczenia matematyczne, przetwarzanie tekstu czy obsługa protokołów sieciowych.

Przykłady bibliotek standardowych w różnych językach:

  1. C:
  • stdio.h: Zawiera funkcje do obsługi wejścia i wyjścia, np. printf, scanf.
  • stdlib.h: Funkcje do zarządzania pamięcią, konwersji typów danych i generowania liczb losowych, np. malloc, free, rand.
  • math.h: Zawiera funkcje matematyczne, np. sqrt, pow.
  1. C++:
  • iostream: Obsługa strumieni wejścia/wyjścia, np. std::cin, std::cout.
  • vector: Kontenery dynamicznych tablic, które mogą zmieniać rozmiar w trakcie działania programu.
  • algorithm: Zawiera różne algorytmy sortowania, wyszukiwania i operacji na kontenerach, np. std::sort.
  1. Python:
  • os: Umożliwia wykonywanie operacji systemowych, takich jak zarządzanie plikami i procesami.
  • sys: Zawiera funkcje do interakcji z interpreterem Pythona i manipulowania parametrami systemowymi.
  • math: Zawiera funkcje matematyczne, takie jak sin, cos, log.
  • json: Umożliwia serializację i deserializację danych w formacie JSON.
  1. Java:
  • java.util: Zawiera klasy pomocnicze, takie jak ArrayList, HashMap, oraz narzędzia do obsługi dat i czasów (Date, Calendar).
  • java.io: Obsługuje operacje wejścia/wyjścia na plikach i strumieniach danych.
  • java.net: Umożliwia programowanie sieciowe, np. tworzenie połączeń TCP/IP.
  1. JavaScript (dla przeglądarek):
  • DOM API: Biblioteka standardowa do manipulacji strukturą dokumentów HTML i interakcji z przeglądarką.
  • Fetch API: Umożliwia wykonywanie zapytań sieciowych do serwerów w celu pobierania danych.
  1. PHP:
  • PDO: Uniwersalna warstwa dostępu do baz danych, która obsługuje wiele typów baz, takich jak MySQL, SQLite, PostgreSQL.
  • session: Obsługa sesji użytkownika, co jest kluczowe w aplikacjach internetowych.

Typowe obszary, które obejmują biblioteki standardowe:

  1. Operacje na plikach i systemie: Przykładowo, w Pythonie moduł os umożliwia interakcje z systemem plików, np. tworzenie katalogów, usuwanie plików, czy zmienianie ścieżek.
  2. Operacje matematyczne: Biblioteki matematyczne, jak math.h w C lub math w Pythonie, zawierają funkcje do wykonywania operacji takich jak pierwiastkowanie, potęgowanie, operacje trygonometryczne.
  3. Przetwarzanie danych: Na przykład w Pythonie, moduły takie jak json umożliwiają łatwą obsługę formatów wymiany danych.
  4. Obsługa sieci: Języki programowania często zawierają biblioteki do realizacji zadań związanych z siecią, takich jak tworzenie połączeń HTTP, TCP/IP.

Podsumowanie:

Biblioteki standardowe są nieodłącznym elementem każdego języka programowania, ułatwiając pracę programistom i przyspieszając rozwój aplikacji. Dzięki nim możliwe jest korzystanie z gotowych, zoptymalizowanych rozwiązań, co pozwala uniknąć ponownego wymyślania podstawowych funkcji i skupić się na bardziej zaawansowanych aspektach aplikacji.

algorytmy: Algorytmy są kluczowymi narzędziami w informatyce, pozwalającymi na efektywne rozwiązywanie problemów i przetwarzanie danych. Algorytmy sortowania pomagają w uporządkowaniu danych, co jest niezbędne w wielu aplikacjach, np. w bazach danych. Algorytmy wyszukiwania umożliwiają szybkie znajdowanie elementów w zbiorach, co jest kluczowe w wyszukiwarkach i systemach rekomendacji. Algorytmy grafowe są wykorzystywane w problemach związanych z sieciami, mapami i trasowaniem. Algorytmy rekurencyjne rozwiązywają problemy, dzieląc je na mniejsze, bardziej zarządzalne części. Algorytmy dynamicznego programowania są używane do rozwiązywania problemów optymalizacyjnych, które można podzielić na nakładające się podproblemy. Algorytmy zachłanne podejmują decyzje, które są lokalnie optymalne, aby osiągnąć globalne rozwiązanie w praktycznych scenariuszach. Algorytmy "dziel i zwyciężaj" dzielą problem na mniejsze części, które są łatwiejsze do rozwiązania i łączą wyniki w rozwiązanie końcowe. Algorytmy probabilistyczne stosują losowość do rozwiązywania problemów, co jest przydatne w sytuacjach, gdzie tradycyjne podejścia są zbyt kosztowne lub skomplikowane. Efektywność algorytmów mierzy się przy użyciu notacji asymptotycznych, które pomagają ocenić, jak zmienia się czas wykonania lub zużycie pamięci w zależności od rozmiaru danych wejściowych.

reprezentacja: Reprezentacja algorytmów to sposób przedstawiania ich w sposób, który ułatwia zrozumienie i implementację. Oto główne metody:

  1. Opis słowny:
  • Opis algorytmu w formie tekstu naturalnego. Wyjaśnia, co algorytm robi i jak osiąga swoje cele, używając prostych zdań.
  • Przykład: „Sortowanie bąbelkowe polega na porównywaniu sąsiednich elementów w tablicy i zamienianiu ich miejscami, jeśli są w złej kolejności, aż do momentu, gdy cała tablica będzie posortowana.”
  1. Lista kroków:
  • Prezentacja algorytmu jako sekwencja jednoznacznych kroków, które należy wykonać w określonej kolejności.
  • Przykład:

  1. Rozpocznij od pierwszego elementu w tablicy.

  2. Porównaj go z następnym elementem.

  3. Jeśli pierwszy element jest większy, zamień je miejscami.

  4. Przejdź do następnej pary elementów.

  5. Powtarzaj kroki 2-4, aż do końca tablicy.

  6. Powtarzaj cały proces dla każdego elementu, aż tablica będzie posortowana.

  7. Pseudokod:

  • Abstrakcyjna, uproszczona wersja kodu, używająca języka przypominającego kod, ale bez składni konkretnego języka programowania. Ułatwia zrozumienie logiki algorytmu.
  • Przykład:
function bubbleSort(array):
   n = length(array)
   for i from 0 to n-1:
         for j from 0 to n-i-2:
            if array[j] > array[j+1]:
               swap(array[j], array[j+1])
  1. Drzewo algorytmu:
  • Graficzna reprezentacja algorytmu, pokazująca decyzje i możliwe ścieżki, które mogą być podjęte w trakcie działania algorytmu. Pomaga w zrozumieniu struktury i ścieżek decyzyjnych.
  • Przykład: Drzewo decyzyjne w algorytmie sortowania pokazuje różne kroki porównywania i wymiany elementów oraz decyzje podejmowane w każdym kroku.
  1. Schemat blokowy:
  • Graficzna reprezentacja algorytmu z użyciem standardowych symboli do przedstawiania różnych typów operacji (np. operacje, decyzje, wejścia/wyjścia). Ułatwia zrozumienie przepływu kontrolnego.
  • Przykład: Schemat blokowy sortowania bąbelkowego pokazuje bloki reprezentujące porównania, wymiany oraz pętle, z liniami pokazującymi przepływ danych i decyzji.

Każda z tych metod ma swoje zastosowanie w różnych etapach projektowania i dokumentowania algorytmów.

Wprowadzenie do linków i obrazów w HTML

Linki i obrazy to jedne z najczęściej używanych elementów na stronach internetowych. Linki pozwalają na przechodzenie między stronami, a obrazy dodają wizualne elementy do treści.

Linki w HTML

Linki w HTML tworzy się za pomocą znacznika <a> (ang. anchor). Link może prowadzić do innej strony internetowej, pliku lub określonego miejsca na tej samej stronie.

Przykład 1: Prosty link

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład linku</title>
</head>
<body>
<h1>Witaj na mojej stronie</h1>
<p>Przejdź na stronę <a href="https://www.google.com" target="_blank">Google</a>.</p>
</body>
</html>

Wyjaśnienie:

  • <a href="https://www.google.com">: Atrybut href określa adres URL, do którego prowadzi link. W tym przypadku link prowadzi do strony Google.
  • target="_blank": Otwiera link w nowej karcie przeglądarki.

Przykład 2: Link do innej sekcji na tej samej stronie

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Linki na stronie</title>
</head>
<body>
<h1>Spis treści</h1>
<p><a href="#sekcja1">Przejdź do sekcji 1</a></p>
<p><a href="#sekcja2">Przejdź do sekcji 2</a></p>

<h2 id="sekcja1">Sekcja 1</h2>
<p>To jest pierwsza sekcja.</p>

<h2 id="sekcja2">Sekcja 2</h2>
<p>To jest druga sekcja.</p>
</body>
</html>

Wyjaśnienie:

  • href="#sekcja1": Link prowadzi do sekcji o identyfikatorze sekcja1.
  • id="sekcja1": Atrybut id w nagłówku przypisuje sekcji unikalny identyfikator, dzięki czemu można się do niej odwołać za pomocą linku.

Ćwiczenie 1: Tworzenie linków

Zadanie:

  1. Utwórz dokument HTML z nagłówkiem <h1> "Moje ulubione strony".
  2. Stwórz listę trzech linków do swoich ulubionych stron internetowych, używając znacznika <a>. Każdy link powinien otwierać się w nowej karcie.

Podpowiedź: Użyj atrybutu href do wskazania adresu strony oraz target="_blank" do otwarcia w nowej karcie.

Obrazy w HTML

Obrazy w HTML wstawia się za pomocą znacznika <img>. Ten znacznik nie ma zamykającego tagu, a obrazy mogą pochodzić z lokalnych plików lub z internetu.

Przykład 1: Wstawienie obrazu

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład obrazu</title>
</head>
<body>
<h1>To jest mój ulubiony obrazek</h1>
<img src="https://www.example.com/obrazek.jpg" alt="Opis obrazka">
</body>
</html>

Wyjaśnienie:

  • <img src="https://www.example.com/obrazek.jpg">: Atrybut src określa adres URL obrazu.
  • alt="Opis obrazka": Atrybut alt dodaje tekst alternatywny, który wyświetli się, jeśli obraz nie zostanie załadowany. Tekst ten jest również ważny dla dostępności.

Przykład 2: Wstawienie obrazu z lokalnego pliku

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Obraz lokalny</title>
</head>
<body>
<h1>Mój lokalny obrazek</h1>
<img src="obrazek.jpg" alt="Mój lokalny obrazek" width="300" height="200">
</body>
</html>

Wyjaśnienie:

  • src="obrazek.jpg": Obraz o nazwie "obrazek.jpg" znajduje się w tym samym folderze co plik HTML.
  • width="300" height="200": Atrybuty width i height ustalają szerokość i wysokość obrazu w pikselach.

Ćwiczenie 2: Dodawanie obrazów

Zadanie:

  1. Utwórz stronę HTML zatytułowaną "Galeria obrazów".
  2. Wstaw dwa obrazy — jeden z internetu i jeden lokalny.
  3. Ustaw rozmiar obrazów na szerokość 300 pikseli i wysokość 200 pikseli.

Podpowiedź: Użyj atrybutów src, alt, width i height do osadzenia obrazów oraz ich stylizacji.

Podsumowanie:

Linki i obrazy to kluczowe elementy HTML, które umożliwiają łączenie stron i wzbogacanie treści wizualnie. W tej lekcji nauczyłeś się, jak tworzyć linki do zewnętrznych stron, innych sekcji na tej samej stronie oraz jak osadzać obrazy z internetu i lokalnych zasobów.