JavaScript adalah bahasa scripting atau pemrograman yang memungkinkan Anda untuk menerapkan fitur kompleks pada halaman web – setiap kali halaman web melakukan lebih dari sekadar duduk di sana dan menampilkan informasi statis untuk Anda lihat – menampilkan pembaruan konten yang tepat waktu, peta interaktif, animasi 2D / Grafik 3D, pemutar video jukebox, dll. – Anda bisa bertaruh bahwa JavaScript mungkin terlibat. Ini adalah lapisan ketiga dari kue lapis teknologi web standar, dua di antaranya ( HTML dan CSS ) telah kita bahas secara lebih rinci di bagian lain dari Area Pembelajaran.

Memahami Apa Itu JavaScript ? cake
  • HTML adalah bahasa markup yang kami gunakan untuk menyusun dan memberi makna pada konten web kami, misalnya mendefinisikan paragraf, judul, dan tabel data, atau menyematkan gambar dan video di halaman.
  • CSS adalah bahasa aturan gaya yang kami gunakan untuk menerapkan gaya ke konten HTML kami, misalnya mengatur warna latar belakang dan font, dan meletakkan konten kami dalam beberapa kolom.
  • JavaScript adalah bahasa scripting yang memungkinkan Anda membuat konten yang diperbarui secara dinamis, mengontrol multimedia, menghidupkan gambar, dan hampir semua yang lainnya. (Oke, tidak semuanya, tetapi menakjubkan apa yang dapat Anda capai dengan beberapa baris kode JavaScript.)

Tiga lapisan dibangun di atas satu sama lain dengan baik. Mari kita ambil label teks sederhana sebagai contoh. Kita dapat menandainya menggunakan HTML untuk memberikan struktur dan tujuan:

<p>Player 1: Chris</p>
Memahami Apa Itu JavaScript ? just html

Lalu kita bisa menambahkan beberapa CSS ke dalam campuran agar terlihat bagus:

p {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0,0,200,0.6);
  background: rgba(0,0,200,0.3);
  color: rgba(0,0,200,0.6);
  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}
Memahami Apa Itu JavaScript ? html and css

Dan akhirnya, kita dapat menambahkan beberapa JavaScript untuk menerapkan perilaku dinamis:

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Coba klik pada label teks versi terakhir ini untuk melihat apa yang terjadi (perhatikan juga bahwa Anda dapat menemukan demo ini di GitHub – lihat kode sumber , atau jalankan langsung )!

JavaScript dapat melakukan lebih banyak dari itu – mari kita telusuri apa yang lebih detail.

Jadi apa yang benar-benar dapat dilakukannya?

Bahasa JavaScript sisi-klien inti terdiri dari beberapa fitur pemrograman umum yang memungkinkan Anda melakukan hal-hal seperti:

  • Menyimpan nilai yang berguna di dalam variabel. Dalam contoh di atas misalnya, kami meminta nama baru untuk dimasukkan kemudian menyimpan nama itu dalam variabel yang disebut name.
  • Operasi pada potongan teks (dikenal sebagai “string” dalam pemrograman). Pada contoh di atas kita ambil string “Player 1:” dan bergabung dengan namevariabel untuk membuat label teks lengkap, misalnya ” Player 1: Chris “.
  • Menjalankan kode sebagai respons terhadap peristiwa tertentu yang terjadi pada halaman web. Kami menggunakan clickacara dalam contoh kami di atas untuk mendeteksi kapan tombol diklik dan kemudian menjalankan kode yang memperbarui label teks.
  • Dan banyak lagi!

Namun yang lebih menarik adalah fungsi yang dibangun di atas bahasa JavaScript sisi klien. Apa yang disebut Application Programming Interfaces ( APIs ) memberi Anda kekuatan tambahan untuk digunakan dalam kode JavaScript Anda.

