Bagaimana cara menjalankan javascript?

Tutorial interaktif ini menunjukkan cara menjalankan JavaScript di Chrome DevTools Console. Lihat Memulai Dengan Mencatat Pesan untuk mempelajari cara mencatat pesan ke Konsol. Lihat Memulai Debugging JavaScript untuk mempelajari cara menjeda kode JavaScript dan melewatinya satu baris dalam satu waktu

Gambar 1. Konsol

Ringkasan

Konsol adalah REPL, yang merupakan singkatan dari Read, Evaluate, Print, dan Loop. Itu membaca JavaScript yang Anda ketikkan ke dalamnya, mengevaluasi kode Anda, mencetak hasil ekspresi Anda, dan kemudian mengulang kembali ke langkah pertama

Siapkan DevTools

Tutorial ini dirancang agar Anda dapat membuka demo dan mencoba semua alur kerja sendiri. Saat Anda mengikuti secara fisik, Anda akan cenderung mengingat alur kerja nanti

1. Tekan Command+Option+J (Mac) atau Control+Shift+J (Windows, Linux, ChromeOS) untuk membuka Konsol, tepat di halaman ini

   

   Gambar 2. Tutorial ini di sebelah kiri, dan DevTools di sebelah kanan

Lihat dan ubah JavaScript atau DOM halaman

Saat membuat atau men-debug halaman, sering kali berguna untuk menjalankan pernyataan di Konsol untuk mengubah tampilan atau cara halaman berjalan

1. Perhatikan teks pada tombol di bawah ini

   Halo Dunia

2. Ketik document.getElementById('hello').textContent = 'Hello, Console!' di Konsol lalu tekan Enter untuk mengevaluasi ekspresi. Perhatikan bagaimana teks di dalam tombol berubah

   

   Gambar 3. Tampilan Konsol setelah mengevaluasi ekspresi di atas

   Di bawah kode yang Anda evaluasi, Anda melihat "Hello, Console!". Ingat kembali 4 langkah REPL. baca, evaluasi, cetak, ulangi. Setelah mengevaluasi kode Anda, REPL mencetak hasil ekspresi. Jadi "Hello, Console!" harus menjadi hasil evaluasi document.getElementById('hello').textContent = 'Hello, Console!'

Jalankan sembarang JavaScript yang tidak terkait dengan halaman

Terkadang, Anda hanya menginginkan taman bermain kode tempat Anda dapat menguji beberapa kode, atau mencoba fitur JavaScript baru yang tidak Anda kenal. Konsol adalah tempat yang tepat untuk eksperimen semacam ini

1. Ketik 5 + 15 di Konsol. Hasilnya 20 akan muncul di bawah ekspresi Anda (kecuali jika ekspresi Anda membutuhkan waktu terlalu lama untuk dievaluasi)

2. Tekan Enter_ untuk mengevaluasi ekspresi. Konsol mencetak hasil ekspresi di bawah kode Anda. Gambar 4 di bawah ini menunjukkan bagaimana tampilan Konsol Anda setelah mengevaluasi ekspresi ini

3. Ketik kode berikut ke dalam Konsol. Cobalah mengetiknya, karakter demi karakter, daripada menyalinnya

   function add(a, b=20) {
     return a + b;
   }

   Lihat apakah Anda tidak terbiasa dengan sintaks b=20

4. Sekarang, panggil fungsi yang baru saja Anda tentukan

   add(25);

   

   Gambar 4. Tampilan Konsol setelah mengevaluasi ekspresi di atas.

   add(25);

   _0 dievaluasi menjadi

   add(25);

   1 karena ketika fungsi

   add(25);

   2 dipanggil tanpa argumen kedua,

   add(25);

   3 default ke 20

Anda tidak akan dapat menjalankan kode apa pun dalam sesi konsol ini sampai fungsi Anda telah kembali. Jika terlalu lama, Anda dapat menggunakan Pengelola Tugas untuk membatalkan komputasi yang menghabiskan banyak waktu;

Langkah selanjutnya

Lihat untuk menjelajahi lebih banyak fitur yang terkait dengan menjalankan JavaScript di Konsol

DevTools memungkinkan Anda menjeda skrip di tengah eksekusi. Saat dijeda, Anda dapat menggunakan Konsol untuk melihat dan mengubah

add(25);

add(25);

Konsol juga mendukung sekumpulan penentu format. Lihat Memformat dan menata pesan di Konsol untuk mempelajari semua metode untuk memformat dan menata pesan konsol

Selain itu, Konsol juga memiliki serangkaian fungsi kenyamanan yang mempermudah interaksi dengan halaman. Sebagai contoh

Bagaimana cara menjalankan JavaScript di browser saya?

Bagaimana cara menjalankan JavaScript di Windows?