Kode dan Panduan Eksekusi JavaScript

Merancang halaman web Anda menggunakan JavaScript membutuhkan perhatian pada urutan di mana kode Anda muncul dan apakah Anda mengenkapsulasi kode menjadi fungsi atau objek, yang semuanya memengaruhi urutan kode berjalan.

Karena JavaScript pada halaman Anda dieksekusi berdasarkan faktor-faktor tertentu, mari kita pertimbangkan di mana dan bagaimana menambahkan JavaScript ke halaman web.

Pada dasarnya ada tiga lokasi tempat kita dapat melampirkan JavaScript:

• Langsung ke kepala halaman
• Langsung ke badan halaman
• Dari penangan / pendengar acara

Tidak ada bedanya apakah JavaScript itu dalam halaman web sendiri atau dalam file eksternal yang ditautkan ke halaman. Juga tidak masalah apakah penangan acara dikodekan dengan keras ke dalam halaman atau ditambahkan oleh JavaScript itu sendiri (kecuali bahwa mereka tidak dapat dipicu sebelum ditambahkan).

Apa artinya mengatakan bahwa JavaScript itu langsung di kepala atau badan halaman? Jika kode tidak tertutup dalam fungsi atau objek, kode itu langsung di halaman. Dalam hal ini, kode berjalan secara berurutan segera setelah file yang berisi kode tersebut dimuat secara memadai agar kode tersebut dapat diakses.

Kode yang ada di dalam suatu fungsi atau objek dijalankan hanya ketika fungsi atau objek itu dipanggil.

Pada dasarnya, ini berarti bahwa kode apa pun di dalam kepala dan badan halaman Anda yang tidak di dalam suatu fungsi atau objek akan berjalan saat halaman dimuat - segera setelah halaman telah dimuat dengan cukup untuk mengakses kode itu.

Bit terakhir itu penting dan berdampak pada urutan penempatan kode Anda pada halaman: kode apa pun yang ditempatkan langsung di halaman yang perlu berinteraksi dengan elemen-elemen di dalam halaman harus muncul setelah elemen-elemen di halaman di mana itu tergantung.

Secara umum, ini berarti bahwa jika Anda menggunakan kode langsung untuk berinteraksi dengan konten halaman Anda, kode tersebut harus ditempatkan di bagian bawah tubuh.

Kode dalam Fungsi dan Objek

Kode di dalam fungsi atau objek dijalankan setiap kali fungsi atau objek itu dipanggil. Jika dipanggil dari kode yang langsung di kepala atau badan halaman, maka tempatnya di urutan eksekusi secara efektif adalah titik di mana fungsi atau objek dipanggil dari direct kode.

Menugaskan suatu fungsi ke pengendali acara atau pendengar tidak menghasilkan fungsi yang dijalankan pada titik di mana ia ditugaskan - asalkan Anda sebenarnya menugaskan fungsi itu sendiri dan tidak berlari fungsi dan menetapkan nilai yang dikembalikan. (Inilah sebabnya mengapa Anda biasanya tidak melihat () di akhir nama fungsi ketika sedang ditugaskan ke acara sejak penambahan tanda kurung menjalankan fungsi dan memberikan nilai yang dikembalikan daripada menetapkan fungsi diri.)

Fungsi yang dilampirkan pada pengendali acara dan pendengar berjalan saat acara yang dilampirkan dipicu. Sebagian besar acara dipicu oleh pengunjung yang berinteraksi dengan halaman Anda. Namun ada beberapa pengecualian, seperti beban acara di jendela itu sendiri, yang dipicu ketika halaman selesai memuat.

Fungsi Terlampir pada Acara pada Elemen Halaman

Setiap fungsi yang dilampirkan pada peristiwa pada elemen dalam halaman itu sendiri akan berjalan sesuai dengan tindakan setiap pengunjung individu - kode ini hanya berjalan ketika peristiwa tertentu terjadi untuk memicu itu. Untuk alasan ini, tidak masalah jika kode tidak pernah berjalan untuk pengunjung tertentu, karena pengunjung itu jelas tidak melakukan interaksi yang mengharuskannya.

Semua ini, tentu saja, mengasumsikan bahwa pengunjung Anda telah mengakses halaman Anda dengan browser yang dimiliki JavaScript diaktifkan.

Beberapa pengguna telah menginstal skrip khusus yang dapat berinteraksi dengan halaman web Anda. Script ini dijalankan setelah semua kode langsung Anda, tetapi sebelum kode apa saja yang dilampirkan pada pengendali event load.

Karena halaman Anda tidak tahu apa pun tentang skrip pengguna ini, Anda tidak memiliki cara untuk mengetahui apa yang mungkin dilakukan skrip eksternal ini - mereka dapat mengganti salah satu atau semua kode yang telah Anda lampirkan ke berbagai acara yang telah Anda tetapkan pengolahan. Jika kode ini mengabaikan penangan atau pendengar acara, respons terhadap pemicu acara akan menjalankan kode yang ditentukan oleh pengguna alih-alih, atau sebagai tambahan, kode Anda.

Titik pulang di sini adalah bahwa Anda tidak dapat mengasumsikan bahwa kode yang dirancang untuk berjalan setelah halaman dimuat akan diizinkan untuk menjalankan cara yang Anda rancang itu. Selain itu, perlu diketahui bahwa beberapa browser memiliki opsi yang memungkinkan penonaktifan beberapa penangan acara di dalam browser, dalam hal ini pemicu acara yang relevan tidak akan meluncurkan event handler / listener yang sesuai di browser Anda kode.