API adalah set blok pembangun kode yang siap pakai yang memungkinkan pengembang mengimplementasikan program yang sulit atau tidak mungkin dilaksanakan. Mereka melakukan hal yang sama untuk pemrograman yang dilakukan oleh kit furnitur siap pakai untuk pembangunan rumah – jauh lebih mudah untuk mengambil panel yang sudah jadi dan menyatukannya untuk membuat rak buku daripada mengerjakan sendiri desainnya, pergi dan temukan perbaiki kayu, potong semua panel dengan ukuran dan bentuk yang tepat, temukan sekrup berukuran benar, lalu satukan untuk membuat rak buku.

Mereka umumnya terbagi dalam dua kategori.

Memahami Apa Itu JavaScript ? browser

API Peramban dibuat di dalam peramban web Anda, dan dapat mengekspos data dari lingkungan komputer di sekitarnya, atau melakukan hal-hal rumit yang bermanfaat. Sebagai contoh:

  • Ini DOM (Document Object Model) APImemungkinkan Anda untuk memanipulasi HTML dan CSS, membuat, menghapus dan mengubah HTML, secara dinamis menerapkan gaya baru ke halaman Anda, dll. Setiap kali Anda melihat jendela sembulan muncul di halaman, atau beberapa konten baru yang ditampilkan (seperti yang kita lihat di atas di demo sederhana) misalnya, itulah DOM yang sedang beraksi.
  • The Geolocation APImengambil informasi geografis. Ini adalah cara Google Maps menemukan lokasi Anda dan memplotnya di peta.
  • The Canvasdan WebGLAPI memungkinkan Anda untuk membuat animasi 2D dan 3D grafis. Orang-orang melakukan beberapa hal menakjubkan menggunakan teknologi web ini — lihat Eksperimen Chrome dan contoh web .
  • API Audio dan Video menyukai HTMLMediaElementdan WebRTCmemungkinkan Anda untuk melakukan hal-hal yang sangat menarik dengan multimedia, seperti memutar audio dan video langsung di halaman web, atau mengambil video dari kamera web Anda dan menampilkannya di komputer orang lain (coba demo Snapshot sederhana kami untuk mendapatkan ide).

Catatan : Banyak demo di atas tidak akan berfungsi di browser yang lebih lama – saat bereksperimen, itu ide yang baik untuk menggunakan browser modern seperti Firefox, Chrome, Edge atau Opera untuk menjalankan kode Anda. Anda harus mempertimbangkan pengujian lintas browser lebih detail ketika Anda semakin dekat dengan memberikan kode produksi (yaitu kode nyata yang akan digunakan pelanggan nyata).

API pihak ketiga tidak dibangun ke dalam browser secara default, dan Anda umumnya harus mengambil kode dan informasi mereka dari suatu tempat di Web. Sebagai contoh:

  • The Twitter API memungkinkan Anda untuk melakukan hal-hal seperti menampilkan tweets terbaru Anda di website Anda.
  • The Google Maps API dan OpenStreetMap API memungkinkan Anda untuk embed peta kustom ke situs web Anda, dan fungsi seperti lainnya.

Catatan : API ini bersifat lanjutan, dan kami tidak akan membahasnya di modul ini. Anda dapat mengetahui lebih banyak tentang ini di modul API web sisi klien kami .

Ada banyak lagi yang tersedia! Namun, jangan terlalu bersemangat dulu. Anda tidak akan dapat membangun Facebook, Google Maps, atau Instagram berikutnya setelah mempelajari JavaScript selama 24 jam – ada banyak dasar yang harus dicakup terlebih dahulu. Dan itulah mengapa Anda di sini – mari kita lanjutkan!

Apa yang dilakukan JavaScript di halaman Anda?

Di sini kita akan mulai melihat beberapa kode, dan sambil menjelajahi apa yang sebenarnya terjadi ketika Anda menjalankan JavaScript di halaman Anda.

Mari kita rekap secara singkat kisah tentang apa yang terjadi ketika Anda memuat halaman web di browser (pertama kali dibicarakan dalam artikel Cara kerja CSS kami ). Ketika Anda memuat halaman web di browser Anda, Anda menjalankan kode Anda (HTML, CSS, dan JavaScript) di dalam lingkungan eksekusi (tab browser). Ini seperti sebuah pabrik yang mengambil bahan baku (kode) dan mengeluarkan produk (halaman web).

