JavaScript adalah apa yang disebut Bahasa Skrip Sisi Klien. Itu berarti bahwa itu adalah bahasa pemrograman komputer yang berjalan di dalam browser Internet (browser juga dikenal sebagai klien Web karena terhubung ke server Web untuk mengunduh halaman)
Cara kerja JavaScript menarik. Di dalam halaman Web normal Anda menempatkan beberapa kode JavaScript (Lihat Cara Kerja Halaman Web untuk detail tentang halaman Web). Saat browser memuat halaman, browser memiliki juru bahasa bawaan yang membaca kode JavaScript yang ditemukannya di halaman dan menjalankannya
Perancang halaman web menggunakan JavaScript dengan berbagai cara. Salah satu yang paling umum adalah melakukan validasi bidang dalam formulir. Banyak situs Web mengumpulkan informasi dari pengguna dalam bentuk online, dan JavaScript dapat membantu memvalidasi entri. Misalnya, pemrogram mungkin memvalidasi bahwa usia seseorang yang dimasukkan ke formulir berada di antara 1 dan 120
Cara lain desainer halaman web menggunakan JavaScript adalah dengan membuat kalkulator. Berikut adalah beberapa contoh
- kalkulator RPN
- MegaConverter - koleksi besar kalkulator
- Kalkulator Keuangan Pribadi
Untuk memberi Anda contoh kalkulator JavaScript yang sangat sederhana, HTML di bawah ini menunjukkan cara membuat pengonversi Fahrenheit ke Celcius menggunakan JavaScript
<html> <head> <script language="JavaScript"> <!-- hide this script from old browsers function temp(form) { var f = parseFloat(form.DegF.value, 10); var c = 0; c = (f - 32.0) * 5.0 / 9.0; form.DegC.value = c; } // done hiding from old browsers --> </script> </head> <body> <FORM> <h2>Fahrenheit to Celsius Converter</h2> Enter a temperature in degrees F: <INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15> <p> Click this button to calculate the temperature in degrees C: <INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=temp(this.form)> <p> Temperature in degrees C is: <INPUT NAME="DegC" READONLY SIZE=15> </FORM> </body> </html>
Jika Anda telah membaca Cara Kerja Halaman Web dan Cara Kerja Skrip CGI, sebagian besar dari HTML ini akan familier. Ini adalah struktur dasar dari setiap halaman web
<html> <head> </head> <body> </body> </html>_
Ada satu kode JavaScript di header yang berfungsi untuk menghitung konversi dari Fahrenheit ke Celsius
<head> <script> <!-- hide this script from old browsers function temp(form) { var f = parseFloat(form.DegF.value, 10); var c = 0; c = (f - 32.0) * 5.0 / 9.0; form.DegC.value = c; } <!-- done hiding from old browsers --> </script> </head>
Fungsi ini disebut suhu. Ini berisi kode JavaScript untuk menghitung suhu Celcius
Di badan halaman ada bentuk yang khas
<FORM> <h2>Fahrenheit to Celsius Converter</h2> Enter a temperature in degrees F: <INPUT NAME="DegF" VALUE="0" MAXLENGTH="15" SIZE=15> <p> Click this button to calculate the temperature in degrees C: <INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=temp(this.form)> <p> Temperature in degrees C is: <INPUT NAME="DegC" READONLY SIZE=15> </FORM>
Baris ini adalah kuncinya
<INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=temp(this.form)> _
Ini adalah kontrol tombol normal. Saat pengguna mengkliknya, fungsi akan dipanggil di bagian atas halaman karena notasi onClick
Saat bahasa pemrograman berjalan, JavaScript adalah tingkat kesulitan rata-rata. Tidak terlalu sulit untuk mempelajari cara menggunakannya jika Anda sudah memahami pemrograman, tetapi jika Anda baru mengenal pemrograman, tentu saja bukan bahasa yang mudah untuk memulai. Namun, yang dapat Anda lakukan adalah memodifikasi kode contoh ini dan memperluasnya untuk membuat kalkulator lain
JavaScript adalah bahasa skrip sisi klien dan salah satu bahasa skrip yang paling efisien dan umum digunakan. Syarat. bahasa skrip sisi klien berarti bahwa ia berjalan di sisi klien (atau pada mesin klien) di dalam browser web, tetapi satu hal penting untuk diingat adalah bahwa browser web klien juga perlu mendukung JavaScript atau harus JavaScript . Saat ini, sebagian besar browser web modern mendukung JavaScript dan memiliki mesin JavaScript sendiri. Misalnya, Google Chrome memiliki mesin JavaScript sendiri yang disebut V8
Beberapa browser web lain dengan mesin JavaScript mereka
Peramban WebMesin JavaScript1. EdgeChakra2. Safari JavaScript Core3. FirefoxSpidermonkeyItu sepenuhnya tergantung pada pengembang web bagaimana mereka menggunakan JavaScript dan untuk apa, karena itu dapat digunakan untuk beberapa hal dalam pengembangan web. Salah satu penggunaan JavaScript yang paling umum adalah memvalidasi data yang diberikan oleh pengguna di bidang formulir
Dengan bantuan contoh berikut, kita dapat memahami cara kerja JavaScript
Dalam contoh ini, kami telah membuat dokumen HTML sederhana dan menambahkan kode JavaScript kami di dalamnya
Program
Pada program di atas, kami hanya menampilkan pesan peringatan kepada pengguna dengan menggunakan metode "alert()" yang merupakan metode JavaScript yang telah ditentukan sebelumnya. Kami juga menggunakan "console. log();" dan meneruskan "JavaScript" sebagai String dan dalam mode inspeksi kita dapat melihat "JavaScript" di konsol seperti yang ditunjukkan pada output di bawah ini
Keluaran
Seperti yang bisa kita lihat di output, program berjalan dengan baik di browser web kita
Berikut pertanyaan lain yang muncul "bagaimana browser memahami kode JavaScript dan menjalankannya. "
Sebagian besar setiap browser web saat ini memiliki mesin JavaScript sendiri, seperti yang telah kita bahas di atas. Jadi, mesin JavaScriptlah yang memahami kode dan menjalankannya
Sekarang mari kita lihat bagaimana mesin JavaScript menangani dan menjalankannya. kode js
Dalam hal ini, kami telah menggunakan browser chrome untuk menjalankan program kami yang memiliki mesin JavaScript "V8", yang juga digunakan untuk membuat Node. js. Seperti yang telah kita ketahui, JavaScript adalah bahasa yang ditafsirkan yang berarti dieksekusi secara baris demi baris (atau yang berarti mesin JavaScript mengubah kode Js baris demi baris dan berjalan dengan cara yang sama alih-alih mengubah seluruh program satu kali)
Kita dapat memahami cara kerja mesin JavaScript biasa dengan bantuan diagram
Setiap kali kita menjalankan program JavaScript di dalam browser web, kode JavaScript diterima oleh mesin browser dan mesin menjalankan kode sumber untuk mendapatkan hasilnya.
Dalam mesin JavaScript standar, kode sumber melewati beberapa langkah dan dieksekusi seperti yang Anda lihat pada diagram yang diberikan di atas
Mari kita pahami setiap langkah ini secara lebih rinci
Langkah 1. Pengurai
Ini adalah tahap pertama dari mesin, setiap kali kita menjalankan program JavaScript, kode kita pertama kali diterima oleh "parser" di dalam mesin JS. Tugas parser adalah untuk memeriksa kode JavaScript untuk kesalahan sintaksis secara baris demi baris karena JavaScript adalah bahasa skrip interpretatif, jadi setiap kali parser mendeteksi kesalahan, itu melempar semacam kesalahan dan menghentikan eksekusi kode
Singkatnya, kita dapat mengatakan bahwa itu mem-parsing kode JavaScript
Langkah 2. AST
Setelah parser memeriksa semua kode JavaScript dan yakin bahwa tidak ada kesalahan/kesalahan dalam kode, parser akan membuat struktur data yang disebut AST (singkatan dari Abstract Syntax Tree)
Kita dapat dengan mudah memahami apa itu AST dengan bantuan contoh berikut
Contoh
Misalkan kita memiliki program JavaScript seperti yang diberikan di bawah ini
Program
Setelah parser memeriksa kode JavaScript di atas, ia akan membuat struktur data yang disebut AST seperti yang telah kita bahas di atas. AST (Abstract Syntax Tree) yang dibuat terlihat seperti gambar yang diberikan
Catatan. Ini bukan pohon sintaksis abstrak yang tepat, tetapi itu adalah representasi bergambar dari Pohon Sintaks Abstrak
Langkah 3. Konversi ke kode Mesin
Setelah Pohon Sintaks Abstrak dibuat oleh parser, mesin JavaScript mengubah kode JavaScript menjadi kode mesin (atau dalam bahasa yang dapat dimengerti mesin)
Langkah 4. Kode mesin
Ketika program yang ditulis dalam JavaScript dikonversi dalam bahasa mesin (atau dalam kode byte), kode yang dikonversi dikirim ke sistem untuk dieksekusi, dan akhirnya, kode byte tersebut dijalankan oleh sistem/mesin seperti yang kita amati di bagian pertama kita.