Bagaimana cara menggunakan di mana kode javascript ditempatkan?

Question

Hallo sobat Webhozz jumpa lagi dengan saya, kali ini saya ingin berbagi artikel tentang JavaScript deployment. Agar sobat Webhozz tidak bingung, mari masuk ke pembahasan artikel sobat Webhozz

Table of Contents Show

JavaScript internal
JavaScript eksternal
Bagaimana kode JavaScript dimasukkan atau ditempatkan dalam dokumen HTML?
Bagaimana menjalankan JavaScript Coba jelaskan?
Bagaimana cara membuat fungsi dalam JavaScript?
Apa fungsi JavaScript dan berikan contohnya?

Seperti CSS, kode JavaScript dapat ditempatkan secara internal dalam dokumen HTML, atau ditempatkan secara eksternal dalam ekstensi file. js. Seperti halnya CSS, metode penempatan JavaScript eksternal lebih direkomendasikan. Selain mempermudah pengelolaan kode karena terpisah dari dokumen HTML, file JavaScript akan di-cache oleh browser untuk mempercepat waktu loading halaman web pada sesi berikutnya.

Jika ditempatkan secara internal, kode JavaScript dapat disisipkan pada elemen head dan elemen body. Berbeda dengan CSS yang direkomendasikan untuk didefinisikan di elemen head, kode JavaScript direkomendasikan untuk ditempatkan di elemen body di bagian akhir. Alasannya karena halaman web dimuat lebih cepat, tidak terbebani waktu untuk memuat kode JavaScript terlebih dahulu. Ini juga berlaku untuk metode referensi file eksternal JavaScript

Penulisan kode JavaScript secara internal di dokumen HTML diletakkan antara tag pembuka .

Untuk merujuk file JavaScript eksternal di dokumen HTML, sisipkan URL file-nya menggunakan atribut src di tag pembuka

Sebagai catatan, pada teknik lama, penulisan tag pembuka

<script type="text/javascript" language="javascript">
//. tulisan kode javascript disini
</script>

Nah cara itu sudah tidak disarankan lagi, kita tulis saja tag <script> tanpa atribut apapun seperti pada contoh di bawah ini

<script>
//. tulisan kode javascript disini
</script>

_

Jenis atribut dan bahasa adalah "warisan" dari era perang browser. Saat itu kode script yang tersedia tidak hanya javascript, tetapi juga jscript dan vbscript. Saat ini semua web browser menjadikan javascript sebagai bahasa default, sehingga atribut type dan language tidak perlu ditulis lagi

Menurut Anda di mana tag <script>_ ini harus ditempatkan?

Lokasi penempatan dipengaruhi oleh 2 aspek yaitu performance dan execution. Mari kita bahas satu per satu

kode javascript di tag head

Menempatkan kode di atas seperti ini jika terkait dengan performa yang sudah saya sebutkan tadi, maka beberapa web developer menyarankan untuk tidak melakukannya tetapi disarankan untuk meletakkannya di bagian bawah tag

<script>
//. tulisan kode javascript disini
</script>

5 yaitu sebelum tag penutup

<script>
//. tulisan kode javascript disini
</script>

_6 seperti pada contoh di bawah ini

kode javascript di tag body

Untuk javascript internal, peningkatan performa tidak akan terlihat. Posisi javascript di bawah seperti di atas lebih ditunjukan untuk javascript eksternal. Jika dikaitkan dengan proses eksekusi, posisi kode javascript dapat mempengaruhi alur proses dari web browser

Dengan menggunakan metode internal javascript, kode program kita sedikit lebih rapi. Semua kode javascript ditempatkan di dalam tag <script>. Tapi kode ini masih satu halaman dengan html, akibatnya kita tidak bisa menggunakan kode javascript di halaman lain

JavaScript eksternal

Metode input javascript yang paling direkomendasikan adalah javascript eksternal. Disini kita membuat custom file yang berisi kode program javascript. File ini nantinya akan dipanggil oleh halaman html yang membutuhkannya. Sebagai latihan silahkan buat file baru yang isinya sebagai berikut

 alert("Belajar External JavaScript");

_

Untuk saat ini hanya baris ini saja, karena kode javascript lainnya belum kita bahas. Simpan file di atas dengan nama

<script>
//. tulisan kode javascript disini
</script>

_8 pada folder Tutorial JavaScript, bisa menggunakan nama lain asalkan ekstensinya harus

<script>
//. tulisan kode javascript disini
</script>

9. Untuk memasukkan file javascript

<script>
//. tulisan kode javascript disini
</script>

_8 ke dalam html kita perlu menggunakan atribut

 alert("Belajar External JavaScript");

1 dari tag <script>. Silahkan buat kode html seperti contoh di bawah ini

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tutorial JavaScript</title>
</head>

<body>
    <h1>Tutorial JavaScript</h1>
    <script src="belajarjs.js"></script>
</body>

</html>

File html saya simpan di folder Tutorial JavaScript dengan nama

 alert("Belajar External JavaScript");

3 sehingga ada 2 file di dalam folder tersebut

penempatan file javascript

Kemudian jika Anda menjalankan kode yang telah kita buat tadi di web browser, maka akan muncul seperti gambar di bawah ini

hasil dari kode javascript eksternal