Memahami Apa Itu JavaScript ? execution

JavaScript dieksekusi oleh mesin JavaScript browser, setelah HTML dan CSS telah dirakit dan disatukan ke dalam halaman web. Ini memastikan bahwa struktur dan gaya halaman sudah ada pada saat JavaScript mulai berjalan.

Ini adalah hal yang baik, karena penggunaan JavaScript yang sangat umum adalah secara dinamis memodifikasi HTML dan CSS untuk memperbarui antarmuka pengguna, melalui Document Model Model API (seperti yang disebutkan di atas). Jika JavaScript dimuat dan mencoba berjalan sebelum HTML dan CSS ada di sana untuk mempengaruhi, maka kesalahan akan terjadi.

Keamanan browser

Setiap tab browser adalah ember tersendiri untuk menjalankan kode (ember ini disebut “lingkungan eksekusi” dalam istilah teknis) – ini berarti bahwa dalam kebanyakan kasus kode di setiap tab berjalan sepenuhnya terpisah, dan kode dalam satu tab tidak dapat secara langsung memengaruhi kode di tab lain – atau di situs web lain. Ini adalah langkah pengamanan yang baik – jika ini tidak terjadi, maka para perompak dapat mulai menulis kode untuk mencuri informasi dari situs web lain, dan hal-hal buruk lainnya.

Catatan : Ada beberapa cara untuk mengirim kode dan data antara berbagai situs web / tab dengan cara yang aman, tetapi ini adalah teknik canggih yang tidak akan kami bahas dalam kursus ini.

Urutan menjalankan JavaScript

Ketika browser menemukan blok JavaScript, ia menjalankannya secara berurutan, dari atas ke bawah. Ini berarti Anda harus berhati-hati dalam urutan apa Anda memasukkannya. Misalnya, mari kita kembali ke blok JavaScript yang kita lihat dalam contoh pertama kami:

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}

Di sini kita memilih paragraf teks (baris 1), kemudian melampirkan pendengar acara ke dalamnya (baris 3) sehingga ketika paragraf diklik, updateName()blok kode (baris 5–8) dijalankan. The updateName()blok kode (jenis blok kode dapat digunakan kembali disebut “fungsi”) meminta user untuk nama baru, dan kemudian memasukkan nama itu ke dalam paragraf untuk memperbarui tampilan.

Jika Anda menukar urutan dua baris kode pertama, itu tidak akan berfungsi lagi – sebagai gantinya, Anda akan mendapatkan kesalahan yang dikembalikan di konsol pengembang browser – TypeError: para is undefined. Ini berarti bahwa paraobjek belum ada, jadi kami tidak dapat menambahkan pendengar acara ke sana.

Catatan : Ini adalah kesalahan yang sangat umum – Anda harus berhati-hati bahwa objek yang dirujuk dalam kode Anda ada sebelum Anda mencoba melakukan hal-hal kepada mereka.

Kode ditafsirkan versus dikompilasi

Anda mungkin mendengar istilah diinterpretasikan dan disusun dalam konteks pemrograman. Dalam bahasa yang ditafsirkan, kode dijalankan dari atas ke bawah dan hasil menjalankan kode segera dikembalikan. Anda tidak perlu mengubah kode menjadi bentuk yang berbeda sebelum browser menjalankannya. Kode diterima dalam bentuk teks yang ramah-programmer dan diproses langsung dari itu.

Bahasa yang dikompilasi di sisi lain diubah (dikompilasi) menjadi bentuk lain sebelum dijalankan oleh komputer. Sebagai contoh, C / C ++ dikompilasi ke dalam bahasa assembly yang kemudian dijalankan oleh komputer. Program dijalankan dari format biner yang dihasilkan dari kode sumber program semula.

