Lebih baik membuat file eksternal untuk kode JS Anda. Lebih baik juga memiliki satu atau dua file yang Anda layani untuk klien. Namun, lebih baik juga membagi kode JS Anda menjadi beberapa file untuk masalah pemeliharaan. Untuk dapat melakukan ini, Anda dapat menggunakan preprosesor seperti Gulp yang akan menggabungkan berbagai file JS Anda menjadi satu file
Melayani lebih sedikit file lebih baik karena klien akan memiliki lebih sedikit permintaan HTTP untuk ditangani
Apakah meletakkannya di halaman lebih cepat dimuat?
Ya, jelas lebih cepat karena Anda hanya melakukan satu permintaan untuk HTML, sementara Anda akan melakukan banyak permintaan (setidaknya 2) dengan kode JS Anda sebagai eksternal. Ini hanya jika kode JS Anda tidak diperkecil di kedua sisi, dan ini tidak memperhitungkan betapa sulitnya mempertahankan kode Anda jika semuanya ada dalam satu halaman HTML tunggal
Bisakah saya mengubah izin untuk menolak permintaan pengguna untuk kode tersebut, tetapi halaman html masih dapat memanggil kode tersebut?
Tidak, kamu tidak bisa. Kode JS, seperti kode CSS dan kode HTML adalah konten statis. Itu berarti setelah berada di browser, klien dapat mengunduhnya dan kontennya secara keseluruhan. Setiap file, gambar, skrip terbuka untuk diunduh. Namun, Anda dapat mengecilkan/memperkecil kode Anda sehingga lebih sulit bagi manusia untuk menggunakannya. Itu hanya konsekuensi dari uglifikasi, yang dibuat untuk kinerja terlebih dahulu
Anda berencana untuk menampilkan tanggal dan waktu saat ini di semua halaman web Anda. Misalkan Anda menulis kode dan menyalinnya ke semua halaman web Anda (katakanlah 100). Namun nanti, Anda ingin mengubah format tampilan tanggal atau waktu. Dalam hal ini, Anda harus melakukan perubahan di semua 100 halaman web. Ini akan menjadi tugas yang sangat memakan waktu dan sulit
Jadi, simpan kode JavaScript di file baru dengan ekstensi. js. Kemudian, tambahkan satu baris kode di semua halaman web Anda untuk menunjuk ke Anda. file js seperti ini
<script type="text/javascript" src="currentdetails.js">Catatan. Diasumsikan bahwa. js dan semua halaman web Anda berada di folder yang sama. Jika eksternal. js berada di folder yang berbeda, Anda perlu menentukan path lengkap ke file Anda di atribut src
Cara menautkan JavaScript eksternal
var currentDate = new Date(); var day = currentDate.getDate(); var month = currentDate.getMonth() + 1; var monthName; var hours = currentDate.getHours(); var mins = currentDate.getMinutes(); var secs = currentDate.getSeconds(); var strToAppend; if (hours >12 ) { hours1 = "0" + (hours - 12); strToAppend = "PM"; } else if (hours <12) { hours1 = "0" + hours; strToAppend = "AM"; } else { hours1 = hours; strToAppend = "PM"; } if(mins<10) mins = "0" + mins; if (secs<10) secs = "0" + secs; switch (month) { case 1: monthName = "January"; break; case 2: monthName = "February"; break; case 3: monthName = "March"; break; case 4: monthName = "April"; break; case 5: monthName = "May"; break; case 6: monthName = "June"; break; case 7: monthName = "July"; break; case 8: monthName = "August"; break; case 9: monthName = "September"; break; case 10: monthName = "October"; break; case 11: monthName = "November"; break; case 12: monthName = "December"; break; } var year = currentDate.getFullYear(); var myString; myString = "Today is " + day + " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + "."; document.write(myString); _Ini adalah detail Anda saat ini. file js. Jangan khawatir melihat baris kode yang panjang. Anda akan belajar kode segera. Buat perubahan pada dokumen HTML Anda seperti ini
Kapan Menggunakan Kode JavaScript Internal dan Eksternal?
Jika Anda hanya memiliki beberapa baris kode yang khusus untuk halaman web tertentu, lebih baik menyimpan kode JavaScript Anda secara internal di dalam dokumen HTML Anda.
Di sisi lain, jika kode JavaScript Anda digunakan di banyak halaman web, Anda harus mempertimbangkan untuk menyimpan kode Anda di file terpisah. Dalam hal ini, jika Anda ingin membuat beberapa perubahan pada kode Anda, Anda hanya perlu mengubah hanya satu file yang memudahkan pemeliharaan kode. Jika kode Anda terlalu panjang, lebih baik menyimpannya di file terpisah. Ini membantu dalam debugging mudah
Menempatkan JavaScript langsung ke dalam file yang berisi HTML untuk halaman web sangat ideal untuk skrip pendek yang digunakan saat mempelajari JavaScript. Saat Anda mulai membuat skrip untuk menyediakan fungsionalitas yang signifikan untuk halaman web Anda, jumlah JavaScript bisa menjadi sangat besar, dan menyertakan skrip besar ini langsung di halaman web menimbulkan dua masalah.
- Ini dapat memengaruhi peringkat halaman Anda dengan berbagai mesin telusur jika JavaScript menggunakan sebagian besar konten halaman. Ini menurunkan frekuensi penggunaan kata kunci dan frase yang mengidentifikasi isi konten
- Ini mempersulit penggunaan kembali fitur JavaScript yang sama di beberapa halaman di situs Anda. Setiap kali Anda ingin menggunakannya di halaman yang berbeda, Anda harus menyalinnya dan menyisipkannya ke setiap halaman tambahan, ditambah perubahan apa pun yang diperlukan oleh lokasi baru.
Jauh lebih baik jika kita membuat JavaScript terpisah dari halaman web yang menggunakannya
Memilih Kode JavaScript untuk Dipindahkan
Untungnya, pengembang HTML dan JavaScript telah memberikan solusi untuk masalah ini. Kita dapat memindahkan JavaScript kita dari halaman web dan tetap berfungsi persis sama
Hal pertama yang perlu kita lakukan untuk membuat JavaScript eksternal ke halaman yang menggunakannya adalah memilih kode JavaScript itu sendiri (tanpa tag skrip HTML di sekitarnya) dan menyalinnya ke dalam file terpisah
Misalnya, jika skrip berikut ada di halaman kami, kami akan memilih dan menyalin bagian yang dicetak tebal
var halo = 'Halo Dunia';
dokumen. tulis(halo);
Dulu ada praktik menempatkan JavaScript dalam dokumen HTML di dalam tag komentar untuk menghentikan browser lama menampilkan kode; .
Jika Anda mewarisi halaman HTML dari orang lain dengan JavaScript di dalam tag komentar, Anda tidak perlu menyertakan tag dalam kode JavaScript yang Anda pilih dan salin
For example, you would only copy the bold code, leaving out the HTML comment tags in the code sample below:
Menyimpan Kode JavaScript sebagai File
Setelah Anda memilih kode JavaScript yang ingin Anda pindahkan, rekatkan ke file baru. Beri file nama yang menyarankan apa yang dilakukan skrip atau mengidentifikasi halaman tempat skrip berada
Berikan file a. akhiran js agar Anda tahu bahwa file tersebut berisi JavaScript. Misalnya kita mungkin menggunakan halo. js sebagai nama file untuk menyimpan JavaScript dari contoh di atas
Menautkan ke Skrip Eksternal
Sekarang setelah JavaScript kami disalin dan disimpan ke dalam file terpisah, yang perlu kami lakukan hanyalah mereferensikan file skrip eksternal pada dokumen halaman web HTML kami
Pertama, hapus semua yang ada di antara tag skrip
Ini belum memberi tahu halaman apa yang harus dijalankan JavaScript, jadi selanjutnya kita perlu menambahkan atribut tambahan ke tag skrip itu sendiri yang memberi tahu browser di mana menemukan skrip
Contoh kita sekarang akan terlihat seperti ini
Atribut src memberi tahu browser nama file eksternal tempat kode JavaScript untuk halaman web ini harus dibaca (yaitu halo. js dalam contoh kita di atas).
Anda tidak harus meletakkan semua JavaScript Anda di lokasi yang sama dengan dokumen halaman web HTML Anda. Anda mungkin ingin memasukkannya ke dalam folder JavaScript terpisah. Dalam hal ini, Anda cukup mengubah nilai di atribut src untuk menyertakan lokasi file. Anda dapat menentukan alamat web relatif atau absolut untuk lokasi file sumber JavaScript
Menggunakan Apa yang Anda Ketahui
Sekarang Anda dapat mengambil skrip apa pun yang telah Anda tulis atau skrip apa pun yang Anda peroleh dari pustaka skrip dan memindahkannya dari kode laman web HTML ke file JavaScript yang direferensikan secara eksternal
Anda kemudian dapat mengakses file skrip tersebut dari halaman web mana pun hanya dengan menambahkan tag skrip HTML yang sesuai yang memanggil file skrip tersebut
Kutip Artikel ini
Format
Kutipan Anda
Chapman, Stephen. "Cara Membuat dan Menggunakan File JavaScript Eksternal. "PikirCo. https. // www. thinkco. com/how-to-create-and-use-external-javascript-files-4072716 (diakses 15 Januari 2023)