0Pricing
JavaScript Academy · Lekcja

Zmienne globalne, dostępność fetch, API plików i sieci

Bezpieczne wykrywanie środowiska wykonawczego (globalThis/window/global), sprawdzanie dostępności fetch oraz zrozumienie, dlaczego pliki wymagają Node, a przeglądarka koncentruje się na DOM i sieci

Zmienne globalne, dostępność fetch, API plików i sieci to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Obraz całości

Cel: wiedzieć, gdzie działa kod.

  • Zmienne globalne: globalThis, window, global
  • fetch: wykrywać dostępność funkcji zamiast zakładać, że istnieje
  • Pliki: Node ma fs, przeglądarki nie
  • Adresy URL: URL działa w obu środowiskach
Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 1

Bezpieczne rozpoznawanie środowiska uruchomieniowego

Należy używać sprawdzeń typeof, aby uniknąć ReferenceError i dowiedzieć się, w jakim środowisku działa kod.

// Detect presence of common globals
const hasWindow = typeof window !== "undefined";
const hasGlobal = typeof global !== "undefined";
const hasProcess = typeof process !== "undefined" && process && typeof process.version === "string";

console.log("globalThis exists?", typeof globalThis !== "undefined");
console.log("window?", hasWindow);
console.log("global?", hasGlobal);
console.log("Node process?", hasProcess);
Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 2

fetch: wykrywanie dostępności funkcji

Przeglądarki zwykle mają fetch, ale starsze wersje Node mogą go nie mieć. Najpierw należy sprawdzić typeof fetch.

// Feature-detect fetch; do not assume it exists everywhere
const hasFetch = typeof fetch === "function";
console.log("fetch available?", hasFetch);

// If available, you could call fetch(...). For a safe demo we only log.
if (!hasFetch) {
  console.log("Provide a fallback or use a library in Node versions without fetch.");
}
Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 3

Pliki: Node a przeglądarka

Node udostępnia fs do pracy z plikami, a przeglądarka nie. Tę samą ścieżkę kodu należy zabezpieczyć sprawdzeniem dostępności funkcji.

// Files are a Node concern; browsers cannot read your disk directly
const hasRequire = typeof require === "function";
console.log("CommonJS require available?", hasRequire);

// Safe message instead of real file I/O (keeps the demo runnable everywhere)
if (hasRequire) {
  console.log("In Node you can use fs for files; in browsers you cannot.");
} else {
  console.log("No require here; likely a browser-like or sandboxed runtime.");
}
Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 4

Wspólne API: URL

Klasa URL spójnie analizuje adresy w różnych środowiskach uruchomieniowych; jest przydatna w małych narzędziach.

// URL is available in both environments
const u = new URL("https://example.com/path?x=1#top");
console.log("host:", u.host);
console.log("pathname:", u.pathname);
console.log("search:", u.search);
console.log("hash:", u.hash);
Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 5

Nawyki przyjazne początkującym

Wskazówki:

  • Przed użyciem fetch należy sprawdzić typeof fetch.
  • Praca z plikami wymaga Node (np. fs); przeglądarki koncentrują się na DOM i sieci.
  • Należy używać globalThis do uzyskiwania przenośnych zmiennych globalnych.
  • Należy preferować małe sprawdzenia dostępności funkcji zamiast zgadywania, w jakim środowisku działa kod.
Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 6

Quiz z wykrywania fetch

Szybkie sprawdzenie: bezpieczne wykrywanie fetch.

Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 7

Podsumowanie

Podsumowanie: należy wykrywać środowisko za pomocą bezpiecznych sprawdzeń typeof, sprawdzać dostępność fetch, pamiętać, że pliki są obsługiwane po stronie Node, oraz używać URL w obu środowiskach.

Zmienne globalne, dostępność fetch, API plików i sieci — ilustracja 8

Często zadawane pytania

Czy lekcja „Zmienne globalne, dostępność fetch, API plików i sieci” jest bezpłatna?

Tak — pełny tekst „Zmienne globalne, dostępność fetch, API plików i sieci” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Zmienne globalne, dostępność fetch, API plików i sieci”?

Bezpieczne wykrywanie środowiska wykonawczego (globalThis/window/global), sprawdzanie dostępności fetch oraz zrozumienie, dlaczego pliki wymagają Node, a przeglądarka koncentruje się na DOM i sieci Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Zmienne globalne, dostępność fetch, API plików i sieci”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zmienne globalne, dostępność fetch, API plików i sieci
  2. Osobliwości loadera ESM, różnice między ścieżkami i URL-ami
  3. Zmienne środowiskowe i wzorce konfiguracji
← Powrót do JavaScript Academy