JavaScript

Notatka:

Biblioteka JavaScript:

• jQuery to biblioteka języka JavaScript. Upraszcza interakcje między HTML a JavaScript.

• Ułatwia manipulowanie elementami HTML, obsługę zdarzeń, animacje i komunikację z serwerem za pomocą AJAX.

Uproszczenie kodu:

• Celem jQuery jest uproszczenie pisania skryptów JavaScript.

• Pozwala na pisanie krótszego i bardziej zrozumiałego kodu.

• Ułatwia wykonywanie zadań, które standardowo wymagałyby wielu linii kodu JavaScript.

• Kompatybilność z przeglądarkami:

• jQuery zostało zaprojektowane tak, aby działało z różnymi przeglądarkami internetowymi, eliminując konieczność dostosowywania kodu.

Funkcjonalność:

• Selektory: Umożliwiają wybór dowolnych elementów HTML.

• Atrybuty: Pozwala na manipulowanie atrybutami elementów HTML.

• Manipulowanie modelem DOM: Umożliwia dynamiczną zmianę struktury strony.

• Zmiana i przypisywanie styli: Ułatwia modyfikację wyglądu elementów.

• Obsługa zdarzeń: Umożliwia reagowanie na interakcje użytkownika.

• Efekty i animacje: Ułatwia tworzenie płynnych animacji.

• AJAX: Ułatwia asynchroniczne pobieranie danych z serwera.

Zadanie:

1. Czy warto jeszcze uczyć się jQuery? Uzasadnij, jeśli uznasz, że nie - napisz czego warto się uczyć w kontekście JS.

2. Przygotuj infografikę - co trzeba opanować by zostać webmasterem.

Państwa zadaniem jest dodanie dowolnego elementu interaktywnego do mojej strony internetowej za pomocą języka JavaScript. Możecie wybrać dowolny element, który Waszym zdaniem uatrakcyjni moją stronę lub doda do niej funkcjonalność.

Oto kilka propozycji:

• Animacja: Dodanie animacji do istniejących elementów, np. zmiana kolorów, przesuwanie się elementów po najechaniu myszą itp.

• Interaktywny formularz: Utworzenie formularza, który będzie zbierał dane od użytkownika i wyświetlał je na stronie lub wysyłał do mnie.

• Galeria zdjęć: Utworzenie galerii zdjęć, która będzie umożliwiała przeglądanie zdjęć w dynamiczny sposób.

• Efekty specjalne: Dodanie efektów specjalnych, takich jak np. zmiana tła strony po kliknięciu przycisku.

• Dodatkowe informacje: Wyświetlanie dodatkowych informacji po najechaniu myszą na dany element.

Co będzie oceniane:

• Funkcjonalność: Czy dodany element działa poprawnie i spełnia swoją funkcję.

• Kreatywność: Czy element jest oryginalny i pomysłowy.

• Estetyka: Czy element jest estetycznie wkomponowany w stronę i nie psuje jej wyglądu.

• Kod: Czy kod JavaScript jest napisany czytelnie, zrozumiale i zgodnie z zasadami programowania.

Poziom Easy 

• Zadanie 1: 

Napisz funkcję, która przyjmuje dwa argumenty: podstawę i wysokość trójkąta. Funkcja powinna zwracać pole trójkąta.

• Zadanie 2: 

Napisz funkcję, która przyjmuje jako argument liczbę i zwraca true, jeśli liczba jest parzysta, a w przeciwnym razie false.

Poziom Medium

• Zadanie 3:

Napisz funkcję, która przyjmuje jako argument tablicę liczb i zwraca nową tablicę zawierającą tylko liczby dodatnie z oryginalnej tablicy.

• Zadanie 4: 

Napisz funkcję, która przyjmuje jako argument ciąg znaków i zwraca nowy ciąg znaków, w którym wszystkie samogłoski są zastąpione literą 'a'.

• Zadanie 5: 

Napisz funkcję, która przyjmuje jako argument tablicę obiektów, gdzie każdy obiekt ma właściwości 'imię' i 'wiek'. Funkcja powinna zwracać nową tablicę zawierającą tylko obiekty, których wiek jest większy niż 18.

Poziom Hardcore

• Zadanie 6:

Napisz funkcję, która przyjmuje jako argument tablicę liczb i zwraca medianę tych liczb.

