Konsep pendahuluan utama JavaScript

Berikut ialah penjelasan tentang semua konsep JavaScript yang disebutkan, disusun mengikut topik:

JavaScript — Skrip Bahagian Pelanggan Dinamik

JavaScript ialah bahasa pengaturcaraan serba boleh yang dijalankan dalam penyemak imbas dan membolehkan tapak web mempunyai fungsi interaktif yang dinamik. Ia digunakan terutamanya untuk tugas sebelah klien, bermakna ia dilaksanakan oleh penyemak imbas web pengguna untuk mengendalikan perkara seperti animasi, input pengguna, pengesahan borang dan banyak lagi.

---

Langkah Pertama JavaScript

Apakah itu JavaScript?

JavaScript ialah bahasa pengaturcaraan yang membolehkan anda melaksanakan ciri kompleks pada halaman web, seperti borang interaktif, animasi dan kemas kini masa nyata. Ia sering digunakan bersama HTML dan CSS untuk pembangunan bahagian hadapan.

Percikan Pertama ke dalam JavaScript

Konsep ini melibatkan penulisan kod JavaScript asas pertama anda, seperti membenamkan skrip dalam dokumen HTML dan menjalankan arahan mudah seperti alert('Hello, world!');.

Apa yang Silap? Menyelesaikan masalah JavaScript

Penyelesaian masalah JavaScript merujuk kepada proses mengenal pasti dan membetulkan ralat dalam kod anda. Kesilapan biasa termasuk ralat sintaks, ralat logik dan ralat masa jalan. Alat penyahpepijatan seperti konsol pembangun penyemak imbas membantu untuk memeriksa dan membetulkan isu ini.

Menyimpan Maklumat yang Anda Perlukan — Pembolehubah

Pembolehubah dalam JavaScript digunakan untuk menyimpan data. Anda mengisytiharkan pembolehubah menggunakan kata kunci seperti let, const atau var dan memberikannya nilai seperti rentetan, nombor atau objek:

let name = "John";
const age = 25;

Asas Matematik dalam JavaScript — Nombor dan Operator

JavaScript menyokong operasi aritmetik seperti penambahan ( ), penolakan (-), pendaraban (*), dan pembahagian (/). Anda juga boleh menggunakan operasi yang lebih kompleks seperti modulo (%), yang memberikan baki bahagian.

Mengendalikan Teks — Rentetan dalam JavaScript

String mewakili teks dalam JavaScript dan disertakan dalam petikan. Anda boleh menggabungkan (menggabungkan) rentetan dan menggunakan aksara melarikan diri untuk memasukkan aksara khas seperti petikan di dalam rentetan:

let greeting = "Hello, " + "world!";

Kaedah Rentetan Berguna

JavaScript menyediakan beberapa kaedah terbina dalam untuk bekerja dengan rentetan, seperti:

• toUpperCase() — Menukar rentetan kepada huruf besar.
• substring() — Mengekstrak sebahagian daripada rentetan.
• split() — Memisahkan rentetan kepada tatasusunan berdasarkan pembatas.

Susun atur

Array digunakan untuk menyimpan berbilang nilai dalam satu pembolehubah. Tatasusunan boleh menyimpan pelbagai jenis data dan menawarkan kaedah berkuasa seperti push(), pop(), map() dan penapis():

let name = "John";
const age = 25;

Penjana Cerita Bodoh

Ini ialah projek pemula yang menunjukkan penggunaan praktikal rentetan dan pembolehubah. Anda membuat borang di mana pengguna memasukkan nilai dan JavaScript menjana cerita rawak berdasarkan nilai tersebut.

---

Blok Binaan JavaScript

Membuat Keputusan dalam Kod Anda — Bersyarat

Syarat (pernyataan jika lain) membenarkan kod anda membuat keputusan berdasarkan syarat:

let greeting = "Hello, " + "world!";

Kod Gelung

Gelung membolehkan anda mengulang blok kod beberapa kali. Gelung biasa termasuk untuk, sambil, dan lakukan...semasa. Ini membantu mengulangi tatasusunan, rentetan atau nombor.

Fungsi — Blok Kod Boleh Digunakan Semula

Fungsi ialah blok kod yang direka untuk melaksanakan tugas tertentu dan boleh digunakan semula. Anda mentakrifkan fungsi dengan kata kunci fungsi dan memanggilnya dengan namanya:

let fruits = ["apple", "banana", "cherry"];

Bina Fungsi Anda Sendiri

Ini ialah amalan praktikal di mana anda membuat dan memanggil fungsi anda sendiri untuk melaksanakan tugas tertentu, seperti mengira jumlah dua nombor atau menjana nombor rawak.

Nilai Pulangan Fungsi

Fungsi boleh mengembalikan nilai menggunakan pernyataan pulangan, yang keluar dari fungsi dan memberikan nilai kembali kepada pemanggil.

Pengenalan kepada Acara

Acara ialah tindakan yang berlaku dalam penyemak imbas, seperti klik, penekanan kekunci atau penyerahan borang. JavaScript membenarkan anda membalas acara ini menggunakan pendengar acara.

Acara menggelegak

Acara menggelegak ialah konsep dalam pengendalian acara di mana peristiwa merambat ke atas melalui hierarki DOM, membenarkan elemen induk mengendalikan peristiwa yang dicetuskan oleh elemen anak mereka.

Galeri Imej