Hasilnya adalah jendela sembulan dengan teks "Pelajari JavaScript Eksternal". Artinya kode javascript yang terletak di

<script>
//. tulisan kode javascript disini
</script>

8 telah berhasil dijalankan. Sama seperti atribut src pada tag

 alert("Belajar External JavaScript");

_5, file javascript juga dapat menggunakan alamat relatif atau absolut. Kita tinggal menginput file javascript yang ada di server lain, seperti contoh berikut

<script src="https://code.jquery-3.1.0.js"></script>

Teknik seperti ini sering digunakan untuk mengakses file javascript yang ada di CDN (content delivery network). Untuk memasukkan file javascript eksternal, pasangan tag penutup

 alert("Belajar External JavaScript");

6 harus tetap ditulis meskipun tag <script> dan

 alert("Belajar External JavaScript");

6 tidak mengandung kode apapun. Kami tidak dapat menulis tag penutup sendiri sebagai berikut

<script src="belajarjs.js" />

Di antara tag <script> dan

 alert("Belajar External JavaScript");

6 tidak boleh ada kode internal javascript lainnya

<script src="belajarjs.js">
    alert("Belajar External JavaScript");
</script>

Jika Anda perlu memanggil lebih dari satu dile javascript eksternal, Anda dapat menulis tag <script> beberapa kali

<script src="belajarjs1.js"></script>
<script src="belajarjs2.js"></script>
<script src="belajarjs3.js"></script>

Yang perlu diperhatikan, file javascript ini dijalankan secara berurutan mulai dari atas. File

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tutorial JavaScript</title>
</head>

<body>
    <h1>Tutorial JavaScript</h1>
    <script src="belajarjs.js"></script>
</body>

</html>

_2 diproses terlebih dahulu, kemudian diikuti oleh

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tutorial JavaScript</title>
</head>

<body>
    <h1>Tutorial JavaScript</h1>
    <script src="belajarjs.js"></script>
</body>

</html>

3 dan terakhir

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tutorial JavaScript</title>
</head>

<body>
    <h1>Tutorial JavaScript</h1>
    <script src="belajarjs.js"></script>
</body>

</html>

4

Kita perlu mengatur posisi file jika ada kode javascript yang bergantung pada file lain. Misalkan Anda membuat program yang membutuhkan pustaka jQuery, panggilan ke pustaka ini harus ditulis terlebih dahulu. jika tidak, kode program tidak akan berjalan

Dengan memisahkan kode program javascript menjadi file-file terpisah, kita dapat melakukan penggunaan kembali kode, yaitu menggunakan 1 file javascript oleh banyak halaman html. Halaman hanya memanggil file ini menggunakan tag <script>

Fitur cache pada web browser juga dapat mempercepat akses website dengan cara menyimpan file javascript di dalam cache. Saat mengunjungi halaman html yang memiliki file javascript eksternal, browser web akan mengunduh file-file ini dan menyimpannya di cache. Saat pindah ke halaman lain yang menggunakan file javascript eksternal, browser web hanya mengambilnya di cache, tidak perlu mengunduh ulang seluruh file (selama file javascript eksternal persis sama)

Di balik keunggulannya, javascript eksternal juga memiliki satu kekurangan. Spesifikasi protokol HTTP/1. 1 menyatakan bahwa browser web harus berhenti memproses HTML saat mengunduh file javascript eksternal. Situasinya mirip dengan menulis fungsi

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tutorial JavaScript</title>
</head>

<body>
    <h1>Tutorial JavaScript</h1>
    <script src="belajarjs.js"></script>
</body>

</html>

6 di bagian

<script>
//. tulisan kode javascript disini
</script>

3. Seperti yang telah kita lihat, fungsi

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tutorial JavaScript</title>
</head>

<body>
    <h1>Tutorial JavaScript</h1>
    <script src="belajarjs.js"></script>
</body>

</html>

_6 akan menahan browser web untuk memproses kode html hingga tombol OK diklik

Bagaimana kode JavaScript dimasukkan atau ditempatkan dalam dokumen HTML?

Kode Javascript biasanya diletakkan di atas (pada bagian head) pada HTML . Ini untuk memastikan bahwa skrip ini dimuat terlebih dahulu sebelum dipanggil.

Bagaimana menjalankan JavaScript Coba jelaskan?

Aktifkan JavaScript di browser Anda .

Buka Chrome di komputer Anda

Klik. Pengaturan

Klik Keamanan dan Privasi

Klik Setelan situs

Klik JavaScript

Pilih Situs dapat menggunakan JavaScript

Bagaimana cara membuat fungsi dalam JavaScript?

untuk membuat fungsi , penulisan harus didahului dengan sintaks " fungsi " lalu lanjutkan dengan nama fungsi yang ingin Anda buat . dan isi fungsi ditulis dalam di kurung kurawal buka "{ ” dan kurung kurawal tutup “}”.

Apa fungsi JavaScript dan berikan contohnya?

Javascript dapat digunakan untuk membuat berbagai fitur seperti drag, drop komponen yang semuanya dapat berguna untuk meningkatkan tampilan (antarmuka) dan pengalaman menggunakan web . Selain itu, pemrogram juga dapat memperluas fungsionalitas halaman web dengan menulis cuplikan Javascript untuk add-on pihak ketiga, misalnya.

kode javascript