• Zadanie 7: 

Napisz funkcję, która przyjmuje jako argument ciąg znaków i zwraca najdłuższy podciąg, który jest palindromem*.

• Zadanie 8:

Napisz funkcję, która przyjmuje jako argument drzewo binarne i zwraca jego wysokość.

Poziom HELL

• Zadanie 9: 

Napisz funkcję, która implementuje algorytm sortowania przez scalanie.

• Zadanie 10: 

Napisz funkcję, która rozwiązuje problem plecakowy** (knapsack problem).

* Palindrom to słowo, wyrażenie, liczba, sekwencja znaków lub symboli, które czytane od lewej do prawej i od prawej do lewej brzmią tak samo. Inaczej mówiąc, jest to tekst, który pozostaje taki sam po odwróceniu kolejności liter lub cyfr.

Przykłady palindromów:

Słowa: kajak, radar, madam, level

Wyrażenia: "Kobyła ma mały bok"

Liczby: 12321, 1001, 5555

Palindromy mogą być pojedynczymi słowami, frazami, zdaniami, a nawet dłuższymi tekstami. Ważne jest, że czytane w obie strony zachowują ten sam układ liter lub cyfr.

Palindromy są popularne w zabawach słownych, grach logicznych i literaturze. Niektóre z nich mają znaczenie humorystyczne, inne mogą być wyrazem kunsztu językowego autora.

** Problem plecakowy to problem z zakresu optymalizacji kombinatorycznej, który polega na wyborze takiego zestawu przedmiotów, aby zmaksymalizować ich wartość, jednocześnie nie przekraczając ograniczenia wagowego (pojemności plecaka).

Najprościej można go przedstawić tak:

Pan Tomasz jedzie na wczasy, chce zapakować najcenniejsze przedmioty do plecaka, ale plecak ma ograniczoną pojemność. Każdy przedmiot ma określoną wartość i wagę. Pan Tomasz musi zdecydować, które przedmioty włożyć do plecaka, aby ich łączna wartość była jak największa, nie przekraczając jednocześnie maksymalnej wagi, jaką plecak może udźwignąć.

Problem plecakowy występuje w różnych wariantach:

• Dyskretny problem plecakowy - przedmioty są niepodzielne (można je albo wziąć w całości, albo wcale).

• Ciągły problem plecakowy - przedmioty można dzielić na mniejsze części (np. wziąć pół kilograma złota).

• Problem plecakowy z wielokrotnym wyborem - dany przedmiot można wybrać wielokrotnie (np. wziąć kilka takich samych książek).

Problem plecakowy jest problemem NP-trudnym, co oznacza, że nie istnieje znany algorytm, który rozwiązywałby go w czasie wielomianowym dla wszystkich możliwych danych wejściowych. Dla małych danych wejściowych problem ten można rozwiązać metodą brute-force (sprawdzając wszystkie możliwe kombinacje przedmiotów), jednak dla większych danych wejściowych jest to niemożliwe. Istnieją jednak różne algorytmy (np. programowanie dynamiczne, algorytmy zachłanne), które pozwalają znaleźć przybliżone rozwiązanie problemu plecakowego w akceptowalnym czasie.

Problem plecakowy ma wiele praktycznych zastosowań, m.in. w logistyce (optymalizacja załadunku kontenerów), finansach (wybór portfela inwestycyjnego), kryptografii i wielu innych dziedzinach.

Zadania główne:

• Wymień nazwy grup zdarzeń

• Wymień nazwy zdarzeń myszy

• Wymień nazwy zdarzeń klawiatury

Zadania dodatkowe:

• Wyjaśnij własnymi słowami następujące pojęcia:

  • • Zdarzenie (Event)

    • Obsługa zdarzeń (Event Handling)

    • Funkcja obsługi zdarzenia (Event Handler/Listener)

    • Propagacja zdarzeń (Event Propagation)

• Porównaj trzy metody przypisywania funkcji do zdarzeń w JavaScript (atrybut HTML, właściwość DOM, addEventListener). Wskaż ich zalety i wady. Która z metod jest najbardziej zalecana i dlaczego?

• Opisz trzy fazy propagacji zdarzeń w modelu DOM: przechwytywanie, faza docelowa i bąbelkowanie. W jakiej kolejności występują? Jaki wpływ mają na obsługę zdarzeń?

