JavaScript Academy · Pelajaran

Global, Ketersediaan fetch, API Berkas/Jaringan

Deteksi lingkungan runtime dengan aman (globalThis/window/global), periksa ketersediaan fetch, dan pahami mengapa berkas memerlukan Node sementara peramban berfokus pada DOM/jaringan

Pelajaran 1 dari 38 langkah

Global, Ketersediaan fetch, API Berkas/Jaringan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Gambaran besar

Tujuan: Ketahui tempat kode Anda berjalan.

  • Global: globalThis, window, global
  • fetch: deteksi fiturnya, jangan berasumsi
  • Berkas: Node memiliki fs; peramban tidak
  • URL: URL berfungsi di keduanya
Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 1

Pemeriksaan lingkungan saat berjalan (aman)

Gunakan pemeriksaan typeof untuk menghindari ReferenceErrors dan mengetahui tempat kode Anda berjalan.

// 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);
Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 2

Deteksi fitur fetch

Peramban biasanya memiliki fetch; versi Node yang lebih lama mungkin tidak memilikinya. Periksa typeof fetch terlebih dahulu.

// 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.");
}
Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 3

Berkas: Node vs peramban

Node menyediakan fs untuk berkas; peramban tidak. Pastikan jalur kode yang sama tetap aman dengan pemeriksaan fitur.

// 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.");
}
Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 4

API URL bersama

Kelas URL mengurai alamat secara konsisten di berbagai lingkungan saat berjalan; berguna untuk alat-alat kecil.

// 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);
Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 5

Kebiasaan yang ramah bagi pemula

Kiat:

  • Periksa typeof fetch sebelum menggunakannya.
  • Berkas memerlukan Node, misalnya fs; peramban berfokus pada DOM dan jaringan.
  • Gunakan globalThis untuk variabel global yang portabel.
  • Utamakan pemeriksaan fitur kecil daripada menebak lingkungan.
Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 6

Kuis deteksi fetch

Pemeriksaan singkat: Deteksi fetch dengan aman.

Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 7

Ringkasan

Ringkasan: Deteksi lingkungan saat berjalan dengan pemeriksaan typeof yang aman, deteksi fitur fetch, ingat bahwa berkas berada di sisi Node, dan gunakan URL di kedua lingkungan.

Global, Ketersediaan fetch, API Berkas/Jaringan — ilustrasi 8
Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
59
Pelajaran
200

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Global, Ketersediaan fetch, API Berkas/Jaringan” gratis?

Ya — teks lengkap “Global, Ketersediaan fetch, API Berkas/Jaringan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Global, Ketersediaan fetch, API Berkas/Jaringan”?

Deteksi lingkungan runtime dengan aman (globalThis/window/global), periksa ketersediaan fetch, dan pahami mengapa berkas memerlukan Node sementara peramban berfokus pada DOM/jaringan Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Global, Ketersediaan fetch, API Berkas/Jaringan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Global, Ketersediaan fetch, API Berkas/Jaringan
  2. Keunikan Pemuat ESM, Perbedaan PATH/URL
  3. Variabel Lingkungan dan Pola Konfigurasi
← Kembali ke JavaScript Academy