JavaScript adalah bahasa pemrograman yang ditafsirkan ringan. Peramban web menerima kode JavaScript dalam bentuk teks aslinya dan menjalankan skrip darinya. Dari sudut pandang teknis, sebagian besar penerjemah JavaScript modern benar-benar menggunakan teknik yang disebut just-in-time compiling untuk meningkatkan kinerja; kode sumber JavaScript dikompilasi ke dalam format yang lebih cepat, biner, saat skrip digunakan, sehingga dapat dijalankan secepat mungkin. Namun, JavaScript masih dianggap sebagai bahasa intepretet, karena kompilasi ditangani pada saat run time, daripada sebelumnya.

Ada keuntungan untuk kedua jenis bahasa ini, tetapi kami tidak akan membahasnya sekarang.

Kode sisi server versus sisi klien

Anda mungkin juga mendengar istilah sisi-server dan kode sisi-klien , terutama dalam konteks pengembangan web. Kode sisi klien adalah kode yang dijalankan di komputer pengguna – ketika halaman web dilihat, kode sisi klien halaman diunduh, kemudian jalankan dan ditampilkan oleh browser. Dalam modul ini kita secara eksplisit berbicara tentang JavaScript sisi klien .

Kode sisi server dijalankan di server, kemudian hasilnya diunduh dan ditampilkan di browser. Contoh bahasa web server-side yang populer termasuk PHP, Python, Ruby, ASP.NET dan … JavaScript! JavaScript juga dapat digunakan sebagai bahasa sisi-server, misalnya di lingkungan Node.js yang populer – Anda dapat mengetahui lebih lanjut tentang JavaScript sisi-server di Situs Web Dinamis kami  topik pemrograman sisi-server .

Kode dinamis versus statis

Kata dinamis digunakan untuk menggambarkan JavaScript sisi klien, dan bahasa sisi server – mengacu pada kemampuan untuk memperbarui tampilan halaman web / aplikasi untuk menunjukkan hal-hal yang berbeda dalam keadaan yang berbeda, menghasilkan konten baru sesuai kebutuhan. Kode sisi server secara dinamis menghasilkan konten baru di server, misalnya menarik data dari database, sedangkan JavaScript sisi klien secara dinamis menghasilkan konten baru di dalam browser pada klien, misalnya membuat tabel HTML baru, mengisinya dengan data yang diminta dari server , lalu menampilkan tabel di halaman web yang ditunjukkan kepada pengguna. Maknanya sedikit berbeda dalam dua konteks, tetapi terkait, dan kedua pendekatan (sisi server dan sisi klien) biasanya bekerja bersama.

Halaman web tanpa konten yang diperbarui secara dinamis disebut statis – hanya menampilkan konten yang sama setiap saat.

Bagaimana Anda menambahkan JavaScript ke halaman Anda?

JavaScript diterapkan ke halaman HTML Anda dengan cara yang mirip dengan CSS. Sedangkan CSS menggunakan <link>elemen untuk menerapkan stylesheet eksternal dan <style>elemen untuk menerapkan stylesheet internal ke HTML, JavaScript hanya membutuhkan satu teman di dunia HTML – <script>elemen. Mari kita pelajari cara kerjanya.

JavaScript internal

  1. Pertama-tama, buat salinan lokal dari file contoh kami apply-javascript.html . Simpan di direktori di tempat yang masuk akal.
  2. Buka file di browser web Anda dan di editor teks Anda. Anda akan melihat bahwa HTML membuat halaman web sederhana yang berisi tombol yang dapat diklik.
  3. Selanjutnya, buka editor teks Anda dan tambahkan yang berikut di kepala Anda – tepat sebelum </head>tag penutup Anda :<script> // JavaScript goes here </script>
  4. Sekarang kita akan menambahkan beberapa JavaScript di dalam <script>elemen kita untuk membuat halaman melakukan sesuatu yang lebih menarik – tambahkan kode berikut tepat di bawah baris “// JavaScript di sini”:document.addEventListener("DOMContentLoaded", function() { function createParagraph() { let para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); } const buttons = document.querySelectorAll('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); } });
  5. Simpan file Anda dan segarkan browser – sekarang Anda akan melihat bahwa ketika Anda mengklik tombol, paragraf baru dihasilkan dan ditempatkan di bawah.

