Pelan Kajian JavaScript Komprehensif (Peraturan)

Pelan pembelajaran ini memfokuskan kepada penguasaan 20% daripada konsep teras untuk menjadi kompeten dalam 80% projek sebenar. Kuasai asas ini dahulu dan kemudian kembangkan melalui projek.

Peringkat pembelajaran teras (dua minggu)

Jadual belajar harian:

• Pagi: Konsep pembelajaran (1-2 jam).
• Petang: Amalan (1-2 jam).
• Malam: Semak, nyahpepijat dan semak (30 minit).

Minggu 1: Asas

Hari 1: Konsep Asas

• Topik: Pembolehubah (biar, const), jenis data (rentetan, nombor, boolean), pengendali ( , ===, !).
• Sumber pembelajaran: Tutorial asas JavaScript MDN, kursus sintaks JS percumaCodeCamp.
• Latihan: Tulis kod untuk mengira BMI atau tukar Celsius kepada Fahrenheit.

Hari Kedua: Aliran Kawalan

• Topik: Pernyataan bersyarat (jika/lain, suis), gelung (untuk, sementara).
• Sumber Pembelajaran: JavaScript.info Pernyataan dan Gelung Bersyarat.
• Latihan: Selesaikan masalah FizzBuzz dan cetak nombor perdana.

Hari 3: Fungsi

• Topik: Pengisytiharan fungsi, parameter, nilai pulangan, fungsi anak panah, skop.
• Sumber Pembelajaran: Panduan Fungsi MDN.
• Latihan: Cipta fungsi untuk membalikkan rentetan atau mengira faktorial.

Hari 4: Manipulasi DOM

• Tema: Pilih elemen (querySelector), ubah suai kandungan (textContent, innerHTML), gaya (classList).
• Sumber pembelajaran: tutorial pengendalian DOMCodeCamp percuma.
• Latihan: Buat butang untuk menukar warna latar belakang halaman.

Hari 5: Acara

• Topik: Pendengar acara (klik, serahkan), objek acara, preventDefault().
• Sumber Pembelajaran: Bermula dengan Acara JavaScript.info.
• Latihan: Cipta butang untuk menogol mod gelap/cahaya.

Hari 6: Tatasusunan

• Topik: Kaedah tatasusunan (tolak, pop, peta, penapis, forEach).
• Sumber Pembelajaran: Panduan Tatasusunan MDN.
• Latihan: Tapis nombor genap atau susun nama mengikut abjad daripada tatasusunan.

Hari 7: Semakan dan projek kecil

• Semakan: Tulis semula latihan sebelumnya tanpa merujuk kepada kod.
• Projek kecil: Apl kaunter mudah (butang kenaikan/pengurangan).

Minggu 2: Konsep Lanjutan

Hari 8: Objek

• Topik: Jumlah muka objek, kaedah, kata kunci ini, deconstructing dan tugasan.
Sumber Pembelajaran:
• JavaScript.info Yayasan Objek. Praktik:
Buat objek pengguna, termasuk kaedah mengemas kini data data peribadi.
• hari 9: JavaScript Asynchronous

Topik: fungsi kembali, janji, async/menunggu, ambil ().

Sumber Pembelajaran:
• mdn JavaScript asynchronous. Praktik:
Dapatkan data dari API JsonPlaceholder dan memaparkan tajuk.
• hari 10: rawatan ralat
• Topik:
Cuba/tangkap, buang kesilapan, gunakan konsol untuk debug.

Sumber Pembelajaran: pemprosesan ralat javascript.info.

Amalan: Dapatkan kod menambah pemprosesan ralat untuk API anda.

• Hari 11: Ciri -ciri ES6
• Topik: Jumlah muka template, mengembangkan/baki pengendali, modul (import/eksport).
• Sumber Pembelajaran: ES6 untuk semua orang (kursus percuma).
Amalan:

Membina semula kod lama dengan sintaks ES6.

