001. JavaScript - wstęp.
Co to jest JavaScript i do czego służy?
Odpowiedź
- 001a. Warunek if-else w JavaScript.
Odpowiedź - 001b. Średniki na koncu linii. Dobrą praktyką jest dodawanie ich (chociaż JS ma mechanizm automatycznego wstawiania średników).
- 001c. Jak wygląda proces ładowania pliku HTML w przeglądarce?
Odpowiedź - 001d. typeof notDefined - specjalny operator, który jako jedyny w JS nie rzuci błędu, nawet jeśli zmienna nie istnieje.
- 001e. Tryb ścisły w JavaScript - konfiguracja wprowadzająca rygorystyczne zasady programowania ("use strict";).
- 001f. Przyszłość JavaScript, rozwój standardów ECMAScript i innowacje za tym idące (np moduły ES6).
- 001h. Załadowanie kodu JS do sesji JS przeglądarki (custom Bookmarklet, CSP i ograniczenia).
002. Osadzanie kodu JavaScript na stronie (tag script).
Jak osadzać kod JavaScript na stronie (tag script)? Kiedy skrypt jest 'blokujący' i co to oznacza? Co z JS w atrybutach tagów HTML?
Odpowiedź
002a. Funkcja document.write zastosowana w różnych trybach osadzania kodu JS nie zawsze działa - dlaczego?
- document.write używane nieodpowiednio ma destrukcyjny wpływ na zawartość strony html
- defer i async mają różne działanie, natomiast w obu przypadkach wykonanie document.write()
może być zignorowane - nie musi, ale to zależy od środowiska - (np. przez blokadę przeglądarki
ze względów bezpieczeństwa albo optymalizacji)
- jedyny bezpieczny kontekst dla document.write() to, gdy skrypt jest wstawiony bez async/defer
- zamiast document.write lepiej używać innerHTML lub manipulowanie DOM-em przez appendChild, itp ...
przykład innerHTML: document.body.innerHTML += "<p>Nowy tekst</p>";
002b. Jakie są różnice między osadzeniem zwykłego pliku js a osadzeniem pliku js jako modułu ECMAScript/ES6 (type="module")?
W ECMAScript/ES6:
- możliwość użycia import i export
- modułowy zakres zamiast globalnego (zmienne nie trafiają do window)
- domyślnie używany tryb strict (use scrict;)
- skrypty są ładowane/wykonywane domyślnie w "trybie asynchroniczności" defer
- syntax importu wymaga ścieżki względnej i rozszerzenia pliku (import { funkcja } from './modul.js';)
003. Deklaracja zmiennych: let, const, var lub domyślna. Jak działają zakresy?
Odpowiedź
3.1)
Domyślnie (bez: let, const, var) zmienne trafiają do zakresu globalnego chyba, że używamy trybu ścisłego.
W Pythonie brak deklaracji działa bardziej intuicyjnie
– przypisanie zmiennej automatycznie umieszcza ją w odpowiednim zakresie (lokalnym lub globalnym).
3.2)
W Pythonie bloki takie jak if, for czy while nie tworzą nowego zakresu zmiennej - a w JavaScript tak.
3.3)
Podsumowanie – zakresy w JavaScript:
Global Scope – dostępny wszędzie w kodzie.
Function Scope – dostępny tylko w obrębie funkcji.
Dotyczy zmiennych zadeklarowanych przez var (oraz parametrów funkcji).
Block Scope – dostępny tylko w obrębie if, for, while, lub innych bloków (let / const i class).
Dostępny tylko w obrębie bloku { }.
Lexical Scope – zależy od tego, gdzie funkcja została zadeklarowana, a nie wywołana.
Jest też 'this' - osobny mechanizm wiązania kontekstu (zależy od sposobu wywołania funkcji).
this nie jest zakresem.
004. Globalny kontekst w JavaScript (przeglądarka)
Odpowiedź
4.1)
Kontekst globalny a obiekt window - jaka jest relacja między nimi?
Globalny kontekst w JavaScript zależy od środowiska (przeglądarka, Node.js, Web Workers).
4.2)
Wprowadzono 'globalThis', żeby to wszystko połączyć - działa na wszystkich typach środowisk.
Użycie 'globalThis' to teraz zalecany sposób odwołanie się do globalnego kontekstu.
005. Typy danych w JavaScript.
Odpowiedź
5.1)
Typy prymitywne, jest ich 7, nie mają prototypu i nie dziedziczą po Object.
JS ma 1 główny typ referencyjny: Object. Poza typami prymitywnymi, prawie wszystko dziedziczy po Object.
Obiekty 'document' i 'window' to 'host objects' (środowisko przeglądarki), ale też dziedziczą po Object.
Jedyny „obiekt”, który naprawdę nie dziedziczy po Object, to 'null'.
5.2)
Tworzenie obiektów wbudowanych, literały obiektów - przykłady.
Odpowiedź
5.3)
Zwykły obiekt '{}' nie implementuje interfejsu Iterable - jak sobie z tym radzić?
Odpowiedź
5.4)
Tworzenie obiektów w JavaScript - przegląd możliwości.
[Odpowiedź]
- każdy obiekt ma ukryte odwołanie do innego obiektu (albo null), nazywane prototypem
- klucze obiektów zawsze są traktowane jako łańcuchy znaków. Porównanie z Python Dictionary
- klasy w JS to tylko ładniejsza forma prototypów, nawet 'class', to tylko cukier składniowy
006: camelCase, ... Co i kiedy się używa w JavaScript?
camelCase - jest standardem nazewniczym dla większości identyfikatorów
zmienne, funkcje, metody obiektów, właściwości obiektów
PascalCase - klasy
UPPER_SNAKE_CASE - stałe globalne
007: == i === w JavaScript.
Wytłumaczenie:
== → porównanie z konwersją typów (type coercion)
=== → porównanie bez konwersji (ten sam typ i ta sama wartość)
Dlatego === nazywa się strict equality.
008: Funkcje w JavaScript. Jak działają funkcje strzałkowe?
009. Operatory, Instrukcje warunkowe, Pętle - JavaScript.
while (n > 0) {...;}
for (let i = 0; i < 5; i++) {...;}
010. Syntax słowa 'this' w JavaScript - jak to działa?
011. Podstawy OOP w JavaScript - podsumowanie.
012. Hoisting (funkcje i zmienne).
Co to jest hoisting i jak działa hoisting dla różnych sposobów definiowania funkcji?
Zmienne również są hoistowane, ale jak dokładnie?
Odpowiedź
013. Dziedziczenie przez prototyp.
014. DOM - metody introspekcji.
Odpowiedź
015: Typy - łamigłówki/ciekawostki.
- typeof NaN; // "number"
- NaN === NaN; // false
- Object.is(NaN, NaN); // true
- 0 === -0; // true
- Object.is(0, -0) // false
- BigInt(10) === 10 // false
falsy wartości:
- false, 0, -0, 0n, "", null, undefined, NaN
- Number(null) // 0
- Number(undefined) // NaN
- Number("10px") // NaN
- String(false) // "false"
- [] + [] // ""
- [] + {} // "[object Object]"
016: AJAX
AJAX (Asynchronous JavaScript and XML):
- techniki programowania webowego do tworzenia asynchronicznych aplikacji
XMLHttpRequest (starsze API, skomplikowane w użyciu),
fetch (bardziej nowoczesnym API, które ma na celu zastąpienie starszego)
017. ...
