cari

Rumah >hujung hadapan web >tutorial js >Cara Menyediakan Persekitaran Pembangunan JavaScript Anda

Cara Menyediakan Persekitaran Pembangunan JavaScript Anda

Barbara Streisand
Barbara Streisandasal
2024-10-22 20:00:44869semak imbas

Perkara 2: Cara Menyediakan Persekitaran Pembangunan JavaScript Anda

Pengenalan

Memandangkan anda telah menulis program JavaScript pertama anda dalam konsol penyemak imbas, tiba masanya untuk menyediakan persekitaran pembangunan yang betul. Ini akan membantu anda menulis dan menguji kod yang lebih kompleks dengan cekap semasa anda meneruskan kursus.

Dalam siaran ini, saya akan membimbing anda melalui penyediaan persekitaran pembangunan menggunakan Visual Studio Code (VS Code)—salah satu editor kod yang paling popular dalam kalangan pembangun.

Langkah 1: Pasang Kod Visual Studio

Visual Studio Code (VS Code) ialah editor kod yang ringan tetapi berkuasa. Ia percuma, mudah digunakan dan berfungsi dengan baik dengan JavaScript.

Arahan untuk Memasang Kod VS:

  1. Muat turun Kod VS: Lawati tapak web rasmi dan muat turun pemasang untuk sistem pengendalian anda (Windows, macOS atau Linux).
  2. Pasang Aplikasi: Ikuti langkah pemasangan berdasarkan sistem anda. Ia biasanya semudah mengklik dua kali pada fail yang dimuat turun dan mengikut gesaan.

Setelah dipasang, buka Kod Visual Studio. Ia sepatutnya kelihatan seperti ini:

How to Set Up Your JavaScript Development Environment

(Ini ialah contoh imej antara muka Kod VS)

Langkah 2: Pasang Node.js (Pilihan tetapi Disyorkan)

Walaupun JavaScript berjalan dalam penyemak imbas, pemasangan Node.js membolehkan anda menjalankan JavaScript di luar penyemak imbas, menjadikan persekitaran pembangunan anda lebih serba boleh.

Arahan untuk Memasang Node.js:

  1. Muat turun Node.js: Pergi ke tapak web Node.js dan muat turun versi LTS (Sokongan Jangka Panjang) untuk sistem pengendalian anda.
  2. Pasang Node.js: Ikut arahan untuk memasangnya.

Selepas pemasangan, buka Command Prompt (Windows) atau Terminal (macOS/Linux) dan taip arahan berikut untuk menyemak sama ada Node.js dipasang:

node -v

Ini sepatutnya mengembalikan nombor versi Node.js, mengesahkan pemasangan.

Langkah 3: Cipta Fail JavaScript Pertama Anda

Sekarang anda telah memasang Kod VS, mari buat fail JavaScript pertama anda.

Arahan untuk Mencipta Fail JavaScript:

  1. Buka Kod VS.
  2. Buat Folder Baharu: Pada komputer anda, buat folder untuk projek JavaScript anda. Anda boleh memanggilnya seperti pembelajaran javascript.
  3. Buka Folder dalam Kod VS: Dalam Kod VS, pergi ke Fail > Buka Folder dan pilih folder yang baru anda buat.
  4. Buat Fail JavaScript Baharu: Dalam panel Explorer di sebelah kiri, klik butang Fail Baharu (atau tekan Ctrl N) dan namakan skrip fail.js.

Langkah 4: Tulis dan Jalankan JavaScript dalam Kod VS

Sekarang, mari tulis beberapa JavaScript asas dalam fail script.js baharu anda.

Contoh:

Dalam script.js, tulis kod berikut:

node -v

Untuk menjalankan fail JavaScript ini, anda mempunyai beberapa pilihan:

Pilihan 1: Menjalankan JavaScript dalam Penyemak Imbas

  1. Buat fail HTML (cth., index.html) dalam folder yang sama.
  2. Tambahkan kod HTML asas ini: 
console.log("Hello, World from VS Code!");
  1. Buka index.html dalam penyemak imbas anda (anda boleh klik kanan pada fail dan pilih Buka dengan Chrome atau penyemak imbas pilihan anda).
  2. Buka konsol penyemak imbas (F12 atau Ctrl Shift I), dan anda akan melihat mesej: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Pilihan 2: Menjalankan JavaScript dengan Node.js (jika dipasang)

  1. Buka Prompt Perintah atau Terminal.
  2. Navigasi ke folder di mana script.js terletak menggunakan arahan cd. Contohnya: 
Hello, World from VS Code!
  1. Jalankan arahan berikut untuk melaksanakan fail JavaScript anda: 
cd path/to/javascript-learning

Anda sepatutnya melihat mesej:

node script.js

Langkah Seterusnya

Sekarang persekitaran pembangunan anda telah disediakan dan anda telah berjaya menjalankan JavaScript dalam penyemak imbas dan dengan Node.js, anda sudah bersedia untuk menyelam lebih mendalam ke dalam pengaturcaraan JavaScript! Dalam siaran seterusnya, kami akan meneroka pembolehubah dalam JavaScript dan cara anda boleh menggunakannya untuk menyimpan data.

Nantikan pelajaran yang lebih menarik!

Petua Pro:

Sebaik sahaja anda membiasakan diri dengan Kod VS, anda boleh meningkatkan aliran kerja anda dengan memasang sambungan seperti ESLint untuk linting kod dan Pelayan Langsung untuk memuatkan semula penyemak imbas anda secara automatik apabila anda membuat perubahan.

Lawati laman web saya- portfolio Ridoy hasan
layari profil LinkedIn saya- Ridoy Hasan

Atas ialah kandungan terperinci Cara Menyediakan Persekitaran Pembangunan JavaScript Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript chrome html if for select auto double using Interface JS console number this windows visual studio macos visual studio code linux prompt
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Mengapa Skrip Gagal Selepas Menekan Butang Kembali Firefox?Artikel seterusnya：Mengapa Skrip Gagal Selepas Menekan Butang Kembali Firefox?

Artikel berkaitan

Lihat lagi