Catatan : Jika contoh Anda sepertinya tidak berhasil, ulangi langkah-langkahnya lagi dan periksa apakah Anda melakukan semuanya dengan benar. Apakah Anda menyimpan salinan lokal kode awal sebagai .htmlfile? Apakah Anda menambahkan <script>elemen Anda tepat sebelum </head>tag? Apakah Anda memasukkan JavaScript persis seperti yang ditunjukkan? JavaScript peka huruf besar-kecil, dan sangat cerewet, jadi Anda harus memasukkan sintaksisnya persis seperti yang diperlihatkan, jika tidak, itu mungkin tidak berfungsi.

Catatan : Anda dapat melihat versi ini di GitHub sebagai apply-javascript-internal.html .

JavaScript eksternal

Ini berfungsi dengan baik, tetapi bagaimana jika kita ingin meletakkan JavaScript di file eksternal? Mari kita jelajahi ini sekarang.

  1. Pertama, buat file baru di direktori yang sama dengan sampel file HTML Anda. Sebut saja script.js– pastikan memiliki ekstensi nama file .js, karena itulah yang dikenali sebagai JavaScript.
  2. Ganti <script>elemen Anda saat ini dengan yang berikut:<script src="script.js" defer></script>
  3. Di dalam script.js, tambahkan skrip berikut:function createParagraph() { let para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); } const buttons = document.querySelectorAll('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addEventListener('click', createParagraph); }
  4. Simpan dan segarkan peramban Anda, dan Anda akan melihat hal yang sama! Ini berfungsi sama, tapi sekarang kita punya JavaScript di file eksternal. Ini umumnya merupakan hal yang baik dalam hal mengatur kode Anda dan membuatnya dapat digunakan kembali di banyak file HTML. Plus, HTML lebih mudah dibaca tanpa ada banyak skrip yang dibuang di dalamnya.

Catatan : Anda dapat melihat versi ini di GitHub sebagai apply-javascript-external.html dan script.js.

Penangan JavaScript sebaris

Perhatikan bahwa kadang-kadang Anda akan menemukan bit kode JavaScript aktual yang hidup di dalam HTML. Mungkin terlihat seperti ini:

function createParagraph() {
  let para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}
<button onclick="createParagraph()">Click me!</button>

Anda dapat mencoba versi demo kami di bawah ini.

Demo ini memiliki fungsi yang persis sama seperti pada dua bagian sebelumnya, kecuali bahwa <button>elemen tersebut menyertakan onclickpenangan inline untuk membuat fungsi berjalan ketika tombol ditekan.

Tolong jangan lakukan ini. Merupakan praktik yang buruk untuk mencemari HTML Anda dengan JavaScript, dan itu tidak efisien – Anda harus menyertakan onclick="createParagraph()"atribut pada setiap tombol yang Anda inginkan untuk menerapkan JavaScript.

Menggunakan konstruksi JavaScript murni memungkinkan Anda memilih semua tombol menggunakan satu instruksi. Kode yang kami gunakan di atas untuk melayani tujuan ini terlihat seperti ini:

const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
  buttons[i].addEventListener('click', createParagraph);
}

Ini mungkin sedikit lebih lama daripada onclickatribut, tetapi itu akan bekerja untuk semua tombol – tidak peduli berapa banyak yang ada di halaman, atau berapa banyak yang ditambahkan atau dihapus. JavaScript tidak perlu diubah.

Catatan : Coba edit versi Anda apply-javascript.htmldan tambahkan beberapa tombol lagi ke dalam file. Ketika Anda memuat ulang, Anda harus menemukan bahwa semua tombol ketika diklik akan membuat paragraf. Rapi, ya?

Strategi pemuatan skrip

Ada sejumlah masalah yang terkait dengan membuat skrip dimuat pada waktu yang tepat. Tidak ada yang sesederhana kelihatannya! Masalah umum adalah bahwa semua HTML pada halaman dimuat sesuai urutan kemunculannya. Jika Anda menggunakan JavaScript untuk memanipulasi elemen pada halaman (atau lebih tepatnya, Document Object Model ), kode Anda tidak akan berfungsi jika JavaScript dimuat dan diuraikan sebelum HTML yang Anda coba lakukan sesuatu.

