Bermula dengan JavaScript Vanila: Menyediakan Persekitaran Pembangunan Anda-tutorial js-php.cn

Bermula dengan JavaScript Vanila: Menyediakan Persekitaran Pembangunan Anda

WBOY

Lepaskan： 2024-07-17 10:28:18

asal

849 orang telah melayarinya

Getting Started with Vanilla JavaScript: Setting Up Your Development Environment

Panduan ringkas ini akan membimbing anda melalui cara menyediakan persekitaran pembangunan anda, untuk menjadikan kerja dengan JavaScript lancar dan interaktif. Persediaan akan menggunakan struktur folder mudah dengan dokumen HTML dan fail JavaScript luaran. Dengan cara ini, anda boleh kod bersama panduan, menulis JavaScript dalam fail berasingan dan melihat output anda dalam konsol penyemak imbas. Persediaan ini hampir sama dengan cara perkara berfungsi dalam dunia sebenar pembangunan web. Jom terjun!

Mengapa Menggunakan Fail JavaScript Luaran?

Menggunakan fail JavaScript luaran mempunyai beberapa kelebihan:

Organisasi: Ia memastikan kod HTML dan JavaScript anda berasingan, menjadikan fail anda lebih bersih dan lebih mudah dibaca.
Kebolehgunaan semula: Anda boleh menggunakan fail JavaScript yang sama merentas berbilang fail HTML.
Kebolehselenggaraan: Lebih mudah untuk mengemas kini kod JavaScript anda tanpa mengubah suai fail HTML anda.
Kerjasama: Bekerja dengan orang lain menjadi lebih mudah kerana ahli pasukan yang berbeza boleh bekerja pada fail HTML dan JavaScript secara serentak.

Panduan Langkah demi Langkah untuk Menyediakan Persekitaran Pembangunan Anda

1. Cipta Folder Baharu untuk Projek Anda

Mulakan dengan mencipta folder baharu pada komputer anda di mana anda akan menyimpan fail projek anda. Namakan folder seperti js-tutorial.

2. Cipta Fail HTML Baharu

Di dalam folder projek anda (js-tutorial), buat fail HTML baharu. Namakannya seperti index.html.

3. Buat Fail JavaScript Baharu

Masih dalam folder projek anda (js-tutorial), buat fail JavaScript baharu. Namakannya seperti script.js.

4. Sediakan Struktur HTML Asas

Buka fail index.html anda dalam editor teks dan sediakan struktur HTML asas. Pautkan fail JavaScript luaran menggunakan tag dengan atribut src:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    <h1>Welcome to JavaScript Functions Guide</h1>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Simpan fail index.html selepas menambah kandungan ini.

5. Tambahkan Kod JavaScript pada Fail JavaScript Anda

Buka fail script.js anda dalam editor teks yang sama dan tambahkan beberapa kod JavaScript:

console.log("Hello, World!");

Salin selepas log masuk

Simpan fail script.js selepas menambah kod.

6. Buka Fail HTML dalam Pelayar Anda

Sekarang, buka fail index.html dalam pelayar web pilihan anda. Anda boleh melakukan ini dengan mengklik dua kali pada fail atau menyeretnya ke dalam tetingkap penyemak imbas yang terbuka.

7. Akses Konsol Pelayar

Untuk melihat output kod JavaScript anda, anda perlu mengakses konsol penyemak imbas. Ikut langkah ini berdasarkan pelayar anda:

Untuk Google Chrome:

Windows/Linux: Tekan Ctrl + Shift + I atau F12.
Mac: Tekan Cmd + Option + I.

Klik pada tab "Konsol".

Untuk Mozilla Firefox:

Windows/Linux: Tekan Ctrl + Shift + K atau F12.
Mac: Tekan Cmd + Option + K.

Klik pada tab "Konsol".

Untuk Microsoft Edge:

Windows: Tekan Ctrl + Shift + I atau F12.
Mac: Tekan Cmd + Option + I.

Klik pada tab "Konsol".

Untuk Safari:

Mac: Tekan Cmd + Option + I atau dayakan menu "Develop" dalam "Preferences" di bawah tab "Advanced". Kemudian, pilih "Tunjukkan Konsol JavaScript".

8. Lihat Output

Dengan fail index.html anda dibuka dalam penyemak imbas dan konsol dibuka, anda sepatutnya melihat Hello, World! dan Hello, Dunia! dipaparkan dalam konsol. Ini mengesahkan bahawa persediaan anda berfungsi dengan sempurna!

9. Mulakan Pengekodan

Kini anda boleh menulis kod JavaScript di dalam fail script.js. Setiap kali anda menyimpan fail dan memuat semula penyemak imbas, anda akan melihat output dalam konsol.

Anda sudah bersedia! Selamat mengekod!

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