Temat: Przygotowanie do egzaminu INF.04.

Linki

Temat: Obsługa formularzy w frameworku Angular.

  1. Aby móc rozpocząć pracę z formularzami, należy dodać FormsModule:
    import { FormsModule } from '@angular/forms';
  2. Następnym krokiem jest utworzenie formularza w HTMLu.
  3. Za zarządzanie formularzem odpowiada dyrektywa ngForm, której zastosowanie pozwoli uzyskać dostęp do wartości wpisanych do pól formularza:
    import { NgForm } from '@angular/forms';
  4. Aby móc rejestrować pola formularza, inicjujemy je za pomocą dyrektywy ngModel:
    import { Component } from '@angular/core';
  5. Użycie słowa kluczowego required powoduje, że dany element formularza jest wymagany. Nie będzie go można przesłać, jeśli pole nie zostanie uzupełnione.
  6. Zastosowanie zmiennych szablonowych wraz z przypisaniem ich do ngModel pozwala wyświetlić dodatkowe pola ostrzegawcze:
    <input type="text" #nazwaPolaForm="ngModel" />
  7. Klasy określające stan weryfikacji danych formularza HTML:
    • valid - formularz został poprawnie wypełniony
    • invalid - formularz nie został poprawnie wypełniony
    • submitted - formularz został zatwierdzony
    • touched - pole formularza zostało wybrane przez kliknięcie lub klawiszem TAB
    • untouched - pole formularza nie zostało wybrane
    • dirty - w polu formularza było coś wpisane (mogło zostać później wykasowane)
    • pristine - w polu formularza nic nie było wpisane (jest dziewicze)
    • status - status danego pola (czy dane pole - nie cały formularz - jest typu invalid, czy valid)
    • disabled - czy dane pole jest typu disabled (zwraca true/false)
    • errors - indeks wskazujący błąd, przez który pole przyjmuje stan invalid
    • value - przechowuje wartość pola input wpisaną przez użytkownika

Temat: Usługi w frameworku Angular.

  1. Usługa (ang. service):
    • obiekt zapewniający pewną funkcjonalność
    • dzięki niej kod nie jest powielany, gdy mamy stały blok kodu wykonujący określone zadanie, wywoływane tak samo w różnych miejscach
  2. Generowanie usługi:
    ng generate service <nazwa_usługi>
    lub krócej:
    ng g s <nazwa_usługi>
  3. Po wydaniu polecenia do projektu zostaną dodane dwa nowe pliki: <nazwa_usługi>.service.spec.ts oraz <nazwa_usługi>.service.ts
  4. Aby móc odwołać się do usługi z poziomu komponentów, należy jej nazwę umieścić w tabeli providers oraz zaimportować ją za pomocą polecenia import, np.
    import { KalkulatorService } from './kalkulator.service';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers: [KalkulatorService]
    })
  5. Powiązanie usługi z konstruktorem sprawi, że będziemy mogli się do niej odwoływać, np.
    export class AppComponent {
      constructor(kalkulator: KalkulatorService) { }
    }

