Bagaimana browser menjalankan javascript

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)

Table of Contents Show

Apakah JavaScript dijalankan oleh browser?
Apakah browser mengimplementasikan JavaScript?
Bagaimana kode JavaScript dieksekusi?

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. FirefoxSpidermonkey

Itu 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.

Apakah JavaScript dijalankan oleh browser?

Saat ini, JavaScript dapat dieksekusi tidak hanya di browser, tetapi juga di server, atau sebenarnya di perangkat apa pun yang memiliki program khusus yang disebut mesin JavaScript. Browser memiliki mesin tersemat yang terkadang disebut "mesin virtual JavaScript"

Apakah browser mengimplementasikan JavaScript?

Setiap browser Web hadir dengan mesin JavaScript yang menyediakan lingkungan runtime JavaScript . Misalnya, Google Chrome menggunakan mesin JavaScript V8 yang dikembangkan oleh Lars Bak. V8 adalah mesin JavaScript sumber terbuka yang dikembangkan untuk browser web Google Chrome dan Chromium oleh The Chromium Project.

Bagaimana kode JavaScript dieksekusi?

Konteks Eksekusi berisi kode yang sedang berjalan, dan semua yang membantu pelaksanaannya. Selama run-time Konteks Eksekusi, kode spesifik diurai oleh parser, variabel dan fungsi disimpan dalam memori, kode byte yang dapat dieksekusi dihasilkan, dan kode dieksekusi