• Jakie są kluczowe różnice między używaniem addEventListener a przypisywaniem funkcji do właściwości onclick elementu DOM? W jakich sytuacjach preferowane jest użycie addEventListener?

• Wyjaśnij, w jakim celu używa się metody removeEventListener. Jakie warunki muszą być spełnione, aby poprawnie usunąć nasłuchiwanie zdarzenia?

• Co to jest obiekt zdarzenia (Event Object)? Jakie informacje można z niego uzyskać? Podaj przykłady co najmniej 3 przydatnych właściwości obiektu zdarzenia.

• Czy w JavaScript można tworzyć i wywoływać własne, niestandardowe zdarzenia? Jeśli tak, to w jakim celu mogłoby się to przydać?

Zadania główne:

1. Opisz swoimi słowami co to jest konstruktor

2. Opisz swoimi słowami co to jest metoda

3. Co to jest metoda substring? Podaj przykład działania.

Zadania dodatkowe:

• Wymień trzy obiekty wbudowane w JavaScript i opisz ich zastosowanie.

• Wyjaśnij, do czego służy słowo kluczowe this w kontekście obiektów.

• Który obiekt wbudowany w JavaScript reprezentuje okno przeglądarki? Jakie metody i właściwości udostępnia ten obiekt?

• Jak można uzyskać dostęp do elementu HTML o identyfikatorze "myElement" za pomocą obiektu document?

• Opisz, jak można dodać nowy element do tablicy w JavaScript.

• Wyjaśnij, do czego służy metoda toUpperCase() obiektu String. Podaj przykład.

• Jak można wygenerować losową liczbę z zakresu od 1 do 10 za pomocą obiektu Math?

• Wyjaśnij, czym jest prototyp obiektu.

Zadania główne:

1. Wymień znane Ci funkcje wbudowane

2. Opisz własnymi słowami w jaki sposób definiuje się funkcje

3. Opisz własnymi słowami w jaki sposób wywołuje się funkcję z argumentami

Zadania dodatkowe

• Wyjaśnij różnicę między argumentami a parametrami funkcji. Podaj przykład.

• Co to jest funkcja anonimowa i jak ją można wykorzystać? Podaj przykład.

• Opisz, czym jest zakres zmiennych w JavaScript i jak wpływa na dostępność zmiennych w kodzie. Podaj przykład ilustrujący różnicę między zmiennymi globalnymi i lokalnymi.

• Wyjaśnij, jak działa instrukcja return w funkcji. Co się stanie, jeśli funkcja nie zawiera instrukcji return?

• Czym są funkcje strzałkowe i jakie są ich główne zalety? Podaj przykład funkcji strzałkowej i jej odpowiednika w tradycyjnej  składni.

• Wyjaśnij pojęcie metody w kontekście programowania obiektowego w JavaScript. Podaj przykład obiektu z metodą i opisz, jak ją wywołać.

• Co to jest rekurencja w kontekście funkcji? Podaj przykład funkcji rekurencyjnej.

Zadania główne

1. Jaka jest różnica między instrukcją warunkową a instrukcją przetwarzania warunkowego?

2. Jaka jest różnica w zastosowaniu pętli for a pętli while?

3. Jaka jest różnica w działaniu pętli while a do... while?

Zadania dodatkowe

• Podaj przykład sytuacji, w której zastosowanie pętli do...while byłoby bardziej odpowiednie niż while.

• Opisz, jak działa instrukcja switch...case. Wymień jej główne elementy składowe i wyjaśnij rolę słowa kluczowego break

• Podaj przykład kodu, w którym wykorzystasz instrukcję warunkową if...else do sprawdzenia, czy dana liczba jest parzysta czy nieparzysta.

• Wyjaśnij, dlaczego w niektórych przypadkach instrukcja switch...case może być bardziej czytelna niż instrukcja if...else. Podaj przykład.

• Która pętla (for, while, do...while) najlepiej nadaje się do iterowania po elementach tablicy? Uzasadnij swój wybór.

• Wyjaśnij, co to jest warunek logiczny i podaj przykłady operatorów logicznych używanych w JavaScript.

• Wyjaśnij, jak można wykorzystać instrukcje sterujące do tworzenia interaktywnych stron internetowych. Podaj przykład.