Temat: Przesyłanie danych pomiędzy komponentami w frameworku Angular.

  1. Z komponentu nadrzędnego do podrzędnego (@Input)
    • rozpoczynamy od utworzenia w pliku .ts komponentu nadrzędnego zmiennych, które będą przekazywane do podrzędnego, np.
      export class AppComponent {
        zmiennaEksport: string[] = ['17:00', 'pływalnią'];
      }
    • następnie w pliku .ts komponentu podrzędnego należy zastosować dekorator @Input i zapisać nazwę zmiennej, która ma przechowywać wartość przesłaną z elementu nadrzędnego, np.
      export class SynComponent {
        @Input() zmiennaImport!: string[];
      }
    • aby móc użyć dekoratora @Input, trzeba zaimportować komponent Input z @angular/core
    • ostatnią czynnością jest modyfikacja pliku HTML, w którym zagnieździliśmy komponent podrzędny w wywołującym go znaczniku, np.
      <app-syn [zmiennaImport]="zmiennaEksport"></app-syn>
    • wykorzystanie danych pochodzących z importu w szablonie komponentu podrzędnego:
      <h3>Informacja od rodzica: Przyjdę po ciebie o {{ zmiennaImport[0] }}, czekaj pod {{ zmiennaImport[1] }}</h3>
  2. Z komponentu podrzędnego do nadrzędnego (@Output)
    • najpierw należy utworzyć tzw. event emitter, który inicjujemy przez zaimportowanie komponentów @Output oraz EventEmitter z@angular/core w pliku .ts komponentu podrzędnego, np.
      export class SynComponent {
        @Output() odpowiedz = new EventEmitter<string>();
        wyslanie() {
          this.odpowiedz.emit('Będę czekał');
        }
    • następnie w pliku HTML elementu podrzędnego zostaje umieszczony przycisk Wyślij odpowiedź do rodzica, którego wciśnięcie wywoła zdarzenie click połączone z funkcją wyslanie, a tym samym wyemitowanie stringu Będę czekał:
      <button (click)="wyslanie()" type="button">Wyślij odpowiedź do rodzica</button>
    • aby przekazanie stringu do komponentu nadrzędnego doszło do skutku, należy zmodyfikować plik HTML, w którym jest użyty tag komponentu podrzędnego, np.
      <app-syn (odpowiedz)="onOdpowiedz($event)"></app-syn>
    • w pliku .ts komponentu nadrzędnego pole odpowiedz łączymy z metodą obsługującą zdarzenie o nazwie onOdpowiedz; jako argument metody zostaje podana zmienna $event, która zawiera przekazywaną wartość:
      export class AppComponent {
        onOdpowiedz(otrzymane: string) {
          alert(otrzymane);
        }
      }
    • po wciśnięciu przycisku Wyślij odpowiedź do rodzica string przekazany z komponentu podrzędnego zostanie wyświetlony w oknie typu alert, którego wywołanie znajduje się w komponencie nadrzędnym

Temat: Zagnieżdżanie komponentów w frameworku Angular.

  1. Aby można było używać wygenerowanych komponentów, należy je zainicjować w module aplikacji.
  2. Odpowiednie wpisy należy umieścić w pliku app.module.ts oraz innych plikach .ts w komponentach nadrzędnych, jeżeli ilość zagnieżdżeń jest większa, np.
    import { MyComponent } from './my/my.component';
    @Component({
      imports: [MyComponent],
    })
  3. Aby rozpocząć zagnieżdżanie komponentu, w pierwszej kolejności należy poznać jego nazwę, która znajduje się w pliku my.component.ts w polu o nazwie selector, np.
    selector: 'app-my'
  4. Na koniec należy otworzyć plik HTML komponentu nadrzędnego (rodzica) i umieścić w nim tag HTML, który jest nazwą zagnieżdżanego komponentu, np.
    <app-my></app-my>

Temat: Komponenty w frameworku Angular - wprowadzenie i budowa.

  1. Komponenty w Angularze:
    • służą do budowania aplikacji
    • są składowym aplikacji
  2. Budowę aplikacji w tym frameworku rozpoczynamy od pojedynczego komponentu.
  3. Kolejne komponenty tworzą drzewo komponentów.
  4. Każdy komponent ma klasę, plik HTML i plik stylów.
  5. Aby wygenerować komponent, należy się posłużyć poleceniem:
    ng generate component <nazwa_komponentu>
  6. Dozwolona jest skrócona forma:
    ng g c <nazwa_komponentu>
  7. Dla każdego komponentu generowane są cztery pliki:
    • <nazwa_komponentu>.component.html - plik szablonu
    • <nazwa_komponentu>.component.css - arkusz stylów
    • <nazwa_komponentu>.component.ts - plik TypeScript ze zmiennymi i metodami
    • <nazwa_komponentu>.component.spec.ts - plik TypeScript z testami

Temat: Dyrektywy atrybutowe w frameworku Angular.

  1. Dyrektywy atrybutowe (ang. Attribute Directives) są używane do zmiany wyglądu i zachowania elementów drzewa dokumentów.
  2. Dyrektywa ngStyle:
    • służy do ustawienia stylu formatowanego elementu
    • np. <h1 [ngStyle]="{'font-size.%'}: wybor*20+100">Treść nagłówka</h1>
  3. Dyrektywa ngClass:
    • odpowiada za ustawienie klasy elementu
    • np. <h1 [ngClass]="'klasa1 klasa2 klasaN'">Treść nagłówka</h1>
  4. Dyrektywa ngModel:
    • pozwala zaimplementować wiązanie dwukierunkowe danych (two-way binding)
    • np. <input type="text" [(ngModel)]="nazwisko">

Temat: Dyrektywy strukturalne w frameworku Angular.

  1. Dyrektywy strukturalne (ang. Structural Directives):
    • zmieniają strukturę drzewa dokumentów przez dodawanie, usuwanie lub modyfikowanie jego elementów
    • mają wpływ na strukturę kodu HTML oraz jego układ
    • są przypisane do konkretnego elementu
    • poprzedza się znakiem gwiazdki *
  2. Dyrektywa ngIf:
    • jest używana do dodawania lub usuwania elementów HTML
    • gdy wartość to false, element jest usuwany z drzewa dokumentów
    • gdy wartość to true, element jest uwzględniany w drzewie dokumentów
    • nie ukrywa elementu, ale nie uwzględnia go w drzewie dokumentów
    • np.: <img src="{{person.photo}}" *ngIf="showPhoto else noPhoto">
  3. Dyrektywa ngFor:
    • pozwala na powtarzanie części szablonu HTML dla iterowanego obiektu
    • np.:
      <ul>
        <li *ngFor="let value of person.adress"> {{value}} </li>
      </ul>
  4. Zmienne dyrektywy ngFor:
    • index - numer bieżącego obiektu
    • odd - czy index jest określony liczbą nieparzystą
    • even - czy index jest określony liczbą parzystą
    • first - czy bieżący obiekt jest pierwszym
    • last - czy bieżący obiekt jest ostatnim
  5. Dyrektywa ngSwitch:
    • używana do dodawania/usuwania elementów w drzewie dokumentów
    • przypomina instrukcję switch dostępną w innych językach programowania, takich jak C++ i PHP
    • przyłączanie odbywa się na podstawie zdefiniowanego wyrażenia i dopasowania warunków
    • np.:
      <ng-container [ngSwitch]="person.type">
        <img src="assets/images/wenus.png" *ngSwitchCase=1>
        <img src="assets/images/mars.png" *ngSwitchCase=2>
        <img src="assets/images/unnamed.png" *ngSwitchDefault>
      </ng-container>

Temat: Wprowadzenie do dyrektyw w frameworku Angular.

  1. Dyrektywy wbudowane we framework Angular:
    • umożliwiają dostęp do struktury dokumentu
    • pozwalają zmieniać zarówno wygląd, jak i zachowanie danego elementu
    • rozpoczynają się od prefiksu ng
  2. Dyrektywy w Angularze dzielimy na trzy kategorie, w zależności od ich zachowania:
    • komponenty (ang. Component Directives)
    • dyrektywy strukturalne (ang. Structural Directives) - ngIf, ngFor, ngSwitch
    • dyrektywy atrybutowe (ang. Attribute Directives) - ngClass, ngStyle, ngModel

Temat: Dwukierunkowe wiązanie danych w frameworku Angular.

  1. Wiązanie dwukierunkowe (two-way binding):
    • pozwala na przekazywanie danych pochodzących z komponentu do widoku i na odwrót
    • synchronizacja danych następuje automatycznie
    • jest połączeniem wiązania właściwości oraz wiązania zdarzeń
    • składnia zawiera parę nawiasów kwadratowych oraz okrągłych
  2. Implementacja wiązania dwukierunkowego:
    • najpierw używamy słowa ngModel umieszczonego pomiędzy nawiasami okrągłymi i kwadratowymi
    • następnie, po znaku = wpisujemy nazwę właściwości zdefiniowanej w komponencie.
    • [(ngModel)] = "właściwość zdefiniowana w komponencie"
    • np.
      <input type="text" [(ngModel)]="nazwisko">

Temat: Jednokierunkowe techniki wiązania danych w frameworku Angular.

  1. Interpolacja (string interpolation):
    • mechanizm, który umożliwia wpisanie nazwy pola klasy pomiędzy podwójnymi nawiasami klamrowymi {{}} w szablonie HTML
    • pole definiujemy w pliku .ts komponentu Angulara
    • np. <title>{{title}}</title>
  2. Wiązanie właściwości (property binding):
    • pomaga ustawić wartości dla właściwości elementów HTML lub dyrektyw
    • nazwy właściwości wpisujemy pomiędzy nawiasami kwadratowymi [] w szablonie HTML
    • wykorzystywane do przełączania funkcji przycisków, programowego ustawiania ścieżek i udostępniania wartości między komponentami
    • np. <img [src]="photoUrl">
  3. Wiązanie zdarzeń (event binding):
    • umożliwia nasłuchiwanie i reagowanie na działania użytkownika, takie jak naciśnięcia klawiszy, ruchy myszy, kliknięcia i dotknięcia
    • nazwy zdarzeń wpisujemy pomiędzy nawiasami okrągłymi () w szablonie HTML
    • np. <button (click)="onSave()">Zapisz</button>

Temat: Rozpoczęcie pracy z frameworkiem Angular.

  1. W głównym katalogu aplikacji Angular znajdują się pliki konfiguracyjne:
    • angular.json - dla Agular CLI
    • package.json - dla npm z listą pakietów użytych w aplikacji
    • tsconfig.json - dla kompilatora języka TypeScript
  2. Katalog node_modules:
    • utworzony przez Node.js
    • zawiera wszystkie wymagane moduły używane przez aplikację Angular
  3. Wszystkie elementy użyte do zbudowania aplikacji Angular (szablony, style, obrazy, usługi) i niezbędne do jej działania znajdują się w katalogu src.
  4. Plik index.html:
    • zawiera główny szablon HTML aplikacji
    • framework Angular automatycznie dodaje do tego pliku wszystkie pliki .js i .css użyte podczas jej budowania
  5. W podfolderze app znajdują się pliki:
    • app.component.html - szablon HTML
    • app.component.css - arkusz stylów CSS
    • app.component.ts - definicje głównego komponentu aplikacji
    • app.component.spec.ts - testy automatyczne aplikacji
    • app.module.ts - konfiguracja aplikacji
  6. W podfolderze assets znajdują się obrazy, wideo i dźwięki wykorzystywane przez aplikację.
  7. Komponenty frameworka Angular:
    • podstawowy budulec tworzonej aplikacji
    • zarządzają szablonem i dostarczają do niego dane

Temat: Sprawdzian z zakresu języka Typescript.

Temat: Interfejsy w języku TypeScript.

  1. Interfejs opisuje kształt obiektu przez określenie zbioru jego właściwości i metod.
  2. Utworzenie interfejsu:
    • słowo kluczowe interface
    • nazwa zaczynająca się od wielkiej litery
    • nawias klamrowy z nazwami pól wraz z typami
  3. Interfejs o za pomocą znaku dwukropka zostaje powiązany z obiektem, np.
    interface ClientInterface {
      name: string;
      age: number;
    }
    let client: ClientInterface = {
      name: "Adam",
      age: 19
    };
    console.log(client);
  4. Pola w interfejsach mogą być opcjonalne (parametr ?) lub tylko do odczytu (parametr readonly), np.
    interface ClientInterface {
      readonly name: string;
      age?: number;
    }
  5. Definicja typu parametrów funkcji:
    • słowo kluczowe type
    • nazwa zaczynająca się od małej litery
    • typy parametrów i wyniku
    • przykład:
      type ageTest = (age: number) => boolean;
      const isLegalAge: ageTest = (age) => age >= 18;
      console.log( isLegalAge(19) );

Temat: Dziedziczenie klas w języku TypeScript.

  1. Klasy mogą po sobie dziedziczyć dzięki słowu kluczowemu extends.
  2. Konstruktor wykorzystany w klasie dziedziczącej musi uwzględniać właściwości klasy rodzica, jak i właściwości klasy dziedziczącej.
  3. Aby przekazać właściwości z klasy nadrzędnej, należy użyć słowa kluczowego super i w nawiasie okrągłym umieścić właściwości.
  4. Użycie extends i super do utworzenia klasy potomnej:
    class Klient {
      imie: string;
      nazwisko: string;
      wiek: number;
      constructor(imie: string, nazwisko: string, wiek: number) {
        this.imie = imie;
        this.nazwisko = nazwisko;
        this.wiek = wiek;
      }
      powitanie() {
        console.log(`Witaj, ${this.imie} ${this.nazwisko}`);
      }
      czyPelnoletni() {
        if (this.wiek >= 18) return true;
        else return false;
      }
    }

    class DaneKlienta extends Klient {
      adres: string;
      constructor(imie: string, nazwisko: string, wiek: number, adres: string) {
        super(imie, nazwisko, wiek); this.adres = adres;
      }
    }

    let Nowak = new DaneKlienta("Tadeusz", "Nowak", 44, "Opole, Portowa 17");
    let Kowalski = new DaneKlienta("Jan", "Kowalski", 17, "Szczecin, Mickiewicza 19");
    for (let wartosc in Nowak) {
      console.log(Nowak[wartosc]);
    };
    Kowalski.powitanie();
  5. Klasa dziedzicząca ma możliwość nadpisania odziedziczonych metod.
  6. Przykład nadpisania metody:
    class DaneKlienta extends Klient {
      adres: string;
      constructor(imie: string, nazwisko: string, wiek: number, adres: string) {
        super(imie, nazwisko, wiek); this.adres = adres;
      }
      powitanie() {
        console.log(`Dzień dobry, ${this.imie} ${this.nazwisko}`);
      }
    }

    let Kowalski = new DaneKlienta("Jan", "Kowalski", 17, "Szczecin, Mickiewicza 19");
    Kowalski.powitanie();
  7. Modyfikatory dostępu:
    • public - domyślny poziom dostępu bez ograniczeń
    • protected - dostęp do elementów posiada tylko klasa, w której zostały one zdefiniowane oraz klasy dziedziczące po niej
    • private - dostęp do elementów posiada tylko klasa, w której zostały one zdefiniowane
  8. Pola wraz z metodami w klasach mogą być oznaczone jako readonly. Użycie takiego zapisu spowoduje, że przypisanie do nich wartości poza konstruktorem będzie niemożliwe.
  9. Zastosowanie parametru readonly nie wyklucza użycia modyfikatorów dostępu - można utworzyć pole, które będzie np. typu readonly protected.

Temat: Wprowadzenie do klas w języku TypeScript.

  1. Klasa:
    • wzór (szablon), na podstawie którego tworzone są obiekty
    • opisuje zestaw właściwości i metod użytych do budowy obiektu
    • obiekt utworzony na podstawie klasy nazywany jest jej instancją
  2. Tworzenie klasy:
    • rozpoczynamy od słowa kluczowego class, po którym następuje nazwa
    • nazwę klasy rozpoczynamy od dużej litery
    • w nawiasie klamrowym określamy właściwości i metody, które będą przypisane do obiektu
    • przykład:
      class Klient {
        imie: string;
        nazwisko: string;
        wiek: number;
        kontakt: string[];
      }
  3. Tworzenie obiektu na podstawie klasy:
    • tworzymy zmienną, którą łączymy z nazwą klasy z użyciem słowa kluczowego new
    • przykład:
      const Nowak = new Klient();
      Nowak.imie = "Tadeusz";
      Nowak.nazwisko = "Nowak";
      Nowak.wiek = 45;
      Nowak.kontakt = ["987654321", "tadnow@gmail.com"];
  4. Konstruktor:
    • to specjalna funkcja umieszczona wewnątrz klasy, wykorzystywana w momencie tworzenia nowego obiektu
    • definiujemy za pomocą słowa kluczowego constructor, po którym w nawiasach okrągłych umieszczamy nazwy właściwości wraz z określeniem typu
    • dzięki użyciu słowa kluczowego this przekazane argumenty w momencie wywołania klasy stają się jej właściwościami
  5. Definiowanie klasy z wykorzystaniem konstruktora:
    class Auto {
      marka: string;
      model: string;
      wyswietl() {
        console.log(`Marka i model samochodu: ${this.marka} ${this.model}`)
      }
      constructor(marka: string, model: string) {
        this.marka = marka;
        this.model = model;
      }
    }
    const Samochod = new Auto("Fiat", "Punto");
    Samochod.wyswietl();
  6. Definiowanie klasy z wykorzystaniem słowa kluczowego public:
    class Auto {
      wyswietl() {
        console.log(`Marka i model samochodu: ${this.marka} ${this.model}`)
      }
      constructor(public marka: string, public model: string) { }
    }
    let Samochod = new Auto("Audi", "A4");
    Samochod.wyswietl();

Temat: Wprowadzenie do obiektów w języku TypeScript.

  1. Obiekt - zbiór zmiennych i funkcji.
  2. Zmienna, która jest częścią obiektu, jest jego właściwością (ang. property).
  3. Funkcja, która jest częścią obiektu, jest jego metodą (ang. method).
  4. Utworzenie obiektu - notacja literału:
    const hotel = {
      nazwa: "Pod topolą",
      standard_pokoi: ["basie", "premium", "vip"],
      liczba_pokoi: 30,
      rezerwacja: 10,
      dostepnosc: function() {
        return this.liczba_pokoi - this.rezerwacja
      }
    }
  5. Aby uzyskać dostęp do właściwości lub metody po nazwie obiektu umieszczamy kropkę, a następnie podajemy nazwę klucza, np.
    hotel.nazwa;
    hotel.dostepnosc();
  6. Alternatywnym sposobem dostępu do właściwości lub metody jest użycie składni z użyciem nawiasu kwadratowego, np.
    console.log(
    `Hotel ${hotel['nazwa']},
      posiada ${hotel['liczba_pokoi']} pokoi
      o standardach: ${hotel['standard_pokoi '][0]}, ${hotel['standard_ pokoi'][l]}, ${hotel['standard_pokoi'][2]}
      a liczba wolnych pokoi wynosi ${hotel['dostepnosc']()}
    `);
  7. Słowo kluczowe this pozwola odwołać się do właściwości obiektów.
  8. Obiekty w tablicy:
    const osoby = [
      { imie: "Adam", wiek: 41 },
      { imie: "Ewa", wiek: 39 },
      { imie: "Maria", wiek: 12 }
    ];
    • aby wyświetlić daną wartość, rozpoczynamy od nazwy tablicy
    • następnie w nawiasie kwadratowym indeks obiektu
    • na końcu kropka połączona z nazwą właściwości przechowującej wartość
    • np. osoby[1].wiek dla wieku Ewy
  9. Do wyświetlenia wszystkich kluczy i wartości obiektu możemy posłużyć się pętlą for in, np.
    console.log("Para klucz-wartość:");
    for (let klucz in hotel) {
      console.log("Klucz: ", klucz);
      console.log("Wartość: ", hotel[klucz]);
    }
  10. Listę kluczy obiektu uzyskamy również za pomocą funkcji Object.keys(nazwa_obiektu).
  11. Typowanie obiektu:
    let hotel: { nazwa: string, standard_pokoi: string[], liczba_pokoi: number, rezerwacja: number, dostepnosc: () => number; }
      = {
      nazwa: "Pod topolą",
      standard_pokoi: ["basic", "premium", "vip"],
      liczba_pokoi: 30,
      rezerwacja: 10,
      dostepnosc: function () { return this.liczba_pokoi - this.rezerwacja },
    ];
    • aby samodzielnie określić typ, należy po nazwie obiektu umieścić znak dwukropka, a po nim w nawiasie klamrowym podać dla każdego elementu obiektu jego typ

Temat: Zasięg zmiennych i zwrot wielu wartości z funkcji w języku TypeScript.

  1. Zasięg zmiennych:
    • zadeklarowane wewnątrz funkcji mogą zostać użyte jedynie w tej funkcji (zmienne lokalne)
    • zadeklarowane poza funkcjami mogą zostać użyte w dowolnym miejscu (zmienne globalne)
  2. Zwrot wielu wartości z funkcji jest realizowany przez wykorzystanie tablicy.

Temat: Funkcje anonimowe i strzałkowe w języku TypeScript.

  1. Funkcje anonimowe:
    • nie mają przypisanej nazwy
    • są często argumentami przekazywanymi innym funkcjom
    • najczęściej są używane do operacji, które nie powtarzają się w wielu miejscach, przez co nie chcemy definiować osobnej funkcji
    • przykład:
      const bazaImion: string[] = ["Jan", "Paweł", "Mariusz"];
      console.log(
        bazaImion.map(
          function (imie: string): string {
            return `Witaj , ${imie}`;
          }
        )
      );
  2. Funkcje strzałkowe:
    • zamiast słowa function stosowany jest operator =>, tzw. gruba strzałka (ang. fat arrow)
    • jeżeli funkcja ma tylko jedną instrukcję, można pominąć nawiasy klamrowe i słowo kluczowe return
    • jeżeli parametrem funkcji jest typowana tablica definicja typu parametru może zostać pominięta
    • przykład:
      const bazaImion: string[] = ["Jan", "Paweł", "Mariusz"];
      console.log(
        bazaImion.map(
          imie => `Witaj, ${imie}`
        )
      );

Temat: Wprowadzenie do funkcji w języku TypeScript.

  1. Funkcja jest zbiorem instrukcji, które wykonują określone zadanie. Pozwala programiście podzielić kod na mniejsze fragmenty i w razie potrzeby odwoływać się do tego kodu.
  2. Deklaracja funkcji składa się z:
    • słowa kluczowego function
    • nazwy funkcji
    • listy parametrów wraz z określeniem ich typu, umieszczonych w nawiasach okrągłych i oddzielonych przecinkami
    • instrukcji, które zostaną wykonane po wywołaniu funkcji, umieszczonej w nawiasach klamrowych
  3. Zmienna zadeklarowana wewnątrz funkcji ma zasięg lokalny (może zostać użyta jedynie w tej funkcji).
  4. W celu zwrócenia wartości z funkcji stosujemy słowo kluczowe return.
  5. W celu zwrócenia wielu wartości z funkcji należy użyć tablicy.
  6. Przykład:
    • deklaracja funkcji:
      function powitanie(tresc: string): string {
        return `Witaj, ${tresc}`;
      }
    • wywołanie funkcji:
      console.log( powitanie('Adam') );
  7. TypeScript nie pozwala na zdefiniowanie funkcji o już istniejącej nazwie, a także nie obsługuje tzw. przeciążania funkcji. Mechanizm dostępny w innych językach programowania umożliwia tworzenie wielu funkcji o tej samej nazwie, lecz różnej liczbie parametrów. Funkcja jest rozpoznawana po liczbie przekazywanych argumentów, jak również ich typie.
  8. TypeScript pozwala deklarować funkcje za pomocą wyrażenia, np.
    const suma = function (a: number, b: number): number {
      return a + b;
    }
  9. Wartość domyślna parametru funkcji (przypisana po znaku równości), np.
    const suma = function (a: number, b: number = 10): number {
      return a + b;
    }
  10. Parametr opcjonalny (znak zapytania umieszczony po nazwie zmiennej), np.
    function powitanie(imie: string, id?: number): string {
      return `Witaj, ${imie}, ${id}`;
    }
    console.log( powitanie("Adam") );
    console.log( powitanie("Adam", 123) );
  11. Funkcja o nieznanej liczbie parametrów:
    • parametrem funkcji jest tablica (parametr resztowy)
    • nazwa tablicy musi być poprzedzona trzema kropkami
    • dostępne są metody tablicowe
    • przykład:
      function powitanie(...imiona: string[]): string {
        return `Witajcie, ${imiona.join(", ")}`;
      }
      console.log( powitanie("Cezary", "Tadeusz", "Marcin") );

Temat: Tablice w języku TypeScript.

  1. Definiowanie tablic w języku TypeScript:
    • let imiona: string[] = ["Adam", "Bogdan", "Cezary"];
    • let imiona: Array<string> = ["Adam", "Bogdan", "Cezary"];
  2. Wyświetlanie wszystkich elementów tablicy:
    • z wykorzystaniem pętli for ... of:
      for(let element of imiona) {
        console.log(element);
      }
    • z wykorzystaniem pętli forEach:
      imiona.forEach(element => {
        console.log(element);
      });
  3. Wybrane metody tablicowe:
    • unshift(element) - wstawia nowy element na początku tablicy
    • shift() - usuwa i zwraca pierwszy element w tablicy
    • push(element) - wstawia nowy element na końcu tablicy
    • pop() - usuwa i zwraca ostatni element w tablicy
    • slice(start, stop) - zwraca fragment tablicy; start to indeks początku, stop zaś to indeks końca nie uwzględniony w wynikach
    • splice(indeks, liczba) - usuwa podaną liczbę elementów od wskazanego indeksu
    • concat(tablica) - zwraca nową tablicę, która powstaje w wyniku połączenia tablicy z tą podaną w argumencie; można łączyć ze sobą kilka tablic
    • join(separator) - zwraca ciąg tekstowy wszystkich wartości przechowywanych w tablicy; poszczególne elementy są od siebie oddzielone separatorem
    • sort() - zwraca tablicę, której elementy są posortowane w kolejności rosnącej
    • reverse() - zwraca tablicę, której elementy są posortowane w kolejności malejącej
  4. Aby sprawdzić, czy zmienna jest tablicą należy użyć metody Array.isArray(zmienna).
  5. Aby sprawdzić, ile elementów zawiera tablica należy użyć właściwości zmienna.length.
  6. Aby szybko łączyć tablice można użyć operatora rozwinięcia (ang. spread operator)
    let tablica3 = [...tablica1, ...tablica2, ...tablicaN].
  7. Krotka to tablica o stałej wielkości, której poszczególne elementy mogą być różnych typów, np.
    let krotka: [string, number] = ["Jan Kowalski", 40];
    console.log(`Nazywam się ${krotka[0]} i mam ${krotka[1]} lat.`);
  8. Wyliczenie (enumeracja):
    • pozwala nadawać zbiorom wartości bardziej przyjazne nazwy
    • definiujemy za pomocą słowa kluczowego enum, po którym określamy nazwę wyliczenia
    • w nawiasie klamrowym znajdują się wartości, oddzielone przecinkami
    • przykład:
      enum kolory {
        czerwony, zielony, niebieski, żółty
      } let niebieskiWartosc = kolory.niebieski;
      let niebieski = kolory[2];
      console.log(`Mój ulubiony kolor to: ${niebieski}, a jego wartość to ${niebieskiWartosc}.`);

Temat: Typy wbudowane w języku TypeScript.

  1. Typy wbudowane w języku TypeScript:
    • tekstowy - string, np. let tekst: string = "Witaj świecie!";
    • liczbowy - number, np. let liczba: number = 123.45;
    • logiczny - boolean, np. let prawda: boolean = true;
    • dowolny - any, np. let cokolwiek: any;
  2. Typ string:
    • dane tekstowe umieszczone między cudzysłowami " " lub apostrofami ' '
    • mogą być rozciągnięte na wiele linii przy pomocy znaku ` ` (backtick)
    • wykorzystanie znaków backtick pozwala na użycie zmiennych wewnątrz napisów, np. `Tekst ${zmienna}`
    • w nawiasach klamrowych można także stosować wyrażenia np. operację dodawania
  3. Typ number:
    • wartości liczbowe umieszczamy po znaku = poprzedzonym nazwą zmiennej
    • dostępne formaty liczb: dziesiętny, binarny, oktalny (ósemkowy), heksadecymalny (szesnastkowy), np.
      let decimal: number = 6; // 6
      let binary: number = 0b11101; // 29
      let octal: number = 0o361; // 241
      let hex: number = 0xfff; // 4095
  4. Typ boolean to wartości logiczne true lub false umieszczone po znaku = poprzedzonym nazwą zmiennej.
  5. Typ any umożliwia dynamiczne typowanie zmiennych, stałych lub funkcji tak, jak w JavaScripcie.
  6. Łączenie (unia) typów: let wspolna: string | number;.
  7. Definiowanie zbiorów wartości: let ocena: 1 | 2 | 3 | 4 | 5 | 6;.

Temat: Przygotowanie środowiska do pracy z językiem TypeScript.

  1. Rozpoczęcie pracy z językiem TypeScript:
    • instalacja środowiska NodeJS (sprawdzenie instalacji: node -v)
    • zainicjowanie projektu NodeJS: npm init -y (powstaje plik konfiguracyjny projektu package.json)
    • instalacja modułu NodeJS obsługującego język TypeScript: npm install typescript (powstaje plik package-lock.json zawierający informację o użytej wersji języka)
    • zainicjowanie konfiguracji kompilatora języka TypeScript: npx tsc -init (powstaje plik tsconfig.json)
  2. Kompilacja kodu TS do JS: npx tsc nazwa_pliku.ts (powstaje plik JS o tej samej nazwie).
  3. Sprawdzanie poprawność otrzymanego kodu JS: node nazwa_pliku.js.
  4. Automatyczna kompilacja kodu TS: npx tsc --watch.
  5. Automatyczne uruchomienie kodu JS: npx nodemon nazwa_pliku.js.

Linki

Temat: Wprowadzenie do języka TypeScript.

  1. TypeScript:
    • język programowania będący nadzbiorem języka JavaScript
    • obowiązuje w nim składnia języka JavaScript, ale rozbudowana o dodatkowe elementy
    • stworzony przez firmę Microsoft w 2012 roku
    • umożliwia opcjonalne statyczne typowanie
    • pozwala na programowanie zorientowane obiektowo oparte na klasach
    • aplikacje w nim napisane transpilują się bezpośrednio do języka JavaScript
    • jest językiem programowania open source i jest dostępny na platformie GitHub
    • zachowuje się jak inne języki kompilowane
    • błędy są sygnalizowane na etapie pisania kodu i transpilacji a nie w przeglądarce

Linki

Temat: Przygotowanie środowiska do pracy z frameworkiem Angular.

  1. Rozpoczęcie pracy z frameworkiem Angular:
    • instalacja środowiska NodeJS (sprawdzenie instalacji: node -v)
    • instalacja Angular CLI: npm install -g @angular/cli
  2. Wiersz poleceń (ang. command-line interface, CLI) - interfejs programu komputerowego w powłoce systemu, umożliwiający interaktywny dostęp do funkcji lub usług systemu operacyjnego.
  3. Generowanie projektu Angular: ng new nazwa_projektu.
  4. Po wygenerowaniu projektu jego folder należy otworzyć bezpośrednio w VS Code.
  5. Uruchomienie projektu Angular: ng serve -o (serwer aplikacji w trybie deweloperskim).

Linki

Temat: Wprowadzenie do frameworka Angular.

  1. Angular:
    • jeden z najpopularniejszych frameworków JavaScript
    • stworzony przez Google w 2016 roku jako następca biblioteki AngularJS
    • bazuje na języku TypeScript
    • w podstawowej wersji jest to biblioteka komponentów do tworzenia interfejsów użytkownika
    • posiada wiele rozszerzeń umożliwiających pisanie aplikacji zarówno po stronie użytkownika, jak i serwera
    • pozwala stworzyć aplikację webową
    • należy do grupy frameworków SPA (ang. Single Page Application)
    • główne okno aplikacji ładowane jest tylko raz, a odświeżane są jedynie wymagane fragmenty
    • nie jest wymagane przeładowanie całej strony, gdy następuje zmiana widoku, np. podczas przejścia pomiędzy podstronami

Linki

Temat: Sprawdzian z zakresu frameworka Bootstrap i biblioteki jQuery.

Linki

Temat: Powtórzenie wiadomości na temat jQuery i Bootstrap.

Linki

Temat: Obsługa metod AJAX w jQuery.

  1. AJAX - Asynchroniczny JavaScript i XML (ang. Asynchronous JavaScript and XML) – technika tworzenia aplikacji internetowych, w których interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny.
  2. JSON - (ang. JavaScript Object Notation):
    • lekki tekstowy format wymiany danych komputerowych
    • bazuje na podzbiorze języka JavaScript
    • jest niezależny od konkretnego języka
  3. API - (ang. application programming interface) - zbiór reguł ściśle opisujący, w jaki sposób programy lub podprogramy komunikują się ze sobą.
  4. Najczęściej wykorzystywane metody AJAX w jQuery:
    • .ajax() - wykonuje asynchroniczne żądanie HTTP (AJAX)
    • .get() - ładuje dane z serwera za pomocą żądania HTTP GET
    • .post() - wysyła dane do serwera za pomocą żądania HTTP POST
  5. Właściwości metody .ajax(url [, settings ]):
    • url - adres URL, na który wysyłane jest żądanie
    • settings - zestaw par klucz/wartość, które konfigurują żądanie AJAX; wszystkie ustawienia są opcjonalne
  6. Właściwości metod .get(url [, data ] [, success ] [, dataType ])
    i .post(url [, data ] [, success ] [, dataType ]):
    • url - adres URL, na który wysyłane jest żądanie
    • data - obiekt lub ciąg znaków wysyłany do serwera wraz z żądaniem
    • success - funkcja wywołania zwrotnego, która jest wykonywana, jeśli żądanie się powiedzie
    • dataType - typ danych oczekiwanych z serwera

Film - API

Film - zadanie z kursami wymiany walut

Linki

Temat: Obsługa formularzy w jQuery.

  1. Najczęściej wykorzystywane selektory:
    • :button - elementy <button> i <input> z atrybutem type, który ma wartość button
    • :checkbox - element <input>, którego atrybut type ma wartość checkbox
    • :disabled/:enabled - elementy, które zostały wyłączone/włączone
    • :input - elementy <button>, <input>, <select> oraz <textarea>
    • :password - element <input>, którego atrybut type ma wartość password
    • :radio - element <input>, którego atrybut type ma wartość radio
    • :submit - element <input> bądź <button>, którego atrybut type ma wartość submit
    • :text - element <input>, którego atrybut type ma wartość text
  2. Metody wykorzystywane w pracy z formularzami:
    • .val() - pobiera bieżącą wartość pierwszego elementu w zestawie dopasowanych elementów lub ustawia wartość każdego dopasowanego elementu
    • .is() - sprawdza bieżący dopasowany zestaw elementów względem selektora, elementu lub obiektu jQuery i zwraca wartość true, jeśli przynajmniej jeden z tych elementów pasuje do podanych argumentów

Linki

Temat: Animacje w jQuery.

  1. Do tworzenia niestandardowych animacji zestawu właściwości CSS w jQuery używamy metody .animate().
  2. W jQuery animowane mogą być wartości stylu wyrażane w postaci liczby, np. width, padding, font-size.
  3. Właściwości metody .animate(properties [, duration ] [, easing ] [, complete ]):
    • properties - właściwości CSS (jedna lub kilka)
    • duration - czas trwania w milisekundach lub za pomocą słów "fast" lub "slow"
    • easing - sposób przebiegu animacji w czasie: swing (zwiększenie prędkości w środku i zminiejsze na początku i na końcu) lub linear (stała prędkość od początku do końca)
    • complete - funkcja wywołania zwrotnego, gdy animacja się zakończy
  4. W przypadku właściwości CSS, których nazwy składają się z wielu słów oddzielonych od siebie znakiem łącznika, np. border-radius, w połączeniu z metodą .animate() używamy notacji camelCase - pierwsze słowo rozpoczynamy od małej litery, a każde następne od dużej, np. borderRadius.
  5. Jeżeli jednocześnie są animowane dwie lub więcej właściwości CSS, muszą one znajdować się w nawiasie klamrowym i być oddzielone od siebie znakiem przecinka.
  6. Użycie zapisu += doda odpowiednią wielkość do aktualnej, a -= odejmie.

Linki

Kryteria oceny i problemy w projektach Bootstrap

Kryteria

Problemy

1. Terminowość wysyłania prac.
2. Bałagan w plikach
- brak podziału na katalogi css, js, img
- dołącznie niepotrzebnych plików
- brak plików JS dołączonych w HTMLu
3. Nazwa pliku - index.html a nie dowolna.
4. Wersja Bootstrap niezgodna z instrukcją - należało użyć 5.3, jak na lekcjach.
5. Bałagan w kodzie:
- miejsca dołączania i wywoływania skryptów - ma to znaczenie
- używanie bibliotek tam, gdzie nie jest to potrzebne - jQuery, żeby otworzyć informację o cookies
- pozostawianie komentarzy w kodzie
- pozostawianie pustych linii
- wprowadzić formatowanie kodu z wykorzystaniem wtyczki Prettier
6. Brak wykorzystania siatki Bootstrap:
- brak wierszy i kolumn
- kolumny bez breakpointów
7. Menu:
- nieaktywne linki lub ich brak
- linki zewnętrzne bez target="_blank"
8. Slider:
- class="img-fluid", aby obrazki skalowały się na szerokość ekranu
- takie same wymiary i proporcje wszystkich obrazków
9. Ciasteczka:
- niedziałające skrypty otwierające dla Modala/Offcanvas
10. Estetyka projektów - mniej zwykle daje lepsze efekty
11. Treść - brak lub szczątkowa treść w części projektów.
12. Filmy - autoplay razem z muted.
13. Przykłady skryptów:
- otwieranie modala/offcanvasa
- otwieranie modala/offcanvasa z obsługą cookies
- otwieranie modala/offcanvasa z obsługą localstorage
- otwieranie modala/offcanvasa z obsługą sessionstorage
- sticky menu - przewijanie treści do miejsca

Temat: Efekty w jQuery.

  1. Efekty podstawowe:
    • .hide() - ukrywa dopasowane elementy
    • .show() - wyświetla dopasowane elementy
    • .toggle() - wyświetla lub ukrywa dopasowane elementy
  2. Efekty przeźroczystości:
    • .fadeIn() - zmienia widoczność dopasowanych elementów od przeźroczystości do pełnej widoczności
    • .fadeOut() - zmienia widoczność dopasowanych elementów od pełnej widoczności do przeźroczystości
    • .fadeTo() - ustawia przezroczystość dopasowanych elementów
    • .fadeToggle() - wyświetla lub ukrywa dopasowane elementy, animując ich przeźroczystość
  3. Efekty slajdów:
    • .slideDown() - wyświetla dopasowane elementy ruchem przesuwnym
    • .slideToggle() - wyświetla lub ukrywa dopasowane elementy, animując ich ruch przesuwny
    • .slideUp() - ukrywa dopasowane elementy ruchem przesuwnym

Linki

Temat: Obiekt event w jQuery.

  1. Obiekt event w jQuery dostarcza informacji o zainstniałym zdarzeniu. Użyta w wywołaniu funkcja pozwala odwołać się do obiektu zdarzenia.
  2. Właściwości obiektu event:
    • .currentTarget - bieżący element DOM w fazie propagacji zdarzenia
    • .data - opcjonalny obiekt danych przekazywany do metody zdarzenia, gdy jest powiązany bieżący skrypt obsługi zdarzenia
    • .delegateTarget - element, do którego dołączono aktualnie wywoływaną procedurę obsługi zdarzeń jQuery
    • .metaKey - wskazuje, czy podczas uruchomienia zdarzenia naciśnięto klawisz Meta; klawisz Meta to Windows na klawiaturze Windows oraz Command na klawiaturach Macintosh
    • .namespace - przestrzeń nazw określona, gdy zdarzenie zostało wyzwolone
    • .pageX - pozycja myszy względem lewej krawędzi dokumentu
    • .pageY - pozycja myszy względem górnej krawędzi dokumentu
    • .relatedTarget - drugi element DOM biorący udział w zdarzeniu, jeśli istnieje
    • .result - ostatnia wartość zwrócona przez procedurę obsługi zdarzenia, która została wywołana przez to zdarzenie, chyba że wartość była niezdefiniowana.
    • .target - element DOM, który zainicjował zdarzenie
    • .timeStamp - różnica w milisekundach między czasem utworzenia zdarzenia przez przeglądarkę a 1 stycznia 1970 r.
    • .type - opisuje typ zdarzenia, np. keyup
    • .which - wskazuje klawisz lub przycisk, który został naciśnięty dla zdarzeń klawiatury lub myszy
  3. Metody obiektu event:
    • .isDefaultPrevented() - zwraca informację, czy funkcja event.preventDefault() została kiedykolwiek wywołana na tym obiekcie zdarzenia
    • .isImmediatePropagationStopped() - zwraca informację, czy funkcja event.stopImmediatePropagation() została kiedykolwiek wywołana dla tego obiektu zdarzenia
    • .isPropagationStopped() - zwraca informację, czy funkcja event.stopPropagation() została kiedykolwiek wywołana dla tego obiektu zdarzenia
    • .preventDefault() - jeżeli ta metoda zostanie wywołana, domyślna akcja zdarzenia nie zostanie wywołana
    • .stopImmediatePropagation() - uniemożliwia wykonanie pozostałych procedur obsługi i zapobiega rozprzestrzenianiu się zdarzenia w drzewie DOM
    • .stopPropagation() - zapobiega rozprzestrzenianiu się zdarzenia w drzewie DOM, uniemożliwiając powiadomienie jakichkolwiek nadrzędnych procedur obsługi o zdarzeniu

Linki

Temat: Zdarzenia klawiatury i myszy w jQuery.

  1. Zdarzenia klawiatury w jQuery:
    • .keydown() - wiąże obsługę zdarzenia keydown lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy naciśniemy klawisz na klawiaturze, obsługuje również klawisze niedrukowalne, jak Shift, Esc, Delete
    • .keypress() - wiąże obsługę zdarzenia keypress lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy naciśniemy klawisz na klawiaturze, nie obsługuje klawiszy niedrukowalnych, jak Shift, Esc, Delete
    • .keyup() - wiąże obsługę zdarzenia keyup lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy zwolnimy klawisz na klawiaturze
  2. Zdarzenia myszy w jQuery:
    • .click() - wiąże obsługę zdarzenia click lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy kliknięmy przycisk myszki
    • .mouseover() - wiąże obsługę zdarzenia mouseover lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy umieścimy wskaźnik myszy w obrębie wybranego elementu
    • .mouseout() - wiąże obsługę zdarzenia mouseout lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy usuniemy wskaźnik myszy z wybranego elementu

Linki

Temat: Zdarzenia elementów interfejsu i przeglądarki w jQuery.

  1. Zdarzenia elementów interfejsu w jQuery:
    • .focus() - wiąże obsługę zdarzenia focus lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy wybierzemy element za pomocą myszki lub klawisza TAB
    • .change() - wiąże obsługę zdarzenia change lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy edytujemy element
    • .blur() - wiąże obsługę zdarzenia blur lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy opuszczamy aktywny element
  2. Zdarzenia przeglądarki w jQuery:
    • .scroll() - wiąże obsługę zdarzenia scroll lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy użytkownik przewija zawartość okna przeglądarki
    • .resize() - wiąże obsługę zdarzenia resize lub wywołuje to zdarzenie na elemencie; zdarzenie występuje, gdy użytkownik zmienia rozmiar okna przeglądarki

Linki

Temat: Obsługa zdarzeń w jQuery.

  1. W jQuery możemy łatwo podpiąć procedurę obsługi zdarzeń do wybranych elementów. Kiedy następuje określone zdarzenie, zostaje wykonana przypisana do niego funkcja.
  2. Aby nasłuchiwać zdarzenie do pobranego lub utworzonego elementu, używamy metody będącej nazwą zdarzenia lub używamy metody .on(), do której przekazujemy procedurę obsługi zdarzeń.
    Przykład:
    $('p').click( function() {
      $(this).remove();
    });
     
    $('p').on('click', function() {
      $(this).remove();
    });
  3. Zdarzenia w jQuery możemy podzielić na związane z:
    • elementami interfejsu
    • klawiaturą
    • myszą
    • użyciem formularza
    • przeglądarką

Linki

Temat: Modyfikowanie i usuwanie elementów w jQuery.

  1. Metody wykorzystywane do modyfikowania i usuwania elementów elementów w jQuery:
    • .attr() - pobiera wartość atrybutu dla pierwszego elementu w zestawie dopasowanych elementów lub ustawia jeden lub więcej atrybutów dla każdego dopasowanego elementu
    • .removeAttr() - usuwa atrybut z każdego elementu w zestawie dopasowanych elementów
    • .prop() - pobiera wartość właściwości pierwszego elementu w zestawie dopasowanych elementów lub ustaw jedną lub więcej właściwości dla każdego dopasowanego elementu
    • .removeProp() - usuwa właściwość z zestawu dopasowanych elementów
    • .css() - pobiera wartość właściwości stylu dla pierwszego elementu w zestawie dopasowanych elementów lub ustawia jedną lub więcej właściwości CSS dla każdego dopasowanego elementu
    • .addClass() - dodaje określone klasy do każdego elementu w zestawie dopasowanych elementów
    • .hasClass() - sprawdza, czy któryś z dopasowanych elementów ma przypisaną daną klasę
    • .removeClass() - usuwa jedną lub wiele klas lub wszystkie klasy z każdego elementu w zestawie dopasowanych elementów
    • .toggleClass() - dodaje lub usuwa jedną lub wiele klas z każdego elementu w zestawie dopasowanych elementów, w zależności od obecności klasy lub wartości argumentu stanu
    • .replaceWith() - zastąpuje każdy element w zestawie dopasowanych elementów dostarczoną nową treścią i zwraca zestaw elementów, który został usunięty
    • .replaceAll() - zastąpuje każdy element docelowy zestawem dopasowanych elementów
    • .remove() - usuwa zestaw dopasowanych elementów z modelu DOM
    • .empty() - wsuwa wewnętrzny kod HTML wszystkich dopasowanych elementów z modelu DOM
    • .each() - pobiera wiele elementów i na każdym z nich po kolei wykonuje wybrane operacje

Linki

Temat: Wstawianie elementów w jQuery.

  1. Metody wykorzystywane do wstawiania elementów w jQuery:
    • .append() - wstawia treść na końcu każdego elementu w zestawie dopasowanych elementów
    • .appendTo() - wstawia każdy element w zestawie dopasowanych elementów na koniec elementu docelowego
    • .prepend() - wstawia treść na początek każdego elementu w zestawie dopasowanych elementów
    • .prependTo() - wstawia każdy element w zestawie dopasowanych elementów na początek elementu docelowego
    • .after() - wstawia treść po każdym elemencie w zestawie pasujących elementów
    • .before() - wstawia treść przed każdym elementem w zestawie dopasowanych elementów
    • .insertAfter() - wstawia każdy element w zestawie dopasowanych elementów po elemencie docelowym
    • .insertBefore() - wstawia każdy element w zestawie dopasowanych elementów przed elementem docelowym

Linki

Temat: Pobieranie zawartości elementów w jQuery.

  1. Metoda .html():
    • pobiera lub ustawia kod HTML elementu
    • przykłady:
      const $lista_ul = $('ul').html();
      const $lista_li = $('li').html();
  2. Metoda .text():
    • pobiera lub ustawia tekst elementu
    • przykład:
      let $lista_ul = $('ul').text();
      let $lista_li = $('li').text();
  3. Połączenie metod .html() oraz /code>.text():
    • przykład:
      $(function () {
      let $lista_ul = $('ul').html();
      $('ol').append($lista_ul);

      $lista_ul = $('ul').text();
      $('p').append($lista_ul);
      });

Linki

Temat: Wyszukiwanie elementów w jQuery.

  1. jQuery umożliwia "chwytanie" elementów za pomocą selektorów w stylu CSS.
  2. Z jQuery można korzystać, używając pełnej nazwy funkcji, jQuery(), jak również formy skróconej, $().
  3. Przykłady "chwytania" elementów HTML za pomocą jQuery:
    • $('li') - elementy listy
    • $('#menu') - element o id "menu"
    • $('.active') - elementy posiadające klasę "active"
    • $('[href="#"]') - elementy posiadajace atrybut href="#"
  4. Metody pomocne w chwytaniu wybranych elementów strony:
    • .first() - pierwszy element z wybranych
    • .last() - ostatni element z wybranych
    • .odd() - nieparzyste elementy zbioru
    • .even() - parzyste elementy zbioru
    • .eq(nr) - elementy o podanym numerze indeksu
    • .lt(nr) - elementy o numerze indeksu mniejszym niż podany
    • .gt(nr) - elementy o numerze indeksu większym niż podany
    • .not(selektor) - wszystkie elementy z wyjątkiem wskazanego
    • .find(selektor) - wyszukuje wewnątrz danego elementu inny element określony przez selektor
    • .filter(fn*) - filtruje listę elementów przez zadane kryterium
  5. Przy użyciu np. selektora .eq() zostaje pobrana cała kolekcja elementów, a to, który zostanie zastosowany, określa zdefiniowany indeks. Użycie np. kodu $('button').eq(1) sprawi, że z kolekcji wszystkich przycisków wybrany zostanie drugi.

Linki

Temat: Wprowadzenie do biblioteki jQuery.

  1. jQuery:
    • biblioteka JavaScriptu
    • udostępniona w 2006 roku
    • powstała w celu opisanym w logo: write less, do more
    • pozwala tworzyć nowoczesne i funkcjonalne strony
    • posiada bardziej intuicyjny wybór elementów niż w JS
    • umożliwia "chwytanie" elementów za pomocą selektorów w stylu CSS
    • w łatwiejszy sposób pozwala na podmianę, ukrycie, usunięcie oraz nadanie klasy do elementu
    • pozwala na uaktualnianie strony o nowe efekty bez przebudowy jej kodu
    • automatycznie dba o obsługę funkcjonalności i sprawia, że będą działać nawet w starszych przeglądarkach, dzięki czemu programista może skupić się na mechanice strony zamiast obsłudze zdarzeń
  2. Podłączenie jQuery do strony:
    • przez pobranie wersji skompresowanej lub nieskompresowanej
    • lokalnie lub poprzez serwer CDN
    • przez podanie ścieżki do pliku, która jest umieszczona pomiędzy znacznikami w sekcji head lub przed zamknięciem body

Film - jQuery

Linki

Temat: Powtórzenie wiadomości na temat języka JavaScript.

Linki

Temat: Komponenty w frameworku Bootstrap.

Notatka do zeszytu

  1. Framework Bootstrap 5 dostarcza nam wiele gotowych komponentów. Najważniejsze z nich to:
    • Navbar - menu główne strony
    • Offcanvas - rozwijane menu boczne
    • Breadcrumb - "okruszki chleba", nawigacja pomocnicza w kategoriach i podkategoriach
    • Carousel - slider zdjęć i/lub tekstów
    • Navs and tabs - zakładki wraz z menu pozwalającym przełączać się pomiędzy nimi
    • Modal - okno modalne, np. do wyświetlenia informacji o cookies lub formularza newslettera
    • Accordion - mechanizm przydatny przy tworzeniu sekcji najczęściej zadawanych pytań
    • Alerts - powiadomienia służące do przekazania komunikatu o powodzeniu, ostrzeżeniu, błędzie lub informacji pomocniczej
    • Pagination - paginacja, podział na podstrony

Film - Komponenty w frameworku Bootstrap

Linki

Temat: Obsługa formularzy w frameworku Bootstrap.

Notatka do zeszytu

  1. Framework Bootstrap wpiera tworzenie formularzy poprzez:
    • poprawienie wyglądu w porównaniu do domyślych ustawień przeglądarek internetowych
    • ujednolicenie wyglądu pomiędzy różnymi przeglądarkami
    • wprowadzenie trzech rozmiarów: small, defalut i large
    • pływające etykiety
    • mechanizm walidacji

Linki

Temat: Siatka Bootstrapa.

Notatka do zeszytu

  1. Siatka Bootstrapa:
    • składa się maksymalnie z 12 kolumn rozdzielonych odstępami
    • dzieli ekran na dwanaście równych części niezależnie od szerokości użytego ekranu
    • pozwala tworzyć kolumny, których szerokość może wahać się od 1/12 do 12/12 ekranu
  2. Bootstrap 5 definiuje 6 szerokości ekranu, przy których może nastąpić zmiana układu siatki:
    • extra small, do 575 px – klasa ".col-"
    • small, od 576 px do 767 px – klasa ".col-sm-"
    • medium, od 768 px do 991 px –klasa ".col-md-"
    • large, od 992 px do 1199 px –klasa ".col-lg-"
    • extra large, od 1200 px do 1399 px –klasa ".col-xl-"
    • extra extra large –od 1400 px –klasa ".col-xxl-"

Film - Siatka Bootstrapa

Linki

Temat: Wprowadzenie do frameworka Bootstrap.

Notatka do zeszytu

  1. Framework Bootstrap:
    • jeden z najpopularniejszych gotowych szkieletów strony internetowej
    • ułatwia tworzenie wizualnej części strony internetowej
    • umożliwia szybkie budowanie responsywnych stron
    • jest darmowy, licencja pozwalana na jego używanie w komercyjnych projektach
    • daje możliwość stylizowania z zastosowaniem gotowych klas
    • obsługuje wtyczki (podobnie jak jQuery)
    • stworzony przez programistów Twittera Marka Otto i Jacoba Thorntona
    • udostepniony w 2011 r.
    • posiada wiele przydatnych poradników
  2. Responsywne projektowanie stron internetowych (ang. responsive web design, RWD) – technika projektowania strony WWW, aby jej układ dostosowywał się samoczynnie do rozmiaru okna przeglądarki, na której jest wyświetlany. Strona utworzona tą techniką jest uniwersalna: wyświetla się dobrze na dużych ekranach oraz na smartfonach i tabletach: zmienia swój rozmiar oraz układ, obsługuje różne rozdzielczości w zależności od przekątnej ekranu, na jakim strona internetowa ma być wyświetlona.

Film - Bootstrap

Do pobrania

Temat: Frameworki i biblioteki - różnice i podobieństwa.

Notatka do zeszytu

  1. Framework:
    • stanowi szkielet budowy aplikacji
    • definiuje on działanie każdego elementu
    • w jego skład wchodzą biblioteki i komponenty
    • nie zawsze korzystamy z wszystkich jego elementów
    • nie zawsze jest wydajny
  2. Biblioteka:
    • wykonuje określone działanie
    • jest bazą / podstawą rozbudowywaną przez programistę
    • często jest samodzielnym elementem lub elementem grupy / frameworka
    • korzystamy tylko z tych elementów, które są nam potrzebne do danego projektu

Film - Frameworki i biblioteki

Do pobrania

Temat: Zapoznanie z narzędziami wykorzystywanymi do tworzenia zaawansowanych aplikacji webowych.

Notatka do zeszytu

  1. Visual Studio Code to edytor kodu zoptymalizowany pod kątem tworzenia i debugowania nowoczesnych aplikacji internetowych.
  2. Google Chrome jest obecnie najbardziej rozpowszechnioną przeglądarką internetową. Posiada ona narzędzia developerskie przydatne w procesie tworzenia aplikacji internetowych.
  3. Node.js jest wieloplatformowym środowiskiem uruchomieniowym o otwartym kodzie do tworzenia aplikacji typu server-side napisanych w języku JavaScript. Przyczynił się do stworzenia paradygmatu „JavaScript everywhere”, umożliwiając programistom tworzenie aplikacji w obrębie jednego języka programowania zarówno po stronie przeglądarki, jak i serwera.

Film - Node.js

Do pobrania