Dalam contoh kode di atas, dalam contoh internal dan eksternal JavaScript dimuat dan dijalankan di kepala dokumen, sebelum badan HTML diuraikan. Ini dapat menyebabkan kesalahan, jadi kami menggunakan beberapa konstruksi untuk menyelesaikannya.

Dalam contoh internal, Anda dapat melihat struktur ini di sekitar kode:

document.addEventListener("DOMContentLoaded", function() {
  ...
});

Ini adalah pendengar acara, yang mendengarkan acara “DOMContentLoaded” peramban, yang menandakan bahwa badan HTML sudah dimuat dan diuraikan sepenuhnya. JavaScript di dalam blok ini tidak akan berjalan sampai setelah peristiwa itu dipecat, oleh karena itu kesalahannya dihindari (Anda akan belajar tentang peristiwa nanti dalam kursus).

Pada contoh eksternal, kami menggunakan fitur JavaScript yang lebih modern untuk menyelesaikan masalah, deferatribut, yang memberi tahu browser untuk terus mengunduh konten HTML setelah <script>elemen tag tercapai.

<script src="script.js" defer></script>

Dalam hal ini skrip dan HTML akan dimuat secara bersamaan dan kode akan berfungsi.

Catatan : Dalam kasus eksternal, kami tidak perlu menggunakan DOMContentLoadedacara karena deferatribut menyelesaikan masalah untuk kami. Kami tidak menggunakan defersolusi untuk contoh JavaScript internal karena deferhanya berfungsi untuk skrip eksternal.

Solusi kuno untuk masalah ini dulunya adalah dengan meletakkan elemen skrip Anda tepat di bagian bawah tubuh (misalnya tepat sebelum </body>tag), sehingga akan memuat setelah semua HTML diuraikan. Masalah dengan solusi ini adalah bahwa pemuatan / penguraian skrip benar-benar diblokir sampai HTML DOM telah dimuat. Pada situs yang lebih besar dengan banyak JavaScript, ini dapat menyebabkan masalah kinerja utama, memperlambat situs Anda.

async dan tunda

Sebenarnya ada dua cara kita dapat mem-bypass masalah skrip pemblokiran – asyncdan defer. Mari kita lihat perbedaan antara keduanya.

Skrip Async akan mengunduh skrip tanpa memblokir rendering halaman dan akan mengeksekusinya segera setelah skrip selesai diunduh. Anda tidak mendapatkan jaminan bahwa skrip akan berjalan dalam urutan tertentu, hanya saja skrip tersebut tidak akan menghentikan tampilan halaman lainnya. Cara terbaik untuk digunakan asyncketika skrip di halaman berjalan secara independen dari satu sama lain dan tidak bergantung pada skrip lain pada halaman.

Misalnya, jika Anda memiliki elemen skrip berikut:

<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>

Anda tidak dapat bergantung pada urutan skrip akan memuat. jquery.jsDapat memuat sebelum atau sesudah script2.jsdan script3.jsdan jika ini masalahnya, fungsi apa pun dalam skrip yang bergantung pada jqueryakan menghasilkan kesalahan karena jquerytidak akan ditentukan pada saat skrip dijalankan.

defer akan menjalankan skrip sesuai urutan yang muncul di halaman dan menjalankannya segera setelah skrip dan konten diunduh:

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

Semua skrip dengan deferatribut akan dimuat dalam urutan yang muncul pada halaman. Jadi pada contoh kedua, kita dapat memastikan bahwa itu jquery.jsakan memuat sebelum script2.jsdan script3.jsdan itu script2.jsakan memuat sebelumnya script3.js.

Untuk meringkas:

  • Jika skrip Anda tidak perlu menunggu penguraian dan dapat berjalan secara independen tanpa dependensi, maka gunakan async.
  • Jika skrip Anda perlu menunggu penguraian dan bergantung pada skrip lain, muat menggunakan defer dan letakkan <script>elemen yang sesuai dalam urutan yang Anda inginkan untuk dijalankan oleh browser.

sumber mozila