hari kedua belas: Penyimpanan tempatan

• Topik: localStorage, json.stringify (), json.parse ().
• Sumber Pembelajaran: API Store Web MDN.
Amalan:
• Simpan dan dapatkan tetapan keutamaan pengguna (contohnya, mod gelap).
Hari 13: Fungsi penutupan dan panggil balik

Topik:

kata -kata, contoh penutup, fungsi tinggi.

• Sumber Pembelajaran: penutupan MDN.
Praktik:
• Buat kilang fungsi (contohnya, fungsi pendaraban).
Hari 14: Kajian Akhir dan Penyediaan Projek
Kajian:

Bina aplikasi kecil yang menggabungkan DOM, Acara, dan LocalStorage.

Penyediaan: Tetapkan folder projek yang mengandungi fail HTML/CSS/JS.

• lima projek menyatukan dan mengembangkan pengetahuan Membina projek -projek ini dengan teratur, kesukaran secara beransur -ansur meningkat, dan kemerdekaan secara beransur -ansur meningkat. Gunakan dokumen dan Google untuk menyelesaikan masalah yang dihadapi.

1. Senarai perkara (junior)

• Keterangan: Tambah, padamkan dan tandakan tugas selesai.
Konsep teras:
• operasi dom (tugas rendering dinamik).
  • Pemprosesan Acara (mengemukakan, mengklik acara).
  • kaedah array (penapisan tugas penghapusan).
  • Penyimpanan Tempatan (tugas berterusan semasa memuatkan semula).
2. Permohonan cuaca (pertengahan)
Keterangan:
dari API (contohnya, OpenWeatherMap) memperoleh data cuaca masa sebenar.
• Konsep teras:
• ambil () dan async/menunggu. Gunakan data JSON.
  • Pengendalian ralat kegagalan API.
  • Berdasarkan input pengguna (carian bandar) DOM Kemas kini dinamik.
  3. Permainan ujian (sederhana dan senior)
Penerangan:

Ujian masa, termasuk soalan pilihan pelbagai dan papan skor.

Konsep teras:
• Reka bentuk yang berorientasikan objek (ujian dan kategori masalah).
• setInterval digunakan untuk pemasa. Pengurusan status (menjejaki masalah semasa, skor).
  • Suruhanjaya Acara untuk butang Jawapan.
  4. Tracker Bajet (Advanced)
  Keterangan:
Gunakan Carta (Chart.js) untuk mengesan pendapatan/perbelanjaan.

Konsep teras:

• keadaan kompleks (transaksi, keseimbangan, kategori). dan Integrasi Perpustakaan Ketiga (Chart.js).
• Borang pengesahan dan maklum balas ralat. Penyimpanan tempatan untuk kegigihan data.
  5. Stack Bookstore Full (Advanced)
  • Penerangan:
  Gunakan Node.js/Express Back -End dan Native JS Front -end CRUD Applications.
Konsep teras:
REST API Design (GET, POST, DELETE).
• Operasi Asynchronous Advanced (komunikasi depan belakang). kod modular (modul perkhidmatan API berasingan).
• Penyebaran pengetahuan asas (Digitalon, Netlify).
  rahsia kejayaan
  Pengekodan harian:
  • Walaupun hanya 30 minit, memori otot dapat diperkuat.
  • Masalah kelebihan:
  Gunakan pseudo -code untuk secara beransur -ansur merancang projek.
Debugging pelukan:
Ketahui penggunaan konsol.log () dan devtools Chrome.
Rekonstruksi yang berani:

Meningkatkan kebolehbacaan dan kecekapan kod selepas kod sedang berjalan.
1. Pelan ini mengimbangi penyelesaian pembelajaran struktur dan masalah kreatif. Bermula dari usia muda, sering diulang, dan meraikan kemajuan! ?

Atas ialah kandungan terperinci Pelan Kajian JavaScript Komprehensif (Peraturan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!