Projek ringkas yang menunjukkan cara menggunakan JavaScript untuk mencipta galeri imej interaktif, dengan mengklik lakaran kecil menunjukkan imej penuh.

---

Memperkenalkan Objek JavaScript

Asas Objek JavaScript

Objek dalam JavaScript ialah koleksi sifat dan kaedah. Anda mencipta objek menggunakan pasangan nilai kunci:

let name = "John";
const age = 25;

Prototaip Objek

Objek JavaScript mempunyai prototaip yang berfungsi sebagai cetak biru. Sifat dan kaedah boleh diwarisi daripada prototaip, membenarkan penggunaan semula objek dan warisan.

Pengaturcaraan Berorientasikan Objek (OOP)

JavaScript menyokong pengaturcaraan berorientasikan objek, di mana anda menggunakan kelas dan objek untuk memodelkan entiti dunia sebenar. OOP menggalakkan penggunaan semula kod melalui pewarisan dan enkapsulasi.

Kelas dalam JavaScript

Kelas ialah templat untuk mencipta objek dalam JavaScript. Anda boleh mentakrifkan kelas menggunakan kata kunci kelas dan membuat instantiat objek menggunakan kata kunci baharu:

let greeting = "Hello, " + "world!";

Bekerja dengan JSON

JSON (JavaScript Object Notation) ialah format data ringan yang digunakan untuk bertukar-tukar data antara pelayan dan pelanggan. Anda boleh menukar antara JSON dan objek JavaScript menggunakan JSON.stringify() dan JSON.parse().

Amalan Membina Objek

Ini ialah latihan praktikal di mana anda membina objek, menambah sifat dan kaedah serta memanipulasinya.

Menambahkan Ciri pada Demo Melantun Bola Kami

Projek latihan di mana anda mempertingkatkan demo dengan JavaScript, menambahkan elemen interaktif dan berorientasikan objek pada animasi bola yang melantun.

---

JavaScript tak segerak

Memperkenalkan JavaScript Asynchronous

JavaScript tak segerak membenarkan kod anda melaksanakan tugas tanpa menunggu tugasan sebelumnya selesai. Ini penting untuk tugasan seperti mengambil data daripada pelayan, yang mana anda tidak mahu halaman itu membeku sementara menunggu jawapan.

Cara Menggunakan Janji

Janji mewakili hasil akhirnya daripada operasi tak segerak. Mereka boleh berada dalam salah satu daripada tiga keadaan: belum selesai, dipenuhi atau ditolak. Anda boleh mengendalikan janji menggunakan kaedah .then() dan .catch():

let fruits = ["apple", "banana", "cherry"];

Cara Melaksanakan API Berasaskan Janji

Mencipta API berasaskan janji melibatkan pembalut tugas tak segerak, seperti pembacaan fail atau pertanyaan pangkalan data, dalam janji, supaya ia boleh dikendalikan secara tak segerak.

Memperkenalkan Pekerja

Pekerja Web membenarkan anda menjalankan kod JavaScript di latar belakang, tanpa menyekat urutan utama. Ini berguna untuk tugas seperti pemprosesan data yang sebaliknya akan melambatkan UI.

Menjujukan Animasi

Dalam JavaScript, anda boleh menggunakan setTimeout, setInterval atau requestAnimationFrame untuk mencipta animasi bermasa atau berjujukan.

---

API Web Sebelah Pelanggan

Pengenalan kepada API Web

API Web ialah antara muka yang membenarkan pembangun berinteraksi dengan penyemak imbas atau perkhidmatan luaran. Contohnya termasuk API DOM, API Ambil dan pelbagai API pihak ketiga seperti Peta Google.

Memanipulasi Dokumen

DOM (Document Object Model) membenarkan JavaScript berinteraksi dengan dan memanipulasi dokumen HTML, seperti memilih elemen, menambah/mengalih keluar kandungan atau menukar gaya secara dinamik.

Mengambil Data daripada Pelayan

API Ambil digunakan untuk meminta data daripada pelayan secara tidak segerak. Ia menggantikan objek XMLHttpRequest (XHR) yang lebih lama:

let name = "John";
const age = 25;

API Pihak Ketiga

Ini adalah API luaran yang disediakan oleh perkhidmatan lain (seperti Twitter, Peta Google) yang membolehkan anda menyepadukan data atau fungsi luaran ke dalam aplikasi anda.

Melukis Grafik

JavaScript membolehkan anda membuat dan memanipulasi grafik menggunakan API seperti elemen untuk lukisan 2D atau WebGL untuk pemaparan 3D.

API Video dan Audio

API seperti MediaElement API membolehkan anda mengawal main balik video dan audio, menambah sari kata dan banyak lagi. Anda boleh memainkan, menjeda dan mencari secara atur cara dalam fail media.

Storan Bahagian Pelanggan

JavaScript menyediakan beberapa cara untuk menyimpan data pada sisi klien, seperti:

• localStorage — Menyimpan data tanpa tamat tempoh.
• sessionStorage — Menyimpan data untuk tempoh sesi halaman.
• IndexedDB — API peringkat rendah untuk sejumlah besar data berstruktur.

---

Konsep ini merangkumi bahagian penting JavaScript, daripada asas pembolehubah dan gelung kepada topik lanjutan seperti pengaturcaraan tak segerak, API web dan storan sisi klien. Setiap konsep dibina berdasarkan konsep sebelumnya, menyediakan asas yang kukuh untuk membina aplikasi web dinamik.

Atas ialah kandungan terperinci Konsep pendahuluan utama JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!